/* PACE presentation theme — shared by every deck under docs/presentations/.
   Change tokens and components here only; decks must not redefine them.
   After editing this file, re-check every deck listed in ../index.html. */

/* ---------- 1. Design tokens ----------
   Brand: The University of Sydney — Ochre #E64626 on white, text #141414 (values from the
   sydney.edu.au design-system CSS, --ds-colour-ochre-10 / -11 and --ds-colour-sand-100).
   Ochre marks structure only (kickers, progress bar, active dot, callouts); it never encodes data.
   Neutral boxes use warm greys from the Sandstone hue (#f4eee8 fill, #cdc3b9 border) so they still read on a projector.
   Data colour semantics (keep consistent across decks; token names kept from the old theme):
   cyan   = model / progress / System 1      blue  = data flow, arrows
   violet = adapters, graph text             green = success, supported, promising
   amber  = System 2, caution, provisional   coral = failure, blocked, rejected (crimson, not Ochre)
   mute/dim = not started, secondary text */
:root{
  --bg:#ffffff;--line:#cdc3b9;--ink:#141414;--mute:#595959;--dim:#9e9e9e;
  --brand:#e64626;--brand-dark:#c63a1e;--sand:#fcede2;
  --cyan:#0e8c80;--blue:#2f62d0;--amber:#b86e00;--coral:#c8102e;--green:#1f8a4c;--violet:#7a4cc8;
  --sans:Inter,"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,"Noto Sans CJK SC","PingFang SC",sans-serif;
  --mono:"JetBrains Mono","Fira Code",ui-monospace,Menlo,Consolas,monospace;
}

/* ---------- 2. Base ---------- */
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:var(--sans)}
h1{font-size:clamp(34px,4.3vw,66px);margin:.2em 0 .3em;line-height:1.12}
h2{font-size:clamp(24px,2.6vw,42px);margin:.25em 0 .6em;line-height:1.2}
h3{font-size:clamp(16px,1.4vw,23px);margin:.1em 0 .35em;color:var(--ink)}
p,li{font-size:clamp(15px,1.25vw,21px);line-height:1.55;color:#333333}
svg{width:100%;height:auto;display:block;overflow:visible}
svg text{font-family:inherit;fill:var(--ink)}

/* ---------- 3. Deck layout (one <section class="slide"> per slide) ---------- */
#deck{height:100vh;overflow-y:auto;scroll-snap-type:y mandatory;scroll-behavior:smooth}
.slide{min-height:100vh;scroll-snap-align:start;padding:4.5vh 5vw 4vh;position:relative;display:flex;flex-direction:column;
  background:radial-gradient(1200px 600px at 85% -10%,#fcede2b3,transparent),radial-gradient(900px 500px at -10% 110%,#f1f3f8cc,transparent),var(--bg)}
.wrap{max-width:1500px;width:100%;margin:0 auto;flex:1;display:flex;flex-direction:column}
.mid{flex:1;display:flex;flex-direction:column;justify-content:center}
.grid{display:grid;gap:1.5vw}
.grid.mid{display:grid;align-content:center}
.g3{grid-template-columns:repeat(3,1fr)}.g64{grid-template-columns:1.55fr 1fr}.g46{grid-template-columns:1fr 1.5fr}.g55{grid-template-columns:1.1fr 1fr}

/* ---------- 4. Components ---------- */
.kicker{font-size:clamp(12px,1vw,15px);letter-spacing:.18em;color:var(--brand);text-transform:uppercase;font-weight:600}
.mute{color:var(--mute)}.small{font-size:clamp(13px,1vw,16px)}
.card{background:linear-gradient(180deg,#faf6f2,#f3ece5);border:1px solid var(--line);box-shadow:0 1px 4px #1414141a;border-radius:14px;padding:1.1vw 1.3vw}
.pill{display:inline-block;padding:.15em .75em;border-radius:99px;font-size:.8em;font-weight:600;border:1px solid currentColor;margin:0 .3em .3em 0;white-space:nowrap}
.callout{border-left:4px solid var(--brand);background:#e6462614;padding:.6em 1em;border-radius:0 10px 10px 0}
.c-cyan{color:var(--cyan)}.c-blue{color:var(--blue)}.c-amber{color:var(--amber)}.c-coral{color:var(--coral)}.c-green{color:var(--green)}.c-violet{color:var(--violet)}.c-dim{color:var(--mute)}
/* status board: <div class="row"><span class="name"/><span class="tag c-*"/><span class="num"/></div> */
.row{display:grid;grid-template-columns:1.25fr .95fr 2fr;gap:1vw;align-items:center;padding:.62em 0;border-bottom:1px solid var(--line)}
.row .name{font-weight:600;font-size:clamp(14px,1.15vw,19px)}
.row .num{font-size:clamp(13px,1.02vw,17px);color:#333333}
.tag{font-size:clamp(11px,.85vw,14px);font-weight:700;letter-spacing:.06em;padding:.25em .7em;border-radius:6px;border:1px solid currentColor;justify-self:start;white-space:nowrap}

/* ---------- 5. Animation hooks ----------
   .fade / .draw / .grow play each time their slide becomes active (class .in, set by deck.js);
   stagger with style="--d:.3s"; .draw needs --len ≈ path length. SMIL elements should use
   begin="indefinite" — deck.js restarts them on slide entry. */
.fade{opacity:0;transform:translateY(16px)}
.slide.in .fade{animation:fadeUp .7s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:var(--d,0s)}
@keyframes fadeUp{to{opacity:1;transform:none}}
.draw{stroke-dasharray:var(--len,1200);stroke-dashoffset:var(--len,1200)}
.slide.in .draw{animation:draw 1.5s ease forwards;animation-delay:var(--d,0s)}
@keyframes draw{to{stroke-dashoffset:0}}
.flow{stroke-dasharray:6 8;animation:flow 1.2s linear infinite}
@keyframes flow{to{stroke-dashoffset:-28}}
.pulse{animation:pulse 2.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes pulse{50%{opacity:.45;transform:scale(1.08)}}
.grow{transform:scaleX(0);transform-origin:left;transform-box:fill-box}
.slide.in .grow{animation:grow 1.1s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:var(--d,0s)}
@keyframes grow{to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.fade,.slide.in .fade{opacity:1;transform:none;animation:none}.draw,.slide.in .draw{stroke-dashoffset:0;animation:none}.grow,.slide.in .grow{transform:none;animation:none}.flow,.pulse{animation:none}}

/* ---------- 6. Deck chrome (created by deck.js) ---------- */
#bar{position:fixed;top:0;left:0;height:3px;background:var(--brand);z-index:9;transition:width .3s}
/* University of Sydney logo (assets/usyd-logo.svg, the official dark lockup) on every page, top right */
body::after{content:"";position:fixed;top:2vh;right:1.6vw;width:clamp(84px,7.5vw,150px);aspect-ratio:233/80;
  background:url(usyd-logo.svg) no-repeat left top/contain;z-index:8;pointer-events:none}
#pager{position:fixed;right:1.4vw;bottom:1.2vh;font:12px var(--mono);color:var(--dim);z-index:9}
#toc{position:fixed;right:.8vw;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:9px;z-index:9}
#toc a{width:9px;height:9px;border-radius:50%;background:#14141422;display:block}
#toc a.on{background:var(--brand);box-shadow:0 0 6px var(--brand)}

/* ---------- 7. Catalogue page (../index.html) ---------- */
body.page{height:auto;min-height:100%;background:radial-gradient(1200px 600px at 85% -10%,#fcede2b3,transparent),var(--bg)}
.page .wrap{padding:7vh 5vw}
.deck-list{list-style:none;padding:0;margin:2em 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:1.5vw}
.deck-card{display:block;text-decoration:none;color:inherit;height:100%;transition:border-color .2s,transform .2s}
.deck-card:hover,.deck-card:focus-visible{border-color:var(--brand);transform:translateY(-2px)}

/* ---------- 8. Responsive & print ---------- */
@media (max-width:900px){.g3,.g64,.g46,.g55{grid-template-columns:1fr}#toc{display:none}}
@media print{#deck{height:auto;overflow:visible}.slide{page-break-after:always;min-height:auto}.fade{opacity:1;transform:none}.draw{stroke-dashoffset:0}.grow{transform:none}#bar,#toc,#pager{display:none}}