/* BasinMind Shared Design System — Watershed Dark + Topo Day */
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600&display=swap");

/* ── Design tokens ──────────────────────────────────────────────────────── */
/* Watershed Dark (default) */
:root, html[data-bm-theme="dark"] {
  --bg:#0d1410;--bg-elev:#141b17;--bg-elev-2:#1a221d;
  --line:#232c27;--line-soft:#1c2521;
  --ink:#ece4cf;--ink-2:#b6b09f;--ink-3:#7a7568;--ink-4:#4d4a43;
  /* brand water: Alpine Sky → Deep Water → badge field */
  --water:oklch(.68 .12 250);--water-2:oklch(.58 .12 252);--water-soft:oklch(.32 .05 252);
  --dry:#c79461;--dry-soft:#3a2d20;
  --alarm:#b86247;--alarm-soft:#3a221b;
  --snow:#b8c9d6;--snow-soft:#1f2932;
  --crop:#9bb37a;
  --font:"Inter Tight",-apple-system,system-ui,sans-serif;
  --serif:"Instrument Serif","Iowan Old Style",Georgia,serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
}
/* Topo Day */
html[data-bm-theme="day"] {
  --bg:#fafaf7;--bg-elev:#ffffff;--bg-elev-2:#f1f0ea;
  --line:#e3e2dc;--line-soft:#ededea;
  --ink:#111714;--ink-2:#4a5048;--ink-3:#8a8d86;--ink-4:#bcbfb9;
  /* brand water on light surface: water-ink → Deep Water → very light tint */
  --water:oklch(.52 .14 250);--water-2:oklch(.42 .12 252);--water-soft:oklch(.92 .04 250);
  --dry:#b56a30;--dry-soft:#f1e2cf;
  --alarm:#9c3a23;--alarm-soft:#f0d8d0;
  --snow:#4a6a82;--snow-soft:#dde5ed;
  --crop:#5a7a3a;
}

/* ── Reset ──────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{height:100%;scroll-behavior:smooth}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--ink);
  min-height:100vh;min-height:100dvh;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"ss01","cv11";
  font-variant-numeric:tabular-nums;
  -webkit-tap-highlight-color:transparent;
  letter-spacing:-0.005em;
  transition:background .2s,color .2s;
}
a{color:inherit;text-decoration:none}
button{font-family:var(--font)}

/* ── Floating chrome header ─────────────────────────────────────────────── */
#bm-chrome{
  position:fixed;top:14px;left:14px;right:14px;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 12px 8px 16px;
  background:rgba(20,27,23,.86);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px;
  box-shadow:0 6px 24px rgba(0,0,0,.35);
  gap:10px;
}
html[data-bm-theme="day"] #bm-chrome{
  background:rgba(255,255,255,.9);
  border-color:rgba(0,0,0,.07);
  box-shadow:0 6px 24px rgba(60,50,30,.10);
}
.chr-l,.chr-r{display:flex;align-items:center;gap:8px;flex-shrink:0}
.chr-l{overflow:hidden}
.chr-logo{
  display:flex;align-items:center;text-decoration:none;
  color:var(--ink);flex-shrink:0;
}
.bm-logo-img{height:38px;width:auto;display:block}
html[data-bm-theme="day"] .bm-logo-dark{display:none}
html[data-bm-theme="dark"] .bm-logo-light{display:none}
.chr-sep{width:1px;height:20px;background:var(--line);flex-shrink:0}
.chr-nav{display:flex;gap:1px;overflow:hidden}
.chr-nav-a{
  padding:5px 9px;border-radius:7px;
  font-size:12px;color:var(--ink-3);
  text-decoration:none;transition:color .12s,background .12s;
  white-space:nowrap;
}
/* Allow <button> elements as nav items (e.g. admin tab buttons) */
button.chr-nav-a{
  border:none;cursor:pointer;background:transparent;
  font-family:var(--font);font-size:12px;
}
.chr-nav-a:hover{color:var(--ink);background:var(--bg-elev)}
.chr-nav-a.active{color:var(--ink);background:var(--bg-elev)}

/* Segment controls */
.bm-seg{
  display:flex;padding:3px;border:1px solid var(--line);
  border-radius:8px;background:var(--bg-elev);gap:1px;flex-shrink:0;
}
.bm-seg-b{
  padding:4px 9px;border:none;border-radius:5px;
  background:transparent;color:var(--ink-3);
  cursor:pointer;font-size:11.5px;font-family:var(--font);
  transition:all .12s;display:flex;align-items:center;justify-content:center;
  line-height:1;
}
.bm-seg-b.on{background:var(--bg-elev-2);color:var(--ink)}
.bm-seg-b:hover:not(.on){color:var(--ink-2)}

/* Division selector — footer chip (discreet, replaces static div chip) */
.cond-div-sel{
  /* do NOT use background shorthand — it resets background-image */
  background-color:transparent;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7'%3E%3Cpath d='M0 0l5 7 5-7z' fill='%236ba4c8'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 7px center;
  border:1px solid var(--line);border-radius:99px;
  padding:.22rem 1.5rem .22rem .65rem;
  font-family:var(--mono);font-size:10.5px;color:var(--water);
  cursor:pointer;appearance:none;-webkit-appearance:none;
  outline:none;transition:border-color .12s;vertical-align:middle;
}
html[data-bm-theme="day"] .cond-div-sel{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7'%3E%3Cpath d='M0 0l5 7 5-7z' fill='%232c7a6b'/%3E%3C/svg%3E");
}
.cond-div-sel:hover,.cond-div-sel:focus{border-color:var(--water);outline:none}
.cond-div-sel option{background:var(--bg-elev);color:var(--ink)}

/* ── Brand tagline lockup ────────────────────────────────────────────────── */
/* fitTaglines() expands letter-spacing to match wordmark width.
   Tagline must start NARROWER than wordmark — that's why font-size is 7px:
   "Know Your Water, CO!" (20 chars) at 7px ≈ 78px < "BasinMind" (9 chars) at 1.08rem ≈ 83px */
.chr-logomark{display:flex;flex-direction:column;line-height:1;gap:2px}
.chr-tagline{
  font-family:"Outfit",-apple-system,sans-serif;
  font-weight:500;font-size:7px;letter-spacing:0;
  text-transform:uppercase;white-space:nowrap;
  color:oklch(.68 .12 250); /* Alpine Sky — dark theme */
}
html[data-bm-theme="day"] .chr-tagline{color:oklch(.52 .14 250)} /* water-ink — day */

/* Status group — live/div pill + separator + persona pill */
.chr-status-group{display:flex;align-items:center;gap:6px;flex-shrink:0}
@media(max-width:1000px){.chr-status-group{display:none}}
.chr-status-pill{pointer-events:none;user-select:none}
.chr-persona-pill{transition:opacity .12s}
.chr-persona-pill[onclick]:hover{opacity:.8}
.chr-live-seg,.chr-div-seg,.chr-persona-seg{display:inline-flex!important;align-items:center;gap:5px}
.chr-dot{width:7px;height:7px;border-radius:50%;background:var(--ink-3);flex-shrink:0;transition:background .3s}
.chr-dot.live{background:#22c55e}
.chr-dot.cached{background:#f59e0b}
.chr-dot.offline{background:#ef4444}
/* Minimal footer — discreet Admin entry point */
.bm-foot-min{
  padding:.45rem 1.25rem;font-size:.62rem;
  color:var(--ink-3);text-align:right;
  border-top:1px solid var(--line-soft);
}
.bm-foot-min a{color:var(--ink-3);text-decoration:none;opacity:.5}
.bm-foot-min a:hover{opacity:1;color:var(--ink)}

/* Ask button — Alpine Sky: consistent brand color on both themes */
.chr-ask{
  display:flex;align-items:center;gap:7px;
  padding:7px 14px;border-radius:999px;
  background:oklch(.68 .12 250);color:#0d1410;
  border:none;cursor:pointer;font-family:var(--font);
  font-size:12.5px;font-weight:500;letter-spacing:-.005em;
  white-space:nowrap;transition:opacity .15s;flex-shrink:0;
}
.chr-ask:hover{opacity:.88}
.chr-ask kbd{
  font-size:10px;opacity:.55;padding:1px 5px;
  border:1px solid currentColor;border-radius:4px;
  font-family:var(--mono);margin-left:2px;
}

/* ── Ask overlay ────────────────────────────────────────────────────────── */
#bm-ask-overlay{
  display:none;position:fixed;inset:0;z-index:100;
  background:rgba(8,12,10,.8);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  padding:88px 16px 16px;
  align-items:flex-start;justify-content:center;
}
html[data-bm-theme="day"] #bm-ask-overlay{background:rgba(240,236,225,.88)}
#bm-ask-overlay.show{display:flex}
.ask-modal{
  width:min(720px,100%);
  background:var(--bg-elev);border:1px solid var(--line);
  border-radius:18px;overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
}
.ask-input-row{
  display:flex;align-items:center;gap:14px;
  padding:18px 22px;border-bottom:1px solid var(--line);
}
.ask-input-row input{
  flex:1;border:none;outline:none;background:transparent;
  font-size:16px;color:var(--ink);font-family:var(--font);
}
.ask-input-row input::placeholder{color:var(--ink-3)}
.ask-esc{
  font-size:10.5px;color:var(--ink-3);padding:2px 6px;
  border:1px solid var(--line);border-radius:4px;font-family:var(--mono);
  flex-shrink:0;
}
.ask-sugs{padding:14px 22px}
.ask-sugs-lbl{
  font-family:var(--mono);font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:10px;
}
.ask-sug-item{
  display:flex;align-items:center;justify-content:space-between;
  padding:11px 0;border-top:1px solid var(--line-soft);
  font-size:14px;color:var(--ink);cursor:pointer;transition:color .12s;
}
.ask-sug-item:first-child{border-top:none}
.ask-sug-item:hover{color:var(--water)}
.ask-sug-arr{color:var(--ink-3);font-size:14px}
.ask-foot{
  padding:12px 22px;background:var(--bg-elev-2);
  border-top:1px solid var(--line);font-size:11px;color:var(--ink-3);
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:8px;flex-wrap:wrap;
}
.ask-foot-l{flex:1;min-width:0;line-height:1.5}
.ask-foot-r{font-family:var(--mono);flex-shrink:0;white-space:nowrap}
.ask-sources{
  padding:8px 22px 12px;
  font-size:10px;color:var(--ink-4);line-height:1.6;
  border-top:1px solid var(--line-soft);
  letter-spacing:.01em;
}
.ask-sources-lbl{font-weight:500;color:var(--ink-3)}

/* ── Shared atoms ────────────────────────────────────────────────────────── */
.bm-card{background:var(--bg-elev);border:1px solid var(--line);border-radius:14px}
.bm-hairline{background:var(--line);height:1px;width:100%}
.bm-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 8px;border-radius:999px;
  font-size:11px;letter-spacing:.02em;
  border:1px solid var(--line);color:var(--ink-2);background:transparent;
}
.bm-chip.dot::before{content:"";width:6px;height:6px;border-radius:999px;background:var(--ink-3)}
.bm-chip.water::before{background:var(--water)}
.bm-chip.dry::before{background:var(--dry)}
.bm-chip.alarm::before{background:var(--alarm)}
.bm-chip.snow::before{background:var(--snow)}
button.bm-btn{
  font:inherit;cursor:pointer;padding:8px 14px;border-radius:10px;
  border:1px solid var(--line);background:var(--bg-elev);color:var(--ink);
  display:inline-flex;align-items:center;gap:8px;transition:opacity .15s;
}
button.bm-btn.primary{background:var(--ink);color:var(--bg);border-color:var(--ink)}
button.bm-btn.ghost{background:transparent}
button.bm-btn:hover{opacity:.85}
.serif{font-family:var(--serif);letter-spacing:-.01em;font-weight:400}
.mono{font-family:var(--mono);letter-spacing:-.01em}

/* ── Page body padding for chrome ────────────────────────────────────────── */
.bm-page{padding-top:78px}
.bm-full-page{padding-top:78px;height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden}

/* ── Source attribution pin — used across all pages ─────────────────────── */
/* Consistent format: database glyph + agency name in mono */
.src-pin{
  display:inline-flex;align-items:center;gap:4px;
  font-family:var(--mono);font-size:9.5px;color:var(--ink-3);
  background:var(--bg-elev-2);border:1px solid var(--line-soft);
  border-radius:4px;padding:2px 6px;
}
.src-pin svg{flex-shrink:0;opacity:.65}

/* ── Markdown table — rendered in Ask ───────────────────────────────────── */
.bm-md-table{
  border-collapse:collapse;width:100%;margin:.65rem 0;
  font-family:var(--mono);font-size:11.5px;
}
.bm-md-table th,.bm-md-table td{
  border:1px solid var(--line);padding:5px 10px;text-align:left;
}
.bm-md-table th{
  background:var(--bg-elev-2);color:var(--ink);
  font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
}
.bm-md-table td{color:var(--ink-2)}
.bm-md-table tr:nth-child(even) td{background:var(--bg-elev)}

/* ── Highlighted significant value — wrapped by rendering skill in ==val== ─ */
.bm-hl{
  background:rgba(199,148,97,.18);color:var(--dry);
  border-radius:3px;padding:0 3px;font-weight:600;
}
/* Semantic variants for status-specific highlighting */
.bm-hl-alarm{background:rgba(184,98,71,.18);color:var(--alarm);border-radius:3px;padding:0 3px;font-weight:600}
.bm-hl-ok   {background:rgba(56,189,248,.15);color:var(--water);border-radius:3px;padding:0 3px;font-weight:600}

/* ── Back navigation bar (conversational ← alerts/reservoir/map) ─────────── */
.conv-back-bar{
  position:sticky;top:78px;z-index:50;
  background:var(--bg);border-bottom:1px solid var(--line-soft);
  padding:6px 20px;
}
.conv-back-btn{
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--mono);font-size:11px;color:var(--ink-2);
  text-decoration:none;
  transition:color .12s;
}
.conv-back-btn:hover{color:var(--ink)}

