/*
 * @legions/atlas-kit — the atlas grammar's finish.
 *
 * STRUCTURE is the kit's: the parts in this package draw the same masthead,
 * band, cell and sheet on every surface. FINISH is the theme's and the
 * Look's: every colour below is read off the theme the host pushes, and every
 * radius, border, shadow, face and case off the Look. Under the Atlas Chrome
 * Look these resolve to the platform's own chrome (spaces-atlas/atlasKit.tsx
 * useAtlasTokens, base/GlassButton.tsx); under any other Look the same parts
 * take that Look's corners, borders, shadows and type.
 *
 * Where the values come from:
 *   --legions-*      every host theme token, mirrored by the tile SDK
 *                    (tile-sdk sdk.ts applyTheme); a stack without the SDK
 *                    (the preview shell, the sketch stack, a gallery) writes
 *                    the same names from tokens.ts atlasThemeCss().
 *   --radius …       the Look's structural tokens (shared-utils look/types.ts
 *                    LOOK_TOKEN_VARS), pushed verbatim by the same handshake.
 * The fallbacks are Chocolate and Vanilla — the platform's own two themes —
 * so a surface opened with no host still wears the chrome.
 */

/* ── 1. the tokens ─────────────────────────────────────────────────────── */

:root,
[data-theme='dark'] {
  /* the ladder: the page behind, the ground a surface sits on, a sheet (a cell, a card), a raised step (an empty tile, a face's ground).
     Each token reads the tile SDK's name first (a tile), the shell's own `--fc-*` name second (the client writes its ladder to the root
     under those — theme/cssVars.ts — so a shell surface drawn with the kit wears the organization's live theme), Chocolate third. */
  --ak-page: var(--legions-fluxer-primary, var(--fc-bg-primary, hsl(230 8% 6%)));
  --ak-ground: var(--legions-fluxer-secondary, var(--fc-bg-secondary, hsl(230 8% 10%)));
  --ak-sheet: var(--legions-fluxer-secondary-lighter, var(--fc-bg-secondary-lighter, hsl(230 8% 13%)));
  --ak-raised: var(--legions-fluxer-header, var(--fc-bg-channel-header, hsl(230 8% 20%)));
  /* inks */
  --ak-ink1: var(--legions-fluxer-text-primary, var(--fc-text-primary, hsl(230 20% 95%)));
  --ak-ink2: color-mix(in srgb, var(--legions-fluxer-text-secondary, var(--fc-text-secondary, hsl(230 12% 72%))) 70%, var(--legions-fluxer-text-tertiary, var(--fc-text-tertiary, hsl(230 10% 58%))));
  --ak-meta: var(--legions-fluxer-text-tertiary, var(--fc-text-tertiary, hsl(230 10% 58%)));
  /* the one accent, the one alarm */
  --ak-accent: var(--legions-accent, hsl(245 80% 62%));
  --ak-accent-on: var(--legions-accent-on-surface, hsl(245 80% 76%));
  --ak-accent-ink: var(--legions-accent-text, hsl(0 0% 100%));
  --ak-alarm: var(--legions-danger, #ec938d);
  /* the inks a plate is painted with (plate.tsx): the theme's own ground, surface, border and line */
  --ak-art-ground: var(--legions-bg-base, #09090b);
  --ak-art-surface: var(--legions-bg-surface, #18181b);
  --ak-art-border: var(--legions-border, #27272a);
  --ak-art-line: var(--legions-text-muted, #71717a);
  /* lines are drawn in light on a dark ground */
  --ak-line: 255 255 255;
  --ak-edge-a: var(--edge-strength, 0.08);
  --ak-hover: var(--legions-fluxer-mod-hover, var(--fc-mod-hover, rgb(255 255 255 / 0.05)));
  --ak-selected: var(--legions-fluxer-mod-selected, var(--fc-mod-selected, rgb(255 255 255 / 0.1)));
  /* the glass: a wash of light and a rim lit from above */
  --ak-wash: rgb(255 255 255 / 0.1);
  --ak-wash-hover: rgb(255 255 255 / 0.14);
  --ak-wash-pressed: rgb(255 255 255 / 0.07);
  --ak-wash-lit: rgb(255 255 255 / 0.15);
  --ak-wash-lit-hover: rgb(255 255 255 / 0.19);
  --ak-rim: linear-gradient(180deg, rgb(255 255 255 / 0.55) 0%, rgb(255 255 255 / 0.28) 50%, rgb(255 255 255 / 0) 100%);
  --ak-pill-lift: 0 0 0 0 transparent;
  /* strips */
  --ak-strip-on: hsl(220 13% 78%);
  --ak-strip-off: rgb(255 255 255 / 0.16);
  --ak-cell-lift: 0 0 0 0 transparent;
  --ak-frame-shadow: 0 40px 120px rgb(0 0 0 / 0.65), 0 0 0 1px rgb(255 255 255 / 0.06);
  --ak-sheet-shadow: -24px 0 60px rgb(0 0 0 / 0.45);
  /* native controls (a date field's picker) follow the mode of the surface they sit in */
  color-scheme: dark;
}

[data-theme='light'] {
  --ak-page: var(--legions-fluxer-primary, var(--fc-bg-primary, hsl(0 0% 100%)));
  --ak-ground: var(--legions-fluxer-secondary, var(--fc-bg-secondary, hsl(240 22% 97.5%)));
  --ak-sheet: var(--legions-fluxer-primary, var(--fc-bg-primary, hsl(0 0% 100%)));
  --ak-raised: var(--legions-fluxer-tertiary, var(--fc-bg-tertiary, hsl(240 16% 93%)));
  --ak-ink1: var(--legions-fluxer-text-primary, var(--fc-text-primary, hsl(240 8% 12%)));
  --ak-ink2: color-mix(in srgb, var(--legions-fluxer-text-primary, var(--fc-text-primary, hsl(240 8% 12%))) 40%, var(--legions-fluxer-text-secondary, var(--fc-text-secondary, hsl(240 4% 44%))));
  --ak-meta: var(--legions-fluxer-text-secondary, var(--fc-text-secondary, hsl(240 4% 44%)));
  --ak-accent: var(--legions-accent, hsl(211 100% 50%));
  --ak-accent-on: var(--legions-accent-on-surface, hsl(211 100% 40%));
  --ak-accent-ink: var(--legions-accent-text, hsl(0 0% 100%));
  --ak-alarm: var(--legions-danger, hsl(4 85% 43%));
  --ak-art-ground: var(--legions-bg-base, hsl(240 24% 99.5%));
  --ak-art-surface: var(--legions-bg-surface, hsl(240 22% 97.5%));
  --ak-art-border: var(--legions-border, hsl(240 14% 89%));
  --ak-art-line: var(--legions-text-muted, hsl(240 4% 56%));
  /* lines are drawn in ink on a light ground, a quarter stronger to read the same */
  --ak-line: 23 23 28;
  --ak-edge-a: calc(var(--edge-strength, 0.08) * 1.25);
  --ak-hover: var(--legions-fluxer-mod-hover, var(--fc-mod-hover, rgb(0 0 0 / 0.04)));
  --ak-selected: var(--legions-fluxer-mod-selected, var(--fc-mod-selected, rgb(0 0 0 / 0.08)));
  /* Vanilla's glass is DARKER than its ground: an ink wash, a dark ring, a whisper of lift */
  --ak-wash: rgb(0 0 0 / 0.06);
  --ak-wash-hover: rgb(0 0 0 / 0.09);
  --ak-wash-pressed: rgb(0 0 0 / 0.12);
  --ak-wash-lit: rgb(0 0 0 / 0.11);
  --ak-wash-lit-hover: rgb(0 0 0 / 0.14);
  --ak-rim: linear-gradient(180deg, rgb(0 0 0 / 0.18) 0%, rgb(0 0 0 / 0.11) 50%, rgb(0 0 0 / 0.06) 100%);
  --ak-pill-lift: 0 1px 2px rgb(0 0 0 / 0.06);
  --ak-strip-on: hsl(240 6% 34%);
  --ak-strip-off: rgb(23 23 28 / 0.14);
  --ak-cell-lift: 0 1px 2px rgb(0 0 0 / 0.05);
  --ak-frame-shadow: 0 40px 120px rgb(20 22 40 / 0.22), 0 0 0 1px rgb(23 23 28 / 0.08);
  --ak-sheet-shadow: -24px 0 60px rgb(20 22 40 / 0.14);
  color-scheme: light;
}

:root,
[data-theme='dark'],
[data-theme='light'] {
  /* lines, from the ink of the mode and the Look's edge strength */
  --ak-edge-color: rgb(var(--ak-line) / var(--ak-edge-a));
  --ak-hair: rgb(var(--ak-line) / calc(var(--ak-edge-a) * 0.875));
  --ak-field: rgb(var(--ak-line) / max(0.18, var(--ak-edge-a)));
  --ak-bw: var(--border-width, 1px);
  --ak-edge: inset 0 0 0 var(--ak-bw) var(--ak-edge-color);
  /* the Look's shadow lifts a cell; the chrome's own is the mode's whisper */
  --ak-lift: var(--shadow-sm, var(--ak-cell-lift));
  /* a pill wears the glass rim (1) or, in a Look that draws its borders in ink, an edge (0) */
  --ak-rim-a: var(--rim-strength, 1);
  --ak-pill-edge: inset 0 0 0 var(--ak-bw) rgb(var(--ak-line) / calc((1 - var(--ak-rim-a)) * max(0.18, var(--ak-edge-a))));
  /* corners: the cell is the Look's radius; the rest keep the chrome's proportions (18 · 14 · 12 · 10 · 20) */
  --ak-r: var(--radius, 18px);
  --ak-r-sheet: calc(var(--ak-r) * 0.78);
  --ak-r-tile: calc(var(--ak-r) * 0.67);
  --ak-r-field: calc(var(--ak-r) * 0.6);
  --ak-r-frame: calc(var(--ak-r) * 1.11);
  --ak-r-pill: var(--radius-full, 9999px);
  /* faces */
  --ak-font: var(--font-body, 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif);
  --ak-display: var(--font-display, 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif);
  --ak-mono: var(--font-mono, 'JetBrains Mono', ui-monospace, Menlo, monospace);
  --ak-display-weight: var(--weight-display, 700);
  --ak-case: var(--heading-transform, none);
  --ak-dur: var(--motion-duration, 120ms);
  --ak-ease: var(--ease, ease-out);
}

/* ── 2. the root and the words ─────────────────────────────────────────── */

.ak { font-family: var(--ak-font); color: var(--ak-ink1); -webkit-font-smoothing: antialiased; box-sizing: border-box; }
.ak *, .ak *::before, .ak *::after { box-sizing: border-box; }

.ak-ink { color: var(--ak-ink1); }
.ak-ink2 { color: var(--ak-ink2); }
.ak-meta { color: var(--ak-meta); }
.ak-alarm { color: var(--ak-alarm); }
.ak-accent { color: var(--ak-accent-on); }
.ak-mono { font-family: var(--ak-mono); font-variant-numeric: tabular-nums; }
.ak-ell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ak-clamp2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
/* the section label: a band's name, a block's name */
.ak-label { font-size: 11.5px; font-weight: 700; letter-spacing: 0.9px; text-transform: uppercase; color: var(--ak-meta); white-space: nowrap; }
/* the eyebrow: a mono label over a figure, a field of a detail grid */
.ak-eyebrow { font-family: var(--ak-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: var(--ak-meta); font-variant-numeric: tabular-nums; }
.ak-hairline { border-color: var(--ak-hair); }
.ak-title { margin: 0; font-family: var(--ak-display); font-weight: var(--ak-display-weight); text-transform: var(--ak-case); color: var(--ak-ink1); }
.ak-word { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; white-space: nowrap; flex-shrink: 0; }
.ak-word.is-strong { font-weight: 600; }

/* ── 3. the glass: pills, chips, fields ────────────────────────────────── */

.ak-pill {
  position: relative; border: none; margin: 0; font: inherit; font-family: var(--ak-font);
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; flex-shrink: 0;
  white-space: nowrap; user-select: none; cursor: pointer; text-decoration: none;
  font-size: 13px; font-weight: 600; line-height: 1;
  color: var(--ak-ink1); background: var(--ak-wash); border-radius: var(--ak-r-pill);
  box-shadow: var(--ak-pill-edge), var(--ak-pill-lift);
  transition: background-color var(--ak-dur) var(--ak-ease);
}
.ak-pill::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--ak-rim);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none; opacity: var(--ak-rim-a);
}
.ak-pill:hover { background: var(--ak-wash-hover); }
.ak-pill:active { background: var(--ak-wash-pressed); }
.ak-pill.is-lit { background: var(--ak-wash-lit); }
.ak-pill.is-lit:hover { background: var(--ak-wash-lit-hover); }
.ak-pill.is-chip { font-size: 12.5px; font-weight: 500; gap: 6px; color: var(--ak-ink2); }
.ak-pill.is-chip.is-lit { font-weight: 600; color: var(--ak-ink1); }
/* the ONE primary verb: the accent as a tint and an edge, never a slab */
.ak-pill.is-primary { color: var(--ak-accent-on); background: color-mix(in srgb, var(--ak-accent) 20%, transparent); box-shadow: inset 0 0 0 var(--ak-bw) color-mix(in srgb, var(--ak-accent) 45%, transparent), var(--ak-pill-lift); }
.ak-pill.is-primary:hover { background: color-mix(in srgb, var(--ak-accent) 26%, transparent); }
.ak-pill.is-primary:active { background: color-mix(in srgb, var(--ak-accent) 17%, transparent); }
/* a verb that takes something away */
.ak-pill.is-danger { color: var(--ak-alarm); background: color-mix(in srgb, var(--ak-alarm) 12%, transparent); box-shadow: inset 0 0 0 var(--ak-bw) color-mix(in srgb, var(--ak-alarm) 36%, transparent), var(--ak-pill-lift); }
.ak-pill.is-danger:hover { background: color-mix(in srgb, var(--ak-alarm) 18%, transparent); }
.ak-pill.is-danger:active { background: color-mix(in srgb, var(--ak-alarm) 10%, transparent); }
/* on art: white glass and white ink in both modes */
.ak-pill.is-onart { color: #fff; background: rgb(255 255 255 / 0.14); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.34), inset 0 0 0 1px rgb(255 255 255 / 0.12); }
.ak-pill.is-onart::before { display: none; }
/* A glyph inside a kit part wears the part's ink. The shell's Phosphor icons arrive with fill="#000" on the svg
   (their context's default), which read black on Chocolate inside an accent pill and the strip's All mark
   (Paul, 2026-10-06); the CSS fill beats the attribute, and currentColor is the part's own colour. */
.ak-pill > svg, .ak-mark > svg, .ak-activity-glyph > svg, .ak-callout > span > svg, .ak-tag > svg, .ak-keycap svg { fill: currentColor; }
/* The state word's alarm mark and the Right-now card's check or alarm mark wear their word's ink too: in the shell
   they painted black beside red text — black on black in dark mode (Paul, 2026-10-29: "there's black icons in
   several places"). The round check's tick likewise. */
.ak-word > svg, .ak-now-glyph, .ak-check > svg { fill: currentColor; }
/* A glyph in the floor's panels and cards follows its part's colour too (2026-10-15; Paul, in dark mode: "a dark icon … these all need to follow light and dark mode" — the shell's icon context pins every icon's fill to one ink, and only a rule like this one lets the part's colour win). */
.ak-glyph-box > svg, .ak-floor-explorer svg, .ak-floor-inspector svg, .ak-hud svg, .ak-floor-canvas-field svg, .ak-floor-canvas-x svg { fill: currentColor; }
/* A glyph a field leads with (the glass, a link) is a hint, in the placeholder's ink. In the shell its fill arrived as
   the icon context's black — the Record reader's "Find in the record" glass, black on the dark ground (2026-10-20). */
.ak-field > svg { fill: currentColor; color: var(--ak-meta); flex-shrink: 0; }
.ak-pill.is-onart:hover { background: rgb(255 255 255 / 0.19); }
.ak-pill.is-onart.is-lit { background: rgb(255 255 255 / 0.24); }
.ak-pill:disabled, .ak-pill.is-disabled { opacity: 0.42; cursor: default; pointer-events: none; }
.ak-pill .ak-count { opacity: 0.62; font-weight: 500; }

.ak-field {
  display: flex; align-items: center; gap: 10px; min-width: 0; height: 36px; padding: 0 12px;
  border-radius: var(--ak-r-field); border: var(--ak-bw) solid var(--ak-field); background: transparent;
  font-size: 13.5px; color: var(--ak-ink1); transition: border-color var(--ak-dur) var(--ak-ease), box-shadow var(--ak-dur) var(--ak-ease);
}
.ak-field input { flex: 1 1 0; min-width: 0; border: none; outline: none; background: transparent; font: inherit; color: inherit; padding: 0; }
.ak-field input::placeholder { color: var(--ak-meta); }
.ak-field:focus-within { border-color: var(--ak-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ak-accent) 26%, transparent); }
.ak-field.is-alarm { border-color: var(--ak-alarm); }
/* a bare control — an <input>, a <textarea>, a <select> — in the field's finish */
.ak-input {
  height: 36px; padding: 0 12px; min-width: 0; border-radius: var(--ak-r-field); border: var(--ak-bw) solid var(--ak-field); background: transparent;
  font: inherit; font-size: 13.5px; color: var(--ak-ink1); outline: none; transition: border-color var(--ak-dur) var(--ak-ease), box-shadow var(--ak-dur) var(--ak-ease);
}
textarea.ak-input { height: auto; padding: 8px 12px; line-height: 1.45; }
.ak-input::placeholder { color: var(--ak-meta); }
.ak-input:focus-visible { border-color: var(--ak-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ak-accent) 26%, transparent); }
.ak-input:disabled { opacity: 0.5; cursor: not-allowed; }
.ak-input.is-alarm { border-color: var(--ak-alarm); }
/* a door — a row, a cell, a slot or a tile that opens something — shows where the keyboard is */
.ak-row.is-door:focus-visible, .ak-cell.is-door:focus-visible, .ak-slot.is-door:focus-visible, .ak-activity.is-door:focus-visible, .ak-vital-tile.is-door:focus-visible { outline: 2px solid var(--ak-accent); outline-offset: 2px; }

/* ── 4. marks, faces, plates ───────────────────────────────────────────── */

.ak-mark { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; background: var(--ak-raised); color: var(--ak-ink2); font-weight: 700; }
.ak-mark.is-glass { background: var(--ak-wash); color: var(--ak-ink1); position: relative; }
.ak-mark.is-glass { box-shadow: var(--ak-pill-edge), var(--ak-pill-lift); }
.ak-mark.is-glass::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--ak-rim); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; opacity: var(--ak-rim-a); }
/* a thing nobody holds: its initials on the accent, lit from above */
.ak-orgmark { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--ak-ink1); font-weight: 700; letter-spacing: 0.2px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--ak-mark-accent, var(--ak-accent)) 58%, var(--ak-ground)), color-mix(in srgb, var(--ak-mark-accent, var(--ak-accent)) 30%, var(--ak-ground)));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.28); }
.ak-orgmark.is-ring { box-shadow: 0 0 0 2px var(--ak-ground), 0 0 0 4px var(--ak-ink1); }
.ak-face { display: block; flex-shrink: 0; object-fit: cover; background: var(--ak-raised); }
.ak-face.is-initials { display: inline-flex; align-items: center; justify-content: center; color: var(--ak-ink2); font-weight: 700; overflow: hidden; }
.ak-face.is-quiet { filter: grayscale(0.85); opacity: 0.72; }
.ak-seat { display: inline-flex; flex-shrink: 0; border: 1.5px dashed var(--ak-field); }
.ak-check { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 0; margin: 0; cursor: pointer; border-radius: var(--ak-r-pill); background: transparent; color: var(--ak-accent-ink); border: 1.5px solid var(--ak-meta); transition: border-color var(--ak-dur) var(--ak-ease), background-color var(--ak-dur) var(--ak-ease); }
.ak-check:hover { border-color: var(--ak-accent); }
.ak-check.is-on { background: var(--ak-accent); border-color: var(--ak-accent); }
.ak-figure { display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; background: var(--ak-raised); box-shadow: var(--ak-edge); }
.ak-plate { position: relative; overflow: hidden; flex-shrink: 0; background: var(--ak-raised); color: var(--ak-accent); }
.ak-plate > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ak-plate.is-quiet > svg { filter: grayscale(0.85) brightness(0.72); }

/* ── 5. strips and meters ──────────────────────────────────────────────── */

.ak-strip { display: flex; align-items: center; min-width: 0; width: 100%; }
.ak-seg { flex: 1 1 0; min-width: 5px; max-width: 30px; box-sizing: border-box; border-radius: var(--ak-r-pill); }
.ak-seg.is-on { background: var(--ak-strip-on); }
.ak-seg.is-alarm { background: var(--ak-alarm); }
/* work in flight DRIFTS: the stripes move one period every 1.4 s (the website's `.mk`, 2026-10-01) — the kit's one motion; still under reduced motion */
.ak-seg.is-busy { position: relative; overflow: hidden; background: color-mix(in srgb, var(--ak-accent) 40%, transparent); }
.ak-seg.is-busy::before { content: ''; position: absolute; top: 0; bottom: 0; left: -24px; right: -24px; background: repeating-linear-gradient(135deg, var(--ak-accent) 0 4px, transparent 4px 8px); animation: ak-drift 1.4s linear infinite; }
@keyframes ak-drift { to { transform: translateX(11.314px); } }
.ak-seg.is-off { border: 1.5px solid var(--ak-strip-off); }
.ak-meter { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; background: var(--ak-selected); border-radius: var(--ak-r-pill); }
.ak-meter > span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; background: var(--ak-accent); }
.ak-meter.is-alarm > span { background: var(--ak-alarm); }

/* ── 6. the five parts ─────────────────────────────────────────────────── */

/* the frame: a surface's own ground when it stands alone (a modal, a mock-up); a tile's content region has the tile for a frame */
.ak-frame { position: relative; display: flex; flex-direction: column; overflow: hidden; background: var(--ak-ground); border-radius: var(--ak-r-frame); box-shadow: var(--ak-frame-shadow); }

/* what the surface has to say right now: it floats over the frame's foot and moves nothing */
.ak-notice { position: absolute; z-index: 4; display: flex; justify-content: center; pointer-events: none; }
.ak-notice-card { pointer-events: auto; width: 100%; max-width: 720px; background: var(--ak-sheet); border-radius: var(--ak-r-sheet); box-shadow: 0 12px 32px rgb(0 0 0 / 0.32); }
.ak-body { display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; min-width: 0; overflow-y: auto; scrollbar-width: thin; }
/* a stale surface: the last good view, dimmed under its notice — never read as current */
.ak-body.is-dim { opacity: 0.55; }
.ak-stale { display: flex; align-items: center; gap: 8px; flex-shrink: 0; min-width: 0; padding: 8px 12px; border-radius: var(--ak-r-sheet); color: var(--ak-alarm); background: color-mix(in srgb, var(--ak-alarm) 10%, transparent); box-shadow: inset 0 0 0 var(--ak-bw) color-mix(in srgb, var(--ak-alarm) 30%, transparent); font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.ak-stale > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ak-masthead { display: flex; align-items: center; flex-shrink: 0; min-width: 0; }
.ak-masthead-title { font-size: 30px; line-height: 1.1; letter-spacing: -0.6px; }
/* An idiom's glyph over an empty sentence — the kit draws the string the view carries and knows nothing of it. */
.ak-empty-glyph { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex-shrink: 0; }
.ak-masthead.is-compact .ak-masthead-title { font-size: 20px; letter-spacing: -0.4px; }

.ak-markstrip { display: flex; align-items: flex-start; gap: 6px; flex-shrink: 0; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.ak-markstrip::-webkit-scrollbar { display: none; }
.ak-markstrip-item { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 86px; flex-shrink: 0; border: none; background: transparent; font: inherit; font-family: var(--ak-font); cursor: pointer; padding: 4px 0; color: var(--ak-ink2); }
.ak-markstrip-item.is-on { color: var(--ak-ink1); }
.ak-markstrip-name { font-size: 11.5px; font-weight: 500; line-height: 1.25; text-align: center; max-width: 100%; }
.ak-markstrip-item.is-on .ak-markstrip-name { font-weight: 600; }

.ak-band { display: flex; flex-direction: column; min-width: 0; flex-shrink: 0; }
.ak-band-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ak-band-rule { flex: 1 1 0; min-width: 12px; height: 1px; margin-left: 6px; background: var(--ak-hair); }
.ak-band-name { font-size: 17px; font-weight: 600; letter-spacing: -0.1px; color: var(--ak-ink1); font-family: var(--ak-display); text-transform: var(--ak-case); }
.ak-band-facts { font-size: 12.5px; color: var(--ak-meta); }

/* the cell: one thing — its art or its face, its name, one state, a strip, the facts, its verbs */
.ak-cell { position: relative; display: flex; min-width: 0; overflow: hidden; background: var(--ak-sheet); border-radius: var(--ak-r); box-shadow: var(--ak-edge), var(--ak-lift); transition: background-color var(--ak-dur) var(--ak-ease); }
.ak-cell.is-door { cursor: pointer; }
.ak-cell.is-door:hover { background: color-mix(in srgb, var(--ak-sheet) 86%, var(--ak-raised)); }
.ak-cell.is-ring { box-shadow: 0 0 0 2px var(--ak-ground), 0 0 0 4px var(--ak-accent); }
.ak-cell-art { position: relative; flex-shrink: 0; overflow: hidden; background: var(--ak-raised); }
.ak-cell-body { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; }
.ak-cell-title { font-size: 16px; font-weight: 600; letter-spacing: -0.1px; color: var(--ak-ink1); }
.ak-cell-sub { font-size: 13px; color: var(--ak-ink2); }
.ak-cell-facts { font-size: 12.5px; color: var(--ak-meta); }
/* the slot: a cell with no art — a day, a seat, a part — on a shelf; hollow when it holds nothing, ringed when it is the one */
.ak-slot { display: flex; flex-direction: column; min-width: 0; background: var(--ak-sheet); border-radius: var(--ak-r-sheet); box-shadow: var(--ak-edge), var(--ak-lift); }
.ak-slot.is-hollow { background: transparent; box-shadow: none; border: 1.5px dashed var(--ak-field); }
.ak-slot.is-ring { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ak-accent) 55%, transparent), var(--ak-lift); }
.ak-slot.is-door { cursor: pointer; }
.ak-slot.is-door:hover { background: color-mix(in srgb, var(--ak-sheet) 86%, var(--ak-raised)); }
.ak-slot-line { font-size: 13px; font-weight: 500; line-height: 1.3; color: var(--ak-ink1); overflow-wrap: break-word; }
.ak-shelf { display: grid; gap: 12px; min-width: 0; }

/* the Right-now card: the mark, the ONE sentence, the line, the strip, the vitals */
.ak-now { display: flex; align-items: center; flex-wrap: wrap; row-gap: 14px; flex-shrink: 0; min-width: 0; background: var(--ak-sheet); border-radius: var(--ak-r); box-shadow: var(--ak-edge), var(--ak-lift); }
.ak-now-sentence { font-size: 17px; font-weight: 600; letter-spacing: -0.1px; line-height: 1.35; color: var(--ak-ink1); }
.ak-now.is-compact .ak-now-sentence { font-size: 14px; }
.ak-now-line { font-size: 13px; line-height: 1.5; color: var(--ak-ink2); }

