/* ==========================================================================
   AccuShot — "Brass & Olive" design system  (see docs/theme/README.md)
   Light is the base; dark redefines the SAME token names, never component
   rules. Components must reference tokens only — no hex literals in views.
   ========================================================================== */
:root {
  /* canvas & surfaces */
  --paper:        #F4F3EF;   /* screen ground */
  --surface:      #FBFAF7;   /* card — lifted from the canvas */
  --sunken:       #EBEAE3;   /* recessed well: inputs, tracks */
  --deep:         #23243C;   /* navy: commit surfaces */
  --on-deep:      #F4F3EF;
  --commit:       #23243C;   /* navy commit button — lifted in dark so it stays visible */
  --on-commit:    #F4F3EF;

  /* text */
  --ink:          #272727;
  --ink-2:        #5A5A5A;   /* slate: labels, units, nav — one step darker than the sheet's #6B6B6B for desktop legibility */
  --ink-3:        #9C9A91;
  --rule:         #E3E1D8;
  --rule-strong:  #CFCCC0;

  /* the two working colours — fill / small-text pairs */
  --brass:        #9A802D;   /* action */
  --brass-ink:    #8A7228;
  --brass-wash:   rgba(154,128,45,.12);
  --olive:        #6E814C;   /* state */
  --olive-ink:    #5F7141;
  --olive-wash:   rgba(110,129,76,.14);
  --navy-wash:    rgba(35,36,60,.10);

  /* status */
  --ok:           #5F7141;
  --warn:         #9A802D;
  --bad:          #A33B2A;   /* clay — the only error / destructive colour */
  --bad-wash:     rgba(163,59,42,.12);
  --ok-wash:      rgba(95,113,65,.14);
  --warn-wash:    rgba(154,128,45,.16);

  /* chart series (never brass as a series) */
  --chart-1: #23243C;
  --chart-2: #6E814C;
  --chart-3: #A33B2A;
  --chart-4: #7C7FA6;
  --chart-5: #9A802D;
  --chart-6: #6B6B6B;

  /* geometry */
  --radius:    16px;   /* cards */
  --radius-sm: 12px;   /* buttons, wells */
  --radius-xs: 8px;    /* chips */
  --shadow:    none;   /* the system has no shadows — depth is tone + gap */

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Consolas, monospace;

  /* ---- legacy aliases (older component rules) ---- */
  --bg:           var(--paper);
  --surface-2:    var(--sunken);
  --surface-3:    var(--sunken);
  --border:       var(--rule);
  --text:         var(--ink);
  --text-dim:     var(--ink-2);
  --text-faint:   var(--ink-3);
  --accent:       var(--brass);
  --accent-hover: var(--brass-ink);
  --accent-soft:  var(--brass-wash);
  --good:         var(--ok);
}

/* ============ Dark theme — a deepening of the same world ============ */
:root[data-theme="dark"] {
  --paper:        #16172A;
  --surface:      #1F2038;
  --sunken:       #121323;
  --deep:         #0E0F1C;
  --on-deep:      #EDECE6;
  --commit:       #3B3E66;
  --on-commit:    #EDECE6;

  --ink:          #EDECE6;
  --ink-2:        #B3B4C3;
  --ink-3:        #74758A;
  --rule:         #2C2E49;
  --rule-strong:  #3C3E5D;

  --brass:        #C7A748;
  --brass-ink:    #D6BA63;
  --brass-wash:   rgba(199,167,72,.16);
  --olive:        #93A86C;
  --olive-ink:    #A9BC84;
  --olive-wash:   rgba(147,168,108,.16);
  --navy-wash:    rgba(160,168,220,.12);

  --ok:           #A9BC84;
  --warn:         #D6BA63;
  --bad:          #E0806E;
  --bad-wash:     rgba(224,128,110,.16);
  --ok-wash:      rgba(169,188,132,.16);
  --warn-wash:    rgba(214,186,99,.18);

  --chart-1: #A0A8DC;
  --chart-2: #93A86C;
  --chart-3: #E0806E;
  --chart-4: #C7A748;
  --chart-5: #EDECE6;
  --chart-6: #74758A;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font);
  background: var(--paper);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--brass-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; border-radius: 3px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; }

/* Outline icon sprite (see <svg> symbols at the top of app.html) */
.i { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }
.i-lg { width: 20px; height: 20px; }
.btn .i { vertical-align: 0; }

