/* ==========================================================================
   Transect — design tokens v1 (brass)
   --accent is no longer OnX red: #e2231a is --z-high in the map symbology, so
   chrome and data were sharing a hue. Brass sits outside every colour the map
   spends (blue = water, warm ramp = huntability, red/orange/yellow = zones).
   ========================================================================== */
:root{
  --bg:#0E1113; --surface:#161A1D; --surface-2:#1C2226; --surface-3:#232B30;
  --line:#2A3136; --line-2:#38434A;
  --text:#E7ECEF; --text-2:#A3B0B7; --text-3:#79868D; --text-4:#4E5A61;

  --accent:#C8963E; --accent-hi:#DCA94D; --accent-on:#12100A;
  --accent-tint:#C8963E1F; --accent-ring:#C8963E1A;

  --good:#3FBF6E; --good-bg:#14361F; --good-fg:#4FD183;
  --warn:#E0A62E; --warn-bg:#241A0C; --warn-line:#6B4E1C; --warn-fg:#C6B48C;
  --danger:#C9564A; --danger-bg:#2A1310; --danger-line:#7A3128; --danger-fg:#E58077;

  /* DATA · Cartes Xperts symbology — FROZEN, not ours to redesign */
  --z-high:#E2231A; --z-med:#FF8C00; --z-low:#FFD400;
  --thermal:#FF00C8; --saline:#0047FF; --glassing:#1F6F3F; --camp:#4B2E05;
  --browse:#8FB43A; --halo:#0B0F0D;
  --water-shore:#7FC4E8; --water-shallow:#3D86A8; --water-deep:#123449;
  --ref-outline:#CBD5DA;
  --fill-alpha:0.14;

  --sans:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;
  --serif:'IBM Plex Serif',Georgia,serif;

  --r-xs:3px; --r-sm:5px; --r-md:7px; --r-lg:10px; --r-xl:12px;
  --s-1:4px; --s-2:8px; --s-3:14px; --s-4:20px; --s-5:30px; --s-6:42px;
  --panel-w:380px; --dock-w:296px; --rail-w:46px; --bar-h:52px;
  --e-panel:0 6px 24px #0008; --e-pop:0 12px 34px #000b; --e-modal:0 20px 60px #000c;
  --focus:0 0 0 2px var(--bg),0 0 0 4px var(--accent);
  --blur:blur(10px);
  /* legacy aliases still referenced in places */
  --panel:var(--surface); --panel2:var(--surface-2); --muted:var(--text-2);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);
  font:400 13px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
#map{position:absolute;inset:0}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:5px}
::-webkit-scrollbar-thumb:hover{background:var(--line-2)}

/* ---- type utilities ---- */
.t-h1{font:600 22px/1.2 var(--sans);letter-spacing:-.01em;color:var(--text)}
.t-h2{font:600 15px/1.3 var(--sans);color:var(--text)}
.t-label{font:500 11px/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text-2)}
.t-micro{font:600 9.5px/1.2 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
.t-data,.mono{font:500 12px/1.3 var(--mono);color:var(--text)}
.s{font:400 11.5px/1.55 var(--sans);color:var(--text-2)}

/* ==========================================================================
   TOP BAR — numbered steps, plan identity, actions
   ========================================================================== */
#tabbar{position:absolute;top:0;left:0;right:0;height:var(--bar-h);z-index:9;
  display:flex;align-items:center;gap:var(--s-3);padding:0 var(--s-3);
  background:var(--surface);border-bottom:1px solid var(--line)}
#tabbar .brand{font:700 14px/1 var(--sans);letter-spacing:.24em;color:var(--text)}
#tabbar button[data-tab]{display:inline-flex;align-items:center;gap:7px;
  background:transparent;color:var(--text-2);border:0;border-radius:var(--r-md);
  padding:7px 12px;cursor:pointer;font:500 12px/1 var(--sans)}
#tabbar button[data-tab]:hover{background:var(--surface-2);color:var(--text)}
#tabbar button[data-tab] .n{display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;min-width:16px;border-radius:50%;background:var(--line);color:var(--text-3);
  font:600 9.5px/1 var(--mono);letter-spacing:0;font-variant-numeric:tabular-nums;flex:0 0 auto}
#tabbar button[data-tab].on{background:var(--accent-tint);color:var(--accent-hi);font-weight:600}
#tabbar button[data-tab].on .n{background:var(--accent);color:var(--accent-on)}
#tabbar button[data-tab].done .n{background:var(--good);color:#04210F}
#tabbar .steps{display:flex;align-items:center;gap:2px}
#tabbar .steps .sep{width:14px;height:1px;background:var(--line-2);flex:0 0 auto}
#planbar{margin-left:auto;text-align:right;line-height:1.25;min-width:0}
#planbar .pname{font:600 12px/1.2 var(--sans);color:var(--text);
  display:inline-flex;align-items:center;gap:7px}
#planbar .pmeta{font:500 9.5px/1.2 var(--mono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-3);margin-top:3px}
.savedot{font:600 8.5px/1 var(--mono);letter-spacing:.14em;padding:3px 5px;border-radius:var(--r-xs)}
.savedot[data-s="saved"]{background:var(--good-bg);color:var(--good-fg)}
.savedot[data-s="unsaved"]{background:var(--surface-3);color:var(--text-3)}

/* ==========================================================================
   BUTTONS / SEGMENTED
   ========================================================================== */
.btn{font:600 12px/1 var(--sans);border:0;border-radius:var(--r-md);padding:10px 16px;cursor:pointer}
.btn:focus-visible{outline:none;box-shadow:var(--focus)}
.btn--primary{background:var(--accent);color:var(--accent-on)}
.btn--primary:hover{background:var(--accent-hi)}
.btn--primary[disabled]{background:#3B3225;color:#7A6845;cursor:not-allowed}
.btn--secondary{background:var(--surface-2);color:var(--text);border:1px solid var(--line-2);font-weight:500}
.btn--secondary:hover{border-color:#5A686F}
.btn--ghost{background:transparent;color:var(--text-2);font-weight:500}
.btn--ghost:hover{background:var(--surface-2);color:var(--text)}
.btn--danger{background:transparent;color:var(--danger);border:1px solid var(--danger-line);font-weight:500}
.btn--danger:hover{background:#C9564A1A}
.btn--lg{padding:14px 20px;letter-spacing:.08em}
.btn--sm{padding:7px 11px;font-size:11px;border-radius:var(--r-sm)}
.btn--block{display:block;width:100%}
.seg{display:flex;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-md);padding:3px;gap:3px}
.seg>button{flex:1;padding:7px;border:0;border-radius:var(--r-sm);background:transparent;
  color:var(--text-2);font:500 12px/1 var(--sans);cursor:pointer}
.seg>button:hover{background:var(--surface-2);color:var(--text)}
.seg>button[aria-pressed="true"],.seg>button.on{background:var(--accent);color:var(--accent-on);font-weight:600}

/* ==========================================================================
   LEFT LEDGER
   ========================================================================== */
.tabpanel{position:absolute;z-index:5;top:calc(var(--bar-h) + 10px);left:10px;
  bottom:10px;width:var(--panel-w);overflow:auto;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:var(--e-panel)}
#setup,#brief{padding:var(--s-4)}
#panel{padding:0}
.hidden{display:none !important}
.sec{padding:var(--s-4);border-bottom:1px solid var(--line)}
.sec:last-child{border-bottom:0}
.sechead{display:flex;align-items:baseline;gap:9px;margin-bottom:var(--s-3)}
.sechead .num{font:600 9.5px/1 var(--mono);letter-spacing:.14em;color:var(--accent)}
.sechead h3{margin:0;font:600 14px/1.2 var(--sans);color:var(--text)}
.lede{font:400 11.5px/1.55 var(--sans);color:var(--text-2);margin:0 0 var(--s-3)}
label.fld{display:block;font:500 11px/1.2 var(--mono);letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-3);margin:var(--s-3) 0 6px}
/* Match ANY text-ish input, including ones written without a type attribute —
   `input[type=text]` does not match `<input placeholder="…">`, which is why the
   place-search, coordinate and departure fields were falling back to default
   browser chrome (white box, light focus ring) instead of the design system. */
input:not([type=range]):not([type=checkbox]):not([type=radio]):not([type=submit]),
textarea,select{
  width:100%;background:var(--bg);color:var(--text);border:1px solid var(--line-2);
  border-radius:var(--r-md);padding:9px 11px;font:400 12.5px/1.2 var(--sans);
  color-scheme:dark}                    /* dark native pickers/spinners */
input::placeholder,textarea::placeholder{color:var(--text-4)}
input:hover:not([type=range]):not([type=checkbox]){border-color:#4A565D}
input:focus,input:focus-visible,textarea:focus,select:focus{
  outline:none !important;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}
/* number steppers: keep them, but quiet and on-theme */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{opacity:.35;height:22px}
input[type=number]:hover::-webkit-inner-spin-button{opacity:.8}
/* date fields: the native calendar glyph is black-on-dark by default */
input[type=date]::-webkit-calendar-picker-indicator{filter:invert(.75);cursor:pointer}
input[type=date]{font-variant-numeric:tabular-nums}
input[type=range]{accent-color:var(--accent);width:100%;background:transparent;
  border:0;padding:0;height:18px}
input[type=range]:focus{box-shadow:none;border:0}
.row{display:flex;gap:var(--s-2);align-items:center}
.numrow{display:flex;gap:6px;align-items:center}
.numrow input{flex:1}
.numrow span{font:500 11px/1 var(--mono);color:var(--text-3)}

/* ==========================================================================
   AREA CARDS — evidence lines + confidence gauge
   ========================================================================== */
.grouphead{display:flex;align-items:baseline;justify-content:space-between;
  padding:var(--s-3) var(--s-4) 6px}
.grouphead .g{font:600 9.5px/1.2 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
.card{margin:0 var(--s-3) var(--s-2);background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:var(--s-3);cursor:pointer}
.card:hover{border-color:var(--line-2)}
.card.on{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}
.card.dim{opacity:.55}
.card .top{display:flex;align-items:center;gap:10px}
/* A trailing letter-space is added AFTER the glyph, so any inherited letter-spacing
   shoves a single digit visibly left of centre. Zero it and centre with flex. */
.badge{display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;min-width:22px;border-radius:50%;
  background:var(--surface-3);color:var(--text-2);
  font:600 11px/1 var(--mono);letter-spacing:0;text-indent:0;
  font-variant-numeric:tabular-nums;flex:0 0 auto;
  /* digits carry no descender ink, so they ride above the line-box centre —
     nudge the content box down to centre the glyph optically */
  box-sizing:border-box;padding-top:1px}
.badge.top{background:var(--accent);color:var(--accent-on)}
.card .ttl{font:600 14px/1.2 var(--sans);color:var(--text)}
.card .val{margin-left:auto;font:500 12px/1.3 var(--mono);color:var(--text-2)}
.metaline{display:flex;align-items:center;gap:9px;margin:8px 0 4px;
  font:500 10px/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.why{font:400 11.5px/1.55 var(--sans);color:#CBD5DA;margin:8px 0}
.conf{display:flex;gap:2px}
.conf>i{display:block;width:7px;height:12px;border-radius:1.5px;background:var(--line)}
.conf>i[data-on]{background:var(--warn)}
.conf[data-level="high"]>i[data-on]{background:var(--good)}
.conf[data-level="low"]>i[data-on]{background:var(--danger)}
/* T15.2 — a plan with nothing huntable cannot render the green level. The bars still
   show the data score honestly; they just stop reading as "this hunt is good". */
.conf[data-level="none"]>i[data-on]{background:var(--text-4)}

/* ---- T15.1 — the answer, above the caveats -------------------------------------- */
.answer{border:1px solid var(--line-2);border-radius:var(--r-lg);
  background:linear-gradient(180deg,var(--accent-tint),transparent 70%),var(--surface-2);
  padding:var(--s-3);margin-bottom:var(--s-2)}
.answer[data-rank]{cursor:pointer}
.answer[data-rank]:hover{border-color:var(--accent)}
.answer[data-kind="none"]{background:var(--danger-bg);border-color:var(--danger-line)}
.answer>.t-micro{color:var(--accent);letter-spacing:.14em}
.answer[data-kind="none"]>.t-micro{color:var(--danger-fg)}
.ansttl{font:600 19px/1.25 var(--sans);color:var(--text);margin:4px 0 0}
.ansmeta{display:flex;gap:12px;margin-top:6px;
  font:500 10.5px/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.anstac{color:var(--text)}
/* Every caveat that used to sit above the answer, in one fold. Closed by default and
   never auto-opened: the point of the ticket is that they are reachable, not unavoidable. */
.trust{margin-top:var(--s-2);border-top:1px solid var(--line);padding-top:var(--s-2)}
.trust>summary{cursor:pointer;color:var(--text-2);list-style:none}
.trust>summary::-webkit-details-marker{display:none}
.trust>summary::before{content:'▸ ';color:var(--text-3)}
.trust[open]>summary::before{content:'▾ '}
.trustbody{margin-top:var(--s-2)}
/* T5.8 — what the engine measured about THIS box, under the jurisdiction's standing
   explanation of the gap. Dimmer than the reason: it is the specifics, not the headline. */
.capdetail{display:block;margin-top:3px;color:var(--text-4);font-size:10.5px}
.statusstrip{margin-top:var(--s-2);padding-top:var(--s-2);border-top:1px solid var(--line)}
/* two axes: habitat quality and retrievability, never averaged into one number */
.axes{display:flex;flex-direction:column;gap:4px;margin:8px 0}
.ax{display:grid;grid-template-columns:56px 1fr 34px;gap:8px;align-items:center}
.ax .k{font:500 9.5px/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
.ax .bar{height:4px;border-radius:2px;background:var(--line);overflow:hidden}
.ax .bar>i{display:block;height:100%;background:var(--accent);border-radius:2px}
.ax .bar>i.ret{background:var(--text-3)}
.ax .v{font:500 10.5px/1.2 var(--mono);color:var(--text-2);text-align:right}
/* T15.3 — the anchor sits under its own bar, not in a caveat three screens away. */
.axnote{grid-column:2;margin:-1px 0 3px 64px;
  font:400 10px/1.35 var(--sans);color:var(--text-3)}
.axnote b{color:var(--text-2);font-weight:600}
/* Pack-out is a distance, not a 0-to-1 score — the row has no bar to calibrate. */
.ax.axplain{grid-template-columns:56px 1fr}
.ax .haul{font:500 10.5px/1.35 var(--mono);color:var(--text-2)}

.ev{display:grid;grid-template-columns:14px 1fr;gap:9px;align-items:start;
  padding:7px 0;border-top:1px solid #1F262A}
.ev>.op{font:600 12px/1.5 var(--mono)}
.ev[data-kind="pro"]>.op{color:var(--good)}
.ev[data-kind="con"]>.op{color:var(--warn)}
.ev>.txt{font:400 11.5px/1.5 var(--sans);color:#CBD5DA;text-wrap:pretty}
.ev>.txt em{font-style:normal;color:var(--text-3)}

/* ---- T15.7 — the per-day bar. Height AND warmth, so it reads at a glance without a
   number; the caption carries the scale in words because a row of tall bars is exactly
   what a hunter would otherwise read as odds of killing something. ---- */
.daybar{margin-top:10px;padding-top:8px;border-top:1px solid #1F262A}
.daybar>.t-micro{margin-bottom:6px}
.dcells{display:flex;align-items:flex-end;gap:3px;height:46px}
.dcell{flex:1 1 0;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;
  align-items:stretch;height:100%;position:relative}
.dcell>i{display:block;border-radius:2px 2px 0 0;
  background:linear-gradient(180deg,var(--accent-hi),var(--accent));min-height:3px}
/* the weak end cools off, so the shape is legible in one look */
.dcell>i[style*="height:1"],.dcell>i[style*="height:2"],.dcell>i[style*="height:3"]{
  background:var(--line-2)}
.dcell>em{font:400 7.5px/1.4 var(--mono);font-style:normal;color:var(--text-4);
  text-align:center;white-space:nowrap;overflow:hidden}
.dcap{margin-top:5px;font:400 10px/1.4 var(--sans);color:var(--text-4)}

/* detail drilldown: measured stats read as label/value pairs, mono for the value */
.statgrid{display:grid;grid-template-columns:1fr 1fr;gap:7px 14px;margin-bottom:10px}
.stat{display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  border-bottom:1px solid #1F262A;padding-bottom:5px}
.stat .k{font:400 11px/1.2 var(--sans);color:var(--text-3)}
.stat .v{font:500 12px/1.2 var(--mono);color:var(--text)}
.wp{display:flex;gap:9px;align-items:flex-start;padding:8px 0;border-top:1px solid #1F262A}
.wp .dot{width:10px;height:10px;border-radius:50%;flex:0 0 auto;margin-top:4px;box-shadow:0 0 0 1.5px var(--halo)}
.wp .t{font:500 12px/1.3 var(--sans);color:var(--text)}
.results{max-height:150px;overflow:auto}
.rres{padding:7px 9px;border-bottom:1px solid var(--line);cursor:pointer;
  font:400 11.5px/1.4 var(--sans);color:var(--text-2)}
.rres:hover{background:var(--surface-2);color:var(--text)}
#detail{padding:0}
#detail .sec:first-child{padding-top:var(--s-3)}

/* callouts — caveats are the integrity claim; they get a border and a title */
/* rename the plan in place, instead of a native prompt() (#75) */
.planedit{font:inherit;color:var(--text);background:var(--surface-3);
  border:1px solid var(--accent);border-radius:var(--r-sm);padding:1px 6px;min-width:14ch;max-width:34ch}

/* one styled dialog, replacing the chain of native alert/confirm popups (#75) */
.modalwrap{position:fixed;inset:0;z-index:120;display:grid;place-items:center;
  background:rgba(6,9,11,.62);backdrop-filter:blur(2px);padding:24px}
.modal{width:min(460px,100%);background:var(--surface-2);border:1px solid var(--line-2);
  border-radius:var(--r-lg);box-shadow:0 24px 64px rgba(0,0,0,.55);padding:20px 22px 16px}
.modal[data-kind="warn"]{border-color:var(--warn-line)}
.modal[data-kind="danger"]{border-color:var(--danger-line)}
.modal .mtitle{font:600 15px/1.35 var(--sans);color:var(--text);margin-bottom:8px}
.modal[data-kind="warn"] .mtitle{color:var(--warn)}
.modal[data-kind="danger"] .mtitle{color:var(--danger)}
.modal .mbody{font:400 12.5px/1.65 var(--sans);color:var(--text-2);text-wrap:pretty}
.modal .mbody b{color:var(--text)}
.modal .mbody ul{margin:8px 0 0;padding-left:18px}
.modal .mbody li{margin:3px 0}
.modal .mbody .note{display:block;margin-top:10px;font:500 10.5px/1.5 var(--mono);
  letter-spacing:.02em;color:var(--text-4)}
/* BETA FEEDBACK FORM. Chips, not a select and not radio buttons: the whole design goal is
   that a verdict costs one TAP on a phone in a truck, and a native select costs three. */
.fbq{margin-top:14px}
.fbq .t-micro{margin-bottom:6px}
.fbrow{display:flex;gap:6px;flex-wrap:wrap}
.fbopt{flex:1 1 auto;min-width:74px;padding:9px 10px;border-radius:var(--r-sm);cursor:pointer;
  font:500 12px/1 var(--sans);border:1px solid var(--line-2);background:var(--surface-3);
  color:var(--text-2);text-align:center}
.fbopt:hover{border-color:var(--text-4);color:var(--text)}
.fbopt.on{background:var(--accent);border-color:var(--accent);color:#10130f;font-weight:600}
.fbmore{margin-top:10px;background:none;border:0;padding:0;cursor:pointer;
  font:500 11.5px/1 var(--sans);color:var(--accent);text-align:left}
.fbmore:hover{text-decoration:underline}
#fbDetail{width:100%;margin-top:10px;background:var(--bg);color:var(--text);
  border:1px solid var(--line-2);border-radius:var(--r-sm);padding:9px 10px;
  font:400 12.5px/1.5 var(--sans);resize:vertical}
#fbDetail::placeholder{color:var(--text-4)}
.fbattach{flex:0 0 auto;padding:8px 12px;border-radius:var(--r-sm);cursor:pointer;
  font:500 11.5px/1 var(--sans);border:1px solid var(--line-2);background:var(--surface-3);
  color:var(--text-2)}
.fbattach:hover{border-color:var(--text-4);color:var(--text)}
#fbNote{width:100%;background:var(--bg);color:var(--text);border:1px solid var(--line-2);
  border-radius:var(--r-sm);padding:9px 10px;font:400 12.5px/1.2 var(--sans)}
#fbNote::placeholder{color:var(--text-4)}
.modal .macts button[disabled]{opacity:.42;cursor:not-allowed}
.modal .macts button[disabled]:hover{border-color:var(--line-2);color:var(--text-2)}
.modal .macts button.primary[disabled]:hover{background:var(--accent);color:#10130f}
.modal .macts{display:flex;justify-content:flex-end;gap:8px;margin-top:18px;flex-wrap:wrap}
.modal .macts button{padding:8px 14px;border-radius:var(--r-sm);cursor:pointer;
  font:600 11.5px/1 var(--sans);border:1px solid var(--line-2);background:var(--surface-3);color:var(--text-2)}
.modal .macts button:hover{border-color:var(--text-4);color:var(--text)}
.modal .macts button.primary{background:var(--accent);border-color:var(--accent);color:#10130f}
.modal .macts button.primary:hover{filter:brightness(1.08)}
.modal .macts button.danger{border-color:var(--danger-line);color:var(--danger)}

.callout{display:grid;grid-template-columns:auto 1fr;gap:10px;border-radius:var(--r-md);
  padding:11px 12px;margin:var(--s-2) 0}
.callout>.mark{font:600 12px/1.4 var(--mono)}
.callout>.body{font:400 11.5px/1.55 var(--sans);text-wrap:pretty}
.callout>.body>b{display:block;font:600 11px/1.4 var(--sans);margin-bottom:3px}
.callout[data-kind="warn"]{background:var(--warn-bg);border:1px solid var(--warn-line);color:var(--warn-fg)}
.callout[data-kind="warn"]>.mark,.callout[data-kind="warn"]>.body>b{color:var(--warn)}
.callout[data-kind="danger"]{background:var(--danger-bg);border:1px solid var(--danger-line);color:var(--danger-fg)}
.callout[data-kind="danger"]>.mark,.callout[data-kind="danger"]>.body>b{color:var(--danger)}
.callout[data-kind="info"]{background:#101619;border:1px solid var(--line);color:var(--text-2)}
.callout[data-kind="info"]>.mark{color:var(--text-3)}
.warn{background:var(--warn-bg);border:1px solid var(--warn-line);color:var(--warn-fg);
  border-radius:var(--r-md);padding:11px 12px;margin:var(--s-2) 0;font:400 11.5px/1.55 var(--sans)}

/* ==========================================================================
   RIGHT ICON RAIL + floating cards anchored to their button
   ========================================================================== */
/* SYMBOLOGY §4 anchoring table — these numbers are the spec, not taste:
     tool rail      right:12 top:76, width 46, persistent
     tooltip        right:54, top aligned to the hovered button's OWN row
     view rail      right:12, directly under the tool rail
     layers card    left:420 top:142 (under the Layers pill)
     basemap card   right:70 bottom:12 (beside the SAT chip)
     surface card   right:70, aligned to its rail button
     area stats     follows cursor, 16px offset, flips at edges
     scale bar      left:404 bottom:12, mandatory, never in a rail          */
/* The two rails stack in one flex column so the view rail follows whatever
   height the tool rail actually has — hard-coding its top broke the moment the
   tool rail gained a button. */
#railStack{position:absolute;z-index:24;right:12px;top:76px;display:flex;
  flex-direction:column;gap:8px;align-items:flex-end}
#rail,#viewRail{width:var(--rail-w);background:var(--surface);backdrop-filter:var(--blur);
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--e-panel);overflow:hidden}
#rail .railcap{text-align:center;padding:7px 0 6px;font:600 8.5px/1 var(--mono);
  letter-spacing:.16em;color:var(--text-3);border-bottom:1px solid var(--line)}
/* T15.4 — the glyph carries its own name. `--rail-btn` is RAIL_BTN_H in app.js; the two
   have to agree or the dock anchors drift off their buttons. */
:root{--rail-btn:52px}
#rail button,#viewRail button{width:100%;height:var(--rail-btn);display:grid;
  grid-auto-rows:min-content;justify-items:center;align-content:center;gap:3px;
  background:transparent;border:0;color:var(--text-2);cursor:pointer}
#rail button .rlab,#viewRail button .rlab{font:500 7.5px/1 var(--mono);letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-4);max-width:100%;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
#rail button:hover .rlab,#viewRail button:hover .rlab{color:var(--text-2)}
#rail button.on .rlab,#viewRail button.on .rlab{color:var(--accent-on)}
#viewRail button+button{border-top:1px solid var(--line)}
#rail button:hover,#viewRail button:hover{background:var(--surface-2);color:var(--text)}
#rail button.on,#viewRail button.on{background:var(--accent);color:var(--accent-on)}
#rail .sep{height:1px;background:var(--line)}

/* Layers pill — its own door, beside the sidebar. */
#layersPill,
#basePill{position:absolute;z-index:22;left:420px;top:88px;display:flex;align-items:center;
  gap:10px;background:var(--surface);backdrop-filter:var(--blur);border:1px solid var(--line);
  border-radius:9px;box-shadow:var(--e-panel);padding:8px 14px 8px 12px;cursor:pointer;
  color:var(--text);user-select:none}
#layersPill:hover,#basePill:hover{border-color:var(--line-2)}
#layersPill.on,#basePill.on{border-color:var(--accent)}
#layersPill.on .pname,#basePill.on .pname{color:var(--accent-hi)}
#layersPill .bars,#basePill .bars{display:grid;gap:2px;width:15px}
#layersPill .bars i,#basePill .bars i{height:2px;border-radius:1px;background:currentColor}
#layersPill .bars i:nth-child(2),#basePill .bars i:nth-child(2){opacity:.65}
#layersPill .bars i:nth-child(3),#basePill .bars i:nth-child(3){opacity:.35}
#layersPill .pcap,#basePill .pcap{display:block;font:500 8.5px/1 var(--mono);letter-spacing:.18em;color:var(--text-3)}
#layersPill .pname,#basePill .pname{display:block;font:600 13px/1.2 var(--sans);margin-top:3px}
#layersPill .pcount,#basePill .pcount{font:400 10px/1 var(--mono);color:var(--text-3);margin-left:2px}
/* TWO DOORS, SIDE BY SIDE, BASEMAP FIRST — that is the order of the work: you set the
   basemap, you choose a box from it, and only then is there an analysis to manage. The
   basemap pill keeps the slot the single pill used to occupy, so on Setup (where the
   hunting pill is not on screen at all) it sits exactly where the eye already goes. */
#basePill{left:420px}
#layersPill{left:600px}


/* The identify card's BODY — the full explanation (T10.9). It used to be a separate
   click popup saying different things about the same feature, and the click one was the
   richer of the two, so the better answer was the one you had to discover. Sized to be
   readable prose rather than a status line: this is where "what it is and when to hunt
   it" actually lives. */
#idCard .idbody{font:400 11.5px/1.45 var(--sans);color:var(--text-2);
  margin-top:5px;padding-top:5px;border-top:1px solid var(--line);max-width:280px}
/* PINNED. A click holds the card still so it can be read and reached with the mouse —
   the accent border is the only difference, because it is deliberately the SAME card. */
#idCard.pinned{pointer-events:auto;border-color:var(--accent);user-select:text}
#idCard.pinned::after{content:'PINNED — click the map to release';display:block;
  font:500 8.5px/1 var(--mono);letter-spacing:.14em;color:var(--accent-hi);
  padding:6px 0 2px}

/* The water parent's children are indented like browse's — same `sub` mechanism, so
   nothing new is needed here; this note exists only to say that is deliberate. */

/* AN EXTRA SEASON ROW. It used to be a `.numrow` holding two date inputs, an arrow, a
   method select and a delete button on ONE flex line — 326 px of children in a 289 px
   row. The select was crushed to 14 px and the dates were pushed out of sight on a
   narrow panel, which is why it read as "i can't add a different date range": the
   fields were there and invisible.

   The dates now own their own line and the method sits under them, so nothing competes
   for width and nothing has to shrink. */
.winrow{border:1px solid var(--line,#2a343a);border-radius:8px;padding:6px 8px;margin-top:8px;
  display:grid;grid-template-columns:1fr auto;gap:6px 8px;align-items:center}
.winrow__dates{grid-column:1 / -1;display:flex;align-items:center;gap:8px}
.winrow__dates input[type=date]{flex:1 1 0;min-width:0;border:none;background:none;
  color:var(--text);font:inherit}
.winrow > select{grid-column:1;width:100%}
.winrow > button{grid-column:2}

/* Season filter — sits directly under the layers pill, same door-beside-the-sidebar
   idiom, because it answers the same kind of question: what am I looking at? Hidden
   outright on a single-window run; a filter that filters nothing reads as broken. */
#winPill{position:absolute;z-index:22;left:420px;top:140px;display:flex;align-items:center;
  gap:6px;background:var(--surface);backdrop-filter:var(--blur);border:1px solid var(--line);
  border-radius:9px;box-shadow:var(--e-panel);padding:6px 8px;color:var(--text);user-select:none}
#winPill.hidden{display:none}
#winPill .pcap{font:500 8.5px/1 var(--mono);letter-spacing:.18em;color:var(--text-3);padding:0 4px}
#winPill .wchip{display:flex;flex-direction:column;gap:2px;align-items:flex-start;
  background:transparent;border:1px solid transparent;border-radius:6px;padding:4px 8px;
  cursor:pointer;color:var(--text-2);text-align:left}
#winPill .wchip:hover{border-color:var(--line-2)}
#winPill .wchip.on{border-color:var(--accent);background:rgba(226,192,68,.08)}
#winPill .wchip.on .wname{color:var(--accent-hi)}
#winPill .wname{font:600 11px/1.1 var(--sans);white-space:nowrap}
#winPill .wsub{font:400 9px/1 var(--mono);color:var(--text-3);letter-spacing:.06em}

/* Tooltip / live readout — 236px, right:54, aligned to its own button's row. */
#railTip{position:absolute;z-index:25;right:54px;width:236px;background:var(--surface-3);
  border:1px solid var(--line-2);border-radius:var(--r-md);box-shadow:var(--e-pop);
  padding:10px 12px;pointer-events:none}
#railTip .tipname{font:600 11.5px/1.3 var(--sans);color:var(--text);margin-bottom:4px}
#railTip .tipnote{font:400 11px/1.5 var(--sans);color:var(--text-2);text-wrap:pretty}
#railTip .tipcap{display:flex;justify-content:space-between;font:600 8.5px/1 var(--mono);
  letter-spacing:.16em;color:var(--text-3);margin-bottom:8px}
#railTip .tiptiles{display:flex;gap:6px;margin-bottom:7px}
#railTip .tiptiles span{flex:1;background:var(--surface-2);border-radius:var(--r-sm);
  padding:7px 8px;font:500 13px/1 var(--mono);color:var(--text)}

.dock{position:absolute;z-index:8;width:var(--dock-w);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--e-pop);
  max-height:80vh;display:flex;flex-direction:column}
.dock .dbody{flex:1 1 auto;min-height:0}
.dock .dhead{display:flex;align-items:center;justify-content:space-between;
  padding:12px var(--s-3);border-bottom:1px solid var(--line)}
.dock .dhead h4{margin:0;font:600 14px/1.2 var(--sans)}
.dock .dclose{background:transparent;border:0;color:var(--text-3);cursor:pointer;font-size:15px;padding:2px 4px}
.dock .dclose:hover{color:var(--text)}
.dock .dbody{overflow:auto;padding-bottom:6px}
.dock .drow{display:flex;align-items:center;justify-content:space-between;
  padding:10px var(--s-3);border-bottom:1px solid var(--line)}
.grouplabel{display:flex;align-items:center;gap:8px;padding:11px var(--s-3) 5px;
  font:600 9.5px/1.2 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
.grouplabel .ct{margin-left:auto;color:var(--text-4)}

/* basemap rows — name + the actual source spec, so you know what you're looking at */
.baserow{display:grid;grid-template-columns:38px 1fr auto;gap:10px;align-items:center;
  padding:8px 12px;cursor:pointer}
.baserow:hover{background:var(--surface-2)}
.baserow.on{background:var(--accent-tint);box-shadow:inset 2px 0 0 var(--accent)}
.bthumb{width:38px;height:26px;border-radius:var(--r-xs);border:1px solid var(--line-2)}
.bmeta{min-width:0}
.bname{display:block;font:500 12px/1.2 var(--sans);color:var(--text)}
.bspec{display:block;font:500 9px/1.3 var(--mono);letter-spacing:.08em;color:var(--text-3);margin-top:2px}
.btag{font:600 8.5px/1 var(--mono);letter-spacing:.14em;color:var(--accent-hi)}
.baserow.on .bname{color:var(--text)}

/* switch */
.sw{position:relative;width:34px;height:19px;flex:0 0 auto}
.sw input{opacity:0;width:0;height:0}
.sw i{position:absolute;inset:0;background:var(--line);border-radius:99px;transition:.15s;cursor:pointer}
.sw i::before{content:'';position:absolute;width:14px;height:14px;left:3px;top:2.5px;
  background:var(--text-3);border-radius:50%;transition:.15s}
.sw input:checked + i{background:var(--accent)}
.sw input:checked + i::before{transform:translateX(15px);background:var(--accent-on)}

/* ---- the layer row: toggle · preview · label · count ---- */
.layer-row{display:grid;grid-template-columns:16px 32px 1fr auto;gap:10px;
  align-items:center;padding:7px 12px;cursor:pointer}
.layer-row:hover{background:var(--surface-2)}
/* A row with data-sub is PART OF the row above it, not a sibling — browse is a composite
   and its inputs must look subordinate to it, or the panel reads as five unrelated green
   layers. Indent plus a hairline spine, so the grouping survives when the parent scrolls
   out of view. */
.layer-row[data-sub]{padding-left:26px;position:relative}
.layer-row[data-sub]::before{content:'';position:absolute;left:14px;top:0;bottom:0;
  width:1px;background:rgba(255,255,255,.14)}
.layer-row[data-sub] .name{font-size:11.5px;color:var(--text-2)}
.layer-row .name{display:block;font:400 12px/1.2 var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.layer-row .note{font:400 10px/1.35 var(--sans);color:var(--text-3);margin-top:2px;
  white-space:normal;overflow:visible}
.layer-row .count{font:500 10px/1 var(--mono);color:var(--text-4)}
.layer-row[data-state="off"] .name{color:var(--text-3)}
/* T15.4 — "NO DATA" and "switched off" used to differ by opacity alone, so
   `Closed to you: NO DATA` was indistinguishable from "nothing is closed here". A
   no-data row now reads as a STATEMENT rather than a dimmed control: no checkbox to
   click (an em-dash instead), and the count boxed so the words carry weight. */
.layer-row[data-state="nodata"]{cursor:default;background:rgba(255,255,255,.02)}
/* T15.8 — "the server could not give us this" is a THIRD state, and it must not read as
   "there is none here". `hunt zones: NO DATA` over Québec would be a claim about the
   province. Amber, not grey: it is a fault to notice, not an absence to accept. */
.layer-row[data-state="unavailable"]{cursor:default;background:var(--warn-bg)}
.layer-row[data-state="unavailable"] .name{color:var(--warn-fg)}
.layer-row[data-state="unavailable"] .count{color:var(--warn);border:1px solid var(--warn-line);
  border-radius:3px;padding:2px 4px;letter-spacing:.06em}
.layer-row[data-state="nodata"] .name{color:var(--text-4)}
.layer-row[data-state="nodata"] .lp{opacity:.3;filter:grayscale(1)}
.layer-row[data-state="nodata"] .count{color:var(--text-3);border:1px solid var(--line-2);
  border-radius:3px;padding:2px 4px;letter-spacing:.06em}
.layer-row .nobox{display:grid;place-items:center;width:14px;height:14px;
  font:400 12px/1 var(--mono);color:var(--text-4)}
/* The empties collect behind one line that counts them, per group. Closed by default:
   the panel opens on what this box actually has. */
.emptyfold>summary{cursor:pointer;list-style:none;padding:6px 12px 6px 30px;
  color:var(--text-4)}
.emptyfold>summary::-webkit-details-marker{display:none}
.emptyfold>summary::before{content:'▸ ';}
.emptyfold[open]>summary::before{content:'▾ ';}
.emptyfold>summary:hover{color:var(--text-2);background:var(--surface-2)}
.layer-row input[type=checkbox]{accent-color:var(--accent);width:14px;height:14px;margin:0}
.lp{width:32px;height:20px}
.lp--zone{border-radius:var(--r-xs);border:1.5px solid var(--c);
  background:color-mix(in srgb,var(--c) 14%,transparent);overflow:hidden}
.lp--zone>i{display:block;width:100%;height:100%;
  background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--c) 13%,transparent) 0 3px,transparent 3px 7px)}
.lp--stipple{border-radius:var(--r-xs);border:1.5px solid var(--c);
  background:color-mix(in srgb,var(--c) 8%,transparent);overflow:hidden}
.lp--stipple>i{display:block;width:100%;height:100%;
  background-image:radial-gradient(color-mix(in srgb,var(--c) 80%,transparent) 1.1px,transparent 1.2px);
  background-size:5px 5px}
.lp--outline{border-radius:var(--r-xs);border:1.5px dashed var(--c);background:none}
/* burn: back-slash hatch, so it can't read as another orange score band */
.lp--hatch{border-radius:var(--r-xs);border:1.5px solid #6B4A22;overflow:hidden;
  background:color-mix(in srgb,var(--c) 6%,transparent)}
.lp--hatch>i{display:block;width:100%;height:100%;
  background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--c) 55%,transparent) 0 2px,transparent 2px 6px)}
/* funnel: outline-only, long dash — a pinch point is a line, not a filled band */
.lp--dashbox{border-radius:var(--r-xs);border:2px dashed var(--c);background:none}
.lp--line{display:grid;place-items:center}
.lp--line>i{display:block;width:30px;height:0;border-top:2px var(--dash,solid) var(--c)}
.lp--point{display:grid;place-items:center}
.lp--point>i{display:block;width:12px;height:12px;background:var(--c);box-shadow:0 0 0 1.5px var(--halo)}
.g-circle{border-radius:50%}
.g-square{border-radius:2px}
.g-triangle{clip-path:polygon(50% 0,100% 100%,0 100%)}
.g-diamond{clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.g-gable{clip-path:polygon(50% 0,100% 55%,100% 100%,0 100%,0 55%)}

/* ==========================================================================
   MAP CONTROLS (bottom-right stack)
   ========================================================================== */
#mapctl{position:absolute;z-index:24;right:12px;bottom:12px;display:flex;flex-direction:column;
  gap:8px;align-items:flex-end}
#mapctl>button{width:var(--rail-w);height:var(--rail-w);background:var(--surface);
  backdrop-filter:var(--blur);border:1px solid var(--line);border-radius:var(--r-lg);
  color:var(--text);cursor:pointer;font:500 11px/1 var(--mono);letter-spacing:.08em;
  box-shadow:var(--e-panel);display:grid;place-items:center}
#mcN{border-radius:50%!important;font-weight:600}
#mapctl .zoomcard{width:var(--rail-w);background:var(--surface);backdrop-filter:var(--blur);
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--e-panel);overflow:hidden}
#mapctl .zoomcard button{width:100%;height:40px;background:transparent;border:0;color:var(--text);
  font:400 17px/1 var(--mono);cursor:pointer}
#mapctl .zoomcard button+button{border-top:1px solid var(--line)}
#mapctl .zoomcard button:hover:not([disabled]){background:var(--surface-2)}
#mapctl .zoomcard button[disabled]{opacity:.3;cursor:default}
#mapctl .satchip{height:auto!important;padding:7px 0;line-height:1}
#mapctl .satchip b{display:block;font:500 9px/1 var(--mono);letter-spacing:.1em}
#mapctl .satchip i{display:block;font:600 9.5px/1 var(--mono);color:var(--text-3);margin-top:4px;font-style:normal}
#mapctl .satchip.on{background:var(--accent-tint);border-color:var(--accent)}
#mapctl .satchip.on b{color:var(--accent-hi)}
#mapctl button:hover{color:var(--text);border-color:var(--line-2)}
#mapctl button.on{background:var(--accent);color:var(--accent-on);border-color:var(--accent)}

