/* Teaching pages: session packs (/packs/), director's notes (/notes/) and resources (/resources/), drawn by teach.js from /api/teach.
   The studio frames them (the front page's warm near-black stage, brass trim, Limelight titles, Duncan in the header), but the teaching material
   itself sits on calm ivory "script pages" in dark ink, Jost at a comfortable reading size, so it's easy to read during a session and to print.
   Printing drops the studio entirely: black on white, no buttons or filters. */
:root{
  --bg:#130b0a; --board:#0c0908; --red:#990000; --red-bright:#b3101c; --red-deep:#5c0a0d;
  --ivory:#f6ecd8; --muted:#bfb1a0; --brass:#c9a35a; --brass-light:#e8cd8f; --brass-ink:#7a5a1e;
  --paper:#fbf6ea; --paper-2:#f3ead6; --ink:#24130f; --ink-2:#5b4a3f; --rule:#e2d4b5;
  --display:"Jost","Futura","Century Gothic","Helvetica Neue",Arial,sans-serif; --serif:"Limelight","Didot",Georgia,serif;
  --r:10px; color-scheme:dark;
  /* each game's own color, used as a strip on its cards so hosts recognize it */
  --g-quiz:#ffb020; --g-jeopardy:#2f3cff; --g-sketch:#1f7f74; --g-bluff:#d9483b; --g-clue:#1b5a3a; --g-chain:#1f8a86;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{min-height:100%}
body{margin:0;color:var(--ivory);font-family:var(--display);font-weight:500;line-height:1.55;background:var(--bg);
  background-image:radial-gradient(ellipse 85% 420px at 50% 40px,rgba(153,0,0,.38),transparent 72%),radial-gradient(ellipse 45% 240px at 50% 0,rgba(255,214,150,.08),transparent 70%)}
.wrap{max-width:1080px;margin:0 auto;padding-block:14px 56px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
a{color:var(--brass-light)}
button,select{font:inherit}
.sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--brass-light);outline-offset:3px}

/* header: Duncan's round face and the site name, then the four routes */
.masthead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 18px;padding:6px 0 14px;border-bottom:1px solid rgba(201,163,90,.3)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ivory)}
.brand img{height:50px;width:50px;border-radius:50%;box-shadow:0 0 0 2.5px var(--brass),0 6px 14px rgba(0,0,0,.5)}
.brand b{font-family:var(--serif);font-weight:400;font-size:1.5rem;line-height:1;letter-spacing:.02em}
.brand b span{color:var(--brass-light)}
.routes{display:flex;flex-wrap:wrap;gap:4px}
.routes a{display:inline-flex;align-items:center;min-height:40px;padding:0 12px;border-radius:8px;color:var(--brass-light);text-decoration:none;font-weight:800;font-size:.84rem;letter-spacing:.1em;text-transform:uppercase}
.routes a:hover{background:rgba(201,163,90,.14)}
.routes a[aria-current]{background:var(--brass);color:var(--ink)}

/* page title on the stage, with Duncan's line beside it */
.stagehead{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:18px;margin:26px 0 20px}
/* the director's props (site/studio/director/): clipboard for director's notes, clapperboard for session packs, megaphone for resources */
.stagehead .prop{width:auto;height:92px;filter:drop-shadow(0 10px 14px rgba(0,0,0,.45))}
.stagehead h1{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(2rem,4.6vw,2.9rem);line-height:1.05;letter-spacing:.02em}
.stagehead .lede{margin:8px 0 0;max-width:60ch;color:var(--muted);font-size:1.05rem}
.talk{display:flex;align-items:center;max-width:430px}
.talk>img{width:72px;height:72px;border-radius:50%;flex:none;box-shadow:0 0 0 2.5px var(--brass)}
/* smaller words make a smaller bubble; studio.js draws it, centered on his face so the tail comes from his mouth */
body .stagehead .talk>p{padding:13px 15% 14px;font-weight:700;font-size:.8rem;line-height:1.25}
/* on phones Duncan's line would push the material down a screen; his face stays in the masthead */
@media (max-width:720px){.stagehead{grid-template-columns:auto minmax(0,1fr);margin:18px 0 14px}.stagehead .prop{height:60px}.talk{display:none}}

/* notices on the stage: admin preview, and what's free to try versus what comes with a host account */
.notice{display:grid;gap:6px;margin:0 0 18px;padding:14px 18px;border-radius:14px;border:2px dashed rgba(201,163,90,.65);background:rgba(12,9,8,.55)}
.notice b{color:var(--ivory)}
.notice p{margin:0;color:var(--muted)}
.notice.preview{border-style:solid;border-color:#c0392b;background:rgba(92,10,13,.45)}
.notice.preview p{color:#f3d6cf}
.notice code{font-size:.88em;color:var(--brass-light)}
.notice .acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}

/* filters: a few chip groups, no more */
.filters{display:flex;flex-wrap:wrap;gap:12px 26px;margin:0 0 18px}
.fgroup{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.fgroup>span{font-weight:700;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-right:4px}
.chip{border:0;border-radius:999px;padding:7px 13px;background:rgba(246,236,216,.08);color:var(--ivory);box-shadow:inset 0 0 0 1.5px rgba(201,163,90,.45);font-weight:700;font-size:.88rem;cursor:pointer}
.chip:hover{background:rgba(201,163,90,.16)}
.chip[aria-pressed="true"]{background:var(--brass);color:var(--ink);box-shadow:none}
.count{margin:-6px 0 14px;color:var(--muted);font-size:.9rem}

/* cards: ivory index cards on the stage */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.pcard{position:relative;display:flex;flex-direction:column;gap:10px;padding:18px 20px 16px 24px;border-radius:14px;background:var(--paper);color:var(--ink);text-decoration:none;
  box-shadow:0 0 0 1.5px var(--brass),0 14px 28px rgba(0,0,0,.4);transition:transform .15s,box-shadow .15s;overflow:hidden}
.pcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:7px;background:var(--gc,var(--brass))}
a.pcard:hover{transform:translateY(-3px);box-shadow:0 0 0 2px var(--brass-light),0 18px 32px rgba(0,0,0,.45)}
.pcard h2{margin:0;font-weight:800;font-size:1.22rem;line-height:1.2;color:var(--ink)}
.pcard .skill{margin:-4px 0 0;color:var(--ink-2);font-weight:600;font-size:.95rem}
.pcard .sum{margin:0;color:var(--ink);font-size:.96rem}
.pcard .foot{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding-top:8px;border-top:1px solid var(--rule);font-size:.84rem;font-weight:700;color:var(--ink-2)}
.toprow{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
/* the running time, like a studio clock face */
.mins{flex:none;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:var(--board);color:var(--brass-light);box-shadow:0 0 0 2.5px var(--brass);line-height:1;text-align:center}
.mins b{font-size:1.35rem;font-weight:800}
.mins small{display:block;font-size:.58rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;background:var(--paper-2);color:var(--ink-2);font-weight:700;font-size:.8rem;line-height:1.3}
.tag.mod{background:#efe2c4;color:var(--ink)}
.tag.mod img{height:18px!important;filter:none}
.tag.purpose{background:none;box-shadow:inset 0 0 0 1.5px var(--rule)}
/* purposes in their own colors: acquisition blue, application teal, rehearsal plum (with a dot, so they still differ in black and white) */
.tag.purpose[class*="p-"]::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.tag.p-acquisition{background:#dce8f5;color:#1d4670;box-shadow:inset 0 0 0 1.5px #a9c3df}
.tag.p-application{background:#d5ece5;color:#1b5244;box-shadow:inset 0 0 0 1.5px #9fcbbd}
.tag.p-rehearsal{background:#ecdcf0;color:#5a2a6a;box-shadow:inset 0 0 0 1.5px #ccaed6}
.tag.p-application::before{border-radius:2px}.tag.p-rehearsal::before{border-radius:0;transform:rotate(45deg) scale(.9)}
.tag.sample{background:var(--brass);color:var(--ink)}
.tag.lock{background:var(--ink);color:var(--paper)}
.tag.free{background:#dcefd9;color:#1d4a22}
.tag.paid{background:#f3e0c8;color:#6a3d12}
.gname{display:inline-flex;align-items:center;gap:6px}
.gname::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--gc,var(--brass))}
/* a red rubber DRAFT stamp on anything not yet reviewed (admins only ever see these) */
.draft{position:absolute;top:12px;right:-30px;transform:rotate(30deg);padding:3px 34px;background:#c0392b;color:#fff;font-weight:900;font-size:.72rem;letter-spacing:.2em;box-shadow:0 2px 4px rgba(0,0,0,.25)}
.pcard.has-draft .toprow{padding-right:34px}
.locked{background:#efe7d6}
.locked .sum{color:var(--ink-2)}

/* a pack or notes page: one printable script page */
.back{display:inline-flex;margin:0 0 14px;font-weight:700;text-decoration:none}
.back:hover{text-decoration:underline}
.sheet{position:relative;overflow:hidden;background:var(--paper);color:var(--ink);border-radius:16px;box-shadow:0 0 0 2px var(--brass),0 0 0 7px rgba(201,163,90,.14),0 20px 44px rgba(0,0,0,.5);padding:30px clamp(18px,4vw,44px) 36px}
.sheet::before{content:"";position:absolute;left:0;right:0;top:0;height:7px;background:var(--gc,var(--brass))}
.kicker{margin:0;font-weight:800;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brass-ink)}
.sheet h1{margin:6px 0 4px;font-family:var(--serif);font-weight:400;font-size:clamp(1.8rem,4vw,2.5rem);line-height:1.08;color:var(--ink);letter-spacing:.01em}
.sheet .skill{margin:0;font-size:1.1rem;font-weight:600;color:var(--ink-2)}
.meta{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin:14px 0 0}
/* a pack's labeled facts under its title: Module, Time, Purpose, Game */
.packmeta{display:flex;flex-wrap:wrap;gap:10px 28px;margin:16px 0 0}
.packmeta>div{display:grid;gap:4px;align-content:start}
.packmeta dt{font-weight:800;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brass-ink)}
.packmeta dd{margin:0;display:flex;flex-wrap:wrap;gap:6px}
.packmeta .gamemeta dd{align-items:center;gap:10px}
/* a miniature of the game's front-page card, beside the game's name (pack pages) and the notes title */
.minicard{position:relative;display:inline-block;flex:none;width:64px;aspect-ratio:1;filter:drop-shadow(0 3px 5px rgba(40,20,10,.3))}
.minicard img{display:block;width:100%;height:auto}
.minicard img.pop{position:absolute;height:auto}
.notehead{display:flex;align-items:center;gap:16px}
.notehead .minicard{width:88px}
/* clinical documentation: a suggested note summary to copy */
.dochint{color:var(--ink-2);font-size:.95rem!important}
.doctext{margin:6px 0 10px;padding:12px 16px;border-left:4px solid var(--brass);background:rgba(201,163,90,.12);border-radius:0 8px 8px 0;font-size:1rem;line-height:1.55}
.docdraft{color:#a3281c;font-weight:800;font-size:.9rem!important}
.btn.small{padding:6px 14px;font-size:.78rem}
.gnotes{display:inline-flex;flex-direction:column;color:var(--brass-ink);font-weight:700;line-height:1.25}
.gnotes small{font-weight:500;font-size:.8rem;color:var(--ink-2)}
.cardlink{display:inline-block;border-radius:8px;transition:transform .15s}
.cardlink:hover,.cardlink:focus-visible{transform:translateY(-2px) rotate(-2deg)}
.cardlink:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:20px 0 4px;padding:14px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.actions .hint{color:var(--ink-2);font-size:.88rem;font-weight:600;max-width:46ch}
.btn{display:inline-flex;align-items:center;gap:8px;text-decoration:none;border:0;border-bottom:5px solid var(--red-deep);background:var(--red);color:var(--ivory);padding:11px 18px;border-radius:var(--r);cursor:pointer;font-weight:700;font-size:.92rem;letter-spacing:.12em;text-transform:uppercase;box-shadow:inset 0 0 0 1.5px var(--brass)}
.btn:hover{background:var(--red-bright)}
.btn:active{transform:translateY(2px);border-bottom-width:3px}
.btn.ghost{background:transparent;color:var(--ink);border-bottom-color:transparent;box-shadow:inset 0 0 0 2px var(--brass)}
.btn.ghost:hover{background:rgba(201,163,90,.18)}
.notice .btn.ghost{color:var(--ivory)}
.btn.small{padding:7px 12px;font-size:.78rem;border-bottom-width:3px}
.sec{margin-top:26px;break-inside:avoid}
.sec h2{display:flex;align-items:center;gap:10px;margin:0 0 8px;font-weight:800;font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brass-ink)}
.sec h2::after{content:"";flex:1;height:1px;background:var(--rule)}
details.sec>summary{display:block;list-style:none;cursor:pointer;border-radius:6px}
details.sec>summary::-webkit-details-marker{display:none}
details.sec>summary h2{margin-bottom:0}
details.sec[open]>summary h2{margin-bottom:8px}
details.sec>summary:hover h2,details.sec>summary:focus-visible h2{color:var(--ink)}
details.sec>summary:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.sec .chev{order:1;flex:none;width:9px;height:9px;margin:0 4px 0 2px;border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor;transform:rotate(-45deg);transition:transform .15s}
details.sec[open] .chev{transform:translateY(-3px) rotate(45deg)}
details.sec:not([open]){margin-top:18px}
.sec p{margin:0 0 8px;font-size:1.04rem}
.sec ul,.sec ol{margin:0;padding-left:1.25em;display:grid;gap:7px;font-size:1.02rem}
.sec li::marker{color:var(--brass-ink);font-weight:800}
.cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 34px}
@media (max-width:760px){.cols{grid-template-columns:minmax(0,1fr)}}
/* the suggested script reads like a cue card */
.script{margin:0;padding:14px 18px;border-left:4px solid var(--brass);background:var(--paper-2);border-radius:0 10px 10px 0;font-size:1.06rem;font-style:italic}
dl.facts{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:6px 16px;margin:0}
dl.facts dt{font-weight:800;color:var(--ink-2);font-size:.9rem;padding-top:2px}
dl.facts dd{margin:0;font-size:1.02rem}
@media (max-width:520px){dl.facts{grid-template-columns:minmax(0,1fr)}dl.facts dd{margin-bottom:6px}}
/* the time plan: one bar split by minutes, then the steps */
.plan{display:flex;height:34px;border-radius:8px;overflow:hidden;box-shadow:0 0 0 1.5px var(--ink);margin:4px 0 12px}
.plan span{display:flex;align-items:center;justify-content:center;min-width:0;padding:0 6px;font-weight:800;font-size:.82rem;white-space:nowrap;overflow:hidden;color:var(--ink);border-right:1.5px solid var(--ink)}
.plan span:last-child{border-right:0}
.plan span:nth-child(3n+1){background:#f1d998}.plan span:nth-child(3n+2){background:#f6c3b5}.plan span:nth-child(3n){background:#cfe5dc}
ol.steps{list-style:none;padding:0;counter-reset:s}
ol.steps li{display:grid;grid-template-columns:62px minmax(0,1fr);gap:10px;align-items:baseline}
ol.steps li b{font-weight:800;color:var(--brass-ink);font-size:.95rem}
/* the answer key for a pack's questions */
.qkey{list-style:none;padding:0;display:grid;gap:10px;counter-reset:q}
.qkey li{counter-increment:q;padding:10px 14px 10px 44px;position:relative;background:var(--paper-2);border-radius:10px}
.qkey li::before{content:counter(q);position:absolute;left:12px;top:10px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--paper);font-weight:800;font-size:.78rem}
.qkey .q{display:block;font-weight:700}
.qkey .a{display:block;margin-top:2px;color:#1d4a22;font-weight:700}
.qkey .a::before{content:"Answer: ";color:var(--ink-2);font-weight:600}
.qkey .why{display:block;margin-top:2px;color:var(--ink-2);font-size:.94rem}
.scope{margin:30px 0 0;padding:16px 18px;border-radius:12px;background:#eef3ee;box-shadow:inset 0 0 0 1.5px #c9dccb}
.scope>.kicker{color:#2f5d3a}
.scope .sec{margin-top:12px}
/* a pack's handouts and worksheets, collapsed inside the matching book's card */
details.hlist{margin:4px 0 2px;border-top:1px dashed var(--rule);padding-top:8px}
details.hlist>summary{cursor:pointer;font-weight:800;font-size:.92rem;color:var(--brass-ink)}
details.hlist>summary:hover{text-decoration:underline}
details.hlist ul{margin:8px 0 2px;padding-left:1.2em;display:grid;gap:3px;font-size:.95rem}
details.hlist .hed{margin:10px 0 0;font-weight:800;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
details.hlist .hed+ul{margin-top:4px}
.rcard .eds{display:flex;flex-wrap:wrap;gap:6px 14px;margin:2px 0 8px;font-size:.92rem}
.rcard .eds a{color:var(--brass-ink);font-weight:700}
details.hlist .hnote{margin:6px 0 0;color:var(--ink-2);font-size:.92rem}
.htodo{margin:2px 0 0;color:#8f2b22;font-style:italic;font-size:.9rem}
/* the videos box above the resource cards */
.handouts{margin:0 0 12px;padding:12px 16px;border-radius:10px;background:var(--paper-2)}
.handouts ul{margin:6px 0 0;gap:5px;font-size:.98rem}
.vids a{color:var(--ink);font-weight:700;text-decoration-color:var(--brass)}
.vids a::after{content:" ↗";color:var(--brass-ink);font-weight:500}
.vids ul{list-style:none;padding-left:0;gap:8px}
.vids .vabout{display:block;color:var(--ink-2);font-size:.92rem;margin-top:1px}
.vids .vmod{margin:12px 0 4px;font-weight:800;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--brass-ink)}
@media print{.vids a::after{content:" (" attr(href) ")";font-size:9pt}details.hlist>summary{list-style:none}}
/* resource cards */
.rlist{display:grid;gap:12px}
.rcard{position:relative;overflow:hidden;display:grid;gap:6px;padding:16px 18px;border-radius:12px;background:var(--paper);color:var(--ink);box-shadow:0 0 0 1.5px var(--brass),0 10px 22px rgba(0,0,0,.35)}
.sheet .rcard{box-shadow:inset 0 0 0 1.5px var(--rule);background:#fffdf7}
.rcard h3{margin:0;font-size:1.08rem;font-weight:800;line-height:1.25}
.rcard h3 a{color:var(--ink);text-decoration-color:var(--brass)}
.rcard h3 a::after{content:" ↗";color:var(--brass-ink)}
.rcard .src{margin:0;color:var(--ink-2);font-weight:600;font-size:.92rem}
.rcard p{margin:0}
.rcard .rev{font-size:.82rem;color:var(--ink-2);font-weight:600}
.rcard.has-draft h3{padding-right:60px}
.empty{padding:26px;text-align:center;color:var(--muted);border:2px dashed rgba(201,163,90,.4);border-radius:14px}
.foot-note{margin:28px 0 0;text-align:center;color:var(--muted);font-size:.9rem}

@media print{
  @page{margin:16mm}
  :root{color-scheme:light}
  body{background:#fff;color:#000;font-size:11pt}
  .masthead,.stagehead,.filters,.notice,.back,.actions,.count,.foot-note,.no-print,.draft,#docCopy{display:none!important}
  .wrap{max-width:none;padding:0}
  .sheet{box-shadow:none;padding:0;border-radius:0;background:#fff}
  .sheet::before{display:none}
  .sheet h1{font-size:22pt}
  .sec,details.sec:not([open]){margin-top:14pt}
  .sec .chev{display:none}
  .rcard .eds a::after{content:" (" attr(href) ")";font-weight:400;font-size:9pt;color:#333}
  .script,.qkey li,.scope,.sheet .rcard{background:#fff;box-shadow:none;border:1px solid #bbb}
  .plan span{background:#fff!important}
  .rcard h3 a::after{content:" (" attr(href) ")";font-weight:400;font-size:9pt;color:#333}
  a{color:#000}
}
@media (prefers-reduced-motion:reduce){a.pcard{transition:none}}