/* Chalkgraph. Set like a page of maths notes: Latin Modern on squared paper.
   The animations are the decoration; the page itself stays plain. */
@font-face { font-family: "LM Roman"; src: url("../fonts/lmroman10-regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "LM Roman"; src: url("../fonts/lmroman10-italic.otf") format("opentype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "LM Roman"; src: url("../fonts/lmroman10-bold.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "LM Roman"; src: url("../fonts/lmroman10-bolditalic.otf") format("opentype"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "LM Mono"; src: url("../fonts/lmmono10-regular.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "LM Mono"; src: url("../fonts/lmmonolt10-bold.otf") format("opentype"); font-weight: 700; font-display: swap; }

:root {
  /* default look: white paper, dots. "Old paper" is a theme like the others. */
  --paper: #ffffff;
  --rule: rgba(40, 70, 120, 0.10);
  --ink: #111;
  --ink-soft: #555;
  --field: #fff;
  --stage: #fff;
  --red: #9c2a1b;
  --link: #1f3f7a;
  --serif: "LM Roman", "Latin Modern Roman", "CMU Serif", Georgia, serif;
  --mono: "LM Mono", "Courier New", monospace;
}

html[data-theme="paper"] { --paper: #f2ead8; --rule: rgba(60, 80, 110, 0.13); --ink: #17120c; --ink-soft: #5b5143; --field: #fbf6ea; --stage: #ecdfc3; }
html[data-theme="kraft"] { --paper: #d8bb8c; --rule: rgba(70, 45, 10, 0.12); --ink-soft: #4f4330; --field: #e6cfa6; --stage: #cfae7c; }
html[data-theme="blackboard"] { --paper: #1b2622; --rule: rgba(255, 255, 255, 0.05); --ink: #f2efe4; --ink-soft: #b9b7ac; --red: #f0907a; --link: #9cc4f0; --visited: #c9b3ee; --field: #22302b; --stage: #22302b; }
html[data-theme="blueprint"] { --paper: #183a66; --rule: rgba(255, 255, 255, 0.09); --ink: #f0f5ff; --ink-soft: #b9c9e6; --red: #ffb39e; --link: #a9d6ff; --visited: #d5c2ff; --field: #1f4577; --stage: #1f4577; }

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.45;
  /* dotted paper by default; the Squares picker changes the ruling */
  background-color: var(--paper);
  background-image: radial-gradient(var(--rule) 1.6px, transparent 1.6px);
  background-size: 26px 26px;
}
html[data-ruling="squared"] body { background-image: linear-gradient(var(--rule) 1px, transparent 1px), linear-gradient(90deg, var(--rule) 1px, transparent 1px); background-size: 26px 26px; }
/* Squares picker (Settings on the pages): the ruling of the page, kept separately from the colour. */
html[data-ruling="fine"] body { background-image: linear-gradient(var(--rule) 1px, transparent 1px), linear-gradient(90deg, var(--rule) 1px, transparent 1px); background-size: 13px 13px; }
html[data-ruling="lined"] body { background-image: linear-gradient(var(--rule) 1px, transparent 1px); background-size: 26px 26px; }
html[data-ruling="dotted"] body { background-image: radial-gradient(var(--rule) 1.6px, transparent 1.6px); background-size: 26px 26px; }
html[data-ruling="plain"] body { background-image: none; }

a { color: var(--link); text-underline-offset: 2px; }
a:visited { color: var(--visited, #4b2a6b); }
a:hover { color: var(--red); }
:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }

.page { max-width: 1200px; margin: 0 auto; padding: 34px 28px 50px; }
body.viewer .page { max-width: 1560px; padding-top: 18px; }

/* ---------- home: top ---------- */
.top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 20px 56px; align-items: start; }
.top h1 { font-size: 46px; line-height: 1.05; margin: 0 0 14px; font-weight: 700; }
.top p { margin: 0 0 12px; max-width: 34em; }
.top .small { font-size: 16.5px; color: var(--ink-soft); }
.top label { cursor: pointer; white-space: nowrap; }
.top .sep { margin: 0 6px; }
.top select, .crumbs select { font-size: 15.5px; padding: 1px 3px 2px; }
.crumbs .bg { color: var(--ink-soft); margin-right: 10px; }
body.present .crumbs .bg { display: none; }

.contents h2 { font-size: 19px; margin: 8px 0 4px; font-weight: 700; }
.contents h2:not(:first-child) { margin-top: 16px; }
.contents ol { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 32px; font-size: 17px; line-height: 1.4; }
.contents li { break-inside: avoid; display: flex; gap: 8px; align-items: baseline; }
.contents li .n { color: var(--ink-soft); font-size: 15px; margin-left: auto; font-variant-numeric: tabular-nums; }
.contents li::after { content: none; }
.contents a { text-decoration: none; }
.contents a:hover { text-decoration: underline; }

h2.sec { font-size: 30px; margin: 54px 0 12px; padding-bottom: 4px; border-bottom: 2px solid var(--ink); font-weight: 700; display: flex; gap: 14px; align-items: baseline; }
h2.sec small { font-size: 17px; font-weight: 400; font-style: italic; color: var(--ink-soft); margin-left: auto; }

/* search row: sticks under the top edge while you scroll its section */
.find { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 0; background: var(--paper); border-bottom: 1px solid var(--ink); font-size: 17px; }
.find label { font-weight: 700; }
.find input[type="search"] { flex: 1 1 260px; min-width: 0; font: inherit; color: var(--ink); background: var(--field, #fbf6ea); border: 1.5px solid var(--ink); border-radius: 2px; padding: 5px 8px; }
.find input::placeholder { color: #8b8172; font-style: italic; }
.find .found { font-family: var(--mono); font-size: 15px; color: var(--ink-soft); min-width: 5.5em; text-align: right; }
.none { margin: 18px 0; font-size: 19px; max-width: 40em; }

.group { margin-top: 26px; scroll-margin-top: 64px; }
section { scroll-margin-top: 10px; }
.group h3 { font-size: 22px; margin: 0 0 12px; font-weight: 700; font-style: italic; }
[hidden] { display: none !important; }

/* ---------- figures grid ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 30px 24px; }
.card { display: block; color: var(--ink) !important; text-decoration: none; }
.card .sq { aspect-ratio: 1 / 1; border: 2px solid var(--ink); background: var(--stage, #ecdfc3); overflow: hidden; }
.card .sq { position: relative; }
.card canvas { width: 100%; height: 100%; display: block; }
.card .fail { display: none; position: absolute; inset: 0; padding: 14px; font-size: 16px; font-style: italic; color: var(--ink-soft); }
.card .sq.failed .fail { display: block; }
.card .sq.failed canvas { visibility: hidden; }
.card:hover .sq, .card:focus-visible .sq { outline: 3px solid var(--ink); }
.card .cap { margin: 8px 0 0; font-size: 18px; line-height: 1.25; }
.card .cap b { font-weight: 700; }
.card .cap .n { color: var(--ink-soft); font-weight: 400; margin-right: 4px; }
.card .what { margin: 1px 0 0; font-size: 16.5px; font-style: italic; color: var(--ink-soft); line-height: 1.3; }
.card:hover .cap b { text-decoration: underline; }

.foot { margin-top: 60px; padding-top: 10px; border-top: 1px solid var(--ink); font-size: 16px; color: var(--ink-soft); max-width: 60em; }
.foot kbd, .keys kbd { font-family: var(--mono); font-size: 14px; border: 1px solid var(--ink-soft); padding: 0 4px; background: var(--paper); color: var(--ink); }

/* ---------- viewer ---------- */
.crumbs { display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: 17px; margin-bottom: 10px; }
.crumbs .spacer { flex: 1; }
.head { margin: 0 0 10px; display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; }
.head h1 { font-size: clamp(26px, 3vw, 36px); line-height: 1.1; margin: 0; font-weight: 700; }
.head h1 .n { font-weight: 400; color: var(--ink-soft); margin-right: 8px; }
.head .what { font-style: italic; font-size: 18px; color: var(--ink-soft); margin: 0; }

/* first screen: the picture and its sliders side by side, sized to fit the window; the reading is below */
.main { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 8px 26px; align-items: start; }
.main .stage-col { min-width: 0; }
.stage-wrap { position: relative; }
.stage { border: 2px solid var(--ink); background: var(--stage, #ecdfc3); line-height: 0; margin: 0 auto; max-width: calc((100vh - 210px) * 16 / 9 + 4px); }
.stage canvas { width: 100%; max-width: 100%; height: auto; display: block; cursor: crosshair; }
.main .side { border-left: 1px solid var(--ink); padding-left: 22px; }
.main .side h2 { font-size: 22px; margin: 0 0 8px; font-weight: 700; }
.stage:fullscreen { display: flex; align-items: center; justify-content: center; background: #14100a; border: 0; }
.stage:fullscreen canvas { width: min(100vw, 177.78vh); height: auto; }
.recording .stage { border-color: var(--red); outline: 2px solid var(--red); }

.bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0 0; font-size: 17px; }
.bar .spacer { flex: 1; }
.bar .rec-time { font-family: var(--mono); color: var(--red); font-weight: 700; min-width: 5.5em; text-align: right; }

button, select, a.btn {
  font-family: var(--serif);
  font-size: 17px;
  color: var(--ink);
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  padding: 4px 12px 5px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  line-height: 1.3;
}
select { padding: 4px 4px 5px; max-width: 100%; }
button:hover, a.btn:hover { background: var(--ink); color: var(--paper); }
button:active { transform: translateY(1px); }
button:disabled { opacity: 0.45; cursor: default; background: var(--paper); color: var(--ink); }
button.rec { border-color: var(--red); color: var(--red); font-weight: 700; }
button.rec:hover, .recording button.rec { background: var(--red); color: #fff; }

.cols { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 20px 56px; margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--ink); }
.cols h2 { font-size: 22px; margin: 0 0 8px; font-weight: 700; }
.cols h2:not(:first-child) { margin-top: 26px; }
.prose p { margin: 0 0 12px; max-width: 36em; }
.prose ul { margin: 0; padding-left: 1.1em; max-width: 36em; }
.prose li { margin: 0 0 7px; }
.side { border-left: 1px solid var(--ink); padding-left: 26px; }

.ctl { margin: 0 0 12px; font-size: 17px; }
.ctl .row { display: flex; justify-content: space-between; gap: 10px; }
.ctl output { font-family: var(--mono); font-size: 16px; }
.ctl.check label { cursor: pointer; display: flex; gap: 8px; align-items: baseline; }
.ctl.buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.ctl select { width: 100%; margin-top: 2px; }
input[type="range"] { width: 100%; margin: 2px 0 0; accent-color: var(--ink); cursor: pointer; }
input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--ink); cursor: pointer; margin: 0; position: relative; top: 1px; }

.note { font-size: 16px; color: var(--ink-soft); margin: 8px 0 0; line-height: 1.35; }
.status { font-size: 16.5px; margin: 8px 0; }
.status:empty { display: none; }
.status.bad { color: var(--red); }
.video-out video { width: 100%; border: 1.5px solid var(--ink); display: block; margin-bottom: 8px; background: #000; }
.video-out .links { display: flex; flex-wrap: wrap; gap: 8px; }

/* the recording options, shown only when Record is pressed */
dialog.rec-dialog { border: 2px solid var(--ink); background: var(--paper); color: var(--ink); padding: 22px 26px 20px; width: min(540px, calc(100vw - 32px)); font-family: var(--serif); font-size: 17px; box-shadow: 6px 6px 0 var(--ink); }
dialog.rec-dialog::backdrop { background: rgba(20, 15, 5, 0.45); }
dialog.rec-dialog h2 { font-size: 24px; margin: 0 0 14px; font-weight: 700; }
dialog.rec-dialog .ctl label { display: block; }
dialog.rec-dialog .ctl select { width: 100%; margin-top: 2px; }
dialog.rec-dialog .dlg-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
dialog.rec-dialog .status { margin: 12px 0 8px; }

.pager { display: flex; justify-content: space-between; gap: 16px; margin-top: 44px; padding-top: 10px; border-top: 1px solid var(--ink); font-size: 17px; }
.keys { margin-top: 14px; font-size: 16px; color: var(--ink-soft); }
.missing { padding: 60px 0; font-size: 21px; }

ul.plain { list-style: none; padding: 0; }
ul.plain li { margin: 0 0 4px; color: var(--ink-soft); }
button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

/* ---------- classroom view: the same picture + sliders, full screen, nothing else ---------- */
body.present .page { max-width: none; padding: 10px 14px; }
body.present .crumbs, body.present .cols, body.present .pager, body.present .keys, body.present .head .what { display: none; }
body.present .head { margin: 0 0 6px; }
body.present .head h1 { font-size: 30px; }
body.present .stage { max-width: calc((100vh - 118px) * 16 / 9 + 4px); }
body.present .bar #b-full, body.present .bar #b-rec, body.present .bar .rec-time { display: none; }
body.present .main .side { font-size: 20px; max-height: calc(100vh - 70px); overflow-y: auto; }
body.present .ctl { font-size: 20px; margin-bottom: 16px; }
body.present .ctl output { font-size: 19px; }

/* ---------- small screens: text first, contents becomes one column, controls sit directly under the canvas ---------- */
@media (max-width: 820px) {
  body { font-size: 18px; }
  .page { padding: 20px 14px 40px; }
  .top { grid-template-columns: 1fr; }
  .top h1 { font-size: 36px; }
  .contents ol { columns: 1; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; }
  .card .what { display: none; }
  h2.sec small { display: none; }
  .cols { grid-template-columns: 1fr; }
  .main { grid-template-columns: minmax(0, 1fr); }
  .main .side { border-left: 0; padding-left: 0; }
  .stage { margin: 0 -14px; border-left: 0; border-right: 0; max-width: none; }
  .keys { display: none; }
}