/* =====================================================================
   Alpha Strike Table Helper — shared styles (five styles, light + dark)
   ---------------------------------------------------------------------
   <html data-style="field-manual|cockpit|record-sheet|hangar|tablet"
         data-theme="light|dark">   (no data-theme = follow the system)
   No data-style = Command Tablet (the bare :root values).
   Fonts: include styles/fonts.html's <link> in <head>. Every stack has
   real fallbacks, so the page is intentional without Google Fonts.
   Markup conventions for every component: see styles/STYLES.md.
   Components read tokens only; style-specific flourishes live in §4.
   ===================================================================== */

/* =====================================================================
   1. TOKENS
   Contract tokens: --bg --surface --surface-2 --surface-3 --fg --fg-muted
   --fg-faint --line --line-strong --accent --accent-fg --accent-soft
   --good --warn --bad --focus --font-display --font-body --font-mono
   --radius --radius-sm --shadow --tap --tn-hue
   Extra tokens (every style defines them too): --accent-text (accent as
   readable text on surfaces), --kind-special/-spa/-sca/-rule, --font-ui,
   --font-heading, --font-num, --tn-font/-weight/-size/-track,
   --display-*, --ui-*, --chip-radius, --sheet-radius, --badge-radius,
   --border-w, --seg-pad, --fs-body, --fs-ui, --bar-h, --sheet-shadow,
   --texture, --style-name (display name as a CSS string).
   ===================================================================== */

/* ---- Command Tablet (tablet) -------------------------------- */
:root,
:root[data-style="tablet"] {
  color-scheme: light;
  --font-display: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Spline Sans Mono", ui-monospace, "SF Mono", Menlo, "Roboto Mono", Consolas, "Liberation Mono", monospace;
  --font-ui: var(--font-body);
  --font-heading: var(--font-display);
  --font-title: var(--font-display);
  --font-num: var(--font-display);
  --radius: 12px;
  --radius-sm: 8px;
  --chip-radius: 8px;
  --sheet-radius: 18px;
  --badge-radius: 5px;
  --tap: 48px;
  --border-w: 1px;
  --seg-pad: 3px;
  --display-weight: 700;
  --display-case: none;
  --display-track: -0.01em;
  --display-stretch: normal;
  --display-scale: 1;
  --ui-case: none;
  --ui-track: 0em;
  --ui-weight: 600;
  --tn-font: var(--font-display);
  --tn-weight: 700;
  --tn-size: clamp(4.5rem, 24vw, 7.5rem);
  --tn-track: -0.03em;
  --fs-body: 1rem;
  --fs-ui: 0.9375rem;
  --bar-h: 10px;
  --style-name: "Command Tablet";
  --bg: #EDF0F3;
  --surface: #FFFFFF;
  --surface-2: #F4F6F8;
  --surface-3: #E2E7EC;
  --fg: #14202B;
  --fg-muted: #475565;
  --fg-faint: #535C68;
  --line: #D5DCE3;
  --line-strong: #8795A3;
  --accent: #00677F;
  --accent-fg: #FFFFFF;
  --accent-soft: #DCEEF2;
  --accent-text: #005A70;
  --good: #17683F;
  --warn: #864D00;
  --bad: #A92822;
  --focus: #0077C8;
  --tn-hue: #00576C;
  --kind-special: #1F5FA8;
  --kind-spa: #7A3E9D;
  --kind-sca: #8A5300;
  --kind-rule: #3D4C5C;
  --shadow: 0 1px 2px rgb(16 24 40 / 0.06), 0 2px 8px rgb(16 24 40 / 0.06);
  --sheet-shadow: 0 -8px 32px rgb(16 24 40 / 0.16);
  --texture: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-style]),
  :root:not([data-theme="light"])[data-style="tablet"] {
    color-scheme: dark;
    --bg: #0D1318;
    --surface: #151D24;
    --surface-2: #1B252E;
    --surface-3: #25313B;
    --fg: #E6ECF1;
    --fg-muted: #A2B0BD;
    --fg-faint: #A4ADB6;
    --line: #28343F;
    --line-strong: #5F6D7B;
    --accent: #3DBFD7;
    --accent-fg: #03202A;
    --accent-soft: #0E3440;
    --accent-text: #62CFE3;
    --good: #4CC28A;
    --warn: #EDB04A;
    --bad: #FF857A;
    --focus: #8FD8F8;
    --tn-hue: #6BD5E9;
    --kind-special: #86B6F2;
    --kind-spa: #CDA3EA;
    --kind-sca: #E5B970;
    --kind-rule: #AEBBC8;
    --shadow: 0 1px 0 rgb(255 255 255 / 0.03) inset, 0 6px 20px rgb(0 0 0 / 0.35);
    --sheet-shadow: 0 -10px 40px rgb(0 0 0 / 0.55);
    --texture: none;
  }
}
:root[data-theme="dark"]:not([data-style]),
:root[data-theme="dark"][data-style="tablet"] {
  color-scheme: dark;
  --bg: #0D1318;
  --surface: #151D24;
  --surface-2: #1B252E;
  --surface-3: #25313B;
  --fg: #E6ECF1;
  --fg-muted: #A2B0BD;
  --fg-faint: #A4ADB6;
  --line: #28343F;
  --line-strong: #5F6D7B;
  --accent: #3DBFD7;
  --accent-fg: #03202A;
  --accent-soft: #0E3440;
  --accent-text: #62CFE3;
  --good: #4CC28A;
  --warn: #EDB04A;
  --bad: #FF857A;
  --focus: #8FD8F8;
  --tn-hue: #6BD5E9;
  --kind-special: #86B6F2;
  --kind-spa: #CDA3EA;
  --kind-sca: #E5B970;
  --kind-rule: #AEBBC8;
  --shadow: 0 1px 0 rgb(255 255 255 / 0.03) inset, 0 6px 20px rgb(0 0 0 / 0.35);
  --sheet-shadow: 0 -10px 40px rgb(0 0 0 / 0.55);
  --texture: none;
}

