*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:         #0D0F12;
  --bg-2:       #13161A;
  --bg-3:       #1A1E24;
  --bg-4:       #1f242c;
  --border:     #2A2F38;
  --border-2:   #353C47;
  --text:       #F0F2F5;
  --text-2:     #8B929E;
  --text-3:     #555E6B;
  --amber:      #C9A84C;
  --amber-dim:  rgba(201,168,76,0.10);
  --amber-soft: rgba(201,168,76,0.18);
  --warn-bdr:   rgba(201,168,76,0.35);
  --green:      #1D9E75;
  --green-bg:   rgba(29,158,117,0.10);
  --green-bdr:  rgba(29,158,117,0.35);
  --blue:       #378ADD;
  --blue-bg:    rgba(55,138,221,0.10);
  --blue-bdr:   rgba(55,138,221,0.35);
  --red:        #C0392B;
  --err-bg:     rgba(192,57,43,0.10);
  --err-bdr:    rgba(192,57,43,0.35);
  --err-text:   #C0392B;
  --deth:       #9b59b6;
  --deth-bg:    rgba(155,89,182,0.12);
  --deth-bdr:   rgba(155,89,182,0.35);
  --radius:     6px;
  --radius-sm:  4px;
  --radius-lg:  10px;
  --sidebar-w:  220px;
  --topbar-h:   48px;
  --mono:       'JetBrains Mono', 'Fira Code', monospace;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
  overflow: hidden;
}

/* ── TOPBAR ── */
.topbar {
  height: var(--topbar-h);
  background: var(--bg-2);
  border-bottom: 0.5px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 12px;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
}
.hamburger {
  width: 32px; height: 32px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 5px; cursor: pointer;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  transition: background .15s;
}
.hamburger:hover { background: var(--bg-3); }
.hamburger span { display: block; width: 16px; height: 1.5px; background: var(--text-2); transition: background .15s; }
.hamburger:hover span { background: var(--text); }
.topbar-divider { width: 0.5px; height: 20px; background: var(--border); flex-shrink: 0; }
.wordmark { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); flex-shrink: 0; }
.wordmark span { color: var(--amber); }
.alliance-switcher {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--radius-sm);
  cursor: pointer; border: 0.5px solid transparent;
  transition: background .15s, border-color .15s; flex-shrink: 0;
}
.alliance-switcher:hover { background: var(--bg-3); border-color: var(--border); }
.alliance-tag { font-size: 13px; font-weight: 700; color: var(--amber); letter-spacing: .05em; }
.alliance-name { font-size: 13px; color: var(--text-2); }
.alliance-ctx { font-size: 12px; color: var(--text-2); }
.switcher-caret { font-size: 10px; color: var(--text-3); margin-left: 2px; }
.topbar-spacer { flex: 1; }
.topbar-right { display: flex; align-items: center; gap: 8px; }
.user-pill {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 10px; border-radius: var(--radius-sm);
  cursor: pointer; border: 0.5px solid transparent;
  transition: background .15s, border-color .15s;
}
.user-pill:hover { background: var(--bg-3); border-color: var(--border); }
.user-name { font-size: 13px; color: var(--text); font-weight: 500; }
.user-role {
  font-size: 10px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 20px;
  background: var(--amber-dim); color: var(--amber);
  border: 0.5px solid var(--warn-bdr);
}
.user-rank { font-size: 11px; color: var(--text-2); }
.settings-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: var(--radius-sm);
  cursor: pointer; border: 0.5px solid var(--border);
  background: transparent; color: var(--text-2);
  font-size: 12px; font-weight: 500;
  transition: background .15s, color .15s, border-color .15s;
}
.settings-btn:hover { background: var(--bg-3); color: var(--text); border-color: var(--border-2); }
.settings-btn i { font-size: 14px; }

/* ── LAYOUT ── */
.layout {
  display: flex;
  height: calc(100vh - var(--topbar-h));
  margin-top: var(--topbar-h);
  overflow: hidden;
}

/* ── SIDEBAR ── */
.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--bg-2);
  border-right: 0.5px solid var(--border);
  display: flex; flex-direction: column;
  overflow-y: auto;
  transition: width .2s ease, opacity .2s ease;
}
.sidebar.collapsed { width: 0; opacity: 0; pointer-events: none; }
.sidebar-section-label {
  font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-3); padding: 1.2rem 1rem .4rem;
}
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 1rem; cursor: pointer; font-size: 13px; color: var(--text-2);
  border-left: 2px solid transparent;
  transition: background .12s, color .12s;
  user-select: none; white-space: nowrap; overflow: hidden;
}
.nav-item:hover { background: var(--bg-3); color: var(--text); }
.nav-item.active { color: var(--amber); border-left-color: var(--amber); background: var(--amber-dim); font-weight: 500; }
.nav-item i { font-size: 15px; flex-shrink: 0; width: 16px; text-align: center; }
.nav-item .badge {
  margin-left: auto; font-size: 9px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  padding: 1px 5px; border-radius: 20px;
  background: var(--bg-3); color: var(--text-3); border: 0.5px solid var(--border);
}
.sidebar-spacer { flex: 1; }
.sidebar-bottom { border-top: 0.5px solid var(--border); padding: .5rem 0; }

/* ── CONTENT AREA ── */
.content { flex: 1; overflow-y: auto; background: var(--bg); }

/* ── DASHBOARD TAB NAV ── */
.dash-tabnav {
  background: var(--bg-2);
  border-bottom: 0.5px solid var(--border);
  padding: 0 24px;
  display: flex; gap: 2px;
  position: sticky; top: 0; z-index: 10;
}
.dash-tab {
  font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-2); padding: 11px 14px;
  cursor: pointer; border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s; user-select: none;
}
.dash-tab:hover { color: var(--text-2); }
.dash-tab.active { color: var(--amber); border-bottom-color: var(--amber); }

/* ── DASH CONTENT WRAPPER ── */
.dash-content { padding: 28px; }

/* ── PROVISIONAL BANNER ── */
.provisional-banner {
  display: flex; align-items: center; gap: 10px;
  background: var(--amber-dim); border: 0.5px solid var(--warn-bdr);
  border-radius: var(--radius); padding: 10px 14px;
  margin-bottom: 20px; font-size: 12px; color: var(--amber);
}
.provisional-banner i { font-size: 14px; flex-shrink: 0; }
.provisional-banner strong { font-weight: 600; }
.provisional-banner span { color: var(--text-2); }

/* ── WEEK BAR ── */
.dash-week-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.dash-week-label { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.dash-week-select {
  background: var(--bg-2); border: 0.5px solid var(--border-2);
  color: var(--amber); font-size: 13px; font-weight: 600;
  padding: 4px 10px; border-radius: var(--radius-sm); cursor: pointer; outline: none;
  transition: border-color .15s;
}
.dash-week-select:focus { border-color: var(--amber); }



/* ── SECTION HEADERS ── */
.section-header { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; margin-top: 28px; }
.section-header:first-of-type { margin-top: 0; }
.section-title { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); white-space: nowrap; }
.section-line { flex: 1; height: 0.5px; background: var(--border); }



/* ── INLINE BADGES — tier fact token, two dresses (text / .chip) + the one DeTH badge.
   Doctrine: presentation-ui.md → Color Layers · Member-Row Tokens. One hue per tier,
   defined once on the text dress; the chip dress adds geometry + tint only.
   Unobserved is grey in BOTH dresses — imperative red never welds to a category. ── */
.wb-tier { color: var(--text-3); }
.wb-tier.vanguard   { color: var(--amber-2); }
.wb-tier.committed  { color: var(--green-2); }
.wb-tier.active     { color: var(--blue-2); }
.wb-tier.casual     { color: var(--deth); }
.wb-tier.unobserved { color: var(--text-3); }
.wb-tier.chip { font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 20px; flex-shrink: 0; white-space: nowrap; background: var(--bg-3); border: 0.5px solid var(--border); }
.wb-tier.chip.vanguard   { background: var(--amber-dim); border-color: var(--warn-bdr); }
.wb-tier.chip.committed  { background: var(--green-bg); border-color: var(--green-bdr); }
.wb-tier.chip.active     { background: var(--blue-bg); border-color: var(--blue-bdr); }
.wb-tier.chip.casual     { background: var(--deth-bg); border-color: var(--deth-bdr); }
.wb-tier.chip.unobserved { background: var(--bg-3); border-color: var(--border); }
.wb-deth { font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 3px; flex-shrink: 0; background: var(--deth-bg); color: var(--deth-2); border: 0.5px solid var(--deth-bdr); }

/* ── LEADERBOARD CARDS ── */
.lb-hero {
  position: relative;
  background: linear-gradient(180deg,#161A1F 0%,var(--bg-2) 30%);
  border: 0.5px solid var(--border-2);
  border-radius: 10px; overflow: hidden; margin-bottom: 16px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 24px -12px rgba(0,0,0,0.7), 0 2px 6px -3px rgba(0,0,0,0.5);
}
.lb-hero::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg,var(--amber) 0%,rgba(201,168,76,0.3) 55%,transparent 100%);
}
.lb-hero-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; border-bottom: 0.5px solid var(--border);
  background: var(--bg-3); gap: 12px;
}
.lb-hero-title { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.lb-hero-meta { font-size: 11px; color: var(--text-3); white-space: nowrap; flex-shrink: 0; }
.lb-hero-body { padding: 0; }
.lb-hero-body.scrollable {
  max-height: 320px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border-2) transparent;
}
.lb-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 16px; font-size: 13px;
  border-bottom: 0.5px solid var(--border);
  transition: background .1s;
}
.lb-row:last-child { border-bottom: none; }
.lb-row:hover { background: var(--bg-3); }
.lb-rank { font-size: 11px; color: var(--text-2); width: 22px; text-align: right; flex-shrink: 0; font-family: var(--mono); }
.lb-rank.top { color: var(--amber); font-weight: 700; }
.lb-name { flex: 1; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-badges { display: flex; gap: 4px; flex-shrink: 0; }
.lb-score { font-size: 13px; font-weight: 600; color: var(--amber); font-family: var(--mono); width: 90px; text-align: right; flex-shrink: 0; }
.lb-score.green { color: var(--green); }
.lb-score.blue  { color: var(--blue); }
.lb-score.muted { color: var(--text-2); font-weight: 400; }

.lb-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 12px; }



/* ── PENDING STATE ── */
.pending-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 20px;
  background: var(--amber-dim); color: var(--amber); border: 0.5px solid var(--warn-bdr);
}



/* ── PLACEHOLDER / EMPTY STATE ── */
.empty-state {
  padding: 48px 24px; text-align: center; color: var(--text-3);
}
.empty-state i { font-size: 32px; margin-bottom: 12px; display: block; }
.empty-state p { font-size: 13px; line-height: 1.6; }

/* ── COVERAGE BADGE ── */
.coverage-count { font-size: 11px; color: var(--text-3); }
.coverage-count strong { color: var(--text-2); }

/* ── ROSTER TABLE ── */
.roster-filters { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; align-items: center; }
.filter-chip {
  padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 600;
  cursor: pointer; border: 0.5px solid var(--border); color: var(--text-3);
  background: var(--bg-2); transition: all .15s;
}
.filter-chip:hover { border-color: var(--border-2); color: var(--text-2); }
.filter-chip.active { background: var(--amber-dim); color: var(--amber); border-color: var(--warn-bdr); }
.search-input {
  flex: 1; min-width: 160px; max-width: 260px;
  padding: 5px 10px; border-radius: var(--radius-sm);
  background: var(--bg-2); border: 0.5px solid var(--border-2);
  color: var(--text); font-size: 12px; outline: none;
  transition: border-color .15s;
}
.search-input:focus { border-color: var(--amber); }
.search-input::placeholder { color: var(--text-3); }

/* ── ROSTER CONTAINER ── */
.roster-container { max-width: 1200px; }

/* ── ABOUT BAR ── */
.about-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-bottom: 0.5px solid var(--border);
  background: var(--bg-3); font-size: 11px; color: var(--text-2);
  border-radius: var(--radius) var(--radius) 0 0;
  flex-wrap: wrap; gap: 6px;
}
.about-bar-item { display: flex; align-items: center; gap: 5px; }
.about-bar-divider { width: 0.5px; height: 12px; background: var(--border-2); }
.about-bar .export-btn {
  margin-left: auto; display: flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: var(--radius-sm);
  background: transparent; border: 0.5px solid var(--border-2);
  color: var(--text-3); font-size: 11px; font-weight: 500;
  cursor: pointer; transition: all .15s; white-space: nowrap;
}
.about-bar .export-btn:hover { background: var(--bg-2); color: var(--text-2); border-color: var(--text-3); }
.about-bar .export-btn i { font-size: 12px; }



/* ── SETTINGS OVERLAY ── */
.settings-overlay {
  position: fixed;
  top: var(--topbar-h); left: 0; right: 0; bottom: 0;
  background: var(--bg);
  z-index: 150;
  display: flex;
  transform: translateY(100%);
  transition: transform .25s cubic-bezier(.4,0,.2,1);
}
.settings-overlay.open { transform: translateY(0); }

.settings-nav {
  width: 220px; flex-shrink: 0;
  background: var(--bg-2);
  border-right: 0.5px solid var(--border);
  overflow-y: auto;
  padding: .5rem 0 1.5rem;
}
.settings-group {
  font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-3); padding: 1rem 1rem .3rem;
}
.settings-nav .nav-item.active { color: var(--amber); border-left-color: var(--amber); background: var(--amber-dim); font-weight: 500; }
.cs-pill {
  margin-left: auto; font-size: 9px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  padding: 1px 5px; border-radius: 20px;
  background: var(--amber-dim); color: var(--amber); border: 0.5px solid var(--warn-bdr);
}

.settings-body {
  flex: 1; overflow-y: auto;
  padding: 2rem 2.5rem;
  max-width: 800px;
}
.settings-top-bar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 24px; padding-bottom: 16px;
  border-bottom: 0.5px solid var(--border);
}
.settings-top-title { font-size: 20px; font-weight: 500; color: var(--text); }
.settings-close-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--radius-sm);
  cursor: pointer; font-size: 12px; font-weight: 500;
  color: var(--text-2); border: 0.5px solid var(--border);
  background: transparent; transition: all .15s;
}
.settings-close-btn:hover { background: var(--bg-3); color: var(--text); border-color: var(--border-2); }

.sec-sub { font-size: 13px; color: var(--text-2); margin-bottom: 1.75rem; line-height: 1.65; max-width: 560px; }
.settings-section { display: none; }
.settings-section.active { display: block; }

/* ── SETTINGS CARDS ── */
.card { background: var(--bg-2); border: 0.5px solid var(--border); border-radius: var(--radius-lg); padding: 1.25rem; margin-bottom: 1rem; }
.card-hed { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); margin-bottom: 1rem; padding-bottom: .75rem; border-bottom: 0.5px solid var(--border); }
.field { margin-bottom: 1rem; }
.field:last-child { margin-bottom: 0; }
.field-label { font-size: 11px; font-weight: 500; color: var(--text-2); display: block; margin-bottom: 5px; letter-spacing: .03em; }
.field-input { width: 100%; padding: 0 10px; height: 34px; font-size: 13px; border: 0.5px solid var(--border-2); border-radius: var(--radius); background: var(--bg-3); color: var(--text); outline: none; transition: border-color .15s; }
.field-input:focus { border-color: var(--amber); }
.field-input[readonly], .field-input:disabled { opacity: .5; cursor: not-allowed; }
.field-hint { font-size: 11px; color: var(--text-3); margin-top: 4px; line-height: 1.5; }
.field-row { display: flex; gap: 8px; align-items: flex-end; }
.field-row .field { flex: 1; margin-bottom: 0; }
select.field-input { cursor: pointer; }

.btn { padding: 7px 16px; border-radius: var(--radius); border: 0.5px solid var(--border-2); background: transparent; cursor: pointer; font-size: 13px; font-weight: 500; color: var(--text); transition: background .12s, border-color .12s; white-space: nowrap; }
.btn:hover { background: var(--bg-3); }
.btn.primary { background: var(--amber); border-color: var(--amber); color: #111; }
.btn.primary:hover { opacity: .9; }
.btn.danger { background: var(--err-bg); border-color: var(--err-bdr); color: var(--err-text); }
.btn.ghost { color: var(--text-2); border-color: transparent; }
.btn.ghost:hover { background: var(--bg-3); color: var(--text); }
.btn.sm { padding: 5px 11px; font-size: 12px; }
.btn:disabled { opacity: .38; cursor: not-allowed; }
.btn-row { display: flex; justify-content: flex-end; gap: 8px; margin-top: 1.25rem; }
.btn-row.spread { justify-content: space-between; }

.sum-row { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 0; border-bottom: 0.5px solid var(--border); font-size: 13px; gap: 12px; }
.sum-row:last-child { border-bottom: none; }
.sum-key { color: var(--text-2); flex-shrink: 0; }
.sum-val { font-weight: 500; text-align: right; }
.sum-val.muted { color: var(--text-3); font-weight: 400; font-size: 12px; }
.sum-val.green { color: var(--green); }
.sum-val.amber { color: var(--amber); }

.toggle-row { display: flex; align-items: center; justify-content: space-between; padding: .875rem 1rem; background: var(--bg-3); border: 0.5px solid var(--border); border-radius: var(--radius); margin-bottom: .75rem; }
.toggle-label { font-size: 13px; color: var(--text-2); }
.toggle-label strong { color: var(--text); font-weight: 500; }
.toggle { position: relative; width: 38px; height: 21px; flex-shrink: 0; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-slider { position: absolute; inset: 0; background: var(--border-2); border-radius: 21px; cursor: pointer; transition: background .2s; }
.toggle-slider::before { content: ''; position: absolute; width: 15px; height: 15px; left: 3px; top: 3px; background: white; border-radius: 50%; transition: transform .2s; }
.toggle input:checked + .toggle-slider { background: var(--amber); }
.toggle input:checked + .toggle-slider::before { transform: translateX(17px); }

.tier-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 0.5px solid var(--border); font-size: 13px; }
.tier-row:last-child { border-bottom: none; }
.tier-row .wb-tier { width: 90px; flex-shrink: 0; text-align: center; } /* layout only — the chip dress supplies the rest */
.tier-range { flex: 1; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); }
.tier-input { width: 64px; padding: 4px 8px; font-size: 12px; border: 0.5px solid var(--border-2); border-radius: var(--radius-sm); background: var(--bg-3); color: var(--text); outline: none; text-align: center; font-family: var(--mono); }
.tier-input:focus { border-color: var(--amber); }

.weight-bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 13px; }
.weight-bar-label { width: 120px; flex-shrink: 0; color: var(--text-2); }
.weight-bar-track { flex: 1; height: 8px; background: var(--bg-3); border: 0.5px solid var(--border); border-radius: 4px; overflow: hidden; }
.weight-bar-fill { height: 100%; border-radius: 4px; }
.weight-bar-val { width: 36px; text-align: right; font-weight: 500; font-size: 12px; font-family: var(--mono); }

.nudge { border-left: 3px solid var(--amber); padding: .875rem 1rem; margin-bottom: 1rem; font-size: 13px; color: var(--text-2); line-height: 1.65; background: var(--amber-dim); border-radius: 0 var(--radius) var(--radius) 0; }
.nudge strong { color: var(--text); font-weight: 500; }

.info-card { background: var(--bg-3); border: 0.5px solid var(--border); border-radius: var(--radius); padding: .875rem 1rem; font-size: 13px; color: var(--text-2); line-height: 1.65; margin-bottom: 1rem; }
.info-card strong { color: var(--text); font-weight: 500; }

.independence-note { background: var(--bg-3); border: 0.5px solid var(--border); border-left: 3px solid var(--blue); border-radius: 0 var(--radius) var(--radius) 0; padding: .875rem 1rem; margin-bottom: 1rem; font-size: 13px; color: var(--text-2); line-height: 1.6; }
.independence-note strong { color: var(--text); font-weight: 500; }

.danger-card { background: var(--err-bg); border: 0.5px solid var(--err-bdr); border-radius: var(--radius-lg); padding: 1.25rem; margin-bottom: 1rem; }
.danger-hed { font-size: 14px; font-weight: 500; color: var(--err-text); margin-bottom: 6px; }
.danger-desc { font-size: 13px; color: var(--err-text); opacity: .8; margin-bottom: 1rem; line-height: 1.6; }
.danger-confirm-row { display: flex; gap: 8px; align-items: center; }
.danger-confirm-row input { flex: 1; padding: 0 10px; height: 34px; font-size: 13px; border: 0.5px solid var(--err-bdr); border-radius: var(--radius); background: var(--bg); color: var(--text); outline: none; font-family: var(--mono); }
.danger-hint { font-size: 11px; color: var(--err-text); opacity: .65; margin-top: 6px; }

.cs-card { background: var(--bg-2); border: 0.5px solid var(--border); border-radius: var(--radius-lg); padding: 1.5rem; margin-bottom: 1rem; text-align: center; }
.cs-badge { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; padding: 3px 10px; border-radius: 20px; background: var(--amber-dim); color: var(--amber); border: 0.5px solid var(--warn-bdr); margin-bottom: .875rem; }
.cs-title { font-size: 16px; font-weight: 500; margin-bottom: 6px; }
.cs-desc { font-size: 13px; color: var(--text-2); line-height: 1.65; margin-bottom: 1.25rem; max-width: 420px; margin-left: auto; margin-right: auto; }
.cs-features { text-align: left; display: flex; flex-direction: column; gap: 6px; margin-bottom: 1.25rem; }
.cs-feature { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--text-2); padding: 8px 12px; background: var(--bg-3); border: 0.5px solid var(--border); border-radius: var(--radius); line-height: 1.5; }
.cs-feature i { color: var(--amber); flex-shrink: 0; margin-top: 1px; font-size: 15px; }
.cs-actions { display: flex; gap: 8px; justify-content: center; }

.pipeline-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 0.5px solid var(--border); font-size: 13px; }
.pipeline-row:last-child { border-bottom: none; }
.pipeline-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.pipeline-dot.healthy { background: var(--green); }
.pipeline-dot.pending { background: var(--amber); }
.pipeline-name { flex: 1; }
.pipeline-date { color: var(--text-3); font-size: 12px; }

.data-action { display: flex; align-items: center; gap: 10px; padding: .75rem 1rem; background: var(--bg-3); border: 0.5px solid var(--border); border-radius: var(--radius); cursor: pointer; font-size: 13px; color: var(--text-2); transition: all .12s; width: 100%; text-align: left; margin-bottom: .5rem; }
.data-action:last-child { margin-bottom: 0; }
.data-action:hover { background: var(--bg-2); color: var(--text); border-color: var(--border-2); }
.data-action i { color: var(--amber); font-size: 16px; flex-shrink: 0; }
.data-action-text { flex: 1; }
.data-action-sub { font-size: 11px; color: var(--text-3); margin-top: 1px; }

.role-card { background: var(--bg-3); border: 0.5px solid var(--border); border-radius: var(--radius); padding: .875rem 1rem; margin-bottom: .625rem; }
.role-card-hed { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.role-name { font-size: 13px; font-weight: 500; }
.role-badge { font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 20px; letter-spacing: .03em; }
.role-desc { font-size: 12px; color: var(--text-2); line-height: 1.55; }

/* Leadership config */
.lc-layout { display: grid; grid-template-columns: 1fr 280px; gap: 1.25rem; align-items: start; }
.lc-editor { display: flex; flex-direction: column; gap: .75rem; }
.lc-preview { background: var(--bg-2); border: 0.5px solid var(--border); border-radius: var(--radius-lg); padding: 1rem; position: sticky; top: 1rem; }
.lc-preview-label { font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin-bottom: .875rem; }
.lc-preview-sub { font-size: 11px; color: var(--text-3); margin-bottom: .75rem; font-style: italic; }
.cell-card { background: var(--bg-2); border: 0.5px solid var(--border); border-radius: var(--radius-lg); padding: 1rem; }
.cell-name-wrap { margin-bottom: .75rem; }
.cell-name-label { font-size: 10px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); margin-bottom: 4px; display: block; }
.cell-name-input { width: 100%; font-size: 14px; font-weight: 500; background: var(--bg-3); border: 0.5px solid var(--border-2); border-radius: var(--radius); outline: none; color: var(--text); padding: 5px 10px; transition: border-color .15s; }
.cell-name-input:focus { border-color: var(--amber); }
.cell-roles { display: flex; flex-direction: column; gap: 5px; }
.cell-role-row { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.cell-role-rank { color: var(--text-3); font-size: 10px; font-weight: 600; font-family: var(--mono); width: 26px; flex-shrink: 0; background: var(--bg-3); padding: 2px 4px; border-radius: var(--radius-sm); text-align: center; border: 0.5px solid var(--border); }
.cell-role-input { flex: 1; font-size: 12px; background: var(--bg-3); border: 0.5px solid var(--border); border-radius: var(--radius-sm); padding: 4px 8px; outline: none; color: var(--text); transition: border-color .15s; }
.cell-role-input:focus { border-color: var(--amber); }
.cell-role-remove { background: none; border: none; cursor: pointer; color: var(--text-3); font-size: 13px; padding: 2px; transition: color .12s; }
.cell-role-remove:hover { color: var(--err-text); }
.cell-add-btn { background: none; border: none; cursor: pointer; color: var(--text-3); font-size: 11px; padding: 4px 0 0; display: flex; align-items: center; gap: 4px; transition: color .12s; }
.cell-add-btn:hover { color: var(--amber); }
.pv-cell { margin-bottom: .625rem; padding: .75rem; background: var(--bg-3); border: 0.5px solid var(--border); border-radius: var(--radius); }
.pv-cell-name { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--amber); margin-bottom: 5px; }
.pv-role { display: flex; align-items: center; gap: 6px; font-size: 11px; padding: 2px 0; }
.pv-rank { color: var(--text-3); font-family: var(--mono); font-size: 10px; width: 22px; flex-shrink: 0; }
.pv-title { color: var(--text); }
.pv-flat { font-size: 12px; color: var(--text-2); font-style: italic; }

.filter-row-s { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 0.5px solid var(--border); font-size: 13px; }
.filter-row-s:last-child { border-bottom: none; }
.filter-key { color: var(--text-2); }

/* ════════════════════════════════════════════════════════════════════ */
/* WARBENCH B-SYSTEM — added in design session 06/16                      */
/* ════════════════════════════════════════════════════════════════════ */
:root{
  --amber-2:#E4C46A; --green-2:#3FC295; --blue-2:#6FB0EC; --deth-2:#C58BDD; --red-2:#E06557;
  --fs-row:15px; --fs-num:16px; --fs-rank:13px; --fs-tier:11px; --fs-floor:11px; /* raised from 10px for legibility */
  /* DS element palette — FACT TOKENS, minted build 5 (ds-map-build.md MP6),
     FOUNDER-RULED on the live render 07/12/2026 under the Hue Semantics
     rail (no red, no blue; amber/purple avoided): Option B ice/steel
     (wider lightness gap than the palette-test candidates) + sustain
     deliberately shaded off the affirmative --green-2 #3FC295. Four
     elements — three Teams + Maneuver (MP7 parts 1–3: Light Ops was
     never a section; Reserves wear the seat's color). Identical wherever
     Teams render: map + G&TM (DA7, build (a)); Brief inherits next. */
  --team-sustain:#35cdb4; --team-economy:#f6fbff; --team-assault:#d349b4; --team-maneuver:#66727f;
}
.bcard{ position:relative;
  background:linear-gradient(180deg,#161A1F 0%,var(--bg-2) 30%);
  border:0.5px solid var(--border-2); border-radius:10px; overflow:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 24px -12px rgba(0,0,0,0.7), 0 2px 6px -3px rgba(0,0,0,0.5);}
.bcard::before{ content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,var(--amber) 0%,rgba(201,168,76,0.3) 55%,transparent 100%);}
.bcard.accent-green::before{ background:linear-gradient(90deg,var(--green-2),transparent 80%);}
.bcard.accent-blue::before{ background:linear-gradient(90deg,var(--blue-2),transparent 80%);}
.bcard.accent-red::before{ background:linear-gradient(90deg,var(--red-2),transparent 70%);}

.wb-tip-anchor{ cursor:help; }
.wb-tip-dot{ display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--text-3); margin-left:5px; vertical-align:middle; transition:background .15s; }
.wb-tip-anchor:hover .wb-tip-dot{ background:var(--amber); }
#wb-portal-tip{ position:fixed; z-index:9999; display:none; max-width:260px;
  background:var(--bg-4); border:0.5px solid var(--border-2); border-radius:8px; padding:10px 12px;
  font-size:12px; font-weight:400; line-height:1.55; color:var(--text-2); text-transform:none; letter-spacing:0;
  box-shadow:0 8px 28px -8px rgba(0,0,0,0.7); pointer-events:none; }
#wb-portal-tip::after{ content:''; position:absolute; top:100%; left:var(--arrow,50%); transform:translateX(-50%);
  border:5px solid transparent; border-top-color:var(--border-2); }

.wb-expbar{ display:flex; align-items:center; justify-content:center; gap:12px; padding:11px;
  border-top:0.5px solid var(--border); background:rgba(26,30,36,0.5); }
.wb-exp-fwd{ display:inline-flex; align-items:center; gap:7px; font:inherit; font-size:12px; font-weight:600; letter-spacing:.03em;
  padding:7px 16px; border-radius:7px; cursor:pointer; background:var(--amber-dim); border:0.5px solid var(--warn-bdr); color:var(--amber-2); transition:all .15s; }
.wb-exp-fwd:hover{ background:rgba(201,168,76,0.18); }
.wb-exp-fwd i{ font-size:14px; }
.wb-exp-col{ display:inline-flex; align-items:center; gap:6px; font:inherit; font-size:12px; font-weight:500;
  padding:7px 14px; border-radius:7px; cursor:pointer; background:transparent; border:0.5px solid var(--border-2); color:var(--text-3); transition:all .15s; }
.wb-exp-col:hover{ color:var(--text); background:var(--bg-3); }
.wb-exp-readout{ font-size:11px; color:var(--text-3); font-family:var(--mono); }

.wb-chev{ display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
  font-size:9px; font-weight:700; letter-spacing:.02em; height:18px; padding:0 7px 0 5px; color:#1a1408;
  clip-path:polygon(0 0, 86% 0, 100% 50%, 86% 100%, 0 100%); }
.wb-chev.r5{ background:linear-gradient(180deg,var(--amber-2),var(--amber)); }
.wb-chev.r4{ background:linear-gradient(180deg,var(--blue-2),var(--blue)); color:#06203a; }
.wb-chev.r3{ background:linear-gradient(180deg,#5a636f,#454d58); color:#e8eaed; }

.m3-head{ display:flex; align-items:center; padding:8px 18px; background:var(--bg-3); border-bottom:0.5px solid var(--border);
  font-size:var(--fs-floor); font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--text-2); }
.m3-rank{ width:30px; flex-shrink:0; }
.m3-name{ flex:1; min-width:0; }
.m3-col{ width:120px; flex-shrink:0; text-align:right; display:flex; align-items:center; justify-content:flex-end; gap:4px; cursor:pointer; transition:color .12s; }
.m3-col:hover{ color:var(--text-2); }
.m3-col.sorted{ color:var(--amber); }
.m3-total{ width:128px; flex-shrink:0; text-align:right; display:flex; align-items:center; justify-content:flex-end; gap:4px; cursor:pointer; }
.m3-total.sorted{ color:var(--amber); }
.m3-row{ display:flex; align-items:center; padding:9px 18px; font-size:var(--fs-row); cursor:pointer; }
.m3-row + .m3-row{ border-top:0.5px solid rgba(42,47,56,0.5); }
.m3-row:hover{ background:var(--bg-3); }
.m3-r-rank{ width:30px; flex-shrink:0; font-size:var(--fs-rank); color:var(--text-2); font-family:var(--mono); text-align:right; padding-right:8px; }
.m3-r-name{ flex:1; min-width:0; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:flex; align-items:center; gap:6px; }
.m3-v{ width:120px; flex-shrink:0; text-align:right; font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:var(--fs-num); color:var(--text-3); }
.m3-v.active{ color:var(--text); }
.m3-vt{ width:128px; flex-shrink:0; text-align:right; font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:var(--fs-num); color:var(--text-2); }
.m3-vt.active{ color:var(--amber-2); }

.as-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-bottom:24px; }
.as-card{ position:relative; padding:16px 18px; }
.as-label{ display:flex; align-items:center; gap:7px; font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--text-2); margin-bottom:10px; }
.as-label i{ font-size:14px; }
.as-cg .as-label i{ color:var(--amber); } .as-cap .as-label i{ color:var(--blue); } .as-kills .as-label i{ color:var(--green); }
.as-value{ font-size:25px; font-weight:700; font-family:var(--mono); line-height:1; }
.as-cg .as-value{ color:var(--amber-2); } .as-cap .as-value{ color:var(--blue-2); } .as-kills .as-value{ color:var(--green-2); }
.as-vlabel{ font-size:10px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--text-2); margin-top:5px; }
.as-week{ margin-top:13px; padding-top:12px; border-top:0.5px solid var(--border); display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.as-wk-val{ font-size:15px; font-weight:600; font-family:var(--mono); color:var(--text); }
.as-wk-lbl{ font-size:10px; letter-spacing:.05em; text-transform:uppercase; color:var(--text-2); }
.as-delta{ display:inline-flex; align-items:center; gap:3px; font-size:12px; font-weight:700; font-family:var(--mono); padding:3px 8px; border-radius:20px; white-space:nowrap; }
.as-delta.up{ color:var(--green-2); background:var(--green-bg); border:0.5px solid var(--green-bdr); }
.as-delta.down{ color:var(--red-2); background:var(--err-bg); border:0.5px solid var(--err-bdr); }
.as-since{ font-size:10px; color:var(--text-2); margin-top:7px; font-style:italic; display:flex; align-items:center; gap:5px; }
.as-cov-track{ flex:1; height:3px; background:var(--bg-3); border-radius:2px; overflow:hidden; max-width:90px; }
.as-cov-fill{ height:100%; border-radius:2px; }
.as-cg .as-cov-fill{ background:var(--amber); } .as-cap .as-cov-fill{ background:var(--blue); } .as-kills .as-cov-fill{ background:var(--green); }

.wb-filter{ display:flex; align-items:center; gap:10px; margin-bottom:20px; }
.wb-filter-box{ flex:1; max-width:340px; display:flex; align-items:center; gap:8px; background:var(--bg-2); border:0.5px solid var(--border-2); border-radius:8px; padding:8px 12px; transition:border-color .15s; }
.wb-filter-box:focus-within{ border-color:var(--amber); }
.wb-filter-box i{ color:var(--text-3); font-size:16px; }
.wb-filter-box input{ flex:1; background:none; border:none; outline:none; color:var(--text); font:inherit; font-size:14px; }
.wb-filter-box input::placeholder{ color:var(--text-3); }
.wb-filter-scope{ font-size:11px; color:var(--text-3); font-style:italic; }

.numfmt-seg{ display:inline-flex; background:var(--bg-3); border:0.5px solid var(--border-2); border-radius:7px; padding:2px; gap:2px; }
.numfmt-seg button{ font:inherit; font-size:12px; font-weight:600; padding:5px 14px; border:none; border-radius:5px; cursor:pointer; background:transparent; color:var(--text-3); transition:all .15s; }
.numfmt-seg button.active{ background:var(--amber-dim); color:var(--amber); }

.ov-health{ position:relative; display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:center; padding:20px 22px; margin-bottom:6px; }
@media(max-width:680px){ .ov-health{ grid-template-columns:1fr; } }
.ov-dial{ display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:120px; border-right:0.5px solid var(--border); padding-right:22px; }
@media(max-width:680px){ .ov-dial{ border-right:none; border-bottom:0.5px solid var(--border); padding-right:0; padding-bottom:16px; } }
.ov-dial-state{ font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin-bottom:4px; }
.ov-dial-num{ font-size:34px; font-weight:700; font-family:var(--mono); line-height:1; color:var(--text); }
.ov-dial-num small{ font-size:16px; color:var(--text-3); }
.ov-dial-sub{ font-size:10px; color:var(--text-3); letter-spacing:.06em; text-transform:uppercase; margin-top:6px; }
.ov-vitals{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
@media(max-width:520px){ .ov-vitals{ grid-template-columns:1fr; } }
.ov-vital-label{ font-size:10px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--text-2); margin-bottom:6px; display:flex; align-items:center; gap:5px; }
.ov-vital-val{ font-size:21px; font-weight:700; font-family:var(--mono); color:var(--text); line-height:1; }
.ov-vital-val small{ font-size:13px; color:var(--text-2); font-weight:400; }
.ov-vital-trend{ font-size:11px; margin-top:6px; display:inline-flex; align-items:center; gap:3px; font-family:var(--mono); font-weight:600; }
.ov-vital-trend.up{ color:var(--green-2); } .ov-vital-trend.flat{ color:var(--text-3); } .ov-vital-trend.down{ color:var(--red-2); }
.ov-attn-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media(max-width:680px){ .ov-attn-grid{ grid-template-columns:1fr; } }
.ov-attn-sub{ padding:7px 16px 3px; font-size:10.5px; color:var(--text-2); font-family:var(--mono); }
.ov-attn-head{ display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:0.5px solid var(--border); }
.ov-attn-title{ display:flex; align-items:center; gap:8px; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text); }
.ov-attn-title i{ font-size:15px; }
.ov-attn-count{ font-size:11px; font-weight:700; font-family:var(--mono); padding:2px 9px; border-radius:20px; }
.ov-attn-count.zero{ background:var(--green-bg); color:var(--green-2); border:0.5px solid var(--green-bdr); }
.ov-attn-count.some{ background:var(--amber-dim); color:var(--amber-2); border:0.5px solid var(--warn-bdr); }
.ov-attn-count.pend{ background:var(--bg-3); color:var(--text-3); border:0.5px solid var(--border); }
.ov-attn-row{ display:flex; align-items:center; gap:10px; padding:8px 16px; font-size:14px; }
.ov-attn-row + .ov-attn-row{ border-top:0.5px solid rgba(42,47,56,0.45); }
.ov-attn-row .nm{ flex:1; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ov-attn-row .detail{ font-size:12px; font-family:var(--mono); color:var(--amber-2); }
.ov-attn-empty{ display:flex; align-items:center; gap:9px; padding:16px; font-size:13px; color:var(--green-2); }
.ov-attn-empty i{ font-size:18px; }
.ov-attn-pending{ display:flex; align-items:flex-start; gap:10px; padding:14px 16px; font-size:12px; color:var(--text-2); line-height:1.6; }
.ov-attn-pending i{ font-size:15px; color:var(--amber); flex-shrink:0; margin-top:1px; }
.ov-attn-foot{ padding:9px 16px; border-top:0.5px solid var(--border); background:rgba(26,30,36,0.4); font-size:11px; }
.ov-attn-foot a{ color:var(--amber-2); text-decoration:none; cursor:pointer; display:inline-flex; align-items:center; gap:4px; }
.ov-attn-foot a:hover{ text-decoration:underline; }
.ov-strip{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; padding:13px 18px; margin-top:6px; background:var(--bg-2); border:0.5px solid var(--border); border-radius:10px; }
.ov-strip-item{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text-2); }
.ov-strip-item i{ font-size:15px; color:var(--text-3); }
.ov-strip-item b{ color:var(--text); font-weight:600; }
.ov-strip-sep{ width:0.5px; height:16px; background:var(--border-2); }
.ov-strip-dot{ width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.ov-strip-dot.ok{ background:var(--green-2); } .ov-strip-dot.next{ background:var(--amber); }
.ov-strip-cta{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--amber-2); cursor:pointer; }

.cov-gate{ display:flex; align-items:center; gap:10px; padding:11px 14px; border-radius:9px; margin-bottom:14px; font-size:12px; }
.cov-gate i{ font-size:17px; flex-shrink:0; }
.cov-gate .g-main{ font-weight:700; } .cov-gate .g-sub{ font-size:11px; margin-top:1px; opacity:.8; }
.cov-gate.g1{ background:var(--green-bg); border:0.5px solid var(--green-bdr); color:var(--green-2); }
.cov-gate.g2{ background:var(--amber-dim); border:0.5px solid var(--warn-bdr); color:var(--amber-2); }
.cov-gate.g3{ background:var(--err-bg); border:1px solid var(--err-bdr); color:var(--red-2); box-shadow:0 0 0 1px rgba(192,57,43,0.15), 0 8px 24px -12px rgba(192,57,43,0.4); }
.ov-health.dim{ filter:saturate(.35) brightness(.82); }

/* ════════════════════════════════════════════════════════════════════ */
/* OVERVIEW HEALTH READ — Hybrid crown + levers, coverage as gate         */
/* (design 06/28 · DESIGN_RATIONALE → "Overview Health Read")             */
/* ════════════════════════════════════════════════════════════════════ */

/* Card-level trajectory anchor (the ONE "since [date]" statement). */
.ov-traj-anchor{ display:flex; align-items:center; gap:7px; margin:2px 0 12px; font-size:10.5px; color:var(--text-3); font-family:var(--mono); }
.ov-traj-anchor .lg{ display:inline-flex; align-items:center; }
.ov-traj-anchor svg{ display:block; }

/* Coverage ribbon — the gate's home (confident / provisional / unreliable). */
.cov-ribbon{ display:flex; align-items:center; gap:11px; padding:11px 15px; border-radius:9px; margin-bottom:14px; font-size:12.5px; border:0.5px solid var(--border); }
.cov-ribbon i.lead{ font-size:18px; flex-shrink:0; }
.cov-ribbon .r-main{ font-weight:600; }
.cov-ribbon .r-sub{ color:var(--text-2); font-size:11.5px; margin-top:1px; }
.cov-ribbon.g1{ background:var(--green-bg); border-color:var(--green-bdr); } .cov-ribbon.g1 i.lead{ color:var(--green-2); }
.cov-ribbon.g2{ background:var(--amber-dim); border-color:var(--warn-bdr); } .cov-ribbon.g2 i.lead{ color:var(--amber-2); }
.cov-ribbon.g3{ background:var(--err-bg); border-color:var(--err-bdr); } .cov-ribbon.g3 i.lead{ color:var(--red-2); }

/* The health card becomes a vertical composite (crown over levers). */
.ov-health.hybrid{ display:block; grid-template-columns:none; padding:0; gap:0; align-items:stretch; margin-bottom:6px; }

.ov-hlabel{ font-size:10px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--text-2); display:flex; align-items:center; gap:6px; }
.ov-hlabel.center{ justify-content:center; }
.ov-hlabel i{ font-size:13px; color:var(--text-3); }
.ov-ic{ font-size:10px; color:var(--text-3); margin-left:2px; }
.ov-tip{ cursor:pointer; }

/* Crown — arc band-gauge + verdict word. */
.ov-crown{ display:flex; flex-direction:column; align-items:center; gap:5px; padding:16px 22px 18px; border-bottom:0.5px solid var(--border); }
.ov-gauge{ width:188px; height:100px; }
.ov-gauge svg{ display:block; width:188px; height:100px; }
.ov-gauge.locked .bands path{ filter:grayscale(1); opacity:.38; }
.ov-crown-readout{ text-align:center; margin-top:1px; }
.ov-crown-word{ font-size:19px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; display:inline-flex; align-items:center; gap:7px; }
.ov-crown-sub{ font-size:12px; color:var(--text-3); font-family:var(--mono); margin-top:6px; }
.ov-crown-sub b{ color:var(--text); font-weight:700; }
.ov-crown-traj{ margin-top:8px; }

/* Levers — two diagnostic columns beneath the crown. */
.ov-levers{ display:grid; grid-template-columns:1fr 1fr; }
.ov-lever{ padding:18px 22px; }
.ov-lever.pop{ border-right:0.5px solid var(--border); }
.ov-lever-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:13px; min-height:22px; }
.ov-lever-big{ font-family:var(--mono); font-weight:700; font-size:33px; line-height:1; display:flex; align-items:center; gap:8px; }
.ov-lever-big small{ font-size:16px; color:var(--text-2); font-weight:600; }
.ov-lever-cap{ font-size:10px; color:var(--text-3); letter-spacing:.05em; text-transform:uppercase; margin-top:8px; }
.ov-fillbar{ height:5px; background:var(--bg-4); border-radius:3px; overflow:hidden; margin-top:11px; }
.ov-fillbar > span{ display:block; height:100%; background:linear-gradient(90deg,var(--green),var(--green-2)); }
.ov-lever-sub{ font-size:11.5px; color:var(--text-3); margin-top:9px; }

/* Verdict / flag chip (e.g. "Thinning"; or the T3 lock pill). */
.ov-verdict{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:3px 9px; border-radius:20px; border:0.5px solid; display:inline-flex; align-items:center; gap:5px; }

/* Trend token — quiet contained chip; color = good/bad, drawn-SVG triangle = direction. */
.ov-ttok{ display:inline-flex; align-items:center; gap:3px; padding:2px 6px; border-radius:5px; font-family:var(--mono); font-weight:700; font-size:11.5px; line-height:1; vertical-align:middle; }
.ov-ttok svg{ display:block; }

/* Contribution lock (T3) — mask + "Can't assess"; Population never locks. */
.ov-contrib-body{ position:relative; }
.ov-lever.contrib.locked .ov-contrib-inner{ opacity:.14; }
.ov-lockmask{ display:none; position:absolute; inset:-6px -6px -10px -6px; background:rgba(13,15,18,0.78); border-radius:8px; align-items:center; justify-content:center; text-align:center; padding:14px; }
.ov-lever.contrib.locked .ov-lockmask{ display:flex; }
.ov-lockmask .ov-lm{ font-size:12px; color:var(--red-2); line-height:1.5; max-width:240px; }
.ov-lockmask .ov-lm i{ display:block; font-size:20px; margin-bottom:6px; }

/* Mobile tap-to-expand definition panel (attached under the health card). */
.ov-detail{ background:var(--bg-2); border:0.5px solid var(--border-2); border-top:0; border-radius:0 0 var(--radius-lg) var(--radius-lg); margin:-7px 0 12px; padding:13px 16px; }
.ov-detail-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:5px; }
.ov-detail-title{ font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--amber-2); }
.ov-detail-x{ cursor:pointer; color:var(--text-3); font-size:18px; line-height:1; padding:0 2px; }
.ov-detail-body{ font-size:12px; color:var(--text-2); line-height:1.55; }

/* Vitals — Participation / Donations met (denominators fixed to N). */
.ov-vitals-card{ display:grid; grid-template-columns:1fr 1fr; margin-bottom:6px; }
.ov-vital{ padding:15px 22px; border-right:0.5px solid var(--border); }
.ov-vital:last-child{ border-right:0; }
.ov-vital-base{ font-size:10px; color:var(--text-3); font-family:var(--mono); margin-left:4px; }
.ov-vital-note{ font-size:11px; margin-top:7px; color:var(--text-3); display:inline-flex; align-items:center; gap:6px; }
.ov-vcaveat{ grid-column:1 / -1; display:flex; align-items:flex-start; gap:7px; font-size:11px; color:var(--amber-2); padding:10px 22px; border-top:0.5px solid var(--border); background:rgba(201,168,76,0.06); line-height:1.5; }
.ov-vcaveat i{ flex-shrink:0; margin-top:1px; font-size:13px; }

@media(max-width:680px){
  .ov-levers{ grid-template-columns:1fr; }
  .ov-lever.pop{ border-right:0; border-bottom:0.5px solid var(--border); }
  .ov-vitals-card{ grid-template-columns:1fr; }
  .ov-vital{ border-right:0; border-bottom:0.5px solid var(--border); }
  .ov-vital:last-child{ border-bottom:0; }
  .ov-crown{ padding:14px; }
}

@media(max-width:760px){ .stat-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; } .lb-grid{ grid-template-columns:1fr !important; } }

/* ── ROSTER B-SYSTEM (design 06/16) ── */
.rb-card{ position:relative; background:linear-gradient(180deg,#161A1F 0%,var(--bg-2) 14%);
  border:0.5px solid var(--border-2); border-radius:10px; overflow:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 24px -12px rgba(0,0,0,0.7); }
.rb-card::before{ content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,var(--amber) 0%,rgba(201,168,76,0.3) 55%,transparent 100%); }
.rb-hdr{ display:flex; align-items:center; padding:9px 16px; background:var(--bg-3); border-bottom:0.5px solid var(--border); gap:0; }
.rb-row{ display:flex; align-items:center; padding:9px 16px; gap:0; font-size:var(--fs-row); }
.rb-row + .rb-row{ border-top:0.5px solid rgba(42,47,56,0.45); }
.rb-row:hover{ background:var(--bg-3); }
.rb-sep{ width:0.5px; align-self:stretch; background:var(--border); margin:0 10px; flex-shrink:0; transition:background .15s, box-shadow .15s, width .15s; }
.rb-sep.sharp{ width:1px; background:var(--warn-bdr); box-shadow:0 0 6px rgba(201,168,76,0.25); }
.rbc-name{ flex:1; min-width:120px; max-width:280px; display:flex; align-items:center; gap:7px; overflow:hidden; }
.rbc-name .nm{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text); }
.rbc-tier{ width:88px; flex-shrink:0; }
.rbc-power{ width:64px; flex-shrink:0; text-align:right; font-family:var(--mono); font-size:var(--fs-rank); color:var(--text-2); }
.rbc-thp{ width:96px; flex-shrink:0; text-align:right; font-family:var(--mono); font-size:var(--fs-rank); color:var(--text-2); }
.rbc-thpr{ width:56px; flex-shrink:0; text-align:right; font-family:var(--mono); font-size:var(--fs-rank); color:var(--text-2); }
.rbc-wscore{ width:104px; flex-shrink:0; text-align:right; font-family:var(--mono); font-size:var(--fs-num); color:var(--text-2); }
.rbc-don{ width:90px; flex-shrink:0; text-align:right; font-family:var(--mono); font-size:var(--fs-rank); color:var(--text-2); }
/* sorted-column contrast lift — the .m3-v/.m3-v.active pattern; .low stays below so the floor breach always wins */
.rbc-power.active,.rbc-thp.active,.rbc-thpr.active,.rbc-wscore.active,.rbc-don.active{ color:var(--text); }
.rbc-don.low{ color:var(--red-2); }
.rbc-notes{ width:96px; flex-shrink:0; font-size:var(--fs-floor); color:var(--text-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding-left:10px; }
.rb-hdr-cell{ font-size:var(--fs-floor); font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--text-2); cursor:pointer; user-select:none; display:flex; align-items:center; gap:3px; justify-content:inherit; transition:color .15s; }
.rb-hdr-cell.right{ justify-content:flex-end; }
.rb-hdr-cell:hover{ color:var(--text-2); }
.rb-hdr-cell.sorted{ color:var(--amber); }
.rb-flag{ font-size:9px; font-weight:700; padding:1px 5px; border-radius:3px; flex-shrink:0; }
.rb-flag.low{ background:var(--err-bg); color:var(--red-2); border:0.5px solid var(--err-bdr); }


/* ── OVERVIEW CONTENT WIDTH CAP ── */
.ov-content { max-width: 1100px; }

/* ── TIER DISTRIBUTION BAR ── */
.ov-tier-dist { margin-top: 16px; padding-top: 14px; border-top: 0.5px solid var(--border); }
.ov-tier-dist-label { font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text-2); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.ov-tier-dist-label i { font-size: 12px; }
.ov-tier-bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; gap: 2px; }
.ov-tier-seg { height: 100%; border-radius: 2px; min-width: 3px; transition: opacity .15s; }
.ov-tier-seg:hover { opacity: .8; }
.ov-tier-seg.vanguard  { background: var(--amber); }
.ov-tier-seg.committed { background: var(--green); }
.ov-tier-seg.active    { background: var(--blue); }
.ov-tier-seg.casual    { background: var(--deth); }
.ov-tier-seg.unobserved{ background: var(--border-2); }
.ov-tier-counts { display: flex; gap: 2px; margin-top: 6px; }
.ov-tier-count { display: flex; align-items: center; gap: 4px; font-size: 11px; font-family: var(--mono); white-space: nowrap; }
.ov-tier-count-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.ov-tier-count-dot.vanguard  { background: var(--amber); }
.ov-tier-count-dot.committed { background: var(--green); }
.ov-tier-count-dot.active    { background: var(--blue); }
.ov-tier-count-dot.casual    { background: var(--deth); }
.ov-tier-count-dot.unobserved{ background: var(--border-2); }
.ov-tier-count-val { color: var(--text); font-weight: 600; }
.ov-tier-count-name { color: var(--text-2); }
.ov-tier-count-sep { color: var(--border-2); margin: 0 4px; }

/* ── NEXT ACTION STRIP ── */
.ov-next-action-pending { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text-2); font-style: italic; }
.ov-next-action-pending i { font-size: 14px; color: var(--text-3); flex-shrink: 0; }


/* ══════════════════════════════════════════════════════════════════════════ */
/* MOBILE RESPONSIVE — Layer 1 (shell) + Layer 2 (content)  06/18/2026      */
/* All rules scoped to max-width:480px unless noted.                         */
/* Desktop experience (>480px) is completely unaffected.                     */
/* ══════════════════════════════════════════════════════════════════════════ */

/* ── SIDEBAR BACKDROP (structure only — display toggled by JS) ── */
#sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  top: var(--topbar-h);
  background: rgba(0,0,0,0.55);
  z-index: 290;
}
#sidebar-backdrop.open { display: block; }

/* ── TOPBAR WEEK SELECTOR (mobile-only element, hidden on desktop) ── */
.topbar-week-select {
  display: none; /* shown only inside @media 480px block below */
}

@media (max-width: 480px) {

  /* ── 1. SCROLL MODEL ── */
  /* Dissolve the fixed-height flex prison. Topbar stays fixed.            */
  /* Content scrolls at the browser level — no nested scroll traps.        */
  /* Build (b), register #28: with the page scrolling at browser level,    */
  /* pull-to-refresh is live on every surface — contain it at the root     */
  /* (Chrome consults html; body is the ≤480px scroll container).          */
  html, body {
    overscroll-behavior-y: contain;
  }
  body {
    overflow: auto;
  }
  .layout {
    display: block;
    height: auto;
    overflow: visible;
  }
  .content {
    overflow: visible;
  }

  /* ── 2. TOPBAR COLLAPSE ── */
  /* Hide: alliance name, season ctx, switcher caret, user pill            */
  /* Settings btn: icon only (label text hidden via font-size:0 on span)   */
  .alliance-name,
  .alliance-ctx,
  .switcher-caret,
  .user-pill,
  .topbar-divider:nth-child(4) { /* divider between wordmark and switcher */
    display: none;
  }
  .settings-btn .settings-btn-label {
    display: none;
  }
  .settings-btn {
    padding: 5px 8px;
    gap: 0;
  }

  /* ── TOPBAR WEEK SELECTOR (mobile) ── */
  .topbar-week-select {
    display: flex;
    align-items: center;
  }
  #week-select-topbar {
    background: transparent;
    border: 0.5px solid var(--border-2);
    border-radius: var(--radius-sm);
    color: var(--amber);
    font-size: 12px;
    font-weight: 700;
    padding: 4px 6px;
    cursor: pointer;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    /* short labels: W3F / W3I — no date string needed */
  }
  #week-select-topbar:focus { border-color: var(--amber); }

  /* ── 3. SIDEBAR — FIXED OVERLAY DRAWER ── */
  .sidebar {
    position: fixed;
    top: var(--topbar-h);
    left: 0;
    height: calc(100vh - var(--topbar-h));
    width: var(--sidebar-w);
    z-index: 300;
    transform: translateX(-100%);
    transition: transform .25s ease;
    opacity: 1;          /* override desktop collapsed opacity rule */
    pointer-events: auto;
  }
  /* Open state — JS adds .mobile-open class on mobile */
  .sidebar.mobile-open {
    transform: translateX(0);
  }
  /* Collapsed class on mobile means drawer is closed */
  .sidebar.collapsed {
    width: var(--sidebar-w); /* override desktop width:0 collapse */
    opacity: 1;
    transform: translateX(-100%);
  }

  /* ── 4. TAB NAV — HORIZONTAL SCROLL ── */
  .dash-tabnav {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;        /* Firefox */
    -ms-overflow-style: none;     /* IE/Edge */
    padding: 0;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .dash-tabnav::-webkit-scrollbar { display: none; } /* Chrome/Safari */
  .dash-tab {
    flex-shrink: 0;
    padding: 10px 12px;
  }

  /* ── 5. CONTENT PADDING ── */
  .dash-content {
    padding: 16px;
  }

  /* ── 6. WEEK BAR — HIDDEN (topbar selector handles it on mobile) ── */
  .dash-week-bar {
    display: none;
  }

  /* ── 7. OVERVIEW STRIPS — TIGHTER SPACING ── */
  .ov-strip {
    gap: 10px;
    padding: 10px 12px;
  }
  /* CTA ("Full breakdown in Season →") wraps to own line */
  .ov-strip-cta {
    margin-left: 0;
    width: 100%;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 0.5px solid var(--border);
  }

  /* ── 8. LEADERBOARDS GRID — 1 COL ── */
  .lb-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── 9. SEASON STATE STRIP — 1 COL ── */
  .as-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── 10. SETTINGS OVERLAY — STACK VERTICALLY ── */
  .settings-overlay {
    flex-direction: column;
  }
  .settings-nav {
    width: 100%;
    border-right: none;
    border-bottom: 0.5px solid var(--border);
    /* Allow horizontal scroll if needed, but labels are short */
    overflow-x: auto;
    overflow-y: visible;
    padding: .25rem 0;
    /* Show nav items in a horizontal row on mobile */
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .settings-nav::-webkit-scrollbar { display: none; }
  .settings-group {
    display: none; /* group labels take too much space in horizontal nav */
  }
  .settings-nav .nav-item {
    flex-shrink: 0;
    border-left: none;
    border-bottom: 2px solid transparent;
    padding: 8px 12px;
    white-space: nowrap;
    font-size: 12px;
  }
  .settings-nav .nav-item.active {
    border-left: none;
    border-bottom-color: var(--amber);
    background: var(--amber-dim);
  }
  .settings-body {
    flex: 1;
    padding: 1.25rem 1rem;
    overflow-y: auto;
  }
  .settings-top-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  /* Leadership config preview panel — stack on mobile */
  .lc-layout {
    grid-template-columns: 1fr;
  }
  .lc-preview {
    position: static; /* un-stick the preview panel */
  }

} /* end @media 480px */

/* ══════════════════════════════════════════════════════════════════════════ */
/* MOBILE FIXES 1 — post-deploy corrections  06/18/2026                      */
/* ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {

  /* ── FIX 1: HEALTH CARD DIAL — LEFT ALIGN ON SINGLE COLUMN ── */
  /* When .ov-health collapses to 1-col grid, the dial flex container        */
  /* was centering itself (justify-content:center) across the full card      */
  /* width, producing the centred HEALTHY/99/100 with large blank flanks.    */
  /* Left-align to match the vitals below it.                                */
  .ov-health {
    align-items: stretch; /* let both columns fill their grid cell */
  }
  .ov-dial {
    align-items: flex-start;  /* left-align dial content */
    justify-content: flex-start;
    text-align: left;
    min-width: unset;
    padding-right: 0;
    /* border-bottom already set by existing 680px rule */
  }
  .ov-dial-num {
    text-align: left;
  }
  .ov-dial-state {
    text-align: left;
  }
  .ov-dial-sub {
    text-align: left;
  }

  /* ── FIX 2 (superseded 07/03/2026): SEASON TABLES ── */
  /* The horizontal-scroll workaround is replaced by the real mobile Season   */
  /* view (Option B — alliance strip + single-member lookup, #season-mobile-  */
  /* result). Desktop's two ranked tables are hidden here, not scrolled.      */
  #tab-season > .bcard {
    display: none;
  }

  /* ── FIX 3 (superseded 07/03/2026): ROSTER TABLE ── */
  /* The horizontal-scroll workaround is replaced by the real mobile Roster   */
  /* view (Option A — compact card list, .rb-mobile / #roster-mobile).        */
  .rb-card {
    display: none;
  }

} /* end @media 480px fixes */

/* ══════════════════════════════════════════════════════════════════════════ */
/* MOBILE ROSTER (Option A) + MOBILE SEASON (Option B) + SEASON PACE          */
/* PROJECTION + SEASON MEDIAN-DELTA — build 07/03/2026.                       */
/* Visual ref: prototypes/mobile-roster-season-mockups-v3.html.               */
/* Brief: docs/working/briefs/mobile-roster-season-pace-median-brief.md.      */
/* ══════════════════════════════════════════════════════════════════════════ */

/* ── Season Pace Projection — SHARED markup (stateCard() serves both desktop */
/* and mobile), so these rules are base/unscoped, not inside the 480px query. */
.as-proj {
  margin-top: 10px; padding-top: 10px; border-top: 0.5px dashed var(--border-2);
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
}
.as-proj-lbl { font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-2); }
.as-proj-val { font-size: 14px; font-weight: 600; font-family: var(--mono); color: var(--text); }
.as-caveat { font-size: 10.5px; color: var(--text-2); font-style: italic; margin-top: 6px; line-height: 1.45; }

/* ── Season median-delta annotation — SHARED (mobile lookup card + desktop     */
/* Season table expand-on-click), so base/unscoped like .as-proj above.        */
.vsmed { font-size: 10px; font-weight: 700; margin-left: 6px; }
.vsmed.hi { color: var(--wt-lift); }
.vsmed.mid { color: var(--text-3); }
.vsmed.lo { color: var(--wt-drag); }
.vsmed.nospread { color: var(--text-2); font-weight: 600; font-style: italic; }

/* ── Generic mobile-only visibility helper ── */
.mobile-only { display: none; }
.strip-collapse { display: none; }

@media (max-width: 480px) {

  .mobile-only { display: block; }

  /* ── ROSTER — Option A compact card list ── */
  .roster-filters .search-input { flex-basis: 100%; max-width: none; }

  .rcard {
    position: relative; background: linear-gradient(180deg,#161A1F 0%,var(--bg-2) 30%);
    border: 0.5px solid var(--border-2); border-radius: 10px; margin-bottom: 8px; overflow: hidden;
  }
  .rcard::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg,var(--amber) 0%,rgba(201,168,76,0.3) 55%,transparent 100%);
  }
  .rcard summary { list-style: none; cursor: pointer; padding: 11px 13px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
  .rcard summary::-webkit-details-marker { display: none; }
  .rcard .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; font-weight: 500; color: var(--text); max-width: 90px; }
  .rcard .spacer { flex: 1; }
  /* .statwrap groups the stat + expand caret so a tight row wraps them as ONE
     unit (never an orphaned caret alone on its own line). */
  .rcard .statwrap { display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0; white-space: nowrap; }
  .rcard .stat { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 14px; color: var(--amber-2); font-weight: 600; }
  .rcard .car { font-size: 11px; color: var(--text-3); transition: transform .15s; margin-left: 2px; }
  .rcard[open] .car { transform: rotate(90deg); }
  .rcard .body { padding: 0 13px 12px; border-top: 0.5px solid rgba(42,47,56,0.5); padding-top: 10px; }
  .rcard .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin-bottom: 10px; }
  .rcard .kv { display: flex; flex-direction: column; gap: 2px; }
  .rcard .kv .k { font-size: 9.5px; color: var(--text-2); text-transform: uppercase; letter-spacing: .05em; }
  .rcard .kv .v { font-family: var(--mono); font-size: 12.5px; color: var(--text-2); }
  .rcard .kv .v.hi { color: var(--text); }
  .rcard .notes { font-size: 11.5px; color: var(--text-2); background: var(--bg-3); border-radius: 6px; padding: 8px 10px; line-height: 1.5; margin-bottom: 8px; }
  .rcard .notes .k { font-size: 9.5px; color: var(--text-2); text-transform: uppercase; letter-spacing: .05em; display: block; margin-bottom: 3px; }
  .rcard .whytier { margin-top: 2px; }

  /* ── SEASON — Option B alliance strip (collapsible) + single-member lookup ── */
  .strip-collapse {
    display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--text-2);
    background: var(--bg-2); border: 0.5px solid var(--border-2); border-radius: 8px; padding: 6px 10px;
    margin-bottom: 10px; cursor: pointer; width: fit-content;
  }
  .strip-collapse i { font-size: 12px; color: var(--text-3); }
  .as-grid.mob-collapsed { display: none; }

  .mresult-empty { font-size: 12px; color: var(--text-2); padding: 14px; text-align: center; }
  .mresult {
    background: linear-gradient(180deg,#161A1F 0%,var(--bg-2) 14%); border: 0.5px solid var(--border-2);
    border-radius: 10px; padding: 13px;
  }
  .mresult .rh { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
  .mresult .rh .nm { font-size: 14px; font-weight: 600; color: var(--text); }
  .mresult .split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .mresult .split > div { min-width: 0; }
  .mresult .splab { font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); margin-bottom: 7px; }
  .mresult .kv { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 4px 0; font-size: 12px; }
  .mresult .kv .k { color: var(--text-2); flex-shrink: 0; }
  .mresult .kv .v { font-family: var(--mono); color: var(--text); text-align: right; min-width: 0; }
  .mresult .kv.tot { border-top: 0.5px solid var(--border); margin-top: 4px; padding-top: 7px; font-weight: 600; }
  .mresult .kv.tot .v { color: var(--amber-2); }

  .med-legend { display: flex; gap: 12px; font-size: 10px; color: var(--text-2); margin-top: 10px; padding-top: 9px; border-top: 0.5px dashed var(--border-2); flex-wrap: wrap; }
  .med-legend span { display: flex; align-items: center; gap: 4px; }
  .med-legend .dot { width: 6px; height: 6px; border-radius: 50%; }
  .med-legend .dot.hi { background: var(--wt-lift); }
  .med-legend .dot.mid { background: var(--text-3); }
  .med-legend .dot.lo { background: var(--wt-drag); }

} /* end mobile Roster/Season 480px */

/* ── RANK CHEVRONS: R2 / R1 — generic tail: Ca22 uses R5–R3 by choice; these render
   for any alliance that uses all five ranks. Not dead code. ── */
.wb-chev.r2    { background: linear-gradient(180deg,#3a424e,#2e3540); color: #8b929e; }
.wb-chev.r1    { background: linear-gradient(180deg,#2e3540,#252b35); color: #6b737e; }

/* ── ANALYTICS TAB ── */
.anl-card { padding: 0; overflow: hidden; }
.anl-card-hd {
  font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--text-2); padding: 13px 16px 11px;
  display: flex; align-items: center; gap: 6px;
  border-bottom: 0.5px solid var(--border);
}
.anl-card-hd i { font-size: 13px; color: var(--amber); }
.anl-part-note {
  font-size: 11px; color: var(--text-3); padding: 7px 16px 6px;
  border-bottom: 0.5px solid var(--border);
}
.anl-note {
  padding: 8px 16px; font-size: 11px; color: var(--text-3);
  border-top: 0.5px solid var(--border); line-height: 1.55;
}
.anl-weight { color: var(--text-3); font-size: 10px; font-weight: 600; }
.anl-muted  { color: var(--text-3); }
.anl-bar-track {
  height: 4px; background: var(--bg-4); border-radius: 2px; overflow: hidden;
  flex: 1; min-width: 36px;
}
.anl-bar-fill { height: 100%; border-radius: 2px; }
/* Leadership Funnel */
.anl-alert {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 16px; border-bottom: 0.5px solid var(--border);
  background: rgba(192,57,43,0.07);
}
.anl-alert.suppressed { background: var(--bg-3); opacity: 0.72; }
.anl-alert-icon { font-size: 13px; color: var(--red-2,var(--red)); flex-shrink: 0; margin-top: 1px; }
.anl-alert.suppressed .anl-alert-icon { color: var(--text-3); }
.anl-alert-body { font-size: 12px; color: var(--text-2); line-height: 1.55; }
.anl-alert-label { font-weight: 600; color: var(--text); }
.anl-alert.suppressed .anl-alert-label { color: var(--text-2); }
.anl-noted { color: var(--text-3); font-weight: 400; font-size: 11px; }
.anl-alert-note { color: var(--text-3); font-style: italic; }
.anl-funnel-table { width: 100%; }
.anl-funnel-hdr, .anl-funnel-row {
  display: grid;
  grid-template-columns: 48px repeat(5, 1fr) 38px;
  padding: 6px 16px; gap: 4px; align-items: center;
}
.anl-funnel-hdr {
  font-size: 10px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--text-3);
  border-bottom: 0.5px solid var(--border);
}
.anl-funnel-row { font-size: 12px; border-bottom: 0.5px solid var(--border); }
.anl-funnel-row:last-child { border-bottom: none; }
.anl-funnel-tier-col { text-align: center; color: var(--text-2); font-variant-numeric: tabular-nums; }
.anl-funnel-total-col { text-align: right; color: var(--text-3); font-size: 11px; }
.anl-funnel-total { color: var(--text-2); font-weight: 600; }
.anl-funnel-bad  { color: var(--red-2,var(--red)); font-weight: 700; }
.anl-funnel-zero { color: var(--text-3); }
/* Analytics layout wrappers (were inline) — enable responsive collapse */
.anl-wrap{ padding:16px 24px 24px; max-width:1100px; }
.anl-2col{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px; }
@media(max-width:680px){
  .anl-wrap{ padding:14px 12px 24px; }              /* tighter side padding on phones */
  .anl-2col{ grid-template-columns:1fr; }           /* Server Standing / Participation Depth stack */
  .anl-funnel-table{ overflow-x:auto; }             /* cross-tab scrolls (7 cols won't fit a phone) */
  .anl-funnel-hdr,.anl-funnel-row{ min-width:360px; }
}
/* Participation depth */
.anl-part-row {
  display: grid; grid-template-columns: 1fr 48px 1fr 30px;
  padding: 8px 16px; gap: 8px; align-items: center;
  border-bottom: 0.5px solid var(--border); font-size: 12px;
}
.anl-part-row:last-of-type { border-bottom: none; }
.anl-part-label  { color: var(--text-2); }
.anl-part-counts { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.anl-part-pct    { color: var(--text-2); font-size: 11px; text-align: right; font-variant-numeric: tabular-nums; }
/* Contribution Concentration */
.anl-conc-row {
  display: grid; grid-template-columns: 1fr 34px 1fr 30px 72px;
  padding: 9px 16px; gap: 8px; align-items: center;
  border-bottom: 0.5px solid var(--border); font-size: 12px;
}
.anl-conc-row:last-of-type { border-bottom: none; }
.anl-conc-label { color: var(--text-2); }
.anl-conc-n     { color: var(--text-3); font-size: 11px; text-align: right; white-space: nowrap; }
.anl-conc-pct   { color: var(--text); font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.anl-conc-sig   { font-size: 11px; font-weight: 600; text-align: right; }
/* THP / Donor bars */
.anl-thp-row {
  display: grid; grid-template-columns: 104px 1fr 30px;
  padding: 8px 16px; gap: 10px; align-items: center;
  border-bottom: 0.5px solid var(--border); font-size: 12px;
}
.anl-thp-row:last-of-type { border-bottom: none; }
.anl-thp-label { color: var(--text-2); font-weight: 600; white-space: nowrap; }
.anl-thp-count { color: var(--text); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
/* Server Standing hero */
.anl-standing-hero { padding: 12px 16px 6px; }
.anl-standing-n {
  font-size: 28px; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.anl-standing-of  { font-size: 16px; color: var(--text-3); font-weight: 400; }
.anl-standing-pct { font-size: 11px; color: var(--text-3); }

/* ════════════════════════════════════════════════════════════════════ */
/* WHY THIS TIER — z-score explainability (L1 tooltip · L2 row · L3 modal)*/
/* Build 06/21/2026 — visual ref prototypes/whytier_mock.html.            */
/* ════════════════════════════════════════════════════════════════════ */
:root{
  /* Drag color is the founder's call (muted red), built as a single       */
  /* swappable token pair — change these two lines to retune drag emphasis. */
  --wt-lift:      var(--green-2);
  --wt-lift-soft: rgba(63,194,149,0.55);
  --wt-drag:      #B5685E;                 /* muted red */
  --wt-drag-soft: rgba(181,104,94,0.50);

  /* Overview trend-token chip backgrounds — quiet, contained tints (color = */
  /* good/bad, triangle = direction). Lighter than the *-soft bar fills above. */
  --ov-trend-up-bg:   rgba(63,194,149,0.13);
  --ov-trend-down-bg: rgba(181,104,94,0.15);

  /* Archetype → color tokens. Color rides on a metric's archetype (see        */
  /* theme.js / WARBENCH_THEME), never on the metric key. Hues are the EXACT    */
  /* ones previously bound to the cg/kills/cap/don/duel dot classes, rehomed    */
  /* onto the archetype so a second game's metrics inherit them by archetype.   */
  --arch-progression:         var(--amber);    /* was .wt-dot.cg    */
  --arch-combat:              var(--green);     /* was .wt-dot.kills */
  --arch-event-position:      var(--blue);      /* was .wt-dot.cap   */
  --arch-logistics:           var(--deth);      /* was .wt-dot.don   */
  --arch-managed-competitive: var(--text-3);    /* was .wt-dot.duel  */
}

/* ── shared metric dots ── */
.wt-dot{ width:7px; height:7px; border-radius:50%; flex-shrink:0; display:inline-block; }
/* Archetype-keyed dot colors — the live path (render sites route through the   */
/* archClass() resolver in app.js).                                             */
.wt-dot.arch-progression{ background:var(--arch-progression); }
.wt-dot.arch-combat{ background:var(--arch-combat); }
.wt-dot.arch-event-position{ background:var(--arch-event-position); }
.wt-dot.arch-logistics{ background:var(--arch-logistics); }
.wt-dot.arch-managed-competitive{ background:var(--arch-managed-competitive); }
/* Neutral fallback for a misconfigured/missing archetype (archClass warns).    */
.wt-dot.arch-unthemed{ background:var(--text-3); }

/* ── not-captured metric rows (Analytics: Concentration + Participation) ── */
.anl-row-nc{ opacity:0.55; }
.anl-nc-note{ color:var(--text-2); font-size:11px; font-style:italic; }

/* ── L1 : tier badge becomes an interactive anchor ── */
.wt-badge{ cursor:pointer; }
.wt-badge:hover{ filter:brightness(1.12); }

/* ── L2 : inline row expansion ── */
.wt-twirl, .wt-twirl-sp{ width:13px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center;
  color:var(--text-3); font-size:11px; transition:transform .15s; }
.rb-row.wt-rowclick{ cursor:pointer; }
.rb-member.wt-open .wt-twirl{ transform:rotate(90deg); color:var(--amber); }
.rb-member + .rb-member{ border-top:0.5px solid rgba(42,47,56,0.45); }

.wt-l2{ border-top:0.5px solid var(--border); background:rgba(13,15,18,0.45); padding:15px 16px 16px; }
.wt-summary{ font-size:12.5px; color:var(--text-2); line-height:1.6; margin-bottom:15px;
  padding-left:11px; border-left:2px solid var(--border-2); }
.wt-summary b{ color:var(--text); font-weight:500; }

.wt-dv{ display:flex; flex-direction:column; gap:0; }
.wt-dv-row{ display:grid; grid-template-columns:130px 1fr 64px; align-items:center; gap:12px; padding:6px 0; }
.wt-dv-row + .wt-dv-row{ border-top:0.5px solid rgba(42,47,56,0.4); }
.wt-dv-metric{ display:flex; align-items:center; gap:7px; font-size:12px; color:var(--text-2); }
.wt-wt{ font-size:10px; font-weight:600; color:var(--text-3); font-family:var(--mono); }
.wt-track{ position:relative; height:18px; }
.wt-axis{ position:absolute; left:50%; top:-2px; bottom:-2px; width:1px; background:var(--border-2); }
.wt-bar{ position:absolute; top:3px; height:12px; border-radius:2px; max-width:50%; }
.wt-bar.lift{ left:50%; background:linear-gradient(90deg,var(--wt-lift-soft),var(--wt-lift)); }
.wt-bar.drag{ right:50%; background:linear-gradient(270deg,var(--wt-drag-soft),var(--wt-drag)); }
.wt-bar.zero{ left:50%; width:0; }
.wt-zeromark{ position:absolute; left:calc(50% + 4px); top:1px; font-size:10px; color:var(--text-3);
  font-style:italic; white-space:nowrap; }
.wt-val{ font-family:var(--mono); font-size:12px; text-align:right; font-variant-numeric:tabular-nums; }
.wt-val.lift{ color:var(--wt-lift); } .wt-val.drag{ color:var(--wt-drag); } .wt-val.zero{ color:var(--text-3); }

.wt-legend{ display:flex; gap:14px; margin-top:11px; font-size:10px; color:var(--text-3); }
.wt-legend span{ display:inline-flex; align-items:center; gap:5px; }
.wt-legend i{ width:8px; height:8px; border-radius:2px; display:inline-block; }
.wt-legend i.l{ background:var(--wt-lift); } .wt-legend i.d{ background:var(--wt-drag); }

.wt-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:13px; padding-top:12px; border-top:0.5px solid var(--border); }
.wt-foot-left{ display:flex; align-items:center; gap:9px; font-size:12px; color:var(--text-2); }
.wt-foot-left .eq{ font-family:var(--mono); color:var(--text-3); }
.wt-foot-comp{ font-family:var(--mono); font-size:17px; font-weight:700; color:var(--amber-2); }
.wt-more{ font-size:11px; font-weight:600; color:var(--amber-2); cursor:pointer; white-space:nowrap; }
.wt-more:hover{ text-decoration:underline; }

/* ── L3 : full modal ── */
.wt-overlay{ position:fixed; inset:0; z-index:500; background:rgba(0,0,0,0.55);
  display:none; align-items:flex-start; justify-content:center; overflow-y:auto; padding:48px 16px; }
.wt-overlay.open{ display:flex; }
.wt-modal{ width:100%; max-width:540px; position:relative;
  background:linear-gradient(180deg,#161A1F 0%,var(--bg-2) 26%);
  border:0.5px solid var(--border-2); border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,0.04) inset, 0 24px 60px -20px rgba(0,0,0,0.85); }
.wt-modal::before{ content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,var(--amber) 0%,rgba(201,168,76,0.3) 55%,transparent 100%); }
.wt-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  padding:16px 18px 14px; border-bottom:0.5px solid var(--border); }
.wt-head-l{ display:flex; flex-direction:column; gap:7px; }
.wt-eyebrow{ font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); }
.wt-name{ font-size:18px; font-weight:600; color:var(--text); display:flex; align-items:center; gap:9px; }
.wt-x{ width:26px; height:26px; border-radius:var(--radius-sm); border:0.5px solid var(--border-2);
  background:transparent; color:var(--text-3); cursor:pointer; font-size:16px; line-height:1;
  display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.wt-x:hover{ background:var(--bg-3); color:var(--text); }

.wt-section{ padding:16px 18px; border-bottom:0.5px solid var(--border); }
.wt-sec-label{ font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-2); margin-bottom:12px; }
.wt-modal .wt-summary{ border-left:none; padding-left:0; font-size:13px; line-height:1.65; margin-bottom:0; }

.wt-table{ width:100%; border-collapse:collapse; font-size:12px; }
.wt-table th{ font-size:10px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:var(--text-3); text-align:right; padding:0 0 8px; }
.wt-table th:first-child{ text-align:left; }
.wt-table td{ padding:7px 0; border-top:0.5px solid rgba(42,47,56,0.5);
  font-family:var(--mono); text-align:right; font-variant-numeric:tabular-nums; color:var(--text-2); }
.wt-table td.metric{ text-align:left; font-family:inherit; color:var(--text-2);
  display:flex; align-items:center; gap:7px; }
.wt-table td.yourval{ color:var(--text); }
.wt-table td.wt-wtcol{ color:var(--text-3); }
.wt-table td.contrib.lift{ color:var(--wt-lift); font-weight:600; }
.wt-table td.contrib.drag{ color:var(--wt-drag); font-weight:600; }
.wt-table td.contrib.zero{ color:var(--text-3); }
.wt-table tr.total td{ border-top:1px solid var(--border-2); padding-top:10px; color:var(--text); font-weight:600; }
.wt-table tr.total td.comp{ color:var(--amber-2); font-size:14px; }

.wt-note{ display:flex; align-items:flex-start; gap:8px; margin-top:12px; padding:9px 11px;
  background:var(--bg-3); border:0.5px solid var(--border); border-radius:var(--radius);
  font-size:11px; color:var(--text-3); line-height:1.55; }
.wt-note b{ color:var(--text-2); font-weight:500; }

.wt-ruler{ position:relative; height:30px; display:flex; border-radius:var(--radius-sm); overflow:hidden;
  border:0.5px solid var(--border); }
.wt-rband{ height:100%; display:flex; align-items:center; justify-content:center;
  font-size:9px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; overflow:hidden; white-space:nowrap; }
.wt-rband.unobserved{ background:var(--bg-3); color:var(--text-3); }
.wt-rband.casual{ background:var(--deth-bg); color:var(--deth-2); }
.wt-rband.active{ background:rgba(55,138,221,0.14); color:var(--blue-2); }
.wt-rband.committed{ background:rgba(29,158,117,0.16); color:var(--green-2); }
.wt-rband.vanguard{ background:rgba(201,168,76,0.16); color:var(--amber-2); }
.wt-rband + .wt-rband{ border-left:0.5px solid var(--border); }
.wt-marker{ position:absolute; top:-5px; bottom:-5px; width:2px; background:var(--text);
  box-shadow:0 0 0 2px var(--bg-2), 0 0 8px rgba(255,255,255,0.4); z-index:2; }
.wt-marker::after{ content:''; position:absolute; top:-6px; left:50%; transform:translateX(-50%);
  border:5px solid transparent; border-top-color:var(--text); }
.wt-scale{ display:flex; justify-content:space-between; margin-top:6px;
  font-size:10px; color:var(--text-3); font-family:var(--mono); }
.wt-gaps{ display:flex; flex-direction:column; gap:5px; margin-top:12px; }
.wt-gap{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text-2); }
.wt-gap .g-arrow{ font-size:11px; width:14px; text-align:center; }
.wt-gap .g-arrow.up{ color:var(--amber-2); } .wt-gap .g-arrow.down{ color:var(--blue-2); }
.wt-gap b{ font-family:var(--mono); color:var(--text); font-weight:600; }

.wt-explain{ padding:13px 18px; background:rgba(13,15,18,0.4); }
.wt-explain-q{ display:flex; align-items:center; gap:7px; font-size:12px; font-weight:500;
  color:var(--text-2); cursor:pointer; user-select:none; }
.wt-explain-q .tw{ color:var(--text-3); font-size:12px; transition:transform .15s; }
.wt-explain.open .wt-explain-q .tw{ transform:rotate(90deg); }
.wt-explain-body{ font-size:12px; color:var(--text-3); line-height:1.65; margin-top:10px; display:none; }
.wt-explain.open .wt-explain-body{ display:block; }
.wt-explain-body b{ color:var(--text-2); font-weight:500; }
.wt-explain-body code{ font-family:var(--mono); font-size:11px; color:var(--text-2);
  background:var(--bg-3); padding:1px 5px; border-radius:3px; }

@media (max-width:480px){
  .wt-overlay{ padding:24px 10px; }
  .wt-dv-row{ grid-template-columns:104px 1fr 56px; gap:8px; }
}

/* ── HISTORICAL PAGE (sidebar-only departed-member record) ───────────────────── */
.hist-container{ max-width:920px; }
.hist-card{ padding:0; margin-bottom:16px; }
.hist-cardhead{ display:flex; align-items:center; gap:8px; padding:14px 16px;
  font-size:13px; font-weight:600; letter-spacing:.03em; color:var(--text);
  border-bottom:0.5px solid var(--border); }
.hist-cardhead i{ color:var(--amber); font-size:15px; }
.hist-empty{ padding:22px 16px; font-size:12px; color:var(--text-3); }

.hist-rows{ display:flex; flex-direction:column; }
.hist-row{ display:flex; align-items:flex-start; gap:14px; padding:12px 16px;
  border-bottom:0.5px solid var(--border); }
.hist-row:last-child{ border-bottom:0; }
.hist-id{ display:flex; align-items:center; gap:7px; width:190px; flex-shrink:0; padding-top:1px; }
.hist-id .nm{ font-size:13px; font-weight:500; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hist-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; }

.hist-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.hist-chip{ display:inline-flex; align-items:baseline; gap:5px; font-family:var(--mono);
  font-size:11px; color:var(--text-2); background:var(--bg-3);
  border:0.5px solid var(--border); border-radius:5px; padding:2px 7px; }
.hist-chip label{ font-family:inherit; font-size:9px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--text-3); }
.hist-chip.nocap{ color:var(--text-3); font-style:italic; background:transparent; border-style:dashed; }

.hist-season{ font-size:11px; color:var(--text-3); font-family:var(--mono); }
.hist-readout{ font-size:12px; color:var(--text-2); margin-top:2px; }
.hist-readout b{ color:var(--text); font-weight:600; }
.hist-z{ font-family:var(--mono); color:var(--amber-2); }

.hist-caveat{ padding:12px 16px; font-size:11px; line-height:1.55; color:var(--text-3);
  border-top:0.5px solid var(--border); background:rgba(26,30,36,0.4); }
.hist-subnote{ padding:0 16px 12px; font-size:11px; line-height:1.5; color:var(--text-3);
  background:rgba(26,30,36,0.4); }

/* Card 2 — earlier departures (collapsed) */
.hist-earlier-head{ display:flex; align-items:center; gap:8px; width:100%;
  font:inherit; font-size:13px; font-weight:600; letter-spacing:.03em; color:var(--text-2);
  background:transparent; border:0; padding:14px 16px; cursor:pointer; text-align:left;
  transition:color .15s; }
.hist-earlier-head:hover{ color:var(--text); }
.hist-earlier-head i{ font-size:14px; color:var(--text-3); }
.hist-count{ margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--text-3);
  background:var(--bg-3); border:0.5px solid var(--border); border-radius:10px; padding:1px 8px; }
.hist-row-plain .hist-id{ width:190px; }
.hist-notes{ font-size:11px; color:var(--text-3); overflow:hidden; text-overflow:ellipsis; }

@media (max-width:480px){
  .hist-row{ flex-direction:column; gap:8px; }
  .hist-id{ width:auto; }
}

/* ══ BUCKET 2 — Tier Drift + Donation Trends (#16) ══════════════════════════
   Ported from prototypes/tier_drift_mock_v2.html + donation_trends_mock_v2.html
   onto live Shell B tokens. Namespaced (.b2card / .bk-* / .dt-*) — no clashes. */
.b2-stack{ display:flex; flex-direction:column; gap:12px; }
.acard{ position:relative; background:linear-gradient(180deg,#161A1F 0%,var(--bg-2) 22%); border:0.5px solid var(--border-2); border-radius:10px; overflow:hidden; box-shadow:0 1px 0 rgba(255,255,255,0.04) inset,0 8px 24px -12px rgba(0,0,0,0.7); }
.acard::before{ content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,var(--amber) 0%,rgba(201,168,76,0.3) 55%,transparent 100%); }
.ac-head{ display:flex; align-items:center; justify-content:space-between; padding:13px 16px 11px; gap:10px; flex-wrap:wrap; }
.ac-title{ display:flex; align-items:center; gap:8px; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text); }
.ac-title i{ font-size:15px; color:var(--amber-2); }
.ac-meta{ display:flex; align-items:center; gap:8px; font-size:10.5px; color:var(--text-3); font-family:var(--mono); flex-wrap:wrap; }
.gate-pill{ display:inline-flex; align-items:center; gap:4px; font-size:9.5px; font-weight:700; letter-spacing:.03em; padding:2px 8px; border-radius:20px; background:var(--green-bg); color:var(--green-2); border:0.5px solid var(--green-bdr); }
.gate-pill i{ font-size:11px; }
.gate-pill.pending{ background:var(--bg-3); color:var(--text-3); border-color:var(--border-2); }
.gate-pill.pending i{ font-size:10px; }
.anchor{ font-size:10.5px; color:var(--text-3); font-family:var(--mono); }
.ac-body{ padding:12px 16px 16px; }
.honesty{ display:flex; align-items:center; gap:6px; padding:8px 16px; border-top:0.5px solid var(--border); background:rgba(26,30,36,0.4); font-size:10.5px; color:var(--text-3); }
.honesty i{ font-size:12px; flex-shrink:0; }
.b2-empty{ display:flex; align-items:flex-start; gap:9px; padding:14px 4px; font-size:12px; color:var(--text-3); line-height:1.6; }
.b2-empty i{ font-size:16px; color:var(--text-3); flex-shrink:0; margin-top:1px; }

.tok{ display:inline-flex; align-items:center; gap:3px; font-family:var(--mono); font-weight:700; font-size:11px; }
.tok svg{ flex-shrink:0; }
.tok.good{ color:var(--wt-lift); } .tok.bad{ color:var(--wt-drag); } .tok.flat{ color:var(--text-3); }

/* Tier Drift — Sankey (Analytics). Ported from prototypes/tier_drift_mock_v1.html (Flow). */
.flow{ width:100%; margin-top:4px; overflow-x:auto; }   /* scrolls on narrow viewports so labels stay legible */
.flow svg{ width:100%; height:auto; display:block; overflow:visible; min-width:640px; }
.flow .flow-rib{ transition:fill-opacity .12s; cursor:pointer; }
.flow .flow-rib.r-adv{ fill:var(--green-2); fill-opacity:.24; }
.flow .flow-rib.r-held{ fill:var(--text-3); fill-opacity:.13; }
.flow .flow-rib.r-drop{ fill:var(--wt-drag); fill-opacity:.26; }
.flow .flow-rib:hover{ fill-opacity:.6; }
.flow .flow-nl{ font-family:var(--mono); font-size:12px; fill:var(--text-2); }
.flow .flow-nc{ font-family:var(--mono); font-size:12px; font-weight:700; }
.flow .flow-ct{ font-family:var(--mono); font-size:11px; font-weight:700; fill:var(--text); pointer-events:none; }
.flow-legend{ display:flex; gap:18px; flex-wrap:wrap; font-size:10.5px; color:var(--text-3); margin-top:12px; font-family:var(--mono); align-items:center; }
.flow-legend b{ font-weight:700; }

/* Donation Trends */
.dt-controls{ display:flex; gap:16px; flex-wrap:wrap; align-items:center; margin-bottom:14px; }
.dt-ctl{ display:flex; align-items:center; gap:8px; }
.dt-ctl-lbl{ font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); }
.scale-seg,.seg{ display:inline-flex; background:var(--bg); border:0.5px solid var(--border-2); border-radius:7px; padding:2px; gap:2px; flex-wrap:wrap; }
.scale-seg button,.seg button{ background:transparent; border:0; color:var(--text-2); font-size:11px; font-weight:600; padding:4px 9px; border-radius:5px; cursor:pointer; font-family:inherit; }
.scale-seg button:hover,.seg button:hover{ color:var(--text); }
.scale-seg button.active,.seg button.active{ background:var(--amber-dim); color:var(--amber); }
.dt-top{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.dt-plabel{ font-size:10px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--text-3); }
.dt-numrow{ display:flex; align-items:baseline; gap:10px; margin-top:2px; }
.dt-total{ font-size:32px; font-weight:700; font-family:var(--mono); color:var(--text); line-height:1; }
.dt-delta{ display:inline-flex; align-items:center; gap:4px; font-family:var(--mono); font-weight:700; font-size:13px; }
.dt-delta svg{ flex-shrink:0; }
.dt-delta.good{ color:var(--wt-lift); } .dt-delta.bad{ color:var(--wt-drag); } .dt-delta.flat{ color:var(--text-3); }
.dt-deltatail{ color:var(--text-3); font-weight:500; font-size:11px; }
.spark{ margin-top:14px; }
.spark > svg{ width:100%; height:auto; display:block; }   /* chart only — not the tiny trend-token svgs nested in .spark-net */
.spark-foot{ display:flex; justify-content:space-between; align-items:center; margin-top:4px; gap:8px; flex-wrap:wrap; }
.spark-axis{ font-size:9px; color:var(--text-3); font-family:var(--mono); text-transform:uppercase; letter-spacing:.05em; }
.spark-net{ font-size:10px; color:var(--text-3); font-family:var(--mono); display:inline-flex; align-items:center; gap:4px; }
.dt-sub{ margin-top:14px; padding-top:13px; border-top:0.5px solid var(--border); display:flex; align-items:center; gap:10px; flex-wrap:wrap; min-height:20px; }
.dt-sub .sv{ font-family:var(--mono); font-weight:700; font-size:15px; color:var(--text); }
.dt-sub .sl{ font-size:11px; color:var(--text-2); }
.dt-act{ margin-left:auto; font-size:11px; color:var(--amber-2); text-decoration:none; display:inline-flex; align-items:center; gap:4px; cursor:pointer; }
.dt-act:hover{ text-decoration:underline; }
.dt-floor{ color:var(--text-3); }
.dt-none{ font-size:11px; color:var(--text-3); font-style:italic; }

@media (max-width:480px){
  .dt-total{ font-size:26px; }
  .dt-controls{ gap:10px; }
  .dt-act{ margin-left:0; }
}

/* ══ NEEDS FOLLOW-UP card (#18) ══ ported from prototypes/bucket2_needs_followup_mock_v6.html
   Roster-faithful lanes: group separators only (.nf-sep = the Roster's .rb-sep), no per-column
   rule; right-aligned tabular numbers; binary green(at/above median)/red(below) triage coloring. */
.nf-card::before{ background:linear-gradient(90deg,var(--red-2),transparent 70%); }
.nf-card .dim{ color:var(--text-3); }
.nf-scroll{ overflow-x:auto; }   /* interim mobile: wide lane table scrolls; header+rows stay aligned */
.cell-strip{ display:flex; align-items:center; gap:7px; padding:7px 16px; border-top:0.5px solid var(--border); border-bottom:0.5px solid var(--border); background:rgba(55,138,221,0.05); font-size:11px; color:var(--text-2); }
.cell-strip i.lead{ font-size:13px; color:var(--blue-2); }
.cell-strip b{ color:var(--blue-2); font-weight:700; }
.cfg-pill{ font-size:8.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--text-3); border:0.5px dashed var(--border-2); border-radius:3px; padding:0 5px; }
.nf-help{ margin-left:auto; color:var(--text-3); cursor:help; display:inline-flex; }
.shape{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:9px 16px 8px; font-size:11px; color:var(--text-3); font-family:var(--mono); }
.shape b{ color:var(--text-2); } .shape .crit{ color:var(--red-2); }
.nf-hdr{ display:flex; align-items:center; padding:8px 16px; background:var(--bg-3); border-top:0.5px solid var(--border); border-bottom:0.5px solid var(--border); }
.nf-row{ display:flex; align-items:center; padding:10px 16px; font-size:13px; }
.nf-row + .nf-row{ border-top:0.5px solid rgba(42,47,56,0.45); }
.nf-row:hover{ background:var(--bg-3); }
.nf-sep{ width:0.5px; align-self:stretch; background:var(--border); margin:0 10px; flex-shrink:0; }
.nf-card .c-name{ flex:1; min-width:150px; display:flex; align-items:center; gap:7px; overflow:hidden; }
.nf-card .c-name .nm{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text); font-weight:500; }
.nf-card .lane{ width:86px; flex-shrink:0; text-align:right; font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:12px; font-weight:700; }
.nf-card .lane.pos{ color:var(--green-2); }
.nf-card .lane.iss{ color:var(--red-2); }
.nf-hdr .h-name{ display:flex; align-items:center; }
.nf-hdr .h-cell{ font-size:10.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--text-2); }
.nf-hdr .h-lane{ width:86px; flex-shrink:0; display:flex; flex-direction:column; align-items:flex-end; gap:1px; }
.nf-hdr .h-lane .med{ font-size:8.5px; font-weight:500; color:var(--text-3); letter-spacing:0; text-transform:none; font-family:var(--mono); }
.nf-card .c-move,.nf-hdr .h-move{ width:112px; flex-shrink:0; display:flex; justify-content:flex-end; }
.mv-drop{ color:var(--wt-drag); background:var(--ov-trend-down-bg); }
.mv-lift{ color:var(--wt-lift); background:var(--ov-trend-up-bg); }
.mv-held{ color:var(--text-3); background:var(--bg-3); }
.more-toggle{ padding:9px 16px; font-size:11.5px; cursor:pointer; color:var(--amber-2); display:flex; align-items:center; gap:6px; border-top:0.5px solid rgba(42,47,56,0.45); }
.more-toggle:hover{ text-decoration:underline; }
.more-body{ display:none; } .more-row.open .more-body{ display:block; } .more-row.open .more-toggle .chev{ transform:rotate(90deg); }
.chev{ transition:transform .12s; display:inline-block; }
.exc-row{ padding:9px 16px; border-top:0.5px solid var(--border); background:rgba(26,30,36,0.4); font-size:11px; color:var(--text-3); }
.exc-row .ex-head{ display:flex; align-items:center; gap:6px; cursor:pointer; }
.exc-list{ margin-top:7px; display:none; font-family:var(--mono); font-size:10.5px; line-height:1.8; padding-left:19px; }
.exc-row.open .exc-list{ display:block; } .exc-row.open .ex-head .chev{ transform:rotate(90deg); }
.nf-floor{ margin-left:auto; font-size:10px; color:var(--text-3); font-family:var(--mono); }
@media (max-width:680px){
  .nf-card .lane,.nf-hdr .h-lane{ width:58px; }
  .nf-card .c-move,.nf-hdr .h-move{ width:86px; }
  .nf-floor{ display:block; margin-left:0; width:100%; margin-top:4px; }
  /* equal fixed width so the header + rows scroll together, aligned (name flex fills the rest) */
  .nf-scroll .nf-hdr,.nf-scroll .nf-row{ min-width:512px; }
}

/* ════════════════════════════════════════════════════════════════════ */
/* DESERT STORM MODULE — scaffold (roadmap #28 build 1)                  */
/* Workflow module shell: event header, phase clock, section shells,     */
/* Timeline & SOPs two-layer render. Tokens only: --text-2 reading copy, */
/* --text-3 structural chrome (labels, hints, provenance tags).          */
/* ════════════════════════════════════════════════════════════════════ */

.ds-wrap{ max-width:1040px; }
/* Build (b) MR2/MR3 — the Map card is VIEWPORT-HUNGRY (content width
   classes, presentation-ui 07/14): when the map grid is in the DOM the
   module wrap lifts to the map's max useful width (1400 column + 14 gap
   + 320 inspector + 44 shell padding = 1778) while every non-map surface
   stays measure/column-capped at 1040. :has() is the DOM-presence
   condition — no JS flag to reset, and without :has() support the map
   simply keeps the 1040 cap (the pre-(b) render). */
.ds-wrap:has(.dsm-grid){ max-width:1778px; }
.ds-wrap:has(.dsm-grid) > :not(.ds-body),
.ds-wrap:has(.dsm-grid) .ds-step-nav{ max-width:1040px; }
.ds-copy{ font-size:13px; color:var(--text-2); line-height:1.65; max-width:78ch; }
.ds-copy b{ color:var(--text); font-weight:600; }
.ds-copy-sm{ font-size:11px; color:var(--text-2); line-height:1.55; }

/* ── Event header ── */
.ds-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:18px; padding:16px 18px; margin-bottom:14px; }
.ds-head-col{ flex-direction:column; align-items:stretch; }
.ds-head-kicker{ font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); margin-bottom:4px; }
.ds-head-title{ font-size:16px; font-weight:600; color:var(--text); }
.ds-head-chips{ display:flex; gap:6px; flex-wrap:wrap; margin-top:9px; }
.ds-chip{ display:inline-flex; align-items:center; gap:6px; font-size:11px; color:var(--text-2); background:var(--bg-3); border:0.5px solid var(--border); border-radius:20px; padding:3px 10px; }
.ds-chip b{ color:var(--text); font-weight:600; }
.ds-chip-muted{ color:var(--text-3); }
.ds-chip-muted b{ color:var(--text-2); }
.ds-chip-tag{ font-size:9px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--amber); background:var(--amber-dim); border:0.5px solid var(--warn-bdr); border-radius:3px; padding:1px 5px; cursor:help; }
.ds-head-right{ display:flex; flex-direction:column; align-items:flex-end; gap:7px; flex-shrink:0; text-align:right; }
.ds-phase-pill{ font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:3px 11px; border-radius:20px; background:var(--amber-dim); color:var(--amber); border:0.5px solid var(--warn-bdr); }
.ds-countdown{ font-size:12px; color:var(--text-2); }
.ds-countdown .num{ font-family:var(--mono); font-weight:600; color:var(--text); }

/* ── Phase clock ── */
.ds-clock-wrap{ position:relative; margin-bottom:14px; }
.ds-clock{ padding:14px 18px 12px; }
.ds-rail{ display:flex; position:relative; }
.ds-rail::before{ content:''; position:absolute; top:8.5px; left:10%; right:10%; height:1px; background:var(--border); }
.ds-node{ flex:1; text-align:center; cursor:pointer; padding:4px 2px 6px; border-radius:var(--radius-sm); transition:background .12s; position:relative; }
.ds-node:hover{ background:var(--bg-3); }
.ds-node-dot{ width:10px; height:10px; border-radius:50%; margin:3px auto 7px; border:1.5px solid var(--border-2); background:var(--bg-2); position:relative; z-index:2; }
.ds-node.past .ds-node-dot{ background:var(--border-2); }
.ds-node.current .ds-node-dot{ background:var(--amber); border-color:var(--amber); box-shadow:0 0 0 3px var(--amber-dim); }
.ds-node-label{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-3); }
.ds-node.past .ds-node-label{ color:var(--text-2); }
.ds-node.current .ds-node-label{ color:var(--amber); }
.ds-node-hint{ font-size:10px; color:var(--text-3); font-family:var(--mono); margin-top:2px; }
.ds-help{ position:absolute; top:10px; right:12px; width:20px; height:20px; border-radius:50%; border:0.5px solid var(--border-2); color:var(--text-3); font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:color .12s, border-color .12s; }
.ds-help:hover{ color:var(--amber); border-color:var(--warn-bdr); }

