/**
 * tacit.css — Styles specific to "Tacit — A Haptic Vocabulary for State Over
 * Time" (case-01-tacit-haptics.html).
 *
 * Filename slug is content-based, per the 2026-05 convention: the asset name
 * never drifts when the case's display position changes.
 *
 * Base case-study tokens and shared components (overview cards, cs-nav,
 * section numerals) live in case-study.css. global.css provides brand tokens
 * (--ink, --accent, --f-display, etc.). The hero/section template layer is
 * duplicated per case by architecture (ADR-001, no build step) — this copy
 * follows meta-case.css, with the numbered-section form from logitech.css.
 *
 * What's here:
 *   • Hero grid + workspace-plate frame
 *   • Section scaffolding (labels, titles, intros, callouts)
 *   • Responsive breakpoints (1024 tablet, 768 mobile)
 */

/* ═══ CASE STUDY OVERRIDES ═══ */
.case-study { position: relative; z-index: 1; }

/* ═══ BACK LINK ═══ */
.back-link {
  max-width: var(--cs-content-max); margin: 0 auto;
  padding: 1.25rem var(--cs-gutter) 0;
  font-family: var(--f-mono); font-size: 0.68rem;
  letter-spacing: 0.18em; text-transform: uppercase;
}
.back-link a { color: var(--accent-on-light); text-decoration: none; transition: color 0.2s; }
.back-link a:hover { color: var(--ink); }

/* ═══ HERO ═══ */
.cs-hero {
  display: grid;
  /* minmax(0, ·fr) rather than the sibling template's bare fr: the meta row's
     white-space:nowrap values define the left column's min-content, and bare
     fr respects it — long values collapse the plate column to ~28px. The
     guard pins the 55/45 split regardless of content. */
  grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
  gap: 5rem;
  align-items: start;
  padding: 2.5rem var(--cs-gutter) var(--cs-section-gap);
  max-width: var(--cs-content-max); margin: 0 auto;
  position: relative; overflow: hidden;
}

.cs-hero-content { display: flex; flex-direction: column; }

.cs-hero-visual {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 0.5rem;
}

.cs-hero-mockup {
  width: 100%;
  aspect-ratio: 16 / 10;
  background: var(--ink-soft);
  border: 1px solid var(--ink);
  position: relative;
  overflow: hidden;
}

.cs-hero-mockup img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: top;
  display: block;
}

/* corner brackets on mockup */
.cs-hero-mockup::before {
  content: '';
  position: absolute; top: 12px; left: 12px;
  width: 20px; height: 20px;
  border-top: 1px solid var(--accent);
  border-left: 1px solid var(--accent);
  z-index: 2;
}
.cs-hero-mockup::after {
  content: '';
  position: absolute; bottom: 12px; right: 12px;
  width: 20px; height: 20px;
  border-bottom: 1px solid var(--accent);
  border-right: 1px solid var(--accent);
  z-index: 2;
}

.cs-mockup-label {
  position: absolute; bottom: -1.75rem; left: 0;
  font-family: var(--f-mono); font-size: 0.6rem;
  color: var(--ink-mid); letter-spacing: 0.15em;
  text-transform: uppercase;
}

.cs-hero-number {
  font-family: var(--f-mono); font-size: 0.68rem; color: var(--accent-on-light);
  letter-spacing: 0.18em; text-transform: uppercase;
  margin-bottom: var(--cs-element-gap); opacity: 0; animation: slideUp 0.8s var(--ease) 0.1s forwards;
}

/* Hero context note — the register line between // 001 and the H1: external
   developer, submitted to the Marketplace, source public. Subtler than
   .cs-hero-description so the H1 keeps primary visual weight. */
.cs-hero-context {
  font-family: var(--f-body); font-size: 0.82rem; line-height: 1.6;
  font-weight: 300; color: var(--ink-mid);
  max-width: 600px;
  margin-bottom: var(--cs-element-gap);
  opacity: 0; animation: slideUp 0.8s var(--ease) 0.15s forwards;
}
.cs-hero-context-label {
  font-family: var(--f-mono); font-size: 0.62rem;
  color: var(--accent-on-light); letter-spacing: 0.18em;
  text-transform: uppercase; margin-right: 0.6rem;
}

.cs-hero-title {
  font-family: var(--f-display); font-size: clamp(2rem, 3.5vw, 3.5rem);
  font-weight: 700; line-height: 1.05; margin-bottom: var(--cs-element-gap); letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0; animation: slideUp 0.8s var(--ease) 0.2s forwards;
}
.cs-hero-title span { color: var(--ink); }

.cs-tags {
  display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: var(--cs-inner-gap);
  opacity: 0; animation: slideUp 0.8s var(--ease) 0.3s forwards;
}
.cs-tag {
  font-family: var(--f-mono); font-size: 0.62rem; padding: 0.5rem 1rem;
  border: 1px solid var(--ink); border-radius: 0;
  text-transform: uppercase; letter-spacing: 0.18em; transition: all 0.3s var(--ease);
}
.cs-tag:hover { background: var(--ink); color: var(--bg); }

.cs-hero-description {
  font-family: var(--f-body); font-size: 1rem; line-height: 1.8;
  font-weight: 300;
  margin-bottom: var(--cs-inner-gap); max-width: 600px;
  opacity: 0; animation: slideUp 0.8s var(--ease) 0.4s forwards;
}

.cs-hero-meta {
  display: grid; grid-template-columns: repeat(4, auto);
  justify-content: start;
  gap: 0.5rem 2.5rem;
  opacity: 0; animation: slideUp 0.8s var(--ease) 0.5s forwards;
}
.cs-meta-item { font-family: var(--f-mono); }
.cs-meta-label {
  color: var(--accent-on-light); text-transform: uppercase; letter-spacing: 0.18em;
  font-size: 0.58rem; margin-bottom: 0.35rem; display: block;
}
.cs-meta-value {
  color: var(--ink); font-size: 0.75rem; letter-spacing: 0.05em;
  white-space: nowrap;
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ═══ SURFACE-SCOPED MUTED TOKENS ═══
   --ink-dim / --ink-mid are light-surface values. Dark containers remap them
   to the on-dark equivalents from global.css so every descendant resolves to
   a WCAG-AA value for its actual surface. */
.callout, .cs-hero-mockup {
  --ink-dim: var(--ink-dim-on-dark);
  --ink-mid: var(--ink-mid-on-dark);
}

/* ═══ HERO STAGE — the vocabulary, running ═══
   The portfolio identity governs everything on this page — ruled 4 Sep,
   superseding 3 Sep's "workspace identity lives inside the figure". Ink
   is the site's ink, and the pulses are phosphor: green is this site's
   word for signal, and the haptic events ARE the signal. Rings animate
   on transform + opacity only, driven by tacit.js; the ring origin sits
   on the Actions Ring in Rico's drawing — 50.32% / 65.57% of the device
   box, measured off the Figma node. */
.tacit-stage {
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tacit-device-wrap {
  position: relative;
  width: 86%;
}
.tacit-device {
  width: 100%;
  height: auto;
  display: block;
}
.tacit-rings {
  position: absolute;
  left: 50.32%;
  top: 65.57%;
  width: 0;
  height: 0;
}
.tacit-ring {
  position: absolute;
  left: -60px;
  top: -60px;
  width: 120px;
  height: 120px;
  /* 3px, not the drawing's hairline: an animated pulse is signal, and a
     1.5px ring at pulse opacity disappears at capture and retina scales.
     transform scale also scales the border, so the wave gains weight as
     it grows — deliberate. */
  border: 3px solid var(--accent-on-light);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.12);
  will-change: transform, opacity;
}
/* Static frame — what no-JS and prefers-reduced-motion readers see:
   one faint standing ring. tacit.js zeroes this out before animating. */
.tacit-ring:first-child { opacity: 0.3; transform: scale(1.1); }

/* ═══ HERO READOUT — semantic → primitive, all text in markup ═══ */
.tacit-readout {
  margin-top: 1.1rem;
  width: 100%;
  font-family: var(--f-mono);
}
.tacit-readout-head {
  display: block;
  font-size: 0.55rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 0.5rem;
}
.tacit-readout-row {
  display: grid;
  grid-template-columns: 12px 130px 1fr;
  align-items: baseline;
  gap: 0 0.6rem;
  padding: 0.22rem 0;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: var(--ink-mid);
  border-bottom: 1px solid rgba(8, 8, 8, 0.07);
  transition: color 0.25s;
}
.tacit-readout-row:last-child { border-bottom: 0; }
.tacit-readout-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(8, 8, 8, 0.18);
  align-self: center;
  transition: background 0.25s, box-shadow 0.25s;
}
.tacit-readout-sem { color: var(--ink); }
.tacit-readout-row.is-live { color: var(--ink); }
.tacit-readout-row.is-live .tacit-readout-dot {
  background: var(--accent-on-light);
  box-shadow: 0 0 0 3px rgba(0, 104, 133, 0.15);
}
.tacit-readout-row.is-live .tacit-readout-prim { color: var(--accent-on-light); }
.tacit-readout-row[data-state="failed"].is-live .tacit-readout-dot { background: var(--error-on-light); box-shadow: 0 0 0 3px rgba(196, 37, 37, 0.15); }
.tacit-readout-row[data-state="failed"].is-live .tacit-readout-prim { color: var(--error-on-light); }

