/* Canopy Forest — component styles. Colours, shadow, radii, key sizes and fonts come from tokens.css. */
:root[lang="zh-Hant"]{--font-sans:var(--font-sans-hant)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--page);color:var(--text);font:400 1.0625rem/1.55 var(--font-sans);-webkit-font-smoothing:antialiased}
h1,h2,h3,p,ul,ol{margin:0;padding:0;list-style:none} b{font-weight:650;color:var(--ink)} a{color:inherit;text-decoration:none}
:focus-visible{outline:2.5px solid var(--g500);outline-offset:3px;border-radius:var(--radius-sm)}
@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}
.wrap{max-width:var(--wrap-max);margin:0 auto;padding:0 clamp(var(--space-16),4vw,var(--space-32))}
.ic{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.caps{font-size:.75rem;font-weight:650;letter-spacing:.12em;text-transform:uppercase}

/* hero */
.hero{position:relative;color:var(--on-hero);background:var(--hero);overflow:hidden;isolation:isolate}
.hero__art{position:absolute;inset:0;z-index:-2}
.hero__art svg{position:absolute;right:0;top:0;height:100%;width:auto;aspect-ratio:800/420;display:block}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--shade,linear-gradient(90deg,var(--hero) 0,rgba(18,58,42,.86) 34%,rgba(18,58,42,0) 68%))}
.nav{display:flex;align-items:center;gap:clamp(12px,3vw,36px);padding-top:12px;padding-bottom:12px}
.nav .logo{height:26px;display:block}
.nav .aca{font-size:.75rem;font-weight:650;letter-spacing:.16em;opacity:.8;border-left:1px solid rgba(255,255,255,.35);padding-left:12px;margin-left:-20px;white-space:nowrap}
.links{display:flex;gap:6px;margin-right:auto}
.links a{min-height:var(--target-min);padding:0 12px;display:inline-flex;align-items:center;font-size:.9375rem;font-weight:500;color:rgba(255,255,255,.78);border-radius:var(--radius-row)}
.links a:hover{color:var(--on-hero);background:rgba(255,255,255,.08)} .links a:active{background:rgba(255,255,255,.16)}
.links a[aria-current="page"]{color:var(--on-hero);box-shadow:inset 0 -2px 0 var(--on-hero);border-radius:10px 10px 0 0}
.lang{display:flex;margin-left:auto;border-radius:var(--radius-pill);padding:2px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22)}
.lang button{font:600 .8125rem var(--font-sans);min-width:40px;min-height:40px;border:0;border-radius:var(--radius-pill);background:none;color:rgba(255,255,255,.8);cursor:pointer}
.lang button[aria-pressed="true"]{background:var(--on-hero);color:var(--g900)} .lang button:active{transform:scale(.94)}
.hero__in{padding-top:clamp(20px,4vw,44px);padding-bottom:clamp(84px,11vw,116px)}
.hero h1,.hero p{text-shadow:0 1px 14px rgba(0,0,0,.28)}
.hero h1{font-weight:650;letter-spacing:-.01em;line-height:1.16;text-wrap:balance}
.hero .lede{color:rgba(255,255,255,.88);margin-top:10px;max-width:30em}
.hero--sm .hero__in{padding-top:8px;padding-bottom:88px}
.hero--sm h1{font-size:clamp(1.875rem,5.4vw,2.75rem);margin-top:6px}
.crumb{display:inline-flex;align-items:center;gap:4px;min-height:var(--target-min);font-size:.9375rem;font-weight:500;color:rgba(255,255,255,.85);margin-left:-6px;padding:0 6px;border-radius:var(--radius-sm)}
.crumb:hover{color:var(--on-hero);background:rgba(255,255,255,.1)}
.hero .sub{color:rgba(255,255,255,.85);margin-top:6px;font-size:1.125rem}
.hero .kick{color:var(--g300)}

/* cards */
.card{background:var(--card);border-radius:var(--radius-card);box-shadow:var(--shadow);padding:clamp(var(--space-18),3vw,var(--space-26))}
.lift{margin-top:calc(-1 * var(--space-lift));position:relative;z-index:1}
.sec-h{font-size:1.375rem;font-weight:650;color:var(--ink);margin:clamp(28px,5vw,44px) 0 14px}
.badge{width:var(--badge-size);height:var(--badge-size);border-radius:50%;background:var(--g100);color:var(--g700);display:grid;place-items:center;flex:none}
.badge.blue{background:var(--blue-bg);color:var(--blue)}
.btn{font:650 1rem var(--font-sans);min-height:var(--btn-height);padding:0 24px;border-radius:var(--radius-btn);border:0;background:var(--btn);color:var(--on-btn);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:10px;white-space:nowrap}
.btn:hover{filter:brightness(1.12)} .btn:active{transform:scale(.98)}
.btn--ghost{background:none;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)} .btn--ghost:hover{filter:none;box-shadow:inset 0 0 0 1.5px var(--g500)}
.count{font-size:.875rem;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.count.is-done{color:var(--g600);font-weight:650}

/* today strip */
.today__h{display:flex;align-items:center;gap:10px;font-weight:650;color:var(--ink)}
.today__h .ic{color:var(--g600)}
.today__h .count{margin-left:auto}
.slots{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto;gap:12px 14px;align-items:center;margin-top:16px}
.slot{display:flex;align-items:center;gap:12px;min-width:0}
.slot small{display:block;font-size:.875rem;color:var(--muted)} .slot b{display:block;line-height:1.3}
.slots>.ic{color:var(--g300);width:18px;height:18px}
@media (max-width:820px){.slots{grid-template-columns:1fr}.slots>.ic{display:none}.slots .btn{width:100%;margin-top:4px}}

/* part cards + section rows */
.parts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:var(--space-16);align-items:start}
.part__h{display:flex;gap:14px;align-items:center}
.part__h .k{color:var(--g600);font-size:.875rem;font-weight:650} .part__h.blue .k{color:var(--blue)}
.part__h b{display:block;font-size:1.125rem;line-height:1.3} .part__h small{display:block;font-size:.875rem;color:var(--muted);margin-top:2px}
.rows{margin-top:12px;border-top:1px solid var(--line)}
.srow{display:grid;grid-template-columns:34px 1fr auto 18px;gap:12px;align-items:center;min-height:var(--row-min);padding:8px 6px;border-bottom:1px solid var(--line);border-radius:var(--radius-row)}
.rows .srow:last-child{border-bottom:0}
.srow:hover{background:var(--g50)} .srow:active{background:var(--g100)}
.srow .n{width:34px;height:34px;border-radius:50%;background:var(--g100);color:var(--g700);display:grid;place-items:center;font-size:.9375rem;font-weight:650;font-variant-numeric:tabular-nums}
.srow.is-done .n{background:var(--g600);color:var(--card)}
.srow .t{font-weight:600;color:var(--ink);line-height:1.3}
.srow .ic{width:18px;height:18px;color:var(--muted)}

