/* 05a Doctrine Atlas, shareable loadout (upgrade of 05)
   Round 4: one sticky Configure bar (audience preset, focus, show) whose state lives in the URL hash;
   a loadout panel per skill group; strength slots reordered with CSS order; first contribution only
   outside <details>. Two themes, both after the sto-stage pages:
   - dark (native): the torpedo guide's teal-black editorial, cyan subheads, gold // markers;
   - light: the Command Deck's cream field manual, warm paper ground, teal-black ink, deep teal
     subheads and bronze // markers.
   The theme lives on <html data-theme="light|dark"> (kit theme-init.js); with JavaScript off,
   :root:not([data-theme]) gets the native dark tokens. Every colour below is a token, so setting
   the attribute alone switches the whole page.
   Contrast (WCAG, computed for the token pairs actually used):
     DARK  ink #e9f2f3 on bg 17.1, on raise 13.4 · ink-2 #b9cbce on panel 10.6 · ink-3 #93abb0 on bg 8.1,
           on raise 6.3 · cyan 9.1 and gold 8.7 on raise · accent text on raise >= 6.5 ·
           dark text on accent fills >= 8.2 · ink-3 label on the selected slot tint >= 4.8
     LIGHT ink #13242b on paper 13.7, on card 15.5 · ink-2 #33464d on paper 8.5 · ink-3 #485a5e on paper 6.1,
           on footer 5.0 · teal #0a5f6f 6.3 and bronze #7f4e00 6.0 on paper · accent text on paper >= 5.6 ·
           cream text on accent fills >= 6.3 · ink-3 on a 14% accent tint >= 4.7
     PRINT tokens on white >= 6.4 */

:root {
  --display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --text: "Source Sans 3", "Source Sans Pro", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, monospace;

  --wrap: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
  --colA: 400px;
  --bar-h: 62px;
  --cfg-h: 48px;
}

/* Dark: native theme, and the no-JavaScript fallback */
:root:not([data-theme]),
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #050e11;
  --panel: #0a1a1f;
  --raise: #11292f;
  --line: #1c3a42;
  --line-2: #2b5560;
  --ink: #e9f2f3;
  --ink-2: #b9cbce;
  --ink-3: #93abb0;
  --cyan: #67d8ec;
  --gold: #f3bb52;
  --violet: #b9a2ff;
  --on-acc: #061014;
  --link-hover: #9ae7f4;
  /* channel triplets for translucent fills: rgb(var(--cyan-c) / .1) */
  --cyan-c: 103 216 236;
  --gold-c: 243 187 82;
  --violet-c: 185 162 255;
  --shadow-c: 0 0 0;
  /* surfaces */
  --page-glow-1: rgba(38, 140, 160, .17);
  --page-glow-2: rgba(38, 120, 140, .07);
  --page-grid: rgba(103, 216, 236, .03);
  --bar-bg: rgba(5, 14, 17, .88);
  --card-1: #0c1e24;
  --card-2: #081519;
  --bay-1: #0b1d23;
  --bay-2: #071419;
  --atlas-1: #0c1f25;
  --atlas-2: #071318;
  --frame-1: rgba(14, 36, 43, .92);
  --frame-2: rgba(7, 20, 25, .92);
  --fslot-bg: rgba(9, 24, 29, .85);
  --toc-bg: rgba(10, 26, 31, .8);
  --inset-bg: rgba(5, 14, 17, .55);
  --foot-bg: rgba(3, 9, 11, .85);
  --fill: rgba(255, 255, 255, .025);
  --fill-hi: rgba(255, 255, 255, .04);
  --fill-lo: rgba(255, 255, 255, .012);
  --fade: #081519;
  --tile-1: #0f3a42;
  --tile-2: #071d23;
  --tile-ink: #67d8ec;
  --tile-line: rgba(103, 216, 236, .55);
  --tile-glow: inset 0 0 16px rgba(103, 216, 236, .16), 0 0 14px rgba(103, 216, 236, .12);
  --slot-tint: 17%;
  --shadow-a: .9;

  --a-cobalt: #86a9ff;
  --a-violet: #b9a2ff;
  --a-amber: #f3bb52;
  --a-teal: #4fd8c4;
  --a-crimson: #ff8496;
  --a-orange: #ffa066;
  --a-sky: #74ccff;
  --a-magenta: #f58bd8;
  --a-green: #79e096;
}

/* Light: the Command Deck's cream field manual */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f2ede2;
  --panel: #f7f2e7;
  --raise: #fffbf2;
  --line: #ddd3bf;
  --line-2: #c6b79b;
  --ink: #13242b;
  --ink-2: #33464d;
  --ink-3: #485a5e;
  --cyan: #0a5f6f;
  --gold: #7f4e00;
  --violet: #5a3aa6;
  --on-acc: #fffbf2;
  --link-hover: #063f4a;
  --cyan-c: 10 95 111;
  --gold-c: 160 104 16;
  --violet-c: 90 58 166;
  --shadow-c: 74 56 24;
  --page-glow-1: rgba(160, 104, 16, .07);
  --page-glow-2: rgba(10, 95, 111, .04);
  --page-grid: rgba(19, 36, 43, .045);
  --bar-bg: rgba(242, 237, 226, .93);
  --card-1: #fffbf2;
  --card-2: #fbf6ea;
  --bay-1: #fbf7ee;
  --bay-2: #f4eee1;
  --atlas-1: #fbf7ee;
  --atlas-2: #f6f0e3;
  --frame-1: #fffbf2;
  --frame-2: #f8f2e5;
  --fslot-bg: #fffdf8;
  --toc-bg: #fbf7ee;
  --inset-bg: rgba(242, 237, 226, .8);
  --foot-bg: #e8e0cf;
  --fill: rgba(255, 255, 255, .6);
  --fill-hi: rgba(255, 255, 255, .85);
  --fill-lo: rgba(255, 255, 255, .45);
  --fade: #f6f0e3;
  --tile-1: #f2b84a;
  --tile-2: #dc9a2a;
  --tile-ink: #13242b;
  --tile-line: rgba(127, 78, 0, .55);
  --tile-glow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 2px 6px -2px rgba(74, 56, 24, .35);
  --slot-tint: 11%;
  --shadow-a: .16;

  --a-cobalt: #2849a8;
  --a-violet: #6040b0;
  --a-amber: #7f4e00;
  --a-teal: #0b6a5e;
  --a-crimson: #a81e37;
  --a-orange: #9a420e;
  --a-sky: #0b5e97;
  --a-magenta: #912079;
  --a-green: #1d6a35;
}

