/* teaching.css - the shared teaching-page kit for /resources pages.
   Added 2026-08-27. Governed by resources/_audit/page-style-guide.md;
   every value below is lifted verbatim from the ruled reference
   implementation, resources/how-to-prompt/index.html, except .quad
   (from ai-fluency) and .dbanner / .csub (from claude-101), which the
   reference does not carry. Nothing here is invented.

   WHY THIS FILE EXISTS. Before it, every teaching page carried its own
   139 to 250 line copy of this same CSS: 21 pages held an identical
   copy of the recipe tokens and 9 redefined .askbox from scratch. They
   matched because they were copied carefully, not because anything
   enforced it. This file enforces it.

   LOAD ORDER, always these three, in this order:
     /workshop/shared/app.css   tokens, reset, topbar
     /resources/hub.css         layout components
     /resources/teaching.css    this file
   then a page-local <style> for genuinely page-specific bits only.

   ADDITIVE AND SAFE. No existing page links this file. Pages built
   before it keep their own local CSS and are untouched. A page that
   links this one may still override anything in its own <style>,
   because page-local rules load last.

   NEVER EDIT to style one page. Page-specific CSS goes in that page's
   own <style> block. Same rule as app.css and hub.css.

   No em dashes anywhere in this file, including comments. */

/* ============================================================
   RECIPE TOKENS
   Existing border tokens deepened or mixed toward paper. No new
   hues. The blue-box pair and the modular type scale (ratio ~1.25)
   live here rather than being retyped into every page :root.
   ============================================================ */
:root{
  --line-edge:#d3cfc0;--gold-edge:#d8b6a8;--blue-edge:#b7cfe4;
  --wash-warm:#f9f3ef;--wash-cool:#f4f7f8;
  --blue-tint:#eef4fa;--blue-line:#d3e3f2;
  --hair:rgba(30,48,80,.2);
  --fs-kick:.72rem;
  --fs-body:1rem;
  --fs-lead:1.05rem;
  --fs-h2:clamp(1.35rem,1.15rem + 1vw,1.6rem);
  --fs-quote:clamp(1.22rem,1rem + 1.2vw,1.55rem);
  --fs-word:clamp(1.9rem,1.4rem + 2.4vw,2.9rem);
  --gap-chapter:clamp(52px,7vw,80px);
}

/* anchored sections should not hide under the sticky topbar */
[id]{scroll-margin-top:76px}

/* ============================================================
   THE TYPE LAYER  (guide section 3)
   Numbered mono kickers with tabular numerals, balanced heads,
   pretty ledes, and the semantic rhythm: the chapter gap above a
   head is larger than the head-to-content gap below it.
   ============================================================ */
.sec{margin:var(--gap-chapter) 0 0}
.step-tag{display:block;font-family:var(--mono);font-size:var(--fs-kick);letter-spacing:.1em;text-transform:uppercase;color:var(--gold);font-weight:600;font-variant-numeric:tabular-nums;margin:0 0 8px}
.h1{text-wrap:balance}
.sec-h{font-size:var(--fs-h2);letter-spacing:-.02em;line-height:1.15;margin:0 0 10px;text-wrap:balance}
.sec-sub{margin:0 0 16px;text-wrap:pretty}
.lede,.body p{text-wrap:pretty}

/* the terracotta tick-rule. SPARINGLY: it marks the one or two heads
   that carry the page, and counts as that viewport's terracotta focal. */
.tickrule{width:44px;height:3px;border-radius:2px;background:var(--gold);margin:2px 0 12px}

/* the pull quote. ONE PER PAGE MAXIMUM (guide section 3). */
.pull{margin:22px 0 0;padding:18px 0 18px 46px;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);position:relative;max-width:640px}
.pull:before{content:"\201C";position:absolute;left:0;top:8px;font-family:var(--display);font-weight:800;font-size:3.4rem;line-height:1;color:var(--gold)}
.pull blockquote{margin:0;font-family:var(--display);font-weight:700;font-size:var(--fs-quote);line-height:1.3;letter-spacing:-.02em;color:var(--ink);max-width:28ch;text-wrap:balance}

/* ============================================================
   DRAWN GLYPHS  (guide section 5t)
   The frame only. The SVG snippets come from resources/_audit/glyphs.html,
   copied verbatim, never redrawn. One or two per page, on the sections
   that carry it, aria-hidden on the wrapper.
   ============================================================ */