/* numbers */
.ak-vital-tile { display: flex; align-items: flex-end; gap: 8px; min-width: 0; padding: 10px 12px; background: var(--ak-hover); border-radius: var(--ak-r-tile); }
.ak-now-vitals { display: grid; grid-auto-flow: column; gap: 10px; flex-shrink: 0; align-self: center; }
/* THE PHONE: the vitals two by two under the words (HQ's phone card folds its four the same way), never a row cut at the screen's edge (2026-10-19). */
@media (max-width: 640px) {
  .ak-now-vitals { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-columns: auto !important; flex: 1 1 100%; align-self: stretch; }
}
.ak-vital-tile.is-door { cursor: pointer; }
.ak-vital-tile-value { font-family: var(--ak-mono); font-size: 17px; font-weight: 600; color: var(--ak-ink1); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ak-vital-tile-label { font-size: 11.5px; color: var(--ak-meta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ak-stat-tile { display: flex; flex-direction: column; justify-content: space-between; flex-shrink: 0; padding: 18px 18px 16px; background: var(--ak-raised); border-radius: calc(var(--ak-r) * 0.89); box-shadow: var(--ak-edge); }
.ak-wall { display: flex; gap: 12px; flex-shrink: 0; min-width: 0; }
.ak-chart-tile { flex: 1 1 0; min-width: 0; padding: 14px 18px 12px; justify-content: flex-start; gap: 6px; }
.ak-stat-value { font-size: 28px; font-weight: 700; letter-spacing: -0.6px; line-height: 1.05; color: var(--ak-ink1); white-space: nowrap; font-variant-numeric: tabular-nums; font-family: var(--ak-display); }
.ak-vital-value { font-size: 22px; font-weight: 700; letter-spacing: -0.4px; color: var(--ak-ink1); white-space: nowrap; font-variant-numeric: tabular-nums; font-family: var(--ak-display); }

/* the sheet: the ground a band's rows sit on, and one thing at full height */
.ak-sheet { background: var(--ak-sheet); border-radius: var(--ak-r-sheet); box-shadow: var(--ak-edge), var(--ak-lift); padding: 4px 16px; min-width: 0; }
/* A band's rows are COLUMNS (2026-10-29): the list is one grid of seven tracks — lead · words · strip · state · when · meta ·
   verbs — and every row a subgrid on them, so a state, a time or a verb sits at the same x on every row of the band, a row
   without one leaves its track empty, and the words (minmax 0) truncate instead of pushing the tail to the edge. The
   gutter rides the cell that holds something; an empty cell is nothing. (Paul, the CEM Desk's ledger: "it's just a flex
   layout that pushes everything to the right… I like fixed column widths, I like protections.") */
.ak-rows { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto auto auto; column-gap: 0; align-content: start; min-height: 0; }
/* a row keeps its own height inside a list that scrolls — it never shrinks under its neighbours */
.ak-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto auto auto; align-items: center; min-width: 0; min-height: 52px; padding: 6px 0; border-top: 1px solid var(--ak-hair); }
/* inside a list the row's tracks are the list's, so every row of the band shares them; a row drawn alone keeps its own seven */
.ak-rows > .ak-row { grid-template-columns: subgrid; grid-column: 1 / -1; }
.ak-row:first-child { border-top: none; }
.ak-row > * { min-width: 0; }
.ak-row-lead:not(:empty), .ak-row-strip:not(:empty), .ak-row-state:not(:empty), .ak-row-when:not(:empty), .ak-row-meta:not(:empty), .ak-row-verbs:not(:empty) { padding-left: 12px; }
.ak-row-lead:not(:empty) + .ak-row-words { padding-left: 12px; }
/* the protections: a state, a time, a meta can only be so wide — the words keep their room */
.ak-row-state { max-width: 24ch; }
.ak-row-state > * { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ak-row-when { max-width: 12ch; overflow: hidden; text-overflow: ellipsis; }
.ak-row-meta { max-width: 28ch; overflow: hidden; text-overflow: ellipsis; }
.ak-row.is-two { display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 8px 0; min-height: 0; }
.ak-row.is-door { cursor: pointer; margin: 0 -10px; padding-left: 10px; padding-right: 10px; border-radius: var(--ak-r-field); }
.ak-row.is-door:hover, .ak-row.is-on { background: var(--ak-hover); }
.ak-row-line { font-size: 13.5px; font-weight: 600; color: var(--ak-ink1); }
.ak-row-sub { font-size: 12px; color: var(--ak-ink2); }
.ak-row-code, .ak-row-when, .ak-row-meta { font-family: var(--ak-mono); font-size: 11.5px; color: var(--ak-meta); font-variant-numeric: tabular-nums; flex-shrink: 0; white-space: nowrap; }
.ak-row-verbs { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-shrink: 0; }
.ak-row.is-quiet-verbs .ak-row-verbs { opacity: 0; transition: opacity var(--ak-dur) var(--ak-ease); }
.ak-row.is-quiet-verbs:hover .ak-row-verbs, .ak-row.is-quiet-verbs:focus-within .ak-row-verbs { opacity: 1; }
/* A row at a phone's width (2026-10-19): the facts and the verbs wrap under the line instead of pushing past the edge;
   the facts may shrink and break, the verbs keep their size and take the next line. The columns are the desktop's. */
@media (max-width: 767px) {
  .ak-rows { display: flex; flex-direction: column; }
  .ak-row { display: flex; flex-wrap: wrap; gap: 12px; row-gap: 6px; }
  .ak-row > :empty { display: none; }
  .ak-row-lead:not(:empty), .ak-row-strip:not(:empty), .ak-row-state:not(:empty), .ak-row-when:not(:empty), .ak-row-meta:not(:empty), .ak-row-verbs:not(:empty), .ak-row-lead:not(:empty) + .ak-row-words { padding-left: 0; }
  /* A row's words WRAP on a narrow screen rather than ellipsize or run past it (a ledger row's name ran 2,000 wide at 390 — Paul, 2026-10-19: "the text doesn't wrap, it goes off screen"); nothing in a row outgrows the row. */
  .ak-row > * { min-width: 0; max-width: 100%; }
  .ak-row .ak-row-line, .ak-row .ak-row-sub { white-space: normal; overflow: visible; text-overflow: clip; }
  .ak-row-meta, .ak-row-when, .ak-row-code { white-space: normal; flex-shrink: 1; min-width: 0; }
  .ak-bead { flex-wrap: wrap; row-gap: 6px; }
  .ak-rank { flex-wrap: wrap; height: auto; min-height: 46px; padding: 8px 0; row-gap: 4px; }
  .ak-band-head { flex-wrap: wrap; row-gap: 6px; }
}
.ak-kv { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; min-width: 0; font-size: 13px; padding: 7px 0; border-bottom: 1px solid var(--ak-hair); }
.ak-kv:last-child { border-bottom: none; }
.ak-kv-k { color: var(--ak-meta); white-space: nowrap; }
.ak-kv-v { color: var(--ak-ink1); font-weight: 500; text-align: right; }
/* Facts whose values are sentences: the label in its own column at the left, the value wrapping beside it, read
   left to right — a value pushed to the right edge and cut with an ellipsis read "offset and janky" (Paul, 2026-10-29). */
.ak-kv.is-wrap { justify-content: flex-start; align-items: flex-start; padding: 8px 0; }
.ak-kv.is-wrap .ak-kv-k { flex-shrink: 0; padding-top: 1px; }
.ak-kv.is-wrap .ak-kv-v { flex: 1 1 0; min-width: 0; text-align: left; font-weight: 400; line-height: 1.5; overflow-wrap: anywhere; }
.ak-side { position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--ak-sheet); box-shadow: var(--ak-sheet-shadow), -1px 0 0 var(--ak-hair); }
.ak-side-band { position: relative; flex-shrink: 0; overflow: hidden; background: var(--ak-raised); }
.ak-side-body { padding: 20px 28px 28px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ak-side-foot { flex-shrink: 0; display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 14px 28px; border-top: 1px solid var(--ak-hair); }
/* THE PHONE: a sheet fills the screen — its body keeps a 16 gutter and its verbs wrap rather than run off the left (2026-10-19). */
@media (max-width: 640px) {
  .ak-side-body { padding: 16px 16px 24px; }
  .ak-side-foot { flex-wrap: wrap; justify-content: flex-start; row-gap: 8px; padding: 12px 16px; }
}
/* a plate follows the mode, so the name on it is set in ink over a fade into the sheet; a picture is dark in both modes and takes white */
.ak-side-fade { position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in srgb, var(--ak-sheet) 94%, transparent) 0%, color-mix(in srgb, var(--ak-sheet) 58%, transparent) 44%, transparent 76%); }
.ak-side-fade.is-onart { background: linear-gradient(to top, rgb(9 9 11 / 0.88) 0%, rgb(9 9 11 / 0.5) 38%, rgb(9 9 11 / 0) 70%); }

/* what happened: the five-slot row */
.ak-activity { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-top: 1px solid var(--ak-hair); min-width: 0; flex-shrink: 0; }
.ak-activity:first-child { border-top: none; }
.ak-activity.is-door { cursor: pointer; }
.ak-activity-glyph { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; line-height: 1; color: var(--ak-accent-on); background: color-mix(in srgb, var(--ak-accent) 11%, transparent); }

/* a note that matters */
.ak-callout { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--ak-r-sheet); background: color-mix(in srgb, var(--ak-accent) 12%, transparent); box-shadow: inset 0 0 0 var(--ak-bw) color-mix(in srgb, var(--ak-accent) 34%, transparent); }
.ak-callout.is-alarm { background: color-mix(in srgb, var(--ak-alarm) 11%, transparent); box-shadow: inset 0 0 0 var(--ak-bw) color-mix(in srgb, var(--ak-alarm) 34%, transparent); }
.ak-tag { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px; border-radius: var(--ak-r-pill); flex-shrink: 0; white-space: nowrap; font-size: 11.5px; font-weight: 600; color: var(--ak-accent-on); background: color-mix(in srgb, var(--ak-accent) 18%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ak-accent) 42%, transparent); }
.ak-tag.is-alarm { color: var(--ak-alarm); background: color-mix(in srgb, var(--ak-alarm) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ak-alarm) 36%, transparent); }

/* ── 7. the forms beyond the five (2026-10-03, the Atlas Palette) ─────────
   The shape a whole surface takes when it answers another question. Every
   colour below is one of the tokens above; no form adds a hue. The parts are
   forms.tsx and controls.tsx. ──────────────────────────────────────────── */

/* the dot ground: the console's floor and the Flows canvas, as a plane things stand on — `--ak-dots-size` is the spacing (the console's own floor is 24) */
.ak-dots { background-color: var(--ak-raised); background-image: radial-gradient(rgb(var(--ak-line) / calc(var(--ak-edge-a) * 2.4)) 0.9px, transparent 1.1px); background-size: var(--ak-dots-size, 16px) var(--ak-dots-size, 16px); }

/* BOARD: lanes of cards */
.ak-lanes { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 12px; min-width: 0; flex: 1 1 0; min-height: 0; }
.ak-lane { display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 0; }
.ak-lane-head { display: flex; align-items: center; gap: 8px; height: 28px; min-width: 0; flex-shrink: 0; padding: 0 2px; }
.ak-lane-body { display: flex; flex-direction: column; gap: 8px; flex: 1 1 0; min-height: 0; padding: 8px; border-radius: var(--ak-r-sheet); background: var(--ak-hover); }
.ak-lane-body.is-hollow { background: transparent; border: 1.5px dashed var(--ak-field); }
.ak-lane-body.is-over { background: var(--ak-selected); }
.ak-card { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 10px 12px; background: var(--ak-sheet); border-radius: var(--ak-r-sheet); box-shadow: var(--ak-edge), var(--ak-lift); flex-shrink: 0; }
.ak-card.is-door { cursor: pointer; }
.ak-card.is-door:hover { background: color-mix(in srgb, var(--ak-sheet) 86%, var(--ak-raised)); }
.ak-card.is-ring { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ak-accent) 55%, transparent), var(--ak-lift); }
.ak-card.is-alarm { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ak-alarm) 55%, transparent), var(--ak-lift); }
.ak-card.is-quiet { opacity: 0.6; }
.ak-card.is-door:focus-visible { outline: 2px solid var(--ak-accent); outline-offset: 2px; }
.ak-card-title { font-size: 13.5px; font-weight: 600; line-height: 1.3; color: var(--ak-ink1); }
.ak-card-foot { display: flex; align-items: center; gap: 8px; min-width: 0; }

/* SCHEDULE: holders × time */
/* 16px above the hour row is the now-label's own line, so "12:53" never sits on the hour it is nearest. */
.ak-timegrid { position: relative; display: grid; row-gap: 10px; flex: 1 1 0; min-height: 0; min-width: 0; padding-top: 16px; padding-bottom: 4px; }
.ak-hour { align-self: end; border-left: 1px solid var(--ak-hair); padding-left: 6px; line-height: 18px; }
.ak-lane-row { position: relative; display: grid; min-height: 0; min-width: 0; row-gap: 6px; border-radius: var(--ak-r-sheet); }
.ak-lane-row.is-over { background: var(--ak-hover); }
.ak-hourline { border-left: 1px solid var(--ak-hair); grid-row: 1 / -1; }
.ak-block { display: flex; flex-direction: column; gap: 2px; min-width: 0; min-height: 0; margin: 0 4px; padding: 8px 12px; background: var(--ak-sheet); border-radius: var(--ak-r-sheet); box-shadow: var(--ak-edge), var(--ak-lift); overflow: hidden; z-index: 1; }
.ak-block.is-door { cursor: pointer; }
.ak-block.is-door:focus-visible { outline: 2px solid var(--ak-accent); outline-offset: 2px; }
.ak-block.is-ring { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ak-accent) 55%, transparent), var(--ak-lift); }
.ak-block.is-alarm { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ak-alarm) 55%, transparent), var(--ak-lift); }
.ak-block.is-quiet { opacity: 0.55; }
.ak-nowline { position: absolute; top: 0; bottom: 4px; width: 2px; background: var(--ak-accent); z-index: 3; pointer-events: none; }
.ak-nowline > span { position: absolute; top: 0; left: 4px; padding: 0 4px; background: var(--ak-ground); color: var(--ak-accent-on); white-space: nowrap; line-height: 14px; }

/* MONTH: a grid of day slots */
.ak-weekdays { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.ak-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 8px; flex: 1 1 0; min-height: 0; }
.ak-month > .ak-slot { min-height: 0; padding: 8px 10px; gap: 6px; }
.ak-slot.is-out { opacity: 0.42; }