/* draw toolbar lives in the rail now; keep the element for handlers */
#drawtools{display:none}

/* ==========================================================================
   WEATHER STRIP
   ========================================================================== */
#weather{position:absolute;z-index:5;left:calc(var(--panel-w) + 22px);bottom:14px;
  right:calc(var(--rail-w) + 22px);background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--e-panel);padding:9px var(--s-3)}
#weather .days{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px}
#weather .hourrow{display:flex;align-items:center;gap:10px;margin-top:9px}
#weather .hourrow input{flex:1}
#weather .note{font:400 10.5px/1.5 var(--sans);color:var(--text-3);margin-top:7px;
  max-height:2.9em;overflow:hidden}
#weather .note b{color:var(--text-2)}
.day{flex:0 0 auto;min-width:88px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r-md);padding:7px 9px;cursor:pointer}
.day:hover{border-color:var(--line-2)}
.day.sel{border-color:var(--accent);background:var(--accent-tint)}
.day .d{font:600 10px/1.2 var(--mono);letter-spacing:.08em;color:var(--text-3)}
.day .w{font:500 12px/1.3 var(--mono);color:var(--text);margin-top:3px}
.day .t{font:400 10.5px/1.3 var(--sans);color:var(--text-2)}
/* T15.6 — first and last light on every chip, and the proxy label where the number is
   actually read rather than in a footnote under the whole strip. */
#weather .wxhead{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  margin-bottom:7px}
#weather .wxsrc{color:var(--text-4);letter-spacing:.06em;text-transform:none;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.day .light{display:flex;justify-content:space-between;gap:6px;margin-top:5px;
  padding-top:4px;border-top:1px solid var(--line);
  font:500 9.5px/1.2 var(--mono);color:var(--text-3)}
/* A proxy chip must not look like a forecast chip. Dashed edge + the source year. */
.day.proxy{border-style:dashed}
.day.proxy .d em{font-style:normal;color:var(--text-4);margin-left:3px;font-size:9px}

/* ==========================================================================
   BRIEF — serif only here; mono for anything measured
   ========================================================================== */
#brief h2{font:600 22px/1.2 var(--sans);letter-spacing:-.01em;margin:6px 0 4px}
#brief h3{font:600 9.5px/1.2 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-3);margin:var(--s-4) 0 var(--s-2)}
#brief p,#brief .serif{font:400 13.5px/1.7 var(--serif);color:#CBD5DA}
#brief .kicker{font:600 9.5px/1.2 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
#brief .dataline{font:500 12px/1.5 var(--mono);color:var(--text-2);margin:4px 0 var(--s-3)}
.huntread{font:400 13.5px/1.7 var(--serif);background:#1A1710;border:1px solid #4A3A22;
  border-radius:var(--r-md);padding:12px 13px;color:#E8DCC8}
.huntread b{font-weight:600;color:var(--accent-hi)}
.rutdates{display:flex;flex-wrap:wrap;gap:5px;margin-top:var(--s-2)}
.pill{display:inline-block;padding:4px 8px;border-radius:99px;background:var(--surface-3);
  color:var(--text-2);font:500 10px/1.3 var(--mono);margin:2px 3px 0 0}
.pill.pro{background:var(--good-bg);color:var(--good-fg)}
.pill.con{background:var(--warn-bg);color:var(--warn-fg)}
/* weighted factor bars */
.wf{display:grid;grid-template-columns:1fr 90px;gap:10px;align-items:center;
  padding:7px 0;border-top:1px solid #1F262A;font:400 11.5px/1.4 var(--sans)}
.wf i{display:block;height:4px;border-radius:2px;background:var(--accent)}
.wfbar{background:var(--line);border-radius:2px;overflow:hidden}
/* recommendations */
.recs{display:flex;flex-direction:column;gap:7px}
.rec{display:flex;gap:9px;align-items:flex-start;background:var(--surface-2);
  border:1px solid var(--line);border-left:3px solid var(--line-2);border-radius:var(--r-md);
  padding:9px 11px;font:400 12px/1.5 var(--sans);color:#CBD5DA}
.rec-high{border-left-color:var(--good);background:#121C16}
.rec-med{border-left-color:var(--warn)}
.rec b{color:var(--text)}
.recicon{font-size:15px;flex:0 0 auto;line-height:1.4}

/* ==========================================================================
   PLANS / EXPORT popovers
   ========================================================================== */
#plans,#exportMenu{position:absolute;z-index:20;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--e-pop)}
#plans{top:calc(var(--bar-h) + 8px);right:10px;width:330px;padding:var(--s-3);max-height:70vh;overflow:auto}
#exportMenu{top:calc(var(--bar-h) + 8px);right:10px;width:270px;padding:var(--s-3)}
#exportMenu button[data-fmt]{display:block;width:100%;margin:5px 0;padding:10px;
  background:var(--surface-2);color:var(--text);border:1px solid var(--line-2);
  border-radius:var(--r-md);cursor:pointer;font:600 12px/1 var(--sans);text-align:left}
#exportMenu button[data-fmt]:hover{border-color:var(--accent)}
#plans .authbar{display:flex;justify-content:space-between;align-items:center;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);padding:8px 11px;font-size:12px}
#plans .authbox{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);padding:10px}
#plans .authbox .prow{margin:5px 0;display:flex;gap:6px}
#plans .planrow{display:flex;align-items:center;gap:8px;padding:9px 0;border-top:1px solid var(--line)}
#plans .planrow .nm{flex:1;font:500 12px/1.3 var(--sans)}

/* legacy bits still referenced */
#legend{display:none}
.gate{padding:var(--s-3) var(--s-4)}
.method{padding:0 var(--s-4) var(--s-3)}
#deepBadge{position:absolute;z-index:6;left:calc(var(--panel-w) + 22px);top:calc(var(--bar-h) + 14px);
  background:var(--surface);border:1px solid var(--accent);color:var(--accent-hi);
  border-radius:99px;padding:6px 12px;font:500 10.5px/1 var(--mono);letter-spacing:.08em}
/* THE "NOTHING EXTRA HERE" STATE (T14.2). Must not wear the accent colour — an accent
   badge reads as "something is switched on", and the whole point of this state is that
   nothing is. Muted, dashed, so it reads as an absence at a glance. */
#deepBadge.deep-badge--none{border-style:dashed;border-color:var(--line,#2a343a);
  color:var(--text-2);background:var(--surface)}
.maplibregl-ctrl-bottom-right{margin-bottom:56px}

/* account menu (top bar) */
#acctMenu{position:absolute;z-index:30;top:calc(var(--bar-h) + 8px);right:10px;width:250px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--e-pop);padding:var(--s-3)}
#acctMenu.hidden{display:none}

/* result tabs are locked until an analysis exists */
#tabbar button[data-tab].locked{opacity:.38;cursor:not-allowed}
#tabbar button[data-tab].locked:hover{background:transparent;color:var(--text-2)}
#tabbar button[data-tab].locked .n{background:var(--line);color:var(--text-4)}

/* language picker in the top bar */
.langseg{width:auto;flex:0 0 auto;padding:2px;gap:2px}
.langseg>button{padding:5px 9px;font:600 10.5px/1 var(--mono);letter-spacing:.08em;min-width:32px}

/* ==========================================================================
   LAYER ROW — SYMBOLOGY §3.  16px toggle · 34px preview · label(1fr, TRUNCATES) · count
   The label must never wrap: "Burn regeneration" and "Outfitter / tenure" have to
   truncate cleanly at 296px.
   ========================================================================== */
.layer-row{display:grid;grid-template-columns:16px 34px 1fr auto;gap:10px;
  align-items:center;padding:7px 12px;cursor:pointer}
.layer-row:hover{background:var(--surface-2)}
.layer-row .lmeta{min-width:0}
.layer-row .name{display:block;font:400 12px/1.2 var(--sans);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.layer-row .note{display:block;font:400 10px/1.35 var(--sans);color:var(--text-3);margin-top:2px}
.layer-row .count{font:500 10px/1 var(--mono);color:var(--text-4);white-space:nowrap}
.layer-row input[type=checkbox]{accent-color:var(--accent);width:14px;height:14px;margin:0}
/* off ≠ disabled — still clickable, just quieter */
.layer-row[data-state="off"] .name{color:var(--text-3)}
.layer-row[data-state="off"] .lp{opacity:.38}
/* the source ships zero geometry for this AOI — the honesty guarantee, made visible */
.layer-row[data-state="nodata"]{opacity:.45;cursor:default}
.layer-row[data-state="nodata"] .count{color:var(--danger-fg)}
/* nothing analysed yet — a DIFFERENT claim from "no data" */
.layer-row[data-state="pending"]{opacity:.5;cursor:default}
.layer-row:hover .lp{box-shadow:0 0 0 2px color-mix(in srgb,var(--c,#CBD5DA) 40%,transparent)}

/* previews — generated by the same function as the map paint */
.lp{width:34px;height:20px;border-radius:var(--r-xs);overflow:hidden;flex:0 0 auto}
.lp--fill{display:block}
.lp--line{display:grid;place-items:center;border-radius:0}
.lp--line>i{display:block;width:30px;height:0}
.lp--point{display:grid;place-items:center;background:none}

/* waypoint badge — pictogram carries the type, colour carries the convention */
.wpb{display:grid;place-items:center;border-radius:8px;
  box-shadow:0 0 0 1.5px var(--halo),0 1px 4px #0009;transition:transform .12s}
.wpb svg{display:block}

/* group header — tri-state master, live n/total, per-group opacity */
.grouphead2{display:grid;grid-template-columns:auto 1fr auto 64px;gap:8px;align-items:center;
  padding:11px 12px 5px}
.grouphead2 .glabel{font:600 9.5px/1.2 var(--mono);letter-spacing:.16em;color:var(--text-3)}
.grouphead2 .gcount{font:500 9.5px/1 var(--mono);color:var(--text-4)}
.grouphead2 .master{width:15px;height:15px;border-radius:3px;border:1px solid var(--line-2);
  background:var(--bg);color:var(--accent-on);font:700 10px/1 var(--sans);cursor:pointer;
  display:grid;place-items:center;padding:0}
.grouphead2 .master[data-tri="all"]{background:var(--accent);border-color:var(--accent)}
.grouphead2 .master[data-tri="partial"]{background:var(--accent-tint);border-color:var(--accent);color:var(--accent-hi)}
.grouphead2 .gop{width:64px;height:3px;accent-color:var(--accent);padding:0;border:0;background:transparent}
.dock .dhead #layOn{margin-left:auto;margin-right:8px}


/* ==========================================================================
   §4 — MODEL SURFACE CARD + AREA STATISTICS
   ========================================================================== */
.dock .drow--sw{justify-content:space-between}
.dock .ramp{padding:2px var(--s-3) 8px}
.dock .ramprow{display:grid;grid-template-columns:22px 1fr auto;gap:9px;align-items:center;
  padding:4px 0;font:400 11.5px/1.2 var(--sans);color:var(--text-2)}
.dock .ramprow i{height:12px;border-radius:3px}
.dock .ramprow b{font:500 10px/1 var(--mono);color:var(--text-4)}
.dock .seg{display:flex;margin:2px var(--s-3) 10px;border:1px solid var(--line);
  border-radius:var(--r-sm);overflow:hidden}
.dock .seg button{flex:1;padding:6px 0;background:transparent;border:0;cursor:pointer;
  font:600 9.5px/1 var(--mono);letter-spacing:.08em;color:var(--text-2)}
.dock .seg button.on{background:var(--accent);color:var(--accent-on)}
.dock .drow input[type=range]{flex:1;margin:0 10px;height:3px}
.dock .drow b{font:500 10px/1 var(--mono);color:var(--text-4);min-width:38px;text-align:right}
.dock .dnote{margin:0;padding:10px var(--s-3) 12px;font:400 11px/1.55 var(--sans);color:var(--text-2)}
.dock .dnote b{color:var(--danger-fg);font-weight:600}

/* Follows the cursor at 16px, flips at the edges. The confidence gauge is part
   of the card, never a separate surface — a score without it misleads. */
#statsCard{position:fixed;z-index:40;width:264px;pointer-events:none;background:var(--surface);
  backdrop-filter:var(--blur);border:1px solid var(--line-2);border-radius:var(--r-lg);
  box-shadow:var(--e-pop);padding:11px 12px 12px}
#statsCard.hidden{display:none}
#statsCard .scap{display:flex;justify-content:space-between;font:600 8.5px/1 var(--mono);
  letter-spacing:.16em;color:var(--text-3);margin-bottom:9px}
#statsCard .sscore{display:flex;align-items:center;gap:10px;margin-bottom:10px}
#statsCard .sscore b{font:500 26px/1 var(--mono);color:var(--text);letter-spacing:-.01em}
#statsCard .sbar{flex:1;height:5px;border-radius:3px;background:var(--surface-3);overflow:hidden}
#statsCard .sbar i{display:block;height:100%;background:var(--accent)}
#statsCard .sfact div{display:grid;grid-template-columns:1fr 24px auto;gap:8px;align-items:center;
  padding:3px 0;font:400 10.5px/1.3 var(--sans);color:var(--text-2)}
#statsCard .sfact i{height:4px;border-radius:2px;background:var(--accent);opacity:.7;max-width:24px}
#statsCard .sfact b{font:500 9.5px/1 var(--mono);color:var(--text-4)}
#statsCard .sconf{display:flex;align-items:center;gap:8px;margin-top:9px;padding-top:9px;
  border-top:1px solid var(--line);font:600 8.5px/1 var(--mono);letter-spacing:.14em;color:var(--text-3)}
#statsCard .sgauge{flex:1;height:5px;border-radius:3px;background:var(--surface-3);overflow:hidden}
#statsCard .sgauge i{display:block;height:100%;background:var(--warn-fg)}
#statsCard .sconf b{font:500 9.5px/1 var(--mono);color:var(--text-2);letter-spacing:0}
#statsCard .snote,#statsCard .snone{margin-top:7px;font:400 10.5px/1.5 var(--sans);color:var(--text-3)}

/* The scale bar is mandatory and never lives in a rail. */
.maplibregl-ctrl-bottom-left{left:404px!important;bottom:12px!important;right:auto!important;z-index:23}
body.weather-on .maplibregl-ctrl-bottom-left{bottom:calc(var(--weather-h,170px) + 12px)!important}
.maplibregl-ctrl-bottom-left .maplibregl-ctrl{margin:0!important}
.maplibregl-ctrl-scale{background:var(--surface)!important;backdrop-filter:var(--blur);
  border:1px solid var(--line)!important;border-top-width:1px!important;border-radius:var(--r-sm);
  color:var(--text-2)!important;font:500 9.5px/1 var(--mono)!important;padding:5px 8px!important}

#baseDock{width:304px}   /* §4: the basemap card is 304, not the 296 dock default */

/* Hover identify — what is this thing? */
#idCard{position:fixed;z-index:41;max-width:280px;pointer-events:none;background:var(--surface);
  backdrop-filter:var(--blur);border:1px solid var(--line-2);border-radius:var(--r-md);
  box-shadow:var(--e-pop);padding:9px 11px}
#idCard.hidden{display:none}
/* T9.4 — one card per layer under the cursor. A hairline between items so a stack reads
   as several answers rather than one long one, and a cap note when there are more. */
#idCard .iditem + .iditem{margin-top:9px;padding-top:9px;border-top:1px solid var(--line)}
#idCard .idmore{margin-top:8px;padding-top:7px;border-top:1px dashed var(--line);
  font:400 10px/1.4 var(--sans);color:var(--text-3)}
#idCard{max-height:70vh;overflow:hidden}
#idCard.pinned{overflow:auto}
#idCard .idhead{display:flex;align-items:center;gap:8px;font:600 12.5px/1.25 var(--sans);color:var(--text)}
#idCard .idsub{margin-top:5px;font:400 11px/1.5 var(--sans);color:var(--text-2);text-wrap:pretty}
#idCard .idrow{margin-top:6px;padding-top:6px;border-top:1px solid var(--line);
  font:600 8.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
/* state chip on a waypoint badge — subordinate to the glyph, never a second marker */
.wpb{position:relative}
.wpb .wpchip{position:absolute;top:-2px;right:-2px;width:7px;height:7px;border-radius:50%;
  border:1.5px solid var(--bg);box-sizing:content-box}
.lp--pair{display:flex;gap:3px;align-items:center}

/* A tool owns the cursor: hover-identify stands down and the map says so. */
body.tool-armed #idCard{display:none!important}
body.tool-armed .maplibregl-canvas{cursor:crosshair}
body.tool-armed[data-tool="waypoint"] .maplibregl-canvas{cursor:copy}

/* Box-draw mode: the map has stopped panning, so say why. */
body.boxdraw .maplibregl-canvas{cursor:crosshair!important}
body.boxdraw-active .maplibregl-canvas{cursor:grabbing!important}
body.boxdraw #dragBox,#dragBox.on{background:var(--accent);color:var(--accent-on);border-color:var(--accent)}

/* Coordinate entry on the pin tool. The rail tip is click-through by default; the
   input re-enables pointer events on itself only. */
#railTip .tipcoord{display:flex;gap:6px;margin-top:8px}
#railTip .tipcoord input{flex:1;min-width:0;background:var(--surface-2);border:1px solid var(--line-2);
  border-radius:var(--r-sm);color:var(--text);font:500 11px/1 var(--mono);padding:6px 7px}
#railTip .tipcoord button{background:var(--accent);color:var(--accent-on);border:0;border-radius:var(--r-sm);
  font:600 10px/1 var(--mono);padding:0 10px;cursor:pointer}

/* Model surface is now the SOLE control for the high/med/low bands, so its view-rail
   button is brass to read as primary — not just another white tool glyph. */
#viewSurface svg{stroke:var(--accent)}
#viewSurface.on{background:var(--accent);}
#viewSurface.on svg{stroke:var(--accent-on)}

/* Recalculate: re-plan inside hand-drawn focus areas (server reuses cached rasters). */
#rescopeBtn{position:absolute;z-index:26;left:420px;bottom:16px;background:var(--accent);
  color:var(--accent-on);border:0;border-radius:var(--r-md);box-shadow:var(--e-pop);
  font:600 12px/1 var(--sans);padding:11px 15px;cursor:pointer}
#rescopeBtn:hover{background:var(--accent-hi)}
#rescopeBtn[disabled]{opacity:.6;cursor:default}
#rescopeBtn.hidden{display:none}

/* T10.14 — the basemap swatch carries a real tile now, with the gradient underneath as
   the offline fallback. `overflow:hidden` is what makes a 256 px tile read as a 38x26
   chip rather than spilling over the row; the img is removed on error, which reveals
   the gradient rather than a broken-image glyph. */
