/* MyDeep site. Built to be read at a distance: large type, high contrast, big targets.
   Paper and ink, like the board. Headings in EB Garamond; everything you read or press
   in the system face for clarity. */
@font-face { font-family: 'Lato'; src: url('/client/fonts/Lato-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'EB Garamond'; src: url('/client/fonts/EBGaramond.ttf') format('truetype'); font-weight: 400 800; font-display: swap; }
:root {
  --paper: #efe6d2; --card: #fbf6ea; --ink: #1d160e; --muted: #4d4231; --line: #b9a986;
  --accent: #7a2e1d; --accent-ink: #ffffff; --ok: #1f6a35; --warn: #8a4b00; --focus: #0b57d0;
  --head: 'EB Garamond', Garamond, 'Times New Roman', serif;
  --body: -apple-system, 'Segoe UI', Lato, Arial, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --paper: #18140e; --card: #221c13; --ink: #f4ecdc; --muted: #d4c7ad; --line: #5b4e38;
  --accent: #e0875f; --accent-ink: #1a0f08; --ok: #86d79d; --warn: #f0b766; --focus: #8ab4ff; color-scheme: dark; } }
:root[data-theme="dark"] { --paper: #18140e; --card: #221c13; --ink: #f4ecdc; --muted: #d4c7ad; --line: #5b4e38;
  --accent: #e0875f; --accent-ink: #1a0f08; --ok: #86d79d; --warn: #f0b766; --focus: #8ab4ff; color-scheme: dark; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 20px/1.45 var(--body); }
h1, h2 { font-family: var(--head); font-weight: 600; margin: 0; text-wrap: balance; }
h1 { font-size: 40px; } h2 { font-size: 28px; }
button, select, input { font: inherit; }
button, .button { background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 10px; padding: 12px 20px;
  min-height: 52px; font-weight: 700; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
button.quiet { background: transparent; color: var(--ink); border: 2px solid var(--line); }
button:disabled { opacity: .45; cursor: default; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
label { font-weight: 700; display: block; margin-bottom: 6px; }
.help { color: var(--muted); font-size: 18px; margin-top: 4px; }
select, input[type=text], input[type=number], input[type=time] { width: 100%; min-height: 52px; padding: 8px 12px; background: var(--card); color: var(--ink);
  border: 2px solid var(--line); border-radius: 10px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 18px; }
.error { color: var(--accent); font-weight: 700; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
/* a tick box with its words beside it, big enough to see and hit */
.tick { display: flex; align-items: center; gap: 14px; font-weight: 700; margin-top: 18px; cursor: pointer; }
.tick input { width: 30px; height: 30px; min-height: 0; flex: 0 0 auto; margin: 0; accent-color: var(--accent, #e0875f); }