/* One project page: the indigo opening with the film, the local experiment,
   the problem and the idea, the diagram, and Scope. Every value comes from a
   shell token, so both themes and the indigo panel resolve on their own. */
@layer components {

  /* ── the opening ────────────────────────────────────────────────── */
  .project-head {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    gap: var(--s8) var(--s10); align-items: center;
  }
  .project-identity { min-width: 0; }
  .project-mark {
    display: block; width: 72px; height: 72px; padding: var(--s3);
    background: var(--edition-palette-white); border-radius: var(--r-xl);
    margin-bottom: var(--s6);
  }
  .project-mark-initial {
    display: grid; place-items: center; padding: 0;
    color: var(--edition-palette-indigo); font-size: 2.25rem; font-weight: 600;
    letter-spacing: var(--ls-display);
  }
  .next-mark { width: 48px; height: 48px; flex: none; padding: 5px;
    background: var(--edition-palette-white-short); border-radius: var(--r-md); }
  .next-mark-initial { display: grid; place-items: center; padding: 0;
    background: var(--paper-2); border: 1px solid var(--rule);
    color: var(--ink-2); font-size: 1.125rem; font-weight: 600; }
  /* The tagline is the second line of the opening; the shell already sets
     the lede under it, so nothing here redeclares that scale. */
  /* the facts strip: what a hiring manager scans for first */
  .project-facts { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s7); margin-top: var(--s6);
    padding-top: var(--s5); border-top: 1px solid var(--edition-line); }
  .project-facts div { display: grid; gap: 3px; }
  .project-facts dt { font-family: var(--mono); font-size: var(--t-eyebrow); letter-spacing: .06em; text-transform: uppercase;
    color: var(--edition-secondary); }
  .project-facts dd { font-size: var(--t-small); color: var(--edition-white); }
  .project-hook {
    margin-top: var(--s4); font-size: var(--t-title); line-height: 1.22;
    letter-spacing: var(--ls-heading); color: var(--ink);
  }

  .project-film { margin: 0; min-width: 0; }
  .project-film .film-surface {
    background: var(--edition-palette-dark-ground); border-radius: var(--r-md); overflow: hidden;
  }
  .project-film video { width: 100%; height: 100%; display: block; }
  .project-film figcaption {
    margin-top: var(--s3); font-size: var(--t-caption); color: var(--ink-2); max-width: 60ch;
  }
  .project-film-rendered .frame { border-color: var(--rule); }

  .film-chapters { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }
  .film-chapters[hidden] { display: none; }
  .film-chapters button {
    display: inline-flex; align-items: center; gap: var(--s2);
    min-height: 34px; padding: var(--s1) var(--s3);
    border: 1px solid var(--rule); border-radius: var(--r-pill);
    background: transparent; color: var(--ink); font: inherit; font-size: var(--t-caption);
    cursor: pointer; touch-action: manipulation;
    transition: background-color var(--d-hover) ease, border-color var(--d-hover) ease;
  }
  .film-chapters button span { font-family: var(--mono); font-size: var(--t-machine); opacity: 0.7; }
  @media (hover: hover) and (pointer: fine) {
    .film-chapters button:hover { background: var(--edition-palette-on-indigo-rule); }
  }
  .film-chapters button[aria-current="true"] {
    background: var(--edition-palette-white); color: var(--edition-palette-indigo);
    border-color: var(--edition-palette-white);
  }
  .film-chapters button[aria-current="true"] span { opacity: 0.8; }

  /* ── the problem and the idea ───────────────────────────────────── */
  /* A rail of two, and one panel. With no JavaScript the rail collapses to
     nothing and both panels sit side by side instead. */
  .project-story {
    display: grid; grid-template-columns: auto minmax(0, 1fr);
    gap: var(--s7) var(--s10); align-items: start;
  }
  .story-controls { display: grid; gap: var(--s2); }
  .story-controls[hidden] { display: none; }
  .story-controls .btn { justify-content: flex-start; }
  .story-controls button[aria-pressed="true"] {
    background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
  }
  .story-panels {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s9);
  }
  .story-panels h2 { font-size: var(--t-section); letter-spacing: var(--ls-heading); }
  .story-panels p {
    margin-top: var(--s4); font-size: var(--t-lede); line-height: 1.5;
    color: var(--ink-2); max-width: 46ch;
  }

  /* ── how it is built ────────────────────────────────────────────── */
  .project-built {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: var(--s8) var(--s10); align-items: start;
  }
  .project-built h2 { font-size: var(--t-section); letter-spacing: var(--ls-heading); }
  .project-built .intro { margin-top: var(--s4); color: var(--ink-2);
    font-size: var(--t-prose); line-height: var(--lh-prose); max-width: 44ch; }

  .diagram-figure { min-width: 0; }
  .diagram-frame {
    overflow: auto; overscroll-behavior-x: contain;
    border: 1px solid var(--rule); border-radius: var(--r-lg);
    background: var(--paper-2); padding: var(--s5);
  }
  .dg {
    display: block; width: 100%; height: auto; min-width: 480px;
    font-family: var(--ui); color: var(--ink);
  }
  .dg text { fill: currentColor; }
  .dg .dg-title { font-size: 13px; font-weight: 550; letter-spacing: -0.01em; }
  .dg .dg-detail { font-size: 11.5px; opacity: 0.62; }
  .dg .dg-edge { font-size: 11px; opacity: 0.6; }
  .dg [data-main="true"] { fill: var(--accent); opacity: 1; }

  .diagram-key { margin-top: var(--s3); font-size: var(--t-caption); color: var(--graphite); }
  .diagram-text { margin-top: var(--s6); border-top: 1px solid var(--rule-soft); }
  .diagram-text > summary { font-size: var(--t-small); color: var(--accent); }
  .diagram-text p { padding-bottom: var(--s5); color: var(--ink-2);
    font-size: var(--t-small); line-height: var(--lh-prose); max-width: 64ch; }

  /* ── scope: the one place the boundaries are stated ─────────────── */
  .project-scope {
    margin-block: var(--s6) var(--s10);
    border: 1px solid var(--rule); border-radius: var(--r-lg);
    padding: var(--s2) var(--s6);
  }
  .project-scope > summary { font-size: var(--t-small); font-weight: 600; }
  .project-scope p { padding-bottom: var(--s5); color: var(--ink-2);
    font-size: var(--t-small); line-height: var(--lh-prose); max-width: 74ch; }

  .edition-next > a:last-child span { font-size: var(--t-caption); color: var(--graphite); }
  .edition-next > a:last-child strong { font-weight: 550; }

  .diagram-scroll { display: none; }
  @media (max-width: 760px) { .diagram-scroll { display: inline; } }

  @media (max-width: 1000px) {
    .project-head,
    .project-story,
    .project-built { grid-template-columns: minmax(0, 1fr); }
    .project-head { gap: var(--s7); }
    /* Side by side once the rail is gone, so the pair still reads as a
       choice rather than two headings. */
    .story-controls { grid-auto-flow: column; justify-content: start; gap: var(--s3); }
  }
  @media (max-width: 640px) {
    .project-mark { width: 56px; height: 56px; margin-bottom: var(--s5); }
    .story-panels { gap: var(--s7); }
    /* Eight chapters wrap to eight lines on a phone. One scrolling row
       keeps the opening the height of an opening. */
    .film-chapters {
      flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
      scroll-snap-type: x proximity; padding-bottom: var(--s1);
      scrollbar-width: none; mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); padding-right: 40px;
    }
    .film-chapters button { flex: none; scroll-snap-align: start; }
  }
}