/* ---- Field Manual (field-manual) ---------------------------- */
:root[data-style="field-manual"] {
  color-scheme: light;
  --font-display: "IBM Plex Sans Condensed", "Roboto Condensed", "Avenir Next Condensed", "Arial Narrow", sans-serif-condensed, "Helvetica Neue", Arial, sans-serif;
  --font-stencil: "Big Shoulders Stencil", "Stencil Std", "Stencil", "Avenir Next Condensed", "Arial Narrow", "Roboto Condensed", sans-serif-condensed, Impact, sans-serif;
  --font-body: "IBM Plex Sans Condensed", "Roboto Condensed", "Avenir Next Condensed", "Arial Narrow", sans-serif-condensed, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Spline Sans Mono", ui-monospace, "SF Mono", Menlo, "Roboto Mono", Consolas, "Liberation Mono", monospace;
  --font-ui: var(--font-body);
  --font-heading: var(--font-body);
  --font-title: var(--font-stencil);
  --font-num: var(--font-mono);
  --radius: 2px;
  --radius-sm: 2px;
  --chip-radius: 2px;
  --sheet-radius: 4px;
  --badge-radius: 1px;
  --tap: 46px;
  --border-w: 1px;
  --seg-pad: 0px;
  --display-weight: 700;
  --display-case: uppercase;
  --display-track: 0.03em;
  --display-stretch: normal;
  --display-scale: 1.05;
  --ui-case: uppercase;
  --ui-track: 0.06em;
  --ui-weight: 600;
  --tn-font: var(--font-stencil);
  --tn-weight: 800;
  --tn-size: clamp(5.5rem, 30vw, 9rem);
  --tn-track: 0;
  --fs-body: 1.0625rem;
  --fs-ui: 0.875rem;
  --bar-h: 14px;
  --style-name: "Field Manual";
  --bg: #E4DDC5;
  --surface: #F3EEDC;
  --surface-2: #EBE5CE;
  --surface-3: #DAD2B4;
  --fg: #22241A;
  --fg-muted: #43463A;
  --fg-faint: #4F5041;
  --line: #C9C09E;
  --line-strong: #7A775A;
  --accent: #4A5320;
  --accent-fg: #F3EEDC;
  --accent-soft: #DDDDB9;
  --accent-text: #3F4719;
  --good: #265822;
  --warn: #6E4400;
  --bad: #90281C;
  --focus: #B33A16;
  --tn-hue: #2E3510;
  --kind-special: #4A5320;
  --kind-spa: #7E3A1B;
  --kind-sca: #1E4D5E;
  --kind-rule: #22241A;
  --shadow: 0 1px 0 rgb(70 64 30 / 0.22);
  --sheet-shadow: 0 -6px 24px rgb(50 46 20 / 0.25);
  --texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .29 0 0 0 0 .14 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])[data-style="field-manual"] {
    color-scheme: dark;
    --bg: #181A12;
    --surface: #212419;
    --surface-2: #282B1E;
    --surface-3: #333727;
    --fg: #E8E2CA;
    --fg-muted: #B7B196;
    --fg-faint: #B7B4A4;
    --line: #383B2B;
    --line-strong: #6F7358;
    --accent: #B3BD72;
    --accent-fg: #181A12;
    --accent-soft: #343A1F;
    --accent-text: #C3CC85;
    --good: #8DC47A;
    --warn: #E3B04B;
    --bad: #F29D85;
    --focus: #F09060;
    --tn-hue: #D9D29A;
    --kind-special: #BEC77E;
    --kind-spa: #E49F78;
    --kind-sca: #8CC5D5;
    --kind-rule: #E8E2CA;
    --shadow: 0 1px 0 rgb(0 0 0 / 0.4);
    --sheet-shadow: 0 -8px 32px rgb(0 0 0 / 0.6);
    --texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .9 0 0 0 0 .86 0 0 0 0 .7 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
}
:root[data-theme="dark"][data-style="field-manual"] {
  color-scheme: dark;
  --bg: #181A12;
  --surface: #212419;
  --surface-2: #282B1E;
  --surface-3: #333727;
  --fg: #E8E2CA;
  --fg-muted: #B7B196;
  --fg-faint: #B7B4A4;
  --line: #383B2B;
  --line-strong: #6F7358;
  --accent: #B3BD72;
  --accent-fg: #181A12;
  --accent-soft: #343A1F;
  --accent-text: #C3CC85;
  --good: #8DC47A;
  --warn: #E3B04B;
  --bad: #F29D85;
  --focus: #F09060;
  --tn-hue: #D9D29A;
  --kind-special: #BEC77E;
  --kind-spa: #E49F78;
  --kind-sca: #8CC5D5;
  --kind-rule: #E8E2CA;
  --shadow: 0 1px 0 rgb(0 0 0 / 0.4);
  --sheet-shadow: 0 -8px 32px rgb(0 0 0 / 0.6);
  --texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .9 0 0 0 0 .86 0 0 0 0 .7 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- Neurohelmet (cockpit) ---------------------------------- */
:root[data-style="cockpit"] {
  color-scheme: light;
  --font-display: "Chakra Petch", "Eurostile", "Bahnschrift", "DIN Alternate", "Roboto Condensed", "Avenir Next Condensed", "Arial Narrow", sans-serif;
  --font-body: "Chakra Petch", "Bahnschrift", "DIN Alternate", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Spline Sans Mono", ui-monospace, "SF Mono", Menlo, "Roboto Mono", Consolas, "Liberation Mono", monospace;
  --font-ui: var(--font-display);
  --font-heading: var(--font-display);
  --font-title: var(--font-display);
  --font-num: var(--font-display);
  --radius: 0px;
  --radius-sm: 0px;
  --chip-radius: 0px;
  --sheet-radius: 0px;
  --badge-radius: 0px;
  --tap: 44px;
  --border-w: 1px;
  --seg-pad: 0px;
  --display-weight: 600;
  --display-case: uppercase;
  --display-track: 0.08em;
  --display-stretch: normal;
  --display-scale: 1;
  --ui-case: uppercase;
  --ui-track: 0.08em;
  --ui-weight: 600;
  --tn-font: var(--font-display);
  --tn-weight: 600;
  --tn-size: clamp(5rem, 28vw, 8.5rem);
  --tn-track: -0.01em;
  --fs-body: 1rem;
  --fs-ui: 0.875rem;
  --bar-h: 14px;
  --style-name: "Neurohelmet";
  --bg: #D3D6CB;
  --surface: #ECEDE6;
  --surface-2: #E1E3D8;
  --surface-3: #CCCFC1;
  --fg: #191B14;
  --fg-muted: #3B3F32;
  --fg-faint: #4B4C42;
  --line: #B5B8A9;
  --line-strong: #6F7366;
  --accent: #9A4E00;
  --accent-fg: #FFF7E8;
  --accent-soft: #EEDCBD;
  --accent-text: #753B00;
  --good: #1C562D;
  --warn: #5A4A00;
  --bad: #8E1E19;
  --focus: #0E6A85;
  --tn-hue: #874400;
  --kind-special: #874400;
  --kind-spa: #0E627B;
  --kind-sca: #386429;
  --kind-rule: #3C3F33;
  --shadow: 0 1px 0 rgb(255 255 255 / 0.6) inset, 0 1px 2px rgb(30 32 20 / 0.18);
  --sheet-shadow: 0 -6px 24px rgb(30 32 20 / 0.25);
  --texture: linear-gradient(180deg, rgb(255 255 255 / 0.35), rgb(255 255 255 / 0) 320px);
  --scan: rgb(25 27 20 / 0.05);
  --glow: transparent;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])[data-style="cockpit"] {
    color-scheme: dark;
    --bg: #0A0B08;
    --surface: #111310;
    --surface-2: #171A14;
    --surface-3: #20241B;
    --fg: #F0DDB6;
    --fg-muted: #C4A676;
    --fg-faint: #AB9877;
    --line: #2B2A1F;
    --line-strong: #77633A;
    --accent: #FFB21E;
    --accent-fg: #1A1100;
    --accent-soft: #2E2309;
    --accent-text: #FFBE45;
    --good: #86D69B;
    --warn: #FF8C42;
    --bad: #FF6469;
    --focus: #7FE0F0;
    --tn-hue: #FFB21E;
    --kind-special: #FFB21E;
    --kind-spa: #7FD3E0;
    --kind-sca: #A9DDB0;
    --kind-rule: #D9C7A1;
    --shadow: 0 0 0 1px rgb(255 178 30 / 0.04), 0 8px 30px rgb(0 0 0 / 0.6);
    --sheet-shadow: 0 -10px 40px rgb(0 0 0 / 0.8);
    --texture: radial-gradient(120% 60% at 50% -10%, rgb(255 178 30 / 0.07), transparent 70%);
    --scan: rgb(255 178 30 / 0.045);
    --glow: rgb(255 178 30 / 0.45);
  }
}
:root[data-theme="dark"][data-style="cockpit"] {
  color-scheme: dark;
  --bg: #0A0B08;
  --surface: #111310;
  --surface-2: #171A14;
  --surface-3: #20241B;
  --fg: #F0DDB6;
  --fg-muted: #C4A676;
  --fg-faint: #AB9877;
  --line: #2B2A1F;
  --line-strong: #77633A;
  --accent: #FFB21E;
  --accent-fg: #1A1100;
  --accent-soft: #2E2309;
  --accent-text: #FFBE45;
  --good: #86D69B;
  --warn: #FF8C42;
  --bad: #FF6469;
  --focus: #7FE0F0;
  --tn-hue: #FFB21E;
  --kind-special: #FFB21E;
  --kind-spa: #7FD3E0;
  --kind-sca: #A9DDB0;
  --kind-rule: #D9C7A1;
  --shadow: 0 0 0 1px rgb(255 178 30 / 0.04), 0 8px 30px rgb(0 0 0 / 0.6);
  --sheet-shadow: 0 -10px 40px rgb(0 0 0 / 0.8);
  --texture: radial-gradient(120% 60% at 50% -10%, rgb(255 178 30 / 0.07), transparent 70%);
  --scan: rgb(255 178 30 / 0.045);
  --glow: rgb(255 178 30 / 0.45);
}

