/* ============================================================
   Tidal Wetland Tipping Point Mapper — design system
   Clean & airy scientific dashboard · Texas A&M maroon accent
   ============================================================ */

:root {
  /* brand */
  --maroon:      #500000;   /* Texas A&M maroon */
  --maroon-700:  #5e0d18;
  --maroon-600:  #6e1423;
  --maroon-500:  #841a2b;
  --maroon-tint: #f6edee;
  --maroon-tint2:#efe1e3;

  /* ink / neutrals (very slightly cool) */
  --ink:    #1a2027;
  --ink-2:  #2b333c;
  --slate:  #5a6571;
  --slate-2:#7c8794;
  --muted:  #98a2af;

  /* surfaces */
  --paper:  #ffffff;
  --gray-50:#f7f8fa;
  --gray-100:#f1f3f6;
  --gray-150:#e9edf1;
  --border: #e2e7ed;
  --border-strong:#d3dae1;

  /* rail (deep navy/charcoal) */
  --rail:   #161c25;
  --rail-2: #1e2630;
  --rail-line:#2c3744;
  --rail-ink:#9aa6b4;

  /* coastal accents */
  --teal:   #2f7d72;
  --ocean:  #2e6b8f;
  --sea:    #4d93a6;

  /* risk */
  --risk-low:  #3f8c60;
  --risk-med:  #c89636;
  --risk-high: #ad3e2f;

  --radius: 10px;
  --radius-sm: 7px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(20,28,37,.06), 0 1px 1px rgba(20,28,37,.04);
  --shadow:    0 4px 14px rgba(20,28,37,.08), 0 1px 3px rgba(20,28,37,.06);
  --shadow-lg: 0 12px 34px rgba(20,28,37,.16), 0 3px 10px rgba(20,28,37,.08);

  --font: "Helvetica Neue", Helvetica, Arial, "Segoe UI", system-ui, sans-serif;

  --header-h: 58px;
  --rail-w: 64px;
  --panel-w: 348px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--gray-100);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}
#root { height: 100vh; width: 100vw; }
button { font-family: inherit; }
::selection { background: var(--maroon-tint2); }

.tnum { font-variant-numeric: tabular-nums; }
.eyebrow {
  font-size: 10.5px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--slate-2);
}
.maroon-rule { height: 2px; background: var(--maroon); width: 34px; border-radius: 2px; }

/* ===================== App shell ===================== */
.app { height: 100vh; display: flex; flex-direction: column; overflow: hidden; }

/* ---- Header ---- */
.hdr {
  height: var(--header-h); flex: 0 0 var(--header-h);
  background: var(--paper); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 14px;
  padding: 0 16px 0 0; z-index: 600; position: relative;
}
.hdr-brand { display: flex; align-items: center; gap: 13px; padding-left: 14px; }
.lab-link { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .15s, color .15s; }
.lab-link:hover { color: var(--maroon); border-bottom-color: currentColor; }
.lab-link.strong { color: var(--maroon); font-weight: 600; text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--maroon) 35%, transparent); display: inline-flex; align-items: center; gap: 3px; cursor: pointer; }
.lab-link.strong svg { opacity: .7; transition: transform .15s, opacity .15s; }
.lab-link.strong:hover { border-bottom-color: var(--maroon); }
.lab-link.strong:hover svg { opacity: 1; transform: translate(1px, -1px); }

/* =====================================================================
   Auth modal extras + Account (guest / admin) UI
   ===================================================================== */
.signin-card { position: relative; }
.signin-x {
  position: absolute; top: 12px; right: 12px; z-index: 5; width: 30px; height: 30px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--paper); color: var(--slate-2);
  display: grid; place-items: center; cursor: pointer; transition: .14s;
}
.signin-x:hover { background: var(--gray-50); color: var(--ink); }
/* Helper callout above the modal, pointing at the close button. */
.signin-hint {
  position: absolute; bottom: calc(100% + 13px); right: 0; z-index: 6;
  width: min(330px, calc(100vw - 32px));
  background: var(--maroon); color: #fff;
  font-size: 12px; line-height: 1.5; font-weight: 500; text-align: left;
  padding: 11px 13px; border-radius: 11px; box-shadow: var(--shadow-lg);
}
.signin-hint-arrow {
  position: absolute; top: 100%; right: 19px; width: 0; height: 0;
  border: 7px solid transparent; border-top-color: var(--maroon);
}
.sf-err {
  display: flex; align-items: center; gap: 7px; margin: 10px 0 2px; padding: 8px 10px;
  font-size: 11.5px; font-weight: 500; color: #8c2b22;
  background: color-mix(in srgb, var(--risk-high) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--risk-high) 28%, transparent); border-radius: 8px;
}
.sf-err svg { flex: 0 0 auto; }
.sf-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sf-2col .field { margin-bottom: 0; }

/* registration-key manager (admin) */
.keygen { border: 1px solid var(--border); border-radius: var(--radius); background: var(--gray-50); padding: 12px; margin-bottom: 4px; }
.kg-lbl { font-size: 11px; font-weight: 600; color: var(--slate); margin-bottom: 7px; }
.kg-seg button { font-size: 12px; }
.key-card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--paper); padding: 11px 12px; margin-bottom: 9px; }
.key-card.used { background: var(--gray-50); }
.kc-row1 { display: flex; align-items: center; gap: 8px; }
.kc-keyid { position: relative; font-size: 12.5px; font-weight: 700; color: var(--ink); background: none; border: none; padding: 0; cursor: pointer; letter-spacing: .03em; }
.kc-keyid:hover { color: var(--maroon); }
.kc-copied { position: absolute; left: 0; top: -16px; font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #2f6e4a; }
.role-badge { font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 7px; border-radius: 5px; }
.role-badge.user { background: color-mix(in srgb, var(--ocean, #3a6ea5) 14%, transparent); color: #2f5e86; }
.role-badge.admin { background: var(--maroon-tint); color: var(--maroon); }
.kstatus { font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 7px; border-radius: 5px; margin-left: auto; }
.kstatus.active { background: color-mix(in srgb, #3f8c60 14%, transparent); color: #2f6e4a; }
.kstatus.used { background: var(--gray-100); color: var(--slate-2); }
.kc-del { width: 26px; height: 26px; border: 1px solid var(--border); border-radius: 7px; background: var(--paper); color: var(--slate-2); display: grid; place-items: center; cursor: pointer; flex: 0 0 auto; transition: .14s; }
.kc-del:hover { color: var(--risk-high); border-color: color-mix(in srgb, var(--risk-high) 40%, var(--border)); }
.kc-created { font-size: 10.5px; color: var(--slate-2); margin-top: 7px; }
.kc-created b { color: var(--ink); font-weight: 600; }
.kc-reg { margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--border); }
.kr-name { font-size: 12px; font-weight: 700; color: var(--ink); }
.kr-line { display: flex; align-items: center; gap: 6px; font-size: 10.5px; color: var(--slate-2); margin-top: 3px; }
.kr-line svg { color: var(--muted); flex: 0 0 auto; }

/* guest CTA */
.guest-cta { text-align: center; padding: 18px 16px 6px; }
.gc-ic { width: 46px; height: 46px; margin: 0 auto 12px; border-radius: 50%; display: grid; place-items: center;
  background: var(--maroon-tint); color: var(--maroon); }
.gc-title { font-size: 14px; font-weight: 700; color: var(--ink); }
.gc-sub { font-size: 12px; line-height: 1.55; color: var(--slate-2); margin: 6px auto 16px; max-width: 280px; }

/* SHAP variable explorer (Charts tab) */
.chart-modetabs { margin-bottom: 12px; }
.chart-modetabs button { font-size: 12px; }
.shapchart-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 10px 0; }
.vsel { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.vsel-lbl { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--slate-2); }
.vsel-input { height: 32px; border: 1px solid var(--border); border-radius: 8px; background: var(--paper); color: var(--ink);
  font-size: 12px; font-family: inherit; padding: 0 8px; cursor: pointer; width: 100%; }
.vsel-input:focus { outline: none; border-color: var(--maroon-tint2); }
.sc-seg { height: 32px; }
.sc-seg button { font-size: 11.5px; }
.shapchart-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 10px; }
.opt-toggle { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--ink); cursor: pointer; }
.opt-toggle input { width: 15px; height: 15px; accent-color: var(--maroon); cursor: pointer; }
.opt-hint { color: var(--slate-2); font-weight: 400; }
.opt-num { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--slate); }
.opt-num input { width: 60px; height: 30px; border: 1px solid var(--border); border-radius: 7px; padding: 0 8px; font-size: 12px; font-family: inherit; }
.color-legend { display: flex; align-items: center; gap: 10px; margin: 4px 0 14px; flex-wrap: wrap; }
.cl-lbl { font-size: 11px; font-weight: 600; color: var(--slate); }
.cl-bar-wrap { display: flex; align-items: center; gap: 7px; flex: 1; min-width: 160px; }
.cl-bar { flex: 1; height: 9px; border-radius: 4px; min-width: 80px; }
.cl-end { font-size: 10px; color: var(--slate-2); }
.facet-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.facet { border: 1px solid var(--border); border-radius: 10px; padding: 8px 8px 4px; background: var(--paper); }
.facet-h { display: flex; align-items: baseline; justify-content: space-between; padding: 0 4px 4px; }
.facet-name { font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--ink); }
.facet-n { font-size: 10.5px; color: var(--slate-2); }

.cite-card { padding-top: 12px; }
.cite-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; padding-bottom: 9px; border-bottom: 1px solid var(--border); }
.cite-label { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--slate-2); }
.cite-copy { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border: 1px solid var(--border); border-radius: 7px; background: var(--paper); color: var(--slate-2); font-size: 10.5px; font-weight: 600; font-family: inherit; cursor: pointer; transition: .14s; flex: 0 0 auto; }
.cite-copy:hover { color: var(--maroon); border-color: var(--maroon-tint2); background: var(--maroon-tint); }
.cite-copy.done { color: #2f6e4a; border-color: color-mix(in srgb, #3f8c60 40%, var(--border)); background: color-mix(in srgb, #3f8c60 10%, transparent); }

/* study-region boundary layer (from gpkg) */
.reg-label { display: flex; flex-direction: column; align-items: center; line-height: 1.05; transform: translate(-50%, -50%); white-space: nowrap; pointer-events: none; opacity: .82; text-shadow: 0 1px 2px rgba(255,255,255,.9), 0 0 2px rgba(255,255,255,.9); }
.reg-label .rl-code { font-size: 10px; font-weight: 700; letter-spacing: .08em; color: rgba(122,22,32,.72); }
.reg-label .rl-name { font-size: 7.5px; font-weight: 600; letter-spacing: .03em; color: rgba(65,51,31,.62); text-transform: uppercase; }
@media (max-width: 640px) { .reg-label .rl-name { display: none; } }
.reg-thumb { background: repeating-linear-gradient(135deg, #7a1620 0 2px, transparent 2px 7px), #f1e3df; }

/* pixel display mode (Wetland pixels card) */
.pixmode { margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--border); }
.pixmode-lbl { font-size: 11px; font-weight: 600; color: var(--slate); margin-bottom: 7px; }
.pixmode .seg button { font-size: 11.5px; padding: 0 8px; }
.pixmode-hint { font-size: 10.5px; line-height: 1.45; color: var(--slate-2); margin-top: 8px; text-wrap: pretty; }

/* study-region legend */
.region-legend { margin: 2px 0 12px; padding: 10px 11px; background: var(--gray-50); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.rl-grid { display: flex; flex-direction: column; gap: 5px; }
.rl-item { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--ink); }
.rl-sw { width: 11px; height: 8px; border-radius: 2px; flex: 0 0 auto; }
.rl-foot { margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--border); font-size: 10.5px; line-height: 1.5; color: var(--slate-2); text-wrap: pretty; }
.rl-foot b { color: var(--ink); font-weight: 600; }

/* dataset manager */
.ds-summary { font-size: 11.5px; color: var(--slate-2); margin: 12px 2px 12px; }
.ds-summary .tnum { font-weight: 700; color: var(--ink); }
.ds-card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--paper); padding: 12px; margin-bottom: 10px; transition: border-color .15s; }
.ds-card.ok { border-color: color-mix(in srgb, var(--risk-low, #3f8c60) 40%, var(--border)); }
.ds-card.err { border-color: color-mix(in srgb, var(--risk-high) 40%, var(--border)); }
.ds-top { display: flex; align-items: flex-start; gap: 9px; }
.ds-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; flex: 0 0 auto; background: var(--border-strong); }
.ds-dot.ok { background: #3f8c60; }
.ds-dot.err { background: var(--risk-high); }
.ds-tt { flex: 1; min-width: 0; }
.ds-name { font-size: 12.5px; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 7px; }
.ds-req { font-size: 8.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--maroon);
  background: var(--maroon-tint); padding: 2px 5px; border-radius: 4px; }
.ds-desc { font-size: 10.5px; color: var(--slate-2); margin-top: 2px; line-height: 1.4; }
.ds-badge { font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 3px 7px; border-radius: 5px;
  background: var(--gray-100); color: var(--slate-2); flex: 0 0 auto; }
.ds-badge.ok { background: color-mix(in srgb, #3f8c60 14%, transparent); color: #2f6e4a; }
.ds-badge.err { background: color-mix(in srgb, var(--risk-high) 14%, transparent); color: #8c2b22; }
.ds-file { display: flex; align-items: center; gap: 7px; margin-top: 10px; padding: 7px 9px; background: var(--gray-50); border-radius: 7px; flex-wrap: wrap; }
.ds-file svg { color: var(--slate-2); flex: 0 0 auto; }
.ds-fn { font-size: 11.5px; font-weight: 600; color: var(--ink); max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-stat { font-size: 10px; color: var(--slate-2); }
.ds-ago { font-size: 10px; color: var(--muted); margin-left: auto; }
.ds-msg { display: flex; align-items: flex-start; gap: 6px; margin-top: 8px; font-size: 10.5px; line-height: 1.4; padding: 6px 8px; border-radius: 6px; }
.ds-msg svg { flex: 0 0 auto; margin-top: 1px; }
.ds-msg.ok { color: #2f6e4a; background: color-mix(in srgb, #3f8c60 9%, transparent); }
.ds-msg.warn { color: #8a6d1f; background: color-mix(in srgb, #c89636 12%, transparent); }
.ds-msg.err { color: #8c2b22; background: color-mix(in srgb, var(--risk-high) 9%, transparent); }
.ds-actions { display: flex; gap: 8px; margin-top: 11px; }
.ds-actions .btn { flex: 1; }
.ds-actions .ds-del { flex: 0 0 auto; color: var(--risk-high); }
.ds-actions .ds-del:hover { background: color-mix(in srgb, var(--risk-high) 10%, transparent); }
.lab-link.inv { color: #fff; }
.lab-link.inv:hover { color: #fff; border-bottom-color: rgba(255,255,255,.7); }
.hdr-logo { width: 34px; height: 34px; border-radius: 7px; flex: 0 0 auto; object-fit: cover; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06), var(--shadow-sm); }
.tamu-badge {
  width: 38px; height: 38px; border-radius: 8px; background: var(--maroon);
  color: #fff; display: grid; place-items: center; flex: 0 0 auto;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), var(--shadow-sm);
  position: relative;
}
.tamu-badge b { font-size: 13px; font-weight: 800; letter-spacing: .02em; line-height: 1; }
.tamu-badge::after {
  content: ""; position: absolute; left: 7px; right: 7px; bottom: 6px; height: 2px;
  background: rgba(255,255,255,.55); border-radius: 2px;
}
.hdr-titles { display: flex; flex-direction: column; line-height: 1.15; }
.hdr-title { font-size: 15px; font-weight: 700; color: var(--ink); letter-spacing: .02em; display: flex; align-items: baseline; }
.hdr-expand { font: inherit; font-weight: 700; letter-spacing: .02em; color: var(--ink); white-space: nowrap; }
.hdr-sub { font-size: 12px; color: var(--slate-2); font-weight: 500; }
.hdr-sub .dot { color: var(--border-strong); margin: 0 6px; }

.hdr-spacer { flex: 1; }
.hdr-chip {
  display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--paper);
  font-size: 12px; color: var(--slate); font-weight: 600; cursor: pointer;
  transition: .15s; white-space: nowrap;
}
.hdr-chip:hover { border-color: var(--border-strong); background: var(--gray-50); color: var(--ink); }
.hdr-chip .ic { color: var(--slate-2); display: grid; place-items: center; }
.hdr-ver { font-size: 10.5px; font-weight: 500; color: var(--muted); letter-spacing: .02em; }
.hdr-user {
  display: flex; align-items: center; gap: 9px; padding: 4px 6px 4px 10px;
  border: 1px solid var(--border); border-radius: 999px; cursor: pointer; background: var(--paper);
  transition: .15s;
}
.hdr-user:hover { background: var(--gray-50); border-color: var(--border-strong); }
.hdr-user .nm { font-size: 12px; font-weight: 600; color: var(--ink); }
.hdr-user .rl { font-size: 10px; color: var(--slate-2); }
.avatar {
  width: 28px; height: 28px; border-radius: 50%; background: var(--maroon);
  color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 700; flex: 0 0 auto;
}

/* ---- Body row ---- */
.body { flex: 1; display: flex; min-height: 0; position: relative; }

/* ---- Icon rail ---- */
.rail {
  width: var(--rail-w); flex: 0 0 var(--rail-w); background: var(--rail);
  display: flex; flex-direction: column; align-items: center; padding: 10px 0;
  z-index: 500; border-right: 1px solid #0d1218;
}
.rail-items { display: flex; flex-direction: column; gap: 3px; width: 100%; align-items: center; }
.rail-btn {
  position: relative; width: 48px; height: 46px; border: none; background: transparent;
  color: var(--rail-ink); border-radius: 9px; cursor: pointer; display: grid; place-items: center;
  transition: .15s;
}
.rail-btn:hover { background: var(--rail-2); color: #e7edf4; }
.rail-btn.active { background: var(--rail-2); color: #fff; }
.rail-btn.active::before {
  content: ""; position: absolute; left: -10px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 22px; background: var(--maroon-500); border-radius: 0 3px 3px 0;
}
.rail-btn svg { width: 21px; height: 21px; }
.rail-tip {
  position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%) translateX(-4px);
  background: var(--ink); color: #fff; font-size: 11.5px; font-weight: 600; padding: 5px 9px;
  border-radius: 6px; white-space: nowrap; opacity: 0; pointer-events: none; transition: .14s; z-index: 50;
  box-shadow: var(--shadow);
}
.rail-tip::before { content:""; position:absolute; left:-4px; top:50%; transform:translateY(-50%) rotate(45deg); width:8px; height:8px; background: var(--ink); }
.rail-btn:hover .rail-tip { opacity: 1; transform: translateY(-50%) translateX(0); }
.rail-sep { width: 28px; height: 1px; background: var(--rail-line); margin: 7px 0; }
.rail-spacer { flex: 1; }

/* ---- Contextual panel ---- */
.panel {
  width: var(--panel-w); flex: 0 0 var(--panel-w); background: var(--paper);
  border-right: 1px solid var(--border); display: flex; flex-direction: column;
  min-height: 0; z-index: 400; box-shadow: 2px 0 12px rgba(20,28,37,.035);
  transition: width .22s cubic-bezier(.4,0,.2,1), flex-basis .22s cubic-bezier(.4,0,.2,1);
}
.panel.collapsed { width: 0; flex-basis: 0; border-right: none; overflow: hidden; }
.panel-head {
  flex: 0 0 auto; padding: 16px 18px 13px; border-bottom: 1px solid var(--border);
  display: flex; align-items: flex-start; gap: 10px;
}
.panel-head .ph-ic {
  width: 30px; height: 30px; border-radius: 8px; background: var(--maroon-tint);
  color: var(--maroon); display: grid; place-items: center; flex: 0 0 auto;
}
.panel-head .ph-ic svg { width: 17px; height: 17px; }
.panel-htxt { flex: 1; min-width: 0; }
.panel-title { font-size: 14.5px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.panel-desc { font-size: 11.5px; color: var(--slate-2); margin-top: 1px; line-height: 1.35; }
.panel-collapse {
  border: 1px solid var(--border); background: var(--paper); width: 26px; height: 26px;
  border-radius: 7px; cursor: pointer; color: var(--slate-2); display: grid; place-items: center; flex: 0 0 auto;
  transition: .15s;
}
.panel-collapse:hover { background: var(--gray-50); color: var(--ink); border-color: var(--border-strong); }
.panel-body { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 16px 18px 26px; }
.panel-body::-webkit-scrollbar { width: 10px; }
.panel-body::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 6px; border: 3px solid var(--paper); }
.panel-body::-webkit-scrollbar-thumb:hover { background: var(--slate-2); }

/* collapsed rail-edge reopen handle */
.reopen {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  background: var(--maroon); border: none;
  border-radius: 0 11px 11px 0; padding: 14px 7px 14px 5px; display: flex; flex-direction: column; align-items: center; gap: 7px;
  color: #fff; cursor: pointer; z-index: 410; box-shadow: 2px 0 12px rgba(0,0,0,.22);
  transition: padding-left .15s, background .15s;
}
.reopen:hover { background: #6a1620; padding-left: 9px; color: #fff; }
.reopen-lbl {
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  writing-mode: vertical-rl; transform: rotate(180deg);
}

/* ---- Map area ---- */
.map-wrap { flex: 1; position: relative; min-width: 0; background: #dfe5ea; }
#map { position: absolute; inset: 0; }
.leaflet-container { font-family: var(--font); background: #dbe2e8; }
.leaflet-control-attribution { font-size: 10px !important; background: rgba(255,255,255,.78) !important; }
.leaflet-control-scale {
  margin-left: 14px !important; margin-bottom: 14px !important;
}
.leaflet-control-scale-line {
  height: auto !important; min-width: 58px;
  padding: 3px 7px 4px !important;
  background: rgba(255,255,255,.92) !important;
  border: 1px solid var(--border) !important;
  border-top: none !important;
  color: var(--slate) !important;
  font: 700 10.5px/1.2 ui-sans-serif, system-ui, -apple-system, sans-serif !important;
  box-shadow: var(--shadow-sm);
  text-shadow: none !important;
}
.leaflet-control-scale-line:not(:first-child) { display: none; }

/* ===================== Generic UI ===================== */
.section { margin-bottom: 20px; }
.section:last-child { margin-bottom: 0; }
.sec-label {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
}
.sec-label h4 {
  margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--slate);
}
.sec-label .ln { flex: 1; height: 1px; background: var(--border); }

.card {
  background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px; box-shadow: var(--shadow-sm);
}
.card.tint { background: var(--gray-50); }

.metric-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.metric {
  background: var(--gray-50); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px 13px; position: relative; overflow: hidden;
}
.metric .mv { font-size: 24px; font-weight: 700; color: var(--ink); letter-spacing: -.02em; line-height: 1; }
.metric .ml { font-size: 11px; color: var(--slate-2); margin-top: 5px; font-weight: 500; }
.metric .msub { font-size: 10px; color: var(--muted); margin-top: 1px; }
.metric .mbar { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--maroon); }
.metric.teal .mbar { background: var(--teal); }
.metric.ocean .mbar { background: var(--ocean); }
.metric.high .mbar { background: var(--risk-high); }

.pill {
  display: inline-flex; align-items: center; gap: 6px; height: 23px; padding: 0 9px;
  border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .01em;
}
.pill .pdot { width: 7px; height: 7px; border-radius: 50%; }
.pill.low  { background: #eaf3ee; color: #2c6b48; }
.pill.med  { background: #f6efdd; color: #8a6420; }
.pill.high { background: #f6e7e3; color: #8f3022; }
.pill.ghost { background: var(--gray-100); color: var(--slate); }

.tag {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 6px;
  font-size: 10.5px; font-weight: 600; background: var(--gray-100); color: var(--slate);
}
.tag.maroon { background: var(--maroon-tint); color: var(--maroon); }
.tag.teal { background: #e6f1ef; color: var(--teal); }

.kv { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border); }
.kv:last-child { border-bottom: none; }
.kv .k { font-size: 12px; color: var(--slate-2); font-weight: 500; display: flex; align-items: center; gap: 7px; }
.kv .v { font-size: 12.5px; color: var(--ink); font-weight: 600; display: flex; align-items: center; gap: 8px; }
.kv .copy { color: var(--muted); cursor: pointer; display: grid; place-items: center; transition: .12s; }
.kv .copy:hover { color: var(--maroon); }

/* right-aligned value column (Data card) */
.kv-right .kv { align-items: flex-start; gap: 14px; }
.kv-right .kv .k { flex: 0 0 auto; white-space: nowrap; padding-top: 1px; }
.kv-right .kv .v { flex: 1 1 auto; justify-content: flex-end; text-align: right; line-height: 1.45; text-wrap: pretty; }

.lead { font-size: 12.5px; line-height: 1.6; color: var(--slate); }
.lead strong { color: var(--ink-2); font-weight: 600; }

/* form controls */
.field { margin-bottom: 11px; }
.field > label { display: block; font-size: 11px; font-weight: 600; color: var(--slate); margin-bottom: 5px; }
.input-wrap { position: relative; display: flex; align-items: center; }
.input {
  width: 100%; height: 38px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: 0 12px; font-size: 13px; color: var(--ink); background: var(--paper); font-family: inherit;
  transition: .15s; outline: none;
}
.input:focus { border-color: var(--maroon-500); box-shadow: 0 0 0 3px var(--maroon-tint); }
.input::placeholder { color: var(--muted); }
.input.has-btn { padding-right: 42px; }
.input-btn {
  position: absolute; right: 4px; width: 32px; height: 30px; border: none; background: transparent;
  color: var(--slate-2); border-radius: 6px; cursor: pointer; display: grid; place-items: center; transition: .12s;
}
.input-btn:hover { background: var(--gray-100); color: var(--maroon); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 16px;
  border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; cursor: pointer; border: 1px solid transparent;
  transition: .15s; white-space: nowrap;
}
.btn.block { width: 100%; }
.btn.primary { background: var(--maroon); color: #fff; }
.btn.primary:hover { background: var(--maroon-600); }
.btn.outline { background: var(--paper); border-color: var(--border-strong); color: var(--ink); }
.btn.outline:hover { background: var(--gray-50); border-color: var(--slate-2); }
.btn.ghost { background: transparent; color: var(--slate); }
.btn.ghost:hover { background: var(--gray-100); color: var(--ink); }
.btn.sm { height: 31px; padding: 0 11px; font-size: 12px; }
.btn svg { width: 15px; height: 15px; }

/* segmented control */
.seg { display: flex; background: var(--gray-100); border-radius: 9px; padding: 3px; gap: 2px; }
.seg button {
  flex: 1; border: none; background: transparent; height: 31px; border-radius: 7px; cursor: pointer;
  font-size: 12px; font-weight: 600; color: var(--slate); transition: .15s; font-family: inherit;
}
.seg button:hover { color: var(--ink); }
.seg button.on { background: var(--paper); color: var(--maroon); box-shadow: var(--shadow-sm); }

/* toggle switch */
.switch { width: 38px; height: 22px; border-radius: 999px; background: var(--border-strong); position: relative; cursor: pointer; transition: .18s; border: none; flex: 0 0 auto; }
.switch.on { background: var(--maroon); }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: .18s; }
.switch.on::after { transform: translateX(16px); }

/* range slider */
input[type=range].rng { -webkit-appearance: none; width: 100%; height: 4px; border-radius: 3px; background: var(--border-strong); outline: none; }
input[type=range].rng::-webkit-slider-thumb { -webkit-appearance: none; width: 15px; height: 15px; border-radius: 50%; background: var(--maroon); cursor: pointer; border: 2px solid #fff; box-shadow: var(--shadow-sm); }
input[type=range].rng::-moz-range-thumb { width: 15px; height: 15px; border-radius: 50%; background: var(--maroon); cursor: pointer; border: 2px solid #fff; }

/* layer card */
.layer-card {
  display: flex; align-items: center; gap: 11px; padding: 9px; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--paper); margin-bottom: 8px; transition: .15s; cursor: pointer;
}
.layer-card:hover { border-color: var(--border-strong); }
.layer-card.on { border-color: var(--maroon-tint2); background: var(--maroon-tint); }
.layer-thumb { width: 46px; height: 46px; border-radius: 8px; flex: 0 0 auto; border: 1px solid var(--border); background-size: cover; background-position: center; position: relative; overflow: hidden; }
.layer-meta { flex: 1; min-width: 0; }
.layer-name { font-size: 12.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.layer-attr { font-size: 10px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.opacity-row { display: flex; align-items: center; gap: 9px; padding: 4px 2px 2px; }
.opacity-row .ov { font-size: 11px; color: var(--slate-2); font-weight: 600; width: 34px; text-align: right; }

/* layer stack cards */
.stack-card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--paper); padding: 9px; transition: .15s; }
.stack-card.on { border-color: var(--maroon-tint2); background: var(--maroon-tint); }
.stack-row { display: flex; align-items: center; gap: 10px; }
.stack-reorder { display: flex; flex-direction: column; gap: 1px; flex: 0 0 auto; }
.reorder-btn {
  width: 22px; height: 16px; border: 1px solid var(--border); background: var(--paper); color: var(--slate-2);
  border-radius: 5px; cursor: pointer; display: grid; place-items: center; transition: .12s; padding: 0;
}
.reorder-btn:hover:not(:disabled) { color: var(--maroon); border-color: var(--maroon-tint2); background: var(--paper); }
.reorder-btn:disabled { opacity: .35; cursor: not-allowed; }
.stack-pin {
  width: 24px; height: 32px; flex: 0 0 auto; display: grid; place-items: center; color: var(--maroon);
  background: var(--paper); border: 1px solid var(--maroon-tint2); border-radius: 6px;
}

/* legend chips — clickable category toggles */
.legend-row {
  display: grid; grid-template-columns: auto auto 48px 1fr; align-items: center; gap: 8px; padding: 5px 5px; width: 100%;
  border: none; background: transparent; cursor: pointer; border-radius: 6px;
  text-align: left; transition: .12s; font-family: inherit;
}
.legend-row:hover { background: var(--gray-50); }
.legend-row.off { opacity: .5; }
.legend-row.off:hover { opacity: .72; }
.legend-check {
  width: 17px; height: 17px; flex: 0 0 auto; border-radius: 5px; border: 1.5px solid var(--border-strong);
  background: var(--paper); display: grid; place-items: center; color: #fff; transition: .12s;
}
.legend-check.on { background: var(--maroon); border-color: var(--maroon); }
.legend-sw { width: 13px; height: 13px; border-radius: 4px; flex: 0 0 auto; border: 1px solid rgba(0,0,0,.12); }
.legend-tx { display: contents; }
.legend-tx .lg-range { font-size: 12.5px; line-height: 1.3; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.legend-tx .lg-desc { font-size: 12.5px; line-height: 1.3; min-width: 0; color: var(--slate); font-weight: 500; text-wrap: balance; }
.legend-tx .lg-desc:only-child { grid-column: 3 / 5; }

/* ===================== Map overlays ===================== */
.map-toolbar {
  position: absolute; top: 14px; right: 14px; z-index: 450; display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
}
.tool-group { background: var(--paper); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; }
.tool-group.row { flex-direction: row; }
.tool-btn { width: 38px; height: 38px; border: none; background: var(--paper); color: var(--ink-2); cursor: pointer; display: grid; place-items: center; transition: .12s; border-bottom: 1px solid var(--border); }
.tool-group.row .tool-btn { border-bottom: none; border-right: 1px solid var(--border); }
.tool-group.row .tool-btn:last-child { border-right: none; }
.tool-btn:last-child { border-bottom: none; }
.tool-btn:hover { background: var(--gray-100); color: var(--maroon); }
.tool-btn.on { background: var(--maroon-tint); color: var(--maroon); }
.tool-btn svg { width: 18px; height: 18px; }

.map-search {
  position: absolute; top: 14px; left: 14px; z-index: 450; width: 300px; max-width: calc(100% - 28px);
}
.map-search .input-wrap { box-shadow: var(--shadow); border-radius: var(--radius-sm); }
.map-search .input { height: 40px; border-color: var(--border); }
.map-search-status {
  margin-top: 6px; max-width: 100%; padding: 5px 8px; border-radius: 8px;
  background: rgba(255,255,255,.94); border: 1px solid var(--border);
  color: var(--slate); font-size: 11px; font-weight: 600; box-shadow: var(--shadow-sm);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.search-pin {
  width: 18px; height: 18px; border-radius: 50%; background: var(--maroon);
  box-shadow: 0 0 0 5px rgba(80,0,0,.18), 0 2px 10px rgba(0,0,0,.25);
}

.mode-switch {
  position: absolute; top: 66px; left: 14px; z-index: 446;
  background: var(--paper); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow);
  padding: 8px; display: flex; flex-direction: column; gap: 7px; align-items: stretch;
}
.mode-switch .ms-label {
  font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--slate-2); padding: 0 2px; white-space: nowrap;
}
.mode-switch .ms-modes { display: flex; gap: 2px; background: var(--gray-100); border-radius: 9px; padding: 3px; }
.mode-switch button { flex: 1; border: none; background: transparent; height: 28px; padding: 0 16px; border-radius: 7px; font-size: 12.5px; font-weight: 600; color: var(--slate); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.mode-switch button.on { background: var(--maroon); color: #fff; }ex; align-items: center; gap: 6px; transition: .15s; }
.mode-switch button.on { background: var(--maroon); color: #fff; }

/* floating map legend */
.map-legend {
  position: absolute; left: 14px; top: 152px; z-index: 445; background: var(--paper);
  border: 1px solid var(--border); border-radius: 11px; box-shadow: var(--shadow); padding: 12px 14px; width: 252px;
}
.map-legend .ml-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.map-legend .ml-title { font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-2); }
.map-legend .ml-mode { font-size: 10px; color: var(--maroon); font-weight: 700; background: var(--maroon-tint); padding: 2px 6px; border-radius: 5px; }
.grad-bar { height: 10px; border-radius: 5px; margin: 7px 0 5px; }
.grad-scale { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--slate-2); }

/* pixel markers (divIcon) */
.wl-px { border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); transition: transform .1s; }
.wl-px.sq { border-radius: 2px; }
.wl-px.dot { border-radius: 50%; }
.wl-px.sel { outline: 3px solid var(--maroon); outline-offset: 2px; z-index: 1000 !important; }
.wl-cluster { display: grid; place-items: center; border-radius: 50%; color: #fff; font-weight: 700; border: 2.5px solid rgba(255,255,255,.92); box-shadow: 0 2px 8px rgba(0,0,0,.3); }
.wl-cluster span { font-size: 12px; line-height: 1; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.wl-cluster small { font-size: 8px; opacity: .9; font-weight: 600; }

/* ===================== Right inspector ===================== */
.inspector {
  position: absolute; top: 0; right: 0; bottom: 0; width: 340px; background: var(--paper);
  border-left: 1px solid var(--border); box-shadow: -8px 0 28px rgba(20,28,37,.10); z-index: 460;
  display: flex; flex-direction: column; transform: translateX(100%); transition: transform .26s cubic-bezier(.4,0,.2,1);
}
.inspector.open { transform: translateX(0); }
.insp-head { padding: 14px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.insp-body { flex: 1; overflow-y: auto; padding: 15px 16px 24px; }
.insp-close { width: 28px; height: 28px; border: 1px solid var(--border); border-radius: 7px; background: var(--paper); cursor: pointer; color: var(--slate-2); display: grid; place-items: center; transition: .12s; flex: 0 0 auto; }
.insp-close:hover { background: var(--gray-50); color: var(--ink); }

/* ===================== Time slider dock ===================== */
.time-dock {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 16px; z-index: 445;
  background: var(--paper); border: 1px solid var(--border); border-radius: 13px; box-shadow: var(--shadow-lg);
  padding: 12px 18px 10px; width: min(680px, calc(100% - 40px));
}
.time-dock-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.time-cur { font-size: 13px; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.time-play { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border); background: var(--paper); color: var(--maroon); cursor: pointer; display: grid; place-items: center; }
.time-play:hover { background: var(--maroon-tint); }
.time-track { position: relative; }
.time-ticks { display: flex; justify-content: space-between; margin-top: 6px; }
.time-tick { font-size: 9.5px; color: var(--muted); }

/* ===================== Charts ===================== */
.chart-card { background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius); padding: 13px 13px 9px; }
.chart-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 7px; }
.chart-legend .cl { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--slate); }
.chart-legend .cl .ln { width: 16px; height: 0; border-top: 2.5px solid; }
.chart-legend .cl .ln.dash { border-top-style: dashed; }
.chart-legend .cl .bx { width: 13px; height: 9px; border-radius: 2px; }

/* hover + expand */
.chart-hover { position: relative; }
.chart-expand {
  position: absolute; top: 4px; right: 4px; z-index: 3; width: 26px; height: 26px; border-radius: 7px;
  border: 1px solid var(--border); background: rgba(255,255,255,.9); color: var(--slate-2);
  cursor: pointer; display: grid; place-items: center; opacity: 0; transition: .14s;
}
.chart-hover:hover .chart-expand { opacity: 1; }
.chart-expand:hover { color: var(--maroon); border-color: var(--maroon-tint2); background: var(--maroon-tint); }
.chart-tip {
  position: absolute; z-index: 5; pointer-events: none; background: var(--ink); color: #fff;
  border-radius: 8px; padding: 7px 9px; box-shadow: var(--shadow-lg); min-width: 96px;
}
.chart-tip .ct-title { font-size: 10px; font-weight: 700; letter-spacing: .03em; opacity: .7; margin-bottom: 4px; text-transform: uppercase; }
.chart-tip .ct-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.chart-tip .ct-k { display: flex; align-items: center; gap: 6px; font-size: 11.5px; opacity: .9; }
.chart-tip .ct-dot { width: 8px; height: 8px; border-radius: 50%; }
.chart-tip .ct-v { font-size: 12px; font-weight: 700; }

/* ===================== Chart modal ===================== */
.modal-scrim {
  position: fixed; inset: 0; z-index: 1500; background: rgba(16,24,33,.46);
  display: grid; place-items: center; padding: 28px; backdrop-filter: blur(2px);
}
.modal-card {
  width: min(1080px, 100%); max-height: calc(100vh - 56px); background: var(--gray-50);
  border-radius: 16px; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; overflow: hidden;
}
.modal-head {
  flex: 0 0 auto; background: var(--paper); padding: 16px 22px; border-bottom: 1px solid var(--border);
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
}
.modal-body { flex: 1; overflow-y: auto; padding: 18px 22px 24px; }
.modal-hint {
  display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--slate-2);
  background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 8px 11px; margin-bottom: 16px;
}
.modal-chart { background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px 10px; margin-bottom: 14px; }
.mc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.mc-title { font-size: 13px; font-weight: 700; color: var(--ink); }
.mc-slope { font-size: 11.5px; color: var(--maroon); font-weight: 600; background: var(--maroon-tint); padding: 2px 8px; border-radius: 5px; }
.modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.modal-grid .modal-chart { margin-bottom: 0; }
@media (max-width: 760px) { .modal-grid { grid-template-columns: 1fr; } }

/* forecast horizon cards */
.horizon-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.horizon {
  border: 1px solid var(--border); border-radius: var(--radius); padding: 11px 12px; background: var(--paper); position: relative; overflow: hidden;
}
.horizon .hh { font-size: 11px; color: var(--slate-2); font-weight: 600; }
.horizon .hp { font-size: 21px; font-weight: 700; letter-spacing: -.02em; margin-top: 3px; }
.horizon .hbar { height: 4px; border-radius: 3px; background: var(--gray-150); margin-top: 8px; overflow: hidden; }
.horizon .hbar > i { display: block; height: 100%; border-radius: 3px; }
.horizon.expl { border-style: dashed; background: var(--gray-50); }
.scn-badge { position: absolute; top: 9px; right: 9px; font-size: 8.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--maroon); }

/* note / disclaimer */
.note { display: flex; gap: 10px; padding: 11px 12px; border-radius: var(--radius); font-size: 11.5px; line-height: 1.5; }
.note.warn { background: #fbf4e6; border: 1px solid #efe1c2; color: #7a5a16; }
.note.info { background: #eef4f6; border: 1px solid #d9e6ea; color: #355b66; }
.note .ni { flex: 0 0 auto; margin-top: 1px; }

/* ===================== Sign-in overlay ===================== */
.signin-scrim { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 24px;
  background: radial-gradient(120% 90% at 70% 20%, rgba(80,0,0,.32), rgba(16,24,33,.78)); }
.signin-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .5; filter: saturate(.9); }
.signin-wrap { position: relative; width: min(880px, 100%); }
.signin-card { position: relative; width: 100%; background: var(--paper); border-radius: 18px; box-shadow: var(--shadow-lg); overflow: hidden; display: grid; grid-template-columns: 1.05fr .95fr; }
.signin-aside { background: linear-gradient(155deg, var(--maroon) 0%, #3a0608 100%); color: #fff; padding: 34px 32px; display: flex; flex-direction: column; position: relative; overflow: hidden; }
.signin-aside::after { content: ""; position: absolute; right: -60px; bottom: -60px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.10), transparent 70%); }
.signin-form { padding: 34px 34px 30px; display: flex; flex-direction: column; }
.signin-form h2 { margin: 0 0 4px; font-size: 19px; font-weight: 700; color: var(--ink); }
.signin-form .sf-sub { font-size: 12.5px; color: var(--slate-2); margin-bottom: 18px; }
.inst-badges { display: flex; flex-direction: column; gap: 6px; margin-top: 22px; }
.inst-eyebrow { font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .58; }
.signin-brand { display: flex; align-items: center; gap: 12px; }
.signin-logo { width: 46px; height: 46px; border-radius: 10px; object-fit: cover; box-shadow: 0 2px 12px rgba(0,0,0,.28); flex: 0 0 auto; }
.signin-title { margin-top: 22px; }
.signin-title-main { font-size: 44px; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.signin-title-sub { display: block; margin-top: 7px; font-size: 13.5px; font-weight: 600; line-height: 1.3; opacity: .9; letter-spacing: .005em; white-space: nowrap; }
.inst-badge { display: flex; align-items: center; gap: 11px; }
.inst-mark { width: 34px; height: 34px; border-radius: 8px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); display: grid; place-items: center; font-size: 11px; font-weight: 800; flex: 0 0 auto; }
.inst-tx .it1 { font-size: 12.5px; font-weight: 600; line-height: 1.2; }
.inst-tx .it2 { font-size: 10.5px; opacity: .72; }

@media (max-width: 720px) {
  .signin-card { grid-template-columns: 1fr; }
  .signin-aside { display: none; }
}

/* =====================================================================
   RESPONSIVE  ·  desktop ≥1025 · tablet 641–1024 · mobile ≤640
   ===================================================================== */

/* ---------- TABLET: rail stays, panels become overlays ---------- */
@media (max-width: 1024px) {
  :root { --panel-w: 320px; }
  .panel {
    position: absolute; left: var(--rail-w); top: 0; bottom: 0; z-index: 480;
    box-shadow: var(--shadow-lg);
  }
  .panel.collapsed { box-shadow: none; }
  .hdr-sub { display: none; }
  .hdr-expand { display: none; }
  .inspector { width: 330px; }
}

/* ---------- MOBILE: bottom tab bar + bottom sheets ---------- */
@media (max-width: 640px) {
  :root { --rail-w: 0px; --header-h: 52px; }

  /* compact header */
  .hdr { padding-right: 8px; gap: 8px; }
  .hdr-brand { gap: 9px; padding-left: 12px; }
  .hdr-title { font-size: 13.5px; }
  .hdr .tag.teal, .hdr .hdr-ver { display: none; }
  .hdr-user { padding: 3px; border: none; background: transparent; gap: 0; }
  .hdr-user .nm, .hdr-user .rl { display: none; }

  .body { position: relative; }

  /* icon rail -> fixed bottom tab bar */
  .rail {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: 100%; height: 58px;
    flex-direction: row; padding: 0 0 env(safe-area-inset-bottom, 0); border-right: none;
    border-top: 1px solid #0d1218; z-index: 700;
  }
  .rail-items { flex-direction: row; justify-content: space-around; width: 100%; gap: 0; }
  .rail-spacer, .rail-sep, .rail-tip { display: none; }
  .rail-btn { flex: 1 1 0; min-width: 0; width: auto; height: 58px; border-radius: 0; }
  .rail-btn.active { background: var(--rail-2); }
  .rail-btn.active::before { left: 50%; top: 0; transform: translateX(-50%); width: 24px; height: 3px; border-radius: 0 0 3px 3px; }
  .rail > .rail-btn { flex: 1 1 0; height: 58px; }

  /* map fills the viewport */
  .map-wrap { position: absolute; inset: 0; }
  .reopen { display: none; }

  /* contextual panel -> bottom sheet */
  .panel {
    position: fixed; left: 0; right: 0; bottom: 58px; top: auto; width: 100%; flex-basis: auto;
    max-height: 74vh; height: auto; border-right: none; border-top: 1px solid var(--border);
    border-radius: 18px 18px 0 0; box-shadow: var(--shadow-lg); z-index: 680;
    transform: translateY(0); transition: transform .28s cubic-bezier(.4,0,.2,1);
  }
  .panel.collapsed { width: 100%; flex-basis: auto; border-right: none; transform: translateY(115%); }
  .panel-head { padding-top: 22px; }
  .panel-head::before, .insp-head::before {
    content: ""; position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
    width: 40px; height: 4px; border-radius: 3px; background: var(--border-strong);
  }
  .panel-head { position: relative; }
  .panel-body { max-height: calc(74vh - 72px); padding-bottom: 30px; }

  /* inspector -> bottom sheet */
  .inspector {
    width: 100%; left: 0; right: 0; bottom: 58px; top: auto; height: auto; max-height: 80vh;
    border-left: none; border-top: 1px solid var(--border); border-radius: 18px 18px 0 0;
    box-shadow: var(--shadow-lg); z-index: 690; transform: translateY(115%);
  }
  .inspector.open { transform: translateY(0); }
  .inspector.open { transform: translateY(0); }
  .insp-head { position: relative; padding-top: 22px; }
  .insp-body { max-height: calc(80vh - 78px); }

  /* map controls — touch sized, repositioned */
  .map-search { top: 10px; left: 10px; right: 60px; width: auto; }
  .map-search .input { height: 44px; }
  .map-toolbar { top: 10px; right: 10px; gap: 8px; }
  .leaflet-control-scale {
    margin-left: 10px !important; margin-bottom: 128px !important;
  }
  .tool-btn { width: 44px; height: 44px; }
  .tool-btn svg { width: 20px; height: 20px; }

  /* display-layer switch under the search bar, full width (compact) */
  .mode-switch {
    top: 64px; left: 10px; right: 10px; bottom: auto; transform: none; width: auto;
    box-shadow: var(--shadow); padding: 5px; gap: 0;
  }
  .mode-switch .ms-label { display: none; }
  .mode-switch .ms-modes { gap: 2px; padding: 2px; }
  .mode-switch button { flex: 1 1 0; height: 34px; font-size: 12.5px; }

  /* legend — collapsible card tucked directly under the Display-layer switch
     (collapsed by default on mobile) instead of floating at the bottom where it
     gets lost behind the panel / tab bar */
  .map-legend { top: 122px; bottom: auto; left: 10px; right: auto; width: auto; max-width: calc(100% - 20px); }
  .map-legend.closed { padding: 8px 14px; }
  .map-legend.closed .ml-head { margin-bottom: 0; }
  .map-legend.closed .ml-body { display: none; }
  .legend-row { padding: 9px 4px; }
  .legend-check { width: 22px; height: 22px; }
  .legend-tx .lg-range, .legend-tx .lg-desc { font-size: 13.5px; }
  .grad-scale { font-size: 12px; }

  /* bigger touch targets across controls */
  .switch { width: 48px; height: 28px; }
  .switch::after { width: 24px; height: 24px; }
  .switch.on::after { transform: translateX(20px); }
  input[type=range].rng { height: 6px; }
  input[type=range].rng::-webkit-slider-thumb { width: 22px; height: 22px; }
  input[type=range].rng::-moz-range-thumb { width: 22px; height: 22px; }
  .rangeslider { height: 26px; }
  .rangeslider input[type=range]::-webkit-slider-thumb { width: 24px; height: 24px; }
  .rangeslider input[type=range]::-moz-range-thumb { width: 24px; height: 24px; }
  .rangeslider .rs-rail, .rangeslider .rs-fill { top: 11px; }
  .var-chip { padding: 8px 13px; font-size: 12.5px; }
  .reorder-btn { width: 32px; height: 22px; }
  .seg button { height: 40px; font-size: 13px; }
  .check-row { padding: 9px 4px; }
  .btn { height: 46px; }
  .btn.sm { height: 38px; }
  .metric-grid { gap: 8px; }

  /* chart modal -> full screen */
  .modal-scrim { padding: 0; backdrop-filter: none; }
  .modal-card { width: 100%; max-height: 100vh; height: 100dvh; border-radius: 0; }
  .modal-body { padding: 14px 14px 28px; }
  .modal-head { padding: 14px 16px; }

  /* sign-in fits small screens */
  .signin-scrim { padding: 0; }
  .signin-card { border-radius: 0; min-height: 100dvh; }
  .signin-form { padding: 26px 20px 24px; justify-content: center; }
  /* Card is fullscreen on mobile, so anchor the hint to the bottom where there
     is free space — keeps it centered, readable and clear of the inputs and
     buttons. (Pointing at the close button is a desktop-only requirement.) */
  .signin-hint {
    position: fixed; top: auto; bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    left: 12px; right: 12px; width: auto; text-align: center;
  }
  .signin-hint-arrow { display: none; }
}

/* legend head as a toggle button */
.map-legend .ml-head {
  width: 100%; border: none; background: transparent; padding: 0; cursor: pointer;
  font-family: inherit; align-items: center;
}
.map-legend .ml-head .ml-chev { color: var(--slate-2); display: none; }
@media (max-width: 640px) { .map-legend .ml-head .ml-chev { display: grid; place-items: center; } }

/* landscape phones: shorter sheets so content + keyboard fit */
@media (max-width: 920px) and (max-height: 480px) and (orientation: landscape) {
  .panel { max-height: 88vh; }
  .panel-body { max-height: calc(88vh - 72px); }
  .inspector { max-height: 90vh; }
  .insp-body { max-height: calc(90vh - 78px); }
}

/* (entrance animation removed — content must render in static captures/prints) */

/* ===================== Analysis panel ===================== */
.filt-label { font-size: 11px; font-weight: 700; color: var(--slate); margin-bottom: 6px; letter-spacing: .01em; }
.check-row {
  display: flex; align-items: center; gap: 9px; padding: 6px 2px; width: 100%;
  border: none; background: transparent; cursor: pointer; border-radius: 6px; text-align: left;
  transition: .12s; font-family: inherit;
}
.check-row:hover { background: var(--gray-50); }
.check-row.off { opacity: .5; }
.check-row .check-count { font-size: 11px; color: var(--slate-2); font-weight: 600; }

/* dual-range slider */
.rs-head { display: flex; justify-content: space-between; font-size: 11.5px; font-weight: 700; color: var(--maroon); margin-bottom: 6px; }
.rangeslider { position: relative; height: 20px; }
.rangeslider .rs-rail { position: absolute; top: 8px; left: 0; right: 0; height: 4px; border-radius: 3px; background: var(--border-strong); }
.rangeslider .rs-fill { position: absolute; top: 8px; height: 4px; border-radius: 3px; background: var(--maroon); }
.rangeslider input[type=range] {
  -webkit-appearance: none; appearance: none; position: absolute; top: 0; left: 0; width: 100%; height: 20px;
  margin: 0; background: transparent; pointer-events: none;
}
.rangeslider input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; pointer-events: auto; width: 16px; height: 16px; border-radius: 50%;
  background: var(--maroon); border: 2px solid #fff; box-shadow: var(--shadow-sm); cursor: pointer;
}
.rangeslider input[type=range]::-moz-range-thumb {
  pointer-events: auto; width: 16px; height: 16px; border-radius: 50%; border: 2px solid #fff;
  background: var(--maroon); box-shadow: var(--shadow-sm); cursor: pointer;
}

/* variable chips */
.var-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.var-chip {
  border: 1px solid var(--border-strong); background: var(--paper); color: var(--slate);
  font-size: 11px; font-weight: 600; padding: 4px 9px; border-radius: 999px; cursor: pointer;
  transition: .12s; font-family: inherit;
}
.var-chip:hover { border-color: var(--slate-2); color: var(--ink); }
.var-chip.on { background: var(--maroon); border-color: var(--maroon); color: #fff; }

/* ===================== Clickable summary cards ===================== */
.metric.clickable { cursor: pointer; transition: border-color .14s, box-shadow .14s, transform .14s, background .14s; }
.metric.clickable:hover { border-color: var(--border-strong); background: #fff; box-shadow: var(--shadow); transform: translateY(-1px); }
.metric.clickable:focus-visible { outline: 2px solid var(--maroon); outline-offset: 2px; }
.metric .mgo { position: absolute; right: 7px; top: 7px; color: var(--muted); opacity: 0; transition: opacity .14s, transform .14s; display: grid; place-items: center; transform: translateX(-2px); }
.metric.clickable:hover .mgo { opacity: 1; transform: translateX(0); }

/* seg buttons that carry an icon */
.seg button svg { width: 14px; height: 14px; flex: 0 0 auto; }
.seg button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; }

/* ===================== Analysis focus banner ===================== */
.focus-banner {
  display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-radius: var(--radius);
  background: linear-gradient(135deg, var(--maroon-tint), #fff); border: 1px solid var(--maroon-tint2); margin-bottom: 16px;
}
.focus-banner .fb-tx { flex: 1; min-width: 0; }
.focus-banner .fb-eyebrow { font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--maroon); }
.focus-banner .fb-title { font-size: 13.5px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; margin-top: 2px; }
.focus-banner .fb-sub { font-size: 11px; color: var(--slate-2); margin-top: 1px; }
.fb-clear {
  flex: 0 0 auto; border: 1px solid var(--maroon-tint2); background: var(--paper); color: var(--maroon);
  font-weight: 600; font-size: 11.5px; height: 28px; padding: 0 11px; border-radius: 8px; cursor: pointer; font-family: inherit; transition: .12s;
}
.fb-clear:hover { background: var(--maroon); color: #fff; border-color: var(--maroon); }

/* ===================== Pixel Explorer sheet ===================== */
.explorer-sheet {
  position: absolute; left: 0; bottom: 0; z-index: 458; background: var(--paper);
  border-top: 1px solid var(--border); border-radius: 14px 14px 0 0;
  box-shadow: 0 -14px 40px rgba(20,28,37,.16); display: flex; flex-direction: column; overflow: hidden;
  transition: height .26s cubic-bezier(.4,0,.2,1), right .22s cubic-bezier(.4,0,.2,1);
}
.explorer-sheet.half { height: 56%; }
.explorer-sheet.full { height: calc(100% - 14px); }
.xsheet-grip {
  position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 42px; height: 4px;
  border-radius: 3px; background: var(--border-strong); border: none; cursor: pointer; padding: 0; z-index: 3; transition: .12s;
}
.xsheet-grip:hover { background: var(--slate-2); }
.xsheet-head {
  display: flex; align-items: center; gap: 12px; padding: 15px 14px 11px; border-bottom: 1px solid var(--border); flex: 0 0 auto;
}
.xs-title { display: flex; align-items: center; gap: 9px; min-width: 0; }
.xs-title .xs-ic { width: 28px; height: 28px; flex: 0 0 auto; border-radius: 7px; background: var(--maroon-tint); color: var(--maroon); display: grid; place-items: center; }
.xs-title .xs-tx { min-width: 0; }
.xs-title .xs-t { font-size: 14px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xs-title .xs-s { font-size: 11px; color: var(--slate-2); font-weight: 500; white-space: nowrap; }
.xsheet-tabs { width: 198px; flex: 0 0 auto; }
.xsheet-actions { margin-left: auto; display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }
.xs-group {
  height: 30px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--paper);
  font-family: inherit; font-size: 12px; font-weight: 600; color: var(--slate); padding: 0 8px; cursor: pointer; outline: none;
}
.xs-group:hover { border-color: var(--slate-2); }
.xs-icon { width: 30px; height: 30px; border: 1px solid var(--border); border-radius: 8px; background: var(--paper); color: var(--slate-2); cursor: pointer; display: grid; place-items: center; transition: .12s; flex: 0 0 auto; }
.xs-icon:hover { background: var(--gray-50); color: var(--maroon); border-color: var(--border-strong); }
.xsheet-body { flex: 1; overflow: auto; min-height: 0; }
.xsheet-body::-webkit-scrollbar { width: 11px; height: 11px; }
.xsheet-body::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 6px; border: 3px solid var(--paper); }

/* ---- pixel table ---- */
.ptable-wrap { width: 100%; }
.ptable { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ptable thead th {
  position: sticky; top: 0; z-index: 1; background: var(--gray-50); border-bottom: 1px solid var(--border);
  padding: 9px 12px; font-size: 11px; font-weight: 700; letter-spacing: .02em; color: var(--slate);
  cursor: pointer; user-select: none; white-space: nowrap; text-align: left;
}
.ptable thead th:hover { color: var(--ink); background: var(--gray-100); }
.ptable thead th.sorted { color: var(--maroon); }
.ptable thead th.th-right { text-align: right; }
.ptable thead th > span { display: inline-flex; align-items: center; gap: 4px; }
.ptable thead th.th-right > span { flex-direction: row-reverse; }
.ptable thead th svg { width: 12px; height: 12px; }
.ptable tbody td { padding: 8px 12px; border-bottom: 1px solid var(--gray-150); white-space: nowrap; color: var(--ink-2); }
.ptable tbody td.td-right { text-align: right; font-variant-numeric: tabular-nums; }
.ptable tbody tr { cursor: pointer; transition: background .1s; }
.ptable tbody tr:hover { background: var(--maroon-tint); }
.ptable tbody tr.sel { background: var(--maroon-tint); box-shadow: inset 3px 0 0 var(--maroon); }
.ptable tr.grp td { background: var(--gray-100); border-bottom: 1px solid var(--border); padding: 7px 12px; }
.ptable tr.grp .grp-lbl { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--slate); }
.ptable tr.grp .grp-n { float: right; font-size: 10.5px; color: var(--slate-2); font-weight: 600; }
.ptable .empty { text-align: center; color: var(--slate-2); padding: 34px 12px; font-size: 12.5px; }
.pcell { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.pbar { width: 54px; height: 6px; border-radius: 4px; background: var(--gray-150); overflow: hidden; flex: 0 0 auto; }
.pbar i { display: block; height: 100%; border-radius: 4px; }
.pval { font-weight: 700; min-width: 30px; text-align: right; }
.mbadge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); }
.mbadge .msw { width: 9px; height: 9px; border-radius: 3px; flex: 0 0 auto; }

/* ---- charts view ---- */
.charts-view { padding: 14px 16px 24px; display: flex; flex-direction: column; gap: 14px; }
.cv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cv-card { background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius); padding: 13px 14px; box-shadow: var(--shadow-sm); }
.cv-h { font-size: 12.5px; font-weight: 700; color: var(--ink); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.cv-expand { margin-left: auto; width: 24px; height: 24px; border: 1px solid var(--border); border-radius: 6px; background: var(--paper); color: var(--slate-2); display: grid; place-items: center; cursor: pointer; transition: .14s; flex: 0 0 auto; }
.cv-expand:hover { color: var(--maroon); border-color: var(--maroon-tint2); background: var(--maroon-tint); }
.cv-axisrow { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.cv-axiscol { min-width: 0; }
.chart-zoom { max-width: 760px; width: 92vw; }
.cv-sub { font-size: 10.5px; color: var(--slate-2); margin-top: 4px; text-align: center; }
.rank-list { display: flex; flex-direction: column; gap: 2px; max-height: 240px; overflow: auto; }
.rank-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border: none; background: transparent; width: 100%; cursor: pointer; border-radius: 7px; font-family: inherit; text-align: left; transition: background .1s; }
.rank-row:hover { background: var(--gray-50); }
.rank-row.sel { background: var(--maroon-tint); }
.rank-i { width: 22px; color: var(--muted); font-size: 11px; font-weight: 700; flex: 0 0 auto; }
.rank-id { width: 56px; font-weight: 700; color: var(--ink); font-size: 12px; flex: 0 0 auto; }
.rank-reg { flex: 1; font-size: 11.5px; color: var(--slate); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-bar { width: 120px; height: 6px; border-radius: 4px; background: var(--gray-150); overflow: hidden; flex: 0 0 auto; }
.rank-bar i { display: block; height: 100%; }
.rank-v { width: 40px; text-align: right; font-weight: 700; font-size: 12px; flex: 0 0 auto; }

.charts-view .cv-card,
.charts-view .chart-card,
.charts-view .facet,
.chart-zoom .cv-card,
.chart-zoom .facet {
  border: none;
  box-shadow: none;
}
.charts-view .chart-tip,
.chart-zoom .chart-tip {
  box-shadow: none;
}
.scatter-canvas-wrap {
  position: relative;
  cursor: crosshair;
}
.scatter-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
.scatter-axis {
  position: relative;
  display: block;
  pointer-events: none;
}
.charts-view svg circle,
.chart-zoom svg circle {
  stroke: none;
}
.loading-scrim {
  position: fixed;
  inset: 0;
  z-index: 1800;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.52);
  backdrop-filter: blur(1.5px);
  pointer-events: all;
}
.loading-card {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 10px 14px;
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 700;
}
.loading-spin {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  border-top-color: var(--maroon);
  animation: tide-spin .75s linear infinite;
}
@keyframes tide-spin { to { transform: rotate(360deg); } }

@media (max-width: 820px) {
  .cv-grid { grid-template-columns: 1fr; }
  .xsheet-tabs { width: 168px; }
  .xs-title .xs-s { display: none; }
  .explorer-sheet.half { height: 62%; }
}

/* In tablet overlay mode the panel floats over the map, so inset the sheet by its width */
@media (max-width: 1024px) {
  .explorer-sheet { left: var(--panel-w); }
  .panel-collapsed .explorer-sheet { left: 0; }
}
@media (max-width: 640px) {
  .explorer-sheet { left: 0; }
}

/* ===================== "In progress / Coming soon" treatment ===================== */
.soon-pill {
  display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; padding: 2px 8px;
  border-radius: 999px; font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: #f6efdd; color: #8a6420; vertical-align: middle; white-space: nowrap;
}
.soon-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #c89636; flex: 0 0 auto; }
.soon-pill.lg { font-size: 10.5px; padding: 4px 11px; margin-left: 0; }
.rail-badge {
  position: absolute; top: 7px; right: 9px; width: 8px; height: 8px; border-radius: 50%;
  background: #d6a43a; box-shadow: 0 0 0 2px var(--rail);
}
@media (max-width: 640px) { .rail-badge { top: 12px; right: calc(50% - 16px); } }

.soon-hero {
  text-align: center; padding: 22px 16px 18px; border: 1px solid var(--border); border-radius: var(--radius);
  background: linear-gradient(160deg, var(--gray-50), #fff); margin-bottom: 14px;
}
.soon-hero-ic { width: 46px; height: 46px; border-radius: 12px; margin: 0 auto 12px; display: grid; place-items: center; background: #f6efdd; color: #8a6420; }
.soon-hero .soon-title { font-size: 17px; font-weight: 700; color: var(--ink); margin-top: 12px; letter-spacing: -.01em; }
.soon-hero .soon-sub { font-size: 12px; line-height: 1.6; color: var(--slate); margin-top: 7px; max-width: 280px; margin: 7px auto 0; }

.soon-disabled { position: relative; border-radius: var(--radius); overflow: hidden; }
.soon-disabled > *:not(.soon-veil) { filter: grayscale(.7); opacity: .45; pointer-events: none; user-select: none; }
.soon-veil { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(247,248,250,.32); }
.soon-veil span {
  display: inline-flex; align-items: center; gap: 7px; background: var(--ink); color: #fff;
  font-size: 11.5px; font-weight: 600; padding: 7px 12px; border-radius: 999px; box-shadow: var(--shadow);
}

/* ===================== Selected-pixel summary card ===================== */
.insp-hero {
  display: flex; align-items: center; gap: 14px; padding: 14px 15px; margin-bottom: 12px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: linear-gradient(155deg, var(--gray-50), #fff);
}
.insp-hero .ih-prob { display: flex; flex-direction: column; min-width: 0; }
.insp-hero .ih-val { font-size: 30px; font-weight: 800; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.insp-hero .ih-val span { font-size: 16px; font-weight: 700; margin-left: 1px; }
.insp-hero .ih-lbl { font-size: 10.5px; color: var(--slate-2); margin-top: 5px; font-weight: 600; letter-spacing: .02em; }
.insp-hero .ih-side { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: 0 0 auto; }

.insp-actions { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }

.insp-group { border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 10px; overflow: hidden; background: var(--paper); }
.insp-group .ig-h {
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--slate);
  background: var(--gray-50); padding: 9px 12px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 8px;
}
.insp-group .ig-h svg { width: 14px; height: 14px; color: var(--slate-2); flex: 0 0 auto; }
.insp-group .ig-body { padding: 1px 12px; }
.insp-group .ig-body .kv { padding: 8px 0; }
.insp-group .ig-spark { padding: 8px 12px 2px; border-top: 1px solid var(--border); background: var(--gray-50); }

/* live-update hint above the Analysis filters */
.live-hint {
  display: flex; align-items: flex-start; gap: 9px; padding: 10px 12px; margin-bottom: 12px;
  border-radius: var(--radius); background: var(--maroon-tint); border: 1px solid var(--maroon-tint2);
  font-size: 11.5px; line-height: 1.5; color: var(--ink-2);
}
.live-hint .lh-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--maroon); flex: 0 0 auto; margin-top: 4px; }
.live-hint b { color: var(--maroon); font-weight: 700; }
.card.hl { box-shadow: inset 0 0 0 1.5px var(--maroon-tint2), var(--shadow-sm); }

/* =====================================================================
   RESPONSIVE PART 2  ·  Pixel Explorer sheet + cross-device polish
   ===================================================================== */

/* ---- TABLET (641–1024): keep map controls visible beside an open panel ---- */
@media (min-width: 641px) and (max-width: 1024px) {
  .app:not(.panel-collapsed) .map-search { left: calc(var(--panel-w) + 14px); right: 14px; width: auto; }
  .app:not(.panel-collapsed) .mode-switch { left: calc(var(--panel-w) + 14px); }
  .app:not(.panel-collapsed) .map-legend { left: calc(var(--panel-w) + 14px); }
  /* touch-friendly controls on tablet too */
  .tool-btn { width: 42px; height: 42px; }
  .seg button { height: 38px; }
  .switch { width: 46px; height: 26px; }
  .switch::after { width: 22px; height: 22px; }
  .switch.on::after { transform: translateX(20px); }
  .legend-check { width: 20px; height: 20px; }
}

/* ---- MOBILE (≤640): Explorer becomes a bottom sheet above the tab bar ---- */
@media (max-width: 640px) {
  /* fit all 8 tabs across the bottom bar */
  .rail-items { display: contents; }
  .rail .rail-btn { flex: 1 1 0; min-width: 0; }

  .explorer-sheet {
    left: 0; right: 0 !important; bottom: 58px; z-index: 670;
    border-radius: 18px 18px 0 0; height: 64dvh;
    box-shadow: 0 -16px 44px rgba(20,28,37,.22);
  }
  .explorer-sheet.full { height: calc(100dvh - var(--header-h) - 58px - 6px); }

  /* header wraps: title + actions on row 1, tabs full-width on row 2 */
  .xsheet-head { flex-wrap: wrap; row-gap: 9px; gap: 9px; padding: 16px 12px 11px; }
  .xs-title { order: 1; flex: 1 1 auto; min-width: 0; }
  .xs-title .xs-s { display: none; }
  .xsheet-actions { order: 1; margin-left: auto; }
  .xsheet-tabs { order: 2; flex: 1 1 100%; width: auto; }
  .xs-group { height: 38px; font-size: 12.5px; }
  .xs-icon { width: 38px; height: 38px; }
  .xsheet-grip { width: 52px; height: 5px; top: 7px; }

  /* touch-sized table rows; horizontal scroll with momentum */
  .xsheet-body { -webkit-overflow-scrolling: touch; }
  .ptable thead th { padding: 11px 12px; font-size: 11.5px; }
  .ptable tbody td { padding: 12px 12px; font-size: 13px; }
  .ptable tr.grp td { padding: 9px 12px; }
  .pbar, .rank-bar { height: 7px; }

  /* charts view spacing */
  .charts-view { padding: 12px 12px 22px; gap: 12px; }
  .cv-card { padding: 12px; }
  .rank-list { max-height: 46dvh; }
  .rank-row { padding: 9px 8px; }

  /* focus banner + clear button comfortable to tap */
  .fb-clear { height: 34px; padding: 0 14px; }
  .soon-hero .soon-sub { max-width: none; }
}

/* ---- LANDSCAPE PHONES / short viewports: taller sheets, scroll inside ---- */
@media (max-width: 920px) and (max-height: 480px) and (orientation: landscape) {
  .explorer-sheet, .explorer-sheet.half, .explorer-sheet.full { top: calc(var(--header-h) + 6px); height: auto; }
  .rank-list { max-height: 34dvh; }
  .cv-grid { grid-template-columns: 1fr 1fr; }
  /* compact the vertical rail so all 8 items fit on a short landscape phone */
  .rail { padding: 5px 0; }
  .rail-items { gap: 1px; }
  .rail-btn { height: 34px; }
  .rail-btn svg { width: 16px; height: 16px; }
  .rail-sep { margin: 3px 0; }
}

/* =====================================================================
   SHAP  ·  model interpretation
   ===================================================================== */
.shap-sub { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--slate-2); margin: 12px 0 8px; }

/* About — team list */
.team-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.team-list li { position: relative; font-size: 12.5px; font-weight: 600; color: var(--ink); padding-left: 16px; line-height: 1.3; }
.team-list li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 5px; height: 5px; border-radius: 50%; background: var(--maroon); opacity: .6; }

/* compact Data & Methods metric strip (inside Model card) */
.dm-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; padding-top: 11px; border-top: 1px solid var(--border); }
.dm-metric { text-align: center; }
.dm-metric span { display: block; font-size: 16px; font-weight: 700; color: var(--maroon); letter-spacing: -.01em; }
.dm-metric small { display: block; font-size: 9px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--slate-2); margin-top: 2px; }

/* magnitude (importance) bars */
.shap-bars { display: flex; flex-direction: column; gap: 6px; }
.sb-row { display: grid; grid-template-columns: 16px minmax(96px, 132px) 1fr 46px; align-items: center; gap: 8px; }
.sb-rank { font-size: 10px; color: var(--muted); text-align: center; }
.sb-lab { font-size: 11.5px; color: var(--ink); display: flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-dot { width: 7px; height: 7px; border-radius: 2px; flex: 0 0 auto; }
.sb-track { position: relative; height: 11px; background: #eef1f5; border-radius: 4px; overflow: hidden; }
.sb-track i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; min-width: 2px; }
.sb-val { font-size: 11px; color: var(--slate); text-align: right; }

/* diverging (signed) bars */
.shap-div { display: flex; flex-direction: column; gap: 5px; }
.sd-row { display: grid; grid-template-columns: minmax(92px, 130px) 1fr 62px; align-items: center; gap: 8px; }
.sd-lab { font-size: 11.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-track { position: relative; height: 14px; background: #f1f3f6; border-radius: 4px; }
.sd-center { position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: #c2c9d2; }
.sd-track i { position: absolute; top: 2px; bottom: 2px; border-radius: 3px; min-width: 2px; }
.sd-val { font-size: 11px; text-align: right; font-weight: 600; display: flex; align-items: center; justify-content: flex-end; gap: 3px; }
.sd-arrow { font-size: 8px; }

/* legend */
.shap-legend { display: flex; flex-wrap: wrap; gap: 12px; margin: 10px 0 2px; }
.sl-i { display: flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--slate-2); }
.sl-sw { width: 9px; height: 9px; border-radius: 2px; }
.shap-grouplegend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--border); }
.sgl-i { display: flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--slate-2); }
.sgl-sw { width: 9px; height: 9px; border-radius: 2px; }

/* driver badge */
.driver-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--ink);
  background: color-mix(in srgb, var(--dc) 12%, transparent); border: 1px solid color-mix(in srgb, var(--dc) 32%, transparent);
  padding: 3px 9px; border-radius: 999px; line-height: 1.3; }
.driver-badge .db-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dc); flex: 0 0 auto; }
.driver-badge .db-sub { color: var(--slate-2); font-weight: 500; }
/* main-driver row in the inspector — stacks so long labels never overflow */
.shap-driver-row { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; padding: 4px 0 2px; }
.shap-driver-row .sdr-k { font-size: 12px; color: var(--slate-2); font-weight: 500; }
.shap-driver-row .driver-badge { max-width: 100%; white-space: normal; align-items: flex-start; border-radius: 10px; line-height: 1.35; }
.shap-driver-row .driver-badge .db-dot { margin-top: 5px; }

/* key-signal grid */
.key-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(138px, 1fr)); gap: 8px; }
.key-cell { border: 1px solid var(--border); border-radius: 9px; padding: 9px 10px; background: var(--paper); min-width: 0; overflow: hidden; }
.kc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }
.kc-name { font-size: 11px; font-weight: 700; color: var(--ink); min-width: 0; overflow-wrap: anywhere; line-height: 1.25; }
.kc-val { font-size: 11.5px; font-weight: 700; flex: 0 0 auto; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kc-desc { font-size: 10px; color: var(--slate-2); margin-top: 3px; line-height: 1.35; overflow-wrap: anywhere; }
.kc-dir { font-size: 9.5px; font-weight: 700; margin-top: 6px; overflow-wrap: anywhere; }
.kc-dir.up { color: var(--risk-high); }
.kc-dir.dn { color: #3a6ea5; }

/* driver distribution */
.driver-dist { display: flex; flex-direction: column; gap: 4px; }
.dd-row { display: grid; grid-template-columns: minmax(120px, 1.4fr) 1fr 34px 36px; align-items: center; gap: 8px;
  background: none; border: none; padding: 5px 6px; border-radius: 7px; cursor: default; text-align: left; width: 100%; }
.dd-row.click { cursor: pointer; }
.dd-row.click:hover { background: var(--gray-50); }
.dd-row.on { background: color-mix(in srgb, var(--maroon) 7%, transparent); }
.dd-lab { font-size: 11.5px; color: var(--ink); display: flex; align-items: center; gap: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.dd-track { position: relative; height: 10px; background: #eef1f5; border-radius: 4px; overflow: hidden; }
.dd-track i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; min-width: 2px; }
.dd-n { font-size: 11px; color: var(--ink); text-align: right; font-weight: 600; }
.dd-pct { font-size: 10.5px; color: var(--muted); text-align: right; }

/* charts-section card */
.shap-card .shap-toggle { margin-left: auto; }
.shap-toggle.seg button { font-size: 10.5px; padding: 3px 9px; }
.shap-toggle.seg button:disabled { opacity: .4; cursor: not-allowed; }

/* analysis SHAP explorer */
.shap-explorer { display: flex; flex-direction: column; gap: 12px; padding: 4px; }
.se-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.se-explain { display: flex; flex-direction: column; gap: 10px; }
.se-ex-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.se-ex-id { font-size: 15px; font-weight: 700; }
.se-ex-reg { font-size: 11px; color: var(--slate-2); }
.se-ex-cols { display: grid; grid-template-columns: 1.1fr 1fr; gap: 18px; }
.shap-rank { display: flex; flex-direction: column; gap: 2px; max-height: 360px; overflow: auto; }
.sr-row { display: grid; grid-template-columns: 58px 46px minmax(110px, 1.2fr) minmax(120px, 1.2fr) 1fr 42px; align-items: center; gap: 8px;
  background: none; border: none; border-radius: 7px; padding: 6px 8px; cursor: pointer; text-align: left; width: 100%; }
.sr-row:hover { background: var(--gray-50); }
.sr-row.sel { background: color-mix(in srgb, var(--maroon) 8%, transparent); box-shadow: inset 2px 0 0 var(--maroon); }
.sr-id { font-size: 11.5px; font-weight: 600; color: var(--ink); }
.sr-reg { font-size: 10.5px; color: var(--slate-2); }
.sr-driver { font-size: 11px; color: var(--slate); display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-ddot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.sr-top { font-size: 11px; color: var(--slate); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-bar { position: relative; height: 9px; background: #eef1f5; border-radius: 4px; overflow: hidden; }
.sr-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; }
.sr-v { font-size: 11px; text-align: right; font-weight: 600; }
.sr-more { font-size: 10.5px; color: var(--muted); padding: 8px; text-align: center; }

@media (max-width: 1024px) {
  .se-grid { grid-template-columns: 1fr; }
  .se-ex-cols { grid-template-columns: 1fr; gap: 10px; }
  .sr-row { grid-template-columns: 52px 40px minmax(90px, 1fr) 1fr 38px; }
  .sr-top { display: none; }
}