/* ARQ IQ in ARQ 360's look (Sage, Nov 3 2026: "i thought we agreed on making this more similar to ARQ 360 and the other
   arq styles"). Paper and ink by day, near black by night, as the device is set; Anton headings, Inter Tight words, Spline
   Sans Mono labels; burnt orange for "now"; no box where a line will do; the one dark block on Today is what is next.
   It is the app's only look: js/theme.js puts the class "paper" on <html> beside Graphite's data-theme, whose layout
   (css/studio.css) it builds on. The field is not restyled: js/field.js keeps Graphite's field, and the marks drawn over
   it (scoreboard, callouts, the player card) keep their own fonts and colours. Colours are ARQ 360's (prototype/src/app.css,
   the site look of Oct 21); the fonts are its files (assets/fonts, SIL Open Font License). */
@font-face { font-family: "Anton"; src: url("../assets/fonts/anton-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url("../assets/fonts/inter-tight-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Spline Sans Mono"; src: url("../assets/fonts/spline-sans-mono-latin.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }

/* ---------- colours: day ---------- */
:root.paper {
  --display: "Anton", Impact, "Arial Narrow Bold", sans-serif;
  --sans: "Inter Tight", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --mono: "Spline Sans Mono", ui-monospace, Menlo, monospace;
  --brand: Archivo, "Arial Black", Arial, sans-serif;
  --page-sans: "Inter Tight", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --field-sans: Archivo, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --field-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --pop: #a5501f; --ok: #3e6b26;
  --bg: #f2efe8; --card: #f8f6f1; --raise: #ebe7de; --hair: #d9d4c9; --line2: #bdb7ab; --hover: rgba(17, 18, 20, .05);
  --ink: #111214; --ink2: #2c2b28; --muted: #6b6860; --dim: #8a8780;
  --kick: #6b6860; --accent-text: #111214; --brand-iq: #8a8780; --headline2: #8a8780; --focus: #111214;
  --danger: #a5501f; --miss: #a5501f; --note-bg: #ebe7de; --note-bd: #d9d4c9;
  --btn-dark-bg: #111214; --btn-dark-ink: #f2efe8; --ready-bd: #d9d4c9;
  --pip-ok-bg: #111214; --pip-ok-bd: #111214; --pip-ok-ink: #f2efe8; --pip-miss-bg: transparent; --pip-miss-bd: #a5501f;
  --inspect-bg: #f8f6f1; --inspect-ink: #111214; --sheet-bg: #f2efe8;
  /* the dark block: Today's next lesson, a chosen path, a lesson's picture */
  --hero-bg: #0b0b0c; --on-hero: #f2efe8; --on-hero2: #c9c6be; --on-hero3: #a7a49c; --hero-line: rgba(242, 239, 232, .3);
  /* the lesson player: words and controls on the paper */
  --p-bg: #f2efe8; --p-ink: #111214; --p-sub: #6b6860; --p-body: #2c2b28; --p-meta: #6b6860; --p-accent: #111214;
  --p-line: #d9d4c9; --p-line2: #bdb7ab; --p-dock-line: transparent;
  --p-track: #d9d4c9; --p-fill: #111214; --p-timer: #d9d4c9; --p-timer-fill: #111214;
  --p-choice: #f8f6f1; --p-show-me: #6b6860; --p-off: #8a8780;
  --p-main-bg: #111214; --p-main-ink: #f2efe8; --p-btn-bg: #111214; --p-btn-ink: #f2efe8; --p-btn-icon: #f2efe8; --p-pick-bg: #111214; --p-pick-ink: #f2efe8;
  --right-bg: rgba(62, 107, 38, .08); --right-bd: #3e6b26; --right-ic: #3e6b26;
  --wrong-bg: rgba(165, 80, 31, .08); --wrong-bd: #a5501f; --wrong-ic: #a5501f;
  --mark-ok: #111214; --mark-ok-ink: #f2efe8; --mark-bad: #a5501f; --mark-bad-ink: #f2efe8; --mark-info: #e6e1d6; --mark-info-ink: #111214;
  --tab-bg: #f2efe8; --tab-bd: #d9d4c9; --tab-ink: #6b6860;
  --lift: none; --card-lift: none; --dark-lift: none; --dark-edge: transparent; --ctl-shadow: none; --choose: #111214;
  color-scheme: light;
}
/* ---------- colours: night (ARQ 360's night) ---------- */
:root.paper[data-theme="graphite-night"] {
  --pop: #e29a6f; --ok: #a2c76d;
  --bg: #0b0b0c; --card: #121214; --raise: #1a1a1d; --hair: #26262a; --line2: #3a3a3f; --hover: rgba(242, 239, 232, .06);
  --ink: #f2efe8; --ink2: #dcd9d1; --muted: #9a978f; --dim: #7a776f;
  --kick: #9a978f; --accent-text: #f2efe8; --brand-iq: #7a776f; --headline2: #7a776f; --focus: #f2efe8;
  --danger: #e29a6f; --miss: #e29a6f; --note-bg: #1a1a1d; --note-bd: #26262a;
  --btn-dark-bg: #f2efe8; --btn-dark-ink: #0b0b0c; --ready-bd: #26262a;
  --pip-ok-bg: #f2efe8; --pip-ok-bd: #f2efe8; --pip-ok-ink: #0b0b0c; --pip-miss-bg: transparent; --pip-miss-bd: #e29a6f;
  --inspect-bg: #1a1a1d; --inspect-ink: #f2efe8; --sheet-bg: #121214;
  --hero-bg: #1a1a1d; --on-hero: #f2efe8; --on-hero2: #c9c6be; --on-hero3: #a7a49c; --hero-line: rgba(242, 239, 232, .3);
  --p-bg: #0b0b0c; --p-ink: #f2efe8; --p-sub: #9a978f; --p-body: #dcd9d1; --p-meta: #9a978f; --p-accent: #f2efe8;
  --p-line: #26262a; --p-line2: #3a3a3f; --p-dock-line: transparent;
  --p-track: #26262a; --p-fill: #f2efe8; --p-timer: #26262a; --p-timer-fill: #f2efe8;
  --p-choice: #121214; --p-show-me: #9a978f; --p-off: #7a776f;
  --p-main-bg: #f2efe8; --p-main-ink: #0b0b0c; --p-btn-bg: #f2efe8; --p-btn-ink: #0b0b0c; --p-btn-icon: #0b0b0c; --p-pick-bg: #f2efe8; --p-pick-ink: #0b0b0c;
  --right-bg: rgba(162, 199, 109, .1); --right-bd: #a2c76d; --right-ic: #a2c76d;
  --wrong-bg: rgba(226, 154, 111, .1); --wrong-bd: #e29a6f; --wrong-ic: #e29a6f;
  --mark-ok: #f2efe8; --mark-ok-ink: #0b0b0c; --mark-bad: #e29a6f; --mark-bad-ink: #0b0b0c; --mark-info: #26262a; --mark-info-ink: #f2efe8;
  --tab-bg: #0b0b0c; --tab-bd: #26262a; --tab-ink: #9a978f;
  --lift: none; --card-lift: none; --dark-lift: none; --dark-edge: transparent; --ctl-shadow: none; --choose: #f2efe8;
  color-scheme: dark;
}
.paper body { background: var(--bg); color: var(--ink); font-family: var(--sans); }
.paper ::selection { background: var(--ink); color: var(--bg); }

/* ---------- the field and everything drawn over it keep their own type ---------- */
.paper .stage, .paper .mini, .paper .thumb { --sans: var(--field-sans); --mono: var(--field-mono); }

/* ---------- type ---------- */
.paper .kick, .paper .meta { font: 500 10.5px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--kick); }
.paper h1, .paper h2, .paper h3 { letter-spacing: 0; }
.paper .hero-title { font: 400 clamp(54px, 15vw, 96px)/.9 var(--display); letter-spacing: -.005em; text-transform: uppercase; margin: 10px 0 18px; text-wrap: balance; }
.paper .hero-title span { color: var(--headline2); }
.paper .subject-title, .paper .acct-title { font: 400 clamp(44px, 12vw, 76px)/.92 var(--display); letter-spacing: -.005em; text-transform: uppercase; text-wrap: balance; }
.paper .lead { font: 400 17px/1.5 var(--sans); color: var(--ink2); }
.paper .pill { border: 1px solid var(--ink); background: transparent; color: var(--ink); font: 500 10.5px/1 var(--mono); letter-spacing: .12em; padding: 9px 13px; }
.paper .crumb { font: 500 11px/1 var(--mono); letter-spacing: .12em; color: var(--muted); }
.paper .linkbtn { color: var(--ink); font-weight: 500; }

/* the logo: ARQ 360's three arcs, ARQ in Archivo, then IQ small in mono, as ARQ 360 shows 360° */
.paper .wordmark { display: inline-flex; align-items: center; gap: 7px; font: 700 19px/1 var(--brand); letter-spacing: -.02em; color: var(--ink); }
.paper .wordmark::before { content: ""; flex: 0 0 auto; width: 34px; height: 15px; background: currentColor;
  -webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='10.88 24 90.24 40'%3E%3Cg fill='none' stroke='%23000'%3E%3Cpath d='M14.64 60 C55.06 20 76.68 20 97.36 60' stroke-width='3.4'/%3E%3Cpath d='M14.64 60 C54.12 29 76.68 29 97.36 60' stroke-width='2.8'/%3E%3Cpath d='M14.64 60 C53.18 38 76.68 38 97.36 60' stroke-width='2.2'/%3E%3C/g%3E%3C/svg%3E");
  mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='10.88 24 90.24 40'%3E%3Cg fill='none' stroke='%23000'%3E%3Cpath d='M14.64 60 C55.06 20 76.68 20 97.36 60' stroke-width='3.4'/%3E%3Cpath d='M14.64 60 C54.12 29 76.68 29 97.36 60' stroke-width='2.8'/%3E%3Cpath d='M14.64 60 C53.18 38 76.68 38 97.36 60' stroke-width='2.2'/%3E%3C/g%3E%3C/svg%3E"); }
.paper .wordmark b { font: 400 11px/1 var(--mono); letter-spacing: .08em; color: var(--brand-iq); padding-left: 2px; }
.paper .acct-btn { background: transparent; border: 1px solid var(--ink); box-shadow: none; width: 38px; height: 38px; color: var(--ink); }

/* ---------- buttons: mono capitals, round, the wide ones carry an arrow ---------- */
.paper .btn { font: 500 11.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; min-height: 48px; padding: 0 20px; background: var(--ink); color: var(--bg); box-shadow: none; }
.paper .btn.dark { background: var(--btn-dark-bg); color: var(--btn-dark-ink); }
.paper .btn.ghost, .paper .btn.line { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.paper .btn.small { min-height: 40px; padding: 0 16px; font-size: 10.5px; }
.paper .btn.danger { background: var(--pop); color: var(--bg); }
.paper .btn svg { display: none; }
.paper :is(.hero-card .row .btn, .reps-card .row .btn, .path-go .btn, .pg-card .row .btn) { justify-content: space-between; gap: 18px; }
.paper :is(.hero-card .row .btn, .reps-card .row .btn, .path-go .btn, .pg-card .row .btn)::after { content: "\2192"; font: 400 16px/1 var(--sans); letter-spacing: 0; }

/* ---------- the tab bar: ARQ 360's, flat along the bottom; words under a small hollow node, now ringed in burnt orange ---------- */
.paper .tabbar { left: 0; right: 0; bottom: 0; max-width: none; height: auto; margin: 0; border-radius: 0; padding: 0 6px var(--safe-b, 0px); background: var(--tab-bg); border: 0; border-top: 1px solid var(--tab-bd); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.paper .tabbar nav { height: auto; gap: 0; max-width: 560px; margin: 0 auto; }
.paper .tabbar .tab-pill, .paper .tabbar .tab-ico, .paper .tabbar button i { display: none; }
.paper .tabbar button { border-radius: 0; height: auto; padding: 11px 0 14px; gap: 8px; font: 500 12.5px/1 var(--sans); letter-spacing: 0; text-transform: none; color: var(--tab-ink); }
.paper .tabbar button::before { content: ""; display: block; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid transparent; }
.paper .tabbar button[aria-current="true"] { color: var(--ink); font-weight: 600; }
.paper .tabbar button[aria-current="true"]::before { border-color: var(--pop); }
.paper .page { padding-bottom: calc(92px + var(--safe-b, 0px)); }

/* ---------- Today ---------- */
/* the one dark block: what is next, like ARQ 360's next session */
.paper .hero-card { background: var(--hero-bg); color: var(--on-hero); border: 0; border-radius: 18px; box-shadow: none; }
.paper .hero-card .kick { color: var(--on-hero3); }
.paper .hero-card h2 { font: 400 34px/1 var(--display); text-transform: uppercase; letter-spacing: 0; margin: 8px 0; text-wrap: balance; }
.paper .hero-card p { color: var(--on-hero2); font: 400 15px/1.45 var(--sans); }
.paper .hero-card .meta { color: var(--on-hero3); }
.paper .hero-card .row .btn { background: var(--on-hero); color: #111214; }
/* a new player's first Today: the paths, outlined in paper on the dark block */
.paper .hero-card.choose .path-pick { background: transparent; color: var(--on-hero); border: 1px solid var(--hero-line); justify-content: space-between; }
.paper .hero-card.choose .path-pick::after { content: none; }
.paper .hero-card.choose .path-pick b { font: 500 15px/1 var(--sans); letter-spacing: 0; text-transform: none; }
.paper .hero-card.choose .path-pick span { font: 500 10px/1 var(--mono); letter-spacing: .12em; color: var(--on-hero3); opacity: 1; }
.paper .hero-card.choose .path-pick:hover { border-color: var(--on-hero); }

/* no box where a line will do: sections sit on the page under a rule */
.paper :is(.reps-card, .pg-card) { background: none; border: 0; border-top: 1px solid var(--line2); border-radius: 0; padding: 16px 0 6px; box-shadow: none; margin-top: 22px; }
.paper :is(.reps-card, .pg-card) h3 { font: 400 26px/1.02 var(--display); text-transform: uppercase; letter-spacing: 0; }
.paper :is(.reps-card, .pg-card) p { font: 400 14.5px/1.45 var(--sans); color: var(--muted); }
.paper .pg-meter { height: 3px; background: var(--hair); }
.paper .pg-meter i { background: var(--ink); }
.paper .pips i { border: 1px solid var(--line2); color: var(--muted); font: 500 9.5px/1 var(--mono); }
.paper .pips i.ok { background: var(--pip-ok-bg); border-color: var(--pip-ok-bd); color: var(--pip-ok-ink); }
.paper .pips i.miss { background: var(--pip-miss-bg); border-color: var(--pip-miss-bd); color: var(--miss); }
.paper .section-h { border-top: 1px solid var(--line2); padding-top: 16px; margin: 26px 0 8px; flex-wrap: wrap; gap: 4px 12px; }
.paper .section-h h2 { font: 400 30px/1 var(--display); text-transform: uppercase; letter-spacing: 0; }

/* the subjects: a list under rules, two across on a phone */
.paper .subjects { gap: 0 18px; }
.paper .subject { background: none; border: 0; border-top: 1px solid var(--hair); border-radius: 0; padding: 14px 0 12px; min-height: 0; box-shadow: none; gap: 6px; }
.paper .subject.ready { border-color: var(--hair); }
.paper .subject .kick { font-size: 9.5px; color: var(--kick); }
.paper .subject h3 { font: 400 21px/1.02 var(--display); text-transform: uppercase; letter-spacing: 0; color: var(--ink); }
.paper .subject p { font: 400 13.5px/1.4 var(--sans); color: var(--muted); }
.paper .subject .prog { color: var(--dim); font-family: var(--mono); }
.paper .subject .prog .track { background: var(--hair); }
.paper .subject .prog .track i { background: var(--ink); }
.paper .subject:not(:disabled):hover h3 { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* ---------- Learn and a path ---------- */
/* each path a paper tile; the learner's own path is the dark block */
.paper .path-card { background: var(--card); color: var(--ink); border: 1px solid var(--hair); border-radius: 16px; box-shadow: none; }
.paper .path-card .kick { color: var(--kick); }
.paper .path-card h3 { font: 400 34px/1 var(--display); text-transform: uppercase; letter-spacing: 0; }
.paper .path-card p { font: 400 13.5px/1.4 var(--sans); color: var(--muted); }
.paper .path-card .bars { color: var(--ink); }
.paper .path-card .state { font-family: var(--mono); color: var(--ink); }
.paper .path-card.mine { background: var(--hero-bg); color: var(--on-hero); border-color: var(--hero-bg); box-shadow: none; }
.paper .path-card.mine :is(.kick, .state) { color: var(--on-hero3); }
.paper .path-card.mine p { color: var(--on-hero2); }
.paper .path-card.mine .bars { color: var(--on-hero); }
.paper .path-card.soon .state { color: var(--dim); }
.paper .path-card:not(.soon):hover { border-color: var(--ink); }
.paper .path-for { color: var(--muted); }
.paper .path-list { border-top: 1px solid var(--ink); }
.paper .path-list li button { border-bottom: 1px solid var(--hair); }
.paper .path-list li button:hover { background: var(--hover); }
.paper .path-list .num { font: 400 22px/1 var(--display); color: var(--dim); }
.paper .path-list b { font: 600 17px/1.2 var(--sans); letter-spacing: -.01em; }
.paper .path-list small { font: 400 13px/1.35 var(--sans); color: var(--muted); }
.paper .path-list .st { font: 500 10px/1 var(--mono); letter-spacing: .12em; color: var(--muted); }
.paper .path-list .st.done { color: var(--ink); }
.paper .path-note { font: 400 13.5px/1.45 var(--sans); color: var(--muted); }

/* ---------- a subject's page ---------- */
.paper .level-h, .paper .chapter-h { border-top: 1px solid var(--ink); }
.paper .level-h .lv-name { font: 400 24px/1 var(--display); text-transform: uppercase; letter-spacing: 0; }
.paper .level-h .lv-verb, .paper .chapter-h .ch-n { font-family: var(--mono); font-weight: 500; color: var(--muted); }
.paper .chapter-h h2 { font: 400 24px/1.05 var(--display); text-transform: uppercase; letter-spacing: 0; }
.paper .level-h p, .paper .chapter-h p { font-family: var(--sans); color: var(--muted); }
/* a lesson: its picture is the dark block, the words sit on the page under it */
.paper .lesson-card { background: none; color: var(--ink); border: 0; border-radius: 0; box-shadow: none; overflow: visible; gap: 0; }
.paper .lesson-card .thumb { border-radius: 16px; overflow: hidden; background: var(--hero-bg); }
.paper .lesson-card .body { padding: 12px 2px 6px; gap: 5px; }
.paper .lesson-card .n { font: 500 10px/1 var(--mono); letter-spacing: .12em; color: var(--muted); }
.paper .lesson-card h3 { font: 400 24px/1.02 var(--display); text-transform: uppercase; letter-spacing: 0; color: var(--ink); }
.paper .lesson-card p { font: 400 14px/1.4 var(--sans); color: var(--muted); }
.paper .lesson-card .meta { color: var(--muted); border-top: 1px solid var(--hair); padding-top: 9px; }
.paper .lesson-card .meta .go { color: var(--ink); }
.paper .lesson-card:hover h3 { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
/* Practice and Explore: rows under a rule, each with its arrow */
.paper .tools { gap: 0 18px; }
.paper .tool { background: none; border: 0; border-top: 1px solid var(--line2); border-radius: 0; padding: 14px 0; box-shadow: none; position: relative; padding-right: 26px; }
.paper .tool::after { content: "\2192"; position: absolute; right: 2px; top: 16px; font: 400 18px/1 var(--sans); color: var(--ink); }
.paper .tool h3 { font: 400 24px/1 var(--display); text-transform: uppercase; letter-spacing: 0; }
.paper .tool p { font: 400 13.5px/1.4 var(--sans); color: var(--muted); }

/* ---------- the lesson player: the field stays as it is; the words and controls around it take the paper ---------- */
.paper .player { background: var(--p-bg); }
.paper .player .bar .iconbtn { background: transparent; border: 1px solid var(--ink); color: var(--ink); box-shadow: none; }
.paper .player .ttl b { font: 400 22px/1.02 var(--display); text-transform: uppercase; letter-spacing: 0; }
.paper .player .ttl small, .paper .seg-name { font: 500 10px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--p-meta); }
.paper .segs .seg { height: 3px; }
.paper .player .stage { box-shadow: none; }
.paper .card-over .sc h2 { font: 400 30px/1 var(--display); text-transform: uppercase; letter-spacing: 0; }
.paper .card-over .sc .kick { color: var(--on-hero3); }
.paper .say { font: 600 21px/1.3 var(--sans); letter-spacing: -.01em; }
.paper .sub { font: 400 15px/1.45 var(--sans); }
.paper .prompt { font: 600 19px/1.28 var(--sans); letter-spacing: -.01em; }
.paper .prompt small { font: 400 14px/1.4 var(--sans); }
/* the controls: a clean row on the paper (the dark band behind them belonged to the dark player) */
.paper .player .dock .controls, .paper .player .dock .row-actions { background: var(--p-bg); box-shadow: 0 -14px 12px -4px var(--p-bg), 0 40px 0 24px var(--p-bg); }
.paper .controls { border: 0; border-radius: 0; padding: 6px 0; gap: 14px; }
.paper .controls .iconbtn { border: 1px solid var(--p-ink); color: var(--p-ink); background: transparent; box-shadow: none; }
.paper .controls .main { background: var(--p-main-bg); color: var(--p-main-ink); box-shadow: none; }
.paper .controls .speed { border: 1px solid var(--p-ink); color: var(--p-ink); background: transparent; font: 500 11px/1 var(--mono); letter-spacing: .06em; }
/* answers */
.paper .choice { background: var(--p-choice); border: 1px solid var(--p-line2); border-radius: 14px; font: 600 15px/1.25 var(--sans); color: var(--p-ink); }
.paper .choice:not(:disabled):hover { border-color: var(--p-ink); }
.paper .choice.right { background: var(--right-bg); border-color: var(--right-bd); }
.paper .choice.wrong { background: var(--wrong-bg); border-color: var(--wrong-bd); }
.paper .choice.show-me { background: transparent; border: 1px dashed var(--p-line2); color: var(--p-show-me); font-weight: 500; }
.paper .verdict h3 { font: 600 18px/1.25 var(--sans); letter-spacing: -.01em; }
.paper .verdict p { font: 400 14.5px/1.45 var(--sans); }
.paper .verdict .mark { font-family: var(--sans); }
.paper .player .row-actions .btn { min-height: 52px; border-radius: 26px; font-size: 11.5px; box-shadow: none; }
.paper .player .row-actions .btn:not(.line) { justify-content: space-between; }
.paper .player .btn.line, .paper .player .row-actions .btn.line { background: transparent !important; color: var(--p-ink) !important; border: 1px solid var(--p-ink) !important; font-size: 11.5px; font-weight: 500; }
.paper .player .btn .go { display: block; color: var(--p-btn-icon); }
.paper .player .dock .kick.light, .paper .related .kick.light { color: var(--p-meta); font-size: 10.5px; }
.paper .goahead h3 { font: 400 26px/1.02 var(--display); text-transform: uppercase; letter-spacing: 0; }
.paper .goahead p { font: 400 15px/1.45 var(--sans); }
.paper .done-card h3 { font: 400 34px/1 var(--display); text-transform: uppercase; letter-spacing: 0; }
.paper .done-card p { font: 400 16px/1.45 var(--sans); }
.paper .related { gap: 0; }
.paper .related .rel { background: none; border: 0; border-top: 1px solid var(--p-line); border-radius: 0; padding: 12px 24px 12px 0; position: relative; }
.paper .related .rel::after { content: "\2192"; position: absolute; right: 2px; top: 13px; font: 400 16px/1 var(--sans); color: var(--p-ink); }
.paper .related .rel b { font: 600 16px/1.25 var(--sans); }
.paper .related .rel small { font: 400 13.5px/1.35 var(--sans); color: var(--p-sub); }
.paper .tap-cue, .paper .tap-said, .paper .streak { font: 500 10.5px/1 var(--mono); letter-spacing: .12em; color: var(--p-meta); }
.paper .facts p { font: 400 15px/1.45 var(--sans); }
/* Practice and Explore's switches */
.paper .picker-label { font: 500 10px/1.3 var(--mono); letter-spacing: .12em; color: var(--p-meta); }
.paper .picker button { background: transparent; border: 1px solid var(--p-line2); color: var(--p-ink); font: 500 14px/1 var(--sans); }
.paper .picker button[aria-pressed="true"] { background: var(--p-pick-bg); color: var(--p-pick-ink); border-color: var(--p-pick-bg); }
/* a player's note, tapped on the field */
.paper .inspect { background: var(--inspect-bg); color: var(--inspect-ink); border: 1px solid var(--hair); border-radius: 12px; box-shadow: 0 10px 28px rgba(0, 0, 0, .28); font-family: var(--page-sans); }
.paper .inspect b { font: 600 15px/1.25 var(--page-sans); }
.paper .stage-btn { font: 500 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
/* a phone on its side: the words' column takes the paper's line */
@media (orientation: landscape) and (max-height: 520px) { .paper .player .dock { border-left: 1px solid var(--p-line); } }

/* ---------- the lesson menu and other sheets ---------- */
.paper .sheet-veil { background: rgba(11, 11, 12, .5); }
.paper .sheet { background: var(--sheet-bg); color: var(--ink); border-top: 1px solid var(--hair); border-radius: 18px 18px 0 0; }
.paper .sheet h2 { font: 400 32px/1 var(--display); text-transform: uppercase; letter-spacing: 0; }
.paper .sheet h4 { font: 500 10.5px/1.3 var(--mono); letter-spacing: .12em; color: var(--muted); }
.paper .sheet p, .paper .sheet li { font: 400 15px/1.5 var(--sans); color: var(--ink2); }
.paper .menu-list button { font: 500 16px/1.25 var(--sans); border-bottom: 1px solid var(--hair); }
.paper .menu-list button:hover { background: var(--hover); }

/* ---------- account (getting in, as ARQ 360's: fields on a line, not in a box) ---------- */
.paper .acct-lede { font: 400 16px/1.5 var(--sans); color: var(--ink2); }
.paper .acct-h { font: 400 26px/1 var(--display); text-transform: uppercase; letter-spacing: 0; }
.paper .acct-h.danger { color: var(--pop); }
.paper .acct-form label { font: 500 14px/1.3 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink2); }
.paper .acct-form input { background: transparent; border: 0; border-bottom: 1px solid var(--line2); border-radius: 0; padding: 10px 0; min-height: 44px; font: 400 17px/1.4 var(--sans); color: var(--ink); box-shadow: none; }
.paper .acct-form input:focus { outline: 0; border-bottom-color: var(--ink); box-shadow: 0 1px 0 var(--ink); }
.paper .acct-form .hint { font: 400 13px/1.4 var(--sans); color: var(--muted); }
.paper .acct-msg { color: var(--pop); }
.paper .acct-msg.ok { color: var(--ok); }
.paper .acct-card { background: none; border: 0; border-top: 1px solid var(--line2); border-radius: 0; padding: 16px 0 6px; margin: 6px 0 10px; }
.paper .acct-card.note { background: none; border: 0; border-left: 2px solid var(--ink); border-radius: 0; padding: 4px 0 4px 14px; }
.paper .acct-card p { font: 400 15px/1.5 var(--sans); }
.paper .acct-who .avatar { display: none; }
.paper .acct-who b { font: 400 24px/1 var(--display); text-transform: uppercase; letter-spacing: 0; }
.paper .acct-row { border-top: 1px solid var(--hair); }
.paper .avatar { background: var(--ink); color: var(--bg); font-family: var(--sans); }

/* ---------- Your progress, plans and the paywall (css/platform.css) ---------- */
.paper :is(.pg, .pl) { --pg-accent: var(--ink); --pg-kick: var(--kick); }
.paper .pg-tile { background: var(--card); border: 1px solid var(--hair); border-radius: 14px; box-shadow: none; }
.paper .pg-tile b { font: 400 clamp(32px, 8vw, 44px)/1 var(--display); letter-spacing: 0; }
.paper .pg-tile small { font-family: var(--sans); }
.paper .pg-range { background: transparent; border: 1px solid var(--ink); }
.paper .pg-range button { font: 500 10.5px/1 var(--mono); letter-spacing: .12em; }
.paper .pg-range button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.paper .pg-chart { background: none; border: 0; border-top: 1px solid var(--line2); border-radius: 0; padding: 16px 0 8px; }
.paper .pg-chart h2 { font: 400 24px/1 var(--display); text-transform: uppercase; letter-spacing: 0; }
.paper .pg-chart figcaption span { font-family: var(--sans); }
.paper .pg-dot { stroke: var(--bg); }
.paper .pg-tip { background: var(--ink); color: var(--bg); }
.paper .pg-tip b { font: 400 20px/1 var(--display); letter-spacing: 0; }
.paper .pg-table summary { color: var(--ink); }
.paper .pg-table table { background: none; border: 0; border-top: 1px solid var(--ink); border-radius: 0; }
.paper .pg-h { font: 400 26px/1 var(--display); text-transform: uppercase; letter-spacing: 0; }
.paper .pg-recent .num { color: var(--dim); }
.paper .pl-card { background: none; border: 0; border-top: 1px solid var(--line2); border-radius: 0; padding: 16px 0 6px; }
.paper .pl-head { font: 400 26px/1.02 var(--display); text-transform: uppercase; letter-spacing: 0; }
.paper .pl-plan { background: var(--card); border: 1px solid var(--hair); border-radius: 14px; }
.paper .pl-plan b { font: 400 36px/1 var(--display); letter-spacing: 0; }
.paper .pl-plan:not(:disabled):hover { border-color: var(--ink); }
.paper .pl-test { background: none; border: 1px dashed var(--line2); border-radius: 0; color: var(--ink2); }

/* ---------- the words next to the play (js/words.js): on the field, a paper card in day and night alike ---------- */
.paper .words .say { font-family: var(--page-sans); font-weight: 600; letter-spacing: -.01em; }
.paper .words .sub { font-family: var(--page-sans); }
.paper .player.words-card .words { background: #f2efe8; color: #111214; }
.paper .player.words-card .sub { color: #6b6860; }
.paper .player.words-card .timer { background: #d9d4c9; }
.paper .player.words-card .timer i { background: #111214; }

/* ---------- chapters (Sage, Nov 3 2026): each level's eight chapters, each opening with why it matters ---------- */
.chapter-h { display: grid; gap: 5px; width: 100%; margin: 30px 0 10px; padding: 0; text-align: left; background: none; border: 0; color: inherit; cursor: pointer; }
.chapter-h b { font: 400 28px/1 var(--display); text-transform: uppercase; letter-spacing: 0; }
.chapter-h small { font: 400 15px/1.45 var(--sans); color: var(--ink2); max-width: 62ch; }
.chapter-h:hover b { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.chapter-h:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.chapter-h.next { margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--hair); }
.chapter-end { margin-top: 14px; padding: 14px 0 4px; border-top: 1px solid var(--p-line); display: grid; gap: 6px; }
.chapter-end p { margin: 0; font: 400 15px/1.45 var(--sans); color: var(--p-body); }

/* the owner's build board (js/ideas.js) */
.paper .ideas-updated { font: 500 11px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 4px 0 6px; }
.paper .ideas-sec { border-top: 1px solid var(--line2); padding: 16px 0 4px; margin: 8px 0; }
.paper .ideas-head, .paper .ideas-sec > summary { display: flex; align-items: baseline; gap: 10px; list-style: none; cursor: default; }
.paper .ideas-sec > summary { cursor: pointer; }
.paper .ideas-sec > summary::-webkit-details-marker { display: none; }
.paper .ideas-h { font: 400 24px/1 var(--display); text-transform: uppercase; color: var(--ink); }
.paper .ideas-n { font: 600 12px/1 var(--mono); color: var(--muted); }
.paper .ideas-sec.yours .ideas-h { color: var(--pop); }
.paper .ideas-lede { font: 400 14px/1.45 var(--sans); color: var(--muted); margin: 6px 0 4px; }
.paper .ideas-list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 0; }
.paper .idea { padding: 12px 0; border-bottom: 1px solid var(--hair); display: grid; gap: 4px; }
.paper .idea b { font: 600 16px/1.3 var(--sans); color: var(--ink); }
.paper .idea p { margin: 0; font: 400 15px/1.45 var(--sans); color: var(--ink2); max-width: 62ch; }
.paper .idea-meta { font: 500 11px/1.4 var(--mono); letter-spacing: .06em; color: var(--muted); }
.paper .idea-link { font: 600 13px/1.3 var(--sans); color: var(--ink); text-decoration: underline; text-underline-offset: 3px; justify-self: start; }
.paper .ideas-note { font: 400 13px/1.45 var(--sans); color: var(--muted); margin: 18px 0 0; }

/* A lesson's cover (Sage, Nov 5 2026: no more dropping into the middle of a lesson): what it is, what it is about, its parts,
   what helps first, then Start. It sits over the stage and the dock below the bar until the lesson starts (js/app.js lessonCover). */
.paper .player .cover { position: absolute; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-rows: minmax(0, 1fr) auto; background: var(--p-bg); }
.paper .player .cover-in { overflow-y: auto; -webkit-overflow-scrolling: touch; width: 100%; max-width: 660px; margin: 0 auto; box-sizing: border-box;
  padding: 14px max(20px, env(safe-area-inset-right, 0px)) 22px max(20px, env(safe-area-inset-left, 0px)); }
.paper .player .cover .kick { color: var(--p-meta); }
.paper .player .cover h1 { font: 400 40px/0.98 var(--display); text-transform: uppercase; letter-spacing: 0; margin: 8px 0 6px; text-wrap: balance; color: var(--p-ink); }
.paper .player .cover-sub { font: 400 16px/1.4 var(--sans); color: var(--p-sub); margin: 0; }
.paper .player .cover-block { margin-top: 24px; }
.paper .player .cover-block > p { font: 400 16px/1.5 var(--sans); margin: 8px 0 0; color: var(--p-ink); }
.paper .player .cover-parts { list-style: none; margin: 8px 0 0; padding: 0; border-bottom: 1px solid var(--p-line); }
.paper .player .cover-parts button { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: baseline; width: 100%; text-align: left;
  padding: 11px 24px 11px 0; background: none; border: 0; border-top: 1px solid var(--p-line); border-radius: 0; color: var(--p-ink); position: relative; cursor: pointer; }
.paper .player .cover-parts button::after { content: "\25B8"; position: absolute; right: 4px; top: 13px; font: 400 13px/1 var(--sans); color: var(--p-meta); }
.paper .player .cover-parts .n { font: 400 22px/1 var(--display); color: var(--p-meta); }
.paper .player .cover-parts .t { display: grid; gap: 2px; min-width: 0; }
.paper .player .cover-parts b { font: 600 16px/1.25 var(--sans); }
.paper .player .cover-parts small { font: 400 13.5px/1.35 var(--sans); color: var(--p-sub); }
.paper .player .cover-parts li.here button { box-shadow: inset 3px 0 0 var(--p-ink); padding-left: 10px; }
.paper .player .cover-parts li.here .n { color: var(--p-ink); }
.paper .player .cover-parts em { font: 500 10px/1.3 var(--mono); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--p-ink); }
.paper .player .cover .related { display: grid; margin-top: 24px; }
.paper .player .cover .related .kick { margin-bottom: 6px; }
.paper .player .cover-meta { font: 500 10.5px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--p-meta); margin: 22px 0 0; }
.paper .player .cover-go { display: grid; gap: 10px; width: 100%; max-width: 660px; margin: 0 auto; box-sizing: border-box; border-top: 1px solid var(--p-line); background: var(--p-bg);
  padding: 12px max(20px, env(safe-area-inset-right, 0px)) calc(14px + env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px)); }
.paper .player .cover-go .btn { min-height: 52px; border-radius: 26px; font-size: 11.5px; box-shadow: none; justify-content: center; }
@media (orientation: landscape) and (max-height: 520px) { .paper .player .cover h1 { font-size: 30px; } .paper .player .cover-go { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); } }