/* The internal pages (/dag, /admin, /mail, /login) in the front page's clothes.

   Loaded after each page's own <style>, so it wins on equal specificity. The
   pages keep their layout; this only swaps the skin: warm paper instead of
   the dark board, Geist instead of Bricolage, sentence case instead of
   letter-spaced mono labels, pills instead of 10px corners. One file, so the
   four pages cannot drift apart again, and the front page stays the source
   of truth for the palette (--bg, --ink, --muted, --line, --oak, --accent).

   Light only, like the front page. Both theme selectors get the same tokens,
   so an old "dark" left in localStorage changes nothing. */

:root[data-theme],
:root {
  color-scheme: light;
  --bg: #F7F4EF; --band: #F0EBE3; --panel: #FFFFFF; --panel-2: #F3EFE8;
  --hairline: #E4DED4; --line: #E4DED4; --line-strong: #CFC7B9; --input-line: #D9D2C6;
  --text: #26221D; --muted: #6F695F; --faint: #857E73; --placeholder: #A39D93;
  --accent: #1F6FEB; --accent-hover: #185ACC; --accent-ink: #FFFFFF;
  --accent-text: #1A5FCC; --accent-text-hover: #144BA3;
  --err-line: #E5BDB0; --err-bg: #FAE6E0; --err-text: #7E4636;
  --joint-line: #E6CFA8; --joint-bg: #F7EEDC; --joint-text: #6E5320;
  --header-bg: rgba(247, 244, 239, 0.92);
  --sans: "Geist", system-ui, -apple-system, sans-serif;
  --mono: "Geist Mono", ui-monospace, Menlo, monospace;
}
html, body { background: var(--bg); }
body { color: var(--text); font-family: var(--sans); }
.d { font-weight: 600; letter-spacing: -0.035em; }
#themeBtn { display: none !important; }

/* ------------------------------------------------------------ header */
header { border-bottom-color: var(--line); }
.wm { font-weight: 700; font-size: 24px; letter-spacing: -0.03em; text-transform: none; }
.tabs { gap: 2px; }
.tabs a { font-family: var(--sans); font-size: 15px; font-weight: 500; text-transform: none;
          letter-spacing: 0; color: var(--muted); padding: 8px 14px; border-radius: 999px; }
.tabs a:hover { color: var(--text); }
.tabs a[aria-current="page"] { color: var(--text); background: #EBE5DB; }
.who, .clock { font-family: var(--sans); font-size: 14px; text-transform: none;
               letter-spacing: 0; color: var(--faint); }

/* ------------------------------------------------------------ buttons */
.btn { border-radius: 999px; background: var(--text); color: #FFFFFF; font-weight: 500;
       padding: 11px 20px; transition: transform .15s, background-color .2s; }
.btn:hover { background: #3A342D; transform: translateY(-1px); }
.btn[disabled]:hover { transform: none; }
.btn-quiet { border-radius: 999px; border-color: var(--line-strong); font-weight: 500; }
.icon-btn { border-radius: 999px; border-color: var(--line); }
.now .btn { border-radius: 999px; background: var(--accent);
            box-shadow: 0 .6em 1.6em -.5em rgba(31, 111, 235, .45); }
.now .btn:hover { background: var(--accent-hover); }

/* ------------------------------------------------------------ labels: sentence case, no tracking */
.col-h b, .count, .tag, .foot, .chip, .status, .field label, .now-tag,
.pane > h2, .ev-join, .stage span, .quote summary, .pager .n {
  font-family: var(--sans); text-transform: none; letter-spacing: 0;
}
.col-h b, .pane > h2 { font-size: 15px; font-weight: 600; color: var(--text); }
.count { font-size: 14px; color: var(--faint); }
.tag, .chip, .status, .ev-join, .stage span { font-size: 12px; font-weight: 500; }
.field label, .now-tag, .foot, .quote summary { font-size: 14px; }

/* ------------------------------------------------------------ surfaces */
.col { background: var(--band); border-color: transparent; border-radius: 20px; }
.pane, .msg, dialog { border-color: var(--line); border-radius: 20px; }
.now { border-color: var(--line); border-radius: 24px; }
.err { border-radius: 14px; }
input, textarea, select { border-radius: 14px; }

/* ------------------------------------------------------------ login screens */
.login input { border-radius: 999px; }
.login .btn { padding: 14px; }
.login-google { border-radius: 999px; border-color: var(--line-strong); font-weight: 500; }
.login-google:hover { border-color: var(--text); }