/* ===== 出发·开枝:一株水彩植物插画。几何和画法在 shared/plant.js(几何基准1200x660，镜头可独立平移缩放),
   参数见 docs/ui-ux-design.md §12.7。这里只管颜色、线条粗细、动画和窄屏那一版 ===== */
/* 颜色:老枝木色、新梢绿(枝的渐变在 shared/plant.js 里按层掺);两种叶绿交替,阴影里的叶子更暗,叶和萼用深绿勾边;
   树皮的深色边线和亮面反光;土是浅赭 */
:root{ --g-wood:#7a5b3d; --g-shoot:#6e8b47; --g-leaf:#97b571; --g-leaf2:#b0c785; --g-leaf-ink:#4f6b37; --g-leaf-sh:#6f8c54;
       --g-soil:#e6d8bd; --g-soil-ink:#b59c74; --g-bark-ink:#4a3523; --g-bark-hl:#d9bf94 }
.gcount{font-size:12.5px;color:var(--ink3);margin:6px 0 0}
.gstage{position:relative;margin:6px 0 24px}
.gsvg{display:block;width:100%;height:100%;overflow:hidden}

/* 枝:填色形状 + 暗面深边线 + 亮面淡边线 + 亮面反光 + 树皮纹;另叠一根透明粗线接指针 */
.gbr{stroke:none}
.gedge{fill:none;stroke:var(--g-bark-ink);stroke-linecap:round;stroke-linejoin:round;opacity:.7}
.gedge.lt{stroke-width:.5;opacity:.35}
.ghl{fill:none;stroke:var(--g-bark-hl);stroke-linecap:round;opacity:.42}
.gbark{fill:none;stroke:var(--g-bark-ink);stroke-width:.75;stroke-linecap:round;opacity:.5}
.ghit{fill:none;stroke:transparent;stroke-width:16;pointer-events:stroke;cursor:help}
.gb:hover .gbr{filter:drop-shadow(0 0 3px color-mix(in srgb,var(--ink) 30%,transparent))}

/* 叶 */
.gleaf{transform-origin:0 0}
.glf{fill:var(--g-leaf);fill-opacity:.92;stroke:var(--g-leaf-ink);stroke-opacity:.75;stroke-width:.7;stroke-linejoin:round}
.glf.alt{fill:var(--g-leaf2)}   /* 翻过来露出叶背的 */
.glf.bk{fill:var(--g-leaf-sh)}   /* 藏在枝后面的,在阴影里 */
.gpet{fill:none;stroke:var(--g-leaf-ink);stroke-width:1.1;stroke-linecap:round}
.gvein{fill:none;stroke:var(--g-leaf-ink);stroke-width:.85;stroke-linecap:round;opacity:.75}
.gvein.fine{stroke-width:.45;opacity:.55}

/* 花:花瓣的填色和墨线在 shared/plant.js 里按大类给(写在外层 <g> 上,里面继承) */
.gfl{cursor:pointer;outline:none}
.gfh{fill:transparent;stroke:none}   /* 比花大一圈的透明圆:好点中,也是键盘焦点框 */
.gfl[data-selected] .gfh{stroke:var(--accent);stroke-width:2.5}
.gnm[data-selected] text{fill:var(--accent);font-weight:650}
.gfl:focus-visible .gfh{stroke:var(--accent);stroke-width:1.5;stroke-dasharray:3 3}
.gbud{transform-origin:0 0;transition:scale .18s var(--ease);stroke-linejoin:round}
.gfl:hover .gbud,.gfl:focus-visible .gbud{scale:1.25}
.gbud *{vector-effect:non-scaling-stroke}   /* 花面压扁了,墨线不能跟着变细 */
.gpt{fill-opacity:.9;filter:drop-shadow(0 0 .9px color-mix(in srgb,var(--ink) 38%,transparent))}   /* 压住别的花瓣的地方深一点 */
.gin{filter:brightness(.93) drop-shadow(0 0 .9px color-mix(in srgb,var(--ink) 38%,transparent))}   /* 重瓣的里面两层 */
.gin2{filter:brightness(.85) drop-shadow(0 0 .9px color-mix(in srgb,var(--ink) 38%,transparent))}
.gpv{fill:none;stroke-width:.45;opacity:.42;stroke-linecap:round}   /* 花瓣上的细脉 */
.gctr{fill:#efc75e;stroke:#a77a2c;stroke-width:.6}
.gctr.dk{fill:#8a5a2b;stroke:#5c3b1b}
.gctr.hi{fill:#fff3c8;stroke:none;opacity:.35}
.gstm{fill:#c98a2e;stroke:none}
.gspot{stroke:none;fill:currentColor;opacity:.5}
.gfil{fill:none;stroke-width:.6}
.ganth{fill:#b0652a;stroke:none}
.gmouth{stroke:none;filter:brightness(.62);opacity:.55}
.gsepal{fill:var(--g-leaf);stroke:var(--g-leaf-ink);stroke-width:.6}

/* 土和木牌 */
.gsoil{fill:var(--g-soil);stroke:var(--g-soil-ink);stroke-width:.8;stroke-opacity:.7}
.gclod{fill:var(--g-soil-ink);opacity:.28}
.gpeb{fill:#a89a88;stroke:#7d6f5e;stroke-width:.5}
.ggrass{fill:var(--g-leaf);stroke:var(--g-leaf-ink);stroke-width:.5}
.ggrass.alt{fill:var(--g-leaf2)}
.groots{fill:none;stroke:var(--g-wood);stroke-width:1.3;stroke-linecap:round;opacity:.7}
.gstake{stroke:var(--g-wood);stroke-width:3.5;stroke-linecap:round}
.gtag{fill:#f4e8cc;stroke:var(--g-wood);stroke-width:1.2}
.groot text{font-family:var(--f-disp);font-size:19px;fill:var(--ink)}
.groot:hover .gtag{fill:#fbf1da}

/* 名字:一圈底色描边,压在枝上也读得清 */
.gnm text{fill:var(--ink);paint-order:stroke;stroke:var(--bg);stroke-width:4px;stroke-linejoin:round}
.gnm.l1 text{font-size:var(--label-size,15.5px);font-weight:600}
.gnm.l2 text{font-size:var(--label-size,12.5px);fill:var(--ink2)}
.gnm.l3 text{font-size:var(--label-size,11.5px);fill:var(--ink2)}
.gnm:hover text{fill:var(--accent)}

/* 生长:枝从起点往梢头一点点露出来(遮罩里的白线 pathLength=1,虚线偏移从 1 到 0),叶子冒出、花开,名字最后淡入。
   --t 是这一个的起始时间,由 grow() 按层、按序号算好;只给这一次新冒出来的。
   静止状态就是长好的样子,动画只写「从哪来」并用 backwards 填充等待期:
   动画被跳过、被取消(减少动效、截图工具)时看到的都是完整的植物,不会停在半截 */
.gmk{fill:none;stroke:#fff;stroke-linecap:round}
.gnew.gmk{stroke-dasharray:1;animation:g-draw .5s cubic-bezier(.3,.6,.4,1) var(--t) backwards}
.gnew.gleaf{animation:g-bloom .35s var(--ease) var(--t) backwards}
.gnew.gbud{animation:g-bloom .4s var(--ease) var(--t) backwards}
.gnew.glb{animation:g-fade .3s ease var(--t) backwards}
@keyframes g-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes g-bloom{0%{scale:0}70%{scale:1.2}100%{scale:1}}
@keyframes g-fade{from{opacity:0}}
@media (prefers-reduced-motion:reduce){ .gnew.gmk,.gnew.gleaf,.gnew.gbud,.gnew.glb{animation:none} }

/* 指到枝或花上的小卡:这条关联是谁到谁、为什么,以及能做什么 */
.gcard{position:absolute;z-index:5;width:260px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;
  background:var(--card);box-shadow:0 12px 30px -16px rgba(0,0,0,.35);font-size:13px;line-height:1.55}
.gck{font-size:10.5px;letter-spacing:.08em;color:var(--ink3);text-transform:uppercase}
.gcn{font-weight:600;margin:2px 0 5px}.gcard .gck{margin-bottom:7px;letter-spacing:0;text-transform:none;font-size:12px}
.gcn span{color:var(--ink2);font-weight:500}
.gcn a:hover{color:var(--accent)}
.gcard p{margin:0 0 8px;color:var(--ink2)}


.glist{display:none;position:relative;padding:4px 0 8px 14px;margin-left:6px}
.show-list .glist{display:block}
.show-list .plant-viewport,.show-list .gcard{display:none}
.glr{font-family:var(--f-disp);font-size:22px;margin:0 0 8px}
.glist ol{list-style:none;margin:0;padding:0}
.glist li{position:relative;padding:10px 0 10px 18px;border-top:1px solid var(--line)}
.glist li ol{margin-top:6px;padding-left:12px;border-left:1px solid var(--line)}
.glist a{font-weight:600}
.gln{display:block;font-size:14px;color:var(--ink2);line-height:1.6;margin-top:4px}
.glt{font-size:13px;color:var(--accent);margin-top:6px;min-height:36px}

.plant-controls{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin:16px 0 4px}
.plant-zoom{display:flex;gap:4px;flex-wrap:wrap}
.plant-zoom[hidden]{display:none}
.plant-zoom button{padding:8px 12px;border:1px solid var(--line);border-radius:999px;font-size:13px;min-height:38px}
.plant-help{font-size:13px;color:var(--ink2);margin:0;max-width:65ch}.plant-help[open]{flex-basis:100%;order:2}.plant-help button,.plant-controls>button{color:var(--accent);min-height:44px;font-size:13px}.plant-help summary{cursor:pointer;padding:8px 0}.plant-help p{line-height:1.7}
.plant-viewport{overflow:hidden;touch-action:none;cursor:grab;max-width:100%;overscroll-behavior:contain;border:1px solid transparent}
.plant-viewport .gsvg{max-width:none;user-select:none;-webkit-user-select:none}.plant-viewport:active{cursor:grabbing}
@media(max-width:700px),(max-height:520px){
 .plant-viewport{height:clamp(240px,calc(100svh - var(--nav) - 230px),660px);border-color:var(--line);border-radius:12px;touch-action:none}
 .plant-viewport .gsvg{max-height:none}
 .gcard{position:static;width:100%;margin-top:10px;box-shadow:none}
}
@media(pointer:coarse){.plant-zoom button,.glt{min-height:44px}}
@media(max-height:520px){.plant-controls{gap:6px}.plant-help summary{padding:4px 0}}

.plant-reset{font-size:13px;color:var(--accent);min-height:44px;padding:0 8px}

.plant-zoom svg{display:block;width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.5}