/* RAIL: beads on a line */
.ak-rail { position: relative; display: flex; flex-direction: column; padding-left: 30px; min-width: 0; }
.ak-rail::before { content: ''; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 1px; background: var(--ak-hair); }
.ak-bead { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; min-width: 0; }
.ak-bead.is-door { cursor: pointer; }
.ak-bead-dot { position: absolute; left: -24px; top: 15px; width: 11px; height: 11px; border-radius: 11px; background: var(--ak-strip-on); box-shadow: 0 0 0 3px var(--ak-ground); }
.ak-bead-dot.is-now { background: var(--ak-accent); box-shadow: 0 0 0 3px var(--ak-ground), 0 0 0 5px color-mix(in srgb, var(--ak-accent) 35%, transparent); }
.ak-bead-dot.is-alarm { background: var(--ak-alarm); }
.ak-bead-dot.is-off { background: var(--ak-ground); border: 1.5px solid var(--ak-strip-off); }
.ak-bead-when { font-family: var(--ak-mono); font-size: 11.5px; color: var(--ak-meta); width: 64px; flex-shrink: 0; padding-top: 2px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ak-bead.is-future { opacity: 0.6; }

/* HEAT: a grid of cells — four strengths of the accent, the alarm, closed */
.ak-heat { display: grid; gap: 3px; }
.ak-heat-cell { aspect-ratio: 1; border-radius: 3px; background: var(--ak-selected); min-width: 0; }
.ak-heat-cell.is-1 { background: color-mix(in srgb, var(--ak-accent) 28%, var(--ak-raised)); }
.ak-heat-cell.is-2 { background: color-mix(in srgb, var(--ak-accent) 50%, var(--ak-raised)); }
.ak-heat-cell.is-3 { background: color-mix(in srgb, var(--ak-accent) 74%, var(--ak-raised)); }
.ak-heat-cell.is-4 { background: var(--ak-accent); }
.ak-heat-cell.is-alarm { background: var(--ak-alarm); }
.ak-heat-cell.is-ring { box-shadow: 0 0 0 2px var(--ak-ground), 0 0 0 3.5px var(--ak-ink1); }
.ak-heat-cell.is-off { background: transparent; box-shadow: inset 0 0 0 1px var(--ak-strip-off); }

/* PLANE: pins on a ground */
.ak-plane { position: relative; overflow: hidden; flex-shrink: 0; border-radius: var(--ak-r); box-shadow: var(--ak-edge); }
.ak-pin { position: absolute; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; }
.ak-pin-mark { width: 30px; height: 30px; border-radius: 30px; overflow: hidden; box-shadow: 0 0 0 2.5px var(--ak-sheet), 0 6px 14px rgb(0 0 0 / 0.3); background: var(--ak-raised); display: inline-flex; align-items: center; justify-content: center; position: relative; }
.ak-pin-stem { width: 2px; height: 10px; background: var(--ak-sheet); }
.ak-pin.is-ring .ak-pin-mark { box-shadow: 0 0 0 2.5px var(--ak-sheet), 0 0 0 4.5px var(--ak-accent), 0 6px 14px rgb(0 0 0 / 0.3); }
.ak-pin.is-alarm .ak-pin-mark { box-shadow: 0 0 0 2.5px var(--ak-sheet), 0 0 0 4.5px var(--ak-alarm), 0 6px 14px rgb(0 0 0 / 0.3); }
.ak-pin-label { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 3px; white-space: nowrap; font-size: 11.5px; font-weight: 600; color: var(--ak-ink1); background: var(--ak-sheet); padding: 2px 7px; border-radius: var(--ak-r-pill); box-shadow: var(--ak-edge); }
.ak-zone { position: absolute; border-radius: var(--ak-r-sheet); border: 1.5px dashed var(--ak-field); }
.ak-zone.is-solid { border-style: solid; border-color: var(--ak-hair); background: color-mix(in srgb, var(--ak-sheet) 55%, transparent); }

/* FLOOR: the organization's records as a place — the kit's plane, drawn in blocks or as a plan (floor/Floor.tsx) */
.ak-floor { position: relative; overflow: hidden; cursor: default; }
.ak-floor-svg { width: 100%; height: 100%; display: block; }
.ak-floor-svg text { pointer-events: none; user-select: none; }
.ak-floor [data-floor-hit] { cursor: pointer; }
.ak-floor-mark { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.ak-floor-wing, .ak-floor-room, .ak-floor-desk, .ak-floor-board, .ak-floor-station, .ak-floor-figure { transition: opacity 160ms ease-out; }
.ak-floor-figure { will-change: transform; }
.ak-floor-creature { image-rendering: auto; }
.ak-floor-slot { width: 100%; height: 100%; display: flex; align-items: flex-end; justify-content: center; }
.ak-floor-mark > svg, .ak-floor-mark > img { width: 14px; height: 14px; display: block; fill: currentColor; }
/* The floor as a canvas (2026-10-13): one drawing under a camera, the chrome over it. */
/* The hand (Paul, 2026-10-15: "when I pan by grabbing the canvas, use a hand that opens and closes"): open over the stage, closed while it is held (the canvas marks is-grabbing from pointer down to up), a crosshair while following a figure. */
.ak-floor-canvas { cursor: grab; }
.ak-floor-canvas:active, .ak-floor-canvas.is-grabbing { cursor: grabbing; }
.ak-floor-canvas.is-following { cursor: crosshair; }
/* THE LINE AS A PLACE (2026-11-05): the line's window, and what a press lands on — a station's piece, a run's folder. */
.ak-line-canvas { cursor: grab; }
.ak-line-canvas:active { cursor: grabbing; }
.ak-line-piece, .ak-line-run { cursor: pointer; }
.ak-line-piece:hover, .ak-line-run:hover { filter: brightness(1.12); }
/* THE LINE IN ORBIT (2026-11-06): the window, the signs over the canvas (one screen size, tiered and culled by the scene), the views, the keys, the plan in the corner. */
.ak-orbit { position: relative; overflow: hidden; background: var(--ak-ground); border-radius: var(--ak-r, 16px); outline: none; touch-action: none; user-select: none; }
.ak-orbit:focus-visible { box-shadow: var(--ak-edge), 0 0 0 2px var(--ak-accent); }
.ak-orbit-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ak-orbit-signs { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.ak-orbit-sign { position: absolute; left: 0; top: 0; visibility: hidden; display: flex; flex-direction: column; align-items: center; gap: 1px; white-space: nowrap; font-family: var(--ak-mono); line-height: 1.15; text-align: center; will-change: transform; }
.ak-orbit-sign.is-hit { pointer-events: auto; cursor: pointer; }
.ak-orbit-sign-name { font-size: 10.5px; font-weight: 700; color: var(--ak-ink2); letter-spacing: 0.2px; text-shadow: 0 1px 2px var(--ak-ground), 0 0 6px var(--ak-ground); }
.ak-orbit-sign-line { font-size: 9px; font-weight: 500; color: var(--ak-meta); text-shadow: 0 1px 2px var(--ak-ground), 0 0 6px var(--ak-ground); }
.ak-orbit-sign.is-lit .ak-orbit-sign-name, .ak-orbit-sign.is-lamp .ak-orbit-sign-name { color: var(--ak-ink1); }
.ak-orbit-sign.is-noline .ak-orbit-sign-line { display: none; }
.ak-orbit-sign.is-eyebrow .ak-orbit-sign-name { font-size: 10px; letter-spacing: 0.9px; text-transform: uppercase; color: var(--ak-meta); }
.ak-orbit-sign.is-eyebrow.is-lamp .ak-orbit-sign-name { color: var(--ak-ink1); }
.ak-orbit-sign.is-eyebrow .ak-orbit-sign-line { font-size: 9.5px; color: var(--ak-ink2); }
.ak-orbit-sign.is-core .ak-orbit-sign-name { font-size: 11.5px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ak-ink1); }
.ak-orbit-sign.is-exit .ak-orbit-sign-name { font-size: 9.5px; letter-spacing: 0.4px; }
.ak-orbit-sign.is-exit.is-lit .ak-orbit-sign-name { color: var(--ak-accent-on); }
.ak-orbit-sign.is-alarm .ak-orbit-sign-name { color: var(--ak-alarm); }
.ak-orbit-sign.is-small .ak-orbit-sign-name { font-size: 9.5px; font-weight: 600; }
.ak-orbit-sign.is-road .ak-orbit-sign-name { font-style: italic; font-weight: 500; color: var(--ak-meta); }
.ak-orbit-sign.is-pill .ak-orbit-sign-name { background: var(--ak-sheet); box-shadow: var(--ak-edge); border-radius: 999px; padding: 2px 8px; font-size: 9.5px; font-weight: 600; color: var(--ak-ink2); text-shadow: none; }
.ak-orbit-sign.is-run .ak-orbit-sign-name { display: inline-flex; align-items: center; gap: 6px; background: var(--ak-sheet); box-shadow: var(--ak-edge); border-radius: 999px; padding: 3px 9px 3px 7px; font-size: 10px; color: var(--ak-ink1); text-shadow: none; }
.ak-orbit-sign-lamp { width: 7px; height: 7px; border-radius: 7px; background: var(--ak-accent); box-shadow: 0 0 6px var(--ak-accent); display: inline-block; }
.ak-orbit-sign.is-busy .ak-orbit-sign-lamp { background: var(--ak-ink1); box-shadow: none; }
.ak-orbit-sign.is-alarm .ak-orbit-sign-lamp { background: var(--ak-alarm); box-shadow: 0 0 6px var(--ak-alarm); }
.ak-orbit-sign.is-run.is-alarm .ak-orbit-sign-name { color: var(--ak-alarm); }
.ak-orbit-views { position: absolute; right: 14px; top: 14px; display: flex; gap: 6px; }
.ak-orbit-keys { position: absolute; right: 14px; bottom: 14px; display: flex; align-items: center; gap: 6px; }
.ak-orbit-plan { position: absolute; bottom: 14px; background: var(--ak-sheet); border-radius: 12px; box-shadow: var(--ak-edge), 0 12px 32px rgb(0 0 0 / 0.32); display: flex; flex-direction: column; overflow: hidden; }
.ak-orbit-plan-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 12px 7px; }
.ak-orbit-plan-map { position: relative; overflow: hidden; margin: 0 12px; border-radius: 10px; background: var(--ak-ground); box-shadow: var(--ak-edge); }
.ak-orbit-plan-svg { position: absolute; left: 0; top: 0; transform-origin: 0 0; pointer-events: none; }
.ak-orbit-plan-dot { position: absolute; width: 10px; height: 10px; margin: -5px; border-radius: 10px; background: var(--ak-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ak-accent) 35%, transparent), 0 0 10px var(--ak-accent); pointer-events: none; }
.ak-orbit-plan-foot { display: flex; align-items: center; gap: 10px; padding: 10px 12px 8px; }
.ak-orbit-plan-stop { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; font-family: var(--ak-mono); overflow: hidden; }
.ak-orbit-plan-rows { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 12px; }
.ak-floor-canvas:focus-visible { box-shadow: var(--ak-edge), 0 0 0 2px var(--ak-accent); }
/* No `will-change: transform` on the campus or the scene (2026-10-15): Chromium rasterizes a will-change layer at the native scale and never finer however far the transform zooms in, so every deep zoom was a bitmap magnified ("everything's blurry"). The canvas composites the layer itself while the camera moves (`translateZ(0)` in `apply`) and gives it back at rest (`settle`), where the drawing is painted as vectors at the camera's scale. */
.ak-floor-canvas-campus { position: absolute; left: 0; top: 0; transform-origin: 0 0; transition: opacity 220ms ease-out; }
/* A sign on the campus (2026-10-15) keeps one size on screen: the canvas writes --ak-sign-scale on its layer (1 up to 1:1, then 1/k) and every sign is scaled by it about its own foot. */
.ak-floor-canvas-campus .ak-floor-sign { transform: scale(var(--ak-sign-scale, 1)); }
.ak-floor-canvas-campus.is-leaving { pointer-events: none; animation: ak-floor-leave 160ms ease-out forwards; }
/* The arrival (2026-10-15; Paul: "a cooler loading screen … a tiny little text in the corner … cheesy"): while the canvas wears is-arriving (its first beat after mounting), every hall rises out of the ground in its rank — front to back, 14 ms apart, the rise one height on screen at every altitude (--ak-cam-inv = 1/k) — and the doors, the gates, the lot, the links, the ghosts and the figures fade up once the last hall stands (--ak-arrive-last). The skeleton stands in the stage's own frame while the plan is read, breathing. */
.ak-floor-canvas.is-arriving .ak-floor-rise { animation: ak-floor-rise 420ms cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--ak-raise-i, 0) * 14ms); }
@keyframes ak-floor-rise { from { opacity: 0; transform: translateY(calc(26px * var(--ak-cam-inv, 1))); } to { opacity: 1; transform: none; } }
.ak-floor-canvas.is-arriving .ak-floor-late { animation: ak-floor-fade-up 320ms ease-out both; animation-delay: var(--ak-arrive-last, 420ms); }
@keyframes ak-floor-fade-up { from { opacity: 0; } to { opacity: 1; } }
.ak-floor-canvas.is-skeleton { cursor: default; animation: ak-floor-breathe 1.6s ease-in-out infinite alternate; }
/* A plant's tags (2026-10-15; Paul: "the labels … only show up when you mouse over something"): hidden until the canvas reveals the one for the piece under the pointer, or the painter the selected piece's. */
.ak-floor-tag { visibility: hidden; }
.ak-floor-tag.is-shown { visibility: visible; }
/* The cubies (2026-10-15; Paul: "chaos monkeys roaming around, little cube guys who have no purpose … they scoot faster away from your mouse … think of them as minions" — named cubies 2026-10-16, the module `cubies/`): they take no pointer (they flee by nearness, not by hover); the face's cells are lit by the engine; the paint is three variables on the figure, the scale on its foot the host's (the floor's camera writes it). */
.ak-cubie { pointer-events: none; transform: scale(var(--ak-cubie-scale, 1)); transform-box: fill-box; transform-origin: 50% 100%; }
/* The rig's x-ray: every cubie again as a soft silhouette, shown only through the scene's occluders (the layer is
   masked to them and blurred as one by the rig); this is how much of it shows. */
.ak-rig-xray { opacity: 0.55; pointer-events: none; }
/* The plan's own x-ray: every piece a wall or a machine hides (a pool, a gap, a bridge, a machine, the hatch, the
   doorway, a turnstile, a desk) again, blurred as the cubies are and shown only through exactly what hides it. */
.ak-plan-xray { opacity: 0.6; pointer-events: none; }
.ak-cubie-cell { fill: var(--ak-cubie-glow, var(--ak-accent)); visibility: hidden; }
.ak-cubie-cell.is-lit { visibility: visible; }
/* The crew (2026-10-17, `cubies/crew.ts`): the build card's site — the slab centred in its stage at a fixed width (the
   cubies ≈30 px), a still cubie in a roster row. */
.ak-crew-site { position: absolute; left: 50%; top: 50%; width: 360px; height: auto; transform: translate(-50%, -50%); cursor: default; touch-action: none; display: block; }
.ak-crew-site text { pointer-events: none; user-select: none; }
.ak-crew-mini { flex: none; overflow: visible; display: block; }
/* The arcade head and foot (2026-10-17, lifted from Cubelings — `arcade.tsx`): a game's two bars round its stage. */
.ak-arcade-head { height: 68px; display: flex; align-items: center; gap: 20px; padding: 0 24px; border-bottom: 1px solid var(--ak-hair); flex-shrink: 0; }
.ak-arcade-head-words { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ak-arcade-foot { height: 100px; display: flex; align-items: center; gap: 16px; padding: 0 24px; border-top: 1px solid var(--ak-hair); flex-shrink: 0; }
.ak-arcade-foot-rule { width: 1px; height: 44px; background: var(--ak-hair); margin: 0 6px; flex-shrink: 0; }
.ak-arcade-head.is-narrow { height: 56px; gap: 12px; padding: 0 12px; }
.ak-arcade-foot.is-narrow { height: 80px; gap: 10px; padding: 0 12px; }
/* The pick (2026-10-17, lifted from Cubelings — `cubies/pick.ts`): a ring under the picked cubie follows it, a tag names it
   above, the cube wears an outline in the accent (four hard drop-shadows, which read in light and dark alike); a click
   LOCKS the pick and the two thicken; a word given rises off the cubie and fades. (No ring under the foot — Paul,
   2026-10-17: "we don't need the circle".) */
.ak-cubie-pick-tag { position: absolute; transform: translate(-50%, -100%); display: inline-flex; flex-direction: column; align-items: center; gap: 1px; padding: 3px 9px 4px; border-radius: 9px; font-family: var(--ak-mono); font-size: 11.5px; font-weight: 800; letter-spacing: 0.2px; white-space: nowrap; color: var(--ak-accent); background: var(--ak-sheet); border: 1.5px solid var(--ak-accent); box-shadow: var(--ak-lift); pointer-events: none; z-index: 3; }
.ak-cubie-pick-tag.is-locked { color: var(--ak-accent-on); background: var(--ak-accent); }
.ak-cubie-pick-hint { font-size: 9.5px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; opacity: 0.8; }
.ak-cubie.is-picked { filter: drop-shadow(1.5px 0 0 var(--ak-accent)) drop-shadow(-1.5px 0 0 var(--ak-accent)) drop-shadow(0 1.5px 0 var(--ak-accent)) drop-shadow(0 -1.5px 0 var(--ak-accent)); }
.ak-cubie.is-picked.is-locked { filter: drop-shadow(2px 0 0 var(--ak-accent)) drop-shadow(-2px 0 0 var(--ak-accent)) drop-shadow(0 2px 0 var(--ak-accent)) drop-shadow(0 -2px 0 var(--ak-accent)) drop-shadow(0 0 8px var(--ak-accent)); }
.ak-cubie-pick-word { position: absolute; transform: translate(-50%, -100%); font-family: var(--ak-mono); font-size: 13px; font-weight: 800; letter-spacing: 0.3px; color: var(--ak-accent); text-shadow: 0 1px 0 var(--ak-sheet), 0 0 6px var(--ak-sheet); pointer-events: none; z-index: 3; animation: ak-cubie-rise 900ms ease-out forwards; }
@keyframes ak-cubie-rise { from { opacity: 1; translate: 0 0; } to { opacity: 0; translate: 0 -36px; } }
@keyframes ak-floor-breathe { from { opacity: 0.72; } to { opacity: 1; } }
@keyframes ak-floor-leave { from { opacity: 1 } to { opacity: 0 } }
.ak-floor-canvas-studio { position: absolute; inset: 0; z-index: 2; transform-origin: 0 0; animation: ak-floor-arrive 220ms ease-out; }
/* The frost (Paul, 2026-10-14: "blur the canvas behind us … it's just too noisy"): while a scene stands, a veil between
   the campus and the scene blurs and tints what is left of the campus IN SCREEN SPACE — the same frost whatever the
   camera does under it (a filter on the campus layer itself would scale with the zoom). It takes no pointer. */
.ak-floor-canvas-veil { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: color-mix(in srgb, var(--ak-raised) 38%, transparent); -webkit-backdrop-filter: blur(16px) saturate(0.85); backdrop-filter: blur(16px) saturate(0.85); animation: ak-floor-arrive 220ms ease-out; }
/* The live glass (2026-10-14): the jumbotron's glass as the deployed tile itself, skewed onto the wall by the same map that drew the shot. */
.ak-floor-canvas-glass { position: absolute; left: 0; top: 0; width: 1280px; height: 800px; transform-origin: 0 0; overflow: hidden; background: #0b0b0e; box-shadow: 0 0 0 1px rgb(0 0 0 / .45); z-index: 3; animation: ak-floor-arrive 220ms ease-out; }
.ak-floor-canvas-glass iframe { display: block; width: 100%; height: 100%; border: 0; background: #0b0b0e; }
/* The dive (Paul, 2026-10-14: "click on a kiosk … zoom in on it, Hollywood … at the end of the zoom switch to the live
   tile"; turned round 2026-10-15: "the camera go the literal opposite direction and basically align the box of the
   little arcade where the tile is hosted and then zoom that in"): the SCENE walks up to the kiosk — its transform
   transitions until the glass stands square-on and whole in the stage, the room shearing away around it — and when it
   lands the host opens the tile. The glass keeps its captured shot (or the live tile, when that already stood). */
.ak-floor-canvas-studio.is-diving { transition: transform 1100ms cubic-bezier(.7, 0, .3, 1); will-change: transform; pointer-events: none; }
/* The seat (2026-10-17): the scene holds the landing while the person plays the live page on the glass; standing up eases it back onto the camera. */
.ak-floor-canvas-studio.is-seated { pointer-events: auto; }
.ak-floor-canvas-studio.is-standing { transition: transform 600ms cubic-bezier(.7, 0, .3, 1); will-change: transform; }
.ak-floor-canvas-seat { display: inline-flex; align-items: center; gap: 8px; animation: ak-floor-arrive 220ms ease-out; }
/* The app room's pieces glow under the pointer — every one is a door. */
.ak-floor-app-screen:hover, .ak-floor-app-machine:hover, .ak-floor-app-cable:hover, .ak-floor-app-sign:hover, .ak-floor-app-mural:hover, .ak-floor-app-plaque:hover { filter: drop-shadow(0 0 5px var(--ak-accent)); cursor: pointer; }
/* the campus (2026-10-15): the street is ground — its line and its words catch no pointer; a door, a gate, the lot, the links' note, a ghost and a plant's piece light under the pointer like the app rooms' pieces */
.ak-floor-campus-street { pointer-events: none; }
.ak-floor-campus-door:hover, .ak-floor-campus-gate:hover, .ak-floor-campus-lot:hover, .ak-floor-campus-links:hover, .ak-floor-campus-ghost:hover, .ak-floor-campus-piece:hover { filter: drop-shadow(0 0 5px var(--ak-accent)); }
/* A plant's hall glows the same way at the organization's altitude, where it is a block. Walked up to, its floor is a translucent quad the size of the frame: a drop-shadow under it washes the whole hall in the accent (found 2026-10-15), so there only its edge lights. */
.ak-floor[data-floor-zoom="org"] .ak-floor-campus-plant:hover { filter: drop-shadow(0 0 5px var(--ak-accent)); }
.ak-floor:not([data-floor-zoom="org"]) .ak-floor-campus-plant:hover > polygon { stroke: var(--ak-accent); stroke-width: 1.6; }
.ak-floor-campus-plant:hover, .ak-floor-campus-door:hover, .ak-floor-campus-gate:hover, .ak-floor-campus-lot:hover, .ak-floor-campus-links:hover, .ak-floor-campus-ghost:hover, .ak-floor-campus-piece:hover { cursor: pointer; }
@keyframes ak-floor-arrive { from { opacity: 0 } to { opacity: 1 } }
.ak-floor-canvas-crumbs { position: absolute; left: 14px; top: 14px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; z-index: 4; max-width: calc(100% - 320px); }
.ak-floor-canvas-find { position: absolute; right: 14px; top: 14px; width: 280px; max-width: calc(100% - 28px); z-index: 4; display: flex; flex-direction: column; gap: 6px; }
.ak-floor-canvas-find.is-folded { width: auto; }
.ak-floor-canvas-field { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: 999px; background: var(--ak-raised); box-shadow: var(--ak-edge); box-sizing: border-box; }
.ak-floor-canvas-field input { all: unset; flex: 1 1 0; min-width: 0; font-size: 13px; color: var(--ak-ink1); font-family: var(--ak-font); }
.ak-floor-canvas-field input::placeholder { color: var(--ak-meta); }
.ak-floor-canvas-x { all: unset; cursor: pointer; display: inline-flex; color: var(--ak-meta); }
.ak-floor-canvas-found { border-radius: 14px; padding: 6px; display: flex; flex-direction: column; background: var(--ak-sheet); box-shadow: var(--ak-edge), 0 12px 32px rgb(0 0 0 / 0.28); }
.ak-floor-canvas-row { all: unset; cursor: pointer; display: flex; align-items: baseline; gap: 10px; padding: 7px 10px; border-radius: 8px; min-width: 0; }
.ak-floor-canvas-row:hover, .ak-floor-canvas-row:focus-visible { background: var(--ak-raised); }
.ak-floor-canvas-row-name { font-size: 13px; font-weight: 600; color: var(--ak-ink1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ak-floor-canvas-keys { position: absolute; left: 14px; bottom: 14px; display: flex; align-items: center; gap: 6px; z-index: 4; }
.ak-floor-canvas-map { position: absolute; right: 14px; bottom: 14px; border-radius: 12px; overflow: hidden; background: var(--ak-sheet); box-shadow: var(--ak-edge); cursor: crosshair; z-index: 4; }
.ak-floor-canvas-view { position: absolute; border: 1.5px solid var(--ak-accent-on); border-radius: 3px; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.3); pointer-events: none; }
.ak-floor-canvas-map-hit { position: absolute; border: 1.5px solid var(--ak-accent-on); border-radius: 4px; background: color-mix(in srgb, var(--ak-accent) 22%, transparent); pointer-events: none; }
.ak-floor-canvas-map-label { position: absolute; font-family: var(--ak-font); font-size: 11px; font-weight: 600; line-height: 16px; color: var(--ak-ink1); background: var(--ak-sheet); padding: 1px 7px; border-radius: 6px; box-shadow: var(--ak-edge); pointer-events: none; white-space: nowrap; max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.ak-floor-canvas-dot { position: absolute; width: 8px; height: 8px; border-radius: 8px; background: var(--ak-accent-on); box-shadow: 0 0 0 3px rgb(0 0 0 / 0.25); pointer-events: none; }
.ak-floor-canvas-plan { position: absolute; inset: 0; z-index: 5; background: var(--ak-ground); animation: ak-floor-arrive 160ms ease-out; }

/* WORKBENCH: one thing large, its blocks beside */
.ak-workbench { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 16px; flex: 1 1 0; min-height: 0; }
.ak-stage { position: relative; overflow: hidden; border-radius: var(--ak-r); box-shadow: var(--ak-edge); display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.ak-sblock { display: flex; gap: 20px; padding: 14px 0; border-top: 1px solid var(--ak-hair); align-items: flex-start; }
.ak-sblock:first-child { border-top: none; }
.ak-sblock-label { width: 124px; flex-shrink: 0; padding-top: 3px; }
.ak-sblock.is-open .ak-sblock-label { color: var(--ak-accent-on); }
.ak-sblock-body { flex: 1 1 0; min-width: 0; }
.ak-sblock-open { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 14px; background: var(--ak-ground); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ak-accent) 40%, transparent); }
.ak-sblock-summary { font-size: 13px; line-height: 1.45; color: var(--ak-ink2); }
/* THE PHONE (≤ 640, the kit's own breakpoint): the block's label stands above its body with the action beside it, and the body takes the whole width — beside a 124 column at 390 the words were 190 wide (Campaigns through the phone host, 2026-10-19). */
@media (max-width: 640px) {
  .ak-sblock { flex-wrap: wrap; gap: 10px 12px; }
  .ak-sblock-label { width: auto; flex: 1 1 auto; padding-top: 6px; }
  .ak-sblock-body { flex: 1 1 100%; order: 3; min-width: 0; }
  .ak-sblock-open { padding: 12px; }
}

/* WALL: bands that fold, a foot that acts */
.ak-foldband { display: flex; align-items: center; gap: 12px; height: 40px; min-width: 0; flex-shrink: 0; }
/* The name truncates and the facts give way first (the Band's rule): a long name used to push Change off the sheet and give it a sideways scroll (the roadmap's milestones, 2026-10-16). */
.ak-foldband-name { font-size: 17px; font-weight: 600; letter-spacing: -0.1px; color: var(--ak-ink2); white-space: nowrap; font-family: var(--ak-display); text-transform: var(--ak-case); flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ak-foldband-facts { flex: 0 1000 auto; min-width: 0; }
.ak-wallfoot { flex-shrink: 0; display: flex; align-items: center; gap: 10px; padding: 14px 0 0; border-top: 1px solid var(--ak-hair); margin-top: auto; }

/* INDEX: a table of contents */
.ak-index { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 40px; }
.ak-index-group { display: flex; flex-direction: column; min-width: 0; }
.ak-index-head { display: flex; align-items: center; gap: 10px; height: 26px; border-bottom: 1px solid var(--ak-hair); margin-bottom: 4px; }
.ak-index-bar { width: 3px; height: 14px; border-radius: 3px; background: var(--ak-strip-on); flex-shrink: 0; }
.ak-index-bar.is-here { background: var(--ak-accent); }
.ak-index-row { display: flex; align-items: center; gap: 10px; height: 36px; min-width: 0; padding: 0 8px; margin: 0 -8px; border-radius: var(--ak-r-field); }
.ak-index-row.is-door { cursor: pointer; }
.ak-index-row.is-door:hover { background: var(--ak-hover); }
.ak-index-row.is-door:focus-visible { outline: 2px solid var(--ak-accent); outline-offset: 2px; }
.ak-index-name { font-size: 13.5px; font-weight: 600; color: var(--ak-ink1); white-space: nowrap; }
.ak-index-line { font-size: 11.5px; color: var(--ak-meta); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ak-dot { width: 6px; height: 6px; border-radius: 6px; background: var(--ak-alarm); flex-shrink: 0; }
.ak-dot.is-accent { background: var(--ak-accent); }

/* GALLERY: pictures first */
.ak-masonry { columns: 4; column-gap: 12px; }
.ak-poster { break-inside: avoid; margin-bottom: 12px; display: flex; flex-direction: column; background: var(--ak-sheet); border-radius: var(--ak-r-sheet); overflow: hidden; box-shadow: var(--ak-edge), var(--ak-lift); }
.ak-poster.is-door { cursor: pointer; }
.ak-poster.is-door:focus-visible { outline: 2px solid var(--ak-accent); outline-offset: 2px; }
.ak-poster-art { position: relative; width: 100%; background: var(--ak-raised); }
.ak-poster-cap { padding: 8px 12px 10px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ak-banner { position: relative; height: 272px; flex-shrink: 0; border-radius: var(--ak-r); overflow: hidden; background: var(--ak-raised); box-shadow: var(--ak-edge); }
.ak-banner.is-door { cursor: pointer; }
.ak-banner.is-door:focus-visible { outline: 2px solid var(--ak-accent); outline-offset: 2px; }
.ak-banner-fade { position: absolute; inset: 0; background: linear-gradient(to top, rgb(9 9 11 / 0.84) 0%, rgb(9 9 11 / 0.38) 46%, transparent 76%); }
.ak-banner-words { position: absolute; left: 24px; right: 24px; bottom: 20px; display: flex; flex-direction: column; gap: 6px; color: #fff; }

/* FACE BAND: the sheet head as a part — the face blurred into its own backdrop, the fade up from the sheet */
.ak-faceband { position: relative; overflow: hidden; flex-shrink: 0; background: var(--ak-raised); }
.ak-faceband-back { position: absolute; inset: 0; overflow: hidden; }
.ak-faceband-back > .ak-plate { position: absolute; inset: 0; width: 100%; height: 100%; filter: blur(16px) saturate(1.2); transform: scale(1.35); }
.ak-faceband-blur { position: absolute; left: -40%; top: -90%; width: 180%; height: 280%; object-fit: cover; filter: blur(44px) saturate(1.25); opacity: 0.85; display: block; }
.ak-faceband-fade { position: absolute; inset: 0; background: linear-gradient(to top, var(--ak-sheet) 0%, color-mix(in srgb, var(--ak-sheet) 55%, transparent) 46%, transparent 100%); }
.ak-faceband-pills { position: absolute; top: 14px; right: 14px; display: flex; gap: 6px; }
.ak-faceband-foot { position: absolute; left: 20px; right: 20px; bottom: 16px; display: flex; align-items: flex-end; }
.ak-faceband-face { position: relative; overflow: hidden; flex-shrink: 0; background: var(--ak-raised); box-shadow: 0 0 0 4px var(--ak-sheet), var(--ak-lift); }
.ak-faceband-words { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-bottom: 4px; }
.ak-person { display: flex; flex-direction: column; min-width: 0; background: var(--ak-sheet); border-radius: var(--ak-r-sheet); overflow: hidden; box-shadow: var(--ak-edge), var(--ak-lift); }
.ak-person.is-door { cursor: pointer; }
.ak-person.is-door:focus-visible { outline: 2px solid var(--ak-accent); outline-offset: 2px; }
.ak-person-line { padding: 12px 20px 6px; font-size: 13.5px; line-height: 1.45; color: var(--ak-ink1); }
.ak-person-verbs { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 20px 16px; }

/* TREE: a trunk and leaves */
.ak-tree { display: flex; flex-direction: column; }
.ak-tree-row { position: relative; display: flex; align-items: center; height: 34px; padding-right: 8px; min-width: 0; }
.ak-tree-row.is-door { cursor: pointer; }
.ak-tree-row.is-door:focus-visible { outline: 2px solid var(--ak-accent); outline-offset: -2px; }
.ak-tree-line { position: absolute; width: 1px; background: color-mix(in srgb, var(--ak-accent) 72%, var(--ak-meta)); }
.ak-tree-pill { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 8px; margin-left: -8px; border-radius: 6px; min-width: 0; font-size: 14px; font-weight: 500; color: var(--ak-ink2); white-space: nowrap; }
.ak-tree-row.is-on .ak-tree-pill { background: var(--ak-selected); color: var(--ak-ink1); font-weight: 600; }
.ak-tree-row.is-door:hover .ak-tree-pill { background: var(--ak-hover); color: var(--ak-ink1); }

/* LOG: a stream of lines */
.ak-log { font-family: var(--ak-mono); font-size: 12px; line-height: 1.6; background: var(--ak-page); border-radius: var(--ak-r-sheet); padding: 12px 14px; box-shadow: var(--ak-edge); overflow: hidden; display: flex; flex-direction: column; min-height: 0; flex: 1 1 0; }
.ak-log-line { display: flex; gap: 12px; min-width: 0; white-space: pre; color: var(--ak-ink1); }
.ak-log-when { color: var(--ak-meta); flex-shrink: 0; }
.ak-log-tag { color: var(--ak-meta); width: 78px; flex-shrink: 0; }
.ak-log-line.is-alarm { color: var(--ak-alarm); }
.ak-log-line.is-accent { color: var(--ak-accent-on); }
.ak-log-line.is-quiet { color: var(--ak-meta); }
.ak-log-cursor { display: inline-block; width: 7px; height: 13px; background: var(--ak-ink2); vertical-align: -2px; }

/* THREAD: turns in a room; the three-pane split; the folded column of marks */
.ak-thread { display: flex; flex-direction: column; min-width: 0; }
.ak-turn { display: flex; gap: 12px; padding: 8px 0; min-width: 0; }
.ak-turn-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 0; }
.ak-turn-head { display: flex; align-items: baseline; gap: 8px; }
.ak-turn-name { font-size: 13.5px; font-weight: 600; color: var(--ak-ink1); }
.ak-turn-text { font-size: 14px; line-height: 1.5; color: var(--ak-ink1); max-width: 68ch; }
.ak-turn.is-you .ak-turn-text { color: var(--ak-ink2); }
.ak-split { display: grid; grid-template-columns: 72px 300px minmax(0, 1fr); flex: 1 1 0; min-height: 0; }
.ak-markcol { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px 0; border-right: 1px solid var(--ak-hair); }
.ak-markcol-item { width: 44px; height: 44px; border-radius: 14px; overflow: visible; position: relative; flex-shrink: 0; }
.ak-markcol-item > :first-child { border-radius: 14px; overflow: hidden; }
.ak-markcol-item.is-door { cursor: pointer; }
.ak-markcol-item.is-on { box-shadow: 0 0 0 2px var(--ak-ground), 0 0 0 4px var(--ak-accent); }

/* PAGE: prose with blocks */
.ak-prose { max-width: 68ch; font-size: 15px; line-height: 1.6; color: var(--ak-ink1); display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ak-prose p { margin: 0; }
.ak-prose h2 { margin: 8px 0 0; font-size: 19px; font-weight: 600; letter-spacing: -0.2px; font-family: var(--ak-display); color: var(--ak-ink1); }
.ak-prose ul { margin: 0; padding-left: 20px; }
.ak-prose li { margin: 3px 0; }
.ak-prose .is-lede { font-size: 17px; font-weight: 500; line-height: 1.5; }
.ak-page-title { font-size: 34px; font-weight: 700; letter-spacing: -0.8px; line-height: 1.1; font-family: var(--ak-display); color: var(--ak-ink1); margin: 0; text-transform: var(--ak-case); }

/* DECK: one at a time */
/* Fills a host that has room (a fill band), sizes to its card where the host is auto; never wider than the host (min-width 0, the card takes the room up to 600). */
.ak-deck { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1 1 auto; min-height: 0; min-width: 0; gap: 18px; }
.ak-deck-card { position: relative; width: 100%; max-width: 600px; }
.ak-deck-behind { position: absolute; left: 0; right: 0; height: 132px; background: var(--ak-sheet); border-radius: var(--ak-r); box-shadow: var(--ak-edge); }

/* TALLY: a scoreboard */
.ak-hero-number { font-size: 64px; font-weight: 700; letter-spacing: -2.4px; line-height: 1; font-family: var(--ak-display); color: var(--ak-ink1); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ak-rank { display: flex; align-items: center; gap: 14px; height: 46px; min-width: 0; border-top: 1px solid var(--ak-hair); }
.ak-rank:first-child { border-top: none; }
.ak-rank.is-door { cursor: pointer; }
.ak-rank-n { font-family: var(--ak-mono); font-size: 13px; color: var(--ak-meta); width: 22px; text-align: right; flex-shrink: 0; }
.ak-rank-num { font-size: 20px; font-weight: 700; letter-spacing: -0.4px; font-family: var(--ak-display); color: var(--ak-ink1); font-variant-numeric: tabular-nums; width: 96px; text-align: right; flex-shrink: 0; }

/* CHART: the band's numbers drawn — bars, stacked bars or lines (2026-10-19) */
.ak-chart { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 14px 12px 10px; }
.ak-chart-legend { display: flex; justify-content: flex-end; padding: 0 4px; }
.ak-chart-note { font-size: 12.5px; padding: 0 4px; }

/* PANEL: tiles with spans on a twelve-column grid */
.ak-panel { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; }
.ak-panel-tile { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 14px 18px; background: var(--ak-raised); border-radius: calc(var(--ak-r) * 0.89); box-shadow: var(--ak-edge); }

/* the small parts */
.ak-delta { display: inline-flex; align-items: center; gap: 2px; font-family: var(--ak-mono); font-size: 12px; font-weight: 600; color: var(--ak-ink2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ak-delta.is-alarm { color: var(--ak-alarm); }
.ak-delta.is-accent { color: var(--ak-accent-on); }
.ak-ring { position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ak-ring > svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.ak-ring-track { stroke: var(--ak-selected); fill: none; }
.ak-ring-arc { stroke: var(--ak-accent); fill: none; stroke-linecap: round; }
.ak-ring.is-alarm .ak-ring-arc { stroke: var(--ak-alarm); }
.ak-ring-figure { font-family: var(--ak-mono); font-weight: 600; color: var(--ak-ink1); font-variant-numeric: tabular-nums; position: relative; }
.ak-clock { font-family: var(--ak-mono); font-weight: 600; letter-spacing: -0.5px; color: var(--ak-ink1); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ak-clock.is-alarm { color: var(--ak-alarm); }
.ak-keycap { position: relative; border: none; margin: 0; font: inherit; font-family: var(--ak-font); text-align: left; width: 74px; height: 74px; border-radius: 12px; background: var(--ak-raised); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.14), inset 0 -3px 0 rgb(0 0 0 / 0.22), var(--ak-edge), var(--ak-lift); display: flex; flex-direction: column; justify-content: space-between; padding: 9px 10px; cursor: pointer; flex-shrink: 0; color: var(--ak-ink2); }
.ak-keycap:active, .ak-keycap.is-pressed { transform: translateY(1px); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.1), inset 0 -2px 0 rgb(0 0 0 / 0.22), var(--ak-edge); }
.ak-keycap:focus-visible { outline: 2px solid var(--ak-accent); outline-offset: 2px; }
/* lit: the surface's accent — or the key's OWN colour when the thing has one (a service, an organization's livery) */
.ak-keycap.is-lit { background: color-mix(in srgb, var(--ak-mark-accent, var(--ak-accent)) 24%, var(--ak-raised)); color: var(--ak-ink1); }
.ak-keycap.has-accent { color: color-mix(in srgb, var(--ak-mark-accent) 72%, var(--ak-ink1)); }
/* bare: the glyph alone, centred — the name stands beside the key (a row's lead) */
.ak-keycap.is-bare { align-items: center; justify-content: center; padding: 0; }
.ak-keycap-name { font-family: var(--ak-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; line-height: 1.15; }
.ak-keycap-led { position: absolute; top: 9px; right: 9px; width: 6px; height: 6px; border-radius: 6px; background: var(--ak-alarm); box-shadow: 0 0 6px var(--ak-alarm); }
/* a key legend (⌘K) beside a field: mono, on the raised step */
.ak-kbd { display: inline-flex; align-items: center; font-family: var(--ak-mono); font-size: 11px; line-height: 1; color: var(--ak-meta); padding: 4px 6px; border-radius: 5px; background: var(--ak-raised); box-shadow: var(--ak-edge); flex-shrink: 0; font-variant-numeric: tabular-nums; }
.ak-ribbon { display: flex; gap: 3px; align-items: center; width: 100%; }
.ak-ribbon > span { height: 10px; border-radius: 5px; flex-grow: 0; flex-shrink: 1; min-width: 0; }
.ak-ribbon-unknown { flex-grow: 1; height: 10px; border-radius: 5px; background-image: repeating-linear-gradient(90deg, var(--ak-strip-off) 0 6px, transparent 6px 12px); }
.ak-ribbon-labels { display: flex; gap: 3px; width: 100%; }
.ak-ribbon-labels > span { min-width: 0; overflow: hidden; flex-grow: 0; flex-shrink: 1; display: flex; flex-direction: column; gap: 1px; }
.ak-receipt { width: 320px; flex-shrink: 0; background: var(--ak-sheet); border-radius: var(--ak-r-sheet); padding: 18px 20px; box-shadow: var(--ak-edge), var(--ak-lift); display: flex; flex-direction: column; gap: 9px; font-size: 13px; color: var(--ak-ink1); }
/* `fill`: the receipt takes its container's width — beside full-width rows in a sheet (the CODING pane's Usage, 2026-10-16). */
.ak-receipt.is-fill { width: auto; flex-shrink: 1; }
.ak-receipt-line { display: flex; justify-content: space-between; gap: 12px; font-variant-numeric: tabular-nums; }
.ak-receipt-rule { border-top: 1px dashed var(--ak-field); }
.ak-receipt-total { display: flex; justify-content: space-between; align-items: baseline; font-size: 22px; font-weight: 700; letter-spacing: -0.5px; font-family: var(--ak-display); }
.ak-hud { width: 260px; flex-shrink: 0; background: var(--ak-sheet); border-radius: var(--ak-r-sheet); padding: 12px 14px; box-shadow: var(--ak-edge), 0 12px 32px rgb(0 0 0 / 0.32); display: flex; flex-direction: column; gap: 8px; }
/* The card grammar (2026-10-15, the explorer): a head with the kind's glyph, a body for one graphic and the facts, the verbs at the foot, a note under them. */
.ak-hud.is-card { width: 300px; padding: 0; gap: 0; overflow: hidden; }
.ak-hud-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px 8px; }
.ak-hud-body { display: flex; flex-direction: column; gap: 8px; padding: 0 12px 10px; }
.ak-hud-verbs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 8px 10px; border-top: 1px solid var(--ak-hair); background: color-mix(in srgb, var(--ak-raised) 60%, transparent); }
.ak-hud-note { padding: 6px 12px 8px; font-size: 11.5px; line-height: 1.4; border-top: 1px solid var(--ak-hair); color: var(--ak-meta); }
.ak-hud-note.is-alarm { color: var(--ak-alarm); }
/* The floor's identity parts: a glyph in a plate, a state word with its lamp, days as a line, a ring. */
.ak-glyph-box { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ak-state-word { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; min-width: 0; }
.ak-sparkline { display: block; }
.ak-ring-gauge { display: inline-flex; }
/* The explorer and the inspector (2026-10-15): the two panels docked beside the stage, each a column with a head, a body and (the explorer) a foot. */
.ak-floor-explorer, .ak-floor-inspector { display: flex; flex-direction: column; background: var(--ak-sheet); flex-shrink: 0; min-width: 0; height: 100%; box-sizing: border-box; outline: none; }
.ak-floor-explorer { border-right: 1px solid var(--ak-hair); }
.ak-floor-explorer:focus-visible { box-shadow: inset 0 0 0 2px var(--ak-accent); }
.ak-floor-inspector { border-left: 1px solid var(--ak-hair); }
.ak-floor-panel-head { height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 10px 0 12px; border-bottom: 1px solid var(--ak-hair); flex-shrink: 0; box-sizing: border-box; }
.ak-floor-panel-body { flex: 1 1 0; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.ak-floor-explorer-foot { border-top: 1px solid var(--ak-hair); padding: 6px 12px; display: flex; gap: 10px; font-size: 10.5px; flex-shrink: 0; }
.ak-floor-explorer-glyph { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; }
.ak-floor-explorer-caret { display: inline-flex; width: 14px; justify-content: center; color: var(--ak-meta); cursor: pointer; }
.ak-floor-inspector-section { padding: 10px 14px; border-bottom: 1px solid var(--ak-hair); }
/* the menu: a few choices behind a chip — the hover card's sheet, one row per choice, the lit one in the accent's tint */
.ak-menu { position: absolute; z-index: 30; width: 232px; padding: 6px; gap: 0; }
.ak-menu-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 32px; padding: 0 10px; border-radius: var(--ak-r-field); min-width: 0; cursor: pointer; font-size: 13px; font-weight: 500; color: var(--ak-ink1); }
.ak-menu-item:hover, .ak-menu-item:focus-visible { background: var(--ak-hover); outline: none; }
.ak-menu-item.is-lit { background: color-mix(in srgb, var(--ak-accent) 10%, transparent); font-weight: 600; }
.ak-menu-foot { padding: 6px 10px 2px; margin-top: 4px; border-top: 1px solid var(--ak-hair); font-size: 11.5px; color: var(--ak-meta); }
.ak-switch { position: relative; border: none; margin: 0; padding: 0; width: 36px; height: 20px; border-radius: 20px; background: var(--ak-selected); flex-shrink: 0; cursor: pointer; }
.ak-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 16px; background: var(--ak-ink1); transition: transform var(--ak-dur) var(--ak-ease); }
.ak-switch.is-on { background: var(--ak-accent); }
.ak-switch.is-on::after { transform: translateX(16px); background: var(--ak-accent-ink); }
.ak-switch:focus-visible { outline: 2px solid var(--ak-accent); outline-offset: 2px; }
.ak-setting { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 8px 0; border-top: 1px solid var(--ak-hair); min-width: 0; }
.ak-setting:first-child { border-top: none; }
.ak-slider { position: relative; height: 4px; border-radius: 4px; background: var(--ak-selected); flex: 1 1 0; min-width: 80px; }
.ak-slider > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; background: var(--ak-accent); }
.ak-slider > b { position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 14px; background: var(--ak-ink1); transform: translate(-50%, -50%); box-shadow: 0 1px 3px rgb(0 0 0 / 0.3); }
.ak-chipcard { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px 0 4px; border: none; margin: 0; font: inherit; font-family: var(--ak-font); border-radius: var(--ak-r-pill); background: var(--ak-wash); box-shadow: var(--ak-pill-edge); font-size: 12.5px; font-weight: 500; color: var(--ak-ink1); white-space: nowrap; cursor: pointer; }
.ak-stepper { display: flex; flex-direction: column; gap: 8px; }

/* THE MAP (2026-10-08; wider + resizable 10-10): a strip beside a long column — the whole column as marks, each as long as
   what it stands for, the part on screen as a window; the grip on its left edge sizes it */
.ak-map-host { position: relative; display: flex; flex-direction: row; align-items: stretch; flex: 1 1 0; min-height: 0; min-width: 0; }
.ak-map-host > :first-child { flex: 1 1 0; min-width: 0; }
.ak-map { position: relative; flex: 0 0 auto; align-self: stretch; z-index: 2; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; box-shadow: inset 1px 0 0 var(--ak-hair); }
.ak-map-grip { position: absolute; left: 0; top: 0; bottom: 0; width: 7px; cursor: col-resize; z-index: 2; }
.ak-map-grip:hover, .ak-map.is-gripping .ak-map-grip { box-shadow: inset 2px 0 0 color-mix(in srgb, var(--ak-accent) 70%, transparent); }
.ak-map-track { position: absolute; top: 0; bottom: 0; left: 8px; right: 4px; }
.ak-map-mark { position: absolute; left: 0; min-width: 3px; border-radius: 1px; pointer-events: none; }
.ak-map-mark.is-you { background: color-mix(in srgb, var(--ak-ink2) 55%, transparent); }
.ak-map-mark.is-ink { background: color-mix(in srgb, var(--ak-ink1) 28%, transparent); }
.ak-map-mark.is-card { background: color-mix(in srgb, var(--ak-ink1) 72%, transparent); }
.ak-map-mark.is-accent { background: var(--ak-accent); }
.ak-map-mark.is-alarm { background: var(--ak-alarm); }
.ak-map-mark.is-live { background: var(--ak-accent); animation: ak-map-pulse 1.4s ease-in-out infinite; }
.ak-map-mark.is-meta { background: var(--ak-hair); }
.ak-map-mark.is-rule { left: -8px; right: -4px; width: auto !important; background: var(--ak-meta); opacity: 0.55; }
.ak-map-more { position: absolute; left: 0; right: 0; height: 7px; pointer-events: none; background: repeating-linear-gradient(to bottom, var(--ak-meta) 0 1px, transparent 1px 3px); opacity: 0.7; }
.ak-map-more.is-above { top: 0; }
.ak-map-more.is-below { bottom: 0; }
/* the lens: the part on screen, read at a glance — a firm ink edge, a wash under the marks, a halo of the sheet to lift it off them (Paul, 2026-10-11: "hard to tell") */
.ak-map-window { position: absolute; left: -6px; right: -3px; border-radius: 4px; background: color-mix(in srgb, var(--ak-ink1) 15%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ak-ink1) 65%, transparent), 0 0 0 1.5px color-mix(in srgb, var(--ak-sheet) 85%, transparent); pointer-events: none; }
.ak-map:hover .ak-map-window { background: color-mix(in srgb, var(--ak-ink1) 21%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ak-ink1) 80%, transparent), 0 0 0 1.5px color-mix(in srgb, var(--ak-sheet) 85%, transparent); }
.ak-map-hud { position: absolute; right: 100%; margin-right: 8px; transform: translateY(-50%); max-width: 280px; padding: 4px 9px; border-radius: var(--ak-r-field); background: var(--ak-raised); box-shadow: var(--ak-edge), var(--ak-lift); font-family: var(--ak-font); font-size: 11.5px; line-height: 16px; color: var(--ak-ink1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; z-index: 3; }
@keyframes ak-map-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
/* the strip stands in for the scrollbar where there is a pointer to drag it with; at phone width and on touch the column keeps its own */
@media (hover: hover) and (min-width: 641px) {
  .ak-map-host.is-on > :first-child { scrollbar-width: none !important; }
  .ak-map-host.is-on > :first-child::-webkit-scrollbar { display: none; }
}
@media (hover: none), (max-width: 640px) {
  .ak-map { display: none; }
}

/* the three DENSITIES: the same rows at wall · desk (the default) · ledger */
.ak-density-ledger .ak-row { min-height: 34px; padding: 2px 0; gap: 10px; }
.ak-density-ledger .ak-row-line { font-size: 12.5px; font-weight: 500; }
.ak-density-ledger .ak-row-sub { display: none; }
.ak-density-ledger .ak-cell-title { font-size: 14px; }
.ak-density-wall .ak-row { min-height: 76px; }
.ak-density-wall .ak-row-line { font-size: 18px; font-weight: 600; }
.ak-density-wall .ak-row-sub { font-size: 13.5px; }
.ak-density-wall .ak-cell-title { font-size: 19px; }
.ak-density-wall .ak-now-sentence { font-size: 21px; }

/* ── 8. PAPER: the deck's sheets (DECK SYNTHESIS, 2026-10-16; the kit's third host) ─────────────────────────────────
   A sheet is 1280 × 720 drawn at a scale the host sets (--ak-sheet-scale); the grid is deck/grid.ts, the forms deck/Deck.tsx.
   Its root class is .ak-paper (2026-10-19): .ak-sheet is the atlas Sheet part (§ above), and the two sharing one name forced
   every atlas Sheet to 1280 × 720 — the Status and Metal walls clipped on the phone. The sheet's parts keep their ak-sheet-* names.
   Its inks are the kit's ladder re-resolved for its tone: data-theme on the sheet picks dark or light for the subtree, and
   the --ds-* names below are what every part of a sheet reads. The .pptx draws the same view in the same measures. */
.ak-paper { position: relative; box-sizing: border-box; width: calc(1280px * var(--ak-sheet-scale, 1)); height: calc(720px * var(--ak-sheet-scale, 1)); overflow: hidden; flex: none;
  --ds-paper: var(--ak-page); --ds-raised: var(--ak-ground); --ds-ink: var(--ak-ink1); --ds-ink2: var(--ak-ink2); --ds-meta: var(--ak-meta); --ds-hair: var(--ak-hair); --ds-rule: rgb(var(--ak-line) / 0.22);
  --ds-accent: var(--ak-accent); --ds-accent-ink: var(--ak-accent-ink); --ds-accent-wash: color-mix(in srgb, var(--ak-accent) 12%, transparent);
  --ds-s1: var(--ak-accent); --ds-s2: color-mix(in srgb, var(--ak-accent) 68%, var(--ak-ink1)); --ds-s3: color-mix(in srgb, var(--ak-accent) 42%, var(--ak-ink1)); --ds-s4: color-mix(in srgb, var(--ak-accent) 22%, var(--ak-ink1)); --ds-s5: var(--ak-meta); --ds-s6: rgb(var(--ak-line) / 0.3);
  background: var(--ds-paper); color: var(--ds-ink); font-family: var(--ak-font); border-radius: 0; }
.ak-sheet-in { position: absolute; top: 0; left: 0; transform: scale(var(--ak-sheet-scale, 1)); transform-origin: top left; box-sizing: border-box; display: flex; flex-direction: column; padding: 44px 72px 36px; font-size: 17px; line-height: 1.42; overflow: hidden; }
.ak-sheet-in > * { min-width: 0; }
.ak-paper p, .ak-paper h1, .ak-paper h2, .ak-paper ul, .ak-paper ol, .ak-paper blockquote { margin: 0; }
.ak-paper ul, .ak-paper ol { padding: 0; list-style: none; }
.ak-sheet-chrome { display: flex; align-items: center; justify-content: space-between; height: 18px; margin-bottom: 30px; }
.ak-sheet-eyebrow { font-family: var(--ak-mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ds-meta); }
.ak-sheet-sticker { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border: 1px solid var(--ds-rule); border-radius: var(--ak-r-pill); font-family: var(--ak-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ds-ink2); }
.ak-sheet-body { display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; gap: 24px; }
.ak-sheet-title { font-family: var(--ak-display); font-weight: var(--ak-display-weight); font-size: 34px; line-height: 1.18; letter-spacing: -0.015em; color: var(--ds-ink); max-width: 1040px; text-transform: var(--ak-case); }
.ak-sheet-line { font-size: 15.5px; color: var(--ds-ink2); margin-top: auto; padding-top: 12px; border-top: 1px solid var(--ds-hair); }
.ak-sheet-crosshead { font-family: var(--ak-mono); font-size: 12.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ds-meta); padding-bottom: 10px; border-bottom: 1px solid var(--ds-rule); margin-bottom: 14px; }
.ak-sheet-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 20px; margin-top: auto; padding-top: 20px; font-size: 10.5px; color: var(--ds-meta); flex: none; }
.ak-sheet-source { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ak-sheet-foot-right { display: inline-flex; align-items: center; gap: 14px; flex: none; }
.ak-sheet-number { font-family: var(--ak-mono); letter-spacing: 0.08em; }
.ak-sheet-wordmark { font-family: var(--ak-display); font-weight: 700; letter-spacing: 0.02em; color: var(--ds-ink2); white-space: nowrap; }
.ak-sheet-mark { display: block; width: auto; object-fit: contain; }
.ak-sheet-glyph { display: inline-flex; align-items: center; justify-content: center; flex: none; border-radius: 50%; background: var(--ds-accent-wash); color: var(--ds-accent); box-sizing: content-box; padding: 11px; }
.ak-sheet-glyph svg { width: 100%; height: 100%; }
.ak-sheet-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ds-accent); }
.ak-sheet-picture { display: block; width: 100%; height: 100%; border-radius: var(--ak-r-tile); background: var(--ds-raised); }
.ak-sheet-picture.is-gone { display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px; box-sizing: border-box; color: var(--ds-meta); font-size: 14px; border: 1px dashed var(--ds-rule); }
/* cover */
/* The cover, the divider and the close fill the sheet themselves (art to the edges); the foot keeps its place under them. */
.ak-sheet-body.ak-sheet-cover, .ak-sheet-body.ak-sheet-divider, .ak-sheet-body.ak-sheet-close { position: absolute; inset: 0; margin: 0; box-sizing: border-box; }
.ak-sheet-cover { justify-content: space-between; padding: 44px 72px 48px; }
.ak-sheet-cover-art, .ak-sheet-cover-picture { position: absolute; inset: 0; z-index: 0; }
.ak-sheet-cover-art, .ak-sheet-divider-art, .ak-sheet-close-art { overflow: hidden; }
.ak-sheet-cover-art > * { width: 100%; height: 100%; }
.ak-sheet-cover-picture { border-radius: 0; }
.ak-sheet-cover-picture + .ak-sheet-cover-marks, .ak-sheet-cover-picture ~ .ak-sheet-cover-words { position: relative; z-index: 1; }
.ak-sheet-cover-picture ~ .ak-sheet-cover-words { padding: 24px 28px; margin: 0 -28px -28px; border-radius: var(--ak-r-sheet); background: color-mix(in srgb, var(--ds-paper) 82%, transparent); }
.ak-sheet-cover-marks { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; height: 28px; }
.ak-sheet-cover-words { position: relative; z-index: 1; max-width: 760px; display: flex; flex-direction: column; gap: 14px; }
.ak-sheet-cover-title { font-family: var(--ak-display); font-weight: var(--ak-display-weight); font-size: 60px; line-height: 1.05; letter-spacing: -0.02em; text-transform: var(--ak-case); }
.ak-sheet-cover-sub { font-size: 24px; line-height: 1.3; color: var(--ds-ink2); }
.ak-sheet-cover-date { font-family: var(--ak-mono); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ds-meta); margin-top: 6px; }
/* agenda · close */
.ak-sheet-agenda, .ak-sheet-close-steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 48px; align-content: start; }
.ak-sheet-agenda.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ak-sheet-agenda li, .ak-sheet-close-steps li { display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--ds-hair); align-items: baseline; }
.ak-sheet-agenda-n { grid-row: 1 / span 2; font-family: var(--ak-mono); font-size: 26px; color: var(--ds-accent); line-height: 1; }
.ak-sheet-agenda-name { font-family: var(--ak-display); font-size: 21px; font-weight: 600; line-height: 1.25; }
.ak-sheet-agenda-line { font-size: 15px; color: var(--ds-ink2); }
.ak-sheet-close { padding: 92px 72px 76px; }
.ak-sheet-close-art { position: absolute; top: 0; right: 0; bottom: 0; width: 46%; opacity: 0.55; pointer-events: none; }
.ak-sheet-close-art > * { width: 100%; height: 100%; }
.ak-sheet-close-words { position: relative; max-width: 700px; display: flex; flex-direction: column; gap: 24px; }
.ak-sheet-close-steps li span:last-child { font-size: 19px; line-height: 1.35; }
.ak-sheet-close-contact { font-family: var(--ak-mono); font-size: 13.5px; color: var(--ds-meta); margin-top: auto; }
/* divider · headline · quote */
.ak-sheet-divider { justify-content: center; padding: 44px 72px 76px; }
.ak-sheet-divider-art { position: absolute; inset: 0 0 0 52%; opacity: 0.7; }
/* A divider's illustration (2026-10-17): the right half, edge to edge, where the brand art stood. */
.ak-sheet-divider-picture { position: absolute; inset: 0 0 0 52%; width: 48%; height: 100%; object-fit: cover; }
.ak-sheet-divider-art > * { width: 100%; height: 100%; }
.ak-sheet-divider-words { position: relative; display: flex; flex-direction: column; gap: 10px; max-width: 620px; }
.ak-sheet-divider-n { font-family: var(--ak-mono); font-size: 96px; line-height: 1; color: var(--ds-accent); letter-spacing: -0.04em; }
.ak-sheet-divider-name { font-family: var(--ak-display); font-weight: var(--ak-display-weight); font-size: 44px; line-height: 1.1; letter-spacing: -0.015em; text-transform: var(--ak-case); }
.ak-sheet-divider-line { font-size: 20px; color: var(--ds-ink2); }
.ak-sheet-headline { justify-content: center; gap: 22px; max-width: 980px; }
.ak-sheet-headline-title { font-family: var(--ak-display); font-weight: var(--ak-display-weight); font-size: 40px; line-height: 1.15; letter-spacing: -0.02em; text-transform: var(--ak-case); }
.ak-sheet-headline-statement { font-size: 24px; line-height: 1.4; color: var(--ds-ink2); }
.ak-sheet-quote { justify-content: center; align-items: center; text-align: center; gap: 18px; padding: 0 60px; }
.ak-sheet-quote-mark { font-family: var(--ak-display); font-size: 120px; line-height: 0.6; color: var(--ds-accent); height: 56px; }
.ak-sheet-quote-words { font-family: var(--ak-display); font-size: 32px; line-height: 1.3; font-weight: 500; letter-spacing: -0.01em; max-width: 1000px; }
.ak-sheet-quote-who { font-family: var(--ak-mono); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ds-meta); }
/* points */
.ak-sheet-points { display: grid; gap: 28px 40px; align-content: start; }
.ak-sheet-points.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ak-sheet-points.is-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ak-sheet-points.is-six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ak-sheet-point { display: flex; gap: 18px; align-items: flex-start; }
.ak-sheet-point-head { font-family: var(--ak-display); font-size: 19px; font-weight: 600; line-height: 1.3; margin: 4px 0 6px; }
.ak-sheet-point-text { font-size: 16px; line-height: 1.45; color: var(--ds-ink2); }
/* columns · compare */
.ak-sheet-columns, .ak-sheet-compare.is-sides { display: grid; gap: 40px; align-content: start; }
.ak-sheet-compare.is-sides { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ak-sheet-column ul { display: flex; flex-direction: column; gap: 10px; }
.ak-sheet-column li { position: relative; padding-left: 18px; font-size: 16px; line-height: 1.42; }
.ak-sheet-column li::before { content: ''; position: absolute; left: 0; top: 0.72em; width: 8px; height: 2px; background: var(--ds-accent); }
.ak-sheet-compare.is-from-to { display: grid; grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr); column-gap: 8px; align-content: start; }
.ak-sheet-compare.is-from-to .ak-sheet-crosshead { margin-bottom: 0; }
.ak-sheet-compare.is-from-to .ak-sheet-crosshead.is-to { color: var(--ds-accent); border-bottom-color: var(--ds-accent); }
.ak-sheet-compare-from, .ak-sheet-compare-to, .ak-sheet-compare-arrow { padding: 15px 0; border-bottom: 1px solid var(--ds-hair); font-size: 17px; line-height: 1.4; }
.ak-sheet-compare-from { color: var(--ds-ink2); }
.ak-sheet-compare-to { font-weight: 600; }
.ak-sheet-compare-arrow { text-align: center; color: var(--ds-accent); font-size: 22px; line-height: 1.1; }
/* steps */
.ak-sheet-steps { display: grid; gap: 0 8px; align-content: start; }
.ak-sheet-step { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ak-sheet-chevron { position: relative; display: flex; align-items: center; gap: 12px; padding: 0 26px 0 38px; background: var(--ds-raised); color: var(--ds-ink); clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%, 22px 50%); }
.ak-sheet-step:first-child .ak-sheet-chevron { clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%); padding-left: 20px; }
.ak-sheet-step:nth-child(odd) .ak-sheet-chevron { background: var(--ds-accent); color: var(--ds-accent-ink); }
.ak-sheet-chevron-n { font-family: var(--ak-mono); font-size: 13px; opacity: 0.8; }
.ak-sheet-chevron-name { font-family: var(--ak-display); font-size: 17px; font-weight: 600; line-height: 1.2; }
.ak-sheet-step-line { font-size: 15.5px; line-height: 1.4; color: var(--ds-ink2); padding: 0 6px; }
/* timeline */
.ak-sheet-timeline { display: grid; align-content: start; row-gap: 4px; column-gap: 0; font-size: 14.5px; }
.ak-sheet-timeline-corner { font-family: var(--ak-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ds-meta); align-self: end; padding-bottom: 6px; }
.ak-sheet-timeline-unit { font-family: var(--ak-mono); font-size: 10.5px; color: var(--ds-meta); text-align: center; white-space: nowrap; overflow: visible; border-left: 1px solid var(--ds-hair); padding-bottom: 6px; align-self: end; }
.ak-sheet-timeline-group { display: flex; align-items: flex-end; height: 22px; font-family: var(--ak-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ds-ink2); border-bottom: 1px solid var(--ds-rule); padding-bottom: 3px; margin-top: 4px; }
.ak-sheet-timeline-label { display: flex; align-items: center; padding-right: 12px; line-height: 1.2; color: var(--ds-ink); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ak-sheet-timeline.is-tight { font-size: 13px; }
.ak-sheet-timeline-track { position: relative; }
.ak-sheet-timeline-bar { position: absolute; top: 50%; height: 60%; transform: translateY(-50%); border-radius: 3px; background: var(--ds-ink2); }
.ak-sheet-timeline-bar.is-accent { background: var(--ds-accent); }
.ak-sheet-timeline-bar.is-meta { background: var(--ds-meta); opacity: 0.55; }
/* stats */
.ak-sheet-stats { display: grid; gap: 24px; align-content: start; }
.ak-sheet-stat { display: flex; flex-direction: column; gap: 6px; padding: 26px 26px 24px; border-radius: var(--ak-r-tile); background: var(--ds-raised); min-height: 150px; box-sizing: border-box; }
.ak-sheet-stat.is-small { padding: 18px 20px; min-height: 0; }
.ak-sheet-stat-value { font-family: var(--ak-display); font-weight: var(--ak-display-weight); font-size: 58px; line-height: 1; letter-spacing: -0.03em; color: var(--ds-ink); }
.ak-sheet-stat.is-small .ak-sheet-stat-value { font-size: 38px; }
.ak-sheet-stat-label { font-size: 15px; font-weight: 600; margin-top: 8px; }
.ak-sheet-stat-line { font-size: 13.5px; color: var(--ds-meta); line-height: 1.35; }
/* table */
.ak-sheet-table { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.35; }
.ak-sheet-table th { font-family: var(--ak-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ds-meta); text-align: left; padding: 0 14px 10px 0; border-bottom: 1px solid var(--ds-rule); }
.ak-sheet-table td { padding: 11px 14px 11px 0; border-bottom: 1px solid var(--ds-hair); vertical-align: top; }
.ak-sheet-table td:first-child { font-weight: 600; }
.ak-sheet-harvey { display: inline-block; vertical-align: middle; color: var(--ds-ink); }
/* chart */
.ak-sheet-chart-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: start; flex: 1 1 0; min-height: 0; }
.ak-sheet-chart-row.has-callout { grid-template-columns: minmax(0, 760px) minmax(0, 1fr); }
.ak-sheet-chart-box { display: flex; flex-direction: column; gap: 10px; }
.ak-sheet-chart { display: block; max-width: 100%; height: auto; }
.ak-sheet-chart-grid { stroke: var(--ds-hair); stroke-width: 1; }
.ak-sheet-chart-axisline { stroke: var(--ds-rule); stroke-width: 1; }
.ak-sheet-chart-axis, .ak-sheet-chart-cat, .ak-sheet-chart-label, .ak-sheet-chart-value { font-family: var(--ak-mono); font-size: 12px; fill: var(--ds-meta); }
.ak-sheet-chart-cat { font-family: var(--ak-font); font-size: 13.5px; fill: var(--ds-ink); }
.ak-sheet-chart-value { fill: var(--ds-ink2); }
.ak-sheet-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 13px; color: var(--ds-ink2); }
.ak-sheet-legend span { display: inline-flex; align-items: center; gap: 7px; }
.ak-sheet-legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.ak-sheet-legend-unit { color: var(--ds-meta); margin-left: auto; font-family: var(--ak-mono); font-size: 12px; }
.ak-sheet-callout { align-self: stretch; display: flex; align-items: center; padding: 26px 28px; border-radius: var(--ak-r-tile); background: var(--ds-accent-wash); font-size: 19px; line-height: 1.4; font-weight: 500; }
/* story */
.ak-sheet-story { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 36px; flex: 1 1 0; min-height: 0; }
.ak-sheet-story.has-stats { grid-template-columns: minmax(0, 6fr) minmax(0, 2fr) minmax(0, 4fr); }
.ak-sheet-story-words { display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.ak-sheet-story-label { font-family: var(--ak-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ds-accent); }
.ak-sheet-story-title { font-family: var(--ak-display); font-weight: var(--ak-display-weight); font-size: 30px; line-height: 1.18; letter-spacing: -0.015em; text-transform: var(--ak-case); }
.ak-sheet-story-lead { font-size: 15.5px; line-height: 1.45; color: var(--ds-ink2); }
.ak-sheet-story-words .ak-sheet-crosshead { margin-top: 6px; margin-bottom: 4px; }
.ak-sheet-story-items { display: flex; flex-direction: column; gap: 8px; }
.ak-sheet-story-items li { position: relative; padding-left: 18px; font-size: 15px; line-height: 1.4; }
.ak-sheet-story-items li::before { content: ''; position: absolute; left: 0; top: 0.7em; width: 8px; height: 2px; background: var(--ds-accent); }
.ak-sheet-story-stats { display: flex; flex-direction: column; gap: 14px; justify-content: center; }
.ak-sheet-story-picture { height: 100%; min-height: 0; }
/* figure */
.ak-sheet-figure { display: flex; flex-direction: column; align-items: center; gap: 14px; flex: 1 1 0; min-height: 0; }
.ak-sheet-figure-picture { flex: 1 1 0; min-height: 0; width: auto; max-width: 100%; object-fit: contain !important; background: transparent; }
.ak-sheet-caption { font-size: 13.5px; color: var(--ds-meta); text-align: center; max-width: 900px; }

@media (prefers-reduced-motion: reduce) {
  .ak-pill, .ak-cell, .ak-field, .ak-row.is-quiet-verbs .ak-row-verbs, .ak-switch::after { transition: none; }
  .ak-seg.is-busy::before { animation: none; }
  .ak-map-mark.is-live { animation: none; }
  .ak-floor-canvas-campus, .ak-floor-canvas-campus.is-leaving, .ak-floor-canvas-studio, .ak-floor-canvas-studio.is-diving, .ak-floor-canvas-studio.is-standing, .ak-floor-canvas-seat, .ak-floor-canvas-veil, .ak-floor-canvas-plan, .ak-floor-canvas.is-skeleton, .ak-floor-rise, .ak-floor-late { animation: none; transition: none; }
}

:root {
  --legions-bg-base: hsl(230.0, 5.3%, 5.0%);
  --legions-bg-surface: hsl(230.0, 5.4%, 10.8%);
  --legions-bg-surface-hover: hsl(230.0, 5.5%, 18.0%);
  --legions-bg-elevated: hsl(230.0, 5.6%, 25.6%);
  --legions-bg-hover: hsl(230.0, 5.5%, 18.0%);
  --legions-border: hsl(230.0, 5.8%, 33.7%);
  --legions-border-strong: hsl(230.0, 5.9%, 42.2%);
  --legions-text-primary: hsl(245.0, 60.0%, 97.0%);
  --legions-text-secondary: hsl(230.0, 38.4%, 78.0%);
  --legions-text-muted: hsl(230.0, 16.8%, 59.7%);
  --legions-accent: hsl(245.0, 80.0%, 62.0%);
  --legions-accent-hover: hsl(245.0, 80.0%, 70.0%);
  --legions-accent-active: hsl(245.0, 80.0%, 54.0%);
  --legions-accent-text: hsl(245.0, 10.0%, 96.0%);
  --legions-accent-on-surface: hsl(245.0, 80.0%, 80.0%);
  --legions-accent2: hsl(305.0, 80.0%, 62.0%);
  --legions-accent2-text: hsl(305.0, 30.0%, 8.0%);
  --legions-accent2-on-surface: hsl(305.0, 80.0%, 74.0%);
  --legions-danger: hsl(4.0, 80.0%, 74.0%);
  --legions-danger-text: hsl(4.0, 35.0%, 8.0%);
  --legions-fluxer-primary: hsl(230.0, 5.3%, 7.0%);
  --legions-fluxer-secondary: hsl(230.0, 5.4%, 11.0%);
  --legions-fluxer-secondary-lighter: hsl(230.0, 5.4%, 14.0%);
  --legions-fluxer-tertiary: hsl(230.0, 5.5%, 18.0%);
  --legions-fluxer-header: hsl(230.0, 5.6%, 21.0%);
  --legions-fluxer-textarea: hsl(230.0, 5.6%, 23.0%);
  --legions-fluxer-mod-hover: hsla(0.0, 0.0%, 100.0%, 0.050);
  --legions-fluxer-mod-selected: hsla(0.0, 0.0%, 100.0%, 0.100);
  --legions-fluxer-divider-header: hsla(0.0, 0.0%, 100.0%, 0.035);
  --legions-fluxer-divider-user-area: hsla(0.0, 0.0%, 100.0%, 0.035);
  --legions-fluxer-text-primary: hsl(230.0, 20.0%, 96.0%);
  --legions-fluxer-text-secondary: hsl(230.0, 12.0%, 73.0%);
  --legions-fluxer-text-tertiary: hsl(230.0, 10.0%, 59.0%);
  --radius-sm: 9px;
  --radius: 18px;
  --radius-lg: 23.4px;
  --radius-xl: 32.4px;
  --radius-full: 9999px;
  --border-width: 1px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.1);
  --shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.14), 0 4px 6px -2px rgba(0,0,0,0.06);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.16), 0 10px 10px -5px rgba(0,0,0,0.06);
  --density: 1;
  --font-display: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --font-body: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono Variable", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --text-xs: 11.25px;
  --text-sm: 12.55px;
  --text-base: 14px;
  --text-lg: 16.8px;
  --text-xl: 19.44px;
  --text-2xl: 22.49px;
  --text-3xl: 26.02px;
  --text-4xl: 30.11px;
  --weight-display: 700;
  --weight-body: 400;
  --tracking: 0em;
  --tracking-heading: -0.02em;
  --leading: 1.45;
  --heading-transform: none;
  --motion-duration: 120ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --motion-lift: 1.2px;
  --bg-glow: 0;
  --edge-strength: 0.08;
  --rim-strength: 1;
}