/* First-run overlay — five sentences, one per node; dismissible; "?" revisits */
.ds-intro{ position:absolute; top:0; left:0; right:0; z-index:20; background:var(--bg-4); border:0.5px solid var(--border-2); border-radius:var(--radius-lg); padding:18px 20px 14px; box-shadow:0 16px 48px -10px rgba(0,0,0,0.8); }
.ds-intro-title{ font-size:13px; font-weight:700; color:var(--text); margin-bottom:10px; }
.ds-intro-row{ display:flex; gap:12px; font-size:12.5px; color:var(--text-2); line-height:1.55; margin-bottom:7px; }
.ds-intro-row b{ flex:0 0 64px; color:var(--amber); font-size:10px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; padding-top:2px; }
.ds-intro-foot{ display:flex; justify-content:flex-end; margin-top:10px; }

/* ── Section nav (steer, never hide) ── */
.ds-nav{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.ds-nav-tab{ display:flex; align-items:center; gap:7px; padding:5px 13px; border-radius:20px; border:0.5px solid var(--border); font-size:12px; font-weight:500; color:var(--text-2); cursor:pointer; transition:all .12s; user-select:none; }
.ds-nav-tab:hover{ border-color:var(--border-2); color:var(--text); }
.ds-nav-tab.active{ background:var(--amber-dim); color:var(--amber); border-color:var(--warn-bdr); }
.ds-nav-dot{ width:6px; height:6px; border-radius:50%; background:var(--amber); box-shadow:0 0 0 2px var(--amber-dim); }

/* ── Teaching empty states (shells) ── */
.ds-shell{ padding:20px 22px; }
.ds-shell-kicker{ font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); margin-bottom:8px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.ds-shell-when{ color:var(--amber); }
.ds-shell .ds-copy{ margin-bottom:14px; }
.ds-shell-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:10px; margin-bottom:14px; }
.ds-shell-cell{ background:var(--bg-3); border:0.5px solid var(--border); border-radius:var(--radius); padding:12px 14px; }
.ds-shell-cell h4{ font-size:12px; font-weight:600; color:var(--text); margin-bottom:4px; }
.ds-shell-cell p{ font-size:12px; color:var(--text-2); line-height:1.6; }
.ds-shell-note{ font-size:12px; margin-bottom:10px; }
.ds-shell-meta{ font-size:11.5px; color:var(--text-2); line-height:1.6; border-top:0.5px solid var(--border); padding-top:11px; }
.ds-shell-meta .k{ font-size:9.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); margin-right:6px; }
.ds-shell-action{ display:flex; align-items:center; gap:12px; margin-top:14px; flex-wrap:wrap; }

/* ── Timeline & SOPs ── */
.ds-legend{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
.ds-legend-chip{ display:inline-flex; align-items:center; gap:8px; font-size:11px; color:var(--text-2); background:var(--bg-3); border:0.5px solid var(--border); border-radius:20px; padding:4px 12px 4px 6px; }
.ds-layer-tag{ font-size:9px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:2px 7px; border-radius:3px; white-space:nowrap; }
.ds-layer-tag.lg-game, .ds-layer.game .ds-layer-tag{ background:var(--blue-bg); color:var(--blue-2); border:0.5px solid var(--blue-bdr); }
.ds-layer-tag.lg-doc, .ds-layer.doc .ds-layer-tag{ background:var(--amber-dim); color:var(--amber); border:0.5px solid var(--warn-bdr); }
.ds-tl{ position:relative; padding-left:76px; }
.ds-tl::before{ content:''; position:absolute; left:56px; top:8px; bottom:8px; width:1px; background:var(--border); }
.ds-tl-node{ position:relative; margin-bottom:26px; }
.ds-tl-time{ position:absolute; left:-76px; top:1px; width:44px; text-align:right; font-family:var(--mono); font-size:12px; font-weight:600; color:var(--amber); }
.ds-tl-dot{ position:absolute; left:-24.5px; top:4px; width:9px; height:9px; border-radius:50%; background:var(--bg-2); border:1.5px solid var(--amber); }
.ds-tl-title{ font-size:13.5px; font-weight:600; color:var(--text); margin-bottom:9px; }
.ds-layer{ border:0.5px solid var(--border); border-radius:var(--radius); background:var(--bg-2); padding:11px 14px; margin-bottom:8px; }
.ds-layer.game{ border-left:3px solid var(--blue); }
.ds-layer.doc{ border-left:3px solid var(--amber); }
.ds-layer-head{ display:flex; align-items:center; gap:9px; margin-bottom:8px; flex-wrap:wrap; }
.ds-layer-src{ font-size:10px; color:var(--text-3); font-family:var(--mono); }
.ds-fact{ font-size:12.5px; color:var(--text-2); line-height:1.6; padding:3px 0 3px 14px; position:relative; }
.ds-fact::before{ content:''; position:absolute; left:2px; top:11px; width:4px; height:4px; border-radius:50%; background:var(--border-2); }
.ds-sop b{ color:var(--text); font-weight:600; }
.ds-trig{ font-family:var(--mono); font-size:10px; color:var(--amber-2); background:var(--amber-dim); border-radius:3px; padding:1px 6px; margin-right:7px; white-space:nowrap; }
.ds-warn{ display:inline-flex; align-items:center; gap:4px; font-size:10.5px; color:var(--amber-2); background:var(--amber-dim); border:0.5px solid var(--warn-bdr); border-radius:3px; padding:0 6px; margin-left:6px; }
.ds-intent{ font-size:12.5px; font-weight:500; color:var(--text); line-height:1.55; margin-bottom:8px; }
.ds-gate{ border:0.5px solid var(--warn-bdr); background:var(--amber-dim); border-radius:var(--radius); padding:12px 14px; margin:10px 0 4px; }
.ds-gate-head{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--amber); margin-bottom:6px; }
.ds-gate-crit{ font-size:12px; color:var(--text-2); line-height:1.55; margin-bottom:9px; }
.ds-branch{ display:flex; gap:10px; align-items:flex-start; font-size:12.5px; color:var(--text-2); line-height:1.55; margin-bottom:7px; }
.ds-code{ flex-shrink:0; font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.05em; padding:2px 9px; border-radius:3px; background:var(--bg-2); border:0.5px solid var(--border-2); color:var(--text); }
.ds-gate .ds-copy-sm{ margin-top:2px; }
.ds-why{ margin-top:8px; }
.ds-why-btn{ font-size:11px; color:var(--text-2); background:none; border:none; cursor:pointer; display:inline-flex; align-items:center; gap:5px; padding:2px 0; font-family:inherit; }
.ds-why-btn:hover{ color:var(--amber); }
.ds-why-body{ font-size:12.5px; color:var(--text-2); line-height:1.65; background:var(--bg-3); border:0.5px solid var(--border); border-radius:var(--radius); padding:10px 14px; margin-top:6px; max-width:72ch; }

/* ── Create-week action (two fields, brief §2a) ── */
.ds-create-row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:12px; }
.ds-create-row select, .ds-create-row input{ background:var(--bg-3); border:0.5px solid var(--border-2); color:var(--text); font-size:13px; padding:6px 10px; border-radius:var(--radius-sm); outline:none; font-family:inherit; }
.ds-create-row select:focus, .ds-create-row input:focus{ border-color:var(--amber); }

/* ── Plan section — build 2 (Stage A/B + advisory; Stage C inert) ── */
/* Coverage readout — three provenance counts, never blended */
.ds-cov{ display:flex; gap:8px; align-items:baseline; flex-wrap:wrap; margin:2px 0 12px; }
.ds-cov-seg{ font-size:12px; color:var(--text-2); }
.ds-cov-seg.asserted{ color:var(--amber-2); }
.ds-cov-seg.unknown{ color:var(--text-3); }
.ds-cov-num{ font-family:var(--mono); font-size:15px; font-weight:600; }
.ds-cov-dot{ color:var(--text-3); }
.ds-cov-note{ font-size:11px; color:var(--text-3); flex-basis:100%; }
.ds-cov-note i{ font-style:normal; color:var(--text-2); }

/* Grid tools */
.ds-av-tools{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:10px; }
.ds-av-search{ background:var(--bg-3); border:0.5px solid var(--border-2); color:var(--text); font-size:12.5px; padding:6px 10px; border-radius:var(--radius-sm); outline:none; font-family:inherit; min-width:180px; }
.ds-av-search:focus{ border-color:var(--amber); }
.ds-danger-btn{ border-color:var(--err-bdr) !important; color:var(--red-2) !important; }
.ds-link-btn{ background:none; border:none; padding:0; font:inherit; font-size:inherit; color:var(--amber-2); cursor:pointer; text-decoration:underline; }

/* Availability grid — the entry surface. Column count rides --ds-slots. */
.ds-av-grid{ max-height:56vh; overflow:auto; border:0.5px solid var(--border); border-radius:var(--radius); background:var(--bg-2); }
/* Build (b), register #28 (the TRIGGER half — #36 draft durability stays
   the vulnerability's real fix): inner scrollers and the app scroller
   never chain a top-edge overscroll into browser pull-to-refresh, which
   was wiping session-only rosters mid-build. html/body get the same
   containment in the ≤480px scroll-model block below. */
