/* The DTCG source is design-tokens.tokens.json; design-tokens.css is its committed,
   zero-build runtime artifact, loaded directly before this stylesheet by every
   dashboard document. Components consume the inherited semantic custom properties. */
@font-face{font-family:"Atkinson Hyperlegible Next";font-style:normal;
  font-weight:200 800;font-display:swap;
  src:url("fonts/AtkinsonHyperlegibleNext[wght].woff2") format('woff2')}
@font-face{font-family:"Atkinson Hyperlegible Next";font-style:italic;
  font-weight:200 800;font-display:swap;
  src:url("fonts/AtkinsonHyperlegibleNext-Italic[wght].woff2") format('woff2')}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:100 800;
  font-display:swap;src:url("fonts/JetBrainsMono[wght].woff2") format('woff2')}
@font-face{font-family:"JetBrains Mono";font-style:italic;font-weight:100 800;
  font-display:swap;src:url("fonts/JetBrainsMono-Italic[wght].woff2") format('woff2')}
*{margin:0;padding:0;box-sizing:border-box;
  font-variant-ligatures:none!important;
  font-feature-settings:"liga" 0,"clig" 0,"calt" 0!important}
*::before,*::after{
  font-variant-ligatures:none!important;
  font-feature-settings:"liga" 0,"clig" 0,"calt" 0!important}
/* Inline emphasis joins the closed weight ramp: a bare <b> would compute `bolder`
   (700/900 depending on context) — off-ramp. Strong tier = 600, everywhere. */
b,strong{font-weight:600}
/* a11y: visible keyboard focus everywhere + respect reduced motion (ADHD/vestibular). */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
[role="button"]{cursor:pointer}
/* Visually-hidden: in the a11y/heading tree (SR + heading nav) but not painted. */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}
body{font-family:var(--ui);background:var(--bg);color:var(--ink);line-height:1.6;
  font-size:var(--fs-body);font-variant-ligatures:none;
  font-feature-settings:"liga" 0,"clig" 0,"calt" 0;-webkit-font-smoothing:antialiased;
  min-height:100vh}
html{scrollbar-gutter:stable}
html.modal-open,html.modal-open body{overflow:hidden}
button,input,select,textarea{font-family:var(--ui)}
.wrap{max-width:calc(var(--app-shell-max) + var(--app-nav-width) + var(--space-xl));
  min-height:100vh;margin:0 auto;padding:0 var(--app-shell-gutter);display:grid;
  grid-template-columns:var(--app-nav-width) minmax(0,1fr);gap:var(--space-xl)}
.dashboard-main{min-width:0}
.mono{font-family:var(--mono)}
.tabular{font-family:var(--ui);font-variant-numeric:tabular-nums}
code,pre,kbd,samp{font-family:var(--mono)}
/* Layout: each SECTION is a band; its cards flow in a responsive grid (3 cols on
   wide screens → 2 → 1). Replaces the unpredictable column-masonry. Header spans. */
.masonry{display:flex;flex-direction:column;gap:var(--space-3xl)}
/* Content-driven: cards size to their content and wrap — no forced equal columns
   (that was cramping Cadencia/KPIs and leaving gaps). A card grows to fill leftover
   row space; a heavy card claims more; short ones sit together. */
.block{display:flex;flex-wrap:wrap;gap:var(--space-md);align-items:flex-start}
.block>.card{flex:1 1 340px;min-width:0}/* min-width:0 lets a wide card (timeline) shrink below content min-content → no h-scroll on narrow screens (flexbox default min-width:auto trap) */
.block>h2.sec{flex-basis:100%}
/* Dense analytical views use explicit semantic stacks. Each stack owns its DOM and
   painted order, so keyboard focus never zig-zags through a visual masonry layout. */
.analytic-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:start;gap:var(--space-md);width:100%;flex:1 1 100%}
.analytic-stack{display:flex;flex-direction:column;gap:var(--space-md);min-width:0}
/* 2-3/row LAW (reorg 2026-07-10): a LONE non-wide card in a block keeps a readable
   measure instead of stretching edge to edge (only companies/history earn full width). */
.block>div.card:only-of-type:not(.wide){max-width:640px}
#panel-signals .block>div.card:only-of-type:not(.wide){max-width:none;flex-basis:100%}
/* Shared application navigation. The dashboard promotes it to a persistent rail;
   lesson pages and narrow dashboards reuse the exact markup as a top navigation. */
.app-nav{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;
  align-items:stretch;gap:var(--space-lg);width:100%;margin:0;
  padding:var(--space-xl) var(--space-md) var(--space-lg) 0;
  border-right:1px solid var(--border)}
.app-nav-brand{grid-area:brand;display:inline-flex;align-items:center;gap:var(--space-sm);
  min-height:44px;color:var(--ink);text-decoration:none;
  font:800 var(--fs-title)/1 var(--ui);white-space:nowrap}
.app-nav-mark{width:var(--space-xl);height:var(--space-xl);color:var(--accent);flex:none}
.app-nav-wordmark{transform:translateY(1px)}
.app-nav-track{grid-area:track;display:flex;align-items:stretch;min-width:0;flex:1;
  overflow-x:auto;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;padding:var(--space-xs) 0;
  scroll-padding-inline:var(--space-xs);scrollbar-width:none}
.app-nav-track::-webkit-scrollbar{display:none}
.app-nav-items{display:flex;flex-direction:column;align-items:stretch;
  width:100%;min-width:0;gap:var(--space-2xs)}
.app-nav-link{appearance:none;position:relative;display:inline-flex;align-items:center;
  gap:var(--space-sm);flex:0 0 auto;min-height:44px;width:100%;
  padding:var(--space-sm);border:0;border-inline-start:2px solid transparent;
  border-radius:var(--radius-sm);background:transparent;color:var(--ink-muted);
  text-decoration:none;white-space:nowrap;font:600 var(--fs-body)/1 var(--ui);
  cursor:pointer;transition:background var(--motion-fast) var(--ease-standard),
  color var(--motion-fast) var(--ease-standard),border-color var(--motion-fast) var(--ease-standard)}
.app-nav-icon{width:var(--space-lg);height:var(--space-lg);flex:none;color:var(--ink-faint)}
@media(hover:hover){
  .app-nav-link:hover{color:var(--ink);background:var(--surface-hover)}
  .app-nav-link:hover .app-nav-icon{color:var(--ink-muted)}
}
.app-nav-link[aria-current="page"]{
  color:var(--ink);border-inline-start-color:var(--accent);background:var(--accent-soft)}
.app-nav-link[aria-current="page"] .app-nav-icon{color:var(--accent)}
.app-nav-util{grid-area:util;display:flex;flex-direction:column;align-items:stretch;
  justify-content:flex-end;gap:var(--space-xs);min-width:0;padding-top:var(--space-md);
  border-top:1px solid var(--border)}
.theme-tg{align-self:stretch;display:inline-flex;align-items:center;justify-content:flex-start;
  gap:var(--space-xs);appearance:none;min-height:44px;background:transparent;
  border:1px solid transparent;border-radius:var(--radius-sm);color:var(--ink-muted);
  font:600 var(--fs-label)/1 var(--ui);padding:var(--space-sm);cursor:pointer;
  transition:color var(--motion-fast) var(--ease-standard),
  border-color var(--motion-fast) var(--ease-standard),
  background var(--motion-fast) var(--ease-standard)}
.theme-tg:hover{color:var(--ink);border-color:var(--border);background:var(--surface-hover)}
.theme-tg .ic{width:var(--space-md);height:var(--space-md);display:inline-block}
.panel{display:none;min-width:0;padding:var(--space-xl) 0 var(--space-3xl)}
.panel.on{display:block}
/* Route orientation targets the non-interactive region itself. The new heading and
   scroll position are the visible cue; avoid drawing a page-sized focus rectangle. */
.panel:focus,.panel:focus-visible{outline:none}
.dashboard-skip{position:fixed;left:var(--space-md);top:var(--space-md);z-index:300;
  transform:translateY(-200%);padding:var(--space-sm) var(--space-md);
  border:1px solid var(--accent);border-radius:var(--radius-sm);
  background:var(--surface);color:var(--ink);font-weight:600;text-decoration:none}
.dashboard-skip:focus{transform:none}
.dashboard-skip:focus-visible{transform:none;outline:2px solid var(--accent);outline-offset:2px}
.view-head{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-xs);
  margin-bottom:var(--space-xl);padding:var(--space-sm) var(--space-2xs) 0}
.view-head-kicker{font:600 var(--fs-label)/1 var(--ui);letter-spacing:var(--ls-label);
  color:var(--accent)}
.view-head-title{font:800 var(--fs-display)/var(--lh-tight) var(--ui);color:var(--ink)}
.view-head p{max-width:68ch;color:var(--ink-muted);font-size:var(--fs-title);
  line-height:var(--lh-body)}

@media(max-width:1180px){
  .wrap{display:block;max-width:var(--app-shell-max);min-height:100vh;
    padding:0 var(--app-shell-gutter) var(--space-3xl)}
  .app-nav{position:sticky;top:0;z-index:20;height:auto;display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-areas:"brand track util";align-items:center;gap:var(--space-lg);
    padding:var(--space-md) 0;margin:0;border-right:0;border-bottom:1px solid var(--border);
    background:var(--bg)}
  .app-nav-track{width:100%;overflow-x:auto;overflow-y:hidden;padding:0 var(--space-xs);
    -webkit-mask-image:none;mask-image:none}
  .app-nav-track[data-overflow-start="true"][data-overflow-end="true"]{
    -webkit-mask-image:linear-gradient(to right,transparent 0,var(--ink) var(--space-xl),var(--ink) calc(100% - var(--space-xl)),transparent 100%);
    mask-image:linear-gradient(to right,transparent 0,var(--ink) var(--space-xl),var(--ink) calc(100% - var(--space-xl)),transparent 100%)}
  .app-nav-track[data-overflow-start="true"][data-overflow-end="false"]{
    -webkit-mask-image:linear-gradient(to right,transparent 0,var(--ink) var(--space-xl));
    mask-image:linear-gradient(to right,transparent 0,var(--ink) var(--space-xl))}
  .app-nav-track[data-overflow-start="false"][data-overflow-end="true"]{
    -webkit-mask-image:linear-gradient(to right,var(--ink) calc(100% - var(--space-xl)),transparent 100%);
    mask-image:linear-gradient(to right,var(--ink) calc(100% - var(--space-xl)),transparent 100%)}
  .app-nav-items{flex-direction:row;align-items:stretch;width:auto;min-width:max-content;
    gap:var(--space-2xs)}
  .app-nav-link{width:auto;border-inline-start:0;border-bottom:2px solid transparent;
    border-radius:var(--radius-sm) var(--radius-sm) 0 0}
  .app-nav-link[aria-current="page"]{border-bottom-color:var(--accent)}
  .app-nav-util{flex-direction:row;align-items:center;min-width:max-content;
    padding-top:0;border-top:0}
  .theme-tg{align-self:center;width:auto}
  .panel{padding-top:var(--space-xl)}
}

/* El carril de pestañas sabe encogerse (overflow-x con máscaras), pero el bloque
   de utilidades pedía max-content y vive FUERA de ese carril, así que sus 479 px
   arrastraban la página entera. Medido: a 556 px no desborda, a 476 sí (67 px) y
   a 396 px son 147. Por debajo del punto de ruptura baja a su propia fila, que
   deja idioma y tema accesibles sin scroll lateral. */
/* La tabla de la cola declara min-width:640px y su carril ya tiene overflow-x,
   pero un hijo de grid no baja de su tamaño mínimo de contenido salvo que se le
   permita: sin min-width:0 la tarjeta medía 690 px en un viewport de 356 y
   arrastraba la página. Con esto la tabla scrollea DENTRO de su carril. */
.chroma .v4cola,.chroma .v4cola>*{min-width:0}


/* Integrated Lessons section: one compact catalog inside the dashboard panel. The
   separate lesson documents remain detail views, never a second dashboard shell. */
.lesson-catalog{display:flex;flex-direction:column;gap:var(--space-2xl)}
#panel-lessons .lesson-catalog-intro{display:flex;justify-content:flex-end;padding:0}
#panel-lessons .lesson-catalog-intro>div:first-child{display:none}
.lesson-catalog-empty{align-items:flex-start;gap:var(--space-xs);
  max-width:640px;padding:var(--space-xl);border:1px solid var(--border);
  border-radius:var(--radius);background:var(--surface)}
.lesson-catalog-empty-title{font:600 var(--fs-title)/var(--lh-snug) var(--ui);
  color:var(--ink)}
.lesson-catalog-empty p{color:var(--ink-muted);line-height:var(--lh-body)}
.lesson-catalog-group{display:flex;flex-direction:column;gap:var(--space-md)}
.lesson-catalog-intervention-note,.lesson-catalog-intervention-state p{
  max-width:72ch;margin:0;color:var(--ink-muted);line-height:var(--lh-body)}
.lesson-catalog-intervention-state{display:grid;gap:var(--space-sm);
  padding:var(--space-lg);border:1px solid var(--border);
  border-radius:var(--radius);background:var(--surface)}
.lesson-catalog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--space-md);margin:0;padding:0}
.lesson-catalog-next-grid{grid-template-columns:1fr}
.lesson-catalog-item{list-style:none;min-width:0}
.lesson-catalog-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;gap:var(--space-md);min-width:0;height:100%;padding:var(--space-lg);
  border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);
  color:inherit;text-decoration:none;box-shadow:var(--shadow);
  transition:border-color var(--motion-fast) var(--ease-standard),
  background var(--motion-fast) var(--ease-standard),
  transform var(--motion-fast) var(--ease-standard)}
.lesson-catalog-card-primary{padding:var(--space-xl);border-color:var(--accent-line);
  background:var(--accent-soft)}
.lesson-catalog-number{color:var(--accent);white-space:nowrap;
  font:800 var(--fs-title)/1 var(--mono)}
.lesson-catalog-body{display:flex;flex-direction:column;gap:var(--space-xs);min-width:0}
.lesson-catalog-title{font:600 var(--fs-title)/var(--lh-snug) var(--ui);
  color:var(--ink)}
.lesson-catalog-details{display:flex;align-items:center;flex-wrap:wrap;
  gap:var(--space-xs) var(--space-sm);font-size:var(--fs-label);color:var(--ink-muted)}
.lesson-catalog-difficulty,.lesson-catalog-gap{color:var(--ink-muted)}
.lesson-catalog-gap{padding-inline-start:var(--space-sm);border-inline-start:1px solid var(--border)}
.lesson-catalog-action{color:var(--ink-muted);
  font:600 var(--fs-label)/1 var(--ui)}
.lesson-catalog-card-primary .lesson-catalog-action{display:inline-flex;align-items:center;
  justify-content:center;min-height:44px;padding:var(--space-xs) var(--space-md);
  border-radius:var(--radius-sm);background:var(--accent);color:var(--on-accent);
  font:600 var(--fs-body)/1 var(--ui)}
.lesson-catalog-command-row{display:grid;
  grid-template-columns:minmax(0,2fr) minmax(280px,1fr);
  gap:var(--space-md);align-items:start;min-width:0}
.lesson-catalog-command-row>.lesson-catalog-next{min-width:0}
.lesson-catalog-command-row>.counted-section{grid-column:1/-1;align-self:stretch}
@media(hover:hover){
  a.lesson-catalog-card:hover{border-color:var(--accent-line);
    background:var(--surface-hover);transform:translateY(-1px)}
  a.lesson-catalog-card:hover .lesson-catalog-action{color:var(--on-accent)}
}
@media(max-width:1050px){
  .analytic-columns{grid-template-columns:1fr}
  .dashboard-app .analytic-stack>.card{align-self:stretch;width:100%}
  .lesson-catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){
  .lesson-catalog-grid{grid-template-columns:1fr}
  .lesson-catalog-card{grid-template-columns:auto minmax(0,1fr)}
  .lesson-catalog-action{grid-column:2}
  .lesson-catalog-command-row{grid-template-columns:1fr}
  .lesson-catalog-command-row>.counted-section{align-self:stretch}
}
/* Wide cards span all columns (a full-span <h2> keeps auto-fit from collapsing, so a
   lone card would otherwise sit at 1/3). Use for naturally-wide content (log, lists). */
.block .wide{grid-column:1/-1;flex-basis:100%}
.sec{font-size:var(--fs-headline);font-weight:800;letter-spacing:normal;text-transform:none;
  color:var(--ink);margin:0 var(--space-2xs);display:flex;align-items:center;gap:var(--space-sm)}
/* Brand tick: a short accent dash opens every section header (identity, not furniture). */
.sec::before{content:"";width:14px;height:2px;background:var(--accent);flex:none}
.sec::after{content:"";flex:1;height:1px;background:var(--border)}
/* Cards share the lesson-catalog elevation token — one surface vocabulary on both themes. */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:var(--space-lg);margin:0;box-shadow:var(--shadow)}
.card .t{font-size:var(--fs-title);font-weight:600;color:var(--ink);margin-top:0;margin-bottom:3px;display:flex;align-items:center;gap:8px}
.plan-progress-surfaces{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));gap:var(--space-sm);margin-top:var(--space-md)}
.plan-progress-surface{padding:var(--space-md);border:1px solid var(--border);
  border-radius:var(--radius-md);background:var(--surface-raised)}
.plan-progress-surface[data-linkage-state="UNCHECKED"]{background:var(--surface);border-style:dashed}
.plan-progress-surface h3{margin:0 0 var(--space-sm);font:600 var(--fs-body)/var(--lh-snug) var(--ui)}
.plan-progress-count{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--space-xs);color:var(--ink-muted)}
.plan-progress-count strong{font-family:var(--mono);font-size:var(--fs-headline);font-weight:800;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.plan-progress-meta,.plan-progress-provenance{display:flex;flex-wrap:wrap;gap:var(--space-sm);margin-top:var(--space-sm)}
.plan-progress-provenance{overflow-wrap:anywhere}
/* Forma corta de identificador: el valor íntegro vive en el title y en el
   atributo data- de la tarjeta, que es donde lo leería quien audita. */
.plan-progress-provenance .pp-digest{font-family:var(--mono);cursor:help}
.card .h{font-size:var(--fs-label);color:var(--ink-muted);margin-bottom:16px;line-height:1.5;display:none}
/* Action zone (Hoy): accent-tinted so the 'act now' block earns its priority. */
.act{margin-bottom:var(--space-2xl)}
.act .card{/* unified: an action card looks like any other card (no divergent background) */}
.card .h.show{display:block}
/* Help affordance: a clean ghost "?" button (was an ugly unicode circle-i). */
.info{appearance:none;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:0;background:transparent;color:var(--ink-muted);font:600 var(--fs-label)/1 var(--ui);cursor:pointer;flex-shrink:0;user-select:none}
.info::before{content:"?";display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:6px;border:1px solid var(--border);background:transparent;
  transition:border-color var(--motion-fast) var(--ease-standard),
  background var(--motion-fast) var(--ease-standard)}
.info:focus{color:var(--ink)}
.info:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.info:focus-visible::before{border-color:var(--accent);background:var(--accent-soft)}
/* Designed legends: small colour chips, no unicode glyphs. */
.lgd{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-label);color:var(--ink-muted)}
.lgd i{width:12px;height:12px;border-radius:3px;display:inline-block;flex-shrink:0}
.legend{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;margin:2px 0 16px}
/* ── DESIGN-SYSTEM PRIMITIVES (cards compose these; no per-card ad-hoc styling) ── */
/* Plain "what it means" line — visible and readable, NOT hidden micro-grey text. */
.sub{font-size:var(--fs-body);color:var(--ink-muted);line-height:1.55;margin:-2px 0 16px}
/* Prose owns a readable measure; visual primitives remain free to use the card width. */
.card>:is(.sub,.mcap){max-inline-size:75ch}
/* StatusPill — explicit words inside one quiet neutral fill. No icon, hard outline,
   alarm colour, or interactive affordance. The fill hierarchy is token-controlled. */
.status-pill{display:inline-grid;grid-template-columns:minmax(0,1fr);align-items:center;
  max-inline-size:100%;min-block-size:28px;
  font:600 var(--fs-label)/var(--lh-snug) var(--ui);
  padding:var(--space-2xs) calc(var(--space-xs) + var(--space-3xs));
  border:0;border-radius:calc(var(--control-target)/2);background:var(--surface-hover);color:var(--ink);
  box-shadow:none;white-space:normal;text-align:start}
.status-pill::before{content:none}
.status-pill.has-context{grid-template-columns:auto minmax(0,1fr)}
.status-pill__context{margin-inline-end:var(--space-xs);padding-inline-end:var(--space-xs);
  border-inline-end:1px solid var(--border-strong);color:var(--ink-muted);font-weight:400}
.status-pill__value{min-inline-size:0;overflow-wrap:anywhere}
.status-pill.role-sub .status-pill__value{color:var(--ink-muted)}
.bignum{font:800 var(--fs-stat)/1 var(--ui)}
/* populationPosition overall headline (reorg 2026-07-10): big min-percentile + tier badge */
.pop-ov{display:flex;align-items:center;gap:14px;margin:6px 0 2px}
.pop-ovt{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.pop-ovl{font-size:var(--fs-label);color:var(--ink-muted);line-height:1.45;max-width:32ch}
/* issue 228 cards: small reusable sub-sections (declared once; the cards COMPOSE them,
   never hand-roll inline style — R32/R33 design-system reuse). Spacing binds the --space-* scale. */
.cverdict{display:flex;align-items:center;gap:var(--space-xs);flex-wrap:wrap;margin-bottom:var(--space-xs)}
.ckpi{margin:var(--space-2xs) 0 var(--space-xs)}           /* a KPI sitting above a list (consolidation) */
.crows{margin-top:var(--space-xs)}                         /* a bar list under a header (cadence context) */
/* TemporalStrip — the single period-sequence grammar. Positional cells, no visible
   ordinal numerals (recorded supersede 2026-08-24); the endpoint carries the emphasis;
   the legend repeats the state words and counts. */
.temporal-strip{display:flex;align-items:center;gap:var(--space-3xs);margin-top:var(--space-2xs)}
.temporal-cell{flex:1 1 0;min-inline-size:6px;block-size:12px;border:0;border-radius:var(--radius-sm)}
.temporal-cell-now{outline:1px solid var(--border-strong);outline-offset:1px}
.temporal-strip-legend{display:flex;flex-wrap:wrap;gap:var(--space-2xs);margin-top:var(--space-xs)}
.temporal-strip-label{display:inline-flex;align-items:center;min-block-size:24px;padding:var(--space-3xs) var(--space-xs);
  border:0;border-radius:calc(var(--control-target)/2);font:600 var(--fs-label)/var(--lh-snug) var(--ui)}
:is(.temporal-cell,.temporal-strip-label).tone-light{background:var(--surface-hover);color:var(--ink-muted)}
:is(.temporal-cell,.temporal-strip-label).tone-medium{background:var(--heat-1);color:var(--ink);font-weight:600}
:is(.temporal-cell,.temporal-strip-label).tone-strong{background:var(--heat-2);color:var(--ink);font-weight:800}
:is(.temporal-cell,.temporal-strip-label).tone-idle{background:transparent;color:var(--ink-faint);border:1px dashed var(--border)}
:is(.temporal-cell,.temporal-strip-label).tone-unknown{background:transparent;color:var(--ink-muted);border:1px solid var(--border-strong)}
/* Counted editorial sections: real hierarchy, no control-shaped container or pill. */
.counted-section{flex:1 1 100%;min-width:0;padding-top:var(--space-md);border-top:1px solid var(--border)}
.counted-section-header{display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--space-md);padding-inline:var(--space-2xs)}
.counted-section-title{min-width:0;margin:0;color:var(--ink);
  font:600 var(--fs-section-title)/var(--lh-snug) var(--ui)}
.counted-section-count{color:var(--ink-faint);font:600 var(--fs-label)/1 var(--mono);
  font-variant-numeric:tabular-nums}
.counted-section-body{margin-top:var(--space-md)}
.coverage-note{margin:var(--space-sm) 0 var(--space-md);padding-left:var(--space-sm);
  border-left:var(--focus-ring) solid var(--border-strong);color:var(--ink-muted);
  font:400 var(--fs-label)/1.5 var(--ui)}
/* Meter — the consistent value-vs-target widget (fill to value, tick at target). */
/* Meter primitives — standalone classes (used by meter(), dominio, signals,
   calibration, speedform). NOT scoped under .meter: several cards use the bars
   without the wrapper, and scoping silently dropped the track/fill/tick. */
.meter{margin:6px 0 2px}
.mlab{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:8px}
.mlab b{font-weight:600;font-size:var(--fs-label)}
.mval{font:800 var(--fs-headline)/1 var(--ui)}
.mtrack{position:relative;height:5px;background:var(--track);border-radius:99px;overflow:hidden}
.mfill{height:100%;border-radius:99px}
.mtick{position:absolute;top:-5px;width:2px;height:15px;background:var(--ink-muted);border-radius:2px}
/* Signals — instrument scale: a fine reference tick, a solid value tick, and a
   connecting hairline. No dot/ring pictogram or alarm colour. */
.sigrow{margin-bottom:24px}.sigrow:last-child{margin-bottom:4px}
.sighd{display:flex;align-items:baseline;justify-content:space-between;gap:4px 10px;flex-wrap:wrap}
.sighd>span:last-child{margin-left:auto}
.sigvalue{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;
  gap:var(--space-xs) var(--space-sm);min-width:0;max-width:100%}
.sighd .nm{font:600 var(--fs-body)/1.2 var(--ui);color:var(--ink)}
.sighd .cd{font:400 var(--fs-label)/1 var(--ui);color:var(--ink-faint);margin-left:7px}
.sighd .vv{font:800 var(--fs-headline)/1 var(--ui)}
.sigtrack{position:relative;height:2px;background:var(--border);border-radius:2px;margin:20px 7px 0}
.sigtrack .seg{position:absolute;top:0;height:2px;border-radius:2px}
.sigtrack .goal{position:absolute;top:50%;inline-size:1px;block-size:14px;background:var(--ink-faint);transform:translate(-50%,-50%)}
.sigtrack .val{position:absolute;top:50%;inline-size:3px;block-size:14px;border-radius:var(--radius-sm);transform:translate(-50%,-50%);box-shadow:none}
.sigcap{display:flex;justify-content:space-between;gap:10px;margin-top:15px;font-size:var(--fs-label);color:var(--ink-faint);line-height:1.4}
.mcap{font-size:var(--fs-label);color:var(--ink-faint);line-height:1.5;overflow-wrap:anywhere}
/* Manski selection band block inside the calibration card (top gap from the bars above). */
.scale-label{position:absolute;max-width:75%;font-size:var(--fs-label);line-height:1.25;color:var(--ink-faint)}
.scale-label.start{text-align:start}
.scale-label.middle{transform:translateX(-50%);text-align:center}
.scale-label.end{text-align:end}
/* miniFact (atom) value line (label uses .mcap). */
.mfv{font:600 var(--fs-body)/1.2 var(--ui);color:var(--ink);margin-top:4px}
/* Companies: one neutral descriptive table. Tier is owner-declared priority;
   no row encodes interview capability or an application decision. */
.company-directory-search{display:flex;flex-direction:column;align-items:stretch;gap:var(--space-xs);margin-bottom:var(--space-xs)}
.company-directory-search label{font:600 var(--fs-body)/1.3 var(--ui);color:var(--ink)}
.company-directory-search input{appearance:none;width:100%;min-height:44px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface-raised);color:var(--ink);padding:10px 13px;font-size:var(--fs-body);line-height:1.35;transition:border-color .15s,background .15s}
.company-directory-search input::placeholder{color:var(--ink-faint);opacity:1}
.company-directory-search input:hover{border-color:var(--accent-line)}
.company-directory-status{font-size:var(--fs-label);line-height:1.5;color:var(--ink-faint)}
.company-integrity-note{margin:var(--space-md) 0 0;padding-left:var(--space-sm);
  border-left:var(--focus-ring) solid var(--border-strong);color:var(--ink-muted);
  font:400 var(--fs-label)/1.5 var(--ui)}
/* Cinco columnas desde el rediseno 2026-08-29: identidad, contratacion, roles, cache y banda.
   La cuarta y la quinta son los datos que el productor publica y que antes solo existian dentro
   del dialogo, asi que el directorio leia como un indice de nombres. */
.company-columns,.corow{display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,.8fr) minmax(0,.6fr) minmax(0,1fr);
  align-items:center;gap:var(--space-md)}
/* La barra fina por fila es el idioma del formato antiguo, recuperado 2026-08-29 a peticion
   del owner: el valor viaja en una primitiva visual y no en una columna de texto mas
   (design-system Ley 1). Mide el CACHE 0-100, que es un dato registrado, y no el compuesto de
   preparacion que PR 1271 retiro. */
.company-cachet{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;
  gap:var(--space-sm)}
.corow .cbar{display:block;height:3px;border-radius:var(--radius-sm);background:var(--track);
  overflow:hidden}
.corow .cbar>i{display:block;height:100%;border-radius:var(--radius-sm);background:var(--evidence)}
.corow .cpc{min-width:3ch;color:var(--ink);font:600 var(--fs-label)/1 var(--mono);
  text-align:right}
.company-columns{margin-top:var(--space-lg);padding:0 var(--space-sm) var(--space-xs);
  border-bottom:1px solid var(--border);color:var(--ink-faint);
  font:600 var(--fs-label)/1 var(--ui)}
.tiers{display:flex;flex-direction:column;gap:var(--space-xl);margin-top:var(--space-xl)}
.thead{display:flex;align-items:baseline;gap:var(--space-sm);margin:0;padding:0 var(--space-sm) var(--space-xs);
  border-bottom:1px solid var(--border)}
.thead .tm{font:600 var(--fs-title)/var(--lh-snug) var(--ui);color:var(--ink)}
.thead .tc{margin-left:auto;font:400 var(--fs-label)/1 var(--ui);color:var(--ink-faint)}
.corows{display:flex;flex-direction:column}
.corow{appearance:none;width:100%;min-height:calc(var(--control-target) + var(--space-md));padding:var(--space-sm);
  border:0;border-bottom:1px solid var(--border);border-radius:var(--radius-sm);background:transparent;
  color:inherit;font:inherit;text-align:start;cursor:pointer;
  transition:background var(--motion-fast) var(--ease-standard)}
.corow:hover,.corow:focus-visible{background:var(--surface-hover)}
.company-identity{display:flex;flex-direction:column;min-width:0;gap:var(--space-2xs)}
.corow .cnm{font:600 var(--fs-body)/1.2 var(--ui);color:var(--ink)}
.corow .chr{font:400 var(--fs-label)/var(--lh-snug) var(--ui);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.company-role-count,.company-band{color:var(--ink-faint);
  font-size:var(--fs-label);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* A partir de 900px la proporcion y la lista de vacantes van lado a lado. Cada una estirada a
   1152px dejaba un hueco enorme entre la etiqueta y su cifra; en dos columnas ninguna se
   estira y el ancho se usa en vez de pelearse con el. */
.v4cosplit{display:grid;gap:var(--space-xl);align-items:start}

@media(min-width:900px){.v4cosplit{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}}
/* "Donde hay algo abierto ahora": contratando fuerte y con vacantes. Es un conjunto distinto
   del orden por tier, asi que no repite ninguna fila del directorio. */
.v4liverows{display:grid;gap:var(--space-2xs);margin:var(--space-xs) 0 var(--space-md)}
.v4liverow{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:baseline;
  gap:var(--space-md);padding:var(--space-2xs) 0;border-bottom:1px solid var(--border)}
.v4livenm{font:600 var(--fs-body)/var(--lh-snug) var(--ui);color:var(--ink)}
.v4liven{font-size:var(--fs-label);color:var(--ink-muted)}
.v4livet{font-size:var(--fs-label);color:var(--ink-faint);min-width:9ch;text-align:right}
/* Dialogo por empresa, rediseno 2026-08-29: un hecho por FILA con el ancho del dialogo, en vez
   de losas grises que apilaban etiqueta sobre un valor que envolvia en tres lineas. */
.co-facts{display:grid;gap:var(--space-2xs);margin:var(--space-xs) 0 var(--space-lg)}
.co-fact{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;
  gap:var(--space-md);padding:var(--space-2xs) 0;border-bottom:1px solid var(--border)}
.co-fact-lab{font-size:var(--fs-label);color:var(--ink-muted)}
.co-fact-val{font:600 var(--fs-body)/var(--lh-snug) var(--ui);color:var(--ink);text-align:right}
.co-fact-note{margin:calc(-1 * var(--space-md)) 0 var(--space-lg);
  font-size:var(--fs-label);color:var(--ink-faint)}
.company-detail-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--space-lg);margin:0 0 var(--space-lg);padding:0 0 var(--space-md);
  border-bottom:1px solid var(--border)}
.company-detail-line{display:flex;flex-direction:column;gap:var(--space-2xs);min-width:0}
.company-detail-line strong{color:var(--ink);font:600 var(--fs-body)/var(--lh-snug) var(--ui)}
.company-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--space-lg);margin:var(--space-md) 0}
.company-detail-note{margin:var(--space-sm) 0 0;color:var(--ink-muted);
  font:400 var(--fs-label)/var(--lh-body) var(--ui)}
.company-positioning{margin:0;padding-left:var(--space-sm);border-left:1px solid var(--border-strong);
  color:var(--ink);font:400 var(--fs-body)/var(--lh-body) var(--ui)}
@media(max-width:700px){
  /* Movil: la identidad ocupa su propia linea y debajo van los roles y el estado. Las dos
     columnas numericas (cache y banda) se retiran antes que truncar el nombre, que es lo que
     hace util la fila. Las areas nombraban un `tier` que el rediseno 2026-08-29 quito, asi que
     la celda de roles caia ahi por accidente. */
  .company-columns{display:none}
  .corow{grid-template-columns:minmax(0,1fr) minmax(0,.8fr);
    grid-template-areas:"identity identity" "cachet hiring" "roles roles";
    gap:var(--space-2xs) var(--space-md)}
  .company-identity{grid-area:identity}
  .company-role-count{grid-area:roles}
  .company-band{display:none}
  .company-cachet{grid-area:cachet}
  .corow .chr{grid-area:hiring;text-align:right}
  .company-detail-summary,.company-detail-grid{grid-template-columns:1fr}
  .rolerow-hd{display:grid;grid-template-columns:1fr;gap:var(--space-2xs)}
  .rolerow-meta{justify-content:flex-start;text-align:left}
}
.gap-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));
  gap:var(--space-xs) var(--space-lg);margin:0;padding:0;list-style:none}
.gap-item{position:relative;padding-inline-start:var(--space-md);
  color:var(--ink-muted);font:400 var(--fs-label)/1.45 var(--ui)}
.gap-item::before{content:"";position:absolute;inset-inline-start:0;top:var(--space-xs);
  width:5px;height:1px;background:var(--border-strong)}
.gap-item.warn{color:var(--ink)}
@media(hover:hover){
  .info:hover{color:var(--ink)}
  .info:hover::before{border-color:var(--accent);background:var(--accent-soft)}
}
/* Invariantes — distinct from the pattern steppers: a compact grid with a thin bar.
   ONE row component (invariantRow.js) serves both the map grid and the drill-down
   modal; .invlist is the modal's LIST context (divider via CSS, not a row variant). */