/* Numbers are the product */
.num, .money, .stat .num, .readout .row .v, .total-spend .v, .dev-table td, .cost-grid input,
input[type="number"], .load-step .gr, .load-step .g, .case-fill-pct { font-variant-numeric: tabular-nums; }

/* ============ Brand ============ */
.brand-logo { display: block; padding: 4px 4px 14px; }
.brand-logo img { display: block; width: 100%; height: auto; }
/* Logo is navy on transparent — give it a warm plate when the sidebar is dark */
:root[data-theme="dark"] .sidebar .brand-logo img {
  background: #F4F3EF; border-radius: var(--radius-sm); padding: 8px 10px;
}

/* ============ Fields / inputs (recessed wells) ============ */
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 11.5px; color: var(--ink-2); margin-bottom: 6px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.input, input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="date"], input[type="number"], select, textarea {
  width: 100%; background: var(--sunken); color: var(--ink);
  border: 1px solid transparent; border-radius: var(--radius-sm);
  padding: 10px 12px; font-size: 14px; font-family: inherit; outline: none; transition: border-color .18s ease, background .18s ease;
}
input[type="radio"], input[type="checkbox"] { accent-color: var(--olive-ink); }
input::placeholder, textarea::placeholder { color: var(--ink-3); }
.input:focus, input:focus, select:focus, textarea:focus {
  border-color: var(--brass); background: var(--surface);
}
textarea { resize: vertical; min-height: 70px; }
select { cursor: pointer; }
:root[data-theme="dark"] select option { background: var(--surface); color: var(--ink); }

/* ============ Buttons — colour tells the user what it will do ============ */
.btn {
  border: 1px solid transparent; background: var(--sunken); color: var(--ink);
  padding: 9px 16px; border-radius: var(--radius-sm); font-weight: 600; font-size: 13px;
  display: inline-flex; align-items: center; gap: 7px; transition: background .18s ease, border-color .18s ease, color .18s ease, transform .05s;
}
.btn:hover { background: var(--navy-wash); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: default; }
/* Navy commits or computes: Save, Calculate, Sign in */
.btn-primary { background: var(--commit); border-color: var(--commit); color: var(--on-commit); }
.btn-primary:hover { filter: brightness(1.15); }
/* Brass navigates or changes: pickers, open report, create */
.btn-brass { background: var(--brass); border-color: var(--brass); color: #fff; font-weight: 650; }
.btn-brass:hover { background: var(--brass-ink); border-color: var(--brass-ink); }
/* dark brass is light — ink-on-brass keeps the label readable */
:root[data-theme="dark"] .btn-brass { color: var(--paper); }
/* Ghost is tertiary and never sits alone */
.btn-outline, .btn-ghost { background: transparent; border-color: rgba(154,128,45,.35); color: var(--brass-ink); }
.btn-outline:hover, .btn-ghost:hover { background: var(--brass-wash); border-color: var(--brass); }
.btn-block { width: 100%; justify-content: center; padding: 11px; }
/* Clay is the only destructive colour */
.btn-danger { color: var(--bad); }
.btn-danger:hover { background: var(--bad-wash); }

.login-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.link-muted { color: var(--ink-3); font-size: 12px; }
.error-msg {
  background: var(--bad-wash); border: 1px solid transparent; border-left: 3px solid var(--bad);
  color: var(--bad); padding: 9px 12px; border-radius: 4px var(--radius-xs) var(--radius-xs) 4px;
  font-size: 13px; margin-bottom: 16px; display: none;
}
.error-msg.show { display: block; }

/* ============ Login (always light — the brand canvas) ============ */
.login-body { background: var(--paper); }
.login-wrap {
  min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background:
    radial-gradient(900px 480px at 85% -10%, var(--brass-wash), transparent 60%),
    radial-gradient(700px 420px at -10% 110%, var(--navy-wash), transparent 60%),
    var(--paper);
  padding: 32px 20px;
}
.login-card {
  width: 100%; max-width: 440px;
  background: var(--surface); color: var(--ink);
  border-radius: var(--radius);
  padding: 30px 32px 24px;
}
.login-logo { text-align: center; margin: 2px 0 20px; }
.login-logo img { width: 300px; max-width: 100%; height: auto; }
.login-title { text-align: center; font-size: 30px; font-weight: 800; letter-spacing: -0.03em; margin: 0 0 6px; color: var(--ink); }
.login-sub { text-align: center; color: var(--ink-2); margin: 0 0 24px; font-size: 14px; }
.login-card .field { margin-bottom: 18px; }
.login-card .field label { font-size: 11.5px; }
.login-card input[type="text"], .login-card input[type="email"], .login-card input[type="password"], .login-card input[type="tel"] {
  padding: 12px 14px; font-size: 15px;
}
.input-icon { position: relative; }
.input-icon .ico-left {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px;
  fill: none; stroke: var(--olive-ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; pointer-events: none;
}
.login-card .input-icon input { padding-left: 42px; }
.input-icon .ico-btn {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: none; border: none; padding: 6px; border-radius: var(--radius-xs); color: var(--ink-2); display: grid; place-items: center;
}
.input-icon .ico-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.input-icon .ico-btn:hover { color: var(--ink); background: var(--navy-wash); }
.login-card .input-icon:has(.ico-btn) input { padding-right: 44px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.btn-lg { padding: 0 16px; height: 50px; font-size: 16px; font-weight: 650; border-radius: var(--radius-sm); margin-top: 4px; }
.login-links { text-align: center; margin: 16px 0 4px; }
.login-links a { color: var(--brass-ink); font-size: 14px; font-weight: 600; }
.or-divider { display: flex; align-items: center; gap: 14px; color: var(--ink-3); font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .1em; margin: 18px 0; }
.or-divider::before, .or-divider::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.login-alt { display: flex; align-items: center; justify-content: center; gap: 14px; color: var(--ink-2); font-size: 15px; }
.login-alt .btn-outline { padding: 10px 18px; font-size: 14px; }
.btn-outline svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.login-terms { border-top: 1px solid var(--rule); margin-top: 24px; padding-top: 16px; text-align: center; color: var(--ink-3); font-size: 13px; line-height: 1.5; }
.login-terms a { color: var(--ink); text-decoration: underline; font-weight: 600; }
.login-terms a:hover { color: var(--brass-ink); }
.login-version { color: var(--ink-3); font-family: var(--font-mono); font-size: 11.5px; text-align: center; min-height: 16px; }
@media (max-width: 480px) {
  .login-card { padding: 24px 20px 20px; border-radius: 14px; }
  .login-title { font-size: 26px; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
}

/* ============ App layout ============ */
.app { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.sidebar {
  background: var(--surface);
  display: flex; flex-direction: column; padding: 18px 14px; gap: 4px;
  position: sticky; top: 0; height: 100vh;
}
.nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border-radius: var(--radius-sm);
  color: var(--ink-2); font-weight: 600; font-size: 13.5px; cursor: pointer;
  border: 1px solid transparent; transition: background .18s ease, color .18s ease;
}
.nav-item:hover { background: var(--navy-wash); color: var(--ink); }
/* olive = state: the one selected item */
.nav-item.active { background: var(--olive-wash); color: var(--olive-ink); }
.nav-item .ico { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; text-align: center; opacity: .95; }
.nav-item .ico .i { width: 20px; height: 20px; }
.nav-item.active .ico { color: var(--olive-ink); }
.nav-spacer { flex: 1; }
.nav-user {
  border-top: 1px solid var(--rule); padding-top: 12px; margin-top: 8px;
  display: flex; align-items: center; gap: 10px; color: var(--ink-2); font-size: 12.5px;
}
.nav-version { color: var(--ink-3); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .04em; padding: 8px 8px 0; text-align: center; }
.avatar {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  background: var(--commit); color: var(--on-commit); display: grid; place-items: center; font-weight: 700;
}

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 26px; border-bottom: 1px solid var(--rule); background: var(--paper);
  position: sticky; top: 0; z-index: 5;
}
.topbar h1 { font-size: 22px; margin: 0; font-weight: 800; letter-spacing: -.02em; }
.topbar .crumb { color: var(--ink-2); font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.toolbar { display: flex; gap: 8px; }
.content { padding: 22px 26px; }

.page { display: none; }
.page.active { display: block; }

/* ============ Cards / panels — one elevation, no border, no shadow ============ */
.panel {
  background: var(--surface); border: none;
  border-radius: var(--radius); padding: 20px;
}
.panel + .panel { margin-top: 12px; }
.panel-title { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-3); margin: 0 0 16px; font-weight: 700; }

.grid { display: grid; gap: 12px; align-items: start; }
.cols-2 { grid-template-columns: 1fr 1fr; }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .cols-2, .cols-3 { grid-template-columns: 1fr; } }

/* Independent stacked columns — panels size to content, no stretched empty gaps */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } }

/* Nested sub-panel (e.g. Powder Charge, Barrel) — a recessed group inside a card */
.subpanel { background: var(--sunken); border: none; border-radius: var(--radius-sm); padding: 14px 16px; margin-top: 14px; }
.subpanel .panel-title { margin-bottom: 12px; }
.subpanel input, .subpanel select, .subpanel textarea { background: var(--surface); }

/* Unified form row — every label 150px so all input left-edges align across panels */
.form-row { display: grid; grid-template-columns: 150px 1fr; align-items: center; gap: 12px; margin-bottom: 10px; min-height: 38px; }
.form-row:last-child { margin-bottom: 0; }
.form-row label { color: var(--ink-2); font-size: 13px; font-weight: 600; }
.form-row.compact { margin-bottom: 8px; }
.form-row .suffix-wrap { width: 100%; }

/* ============ Tabs — active is olive-ink (state) ============ */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--rule); margin-bottom: 20px; }
.tab {
  padding: 10px 18px; color: var(--ink-2); font-weight: 600; font-size: 13.5px;
  border: none; background: none; border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .18s ease, border-color .18s ease;
}
.tab:hover { color: var(--ink); }
.tab.active { color: var(--olive-ink); border-bottom-color: var(--olive); }
.tab-pane { display: none; }
.tab-pane.active { display: block; }

/* ============ Cost grid (bullet tab) ============ */
.cost-grid { display: grid; grid-template-columns: 1fr 90px 70px; gap: 8px 10px; align-items: center; }
.cost-grid .head { color: var(--ink-3); font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
.cost-grid label { color: var(--ink-2); font-size: 13px; }
.cost-grid input { text-align: right; }

/* label-above-value data rows */
.readout { display: flex; flex-direction: column; gap: 0; }
.readout .row { display: flex; justify-content: space-between; align-items: baseline; padding: 11px 2px; background: transparent; border: none; border-bottom: 1px solid var(--rule); border-radius: 0; }
.readout .row:last-child { border-bottom: none; }
.readout .row .k { color: var(--ink-2); font-size: 13px; }
.readout .row .v { font-weight: 600; font-size: 16px; }
.readout .row.total .v { color: var(--ink); font-weight: 700; }
.readout .row.good .v { color: var(--ok); }

.money::before { content: "R "; color: var(--ink-3); font-weight: 400; }

.total-spend {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--deep); color: var(--on-deep);
  border: none; border-radius: var(--radius-sm);
  padding: 14px 18px; margin-top: 4px;
}
.total-spend .k { color: var(--on-deep); opacity: .75; font-weight: 600; }
.total-spend .v { font-size: 22px; font-weight: 700; color: var(--on-deep); }
.total-spend .money::before { color: var(--on-deep); opacity: .6; }

.hint { color: var(--ink-3); font-size: 11.5px; margin-top: 4px; }
.suffix-wrap { position: relative; }
.suffix-wrap input { padding-right: 46px; }
/* Hide native number spin buttons — they'd otherwise sit on top of the suffix label */
.suffix-wrap input[type="number"]::-webkit-outer-spin-button,
.suffix-wrap input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.suffix-wrap input[type="number"] { -moz-appearance: textfield; }
.suffix { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-2); font-size: 12px; pointer-events: none; }

/* Bullet selector */
.bullet-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.bullet-bar select { width: 90px; }
.bullet-bar .spacer { flex: 1; }

/* Load list modal */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(14,15,28,.55); display: none;
  place-items: center; z-index: 50; padding: 24px;
}
.modal-backdrop.show { display: grid; }
.modal {
  background: var(--surface); border: none; border-radius: var(--radius);
  width: 100%; max-width: 560px; max-height: 80vh; overflow: auto;
}
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--rule); }
.modal-head h3 { margin: 0; font-size: 16px; }
.modal-body { padding: 8px 0; }
.load-row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 13px 20px; border-bottom: 1px solid var(--rule); cursor: pointer;
}
.load-row:hover { background: var(--olive-wash); }
.load-row .meta { color: var(--ink-3); font-size: 12px; }
.empty-state { padding: 40px 20px; text-align: center; color: var(--ink-3); }