.g-head{display:flex;align-items:center;gap:14px}
.gh-glyph{flex:none;height:32px;display:inline-flex}
.gh-glyph svg{height:100%;width:auto;display:block}

/* ============================================================
   MATERIAL: WASH PLATES  (guide section 5r)
   A tinted plate marks a change of content KIND and only that.
   Warm for the thesis, cool for the onward path. Max ONE wash
   transition per viewport; everything between rests on cream.
   ============================================================ */
.plate{border:1px solid var(--line);border-radius:14px;padding:24px 20px 26px}
.plate.warm{background:var(--wash-warm)}
.plate.cool{background:var(--wash-cool)}
@media(min-width:700px){.plate{padding:28px 28px 30px}}

/* ============================================================
   MATERIAL: THE RAISED SHEET  (guide section 5q)
   ONE per screen, reserved for THE teaching object of that screen.
   Tint ground, 1px tint border, 3px bottom edge in the deepened
   shade, flat 6px offset backing in the border token. Never black,
   never blurred, never on pills, buttons or small chrome. These are
   the only at-rest shadows anywhere on a page.
   ============================================================ */
.askbox.sheet{border-bottom:3px solid var(--gold-edge);box-shadow:6px 6px 0 0 var(--gold-line);max-width:640px}
.askbox.sheet .askbox-lead{font-size:var(--fs-lead);line-height:1.7;margin:0}
.sheet-blue{background:var(--blue-tint);border:1px solid var(--blue-line);border-bottom:3px solid var(--blue-edge);border-radius:14px;box-shadow:6px 6px 0 0 var(--blue-line);padding:18px 19px}

/* ============================================================
   MATERIAL: BLUE-LEFT ROWS  (guide section 5s)
   THE DEFAULT treatment for lists and long text: white card,
   hairline border, 2px deeper bottom edge, 3px blue left border.
   ============================================================ */
