/* LSW house stylesheet (30 Sep 2026) — the shared visual grammar every surface
   loads AFTER its own <style>: it only uses the surfaces' design tokens and adds
   the classes the consistency pass standardised on, so a control looks the same
   on the soldier app, the command console and the admin console (and inside the
   shared modules that render into all three). Rules: docs/DESIGN-PREFS.md
   "Visual language" + "Interaction language". Never hardcode a colour here. */

/* --- section label: ONE eyebrow (was ~12 inline recipes) --- */
.eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin: 10px 0 3px; }
.eyebrow:first-child { margin-top: 0; }

/* --- pills: size by class, never inline --- */
.pill.sm { font-size: 10.5px; padding: 1px 7px; }
.pill.count { font-size: 11px; vertical-align: middle; }

/* --- buttons: compact sizes, destructive, text-like --- */
button.sm { width: auto; font-size: 12.5px; padding: 5px 10px; }
button.xs { width: auto; font-size: 11.5px; padding: 3px 8px; }
button.danger { color: var(--err); border-color: var(--err); background: transparent; }
button.danger.primary { background: var(--err); color: var(--primary-fg, #fff); border-color: var(--err); }
button.link { width: auto; background: none; border: none; padding: 0 2px; font-size: 12.5px; color: var(--accent); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; box-shadow: none; }
button.link:hover { opacity: .85; }

/* --- text --- */
.muted.sm { font-size: 11px; }

/* --- rows that open something: the whole row is the target, a chevron says so --- */
.row.tap { cursor: pointer; display: flex; align-items: center; gap: 8px; }
.row.tap > .main { flex: 1 1 auto; min-width: 0; }
.row.tap .go, .lf-go { color: var(--muted); margin-left: auto; flex: 0 0 auto; display: inline-flex; }
.row.tap .go svg.lswi, .lf-go svg.lswi { margin: 0; width: 18px; height: 18px; }
/* a fold that opens a record in place (the console's event rows) takes the same chevron, turned when open */
details.row.msg-fold.tapfold > summary .t > span:first-child::after { content: none; }
details.row.msg-fold.tapfold > summary .go svg.lswi { transition: transform .15s ease; }
details.row.msg-fold.tapfold[open] > summary .go svg.lswi { transform: rotate(90deg); }

/* --- a box inside a card (was inline border + radius) --- */
.sub-card { border: 1px solid var(--border); border-radius: 8px; padding: 10px; margin: 8px 0; }

/* --- numbered walkthrough step disc (duty page, event checklist, previews) --- */
.step-n { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--accent-fg, #fff); font-size: 12.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-top: 1px; }

/* --- the duty hero (soldier Duty tab + the console's read-only preview) --- */
.hero { text-align: center; padding: 22px 14px 20px; }
.hero .state { font-size: 22px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.hero .state.on { color: var(--accent); }
.hero .state.res { color: var(--amber); }
.hero .state.off { color: var(--muted); }
.hero .post { font-size: 15px; font-weight: 600; margin-top: 6px; }
.hero .sub { font-size: 12.5px; color: var(--muted); margin-top: 4px; }

/* --- notes block (handover notes, orders) — one look --- */
.notes { border-left-width: 4px; }

/* --- selected pick-one control: the one recipe (chips, sub-tabs, presets) --- */
.chips button.on, .chips .chip.on, .chip.on, .subnav button.on, .rc-pill.on, .rc-mini.on, .wf-tabs button.on, .seg button.seg-on {
  background: var(--primary-bg); color: var(--primary-fg); border-color: var(--primary-bg);
}

/* --- attention bar: always 4px --- */
.card[style*="border-left"] { border-left-width: 4px !important; }

@media (prefers-reduced-motion: reduce) { .row.tap, button.link, details.row.msg-fold.tapfold > summary .go svg.lswi { transition: none; } }

/* --- data-viz categorical slots (dataviz house palette, validated per mode) --- */
:root { --viz-1:#2a78d6; --viz-2:#eb6834; --viz-3:#1baf7a; --viz-4:#eda100; --viz-5:#e87ba4; --viz-6:#008300; }
html[data-theme="dark"], html[data-theme="leopard"] { --viz-1:#3987e5; --viz-2:#d95926; --viz-3:#199e70; --viz-4:#c98500; --viz-5:#d55181; --viz-6:#008300; }