.ds-av-grid, .ds-ws-pool-list, .ds-gtm-scroll, .dsm-scroll, .content{ overscroll-behavior-y:contain; }
.ds-av-hrow, .ds-av-row{ display:grid; grid-template-columns:minmax(120px,1fr) repeat(var(--ds-slots,3),64px) 92px; align-items:stretch; border-bottom:0.5px solid var(--border); }
.ds-av-row:last-child{ border-bottom:none; }
.ds-av-hrow{ position:sticky; top:0; z-index:2; background:var(--bg-3); }
.ds-av-h{ font-size:12.5px; font-weight:700; letter-spacing:.04em; font-family:var(--mono); color:var(--text); text-align:center; padding:7px 2px; border-left:0.5px solid var(--border); display:flex; flex-direction:column; align-items:center; gap:1px; }
.ds-av-hsub{ font-weight:500; letter-spacing:0; text-transform:none; font-size:9px; font-family:inherit; color:var(--text-3); }
.ds-av-hrow .ds-av-name{ font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--text-2); font-family:inherit; }
.ds-av-name{ padding:6px 10px; font-size:12px; color:var(--text-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; align-self:center; }
.ds-av-name .wb-chev{ margin-right:6px; }
.ds-av-cell{ display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:12px; border-left:0.5px solid var(--border); user-select:none; min-height:28px; transition:filter .1s; }
.ds-av-cell:hover{ filter:brightness(1.25); }
.ds-av-cell.av{ color:var(--green-2); background:var(--green-bg); }
.ds-av-cell.un{ color:var(--red-2); background:var(--err-bg); }
.ds-av-cell.uk{ color:var(--text-3); }
.ds-av-prov{ display:flex; align-items:center; justify-content:center; border-left:0.5px solid var(--border); padding:2px; }
.ds-prov{ font-size:9.5px; font-weight:600; letter-spacing:.03em; border-radius:3px; padding:1px 7px; white-space:nowrap; }
.ds-prov.none{ color:var(--text-3); }
.ds-prov.reported{ color:var(--text-2); border:0.5px solid var(--border-2); cursor:pointer; }
.ds-prov.judged{ color:var(--amber-2); background:var(--amber-dim); border:0.5px solid var(--warn-bdr); cursor:pointer; }

/* Slot advisory */
.ds-adv-row{ display:grid; grid-template-columns:64px 150px minmax(170px,1fr) minmax(200px,1.4fr); gap:12px; align-items:center; padding:8px 0; border-bottom:0.5px solid var(--border); font-size:12px; color:var(--text-2); }
.ds-adv-row:last-of-type{ border-bottom:none; }
.ds-adv-slot{ font-family:var(--mono); font-size:13px; font-weight:600; color:var(--text); }
.ds-adv-count b{ color:var(--text); font-size:14px; }
.ds-adv-judged{ color:var(--amber-2); font-size:11px; }
.ds-adv-power{ display:flex; align-items:center; gap:9px; }
.ds-adv-power span{ font-size:11px; color:var(--text-2); white-space:nowrap; }
.ds-adv-bar{ flex:1; height:6px; border-radius:3px; background:var(--bg-3); border:0.5px solid var(--border); overflow:hidden; min-width:60px; }
.ds-adv-fill{ height:100%; background:var(--blue); border-radius:3px; }
.ds-adv-med{ font-size:11px; color:var(--text-3); line-height:1.5; }
.ds-rec{ border:0.5px solid var(--blue-bdr); background:var(--blue-bg); border-radius:var(--radius); padding:13px 15px; margin-top:14px; }
.ds-rec-head{ font-size:12.5px; color:var(--text-2); margin-bottom:9px; }
.ds-rec-head b{ font-family:var(--mono); color:var(--text); }
.ds-trail{ font-size:11.5px; color:var(--text-2); line-height:1.6; margin-bottom:4px; }
.ds-trail b{ color:var(--text); }
.ds-rec-verdict{ font-size:12.5px; color:var(--text-2); line-height:1.6; border-top:0.5px solid var(--blue-bdr); padding-top:9px; margin-top:8px; }
.ds-rec-verdict b{ color:var(--text); }

/* Stage B — command element */
.ds-cmd-tf{ border:0.5px solid var(--border); border-radius:var(--radius); background:var(--bg-2); padding:12px 14px; margin-bottom:10px; }
.ds-cmd-tf-head{ font-size:12.5px; color:var(--text-2); margin-bottom:9px; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.ds-cmd-tf-head b{ color:var(--text); }
.ds-cmd-meta{ font-size:10.5px; color:var(--text-3); }
.ds-cmd-row{ display:grid; grid-template-columns:168px minmax(150px,230px) 1fr; gap:10px; align-items:center; padding:3px 0; }
.ds-cmd-label{ font-size:12px; color:var(--text-2); }
.ds-cmd-row select{ background:var(--bg-3); border:0.5px solid var(--border-2); color:var(--text); font-size:12.5px; padding:5px 8px; border-radius:var(--radius-sm); outline:none; font-family:inherit; width:100%; }
.ds-cmd-row select:focus{ border-color:var(--amber); }
.ds-cmd-status{ font-size:11px; }
.ds-gap{ display:inline-flex; font-size:10.5px; color:var(--amber-2); background:var(--amber-dim); border:0.5px solid var(--warn-bdr); border-radius:3px; padding:1px 7px; }
.ds-unset{ color:var(--text-3); font-size:11px; }
.ds-ok{ color:var(--green-2); font-size:11px; }
.ds-provo{ margin-top:8px; color:var(--amber-2); }

/* Edit lock + undo */
.ds-lock-note{ display:inline-flex; align-items:center; gap:5px; font-size:11px; color:var(--text-3); }
.ds-av-grid.locked .ds-av-cell,
.ds-av-grid.locked .ds-prov.reported,
.ds-av-grid.locked .ds-prov.judged{ cursor:default; }
.ds-av-grid.locked .ds-av-cell:hover{ filter:none; }

/* Step 3 gate state */
.ds-inert{ opacity:.82; }

/* ── Build 3: Plan wizard step nav ── */
.ds-step-nav{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.ds-step-tab{ display:flex; align-items:center; gap:9px; padding:7px 14px 7px 9px; border-radius:var(--radius); border:0.5px solid var(--border); background:var(--bg-2); cursor:pointer; transition:all .12s; user-select:none; flex:1; min-width:150px; }
.ds-step-tab:hover{ border-color:var(--border-2); }
.ds-step-tab.active{ border-color:var(--warn-bdr); background:var(--amber-dim); }
.ds-step-n{ width:22px; height:22px; border-radius:50%; border:1px solid var(--border-2); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:var(--text-3); flex-shrink:0; }
.ds-step-tab.active .ds-step-n{ border-color:var(--amber); color:var(--amber); }
.ds-step-body{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.ds-step-name{ font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--text-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ds-step-tab.active .ds-step-name{ color:var(--amber); }
.ds-step-chip{ font-size:10.5px; color:var(--text-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ── Build 3: Step 2 command glossary ── */
.ds-cmdgloss{ border:0.5px solid var(--border); border-radius:var(--radius); background:var(--bg-3); padding:10px 13px; margin-bottom:13px; }
.ds-cmdgloss-row{ display:flex; gap:10px; font-size:11.5px; color:var(--text-2); line-height:1.55; padding:3px 0; }
.ds-cmdgloss-term{ flex:0 0 34px; font-family:var(--mono); font-size:10.5px; font-weight:700; color:var(--amber-2); padding-top:1px; }
.ds-cmdgloss-def i{ color:var(--text-2); font-style:italic; }  /* member-facing phrasing = reading copy, never chrome */

/* ── Build 3: separation-gate verdict card ── */
.ds-gatecard{ border:0.5px solid var(--border-2); border-radius:var(--radius); background:var(--bg-2); padding:12px 14px; margin-bottom:12px; }
.ds-gatecard-head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:7px; }
.ds-gatecard-title{ font-size:12px; color:var(--text-2); }
.ds-gate-state{ font-size:10px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; padding:2px 9px; border-radius:3px; white-space:nowrap; }
.ds-gate-state.ok{ background:var(--green-bg); color:var(--green-2); border:0.5px solid var(--green-bdr); }
.ds-gate-state.mid{ background:var(--bg-3); color:var(--text-2); border:0.5px solid var(--border-2); }
.ds-gate-state.warn{ background:var(--amber-dim); color:var(--amber-2); border:0.5px solid var(--warn-bdr); }

/* ── Build 3: workspace toolbar + layout ── */
.ds-ws-tools{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:12px; }
.ds-ws-count{ font-size:11.5px; color:var(--text-2); }
.ds-ws-count b{ font-family:var(--mono); color:var(--text); }
.ds-ws-tfrow, .ds-ws-tabs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.ds-ws{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:14px; align-items:start; margin-bottom:14px; }
.ds-ws-orbat{ display:flex; flex-direction:column; gap:10px; min-width:0; }
.ds-ws-box{ border:0.5px solid var(--border); border-radius:var(--radius); background:var(--bg-2); padding:10px 12px; }
.ds-ws-boxhead{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-3); margin-bottom:8px; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.ds-ws-boxsub{ font-weight:500; letter-spacing:0; text-transform:none; color:var(--text-3); font-size:11px; }
.ds-ws-boxnote{ font-weight:500; letter-spacing:0; text-transform:none; font-size:10.5px; color:var(--amber-2); margin-left:auto; }
.ds-ws-boxnote.unset{ color:var(--text-3); }
.ds-ws-cmd{ border-left:3px solid var(--amber); }
.ds-ws-maneuver{ border-left:3px solid var(--blue); }
.ds-ws-benchrow{ display:flex; align-items:center; gap:8px; padding:2px 0; }
.ds-ws-benchn{ font-family:var(--mono); font-size:10.5px; color:var(--text-3); width:16px; text-align:right; flex-shrink:0; }

/* Pair boxes */
.ds-pair{ border:0.5px solid var(--border); border-radius:var(--radius-sm); background:var(--bg-3); padding:8px 10px; margin-bottom:8px; }
.ds-pair.droppable{ border-color:var(--green-bdr); box-shadow:0 0 0 2px var(--green-bg); }
.ds-pair-label{ font-size:11px; font-weight:600; color:var(--text-2); margin-bottom:6px; }
.ds-pair-seats{ display:flex; flex-direction:column; gap:5px; }
.ds-pair-add{ font-size:11px; color:var(--amber-2); background:var(--amber-dim); border:1px dashed var(--warn-bdr); border-radius:var(--radius-sm); padding:5px 9px; }
.ds-pair-add.empty{ color:var(--text-3); background:none; border-color:var(--border-2); }
.ds-pair-tag{ font-family:var(--mono); font-size:10px; color:var(--text-3); margin-top:6px; }

/* Member cards — the ONE live card per member */
.ds-ws-card{ display:flex; align-items:center; gap:7px; border:0.5px solid var(--border-2); border-radius:var(--radius-sm); background:var(--bg-4); padding:5px 9px; cursor:grab; user-select:none; min-width:0; }
.ds-ws-card:hover{ border-color:var(--amber); }
.ds-ws-card.active{ border-color:var(--amber); box-shadow:0 0 0 2px var(--amber-dim); }
.ds-ws-cardname{ font-size:12px; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ds-ws-cardz{ font-family:var(--mono); font-size:10.5px; color:var(--blue-2); margin-left:auto; flex-shrink:0; }
.ds-ws-cardz.bounded{ color:var(--text-3); font-size:9.5px; }
.ds-ws-manual{ font-size:10px; color:var(--amber-2); flex-shrink:0; }
.ds-ws-badge{ font-size:8.5px; font-weight:700; letter-spacing:.05em; padding:1px 5px; border-radius:3px; background:var(--bg-3); border:0.5px solid var(--border-2); color:var(--text-2); flex-shrink:0; cursor:help; }
.ds-ws-badge.oic{ background:var(--amber-dim); border-color:var(--warn-bdr); color:var(--amber-2); }
.ds-ws-badge.ic{ background:var(--blue-bg); border-color:var(--blue-bdr); color:var(--blue-2); }
.ds-ws-av{ font-size:10px; flex-shrink:0; cursor:help; }
.ds-ws-av.av{ color:var(--green-2); }
.ds-ws-av.un{ color:var(--red-2); }
.ds-ws-av.uk{ color:var(--text-3); }

/* Pool */
.ds-ws-pool{ border:0.5px solid var(--border); border-radius:var(--radius); background:var(--bg-2); padding:10px 12px; min-width:0; }
.ds-ws-poolhead{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:4px; }
.ds-ws-pooltitle{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-3); }
.ds-ws-poolfilters{ display:flex; gap:4px; margin-left:auto; flex-wrap:wrap; }
.ds-ws-pf{ font-size:10.5px; padding:2px 9px; border-radius:20px; border:0.5px solid var(--border); background:none; color:var(--text-2); cursor:pointer; font-family:inherit; }
.ds-ws-pf.active{ background:var(--amber-dim); color:var(--amber); border-color:var(--warn-bdr); }
.ds-proxy-banner{ font-size:11px; color:var(--amber-2); background:var(--amber-dim); border:0.5px solid var(--warn-bdr); border-radius:var(--radius-sm); padding:6px 10px; margin-bottom:8px; line-height:1.5; }
.ds-ws-pool-list{ max-height:64vh; overflow:auto; border:0.5px solid var(--border); border-radius:var(--radius-sm); }
.ds-ws-prow{ display:flex; align-items:center; gap:8px; padding:5px 9px; border-bottom:0.5px solid var(--border); min-width:0; }
.ds-ws-prow:last-child{ border-bottom:none; }
.ds-ws-prow.live{ cursor:grab; }
.ds-ws-prow.live:hover{ background:var(--bg-3); }
.ds-ws-prow.active{ background:var(--amber-dim); box-shadow:inset 2px 0 0 var(--amber); }
.ds-ws-prow.placed{ opacity:.55; }
.ds-ws-prown{ font-family:var(--mono); font-size:10px; color:var(--text-3); width:20px; text-align:right; flex-shrink:0; }
.ds-ws-prowname{ font-size:12px; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ds-ws-prowz{ font-family:var(--mono); font-size:10.5px; color:var(--blue-2); margin-left:auto; flex-shrink:0; }
.ds-ws-prowz.bounded{ color:var(--text-3); font-size:9.5px; font-family:inherit; }
.ds-ws-prowthp{ font-family:var(--mono); font-size:10px; color:var(--text-3); flex-shrink:0; }
.ds-ws-prowseat{ font-size:10px; color:var(--text-3); white-space:nowrap; flex-shrink:0; }

/* Warnings panel + placing bar */
.ds-provo-panel{ border:0.5px solid var(--warn-bdr); border-radius:var(--radius); background:var(--bg-2); padding:10px 12px; }
.ds-provo-row{ display:flex; gap:9px; font-size:12px; color:var(--text-2); line-height:1.55; padding:4px 0; align-items:flex-start; }
.ds-provo-tag{ flex:0 0 auto; font-size:9px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--amber-2); background:var(--amber-dim); border:0.5px solid var(--warn-bdr); border-radius:3px; padding:1px 6px; margin-top:2px; white-space:nowrap; }
.ds-ws-placing{ position:fixed; bottom:14px; left:50%; transform:translateX(-50%); z-index:60; background:var(--bg-4); border:0.5px solid var(--warn-bdr); border-radius:var(--radius-lg); padding:9px 14px; font-size:12px; color:var(--text-2); box-shadow:0 12px 32px -8px rgba(0,0,0,0.7); display:flex; align-items:center; gap:10px; max-width:92vw; }
.ds-ws-placing b{ color:var(--text); }

/* ── Build 3: verb palette + Main Effort ── */
.ds-verb{ display:inline-flex; align-items:center; gap:4px; font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:1px 7px; border-radius:3px; cursor:pointer; white-space:nowrap; vertical-align:baseline; }
.ds-verb i{ font-size:10px; }
.ds-verb.v-ord{ background:var(--blue-bg); color:var(--blue-2); border:0.5px solid var(--blue-bdr); }
.ds-verb.v-brf{ background:var(--amber-dim); color:var(--amber-2); border:0.5px solid var(--warn-bdr); }
.ds-me{ border:0.5px solid var(--border-2); border-left:3px solid var(--amber); border-radius:var(--radius); background:var(--bg-2); padding:10px 14px; margin-bottom:12px; cursor:pointer; }
.ds-me-line{ font-size:12.5px; color:var(--text-2); }
.ds-me-line b{ color:var(--text); }
.ds-me-k{ font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--amber); margin-right:7px; }
.ds-me-why{ font-size:10.5px; color:var(--text-3); margin-left:9px; }
.ds-me-body{ font-size:12px; color:var(--text-2); line-height:1.65; margin-top:8px; max-width:78ch; }
.ds-verbcard{ border:0.5px solid var(--border-2); border-radius:var(--radius); background:var(--bg-3); padding:10px 13px; margin-bottom:12px; }
.ds-verbcard-head{ display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.ds-verbcard-cat{ font-size:10.5px; color:var(--text-3); }
.ds-verbcard-head .ds-link-btn{ margin-left:auto; }
.ds-verbguide{ border:0.5px solid var(--border); border-radius:var(--radius); background:var(--bg-2); padding:10px 13px; margin-bottom:12px; }
.ds-verbguide-row{ display:flex; gap:10px; align-items:flex-start; padding:5px 0; border-bottom:0.5px solid var(--border); }
.ds-verbguide-row:last-of-type{ border-bottom:none; }
.ds-verbguide-row .ds-verb{ flex:0 0 84px; justify-content:center; margin-top:1px; }
.ds-verbguide-ex{ font-size:10.5px; color:var(--text-3); margin-top:2px; }

/* ── Build 3: the Groupings & Tasks matrix ── */
.ds-gtm-common{ border:0.5px solid var(--green-bdr); border-left:3px solid var(--green); border-radius:var(--radius); background:var(--green-bg); padding:10px 14px; margin-bottom:12px; }
.ds-gtm-common-k{ font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--green-2); margin-bottom:6px; }
.ds-gtm-common-item{ font-size:12px; color:var(--text-2); line-height:1.6; padding:2px 0; }
.ds-gtm-common-item b{ color:var(--text); }
.ds-gtm-scroll{ overflow-x:auto; border:0.5px solid var(--border); border-radius:var(--radius); background:var(--bg-2); }
.ds-gtm{ min-width:100%; }   /* real floor set inline from the column count */
.ds-gtm-row{ display:grid; width:100%; border-bottom:0.5px solid var(--border); }
.ds-gtm-row.head{ position:sticky; top:0; z-index:2; background:var(--bg-3); }
.ds-gtm-corner{ font-size:9.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-3); padding:9px 11px; align-self:end; }
.ds-gtm-ph{ padding:8px 11px; border-left:0.5px solid var(--border); }
.ds-gtm-phname{ font-size:11.5px; font-weight:700; color:var(--text); }
.ds-gtm-phwin{ font-family:var(--mono); font-size:10px; color:var(--text-3); margin-top:2px; }
.ds-gtm-stage{ color:var(--blue-2); cursor:help; }
.ds-gtm-timings{ font-size:10px; color:var(--text-3); margin-top:5px; line-height:1.7; }
.ds-gtm-tnote{ color:var(--text-3); }
.ds-gtm-gcell{ border-left:0.5px solid var(--warn-bdr); background:var(--amber-dim); }
.ds-gtm-gcell.head{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:6px 2px; cursor:help; }
.ds-gtm-gat{ font-family:var(--mono); font-size:9px; font-weight:700; color:var(--amber); writing-mode:vertical-rl; }
.ds-gtm-gw{ font-family:var(--mono); font-size:8.5px; font-weight:700; color:var(--amber-2); }
.ds-gtm-gsep{ font-size:8px; color:var(--text-3); }
.ds-gtm-teamhead{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-2); background:var(--bg-3); padding:7px 11px; border-bottom:0.5px solid var(--border); display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.ds-gtm-rh{ padding:8px 11px; font-size:11.5px; color:var(--text-2); }
.ds-gtm-rh.pair{ font-weight:600; }
.ds-gtm-rhlabel{ color:var(--text); font-size:12px; }
.ds-gtm-rhocc{ font-size:10.5px; color:var(--text-3); font-weight:400; margin-top:2px; }
/* The derived current-phase objective under the designation (§11
   scannability preservation) — information line, never row identity. */
.ds-gtm-rhobj{ font-size:10.5px; color:var(--text-2); font-weight:500; margin-top:1px; }
.ds-gtm-unfilled{ color:var(--text-3); font-style:italic; }
.ds-gtm-cell{ padding:8px 11px; border-left:0.5px solid var(--border); font-size:11.5px; color:var(--text-2); line-height:1.55; }
.ds-gtm-cell .ds-verb{ margin-right:2px; }
.ds-gtm-none{ color:var(--text-3); }
.ds-gtm-hold{ color:var(--text-3); font-size:10.5px; font-style:italic; cursor:help; }
.ds-gtm-branch{ display:flex; gap:7px; align-items:flex-start; margin-bottom:5px; }
.ds-gtm-branch:last-child{ margin-bottom:0; }
.ds-code.sm{ font-size:9px; padding:1px 6px; flex-shrink:0; margin-top:1px; }
.ds-gtm-text b{ color:var(--text); }

@media (max-width:640px){
  .ds-ws{ grid-template-columns:1fr; }
  .ds-step-tab{ min-width:0; padding:6px 9px; }
  .ds-step-chip{ display:none; }
  .ds-ws-pool-list{ max-height:46vh; }
  .ds-ws-boxnote{ margin-left:0; flex-basis:100%; }
  .ds-verbguide-row .ds-verb{ flex-basis:70px; }
  .ds-head{ flex-direction:column; }
  .ds-head-right{ flex-direction:row; align-items:center; gap:10px; text-align:left; }
  .ds-node-hint{ display:none; }
  .ds-intro-row b{ flex-basis:54px; }
  .ds-tl{ padding-left:58px; }
  .ds-tl::before{ left:42px; }
  .ds-tl-time{ left:-58px; width:34px; font-size:10.5px; }
  .ds-tl-dot{ left:-20.5px; }
  /* Plan build 2 — tighten for 375px */
  .ds-av-hrow, .ds-av-row{ grid-template-columns:minmax(86px,1fr) repeat(var(--ds-slots,3),46px) 72px; }
  .ds-av-name{ padding:6px 7px; font-size:11px; }
  .ds-prov{ padding:1px 4px; font-size:9px; }
  .ds-adv-row{ grid-template-columns:52px 1fr; }
  .ds-adv-power{ grid-column:1 / -1; }
  .ds-adv-med{ grid-column:1 / -1; }
  .ds-cmd-row{ grid-template-columns:1fr; gap:3px; padding:6px 0; border-bottom:0.5px solid var(--border); }
  .ds-cmd-row:last-of-type{ border-bottom:none; }
}

/* ══════════════════════════════════════════════════════════
   DESERT STORM — Intel section (named slice ds-intel.js, build 4)
   Intel-vocabulary hooks only (dsi-*): never shared with the engine's
   provenance classes — the two-vocabulary separation, enforced in CSS.
   ══════════════════════════════════════════════════════════ */
.dsi-wrap{ display:flex; flex-direction:column; gap:12px; }
/* .bcard supplies chrome only — padding is the consumer's (house convention:
   .ds-head 16/18, .ds-shell 20/22). Every dsi card carries it here. */
.dsi-context, .dsi-entry, .dsi-form, .dsi-palette, .dsi-record, .dsi-prior, .dsi-compare, .dsi-skip-note{ padding:16px 18px; }
.dsi-entry-head{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
.dsi-entry-head > b{ font-size:13px; }
.dsi-entry-acts{ margin-left:auto; display:inline-flex; gap:6px; }
.dsi-stamp{ font-size:10.5px; color:var(--text-3); }
.dsi-src-chip{ background:var(--blue-bg); border-color:var(--blue-bdr); color:var(--blue); }
.dsi-note-i{ font-style:italic; color:var(--text-3); font-size:10.5px; }
.dsi-fact{ font-size:12.5px; color:var(--text-2); padding:2px 0; }
.dsi-fact .k{ color:var(--text-3); font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; margin-right:6px; }
.dsi-prose{ white-space:pre-wrap; }
.dsi-ctx-row{ display:flex; gap:6px; flex-wrap:wrap; padding:3px 0; }
.dsi-recall{ margin-top:8px; font-size:12px; color:var(--text-2); line-height:1.55; background:var(--amber-dim); border:0.5px solid var(--warn-bdr); border-radius:var(--radius-sm); padding:8px 10px; }
.dsi-recall-acts{ display:flex; gap:8px; margin-top:6px; }
.dsi-skip-note{ font-size:12.5px; color:var(--text-2); line-height:1.6; }
.dsi-pal-btns{ display:flex; gap:8px; flex-wrap:wrap; }
.dsi-pal-btn{ display:flex; flex-direction:column; gap:2px; align-items:flex-start; background:var(--bg-2); border:0.5px solid var(--border-2); border-radius:var(--radius); padding:8px 12px; cursor:pointer; color:var(--text-2); font:inherit; text-align:left; }
.dsi-pal-btn:hover{ border-color:var(--text-3); }
.dsi-pal-btn b{ font-size:12px; color:var(--text); }
.dsi-pal-btn span{ font-size:10.5px; color:var(--text-3); }
.dsi-pal-btn.active{ border-color:var(--warn-bdr); background:var(--amber-dim); cursor:default; }
.dsi-pal-btn.active b{ color:var(--amber); }
.dsi-channels{ margin-top:10px; border-top:0.5px solid var(--border); padding-top:10px; }
.dsi-channels .dsi-pal-btn{ width:100%; }
/* honest-disabled exemplar (state ladder: .6, explained) — the only disabled palette button */
.dsi-channels .dsi-pal-btn:disabled{ opacity:.6; cursor:default; }
.dsi-channels .dsi-pal-btn:disabled:hover{ border-color:var(--border-2); }
.dsi-channels .k{ display:block; font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-3); margin-bottom:5px; }
.dsi-skiprow{ display:flex; align-items:center; gap:10px; margin-top:10px; flex-wrap:wrap; }
.dsi-scroll{ overflow-x:auto; margin:6px 0; }
.dsi-table{ border-collapse:collapse; font-size:12px; min-width:100%; }
.dsi-table th{ text-align:left; font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-3); padding:4px 8px; border-bottom:0.5px solid var(--border-2); white-space:nowrap; }
.dsi-table td{ padding:4px 8px; border-bottom:0.5px solid var(--border); color:var(--text-2); white-space:nowrap; }
.dsi-ftable input{ width:100px; background:var(--bg-3); border:0.5px solid var(--border-2); border-radius:4px; color:var(--text); font-size:12px; padding:3px 6px; }
.dsi-f{ display:flex; flex-direction:column; gap:3px; font-size:11px; color:var(--text-3); margin:6px 0; }
.dsi-f input, .dsi-f textarea, .dsi-f select{ background:var(--bg-3); border:0.5px solid var(--border-2); border-radius:var(--radius-sm); color:var(--text); font:inherit; font-size:12.5px; padding:6px 8px; }
.dsi-fgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:0 12px; }
.dsi-saverail{ display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; margin-top:10px; border-top:0.5px solid var(--border); padding-top:10px; }
.dsi-f-inline{ margin:0; min-width:200px; }
.dsi-savebtns{ display:inline-flex; gap:8px; margin-left:auto; }
.dsi-prior-item{ padding:6px 0; border-top:0.5px solid var(--border); }
.dsi-prior-item:first-of-type{ border-top:none; }
.dsi-rec-row{ font-size:12px; color:var(--text-2); padding:3px 0 3px 10px; line-height:1.5; }
.dsi-tfsel{ display:inline-flex; gap:6px; margin-left:auto; }
.dsi-sbs{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:8px 0; }
.dsi-sbs-h{ font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-3); margin-bottom:4px; }
.dsi-toplist{ border:0.5px solid var(--border); border-radius:var(--radius-sm); margin-top:4px; }
.dsi-top-row{ display:flex; gap:8px; font-size:12px; color:var(--text-2); padding:3px 8px; border-bottom:0.5px solid var(--border); }
.dsi-top-row:last-child{ border-bottom:none; }
.dsi-top-n{ flex:0 0 18px; color:var(--text-3); }
.dsi-top-name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dsi-top-v{ font-variant-numeric:tabular-nums; }
.dsi-top-row .ds-chip{ flex-shrink:0; }
.dsi-seat{ font-size:9.5px; padding:1px 7px; }
.dsi-top-row.dsi-bounded{ opacity:.55; }
.dsi-top-row.dsi-more{ color:var(--text-3); font-size:11px; }
.dsi-ovl-head{ display:flex; align-items:center; gap:8px; margin:12px 0 6px; font-size:13px; }
.dsi-svg{ width:100%; height:auto; display:block; background:var(--bg-3); border:0.5px solid var(--border); border-radius:var(--radius-sm); }
.dsi-grid{ stroke:var(--border); stroke-width:1; }
.dsi-tick{ fill:var(--text-3); font-size:10px; }
.dsi-lbl{ font-size:10px; }
.dsi-lbl-their{ fill:var(--red); }
.dsi-lbl-ours{ fill:var(--blue); }
.dsi-ours{ fill:none; stroke:var(--blue); stroke-width:2; }
.dsi-their-worst{ fill:none; stroke:var(--red); stroke-width:1.5; stroke-dasharray:5 3; }
.dsi-their-even{ fill:none; stroke:var(--amber); stroke-width:1.5; stroke-dasharray:2 3; }
.dsi-their-top{ stroke:var(--red); stroke-width:1; stroke-dasharray:7 4; opacity:.8; }
.dsi-trunc{ stroke:var(--text-3); stroke-width:1; stroke-dasharray:3 3; }
.dsi-pair-band{ fill:var(--blue); opacity:.14; }
.dsi-legend{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:8px; }
.dsi-leg-h{ display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-3); margin-bottom:3px; }
.dsi-leg-item{ display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--text-2); padding:2px 0; flex-wrap:wrap; }
.dsi-swatch{ display:inline-block; width:16px; height:0; border-top:2px solid; flex:0 0 auto; }
.dsi-sw-ours{ border-color:var(--blue); }
.dsi-sw-pair{ border-top:6px solid var(--blue); opacity:.25; }
.dsi-sw-worst{ border-color:var(--red); border-top-style:dashed; }
.dsi-sw-even{ border-color:var(--amber); border-top-style:dotted; }
.dsi-premise{ font-size:12.5px; color:var(--text-2); line-height:1.6; background:var(--bg-3); border:0.5px solid var(--border-2); border-radius:var(--radius-sm); padding:8px 10px; margin:8px 0 6px; }
.dsi-ovl-empty{ padding:8px 0 2px; }

