/* Layout: the design journals' plain page (system fonts, a dated rail on the
   left of each section, bordered panels, mono stamps) with MerryQuery's
   touches (eyebrow labels, a stat strip, file cards, one tinted band). No web
   fonts: the page loads nothing from another origin (GL-6). */
:root {
  --bg: #f4f5f2; --panel: #ffffff; --fg: #1e2a2f; --muted: #5c676c; --line: #d5dad3;
  --accent: #2b62a0; --accent-soft: #e6edf6; --mark: #b8452f; --you: #f1dc8a; --you-line: #c9a93a;
  --band: #eceee8; --word: #2b579a; --excel: #217346; --ppt: #b7472a; --on-color: #ffffff;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #12171a; --panel: #1a2125; --fg: #e3e9e6; --muted: #9ba7ac; --line: #2c373c;
    --accent: #86b2e4; --accent-soft: #1d2a38; --mark: #ec8b74; --you: #5c4f1c; --you-line: #c9ae4c;
    --band: #161d20; --word: #6f9ae0; --excel: #4fb07e; --ppt: #e07d61; --on-color: #0d1214;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #12171a; --panel: #1a2125; --fg: #e3e9e6; --muted: #9ba7ac; --line: #2c373c;
  --accent: #86b2e4; --accent-soft: #1d2a38; --mark: #ec8b74; --you: #5c4f1c; --you-line: #c9ae4c;
  --band: #161d20; --word: #6f9ae0; --excel: #4fb07e; --ppt: #e07d61; --on-color: #0d1214;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-padding-top: 76px; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.6 var(--body); }
a { color: var(--accent); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
code, .mono { font-family: var(--mono); }
code { font-size: .9em; overflow-wrap: anywhere; background: var(--band); padding: 1px 4px; border-radius: 3px; }
.wrap { max-width: 1200px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.skip { position: absolute; left: -999em; }
.skip:focus { left: 16px; top: 16px; z-index: 20; background: var(--panel); padding: 8px 12px; }

/* Top bar: course chip and the section chips, as in the journals. */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: var(--bg); border-bottom: 2px solid var(--fg); }
.top-row { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; justify-content: space-between; padding-block: 10px; }
.brand { margin: 0; font-weight: 600; font-size: 15px; display: flex; gap: 8px; align-items: center; }
.chip { font: 600 12px/1 var(--mono); letter-spacing: .04em; border: 1px solid var(--fg); border-radius: 4px; padding: 4px 6px; }
nav { display: flex; flex-wrap: wrap; gap: 6px; }
nav a { font-weight: 600; font-size: 13.5px; color: var(--fg); text-decoration: none; padding: 5px 10px; border: 1px solid var(--line); background: var(--panel); border-radius: 4px; }
nav a:hover { border-color: var(--accent); color: var(--accent); }

/* Hero */
.hero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 40px; align-items: start; padding-block: 40px 28px; }
.hero-text { display: grid; gap: 14px; min-width: 0; }
.eyebrow { margin: 0; font: 600 12.5px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mark); }
h1 { margin: 0; font-size: clamp(28px, 4vw, 38px); line-height: 1.12; text-wrap: balance; }
#intro { display: grid; gap: 12px; }
#intro p { margin: 0; font-size: 17px; max-width: 66ch; }
.note { margin: 0; font-size: 13.5px; color: var(--muted); }

.next { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.next-head { display: flex; justify-content: space-between; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); font: 500 12.5px/1.3 var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.next-body { padding: 14px 16px 6px; display: grid; gap: 6px; }
.next-when { justify-self: start; font: 600 12.5px/1 var(--mono); background: var(--you); border: 1px solid var(--you-line); padding: 5px 8px; border-radius: 3px; }
.next h2 { margin: 2px 0 0; font-size: 24px; line-height: 1.2; }
.next-what { margin: 0; color: var(--muted); }
.next ul { list-style: none; margin: 0; padding: 6px 16px 14px; display: grid; gap: 6px; }
.next li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 6px; font-size: 15px; }
.next li::before { content: ""; width: 14px; height: 14px; border: 1.5px solid var(--muted); border-radius: 3px; margin-top: 5px; }
.rail { display: flex; gap: 4px; padding: 0 16px 16px; }
.rail span { flex: 1 1 0; height: 6px; border-radius: 3px; background: var(--line); }
.rail span[data-status="done"] { background: var(--accent); }
.rail span[data-status="next"] { background: var(--you-line); }

/* Stat strip */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--panel); border: 1px solid var(--line); border-radius: 6px; margin-bottom: 12px; }
.stat { padding: 16px 18px; display: grid; gap: 2px; border-left: 1px solid var(--line); }
.stat:first-child { border-left: 0; }
.stat b { font-size: 30px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat span { color: var(--muted); font-size: 14px; }

/* Sections: a rail with the eyebrow, then the body, as journal entries */
.sec { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 24px; border-top: 1px solid var(--line); padding-block: 32px; }
.sec.band { background: var(--band); box-shadow: 0 0 0 100vmax var(--band); clip-path: inset(0 -100vmax); }
.sec-rail { display: grid; gap: 4px; align-content: start; position: sticky; top: 84px; }
.sec-rail .eyebrow { color: var(--mark); }
.sec-body { display: grid; gap: 16px; min-width: 0; }
.sec h2 { margin: 0; font-size: 26px; line-height: 1.2; text-wrap: balance; }
.lede { margin: 0; max-width: 72ch; }
.sec-note { margin: 0; color: var(--muted); font-size: 15px; max-width: 80ch; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; }

/* Files */
.files { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.file { display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; }
.file-cap { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.glyph { width: 36px; height: 36px; border-radius: 6px; display: grid; place-items: center; color: var(--on-color); font-weight: 700; flex: none; }
.file[data-id="word"] .glyph { background: var(--word); }
.file[data-id="excel"] .glyph { background: var(--excel); }
.file[data-id="ppt"] .glyph { background: var(--ppt); }
.file h3 { margin: 0; font-size: 17px; line-height: 1.25; }
.file-cap code { background: none; padding: 0; font-size: 13px; color: var(--muted); }
.file-body { padding: 12px 16px; display: grid; gap: 8px; align-content: start; }
.file-body p { margin: 0; font-size: 15px; }
.file ul, .rules ul { margin: 0; padding-left: 18px; display: grid; gap: 2px; font-size: 15px; }
.file-foot { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); font-size: 13px; }
.file-foot div { padding: 10px 16px; display: grid; }
.file-foot div + div { border-left: 1px solid var(--line); }
.file-foot span { color: var(--muted); }
.file-foot b { font-family: var(--mono); font-weight: 600; }
.downloads { display: flex; flex-wrap: wrap; gap: 8px; }
.downloads a { display: grid; gap: 0; padding: 8px 12px; text-decoration: none; color: var(--fg); background: var(--panel); border: 1px solid var(--line); border-radius: 4px; }
.downloads a:hover { border-color: var(--accent); }
.downloads b { font: 600 13.5px/1.3 var(--mono); color: var(--accent); }
.downloads span { font-size: 13px; color: var(--muted); }

/* Schedule rows: the date on a mono rail, as in the journals */
.rows { display: grid; }
.row { display: grid; grid-template-columns: 110px 130px minmax(0, 1fr) auto; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.row:first-child { border-top: 1px solid var(--line); }
.row time { font: 600 14px/1.3 var(--mono); }
.row .phase { font-weight: 600; }
.row .phase span { font-family: var(--mono); color: var(--muted); font-weight: 500; margin-right: 6px; }
.row p { margin: 0; }
.row .detail { color: var(--muted); font-size: 15px; margin-top: 2px; }
.row[data-status="break"] { color: var(--muted); }
.row[data-status="done"] .phase, .row[data-status="done"] time { color: var(--muted); }
.status { font: 600 12px/1 var(--mono); padding: 5px 8px; border-radius: 3px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; justify-self: end; }
.row[data-status="next"] .status { background: var(--you); border-color: var(--you-line); color: var(--fg); }
.row[data-graded="true"] .status { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.row[data-status="next"] { background: linear-gradient(90deg, var(--accent-soft), transparent 70%); }
.callout { padding: 12px 16px; border-left: 4px solid var(--you-line); background: var(--panel); border-radius: 0 6px 6px 0; margin: 0; max-width: 85ch; }

/* Numbered cards, from the journals' ol.crit */
ol.cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; counter-reset: c; }
ol.cards li { counter-increment: c; padding: 12px 14px; display: grid; gap: 4px; align-content: start; }
ol.cards li::before { content: counter(c); font-weight: 700; font-size: 20px; line-height: 1; color: var(--accent); }
ol.cards li[data-owner="me"]::before { color: var(--mark); }
ol.cards .who { font: 600 11.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
ol.cards b { font-weight: 600; }
ol.cards p { margin: 0; font-size: 14.5px; color: var(--muted); }

/* Setup */
.setup { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.tabs button { font: 600 14px/1 var(--body); padding: 9px 14px; border-radius: 4px; border: 1px solid var(--line); background: var(--panel); color: var(--fg); cursor: pointer; }
.tabs button[aria-selected="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.tab-lede { margin: 0 0 12px; padding: 10px 14px; border-left: 4px solid var(--you-line); background: var(--panel); }
ol.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: s; }
ol.steps li { counter-increment: s; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; }
ol.steps li::before { content: counter(s); width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--fg); display: grid; place-items: center; font: 600 12.5px/1 var(--mono); }
ol.steps b.step { display: block; }
ol.steps p { margin: 0; color: var(--muted); font-size: 15px; }
.folder { overflow: hidden; font-size: 14px; }
.folder-bar { padding: 8px 14px; border-bottom: 1px solid var(--line); font: 500 12.5px/1.3 var(--mono); color: var(--muted); }
.folder-files { padding: 12px 14px; display: grid; gap: 6px; }
.folder-files div { display: flex; gap: 8px; align-items: center; }
.folder-files div + div { padding-left: 22px; }
.sq { width: 14px; height: 14px; border-radius: 3px; background: var(--you-line); flex: none; }
.sq[data-kind="word"] { background: var(--word); } .sq[data-kind="excel"] { background: var(--excel); } .sq[data-kind="ppt"] { background: var(--ppt); }
.sharing { margin: 0 14px 14px; border-top: 1px solid var(--line); padding-top: 8px; display: grid; gap: 4px; }
.sharing div { display: flex; justify-content: space-between; gap: 8px; }
.sharing span { color: var(--muted); }
.figure-label { margin: 0 0 6px; font: 600 12px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
kbd { font: 600 .92em var(--body); }

/* Roles */
.roles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.role { padding: 12px 14px; display: grid; gap: 4px; align-content: start; border-top: 3px solid var(--accent); }
.role h3 { margin: 0; font-size: 16px; }
.role p { margin: 0; color: var(--muted); font-size: 14.5px; }
.role code { justify-self: start; font-size: 12.5px; }

/* Rubric */
.rubric { display: grid; gap: 10px; max-width: 760px; padding: 14px 16px; }
.rb { display: grid; grid-template-columns: minmax(0, 1fr) 48px; gap: 4px 12px; align-items: center; }
.rb progress { grid-column: 1; width: 100%; height: 8px; appearance: none; border: 0; border-radius: 4px; background: var(--line); overflow: hidden; }
.rb progress::-webkit-progress-bar { background: var(--line); }
.rb progress::-webkit-progress-value { background: var(--accent); }
.rb progress::-moz-progress-bar { background: var(--accent); }
.rb b { grid-column: 2; grid-row: 1 / span 2; text-align: right; font: 600 18px/1 var(--mono); }
.rb.total { border-top: 1px solid var(--line); padding-top: 8px; font-weight: 600; }

/* Rules and gallery */
.after { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
dl.rules { margin: 0; display: grid; gap: 10px; }
dl.rules div { padding: 10px 14px; }
dl.rules dt { font-weight: 600; }
dl.rules dd { margin: 2px 0 0; color: var(--muted); font-size: 15px; }
.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.game { display: grid; text-decoration: none; color: var(--fg); overflow: hidden; }
.game img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: var(--line); }
.game span { padding: 8px 12px; font-size: 14px; display: grid; }
.game span small { color: var(--muted); }
.game:hover b { color: var(--accent); }

/* FAQ */
.faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
details { border-bottom: 1px solid var(--line); padding: 12px 0; }
summary { cursor: pointer; font-weight: 600; }
details p { margin: 8px 0 0; color: var(--muted); font-size: 15px; }

footer { border-top: 2px solid var(--fg); padding-block: 18px 40px; display: grid; gap: 4px; font-size: 14px; color: var(--muted); }
footer p { margin: 0; }
#message:not(:empty) { color: var(--mark); font-weight: 600; }
[data-term] { text-decoration: underline dotted; cursor: help; }

@media (max-width: 980px) {
  .hero, .setup, .after { grid-template-columns: minmax(0, 1fr); }
  .files { grid-template-columns: minmax(0, 1fr); }
  ol.cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .roles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faq { grid-template-columns: minmax(0, 1fr); }
  .sec { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .sec-rail { position: static; }
  nav { display: none; }
  .hero-text { display: contents; }
  .hero { gap: 14px; }
  .hero .eyebrow { order: 1; } .hero h1 { order: 2; } .next { order: 3; } #intro { order: 4; } .hero .note { order: 5; }
}
@media (max-width: 640px) {
  #course { display: none; }
  .top { position: static; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(3) { border-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
  .row { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; }
  .row time { grid-column: 1; }
  .row .phase { grid-column: 1; }
  .row > div { grid-column: 1 / -1; }
  .row .status { grid-column: 2; grid-row: 1; }
  ol.cards, .roles, .gallery { grid-template-columns: minmax(0, 1fr); }
  .sec { padding-block: 24px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }