/* Two Lanes design system. Generated from src/rest/ui/tokens.ts and src/rest/ui/scale.ts. */

@font-face {
  font-family: 'Schibsted Grotesk Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 400 900;
  src: url(/assets/fonts/schibsted-grotesk-latin-variable.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Instrument Sans Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url(/assets/fonts/instrument-sans-latin-variable.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/fonts/ibm-plex-mono-latin-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/fonts/ibm-plex-mono-latin-500.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light dark;
  --font-display: "Schibsted Grotesk Variable", "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: "Instrument Sans Variable", "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --text-2xs: 0.6875rem;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.3rem + 1vw, 1.875rem);
  --text-3xl: clamp(1.875rem, 1.5rem + 1.8vw, 2.5rem);
  --text-4xl: clamp(2.5rem, 1.8rem + 3.4vw, 4rem);
  --leading-tight: 1.05;
  --leading-snug: 1.15;
  --leading-heading: 1.25;
  --leading-lede: 1.45;
  --leading-body: 1.6;
  --track-hero: -0.032em;
  --track-display: -0.022em;
  --track-brand: -0.045em;
  --track-heading: -0.012em;
  --track-normal: 0;
  --track-label: 0.06em;
  --track-micro: 0.08em;
  --space-0: 0.125rem;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 999px;
  --motion-fast: 120ms;
  --motion-base: 180ms;
  --motion-slow: 320ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --shell: 76rem;
  --shell-app: 92rem;
  --measure: 62ch;
  --measure-tight: 46ch;
  --measure-hero: 17ch;
  --rail: 14.5rem;
  --rail-collapsed: 3.75rem;
  --bg: #F6F5F3;
  --surface: #FFFFFF;
  --surface-sunken: #EDEBE7;
  --surface-raised: #FFFFFF;
  --text: #141719;
  --text-2: #565D60;
  --text-3: #666E71;
  --accent: #0F5F5C;
  --accent-hover: #0B4A48;
  --accent-fill: #E4F0EE;
  --on-accent: #F2FBFA;
  --success: #1B6B3A;
  --warning: #7A5200;
  --danger: #A81E14;
  --focus: #0F5F5C;
  --rule: #DDD9D3;
  --rule-strong: #8A8379;
  --elev-1: 0 1px 2px rgb(20 23 25 / 0.06), 0 1px 1px rgb(20 23 25 / 0.04);
  --elev-2: 0 4px 12px rgb(20 23 25 / 0.08), 0 1px 3px rgb(20 23 25 / 0.06);
  --elev-3: 0 12px 32px rgb(20 23 25 / 0.12), 0 2px 8px rgb(20 23 25 / 0.08);
}

/* An explicit preference wins over the system setting. Absent a preference, the system decides. */
:root[data-theme='dark'] {
  color-scheme: dark;
  --bg: #101315;
  --surface: #1A1E20;
  --surface-sunken: #0B0E0F;
  --surface-raised: #242A2C;
  --text: #EDF0F0;
  --text-2: #9BA5A7;
  --text-3: #8A9496;
  --accent: #48C2B2;
  --accent-hover: #6BD3C5;
  --accent-fill: #0E2B29;
  --on-accent: #04211E;
  --success: #6FD08C;
  --warning: #E0B252;
  --danger: #FF8D7E;
  --focus: #48C2B2;
  --rule: #2C3234;
  --rule-strong: #6E7779;
  --elev-1: 0 1px 2px rgb(0 0 0 / 0.4);
  --elev-2: 0 4px 14px rgb(0 0 0 / 0.45);
  --elev-3: 0 16px 40px rgb(0 0 0 / 0.55);
}
:root[data-theme='light'] { color-scheme: light; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
  --bg: #101315;
  --surface: #1A1E20;
  --surface-sunken: #0B0E0F;
  --surface-raised: #242A2C;
  --text: #EDF0F0;
  --text-2: #9BA5A7;
  --text-3: #8A9496;
  --accent: #48C2B2;
  --accent-hover: #6BD3C5;
  --accent-fill: #0E2B29;
  --on-accent: #04211E;
  --success: #6FD08C;
  --warning: #E0B252;
  --danger: #FF8D7E;
  --focus: #48C2B2;
  --rule: #2C3234;
  --rule-strong: #6E7779;
  --elev-1: 0 1px 2px rgb(0 0 0 / 0.4);
  --elev-2: 0 4px 14px rgb(0 0 0 / 0.45);
  --elev-3: 0 16px 40px rgb(0 0 0 / 0.55);
  }
}

/* ---------- Reset ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { overflow-x: clip; }

body {
  margin: 0;
  overflow-x: clip;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  -webkit-text-size-adjust: 100%;
  font-variant-numeric: tabular-nums;
  text-rendering: optimizeLegibility;
}

img, svg { vertical-align: middle; }

/* ---------- Type ---------- */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--leading-snug);
  letter-spacing: var(--track-heading);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
h1 { font-size: var(--text-3xl); letter-spacing: var(--track-display); }
/* A count beside a page title is secondary: it is set at body size in the mono face, never at
   heading size. */
h1 .metric, h2 .denominator, h2 .metric {
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--text-2);
  letter-spacing: var(--track-normal);
}
h2 { font-size: var(--text-2xl); margin-top: var(--space-7); letter-spacing: var(--track-display); }
h3 { font-size: var(--text-xl); margin-top: var(--space-6); }
h4 { font-size: var(--text-lg); margin-top: var(--space-5); font-weight: 600; }

p, ul, ol, dl { margin: 0 0 var(--space-4); max-width: var(--measure); }
li { margin-bottom: var(--space-2); }
strong { font-weight: 600; }
hr { border: 0; border-top: 1px solid var(--rule); margin: var(--space-6) 0; }

.lede {
  font-size: var(--text-lg);
  line-height: var(--leading-lede);
  color: var(--text-2);
  max-width: 54ch;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--space-3);
}

a { color: var(--accent); text-underline-offset: 0.18em; }
a:hover { color: var(--accent-hover); text-decoration-thickness: 2px; }

/* ---------- Machine truth ----------
   Anything the system asserts is set in mono: capability names, identifiers, counts, sample sizes,
   timestamps, reason codes. Anything we say is set in the body face. The split is semantic. */
.mono, code, kbd, samp { font-family: var(--font-mono); font-size: 0.9375em; }
.metric {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.denominator {
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.5;
}
.unavailable { color: var(--text-2); font-style: italic; }
.note { color: var(--text-2); font-size: var(--text-sm); max-width: var(--measure); }

/* ---------- Focus ----------
   One ring, visible on every background. The outline sits outside a ring of page colour, so it
   stays legible even on a filled accent control where an accent outline alone would vanish. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 1px;
}
.btn:focus-visible, .chip:focus-visible, .rail-link:focus-visible, .slot-link:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--bg);
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -6rem;
  z-index: 30;
  padding: var(--space-3) var(--space-4);
  background: var(--accent);
  color: var(--on-accent);
  border-radius: var(--radius-sm);
  font-weight: 600;
  transition: top var(--motion-base) var(--ease);
}
.skip-link:focus { top: var(--space-4); }

/* ---------- Layout ---------- */

.shell { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 var(--space-4); }
.shell-wide { max-width: var(--shell-app); }
.prose { max-width: var(--measure); }
main { display: block; padding: var(--space-6) 0 var(--space-8); }
.stack > * + * { margin-top: var(--space-4); }

.section { padding-top: var(--space-7); border-top: 1px solid var(--rule); margin-top: var(--space-7); }
.section-plain { border-top: 0; }
.section:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
/* Section spacing is owned by the section, not by the heading inside it. Without this the section
   margin, the section padding and the heading margin compound into several rems of dead space. */
.section > :first-child,
.card > :first-child,
.state > :first-child,
.notice > :first-child,
.lane > :first-child,
.panel > :first-child { margin-top: 0; }
.section > :last-child,
.card > :last-child,
.state > :last-child,
.notice > :last-child,
.lane > :last-child,
.panel > :last-child { margin-bottom: 0; }

.grid { display: grid; gap: var(--space-4); margin: 0 0 var(--space-5); }
.grid-tight { gap: var(--space-3); }

/* ---------- Marketing masthead ---------- */

.masthead {
  border-bottom: 1px solid var(--rule);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 20;
}
.masthead-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--accent);
  text-decoration: none;
  margin-right: auto;
}
.brand-word {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: var(--track-brand);
  color: var(--text);
  text-transform: lowercase;
}

/* The navigation is a disclosure below the medium breakpoint and a row above it. It is built from
   a native details/summary disclosure, so it opens and closes with no script at all. */
/* Below the medium breakpoint the links scroll horizontally in one row rather than wrapping to a
   second line or hiding inside a disclosure. Nothing is ever unreachable and no script is involved. */
.site-nav { flex-basis: 100%; overflow-x: auto; margin: 0 calc(var(--space-4) * -1); padding: 0 var(--space-4); }
.site-nav ul {
  display: flex;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
  width: max-content;
}
.site-nav li { margin: 0; }
.site-nav a { white-space: nowrap; }
.site-nav a {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--text-2);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 500;
}
.site-nav a:hover { color: var(--text); background: var(--surface-sunken); }
.site-nav a[aria-current='page'] { color: var(--text); font-weight: 600; background: var(--accent-fill); }
.masthead-cta { display: none; }

/* ---------- Application shell ----------
   A grouped rail rather than the marketing masthead, so a signed-in surface never looks like a
   marketing page. The rail is a disclosure on narrow viewports for the same no-script reason. */

.app-bar {
  border-bottom: 1px solid var(--rule);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 20;
}
.app-bar-inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-3) var(--space-4);
}
.app-context {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex-wrap: wrap;
  min-width: 0;
}
.app-workspace {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-base);
  letter-spacing: var(--track-heading);
}
.app-meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-2);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
.app-bar-actions { margin-left: auto; display: flex; gap: var(--space-2); align-items: center; }

.app-layout { display: block; }
/* Below the large breakpoint the rail is a single scrolling row of sections — a tab bar — so it
   costs one row of height instead of eight hundred pixels above every page. The group labels stay
   in the accessibility tree via aria-labelledby and become visible headings on wide viewports. */
.app-rail { border-bottom: 1px solid var(--rule); background: var(--bg); }
.rail-inner { display: flex; flex-wrap: nowrap; gap: var(--space-4); padding: var(--space-2) var(--space-4); overflow-x: auto; }
/* The relative position below is load-bearing: the visually-hidden group label is absolutely
   positioned, so without a positioned ancestor its containing block is the viewport and its static
   position escapes the scroll container, extending the document to the full width of the rail. */
.rail-group { position: relative; display: flex; align-items: center; gap: var(--space-1); margin: 0; }
.rail-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.rail-group ul { display: flex; flex-wrap: nowrap; gap: var(--space-1); }
.rail-link { white-space: nowrap; }
.rail-group ul { list-style: none; margin: 0; padding: 0; max-width: none; }
.rail-group li { margin: 0 0 var(--space-0); }
.rail-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--text-2);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 500;
  min-height: 40px;
}
.rail-link:hover { background: var(--surface-sunken); color: var(--text); }
.rail-link[aria-current='page'] {
  background: var(--accent-fill);
  color: var(--text);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--accent);
}
.rail-link .icon { color: var(--text-3); flex: 0 0 auto; }
.rail-link[aria-current='page'] .icon { color: var(--accent); }
.rail-count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  background: var(--accent);
  color: var(--on-accent);
  border-radius: var(--radius-full);
  padding: 0.15em 0.5em;
}
.app-main { padding: var(--space-5) var(--space-4) var(--space-8); min-width: 0; }

/* ---------- Icons ---------- */

.icon { width: 1.25em; height: 1.25em; display: inline-block; }
.icon-sm { width: 1em; height: 1em; }

/* ---------- The lane system ----------
   The signature. Work you supplied sits in one lane, work your assistant prepared sits in the
   other, and an item visibly crosses between them. The distinction is never carried by hue: it is
   position, border treatment and a labelled tag, so it survives a colour vision deficiency, a
   monochrome print and a screen reader. */

.lanes { display: grid; gap: var(--space-4); margin: 0 0 var(--space-5); }
.lane {
  border-radius: var(--radius-md);
  padding: var(--space-4);
  border: 1px solid var(--rule);
  background: var(--surface);
  min-width: 0;
}
/* The assistant's lane is inset and its objects are drawn with a dashed edge, the same grammar the
   custody strip uses for a capability that was requested but not granted. */
.lane-assistant { background: var(--surface-sunken); border-style: dashed; border-color: var(--rule-strong); }
.lane-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin: 0 0 var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--rule);
}
.lane-title {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--text-2);
  margin: 0;
}
.lane-count { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-3); }

/* The crossing: the one orchestrated moment in the product. */
.lane-cross {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  padding: var(--space-2) 0;
}
.lane-cross .icon { color: var(--accent); }

/* ---------- Work item ----------
   One object, one anatomy, every surface: source, body, provenance, actions. A source post, a
   draft, a reviewed item, a reserved calendar entry and a published post are the same object in
   different states, which is what makes the product read as a pipeline rather than a set of tools. */

.work-item {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  box-shadow: var(--elev-1);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}
.work-item-pending { border-style: dashed; border-color: var(--rule-strong); box-shadow: none; }
.work-item-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.work-item-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: var(--track-heading);
}
.work-item-body { margin: 0; max-width: var(--measure-tight); }
.review-media {
  margin: var(--space-4) 0 0;
  display: grid;
  gap: var(--space-2);
}
.review-media img {
  display: block;
  max-width: 100%;
  max-height: 32rem;
  object-fit: contain;
  border: 1px solid var(--rule);
  border-radius: var(--radius-2);
  background: var(--surface-sunken);
}
.review-media figcaption {
  color: var(--text-2);
  font-size: var(--text-sm);
  line-height: var(--leading-copy);
}
.temporary-media-preview img { max-height: 12rem; }
/* Long source text is clamped so one post cannot make its card several times the height of its
   neighbour in a grid. The full text stays in the DOM and is reachable by the disclosure. */
.clamp {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.work-item-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin-top: auto;
  padding-top: var(--space-1);
}

/* ---------- Provenance ----------
   Where the work came from, who prepared it, and who it is waiting on. Rendered as a definition
   list so the pairs are readable rather than a run of words, and never inferred: a slot the domain
   cannot answer says so. */

.provenance {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  margin: 0;
  padding: var(--space-2) 0 0;
  border-top: 1px solid var(--rule);
  max-width: none;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.5;
}
.provenance div { display: flex; flex-wrap: wrap; column-gap: var(--space-2); align-items: baseline; min-width: 0; }
.provenance dt::after { content: ':'; }
.provenance dt { color: var(--text-3); margin: 0; }
.provenance dd { color: var(--text-2); margin: 0; overflow-wrap: anywhere; }
.provenance-waiting dd { color: var(--text); font-weight: 500; }
.provenance-unknown dd { color: var(--text-3); font-style: italic; }

/* ---------- Custody strip ----------
   A bracketed set in which every member is always rendered. A capability that was not granted, a
   horizon that was not captured and a metric that was not returned are drawn as present-but-withheld
   rather than omitted, because hiding an absence is the failure mode this product exists to
   prevent. */

.custody { display: flex; align-items: stretch; gap: var(--space-2); margin: 0 0 var(--space-4); flex-wrap: nowrap; }
.custody-bracket { flex: 0 0 auto; width: 9px; border: 2px solid var(--accent); border-radius: 2px; }
.custody-bracket-open { border-right: 0; }
.custody-bracket-close { border-left: 0; }
.custody-slots {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  flex: 1 1 auto;
  padding: var(--space-1) 0;
  list-style: none;
  margin: 0;
  max-width: none;
}
.slot {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  padding: 0.3em 0.6em;
  border-radius: var(--radius-xs);
  border: 1px solid var(--rule);
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  margin: 0;
}
.slot-granted { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.slot-withheld { color: var(--text-2); background: transparent; border-style: dashed; border-color: var(--rule-strong); }
.slot-state { font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--track-label); opacity: 0.85; }
.slot-link { text-decoration: none; }
.slot-link:hover { border-color: var(--accent); }

/* ---------- Automation preview ----------
   Real local checkboxes make the homepage demo selectable without implying that a marketing-page
   interaction changes an account. State is carried by the native checked value, knob position and
   an explicit on/off word, never by colour alone. */

.automation-preview {
  min-width: 0;
  border: 0;
  padding: 0;
  margin: 0 0 var(--space-3);
}
.automation-preview legend {
  padding: 0;
  margin: 0 0 var(--space-2);
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
}
.permission-toggles { display: grid; gap: var(--space-1); }
.permission-toggle {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-2);
  min-height: 32px;
  padding: var(--space-1) 0;
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
}
.permission-toggle:last-child { border-bottom: 0; }
.permission-name { color: var(--text); font-size: var(--text-xs); line-height: 1.25; }
.permission-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.permission-control {
  position: relative;
  width: 30px;
  height: 18px;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  background: var(--surface-sunken);
  transition: background var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease);
}
.permission-control::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--text-2);
  transition: transform var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease);
}
.permission-input:checked + .permission-control {
  background: var(--accent);
  border-color: var(--accent);
}
.permission-input:checked + .permission-control::after {
  background: var(--on-accent);
  transform: translateX(12px);
}
.permission-input:focus-visible + .permission-control {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}
.permission-state {
  min-width: 2.2em;
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
}
.permission-state::after { content: 'off'; }
.permission-input:checked ~ .permission-state::after { content: 'on'; color: var(--accent); }
.credential-boundary {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  padding-top: var(--space-2);
  border-top: 1px dashed var(--rule-strong);
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
}
.credential-boundary strong {
  color: var(--text);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
}

/* ---------- Buttons ----------
   One primary treatment, and it is the only filled control on any screen. Secondary is outlined,
   quiet is a ghost. The three are separated by fill, weight and size so a glance resolves which
   control commits. */

.actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin: var(--space-5) 0 0; }
.actions-tight { margin-top: var(--space-3); gap: var(--space-2); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.2;
  padding: 0.75em 1.25em;
  min-height: 44px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--on-accent);
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--elev-1);
  transition: background var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease),
    color var(--motion-fast) var(--ease), transform var(--motion-fast) var(--ease);
}
.btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); }
.btn:active { transform: translateY(1px); }

.btn-secondary {
  background: transparent;
  color: var(--accent);
  border-color: var(--accent);
  box-shadow: none;
}
.btn-secondary:hover { background: var(--accent-fill); color: var(--accent-hover); border-color: var(--accent-hover); }

.btn-quiet {
  background: transparent;
  color: var(--text-2);
  border-color: var(--rule-strong);
  font-weight: 500;
  box-shadow: none;
}
.btn-quiet:hover { background: var(--surface-sunken); color: var(--text); border-color: var(--rule-strong); }

.btn-danger { background: transparent; color: var(--danger); border-color: var(--danger); box-shadow: none; }
.btn-danger:hover { background: transparent; color: var(--danger); border-color: var(--danger); text-decoration: underline; }

.btn-lg { font-size: var(--text-base); padding: 0.9em 1.5em; min-height: 52px; }
.btn-sm { font-size: var(--text-xs); padding: 0.5em 0.85em; min-height: 36px; }

.btn[disabled], .btn[aria-disabled='true'] { opacity: 0.55; cursor: not-allowed; box-shadow: none; }

.link-quiet { color: var(--text-2); }
.link-quiet:hover { color: var(--text); }

/* ---------- Toolbar and chips ----------
   Controls are visually distinct from the content they filter: the toolbar is a sunken band, the
   results below it sit on raised surfaces. */

.toolbar {
  background: var(--surface-sunken);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin: 0 0 var(--space-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: flex-end;
}
.toolbar .field { margin-bottom: 0; flex: 1 1 12rem; min-width: 0; }
.toolbar-actions { display: flex; gap: var(--space-2); align-items: center; }
.toolbar-note { flex-basis: 100%; margin: 0; }

.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0 0 var(--space-4); padding: 0; max-width: none; }
.chips li { margin: 0; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  padding: 0.45em 0.8em;
  min-height: 36px;
  border-radius: var(--radius-full);
  border: 1px solid var(--rule-strong);
  color: var(--text-2);
  background: var(--surface);
  text-decoration: none;
  cursor: pointer;
}
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip[aria-current='true'], .chip-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  font-weight: 500;
}

/* ---------- Cards and panels ---------- */

.card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  box-shadow: var(--elev-1);
  min-width: 0;
}
.card-flat { box-shadow: none; }
.card h3, .card h4 { margin-top: 0; }
.card-title { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: baseline; justify-content: space-between; }

.panel {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--elev-2);
  min-width: 0;
}

/* ---------- Hero ---------- */

.hero { padding: var(--space-7) 0 var(--space-6); }
.hero h1 { font-size: var(--text-4xl); max-width: var(--measure-hero); letter-spacing: var(--track-hero); line-height: var(--leading-tight); }
.hero-split { display: grid; gap: var(--space-6); align-items: start; }
.hero-aside { min-width: 0; }

/* A single, restrained field above the homepage fold. It borrows the slow spatial movement of the
   Studio Pardesco shader without importing a client framework, WebGL, pointer tracking, or a second
   brand hue. The field is built entirely from the existing teal and surface tokens, then faded back
   into the page before the next section. */
.hero-field {
  position: relative;
  isolation: isolate;
  overflow: visible;
}
.hero-field > * { position: relative; z-index: 1; }
.hero-field::before {
  content: '';
  position: absolute;
  inset-block: -34% -20%;
  left: calc(50% - 50vw);
  width: 100vw;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 46% 54% at 17% 36%,
      color-mix(in srgb, var(--accent) 24%, transparent) 0%, transparent 72%),
    radial-gradient(ellipse 44% 50% at 73% 25%,
      color-mix(in srgb, var(--accent-fill) 82%, transparent) 0%, transparent 70%),
    radial-gradient(ellipse 52% 46% at 62% 78%,
      color-mix(in srgb, var(--accent) 13%, transparent) 0%, transparent 74%);
  background-position: 0% 8%, 100% 0%, 58% 100%;
  background-size: 118% 124%, 116% 120%, 126% 116%;
  filter: blur(38px) saturate(112%);
  opacity: 0.66;
  transform: translate3d(-2%, -1%, 0) scale(1.04) rotate(-1deg);
  transform-origin: 52% 48%;
  animation: hero-field-drift 13s ease-in-out infinite alternate;
  will-change: transform, opacity;
}
.hero-field::after {
  content: '';
  position: absolute;
  inset-block: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 52% 68% at 22% 43%,
      color-mix(in srgb, var(--bg) 48%, transparent) 0%, transparent 74%),
    linear-gradient(180deg, transparent 42%, var(--bg) 100%);
}
@keyframes hero-field-drift {
  0% {
    background-position: 0% 8%, 100% 0%, 58% 100%;
    transform: translate3d(-2%, -1%, 0) scale(1.04) rotate(-1deg);
    opacity: 0.58;
  }
  52% {
    background-position: 14% 0%, 78% 18%, 42% 82%;
    transform: translate3d(3%, 2%, 0) scale(1.1) rotate(1deg);
    opacity: 0.7;
  }
  100% {
    background-position: 4% 22%, 92% 8%, 68% 72%;
    transform: translate3d(-1%, 4%, 0) scale(1.06) rotate(0deg);
    opacity: 0.62;
  }
}
.example-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-2);
  border: 1px dashed var(--rule-strong);
  border-radius: var(--radius-xs);
  padding: 0.3em 0.6em;
  margin: 0 0 var(--space-3);
}

/* ---------- Guide artifact ----------
   A vector representation of the real PDF: its cover, page count and section rhythm. It is not a
   photograph and it does not imply anything the file does not contain. */

.guide-art { display: flex; gap: var(--space-3); align-items: stretch; margin: var(--space-5) 0; max-width: var(--measure-tight); }
.guide-cover {
  flex: 1 1 60%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4);
  min-height: 11rem;
  border-radius: var(--radius-md);
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: var(--elev-2);
}
.guide-kicker { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--track-micro); text-transform: uppercase; opacity: 0.85; }
.guide-title { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; line-height: var(--leading-snug); letter-spacing: var(--track-heading); }
.guide-meta { font-family: var(--font-mono); font-size: var(--text-xs); opacity: 0.85; }
.guide-spread {
  flex: 1 1 40%;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--rule);
  background: var(--surface);
  box-shadow: var(--elev-1);
}
.guide-line { display: block; height: 0.5rem; border-radius: 2px; background: var(--surface-sunken); border: 1px solid var(--rule); }
.guide-line-lg { height: 0.9rem; background: var(--accent-fill); border-color: var(--accent-fill); }
.guide-line-sm { width: 60%; }

/* ---------- Status ---------- */

.badge {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  padding: 0.3em 0.6em;
  border-radius: var(--radius-xs);
  border: 1px solid currentColor;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
}
.badge-ok { color: var(--success); }
.badge-warn { color: var(--warning); }
.badge-bad { color: var(--danger); }
.badge-idle { color: var(--text-2); border-style: dashed; }

/* ---------- Notices ---------- */

.notice {
  border: 1px solid var(--rule);
  border-left: 4px solid var(--text-3);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  background: var(--surface);
  margin: 0 0 var(--space-5);
  max-width: var(--measure);
}
.notice-title { font-weight: 600; margin: 0 0 var(--space-2); font-family: var(--font-display); letter-spacing: var(--track-heading); }
.notice-accent { border-left-color: var(--accent); }
.notice-warn { border-left-color: var(--warning); }
.notice-bad { border-left-color: var(--danger); }
.notice-ok { border-left-color: var(--success); }
.notice-wide { max-width: none; }
/* The observational notice is a response-contract element, not decoration. It is never collapsed,
   truncated or moved below the fold of the surface it qualifies. */
.observational { font-style: normal; margin: 0; }

/* ---------- Tables ---------- */

.table-scroll { overflow-x: auto; margin: 0 0 var(--space-5); border: 1px solid var(--rule); border-radius: var(--radius-md); }
table { border-collapse: collapse; width: 100%; min-width: 40rem; background: var(--surface); }
caption {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  color: var(--text-2);
  font-size: var(--text-sm);
  background: var(--surface-sunken);
}
th, td { text-align: left; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--rule); vertical-align: top; }
thead th {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--text-2);
  font-weight: 600;
  background: var(--surface-sunken);
}
tbody tr:last-child td, tbody tr:last-child th { border-bottom: 0; }
td.numeric, th.numeric { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ---------- Stat tile ----------
   Value first, label above it, denominator below. The label is never larger than the number it
   labels. */

.stat {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  box-shadow: var(--elev-1);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}
.stat-label {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--text-2);
  margin: 0;
}
.stat-value {
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  font-weight: 500;
  line-height: var(--leading-snug);
  letter-spacing: var(--track-normal);
  margin: 0;
  overflow-wrap: anywhere;
}
.stat-value-sm { font-size: var(--text-lg); }
.stat-note { color: var(--text-2); font-size: var(--text-xs); margin: 0; max-width: none; }
.stat-unavailable .stat-value { color: var(--text-3); font-style: italic; font-size: var(--text-lg); }

/* ---------- Charts ----------
   Server-rendered inline SVG. No script, no library, no external origin. Every chart carries its
   sample size inside the frame and every series is labelled, so colour is never the only channel
   separating one series from another. */

.chart { margin: 0 0 var(--space-5); }
.chart svg { display: block; width: 100%; height: auto; }
.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
  max-width: none;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-2);
}
.chart-legend li { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; }
.chart-key { width: 0.9rem; height: 0.9rem; border-radius: 2px; flex: 0 0 auto; }
.chart-key-subject { background: var(--accent); border: 1px solid var(--accent); }
/* The baseline series is an outline, not a second colour: two hues at the same lightness would be
   indistinguishable to many readers, and a second brand hue is not available by design. */
.chart-key-baseline { background: transparent; border: 1px dashed var(--rule-strong); }
.chart-note { color: var(--text-2); font-size: var(--text-xs); margin: var(--space-2) 0 0; }
.chart-label { fill: var(--text-2); font-family: var(--font-mono); font-size: 13px; }
.chart-value { fill: var(--text); font-family: var(--font-mono); font-size: 14px; font-weight: 500; }
.chart-n { fill: var(--text-3); font-family: var(--font-mono); font-size: 11px; }
.chart-insufficient { fill: var(--text-2); font-family: var(--font-mono); font-size: 12px; }
.chart-axis { stroke: var(--rule-strong); stroke-width: 1; }
.chart-track { fill: var(--surface-sunken); }
.chart-track-empty { fill: none; stroke: var(--rule-strong); stroke-width: 1; stroke-dasharray: 5 4; }
/* Subject is a solid fill, baseline is a dashed outline. The two series differ in form as well as
   in colour, and both are directly labelled in the legend, so colour is never the only channel. */
.chart-bar-subject { fill: var(--accent); }
.chart-bar-baseline { fill: none; stroke: var(--text-3); stroke-width: 1.5; stroke-dasharray: 5 3; }
.avail-available { fill: var(--accent); }
.avail-insufficient { fill: none; stroke: var(--text-3); stroke-width: 1.5; stroke-dasharray: 5 3; }
.avail-missing { fill: var(--surface-sunken); stroke: var(--rule-strong); stroke-width: 1; }
.chart-key-missing { background: var(--surface-sunken); border: 1px solid var(--rule-strong); }
.chart-empty {
  border: 1px dashed var(--rule-strong);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  color: var(--text-2);
  background: var(--surface-sunken);
}

/* ---------- Steps ----------
   Numbered because onboarding genuinely is an ordered sequence; order carries information the
   reader needs. Numbering is not used anywhere the content is merely a list. */

.steps { list-style: none; counter-reset: step; padding: 0; margin: 0; max-width: none; }
.steps > li {
  counter-increment: step;
  position: relative;
  padding-left: var(--space-7);
  padding-bottom: var(--space-5);
  border-left: 1px solid var(--rule);
  margin-left: var(--space-4);
}
.steps > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.steps > li::before {
  content: counter(step);
  position: absolute;
  left: -1rem;
  top: 0;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-full);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  background: var(--bg);
  color: var(--accent);
  border: 1px solid var(--accent);
}
.steps h3, .steps h2 { margin-top: 0; }
.steps p { max-width: var(--measure); }
.step-done::before { background: var(--accent); color: var(--on-accent); }
.compact-steps > li { padding-bottom: var(--space-3); }
.compact-steps p { margin-bottom: 0; }

/* A completed checklist collapses to one line rather than occupying the surface forever. */
.checklist-done {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-2);
  background: var(--surface-sunken);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  margin: 0 0 var(--space-4);
}
.checklist-done .icon { color: var(--success); }

/* ---------- Definition rows ---------- */

.rows { display: grid; gap: 0; margin: 0 0 var(--space-5); max-width: none; }
.rows > div {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  justify-content: space-between;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--rule);
}
.rows dt { color: var(--text-2); margin: 0; font-size: var(--text-sm); }
.rows dd { margin: 0; font-family: var(--font-mono); font-size: var(--text-sm); text-align: right; overflow-wrap: anywhere; }
.rows dd.plain { font-family: var(--font-body); }

/* ---------- Forms ---------- */

form { max-width: var(--measure); }
form.form-wide { max-width: none; }
.field { margin-bottom: var(--space-4); }
.field label { display: block; font-weight: 600; font-size: var(--text-sm); margin-bottom: var(--space-1); }
.field .hint { display: block; color: var(--text-2); font-size: var(--text-xs); margin-bottom: var(--space-2); }
input[type='text'], input[type='email'], input[type='number'], input[type='time'],
input[type='datetime-local'], select, textarea {
  font-family: var(--font-body);
  font-size: var(--text-base);
  width: 100%;
  padding: 0.6em 0.7em;
  min-height: 44px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-sm);
}
input:hover, select:hover, textarea:hover { border-color: var(--accent); }
textarea { min-height: 7rem; resize: vertical; font-size: var(--text-sm); }
/* Validation uses :user-invalid rather than :invalid, so an untouched required field is not
   painted as an error before anyone has tried to submit it. */
input:user-invalid, [aria-invalid='true'] { border-color: var(--danger); }
.checkbox { display: flex; gap: var(--space-3); align-items: flex-start; max-width: var(--measure); }
.checkbox input { width: 1.15rem; height: 1.15rem; margin-top: 0.28rem; flex: 0 0 auto; accent-color: var(--accent); }
.checkbox label { font-weight: 400; font-size: var(--text-base); }
.field-error { color: var(--danger); font-weight: 600; margin: var(--space-1) 0 0; font-size: var(--text-sm); }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
fieldset { border: 1px solid var(--rule); border-radius: var(--radius-md); padding: var(--space-4); margin: 0 0 var(--space-5); }
legend { font-weight: 600; padding: 0 var(--space-2); font-size: var(--text-sm); }

.secret {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  word-break: break-all;
  white-space: pre-wrap;
  display: block;
  padding: var(--space-3);
  border: 1px dashed var(--accent);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  margin-bottom: var(--space-3);
}