.invhead{font-size:var(--fs-label);color:var(--ink-muted);margin:2px 0 14px}
.invgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px 28px}
.invrow{padding:9px 0}
.invrow .r1{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.invrow .nm{font:600 var(--fs-label)/1.2 var(--ui);color:var(--ink)}
.invrow .mt{font:600 var(--fs-label)/1 var(--ui);flex-shrink:0}
.invrow .track{margin:7px 0 6px}
.invrow .vf{display:inline-flex;align-items:center;gap:6px;font:400 var(--fs-label)/1 var(--ui);color:var(--ink-faint)}
.invlist .invrow{border-bottom:1px solid var(--border)}
.invlist .invrow:last-child{border-bottom:0}
/* Outline badge (badge.js atom): tier / difficulty identity mark; colour set inline (data). */
.obadge{display:inline-flex;align-items:center;font:600 var(--fs-label)/1 var(--ui);border:1px solid;
  border-radius:calc(var(--control-target)/2);padding:7px 11px;white-space:nowrap}
/* Attribute chip + visual dot separator (replaces unicode middots). */
.chip{display:inline-flex;align-items:center;gap:5px;font:600 var(--fs-label)/1 var(--ui);padding:4px 9px;border-radius:999px;background:transparent;color:var(--ink-muted);border:1px solid var(--border-strong);white-space:nowrap}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 10px}/* wrapping chip group (failure modes) */
.sep{display:inline-block;width:1px;height:11px;background:var(--border);vertical-align:-1px;margin:0 11px}
/* modal */
.ov{position:fixed;inset:0;background:var(--overlay);display:none;z-index:50;align-items:flex-start;justify-content:center;padding:40px 16px;overflow:auto}
.ov.on{display:flex}
/* Flex column so the header (title + close) stays fixed and ONLY the body scrolls —
   a long list (79-item review queue) no longer scrolls the title/close out of view. */
.modal{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:16px;max-width:1000px;width:100%;max-height:90vh;display:flex;flex-direction:column;overflow:hidden}
/* The dialog is focused programmatically for screen-readers (aria-modal + label); its
   appearance is the visual indication, so suppress the 2px outline around the whole box. */
.modal:focus,.modal:focus-visible{outline:none}
/* Company modal helpers */
.angle{border:1px solid var(--accent-line);background:var(--accent-soft);border-radius:10px;padding:13px 16px;font-size:var(--fs-body);color:var(--ink);line-height:1.55}
.empty{border:1px dashed var(--border);border-radius:10px;padding:16px;text-align:center;color:var(--ink-faint);font-size:var(--fs-label)}
.btn-link{display:inline-block;background:var(--accent-soft);border:1px solid var(--accent-line);color:var(--accent);font:600 var(--fs-body)/1 var(--ui);padding:12px 17px;border-radius:9px;text-decoration:none;transition:.15s}
.btn-link:hover{background:var(--accent-soft-2)}
.lnk2{font:600 var(--fs-label)/1 var(--ui);color:var(--ink-muted);text-decoration:none;transition:color .15s}
.lnk2:hover{color:var(--ink)}
.modal .mh{display:block;padding:30px 96px 14px 36px;flex-shrink:0}
/* Only the body scrolls; padding moved here off .modal so the header can stay fixed. */
#modalBody{overflow-y:auto;overscroll-behavior:contain;flex:1 1 auto;padding:0 36px 34px}
.modal .mh h3{font-size:var(--fs-title);font-weight:600}
.modal .cl{appearance:none;display:inline-flex;align-items:center;justify-content:center;
  position:absolute;top:22px;right:28px;width:44px;height:44px;padding:0;background:none;border:0;
  cursor:pointer;color:var(--ink-muted);font-size:var(--fs-headline);line-height:1;
  border-radius:6px;transition:color .15s}
.modal .cl:hover,.modal .cl:focus-visible{color:var(--ink)}
/* Journey hero CARD (Today right rail): ring over tier over pace chip over vitals.
   The column gap comes from the flex gap token — no hand-tuned margins. */
.hero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-sm)}
/* Signature halo remains, but the journey is supporting evidence beside the plan. */
.hero>svg{width:128px;height:128px;max-width:100%;
  filter:drop-shadow(0 0 16px var(--accent-soft-2))}
.hero .tier{font-size:var(--fs-body);color:var(--ink-muted)}
.hero .grow{display:inline-block;font-size:var(--fs-label);color:var(--status-good);background:var(--status-good-soft);border:1px solid var(--status-good-line);border-radius:999px;padding:8px 16px}
.hero .vitals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-xs);width:100%;margin-top:var(--space-2xs)}
/* justify-content:center vertically centers the label+value block in the grid-stretched
   box; .vk reserves 2 lines and bottom-aligns so a 1-line and a 2-line label leave the
   VALUE at the same height across all three vitals (was top-aligned + misaligned). */
.hero .vc{appearance:none;display:flex;flex-direction:column;justify-content:center;gap:var(--space-xs);align-items:center;text-align:center;padding:var(--space-md) var(--space-xs);min-height:94px;min-width:0;background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--radius-md);text-decoration:none;color:inherit;font:inherit}
.hero button.vc{width:100%;cursor:pointer}
.hero .vk{font:600 var(--fs-label)/1.35 var(--ui);text-transform:none;letter-spacing:var(--ls-label);color:var(--ink-muted);min-height:2.4em;display:flex;align-items:flex-end;justify-content:center}
.hero .vv{font:800 var(--fs-stat)/1 var(--ui);color:var(--ink)}
/* Inner KPI grids wrap by content (auto-fit) instead of forcing N columns — stops the
   cramped/clipped KPIs (e.g. Cadencia) when a card is narrow. */
.grid{display:grid;gap:var(--space-md)}.g2{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}.g3{grid-template-columns:repeat(auto-fit,minmax(104px,1fr))}.g4{grid-template-columns:repeat(auto-fit,minmax(112px,1fr))}
/* Today is the command surface: the plan owns two thirds of the canvas and the
   supporting journey/curriculum rail stays compact and intrinsically tall. */
.grid.act{display:grid;grid-template-columns:minmax(0,2fr) minmax(320px,1fr);
  align-items:start;gap:var(--space-md)}
.act>.card{min-width:0}
.act>.qcard{grid-column:1}
.act>.rail{grid-column:2;min-width:0;display:flex;flex-direction:column;
  gap:var(--space-md)}
/* Shared split-layout primitive for WIDE cards: content halves sit side by side on a
   roomy row and stack cleanly on narrow screens. Not a component — a layout recipe. */
.card-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:var(--space-sm) var(--space-2xl);align-items:start}
.card-cols>div{min-width:0}
.card-cols>div>.sec2:first-child{margin-top:0}
.market-context-scales{align-items:start;margin-top:var(--space-lg)}
.stripcap{margin:var(--space-xs) 0 var(--space-md)}
@media(max-width:560px){
  .g4{grid-template-columns:repeat(2,1fr)}
  .g3{grid-template-columns:1fr 1fr}
  .g3>.kpi:last-child:nth-child(odd){grid-column:1/-1}
  /* El carril de pestañas sabe encogerse (overflow-x con máscaras), pero el
     bloque de utilidades pedía max-content y vive FUERA de ese carril, así que
     sus 479 px arrastraban la página entera. Medido: a 556 px no desborda, a
     476 sí (67 px) y a 396 px son 147. Por debajo del punto de ruptura baja a
     su propia fila, que deja idioma y tema accesibles sin scroll lateral. */
  .app-nav{grid-template-columns:auto minmax(0,1fr);
    grid-template-areas:"brand track" "util util";
    row-gap:var(--space-sm);column-gap:var(--space-md)}
  .app-nav-util{min-width:0;flex-wrap:wrap;justify-content:flex-start;
    gap:var(--space-sm)}
}
.kpi{background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-md) var(--space-sm);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;min-height:96px}
button.kpi{appearance:none;width:100%;color:inherit;font:inherit;cursor:pointer}
.kpi .v{font:800 var(--fs-stat)/1.15 var(--ui)}
.kpi .l{font-size:var(--fs-label);color:var(--ink-muted);letter-spacing:var(--ls-label);margin-top:7px;font-weight:600}
.kpi .x{font-size:var(--fs-label);color:var(--ink-faint);margin-top:4px}
/* Fact box (factBox component): left-aligned label + value cell for the detail modals. */
.fact{background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-sm) var(--space-md);display:flex;flex-direction:column;align-items:stretch;text-align:left}
.fact .l{font-size:var(--fs-label);color:var(--ink-muted);letter-spacing:var(--ls-label);font-weight:600}
.fact .fv{font-size:var(--fs-title);font-weight:600;margin-top:5px;color:var(--ink)}
.grow-c{color:var(--status-good)}.neu-c{color:var(--ink)}.sub-c{color:var(--ink-muted)}
.arw{display:inline-block;vertical-align:middle;margin:0 7px;color:var(--ink-faint);opacity:.8}
.bar{margin-bottom:12px}.bar:last-child{margin-bottom:0}
.bar .lab{display:flex;justify-content:space-between;font-size:var(--fs-label);margin-bottom:6px}
.bar .lab b{font-weight:600}.bar .lab span{color:var(--ink-muted);font-family:var(--ui);font-size:var(--fs-label)}
.track{height:5px;background:var(--track);border-radius:99px;overflow:hidden}
.fill{height:100%;border-radius:99px;transition:width .45s cubic-bezier(.3,0,.2,1)}
.pat{display:flex;align-items:center;gap:8px;padding:5px 0}
.pat .n{width:150px;font-size:var(--fs-label);color:var(--ink-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pat .pb{flex:1;height:5px;background:var(--track);border-radius:99px;overflow:hidden;position:relative}
.pat .pf{height:100%;border-radius:99px}
.pat .pg{font:600 var(--fs-label)/1 var(--ui);padding:4px 7px;border-radius:4px;white-space:nowrap;min-width:88px;text-align:center;flex-shrink:0}
/* segmented 4-stage stepper (UNTOUCHED→DEVELOPING→GRADUATED→MASTERED) — a ladder,
   not a % bar, so fill never contradicts the % coverage label. */
.steps{flex:1;display:flex;gap:3px}
.seg{flex:1;height:9px;border-radius:3px;background:var(--track)}
.patrow{display:flex;flex-direction:column;gap:3px;padding:7px 0;border-bottom:1px solid var(--border)}
.patrow:last-child{border:none}
.patrow .top{display:flex;align-items:center;gap:8px}
.patrow .nm{width:160px;font-size:var(--fs-label);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.patrow .pattern-meta{display:flex;flex-wrap:wrap;gap:var(--space-2xs) var(--space-lg);
  margin-top:var(--space-2xs);color:var(--ink-faint);font-size:var(--fs-label)}
.patrow .pattern-stage{flex-shrink:0;white-space:nowrap;color:var(--ink-muted);
  font:600 var(--fs-label)/1 var(--ui)}
.spark{display:flex;align-items:flex-end;gap:3px;height:46px;margin-top:6px}
.spark i{flex:1;background:var(--status-good);border-radius:2px 2px 0 0;min-width:4px;opacity:.85}
.nt{font-size:var(--fs-label);color:var(--ink-faint);margin-top:12px;line-height:1.55}
.solve{display:flex;align-items:center;gap:8px;font-size:var(--fs-label);padding:4px 0;border-bottom:1px solid var(--border)}
.solve .dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.solve .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.solve .meta{color:var(--ink-faint);font-family:var(--ui);font-size:var(--fs-label)}
/* listRow (rich, stacked variant): dot top-aligned, name stacked over meta, optional trailing. */
.solve.lr-row{align-items:flex-start;gap:10px;text-decoration:none}
.solve.lr-row .dot{margin-top:5px}
.lr-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.lr-main .nm{flex:0 1 auto;color:var(--ink);overflow:visible;white-space:normal;overflow-wrap:anywhere;line-height:var(--lh-snug)}
.lr-tr{flex-shrink:0;font:600 var(--fs-label)/1 var(--ui);color:var(--ink-muted);align-self:center}
/* sectionLabel (atom): subheader inside detail modals (unifies the two drifted sec2()s). */
.sec2{font:600 var(--fs-label)/1 var(--ui);letter-spacing:var(--ls-label);text-transform:none;color:var(--ink-muted);margin:26px 0 11px}
/* roleRow (organism): an open-role row in the company modal. */
.rolerow{padding:14px 0;border-bottom:1px solid var(--border)}
.rolerow-hd{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px}
.rolerow-title{display:inline-flex;align-items:center;min-height:var(--control-target);font:600 var(--fs-body)/1.35 var(--ui);color:var(--accent);text-decoration:none}
.rolerow-meta{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--space-xs);
  flex-shrink:0;color:var(--ink-muted);font:400 var(--fs-label)/var(--lh-snug) var(--ui);text-align:right}
.rolerow-meta-item+.rolerow-meta-item{padding-left:var(--space-xs);border-left:1px solid var(--border)}
.rolerow-bars{display:flex;gap:20px}
.rolerow-because{margin-top:9px}
/* profileBar (molecule): a ranked dimension bar in the company modal. */
.profbar-row{margin-bottom:13px}
.profbar-hd{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.profbar-lab{font:600 var(--fs-label)/1.2 var(--ui);color:var(--ink)}
.profbar-pct{font:600 var(--fs-label)/1 var(--ui);color:var(--accent)}
/* History timeline — direct, localized labels in the document flow; no colour legend. */
.history-timeline{min-width:0}
.tlwrap{min-width:0;margin-top:var(--space-xs);padding-top:var(--space-2xs)}
.tlhead{margin:var(--space-xl) 0 var(--space-2xs);padding-top:var(--space-lg);border-top:1px solid var(--border)}
.tlhead h4{margin:0;color:var(--ink);font:600 var(--fs-title)/var(--lh-snug) var(--ui)}
.tl{position:relative;min-width:0;margin-top:8px}
.tlday{position:relative;min-width:0;padding-inline-start:var(--space-lg);margin-bottom:24px}
.tlday::before{content:"";position:absolute;left:6px;top:16px;bottom:-24px;width:2px;background:var(--border)}
.tlday:last-child::before{display:none}
.tlnode{position:absolute;left:0;top:2px;width:13px;height:13px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--surface)}
.tlh{display:flex;align-items:baseline;gap:9px;margin-bottom:8px}
.tlh .d{font:600 var(--fs-body)/1 var(--ui);color:var(--ink)}
.tlh .w{font:400 var(--fs-label)/1 var(--ui);color:var(--ink-faint);text-transform:none}
.tlh .c{margin-left:auto;font:400 var(--fs-label)/1 var(--ui);color:var(--ink-faint)}
.tlrow{appearance:none;display:grid;width:100%;min-width:0;min-height:44px;
  grid-template-columns:minmax(0,.45fr) minmax(0,1.6fr) minmax(0,.5fr) minmax(0,.8fr);
  grid-template-areas:"difficulty name kind meta";align-items:center;gap:var(--space-sm);
  padding:var(--space-xs) var(--space-sm);border:0;border-bottom:1px solid var(--border);
  border-radius:var(--radius-sm);background:transparent;
  color:inherit;text-align:left;font:inherit;cursor:pointer;
  transition:background var(--motion-fast) var(--ease-standard)}
.tlrow:hover,.tlrow:focus-visible{background:var(--surface-raised)}
.tlrow .tl-difficulty{grid-area:difficulty;color:var(--ink-muted);
  font:400 var(--fs-label)/var(--lh-snug) var(--ui)}
.tlrow .nm{grid-area:name;min-width:0;font:600 var(--fs-body)/1.3 var(--ui);
  color:var(--ink);white-space:normal;overflow-wrap:anywhere}
.tlrow .tl-kind{grid-area:kind;color:var(--ink-muted);font:400 var(--fs-label)/var(--lh-snug) var(--ui)}
.tlrow .tl-meta{grid-area:meta;display:flex;align-items:center;justify-content:flex-end;
  gap:var(--space-sm);min-width:0;color:var(--ink-muted);font:400 var(--fs-label)/var(--lh-snug) var(--ui)}
.tl-meta-item+.tl-meta-item{padding-left:var(--space-sm);border-left:1px solid var(--border)}
.tl-outcome{color:var(--ink)}
@media(max-width:560px){
  .tlh{flex-wrap:wrap}
  .tlh .c{flex-basis:100%;margin-left:0}
  .tlrow{grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"name name" "difficulty kind" "meta meta";align-items:start;
    row-gap:var(--space-xs)}
  .tlrow .tl-meta{justify-content:flex-start;flex-wrap:wrap}
}
.toggle{appearance:none;display:inline-flex;align-items:center;min-height:var(--control-target);padding:0;border:0;background:transparent;font:600 var(--fs-label)/1.3 var(--ui);color:var(--accent);cursor:pointer;user-select:none}
.tag{display:inline-block;font:600 var(--fs-label)/1 var(--ui);padding:3px 6px;border-radius:4px;margin-left:6px}
/* ── Info dialog (WP3): readable measure, calm rhythm, ZERO per-section colour. ── */
.hl{max-width:680px;margin:0 auto}
.hl-lead{font-size:var(--fs-title);line-height:1.65;color:var(--ink);margin-bottom:var(--space-lg)}
.hl-h{font:600 var(--fs-label)/1 var(--ui);letter-spacing:var(--ls-label);color:var(--ink-muted);margin:var(--space-lg) 0 var(--space-xs)}
.hl-note{font-size:var(--fs-label);color:var(--ink-faint);line-height:1.5;margin-top:var(--space-xs)}
/* Variable glossary: a clean 2-col grid (symbol · meaning), not ad-hoc flex rows. */
.hl-gloss{display:grid;grid-template-columns:40px 1fr;gap:7px 12px;margin-top:var(--space-sm)}
.hl-gloss .hl-sym{color:var(--accent);font-size:var(--fs-label);line-height:1.5}
.hl-gloss .hl-desc{color:var(--ink-muted);font-size:var(--fs-label);line-height:1.5}
.hl-gloss .hl-typ{color:var(--ink-faint)}
/* 2×2 framing grid — uncoloured cards (lee / bueno / importa / engaña). The scale
   graphic is the modal's only colour; these read as one calm, even set. */
.hl-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-sm);margin-top:var(--space-lg)}
.hl-flow-grid{margin-top:var(--space-sm)}
.hl-fc{background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--radius-sm);padding:13px 15px}
.hl-fk{font:600 var(--fs-label)/1 var(--ui);letter-spacing:var(--ls-label);color:var(--ink-muted);margin-bottom:7px}
.hl-ft{font-size:var(--fs-body);line-height:1.55;color:var(--ink)}
.hl-src{color:var(--ink-faint);font-size:var(--fs-label);margin-top:var(--space-lg)}
@media(max-width:560px){.hl-grid{grid-template-columns:1fr}}
/* Shared authored-LaTeX surface. MathJax draws local SVG; the host owns the
   accessible spoken reading and keeps every expression independently scrollable. */
.math-expression{display:inline-flex;align-items:center;min-width:0;
  max-width:100%;vertical-align:middle;color:inherit}
.math-expression mjx-container{margin:0!important;max-width:100%;
  color:inherit;overflow-x:auto;overflow-y:hidden}
.math-expression svg{display:block;max-width:100%;height:auto}
.math-fallback,
.lesson-page code.math-fallback{display:inline-block;min-width:0;max-width:100%;
  padding:0;background:transparent;color:inherit;
  white-space:normal;overflow-wrap:anywhere}
.fml{display:grid;gap:var(--space-xs);background:var(--surface-raised);
  border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:15px 18px;margin:2px 0 4px;overflow-x:auto}
.fml .math-expression{font-size:var(--fs-headline)}
/* One quiet context line per card (never a paragraph, never inside a metric box). */
.cap1{font-size:var(--fs-label);color:var(--ink-faint);line-height:1.5;margin-top:12px}
/* The same quiet line when it LEADS a list: it sits under .sub, so it needs less air
   above and more below, to separate the count from the rows it counts. */
.cap1.lead{margin:2px 0 14px}
/* Shared horizontal comparison row. Named slots let the narrow layout place label/value
   above a full-width track instead of squeezing fixed-width columns past the card edge. */
.bar-row{display:flex;align-items:center;min-width:0}
.bar-row-label{font-size:var(--fs-label);line-height:var(--lh-snug);color:var(--ink-muted);flex-shrink:0}
.bar-row-value{font-size:var(--fs-label);font-weight:600;text-align:right;flex-shrink:0;color:var(--ink)}
.fsrs-kpis{margin-block-start:var(--space-xs)}
.fsrs-bins{margin-block:var(--space-md)}
.fsrs-bins .bar-row{display:grid;
  grid-template-columns:max-content minmax(var(--space-3xl),1fr) max-content;
  column-gap:var(--space-sm);align-items:center}
.fsrs-bins .bar-row-value{white-space:nowrap}
.fsrs-notes{display:flex;flex-direction:column;gap:var(--space-2xs)}
/* Review names are decision-relevant content, never an ellipsis-only decoration. */
.retention-calibration{display:grid;gap:var(--space-sm);margin-top:var(--space-lg)}
.retention-calibration-row{min-width:0}

/* ════════════════════════════════════════════════════════════════════════════
   MOTION (WP9) — restrained per the Calm-Analytic brief: ONE micro-interaction
   (press feedback) + ONE signature moment (the FIRST-PAINT staggered card reveal
   below). No scroll/parallax and no replay-on-toggle reveals (anti-calm for an
   ADHD user): the reveal is gated behind the one-shot `#app.boot-reveal` class that
   render() sets only on the first paint, so a theme/locale/tab toggle never
   re-runs it. All of it is killed by the global prefers-reduced-motion block above.
   ════════════════════════════════════════════════════════════════════════════ */
.tlrow:active,.corow:active,.solve:active,.theme-tg:active,.info:active,
.btn-link:active,.kpi[role="button"]:active,[data-co]:active,.toggle:active{transform:scale(.985)}
/* Signature moment: the first paint reveals visible cards as one coordinated beat.
   The 72% start preserves immediate legibility while the quiet 4px rise resolves;
   reduced-motion still degrades to instant, fully visible content. */
@keyframes card-enter{from{opacity:.72;transform:translateY(4px)}to{opacity:1;transform:none}}
#app.boot-reveal .panel.on .card{animation:card-enter var(--motion-slow) var(--ease-standard) backwards}
#app.boot-reveal .panel.on .rail>.card:nth-child(1),#app.boot-reveal .panel.on .block>.card:nth-child(3),
#app.boot-reveal .panel.on .analytic-stack>.card:nth-child(2){animation-delay:60ms}
#app.boot-reveal .panel.on .rail>.card:nth-child(2),#app.boot-reveal .panel.on .block>.card:nth-child(4),
#app.boot-reveal .panel.on .analytic-stack>.card:nth-child(3){animation-delay:120ms}
#app.boot-reveal .panel.on .block>.card:nth-child(n+5),#app.boot-reveal .panel.on .analytic-stack>.card:nth-child(n+4){animation-delay:180ms}

/* ════════════════════════════════════════════════════════════════════════════
   TREND / STANDOUT ROWS (reorg 2026-07-10) — the wide ledger boards are RETIRED;
   trend rows now live inside compact CARDS (2-3 per row). One trendRow look
   everywhere: label + window caption on the first line, base→now pair + signed
   delta beneath, explicit status text and optional taxonomy tags trailing. Tokens only;
   direction colour = improvement roles (good / calm route, never alarm, R14).
   ════════════════════════════════════════════════════════════════════════════ */
.trow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--border)}
.trow:last-child{border-bottom:0}
.trow .tr-lab{grid-column:1/-1;font:600 var(--fs-body)/1.35 var(--ui);color:var(--ink)}
.trow .tr-pair{display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-body);color:var(--ink-muted);white-space:nowrap;min-width:0}
.trow .tr-pair b{font-weight:600}
.tr-win{display:block;font:400 var(--fs-label)/1.4 var(--ui);color:var(--ink-faint);margin-top:1px}
.trow .tr-delta{font-size:var(--fs-label);text-align:right;white-space:nowrap}
.trow .tr-chips{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:5px}
.trow .tr-chips:empty{display:none}
/* Event detail uses one neutral textual hierarchy. Difficulty, outcome, ladder
   position, patterns, and defense metadata never introduce categorical colour
   or pill geometry that would imply an undocumented legend. */
.event-detail-meta{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-xs) var(--space-sm);margin-bottom:var(--space-lg);font:600 var(--fs-label)/1.45 var(--ui);color:var(--ink-muted)}
.event-detail-meta-item+.event-detail-meta-item{border-inline-start:1px solid var(--border-strong);padding-inline-start:var(--space-sm)}
.event-detail-next-date{font:800 var(--fs-headline)/1 var(--ui);color:var(--ink)}
.event-detail-ladder-rung{padding:var(--space-xs) 0;border-bottom:1px solid var(--border)}
.event-detail-ladder-rung:last-child{border-bottom:0}
.event-detail-ladder-copy{font-size:var(--fs-body);line-height:1.55;color:var(--ink)}
.event-detail-ladder-rung.is-current .event-detail-ladder-copy{font-weight:600}
.event-detail-ladder-copy strong{font-weight:600;color:var(--ink-muted)}
.event-detail-list{margin:0;padding-inline-start:var(--space-lg);color:var(--ink)}
.event-detail-list li{padding:var(--space-xs) 0;font-size:var(--fs-body);line-height:1.6;border-bottom:1px solid var(--border)}
.event-detail-list li:last-child{border-bottom:0}
.event-detail-patterns{max-width:42rem}
/* Event-modal defense block (the coaching round, rendered structured — the
   '[object Object]' fix, 2026-06-11). */
.dfu{margin-bottom:10px}
.dfu-q{font-size:var(--fs-body);line-height:1.6;color:var(--ink)}
.dfu-a{display:flex;align-items:center;gap:8px;margin-top:2px;flex-wrap:wrap}
.dfu-rubric{border-inline-start:1px solid var(--border-strong);padding-inline-start:var(--space-xs);color:var(--ink-muted)}
.dflocs{display:flex;flex-wrap:wrap;gap:16px 30px;margin:6px 0 10px}
.anlever{margin-top:6px}
/* Calibration extras (BSS + self-report anchor) read as quiet caption lines. */
/* ════════════════════════════════════════════════════════════════════════════
   "HOY" QUEST CARD (redesign 2026-07-05, quest-v3 direction) — date header +
   tracks-done mini ring + segmented level rail + state-railed track rows.
   States are calm tokens (key = accent wash · open = neutral · wait = dashed ·
   done = good) — never an alarm (R14). The staggered fade-up reveal is the
   page's one signature motion moment (transform/opacity only, ease-out,
   reduced-motion degrades to instant).
   ════════════════════════════════════════════════════════════════════════════ */
.qcard .qhead{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:6px}
.qcard .qdate{font:600 var(--fs-label)/1.2 var(--ui);color:var(--ink-faint);letter-spacing:var(--ls-label);text-transform:none}
.qcard .qtitle{font:600 var(--fs-headline)/1.2 var(--ui);color:var(--ink);margin-top:2px}
.qcard .qring{display:flex;align-items:center;gap:10px;flex-shrink:0}
.qcard .qringlab{text-align:right;font-size:var(--fs-label);color:var(--ink-muted);line-height:1.35;max-width:130px}
.qrail{display:flex;align-items:center;gap:8px;margin:10px 0 16px}
/* The absorbed daily-floor line (ex floor card): calm pill + its note. */
.qfloor{display:flex;align-items:center;gap:10px;margin:0 0 12px;flex-wrap:wrap}
.qrail .lv{font:600 var(--fs-label)/1 var(--ui);color:var(--ink-muted);white-space:nowrap}
.qrail .segs{display:flex;gap:3px;flex:1;min-width:0}
.qrail .segs i{height:5px;flex:1;border-radius:3px;background:var(--track)}
.qrail .segs i.on{background:var(--accent)}
.qrail .pct{font-size:var(--fs-label);color:var(--ink-faint);white-space:nowrap}
.qt{appearance:none;display:grid;width:100%;grid-template-columns:3px 1fr auto;gap:0 12px;align-items:center;border-radius:var(--radius-md);margin-bottom:8px;padding:12px 12px 12px 0;background:var(--surface);border:1px solid var(--border);color:inherit;font:inherit;text-align:left}
button.qt{cursor:pointer}
.qt .qtbar{width:3px;height:100%;min-height:44px;border-radius:2px;background:var(--border)}
.qt.qt-key{background:var(--accent-soft);border-color:var(--accent-line)}
.qt.qt-key .qtbar{background:var(--accent)}
.qt.qt-wait{border-style:dashed}
.qt.qt-done .qtbar{background:var(--status-good)}
.qtb{min-width:0;padding-left:11px}
.qtt{font:600 var(--fs-body)/1.3 var(--ui);color:var(--ink)}
.qtu{color:var(--ink-muted);font-size:var(--fs-body);margin-top:1px;
  white-space:normal;overflow-wrap:anywhere}
.qtw{color:var(--ink-faint);font-size:var(--fs-label);margin-top:3px}
.qtchip{font:600 var(--fs-label)/1 var(--ui);padding:4px 11px;border-radius:999px;white-space:nowrap;margin-right:12px;background:var(--surface-raised);color:var(--ink-muted);border:1px solid var(--border)}
.qt-key .qtchip{display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;font:600 var(--fs-body)/1 var(--ui);
  padding:var(--space-xs) var(--space-md);background:var(--accent);
  color:var(--on-accent);border-color:var(--accent)}
.qt-wait .qtchip{background:transparent;color:var(--ink-faint);border-style:dashed}
.qt-done .qtchip{background:var(--status-good-soft);color:var(--status-good);border-color:var(--status-good-line)}
.qfoot{display:flex;justify-content:space-between;gap:8px 14px;margin-top:14px;font-size:var(--fs-label);color:var(--ink-faint);flex-wrap:wrap}
/* Review queue: direct labels make difficulty and pattern independent of colour. */
.qrow{display:flex;align-items:center;gap:10px;padding:9px 6px;border-radius:var(--radius-sm);text-decoration:none;color:inherit}
a.qrow{min-height:var(--control-target)}
.qrow:hover{background:var(--surface-hover)}
.qrow .nm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:600 var(--fs-body)/1.3 var(--ui);color:var(--ink)}
.qrow .qr-difficulty,.qrow .qr-pattern{font-size:var(--fs-label);color:var(--ink-muted)}
.qrow .qr-pattern{max-width:18rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qrow .qr-meta{font-family:var(--ui);font-size:var(--fs-label);color:var(--ink-faint);white-space:nowrap}

/* ════════════════════════════════════════════════════════════════════════════
   RESPONSIVE (WP8) — the dashboard's #1 reported defect was "bad on phone".
   A dedicated narrow band: shrink the page gutter, let the hero vitals reflow,
   make the tab strip scroll instead of wrap into a wall, and unpin fixed-px
   columns so long ES labels don't clip. Touch targets ≥24px on coarse pointers.
   ════════════════════════════════════════════════════════════════════════════ */
@media(pointer:coarse){
  .info{width:44px;height:44px}
  .theme-tg{min-height:44px}
  .tlrow{padding:11px}
  /* Text-link affordances (~17px tall on desktop) get padding to a >=24px hit area. */
  .toggle,.lnk2{display:inline-block;padding:7px 2px;margin:-3px 0}
  .toggle{min-height:44px}
}
@media(max-width:960px){
  .app-nav{top:calc(-1 * (var(--space-3xl) + var(--space-lg)));
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"brand util" "track track";gap:var(--space-xs) var(--space-sm)}
  .app-nav-track{width:100%}
  .grid.act{grid-template-columns:1fr}
  .act>.qcard,.act>.rail{grid-column:1}
}
@media(max-width:430px){
  .wrap{padding:0 var(--space-sm) var(--space-3xl)}
  .view-head{margin-bottom:var(--space-lg);padding-top:var(--space-md)}
  .view-head-title{font-size:var(--fs-stat)}
  .view-head p{font-size:var(--fs-body)}
  .hero{padding:28px 6px 24px}
  .hero .vitals{grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:10px;margin-top:22px}
  .hero .vv{font-size:var(--fs-headline)}
  .modal{padding:0;border-radius:14px}
  .modal .mh{padding:var(--space-lg) 76px var(--space-sm) var(--space-lg)}
  .modal .cl{top:var(--space-sm);right:var(--space-sm)}
  #modalBody{padding:0 var(--space-lg) var(--space-lg)}
  .ov{padding:20px 10px}
  .qrow{display:grid;grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"name name" "difficulty meta" "pattern pattern";align-items:start;
    column-gap:var(--space-xs);row-gap:var(--space-2xs)}
  .qrow .nm{grid-area:name;white-space:normal;overflow:visible;text-overflow:clip}
  .qrow .qr-difficulty{grid-area:difficulty}
  .qrow .qr-pattern{grid-area:pattern;min-width:0;max-width:100%;
    white-space:normal;overflow-wrap:anywhere;line-height:var(--lh-snug)}
  .qrow .qr-meta{grid-area:meta}
  .app-nav-track{padding-inline:var(--space-xs);scroll-padding-inline:var(--space-xs);
    scroll-snap-type:x proximity;-webkit-mask-image:none;mask-image:none}
  .app-nav-link{justify-content:center;min-width:44px;padding:var(--space-sm);
    scroll-snap-align:center}
  .app-nav-items{gap:var(--space-3xs)}
  .app-nav-label{display:inline}
  .app-nav-link[aria-current="page"]{gap:var(--space-xs);padding-inline:var(--space-sm)}
  .app-nav-link[aria-current="page"] .app-nav-label{display:inline}
  /* One monotonic mobile recipe: text and its action never compete for a row. */
  .qt{grid-template-columns:3px minmax(0,1fr);
    grid-template-areas:"rail body" "rail chip";align-items:start;row-gap:var(--space-xs)}
  .qt .qtbar{grid-area:rail}
  .qtb{grid-area:body}
  .qtchip{grid-area:chip;justify-self:start;margin:0 0 0 var(--space-sm)}
  .dashboard-app .qt-key .qtchip{max-width:100%;white-space:normal;text-align:center;
    line-height:var(--lh-snug);overflow-wrap:anywhere}
  /* Unpin fixed-px text columns so long (ES) labels wrap/shrink instead of clipping. */
  .pat .n{width:auto;min-width:108px;flex:1}
  .patrow .top{display:grid;grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"name name" "steps status";gap:var(--space-xs)}
  .patrow .nm{grid-area:name;width:auto;min-width:0;white-space:normal;
    overflow:visible;text-overflow:clip;line-height:var(--lh-snug)}
  .patrow .steps{grid-area:steps;min-width:0}
  .patrow .pattern-stage{grid-area:status}
  .patrow .pattern-meta{padding-left:0}
  /* minmax grids: never force a track wider than the viewport. */
  .corows{grid-template-columns:minmax(0,1fr);min-width:0}
  .corow{min-width:0}
  .corow .chr{display:flex;flex-wrap:wrap;min-width:0;line-height:var(--lh-snug);
    overflow-wrap:anywhere}
  .invgrid{grid-template-columns:1fr}
  .block>.card{flex-basis:100%}
  .info{width:44px;height:44px}
  .toggle{min-height:44px}
  .bar-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center}
  .bar-row-label{width:auto!important;min-width:0;overflow-wrap:anywhere}
  .bar-row-value{width:auto!important}
  .bar-row>.track,.bar-row>.mtrack{grid-column:1/-1;grid-row:2}
  .fsrs-bins .bar-row{grid-template-columns:minmax(0,1fr) minmax(0,55%);
    row-gap:var(--space-2xs)}
  .fsrs-bins .bar-row-value{max-width:none;white-space:normal;overflow-wrap:anywhere}
}

/* 2-column block (skills/map tab, Raúl 2026-07-11): wider basis so dense cards breathe —
   two per row on desktop, one on narrow. */
.b2>.card{flex:1 1 46%;min-width:340px}
/* Narrow (GLM, issue 717 round 4): the base .b2 rule sits after the 430px media block, so it
   would win the cascade and its min-width:340px reopens the h-scroll trap on <365px viewports —
   restore full-width stacking + min-width:0 below the same breakpoint. */