/* ---- Record Sheet (record-sheet) ---------------------------- */
:root[data-style="record-sheet"] {
  color-scheme: light;
  --font-display: "Saira Extra Condensed", "Roboto Condensed", "Avenir Next Condensed", "Arial Narrow", sans-serif-condensed, "Helvetica Neue", Arial, sans-serif;
  --font-body: "Saira Semi Condensed", "Roboto Condensed", "Avenir Next Condensed", "Arial Narrow", sans-serif-condensed, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Spline Sans Mono", ui-monospace, "SF Mono", Menlo, "Roboto Mono", Consolas, "Liberation Mono", monospace;
  --font-ui: var(--font-body);
  --font-heading: var(--font-display);
  --font-title: var(--font-display);
  --font-num: var(--font-display);
  --radius: 6px;
  --radius-sm: 3px;
  --chip-radius: 3px;
  --sheet-radius: 8px;
  --badge-radius: 2px;
  --tap: 44px;
  --border-w: 2px;
  --seg-pad: 0px;
  --display-weight: 700;
  --display-case: uppercase;
  --display-track: 0.01em;
  --display-stretch: normal;
  --display-scale: 1.25;
  --ui-case: uppercase;
  --ui-track: 0.04em;
  --ui-weight: 600;
  --tn-font: var(--font-display);
  --tn-weight: 700;
  --tn-size: clamp(6rem, 34vw, 10rem);
  --tn-track: 0;
  --fs-body: 1.0625rem;
  --fs-ui: 0.9375rem;
  --bar-h: 20px;
  --style-name: "Record Sheet";
  --bg: #E2E2DE;
  --surface: #FFFFFF;
  --surface-2: #F4F4F2;
  --surface-3: #E7E7E4;
  --fg: #111111;
  --fg-muted: #454545;
  --fg-faint: #5B5B5B;
  --line: #CDCDC9;
  --line-strong: #111111;
  --accent: #111111;
  --accent-fg: #FFFFFF;
  --accent-soft: #EBEBE8;
  --accent-text: #111111;
  --good: #146834;
  --warn: #844F00;
  --bad: #B1111D;
  --focus: #C8102E;
  --tn-hue: #111111;
  --kind-special: #111111;
  --kind-spa: #B80F25;
  --kind-sca: #1C4F8F;
  --kind-rule: #4A4A4A;
  --shadow: 0 1px 2px rgb(0 0 0 / 0.14);
  --sheet-shadow: 0 -6px 24px rgb(0 0 0 / 0.22);
  --texture: none;
  --rs-red: #C8102E;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])[data-style="record-sheet"] {
    color-scheme: dark;
    --bg: #0B0B0B;
    --surface: #181818;
    --surface-2: #202020;
    --surface-3: #2A2A2A;
    --fg: #F3F3F0;
    --fg-muted: #BBBBB7;
    --fg-faint: #A3A3A0;
    --line: #363636;
    --line-strong: #E6E6E2;
    --accent: #F3F3F0;
    --accent-fg: #111111;
    --accent-soft: #2C2C2C;
    --accent-text: #F3F3F0;
    --good: #5CC97F;
    --warn: #F0B13F;
    --bad: #FF787E;
    --focus: #FF5E66;
    --tn-hue: #F3F3F0;
    --kind-special: #F3F3F0;
    --kind-spa: #FF7A82;
    --kind-sca: #84B2F2;
    --kind-rule: #BBBBB7;
    --shadow: 0 1px 0 rgb(0 0 0 / 0.5);
    --sheet-shadow: 0 -8px 32px rgb(0 0 0 / 0.7);
    --texture: none;
    --rs-red: #FF4D5A;
  }
}
:root[data-theme="dark"][data-style="record-sheet"] {
  color-scheme: dark;
  --bg: #0B0B0B;
  --surface: #181818;
  --surface-2: #202020;
  --surface-3: #2A2A2A;
  --fg: #F3F3F0;
  --fg-muted: #BBBBB7;
  --fg-faint: #A3A3A0;
  --line: #363636;
  --line-strong: #E6E6E2;
  --accent: #F3F3F0;
  --accent-fg: #111111;
  --accent-soft: #2C2C2C;
  --accent-text: #F3F3F0;
  --good: #5CC97F;
  --warn: #F0B13F;
  --bad: #FF787E;
  --focus: #FF5E66;
  --tn-hue: #F3F3F0;
  --kind-special: #F3F3F0;
  --kind-spa: #FF7A82;
  --kind-sca: #84B2F2;
  --kind-rule: #BBBBB7;
  --shadow: 0 1px 0 rgb(0 0 0 / 0.5);
  --sheet-shadow: 0 -8px 32px rgb(0 0 0 / 0.7);
  --texture: none;
  --rs-red: #FF4D5A;
}

/* ---- 'Mech Bay (hangar) ------------------------------------- */
:root[data-style="hangar"] {
  color-scheme: light;
  --font-display: "Archivo", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Archivo", "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "Spline Sans Mono", ui-monospace, "SF Mono", Menlo, "Roboto Mono", Consolas, "Liberation Mono", monospace;
  --font-ui: var(--font-body);
  --font-heading: var(--font-display);
  --font-title: var(--font-display);
  --font-num: var(--font-display);
  --radius: 4px;
  --radius-sm: 3px;
  --chip-radius: 3px;
  --sheet-radius: 6px;
  --badge-radius: 2px;
  --tap: 48px;
  --border-w: 1px;
  --seg-pad: 0px;
  --display-weight: 800;
  --display-case: uppercase;
  --display-track: 0.02em;
  --display-stretch: 125%;
  --display-scale: 0.92;
  --ui-case: uppercase;
  --ui-track: 0.05em;
  --ui-weight: 600;
  --tn-font: var(--font-display);
  --tn-weight: 800;
  --tn-size: clamp(4.5rem, 24vw, 7.5rem);
  --tn-track: -0.02em;
  --fs-body: 1rem;
  --fs-ui: 0.875rem;
  --bar-h: 14px;
  --style-name: "'Mech Bay";
  --bg: #CDD1D3;
  --surface: #EEF0F0;
  --surface-2: #E3E6E7;
  --surface-3: #D1D5D8;
  --fg: #1B1E21;
  --fg-muted: #393E43;
  --fg-faint: #4C5053;
  --line: #B3B9BE;
  --line-strong: #6E757C;
  --accent: #F2BF00;
  --accent-fg: #1B1E21;
  --accent-soft: #F4E4A0;
  --accent-text: #664B00;
  --good: #1A5B35;
  --warn: #833A00;
  --bad: #971F1B;
  --focus: #0B5CAD;
  --tn-hue: #1B1E21;
  --kind-special: #6E5100;
  --kind-spa: #0B5C8C;
  --kind-sca: #8C2F5A;
  --kind-rule: #3D444B;
  --shadow: inset 0 1px 0 rgb(255 255 255 / 0.7), 0 1px 0 rgb(0 0 0 / 0.08), 0 2px 6px rgb(20 24 28 / 0.14);
  --sheet-shadow: 0 -8px 28px rgb(20 24 28 / 0.3);
  --texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.003 .9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .15 0 0 0 0 .17 0 0 0 0 .19 0 0 0 .10 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23b)'/%3E%3C/svg%3E");
  --rivet: #8A9196;
  --rivet-hi: rgb(255 255 255 / 0.85);
  --worklight: rgb(255 196 64 / 0.28);
  --hazard-dark: #1B1E21;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])[data-style="hangar"] {
    color-scheme: dark;
    --bg: #131518;
    --surface: #1C1F23;
    --surface-2: #23272C;
    --surface-3: #2D3238;
    --fg: #E6E8EA;
    --fg-muted: #AAB0B6;
    --fg-faint: #AAAEB3;
    --line: #33383E;
    --line-strong: #666D74;
    --accent: #F5C518;
    --accent-fg: #17191B;
    --accent-soft: #3A3213;
    --accent-text: #F7CF45;
    --good: #6BCB8A;
    --warn: #FF9A3C;
    --bad: #FF8C81;
    --focus: #7CC4FF;
    --tn-hue: #FFCB2E;
    --kind-special: #F7CF45;
    --kind-spa: #72C3F0;
    --kind-sca: #F293BD;
    --kind-rule: #C2C8CE;
    --shadow: inset 0 1px 0 rgb(255 255 255 / 0.05), 0 2px 8px rgb(0 0 0 / 0.45);
    --sheet-shadow: 0 -10px 36px rgb(0 0 0 / 0.7);
    --texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.003 .9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .85 0 0 0 0 .88 0 0 0 0 .92 0 0 0 .035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23b)'/%3E%3C/svg%3E");
    --rivet: #4A5056;
    --rivet-hi: rgb(255 255 255 / 0.22);
    --worklight: rgb(255 190 60 / 0.13);
    --hazard-dark: #17191B;
  }
}
:root[data-theme="dark"][data-style="hangar"] {
  color-scheme: dark;
  --bg: #131518;
  --surface: #1C1F23;
  --surface-2: #23272C;
  --surface-3: #2D3238;
  --fg: #E6E8EA;
  --fg-muted: #AAB0B6;
  --fg-faint: #AAAEB3;
  --line: #33383E;
  --line-strong: #666D74;
  --accent: #F5C518;
  --accent-fg: #17191B;
  --accent-soft: #3A3213;
  --accent-text: #F7CF45;
  --good: #6BCB8A;
  --warn: #FF9A3C;
  --bad: #FF8C81;
  --focus: #7CC4FF;
  --tn-hue: #FFCB2E;
  --kind-special: #F7CF45;
  --kind-spa: #72C3F0;
  --kind-sca: #F293BD;
  --kind-rule: #C2C8CE;
  --shadow: inset 0 1px 0 rgb(255 255 255 / 0.05), 0 2px 8px rgb(0 0 0 / 0.45);
  --sheet-shadow: 0 -10px 36px rgb(0 0 0 / 0.7);
  --texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.003 .9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .85 0 0 0 0 .88 0 0 0 0 .92 0 0 0 .035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23b)'/%3E%3C/svg%3E");
  --rivet: #4A5056;
  --rivet-hi: rgb(255 255 255 / 0.22);
  --worklight: rgb(255 190 60 / 0.13);
  --hazard-dark: #17191B;
}

/* =====================================================================
   2. BASE — element defaults, all token-driven
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }

:root { --fs-ui-fluid: clamp(0.8125rem, 3.6vw, var(--fs-ui)); }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background-color: var(--bg);
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--bg);
  background-image: var(--texture);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  overflow-wrap: break-word;
}

h1, h2, h3, h4 {
  margin: 0 0 0.5em;
  line-height: 1.1;
  font-family: var(--font-heading);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  text-transform: var(--display-case);
  letter-spacing: var(--display-track);
  color: var(--fg);
}
h1 { font-size: calc(1.75rem * var(--display-scale)); }
/* Opt-in display face for a short page title (≤ 3 words). Field Manual renders it in stencil. */
.display-title { font-family: var(--font-title, var(--font-display)); }
h2 { font-size: calc(1.3rem * var(--display-scale)); }
h3 { font-size: calc(1.1rem * var(--display-scale)); }
h4 { font-size: 1rem; }

p { margin: 0 0 0.75em; }
a { color: var(--accent-text); text-underline-offset: 0.18em; }
small { font-size: 0.8125em; }
hr { border: 0; border-top: 1px solid var(--line); margin: 1rem 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:disabled { cursor: not-allowed; }
::selection { background: var(--accent-soft); color: var(--fg); }
::placeholder { color: var(--fg-muted); opacity: 1; }

/* Focus: always visible for keyboard users, never for mouse/touch taps. */
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }

/* Helpers (optional) */
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums lining-nums; }
/* Numerals are never letter-spaced, even inside uppercase-tracked controls (no "2 . 4"). */
.num, .value, .count, .tn-sub strong, .seg small, .stepper > output, .stepper > .value, .stepper > input { letter-spacing: 0; }
.mono { font-family: var(--font-mono); }
.muted { color: var(--fg-muted); }
.faint { color: var(--fg-faint); }
.good { color: var(--good); }
.warn { color: var(--warn); }
.bad { color: var(--bad); }
.eyebrow, .card-kicker {
  display: block;
  margin: 0 0 0.35rem;
  font-family: var(--font-label, var(--font-mono));
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: var(--eyebrow-track, 0.1em);
  text-transform: uppercase;
  color: var(--fg-muted);
}
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* =====================================================================
   3. COMPONENTS
   ===================================================================== */

/* ---- .btn / .btn-primary ------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: var(--tap);
  min-width: var(--tap);
  padding: 0.3em clamp(0.7em, 3vw, 1.1em);
  border: var(--border-w) solid var(--line-strong);
  border-radius: var(--radius-sm);
  background-color: var(--surface);
  color: var(--fg);
  font-family: var(--font-ui);
  font-size: var(--fs-ui-fluid);
  font-weight: var(--ui-weight);
  line-height: 1.1;
  letter-spacing: min(var(--ui-track), 0.04em);
  text-transform: var(--ui-case);
  text-decoration: none;
  text-align: center;
  text-wrap: balance;
  overflow-wrap: anywhere;
  max-width: 100%;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
@media (hover: hover) { .btn:hover { background-color: var(--surface-2); } }
.btn:active { background-color: var(--surface-3); }
.btn-primary {
  background-color: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg);
}
@media (hover: hover) { .btn-primary:hover { background-color: color-mix(in srgb, var(--accent) 88%, var(--fg)); } }
.btn-primary:active { background-color: color-mix(in srgb, var(--accent) 78%, var(--fg)); }
.btn-quiet { border-color: transparent; background-color: transparent; color: var(--accent-text); }
@media (hover: hover) { .btn-quiet:hover { background-color: var(--accent-soft); } }
.btn-block { display: flex; width: 100%; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }
.btn svg, .chip svg { width: 1.15em; height: 1.15em; flex: none; }

/* ---- .chip (toggle with aria-pressed) ------------------------------ */
.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  min-height: var(--tap);
  max-width: 100%;
  padding: 0.25em clamp(0.6em, 2.6vw, 0.9em);
  border: var(--border-w) solid var(--line-strong);
  border-radius: var(--chip-radius);
  background-color: var(--surface);
  color: var(--fg);
  font-family: var(--font-ui);
  font-size: var(--fs-ui-fluid);
  font-weight: var(--ui-weight);
  line-height: 1.1;
  letter-spacing: min(var(--ui-track), 0.04em);
  text-transform: var(--ui-case);
  text-decoration: none;
  text-align: center;
  text-wrap: balance;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
@media (hover: hover) { .chip:not([aria-pressed="true"]):not([aria-selected="true"]):not([aria-checked="true"]):hover { background-color: var(--surface-2); } }
.chip[aria-pressed="true"], .chip[aria-selected="true"], .chip[aria-checked="true"] {
  background-color: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg);
}
.chip:disabled, .chip[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }
.chip .count { font-family: var(--font-num); font-variant-numeric: tabular-nums; opacity: 0.75; }

/* ---- .seg (segmented control) --------------------------------------
   <div class="seg" role="group"><button aria-pressed="true">S</button>…</div>
   also: [aria-checked] (role=radio), [aria-selected] (role=tab),
   or <input type="radio"> + <label> pairs. */
.seg {
  display: flex;
  align-items: stretch;
  gap: var(--seg-pad);
  padding: var(--seg-pad);
  border: var(--border-w) solid var(--line-strong);
  border-radius: var(--radius-sm);
  background-color: var(--surface-2);
  max-width: 100%;
}
.seg > button, .seg > a, .seg > label {
  flex: 1 1 0;
  min-width: 0;
  min-height: var(--tap);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3em;
  padding: 0.2em clamp(0.2em, 1vw, 0.5em);
  margin: 0;
  border: 0;
  border-radius: max(0px, calc(var(--radius-sm) - var(--seg-pad)));
  background: transparent;
  color: var(--fg);
  font-family: var(--font-ui);
  font-size: var(--fs-ui-fluid);
  font-weight: var(--ui-weight);
  line-height: 1.05;
  letter-spacing: min(var(--ui-track), 0.02em);
  text-transform: var(--ui-case);
  text-decoration: none;
  text-align: center;
  text-wrap: balance;
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
.seg > input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.seg > :not(input):not(:first-child) { box-shadow: calc(-1 * var(--border-w)) 0 0 var(--seg-divider, var(--line)); }
@media (hover: hover) {
  .seg > :not(input):not([aria-pressed="true"]):not([aria-checked="true"]):not([aria-selected="true"]):not(input:checked + label):hover { background-color: var(--surface-3); }
}
.seg > [aria-pressed="true"], .seg > [aria-checked="true"], .seg > [aria-selected="true"],
.seg > [aria-current="true"], .seg > [aria-current="page"], .seg > input:checked + label {
  background-color: var(--accent);
  color: var(--accent-fg);
  box-shadow: none;
}
.seg > [aria-pressed="true"] + *, .seg > [aria-checked="true"] + *, .seg > [aria-selected="true"] + *,
.seg > input:checked + label + input + label { box-shadow: none; }
.seg > :focus-visible, .seg > input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: -3px; }
.seg > :disabled { opacity: 0.4; cursor: not-allowed; }
.seg small { font-family: var(--font-num); font-size: max(0.75em, 0.75rem); opacity: 0.8; }

/* ---- .stepper -----------------------------------------------------
   <div class="stepper"><button aria-label="Less">−</button><output>4</output><button aria-label="More">+</button></div> */