/* ---------- States ----------
   An empty surface is an invitation to act, not a blank page. The open slot is the stronger form:
   it draws the shape of the thing that is missing and names it. */

.state {
  border: 1px dashed var(--rule-strong);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  background: var(--surface-sunken);
  max-width: var(--measure);
}
.state h2, .state h3 { margin-top: 0; }

.open-slot {
  border: 1px dashed var(--rule-strong);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  background: transparent;
  color: var(--text-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 6rem;
  justify-content: center;
}
.open-slot-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0;
}
.open-slot p { margin: 0; font-size: var(--text-sm); }

/* ---------- Calendar ----------
   A week grid rather than a list ordered by timestamp, because a creator reads a week as coverage
   and gaps. Below the large breakpoint the columns stack into labelled days. */

.week { display: grid; gap: var(--space-3); margin: 0 0 var(--space-5); }
.week-day { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.week-day-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--rule);
}
.week-day-name { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--track-label); color: var(--text-2); }
.week-day-date { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 500; }
.week-day-today .week-day-date { color: var(--accent); }
.week-slot {
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  border: 1px solid var(--rule);
  background: var(--surface);
  box-shadow: var(--elev-1);
}
.week-slot-time { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-2); display: block; }
.week-slot-text { display: block; margin-top: var(--space-1); }

/* ---------- Disclosure ---------- */

details.disclosure {
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  background: var(--surface);
}
details.disclosure > summary { cursor: pointer; font-weight: 600; font-size: var(--text-sm); min-height: 32px; }
details.disclosure > summary::marker { color: var(--accent); }
details.disclosure[open] > summary { margin-bottom: var(--space-3); }

/* ---------- Footer ---------- */

.site-footer { border-top: 1px solid var(--rule); margin-top: var(--space-9); padding: var(--space-7) 0; background: var(--surface-sunken); }
.footer-cols { display: grid; gap: var(--space-5); margin: 0 0 var(--space-6); }
.footer-col-label { font-size: var(--text-xs); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: var(--track-micro); color: var(--text-3); margin: 0 0 var(--space-3); font-weight: 400; }
.footer-col ul { list-style: none; margin: 0; padding: 0; max-width: none; }
.footer-col li { margin: 0 0 var(--space-2); }
.footer-col a { color: var(--text-2); text-decoration: none; font-size: var(--text-sm); }
.footer-col a:hover { color: var(--text); text-decoration: underline; }
.disclaimer { color: var(--text-2); font-size: var(--text-xs); max-width: var(--measure); margin: 0 0 var(--space-2); }
.footer-brand { display: flex; align-items: center; gap: var(--space-2); color: var(--accent); margin-bottom: var(--space-4); }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Responsive ----------
   Mobile-first and additive. No layout container carries a fixed pixel width. */

@media (min-width: 30rem) {
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 46rem) {
  main { padding: var(--space-7) 0 var(--space-9); }
  .hero { padding: var(--space-8) 0 var(--space-7); }
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lanes-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .site-nav { flex-basis: auto; margin: 0 0 0 auto; padding: 0; overflow: visible; order: 2; }
  .site-nav ul { align-items: center; width: auto; }
  .masthead-cta { display: inline-flex; order: 3; margin-left: var(--space-4); }
}

@media (min-width: 64rem) {
  .hero-split { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--space-8); }
  .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .week { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-2); }
  .app-layout {
    display: grid;
    grid-template-columns: var(--rail) minmax(0, 1fr);
    gap: var(--space-6);
    max-width: var(--shell-app);
    margin: 0 auto;
    padding: 0 var(--space-4);
    align-items: start;
  }
  .app-rail { border-bottom: 0; position: sticky; top: 4.5rem; padding-top: var(--space-5); }
  .rail-inner { display: block; padding: 0; overflow: visible; }
  .rail-group { display: block; margin-bottom: var(--space-5); }
  .rail-group:last-child { margin-bottom: 0; }
  .rail-group ul { display: block; }
  .rail-group li { margin: 0 0 var(--space-0); }
  .rail-label {
    position: static;
    width: auto;
    height: auto;
    margin: 0 0 var(--space-2);
    padding: 0 var(--space-2);
    clip-path: none;
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    letter-spacing: var(--track-micro);
    text-transform: uppercase;
    color: var(--text-3);
  }
  .app-main { padding: var(--space-5) 0 var(--space-8); }
}

/* ---------- Reduced motion ----------
   Motion is removed; information is not. The handoff crossing becomes an immediate state change
   and its provenance strip still updates. */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .btn:active { transform: none; }
  .hero-field::before {
    animation: none;
    transform: translate3d(0, 0, 0) scale(1.06);
    opacity: 0.62;
  }
}

@media print {
  .site-nav, .app-rail, .actions, .skip-link, .toolbar { display: none; }
  body { background: #fff; color: #000; }
  .work-item, .card, .panel, .stat { box-shadow: none; border: 1px solid #999; }
}