/* site-bridge.css — DS visible pilot (2026-11-04, branch ds-visible-pilot).
   WHY THIS FILE EXISTS: A-Ink v1.1 ships inside `@layer ink`. Since MAKE-KIT-WIN step 1 the site CSS sits in `@layer legacy` below it, and this bridge sits in `@layer ink-site` above it, and every unlayered rule beats every
   layered rule regardless of specificity. The site's own CSS (src/styles/global.css + page <style>
   blocks) is unlayered, so with the kit merely loaded the site still won everywhere (computed-style
   diff = 0). This bridge is UNLAYERED and scoped to html[data-ds="ink"], so it only touches pages
   that opt in with <Base ds="ink">, and it does two things:
     1. points every site token at the kit's tokens, so all site rules that read tokens now render kit
        values (paper surfaces, warm ink, Newsreader display, IBM Plex text, kit radii and motion);
     2. neutralises the site rules that bypass tokens (glass blur, dark radial wash, hard-coded
        rgba panes, the 3D scene canvas) and restyles the shell, headings, cards and buttons in
        the kit's idiom.
   Kit values are referenced, never copied: change tokens.css in the kit and this follows. */

@layer ink-site {
html[data-ds="ink"] {
  color-scheme: light;
  /* surfaces */
  --void: var(--ink-bg);
  --void-lift: var(--ink-bg);
  --pane-1: var(--ink-surface);
  --pane-2: var(--ink-raised);
  --pane-3: var(--ink-overlay);
  --hairline: var(--ink-line);
  --code-surface: var(--ink-sunk);
  /* ink */
  --type: var(--ink-text);
  --dim: var(--ink-muted);
  --slate: var(--ink-muted);  /* the site uses --slate for small text; --ink-faint is not AA there on paper */
  /* state hues: the kit's three states */
  --proof: var(--ink-ok);
  --hold: var(--ink-hold);
  /* type */
  --sans: var(--ink-font-ui);
  --mono: var(--ink-font-mono);
  --fs-h1: var(--ink-fs-display);
  --fs-h2: var(--ink-fs-h2);
  --fs-h3: var(--ink-fs-h3);
  --fs-body: var(--ink-fs-body);
  --fs-ui: var(--ink-fs-sm);
  --fs-mono: var(--ink-fs-sm);
  --fs-caption: var(--ink-fs-sm);
  --fs-label: var(--ink-fs-xs);
  --fs-fine: var(--ink-fs-xs);
  --fs-micro: var(--ink-fs-xs);
  --fs-badge: var(--ink-fs-xs);
  /* geometry + motion */
  --r-sm: var(--ink-r-sm);
  --r-md: var(--ink-r-md);
  --r-lg: var(--ink-r-md);
  --tap-floor: var(--ink-target-phone);
  --fast: var(--ink-dur-fast);
  --pane: var(--ink-dur);
  --hero: var(--ink-dur-slow);
  --ease: var(--ink-ease);
  --lift-x: 0px;
  --frost: 0px;
  --weld: 0px;
}

/* page: flat paper, kit body type */
html[data-ds="ink"] body {
  background: var(--ink-bg);
  color: var(--ink-text);
  font-family: var(--ink-font-ui);
  font-weight: 400;
  line-height: var(--ink-lh);
}
/* main keeps the site's own measure: page layouts (e.g. the /how/ working-floor breakout) compute from it */

/* the 3D scene + its dark wash belong to the Under Glass look */
html[data-ds="ink"] .ps-canvas,
html[data-ds="ink"] .ps-wash { display: none; }

/* no glass anywhere: blur and the dark drop shadows off */
html[data-ds="ink"] * { -webkit-backdrop-filter: none; backdrop-filter: none; }

/* headings: Newsreader display, kit weights */
html[data-ds="ink"] h1,
html[data-ds="ink"] h2,
html[data-ds="ink"] h3 {
  font-family: var(--ink-font-display);
  color: var(--ink-text);
  letter-spacing: var(--ink-track-tight);
  line-height: var(--ink-lh-tight);
}
html[data-ds="ink"] h1 { font-weight: 500; }
html[data-ds="ink"] h2 { font-weight: 500; }
html[data-ds="ink"] h3 { font-weight: 500; font-family: var(--ink-font-ui); letter-spacing: 0; }

/* links: kit accent underline */
html[data-ds="ink"] a {
  color: var(--ink-text);
  text-decoration-color: var(--ink-accent);
  text-decoration-thickness: 1px;
}
html[data-ds="ink"] a:hover { color: var(--ink-accent); text-decoration-color: currentColor; }
html[data-ds="ink"] :focus-visible { outline: 2px solid var(--ink-text); outline-offset: 2px; }

/* eyebrows and mono labels: kit caps tracking */
html[data-ds="ink"] .eyebrow,
html[data-ds="ink"] .mono { font-family: var(--ink-font-mono); }
html[data-ds="ink"] .eyebrow { letter-spacing: var(--ink-track-caps); color: var(--ink-muted); }

/* code blocks: kit sunk surface */
html[data-ds="ink"] pre { background: var(--ink-sunk); border-color: var(--ink-line); }

/* ---- shell: the site header becomes the kit topbar ---- */
html[data-ds="ink"] .site-head {
  background: var(--ink-bg);
  border-bottom: 1px solid var(--ink-line);
  box-shadow: none;
}
html[data-ds="ink"] .site-head .wordmark {
  font-family: var(--ink-font-display);
  font-size: 1.375rem;
  font-weight: 500;
  letter-spacing: var(--ink-track-tight);
  text-transform: none;
  text-decoration: none;
  color: var(--ink-text);
}
/* upright accent "Lab": the italic face is a 147 KB download for three glyphs (site byte ceiling) */
html[data-ds="ink"] .site-head .wordmark b { font-style: normal; font-weight: 500; color: var(--ink-accent); }
html[data-ds="ink"] .brand-mark { display: none; }
html[data-ds="ink"] .site-nav a,
html[data-ds="ink"] .nav-set-label {
  font-family: var(--ink-font-ui);
  font-size: var(--ink-fs-sm);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-muted);
  text-decoration: none;
}
html[data-ds="ink"] .site-nav a:hover { color: var(--ink-text); }
html[data-ds="ink"] .site-nav a[aria-current="page"] {
  color: var(--ink-text);
  box-shadow: inset 0 -2px 0 var(--ink-accent);
}
html[data-ds="ink"] .nav-set { border-left-color: var(--ink-line); }
html[data-ds="ink"] .nav-set-label .arrow { color: var(--ink-accent); }
html[data-ds="ink"] .nav-toggle {
  background: var(--ink-surface);
  color: var(--ink-text);
  border: 1px solid var(--ink-line-strong);
  border-radius: var(--ink-r-sm);
  font-family: var(--ink-font-ui);
  text-transform: none;
  letter-spacing: 0;
}
@media (max-width: 720px) {
  html[data-ds="ink"] .site-nav { background: var(--ink-overlay); box-shadow: var(--ink-elev-2); }
}

/* ---- cards: doors, panes, receipts, chips become kit cards ---- */
html[data-ds="ink"] .door,
html[data-ds="ink"] .card,
html[data-ds="ink"] .lift .pane,
html[data-ds="ink"] .receipt,
html[data-ds="ink"] .lab-day {
  background: var(--ink-card);
  color: var(--ink-text);
  border: 1px solid var(--ink-line);
  border-radius: var(--ink-r-md);
  box-shadow: var(--ink-elev-1);
}
html[data-ds="ink"] .door:hover,
html[data-ds="ink"] .lift .pane:hover {
  border-color: var(--ink-line-strong);
  box-shadow: var(--ink-elev-2);
  transform: none;
}
html[data-ds="ink"] .door b { font-family: var(--ink-font-display); font-weight: 500; color: var(--ink-text); }
html[data-ds="ink"] .door span { color: var(--ink-muted); }
html[data-ds="ink"] .lift .pane { font-family: var(--ink-font-ui); color: var(--ink-muted); }
html[data-ds="ink"] .seal { color: var(--ink-accent); }

/* buttons: kit button shape */
/* kit button skin only (colour, border, radius, type): sizing stays with each component, because site
   widgets such as the /how/ relay stations sit in fixed rails */
html[data-ds="ink"] main button:not(.pane) {
  background: var(--ink-surface);
  color: var(--ink-text);
  border: 1px solid var(--ink-line-strong);
  border-radius: var(--ink-r-sm);
  font: 500 var(--ink-fs-sm)/1 var(--ink-font-ui);
}

/* ---- footer: the kit footer rule ---- */
html[data-ds="ink"] .site-foot {
  background: var(--ink-bg);
  border-top: 1px solid var(--ink-line);
  color: var(--ink-muted);
}
html[data-ds="ink"] .site-foot a { color: var(--ink-muted); }

/* ---- big numerals + live strip: kit display numerals ---- */
html[data-ds="ink"] .num {
  font-family: var(--ink-font-display);
  font-weight: 500;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--ink-text);
}
html[data-ds="ink"] .pulse .dot { box-shadow: none; }

/* the week section is a card that holds cards: give it the kit's card padding */
html[data-ds="ink"] .lab-day { padding: var(--ink-5); }

/* motion: A-Ink has no entry animations (R7 — transitions only, no non-loader keyframes). The Under Glass
   hero fade-in left text mid-fade when measured (axe colour-contrast on .masthead) and moved content on load. */
html[data-ds="ink"] .hero > *,
html[data-ds="ink"] [data-count],
html[data-ds="ink"] .crew-grid.run > * { animation: none; }

/* TraitWeave keeps its canvas (content the kit lacks), but its .tw-wash is a hard-coded dark legibility
   vignette made for the Under Glass backdrop; on paper it reads as a smudge. */
html[data-ds="ink"] .tw-wash { display: none; }

/* scroll-edge fades were hard-coded to the Under Glass near-black; on paper they fade to the kit page */
html[data-ds="ink"] .scrollcue-auto::after,
html[data-ds="ink"] .verify-cmd-wrap::after,
html[data-ds="ink"] .skills-frame[data-more]::after {
  background: linear-gradient(90deg, transparent, var(--ink-bg));
}
/* /blender-mcp/ sticky sheet header: dark glass -> kit raised surface */
html[data-ds="ink"] .bm-sheet-panel {
  background: var(--ink-overlay);
  box-shadow: var(--ink-elev-2);
}
html[data-ds="ink"] .bm-sheet summary {
  background: var(--ink-raised);
  color: var(--ink-text);
  box-shadow: var(--ink-elev-1);
}

/* /projects/ tiles: where the caption sits ON the screenshot (over the dark legibility scrim, not split
   tiles), it reads in paper, not ink; the scrim itself stays because it is over an image. */
html[data-ds="ink"] .tile:not(.split) .body {
  --type: var(--ink-bg);
  --dim: var(--ink-bg);
  color: var(--ink-bg);
}
html[data-ds="ink"] .tile:not(.split) .body a,
html[data-ds="ink"] .tile:not(.split) .body :is(h1, h2, h3) { color: var(--ink-bg); }

/* IBM Plex Mono at the kit's sizes is wider than Geist Mono was: let mono chips and table headers wrap
   instead of pushing the page sideways (/tech-stack/ chip row at 380, /blender-mcp/ table at 768) */
html[data-ds="ink"] .chip { white-space: normal; overflow-wrap: anywhere; }
html[data-ds="ink"] main th { white-space: normal; }

/* contrast on paper (axe): */
/* /how/ floor hint was a hard-coded violet tuned for the dark page */
html[data-ds="ink"] .floor-hint { color: var(--ink-muted); }
/* /now/ replay dims not-yet-reached steps with opacity (.5, and .45 on the counters inside: ~.38 combined).
   No dim level keeps the kit's muted ink AA on paper, so pending steps stay full-strength; their state is
   still carried by the check markers, and each step lights when the replay reaches it. */
html[data-ds="ink"] .chain.arm .ct:not(.lit),
html[data-ds="ink"] .chain.arm .chk-eq { opacity: 1; }
/* /projects/ split tiles: the caption is a real column, not an overlay, so the stage mat is a kit card,
   not the Under Glass near-black (#0d1117) */
html[data-ds="ink"] .tile.split .stage { background: var(--ink-card); }

/* hard-coded white-alpha panes (invisible on paper) -> kit cards; white hairline -> kit line */
html[data-ds="ink"] .ct,
html[data-ds="ink"] .rs,
html[data-ds="ink"] .lg,
html[data-ds="ink"] .slot { background: var(--ink-card); }
html[data-ds="ink"] .track { background: var(--ink-line); }
/* /projects/: chips and pills that sit ON the screenshot scrim read in paper (state colour kept on the border) */
html[data-ds="ink"] .tile:not(.split) .chip.live { color: var(--ink-bg); border-color: var(--ink-ok); }
html[data-ds="ink"] .stage .open { color: var(--ink-bg); }