.stepper {
  display: inline-flex;
  align-items: stretch;
  max-width: 100%;
  border: var(--border-w) solid var(--line-strong);
  border-radius: var(--radius-sm);
  background-color: var(--surface);
  overflow: hidden;
}
.stepper > button {
  flex: none;
  width: var(--tap);
  min-height: var(--tap);
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background-color: var(--surface-2);
  color: var(--fg);
  font-family: var(--font-num);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
.stepper > button:hover { background-color: var(--surface-3); }
.stepper > button:active { background-color: var(--accent-soft); }
.stepper > button:disabled { color: var(--fg-faint); background-color: var(--surface); }
.stepper > button:focus-visible { outline-offset: -3px; }
.stepper > output, .stepper > .value, .stepper > input {
  min-width: 3.25ch;
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.4em;
  border: 0;
  border-inline: 1px solid var(--line);
  background: transparent;
  color: var(--fg);
  font-family: var(--font-num);
  font-size: 1.375rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1;
  text-align: center;
}
.stepper > input { width: 4ch; appearance: textfield; -moz-appearance: textfield; }
.stepper > input::-webkit-inner-spin-button, .stepper > input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.stepper .unit { font-size: 0.6em; font-weight: 600; color: var(--fg-muted); margin-left: 0.1em; }

/* ---- .card -------------------------------------------------------- */
.card {
  display: block;
  padding: var(--card-pad, 1rem);
  border: var(--border-w) solid var(--card-line, var(--line));
  border-radius: var(--radius);
  background-color: var(--surface);
  color: var(--fg);
  box-shadow: var(--shadow);
  text-align: start;
}
.card > :last-child { margin-bottom: 0; }
a.card, button.card { width: 100%; font: inherit; text-decoration: none; cursor: pointer; }
a.card:hover, button.card:hover { border-color: var(--line-strong); }
.card-title {
  margin: 0 0 0.35rem;
  font-family: var(--font-heading);
  font-size: calc(1.15rem * var(--display-scale));
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  letter-spacing: var(--display-track);
  text-transform: var(--display-case);
  line-height: 1.12;
  color: var(--fg);
}
.card[data-section]::before {
  content: attr(data-section);
  display: block;
  margin: 0 0 0.5rem;
  font-family: var(--font-label, var(--font-mono));
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: var(--eyebrow-track, 0.1em);
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* ---- .badge ------------------------------------------------------
   kinds:   .badge[data-kind="special|spa|sca|rule"]  (or .badge-special …)
   optional:.badge-optional  (dashed: "this is an optional rule")
   status:  .badge-good / .badge-warn / .badge-bad */
.badge {
  --badge-c: var(--fg-muted);
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0.2em 0.5em 0.15em;
  border: 1px solid var(--badge-c);
  border-radius: var(--badge-radius);
  background-color: color-mix(in srgb, var(--badge-c) 11%, transparent);
  color: var(--badge-c);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: 0.15em;
}
.badge svg { width: 1em; height: 1em; margin-right: 0.3em; vertical-align: -0.12em; }
.badge[data-kind="special"], .badge-special { --badge-c: var(--kind-special); }
.badge[data-kind="spa"], .badge-spa { --badge-c: var(--kind-spa); }
.badge[data-kind="sca"], .badge-sca { --badge-c: var(--kind-sca); }
.badge[data-kind="rule"], .badge-rule { --badge-c: var(--kind-rule); }
.badge-optional, .badge[data-optional] { --badge-c: var(--fg-muted); border-style: dashed; background-color: transparent; }
.badge-good { --badge-c: var(--good); }
.badge-warn { --badge-c: var(--warn); }
.badge-bad { --badge-c: var(--bad); }

/* ---- .tn-readout -------------------------------------------------
   <div class="tn-readout">
     <span class="tn-label">Target number</span>
     <span class="tn-value">8<span class="tn-plus">+</span></span>
     <span class="tn-sub">42% to hit</span>
   </div>
   Plain text inside .tn-readout is also rendered big.
   data-state="auto-hit" | "no-hit" recolours the number. */
.tn-readout {
  color: var(--tn-hue);
  font-family: var(--tn-font);
  font-size: var(--tn-size);
  font-weight: var(--tn-weight);
  font-stretch: var(--display-stretch);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: var(--tn-track);
  line-height: 0.88;
}
.tn-readout .tn-value { display: inline-block; }
.tn-readout .tn-plus { font-size: 0.5em; vertical-align: 0.72em; margin-left: 0.04em; letter-spacing: 0; }
.tn-readout .tn-label, .tn-readout .tn-sub {
  display: block;
  font-stretch: normal;
  letter-spacing: normal;
  line-height: 1.25;
  color: var(--fg-muted);
}
.tn-readout .tn-label {
  margin-bottom: 0.4rem;
  font-family: var(--font-label, var(--font-mono));
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.tn-readout .tn-sub {
  margin-top: 0.45rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
}
.tn-readout .tn-sub strong { color: var(--fg); font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.tn-readout[data-state="auto-hit"] { color: var(--good); }
.tn-readout[data-state="no-hit"] { color: var(--bad); }

/* ---- .odds-bar ----------------------------------------------------
   <div class="odds-bar" style="--p:.4167" role="meter" aria-valuemin="0" aria-valuemax="100" aria-valuenow="42" aria-label="Chance to hit"></div>
   optional data-band="good|warn|bad" colours the fill semantically. */
.odds-bar {
  --p: 0;
  --odds-fill: var(--accent);
  position: relative;
  display: block;
  width: 100%;
  height: var(--bar-h);
  border-radius: var(--radius-sm);
  background-color: var(--surface-3);
  box-shadow: inset 0 0 0 1px var(--line);
  overflow: hidden;
}
.odds-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--odds-fill);
  clip-path: inset(0 calc(100% - clamp(0, var(--p), 1) * 100%) 0 0);
}
.odds-bar::after { /* 25 / 50 / 75 % ticks */
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(var(--bg), var(--bg)) 25% 0 / 1px 100% no-repeat,
    linear-gradient(var(--bg), var(--bg)) 50% 0 / 2px 100% no-repeat,
    linear-gradient(var(--bg), var(--bg)) 75% 0 / 1px 100% no-repeat;
  opacity: 0.55;
  pointer-events: none;
}
.odds-bar[data-band="good"] { --odds-fill: var(--good); }
.odds-bar[data-band="warn"] { --odds-fill: var(--warn); }
.odds-bar[data-band="bad"] { --odds-fill: var(--bad); }
.odds-bar > * { position: relative; z-index: 1; }

/* ---- .line-item ---------------------------------------------------
   <li class="line-item"><span class="label">Jumped</span><span class="value">+2</span><span class="ref">p.42</span></li>
   (.page is accepted as an alias of .ref; .ref avoids clashing with layout classes)
   modifiers: .is-base  .is-total  .is-ignored  ; value colour opt-in: .value.is-good / .is-bad
   .note spans the full row under the label. */
.line-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: baseline;
  column-gap: 0.75rem;
  padding: 0.6rem 0;
  border-bottom: 1px var(--line-style, solid) var(--line);
  color: var(--fg);
  list-style: none;
}
.line-item .label { min-width: 0; }
.line-item .value {
  min-width: 2.6ch;
  text-align: right;
  font-family: var(--font-num);
  font-size: 1.125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}
.line-item > .ref, .line-item > .page {
  margin: 0;
  padding: 0;
  max-width: none;
  min-width: 3.4em;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--fg-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.line-item > a.ref, .line-item > button.ref, .line-item > a.page, .line-item > button.page {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  min-height: var(--tap);
  margin-block: calc((var(--tap) - 1.4em) / -2);
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-text);
  text-decoration: underline;
  text-decoration-style: dotted;
}
.line-item .note { grid-column: 1 / -1; margin-top: 0.15rem; font-size: 0.875rem; color: var(--fg-muted); }
.line-item.is-base .label { font-weight: 600; }
.line-item.is-total { border-top: 2px solid var(--line-strong); border-bottom: 0; font-weight: 700; }
.line-item.is-total .value { font-size: 1.375rem; color: var(--tn-hue); }
.line-item.is-ignored .label, .line-item.is-ignored .value { color: var(--fg-faint); }
.line-item.is-ignored .value { text-decoration: line-through; text-decoration-thickness: 2px; }
.line-item .value.is-good { color: var(--good); }
.line-item .value.is-bad { color: var(--bad); }
ul:has(> .line-item), ol:has(> .line-item) { margin: 0; padding: 0; }

/* ---- .sheet (bottom sheet panel — the concept positions it) ------- */
.sheet {
  display: block;
  padding: 1.25rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
  border: var(--border-w) solid var(--line-strong);
  border-bottom: 0;
  border-radius: var(--sheet-radius) var(--sheet-radius) 0 0;
  background-color: var(--surface);
  color: var(--fg);
  box-shadow: var(--sheet-shadow);
  max-height: 88dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.sheet::before { /* grabber */
  content: "";
  display: block;
  width: 2.5rem;
  height: 4px;
  margin: -0.5rem auto 0.5rem;
  border-radius: 2px;
  background-color: var(--line-strong);
}
.sheet-backdrop { background-color: rgb(0 0 0 / 0.45); }

/* ---- .tabbar (the concept positions it; padding includes safe area) */
.tabbar {
  display: flex;
  align-items: stretch;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  border-top: var(--border-w) solid var(--line-strong);
  background-color: var(--tabbar-bg, var(--surface));
  color: var(--fg-muted);
}
.tabbar > a, .tabbar > button {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  min-height: calc(var(--tap) + 10px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  padding: 0.4rem 0.25rem;
  border: 0;
  background: none;
  color: var(--fg-muted);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: var(--ui-weight);
  line-height: 1.1;
  letter-spacing: min(var(--ui-track), 0.04em);
  text-align: center;
  overflow-wrap: anywhere;
  text-transform: var(--ui-case);
  text-decoration: none;
  touch-action: manipulation;
}
.tabbar > :hover { color: var(--fg); }
.tabbar svg { width: 24px; height: 24px; flex: none; }
.tabbar > [aria-current="page"], .tabbar > [aria-current="true"], .tabbar > [aria-selected="true"] { color: var(--accent-text); }
.tabbar > [aria-current="page"]::before, .tabbar > [aria-current="true"]::before, .tabbar > [aria-selected="true"]::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--border-w));
  left: 22%;
  right: 22%;
  height: 3px;
  background-color: var(--accent);
}
.tabbar > :focus-visible { outline-offset: -3px; }

/* ---- .search ------------------------------------------------------
   either <input class="search" type="search">
   or     <label class="search"><span class="visually-hidden">Search</span><input type="search"></label> (adds an icon) */
.search {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  min-height: var(--tap);
  padding: 0 0.85rem;
  border: var(--border-w) solid var(--line-strong);
  border-radius: var(--radius-sm);
  background-color: var(--surface);
  color: var(--fg);
}
input.search { appearance: none; -webkit-appearance: none; font-size: max(16px, 1rem); }
.search:not(input):focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.search:not(input)::before {
  content: "";
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  background-color: var(--fg-muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='square'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='square'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3C/svg%3E") center / contain no-repeat;
}
.search input {
  flex: 1;
  min-width: 0;
  min-height: calc(var(--tap) - 2 * var(--border-w));
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--fg);
  font-size: max(16px, 1rem);
  appearance: none;
  -webkit-appearance: none;
}
.search input::-webkit-search-decoration { -webkit-appearance: none; }

/* ---- .kbd (abbreviation / key token, e.g. JMPS#) ------------------ */
.kbd, kbd.kbd {
  display: inline-block;
  padding: 0.1em 0.42em 0.08em;
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: min(var(--radius-sm), 4px);
  background-color: var(--surface-2);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 0.8125em;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.02em;
  white-space: nowrap;
  vertical-align: 0.06em;
}

/* ---- .switch (optional extra: <input type="checkbox" role="switch" class="switch">) */
.switch {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 3.1rem;
  height: 1.8rem;
  margin: 0;
  border: var(--border-w) solid var(--line-strong);
  border-radius: var(--switch-radius, 999px);
  background: radial-gradient(circle at 0.85rem 50%, var(--fg-muted) 0 0.55rem, transparent calc(0.55rem + 0.5px)) no-repeat, var(--surface-3);
  vertical-align: middle;
  cursor: pointer;
  position: relative;
}
/* 44px+ hit area without changing the look or the layout (pseudo-element hit-tests as the input) */
.switch::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(var(--tap), calc(100% + 12px));
  height: max(var(--tap), 100%);
  transform: translate(-50%, -50%);
}
.switch:checked {
  border-color: var(--accent);
  background: radial-gradient(circle at calc(100% - 0.85rem) 50%, var(--accent-fg) 0 0.55rem, transparent calc(0.55rem + 0.5px)) no-repeat, var(--accent);
}
.switch:disabled { opacity: 0.45; }