.bthumb{position:relative;overflow:hidden;flex:0 0 auto}
.bthumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* ════════════════════════════════════════════════════════════════════════════
   MOBILE (E7). Joe, 2026-08-11: "the left side panel covers the whole screen and
   cant be minimized. not usable on mobile at the minute."

   Measured before changing anything: `.tabpanel` is `width: var(--panel-w)` = 380px,
   absolutely positioned, on a 375px viewport. It is WIDER THAN THE PHONE, so it covers
   the map completely and there is nothing to collapse it with. This stylesheet had ZERO
   media queries — the app was never made responsive at all, so this is the first.

   THE PANEL BECOMES A BOTTOM SHEET, because on a phone the map IS the product and a
   panel that owns the screen is a panel that has replaced it. Three snap states, the
   pattern every map app on a phone uses:

       peek   a handle and the plan name — the map has the screen
       half   enough to read the ranked areas while still seeing where they are
       full   the panel as it is on desktop, when you are actually reading

   Everything else in here follows from the sheet: chrome that was positioned relative to
   a 380px left panel (`left: 420px`, `calc(var(--panel-w) + 22px)`) has nothing to be
   relative to once the panel is at the bottom, and would sit off-screen.
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 820px){
  :root{
    --bar-h:46px;
    /* The three snap heights. `dvh` so the sheet does not jump when a mobile browser's
       address bar hides — `vh` is the wrong unit on a phone and is why sheets flicker. */
    --sheet-peek:76px;
    --sheet-half:52dvh;
    --sheet-full:calc(100dvh - var(--bar-h) - 8px);
  }

  /* ---- the sheet ---- */
  .tabpanel{
    top:auto; left:0; right:0; bottom:0; width:auto;
    height:var(--sheet-half);
    border-radius:16px 16px 0 0;
    border-left:0; border-right:0; border-bottom:0;
    box-shadow:0 -12px 40px rgba(0,0,0,.55);
    /* The handle is sticky so it stays grabbable while the content scrolls under it. */
    padding-top:0;
    transition:height .22s cubic-bezier(.4,0,.2,1);
    overscroll-behavior:contain;
    /* ABOVE THE MAP TOOLS. On desktop the panel sits beside the rails; on a phone it sits
       UNDER them, and at half height the tool rail cut straight through the sheet's own
       handle — "TAP FOR MOR…" — and through the setup form. The rails are for working the
       map; while the sheet is open you are reading, not measuring. In peek the sheet is
       76px tall, so they are all still reachable. */
    z-index:26;
  }
  html[data-sheet="peek"] .tabpanel{height:var(--sheet-peek)}
  html[data-sheet="half"] .tabpanel{height:var(--sheet-half)}
  html[data-sheet="full"] .tabpanel{height:var(--sheet-full)}
  /* Mid-drag the height is set inline and must not fight the transition. */
  html[data-sheet="drag"] .tabpanel{transition:none}
  /* In peek the content is hidden rather than scrolled-to-top: a half-visible sentence
     under the handle reads as a rendering fault, not as a collapsed panel. */
  html[data-sheet="peek"] .tabpanel > *:not(.sheet-grip){display:none}

  .sheet-grip{
    position:sticky; top:0; z-index:2;
    display:flex; align-items:center; gap:10px;
    padding:9px 14px 8px; cursor:grab;
    background:var(--surface); border-bottom:1px solid var(--line);
    border-radius:16px 16px 0 0;
    touch-action:none;              /* we own the vertical drag */
  }
  .sheet-grip::before{
    content:''; position:absolute; left:50%; top:5px; transform:translateX(-50%);
    width:36px; height:4px; border-radius:99px; background:var(--line-2);
  }
  .sheet-grip .sheet-title{
    margin-top:6px; font:600 12px/1 var(--sans); color:var(--text);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .sheet-grip .sheet-hint{
    margin-top:6px; margin-left:auto; font:500 9.5px/1 var(--mono);
    letter-spacing:.1em; text-transform:uppercase; color:var(--text-4);
  }

  /* ---- the top bar has to fit 375px ---- */
  #tabbar{gap:6px; padding:0 10px}
  #tabbar .brand{font-size:11px; letter-spacing:.16em}
  /* The step LABELS are what overflow — four words plus separators is 441px of a 375px
     screen. The numbers carry the same information in a quarter of the width. */
  .steps button span:not(.n){display:none}
  .steps .sep{width:8px}
  #tabbar button[data-tab]{padding:7px 9px}
  /* The plan name and its meta line are the first things to go: the sheet's own handle
     shows the plan name, so keeping it here is duplication that costs the tab bar. */
  #planbar{display:none}

  /* ---- chrome that was anchored to the old left panel ---- */
  #layersPill,#basePill,#winPill,#rescopeBtn{left:10px}
  #basePill{top:52px}
  #layersPill{top:calc(var(--bar-h) + 8px)}
  #winPill{top:calc(var(--bar-h) + 44px)}
  #weather,#deepBadge{left:10px; right:10px; width:auto}
  #weather{bottom:calc(var(--sheet-peek) + 12px)}
  #deepBadge{top:calc(var(--bar-h) + 8px)}
  #rescopeBtn{bottom:calc(var(--sheet-peek) + 12px)}

  /* Right-hand rails sit above the sheet rather than behind it. */
  #railStack{top:calc(var(--bar-h) + 8px); right:8px}
  #mapctl{right:8px; bottom:calc(var(--sheet-peek) + 12px)}
  #railTip{right:52px; width:min(236px, calc(100vw - 70px))}
  /* A 296px dock on a 375px screen is the same bug as the 380px panel. */
  .dock{width:auto; left:8px; right:8px; max-height:60dvh; overflow:auto}
  #acctMenu{width:min(250px, calc(100vw - 20px))}

  /* NOTHING SCROLLS SIDEWAYS. A map app that pans horizontally when you drag the chrome
     feels broken, and the page was 791px wide on a 375px screen — the tab bar's controls
     alone were pushing it past 460. The bar scrolls WITHIN ITSELF if it still cannot fit,
     which keeps the language toggle and the account button reachable instead of hiding
     them; the page itself does not move. */
  html,body{overflow-x:hidden; max-width:100vw}
  #tabbar{overflow-x:auto; overflow-y:hidden; scrollbar-width:none}
  #tabbar::-webkit-scrollbar{display:none}
  #tabbar > *{flex:0 0 auto}
  .steps{min-width:0}
  /* The scale bar is informative and it is the one control that grows with the zoom;
     capped so a wide scale at low zoom cannot push the layout. */
  .maplibregl-ctrl-scale{max-width:120px; overflow:hidden}

  /* THE ATTRIBUTION HAS TO BE ON SCREEN. It is nudged to `left:404px` on desktop to clear
     the 380px panel — which on a 375px phone puts it 29px PAST the right edge, entirely
     invisible. That is not cosmetic: Esri's basemap and NRCan's Canada Base Map both
     require acknowledgement, and OGL–Canada makes it a condition of the licence. An
     unreadable credit is an unmet obligation, and it would have shipped inside the same
     week I wrote the attribution ticket. */
  .maplibregl-ctrl-bottom-left{
    left:8px!important; right:8px!important;
    bottom:calc(var(--sheet-peek) + 8px)!important;
  }
  body.weather-on .maplibregl-ctrl-bottom-left{
    bottom:calc(var(--sheet-peek) + 8px)!important;
  }
  .maplibregl-ctrl-attrib{font-size:10px; max-width:100%}

  /* Touch targets. 44px is the accessibility floor and these were built for a cursor.
     (Was 40px — under the floor it names; the field-tier contract pins 44.) */
  .fbopt,.fbattach,.btn{min-height:44px}

  /* ── FIELD TIER (#348) ─────────────────────────────────────────────────────
     Today's sites as 48px thumb chips above the sheet, visible only while the
     sheet is at peek (map = the screen). The connection chip says what is TRUE
     (navigator.onLine) — it never claims cached maps that don't exist. Hidden
     while the wind calendar is open: same shelf, deliberate tool wins. */
  #fieldChips{display:none; position:absolute; z-index:23;
    left:10px; right:64px; bottom:calc(var(--sheet-peek) + 34px);
    flex-direction:column; gap:7px; pointer-events:none}
  html[data-sheet="peek"] #fieldChips{display:flex}
  body.weather-on #fieldChips{display:none!important}
  #fieldChips .fchead{display:flex; align-items:center; gap:8px; padding:0 2px}
  #fieldChips .fchead .cap{font:600 9.5px/1 var(--mono); letter-spacing:.16em;
    color:var(--text-2); text-shadow:0 1px 2px #0B0F0D}
  #fieldChips .fchead .conn{margin-left:auto; font:500 10px/1 var(--mono);
    letter-spacing:.06em; padding:4px 7px; border-radius:var(--r-sm);
    background:color-mix(in srgb,var(--surface) 88%,transparent); border:1px solid var(--line)}
  #fieldChips .fchead .conn[data-on="1"]{color:var(--good-fg)}
  #fieldChips .fchead .conn[data-on="0"]{color:var(--warn-fg); border-color:var(--warn-line)}
  #fieldChips .fcrow{display:flex; gap:8px; overflow-x:auto; padding-bottom:2px;
    pointer-events:auto; scrollbar-width:none}
  #fieldChips .fcrow::-webkit-scrollbar{display:none}
  #fieldChips .fchip{flex:0 0 auto; display:flex; align-items:center; gap:8px;
    height:48px; padding:0 12px 0 8px; border-radius:var(--r-lg); cursor:pointer;
    background:color-mix(in srgb,var(--surface) 94%,transparent);
    backdrop-filter:var(--blur); border:1px solid var(--line-2); box-shadow:var(--e-panel)}
  #fieldChips .fchip:active{background:var(--surface-2)}
  #fieldChips .fchip .glyph{width:30px; height:30px; border-radius:var(--r-md);
    display:grid; place-items:center; border:1.5px solid var(--halo, #0B0F0D)}
  #fieldChips .fchip .nm{font:600 12.5px/1.2 var(--sans); color:var(--text); white-space:nowrap}
  #fieldChips .fchip .mt{font:500 10.5px/1.2 var(--mono); color:var(--text-2); white-space:nowrap}
  #fieldChips .fchip .wdot{width:10px; height:10px; border-radius:50%; margin-left:2px; flex:none}
  #mcMe{display:grid}
}

/* Centre-on-me is a FIELD affordance: on desktop the tool stays a desk tool and
   locate centres the AOI (see mapctl). Hidden above the phone breakpoint. */
@media (min-width: 821px){ #mcMe{display:none!important} }

/* The me-marker: bone core, brass ring — brass is the one chrome colour allowed
   on the map, and blue belongs to water alone. */
.me-marker{width:20px; height:20px; border-radius:50%; background:#F2F5F6;
  border:2.5px solid #0B0F0D; box-shadow:0 0 0 4px #C8963E66, 0 0 0 11px #C8963E1A}

/* Landscape phones are short, not narrow: a 52dvh sheet leaves almost no map. */
@media (max-width:900px) and (orientation:landscape){
  :root{--sheet-half:66dvh; --sheet-peek:56px}
}

/* SECTION HEADS IN THE LAYERS DOCK (T19.11). Basemap and analysis are different kinds of
   thing with different availability, so they read as two lists rather than one long one —
   heavier than a group head, which still sits inside the analysis section. */
.secthead{display:flex;align-items:center;gap:8px;padding:12px 12px 4px;
  border-top:1px solid var(--line);margin-top:6px}
.secthead:first-child{border-top:0;margin-top:0}
.secthead .slabel{font:600 11px/1 var(--mono);letter-spacing:.14em;color:var(--text-2)}
.secthead .gcount{margin-left:auto;font:500 11px/1 var(--mono);color:var(--text-3)}

/* One fact per line under a hover card body — what THIS jurisdiction publishes about
   this polygon. Absent fields print nothing, so the block collapses to zero height
   where a register says nothing rather than showing empty rows. */
.iddet{display:block;margin-top:4px;font-size:11px;color:var(--text-2)}
.iddet b{color:var(--text-1);font-weight:600}