[data-accent="cobalt"] { --acc: var(--a-cobalt); }
[data-accent="violet"] { --acc: var(--a-violet); }
[data-accent="amber"] { --acc: var(--a-amber); }
[data-accent="teal"] { --acc: var(--a-teal); }
[data-accent="crimson"] { --acc: var(--a-crimson); }
[data-accent="orange"] { --acc: var(--a-orange); }
[data-accent="sky"] { --acc: var(--a-sky); }
[data-accent="magenta"] { --acc: var(--a-magenta); }
[data-accent="green"] { --acc: var(--a-green); }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--bar-h) + var(--cfg-h) + 14px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 400 1.0625rem/1.62 var(--text);
  color: var(--ink);
  background-color: var(--bg);
  background-image:
    radial-gradient(1100px 620px at 78% -8%, var(--page-glow-1), transparent 62%),
    radial-gradient(900px 500px at -10% 30%, var(--page-glow-2), transparent 60%),
    linear-gradient(var(--page-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--page-grid) 1px, transparent 1px);
  background-size: auto, auto, 48px 48px, 48px 48px;
  overflow-wrap: break-word;
}
img { max-width: 100%; height: auto; }
a { color: var(--cyan); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--link-hover); }
p { margin: 0 0 .8em; }
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 600; letter-spacing: .005em; }
ul, ol { margin: 0; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 3px; }
[tabindex="-1"]:focus { outline: none; }
[tabindex="-1"]:focus-visible { outline: 1px dashed rgb(var(--cyan-c) / .55); outline-offset: 4px; }
main:focus { outline: none; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.gold { color: var(--gold); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.label { display: block; font: 600 .75rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); }

.skip { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 16px; background: var(--gold); color: var(--on-acc); font-weight: 700; border-radius: 6px; text-decoration: none; }
.skip:focus { top: 12px; color: var(--on-acc); }

.kicker { margin: 0; font: 600 .8125rem/1.3 var(--display); text-transform: uppercase; letter-spacing: .16em; color: var(--gold); }
.kicker--cyan { color: var(--cyan); }

/* ---------- Top bar ---------- */
.bar { position: sticky; top: 0; z-index: 30; background: var(--bar-bg); border-bottom: 1px solid var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.bar__in { max-width: var(--wrap); margin-inline: auto; padding: 10px var(--gutter); min-height: var(--bar-h); display: flex; align-items: center; gap: 12px 24px; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; flex: none; }
.brand:hover { color: var(--ink); }
.brand__tile { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border: 1px solid var(--tile-line); border-radius: 8px; background: linear-gradient(160deg, var(--tile-1), var(--tile-2)); color: var(--tile-ink); font: 700 1rem/1 var(--display); letter-spacing: .06em; box-shadow: var(--tile-glow); }
.brand__text { display: grid; line-height: 1.15; }
.brand__name { font: 700 .9375rem/1.2 var(--display); text-transform: uppercase; letter-spacing: .12em; }
.brand__sub { font: 600 .75rem/1.3 var(--display); text-transform: uppercase; letter-spacing: .14em; color: var(--ink-3); }
.bar__nav { margin-left: auto; min-width: 0; }
.bar__nav ul { list-style: none; padding: 0; display: flex; gap: 2px; }
.bar__nav a { display: block; padding: 8px 10px; font: 600 .8125rem/1.2 var(--display); text-transform: uppercase; letter-spacing: .12em; color: var(--ink-2); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; }
.bar__nav a:hover { color: var(--ink); border-bottom-color: var(--cyan); }
.bar__cta { flex: none; padding: 8px 14px; border: 1px solid var(--gold); border-radius: 6px; color: var(--gold); font: 700 .8125rem/1.2 var(--display); text-transform: uppercase; letter-spacing: .1em; text-decoration: none; white-space: nowrap; }
.bar__cta:hover { background: rgb(var(--gold-c) / .12); color: var(--gold); }
.bar__tools { flex: none; display: flex; align-items: center; gap: 10px; }

/* Theme toggle: a real button; aria-pressed="true" means the dark theme is on (kit theme-init.js) */
.tgl { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; min-width: 36px; padding: 0 12px 0 10px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--fill); color: var(--ink-2); font: 600 .75rem/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; cursor: pointer; }
.tgl:hover { color: var(--ink); border-color: rgb(var(--gold-c) / .6); }
.tgl__icon { flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
/* the "on" look follows the theme itself, so it can never disagree with the page */
:root[data-theme="dark"] .tgl { color: var(--ink); border-color: var(--gold); box-shadow: inset 0 0 0 1px rgb(var(--gold-c) / .5); }
:root[data-theme="dark"] .tgl__icon { fill: var(--gold); stroke: var(--gold); }
html:not([data-theme]) [data-theme-toggle] { display: none; }

/* ---------- Hero ---------- */
/* Round 3: name (id), key-facts frame, then summary (text). Wide screens: id and text on the left, the frame
   on the right across both rows; one column: id, frame, text. */
.hero { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "id frame" "text frame"; gap: 0 clamp(28px, 4vw, 56px); padding-top: clamp(28px, 4vw, 52px); padding-bottom: 28px; align-items: start; }
.hero__id { grid-area: id; }
.hero__text { grid-area: text; }
.frame { grid-area: frame; }
.hero h1 { font: 700 clamp(3.4rem, 8.4vw, 6.6rem)/.9 var(--display); letter-spacing: -.005em; margin: .7rem 0 .2rem; text-transform: none; }
.hero__headline { font: 500 clamp(1.45rem, 2.5vw, 1.95rem)/1.15 var(--display); color: var(--cyan); letter-spacing: .01em; margin: .5rem 0 1.3rem; }
.hero__summary { font-size: 1.125rem; color: var(--ink-2); max-width: 64ch; }
.focusline { margin: 1.3rem 0 1.4rem; }
.focusline .label { margin-bottom: 8px; }
.focusline ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.focusline li { padding: 5px 12px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--fill); font-weight: 600; font-size: 1rem; }
.contact { list-style: none; padding: 16px 0 0; display: flex; flex-wrap: wrap; gap: 14px 30px; border-top: 1px solid var(--line); }
.contact li { min-width: 0; }
.contact a { font-weight: 600; }

/* Current frame: the 4-slot "ship" panel */
.frame { position: relative; border: 1px solid var(--line-2); border-radius: 14px; padding: 20px 20px 14px; background: linear-gradient(180deg, var(--frame-1), var(--frame-2)); box-shadow: 0 30px 70px -40px rgb(var(--shadow-c) / calc(.9 * var(--shadow-a) / .9)); overflow: hidden; }
.frame::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 55% at 50% 100%, rgb(var(--cyan-c) / .13), transparent 70%); pointer-events: none; }
.frame__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; position: relative; }
.badge { font: 600 .75rem/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); border: 1px solid var(--line-2); border-radius: 999px; padding: 5px 10px; }
.frame__title { font-size: 1.75rem; line-height: 1.1; margin: .3rem 0 .35rem; position: relative; }
.frame__lede { color: var(--ink-2); font-size: 1rem; position: relative; margin-bottom: 16px; }
/* Key facts (kit.facts_strip): a readout in the frame, mono cyan keys, the Disney role first. */
.facts { position: relative; margin: 0 0 4px; }
.facts__row { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 2px 12px; padding: 9px 0 10px; border-top: 1px solid var(--line); }
.facts__row:first-child { border-top-color: var(--line-2); }
.facts__k { font: 600 .75rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--cyan); padding-top: 4px; }
.facts__v { margin: 0; font-size: .96875rem; line-height: 1.5; color: var(--ink-2); }
.facts__strong { font-weight: 700; color: var(--ink); }
/* The concurrent roles: the other current slots, under the facts. */
.frame__also { position: relative; margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--line-2); }
.frame__alsohead { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 4px; }
.frame__sub { font: 600 1.2rem/1.15 var(--display); letter-spacing: .01em; }
.frame__also .frame__lede { font-size: .9375rem; margin-bottom: 12px; }
.frame__slots { list-style: none; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; position: relative; z-index: 1; }
.fslot { display: flex; flex-direction: column; min-width: 0; }
.fslot__card { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title tag" "org org"; align-items: start; gap: 3px 10px; padding: 10px 12px 10px 14px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--fslot-bg); color: var(--ink); text-decoration: none; position: relative; }
.fslot__card::before { content: ""; position: absolute; left: -1px; top: 10px; bottom: 10px; width: 3px; border-radius: 2px; background: var(--acc); }
.fslot__card:hover { color: var(--ink); border-color: var(--acc); }
.fslot__title { grid-area: title; font: 600 1.125rem/1.15 var(--display); letter-spacing: .01em; }
.fslot__org { grid-area: org; font-size: .9375rem; line-height: 1.35; color: var(--ink-2); }
.fslot__dates { font: 600 .75rem/1.3 var(--mono); color: var(--gold); margin-left: 6px; white-space: nowrap; }
.fslot .tag--solid { grid-area: tag; justify-self: end; }
.frame__foot { position: relative; text-align: center; margin: 12px 0 0; font: 600 .75rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }

.tag { display: inline-block; font: 700 .75rem/1.25 var(--display); text-transform: uppercase; letter-spacing: .09em; border-radius: 4px; padding: 3px 8px; white-space: nowrap; }
.tag--solid { align-self: flex-start; background: var(--acc); color: var(--on-acc); }
.tag--line { border: 1px solid var(--line-2); color: var(--ink-2); padding: 2px 8px; }

/* ---------- Reading aids ---------- */
.aids { display: grid; gap: 14px; padding-bottom: 8px; }
.toc details { border: 1px solid var(--line); border-radius: 8px; background: var(--toc-bg); }
.toc summary { cursor: pointer; padding: 11px 16px; font-weight: 600; color: var(--ink); }
.toc summary::marker { color: var(--cyan); }
.toc ol { list-style: none; padding: 4px 16px 16px; columns: 2 18rem; column-gap: 32px; }
.toc li { padding: 4px 0; break-inside: avoid; }
.toc a { text-decoration: none; }
.toc a:hover { text-decoration: underline; }
.toc__n { font: 600 .75rem/1 var(--mono); color: var(--gold); margin-right: 8px; }
.standard { border-left: 3px solid var(--gold); border-radius: 0 8px 8px 0; padding: 14px 18px; background: linear-gradient(90deg, rgb(var(--gold-c) / .10), rgb(var(--gold-c) / .03)); }
.standard p { margin: 0; max-width: 92ch; }
.standard__k { color: var(--gold); }
.provenance { margin: 0; padding-left: 14px; border-left: 1px solid var(--line-2); color: var(--ink-3); font-size: 1rem; }

/* ---------- Section rhythm ---------- */
.sect { padding-top: clamp(56px, 7vw, 92px); }
.h2 { display: flex; align-items: baseline; gap: .45em; padding-top: 26px; border-top: 1px solid var(--line); font: 600 clamp(2rem, 3.6vw, 2.8rem)/1.05 var(--display); }
.slashes { color: var(--gold); font-size: .72em; font-style: italic; letter-spacing: -.08em; flex: none; }
.sect__lede { color: var(--ink-2); max-width: 70ch; margin: .7rem 0 1.8rem; }

/* ---------- Strengths: slot bay ---------- */
.bay { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); border: 1px solid var(--line-2); border-radius: 14px; background: linear-gradient(180deg, var(--bay-1), var(--bay-2)); box-shadow: 0 30px 80px -46px rgb(var(--shadow-c) / calc(.9 * var(--shadow-a) / .9)); }
.bay__slots { position: relative; display: flex; flex-direction: column; padding: 24px; border-right: 1px solid var(--line); }
.bay__slots::before { content: ""; position: absolute; inset: 0; border-radius: 14px 0 0 14px; pointer-events: none;
  background:
    radial-gradient(48% 42% at 50% 104%, rgb(var(--cyan-c) / .14), transparent 72%),
    linear-gradient(90deg, transparent calc(50% - .5px), rgb(var(--cyan-c) / .10) calc(50% - .5px), rgb(var(--cyan-c) / .10) calc(50% + .5px), transparent calc(50% + .5px)); }