/* The label sits in flow on this page — the readout occupies the space the
   template's absolute label assumed empty. */
.cs-hero-visual { flex-direction: column; }
.cs-hero-visual .cs-mockup-label {
  position: static;
  margin-top: 0.9rem;
  align-self: flex-start;
}

/* ═══ SECTIONS ═══ */
.cs-section {
  max-width: var(--cs-content-max); margin: 0 auto;
  padding: var(--cs-section-gap) var(--cs-gutter);
  position: relative;
}
.cs-section-label {
  position: absolute; left: 16px; top: 50%;
  translate: 0 -50%;
  font-family: var(--f-mono); font-size: 0.58rem;
  text-transform: uppercase; letter-spacing: 0.22em; color: var(--ink-dim);
  writing-mode: vertical-rl; transform: rotate(180deg);
  pointer-events: none;
}
.cs-section-title {
  font-family: var(--f-display); font-size: 2rem; font-weight: 700;
  margin-bottom: 0.5rem; padding-left: 3rem;
  letter-spacing: 0.05em; text-transform: uppercase;
}
.cs-section-intro {
  font-family: var(--f-body); font-size: 1rem; line-height: 1.8;
  color: var(--ink-mid); margin-bottom: var(--cs-section-gap);
  padding-left: 3rem; font-weight: 300;
}
.cs-section > p {
  font-size: 0.95rem; line-height: 1.8; font-weight: 300;
  margin-bottom: var(--cs-element-gap); max-width: 72ch;
  padding-left: 3rem;
}

/* ═══ CALLOUT ═══ */
/* Rico's call, 4 Sep: section 01 and every callout take the page's wide
   idiom — the one the figures use, indented 3rem on the left and flush to
   the right edge, so all three land on the same left rule. The 72ch cap
   goes; the line runs long at this width and that is the trade he made
   knowingly, for a section that opens the case and for a component that
   states rather than explains. Scoped to this stylesheet, so no sibling
   case is touched. */
.cs-section--wide > p,
.cs-section--wide > .cs-section-intro { max-width: none; }

.callout {
  background: var(--dark); color: var(--bg);
  padding: var(--cs-inner-gap); margin: var(--cs-element-gap) 0 var(--cs-element-gap) 3rem;
  border-left: 3px solid var(--accent);
}
.callout-label {
  font-family: var(--f-mono); font-size: 0.7rem;
  text-transform: uppercase; letter-spacing: 2px;
  color: var(--accent); margin-bottom: 0.75rem; display: block;
}
.callout p { font-size: 1rem; line-height: 1.8; color: var(--bg); font-weight: 300; }

/* ═══ FIGURES — code-drawn, in the site's own palette ═══
   Ruled 4 Sep: the portfolio identity governs the figures too. Site ink
   for structure; phosphor for signal (events, edges, arrows, counts —
   green is this site's word for "it speaks"); absence and risk drawn by
   FORM — dashed, hatched, weight — never by an invented hue.
   Every count drawn is a real count: 31 ticks, 39 row marks (33/5/1),
   20 filled dots, 12 open circles. */
/* Figures span the full content column — the page's rhythm is narrow
   prose (72ch) against full-bleed plates, like the sibling cases and the
   workspace's own plates. Widths come from the column, never from
   per-figure caps (Rico's audit, 3 Sep). */
.tacit-fig {
  margin: var(--cs-element-gap) 0 var(--cs-inner-gap) 3rem;
  border: 1px solid var(--ink);
  background: var(--bg);
}
.tacit-fig-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.8rem 1.1rem;
  border-bottom: 1px solid rgba(8, 8, 8, 0.12);
}
.tacit-fig-title {
  font-family: var(--f-mono); font-size: 0.62rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink);
}
.tacit-fig-note {
  font-family: var(--f-mono); font-size: 0.62rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-dim); text-align: right;
}
.tacit-fig-foot {
  padding: 0.8rem 1.1rem;
  border-top: 1px solid rgba(8, 8, 8, 0.12);
  font-size: 0.82rem; line-height: 1.65; font-weight: 300;
  color: var(--ink-mid);
}

.tacit-eco-scroll { overflow-x: auto; }

/* — Fig. 06 · the closing loop — */
.tacit-loop { min-width: 760px; position: relative; padding: 1.2rem 1.1rem 3rem; }
.tacit-loop-row { display: flex; align-items: stretch; gap: 0.8rem; }
.tacit-loop-station {
  flex: 1;
  border: 1px solid var(--ink);
  background: var(--bg);
  padding: 0.65rem 0.8rem;
}
.tacit-loop-station img { display: block; width: auto; margin-bottom: 0.45rem; }
.tacit-loop-station .tacit-eco-icpair { margin-bottom: 0.45rem; }
.tacit-loop-station b {
  display: block;
  font-family: var(--f-mono); font-weight: 400; font-size: 0.7rem;
  color: var(--ink); margin-bottom: 0.2rem;
}
.tacit-loop-station em {
  display: block; font-style: normal;
  font-family: var(--f-mono); font-size: 0.62rem; line-height: 1.55;
  color: var(--ink-dim);
}
.tacit-loop-arrow { align-self: center; font-family: var(--f-mono); font-size: 1.05rem; color: var(--accent-on-light); }
/* straight elbows, not a curve — down from the base of the last station,
   across, up into the base of the first (the red rail's grammar) */
.tacit-loop-return {
  position: absolute;
  left: 12%; right: 12%; bottom: 1.5rem; height: 34px;
  border-left: 1px dashed rgba(8, 8, 8, 0.45);
  border-right: 1px dashed rgba(8, 8, 8, 0.45);
  border-bottom: 1px dashed rgba(8, 8, 8, 0.45);
}
.tacit-loop-return-lab {
  position: absolute; bottom: 0.85rem; left: 50%; transform: translateX(-50%);
  font-family: var(--f-mono); font-size: 0.55rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-dim);
  background: var(--bg); padding: 0 0.5rem;
  white-space: nowrap;
}
.tacit-ledger-lab {
  display: block;
  padding: 0.9rem 1.1rem 0;
  font-family: var(--f-mono); font-size: 0.62rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-dim);
  border-top: 1px solid rgba(8, 8, 8, 0.12);
}

/* — Fig. 02 · the ecosystem map — */
.tacit-eco { min-width: 1224px; padding: 0 12px; }
.tacit-eco-attention {
  padding: 0.9rem 0 0.7rem;
}
.tacit-eco-divider { border-top: 1px solid rgba(8, 8, 8, 0.25); }
.tacit-eco-divider-lab {
  display: block;
  padding: 0.5rem 0 0.9rem;
  font-family: var(--f-mono); font-size: 0.62rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-dim);
}
.tacit-eco-frame {
  position: absolute;
  border: 1px dashed rgba(8, 8, 8, 0.35);
}
.tacit-eco-frame-lab {
  position: absolute;
  background: var(--bg);
  padding: 0 0.45rem;
  font-family: var(--f-mono); font-size: 0.62rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-mid);
}
.tacit-eco-att-label, .tacit-eco-att-note {
  display: block;
  font-family: var(--f-mono); font-size: 0.62rem;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.tacit-eco-att-label { color: var(--ink-dim); margin-bottom: 0.5rem; }
.tacit-eco-att-note { color: var(--accent-on-light); margin-top: 0.5rem; text-transform: none; letter-spacing: 0.05em; }
.tacit-eco-apps { display: flex; gap: 0.6rem; }
.tacit-eco-app {
  font-family: var(--f-mono); font-size: 0.62rem;
  padding: 0.55rem 0.9rem;
  min-width: 176px;
  border: 1px solid rgba(8, 8, 8, 0.4);
  color: var(--ink);
}
.tacit-eco-app.is-profiled { position: relative; }
.tacit-eco-app.is-profiled::after {
  content: '';
  position: absolute; top: 6px; right: 6px;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent-on-light);
}
.tacit-eco-canvas { position: relative; height: 470px; width: 1200px; }
/* the edge layer starts 140px up, in the attention band, so the sensation
   rail can leave the dashed system and climb to the thumb (Rico's drawing,
   3 Sep); the thumb node and its labels ride negative tops for the same
   reason */
.tacit-eco-edges {
  position: absolute;
  left: 0; top: -140px;
  width: 1200px; height: 610px;
  pointer-events: none;
}
.tacit-eco-edge { fill: none; stroke: var(--accent-on-light); stroke-width: 1.5; }
.tacit-eco-edge.is-rail { stroke-width: 2; }
.tacit-eco-edge.is-never { stroke: rgba(8, 8, 8, 0.4); stroke-dasharray: 4 4; stroke-width: 1; }
.tacit-eco-node {
  position: absolute;
  border: 1px solid var(--ink);
  background: var(--bg);
  padding: 0.55rem 0.75rem;
}
.tacit-eco-ic { display: block; width: auto; margin-bottom: 0.5rem; }
.tacit-eco-icpair { display: flex; align-items: flex-start; gap: 3px; margin-bottom: 0.5rem; }
.tacit-eco-icpair .tacit-eco-ic { margin-bottom: 0; }
.tacit-bp-ic { display: block; width: auto; margin-bottom: 0.4rem; }
.tacit-bp-icpair { display: flex; align-items: flex-start; gap: 3px; margin-bottom: 0.4rem; }
.tacit-eco-node-name { display: block; font-family: var(--f-mono); font-size: 0.7rem; color: var(--ink); margin-bottom: 0.25rem; }
.tacit-eco-node-sub { display: block; font-family: var(--f-mono); font-size: 0.62rem; line-height: 1.5; color: var(--ink-dim); }
.tacit-eco-node.is-actor { border-color: var(--accent-on-light); }
.tacit-eco-node.is-thumb { border-color: var(--accent-on-light); }
.tacit-eco-node.is-never { border-style: dashed; border-color: rgba(8, 8, 8, 0.45); }
.tacit-eco-node.is-never .tacit-eco-node-name { color: var(--ink-mid); }
.tacit-eco-edgelab {
  position: absolute;
  font-family: var(--f-mono); font-size: 0.62rem; line-height: 1.55;
  color: var(--ink-dim);
}

/* An annotation that belongs to one node is anchored to that node, never
   placed by a typed offset (4 Sep). The node keeps its absolute position so
   the observed edges still meet it; the anchor wraps it and the labels hang
   off the anchor's own edges, so alignment, width and gap follow the node in
   both languages. This is the repair for a defect a typed `top` cannot avoid:
   the service node is 96px tall in EN and 111px in PT, so one number put the
   label 5px clear in one language and 10px inside the box in the other. */
.tacit-eco-anchor { position: absolute; }
.tacit-eco-anchor > .tacit-eco-node { position: static; width: auto; }
.tacit-eco-anchor > .tacit-eco-edgelab { left: 0; width: 100%; }
.tacit-eco-anchor > .tacit-eco-edgelab.is-above { bottom: 100%; margin-bottom: 7px; }
.tacit-eco-anchor > .tacit-eco-edgelab.is-below { top: 100%; margin-top: 7px; }
.tacit-eco-unscoped { position: absolute; }
.tacit-eco-unscoped-head {
  display: block;
  font-family: var(--f-mono); font-size: 0.62rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink); margin-bottom: 0.3rem;
}
.tacit-eco-unscoped-body { display: block; font-family: var(--f-mono); font-size: 0.62rem; line-height: 1.6; color: var(--ink-mid); }
.tacit-eco-unscoped-count { display: block; font-family: var(--f-mono); font-size: 0.62rem; color: var(--ink); margin-top: 0.35rem; }

/* — Fig. 04 lead-in · identification-rate bars — */
.tacit-idbars {
  margin: 0 0 var(--cs-inner-gap) 3rem;
  max-width: 560px;
}
.tacit-idbars-head {
  display: block;
  font-family: var(--f-mono); font-size: 0.62rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-dim); margin-bottom: 0.5rem;
}
.tacit-idbars-row {
  display: grid;
  grid-template-columns: 92px 1fr 30px;
  align-items: center;
  gap: 0.7rem;
  padding: 0.22rem 0;
}
.tacit-idbars-lab { font-family: var(--f-mono); font-size: 0.62rem; color: var(--ink); }
.tacit-idbars-track { height: 8px; background: rgba(8, 8, 8, 0.1); }
.tacit-idbars-track i { display: block; height: 100%; background: var(--ink); }
/* The weak axis is drawn weak — hatched, not painted a warning hue. */
.tacit-idbars-row.is-weak .tacit-idbars-track i {
  background: repeating-linear-gradient(135deg, rgba(8, 8, 8, 0.55) 0, rgba(8, 8, 8, 0.55) 3px, transparent 3px, transparent 6px);
  border: 1px solid rgba(8, 8, 8, 0.45);
}
.tacit-idbars-val { font-family: var(--f-mono); font-size: 0.62rem; color: var(--ink); text-align: right; }
.tacit-idbars-note {
  display: block;
  font-family: var(--f-mono); font-size: 0.62rem; line-height: 1.6;
  color: var(--ink); margin-top: 0.4rem;
}

/* — Fig. 04.3 · adjacency arcs — */
.tacit-arcs { display: block; width: 100%; min-width: 860px; height: auto; padding: 0.6rem 0 0; }
.tacit-arcs-axis { stroke: rgba(8, 8, 8, 0.4); stroke-width: 1; }
/* Categories and severities are drawn by form — weight and dash — never
   by invented hue (ruled 4 Sep): the close pair is the heavy stroke. */
.tacit-arcs-arc { fill: none; stroke: var(--ink); stroke-width: 1; opacity: 0.65; }
/* The one red on this figure: the conflicting pair — red means alarm,
   conflict or error on this site, and never the accent (ruled 4 Sep). */
.tacit-arcs-arc.is-close { stroke: var(--error-on-light); stroke-width: 2.5; opacity: 1; }
.tacit-arcs-lab.is-close-lab { fill: var(--error-on-light); }
.tacit-arcs-arc.is-subtle { stroke-dasharray: 4 4; }
.tacit-arcs-lab {
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
  fill: var(--ink); text-anchor: middle;
}
.tacit-arcs-lab.is-subtle-lab { fill: var(--ink-mid); }
.tacit-arcs-bracket { stroke: rgba(8, 8, 8, 0.3); stroke-width: 1; }
.tacit-arcs-lab.is-mute { fill: var(--ink-dim); }
.tacit-arcs-pi { fill: var(--ink); }
.tacit-arcs-pe { fill: var(--ink); }
.tacit-arcs-ie { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.tacit-arcs-name {
  font-family: var(--f-mono); font-size: 10.5px;
  fill: var(--ink-mid); text-anchor: start;
}
.tacit-arcs-name.is-pi { fill: var(--ink); }
.tacit-arcs-name.is-pe { fill: var(--ink); }
.tacit-arcs-name.is-ie { fill: var(--ink); }
.tacit-arcs-legend {
  display: flex; gap: 1.3rem;
  padding: 0.5rem 1.1rem 1rem;
  font-family: var(--f-mono); font-size: 0.62rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-dim);
}
.tacit-arcs-legend span { display: inline-flex; align-items: center; gap: 0.4rem; }
.tacit-arcs-legend i { width: 8px; height: 8px; display: inline-block; }
.tacit-arcs-legend i.is-pi { background: var(--ink); border-radius: 50%; }
.tacit-arcs-legend i.is-pe { background: var(--ink); }
.tacit-arcs-legend i.is-ie { border: 1.5px solid var(--ink); border-radius: 50%; }

/* — Fig. 04.4 · the two YAML layers — dark (4 Sep, the partitura pass):
   configuration is code, and every code panel on this site is a dark
   surface. The semantic names are phosphor — the layer that glows is
   the layer the SDK does not ship. */
.tacit-yaml {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 1rem;
  padding: 1rem 1.1rem 1.1rem;
  background: var(--ink-soft);
}
.tacit-yaml-path {
  display: block;
  font-family: var(--f-mono); font-size: 0.62rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-dim-on-dark); margin-bottom: 0.5rem;
}
.tacit-yaml-panel { display: flex; flex-direction: column; min-width: 0; }
/* min-width:0 kills the grid's auto minimum — without it the pre's content
   width blows the panel past the plate on mobile instead of scrolling inside */
.tacit-yaml-panel pre {
  flex: 1;  /* both editors share the row's height, even with room left */
  border: 1px solid rgba(240, 237, 232, 0.14);
  background: var(--ink);
  padding: 0.8rem 0.9rem;
  overflow-x: auto;
}
.tacit-yaml-panel code {
  font-family: var(--f-mono); font-size: 0.75rem; line-height: 1.75;
  color: var(--ink-on-dark);
}
.tacit-yaml-panel code b { font-weight: 700; color: rgba(240, 237, 232, 0.95); }
.tacit-yaml-panel code em { font-style: normal; color: var(--accent); }
.tacit-yaml-panel code .c { color: var(--ink-mid-on-dark); }
/* Below ~1340px the two editors cannot both hold their longest line at
   the readable 0.72rem — they stack full-width instead of truncating
   the comments (4 Sep; raised with the type-size pass). */
@media (max-width: 1340px) {
  .tacit-yaml { grid-template-columns: 1fr; }
}

/* ═══ DARK FIGURE BODIES — the partitura's left hand (4 Sep) ═══
   Not the bench: no brackets, no live phosphor glow. The callout grammar,
   applied to a figure whose content is the platform's underside. Accents
   follow the site: phosphor on dark; absence stays a dashed slot. */
.tacit-dark { background: var(--ink-soft); }
.tacit-dark .tacit-bp-stage { color: rgba(240, 237, 232, 0.92); border-bottom-color: rgba(240, 237, 232, 0.55); }
.tacit-dark .tacit-bp-rowlab { color: rgba(240, 237, 232, 0.92); }
.tacit-dark .tacit-bp-rowlab em { color: var(--ink-dim-on-dark); }
.tacit-dark .tacit-bp-cell { background: rgba(240, 237, 232, 0.06); color: var(--ink-on-dark); }
.tacit-dark .tacit-bp-cell code { color: var(--ink-dim-on-dark); }
.tacit-dark .tacit-bp-cell .is-gap, .tacit-dark .tacit-bp-cell.is-gap { color: rgba(240, 237, 232, 0.95); }
.tacit-dark .tacit-bp-cell.is-gap { background: transparent; border: 1px dashed rgba(240, 237, 232, 0.45); }
.tacit-dark .tacit-bp-line { color: var(--ink-dim-on-dark); border-bottom-color: rgba(240, 237, 232, 0.3); }
.tacit-dark .tacit-bp-dev { color: var(--ink-on-dark); }
.tacit-dark .tacit-bp-dev b { color: var(--accent); }
.tacit-dark .tacit-bp-dev em { color: var(--ink-dim-on-dark); }
.tacit-dark .tacit-bp-findings-lab { color: var(--ink-dim-on-dark); }
.tacit-dark .tacit-bp-finding { border-top-color: rgba(240, 237, 232, 0.3); color: var(--ink-on-dark); }
.tacit-dark .tacit-bp-finding.is-strong { border-top-color: var(--accent); }
.tacit-dark .tacit-bp-finding b { color: var(--accent); }
.tacit-dark .tacit-bp-finding em { color: var(--ink-dim-on-dark); }
/* Glyphs on dark come from -dark variant files, never from a blanket
   invert — a filter recolors every hue, not only the ink (4 Sep). */

/* — Fig. 03.1 · the service blueprint — */
.tacit-bp { min-width: 960px; padding: 1rem 1.1rem 1.1rem; }
.tacit-bp-grid {
  display: grid;
  grid-template-columns: 150px repeat(6, 1fr);
  gap: 6px;
}
.tacit-bp-corner { }
.tacit-bp-stage {
  font-family: var(--f-mono); font-size: 0.62rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--ink);
}
.tacit-bp-rowlab {
  font-family: var(--f-mono); font-size: 0.62rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink);
  padding: 0.5rem 0.4rem 0.5rem 0;
}
.tacit-bp-rowlab em {
  display: block;
  font-style: normal; text-transform: none; letter-spacing: 0.02em;
  font-family: var(--f-body); font-size: 0.7rem; font-weight: 300;
  color: var(--ink-dim); margin-top: 0.25rem;
}
.tacit-bp-cell {
  background: rgba(8, 8, 8, 0.05);
  padding: 0.5rem 0.55rem;
  font-family: var(--f-body); font-size: 0.75rem; line-height: 1.55;
  font-weight: 300; color: var(--ink);
}
.tacit-bp-cell code {
  display: block;
  font-family: var(--f-mono); font-size: 0.62rem;
  color: var(--ink-mid); margin-top: 0.3rem;
}
.tacit-bp-cell b { display: block; font-weight: 400; margin-top: 0.2rem; }
/* A gap is an absence — drawn as the workspace draws absence: a dashed
   empty slot, not a warning hue. */
.tacit-bp-cell .is-gap, .tacit-bp-cell.is-gap { color: var(--ink); font-weight: 400; }
.tacit-bp-cell.is-gap { background: transparent; border: 1px dashed rgba(8, 8, 8, 0.5); }
.tacit-bp-line {
  grid-column: 1 / -1;
  font-family: var(--f-mono); font-size: 0.55rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-dim);
  border-bottom: 1px dashed rgba(8, 8, 8, 0.35);
  padding: 0.35rem 0 0.25rem;
}
.tacit-bp-findings { margin-top: 1rem; }
.tacit-bp-findings-grid {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 6px;
}
.tacit-bp-dev {
  padding-right: 0.4rem;
  font-family: var(--f-body); font-size: 0.7rem; line-height: 1.5;
}
.tacit-bp-dev b {
  display: block;
  font-family: var(--f-mono); font-weight: 400; font-size: 0.62rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent-on-light); margin-bottom: 0.25rem;
}
.tacit-bp-dev em { font-style: normal; font-weight: 300; color: var(--ink-mid); }
.tacit-bp-findings-lab {
  display: block;
  font-family: var(--f-mono); font-size: 0.62rem; line-height: 1.6;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 0.6rem;
}
.tacit-bp-findings-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.tacit-bp-finding {
  border-top: 2px solid rgba(8, 8, 8, 0.35);
  padding: 0.5rem 0.3rem 0;
  font-family: var(--f-body); font-size: 0.75rem; line-height: 1.5;
  font-weight: 400; color: var(--ink);
}
.tacit-bp-finding.is-strong { border-top-color: var(--accent-on-light); }
.tacit-bp-finding b {
  display: block;
  font-family: var(--f-mono); font-weight: 400; font-size: 0.62rem;
  color: var(--accent-on-light); margin-bottom: 0.25rem;
}
.tacit-bp-finding em {
  display: block;
  font-style: italic; font-weight: 300; font-size: 0.7rem;
  color: var(--ink-mid); margin-top: 0.3rem;
}

/* — Fig. 02 · kill test — */
.tacit-killtest { padding: 1rem 1.1rem 1.2rem; }
.tacit-lane {
  display: grid;
  grid-template-columns: 130px 1fr auto;
  align-items: center;
  gap: 0.7rem;
  padding: 0.32rem 0;
}
.tacit-lane-name { font-family: var(--f-mono); font-size: 0.7rem; color: var(--ink); letter-spacing: 0.05em; }
.tacit-lane-track { height: 1px; background: rgba(8, 8, 8, 0.35); }
.tacit-lane.is-profiled .tacit-lane-track { background: repeating-linear-gradient(90deg, rgba(8, 8, 8, 0.75) 0, rgba(8, 8, 8, 0.75) 5px, transparent 5px, transparent 9px); }
.tacit-lane-flag {
  font-family: var(--f-mono); font-size: 0.62rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); font-weight: 700;
}
.tacit-thumbrow {
  display: grid;
  grid-template-columns: 130px 1fr auto;
  align-items: center;
  gap: 0.7rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(8, 8, 8, 0.12);
}
.tacit-thumbrow-name { font-family: var(--f-mono); font-size: 0.7rem; font-weight: 700; color: var(--ink); }
.tacit-thumbrow-ticks { display: flex; gap: 0; justify-content: space-between; }
.tacit-thumbrow-ticks i { width: 2px; height: 14px; background: var(--accent-on-light); }
.tacit-thumbrow-count { font-family: var(--f-mono); font-size: 0.62rem; color: var(--ink); }

/* ═══ THE BENCH — the page's dark zones: the two instruments ═══
   Fig. 04.1 (the specimen board) and Fig. 04.2 (the runs) share it.
   Phosphor is the live signal, per the site rule: green only on dark,
   and only while something speaks. Corner brackets always on — the
   instruments are anchor surfaces. */
.tacit-bench {
  position: relative;
  background: var(--ink-soft);
  padding: 1.1rem 1.25rem;
}
.tacit-bench::before,
.tacit-bench::after {
  content: "";
  position: absolute;
  width: 18px; height: 18px;
  pointer-events: none;
}
.tacit-bench::before { top: 10px; left: 10px; border-top: 1px solid var(--accent); border-left: 1px solid var(--accent); }
.tacit-bench::after { bottom: 10px; right: 10px; border-bottom: 1px solid var(--accent); border-right: 1px solid var(--accent); }
.tacit-bench-hud {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.4rem 1rem;
  margin-top: 0.9rem; padding-top: 0.7rem;
  border-top: 1px solid rgba(240, 237, 232, 0.12);
  font-family: var(--f-mono); font-size: 0.62rem;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-mid-on-dark);
}

/* — Fig. 04.1 · the specimen board — */
.tacit-board-row {
  display: grid;
  grid-template-columns: 44px 104px 1fr 170px;
  align-items: center;
  gap: 0.9rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(240, 237, 232, 0.08);
}
.tacit-board-row:last-child { border-bottom: 0; }
.tacit-play {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none;
  border: 1px solid rgba(240, 237, 232, 0.28);
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
}
.tacit-play svg { width: 12px; height: 14px; fill: rgba(240, 237, 232, 0.85); transition: fill 0.2s; }
.tacit-play:hover { border-color: var(--accent); }
.tacit-play:hover svg { fill: var(--accent); }
.tacit-board-row.is-playing .tacit-play { border-color: var(--accent); background: rgba(0, 232, 122, 0.08); }
.tacit-board-row.is-playing .tacit-play svg { fill: var(--accent); }
.tacit-board-sem { font-family: var(--f-mono); font-size: 0.7rem; color: rgba(240, 237, 232, 0.92); }
.tacit-board-track {
  position: relative;
  height: 44px;
  background:
    repeating-linear-gradient(90deg,
      rgba(240, 237, 232, 0.1) 0, rgba(240, 237, 232, 0.1) 1px,
      transparent 1px, transparent 27%);
  border-bottom: 1px solid rgba(240, 237, 232, 0.25);
}
.tacit-board-note {
  font-family: var(--f-mono); font-size: 0.62rem;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-dim-on-dark); text-align: right;
}

/* Pulse envelopes — the workspace grammar: a pulse is an envelope with a
   measured peak. Height = intensity, width = duration, position = timing.
   Linen at rest; phosphor at the onset the sound is passing through. */
.tacit-env {
  position: absolute;
  bottom: 0;
  background: rgba(240, 237, 232, 0.65);
  transition: background-color 0.15s, filter 0.15s;
}
.tacit-env.is-sharp { width: 11px; height: 74%; clip-path: polygon(0 100%, 14% 0, 42% 62%, 100% 100%); }
.tacit-env.is-soft  { width: 9px;  height: 36%; clip-path: polygon(0 100%, 32% 12%, 100% 100%); }
.tacit-env.is-knock { width: 17px; height: 84%; clip-path: polygon(0 100%, 13% 0, 30% 64%, 46% 100%, 58% 100%, 70% 8%, 84% 66%, 100% 100%); }
.tacit-env.is-full  { width: 18px; height: 100%; clip-path: polygon(0 100%, 16% 10%, 44% 0, 74% 26%, 100% 100%); }
.tacit-env.is-rough { width: 12px; height: 90%; clip-path: polygon(0 100%, 12% 26%, 26% 52%, 40% 0, 56% 58%, 72% 14%, 86% 48%, 100% 100%); }
.tacit-env.is-hot { background: var(--accent); filter: drop-shadow(0 0 6px rgba(0, 232, 122, 0.55)); }
/* failed speaks in red — error is the one state whose voice alarms. */
.tacit-env.is-hot.is-err { background: var(--error); filter: drop-shadow(0 0 6px rgba(255, 51, 51, 0.55)); }

/* — Fig. 04.2 · the runs — */
.tacit-runs-controls { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tacit-run-btn {
  display: inline-flex; align-items: center; gap: 0.55rem;
  min-height: 44px;
  padding: 0 1.1rem;
  background: none;
  border: 1px solid rgba(240, 237, 232, 0.28);
  color: rgba(240, 237, 232, 0.88);
  font-family: var(--f-mono); font-size: 0.7rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background-color 0.2s;
}
.tacit-run-glyph { width: 10px; height: 12px; fill: currentColor; flex: none; }
.tacit-run-btn:hover { border-color: var(--accent); color: var(--accent); }
.tacit-run-btn.is-running { border-color: var(--accent); color: var(--accent); background: rgba(0, 232, 122, 0.07); }
.tacit-run-btn:disabled { color: var(--ink-mid-on-dark); border-color: rgba(240, 237, 232, 0.14); cursor: default; }
.tacit-runs-track {
  position: relative;
  height: 56px;
  margin: 1rem 0 0.4rem;
  background:
    repeating-linear-gradient(90deg,
      rgba(240, 237, 232, 0.08) 0, rgba(240, 237, 232, 0.08) 1px,
      transparent 1px, transparent 10%);
  border-bottom: 1px solid rgba(240, 237, 232, 0.25);
  overflow: hidden;
}
.tacit-runs-quiet {
  position: absolute; inset: 0 auto 0 0;
  width: 20%;
  background: repeating-linear-gradient(45deg, rgba(240, 237, 232, 0.05) 0, rgba(240, 237, 232, 0.05) 1px, transparent 1px, transparent 7px);
  border-right: 1px dashed rgba(240, 237, 232, 0.2);
}
.tacit-runs-marks { position: absolute; inset: 0; }
.tacit-runs-marks[hidden] { display: none; }
.tacit-runs-head {
  position: absolute; top: 0; bottom: 0; left: 0;
  width: 1px;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(0, 232, 122, 0.6);
  will-change: transform;
}
.tacit-runs-head[hidden] { display: none; }
.tacit-readout--bench { margin-top: 0.6rem; }
.tacit-readout--bench .tacit-readout-head { color: var(--ink-mid-on-dark); }
.tacit-readout--bench .tacit-readout-row {
  color: var(--ink-dim-on-dark);
  border-bottom: 1px solid rgba(240, 237, 232, 0.07);
  transition: opacity 0.25s;
}
.tacit-readout--bench .tacit-readout-sem { color: rgba(240, 237, 232, 0.88); }
.tacit-readout--bench .tacit-readout-prim { color: var(--ink-dim-on-dark); }
.tacit-readout--bench .tacit-readout-dot { background: rgba(240, 237, 232, 0.18); }
.tacit-readout--bench .tacit-readout-row.is-off { opacity: 0.38; }
.tacit-readout--bench .tacit-readout-row.is-live { color: rgba(240, 237, 232, 0.9); }
.tacit-readout--bench .tacit-readout-row.is-live .tacit-readout-dot { background: var(--accent); box-shadow: 0 0 0 3px rgba(0, 232, 122, 0.15); }
.tacit-readout--bench .tacit-readout-row.is-live .tacit-readout-sem { color: var(--accent); }
.tacit-readout--bench .tacit-readout-row.is-done .tacit-readout-dot { background: rgba(0, 232, 122, 0.45); }
.tacit-readout--bench .tacit-readout-row[data-run-ev="failed"].is-live .tacit-readout-dot { background: var(--error); box-shadow: 0 0 0 3px rgba(255, 51, 51, 0.15); }
.tacit-readout--bench .tacit-readout-row[data-run-ev="failed"].is-live .tacit-readout-sem { color: var(--error); }
.tacit-readout--bench .tacit-readout-row[data-run-ev="failed"].is-done .tacit-readout-dot { background: rgba(255, 51, 51, 0.45); }

/* — Fig. 03.2 · funnel — */
.tacit-funnel {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem;
}
.tacit-funnel-lab, .tacit-trials-lab {
  display: block;
  font-family: var(--f-mono); font-size: 0.62rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink); margin-bottom: 0.55rem;
}
.tacit-rowmarks { display: grid; grid-template-columns: repeat(13, 1fr); gap: 6px; }
.tacit-rowmarks i { width: auto; height: auto; aspect-ratio: 1 / 1; background: var(--ink); }
.tacit-rowmarks i.is-mine { background: rgba(8, 8, 8, 0.28); }
.tacit-rowmarks i.is-open { background: transparent; border: 1px solid rgba(8, 8, 8, 0.45); }
.tacit-funnel-key {
  display: flex; gap: 1rem; margin-top: 0.6rem;
  font-family: var(--f-mono); font-size: 0.62rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-dim);
}
.tacit-funnel-key span { display: inline-flex; align-items: center; gap: 0.35rem; }
.tacit-funnel-key i { width: 8px; height: 8px; display: inline-block; }
.tacit-key-dx { background: var(--ink); }
.tacit-key-mine { background: rgba(8, 8, 8, 0.28); }
.tacit-key-open { border: 1px solid rgba(8, 8, 8, 0.45); }
.tacit-funnel-arrow { font-family: var(--f-mono); font-size: 1.8rem; color: var(--accent-on-light); align-self: center; }
.tacit-funnel-sets { display: flex; flex-direction: column; gap: 0.7rem; }
.tacit-set {
  border: 1px solid var(--ink);
  padding: 0.6rem 0.8rem;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.15rem 0.7rem;
}
.tacit-set-count {
  grid-row: span 2;
  font-family: var(--f-display); font-size: 1.9rem; font-weight: 700;
  line-height: 1; color: var(--accent-on-light); align-self: center;
}
.tacit-set-name { font-family: var(--f-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); }
.tacit-set-note { font-size: 0.75rem; line-height: 1.5; font-weight: 300; color: var(--ink-mid); }

/* — Fig. 05 · trials — */
.tacit-trials {
  padding: 1.4rem 1.1rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 2.4rem;
}
.tacit-trials-row + .tacit-trials-row {
  border-left: 1px solid rgba(8, 8, 8, 0.15);
  padding-left: 2.4rem;
}
.tacit-trialdots { display: flex; gap: 8px; flex-wrap: wrap; }
.tacit-trialdots i { width: 17px; height: 17px; border-radius: 50%; background: var(--ink); }
.tacit-trialdots.is-open i { background: transparent; border: 1.5px solid rgba(8, 8, 8, 0.5); }
.tacit-trials-note {
  display: block; margin-top: 0.45rem;
  font-family: var(--f-mono); font-size: 0.62rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-dim);
}

/* — Fig. 06 · ledger — */
.tacit-ledger { padding: 0.6rem 1.1rem; }
.tacit-ledger-row {
  display: grid;
  grid-template-columns: 1fr auto 1.2fr;
  gap: 0.8rem;
  align-items: baseline;
  padding: 0.55rem 0;
  border-bottom: 1px solid rgba(8, 8, 8, 0.07);
}
.tacit-ledger-row:last-child { border-bottom: 0; }
.tacit-ledger-from { font-family: var(--f-mono); font-size: 0.7rem; line-height: 1.55; color: var(--ink-mid); }
.tacit-ledger-arrow { font-family: var(--f-mono); color: var(--accent-on-light); }
.tacit-ledger-to { font-size: 0.82rem; line-height: 1.6; font-weight: 300; color: var(--ink); }
.tacit-ledger-to code, .tacit-ledger-from code { font-family: var(--f-mono); font-size: 0.9em; }

/* — Fig. 06.2 · the icon study — */
.tacit-iconstudy {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1.2fr;
  gap: 1.4rem;
  padding: 1.4rem 1.1rem;
  align-items: center;  /* variants ride the vertical middle of the shipped block */
  min-width: 660px;     /* below this the plate scrolls sideways, never squeezes */
}
.tacit-iconstudy-shipped { align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
.tacit-iconstudy img { display: block; margin-bottom: 0.55rem; }
.tacit-iconstudy-cell.is-cut img { opacity: 0.5; }
.tacit-iconstudy b {
  display: block;
  font-family: var(--f-mono); font-weight: 400; font-size: 0.62rem;
  letter-spacing: 0.06em; color: var(--ink); margin-bottom: 0.2rem;
}
.tacit-iconstudy em {
  display: block; font-style: normal;
  font-family: var(--f-mono); font-size: 0.62rem; line-height: 1.55;
  color: var(--ink-dim);
}
.tacit-iconstudy-cell.is-cut b { color: var(--ink-mid); }
.tacit-iconstudy-shipped {
  border-left: 1px solid rgba(8, 8, 8, 0.15);
  padding-left: 1.4rem;
}

/* — Results — */
/* Dark since 4 Sep (the partitura pass) — the terminal chord before the
   reflection band. It was flush against that band until 4 Sep, on a stated
   claim of "case-02's own grammar" that case 02 does not have: measured,
   every sibling keeps a full --cs-section-gap of ground between its last
   section and the dark band (48px at desktop), and case 02 is one of them.
   The section keeps the shared padding; two dark masses need the ground
   between them or they read as one. */
.tacit-results {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  padding: 1.5rem;
  margin-left: 3rem;
  background: var(--ink-soft);
}
.tacit-result { border: 1px solid rgba(240, 237, 232, 0.12); padding: 1rem 1.1rem; background: var(--ink); }
.tacit-result-lab {
  display: block;
  font-family: var(--f-mono); font-size: 0.7rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 0.5rem;
}
.tacit-result p { font-size: 0.82rem; line-height: 1.7; font-weight: 300; color: var(--ink-on-dark); }
.tacit-result a { color: var(--accent); }

/* ═══ RESPONSIVE ═══ */
@media (max-width: 1024px) {
  :root {
    --cs-gutter: 2rem;
    --cs-section-gap: 2.5rem;
  }
  .cs-hero { grid-template-columns: 1fr; gap: var(--cs-inner-gap); }
  .cs-hero-visual { display: none; }
  .cs-section-label { display: none; }
  .cs-section-title,
  .cs-section-intro,
  .cs-section > p { padding-left: 0; }
  .callout { margin-left: 0; }
  .overview { padding-left: 0; }
  .tacit-fig { margin-left: 0; }
  .tacit-results { margin-left: 0; }
  .tacit-repo-card { margin-left: 0; }
  .tacit-funnel { grid-template-columns: 1fr; }
  .tacit-funnel-arrow { transform: rotate(90deg); justify-self: center; }
  .tacit-idbars { margin-left: 0; }
}

@media (max-width: 900px) {
  .tacit-yaml { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  :root {
    --cs-gutter: 1.25rem;
    --cs-section-gap: 2rem;
    --cs-inner-gap: 1.5rem;
  }
  .cs-hero {
    grid-template-columns: 1fr;
    gap: var(--cs-inner-gap);
    overflow: visible;
    padding: 1.5rem var(--cs-gutter) var(--cs-section-gap);
  }
  .cs-hero-title { font-size: clamp(1.5rem, 7vw, 2rem); }
  .cs-hero-visual { display: none; }
  .cs-hero-context { max-width: 100%; font-size: 0.78rem; }
  .cs-hero-description { max-width: 100%; font-size: 0.9rem; }
  .cs-hero-meta {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem 1.5rem;
  }
  .cs-meta-value { white-space: normal; font-size: 0.7rem; }
  .cs-tags { gap: 0.5rem; }
  .cs-tag { font-size: 0.55rem; padding: 0.4rem 0.75rem; letter-spacing: 0.12em; }
  .cs-section-label {
    writing-mode: horizontal-tb; transform: none;
    position: relative; left: 0; top: 0; translate: none;
    margin-bottom: var(--cs-element-gap);
  }
  .cs-section { padding: var(--cs-section-gap) var(--cs-gutter); }
  .cs-section-title { font-size: 1.5rem; }
  .overview { padding-left: 0; }
  .tacit-board-row { grid-template-columns: 44px 1fr; gap: 0.5rem 0.9rem; align-items: start; }
  .tacit-play { align-self: center; }
  .tacit-board-sem { grid-column: 2; }
  .tacit-board-track { grid-column: 2; }
  .tacit-board-note { grid-column: 2; text-align: left; }
  .tacit-readout--bench .tacit-readout-row { grid-template-columns: 12px 96px 1fr; }
  .tacit-lane { grid-template-columns: 96px 1fr; }
  .tacit-lane-flag { grid-column: 2; }
  .tacit-thumbrow { grid-template-columns: 96px 1fr; }
  .tacit-thumbrow-count { grid-column: 2; margin-top: 0.3rem; }
  .tacit-thumbrow-ticks i { width: 1.5px; height: 11px; }
  .tacit-ledger-row { grid-template-columns: 1fr; gap: 0.2rem; }
  .tacit-ledger-arrow { display: none; }
  .tacit-results { grid-template-columns: 1fr; }
  .tacit-trials { grid-template-columns: 1fr; }
  .tacit-trials-row + .tacit-trials-row {
    border-left: 0;
    border-top: 1px solid rgba(8, 8, 8, 0.15);
    padding-left: 0;
    padding-top: 1rem;
  }
}

/* — Fig. 07 · the trace — one event falling through the layers (5 Sep).
   Planes step right as the event descends; the fourth is dashed because it
   is not a layer — absence drawn by form. The strip is Fig. 04.3's axis:
   fifteen cells, the resolved primitive lit; failed's cell takes the error
   ink because that pair is the page's one alarm. Hero CTA + repo card ride
   in the same pass: the repo is the deliverable while the store reviews. */
.tacit-hero-cta {
  display: inline-block; margin: 0 0 1.75rem;
  font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.14em;
  text-transform: uppercase; text-decoration: none;
  color: var(--accent-on-light); transition: color 0.2s;
}
.tacit-hero-cta:hover { color: var(--ink); }

.tacit-trace-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.tacit-trace-chip {
  font-family: var(--f-mono); font-size: 0.62rem; letter-spacing: 0.14em;
  padding: 0.45rem 0.9rem; background: none; cursor: pointer;
  border: 1px solid rgba(240, 237, 232, 0.28); color: rgba(240, 237, 232, 0.85);
  transition: border-color 0.2s, color 0.2s, background-color 0.2s;
}
.tacit-trace-chip:hover { border-color: var(--accent); color: var(--accent); }
.tacit-trace-chip.is-on { border-color: var(--accent); color: var(--accent); background: rgba(0, 232, 122, 0.08); }

.tacit-trace-stack { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.95rem; }
.tacit-plane {
  position: relative;
  display: grid; grid-template-columns: 230px 1fr; gap: 0.15rem 1.2rem;
  align-items: baseline;
  padding: 0.6rem 0.9rem;
  border: 1px solid rgba(240, 237, 232, 0.14);
  background: rgba(240, 237, 232, 0.03);
}
.tacit-trace-stack .tacit-plane:nth-child(2) { margin-left: 1.4rem; }
.tacit-trace-stack .tacit-plane:nth-child(3) { margin-left: 2.8rem; }
.tacit-trace-stack .tacit-plane:nth-child(4) { margin-left: 4.2rem; }
.tacit-trace-stack .tacit-plane:nth-child(5) { margin-left: 5.6rem; }
.tacit-trace-stack .tacit-plane:nth-child(6) { margin-left: 5.6rem; }
.tacit-trace-stack .tacit-plane + .tacit-plane::before {
  content: ''; position: absolute; left: -0.8rem; top: calc(-0.95rem - 1px);
  width: 1px; height: calc(0.95rem + 1px); background: var(--accent); opacity: 0.5;
}
.tacit-plane-lab {
  grid-column: 1; grid-row: 1 / span 3;
  font-family: var(--f-mono); font-size: 0.58rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-mid-on-dark);
}
.tacit-plane-code { grid-column: 2; font-family: var(--f-mono); font-size: 0.75rem; color: rgba(240, 237, 232, 0.92); }
.tacit-plane-note { grid-column: 2; font-family: var(--f-mono); font-size: 0.7rem; color: rgba(240, 237, 232, 0.55); }
.tacit-strip { grid-column: 2; display: flex; gap: 3px; margin: 0.4rem 0 0.15rem; }
.tacit-strip i { width: 13px; height: 5px; background: rgba(240, 237, 232, 0.16); }
.tacit-trace[data-state="started"]    .tacit-strip i:nth-child(2)  { background: var(--accent); }
.tacit-trace[data-state="progress"]   .tacit-strip i:nth-child(7)  { background: var(--accent); }
.tacit-trace[data-state="needsInput"] .tacit-strip i:nth-child(3)  { background: var(--accent); }
.tacit-trace[data-state="completed"]  .tacit-strip i:nth-child(8)  { background: var(--accent); }
.tacit-trace[data-state="failed"]     .tacit-strip i:nth-child(14) { background: var(--error); }
.tacit-plane--ghost { border-style: dashed; background: none; }
.tacit-plane--thumb {
  grid-template-columns: 230px 44px 1fr;
  border-color: rgba(0, 232, 122, 0.35);
  align-items: center; gap: 0.35rem 1.2rem;
}
.tacit-plane--thumb .tacit-plane-lab { grid-row: 1 / span 2; }
.tacit-plane--thumb .tacit-play { grid-column: 2; grid-row: 1 / span 2; }
.tacit-plane--thumb .tacit-board-track { grid-column: 3; }
.tacit-plane--thumb .tacit-plane-note { grid-column: 3; }

.tacit-tr { display: none; }
.tacit-trace[data-state="started"]    .tacit-tr[data-tr="started"],
.tacit-trace[data-state="progress"]   .tacit-tr[data-tr="progress"],
.tacit-trace[data-state="needsInput"] .tacit-tr[data-tr="needsInput"],
.tacit-trace[data-state="completed"]  .tacit-tr[data-tr="completed"],
.tacit-trace[data-state="failed"]     .tacit-tr[data-tr="failed"] { display: inline; }

.tacit-repo-card {
  position: relative; margin-top: 2.2rem; margin-left: 3rem;
  border: 1px solid var(--ink); padding: 1.1rem 1.25rem 1rem;
}
.tacit-repo-card::before {
  content: ''; position: absolute; top: 8px; left: 8px; width: 18px; height: 18px;
  border-top: 1px solid var(--accent-on-light); border-left: 1px solid var(--accent-on-light);
}
.tacit-repo-card::after {
  content: ''; position: absolute; bottom: 8px; right: 8px; width: 18px; height: 18px;
  border-bottom: 1px solid var(--accent-on-light); border-right: 1px solid var(--accent-on-light);
}
.tacit-repo-head {
  display: flex; justify-content: space-between; gap: 1rem;
  font-family: var(--f-mono); font-size: 0.58rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--accent-on-light); margin-bottom: 0.7rem;
}
.tacit-repo-link { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; text-decoration: none; }
.tacit-repo-name { font-family: var(--f-mono); font-size: 0.95rem; color: var(--ink); transition: color 0.2s; }
/* The DS button grammar (meta-case ds-btn--primary): a filled button
   inverts on hover — fill drops, text takes the fill's ink. Transposed
   to ink-on-cream; same 0.3s ease as every ds-btn. */
