/* Shared interface for the six viewing rooms and their contextual reading pages.
   Piece styles define layout; this sheet supplies the Stage type and colour system. */
:root {
  --paper: #eceee9;
  --plate: #f9faf7;
  --ink: #14171a;
  --soft: #464c52;
  --mid: #737980;
  --hair: #cfd3cd;
  --screen: #0b0d10;
  --screen-edge: #2a2f36;
  --m-world: #14171a;
  --m-picture: #2a78d6;
  --m-rule: #c98f00;
  --m-recall: #e0662a;
  --m-mosaic: #169e6e;
  --m-diffusion: #8a5cd1;
  --good: #1f8a5b;
  --bad: #c8412f;
  --note-event: #464c52;
  --focus: #2a78d6;
  --link: #1f5fb4;
  --display: "Big Shoulders Display", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --body: "Source Serif 4", Georgia, "Times New Roman", serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --board: #17211d;
  --chalk: #eef1ea;
  --chalk-dim: #bcc7bf;
  --chalk-rule: rgb(238 241 234 / 16%);
  --chalk-good: #7fe3ab;
  --chalk-bad: #ff8f84;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0f1113; --plate: #16191c; --ink: #e5e7e2;
    --soft: #b7bcc2; --mid: #8d939a; --hair: #2b3036;
    --screen-edge: #3a414a; --m-world: #e5e7e2;
    --m-picture: #4b93ea; --m-rule: #e0a61a; --m-recall: #f07a3e;
    --m-mosaic: #2fb886; --m-diffusion: #a883e6;
    --good: #3fb37d; --bad: #ff6a4a; --note-event: #b7bcc2;
    --focus: #7aa7ff; --link: #7aa7ff;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0f1113; --plate: #16191c; --ink: #e5e7e2;
  --soft: #b7bcc2; --mid: #8d939a; --hair: #2b3036;
  --screen-edge: #3a414a; --m-world: #e5e7e2;
  --m-picture: #4b93ea; --m-rule: #e0a61a; --m-recall: #f07a3e;
  --m-mosaic: #2fb886; --m-diffusion: #a883e6;
  --good: #3fb37d; --bad: #ff6a4a; --note-event: #b7bcc2;
  --focus: #7aa7ff; --link: #7aa7ff;
  color-scheme: dark;
}
:root, :root[data-theme="dark"], :root:not([data-theme="light"]) {
  --bg: var(--paper); --dim: var(--soft); --line: var(--hair);
  --a: var(--m-picture); --b: var(--m-recall);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
body, body[data-page] {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 17px/1.55 var(--body); -webkit-font-smoothing: antialiased;
}
body[data-page] h1, body[data-page] h2, body[data-page] h3,
body[data-page] h4, body[data-page] h5 {
  font-family: var(--display); font-style: normal; text-transform: uppercase;
  text-wrap: balance; color: var(--ink);
}
body[data-page] h1 { font-weight: 800; font-size: clamp(38px, 6vw, 60px); line-height: .95; letter-spacing: .01em; margin: 0; }
body[data-page] h2 { font-weight: 800; font-size: 28px; line-height: 1.05; letter-spacing: .02em; }
body[data-page] h3 { font-weight: 600; font-size: 18px; letter-spacing: .06em; }
a { color: var(--link); text-underline-offset: 3px; }
button, input, select, a { touch-action: manipulation; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible,
canvas:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 3px;
}
body[data-page] button, body[data-page] .btn {
  border: 1px solid var(--hair); border-radius: 5px; background: transparent;
  color: var(--ink); font: 600 15px/1.3 var(--display); letter-spacing: .04em;
  text-transform: uppercase; padding: 6px 11px; cursor: pointer;
}
body[data-page] button:hover, body[data-page] .btn:hover { border-color: var(--mid); }
body[data-page] button:disabled { opacity: .45; cursor: default; }
body[data-page] button[aria-pressed="true"], body[data-page] button[aria-selected="true"],
body[data-page] .btn.primary { background: var(--ink); color: var(--plate); border-color: var(--ink); }
body[data-page] input[type="text"], body[data-page] input[type="number"], body[data-page] select {
  font: 13px/1.4 var(--mono); color: var(--ink); background: var(--plate);
  border: 1px solid var(--hair); border-radius: 5px; padding: 5px 7px;
}
body[data-page] input[type="range"], body[data-page] input[type="checkbox"], body[data-page] input[type="radio"] { accent-color: var(--ink); }
body[data-page] .tabs { display: inline-flex; border: 1px solid var(--ink); border-radius: 6px; overflow: hidden; gap: 0; }
body[data-page] .tabs button { border: 0; border-radius: 0; padding: 6px 16px; font: 800 20px/1.3 var(--display); letter-spacing: .05em; color: var(--ink); background: transparent; }
body[data-page] .tabs button[aria-selected="true"], body[data-page] .tabs button[aria-pressed="true"], body[data-page] .tabs button.active { color: var(--plate); background: var(--ink); }
body[data-page] .seg { border-color: var(--hair); border-radius: 5px; }
body[data-page] .seg button { border: 0; border-right: 1px solid var(--hair); border-radius: 0; }
body[data-page] .seg button:last-child { border-right: 0; }
body[data-page] .panel { background: var(--plate); border: 1px solid var(--hair); border-radius: 6px; }
body[data-page] button.model { padding: 6px; font: inherit; text-transform: none; letter-spacing: normal; }
body[data-page] button.model[aria-pressed="true"] { background: transparent; color: var(--ink); border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.model-choice { display: grid; grid-template-columns: minmax(0, 1fr) 28px; align-items: center; gap: 8px; min-width: 0; }
.model-choice > button.model { width: 100%; min-width: 0; }
body[data-page] .model-choice > .help-trigger { justify-self: end; padding: 0; margin: 0; width: 28px; height: 28px; min-width: 28px; min-height: 28px; }
.blind .mon-name .help-trigger { visibility: hidden; }
.blind .mon-head .help-content { display: none !important; }
body[data-page] button.note { padding: 3px 4px; border: 0; font: 14px/1.4 var(--body); text-transform: none; letter-spacing: normal; }
body[data-page] button.note.now { background: color-mix(in srgb, var(--hair) 55%, transparent); }
body[data-page] .codebook button { padding: 0; border-radius: 2px; }
body[data-page] .codebook button[aria-pressed="true"] { background: transparent; outline: 2px solid var(--ink); outline-offset: 1px; }
body[data-page] .truth button { padding: 6px 6px 4px; font: 11px/1.4 var(--mono); text-transform: none; letter-spacing: normal; }
body[data-page] .truth button[aria-pressed="true"] { color: var(--ink); background: transparent; box-shadow: inset 0 0 0 1px var(--ink); }
body[data-page] .label, body[data-page] .eyebrow { font: 600 12px/1.4 var(--display); text-transform: uppercase; letter-spacing: .08em; color: var(--mid); }
body[data-page] .mono, body[data-page] output { font-family: var(--mono); font-variant-numeric: tabular-nums; }
body[data-page] .wrap { max-width: 1320px; padding-inline: 20px; }

/* Navigation and the compact index of reading contexts. */
header.site, footer.site, body:not([data-page="interactive"]) > main {
  width: min(100%, 1320px); margin-inline: auto; padding-inline: 20px;
}
header.site { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-block: 22px 16px; border-bottom: 1px solid var(--hair); }
header.site .home { font: 800 24px/1 var(--display); text-transform: uppercase; letter-spacing: .04em; color: var(--ink); text-decoration: none; }
header.site nav { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
header.site nav a, nav.piece a, .pieces .links a { font: 600 15px/1.35 var(--display); letter-spacing: .04em; text-transform: uppercase; text-decoration: none; color: var(--ink); }
header.site nav a:hover, .pieces .links a:hover { text-decoration: underline; }
body:not([data-page="interactive"]) > main { padding-block: 24px 50px; }
footer.site { display: flex; justify-content: space-between; align-items: center; gap: 14px; border-top: 1px solid var(--hair); padding-block: 16px 30px; color: var(--mid); font: 12px/1.4 var(--mono); }
nav.piece { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; }
nav.piece a { border: 1px solid var(--hair); border-radius: 5px; padding: 6px 12px; }
nav.piece a[aria-current="page"] { background: var(--ink); color: var(--plate); border-color: var(--ink); }
nav.piece a.go { border-color: var(--ink); }
body[data-page] nav[aria-label="Computer week"] { font: 600 14px/1.4 var(--display) !important; letter-spacing: .05em !important; }
body[data-page] nav[aria-label="Computer week"] a { color: var(--soft); text-decoration: none; }
body[data-page] nav[aria-label="Computer week"] a:hover { color: var(--ink); text-decoration: underline; }
.reading-view, .reading-view .prose, body:not([data-page="interactive"]) .prose { max-width: none; min-width: 0; }
body[data-page] .prose h1 { margin: 4px 0 24px; }
body[data-page] .prose h2 { margin: 0; }
body[data-page] .prose h3 { margin: 0; }
.reading-view section, .reading-view .reading-section { min-width: 0; }
.reading-view > section, .reading-view .prose > section, .reading-view .reading-section {
  border-top: 1px solid var(--hair); padding: 19px 0; margin: 0;
}
.help-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-width: 0; }
.help-heading h1, .help-heading h2, .help-heading h3 { margin: 0; }
.help-heading > :first-child { min-width: 0; }
.reading-view .help-heading + .help-heading { border-top: 1px solid var(--hair); margin-top: 14px; padding-top: 14px; }

/* Every thumbnail is a direct entrance; contextual copy is beside its title. */
.pieces { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; padding: 0; margin: 26px 0 12px; list-style: none; }
.pieces > li { display: flex; flex-direction: column; align-items: stretch; min-width: 0; margin: 0; padding: 16px; background: var(--plate); border: 1px solid var(--hair); border-radius: 6px; overflow: hidden; }
.pieces .date { font: 11px/1.4 var(--mono); color: var(--mid); margin: 0 0 8px; }
body[data-page] .pieces h2 { margin: 0; font-size: 27px; line-height: 1; }
.pieces h2 { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pieces h2 a { color: var(--ink); text-decoration: none; }
.pieces h2 a:hover { text-decoration: underline; }
.pieces .links { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: auto; padding-top: 16px; }
.pieces img, .piece-image img, .piece-thumb img, .social-preview img, img.piece-image, img.piece-thumb, img.social-preview {
  display: block; width: 100%; height: auto; aspect-ratio: 1.9047619; object-fit: cover;
  margin: 0 0 15px; border: 1px solid var(--hair); border-radius: 4px; background: var(--screen);
}
.pieces > li > a:first-child { display: block; }

/* Native popovers stay closed until a keyboard, pointer or touch activation. */
.context-help { display: inline-flex; position: relative; vertical-align: middle; align-items: center; gap: 7px; max-width: 100%; }
.help-label { color: var(--soft); font: 600 14px/1.35 var(--display); letter-spacing: .04em; text-transform: uppercase; }
body[data-page] h1 > .context-help, body[data-page] h2 > .context-help, body[data-page] h3 > .context-help { margin-left: 10px; flex: 0 0 auto; }
body[data-page] .help-trigger, .help-trigger {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  min-width: 28px; min-height: 28px; padding: 3px 8px; border: 1px solid var(--hair);
  border-radius: 999px; background: var(--plate); color: var(--soft);
  font: 500 12px/1.3 var(--mono); letter-spacing: 0; text-transform: none; cursor: pointer;
}
body[data-page] .help-trigger:hover, body[data-page] .help-trigger[aria-expanded="true"] { border-color: var(--ink); color: var(--ink); background: var(--paper); }
.help-content[popover], .help-content {
  position: fixed; inset: auto; margin: 0; z-index: 20;
  width: min(640px, calc(100vw - 32px)); max-width: calc(100vw - 32px);
  max-height: min(70svh, 680px); padding: 22px 24px; overflow: auto; overscroll-behavior: contain;
  border: 1px solid var(--mid); border-radius: 6px; background: var(--plate); color: var(--ink);
  box-shadow: 0 12px 40px rgb(0 0 0 / 22%); font: 16px/1.6 var(--body);
  text-align: left; text-transform: none; letter-spacing: normal; text-wrap: pretty;
}
.help-content[popover]:not(:popover-open), .help-content[hidden] { display: none; }
.help-content[popover]::backdrop { background: transparent; }
.help-content .help-heading { gap: 12px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--hair); }
body[data-page] .help-content h1, body[data-page] .help-content h2, body[data-page] .help-content h3 { margin: 18px 0 10px; font-size: 23px; line-height: 1.1; }
body[data-page] .help-content > h1:first-child, body[data-page] .help-content > h2:first-child, body[data-page] .help-content > h3:first-child { margin-top: 0; }
body[data-page] .help-content .help-heading h2, body[data-page] .help-content .help-heading h3 { margin: 0; font-size: 22px; }
.help-content p, .help-content ul, .help-content ol, .help-content blockquote, .help-content dl { margin: 0 0 13px; }
.help-content > :last-child { margin-bottom: 0; }
.help-content ul, .help-content ol { padding-left: 1.3em; }
.help-content li { margin-bottom: 5px; }
.help-content blockquote { margin-left: 0; padding-left: 14px; border-left: 2px solid var(--hair); color: var(--soft); }
.help-content a { color: var(--link); overflow-wrap: anywhere; }
body[data-page] .help-content .help-close { margin-left: auto; flex: none; }
.help-content img { display: block; max-width: 100%; height: auto; }

/* Explanations keep their original IDs for live updates, but their room-relative
   positioning and size must not survive the move into a contextual panel. */
body[data-page] .help-content :is(.scene-title, .deck, .lede, .record, .prose, .notes, .note, #subtitle, #step-caption, #notes, #inspector, #archive, footer) {
  position: static; inset: auto; transform: none; float: none;
  width: auto; max-width: 100%; min-width: 0; height: auto;
  min-height: 0; max-height: none; overflow: visible; pointer-events: auto;
}
body[data-page] .help-content :is(.scene-title, .deck, .lede, #subtitle, #step-caption, footer) {
  display: block; margin: 0 0 13px; padding: 0; border: 0;
  color: var(--ink); font: 16px/1.6 var(--body); letter-spacing: normal;
  text-transform: none; white-space: normal; text-align: left;
}
body[data-page] .help-content :is(.record, .prose, .notes) { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 12px; margin: 0; }
body[data-page] .help-content :is(.note, .does, .hint, .caption, .say) { color: var(--ink); font-size: 15px; line-height: 1.55; letter-spacing: normal; text-transform: none; }
body[data-page] .help-content .does { display: block; font-family: var(--body); }
body[data-page] .help-content .mon-sees { color: var(--ink); font: 16px/1.6 var(--body); }
body[data-page] .help-content button.note { width: 100%; margin: 0; }
body[data-page] .help-content :is(.scene-title, .deck, .lede, #subtitle, #step-caption, footer):last-child { margin-bottom: 0; }
body[data-page] .help-content .subtitle.eqline { overflow-x: auto; white-space: nowrap; }

/* Tabular evidence and code use the same plate in a reading popover or a room. */
.table-wrap, .tablewrap { max-width: 100%; overflow-x: auto; margin: 0; border: 1px solid var(--hair); border-radius: 6px; background: var(--plate); }
body[data-page] table { border-collapse: collapse; color: var(--ink); font-size: 14px; line-height: 1.45; font-variant-numeric: tabular-nums; }
body[data-page] th, body[data-page] td { padding: 8px 10px; border-bottom: 1px solid var(--hair); text-align: left; vertical-align: top; }
body[data-page] th { color: var(--soft); font: 600 15px/1.3 var(--display); letter-spacing: .04em; text-transform: uppercase; }
body[data-page] tr:last-child td { border-bottom: 0; }
body[data-page] td[align="right"], body[data-page] th[align="right"] { text-align: right; }
.help-content table { min-width: 0; width: max-content; max-width: 1500px; }
.help-content .table-wrap { margin-block: 12px; }
.prose code, .help-content code { font: .85em/1.4 var(--mono); background: var(--paper); border: 1px solid var(--hair); border-radius: 3px; padding: 1px 4px; }
.prose pre, .help-content pre { overflow: auto; background: var(--paper); border: 1px solid var(--hair); border-radius: 5px; padding: 12px; }
.prose pre code, .help-content pre code { padding: 0; border: 0; background: none; }
body[data-page] .chalk, body[data-page] .chalk table { color: var(--chalk); }
body[data-page] .chalk h5, body[data-page] .chalk .eq { color: #ffffff; }
body[data-page] .chalk th, body[data-page] .chalk td { border-color: var(--chalk-rule); }
body[data-page] .chalk th { color: var(--chalk-dim); }
body[data-page] .help-content .chalk .say { color: var(--chalk-dim); }
body[data-page] .help-content .chalk h5 { color: #ffffff; }

/* The exchange room adopts the same interface while its canvas remains a screen. */
body[data-piece="language-between"] > header { max-width: 1320px; margin-inline: auto; padding: 22px 20px 18px; }
body[data-piece="language-between"] h1 { font: 800 clamp(38px, 6vw, 60px)/.95 var(--display); letter-spacing: .01em; text-transform: uppercase; }
body[data-piece="language-between"] .workspace { max-width: 1280px; margin-inline: auto; border: 1px solid var(--screen-edge); border-radius: 6px; background: var(--screen); }
body[data-piece="language-between"] .legend { --a: #92d7dd; --b: #eeb081; }
body[data-piece="language-between"] .drawer { background: var(--plate); color: var(--ink); border-color: var(--hair); box-shadow: -12px 0 35px rgb(0 0 0 / 18%); }
body[data-piece="language-between"] .drawer h2 { font: 800 28px/1 var(--display); text-transform: uppercase; }
body[data-piece="language-between"] .control label, body[data-piece="language-between"] .switch { font: 13px/1.4 var(--mono); }
body[data-piece="language-between"] .control output { color: var(--soft); }
body[data-piece="language-between"] .tools button, body[data-piece="language-between"] .presets button { background: var(--plate); color: var(--ink); }
body[data-piece="language-between"] .presets button.selected { background: var(--ink); color: var(--plate); border-color: var(--ink); }
body[data-piece="language-between"] .presets button { font-size: 13px; padding: 6px 9px; }
body[data-piece="language-between"] .legend, body[data-piece="language-between"] .scene-title,
body[data-piece="language-between"] .status, body[data-piece="language-between"] .status small,
body[data-piece="language-between"] .status .trace { color: #e5e7e2; }
body[data-piece="language-between"] .scene-title { font: 600 25px/1.1 var(--display); text-transform: uppercase; font-style: normal; }
body[data-piece="language-between"] .measure b { font: 800 29px/1 var(--display); }
body[data-piece="language-between"] > footer { max-width: 1320px; margin-inline: auto; color: var(--mid); }
body[data-piece="language-between"] dialog { border-color: var(--mid); background: var(--plate); color: var(--ink); border-radius: 6px; }
body[data-piece="language-between"] dialog h2 { font-family: var(--display); }
body[data-piece="language-between"] dialog p { font-family: var(--body); }
body[data-piece="language-between"] .lexicon input { text-transform: none; }

@media (max-width: 1000px) {
  .pieces { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-piece="language-between"] .workspace { margin-inline: 12px; }
}
@media (max-width: 640px) {
  body, body[data-page] { font-size: 16px; }
  header.site, footer.site, body:not([data-page="interactive"]) > main { padding-inline: 16px; }
  header.site { padding-block: 18px 14px; }
  header.site .home { font-size: 22px; }
  header.site nav { gap: 14px; }
  body[data-page] .wrap { padding-inline: 16px; }
  .pieces { grid-template-columns: minmax(0, 1fr); gap: 15px; }
  .pieces > li { padding: 14px; }
  body[data-page] h1 { font-size: 42px; }
  body[data-page] .help-heading h2 { font-size: 25px; }
  nav.piece { gap: 6px; }
  nav.piece a { font-size: 14px; padding: 6px 10px; }
  .help-content[popover], .help-content { width: calc(100vw - 24px); max-width: calc(100vw - 24px); max-height: 75svh; padding: 18px; font-size: 16px; }
  body[data-page] .help-trigger { min-width: 32px; min-height: 32px; }
  .model-choice { grid-template-columns: minmax(0, 1fr) 32px; }
  body[data-page] .model-choice > .help-trigger { width: 32px; height: 32px; min-width: 32px; min-height: 32px; }
  .help-heading { gap: 12px; }
  body[data-piece="language-between"] > header { padding: 18px 16px 14px; gap: 12px; }
  body[data-piece="language-between"] h1 { font-size: 36px; }
  body[data-piece="language-between"] .tabs button { font-size: 15px; padding: 6px 8px; }
  body[data-piece="language-between"] .workspace { margin-inline: 8px; }
  body[data-piece="language-between"] .tools button { font-size: 13px; padding: 6px 9px; }
  body[data-piece="language-between"] .presets button { font-size: 11px; padding: 5px 7px; }
  body[data-piece="language-between"] .scene-title { font-size: 23px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}