.task{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:12px}
.task li{display:flex;gap:14px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-bottom:2px solid var(--line-edge);border-left:3px solid var(--blue);border-radius:0 14px 14px 0;padding:14px 17px}
.task .tnum{flex:none;width:28px;height:28px;border-radius:50%;background:var(--blue);color:#fff;font-family:var(--display);font-weight:700;font-size:.95rem;font-variant-numeric:tabular-nums;display:flex;align-items:center;justify-content:center;margin-top:1px}
.task p{margin:0;font-size:.98rem;line-height:1.5;color:var(--ink);text-wrap:pretty}
/* the summit row: a blue raised sheet inside the list, for the one
   step that is the teaching summit. One per screen, same budget. */
.task li.top{background:var(--blue-tint);border:1px solid var(--blue-line);border-bottom:3px solid var(--blue-edge);border-left:3px solid var(--blue);border-radius:14px;box-shadow:6px 6px 0 0 var(--blue-line);padding:18px 19px;margin-top:6px}
.task li.top p{font-size:1.02rem}
.task-foot{font-size:1rem;line-height:1.5;color:var(--ink);margin:16px 0 0;padding:13px 16px;background:var(--blue-tint);border:1px solid var(--blue-line);border-radius:14px;max-width:62ch}
.task-foot b{color:var(--blue)}

/* ============================================================
   THE CONCEPT SECTION  (guide section 5a)
   THE hero pattern, one per concept. Order is ALWAYS
   word -> verb -> picture -> box. No "first/second" kicker: the
   overview map already enumerates them, the word stands alone.
   ============================================================ */
.dword{color:var(--blue);font-size:var(--fs-word);letter-spacing:-.02em;line-height:1.02;margin:2px 0 3px}
.dverb{font-family:var(--display);font-weight:700;font-size:1.12rem;color:var(--ink-mid);margin:0 0 4px}
.dbanner{width:100%;aspect-ratio:16/9;border-radius:14px;overflow:hidden;margin:12px 0 16px;background:var(--panel)}
.dbanner img{width:100%;height:100%;object-fit:cover;display:block}

/* ============================================================
   THE ASKBOX, THE TEACHING BOX  (guide section 5b, 5c)
   Content rule: lead = what it is, one sentence per line via <br />.
   Bullets = the questions to ask, question-led wherever possible.
   Foot = the one-line takeaway, and the foot is OPTIONAL.
   No links to advanced tools inside a basic page's teaching box.
   .blue = a distinct category sitting apart from the main concepts.
   ============================================================ */
.askbox{background:var(--gold-tint);border:1px solid var(--gold-line);border-radius:14px;padding:18px 20px;margin:14px 0 0}
.askbox .askbox-lead{font-size:1rem;line-height:1.5;color:var(--ink);margin:0 0 13px;font-weight:500;text-wrap:pretty}
.askbox ul{margin:0;padding:0;list-style:none}
.askbox li{font-family:var(--display);font-weight:700;font-size:1.06rem;line-height:1.4;color:var(--ink);padding-left:22px;position:relative;margin-bottom:10px}
.askbox li:last-child{margin-bottom:0}
.askbox li:before{content:"";position:absolute;left:0;top:8px;width:8px;height:8px;border-radius:2px;background:var(--gold)}
.askbox .askbox-foot{font-size:.95rem;line-height:1.5;color:var(--ink-mid);margin:13px 0 0;border-top:1px solid var(--gold-line);padding-top:12px;text-wrap:pretty}
.askbox .askbox-foot b{color:var(--ink)}
.askbox.blue{background:var(--blue-tint);border-color:var(--blue-line)}
.askbox.blue li:before{background:var(--blue)}
.askbox.blue .askbox-foot{border-top-color:var(--blue-line)}

/* ============================================================
   THE OVERVIEW MAP  (guide section 5e)
   A map of the core concepts at the top, above the hero. Default is
   the 2-up grid (four concepts, AI Fluency). Add .q3 for a 3-across
   grid when there are six (Claude 101). Emoji are ALLOWED here, as
   HTML entities, and are banned only in the generated media.
   Not every page needs one: a simpler idea opens on a plain overview
   card grid plus a key card instead.
   ============================================================ */
.quad{margin:16px 0 22px}
.quad .qlabel{display:block;font-family:var(--display);font-weight:700;font-size:clamp(1.05rem,.98rem + .4vw,1.22rem);color:var(--ink);margin:0 0 12px;text-wrap:balance}
.quad-grid{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:640px){.quad-grid{grid-template-columns:1fr 1fr}}
@media(min-width:720px){.quad-grid.q3{grid-template-columns:repeat(3,1fr)}}
.quad-cell{position:relative;background:var(--card);border:1px solid var(--line);border-top:3px solid var(--gold);border-bottom:2px solid var(--line-edge);border-radius:14px;padding:16px 18px;font-family:var(--display);font-weight:800;font-size:1.18rem;letter-spacing:-.01em;color:var(--blue)}
.quad-cell .qe{margin-right:9px}
.quad-cell .qd{display:block;font-family:var(--body);font-weight:600;font-size:.95rem;color:var(--gold);margin-top:4px}
/* optional tabular index numeral in the corner, the walkable order */
.quad-cell .qn{position:absolute;top:12px;right:14px;font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;color:var(--ink-soft);font-weight:600;font-variant-numeric:tabular-nums}

/* ============================================================
   OVERVIEW CARD GRID  (guide section 5f)
   White card, terracotta top-border, resting 2px bottom edge.
   Match the grid to the count: 3 concepts on a g4 leaves a hole.
   Add class "reveal" and load /resources/reveal.js for the
   staggered fade-up (progressive enhancement, respects
   prefers-reduced-motion).
   ============================================================ */
.dgrid{display:grid;grid-template-columns:1fr;gap:12px;margin:6px 0 0}
@media(min-width:560px){.dgrid.g2{grid-template-columns:1fr 1fr}}
@media(min-width:560px){.dgrid.g3{grid-template-columns:repeat(3,1fr)}}
@media(min-width:820px){.dgrid.g4{grid-template-columns:repeat(4,1fr)}}
.dcard{background:var(--card);border:1px solid var(--line);border-top:3px solid var(--gold);border-bottom:2px solid var(--line-edge);border-radius:14px;padding:14px 16px}
.dcard h3{font-family:var(--display);font-weight:800;font-size:1.02rem;color:var(--ink);margin:0 0 6px;font-variant-numeric:tabular-nums}
.dcard .def{font-size:.86rem;line-height:1.4;color:var(--ink-mid);margin:0 0 9px}
/* optional two-word mono label under the h3 ("the what", "the how") */
.dcard .csub{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);font-weight:700;margin:0 0 8px}
.dcard ul{margin:0;padding:0;list-style:none}
.dcard li{font-size:.9rem;line-height:1.4;padding-left:15px;position:relative;margin-bottom:5px;color:var(--ink)}
.dcard li:last-child{margin-bottom:0}
.dcard li:before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:2px;background:var(--gold)}
.dcard b{color:var(--ink)}
/* a second group label between two grids, for a two-tier overview */
.sec .dgrid + .step-tag{margin-top:22px}

/* ============================================================
   HERO AND MEDIA SLOTS  (guide section 5d)
   Hero videos are CLICK-TO-PAUSE, and that is standard: these pages
   are live-teaching aids and Sean needs to freeze a video mid-
   explanation. Wrap in <figure class="hero-fig"> and load
   /resources/video-pause.js (deferred). The .vtoggle overlay is
   shared in hub.css.
   .slot is the dashed placeholder used ONLY while a page is being
   built. Before ship it becomes an HTML comment, never a visible box.
   ============================================================ */
.hero-fig{margin:0 0 22px;position:relative}
.hero-fig img,.hero-fig video{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--line)}
.hero-fig video{cursor:pointer}
.slot{aspect-ratio:16/9;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:7px;background:var(--gold-tint);border:1.5px dashed var(--gold-line);color:var(--gold);font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;line-height:1.5;padding:18px;margin:12px 0 18px}
.slot b{font-family:var(--display);font-weight:800;font-size:1.02rem;letter-spacing:-.01em;color:var(--gold)}
.slot small{color:var(--ink-soft);font-family:var(--body);font-size:.82rem;letter-spacing:0;max-width:48ch}

/* ============================================================
   THE ONE-LINE CREDIT, FRAMELINE AND HUMAN LINE
   (guide sections 5h, 5j)
   Credit: one line, up top. Never a long licence footer.
   Frameline: one quiet sentence orienting the page in the library.
   Human line: an optional value statement in Sean's own voice.
   ============================================================ */
.credit-line{font-size:.88rem;line-height:1.5;color:var(--ink-soft);margin:0 0 18px;max-width:none}
.credit-line a{color:var(--ink-mid);font-weight:600;text-decoration:none;border-bottom:1px solid var(--line)}
.credit-line a:hover{color:var(--gold)}
.frameline{font-size:.96rem;line-height:1.55;color:var(--ink-mid);margin:0 0 26px;max-width:64ch;text-wrap:pretty}
.frameline a{color:var(--gold);font-weight:600}
.human-line{font-size:.95rem;line-height:1.5;color:var(--ink);margin:0 0 16px;padding:13px 16px;background:var(--gold-tint);border:1px solid var(--gold-line);border-radius:14px;max-width:60ch}

/* ============================================================
   THE END CALLOUTS  (guide section 5g)
   callout.gold "What you learned" = recap bullets then one handoff
   line. callout.blue "Where next" = forward links, .pagenav row.
   The .callout base lives in hub.css; this is the recap list plus
   the 14px radius harmonisation.
   ============================================================ */
.callout{border-radius:14px}
.callout .learned{margin:8px 0 12px;padding:0;list-style:none}
.callout .learned li{font-size:.98rem;line-height:1.5;padding-left:18px;position:relative;margin-bottom:6px;color:var(--ink)}
.callout .learned li:last-child{margin-bottom:0}
.callout .learned li:before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:2px;background:var(--gold)}
.callout .learned b{color:var(--ink)}

/* ============================================================
   THE SELF-DIAGNOSIS ACCORDION  (guide section 5l)
   For troubleshooting or optional depth that would otherwise be a
   wall of cards. Summary = the symptom name only. Body = one cause
   line plus one or two punchy bullets. Keep every entry the same shape.
   ============================================================ */
.chlist{display:grid;gap:10px;margin:6px 0 0}
.ch{background:var(--card);border:1px solid var(--line);border-bottom:2px solid var(--line-edge);border-left:3px solid var(--blue);border-radius:0 14px 14px 0;overflow:hidden}
.ch summary{cursor:pointer;list-style:none;padding:13px 16px;font-family:var(--display);font-weight:800;font-size:1rem;color:var(--ink);display:flex;align-items:center;justify-content:space-between;gap:10px}
.ch summary::-webkit-details-marker{display:none}
.ch summary:after{content:"+";font-family:var(--body);font-weight:600;color:var(--gold);font-size:1.25rem;line-height:1;transition:transform .2s var(--ease)}
.ch[open] summary:after{transform:rotate(45deg)}
.ch[open] summary{border-bottom:1px solid var(--line)}
.ch-body{padding:12px 16px 15px}
.ch-body .cause{font-size:.9rem;line-height:1.45;color:var(--ink-mid);margin:0 0 10px}
.ch-body ul{margin:0;padding:0;list-style:none}
.ch-body li{font-size:.92rem;line-height:1.45;color:var(--ink);padding-left:16px;position:relative;margin-bottom:6px}
.ch-body li:last-child{margin-bottom:0}
.ch-body li:before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:2px;background:var(--gold)}
.ch-body b{color:var(--gold)}