/* Refine prompt banner (I3 — lives in ds-1; rendered by renderDS) */
.ds-refine-banner{ display:flex; align-items:flex-start; gap:10px; font-size:12.5px; color:var(--text-2); line-height:1.6; margin-bottom:12px; padding:12px 16px; }
.ds-refine-body{ flex:1; min-width:0; }
.ds-refine-link{ color:var(--blue); cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
.ds-refine-premise{ margin-top:4px; }
.ds-refine-x{ flex:0 0 auto; background:none; border:0.5px solid var(--border-2); border-radius:var(--radius-sm); color:var(--text-3); font-size:14px; line-height:1; padding:2px 7px 4px; cursor:pointer; }
.ds-refine-x:hover{ color:var(--text); border-color:var(--text-3); }

@media (max-width: 640px){
  .dsi-context, .dsi-entry, .dsi-form, .dsi-palette, .dsi-record, .dsi-prior, .dsi-compare, .dsi-skip-note{ padding:12px 14px; }
  .dsi-sbs{ grid-template-columns:1fr; }
  .dsi-legend{ grid-template-columns:1fr; }
  .dsi-saverail{ align-items:stretch; flex-direction:column; }
  .dsi-savebtns{ margin-left:0; }
  .dsi-ftable input{ width:76px; }
}

/* ── DS Map (build 5, ds-map-build.md) — dsm-* map-vocabulary hooks only.
   Team colors are the --team-* fact tokens (top of the B-system :root);
   the SVG carries its styling inline (the §8 self-contained hand-off) —
   only interaction chrome lives here. ── */
.dsm-controls{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin:12px 0 4px; }
.dsm-controls .ds-ws-tabs{ margin-bottom:0; }
.dsm-layers{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.dsm-layer{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text-2); border:0.5px solid var(--border); border-radius:20px; padding:4px 11px; cursor:pointer; user-select:none; }
.dsm-layer.disabled{ opacity:.6; cursor:default; } /* honest-disabled: explained inline, never tooltip-only */
.dsm-scrub{ display:flex; gap:8px; flex-wrap:wrap; margin:8px 0 12px; }
.dsm-ph{ display:flex; flex-direction:column; gap:1px; padding:5px 12px; border-radius:10px; border:0.5px solid var(--border); cursor:pointer; user-select:none; transition:all .12s; }
.dsm-ph:hover{ border-color:var(--border-2); }
.dsm-ph .dsm-ph-name{ font-size:12px; font-weight:600; color:var(--text-2); }
.dsm-ph .dsm-ph-meta{ font-size:10px; color:var(--text-3); font-family:var(--mono); }
.dsm-ph.active{ background:var(--amber-dim); border-color:var(--warn-bdr); }
.dsm-ph.active .dsm-ph-name{ color:var(--amber); }
.dsm-ph.active .dsm-ph-meta{ color:var(--amber-2); }
.dsm-grid{ display:grid; grid-template-columns:minmax(0,1400px) 320px; gap:14px; align-items:start; } /* MR3: map column caps at its max useful width; below the cap this is 1fr */
.dsm-grid > *{ min-width:0; } /* grid items never inherit the frame's min-width — the card scrolls in its own container */
.dsm-scroll{ overflow-x:auto; }
.dsm-frame{ border:0.5px solid var(--border-2); border-radius:10px; overflow:hidden; background:#2b1f14; min-width:700px; } /* MR3: the min sets the text scale — 0.70× vs viewBox 1000 is the narrowest render anywhere (16px nominal × 0.70 = 11.2 ≥ the 11px floor); narrow viewports scroll the frame, never downscale it */
.dsm-bld{ cursor:pointer; }
.dsm-hover{ opacity:0; transition:opacity .12s; }
.dsm-bld:hover .dsm-hover{ opacity:.55; }
.dsm-note{ display:grid; gap:4px; border:0.5px solid var(--border); border-radius:var(--radius-sm); background:var(--bg-3); padding:9px 12px; font-size:12px; color:var(--text-2); line-height:1.55; margin-top:10px; max-width:78ch; }
.dsm-mapcol .ds-copy-sm{ max-width:78ch; } /* MR2: reading copy under a viewport-hungry map stays measure-capped */
.dsm-note-g::before{ content:"GAME"; background:#1d2733; color:#7fb3dd; }
.dsm-note-d::before{ content:"PLAY"; background:#2e2413; color:var(--amber); }
.dsm-note-g::before, .dsm-note-d::before{ font-size:9px; letter-spacing:1.2px; margin-right:8px; padding:1px 6px; border-radius:4px; vertical-align:1px; }
.dsm-insp{ border:0.5px solid var(--border); border-radius:var(--radius); background:var(--bg-2); padding:13px 15px; }
.dsm-insp-name{ font-size:14.5px; font-weight:600; color:var(--text); margin-bottom:6px; }
.dsm-chips{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:6px; }
.dsm-chip{ font-size:11px; border:0.5px solid var(--border-2); border-radius:var(--radius-sm); padding:2px 8px; color:var(--text-2); font-family:var(--mono); }
.dsm-chip.rate{ color:var(--amber-2); }
.dsm-chip.stage{ color:var(--deth-2); }
.dsm-chip.shield{ color:#7fb3dd; }
.dsm-effect{ font-size:12px; color:var(--text-2); line-height:1.55; margin-bottom:4px; }
.dsm-insp-k{ font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); margin:12px 0 6px; }
.dsm-insp-empty{ font-size:12px; color:var(--text-3); padding:10px 0; line-height:1.55; }
.dsm-insp-empty.pad0{ padding:2px 0; }
.dsm-teamrow{ margin:6px 0 4px; }
.dsm-teamchip{ display:inline-flex; align-items:center; font-size:11.5px; font-weight:700; border-radius:var(--radius-sm); padding:2px 9px; border:0.5px solid rgba(11,14,19,.5); }
.dsm-paircard{ border:0.5px solid var(--border); background:var(--bg-3); border-radius:var(--radius-sm); padding:8px 11px; margin-bottom:7px; }
.dsm-pair-label{ font-size:12px; font-weight:600; color:var(--text); margin-bottom:5px; }
.dsm-pair-sub{ font-size:10.5px; font-weight:400; color:var(--text-3); }
.dsm-member{ display:flex; align-items:center; gap:7px; padding:2px 0; min-width:0; }
.dsm-member-nm{ font-size:12.5px; color:var(--text); font-weight:550; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dsm-member-thp{ font-size:10.5px; color:var(--text-3); font-family:var(--mono); margin-left:auto; white-space:nowrap; }
.dsm-member-thp.bounded{ color:var(--amber-2); }
.dsm-tasking{ font-size:12px; color:var(--text-2); line-height:1.55; margin-top:6px; border-top:1px dashed var(--border); padding-top:6px; }
.dsm-gatenote{ font-size:11px; color:var(--text-3); line-height:1.5; margin-top:5px; }
@media (max-width: 900px){
  .dsm-grid{ grid-template-columns:1fr; } /* inspector stacks; the map scrolls in its own container */
}
/* The D-7 palette-review scaffold was stripped after the founder's MP6
   ruling (07/12) — mechanism preserved in prototypes/ds_map_palette_switch.html
   as the seed for Commander-configurable palettes. */

/* ── DS Brief (build 6, ds-brief-build.md) — dsb-* brief-vocabulary hooks only.
   The compose surface is COLUMN-CAPPED (UI-7: the editor); the reading copy
   inherits .ds-copy's measure; the raster sheets are not DOM surfaces — their
   width behaviour is the BF1 reading contract, declared per sheet in
   js/ds-brief-image.js. Existing idioms (.ds-copy, .ds-link-btn, .btn,
   .ds-nav-tab pills, .dsm-scrub phase pills) are reused, never restyled. */
.dsb-pubstrip{ border:0.5px solid var(--border); border-radius:var(--radius); background:var(--bg-2); padding:11px 14px; margin:12px 0; }
.dsb-pubrec{ font-size:12px; color:var(--text-2); font-family:var(--mono); margin-bottom:6px; }
.dsb-pubrec.muted{ color:var(--text-3); }
.dsb-stale{ border:0.5px solid var(--warn-bdr); background:var(--amber-dim); color:var(--amber); border-radius:var(--radius-sm); padding:8px 12px; font-size:12.5px; line-height:1.5; margin:8px 0; } /* container attention: amber, container only (UI-3) */
.dsb-adv{ border:0.5px solid var(--border-2); border-radius:var(--radius-sm); background:var(--bg-3); padding:10px 12px; margin:8px 0; }
.dsb-adv-head{ font-size:12px; font-weight:600; color:var(--text-2); margin-bottom:6px; }
.dsb-adv-row{ font-size:12.5px; color:var(--err-text); line-height:1.55; padding:2px 0; } /* imperative red text on condition — surface-applied, never tokened (UI-3) */
.dsb-blocks{ display:grid; gap:10px; margin:12px 0; max-width:900px; } /* column-capped compose surface */
.dsb-block{ border:0.5px solid var(--border); border-radius:var(--radius); background:var(--bg-2); padding:11px 14px; }
.dsb-block-head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:6px; }
.dsb-block-title{ font-size:13.5px; font-weight:700; color:var(--text); }
.dsb-badge{ font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-3); border:0.5px solid var(--border); border-radius:var(--radius-sm); padding:1px 7px; } /* ✎ + word, never color-only (UI-4/UI-5) */
.dsb-badge.manual{ color:var(--amber); border-color:var(--warn-bdr); }
.dsb-block-acts{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-left:auto; }
.dsb-danger{ color:var(--err-text); }
.dsb-flag{ font-size:11.5px; color:var(--amber); border-left:3px solid var(--warn-bdr); padding:4px 10px; margin:6px 0; line-height:1.5; }
.dsb-block-text{ font-size:13px; color:var(--text-2); line-height:1.65; }
.dsb-edit-ta{ width:100%; background:var(--bg-3); color:var(--text); border:0.5px solid var(--border-2); border-radius:var(--radius-sm); padding:9px 11px; font:12.5px/1.6 var(--mono); resize:vertical; }
.dsb-panel{ border:0.5px solid var(--border); border-radius:var(--radius); background:var(--bg-2); padding:11px 14px; margin:12px 0; max-width:900px; }
.dsb-panel-head{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:6px; }
.dsb-panel-head.sub{ margin-top:8px; }
.dsb-counter{ font-size:11px; font-family:var(--mono); color:var(--text-3); }
.dsb-counter.over{ color:var(--err-text); font-weight:700; }
.dsb-pre{ white-space:pre-wrap; word-break:break-word; font:12px/1.6 var(--mono); color:var(--text-2); background:var(--bg-3); border:0.5px solid var(--border); border-radius:var(--radius-sm); padding:10px 12px; margin:4px 0; }
.dsb-cards{ display:grid; gap:12px; margin:12px 0; max-width:900px; }
.dsb-sec{ border:0.5px solid var(--border); border-left:3px solid var(--border-2); border-radius:var(--radius); background:var(--bg-2); padding:11px 14px; } /* left border wears the --team-* fact token via the per-section classes below */
.dsb-sec-sustain{ border-left-color:var(--team-sustain); }
.dsb-sec-economy{ border-left-color:var(--team-economy); }
.dsb-sec-assault{ border-left-color:var(--team-assault); }
.dsb-sec-maneuver{ border-left-color:var(--team-maneuver); }
.dsb-sec-head{ font-size:13px; font-weight:700; color:var(--text); margin-bottom:8px; }
.dsb-sec-sub{ font-size:11px; font-weight:500; color:var(--text-3); margin-left:6px; }
.dsb-pair{ border:0.5px solid var(--border); background:var(--bg-3); border-radius:var(--radius-sm); padding:8px 11px; margin-bottom:7px; }
.dsb-pair-title{ font-size:12.5px; font-weight:600; color:var(--text); margin-bottom:4px; }
.dsb-unfilled{ color:var(--text-3); font-weight:500; }
.dsb-line{ font-size:12px; color:var(--text-2); font-family:var(--mono); line-height:1.6; }
.dsb-aa{ font-size:12px; color:var(--text); line-height:1.55; margin-top:4px; } /* the BF3 plain fact — words, no warn dress on member rows */
.dsb-mapwrap{ border:0.5px solid var(--border-2); border-radius:10px; overflow:hidden; background:#2b1f14; max-width:1100px; margin:6px 0; }
.dsb-preview-img{ max-width:100%; border:0.5px solid var(--border-2); border-radius:var(--radius-sm); margin-top:8px; }

/* ── DS AAR (build 7, ds-aar-build.md) — dsa-* AAR-vocabulary hooks only.
   Existing tokens throughout (no new hex): amber = container attention
   (the lapsed-draft banner, UI-3); --err-text = imperative advisory
   lines, surface-applied; every state carries its word (UI-4/UI-5 —
   sealed / draft / lapsed / carry as text, win/loss as words with no
   fact color minted). Reading copy measure-capped via .ds-copy; the
   form and panels column-capped like the brief's compose surface. ── */
.dsa-term{ color:var(--amber); } /* the glossed term carries the kicker accent (founder-ruled at the build-7 gate review); the when-note stays chrome */
.dsa-help{ display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; border:0.5px solid var(--border-2); background:var(--bg-3); color:var(--text-2); font-size:12px; font-weight:700; cursor:pointer; vertical-align:middle; }
.dsa-explain{ border:0.5px solid var(--border-2); border-radius:var(--radius); background:var(--bg-2); padding:11px 14px; margin:10px 0; max-width:900px; font-size:12.5px; color:var(--text-2); }
.dsa-q{ border:0.5px solid var(--border); border-radius:var(--radius); background:var(--bg-2); padding:11px 14px; margin:10px 0; max-width:900px; }
.dsa-q-head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:6px; }
.dsa-q-head > b{ font-size:13.5px; color:var(--text); }
.dsa-dim{ color:var(--text-3); }
.dsa-flag{ font-size:11.5px; color:var(--amber); border-left:3px solid var(--warn-bdr); padding:4px 10px; margin:6px 0; line-height:1.5; } /* divergence / correction-in-progress — the dsb-flag idiom */
.dsa-adv-row{ font-size:12.5px; color:var(--err-text); line-height:1.55; padding:2px 0; } /* imperative red text on condition — surface-applied, never tokened (UI-3) */
.dsa-resrow{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:6px 0 10px; }
.dsa-reslab{ font-size:12px; color:var(--text-2); }
.dsa-res{ border:0.5px solid var(--border-2); background:var(--bg-3); color:var(--text-2); border-radius:var(--radius-sm); padding:5px 16px; font-size:12.5px; font-weight:600; cursor:pointer; }
/* Selected result wears the Hue Semantics second jobs — friendly blue /
   adversary red (the us-vs-them outcome frame; the Intel overlay's
   .dsi-ours / .dsi-their-worst precedent). Words stay the primary
   channel (UI-5); existing tokens, nothing minted. Founder-ruled at the
   build-7 gate review. */
.dsa-res.win.on{ border-color:var(--blue-bdr); background:var(--blue-bg); color:var(--blue); box-shadow:inset 0 0 0 1px var(--blue-bdr); }
.dsa-res.loss.on{ border-color:var(--err-bdr); background:var(--err-bg); color:var(--red); box-shadow:inset 0 0 0 1px var(--err-bdr); }
.dsa-res:disabled{ opacity:.5; cursor:default; }
.dsa-ta{ width:100%; background:var(--bg-3); color:var(--text); border:0.5px solid var(--border-2); border-radius:var(--radius-sm); padding:9px 11px; font:12.5px/1.6 var(--mono); resize:vertical; }
.dsa-gate-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:6px 0; }
.dsa-gate-at{ font-size:11px; font-family:var(--mono); color:var(--text-3); min-width:110px; }
.dsa-gate-b{ border:0.5px solid var(--border-2); background:var(--bg-3); color:var(--text-2); border-radius:var(--radius-sm); padding:3px 12px; font-size:11.5px; font-family:var(--mono); font-weight:600; cursor:pointer; }
.dsa-gate-b.on{ border-color:var(--text-2); background:var(--bg-4); color:var(--text); box-shadow:inset 0 0 0 1px var(--text-3); }
.dsa-gate-b:disabled{ opacity:.5; cursor:default; }
.dsa-lines{ margin:8px 0; }
.dsa-lines-lab{ display:block; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-3); margin-bottom:4px; }
.dsa-line-row{ display:flex; align-items:center; gap:8px; margin:4px 0; }
.dsa-line-row input{ flex:1; background:var(--bg-3); color:var(--text); border:0.5px solid var(--border-2); border-radius:var(--radius-sm); padding:6px 10px; font-size:12.5px; }
.dsa-carry{ border:0.5px solid var(--border-2); background:var(--bg-3); color:var(--text-3); border-radius:var(--radius-sm); padding:3px 10px; font-size:11px; cursor:pointer; white-space:nowrap; } /* the word "carry" + state — never color-only */
.dsa-carry.on{ color:var(--text); border-color:var(--text-3); background:var(--bg-4); }
.dsa-carry:disabled{ opacity:.45; cursor:default; }
.dsa-fact{ font-size:12.5px; color:var(--text-2); line-height:1.6; padding:2px 0; }
.dsa-fact .k{ font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-3); margin-right:6px; }
.dsa-sealchip{ font-weight:600; } /* chrome — the word "sealed" carries the state */
.dsa-lapsedchip{ color:var(--amber); border-color:var(--warn-bdr); }
.dsa-strip{ border:0.5px solid var(--border); border-radius:var(--radius); background:var(--bg-2); padding:11px 14px; margin:10px 0; max-width:900px; }
.dsa-lapsed{ border:0.5px solid var(--warn-bdr); background:var(--amber-dim); color:var(--amber); border-radius:var(--radius-sm); padding:8px 12px; font-size:12.5px; line-height:1.5; margin:8px 0; } /* container attention: amber, container only (UI-3) */
.dsa-prompt{ border:0.5px solid var(--border); border-radius:var(--radius); background:var(--bg-2); padding:11px 14px; margin:10px 0; max-width:900px; }
.dsa-export{ border:0.5px solid var(--border); border-radius:var(--radius); background:var(--bg-2); padding:11px 14px; margin:10px 0; max-width:900px; }
.dsa-inc{ display:inline-flex; align-items:center; gap:5px; font-size:11px; color:var(--text-3); cursor:pointer; }
.dsa-arch{ border:0.5px solid var(--border); border-radius:var(--radius); background:var(--bg-2); padding:11px 14px; margin:12px 0; max-width:900px; }
.dsa-arch-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:7px 4px; border-top:0.5px solid var(--border); cursor:pointer; }
.dsa-arch-week{ font-size:12.5px; font-weight:600; color:var(--text); font-family:var(--mono); }
.dsa-arch-tog{ margin-left:auto; font-size:11px; color:var(--text-3); }
.dsa-arch-body{ border-left:3px solid var(--border-2); padding:2px 0 2px 12px; margin:4px 0 10px; }
.dsa-carrypanel{ margin:10px 0; }
.dsa-carryline{ font-size:12.5px; color:var(--text-2); line-height:1.7; padding:2px 0; }

/* ══════════════════════════════════════════════════════════════════════
   INSTANCE MIGRATION (07/20/2026) — landing, state chips, archived banner
   Additive-only (instance-migration-build.md §5.5). The landing column is
   measure-capped (UI-7); state chips are fact tokens, word + glyph, never
   color alone (UI-3/UI-5); the archived banner is container-attention
   amber on a container, values as text (UI-3). Existing tokens only.
   ══════════════════════════════════════════════════════════════════════ */
.wb-landing{ max-width:560px; margin:0 auto; padding:56px 20px 40px; }
.wb-landing-mark{ font-size:26px; font-weight:700; letter-spacing:.14em; color:var(--text); margin-bottom:4px; }
.wb-landing-mark span{ color:var(--amber); }
.wb-landing-lead{ color:var(--text-2); font-size:14px; margin-bottom:26px; }
.wb-inst-card{ display:block; background:var(--bg-2); border:0.5px solid var(--border); border-radius:var(--radius-lg); padding:16px 18px; margin-bottom:14px; text-decoration:none; color:var(--text); transition:border-color .15s ease, background .15s ease; }
.wb-inst-card:hover{ border-color:var(--border-2); background:var(--bg-3); }
.wb-inst-head{ display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.wb-inst-tag{ font-family:var(--mono); font-weight:600; color:var(--amber); font-size:15px; }
.wb-inst-name{ font-weight:600; font-size:15px; }
.wb-inst-meta{ color:var(--text-2); font-size:13px; margin-bottom:4px; }
.wb-inst-ctx{ color:var(--text-2); font-size:12px; font-family:var(--mono); }
.wb-inst-empty{ color:var(--text-2); padding:24px 0; }
.wb-landing-foot{ margin-top:30px; color:var(--text-3); font-size:12px; }
.wb-state-chip{ display:inline-flex; align-items:center; gap:4px; margin-left:auto; font-size:11px; font-weight:600; padding:2px 9px; border-radius:999px; border:0.5px solid var(--border); white-space:nowrap; }
.wb-state-chip .ti{ font-size:12px; }
.wb-chip-active{ color:var(--green); background:var(--green-bg); border-color:var(--green-bdr); }       /* affirmative fact token */
.wb-chip-archived{ color:var(--text-2); background:var(--bg-3); border-color:var(--border); }           /* neutral — never alarm-red: archived is a state, not an error */
.wb-archived-banner{ display:flex; align-items:center; gap:9px; background:var(--amber-dim); border:0.5px solid var(--warn-bdr); border-radius:var(--radius); padding:9px 13px; margin:12px 0 4px; color:var(--text); font-size:13px; line-height:1.5; }
.wb-archived-banner[hidden]{ display:none; }   /* display:flex would defeat the hidden attribute */
.wb-archived-banner .ti{ color:var(--amber); font-size:15px; flex:none; }
.wb-archived-banner b{ color:var(--amber); font-weight:600; }
.wb-dormant-note{ color:var(--text-2); }
.wb-dormant-note .ti{ color:var(--amber); font-size:12px; }
.ds-link-btn:disabled{ opacity:.5; cursor:not-allowed; }   /* honest-disabled: visible, inert, labeled at the site */