/* Clear Sky — tokens from design.md. Every colour is a light/dark pair. */
:root {
  color-scheme: light dark;
  --canvas: #f6f8fa; --surface: #ffffff; --surface-raised: #ffffff; --surface-sunken: #eef1f4;
  --border: #dde3e9; --border-strong: #7f8a98;
  --text: #14181d; --text-ui: #38414c; --text-secondary: #505b68; --text-tertiary: #626d7a;
  --accent: #0b63b0; --accent-hover: #084f8d; --accent-subtle: #e3eefa; --on-accent: #ffffff;
  --act: #c0281b; --act-subtle: #fdecea;
  --watch: #8a5a00; --watch-subtle: #fdf3dc;
  --ok: #17753a; --ok-subtle: #e6f4ea;
  --shadow-float: 0 4px 16px rgba(20, 24, 29, 0.12), 0 0 0 1px rgba(20, 24, 29, 0.06);

  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --ease: cubic-bezier(0.2, 0, 0, 1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas: #0e1217; --surface: #151a21; --surface-raised: #1c232c; --surface-sunken: #0a0d11;
    --border: #262e38; --border-strong: #6b7684;
    --text: #e8edf2; --text-ui: #c3ccd6; --text-secondary: #a3adb9; --text-tertiary: #8b96a3;
    --accent: #5aa9f0; --accent-hover: #82bff4; --accent-subtle: #132a40; --on-accent: #08182a;
    --act: #ff7b72; --act-subtle: #3a1614;
    --watch: #e3b341; --watch-subtle: #33270c;
    --ok: #4ac26b; --ok-subtle: #10291a;
    --shadow-float: 0 4px 16px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(232, 237, 242, 0.08);
  }
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--canvas); color: var(--text);
  font: 400 14px/1.45 var(--font); font-variant-numeric: tabular-nums;
}
.page { max-width: 1200px; margin: 0 auto; padding: 24px; }
.meta { font-size: 13px; line-height: 1.4; color: var(--text-secondary); margin: 2px 0 0; }

/* Headline banner */
.headline {
  display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center;
  min-height: 72px; padding: 12px 20px; border-radius: 12px;
}
.headline h1 { font-size: 28px; font-weight: 650; line-height: 1.15; margin: 0; }
.headline .meta { grid-column: 2; }
.headline .state-mark { grid-row: span 2; font-size: 20px; }
.headline[data-state="ok"]    { background: var(--ok-subtle); }    .headline[data-state="ok"] .state-mark    { color: var(--ok); }
.headline[data-state="watch"] { background: var(--watch-subtle); } .headline[data-state="watch"] .state-mark { color: var(--watch); }
.headline[data-state="act"]   { background: var(--act-subtle); }   .headline[data-state="act"] .state-mark   { color: var(--act); }
.headline[data-state="unknown"] { border: 1px dashed var(--border-strong); }
.headline[data-state="unknown"] .state-mark { color: var(--text-tertiary); }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Projects table */
.projects { margin-top: 24px; }
.projects h2 { font-size: 14px; font-weight: 600; color: var(--text-ui); margin: 0 0 8px; }
.projects table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.projects th, .projects td { text-align: left; vertical-align: middle; padding: 8px 12px; height: 44px; border-top: 1px solid var(--border); }
.projects thead th { height: 32px; border-top: 0; background: var(--surface-sunken); font-size: 12px; font-weight: 500; color: var(--text-secondary); }
.projects tbody th { font-weight: 600; }
.projects tbody th a { color: var(--text); }
.projects tr[data-state="act"] th { box-shadow: inset 3px 0 0 var(--act); }
.projects tr[data-state="watch"] th { box-shadow: inset 3px 0 0 var(--watch); }
.pill { display: inline-block; padding: 1px 8px; border: 1px solid var(--border-strong); border-radius: 999px; font-size: 12px; font-weight: 500; color: var(--text-ui); }
.state { color: var(--text); }
.state .glyph { margin-right: 6px; }
.state.ok .glyph { color: var(--ok); }
.state.watch .glyph, .state.watch { color: var(--watch); }
.state.act .glyph, .state.act { color: var(--act); }
.state.unknown { color: var(--text-tertiary); }
.cell-note { margin-left: 8px; font-size: 13px; color: var(--text-secondary); }
.fresh { margin-left: 8px; font: 500 11px var(--mono); color: var(--text-tertiary); }
.value { font: 600 14px var(--mono); }
.projects .num, .projects td.money { text-align: right; }
.money .value + .value { margin-left: 8px; }
.state.none { color: var(--text-tertiary); }
.none { color: var(--text-tertiary); }

/* Sign-in */
.sign-in form { max-width: 320px; margin: 15vh auto 0; display: grid; gap: 8px; }
.sign-in h1 { font-size: 20px; font-weight: 600; margin: 0 0 16px; }
.sign-in label { font-size: 13px; color: var(--text-secondary); }
input { font: inherit; font-size: 16px; height: 40px; padding: 0 12px; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 8px; }
input:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button { font: inherit; cursor: pointer; }
button.primary { height: 40px; margin-top: 8px; color: var(--on-accent); background: var(--accent); border: 0; border-radius: 8px; font-weight: 600; }
button.primary:hover { background: var(--accent-hover); }
button.quiet { height: 32px; padding: 0 8px; color: var(--text-ui); background: none; border: 0; border-radius: 8px; }
button.quiet:hover { background: var(--surface-sunken); }
.error { margin: 0; font-size: 13px; color: var(--act); }
.foot { margin-top: 24px; display: flex; justify-content: flex-end; }

@media (max-width: 640px) {
  body { font-size: 16px; }
  .projects thead { display: none; }
  .projects tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px 16px; border-top: 1px solid var(--border); }
  .projects tr:first-child { border-top: 0; }
  .projects th, .projects td { padding: 0; height: auto; border: 0; }
  .projects td.next, .projects td.users { grid-column: 1 / -1; }
  .projects td.next::before { content: "Next: "; color: var(--text-secondary); }
  .projects td.users::before { content: "Users: "; color: var(--text-secondary); }
  .projects td.money { grid-column: 1 / -1; text-align: left; }
  .projects td.money::before { content: "Net: "; color: var(--text-secondary); }
  .page { padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
  .headline { min-height: 64px; padding: 12px 16px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }