/* ============================================================
   components.css  ·  layout + components for the heat-map
   Mobile-first. Certainty-as-material lives here (hatch/ring/
   dashed/opacity) — pure CSS/SVG, greyscale-safe.
   ============================================================ */

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:var(--font); font-size:var(--fs-md); line-height:var(--lh-base);
  color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.num,.band,.pv .q,.legend b,.kfig{ font-family:var(--mono); font-variant-numeric:tabular-nums; }
button{ font-family:inherit; }
a{ color:var(--brand2); text-decoration:none; }
::selection{ background:var(--brand-soft); }

/* ---- STUDIO control strip (prototype chrome, not the product) ---- */
.studio{
  display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap;
  padding:8px var(--s4); background:#14130f; color:#efe9da;
  font-size:var(--fs-xs); letter-spacing:.01em; position:sticky; top:0; z-index:60;
}
.studio .lab{ color:#a59c86; font-weight:var(--fw-semi); text-transform:uppercase; letter-spacing:.08em; font-size:var(--fs-2xs); }
.studio .seg{ display:inline-flex; background:#262318; border-radius:var(--r-pill); padding:3px; gap:2px; }
.studio .seg button{
  border:0; background:transparent; color:#cabfa6; cursor:pointer;
  padding:5px 11px; border-radius:var(--r-pill); font-size:var(--fs-2xs); font-weight:var(--fw-semi); letter-spacing:.02em;
}
.studio .seg button[aria-pressed="true"]{ background:var(--brand); color:#fff; }
.studio .grow{ flex:1; }
.studio .hint{ color:#8d856f; }

/* ---- APP FRAME ------------------------------------------------ */
.app{ min-height:100vh; display:flex; flex-direction:column; }
.top{
  display:flex; align-items:center; gap:var(--s3); padding:var(--s3) var(--s4);
  background:var(--surface); border-bottom:1px solid var(--line); position:sticky;
  top:36px; z-index:40;
}
.brand{ display:flex; align-items:center; gap:10px; cursor:pointer; }
.brand .mk{ width:34px; height:34px; flex:0 0 34px; }
.brand .wm{ display:flex; flex-direction:column; line-height:1; }
.brand .wm b{ font-size:1.16rem; font-weight:var(--fw-x); letter-spacing:-.01em; color:var(--ink); }
.brand .wm span{ font-size:var(--fs-2xs); color:var(--muted); letter-spacing:.14em; text-transform:uppercase; margin-top:3px; }
.top .grow{ flex:1; }
.top .who{ font-size:var(--fs-sm); color:var(--muted); }
#sharebtn{ white-space:nowrap; }
@media (max-width:620px){ .top .who{ display:none; } }

/* primary action / ghost / secondary */
.btn{
  font:inherit; font-weight:var(--fw-semi); cursor:pointer; border:1px solid var(--brand);
  background:var(--brand); color:#fff; padding:.55rem 1rem; border-radius:var(--r-sm);
  display:inline-flex; align-items:center; gap:.45rem; line-height:1.2; white-space:nowrap;
  transition:background .14s, box-shadow .14s, transform .05s, border-color .14s;
}
.btn:hover{ background:var(--brand2); border-color:var(--brand2); box-shadow:var(--sh-sm); }
.btn:active{ transform:translateY(1px); }
.btn.ghost{ background:transparent; color:var(--brand2); border-color:transparent; }
.btn.ghost:hover{ background:var(--brand-soft); box-shadow:none; }
.btn.secondary{ background:var(--surface); color:var(--ink); border-color:var(--line2); }
.btn.secondary:hover{ background:var(--surface2); border-color:var(--muted); }
.btn.full{ width:100%; justify-content:center; padding:.8rem 1rem; font-weight:var(--fw-bold); }
.btn.sm{ padding:.36rem .7rem; font-size:var(--fs-sm); }
.btn:disabled{ opacity:.5; cursor:not-allowed; }

/* ---- MAIN SPLIT: map stage + detail panel --------------------- */
.main{ flex:1; display:flex; min-height:0; }
.stage{ position:relative; flex:1; min-width:0; display:flex; flex-direction:column;
  background:radial-gradient(120% 90% at 50% -10%, var(--surface2), var(--bg)); }
.panel{
  flex:0 0 380px; width:380px; background:var(--surface); border-left:1px solid var(--line);
  display:flex; flex-direction:column; overflow-y:auto; max-height:calc(100dvh - 88px); /* dvh: visible mobile viewport */
}

/* ---- stage header: region tabs + breadcrumb + as-of ----------- */
.stagehead{ padding:var(--s4) var(--s5) var(--s2); display:flex; flex-direction:column; gap:var(--s3); }
.regiontabs{ display:flex; gap:var(--s2); flex-wrap:wrap; align-items:center; }
.rt{
  border:1px solid var(--line2); background:var(--surface); color:var(--ink);
  border-radius:var(--r-pill); padding:.4rem .85rem; font-size:var(--fs-sm); font-weight:var(--fw-semi);
  cursor:pointer; display:inline-flex; align-items:center; gap:.4rem;
}
.rt[aria-pressed="true"]{ background:var(--brand); border-color:var(--brand); color:#fff; }
.rt.soon{ cursor:not-allowed; color:var(--muted); border-style:dashed; opacity:.85; }
.rt.soon .tag{ font-size:var(--fs-2xs); background:var(--bg2); color:var(--muted); padding:.05rem .4rem; border-radius:var(--r-pill); }
.crumbs{ display:flex; align-items:center; gap:.3rem; font-size:var(--fs-sm); flex-wrap:wrap; }
.crumbs button{ border:0; background:transparent; color:var(--brand2); cursor:pointer; font:inherit; font-weight:var(--fw-semi); padding:.15rem .25rem; border-radius:6px; }
.crumbs button:hover{ background:var(--brand-soft); }
.crumbs .sep{ color:var(--muted); }
.crumbs .cur{ color:var(--ink); font-weight:var(--fw-bold); }
.asof{ font-size:var(--fs-xs); color:var(--muted); display:flex; align-items:center; gap:.4rem; }
.asof .dot{ width:7px; height:7px; border-radius:50%; background:var(--pv-verified); }

/* ---- MAP ------------------------------------------------------ */
.mapwrap{ flex:1; min-height:0; position:relative; padding:0 var(--s5) var(--s4); }
.mapwrap svg{ width:100%; height:100%; display:block; overflow:visible; }
.cell{ stroke:var(--surface); stroke-width:.8; cursor:pointer; transition:opacity .15s, filter .15s; }
.cell:hover{ filter:brightness(1.06) saturate(1.05); }
.cell.sel{ stroke:var(--ink); stroke-width:1.8; }
.cell.haze{ fill:var(--haze); stroke:var(--haze-ln); cursor:default; }
.cell.stale{ opacity:.62; }
.cell-ring{ fill:none; stroke:var(--pv-verified); stroke-width:var(--verified-ring); pointer-events:none;
  filter:drop-shadow(0 0 2px color-mix(in srgb,var(--pv-verified) 50%, transparent)); }
.cell-est-edge{ fill:none; stroke:var(--pv-est); stroke-width:var(--est-edge); stroke-dasharray:3 3; pointer-events:none; opacity:.85; }
.cell-lbl{ font-family:var(--mono); font-size:10px; fill:var(--ink2); pointer-events:none; paint-order:stroke;
  stroke:var(--surface); stroke-width:2.4px; text-anchor:middle; font-weight:600; }
.c-pin{ pointer-events:none; }

/* season DIRECTION overlays (additive, stacked ABOVE the fill, never touching
   the est dashed-edge / verified ring strokes). A = waning wash · peak hairline;
   glyph (▲◆▽) is the non-colour cue for CVD + tiny cells. */
.cell-wane{ pointer-events:none; }                     /* fill:url(#waneHatch) set in JS */
.cell-peakglow{ fill:none; stroke:var(--season-peak-glow); stroke-width:2.4; opacity:.9; pointer-events:none; }
.wane-veil{ fill:var(--season-wane-veil); opacity:var(--season-wane-veil-a); }   /* <pattern> child */
.wane-hatch{ stroke:var(--season-wane-hatch); stroke-width:1.5; }                /* <pattern> child */
.phase-mk{ pointer-events:none; }
.phase-mk .disc{ fill:var(--season-mark); paint-order:stroke; stroke:var(--season-mark-halo); stroke-width:1.6; }
/* "ทิศทางฤดู" lens — spent (ปลายฤดู) cells recede so live supply is spotlit */
.cell.dim,.cell-wane.dim,.phase-mk.dim{ opacity:.24; transition:opacity .15s; }

/* tooltip */
.tip{
  position:fixed; z-index:55; pointer-events:none; background:var(--surface); color:var(--ink);
  border:1px solid var(--line2); border-radius:var(--r-sm); box-shadow:var(--sh-md);
  padding:.5rem .65rem; font-size:var(--fs-sm); max-width:240px; line-height:1.35; opacity:0; transition:opacity .1s;
}
.tip.on{ opacity:1; }
.tip h5{ margin:0 0 .25rem; font-size:var(--fs-sm); font-weight:var(--fw-bold); }
.tip .r{ display:flex; justify-content:space-between; gap:1rem; color:var(--muted); }
.tip .r b{ color:var(--ink); font-family:var(--mono); }

/* ---- LEGEND --------------------------------------------------- */
.legend{ position:absolute; left:var(--s5); bottom:var(--s4); background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:.6rem .7rem; box-shadow:var(--sh-sm); max-width:230px; }
.legend .lt{ font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:.07em; color:var(--muted); font-weight:var(--fw-bold); margin-bottom:.35rem; }
.legend .ramp{ display:flex; height:10px; border-radius:3px; overflow:hidden; }
.legend .ramp i{ flex:1; }
.legend .scl{ display:flex; justify-content:space-between; font-size:var(--fs-2xs); color:var(--muted); margin-top:3px; }
.legend .keys{ margin-top:.5rem; display:flex; flex-direction:column; gap:3px; }
.legend .key{ display:flex; align-items:center; gap:.4rem; font-size:var(--fs-2xs); color:var(--ink2); }
.legend .sw{ width:16px; height:12px; border-radius:3px; flex:0 0 16px; }
.legend .sw.haze{ background:var(--haze); border:1px solid var(--haze-ln); }
.legend .sw.est{ background:var(--ramp-3); position:relative; overflow:hidden; }
.legend .sw.ver{ background:var(--ramp-4); box-shadow:inset 0 0 0 1.6px var(--pv-verified); }
/* season "ทิศทางฤดู / direction" tier (mirrors the .keys grammar) */
.legend .season{ margin-top:.5rem; padding-top:.45rem; border-top:1px solid var(--line); }
.legend .season .lt{ margin-bottom:.3rem; }
.legend .skeys{ display:flex; flex-direction:column; gap:4px; }
.legend .skey{ display:flex; align-items:center; gap:.4rem; font-size:var(--fs-2xs); color:var(--ink2); }
.legend .sgly{ font-family:var(--mono); font-weight:700; color:var(--season-mark); width:14px; text-align:center; flex:0 0 14px; }
.legend .ssw{ width:16px; height:12px; border-radius:3px; flex:0 0 16px; position:relative; overflow:hidden; background:var(--ramp-3); }
.legend .ssw.peak{ box-shadow:inset 0 0 0 2px var(--season-peak-glow); }

/* ---- PANEL content -------------------------------------------- */
.pad{ padding:var(--s5); }
.eyebrow{ font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:.1em; color:var(--muted); font-weight:var(--fw-bold); }
.pt{ font-size:var(--fs-xl); font-weight:var(--fw-x); letter-spacing:-.015em; line-height:var(--lh-tight); margin:.25rem 0 .1rem; }
.psub{ color:var(--muted); font-size:var(--fs-sm); }

/* certainty-aware DETAIL card */
.detail{ margin-top:var(--s4); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--surface); box-shadow:var(--sh-sm); }
.detail .dh{ padding:var(--s4) var(--s4) var(--s3); display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s3); border-bottom:1px solid var(--line); }
.detail .dh .nm{ font-size:var(--fs-lg); font-weight:var(--fw-bold); letter-spacing:-.01em; }
.detail .dh .pl{ font-size:var(--fs-xs); color:var(--muted); }
.detail .db{ padding:var(--s4); }
.bandrow{ display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap; }
.band{ font-size:var(--fs-2xl); font-weight:var(--fw-bold); letter-spacing:-.01em; line-height:1; }
.band .unit{ font-size:1rem; color:var(--muted); font-weight:var(--fw-semi); }
.band .tilde{ color:var(--pv-est); }
.metricrow{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s3); margin-top:var(--s4); }
.metric{ background:var(--surface2); border:1px solid var(--line); border-radius:var(--r); padding:.6rem .7rem; }
.metric .k{ font-size:var(--fs-2xs); color:var(--muted); text-transform:uppercase; letter-spacing:.05em; }
.metric .v{ font-size:1.05rem; font-weight:var(--fw-bold); margin-top:2px; }
.metric .v .kfig{ font-size:1.05rem; }

/* harvest-window bar */
.hwin{ margin-top:var(--s4); }
.hwin .lab{ font-size:var(--fs-xs); color:var(--muted); display:flex; justify-content:space-between; margin-bottom:5px; }
.hwin .track{ height:12px; border-radius:var(--r-pill); background:var(--bg2); position:relative; overflow:hidden; }
.hwin .fill{ position:absolute; top:0; bottom:0; border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--ramp-2),var(--ramp-4)); }
.hwin .now{ position:absolute; top:-3px; bottom:-3px; width:2px; background:var(--ink); }
.hwin .ticks{ display:flex; justify-content:space-between; font-size:var(--fs-2xs); color:var(--muted); margin-top:4px; font-family:var(--mono); }

/* disclaimer */
.disc{ margin-top:var(--s4); display:flex; gap:.55rem; background:var(--pv-est-bg); border:1px solid var(--pv-est-ln);
  border-radius:var(--r); padding:.6rem .7rem; font-size:var(--fs-xs); color:var(--ink2); line-height:1.45; }
.disc .ic{ color:var(--pv-est); font-weight:var(--fw-bold); }

/* ---- PROVENANCE CHIP ------------------------------------------ */
.pv{ display:inline-flex; align-items:center; gap:5px; vertical-align:middle; font-size:var(--fs-xs);
  font-weight:var(--fw-semi); line-height:1.5; padding:.13rem .55rem; border-radius:var(--r-pill); white-space:nowrap; border:1px solid transparent; }
.pv .g{ font-weight:var(--fw-x); font-size:.9em; }
.pv .q{ font-weight:var(--fw-bold); opacity:.95; }
.pv.official{ background:var(--pv-official-bg); color:var(--pv-official); border-color:var(--pv-official-ln); }
.pv.est{ background:var(--pv-est-bg); color:var(--pv-est); border-color:var(--pv-est-ln); }
.pv.verified{ background:var(--pv-verified-bg); color:var(--pv-verified); border-color:var(--pv-verified-ln); }
.pv.private{ background:var(--pv-private-bg); color:var(--pv-private); border-color:var(--pv-private-ln); }
.pv.stale{ background:var(--pv-stale-bg); color:var(--pv-stale); border-color:var(--pv-stale-ln); border-style:dashed; }

/* ---- LOGIN GATE seam ------------------------------------------ */
.gate{ margin-top:var(--s4); border:1.5px dashed var(--line2); border-radius:var(--r-lg); padding:var(--s5); text-align:center; background:var(--surface2); }
.gate .lk{ font-size:1.6rem; }
.gate h4{ margin:.5rem 0 .3rem; font-size:var(--fs-lg); }
.gate p{ color:var(--muted); font-size:var(--fs-sm); margin:0 0 var(--s4); }
.gate .why{ text-align:left; font-size:var(--fs-xs); color:var(--ink2); background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:.6rem .7rem; margin-bottom:var(--s4); }
.gate .why .row{ display:flex; gap:.5rem; padding:.18rem 0; }
.gate .why .row .c{ color:var(--pv-verified); font-weight:var(--fw-bold); }
.line-cta{ background:#06c755 !important; border-color:#06c755 !important; color:#fff !important; }
.line-cta:hover{ background:#05b14c !important; border-color:#05b14c !important; }

/* ---- AI COMMAND BAR + answer card ----------------------------- */
.cmd{ margin:var(--s2) auto 0; z-index:20;
  width:min(620px,calc(100% - var(--s6))); display:flex; align-items:center; gap:.5rem;
  background:var(--surface); 
  border:1px solid var(--line2); border-radius:var(--r-pill); padding:.4rem .5rem .4rem .9rem; box-shadow:var(--sh-md); }
.cmd .spark{ color:var(--brand); font-size:1.05rem; }
.cmd input{ flex:1; border:0; background:transparent; font:inherit; color:var(--ink); outline:none; min-width:0; }
.cmd input::placeholder{ color:var(--muted); }
.cmd .go{ flex:0 0 auto; }
.ai-card{ margin-top:var(--s4); border:1px solid var(--brand); border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--sh-md); overflow:hidden; }
.ai-card .ah{ display:flex; align-items:center; gap:.5rem; padding:.6rem .8rem; background:var(--brand-soft); color:var(--brand-ink); font-weight:var(--fw-bold); font-size:var(--fs-sm); }
.ai-card .ab{ padding:var(--s4); }
.ai-card .claim{ font-size:var(--fs-md); line-height:1.5; }
.ai-card .src{ margin-top:.6rem; font-size:var(--fs-xs); color:var(--muted); }
.ai-card .notclaim{ margin-top:.6rem; font-size:var(--fs-xs); color:var(--ink2); background:var(--surface2); border:1px solid var(--line); border-radius:var(--r-sm); padding:.5rem .6rem; }
.ai-card .notclaim b{ color:var(--bad); }

/* ---- STATES --------------------------------------------------- */
.state{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:var(--s7) var(--s5); gap:.5rem; }
.state .ic{ font-size:2rem; opacity:.8; }
.state h3{ margin:.2rem 0 0; font-size:var(--fs-lg); }
.state p{ color:var(--muted); margin:0; max-width:340px; }
.skel{ background:linear-gradient(90deg,var(--bg2) 25%,var(--surface2) 37%,var(--bg2) 63%); background-size:400% 100%;
  animation:shf 1.4s ease infinite; border-radius:var(--r); }
@keyframes shf{ to{ background-position:-135% 0; } }
@media (prefers-reduced-motion:reduce){ .skel{ animation:none; } }

/* ---- MODAL + OG card ------------------------------------------ */
.scrim{ position:fixed; inset:0; background:rgba(15,16,12,.55); z-index:80;
  display:flex; align-items:center; justify-content:center; padding:var(--s4); opacity:0; pointer-events:none; transition:opacity .16s; }
.scrim.on{ opacity:1; pointer-events:auto; }
.sheet{ background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--sh-lg); width:min(440px,100%); padding:var(--s5); transform:translateY(8px); transition:transform .16s; }
.scrim.on .sheet{ transform:none; }
.sheet h3{ margin:0 0 .3rem; font-size:var(--fs-lg); }
.sheet .sub{ color:var(--muted); font-size:var(--fs-sm); margin:0 0 var(--s4); }
/* OG card preview — what a LINE share looks like */
.og{ border:1px solid var(--line2); border-radius:var(--r); overflow:hidden; background:var(--surface); box-shadow:var(--sh-sm); }
.og .ogmap{ height:150px; position:relative; background:var(--bg2); }
.og .ogmap svg{ width:100%; height:100%; }
.og .ogbadge{ position:absolute; left:10px; top:10px; background:var(--surface); border:1px solid var(--line2); border-radius:var(--r-pill);
  font-size:var(--fs-2xs); padding:.15rem .5rem; font-weight:var(--fw-bold); display:flex; align-items:center; gap:.3rem; }
.og .ogseal{ position:absolute; right:10px; bottom:-26px; width:92px; height:92px; z-index:2;
  filter:drop-shadow(0 4px 10px rgba(20,24,18,.28)); transform:rotate(-7deg); }
.og .ogseal svg{ width:100%; height:100%; display:block; }
.og .ogfoot{ display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  margin-top:.6rem; padding-top:.55rem; border-top:1px solid var(--line); }
.og .oglock{ display:flex; align-items:center; gap:8px; }
.og .oglmk, .og .oglmk svg{ width:26px; height:26px; display:block; }
.og .oglwm{ display:flex; flex-direction:column; line-height:1; }
.og .oglwm b{ font-size:.86rem; font-weight:var(--fw-x); letter-spacing:-.01em; color:var(--ink); }
.og .oglwm span{ font-size:.5rem; letter-spacing:.2em; color:var(--muted); font-family:var(--mono); margin-top:3px; }
.og .ogb{ padding:.7rem .8rem; }
.og .ogb .ogt{ font-weight:var(--fw-bold); font-size:var(--fs-sm); }
.og .ogb .ogd{ color:var(--muted); font-size:var(--fs-xs); margin-top:2px; }
.og .ogb .ogu{ color:var(--brand2); font-size:var(--fs-2xs); margin-top:.4rem; font-family:var(--mono); }
.linkrow{ display:flex; gap:.5rem; margin-top:var(--s4); }
.linkrow input{ flex:1; border:1px solid var(--line2); border-radius:var(--r-sm); padding:.5rem .6rem; font-family:var(--mono); font-size:var(--fs-xs); background:var(--surface2); color:var(--ink2); min-width:0; }

/* ---- a11y focus ----------------------------------------------- */
:focus-visible{ outline:2px solid var(--ring); outline-offset:2px; border-radius:6px; }

/* tier-upgrade glint (verified moat proof) */
@keyframes glint{ 0%{ filter:brightness(1); } 40%{ filter:brightness(1.25); } 100%{ filter:brightness(1); } }
.cell.glint{ animation:glint 1.1s ease; }

/* ---- RESPONSIVE: mobile-first stacks the panel as a sheet ----- */
@media (max-width:880px){
  .main{ flex-direction:column; }
  .panel{ flex:none; width:auto; border-left:0; border-top:1px solid var(--line); max-height:none; }
  .mapwrap{ min-height:46vh; }
  .legend{ left:var(--s4); bottom:var(--s3); }
  .cmd{ width:calc(100% - var(--s4)); }
  .top{ top:0; }
  .studio{ position:static; }
}
@media (pointer:coarse){
  .btn,.rt,.chip{ min-height:44px; }
  .crumbs button{ min-height:36px; }
}
@media (max-width:480px){
  .stagehead{ padding:var(--s3) var(--s4) var(--s2); }
  .mapwrap{ padding:0 var(--s4) var(--s3); }
  .pad{ padding:var(--s4); }
  .band{ font-size:2rem; }
}