/* Overtime's website: a black-and-white desktop, one window per page (docs/13 §4.1, §4.5, §4.6,
   §6, §11; OT-DR-0016), in three themes: Light, Ink and Night slate (OT-DR-0019). Built from the
   tokens; no external requests. The one script, theme.js, only sets data-theme on <html>. */

@font-face {
  font-family: "DotGothic16";
  src: url("/static/fonts/DotGothic16-Regular.latin.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "Courier Prime";
  src: url("/static/fonts/CourierPrime-Regular.latin.woff2") format("woff2");
  font-display: swap;
}

:root {
  /* Brand (docs/13 §4.0): the logo's own files carry these; the page uses navy and amber only
     where §4.1 says. */
  --brand-navy: #0c266a;
  --brand-night: #0b1e33;
  --brand-white: #f4f7fb;
  --brand-pale: #c8daf4;
  --brand-amber: #ffb000;
  --brand-paper: #ffffff;
  /* Website, "Classic Mac, 1-bit" (§4.1) */
  --ink: #000000;
  --paper: #ffffff;
  --desk: #bbbbbb;
  --desk-dot: #888888;
  --quiet: #555555;
  --navy: var(--brand-navy);
  --lamp: var(--brand-amber);
  --stamp: #a8322a;
  /* Paperwork (§4.2) */
  --sheet: #f2eddf;
  --sheet-edge: #c8c0aa;
  --typewriter: #2a2925;
  --carbon: #3b4a7a;
  --face: "DotGothic16", Geneva, Verdana, sans-serif;
  --type: "Courier Prime", "Courier New", Courier, monospace;
  /* Theme: Light (§4.1). The dark themes below change only these. */
  color-scheme: light;
  --rule: #000000;
  --th-bg: #000000;
  --th-ink: #ffffff;
  --shadow: 2px 2px 0 #000000;
  --waiting: inherit;
  --icon-filter: none;
  --icon-hover-filter: invert(1);
  --show-light: block;
  --show-dark: none;
}

/* Ink (the Board, 30 OCT 2026). Also the default on a device set to dark, until a choice is
   made; the two blocks must stay the same (a test compares them). */
:root[data-theme="ink"] {
  color-scheme: dark;
  --desk: #0c0e11; --desk-dot: #1b1f25; --paper: #14171b; --ink: #e7eaee; --quiet: #989ea7;
  --rule: #e7eaee; --th-bg: #e7eaee; --th-ink: #14171b;
  --shadow: 3px 3px 0 #000000; --waiting: var(--brand-amber);
  --icon-filter: invert(1); --icon-hover-filter: none; --show-light: none; --show-dark: block;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --desk: #0c0e11; --desk-dot: #1b1f25; --paper: #14171b; --ink: #e7eaee; --quiet: #989ea7;
    --rule: #e7eaee; --th-bg: #e7eaee; --th-ink: #14171b;
    --shadow: 3px 3px 0 #000000; --waiting: var(--brand-amber);
    --icon-filter: invert(1); --icon-hover-filter: none; --show-light: none; --show-dark: block;
  }
}

/* Night slate (the Board, 30 OCT 2026) */
:root[data-theme="slate"] {
  color-scheme: dark;
  --desk: #0a0f16; --desk-dot: #17202c; --paper: #111822; --ink: #e4ebf3; --quiet: #94a3b5;
  --rule: #c8daf4; --th-bg: #c8daf4; --th-ink: #0b1e33;
  --shadow: 3px 3px 0 #000000; --waiting: var(--brand-amber);
  --icon-filter: invert(1); --icon-hover-filter: none; --show-light: none; --show-dark: block;
}

* { box-sizing: border-box; }
html { font-synthesis: none; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  color: var(--ink);
  font: 16px/1.6 var(--face);
  background: var(--desk) radial-gradient(var(--desk-dot) 1px, transparent 1px) 0 0 / 3px 3px;
  padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
strong, b, th, h1, h2, h3, h4 { font-weight: 400; }  /* one weight only: never fake bold */
em, i { font-style: normal; }
::selection { background: var(--ink); color: var(--paper); }

a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
a:visited { text-decoration-style: dotted; }
a:hover, a:focus-visible { background: var(--ink); color: var(--paper); text-decoration: none; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 2px var(--paper); }
.skip { position: absolute; left: -999px; top: 0; background: var(--paper); padding: 0 12px; min-height: 44px; display: inline-flex; align-items: center; }
.skip:focus { left: 8px; z-index: 2; }

/* The menu bar */
.menubar {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 2px;
  padding: 0 8px;
}
.menubar a { text-decoration: none; padding: 0 8px; min-height: 44px; min-width: 44px; justify-content: center; display: inline-flex; align-items: center; }
.menubar .home { padding: 0 8px 0 4px; min-width: 44px; justify-content: center; }
.menubar .home img { width: 22px; height: 22px; }
img.on-light { display: var(--show-light); }
img.on-dark { display: var(--show-dark); }
.theme:not([hidden]) { display: inline-flex; align-items: center; }
/* The theme switch: a 44px tap target with a smaller drawn frame (28px), made by a transparent
   border and an inset 1px line, so it sits quietly at the right end of the menu bar. */
.theme select { font: inherit; font-size: 16px; line-height: 1; min-height: 44px; padding: 0 4px 0 6px; color: var(--ink); background: var(--paper); background-clip: padding-box; border: 8px solid transparent; border-width: 8px 0; border-radius: 14px / 14px; box-shadow: inset 0 0 0 1px var(--rule); }
.menubar a[aria-current="page"] { background: var(--ink); color: var(--paper); }
.clock { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding: 0 6px; min-height: 44px; white-space: nowrap; }
.lamp { width: 10px; height: 10px; border-radius: 50%; background: var(--lamp); box-shadow: 0 0 0 1px var(--ink); }

/* The window */
.desk { max-width: 820px; margin: 24px auto; padding: 0 16px; }
.win { background: var(--paper); border: 1px solid var(--rule); box-shadow: var(--shadow); }
.title {
  position: relative;
  min-height: 24px;
  border-bottom: 1px solid var(--rule);
  text-align: center;
  padding: 4px 28px;
  background: repeating-linear-gradient(var(--paper) 0 2px, var(--rule) 2px 3px);
  background-clip: content-box;
}
.title h1 { display: inline; margin: 0; font: inherit; font-size: 16px; line-height: 16px; background: var(--paper); padding: 0 10px; position: relative; top: -2px; }
.close { position: absolute; left: 10px; top: 5px; width: 13px; height: 13px; border: 1px solid var(--rule); background: var(--paper); }
.body { padding: 16px 20px 20px; }
.crumb { font-size: 14px; margin: 0 0 4px; }
.crumb a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
h2 { font-size: 32px; line-height: 1.2; margin: 4px 0 12px; }
h3 { font-size: 24px; line-height: 1.3; margin: 24px 0 8px; }
p, li { max-width: 70ch; }
.quiet { color: var(--quiet); font-size: 14px; }
.status { border-top: 1px solid var(--rule); padding: 4px 12px; font-size: 14px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px; }
footer { max-width: 820px; margin: 0 auto 32px; padding: 0 16px; font-size: 14px; }
footer p { margin: 2px 0; }
footer a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 4px; }

/* The logo inside the Home window: at least 140px wide (docs/13 §5) */
.logo { display: block; width: 220px; max-width: 100%; height: auto; margin: 8px 0 16px; }

/* Icons: original 1-bit drawings */
.icons { display: flex; gap: 12px; flex-wrap: wrap; margin: 16px 0; padding: 0; list-style: none; }
.icons a { width: 96px; min-height: 64px; text-align: center; font-size: 14px; text-decoration: none; padding: 4px; display: block; }
.icons img { width: 32px; height: 32px; display: block; margin: 0 auto 4px; image-rendering: pixelated; filter: var(--icon-filter); }
.icons a:hover img, .icons a:focus-visible img { filter: var(--icon-hover-filter); }

/* Stat boxes */
.stats { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0; padding: 0; list-style: none; }
.stat { border: 1px solid var(--rule); padding: 6px 14px; flex: 1; min-width: 150px; }
.stat span { display: block; font-size: 32px; line-height: 1.2; }