/* reader */
.reader{max-width:var(--reader-max)}
.item + .item{border-top:1px solid var(--line)}
.tick{display:grid;grid-template-columns:28px 1fr;gap:14px;padding:15px 0;min-height:58px;cursor:pointer;align-items:start}
.tick input{appearance:none;-webkit-appearance:none;width:28px;height:28px;margin:0;border-radius:50%;border:2px solid var(--g300);background:var(--card);cursor:pointer;display:grid;place-items:center;transition:.18s}
.tick input::after{content:"";width:6px;height:12px;margin-top:-3px;border:solid transparent;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.tick input:checked{background:var(--g600);border-color:var(--g600)} .tick input:checked::after{border-color:var(--card)}
.tick:hover input:not(:checked){border-color:var(--g500);background:var(--g50)} .tick:active input{transform:scale(.88)}
.tick__b{font-weight:650;color:var(--ink)} .tick__t{color:var(--muted)}
.tick__k{display:block;font-size:.75rem;font-weight:650;letter-spacing:.1em;text-transform:uppercase;color:var(--g600);margin-bottom:2px}
.tag{display:inline-block;font-size:.75rem;font-weight:650;color:var(--amber);background:var(--amber-bg);border-radius:var(--radius-pill);padding:1px 10px;margin-left:8px;white-space:nowrap}
.foot{font-size:.875rem;color:var(--muted);margin-top:14px}
.items--terms .tick__k{display:inline-block;font-size:.9375rem;letter-spacing:.04em;color:var(--card);background:var(--g700);border-radius:var(--radius-sm);padding:1px 10px;margin-bottom:6px}
.items--layers{display:grid;gap:5px}
.items--layers .item{border:0;background:var(--g50);padding:2px 18px;border-radius:var(--radius-row)}
.items--layers .item:first-child{border-radius:48px 48px 10px 10px;padding-top:16px;background:var(--amber-bg)}
.items--layers .item:nth-child(2){background:var(--g100);box-shadow:inset 0 0 0 1.5px var(--g500)}
.items--layers .item:last-child{border-radius:10px 10px 26px 26px;padding-bottom:6px;background:var(--amber-bg)}
.items--layers .tick__k{color:var(--ink)} .items--layers .tick__t{color:var(--text)}
.fig{margin-top:20px}
.roles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;align-items:end}
.role{border-radius:var(--radius-panel);padding:14px;background:var(--g50)}
.role:nth-child(2){background:var(--g100);padding-top:34px}
.role:nth-child(3){background:var(--g800);color:var(--on-hero);padding-top:56px}
.role__n{font-size:.75rem;font-weight:650;opacity:.65}.role__name{font-size:1.1875rem;font-weight:650;line-height:1.2}.role__t{font-size:.875rem;line-height:1.4;margin-top:6px}
.flow{display:flex;flex-wrap:wrap;gap:6px}
.flow li{font-size:.875rem;font-weight:600;padding:6px 13px;border-radius:var(--radius-pill);background:var(--g50);color:var(--ink)}
.flow li:first-child{background:none;box-shadow:inset 0 0 0 1.5px var(--line);color:var(--muted)} .flow li.is-key{background:var(--g700);color:var(--card)}
.zones{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.zone{border-radius:var(--radius-panel);padding:14px}
.zone small{display:block;font-size:.6875rem;font-weight:650;letter-spacing:.1em;text-transform:uppercase;opacity:.8}
.zone b{display:block;color:inherit;line-height:1.25;margin-top:2px}.zone span{display:block;font-size:.875rem;margin-top:6px;line-height:1.35;color:var(--text)}
.zone--ok{background:var(--g100);color:var(--g700)}.zone--warn{background:var(--amber-bg);color:var(--amber)}.zone--stop{background:var(--red-bg);color:var(--red)}
@media (max-width:560px){.roles,.zones{grid-template-columns:1fr}.role:nth-child(n){padding-top:14px}}
.pain h2{font-size:1.25rem;font-weight:650;color:var(--ink)}
.pain p{color:var(--muted);font-size:.9375rem;margin-top:4px}
.field{display:block;margin-top:14px}
.field span{display:block;font-size:.8125rem;font-weight:650;color:var(--muted)}
.field input{font:400 1.0625rem var(--font-sans);width:100%;min-height:46px;color:var(--ink);background:none;border:0;border-bottom:1.5px solid var(--line);border-radius:0;padding:6px 0}
.field input:focus{outline:none;border-bottom-color:var(--g500)}
.pain small{display:block;font-size:.8125rem;color:var(--muted);margin-top:12px}
.pager{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0 0}
.pager .btn{min-width:0;overflow:hidden;text-overflow:ellipsis;display:block;line-height:var(--btn-height);text-align:center}
.stack{display:grid;gap:var(--space-16)}
.card h2.ch{font-size:1.25rem;font-weight:650;color:var(--ink);display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:6px}
.bar{height:8px;border-radius:var(--radius-bar);background:var(--g100);overflow:hidden;margin-top:10px}
.bar i{display:block;height:100%;width:0;background:var(--g500);border-radius:var(--radius-bar);transition:width .3s}
.pagefoot{display:flex;justify-content:space-between;gap:var(--space-16);flex-wrap:wrap;color:var(--muted);font-size:.875rem;padding:40px 0 120px}
.pagefoot .caps{font-size:.6875rem}

/* phone: links move to a bottom tab bar */
.tabbar{display:none}
@media (max-width:760px){
  .links{display:none}
  .tabbar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:5;background:var(--card);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
  .tabbar ul{display:grid;grid-template-columns:repeat(3,1fr)}
  .tabbar a{display:grid;justify-items:center;gap:2px;min-height:56px;padding:8px 4px;font-size:.75rem;font-weight:650;color:var(--muted)}
  .tabbar a[aria-current="page"]{color:var(--g600)} .tabbar a:active{background:var(--g50)}
}
@media (min-width:761px){.pagefoot{padding-bottom:56px}}

.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@media (max-width:460px){.nav .aca{display:none}}

/* forest home hero */
.hello{font-size:clamp(1.25rem,3.4vw,1.625rem);font-weight:500}
.brandline{font-size:clamp(2.25rem,7.4vw,3.5rem);font-weight:600;letter-spacing:.07em;line-height:1.1;margin:2px 0 10px}
.hero--home h1{font-size:clamp(1.3125rem,3.8vw,1.875rem);font-weight:600;max-width:20em}
.hero--home .lede{font-size:1.0625rem}
.hero--home .hero__in{min-height:clamp(250px,34vw,330px)}
@media (max-width:760px){.hero{--shade:linear-gradient(180deg,rgba(18,58,42,.82) 0,rgba(18,58,42,.6) 50%,rgba(18,58,42,.12) 100%)}}