:root[data-theme="light"] {
  --legions-bg-base: hsl(230.0, 26.2%, 100.0%);
  --legions-bg-surface: hsl(230.0, 9.7%, 94.0%);
  --legions-bg-surface-hover: hsl(230.0, 7.4%, 86.6%);
  --legions-bg-elevated: hsl(230.0, 6.8%, 78.7%);
  --legions-bg-hover: hsl(230.0, 7.4%, 86.6%);
  --legions-border: hsl(230.0, 6.5%, 70.3%);
  --legions-border-strong: hsl(230.0, 6.5%, 61.6%);
  --legions-text-primary: hsl(245.0, 40.0%, 5.0%);
  --legions-text-secondary: hsl(230.0, 25.6%, 24.6%);
  --legions-text-muted: hsl(230.0, 11.2%, 43.5%);
  --legions-accent: hsl(245.0, 80.0%, 48.0%);
  --legions-accent-hover: hsl(245.0, 80.0%, 40.0%);
  --legions-accent-active: hsl(245.0, 80.0%, 56.0%);
  --legions-accent-text: hsl(245.0, 10.0%, 96.0%);
  --legions-accent-on-surface: hsl(245.0, 80.0%, 48.0%);
  --legions-accent2: hsl(305.0, 80.0%, 48.0%);
  --legions-accent2-text: hsl(305.0, 30.0%, 8.0%);
  --legions-accent2-on-surface: hsl(305.0, 80.0%, 32.0%);
  --legions-danger: hsl(4.0, 80.0%, 35.0%);
  --legions-danger-text: hsl(4.0, 12.0%, 97.0%);
  --legions-fluxer-primary: hsl(230.0, 37.1%, 100.0%);
  --legions-fluxer-secondary: hsl(230.0, 23.9%, 97.5%);
  --legions-fluxer-secondary-lighter: hsl(230.0, 19.2%, 95.5%);
  --legions-fluxer-tertiary: hsl(230.0, 14.3%, 93.1%);
  --legions-fluxer-header: hsl(230.0, 78.5%, 98.5%);
  --legions-fluxer-textarea: hsl(230.0, 28.8%, 95.5%);
  --legions-fluxer-mod-hover: hsla(0.0, 0.0%, 0.0%, 0.050);
  --legions-fluxer-mod-selected: hsla(0.0, 0.0%, 0.0%, 0.100);
  --legions-fluxer-divider-header: hsla(0.0, 0.0%, 0.0%, 0.035);
  --legions-fluxer-divider-user-area: hsla(0.0, 0.0%, 0.0%, 0.035);
  --legions-fluxer-text-primary: hsl(230.0, 8.0%, 12.9%);
  --legions-fluxer-text-secondary: hsl(230.0, 4.0%, 44.6%);
  --legions-fluxer-text-tertiary: hsl(230.0, 4.0%, 56.5%);
}


html, body { margin: 0; }
body.st { min-height: 100vh; background: var(--ak-page); display: flex; flex-direction: column; align-items: center; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); box-sizing: border-box; }
.st-col { width: 100%; max-width: 1040px; min-width: 0; display: flex; flex-direction: column; gap: 28px; padding: 56px 0; box-sizing: border-box; }
.st-narrow { display: none; }
.st-updates[hidden] { display: none; }
.st-get button, #st-updates-go button { cursor: pointer; }
@media (max-width: 760px) {
  .st-wide { display: none; }
  .st-narrow { display: block; }
  .st-long { display: none; }
  .st-col { gap: 14px; padding: 16px 0 32px; }
}