/* JourneyMan themes.
 *
 * Nine themes, each with a light and a dark set, and one bridge at the bottom
 * that hands the app's component layer the names it already speaks. No rule in
 * here styles a component; no component rule names a theme. That separation is
 * the whole point — a tenth theme is a block in this file and nothing else.
 *
 * Values are lifted verbatim from the reference render. Where a theme omits a
 * token it is inheriting the shared block below its two mode blocks, which
 * carries the shape and type that do not change between light and dark.
 */

/* Defaults, deliberately ahead of the themes and at their specificity.
 *
 * A theme that says nothing about texture should be flat, not broken: an
 * undefined custom property invalidates the whole declaration using it, so the
 * rule meant to paint the canvas paints nothing at all.
 *
 * These belong here rather than in the bridge at the bottom. The bridge is
 * :root[data-theme], which is a class more specific than [data-theme="warbird"]
 * — put there, a default of none beat the eight layers of aluminium the theme
 * actually asked for, and Warbird came out flat grey. Same specificity and
 * earlier in the file: a theme that names a texture wins, one that does not
 * gets these.
 */
:root {
  --texture: none;
  --texture-size: auto;
  --card-texture: none;
}


/* ---------- 1 · SCIENTIFIC ---------- */
[data-theme="scientific"][data-mode="light"] {
  --bg: #F8F9F8;
  --surface: #FFFFFF;
  --surface-2: #F1F3F1;
  --line: #E3E7E4;
  --line-strong: #CBD3CE;
  --ink: #0F1412;
  --ink-2: #4E5854;
  --ink-3: #828C87;
  --accent: #0C8F7D;
  --on-accent: #FFFFFF;
  --pos: #0C8F7D;
  --neg: #A96A0C;
  --warn: #A96A0C;
  --neutral: #9AA5A0;
  --pos-soft: rgba(12,143,125,.12);
  --neg-soft: rgba(169,106,12,.12);
  --header-bg: #0F1412;
  --header-ink: #F8F9F8;
  --danger: #B3261E;
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%230C8F7D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
[data-theme="scientific"][data-mode="dark"] {
  --bg: #101413;
  --surface: #161B19;
  --surface-2: #0C100F;
  --line: #1E2523;
  --line-strong: #2A3330;
  --ink: #E9EDE9;
  --ink-2: #95A19A;
  --ink-3: #5E6A64;
  --accent: #3FD8C0;
  --on-accent: #06100E;
  --pos: #3FD8C0;
  --neg: #F0A03A;
  --warn: #F0A03A;
  --neutral: #4A5651;
  --pos-soft: rgba(63,216,192,.16);
  --neg-soft: rgba(240,160,58,.16);
  --header-bg: #0A0C0B;
  --header-ink: #E9EDE9;
  --danger: #FF6B5A;
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%233FD8C0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
[data-theme="scientific"] {
  --font-display: "Martian Mono",monospace;
  --font-ui: Archivo,sans-serif;
  --font-num: "Martian Mono",monospace;
  --display-tracking: -.045em;
  --label-tracking: .16em;
  --radius: 14px;
  --radius-sm: 10px;
  --radius-pill: 999px;
  --border: 1px;
  --shadow: none;
  --texture: none;
  --texture-size: auto;
  --display-case: none;
}

/* ---------- 2 · CLUBHOUSE ---------- */
[data-theme="clubhouse"][data-mode="light"] {
  --bg: #FDFBF1;
  --surface: #FFFDF6;
  --surface-2: #F7F1DE;
  --line: #E7DFC4;
  --line-strong: #CDBF95;
  --ink: #123D24;
  --ink-2: #5C7A62;
  --ink-3: #8A8158;
  --accent: #A8821E;
  --on-accent: #FFFDF6;
  --pos: #1E9150;
  --neg: #E0576B;
  --warn: #D9A31C;
  --neutral: #C9B77E;
  --plot-hit: #1E9150;
  --plot-miss: #B3A87E;
  --pos-soft: rgba(30,145,80,.13);
  --neg-soft: rgba(224,87,107,.14);
  --header-bg: #123D24;
  --header-ink: #FDFBF1;
  --danger: #A3232F;
  --topo: rgba(18,61,36,.11);
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23A8821E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
[data-theme="clubhouse"][data-mode="dark"] {
  --bg: #0E2116;
  --surface: #152B1D;
  --surface-2: #132A1B;
  --line: #25422F;
  --line-strong: #3F5E42;
  --ink: #F2EEDD;
  --ink-2: #9FBCA6;
  --ink-3: #9B9F80;
  --accent: #E8C158;
  --on-accent: #14210C;
  --pos: #57D68C;
  --neg: #F5808F;
  --warn: #F5CE55;
  --neutral: #6E6134;
  --plot-hit: #F5CE55;
  --plot-miss: #5E6E52;
  --pos-soft: rgba(87,214,140,.14);
  --neg-soft: rgba(245,128,143,.15);
  --header-bg: #0A1A11;
  --header-ink: #F2EEDD;
  --danger: #C43A48;
  --topo: rgba(87,214,140,.13);
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23E8C158' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
[data-theme="clubhouse"] {
  --font-display: "Cormorant Garamond",serif;
  --font-ui: Karla,sans-serif;
  --font-num: "Cormorant Garamond",serif;
  --display-tracking: -.01em;
  --label-tracking: .22em;
  --radius: 4px;
  --radius-sm: 3px;
  --radius-pill: 999px;
  --border: 1px;
  --shadow: none;
  --texture: none;
  --texture-size: auto;
  --display-case: none;
}

/* ---------- 3 · BROADCAST ---------- */
[data-theme="broadcast"][data-mode="light"] {
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #F1F5FA;
  --line: #E1E8F0;
  --line-strong: #C1CEDD;
  --ink: #08172B;
  --ink-2: #51678A;
  --ink-3: #7C8FAC;
  --accent: #0B5BD3;
  --on-accent: #FFFFFF;
  --pos: #0E8F52;
  --neg: #D32F2F;
  --warn: #B47600;
  --neutral: #A8B8CD;
  --pos-soft: rgba(14,143,82,.11);
  --neg-soft: rgba(211,47,47,.1);
  --header-bg: linear-gradient(100deg,#08172B 0%,#123A6E 62%,#0B5BD3 100%);
  --header-ink: #FFFFFF;
  --danger: #C62828;
  --chip: #0B5BD3;
  --chip-ink: #FFFFFF;
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%230B5BD3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
[data-theme="broadcast"][data-mode="dark"] {
  --bg: #061225;
  --surface: #0D1C33;
  --surface-2: #0A1729;
  --line: rgba(255,255,255,.1);
  --line-strong: rgba(255,255,255,.22);
  --ink: #FFFFFF;
  --ink-2: #8CA3C4;
  --ink-3: #6A7F9F;
  --accent: #2E7DFF;
  --on-accent: #04101F;
  --pos: #23C87A;
  --neg: #FF4A5B;
  --warn: #FFB020;
  --neutral: #22375E;
  --pos-soft: rgba(35,200,122,.14);
  --neg-soft: rgba(255,74,91,.14);
  --header-bg: linear-gradient(100deg,#04101F 0%,#0C2A55 62%,#12459C 100%);
  --header-ink: #FFFFFF;
  --danger: #FF4A5B;
  --chip: #2E7DFF;
  --chip-ink: #04101F;
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%232E7DFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
[data-theme="broadcast"] {
  --font-display: Oswald,sans-serif;
  --font-ui: Archivo,sans-serif;
  --font-num: Oswald,sans-serif;
  --font-label: Archivo,sans-serif;
  --display-tracking: 0;
  --label-tracking: .14em;
  --radius: 0px;
  --radius-sm: 0px;
  --radius-pill: 0px;
  --border: 1px;
  --shadow: none;
  --display-case: uppercase;
}

/* ---------- 4 · TACTICAL ---------- */
[data-theme="tactical"][data-mode="light"] {
  --bg: #DDD8C2;
  --surface: rgba(240,237,226,.96);
  --surface-2: rgba(214,209,190,.92);
  --line: #B0A98E;
  --line-strong: #3A3D2E;
  --ink: #23261C;
  --ink-2: #5C6049;
  --ink-3: #73775E;
  --accent: #7C6534;
  --on-accent: #F0EDE2;
  --pos: #46683A;
  --neg: #9A4A24;
  --warn: #836617;
  --neutral: #9C9880;
  --pos-soft: rgba(70,104,58,.13);
  --neg-soft: rgba(154,74,36,.12);
  --header-bg: #454C39;
  --header-ink: #DFDAC4;
  --danger: #7E3A19;
  --grid: rgba(58,61,46,.2);
  --grid-i: rgba(58,61,46,.42);
  --contour: rgba(140,104,58,.55);
  --contour-i: rgba(122,88,44,.85);
  --water: rgba(72,124,156,.7);
  --veg: rgba(126,152,96,.3);
  --road: rgba(150,96,52,.75);
  --spot: rgba(58,61,46,.75);
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%237C6534' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
[data-theme="tactical"][data-mode="dark"] {
  --bg: #14170F;
  --surface: rgba(29,33,24,.96);
  --surface-2: rgba(24,27,19,.94);
  --line: #31352A;
  --line-strong: #CDD2BE;
  --ink: #D5DAC6;
  --ink-2: #878E72;
  --ink-3: #71785F;
  --accent: #A98F58;
  --on-accent: #14170F;
  --pos: #7EA755;
  --neg: #C06A3E;
  --warn: #A98F58;
  --neutral: #33382A;
  --pos-soft: rgba(126,167,85,.14);
  --neg-soft: rgba(192,106,62,.14);
  --header-bg: #252B1D;
  --header-ink: #D5DAC6;
  --danger: #BF5A34;
  --grid: rgba(190,200,160,.11);
  --grid-i: rgba(190,200,160,.22);
  --contour: rgba(150,124,74,.34);
  --contour-i: rgba(170,142,88,.5);
  --water: rgba(88,140,170,.38);
  --veg: rgba(96,132,80,.16);
  --road: rgba(160,112,64,.4);
  --spot: rgba(190,200,160,.4);
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23A98F58' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
[data-theme="tactical"] {
  --font-display: "Saira Condensed",sans-serif;
  --font-ui: "Saira Condensed",sans-serif;
  --font-num: "Saira Condensed",sans-serif;
  --font-label: "Saira Condensed",sans-serif;
  --display-tracking: .05em;
  --label-tracking: .24em;
  --radius: 1px;
  --radius-sm: 1px;
  --radius-pill: 1px;
  --border: 1px;
  --shadow: none;
  --display-case: uppercase;
}

/* ---------- 5 · BLACK OPS ---------- */
[data-theme="blackops"][data-mode="light"] {
  --bg: #EDEDE9;
  --surface: rgba(255,255,255,.9);
  --surface-2: #E4E5E1;
  --line: #D2D6D2;
  --line-strong: #A8ADA9;
  --ink: #111413;
  --ink-2: #4A504D;
  --ink-3: #767B78;
  --accent: #0B7A3B;
  --on-accent: #FFFFFF;
  --pos: #0B7A3B;
  --neg: #C11B12;
  --warn: #8A5E00;
  --neutral: #9DA29E;
  --pos-soft: rgba(11,122,59,.12);
  --neg-soft: rgba(193,27,18,.1);
  --header-bg: #111413;
  --header-ink: #EDEDE9;
  --danger: #C11B12;
  --camo-1: rgba(196,200,192,.7);
  --camo-2: rgba(176,182,176,.55);
  --camo-3: rgba(208,210,202,.7);
  --topo: rgba(40,52,44,.16);
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%230B7A3B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
[data-theme="blackops"][data-mode="dark"] {
  --bg: #06080A;
  --surface: rgba(13,18,20,.88);
  --surface-2: rgba(11,16,19,.9);
  --line: #1A2124;
  --line-strong: #2C3639;
  --ink: #D6DDD8;
  --ink-2: #8A928E;
  --ink-3: #5A6360;
  --accent: #4DFF88;
  --on-accent: #04120A;
  --pos: #4DFF88;
  --neg: #FF3B30;
  --warn: #FFB000;
  --neutral: #2A3234;
  --pos-soft: rgba(77,255,136,.13);
  --neg-soft: rgba(255,59,48,.12);
  --header-bg: #04060700;
  --header-ink: #D6DDD8;
  --danger: #FF3B30;
  --camo-1: rgba(16,28,30,.85);
  --camo-2: rgba(10,16,22,.9);
  --camo-3: rgba(20,26,22,.75);
  --topo: rgba(77,255,136,.09);
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%234DFF88' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
[data-theme="blackops"] {
  --font-display: "Chakra Petch",sans-serif;
  --font-ui: "Chakra Petch",sans-serif;
  --font-num: "Share Tech Mono",monospace;
  --font-label: "Share Tech Mono",monospace;
  --display-tracking: .02em;
  --label-tracking: .22em;
  --radius: 2px;
  --radius-sm: 2px;
  --radius-pill: 2px;
  --border: 1px;
  --shadow: none;
  --display-case: uppercase;
}

/* ---------- 6 · TROPIC ---------- */
[data-theme="tropic"][data-mode="light"] {
  --bg: #FFF8EC;
  --surface: #FFFFFF;
  --surface-2: #FDF1DC;
  --line: #F1E4CE;
  --line-strong: #E2CFAE;
  --ink: #0F3A38;
  --ink-2: #4E6B66;
  --ink-3: #7C8C86;
  /* Nudged down from #0FB3AA, which was 2.61:1 on this theme's own canvas —
     the only pair in the whole set that did not clear 3:1. Same hue, same
     saturation, a little less light: comfortably over on both. */
  --accent: #0D9E96;
  --on-accent: #FFFFFF;
  --pos: #0E9B7E;
  --neg: #F0543F;
  --warn: #C8930C;
  --neutral: #CBBFA6;
  --pos-soft: rgba(14,155,126,.12);
  --neg-soft: rgba(240,84,63,.11);
  --header-bg: linear-gradient(160deg,#FFC53D 0%,#FF6B5E 48%,#0FB3AA 100%);
  --header-ink: #0F3A38;
  --danger: #D53A26;
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%230D9E96' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
[data-theme="tropic"][data-mode="dark"] {
  --bg: #062A2E;
  --surface: #0B3A3E;
  --surface-2: #083336;
  --line: #12494E;
  --line-strong: #1C6068;
  --ink: #EAF6F1;
  --ink-2: #A6C4BE;
  --ink-3: #8CAAA4;
  --accent: #3ADCCF;
  --on-accent: #052527;
  --pos: #48D6A9;
  --neg: #FF8A7E;
  --warn: #FFD766;
  --neutral: #0F4247;
  --pos-soft: rgba(72,214,169,.14);
  --neg-soft: rgba(255,138,126,.14);
  --header-bg: linear-gradient(160deg,#E0A62B 0%,#E2544A 48%,#0E8C86 100%);
  --header-ink: #062A2E;
  --danger: #FF8A7E;
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%233ADCCF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
[data-theme="tropic"] {
  --font-display: Outfit,sans-serif;
  --font-ui: Quicksand,sans-serif;
  --font-num: Outfit,sans-serif;
  --display-tracking: -.04em;
  --label-tracking: .18em;
  --radius: 20px;
  --radius-sm: 16px;
  --radius-pill: 999px;
  --border: 0px;
  --shadow: 0 2px 14px rgba(15,58,56,.08);
  --texture: none;
  --texture-size: auto;
  --display-case: none;
}

/* ---------- 7 · WARBIRD ---------- */
[data-theme="warbird"][data-mode="light"] {
  --bg: #C4CACE;
  --surface: #D2D8DB;
  --surface-2: #B6BCC1;
  --line: #9AA1A6;
  --line-strong: #70787E;
  --ink: #1B1F22;
  --ink-2: #4A5156;
  --ink-3: #6C7378;
  --accent: #B23A1E;
  --on-accent: #EDEFF0;
  --pos: #2E5E8C;
  --neg: #B23A1E;
  --warn: #B98A12;
  --neutral: #8A9197;
  --pos-soft: rgba(46,94,140,.15);
  --neg-soft: rgba(178,58,30,.13);
  --header-bg: #3C4A38;
  --header-ink: #E2E0D2;
  --danger: #8E2A12;
  --rivet: #6B7378;
  --panel: #AEB5BA;
  --texture: radial-gradient(circle at 6px 3px,rgba(38,44,48,.42) 1px,rgba(255,255,255,.5) 1.5px,transparent 1.9px),
 radial-gradient(circle at 3px 6px,rgba(38,44,48,.36) 1px,rgba(255,255,255,.42) 1.5px,transparent 1.9px),
 repeating-linear-gradient(90deg,rgba(22,26,29,.3) 0 1px,rgba(255,255,255,.55) 1px 2.5px,transparent 2.5px 86px),
 repeating-linear-gradient(0deg,rgba(22,26,29,.24) 0 1px,rgba(255,255,255,.48) 1px 2.5px,transparent 2.5px 104px),
 repeating-linear-gradient(90deg,rgba(22,26,29,.04) 0 86px,transparent 86px 258px),
 repeating-linear-gradient(0deg,rgba(255,255,255,.4) 0 1px,transparent 1px 2px),
 repeating-linear-gradient(0deg,rgba(22,26,29,.05) 0 1px,transparent 1px 7px),
 linear-gradient(180deg,rgba(255,255,255,.62) 0%,rgba(255,255,255,.1) 9%,rgba(22,26,29,.09) 20%,
   rgba(255,255,255,.5) 31%,rgba(255,255,255,.04) 42%,rgba(22,26,29,.11) 55%,rgba(255,255,255,.44) 66%,
   rgba(255,255,255,.02) 77%,rgba(22,26,29,.08) 88%,rgba(255,255,255,.36) 100%),
 linear-gradient(104deg,rgba(255,255,255,.34),transparent 26%,transparent 72%,rgba(255,255,255,.26));
  --texture-size: 13px 104px,86px 13px,auto,auto,auto,auto,auto,auto,auto;
  --card-texture: radial-gradient(circle at 7px 7px,var(--rivet) 1.4px,rgba(255,255,255,.55) 2px,transparent 2.4px),
 radial-gradient(circle at calc(100% - 7px) 7px,var(--rivet) 1.4px,rgba(255,255,255,.55) 2px,transparent 2.4px),
 radial-gradient(circle at 7px calc(100% - 7px),var(--rivet) 1.4px,rgba(255,255,255,.55) 2px,transparent 2.4px),
 radial-gradient(circle at calc(100% - 7px) calc(100% - 7px),var(--rivet) 1.4px,rgba(255,255,255,.55) 2px,transparent 2.4px),
 repeating-linear-gradient(0deg,rgba(255,255,255,.3) 0 1px,transparent 1px 2px),
 linear-gradient(177deg,rgba(255,255,255,.6),rgba(255,255,255,.05) 24%,rgba(22,26,29,.05) 52%,
   rgba(255,255,255,.16) 74%,rgba(255,255,255,.42) 100%);
  --shadow: inset 0 1px 0 rgba(255,255,255,.85),inset 0 -1px 0 rgba(22,26,29,.26);
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23B23A1E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
[data-theme="warbird"][data-mode="dark"] {
  --bg: #191D21;
  --surface: #232930;
  --surface-2: #1C2127;
  --line: #333A41;
  --line-strong: #4C555E;
  --ink: #DCE0E2;
  --ink-2: #98A0A6;
  --ink-3: #6B737A;
  --accent: #E0552E;
  --on-accent: #121517;
  --pos: #5B93C7;
  --neg: #E0552E;
  --warn: #E8BE4A;
  --neutral: #333A40;
  --pos-soft: rgba(91,147,199,.15);
  --neg-soft: rgba(224,85,46,.15);
  --header-bg: #1A2016;
  --header-ink: #D8D6C6;
  --danger: #E0552E;
  --rivet: #525B64;
  --panel: #242B32;
  --texture: radial-gradient(circle at 6px 3px,rgba(0,0,0,.5) 1px,rgba(220,228,235,.34) 1.5px,transparent 1.9px),
 radial-gradient(circle at 3px 6px,rgba(0,0,0,.44) 1px,rgba(220,228,235,.28) 1.5px,transparent 1.9px),
 repeating-linear-gradient(90deg,rgba(0,0,0,.5) 0 1px,rgba(220,228,235,.26) 1px 2.5px,transparent 2.5px 86px),
 repeating-linear-gradient(0deg,rgba(0,0,0,.44) 0 1px,rgba(220,228,235,.22) 1px 2.5px,transparent 2.5px 104px),
 repeating-linear-gradient(90deg,rgba(0,0,0,.14) 0 86px,transparent 86px 258px),
 repeating-linear-gradient(0deg,rgba(220,228,235,.11) 0 1px,transparent 1px 2px),
 repeating-linear-gradient(0deg,rgba(0,0,0,.14) 0 1px,transparent 1px 7px),
 linear-gradient(180deg,rgba(220,228,235,.2) 0%,rgba(0,0,0,.14) 10%,rgba(0,0,0,.3) 21%,
   rgba(220,228,235,.17) 32%,rgba(0,0,0,.12) 43%,rgba(0,0,0,.32) 56%,rgba(220,228,235,.15) 67%,
   rgba(0,0,0,.14) 78%,rgba(0,0,0,.28) 89%,rgba(220,228,235,.12) 100%),
 linear-gradient(104deg,rgba(220,228,235,.12),transparent 26%,transparent 72%,rgba(220,228,235,.08));
  --texture-size: 13px 104px,86px 13px,auto,auto,auto,auto,auto,auto,auto;
  --card-texture: radial-gradient(circle at 7px 7px,var(--rivet) 1.4px,rgba(220,228,235,.22) 2px,transparent 2.4px),
 radial-gradient(circle at calc(100% - 7px) 7px,var(--rivet) 1.4px,rgba(220,228,235,.22) 2px,transparent 2.4px),
 radial-gradient(circle at 7px calc(100% - 7px),var(--rivet) 1.4px,rgba(220,228,235,.22) 2px,transparent 2.4px),
 radial-gradient(circle at calc(100% - 7px) calc(100% - 7px),var(--rivet) 1.4px,rgba(220,228,235,.22) 2px,transparent 2.4px),
 repeating-linear-gradient(0deg,rgba(220,228,235,.075) 0 1px,transparent 1px 2px),
 linear-gradient(177deg,rgba(220,228,235,.16),rgba(0,0,0,.1) 26%,rgba(0,0,0,.22) 54%,
   rgba(220,228,235,.06) 76%,rgba(220,228,235,.14) 100%);
  --shadow: inset 0 1px 0 rgba(220,228,235,.2),inset 0 -1px 0 rgba(0,0,0,.5);
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23E0552E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
[data-theme="warbird"] {
  --font-display: "Stardos Stencil",sans-serif;
  --font-ui: Archivo,sans-serif;
  --font-num: Archivo,sans-serif;
  --font-label: "Stardos Stencil",sans-serif;
  --display-tracking: .03em;
  --label-tracking: .2em;
  --radius: 3px;
  --radius-sm: 2px;
  --radius-pill: 3px;
  --border: 1px;
  --shadow: none;
  --display-case: uppercase;
}

/* ---------- 8 · SUMI ---------- */
[data-theme="sumi"][data-mode="light"] {
  --bg: #F4F0E6;
  --surface: #FBF8F0;
  --surface-2: #E9E3D5;
  --line: #DCD4C3;
  --line-strong: #B4A990;
  --ink: #1C1A18;
  --ink-2: #55504A;
  --ink-3: #837C71;
  --accent: #8C6A2A;
  --on-accent: #FBF8F0;
  --pos: #2C5F7C;
  --neg: #B2332A;
  --warn: #A5642A;
  --neutral: #A8A092;
  --pos-soft: rgba(44,95,124,.1);
  --neg-soft: rgba(178,51,42,.09);
  --header-bg: #1C1A18;
  --header-ink: #F4F0E6;
  --danger: #B2332A;
  --texture: radial-gradient(rgba(28,26,24,.055) .7px,transparent .7px),
          radial-gradient(rgba(28,26,24,.035) .6px,transparent .6px);
  --texture-size: 53px 67px,31px 41px;
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%238C6A2A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
[data-theme="sumi"][data-mode="dark"] {
  --bg: #0C0C0E;
  --surface: #161619;
  --surface-2: #111113;
  --line: #26262C;
  --line-strong: #3C3C45;
  --ink: #EDE8DC;
  --ink-2: #A39C8E;
  --ink-3: #6F6A60;
  --accent: #D4B25E;
  --on-accent: #0C0C0E;
  --pos: #6FA8C7;
  --neg: #E2564C;
  --warn: #D08A4A;
  --neutral: #2C2C33;
  --pos-soft: rgba(111,168,199,.13);
  --neg-soft: rgba(226,86,76,.13);
  --header-bg: #050506;
  --header-ink: #EDE8DC;
  --danger: #E2564C;
  --texture: radial-gradient(rgba(237,232,220,.05) .7px,transparent .7px),
          radial-gradient(rgba(237,232,220,.03) .6px,transparent .6px);
  --texture-size: 53px 67px,31px 41px;
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23D4B25E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
[data-theme="sumi"] {
  --font-display: "Shippori Mincho",serif;
  --font-ui: "Zen Kaku Gothic New",sans-serif;
  --font-num: "Shippori Mincho",serif;
  --font-label: "Zen Kaku Gothic New",sans-serif;
  --display-tracking: .01em;
  --label-tracking: .26em;
  --radius: 1px;
  --radius-sm: 1px;
  --radius-pill: 1px;
  --border: 1px;
  --shadow: none;
  --display-case: none;
}

/* ---------------------------------------------------------------- bridge --
 *
 * The themes speak the vocabulary of the brief; the app speaks its own, and
 * has done since long before these existed. Rather than rename several hundred
 * uses across the component layer — a large diff whose only purpose is
 * spelling — the two are joined here, once.
 *
 * Everything below is either an alias or a value derived from one. Nothing is
 * a colour in its own right: a theme that sets --accent has, by the time this
 * block is done, also set the chevron, the soft accent behind a selected chip
 * and the tint on the mental-cue bar. That is what keeps a new theme to one
 * block of tokens.
 *
 * Scoped to [data-theme] so the app still renders if the attribute is ever
 * missing: the plain :root defaults in app.css remain the floor.
 */
:root[data-theme] {
  --text: var(--ink);
  --text-dim: var(--ink-2);
  --border: var(--line);
  --rule: var(--line-strong);
  --good: var(--pos);
  --bad: var(--neg);
  --bar: var(--header-bg);
  --bar-text: var(--header-ink);

  /* Derived rather than given. A theme should not have to state the tint of a
     selected chip when it has already stated its accent. */
  --accent-soft: color-mix(in srgb, var(--accent) 14%, var(--surface));
  --bar-dim: color-mix(in srgb, var(--header-ink) 62%, transparent);

  /* The swing thought. It was a fixed purple across every palette so it could
     not be mistaken for a verdict; under nine themes a fixed purple is the one
     colour that belongs to none of them. It takes the accent instead, which is
     the app talking rather than the scorecard — the same distinction, made the
     theme's way. */
  --cue: var(--accent);
  --cue-soft: color-mix(in srgb, var(--accent) 12%, var(--surface));

  /* How much of a hole is being asked for: a setting, not a result, so it
     borrows the caution colour rather than the accent or a verdict. */
  --track: var(--warn);
  --track-ink: var(--on-accent);

  /* Depth. Several themes are deliberately flat and set --shadow to none;
     that is the theme speaking, not a missing value. */
  --elev-1: var(--shadow);
  --elev-2: var(--shadow);

  /* Type. --font-label is only set by some themes, so it falls back to the UI
     face rather than to nothing. */
  --sans: var(--font-ui);
  --mono: var(--font-num);

}


/* ------------------------------------------------- signature elements -----
 *
 * The drawing five of the themes bring with them, on a fixed layer behind the
 * app. Fixed rather than absolute: in the reference these sit inside a page
 * that does not scroll, and dropped into a real one they would be a hundred
 * SVG paths repainting on every frame of every scroll. Painted once, behind
 * everything, and never touched again.
 *
 * Only one is ever in the document — app.js mounts the chosen theme's and
 * clears the rest — so these rules describe how it sits rather than which one
 * is showing. Inert throughout: no pointer events, aria-hidden on the layer.
 */
#signature {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
  /* Behind the app, above the page's own background. */
}
#signature svg { width: 100%; height: 100%; display: block; }

/* The app has to sit above the layer, or the drawing shows through the cards
   rather than behind them.
 *
 * Only #app. The bar at the top is sticky and the one at the bottom is fixed,
 * both already stacked above this; naming them here as position:relative — as
 * a first pass did — takes the stickiness off the header and drops it into the
 * page, which shows up immediately as the title sliding under the nav. */
body > #app { position: relative; z-index: 1; }

.pattern { width: 100%; height: 100%; }
.pattern .g  { stroke: var(--grid); stroke-width: .6; fill: none; }
.pattern .gi { stroke: var(--grid-i); stroke-width: 1; fill: none; }
.pattern .ct { stroke: var(--contour); stroke-width: .7; fill: none; }
.pattern .ci { stroke: var(--contour-i); stroke-width: 1.3; fill: none; }
.pattern .wt { stroke: var(--water); stroke-width: 1.6; fill: none; stroke-linecap: round; }
.pattern .vg { fill: var(--veg); stroke: none; }
.pattern .rd { stroke: var(--road); fill: none; }
.pattern text { fill: var(--spot); font-family: var(--font-label), var(--font-ui);
                font-size: 6.5px; letter-spacing: .4px; }

.camo { width: 100%; height: 100%; }
.camo * { fill: none; stroke: var(--topo); stroke-width: 1; }

/* A band is chrome, not a backdrop.
 *
 * It sits in the flow directly under the app bar rather than on the fixed
 * layer: on the layer it was behind the header and, on a phone, up behind the
 * status bar too — drawn every time and visible none of them. In the flow it
 * shows, and it takes its own height out of the page instead of covering it.
 *
 * It is also part of the pinned stack, so the strip below it starts where the
 * band ends rather than underneath it. */
#signature-band {
  position: sticky; top: 0; z-index: 19;
  line-height: 0;   /* no descender gap under an inline svg */
}
#signature-band:empty { display: none; }

.rivet { height: 48px; background: var(--panel); }
.rivet svg { display: block; width: 100%; height: 48px; }

.lower { height: 36px; }
.lower svg { display: block; width: 100%; height: 36px; }


/* --------------------------------------------------------------- surface --
 *
 * The material a theme is made of. Four of the nine are flat and set --texture
 * to none; Warbird is eight stacked layers of aluminium — two rows of rivets
 * that carry their own shadow and highlight so each head reads as domed, two
 * seams drawn as a lap joint, a panel tone, a polish grain and its
 * counter-grain, a horizon reflection down the full height, and a raking
 * sheen. That is what makes it read as polished metal rather than grey.
 *
 * On a fixed layer, painted once. Eight gradients on a scrolling element is
 * eight gradients recomputed every frame, on the phone this is used on. Behind
 * the field drawings and behind the app, above the flat canvas colour.
 */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1;
  pointer-events: none;
  background-image: var(--texture);
  background-size: var(--texture-size);
}

/* Cards carry their own smaller version, so each panel catches the light on
   its own rather than sharing one sheet with the page behind it. Warbird puts
   four corner rivets and its grain here; everything else leaves it none.
 *
 * :root .card rather than .card. This file is loaded before the component
 * layer — it has to be, the components read what it sets — and over there a
 * card sets `background`, the shorthand, which resets background-image to
 * none. One more selector puts this above it wherever it happens to sit. */
:root .card {
  background-image: var(--card-texture);
}