@import url("../shape-ui/tokens.css");
@import url("../shape-ui/src/cohort-card.css");

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
html { background: var(--abyss); }
body {
  background: var(--abyss);
  color: var(--ink-2);
  font-family: var(--font-sans);
  font-size: var(--t-13);
  line-height: var(--lh-relax);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}
a { color: inherit; text-decoration: none; }
a:focus-visible, summary:focus-visible, .install-cta:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
}

/* selection — subtle oxide-red wash with paper text. Matches shaperotator.xyz.
 * --accent-soft is red at 22% α so multi-row selection in the cohort grid
 * reads as selection rather than an error state. */
::selection { background: var(--accent-soft); color: var(--paper-1); }

/* scrollbars — wired to the warm-paper tokens. The default Webkit chrome
 * leans cool; explicit thumb keeps the brand inside the scroll gutter too. */
* { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--scrollbar-track); border-radius: var(--r-sm); }
*:hover::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); }

.site-header, .page, .site-footer {
  width: 100%;
  max-width: 680px;
  min-width: 0;
  margin: 0 auto;
  padding-inline: var(--space-6);
}

/* layout--wide: data pages (cohort/calendar/availability) need room to breathe */
body.layout--wide .site-header,
body.layout--wide .page,
body.layout--wide .site-footer {
  max-width: 1200px;
}

/* keep the shape-canvas body-level overlay visible on the web. Defensive
 * override: shape-canvas.js tags its <canvas> overlay with both
 * `.alch-shape-overlay` AND `.alchemy-only` because the Electron app
 * hides `.alchemy-only` on non-alchemy tabs. On the website there is no
 * tab system, so we force the overlay visible even if cohort-card.css
 * (a parallel agent's file) ever inherits that hide rule. */
body .alch-shape-overlay { display: block !important; }

.site-header { padding-block: var(--space-5); border-bottom: 1px solid var(--hairline); }
.site-nav { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: var(--space-6); }
.site-nav-mark { font-family: var(--font-mono); font-size: var(--t-11); font-weight: 500; text-transform: uppercase; letter-spacing: var(--track-caps-loose); color: var(--ink-1); display: inline-flex; align-items: center; gap: var(--space-2); }
.site-nav-mark-sub { color: var(--ink-3); margin-inline-start: var(--space-2); }
.site-nav-mark-glyph { width: 14px; height: 14px; color: var(--ink-2); flex: 0 0 14px; }
.site-nav-mark-glyph svg { width: 100%; height: 100%; display: block; }
.site-nav-links { margin: 0; padding: 0; display: flex; gap: var(--space-4); font-family: var(--font-mono); font-size: var(--t-11); letter-spacing: var(--track-caps); text-transform: uppercase; }
.site-nav-links li { list-style: none; }
.site-nav-links li + li::before { content: "·"; color: var(--ink-4); margin-inline-end: var(--space-4); margin-inline-start: calc(var(--space-4) * -1); }
.site-nav-links a { color: var(--ink-3); transition: color var(--dur-base) var(--ease); }
.site-nav-links a:hover { color: var(--ink-2); }
.site-nav-links a[aria-current="page"] { color: var(--ink-1); }
.site-nav-version { font-family: var(--font-mono); font-size: var(--t-11); font-feature-settings: var(--num-feat); color: var(--ink-3); padding: 2px var(--space-2); border: 1px solid var(--hairline); border-radius: var(--r-sm); }

.page { padding-block: var(--space-8) var(--space-7); }
.hero { padding-block: var(--space-7) var(--space-6); }
.eyebrow { margin: 0 0 var(--space-5); font-family: var(--font-mono); font-size: var(--t-11); font-weight: 500; text-transform: uppercase; letter-spacing: var(--track-caps-loose); color: var(--ink-3); font-feature-settings: var(--num-feat); }
.hero-title { margin: 0 0 var(--space-2); font-family: var(--font-sans); font-size: var(--t-32); font-weight: 500; line-height: var(--lh-tight); letter-spacing: var(--track-tight); color: var(--ink-1); text-transform: lowercase; }
.hero-tagline { margin: 0 0 var(--space-7); font-size: var(--t-15); color: var(--ink-2); }

.install { margin-bottom: var(--space-8); }
.install-cta { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: var(--space-4); padding: var(--space-4) var(--space-5); border: 1px solid var(--ink-4); border-radius: var(--r-md); color: var(--ink-1); background: transparent; transition: border-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease); }
.install-cta:hover { border-color: var(--ink-2); }
.install-cta-label { font-family: var(--font-sans); font-size: var(--t-15); font-weight: 500; }
.install-cta-target { font-family: var(--font-mono); font-size: var(--t-12); color: var(--ink-3); font-feature-settings: var(--num-feat); }
.install-note { margin: var(--space-3) 0 0; font-size: var(--t-12); color: var(--ink-3); line-height: var(--lh-snug); }
.install-note em { font-style: normal; color: var(--ink-2); }

.all-platforms { border-top: 1px solid var(--hairline); padding-top: var(--space-5); }
.all-platforms-heading { margin: 0 0 var(--space-5); font-family: var(--font-mono); font-size: var(--t-11); font-weight: 500; text-transform: uppercase; letter-spacing: var(--track-caps-loose); color: var(--ink-3); }

.platform-list { margin: 0; padding: 0; }
.platform-row { display: grid; grid-template-columns: var(--space-4) 1fr auto; align-items: baseline; gap: var(--space-4); padding-block: var(--space-3); border-bottom: 1px solid var(--hairline); font-family: var(--font-mono); font-size: var(--t-12); font-feature-settings: var(--num-feat); }
.platform-row:last-child { border-bottom: 0; }
.platform-row::before { content: ""; color: var(--accent); }
.platform-row[aria-current="true"]::before { content: "›"; }
.platform-row dt { color: var(--ink-3); text-transform: uppercase; letter-spacing: var(--track-caps); }
.platform-row dd { margin: 0; text-align: end; }
.platform-row dd a { color: var(--ink-1); border-bottom: 1px solid var(--hairline); transition: border-color var(--dur-base) var(--ease); }
.platform-row dd a:hover { border-bottom-color: var(--ink-2); }

.site-footer { padding-block: var(--space-5); border-top: 1px solid var(--hairline); display: flex; gap: var(--space-3); font-family: var(--font-mono); font-size: var(--t-11); color: var(--ink-4); font-feature-settings: var(--num-feat); }
.site-footer a { color: var(--ink-3); transition: color var(--dur-base) var(--ease); }
.site-footer a:hover { color: var(--ink-2); }

/* page content containers — used by cohort/calendar/availability/profile pages */
.page-eyebrow { margin: 0 0 var(--space-3); font-family: var(--font-mono); font-size: var(--t-11); font-weight: 500; text-transform: uppercase; letter-spacing: var(--track-caps-loose); color: var(--ink-3); }
.page-title { margin: 0 0 var(--space-6); font-family: var(--font-sans); font-size: var(--t-24); font-weight: 500; line-height: var(--lh-tight); letter-spacing: var(--track-tight); color: var(--ink-1); text-transform: lowercase; }
.page-mount { min-height: 200px; min-width: 0; }
.page-empty { font-family: var(--font-mono); font-size: var(--t-12); color: var(--ink-4); }

/* subtle inline metadata strip — counts, ranges, etc. — sits under the title */
.page-meta { margin: calc(var(--space-6) * -1) 0 var(--space-6); font-family: var(--font-mono); font-size: var(--t-11); font-feature-settings: var(--num-feat); color: var(--ink-4); letter-spacing: var(--track-caps); text-transform: uppercase; }
.cohort-page-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--space-4) var(--space-6);
  margin-bottom: var(--space-6);
}
.cohort-title-stack { min-width: 0; }
.cohort-page-head .page-title { margin-bottom: 2px; }
.cohort-page-head .page-meta { margin: 0; }
.cohort-page-head.is-detail .cohort-filter-membership { display: none; }
.cohort-kind-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
}
.cohort-kind-filter[hidden] { display: none; }
.cohort-kind-count {
  appearance: none;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-feature-settings: var(--num-feat);
  letter-spacing: inherit;
  text-transform: uppercase;
  color: var(--ink-4);
  cursor: pointer;
  transition: color var(--dur-base) var(--ease);
}
.cohort-kind-count span {
  color: currentColor;
}
.cohort-kind-count[aria-selected="true"] {
  color: var(--ink-1);
}
.cohort-kind-count:hover {
  color: #d05332;
}
.cohort-kind-count:focus-visible,
.cohort-chip:focus-visible,
.cd-quick-link:focus-visible,
.cd-section summary:focus-visible {
  outline: 1px solid rgba(208, 83, 50, 0.78);
  outline-offset: 3px;
}
.cohort-kind-sep {
  color: var(--ink-4);
  opacity: 0.55;
}

.cohort-browse[hidden],
.cohort-grid[hidden],
.cohort-detail[hidden] { display: none !important; }
.cohort-browse {
  display: grid;
  gap: var(--space-4);
  padding-top: var(--space-1);
}
.cohort-insight-board {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid rgba(241, 236, 231, 0.11);
  border-top-color: rgba(208, 83, 50, 0.34);
  border-radius: var(--r-md);
  background:
    linear-gradient(112deg, rgba(180, 58, 25, 0.08), rgba(180, 58, 25, 0.012) 42%, transparent),
    rgba(24, 22, 21, 0.74);
}
.cohort-insight-board[hidden] {
  display: none;
}
.cohort-insight-head {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(260px, 0.42fr);
  gap: var(--space-4);
  align-items: end;
  min-width: 0;
}
.cohort-insight-head span {
  color: rgba(208, 83, 50, 0.78);
  font-family: var(--font-mono);
  font-size: var(--t-11);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
}
.cohort-insight-head h2 {
  margin: var(--space-1) 0 0;
  color: var(--ink-1);
  font-size: var(--t-20);
  font-weight: 500;
  line-height: var(--lh-tight);
  text-transform: lowercase;
}
.cohort-insight-head p,
.cohort-chart-readout,
.cohort-chart-panel figcaption {
  margin: 0;
  color: rgba(245, 243, 238, 0.54);
  font-size: var(--t-12);
  line-height: var(--lh-snug);
}
.cohort-insight-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(260px, 0.72fr);
  gap: var(--space-4);
  align-items: stretch;
}
.cohort-chart-panel {
  min-width: 0;
  margin: 0;
  padding: var(--space-3);
  border: 1px solid rgba(241, 236, 231, 0.10);
  border-radius: var(--r-sm);
  background: rgba(245, 243, 238, 0.024);
}
.cohort-chart-panel h3 {
  margin: 0 0 var(--space-3);
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: var(--t-11);
  font-weight: 500;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
}
.cohort-journey-chart {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.cohort-chart-axis text,
.cohort-axis-label {
  fill: rgba(245, 243, 238, 0.42);
  font-family: var(--font-mono);
  font-size: 10px;
  font-feature-settings: var(--num-feat);
}
.cohort-axis-label {
  fill: rgba(245, 243, 238, 0.30);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.cohort-chart-grid {
  stroke: rgba(245, 243, 238, 0.07);
  stroke-width: 1;
}
.cohort-chart-dot {
  fill: rgba(208, 83, 50, 0.76);
  stroke: rgba(245, 243, 238, 0.52);
  stroke-width: 1.1;
  transition: opacity var(--dur-base) var(--ease), r var(--dur-base) var(--ease), stroke-width var(--dur-base) var(--ease);
}
.cohort-chart-dot.is-gtm { fill: rgba(139, 216, 209, 0.74); }
.cohort-chart-dot.is-icp-clarity { fill: rgba(247, 187, 89, 0.78); }
.cohort-chart-dot.is-technical-risk { fill: rgba(197, 111, 218, 0.68); }
.cohort-chart-dot.is-solution-quality { fill: rgba(208, 83, 50, 0.82); }
.cohort-chart-dot.is-retention { fill: rgba(137, 178, 110, 0.78); }
.cohort-chart-dot-link:hover .cohort-chart-dot,
.cohort-chart-dot-link:focus .cohort-chart-dot,
.cohort-chart-dot-link[data-active="true"] .cohort-chart-dot {
  opacity: 1;
  stroke: var(--ink-1);
  stroke-width: 2;
}
.cohort-chart-dot-link:focus {
  outline: none;
}
.cohort-chart-panel figcaption {
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-feature-settings: var(--num-feat);
}
.cohort-chart-panel figcaption b {
  color: var(--ink-1);
  font-weight: 500;
}
.cohort-chart-bars {
  display: grid;
  gap: var(--space-2);
}
.cohort-chart-bar-row {
  display: grid;
  grid-template-columns: minmax(92px, 0.72fr) minmax(90px, 1fr) 36px;
  gap: var(--space-3);
  align-items: center;
  min-width: 0;
  padding-block: 2px;
  color: rgba(245, 243, 238, 0.56);
  transition: color var(--dur-base) var(--ease);
}
.cohort-chart-bar-row:hover,
.cohort-chart-bar-row:focus,
.cohort-chart-bar-row[data-active="true"] {
  color: var(--ink-1);
  outline: none;
}
.cohort-chart-bar-row span,
.cohort-chart-bar-row b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: var(--t-11);
  line-height: 1.2;
  font-feature-settings: var(--num-feat);
}
.cohort-chart-bar-row b {
  text-align: right;
  color: rgba(245, 243, 238, 0.76);
  font-weight: 500;
}
.cohort-chart-bar-row i {
  display: block;
  height: 7px;
  overflow: hidden;
  border-radius: 0;
  background: rgba(245, 243, 238, 0.08);
}
.cohort-chart-bar-row i::before {
  content: "";
  display: block;
  width: var(--w);
  height: 100%;
  background: linear-gradient(90deg, rgba(139, 216, 209, 0.62), rgba(208, 83, 50, 0.82));
  transform-origin: left center;
  animation: cohortBarIn 520ms var(--ease) both;
}
.cohort-chart-readout {
  min-height: 1.25em;
  padding-top: var(--space-3);
  border-top: 1px solid rgba(241, 236, 231, 0.08);
  font-family: var(--font-mono);
}
@keyframes cohortBarIn {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  .cohort-chart-bar-row i::before {
    animation: none;
  }
  .cohort-chart-dot {
    transition: none;
  }
}
.cohort-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.cohort-filter-membership { justify-content: flex-end; margin-left: auto; }
.cohort-chip {
  appearance: none;
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm, 4px);
  padding: 6px 10px;
  font-family: var(--font-mono);
  font-size: var(--t-11);
  letter-spacing: var(--track-caps, 0.16em);
  text-transform: lowercase;
  color: var(--ink-3);
  cursor: pointer;
  transition: color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
}
.cohort-chip:hover { color: var(--ink-1); border-color: var(--ink-3); }
.cohort-chip[aria-selected="true"] {
  color: var(--ink-1);
  border-color: var(--ink-2);
  background: rgba(245, 243, 238, 0.04);
}
.cohort-chip-count { opacity: 0.55; margin-left: 4px; }
.cohort-chip-membership[aria-selected="true"] {
  color: #d05332;
  border-color: rgba(208, 83, 50, 0.55);
  background: rgba(180, 58, 25, 0.08);
}
.cohort-chip-membership:hover {
  color: #d05332;
  border-color: rgba(208, 83, 50, 0.55);
}

/* ── sentence bar — "listing teams & projects 41 · cohort teams 32" ──
   The kind tabs + membership chips read as one claim; each swappable word
   is a stateful token opening a listbox with counts + meanings. Mirrors
   the OS app's cohort sentence grammar. */
.cohort-kind-filter {
  align-items: center;
  gap: 7px;
  font-size: var(--t-12, 12px);
  text-transform: none;
  letter-spacing: 0.01em;
  color: var(--ink-4);
}
.ac-sent-word { white-space: nowrap; }
.ac-sent-unit { position: relative; display: inline-flex; }
.ac-sent-tok {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 3px 11px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: rgba(245, 243, 238, 0.03);
  font-family: var(--font-mono);
  font-size: var(--t-11);
  letter-spacing: 0.05em;
  text-transform: lowercase;
  line-height: 1;
  color: var(--ink-1);
  cursor: pointer;
  transition: color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease), background var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
.ac-sent-tok em {
  font-style: normal;
  font-weight: 600;
  font-feature-settings: var(--num-feat);
  color: #d05332;
}
.ac-sent-tok:hover { border-color: var(--ink-3); background: rgba(245, 243, 238, 0.05); }
.ac-sent-tok:active { transform: scale(0.97); }
.ac-sent-tok:focus-visible { outline: 1px solid rgba(208, 83, 50, 0.78); outline-offset: 2px; }
.ac-sent-chev {
  width: 0;
  height: 0;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  border-top: 4.5px solid var(--ink-4);
  transition: transform var(--dur-base) var(--ease);
}
.ac-sent-tok[aria-expanded="true"] { border-color: var(--ink-3); background: rgba(245, 243, 238, 0.06); }
.ac-sent-tok[aria-expanded="true"] .ac-sent-chev { transform: rotate(180deg); }
.ac-sent-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 40;
  min-width: 248px;
  max-width: min(320px, 84vw);
  padding: 5px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: #2b2726;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.42);
  animation: ac-sent-menu-in 160ms cubic-bezier(0.19, 1, 0.22, 1);
}
@keyframes ac-sent-menu-in {
  from { opacity: 0; transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .ac-sent-menu { animation: none; }
  .ac-sent-tok, .ac-sent-chev, .ac-sent-opt { transition: none; }
}
.ac-sent-opt {
  appearance: none;
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
  padding: 7px 9px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  text-align: left;
  font-family: var(--font-mono);
  cursor: pointer;
  transition: background var(--dur-base) var(--ease);
}
.ac-sent-opt + .ac-sent-opt { margin-top: 1px; }
.ac-sent-opt:hover { background: rgba(245, 243, 238, 0.05); }
.ac-sent-opt:focus-visible { outline: 1px solid rgba(208, 83, 50, 0.78); outline-offset: -1px; }
.ac-sent-opt-main { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.ac-sent-opt b {
  font-size: var(--t-11);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: var(--ink-3);
}
.ac-sent-opt small {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.35;
  color: var(--ink-4);
}
.ac-sent-opt em {
  font-style: normal;
  font-size: var(--t-11);
  font-weight: 600;
  font-feature-settings: var(--num-feat);
  color: #d05332;
}
.ac-sent-opt[aria-selected="true"] {
  background: rgba(245, 243, 238, 0.05);
  box-shadow: inset 2px 0 0 #d05332;
}
.ac-sent-opt[aria-selected="true"] b { color: var(--ink-1); }
/* Detail view keeps the kind token (it exits the dossier) but the
   membership token only applies to the grid. */
.cohort-page-head.is-detail .ac-sent-unit[data-unit="membership"],
.cohort-page-head.is-detail .ac-sent-unit[data-unit="membership"] + .ac-sent-word,
.cohort-page-head.is-detail .ac-sent-word:has(+ .ac-sent-unit[data-unit="membership"]) {
  display: none;
}

.cohort-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: var(--space-4);
  align-items: start;
}
.cohort-item-card {
  position: relative;
  min-width: 0;
  display: grid;
  align-content: start;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid rgba(241, 236, 231, 0.105);
  border-top-color: rgba(143, 34, 14, 0.32);
  border-radius: var(--r-sm);
  background:
    linear-gradient(112deg, rgba(180, 58, 25, 0.10), rgba(180, 58, 25, 0.020) 34%, transparent 62%),
    linear-gradient(180deg, rgba(241, 236, 231, 0.036), rgba(143, 34, 14, 0.010)),
    rgba(33, 27, 25, 0.54);
  box-shadow: inset 0 1px 0 rgba(241, 236, 231, 0.028);
  cursor: pointer;
  transition: border-color var(--dur-base) var(--ease), background var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
.cohort-item-card:hover,
.cohort-item-card:focus-visible {
  border-color: rgba(241, 236, 231, 0.16);
  border-top-color: rgba(208, 83, 50, 0.46);
  background:
    linear-gradient(112deg, rgba(180, 58, 25, 0.13), rgba(180, 58, 25, 0.030) 38%, transparent 64%),
    linear-gradient(180deg, rgba(241, 236, 231, 0.046), rgba(143, 34, 14, 0.020)),
    rgba(35, 29, 27, 0.72);
  box-shadow: inset 0 1px 0 rgba(241, 236, 231, 0.04), 0 10px 28px rgba(0, 0, 0, 0.18);
  transform: translateY(-1px);
}
.cohort-item-card:active { transform: scale(0.995); }
.cohort-item-card.is-person { border-top-color: rgba(139, 216, 209, 0.42); }
.cohort-item-card.is-team,
.cohort-item-card.is-project { border-top-color: rgba(208, 83, 50, 0.46); }
.cic-head {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: var(--space-4);
  align-items: center;
  min-width: 0;
}
.cic-shape {
  width: 112px;
  height: 112px;
  overflow: hidden;
  background: transparent;
}
.cic-shape canvas {
  display: block;
  width: 100%;
  height: 100%;
  background: transparent !important;
  transition: filter var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
.cohort-item-card:hover .cic-shape canvas,
.cohort-item-card:focus-visible .cic-shape canvas {
  filter: drop-shadow(0 0 12px rgba(208, 83, 50, 0.20));
  transform: scale(1.025);
}
.cohort-item-card.is-person .cic-shape {
  width: 108px;
  height: 108px;
  justify-self: center;
}
.cic-title-block { min-width: 0; }
.cic-tag {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: baseline;
  margin-bottom: var(--space-2);
  color: rgba(245, 243, 238, 0.48);
  font-family: var(--font-mono);
  font-size: var(--t-11);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
}
.cic-tag i {
  color: var(--ink-4);
  font-style: normal;
}
.cic-title-block h3 {
  margin: 0 0 var(--space-2);
  color: var(--ink-1);
  font-size: var(--t-18, 18px);
  font-weight: 600;
  line-height: var(--lh-tight);
  text-transform: lowercase;
  overflow-wrap: anywhere;
  transition: color var(--dur-base) var(--ease);
}
.cohort-item-card:hover .cic-title-block h3,
.cohort-item-card:focus-visible .cic-title-block h3 {
  color: #fffaf4;
}
.cic-title-block p {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--t-13);
  line-height: var(--lh-snug);
  overflow-wrap: anywhere;
}
.cic-routes {
  display: grid;
  gap: 0;
  min-width: 0;
  padding-top: var(--space-3);
  border-top: 1px solid rgba(245, 243, 238, 0.06);
}
.cic-route-line {
  min-width: 0;
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: baseline;
  padding-block: 4px;
  color: rgba(245, 243, 238, 0.62);
  font-family: var(--font-mono);
  font-size: var(--t-11);
  line-height: 1.35;
}
.cic-route-line > span {
  color: rgba(245, 243, 238, 0.48);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.cic-route-line p {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}
.cic-route-line a,
.cic-route-line p > span {
  color: rgba(245, 243, 238, 0.64);
  text-decoration: none;
  text-underline-offset: 3px;
}
.cic-route-line a:hover {
  color: var(--ink-1);
  text-decoration: underline;
}
.cic-route-line i {
  margin-inline: 4px;
  color: rgba(245, 243, 238, 0.26);
  font-style: normal;
}
.cic-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-width: 0;
  padding-top: var(--space-1);
}
.cic-signal {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 10px 0 0;
  border-top: 1px solid rgba(208, 83, 50, 0.24);
}
.cic-signal-head,
.cic-signal-meta,
.cic-signal-themes {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  min-width: 0;
}
.cic-signal-head {
  justify-content: space-between;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--t-11);
  line-height: 1.3;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
}
.cic-signal-head span {
  color: #d05332;
}
.cic-signal-head time {
  color: rgba(245, 243, 238, 0.32);
  font-feature-settings: var(--num-feat);
}
.cic-signal p {
  max-width: 58ch;
  margin: 0;
  color: rgba(245, 243, 238, 0.76);
  font-size: var(--t-12);
  line-height: var(--lh-snug);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.cic-signal-themes {
  gap: 5px;
}
.cic-signal-themes span {
  max-width: 30ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(139, 216, 209, 0.68);
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.25;
}
.cic-signal-meta {
  color: rgba(245, 243, 238, 0.38);
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.35;
  text-transform: lowercase;
  max-height: 30px;
  overflow: hidden;
}
.cic-signal-meta > span:not(.cic-signal-links)::after {
  content: "/";
  margin-left: var(--space-2);
  color: rgba(245, 243, 238, 0.18);
}
.cic-signal-links {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
  color: rgba(245, 243, 238, 0.58);
}
.cic-signal-links i {
  color: rgba(245, 243, 238, 0.22);
  font-style: normal;
}
.cic-pills span {
  max-width: 24ch;
  padding: 3px 7px;
  border: 1px solid rgba(245, 243, 238, 0.09);
  border-radius: var(--r-sm);
  color: rgba(245, 243, 238, 0.68);
  font-family: var(--font-mono);
  font-size: var(--t-11);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cohort-grid .page-empty {
  margin: 0;
  padding: var(--space-4);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
}

/* calendar wrapper — provides the sized box that cohort-calendar.js can
 * paint into. The canvas itself sets its intrinsic width from the day
 * count; the wrapper allows horizontal scroll for very long ranges. */
.calendar-wrap { width: 100%; min-height: 480px; overflow-x: auto; overflow-y: hidden; border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--water); }
.calendar-wrap .shape-cohort-calendar { display: block; }

/* The new calendar page brings its own page-padding via the
 * cohort-calendar-week.css `--cal-page-px` token, so zero the .page
 * padding to avoid double-inset. The page-mount stretches edge-to-edge. */
.page--calendar { padding-inline: 0; padding-block: 0; }
body.layout--wide .page--calendar { max-width: none; min-width: 0; }
.page--calendar .page-mount { min-height: 480px; min-width: 0; }

/* availability — sticky header on top so cohorts large enough to scroll
 * keep their column labels visible. The availability.css inside shape-ui
 * already sticks the header to top:0; the scroll container here is what
 * supplies the scroll context + a soft cap on height. */
.availability-wrap {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  max-height: 70vh;
  overflow: auto;
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: var(--space-3);
  background: var(--water);
}

.profile-picker { display: grid; gap: var(--space-3); margin-bottom: var(--space-5); padding-bottom: var(--space-5); border-bottom: 1px solid var(--hairline); }
.profile-picker-row { display: grid; grid-template-columns: 100px 1fr; align-items: center; gap: var(--space-3); font-family: var(--font-mono); font-size: var(--t-11); text-transform: uppercase; letter-spacing: var(--track-caps); color: var(--ink-3); }
.profile-picker-row select { font-family: var(--font-mono); font-size: var(--t-12); background: transparent; color: var(--ink-1); border: 1px solid var(--hairline); border-radius: var(--r-sm); padding: 6px var(--space-2); transition: border-color var(--dur-base) var(--ease); }
.profile-picker-row select:hover { border-color: var(--ink-3); }
.profile-picker-row select:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; border-color: var(--accent); }

/* profile-form — shape-ui renders .shape-profile-form-wrap > form.shape-profile-form
 * containing .shape-pf-row > .shape-pf-label + .shape-pf-input + .shape-profile-submit. */
.shape-profile-form-wrap { display: block; }
.shape-profile-form { display: grid; gap: var(--space-3); }
.shape-pf-row { display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: var(--space-3); }
.shape-pf-row-wide { align-items: start; }
.shape-pf-label { font-family: var(--font-mono); font-size: var(--t-11); font-weight: 500; text-transform: uppercase; letter-spacing: var(--track-caps); color: var(--ink-3); }
.shape-pf-input {
  font-family: var(--font-mono);
  font-size: var(--t-12);
  font-feature-settings: var(--num-feat);
  color: var(--ink-1);
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  padding: 8px var(--space-3);
  width: 100%;
  transition: border-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}
.shape-pf-input::placeholder { color: var(--ink-4); }
.shape-pf-input:hover { border-color: var(--ink-3); }
.shape-pf-input:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; border-color: var(--accent); }
.shape-pf-textarea { min-height: 92px; resize: vertical; line-height: var(--lh-snug); }
.shape-profile-submit { display: grid; gap: var(--space-3); margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--hairline); }
.shape-profile-submit-actions { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.shape-profile-submit-btn {
  display: inline-grid;
  grid-template-columns: auto;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--ink-4);
  border-radius: var(--r-md);
  color: var(--ink-1);
  background: transparent;
  font-family: var(--font-sans);
  font-size: var(--t-13);
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}
.shape-profile-submit-btn:hover { border-color: var(--ink-2); }
.shape-profile-submit-btn:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
.shape-profile-icon-btn {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--ink-4);
  border-radius: var(--r-md);
  color: var(--ink-2);
  background: transparent;
  cursor: pointer;
  transition: border-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}
.shape-profile-icon-btn:hover { border-color: var(--ink-2); color: var(--ink-1); }
.shape-profile-icon-btn:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
.shape-copy-icon {
  position: relative;
  display: block;
  width: 16px;
  height: 16px;
}
.shape-copy-icon::before,
.shape-copy-icon::after {
  content: "";
  position: absolute;
  width: 11px;
  height: 11px;
  border: 1px solid currentColor;
  border-radius: 2px;
  background: var(--page-bg, transparent);
}
.shape-copy-icon::before { left: 1px; top: 1px; opacity: 0.55; }
.shape-copy-icon::after { left: 4px; top: 4px; }
.shape-profile-hint { margin: 0; font-family: var(--font-mono); font-size: var(--t-11); color: var(--ink-3); line-height: var(--lh-snug); }
.shape-profile-hint code { font-family: var(--font-mono); color: var(--ink-2); }
.shape-profile-hint a { color: var(--ink-2); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.shape-profile-result {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  align-items: baseline;
  padding: var(--space-3);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: var(--t-11);
  line-height: var(--lh-snug);
}
.shape-profile-result[hidden] { display: none; }
.shape-profile-result-tag { color: var(--ink-1); text-transform: uppercase; letter-spacing: var(--track-caps); }
.shape-profile-result[data-kind="error"] { border-color: color-mix(in srgb, var(--accent) 55%, var(--hairline)); }
.shape-profile-result[data-kind="warn"] { border-color: color-mix(in srgb, var(--ink-2) 55%, var(--hairline)); }
.shape-profile-result-actions { display: inline-flex; flex-wrap: wrap; gap: var(--space-3); align-items: baseline; }
.shape-profile-result-actions a {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--ink-1);
  font: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: pointer;
}
.shape-profile-result-actions .shape-profile-icon-btn {
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  vertical-align: middle;
}
.shape-profile-result-actions .shape-copy-icon { width: 13px; height: 13px; }
.shape-profile-result-actions .shape-copy-icon::before,
.shape-profile-result-actions .shape-copy-icon::after {
  width: 9px;
  height: 9px;
}

@media (max-width: 720px) {
  /* wide layout collapses to full-width with side padding */
  body.layout--wide .site-header,
  body.layout--wide .page,
  body.layout--wide .site-footer { max-width: 100%; padding-inline: var(--space-4); }
  .cohort-page-head { grid-template-columns: 1fr; align-items: start; }
  .cohort-filter-membership { justify-content: flex-start; margin-left: 0; }
  .cohort-insight-head,
  .cohort-insight-grid { grid-template-columns: 1fr; }
  .cohort-grid { grid-template-columns: minmax(0, 1fr); }
  .site-nav-links { flex-wrap: wrap; }
  .shape-pf-row { grid-template-columns: 1fr; gap: var(--space-2); }
}

@media (max-width: 540px) {
  .site-header, .page, .site-footer { padding-inline: var(--space-4); }
  .site-nav { grid-template-columns: auto auto; row-gap: var(--space-3); }
  .site-nav-links { grid-column: 1 / -1; }
  .site-nav-version { grid-column: 2; justify-self: end; }
  .hero-title { font-size: var(--t-24); }
  .cohort-grid { grid-template-columns: 1fr; gap: var(--space-3); }
  .cic-head { grid-template-columns: 96px minmax(0, 1fr); gap: var(--space-3); }
  .cic-shape,
  .cohort-item-card.is-person .cic-shape { width: 96px; height: 96px; }
  .cohort-insight-board { padding: var(--space-3); }
  .cohort-chart-bar-row { grid-template-columns: minmax(0, 1fr) 34px; }
  .cohort-chart-bar-row i { grid-column: 1 / -1; }
  .cic-route-line { grid-template-columns: minmax(0, 1fr); gap: 1px; }
}

/* ─── links page ─────────────────────────────────────────────────── */
body.links-page-body .page,
body.links-page-body .site-footer {
  max-width: 1320px;
}
body.links-page-body .page {
  padding-block-start: var(--space-8);
}
body.links-page-body .site-nav-links {
  min-width: 0;
  flex-wrap: wrap;
  row-gap: var(--space-2);
}
body.links-page-body .eyebrow {
  margin-bottom: var(--space-4);
  color: var(--ink-3);
}
body.links-page-body .hero-title {
  max-width: 12ch;
  letter-spacing: 0;
}
body.links-page-body .hero-tagline {
  max-width: 34ch;
  color: var(--ink-2);
}
.links-list {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
.links-list > li {
  list-style: none;
  min-width: 0;
}
.link-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-height: 0;
  padding: var(--space-5);
  border: 1px solid var(--ink-4);
  border-radius: var(--r-md);
  color: var(--ink-1);
  background: transparent;
  transition:
    border-color var(--dur-base) var(--ease),
    transform var(--dur-base) var(--ease);
  height: 100%;
  box-sizing: border-box;
  text-decoration: none;
  cursor: pointer;
}
.link-card:hover {
  border-color: var(--ink-2);
  transform: translateY(-1px);
}
.link-card[aria-current="true"] {
  border-color: var(--ink-2);
}
.link-card:focus-visible {
  outline: 1px solid var(--red-2);
  outline-offset: 3px;
}
.link-card-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-11);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--track-caps-loose);
  color: var(--ink-3);
}
.link-card-title {
  font-family: var(--font-sans);
  font-size: var(--t-18, 18px);
  font-weight: 500;
  line-height: var(--lh-tight);
  color: var(--ink-1);
  margin: var(--space-2) 0 var(--space-1);
  letter-spacing: 0;
  text-transform: lowercase;
}
.link-card-desc {
  font-family: var(--font-sans);
  font-size: var(--t-12);
  line-height: var(--lh-snug);
  color: var(--ink-2);
  margin: 0 0 var(--space-3);
}
.link-card-desc code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: rgba(255,255,255,0.04);
  padding: 0 4px;
  border-radius: var(--r-sm);
}
.link-card-url {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--t-11);
  line-height: 1.45;
  color: var(--ink-3);
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px dashed var(--hairline);
  word-break: break-all;
}
.link-card:hover .link-card-url {
  color: var(--ink-1);
}

.links-shell {
  display: grid;
  grid-template-columns: minmax(280px, 380px) minmax(520px, 1fr);
  gap: var(--space-6);
  align-items: start;
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--hairline);
}
.links-shell .links-list {
  margin-top: 0;
}
.links-preview {
  min-width: 0;
  min-height: min(900px, calc(100vh - 128px));
  border: 1px solid var(--ink-4);
  border-radius: var(--r-md);
  background:
    linear-gradient(180deg, rgba(247, 241, 236, 0.038), rgba(247, 241, 236, 0.014));
  overflow: hidden;
  position: sticky;
  top: var(--space-5);
  display: flex;
  flex-direction: column;
}
.links-preview-head {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-5);
  border-bottom: 1px solid var(--hairline);
}
.links-preview-kicker {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--t-11);
  letter-spacing: var(--track-caps-loose);
  text-transform: uppercase;
  color: var(--ink-3);
}
.links-preview-title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--t-18, 18px);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: 0;
  color: var(--ink-1);
  text-transform: lowercase;
}
.links-preview-desc {
  max-width: 72ch;
  margin: 0;
  font-size: var(--t-13);
  line-height: var(--lh-snug);
  color: var(--ink-2);
}
.links-preview-frame-shell {
  flex: 1;
  height: auto;
  min-height: 620px;
  background: var(--abyss);
}
.links-preview-frame-shell[hidden],
.links-preview-links[hidden] {
  display: none;
}
.links-preview-frame {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  background: var(--abyss);
}
.links-preview-links {
  display: grid;
  align-content: start;
  gap: var(--space-4);
  flex: 1;
  padding: var(--space-5);
}
.links-preview-note {
  margin: 0;
  max-width: 52ch;
  font-size: var(--t-13);
  line-height: var(--lh-snug);
  color: var(--ink-2);
}
.links-preview-primary {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 var(--space-4);
  border: 1px solid rgba(241, 236, 231, 0.30);
  border-radius: var(--r-md);
  font-family: var(--font-mono);
  font-size: var(--t-11);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--ink-1);
  transition: border-color var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
}
.links-preview-primary:hover {
  border-color: rgba(241, 236, 231, 0.50);
  background: rgba(247, 241, 236, 0.05);
}
.links-preview-meta {
  display: grid;
  gap: var(--space-3);
  margin: 0;
}
.links-preview-meta div {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: var(--space-4);
  padding-block: var(--space-3);
  border-top: 1px dashed var(--hairline);
  font-family: var(--font-mono);
  font-size: var(--t-11);
  line-height: var(--lh-snug);
}
.links-preview-meta dt {
  color: var(--ink-4);
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
}
.links-preview-meta dd {
  margin: 0;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  body.links-page-body .page,
  body.links-page-body .site-footer {
    max-width: 680px;
  }
  .links-shell {
    display: block;
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }
  .links-preview {
    position: static;
    margin-top: var(--space-5);
  }
  .links-preview-frame-shell {
    height: 520px;
    min-height: 0;
  }
}

@media (max-width: 620px) {
  body.links-page-body .site-nav {
    grid-template-columns: 1fr auto;
    align-items: start;
  }
  body.links-page-body .site-nav-mark {
    max-width: 18ch;
  }
  body.links-page-body .site-nav-links {
    grid-column: 1 / -1;
  }
  body.links-page-body .site-nav-version {
    grid-column: 2;
    grid-row: 1;
  }
  body.links-page-body .hero-tagline {
    max-width: 34ch;
  }
  .links-list {
    grid-template-columns: 1fr;
  }
  .links-preview {
    min-height: 540px;
  }
  .links-preview-head,
  .links-preview-links {
    padding: var(--space-4);
  }
  .links-preview-frame-shell {
    height: 460px;
  }
  .links-preview-meta div {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }
}

.cohort-detail { display: block; }
.cohort-detail[hidden] { display: none; }
.cd-bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--t-11);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
}
.cd-back { color: var(--ink-2); transition: color var(--dur-base) var(--ease); }
.cd-back:hover { color: var(--ink-1); }
.cd-tag { display: inline-flex; align-items: baseline; gap: var(--space-2); color: var(--ink-3); }
.cd-tag .cd-kind { color: var(--ink-2); }
.cd-actions { display: inline-flex; align-items: baseline; justify-content: flex-end; gap: var(--space-3); }
.cd-edit { border: 0; padding: 0; background: transparent; color: var(--ink-3); font: inherit; text-transform: none; letter-spacing: 0; cursor: pointer; transition: color var(--dur-base) var(--ease); }
.cd-edit:hover { color: var(--ink-1); }
.cd-edit-raw { color: var(--ink-4); }
.cd-sep { color: var(--ink-4); }
.cd-dossier {
  position: relative;
  display: grid;
  grid-template-columns: minmax(260px, 330px) minmax(0, 1fr);
  min-height: 560px;
  border: 1px solid rgba(241, 236, 231, 0.18);
  border-radius: var(--r-md);
  overflow: hidden;
  background:
    linear-gradient(112deg, rgba(180, 58, 25, 0.16), rgba(180, 58, 25, 0.03) 31%, transparent 54%),
    linear-gradient(180deg, rgba(247, 241, 236, 0.045), rgba(247, 241, 236, 0.008)),
    rgba(28, 25, 25, 0.94);
}
.cd-dossier::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.035), transparent 14%, transparent 86%, rgba(255,255,255,0.018)),
    repeating-linear-gradient(180deg, rgba(255,255,255,0.012) 0 1px, transparent 1px 9px);
  opacity: 0.34;
}
.cd-rail,
.cd-ledger {
  position: relative;
  z-index: 1;
}
.cd-rail {
  display: grid;
  align-content: start;
  gap: var(--space-4);
  padding: var(--space-5);
  border-right: 1px solid rgba(241, 236, 231, 0.11);
  background: linear-gradient(180deg, rgba(13, 12, 10, 0.42), rgba(13, 12, 10, 0.14));
}
.cd-shape {
  width: min(100%, 260px);
  aspect-ratio: 1;
  border-radius: var(--r-md);
  overflow: hidden;
  background: transparent;
  justify-self: center;
}
.cd-shape canvas { display: block; width: 100%; height: 100%; }
/* Sigil continuity, grid → dossier (see syncFromHashTransitioned in
 * cohort.js). The rail hero carries the name statically; the opened
 * card's canvas is tagged at click time. */
.cd-rail .cd-shape canvas { view-transition-name: sr-sigil; }
::view-transition-group(sr-sigil),
::view-transition-old(sr-sigil),
::view-transition-new(sr-sigil) {
  animation-duration: 300ms;
  animation-timing-function: var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}
::view-transition-old(sr-sigil),
::view-transition-new(sr-sigil) {
  height: 100%;
}
::view-transition-old(root) { animation-duration: 140ms; }
::view-transition-new(root) { animation-duration: 220ms; }
.cd-rail-kicker,
.cd-h {
  font-family: var(--font-mono);
  font-size: var(--t-11);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--track-caps-loose);
  color: var(--ink-3);
}
.cd-name {
  margin: var(--space-2) 0;
  font-family: var(--font-sans);
  font-size: var(--t-32);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: 0;
  color: var(--ink-1);
  text-transform: lowercase;
}
.cd-focus {
  margin: 0 0 var(--space-4);
  font-size: var(--t-15);
  color: var(--ink-2);
  line-height: var(--lh-snug);
}
.cd-rail-list {
  display: grid;
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--hairline);
}
.cd-rail-list div {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--t-11);
  line-height: var(--lh-snug);
  color: var(--ink-2);
}
.cd-rail-list span {
  color: rgba(241, 236, 231, 0.44);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  white-space: nowrap;
}
.cd-rail-list .cd-rail-members {
  display: grid;
  gap: 3px;
  color: var(--ink-2);
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
}
.cd-rail-list .cd-rail-member {
  display: block;
  color: var(--ink-2);
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
}
.cd-rail-member em {
  color: rgba(241, 236, 231, 0.46);
  font-style: normal;
}
.cd-rail-list a,
.cd-text-link {
  color: var(--ink-1);
  border-bottom: 1px solid rgba(241, 236, 231, 0.24);
  transition: border-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}
.cd-rail-list a:hover,
.cd-text-link:hover {
  color: #d05332;
  border-bottom-color: rgba(208, 83, 50, 0.65);
}
.cd-ledger {
  min-width: 0;
  padding: var(--space-5);
  display: grid;
  align-content: start;
  gap: var(--space-5);
}
.cd-ledger-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
/* Explore toolbar — record actions (calendar, availability, links)
 * lifted into the read's head as icon buttons: the first actions you
 * see. Square (shape-grammar: no words inside), hairline at rest, oxide
 * tint on hover/focus — the dossier's link voice. Mirror of
 * .alch-explore-* in apps/os/src/styles.css. */
.cd-explore-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: auto;
}
.cd-explore-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid rgba(241, 236, 231, 0.16);
  border-radius: 7px;
  background: rgba(247, 241, 236, 0.018);
  color: var(--ink-2);
  cursor: pointer;
  transition: color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease), background var(--dur-base) var(--ease), transform 160ms var(--ease);
}
.cd-explore-btn svg { width: 16px; height: 16px; display: block; }
.cd-explore-btn:hover,
.cd-explore-btn:focus-visible {
  color: #d05332;
  border-color: rgba(208, 83, 50, 0.55);
  background: rgba(180, 58, 25, 0.08);
}
.cd-explore-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(208, 83, 50, 0.38);
}
.cd-explore-btn:active { transform: scale(0.94); }
@media (prefers-reduced-motion: reduce) {
  .cd-explore-btn { transition: none; }
  .cd-explore-btn:active { transform: none; }
}
.cd-quick {
  display: grid;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.cd-quick-row,
.cd-row {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: var(--space-4);
  align-items: baseline;
}
.cd-quick-row {
  padding-block: var(--space-3);
  min-height: 42px;
}
.cd-quick-row + .cd-quick-row { border-top: 1px solid rgba(241, 236, 231, 0.055); }
.cd-quick-k,
.cd-row-k {
  font-family: var(--font-mono);
  font-size: var(--t-11);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: rgba(241, 236, 231, 0.44);
}
.cd-quick-v {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-width: 0;
}
.cd-quick-link,
.cd-pill,
.cd-quick-text {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px var(--space-2);
  border: 1px solid rgba(241, 236, 231, 0.16);
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: var(--t-11);
  color: var(--ink-1);
  line-height: 1.25;
}
.cd-quick-text {
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2);
  max-width: min(100%, 54ch);
  color: var(--ink-2);
  white-space: normal;
  overflow-wrap: anywhere;
  border-color: rgba(241, 236, 231, 0.11);
  background: rgba(247, 241, 236, 0.018);
}
.cd-quick-link {
  transition: color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
}
.cd-quick-link:hover {
  color: #d05332;
  border-color: rgba(208, 83, 50, 0.55);
  background: rgba(180, 58, 25, 0.08);
}
.cd-team-token {
  gap: var(--space-2);
  padding-left: 3px;
}
.cd-team-token .cd-mini-shape {
  width: 20px;
  aspect-ratio: 1;
  flex: 0 0 auto;
  border-radius: 5px;
  overflow: hidden;
  background: transparent;
}
.cd-team-token canvas {
  display: block;
  width: 100%;
  height: 100%;
  transition: filter var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
.cd-team-token:hover canvas,
.cd-team-token:focus-visible canvas {
  filter: drop-shadow(0 0 8px rgba(208, 83, 50, 0.34));
  transform: scale(1.08);
}
/* The rail's team token carries the mini sigil (it absorbed the old
 * "team context" quick row) — reset the chip chrome to the rail's quiet
 * underlined-link voice and size the shape to the rail's type scale. */
.cd-rail-list .cd-team-token {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid rgba(241, 236, 231, 0.24);
  background: transparent;
  gap: 6px;
}
.cd-rail-list .cd-team-token .cd-mini-shape { width: 15px; }
.cd-pill {
  gap: var(--space-2);
  color: var(--ink-2);
}
.cd-pill span,
.cd-quick-text span {
  color: var(--ink-3);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  /* Labels are atomic — only the value text may wrap (no "FOCU S"). */
  white-space: nowrap;
}
/* ask-me-about chips with matching timeline provenance carry a hover/
 * focus evidence layer (the matched entry: date — title). The oxide
 * corner tick marks which chips have it; chips without a match render
 * plain, so nothing looks layered that isn't. */
.cd-evidence-chip {
  position: relative;
}
.cd-evidence-chip::before {
  content: "";
  position: absolute;
  top: 3px;
  right: 3px;
  width: 4px;
  height: 4px;
  border-top: 1px solid #d05332;
  border-right: 1px solid #d05332;
  opacity: 0.65;
}
.cd-evidence-chip::after {
  content: "evidence · " attr(data-evidence);
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  z-index: 12;
  width: max-content;
  max-width: min(46ch, 70vw);
  padding: 5px 9px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm, 4px);
  background: var(--paper-2, var(--paper-1, #221d1a));
  color: var(--ink-2);
  font-size: var(--t-11, 10.5px);
  line-height: 1.45;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity var(--dur-fast, 120ms) var(--ease, ease-out),
              transform var(--dur-fast, 120ms) var(--ease, ease-out);
}
.cd-evidence-chip:hover::after,
.cd-evidence-chip:focus-visible::after {
  opacity: 1;
  transform: translateY(0);
  /* enter slower than exit */
  transition-duration: var(--dur-base, 220ms);
}
@media (prefers-reduced-motion: reduce) {
  .cd-evidence-chip::after { transition: none; }
}
.cd-team-quick .cd-quick-row {
  grid-template-columns: 104px minmax(0, 1fr);
  min-height: 0;
  padding-block: var(--space-2);
}
.cd-team-quick .cd-quick-v {
  gap: var(--space-3);
}
/* Multi-item values: short pills share a line; prose items each own a
 * full row (two long items flowing inline made a ragged fake column). */
.cd-team-quick .cd-quick-v {
  column-gap: 16px;
  row-gap: 5px;
}
.cd-team-quick .cd-quick-text {
  flex: 1 1 100%;
}
.cd-team-quick .cd-pill,
.cd-team-quick .cd-quick-text {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.cd-team-quick .cd-pill {
  color: var(--ink-2);
}
.cd-team-quick .cd-quick-text {
  max-width: 72ch;
}
.cd-section-stack {
  display: grid;
  gap: var(--space-2);
}
.cd-section {
  border-top: 1px solid var(--hairline);
  padding-top: var(--space-2);
}
.cd-section summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  min-height: 42px;
  padding-inline: 8px;
  border-radius: 8px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-mono);
  font-size: var(--t-11);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--track-caps-loose);
  color: var(--ink-2);
  transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
/* Liquid-glass sheen on hover/focus — translucent fill + 1px inset
 * specular highlight (gloss, not backdrop blur). */
.cd-section summary:hover,
.cd-section summary:focus-visible {
  color: var(--ink-1);
  background: linear-gradient(180deg, rgba(247, 241, 236, 0.05), rgba(247, 241, 236, 0.018));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.cd-section summary::-webkit-details-marker { display: none; }
.cd-section-label {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3);
}
.cd-section summary .cd-section-preview {
  min-width: 0;
  max-width: min(52ch, 68%);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* Previews carry actual record content (now-line, latest timeline
   * entry, traction snippet) — readable ink, content keeps its case. */
  color: rgba(241, 236, 231, 0.55);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
/* Flat section — the dossier's default block: hairline + small label,
 * content simply visible; nothing suggests clicking. */
.cd-section-flat {
  border: 0;
  border-top: 1px solid rgba(241, 236, 231, 0.08);
  border-radius: 0;
  background: transparent;
  padding: var(--space-4) 0 var(--space-2);
}
.cd-flat-label {
  margin: 0 0 var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--t-11);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--ink-3);
}
.cd-section-flat .cd-section-body { animation: none; }

/* The expand affordance: a chevron in a small liquid-glass chip (mirrors
 * the explore toolbar's icon-chip grammar and .alch-section-mark in the
 * OS styles). Quiet at rest, oxide when open, chevron rotates 180° — what
 * makes a section read as expandable vs an always-visible flat block. */
.cd-section-mark {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  border: 1px solid rgba(241, 236, 231, 0.10);
  background: linear-gradient(180deg, rgba(241, 236, 231, 0.07), rgba(241, 236, 231, 0.02));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  color: rgba(241, 236, 231, 0.62);
  transition: color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease), background var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.cd-section-mark svg {
  width: 14px;
  height: 14px;
  display: block;
  transition: transform 240ms var(--ease);
}
.cd-section summary:hover .cd-section-mark,
.cd-section summary:focus-visible .cd-section-mark {
  color: var(--ink-1);
  border-color: rgba(241, 236, 231, 0.22);
  background: linear-gradient(180deg, rgba(241, 236, 231, 0.12), rgba(241, 236, 231, 0.04));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
.cd-section[open] .cd-section-mark {
  color: #d05332;
  border-color: rgba(208, 83, 50, 0.42);
  background: linear-gradient(180deg, rgba(180, 58, 25, 0.16), rgba(180, 58, 25, 0.05));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.cd-section[open] .cd-section-mark svg { transform: rotate(180deg); }
.cd-section[open] summary {
  color: var(--ink-1);
}
/* Open section: the body below owns the content — a preview restating it
 * would be a duplicate role in the same frame. */
.cd-section[open] .cd-section-preview {
  display: none;
}
.cd-section-body {
  display: grid;
  gap: var(--space-3);
  padding: 0 0 var(--space-4);
  animation: cd-section-reveal 170ms var(--ease) both;
}
@keyframes cd-section-reveal {
  from { opacity: 0; transform: translateY(-2px); }
  to { opacity: 1; transform: translateY(0); }
}
/* Liquid open: animate the body's height where supported. interpolate-size
 * is scoped to .cd-section (not :root) so nothing else changes. Mirror of
 * the .alch-detail-disclosure rule in the OS styles. */
@supports (interpolate-size: allow-keywords) {
  .cd-section { interpolate-size: allow-keywords; }
  .cd-section::details-content {
    block-size: 0;
    overflow: clip;
    transition: block-size 260ms var(--ease), content-visibility 260ms allow-discrete;
  }
  .cd-section[open]::details-content { block-size: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .cd-section-body { animation: none; }
  .cd-section-mark svg, .cd-section summary { transition: none; }
  .cd-section::details-content { transition: none; }
}
.cd-prose {
  display: grid;
  gap: var(--space-3);
  max-width: 78ch;
  color: var(--ink-2);
  font-size: var(--t-14);
  line-height: var(--lh-relaxed);
}
.cd-prose p {
  margin: 0;
  overflow-wrap: anywhere;
}
.cd-prose ul {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding-left: 1.1rem;
}
.cd-prose li { padding-left: var(--space-1); }
.cd-row {
  padding-block: var(--space-2);
  border-top: 1px dashed rgba(241, 236, 231, 0.075);
  font-size: var(--t-13);
  color: var(--ink-2);
}
.cd-row:first-child { border-top: 0; }
.cd-row-v {
  min-width: 0;
  overflow-wrap: anywhere;
}
.cd-bullet-list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding-left: 1.1rem;
}
.cd-relationship-list {
  list-style: none;
  padding-left: 0;
}
.cd-relationship-list > li {
  display: grid;
  gap: var(--space-1);
  padding-block: var(--space-2);
  border-top: 1px dashed rgba(241, 236, 231, 0.075);
}
.cd-relationship-list > li:first-child { border-top: 0; padding-top: 0; }
.cd-relationship-list strong {
  font-size: var(--t-13);
  color: var(--ink);
}
.cd-relationship-list span,
.cd-relationship-list p,
.cd-relationship-list ul {
  margin: 0;
  color: var(--ink-2);
}
.cd-relationship-list ul {
  padding-left: 1rem;
}
.cd-evidence {
  display: grid;
  gap: var(--space-3);
}
.cd-evidence-meta,
.cd-evidence-themes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.cd-evidence-meta span,
.cd-evidence-themes span {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px var(--space-2);
  border: 1px solid rgba(241, 236, 231, 0.12);
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: var(--t-11);
  line-height: 1.25;
  color: rgba(241, 236, 231, 0.62);
}
.cd-evidence-meta span {
  color: rgba(241, 236, 231, 0.46);
  text-transform: lowercase;
}
.cd-evidence-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}
.cd-evidence-list li {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3);
  border: 1px solid rgba(241, 236, 231, 0.09);
  border-left-color: rgba(208, 83, 50, 0.45);
  border-radius: var(--r-sm);
  background: rgba(247, 241, 236, 0.018);
}
.cd-evidence-list p {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--t-13);
  line-height: var(--lh-snug);
  overflow-wrap: anywhere;
}
.cd-evidence-list span,
.cd-evidence-note {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--t-11);
  line-height: 1.4;
  color: rgba(241, 236, 231, 0.46);
}
.cd-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}
.cd-timeline-item {
  list-style: none;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: var(--space-4);
  padding-block: var(--space-3);
  border-top: 1px dashed rgba(241, 236, 231, 0.075);
}
.cd-timeline-item:first-child { border-top: 0; padding-top: 0; }
.cd-timeline-date,
.cd-timeline-type,
.cd-timeline-source {
  font-family: var(--font-mono);
  font-size: var(--t-11);
  line-height: 1.35;
}
.cd-timeline-date {
  color: rgba(241, 236, 231, 0.46);
  font-feature-settings: var(--num-feat);
}
.cd-timeline-body {
  min-width: 0;
  display: grid;
  gap: var(--space-1);
}
.cd-timeline-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
}
.cd-timeline-title {
  color: var(--ink-1);
  font-weight: 500;
  line-height: var(--lh-snug);
}
a.cd-timeline-title {
  border-bottom: 1px solid rgba(241, 236, 231, 0.20);
  transition: color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
a.cd-timeline-title:hover {
  color: #d05332;
  border-bottom-color: rgba(208, 83, 50, 0.65);
}
.cd-timeline-type {
  padding: 2px 6px;
  border: 1px solid rgba(241, 236, 231, 0.10);
  border-radius: var(--r-sm);
  color: rgba(241, 236, 231, 0.46);
  text-transform: lowercase;
}
.cd-timeline-body p {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--t-12);
  line-height: var(--lh-snug);
  overflow-wrap: anywhere;
}
.cd-timeline-source {
  color: rgba(241, 236, 231, 0.46);
  text-transform: lowercase;
}
@media (max-width: 860px) {
  .cd-dossier { grid-template-columns: 1fr; }
  .cd-rail { border-right: 0; border-bottom: 1px solid rgba(241, 236, 231, 0.11); }
  .cd-shape { justify-self: start; max-width: 240px; }
}

@media (max-width: 720px) {
  .cd-bar { flex-wrap: wrap; row-gap: var(--space-2); }
  .cohort-filter-membership { justify-content: flex-start; margin-left: 0; }
  .cd-quick-row,
  .cd-row,
  .cd-timeline-item,
  .cd-rail-list div { grid-template-columns: 1fr; gap: var(--space-1); }
}

.cal-export {
  margin: 0 0 var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--t-11);
  color: var(--ink-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  justify-content: space-between;
  border: 1px solid rgba(241, 236, 231, 0.105);
  border-top-color: rgba(143, 34, 14, 0.32);
  padding-block: var(--space-3);
}
.page--calendar .cal-export {
  width: 100%;
  max-width: 1480px;
  margin-inline: auto;
  padding-inline: var(--cal-page-px, var(--space-6));
}
.cal-export-copy {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: baseline;
  min-width: 0;
}
.cal-export-copy strong {
  color: var(--ink-1);
  font-weight: 500;
}
.cal-export-kicker {
  color: #d05332;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
}
.cal-export-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}
.cal-export a {
  color: var(--ink-2);
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 1px;
}
.cal-export a:hover { color: var(--ink-1); border-bottom-color: var(--ink-2); }
.cal-export a.cal-export-primary {
  color: var(--ink-1);
  border-color: rgba(208, 83, 50, 0.72);
}

@media (max-width: 720px) {
  .cal-export {
    align-items: flex-start;
    justify-content: flex-start;
  }
  .cal-export-actions {
    width: 100%;
  }
}

/* context / intel surface */
.context-page {
  display: grid;
  gap: var(--space-6);
}
.context-head {
  display: grid;
  gap: var(--space-2);
  padding-block: var(--space-5) var(--space-1);
}
.context-head .page-title {
  margin-bottom: 0;
}
.context-deck {
  max-width: 72ch;
  margin: 0;
  color: var(--ink-2);
  font-size: var(--t-14);
  line-height: var(--lh-snug);
}
.context-mount {
  display: grid;
  gap: var(--space-6);
  min-width: 0;
}
.context-policy {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.6fr);
  gap: var(--space-5);
  min-width: 0;
  max-width: 100%;
  padding: var(--space-4) 0;
  border-block: 1px solid var(--hairline);
}
.context-policy span,
.context-section-head p,
.context-block h4 {
  font-family: var(--font-mono);
  font-size: var(--t-11);
  font-weight: 500;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--ink-3);
}
.context-policy p {
  margin: var(--space-2) 0 0;
  max-width: 48ch;
  color: var(--ink-1);
  font-size: var(--t-15);
  line-height: var(--lh-snug);
}
.context-policy dl,
.context-provenance {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
  margin: 0;
}
.context-policy dl div,
.context-provenance div {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: var(--space-4);
  align-items: baseline;
}
.context-policy dt,
.context-provenance dt {
  font-family: var(--font-mono);
  font-size: var(--t-11);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: rgba(241, 236, 231, 0.44);
}
.context-policy dd,
.context-provenance dd {
  min-width: 0;
  margin: 0;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}
