/* ClickR design tokens, shared by the phone app and ClickR Host. Light is the base; dark via data-theme or system. */
@font-face { font-family: 'Plus Jakarta Sans'; src: url('/ui/fonts/jakarta.woff2') format('woff2'); font-weight: 200 800; font-display: swap; }
@font-face { font-family: 'Newsreader'; src: url('/ui/fonts/newsreader.woff2') format('woff2'); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Newsreader'; src: url('/ui/fonts/newsreader-italic.woff2') format('woff2'); font-weight: 200 800; font-style: italic; font-display: swap; }
@font-face { font-family: 'Source Serif 4'; src: url('/ui/fonts/sourceserif.woff2') format('woff2'); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Source Serif 4'; src: url('/ui/fonts/sourceserif-italic.woff2') format('woff2'); font-weight: 200 900; font-style: italic; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/ui/fonts/inter.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('/ui/fonts/mono.woff2') format('woff2'); font-weight: 100 800; font-display: swap; }

:root {
  --bg: #faf8f5; --surface: #f2eee9; --raised: #ffffff; --ink: #171b27; --ink2: #5f6270; --line: #e5ded6;
  --blue: #2563eb; --blue-soft: #e8efff; --blue-ink: #ffffff;
  --orange: #ff7a1a; --orange-soft: #fff0e3;
  --green: #1fbf75; --green-soft: #e6f8f0; --green-ink: #0d7a49;
  --danger: #e5484d; --danger-soft: #fde8e9;
  --shadow: 0 8px 28px rgba(23, 27, 39, .07), 0 2px 6px rgba(23, 27, 39, .05);
  --r-card: 24px; --r-sheet: 28px; --font-head: 'Newsreader', Georgia, serif; --font-ui: 'Plus Jakarta Sans', ui-rounded, system-ui, sans-serif; --font: 'Source Serif 4', Georgia, serif; --mono: 'JetBrains Mono', ui-monospace, monospace;
  color-scheme: light;
}
:root[data-theme='dark'] {
  --bg: #14130f; --surface: #1d1b17; --raised: #24211c; --ink: #f4f0e8; --ink2: #a8a296; --line: #38342c;
  --blue: #5b8cff; --blue-soft: #1a2750; --blue-ink: #0b0f1a; --orange: #ff9442; --orange-soft: #3a2415;
  --green: #3ddc97; --green-soft: #0f3326; --green-ink: #3ddc97; --danger: #ff6b70; --danger-soft: #3c1a1c;
  --shadow: 0 8px 28px rgba(0, 0, 0, .45); color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']):not([data-theme='dark']) {
    --bg: #14130f; --surface: #1d1b17; --raised: #24211c; --ink: #f4f0e8; --ink2: #a8a296; --line: #38342c;
    --blue: #5b8cff; --blue-soft: #1a2750; --blue-ink: #0b0f1a; --orange: #ff9442; --orange-soft: #3a2415;
    --green: #3ddc97; --green-soft: #0f3326; --green-ink: #3ddc97; --danger: #ff6b70; --danger-soft: #3c1a1c;
    --shadow: 0 8px 28px rgba(0, 0, 0, .45); color-scheme: dark;
  }
}
* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; }
button, .btn, .pill, .chip, .cat, .seg, .tabs, .tab, .nav, label, select, .toast, .badge, .hostpill, .topbar .head.name, th { font-family: var(--font-ui); }
h1, h2 { font-weight: 600; letter-spacing: -.02em; } .head { font-weight: 600; }
body { background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
h1, h2, h3, .head { font-family: var(--font-head); letter-spacing: -.01em; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
input, textarea { font: inherit; color: inherit; }
.mono { font-family: var(--mono); font-size: .86em; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: 999px; font-weight: 650; font-family: var(--font-ui); transition: transform .12s, filter .12s; }
.btn:active { transform: scale(.97); }
.btn.primary { background: var(--blue); color: var(--blue-ink); } .btn.soft { background: var(--blue-soft); color: var(--blue); }
.btn.orange { background: var(--orange); color: #fff; } .btn.danger { background: var(--danger-soft); color: var(--danger); } .btn.ghost { color: var(--ink2); }
.btn[disabled] { opacity: .5; cursor: default; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: var(--surface); color: var(--ink2); }
.pill.blue { background: var(--blue-soft); color: var(--blue); } .pill.green { background: var(--green-soft); color: var(--green-ink); } .pill.orange { background: var(--orange-soft); color: var(--orange); } .pill.red { background: var(--danger-soft); color: var(--danger); }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ink2); display: inline-block; } .dot.on { background: var(--green); box-shadow: 0 0 0 0 rgba(31, 191, 117, .6); animation: pulse 2s infinite; } .dot.warn { background: var(--orange); } .dot.bad { background: var(--danger); }
@keyframes pulse { 70% { box-shadow: 0 0 0 9px rgba(31, 191, 117, 0); } 100% { box-shadow: 0 0 0 0 rgba(31, 191, 117, 0); } }
.card { background: var(--raised); border: 1px solid var(--line); border-radius: var(--r-card); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }