/* parts/parts.css — the twelve modules (library-ui-spec §6) and their atoms. Every value is a --crm-* / accent token
 * from shell/tokens.css; the six accents are the colour streams. Page-level layout follows SISOCRM app.css
 * (canvas, chrome, --crm-canvas-inline-padding 34px, --crm-canvas-block-padding 40px). Presentation robbed, with
 * receipts, from the Action Model sites (clients/actionmodel/site): hero+status (system-map/part-page.css:8-15),
 * metric strip (system-map/index.html:81-84), registry cards (system-map/registry.css:14-20), evidence table
 * (part-page.css artifact-table), flow steps (blueprint/index.html flow-step), lanebox details (blueprint:185-190). */

:root {
  --stream: var(--accent-today);
  --stream-rgb: var(--accent-today-rgb);
  font-family: var(--crm-font-sans);
  color: var(--crm-color-text);
  background: var(--crm-color-canvas);
  font-synthesis: none;
  text-rendering: geometricPrecision;
}
[data-stream="research"] { --stream: var(--accent-focus); --stream-rgb: var(--accent-focus-rgb); }
[data-stream="agents"]   { --stream: var(--accent-reflect); --stream-rgb: var(--accent-reflect-rgb); }
[data-stream="projects"] { --stream: var(--accent-today); --stream-rgb: var(--accent-today-rgb); }
[data-stream="clients"]  { --stream: var(--accent-tasks); --stream-rgb: var(--accent-tasks-rgb); }
[data-stream="now"]      { --stream: var(--accent-health); --stream-rgb: var(--accent-health-rgb); }
[data-stream="blocked"]  { --stream: var(--accent-danger); --stream-rgb: var(--accent-danger-rgb); }
.tone-research { --tone: var(--accent-focus); --tone-rgb: var(--accent-focus-rgb); }
.tone-agents   { --tone: var(--accent-reflect); --tone-rgb: var(--accent-reflect-rgb); }
.tone-projects { --tone: var(--accent-today); --tone-rgb: var(--accent-today-rgb); }
.tone-clients  { --tone: var(--accent-tasks); --tone-rgb: var(--accent-tasks-rgb); }
.tone-now, .tone-ok, .tone-live { --tone: var(--accent-health); --tone-rgb: var(--accent-health-rgb); }
.tone-blocked, .tone-no, .tone-danger { --tone: var(--accent-danger); --tone-rgb: var(--accent-danger-rgb); }
.tone-warn, .tone-partial { --tone: var(--accent-tasks); --tone-rgb: var(--accent-tasks-rgb); }
.tone-muted { --tone: var(--crm-color-text-muted); --tone-rgb: var(--siso-text-muted-rgb); }

* { box-sizing: border-box; }
html, body { min-width: 320px; margin: 0; }
body { min-height: 100vh; background: var(--crm-color-canvas) var(--crm-gradient-canvas) no-repeat; color: var(--crm-color-text); font-size: var(--crm-text-md); line-height: var(--crm-leading-relaxed); }
a { color: var(--stream); text-decoration: none; }
a:hover { text-decoration: underline; }
code, kbd, pre { font-family: var(--crm-font-mono); }
code { padding: 1px var(--crm-space-1); border-radius: var(--crm-radius-xs); color: var(--crm-color-text-strong); background: rgb(var(--crm-white-rgb) / 0.06); font-size: var(--crm-text-sm); }
pre { overflow: auto; padding: var(--crm-space-3) var(--crm-space-4); border: 1px solid var(--crm-color-line); border-radius: var(--crm-radius-control); background: rgb(var(--crm-black-rgb) / 0.35); color: var(--crm-color-text); font-size: var(--crm-text-sm); line-height: 1.55; }
pre code { padding: 0; background: none; }
button { font: inherit; }
h1, h2, h3, h4 { margin: 0; color: var(--crm-color-text-strong); font-weight: var(--crm-weight-semibold); letter-spacing: -0.02em; }
p { margin: 0; }
p + p { margin-top: var(--crm-space-2-5); }
ul, ol { margin: 0; padding-left: var(--crm-space-5); }
li + li { margin-top: var(--crm-space-1); }
hr { border: 0; border-top: 1px solid var(--crm-color-line); margin: var(--crm-space-6) 0; }
[hidden] { display: none !important; }

/* ---- page frame ---- */
.siso-page { width: min(1180px, 100% - (var(--crm-canvas-inline-padding) * 2)); margin: 0 auto; padding: var(--crm-canvas-block-padding) 0 var(--crm-space-17-5); }
.siso-page > * + * { margin-top: var(--crm-space-8); }
.siso-section { padding-top: var(--crm-space-8); border-top: 1px solid var(--crm-color-line); scroll-margin-top: calc(var(--crm-topbar-height) + var(--crm-space-2)); }
.siso-section > .siso-section__head { display: flex; align-items: baseline; gap: var(--crm-space-3); flex-wrap: wrap; margin-bottom: var(--crm-space-4); }
.siso-section > .siso-section__head h2 { font-size: var(--crm-text-xl); line-height: 1.1; }
.siso-section > .siso-section__head .n { color: var(--crm-color-text-faint); font-family: var(--crm-font-mono); font-size: var(--crm-text-sm); }
.siso-section > .siso-section__head .sub { flex-basis: 100%; color: var(--crm-color-text-muted); font-size: var(--crm-text-sm); }
.siso-topbar { position: sticky; top: 0; z-index: 6; display: flex; height: var(--crm-topbar-height); align-items: center; justify-content: space-between; gap: var(--crm-space-4); padding: 0 var(--crm-space-7-5) 0 var(--crm-space-5); border-bottom: 1px solid var(--crm-color-line); background: rgb(var(--crm-chrome-rgb) / 0.88); backdrop-filter: blur(var(--crm-blur-topbar)); -webkit-backdrop-filter: blur(var(--crm-blur-topbar)); }
.siso-topbar::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 1px; content: ""; background: var(--crm-gradient-topbar-line); }
.siso-topbar__crumb { display: flex; min-width: 0; align-items: center; gap: var(--crm-space-2); color: var(--crm-color-text-muted); font-size: var(--crm-text-sm); white-space: nowrap; overflow: hidden; }
.siso-topbar__crumb a { color: var(--crm-color-text-muted); }
.siso-topbar__crumb strong { color: var(--crm-color-text); font-weight: var(--crm-weight-medium); }
.siso-topbar__crumb svg { width: var(--crm-icon-xs); height: var(--crm-icon-xs); flex: none; stroke-width: var(--crm-icon-stroke); }
.siso-topbar__actions { display: flex; align-items: center; gap: var(--crm-space-2); flex: none; }
.siso-topbar__actions a, .siso-topbar__actions button { display: flex; height: var(--crm-control-touch); align-items: center; gap: var(--crm-space-2); padding: 0 var(--crm-space-3); border: 1px solid var(--crm-color-line); border-radius: var(--crm-radius-control); color: var(--crm-color-text-muted); background: rgb(var(--crm-white-rgb) / 0.025); cursor: pointer; font-size: var(--crm-text-sm); text-decoration: none; }
.siso-topbar__actions a:hover, .siso-topbar__actions button:hover { color: var(--crm-color-text-strong); border-color: var(--crm-color-line-strong); background: rgb(var(--crm-white-rgb) / 0.05); }
.siso-topbar__actions svg { width: var(--crm-icon-sm); height: var(--crm-icon-sm); stroke-width: var(--crm-icon-stroke); }
.siso-topbar__actions kbd { padding: 0 var(--crm-space-1-5); border: 1px solid rgb(var(--crm-white-rgb) / 0.075); border-radius: var(--crm-radius-xs); background: rgb(var(--crm-black-rgb) / 0.14); font-size: var(--crm-text-2xs); }
@media (max-width: 980px) { .siso-topbar__actions span, .siso-topbar__actions kbd { display: none; } }