/* ---- motion ------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .btn, .chip, .seg > *, .stepper > button, .search, .tabbar > *, a.card, button.card { transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease; }
  .odds-bar::before { transition: clip-path 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .btn:active, .chip:active { transform: translateY(1px); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* =====================================================================
   4. STYLE FLOURISHES — scoped, token-driven
   ===================================================================== */

/* ---- tablet: calm, precise --------------------------------------- */
:root:not([data-style]) .seg > [aria-pressed="true"], [data-style="tablet"] .seg > [aria-pressed="true"],
:root:not([data-style]) .seg > [aria-checked="true"], [data-style="tablet"] .seg > [aria-checked="true"],
:root:not([data-style]) .seg > [aria-selected="true"], [data-style="tablet"] .seg > [aria-selected="true"],
:root:not([data-style]) .seg > input:checked + label, [data-style="tablet"] .seg > input:checked + label {
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.18);
}
:root:not([data-style]) .seg, [data-style="tablet"] .seg { --seg-divider: transparent; border-color: var(--line); }
:root:not([data-style]), [data-style="tablet"] { --eyebrow-track: 0.06em; --font-label: var(--font-body); }

/* ---- field-manual: printed TM, olive drab, stencil used sparingly - */
[data-style="field-manual"] .line-item { --line-style: dotted; border-bottom-color: var(--line-strong); }
[data-style="field-manual"] .card { border-color: var(--line-strong); }
[data-style="field-manual"] .card-title { font-weight: 600; letter-spacing: 0.04em; }
[data-style="field-manual"] .card[data-section]::before {
  display: block;
  width: fit-content;
  justify-self: start;
  align-self: start;
  margin: calc(-1 * var(--card-pad, 1rem)) 0 0.75rem calc(-1 * var(--card-pad, 1rem));
  padding: 0.3rem 0.65rem 0.25rem;
  background-color: var(--accent);
  color: var(--accent-fg);
  letter-spacing: 0.12em;
}
[data-style="field-manual"] .tn-readout { line-height: 0.82; }
[data-style="field-manual"] .tn-readout .tn-label { border-bottom: 2px solid var(--fg); padding-bottom: 0.3rem; margin-bottom: 0.6rem; color: var(--fg); }
[data-style="field-manual"] .odds-bar { border-radius: 0; box-shadow: inset 0 0 0 1px var(--line-strong); }
[data-style="field-manual"] .odds-bar::after { /* printed scale: tick every 10% */
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), var(--fg) calc(10% - 1px) 10%) 0 100% / 100% 40% no-repeat,
    linear-gradient(var(--fg), var(--fg)) 50% 100% / 1.5px 70% no-repeat;
  opacity: 0.55;
}
[data-style="field-manual"] .badge { border-width: 1.5px; letter-spacing: 0.04em; }
[data-style="field-manual"] .tabbar { counter-reset: fm-tab; background-color: var(--surface-2); }
[data-style="field-manual"] .tabbar > a, [data-style="field-manual"] .tabbar > button { counter-increment: fm-tab; }
[data-style="field-manual"] .tabbar > a::after, [data-style="field-manual"] .tabbar > button::after {
  content: counter(fm-tab, decimal-leading-zero);
  order: -1;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  opacity: 0.85;
}
[data-style="field-manual"] .tabbar > [aria-current="page"], [data-style="field-manual"] .tabbar > [aria-current="true"], [data-style="field-manual"] .tabbar > [aria-selected="true"] {
  background-color: var(--surface);
  color: var(--fg);
}
[data-style="field-manual"] .tabbar > [aria-current="page"]::before, [data-style="field-manual"] .tabbar > [aria-current="true"]::before, [data-style="field-manual"] .tabbar > [aria-selected="true"]::before {
  left: 0; right: 0; height: 4px;
}
[data-style="field-manual"] .sheet { border-top-width: 3px; border-top-color: var(--accent); }
[data-style="field-manual"] .search { background-color: var(--surface); }

/* ---- cockpit: neurohelmet HUD ------------------------------------ */
[data-style="cockpit"] .card {
  --bk: var(--line-strong);
  background:
    linear-gradient(var(--bk) 0 0) top left / 14px 2px no-repeat,
    linear-gradient(var(--bk) 0 0) top left / 2px 14px no-repeat,
    linear-gradient(var(--bk) 0 0) top right / 14px 2px no-repeat,
    linear-gradient(var(--bk) 0 0) top right / 2px 14px no-repeat,
    linear-gradient(var(--bk) 0 0) bottom left / 14px 2px no-repeat,
    linear-gradient(var(--bk) 0 0) bottom left / 2px 14px no-repeat,
    linear-gradient(var(--bk) 0 0) bottom right / 14px 2px no-repeat,
    linear-gradient(var(--bk) 0 0) bottom right / 2px 14px no-repeat,
    var(--surface);
}
[data-style="cockpit"] .card-title { letter-spacing: 0.06em; }
[data-style="cockpit"] .tn-readout {
  padding: 0.6rem 0.75rem 0.7rem;
  border-left: 3px solid var(--accent);
  background-image: repeating-linear-gradient(180deg, transparent 0 2px, var(--scan) 2px 3px);
  text-shadow: 0 0 18px var(--glow);
}
[data-style="cockpit"] .tn-readout .tn-label, [data-style="cockpit"] .tn-readout .tn-sub { text-shadow: none; }
[data-style="cockpit"] .tn-readout .tn-label { color: var(--accent-text); }
[data-style="cockpit"] .odds-bar { /* segmented gauge, 20 cells */
  border-radius: 0;
  box-shadow: none;
  background: repeating-linear-gradient(90deg, var(--surface-3) 0 calc(5% - 3px), transparent calc(5% - 3px) 5%);
}
[data-style="cockpit"] .odds-bar::before {
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 calc(5% - 3px), transparent calc(5% - 3px) 5%);
  mask: repeating-linear-gradient(90deg, #000 0 calc(5% - 3px), transparent calc(5% - 3px) 5%);
  filter: drop-shadow(0 0 4px var(--glow));
}
[data-style="cockpit"] .odds-bar::after { display: none; }
[data-style="cockpit"] .chip[aria-pressed="true"], [data-style="cockpit"] .seg > [aria-pressed="true"], [data-style="cockpit"] .seg > [aria-checked="true"], [data-style="cockpit"] .seg > [aria-selected="true"] {
  box-shadow: 0 0 14px -2px var(--glow);
}
[data-style="cockpit"] .line-item { border-bottom-style: dashed; }
[data-style="cockpit"] .line-item .label { font-weight: 500; }
[data-style="cockpit"] .line-item .value { font-weight: 400; font-size: 1.25rem; }
[data-style="cockpit"] .badge, [data-style="cockpit"] .kbd { font-weight: 400; }
[data-style="cockpit"] .stepper > output, [data-style="cockpit"] .stepper > .value, [data-style="cockpit"] .stepper > input { font-weight: 400; font-size: 1.5rem; color: var(--accent-text); }
[data-style="cockpit"] .sheet { border-top: 2px solid var(--accent); background-image: repeating-linear-gradient(180deg, transparent 0 2px, var(--scan) 2px 3px); }
[data-style="cockpit"] .sheet::before { border-radius: 0; background-color: var(--accent); }
[data-style="cockpit"] .tabbar > [aria-current="page"]::before, [data-style="cockpit"] .tabbar > [aria-current="true"]::before, [data-style="cockpit"] .tabbar > [aria-selected="true"]::before {
  box-shadow: 0 0 10px var(--glow);
}
[data-style="cockpit"] .switch { --switch-radius: 0px; background: linear-gradient(var(--fg-muted) 0 0) 0.3rem 50% / 1.1rem 1.1rem no-repeat, var(--surface-3); }
[data-style="cockpit"] .switch:checked { background: linear-gradient(var(--accent-fg) 0 0) calc(100% - 0.3rem) 50% / 1.1rem 1.1rem no-repeat, var(--accent); }