.slots { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; position: relative; z-index: 1; }
.slots__cell { display: flex; min-width: 0; }
.slot {
  flex: 1; min-width: 0; position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "no icon" "tag icon" "label label" "fig fig" "ev ev" "cta cta";
  grid-template-rows: auto auto auto 1fr auto auto;
  gap: 6px 8px; padding: 16px 14px 12px;
  border: 1px solid var(--line-2); border-radius: 9px;
  background: linear-gradient(180deg, var(--fill-hi), var(--fill-lo));
  color: var(--ink); text-decoration: none;
}
.slot::before { content: ""; position: absolute; left: 10px; right: 10px; top: -1px; height: 3px; border-radius: 0 0 3px 3px; background: var(--acc); }
.slot:hover { color: var(--ink); border-color: color-mix(in srgb, var(--acc) 65%, var(--line-2)); }
.slot__no { grid-area: no; font: 600 .75rem/1.2 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); }
.slot__icon { grid-area: icon; color: var(--acc); align-self: start; }
.slot__icon .ico { display: block; }
.slot__tag { grid-area: tag; justify-self: start; align-self: start; background: var(--acc); color: var(--on-acc); font: 700 .75rem/1 var(--display); text-transform: uppercase; letter-spacing: .1em; padding: 4px 7px 3px; border-radius: 3px; }
.slot__label { grid-area: label; font: 600 1.375rem/1.08 var(--display); letter-spacing: .005em; margin-top: 4px; }
.slot__fig { grid-area: fig; color: var(--acc); font-weight: 600; font-size: 1rem; line-height: 1.3; }
.slot__ev { grid-area: ev; display: flex; flex-wrap: wrap; gap: 4px; }
.slot__lead { display: none; color: var(--gold); }
.slot__cta { grid-area: cta; display: flex; align-items: center; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); font: 600 .75rem/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); }
.slot__plus { color: var(--acc); font-size: 1rem; line-height: 1; }
.slot[aria-current="true"] { border-color: var(--acc); background: linear-gradient(180deg, color-mix(in srgb, var(--acc) var(--slot-tint), transparent), var(--fill-lo)); box-shadow: inset 0 0 0 1px var(--acc), 0 14px 34px -18px var(--acc); }
.slot[aria-current="true"] .slot__cta { color: var(--ink); }
.slot[aria-current="true"] .slot__cta-t::after { content: "ing"; }
.bay__deck { position: relative; flex: 1 0 70px; min-height: 70px; }
.bay__deck::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 16px; width: 1px; background: linear-gradient(180deg, rgb(var(--cyan-c) / .5), rgb(var(--cyan-c) / 0)); }
.bay__deck span { position: absolute; left: 50%; bottom: 8px; width: 56%; height: 34px; transform: translateX(-50%); border: 1px solid rgb(var(--cyan-c) / .26); border-radius: 50%; box-shadow: 0 0 40px -6px rgb(var(--cyan-c) / .25), inset 0 0 24px -8px rgb(var(--cyan-c) / .3); }
.bay__deck span::after { content: ""; position: absolute; inset: 9px 22%; border: 1px solid rgb(var(--cyan-c) / .16); border-radius: 50%; }
.bay__note { position: relative; margin: 6px 0 0; text-align: center; font: 600 .75rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); }

.inspector { padding: 24px 26px 28px; min-width: 0; }
.inspector__k, .loadout__k { margin: 0 0 12px; font: 600 .8125rem/1.3 var(--display); text-transform: uppercase; letter-spacing: .16em; color: var(--cyan); }

/* ---------- Fragment styling (shared .frag__* classes) ---------- */
.fragment { --acc: var(--gold); }
.fragment[data-accent="cobalt"] { --acc: var(--a-cobalt); }
.fragment[data-accent="violet"] { --acc: var(--a-violet); }
.fragment[data-accent="amber"] { --acc: var(--a-amber); }
.fragment[data-accent="teal"] { --acc: var(--a-teal); }
.fragment[data-accent="crimson"] { --acc: var(--a-crimson); }
.fragment[data-accent="orange"] { --acc: var(--a-orange); }
.fragment[data-accent="sky"] { --acc: var(--a-sky); }
.fragment[data-accent="magenta"] { --acc: var(--a-magenta); }
.fragment[data-accent="green"] { --acc: var(--a-green); }
.frag__meta { margin: 0 0 4px; font: 600 .75rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--acc); }
.frag__title { font: 600 clamp(1.6rem, 2.4vw, 2rem)/1.08 var(--display); margin: 0 0 .7rem; }
.frag__lede { color: var(--ink); }
.frag__org { color: var(--cyan); font-weight: 600; margin: 0 0 .4rem; }
.frag__points { padding-left: 1.15rem; margin: 0 0 1rem; color: var(--ink-2); }
.frag__points li { margin: .35rem 0; }
.frag__points li::marker { color: var(--acc); }
.frag__where, .frag__check { margin: 0 0 10px; padding: 10px 14px; border-left: 3px solid var(--gold); border-radius: 0 6px 6px 0; background: rgb(var(--gold-c) / .07); font-size: 1rem; color: var(--ink-2); }
.frag__check { border-left-color: var(--cyan); background: rgb(var(--cyan-c) / .06); }
.frag__k { display: block; margin-bottom: 3px; font: 600 .75rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--gold); }
.frag__check .frag__k { color: var(--cyan); }
.frag__url { overflow-wrap: anywhere; font-size: 1rem; }
.frag__note { color: var(--ink-3); font-size: 1rem; font-style: italic; }
.frag__status { border-left: 3px solid var(--gold); padding: 8px 12px; background: rgb(var(--gold-c) / .07); }
.frag__facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; }
.frag__facts dt { font: 600 .75rem/1.6 var(--mono); text-transform: uppercase; color: var(--cyan); }
.frag__facts dd { margin: 0; }
.load-error { padding: 12px 14px; border: 1px solid var(--a-crimson); border-radius: 6px; color: var(--ink); }

/* ---------- Doctrine Atlas ---------- */
.atlas { padding-top: clamp(56px, 7vw, 92px); }
.atlas__panel { border: 1px solid var(--line-2); border-radius: 16px; background: linear-gradient(180deg, var(--atlas-1), var(--atlas-2) 40%); box-shadow: 0 40px 90px -50px rgb(var(--shadow-c) / calc(.95 * var(--shadow-a) / .9)), inset 0 1px 0 rgb(var(--cyan-c) / .08); }
.atlas__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 26px 28px 22px; border-bottom: 1px solid var(--line); }
.atlas__title { font: 600 clamp(2rem, 3.6vw, 2.75rem)/1.05 var(--display); color: var(--cyan); margin: .35rem 0 .5rem; }
.atlas__lede { margin: 0; max-width: 70ch; color: var(--ink-2); }
.atlas__lede strong { color: var(--ink); }
.dataset { flex: none; font: 600 .75rem/1 var(--mono); color: var(--ink-2); border: 1px solid var(--line-2); border-radius: 999px; padding: 6px 11px; white-space: nowrap; }

.atlas__stage {
  display: grid;
  grid-template-columns: var(--colA) minmax(0, 1fr);
  grid-template-areas: "loadout records";
  position: relative;
}
/* the column divider is a pseudo-element, so it never counts as a text background */
.atlas__stage::before { content: ""; position: absolute; top: 0; bottom: 0; left: var(--colA); width: 1px; background: var(--line); pointer-events: none; }
.ctl__legend { display: block; padding: 0; margin: 0 0 10px; font: 600 .75rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); }
.ctl__legend small { font: 400 .8125rem/1 var(--text); text-transform: none; letter-spacing: 0; }
.seg { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; position: relative; }
.seg__btn, .seg--radio label {
  display: flex; align-items: center; gap: 9px; min-height: 42px; padding: 8px 12px;
  border: 1px solid var(--line-2); border-radius: 7px; background: var(--fill);
  color: var(--ink-2); font: 600 .9375rem/1.2 var(--text); text-decoration: none; cursor: pointer;
}
.seg__btn:hover, .seg--radio label:hover { color: var(--ink); border-color: rgb(var(--gold-c) / .6); }
.seg__btn[aria-current="true"], .seg--radio input:checked + label { color: var(--ink); border-color: var(--gold); background: rgb(var(--gold-c) / .12); box-shadow: inset 0 0 0 1px var(--gold); }
/* Each radio sits invisibly over its own label, so the hit area is the whole label (and no 1 px target) */
.seg__opt { position: relative; display: flex; min-width: 0; }
.seg__opt label { flex: 1; }
.seg--radio input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.seg__opt:hover label { color: var(--ink); border-color: rgb(var(--gold-c) / .6); }
.seg--radio input:focus-visible + label { outline: 2px solid var(--gold); outline-offset: 3px; }
.sw { flex: none; width: 10px; height: 10px; border-radius: 2px; background: var(--acc, var(--ink-3)); }

/* Loadout: one panel per skill group, the focused one shown (generated :has rules in the template) */
.loadout { grid-area: loadout; align-self: start; position: sticky; top: calc(var(--bar-h) + var(--cfg-h) + 14px); max-height: calc(100vh - var(--bar-h) - var(--cfg-h) - 28px); overflow: auto; overscroll-behavior: contain; padding: 20px 24px 24px; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.loadout:focus-visible { outline-offset: -3px; }
.loadout::after { content: ""; position: sticky; bottom: -24px; display: block; height: 44px; margin: 0 -24px -24px; background: linear-gradient(transparent, var(--fade) 85%); pointer-events: none; }
.loadout__k { margin: 0 0 12px; font: 600 .8125rem/1.3 var(--display); text-transform: uppercase; letter-spacing: .16em; color: var(--cyan); }
.lo__title { display: flex; align-items: center; gap: 10px; font: 600 1.5rem/1.1 var(--display); margin: 0 0 4px; }
.lo__count { margin: 0 0 12px; font: 600 .8125rem/1.4 var(--mono); color: var(--gold); text-transform: uppercase; letter-spacing: .05em; }
.lo__list { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 8px; }
.lo__rec { position: relative; display: grid; gap: 3px; padding: 10px 12px 10px 16px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--fill); }
.lo__rec::before { content: ""; position: absolute; left: -1px; top: 10px; bottom: 10px; width: 3px; border-radius: 2px; background: var(--acc); }
.lo__t { display: inline-block; min-height: 24px; padding: 2px 0; font: 600 1.05rem/1.2 var(--display); color: var(--ink); text-decoration-color: var(--acc); }
.lo__t:hover { color: var(--ink); text-decoration-color: var(--ink); }
.lo__org { font-size: .9375rem; line-height: 1.35; color: var(--ink-2); }
.lo__ev { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 5px; margin-top: 3px; }
.lo__more { margin: 0 0 6px; }
.lo__detail { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.lo__note { margin: 0; color: var(--ink-3); font-size: 1rem; }
.lo__detail .frag__title { font-size: 1.35rem; }
.lo__detail .frag__rec { position: relative; margin: 0 0 10px; padding: 12px 14px 4px 16px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--fill); }
.lo__detail .frag__rec::before { content: ""; position: absolute; left: -1px; top: 10px; bottom: 10px; width: 3px; border-radius: 2px; background: var(--acc); }
.lo__detail .frag__rec h4 { font: 600 1.15rem/1.15 var(--display); }
.lo__detail .frag__org { font-size: .9375rem; margin: 2px 0 6px; }
.lo__detail .frag__points { font-size: 1rem; margin-bottom: 8px; }

.records { grid-area: records; min-width: 0; padding: 0 28px 12px; }
.records__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; padding: 20px 0 12px; border-bottom: 1px solid var(--line); }
.records__title { font: 600 1.75rem/1.1 var(--display); }
.showing { margin: 0; font: 600 .75rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.showing span { display: none; color: var(--gold); }
body:has(#show-all:checked) .showing [data-v="all"], body:has(#show-all:checked) .st[data-st="show-all"],
body:has(#show-current:checked) .showing [data-v="current"], body:has(#show-current:checked) .st[data-st="show-current"] { display: inline; }
body:has(#show-current:checked) .rec:not([data-current]) { display: none; }
.records__also { display: none; margin: 14px 0 0; padding: 10px 14px; border: 1px dashed var(--line-2); border-radius: 8px; color: var(--ink-2); }
body:has(#show-current:checked) .records__also { display: block; }
.atlas .rec:target { display: block !important; }
.records__expand { margin-left: auto; min-height: 32px; padding: 4px 12px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--fill); color: var(--ink-2); font: 600 .75rem/1.2 var(--mono); text-transform: uppercase; letter-spacing: .06em; cursor: pointer; }
.records__expand:hover { color: var(--ink); border-color: rgb(var(--gold-c) / .6); }
.records__expand[aria-pressed="true"] { color: var(--ink); border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
html:not([data-theme]) .records__expand { display: none; }
.rec__n { color: var(--ink-3); font-weight: 400; }

.rec { position: relative; padding: 24px 0 22px 24px; border-bottom: 1px solid var(--line); }
.rec:last-child { border-bottom: 0; }
.rec::before { content: ""; position: absolute; left: 0; top: 26px; bottom: 24px; width: 3px; border-radius: 2px; background: var(--acc); opacity: calc(.5 + var(--match, 0) * .5); box-shadow: 0 0 calc(var(--match, 0) * 14px) var(--acc); }
.rec__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 8px; }
.rec__dates { font: 600 .8125rem/1.3 var(--mono); color: var(--gold); }
.rec__lane { display: inline-flex; align-items: center; gap: 6px; font: 600 .75rem/1.3 var(--display); text-transform: uppercase; letter-spacing: .12em; color: var(--ink-3); }
.rec__match { display: none; align-items: center; padding: 2px 8px; border: 1px solid rgb(var(--cyan-c) / .5); border-radius: 4px; background: rgb(var(--cyan-c) / .12); color: var(--cyan); font: 700 .75rem/1.25 var(--display); text-transform: uppercase; letter-spacing: .12em; }
.rec__title { font: 600 clamp(1.4rem, 2.1vw, 1.65rem)/1.12 var(--display); }
.rec__org { margin: .3rem 0 0; color: var(--cyan); font-weight: 600; }
.rec__loc { color: var(--ink-3); font-weight: 400; }
.rec__loc::before { content: "· "; }
.rec__note { margin: .2rem 0 0; color: var(--ink-3); font-style: italic; }
.rec__scope { margin: .7rem 0 .5rem; color: var(--ink-2); font-style: italic; }
.rec__list { padding-left: 1.15rem; margin: 0 0 .4rem; }
.rec__list li { margin: .4rem 0; padding-left: 2px; }
.rec__list li::marker { color: var(--acc); }
.rec__detail { color: var(--ink-2); }
.rec__more { margin: .2rem 0 .3rem; }
.rec__more summary { display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; cursor: pointer; list-style: none; color: var(--cyan); font-weight: 600; }
.rec__more summary::-webkit-details-marker { display: none; }
.rec__plus { display: inline-grid; place-items: center; width: 20px; height: 20px; border: 1px solid rgb(var(--cyan-c) / .5); border-radius: 4px; font: 700 .9375rem/1 var(--mono); }
.rec__more[open] .rec__plus { transform: rotate(45deg); }
/* Folds (round 4): details that are open on desktop and closed by script.js on phones; HTMX reopens them */
.fold > summary { display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; cursor: pointer; list-style: none; color: var(--cyan); font-weight: 600; }
.fold > summary::-webkit-details-marker { display: none; }
.fold[open] > .rec__plus, .fold[open] > summary .rec__plus { transform: rotate(45deg); }
.lo__wrap > summary { margin-bottom: 4px; font-size: 1rem; }
.ev__wrap > summary { margin-top: 4px; }
.group__wrap > summary { margin: -2px 0 2px; font-size: 1rem; }
.com__wrap > summary { font-size: 1rem; }
.insp__wrap > summary { margin: -6px 0 6px; font-size: 1rem; }
.rec__basis { margin-left: auto; }
.rec__media { margin: .8rem 0 0; }
.atlas__foot { margin: 0; padding: 16px 28px 20px; border-top: 1px solid var(--line); color: var(--ink-2); font-size: 1rem; }
.atlas__foot strong { color: var(--ink); }

/* Verification and status tags (data vocabulary only) */
.vtag { display: inline-block; padding: 1px 7px; border: 1px solid var(--line-2); border-radius: 3px; font: 600 .75rem/1.45 var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); vertical-align: 1px; white-space: nowrap; }
.vtag--public_artifact { color: var(--cyan); border-color: rgb(var(--cyan-c) / .5); background: rgb(var(--cyan-c) / .08); }
.vtag--status { color: var(--gold); border-color: rgb(var(--gold-c) / .45); }

/* Evidence chips and inspectors */
.chips { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-wrap: wrap; gap: 7px; }
.chips--inline { display: inline-flex; margin: 0 0 0 4px; vertical-align: middle; }
.chip { display: inline-flex; align-items: center; min-height: 30px; padding: 3px 12px; border: 1px solid rgb(var(--cyan-c) / .45); border-radius: 999px; background: rgb(var(--cyan-c) / .05); color: var(--cyan); font: 600 .875rem/1.3 var(--text); text-decoration: none; white-space: nowrap; }
.chip:hover { background: rgb(var(--cyan-c) / .14); }
.chip[aria-current="true"] { background: var(--cyan); border-color: var(--cyan); color: var(--on-acc); }
.chip--sm { min-height: 26px; padding: 1px 9px; font-size: .8125rem; }
.chip--wide::before { content: "+"; margin-right: 8px; font-family: var(--mono); }
.evbox { margin-top: 12px; padding: 14px 16px; border: 1px solid var(--line-2); border-left: 3px solid var(--cyan); border-radius: 0 8px 8px 0; background: rgb(var(--cyan-c) / .04); }
.evbox .frag__title { font-size: 1.3rem; margin-bottom: .4rem; }
.evbox p:last-child { margin-bottom: 0; }
.evbox--none { border-left-color: var(--line-2); color: var(--ink-2); }
.photos { margin-top: 12px; }
.photos__note { margin: 0; color: var(--ink-3); font-size: 1rem; }
.frag__gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.frag__gallery figure { margin: 0; }
.frag__gallery img { display: block; width: 100%; height: 180px; object-fit: cover; border: 1px solid var(--line-2); border-radius: 6px; background: var(--panel); }
.frag__gallery figcaption { margin-top: 6px; font-size: .875rem; line-height: 1.4; color: var(--ink-2); }

/* ---------- Projects ---------- */
.dossier { position: relative; margin-bottom: 22px; padding: clamp(20px, 3vw, 32px); border: 1px solid var(--line-2); border-radius: 14px; background: linear-gradient(180deg, var(--card-1), var(--card-2)); }
.dossier::before { content: ""; position: absolute; left: 18px; right: 18px; top: -1px; height: 3px; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, var(--acc), transparent 75%); }
.dossier__no { color: var(--acc); }
.dossier__title { font: 600 clamp(1.65rem, 2.8vw, 2.2rem)/1.08 var(--display); margin: .4rem 0 .5rem; }
.dossier__role { color: var(--ink-2); margin: 0; max-width: 90ch; }
.dossier__role strong { color: var(--ink); }
.dossier__role a { overflow-wrap: anywhere; }
.terms { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.terms li { padding: 2px 8px; border: 1px solid var(--line-2); border-radius: 4px; font: 600 .75rem/1.4 var(--display); text-transform: uppercase; letter-spacing: .09em; color: var(--ink-2); }
.terms--lg li { font-size: .9375rem; padding: 4px 10px; color: var(--ink); }
.status { margin: 20px 0 22px; padding: 12px 16px; border-left: 3px solid var(--gold); border-radius: 0 8px 8px 0; background: rgb(var(--gold-c) / .08); }
.status strong { color: var(--gold); }
.dossier__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 390px); gap: 28px; align-items: start; }
.dfacts { margin: 0; display: grid; gap: 0; }
.dfacts > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); }
.dfacts dt { font: 600 .75rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--cyan); padding-top: 5px; }
.dfacts dd { margin: 0; color: var(--ink-2); }
.dossier__ev { padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--inset-bg); }
.dossier__ev .ctl__legend { display: flex; align-items: center; gap: 8px; }