/* ---- atoms ---- */
.kicker { display: inline-flex; align-items: center; gap: var(--crm-space-2); color: var(--stream); font-family: var(--crm-font-mono); font-size: var(--crm-text-xs); font-weight: var(--crm-weight-semibold); letter-spacing: var(--crm-tracking-kicker); text-transform: uppercase; }
.kicker .sep { color: var(--crm-color-text-faint); }
.kicker .dim { color: var(--crm-color-text-muted); }
.chip { display: inline-flex; align-items: center; gap: var(--crm-space-1-5); height: 22px; padding: 0 var(--crm-space-2); border: 1px solid rgb(var(--tone-rgb, var(--siso-text-muted-rgb)) / 0.35); border-radius: var(--crm-radius-pill); color: var(--tone, var(--crm-color-text-muted)); background: rgb(var(--tone-rgb, var(--siso-text-muted-rgb)) / 0.08); font-family: var(--crm-font-mono); font-size: var(--crm-text-2xs); font-weight: var(--crm-weight-semibold); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; text-decoration: none; }
.chip svg { width: var(--crm-icon-xs); height: var(--crm-icon-xs); stroke-width: var(--crm-icon-stroke); }
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
a.chip:hover { text-decoration: none; border-color: var(--tone, var(--crm-color-line-strong)); }
.chips { display: flex; flex-wrap: wrap; gap: var(--crm-space-1-5); }
.mono { font-family: var(--crm-font-mono); }
.muted { color: var(--crm-color-text-muted); }
.faint { color: var(--crm-color-text-faint); }
.small { font-size: var(--crm-text-sm); }
.stream { color: var(--stream); }
.ok { color: var(--accent-health); } .warn { color: var(--accent-tasks); } .no { color: var(--accent-danger); }
.card { position: relative; padding: var(--crm-space-4) var(--crm-space-4-5); border: 1px solid var(--crm-color-line); border-radius: var(--crm-radius-card-compact, 12px); background: var(--glass-card); }
.card--link { display: flex; flex-direction: column; color: inherit; text-decoration: none; transition: border-color 160ms ease, transform 160ms ease; }
.card--link:hover { text-decoration: none; border-color: rgb(var(--stream-rgb) / 0.55); transform: translateY(-1px); }
.card--strip { border-left: 3px solid var(--tone, var(--stream)); }
.grid { display: grid; gap: var(--crm-space-2-5); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-auto { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
@media (max-width: 980px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4, .grid-auto { grid-template-columns: 1fr; } }
.empty { padding: var(--crm-space-3) var(--crm-space-4); border: 1px dashed var(--crm-color-line-strong); border-radius: var(--crm-radius-control); color: var(--crm-color-text-muted); font-size: var(--crm-text-sm); }
.empty code { color: var(--crm-color-text); }
.tbl { width: 100%; border-collapse: collapse; border: 1px solid var(--crm-color-line); border-radius: var(--crm-radius-control); overflow: hidden; font-size: var(--crm-text-sm); }
.tbl-wrap { overflow: auto; border: 1px solid var(--crm-color-line); border-radius: var(--crm-radius-control); }
.tbl-wrap .tbl { border: 0; }
.tbl th, .tbl td { padding: var(--crm-space-2-5) var(--crm-space-3); border-bottom: 1px solid var(--crm-color-line-subtle); text-align: left; vertical-align: top; }
.tbl th { color: var(--crm-color-text-muted); background: rgb(var(--crm-white-rgb) / 0.03); font-family: var(--crm-font-mono); font-size: var(--crm-text-2xs); font-weight: var(--crm-weight-semibold); letter-spacing: var(--crm-tracking-label); text-transform: uppercase; white-space: nowrap; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl td.num { font-family: var(--crm-font-mono); text-align: right; white-space: nowrap; }
.quote { position: relative; padding: var(--crm-space-3) var(--crm-space-4-5); border-left: 2px solid var(--stream); color: var(--crm-color-text-strong); font-size: var(--crm-text-lg); line-height: 1.45; letter-spacing: -0.01em; }
.quote small { display: block; margin-top: var(--crm-space-2); color: var(--crm-color-text-muted); font-family: var(--crm-font-mono); font-size: var(--crm-text-xs); letter-spacing: 0.06em; }
.quote--sm { font-size: var(--crm-text-md); }
.kv { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: var(--crm-space-2) var(--crm-space-4); font-size: var(--crm-text-sm); }
.kv dt { color: var(--crm-color-text-muted); font-family: var(--crm-font-mono); font-size: var(--crm-text-2xs); font-weight: var(--crm-weight-semibold); letter-spacing: var(--crm-tracking-label); text-transform: uppercase; line-height: 1.9; }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 640px) { .kv { grid-template-columns: 1fr; } .kv dd { margin-bottom: var(--crm-space-2); } }

/* metric strip (AM system-map/index.html:81-84; blueprint .metric) */
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--crm-space-2-5); }
.metric { padding: var(--crm-space-3-5) var(--crm-space-4); border: 1px solid var(--crm-color-line); border-radius: var(--crm-radius-control); background: rgb(var(--crm-chrome-rgb) / 0.84); text-decoration: none; color: inherit; }
.metric b { display: block; color: var(--tone, var(--stream)); font-size: 26px; font-weight: var(--crm-weight-semibold); letter-spacing: -0.035em; line-height: 1.1; }
/* the inline qualifier beside the number — @ravikatiyar162/stats-card's "36 projects" treatment */
.metric b em { color: var(--crm-color-text-muted); font-size: var(--crm-text-sm); font-style: normal; font-weight: var(--crm-weight-medium); letter-spacing: 0; }
.metric small { display: block; margin-top: var(--crm-space-1); color: var(--crm-color-text-faint); font-family: var(--crm-font-mono); font-size: var(--crm-text-2xs); }
.metric { transition: border-color 160ms ease, background 160ms ease; }
a.metric:hover { border-color: rgb(var(--tone-rgb, var(--stream-rgb)) / 0.5); background: rgb(var(--crm-chrome-rgb) / 0.95); }
.metric span { display: block; margin-top: var(--crm-space-1); color: var(--crm-color-text-muted); font-size: var(--crm-text-sm); }
a.metric:hover { border-color: rgb(var(--stream-rgb) / 0.5); text-decoration: none; }