/* the focused skip link was a near-black pane: on paper it would be ink on near-black */
html[data-ds="ink"] .skip-link:focus-visible {
  background: var(--ink-overlay);
  color: var(--ink-text);
  border-color: var(--ink-line-strong);
  box-shadow: var(--ink-elev-2);
}

/* 24px tap floor (site guard D54): the kit's tighter heading line-height left card-title links and the
   /now/ deploy links at 16-19px tall; padding restores the target without moving the text */
html[data-ds="ink"] main :is(h2, h3) > a,
html[data-ds="ink"] .seat-live a {
  display: inline-block;
  padding-block: 4px;
  margin-block: -4px;
}
html[data-ds="ink"] main button { min-height: 24px; }

/* /how/ working floor: the canvas now draws on paper (palette remap in WorkingFloor.astro); its stage,
   scrollbar and right-edge fade follow */
html[data-ds="ink"] .floor-stage { background: var(--ink-card); border-color: var(--ink-line); box-shadow: var(--ink-elev-1); scrollbar-color: var(--ink-line-strong) transparent; }
html[data-ds="ink"] .floor-wrap::after { background: linear-gradient(90deg, transparent, var(--ink-card)); }

/* /projects/ at phone width: the overlay caption is taller than a 16:10 stage in IBM Plex and was clipped at
   the top. Stack instead: the screenshot keeps its 16:10 box, the caption sits below it on the card in ink. */
@media (max-width: 720px) {
  html[data-ds="ink"] .tile:not(.split) .stage { aspect-ratio: auto; padding-top: 62.5%; background: var(--ink-card); }
  html[data-ds="ink"] .tile:not(.split) :is(.shot, .cap, .motif) { inset: 0 0 auto 0; height: auto; aspect-ratio: 16 / 10; }
  html[data-ds="ink"] .tile:not(.split) .stage::after { display: none; }
  html[data-ds="ink"] .tile:not(.split) .body { position: static; background: none; padding-top: var(--ink-5); --type: var(--ink-text); --dim: var(--ink-muted); color: var(--ink-text); }
  html[data-ds="ink"] .tile:not(.split) .body a,
  html[data-ds="ink"] .tile:not(.split) .body :is(h1, h2, h3) { color: var(--ink-text); }
  html[data-ds="ink"] .tile:not(.split) .chip.live { color: var(--ink-ok); }
}

/* bold is the kit's 600 (the face it ships and Base preloads). Browser-default 700 has no face, so first
   paint synthesised a wider fallback bold and bold-bearing paragraphs re-wrapped when Plex arrived. */
html[data-ds="ink"] :is(b, strong) { font-weight: 600; }

/* /incubator/: the funnel's entry run is a non-loader keyframe animation (A-Ink R7: transitions only) and it
   moved every case marker on load; on A-Ink pages the funnel renders in its finished, static state */
html[data-ds="ink"] .funnel.run :is(.f-dot, .fcase) { animation: none; }

/* /now/ replay: #cnight's resting text wraps to three lines in Plex Mono and the replay swaps in a two-line
   one, so the whole chain header shrank by a line once the replay started; reserve the three lines */
html[data-ds="ink"] #cnight { min-height: 3lh; }

/* long unbreakable tokens (paths, flags) in prose break only when they would overflow the column
   (/blender-mcp/ section 27 at 380px) */
html[data-ds="ink"] main :is(p, li) { overflow-wrap: break-word; }
/* /blender-mcp/ contents rail links: 20px tall -> the 24px tap floor */
html[data-ds="ink"] .bm-toc a { padding-block: 2px; }
/* inline prose links (/blender-mcp/ reference URLs, 20px): inline padding grows the tap box to the 24px floor
   without changing line layout */
html[data-ds="ink"] .bm-body :is(p, li) > a { padding-block: 2px; }

/* /skills/: the table is set in mono as a whole; prose cells (what it does, when to reach for it) read in the
   kit's text face, names and types stay mono labels */
html[data-ds="ink"] .skills.mono td:nth-child(n+3) { font-family: var(--ink-font-ui); font-size: var(--ink-fs-sm); line-height: 1.5; }

} /* @layer ink-site */