/* ===========================================================================
   BGP Hex Explorer — "Bend Made" project brand
   The City's public/community-facing brand for the Growth Plan.

   Narrowed six-color palette, prioritized for all Bend Made content:
     Night  #002b3d  primary / font color
     River  #589ab0  primary color
     Sun    #ecc94a  secondary
     White  #ffffff  secondary
     Cloud  #f8f7e6  secondary
     Clay   #b9614e  secondary

   Contrast-derived ink variants. Cloud and White both fail AA on River
   (2.92 and 3.15), and Clay only reaches 4.30 on white, so small text uses the
   darkened tones below while the brand hues carry fills, bars and rules:
     --river-ink #33697c  6.08:1 on white
     --clay-ink  #9c4d3c  5.93:1 on white
   Night on River is 4.72:1 and Night on Sun is 9.21:1, so those pairs are used
   as-is for the page bar and for badges.

   The broader COB palette stays available for data visualisation, which the
   brand guidance explicitly permits where six hues are not enough.
   =========================================================================== */

:root{
  /* Bend Made — the six */
  --night:#002b3d; --river:#589ab0; --sun:#ecc94a;
  --white:#ffffff; --cloud:#f8f7e6; --clay:#b9614e;

  /* Accessible ink variants of the brand hues */
  --river-ink:#33697c; --clay-ink:#9c4d3c;

  /* Neutrals derived from Cloud so the grays sit in the brand's warm cast */
  --mute:#5c6670; --muted:#c8c5ad; --rule:#a9b4bb;
  --track:#e7e4cf; --panel:#ffffff; --line:#e4e1c9;

  /* The header band follows the active lens, matching the choropleth ramp.
     Each is picked so Night reads on it at AA for the page tabs: River 4.72,
     green 4.69, orange 5.69. The orange cannot go darker without failing —
     #c57037 is only 4.04 — so it sits a shade lighter than the other two. */
  --lens-band:#589ab0;

  --rail:352px;
  /* Lynstone is the City's preferred face; Segoe UI is its sanctioned fallback
     and is what will actually render on most machines. */
  --font:"Lynstone","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;font-family:var(--font);color:var(--night);background:var(--cloud);
  font-size:13.5px;line-height:1.45;-webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;overflow:hidden;
}

/* One band color per lens, matching RAMP_LENS in js/config.js. Set on <body>
   by renderAll(). Blue is the existing River, so only green and orange are new. */
body[data-lens="PEOPLE"]   { --lens-band:#6b9d63 }
body[data-lens="PLACE"]    { --lens-band:#589ab0 }
body[data-lens="PRACTICES"]{ --lens-band:#d8913e }
/* Fourth hue for the Composites placeholder. #9a86c9 clears AA against Night
   at 4.69, the same as People, so the page tabs stay readable on the band. */
body[data-lens="COMPOSITES"]{ --lens-band:#9a86c9 }

/* ------------------------------- top bar -------------------------------- */
.topbar{
  display:flex;align-items:center;gap:20px;padding:8px 18px;
  background:var(--night);color:var(--cloud);flex:0 0 auto;
  border-bottom:3px solid var(--lens-band);
}
.logo{flex:0 0 auto;display:flex;align-items:center;padding-right:4px}
.logo img{height:48px;width:auto;display:block}
.brand{border-left:1px solid rgba(248,247,230,.3);padding-left:18px}
.brand .lens{
  display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sun);font-weight:700;
}
.brand h1{margin:1px 0 0;font-size:15px;font-weight:600;letter-spacing:.01em;white-space:nowrap}
.brand .sep{color:var(--sun);margin:0 5px}
/* Lens tabs — the People / Place / Practices framework, top level. */
.lenses{display:flex;gap:2px;margin-left:10px}
.lenses button{
  background:transparent;border:0;border-bottom:3px solid transparent;
  color:rgba(248,247,230,.66);
  padding:8px 18px 7px;cursor:pointer;font:inherit;font-size:13px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
}
.lenses button:hover:not(:disabled){color:var(--cloud)}
.lenses button.on{color:var(--cloud);border-bottom-color:var(--lens-band)}
.lenses button:disabled{opacity:.35;cursor:not-allowed}

/* Page tabs — the sub-pages of the active lens, one level down. */
.subbar{
  display:flex;align-items:center;gap:16px;padding:0 18px;flex:0 0 auto;
  background:var(--lens-band);border-bottom:1px solid rgba(0,43,61,.18);
}
.pages{display:flex;gap:2px}
.pages button{
  background:transparent;border:0;color:rgba(0,43,61,.72);
  padding:7px 13px;cursor:pointer;font:inherit;font-size:12.5px;border-radius:0;
  border-bottom:2px solid transparent;
}
.pages button:hover:not(:disabled){color:var(--night)}
.pages button.on{color:var(--night);font-weight:700;border-bottom-color:var(--night)}
.pages button:disabled{opacity:.5;cursor:not-allowed}
.pages button.soon{opacity:.85;cursor:pointer}
.pages .badge{
  font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  background:var(--sun);color:var(--night);font-weight:700;
  padding:1px 6px;border-radius:8px;margin-left:6px;vertical-align:1px;
}
.lens-tagline{
  margin-left:auto;font-size:11.5px;color:var(--night);opacity:.85;
  padding:6px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* Who is signed in. Sits between the lens tabs and the status readout so the
   account and the data state read as one line of provenance. */
.account{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:11.5px;
  color:rgba(248,247,230,.8);padding-left:14px}
/* A class that sets `display` beats the browser's [hidden] rule, so anything
   toggled with the hidden attribute has to say so itself. */
.account[hidden]{display:none}
.account .who{white-space:nowrap;font-weight:600}
.account .btn-ghost{color:var(--sun)}
.account + .status{margin-left:18px}

.status{margin-left:auto;display:flex;align-items:center;gap:7px;font-size:11.5px;color:rgba(248,247,230,.75)}
.status .dot{width:7px;height:7px;border-radius:50%;background:var(--sun);flex:0 0 auto}
.status.live .dot{background:var(--sun)}
.status.snapshot .dot{background:var(--clay)}
.status.error .dot{background:var(--clay)}
.status .build{font-variant-numeric:tabular-nums;font-size:10.5px;letter-spacing:.04em;color:rgba(248,247,230,.45);border-left:1px solid rgba(248,247,230,.2);padding-left:7px}

/* ------------------------------- layout --------------------------------- */
.layout{flex:1 1 auto;display:grid;grid-template-columns:var(--rail) 1fr var(--rail);min-height:0}
.rail{overflow-y:auto;background:var(--cloud);padding:12px;display:flex;flex-direction:column;gap:12px}
.rail-left{border-right:1px solid var(--line)}
.rail-right{border-left:1px solid var(--line)}
.rail::-webkit-scrollbar{width:9px}
.rail::-webkit-scrollbar-thumb{background:var(--muted);border-radius:5px}

.panel{background:var(--panel);border:1px solid var(--line);border-radius:5px;padding:13px}
/* .panel sets no display of its own, but the rail is a flex container and a
   future display rule here would beat [hidden]; declare it explicitly. */
.panel[hidden]{display:none!important}
/* .map-wrap sets display of its own, so [hidden] needs the same explicit rule. */
.map-wrap[hidden]{display:none!important}
.panel h2{
  margin:0 0 3px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--river-ink);font-weight:700;
}
.panel-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:3px}
.panel-head h2{margin:0}
.hint{margin:0 0 10px;font-size:11.5px;color:var(--mute);line-height:1.4}

/* --------------------------- indicator picker ---------------------------- */
.indicator-list{display:flex;flex-direction:column;gap:1px;max-height:280px;overflow-y:auto;margin:-2px -4px 0}
.indicator-list label{
  display:flex;align-items:center;gap:8px;padding:5px 6px;border-radius:3px;cursor:pointer;font-size:12.5px;
}
.indicator-list label:hover{background:#F4F2E4}
.indicator-list input{accent-color:var(--river-ink);margin:0;flex:0 0 auto}
.indicator-list .warnflag{color:var(--clay);font-weight:700;cursor:help}
.indicator-list .noteflag{color:var(--mute);font-weight:700;cursor:help;font-style:italic}

.legend{margin-top:10px;border-top:1px solid var(--line);padding-top:9px}
.legend .bar{display:flex;height:11px;border-radius:2px;overflow:hidden}
.legend .bar i{flex:1}
.legend .ticks{display:flex;justify-content:space-between;font-size:10.5px;color:var(--mute);margin-top:4px}
.legend .cap{font-size:11px;color:var(--mute);margin-top:5px}

/* Reliability. The hatch key is drawn in CSS at the same 45° and Night ink as
   the map pattern, so the key and the map are visibly the same mark. */
.moe-row{display:flex;align-items:center;gap:7px;margin-top:8px;padding-top:7px;
  border-top:1px dashed var(--line);font-size:11px;color:var(--night)}
.moe-row .moe-chk{display:flex;align-items:center;gap:6px;margin:0;cursor:pointer;flex:1}
.moe-row .moe-chk input{margin:0}
.hatch-key{width:15px;height:15px;flex:none;border:1px solid var(--rule);border-radius:2px;
  background:repeating-linear-gradient(45deg,rgba(0,43,61,.65) 0 2px,transparent 2px 10px),
             var(--panel)}
.moe-row .moe-count{color:var(--mute);white-space:nowrap;font-variant-numeric:tabular-nums}
.moe-row .btn{padding:2px 6px;font-size:10.5px}
.moe-row.moe-off{display:block;color:var(--mute);font-style:italic}
.moe-note{font-size:10.5px;color:var(--mute);margin-top:4px;font-style:italic}

/* In the summary table, a sound estimate whispers and a shaky one does not. */
.stats .lab em.moe-ok{color:var(--mute)}
.stats .lab em.moe-bad{color:var(--clay-ink);font-style:normal}

/* ------------------------------- criteria -------------------------------- */
.logic-toggle{display:flex;gap:0;margin-bottom:9px}
.logic-toggle button{
  flex:1;background:#fff;border:1px solid var(--line);padding:5px 8px;font:inherit;font-size:11.5px;
  cursor:pointer;color:var(--mute);
}
.logic-toggle button:first-child{border-radius:3px 0 0 3px}
.logic-toggle button:last-child{border-radius:0 3px 3px 0;border-left:0}
.logic-toggle button.on{background:var(--night);border-color:var(--night);color:var(--cloud);font-weight:700}

.rule-list{display:flex;flex-direction:column;gap:7px}
.rule{border:1px solid var(--line);border-left:3px solid var(--river);border-radius:3px;padding:8px;background:#FDFCF4}
.rule-top{display:flex;gap:6px;align-items:center;margin-bottom:6px}
.rule-top select{flex:1;min-width:0}
.rule-del{
  background:none;border:0;color:var(--mute);cursor:pointer;font-size:15px;line-height:1;padding:0 2px;flex:0 0 auto;
}
.rule-del:hover{color:var(--clay)}
.rule-range{display:flex;align-items:center;gap:6px}
.rule-range input{width:100%;min-width:0}
.rule-range span{color:var(--mute);font-size:11px;flex:0 0 auto}
.rule-meta{font-size:10.5px;color:var(--mute);margin-top:5px}

.criteria-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px}
.count{font-size:11.5px;color:var(--mute)}
.count strong{color:var(--night)}

/* -------------------------------- fields --------------------------------- */
.fld{display:block;margin-bottom:9px}
.fld > span{display:block;font-size:11px;color:var(--mute);margin-bottom:3px}
select,input[type=number],input[type=text]{
  width:100%;padding:5px 7px;border:1px solid var(--line);border-radius:3px;
  font:inherit;font-size:12.5px;background:#fff;color:var(--night);
}
select:focus,input:focus{outline:2px solid var(--river);outline-offset:-1px;border-color:var(--river-ink)}
select.mini{width:auto;font-size:11px;padding:3px 5px}
.radius-row{display:flex;gap:6px}
.radius-row input{flex:1 1 auto}
.radius-row select{flex:0 0 88px}

/* -------------------------------- buttons -------------------------------- */
.btn{
  border:1px solid var(--line);background:#fff;color:var(--night);border-radius:3px;
  padding:6px 12px;font:inherit;font-size:12.5px;cursor:pointer;
}
.btn:hover:not(:disabled){border-color:var(--river-ink);color:var(--river-ink)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-primary{background:var(--night);border-color:var(--night);color:var(--cloud);font-weight:600}
.btn-primary:hover:not(:disabled){background:var(--river-ink);border-color:var(--river-ink);color:var(--cloud)}
.btn-block{display:block;width:100%;margin-top:6px}
.btn-sm{padding:4px 10px;font-size:11.5px}
.btn-ghost{border:0;background:none;color:var(--river-ink);font-weight:600;font-size:11.5px;padding:2px 4px}
.btn-ghost:hover{text-decoration:underline}

/* --------------------------------- map ----------------------------------- */
.map-wrap{position:relative;min-width:0}
#map{position:absolute;inset:0}
.maplibregl-ctrl-attrib{font-size:10px}

.maptools{
  position:absolute;top:10px;left:10px;z-index:5;display:flex;flex-wrap:wrap;gap:7px;align-items:center;
  background:rgba(255,255,255,.96);border:1px solid var(--line);border-radius:4px;
  padding:6px 8px;box-shadow:0 1px 5px rgba(0,43,61,.12);
}
.tool-group{display:flex}
.tool-group button{
  background:#fff;border:1px solid var(--line);padding:4px 10px;font:inherit;font-size:11.5px;
  cursor:pointer;color:var(--mute);
}
.tool-group button + button{border-left:0}
.tool-group button:first-child{border-radius:3px 0 0 3px}
.tool-group button:last-child{border-radius:0 3px 3px 0}
.tool-group button:only-child{border-radius:3px}
.tool-group button:hover{color:var(--river-ink)}
.tool-group button.on{background:var(--night);border-color:var(--night);color:var(--cloud);font-weight:700}
.chk{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--mute);cursor:pointer}
.chk input{accent-color:var(--river-ink);margin:0}

/* The Bend Made mark is a speech bubble with a squared tail; the map note
   echoes that shape. Night ground rather than the logo's Clay, because Cloud
   on Clay is only 3.98:1 and this text is 11.5px. */
.map-note{
  position:absolute;bottom:32px;left:10px;z-index:5;background:var(--night);color:var(--cloud);
  padding:7px 12px;border-radius:2px;font-size:11.5px;max-width:340px;display:none;
  font-weight:600;
}
.map-note::after{
  content:'';position:absolute;left:16px;bottom:-8px;width:12px;height:8px;
  background:var(--night);clip-path:polygon(0 0,100% 0,0 100%);
}
.map-note.show{display:block}

/* ------------------------------- selection ------------------------------- */
.selection-head .bignum{display:flex;align-items:baseline;gap:6px;margin:2px 0 3px}
.selection-head .bignum strong{font-size:30px;font-weight:700;color:var(--river-ink);line-height:1}
.selection-head .bignum span{font-size:12px;color:var(--mute)}
.submeta{font-size:11.5px;color:var(--mute);line-height:1.45}

.stats-empty{font-size:12px;color:var(--mute);padding:6px 0}
table.stats{width:100%;border-collapse:collapse;font-size:12px}
table.stats th{
  text-align:right;font-weight:600;color:var(--mute);font-size:10px;text-transform:uppercase;
  letter-spacing:.06em;padding:0 0 5px;border-bottom:1px solid var(--line);
}
table.stats th:first-child{text-align:left}
table.stats td{padding:4px 0;border-bottom:1px solid #F0EDDA;vertical-align:baseline}
table.stats td.lab{padding-right:10px;line-height:1.25;width:56%}
table.stats td.lab em{display:block;font-style:normal;font-size:10px;color:var(--muted);margin-top:1px;letter-spacing:.01em}
table.stats td.val{text-align:right;font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap;width:24%}
table.stats td.cty{text-align:right;font-variant-numeric:tabular-nums;font-size:11px;white-space:nowrap;width:20%;color:var(--mute)}
.up{color:var(--clay)}
.down{color:var(--river-ink)}
.nodata{color:var(--muted);font-style:italic;font-weight:400}
.rowwarn{color:var(--clay);cursor:help;font-weight:700}
.rownote{color:var(--mute);cursor:help;font-weight:700;font-style:italic}
.grouphead td{
  padding-top:11px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--river-ink);font-weight:700;border-bottom:1px solid var(--line);
}

.sharebar{display:block;height:3px;background:var(--track);border-radius:2px;margin-top:2px}
.sharebar i{display:block;height:100%;background:var(--river);border-radius:2px}


/* ------------------------------- inspector ------------------------------- */
.inspector{
  position:fixed;z-index:20;background:#fff;border:1px solid var(--line);border-radius:4px;
  box-shadow:0 3px 14px rgba(0,43,61,.2);padding:11px 13px;max-width:290px;font-size:12px;
}
.inspector h3{margin:0 0 6px;font-size:12.5px;color:var(--river-ink)}
.inspector .row{padding:2px 0;border-top:1px solid #F2EFDD;line-height:1.35}
.inspector .row b{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.inspector .close{position:absolute;top:5px;right:7px;border:0;background:none;cursor:pointer;color:var(--mute);font-size:15px}

/* ------------------------------ loading ---------------------------------- */
.loading{
  position:absolute;inset:0;display:grid;place-items:center;background:var(--cloud);z-index:10;
  font-size:13px;color:var(--mute);
}

@media (max-width:1400px){ :root{--rail:310px} }


/* ------------------------------- overlays -------------------------------- */
.overlay-list{display:flex;flex-direction:column;gap:1px;margin:0 -4px}
.overlay-list .ov{
  display:flex;align-items:center;gap:8px;padding:4px 6px;border-radius:3px;
  cursor:pointer;font-size:12.5px;
}
.overlay-list .ov:hover{background:#F4F2E4}
.overlay-list input{accent-color:var(--river-ink);margin:0;flex:0 0 auto}
.overlay-list i{width:12px;height:3px;border-radius:2px;flex:0 0 auto}
.overlay-list .ov-group{margin:7px 4px 2px;font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--mute)}
.overlay-list i.ov-base{background:repeating-linear-gradient(90deg,var(--mute) 0 3px,transparent 3px 5px)}
.overlay-list .ov-loading{font-style:normal;font-size:10px;color:var(--mute);letter-spacing:.02em}
.overlay-list .ov-group:first-child{margin-top:3px}

/* -------------------------- unavailable layers --------------------------- */
.blocked{background:#FBF3E4;border-color:#EDE2C2}
.blocked h2{color:var(--clay)}
.srcrow{font-size:11.5px;line-height:1.4;margin-bottom:8px;color:var(--mute)}
.srcrow:last-child{margin-bottom:0}
.srcrow strong{display:block;color:var(--night);font-size:12px}
.pages .lock{opacity:.7}

/* Criteria rules group by layer, so the select needs room */
.rule-top select optgroup{font-style:normal;font-weight:700;color:var(--river-ink)}


/* ------------------------------- lens panel ------------------------------ */
.lens-panel{background:#F3F1E1;border-color:#E4E1C9}
.lens-panel h2{color:var(--night)}
.lens-body p{margin:0 0 7px;font-size:11.5px;line-height:1.5;color:var(--mute)}
.lens-body p:last-child{margin-bottom:0}
.lens-body.clamped p{
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
}
.lens-body .src{font-size:10.5px;color:var(--muted);font-style:italic}

/* ------------------------------ placeholder ------------------------------ */
.placeholder{
  border:1px dashed var(--rule);border-radius:4px;padding:11px;background:#FCFBF2;
}
.placeholder p{margin:0 0 7px;font-size:11.5px;line-height:1.45;color:var(--mute)}
.placeholder p:last-child{margin-bottom:0}
.placeholder strong{color:var(--night)}

/* ---------------------------- policy context ----------------------------- */
.polrow{margin-bottom:9px}
.polrow:last-child{margin-bottom:0}
.pollab{display:flex;justify-content:space-between;gap:8px;font-size:11.5px;align-items:baseline}
.polshare{color:var(--mute);font-size:10.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
.polvals{font-size:10.5px;color:var(--mute);margin-top:2px;line-height:1.35}


/* ------------------------- composite selection --------------------------- */
/* One selection, built from attribute, hand-drawn and spatial steps. The
   recipe makes the composite legible and reproducible. */
.recipe{list-style:none;margin:10px 0 0;padding:9px 0 0;border-top:1px solid var(--line)}
.recipe .step{
  display:flex;align-items:baseline;gap:7px;font-size:11px;padding:2px 0;
  color:var(--mute);line-height:1.35;
}
.recipe .toggle{
  flex:0 0 auto;width:17px;height:17px;border:1px solid var(--line);background:#fff;
  border-radius:3px;cursor:pointer;font:inherit;font-size:12px;line-height:1;
  color:var(--river-ink);font-weight:700;padding:0;
}
.recipe .toggle:hover{border-color:var(--river-ink)}
.recipe .step-out .toggle{background:var(--clay);border-color:var(--clay);color:#fff}
.recipe .step-out .what{text-decoration:line-through;color:var(--mute)}
.recipe .what{flex:1 1 auto;min-width:0;color:var(--night);word-break:break-word}
.recipe .n{flex:0 0 auto;font-variant-numeric:tabular-nums;color:var(--mute)}
.recipe .rule-del{flex:0 0 auto}
.recipe .step-manual .what{color:var(--mute);font-style:italic}

/* Standing reminder of what the next selection will do. */
.activetool{font-size:11.5px;color:var(--mute)}


/* ------------------- three selection panels, one operator ---------------- */
/* One selection, three methods nested inside it — the box is the umbrella. */
.select-umbrella{background:#F3F1E1;border-color:#DCD8BE;padding:13px 12px 12px}
.select-umbrella > .panel-head h2{color:var(--night)}
.umbrella-chk{margin:0 0 12px}
.method{
  background:#fff;border:1px solid var(--line);border-radius:4px;
  padding:10px 11px;margin-top:9px;
}
.method-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.method-head h3{
  margin:0;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--river-ink);font-weight:700;
}
.method-actions{display:flex;gap:6px;align-items:center}
.btn-clear{color:var(--clay-ink)}
.btn-clear:disabled{color:var(--muted);text-decoration:none;cursor:default}
.btn-clear:disabled:hover{text-decoration:none}
.method .fld:last-of-type{margin-bottom:0}
.method h4{
  margin:0 0 7px;font-size:10px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--mute);font-weight:700;
}
.logic-explain{
  margin:8px 0 10px;font-size:11px;color:var(--mute);line-height:1.4;
  border-left:2px solid var(--river);padding-left:8px;
}
.tool-group-block{display:flex;width:100%}
.tool-group-block button{flex:1}
.shape-list{margin-top:8px;display:flex;flex-direction:column;gap:2px}
.shape-row{
  display:flex;align-items:center;justify-content:space-between;gap:6px;
  font-size:11.5px;color:var(--mute);padding:2px 0 2px 2px;
  border-left:2px solid var(--sun);padding-left:7px;
}
.subsection{margin-top:11px;border-top:1px solid var(--line);padding-top:10px}
.subsection .radius-row{margin-bottom:6px}
.maptools .activetool{padding:2px 4px}


/* The buffer is an operation on the finished selection, not a fourth method,
   so it reads as a step rather than a peer of the three cards above it. */
.method-op{background:#FBF9EC;border-color:#E8E2C4;border-left:3px solid var(--sun)}
.method-op .hint{margin-bottom:9px}
.method-op .radius-row{margin-bottom:0}
.grow-note{margin:7px 0 0;font-size:11px;color:var(--river-ink);font-weight:600}
.recipe .step-grow .what{color:var(--night)}
.recipe .step-grow .n{color:var(--river-ink);font-weight:700}


/* Spatial relationship for the area method. */
#areaModeField{margin-bottom:0}
#areaMode button{font-size:11px;padding:5px 6px;line-height:1.25}
#areaMode button:disabled{opacity:.5;cursor:not-allowed}
.mode-note{margin:6px 0 0;font-size:10.5px;color:var(--mute);line-height:1.4}


/* ------------------------------- sign-in gate ---------------------------- */
/* Covers everything below the header: the tool is meaningless without data, so
   there is no half-loaded state to show behind it. */
.gate{position:fixed;inset:0;z-index:40;background:rgba(0,43,61,.94);
  display:grid;place-items:center;padding:24px}
.gate[hidden]{display:none}
.gate-card{background:var(--cloud);border-radius:6px;padding:30px 32px 26px;
  max-width:430px;text-align:center;box-shadow:0 12px 40px rgba(0,0,0,.35)}
.gate-logo{height:78px;width:auto;display:block;margin:0 auto 18px}
.gate-card h2{margin:0 0 10px;font-size:19px;font-weight:600;color:var(--night);
  letter-spacing:0;text-transform:none}
.gate-card p{margin:0 0 18px;font-size:12.5px;line-height:1.55;color:var(--mute)}
.gate-card .btn-primary{font-size:13.5px;padding:9px 14px}
.gate-note{margin:16px 0 0 !important;font-size:11px !important;
  border-top:1px solid var(--track);padding-top:13px;text-align:left}
.gate-err{margin:0 0 16px !important;font-size:12px !important;color:var(--clay-ink) !important;
  background:#FBF3E4;border:1px solid #EDE2C2;border-radius:4px;padding:9px 11px;text-align:left}
.gate-card code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;
  background:#fff;border:1px solid var(--track);border-radius:3px;padding:1px 4px;
  word-break:break-all}

/* ------------------------------ component weights -------------------------
   The Composites page only. Each row is a component of the measure on the map:
   the label, the citywide test it applies, and the weight it carries in the
   sum. A row at zero dims rather than disappears — a component you have taken
   out is a decision worth seeing, not a gap in the list.
   ------------------------------------------------------------------------- */
.weight-list{display:flex;flex-direction:column;gap:7px;margin:0 0 9px}
.weight-row{display:grid;grid-template-columns:1fr 104px;gap:6px;align-items:center}
.weight-row label{font-size:12px;line-height:1.25;color:var(--night);cursor:default}
.weight-row .weight-test{display:block;font-size:10.5px;color:var(--mute)}
.weight-row .noteflag{color:var(--mute);font-weight:700;cursor:help;font-style:italic;margin-left:3px}
.weight-row.off label{color:var(--mute)}
.weight-row.off .weight-test{text-decoration:line-through}
.weight-ctl{display:flex;align-items:center;gap:6px}
.weight-ctl input[type=range]{width:64px;accent-color:var(--river-ink);margin:0}
.weight-ctl output{font-size:11px;color:var(--night);font-variant-numeric:tabular-nums;
  min-width:26px;text-align:right}
.weight-row.off .weight-ctl output{color:var(--mute);font-style:italic}
.weight-dead{border-left:2px solid var(--muted);padding-left:7px;margin:0 0 9px}
.weight-scale{display:flex;gap:12px;font-size:11.5px;color:var(--night);
  border-top:1px solid var(--line);padding-top:7px}
.weight-scale label{display:flex;align-items:center;gap:4px;cursor:pointer}
.weight-scale input{accent-color:var(--river-ink);margin:0}
/* The composite breakdown inside the hover card: which components this hexagon
   scored on, and the weight each carried. Set small and quiet — it is the
   arithmetic behind the number above it, not a second headline. */
#inspector .row.parts{margin-top:4px;padding-top:4px;border-top:1px solid var(--line);
  font-size:10.5px;color:var(--mute);line-height:1.45}
#inspector .row.parts i{font-style:normal;color:var(--night);font-variant-numeric:tabular-nums}

/* ------------------------ component margin-of-error marks -----------------
   One badge per component: the share of hexagons whose ACS estimate for it has
   a CV at or above the threshold. Banded so the panel can be read at a glance —
   yellow up to 20%, orange to 50%, red above. A component with nothing flagged
   gets no badge at all rather than a green one, because an absent margin of
   error is not the same as a measured clean one.
   ------------------------------------------------------------------------- */
.relflag{display:inline-flex;align-items:center;gap:3px;margin-left:5px;padding:1px 5px;
  border-radius:3px;font-size:9.5px;font-weight:700;letter-spacing:.02em;cursor:help;
  vertical-align:1px;font-variant-numeric:tabular-nums}
.relicon{width:9px;height:9px;flex:0 0 auto;display:block}
.rel-lo {background:#f6edbc;color:#6b5d1c}
.rel-mid{background:#f7e0cd;color:#8a4a1e}
.rel-hi {background:#f2d7d1;color:var(--clay-ink)}
.weight-rel{margin:2px 0 9px;border-top:1px solid var(--line);padding-top:7px}
#inspector .parts em{font-style:normal;font-weight:700;padding:1px 4px;border-radius:3px;
  font-size:9.5px;background:#f2d7d1;color:var(--clay-ink);
  display:inline-flex;align-items:center;gap:3px;vertical-align:1px}
#inspector .parts-key{display:block;margin-top:5px;font-size:9.5px;color:var(--mute)}

/* The stale-file warning. Clay rather than the panel's usual mute, because it
   is the one message here the viewer must act on rather than merely note. */
.srcrow.srcstale{border-left:3px solid var(--clay);padding-left:8px;margin-bottom:9px}
.srcrow.srcstale strong{color:var(--clay-ink)}
.srcrow.srcstale kbd{font:inherit;font-size:10px;background:var(--track);border-radius:3px;
  padding:0 3px;border:1px solid var(--muted)}

/* A composite component whose flag is a frozen snapshot of ECONorthwest's
   Assets & Harms scores rather than a live read or a CP calculation. The tag
   sits inside .weight-test, so it inherits that size; only the treatment
   changes, because the point is that the reader notices which components are
   not ours and not current. */
.econw-tag{
  font-weight:700; letter-spacing:.02em; text-transform:uppercase;
  font-size:.82em; color:#6B4E16; background:#F6EDBC;
  border:1px solid #E3C96A; border-radius:3px; padding:0 .3em;
}

/* The viewport lock. Bottom-left of the map: top-left is the drawing tools,
   top-right MapLibre's zoom control, bottom-right the scale bar. It borrows the
   .tool-group treatment so it reads as one of the map's own controls rather
   than something bolted on, and the locked state is the same Night-on-Cloud
   inversion an armed tool uses, because both mean "this is currently on". */
.viewlock{
  position:absolute;bottom:12px;left:10px;z-index:5;
  background:rgba(255,255,255,.96);border:1px solid var(--line);border-radius:3px;
  padding:5px 11px;font:inherit;font-size:11.5px;font-weight:700;
  color:var(--mute);cursor:pointer;box-shadow:0 1px 5px rgba(0,43,61,.12);
}
.viewlock:hover{color:var(--river-ink)}
.viewlock.on{background:var(--night);border-color:var(--night);color:var(--cloud)}
.viewlock:focus-visible{outline:2px solid var(--river-ink);outline-offset:2px}

/* Map image export, appended to the Export panel by buildImageExportUi(). The
   sub-heading exists because the panel now holds two different kinds of thing
   — tables of the selection, and a picture of the map — and four unlabelled
   buttons in a row gave no clue which was which. */
.exp-sub{
  margin:14px 0 6px;padding-top:11px;border-top:1px solid var(--line);
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--river-ink);font-weight:700;
}
.exp-opt{
  display:flex;align-items:center;gap:6px;margin:7px 0 0;
  font-size:11.5px;color:var(--mute);cursor:pointer;
}
.exp-opt input{accent-color:var(--river-ink);margin:0}