/* flow steps (AM blueprint .flow-step; system-map/index.html:93-104) */
.flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--crm-space-2); counter-reset: step; }
.flow-step { position: relative; min-height: 96px; padding: var(--crm-space-3) var(--crm-space-3-5); border: 1px solid var(--crm-color-line); border-radius: var(--crm-radius-control); background: linear-gradient(145deg, rgb(var(--crm-white-rgb) / 0.05), rgb(var(--crm-black-rgb) / 0.16)); counter-increment: step; }
.flow-step::before { content: counter(step, decimal-leading-zero); color: var(--stream); font-family: var(--crm-font-mono); font-size: var(--crm-text-xs); font-weight: var(--crm-weight-bold); }
.flow-step b { display: block; margin: var(--crm-space-1) 0 var(--crm-space-1); color: var(--crm-color-text-strong); font-size: var(--crm-text-md); }
.flow-step span { color: var(--crm-color-text-muted); font-size: var(--crm-text-sm); }

/* ---- 02 heading ---- */
.heading { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.6fr); gap: var(--crm-space-7-5); align-items: start; padding-bottom: var(--crm-space-8); border-bottom: 1px solid var(--crm-color-line); }
.heading__crumb { display: flex; flex-wrap: wrap; gap: var(--crm-space-1-5); color: var(--crm-color-text-muted); font-family: var(--crm-font-mono); font-size: var(--crm-text-xs); letter-spacing: 0.06em; text-transform: uppercase; }
.heading__crumb a { color: var(--crm-color-text-muted); }
.heading__crumb a:hover { color: var(--stream); }
.heading h1 { margin: var(--crm-space-3-5) 0 var(--crm-space-4); font-size: clamp(38px, 5vw, 64px); font-weight: var(--crm-weight-semibold); letter-spacing: -0.045em; line-height: 0.98; }
.heading__sub { max-width: 760px; color: var(--crm-color-text-muted); font-size: var(--crm-text-lg); line-height: 1.5; }
.heading__badges { display: flex; flex-wrap: wrap; gap: var(--crm-space-1-5); margin-top: var(--crm-space-4); }
.heading__status { margin-top: 0; padding: var(--crm-space-4-5); border: 1px solid rgb(var(--stream-rgb) / 0.25); border-radius: var(--crm-radius-card-compact, 12px); background: linear-gradient(145deg, rgb(var(--stream-rgb) / 0.10), rgb(var(--crm-chrome-rgb) / 0.72)); }
.heading__status .kicker { font-size: var(--crm-text-2xs); }
.heading__status strong { display: block; margin-top: var(--crm-space-2-5); color: var(--crm-color-text-strong); font-size: var(--crm-text-lg); font-weight: var(--crm-weight-semibold); letter-spacing: -0.03em; }
.heading__status p { margin-top: var(--crm-space-2); color: var(--crm-color-text-muted); font-size: var(--crm-text-sm); }
.heading__status .kv { margin-top: var(--crm-space-3); grid-template-columns: 90px 1fr; }
@media (max-width: 980px) { .heading { grid-template-columns: 1fr; } }

/* ---- 03 reasoning ---- */
/* 03 · reasoning v2 — the chain-of-thought spine. Robbed from 21st.dev @elements-/chain-of-thought
 * (parts/SOURCES.md): stages down a connecting rail, a state glyph per stage, nested cards under the stage that
 * produced them. Replaces the v1 two-column block (his 21:05: the parts "all just seem like redos"). */
.cot { border: 1px solid var(--crm-color-line); border-radius: var(--crm-radius-card-compact, 12px); background: var(--glass-card-soft); }
.cot__steps { display: grid; margin: 0; padding: var(--crm-space-4-5); list-style: none; }
.cot__step { position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: var(--crm-space-3); padding-bottom: var(--crm-space-5); }
/* the spine: a line from this stage's glyph down to the next one */
.cot__step::before { content: ''; position: absolute; top: 26px; bottom: 0; left: 12.5px; width: 1px; background: linear-gradient(to bottom, rgb(var(--stream-rgb) / 0.5), var(--crm-color-line)); }
.cot__step--last { padding-bottom: 0; }
.cot__step--last::before { display: none; }
.cot__mark { display: grid; width: 26px; height: 26px; place-items: center; border: 1px solid rgb(var(--stream-rgb) / 0.4); border-radius: 50%; background: rgb(var(--crm-chrome-rgb) / 0.95); }
.cot__mark svg { width: 13px; height: 13px; color: var(--stream); stroke-width: var(--crm-icon-stroke); }
.cot__step--source .cot__mark { border-color: rgb(var(--stream-rgb) / 0.7); background: rgb(var(--stream-rgb) / 0.14); }
.cot__body { min-width: 0; padding-top: 3px; }
.cot__title { display: flex; align-items: center; gap: var(--crm-space-2); margin: 0; color: var(--crm-color-text-strong); font-size: var(--crm-text-md); font-weight: var(--crm-weight-semibold); }
.cot__count { padding: 0 var(--crm-space-1-5); border-radius: var(--crm-radius-pill); color: var(--crm-color-text-muted); background: rgb(var(--crm-white-rgb) / 0.06); font-family: var(--crm-font-mono); font-size: var(--crm-text-2xs); }
.cot__by { color: var(--crm-color-text-faint); font-family: var(--crm-font-mono); font-size: var(--crm-text-2xs); font-weight: var(--crm-weight-medium); letter-spacing: 0.08em; text-transform: uppercase; }
.cot__sub { margin: var(--crm-space-1) 0 var(--crm-space-3); color: var(--crm-color-text-faint); font-size: var(--crm-text-sm); }
.cot__quote { margin: 0 0 var(--crm-space-2-5); padding: var(--crm-space-3) var(--crm-space-3-5); border: 1px solid var(--crm-color-line); border-left: 2px solid rgb(var(--stream-rgb) / 0.55); border-radius: var(--crm-radius-control); background: rgb(var(--crm-black-rgb) / 0.2); color: var(--crm-color-text); font-size: var(--crm-text-md); }
.cot__quote small { display: block; margin-top: var(--crm-space-2); color: var(--crm-color-text-faint); font-family: var(--crm-font-mono); font-size: var(--crm-text-2xs); }
.cot__prose { margin: var(--crm-space-2) 0 0; color: var(--crm-color-text); font-size: var(--crm-text-md); }
.cot__prose--muted { color: var(--crm-color-text-muted); font-size: var(--crm-text-sm); }
.cot__questions { margin: var(--crm-space-3) 0 0; padding-left: var(--crm-space-4-5); color: var(--crm-color-text); font-size: var(--crm-text-sm); }
.cot__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: var(--crm-space-2-5); margin-top: var(--crm-space-3); }
.cot__card { padding: var(--crm-space-3) var(--crm-space-3-5); border: 1px solid var(--crm-color-line); border-radius: var(--crm-radius-control); background: rgb(var(--crm-black-rgb) / 0.18); color: var(--crm-color-text-muted); font-size: var(--crm-text-sm); }
.cot__card .kicker { display: block; margin-bottom: var(--crm-space-1-5); font-size: var(--crm-text-2xs); }