/* ---------- Skills inventory ---------- */
.groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.group { position: relative; padding: 22px 24px 14px; border: 1px solid var(--line-2); border-radius: 12px; background: linear-gradient(180deg, var(--card-1), var(--card-2)); }
.group::before { content: ""; position: absolute; left: 16px; right: 16px; top: -1px; height: 3px; border-radius: 0 0 3px 3px; background: var(--acc); }
.group__no { font-family: var(--mono); font-size: .75rem; color: var(--acc); letter-spacing: .08em; }
.group__title { font-size: 1.65rem; line-height: 1.1; margin: .3rem 0 .7rem; }
.group__items { list-style: none; padding: 0; }
.group__items li { display: grid; gap: 4px; padding: 10px 0; border-top: 1px solid var(--line); }
.group__term { font-weight: 600; }
.group__meta { font-size: 1rem; color: var(--ink-3); }
.group__meta .vtag { margin-right: 6px; }

/* ---------- Credentials ---------- */
.creds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; padding-top: 10px; }
.creds__col { min-width: 0; }
.creds__col > section + section { margin-top: 26px; }
.sub { font: 600 1.4rem/1.15 var(--display); color: var(--cyan); margin: 0 0 10px; }
.cred { padding: 12px 0; border-top: 1px solid var(--line); }
.cred__name { margin: 0; font-weight: 600; }
.cred__body { margin: .2rem 0 .3rem; color: var(--ink-2); }
.cred__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: .3rem 0 0; font: 600 .8125rem/1.4 var(--mono); color: var(--ink-3); }
.cred__dim { color: var(--ink-3); font-weight: 400; }
.certs { list-style: none; padding: 0; }
.certs li { display: grid; gap: 3px; padding: 10px 0; border-top: 1px solid var(--line); }
.cert__name { font-weight: 600; }
.cert__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--ink-2); font-size: 1rem; }

/* ---------- Community ---------- */
.com { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; padding-top: 10px; }
.com__card { --acc: var(--a-magenta); position: relative; padding: 20px 22px 14px 24px; border: 1px solid var(--line-2); border-radius: 12px; background: linear-gradient(180deg, var(--card-1), var(--card-2)); }
.com__card::before { content: ""; position: absolute; left: -1px; top: 16px; bottom: 16px; width: 3px; border-radius: 2px; background: var(--acc); }
.com__card--lead { grid-column: 1 / -1; }
.com__card--lead .com__title { font-size: 1.9rem; }
.com__title { font-size: 1.45rem; line-height: 1.12; }
.com__ev { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 1rem; }
.sub--also { margin-top: 30px; color: var(--ink-2); }
.com__also { list-style: none; padding: 0; }
.com__also > li { padding: 12px 0; border-top: 1px solid var(--line); }
.com__also-h { margin: 0; }
.com__also ul { margin: .3rem 0 0; padding-left: 1.15rem; color: var(--ink-2); }

/* ---------- Contact closing box ---------- */
.closing { margin-top: 10px; padding: clamp(22px, 4vw, 40px); border: 1px solid rgb(var(--violet-c) / .3); border-left: 4px solid var(--violet); border-radius: 0 14px 14px 0; background: linear-gradient(90deg, rgb(var(--violet-c) / .10), rgb(var(--violet-c) / .02)); }
/* light: a cream doctrine box with the violet rule, after the Command Deck's quote box */
:root[data-theme="light"] .closing { border-color: var(--line-2); border-left-color: var(--violet); background: linear-gradient(90deg, rgb(var(--violet-c) / .07), rgb(var(--violet-c) / 0) 70%), var(--raise); }
.closing__mail { margin: 0 0 18px; font: 600 clamp(1.7rem, 4.4vw, 2.8rem)/1.1 var(--display); overflow-wrap: anywhere; }
.closing__mail a { color: var(--ink); text-decoration-color: var(--violet); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.closing__list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 14px 36px; }
.closing__list li { min-width: 0; overflow-wrap: anywhere; }

/* ---------- Footer ---------- */
.foot { margin-top: clamp(56px, 8vw, 96px); border-top: 1px solid var(--line); background: var(--foot-bg); }
.foot__in { display: grid; grid-template-columns: 1.1fr 1.5fr 1fr; gap: 28px; padding-block: 36px 48px; align-items: start; }
.foot__brand { display: flex; gap: 14px; align-items: flex-start; }
.foot__brand p { margin: 0; color: var(--ink-2); }
.foot__brand strong { color: var(--ink); font-family: var(--display); font-size: 1.15rem; letter-spacing: .06em; text-transform: uppercase; }
.foot__data .label { margin-bottom: 8px; }
.data-links { list-style: none; padding: 0; display: grid; gap: 6px; color: var(--ink-2); font-size: 1rem; }
.foot__prov { margin: 0; font: 600 .8125rem/1.7 var(--mono); color: var(--ink-3); }

/* ---------- Motion (only when allowed) ---------- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .slot, .fslot__card, .seg__btn, .seg--radio label, .chip { transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease, transform .16s ease, color .16s ease; }
  .slot:hover { transform: translateY(-2px); }
  .rec__plus { transition: transform .16s ease; }
}

/* ---------- Responsive ----------
   1920 / 1280: full bar, two-column atlas with a sticky loadout.
   1024: same, with the toggle as an icon and a short résumé label so the one-row bar fits.
   768-960: the bar becomes two rows (brand and tools, then a scrolling section strip) and stops
   sticking; atlas stacks Focus, Loadout, Show, Experience; skills and community stay two-up.
   Phones: two-up slots, one-column cards; 280-359 px hides the brand words (the SM tile keeps
   its label) and stacks the Focus control. Landscape phones (height <= 500 px) get nothing
   sticky and no nested scroll. */
@media (max-width: 1180px) {
  :root { --colA: 340px; }
  .bar__nav a { padding-inline: 7px; letter-spacing: .08em; }
  .bar__cta-x { display: none; }
  .tgl { width: 36px; padding: 0; justify-content: center; }
  .tgl__label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 1080px) {
  .bay { grid-template-columns: 1fr; }
  .bay__slots { border-right: 0; border-bottom: 1px solid var(--line); }
  .bay__slots::before { border-radius: 14px 14px 0 0; }
  .creds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .creds__col:last-child { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .creds__col:last-child > section + section { margin-top: 0; }
  .dossier__body { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
  .bar { position: static; }
  html { scroll-padding-top: 12px; }
  .bar__in { flex-wrap: wrap; padding-bottom: 0; }
  .bar__nav { order: 3; flex: 1 0 100%; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); overflow-x: auto; scrollbar-width: none; border-top: 1px solid var(--line);
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
  .bar__nav::-webkit-scrollbar { display: none; }
  .bar__nav a { padding-block: 11px; }
  .bar__tools { margin-left: auto; }
  .bar__cta-x { display: inline; }
  .tgl { width: auto; padding: 0 12px 0 10px; }
  .tgl__label { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; }
  .hero { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "id" "frame" "text"; }
  .frame { margin: 22px 0 26px; }
  .atlas__stage { grid-template-columns: minmax(0, 1fr); grid-template-areas: "loadout" "records"; }
  .atlas__stage::before { display: none; }
  .loadout { position: relative; top: 0; max-height: none; overflow: visible; border-bottom: 1px solid var(--line); }
  .loadout::after { display: none; }
  .foot__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
  .foot__prov { grid-column: 1; }
}
@media (max-width: 760px) {
  .slots { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .bay__slots { padding: 16px; }
  .bay__deck { flex-basis: 54px; min-height: 54px; }
  .inspector { padding: 20px 18px 22px; }
  .slot { padding: 14px 11px 10px; }
  .slot__label { font-size: 1.2rem; }
  .slot__fig { font-size: .9375rem; }
  .atlas__head { flex-direction: column; padding: 22px 18px 18px; }
  .loadout { padding-inline: 18px; }
  .loadout::after { margin-inline: -18px; }
  .records { padding: 0 18px 8px; }
  .atlas__foot { padding-inline: 18px; }
  .rec { padding-left: 18px; }
  .rec__loc { display: block; }
  .rec__loc::before { content: none; }
  .creds, .creds__col:last-child { grid-template-columns: minmax(0, 1fr); }
  .dfacts > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .frag__gallery img { height: 130px; }
  .toc ol { columns: 1; }
}
@media (max-width: 700px) {
  .groups, .com { grid-template-columns: minmax(0, 1fr); }
  .foot__in { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .bar__cta-x { display: none; }
  .tgl { width: 36px; padding: 0; justify-content: center; }
  .tgl__label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 520px) {
  .frame { padding: 16px 14px 12px; }
  .facts__row { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 8px 0 9px; }
  .facts__k { padding-top: 0; }
  .fslot__card { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "org" "tag"; }
  .fslot .tag--solid { justify-self: start; margin-top: 4px; }
  .frame__slots { gap: 12px 8px; }
  .fslot__card { padding: 10px 9px 10px 11px; }
  .fslot__title { font-size: 1.05rem; }
  .fslot__org { font-size: .875rem; }
  .brand__sub { display: none; }
  .contact { gap: 12px 22px; }
  .seg__btn, .seg--radio label { font-size: .875rem; padding: 7px 10px; gap: 7px; }
}
@media (max-width: 420px) {
  .bar__in { gap: 10px 14px; }
  .brand { gap: 10px; }
  .brand__name { font-size: .875rem; letter-spacing: .06em; }
  .bar__tools { gap: 8px; }
}
@media (max-width: 359px) {
  .brand__text { display: none; }
  .frame__slots { grid-template-columns: minmax(0, 1fr); }
  .seg--radio { grid-template-columns: minmax(0, 1fr); }
  .slots { grid-template-columns: minmax(0, 1fr); }
  .slot { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "icon no" "icon tag" "icon label" "icon fig" "cta cta"; column-gap: 12px; }
  .bar__cta { padding-inline: 10px; }
  .frag__gallery { grid-template-columns: minmax(0, 1fr); }
  .frag__gallery img { height: auto; }
  .hero h1 { font-size: 3.1rem; }
  .closing__mail { font-size: 1.45rem; }
}
/* Landscape phones and short windows: nothing sticks, nothing scrolls inside the page */
@media (max-height: 500px) {
  .bar { position: static; }
  html { scroll-padding-top: 12px; }
  .loadout { position: relative; top: 0; max-height: none; overflow: visible; }
  .loadout::after { display: none; }
  .cfg { position: static; }
}

/* ---------- Print: light, linear, complete ---------- */
@media print {
  /* Print is always light, whatever the screen theme */
  :root:not([data-theme]), :root[data-theme="dark"], :root[data-theme="light"] {
    color-scheme: light;
    --bg: #fff; --panel: #fff; --raise: #fff;
    --line: #c9d1d3; --line-2: #b4bec1;
    --ink: #111; --ink-2: #2a2f31; --ink-3: #4a5356;
    --cyan: #0b5566; --gold: #7a4d00; --violet: #4b2d9c; --on-acc: #fff;
    --cyan-c: 11 85 102; --gold-c: 122 77 0; --violet-c: 75 45 156;
    --card-1: #fff; --card-2: #fff; --bay-1: #fff; --bay-2: #fff; --atlas-1: #fff; --atlas-2: #fff;
    --frame-1: #fff; --frame-2: #fff; --fslot-bg: #fff; --toc-bg: #fff; --inset-bg: #fff; --foot-bg: #fff;
    --fill: transparent; --fill-hi: transparent; --fill-lo: transparent;
    --tile-1: #fff; --tile-2: #fff; --tile-ink: #111; --tile-line: #111; --tile-glow: none;
    --a-cobalt: #2446a8; --a-violet: #5a3bb0; --a-amber: #7a4d00; --a-teal: #0d6b5f;
    --a-crimson: #a3182f; --a-orange: #9a4210; --a-sky: #0b5a8a; --a-magenta: #8f1f74; --a-green: #1e6b34;
  }
  @page { margin: 16mm 14mm; }
  body { background: #fff; color: #111; font-size: 10.5pt; line-height: 1.45; }
  a { color: #111; }
  .skip, .bar, .toc, .cfg, .bay__deck, .loadout::after, .frame__foot, .bay__note, .loadout, .showing, .records__expand, .records__also, .rec__match, .slot__cta, .slot__no, .rec__media, .photos, .rec__more summary, .foot__prov a { display: none !important; }
  .slots__cell { order: 0 !important; }
  .atlas .rec { display: block !important; }
  .rec__more > :not(summary) { display: block; }
  details::details-content { content-visibility: visible; display: contents; }
  .hero { grid-template-columns: 1fr; grid-template-rows: auto; grid-template-areas: "id" "frame" "text"; padding-top: 0; }
  .hero h1 { font-size: 30pt; }
  .frame { margin: 8pt 0 10pt; padding: 8pt 10pt; border-radius: 4px; }
  .frame__head { display: none; }
  .frame__title { font-size: 13pt; }
  .facts__row { grid-template-columns: 7.5rem minmax(0, 1fr); padding: 3pt 0; break-inside: avoid; }
  .facts__v { font-size: 10pt; }
  .frame__slots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fslot__card { display: block; padding: 4pt 6pt; break-inside: avoid; }
  .fslot__card > span { display: block; }
  .fslot .tag--solid { margin-top: 2pt; display: inline-block; }
  .frame, .bay, .atlas__panel, .dossier, .group, .com__card, .closing, .dossier__ev, .evbox, .slot, .fslot__card, .standard, .status, .frag__where, .frag__check { background: none !important; box-shadow: none !important; }
  .bay, .atlas__panel { border: 0; }
  .bay { grid-template-columns: 1fr; }
  .bay__slots { padding: 0; border: 0; }
  .bay__slots::before, .frame::before, body::before { display: none; }
  .slots { grid-template-columns: repeat(3, 1fr); gap: 6pt; }
  .slot { break-inside: avoid; padding: 6pt; transform: none !important; }
  .slot__tag, .tag--solid { background: none; color: var(--acc); border: 1px solid var(--acc); }
  .inspector { padding: 10pt 0 0; }
  .atlas__stage { display: block; }
  .atlas__stage::before { display: none; }
  .atlas__head, .records, .atlas__foot { padding-inline: 0; }
  .rec, .dossier, .group, .com__card, .cred, .certs li { break-inside: avoid; }
  .chip { display: inline; border: 0; padding: 0; min-height: 0; color: #111; white-space: normal; font-size: 9.5pt; }
  .chips--inline { display: inline !important; }
  .chips--inline .chip + .chip::before { content: "; "; }
  .evbox:not(.evbox--none), .atlas__head, #strengths .sect__lede, .inspector__k { display: none !important; }
  .records__title { font-size: 18pt; }
  .chip::after { content: " (" attr(data-url) ")"; font-size: 8.5pt; color: #444; overflow-wrap: anywhere; }
  .chip[aria-current="true"] { background: none; color: #111; }
  .chips { display: block; }
  .chips li { margin: 0 0 2pt; }
  .dossier__body { grid-template-columns: 1fr; }
  .groups, .com { grid-template-columns: 1fr 1fr; }
  .sect, .atlas { padding-top: 16pt; }
  .h2 { font-size: 18pt; padding-top: 8pt; break-after: avoid; }
  .foot { margin-top: 16pt; background: none; }
  .foot__in { grid-template-columns: 1fr 1fr; padding-block: 10pt; }
}

/* ---------- Configure bar (round 4): the whole view state in one sticky disclosure ----------
   One 48 px bar with the current settings and a copy-link button; the body drops down as an overlay
   with the three radio groups, the link and (phones, tablets) the section jump list. The bar sticks
   through the strengths and the atlas on desktop (.configured) and through the whole page below
   1080 px (.configured becomes display: contents). Without JavaScript the body is simply open. */
.configured { position: relative; }
.cfg { position: sticky; top: var(--bar-h); z-index: 25; margin-top: 26px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line-2); background: var(--bar-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.cfg__bar { display: flex; align-items: center; gap: 10px; min-height: var(--cfg-h); }
.cfg__btn { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; min-height: var(--cfg-h); margin: 0; padding: 4px 0; border: 0; background: none; color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.cfg__btn:hover .cfg__k { color: var(--ink); }
.cfg__k { flex: none; font: 700 .9375rem/1.2 var(--display); text-transform: uppercase; letter-spacing: .12em; color: var(--ink); }
.cfg__state { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 .75rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); }
.st, .showing span { display: none; }
.st__sep { margin: 0 8px 0 6px; color: var(--ink-3); }
.cfg__chev { flex: none; width: 9px; height: 9px; margin: -5px 4px 0 0; border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: rotate(45deg); }
.cfg[data-open="true"] .cfg__chev { transform: rotate(225deg); margin-top: 5px; }
.share__btn { flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 5px 12px; border: 1px solid var(--gold); border-radius: 6px; background: rgb(var(--gold-c) / .1); color: var(--gold); font: 700 .75rem/1.2 var(--display); text-transform: uppercase; letter-spacing: .1em; cursor: pointer; white-space: nowrap; }
.share__btn:hover { background: rgb(var(--gold-c) / .2); }
.share__btn svg { flex: none; }
.share__msg { flex: none; max-width: 40%; font: 600 .75rem/1.3 var(--mono); color: var(--cyan); text-align: right; }
.share__msg:empty { display: none; }
.cfg__body { position: absolute; left: 0; right: 0; top: 100%; z-index: 24; max-height: calc(100vh - var(--bar-h) - var(--cfg-h) - 12px); overflow: auto; overscroll-behavior: contain; border-bottom: 1px solid var(--line-2); background: var(--panel); box-shadow: 0 30px 60px -30px rgb(var(--shadow-c) / var(--shadow-a)); }
html[data-theme] .cfg:not([data-open="true"]) .cfg__body { display: none; }
.cfg__in { padding-top: 18px; padding-bottom: 20px; }
.console { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1.9fr); gap: 18px 28px; align-items: start; }
.ctl { margin: 0; padding: 0; border: 0; min-width: 0; }
.ctl > legend { float: left; width: 100%; }
.ctl > legend + * { clear: both; }
.ctl .seg { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.ctl .seg__btn, .ctl .seg--radio label { min-height: 40px; font-size: .9375rem; }
.ctl__note { margin: 8px 0 0; font-size: .9375rem; line-height: 1.4; color: var(--ink-3); }
.share { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.share__k { margin: 0 0 4px; font: 600 .8125rem/1.3 var(--display); text-transform: uppercase; letter-spacing: .16em; color: var(--cyan); }
.share__lede { margin: 0 0 8px; max-width: 80ch; color: var(--ink-2); font-size: 1rem; }
.share__url { display: inline-block; min-height: 24px; padding: 4px 10px; border: 1px dashed var(--line-2); border-radius: 6px; font: 500 .8125rem/1.5 var(--mono); color: var(--ink); overflow-wrap: anywhere; user-select: all; -webkit-user-select: all; text-decoration-color: var(--gold); }
.cfg__jump { display: none; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.cfg__jump ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cfg__jump a { display: inline-flex; align-items: center; min-height: 38px; padding: 6px 12px; border: 1px solid var(--line-2); border-radius: 7px; background: var(--fill); color: var(--ink-2); font: 600 .8125rem/1.2 var(--display); text-transform: uppercase; letter-spacing: .1em; text-decoration: none; }
.cfg__jump a:hover { color: var(--ink); border-color: var(--cyan); }
/* No JavaScript: the bar is a plain open panel at its place in the page; the copy button has no clipboard */
html:not([data-theme]) .cfg { position: static; }
html:not([data-theme]) .cfg__btn { pointer-events: none; }
html:not([data-theme]) .cfg__chev, html:not([data-theme]) .share__btn, html:not([data-theme]) .share__msg { display: none; }
html:not([data-theme]) .cfg__body { position: static; max-height: none; box-shadow: none; }

@media (max-width: 1080px) {
  .configured { display: contents; }
  .cfg__body { max-height: calc(100vh - var(--bar-h) - var(--cfg-h)); }
  .console { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .ctl .seg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cfg__jump { display: block; }
}
@media (max-width: 960px) {
  .cfg { top: 0; margin-top: 18px; }
  html { scroll-padding-top: calc(var(--cfg-h) + 12px); }
  .cfg__body { max-height: calc(100vh - var(--cfg-h)); }
}
@media (max-width: 600px) {
  .share__x { display: none; }
  .cfg__k { font-size: .875rem; }
}
@media (max-width: 420px) {
  .share__t { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .share__btn { width: 36px; padding: 0; justify-content: center; }
  .share__msg { display: none; }
  .cfg__bar { gap: 8px; }
}
@media (max-width: 359px) {
  .ctl .seg { grid-template-columns: minmax(0, 1fr); }
}