/* ---- record-sheet: unit card stock, black rules, armor bubbles ---- */
[data-style="record-sheet"] .card { --card-line: var(--line-strong); }
[data-style="record-sheet"] .card[data-section]::before {
  margin: calc(-1 * var(--card-pad, 1rem)) calc(-1 * var(--card-pad, 1rem)) 0.85rem;
  padding: 0.35rem var(--card-pad, 1rem) 0.3rem;
  border-radius: calc(var(--radius) - var(--border-w)) calc(var(--radius) - var(--border-w)) 0 0;
  background-color: var(--accent);
  color: var(--accent-fg);
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}
[data-style="record-sheet"] .card-kicker { color: var(--rs-red); }
[data-style="record-sheet"] .eyebrow { color: var(--fg); }
[data-style="record-sheet"] .tn-readout .tn-label {
  display: block;
  width: fit-content;
  padding: 0.25rem 0.5rem 0.2rem;
  border-radius: 2px;
  background-color: var(--accent);
  color: var(--accent-fg);
  font-family: var(--font-display);
  font-size: 0.875rem;
  letter-spacing: 0.1em;
}
[data-style="record-sheet"] .tn-readout .tn-value { box-shadow: inset 0 -0.07em 0 var(--rs-red); padding-bottom: 0.04em; }
[data-style="record-sheet"] .tn-readout[data-state] .tn-value { box-shadow: none; } /* state colour already says it; no second red bar */
[data-style="record-sheet"] .tn-readout .tn-sub { font-weight: 600; }
[data-style="record-sheet"] .odds-bar { /* 10 armor bubbles; fill = share of 100% */
  border-radius: 0;
  box-shadow: none;
  background: radial-gradient(circle closest-side, transparent calc(100% - 3.5px), var(--line-strong) calc(100% - 3px) calc(100% - 1px), transparent 100%) 0 0 / 10% 100% repeat-x;
}
[data-style="record-sheet"] .odds-bar::before {
  -webkit-mask: radial-gradient(circle closest-side, #000 calc(100% - 1.5px), transparent 100%) 0 0 / 10% 100% repeat-x;
  mask: radial-gradient(circle closest-side, #000 calc(100% - 1.5px), transparent 100%) 0 0 / 10% 100% repeat-x;
}
[data-style="record-sheet"] .odds-bar::after { display: none; }
[data-style="record-sheet"] .line-item .value { font-size: 1.375rem; line-height: 1; }
[data-style="record-sheet"] .line-item.is-total { border-top-color: var(--rs-red); border-top-width: 3px; }
[data-style="record-sheet"] .seg > :not(input):not(:first-child) { box-shadow: calc(-1 * var(--border-w)) 0 0 var(--line-strong); }
[data-style="record-sheet"] .seg > [aria-pressed="true"], [data-style="record-sheet"] .seg > [aria-checked="true"], [data-style="record-sheet"] .seg > [aria-selected="true"], [data-style="record-sheet"] .seg > input:checked + label { box-shadow: calc(-1 * var(--border-w)) 0 0 var(--line-strong); }
[data-style="record-sheet"] .seg { background-color: var(--surface); }
[data-style="record-sheet"] .stepper > output, [data-style="record-sheet"] .stepper > .value, [data-style="record-sheet"] .stepper > input { font-size: 1.6rem; border-inline: var(--border-w) solid var(--line-strong); }
[data-style="record-sheet"] .stepper > button { background-color: var(--surface); }
[data-style="record-sheet"] .badge { font-family: var(--font-display); font-size: 0.8125rem; letter-spacing: 0.08em; padding: 0.12em 0.5em 0.08em; }
[data-style="record-sheet"] .badge-optional, [data-style="record-sheet"] .badge[data-optional] { --badge-c: var(--rs-red); }
[data-style="record-sheet"] .sheet { border-top: 4px solid var(--line-strong); }
[data-style="record-sheet"] .tabbar > [aria-current="page"], [data-style="record-sheet"] .tabbar > [aria-current="true"], [data-style="record-sheet"] .tabbar > [aria-selected="true"] { color: var(--fg); }
[data-style="record-sheet"] .tabbar > [aria-current="page"]::before, [data-style="record-sheet"] .tabbar > [aria-current="true"]::before, [data-style="record-sheet"] .tabbar > [aria-selected="true"]::before { background-color: var(--rs-red); height: 4px; }
[data-style="record-sheet"] .kbd { border-radius: 2px; }

/* ---- hangar: 'Mech bay steel, rivets, one hazard stripe ----------- */
[data-style="hangar"] .card {
  --rv: radial-gradient(circle, var(--rivet-hi) 0 1px, var(--rivet) 1.5px 3px, transparent 3.5px);
  background:
    var(--rv) 4px 4px / 8px 8px no-repeat,
    var(--rv) calc(100% - 4px) 4px / 8px 8px no-repeat,
    var(--rv) 4px calc(100% - 4px) / 8px 8px no-repeat,
    var(--rv) calc(100% - 4px) calc(100% - 4px) / 8px 8px no-repeat,
    linear-gradient(180deg, var(--surface), var(--surface-2));
  border-color: var(--line-strong);
}
[data-style="hangar"] .btn:not(.btn-primary):not(.btn-quiet), [data-style="hangar"] .chip:not([aria-pressed="true"]), [data-style="hangar"] .stepper > button {
  background-image: linear-gradient(180deg, rgb(255 255 255 / 0.08), rgb(0 0 0 / 0.06));
}
[data-style="hangar"] .btn-primary { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.45), 0 1px 0 rgb(0 0 0 / 0.25); }
[data-style="hangar"] .tn-readout {
  padding: 0.75rem 0.85rem 0.8rem;
  border-radius: var(--radius-sm);
  background-image: radial-gradient(50% 100% at 50% 0%, var(--worklight), transparent);
}
[data-style="hangar"] .tn-readout .tn-label { color: var(--fg); }
[data-style="hangar"] .odds-bar { border-radius: 2px; box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.35), inset 0 0 0 1px var(--line-strong); }
[data-style="hangar"] .odds-bar::before { box-shadow: inset 0 -2px 0 rgb(0 0 0 / 0.18); }
[data-style="hangar"] .odds-bar:not([data-band]) { --odds-fill: var(--tn-hue); } /* yellow on steel is too low-contrast in light */
[data-style="hangar"] .line-item .value { font-stretch: 112%; }
[data-style="hangar"] .sheet { /* the one hazard stripe */
  border-top: 0;
  padding-top: calc(10px + 1.25rem);
  background:
    repeating-linear-gradient(-45deg, var(--accent) 0 12px, var(--hazard-dark) 12px 24px) top / 100% 10px no-repeat,
    var(--surface);
}
[data-style="hangar"] .tabbar { --tabbar-bg: var(--surface-2); }
[data-style="hangar"] .tabbar > [aria-current="page"]::before, [data-style="hangar"] .tabbar > [aria-current="true"]::before, [data-style="hangar"] .tabbar > [aria-selected="true"]::before { height: 4px; left: 16%; right: 16%; }
[data-style="hangar"] .seg { --seg-divider: var(--line-strong); }
/* Narrower Archivo cut for control labels so wide uppercase words fit on small phones */
[data-style="hangar"] .btn, [data-style="hangar"] .chip, [data-style="hangar"] .seg > *, [data-style="hangar"] .tabbar > * { font-stretch: 87.5%; }
[data-style="hangar"] .card-title { font-size: calc(1.05rem * var(--display-scale)); }