/* ── Persona picker (conversational right panel) ────────────────────────────── */
.ctx-persona-pick{cursor:pointer;border-radius:8px;padding:4px;margin:-4px;transition:background .1s;display:flex;align-items:center;gap:8px}
.ctx-persona-pick:hover{background:var(--bg-elev-2)}
.persona-picker-drop{
  background:var(--bg-elev);border:1px solid var(--line);border-radius:10px;
  overflow:hidden;max-height:260px;overflow-y:auto;
  box-shadow:0 6px 20px rgba(0,0,0,.35);margin-top:4px;
}
.persona-picker-drop::-webkit-scrollbar{width:3px}
.persona-picker-drop::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.persona-pick-item{padding:8px 13px;font-size:12px;color:var(--ink-2);cursor:pointer;transition:background .1s}
.persona-pick-item:hover{background:var(--bg-elev-2)}
.persona-pick-item.active{color:var(--ink);font-weight:500;background:var(--bg-elev)}

/* ── Responsive chrome ───────────────────────────────────────────────────── */
@media(max-width:1000px){.chr-nav{display:none}}
@media(max-width:640px){
  .chr-ask kbd{display:none}
  #bm-chrome{top:10px;left:10px;right:10px}
  .bm-page{padding-top:70px}
  .bm-full-page{padding-top:70px}
}
/* ── Persona pills — shared across index + admin ── */
.persona-pill{
  display:inline-flex;align-items:center;
  background:transparent;border:1px solid var(--line);
  border-radius:99px;padding:.3rem .75rem;
  font-family:var(--font);font-size:.75rem;color:var(--ink-2);
  cursor:pointer;transition:all .15s;min-height:34px;
  white-space:nowrap;flex-shrink:0;
}
.persona-pill:hover{border-color:var(--water);color:var(--ink)}
.persona-pill.active{background:var(--water-soft);border-color:var(--water);color:var(--water);font-weight:600}

@supports(padding:env(safe-area-inset-bottom)){
  #bm-chrome{
    left:max(14px,env(safe-area-inset-left));
    right:max(14px,env(safe-area-inset-right));
  }
}