.context-summary,
.context-metrics,
.context-type-counts {
  display: flex;
  flex-wrap: wrap;
  min-width: 0;
  max-width: 100%;
  gap: var(--space-2);
}
.context-summary span,
.context-metrics span,
.context-type-counts span,
.context-chip {
  display: inline-flex;
  align-items: baseline;
  min-height: 24px;
  padding: 3px var(--space-2);
  border: 1px solid rgba(241, 236, 231, 0.13);
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: var(--t-11);
  line-height: 1.25;
  color: var(--ink-2);
}
.context-summary b,
.context-metrics b,
.context-type-counts b {
  margin-right: var(--space-2);
  color: rgba(241, 236, 231, 0.44);
  font-weight: 500;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
}
.context-section {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
  max-width: 100%;
  padding-top: var(--space-6);
  border-top: 1px solid var(--hairline);
}
.context-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}
.context-section-head h2 {
  margin: 0;
  color: var(--ink-1);
  font-size: var(--t-20, 20px);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: 0;
  text-transform: lowercase;
}
.context-section-head p {
  margin: 0;
  font-feature-settings: var(--num-feat);
}
.context-evidence,
.context-record,
.context-distillation,
.context-field-note,
.context-session-note,
.context-signal-source,
.context-project-week,
.context-data-contract {
  border-top: 1px solid rgba(241, 236, 231, 0.12);
  padding-top: var(--space-4);
}
.context-evidence:first-of-type,
.context-record:first-of-type,
.context-distillation:first-of-type,
.context-field-note:first-of-type,
.context-session-note:first-of-type,
.context-signal-source:first-of-type,
.context-project-week:first-of-type,
.context-data-contract:first-of-type {
  border-top: 0;
  padding-top: 0;
}
.context-evidence {
  display: grid;
  gap: var(--space-3);
}
.context-field-note,
.context-session-note,
.context-signal-inventory,
.context-project-week-board,
.context-data-contract {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
}
.context-evidence-head {
  display: grid;
  gap: var(--space-1);
}
.context-evidence-head h3,
.context-record summary > span:first-child {
  margin: 0;
  color: var(--ink-1);
  font-size: var(--t-17, 17px);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: 0;
  text-transform: lowercase;
}
.context-evidence-head p {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--t-11);
  line-height: 1.4;
  color: var(--ink-4);
}
.context-chips,
.context-entities,
.context-linked-records,
.context-claim-entities {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.context-linked-records,
.context-claim-entities {
  gap: var(--space-3);
}
.context-chip {
  color: rgba(241, 236, 231, 0.66);
  background: rgba(247, 241, 236, 0.016);
}
a.context-chip {
  color: var(--ink-1);
  transition: color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
}
a.context-chip:hover {
  color: #d05332;
  border-color: rgba(208, 83, 50, 0.55);
  background: rgba(180, 58, 25, 0.08);
}
.context-claim-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.context-claim {
  display: grid;
  gap: var(--space-2);
  padding-block: var(--space-4);
  border-top: 1px dashed rgba(241, 236, 231, 0.095);
}
.context-claim:first-child {
  border-top: 0;
}
.context-claim p,
.context-note {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--t-13);
  line-height: var(--lh-snug);
  overflow-wrap: anywhere;
}
.context-note {
  font-family: var(--font-mono);
  font-size: var(--t-11);
  color: rgba(241, 236, 231, 0.48);
}
.context-record summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: baseline;
  min-height: 38px;
  cursor: pointer;
  list-style: none;
}
.context-record summary::-webkit-details-marker {
  display: none;
}
.context-session-note summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: baseline;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
}
.context-session-note summary::-webkit-details-marker {
  display: none;
}
.context-signal-source summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: baseline;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
}
.context-signal-source summary::-webkit-details-marker {
  display: none;
}
.context-project-week summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: baseline;
  min-height: 46px;
  cursor: pointer;
  list-style: none;
}
.context-project-week summary::-webkit-details-marker {
  display: none;
}
.context-session-note summary > span:first-child {
  min-width: 0;
  color: var(--ink-1);
  font-size: var(--t-15);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.context-signal-source summary > span:first-child {
  min-width: 0;
  color: var(--ink-1);
  font-size: var(--t-15);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.context-project-week summary > span:first-child {
  min-width: 0;
  color: var(--ink-1);
  font-size: var(--t-15);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.context-record summary > span:last-child,
.context-session-note summary > span:last-child,
.context-signal-source summary > span:last-child,
.context-project-week summary > span:last-child {
  font-family: var(--font-mono);
  font-size: var(--t-11);
  color: var(--ink-4);
  font-feature-settings: var(--num-feat);
  white-space: nowrap;
}
.context-record-body,
.context-distillation,
.context-session-body,
.context-signal-source-body,
.context-project-week-body {
  display: grid;
  gap: var(--space-3);
}
.context-record-body,
.context-session-body,
.context-signal-source-body,
.context-project-week-body {
  padding-block: var(--space-3) var(--space-4);
}
.context-project-week {
  --snapshot-accent: rgba(241, 236, 231, 0.22);
  min-width: 0;
  max-width: 100%;
  border-top-color: var(--snapshot-accent);
}
.context-drift-aligned {
  --snapshot-accent: rgba(139, 216, 209, 0.36);
}
.context-drift-partial_drift {
  --snapshot-accent: rgba(231, 181, 100, 0.40);
}
.context-drift-status_conflict {
  --snapshot-accent: rgba(208, 83, 50, 0.50);
}
.context-drift-insufficient_evidence {
  --snapshot-accent: rgba(241, 236, 231, 0.16);
}
.context-priority-high {
  --snapshot-accent: rgba(208, 83, 50, 0.58);
}
.context-priority-medium {
  --snapshot-accent: rgba(231, 181, 100, 0.42);
}
.context-priority-low {
  --snapshot-accent: rgba(139, 216, 209, 0.36);
}
.context-project-week summary > span:first-child::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: var(--space-2);
  border-radius: 50%;
  background: var(--snapshot-accent);
  vertical-align: 0.08em;
}
.context-snapshot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(220px, 0.62fr);
  gap: var(--space-4);
}
.context-snapshot-lane {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  min-width: 0;
  padding-top: var(--space-3);
  border-top: 1px dashed rgba(241, 236, 231, 0.10);
}
.context-snapshot-lane h4 {
  margin: 0;
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: var(--t-11);
  font-weight: 500;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
}
.context-snapshot-lane p {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--t-13);
  line-height: var(--lh-snug);
  overflow-wrap: anywhere;
}
.context-snapshot-lane b {
  color: var(--ink-1);
  font-weight: 500;
}
.context-snapshot-action p {
  color: var(--ink-1);
}
.context-progress-history {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-width: 0;
}
.context-progress-tick {
  --snapshot-accent: rgba(241, 236, 231, 0.18);
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  min-height: 24px;
  padding: 3px var(--space-2);
  border: 1px solid var(--snapshot-accent);
  border-radius: var(--r-sm);
  color: var(--ink-2);
  background: rgba(247, 241, 236, 0.012);
  font-family: var(--font-mono);
  font-size: var(--t-11);
  line-height: 1.25;
}
.context-progress-tick b {
  color: rgba(241, 236, 231, 0.46);
  font-weight: 500;
}
.context-inventory-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.context-inventory-signal {
  display: grid;
  gap: var(--space-2);
  padding-block: var(--space-3);
  border-top: 1px dashed rgba(241, 236, 231, 0.09);
}
.context-inventory-signal:first-child {
  border-top: 0;
}
.context-inventory-signal > span {
  color: #d05332;
  font-family: var(--font-mono);
  font-size: var(--t-11);
  font-weight: 500;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
}
.context-inventory-signal p {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--t-13);
  line-height: var(--lh-snug);
  overflow-wrap: anywhere;
}
.context-inventory-signal blockquote {
  margin: 0;
  padding-left: var(--space-3);
  border-left: 1px solid rgba(208, 83, 50, 0.42);
  color: rgba(241, 236, 231, 0.62);
  font-size: var(--t-13);
  line-height: var(--lh-snug);
}
.context-block {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
  max-width: 100%;
}
.context-block h4 {
  margin: 0;
  overflow-wrap: anywhere;
}
.context-block ul {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
  margin: 0;
  padding-left: 1.1rem;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}
.context-block li {
  padding-left: var(--space-1);
  font-size: var(--t-13);
  line-height: var(--lh-snug);
  overflow-wrap: anywhere;
}
.context-note-section {
  display: grid;
  gap: var(--space-2);
  padding-block: var(--space-3);
  border-top: 1px dashed rgba(241, 236, 231, 0.095);
}
.context-note-section h4 {
  margin: 0;
  color: var(--ink-1);
  font-size: var(--t-14);
  font-weight: 500;
  line-height: var(--lh-snug);
  text-transform: lowercase;
}
.context-note-section ul {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.context-note-section li {
  display: grid;
  gap: var(--space-1);
}
.context-note-section strong {
  color: #d05332;
  font-family: var(--font-mono);
  font-size: var(--t-11);
  font-weight: 500;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
}
.context-note-section p {
  margin: 0;
  max-width: 86ch;
  color: var(--ink-2);
  font-size: var(--t-13);
  line-height: var(--lh-snug);
  overflow-wrap: anywhere;
}
.context-question blockquote {
  margin: 0;
  padding-left: var(--space-3);
  border-left: 1px solid rgba(208, 83, 50, 0.42);
  color: rgba(241, 236, 231, 0.62);
  font-size: var(--t-13);
  line-height: var(--lh-snug);
}
.context-source-strip {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: baseline;
  min-width: 0;
}
.context-source-strip > span {
  font-family: var(--font-mono);
  font-size: var(--t-11);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: rgba(241, 236, 231, 0.38);
}
.context-source-strip p {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
  margin: 0;
}
.context-source-strip code {
  max-width: 44ch;
  padding: 2px 6px;
  border: 1px solid rgba(241, 236, 231, 0.10);
  border-radius: var(--r-sm);
  color: rgba(139, 216, 209, 0.70);
  background: rgba(139, 216, 209, 0.045);
  font: 400 10px/1.35 var(--font-mono);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.context-note-copy {
  border: 1px solid rgba(241, 236, 231, 0.12);
  border-radius: var(--r-sm);
  background: rgba(247, 241, 236, 0.016);
}
.context-note-copy summary {
  min-height: 34px;
  padding: 7px var(--space-3);
  cursor: pointer;
  list-style: none;
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: var(--t-11);
  font-weight: 500;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
}
.context-note-copy summary::-webkit-details-marker {
  display: none;
}
.context-note-copy textarea {
  display: block;
  width: 100%;
  min-height: 240px;
  border: 0;
  border-top: 1px solid rgba(241, 236, 231, 0.10);
  padding: var(--space-3);
  resize: vertical;
  color: var(--ink-2);
  background: rgba(13, 12, 10, 0.34);
  font: 400 var(--t-12)/1.55 var(--font-mono);
}
.context-contract-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  min-width: 0;
  max-width: 100%;
}
@media (max-width: 760px) {
  .context-policy,
  .context-policy dl div,
  .context-provenance div,
  .context-source-strip,
  .context-record summary,
  .context-session-note summary,
  .context-signal-source summary,
  .context-project-week summary,
  .context-snapshot-grid,
  .context-contract-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-1);
  }
  .context-record summary > span:last-child,
  .context-session-note summary > span:first-child,
  .context-session-note summary > span:last-child,
  .context-signal-source summary > span:first-child,
  .context-signal-source summary > span:last-child,
  .context-project-week summary > span:first-child,
  .context-project-week summary > span:last-child {
    white-space: normal;
  }
}

/* transcript demo surface */
.demo-page {
  display: grid;
  gap: var(--space-7);
}
.demo-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
  gap: var(--space-7);
  align-items: end;
  padding-block: var(--space-7) var(--space-3);
}
.demo-hero-copy {
  display: grid;
  gap: var(--space-3);
}
.demo-hero .page-title {
  max-width: 15ch;
  margin: 0;
  font-size: clamp(2.25rem, 7vw, 5.25rem);
  line-height: 0.94;
  text-transform: lowercase;
  text-wrap: balance;
}
.demo-deck {
  max-width: 68ch;
  margin: var(--space-2) 0 0;
  color: var(--ink-2);
  font-size: var(--t-15);
  line-height: var(--lh-snug);
}
.demo-hero-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-block: 1px solid rgba(241, 236, 231, 0.14);
}
.demo-hero-board div {
  min-height: 96px;
  padding: var(--space-4);
  border-bottom: 1px solid rgba(241, 236, 231, 0.10);
  border-right: 1px solid rgba(241, 236, 231, 0.10);
}
.demo-hero-board div:nth-child(2n) {
  border-right: 0;
}
.demo-hero-board div:nth-last-child(-n + 2) {
  border-bottom: 0;
}
.demo-hero-board span,
.demo-stage-kicker,
.demo-proof-panel > span,
.demo-output article span,
.demo-lane header p,
.demo-section-head p {
  font-family: var(--font-mono);
  font-size: var(--t-11);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: rgba(241, 236, 231, 0.42);
}
.demo-hero-board strong {
  display: block;
  margin-top: var(--space-2);
  color: var(--ink-1);
  font-size: var(--t-32);
  font-weight: 500;
  line-height: var(--lh-tight);
  font-feature-settings: var(--num-feat);
}
.demo-workbench {
  display: grid;
  grid-template-columns: minmax(180px, 0.42fr) minmax(0, 1fr) minmax(260px, 0.58fr);
  gap: var(--space-5);
  align-items: stretch;
  padding-block: var(--space-5);
  border-block: 1px solid var(--hairline);
}
.demo-stage-rail {
  display: grid;
  align-content: start;
  gap: var(--space-2);
}
.demo-stage-button {
  appearance: none;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 2px var(--space-3);
  align-items: baseline;
  min-height: 58px;
  padding: var(--space-3);
  border: 1px solid rgba(241, 236, 231, 0.10);
  border-radius: var(--r-sm);
  background: rgba(247, 241, 236, 0.012);
  color: var(--ink-3);
  text-align: left;
  cursor: pointer;
  transition:
    background var(--dur-base) var(--ease),
    border-color var(--dur-base) var(--ease),
    color var(--dur-base) var(--ease),
    transform var(--dur-fast) var(--ease);
}
.demo-stage-button:hover,
.demo-stage-button:focus-visible {
  border-color: rgba(208, 83, 50, 0.48);
  color: var(--ink-1);
}
.demo-stage-button:active {
  transform: scale(0.98);
}
.demo-stage-button[aria-pressed="true"] {
  border-color: rgba(208, 83, 50, 0.68);
  background: linear-gradient(112deg, rgba(180, 58, 25, 0.14), rgba(247, 241, 236, 0.018));
  color: var(--ink-1);
}
.demo-stage-button span {
  grid-row: 1 / span 2;
  font-family: var(--font-mono);
  font-size: var(--t-11);
  color: rgba(208, 83, 50, 0.84);
  font-feature-settings: var(--num-feat);
}
.demo-stage-button b {
  overflow: hidden;
  color: currentColor;
  font: 500 var(--t-13)/1.2 var(--font-sans);
  text-transform: lowercase;
  text-wrap: pretty;
}
.demo-stage-button small {
  color: rgba(241, 236, 231, 0.44);
  font: 400 var(--t-11)/1.2 var(--font-mono);
  font-feature-settings: var(--num-feat);
}
.demo-stage-panel,
.demo-proof-panel,
.demo-lane,
.demo-output article {
  min-width: 0;
  border: 1px solid rgba(241, 236, 231, 0.12);
  border-radius: var(--r-md);
  background:
    linear-gradient(118deg, rgba(180, 58, 25, 0.09), rgba(180, 58, 25, 0.012) 46%, transparent),
    rgba(33, 27, 25, 0.56);
  box-shadow: inset 0 1px 0 rgba(241, 236, 231, 0.03);
}
.demo-stage-panel {
  display: grid;
  align-content: start;
  gap: var(--space-4);
  min-height: 360px;
  padding: var(--space-6);
}
.demo-stage-panel h2 {
  max-width: 16ch;
  margin: 0;
  color: var(--ink-1);
  font-size: var(--t-32);
  font-weight: 500;
  line-height: var(--lh-tight);
  text-transform: lowercase;
  text-wrap: balance;
}
.demo-stage-panel p,
.demo-proof-panel p,
.demo-output article p {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--t-14);
  line-height: var(--lh-snug);
}
.demo-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.demo-stat {
  min-width: 0;
  padding-top: var(--space-3);
  border-top: 1px solid rgba(241, 236, 231, 0.12);
}
.demo-stat span {
  display: block;
  color: rgba(241, 236, 231, 0.42);
  font: 400 var(--t-11)/1.25 var(--font-mono);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
}
.demo-stat b {
  display: block;
  margin-top: var(--space-1);
  color: var(--ink-1);
  font-size: var(--t-20);
  font-weight: 500;
  font-feature-settings: var(--num-feat);
}
.demo-proof-panel {
  display: grid;
  align-content: start;
  gap: var(--space-4);
  padding: var(--space-5);
}
.demo-receipt {
  display: grid;
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px dashed rgba(241, 236, 231, 0.14);
}
.demo-receipt b {
  color: var(--ink-1);
  font-weight: 500;
}
.demo-receipt code {
  color: rgba(139, 216, 209, 0.78);
  font: 400 var(--t-11)/1.5 var(--font-mono);
  overflow-wrap: anywhere;
}
.demo-section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.5fr);
  gap: var(--space-5);
  align-items: end;
  margin-bottom: var(--space-4);
}
.demo-section-head h2 {
  max-width: 22ch;
  margin: 0;
  color: var(--ink-1);
  font-size: var(--t-24);
  font-weight: 500;
  line-height: var(--lh-tight);
  text-transform: lowercase;
  text-wrap: balance;
}
.demo-section-head p {
  margin: 0;
  line-height: 1.5;
}
.demo-lane-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}
.demo-lane {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4);
}
.demo-lane header {
  display: grid;
  gap: var(--space-2);
}
.demo-lane h3 {
  margin: 0;
  color: var(--ink-1);
  font-size: var(--t-16);
  font-weight: 500;
  line-height: var(--lh-tight);
  text-transform: lowercase;
}
.demo-bars {
  display: grid;
  gap: var(--space-3);
}
.demo-bar-row {
  display: grid;
  grid-template-columns: minmax(82px, 0.6fr) minmax(90px, 1fr) 42px;
  gap: var(--space-3);
  align-items: center;
  min-width: 0;
}
.demo-bar-row span,
.demo-bar-row b {
  color: var(--ink-2);
  font: 400 var(--t-11)/1.2 var(--font-mono);
  font-feature-settings: var(--num-feat);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.demo-bar-row b {
  color: var(--ink-1);
  text-align: right;
}
.demo-bar-track {
  height: 6px;
  overflow: hidden;
  border-radius: 0;
  background: rgba(241, 236, 231, 0.09);
}
.demo-bar-track i {
  display: block;
  width: var(--w);
  height: 100%;
  background: linear-gradient(90deg, rgba(139, 216, 209, 0.60), rgba(208, 83, 50, 0.84));
}
.demo-output-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}
.demo-output article {
  display: grid;
  gap: var(--space-3);
  min-height: 156px;
  padding: var(--space-4);
}

@media (max-width: 980px) {
  .demo-hero,
  .demo-workbench,
  .demo-section-head,
  .demo-lane-grid,
  .demo-output-grid {
    grid-template-columns: 1fr;
  }
  .demo-stage-panel {
    min-height: 0;
  }
  .demo-stage-rail {
    grid-template-columns: repeat(5, minmax(164px, 1fr));
    overflow-x: auto;
    padding-bottom: var(--space-2);
  }
  .demo-stage-button {
    min-width: 164px;
  }
}

@media (max-width: 620px) {
  .demo-hero {
    gap: var(--space-4);
    padding-block: var(--space-5) var(--space-2);
  }
  .demo-hero .page-title {
    font-size: 2.25rem;
  }
  .demo-stat-grid {
    grid-template-columns: 1fr;
  }
  .demo-hero-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .demo-hero-board div,
  .demo-hero-board div:nth-child(2n),
  .demo-hero-board div:nth-last-child(-n + 2) {
    border-bottom: 1px solid rgba(241, 236, 231, 0.10);
  }
  .demo-hero-board div {
    min-height: 76px;
    padding: var(--space-3);
    border-right: 1px solid rgba(241, 236, 231, 0.10);
  }
  .demo-hero-board div:nth-child(2n) {
    border-right: 0;
  }
  .demo-hero-board div:nth-last-child(-n + 2) {
    border-bottom: 0;
  }
  .demo-hero-board div:last-child {
    border-bottom: 0;
  }
  .demo-hero-board strong {
    font-size: var(--t-24);
  }
  .demo-stage-panel,
  .demo-proof-panel {
    padding: var(--space-4);
  }
  .demo-stage-panel h2 {
    font-size: var(--t-24);
  }
  .demo-bar-row {
    grid-template-columns: minmax(0, 1fr) 42px;
  }
  .demo-bar-row span {
    grid-column: 1 / -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .demo-stage-button {
    transition: none;
  }
}