/* ---- 04 map (ecosystem loop + typed relationship map) ---- */
/* 04 · map v2 — the mind-map graph. Layout is bin/lib/helpers.mjs mapSvg (tidy tree); presentation robbed from
 * 21st.dev @ssshooter/mind-map (parts/SOURCES.md): dark ground, curved branches tinted by lane, boxed nodes,
 * root as the one filled tile. The v1 ring and its duplicate node list are gone (his 21:05 "maps all this stuff
 * a bit shoddy"). The list beside it is now a legend of lanes and counts, not a second copy of every node. */
.map { display: grid; grid-template-columns: minmax(0, 1fr) minmax(190px, 210px); gap: var(--crm-space-4); align-items: start; }
.map__frame { position: relative; overflow-x: auto; padding: var(--crm-space-2); border: 1px solid var(--crm-color-line); border-radius: var(--crm-radius-card-compact, 12px); background: radial-gradient(120% 90% at 50% 50%, rgb(var(--stream-rgb) / 0.08), transparent 62%), rgb(var(--crm-chrome-rgb) / 0.6); }
.map__svg { display: block; width: 100%; min-width: 620px; height: auto; }
.map__svg text { font-family: var(--crm-font-mono); font-size: 11px; letter-spacing: -0.01em; fill: var(--crm-color-text); }
.map__svg .node--root rect { fill: rgb(var(--stream-rgb) / 0.22); stroke: var(--stream); stroke-width: 1.3; }
.map__svg .node--root text { font-family: var(--crm-font-sans); font-size: 12.5px; font-weight: 650; fill: var(--crm-color-text-strong); }
.map__svg .node--branch rect { fill: rgb(var(--tone-rgb) / 0.14); stroke: rgb(var(--tone-rgb) / 0.5); stroke-width: 1.1; }
.map__svg .node--branch text { fill: var(--tone, var(--crm-color-text)); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; }
.map__svg .node--branch .count { fill: var(--crm-color-text-faint); letter-spacing: 0; }
.map__svg .node--leaf rect { fill: rgb(var(--crm-chrome-rgb) / 0.92); stroke: rgb(var(--tone-rgb) / 0.3); stroke-width: 1; }
/* visx rule 2 (airbnb-linktypes linktypes.tsx:222-231): the node's shape says whether it leads anywhere.
 * A record you can open is solid with a small radius; a dead end is dashed and pill-shaped. */
.map__svg .node--dead rect { stroke-dasharray: 2 2; fill: rgb(var(--crm-black-rgb) / 0.22); }
.map__svg .node--dead text { fill: var(--crm-color-text-muted); }
.map__svg .node--leaf text { fill: var(--crm-color-text); }
.map__svg a { text-decoration: none; }
.map__svg a .node--leaf rect { transition: fill 160ms ease, stroke 160ms ease; }
.map__svg a:hover .node--leaf rect { fill: rgb(var(--tone-rgb) / 0.2); stroke: var(--tone); }
.map__svg a:hover .node--leaf text { fill: var(--crm-color-text-strong); }
.map__svg a:focus-visible .node--leaf rect { stroke: var(--tone); stroke-width: 1.8; }
.map__svg .edge { fill: none; stroke: rgb(var(--tone-rgb) / 0.42); stroke-width: 1.2; }
.map__svg .edge--trunk { stroke: rgb(var(--tone-rgb) / 0.62); stroke-width: 1.7; }
.map__legend { display: grid; gap: var(--crm-space-1-5); align-content: start; }
.map__lane { display: flex; align-items: center; gap: var(--crm-space-2); padding: var(--crm-space-1-5) var(--crm-space-2-5); border: 1px solid var(--crm-color-line); border-left: 3px solid var(--tone, var(--stream)); border-radius: var(--crm-radius-control); background: var(--glass-card-soft); font-size: var(--crm-text-sm); }
.map__lane b { color: var(--tone, var(--stream)); font-family: var(--crm-font-mono); font-size: var(--crm-text-2xs); letter-spacing: 0.1em; text-transform: uppercase; }
.map__lane .n { margin-left: auto; color: var(--crm-color-text-faint); font-family: var(--crm-font-mono); font-size: var(--crm-text-2xs); }
.map__note { color: var(--crm-color-text-faint); font-size: var(--crm-text-2xs); font-family: var(--crm-font-mono); }
@media (max-width: 980px) { .map { grid-template-columns: 1fr; } }
.loop { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--crm-space-2); }
.loop__node { position: relative; padding: var(--crm-space-3) var(--crm-space-3-5); border: 1px solid var(--crm-color-line); border-radius: var(--crm-radius-control); background: linear-gradient(160deg, rgb(var(--tone-rgb, var(--stream-rgb)) / 0.10), rgb(var(--crm-chrome-rgb) / 0.7)); color: inherit; text-decoration: none; }
.loop__node:not(:last-child)::after { content: "→"; position: absolute; right: -11px; top: 40%; z-index: 2; color: var(--stream); font-weight: 700; }
.loop__node b { display: block; color: var(--crm-color-text-strong); font-size: var(--crm-text-md); }
.loop__node span { color: var(--crm-color-text-muted); font-size: var(--crm-text-sm); }
.loop__node .measured { display: block; margin-top: var(--crm-space-1-5); color: var(--accent-health); font-family: var(--crm-font-mono); font-size: var(--crm-text-2xs); letter-spacing: 0.08em; text-transform: uppercase; }
.loop__node .unmeasured { color: var(--crm-color-text-faint); }

/* ---- 05 repos ---- */
/* 05 · repos v2 — robbed from 21st.dev @shadcnspace/sonner-05 (parts/SOURCES.md): glyph tile + name over its
 * locator, state pill right, hairline rule, meta row, one action. CRM tokens only. */
.repocard { display: flex; flex-direction: column; gap: var(--crm-space-3); padding: var(--crm-space-4); border: 1px solid var(--crm-color-line); border-radius: var(--crm-radius-card-compact, 12px); background: var(--glass-card-soft); }
.repocard.is-private { border-left: 3px solid var(--tone-clients, var(--crm-color-line-strong)); }
.repocard__top { display: flex; align-items: center; gap: var(--crm-space-3); min-width: 0; }
.repocard__tile { display: grid; width: 38px; height: 38px; flex: none; place-items: center; border: 1px solid var(--crm-color-line); border-radius: 11px; background: rgb(var(--crm-black-rgb) / 0.28); }
.repocard__tile svg { width: var(--crm-icon-md); height: var(--crm-icon-md); color: var(--crm-color-text-muted); stroke-width: var(--crm-icon-stroke); }
.repocard__id { min-width: 0; flex: 1; }
.repocard__name { color: var(--crm-color-text-strong); font-size: var(--crm-text-md); font-weight: var(--crm-weight-semibold); overflow-wrap: anywhere; }
.repocard__locator { margin-top: 1px; overflow: hidden; color: var(--crm-color-text-faint); font-family: var(--crm-font-mono); font-size: var(--crm-text-xs); text-overflow: ellipsis; white-space: nowrap; }
.repocard__state { display: inline-flex; align-items: center; gap: var(--crm-space-1-5); height: 22px; flex: none; padding: 0 var(--crm-space-2-5); border-radius: var(--crm-radius-pill); color: var(--tone, var(--crm-color-text-muted)); background: rgb(var(--tone-rgb, var(--siso-text-muted-rgb)) / 0.12); font-family: var(--crm-font-mono); font-size: var(--crm-text-2xs); font-weight: var(--crm-weight-semibold); letter-spacing: 0.08em; text-transform: uppercase; }
.repocard__state .dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.repocard__rule { height: 1px; background: var(--crm-color-line); }
.repocard__meta { display: flex; flex-wrap: wrap; gap: var(--crm-space-1) var(--crm-space-3); color: var(--crm-color-text-muted); font-family: var(--crm-font-mono); font-size: var(--crm-text-xs); }
.repocard__meta b { color: var(--crm-color-text); font-weight: var(--crm-weight-medium); }
.repocard__when { margin-left: auto; color: var(--crm-color-text-faint); }
.repocard__foot { display: flex; align-items: center; gap: var(--crm-space-2); margin-top: auto; }
.repocard__open { display: inline-flex; align-items: center; gap: var(--crm-space-1-5); height: 30px; margin-left: auto; flex: none; padding: 0 var(--crm-space-3); border: 1px solid var(--crm-color-line); border-radius: var(--crm-radius-control); color: var(--crm-color-text); font-size: var(--crm-text-sm); text-decoration: none; transition: border-color 160ms ease, background 160ms ease; }
.repocard__open svg { width: var(--crm-icon-xs); height: var(--crm-icon-xs); stroke-width: var(--crm-icon-stroke); }
a.repocard__open:hover { border-color: var(--crm-color-line-strong); background: rgb(var(--crm-white-rgb) / 0.04); text-decoration: none; }
.repocard__open.is-off { color: var(--crm-color-text-faint); border-style: dashed; }
.repocard__what { color: var(--crm-color-text-muted); font-size: var(--crm-text-sm); }

/* ---- 06 sauce ---- */
.sauce .card { display: flex; flex-direction: column; gap: var(--crm-space-1-5); }
.sauce__kind { color: var(--tone, var(--stream)); font-family: var(--crm-font-mono); font-size: var(--crm-text-2xs); letter-spacing: var(--crm-tracking-label); text-transform: uppercase; }
.sauce__title { color: var(--crm-color-text-strong); font-weight: var(--crm-weight-semibold); }
.sauce__what { color: var(--crm-color-text-muted); font-size: var(--crm-text-sm); }
.sauce__proof { margin-top: auto; padding-top: var(--crm-space-2); color: var(--crm-color-text-faint); font-family: var(--crm-font-mono); font-size: var(--crm-text-2xs); overflow-wrap: anywhere; }

/* ---- 07 contents ---- */
.contents { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--crm-space-4); }
.contents__list { padding: 0; list-style: none; border-top: 1px solid var(--crm-color-line); }
.contents__list li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--crm-space-2); margin: 0; padding: var(--crm-space-2-5) 0; border-bottom: 1px solid var(--crm-color-line); }
.contents__list .n { color: var(--crm-color-text-faint); font-family: var(--crm-font-mono); font-size: var(--crm-text-xs); padding-top: 3px; }
.contents__list b { color: var(--crm-color-text-strong); font-weight: var(--crm-weight-semibold); }
.contents__list span { display: block; color: var(--crm-color-text-muted); font-size: var(--crm-text-sm); }
.contents__list .state { justify-self: end; }
@media (max-width: 980px) { .contents { grid-template-columns: 1fr; } }

/* ---- 08 quickstart ---- */
/* 08 · quickstart v2 (agentbox) — robbed from 21st.dev @dev.yadhakim/animated-terminal (parts/SOURCES.md):
 * window strip with lights, the file in the title bar, a prompt glyph per command line. His 21:05: "the agent
 * entries and shit like the parts you have i say are still quite shit". No animation: the commands are real and
 * copy-pasteable, so they must not move. */
