/* GoldMob / BULLION WAR — base skin. Direction (SPEC §17): early-2000s trading-floor portal —
   dark, dense, tabular, one blood-red accent, zero SPA chrome. Phase 6 polishes. */
:root {
  --ink: #d6d2c8;          /* aged newsprint */
  --dim: #8a857a;
  --bg: #14120f;           /* cigar-room black-brown */
  --panel: #1d1a16;
  --line: #2e2a24;
  --accent: #a31621;       /* dried-blood red — brand accent for BACKGROUNDS/borders (SPEC §17) */
  --accent-text: #e5606b;  /* the same red, lightened for FOREGROUND text so it clears WCAG AA
                              (≥4.5:1 on bg/panel — dried-blood red is only 2.4:1 as small text) */
  --gold: #c8a24a;         /* pinky-ring gold, sparingly */
  --focus: #ffcf5a;        /* keyboard focus ring — bright gold, high contrast on the dark skin */
  --ui-font: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --num-font: 'Courier New', ui-monospace, monospace;
  font-size: 15px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: Georgia, 'Times New Roman', serif; line-height: 1.4;
}

/* --- Accessibility (Phase 11) --- */
/* Skip link: hidden until a keyboard user tabs to it, then it drops in at the top-left so the
   first Tab bypasses the masthead/nav and lands on the page content. */
.skip-link {
  position: absolute; left: .5rem; top: -3rem; z-index: 200;
  background: var(--gold); color: #0d0b09; padding: .5rem .9rem; font-weight: 700;
  text-decoration: none; border-radius: 0 0 3px 3px; transition: top .12s ease;
}
.skip-link:focus { top: 0; }
main:focus { outline: none; }   /* focus moved here by the skip link — no stray ring on the region */
/* Visible keyboard focus everywhere (mouse clicks stay ring-free via :focus-visible). The dark
   skin previously relied on the browser default, which is nearly invisible on this palette.
   `[tabindex]` catches custom interactive controls but must EXCLUDE the skip target <main
   tabindex="-1"> — otherwise its specificity (0,2,0) beats `main:focus` (0,1,1) and rings the whole
   content column after a skip-link jump. `:not(main)` keeps main ring-free while still lighting up
   any real focusable widget. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:not(main):focus-visible {
  outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 1px;
}
.masthead {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 1rem; align-items: baseline;
  padding: .6rem 1rem; border-bottom: 3px double var(--gold); background: #0d0b09;
}
.brand {
  color: var(--gold); font-size: 1.5rem; letter-spacing: .18em; font-weight: 700;
  text-decoration: none; white-space: nowrap;
}
.brand:hover { color: #e2c46f; }
.brand span { color: var(--accent-text); }
.clock { font-family: var(--num-font); color: var(--dim); white-space: nowrap; }
.round-tag { min-width: 0; font-size: .85rem; color: var(--dim); letter-spacing: .04em; text-align: center; }
.round-tag small { opacity: .7; }
.round-tag a { color: var(--gold); text-decoration: none; }
.round-tag a:hover { text-decoration: underline; }
.hall-round { margin-bottom: 1.4rem; }
.hall-round h2 { border-bottom: 1px solid var(--gold); padding-bottom: .2rem; }
.nav-shell { background: var(--panel); }
.nav-shell > .nav-toggle {
  display: none; margin: 0; padding: .65rem .8rem; color: var(--ink);
  font-family: var(--ui-font); font-size: .85rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; list-style: none;
}
.nav-shell > .nav-toggle::-webkit-details-marker,
.gamenav .navgroup-label::-webkit-details-marker { display: none; }
.nav-shell > .nav-toggle::marker,
.gamenav .navgroup-label::marker { content: ''; }
.gamenav {
  display: flex; align-items: stretch; justify-content: space-between; gap: 0;
  border-bottom: 1px solid var(--line); background: var(--panel); font-family: var(--ui-font);
}
.nav-primary, .nav-utilities { display: flex; flex-wrap: wrap; align-items: stretch; min-width: 0; }
.nav-primary { flex: 1 1 auto; }
.nav-utilities { flex: 0 1 auto; margin-left: auto; }
.gamenav .nav-item, .gamenav .navgroup-label, .gamenav .nav-button {
  display: flex; align-items: center; justify-content: space-between; gap: .35rem;
  color: var(--ink); background: transparent; text-decoration: none; padding: .5rem .7rem;
  border: 0; border-right: 1px solid var(--line); border-radius: 0;
  font-family: var(--ui-font); font-size: .8rem; line-height: 1.2;
  text-transform: uppercase; letter-spacing: .06em;
}
.gamenav a.nav-item:hover, .gamenav .navgroup-label:hover, .gamenav .nav-button:hover {
  background: var(--accent); color: #fff;
}
.gamenav .admin { color: var(--gold); }
/* Native disclosures make grouped navigation operable by touch and keyboard without JavaScript. */
.gamenav .navgroup { position: relative; }
.gamenav .navgroup-label { margin: 0; cursor: pointer; user-select: none; }
.gamenav .navgroup-label::after { content: " \25BE"; font-size: .7em; opacity: .6; }   /* ▾ */
.gamenav .navgroup[open] > .navgroup-label::after { content: " \25B4"; }              /* ▴ */
.gamenav .navgroup-menu {
  display: none; position: absolute; left: 0; top: 100%; z-index: 60; min-width: 12rem;
  flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-top: none;
}
.gamenav .navgroup[open] > .navgroup-menu { display: flex; }
.gamenav .navgroup:nth-last-of-type(-n+3) > .navgroup-menu { left: auto; right: 0; }
.gamenav .navgroup-menu .nav-item {
  display: flex; align-items: flex-start; flex-direction: column;
  border-right: none; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.nav-lock-note {
  display: none; color: var(--dim); font-size: .68rem; font-weight: 400;
  line-height: 1.3; letter-spacing: 0; text-transform: none; white-space: normal;
}
.gamenav .nav-active, .gamenav .navgroup.nav-active > .navgroup-label {
  color: var(--gold); background: #241f17; box-shadow: inset 0 -2px 0 var(--gold);
}
.nav-utility-form { display: flex; margin: 0; }
.gamenav .nav-button { cursor: pointer; }
@media (hover: none), (pointer: coarse) {
  .gamenav .nav-item, .gamenav .navgroup-label, .gamenav .nav-button { min-height: 44px; }
  .nav-lock-note { display: block; }
}
.ticker {
  font-family: var(--num-font); font-size: .85rem;
  padding: .35rem 1rem; background: #0d0b09; border-bottom: 1px solid var(--line); color: var(--dim);
}
.ticker b { color: var(--ink); }
.badge { background: var(--accent); color: #fff; border-radius: 2px; padding: 0 .35em; }
.ticker .badge { color: #fff; }
/* Persistent resource/status bar: primary decisions always show; secondary inventory becomes a
   native disclosure on phones. Desktop keeps the original single-scan dense row. */
.statusbar { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .85rem; line-height: 1.5; }
.statusbar-primary, .statusbar-desktop-secondary, .statusbar-notices {
  display: contents;
}
.statusbar-more { display: none; }
.statusbar .chip { white-space: nowrap; }
.statusbar .chip .k { color: var(--dim); text-transform: uppercase; font-size: .7rem; letter-spacing: .04em; }
.statusbar .chip b { color: var(--ink); font-weight: 700; }
.statusbar .chip.warn b { color: var(--gold); }
.statusbar .chip.alert b { color: var(--accent-text); }
.statusbar .alert-flag { white-space: nowrap; font-weight: 700; }
.statusbar .alert-flag.warn { color: var(--gold); }
.statusbar .alert-flag.bad { color: var(--accent-text); }
.status-message { color: var(--gold); text-decoration: none; }
.status-message:hover { text-decoration: underline; }
.status-pause { color: var(--gold); }
.status-pause b { color: var(--gold); }
main { max-width: 960px; margin: 1.2rem auto; padding: 0 1rem; }
.panel { background: var(--panel); border: 1px solid var(--line); padding: 1.2rem 1.4rem; }
h1, h2 { font-weight: 700; letter-spacing: .03em; margin-top: 0; }
h1 { border-bottom: 1px solid var(--line); padding-bottom: .4rem; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { text-align: left; padding: .35rem .5rem; border-bottom: 1px solid var(--line); }
th { color: var(--gold); text-transform: uppercase; font-size: .75rem; letter-spacing: .08em; }
tr:hover td { background: #221e19; }
a { color: var(--gold); }
button, .btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff; border: 1px solid #7d1019;
  padding: .4rem .9rem; font-family: var(--ui-font); cursor: pointer; text-decoration: none;
  text-transform: uppercase; letter-spacing: .06em; font-size: .8rem; line-height: 1.2;
}
button:hover:not(:disabled), .btn:hover:not([aria-disabled="true"]) { background: #c01a27; }
button:disabled, button[aria-disabled="true"], .btn[aria-disabled="true"] {
  background: #332e28; border-color: var(--line); color: var(--dim);
  cursor: not-allowed; opacity: .65;
}
.btn[aria-disabled="true"] { pointer-events: none; }
input, select, textarea {
  max-width: 100%;
  background: #0d0b09; border: 1px solid var(--line); color: var(--ink);
  padding: .35rem .5rem; font-family: var(--num-font);
}
textarea { font-family: var(--ui-font); font-size: .9rem; line-height: 1.45; resize: vertical; }
.todo { color: var(--dim); font-style: italic; }
.dim { color: var(--dim); font-size: .85rem; }
.error { color: #ff5555; font-weight: 700; }
.flash { color: var(--gold); font-weight: 700; }
.auth-form { display: flex; flex-direction: column; gap: .8rem; max-width: 320px; margin: 1rem 0; }
.auth-form label { display: block; font-size: .85rem; color: var(--dim); }
.auth-form input, .auth-form select { width: 100%; margin-top: .25rem; }
.signup-link { font-size: .85rem; }
.inline-form { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-end; margin: .6rem 0; }
.inline-form label { font-size: .8rem; color: var(--dim); }
.stats-row {
  display: flex; flex-wrap: wrap; gap: 1.5rem; margin: .8rem 0;
  font-family: var(--num-font); font-size: .9rem;
}
.stats-row .label { color: var(--dim); font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; }
.hap-good { color: #5a5; }
.hap-warn { color: var(--gold); }
.hap-bad { color: var(--accent-text); font-weight: 700; }
.ops-panel .lim { color: var(--gold); text-transform: uppercase; font-size: .72rem; letter-spacing: .06em; }
.ops-panel td { vertical-align: top; }
details summary { cursor: pointer; color: var(--gold); font-size: .85rem; margin: .5rem 0; }
.action-form { display: flex; gap: .8rem; align-items: flex-end; margin: .8rem 0; }
.action-form label { font-size: .85rem; color: var(--dim); }
.action-form input { width: 6em; }
.result-panel { margin-top: .8rem; border-left: 3px solid var(--gold); }
.hint { font-weight: 700; font-size: 1rem; padding: .4rem 0; }
.hint-jackpot { color: var(--gold); font-size: 1.2rem; }
.hint-close { color: #5a5; }
.hint-mid { color: var(--ink); }
.hint-far { color: var(--dim); }
.panel + .panel { margin-top: .8rem; }
/* claim/production status pills (#2): worked=gold, idle=dim, depleted=red. */
.status { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; padding: 0 .35em; border-radius: 2px; border: 1px solid var(--line); }
.status-worked { color: #0d0b09; background: var(--gold); }
.status-idle { color: var(--dim); }
.status-depleted { color: #fff; background: var(--accent); }
/* "feed the step" availability tables on the producing pages */
.avail { margin: .6rem 0; }
.avail caption { text-align: left; color: var(--gold); text-transform: uppercase; font-size: .72rem; letter-spacing: .07em; padding-bottom: .2rem; }
/* Refine live estimate: own line with reserved height so filling it never shifts the
   Refine button down (CLS — gameplay report #8). */
#refineest { display: block; min-height: 1.3em; margin-top: .25rem; }
/* hover/focus exact-value hints on the dense status bar */
.statusbar abbr { text-decoration: none; border-bottom: 1px dotted var(--line); cursor: help; }
.self-row td { background: #2a2418; }
.online-star { color: var(--gold); font-weight: 700; }
.unread-row td { border-left: 3px solid var(--gold); }
footer { text-align: center; color: var(--dim); font-size: .75rem; padding: 1.5rem 0; }

/* --- player guidance layer (Phase 6 onboarding) --- */
.guide { color: var(--dim); font-size: .85rem; font-style: italic; line-height: 1.45; max-width: 64ch; margin: .25rem 0 .7rem; }
.help { border-bottom: 1px dotted var(--gold); cursor: help; }
.advisories { list-style: none; padding: 0; margin: .7rem 0; display: flex; flex-direction: column; gap: .35rem; }
.adv { font-size: .85rem; padding: .4rem .7rem; background: #0d0b09; border-left: 3px solid var(--line); }
.adv-warn { border-left-color: var(--accent); color: #ffb0b0; }
.adv-info { border-left-color: var(--gold); color: var(--ink); }
.standing .stats-row { gap: 1rem 2rem; }
.standing .up { color: #5a5; }
.standing .down { color: var(--accent-text); }
.gold { color: var(--gold); }
.bot-tag { font-size: .6rem; border: 1px solid var(--line); padding: 0 .3em; text-transform: uppercase; letter-spacing: .05em; vertical-align: middle; }

/* --- onboarding: briefing + first-steps tracker --- */
.intro .lead { font-size: 1.05rem; color: var(--ink); margin: .3rem 0 .8rem; }
.intro .story { line-height: 1.55; max-width: 70ch; margin: .5rem 0; }
.intro .loop {
  font-family: 'Courier New', monospace; color: var(--gold); letter-spacing: .03em;
  border-top: 1px solid var(--line); padding-top: .7rem; margin-top: .8rem;
}
.tut-bar { height: 6px; background: #0d0b09; border: 1px solid var(--line); margin: .4rem 0 1rem; }
.tut-bar span { display: block; height: 100%; background: var(--gold); }
.tut { list-style: none; padding: 0; margin: .5rem 0; display: flex; flex-direction: column; gap: .5rem; }
.tut-step { display: flex; gap: .8rem; align-items: flex-start; padding: .7rem .8rem; background: #0d0b09; border-left: 3px solid var(--line); }
.tut-step.tut-current { border-left-color: var(--gold); background: #1a1610; }
.tut-step.tut-done { opacity: .7; }
.tut-mark {
  flex: 0 0 1.7rem; width: 1.7rem; height: 1.7rem; line-height: 1.7rem; text-align: center;
  border: 1px solid var(--line); border-radius: 50%; font-size: .85rem; color: var(--dim); font-weight: 700;
}
.tut-done .tut-mark { color: #5a5; border-color: #3a5a3a; }
.tut-current .tut-mark { color: var(--gold); border-color: var(--gold); }
.tut-body { flex: 1; }
.tut-head { display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; }
.tut-body p { margin: .25rem 0 .4rem; }
.tut-tag { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; padding: 0 .4em; border: 1px solid; }
.tut-tag.done { color: #5a5; border-color: #3a5a3a; }
.tut-tag.now { color: var(--gold); border-color: var(--gold); }
.btn-link {
  display: inline-block; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--gold); text-decoration: none; border-bottom: 1px dotted var(--gold);
}
.intro-go { margin: 1rem 0; }
.intro-banner {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  border-left: 3px solid var(--gold); background: #1a1610;
}
.intro-banner-actions { display: flex; gap: .6rem; align-items: center; }
.intro-banner-actions form { margin: 0; }
.btn-ghost {
  background: transparent; color: var(--dim); border: 1px solid var(--line);
}
.btn-ghost:hover { background: #221e19; color: var(--ink); }

/* Armed big-spend confirm (turn-warn.js / A3): the button visibly flips so the second click is
   never a swallowed submit. Pulsing amber says "you must click me again, on purpose". */
.btn-confirm-large {
  background: #6a4a0a; color: #ffd479; border: 1px solid #ffb020; font-weight: 700;
  animation: confirmPulse 1s ease-in-out infinite;
}
@keyframes confirmPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,176,32,.5); } 50% { box-shadow: 0 0 0 4px rgba(255,176,32,0); } }
.standing-summary { font-size: 1.05rem; margin: .2rem 0 .6rem; }
details.rank-bots > summary { cursor: pointer; color: var(--dim); padding: .3rem 0; }

/* Buildings "immediate usefulness" hint (A4): is leveling this the right move NOW, or recruit first? */
.useful { font-weight: 700; }
.useful-high { color: #7fdf7f; }
.useful-low { color: #e0a85a; }

/* --- Playable-Game (MVP) dashboard + retention chrome --- */
.nav-locked { color: var(--dim) !important; opacity: .65; }
.nav-item.nav-locked { cursor: not-allowed; }
.nav-locked:hover { background: var(--line) !important; color: var(--dim) !important; }

/* "what should I do next?" hero card */
.nextstep {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  border-left: 4px solid var(--gold); background: #1a1610;
}
.nextstep-kicker { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; color: var(--gold); }
.nextstep-text { font-size: 1.1rem; margin: .25rem 0 0; color: var(--ink); }
.nextstep-go { white-space: nowrap; font-size: .95rem; padding: .6rem 1.2rem; }

/* headline stat cards */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; margin: .8rem 0; }
.card { background: var(--panel); border: 1px solid var(--line); border-top: 2px solid var(--line); padding: .7rem .8rem; }
.card-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--dim); }
.card-value { font-family: 'Courier New', monospace; font-size: 1.35rem; font-weight: 700; color: var(--ink); margin-top: .15rem; }
.card-value.gold { color: var(--gold); }
.card-sub { font-size: .68rem; color: var(--dim); margin-top: .15rem; }

.row-split { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.num { text-align: right; font-family: 'Courier New', monospace; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* unlock progress bar */
.prog { height: 10px; background: #0d0b09; border: 1px solid var(--line); margin: .35rem 0; }
.prog span { display: block; height: 100%; background: var(--gold); }

/* claim rarity badges */
.rarity { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; padding: .05em .45em; border: 1px solid var(--line); border-radius: 2px; white-space: nowrap; }
.rarity-common { color: var(--dim); }
.rarity-good { color: var(--ink); border-color: var(--dim); }
.rarity-rich { color: #5a5; border-color: #3a5a3a; }
.rarity-bonanza { color: var(--gold); border-color: var(--gold); font-weight: 700; }
.rarity-legendary { color: #ffd700; border-color: #ffd700; font-weight: 700; text-shadow: 0 0 6px rgba(255,215,0,.7); }
.strike { color: var(--gold); font-weight: 700; font-size: 1.05rem; }

/* achievements / milestones */
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .4rem; margin-top: .5rem; }
.ach { display: flex; align-items: center; gap: .4rem; padding: .35rem .5rem; background: #0d0b09; border: 1px solid var(--line); font-size: .8rem; }
.ach-mark { font-size: 1rem; }
.ach-on { border-color: var(--gold); }
.ach-on .ach-mark { color: var(--gold); }
.ach-off { opacity: .5; }
.ach-off .ach-mark { color: var(--dim); }
.production-counters { margin-top: 1rem; padding-top: .75rem; border-top: 1px solid var(--line); }
.production-counter-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .4rem 1rem; }
.production-counter-head h3 { margin: 0; }
.production-counter-table td { min-width: 9rem; vertical-align: top; }
.production-counter-table td small { display: block; color: var(--dim); }
.production-counter-value { display: block; color: var(--ink); font-family: 'Courier New', monospace; font-weight: 700; }
.production-counter-table .status { display: inline-block; margin-top: .25rem; }

/* activity feed */
.feed { list-style: none; padding: 0; margin: .4rem 0; display: flex; flex-direction: column; gap: .25rem; }
.feed li { font-size: .85rem; color: var(--ink); border-left: 2px solid var(--line); padding: .15rem .6rem; }

@media (max-width: 640px),
       (max-width: 1024px) and (max-height: 500px) and (pointer: coarse) {
  .masthead {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center; gap: .35rem .6rem; padding: .6rem .7rem;
  }
  .brand {
    grid-column: 1; grid-row: 1; min-width: 0; overflow: hidden;
    font-size: 1.15rem; letter-spacing: .12em; text-overflow: ellipsis;
  }
  .clock { grid-column: 2; grid-row: 1; font-size: .72rem; text-align: right; }
  .round-tag {
    grid-column: 1 / -1; grid-row: 2; font-size: .75rem; line-height: 1.4; text-align: left;
  }

  .nav-shell { border-bottom: 1px solid var(--line); }
  .nav-shell > .nav-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    min-height: 44px; cursor: pointer;
  }
  .nav-shell > .nav-toggle::after { content: " \25BE"; margin-left: auto; font-size: .75em; opacity: .7; }
  .nav-shell[open] > .nav-toggle::after { content: " \25B4"; }
  .nav-shell[open] > .nav-toggle { border-bottom: 1px solid var(--line); }
  .nav-shell:not([open]) > .gamenav { display: none; }
  .nav-shell[open] > .gamenav { display: block; border-bottom: 0; }
  .nav-primary { display: flex; width: 100%; }
  .nav-primary > .nav-item, .nav-primary > .navgroup { flex: 1 1 9rem; min-width: 0; }
  .nav-primary > .navgroup[open] { flex-basis: 100%; }
  .gamenav .nav-item, .gamenav .navgroup-label, .gamenav .nav-button {
    width: 100%; min-height: 44px; padding: .55rem .65rem; font-size: .78rem;
  }
  .gamenav .navgroup:not([open]) > .navgroup-menu { display: none; }
  .gamenav .navgroup[open] > .navgroup-menu { display: flex; }
  .gamenav .navgroup-menu {
    position: static; width: 100%; min-width: 0; border-right: 0; border-left: 0;
  }
  .gamenav .navgroup-menu .nav-item { min-height: 44px; white-space: normal; }
  .nav-lock-note { display: block; }
  .nav-utilities {
    display: flex; width: 100%; margin-left: 0; border-top: 1px solid var(--line);
  }
  .nav-utilities > .nav-item, .nav-utilities > form { flex: 1 1 8rem; min-width: 0; }
  .nav-utility-form, .nav-utility-form .nav-button { width: 100%; }
  .public-nav { display: flex; flex-wrap: wrap; }
  .public-nav > a { flex: 1 1 9rem; width: auto; }

  .ticker { padding: .15rem .65rem; }
  .statusbar { align-items: center; gap: .15rem .5rem; font-size: .72rem; }
  .statusbar-primary {
    display: flex; flex: 1 1 13rem; flex-wrap: wrap;
    align-items: baseline; gap: .08rem .55rem;
  }
  .statusbar-desktop-secondary { display: none; }
  .statusbar-more { display: block; flex: 0 0 auto; margin-left: auto; }
  .statusbar-more[open] { flex: 1 0 100%; margin-left: 0; }
  .statusbar-more > summary {
    display: flex; align-items: center; width: max-content; min-height: 44px;
    margin: 0 0 0 auto; padding: 0 .55rem; color: var(--gold); background: var(--panel);
    border: 1px solid var(--line); cursor: pointer; text-transform: uppercase; letter-spacing: .05em;
  }
  .statusbar-mobile-secondary {
    display: none; flex-wrap: wrap; align-items: baseline; gap: .08rem .55rem;
    margin-top: .2rem; padding: .35rem 0 .15rem; border-top: 1px solid var(--line);
  }
  .statusbar-more[open] > .statusbar-mobile-secondary { display: flex; }
  .statusbar-notices {
    display: flex; flex: 1 0 100%; flex-wrap: wrap;
    align-items: center; gap: .2rem .6rem;
  }
  .statusbar-notices:empty { display: none; }
  .statusbar .alert-flag { white-space: normal; }
  .status-message { display: inline-flex; align-items: center; min-height: 44px; gap: .25rem; }

  main { margin-top: .6rem; padding: 0 .5rem; }
  .panel { padding: .8rem; }
  /* On a phone, a dense table can be wider than the screen. Make the PANEL the horizontal-scroll
     container so the table scrolls inside it (all columns stay reachable) instead of pushing the
     whole page sideways. Desktop panels are untouched (overflow stays visible). Tables already
     wrapped in an explicit .table-wrap keep scrolling in that inner container. */
  .panel { overflow-x: auto; }
  .stats-row { gap: .8rem; font-size: .8rem; }
  table { font-size: .82rem; }
  th, td { padding: .35rem .3rem; }                          /* taller rows = easier taps */
  button, .btn { min-height: 44px; padding: .55rem 1rem; font-size: .85rem; }
  input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select { min-height: 44px; }
  input, select, textarea { font-size: 16px; }
  details > summary { min-height: 44px; }
  .action-form { flex-direction: column; align-items: stretch; }
  .action-form input { width: 100%; }
  .inline-form { flex-direction: column; align-items: stretch; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .row-split { grid-template-columns: 1fr; gap: .6rem; }
  .nextstep { flex-direction: column; align-items: stretch; }
  .nextstep-go { text-align: center; }
}

/* claim-selection bulk controls + metal-mix (MVP rebase) */
.bulk-toolbar { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0 .75rem; }
.bulk-toolbar form { display: inline; margin: 0; }
.metal-mix { color: var(--dim); font-size: .85em; white-space: nowrap; }
.news-list { list-style: none; padding-left: 0; margin: .25rem 0; }
.news-list li { padding: .2rem 0; border-bottom: 1px solid var(--line); }
.news-list li.news-shock { color: #d98a8a; }
.news-list li.news-spike { color: #8ad9a0; }
.daily-card .daily-odds { font-size: .85em; }
.band { padding: 0 .35rem; border-radius: .2rem; font-size: .85em; }
.band-weak { color: #8ad9a0; }
.band-even { color: var(--dim); }
.band-strong { color: #d98a8a; }

/* live notifications (notify.js): server-driven changes (raids, system/round notices) toast in
   without a reload, surfacing the inbox messages the ticker only counted before. */
.toast-stack { position: fixed; right: .8rem; bottom: .8rem; z-index: 1000; display: flex; flex-direction: column; gap: .5rem; max-width: min(92vw, 24rem); }
.toast {
  display: flex; align-items: flex-start; gap: .6rem;
  background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--accent);
  padding: .6rem .7rem; color: var(--ink); font-size: .85rem; box-shadow: 0 2px 10px rgba(0,0,0,.5);
}
.toast.toast-round { border-left-color: var(--gold); }
.toast .toast-msg { flex: 1; line-height: 1.35; }
.toast .x {
  flex: none; background: transparent; border: 0; color: var(--dim); cursor: pointer;
  font-size: 1.1rem; line-height: 1; padding: 0 .15rem;
}
.toast .x:hover { color: var(--ink); }

/* Logout is a POST (Phase 4 security): render its submit button as a plain nav link. */
.logout-form { display: inline; }
.linklike { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; }
.linklike:hover { opacity: .8; }

/* Responsive tables (Phase 11): a dense trading-floor table can be wider than a phone. Wrapping the
   table in .table-wrap lets IT scroll horizontally inside the panel while the page body stays put.
   A subtle right-edge fade hints there's more to scroll to. */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap > table { min-width: max-content; }
@media (max-width: 640px),
       (max-width: 1024px) and (max-height: 500px) and (pointer: coarse) {
  .table-wrap { margin: 0 -.2rem; }
}

/* Bullion Casino — dense, server-rendered tables with a touch-friendly wager form. */
.casino-game-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.casino-game-card { display: block; color: var(--ink); text-decoration: none; }
.casino-game-card:hover, .casino-game-card.active {
  border-color: var(--gold); border-top-color: var(--gold); background: #221e19;
}
.casino-odds { margin-top: .55rem; color: var(--gold); font-size: .75rem; }
.casino-result { border-left-width: 4px; }
.casino-result.casino-win { border-left-color: #5a5; }
.casino-result.casino-loss { border-left-color: var(--accent-text); }
.casino-result .label, .casino-confirm .label { display: block; margin-bottom: .15rem; }
.casino-confirm-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .7rem; margin-top: 1rem; }
.casino-confirm-actions .btn-ghost { display: inline-flex; align-items: center; min-height: 44px; padding: .5rem 1rem; text-decoration: none; }
.casino-confirm-actions .danger { background: #7a261f; border-color: #b94a3f; }
.casino-form {
  display: grid; grid-template-columns: minmax(10rem, 1fr) minmax(10rem, 1fr);
  gap: .7rem 1rem; margin-top: 1rem; max-width: 720px;
}
.casino-form > fieldset, .casino-form > .casino-presets, .casino-form > .casino-preview,
.casino-form > p, .casino-form > button { grid-column: 1 / -1; }
.casino-form label { color: var(--dim); font-size: .85rem; align-self: end; }
.casino-form select, .casino-form input[type="number"] { width: 100%; min-height: 44px; }
.casino-form fieldset { border: 1px solid var(--line); padding: .7rem; }
.casino-form legend { color: var(--gold); font-weight: 700; }
.casino-choices, .casino-presets { display: flex; flex-wrap: wrap; gap: .55rem; }
.casino-choices label {
  display: inline-flex; align-items: center; gap: .35rem; min-height: 44px;
  padding: .35rem .65rem; border: 1px solid var(--line); background: #0d0b09;
}
.casino-preview { border-left: 3px solid var(--gold); padding: .5rem .8rem; background: #181510; }
.casino-preview p { margin: .25rem 0; }
.casino-paytable { max-width: 34rem; }

/* The Back Room — compact social-wager lobby. The lobby alone is htmx-polled; every create,
   join and cancel remains an ordinary server-authoritative POST/redirect/GET action. */
.casino-closed-loop {
  border-left: 3px solid var(--gold); margin-top: .75rem; padding: .55rem .75rem;
  background: #181510; font-size: .82rem; line-height: 1.45;
}
.back-room-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.back-room-capacity { flex: none; min-width: 11rem; text-align: right; }
.back-room-games, .back-room-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem;
}
.back-room-games { margin-top: .8rem; }
.back-room-create {
  border: 1px solid var(--line); border-top: 2px solid var(--gold); padding: .75rem;
  background: #15120f;
}
.back-room-create h3, .back-room-table h3 { margin: 0 0 .35rem; }
.back-room-create .casino-form { display: block; margin-top: .65rem; }
.back-room-create .casino-form > label { display: block; margin-top: .55rem; }
.back-room-create .casino-form button { margin-top: .7rem; width: 100%; }
.back-room-lobby { margin-top: 1rem; scroll-margin-top: 1rem; }
.back-room-section + .back-room-section { margin-top: 1.1rem; }
.back-room-grid { margin-top: .55rem; }
.back-room-table {
  border: 1px solid var(--line); border-left: 3px solid var(--gold); padding: .65rem .7rem;
  background: #11100e; min-width: 0;
}
.back-room-table.mine { border-left-color: #5a8; }
.back-room-table.result { border-left-color: #987532; }
.back-room-meta { display: flex; flex-wrap: wrap; gap: .25rem .7rem; margin: .3rem 0; font-size: .8rem; }
.back-room-seats { display: grid; gap: .35rem; margin-top: .55rem; }
.back-room-seat {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  min-height: 38px; border: 1px solid var(--line); padding: .3rem .45rem; background: #0d0b09;
}
.back-room-seat.claimed { border-color: #4b4539; }
.back-room-seat.mine { border-color: #5a8; }
.back-room-seat form { margin: 0; }
.back-room-seat button { min-height: 34px; padding: .25rem .55rem; }
.back-room-cancel { margin-top: .6rem; }
.back-room-cancel button { background: #3a2722; border-color: #71453b; }
.back-room-result-reveal { scroll-margin-top: 1rem; }
.back-room-result-reveal .stats-row { margin-top: .6rem; }
.casino-wire { scroll-margin-top: 1rem; }

@media (max-width: 640px),
       (max-width: 1024px) and (max-height: 500px) and (pointer: coarse) {
  .casino-game-grid, .casino-form { grid-template-columns: 1fr; }
  .casino-form > * { grid-column: 1; }
  .casino-game-card { min-height: 44px; }
  .casino-presets button, .casino-choices label { flex: 1 1 auto; min-height: 44px; }
  .back-room-head { display: block; }
  .back-room-capacity { min-width: 0; text-align: left; }
  .back-room-games, .back-room-grid { grid-template-columns: 1fr; }
  .back-room-create { padding: .6rem; }
  .back-room-table { padding: .55rem; }
  .back-room-seat { min-height: 44px; }
  .back-room-seat button { min-height: 44px; }
}

/* Respect the OS "reduce motion" setting: kill the confirm-button pulse, htmx swaps' incidental
   transitions, and the skip-link slide. Motion-sensitive players get a still UI. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .btn-confirm-large { animation: none !important; }
}

/* --- Command workspace redesign ------------------------------------------------------------ */
:root {
  --ink: #e6e3dc;
  --dim: #9da1a8;
  --bg: #101214;
  --panel: #191c20;
  --panel-raised: #20242a;
  --line: #343940;
  /* A stronger rule than --line, for the divider that opens a list or section (building list,
     capital options, vault metals, news items). It was USED in four places but never DECLARED:
     an undefined custom property makes the whole `border: 1px solid var(--line-strong)`
     declaration invalid at computed-value time, so those borders silently fell back to
     currentColor instead of a divider. Round 7 decision pack change #15. */
  --line-strong: #4a515a;
  --accent: #a91d2b;
  --accent-text: #f06b78;
  --gold: #d5ad56;
  --good: #68bd83;
}
body { font-family: var(--ui-font); line-height: 1.45; }
.masthead {
  align-items: center;
  padding: .55rem clamp(.7rem, 2vw, 1.4rem);
  background: #0b0d0f;
  border-bottom: 1px solid #4a4030;
}
.brand { font-family: Georgia, 'Times New Roman', serif; font-size: 1.35rem; letter-spacing: .14em; }
.round-tag { letter-spacing: 0; }
.clock-short { display: none; }
.gamenav { background: #15181b; }
.gamenav .nav-item, .gamenav .navgroup-label, .gamenav .nav-button { padding: .48rem .68rem; letter-spacing: .04em; }
.gamenav .nav-active, .gamenav .navgroup.nav-active > .navgroup-label { background: #22262b; }
.gamenav .navgroup-menu { background: #171a1e; box-shadow: 0 12px 28px rgba(0,0,0,.45); }

.command-strip {
  position: relative; z-index: 45; display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 38px; background: #0c0e10; border-bottom: 1px solid var(--line);
  font-family: var(--num-font);
}
.ticker {
  display: flex; align-items: center; min-width: 0;
  padding: .35rem clamp(.7rem, 2vw, 1.4rem);
  background: transparent; border: 0;
}
.statusbar { width: 100%; flex-wrap: nowrap; gap: .45rem .9rem; }
.statusbar-primary { display: flex; flex: 0 1 auto; flex-wrap: wrap; gap: .15rem .9rem; }
.statusbar-notices { display: flex; flex: 1 1 auto; justify-content: flex-end; gap: .5rem; }
.statusbar-more { position: relative; display: block; flex: 0 0 auto; margin-left: auto; }
.statusbar-more > summary, .spot-shell > summary {
  min-height: 30px; display: flex; align-items: center; margin: 0; padding: .2rem .65rem;
  color: var(--gold); background: #171a1e; border: 1px solid var(--line);
  font: 700 .7rem/1 var(--ui-font); letter-spacing: .04em; text-transform: uppercase; list-style: none;
}
.statusbar-more > summary::-webkit-details-marker, .spot-shell > summary::-webkit-details-marker { display: none; }
.statusbar-more > summary::after, .spot-shell > summary::after { content: " +"; margin-left: .35rem; }
.statusbar-more[open] > summary::after, .spot-shell[open] > summary::after { content: " -"; }
.statusbar-mobile-secondary {
  position: absolute; right: 0; top: calc(100% + .35rem); z-index: 90;
  display: none; width: min(34rem, 88vw); padding: .75rem;
  background: #171a1e; border: 1px solid var(--line); box-shadow: 0 16px 34px rgba(0,0,0,.55);
}
.statusbar-more[open] > .statusbar-mobile-secondary { display: flex; flex-wrap: wrap; gap: .55rem 1rem; }
.spot-shell { display: flex; align-items: center; border-left: 1px solid var(--line); }
.spot-shell > summary { display: none; }
.spot-ticker {
  display: flex; align-items: center; gap: .5rem; height: 100%;
  padding: .3rem 1rem; color: var(--dim); font-size: .72rem; white-space: nowrap;
}
.spot-chip b { color: var(--ink); }

main { max-width: 1180px; margin: 1rem auto; padding: 0 clamp(.65rem, 2vw, 1.25rem); }
.panel {
  padding: clamp(.9rem, 2vw, 1.25rem); background: var(--panel);
  border-color: var(--line); border-radius: 4px;
}
h1, h2, h3 { letter-spacing: 0; line-height: 1.2; }
h1 { font-size: clamp(1.35rem, 2.2vw, 1.8rem); border: 0; padding: 0; margin-bottom: .45rem; }
h2 { font-size: 1.05rem; }
h3 { font-size: .95rem; }
hr { height: 1px; margin: 1rem 0; background: var(--line); border: 0; }
button, .btn { border-radius: 3px; letter-spacing: .04em; font-weight: 700; }
.btn-ghost { background: #171a1e; color: var(--ink); }
.btn-ghost:hover { background: #262b31; }
.eyebrow {
  margin: 0 0 .25rem; color: var(--gold); font-size: .68rem; font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase;
}
.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: .65rem; }
.section-heading h1, .section-heading h2, .section-heading h3 { margin: 0; }
.section-heading > a, .section-heading > span { flex: 0 1 auto; min-width: 0; font-size: .78rem; }
.button-row { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1rem; }
.adv { border-radius: 2px; }
.adv-bad { color: #ff9aa4; border-left-color: var(--accent-text); }
.adv-good { color: #8ed6a4; border-left-color: var(--good); }
.hap-good { color: var(--good); }
.details-body { padding: .5rem 0 .25rem; }

/* Operation */
.command-deck { padding: 0; overflow: hidden; border-top: 3px solid var(--gold); background: #171a1e; }
.command-objective {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  gap: 1.5rem; padding: 1.25rem 1.35rem 1rem;
}
.command-objective h1 { font-size: clamp(1.55rem, 3vw, 2.25rem); }
.command-objective p:not(.eyebrow) { max-width: 72ch; margin: 0; color: var(--dim); }
.command-go { min-width: 8rem; min-height: 48px; }
.command-vitals { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.vital { min-width: 0; padding: .7rem 1rem; border-right: 1px solid var(--line); }
.vital:last-child { border-right: 0; }
.vital span, .metric-row span, .input-summary span, .daily-actions span, .runway-strip span,
.attack-readiness span, .tool-balance span, .order-dock span {
  display: block; color: var(--dim); font-size: .67rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
}
.vital b { display: block; overflow: hidden; font: 700 1.25rem/1.3 var(--num-font); text-overflow: ellipsis; }
.vital small, .metric-row small, .daily-actions small, .tool-balance small { display: block; color: var(--dim); font-size: .7rem; }
.campaign-rail { padding: .8rem 1.1rem 1rem; }
.arc-stages {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0;
  margin: .45rem 0 0; padding: 0; list-style: none;
}
.arc-stage { position: relative; display: flex; align-items: center; gap: .4rem; min-width: 0; color: var(--dim); font-size: .72rem; }
.arc-stage::after { content: ""; position: absolute; left: 1.35rem; right: 0; top: .7rem; height: 1px; background: var(--line); }
.arc-stage:last-child::after { display: none; }
.arc-stage > span { position: relative; z-index: 1; }
.arc-mark {
  display: grid; place-items: center; flex: 0 0 1.45rem; width: 1.45rem; height: 1.45rem;
  background: #111315; border: 1px solid var(--line); border-radius: 50%; font: 700 .68rem/1 var(--num-font);
}
.arc-done .arc-mark { color: #111315; background: var(--good); border-color: var(--good); }
.arc-current { color: var(--ink); font-weight: 700; }
.arc-current .arc-mark { color: #111315; background: var(--gold); border-color: var(--gold); }
.campaign-hint { margin: .45rem 0 0 1.85rem; color: var(--dim); font-size: .78rem; }
.operation-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .8rem; margin-top: .8rem; }
.operation-grid > .panel { margin-top: 0; }
.metric-row, .input-summary, .attack-readiness {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0; background: #131518; border: 1px solid var(--line);
}
.metric-row > div, .input-summary > div, .attack-readiness > div { min-width: 0; padding: .65rem .75rem; border-right: 1px solid var(--line); }
.metric-row > div:last-child, .input-summary > div:last-child, .attack-readiness > div:last-child { border-right: 0; }
.metric-row b, .input-summary b, .attack-readiness b { display: block; margin-top: .1rem; font-family: var(--num-font); }
.daily-actions { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: .75rem; border-top: 1px solid var(--line); }
.daily-actions > div {
  display: flex; flex-direction: column; align-items: flex-start; gap: .35rem;
  padding: .7rem .7rem 0; border-right: 1px solid var(--line);
}
.daily-actions > div:last-child { border-right: 0; }
.daily-actions form { margin: 0; }
.daily-actions button { min-height: 36px; padding: .35rem .65rem; }
.runway-strip { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: .8rem; border-top: 1px solid var(--line); }
.runway-strip > div { padding: .6rem .65rem 0; border-right: 1px solid var(--line); }
.runway-strip > div:last-child { border-right: 0; }
.runway-strip b { font-family: var(--num-font); }
.runway-strip .warn b { color: var(--gold); }
.runway-strip .bad b { color: var(--accent-text); }
.standing-line { font-size: 1.05rem; }
.operation-records > details { border-top: 1px solid var(--line); }
.operation-records > details > summary {
  display: flex; justify-content: space-between; min-height: 44px; align-items: center;
  margin: 0; color: var(--ink); font-size: .85rem; font-weight: 700;
}
.operation-records > details > summary b { margin-left: auto; color: var(--gold); font-family: var(--num-font); }

/* Action pages */
.action-workspace { border-top: 3px solid var(--gold); }
.primary-action {
  display: grid; grid-template-columns: minmax(8rem, 1fr) auto auto; align-items: end;
  gap: .65rem; margin: 1rem 0 .75rem; padding: .8rem; background: #131518; border: 1px solid var(--line);
}
.primary-action label:first-of-type { min-width: 0; }
.primary-action input:not([type="checkbox"]), .primary-action select { width: 100%; min-height: 42px; }
.primary-action .confirm-unsafe { grid-column: 1 / -1; display: flex; align-items: center; gap: .45rem; }
.primary-action .confirm-unsafe input { width: auto; }
.input-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: .8rem; }
.action-context, .supply-preview, .runway-tools, .casino-policy, .casino-paytable-details { margin-top: .7rem; border-top: 1px solid var(--line); }
.action-context > summary, .supply-preview > summary, .runway-tools > summary,
.casino-policy > summary, .casino-paytable-details > summary {
  display: flex; align-items: center; justify-content: space-between; min-height: 44px; margin: 0; color: var(--gold);
}
.supply-preview .sp-summary { margin-left: 1rem; font-weight: 400; }
.action-estimate { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .35rem 1rem; margin: -.25rem 0 .5rem; font-size: .8rem; }
.ops-summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.ops-summary h2 { margin: 0 0 .35rem; }
.ops-summary .adv { margin-bottom: 0; }
.ops-details { border-top: 1px solid var(--line); margin-top: .75rem; }

/* Shared tabs */
.workspace-tabs { margin-top: .8rem; }
.segmented-tabs { display: flex; gap: 0; overflow-x: auto; border: 1px solid var(--line); background: #111315; }
.segmented-tabs { scrollbar-width: none; }
.segmented-tabs::-webkit-scrollbar { display: none; }
.segmented-tabs [role="tab"], .segmented-tabs > a {
  flex: 0 0 auto; min-height: 44px; padding: .55rem 1rem; color: var(--dim);
  background: transparent; border: 0; border-right: 1px solid var(--line); border-radius: 0;
}
.segmented-tabs > a { display: inline-flex; align-items: center; text-decoration: none; white-space: nowrap; }
.segmented-tabs [role="tab"][aria-selected="true"] { color: #111315; background: var(--gold); }
[data-tab-panel][hidden] { display: none !important; }

/* Supply House */
.tool-header {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  gap: 1rem; border-top: 3px solid var(--gold);
}
.tool-header .flash { grid-column: 1 / -1; margin: 0; }
.tool-balance { min-width: 12rem; text-align: right; }
.tool-balance b { display: block; font: 700 1.35rem/1.3 var(--num-font); color: var(--gold); }
.store-layout { display: grid; grid-template-columns: minmax(0, 1fr) 15rem; gap: .8rem; align-items: start; margin-top: .8rem; }
.store-department { margin-top: 0 !important; }
.store-table .buyqty { min-width: 18rem; }
.qtyin { width: 6.5rem; min-height: 40px; }
.qty-presets { display: inline-flex; flex-wrap: wrap; gap: .25rem; margin-left: .25rem; vertical-align: middle; }
.qty-presets button { min-height: 34px; padding: .25rem .5rem; }
.order-dock {
  position: sticky; top: .8rem; padding: 1rem; background: var(--panel-raised);
  border: 1px solid var(--line); border-top: 3px solid var(--gold); border-radius: 4px;
}
.order-dock > div { display: flex; justify-content: space-between; gap: .6rem; padding: .35rem 0; border-bottom: 1px solid var(--line); }
.order-dock > div span { display: inline; }
.order-dock > div b { font-family: var(--num-font); }
.order-dock button { width: 100%; margin-top: .6rem; }
.sellback-form { display: flex; flex-wrap: wrap; gap: .45rem; }
.sellback-form input { width: 7rem; }

/* Casino */
.casino-hero { border-top: 3px solid var(--gold); }
.casino-hero .casino-policy { margin-bottom: -.4rem; }
.casino-play-panel { border-left: 3px solid var(--gold); }
.casino-payout { color: var(--gold); font: 700 1rem/1 var(--num-font); }
.game-switcher { display: flex; gap: .35rem; overflow-x: auto; margin-bottom: .7rem; }
.game-switcher a {
  flex: 0 0 auto; padding: .45rem .7rem; color: var(--dim); background: #121417;
  border: 1px solid var(--line); border-radius: 3px; text-decoration: none; font-size: .78rem;
}
.game-switcher a span { color: var(--gold); font-family: var(--num-font); }
.game-switcher a.active { color: var(--ink); border-color: var(--gold); background: #272318; }
.casino-form { margin-top: .65rem; }
.casino-form > label { display: block; }
.casino-limit-note { margin: 0; align-self: center; }
.casino-balances details > summary { min-height: 44px; margin: 0; color: var(--ink); font-weight: 700; }
.casino-workspace .panel:first-child { margin-top: .8rem; }

/* PvP */
.flow-steps {
  display: grid; grid-template-columns: repeat(3, 1fr); margin-bottom: .8rem;
  border: 1px solid var(--line); background: #121417;
}
.flow-steps span { padding: .55rem .7rem; color: var(--dim); border-right: 1px solid var(--line); font-size: .78rem; }
.flow-steps span:last-child { border-right: 0; }
.flow-steps b {
  display: inline-grid; place-items: center; width: 1.4rem; height: 1.4rem;
  margin-right: .35rem; border: 1px solid var(--line); border-radius: 50%;
}
.flow-steps .current { color: var(--ink); background: #272318; }
.flow-steps .current b { color: #111315; background: var(--gold); border-color: var(--gold); }
.flow-steps .done b { color: #111315; background: var(--good); border-color: var(--good); }
.attack-workspace { border-top: 3px solid var(--accent-text); }
.move-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.move-option, .target-option {
  display: grid; gap: .65rem; padding: .85rem;
  background: #131518; border: 1px solid var(--line); border-radius: 4px;
}
.move-option h2, .target-option h2 { margin: .3rem 0 0; }
.move-option p { margin: 0; }
.move-option .btn, .target-option .btn { justify-self: start; align-self: end; }
.target-toolbar {
  display: grid; grid-template-columns: minmax(14rem, 1fr) minmax(10rem, .45fr) auto;
  gap: .65rem; align-items: end; margin-bottom: .65rem; padding: .7rem;
  background: #131518; border: 1px solid var(--line);
}
.target-toolbar label { margin: 0; }
.target-toolbar input, .target-toolbar select { width: 100%; }
.target-toolbar output { padding-bottom: .7rem; color: var(--dim); white-space: nowrap; }
.target-list { display: grid; gap: .55rem; }
.target-more { margin-top: .65rem; }
.target-option { grid-template-columns: minmax(10rem, 1fr) minmax(12rem, 1fr) auto; align-items: center; }
.target-option[hidden] { display: none; }
.target-option > div { display: flex; align-items: baseline; gap: .6rem; }
.target-option dl { display: flex; gap: 1.5rem; margin: 0; }
.target-option dl div { min-width: 7rem; }
.target-option dt { color: var(--dim); font-size: .68rem; text-transform: uppercase; }
.target-option dd { margin: .15rem 0 0; font-family: var(--num-font); }
.attack-confirm { display: flex; flex-direction: column; }
.attack-readiness { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: .65rem 0; }
.attack-confirm > .attack-form { order: 2; }
.attack-confirm > .attack-plan { order: 3; }
.attack-confirm > p:last-child { order: 5; }
.attack-plan { margin-top: .75rem; padding: .7rem 0 0; border-top: 1px solid var(--line); }
.attack-plan p:first-child { margin-top: 0; }
.attack-form {
  flex-direction: column; align-items: stretch; padding: .8rem;
  background: #131518; border: 1px solid var(--line);
}
.attack-form > label { max-width: 32rem; }
.attack-form > button[type="submit"] { align-self: flex-start; min-height: 46px; }

@media (max-width: 800px) {
  .spot-shell { display: block; border-left: 0; }
  .spot-shell > summary { display: flex; min-height: 38px; border-top: 0; border-bottom: 0; }
  .spot-shell:not([open]) > .spot-ticker { display: none; }
  .spot-shell[open] { position: absolute; right: .5rem; top: .2rem; z-index: 95; background: #171a1e; }
  .spot-shell[open] > .spot-ticker { height: auto; border: 1px solid var(--line); }
  .operation-grid, .store-layout { grid-template-columns: 1fr; }
  .order-dock { position: static; display: grid; grid-template-columns: repeat(2, 1fr); gap: .35rem .7rem; }
  .order-dock .eyebrow, .order-dock p { grid-column: 1 / -1; }
  .order-dock button { margin: 0; }
  .target-option { grid-template-columns: 1fr auto; }
  .target-option dl { grid-column: 1; }
  .target-option .btn { grid-column: 2; grid-row: 1 / 3; }
}

@media (max-width: 640px),
       (max-width: 1024px) and (max-height: 500px) and (pointer: coarse) {
  .masthead { padding: .45rem .65rem; }
  .clock-full, .clock small { display: none; }
  .clock-short { display: inline; }
  .round-tag { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .command-strip { min-height: 46px; }
  .ticker { padding: .25rem .6rem; }
  .statusbar { flex-wrap: wrap; gap: .15rem .5rem; }
  .statusbar-primary { flex: 1 1 auto; gap: .1rem .55rem; }
  .statusbar-notices { order: 3; flex: 1 0 100%; justify-content: flex-start; }
  .statusbar-more { display: block; flex: 0 0 auto; margin-left: auto; }
  .statusbar-more[open] { flex: 0 0 auto; margin-left: auto; }
  .statusbar-more > summary { min-height: 46px; margin: 0; }
  .statusbar-mobile-secondary { position: fixed; left: .5rem; right: .5rem; top: auto; width: auto; }
  .statusbar-more[open] > .statusbar-mobile-secondary { display: flex; margin-top: .35rem; padding: .65rem; }
  .spot-shell > summary { min-height: 46px; }
  .spot-shell[open] { left: .5rem; right: .5rem; top: .2rem; }
  .spot-ticker { flex-wrap: wrap; white-space: normal; padding: .6rem; }
  main { margin-top: .65rem; }
  .panel { overflow-x: visible; padding: .85rem; }
  .section-heading { flex-direction: column; gap: .3rem; }
  .command-objective { grid-template-columns: 1fr; gap: .8rem; padding: 1rem; }
  .command-go { width: 100%; }
  .command-vitals { grid-template-columns: repeat(2, 1fr); }
  .vital:nth-child(2) { border-right: 0; }
  .vital:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .arc-stages { display: flex; overflow-x: auto; padding-bottom: .25rem; }
  .arc-stage { flex: 0 0 7.2rem; }
  .operation-grid { display: block; margin-top: .65rem; }
  .operation-grid > .panel + .panel { margin-top: .65rem; }
  .metric-row, .input-summary, .attack-readiness { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric-row > div:nth-child(2n), .input-summary > div:nth-child(2n), .attack-readiness > div:nth-child(2n) { border-right: 0; }
  .metric-row > div:nth-child(n+3), .input-summary > div:nth-child(n+3), .attack-readiness > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .daily-actions { grid-template-columns: 1fr; }
  .daily-actions > div { flex-direction: row; align-items: center; justify-content: space-between; padding: .6rem 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .daily-actions > div:last-child { border-bottom: 0; }
  .primary-action { grid-template-columns: 1fr 1fr; }
  .primary-action > label:first-of-type { grid-column: 1 / -1; }
  .primary-action > button[type="submit"] { min-width: 0; }
  .primary-action .confirm-unsafe { grid-column: 1 / -1; }
  .ops-summary { align-items: flex-start; }
  .ops-summary .btn { flex: 0 0 auto; }
  .segmented-tabs { margin: 0 -.15rem; }
  .segmented-tabs [role="tab"], .segmented-tabs > a { min-height: 46px; padding: .55rem .8rem; }
  .tool-header { grid-template-columns: 1fr auto; }
  .tool-header .guide, .store-department > .guide, .casino-play-panel > .guide { display: none; }
  .tool-balance { min-width: 0; }
  .tool-balance small { display: none; }
  .store-layout { display: flex; flex-direction: column; }
  .order-dock { order: -1; position: sticky; top: .35rem; z-index: 35; width: 100%; padding: .65rem; }
  .order-dock > .eyebrow { display: none; }
  .store-main { width: 100%; }
  .store-table, .store-table tbody, .store-table tr, .store-table td { display: block; width: 100%; }
  .store-table thead { display: none; }
  .store-table tr { padding: .65rem 0; border-bottom: 1px solid var(--line); }
  .store-table td {
    display: grid; grid-template-columns: 6rem minmax(0, 1fr); align-items: center;
    gap: .5rem; padding: .2rem 0; border: 0; text-align: left !important;
  }
  .store-table td::before { content: attr(data-label); color: var(--dim); font-size: .67rem; font-weight: 700; text-transform: uppercase; }
  .store-table .buyqty { min-width: 0; }
  .qtyin { width: 100%; }
  .qty-presets { display: grid; grid-template-columns: repeat(4, 1fr); margin: .3rem 0 0; }
  .qty-presets button { min-height: 40px; }
  .runway-tools .details-body { overflow-x: auto; }
  .game-switcher { margin-right: -.3rem; }
  .casino-form { grid-template-columns: 1fr 1fr; }
  .casino-form > fieldset, .casino-form > .casino-presets, .casino-form > .casino-preview,
  .casino-form > p, .casino-form > button { grid-column: 1 / -1; }
  .move-grid { grid-template-columns: 1fr; }
  .target-toolbar { grid-template-columns: 1fr; align-items: stretch; }
  .target-toolbar output { padding: 0; }
  .target-option { grid-template-columns: 1fr; }
  .target-option dl { grid-column: 1; flex-wrap: wrap; gap: .7rem 1.2rem; }
  .target-option .btn { grid-column: 1; grid-row: auto; width: 100%; }
  .flow-steps span { display: flex; align-items: center; padding: .45rem; font-size: .7rem; }
  .flow-steps b { flex: 0 0 1.35rem; margin-right: .25rem; }
}

/* Full-game workspace rollout */
.page-header {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start;
  gap: .75rem 1.25rem; border-top: 3px solid var(--gold);
}
.page-header > div:first-child { max-width: 48rem; }
.page-header h1 { margin: .15rem 0 .35rem; }
.page-header .guide { margin: 0; }
.page-header > .btn { align-self: center; }
.page-header > .flash, .page-header > .error, .page-header > .page-metrics { grid-column: 1 / -1; }
.page-metrics { margin-top: .2rem; }
.page-metrics.metric-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.management-workspace, .rank-workspace, .account-workspace { border-top: 3px solid var(--accent-text); }

.command-toolbar, .row-actions, .claim-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
}
.command-toolbar { margin: .65rem 0; padding: .55rem; background: #131518; border: 1px solid var(--line); }
.row-actions form, .claim-actions form { margin: 0; }
.claim-actions { min-width: 15rem; }
.claim-actions button, .row-actions button { min-height: 38px; padding: .35rem .55rem; }

.building-list { margin-top: .6rem; border-top: 1px solid var(--line-strong); }
.building-list-head, .building-row {
  display: grid;
  grid-template-columns: minmax(9rem, .9fr) minmax(0, 2.3fr) minmax(8rem, .8fr) minmax(10.5rem, auto);
  gap: .75rem; align-items: start;
}
.building-list-head {
  padding: .45rem .5rem; color: var(--gold);
  font: 700 .68rem/1.3 var(--num-font); text-transform: uppercase;
}
.building-row { padding: .8rem .5rem; border-top: 1px solid var(--line); }
.building-ident b, .building-ident span, .building-cost b, .building-cost small,
.capital-option-row b, .capital-option-row small { display: block; }
.building-ident span {
  width: fit-content; margin-top: .3rem; padding: .15rem .35rem;
  color: var(--gold); background: #121417; border: 1px solid var(--line);
  font: 700 .68rem/1.2 var(--num-font); text-transform: uppercase;
}
.building-effect p { margin: 0; color: var(--dim); }
.building-effect .useful { margin-top: .3rem; color: var(--gold); }
.building-cost small, .capital-option-row small { margin-top: .2rem; color: var(--dim); }
.building-actions { display: flex; flex-wrap: wrap; gap: .35rem; }
.building-actions form { margin: 0; }
.building-actions button { min-height: 38px; padding: .35rem .55rem; white-space: nowrap; }
.field-label { display: none; }

.capital-option-list { border-top: 1px solid var(--line-strong); }
.capital-option-row {
  display: grid;
  grid-template-columns: minmax(9rem, .85fr) minmax(0, 1.4fr) minmax(10rem, 1fr) minmax(12rem, 1fr);
  gap: .75rem; align-items: start; padding: .8rem .25rem; border-bottom: 1px solid var(--line);
}
.capital-option-row p { margin: 0; color: var(--dim); }
.capital-option-row .inline-form { align-items: end; margin: 0; }
.capital-option-row .inline-form label { margin: 0; }

.vault-metal-list { margin-top: .7rem; border-top: 1px solid var(--line-strong); }
.vault-metal-head, .vault-metal-row {
  display: grid; grid-template-columns: 1.2fr repeat(4, minmax(6rem, .8fr));
  gap: .65rem; align-items: center;
}
.vault-metal-head {
  padding: .45rem .5rem; color: var(--gold);
  font: 700 .68rem/1.3 var(--num-font); text-align: right; text-transform: uppercase;
}
.vault-metal-head span:first-child { text-align: left; }
.vault-metal-row { padding: .65rem .5rem; border-top: 1px solid var(--line); }
.vault-metal-row > span { font-family: var(--num-font); text-align: right; }
.vault-metal-row small { display: none; }

.record-disclosure { margin-top: .7rem; border-top: 1px solid var(--line); }
.record-disclosure > summary {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  min-height: 48px; margin: 0; color: var(--ink); font-weight: 700;
}
.record-disclosure > summary b { color: var(--gold); font: 600 .76rem/1.4 var(--num-font); }
.record-disclosure > .details-body { padding-top: .55rem; }

.empty-state {
  padding: 1.25rem; text-align: center; background: #111315;
  border: 1px dashed #444951; border-radius: 4px;
}
.empty-state h2 { margin: 0 0 .35rem; font-size: 1.05rem; }
.empty-state p { margin: .25rem auto .7rem; max-width: 38rem; color: var(--dim); }
.empty-state.compact { padding: .75rem; text-align: left; }
.empty-state.compact p { margin: 0; max-width: none; }

.split-details, .finance-grid, .ledger-grid, .combat-stats-grid, .briefing-grid, .news-grid,
.inspector-split {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; align-items: start;
}
.finance-grid > .panel, .combat-stats-grid > .panel, .briefing-grid > .panel, .news-grid > .panel { margin-top: .75rem; }
.split-details > p { grid-column: 1 / -1; }
.finance-action, .stack-form { display: flex; flex-direction: column; align-items: stretch; gap: .7rem; }
.finance-action label, .stack-form label { margin: 0; }
.finance-action input, .stack-form input, .stack-form select, .stack-form textarea { width: 100%; margin-top: .25rem; }
.stack-form textarea {
  resize: vertical; min-height: 7rem; padding: .65rem; color: var(--ink);
  background: #0d0f11; border: 1px solid var(--line); border-radius: 3px; font: inherit;
}
.stack-form button { align-self: flex-start; }
.compact-form { gap: .35rem; }
.compact-form input[type="number"] { width: 6rem; }
.check-line { display: flex; align-items: center; gap: .35rem; color: var(--dim); font-size: .76rem; }
.check-line input { width: auto; }
.research-buy { display: grid; gap: .35rem; }

.decision-list {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  margin-top: .7rem; border: 1px solid var(--line); background: #121417;
}
.decision-list > div { padding: .7rem; border-right: 1px solid var(--line); }
.decision-list > div:last-child { border-right: 0; }
.decision-list span, .decision-list small, .slot-strip span, .slot-strip small,
.allocation-flow span, .allocation-flow small, .active-strip span, .active-strip small {
  display: block; color: var(--dim); font-size: .7rem;
}
.decision-list b, .slot-strip b, .allocation-flow b, .active-strip b {
  display: block; margin: .15rem 0; font-family: var(--num-font);
}
.slot-strip, .allocation-flow, .active-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 1px; margin: .55rem 0; background: var(--line); border: 1px solid var(--line);
}
.slot-strip > div, .allocation-flow > div, .active-strip > div { padding: .7rem; background: #121417; }

.service-block { padding: .8rem 0; border-top: 1px solid var(--line); }
.service-block:first-child { padding-top: 0; border-top: 0; }
.service-block .section-heading p { margin: .2rem 0 0; }
.shutdown-banner { display: grid; grid-template-columns: auto 1fr; gap: .5rem 1.25rem; border: 1px solid var(--accent); border-left: 4px solid var(--accent); }
.shutdown-banner h2 { margin: .1rem 0; color: var(--accent-text); }
.shutdown-banner > p { margin: .25rem 0; }
.shutdown-banner .command-toolbar { grid-column: 1 / -1; }

.primary-action.action-multi { grid-template-columns: minmax(10rem, 1fr) minmax(9rem, .65fr) auto auto; }
.mint-action { grid-template-columns: repeat(4, minmax(8rem, 1fr)); }
.mint-action > button { align-self: end; }
.mint-action > .confirm-unsafe { grid-column: 1 / -1; }
.alert-action { grid-template-columns: minmax(10rem, 1fr) minmax(9rem, .7fr) minmax(8rem, .6fr) auto; }
.quote-preview {
  margin: .6rem 0; padding: .65rem .75rem; color: var(--ink);
  background: #121417; border-left: 3px solid var(--gold); font-family: var(--num-font);
}
.mint-stock > summary span { margin-left: auto; color: var(--dim); font-family: var(--num-font); }

.workflow-context { border-left: 3px solid var(--gold); }
.workflow-context .section-heading { margin-bottom: .45rem; }
.workflow-status-row { margin: .55rem 0; padding: .55rem .7rem; background: #121417; border: 1px solid var(--line); }
.workflow-status-row .prog { margin: .35rem 0 0; }
.message-filters { gap: .35rem; margin: .55rem 0 .8rem; border: 0; background: transparent; }
.message-filters .nav-active { color: #111315; background: var(--gold); border-color: var(--gold); }
.message-list { border-top: 1px solid var(--line); }
.message-row {
  display: grid; grid-template-columns: minmax(8rem, .3fr) minmax(0, 1fr) auto;
  gap: .8rem; align-items: center; min-height: 52px; padding: .55rem .35rem;
  color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line);
}
.message-row:hover { background: #171a1e; }
.message-row.unread-row { border-left: 3px solid var(--gold); background: #191812; }
.message-sender { font-weight: 700; }
.message-preview { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--dim); }
.message-row time { color: var(--dim); font: 400 .7rem/1.4 var(--num-font); }
.message-form { max-width: 40rem; }
.blocked-list { display: grid; gap: .4rem; max-width: 28rem; }
.block-form { max-width: 28rem; margin-top: .8rem; }
.message-reader { max-width: 50rem; margin-left: auto; margin-right: auto; border-top: 3px solid var(--gold); }
.message-body { min-height: 10rem; margin: .8rem 0 1rem; padding: 1rem 0; white-space: pre-wrap; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.account-grid {
  display: grid; grid-template-columns: minmax(12rem, .7fr) minmax(18rem, 1fr);
  gap: 1.5rem; margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--line);
}
.account-grid .auth-form { max-width: 28rem; margin: 0; }
.auth-workspace {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(18rem, .7fr);
  gap: 2rem; max-width: 62rem; margin: 2rem auto; padding: 0; overflow: hidden;
  border-top: 3px solid var(--gold);
}
.auth-context, .auth-entry { padding: 2rem; }
.auth-context { display: flex; flex-direction: column; justify-content: center; min-height: 26rem; background: #15181b; }
.auth-context h1 { max-width: 12ch; margin: .25rem 0 .8rem; font-size: 3.2rem; }
.auth-entry { border-left: 1px solid var(--line); background: #101214; }
.auth-entry h2 { margin: .2rem 0 .8rem; }
.auth-entry .auth-form { max-width: none; margin: 0; }
.auth-loop { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: 1rem; }
.auth-loop span { padding: .35rem .5rem; color: var(--gold); border: 1px solid var(--line); font: 600 .68rem/1.2 var(--num-font); text-transform: uppercase; }

.briefing-header > span { align-self: center; color: var(--gold); font-weight: 700; }
.briefing-side { position: sticky; top: .75rem; }
.news-list { display: grid; gap: .45rem; padding: 0; list-style: none; }
.news-list li { padding: .55rem .65rem; background: #121417; border-left: 2px solid var(--line-strong); }

.rules-workspace { margin-top: .75rem; }
.rules-workspace [id] { scroll-margin-top: 4rem; }
.rules-tab-panel > .panel { margin-top: .65rem; }
.rules-tab-panel > .panel h2 { margin-top: 0; }
.rules-workspace .segmented-tabs { position: sticky; top: 0; z-index: 25; }
.rule-jump { margin-top: .8rem; border-top: 1px solid var(--line); }
.rule-jump > summary {
  min-height: 42px; padding: .65rem 0; color: var(--gold);
  font-weight: 700; cursor: pointer;
}
.rule-jump > .details-body {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 1px; padding: 0; overflow: hidden; background: var(--line);
  border: 1px solid var(--line);
}
.rule-jump a { padding: .55rem .65rem; background: #121417; }
.pager { display: flex; justify-content: center; align-items: center; gap: .7rem; margin-top: .8rem; }
.hall-round > summary { color: var(--gold); }

@media (max-width: 900px) {
  .page-metrics.metric-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* minmax(0, 1fr) for the same reason as the .split-details collapse below — a bare `1fr` is
     `minmax(auto, 1fr)` and lets a wide child (a `.table-wrap` around a max-content table) push the
     whole page into horizontal scroll instead of scrolling inside its own wrapper. */
  .finance-grid, .combat-stats-grid, .briefing-grid, .news-grid { grid-template-columns: minmax(0, 1fr); }
  .briefing-side { position: static; }
  .mint-action { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mint-action > .confirm-unsafe { grid-column: 1 / -1; }
  .building-list-head, .building-row {
    grid-template-columns: minmax(8rem, .8fr) minmax(0, 1.7fr) minmax(8rem, .7fr);
  }
  .building-list-head span:last-child { display: none; }
  .building-actions { grid-column: 1 / -1; justify-content: flex-end; }
  .capital-option-row { grid-template-columns: minmax(9rem, .8fr) minmax(0, 1.3fr); }
}

@media (max-width: 640px),
       (max-width: 1024px) and (max-height: 500px) and (pointer: coarse) {
  .page-header { grid-template-columns: 1fr; gap: .55rem; }
  .page-header > .btn { width: 100%; }
  .page-header > .flash, .page-header > .error, .page-header > .page-metrics { grid-column: 1; }
  .page-metrics.metric-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* minmax(0, 1fr), NOT a bare 1fr. A bare `1fr` is `minmax(auto, 1fr)`, so the single column
     inherits its content's automatic minimum size — and a `.table-wrap` holding a
     `min-width: max-content` table (the Dominance Inspector's receipt tables) then refuses to
     shrink, pushing the whole PAGE into horizontal scroll on a 320px phone instead of scrolling
     inside its own wrapper. The two-column rule above already spells it this way; this one has to
     match, or the collapse re-introduces the overflow the wrapper exists to prevent. */
  .split-details, .account-grid, .inspector-split { grid-template-columns: minmax(0, 1fr); }
  .decision-list > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .decision-list > div:last-child { border-bottom: 0; }
  .primary-action.action-multi, .alert-action { grid-template-columns: 1fr 1fr; }
  .primary-action.action-multi > label:first-of-type, .alert-action > label:first-of-type { grid-column: 1 / -1; }
  .mint-action { grid-template-columns: 1fr 1fr; }
  .command-toolbar { overflow-x: auto; flex-wrap: nowrap; }
  .command-toolbar form, .command-toolbar .btn { flex: 0 0 auto; }
  .claim-actions { min-width: 0; }
  .message-row { grid-template-columns: minmax(0, 1fr) auto; gap: .25rem .6rem; }
  .message-sender { grid-column: 1; }
  .message-preview { grid-column: 1 / -1; grid-row: 2; }
  .message-row time { grid-column: 2; grid-row: 1; }
  .auth-workspace { display: block; margin: .7rem auto; }
  .auth-context { min-height: auto; padding: 1.25rem; }
  .auth-context h1 { max-width: none; font-size: 2rem; }
  .auth-entry { padding: 1.25rem; border-left: 0; border-top: 1px solid var(--line); }
  .rules-workspace .segmented-tabs { top: 0; }
  .rules-tab-panel > .panel { padding: .8rem; }
  .shutdown-banner { grid-template-columns: 1fr; }
  .shutdown-banner .command-toolbar { grid-column: 1; }
  .building-list-head, .vault-metal-head { display: none; }
  .building-row, .capital-option-row { grid-template-columns: 1fr; gap: .6rem; padding: .9rem .2rem; }
  .building-ident { display: flex; justify-content: space-between; gap: .7rem; align-items: center; }
  .building-ident span { flex: 0 0 auto; margin-top: 0; }
  .field-label {
    display: block; margin-bottom: .2rem; color: var(--gold);
    font: 700 .65rem/1.25 var(--num-font); text-transform: uppercase;
  }
  .building-cost { display: grid; grid-template-columns: 1fr auto; gap: .2rem .6rem; align-items: end; }
  .building-cost .field-label { grid-column: 1 / -1; }
  .building-cost small { margin: 0; text-align: right; }
  .building-actions { grid-column: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .building-actions form:only-child { grid-column: 1 / -1; }
  .building-actions button { width: 100%; }
  .capital-option-row .inline-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .vault-metal-row { grid-template-columns: 1fr 1fr; gap: .45rem .8rem; padding: .7rem .2rem; }
  .vault-metal-row > b { grid-column: 1 / -1; }
  .vault-metal-row > span {
    display: flex; justify-content: space-between; gap: .5rem;
    padding-top: .35rem; border-top: 1px solid var(--line); text-align: right;
  }
  .vault-metal-row small {
    display: inline; color: var(--dim); font: 600 .65rem/1.4 var(--ui-font);
  }
}

/* --- Dominance Inspector (Revision 2 6A) ------------------------------------------------------
   The above-fold score workspace on /operation. Inline SVG only — no chart library (CLAUDE.md
   fixes the stack), so every mark is a plain line/polyline/text the server already positioned.
   Reuses the existing components where they exist: .status pills, .prog bars, .split-details
   two-up, .table-wrap for the wide tables. */
.dominance-inspector { margin-top: .8rem; border-top: 3px solid var(--gold); }
/* Four headline numbers, not the shared three-up: the default grid wrapped Human rank onto a
   second row with three empty cells beside it. Scoped to a min-width so the global phone rule
   (two-up at 640) still wins below it without a counter-override. */
@media (min-width: 641px) {
  .dominance-inspector .metric-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dominance-inspector .metric-row > div:nth-child(4) { border-right: 0; }
}
.dominance-inspector .metric-row { margin-bottom: .8rem; }
/* Inspector members of the shared .status pill family. */
.status-forecast { color: var(--dim); border-style: dashed; }
.status-verified { color: var(--good); border-color: #3a5a3a; }
.status-flag { color: var(--accent-text); border-color: var(--accent); }

.score-chart { margin: 0 0 .8rem; }
.score-chart svg {
  display: block; width: 100%; height: auto;
  background: #121417; border: 1px solid var(--line);
}
.score-chart .ch-grid { stroke: var(--line); stroke-width: 1; }
.score-chart .ch-ylabel, .score-chart .ch-xlabel { fill: var(--dim); font: 400 11px var(--num-font); }
.score-chart .ch-nowlabel { fill: var(--ink); }
.score-chart .ch-history { fill: none; stroke: var(--gold); stroke-width: 2; stroke-linejoin: round; }
.score-chart .ch-forecast { fill: none; stroke: var(--dim); stroke-width: 2; stroke-dasharray: 5 4; }
.score-chart .ch-dot { fill: var(--gold); }
.score-chart .ch-now { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 2 3; }
.score-chart figcaption {
  display: flex; flex-wrap: wrap; gap: .4rem 1.1rem;
  margin-top: .35rem; color: var(--dim); font-size: .74rem;
}
.score-chart .key::before {
  content: ""; display: inline-block; width: 1.1rem; height: 0;
  margin-right: .35rem; vertical-align: middle;
}
.score-chart .key-history::before { border-top: 2px solid var(--gold); }
.score-chart .key-forecast::before { border-top: 2px dashed var(--dim); }

.next-drop {
  margin: 0 0 .8rem; padding: .55rem .7rem;
  background: #121417; border-left: 3px solid var(--gold); font-size: .88rem;
}
.next-drop .eyebrow { display: block; margin-bottom: .15rem; }

/* .inspector-split joins the shared .split-details two-up (declared with it further up, and it
   already collapses to one column at the same breakpoint) — only the gap differs. */
.inspector-split { gap: .8rem 1.4rem; margin-bottom: .8rem; }
.dominance-inspector table.dense { width: 100%; }
.dominance-inspector .receipt-table small { display: block; color: var(--dim); font-size: .68rem; }
/* The shared .prog bar, thinned to sit inside a table cell. */
.prog-thin { height: 3px; margin: .2rem 0 0; }

@media (max-width: 640px),
       (max-width: 1024px) and (max-height: 500px) and (pointer: coarse) {
  /* The SVG scales to the viewport width, so its text shrinks with it — bump the type size so the
     abbreviated axis labels stay legible at 390px. */
  .score-chart .ch-ylabel, .score-chart .ch-xlabel { font-size: 16px; }
}

/* ── Round Review (Revision 2 §6D) ────────────────────────────────────────────────────────────
   Inline-SVG charts, no library and no SPA. Each chart is a normalized 100-wide viewBox stretched
   to its column (preserveAspectRatio="none"), so the bars keep their proportions while every label
   stays in the HTML table beneath — the table is the accessible equivalent, not a fallback. */
.review-metric { margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--line); }
.review-metric:first-child { margin-top: .4rem; padding-top: 0; border-top: 0; }
.review-metric h3 { margin: 0; font-size: .95rem; }
.review-chart {
  display: block; width: 100%; height: auto; max-height: 14rem;
  margin: .5rem 0 .7rem; background: #111315; border: 1px solid var(--line);
}
.review-chart-line { max-height: 8rem; }
.review-bar { fill: var(--gold); }
.review-bar-peak { fill: #4b4128; }
.review-line { stroke: var(--gold); stroke-width: 1; vector-effect: non-scaling-stroke; }
.review-def { margin-top: .35rem; border-top: 1px solid var(--line); }
.review-def > summary {
  display: flex; align-items: center; min-height: 40px; cursor: pointer;
  color: var(--dim); font-size: .72rem; letter-spacing: .05em; text-transform: uppercase;
}
.review-def p { margin: .3rem 0; max-width: 72ch; color: var(--dim); font-size: .8rem; }
.review-def code { color: var(--ink); font-family: var(--num-font); font-size: .75rem; }
.review-cohorts { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.review-cohort {
  display: inline-flex; align-items: center; gap: .4rem; min-height: 40px;
  padding: .3rem .7rem; border: 1px solid var(--line); background: #131518;
  color: var(--ink); text-decoration: none; font-size: .82rem;
}
.review-cohort span { color: var(--gold); font-family: var(--num-font); font-size: .75rem; }
.review-cohort:hover { border-color: var(--gold); }
.review-cohort.active { color: #111315; background: var(--gold); border-color: var(--gold); }
.review-cohort.active span { color: #111315; }

@media (max-width: 640px),
       (max-width: 1024px) and (max-height: 500px) and (pointer: coarse) {
  .review-chart { max-height: 18rem; }
  .review-cohorts { margin: 0 -.15rem; }
  .review-cohort { flex: 1 1 auto; justify-content: space-between; }
}

/* ── Community I: Organizations + chronological Forum ─────────────────────────────────────── */
.community-header { align-items: flex-start; }
.community-subnav, .filter-pills, .forum-toolbar, .button-row, .officer-actions,
.post-actions, .moderator-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; }
.community-subnav { margin: -.25rem 0 .85rem; }
.community-subnav a, .filter-pills a {
  display: inline-flex; align-items: center; min-height: 44px; padding: .45rem .8rem;
  border: 1px solid var(--line); background: #131518; color: var(--ink); text-decoration: none;
}
.community-subnav a.active, .filter-pills a.active { border-color: var(--gold); color: var(--gold); }
.organization-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: .75rem; }
.compact-grid { margin-top: .8rem; }
.organization-card, .member-card, .thread-card, .forum-board-card, .moderation-card, .invite-row {
  min-width: 0; border: 1px solid var(--line); background: #121417; padding: .85rem;
}
.organization-card h3, .forum-board-card h3, .thread-card h2 { margin: 0; }
.organization-card p, .forum-board-card p { overflow-wrap: anywhere; }
.organization-card.historical { opacity: .78; }
.scope-badge, .organization-badge, .thread-flags b, .new-marker {
  display: inline-flex; align-items: center; max-width: 100%; padding: .18rem .42rem;
  border: 1px solid #555; border-radius: 999px; color: var(--dim); font-size: .68rem;
  line-height: 1.25; letter-spacing: .03em; overflow-wrap: anywhere;
}
.scope-badge.open, .scope-badge.active, .new-marker { border-color: var(--gold); color: var(--gold); }
.scope-badge.official { border-color: #d7aa3f; color: #f0c95e; margin-bottom: .35rem; }
.scope-badge.closed, .scope-badge.disbanded { border-color: #6f4242; color: #d79a9a; }
.identity-line, .member-main { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.identity-line h1 { margin: 0; }
.community-meta { display: flex; flex-wrap: wrap; gap: .55rem 1rem; margin: .7rem 0 0; }
.community-meta > div { min-width: 5.5rem; }
.community-meta dt { color: var(--dim); font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; }
.community-meta dd { margin: .1rem 0 0; font-weight: 700; }
.compact-meta { margin: .35rem 0 0; }
.member-card-list, .thread-card-list, .forum-board-list, .moderation-list { display: grid; gap: .65rem; }
.member-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .65rem; }
.member-control { max-width: 100%; }
.member-control select { min-width: 9rem; max-width: 100%; }
.touch-form select { min-width: min(18rem, 100%); }
.invite-row { display: flex; align-items: center; justify-content: space-between; gap: .7rem; }
.invite-row > div:first-child { display: grid; gap: .2rem; }
.danger-zone { border-color: #573636; }
.danger-button { background: #4f2525; border-color: #7c4444; }
.confirm-inline .confirm-note { display: inline-block; margin-left: .5rem; max-width: 50ch; }
.confirm-inline.armed { border-left: 3px solid #bb6b6b; padding-left: .65rem; }
.scope-callout { display: flex; align-items: center; justify-content: space-between; gap: .7rem; }
.scope-callout > div { display: grid; gap: .15rem; }
.scope-callout span { color: var(--dim); }
.private-scope { border-left: 4px solid #8f6ad8; }
.public-scope { border-left: 4px solid var(--gold); }
.house-announcement-scope { border-left: 4px solid #f0c95e; background: #19170f; }
.intelligence-warning { border-left: 4px solid #d18a3e; }
.intelligence-warning p { margin-bottom: 0; }
.forum-board-card { display: flex; align-items: center; justify-content: space-between; gap: .8rem; text-decoration: none; color: inherit; }
.forum-board-card:hover, .thread-card:hover { border-color: #666; }
.house-board-card { background: linear-gradient(135deg, #19170f, #121417 60%); border-color: #5e512b; }
.house-board-card h3 { color: #f0c95e; }
.thread-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .75rem; }
.thread-card.unread-thread, .forum-board-card.unread-thread { border-left: 4px solid var(--gold); }
.thread-main { min-width: 0; color: inherit; text-decoration: none; }
.thread-main h2 { overflow-wrap: anywhere; }
.thread-main p { margin: .3rem 0 0; color: var(--dim); }
.thread-flags { display: flex; flex-wrap: wrap; gap: .25rem; }
.thread-activity { display: grid; justify-items: end; gap: .2rem; color: var(--dim); font-size: .78rem; white-space: nowrap; }
.officer-actions { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: .55rem; }
.forum-post-list { display: grid; gap: .7rem; }
.forum-post { min-width: 0; margin: 0; }
.post-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: .55rem; padding-bottom: .55rem; border-bottom: 1px solid var(--line); }
.post-header > div:first-child { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; min-width: 0; }
.post-body, .blocked-post, .moderated-placeholder, blockquote span {
  white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word;
}
.post-body { padding: .8rem 0; line-height: 1.55; }
.post-actions { border-top: 1px solid var(--line); padding-top: .55rem; }
.post-actions a, .post-actions summary { min-height: 40px; display: inline-flex; align-items: center; cursor: pointer; }
.report-disclosure form { padding: .55rem 0; }
.report-disclosure input { max-width: min(22rem, 100%); }
.blocked-post { margin: .75rem 0; border: 1px dashed #555; padding: .65rem; }
.blocked-post summary { cursor: pointer; color: var(--dim); }
.moderated-placeholder { margin: .75rem 0; padding: .8rem; background: #231b1b; color: #d6a6a6; }
.moderated-post { border-color: #573636; }
blockquote { margin: .75rem 0; padding: .65rem .8rem; border-left: 3px solid #666; background: #101214; }
blockquote b, blockquote span { display: block; }
blockquote b { margin-bottom: .3rem; color: var(--dim); }
.edited-marker { color: var(--dim); font-style: italic; }
.moderation-card header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; }
.audit-body { border: 1px solid var(--line); padding: .7rem; margin: .6rem 0; }
.publication-note .scope-callout { margin: .35rem 0 .8rem; }
.clean-list { padding-left: 1.2rem; }

/* Required round briefing: server-rendered, readable without scripts, keyboard friendly. */
.tutorial-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(12rem, 18rem); gap: 1.5rem; border-top: 3px solid var(--gold); }
.tutorial-heading .lead { margin-bottom: .5rem; }
.tutorial-heading-status { display: flex; flex-direction: column; align-items: flex-start; gap: .7rem; font-size: .85rem; }
.tutorial-required { padding: .45rem .6rem; border: 1px solid var(--gold); color: var(--gold); font-weight: 700; }
.tutorial-progress { width: 100%; height: .55rem; border: none; background: var(--bg); accent-color: var(--gold); }
.tutorial-progress::-webkit-progress-bar { background: var(--bg); }
.tutorial-progress::-webkit-progress-value { background: var(--gold); }
.tutorial-progress::-moz-progress-bar { background: var(--gold); }
.tutorial-workspace { display: grid; grid-template-columns: minmax(13rem, 16rem) minmax(0, 1fr); gap: 1rem; align-items: start; }
.tutorial-outline { padding: 1rem .65rem; }
.tutorial-outline > .eyebrow { padding: 0 .4rem; }
.tutorial-outline ol { list-style: none; padding: 0; margin: .8rem 0; }
.tutorial-outline li { border-left: 2px solid transparent; margin: .15rem 0; }
.tutorial-outline a, .tutorial-outline-pending { display: flex; gap: .6rem; padding: .6rem .4rem; align-items: center; color: var(--dim); text-decoration: none; min-height: 44px; }
.tutorial-outline a { color: var(--ink); }
.tutorial-outline a:hover { background: var(--panel-raised); }
.tutorial-outline .tutorial-selected { border-left-color: var(--gold); background: var(--panel-raised); }
.tutorial-outline .tutorial-selected a { color: var(--gold); }
.tutorial-outline small { display: block; font-size: .65rem; color: var(--dim); margin-top: .15rem; }
.tutorial-step-number { display: grid; place-items: center; flex: 0 0 1.55rem; width: 1.55rem; height: 1.55rem; border: 1px solid var(--line-strong); border-radius: 50%; font-size: .75rem; }
.tutorial-done .tutorial-step-number { color: var(--good); border-color: var(--good); }
.tutorial-help { border-top: 1px solid var(--line); padding-top: .6rem; }
.tutorial-help a { color: var(--gold); font-size: .8rem; }
.tutorial-lesson { padding: clamp(1rem, 3vw, 1.8rem); }
.tutorial-lesson > h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin: .3rem 0; }
.tutorial-lesson-lead { font-size: 1.02rem; color: var(--dim); margin: 0 0 1.4rem; }
.tutorial-concept { max-width: 75ch; margin: 1.15rem 0; }
.tutorial-concept h3 { margin-bottom: .3rem; }
.tutorial-concept p { margin: 0; line-height: 1.65; }
.tutorial-rule-card { background: var(--bg); padding: 1rem; border: 1px solid var(--line); margin: 1.2rem 0; }
.tutorial-rule-card > h3 { margin-top: 0; }
.tutorial-rule-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 0; }
.tutorial-rule-grid dt { font-size: .75rem; color: var(--dim); }
.tutorial-rule-grid dd { font-size: 1rem; font-weight: 700; color: var(--gold); margin: .2rem 0 0; }
.tutorial-protection { padding: .8rem 1rem; border-left: 3px solid var(--line-strong); background: var(--bg); margin: 1rem 0; }
.tutorial-protection-active { border-left-color: var(--good); }
.tutorial-protection h3 { margin: 0; }
.tutorial-protection p { margin: .5rem 0 0; font-size: .9rem; }
.tutorial-choice-section { margin: 1.35rem 0; }
.tutorial-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.tutorial-choices > div { border: 1px solid var(--line-strong); padding: .9rem; background: var(--panel-raised); }
.tutorial-choices h4 { margin: 0 0 .4rem; color: var(--gold); }
.tutorial-choices p { font-size: .9rem; margin: 0; }
.tutorial-takeaway { padding-left: 1rem; border-left: 3px solid var(--gold); margin: 1.3rem 0; }
.tutorial-takeaway b { color: var(--gold); font-size: .8rem; }
.tutorial-takeaway p { margin: .3rem 0; }
.tutorial-destinations p { font-size: .8rem; }
.tutorial-destinations ul { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; list-style: none; }
.tutorial-destinations li { border: 1px solid var(--line); border-radius: 3px; padding: .3rem .5rem; font-size: .8rem; }
.tutorial-continue { padding-top: 1.1rem; margin-top: 1.3rem; border-top: 1px solid var(--line); }
.tutorial-continue button, .tutorial-resume { min-height: 46px; white-space: normal; }
.starter-day-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; padding: 0; list-style: none; }
.starter-day { border: 1px solid var(--line); padding: 1rem; display: flex; flex-direction: column; scroll-margin-top: 1rem; }
.starter-day h3 { margin: .15rem 0; }
.starter-day > p:not(.eyebrow) { color: var(--dim); font-size: .9rem; }
.starter-day > a { margin-top: auto; font-size: .85rem; padding: .4rem 0 0; }
.starter-day-current { border-color: var(--gold); background: var(--panel-raised); }
/* Keep the daily focus discoverable without pushing phone gameplay controls below the fold.
   The native disclosure preserves keyboard, touch and no-script access to the full guidance. */
.starter-guidance { margin-bottom: .65rem; background: var(--panel-raised); border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: 3px; }
.starter-guidance summary { min-height: 44px; margin: 0; padding: .75rem .8rem; font-size: .8rem; color: var(--gold); cursor: pointer; list-style-position: inside; }
.starter-guidance-content { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0 .8rem .8rem; }
.starter-guidance p:not(.eyebrow) { font-size: .85rem; color: var(--dim); margin: .25rem 0 0; max-width: 80ch; }
.starter-guidance-content > a { flex: 0 0 auto; font-size: .75rem; white-space: normal; }
@media (max-width: 760px) {
  .tutorial-heading, .tutorial-workspace { grid-template-columns: minmax(0, 1fr); }
  .tutorial-heading { gap: .75rem; }
  .tutorial-heading-status { width: 100%; }
  .tutorial-outline ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .2rem .3rem; margin-bottom: .4rem; }
  .tutorial-outline a, .tutorial-outline-pending { gap: .4rem; font-size: .75rem; }
  .tutorial-outline .tutorial-help { display: flex; flex-wrap: wrap; }
  .tutorial-step-number { flex-basis: 1.3rem; width: 1.3rem; height: 1.3rem; }
  .tutorial-choices, .starter-day-grid { grid-template-columns: minmax(0, 1fr); }
  .tutorial-continue button { width: 100%; }
  .starter-guidance-content { align-items: stretch; flex-direction: column; gap: .65rem; }
  .starter-guidance-content > a { align-self: flex-start; }
}

/* Facility Refits + Procurement Exchange — dense GoldMob operations workspace. */
.refit-hero { border-top: 3px solid var(--gold); }
.refit-links { margin-bottom: 1rem; }
.segmented-tabs a[aria-current="page"] { color: var(--gold); border-color: var(--gold); background: var(--panel-raised); }
.refit-message { border-left: 3px solid var(--good); scroll-margin-top: 1rem; }
.refit-error { border-left-color: var(--accent); }
.refit-section-heading { margin: 1.25rem 0 .75rem; }
.refit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .85rem; margin-bottom: 1rem; }
.refit-card { display: flex; min-width: 0; flex-direction: column; padding: 1rem; border: 1px solid var(--line-strong); border-top: 3px solid var(--gold); background: var(--panel); scroll-margin-top: 1rem; }
.refit-card-ineligible { border-top-color: var(--dim); }
.refit-card-head, .refit-confirm-actions, .exchange-fill-form { display: flex; align-items: flex-end; justify-content: space-between; gap: .75rem; }
.refit-card-head h2 { margin: .15rem 0 0; font-size: 1.15rem; }
.refit-state { display: inline-block; width: max-content; max-width: 100%; padding: .25rem .45rem; border: 1px solid var(--line-strong); color: var(--ink); font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.refit-effect-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; margin: .85rem 0; }
.refit-effect-pair > div { padding: .65rem; border: 1px solid var(--line); background: var(--bg); }
.refit-effect-pair span, .refit-money span, .order-detail-grid span, .order-role-panel small { display: block; color: var(--dim); font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; }
.refit-effect-pair strong { display: block; margin-top: .25rem; font-size: .86rem; line-height: 1.35; }
.refit-facts { margin: 0; }
.refit-facts > div { display: grid; grid-template-columns: minmax(7rem, .9fr) minmax(0, 1.5fr); gap: .65rem; padding: .4rem 0; border-bottom: 1px solid var(--line); }
.refit-facts dt { color: var(--dim); font-size: .72rem; }
.refit-facts dd { margin: 0; font-size: .78rem; font-weight: 650; text-align: right; overflow-wrap: anywhere; }
.refit-money { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; margin: .8rem 0; }
.refit-money > div { padding: .5rem; border: 1px solid var(--line); background: var(--panel-raised); }
.refit-money b { display: block; margin-top: .12rem; font-size: .82rem; }
.refit-money .refit-total { grid-column: 1 / -1; border-color: var(--gold); }
.refit-money .refit-total b { color: var(--gold); font-size: 1rem; }
.refit-disclosure { margin-top: 0; }
.refit-disclosure .details-body p { font-size: .78rem; }
.refit-action { margin-top: auto; padding-top: .8rem; }
.refit-action button { width: 100%; min-height: 46px; white-space: normal; }
.refit-safety { border-left: 3px solid var(--gold); }
.refit-safety li { margin: .45rem 0; line-height: 1.5; }
.active-refit progress, .refit-order-detail > progress, .refit-board-table progress, .refit-order-list progress { width: 100%; accent-color: var(--gold); }
.progress-text { margin: .25rem 0; color: var(--dim); font-size: .75rem; }
.refit-order-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .5rem; }
.refit-order-strip a { display: grid; gap: .2rem; padding: .7rem; border: 1px solid var(--line); text-decoration: none; }
.refit-order-strip small { color: var(--dim); }
.refit-confirm { max-width: 58rem; margin-inline: auto; }
.refit-confirm-warnings { margin: 1rem 0; padding: .85rem 1rem; border-left: 3px solid var(--gold); background: var(--bg); }
.refit-confirm-warnings h3 { margin-top: 0; }
.refit-confirm-actions { justify-content: flex-start; padding-top: .8rem; border-top: 1px solid var(--line); }
.refit-board-table { width: 100%; min-width: 70rem; border-collapse: collapse; }
.refit-board-table caption { padding: .65rem 0; color: var(--dim); text-align: left; }
.refit-board-table th, .refit-board-table td { padding: .7rem; border-bottom: 1px solid var(--line); vertical-align: top; text-align: left; }
.refit-board-table th small, .refit-board-table td small, .refit-board-table td em { display: block; margin-top: .25rem; color: var(--dim); font-size: .7rem; font-style: normal; }
.quality-badge { display: inline-block; padding: .3rem .45rem; border: 1px solid var(--line-strong); font-size: .72rem; font-weight: 750; }
.exchange-fill-form { min-width: 12rem; flex-wrap: wrap; align-items: stretch; justify-content: flex-start; }
.exchange-fill-form label { flex: 1 0 100%; font-size: .72rem; font-weight: 700; }
.exchange-fill-form input { min-width: 5rem; width: 6rem; }
.exchange-fill-form button { min-height: 44px; white-space: normal; }
.exchange-fill-form small { flex-basis: 100%; }
.refit-order-list { display: grid; gap: .6rem; }
.refit-order-list > article { display: grid; grid-template-columns: minmax(12rem, 1fr) minmax(12rem, 1.25fr) minmax(10rem, .8fr); gap: .85rem; align-items: center; padding: .8rem; border: 1px solid var(--line); scroll-margin-top: 1rem; }
.refit-order-list h3 { margin: .3rem 0; }
.refit-order-list small { display: block; color: var(--dim); }
.refit-order-detail { scroll-margin-top: 1rem; }
.order-detail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; margin: .8rem 0; }
.order-detail-grid > div { min-width: 0; padding: .65rem; border: 1px solid var(--line); background: var(--bg); }
.order-detail-grid b, .order-detail-grid small { display: block; margin-top: .2rem; overflow-wrap: anywhere; }
.order-role-panel { margin: 1rem 0; padding: .85rem; border: 1px solid var(--line-strong); background: var(--panel-raised); }
.order-role-panel h3 { margin-top: 0; }
.danger-zone { display: flex; align-items: center; gap: .65rem; margin-top: .75rem; }
.contributor-list, .fill-history { margin: 0; padding-left: 1.2rem; }
.contributor-list li { display: grid; grid-template-columns: minmax(7rem, 1fr) minmax(8rem, 1fr) minmax(10rem, 1.5fr); gap: .6rem; padding: .45rem 0; border-bottom: 1px solid var(--line); }
.contributor-list small { color: var(--dim); }
.refit-message:focus { outline: 2px solid var(--gold); outline-offset: 2px; }
.field-error ul { margin: .4rem 0 0; padding-left: 1.1rem; }
.signed-quantity { font-family: var(--num-font); font-weight: 800; }
.refit-order-strip > div { display: grid; gap: .2rem; padding: .7rem; border: 1px solid var(--line); }
.refit-order-strip > div small { color: var(--dim); }

/* Compact persistent workflow; completion is a status, never an error banner. */
.workflow-context > summary { cursor: pointer; padding: .2rem 0; }
.workflow-context[open] > summary { margin-bottom: .5rem; }
.workflow-context .prog { max-width: 28rem; height: 5px; }
.goods-group > summary { cursor: pointer; }
.investment-review form { margin: 1rem 0; }