/* SpringProd Labs — AI primers.
   Loaded after site.css on /primers/ pages only. Everything is scoped under .primer
   (or .pm-) so nothing leaks into the rest of the site. Type, rules, gold and the
   cut-corner frames come from site.css; the only additions are the diagram colour
   code (data, model, people, tools, risk), which carries meaning in every figure. */

.primer, .pm-key {
  --data: #2a78d6;  --data-fill: #e2edfa;
  --model: #4a3aa7; --model-fill: #e8e5f6;
  --human: #d65a28; --human-fill: #fbe7de;
  --tool: #1b9e6e;  --tool-fill: #ddf3e9;
  --risk: #d93a39;  --risk-fill: #fae2e2;
  --neutral: #6b7686; --neutral-fill: #eceff3;
  --panel: rgba(15, 42, 76, .04);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .primer, :root:not([data-theme="light"]) .pm-key {
    --data: #5b9bea;  --data-fill: #17283e;
    --model: #9c92ec; --model-fill: #26234a;
    --human: #f2915f; --human-fill: #3f2618;
    --tool: #3cc48f;  --tool-fill: #123a2b;
    --risk: #ef6f6f;  --risk-fill: #421d1d;
    --neutral: #8a94a3; --neutral-fill: #20262e;
    --panel: rgba(255, 255, 255, .04);
  }
}
:root[data-theme="dark"] .primer, :root[data-theme="dark"] .pm-key {
  --data: #5b9bea;  --data-fill: #17283e;
  --model: #9c92ec; --model-fill: #26234a;
  --human: #f2915f; --human-fill: #3f2618;
  --tool: #3cc48f;  --tool-fill: #123a2b;
  --risk: #ef6f6f;  --risk-fill: #421d1d;
  --neutral: #8a94a3; --neutral-fill: #20262e;
  --panel: rgba(255, 255, 255, .04);
}