.agentbox { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--crm-space-4); padding: var(--crm-space-4-5); border: 1px solid rgb(var(--accent-reflect-rgb) / 0.3); border-radius: var(--crm-radius-card-compact, 12px); background: linear-gradient(145deg, rgb(var(--accent-reflect-rgb) / 0.08), rgb(var(--crm-chrome-rgb) / 0.7)); }
.agentbox .kicker { color: var(--accent-reflect); }
.agentbox__term { overflow: hidden; border: 1px solid var(--crm-color-line); border-radius: var(--crm-radius-control); background: rgb(var(--crm-black-rgb) / 0.42); }
.agentbox__bar { display: flex; align-items: center; gap: var(--crm-space-3); height: 30px; padding: 0 var(--crm-space-3); border-bottom: 1px solid var(--crm-color-line); background: rgb(var(--crm-white-rgb) / 0.03); }
.agentbox__lights { display: flex; gap: 5px; }
.agentbox__lights i { width: 8px; height: 8px; border-radius: 50%; background: rgb(var(--crm-white-rgb) / 0.16); }
.agentbox__lights i:first-child { background: rgb(var(--accent-reflect-rgb) / 0.55); }
.agentbox__where { overflow: hidden; color: var(--crm-color-text-faint); font-family: var(--crm-font-mono); font-size: var(--crm-text-2xs); letter-spacing: 0.04em; text-overflow: ellipsis; white-space: nowrap; }
.agentbox__lines { display: grid; gap: var(--crm-space-1-5); margin: 0; padding: var(--crm-space-3) var(--crm-space-3-5); list-style: none; }
.agentbox__lines li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: var(--crm-space-2); align-items: start; }
.agentbox__prompt { color: var(--accent-reflect); font-family: var(--crm-font-mono); font-size: var(--crm-text-xs); line-height: 1.55; }
.agentbox__lines code { color: var(--crm-color-text); background: none; font-family: var(--crm-font-mono); font-size: var(--crm-text-xs); line-height: 1.55; overflow-wrap: anywhere; white-space: pre-wrap; }
.agentbox__lines--empty { color: var(--crm-color-text-faint); font-size: var(--crm-text-sm); }
.agentbox__facts .kv { margin-top: var(--crm-space-2); grid-template-columns: 88px minmax(0, 1fr); gap: var(--crm-space-2-5) var(--crm-space-3); }
.agentbox__facts .kv dd code { font-size: var(--crm-text-xs); }
@media (max-width: 980px) { .agentbox { grid-template-columns: 1fr; } }
@media (max-width: 980px) { .quickstart { grid-template-columns: 1fr; } }

/* ---- 09 evidence ---- */
.evidence { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr); gap: var(--crm-space-4); }
.evidence .fact, .evidence .proposal { display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: var(--crm-space-2-5); padding: var(--crm-space-2-5) 0; border-bottom: 1px solid var(--crm-color-line-subtle); font-size: var(--crm-text-sm); }
.evidence .fact::before, .evidence .proposal::before { content: ""; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--accent-health); box-shadow: 0 0 8px rgb(var(--accent-health-rgb) / 0.5); }
.evidence .proposal::before { background: transparent; border: 1.5px solid var(--accent-tasks); box-shadow: none; }
.evidence .receipt { display: block; color: var(--crm-color-text-faint); font-family: var(--crm-font-mono); font-size: var(--crm-text-2xs); overflow-wrap: anywhere; }
.evidence .receipt a { color: var(--crm-color-text-muted); }
.evidence__side .card + .card { margin-top: var(--crm-space-2-5); }
.evidence__side .kicker { display: block; margin-bottom: var(--crm-space-2); font-size: var(--crm-text-2xs); }
.evidence__side ul { padding-left: var(--crm-space-4); font-size: var(--crm-text-sm); color: var(--crm-color-text-muted); }
.evidence__legend { display: flex; gap: var(--crm-space-4); margin-bottom: var(--crm-space-2); color: var(--crm-color-text-muted); font-family: var(--crm-font-mono); font-size: var(--crm-text-2xs); letter-spacing: 0.08em; text-transform: uppercase; }
.evidence__legend i { display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 50%; background: var(--accent-health); vertical-align: middle; }
.evidence__legend i.p { background: transparent; border: 1.5px solid var(--accent-tasks); }
@media (max-width: 980px) { .evidence { grid-template-columns: 1fr; } }

/* ---- 10 activity ---- */
.activity__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--crm-space-2); margin-bottom: var(--crm-space-2-5); color: var(--crm-color-text-muted); font-family: var(--crm-font-mono); font-size: var(--crm-text-xs); }
.activity__strip { display: flex; gap: 3px; height: 26px; margin-bottom: var(--crm-space-3); }
.activity__strip i { flex: 1; border-radius: 3px; background: rgb(var(--stream-rgb) / calc(0.12 + var(--w, 0) * 0.8)); }
.activity__strip i[title]:hover { outline: 1px solid var(--stream); }
.activity__list { padding: 0; list-style: none; border-top: 1px solid var(--crm-color-line); font-size: var(--crm-text-sm); }
.activity__list li { display: grid; grid-template-columns: 150px 120px minmax(0, 1fr); gap: var(--crm-space-3); margin: 0; padding: var(--crm-space-2) 0; border-bottom: 1px solid var(--crm-color-line-subtle); }
.activity__list .at { color: var(--crm-color-text-muted); font-family: var(--crm-font-mono); font-size: var(--crm-text-xs); white-space: nowrap; }
.activity__list .who { color: var(--tone, var(--stream)); font-family: var(--crm-font-mono); font-size: var(--crm-text-xs); }
@media (max-width: 640px) { .activity__list li { grid-template-columns: 1fr; gap: 2px; } }

/* ---- 11 catalogue ---- */
/* 11 · catalogue search — robbed from 21st.dev @samitkapoor/apple-spotlight (parts/SOURCES.md; his note: "oh my
 * gosh this apple spotlight is beautiful. Use it for search or something"): one tall pill, the glyph left, larger
 * type than a form field, and the result count riding inside the row. He kept the catalogue itself ("searchable
 * catalog yeah that's cool although again you could use some 21st.dev components for the search"). */
.catalogue__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--crm-space-2); margin-bottom: var(--crm-space-3-5); }
.catalogue__search { display: flex; align-items: center; gap: var(--crm-space-2-5); height: 46px; min-width: 260px; flex: 1; padding: 0 var(--crm-space-4); border: 1px solid var(--crm-color-line); border-radius: var(--crm-radius-pill); background: rgb(var(--crm-white-rgb) / 0.035); color: var(--crm-color-text-muted); box-shadow: inset 0 1px 0 rgb(var(--crm-white-rgb) / 0.04); transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease; }
.catalogue__search:focus-within { border-color: rgb(var(--stream-rgb) / 0.45); background: rgb(var(--crm-white-rgb) / 0.055); box-shadow: 0 0 0 3px rgb(var(--stream-rgb) / 0.09), inset 0 1px 0 rgb(var(--crm-white-rgb) / 0.05); }
.catalogue__search svg { width: 18px; height: 18px; flex: none; stroke-width: var(--crm-icon-stroke); transition: color 180ms ease; }
.catalogue__search:focus-within svg { color: var(--stream); }
.catalogue__search input { min-width: 0; flex: 1; border: 0; outline: 0; color: var(--crm-color-text-strong); background: transparent; font: inherit; font-size: var(--crm-text-lg, 15px); letter-spacing: -0.01em; }
.catalogue__search input::placeholder { color: var(--crm-color-text-faint); }
.catalogue__filter { display: flex; align-items: center; gap: var(--crm-space-1); }
.catalogue__filter select { height: 38px; padding: 0 var(--crm-space-3); border: 1px solid var(--crm-color-line); border-radius: var(--crm-radius-pill); color: var(--crm-color-text); background: rgb(var(--crm-chrome-rgb) / 0.9); font: inherit; font-size: var(--crm-text-sm); }
.catalogue__count { padding: 0 var(--crm-space-2-5); border-radius: var(--crm-radius-pill); color: var(--crm-color-text-muted); background: rgb(var(--crm-white-rgb) / 0.045); font-family: var(--crm-font-mono); font-size: var(--crm-text-xs); line-height: 26px; }
.catalogue .card .kicker { font-size: var(--crm-text-2xs); }
.catalogue .card h4 { margin: var(--crm-space-2) 0 var(--crm-space-1); font-size: 15px; letter-spacing: -0.02em; }
.catalogue .card p { color: var(--crm-color-text-muted); font-size: var(--crm-text-sm); }
.catalogue .card .foot { display: flex; justify-content: space-between; align-items: center; gap: var(--crm-space-2); margin-top: auto; padding-top: var(--crm-space-3); color: var(--crm-color-text-faint); font-family: var(--crm-font-mono); font-size: var(--crm-text-2xs); }
.catalogue [data-hidden] { display: none; }

/* ---- 12 related ---- */
.related { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--crm-space-2-5); }
.related .card { gap: var(--crm-space-1); }
.related .card b { color: var(--crm-color-text-strong); font-size: var(--crm-text-md); letter-spacing: -0.015em; }
.related .card span { color: var(--crm-color-text-muted); font-size: var(--crm-text-sm); }

/* ---- timeline atom (U21 + every 'timeline' slot) ---- */
.timeline { overflow: auto; border: 1px solid var(--crm-color-line); border-radius: var(--crm-radius-card-compact, 12px); background: rgb(var(--crm-chrome-rgb) / 0.6); }
.timeline svg { display: block; min-width: 720px; width: 100%; height: auto; }
.timeline svg text { font-family: var(--crm-font-mono); font-size: 9.5px; fill: var(--crm-color-text-muted); }
.timeline svg .lane-label { font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; fill: var(--tone, var(--crm-color-text-muted)); }
.timeline svg .grid { stroke: rgb(var(--crm-white-rgb) / 0.06); }
.timeline svg .day { fill: var(--crm-color-text-faint); }
.timeline svg .ev { fill: var(--tone, var(--stream)); }
.timeline svg .ev--auto { fill: rgb(var(--crm-white-rgb) / 0.25); }
.timeline svg a:hover .ev { stroke: #fff; stroke-width: 1.5; }
.timeline__legend { display: flex; flex-wrap: wrap; gap: var(--crm-space-3); padding: var(--crm-space-2) var(--crm-space-3); border-top: 1px solid var(--crm-color-line); font-family: var(--crm-font-mono); font-size: var(--crm-text-2xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--crm-color-text-muted); }
.timeline__legend i { display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 50%; background: var(--tone, var(--stream)); vertical-align: middle; }

/* ---- his words ---- */
.words .quote + .quote { margin-top: var(--crm-space-4); }

/* ---- 404 / no-js ---- */
.no-js .needs-js { display: none; }

/* U7 · doc reader — a source document's body under the shell. Token-only; the doc's own <style> is dropped at render. */
.doc-layout { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: var(--crm-space-8); align-items: start; }
@media (max-width: 1100px) { .doc-layout { grid-template-columns: minmax(0, 1fr); } .doc-toc { position: static; } }
.doc-toc { position: sticky; top: calc(var(--crm-topbar-height) + var(--crm-space-4)); padding: var(--crm-space-4) var(--crm-space-4-5); border: 1px solid var(--crm-color-line); border-radius: var(--crm-radius-card-compact, 12px); background: var(--glass-card); font-size: var(--crm-text-sm); }
.doc-toc .kicker { margin-bottom: var(--crm-space-2); }
.doc-toc ol { list-style: none; padding: 0; margin: 0; }
.doc-toc li { padding: var(--crm-space-1) 0; }
.doc-toc li a { color: var(--crm-color-text); }
.doc-toc li a:hover { color: var(--crm-color-text-strong); }
.doc-toc ol ol { padding-left: var(--crm-space-4); border-left: 1px solid var(--crm-color-line-subtle); margin: var(--crm-space-1) 0 0 var(--crm-space-1); }
.doc-toc ol ol a { color: var(--crm-color-text-muted); font-size: var(--crm-text-xs); }
.doc-toc .n { color: var(--crm-color-text-faint); font-family: var(--crm-font-mono); font-size: var(--crm-text-2xs); margin-right: var(--crm-space-2); }
.doc { max-width: 78ch; color: var(--crm-color-text); font-size: var(--crm-text-md); line-height: 1.65; }
.doc-lede { max-width: 78ch; color: var(--crm-color-text); font-size: var(--crm-text-lg); line-height: 1.55; }
.doc p, .doc ul, .doc ol, .doc pre, .doc table, .doc .callout, .doc .grid { margin: var(--crm-space-4) 0; }
.doc h3 { margin: var(--crm-space-7) 0 var(--crm-space-2); font-size: var(--crm-text-lg); color: var(--stream); scroll-margin-top: calc(var(--crm-topbar-height) + var(--crm-space-4)); }
.doc .eyebrow { color: var(--stream); font-family: var(--crm-font-mono); font-size: var(--crm-text-2xs); font-weight: var(--crm-weight-semibold); letter-spacing: var(--crm-tracking-label); text-transform: uppercase; }
.doc .muted { color: var(--crm-color-text-muted); }
.doc .callout, .doc-lede + .callout { padding: var(--crm-space-4) var(--crm-space-4-5); border: 1px solid rgb(var(--stream-rgb) / 0.45); border-radius: var(--crm-radius-control); background: rgb(var(--stream-rgb) / 0.07); }
.doc .boundary { padding: var(--crm-space-0-5) 0 var(--crm-space-0-5) var(--crm-space-4); border-left: 3px solid var(--accent-tasks); }
.doc .template { white-space: pre-wrap; }
.doc .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 720px) { .doc .grid { grid-template-columns: minmax(0, 1fr); } }
.doc .card b { display: block; margin-bottom: var(--crm-space-1); color: var(--stream); }
.doc .card p { margin: var(--crm-space-1) 0; color: var(--crm-color-text-muted); font-size: var(--crm-text-sm); }
.doc table { width: 100%; border-collapse: collapse; border: 1px solid var(--crm-color-line); border-radius: var(--crm-radius-control); overflow: hidden; font-size: var(--crm-text-sm); }
.doc th, .doc td { padding: var(--crm-space-2-5) var(--crm-space-3); border-bottom: 1px solid var(--crm-color-line-subtle); text-align: left; vertical-align: top; }
.doc th { color: var(--crm-color-text-muted); background: rgb(var(--crm-white-rgb) / 0.03); font-family: var(--crm-font-mono); font-size: var(--crm-text-2xs); font-weight: var(--crm-weight-semibold); letter-spacing: var(--crm-tracking-label); text-transform: uppercase; }
.doc a { text-decoration: underline; text-decoration-color: rgb(var(--stream-rgb) / 0.4); text-underline-offset: 3px; }

/* 13 · gallery (bento) — robbed from 21st.dev @0xUrvish/bento-card (parts/SOURCES.md; his note: "really nice
 * bento card"). Kicker, large title, quiet sub, then a recessed inset holding the family's own preview that
 * bleeds off the card's bottom edge. His 21:05: "the gallery cards are a bit shit". */
.bento { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--crm-space-3); }
.bento__card { position: relative; display: flex; flex-direction: column; overflow: hidden; min-height: 300px; padding: var(--crm-space-4-5) var(--crm-space-4-5) 0; border: 1px solid var(--crm-color-line); border-radius: 16px; background: linear-gradient(165deg, rgb(var(--tone-rgb, var(--stream-rgb)) / 0.09), rgb(var(--crm-chrome-rgb) / 0.82)); color: inherit; text-decoration: none; transition: border-color 200ms ease, transform 200ms cubic-bezier(0.32, 0.72, 0, 1); }
.bento__card:hover { border-color: rgb(var(--tone-rgb, var(--stream-rgb)) / 0.5); transform: translateY(-2px); text-decoration: none; }
.bento__card:focus-visible { outline: 2px solid var(--tone, var(--stream)); outline-offset: 2px; }
.bento__head { position: relative; z-index: 1; }
.bento__kicker { display: block; color: var(--tone, var(--stream)); font-family: var(--crm-font-mono); font-size: var(--crm-text-2xs); font-weight: var(--crm-weight-semibold); letter-spacing: var(--crm-tracking-label); text-transform: uppercase; }
.bento__kicker .sep, .bento__kicker .dim { color: var(--crm-color-text-faint); }
.bento__title { margin: var(--crm-space-2-5) 0 0; color: var(--crm-color-text-strong); font-size: 21px; font-weight: var(--crm-weight-semibold); letter-spacing: -0.03em; line-height: 1.15; }
.bento__sub { margin: var(--crm-space-2) 0 0; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: var(--crm-color-text-muted); font-size: var(--crm-text-sm); line-height: 1.45; }
.bento__sub .faint { color: var(--crm-color-text-faint); }
/* the inset preview panel: sunk, clipped, bleeding off the bottom — the bento-card's device mock */
.bento__shot { position: relative; margin: var(--crm-space-4) calc(var(--crm-space-4-5) * -1) 0 var(--crm-space-3); flex: 1; min-height: 128px; overflow: hidden; border-top: 1px solid var(--crm-color-line); border-left: 1px solid var(--crm-color-line); border-top-left-radius: 12px; background: rgb(var(--crm-black-rgb) / 0.3); }
.bento__shot img { display: block; width: 100%; height: auto; opacity: 0.92; transform-origin: top left; transition: opacity 200ms ease, transform 300ms cubic-bezier(0.32, 0.72, 0, 1); }
.bento__card:hover .bento__shot img { opacity: 1; transform: scale(1.02); }
.bento__noshot { padding: var(--crm-space-4); color: var(--crm-color-text-faint); font-family: var(--crm-font-mono); font-size: var(--crm-text-2xs); }
/* the state chip and the go-arrow ride on a scrim so they stay legible over any preview */
.bento__foot { position: absolute; right: var(--crm-space-3); bottom: var(--crm-space-3); z-index: 2; display: flex; align-items: center; gap: var(--crm-space-2); padding: var(--crm-space-1) var(--crm-space-1) var(--crm-space-1) var(--crm-space-2); border-radius: var(--crm-radius-pill); background: rgb(var(--crm-black-rgb) / 0.55); backdrop-filter: blur(6px); }
.bento__go { display: grid; width: 26px; height: 26px; place-items: center; border: 1px solid var(--crm-color-line); border-radius: 50%; background: rgb(var(--crm-chrome-rgb) / 0.9); color: var(--crm-color-text-muted); transition: color 160ms ease, border-color 160ms ease; }
.bento__go svg { width: 13px; height: 13px; stroke-width: var(--crm-icon-stroke); }
.bento__card:hover .bento__go { color: var(--tone, var(--stream)); border-color: rgb(var(--tone-rgb, var(--stream-rgb)) / 0.5); }
@media (prefers-reduced-motion: reduce) { .bento__card, .bento__shot img { transition: none; } .bento__card:hover { transform: none; } .bento__card:hover .bento__shot img { transform: none; } }

/* heading · jump row + metric band — the bar (actionist-blueprint.pages.dev): under the title, a row of entry-point
 * chips with live dots, then a full-width metric strip that orients before any prose. */
.heading__jump { display: flex; flex-wrap: wrap; gap: var(--crm-space-2); margin-top: var(--crm-space-3-5); }
.jumpchip { display: inline-flex; align-items: center; gap: var(--crm-space-1-5); height: 30px; padding: 0 var(--crm-space-3-5); border: 1px solid var(--crm-color-line); border-radius: var(--crm-radius-pill); color: var(--crm-color-text); font-size: var(--crm-text-sm); text-decoration: none; transition: border-color 160ms ease, background 160ms ease; }
.jumpchip:hover { border-color: var(--crm-color-line-strong); background: rgb(var(--crm-white-rgb) / 0.045); text-decoration: none; }
.jumpchip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--tone-now, #34d399); box-shadow: 0 0 7px currentColor; }
.jumpchip.is-live { color: var(--crm-color-text-strong); }
.heading__metrics { grid-column: 1 / -1; margin-top: var(--crm-space-6); }
/* in the band the metrics are one flat row with dividers, not separate cards — the bar's treatment */
.heading__metrics .metrics { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0; border: 1px solid var(--crm-color-line); border-radius: var(--crm-radius-card-compact, 12px); overflow: hidden; background: rgb(var(--crm-chrome-rgb) / 0.5); }
.heading__metrics .metric { border: 0; border-left: 1px solid var(--crm-color-line); border-radius: 0; background: none; padding: var(--crm-space-4) var(--crm-space-4-5); }
.heading__metrics .metric:first-child { border-left: 0; }
.heading__metrics .metric b { font-size: 28px; }