/*
 * The desktop learner's look (src/cherryfire/shared/style.py and
 * palette.py), restated for the browser. Sizes are the desktop's pixels
 * (Qt points × 4/3) times --s, which is 1px on a desktop window and
 * shrinks on a small screen, as the desktop's fixed sizes would not fit.
 */
@font-face {
  font-family: "Protest Strike";
  src: url(assets/ProtestStrike-Regular.ttf) format("truetype");
  font-display: block;
}
:root {
  /* palette.py */
  --window: #04131A;
  --text: #B9DBFF;
  --blue: #1763B5; --blue-text: #B9DBFF; --blue-sunken: #0F4076; --blue-hover: #3689E2; --blue-pressed: #114A88;
  --magenta: #620636; --magenta-text: #F6D0E5;
  --green: #537E40; --green-sunken: #3A592D;
  --red: #BC102C;
  --graphite: #171E26; --graphite-raised: #222D39; --graphite-hover: #303F50; --graphite-text: #CBDCED;
  --faint: #6F8496;
  --gold: #DEB913;
  --lesson-text: #E8EAF2;
  --beat-open: #537E40; --beat-closed: #BC102C; --beat-past: #675A72;
  --shade: rgba(4, 19, 26, 0.843);
  --display: "Protest Strike", "Arial Rounded MT Bold", system-ui, sans-serif;
  --lesson: "Yu Gothic UI", system-ui, sans-serif;
  /* One desktop pixel. */
  --s: min(1px, calc(100vw / 560), calc(100vh / 520));
  --margin: calc(11 * var(--s));
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; width: 100%; height: 100%; overflow: hidden;
  overscroll-behavior: none; background: var(--window);
}
body {
  position: fixed; inset: 0;
  color: var(--text); font-family: var(--display); font-size: calc(21.33 * var(--s));
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
button, input { font: inherit; color: inherit; }
button {
  touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  background: var(--blue); color: var(--blue-text); border: none; cursor: pointer;
  border-radius: calc(24 * var(--s)); min-height: calc(48 * var(--s)); min-width: calc(160 * var(--s));
  padding: 0 calc(32 * var(--s));
}
button:hover { background: var(--blue-hover); }
button:active { background: var(--blue-pressed); }
button:focus { outline: none; }
button:focus-visible { box-shadow: inset 0 0 0 calc(3 * var(--s)) var(--gold); }
input {
  background: var(--graphite); border: calc(2 * var(--s)) solid var(--blue-sunken); width: 100%;
  border-radius: calc(24 * var(--s)); min-height: calc(48 * var(--s)); padding: 0 calc(20 * var(--s));
  font-size: 16px; /* 16px or more keeps iOS from zooming in */
}
input:focus { outline: none; border-color: var(--blue); }
[hidden] { display: none !important; }
.screen { position: absolute; inset: 0; margin: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.row { display: flex; gap: calc(12 * var(--s)); justify-content: center; flex-wrap: wrap; }
.error { color: var(--red); min-height: 1em; margin: 0; font-size: calc(14.67 * var(--s)); text-align: center; }
.logo { display: block; height: calc(48 * var(--s)); width: auto; user-select: none; -webkit-user-drag: none; }
.big-logo { height: calc(84 * var(--s)); margin: 0 auto; }
.title { font-size: calc(53.33 * var(--s)); }
.heading { font-size: calc(24 * var(--s)); color: var(--blue); font-weight: normal; margin: 0; }

/* Sign in and the password. */
#sign-in, #password {
  display: flex; flex-direction: column; justify-content: center; gap: calc(16 * var(--s));
  width: min(calc(100% - 32px), 400px); margin: 0 auto; position: relative; height: 100%;
}
#sign-in .big-logo, #password .big-logo { margin-bottom: calc(24 * var(--s)); }
#password .row button { flex: 1; min-width: 0; }

/* Home: the logo, then the files as the desktop's rows. */
#files { display: flex; flex-direction: column; padding: 0 var(--margin) var(--margin); }
.menubar { display: flex; gap: 0; min-height: calc(22 * var(--s)); }
.menubar button {
  background: none; min-height: 0; min-width: 0; padding: calc(2 * var(--s)) calc(8 * var(--s));
  border-radius: calc(4 * var(--s)); font-size: max(13px, calc(14.67 * var(--s))); color: var(--text);
}
.menubar button:hover { background: var(--graphite-hover); }
#files .big-logo { margin: calc(4 * var(--s)) auto calc(16 * var(--s)); }
#file-panel {
  flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  background: #031118; padding: calc(8 * var(--s));
}
#file-panel .heading { padding: calc(8 * var(--s)) calc(2 * var(--s)); }
#file-list { list-style: none; padding: 0; margin: 0; }
.file {
  display: grid; grid-template-columns: minmax(0, calc(512 * var(--s))) auto 1fr; column-gap: calc(6 * var(--s));
  align-items: center; border-top: 1px solid var(--blue-sunken); padding: calc(10 * var(--s)) calc(9 * var(--s));
  cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
.file:hover, .file:active { background: var(--blue-sunken); }
.file .name { grid-column: 1 / -1; font-size: calc(24 * var(--s)); overflow-wrap: anywhere; }
.file .about { grid-column: 1 / -1; font-size: calc(14.67 * var(--s)); color: var(--blue); margin: calc(2 * var(--s)) 0 calc(6 * var(--s)); }
.file .bar { width: 100%; min-width: 0; }
.file .percent { font-size: calc(14.67 * var(--s)); color: var(--blue); align-self: start; margin-top: calc(-24 * var(--s)); }
#file-list .empty { color: var(--blue); padding: calc(10 * var(--s)); font-size: calc(18.67 * var(--s)); }

/* Bars: the tempo (blue) and the file's progress (green). */
.bar { height: calc(12 * var(--s)); width: min(calc(512 * var(--s)), 100%); border-radius: calc(6 * var(--s)); overflow: hidden; }
.bar > div { height: 100%; border-radius: calc(6 * var(--s)); width: 3%; }
.bar.blue { background: var(--blue-sunken); }
.bar.blue > div { background: var(--blue); }
.bar.green { background: var(--green-sunken); }
.bar.green > div { background: var(--green); }

/* Practice: top row, step, stage, HUD. */
#practice {
  display: flex; flex-direction: column; padding: var(--margin);
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
#top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; column-gap: calc(24 * var(--s)); position: relative; }
#top .side { display: flex; gap: calc(16 * var(--s)); align-items: center; min-width: 0; }
#top .side.right { grid-column: 3; }
#top .side.right { justify-content: flex-end; gap: calc(24 * var(--s)); }
#file-title {
  align-self: center; font-size: calc(24 * var(--s)); text-align: center; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
button.icon {
  width: calc(48 * var(--s)); height: calc(48 * var(--s)); min-width: 0; min-height: 0; padding: 0; flex: none;
  border-radius: 50%; background: #FFFFFF; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat;
}
button.icon:hover { background: var(--text); }
.menu {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 6; display: flex; flex-direction: column;
  background: var(--window); border: 1px solid var(--graphite-hover); padding: calc(4 * var(--s)) 0;
}
.menu button {
  background: none; color: var(--text); border-radius: 0; min-height: 0; min-width: 0; text-align: left;
  padding: calc(6 * var(--s)) calc(24 * var(--s)); font-size: calc(14.67 * var(--s)); white-space: nowrap;
}
.menu button:hover { background: var(--graphite-hover); }
#steps { display: flex; justify-content: center; align-items: center; min-height: calc(52 * var(--s)); margin-top: calc(4 * var(--s)); }
.step {
  display: inline-flex; align-items: center; padding: 0 calc(10 * var(--s)); font-size: calc(13.33 * var(--s));
  min-height: calc(28 * var(--s)); border-radius: calc(14 * var(--s)); background: transparent;
  color: #8FA3B5; border: calc(1 * var(--s)) solid #2E4152; align-self: center;
}
.step:hover { color: var(--text); border-color: var(--blue-sunken); }
.step.current { color: var(--text); background: var(--blue-sunken); border-color: var(--blue-sunken); }
.step-arrow { color: var(--faint); align-self: center; padding: 0 calc(6 * var(--s)); font-size: calc(13.33 * var(--s)); }
.step:empty { visibility: hidden; }
#middle { flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column; align-items: center; }
#stage {
  flex: 1; min-height: 0; width: calc(100% * 4 / 6); max-width: 1280px; position: relative;
  display: flex; align-items: center; justify-content: center;
}
#stage.portrait { width: calc(100% * 5 / 7); }
@media (max-width: 640px) {
  #stage.portrait { width: 100%; }
  #file-title { grid-row: 2; grid-column: 1 / -1; margin-top: calc(8 * var(--s)); }
}
#paused { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
#under { position: absolute; left: 0; right: 0; top: 0; display: flex; justify-content: center; }
#under button { min-width: calc(224 * var(--s)); }
#hud { display: flex; flex-direction: column; align-items: center; gap: calc(6 * var(--s)); }
#beats { display: flex; gap: calc(32 * var(--s)); justify-content: center; align-items: center; min-height: calc(32 * var(--s)); }
.beat { width: calc(16 * var(--s)); height: calc(16 * var(--s)); border-radius: 50%; background: var(--beat-past); }
.beat.open { background: var(--beat-open); }
.beat.closed { background: var(--beat-closed); }
#breadcrumb { font-size: calc(14.67 * var(--s)); color: var(--blue); min-height: 1.2em; text-align: center; }
#practice.paused #stage, #practice.paused #hud, #practice.paused #under { visibility: hidden; }