/* Toast */
.toast {
  position: fixed; bottom: 24px; right: 24px; z-index: 100;
  background: var(--deep); border: none; border-left: 3px solid var(--olive);
  color: var(--on-deep); padding: 12px 18px; border-radius: 4px var(--radius-sm) var(--radius-sm) 4px;
  transform: translateY(20px); opacity: 0; transition: transform .18s ease-out, opacity .18s ease-out; pointer-events: none;
}
.toast.show { transform: translateY(0); opacity: 1; }
.toast.error { border-left-color: var(--bad); }

/* Placeholder pages */
.placeholder { display: grid; place-items: center; min-height: 55vh; text-align: center; color: var(--ink-3); }
.placeholder .big { font-size: 46px; margin-bottom: 12px; }
.placeholder h2 { color: var(--ink); margin: 0 0 6px; }

/* Dashboard stat cards — label above value */
.stat-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 1000px) { .stat-cards { grid-template-columns: repeat(2, 1fr); } }
.stat {
  background: var(--surface); border: none; border-radius: var(--radius); padding: 18px;
}
.stat .label { color: var(--ink-2); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.stat .num { font-size: 28px; font-weight: 700; margin-top: 4px; letter-spacing: -.02em; }
.stat .num.accent { color: var(--ink); }
.stat .sub { font-size: 12px; font-weight: 600; margin-top: 4px; color: var(--ink-2); }
.stat .sub.good { color: var(--ok); }
.stat .sub.warn { color: var(--bad); }

.summary-panel { display: grid; grid-template-columns: 300px 1fr; gap: 12px; align-items: stretch; }
@media (max-width: 900px) { .summary-panel { grid-template-columns: 1fr; } }
.donut-box { position: relative; height: 230px; }
.donut-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 10px; font-size: 12px; }
.donut-legend .sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: middle; }

/* ============ Theme toggle — olive thumb = "on" state ============ */
.theme-toggle {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 6px;
  border-radius: var(--radius-sm); color: var(--ink-2); font-weight: 600; font-size: 13px;
  cursor: pointer; border: 1px solid transparent;
}
.theme-toggle:hover { background: var(--navy-wash); color: var(--ink); }
.theme-toggle .ico { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; }
.theme-toggle .ico .i { width: 20px; height: 20px; }
.theme-toggle .sw {
  margin-left: auto; width: 38px; height: 22px; border-radius: 22px; background: var(--sunken);
  border: none; position: relative; transition: background .18s ease;
}
.theme-toggle .sw::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--ink-3); transition: transform .18s ease-out, background .18s ease;
}
:root[data-theme="dark"] .theme-toggle .sw { background: var(--olive-wash); }
:root[data-theme="dark"] .theme-toggle .sw::after { transform: translateX(16px); background: var(--olive); }

/* ============ Load Development ============ */
.dev-context { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.ctx-fields { display: flex; gap: 22px; flex-wrap: wrap; }
.ctx-field { display: flex; flex-direction: column; gap: 6px; }
.ctx-field label { font-size: 11px; color: var(--ink-2); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.ctx-field select { width: 210px; }
.select-picker-wrap { display: flex; gap: 6px; align-items: center; }
.select-picker-wrap select { flex: 1; min-width: 0; }
.picker-btn { flex: 0 0 auto; padding: 0 10px; }
#pickerTable tbody tr { cursor: pointer; }
#pickerTable tbody tr:hover { background: var(--olive-wash); }

/* ============ Setup grids (Caliber / Projectile / Powder) ============ */
.setup-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.setup-toolbar-controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.setup-toolbar-controls select { width: 160px; }
.setup-toolbar-controls input[type="text"] { width: 200px; }
.group-row td { background: var(--surface); border-top: 1px solid var(--rule); font-weight: 700; color: var(--ink); padding: 8px 10px; text-align: left; }
.setup-row-actions { white-space: nowrap; }
.setup-row-actions button { padding: 2px 8px; margin-right: 4px; }
.cartridge-dia { background: #F4F3EF; border-radius: var(--radius-sm); padding: 8px 10px; display: inline-flex; }
.cartridge-dia img { display: block; max-width: 100%; height: auto; }

/* Twist-rate stability band — status tints over the canvas, olive = stable */
.stability-bar { display: flex; border-radius: var(--radius-sm); overflow: hidden; background: var(--sunken); }
.stability-seg {
  flex: 1; text-align: center; padding: 12px 8px; font-weight: 600; font-size: 12px;
  letter-spacing: .03em; color: var(--ink-2); transition: background .18s ease, color .18s ease;
}
.stability-seg[data-seg="unstable"] { color: var(--bad); }
.stability-seg[data-seg="marginal"] { color: var(--warn); }
.stability-seg[data-seg="stable"] { color: var(--ok); }
.stability-seg.active { font-weight: 700; color: #fff; }
.stability-seg.active[data-seg="unstable"] { background: var(--bad); }
.stability-seg.active[data-seg="marginal"] { background: var(--brass); }
.stability-seg.active[data-seg="stable"] { background: var(--olive-ink); }

.stability-track { position: relative; padding-top: 24px; }
.stability-arrow {
  position: absolute; top: 0; left: 0%; transform: translateX(-50%);
  font-size: 18px; line-height: 1; color: var(--ink); transition: left .28s ease;
}
.stability-ticks { position: relative; height: 16px; margin-top: 6px; }
.stability-ticks span { position: absolute; transform: translateX(-50%); font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.dtab-pane { display: none; }
.dtab-pane.active { display: block; }

.table-scroll { width: 100%; overflow-x: auto; }
.dev-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.dev-table .grp-row td { background: var(--sunken); font-weight: 700; text-align: left; padding-top: 10px; }
.dev-table .total-row td { font-weight: 700; border-top: 2px solid var(--rule-strong); }
.dev-table th.sortable { cursor: pointer; user-select: none; }
.dev-table th.sortable:hover { color: var(--ink); }
.dev-table th .sort-ico { opacity: .5; margin-left: 3px; font-size: 9px; }
.dev-table th {
  background: var(--surface); color: var(--ink-3); font-family: var(--font-mono); font-weight: 700; text-transform: uppercase;
  font-size: 10px; letter-spacing: .1em; padding: 8px 6px; text-align: center; border-bottom: 1px solid var(--rule-strong);
}
.dev-table td { padding: 4px 5px; border-bottom: 1px solid var(--rule); text-align: center; }
.dev-table.sticky-head th { position: sticky; top: 0; z-index: 1; }
.dev-table .load-lbl { text-align: left; color: var(--ink-2); font-weight: 600; white-space: nowrap; }
.dev-table input { padding: 6px 8px; text-align: center; width: 100%; min-width: 54px; }
.dev-table .stat { font-weight: 600; color: var(--ink); background: var(--sunken); min-width: 42px; }
/* SD verdict cells: tints of ok / warn / bad — never new hexes */
.dev-table .stat.good-cell { color: var(--ok); background: var(--ok-wash); }
.dev-table .stat.best-cell { color: #fff; background: var(--olive-ink); font-weight: 700; }
.dev-table .stat.mid-cell { color: var(--warn); background: var(--warn-wash); }
.dev-table .stat.warn-cell { color: var(--bad); background: var(--bad-wash); }

.ocw-table input { min-width: 48px; }
.target-cell { white-space: nowrap; }
.target-thumb { height: 26px; width: 26px; object-fit: cover; border-radius: 4px; vertical-align: middle; margin-right: 4px; border: 1px solid var(--rule); cursor: zoom-in; }
.mini-btn {
  background: var(--sunken); border: 1px solid transparent; color: var(--ink);
  border-radius: var(--radius-xs); padding: 3px 7px; font-size: 12px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; min-width: 24px; min-height: 22px;
}
.mini-btn:hover { background: var(--navy-wash); }
.mini-btn.danger { color: var(--bad); }
.mini-btn.danger:hover { background: var(--bad-wash); }
.mini-btn .i { width: 13px; height: 13px; }

.chart-box { position: relative; height: 360px; width: 100%; }

/* Flat-spot node highlight — olive = the good state */
.node-hint {
  margin-top: 12px; padding: 10px 14px; border-radius: 4px var(--radius-sm) var(--radius-sm) 4px;
  background: var(--olive-wash); border: none; border-left: 3px solid var(--olive);
  color: var(--ink); font-size: 13px; display: none;
}
.node-hint.show { display: block; }
.node-hint b { color: var(--olive-ink); }
.node-hint .muted { color: var(--ink-3); }
.dev-table tr.flat-row td { background: var(--olive-wash); }
.dev-table tr.flat-row .load-lbl { color: var(--olive-ink); }

/* Target image lightbox */
.lightbox { position: relative; max-width: 90vw; max-height: 88vh; display: flex; flex-direction: column; align-items: center; }
.lightbox img { max-width: 90vw; max-height: 80vh; border-radius: var(--radius); border: none; background: var(--deep); }
.lightbox-cap { color: #F4F3EF; margin-top: 10px; font-weight: 600; font-size: 14px; }
.lightbox-close { position: absolute; top: -6px; right: -6px; background: var(--surface); border: none; border-radius: 50%; width: 34px; height: 34px; color: var(--ink); }

.dev-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }

/* Stacked fields for narrow setup sidebars — full-width inputs, label above */
.setup-stack .form-row { grid-template-columns: 1fr; gap: 5px; min-height: 0; margin-bottom: 12px; }
.setup-stack .form-row label { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }

/* ============ Node Calculator — case fill animation ============ */
.case-fill-wrap { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }
.case-fill-figure { position: relative; flex: 0 0 auto; text-align: center; }
.case-fill-figure svg { display: block; }
/* The reveal mask scales up from the case base; the transition is the "animation".
   Granules below the mask's top edge become visible, so the case fills bottom-up. */
#nodePowderFill {
  transform-origin: 50% 288px;
  transform: scaleY(0);
  transition: transform .28s ease-out;
}
/* Black grains (real extruded/ball powder is black/dark grey) with a thin lighter
   rim so each dot still reads clearly against the dark cavity background. */
.powder-particle { fill: #0d0d0d; stroke: #4a4a4a; stroke-width: 0.3; transition: fill .18s ease, stroke .18s ease; }
#powderParticles.state-warn .powder-particle { fill: #9A802D; stroke: #6d5a1e; }
#powderParticles.state-over .powder-particle { fill: #A33B2A; stroke: #6f271b; }
.case-fill-pct {
  margin-top: 6px; font-size: 22px; font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}

/* ---- fuel-gauge style readout, sitting alongside the cartridge ---- */
.case-fill-gauge { position: relative; flex: 0 0 auto; text-align: center; }
.case-fill-gauge svg { display: block; }
.gauge-track { fill: none; stroke: var(--sunken); stroke-width: 14; stroke-linecap: round; }
.gauge-zone-warn { fill: none; stroke: var(--brass); stroke-width: 14; stroke-linecap: round; opacity: .55; }
.gauge-zone-over { fill: none; stroke: var(--bad); stroke-width: 14; stroke-linecap: round; opacity: .55; }
.gauge-tick { stroke: var(--ink-3); stroke-width: 2; }
.gauge-label { font-size: 13px; font-weight: 700; fill: var(--ink-2); }
.gauge-label.gauge-e { fill: var(--bad); }
.gauge-label.gauge-f { fill: var(--ok); }
.gauge-pivot { fill: var(--ink); stroke: var(--surface); stroke-width: 1.5; }
/* Needle rotates about the pivot: -90deg = E (0%), 0deg = 50%, +90deg = F (100%),
   with a little overswing allowed past F to make heavily compressed loads read
   as visually "off the scale", same spirit as the numeric readout going red. */
.gauge-needle {
  transform-origin: 100px 100px;
  transform: rotate(-90deg);
  transition: transform .28s ease-out;
}
.gauge-needle line { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.case-fill-pct.warn { color: var(--warn); }
.case-fill-pct.over { color: var(--bad); }

/* ============ Node Calculator — suggested load ladder ============ */
.load-ladder { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px; }
.load-step {
  flex: 0 0 auto; min-width: 90px; text-align: center; padding: 10px 8px;
  border-radius: var(--radius-sm); background: var(--sunken); border: 1px solid transparent;
}
.load-step .gr { font-weight: 600; font-size: 14px; color: var(--ink); font-variant-numeric: tabular-nums; }
.load-step .g { font-size: 11px; color: var(--ink-2); margin-top: 2px; font-variant-numeric: tabular-nums; }
/* olive = the selected / suggested state */
.load-step.suggested { border-color: var(--olive); background: var(--olive-wash); }
.load-step .tag { margin-top: 4px; font-size: 10px; font-weight: 700; color: var(--olive-ink); text-transform: uppercase; letter-spacing: .08em; }