/* Tables */
.tablebox { overflow-x: auto; margin: 8px 0 16px; }
table { border-collapse: collapse; width: 100%; }
th, td { border: 1px solid var(--rule); padding: 6px 10px; text-align: left; vertical-align: top; }
th { background: var(--th-bg); color: var(--th-ink); }
.waiting { color: var(--waiting); }

/* Buttons (none yet on the public site; the rules stand for when there are) */
.button { font: inherit; background: var(--paper); color: var(--ink); border: 1px solid var(--rule); border-radius: 8px; padding: 6px 22px; min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; }
.button.default { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--rule); margin: 3px; }
.button:active { background: var(--ink); color: var(--paper); }

/* Lists of documents and the staff */
.rows { padding: 0; list-style: none; }
.rows li { border-top: 1px solid var(--rule); padding: 8px 0; }
.rows li:last-child { border-bottom: 1px solid var(--rule); }
.rows a { display: inline-flex; align-items: center; min-height: 44px; }
.person { display: flex; gap: 14px; align-items: flex-start; }
.person img { width: 64px; height: 64px; flex: none; border: 1px solid var(--rule); image-rendering: pixelated; filter: var(--icon-filter); }
.note { border: 1px solid var(--rule); padding: 10px 14px; margin: 16px 0; }

/* Paperwork: a typed sheet lying on the desk (docs/13 §4.2, §7) */
.sheet {
  /* A sheet keeps the paperwork palette in every theme: paper is paper. */
  --paper: var(--brand-paper);
  --ink: var(--typewriter);
  --rule: var(--typewriter);
  color-scheme: light;
  background: var(--sheet);
  color: var(--typewriter);
  border: 1px solid var(--sheet-edge);
  box-shadow: 2px 2px 0 var(--sheet-edge);
  padding: 20px 24px;
  margin: 8px 0 16px;
  font: 15px/1.5 var(--type);
  position: relative;
  overflow-wrap: anywhere;
}
.sheet h2, .sheet h3, .sheet h4 { font-family: var(--type); color: var(--typewriter); font-size: 17px; margin: 18px 0 6px; }
.sheet p, .sheet li { max-width: none; }
.sheet pre.typed { font: inherit; white-space: pre-wrap; margin: 0 0 12px; }
.sheet .codebox { overflow-x: auto; border: 1px solid var(--sheet-edge); background: var(--paper); margin: 8px 0; }
.sheet pre.code { font: 14px/1.4 var(--type); margin: 0; padding: 8px 10px; white-space: pre; }
.sheet code { font: inherit; }
.sheet th { background: var(--typewriter); color: var(--sheet); }
.sheet th, .sheet td { border-color: var(--typewriter); }
.stamp {
  display: inline-block;
  color: var(--stamp);
  border: 2px solid var(--stamp);
  padding: 0 6px;
  transform: rotate(var(--tilt, -2deg));
  letter-spacing: 1px;
  opacity: 0.9;
}
.seal { position: absolute; right: 16px; top: 16px; width: 96px; height: 96px; transform: rotate(-6deg); opacity: 0.85; }

@media (pointer: coarse) { .button { min-height: 44px; } }

@media (max-width: 600px) {
  .desk { margin: 16px auto; }
  .body { padding: 14px; }
  h2 { font-size: 24px; }
  h3 { font-size: 20px; }
  .stat { min-width: 100%; }
  .sheet { padding: 14px; }
  .seal { position: static; display: block; margin: 0 0 8px auto; width: 72px; height: 72px; }
  /* tables of numbers become label and value rows */
  table.kv tr:first-child:has(th) { display: none; }
  table.kv, table.kv tbody { display: block; }
  table.kv tr { display: block; border: 1px solid var(--rule); margin-bottom: 8px; }
  table.kv td { display: block; border: 0; border-bottom: 1px solid var(--rule); }
  table.kv td:last-child { border-bottom: 0; }
  table.kv td::before { content: attr(data-l); display: block; color: var(--quiet); font-size: 14px; }
  .sheet table.kv td::before { color: var(--carbon); }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Home's still picture of the Floor (OT-DR-0020): drawn at one art pixel per CSS pixel. */
.still { margin: 0 0 8px; }
.still img { display: block; max-width: 100%; height: auto; image-rendering: pixelated; border: 1px solid var(--rule); }