/* ══ the local experiment ═══════════════════════════════════════════
   The project's own model, running in the page. Controls stay hidden
   until src/js/engineering-experiments.mjs reveals them. */
@layer components {

  .engineering-experiment {
    margin-block: var(--s7) var(--s10);
    padding: clamp(24px, 4vw, 52px);
    border: 1px solid var(--rule); border-radius: var(--r-xl);
    background: var(--paper-2);
  }
  .experiment-intro { margin-bottom: var(--s7); }
  .experiment-intro h2 { font-size: var(--t-section); font-weight: 550;
    letter-spacing: var(--ls-display); line-height: 1.1; }
  .experiment-intro p { color: var(--ink-2); line-height: var(--lh-prose);
    margin-top: var(--s5); max-width: 52ch; }

  .experiment-controls {
    display: flex; flex-wrap: wrap; align-items: end; gap: var(--s4); margin-bottom: var(--s8);
  }
  .experiment-controls[hidden] { display: none; }
  .experiment-controls label { display: grid; gap: 7px; font-size: var(--t-machine); color: var(--ink-2); }
  .experiment-controls select {
    min-height: 44px; padding: var(--s2) var(--s7) var(--s2) var(--s3);
    font: inherit; font-size: var(--t-small); color: var(--ink);
    background: var(--paper); border: 1px solid var(--rule-strong); border-radius: 7px;
  }
  .experiment-controls .btn:disabled {
    opacity: 1; color: var(--ink-2); background: var(--paper);
    border-color: var(--rule); cursor: default;
  }
  .experiment-controls .experiment-check {
    display: flex; align-items: center; gap: var(--s3); font-size: var(--t-small); min-height: 44px;
  }
  .experiment-controls input[type='checkbox'],
  .timeline-working input { accent-color: var(--accent); width: 18px; height: 18px; flex-shrink: 0; }

  .mechanism-node {
    position: relative; display: grid; align-content: center; gap: var(--s3); padding: var(--s6);
    background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-lg);
    min-height: 150px;
  }
  .mechanism-node-label { font-size: var(--t-small); color: var(--ink-2); }
  .mechanism-node strong {
    font-size: clamp(26px, 3vw, 42px); font-weight: 550; letter-spacing: var(--ls-display);
    line-height: 1.08; font-variant-numeric: tabular-nums;
  }
  .mechanism-node-detail { font-size: var(--t-machine); color: var(--ink-2); line-height: 1.5; }
  .mechanism-node.is-changed { border-color: var(--accent); }
  .mechanism-node.is-changed strong { color: var(--accent); }

  .atlas-mechanism {
    display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr;
    gap: var(--s6) var(--s9); align-items: center; position: relative;
  }
  .atlas-source { grid-column: 1; grid-row: 1/3; border-color: var(--accent); }
  .atlas-working { grid-column: 2; grid-row: 1; }
  .atlas-curated { grid-column: 2; grid-row: 2; }
  .atlas-audience { grid-column: 3; grid-row: 1/3; }
  .mechanism-connections {
    position: absolute; width: 100%; height: 100%; inset: 0;
    fill: none; stroke: var(--accent); stroke-width: 1.5;
  }
  .mechanism-connections .review-edge { stroke-width: 3; }
  .mechanism-connections .is-held { stroke: var(--ink-2); stroke-dasharray: .03 .025; }
  .mechanism-connections .is-active { stroke: var(--accent); stroke-dasharray: none; }

  .experiment-held {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s5);
    padding: var(--s5) 0; margin-top: var(--s6); border-block: 1px solid var(--rule);
    font-size: var(--t-small); color: var(--ink-2);
  }
  .experiment-held strong { color: var(--ink); font-weight: 550; margin-left: var(--s3); }
  .experiment-result {
    margin-top: var(--s6); max-width: 80ch; font-size: var(--t-body);
    line-height: var(--lh-prose); min-height: 3.3em;
  }
  .experiment-state { margin-top: var(--s7); border-top: 1px solid var(--rule); }
  .experiment-state > summary { padding-block: var(--s4); color: var(--accent); font-size: var(--t-small); }
  .experiment-state p { color: var(--ink-2); font-size: var(--t-small); line-height: 1.7; max-width: 75ch; }
  .experiment-state pre {
    margin-top: var(--s5); padding: var(--s5); border-radius: var(--r-md);
    background: var(--paper); font-size: var(--t-machine); overflow-x: auto; line-height: 1.6;
  }

  .relay-mechanism { display: grid; grid-template-columns: 1fr 80px 1fr; align-items: center; }
  .relay-mechanism .mechanism-node { min-height: 240px; }
  .relay-mechanism strong { font-size: clamp(25px, 3vw, 40px); }
  .relay-thread { height: 2px; background: var(--rule-strong); font-size: 0; }
  .is-connected .relay-thread { background: var(--accent); }
  .relay-file { border-left: 3px solid var(--accent); padding-left: var(--s5); }

  .redline-mechanism {
    display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(270px, 0.8fr);
    gap: var(--s7); align-items: start;
  }
  .redline-canvas {
    position: relative; aspect-ratio: 780/564; background: #fff;
    border-radius: var(--r-lg); cursor: crosshair;
    --accent: var(--edition-palette-indigo);
  }
  .redline-page svg,
  .redline-selection { width: 100%; height: auto; display: block; }
  .redline-selection { position: absolute; inset: 0; pointer-events: none; }
  .redline-author .experiment-controls { display: flex; margin: 0 0 var(--s5); gap: var(--s3); }
  .redline-author .experiment-controls[hidden] { display: none; }
  .redline-author .experiment-controls > label { width: 100%; }
  .redline-author select { width: 100%; min-width: 0; }
  .redline-author textarea {
    padding: var(--s3); font: inherit; font-size: var(--t-small); line-height: 1.6;
    color: var(--ink); background: var(--paper);
    border: 1px solid var(--rule-strong); border-radius: var(--r-md);
    resize: vertical; min-height: 100px;
  }
  .redline-target-path {
    font-size: var(--t-machine); line-height: 1.7; color: var(--ink-2);
    overflow-wrap: anywhere; white-space: pre-line;
  }
  .redline-saved { display: grid; gap: var(--s2); margin-top: var(--s4); }
  .redline-note {
    padding: var(--s3); min-height: 44px; color: var(--ink); background: var(--paper);
    border: 1px solid var(--rule-strong); border-radius: 9px;
    font: inherit; font-size: var(--t-small); text-align: left; cursor: pointer;
    overflow-wrap: anywhere;
  }

  .timeline-mechanism { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s7); }
  .timeline-working {
    border: 1px solid var(--rule); border-radius: var(--r-lg); padding: var(--s6);
    background: var(--paper); min-width: 0;
  }
  .timeline-working legend { padding: 0 var(--s2); font-size: var(--t-small); font-weight: 550; }
  .timeline-working label {
    display: flex; align-items: center; gap: var(--s3); min-height: 52px;
    padding: var(--s3) 0; font-size: var(--t-small); border-bottom: 1px solid var(--rule);
  }
  .timeline-working label:last-child { border: 0; }
  .timeline-working time { margin-left: auto; white-space: nowrap;
    font-size: var(--t-caption); color: var(--ink-2); }
  .timeline-recipient {
    background: var(--paper); padding: var(--s7);
    border: 1px solid var(--accent); border-radius: var(--r-lg);
  }
  .timeline-recipient h3 { font-size: var(--t-title); line-height: 1.2;
    letter-spacing: var(--ls-heading); margin: var(--s4) 0 var(--s7); }
  .timeline-recipient ol { list-style: none; padding: 0; }
  .timeline-recipient li {
    display: flex; justify-content: space-between; gap: var(--s5);
    padding: var(--s5) 0 var(--s5) var(--s5); border-left: 2px solid var(--accent);
    font-size: var(--t-small);
  }
  .timeline-recipient time { color: var(--accent); white-space: nowrap; }
  .timeline-recipient p { margin-top: var(--s6); font-size: var(--t-caption);
    line-height: 1.6; color: var(--ink-2); }

  @media (max-width: 950px) {
    .redline-mechanism { grid-template-columns: minmax(0, 1fr); }
    .redline-author .experiment-controls { max-width: 650px; }
  }
  @media (max-width: 900px) {
    .atlas-mechanism { gap: var(--s5); }
    .mechanism-node { padding: var(--s5); }
    .mechanism-node-label { font-size: var(--t-machine); }
  }
  @media (max-width: 650px) {
    .relay-mechanism,
    .timeline-mechanism { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
    .relay-thread { height: 30px; width: 2px; margin: auto; }
    .relay-mechanism .mechanism-node {
      display: flex; flex-direction: column; align-items: flex-start; min-height: 180px;
    }
    .timeline-working,
    .timeline-recipient { padding: var(--s4); }
    .experiment-controls { align-items: stretch; }
    .experiment-controls label { width: 100%; }
    .atlas-mechanism { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; gap: var(--s3); }
    .mechanism-connections { display: none; }
    .atlas-source,
    .atlas-working,
    .atlas-curated,
    .atlas-audience { grid-column: auto; grid-row: auto; min-height: 0; }
    .mechanism-node { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s2) var(--s3); padding: var(--s5); }
    .mechanism-node strong { grid-column: 2; grid-row: 1/3; align-self: center; font-size: 30px; }
    .mechanism-node-detail { grid-column: 1; }
    .experiment-held { flex-direction: column; }
    .experiment-held strong { display: block; margin: var(--s1) 0 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .engineering-experiment,
    .engineering-experiment *,
    .film-chapters button { transition: none !important; animation: none !important; }
  }
}