@media(max-width:430px){.b2>.card{flex-basis:100%;min-width:0}}

/* ── Lesson surface ─────────────────────────────────────────────────────────
   The generated lessons are a dashboard view, not a second design system. These
   component-local aliases point at Cadence semantic tokens; light/dark values remain
   owned exclusively by the theme blocks above. */
.lesson-page{
  --cool:var(--role-developing);
  --cool-soft:color-mix(in srgb,var(--role-developing) 12%,transparent);
  --cool-edge:color-mix(in srgb,var(--role-developing) 30%,transparent);
  --hot:var(--role-mastered);
  --hot-soft:color-mix(in srgb,var(--role-mastered) 12%,transparent);
  --hot-edge:color-mix(in srgb,var(--role-mastered) 30%,transparent);
  --delta:var(--role-mastered);
  --delta-soft:color-mix(in srgb,var(--role-mastered) 12%,transparent);
  --delta-edge:color-mix(in srgb,var(--role-mastered) 30%,transparent);
}
.boot{grid-column:1/-1}
.load-error{grid-column:1/-1}
.boot,.load-error{display:flex;align-items:center;
  justify-content:center;min-height:100vh;width:100%;padding:var(--space-xl);
  color:var(--ink-muted);text-align:center;font-weight:600;
  letter-spacing:var(--ls-label)}
.lesson-skip{position:fixed;left:var(--space-md);top:var(--space-md);z-index:300;
  transform:translateY(-200%);background:var(--surface);color:var(--ink);
  border:1px solid var(--accent);border-radius:var(--radius-sm);
  padding:var(--space-sm) var(--space-md);font-weight:600}
.lesson-skip:focus{transform:none}
.lesson-page .app-nav{position:relative;top:auto;height:auto;display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  grid-template-areas:"brand track util";align-items:center;gap:var(--space-lg);
  width:min(calc(var(--app-shell-max) - 2 * var(--app-shell-gutter)),
  calc(100% - 2 * var(--app-shell-gutter)));margin:32px auto 26px;
  padding:0;border-right:0;border-bottom:1px solid var(--border)}
.lesson-page .app-nav-track{width:100%;overflow-x:auto;overflow-y:hidden;
  padding:0 var(--space-xs)}
.lesson-page .app-nav-items{flex-direction:row;align-items:stretch;width:auto;
  min-width:max-content}
.lesson-page .app-nav-link{width:auto;border-inline-start:0;
  border-bottom:2px solid transparent;border-radius:var(--radius-sm) var(--radius-sm) 0 0}
.lesson-page .app-nav-link[aria-current="page"]{border-bottom-color:var(--accent)}
.lesson-page .app-nav-util{flex-direction:row;align-items:center;min-width:max-content;
  padding-top:0;border-top:0}
.lesson-page .theme-tg{align-self:center;width:auto;min-height:44px}
@media(max-width:960px){
  .lesson-page .app-nav{grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"brand util" "track track";gap:var(--space-xs) var(--space-sm)}
  .lesson-page .app-nav-track{width:100%}
}
.lesson-shell{width:min(1480px,100%);margin:0 auto;padding:var(--space-3xl)
  clamp(var(--space-lg),4vw,var(--space-3xl)) 8rem;display:flex;
  flex-direction:column;gap:var(--space-3xl);font-size:var(--fs-title);
  line-height:1.72;min-width:0}
.lesson-page .lesson-shell:focus-visible{outline:2px solid var(--accent);
  outline-offset:4px}
.lesson-page h1,.lesson-page h2,.lesson-page h3,.lesson-page h4{margin:0}
.lesson-page h1{font:800 var(--fs-display)/var(--lh-tight) var(--ui);text-wrap:balance}
.lesson-page h2{font:600 var(--fs-headline)/var(--lh-snug) var(--ui);text-wrap:balance}
.lesson-page h3{font:600 var(--fs-title)/var(--lh-snug) var(--ui);text-wrap:balance}
.lesson-page p{margin:0}
.lesson-page .sub{color:var(--ink-muted);font-size:var(--fs-body);
  margin-top:var(--space-sm);max-width:76ch;text-wrap:wrap;hyphens:none}
.lesson-page .lede{color:var(--ink-muted);max-width:72ch;font-size:var(--fs-title);line-height:1.72}
.lesson-page .lesson-shell>section.lesson-head{gap:var(--space-md)}
.lesson-page .lesson-head>.sub{margin:0}
.lesson-page .lesson-head-meta-list{display:flex;flex-wrap:wrap;
  gap:var(--space-xs) var(--space-lg);margin:0;padding:0;list-style:none}
.lesson-page .lesson-head-meta{padding-inline-start:var(--space-sm);
  border-inline-start:1px solid var(--border-strong);color:var(--ink-muted);
  font:600 var(--fs-label)/var(--lh-snug) var(--ui)}
.lesson-page .lesson-shell>section{display:flex;flex-direction:column;
  gap:var(--space-lg);min-width:0}
.lesson-page .eyebrow{display:flex;align-items:center;gap:var(--space-sm);
  font:600 var(--fs-label)/1.4 var(--ui);letter-spacing:var(--ls-label);color:var(--accent)}
.lesson-page .eyebrow::after{content:"";flex:1;height:1px;background:var(--border)}
.lesson-page h2.eyebrow{gap:0;font:600 var(--fs-headline)/var(--lh-snug) var(--ui);
  letter-spacing:normal;color:var(--ink);text-wrap:balance}
.lesson-page h2.eyebrow::after{display:none}
.lesson-page h3.tag{padding:0;border-radius:0;background:transparent;
  color:var(--ink);font:600 var(--fs-title)/var(--lh-snug) var(--ui);
  letter-spacing:normal}
.lesson-page .tag,.lesson-page .desc .h,.lesson-page .schema .h,
.lesson-page .delta .h,.lesson-page .live .h,.lesson-page .panel .plabel,
.lesson-page .vizbar .t,.lesson-page .note .k{
  font:600 var(--fs-label)/1.4 var(--ui);letter-spacing:var(--ls-label)}
.lesson-page .tag,.lesson-page .desc .h,.lesson-page .live .h,
.lesson-page .panel .plabel,.lesson-page .vizbar .t{color:var(--ink-faint)}
.lesson-page .panel .plabel{display:flex;align-items:center;flex-wrap:wrap;
  gap:var(--space-xs);min-width:0;line-height:1.4}
.lesson-page .panel .panel-symbol{flex:0 0 auto;padding:var(--space-3xs) var(--space-xs);
  font:600 var(--fs-label)/1.2 var(--mono);letter-spacing:0;color:var(--accent)}
.lesson-page code{font-family:var(--mono);background:var(--surface-raised);
  border-radius:var(--radius-sm);padding:var(--space-3xs) var(--space-xs);color:var(--ink)}
.lesson-page .card{box-shadow:var(--shadow);display:flex;flex-direction:column;gap:var(--space-sm)}

/* Lesson index: a broad responsive grid lets the 22 cards use the available canvas. */
.lesson-index{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));
  align-items:start;gap:var(--space-md)}
.lesson-index>h1,.lesson-index>.lede,.lesson-index>h2.sec,.lesson-index>.lesson-index-note{
  grid-column:1/-1}
.lesson-index>h2.sec{margin-top:var(--space-2xl)}
.lesson-page .lesson-index-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;gap:var(--space-lg);color:inherit;text-decoration:none;
  min-width:0;transition:transform .15s ease,border-color .15s ease,background .15s ease}
.lesson-index-card:hover{transform:translateY(-2px);border-color:var(--accent);
  background:var(--surface-hover)}
.lesson-index-number{color:var(--accent);min-width:3ch;text-align:right}
.lesson-index-body{min-width:0}
.lesson-index-body h3{font:600 var(--fs-title)/var(--lh-snug) var(--ui);margin-bottom:var(--space-xs)}
.lesson-index-body p{font-size:var(--fs-body);color:var(--ink-muted);line-height:var(--lh-body);
  margin-bottom:var(--space-sm)}
.lesson-index-body .chips{margin:0}
.lesson-card-action{font:600 var(--fs-label)/1 var(--ui);color:var(--ink-muted)}
.lesson-index-card:hover .lesson-card-action{color:var(--accent)}
.lesson-index-note{margin-top:var(--space-2xl);color:var(--ink-muted);line-height:var(--lh-body)}
.lesson-chip-rep{background:var(--role-developing)}
.lesson-chip-easy{background:var(--role-mature)}
.lesson-chip-medium{background:var(--role-developing)}
.lesson-chip-hard{background:var(--role-mastered)}
.lesson-chip-gap{background:var(--role-route)}

/* Bridge and transfer components. */
.lesson-page .bridge{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--space-lg);align-items:start}
.lesson-page .basecard{background:var(--surface);border:1px solid var(--border);
  border-top:3px solid var(--role-developing);border-radius:var(--radius);
  padding:var(--space-lg);box-shadow:var(--shadow);display:flex;flex-direction:column;
  gap:var(--space-sm);min-width:0}
.lesson-page .basecard .top{display:flex;justify-content:space-between;align-items:center;
  gap:var(--space-sm);flex-wrap:wrap}
.lesson-page .basecard .name{font:600 var(--fs-title)/1.3 var(--ui);color:var(--role-developing)}
.lesson-page .basecard .name code,.lesson-page .cmp .lbl code{
  padding:0;background:transparent;border-radius:0;color:inherit;font-size:inherit}
.lesson-page .basecard .time{font:600 var(--fs-label)/1 var(--ui);
  color:var(--role-developing);background:var(--cool-soft);border-radius:999px;
  padding:var(--space-2xs) var(--space-sm);white-space:nowrap}
.lesson-page .basecard .gives{font-size:var(--fs-body);color:var(--ink-muted)}
.lesson-page .mech{background:var(--surface-raised);border-radius:var(--radius-sm);
  padding:var(--space-sm) var(--space-lg);font:400 var(--fs-label)/1.8 var(--mono);
  letter-spacing:normal;white-space:pre;overflow-x:auto;color:var(--ink-muted);margin:0}
.lesson-page .bridge-summary{display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-md);
  border:0;border-radius:0;background:transparent;overflow:visible}
.lesson-page .bridge-summary .schema,.lesson-page .bridge-summary .delta{
  padding:var(--space-lg);display:flex;flex-direction:column;gap:var(--space-xs);
  min-width:0;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-sm)}
.lesson-page .bridge-summary .schema .h,
.lesson-page .bridge-summary .delta .h{color:var(--ink-muted)}
.lesson-page .bridge-summary .schema .body,
.lesson-page .bridge-summary .delta .body{
  font-size:var(--fs-title);line-height:var(--lh-body)}
.lesson-page .transfer-workbench{display:flex;flex-direction:column;gap:var(--space-sm);
  border:1px solid var(--border);border-radius:var(--radius);
  padding:var(--space-lg);background:var(--surface)}
.lesson-page .transfer-layout{display:grid;
  grid-template-columns:minmax(15rem,.72fr) minmax(0,1.28fr);
  gap:var(--space-lg);align-items:stretch}
.lesson-page .transfer-index{list-style:none;padding:0;margin:0;
  display:flex;flex-direction:column;gap:var(--space-xs)}
.lesson-page .transfer-index-item{max-width:none}
.lesson-page .transfer-index-trigger{width:100%;display:grid;
  grid-template-columns:2.2rem minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;gap:var(--space-xs);padding:var(--space-sm);
  text-align:left;background:transparent}
.lesson-page .transfer-index-trigger.active{background:var(--accent);
  border-color:var(--accent);color:var(--on-accent)}
.lesson-page .transfer-index-number{font:600 var(--fs-label)/1 var(--ui);
  color:var(--ink-faint)}
.lesson-page .transfer-index-trigger.active .transfer-index-number{color:inherit}
.lesson-page .transfer-index-from,.lesson-page .transfer-index-to{
  min-width:0;max-width:100%;white-space:normal;line-height:var(--lh-snug);
  overflow-wrap:break-word}
.lesson-page .transfer-index-arrow{display:block;
  width:1.25rem;height:.75rem;color:var(--ink-faint)}
.lesson-page .transfer-index-arrow path{fill:none;stroke:currentColor;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
  vector-effect:non-scaling-stroke}
.lesson-page .transfer-index-trigger.active .transfer-index-arrow{color:inherit}
.lesson-page .transfer-detail{display:flex;flex-direction:column;
  border:1px solid var(--border);border-radius:var(--radius-sm);
  background:var(--surface-raised);overflow:hidden}
.lesson-page .transfer-detail-content{display:flex;flex:1;flex-direction:column;
  min-width:0}
.lesson-page .transfer-pair{display:grid;
  grid-template-columns:minmax(0,1fr) 3.5rem minmax(0,1fr);
  align-items:stretch;gap:var(--space-xs);padding:var(--space-md)}
.lesson-page .transfer-side{display:flex;flex-direction:column;
  justify-content:center;gap:var(--space-xs);padding:var(--space-md);min-width:0;
  border:1px solid var(--border);border-radius:var(--radius-sm);
  background:var(--surface)}
.lesson-page .transfer-label{font:600 var(--fs-label)/1.4 var(--ui);
  color:var(--ink-muted)}
.lesson-page .transfer-value{font:600 var(--fs-title)/var(--lh-body) var(--ui);
  color:var(--ink);overflow-wrap:anywhere}
.lesson-page .transfer-why{display:flex;flex-direction:column;gap:var(--space-xs);
  padding:var(--space-md);border-top:1px solid var(--border);flex:1}
.lesson-page .transfer-detail-nav{display:flex;align-items:center;
  justify-content:space-between;gap:var(--space-sm);
  padding:var(--space-sm) var(--space-lg);border-top:1px solid var(--border)}
.lesson-page .transfer-detail-nav button{min-height:38px;padding:var(--space-xs) var(--space-sm)}
.lesson-page .transfer-progress{font:600 var(--fs-label)/1.4 var(--ui);
  color:var(--ink-faint);order:1}
.lesson-page .transfer-detail-nav button:first-child{order:0}
.lesson-page .transfer-detail-nav button:last-child{order:2}

/* Code comparison and interactive player organism. */
.lesson-page .cmp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-lg)}
.lesson-page .cmp .side{display:flex;flex-direction:column;gap:var(--space-sm);min-width:0}
.lesson-page .cmp .lbl{font:600 var(--fs-label)/1.4 var(--ui);
  color:var(--role-developing);display:flex;align-items:center;gap:var(--space-xs)}
.lesson-page .cmp .lbl.new{color:var(--role-mastered)}
.lesson-page .cmp .lbl::before{content:"";width:9px;height:9px;border-radius:3px;
  background:currentColor;flex:0 0 auto}
.lesson-page pre.snip{margin:0;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:var(--space-sm) 0;
  font:400 var(--fs-label)/1.95 var(--mono);letter-spacing:normal;overflow-x:auto}
.lesson-page pre.snip span{display:block;padding:0 var(--space-lg);
  border-left:3px solid transparent;white-space:pre}
.lesson-page pre.snip span.same{color:var(--ink-faint)}
.lesson-page pre.snip span.diff{background:var(--delta-soft);border-left-color:var(--delta);
  color:var(--ink);font-weight:600}
.lesson-page pre.snip span.diff.explained{box-shadow:inset 4px 0 0 var(--accent);
  background:var(--accent-soft-2)}
.lesson-page pre.snip span.diff.deemphasized{background:var(--surface-raised);
  border-left-color:var(--border);color:var(--ink-muted);font-weight:400}
.lesson-page .code-transfer-guide{display:flex;align-items:center;
  gap:var(--space-sm);padding:var(--space-sm);border:1px solid var(--border);
  border-radius:var(--radius);background:var(--surface)}
.lesson-page .code-transfer-guide>.tag{flex:0 0 auto}
.lesson-page .code-transfer-nav{display:flex;flex:1 1 auto;
  flex-wrap:wrap;gap:var(--space-xs);min-width:0}
.lesson-page .code-transfer-trigger{display:flex;align-items:center;
  justify-content:center;min-width:0;width:100%;text-align:center}
.lesson-page .code-transfer-trigger.active{background:var(--accent);
  border-color:var(--accent);color:var(--on-accent)}
.lesson-page .code-transfer-index{font:600 var(--fs-label)/1 var(--ui);
  color:var(--ink-muted);white-space:nowrap}
.lesson-page .code-transfer-trigger.active .code-transfer-index{color:inherit}
.lesson-page .player{position:relative;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);display:flex;flex-direction:column;min-width:0;
  container-name:lesson-player;container-type:inline-size}
/* `start`, not `stretch`: stretching padded the shorter column with nothing —
   a mean 213px of empty code pane across the 22 lessons, over 50% empty on six
   of them. The divider moves to the scene's leading edge, because the scene is
   the column that sets the row height, so the rule still spans it fully. */
.lesson-page .stage{display:grid;
  grid-template-columns:minmax(27rem,.62fr) minmax(44rem,1fr);
  align-items:start;gap:0;background:var(--surface);min-width:0}
.lesson-page .stage>cadence-algorithm-scene{align-self:stretch;
  border-left:1px solid var(--border)}
.lesson-page .pane{background:var(--surface);padding:var(--space-md);
  display:flex;flex-direction:column;gap:var(--space-sm);min-width:0;
  min-height:0;overflow:visible}
.lesson-page .algorithm-scene{
  min-width:0;min-height:0;height:100%;background:var(--surface)}
.lesson-page .scene-state{display:flex;flex-direction:column;gap:var(--space-sm);
  min-width:0;min-height:0;height:100%;padding:var(--space-md);background:var(--surface)}
.lesson-page .scene-state .viz{flex:1 1 auto}
.lesson-page .scene-memory{display:flex;flex-direction:column;min-width:0;
  border-left:1px solid var(--border);
  background:var(--surface)}
.lesson-page pre.code{margin:0;font:400 var(--fs-label)/1.65 var(--mono);
  overflow-x:auto;overflow-y:visible;
  width:calc(100% + 2 * var(--space-md));
  margin-inline:calc(-1 * var(--space-md));
  min-height:0;letter-spacing:normal}
.lesson-page pre.code .ln{display:grid;
  grid-template-columns:7px minmax(0,1fr);column-gap:var(--space-sm);
  align-items:start;
  padding:0 calc(var(--space-md) + var(--space-sm));
  border-left:3px solid transparent;color:var(--ink-faint)}
.lesson-page pre.code .ln.done{background:var(--status-good-soft);
  border-left-color:var(--status-good);color:var(--ink);font-weight:600}
.lesson-page pre.code .ln.next{background:var(--accent-soft);
  border-left-color:var(--accent);color:var(--ink)}
.lesson-page pre.code .ln::before{content:"";display:block;width:7px;height:7px;
  border-radius:50%;border:1px solid transparent;margin-top:.55em}
.lesson-page pre.code .ln.done::before{background:var(--status-good)}
.lesson-page pre.code .ln.next::before{border-color:var(--accent)}
.lesson-page .code-line-source{display:block;min-width:0;white-space:normal}
.lesson-page .code-line-source.has-comment{display:flex;flex-wrap:wrap;
  column-gap:1ch;row-gap:0}
.lesson-page .code-line-statement{display:block;flex:0 1 auto;
  --code-indent:0ch;
  min-width:0;max-width:100%;padding-inline-start:var(--code-indent,0ch);
  text-indent:calc(-1 * var(--code-indent,0ch));white-space:pre-wrap;
  overflow-wrap:normal;word-break:normal}
.lesson-page .code-wrap-unit{white-space:pre}
.lesson-page .code-line-comment{display:inline-flex;flex:1 1 16ch;
  column-gap:var(--space-xs);
  min-width:0;color:var(--ink-muted);font-weight:400;white-space:normal}
.lesson-page .code-line-comment-marker{flex:0 0 auto}
.lesson-page .code-line-comment-body{min-width:0;overflow-wrap:break-word}
.lesson-page .codelegend{display:flex;gap:var(--space-lg);flex-wrap:wrap;
  font-size:var(--fs-label);color:var(--ink-faint);margin-top:var(--space-xs)}
.lesson-page .codelegend span{display:inline-flex;align-items:center;gap:var(--space-xs)}
.lesson-page .codelegend span::before{content:"";width:7px;height:7px;border-radius:50%;
  flex:0 0 auto}
.lesson-page .codelegend .legend-current::before{background:var(--status-good)}
.lesson-page .codelegend .legend-next::before{border:1px solid var(--accent)}
.lesson-page .speed{display:grid;grid-template-columns:auto minmax(11.75rem,1fr);align-items:center;gap:var(--space-xs);
  font-size:var(--fs-label);color:var(--ink-faint)}
.lesson-page .speed-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--space-2xs);width:100%}
.lesson-page .speed-options button{font:600 var(--fs-label)/1 var(--ui);background:var(--surface);
  color:var(--ink-muted);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:var(--space-xs);cursor:pointer;min-width:44px;min-height:44px}
.lesson-page .speed-options button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent);
  border-color:var(--accent)}
.lesson-page .viz{min-height:0;display:flex;flex-direction:column;justify-content:center;
  gap:var(--space-sm);overflow-x:auto;overflow-y:visible;scrollbar-gutter:stable;
  padding:var(--space-sm);scroll-padding-inline:var(--space-sm);min-width:0;
  container-name:lesson-visual;container-type:inline-size}
.lesson-page .viz[data-state-type="tree"]{padding-inline:var(--space-xs)}
.lesson-page .state-visual-track{width:100%;min-width:0;max-width:100%;
  overflow-x:auto;overflow-y:visible;scrollbar-gutter:stable;
  scroll-padding-inline:var(--space-sm);padding:var(--space-2xs)}
.lesson-page .viz[data-state-type="tree"]>.state-visual-track{display:flex;
  justify-content:safe center;padding-inline:0}
.lesson-page .state-visual-track:focus-visible{outline:2px solid var(--accent);
  outline-offset:2px;border-radius:var(--radius-sm)}
.lesson-page .caption{font-size:var(--fs-body);line-height:var(--lh-body);
  color:var(--ink-muted)}
.lesson-page .caption:empty{display:none}
.lesson-page .causal-rail{display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  align-items:stretch;
  background:var(--surface-raised);border-top:1px solid var(--border);
  overflow:visible}
.lesson-page .causal-part[hidden]{display:none}
.lesson-page .causal-part{display:flex;flex-direction:column;
  justify-content:center;gap:var(--space-2xs);
  padding:var(--space-xs) var(--space-sm);
  min-width:0}
.lesson-page .causal-part+.causal-part{border-left:1px solid var(--border)}
.lesson-page .causal-part.step-reason{background:var(--surface)}
.lesson-page .causal-label{font:600 var(--fs-label)/1.4 var(--ui);
  color:var(--ink-muted)}
.lesson-page .causal-value{font-size:var(--fs-body);line-height:var(--lh-body);
  color:var(--ink);overflow-wrap:anywhere}
.lesson-page .player-progress{height:3px;background:var(--surface-raised);
  position:relative;overflow:hidden}
.lesson-page .player-progress i{position:absolute;inset:0 auto 0 0;background:var(--accent);
  transition:width .18s ease}
.lesson-page .ctrl{padding:var(--space-sm) var(--space-md);
  display:grid;gap:var(--space-xs);align-items:center;
  grid-template-columns:repeat(5,minmax(7.25rem,1fr))
    minmax(8rem,max-content) minmax(10rem,1fr) auto;
  grid-template-areas:"first previous play next last speed scrub count";
  background:color-mix(in srgb,var(--surface) 94%,transparent);
  border-radius:var(--radius) var(--radius) 0 0;
  position:sticky;top:0;z-index:5;backdrop-filter:blur(14px)}
.lesson-page [data-action="first"]{grid-area:first}
.lesson-page [data-action="previous"]{grid-area:previous}
.lesson-page [data-action="play"]{grid-area:play}
.lesson-page [data-action="next"]{grid-area:next}
.lesson-page [data-action="last"]{grid-area:last}
.lesson-page [data-action="speed"]{grid-area:speed}
.lesson-page [data-action="scrub"]{grid-area:scrub}
.lesson-page [data-action="count"]{grid-area:count}
.lesson-page .ctrl button,.lesson-page .ctrl .speed{width:100%;min-width:0;
  justify-content:center}
.lesson-page .ctrl button,.lesson-page .blueprint-player-controls button{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-xs)}
.lesson-page .player-control-icon{display:block;width:1.125rem;height:1.125rem;
  flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.lesson-page .player-control-label{min-width:0}
.lesson-page button:not(.theme-tg){font:600 var(--fs-body)/var(--lh-snug) var(--ui);
  background:var(--surface);color:var(--ink-muted);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:var(--space-sm) var(--space-md);cursor:pointer;
  min-height:44px;transition:border-color .14s,color .14s,background .14s}
.lesson-page button:not(.theme-tg):hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.lesson-page .speed-options button[aria-pressed="true"]:hover:not(:disabled),
.lesson-page .blueprint-player-speed-options button[aria-pressed="true"]:hover:not(:disabled){
  color:var(--on-accent);border-color:var(--accent)}
.lesson-page .transfer-index-trigger.active:hover:not(:disabled),
.lesson-page .code-transfer-trigger.active:hover:not(:disabled){background:var(--accent);
  border-color:var(--accent);color:var(--on-accent)}
.lesson-page button:disabled{opacity:.4;cursor:default}
.lesson-page button.pri,.lesson-page button.primary{background:var(--accent);
  color:var(--on-accent);border-color:var(--accent)}
.lesson-page button.pri:hover:not(:disabled),
.lesson-page button.primary:hover:not(:disabled){background:var(--accent);
  color:var(--on-accent);border-color:var(--accent)}
.lesson-page input[type=range]{width:100%;min-width:0;accent-color:var(--accent);height:44px}
.lesson-page .count{font:600 var(--fs-label)/1 var(--ui);
  font-variant-numeric:tabular-nums;color:var(--ink-faint);min-width:0;
  white-space:nowrap;text-align:right;display:grid;justify-items:end}
.lesson-page .count::before,.lesson-page .count-value{grid-area:1/1}
.lesson-page .count::before{content:attr(data-reserved-label);visibility:hidden;
  pointer-events:none}
.lesson-page .hint{color:var(--ink-faint);font-size:var(--fs-label)}

/* The runtime inspector is one continuous memory surface, not a deck of cards. */
.lesson-page .state-inspector{display:grid;
  grid-template-columns:minmax(0,1fr);container-name:lesson-inspector;
  container-type:inline-size;
  align-content:start;flex:1 1 auto;background:var(--surface);min-width:0}
.lesson-page .state-inspector-heading{display:grid;
  grid-template-columns:minmax(0,1fr);align-items:center;
  grid-template-areas:"title" "context" "live";
  grid-column:1;gap:var(--space-2xs);
  padding:var(--space-xs) var(--space-md);
  border-bottom:1px solid var(--border)}
.lesson-page .state-inspector-title{font:600 var(--fs-body)/1.3 var(--ui);
  grid-area:title;color:var(--ink);white-space:nowrap}
.lesson-page .state-inspector-context{display:inline-flex;align-items:center;
  grid-area:context;justify-content:flex-start;gap:var(--space-xs);min-width:0;
  flex-wrap:wrap;
  font:400 var(--fs-label)/1.3 var(--ui);color:var(--ink-muted)}
.lesson-page .state-inspector-context-label,
.lesson-page .state-inspector-context-detail{overflow:visible;text-overflow:clip;
  white-space:normal}
.lesson-page .state-inspector-context-separator{display:inline-block;
  width:4px;height:4px;border-radius:50%;background:var(--ink-faint);
  flex:0 0 auto}
.lesson-page .state-inspector-frame{font:600 var(--fs-label)/1 var(--ui);
  display:none;font-variant-numeric:tabular-nums;color:var(--ink-faint);
  white-space:nowrap}
.lesson-page .state-inspector-live{grid-area:live;display:flex;align-items:center;
  flex-wrap:wrap;gap:var(--space-2xs) var(--space-xs);min-width:0;
  padding-top:var(--space-2xs);border-top:1px solid var(--border)}
.lesson-page .state-inspector-live[data-transition-emphasis="true"]{
  background:var(--status-good-soft);
  box-shadow:inset 0 0 0 1px var(--status-good-line)}
.lesson-page .state-inspector-live-mark{width:8px;height:8px;border-radius:50%;
  flex:0 0 auto;background:var(--status-good)}
.lesson-page .state-inspector-live-label{font:600 var(--fs-label)/1.35 var(--ui);
  color:var(--status-good)}
.lesson-page .state-inspector-live-text{flex:1 1 12rem;min-width:0;
  font-size:var(--fs-label);line-height:1.35;color:var(--ink-muted)}
.lesson-page .state-inspector-live-value{margin-left:auto;min-width:0;
  font:600 var(--fs-label)/1.35 var(--mono);font-variant-ligatures:none;
  /* The generic code surface is a different neutral from the invariant tint,
     so the value read as a foreign grey rectangle inside the green chip. Drop
     the surface, keep the inline breathing room: margin-left:auto puts the
     value against the chip's right edge, and the chip has no inline padding. */
  background:transparent;padding:0 var(--space-2xs);
  color:var(--status-good);overflow-wrap:anywhere}
.lesson-page .inspector-group-label{font:600 var(--fs-label)/1.3 var(--ui);
  color:var(--ink-faint)}
.lesson-page .inspector-bindings{padding:var(--space-xs) var(--space-md);
  grid-column:1;border-bottom:1px solid var(--border)}
.lesson-page .inspector-bindings-body{display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
  margin-top:var(--space-xs);background:var(--border);
  border:1px solid var(--border);border-radius:var(--radius-sm);overflow:visible}
.lesson-page .inspector-binding{display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(2.5rem,max-content);
  grid-template-areas:"label symbol transition";
  align-items:center;column-gap:var(--space-xs);
  min-width:0;padding:var(--space-3xs) var(--space-xs);
  border:0;border-radius:0;background:var(--surface)}
.lesson-page .inspector-binding+.inspector-binding{border-top:0}
.lesson-page .inspector-binding.changed{
  grid-template-columns:minmax(0,1fr) auto minmax(2.5rem,max-content);
  grid-template-areas:"label symbol transition";
  row-gap:0}
.lesson-page .inspector-binding.descriptive-change.changed,
.lesson-page .inspector-binding.descriptive-value{
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"label symbol" "transition transition";
  row-gap:var(--space-2xs)}
.lesson-page .inspector-binding.descriptive-change.changed .inspector-binding-label,
.lesson-page .inspector-binding.descriptive-value .inspector-binding-label{
  align-self:center}
.lesson-page .inspector-binding.descriptive-change.changed .inspector-binding-symbol,
.lesson-page .inspector-binding.descriptive-value .inspector-binding-symbol{
  justify-self:end}
.lesson-page .inspector-binding.descriptive-change.changed .inspector-binding-transition,
.lesson-page .inspector-binding.descriptive-value .inspector-binding-transition{
  display:grid;grid-template-columns:minmax(0,1fr) 1rem minmax(0,1fr);
  justify-self:stretch;width:100%}
.lesson-page .inspector-binding.descriptive-change.changed .inspector-binding-before,
.lesson-page .inspector-binding.descriptive-value .inspector-binding-before{
  min-width:0;white-space:normal;overflow-wrap:anywhere;text-align:right}
.lesson-page .inspector-binding.descriptive-change.changed .inspector-binding-value,
.lesson-page .inspector-binding.descriptive-value .inspector-binding-value{
  min-width:0;white-space:normal;overflow-wrap:anywhere;text-align:left}
.lesson-page .inspector-binding.descriptive-value:not(.changed) .inspector-binding-transition{
  display:block}
.lesson-page .inspector-binding.descriptive-value:not(.changed) .inspector-binding-value{
  display:block;width:100%}
.lesson-page .inspector-binding.changed .inspector-binding-transition{
  justify-self:end}
.lesson-page .inspector-binding-label{grid-area:label;
  font-size:var(--fs-label);line-height:var(--lh-snug);color:var(--ink-muted);
  overflow-wrap:anywhere}
.lesson-page .inspector-binding-symbol{font:600 var(--fs-label)/1.4 var(--mono);
  grid-area:symbol;justify-self:start;
  color:var(--accent);background:var(--accent-soft);border-radius:var(--radius-sm);
  padding:var(--space-2xs) var(--space-xs)}
.lesson-page .inspector-binding-transition{display:inline-flex;align-items:center;
  grid-area:transition;justify-content:flex-end;gap:var(--space-xs);min-width:0}
.lesson-page .inspector-binding-before{font:400 var(--fs-label)/1.4 var(--mono);
  color:var(--ink-faint);text-decoration:line-through;white-space:nowrap}
.lesson-page .inspector-change-connector{width:16px;height:1px;background:var(--accent);
  position:relative;flex:0 0 auto}
.lesson-page .inspector-change-connector::after{content:"";position:absolute;
  right:0;top:-3px;width:6px;height:6px;border-top:1px solid var(--accent);
  border-right:1px solid var(--accent);transform:rotate(45deg)}
.lesson-page .inspector-binding-value{font:600 var(--fs-label)/var(--lh-snug) var(--mono);
  font-variant-numeric:tabular-nums;color:var(--ink);text-align:right;white-space:nowrap}
.lesson-page .inspector-binding.changed .inspector-binding-value{
  color:var(--delta);background:var(--delta-soft);border-radius:var(--radius-sm);
  padding:var(--space-2xs) var(--space-xs)}
.lesson-page .inspector-collections{display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));grid-column:1;
  align-items:start;gap:var(--space-xs);padding:var(--space-xs) var(--space-md);
  min-width:0}
.lesson-page .inspector-collection.map{grid-column:1/-1}
.lesson-page .state-inspector[data-has-structures="false"] .inspector-bindings,
.lesson-page .state-inspector[data-has-bindings="false"] .inspector-collections{
  grid-column:1}
.lesson-page .inspector-collection{display:grid;gap:var(--space-2xs);min-width:0}
.lesson-page .inspector-collection.stack{display:grid;flex-direction:initial}
.lesson-page .inspector-collection-label{font:600 var(--fs-label)/1.4 var(--ui);
  color:var(--ink-faint)}
.lesson-page .inspector-collection-body{display:flex;flex-wrap:wrap;
  align-items:center;gap:var(--space-2xs);min-width:0;overflow-x:auto;
  scrollbar-gutter:stable}
.lesson-page .inspector-collection.stack .inspector-collection-body{
  flex-direction:column-reverse;flex-wrap:nowrap;align-items:stretch;
  width:100%;overflow:visible;gap:0}
.lesson-page .inspector-collection.stack .inspector-item{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"value edge";width:100%;justify-content:stretch;
  border-radius:0}
.lesson-page .inspector-collection.stack .inspector-item:first-child{
  border-radius:0 0 var(--radius-sm) var(--radius-sm)}
.lesson-page .inspector-collection.stack .inspector-item:last-child{
  border-radius:var(--radius-sm) var(--radius-sm) 0 0}
.lesson-page .inspector-collection.stack .inspector-item+.inspector-item{
  border-bottom-width:0}
.lesson-page .inspector-collection.queue .inspector-collection-body,
.lesson-page .inspector-collection.list .inspector-collection-body{
  flex-wrap:nowrap}
.lesson-page .inspector-collection.queue .inspector-collection-body{
  position:relative;padding-bottom:var(--space-md)}
.lesson-page .inspector-collection.queue .inspector-item{
  display:grid;grid-template-rows:auto 1em;justify-items:center;
  flex:1 1 2.5rem;min-width:2.5rem;padding:var(--space-2xs);
  white-space:nowrap}
.lesson-page .inspector-queue-flow{position:absolute;inset:auto 0 0;
  display:block;width:100%;height:12px;overflow:visible;color:var(--accent)}
.lesson-page .inspector-queue-flow path{fill:none;stroke:currentColor;
  stroke-width:1.5;vector-effect:non-scaling-stroke;stroke-linecap:round;
  stroke-linejoin:round}
.lesson-page .inspector-collection.array .inspector-item{
  display:grid;grid-template-rows:auto auto;justify-items:center;
  min-width:3rem;padding:var(--space-2xs)}
.lesson-page .inspector-collection.heap .inspector-item{
  display:grid;grid-template-rows:auto auto;justify-items:center;
  min-width:3.25rem;padding:var(--space-xs)}
.lesson-page .inspector-collection.array .inspector-position,
.lesson-page .inspector-collection.heap .inspector-position{
  grid-row:2;font-size:var(--fs-label);color:var(--ink-faint)}
.lesson-page .inspector-collection.array .inspector-item.active .inspector-position,
.lesson-page .inspector-collection.array .inspector-item.inserted .inspector-position,
.lesson-page .inspector-collection.array .inspector-item.removed .inspector-position,
.lesson-page .inspector-collection.heap .inspector-item.active .inspector-position,
.lesson-page .inspector-collection.heap .inspector-item.inserted .inspector-position,
.lesson-page .inspector-collection.heap .inspector-item.removed .inspector-position{
  color:inherit}
.lesson-page .inspector-collection.list .inspector-item:not(:last-child)::after{
  content:"";width:14px;height:1px;background:currentColor;opacity:.38;
  margin-left:var(--space-xs)}
.lesson-page .inspector-collection.set .inspector-item{border-radius:999px}
.lesson-page .inspector-item{display:inline-flex;align-items:center;gap:var(--space-xs);
  min-height:28px;padding:var(--space-3xs) var(--space-xs);
  border:1px solid var(--border);border-radius:var(--radius-sm);
  background:var(--surface-raised);font:400 var(--fs-label)/1.3 var(--mono);
  color:var(--ink-muted)}
.lesson-page .inspector-item.active{border-color:var(--accent);
  background:var(--accent);color:var(--on-accent);font-weight:600}
.lesson-page .inspector-item.changed{box-shadow:0 0 0 3px var(--accent-soft-2)}
.lesson-page .inspector-item.inserted{border-color:var(--status-good);
  background:var(--status-good-soft)}
.lesson-page .inspector-item.active.inserted{border-color:var(--accent);
  background:var(--accent);color:var(--on-accent)}
.lesson-page .inspector-item.removed{border-color:var(--delta);
  background:var(--delta-soft);color:var(--delta)}
.lesson-page .inspector-item-change{font:600 var(--fs-label)/1 var(--ui)}
.lesson-page .inspector-edge-label,.lesson-page .inspector-position{
  font:600 var(--fs-label)/1 var(--ui);color:inherit;
  white-space:nowrap}
.lesson-page .inspector-collection.stack .inspector-edge-label{
  grid-area:edge;align-self:center;color:inherit}
.lesson-page .inspector-collection.stack .inspector-item-value{
  grid-area:value;justify-self:start}
.lesson-page .inspector-collection.queue .inspector-edge-label{
  grid-row:2;font-size:var(--fs-label);color:inherit}
.lesson-page .inspector-collection.queue .inspector-item-value{
  grid-row:1}
.lesson-page .inspector-position{align-self:flex-end}
.lesson-page .inspector-map-arrow{width:14px;height:1px;background:currentColor;
  color:inherit;opacity:.38;position:relative}
.lesson-page .inspector-map-arrow::after{content:"";position:absolute;right:0;top:-3px;
  width:6px;height:6px;border-top:1px solid currentColor;
  border-right:1px solid currentColor;transform:rotate(45deg)}
.lesson-page .inspector-item.active .inspector-map-arrow{opacity:.8}
.lesson-page .inspector-item-key{color:inherit;background:transparent}
.lesson-page .inspector-empty{font-size:var(--fs-label);color:var(--ink-faint)}
.lesson-page .inspector-target{box-shadow:0 0 0 4px var(--accent-soft-2);
  outline:2px solid var(--accent);outline-offset:2px}

/* State renderers: local scrolling contains wide diagrams instead of widening the page. */
.lesson-page .row{display:flex;gap:var(--space-xs);align-items:flex-start;
  flex-wrap:nowrap;width:max-content;min-width:min-content}
.lesson-page .row.fit-collection{display:grid;
  --fit-columns:1;--fit-row-max-width:100%;
  grid-template-columns:repeat(var(--fit-columns),minmax(0,1fr));
  gap:clamp(2px,1.25cqi,var(--space-xs));
  width:min(100%,var(--fit-row-max-width));min-width:0;margin-inline:auto}
.lesson-page .row.fit-collection .col{min-width:0}
.lesson-page .row.fit-collection .cell{width:100%;min-width:0;height:auto;
  min-height:28px;aspect-ratio:1;padding-inline:clamp(1px,.5cqi,var(--space-xs))}
.lesson-page .row.token-stream:not(.fit-collection){width:100%;min-width:0;
  flex-wrap:wrap}
.lesson-page .row.cell-collection:not(.fit-collection){width:100%;min-width:0;
  flex-wrap:wrap}
.lesson-page .row.cell-collection .cell{height:auto;min-height:44px;
  max-width:100%;line-height:var(--lh-snug);white-space:normal;
  overflow-wrap:anywhere}
.lesson-page .grid-board{display:flex;flex-direction:column;align-items:safe center;
  gap:var(--space-xs);min-width:0}
.lesson-page .grid-board.fit-grid{width:min(100%,var(--fit-grid-max-width));
  --fit-columns:1;--fit-grid-max-width:100%;
  gap:clamp(2px,1.25cqi,var(--space-xs));margin-inline:auto}
.lesson-page .grid-board.fit-grid .row.fit-grid-row{display:grid;
  grid-template-columns:repeat(var(--fit-columns),minmax(0,1fr));
  gap:clamp(2px,1.25cqi,var(--space-xs));width:100%;min-width:0}
.lesson-page .grid-board.fit-grid .cell{width:100%;min-width:0;height:auto;
  min-height:32px;aspect-ratio:1;padding-inline:clamp(1px,.5cqi,var(--space-xs))}
.lesson-page .grid-board.dense-grid{gap:var(--space-2xs)}
.lesson-page .grid-board.dense-grid .row{gap:var(--space-2xs)}
.lesson-page .grid-board.dense-grid .cell{
  min-width:calc(var(--space-xl) + var(--space-2xs));
  height:calc(var(--space-xl) + var(--space-2xs));
  padding:0 var(--space-2xs)}
.lesson-page .viz.dense-state{gap:var(--space-xs)}
.lesson-page .viz.dense-state>.legend{display:grid;
  grid-template-columns:repeat(auto-fit,minmax(7rem,1fr));
  gap:var(--space-2xs) var(--space-sm);line-height:var(--lh-snug)}
.lesson-page .viz.dense-state>.legend .lgd{
  align-items:flex-start;min-width:0;line-height:var(--lh-snug);
  white-space:normal;overflow-wrap:anywhere}
.lesson-page .lesson-flow-connector{display:block;width:2.5rem;height:1rem;
  flex:none;align-self:center;margin-inline:var(--space-xs);
  overflow:visible;color:var(--accent)}
.lesson-page .lesson-flow-connector path{fill:none;stroke:currentColor;
  stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;
  vector-effect:non-scaling-stroke}
.lesson-page .grid-comparison{display:grid;
  grid-template-columns:minmax(0,1fr) 3.5rem minmax(0,1fr);
  align-items:center;gap:var(--space-sm);width:100%}
.lesson-page .grid-transition{color:var(--ink-faint)}
.lesson-page .col{display:flex;flex-direction:column;align-items:center;gap:3px}
.lesson-page .cell-wide{min-width:58px}
.lesson-page .cell{min-width:44px;height:44px;display:flex;align-items:center;
  justify-content:center;font:400 var(--fs-body)/1 var(--mono);font-variant-numeric:tabular-nums;
  border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);
  flex:0 0 auto;padding:0 var(--space-xs);color:var(--ink-muted);
  transition:background .22s ease,border-color .22s ease,transform .22s ease,color .22s ease}
.lesson-page .cell.hi,.lesson-page .cell.active,.lesson-page .tnode.hi{
  background:var(--accent);
  border-color:var(--accent);color:var(--on-accent);font-weight:600;
  box-shadow:0 0 0 4px var(--accent-soft)}
.lesson-page .cell.hi{transform:translateY(-3px)}
.lesson-page .cell.ok,.lesson-page .tnode.ok{background:var(--status-good-soft);
  border-color:var(--status-good-line);color:var(--ink)}
.lesson-page .cell.cool,.lesson-page .tnode.cool{background:var(--cool-soft);
  border-color:var(--role-developing);color:var(--role-developing);font-weight:600}
.lesson-page .cell.matched,.lesson-page .cell.resolved{
  background:var(--status-good-soft);border-color:var(--status-good);
  color:var(--status-good);font-weight:600}
.lesson-page .cell.skipped{background:var(--surface-raised);
  border-color:var(--ink-faint);border-style:dashed;color:var(--ink-faint)}
.lesson-page .cell.win,.lesson-page .tnode.win{background:var(--cool-soft);
  border-color:var(--cool-edge);color:var(--ink)}
.lesson-page .cell.out{background:var(--hot-soft);border-color:var(--hot-edge);
  color:var(--hot);text-decoration:line-through}
.lesson-page .cell.hidden{background:var(--surface-raised);
  border-color:var(--ink-faint);border-style:dashed;color:var(--ink-muted)}
.lesson-page .cell.mine{background:color-mix(in srgb,var(--role-mastered) 18%,var(--surface));
  border-color:var(--role-mastered);color:var(--role-mastered);font-weight:600}
.lesson-page .cell.blank{background:var(--status-good-soft);
  border-color:var(--status-good);color:var(--status-good);font-weight:600}
.lesson-page .cell.count{background:var(--cool-soft);
  border-color:var(--role-developing);color:var(--role-developing);font-weight:600}
.lesson-page .cell.neutral{background:var(--surface-raised);
  border-color:var(--border-strong);color:var(--ink-faint)}
.lesson-page .cell.current{outline:3px solid var(--accent);outline-offset:3px;
  box-shadow:0 0 0 6px var(--accent-soft-2);transform:translateY(-2px)}
.lesson-page .cell.dim{background:var(--surface-raised);color:var(--ink-faint)}
.lesson-page .idx,.lesson-page .ptr{font:600 var(--fs-label)/1.4 var(--mono);color:var(--ink-faint)}
.lesson-page .ptr{min-height:30px;color:var(--accent);display:flex;
  flex-direction:column;align-items:center;justify-content:flex-end}
.lesson-page .pointer-mark{width:7px;height:7px;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(45deg);margin-top:var(--space-2xs)}
.lesson-page .arrow{color:var(--ink-faint);align-self:center;flex:0 0 auto;font-size:var(--fs-title)}
.lesson-page .arrow::before{content:"";display:block;width:18px;height:1px;background:var(--border)}
.lesson-page .sentinel{background:var(--surface-raised);border-style:dashed;color:var(--ink-faint)}
/* Direct notes name the authored states. No colour key is required to decode them. */
.lesson-page .visual-notes{display:grid;
  grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));
  gap:var(--space-xs) var(--space-md);
  margin:0;padding:0;list-style:none;
  font-size:var(--fs-label);color:var(--ink-faint)}
.lesson-page .visual-note{position:relative;padding-inline-start:var(--space-md)}
.lesson-page .visual-note::before{content:"";position:absolute;inset-inline-start:0;
  top:var(--space-xs);width:5px;height:1px;background:var(--border-strong)}
.lesson-page .ghost{border:1px solid var(--hot);background:var(--hot-soft);
  border-radius:var(--radius-sm);pointer-events:none;z-index:200;
  display:flex;align-items:center;justify-content:center;
  font:600 var(--fs-label)/1 var(--mono);color:var(--hot)}
.lesson-page .cell[data-change="updated"],
.lesson-page .graph-register[data-change="updated"],
.lesson-page .ptext[data-change="updated"]{outline:2px solid var(--accent);
  outline-offset:2px}
.lesson-page .cell[data-change="inserted"],
.lesson-page .graph-register[data-change="inserted"],
.lesson-page .ptext[data-change="inserted"]{outline:2px solid var(--status-good);
  outline-offset:2px}
.lesson-page .lesson-tree,.lesson-page .lesson-graph{display:block;width:100%;height:auto;
  overflow:visible}
.lesson-page .lesson-tree{width:min(100%,var(--lesson-tree-intrinsic-width,100%));
  min-width:var(--lesson-tree-min-width,0px);
  max-width:none;align-self:safe center}
.lesson-page .lesson-tree[data-tree-sizing="fit"]{min-width:0;max-width:100%}
.lesson-page .player .lesson-tree[data-tree-sizing="fit"]{
  inline-size:auto;block-size:auto;
  max-inline-size:min(100%,var(--lesson-tree-intrinsic-width,100%),20rem);
  max-block-size:20rem}
.lesson-page .problem-visual.visual-tree .state-visual-track{
  display:flex;justify-content:safe center}
.lesson-page .problem-visual.visual-tree .lesson-tree{
  max-width:560px;align-self:safe center}
.lesson-page .lesson-graph{min-width:0;max-width:720px;align-self:safe center}
.lesson-page .tree-edge,.lesson-page .graph-edge-line{stroke:var(--border);
  stroke-width:3;vector-effect:non-scaling-stroke}
.lesson-page .tree-edge{transition:stroke .22s ease,stroke-width .22s ease}
.lesson-page .graph-edge-line{fill:none}
.lesson-page .tree-edge.nil{stroke:var(--ink-faint);stroke-dasharray:5 5}
.lesson-page .tree-arrow{fill:context-stroke}
.lesson-page .tree-edge.active,.lesson-page .tree-edge.hi,
.lesson-page .tree-edge.current{stroke:var(--accent);stroke-width:5}
.lesson-page .tree-edge.ok{stroke:var(--status-good);stroke-width:5}
.lesson-page .tree-node-shape,.lesson-page .graph-node-shape{fill:var(--surface);
  stroke:var(--border);stroke-width:2;vector-effect:non-scaling-stroke}
.lesson-page .tree-node-label,.lesson-page .graph-node-label,
.lesson-page .graph-edge-label{font-family:var(--mono);fill:var(--ink-muted)}
.lesson-page .tree-node-label,.lesson-page .graph-node-label{font-weight:600}
.lesson-page .graph-edge-label{paint-order:stroke;
  stroke:var(--surface);stroke-width:8px;stroke-linejoin:round}
.lesson-page .tree-node.hi .tree-node-shape,
.lesson-page .tree-node.active .tree-node-shape,
.lesson-page .graph-node.hi .graph-node-shape,
.lesson-page .graph-node.active .graph-node-shape{
  fill:var(--accent);stroke:var(--accent)}
.lesson-page .tree-node.hi .tree-node-label,
.lesson-page .tree-node.active .tree-node-label,
.lesson-page .graph-node.hi .graph-node-label,
.lesson-page .graph-node.active .graph-node-label{
  fill:var(--on-accent)}
.lesson-page .tree-node.current .tree-node-shape,
.lesson-page .graph-node.current .graph-node-shape{
  fill:var(--accent-soft);stroke:var(--accent);stroke-width:4}
.lesson-page .tree-node.current .tree-node-label,
.lesson-page .graph-node.current .graph-node-label{fill:var(--ink)}
.lesson-page .tree-node.ok .tree-node-shape,.lesson-page .graph-node.ok .graph-node-shape{
  fill:var(--status-good-soft);stroke:var(--status-good)}
.lesson-page .tree-node.seen:not(.active):not(.hi):not(.current) .tree-node-shape{
  fill:var(--status-good-soft);stroke:var(--status-good)}
.lesson-page .tree-node.cool .tree-node-shape,
.lesson-page .graph-node.cool .graph-node-shape{
  fill:var(--cool-soft);stroke:var(--role-developing)}
.lesson-page .tree-node.cool .tree-node-label,
.lesson-page .graph-node.cool .graph-node-label{fill:var(--role-developing)}
.lesson-page .graph-node.dim .graph-node-shape{
  fill:var(--surface-raised);stroke:var(--border)}
.lesson-page .graph-node.dim .graph-node-label{fill:var(--ink-faint)}
.lesson-page .tree-node.nil .tree-node-shape{fill:var(--surface-raised);
  stroke:var(--ink-faint);stroke-dasharray:5 4}
.lesson-page .graph-arrow{fill:context-stroke}
.lesson-page .graph-edge.active .graph-edge-line,
.lesson-page .graph-edge.hi .graph-edge-line,
.lesson-page .graph-edge.current .graph-edge-line{stroke:var(--accent);stroke-width:5}
.lesson-page .graph-edge.accepted .graph-edge-line,
.lesson-page .graph-edge.ok .graph-edge-line{stroke:var(--status-good);stroke-width:5}
.lesson-page .graph-edge.cool .graph-edge-line{
  stroke:var(--role-developing);stroke-width:5}
.lesson-page .graph-edge.rejected .graph-edge-line{stroke:var(--ink-faint);
  stroke-dasharray:7 6}
.lesson-page .graph-edge.active .graph-edge-label,
.lesson-page .graph-edge.hi .graph-edge-label,
.lesson-page .graph-edge.current .graph-edge-label{fill:var(--accent);font-weight:600}
.lesson-page .graph-edge.ok .graph-edge-label{fill:var(--status-good);font-weight:600}
.lesson-page .graph-edge.cool .graph-edge-label{
  fill:var(--role-developing);font-weight:600}
.lesson-page .graph-registers{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:var(--space-xs);width:100%}
.lesson-page .graph-register{display:flex;justify-content:space-between;gap:var(--space-sm);
  padding:var(--space-xs) var(--space-sm);border:1px solid var(--border);
  border-radius:var(--radius-sm);background:var(--surface-raised)}
.lesson-page .graph-register-label{font:600 var(--fs-label)/1.4 var(--ui);
  color:var(--ink-faint)}
.lesson-page .graph-register-value{font:600 var(--fs-label)/1.4 var(--mono);
  color:var(--ink)}
.lesson-page .graph-register.active,.lesson-page .graph-register.current,
.lesson-page .graph-register.hi{
  border-color:var(--accent);background:var(--accent-soft)}
.lesson-page .graph-register.ok{
  border-color:var(--status-good);background:var(--status-good-soft)}
.lesson-page .graph-register.cool{
  border-color:var(--role-developing);background:var(--cool-soft)}
.lesson-page .tree-node.inspector-target,
.lesson-page .graph-node.inspector-target{box-shadow:none;outline:0}
.lesson-page .tree-node.inspector-target .tree-node-shape,
.lesson-page .graph-node.inspector-target .graph-node-shape{
  stroke:var(--accent);stroke-width:4;
  filter:drop-shadow(0 0 3px var(--accent-soft-2))}
.lesson-page .tree-node.target .tree-node-shape{
  stroke:var(--accent);stroke-width:4;
  filter:drop-shadow(0 0 3px var(--accent-soft-2))}
.lesson-page .stack{display:flex;flex-direction:column-reverse;gap:var(--space-2xs);align-items:flex-start}
.lesson-page .stack .cell{min-width:96px;justify-content:flex-start;padding:0 var(--space-sm)}
.lesson-page .panels{display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(12rem,100%),1fr));
  align-items:start;gap:var(--space-xs);width:100%}
.lesson-page .panels .row{gap:var(--space-2xs)}
.lesson-page .panels .row:not(.fit-collection){width:100%;min-width:0;
  max-width:100%;flex-wrap:wrap}
.lesson-page .panels .cell{min-width:40px;padding-inline:var(--space-3xs)}
.lesson-page .panels .row>.col>.ptr:empty{display:none}
.lesson-page .panels.flow{display:flex;align-items:flex-start;gap:0;
  counter-reset:panel-stage}
.lesson-page .panels.flow>.panel{flex:1 1 0;counter-increment:panel-stage;
  padding:var(--space-xs)}
.lesson-page .panels.flow>.panel .plabel{display:grid;
  grid-template-columns:1.25rem minmax(0,1fr);align-items:start;
  gap:var(--space-2xs);overflow-wrap:anywhere}
.lesson-page .panels.flow>.panel .plabel::before{content:counter(panel-stage);
  display:inline-grid;place-items:center;width:1.25rem;height:1.25rem;border-radius:50%;
  background:var(--accent-soft);color:var(--accent);
  font:600 var(--fs-label)/1 var(--mono)}
.lesson-page .panel-connector{flex:0 0 3.5rem}
@container lesson-visual (max-width:38rem){
  .lesson-page .panels.flow{flex-direction:column}
  .lesson-page .panel-connector{width:2.5rem;height:1rem;flex-basis:auto;
    justify-self:center;align-self:center;transform:rotate(90deg);
    margin-block:var(--space-xs)}
}
.lesson-page .panel{display:grid;align-content:start;gap:var(--space-xs);
  min-width:0;padding:var(--space-sm);border:1px solid var(--border);
  border-radius:var(--radius-sm);background:var(--surface-raised)}
.lesson-page .panels>.panel-wide{grid-column:1/-1}
.lesson-page .panel-track{min-width:0;max-width:100%;overflow-x:auto;
  overflow-y:hidden;scrollbar-gutter:stable;scroll-padding-inline:var(--space-xs);
  padding:var(--space-2xs);margin:calc(-1 * var(--space-2xs))}
.lesson-page .panel-track:focus-visible{outline:2px solid var(--accent);
  outline-offset:2px;border-radius:var(--radius-sm)}
.lesson-page .panel.active,.lesson-page .panel.current{
  border-color:var(--accent);background:var(--accent-soft)}
.lesson-page .panel.ok{
  border-color:var(--status-good-line);background:var(--status-good-soft)}
.lesson-page .panel.cool{
  border-color:var(--role-developing);background:var(--cool-soft)}
.lesson-page .panel .ptext{font:600 var(--fs-body)/1.4 var(--mono);
  min-width:0;max-width:100%;color:var(--ink);white-space:pre-line;
  overflow-wrap:anywhere}
.lesson-page .panels.flow .ptext{white-space:normal}
.lesson-page .dp{border-collapse:separate;border-spacing:4px;margin:0 auto;max-width:100%}
.lesson-page .dp th{padding:var(--space-2xs) var(--space-xs);text-align:center;
  font:600 var(--fs-label)/1 var(--mono);color:var(--ink-faint)}
.lesson-page .dp td{min-width:34px;padding:var(--space-xs);text-align:center;
  font:400 var(--fs-label)/1 var(--mono);border:1px solid var(--border);
  border-radius:var(--radius-sm);background:var(--surface);color:var(--ink-faint)}
.lesson-page .dp td.t{background:var(--status-good-soft);border-color:var(--status-good-line);
  color:var(--status-good);font-weight:600}
.lesson-page .dp td.cur{background:var(--accent-soft);border-color:var(--accent);
  color:var(--accent);box-shadow:0 0 0 2px var(--accent-line);font-weight:600}

/* Prose, notes and comprehension gates. */
.lesson-page .desc{background:var(--surface-raised);border:1px solid var(--border);
  border-radius:var(--radius);padding:var(--space-xl);display:flex;flex-direction:column;
  gap:var(--space-sm)}
.lesson-page .desc .body{font-size:var(--fs-title);color:var(--ink-muted)}
.lesson-page .problem-visual,.lesson-page .base-visual{display:flex;flex-direction:column;
  justify-content:center;gap:var(--space-sm);min-width:0;padding:var(--space-lg);
  border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);
  overflow-x:auto;overflow-y:hidden;scroll-padding-inline:var(--space-sm)}
.lesson-page .problem-visual{min-height:280px}
.lesson-page .problem-visual.visual-examples,
.lesson-page .base-visual.visual-pointers,
.lesson-page .base-visual.visual-decision{justify-content:flex-start;min-height:0;
  padding:0;border:0;background:transparent}
.lesson-page .mechanism-diagram{display:grid;gap:var(--space-xs);
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.lesson-page .mechanism-block{display:flex;flex-direction:column;justify-content:center;
  gap:var(--space-2xs);padding:var(--space-sm);border:1px solid var(--border);
  border-radius:var(--radius-sm);background:var(--surface-raised)}
.lesson-page .mechanism-code{display:grid;gap:var(--space-2xs);min-width:0}
.lesson-page .mechanism-code-line{display:block;font:400 var(--fs-label)/1.5 var(--mono);
  color:var(--ink-muted);overflow-wrap:anywhere;white-space:pre-wrap}
.lesson-page .mechanism-copy{margin:0;font:400 var(--fs-body)/1.55 var(--ui);
  color:var(--ink);overflow-wrap:anywhere}
.lesson-page .pointer-sequence{display:grid;grid-template-columns:1fr;
  gap:var(--space-sm);min-width:0;margin:0;
  padding:var(--space-md);border:1px solid var(--border);
  border-radius:var(--radius-sm);background:var(--surface-raised);
  container-name:pointer-sequence;container-type:inline-size}
.lesson-page .pointer-sequence>.tag{grid-column:1/-1}
.lesson-page .pointer-sequence-row{display:grid;grid-template-columns:1fr;
  gap:var(--space-xs);min-width:0}
.lesson-page .pointer-sequence-name{display:flex;align-items:center;gap:var(--space-xs);
  min-height:0;color:var(--ink);background:transparent;padding:0;font-weight:600}
.lesson-page .pointer-sequence-symbol{padding:var(--space-3xs) var(--space-xs);
  border-radius:var(--radius-sm);background:var(--surface);color:var(--accent)}
.lesson-page .pointer-sequence-role{font-size:var(--fs-label);color:var(--ink-muted)}
.lesson-page .pointer-sequence-track{display:grid;min-width:0;
  overflow-x:auto;overflow-y:hidden;padding-bottom:var(--space-3xs)}
.lesson-page .pointer-sequence-cells,.lesson-page .pointer-sequence-pointers{
  display:grid;
  grid-template-columns:repeat(var(--sequence-columns),minmax(2.75rem,2.75rem));
  gap:var(--space-xs);width:max-content;min-width:0}
.lesson-page .pointer-sequence-cell{display:flex;align-items:center;justify-content:center;
  min-height:40px;border:1px solid var(--border);border-radius:var(--radius-sm);
  background:var(--surface);font:600 var(--fs-body)/1 var(--mono)}
.lesson-page .pointer-sequence-cell.current,
.lesson-page .pointer-sequence-cell.hi{border-color:var(--accent);
  background:var(--accent-soft)}
.lesson-page .pointer-sequence-cell.matched,
.lesson-page .pointer-sequence-cell.resolved,
.lesson-page .pointer-sequence-cell.ok{border-color:var(--status-good-line);
  background:var(--status-good-soft);color:var(--status-good)}
.lesson-page .pointer-sequence-cell.skipped,
.lesson-page .pointer-sequence-cell.out{border-color:var(--border);
  background:var(--surface);color:var(--ink-faint);text-decoration:line-through}
.lesson-page .pointer-sequence-pointers{min-height:54px}
.lesson-page .pointer-sequence-pointer{display:flex;flex-direction:column;
  align-items:center;justify-content:flex-start;min-width:0;color:var(--accent)}
.lesson-page .pointer-sequence-arrow{display:block;width:18px;height:28px;
  overflow:visible;color:var(--accent)}
.lesson-page .pointer-sequence-arrow-shaft,
.lesson-page .pointer-sequence-arrow-head{fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lesson-page .pointer-sequence-labels{display:flex;align-items:center;justify-content:center;
  flex-wrap:wrap;gap:var(--space-3xs);margin-top:3px;overflow:visible}
.lesson-page .pointer-sequence-label{padding:0 var(--space-2xs);
  background:var(--accent-soft);color:var(--accent);border-radius:999px;
  max-width:100%;font-weight:600;white-space:normal;text-align:center;
  overflow-wrap:break-word}
.lesson-page .pointer-sequence-note{grid-column:1/-1;color:var(--ink-muted);
  font-size:var(--fs-label);line-height:var(--lh-body)}
.lesson-page .lesson-decision{display:grid;gap:var(--space-sm);min-width:0;
  container-name:lesson-decision;container-type:inline-size;
  margin:0;padding:var(--space-md);border:1px solid var(--border);
  border-radius:var(--radius-sm);background:var(--surface-raised)}
.lesson-page .lesson-decision-title{font:600 var(--fs-label)/1.4 var(--ui);
  color:var(--ink-muted);letter-spacing:var(--ls-label)}
.lesson-page .lesson-decision-question,.lesson-page .lesson-decision-note{
  margin:0;color:var(--ink-muted);font-size:var(--fs-label);
  line-height:var(--lh-body)}
.lesson-page .lesson-decision-flow{display:grid;
  grid-template-columns:minmax(9rem,1fr) minmax(3rem,.35fr) auto minmax(7rem,.7fr);
  align-items:center;gap:var(--space-sm);min-width:0}
.lesson-page .lesson-decision-branches{display:grid;gap:var(--space-xs);
  padding:0;margin:0;list-style:none}
.lesson-page .lesson-decision-branch{display:grid;
  grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"label value" "expression value";
  align-items:center;gap:var(--space-3xs) var(--space-sm);min-width:0;
  padding:var(--space-xs) var(--space-sm);border:1px solid var(--border);
  border-radius:var(--radius-sm);background:var(--surface)}
.lesson-page .lesson-decision-branch[data-contributes="true"]{
  border:2px solid var(--accent);background:var(--accent-soft);
  box-shadow:inset 4px 0 0 var(--accent)}
.lesson-page .lesson-decision-branch-label{grid-area:label;
  font:600 var(--fs-label)/1.25 var(--ui);color:var(--ink)}
.lesson-page .lesson-decision-expression{grid-area:expression;min-width:0;
  padding:0;background:transparent;color:var(--ink-muted);overflow-wrap:anywhere}
.lesson-page .lesson-decision-expression.math-expression{
  font-size:var(--fs-body);overflow-wrap:normal}
.lesson-page .lesson-decision-value{grid-area:value;
  font:800 var(--fs-title)/1 var(--mono);color:var(--ink)}
.lesson-page .lesson-decision-convergence{display:block;width:100%;height:100%;
  min-height:96px;overflow:visible;color:var(--border)}
.lesson-page .lesson-decision-branch-connector,
.lesson-page .lesson-decision-result-connector,
.lesson-page .lesson-decision-connector-head{fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lesson-page .lesson-decision-branch-connector[data-contributes="true"]{
  color:var(--accent);stroke-width:3}
.lesson-page .lesson-decision-operator{display:flex;align-items:center;justify-content:center;
  min-width:3rem;min-height:3rem;padding:var(--space-xs);
  border:1px solid var(--accent-line);border-radius:999px;
  background:var(--accent-soft);color:var(--accent);font-weight:800}
.lesson-page .lesson-decision-result{display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:var(--space-xs);min-height:72px;
  padding:var(--space-sm);border:2px solid var(--accent);
  border-radius:var(--radius-sm);background:var(--surface)}
.lesson-page .lesson-decision-result-label{
  font:600 var(--fs-label)/var(--lh-snug) var(--ui);
  color:var(--ink-muted)}
.lesson-page .lesson-decision-result-expression{font-size:var(--fs-body);
  color:var(--ink)}
.lesson-page .lesson-decision-result-value{font:800 var(--fs-headline)/1 var(--mono);
  color:var(--accent)}
.lesson-page .viz>.lesson-decision-inline{margin-top:var(--space-sm);
  padding:var(--space-sm) 0 0;border:0;border-top:1px solid var(--border);
  border-radius:0;background:transparent}
.lesson-page .viz.dense-state>.lesson-decision-inline{
  margin-top:var(--space-2xs);padding-top:var(--space-xs);gap:var(--space-xs)}
.lesson-page .lesson-decision-inline .lesson-decision-flow{
  grid-template-columns:minmax(8rem,1fr) minmax(2.5rem,.25fr) auto minmax(6rem,.55fr);
  gap:var(--space-xs)}
.lesson-page .lesson-decision-inline .lesson-decision-branch{
  padding:var(--space-2xs) var(--space-xs)}
.lesson-page .lesson-decision-inline .lesson-decision-convergence{min-height:72px}
.lesson-page .lesson-decision-inline .lesson-decision-result{
  min-height:60px;padding:var(--space-xs)}
.lesson-page .viz.dense-state .lesson-decision-inline .lesson-decision-flow{
  gap:var(--space-2xs)}
.lesson-page .viz.dense-state .lesson-decision-inline .lesson-decision-convergence{
  min-height:56px}
.lesson-page .viz.dense-state .lesson-decision-inline .lesson-decision-operator{
  min-width:var(--space-2xl);min-height:var(--space-2xl);
  padding:var(--space-2xs)}
.lesson-page .viz.dense-state .lesson-decision-inline .lesson-decision-result{
  min-height:52px;padding:var(--space-2xs)}
.lesson-page .example-mappings{display:grid;gap:var(--space-xs);
  margin:0;
  padding:var(--space-md);border:1px solid var(--border);
  border-radius:var(--radius-sm);background:var(--surface)}
.lesson-page .example-mappings>.tag{margin:0}
.lesson-page .example-mapping{display:grid;
  grid-template-columns:minmax(0,1fr) 2.5rem minmax(0,1fr);
  align-items:center;gap:var(--space-sm)}
.lesson-page .example-input,.lesson-page .example-fields,.lesson-page .example-result{
  min-width:0;padding:var(--space-xs) var(--space-sm);
  border:1px solid var(--border);border-radius:var(--radius-sm);
  background:var(--surface-raised)}
.lesson-page .example-input{display:flex;align-items:center;overflow-wrap:anywhere}
.lesson-page .example-fields{display:flex;flex-wrap:wrap;align-items:center;
  gap:var(--space-xs) var(--space-lg)}
.lesson-page .example-field{display:flex;align-items:baseline;gap:var(--space-xs)}
.lesson-page .example-field-label{color:var(--ink-faint);font-size:var(--fs-label)}
.lesson-page .example-field-value{padding:0;background:transparent;color:var(--ink)}
.lesson-page .example-connector{align-self:center;width:100%;height:18px;
  overflow:visible;color:var(--accent)}
.lesson-page .example-connector-line{fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.lesson-page .example-result{display:flex;flex-direction:column;justify-content:center;
  gap:var(--space-3xs)}
.lesson-page .example-result.positive{border-color:var(--status-good-line);
  background:var(--status-good-soft)}
.lesson-page .example-result.neutral{border-color:var(--border);
  background:var(--surface)}
.lesson-page .example-output{min-width:0;padding:0;background:transparent;
  overflow-wrap:anywhere;
  color:var(--ink);font:600 var(--fs-body)/1.25 var(--mono)}
.lesson-page .example-result.positive .example-output{color:var(--status-good)}
.lesson-page .example-reason{color:var(--ink-muted);
  font-size:var(--fs-label);line-height:var(--lh-body)}
.lesson-page .desc .ex{font:400 var(--fs-label)/1.8 var(--mono);background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius-sm);padding:var(--space-sm);
  white-space:pre;overflow-x:auto;color:var(--ink-muted)}
.lesson-page .pills{display:flex;gap:var(--space-xs);flex-wrap:wrap;margin-top:var(--space-sm)}
.lesson-page .pill{font:600 var(--fs-label)/1 var(--ui);border-radius:999px;
  padding:var(--space-xs) var(--space-sm);white-space:nowrap}
.lesson-page .pill.easy{background:var(--cool-soft);color:var(--role-mature)}
.lesson-page .pill.medium{background:var(--cool-soft);color:var(--role-developing)}
.lesson-page .pill.hard{background:var(--hot-soft);color:var(--role-mastered)}
.lesson-page .pill.rep{background:var(--accent-soft);color:var(--accent)}
.lesson-page .vizbar{display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-sm);padding-bottom:var(--space-xs);border-bottom:1px solid var(--border);
  margin-bottom:var(--space-sm)}
.lesson-page .note{display:flex;gap:var(--space-sm);padding:var(--space-lg);
  border-radius:var(--radius-sm);border:1px solid;border-left-width:4px;
  font-size:var(--fs-body);line-height:var(--lh-body);max-width:82ch}
.lesson-page .note.tip{background:var(--status-good-soft);border-color:var(--status-good-line);
  border-left-color:var(--status-good)}
.lesson-page .note.trap{background:var(--hot-soft);border-color:var(--hot-edge);
  border-left-color:var(--hot)}
.lesson-page .note.info{background:var(--cool-soft);border-color:var(--cool-edge);
  border-left-color:var(--cool)}
.lesson-page .note.say{background:var(--accent-soft);border-color:var(--accent-line);
  border-left-color:var(--accent)}
.lesson-page .note.tip .k{color:var(--status-good)}
.lesson-page .note.trap .k{color:var(--hot)}
.lesson-page .note.info .k{color:var(--cool)}
.lesson-page .note.say .k{color:var(--accent)}
.lesson-page .readbar{position:fixed;top:0;left:0;right:0;height:3px;
  background:transparent;z-index:99}
.lesson-page .readbar i{display:block;height:100%;width:0;background:var(--accent);
  transition:width .1s linear}
.lesson-page .proof-workbench{display:grid;border:1px solid var(--border);
  border-radius:var(--radius);background:var(--surface);overflow:hidden;
  box-shadow:var(--shadow)}
.lesson-page .proof-section-label{font:600 var(--fs-label)/1.4 var(--ui);
  letter-spacing:var(--ls-label);color:var(--ink-faint)}
.lesson-page .proof-idea{display:grid;grid-template-columns:minmax(9rem,.22fr) minmax(0,1fr);
  gap:var(--space-lg);align-items:start;padding:var(--space-lg);
  background:var(--surface-raised);border-bottom:1px solid var(--border)}
.lesson-page .proof-idea-value{font-size:var(--fs-title);
  line-height:var(--lh-body);color:var(--ink)}
.lesson-page .proof-foundation{display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));border-bottom:1px solid var(--border)}
.lesson-page .proof-foundation-part{display:grid;align-content:start;
  gap:var(--space-xs);padding:var(--space-lg);min-width:0}
.lesson-page .proof-foundation-part+.proof-foundation-part{
  border-left:1px solid var(--border)}
.lesson-page .proof-step-type{font:600 var(--fs-label)/1.4 var(--ui);
  color:var(--ink-muted)}
.lesson-page .proof-step-question{font:600 var(--fs-title)/1.35 var(--ui);
  color:var(--ink)}
.lesson-page .proof-value{font-size:var(--fs-body);line-height:var(--lh-body);
  color:var(--ink-muted)}
.lesson-page .proof-workbench>.proof-section-label{
  padding:var(--space-md) var(--space-lg) 0}
.lesson-page .proof-chain{list-style:none;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:0;
  margin:0;padding:var(--space-md) var(--space-lg) var(--space-lg)}
.lesson-page .proof-chain-step{position:relative;display:grid;align-content:start;
  grid-template-columns:2rem minmax(0,1fr);column-gap:var(--space-sm);
  row-gap:var(--space-xs);padding-right:var(--space-lg);max-width:none}
.lesson-page .proof-chain-step>*:not(.proof-step-index){grid-column:2}
.lesson-page .proof-step-index{grid-column:1;grid-row:1/4;display:grid;place-items:center;
  align-self:start;width:2rem;height:2rem;border:1px solid var(--border);
  border-radius:999px;background:var(--surface-raised);color:var(--ink-muted);
  font:600 var(--fs-label)/1 var(--ui);z-index:1}
.lesson-page .proof-chain-step:not(:last-child)::after{content:"";position:absolute;
  top:1rem;left:2rem;right:0;height:1px;background:var(--border)}
.lesson-page .proof-chain-step:not(:last-child)::before{content:"";position:absolute;
  top:.78rem;right:var(--space-xs);width:.45rem;height:.45rem;
  border-top:1px solid var(--ink-faint);border-right:1px solid var(--ink-faint);
  transform:rotate(45deg)}
.lesson-page .proof-cost{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(18rem,.65fr);
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  background:var(--cool-soft)}
.lesson-page .proof-cost-derivation,.lesson-page .proof-term-panel{
  display:grid;align-content:start;gap:var(--space-xs);padding:var(--space-lg)}
.lesson-page .proof-term-panel{border-left:1px solid var(--cool-edge)}
.lesson-page .proof-derivation{font-size:var(--fs-body);
  line-height:var(--lh-body);color:var(--ink-muted)}
.lesson-page .proof-formula-label{font:600 var(--fs-label)/1.4 var(--ui);
  color:var(--role-developing);margin-top:var(--space-sm)}
.lesson-page .proof-formulas{display:grid;
  grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:var(--space-xs)}
.lesson-page .proof-formula{display:grid;align-content:start;
  grid-template-rows:auto auto 1fr;gap:var(--space-xs);
  padding:var(--space-sm);border:1px solid var(--cool-edge);
  border-radius:var(--radius-sm);background:var(--surface)}
.lesson-page .proof-formula-kind{font:600 var(--fs-label)/1.4 var(--ui);
  color:var(--ink-muted)}
.lesson-page .proof-formula-value{font-size:var(--fs-headline);
  line-height:var(--lh-snug);color:var(--ink)}
.lesson-page .proof-formula-note{font-size:var(--fs-label);
  line-height:var(--lh-body);color:var(--ink-muted)}
.lesson-page .proof-terms{display:grid;gap:0;margin:0}
.lesson-page .proof-term{display:grid;grid-template-columns:minmax(3rem,max-content) minmax(0,1fr);
  gap:var(--space-sm);padding:var(--space-xs) 0;border-bottom:1px solid var(--cool-edge)}
.lesson-page .proof-term:last-child{border-bottom:0}
.lesson-page .proof-term dt{display:flex;align-items:center;color:var(--role-developing)}
.lesson-page .proof-term dd{margin:0;font-size:var(--fs-body);
  line-height:1.45;color:var(--ink-muted)}
.lesson-page .cue{background:var(--status-good-soft);border:1px solid var(--status-good-line);
  border-left:4px solid var(--status-good);border-radius:var(--radius);
  padding:var(--space-xl);font-size:var(--fs-title);line-height:var(--lh-body)}
.lesson-page ol,.lesson-page ul{padding-left:var(--space-lg);display:flex;
  flex-direction:column;gap:var(--space-sm)}
.lesson-page li{color:var(--ink-muted);max-width:76ch}
.lesson-page li::marker{color:var(--accent);font-weight:600}
.lesson-page kbd{font:400 var(--fs-label)/1 var(--mono);background:var(--surface-raised);
  border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:var(--space-3xs) var(--space-xs);color:var(--ink-muted)}

@media(max-width:1259px){
  .lesson-page .stage{
    grid-template-columns:minmax(24rem,.9fr) minmax(28rem,1.1fr)}
}
@media(max-width:1024px){
  .lesson-page .transfer-layout{grid-template-columns:1fr}
  .lesson-page .pointer-sequence-cells,
  .lesson-page .pointer-sequence-pointers{
    grid-template-columns:repeat(var(--sequence-columns),minmax(0,1fr));
    gap:var(--space-2xs);width:100%}
  .lesson-page .pointer-sequence-cell{min-width:0;padding-inline:0}
}
@container lesson-player (max-width:62rem){
  .lesson-page .player .lesson-tree[data-tree-sizing="fit"]{
    max-inline-size:min(100%,var(--lesson-tree-intrinsic-width,100%),17rem);
    max-block-size:17rem}
  .lesson-page .ctrl{
    grid-template-columns:repeat(5,minmax(0,1fr));
    grid-template-areas:"first previous play next last"
                        "speed speed scrub scrub count"}
  .lesson-page .ctrl button{padding-inline:var(--space-sm)}
}
@media(max-width:900px){
  .lesson-page .bridge,.lesson-page .cmp{grid-template-columns:1fr}
  .lesson-page .scene-memory{border-left:0;border-top:1px solid var(--border)}
  .lesson-page cadence-algorithm-scene{
    --lesson-execution-context-display:block}
  .lesson-page .stage{grid-template-columns:1fr}
  .lesson-page .code-pane{border-right:0;border-top:1px solid var(--border)}
  .lesson-page .proof-chain{grid-template-columns:repeat(2,minmax(0,1fr));
    gap:var(--space-lg) 0}
  .lesson-page .proof-chain-step:nth-child(2)::after,
  .lesson-page .proof-chain-step:nth-child(2)::before{display:none}
  .lesson-page .proof-cost{grid-template-columns:1fr}
  .lesson-page .proof-term-panel{border-left:0;border-top:1px solid var(--cool-edge)}
  .lesson-page .lesson-shell{gap:var(--space-3xl)}
}
@media(max-width:640px){
  .lesson-shell{padding:var(--space-xl) var(--space-sm) var(--space-3xl);
    gap:var(--space-3xl)}
  .lesson-index{grid-template-columns:1fr}
  .lesson-index-card{grid-template-columns:auto minmax(0,1fr)}
  .lesson-card-action{display:none}
  .lesson-page .desc:has(>.problem-visual.visual-tree),
  .lesson-page .basecard:has(>.base-visual.visual-tree){padding:var(--space-sm)}
  .lesson-page .problem-visual.visual-tree,
  .lesson-page .base-visual.visual-tree{
    padding:var(--space-sm);overflow:visible}
  .lesson-page .visual-tree>.state-visual-track{padding-inline:0}
  /* A square board pushed its own active cell below the fold on a phone: the
     learner pressed Next and had to scroll away from that control to see what
     changed. A cell holds at most three characters, so height is the cheapest
     dimension to give back. */
  .lesson-page .grid-board.dense-grid .cell{
    height:calc(var(--space-lg) + var(--space-2xs))}
  .lesson-page .grid-board.fit-grid .cell{aspect-ratio:5/4;min-height:28px}
  .lesson-page .pane{padding:var(--space-md)}
  .lesson-page .pointer-sequence{grid-template-columns:1fr;
    gap:var(--space-xs);padding:var(--space-sm)}
  .lesson-page .pointer-sequence-row{display:grid;grid-template-columns:1fr;
    gap:var(--space-xs);min-width:0}
  .lesson-page .pointer-sequence-name{min-height:0}
  .lesson-page .pointer-sequence-cells,
  .lesson-page .pointer-sequence-pointers{
    grid-template-columns:repeat(var(--sequence-columns),minmax(0,1fr));
    gap:var(--space-2xs);width:100%}
  .lesson-page .example-mappings{padding:var(--space-sm)}
  .lesson-page .example-mapping{grid-template-columns:1fr;gap:var(--space-xs)}
  .lesson-page .example-connector{width:28px;height:28px;justify-self:center;
    transform:rotate(90deg)}
  .lesson-page .lesson-decision{padding:var(--space-sm)}
  .lesson-page .lesson-decision-flow,
  .lesson-page .lesson-decision-inline .lesson-decision-flow{
    grid-template-columns:1fr;
    gap:var(--space-xs)}
  .lesson-page .lesson-decision-convergence{width:72px;height:72px;
    min-height:72px;justify-self:center;transform:rotate(90deg)}
  .lesson-page .lesson-decision-operator{justify-self:center}
  .lesson-page .bridge-summary{grid-template-columns:1fr}
  .lesson-page .state-inspector{grid-template-columns:1fr}
  .lesson-page .inspector-bindings,.lesson-page .inspector-collections{
    grid-column:1/-1;border-right:0}
  .lesson-page .inspector-bindings-body{grid-template-columns:1fr}
  .lesson-page .inspector-binding{
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"label symbol" "transition transition";
    align-items:center}
  .lesson-page .inspector-binding-label{grid-area:label;min-width:0}
  .lesson-page .inspector-binding-symbol{grid-area:symbol}
  .lesson-page .inspector-binding-transition{
    grid-area:transition;justify-content:flex-end}
  .lesson-page .proof-idea,.lesson-page .proof-foundation{
    grid-template-columns:1fr}
  .lesson-page .proof-foundation-part+.proof-foundation-part{
    border-left:0;border-top:1px solid var(--border)}
  .lesson-page .proof-chain{grid-template-columns:1fr;gap:var(--space-lg)}
  .lesson-page .proof-chain-step{padding-right:0;padding-bottom:var(--space-md)}
  .lesson-page .proof-chain-step:not(:last-child)::after{display:block;
    top:2rem;bottom:calc(-1 * var(--space-lg));left:1rem;right:auto;
    width:1px;height:auto}
  .lesson-page .proof-chain-step:not(:last-child)::before{display:block;
    top:auto;bottom:calc(-1 * var(--space-lg) + 2px);left:.78rem;right:auto;
    transform:rotate(135deg)}
  .lesson-page .proof-formula{grid-template-columns:1fr}
  .lesson-page .causal-rail{grid-template-columns:1fr}
  .lesson-page .causal-part.step-reason{border-left:0;
    border-top:1px solid var(--status-good-line)}
  .lesson-page .ctrl{padding:var(--space-sm) var(--space-md);
    grid-template-columns:repeat(5,minmax(0,1fr));
    grid-template-areas:"first previous play next last"
                        "speed speed scrub scrub count"}
  .lesson-page .speed-label{display:none}
  .lesson-page .transfer-index-trigger{grid-template-columns:2rem minmax(0,1fr);
    grid-template-areas:"number from" "number to"}
  .lesson-page .transfer-index-number{grid-area:number}
  .lesson-page .transfer-index-from{grid-area:from}
  .lesson-page .transfer-index-to{grid-area:to}
  .lesson-page .transfer-index-arrow{display:none}
  .lesson-page .transfer-pair{grid-template-columns:1fr}
  .lesson-page .transfer-connector{width:2.5rem;height:1rem;justify-self:center;
    transform:rotate(90deg);margin-block:var(--space-xs)}
  .lesson-page .transfer-detail-nav{display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-areas:"previous next" "progress progress";
    align-items:center;padding:var(--space-sm)}
  .lesson-page .transfer-detail-nav button{width:100%;min-width:0}
  .lesson-page .transfer-detail-nav button:first-child{grid-area:previous}
  .lesson-page .transfer-detail-nav button:last-child{grid-area:next}
  .lesson-page .transfer-progress{grid-area:progress;text-align:center}
  .lesson-page .code-transfer-guide{align-items:stretch;flex-direction:column}
  .lesson-page .code-transfer-nav{display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr))}
  .lesson-page .grid-comparison{grid-template-columns:1fr}
  .lesson-page .grid-transition{width:2.5rem;height:1rem;justify-self:center;
    transform:rotate(90deg);margin-block:var(--space-xs)}
  .lesson-page .lesson-graph{min-width:0}
  .lesson-page .problem-visual{min-height:220px;overflow:auto}
}
@media(max-width:430px){
  .lesson-page .app-nav{width:calc(100% - 24px);margin:24px auto 26px}
  .lesson-page .app-nav-label{display:inline}
  .lesson-page .app-nav-link{justify-content:flex-start}
  .lesson-page .panels{grid-template-columns:1fr}
  .lesson-page .panels:has(>.panel:nth-child(3):last-child){
    grid-template-columns:repeat(2,minmax(0,1fr))}
  .lesson-page .panels:has(>.panel:nth-child(3):last-child)>.panel:nth-child(-n+2){
    padding:var(--space-xs)}
  .lesson-page .panels:has(>.panel:nth-child(3):last-child)>.panel:nth-child(-n+2) .row{
    gap:var(--space-3xs)}
  .lesson-page .panels:has(>.panel:nth-child(3):last-child)>.panel:nth-child(-n+2) .cell{
    min-width:28px;padding-inline:var(--space-3xs)}
  .lesson-page .panels:has(>.panel:nth-child(3):last-child)>.panel:nth-child(3){
    grid-column:1/-1}
}
@media(max-width:360px){
  .temporal-cell{min-inline-size:4px}
  .failure-modes-card .chips{min-inline-size:0}
  .failure-modes-card .chip{max-inline-size:100%;white-space:normal;overflow-wrap:anywhere}
  .trow{grid-template-columns:minmax(0,1fr) auto}
  .trow .tr-pair{white-space:normal;flex-wrap:wrap}
  .lesson-page .count{text-align:right}
  .lesson-page .scene-state{padding:var(--space-xs)}
  .lesson-page .viz{gap:var(--space-xs);padding:var(--space-xs)}
  /* At the narrowest supported width, three related state groups read as one
     coordinated memory surface instead of three stacked cards. The compact
     context rows preserve the labels while the result keeps the full width. */
  .lesson-page .panels:has(>.panel:nth-child(3):last-child){
    grid-template-columns:1fr;gap:0;padding-inline:var(--space-xs);
    border:1px solid var(--border);border-radius:var(--radius-sm);
    background:var(--surface-raised)}
  .lesson-page .panels:has(>.panel:nth-child(3):last-child)>.panel{
    grid-column:auto;grid-template-columns:minmax(5rem,.36fr) minmax(0,1fr);
    align-items:center;column-gap:var(--space-xs);row-gap:var(--space-3xs);
    padding:var(--space-2xs) 0;border:0;border-radius:0}
  .lesson-page .panels:has(>.panel:nth-child(3):last-child)>.panel+.panel{
    border-top:1px solid var(--border)}
  .lesson-page .panels:has(>.panel:nth-child(3):last-child)>.panel>.plabel{
    grid-column:1;align-self:start}
  .lesson-page .panels:has(>.panel:nth-child(3):last-child)>.panel>:not(.plabel){
    grid-column:2}
  .lesson-page .panels:has(>.panel:nth-child(3):last-child)>.panel:nth-child(3){
    grid-column:auto;grid-template-columns:1fr}
  .lesson-page .panels:has(>.panel:nth-child(3):last-child)>.panel:nth-child(3)>*{
    grid-column:1}
  .lesson-page .panels:has(>.panel:nth-child(3):last-child) .cell{
    min-width:28px;height:36px;min-height:36px;padding-inline:var(--space-3xs);
    font-size:var(--fs-label)}
  /* A seven-slot state array (the common n+1 teaching case) fits in the
     initial viewport. Longer structures retain the labelled local scrollport. */
  .lesson-page .panel-track .row{gap:2px}
  .lesson-page .panel-track .col{min-width:28px}
  .lesson-page .panel-track .cell{min-width:28px;height:36px;
    padding-inline:2px;font-size:var(--fs-label)}
}

/* ── Typed lesson-engine candidate ─────────────────────────────────────── */
.lesson-page .lesson-blueprint-shell{gap:var(--space-lg);padding-top:var(--space-xl)}
.lesson-page .lesson-blueprint-header{display:grid;gap:var(--space-xs);
  margin:0}
.lesson-page .lesson-blueprint-header h1{margin:0}
.lesson-page .lesson-blueprint-meta{display:flex;align-items:center;
  flex-wrap:wrap;gap:var(--space-xs);color:var(--ink-muted)}
.lesson-page .lesson-blueprint-section{margin-top:0;gap:var(--space-md)}
.lesson-page .engine-teaching-card{display:grid;gap:var(--space-sm);
  padding:var(--space-md)}
.lesson-page .engine-teaching-copy{max-width:72ch;margin:0}
.lesson-page .engine-teaching-code{margin:0;padding:var(--space-md);
  overflow:auto;border:1px solid var(--border);border-radius:var(--radius-sm);
  background:var(--surface-raised)}
.lesson-page .engine-teaching-math[data-math-display="block"]{
  justify-self:start}
.lesson-page [data-lesson-reveal-stage][hidden]{display:none}
.lesson-page cadence-lesson-gate{display:block;min-width:0}
.lesson-page .lesson-learning-gate{display:grid;gap:var(--space-md);min-width:0;
  padding:var(--space-md);border:1px solid var(--accent-line);
  border-radius:var(--radius-md);background:var(--surface);box-shadow:var(--shadow)}
.lesson-page .lesson-gate-question{width:100%;min-width:0;max-width:76ch;margin:0;
  font-size:var(--fs-title);font-weight:600;line-height:var(--lh-body);
  overflow-wrap:anywhere}
.lesson-page .lesson-gate-open{display:grid;gap:var(--space-sm);min-width:0}
.lesson-page .lesson-gate-tier{display:grid;gap:var(--space-xs);min-width:0}
.lesson-page .lesson-gate-tier-label{margin:0;
  color:var(--ink-muted);font:600 var(--fs-label)/1.4 var(--ui)}
.lesson-page .lesson-gate-tier-question{max-width:68ch;
  color:var(--ink);overflow-wrap:anywhere}
.lesson-page .lesson-gate-options{display:grid;gap:var(--space-xs);min-width:0}
/* Rows are buttons so the player's page-wide arrow listener stands down; the
   roving tabindex keeps radiogroup semantics without relying on that. */
.lesson-page .lesson-gate-option{display:grid;
  grid-template-columns:auto minmax(0,1fr);align-items:center;
  gap:var(--space-sm);width:100%;min-height:44px;
  padding:var(--space-sm);border:1px solid var(--border);
  border-radius:var(--radius-sm);background:var(--surface-raised);
  color:var(--ink);font:400 var(--fs-body)/var(--lh-body) var(--ui);
  text-align:left;cursor:pointer}
.lesson-page .lesson-gate-option[aria-disabled="true"]{cursor:default}
.lesson-page .lesson-gate-option[data-state="chosen"]{
  border-color:var(--accent);background:var(--accent-soft)}
.lesson-page .lesson-gate-option[data-state="correct"]{
  border-color:var(--status-good);background:var(--status-good-soft)}
/* Never --status-error: a wrong choice is a finding about the learner's
   model, not a failure of the page. */
.lesson-page .lesson-gate-option[data-state="wrong"]{
  border-color:var(--status-route);background:var(--surface)}
.lesson-page .lesson-gate-option:focus-visible{outline:2px solid var(--accent);
  outline-offset:2px}
.lesson-page .lesson-gate-mark{display:grid;place-items:center;
  width:var(--space-md);height:var(--space-md);
  border:1px solid var(--border);border-radius:50%;
  color:var(--ink-muted);font-size:var(--fs-label)}
.lesson-page .lesson-gate-mark[data-state="chosen"]{border-color:var(--accent);
  background:var(--accent)}
.lesson-page .lesson-gate-mark[data-state="correct"]{
  border-color:var(--status-good);color:var(--status-good)}
.lesson-page .lesson-gate-mark[data-state="wrong"]{
  border-color:var(--status-route);color:var(--status-route)}
.lesson-page .lesson-gate-option-text{min-width:0;overflow-wrap:anywhere}
/* The correction is the climax, so it carries prose weight and sits directly
   under the option it corrects. */
.lesson-page .lesson-gate-miss{max-width:68ch;
  margin:0;padding:var(--space-sm) var(--space-sm) 0 var(--space-xl);
  color:var(--ink-muted);font-size:var(--fs-body);line-height:var(--lh-body);
  overflow-wrap:anywhere}
.lesson-page .lesson-gate-reveal{display:grid;gap:var(--space-sm);min-width:0;
  padding-top:var(--space-sm);border-top:1px solid var(--border)}
.lesson-page .lesson-gate-reveal[hidden]{display:none}
.lesson-page [data-lesson-transfer-feedback][hidden]{display:none}
.lesson-page .lesson-gate-answer{display:grid;align-content:start;
  gap:var(--space-xs);min-width:0}
.lesson-page .lesson-gate-answer>span{
  color:var(--ink-muted);font:600 var(--fs-label)/1.4 var(--ui)}
.lesson-page .lesson-gate-answer-value{max-width:72ch;margin:0;
  color:var(--ink-muted);overflow-wrap:anywhere}
.lesson-page .lesson-gate-action{min-height:44px;white-space:nowrap;
  justify-self:end}
.lesson-page .lesson-gate-status{min-height:1.4em;margin:0;
  color:var(--accent);font-size:var(--fs-label)}
.lesson-page .lesson-commitment-field{display:grid;gap:var(--space-xs)}
.lesson-page .lesson-commitment-label{
  color:var(--ink);font:600 var(--fs-body)/var(--lh-snug) var(--ui)}
.lesson-page .lesson-commitment-field textarea{box-sizing:border-box;width:100%;
  min-height:6rem;padding:var(--space-sm);resize:vertical;
  border:1px solid var(--border);border-radius:var(--radius-sm);
  background:var(--surface-raised);color:var(--ink);
  font:400 var(--fs-body)/var(--lh-body) var(--ui)}
.lesson-page .lesson-commitment-field textarea:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px}
.lesson-page .lesson-commitment-hint{max-width:68ch;margin:0;
  color:var(--ink-muted);font-size:var(--fs-label);line-height:var(--lh-body)}
.lesson-page .lesson-commitment-actions{display:flex;flex-wrap:wrap;
  justify-content:flex-end;gap:var(--space-sm)}
.lesson-page .lesson-commitment-defer{display:inline-flex;align-items:center;
  justify-content:center;box-sizing:border-box;min-height:44px;
  padding:var(--space-sm) var(--space-md);border:1px solid var(--border);
  border-radius:var(--radius-sm);color:var(--ink-muted);
  font:600 var(--fs-body)/var(--lh-snug) var(--ui);text-decoration:none}
.lesson-page .lesson-commitment-defer[hidden]{display:none}
.lesson-page .lesson-commitment-defer:hover{border-color:var(--accent);color:var(--accent)}
.lesson-page .lesson-commitment-feedback-title{margin:0;
  color:var(--ink);font:600 var(--fs-title)/var(--lh-snug) var(--ui)}
.lesson-page .lesson-commitment-transfer{display:grid;align-content:start;
  gap:var(--space-sm);min-width:0;margin-top:var(--space-xs);
  padding-top:var(--space-md);border-top:1px solid var(--border)}
.lesson-page .lesson-commitment-transfer-prompt{max-width:72ch;margin:0;
  color:var(--ink);font:600 var(--fs-body)/var(--lh-body) var(--ui);
  overflow-wrap:anywhere}
.lesson-page cadence-lesson-bridge,.lesson-page cadence-lesson-code-transfer,
.lesson-page cadence-lesson-visual{
  display:block;min-width:0}
.lesson-page .lesson-visual-host{min-width:0}
.lesson-page .lesson-visual-host>.engine-role-legend{margin-block:0 var(--space-xs)}
.lesson-page .lesson-visual-host>.engine-entity{margin:0}
.lesson-visual-catalog-grid{display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));
  align-items:start;gap:var(--space-sm);margin-top:var(--space-md)}
.lesson-visual-catalog-item{display:grid;align-content:start;gap:var(--space-sm);
  min-width:0;padding:var(--space-sm);border:1px solid var(--border);
  border-radius:var(--radius-sm);background:var(--surface)}
.lesson-visual-catalog-meta{display:flex;align-items:center;
  justify-content:space-between;gap:var(--space-sm);color:var(--ink-muted)}
.lesson-visual-catalog-meta strong{color:var(--ink)}
.lesson-visual-catalog-meta code{overflow-wrap:anywhere;color:var(--accent)}
.lesson-page .lesson-bridge{display:grid;gap:var(--space-lg);min-width:0}
.lesson-page .lesson-bridge-anchors{display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-md)}
.lesson-page .lesson-bridge-anchor{display:grid;align-content:start;
  gap:var(--space-sm);min-width:0;padding:var(--space-md);
  border:1px solid var(--border);border-radius:var(--radius-md);
  background:var(--surface)}
.lesson-page .lesson-bridge-anchor-head{display:grid;
  grid-template-columns:2rem minmax(0,1fr);gap:var(--space-sm);align-items:start}
.lesson-page .lesson-bridge-anchor-head h3,
.lesson-page .lesson-bridge-mechanism h4,
.lesson-page .lesson-bridge-schema h3,
.lesson-page .lesson-bridge-map h3,
.lesson-page .lesson-bridge-family h3{margin:0}
.lesson-page .lesson-bridge-anchor-label{display:grid;place-items:center;
  width:2rem;height:2rem;flex:none;border:1px solid var(--border-strong);
  border-radius:50%;background:var(--surface-raised);
  color:var(--accent);font:600 var(--fs-label)/1 var(--mono)}
.lesson-page .lesson-bridge-mastery{display:flex;flex-wrap:wrap;
  gap:var(--space-2xs) var(--space-sm);margin:var(--space-2xs) 0 0;
  color:var(--ink-muted);font-size:var(--fs-label)}
.lesson-page .lesson-bridge-mechanism{display:grid;gap:var(--space-xs)}
.lesson-page .lesson-bridge-mechanism>p{max-width:72ch;margin:0;
  color:var(--ink-muted)}
.lesson-page .lesson-bridge-contribution{display:grid;
  grid-template-columns:max-content minmax(0,1fr);gap:var(--space-xs);
  margin:0;padding-top:var(--space-sm);border-top:1px solid var(--border)}
.lesson-page .lesson-bridge-contribution strong{color:var(--status-good)}
.lesson-page .lesson-bridge-core{display:grid;
  grid-template-columns:minmax(0,3fr) minmax(0,2fr);
  gap:var(--space-md);border:0;border-radius:0;
  background:transparent;overflow:visible}
.lesson-page .lesson-bridge-schema,.lesson-page .lesson-bridge-difference{
  display:grid;align-content:start;gap:var(--space-sm);min-width:0;
  padding:var(--space-md);border:1px solid var(--border);
  border-radius:var(--radius-md);background:var(--surface)}
.lesson-page .lesson-bridge-schema>p,
.lesson-page .lesson-bridge-difference p{margin:0}
.lesson-page .lesson-bridge-schema dl{display:grid;gap:var(--space-xs);margin:0}
.lesson-page .lesson-bridge-schema dl>div{display:grid;
  grid-template-columns:minmax(7rem,10rem) minmax(0,1fr);
  gap:var(--space-sm);padding:var(--space-sm);
  border-radius:var(--radius-sm);background:var(--surface-raised)}
.lesson-page .lesson-bridge-schema dt{font-weight:600;color:var(--ink)}
.lesson-page .lesson-bridge-schema dd{margin:0;color:var(--ink-muted)}
.lesson-page .lesson-bridge-boundary{box-shadow:inset 0 0 0 1px var(--border)}
.lesson-page .lesson-bridge-rule{display:grid;gap:var(--space-2xs);
  padding:var(--space-sm);border-radius:var(--radius-sm);
  background:var(--surface-raised)}
.lesson-page .lesson-bridge-rule>span{color:var(--ink-muted);
  font-size:var(--fs-label);font-weight:600}
.lesson-page .lesson-bridge-rule.target{box-shadow:inset 0 0 0 1px var(--accent)}
.lesson-page .lesson-bridge-difference-reason{color:var(--ink-muted)}
.lesson-page .lesson-bridge-map{
  display:grid;gap:var(--space-xs);min-width:0}
.lesson-page .lesson-bridge-map-head,.lesson-page .lesson-bridge-map-row{
  display:grid;grid-template-columns:minmax(10rem,1fr) 2.75rem minmax(10rem,1fr)
    minmax(13rem,1.35fr);gap:var(--space-sm);align-items:center}
.lesson-page .lesson-bridge-map-head{padding-inline:var(--space-sm);
  color:var(--ink-muted);font-size:var(--fs-label);font-weight:600}
.lesson-page .lesson-bridge-map-row{padding:var(--space-sm);
  border:1px solid var(--border);border-radius:var(--radius-sm);
  background:var(--surface)}
.lesson-page .lesson-bridge-map-source{display:grid;
  grid-template-columns:2rem minmax(0,1fr);gap:var(--space-xs);align-items:center}
.lesson-page .lesson-bridge-map-source>div,
.lesson-page .lesson-bridge-map-target,
.lesson-page .lesson-bridge-map-relation{display:grid;gap:var(--space-3xs);min-width:0}
.lesson-page .lesson-bridge-cell-label{display:none;color:var(--ink-muted);
  font-size:var(--fs-label);font-weight:600}
.lesson-page .lesson-bridge-map-connector{display:block;width:100%;height:auto;
  color:var(--accent)}
.lesson-page .lesson-bridge-map-connector path{fill:none;stroke:currentColor;
  stroke-width:1.5;vector-effect:non-scaling-stroke}
.lesson-page .lesson-bridge-map-relation p{margin:0;color:var(--ink-muted)}
.lesson-page .lesson-code-transfer{display:grid;gap:var(--space-sm);min-width:0}
.lesson-page .lesson-code-transfer-summary{max-width:78ch;color:var(--ink-muted)}
.lesson-page .lesson-code-transfer-grid{display:grid;
  grid-template-columns:minmax(0,5fr) minmax(25rem,7fr);gap:var(--space-md);
  align-items:start;min-width:0}
.lesson-page .lesson-code-source-group{display:grid;
  grid-template-columns:1fr;gap:var(--space-sm);min-width:0}
.lesson-page .lesson-code-source-panel,.lesson-page .lesson-code-target-panel{
  min-width:0;border:1px solid var(--border);border-radius:var(--radius-md);
  background:var(--surface);overflow:clip;box-shadow:var(--shadow)}
.lesson-page .lesson-code-panel-head{display:grid;
  grid-template-columns:2rem minmax(0,1fr);gap:var(--space-xs);align-items:center;
  padding:var(--space-sm);border-bottom:1px solid var(--border);
  background:var(--surface-raised)}
.lesson-page .lesson-code-panel-head>div{display:grid;gap:var(--space-3xs);min-width:0}
.lesson-page .lesson-code-panel-head span:not(.lesson-code-anchor-mark):not(.lesson-code-target-mark){
  color:var(--ink-muted);font:600 var(--fs-label)/1.35 var(--ui)}
.lesson-page .lesson-code-panel-head h3{margin:0;font:600 var(--fs-body)/var(--lh-snug) var(--ui);
  overflow-wrap:break-word}
.lesson-page .lesson-code-anchor-mark,.lesson-page .lesson-code-target-mark{
  display:grid;place-items:center;width:2rem;height:2rem;border-radius:50%;
  border:1px solid var(--border-strong);background:var(--surface);color:var(--accent);
  font:600 var(--fs-label)/1 var(--mono)}
.lesson-page .lesson-code-target-mark svg{width:1rem;height:1rem}
.lesson-page .lesson-code-target-mark path,
.lesson-page .lesson-code-adaptation path{fill:none;stroke:currentColor;
  stroke-linecap:round;stroke-linejoin:round;stroke-width:1.6}
.lesson-page .lesson-code-source-lines{display:grid;min-width:0}
.lesson-page .lesson-code-source-line{display:grid;
  grid-template-columns:2rem minmax(0,1fr);gap:var(--space-xs);align-items:center;
  min-width:0;padding:var(--space-xs) var(--space-sm);scroll-margin-block:6rem}
.lesson-page .lesson-code-source-line+.lesson-code-source-line{
  border-top:1px solid var(--border)}
.lesson-page .lesson-code-source-line:target{
  background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--accent)}
.lesson-page .lesson-code-source-line[data-source-highlighted]{
  background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--accent)}
.lesson-page .lesson-code-source-line:focus-visible{outline:2px solid var(--accent);
  outline-offset:-2px}
.lesson-page .lesson-code-visually-hidden{position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
  border:0}
.lesson-page .lesson-code-line-ref,.lesson-page .lesson-code-target-number{
  color:var(--ink-muted);font:600 var(--fs-label)/1.35 var(--mono);text-align:center}
.lesson-page .lesson-code-source-line code,
.lesson-page .lesson-code-target-main code{display:block;min-width:0;margin:0;
  padding:0;border-radius:0;background:transparent;color:var(--ink);
  font:400 var(--fs-label)/1.65 var(--mono);font-variant-ligatures:none;
  white-space:pre;overflow-x:auto;overscroll-behavior-inline:contain}