/* ============================================================
   THE ANNOTATED EXAMPLE  (guide section 5k)
   For showing a framework applied to one real artifact. Take the
   VERBATIM source text, split it at its own natural boundaries, and
   label each part inline. Do NOT paraphrase it into a second
   breakdown block underneath: that is the same structure twice, and
   it was the biggest cut on How to Prompt.
   Resting material, deliberately NOT another raised sheet.
   ============================================================ */
.eg-parts{list-style:none;margin:6px 0 0;padding:0;background:var(--gold-tint);border:1px solid var(--gold-line);border-bottom:2px solid var(--gold-edge);border-radius:14px}
.eg-part{display:grid;grid-template-columns:26px minmax(84px,90px) 1fr;gap:13px;align-items:start;padding:15px 18px;font-size:.98rem;line-height:1.55;color:var(--ink)}
.eg-part + .eg-part{border-top:1px dashed var(--gold-line)}
.eg-num{width:26px;height:26px;border-radius:50%;background:var(--blue);color:#fff;font-family:var(--display);font-weight:700;font-size:.88rem;font-variant-numeric:tabular-nums;display:flex;align-items:center;justify-content:center;margin-top:1px}
.eg-step{font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--gold);line-height:1.4;margin-top:6px}
.eg-seg{margin:0}

/* ============================================================
   LINK PHYSICS  (guide section 6, interaction only)
   Growing underline on text links. A 3px arrow nudge on forward
   links: the .ar span moves, the label does not. Terracotta focus
   ring, with the 3px focus corner scoped away from pills so
   keyboard focus never snaps a pill to sharp corners.
   NOTHING MOVES AT IDLE.
   ============================================================ */
.body a,.sec-sub a,.callout p a,.askbox-foot a,.frameline a,.task a,.task-foot a{text-decoration:none;background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-size:0 1px;background-position:0 100%;padding-bottom:1px;transition:background-size .22s var(--ease)}
.body a,.sec-sub a{color:var(--gold);font-weight:600}
.askbox-foot a{color:var(--gold);font-weight:700}
.task a,.task-foot a{color:var(--blue);font-weight:700}
.body a:hover,.sec-sub a:hover,.callout p a:hover,.askbox-foot a:hover,.frameline a:hover,.task a:hover,.task-foot a:hover,
.body a:focus-visible,.sec-sub a:focus-visible,.callout p a:focus-visible,.askbox-foot a:focus-visible,.frameline a:focus-visible,.task a:focus-visible,.task-foot a:focus-visible{background-size:100% 1px}
.ar{display:inline-block;transition:transform .18s var(--ease)}
a:hover .ar,a:focus-visible .ar{transform:translateX(3px)}
a:focus-visible,summary:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
a:not(.btn):not(.btn-ghost):not(.fwd):focus-visible,summary:focus-visible{border-radius:3px}

/* ============================================================
   MOTION  (guide section 6, entry only, guarded)
   400ms max, inside prefers-reduced-motion and @supports guards,
   with THE FINISHED STATE AS THE DEFAULT: no-JS, unsupported and
   reduced-motion readers see the complete page.
   .settle-load = a 340ms settle on load, for the head and the map.
   .rise = a view-timeline rise, for the one raised sheet.
   ============================================================ */
.dgrid.reveal.reveal-ready .dcard{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.dgrid.reveal.reveal-ready.in .dcard{opacity:1;transform:none}
.dgrid.reveal.reveal-ready.in .dcard:nth-child(2){transition-delay:.09s}
.dgrid.reveal.reveal-ready.in .dcard:nth-child(3){transition-delay:.18s}
.dgrid.reveal.reveal-ready.in .dcard:nth-child(4){transition-delay:.27s}
@media (prefers-reduced-motion: reduce){.dgrid.reveal.reveal-ready .dcard{opacity:1;transform:none;transition:none}}

@keyframes pagerise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: no-preference){
  .settle-load{animation:pagerise .34s var(--ease) .05s both}
  @supports (animation-timeline: view()){
    .rise{animation-name:pagerise;animation-fill-mode:both;animation-timing-function:var(--ease);animation-timeline:view();animation-range:entry 6% entry 38%}
  }
}