.tacit-repo-btn {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.1em;
  padding: 0.55rem 1rem; text-decoration: none;
  background: var(--ink); color: var(--bg); border: 1px solid var(--ink);
  transition: all 0.3s var(--ease);
}
.tacit-repo-gh { width: 16px; height: 16px; fill: var(--bg); transition: fill 0.3s var(--ease); }
.tacit-repo-btn:hover { background: transparent; color: var(--ink); }
.tacit-repo-btn:hover .tacit-repo-gh { fill: var(--ink); }
.tacit-repo-sub { font-size: 0.82rem; line-height: 1.7; color: var(--ink-mid); margin-top: 0.55rem; }

@media (max-width: 768px) {
  .tacit-trace-stack .tacit-plane:nth-child(2) { margin-left: 0.5rem; }
  .tacit-trace-stack .tacit-plane:nth-child(3) { margin-left: 1rem; }
  .tacit-trace-stack .tacit-plane:nth-child(4) { margin-left: 1.5rem; }
  .tacit-trace-stack .tacit-plane:nth-child(5),
  .tacit-trace-stack .tacit-plane:nth-child(6) { margin-left: 2rem; }
  .tacit-plane { grid-template-columns: 1fr; gap: 0.3rem; }
  .tacit-plane-lab { grid-row: auto; }
  .tacit-plane-code, .tacit-plane-note, .tacit-strip { grid-column: 1; }
  .tacit-plane--thumb { grid-template-columns: 44px 1fr; }
  .tacit-plane--thumb .tacit-plane-lab { grid-column: 1 / span 2; grid-row: auto; }
  .tacit-plane--thumb .tacit-play { grid-column: 1; grid-row: auto; }
  .tacit-plane--thumb .tacit-board-track, .tacit-plane--thumb .tacit-plane-note { grid-column: 2; }
}