/* Lessons, offers and the level: a page of their own in place of the
   stage, as the desktop's pages are, opaque, the challenge hidden. */
#overlay {
  position: absolute; inset: 0; z-index: 4; background: var(--window);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: calc(24 * var(--s)); padding: calc(12 * var(--s)) 0;
}
#middle.covered #stage, #middle.covered #under { visibility: hidden; }
#overlay-body {
  width: 100%; max-width: min(100%, 66ch); min-height: 0; display: flex; flex-direction: column; justify-content: center;
  font-family: var(--lesson); font-size: calc(24 * var(--s)); color: var(--lesson-text); overflow-wrap: anywhere;
}
/* A lesson: a column of the frame, as tall as the lesson up to the room
   (then scrolling inside), and Continue on a row of its own 24px below
   it (screen.py's UNDER_GAP), the two centered together, never overlapping. */
#overlay:has(> #overlay-body.lesson-page) { gap: calc(24 * var(--s)); }
#overlay-body.lesson-page {
  flex: 0 1 auto; min-height: 0; display: block; overflow-x: hidden; overflow-y: auto;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y;
}
#overlay-buttons { flex: none; }
#overlay .big { font-family: var(--display); font-size: calc(53.33 * var(--s)); color: var(--text); text-align: center; }
#overlay .ask { font-family: var(--display); font-size: calc(32 * var(--s)); color: var(--text); text-align: center; }
#overlay .hud-line { font-family: var(--display); font-size: calc(14.67 * var(--s)); color: var(--blue); text-align: center; margin-top: calc(8 * var(--s)); }
#overlay-buttons button.picked { box-shadow: inset 0 0 0 calc(3 * var(--s)) var(--gold); }
/* The slide (learn/slide.py): the last challenge's picture going up and out. */
#stage.sliding { overflow: hidden; }
#stage > .outgoing { position: absolute; inset: 0; pointer-events: none; }
/* No key caps on a touch screen. */
@media (hover: none) and (pointer: coarse) { .hints, .combolock .gap .caps { display: none !important; } }
html.touch .hints, html.touch .combolock .gap .caps { display: none !important; }

