/*
 * cut-shell.css · Liminal cut · desktop-app shell + register accents + slate/tray vocabulary
 * ════════════════════════════════════════════════════════════════════════════════════
 *
 * SCOPE
 * ─────
 * Every cut that adopts the canonical Liminal desktop-app shell imports this
 * file (after design-system/tokens/design-tokens.css). Provides:
 *
 *   · register-coded :root tokens (--diligence/--synthesis/--judgment/--outreach)
 *   · macOS-style frame chrome · titlebar · traffic lights · product-row tabs
 *   · three-pane main layout · left rail / slate / right rail (agency)
 *   · slate composition surface · empty-state · gaze stripe · reader chips
 *   · tray inkwell-rail · tile previews · drag-and-drop choreography
 *   · brief area · disposition paper-card · audit ribbon
 *   · classification banner with decode toggle (Business)
 *   · marginalia editor's notes (Caveat) · per-surface accent modulation
 *   · staged boot animations · prefers-reduced-motion respected
 *
 * CONSUMPTION
 * ───────────
 *   <link rel="stylesheet" href="../design-system/tokens/design-tokens.css">
 *   <link rel="stylesheet" href="../lib/cut-shell.css">
 *
 * Each cut adds its own surface-specific overrides AFTER these imports if it
 * needs different layout or treatment. Tokens are canonical; layout is per cut.
 *
 * AUTHOR
 * ──────
 * Extracted 2026-04-28 from index.html v0.8.1 to support iframe-per-cut
 * studio architecture. Until extraction, all this CSS lived inline in the
 * single-file prototype. Now shared across cuts via this file.
 */

  /* classification bar · collapsed to 0 height except on the business product ·
     hover · expand toggle reveals plain-language gloss. Default is dense
     one-liner. Full glossary opens on click of the chevron. */
  .classification {
    height: 0;
    background: var(--outreach-bg);
    border-bottom: 1px solid var(--outreach-soft);
    color: var(--outreach);
    overflow: hidden;
    transition: height 260ms cubic-bezier(0.32, 0.72, 0.16, 1);
  }
  body[data-product="business"] .classification {
    height: 30px;
  }
  body[data-product="business"] .classification.is-expanded {
    height: 132px;
  }
  .cls-row {
    height: 30px;
    padding: 0 calc(var(--space-app-5) * var(--density-scale));
    display: flex; align-items: center; gap: calc(var(--space-3) * var(--density-scale));
    font-family: var(--mono); font-size: var(--fs-mono-xs);
    letter-spacing: var(--ls-mono-sm); text-transform: uppercase;
  }
  .cls-tokens {
    display: flex; align-items: center; gap: calc(var(--space-3) * var(--density-scale));
    flex: 1;
    overflow-x: auto;
  }
  .cls-token {
    position: relative;
    cursor: help;
    border-bottom: 1px dotted var(--outreach-soft);
    padding-bottom: 1px;
    color: var(--outreach);
    transition: color 160ms;
    flex-shrink: 0;
  }
  .cls-token:hover { color: #FFF; border-bottom-color: var(--outreach); }
  .cls-token .cls-tip {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--frame-bg);
    border: 1px solid var(--outreach-edge);
    border-radius: var(--radius-2);
    padding: calc(var(--space-app-1-5) * var(--density-scale)) calc(var(--space-2) * var(--density-scale));
    font-family: var(--serif);
    font-style: italic;
    font-size: var(--fs-mono);
    letter-spacing: 0;
    text-transform: none;
    color: var(--text);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms;
    z-index: 50;
    box-shadow: 0 8px 22px rgba(0,0,0,0.5);
  }
  .cls-token .cls-tip::before {
    content: "";
    position: absolute;
    top: -4px; left: 50%;
    width: 6px; height: 6px;
    background: var(--frame-bg);
    border-top: 1px solid var(--outreach-edge);
    border-left: 1px solid var(--outreach-edge);
    transform: translateX(-50%) rotate(45deg);
  }
  .cls-token:hover .cls-tip { opacity: 1; }
  .cls-toggle {
    background: transparent;
    border: 1px solid var(--outreach-edge);
    color: var(--outreach);
    padding: calc(var(--space-1) * var(--density-scale)) calc(var(--space-2) * var(--density-scale)) calc(var(--space-1) * var(--density-scale));
    font-family: var(--mono); font-size: var(--fs-eyebrow);
    letter-spacing: var(--ls-mono-sm); text-transform: uppercase;
    border-radius: var(--radius-2);
    cursor: pointer;
    transition: background 160ms, color 160ms;
    flex-shrink: 0;
  }
  .cls-toggle:hover { background: var(--outreach-bg); color: #FFF; }
  .cls-toggle .cls-tog-glyph { display: inline-block; transition: transform 220ms; }
  .classification.is-expanded .cls-tog-glyph { transform: rotate(180deg); }
  /* brief area · the brief that renders below the slate
     (selector line was lost in a past edit, orphaning these declarations and
     breaking the parse · restored 2026-07-29; registers.css carried the
     matching headless opener) */
  .brief-area {
    border-top: 1px solid var(--frame-border);
    padding: calc(var(--space-5) * var(--density-scale)) 32px;
    background: var(--frame-bg-2);
  }
  .brief-head {
    display: flex; align-items: center; gap: calc(var(--space-2) * var(--density-scale));
    font-family: var(--mono); font-size: var(--fs-mono-xs);
    color: var(--text-dim); letter-spacing: var(--ls-mono);
    text-transform: uppercase; margin-bottom: calc(var(--space-2) * var(--density-scale));
  }
  .brief-head .bh-glyph { color: var(--p-accent); font-size: var(--fs-mono); }
  .brief-body {
    font-family: var(--display); font-size: var(--fs-md);
    line-height: 1.55; color: var(--text);
    letter-spacing: var(--ls-app-normal); margin-bottom: calc(var(--space-2) * var(--density-scale));
  }
  .brief-body em { font-style: italic; color: var(--text-mid); }
  .brief-body .brief-opener {
    display: block;
    font-family: var(--mono);
    font-size: var(--fs-mono-sm);
    color: var(--text-dim);
    letter-spacing: var(--ls-app-wide);
    margin-bottom: calc(var(--space-2) * var(--density-scale));
    line-height: 1.55;
  }
  .brief-body .brief-opener em {
    font-family: var(--display);
    font-style: italic;
    font-size: var(--fs-mono-lg);
    color: var(--p-accent);
    letter-spacing: var(--ls-app-normal);
  }
  .brief-body .annotated {
    background: linear-gradient(transparent 60%, rgba(240,64,64,0.16) 60%);
    text-decoration: line-through;
    text-decoration-color: rgba(240,64,64,0.45);
    text-decoration-thickness: 1px;
    color: rgba(232,232,234,0.72);
    cursor: pointer; padding: 0 calc(var(--space-app-0-5) * var(--density-scale));
  }
  .brief-body .annotated:hover {
    background: linear-gradient(transparent 60%, rgba(240,64,64,0.24) 60%);
    color: var(--text);
  }
  .brief-body .annotated.is-corrected {
    background: linear-gradient(transparent 60%, rgba(69,201,163,0.20) 60%);
    text-decoration: none; color: var(--text);
  }
  .brief-body .annotated .risk-tag {
    display: inline-block; margin-left: calc(var(--space-app-1-5) * var(--density-scale));
    font-family: var(--mono); font-size: var(--fs-eyebrow);
    color: var(--red); background: rgba(240,64,64,0.1);
    border: 1px solid rgba(240,64,64,0.3);
    padding: 1px calc(var(--space-app-1-5) * var(--density-scale)); border-radius: var(--radius-2);
    letter-spacing: 0.1em; text-decoration: none;
    vertical-align: 2px;
  }
  .mystic-margin {
    margin-top: calc(var(--space-3) * var(--density-scale));
    padding: calc(var(--space-3) * var(--density-scale)) calc(var(--space-4) * var(--density-scale));
    background: var(--judgment-bg);
    border-left: 2px solid var(--judgment);
    border-radius: 0 var(--radius-3) var(--radius-3) 0;
  }
  .mystic-attr {
    font-family: var(--mono); font-size: var(--fs-eyebrow); color: var(--judgment);
    letter-spacing: var(--ls-mono); margin-bottom: calc(var(--space-app-1-5) * var(--density-scale));
  }
  .mystic-quote {
    font-family: var(--display); font-style: italic; font-size: var(--fs-sm);
    color: var(--wholeness-300); line-height: 1.5;
  }

  /* vault calibration · the moat in motion */
  .vault-calib {
    margin-top: calc(var(--space-3) * var(--density-scale));
    padding: calc(var(--space-2) * var(--density-scale)) calc(var(--space-3) * var(--density-scale));
    background: var(--p-accent-bg);
    border-left: 2px solid var(--p-accent);
    border-radius: 0 var(--radius-3) var(--radius-3) 0;
    display: flex; gap: calc(var(--space-3) * var(--density-scale)); align-items: baseline;
    font-family: var(--serif); font-size: var(--fs-mono-lg);
    color: var(--text-mid); line-height: 1.45;
  }
  .vault-calib .vc-label {
    font-family: var(--mono); font-size: var(--fs-eyebrow);
    color: var(--p-accent); letter-spacing: var(--ls-mono);
    text-transform: uppercase;
    flex-shrink: 0;
  }
  .vault-calib .vc-text { font-style: italic; }

  /* disposition row */
  .disposition {
    margin-top: calc(var(--space-4) * var(--density-scale));
    display: flex; gap: calc(var(--space-2) * var(--density-scale)); flex-wrap: wrap;
    align-items: center;
  }
  .dispo-btn {
    height: 30px; padding: 0 calc(var(--space-3) * var(--density-scale));
    font-family: var(--mono); font-size: var(--fs-mono-xs);
    letter-spacing: var(--ls-mono-sm); text-transform: uppercase;
    background: var(--hover);
    border: 1px solid var(--card-border);
    color: var(--text-mid);
    transition: background 180ms, color 180ms, border-color 180ms;
  }
  .dispo-btn:hover { background: rgba(255,255,255,0.05); color: var(--text); }
  .dispo-btn.is-primary { background: var(--p-accent); color: var(--bg); border-color: var(--p-accent); }
  .dispo-btn.is-primary:hover { background: var(--p-accent-soft); color: var(--bg); }
  .dispo-btn.is-defer { color: var(--text-faint); }
  .preview-sub {
    margin-left: auto;
    font-family: var(--mono); font-size: var(--fs-mono-xs);
    color: var(--text-faint); letter-spacing: var(--ls-app-wider);
    text-transform: uppercase;
    background: transparent; border: 1px dashed var(--card-border-2);
    padding: calc(var(--space-app-1-5) * var(--density-scale)) calc(var(--space-3) * var(--density-scale)); border-radius: var(--radius-2);
    transition: color 180ms, border-color 180ms;
  }
  .preview-sub:hover { color: var(--text-mid); border-color: var(--text-faint); }

  /* ════════════════════════════════════════════════════════════════
     Disposition artifact · paper-card lift · the only signed object
     · sits visually above the slate · warm bone-paper substrate
     · classification stripe down the left edge in active register
     · wax-seal stamp · signature line · SHA-256 receipt
     ════════════════════════════════════════════════════════════════ */
  .dispo-artifact {
    margin: calc(var(--space-5) * var(--density-scale)) 32px 0;
    position: relative;
    background: var(--cream-100);          /* warm bone paper · lifts off dark canvas */
    color: var(--vital-soft);
    border: 1px solid rgba(0,0,0,0.16);
    border-radius: var(--radius-2);            /* signed paper, not rounded UI */
    box-shadow:
      0 1px 0 var(--hover) inset,
      0 18px 38px var(--scrim-modal),
      0 6px 14px rgba(0,0,0,0.35),
      0 0 0 4px rgba(0,0,0,0.25);  /* dark mat surrounding the card */
    overflow: hidden;
    animation: artifact-arrive 520ms cubic-bezier(0.32, 0.72, 0.16, 1);
  }
  /* classification stripe · register-coded, runs full height left edge */
  .dispo-artifact::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 5px;
    background: var(--p-accent);
  }
  /* paper grain · faint repeating noise (CSS-only) */
  .dispo-artifact::after {
    content: "";
    position: absolute; inset: 0;
    pointer-events: none;
    background-image:
      radial-gradient(circle at 18% 32%, rgba(120,90,40,0.05), transparent 22%),
      radial-gradient(circle at 78% 68%, rgba(120,90,40,0.04), transparent 22%);
    mix-blend-mode: multiply;
  }
  @keyframes artifact-arrive {
    0%   { transform: translateY(14px) rotate(-0.25deg); opacity: 0; }
    100% { transform: translateY(0) rotate(0); opacity: 1; }
  }
  .da-bar {
    display: flex; align-items: center; gap: calc(var(--space-3) * var(--density-scale));
    padding: calc(var(--space-3) * var(--density-scale)) calc(var(--space-5) * var(--density-scale)) calc(var(--space-2) * var(--density-scale)) calc(var(--space-6) * var(--density-scale));
    background: transparent;
    color: var(--vital-soft);
    border-bottom: 1px dashed rgba(60,40,10,0.22);
    position: relative;
    z-index: 1;
  }
  /* wax-seal stamp · circular, subtle, in active register · only chrome flourish */
  .da-stamp {
    font-family: var(--mono); font-size: var(--fs-eyebrow);
    letter-spacing: var(--ls-mono-lg); text-transform: uppercase;
    color: var(--p-accent);
    border: 1.5px solid var(--p-accent);
    background: var(--p-accent-bg);
    padding: calc(var(--space-app-1-5) * var(--density-scale)) calc(var(--space-3) * var(--density-scale)) calc(var(--space-1) * var(--density-scale));
    border-radius: var(--radius-pill);
    flex-shrink: 0;
    transform: rotate(-3deg);
    box-shadow: 0 0 0 1px var(--hover) inset;
  }
  .da-title {
    font-family: var(--display); font-size: var(--fs-base);
    color: var(--vitality-soft);
    font-weight: 500;
    letter-spacing: var(--ls-app-normal);
    font-style: italic;            /* signed-paper · scribed feel */
    flex: 1;
  }
  .da-time {
    font-family: var(--mono); font-size: var(--fs-mono-xs);
    color: rgba(42,40,32,0.55);
    letter-spacing: var(--ls-app-wider);
  }
  .da-body {
    padding: calc(var(--space-4) * var(--density-scale)) calc(var(--space-6) * var(--density-scale)) calc(var(--space-3) * var(--density-scale));
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(var(--space-3) * var(--density-scale)) calc(var(--space-6) * var(--density-scale));
    position: relative; z-index: 1;
  }
  .da-section { min-width: 0; }
  .da-label {
    font-family: var(--mono); font-size: var(--fs-eyebrow);
    color: rgba(42,40,32,0.55);
    letter-spacing: var(--ls-mono-lg);
    text-transform: uppercase;
    margin-bottom: calc(var(--space-app-1-5) * var(--density-scale));
  }
  .da-text {
    font-family: var(--serif); font-size: var(--fs-sm);
    color: var(--vitality-soft);
    line-height: 1.5;
  }
  .da-text em { font-style: italic; color: rgba(42,40,32,0.75); }
  .da-foot {
    display: flex; align-items: center; gap: calc(var(--space-4) * var(--density-scale));
    padding: calc(var(--space-3) * var(--density-scale)) calc(var(--space-6) * var(--density-scale)) calc(var(--space-4) * var(--density-scale));
    border-top: 1px dashed rgba(60,40,10,0.22);
    background: rgba(60,40,10,0.04);
    position: relative; z-index: 1;
  }
  /* signature line · materializes as if drawn */
  .da-foot::before {
    content: "";
    position: absolute;
    top: 0; left: 28px; right: 28px;
    height: 1px;
    background: rgba(60,40,10,0.22);
    transform-origin: left;
    animation: sig-draw 700ms cubic-bezier(0.4, 0, 0.2, 1) 360ms backwards;
  }
  @keyframes sig-draw {
    0% { transform: scaleX(0); }
    100% { transform: scaleX(1); }
  }
  .da-hash {
    flex: 1;
    display: flex; align-items: baseline; gap: calc(var(--space-2) * var(--density-scale));
    font-family: var(--mono); font-size: var(--fs-mono-xs);
    color: rgba(42,40,32,0.6);
  }
  .da-hash-label { letter-spacing: var(--ls-mono-sm); text-transform: uppercase; }
  .da-hash code {
    color: var(--vitality-soft);
    background: rgba(60,40,10,0.08);
    border: 1px solid rgba(60,40,10,0.16);
    font-size: var(--fs-mono-xs);
    padding: calc(var(--space-1) * var(--density-scale)) calc(var(--space-2) * var(--density-scale)); border-radius: var(--radius-1);
    letter-spacing: var(--ls-app-wide);
  }
  .da-handoff { display: flex; gap: calc(var(--space-2) * var(--density-scale)); }
  /* handoff buttons override base .dispo-btn for the cream paper substrate */
  .dispo-artifact .da-handoff-btn {
    background: transparent;
    border: 1px solid rgba(60,40,10,0.32);
    color: rgba(42,40,32,0.78);
    height: 28px; padding: 0 calc(var(--space-3) * var(--density-scale));
    font-family: var(--mono); font-size: var(--fs-mono-xs);
    letter-spacing: var(--ls-mono-sm); text-transform: uppercase;
    border-radius: var(--radius-1);
    transition: color 180ms, border-color 180ms, background 180ms;
  }
  .dispo-artifact .da-handoff-btn:hover {
    color: var(--p-accent);
    border-color: var(--p-accent);
    background: var(--p-accent-bg);
  }

  /* ════════════════════════════════════════════════════════════════════════
     RATIFIED ARTIFACT · canonical signed-decision card
     ────────────────────────────────────────────────────────────────────────
     The cream-paper policy card minted when an operator ratifies a decision:
     judgment-spine · "ratified" stamp · decision + rationale · allow/deny
     permission matrix · anchored sha256 / local-first-chain / chain-verified
     receipt. Promoted to canon 2026-06-17 from cut 12 (the most complete
     version — the only one carrying the full .apol permission-chip block).

     STATUS: NOT YET ADOPTED by the live cuts. cut 11 still mints its own inline
     copy; this block is inert until a cut consumes `.artifact` from this sheet.
     Adopting it = delete the cut's inline .artifact CSS and let this apply.
     Token-pure: allow=var(--good), deny=var(--alarm); no hardcoded hex.
     ════════════════════════════════════════════════════════════════════════ */
  .artifact {
    margin-top: calc(var(--space-4) * var(--density-scale));
    position: relative;
    background: var(--cream-100);
    color: var(--cream-800);
    border-radius: var(--radius-2);
    overflow: hidden;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.5) inset,
      0 22px 46px rgba(0,0,0,0.55),
      0 0 0 5px rgba(0,0,0,0.3);
    animation: artifact-arrive 560ms cubic-bezier(0.32, 0.72, 0.16, 1) both;
  }
  .artifact::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 5px;
    background: var(--judgment);
    box-shadow: 0 0 16px var(--judgment-glow);
  }
  /* header · stamp + provenance line */
  .artifact .ab {
    display: flex; align-items: center; gap: calc(var(--space-3) * var(--density-scale));
    padding: calc(var(--space-3) * var(--density-scale)) calc(var(--space-5) * var(--density-scale)) calc(var(--space-2) * var(--density-scale)) calc(var(--space-6) * var(--density-scale));
    border-bottom: 1px dashed rgba(60,40,10,0.22);
  }
  .artifact .stamp {
    font: 9px/1 var(--mono);
    letter-spacing: var(--ls-mono); text-transform: uppercase;
    color: var(--judgment);
    border: 1px solid var(--judgment);
    border-radius: var(--radius-1);
    padding: calc(var(--space-1) * var(--density-scale)) calc(var(--space-2) * var(--density-scale));
    transform: rotate(-1.5deg);
  }
  .artifact .wh {
    margin-left: auto;
    font: 9px/1 var(--mono);
    letter-spacing: 0.1em;
    color: var(--cream-700);
  }
  /* body · decision + rationale */
  .artifact .abody { padding: calc(var(--space-3) * var(--density-scale)) calc(var(--space-6) * var(--density-scale)) calc(var(--space-4) * var(--density-scale)); }
  .artifact .adec {
    margin: 0;
    font: 500 17px/1.35 var(--display);
    color: var(--cream-800);
  }
  .artifact .arat {
    margin: calc(var(--space-2) * var(--density-scale)) 0 0;
    font-size: var(--fs-mono); line-height: 1.55;
    color: var(--cream-700);
    max-width: 60ch;
  }
  /* permission matrix · allow (good) / deny (alarm) chips */
  .artifact .apol {
    margin-top: calc(var(--space-3) * var(--density-scale));
    display: flex; flex-wrap: wrap; gap: calc(var(--space-2) * var(--density-scale));
  }
  .artifact .pc {
    font: 9px/1 var(--mono);
    letter-spacing: var(--ls-app-wide);
    padding: calc(var(--space-app-1-5) * var(--density-scale)) calc(var(--space-2) * var(--density-scale));
    border-radius: var(--radius-1);
    border: 1px solid rgba(60,40,10,0.2);
    color: var(--cream-700);
  }
  .artifact .pc.al { border-color: color-mix(in srgb, var(--good) 50%, transparent); color: var(--good); }
  .artifact .pc.dn { border-color: color-mix(in srgb, var(--alarm) 45%, transparent); color: var(--alarm); }
  /* receipt · anchored / sha256 / chain-verified */
  .artifact .arec {
    display: flex; align-items: center; gap: calc(var(--space-3) * var(--density-scale));
    margin-top: calc(var(--space-3) * var(--density-scale)); padding-top: calc(var(--space-3) * var(--density-scale));
    border-top: 1px solid rgba(60,40,10,0.18);
    font: 9px/1.3 var(--mono);
  }
  .artifact .arec .hl { color: var(--cream-700); letter-spacing: 0.1em; text-transform: uppercase; }
  .artifact .arec .hs { color: var(--cream-800); flex: 1; word-break: break-all; }
  .artifact .arec .ok {
    display: inline-flex; align-items: center; gap: calc(var(--space-app-1-5) * var(--density-scale));
    color: var(--good);
    letter-spacing: 0.1em; text-transform: uppercase;
    white-space: nowrap;
  }
  .artifact .arec .ok::before {
    content: "";
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--good);
    box-shadow: 0 0 8px color-mix(in srgb, var(--good) 60%, transparent);
  }
  @keyframes artifact-arrive {
    0%   { transform: translateY(16px) rotate(-0.3deg); opacity: 0; }
    100% { transform: none; opacity: 1; }
  }

  /* ════════════════════════════════════════════════════════════════════════
  .tile-preview {
    padding: calc(var(--space-app-1-5) * var(--density-scale)) calc(var(--space-3) * var(--density-scale)) calc(var(--space-2) * var(--density-scale));
    flex: 1;
    display: flex; flex-direction: column;
    gap: calc(var(--space-app-1-5) * var(--density-scale));
  }

  /* Slack-style preview */
  .tile-preview.slack { gap: calc(var(--space-2) * var(--density-scale)); padding: calc(var(--space-2) * var(--density-scale)) calc(var(--space-3) * var(--density-scale)) calc(var(--space-3) * var(--density-scale)); }
  .tile-preview.slack .ts-channel {
    font-family: var(--mono); font-size: var(--fs-eyebrow);
    color: var(--text-mid); letter-spacing: var(--ls-app-wide);
    text-transform: lowercase;
  }
  .tile-preview.slack .ts-msg {
    display: flex; gap: calc(var(--space-2) * var(--density-scale)); align-items: flex-start;
  }
  .tile-preview.slack .ts-avatar {
    width: 18px; height: 18px; border-radius: var(--radius-3);
    background: var(--diligence); color: var(--text);
    flex-shrink: 0;
    font-size: var(--fs-eyebrow); font-weight: 600;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--mono);
  }
  .tile-preview.slack .ts-avatar.b { background: var(--synthesis); color: var(--bg); }
  .tile-preview.slack .ts-msg-body {
    font-family: var(--sans); font-size: var(--fs-mono-sm);
    color: var(--text-mid); line-height: 1.35;
  }
  .tile-preview.slack .ts-msg-body strong {
    color: var(--text); font-weight: 500; font-size: var(--fs-mono-sm);
    margin-right: calc(var(--space-1) * var(--density-scale));
  }

  /* Granola-style preview */
  .tile-preview.granola .tg-line {
    font-family: var(--serif); font-size: var(--fs-mono-sm);
    color: var(--text-mid); line-height: 1.4;
    padding-left: calc(var(--space-5) * var(--density-scale)); position: relative;
  }
  .tile-preview.granola .tg-line::before {
    content: attr(data-speaker);
    position: absolute; left: 0; top: 0;
    font-family: var(--mono); font-size: var(--fs-eyebrow);
    color: var(--p-accent); letter-spacing: var(--ls-app-wide);
    text-transform: uppercase;
    width: 16px;
  }

  /* Calendar-style preview */
  .tile-preview.calendar { gap: calc(var(--space-1) * var(--density-scale)); padding: calc(var(--space-2) * var(--density-scale)) calc(var(--space-3) * var(--density-scale)) calc(var(--space-2) * var(--density-scale)); }
  .tile-preview.calendar .tc-event {
    display: flex; align-items: center; gap: calc(var(--space-2) * var(--density-scale));
    padding: calc(var(--space-1) * var(--density-scale)) calc(var(--space-2) * var(--density-scale));
    background: rgba(255,255,255,0.03);
    border-left: 2px solid var(--p-accent);
    border-radius: 0 var(--radius-2) var(--radius-2) 0;
    font-family: var(--sans); font-size: var(--fs-mono-sm);
    color: var(--text-mid);
  }
  .tile-preview.calendar .tc-event.muted { border-left-color: var(--text-faint); color: var(--text-dim); }
  .tile-preview.calendar .tc-time {
    font-family: var(--mono); font-size: var(--fs-eyebrow);
    color: var(--text-faint); letter-spacing: var(--ls-app-wide);
    flex-shrink: 0; min-width: 36px;
  }

  /* git-style preview */
  .tile-preview.git { gap: calc(var(--space-1) * var(--density-scale)); padding: calc(var(--space-2) * var(--density-scale)) calc(var(--space-3) * var(--density-scale)) calc(var(--space-2) * var(--density-scale)); font-family: var(--mono); font-size: var(--fs-mono-xs); }
  .tile-preview.git .tg-row { display: flex; gap: calc(var(--space-2) * var(--density-scale)); align-items: baseline; color: var(--text-mid); }
  .tile-preview.git .tg-hash { color: var(--p-accent); flex-shrink: 0; }
  .tile-preview.git .tg-msg { color: var(--text-dim); }
  .tile-preview.git .tg-stats { color: var(--good); font-size: var(--fs-eyebrow); }
  .tile-preview.git .tg-stats.del { color: var(--judgment); }

  /* Obsidian-style preview */
  .tile-preview.obsidian { gap: calc(var(--space-1) * var(--density-scale)); padding: calc(var(--space-2) * var(--density-scale)) calc(var(--space-3) * var(--density-scale)) calc(var(--space-2) * var(--density-scale)); }
  .tile-preview.obsidian .to-line {
    font-family: var(--serif); font-size: var(--fs-mono-sm);
    color: var(--text-mid); line-height: 1.4;
    padding-left: calc(var(--space-3) * var(--density-scale)); position: relative;
  }
  .tile-preview.obsidian .to-line::before {
    content: "·"; position: absolute; left: 0;
    color: var(--p-accent); font-weight: 600;
  }
  .tile-preview.obsidian .to-tag {
    font-family: var(--mono); font-size: var(--fs-eyebrow);
    color: var(--p-accent); letter-spacing: var(--ls-app-wide);
    background: var(--p-accent-bg);
    padding: 1px calc(var(--space-app-1-5) * var(--density-scale)); border-radius: var(--radius-4);
    align-self: flex-start;
    border: 1px solid var(--p-accent-edge);
  }

  /* vault preview · purple-tinted summary */
  .tile-preview.vault { gap: calc(var(--space-1) * var(--density-scale)); padding: calc(var(--space-2) * var(--density-scale)) calc(var(--space-3) * var(--density-scale)) calc(var(--space-2) * var(--density-scale)); }
  .tile-preview.vault .tv-summary {
    font-family: var(--serif); font-style: italic;
    font-size: var(--fs-mono-sm);
    color: var(--text-mid); line-height: 1.45;
  }
  .tile-preview.vault .tv-meta {
    font-family: var(--mono); font-size: var(--fs-eyebrow);
    color: var(--diligence); letter-spacing: var(--ls-app-wide);
    text-transform: uppercase;
  }

  /* refused preview · the gated-content overlay */
  .tile-preview.refused {
    padding: calc(var(--space-3) * var(--density-scale)) calc(var(--space-3) * var(--density-scale));
    text-align: center;
    background: repeating-linear-gradient(135deg,
      transparent 0 6px,
      rgba(233,0,149,0.04) 6px 12px);
  }
  .tile-preview.refused .tr-lock {
    font-size: var(--fs-app-h2);
    color: var(--judgment);
    margin-bottom: calc(var(--space-app-1-5) * var(--density-scale));
  }
  .tile-preview.refused .tr-msg {
    font-family: var(--mono); font-size: var(--fs-mono-xs);
    color: var(--judgment); letter-spacing: 0.1em;
    line-height: 1.4;
  }

  /* generic fallback for evidence/case tiles */
  .tile-preview.evidence { gap: calc(var(--space-1) * var(--density-scale)); padding: calc(var(--space-2) * var(--density-scale)) calc(var(--space-3) * var(--density-scale)) calc(var(--space-2) * var(--density-scale)); }
  .tile-preview.evidence .te-line {
    font-family: var(--mono); font-size: var(--fs-mono-xs);
    color: var(--text-mid); line-height: 1.45;
  }
  .tile-preview.evidence .te-line strong { color: var(--text); font-weight: 500; }
  .tile-preview.evidence .te-stat {
    font-family: var(--mono); font-size: var(--fs-eyebrow);
    color: var(--judgment); letter-spacing: var(--ls-app-wide);
  }

  .tile-meta {
    display: flex; gap: calc(var(--space-2) * var(--density-scale)); align-items: baseline;
    padding: calc(var(--space-app-1-5) * var(--density-scale)) calc(var(--space-3) * var(--density-scale)) calc(var(--space-2) * var(--density-scale));
    font-family: var(--mono); font-size: var(--fs-eyebrow);
    color: var(--text-faint); letter-spacing: var(--ls-app-wide);
    text-transform: lowercase;
    border-top: 1px solid var(--hover);
  }
  .tile-meta .tm-classification { color: var(--judgment); letter-spacing: var(--ls-app-wider); text-transform: uppercase; }
  .tile-meta .tm-consent { color: var(--text-faint); }
  .tile-meta .tm-consent.required { color: var(--judgment); }
  .tile-meta .tm-note { color: var(--diligence); font-style: italic; text-transform: none; letter-spacing: var(--ls-app-wide); }

  /* drop hint at the top of the tray */
  .modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.62);
    backdrop-filter: blur(8px);
    z-index: 50;
    display: none;
    align-items: center; justify-content: center;
  }
  .modal-overlay.is-open { display: flex; }
  .modal {
    background: var(--frame-bg);
    border: 1px solid var(--p-accent-edge);
    border-radius: 10px;
    width: min(680px, 92vw);
    max-height: 80vh;
    overflow-y: auto;
    padding: calc(var(--space-6) * var(--density-scale)) 32px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.6), 0 0 60px var(--p-accent-bg);
  }
  .modal-head {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: calc(var(--space-4) * var(--density-scale));
    padding-bottom: calc(var(--space-3) * var(--density-scale)); border-bottom: 1px solid var(--frame-border);
  }
  .modal-title {
    font-family: var(--display); font-size: var(--fs-xl);
    color: var(--text); letter-spacing: var(--ls-app-neutral);
    font-weight: 500;
  }
  .modal-tag {
    font-family: var(--mono); font-size: var(--fs-mono-xs);
    color: var(--p-accent); letter-spacing: var(--ls-mono);
    text-transform: uppercase;
    border: 1px solid var(--p-accent-edge);
    padding: calc(var(--space-1) * var(--density-scale)) calc(var(--space-2) * var(--density-scale)); border-radius: var(--radius-2);
  }
  .modal-section { margin-bottom: calc(var(--space-4) * var(--density-scale)); }
  .modal-label {
    font-family: var(--mono); font-size: var(--fs-eyebrow);
    color: var(--text-faint); letter-spacing: var(--ls-mono);
    text-transform: uppercase; margin-bottom: calc(var(--space-app-1-5) * var(--density-scale));
  }
  .modal-content {
    font-family: var(--serif); font-size: var(--fs-body);
    color: var(--text-mid); line-height: 1.55;
  }
  .modal-content em { color: var(--text); font-style: italic; }
  .modal-chain { font-family: var(--mono); font-size: var(--fs-mono-sm); color: var(--text-dim); line-height: 1.7; }
  .modal-chain .chain-event {
    display: flex; gap: calc(var(--space-2) * var(--density-scale));
    padding: calc(var(--space-app-1-5) * var(--density-scale)) 0; border-bottom: 1px solid var(--card-border);
  }
  .modal-chain .chain-event:last-child { border-bottom: none; }
  .modal-chain .ce-time { color: var(--text-faint); flex-shrink: 0; }
  .modal-chain .ce-event { color: var(--text-mid); }
  .modal-chain .ce-event.refused { color: var(--judgment); }
  .modal-actions { display: flex; gap: calc(var(--space-2) * var(--density-scale)); justify-content: flex-end; margin-top: calc(var(--space-4) * var(--density-scale)); }

  /* ════════════════════════════════════════════════════════════════
     ENTRY OVERLAY · three doors · per UI_GAP_SPEC §2.4
     · first-session only · dismisses on click · routes to (surface, context)
     · the wedge sentence holds the masthead · Founder/Operator/Creative ICPs
     · Founder=Team-Devon, Operator=Personal-self_baseline, Creative=Personal-Field_Studio
     (banner's opening comment marker was lost in a past edit, which made the
     parser swallow .entry-overlay and orphaned this sheet · repaired 2026-07-29)
     ════════════════════════════════════════════════════════════════ */
  .entry-overlay {
    position: fixed; inset: 0; z-index: 250;
    background: radial-gradient(ellipse 1200px 800px at 50% 40%, rgba(142,102,251,0.08), rgba(0,0,0,0) 60%), var(--scrim-overlay);
    backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    padding: calc(var(--space-app-5) * var(--density-scale));
    animation: entry-scrim-in 320ms ease-out;
  }
  .entry-overlay[hidden] { display: none !important; }
  @keyframes entry-scrim-in { from { opacity: 0; } to { opacity: 1; } }

  /* entry-card uses the deepest surface (--bg) so door cards (--frame-bg-3)
     visibly LIFT above it · v0.8.6 visual QA caught the inversion where
     entry-card was --frame-bg and doors were --frame-bg-2 (darker) */
  .entry-card {
    width: min(820px, 96vw);
    background: var(--bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-4);
    padding: calc(var(--space-7) * var(--density-scale)) 40px calc(var(--space-6) * var(--density-scale));
    box-shadow: 0 40px 80px rgba(0,0,0,0.7), 0 0 0 1px var(--hover) inset;
    text-align: center;
    animation: entry-card-in 480ms cubic-bezier(0.32, 0.72, 0.16, 1);
  }
  @keyframes entry-card-in {
    from { opacity: 0; transform: translateY(14px) scale(0.985); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }
  .entry-brand {
    font-family: var(--mono); font-size: var(--fs-mono-xs);
    color: var(--p-accent);
    letter-spacing: 0.24em; text-transform: uppercase;
    margin-bottom: calc(var(--space-4) * var(--density-scale));
  }
  .entry-wedge {
    font-family: var(--display); font-size: var(--fs-app-h1);
    font-weight: 400; font-style: italic;
    color: #F4F2EE;
    letter-spacing: var(--ls-app-normal);
    line-height: 1.3;
    max-width: 640px;
    margin: 0 auto calc(var(--space-6) * var(--density-scale));
  }
  .entry-prompt {
    font-family: var(--mono); font-size: var(--fs-mono-xs);
    color: #8A8780;
    letter-spacing: var(--ls-mono-lg); text-transform: uppercase;
    margin-bottom: calc(var(--space-4) * var(--density-scale));
  }
  .entry-doors {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: calc(var(--space-3) * var(--density-scale));
    margin-bottom: calc(var(--space-5) * var(--density-scale));
  }
  @media (max-width: 720px) {
    .entry-doors { grid-template-columns: 1fr; }
  }
  /* doors sit ON TOP of entry-card (--frame-bg) · so doors need a LIFTED
     surface (--frame-bg-3 · #15161A) not the deeper --frame-bg-2. Visual
     QA caught the inversion in v0.8.6 · text was readable but cards
     blended into the card backdrop. */
  .entry-door {
    background: var(--frame-bg-3);
    border: 1px solid var(--card-border-2);
    border-radius: var(--radius-4);
    padding: calc(var(--space-4) * var(--density-scale)) calc(var(--space-4) * var(--density-scale)) calc(var(--space-4) * var(--density-scale));
    cursor: pointer;
    text-align: left;
    display: flex; flex-direction: column; gap: calc(var(--space-2) * var(--density-scale));
    transition: border-color 220ms, background 220ms, transform 220ms;
  }
  .entry-door:hover {
    border-color: var(--p-accent);
    background: color-mix(in oklch, var(--frame-bg-3) 80%, var(--p-accent-bg) 20%);
    transform: translateY(-2px);
  }
  .entry-door .ed-eyebrow {
    font-family: var(--mono); font-size: var(--fs-eyebrow);
    color: var(--p-accent);
    letter-spacing: var(--ls-mono); text-transform: uppercase;
    font-weight: 500;
  }
  .entry-door .ed-title {
    font-family: var(--display); font-size: var(--fs-app-h2);
    font-weight: 500;
    /* explicit pure-white for max contrast · v0.8.6 visual QA flagged
       canon's warm-cream as reading dim in some display profiles ·
       white guarantees AAA on every monitor */
    color: #FFFFFF;
    letter-spacing: var(--ls-app-normal);
    line-height: 1.3;
  }
  .entry-door .ed-helper {
    font-family: var(--serif); font-size: var(--fs-mono-lg);
    /* explicit light-cream · always readable · AAA against --frame-bg-3 */
    color: #E8E6E1;
    line-height: 1.5;
    font-style: italic;
  }
  /* register-coded eyebrows · per Soleio's "registers as registers" rule */
  .entry-door[data-product="team"] .ed-eyebrow      { color: var(--synthesis); }
  .entry-door[data-product="team"]:hover            { border-color: var(--synthesis); }
  .entry-door[data-product="personal"] .ed-eyebrow  { color: var(--diligence); }
  .entry-door[data-product="personal"]:hover        { border-color: var(--diligence); }
  .entry-door[data-product="business"] .ed-eyebrow  { color: var(--outreach); }
  .entry-door[data-product="business"]:hover        { border-color: var(--outreach); }

  .entry-skip {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-dim);
    font-family: var(--mono); font-size: var(--fs-mono-xs);
    letter-spacing: var(--ls-app-wider); text-transform: uppercase;
    cursor: pointer;
    padding: calc(var(--space-app-1-5) * var(--density-scale)) calc(var(--space-3) * var(--density-scale));
    border-radius: var(--radius-2);
    transition: color 180ms, border-color 180ms;
    margin-top: calc(var(--space-app-1-5) * var(--density-scale));
  }
  .entry-skip:hover {
    color: var(--text);
    border-color: var(--card-border);
  }

  @media (prefers-reduced-motion: reduce) {
    .entry-overlay, .entry-card { animation: none !important; }
  }

  /* ════════════════════════════════════════════════════════════════
     LEGACY CATALOG RULES · removed 2026-04-28 · v0.8.4 visual QA fix
     ────────────────────────────────────────────────────────────────
     The catalog rail (.catalog-nav · .cn-* · .cut · .cut-stub) used to
     live in this shared shell when index.html was single-file. Since
     v0.8.2, the catalog rail lives ONLY in the parent shell (index.html).
     Cuts run as iframes and have no rail. Including those rules here
     caused `body { padding-left: 188px }` to apply inside cut iframes,
     compressing slate/cell layouts and forcing per-character text wrap.

     Net: 165 lines removed · cut 01 slate-tray and cut 03 calibration
     grid both render correctly at expected viewports again.
     ════════════════════════════════════════════════════════════════ */

  /* ════════════════════════════════════════════════════════════════
     VAULT PRIMITIVE · promoted from design-system/atlas/state-atlas.html
     (2026-07-29, per the promotion path: locked moves graduate from the
     specimen to lib). The 12-week × 4-register lattice · the moat made
     visible. States per the atlas Vault row: empty ◇ · seeded ◯ · dense ●
     · gapped (cell--miss). The atlas consumes THIS copy; do not fork.
     ════════════════════════════════════════════════════════════════ */
  .px-eyebrow {
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    gap: 8px;
  }
  .px-eyebrow .reg { color: var(--text-mid); }
  .p-vault {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 160px;
  }
  .p-vault__rail {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 6px;
    align-items: center;
  }
  .p-vault__rail-label {
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-faint);
    text-align: right;
  }
  .p-vault__rail--diligence .p-vault__rail-label { color: var(--diligence); }
  .p-vault__rail--judgment  .p-vault__rail-label { color: var(--judgment); }
  .p-vault__rail--synthesis .p-vault__rail-label { color: var(--synthesis); }
  .p-vault__rail--outreach  .p-vault__rail-label { color: var(--outreach); }
  .p-vault__cells {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 2px;
  }
  .p-vault__cell {
    aspect-ratio: 1;
    background: var(--frame-bg-3);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 1px;
  }
  .p-vault__cell--lit-d    { background: var(--diligence-soft); border-color: var(--diligence-edge); }
  .p-vault__cell--lit-d-s  { background: var(--diligence); }
  .p-vault__cell--lit-j    { background: var(--judgment-soft); border-color: var(--judgment-edge); }
  .p-vault__cell--lit-j-s  { background: var(--judgment); }
  .p-vault__cell--lit-s    { background: var(--synthesis-soft); border-color: var(--synthesis-edge); }
  .p-vault__cell--lit-s-s  { background: var(--synthesis); }
  .p-vault__cell--lit-o    { background: var(--outreach-soft); border-color: var(--outreach-edge); }
  .p-vault__cell--lit-o-s  { background: var(--outreach); }
  .p-vault__cell--miss     { background: transparent; border: 1px dashed var(--wholeness-edge); }

  /* ════════════════════════════════════════════════════════════════
     SIGNAL PRIMITIVES · promoted from design-system/atlas/signal-atlas.html
     (2026-07-29). Earned-delta metric row + burn bars. The law travels
     with them: the metric is ink; only a measured delta earns chroma
     (adverse -> alarm, favorable -> resolved/good, no target -> ink);
     burn is BARS not curves; only breach weeks earn severity.
     The signal atlas consumes THIS copy; do not fork.
     ════════════════════════════════════════════════════════════════ */
  /* specimen 01 · metric row with earned deltas */
  .p-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--frame-border); border: 1px solid var(--frame-border); border-radius: 5px; overflow: hidden; }
  .p-metric { background: var(--frame-bg); padding: 16px 18px; }
  .p-metric__k { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); text-transform: uppercase; margin-bottom: 8px; }
  .p-metric__v { font-family: var(--font-display); font-size: 26px; font-weight: 700; letter-spacing: var(--tracking-snug); line-height: 1; color: var(--text); }
  .p-metric__d { font-family: var(--font-mono); font-size: 10px; margin-top: 6px; letter-spacing: 0.04em; color: var(--text-dim); }
  /* earned: the delta hue is derived from a measured over/under */
  .p-metric__d--over  { color: var(--stability); }
  .p-metric__d--under { color: var(--resolved); }
  .p-metric--breach .p-metric__v { color: var(--stability); }
  .spec-note { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-faint); margin-top: 12px; }
  .spec-note b { color: var(--text-dim); font-weight: 400; }

  /* specimen 02 · burn bars */
  .p-burn { border: 1px solid var(--frame-border); border-radius: 5px; background: var(--frame-bg); padding: 18px; }
  .p-burn__head { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-faint); margin-bottom: 14px; }
  .p-burn__plot { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; align-items: end; height: 120px; }
  .p-burn__bar { background: var(--frame-bg-3); border: 1px solid rgba(255,255,255,0.05); border-radius: 2px 2px 0 0; }
  .p-burn__bar--breach { background: var(--stability-200); border-color: var(--stability); }
  .p-burn__budget { position: absolute; left: 0; right: 0; top: 28%; border-top: 1px dashed var(--text-mute); }
  .p-burn__budget span { position: absolute; right: 0; top: -16px; font-family: var(--font-mono); font-size: 9px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-faint); }
  .p-burn__weeks { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; margin-top: 8px; font-family: var(--font-mono); font-size: 8px; color: var(--text-mute); text-align: center; letter-spacing: 0.08em; }

  /* ════════════════════════════════════════════════════════════════
     READ PRIMITIVE · the brief · one design, four donors
     (2026-07-29, founder-adopted from cuts/06-margin-read.html)
     ════════════════════════════════════════════════════════════════

     THE PROBLEM IT CLOSES. The same brief existed four times under four
     vocabularies: cut 06 (.read/.tag/.verdict/.refusal), cut 10
     (.tdy-rcard/.tdy-verdict/.tdy-receipt), cut 12 (.op-read + .reg-*),
     cut 11/00 (.reg/.rname/.rbody). Cuts 06 and 10 were a FORK, not a
     resemblance — identical fixture, identical receipt string, identical
     .lane/.almost tag modifiers. This is the single copy.

     WHO DONATED WHAT
     · cut 06 — the chrome: card, tag pills, verdict line, refusal box,
                receipt rule, action row.
     · cut 12 — the structure: register-coded left border, register-named
                head, and the row model below.
     · cut 10 — the chroma (it was already right; see the law).

     THE ROW MODEL IS LOAD-BEARING. Quoted · Situation · Hidden risk ·
     Next move are not stylistic labels — they are liminal-desktop's
     shipped `agent_reads` columns (quoted · situation · hidden_risk ·
     next_move · refusal). A read rendered here is structurally faithful
     to the schema, so the design and the substrate cannot drift apart.

     CHROMA LAW · v0.3 SEVERITY LANE (founder ruling 2026-07-29;
     design-system/atlas/state-atlas.html). Two sanctioned kinds of
     earned signal, never flattened into each other:
       refused read · refusal glyph · verdict → --judgment
           A refusal is a LIFECYCLE state, and lifecycle states use the
           four registers only. The ruling: "a refused agent and a
           flagged anomaly never share a hue." The atlas .p-refusal
           already binds --wholeness (= --judgment); cut 12's refused
           badge already binds --judgment. Cut 06 used --alarm — it was
           the outlier and that binding is deliberately NOT carried here.
       which agent refused / register attribution → the register hue
           A sanctioned hue kind, so the --outreach tint on the refusal
           box is correct: it names WHO handed the work back.
       readiness tags ("Almost ready") → INK
           Also a lifecycle state. Spending --watch on it would put a
           severity hue on a non-severity thing.
       --alarm / --watch → NEVER in this primitive.
           Severity is a property of the EVIDENCE, not of a read.

     TOKEN FAMILY. Uses the canonical family — `--mono`, `--serif`, the
     `--fs-` sizes, the `--ls-` tracking, the `--space-` scale — which is what
     every consuming cut already uses. NOTE the older p- blocks above
     reference `--font-mono`, `--text-2xs` and `--tracking-widest`, which are
     defined in NEITHER canon nor the shell, so their typography silently
     falls back to browser defaults. Do not copy that vocabulary.
     (Careful with wildcards in comments here: a literal star-slash pair ends
     the comment early and the parser then eats the next rule.)
     ════════════════════════════════════════════════════════════════ */

  .p-read {
    border: 1px solid var(--card-border);
    border-left: 2px solid var(--card-border-2, var(--card-border));
    border-radius: var(--radius-3);
    background: var(--frame-bg-2);
    padding: 18px;
  }

  /* Register attribution — a sanctioned hue kind. The left edge says which
     register produced this read, at a glance, without spending a word. */
  .p-read--diligence { border-left-color: var(--diligence); }
  .p-read--outreach  { border-left-color: var(--outreach); }
  .p-read--judgment  { border-left-color: var(--judgment); }
  .p-read--synthesis { border-left-color: var(--synthesis); }

  /* A refused read is the read, at full weight — never an empty slot.
     Judgment register, NOT severity.

     NAMED `--refusal`, NOT `--refused`, and that is load-bearing.
     lib/brand-upgrade.css carries:
       .status-badge.refused, .tag-refused, [class*="refused"], .agent-tag.refused
         { color/background/border-color: wholeness… !important }
     `[class*="refused"]` is a SUBSTRING wildcard with !important, so a modifier
     named `--refused` gets all four of its borders, its background and its text
     forcibly repainted — the primitive silently stops rendering what it
     declares. Verified: it was overriding this rule's left-edge-only intent.
     `--refusal` dodges the substring and also matches this primitive's own
     element names (__refusal-glyph, __refusal-why). Do not rename it back.
     The wildcard itself is left intact: other surfaces legitimately depend on
     it, and narrowing a shared !important selector is its own change. */
  .p-read--refusal { border-left-color: var(--judgment); background: var(--judgment-bg); }

  .p-read__head {
    display: flex;
    align-items: center;
    gap: calc(var(--space-2) * var(--density-scale));
    margin-bottom: calc(var(--space-2) * var(--density-scale));
    font-family: var(--mono);
    font-size: var(--fs-mono-xs);
    letter-spacing: var(--ls-mono-sm);
    text-transform: uppercase;
    color: var(--text-dim);
  }
  .p-read--diligence > .p-read__head { color: var(--diligence); }
  .p-read--outreach  > .p-read__head { color: var(--outreach); }
  .p-read--judgment  > .p-read__head { color: var(--judgment); }
  .p-read--synthesis > .p-read__head { color: var(--synthesis); }

  .p-read__age { margin-left: auto; color: var(--text-faint); }

  .p-read__badge {
    font-family: var(--mono);
    font-size: var(--fs-mono-xs);
    letter-spacing: var(--ls-app-wide);
    text-transform: uppercase;
    padding: 1px calc(var(--space-app-1-5) * var(--density-scale));
    border: 1px solid var(--judgment-edge);
    border-radius: var(--radius-2);
    color: var(--judgment);
  }

  /* ── tags ─────────────────────────────────────────────────────── */

  .p-read__tags { display: flex; gap: calc(var(--space-2) * var(--density-scale)); flex-wrap: wrap; margin-bottom: calc(var(--space-3) * var(--density-scale)); }

  .p-read__tag {
    font: var(--fs-mono-xs)/1 var(--mono);
    letter-spacing: var(--ls-mono-sm);
    text-transform: uppercase;
    padding: calc(var(--space-1) * var(--density-scale)) 9px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--frame-border);
    color: var(--text-dim);
    background: var(--frame-bg);
  }
  /* Only a register attribution earns a hue; everything else is ink.
     This also SETTLES a disagreement the fork had hidden: cut 06 coloured its
     lane tag --judgment, cut 10 coloured the same tag --ink-clarity
     (= diligence). Neither was right — "Founding round" names a SUBJECT, not a
     register, and under the atlas rule a hue must name its measurement. So
     subject and readiness tags are ink, and the card's left edge + head carry
     the register. The modifiers below exist for tags that genuinely name one. */
  .p-read__tag--diligence { color: var(--diligence); border-color: color-mix(in oklab, var(--diligence) 40%, transparent); }
  .p-read__tag--outreach  { color: var(--outreach);  border-color: color-mix(in oklab, var(--outreach) 40%, transparent); }
  .p-read__tag--judgment  { color: var(--judgment);  border-color: color-mix(in oklab, var(--judgment) 40%, transparent); }
  .p-read__tag--synthesis { color: var(--synthesis); border-color: color-mix(in oklab, var(--synthesis) 40%, transparent); }

  /* ── verdict · a disposition, i.e. a lifecycle state → judgment ── */

  .p-read__verdict {
    font: var(--fs-mono-sm)/1 var(--mono);
    letter-spacing: var(--ls-app-wide);
    color: var(--judgment);
    font-weight: 500;
    margin-bottom: 10px;
  }

  /* Cut 10 rendered its verdict as large italic display before the fold. The
     adopted chrome is the mono form above; this modifier keeps that editorial
     voice available rather than deleting it. Same hue either way. */
  .p-read__verdict--display {
    font: italic 500 var(--fs-app-lg)/1.15 var(--display);
    letter-spacing: var(--ls-app-neutral);
    text-transform: none;
    margin-bottom: 0.7rem;
  }

  /* ── the row model · desktop's agent_reads columns ─────────────── */

  .p-read__row {
    display: flex;
    gap: 10px;
    font-size: var(--fs-mono-lg);
    line-height: 1.55;
    margin-bottom: calc(var(--space-app-1-5) * var(--density-scale));
  }
  .p-read__row:last-child { margin-bottom: 0; }

  .p-read__k {
    font-family: var(--mono);
    font-size: var(--fs-eyebrow);
    letter-spacing: var(--ls-app-wide);
    text-transform: uppercase;
    color: var(--text-faint);
    width: 84px;
    flex-shrink: 0;
    padding-top: calc(var(--space-app-0-5) * var(--density-scale));
  }
  .p-read__v { font-family: var(--serif); color: var(--text-mid); }
  .p-read__v b { color: var(--text); font-weight: 600; }

  /* A refused read's rows carry full-strength ink: the refusal IS the payload,
     not a dimmed aside. Preserved from cut 12, which had this as
     `.op-read.reg-judgment .op-read-v.op-refusal-text`. */
  .p-read--refusal .p-read__v { color: var(--text); }

  /* Prose body, for the synthesized/held read that has no row breakdown. */
  .p-read__body { color: var(--text-mid); font-size: var(--fs-body); line-height: 1.6; margin: 0 0 14px; }
  .p-read__body b { color: var(--text); font-weight: 600; }

  /* ── refusal · the architectural signature, made legible ───────── */

  .p-read__refusal {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 11px 13px;
    border: 1px solid color-mix(in oklab, var(--outreach) 32%, var(--frame-border));
    border-radius: var(--radius-2);
    background: color-mix(in oklab, var(--outreach) 7%, var(--frame-bg));
    margin-bottom: 14px;
  }
  /* The glyph marks the refusal itself → judgment. The box tint names the
     refusing register → --outreach above. Two different jobs, two hues. */
  .p-read__refusal-glyph {
    font-family: var(--mono);
    color: var(--judgment);
    flex-shrink: 0;
    line-height: 1.5;
  }
  .p-read__refusal-why { font-size: var(--fs-mono-lg); color: var(--text-mid); line-height: 1.55; }
  .p-read__refusal-why b { color: var(--outreach); font-weight: 600; }

  /* ── receipt ───────────────────────────────────────────────────── */

  .p-read__receipt {
    font: var(--fs-mono-xs)/1.55 var(--mono);
    color: var(--text-faint);
    letter-spacing: var(--ls-app-loose);
    padding-top: 11px;
    border-top: 1px dashed var(--frame-border);
    word-break: break-word;
  }
  .p-read__receipt-k { color: var(--text-dim); }

  /* ── actions ───────────────────────────────────────────────────── */

  .p-read__actions { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 14px; }

  .p-read__btn {
    font: var(--fs-mono-sm)/1 var(--mono);
    letter-spacing: var(--ls-mono-sm);
    text-transform: uppercase;
    padding: 9px 14px;
    border-radius: var(--radius-2);
    border: 1px solid var(--card-border);
    background: var(--frame-bg);
    color: var(--text-dim);
    cursor: pointer;
    transition: color 180ms var(--ease), border-color 180ms var(--ease), background 180ms var(--ease);
  }
  .p-read__btn:hover { color: var(--text); border-color: var(--judgment-edge); }
  .p-read__btn:focus-visible { outline: 2px solid var(--ui-focus-ring); outline-offset: 2px; }
  .p-read__btn--primary { color: var(--judgment); border-color: color-mix(in oklab, var(--judgment) 50%, var(--card-border)); }
  .p-read__btn--primary:hover { background: color-mix(in oklab, var(--judgment) 12%, var(--frame-bg)); }

  /* ── compact · a re-surfaced read you are returning to (cut 10) ── */

  .p-read--compact { padding: calc(var(--space-3) * var(--density-scale)) 0 calc(var(--space-3) * var(--density-scale)) calc(var(--space-4) * var(--density-scale)); border: 0; border-left: 2px solid var(--card-border-2, var(--card-border)); border-radius: 0; background: none; }
  .p-read--compact.p-read--diligence { border-left-color: var(--diligence); }
  .p-read--compact.p-read--outreach  { border-left-color: var(--outreach); }
  .p-read--compact.p-read--judgment  { border-left-color: var(--judgment); }
  .p-read--compact.p-read--synthesis { border-left-color: var(--synthesis); }
  /* Display face + 17px matches cut 10's established rcard title (it used
     --display at 1.05rem ≈ 16.8px), so converging costs it no type change. */
  .p-read--compact .p-read__head {
    color: var(--text);
    text-transform: none;
    font-family: var(--display);
    font-weight: 500;
    font-size: var(--fs-md);
    letter-spacing: normal;
  }
  .p-read--compact .p-read__body { margin-bottom: 0; font-size: var(--fs-mono-lg); }

  @media (prefers-reduced-motion: reduce) {
    .p-read__btn { transition: none; }
  }

  .p-reads { display: flex; flex-direction: column; gap: 14px; }