.lesson-page .lesson-code-target-lines{display:grid;min-width:0}
.lesson-page .lesson-code-target-line{display:grid;min-width:0;
  animation:lesson-code-reveal var(--motion-fast) var(--ease-standard) both}
.lesson-page .lesson-code-target-line+.lesson-code-target-line{
  border-top:1px solid var(--border)}
.lesson-page .lesson-code-target-main{display:grid;
  grid-template-columns:minmax(2.5rem,max-content) minmax(0,1fr) max-content;
  gap:var(--space-xs);
  align-items:center;min-width:0;padding:var(--space-xs) var(--space-sm)}
.lesson-page .lesson-code-adaptation{display:inline-flex;align-items:center;
  gap:var(--space-3xs);padding:var(--space-3xs) var(--space-xs);
  border:1px solid var(--border);border-radius:999px;background:var(--surface-raised);
  color:var(--ink-muted);font:600 var(--fs-label)/1.3 var(--ui);white-space:nowrap}
.lesson-page .lesson-code-adaptation svg{width:.95rem;height:.95rem;flex:none}
.lesson-page .lesson-code-target-line[data-adaptation="preserved"] .lesson-code-adaptation{
  border-color:var(--status-good);color:var(--status-good)}
.lesson-page .lesson-code-target-line[data-adaptation="combined"] .lesson-code-adaptation,
.lesson-page .lesson-code-target-line[data-adaptation="adapted"] .lesson-code-adaptation,
.lesson-page .lesson-code-target-line[data-adaptation="new"] .lesson-code-adaptation{
  border-color:var(--accent);color:var(--accent)}
.lesson-page .lesson-code-snippet-gap{display:flex;align-items:center;
  gap:var(--space-xs);min-height:2rem;padding:var(--space-3xs) var(--space-sm);
  border-top:1px solid var(--border);background:var(--surface-raised);
  color:var(--ink-muted);font:600 var(--fs-label)/1.35 var(--ui)}
.lesson-page .lesson-code-snippet-gap svg{width:2rem;height:.5rem;flex:none;
  color:var(--accent)}
.lesson-page .lesson-code-snippet-gap circle{fill:currentColor}
.lesson-page .lesson-code-cause{display:grid;
  grid-template-columns:minmax(9rem,max-content) minmax(0,1fr);gap:var(--space-sm);
  min-width:0;padding:var(--space-xs) var(--space-sm) var(--space-sm);
  background:color-mix(in srgb,var(--surface-raised) 64%,transparent)}
.lesson-page .lesson-code-origins,.lesson-page .lesson-code-cause p{
  display:flex;align-items:flex-start;gap:var(--space-xs);min-width:0;margin:0}
.lesson-page .lesson-code-origins>strong,.lesson-page .lesson-code-cause p>strong{
  flex:none;color:var(--ink-muted);font:600 var(--fs-label)/1.55 var(--ui)}
.lesson-page .lesson-code-cause p>span{color:var(--ink-muted);
  font-size:var(--fs-label);line-height:1.55;overflow-wrap:break-word}
.lesson-page .lesson-code-origin-list{display:flex;flex-wrap:wrap;
  gap:var(--space-3xs);min-width:0}
.lesson-page .lesson-code-origin{display:grid;place-items:center;min-width:var(--control-target);
  min-height:var(--control-target);padding-inline:var(--space-2xs);border:1px solid var(--accent);
  border-radius:999px;background:var(--accent-soft);color:var(--accent);
  font:600 var(--fs-label)/1 var(--mono);text-decoration:none}
.lesson-page .lesson-code-origin:focus-visible{outline:2px solid var(--accent);
  outline-offset:2px}
.lesson-page .lesson-code-origin:active{background:var(--accent);color:var(--surface)}
@media(hover:hover){
  .lesson-page .lesson-code-origin:hover{background:var(--accent);color:var(--surface)}
}
@media(pointer:coarse){.lesson-page .lesson-code-origin{min-width:var(--control-target-mobile);min-height:var(--control-target-mobile)}}
@keyframes lesson-code-reveal{from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}}
.lesson-page .lesson-bridge-close{display:grid;
  grid-template-columns:minmax(0,3fr) minmax(0,2fr);
  border:1px solid var(--border);border-radius:var(--radius-md);
  background:var(--surface);overflow:clip}
.lesson-page .lesson-bridge-proof,.lesson-page .lesson-bridge-family{
  display:grid;align-content:start;gap:var(--space-sm);padding:var(--space-md)}
.lesson-page .lesson-bridge-proof>p{max-width:72ch;margin:0}
.lesson-page .lesson-bridge-family{border-inline-start:1px solid var(--border)}
.lesson-page .lesson-bridge-family-list{display:flex;flex-wrap:wrap;
  gap:var(--space-xs);margin:0;padding:0;list-style:none}
.lesson-page .lesson-bridge-family-list li{padding:var(--space-2xs) var(--space-sm);
  border:1px solid var(--border);border-radius:999px;
  background:var(--surface-raised)}
.lesson-page cadence-lesson-blueprint-player{display:block;min-width:0;
  margin-top:var(--space-md)}
.lesson-page .blueprint-player{min-width:0;overflow:clip;
  border:1px solid var(--border);border-radius:var(--radius-lg);
  background:var(--surface);box-shadow:var(--shadow)}
.lesson-page .blueprint-player-controls{position:sticky;top:0;z-index:4;
  display:grid;grid-template-columns:repeat(5,minmax(7.25rem,1fr))
    max-content minmax(10rem,1fr) 4.5rem;gap:var(--space-xs);align-items:center;
  padding:var(--space-sm);border-bottom:1px solid var(--border);
  background:color-mix(in srgb,var(--surface) 94%,transparent);
  backdrop-filter:blur(14px)}
.lesson-page .blueprint-player-controls button{min-height:2.75rem;
  padding:var(--space-xs) var(--space-sm);
  transition:background var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard),
    color var(--motion-fast) var(--ease-standard)}
.lesson-page .blueprint-player-controls output{text-align:right;
  color:var(--ink-muted);font:600 var(--fs-label)/var(--lh-snug) var(--ui);
  display:grid;justify-items:end}
.lesson-page .blueprint-player-controls output::before,
.lesson-page .blueprint-player-position-value{grid-area:1/1}
.lesson-page .blueprint-player-controls output::before{
  content:attr(data-reserved-label);visibility:hidden;pointer-events:none}
.lesson-page .blueprint-player-controls input[type="range"]{min-width:0;
  accent-color:var(--accent)}
.lesson-page .blueprint-player-speed{display:flex;align-items:center;
  gap:var(--space-xs);min-width:0;color:var(--ink-muted);font-size:var(--fs-label)}
.lesson-page .blueprint-player-speed-options{display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-2xs);width:100%}
.lesson-page .blueprint-player-speed-options button{min-height:2.75rem;padding:var(--space-xs);
  border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);
  color:var(--ink-muted);font-family:var(--mono);font-variant-ligatures:none}
.lesson-page .blueprint-player-speed-options button[aria-pressed="true"]{background:var(--accent);
  border-color:var(--accent);color:var(--on-accent)}
.lesson-page .blueprint-player-speed-options button[aria-pressed="true"]:disabled{opacity:1}
.lesson-page .blueprint-player-stage{display:grid;
  grid-template-columns:minmax(22rem,5fr) minmax(0,7fr);align-items:start}
.lesson-page .blueprint-frame-stack{display:block;min-width:0}
.lesson-page .blueprint-frame{min-width:0}
.lesson-page .blueprint-frame>cadence-algorithm-scene{height:auto}
.lesson-page .blueprint-code-pane{min-width:0;padding:var(--space-md);
  border-right:1px solid var(--border);background:var(--surface)}
.lesson-page .blueprint-code{margin:var(--space-sm) 0 0;overflow:auto;
  font:400 var(--fs-label)/var(--lh-body) var(--mono);
  font-variant-ligatures:none}
.lesson-page .blueprint-code-line{display:grid;
  grid-template-columns:2.5rem minmax(max-content,1fr);min-height:1.75rem;
  align-items:center;padding:0 var(--space-xs);border-radius:var(--radius-sm)}
.lesson-page .blueprint-code-line.active{background:var(--status-good-soft);
  box-shadow:inset 0 0 0 1px var(--status-good-line)}
.lesson-page .blueprint-code-line.next{background:var(--accent-soft)}
.lesson-page .blueprint-line-number{padding-right:var(--space-xs);
  color:var(--ink-faint);text-align:right;user-select:none}
.lesson-page .blueprint-state,.lesson-page .blueprint-memory{
  min-width:0;padding:var(--space-md)}
.lesson-page .blueprint-state{border-bottom:1px solid var(--border)}
.lesson-page .blueprint-memory{height:auto}
.lesson-page .blueprint-memory-heading{display:grid;gap:var(--space-xs);
  margin-bottom:var(--space-sm)}
.lesson-page .blueprint-memory-heading h3,
.lesson-page .engine-variables h4{margin:0;font-size:var(--fs-title)}
.lesson-page .blueprint-state-summary{margin:var(--space-xs) 0 var(--space-sm);
  max-width:70ch;color:var(--ink-muted)}
.lesson-page .blueprint-live-invariant{display:flex;align-items:center;
  flex-wrap:wrap;gap:var(--space-2xs) var(--space-xs);min-width:0;
  padding-top:var(--space-xs);border-top:1px solid var(--border);
  color:var(--ink-muted);font-size:var(--fs-label)}
.lesson-page .blueprint-live-invariant[data-transition-emphasis="true"]{
  background:var(--status-good-soft);
  box-shadow:inset 0 0 0 1px var(--status-good-line)}
.lesson-page .blueprint-live-invariant-label{font-weight:600;
  color:var(--status-good)}
.lesson-page .blueprint-live-invariant .engine-invariant-dot{
  flex:0 0 auto;margin-top:0}
.lesson-page .engine-primary-entities,
.lesson-page .engine-memory-entities{display:grid;gap:var(--space-md);
  align-content:start;align-items:start}
.lesson-page .engine-primary-entities{grid-template-columns:
  repeat(auto-fit,minmax(min(12rem,100%),1fr))}
.lesson-page .engine-variables{display:grid;gap:var(--space-xs);
  margin-bottom:var(--space-md)}
.lesson-page .engine-variable-grid{display:grid;
  grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:var(--space-xs)}
.lesson-page .engine-variable{display:grid;align-items:center;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--space-sm);min-width:0;
  padding:var(--space-xs) var(--space-sm);border:1px solid var(--border);
  border-radius:var(--radius-sm);background:var(--surface-raised)}
.lesson-page .engine-variable code{min-width:0;overflow-wrap:anywhere}
.lesson-page .engine-variable-value{font:600 var(--fs-body)/var(--lh-snug) var(--mono);
  min-width:0;justify-self:end;text-align:right;overflow-wrap:anywhere;
  font-variant-ligatures:none}
.lesson-page .engine-entity{min-width:0;margin:0;padding:var(--space-sm);
  border:1px solid var(--border);border-radius:var(--radius-md);
  background:var(--surface-raised)}
.lesson-page .engine-entity figcaption{display:flex;flex-wrap:wrap;
  align-items:baseline;gap:var(--space-2xs) var(--space-xs);
  margin-bottom:var(--space-sm);color:var(--ink-muted);font-weight:600}
.lesson-page .engine-projected-cue{padding-left:var(--space-xs);
  border-left:1px solid var(--border-strong);
  color:var(--ink-faint);font-weight:400}
.lesson-page .engine-projected-reference{display:grid;
  grid-template-columns:auto minmax(0,1fr) max-content;
  align-items:center;gap:var(--space-sm);padding:var(--space-xs) var(--space-sm)}
.lesson-page .engine-reference-mark{display:grid;
  grid-template-columns:.75rem 1rem .75rem;align-items:center;width:2.5rem}
.lesson-page .engine-reference-mark span{width:.75rem;height:.75rem;
  border:2px solid var(--accent);border-radius:var(--radius-sm)}
.lesson-page .engine-reference-mark i{height:2px;background:var(--accent)}
.lesson-page .engine-reference-copy{display:grid;min-width:0;gap:var(--space-3xs)}
.lesson-page .engine-reference-copy strong{min-width:0;overflow-wrap:anywhere}
.lesson-page .engine-reference-copy small{color:var(--ink-muted);
  font-size:var(--fs-label)}
.lesson-page .engine-projected-reference>.engine-projected-cue{
  white-space:nowrap;font-size:var(--fs-label)}
.lesson-page .semantic-changed{outline:2px solid var(--accent);
  outline-offset:2px}
.lesson-page .engine-change-badge{justify-self:start;padding:var(--space-3xs) var(--space-xs);
  border:1px solid var(--accent);border-radius:999px;color:var(--accent);
  font:600 var(--fs-label)/1.2 var(--ui)}
.lesson-page .engine-variable .engine-change-badge{grid-column:1/-1}
.lesson-page .engine-role-legend{display:flex;flex-direction:row;flex-wrap:wrap;
  gap:var(--space-xs) var(--space-sm);margin:var(--space-xs) 0 var(--space-md);
  padding:0;list-style:none}
.lesson-page .engine-role-legend li{display:inline-flex;align-items:center;
  gap:var(--space-2xs);color:var(--ink-muted);font-size:var(--fs-label)}
.lesson-page .engine-role-swatch{display:inline-block;width:.75rem;height:.75rem;
  flex:none;border:1px solid var(--border-strong);
  border-radius:var(--radius-sm);background:var(--surface)}
.lesson-page .engine-empty-state{margin:var(--space-sm) 0 0;
  padding:var(--space-sm);border:1px dashed var(--border-strong);
  border-radius:var(--radius-sm);color:var(--ink-muted);text-align:center}
.lesson-page .engine-sequence-viewport{max-width:100%;min-width:0;
  overflow:auto;padding:var(--space-3xs)}
.lesson-page .engine-sequence-layout{display:grid;
  grid-template-columns:repeat(var(--engine-columns),minmax(3.25rem,max-content));
  gap:var(--space-xs);width:max-content;min-width:min-content}
.lesson-page .engine-sequence-track{display:grid;grid-template-columns:subgrid;
  grid-column:1/-1;gap:inherit;align-items:stretch;min-width:0}
.lesson-page .engine-set-items{display:flex;align-items:flex-end;
  gap:var(--space-xs);min-width:0;overflow:auto;padding:var(--space-3xs)}
.lesson-page .engine-stack .engine-sequence-layout{display:flex;
  flex-direction:column;width:100%;min-width:0}
.lesson-page .engine-stack .engine-sequence-track{display:flex;
  flex-direction:column-reverse;align-items:stretch}
.lesson-page .engine-stack .engine-pointer-track{display:flex;
  justify-content:center}
.lesson-page .engine-sequence-item{display:grid;grid-template-rows:auto 1fr;
  min-width:3.25rem;min-height:3.25rem;border:1px solid var(--border-strong);
  border-radius:var(--radius-sm);overflow:hidden;background:var(--surface);
  transition:background var(--motion-base) var(--ease-standard),
    border-color var(--motion-base) var(--ease-standard),
    transform var(--motion-base) var(--ease-standard)}
.lesson-page .engine-item-index{padding:var(--space-3xs) var(--space-2xs);
  color:var(--ink-faint);font:600 var(--fs-label)/1 var(--mono)}
.lesson-page .engine-item-value{display:grid;place-items:center;
  padding:var(--space-2xs);font:600 var(--fs-body)/var(--lh-snug) var(--mono);
  font-variant-ligatures:none}
.lesson-page .engine-pointer-track{display:grid;grid-template-columns:subgrid;
  grid-column:1/-1;gap:inherit;margin-top:var(--space-2xs)}
.lesson-page .engine-pointer{display:grid;justify-items:center;
  color:var(--accent)}
.lesson-page .engine-pointer-arrow{display:block;width:1px;height:1rem;
  background:currentColor;position:relative}
.lesson-page .engine-pointer-arrow::before{content:"";position:absolute;
  top:0;left:-.2rem;width:.4rem;height:.4rem;border-top:1px solid;
  border-left:1px solid;transform:rotate(45deg)}
.lesson-page .engine-linear-endpoints{display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-sm);
  margin-top:var(--space-xs);padding:var(--space-xs) var(--space-sm);
  border-top:1px solid var(--border);color:var(--ink-muted)}
.lesson-page .engine-linear-endpoints span{display:flex;align-items:baseline;
  gap:var(--space-xs);min-width:0}
.lesson-page .engine-linear-endpoints span:last-child{justify-content:flex-end;
  text-align:right}
.lesson-page .engine-linear-endpoints strong{color:var(--ink);
  font-size:var(--fs-label)}
.lesson-page .engine-linear-endpoints code{min-width:0;overflow-wrap:anywhere}
.lesson-page .engine-linked-track{display:flex;align-items:center;
  width:max-content;min-width:100%;padding:var(--space-3xs)}
.lesson-page .engine-linked-track .engine-sequence-item{flex:none}
.lesson-page .engine-list-link{position:relative;display:block;width:2.5rem;
  height:2px;flex:none;background:var(--border-strong)}
.lesson-page .engine-list-link::after{content:"";position:absolute;right:0;top:50%;
  width:.45rem;height:.45rem;border-top:2px solid var(--border-strong);
  border-right:2px solid var(--border-strong);transform:translateY(-50%) rotate(45deg)}
.lesson-page .engine-linked-pointers{display:flex;flex-wrap:wrap;
  gap:var(--space-xs);margin-top:var(--space-xs)}
.lesson-page .engine-linked-pointers>span{display:inline-flex;align-items:center;
  gap:var(--space-2xs);padding:var(--space-2xs) var(--space-xs);
  border:1px solid var(--accent);border-radius:999px;color:var(--ink-muted);
  font-size:var(--fs-label)}
.lesson-page .engine-linked-pointers code{color:var(--accent)}
.lesson-page .engine-list-pointer-arrow{position:relative;display:inline-block;
  width:1.15rem;height:.75rem;flex:none;color:var(--accent)}
.lesson-page .engine-list-pointer-arrow::before{content:"";position:absolute;
  inset-inline:0 .18rem;top:50%;border-top:1px solid currentColor}
.lesson-page .engine-list-pointer-arrow::after{content:"";position:absolute;
  inset-inline-end:.12rem;top:calc(50% - .2rem);width:.34rem;height:.34rem;
  border-block-start:1px solid currentColor;
  border-inline-end:1px solid currentColor;transform:rotate(45deg)}
.lesson-page .engine-set-item{padding:var(--space-xs) var(--space-sm);
  border:1px solid var(--border-strong);border-radius:999px;
  background:var(--surface);font-family:var(--mono);
  font-variant-ligatures:none}
.lesson-page .engine-map-entries{display:grid;gap:var(--space-xs);margin:0}
.lesson-page .engine-map-entry{display:grid;
  grid-template-columns:minmax(5rem,12rem) minmax(0,1fr);align-items:center;
  border:1px solid var(--border);border-radius:var(--radius-sm);
  background:var(--surface);overflow:hidden}
.lesson-page .engine-map-entry dt,.lesson-page .engine-map-entry dd{
  min-width:0;margin:0;padding:var(--space-xs) var(--space-sm);
  overflow-wrap:anywhere}
.lesson-page .engine-map-entry dd{font-family:var(--mono);
  font-variant-ligatures:none}
.lesson-page .engine-map-entry code{overflow-wrap:anywhere}
.lesson-page .engine-map-entry dt{border-right:1px solid var(--border)}
.lesson-page .engine-grid-viewport{max-width:100%;overflow:auto;
  padding:var(--space-3xs)}
.lesson-page .engine-grid-cells{display:grid;
  grid-template-columns:repeat(var(--engine-columns),minmax(2.75rem,1fr));
  gap:var(--space-2xs);width:max-content;min-width:min(100%,32rem)}
.lesson-page .engine-grid-row{display:grid;grid-template-columns:subgrid;
  grid-column:1/-1;gap:inherit}
.lesson-page .engine-grid-cell{display:grid;place-items:center;aspect-ratio:1;
  min-width:0;border:1px solid var(--border-strong);
  border-radius:var(--radius-sm);background:var(--surface);
  font-family:var(--mono);font-variant-ligatures:none}
.lesson-page .engine-diagram-viewport{max-width:100%;min-width:0;
  overflow-x:auto;overflow-y:visible;padding:var(--space-3xs);
  overscroll-behavior-inline:contain;scroll-padding-inline:var(--space-sm)}
.lesson-page .engine-diagram-viewport>svg{display:block;width:auto;
  max-width:none;height:auto;margin-inline:auto;overflow:visible}
.lesson-page .engine-tree-edge,.lesson-page .engine-graph-edge{
  fill:none;stroke:var(--ink-muted);stroke-width:2;
  vector-effect:non-scaling-stroke}
.lesson-page .engine-tree-node rect,.lesson-page .engine-graph-node circle{
  fill:var(--surface);stroke:var(--ink-muted);stroke-width:2;
  vector-effect:non-scaling-stroke;
  transition:fill var(--motion-base) var(--ease-standard),
    stroke var(--motion-base) var(--ease-standard)}
.lesson-page .engine-tree-node text,.lesson-page .engine-graph-node text{
  fill:var(--ink);font:600 var(--fs-body)/1 var(--mono);
  font-variant-ligatures:none}
.lesson-page .engine-tree-node.role-active rect,
.lesson-page .engine-graph-node.role-active circle{
  fill:var(--accent-soft);stroke:var(--accent);stroke-width:3}
.lesson-page .engine-tree-node.role-inserted rect,
.lesson-page .engine-graph-node.role-inserted circle{
  fill:var(--accent-soft);stroke:var(--accent);stroke-width:3;
  stroke-dasharray:2 2}
.lesson-page .engine-tree-node.role-processed rect,
.lesson-page .engine-graph-node.role-processed circle{
  fill:var(--status-good-soft);stroke:var(--status-good);stroke-width:3}
.lesson-page .engine-tree-node.role-visited rect,
.lesson-page .engine-graph-node.role-visited circle{
  fill:var(--status-good-soft);stroke:var(--status-good);stroke-width:3;
  stroke-dasharray:5 3}
.lesson-page .engine-tree-node.role-pending rect,
.lesson-page .engine-graph-node.role-pending circle{
  fill:color-mix(in srgb,var(--role-developing) 10%,var(--surface));
  stroke:var(--role-developing)}
.lesson-page .engine-tree-node.role-removed rect,
.lesson-page .engine-graph-node.role-removed circle{
  fill:var(--surface-raised);stroke:var(--ink-muted);stroke-dasharray:3 3}
.lesson-page .engine-tree-node.role-removed text,
.lesson-page .engine-graph-node.role-removed text{
  fill:var(--ink-muted);text-decoration:line-through}
.lesson-page .engine-graph-arrow{fill:var(--ink-muted)}
.lesson-page .engine-heap{container-name:lesson-heap;container-type:inline-size}
.lesson-page .engine-heap-order{margin:0 0 var(--space-sm);color:var(--ink-muted)}
.lesson-page .engine-heap-projections{display:grid;
  grid-template-columns:minmax(13rem,1.3fr) minmax(9rem,.7fr);
  gap:var(--space-sm);align-items:start}
.lesson-page .engine-heap-projections section{min-width:0;padding:var(--space-sm);
  border:1px solid var(--border);border-radius:var(--radius-sm);
  background:var(--surface)}
.lesson-page .engine-heap-projection-title{margin:0 0 var(--space-sm);
  color:var(--ink-muted);font:600 var(--fs-label)/var(--lh-snug) var(--ui)}
.lesson-page .engine-heap-array-track{display:flex;gap:var(--space-xs);
  max-width:100%;overflow-x:auto;padding:var(--space-3xs)}
.lesson-page .engine-heap-array-item{display:grid;
  grid-template-rows:1.25rem minmax(2.5rem,1fr);min-width:3.75rem;flex:none;
  border:1px solid var(--border-strong);border-radius:var(--radius-sm);
  overflow:hidden;background:var(--surface-raised)}
.lesson-page .engine-heap-array-item span{display:grid;place-items:center;
  color:var(--ink-faint);font:600 var(--fs-label)/1 var(--mono);
  border-bottom:1px solid var(--border)}
.lesson-page .engine-heap-array-item strong{min-width:0;
  display:grid;place-items:center;padding:var(--space-2xs);overflow-wrap:anywhere;
  font:600 var(--fs-body)/var(--lh-snug) var(--mono);
  font-variant-ligatures:none}
.lesson-page .engine-table-scroll{overflow:auto}
.lesson-page .engine-table table{width:100%;border-collapse:collapse}
.lesson-page .engine-table th,.lesson-page .engine-table td{
  padding:var(--space-xs);border:1px solid var(--border);text-align:left}
.lesson-page .engine-table td{font:600 var(--fs-body)/var(--lh-snug) var(--mono);
  font-variant-ligatures:none}
.lesson-page .engine-panel-items,.lesson-page .engine-comparison-items{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(8rem,1fr));
  gap:var(--space-xs)}
.lesson-page .engine-panel-item,.lesson-page .engine-comparison-item{
  display:grid;gap:var(--space-xs);padding:var(--space-sm);
  border:1px solid var(--border);border-radius:var(--radius-sm);
  background:var(--surface)}
.lesson-page .engine-panel-item strong,
.lesson-page .engine-comparison-item strong{font:600 var(--fs-body)/var(--lh-snug) var(--mono);
  font-variant-ligatures:none}
.lesson-page .role-active{border-color:var(--accent);
  background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}
.lesson-page .role-inserted{border-color:var(--accent);
  border-style:double;background:var(--accent-soft)}
.lesson-page .role-processed{border-color:var(--status-good);
  background:var(--status-good-soft)}
.lesson-page .role-visited{border-color:var(--status-good);
  border-style:dashed;background:var(--status-good-soft)}
.lesson-page .role-pending{border-color:var(--role-developing);
  background:color-mix(in srgb,var(--role-developing) 10%,var(--surface))}
.lesson-page .role-removed{border-color:var(--ink-muted);border-style:dashed;
  background:var(--surface-raised);color:var(--ink-muted);
  text-decoration:line-through}
.lesson-page .blueprint-causal{display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  border-top:1px solid var(--border)}
.lesson-page .blueprint-causal article{min-width:0;padding:var(--space-md)}
.lesson-page .blueprint-causal article+article{
  border-left:1px solid var(--border)}
.lesson-page .blueprint-causal p{margin:var(--space-xs) 0 0}
.lesson-page cadence-lesson-blueprint-player cadence-algorithm-scene[composition="visual-first"] .blueprint-causal{
  grid-template-columns:1fr}
.lesson-page cadence-lesson-blueprint-player cadence-algorithm-scene[composition="visual-first"] .blueprint-causal article+article{
  border-left:0;border-top:1px solid var(--border)}
.lesson-page .engine-invariant-dot{width:.6rem;height:.6rem;margin-top:.42rem;
  border-radius:50%;background:var(--status-good)}
.lesson-page .lesson-blueprint-error{max-width:48rem;margin:var(--space-xl) auto;
  padding:var(--space-lg)}
@media(max-width:70rem){
  .lesson-page .lesson-bridge-map-head{display:none}
  .lesson-page .lesson-bridge-cell-label{display:block}
  .lesson-page .lesson-bridge-close{grid-template-columns:1fr}
  .lesson-page .lesson-bridge-family{border-inline-start:0;
    border-top:1px solid var(--border)}
  .lesson-page .lesson-bridge-map-row{grid-template-columns:minmax(0,1fr)
    2.75rem minmax(0,1fr);grid-template-areas:"source connector target"
    "relation relation relation"}
  .lesson-page .lesson-bridge-map-source{grid-area:source}
  .lesson-page .lesson-bridge-map-connector{grid-area:connector}
  .lesson-page .lesson-bridge-map-target{grid-area:target}
  .lesson-page .lesson-bridge-map-relation{grid-area:relation;
    padding-top:var(--space-xs);border-top:1px solid var(--border)}
  .lesson-page .lesson-code-transfer-grid{grid-template-columns:1fr}
  .lesson-page .lesson-code-source-group{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lesson-page .blueprint-player-controls{
    grid-template-columns:repeat(4,minmax(0,1fr)) minmax(3.5rem,auto);
    grid-template-areas:"first previous play next last"
                        "speed speed speed speed speed"
                        "range range range range position"}
  .lesson-page .blueprint-player-controls>button:nth-of-type(1){grid-area:first}
  .lesson-page .blueprint-player-controls>button:nth-of-type(2){grid-area:previous}
  .lesson-page .blueprint-player-controls>button:nth-of-type(3){grid-area:play}
  .lesson-page .blueprint-player-controls>button:nth-of-type(4){grid-area:next}
  .lesson-page .blueprint-player-controls>button:nth-of-type(5){grid-area:last}
  .lesson-page .blueprint-player-speed{grid-area:speed}
  .lesson-page .blueprint-player-controls input{grid-area:range}
  .lesson-page .blueprint-player-controls output{grid-area:position}
}
@media(max-width:56rem){
  .lesson-page .blueprint-player-stage{grid-template-columns:1fr}
  .lesson-page .blueprint-code-pane{border-right:0;border-top:1px solid var(--border)}
}
@container lesson-inspector (max-width:32rem){
  .lesson-page .inspector-collections{grid-template-columns:1fr}
}
@container lesson-inspector (max-width:24rem){
  .lesson-page .inspector-bindings-body{grid-template-columns:1fr}
}
@container pointer-sequence (max-width:28rem){
  .lesson-page .pointer-sequence-cells,
  .lesson-page .pointer-sequence-pointers{
    grid-template-columns:repeat(var(--sequence-columns),minmax(0,1fr));
    gap:var(--space-2xs);width:100%}
  .lesson-page .pointer-sequence-cell{min-width:0;padding-inline:0}
}
@container lesson-heap (max-width:23rem){
  .lesson-page .engine-heap-projections{grid-template-columns:1fr}
}
@container lesson-decision (max-width:24rem){
  .lesson-page .lesson-decision-flow,
  .lesson-page .lesson-decision-inline .lesson-decision-flow{
    grid-template-columns:1fr;gap:var(--space-xs)}
  .lesson-page .lesson-decision-convergence{
    width:72px;height:72px;min-height:72px;
    justify-self:center;transform:rotate(90deg)}
  .lesson-page .lesson-decision-operator{justify-self:center}
}
@media(max-width:640px){
  .lesson-page .lesson-gate-action{width:100%}
  .lesson-page .lesson-commitment-actions{display:grid;grid-template-columns:1fr}
  .lesson-page .lesson-commitment-actions :is(button,a){width:100%}
  .lesson-page .lesson-bridge-anchors,
  .lesson-page .lesson-bridge-core,
  .lesson-page .lesson-bridge-close{grid-template-columns:1fr}
  .lesson-page .lesson-code-source-group{grid-template-columns:1fr}
  .lesson-page .lesson-code-target-main{
    grid-template-columns:2rem minmax(0,1fr)}
  .lesson-page .lesson-code-adaptation{grid-column:2;justify-self:start}
  .lesson-page .lesson-code-cause{grid-template-columns:1fr}
  .lesson-page .lesson-code-origin{min-width:2.75rem;min-height:2.75rem}
  .lesson-page .lesson-bridge-family{border-inline-start:0;
    border-top:1px solid var(--border)}
  .lesson-page .lesson-bridge-schema dl>div{grid-template-columns:1fr}
  .lesson-page .lesson-bridge-map-row{grid-template-columns:1fr;
    grid-template-areas:"source" "connector" "target" "relation"}
  .lesson-page .lesson-bridge-map-connector{width:2.75rem;
    justify-self:center;transform:rotate(90deg)}
  .lesson-page .lesson-bridge-map-target{text-align:center}
  .lesson-page .lesson-bridge-map-relation{padding-top:var(--space-sm)}
  .lesson-page .blueprint-player-controls{
    grid-template-columns:repeat(12,minmax(0,1fr));
    grid-template-areas:"first first previous previous play play play next next last last last"
                        "speed speed speed speed speed speed speed speed range range position position";
    gap:var(--space-3xs);padding:var(--space-xs) var(--space-2xs)}
  .lesson-page .blueprint-player-controls button{min-width:0}
  .lesson-page .ctrl .speed{grid-area:speed;grid-template-columns:1fr}
  .lesson-page .ctrl input[data-action="scrub"]{grid-area:scrub}
  .lesson-page .ctrl .count{grid-area:count}
  .lesson-page .ctrl{
    grid-template-columns:repeat(12,minmax(0,1fr));
    grid-template-areas:"first first previous previous play play play next next last last last"
                        "speed speed speed speed speed speed speed speed scrub scrub count count";
    gap:var(--space-3xs);padding:var(--space-xs) var(--space-2xs)}
  .lesson-page .player-control-label{display:none}
  .lesson-page .ctrl .speed>span{display:none}
  .lesson-page .blueprint-player-speed{justify-content:center}
  .lesson-page .blueprint-player-speed>span{display:none}
  .lesson-page .blueprint-player-speed-options{width:100%}
  .lesson-page .blueprint-causal{grid-template-columns:1fr}
  .lesson-page .blueprint-causal article+article{
    border-left:0;border-top:1px solid var(--border)}
  .lesson-page .engine-heap-projections{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .lesson-page .lesson-code-target-line,
  .lesson-page .blueprint-player,
  .lesson-page .blueprint-player *{
    scroll-behavior:auto!important;transition-duration:0ms!important;
    animation:none!important}
}

/* evidence-atelier:start */
/* Dashboard-only foundation. Lesson pages deliberately keep the stable shared
   semantic theme above; the three dashboard entry points opt into this scope. */
body.dashboard-app{background:var(--bg);color:var(--ink)}
.dashboard-app .solve.lr-row{color:var(--ink)}
.dashboard-app :focus-visible{outline:var(--focus-ring) solid var(--accent);outline-offset:2px}
.dashboard-app .panel:focus-visible{outline:none}
.dashboard-app .wrap{max-width:calc(var(--app-shell-max) + var(--app-nav-width));
  column-gap:var(--space-xl);padding-inline:var(--app-shell-gutter)}
.dashboard-app .dashboard-main{min-width:0}

/* The shell is an architectural datum, not a stack of floating controls. */
.dashboard-app .app-nav{border-inline-end:1px solid var(--border);
  background:var(--bg);box-shadow:none}
.dashboard-app .app-nav-brand{border-radius:var(--radius-sm)}
.dashboard-app .app-nav-mark{color:var(--accent)}
.dashboard-app .app-nav-track{-webkit-mask-image:none;mask-image:none}
.dashboard-app .app-nav-track[data-overflow-start="true"][data-overflow-end="true"]{
  -webkit-mask-image:linear-gradient(to right,transparent 0,var(--ink) var(--space-xl),var(--ink) calc(100% - var(--space-xl)),transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,var(--ink) var(--space-xl),var(--ink) calc(100% - var(--space-xl)),transparent 100%)}
.dashboard-app .app-nav-track[data-overflow-start="true"][data-overflow-end="false"]{
  -webkit-mask-image:linear-gradient(to right,transparent 0,var(--ink) var(--space-xl));
  mask-image:linear-gradient(to right,transparent 0,var(--ink) var(--space-xl))}
.dashboard-app .app-nav-track[data-overflow-start="false"][data-overflow-end="true"]{
  -webkit-mask-image:linear-gradient(to right,var(--ink) calc(100% - var(--space-xl)),transparent 100%);
  mask-image:linear-gradient(to right,var(--ink) calc(100% - var(--space-xl)),transparent 100%)}
.dashboard-app .app-nav-link{min-height:var(--control-target);
  border-radius:var(--radius-sm);background:transparent;box-shadow:none;
  transition-property:transform,opacity;transition-duration:var(--motion-fast);
  transition-timing-function:var(--ease-standard)}
.dashboard-app .app-nav-link[aria-current="page"]{background:transparent;
  color:var(--ink);border-inline-start:var(--datum-width) solid var(--accent)}
.dashboard-app .theme-tg{min-height:var(--control-target);
  border-radius:var(--radius-sm);box-shadow:none;
  transition-property:transform,opacity;transition-duration:var(--motion-fast);
  transition-timing-function:var(--ease-standard)}

/* Every view starts on the same hard axis: coordinate, title, purpose, decision. */
.dashboard-app .view-head{display:grid;
  grid-template-columns:var(--datum-width) minmax(0,1fr);
  gap:var(--space-xs) var(--space-lg);align-items:start;
  margin-bottom:var(--space-3xl);padding:0}
.dashboard-app .view-head::before{content:"";grid-column:1;grid-row:1 / span 3;
  inline-size:var(--datum-width);block-size:100%;min-block-size:var(--space-3xl);
  background:var(--accent);transform-origin:top}
.dashboard-app .view-head>*{grid-column:2;min-width:0}
.dashboard-app .view-head-kicker{font-family:var(--mono);font-size:var(--fs-label);
  font-weight:600;letter-spacing:var(--ls-label);color:var(--ink-faint)}
.dashboard-app .view-head-title{font-size:var(--fs-view-title);
  line-height:var(--lh-view-title);letter-spacing:normal;
  font-weight:800;max-inline-size:18ch;text-wrap:balance}
.dashboard-app .view-head p{font-size:var(--fs-title);line-height:var(--lh-body);
  max-inline-size:68ch;color:var(--ink-muted)}
.dashboard-app .cat-head h1,
.dashboard-app .cc-head h1{font-size:var(--fs-view-title);
  line-height:var(--lh-view-title);letter-spacing:normal}

/* Panels attach to the datum through rules and proportion. Elevation never
   comes from blur, glass, glow, grain, or a decorative gradient. */
.dashboard-app .card{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:none;align-self:start}
.dashboard-app .card .t{line-height:var(--lh-snug)}
.dashboard-app .sec{font-size:var(--fs-section-title);font-weight:600;
  line-height:var(--lh-snug);gap:var(--space-sm);color:var(--ink)}
.dashboard-app .sec::before{inline-size:var(--datum-width);
  block-size:var(--space-lg);background:var(--evidence)}
.dashboard-app .sec::after{background:var(--border-strong)}
.dashboard-app .lesson-catalog-card{border-radius:var(--radius);box-shadow:none}
.dashboard-app .modal{border-radius:var(--radius-lg);box-shadow:none}
.dashboard-app .info,
.dashboard-app .modal .cl{min-width:var(--control-target);min-height:var(--control-target);
  border-radius:var(--radius-sm)}
.dashboard-app .hero>svg{filter:none}
.dashboard-app .sigtrack .val,
.dashboard-app .tlnode{box-shadow:none}
.dashboard-app .qrail .segs i,
.dashboard-app .track,
.dashboard-app .mtrack,
.dashboard-app .sigtrack,

/* The Now panel is a single question and a single organism (Law C, 2026-08-24):
   the former two-column evidence layout retired with plan navigation's move to
   the Preparation space. */
.dashboard-app .grid.act{grid-template-columns:repeat(12,minmax(0,1fr));
  gap:var(--space-lg)}
.dashboard-app .act>.qcard{grid-column:1 / span 8}
.dashboard-app .act>.rail{grid-column:9 / -1}

.dashboard-app .dashboard-empty-state{display:grid;gap:var(--space-sm);
  max-inline-size:68ch;margin-block-start:var(--space-lg);padding:var(--space-lg);
  border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}
.dashboard-app .dashboard-empty-state strong{color:var(--ink);
  font:600 var(--fs-section-title)/var(--lh-snug) var(--ui)}
.dashboard-app .dashboard-empty-state p{margin:0;color:var(--ink-muted);
  font-size:var(--fs-body);line-height:var(--lh-body)}

.dashboard-app .failure-locus-check{display:grid;gap:var(--space-xs);
  margin-block-start:var(--space-lg);padding-block-start:var(--space-md);
  border-block-start:1px solid var(--border)}
.dashboard-app .failure-locus-head{display:flex;flex-wrap:wrap;
  align-items:baseline;justify-content:space-between;gap:var(--space-sm)}
.dashboard-app .failure-locus-value{color:var(--ink);
  font:600 var(--fs-body)/var(--lh-snug) var(--ui)}
.dashboard-app .failure-locus-sample{color:var(--ink-faint);
  font:600 var(--fs-label)/var(--lh-snug) var(--mono)}
.dashboard-app .failure-locus-action{max-inline-size:68ch;margin:0;
  color:var(--ink-muted);font-size:var(--fs-body);line-height:var(--lh-body)}

/* Five-format interview evidence. The grid is a presentation grouping only:
   every count, state and reason arrives from the validated metric product. */
.dashboard-app .round-evidence-formats{display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));
  gap:var(--space-md);margin-block-start:var(--space-lg)}
.dashboard-app .round-evidence-format{min-width:0;padding:var(--space-md);
  border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface)}
.dashboard-app .round-evidence-format>h3{margin:0 0 var(--space-sm);
  color:var(--ink);font:600 var(--fs-body)/var(--lh-snug) var(--ui)}
.dashboard-app .round-evidence-cell{display:grid;gap:var(--space-xs);
  padding-block:var(--space-sm);border-block-start:1px solid var(--border)}
.dashboard-app .round-evidence-cell-head{display:flex;align-items:baseline;
  justify-content:space-between;gap:var(--space-sm)}
.dashboard-app .round-evidence-state{color:var(--ink-muted);
  font:600 var(--fs-label)/var(--lh-snug) var(--ui)}
.dashboard-app .round-evidence-cell[data-evidence-state="OBSERVED"] .round-evidence-state{
  color:var(--role-good)}
.dashboard-app .round-evidence-ratio{color:var(--ink);
  font-family:var(--mono);font-size:var(--fs-title);font-weight:800;line-height:1;
  font-variant-numeric:tabular-nums}
.dashboard-app .round-evidence-counts{color:var(--ink-muted);
  font-size:var(--fs-label);line-height:var(--lh-body)}
.dashboard-app .round-evidence-reasons{display:grid;gap:var(--space-sm);
  margin-block-start:var(--space-xs)}
.dashboard-app .round-evidence-reasons h5{margin:0;color:var(--ink-faint);
  font:600 var(--fs-label)/var(--lh-snug) var(--ui)}
.dashboard-app .round-evidence-reasons ul{display:grid;gap:var(--space-2xs);
  margin:var(--space-xs) 0 0;padding-inline-start:var(--space-lg);
  color:var(--ink-muted);font-size:var(--fs-label);line-height:var(--lh-body)}
.dashboard-app .company-preparation-state{margin-block-start:var(--space-md);
  color:var(--ink);font-weight:600}
.dashboard-app .company-preparation-elements{display:grid;gap:var(--space-sm);
  margin-block-start:var(--space-lg)}
.dashboard-app .company-preparation-element{display:grid;gap:var(--space-xs);
  padding:var(--space-md);border:1px solid var(--border);
  border-radius:var(--radius-sm);background:var(--surface)}
.dashboard-app .company-preparation-element-head{display:flex;flex-wrap:wrap;
  justify-content:space-between;gap:var(--space-sm)}
.dashboard-app .company-preparation-element-head>span,
.dashboard-app .company-preparation-gap{color:var(--ink-muted);
  font-size:var(--fs-label);line-height:var(--lh-body)}

/* Recovered proportion primitive: one exact whole, with the semantic legend as
   the readable source of truth. The 10x10 grid is aria-hidden; tone never carries
   a category without its adjacent label, count and share. */
.dashboard-app .cmp-waffle{display:grid;
  grid-template-columns:minmax(8rem,12rem) minmax(0,1fr);
  align-items:center;gap:var(--space-lg);margin:var(--space-lg) 0}
.dashboard-app .cmp-waffle__grid{display:grid;
  grid-template-columns:repeat(10,minmax(0,1fr));gap:var(--space-3xs);
  inline-size:100%;aspect-ratio:1}
.dashboard-app .cmp-waffle__cell{min-inline-size:0;min-block-size:0;
  border-radius:var(--radius-sm);background:var(--role-sub)}
.dashboard-app .cmp-waffle__cell[data-role="mature"]{background:var(--role-mature)}
.dashboard-app .cmp-waffle__cell[data-role="developing"]{background:var(--role-developing)}
.dashboard-app .cmp-waffle__cell[data-role="mastered"]{background:var(--role-mastered)}
.dashboard-app .cmp-waffle__cell[data-role="graduated"]{background:var(--role-graduated)}
.dashboard-app .cmp-waffle__cell[data-role="good"]{background:var(--role-good)}
.dashboard-app .cmp-waffle__cell[data-role="route"]{background:var(--role-route)}
.dashboard-app .cmp-waffle__cell[data-role="accent"]{background:var(--role-accent)}
.dashboard-app .cmp-waffle__cell--empty{background:var(--track)}
.dashboard-app .cmp-waffle__legend ul{display:grid;gap:var(--space-sm);
  margin:0;padding:0;list-style:none}
.dashboard-app .cmp-waffle__item{display:grid;
  grid-template-columns:var(--space-sm) minmax(0,1fr) auto auto;
  align-items:center;gap:var(--space-xs);min-width:0;color:var(--ink-muted);
  font-size:var(--fs-body);line-height:var(--lh-snug)}
.dashboard-app .cmp-waffle__item>i{inline-size:var(--space-sm);
  block-size:var(--space-sm);border-radius:var(--radius-sm);background:var(--role-sub)}
.dashboard-app .cmp-waffle__item[data-role="mature"]>i{background:var(--role-mature)}
.dashboard-app .cmp-waffle__item[data-role="developing"]>i{background:var(--role-developing)}
.dashboard-app .cmp-waffle__item[data-role="mastered"]>i{background:var(--role-mastered)}
.dashboard-app .cmp-waffle__item[data-role="graduated"]>i{background:var(--role-graduated)}
.dashboard-app .cmp-waffle__item[data-role="good"]>i{background:var(--role-good)}
.dashboard-app .cmp-waffle__item[data-role="route"]>i{background:var(--role-route)}
.dashboard-app .cmp-waffle__item[data-role="accent"]>i{background:var(--role-accent)}
.dashboard-app .cmp-waffle__item>strong{color:var(--ink)}

/* Consequential claims use one proof grammar; provenance stays adjacent to the
   value so stale or provisional evidence cannot borrow headline authority. */
.dashboard-app .evidence-brick{display:grid;
  grid-template-columns:minmax(0,1fr) auto;gap:var(--space-xs) var(--space-md);
  padding-block:var(--space-md);border-block-start:1px solid var(--border);
  min-width:0}
.dashboard-app .evidence-brick-claim{grid-column:1 / -1;
  color:var(--ink-muted);font-size:var(--fs-body);line-height:var(--lh-body)}
.dashboard-app .evidence-brick-value{font:800 var(--fs-stat)/1 var(--ui);
  font-variant-numeric:tabular-nums;color:var(--ink)}
.dashboard-app .evidence-brick-meta{grid-column:1 / -1;color:var(--ink-muted);
  font-size:var(--fs-label);line-height:var(--lh-body)}
.dashboard-app .evidence-brick[data-integrity-state="measured"] .evidence-brick-value{
  color:var(--evidence)}
.dashboard-app .evidence-brick[data-integrity-state="estimated"] .evidence-brick-value,
.dashboard-app .evidence-brick[data-integrity-state="provisional"] .evidence-brick-value,
.dashboard-app .evidence-brick[data-integrity-state="stale"] .evidence-brick-value,
.dashboard-app .evidence-brick[data-integrity-state="unavailable"] .evidence-brick-value{
  color:var(--ink-muted)}
.dashboard-app .evidence-brick-compact{padding-block:var(--space-xs);
  gap:var(--space-3xs) var(--space-md)}
.dashboard-app .evidence-brick-compact .evidence-brick-claim{grid-column:auto;
  font-size:var(--fs-label)}
.dashboard-app .evidence-brick-compact .integrity-band{padding-block-start:var(--space-3xs);
  border-block-start:0}
.dashboard-app .integrity-band{grid-column:1 / -1;display:flex;flex-wrap:wrap;
  gap:var(--space-xs) var(--space-md);padding-block-start:var(--space-xs);
  border-block-start:1px solid var(--border);font-family:var(--mono);
  font-size:var(--fs-label);line-height:var(--lh-body);color:var(--ink-faint);
  font-variant-numeric:tabular-nums}

/* Secondary routes are real links and read as a local coordinate system, not
   another row of global tabs. */
.dashboard-app .workspace-switcher{display:flex;align-items:center;flex-wrap:wrap;
  gap:var(--space-xs);margin-bottom:var(--space-xl);
  border-block-end:1px solid var(--border)}
.dashboard-app .workspace-link{display:inline-flex;align-items:center;
  min-height:var(--control-target);padding:var(--space-xs) var(--space-sm);
  border-block-end:var(--datum-width) solid transparent;
  border-radius:var(--radius-sm) var(--radius-sm) 0 0;color:var(--ink-muted);
  font:600 var(--fs-body)/1 var(--ui);text-decoration:none;
  transition-property:transform,opacity;transition-duration:var(--motion-fast);
  transition-timing-function:var(--ease-standard)}
.dashboard-app .workspace-link[aria-current="page"]{color:var(--ink);
  border-block-end-color:var(--accent)}

/* Evidence Atelier motion: one datum establishment. All other legacy
   colour/layout interpolation is disabled in this scope. */
.dashboard-app .atelier-motion{transition-property:transform,opacity;
  transition-duration:var(--motion-base);
  transition-timing-function:var(--ease-standard)}
.dashboard-app :is(.company-directory-search input,
  .corow,.btn-link,.lnk2,.modal .cl,.fill,.tlrow){transition:none}
body.dashboard-app #app.boot-reveal .panel.on .card{animation:none}
@keyframes atelier-datum-in{from{transform:scaleY(.18)}to{transform:scaleY(1)}}
body.dashboard-app #app.boot-reveal .panel.on .view-head::before{
  animation:atelier-datum-in var(--motion-slow) var(--ease-standard) both}

@media(hover:hover){
  .dashboard-app .workspace-link:hover,
  .dashboard-app .app-nav-link:hover{transform:translateY(calc(-1 * var(--space-3xs)))}
}
@media(max-width:1180px){
  .dashboard-app .app-nav{border-inline-end:0;
    border-block-end:1px solid var(--border)}
  .dashboard-app .app-nav-link{border-inline-start:0;
    border-block-end:var(--datum-width) solid transparent}
  .dashboard-app .app-nav-link[aria-current="page"]{border-inline-start:0;
    border-block-end-color:var(--accent)}
  .dashboard-app .app-nav-link:focus-visible{outline-offset:-2px}
}
@media(max-width:960px){
  .dashboard-app .grid.act{grid-template-columns:1fr}
  .dashboard-app .act>.qcard,
  .dashboard-app .act>.rail{grid-column:auto}
}
@media(max-width:430px){
  .dashboard-app .wrap{padding-inline:var(--space-sm)}
  .dashboard-app .view-head{gap:var(--space-xs) var(--space-md);
    margin-bottom:var(--space-xl);padding-top:var(--space-md)}
  .dashboard-app .view-head-title{font-size:var(--fs-view-title-mobile);
    max-inline-size:20ch}
  .dashboard-app .cat-head h1,
  .dashboard-app .cc-head h1{font-size:var(--fs-view-title-mobile)}
  .dashboard-app .workspace-link,
  .dashboard-app .app-nav-link,
  .dashboard-app .theme-tg,
  .dashboard-app .info,
  .dashboard-app .modal .cl,
  .dashboard-app a.qrow,
  .dashboard-app .rolerow-title{min-height:var(--control-target-mobile)}
  .dashboard-app .app-nav-link{min-width:var(--control-target-mobile);
    justify-content:flex-start}
  .dashboard-app .app-nav-label,
  .dashboard-app .app-nav-link[aria-current="page"] .app-nav-label{display:inline}
  .dashboard-app .workspace-switcher{overflow-x:auto;flex-wrap:nowrap}
  .dashboard-app .cat-wrap{padding-inline:var(--space-sm)}
  .dashboard-app .cat-card,
  .dashboard-app .cat-foundations{padding:var(--space-md)}
  .dashboard-app .cat-sample{padding:var(--space-sm);overflow-x:auto}
  .dashboard-app .cat-sample>*{min-width:0;max-width:100%}
  .dashboard-app .cat-sample .invgrid{grid-template-columns:1fr!important}
  .dashboard-app .cat-sample .qr-meta{white-space:normal}
  .dashboard-app .cmp-waffle{grid-template-columns:1fr}
  .dashboard-app .cmp-waffle__grid{max-inline-size:10rem}
}
@media(pointer:coarse){
  .dashboard-app .workspace-link,
  .dashboard-app .app-nav-link,
  .dashboard-app .theme-tg,
  .dashboard-app .info,
  .dashboard-app .modal .cl,
  .dashboard-app a.qrow,
  .dashboard-app .rolerow-title{min-height:var(--control-target-mobile)}
}
@media(prefers-reduced-motion:reduce){
  .dashboard-app *,
  .dashboard-app *::before,
  .dashboard-app *::after{animation:none!important;transition:none!important;
    scroll-behavior:auto!important}
}
/* evidence-atelier:end */

/* Observed weekly practice. One bar per week including the empty ones: a gap in
   the row is a week that happened with no activity, which is information. */
.hbars{display:flex;align-items:flex-end;gap:var(--space-3xs);height:56px;margin:var(--space-sm) 0}
.hbar{flex:1 1 0;min-width:var(--space-3xs);height:var(--h,0%);background:var(--role-accent);
  border-radius:var(--radius-sm) var(--radius-sm) 0 0;opacity:.85}
.hbar[style*="--h:0%"]{height:var(--space-3xs);background:var(--role-untouched);opacity:.5}

/* ── Chroma shell (rediseño v4, 2026-08-25) ────────────────────────────────
   Cabecera superior sticky con pestañas subrayadas, sello de frescura y grupo
   de tema de tres estados. Scoped a .dashboard-app.chroma: las páginas de
   lecciones y catálogos conservan el raíl atelier. Valores del handoff v4. */
.dashboard-app.chroma .wrap{display:block;max-width:none;padding:0}
.dashboard-app.chroma .app-nav{position:sticky;top:0;z-index:10;height:auto;width:auto;
  flex-direction:row;align-items:baseline;flex-wrap:wrap;gap:var(--space-lg) var(--space-2xl);
  background:var(--bg);border-right:0;border-bottom:1px solid var(--border);
  padding:var(--space-md) var(--space-lg) 0;max-width:1200px;margin:0 auto}
.dashboard-app.chroma .app-nav-brand{font-size:var(--fs-headline);font-weight:800;
  letter-spacing:var(--ls-label);color:var(--ink);padding:0 0 var(--space-sm)}
.dashboard-app.chroma .app-nav-brand:hover{color:var(--accent)}
.dashboard-app.chroma .app-nav-mark{display:none}
.dashboard-app.chroma .app-nav-track{flex:1;overflow-x:auto}
.dashboard-app.chroma .app-nav-items{flex-direction:row;align-items:baseline;gap:var(--space-lg);width:max-content;padding:0}
.dashboard-app.chroma .app-nav-icon{display:none}
.dashboard-app.chroma .app-nav-link{flex:none;width:auto;min-height:0;justify-content:flex-start;padding:0 0 var(--space-sm);border:0;
  border-bottom:2px solid transparent;border-radius:0;background:none;
  color:var(--ink-muted);font-size:var(--fs-body)}
.dashboard-app.chroma .app-nav-link:hover{color:var(--ink);background:none}
.dashboard-app.chroma .app-nav-link[aria-current="page"]{color:var(--ink);
  border-bottom-color:var(--accent);background:none;font-weight:600}
.dashboard-app.chroma .app-nav-util{display:flex;flex-direction:row;align-items:center;
  gap:var(--space-md);margin-left:auto;padding:0 0 var(--space-sm);border:0;width:auto}
.dashboard-app.chroma .app-sello{font-family:var(--mono);font-size:var(--fs-label);
  color:var(--ink-faint);white-space:nowrap}
.dashboard-app.chroma .app-sello[data-stale="true"]{color:var(--status-error);font-weight:600}
.dashboard-app.chroma .theme-group{display:flex;gap:var(--space-3xs);background:var(--surface-raised);
  border:1px solid var(--border);border-radius:var(--radius-pill);padding:var(--space-3xs);flex:none}
/* Objetivo táctil: 20 px de alto se falla con el dedo. WCAG 2.2 pide 24 como
   mínimo, y el control de tema es de los pocos que se tocan de verdad. */
.dashboard-app.chroma .theme-seg{appearance:none;border:0;cursor:pointer;
  background:none;color:var(--ink-muted);font-family:var(--ui);
  font-size:var(--fs-label);border-radius:var(--radius-pill);
  padding:var(--space-2xs) var(--space-sm);min-height:var(--space-lg)}
.dashboard-app.chroma .theme-seg[aria-pressed="true"]{background:var(--surface);
  color:var(--ink);font-weight:600;box-shadow:var(--shadow)}
.dashboard-app.chroma .theme-seg:focus-visible{outline:2px solid var(--accent-line);outline-offset:1px}
.dashboard-app.chroma .dashboard-main{max-width:1200px;margin:0 auto;
  padding:var(--space-xl) var(--space-lg) var(--space-3xl)}

/* ── Chroma · espacio Ahora (v4 S2) ─────────────────────────────────────────
   Plan de hoy + Memoria a 7 días + Cola de repaso. Primitivas del handoff:
   tira segmentada (fs base 9px→tokens), pill de memoria, tabla navegable. */
.chroma .v4ahora{display:grid;gap:var(--space-md)}
.chroma .v4ahora-top{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1.4fr));gap:var(--space-md)}
.chroma .v4card{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-md);box-shadow:var(--shadow);padding:var(--space-lg)}
.chroma .v4head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-sm)}
.chroma .v4title{margin:0;display:flex;align-items:center;gap:var(--space-2xs);
  font-size:var(--fs-title);font-weight:600}
.chroma .v4count{font-family:var(--mono);font-size:var(--fs-label);color:var(--ink-faint)}
/* El kicker de tarjeta (memoria a 7 días) comparte la fila con su ⓘ. */
.chroma .v4kicker{display:flex;align-items:center;gap:var(--space-2xs);
  font-size:var(--fs-label);font-weight:600;letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--ink-faint)}
.chroma .v4strip{display:flex;gap:var(--space-2xs);margin-top:var(--space-sm)}
.chroma .v4seg{flex:1;height:9px;border-radius:var(--radius-seg);background:var(--track)}
.chroma .v4seg.on{background:var(--role-good)}
.chroma .v4tasks{display:grid;gap:var(--space-3xs);margin-top:var(--space-sm)}
.chroma .v4task{display:flex;align-items:center;gap:var(--space-sm);
  padding:var(--space-2xs) var(--space-xs);border-radius:var(--radius-sm)}
.chroma .v4circle{width:18px;height:18px;border-radius:var(--radius-pill);flex:none;
  display:grid;place-items:center;font-size:var(--fs-label);line-height:1;color:transparent;
  border:2px solid var(--border-strong)}
.chroma .v4circle.on{background:var(--role-good);border-color:var(--role-good);color:var(--on-accent)}
.chroma .v4tasktxt{font-size:var(--fs-body)}
.chroma .v4tasktxt.on{color:var(--ink-faint);text-decoration:line-through}
.chroma .v4chip{margin-left:auto;font-size:var(--fs-label);border-radius:var(--radius-pill);
  padding:var(--space-3xs) var(--space-xs);white-space:nowrap;flex:none}
.chroma .v4chip-err{font-family:var(--mono);color:var(--status-error);background:var(--surface-raised)}
.chroma .v4chip-accent{color:var(--accent);background:var(--accent-soft)}
.chroma .v4membig{font-family:var(--mono);font-size:var(--fs-hero);line-height:var(--lh-tight);
  font-weight:600;color:var(--role-good);margin-top:var(--space-xs)}
.chroma .v4memgrid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-sm);margin-top:var(--space-md)}
.chroma .v4memcell{font-family:var(--mono);font-size:var(--fs-title);font-weight:600;color:var(--ink-muted)}
.chroma .v4memlab,.chroma .v4memfoot{font-size:var(--fs-label);color:var(--ink-faint)}
.chroma .v4memfoot{margin-top:var(--space-sm)}
.chroma .v4colasub{margin:var(--space-2xs) 0 0;font-size:var(--fs-label);color:var(--ink-faint)}
.chroma .v4colahead{display:inline-flex;align-items:baseline;gap:var(--space-sm);margin-top:var(--space-md)}
.chroma .v4colan{font-size:var(--fs-display);font-weight:600;color:var(--accent);line-height:1}
.chroma .v4colainfo{font-size:var(--fs-label);color:var(--ink-faint)}
.chroma .v4tabla{display:grid;gap:0;margin-top:var(--space-md);overflow-x:auto}
.chroma .v4thead,.chroma .v4row{display:grid;
  gap:var(--space-md);align-items:center;border-bottom:1px solid var(--border)}
/* The column template belongs to the TABLE, not to the shared row behaviour above, so a
   future table can reuse .v4row without inheriting the queue's six columns. */
.chroma .v4cola .v4thead,.chroma .v4cola .v4row{
  grid-template-columns:92px minmax(180px,1fr) 96px 104px 118px 126px;min-width:744px}
.chroma .v4thead{padding:var(--space-2xs) var(--space-sm) var(--space-xs);
  font-size:var(--fs-label);color:var(--ink-muted);white-space:nowrap;font-weight:600}
.chroma .v4thead .num{text-align:right}
.chroma .v4row{padding:var(--space-xs) var(--space-sm);color:var(--ink);text-decoration:none;
  transition:background var(--motion-fast) var(--ease-standard)}
.chroma .v4row:hover{background:var(--surface-hover)}
.chroma .v4row:focus-visible{outline:2px solid var(--accent-line);outline-offset:-2px}
.chroma .v4fase{font-size:var(--fs-label);min-width:0}

/* ── Catálogo por ejercicio: el solve y sus repasos, agrupados ──
   Reutiliza .v4ph (las píldoras de fase) y .v4dot (dificultad) de la cola: un mismo
   hecho se dice igual en las dos vistas o el lector aprende dos idiomas para lo mismo. */
.chroma .v4cat{min-width:0}
.chroma .v4cathead,.chroma .v4catrow{display:grid;
  grid-template-columns:108px minmax(190px,1.5fr) minmax(110px,.9fr) 116px 72px 66px minmax(176px,1fr) 20px;
  gap:var(--space-md);align-items:center;min-width:966px;text-align:left}
.chroma .v4cathead{padding:var(--space-2xs) var(--space-sm) var(--space-xs);
  font-size:var(--fs-label);color:var(--ink-muted);white-space:nowrap;font-weight:600;
  border-bottom:1px solid var(--border);margin-top:var(--space-md)}
.chroma .v4cathead .num,.chroma .v4catn{text-align:right}
.chroma .v4catlist{overflow-x:auto}
.chroma .v4catgroup{border-bottom:1px solid var(--border)}
.chroma .v4catrow{width:100%;appearance:none;border:none;background:none;cursor:pointer;
  padding:var(--space-xs) var(--space-sm);color:var(--ink);font:inherit;
  transition:background var(--motion-fast) var(--ease-standard)}
.chroma .v4catrow:hover{background:var(--surface-hover)}
.chroma .v4catrow:focus-visible{outline:2px solid var(--accent-line);outline-offset:-2px}
.chroma .v4catdate{font-size:var(--fs-label);color:var(--ink-muted)}
.chroma .v4catname{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.chroma .v4catpat{min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;font-size:var(--fs-label);color:var(--ink-muted)}
/* La fase, escalera segmentada de cuatro peldaños (design-system 3.3) con su palabra
   debajo: el stepper dice CUÁNTO se ha avanzado, la palabra dice DÓNDE. */
.chroma .v4catfase{min-width:0;display:flex;flex-direction:column;gap:var(--space-3xs)}
.chroma .v4catfase .steps{flex:none}
.chroma .v4catfase .seg{height:4px;border-radius:var(--radius-hair)}
.chroma .v4catfaselab{font-size:var(--fs-label);color:var(--ink-muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chroma .v4catn{font-size:var(--fs-label);color:var(--ink-muted)}
.chroma .v4catn.bad{color:var(--status-error);font-weight:600}
/* El historial es una tendencia, no un rosario de veredictos: sparkline de minutos por
   sesión, a la altura de una fila (18px) en vez de los 54 de tarjeta. La insignia de
   graduado que vivía aquí se fue a la columna de fase, que es donde ese peldaño pertenece. */
.chroma .v4catspark{min-width:0;display:flex;align-items:center}
.chroma .v4catspark svg{display:block}
.chroma .v4catone{font-size:var(--fs-label);color:var(--ink-faint)}

/* Detalle abierto: un bloque por sesión, con sus pares etiqueta/valor. */
.chroma .v4catdet{padding:var(--space-xs) var(--space-sm) var(--space-md);
  background:var(--surface-hover);display:grid;gap:var(--space-xs)}
.chroma .v4catev{border-left:2px solid var(--border);padding-left:var(--space-sm)}
.chroma .v4catevhead{display:flex;gap:var(--space-sm);align-items:baseline;flex-wrap:wrap}
.chroma .v4catevk{font-size:var(--fs-label);font-weight:600;color:var(--ink)}
.chroma .v4catevd{font-size:var(--fs-label);color:var(--ink-faint)}
.chroma .v4catevr{font-size:var(--fs-label);font-weight:600}
.chroma .v4catpairs{display:flex;flex-wrap:wrap;gap:var(--space-sm);margin:var(--space-3xs) 0 0}
.chroma .v4catpair{display:flex;gap:var(--space-2xs);align-items:baseline;font-size:var(--fs-label)}
.chroma .v4catpair dt{color:var(--ink-faint)}
.chroma .v4catpair dd{margin:0;color:var(--ink-muted)}
.chroma .v4catceil{color:var(--ink-faint)}
.chroma .v4ph{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;padding:var(--space-3xs) var(--space-2xs);border-radius:var(--radius-hair);
  font-size:var(--fs-label);line-height:1.5;border:1px solid currentColor}
/* Acquisition is the newest and most fragile material, so it carries the attention role;
   maintenance is the settled end. Semantic scale, kept clear of the accent hue. */
.chroma .v4ph-a{color:var(--role-developing)}
.chroma .v4ph-c{color:var(--ink-muted)}
.chroma .v4ph-m{color:var(--role-mature)}
.chroma .v4ph-g{color:var(--evidence)}
.chroma .v4mem{font-size:var(--fs-label);font-weight:600;text-decoration:none}
.chroma .v4mem.low{color:var(--status-error)}
.chroma .v4mem.okk{color:var(--status-good)}
.chroma .v4name{font-size:var(--fs-body);font-weight:600;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.chroma .v4diff{display:flex;align-items:center;gap:var(--space-2xs);
  font-size:var(--fs-label);color:var(--ink-faint);white-space:nowrap}
.chroma .v4dot{width:8px;height:8px;border-radius:var(--radius-pill);flex:none}
/* Escala de dificultad repartida por la rampa, no amontonada en su extremo:
   con heat-3 y heat-4 (luminancia .358 y .255 en claro) medio y difícil se leían
   como el mismo verde. heat-1 / heat-2 / heat-4 reparte los tres saltos. */
.chroma .v4dot-e{background:var(--heat-1)}
.chroma .v4dot-m{background:var(--heat-2)}
.chroma .v4dot-h{background:var(--heat-4)}
.chroma .v4clk{font-size:var(--fs-label);color:var(--ink-muted);text-align:right;white-space:nowrap}
.chroma .v4clk2{font-size:var(--fs-label);color:var(--ink-faint);text-align:right;white-space:nowrap}
.chroma .v4colabtn{margin-top:var(--space-3xs);appearance:none;border:none;background:none;
  width:100%;display:flex;align-items:center;justify-content:center;gap:var(--space-2xs);
  padding:var(--space-xs);color:var(--accent);font-family:inherit;
  font-size:var(--fs-label);font-weight:600;cursor:pointer;border-radius:var(--radius-sm);
  transition:background var(--motion-fast) var(--ease-standard)}
.chroma .v4colabtn:hover{background:var(--accent-soft)}
.chroma .v4colabtn:focus-visible{outline:2px solid var(--accent-line);outline-offset:2px}
.chroma .v4chev{transition:transform var(--motion-base) var(--ease-standard)}
.chroma .v4chev.up{transform:rotate(180deg)}

/* ── Chroma · Maestría (v4 S3): pipeline, dot-plot, calibración con halo ── */
.chroma .v4pipetop{display:inline-flex;align-items:center;gap:var(--space-xs)}
.chroma .v4stack{display:flex;gap:var(--space-3xs);height:8px;width:180px;
  border-radius:var(--radius-seg);overflow:hidden}
.chroma .v4stackseg{display:block;height:100%}
.chroma .v4pipen{font-size:var(--fs-label);color:var(--ink-faint)}
.chroma .v4pipeeje{display:flex;align-items:center;gap:var(--space-xs);
  margin-top:var(--space-md);font-size:var(--fs-label);color:var(--ink-faint)}
.chroma .v4pipe{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:var(--space-lg);margin-top:var(--space-sm);align-items:start}
.chroma .v4pipehead{display:flex;align-items:center;padding-bottom:var(--space-2xs);
  border-bottom:2px solid var(--border-strong)}
.chroma .v4pipehead .v4pipen{margin-left:auto}
.chroma .v4pipefilas{display:grid;gap:var(--space-2xs);margin-top:var(--space-xs);color:var(--ink-muted)}
.chroma .v4pipefila{display:flex;justify-content:space-between;gap:var(--space-sm);
  align-items:baseline;font-size:var(--fs-label)}
.chroma .v4pipefila .mono{font-size:var(--fs-label)}
@media (max-width:900px){.chroma .v4pipe{grid-template-columns:repeat(2,minmax(0,1fr))}}
.chroma .v4fc{display:grid;gap:var(--space-xs);margin-top:var(--space-2xs)}
.chroma .v4fcrow,.chroma .v4calrow{display:grid;grid-template-columns:72px 1fr 64px;
  gap:var(--space-sm);align-items:center}
.chroma .v4calrow{grid-template-columns:110px 1fr 84px}
.chroma .v4fclab{font-size:var(--fs-label);color:var(--ink-faint);white-space:nowrap}
.chroma .v4callab{font-size:var(--fs-label);color:var(--ink-muted);white-space:nowrap;font-weight:600}
.chroma .v4fctrack{position:relative;height:18px}
.chroma .v4fcline{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:1px;background:var(--track)}
.chroma .v4fcseg{position:absolute;top:50%;transform:translateY(-50%);height:2px;background:var(--role-mastered);opacity:.35}
.chroma .v4calseg{position:absolute;top:50%;transform:translateY(-50%);height:2px;background:var(--accent);opacity:.35}
.chroma .v4fcpop{position:absolute;top:50%;transform:translate(-50%,-50%);width:10px;height:10px;border-radius:var(--radius-pill);
    background:var(--role-untouched);box-shadow:0 0 0 2px var(--surface)}
.chroma .v4fcyou{position:absolute;top:50%;transform:translate(-50%,-50%);width:12px;height:12px;border-radius:var(--radius-pill);
    background:var(--role-mastered);box-shadow:0 0 0 2px var(--surface)}
.chroma .v4calpred{position:absolute;top:50%;transform:translate(-50%,-50%);width:10px;height:10px;border-radius:var(--radius-pill);
    background:var(--surface);border:2px solid var(--accent);box-shadow:0 0 0 2px var(--surface)}
.chroma .v4calobs{position:absolute;top:50%;transform:translate(-50%,-50%);width:12px;height:12px;border-radius:var(--radius-pill);
    background:var(--status-good);box-shadow:0 0 0 2px var(--surface)}
.chroma .v4fcval{font-size:var(--fs-label);color:var(--role-mastered);text-align:right;white-space:nowrap}
.chroma .v4calrow .v4fcval{color:var(--status-good)}
.chroma .v4fcval.muted{color:var(--ink-faint)}
.chroma .v4caln{color:var(--ink-faint);font-weight:400}
.chroma .v4fceje .v4fcejevals{display:flex;justify-content:space-between;
  font-size:var(--fs-label);color:var(--ink-faint)}
.chroma .v4maestria-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:var(--space-md)}

/* ── Chroma · Crecimiento + Ritmo (v4 S4) ─────────────────────────────────── */
.chroma .v4cells{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:var(--space-md);margin-top:var(--space-md)}
.chroma .v4cellval{font-size:var(--fs-section-title);line-height:var(--lh-snug);
  font-weight:600;white-space:nowrap}
.chroma .v4celllab{font-size:var(--fs-label);color:var(--ink-faint)}
.chroma .v4wks{display:flex;align-items:flex-end;gap:var(--space-2xs);height:140px;
  margin-top:var(--space-lg);border-bottom:1px solid var(--border)}
.chroma .v4wk{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end}
.chroma .v4wkr{width:100%;background:var(--accent-soft-2);
  border-radius:var(--radius-seg) var(--radius-seg) 0 0}
.chroma .v4wkn{width:100%;background:var(--accent)}
.chroma .v4wkeje{display:flex;justify-content:space-between;
  font-size:var(--fs-label);color:var(--ink-faint);margin-top:var(--space-2xs)}

/* ── Chroma · Preparación + Aprender (v4 S5) ──────────────────────────────── */
.chroma .v4alert{display:flex;align-items:center;gap:var(--space-sm);background:var(--surface);
  border:1px solid var(--border-strong);border-left:3px solid var(--status-error);
  border-radius:var(--radius-sm);padding:var(--space-sm) var(--space-md);
  font-size:var(--fs-label);color:var(--ink-muted);margin-bottom:var(--space-md)}
.chroma .v4sigcells{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:var(--space-lg);margin-top:var(--space-md)}
.chroma .v4sigval{font-size:var(--fs-stat);font-weight:600}
.chroma .v4sigbar{height:4px;border-radius:var(--radius-seg);margin:var(--space-2xs) 0}
.chroma .v4sigbar:not(.v4sigbar-empty){background:var(--track)}
.chroma .v4sigbar>div{height:100%;border-radius:var(--radius-seg);background:var(--role-good)}
.chroma .v4signame{font-size:var(--fs-body);font-weight:600}
.chroma .v4sigsub{font-size:var(--fs-label);color:var(--ink-faint)}
.chroma .v4plan{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:var(--space-2xl);align-items:center;margin-top:var(--space-md)}
.chroma .v4planpct{font-size:var(--fs-display);line-height:var(--lh-tight);font-weight:600;color:var(--accent)}
.chroma .v4planbar{height:8px;background:var(--track);border-radius:var(--radius-sm)}
.chroma .v4planbar>div{height:100%;border-radius:var(--radius-sm);background:var(--accent)}
.chroma .v4planbar-top{max-width:220px;margin-top:var(--space-sm)}
.chroma .v4plansum>.v4celllab{margin-top:var(--space-2xs)}
.chroma .v4planrows{display:grid;grid-template-columns:1fr;gap:var(--space-sm);margin-top:0}
.chroma .v4planrow{display:grid;grid-template-columns:minmax(160px,240px) 1fr 90px;
  gap:var(--space-md);align-items:center;padding:0;border:none;background:none;border-radius:0}
.chroma .v4planrow h3{margin:0;font-size:var(--fs-body);font-weight:400}
.chroma .v4planrow[data-completed="0"] h3{color:var(--ink-muted)}
.chroma .v4planct{font-size:var(--fs-label);color:var(--ink-muted);text-align:right}
/* El pie responde a dos preguntas distintas: qué queda fuera del porcentaje y
   cuándo se tocó cada superficie. Iban seguidas en una sola línea corrida, con
   la misma tinta y el mismo tamaño; ahora cada una es un bloque con rótulo. */
.chroma .v4planfoot{display:grid;gap:var(--space-md);margin-top:var(--space-md)}
.chroma .v4planfoot-block{display:grid;gap:var(--space-3xs)}
.chroma .v4planfoot-lab{font-weight:600;color:var(--ink-muted)}
.chroma .v4planfoot-items{display:flex;flex-wrap:wrap;
  gap:var(--space-2xs) var(--space-sm)}
.chroma .v4planfoot-why{margin:var(--space-3xs) 0 0;color:var(--ink-faint);
  max-width:64ch}
.chroma .v4planfoot-surface{display:inline-flex;gap:var(--space-2xs);
  padding:0;border:none;background:none;border-radius:0}
.chroma .v4planfoot-name{margin:0;font-size:inherit;font-weight:inherit;display:inline}
.chroma .v4ronda{display:grid;grid-template-columns:1fr;gap:var(--space-sm);margin-top:var(--space-md)}
.chroma .v4ronda .round-evidence-format{padding:0;border:none;background:none;border-radius:0}
.chroma .v4ronda .round-evidence-cell{padding:var(--space-2xs) 0;border:none;background:none;
  border-bottom:1px solid var(--border);border-radius:0}
.chroma .v4rondarow{display:flex;align-items:center;gap:var(--space-sm)}
.chroma .v4rondacircle{width:26px;height:26px;border-radius:var(--radius-pill);
  border:2px dashed var(--border-strong);flex:none}
.chroma .v4rondacircle[data-observed="true"]{border-style:solid;border-color:var(--role-good)}
.chroma .v4rondaname{font-size:var(--fs-body)}
.chroma .v4rondarow .round-evidence-state{margin-left:auto;font-size:var(--fs-label);color:var(--ink-faint)}
.chroma .v4formgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:var(--space-lg);margin-top:var(--space-md)}
.chroma .v4formhead{display:flex;justify-content:space-between;align-items:flex-end;
  gap:var(--space-md);min-height:40px}
.chroma .v4formpair{font-size:var(--fs-label);color:var(--ink-muted);white-space:nowrap}
.chroma .v4formbars{display:grid;gap:var(--space-3xs);margin-top:var(--space-2xs)}
.chroma .v4formbar{height:5px;background:var(--track);border-radius:var(--radius-seg)}
.chroma .v4formbar>div{height:100%;border-radius:var(--radius-seg)}
.chroma .v4formbar>.hist{background:var(--role-untouched)}
.chroma .v4formbar>.rec{background:var(--accent)}
.chroma .v4cohead{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-sm)}
.chroma .v4con{font-size:var(--fs-label);color:var(--ink-faint)}
.chroma .v4cogrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:var(--space-2xs) var(--space-xl);margin-top:var(--space-xs)}
.chroma .v4corow{display:flex;justify-content:space-between;gap:var(--space-sm);
  align-items:baseline;padding:var(--space-2xs) 0;border-bottom:1px solid var(--border)}
.chroma .v4cohire{font-size:var(--fs-label)}
.chroma .v4dirbody{margin-top:var(--space-md)}
.chroma .lesson-title{margin:0 0 var(--space-md)}
.chroma .lesson-head{display:flex;align-items:center;gap:var(--space-lg);flex-wrap:wrap}
.chroma .lesson-total{font-size:var(--fs-display);font-weight:600;color:var(--accent)}
.chroma .lesson-strip{flex:1;min-width:220px;display:flex;gap:var(--space-3xs);height:8px;
  border-radius:var(--radius-sm);overflow:hidden;margin-top:var(--space-2xs)}
.chroma .lesson-strip>div{height:100%}
/* La leyenda salta de línea por entradas enteras, nunca partiendo una etiqueta
   por dentro: cada entrada es una unidad de significado. */
.chroma .lesson-legend{display:flex;flex-wrap:wrap;gap:var(--space-sm) var(--space-lg);
  font-size:var(--fs-label);color:var(--ink-faint);margin-top:var(--space-2xs)}
/* Cada entrada de leyenda se queda en una línea: al nombrar los niveles por su
   nombre ("Muy deseables") las etiquetas partían en dos y descuadraban la fila. */
.chroma .lesson-leg{display:flex;align-items:center;gap:var(--space-2xs);white-space:nowrap}
.chroma .lesson-dot{width:8px;height:8px;border-radius:var(--radius-pill);flex:none}
.chroma .lesson-columns{columns:2 320px;column-gap:var(--space-2xl);margin-top:var(--space-lg)}
.chroma .lesson-catalog-group{break-inside:avoid;margin-bottom:var(--space-lg)}
.chroma .lesson-group-head{display:flex;align-items:center;gap:var(--space-2xs);
  margin:0 0 var(--space-xs);font-size:var(--fs-label);font-weight:600;
  letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink-faint)}
.chroma .lesson-catalog-grid{display:grid;grid-template-columns:1fr;gap:var(--space-2xs);
  list-style:none;margin:0;padding:0}
.chroma .lesson-catalog-item{display:block}
.chroma .lesson-catalog-card{display:flex;grid-template-columns:none;gap:var(--space-sm);
  align-items:center;padding:var(--space-2xs) 0;border:none;border-bottom:1px solid var(--border);
  border-radius:0;background:none;box-shadow:none;color:inherit;text-decoration:none}
.chroma a.lesson-catalog-card:hover .lesson-catalog-title{color:var(--accent)}
.chroma .lesson-catalog-number{font-size:var(--fs-label);color:var(--accent);white-space:nowrap}
.chroma .lesson-catalog-title{font-size:var(--fs-body);transition:color var(--motion-fast) var(--ease-standard)}

/* ── Chroma · «Dónde caes» en los diálogos (v4 S6) ────────────────────────── */
.scale-dot{position:absolute;top:50%;transform:translate(-50%,-50%);width:12px;height:12px;
  border-radius:var(--radius-pill);box-shadow:0 0 0 2px var(--surface)}
.scale-dot-legend{display:flex;flex-wrap:wrap;gap:var(--space-2xs) var(--space-md);
  margin-top:var(--space-2xs);font-size:var(--fs-label);color:var(--ink-faint)}
.scale-dot-leg{display:inline-flex;align-items:center;gap:var(--space-2xs)}
.scale-dot-sw{width:10px;height:10px;border-radius:var(--radius-seg);flex:none}

/* ── Chroma · retoques finos S6 (conceptos, fallos, textura) ─────────────── */
.chroma .v4cihead{display:flex;align-items:center;gap:var(--space-md);margin-top:var(--space-sm)}
.chroma .v4citotal{font-size:var(--fs-display);font-weight:600;color:var(--role-mature)}
.chroma .v4cileg{display:flex;flex-wrap:wrap;gap:var(--space-2xs) var(--space-md);
  margin-top:var(--space-2xs);font-size:var(--fs-label);color:var(--ink-faint)}
.chroma .v4fmrows{display:grid;gap:var(--space-xs);margin-top:var(--space-md)}
.chroma .v4fmrow{display:grid;grid-template-columns:minmax(120px,170px) 1fr 32px;
  gap:var(--space-sm);align-items:center}
.chroma .v4fmlab{font-size:var(--fs-body)}
.chroma .v4fmbar{height:6px;background:var(--track);border-radius:var(--radius-seg)}
.chroma .v4fmbar>div{height:100%;border-radius:var(--radius-seg)}
.chroma .v4fmct{font-size:var(--fs-label);color:var(--ink-muted);text-align:right}
.chroma .v4txscale{margin-top:var(--space-xl)}
.chroma .v4txtrack{position:relative;height:8px;background:var(--track);border-radius:var(--radius-sm)}
.chroma .v4txdot{position:absolute;top:50%;transform:translate(-50%,-50%);width:12px;height:12px;
  border-radius:var(--radius-pill);background:var(--role-mature);box-shadow:0 0 0 2px var(--surface)}
/* (v4 S7: los overrides de escala se fundieron aquí.) */
.chroma .v4txlabs{display:flex;justify-content:space-between;align-items:baseline;
  gap:var(--space-sm);margin-top:var(--space-2xs);font-size:var(--fs-label);color:var(--ink-faint)}

/* ── Chroma · fidelidad v4 S7: capa global (el prototipo manda) ───────────── */
/* Cabecera de espacio: título + una frase; sin kicker ni raíl. */
.chroma .view-head{display:grid;grid-template-columns:1fr;gap:var(--space-2xs);border:none;
  padding:0;margin-bottom:var(--space-lg)}
.chroma .view-head::before{content:none}
.chroma .view-head>*{grid-column:1}
/* 700 en el prototipo; 800 aquí por la rampa cerrada 400/600/800 (mandato 2026-06-12). */
.chroma .view-head-title{font:800 var(--fs-display)/var(--lh-tight) var(--ui);color:var(--ink)}
.chroma .view-head p{max-width:65ch;color:var(--ink-muted);font-size:var(--fs-body);margin:0}
/* Tarjeta: radio md + sombra + padding lg, como cada tarjeta del prototipo. */
.chroma .card{border-radius:var(--radius-md);box-shadow:var(--shadow);padding:var(--space-lg)}
/* Separador de texto: el punto medio del prototipo, dibujado (sin glifo en copy). */
/* El separador es una REGLA FINA, no un punto (dueño, 2026-08-27). El design
   system base ya lo definía así; era el tema chroma el que lo convertía en
   punto. Al ser un borde y no un carácter, sigue sin haber nada que leer en
   voz alta, y la altura en em lo mantiene proporcionado en cada contexto. */
.chroma .sep{width:1px;height:1em;border-radius:0;background:var(--border);
  opacity:1;vertical-align:-.14em;margin:0 var(--space-sm)}
/* Reversión v4 de la regla anti-uppercase (S7): kickers del prototipo. */

/* ── Chroma · fidelidad v4 S7: Maestría ───────────────────────────────────── */
.chroma .v4headleft{display:flex;align-items:center;gap:var(--space-2xs)}
.chroma .v4pipeline{flex:1;height:1px;background:var(--border)}
.chroma .v4pipeeje-r{display:inline-flex;align-items:center;gap:var(--space-2xs)}
.chroma .v4stackcol{display:grid;gap:var(--space-md);align-content:start}
.chroma .v4cisent{margin-top:var(--space-sm);font-size:var(--fs-label);color:var(--ink-faint)}
.chroma .v4cisent strong{font-weight:600}
.chroma .v4fcleg{display:flex;gap:var(--space-lg);align-items:center;
  margin-top:var(--space-sm);font-size:var(--fs-label);color:var(--ink-faint)}
.chroma .v4fclegit{display:inline-flex;align-items:center;gap:var(--space-2xs)}
.chroma .v4fcleg-dot{position:static;margin:0;transform:none;flex:none;display:inline-block}
.chroma .v4fcval.ok{color:var(--role-good)}

/* ── Chroma · fidelidad v4 S7: Crecimiento ────────────────────────────────── */
.chroma .v4wkleg{display:flex;gap:var(--space-xl);margin-top:var(--space-md);flex-wrap:wrap;
  align-items:center;font-size:var(--fs-label);color:var(--ink-faint)}
.chroma .v4wklegit{display:inline-flex;align-items:center;gap:var(--space-xs)}
.chroma .v4wksw{width:10px;height:10px;border-radius:var(--radius-seg);flex:none}
.chroma .v4wksw-n{background:var(--accent)}
.chroma .v4wksw-r{background:var(--accent-soft-2);border:1px solid var(--accent-line)}
.chroma .v4wkact{margin-left:auto}
.chroma .v4recgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:var(--space-md);margin-top:var(--space-md)}
.chroma .v4recval{font-size:var(--fs-stat);font-weight:600;color:var(--role-mastered)}
.chroma .v4reclab{font-size:var(--fs-label);color:var(--ink-faint);margin-top:var(--space-3xs)}
.chroma .v4recdate{font-size:var(--fs-label);color:var(--ink-faint);margin-top:var(--space-3xs)}
.chroma .v4aqgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));
  gap:var(--space-md);margin-top:var(--space-md)}
.chroma .v4aqval{font-size:var(--fs-stat);font-weight:600}
.chroma .v4aqbar{height:4px;background:var(--track);border-radius:var(--radius-seg);
  margin:var(--space-2xs) 0 var(--space-3xs);max-width:150px}
.chroma .v4aqbar>div{height:100%;border-radius:var(--radius-seg)}
.chroma .v4aqlab{font-size:var(--fs-label);color:var(--ink-faint)}

/* ── Chroma · fidelidad v4 S7: Ritmo ──────────────────────────────────────── */
.chroma .v4txwins{display:grid;gap:var(--space-md);margin-top:var(--space-lg)}
.chroma .v4txwinhead{display:flex;justify-content:space-between;align-items:baseline;
  gap:var(--space-md);font-size:var(--fs-body)}
.chroma .v4txlab{flex:1;min-width:0}
.chroma .v4txwinhead .mono{font-size:var(--fs-label);color:var(--ink-muted);white-space:nowrap}
.chroma .v4txwinhead .mono.ok2{color:var(--role-mature)}
.chroma .v4txbar{height:8px;background:var(--track);border-radius:var(--radius-sm);
  margin-top:var(--space-2xs)}
.chroma .v4txbar>div{height:100%;border-radius:var(--radius-sm);background:var(--role-mature)}
.chroma .v4canhead{display:flex;align-items:center;gap:var(--space-sm);margin-top:var(--space-md)}
.chroma .v4candot{width:12px;height:12px;border-radius:var(--radius-pill);flex:none}
.chroma .v4canverdict{font-size:var(--fs-title);font-weight:600}
.chroma .v4cansub{font-size:var(--fs-label);color:var(--ink-faint)}
.chroma .v4canstrip{display:flex;gap:var(--space-3xs);margin-top:var(--space-md)}
.chroma .v4canseg{flex:1;height:9px;border-radius:var(--radius-seg);background:var(--track)}
.chroma .v4canseg-light{background:var(--status-good)}
.chroma .v4canseg-medium{background:var(--heat-3)}
.chroma .v4canseg-strong{background:var(--status-error)}
.chroma .v4canseg-idle{background:none;border:1px dashed var(--border-strong)}
.chroma .v4colsigs{display:flex;flex-wrap:wrap;gap:var(--space-2xs);margin-top:var(--space-2xs)}
.chroma .v4recrows{display:grid;gap:var(--space-2xs);margin-top:var(--space-md)}
.chroma .v4recrow{display:grid;grid-template-columns:minmax(96px,1.1fr) 2fr auto;
  align-items:center;gap:var(--space-sm)}
.chroma .v4recname{font-size:var(--fs-label);color:var(--ink-muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chroma .v4recbar{display:block;height:8px;border-radius:var(--radius-seg);
  background:var(--track);overflow:hidden}
.chroma .v4recbar>span{display:block;height:100%;border-radius:var(--radius-seg)}
/* Dentro del split solo hay cinco o siete filas, asi que el nombre puede envolver en vez de
   cortarse: crecer un poco en alto cuesta menos que perder la identidad de la fila. Va aqui, y
   no junto al split, porque `.chroma .v4recname` lo pisaba por orden de cascada. */
.chroma .v4cosplit .v4recname{white-space:normal;overflow:visible}
.chroma .v4cosplit .v4recrow{align-items:baseline}
.chroma .v4recshape{font-size:var(--fs-label);color:var(--ink-faint)}
/* Por debajo de 560px el nombre del problema se comia en puntos suspensivos: 33 de 47 filas
   truncadas, y con ellos la marca "Irregular", que es justo la salvedad que debe viajar con el
   dato. La barra es decoracion (el porcentaje ya lleva el valor), asi que se retira y el nombre
   recupera el ancho. Direct labels over graphics, design-system Seccion 8. */
@media(max-width:560px){
  .chroma .v4recrow{grid-template-columns:minmax(0,1fr) auto}
  .chroma .v4recrow>.v4recbar{display:none}
  .chroma .v4recname{white-space:normal}
}
.chroma .v4recdays{font-size:var(--fs-label);color:var(--ink-faint);
  text-align:right;white-space:nowrap}
.chroma .v4recrow[data-recency-state="unchecked"] .v4recdays{font-style:italic}
.chroma .v4carga{display:grid;gap:var(--space-md);margin-top:var(--space-md)}

/* ── Chroma · fidelidad v4 S7: diálogo ⓘ ─────────────────────────────────── */
.chroma .modal{max-width:600px;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}
.chroma .hl-v4 .hl-h{font-size:var(--fs-label);font-weight:600;letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--accent);margin:var(--space-lg) 0 var(--space-2xs)}
.chroma .hl-v4 .hl-h:first-child{margin-top:0}
.chroma .hl-v4 .hl-body{font-size:var(--fs-body);color:var(--ink-muted);line-height:var(--lh-body)}
.chroma .hl-v4 .fml{background:var(--surface-raised);border-radius:var(--radius-sm);
  padding:var(--space-md);margin-top:var(--space-sm);display:grid;place-items:center}
.chroma .hl-v4 .hl-gloss{margin-top:var(--space-sm)}
.chroma .hl-v4 .hl-src{margin-top:var(--space-lg);font-size:var(--fs-label);color:var(--ink-faint)}
.chroma .modal .cl2{appearance:none;border:1px solid var(--border);background:var(--surface);
  color:var(--ink-muted);font-family:inherit;font-size:var(--fs-label);font-weight:600;
  border-radius:var(--radius-pill);padding:var(--space-2xs) var(--space-md);cursor:pointer;
  transition:background var(--motion-fast) var(--ease-standard)}
.chroma .modal .cl2:hover{background:var(--surface-hover)}
.chroma .modal .cl{width:auto;height:auto;border:1px solid var(--border);background:var(--surface);
  color:var(--ink-muted);font-size:var(--fs-label);font-weight:600;
  border-radius:var(--radius-pill);padding:var(--space-2xs) var(--space-md)}
.chroma .modal .cl:hover,.chroma .modal .cl:focus-visible{background:var(--surface-hover);color:var(--ink)}

/* ── Chroma · fidelidad v4 S7: Aprender ───────────────────────────────────── */
.chroma .lesson-sfx{font-size:var(--fs-label);color:var(--ink-faint);white-space:nowrap}
.chroma .lesson-chip{margin-left:auto}
.chroma .lesson-info{margin-left:auto}
.chroma .lesson-chip+.lesson-info{margin-left:0}

/* ── Chroma · v4 S8: comportamiento en pantallas estrechas ────────────────── */
@media (max-width: 700px){
  .chroma .v4pipe{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));row-gap:var(--space-lg)}
  .chroma .v4head{flex-wrap:wrap}
  .chroma .v4pipetop{flex-wrap:wrap}
  .chroma .v4planrow{grid-template-columns:1fr auto;grid-template-rows:auto auto}
  .chroma .v4planrow h3{grid-column:1}
  .chroma .v4planrow .v4planct{grid-column:2;grid-row:1}
  .chroma .v4planrow .v4planbar{grid-column:1 / -1;grid-row:2}
  .chroma .v4plan{gap:var(--space-lg)}
  .chroma .v4cola .v4colahead{flex-wrap:wrap}
  .chroma .v4recgrid,.chroma .v4aqgrid,.chroma .v4sigcells{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
  .chroma .v4wkleg{gap:var(--space-md)}
  .chroma .v4wkact{margin-left:0;width:100%}
}

/* ── Chroma · v5: el ⓘ del prototipo — SVG trazado, sin caja ni pseudo-letra ── */
.chroma .info{width:auto;height:auto;padding:var(--space-3xs);color:var(--ink-faint);
  display:inline-grid;place-items:center;flex:none;
  transition:color var(--motion-fast) var(--ease-standard)}
.chroma .info::before,.chroma .info::after{content:none}
.chroma .info svg{display:block}
.chroma .info:hover{color:var(--accent)}
/* Foco: el anillo translúcido del rediseño, nunca el acento sólido. El resto
   del anillo (grosor, separación, radio) lo hereda de la regla global. */
.chroma :focus-visible{outline-color:var(--accent-line)}
.chroma .info:focus-visible{color:var(--accent)}
/* Un panel recibe el foco por programa (lectores de pantalla), no es un
   control: mover el foco ahí no debe dibujar un marco alrededor de la vista. */
.chroma .panel:focus,.chroma .panel:focus-visible{outline:none}

/* ── Chroma · v5: Historial de sesiones ───────────────────────────────────── */
/* Cifras de cabecera: separadas por una regla fina, no por aire. Tres cifras
   flotando a la misma distancia no se leen como tres campos, se leen como una
   frase rota. La regla es un borde, no un carácter: nada que leer en voz alta. */
.chroma .v4hsstats{display:inline-flex;gap:0;flex-wrap:wrap;
  font-size:var(--fs-label);color:var(--ink-faint)}
.chroma .v4hsstats>span{padding:0 var(--space-md)}
.chroma .v4hsstats>span+span{border-left:1px solid var(--border)}
.chroma .v4hsstats>span:last-child{padding-right:0}
/* Cabecera de mes: pegajosa bajo la nav, cuya altura mide app.js en --nav-h. */
.chroma .v4hshead{display:flex;align-items:baseline;gap:var(--space-sm);
  /* El mes se apila JUSTO DEBAJO de los rótulos de columna, que también se
     pegan: los dos juntos son el encabezado vivo de la tabla. */
  position:sticky;top:calc(var(--nav-h) + var(--hist-head-h, 0px));z-index:2;
  background:var(--surface);padding-top:var(--space-2xs);
  padding-bottom:var(--space-xs);margin-top:var(--space-lg);border-top:none}
/* El primer mes sigue inmediatamente a los rótulos: sin regla que los ate, el
   aire de separación entre meses los dejaba huérfanos a 95 px de su tabla. */
.chroma .v4hsthead + .v4hshead{margin-top:var(--space-sm)}
.chroma .v4hsmes{margin:0;font-size:var(--fs-title);font-weight:600;color:var(--ink)}
.chroma .v4hshead .v4hsstats{margin-left:auto}
.chroma .v4hstl{margin-top:var(--space-md)}
/* La línea del rail también corre bajo el último día de cada mes. */
.chroma .v4hstl .tlday:last-child::before{display:block;bottom:var(--space-sm)}
/* La cabecera de día comparte la rejilla de la fila para que su total caiga en
   la columna Tiempo. La banda derecha reutiliza .v4hsmeta, así que los anchos
   los siguen fijando las mismas clases que en la fila. */
.chroma .v4hstl .tlh{display:grid;
  grid-template-columns:72px minmax(0,1.35fr) minmax(0,.7fr) minmax(0,1.55fr);
  gap:var(--space-md);align-items:baseline;
  /* El mismo acolchado lateral que la fila: sin él el total del día cae 8 px
     por fuera de la columna. */
  padding-inline:var(--space-xs)}
.chroma .v4hstl .tlh .d{grid-column:1 / 4}
.chroma .v4hstl .tlh .v4hsmeta{grid-column:4;display:flex;align-items:baseline;
  justify-content:flex-end;gap:var(--space-sm)}
.chroma .v4hstl .tlh .c{font-family:var(--mono)}
.chroma .v4hstl .v4hsrow:last-child{border-bottom:none}
/* Fila: hairline recto, sin radio, y las cuatro columnas del rediseño. La
   cuarta cede algo de ancho a las tres primeras: desde v6 lleva también el
   resultado de la sesión, que antes solo estaba dentro del popup. */
.chroma .v4hsrow{grid-template-columns:72px minmax(0,1.35fr) minmax(0,.7fr) minmax(0,1.55fr);
  gap:var(--space-md);padding:var(--space-md) var(--space-xs);border-radius:0}
.chroma .v4hsrow .v4hsnew{color:var(--accent);font-weight:600}
.chroma .v4hsrow .v4hsrev{color:var(--ink-faint)}
.chroma .v4hsmeta{gap:var(--space-sm)}
/* La dificultad reserva su hueco: sin ancho fijo, "Easy" y "Medium" desplazan
   toda la banda derecha y las columnas quedan dentadas de fila a fila. */
/* Ancho compartido con su rótulo: "DIFICULTAD" es más ancho que "Media", y si
   la columna se dimensiona por el contenido el rótulo deja de caer encima. */
.chroma .v4hsdif{min-width:76px;flex:none;color:var(--ink-faint)}
/* El resultado de la sesión, dicho en la propia fila y con el color de su rol.
   Hueco reservado aunque esté vacío, para que las columnas no bailen. */
.chroma .v4hsres{min-width:112px;max-width:132px;flex:none;font-size:var(--fs-label);
  font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-align:right;color:var(--ink-faint)}
/* Lo esperado se dice, pero no grita: el color de señal se reserva para lo que
   se sale de la norma, que es a donde debe ir el ojo en 638 filas. */
.chroma .v4hsres-quiet{color:var(--ink-muted)}
.chroma .v4hsres-developing{color:var(--role-developing)}
.chroma .v4hsres-weak{color:var(--status-error)}
.chroma .v4hsbar{width:48px;height:3px;background:var(--track);border-radius:var(--radius-hair);
  overflow:hidden;flex:none;display:inline-block}
.chroma .v4hsbar>span{display:block;height:100%;border-radius:var(--radius-hair);background:var(--accent)}
/* La barra mide contra el reloj de entrevista de su propia dificultad; pasarse
   de ese reloj se ve, no se deduce. */
.chroma .v4hsbar.over>span{background:var(--status-error)}
.chroma .v4hsmin{min-width:60px;text-align:right;white-space:nowrap;flex:none}
/* El hueco de la nota se reserva aunque esté vacía: las columnas no bailan. */
.chroma .v4hsnote{min-width:86px;display:inline-block;font-size:var(--fs-label);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chroma .v4hsnote.v4hsayuda{color:var(--role-developing)}
/* "Sin registrar" no es un veredicto: se dice apagado, no en color de señal. */
.chroma .v4hsnote.v4hsunrec{color:var(--ink-faint);font-style:italic}

/* Cabecera de columnas: la misma rejilla que la fila, para que cada rótulo
   caiga sobre su columna. Tiempo cubre la barra y los minutos porque son el
   mismo dato dicho dos veces (48 de barra + 12 de hueco + 60 del número). */
.chroma .v4hsthead{display:grid;
  grid-template-columns:72px minmax(0,1.35fr) minmax(0,.7fr) minmax(0,1.55fr);
  gap:var(--space-md);align-items:baseline;
  padding:var(--space-sm) var(--space-xs) var(--space-2xs);
  /* El sangrado del rail del timeline, DESPUÉS del shorthand que si no lo pisa.
     Sin él la cabecera arranca antes que los días y ninguna de las tres
     primeras columnas cae sobre su rótulo. */
  padding-inline-start:calc(var(--space-xs) + var(--space-lg));
  margin-top:var(--space-md);
  position:sticky;top:var(--nav-h);z-index:3;background:var(--surface);
  /* Mismo tratamiento que la cabecera de la cola de repaso (.v4thead): esta
     aplicación ya tenía una convención para rótulos de columna y no hacía
     falta una segunda. */
  font-size:var(--fs-label);font-weight:600;color:var(--ink-muted);
  white-space:nowrap}
/* La banda de la cabecera no es una .tlrow, así que no hereda el flex de
   .tl-meta: sin declararlo aquí sus celdas son inline y los min-width que
   alinean las columnas no llegan a aplicarse. */
.chroma .v4hsthead .v4hsmeta{display:flex;align-items:baseline;
  justify-content:flex-end;gap:var(--space-sm)}
.chroma .v4hsthead [role="columnheader"]{cursor:help}
.chroma .v4hsthead .v4hsttime{min-width:120px;text-align:right;flex:none}
.chroma .v4hsthead .v4hsres{color:var(--ink-muted)}

/* ── Chroma · v5: detalle de sesión ───────────────────────────────────────── */
.chroma .v4hsdlg{display:grid;gap:var(--space-lg)}
.chroma .v4hslab{font-size:var(--fs-label);font-weight:600;letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--accent)}
.chroma .v4hsgrid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-md)}
.chroma .v4hsgrid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-md)}
.chroma .v4hsbig{font-size:var(--fs-title);font-weight:600;margin-top:var(--space-3xs)}
.chroma .v4hsbig.ok{color:var(--role-good)}
.chroma .v4hsbig.warn{color:var(--role-developing)}
/* Sin dato registrado: tinta apagada, nunca un color que afirme algo. */
.chroma .v4hsbig.none{color:var(--ink-faint)}
.chroma .v4hsval{font-size:var(--fs-body);font-weight:600;color:var(--ink);margin-top:var(--space-3xs)}
.chroma .v4hsval.ok{color:var(--role-good)}
.chroma .v4hsval.warn{color:var(--role-developing)}
.chroma .v4hsval.none{color:var(--ink-faint)}
.chroma .v4hssub{font-size:var(--fs-label);color:var(--ink-faint);margin-top:var(--space-3xs)}
/* Evidencia del proceso: separada del contexto por un hairline, porque
   responde a otra pregunta — no "qué eres" sino "cómo fue esta sesión". */
.chroma .v4hsproc{padding-top:var(--space-md);border-top:1px solid var(--border);
  row-gap:var(--space-md)}
.chroma .v4hsdefrow{display:flex;align-items:center;gap:var(--space-xs);
  margin-top:var(--space-2xs);font-size:var(--fs-body);font-weight:600}
.chroma .v4hsdefrow .prev{color:var(--ink-faint)}
.chroma .v4hsdefrow .next{color:var(--ink)}
.chroma .v4hsdefrow .arw{color:var(--ink-faint);flex:none}
.chroma .v4hsdefsub{font-size:var(--fs-label);color:var(--ink-faint);margin-top:var(--space-3xs)}
.chroma .v4hsmeta4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-md);
  padding-top:var(--space-md);border-top:1px solid var(--border)}
.chroma .v4hsmeta4 .v4hslab{color:var(--ink-faint)}
.chroma .v4hsmetaval{font-size:var(--fs-label);font-weight:600;color:var(--ink-muted);
  margin-top:var(--space-3xs)}
.chroma .v4hsmetaval.accent{color:var(--accent)}
.chroma .v4hsacts{display:flex;gap:var(--space-sm);flex-wrap:wrap}
.chroma .v4hsbtn{display:inline-flex;align-items:center;gap:var(--space-2xs);
  border:1px solid var(--border);border-radius:var(--radius-pill);
  padding:var(--space-2xs) var(--space-md);font-size:var(--fs-label);font-weight:600;
  color:var(--accent);text-decoration:none;
  transition:background var(--motion-fast) var(--ease-standard)}
.chroma .v4hsbtn:hover{background:var(--accent-soft);color:var(--accent)}
.chroma .v4hsbtn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.chroma .v4hsbtn.primary:hover{opacity:.88;background:var(--accent);color:var(--on-accent)}
.chroma .v4hsext{flex:none}
@media (max-width: 700px){
  .chroma .v4hsrow{grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"name name" "difficulty kind" "meta meta";row-gap:var(--space-xs)}
  .chroma .v4hsmeta{justify-content:flex-start;flex-wrap:wrap}
  /* En estrecho la banda se alinea a la izquierda: el resultado deja de
     alinearse a la derecha dentro de su hueco o abre un margen fantasma. */
  .chroma .v4hsres{text-align:left;min-width:0}
  .chroma .v4hsgrid3,.chroma .v4hsmeta4{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* En estrecho las filas se apilan y dejan de ser columnas: una cabecera de
     columnas sobre filas apiladas rotula el aire. */
  .chroma .v4hsthead{display:none}
  /* Y sin columnas debajo, la cabecera de día no tiene a qué alinearse: vuelve
     a ser fecha a un lado, total al otro. */
  .chroma .v4hstl .tlh{display:flex;justify-content:space-between}
}