/* ---------- Module navigation (hero) ---------- */
.pm-modules { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 26px; font-size: 13.5px; color: var(--muted); }
.pm-modules a { padding-bottom: 2px; transition: color .2s; }
.pm-modules a:hover { color: var(--ink); }
.pm-modules a[aria-current="page"] { color: var(--ink); box-shadow: 0 1px 0 var(--gold-fill); }
.pm-toolbar { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; margin-top: 26px; font-size: 13.5px; color: var(--muted); }
.pm-switch { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; color: var(--text); }
.pm-switch input { appearance: none; width: 34px; height: 18px; border: 1px solid var(--line); background: transparent; position: relative; margin: 0; cursor: pointer; transition: border-color .2s; }
.pm-switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 10px; height: 10px; background: var(--line); transition: transform .15s, background .15s; }
.pm-switch input:checked { border-color: var(--gold); }
.pm-switch input:checked::after { background: var(--gold-fill); transform: translateX(16px); }
.pm-btn { font: 500 13px/1 var(--f-sans); color: var(--ink); background: transparent; border: 1px solid var(--line-soft); padding: 9px 14px; cursor: pointer; transition: border-color .2s; }
.pm-btn:hover { border-color: var(--line); }
.pm-key { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.pm-key .sw { display: inline-flex; align-items: center; gap: 6px; }
.pm-key .sw i { width: 11px; height: 11px; border-width: 1.5px; border-style: solid; display: inline-block; }
.sw-data i { border-color: var(--data); background: var(--data-fill); }
.sw-model i { border-color: var(--model); background: var(--model-fill); }
.sw-human i { border-color: var(--human); background: var(--human-fill); }
.sw-tool i { border-color: var(--tool); background: var(--tool-fill); }
.sw-risk i { border-color: var(--risk); background: var(--risk-fill); }

/* ---------- Contents bar and drawer ---------- */
.primer .layout { display: block; }
.primer .tocbar {
  position: sticky; top: 68px; z-index: 10; display: flex; align-items: center; gap: 14px;
  margin: calc(28px - var(--section)) calc(-1 * var(--pad)) 0; padding: 10px var(--pad);
  background: color-mix(in srgb, var(--bg) 92%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
}
.primer .tocbtn { flex: none; display: inline-flex; align-items: center; gap: 9px; font: 500 13px/1 var(--f-sans); color: var(--ink); background: transparent; border: 1px solid var(--line-soft); padding: 9px 14px; cursor: pointer; transition: border-color .2s; }
.primer .tocbtn:hover { border-color: var(--line); }
.primer .tocbtn svg { width: 15px; height: 15px; display: block; }
.primer .tocnow { min-width: 0; flex: 1; display: flex; gap: 10px; align-items: baseline; font-size: 13.5px; color: var(--muted); cursor: pointer; white-space: nowrap; overflow: hidden; }
.primer .tocnow span:last-child { overflow: hidden; text-overflow: ellipsis; }
.primer .tocnow .n { font: 400 11px/1 var(--f-mono); letter-spacing: .12em; color: var(--gold); }
.pm-overlay .toc {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 40; width: min(320px, 86vw);
  background: var(--bg); border-right: 1px solid var(--line-soft);
  padding: 18px 14px 24px; font-size: 14px; display: flex; flex-direction: column; gap: 0;
  overflow: auto; overscroll-behavior: contain;
  transform: translateX(-105%); visibility: hidden; transition: transform .22s ease, visibility 0s linear .22s;
}
.pm-overlay .toc.open { transform: none; visibility: visible; transition: transform .22s ease; }
.pm-overlay .tochead { display: flex; justify-content: space-between; align-items: center; padding: 0 2px 12px 10px; margin-bottom: 6px; border-bottom: 1px solid var(--line-soft); }
.pm-overlay .tocclose { font: 400 22px/1 var(--f-sans); background: none; border: 0; color: var(--muted); cursor: pointer; padding: 2px 8px; }
.pm-overlay .tocclose:hover { color: var(--ink); }
.pm-overlay .toc a { display: flex; gap: 12px; align-items: baseline; color: var(--muted); padding: 9px 10px; border-bottom: 1px solid var(--line-soft); transition: color .2s; }
.pm-overlay .toc a .n { font: 400 11px/1 var(--f-mono); letter-spacing: .12em; color: var(--muted); min-width: 20px; }
.pm-overlay .toc a:hover { color: var(--ink); }
.pm-overlay .toc a.on { color: var(--ink); }
.pm-overlay .toc a.on .n { color: var(--gold); }
.pm-overlay .toc .grp { margin-top: 14px; border-top: 1px solid var(--line-soft); }
.pm-overlay .scrim { position: fixed; inset: 0; z-index: 35; background: rgba(8, 18, 33, .4); opacity: 0; visibility: hidden; transition: opacity .22s, visibility 0s linear .22s; }
.pm-overlay .scrim.open { opacity: 1; visibility: visible; transition: opacity .22s; }
@media (prefers-reduced-motion: reduce) { .pm-overlay .toc, .pm-overlay .toc.open, .pm-overlay .scrim, .pm-overlay .scrim.open { transition: none; } }

/* ---------- Lessons ---------- */
.primer .pm-main { display: grid; gap: clamp(56px, 7vw, 88px); min-width: 0; max-width: 940px; padding-top: clamp(36px, 5vw, 56px); }
.primer .lesson { display: grid; gap: 20px; scroll-margin-top: 136px; min-width: 0; }
.primer .lesson-head { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; }
.primer .lesson-head .num { font: 400 11px/1 var(--f-mono); letter-spacing: .12em; color: var(--gold); border: 1px solid var(--line-soft); padding: 7px 8px; margin-top: 5px; }
.primer .lesson h2 { font-size: clamp(21px, 2.4vw, 26px); line-height: 1.2; letter-spacing: -.025em; font-weight: 400; max-width: 30ch; }
.primer .thesis { font-size: clamp(16px, 1.5vw, 18px); line-height: 1.55; color: var(--text); max-width: 60ch; border-left: 1px solid var(--gold); padding-left: 18px; }

.primer .frame { margin: 0; }
.primer figure.diagram { padding: 22px 22px 16px; min-width: 0; display: grid; gap: 0; }
.primer figure.diagram .dwrap { overflow-x: auto; min-width: 0; }
.primer figure.diagram svg { display: block; width: 100%; height: auto; min-width: 520px; max-width: 100%; font-family: var(--f-sans); }
.primer figcaption { font-size: 14px; line-height: 1.55; color: var(--muted); margin-top: 14px; max-width: 70ch; }

.primer .notes { display: none; border: 1px dashed var(--gold); padding: 14px 18px; font-size: 14.5px; line-height: 1.6; color: var(--text); max-width: 72ch; }
.primer .notes .label { display: block; margin-bottom: 6px; color: var(--gold); }
.primer[data-notes="on"] .notes { display: block; }

.primer .disc-row { display: grid; gap: 10px; }
.primer details.disc { border: 1px solid var(--line-soft); }
.primer details.disc summary { cursor: pointer; padding: 13px 18px; font-size: 15px; font-weight: 500; color: var(--ink); letter-spacing: -.01em; list-style: none; display: flex; align-items: center; gap: 12px; }
.primer details.disc summary::-webkit-details-marker { display: none; }
.primer details.disc summary::before { content: ""; width: 7px; height: 7px; border-right: 1px solid var(--muted); border-bottom: 1px solid var(--muted); transform: rotate(-45deg); transition: transform .15s; flex: none; }
.primer details.disc[open] summary::before { transform: rotate(45deg); }
.primer details.disc .body { padding: 2px 18px 18px 37px; font-size: 14.5px; line-height: 1.65; color: var(--muted); display: grid; gap: 10px; }
.primer details.disc .body > * { max-width: 76ch; }
.primer details.disc ul, .primer details.disc ol { padding-left: 18px; display: grid; gap: 6px; }
.primer details.disc ul { list-style: disc; }
.primer details.disc ol { list-style: decimal; }
.primer details.disc strong { color: var(--text); font-weight: 500; }
.primer details.why summary::after, .primer details.deeper summary::after, .primer details.basics summary::after { margin-left: auto; font: 400 11px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; }
.primer details.why summary::after { content: "Director view"; color: var(--gold); }
.primer details.deeper summary::after { content: "Mechanics"; color: var(--model); }
.primer details.basics summary::after { content: "From zero"; color: var(--tool); }

.primer table { border-collapse: collapse; width: 100%; font-size: 14px; }
.primer th, .primer td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line-soft); vertical-align: top; color: var(--muted); }
.primer th { font: 400 11px/1.2 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding-bottom: 8px; }
.primer td:first-child { color: var(--text); }
.primer .tblwrap { overflow-x: auto; min-width: 0; }
.primer code { font: 400 .9em var(--f-mono); color: var(--text); }
.primer .body a, .primer .reads a, .primer td a { color: var(--ink); border-bottom: 1px solid var(--line); transition: border-color .2s; }
.primer .body a:hover, .primer .reads a:hover, .primer td a:hover { border-color: var(--gold-fill); }

/* ---------- Glossary, questions, reading list ---------- */
.primer .endsec { display: grid; gap: 22px; scroll-margin-top: 136px; min-width: 0; }
.primer .endsec h2 { font-size: clamp(22px, 2.6vw, 28px); letter-spacing: -.03em; }
.primer .gloss { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0 28px; }
.primer .gloss div { padding: 12px 0 14px; border-top: 1px solid var(--line-soft); font-size: 14px; line-height: 1.55; color: var(--muted); }
.primer .gloss b { display: block; color: var(--ink); font-weight: 500; letter-spacing: -.01em; margin-bottom: 2px; }
.primer .qs { display: grid; counter-reset: q; max-width: 72ch; }
.primer .qs li { position: relative; padding: 12px 0 12px 42px; border-top: 1px solid var(--line-soft); font-size: 15px; line-height: 1.55; color: var(--text); }
.primer .qs li:last-child { border-bottom: 1px solid var(--line-soft); }
.primer .qs li::before { counter-increment: q; content: counter(q, decimal-leading-zero); position: absolute; left: 0; top: 15px; font: 400 11px/1 var(--f-mono); letter-spacing: .12em; color: var(--gold); }
.primer .reads { display: grid; gap: 12px; max-width: 76ch; }
.primer .reads li { font-size: 14.5px; line-height: 1.6; color: var(--muted); padding-left: 16px; border-left: 1px solid var(--line-soft); }
.primer .reads b { color: var(--text); font-weight: 500; }

.pm-pager { display: flex; justify-content: space-between; gap: 18px 32px; flex-wrap: wrap; margin-top: clamp(48px, 6vw, 72px); padding-top: 22px; border-top: 1px solid var(--line-soft); }
.pm-pager .back::after { content: none; }
.pm-pager .back::before { content: "\2190  "; color: var(--gold); }

