/* Tokens, theme, paper textures, shared bits (from the Doctors Office kit). */

:root {
  --font-type: 'Special Elite', 'Courier New', monospace;
  --font-body: 'Courier Prime', 'Courier New', monospace;
  --font-hand: 'Caveat', 'Segoe Print', cursive;
  --font-deco: 'Limelight', Georgia, serif;
  --font-old: 'IM Fell English', Georgia, serif;
  --font-sign: 'Pinyon Script', 'Segoe Script', cursive;
  --font-stencil: 'Stardos Stencil', 'Special Elite', monospace;

  --ink: #1d1914;
  --ink-soft: #3d362c;
  --ink-blue: #1f2f55;
  --ink-red: #8e1f1a;
  --stamp-red: #a3241c;
  --stamp-blue: #2a3f78;
  --graphite: #2f2d2a;
  --brass: #b48f3e;
  --brass-hi: #ecd189;
  --brass-lo: #6d5320;
  --steel: #3a4146;

  --paper: #d2c8b0;
  --paper-2: #c6baa0;
  --paper-line: rgba(70, 92, 120, 0.28);
  --paper-margin: rgba(150, 40, 30, 0.45);
  --manila: #b39461;
  --manila-2: #a1834f;
  --manila-edge: #6e5426;
  --label: #ddd3bd;

  --wall: #0d1013;
  --wall-2: #161a1f;
  --night: #0b1520;
  --desk: #1c120c;
  --desk-2: #2b1b11;

  --lamp-glow: 0;
  --scene-bright: 0.82;
  --ui-shadow: 0 18px 40px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.5);

  --tex-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .24 0 0 0 0 .13 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");
  --tex-fibre: none;
  --tex-grain-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");

  color-scheme: dark;
}

html[data-theme='light'] {
  --paper: #efe8d6;
  --paper-2: #e3dac3;
  --manila: #d8bb80;
  --manila-2: #c8aa6c;
  --manila-edge: #8a6930;
  --label: #f3ecda;
  --lamp-glow: 1;
  --scene-bright: 1;
  --wall: #1a1612;
  --wall-2: #261f18;
  --desk: #2d1c10;
  --desk-2: #432a17;
  color-scheme: light;
}

/* The lamp turned low (the three-way switch's middle step): the lit photograph comes in at half strength over the
   dark one, and the paperwork keeps its evening tones. */
html[data-lamp='on'] { --lamp-glow: 1; }
html[data-lamp='dim'] {
  --lamp-glow: 0.5;
  --scene-bright: 0.9;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #07090b;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

button { font: inherit; color: inherit; }
img { max-width: 100%; }
[hidden] { display: none !important; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

:focus-visible { outline: 2px dashed var(--ink-red); outline-offset: 3px; }

/* ---------- Dark paperwork (the sound board's "Paperwork" switch, js/soundboard.js) ----------
   The same pages, memos and cards, as if read by a low lamp: darker and warmer, the ink still black on them.
   Each flat surface is darkened on its own (a filter on the whole ledger would flatten its page turns), and it eases
   over rather than snapping. */
html[data-paper='dark'] { --paper-dark: brightness(0.62) sepia(0.34) saturate(1.12) contrast(1.08); }
.lpage .sheet, .memo, .note, .duty-tag, .duty-menu, .ledger-band, .paper { transition: filter 0.7s ease; }
html[data-paper='dark'] .lpage .sheet,
html[data-paper='dark'] .memo,
html[data-paper='dark'] .note,
html[data-paper='dark'] .duty-tag,
html[data-paper='dark'] .duty-menu,
html[data-paper='dark'] .paper:not(.lpage .paper):not(.memo .paper) { filter: var(--paper-dark); }
html[data-paper='dark'] .ltab { filter: brightness(0.74) saturate(0.9) var(--paper-dark); }
html[data-paper='dark'] .ltab:hover { filter: brightness(0.86) var(--paper-dark); }
html[data-paper='dark'] .ltab.active { filter: var(--paper-dark); }

/* ---------- Paper ---------- */

.paper {
  position: relative;
  background-color: var(--paper);
  background-image:
    linear-gradient(170deg, rgba(255, 252, 242, 0.16), transparent 35%, transparent 70%, rgba(90, 65, 30, 0.08)),
    radial-gradient(130% 100% at 50% 40%, transparent 62%, rgba(95, 70, 35, 0.12)),
    var(--img-paper, none);
  background-size: auto, auto, 700px 700px;
  background-blend-mode: normal, normal, multiply;
  color: var(--ink);
  box-shadow: 0 0 0 0.5px rgba(70, 55, 35, 0.35), 0 1px 1.5px rgba(0, 0, 0, 0.28), 0 8px 18px rgba(0, 0, 0, 0.28);
}

/* Coffee ring, used sparingly. */
.stain::after {
  content: '';
  position: absolute;
  width: 150px; height: 150px;
  right: 6%; bottom: 8%;
  border-radius: 50%;
  border: 9px solid rgba(110, 70, 30, 0.12);
  box-shadow: inset 0 0 18px rgba(110, 70, 30, 0.12);
  transform: rotate(-12deg) scaleY(0.94);
  pointer-events: none;
  mix-blend-mode: multiply;
}

.ruled {
  background-image:
    linear-gradient(90deg, transparent 54px, var(--paper-margin) 54px, var(--paper-margin) 56px, transparent 56px),
    repeating-linear-gradient(180deg, transparent 0 31px, var(--paper-line) 31px 32px),
    var(--tex-noise);
}

/* ---------- Writing ---------- */

.typed { font-family: var(--font-type); letter-spacing: 0.02em; }
.hand {
  font-family: var(--font-hand);
  color: var(--graphite);
  font-size: 1.35em;
  line-height: 1.1;
}
.pencil { filter: url(#pencil); }
.sig { font-family: var(--font-sign); color: var(--ink-blue); }

.stamp {
  display: inline-block;
  font-family: var(--font-type);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--stamp-red);
  border: 3px double currentColor;
  padding: 0.2em 0.6em;
  transform: rotate(-6deg);
  opacity: 0.85;
  mix-blend-mode: multiply;
  filter: url(#ink-bleed);
}
.stamp.blue { color: var(--stamp-blue); }

/* ---------- Buttons ---------- */

.btn {
  --c: var(--ink);
  appearance: none;
  border: 2px solid var(--c);
  background: transparent;
  color: var(--c);
  font-family: var(--font-type);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.9rem;
  padding: 0.55em 1.1em;
  cursor: pointer;
  border-radius: 2px;
  transition: transform 0.12s ease, background-color 0.2s ease;
  mix-blend-mode: multiply;
}
.btn:hover { background: rgba(0, 0, 0, 0.06); }
.btn:active { transform: translateY(1px) scale(0.98); }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.btn.red { --c: var(--stamp-red); }
.btn.blue { --c: var(--stamp-blue); }
.btn.stampish { border-style: double; border-width: 4px; transform: rotate(-1.5deg); }
.btn.stampish:active { transform: rotate(-1.5deg) translateY(2px) scale(0.97); }
.btn.small { font-size: 0.75rem; padding: 0.35em 0.7em; }
.btn.link { border: 0; padding: 0.2em 0.1em; text-decoration: underline; text-underline-offset: 3px; }

.brass-btn {
  appearance: none;
  border: 0;
  cursor: pointer;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 30%, var(--brass-hi), var(--brass) 45%, var(--brass-lo) 100%);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.6), inset 0 -2px 3px rgba(0, 0, 0, 0.35), inset 0 2px 2px rgba(255, 255, 255, 0.35);
  color: #2a1d08;
}

/* ---------- Form fields written in pencil ---------- */

.field { display: grid; gap: 2px; }
.field > span, .label {
  font-family: var(--font-type);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-soft);
}
.line-input, .line-select, .line-area {
  width: 100%;
  border: 0;
  border-bottom: 1.5px dotted rgba(40, 30, 20, 0.55);
  background: transparent;
  font-family: var(--font-hand);
  font-size: 1.5rem;
  color: var(--graphite);
  padding: 2px 4px 0;
  outline: none;
  border-radius: 0;
}
.line-area {
  border: 1.5px dotted rgba(40, 30, 20, 0.45);
  min-height: 5.5em;
  resize: vertical;
  line-height: 1.2;
  background: repeating-linear-gradient(180deg, transparent 0 1.75rem, var(--paper-line) 1.75rem calc(1.75rem + 1px));
}
.line-input:focus, .line-select:focus, .line-area:focus { border-color: var(--ink-blue); background-color: rgba(255, 255, 255, 0.12); }
.line-input::placeholder, .line-area::placeholder { color: rgba(50, 40, 30, 0.35); }
.line-select { appearance: none; cursor: pointer; padding-right: 22px;
  background-image: linear-gradient(45deg, transparent 50%, var(--graphite) 50%), linear-gradient(135deg, var(--graphite) 50%, transparent 50%);
  background-position: calc(100% - 12px) 60%, calc(100% - 7px) 60%;
  background-size: 5px 5px; background-repeat: no-repeat; }
.line-select option { font-family: var(--font-body); font-size: 1rem; color: #111; background: #efe6d0; }

/* ---------- Notes (toasts) ---------- */

#notes {
  position: fixed;
  z-index: 60;
  right: 84px;
  bottom: 18px;
  display: grid;
  gap: 10px;
  justify-items: end;
  pointer-events: none;
}
.note {
  pointer-events: auto;
  max-width: min(360px, 80vw);
  padding: 12px 16px 12px 18px;
  font-family: var(--font-hand);
  font-size: 1.35rem;
  line-height: 1.15;
  color: var(--graphite);
  background: #e9dfb8;
  background-image: var(--tex-noise);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.5);
  transform-origin: top center;
  animation: note-in 0.35s cubic-bezier(.2, .9, .3, 1.3) both;
  position: relative;
}
.note::before { /* tape */
  content: '';
  position: absolute;
  top: -9px; left: 50%;
  width: 64px; height: 18px;
  transform: translateX(-50%) rotate(-3deg);
  background: rgba(235, 228, 200, 0.6);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.note.bad { color: var(--ink-red); }
.note.out { animation: note-out 0.3s ease-in both; }
@keyframes note-in { from { opacity: 0; transform: translateY(14px) rotate(4deg) scale(0.9); } to { opacity: 1; transform: rotate(-1deg); } }
@keyframes note-out { to { opacity: 0; transform: translateY(10px) rotate(3deg); } }

/* ---------- Corner controls ---------- */

#mute {
  position: fixed;
  z-index: 55;
  right: 18px;
  bottom: 18px;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
}
#mute svg { width: 26px; height: 26px; }
#mute .waves { transition: opacity 0.2s; }
#mute[aria-pressed='true'] .waves { opacity: 0; }
#mute[aria-pressed='true'] .cross { opacity: 1; }
#mute .cross { opacity: 0; transition: opacity 0.2s; }

/* The sound board: a walnut cabinet-wireless plate with a celluloid dial and brass controls. */
#sound-knob {
  position: fixed;
  z-index: 55;
  right: 80px;
  bottom: 24px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
}
#sound-knob svg { width: 22px; height: 22px; }
#sound-knob[aria-expanded='true'] { box-shadow: 0 0 0 2px rgba(236, 209, 137, 0.55), 0 3px 8px rgba(0, 0, 0, 0.6), inset 0 -2px 3px rgba(0, 0, 0, 0.35); }
#soundboard {
  position: fixed;
  z-index: 56;
  right: 18px;
  bottom: 82px;
  width: min(300px, calc(100vw - 36px));
  padding: 16px 18px 18px;
  display: grid;
  gap: 10px;
  color: #ecdcb4;
  border-radius: 14px 14px 10px 10px;
  background:
    linear-gradient(180deg, rgba(255, 220, 160, 0.08), transparent 30%),
    repeating-linear-gradient(97deg, rgba(0, 0, 0, 0.18) 0 2px, transparent 2px 7px),
    linear-gradient(160deg, #4a2c19, #2c180d 60%, #23130a);
  box-shadow: var(--ui-shadow), inset 0 0 0 2px rgba(180, 143, 62, 0.75), inset 0 0 0 5px rgba(20, 10, 4, 0.6), inset 0 0 22px rgba(0, 0, 0, 0.55);
  font-family: var(--font-type);
  transform-origin: 85% 100%;
  animation: sb-in 0.22s cubic-bezier(0.2, 0.8, 0.3, 1);
}
#soundboard[hidden] { display: none; }
@keyframes sb-in { from { opacity: 0; transform: translateY(8px) scale(0.96); } }
.sb-grille {
  height: 14px;
  margin: -2px 10px 2px;
  border-radius: 7px;
  background: repeating-linear-gradient(90deg, #120a05 0 3px, #6d5320 3px 4px, #120a05 4px 7px);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8), 0 1px 0 rgba(255, 230, 180, 0.12);
}
.sb-row { display: grid; gap: 6px; }
.sb-lamp { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sb-switch {
  appearance: none;
  border: 0;
  background: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 2px;
  cursor: pointer;
  color: #ecdcb4;
  font: 0.68rem var(--font-type);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.sb-switch-track {
  position: relative;
  width: 44px;
  height: 22px;
  border-radius: 11px;
  background: #140a04;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.85), 0 1px 0 rgba(255, 230, 180, 0.12);
  transition: background 0.2s;
}
.sb-switch[aria-checked='true'] .sb-switch-track { background: linear-gradient(90deg, #2f5a2e, #3e7a3b); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.7), 0 0 10px rgba(120, 200, 110, 0.3); }
.sb-switch-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f5e2a8, var(--brass) 50%, var(--brass-lo));
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
  transition: transform 0.22s cubic-bezier(0.3, 1.4, 0.5, 1);
}
.sb-switch[aria-checked='true'] .sb-switch-knob { transform: translateX(22px); }
/* The lamp's middle step: the knob halfway, a low amber in the track. */
.sb-switch.dim .sb-switch-track { background: linear-gradient(90deg, #5a4520, #7a5a24); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.7), 0 0 8px rgba(220, 170, 90, 0.25); }
.sb-switch.dim .sb-switch-knob { transform: translateX(11px); }
.sb-switch:focus-visible { outline: 2px solid var(--brass-hi); outline-offset: 2px; }

.sb-head, .sb-vol > span {
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass-hi);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8);
}
.sb-dial {
  display: grid;
  gap: 2px;
  padding: 8px 12px;
  border-radius: 6px;
  background: radial-gradient(ellipse at 50% 0%, #fbeec8, #e6cf98 70%, #c9ab6a);
  box-shadow: inset 0 0 0 1px rgba(80, 50, 10, 0.55), inset 0 2px 8px rgba(120, 70, 10, 0.45), 0 0 14px rgba(255, 190, 90, 0.18);
  color: #2a1d08;
}
#soundboard.is-playing .sb-dial { box-shadow: inset 0 0 0 1px rgba(80, 50, 10, 0.55), inset 0 2px 8px rgba(120, 70, 10, 0.45), 0 0 22px rgba(255, 190, 90, 0.38); }
.sb-title { font-family: var(--font-old); font-size: 1.02rem; line-height: 1.15; }
.sb-artist { font-size: 0.66rem; letter-spacing: 0.04em; color: #5a4520; }
.sb-controls { display: flex; justify-content: center; align-items: center; gap: 14px; }
.sb-btn {
  appearance: none;
  border: 0;
  cursor: pointer;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #2a1d08;
  background: radial-gradient(circle at 35% 30%, var(--brass-hi), var(--brass) 45%, var(--brass-lo) 100%);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.6), inset 0 -2px 3px rgba(0, 0, 0, 0.35), inset 0 2px 2px rgba(255, 255, 255, 0.35);
}
.sb-btn svg { width: 16px; height: 16px; }
.sb-btn.sb-play { width: 48px; height: 48px; }
.sb-btn.sb-play svg { width: 20px; height: 20px; }
.sb-btn:active { transform: translateY(1px) scale(0.96); }
.sb-btn:focus-visible, .sb-range:focus-visible { outline: 2px solid var(--brass-hi); outline-offset: 2px; }
.sb-vol { display: grid; gap: 6px; cursor: pointer; }
.sb-rule { height: 1px; margin: 2px 0; background: linear-gradient(90deg, transparent, rgba(180, 143, 62, 0.6), transparent); }
.sb-range {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 18px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  --fill: 50%;
}
.sb-range::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--brass) var(--fill), #140a04 var(--fill));
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.8), 0 1px 0 rgba(255, 230, 180, 0.12);
}
.sb-range::-moz-range-track { height: 6px; border-radius: 3px; background: #140a04; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.8); }
.sb-range::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--brass); }
.sb-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -6px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f5e2a8, var(--brass) 50%, var(--brass-lo));
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}
.sb-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f5e2a8, var(--brass) 50%, var(--brass-lo));
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* Credits memo */
.credits ul { padding-left: 1.2em; }
.credits li { margin-bottom: 8px; line-height: 1.45; }
.credits a { color: var(--ink-blue); }
.safe-tag .safe-credits { margin-top: 6px; font-size: 0.66rem; opacity: 0.7; }

/* The am / pm switch beside hour and minute boxes (ui.js ampm). */
.ampm {
  appearance: none;
  margin-left: 6px;
  padding: 1px 7px 2px;
  border: 1px solid rgba(40, 30, 20, 0.45);
  border-radius: 3px;
  background: rgba(255, 250, 235, 0.35);
  font: 0.74rem/1.3 var(--font-type);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  align-self: center;
}
.ampm:hover { background: rgba(255, 250, 235, 0.7); }
.ampm:focus-visible { outline: 2px solid var(--ink-blue); outline-offset: 1px; }

/* ---------- Links and tick boxes on paper ----------
   The page runs in the dark colour scheme (for the scene), which would draw the browser's own pale-blue links and
   black tick boxes on the paper. Both are inked here instead: links in blue-black ink, tick boxes as a ruled square
   that takes a pencilled tick. */
a { color: var(--ink-blue); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink-red); }
input[type='checkbox'] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 1.05em;
  height: 1.05em;
  margin: 0 0.45em 0 0;
  vertical-align: -0.15em;
  border: 1.5px solid rgba(40, 30, 20, 0.75);
  border-radius: 2px;
  background: rgba(255, 250, 235, 0.35);
  box-shadow: inset 0 1px 2px rgba(60, 40, 10, 0.18);
  cursor: pointer;
  position: relative;
  transition: background-color 0.2s;
}
input[type='checkbox']::after {
  content: '';
  position: absolute;
  left: 22%;
  top: -12%;
  width: 34%;
  height: 72%;
  border: solid var(--ink);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(40deg) scale(0.4);
  opacity: 0;
  transition: transform 0.18s cubic-bezier(.3, 1.4, .5, 1), opacity 0.12s;
}
input[type='checkbox']:checked::after { opacity: 1; transform: rotate(40deg) scale(1); }
input[type='checkbox']:disabled { opacity: 0.5; cursor: default; }
input[type='checkbox']:focus-visible { outline: 2px dashed var(--ink-red); outline-offset: 2px; }
/* the date pickers' calendar glyph, inked rather than white */
.sheet input[type='date']::-webkit-calendar-picker-indicator, .memo input[type='date']::-webkit-calendar-picker-indicator { filter: invert(0.15) sepia(0.4); opacity: 0.7; }
.sheet, .memo { color-scheme: light; }