/* Wings: the subject, a fork, and the two predicates. */
.challenge { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; gap: calc(6 * var(--s)); }
.challenge .above { flex: 2; }
.challenge .below { flex: 1; }
.challenge .mark { font-size: calc(53.33 * var(--s)); min-height: calc(64 * var(--s)); line-height: calc(64 * var(--s)); text-align: center; }
.wings .grid { display: grid; width: 60%; min-width: fit-content; max-width: 100%; }
.wings.landscape .grid {
  grid-template-columns: auto calc(170 * var(--s)) minmax(0, 1fr);
  grid-template-rows: auto calc(40 * var(--s)) auto;
}
.wings.landscape .element { grid-column: 1; grid-row: 1 / 4; align-self: center; }
.wings.landscape .first { grid-column: 3; grid-row: 1; }
.wings.landscape .second { grid-column: 3; grid-row: 3; }
.wings.portrait .grid {
  width: 100%;
  grid-template-columns: minmax(0, 1fr) calc(40 * var(--s)) minmax(0, 1fr);
  grid-template-rows: auto calc(170 * var(--s)) auto;
}
.wings.portrait .element { grid-column: 1 / 4; grid-row: 1; justify-self: center; }
.wings.portrait .first { grid-column: 1; grid-row: 3; }
.wings.portrait .second { grid-column: 3; grid-row: 3; }
.term {
  font-size: calc(26.67 * var(--s)); min-height: calc(82 * var(--s));
  padding: 0 calc(16 * var(--s)); display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; overflow-wrap: break-word; line-height: 1.15;
  border: calc(9 * var(--s)) solid transparent;
}
.term img { max-width: 100%; max-height: calc(190 * var(--s)); }
.term.first, .term.second { border-radius: calc(41 * var(--s)); cursor: pointer; }
.term.first { background: var(--blue); color: var(--blue-text); border-color: var(--blue); }
.term.second { background: var(--magenta); color: var(--magenta-text); border-color: var(--magenta); }
.term.picked { border-color: var(--gold); }
.wings.nebulous.landscape .element { background: linear-gradient(to right, var(--blue), transparent 25%, transparent 75%, var(--magenta)); }
.wings.nebulous.portrait .element { background: linear-gradient(to bottom, var(--blue), transparent 25%, transparent 75%, var(--magenta)); }
.wings .dimension { font-size: calc(37.33 * var(--s)); border: 0; min-height: 0; }
/* Arrows and key hints over a challenge (renderers/common.js): no room taken. */
.arrows { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.arrows path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.challenge > .body { width: 100%; display: flex; flex-direction: column; align-items: center; }
.hints { position: absolute; inset: 0; pointer-events: none; }
.hints .hint-row { position: absolute; display: flex; white-space: nowrap; }
.challenge.revealed .hints { visibility: hidden; }

/* Terms (terms.js), as shared/terms.py draws them. */
.term .graphic { flex: none; max-width: 100%; }
.term.with-graphic .words { margin-top: calc(6 * var(--s)); }
.picture { display: inline-block; background: center / contain no-repeat; }
.picture.tinted { background: currentColor; -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
.words.picture { vertical-align: middle; }
.words.code { font-family: "Cascadia Mono", Consolas, "Courier New", monospace; }
.words mark { background: #FFE066; color: #1A1A1A; border-radius: 0.12em; }
.term.swatch-only { background: none !important; border-color: transparent !important; }
.term.swatch-only.picked .swatch .rim { stroke: var(--gold); }

/* Lessons (lesson.js), as shared/lessons.py lays them out: text at its
   size, graphics and videos scaled to the column and the visible page;
   a page taller than its frame scrolls, Continue in a row below it. */
.lesson { width: min(100%, 66ch); margin: 0 auto; display: flex; flex-direction: column; }
.lesson .piece { width: 100%; flex: none; }
.lesson .piece.graphic { display: flex; justify-content: center; align-items: center; color: var(--lesson-text); }
.lesson .piece.graphic > * { max-width: 100%; flex: none; }
.lesson .piece.graphic > img { object-fit: contain; }
.lesson .piece.graphic > .picture { background-size: contain; -webkit-mask-size: contain; mask-size: contain; }
.lesson .piece.video { display: block; max-width: 100%; margin: 0 auto; object-fit: contain; background: #000; }
.lesson h1 { font-size: 1.2em; margin: 0.4em 0; }
.lesson h2, .lesson h3, .lesson h4, .lesson h5, .lesson h6 { font-size: 1em; margin: 0.4em 0; }
.lesson p { margin: 0.5em 0; }
.lesson p.gap { min-height: 1.15em; }
.lesson code, .lesson pre { font-family: "Cascadia Mono", Consolas, "Courier New", monospace; }
.lesson pre { white-space: pre-wrap; margin: 0.5em 0; }
.lesson blockquote { margin: 0.5em 0 0.5em 1.5em; }
.lesson a { color: var(--text); }
#file-list li.heading { padding: calc(10 * var(--s)) calc(2 * var(--s)) calc(8 * var(--s)); }

/* Specs (renderers/specs.js): two circles and the element between, as renderers_sides.py. */
.specs .row-of-specs { display: flex; align-items: center; justify-content: center; gap: calc(96 * var(--s)); }
.specs.portrait .row-of-specs { flex-direction: column; gap: calc(72 * var(--s)); }
.specs .term { border: 0; min-height: 0; }
.specs .spec {
  width: calc(180 * var(--s)); height: calc(180 * var(--s)); flex: none; border-radius: 50%;
  font-size: calc(24 * var(--s)); padding: 0; cursor: pointer; overflow: hidden;
}
.specs .first-spec { background: var(--blue); color: var(--blue-text); }
.specs .second-spec { background: var(--magenta); color: var(--magenta-text); }
.specs .term.spec { border: calc(9 * var(--s)) solid transparent; }
.specs .term.spec.picked { border-color: var(--gold); }
.specs .spec-element { font-size: calc(29.33 * var(--s)); padding: 0 calc(8 * var(--s)); }
.specs .spec-element.nebulous { font-style: italic; }
.specs .dimension { font-size: calc(37.33 * var(--s)); }

/* Ramp (renderers/ramp.js): two pills across a wedge, labels under, as renderers.py. */
.ramp .grid { display: grid; width: 60%; min-width: fit-content; max-width: 100%; align-items: center; column-gap: calc(6 * var(--s)); row-gap: calc(6 * var(--s)); }
.ramp.landscape .grid { grid-template-columns: 1fr calc(150 * var(--s)) 1fr; }
.ramp.landscape .lesser-slot { grid-area: 1 / 1; } .ramp.landscape .wedge { grid-area: 1 / 2; } .ramp.landscape .greater-slot { grid-area: 1 / 3; }
.ramp.landscape .label.lesser { grid-area: 2 / 1; } .ramp.landscape .grid > .mark { grid-area: 2 / 2; } .ramp.landscape .label.greater { grid-area: 2 / 3; }
.ramp.portrait .grid { width: 100%; min-width: 0; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto calc(64 * var(--s)) auto auto; }
.ramp.portrait .label.greater { grid-area: 1 / 1; } .ramp.portrait .greater-slot { grid-area: 2 / 1; } .ramp.portrait .wedge { grid-area: 3 / 1; }
.ramp.portrait .lesser-slot { grid-area: 4 / 1; } .ramp.portrait .label.lesser { grid-area: 5 / 1; }
.ramp .term { border: 0; min-height: 0; }
.ramp .pill {
  font-size: calc(26.67 * var(--s)); height: calc(64 * var(--s)); padding: 0 calc(16 * var(--s));
  border-radius: calc(32 * var(--s)); cursor: pointer; overflow: hidden;
}
.ramp .pill.tall { height: calc(208 * var(--s)); }
.ramp .lesser-slot { background: var(--blue); color: var(--blue-text); }
.ramp .greater-slot { background: var(--magenta); color: var(--magenta-text); }
.ramp .wedge { display: block; width: 100%; min-height: calc(48 * var(--s)); cursor: pointer; }
.ramp.portrait .wedge { min-height: 0; height: calc(64 * var(--s)); }
.ramp .label { font-size: calc(21.33 * var(--s)); padding: 0; }
.ramp .label.lesser { color: var(--blue-text); }
.ramp .label.greater { color: var(--magenta-text); }
.ramp .grid > .mark { align-self: start; }
.ramp .dimension { font-size: calc(37.33 * var(--s)); }

/* Rungs (renderers/rungs.js): a column of steps, the pair colored, as renderers_more.py. */
.rungs .column { width: 100%; display: flex; flex-direction: column; padding: 0 calc(56 * var(--s)); }
.rungs .term { border: 0; min-height: 0; }
.rungs .rung {
  font-size: calc(26.67 * var(--s)); min-height: calc(56 * var(--s)); padding: 0 calc(24 * var(--s));
  border-radius: calc(28 * var(--s)); color: var(--text);
}
.rungs .rung.dense { font-size: calc(16 * var(--s)); min-height: calc(24 * var(--s)); border-radius: calc(12 * var(--s)); }
.rungs .rung.first { background: var(--blue); color: var(--blue-text); cursor: pointer; }
.rungs .rung.second { background: var(--magenta); color: var(--magenta-text); cursor: pointer; }
.rungs .dimension { font-size: calc(37.33 * var(--s)); }

/* Fences (renderers/fences.js): the thing over a fence with a numbered post, as renderers_sides.py. */
.fences .term { border: 0; min-height: 0; }
.fences .subject { font-size: calc(29.33 * var(--s)); }
.fences .fence { display: block; flex: none; cursor: pointer; overflow: visible; }
.fences .dimension { font-size: calc(37.33 * var(--s)); }
/* Ratio styles, Grooves, ComboLock and Boxcars (renderers/ratio.js,
   grooves.js, combolock.js, boxcars.js), as shared/style.py draws them. */
.ratio .dimension, .grooves .dimension, .combolock .dimension, .boxcars .dimension {
  font-size: calc(37.33 * var(--s)); border: 0; min-height: 0;
}
.ratio .grid { display: grid; justify-content: center; align-items: center; }
.ratio .shape { display: flex; cursor: pointer; }
.ratio.across .shape { align-self: end; justify-self: center; align-items: flex-end; justify-content: center; }
.ratio.stacked .shape { justify-self: start; align-items: center; justify-content: flex-start; }
.ratio.stacked .shape.rod { align-items: stretch; }
.ratio .shape > div { flex: none; }
.ratio .shape.circle > div { border-radius: 50%; }
.ratio .shape.first > div { background: #3489E5; }
.ratio .shape.second > div { background: #920950; }
.ratio .term.pill {
  font-size: calc(26.67 * var(--s)); min-height: calc(64 * var(--s)); max-height: calc(64 * var(--s));
  padding: 0 calc(16 * var(--s)); border: 0; border-radius: calc(32 * var(--s)); cursor: pointer; white-space: nowrap;
}
.ratio .term.pill.first { background: var(--blue); color: var(--blue-text); }
.ratio .term.pill.second { background: var(--magenta); color: var(--magenta-text); }
.bubbles .term.pill.first, .bubbles .term.pill.second { background: transparent; color: var(--text); }
.ratio .term.end { font-size: calc(21.33 * var(--s)); min-height: 0; border: 0; }
.ratio .term.lesser { color: var(--blue-text); }
.ratio .term.greater { color: var(--magenta-text); }
.ratio > .anchor, .boxcars > .anchor { position: absolute; pointer-events: none; }
.grooves .rings { position: relative; width: calc(300 * var(--s)); height: calc(300 * var(--s)); flex: none; cursor: pointer; }
.grooves .rings svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.grooves .term.ring-inner, .grooves .term.ring-outer {
  font-size: calc(26.67 * var(--s)); min-height: 0; border: 0; padding: 0; white-space: nowrap;
}
.grooves .term.ring-inner { position: absolute; left: 0; width: 100%; color: var(--magenta-text); }
.grooves .term.ring-outer { color: var(--blue-text); cursor: pointer; }
.combolock .sentence, .boxcars .sentence {
  --k: 1; position: relative; width: 100%; display: flex; flex-wrap: wrap; justify-content: center;
  align-items: center; gap: calc(10 * var(--s));
}
.boxcars .sentence { margin: calc(60 * var(--s)) 0; }
.sentence .glued { display: inline-flex; align-items: center; white-space: nowrap; }
.sentence .word { font-size: calc(29.33 * var(--k) * var(--s)); }
.sentence .choice {
  font-size: calc(26.67 * var(--k) * var(--s)); padding: 0 calc(18 * var(--s)); min-height: calc(66 * var(--s));
  display: flex; align-items: center; justify-content: center; border-radius: calc(28 * var(--s));
  border: calc(9 * var(--s)) solid; cursor: pointer; line-height: 1.2;
}
.sentence .choice.first { background: var(--blue); color: var(--blue-text); border-color: var(--blue); }
.sentence .choice.second { background: var(--magenta); color: var(--magenta-text); border-color: var(--magenta); }
.sentence .choice.picked { border-color: var(--gold); }
.combolock .gap { display: inline-grid; position: relative; margin-bottom: calc(42 * var(--s)); padding-top: calc(42 * var(--s)); }
.combolock .gap .caps {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%); display: flex;
  gap: calc(10.8 * var(--s)); pointer-events: none;
}
.combolock.revealed .gap .caps { visibility: hidden; }
.combolock .choice { min-height: 0; padding: 0 calc(12 * var(--s)); border-width: calc(4 * var(--s)); border-radius: calc(16 * var(--s)); }
.combolock .choice.top { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.combolock .choice.bottom { border-top-left-radius: 0; border-top-right-radius: 0; }
/* End of ratio, Grooves, ComboLock and Boxcars. */
/* ---- Renderers 3: dominoes, cufflinks, diode, eclipse, brickwall, fishbones, hopscotch, cards ---- */
:is(.dominoes, .cufflinks, .diode, .eclipse, .brickwall, .fishbones, .hopscotch) > .dimension {
  font-size: calc(37.33 * var(--s)); border: 0; min-height: 0;
}
.term.gone { visibility: hidden; }
/* Dominoes and Cufflinks (renderers_analogies.py, style.py _cells). */
.analogy .grid { width: 100%; display: grid; grid-template-columns: 1fr 1fr; row-gap: calc(16 * var(--s)); }
.analogy .cell {
  height: calc(56 * var(--s)); min-width: calc(120 * var(--s)); padding: 0 calc(18 * var(--s));
  border-radius: calc(28 * var(--s)); display: flex; align-items: center; justify-content: center;
  overflow: hidden; cursor: pointer;
}
.analogy .cell .term { font-size: calc(26.67 * var(--s)); min-height: 0; height: 100%; width: 100%; padding: 0; border: 0; }
.analogy .cell.left { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.analogy .cell.right { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.analogy .cell.first { background: var(--blue); color: var(--blue-text); }
.analogy .cell.second { background: var(--magenta); color: var(--magenta-text); }
.analogy .cell.first.faded { background: var(--blue-sunken); }
.analogy .cell.second.faded { background: #440727; }
/* Diode (renderers_relations.py, style.py _pills, _choices). */
.diode .diode-row { display: flex; align-items: center; justify-content: center; gap: calc(16 * var(--s)); }
.diode .diode-row.down { flex-direction: column; }
.diode .end { flex: 0 1 calc(320 * var(--s)); min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.diode .diode-arrow { flex: none; width: calc(140 * var(--s)); height: calc(56 * var(--s)); overflow: visible; cursor: pointer; }
.diode .diode-row.down .end { flex: none; width: calc(320 * var(--s)); max-width: 100%; }
.diode .diode-row.down .diode-arrow { width: calc(56 * var(--s)); height: calc(140 * var(--s)); }
.diode .pill {
  font-size: calc(26.67 * var(--s)); min-height: calc(64 * var(--s)); padding: 0 calc(16 * var(--s));
  border: 0; border-radius: calc(32 * var(--s));
}
.diode .pill.first { background: var(--blue); color: var(--blue-text); cursor: pointer; }
.diode .pill.second { background: var(--magenta); color: var(--magenta-text); cursor: pointer; }
.diode .pill.known { background: var(--graphite-hover); color: var(--graphite-text); }
.diode .choice {
  font-size: calc(26.67 * var(--s)); min-height: calc(66 * var(--s)); padding: 0 calc(18 * var(--s));
  border-radius: calc(28 * var(--s)); cursor: pointer;
}
.diode .choice.first { background: var(--blue); color: var(--blue-text); border-color: var(--blue); }
.diode .choice.second { background: var(--magenta); color: var(--magenta-text); border-color: var(--magenta); }
.diode .choice.top { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.diode .choice.bottom { border-top-left-radius: 0; border-top-right-radius: 0; }
.diode .choice.picked { border-color: var(--gold); }
/* Eclipse (renderers_relations.py: ECLIPSE 340, INNER 0.56, FOOT 14). */
.eclipse .discs { position: relative; flex: none; width: calc(340 * var(--s)); height: calc(340 * var(--s)); cursor: pointer; }
.eclipse .disc { position: absolute; border-radius: 50%; }
.eclipse .disc.large { inset: 0; background: var(--blue); }
.eclipse .disc.small {
  width: calc(190.4 * var(--s)); height: calc(190.4 * var(--s)); left: calc(74.8 * var(--s));
  top: calc(135.6 * var(--s)); background: var(--magenta);
}
.eclipse .discs .term { position: absolute; padding: 0; border: 0; min-height: 0; background: transparent; overflow: hidden; }
.eclipse .disc-large {
  left: calc(51 * var(--s)); top: calc(34 * var(--s)); width: calc(238 * var(--s)); height: calc(101.6 * var(--s));
  color: var(--blue-text); font-size: calc(29.33 * var(--s));
}
.eclipse .disc-small {
  left: calc(88.8 * var(--s)); top: calc(149.6 * var(--s)); width: calc(162.4 * var(--s)); height: calc(162.4 * var(--s));
  color: var(--magenta-text); font-size: calc(26.67 * var(--s));
}
/* Bricks: Brickwall, Fishbones, Hopscotch (renderers_sorting.py, style.py _bricks). */
:is(.brickwall, .fishbones, .hopscotch) .brick {
  font-size: calc(24 * var(--s)); min-height: calc(58 * var(--s)); padding: 0 calc(16 * var(--s));
  border-radius: calc(29 * var(--s)); background: var(--graphite-hover); color: var(--graphite-text);
  border: calc(9 * var(--s)) solid var(--graphite-hover);
}
:is(.brickwall, .fishbones, .hopscotch) .brick.first { background: var(--blue); color: var(--blue-text); border-color: var(--blue); }
:is(.brickwall, .fishbones, .hopscotch) .brick.second { background: var(--magenta); color: var(--magenta-text); border-color: var(--magenta); }
:is(.brickwall, .fishbones, .hopscotch) .brick.picked { border-color: var(--gold); }
.brickwall .brick.plain { background: transparent; border-color: transparent; color: var(--text); }
.brickwall .grid {
  display: grid; width: 100%; max-width: calc(860 * var(--s)); box-sizing: border-box;
  padding: 0 calc(56 * var(--s)); gap: calc(12 * var(--s)) calc(24 * var(--s)); grid-template-columns: 1fr 1fr;
}
.brickwall.portrait .grid { grid-template-columns: 1fr; }
.brickwall .brick.middle { justify-self: center; min-width: calc(280 * var(--s)); box-sizing: border-box; }
.fishbones .grid {
  display: grid; width: 100%; max-width: calc(960 * var(--s)); gap: calc(12 * var(--s));
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.fishbones .group-name { font-size: calc(24 * var(--s)); min-height: 0; border: 0; padding: 0; background: transparent; }
.fishbones .group-name.first { color: var(--blue-text); }
.fishbones .group-name.second { color: var(--magenta-text); }
.hopscotch .grid {
  display: grid; width: 100%; max-width: calc(752 * var(--s)); box-sizing: border-box;
  padding: 0 calc(56 * var(--s)); row-gap: calc(12 * var(--s)); grid-template-columns: 1fr 1fr;
}
.hopscotch .brick.half { cursor: pointer; }
.hopscotch .brick.first { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.hopscotch .brick.second { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.hopscotch.dense .brick {
  font-size: calc(17.33 * var(--s)); min-height: calc(32 * var(--s)); border-radius: calc(16 * var(--s));
  border-width: calc(4 * var(--s));
}
/* Cards (renderers_cards.py, style.py _cards). */
.cards > .body { gap: calc(32 * var(--s)); }
.cards > .mark { visibility: hidden; }
.cards .prompt-card {
  box-sizing: border-box; width: calc(420 * var(--s)); min-height: calc(150 * var(--s));
  background: #0B0B0B; color: #FFFFFF; border: calc(2 * var(--s)) solid #2E4152;
  border-radius: calc(18 * var(--s)); padding: calc(24 * var(--s)); font-size: calc(29.33 * var(--s));
  text-align: left; line-height: 1.15; overflow-wrap: break-word;
}
.cards.portrait .prompt-card { width: calc(300 * var(--s)); }
.cards .hand { display: flex; gap: calc(12 * var(--s)); justify-content: center; }
.cards.portrait .hand { flex-direction: column; }
.cards .response-card {
  box-sizing: border-box; width: calc(132 * var(--s)); height: calc(176 * var(--s)); min-height: 0;
  background: #F4F1EA; color: #1A1A1A; border: calc(4 * var(--s)) solid #F4F1EA; border-radius: calc(12 * var(--s));
  padding: calc(8 * var(--s)); font-size: calc(18.67 * var(--s)); align-items: flex-start; justify-content: flex-start;
  text-align: left; overflow: hidden; cursor: pointer;
}
.cards.portrait .response-card { width: calc(220 * var(--s)); height: calc(64 * var(--s)); }
.cards .response-card.picked { border-color: var(--gold); }
.cards .response-card.played { background: #6E6B64; border-color: #6E6B64; }
/* ---- end Renderers 3 ---- */

/* The pointer over whatever a tap acts on (ADR 0082, mouse as tap). */
button, .tap, .file, .lesson video, .lesson a { cursor: pointer; }

/* Observer mode (ADR 0083): the request, asked as the app's pages ask,
   over whatever page is up; and the eye while watched, with its menu. */
#dialog {
  position: fixed; inset: 0; z-index: 20; background: var(--shade);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
#dialog .panel {
  background: var(--window); border: 1px solid var(--graphite-hover); border-radius: calc(24 * var(--s));
  padding: calc(32 * var(--s)); max-width: min(100%, calc(640 * var(--s)));
  display: flex; flex-direction: column; gap: calc(24 * var(--s));
}
#dialog .ask { font-size: calc(32 * var(--s)); text-align: center; overflow-wrap: anywhere; }
.menubar .watch-eye { width: calc(22 * var(--s)); height: calc(22 * var(--s)); margin-left: auto; align-self: center; }
#watch-menu { position: fixed; z-index: 21; }
#watch-menu .menu-line { padding: calc(6 * var(--s)) calc(24 * var(--s)); font-size: calc(14.67 * var(--s)); color: var(--blue); white-space: nowrap; }

/* The observer's page: the learner's screen, drawn from the stream, watch-only. */
body.watching #practice #middle, body.watching #practice #top button:not(#back) { pointer-events: none; }
#observe-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(24 * var(--s));
  text-align: center; padding: 16px;
}
#observe-state .big { font-size: calc(53.33 * var(--s)); }
#observe-state .hud-line { font-size: calc(18.67 * var(--s)); color: var(--blue); }