/* ---------- Diagram element classes (inline SVG picks up the tokens above) ---------- */
.dg text { letter-spacing: -.01em; }
.dg .tx { fill: var(--text); }
.dg .tx-muted { fill: var(--muted); }
.dg .tx-on { fill: #fff; }
.dg .tx-data { fill: var(--data); } .dg .tx-model { fill: var(--model); } .dg .tx-human { fill: var(--human); }
.dg .tx-tool { fill: var(--tool); } .dg .tx-risk { fill: var(--risk); } .dg .tx-neutral { fill: var(--muted); }
.dg .caps { font-family: var(--f-mono); letter-spacing: .08em; text-transform: uppercase; }
.dg .halo { paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }
.dg .bx { stroke-width: 1.2; }
.dg .bx-data { fill: var(--data-fill); stroke: var(--data); } .dg .bx-model { fill: var(--model-fill); stroke: var(--model); }
.dg .bx-human { fill: var(--human-fill); stroke: var(--human); } .dg .bx-tool { fill: var(--tool-fill); stroke: var(--tool); }
.dg .bx-risk { fill: var(--risk-fill); stroke: var(--risk); } .dg .bx-neutral { fill: var(--neutral-fill); stroke: var(--neutral); }
.dg .dashed { stroke-dasharray: 5 4; }
.dg .fr { fill: none; stroke-width: 1; stroke-dasharray: 4 4; }
.dg .fr-data { stroke: var(--data); } .dg .fr-model { stroke: var(--model); } .dg .fr-human { stroke: var(--human); }
.dg .fr-tool { stroke: var(--tool); } .dg .fr-risk { stroke: var(--risk); } .dg .fr-neutral { stroke: var(--line); }
.dg .st { stroke: none; } .dg .st-data { fill: var(--data); } .dg .st-model { fill: var(--model); } .dg .st-human { fill: var(--human); }
.dg .st-tool { fill: var(--tool); } .dg .st-risk { fill: var(--risk); } .dg .st-neutral { fill: var(--neutral); }
.dg .dt { stroke: var(--surface); stroke-width: 2; } .dg .dt-data { fill: var(--data); } .dg .dt-model { fill: var(--model); }
.dg .dt-human { fill: var(--human); } .dg .dt-tool { fill: var(--tool); } .dg .dt-risk { fill: var(--risk); } .dg .dt-neutral { fill: var(--neutral); }
.dg .ln { fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.dg .ln-neutral { stroke: var(--muted); } .dg .ln-data { stroke: var(--data); } .dg .ln-model { stroke: var(--model); }
.dg .ln-human { stroke: var(--human); } .dg .ln-tool { stroke: var(--tool); } .dg .ln-risk { stroke: var(--risk); } .dg .ln-faint { stroke: var(--line-soft); }
.dg .fl { stroke: none; } .dg .fl.ln-data { fill: var(--data-fill); } .dg .fl.ln-model { fill: var(--model-fill); }
.dg .fl.ln-neutral { fill: var(--neutral-fill); } .dg .fl.ln-risk { fill: var(--risk-fill); } .dg .fl.ln-tool { fill: var(--tool-fill); } .dg .fl.ln-human { fill: var(--human-fill); }
.dg .ah { stroke: none; } .dg .ah-neutral { fill: var(--muted); } .dg .ah-data { fill: var(--data); } .dg .ah-model { fill: var(--model); }
.dg .ah-human { fill: var(--human); } .dg .ah-tool { fill: var(--tool); } .dg .ah-risk { fill: var(--risk); }
.dg .bar { fill: var(--data); } .dg .bar-neutral { fill: var(--neutral); } .dg .bar-risk { fill: var(--risk); } .dg .grid { stroke: var(--line-soft); }

/* ---------- Primer index ---------- */
.tiles.pm-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pm-tiles .tile { min-height: 0; }
.pm-tiles .tile h3 { font-size: 20px; }
.pm-tiles .tile p { max-width: 46ch; }

@media (max-width: 760px) {
  .tiles.pm-tiles { grid-template-columns: 1fr; }
  .primer .lesson h2 { max-width: none; }
  .primer details.disc .body { padding-left: 18px; }
  .primer .gloss { grid-template-columns: 1fr; }
}