/*
 * The gallery's own stylesheet. Small on purpose: the studio's theme, its fonts
 * and its layout are platform code and stay in the private repository — what a
 * demo needs from a page is a stage, a still lying over it, a control strip and
 * twelve colour tokens, and those are the only rules copied here (from
 * `shared/theme/course.css`, the `.demo*` block).
 *
 * The twelve `--c-*` tokens below are what `host.js` reads with
 * `getComputedStyle` and posts to every demo as its `theme` message, so a demo
 * that honours the theme comes out in these colours — which is the point of
 * having them on a page that is not a lecture at all.
 *
 * No web font and no external anything: a page whose subject is "make no
 * request" should be able to say the same about itself.
 */

:root {
  --c-bg: #ffffff;
  --c-panel: #e4e8e2;
  --c-ink: #16181a;
  --c-muted: #5c6560;
  --c-rule: #cdd3cb;
  --c-accent: #d85a30;
  --c-on-accent: #ffffff;
  --c-warn: #a8401d;
  --c-series-1: #2f6f8f;
  --c-series-2: #4e8a6b;
  --c-series-3: #b07a2a;
  --c-series-4: #7a5aa8;

  --field: #f2f4f1;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0; background: var(--field); color: var(--c-ink);
  font-family: var(--font); line-height: 1.55;
}

header.page {
  max-width: 1180px; margin: 0 auto; padding: 3rem 1.5rem 1rem;
}
header.page h1 { font-size: 1.9rem; margin: 0 0 .4rem; letter-spacing: -.01em; }
header.page p { margin: .35rem 0; max-width: 62ch; color: var(--c-muted); }
header.page a { color: var(--c-warn); }
.eyebrow {
  font-family: var(--mono); font-size: .78rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--c-muted); margin: 0 0 .6rem;
}

main { max-width: 1180px; margin: 0 auto; padding: 1rem 1.5rem 4rem; }
.grid { display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); }
@media (max-width: 520px) { .grid { grid-template-columns: 1fr; } }

.card {
  background: var(--c-bg); border: 1px solid var(--c-rule); border-radius: 12px;
  padding: 1rem 1rem 1.1rem; display: flex; flex-direction: column; gap: .5rem;
}
.card h2 { font-size: 1.12rem; margin: .1rem 0 0; }
.card .desc { margin: 0; color: var(--c-muted); font-size: .95rem; }
.card .meta {
  font-family: var(--mono); font-size: .76rem; color: var(--c-muted);
  display: flex; flex-wrap: wrap; gap: .2rem .9rem;
}
.card .links { display: flex; flex-wrap: wrap; gap: .9rem; font-size: .85rem; }
.card .links a { color: var(--c-warn); }

/* ---------- the demo chrome, copied from the platform's course.css ---------- */

.demo { width: 100%; }
.demo-stage { position: relative; width: 100%; background: var(--c-bg); }
.demo-stage iframe { display: block; width: 100%; border: 0; border-radius: 8px; }
.demo-stage .still {
  position: absolute; inset: 0; display: block;
  width: 100%; height: 100%; object-fit: contain;
  border-radius: 8px; background: var(--c-bg);
  transition: opacity .25s ease;
}
.demo.frame-ready .demo-stage .still { opacity: 0; visibility: hidden; }

.demo-controls {
  display: flex; flex-wrap: wrap; gap: .5em 1em;
  align-items: center; justify-content: center;
  margin-top: .5em; font-size: .9rem;
}
.demo-btn {
  font: inherit; cursor: pointer; padding: .25em .9em; border-radius: 6px;
  border: 1px solid var(--c-rule); background: var(--c-panel); color: var(--c-ink);
}
.demo-btn:hover { background: var(--c-rule); }
.demo-btn[aria-pressed="true"] {
  background: var(--c-accent); color: var(--c-on-accent); border-color: var(--c-accent);
}

/* On paper the frame is a blank rectangle — a printer runs no scripts — so the
   still takes its place, exactly as it does in a printed lecture. */
@media print {
  .demo-controls, .card .links { display: none; }
  .demo-stage iframe { display: none; }
  .demo .demo-stage { height: auto !important; }
  .demo-stage .still, .demo.frame-ready .demo-stage .still {
    position: static; height: auto; opacity: 1; visibility: visible;
  }
}

footer.page {
  max-width: 1180px; margin: 0 auto; padding: 0 1.5rem 3rem;
  color: var(--c-muted); font-size: .85rem;
}
footer.page a { color: var(--c-warn); }