/* The portrait room on a phone. Panels are bottom sheets in the current room's look: warm paper,
   a stepped pixel border, the EndieGrid face and chunky pixel buttons. */
@font-face { font-family: EndieGrid; src: url('../../../web/assets/interface/endie-grid.ttf') format('truetype'); font-display: swap; }
/* The Watcher's typewriter (his cards in the shorts): Special Elite, by Astigmatic, Apache License 2.0. */
@font-face { font-family: 'Special Elite'; src: url('../../../web/assets/interface/special-elite.ttf') format('truetype'); font-display: swap; }
:root {
  --bg: #1d1b18; --paper: #f0e3bd; --paper-edge: #a78656; --paper-step: #6f573b; --paper-inset: #d6bf8c;
  --ink: #4f5641; --ink-soft: #7a7253; --button: #ddcea2; --button-hi: #fff1cb; --button-lo: #ae9569; --button-hover: #eadcb2;
  --primary: #557b6a; --primary-ink: #fff0c8; --primary-hi: #a0b392; --primary-lo: #36584b; --on: #91ac91; --on-ink: #304d40;
  --error: #9a3b2e;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); overflow: hidden; }
body { display: grid; place-items: center; height: 100dvh; font: 16px/1.5 EndieGrid, monospace; color: var(--ink); -webkit-tap-highlight-color: transparent; }
/* The room never scrolls or zooms: a drag on it is play (rooms/lib/play.js). */
canvas#room { image-rendering: pixelated; display: block; touch-action: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
canvas#room.over { cursor: pointer; }
canvas#room.grab { cursor: grab; }
canvas#room.held { cursor: grabbing; }
/* The room's things for the keyboard: over the canvas, letting touches through. The room lights the
   thing they reach; its name shows under it. */
#room-things { position: fixed; pointer-events: none; }
button.room-thing, button.room-thing:focus-visible { position: absolute; min-height: 0; padding: 0; border: 0; background: transparent; box-shadow: none; outline: none; pointer-events: none; }
.room-thing span { display: none; position: absolute; left: 50%; top: 100%; translate: -50% 4px; white-space: nowrap; font: 14px EndieGrid, monospace; line-height: 1.4; color: #fff0c8; text-shadow: 1px 1px #4d5341, -1px -1px #4d5341, 1px -1px #4d5341, -1px 1px #4d5341; }
.room-thing.pointed span { display: block; }
canvas.pixel, canvas.sheet-endie { image-rendering: pixelated; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[hidden] { display: none !important; }

/* ---- Buttons and fields, as in the current room ---- */
button, select, input { font: 15px/1.3 EndieGrid, monospace; color: var(--ink); }
button { min-height: 44px; padding: 8px 12px; border: 0; border-radius: 0; background: var(--button); cursor: pointer;
  box-shadow: inset 0 2px var(--button-hi), inset 0 -2px var(--button-lo); }
button:active:not(:disabled) { background: var(--button-hover); }
button:disabled { opacity: .5; cursor: default; }
button.primary { background: var(--primary); color: var(--primary-ink); box-shadow: inset 0 2px var(--primary-hi), inset 0 -2px var(--primary-lo); }
button[aria-pressed="true"] { background: var(--on); color: var(--on-ink); }
button.wide { width: 100%; margin-top: 10px; }
button:focus-visible, select:focus-visible, input:focus-visible, summary:focus-visible { outline: 3px solid var(--paper-step); outline-offset: 2px; }
input[type="text"], input:not([type]), input[type="number"], select { min-height: 44px; padding: 6px 10px; border: 2px solid var(--paper-edge); background: #fcf0cc; border-radius: 0; max-width: 100%; }
input[type="checkbox"] { appearance: none; width: 20px; height: 20px; flex: none; border: 2px solid #957e55; background: #fcf0cc; margin: 0; }
input[type="checkbox"]:checked { background: var(--primary); box-shadow: inset 0 0 0 3px #eee0b7; }
input[type="range"] { flex: 1; min-width: 80px; accent-color: var(--primary); }
.row { display: flex; gap: 8px; align-items: center; margin: 8px 0; }
.row.wrap { flex-wrap: wrap; }
.row.center { justify-content: center; }
.row > input:not([type="range"]), .row > select { flex: 1; min-width: 0; }
.check { display: flex; gap: 10px; align-items: center; min-height: 44px; }
.note { color: var(--ink-soft); font-size: 13px; margin: 6px 0; }
.error { color: var(--error); font-size: 14px; }
.eyebrow { margin: 0; font-size: 12px; color: var(--ink-soft); }
h2 { margin: 0; font-size: 17px; line-height: 1.25; }
h2:focus { outline: none; }
h3 { font-size: 15px; margin: 14px 0 4px; }
details.fold { border-top: 1px solid var(--paper-inset); margin-top: 12px; padding-top: 4px; }
details.fold > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-size: 14px; }
/* Keep a copy (save-copy-view.js): the download, and a copy to bring back chosen by its label. */
.copy-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.file-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.file-button { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 12px; background: var(--button); cursor: pointer;
  box-shadow: inset 0 2px var(--button-hi), inset 0 -2px var(--button-lo); }
.file-input:focus-visible + .file-button { outline: 3px solid var(--paper-step); outline-offset: 2px; }

/* ---- Sheets: centred cards over the dimmed room ----
   Even margins on every side, clear of the status and gesture bars; short panels hug their
   content, tall ones (the journal) grow but never fill the screen, so the room stays in view.
   --vh is the visible height: it shrinks when the keyboard opens (set from visualViewport). */
:root { --vh: 100dvh; --gap: max(14px, env(safe-area-inset-top)); --gap-bottom: max(14px, env(safe-area-inset-bottom)); }
dialog.sheet { position: fixed; inset: 0; margin: auto; width: min(calc(100% - 28px), 520px); max-width: none;
  height: fit-content; max-height: calc(var(--vh) - var(--gap) - var(--gap-bottom) - 16px);
  padding: 4px; border: 0; background: transparent; color: var(--ink); overflow: visible; }
dialog.sheet.tall { height: min(calc(var(--vh) - var(--gap) - var(--gap-bottom) - 16px), 760px); }
dialog.sheet::backdrop { background: rgba(18, 14, 10, .42); }
dialog.sheet[open] { animation: settle .18s ease-out; }
@keyframes settle { from { transform: translateY(10px) scale(.98); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { dialog.sheet[open] { animation: none; } }
.sheet-paper { display: flex; flex-direction: column; height: 100%; max-height: calc(var(--vh) - var(--gap) - var(--gap-bottom) - 24px); background: var(--paper);
  border: 4px solid var(--paper-edge); box-shadow: 4px 0 var(--paper-step), -4px 0 var(--paper-step), 0 4px var(--paper-step), 0 -4px var(--paper-step), inset 0 0 0 3px var(--paper-inset); }
.sheet-head { position: relative; display: flex; align-items: flex-end; gap: 10px; padding: 10px 56px 8px 12px; border-bottom: 2px solid var(--paper-inset); flex: none; }
.sheet-head > div { flex: 1; min-width: 0; padding-bottom: 4px; }
.sheet-endie { flex: none; height: 64px; width: auto; margin-top: -34px; }
/* The close button sits tight in the paper's top-right corner, inside its inset line. */
.sheet-close { position: absolute; top: 3px; right: 3px; width: 48px; min-width: 48px; min-height: 48px; font-size: 20px; padding: 0; }
.tabs { flex: none; }
.sheet-body { padding: 10px 14px 16px; overflow-y: auto; overscroll-behavior: contain; min-height: 0; flex: 1; }
.sheet-body > p:first-child { margin-top: 2px; }

/* ---- The clock ---- */
.timing-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 8px 0; }
.timing-row label, label.intention { display: grid; gap: 4px; font-size: 13px; }
label.intention { margin-top: 4px; }
.optional { color: var(--ink-soft); font-size: 12px; }
.focus-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; }
#focus-intention { margin: 2px 0 0; font-size: 15px; overflow-wrap: anywhere; }
#focus-clock { font-size: 34px; line-height: 1; letter-spacing: 1px; }
progress { width: 100%; height: 12px; appearance: none; border: 2px solid var(--paper-edge); background: #fcf0cc; }
progress::-webkit-progress-bar { background: #fcf0cc; }
progress::-webkit-progress-value { background: var(--primary); }
progress::-moz-progress-bar { background: var(--primary); }
.receipt { color: var(--ink); }

/* ---- On a big screen the windows grow with it (zoom), so they keep their size beside the room ----
   Inside a zoomed window every length is zoomed, the screen's own too, so the windows take their limits
   from --vwz and --vhz: the screen's width and visible height in the window's own px. */
:root { --z: 1; --vwz: calc(100vw / var(--z)); --vhz: calc(var(--vh) / var(--z)); }
@media (min-width: 1000px) and (min-height: 960px) { :root { --z: 1.25; } }
@media (min-width: 1250px) and (min-height: 1150px) { :root { --z: 1.5; } }
@media (min-width: 1500px) and (min-height: 1380px) { :root { --z: 1.75; } }
dialog.object, dialog.book { zoom: var(--z); }

/* ---- The journal: the live room's book, its art at about twice its pixels, over the dimmed room ----
   Sideways, the two-page spread (352 x 180 art px); upright (narrow), one page at a time (176 x 180).
   It fits the visible height, leaving room for the tabs above (and, upright, Endie over them). */
:root { --book-w: min(704px, calc(var(--vwz) - 32px), calc((var(--vhz) - 104px) * 1.9556)); }
@media (max-width: 650px) { :root { --book-w: min(352px, calc(var(--vwz) - 32px), calc((var(--vhz) - 150px) * .9778)); } }
dialog.book { position: fixed; inset: 0; margin: auto; width: var(--book-w); height: fit-content; max-width: none; max-height: none;
  padding: 48px 0 0; border: 0; background: transparent; color: #554e3b; overflow: visible; }
@media (max-width: 650px) { dialog.book { padding-top: 0; } }
dialog.book::backdrop { background: rgba(18, 14, 10, .42); }
dialog.book[open] { animation: book-arrive .12s steps(3, end); }
@keyframes book-arrive { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { dialog.book[open] { animation: none; } }
.book button { min-height: 32px; padding: 5px 8px; font-size: 12px; background: #dfcf9f; color: #514d3d; box-shadow: inset 0 2px #f7e9bf, inset 0 -2px #b29a69; }
.book button.primary { background: #4d7768; color: #fff0c5; box-shadow: inset 0 2px #81a080, inset 0 -3px #34564b; }
.book-top { position: relative; z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: 6px; margin: 0 2% -3px 4%; }
@media (max-width: 650px) { .book-top { margin: 64px 4% -3px 6%; } }
.book-tabs { display: flex; gap: 4px; min-width: 0; }
.book .book-tabs button { min-height: 32px; padding: 6px 9px 7px; background: #9db39e; color: #3f594b; box-shadow: inset 0 2px #c5d1ad, inset 2px 0 #536f5c, inset -2px 0 #536f5c; }
.book .book-tabs button:nth-child(2) { background: #cf9c85; color: #614a39; box-shadow: inset 0 2px #e1b69a, inset 2px 0 #956f56, inset -2px 0 #956f56; }
.book .book-tabs button:nth-child(3) { background: #d5bb7d; color: #614f32; box-shadow: inset 0 2px #ebd69b, inset 2px 0 #9f8655, inset -2px 0 #9f8655; }
.book .book-tabs button:nth-child(4) { background: #a9b6c2; color: #3e4b58; box-shadow: inset 0 2px #c9d2da, inset 2px 0 #66778a, inset -2px 0 #66778a; }
.book .book-tabs button[aria-pressed="true"] { transform: translateY(-3px); padding-bottom: 10px; background: #f4e8c6; color: #3b5b4c; }
.book .book-close { min-width: 40px; min-height: 36px; margin-bottom: 4px; padding: 0; font-size: 18px; }
/* A narrow phone: the tabs a little closer, so the last isn't under the close button. */
@media (max-width: 380px) { .book .book-tabs button { padding: 6px 5px 7px; font-size: 11px; } .book-tabs { gap: 3px; } }
.book-shell { position: relative; isolation: isolate; width: 100%; aspect-ratio: 352 / 180; }
@media (max-width: 650px) { .book-shell { aspect-ratio: 176 / 180; } }
.book-art { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; pointer-events: none; z-index: -1; }
/* Endie reads along over the top of the right page (upright, over the tabs). */
.book-endie { position: absolute; right: 22%; bottom: calc(100% - 22px); z-index: 3; pointer-events: none; image-rendering: pixelated; }
@media (max-width: 650px) { .book-endie { right: 8%; bottom: calc(100% + 30px); } }
.turning-page { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; image-rendering: pixelated; }
.book .book-ribbon { position: absolute; left: 86.4%; top: 3%; width: 6.3%; height: 18%; min-height: 0; padding: 0; background: transparent; box-shadow: none; z-index: 6; }
@media (max-width: 650px) { .book .book-ribbon { left: 75.2%; width: 8.5%; } }
.book-ribbon:focus-visible { outline: 2px dashed #9b6e5d; outline-offset: 1px; }
.book-pages { position: absolute; inset: 9.2% 4.3% 13%; display: grid; grid-template-columns: 1fr 1fr; gap: 5.1%; }
@media (max-width: 650px) {
  .book-pages { inset: 9.4% 8% 12.2%; grid-template-columns: 1fr; gap: 0; }
  .book[data-side="left"] .book-right, .book[data-side="right"] .book-left { display: none; }
}
.book-page { min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #b4ab81 transparent; padding: 0 5px 6px 0; font-size: 12px; line-height: 1.5; }
.book-right { text-align: center; }
.book-date { margin: 0 0 8px; color: #7b7155; font-size: 12px; }
.book-page h3 { font-size: 18px; line-height: 1.2; margin: 0 0 10px; color: #4c6250; }
.book-page .note, .book-prose { font-size: 12px; color: #776a50; }
.book-page .eyebrow { color: #887650; margin-bottom: 6px; }
#book-story h3 { font-size: 22px; margin-bottom: 6px; }
.book-page input[type="text"], .book-page input:not([type]) { min-height: 36px; font-size: 12px; padding: 6px 8px; border: 0; border-bottom: 2px solid #baaa7f; background: #fff1d2; }
.book-page .task-check { min-height: 36px; }
.book-page .task-text, .book-page .journal-task { font-size: 12px; }
.book-page details.fold > summary { min-height: 36px; font-size: 12px; }
#book-swatch { width: 104px; height: 128px; margin: 6px auto 0; image-rendering: pixelated; }
#book-swatch-caption { margin: 4px auto 10px; }
.book-right .thoughts { margin-top: 14px; text-align: left; border-top: 2px dashed #cdbb8f; padding-top: 8px; }
.book-right .thoughts h4 { margin: 0 0 6px; font-size: 14px; font-weight: normal; color: #8a5f55; }
.book-footer { position: absolute; bottom: 3.4%; left: 4%; right: 4%; height: 32px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.book .book-footer button { min-width: 40px; min-height: 28px; padding: 0 8px; background: #55776a; box-shadow: inset 0 2px #81a080, inset 0 -2px #36584b; color: #fff0c5; font-size: 16px; }
.book .book-footer button:disabled { opacity: .35; }
#book-prev { justify-self: start; } #book-next { justify-self: end; grid-column: 3; }
#book-page-label { grid-column: 2; grid-row: 1; font-size: 12px; white-space: nowrap; color: #eee1b8; background: #55776a; padding: 2px 6px; }
#book-page-label:focus { outline: none; }
.task-list, .thought-list, .days { list-style: none; padding: 0; margin: 8px 0; }
.today-item, .thought { padding: 6px 0; border-bottom: 1px dashed var(--paper-inset); }
.task-line { display: flex; gap: 8px; align-items: center; }
.task-check { display: flex; align-items: center; min-width: 32px; min-height: 44px; }
.task-text { flex: 1; overflow-wrap: anywhere; }
.task-done { text-decoration: line-through; color: var(--ink-soft); }
.task-selected .task-text { font-weight: bold; }
.task-options { min-width: 44px; }
.task-tools, .thought-tools, .task-edit { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 4px 40px; }
.task-edit input { flex: 1; min-width: 120px; }
.thoughts { margin-top: 16px; border-top: 2px solid var(--paper-inset); }
.thought-text { margin: 0; overflow-wrap: anywhere; }
.thought-meta { margin: 2px 0; font-size: 12px; color: var(--ink-soft); }
.journal-day h3 { margin: 12px 0 2px; }
.journal-entry { padding: 6px 0; border-bottom: 1px dashed var(--paper-inset); }
.journal-task { margin: 0; overflow-wrap: anywhere; }
.journal-detail { margin: 0; font-size: 12px; color: var(--ink-soft); }
.journal-result { font-size: 12px; color: var(--primary); }
.week-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.week-bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; align-items: end; height: 120px; margin: 12px 0 4px; }
.week-bar { background: var(--primary); box-shadow: inset 0 2px var(--primary-hi); min-height: 2px; }
.week-bar.empty { background: var(--paper-inset); box-shadow: none; }
.week-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; text-align: center; font-size: 11px; color: var(--ink-soft); }
/* Your drawings in Keepsakes: each on a little paper with a dark edge, its buttons under it. */
.drawings { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 12px; margin-top: 8px; }
.drawing { margin: 0; }
.drawing canvas { display: block; width: 100%; aspect-ratio: 4 / 3; image-rendering: pixelated; box-shadow: 0 0 0 2px #8f7a55; }
.drawing figcaption { font-size: 12px; min-height: 18px; margin: 4px 0 0; }
.drawing .row { margin: 2px 0 0; gap: 4px; }
.drawing button { min-height: 36px; padding: 4px 8px; font-size: 12px; }
#drawings-note:empty { display: none; }
.keepsakes { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 12px; margin-top: 10px; }
.keepsake { text-align: center; font-size: 12px; }
.keepsake canvas { width: 78px; height: 96px; image-rendering: pixelated; }
.keepsake .throw-choice { display: block; width: 100%; margin-top: 4px; padding: 4px 2px; font-size: 12px; }
/* The throw's current choice is shown at full strength, not faded as a disabled button is. */
.throw-choice[aria-pressed="true"]:disabled, #throw-newest[aria-pressed="true"]:disabled { opacity: 1; }

/* ---- Windows that are the things themselves: no paper card, but the thing (the radio, …) with its
   controls on a part of it. --k is the size of one of the thing's art pixels. ---- */
dialog.object { position: fixed; inset: 0; margin: auto; width: fit-content; height: fit-content; max-width: calc(var(--vwz) - 16px);
  max-height: calc(var(--vhz) - 16px); padding: 0; border: 0; background: transparent; color: #554e3b; overflow: visible; }
dialog.object::backdrop { background: rgba(18, 14, 10, .42); }
dialog.object[open] { animation: book-arrive .12s steps(3, end); }
@media (prefers-reduced-motion: reduce) { dialog.object[open] { animation: none; } }
.object button { min-height: 40px; padding: 6px 10px; font-size: 13px; background: #dfcf9f; color: #514d3d; box-shadow: inset 0 2px #f7e9bf, inset 0 -2px #a6956d; }
.object button[aria-pressed="true"] { background: #547563; color: #f9ebc4; box-shadow: inset 0 2px #94ac88, inset 0 -2px #3d5b4e; }
.object button.primary { background: #4d7768; color: #fff0c5; box-shadow: inset 0 2px #81a080, inset 0 -3px #34564b; }
.object button:disabled { opacity: .55; }
/* The close button sits inside the top-right corner of each window's own card (its paper, its cloth, its
   lining), 8 px in from its edge: --x-top and --x-right say where that corner is in the window. */
.object .object-close { position: absolute; top: var(--x-top, 8px); right: var(--x-right, 8px); z-index: 6; min-width: 40px; width: 40px; padding: 0; font-size: 18px; }

/* The radio: the open portable radio (web/room-radio.js) with Endie at its big dial, and its front flap
   folded down below it holding the mixer, as in the live room. Sideways, the flap sits beside it. */
.radio { --k: min(3px, calc((var(--vwz) - 24px) / 134)); --x-top: calc(70 * var(--k) + 7px); --x-right: calc(7 * var(--k) + 8px); }
.radio-hero { position: relative; width: calc(128 * var(--k)); height: calc(70 * var(--k)); margin-right: calc(6 * var(--k)); }
#radio-art { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.radio-endie { position: absolute; left: calc(90 * var(--k)); top: calc(27 * var(--k)); width: calc(44 * var(--k)); height: calc(44 * var(--k)); margin: 0; image-rendering: pixelated; pointer-events: none; }
.radio-flap { position: relative; width: calc(120 * var(--k)); margin: -1px auto 0; padding: 10px 12px; border: 4px solid #625c48; background: #e4d8b2;
  box-shadow: inset 0 3px #fff1cd, inset 0 -3px #afa27b, 4px 4px #a18a64; max-height: calc(var(--vhz) - 70 * var(--k) - 40px); overflow: auto; overscroll-behavior: contain; font-size: 13px; }
@media (min-width: 651px) {
  .radio { --k: min(3px, calc((var(--vwz) - 32px) / 254)); --x-top: 8px; --x-right: 8px; }
  dialog.radio[open] { display: flex; align-items: flex-end; }
  .radio-hero { margin-right: 0; }
  .radio-flap { margin: 0 0 calc(2 * var(--k)) calc(-1 * var(--k)); max-height: calc(var(--vhz) - 24px); }
}
.radio-power { display: flex; align-items: center; gap: 12px; margin: 2px 0 8px; padding-right: 40px; }
.radio-power button { flex: none; white-space: nowrap; }
.radio-power span { font-size: 12px; color: #797357; }
.radio .mixer-row { display: grid; grid-template-columns: 112px minmax(40px, 1fr) 40px; gap: 8px; align-items: center; margin: 6px 0; }
.radio .mixer-row > button, .radio .mixer-row > label { min-width: 0; font-size: 12px; text-align: left; }
.radio output { font-size: 12px; text-align: right; }
.radio .check { font-size: 12px; margin: 6px 0; }
.radio-balance { font-size: 12px; margin-top: 4px; }
.radio-balance > summary { min-height: 36px; display: flex; align-items: center; cursor: pointer; }
.radio-status { font-size: 12px; color: #747056; margin: 6px 0 0; }
/* The radio's stations: three buttons side by side; the one it's on is pressed in, with a dark rule under
   its word (not colour alone), and the dial's needle points at it. */
.radio-stations { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 4px 0 2px; }
.radio-stations button { min-width: 0; padding: 6px 4px; font-size: 12px; text-align: center; }
.radio-stations button[aria-pressed="true"] { box-shadow: inset 0 -4px #2f352c; text-decoration: underline; text-underline-offset: 3px; }
.station-note { margin: 2px 0 6px; }
/* The piece on the radio (her focus music), and a button on to the next. */
.radio-track { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 4px 0 8px; font-size: 13px; }
.radio-track span { font-size: 12px; color: #797357; }
.radio-track output { flex: 1 1 8em; color: #3d4f42; }
.radio-track button { min-height: 36px; padding: 4px 10px; font-size: 12px; }
/* The sliders as the radio's own: a sunken track and a square cream knob. */
.radio input[type="range"] { appearance: none; height: 32px; min-width: 0; background: transparent; accent-color: #587b64; }
.radio input[type="range"]::-webkit-slider-runnable-track { height: 6px; background: #aab197; border-bottom: 2px solid #929a7d; }
.radio input[type="range"]::-webkit-slider-thumb { appearance: none; width: 16px; height: 20px; margin-top: -7px; background: #f1ddb0; border: 2px solid #837958; box-shadow: inset 2px 0 #fff0c5; }
.radio input[type="range"]::-moz-range-track { height: 6px; background: #aab197; border-bottom: 2px solid #929a7d; }
.radio input[type="range"]::-moz-range-thumb { width: 12px; height: 16px; background: #f1ddb0; border: 2px solid #837958; border-radius: 0; }

/* Wisp's bed: the live room's quilted card, sage-edged with a stitched seam inside, round his cushion with
   the blanket that's his bedding; Endie plays with his tail beside it (her scene sits on the picture). */
dialog.bed { --k: 3px; width: min(calc(144 * var(--k) + 36px), calc(var(--vwz) - 16px)); }
/* Sideways, the picture on the left and its words and buttons beside it. */
@media (min-width: 651px) {
  dialog.bed { width: min(720px, calc(var(--vwz) - 16px)); }
  .bed-card { display: grid; grid-template-columns: 3fr 2fr; grid-template-rows: auto auto 1fr auto auto auto; column-gap: 18px; align-items: start; }
  .bed-card h2, .bed-card h3 { grid-column: 1 / -1; }
  .bed-stage { grid-column: 1; grid-row: 3 / span 4; align-self: center; }
  .bed-card > p, .bed-navigation, .bed-buttons { grid-column: 2; }
  .bed-buttons { justify-content: flex-start; }
}
.bed-card { position: relative; padding: 18px 14px 12px; background: #eee1ba; border: 4px solid #647e68;
  box-shadow: inset 0 0 0 3px #c3cda1, 4px 0 #435e50, -4px 0 #435e50, 0 4px #435e50, 0 -4px #435e50; max-height: calc(var(--vhz) - 32px); overflow: auto; overscroll-behavior: contain; }
.bed-card::before { content: ''; position: absolute; inset: 8px; border: 2px dashed #b8bc93; pointer-events: none; }
.bed-card h2 { font-size: 16px; color: #4b6754; margin: 0 44px 2px 0; }
.bed-card h3 { font-size: 13px; font-weight: normal; margin: 0 0 6px; color: #4b6754; min-height: 18px; }
.bed-card p { font-size: 12px; line-height: 1.5; margin: 8px 0; }
.bed-stage { position: relative; width: 100%; aspect-ratio: 144 / 72; }
#bed-preview { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.bed-endie { position: absolute; left: calc(96 / 144 * 100%); top: 0; width: calc(64 / 144 * 100%); height: 100%; margin: 0; image-rendering: pixelated; pointer-events: none; }
.bed-navigation { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bed-navigation #bed-page { font-size: 12px; text-align: center; }
.bed-navigation button { min-width: 44px; }
.bed-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 10px 0 0; }
.bed .primary { background: #527563; color: #fff0c5; box-shadow: inset 0 2px #91a88a, inset 0 -2px #36584a; }
#bed-feedback { color: #4b715e; margin-bottom: 0; } #bed-error { color: #8a4848; }
#bed-feedback:empty, #bed-error:empty { display: none; }

/* A moment with Endie: a wooden tea tray with a checked cloth, each moment a little picture card on it,
   and Endie sitting on the tray's rim with her mug. */
dialog.company { width: min(400px, calc(var(--vwz) - 16px)); --perch: 108px; --x-top: calc(var(--perch) + 17px); --x-right: 17px; }
.tray { position: relative; margin-top: var(--perch); padding: 10px; background: #a8743f; border: 3px solid #5e3b22;
  box-shadow: inset 0 3px #c99159, inset 0 -3px #7b4f2b, 4px 4px #3d2817; }
/* The tray's two handles: slots cut into its short sides. */
.tray::before, .tray::after { content: ''; position: absolute; top: 50%; width: 6px; height: 34px; margin-top: -17px; background: #3d2817; box-shadow: inset 2px 0 #24170d; }
.tray::before { left: 2px; } .tray::after { right: 2px; }
.tray-cloth { padding: 10px 14px 8px; background-color: #f2e6c4;
  background-image: repeating-linear-gradient(90deg, rgba(120, 150, 128, .16) 0 8px, transparent 8px 16px), repeating-linear-gradient(0deg, rgba(120, 150, 128, .16) 0 8px, transparent 8px 16px);
  box-shadow: inset 0 0 0 2px #d6c494; max-height: calc(var(--vhz) - var(--perch) - 52px); overflow: auto; overscroll-behavior: contain; }
.company-endie { position: absolute; right: 18%; top: -120px; margin: 0; height: 120px; pointer-events: none; image-rendering: pixelated; }
.tray-cloth h2 { font-size: 16px; color: #4c6250; margin: 0 44px 2px 0; }
.tray-cloth h2 + .tray-note { margin-right: 44px; }
.tray-note { font-size: 12px; color: #6f6448; margin: 4px 0 8px; }
.moment-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin: 8px 0; }
.object .moment-card { display: grid; justify-items: center; align-content: start; gap: 2px; min-height: 104px; padding: 8px 4px 6px; background: #fbf1d6; color: #514d3d;
  border: 2px solid #8a7550; box-shadow: 2px 2px #c4ad7d; font-size: 11px; line-height: 1.25; text-align: center; }
.object .moment-card canvas { width: 72px; height: 60px; image-rendering: pixelated; }
.object .moment-card:active:not(:disabled) { transform: translate(1px, 1px); box-shadow: 1px 1px #c4ad7d; }
.object .moment-card:disabled { opacity: .55; }

/* Our knitting: her wicker basket, its rim braided, lined with cream cloth; the yarn families are balls
   of yarn to pick from, and Endie knits on the rim. */
dialog.craft { width: min(440px, calc(var(--vwz) - 16px)); --perch: 104px; --x-top: calc(var(--perch) + 25px); --x-right: 25px; }
.basket { position: relative; margin-top: var(--perch); padding: 18px 18px 20px; border: 3px solid #4f3219; box-shadow: 4px 4px #2f1e0f;
  background-color: #b07d43;
  background-image: repeating-linear-gradient(0deg, rgba(60, 34, 12, .55) 0 2px, transparent 2px 6px),
    repeating-linear-gradient(90deg, rgba(255, 228, 176, .35) 0 6px, rgba(60, 34, 12, .25) 6px 8px, transparent 8px 14px); }
/* The braided rim. */
.basket::before { content: ''; position: absolute; left: -6px; right: -6px; top: -9px; height: 12px; border: 3px solid #4f3219;
  background: repeating-linear-gradient(60deg, #c99555 0 5px, #8d5c2c 5px 8px, #e0b072 8px 10px); }
.basket-lining { padding: 10px 12px 8px; background: #f3e8c8; box-shadow: inset 0 0 0 2px #d4c08e, inset 0 0 0 5px #f3e8c8, inset 0 0 0 6px #c9b37f;
  max-height: calc(var(--vhz) - var(--perch) - 56px); overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; font-size: 13px; }
.craft-endie { position: absolute; right: 10%; top: -122px; margin: 0; height: 120px; pointer-events: none; image-rendering: pixelated; }
.basket-lining h2 { font-size: 16px; color: #4c6250; margin: 0 44px 4px 0; }
.basket-lining h3 { font-size: 14px; margin: 12px 0 2px; }
.yarn-balls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; flex: 1; }
.object .yarn-balls button { display: grid; justify-items: center; gap: 0; min-height: 0; padding: 4px 2px; font-size: 11px; background: #fbf1d6;
  border: 2px solid #c4ad7d; box-shadow: none; color: #514d3d; }
.object .yarn-balls button[aria-pressed="true"] { border-color: #547563; background: #e5ecd6; box-shadow: inset 0 0 0 1px #547563; color: #2f4a3c; }
.craft .yarn-balls canvas { width: 48px; height: 40px; flex: none; image-rendering: pixelated; }
/* On a short screen (a phone held sideways), Endie sits smaller on the tray's and the basket's rims, so
   more of them shows. */
@media (max-height: 520px) {
  dialog.company, dialog.craft { --perch: 70px; }
  .company-endie, .craft-endie { zoom: .6; }
}
/* On a wide screen her book and her scarves sit beside the blanket and its yarn. */
@media (min-width: 900px) {
  dialog.craft { width: min(780px, calc(var(--vwz) - 16px)); }
  .basket-lining { display: grid; grid-template-columns: 1fr 1fr; column-gap: 22px; align-items: start; }
  .basket-lining > h2 { grid-column: 1 / -1; }
  .basket-side .pattern-book { margin-top: 0; padding-top: 0; border-top: 0; }
  .basket-side .pattern-book > h3 { margin-top: 0; }
}

/* The guide: a note from Endie pinned to the wall, on ruled paper with a red margin line and a red pin;
   its back holds the settings. Endie hangs upside down from its bottom edge, waving. */
dialog.guide { width: min(420px, calc(var(--vwz) - 16px)); padding-bottom: 96px; }
.note-paper { position: relative; padding: 22px 16px 14px 34px; color: #4f4a3a; font-size: 13px; line-height: 22px;
  background-color: #f8efd5; background-image: linear-gradient(90deg, transparent 25px, #d9a291 25px 27px, transparent 27px),
    repeating-linear-gradient(180deg, transparent 0 21px, #dccfab 21px 22px);
  border: 2px solid #c5b081; box-shadow: 3px 3px #8f7b55, 6px 6px rgba(40, 28, 16, .35); max-height: calc(var(--vhz) - 128px); overflow: auto; overscroll-behavior: contain; }
.note-pin { position: absolute; top: 4px; left: 50%; width: 10px; height: 10px; margin-left: -5px; background: #c24a3e;
  box-shadow: inset -2px -2px #8a2d25, inset 2px 2px #e5806f, 0 3px rgba(40, 28, 16, .3); }
.note-paper h2 { font-size: 17px; line-height: 22px; color: #4c6250; margin: 0 44px 0 0; }
.note-back h3 { margin-right: 44px; }
.note-paper h3 { font-size: 15px; margin: 0; }
.note-paper h3:focus { outline: none; }
.note-paper p { margin: 0 0 22px; }
.note-paper .note { font-size: 12px; margin: 0 0 6px; }
/* Signed with her name as the channel letters it (Pixel/channel, Daniel's pick N1), at its own pixels. */
.note-sign { text-align: right; margin: 0 4px 0 0 !important; line-height: 0; }
.note-sign img { width: 119px; height: 48px; image-rendering: pixelated; }
.note-things { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.object .note-things button, .object .note-paper .row button { min-height: 36px; font-size: 12px; padding: 4px 8px; }
.object .note-turn { display: block; margin: 8px 0 0 auto; background: transparent; box-shadow: none; color: #8a5f55; text-decoration: underline; min-height: 36px; padding: 0; }
.help-endie { position: absolute; right: 48px; bottom: -26px; margin: 0; height: 128px; pointer-events: none; image-rendering: pixelated; }
.note-paper.turning { animation: note-turn .24s steps(4, end); }
@keyframes note-turn { 50% { transform: scaleX(.06); } }
@media (prefers-reduced-motion: reduce) { .note-paper.turning { animation: none; } }

/* Window & light: the window itself. Its three panes are the view through the nook's window by day, at
   sunset and at night (the room's own drawing; rain shows on them when it falls), and you choose the light by
   choosing a pane. Below is the sill, with the rain, the latch and the fire, where Endie sits watching. */
dialog.window { width: min(400px, calc(var(--vwz) - 16px)); }
.window-frame { position: relative; padding: 12px 14px 0; background: #8b5a33; border: 3px solid #4a2d17;
  box-shadow: inset 0 3px #b07a48, inset 0 -3px #6c4325, 4px 4px #2f1e0f; color: #fff0c8; }
.window-frame h2 { font-size: 16px; color: #fff0c8; text-shadow: 1px 1px #3d2817; margin: 0 44px 10px 0; }
.panes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-right: 78px; }
.object .pane { display: grid; gap: 6px; justify-items: center; min-height: 0; padding: 4px; background: #5e3a1f;
  box-shadow: inset 0 0 0 2px #3d2512; color: #f3e3b8; font-size: 12px; }
.pane canvas { width: 100%; aspect-ratio: 37 / 58; image-rendering: pixelated; box-shadow: 0 0 0 2px #3d2512; }
@media (orientation: landscape) and (max-height: 520px) { .pane canvas { aspect-ratio: 37 / 30; object-fit: cover; object-position: top; } }
.object .pane[aria-pressed="true"] { background: #f1dfae; color: #3d2817; box-shadow: inset 0 0 0 2px #fff4cf, 0 0 0 3px #fff0c8; }
.window-sill { position: relative; margin: 12px -20px 0; padding: 12px 18px 10px; background: #c28a52; border: 3px solid #4a2d17;
  box-shadow: inset 0 3px #e0ad72, inset 0 -3px #8d5d32, 4px 4px #2f1e0f; color: #3d2817; }
.window-sill .row { margin: 0 0 4px; }
.window-sill .check { font-size: 12px; }
.window-endie { position: absolute; right: 8px; top: -118px; margin: 0; height: 128px; pointer-events: none; image-rendering: pixelated; }

/* Her easel: its wooden board with your paper clipped on (a grid of cells, faintly ruled, sketch-pad.js),
   Endie sitting up on the board's top edge, and its ledge below with the crayons, the rubber and what to do
   with the sheet; its two front legs below. --cell is one cell in whole px, so all the cells are the same
   size; sideways on a phone the ledge stands beside the board. */
dialog.sketch { --cell: 12px; --cell: round(down, min(20px, calc((var(--vwz) - 64px) / 24), calc((var(--vhz) - 330px) / 18)), 1px);
  --perch: 100px; --x-top: calc(var(--perch) + 6px); --x-right: 6px; padding-bottom: 22px; }
.easel { position: relative; margin-top: var(--perch); }
.easel::before, .easel::after { content: ''; position: absolute; z-index: -1; bottom: -22px; width: 10px; height: 60px; background: #8b5a33;
  border: 3px solid #4a2d17; box-shadow: inset 3px 0 #b07a48; }
.easel::before { left: 22%; rotate: 9deg; } .easel::after { right: 22%; rotate: -9deg; }
.easel-board { position: relative; padding: 12px 14px 14px; background: #8b5a33; border: 3px solid #4a2d17;
  box-shadow: inset 0 3px #b07a48, inset 0 -3px #6c4325; color: #fff0c8; }
.easel-board h2 { font-size: 16px; color: #fff0c8; text-shadow: 1px 1px #3d2817; margin: 4px 44px 10px 0; }
.easel-clip { position: absolute; left: 50%; top: -10px; width: 36px; height: 16px; margin-left: -18px; background: #cea856;
  border: 3px solid #4a2d17; box-shadow: inset 0 3px #ecd28c, inset 0 -3px #926e32; }
#sketch-paper { display: block; width: calc(var(--cell) * 24); height: calc(var(--cell) * 18); margin: 0 auto; image-rendering: pixelated;
  touch-action: none; cursor: crosshair; background-color: #f4ead2; box-shadow: 0 0 0 3px #3d2512;
  background-image: linear-gradient(90deg, rgba(150, 128, 92, .18) 1px, transparent 1px), linear-gradient(rgba(150, 128, 92, .18) 1px, transparent 1px);
  background-size: var(--cell) var(--cell); }
.sketch-endie { position: absolute; right: 12%; top: -116px; margin: 0; height: 120px; pointer-events: none; image-rendering: pixelated; }
.easel-ledge { position: relative; margin: -3px -10px 0; padding: 8px 12px 6px; background: #c28a52; border: 3px solid #4a2d17;
  box-shadow: inset 0 3px #e0ad72, inset 0 -3px #8d5d32; color: #3d2817; }
.crayons { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.object .crayon { min-height: 40px; min-width: 0; padding: 6px 2px; background: transparent; box-shadow: none; }
.crayon canvas { display: block; width: 100%; max-width: 54px; height: auto; aspect-ratio: 18 / 7; margin: 0 auto; image-rendering: pixelated; }
.object .crayon[aria-pressed="true"] { background: #f1dfae; box-shadow: inset 0 0 0 2px #fff4cf, 0 0 0 3px #3d2817; }
.easel-buttons { justify-content: center; margin: 6px 0 0; }
.easel-ledge .note { margin: 4px 0 0; color: #3d2817; text-align: center; }
.easel-ledge .note:empty { display: none; }
@media (orientation: landscape) and (max-height: 560px) {
  dialog.sketch { --cell: 10px; --cell: round(down, min(16px, calc((var(--vhz) - 190px) / 18), calc((var(--vwz) - 330px) / 24)), 1px);
    --perch: 84px; --x-right: 233px; }
  .sketch-endie { zoom: .75; }
  dialog.sketch[open] { display: flex; align-items: flex-end; }
  .easel { display: flex; align-items: flex-end; }
  .easel-ledge { width: 230px; margin: 0 0 18px -3px; }
  .crayons { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* The clock: the live room's wooden board with the big dial on the wood (Wisp's faces at the hours) and a
   clipped sheet of lined paper. Upright it's the tall board, sideways the wide one, each at twice its pixels
   (clock-tall.png 176 × 214, clock-board.png 304 × 196), with Endie by the dial as the live room placed her.
   On the paper: how long, big in her lettering with − and +, then Start; the rest folds away under More. */
dialog.clock { width: 352px; max-width: calc(var(--vwz) - 16px); --x-top: 142px; --x-right: 31px; }
.clock-board { position: relative; height: 428px; padding: 140px 29px 30px; background: url('../../../web/assets/interface/clock-tall.png') center / 100% 100% no-repeat; image-rendering: pixelated; }
#clock-dial-art { position: absolute; left: 25px; top: 16px; width: 108px; height: 108px; image-rendering: pixelated; }
.clock-endie { position: absolute; left: calc(105 / 176 * 100%); top: calc(3 / 214 * 100%); width: calc(60 / 176 * 100%); height: auto; margin: 0; image-rendering: pixelated; pointer-events: none; }
@media (min-width: 651px) {
  dialog.clock { width: 608px; --x-top: 36px; --x-right: 42px; }
  .clock-board { height: 392px; padding: 34px 40px 38px 272px; background-image: url('../../../web/assets/interface/clock-board.png'); }
  #clock-dial-art { left: 24px; top: 38px; width: 216px; height: 216px; }
  .clock-endie { left: calc(36 / 304 * 100%); top: calc(112 / 196 * 100%); width: calc(60 / 304 * 100%); }
}
.clock-paper { height: 100%; overflow: auto; overscroll-behavior: contain; padding: 0 4px 0 0; font-size: 13px; scrollbar-width: thin; }
.clock-paper h2 { font-size: 16px; color: #4c6250; margin: 0 44px 8px 0; }
.clock-paper > .eyebrow { margin-right: 44px; }
.minutes { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 4px 0 8px; }
.object .minutes-step { min-width: 44px; min-height: 44px; padding: 0; font-size: 22px; }
.object .minutes-show { display: grid; justify-items: center; gap: 0; min-height: 0; padding: 2px 6px; background: transparent; box-shadow: none; color: #776a50; font-size: 12px; }
#minutes-digits, #live-digits { display: block; image-rendering: pixelated; }
#focus-clock { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.clock-more { margin-top: 8px; }
.clock .focus-heading { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.clock .primary.wide { width: 100%; margin-top: 4px; }
.clock .timing-row { grid-template-columns: 1fr 1fr; }

/* ---- Knitting, radio, bed ---- */
.craft-now { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; margin: 10px 0; }
.craft-now canvas { width: 78px; height: 96px; flex: none; }
.craft-now > div { flex: 1; min-width: 0; }
#scarf-wardrobe button { min-width: 44px; }
.mixer-row { display: flex; gap: 8px; align-items: center; margin: 8px 0; }
.mixer-row > button, .mixer-row > label { flex: none; min-width: 112px; text-align: left; font-size: 13px; }
.mixer-row output { flex: none; width: 42px; text-align: right; font-size: 12px; }
canvas.wide-art { display: block; width: 100%; max-width: 288px; height: auto; margin: 8px auto; }

/* ---- Over the room: the timer chip, the guide, notes ---- */
/* The running session over the floor: its part and one button, and its time in Endie's lettering at the
   room's pixel size. Bottom right in both rooms, clear of Endie and of the "?" and the key on the left. */
/* The chip is one of her patches: her cream scarf's knit, dark-edged as the room is, with a pink running
   stitch round it (Daniel's pick, 2 Oct). */
#timer-chip { position: fixed; right: max(12px, calc(env(safe-area-inset-right) + 8px)); bottom: max(16px, calc(env(safe-area-inset-bottom) + 8px));
  display: grid; gap: 2px; padding: 8px 10px 9px; border: 3px solid #8a7550; box-shadow: 0 0 0 2px #2a2420, 4px 4px #2a2420;
  background: #eadcbc radial-gradient(circle at 2px 2px, #d3c199 1px, transparent 1.6px) 0 0 / 6px 6px; }
#timer-chip::before { content: ''; position: absolute; inset: 4px; border: 2px dashed #c4417c; pointer-events: none; }
#timer-chip > * { position: relative; }
.chip-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
#timer-phase { padding-left: 4px; font-size: 15px; }
.chip-button { font-size: 14px; }
/* In a break, a line under the time asks you to play; a tap rings the thing in the room. */
#timer-chip button.chip-invite { justify-self: stretch; max-width: 190px; min-height: 34px; padding: 2px 4px; font-size: 13px; line-height: 1.25; white-space: normal;
  background: transparent; box-shadow: none; color: #6b3552; text-decoration: underline dotted 1px; text-underline-offset: 3px; }
/* Once a session's focus is over, the chip is its note instead (rooms/lib/session-receipt.js): how long, what
   it made, your jar's share and what's next, then another or done. Its X goes back to the break's time. It
   stays the chip's size, clear of Endie. */
#timer-chip.receipt { width: min(238px, calc(100vw - 32px)); padding: 9px 12px 10px; }
#timer-chip.receipt > :not(#session-receipt) { display: none; }
#session-receipt h2 { margin: 0 30px 6px 2px; font-size: 15px; line-height: 1.25; }
#session-receipt p { margin: 0 2px 1px; font-size: 13px; line-height: 1.3; }
#session-receipt p:empty { display: none; }
#session-receipt .receipt-next { margin-top: 3px; color: var(--ink-soft); }
.receipt-choices { display: flex; gap: 6px; margin-top: 7px; }
.receipt-choices button { flex: 1; min-height: 36px; padding: 4px 8px; font-size: 14px; }
#session-receipt button.receipt-close { position: absolute; top: -5px; right: -6px; min-width: 28px; width: 28px; min-height: 28px; padding: 0; font-size: 15px; }
button.chip-time { display: block; justify-self: center; min-height: 0; padding: 0; background: transparent; box-shadow: none; }
#timer-digits { display: block; image-rendering: pixelated; }
#guide-button { position: fixed; left: max(12px, env(safe-area-inset-left)); bottom: max(16px, calc(env(safe-area-inset-bottom) + 8px));
  width: 48px; height: 48px; font-size: 20px; border: 3px solid var(--paper-edge); }
#note { position: fixed; left: 50%; top: max(16px, env(safe-area-inset-top)); transform: translateX(-50%); width: max-content; max-width: calc(100vw - 88px);
  padding: 8px 12px; background: var(--paper); color: var(--ink); border: 3px solid var(--paper-edge); font-size: 14px; }
/* On a narrow screen the room's notes come under your time's button. */
@media (max-width: 600px) { #note { top: calc(max(12px, env(safe-area-inset-top)) + 58px); max-width: calc(100vw - 32px); } }


/* The mini view's button (a computer only), and the compact view the mini view adds after its note. */
.mini-row { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 10px 0 4px; }
.mini-row .note { flex: 1 1 14em; margin: 0; }
/* The compact mini view, inside the page (from the old room's focus-companion.css). */
.compact-companion { padding: 0; border: 4px solid #826347; border-radius: 0; background: #e8d5ac; width: 438px; max-width: calc(100vw - 24px); box-shadow: 0 6px #594d38; }
.compact-companion::backdrop { background: #383e3038; }
.compact-companion > button { display: block; width: 100%; padding: 10px; border: 0; border-bottom: 3px solid #a3815a; border-radius: 0; font: 12px EndieGrid, monospace; color: #465c4d; background: #f4e8c6; cursor: pointer; }
.compact-companion iframe { display: block; border: 0; width: 100%; height: 315px; }
#mini-compact { font: inherit; font-size: 0.85em; padding: 4px 0; background: none; border: 0; text-decoration: underline; color: inherit; cursor: pointer; }

/* Your time: its button top right (the jar and how much is in it, and for a few seconds what a session
   added), and its window (a paper label round a big jar). */
#jar-button { position: fixed; right: max(12px, env(safe-area-inset-right)); top: max(12px, env(safe-area-inset-top));
  display: flex; align-items: center; gap: 6px; height: 48px; padding: 0 10px 0 6px; border: 3px solid var(--paper-edge); font-size: 15px; color: #33463a; }
#jar-icon { width: 26px; height: 30px; image-rendering: pixelated; }
#jar-added { color: #7a3f2c; }
/* On a big screen, the room's buttons and the session's chip grow with it, as the windows do. */
#timer-chip, #guide-button, #key-button, #jar-button { zoom: var(--z); }
dialog.object.jar { padding: 0; background: transparent; border: 0; }
.jar-card { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; max-width: 440px; padding: 18px 20px; background: #f4e8c6; border: 4px solid #826347; box-shadow: 0 6px #594d38, inset 0 0 0 2px #e1c997; color: #3d4f42; }
#jar-art { width: 104px; height: 120px; image-rendering: pixelated; }
.rooms-card h2 { margin-right: 44px; }
@media (min-width: 421px) { .jar-label h2 { margin-right: 44px; } }
.jar-total { margin: 4px 0 8px; font: 32px/1.1 EndieGrid, monospace; color: #33463a; }
@media (max-width: 420px) { .jar-card { grid-template-columns: 1fr; justify-items: center; text-align: center; } }
.jar-give { margin: 10px 0 6px; padding-top: 8px; border-top: 2px dashed #c7ab7a; }
.jar-give h3 { margin: 0 0 4px; font-size: 1em; }
#jar-choices button { margin: 0 6px 6px 0; }

/* The key, beside the guide's "?": it opens the rooms. */
#key-button { position: fixed; left: calc(max(12px, env(safe-area-inset-left)) + 56px); bottom: max(16px, calc(env(safe-area-inset-bottom) + 8px));
  width: 48px; height: 48px; padding: 0; border: 3px solid var(--paper-edge); display: grid; place-items: center; }
#key-art { width: 36px; height: 22px; image-rendering: pixelated; }
.rooms-card { padding: 18px 20px; max-width: 460px; background: #f4e8c6; border: 4px solid #826347; box-shadow: 0 6px #594d38, inset 0 0 0 2px #e1c997; color: #3d4f42; }
.room-cards { display: flex; gap: 12px; align-items: flex-end; justify-content: center; margin: 10px 0 12px; }
.room-card { display: grid; gap: 6px; justify-items: center; padding: 8px; }
.room-card canvas { width: 90px; image-rendering: auto; border: 2px solid #826347; }
.room-card[data-room="landscape"] canvas { width: 180px; }
.room-card[aria-pressed="true"], .rooms-card [data-room="auto"][aria-pressed="true"] { outline: 3px solid #4f7867; outline-offset: 2px; }
@media (max-width: 420px) { .room-card[data-room="landscape"] canvas { width: 150px; } .room-card canvas { width: 76px; } }
/* Every thing's name at once: a little space between neighbours. */
body.showing-all .room-thing span { padding: 0 5px; }

/* Before anything else, the dark: the page starts in it, and it lifts once the room is ready (or Endie's
   first run takes it over). */
#cover { position: fixed; inset: 0; z-index: 4; background: #080605; pointer-events: none; transition: opacity .6s; }
#cover.gone { opacity: 0; }

/* Endie's first run (first-run.js): the dark, the crow's circle, her house and the night on their own
   pixel grid (the stage); her warm glow over it (and the tap to go on); Endie close up; the glass's
   ripples and the rings where to tap (fx, first-run-fx.js); the crow's card beside his circle; the nook's
   window opening onto the room (into: the night with a hole in it, growing); the key she holds out; in her
   room, the crow's smudge and his card by it, the thing he's talking about lit, and four balls of yarn;
   and the bell's card after your first session. Reduced motion holds every step still. While one of the
   room's windows is open, it waits behind. */
#first-run { position: fixed; inset: 0; z-index: 5; pointer-events: none; }
#first-run button { pointer-events: auto; }
body:has(dialog[open]) #first-run { visibility: hidden; }
.fr-dark, .fr-dark:active:not(:disabled) { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; border: 0; box-shadow: none; cursor: pointer; background: transparent; }
/* Her warm glow, with a hole where the crow's circle is: he's never lit by her light. */
.fr-glow { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgb(150 104 60 / var(--w, 0)) 0, rgb(120 84 50 / calc(var(--w, 0) * .35)) var(--r, 200px), transparent calc(var(--r, 200px) * 2.2));
  -webkit-mask-image: radial-gradient(circle at var(--cx, -99px) var(--cy, -99px), transparent var(--cr, 0px), #000 calc(var(--cr, 0px) + 1px));
  mask-image: radial-gradient(circle at var(--cx, -99px) var(--cy, -99px), transparent var(--cr, 0px), #000 calc(var(--cr, 0px) + 1px)); }
.fr-dark:focus-visible { outline: none; }
.fr-her, .fr-stage, .fr-fx, .fr-smudge { position: fixed; image-rendering: pixelated; pointer-events: none; }
.fr-stage, .fr-fx { left: 0; top: 0; }
#first-run.into :is(.fr-stage, .fr-glow, .fr-dark, .fr-her) {
  -webkit-mask-image: radial-gradient(circle at var(--ix) var(--iy), transparent var(--ir), #000 calc(var(--ir) + 1px));
  mask-image: radial-gradient(circle at var(--ix) var(--iy), transparent var(--ir), #000 calc(var(--ir) + 1px)); }
/* The crow's words: his card, knitted in black and white like him (its frame is pixels, first-run-fx.js
   cardFrame, with its stepped tail to him: beside, below or above), typed out; a mark when a tap goes on. */
.fr-say { position: fixed; z-index: 1; isolation: isolate; padding: 18px 21px; pointer-events: none; font: 17px/1.35 'Special Elite', monospace; color: #ececec; min-height: 3.6em; }
.fr-frame { position: absolute; z-index: -1; image-rendering: pixelated; }
.fr-words { position: relative; }
/* His last card can be closed: a × in its corner, a square of the same felt. */
.fr-say.closable { padding-right: 54px; }
.fr-close, .fr-close:active:not(:disabled) { position: fixed; z-index: 2; width: 36px; height: 36px; min-height: 0; padding: 0; font: 22px/1 monospace; color: #ececec; background: #2e2e33; border: 3px solid #0b0b0d; box-shadow: inset 0 0 0 3px #2e2e33, inset 0 0 0 5px #8e8e94; }
.fr-say.more.done::before { content: '▾'; position: absolute; right: 14px; bottom: 9px; font: 14px/1 monospace; color: #b0b0b8; animation: fr-pulse 1.3s ease-in-out infinite; }
.fr-glow.rap, .fr-her.rap, .fr-stage.rap { animation: fr-rap .16s steps(2, end); }
@keyframes fr-rap { 0% { translate: 2px 1px; } 50% { translate: -1px 0; } 100% { translate: 0 0; } }
/* One of the page's buttons the crow is talking about: a cream ring round it, breathing out and in, on a
   dark one so it reads on anything. */
.fr-lit { outline: 3px solid #fff0c8; box-shadow: 0 0 0 9px #0b0b0d66; animation: fr-lit 1.2s ease-in-out infinite; }
@keyframes fr-lit { 0%, 100% { outline-offset: 2px; } 50% { outline-offset: 7px; } }
@keyframes fr-pulse { 0%, 100% { scale: .7; opacity: .9; } 50% { scale: 1.05; opacity: .4; } }
.fr-key { position: fixed; translate: -50% -50%; padding: 6px; min-height: 0; background: transparent; border: 0; box-shadow: none; transition: translate .7s ease-in, scale .7s ease-in; animation: fr-bob 1.6s ease-in-out infinite; }
.fr-key canvas, .fr-yarn canvas { display: block; image-rendering: pixelated; filter: drop-shadow(0 0 4px #fff3cf); }
.fr-key.flying { scale: .55; animation: none; }
@keyframes fr-bob { 0%, 100% { margin-top: 0; } 50% { margin-top: -4px; } }
.fr-yarns { position: fixed; translate: -50% -50%; display: flex; gap: 4px; }
.fr-yarn { padding: 4px; min-height: 0; background: transparent; border: 0; box-shadow: none; animation: fr-bob 1.8s ease-in-out infinite; }
.fr-yarn:nth-child(2) { animation-delay: .2s; } .fr-yarn:nth-child(3) { animation-delay: .4s; } .fr-yarn:nth-child(4) { animation-delay: .6s; }
.fr-yarns.chosen .fr-yarn:not(.picked) { opacity: 0; transition: opacity .5s; }
/* Top left: your time's button is top right once she's given you the key. */
.fr-skip { position: fixed; left: max(12px, env(safe-area-inset-left)); top: max(12px, env(safe-area-inset-top)); z-index: 1; }
.fr-bell { position: fixed; left: 50%; bottom: max(90px, calc(env(safe-area-inset-bottom) + 80px)); translate: -50% 0; pointer-events: auto; width: min(340px, calc(100vw - 32px)); padding: 14px 16px; text-align: center;
  background: #f4e8c6; border: 4px solid #826347; box-shadow: 0 6px #594d38; color: #3d4f42; }
.fr-bell p { margin: 0 0 10px; }
.fr-bell button { margin: 0 4px; }
#key-button.glint { animation: fr-pulse .8s ease-in-out 2; }
@media (prefers-reduced-motion: reduce) {
  .fr-glow.rap, .fr-her.rap, .fr-stage.rap, .fr-lit, .fr-key, .fr-yarn, .fr-say::before, #key-button.glint { animation: none; }
  .fr-key, #cover { transition: none; }
}

/* Her pattern book, in Our knitting: a card per pattern, its picture in its yarn (or a pencil sketch). */
.pattern-book { margin: 14px 0 10px; padding-top: 10px; border-top: 2px dashed #c7ab7a; }
.pattern-cards { display: grid; gap: 8px; }
.pattern-card { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; padding: 8px; background: rgba(255, 248, 228, .55); border: 2px solid #c7ab7a; }
.pattern-card canvas { width: 72px; height: 60px; image-rendering: pixelated; }
.pattern-card h4 { margin: 0 0 2px; font-size: 1em; }
.pattern-card .note { margin: 0 0 4px; }
.pattern-card .pattern-status { margin: 0 0 6px; font-weight: bold; }
.pattern-card.closed canvas { opacity: .85; }
button.link { padding: 0; min-height: 0; background: none; border: 0; box-shadow: none; text-decoration: underline; color: inherit; font: inherit; cursor: pointer; }