/* ── Mobile hamburger button (shown ≤768px, hidden on desktop) ──────────── */
.chr-ham {
  display: none;
  width: 34px; height: 34px;
  border: 1px solid var(--line); background: var(--bg-elev);
  border-radius: 8px; color: var(--ink-2); cursor: pointer;
  place-items: center; flex-shrink: 0;
  transition: border-color .15s, color .15s;
}
.chr-ham:hover { color: var(--ink); border-color: var(--ink-3); }
@media(max-width:1000px) {
  /* Hamburger appears exactly when nav links disappear */
  .chr-ham { display: grid; }
  /* Language is hidden to keep the header uncluttered without nav. The theme
     control stays: it used to be three buttons competing for room, is now a
     single cycling one, and the hamburger sheet offers no way to change theme
     -- so hiding it left narrow windows with no theme control at all. */
  .bm-seg.bm-lang-seg { display: none; }
  /* Hide orphan separators in chr-l (nav + status both gone) */
  #bm-chrome .chr-l .chr-sep { display: none; }
  /* Hide chrome auth button — accessible via hamburger sheet instead */
  #bm-auth-hdr-btn { display: none; }
}

/* ── Mobile nav bottom sheet (non-Ask pages) ─────────────────────────────── */
#bm-mobile-nav {
  display: none; position: fixed; inset: 0; z-index: 200;
  background: rgba(8,12,10,.65); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  align-items: flex-end;
}
#bm-mobile-nav.open { display: flex; }
#bm-mobile-nav-inner {
  width: 100%; background: var(--bg-elev);
  border-radius: 18px 18px 0 0;
  border: 1px solid var(--line); border-bottom: none;
  padding-bottom: max(20px, env(safe-area-inset-bottom));
  box-shadow: 0 -12px 40px rgba(0,0,0,.32);
}
html[data-bm-theme="day"] #bm-mobile-nav-inner { background: var(--bg); }
.bmn-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px 10px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
}
.bmn-close {
  width: 28px; height: 28px; background: transparent; border: none;
  color: var(--ink-3); cursor: pointer; font-size: 16px; display: grid; place-items: center;
  border-radius: 6px; transition: color .12s, background .12s;
}
.bmn-close:hover { color: var(--ink); background: var(--bg-elev-2); }
.bmn-link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 20px; font-size: 15px; color: var(--ink-2);
  border-top: 1px solid var(--line-soft); text-decoration: none;
  transition: color .12s;
}
.bmn-link:hover { color: var(--ink); }
.bmn-link.active { color: var(--water); font-weight: 500; }
.bmn-auth-row {
  width: 100%; background: none; border: none; font-family: var(--font);
  border-top: 1px solid var(--line); margin-top: 4px; cursor: pointer;
  text-align: left;
}

/* ── Cache status pill (today / alerts / reservoir) ─────────────────────── */
.bm-cache-pill{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 9px 3px 7px;border-radius:20px;
  font-family:var(--mono);font-size:10px;letter-spacing:.05em;
  border:1px solid var(--line);background:var(--bg-elev);
  color:var(--ink-3);cursor:pointer;transition:border-color .15s,color .15s;
  user-select:none;
}
.bm-cache-pill:hover{border-color:var(--water);color:var(--water)}
.bm-cache-pill .cp-dot{
  width:6px;height:6px;border-radius:50%;background:var(--ink-3);flex-shrink:0;
  transition:background .2s;
}
.bm-cache-pill.live .cp-dot{background:var(--water)}
.bm-cache-pill.cached .cp-dot{background:var(--dry)}
.bm-cache-pill.cached{border-color:var(--dry-soft);color:var(--dry)}

/* ── Data timestamp + refresh pill ──────────────────────────────────────── */
.bm-data-time{
  display:inline-flex;align-items:center;gap:4px;
  font-family:var(--mono);font-size:10.5px;color:var(--ink-3);
  white-space:nowrap;
}
.bm-ts-lbl{letter-spacing:.05em;text-transform:uppercase}
.bm-ts-val{color:var(--ink-2)}
.bm-refresh-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;padding:0;
  border:none;border-radius:50%;background:transparent;
  color:var(--ink-3);cursor:pointer;flex-shrink:0;
  transition:color .12s,background .12s;
}
.bm-refresh-btn:hover{color:var(--water);background:var(--bg-elev-2)}
.bm-refresh-btn svg{display:block}
.bm-refresh-btn.spinning svg{animation:bm-spin .65s linear}
@keyframes bm-spin{to{transform:rotate(360deg)}}