/* Visual language shared by every page of the app (and with the team's timesheet dashboard):
   raised cards, inset wells, soft glows scaled by --g. Two themes on the same tokens. theme.js puts
   data-theme on <html> before the first paint; the app is light unless the viewer switched to dark.

   Beyond the colors, the tokens that differ by theme:
     --ov   the overlay tint as RGB channels: hairlines, hovers (rgba(var(--ov), .05))
     --mix  what an accent is mixed with to become readable text (black on light, white on dark)
     --g    the glow factor
     --tint how strong the tinted backgrounds of pills, badges and chips are (1 on dark, less on white)
     --shade-mix how much of the accent is kept at the dark end of a bar or meter gradient (the rest is black)
     --hot-a/-b  top and bottom of a big number flagged amber: lit from above on both themes */
:root {
  color-scheme: light;
  /* Light: white and neutral greys with real depth (drop shadows under what is raised, deep wells), a
     coloured halo on the page and the same vivid accents and glows as the dark theme. */
  --bg: #eaebee; --bg-top: #fafafb; --surface: #ffffff;
  --surface-grad: linear-gradient(145deg, #ffffff 0%, #fbfbfc 55%, #f5f5f7 100%);
  --card-grad: linear-gradient(150deg, #ffffff 0%, #fbfbfc 50%, #f3f3f6 100%);
  --well-grad: linear-gradient(145deg, #d8d9de 0%, #e1e2e6 55%, #e8e9ec 100%);
  --well: #e1e2e6; --groove: #dcdde1; --groove-hover: #d1d2d7;
  --raised: 0 2px 6px -2px rgba(24,25,30,.14), 0 1px 2px rgba(24,25,30,.06), 0 0 0 1px rgba(24,25,30,.07), inset 0 1px 0 rgba(255,255,255,.95);
  --raised-sm: 0 1px 3px -1px rgba(24,25,30,.14), 0 1px 2px rgba(24,25,30,.07), 0 0 0 1px rgba(24,25,30,.08), inset 0 1px 0 rgba(255,255,255,.9);
  --inset: inset 0 2px 6px rgba(24,25,30,.12), inset 0 0 0 1px rgba(24,25,30,.07), inset 0 -1px 0 rgba(255,255,255,.7);
  --inset-sm: inset 0 1px 4px rgba(24,25,30,.12), inset 0 0 0 1px rgba(24,25,30,.08), inset 0 -1px 0 rgba(255,255,255,.6);
  --pop: 0 14px 32px -12px rgba(24,25,30,.24), 0 2px 6px rgba(24,25,30,.08), 0 0 0 1px rgba(24,25,30,.08);
  --halo-a: rgba(34,211,238,.08); --halo-b: rgba(255,77,141,.06);
  --tp: #17181c; --ts: #585a62; --tm: #75777f;
  /* The accents are the dark theme's, as a starting point; -hi is the ink on white, -lo the light tone. */
  --accent: #22d3ee; --accent-hi: #0e7490; --accent-lo: #a5f3fc;
  --violet: #9b5cff; --violet-hi: #6d28d9; --violet-lo: #d4bfff;
  --pink: #ff4d8d; --pink-hi: #be185d; --pink-lo: #ffb3cf;
  --good: #39e98a; --warn: #ffb547; --critical: #ff4757; --target: #34363e;
  --good-ink: #15803d; --warn-ink: #b45309; --bad-ink: #b91c1c;
  --num-a: #17181c; --num-b: #555863;
  --hot-a: #f59e0b; --hot-b: #c96a05;
  --primary: #0891b2; --primary-ink: #ffffff;
  --ov: 24,25,30; --mix: #000; --g: .5; --tint: .45; --shade-mix: 85%;
  --radius: 28px; --display: 'Poppins', 'Inter', sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #060607; --bg-top: #09090a; --surface: #0d0d0f;
  --surface-grad: linear-gradient(145deg, #121215 0%, #0d0d0f 50%, #0a0a0c 100%);
  --card-grad: linear-gradient(150deg, #111113 0%, #0c0c0e 45%, #09090a 100%);
  --well-grad: linear-gradient(145deg, #040405 0%, #060607 60%, #08080a 100%);
  --well: #050506; --groove: #050506; --groove-hover: #0b0b0d;
  --raised: 0 1px 2px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05), inset 0 0 0 1px rgba(255,255,255,.045);
  --raised-sm: 0 1px 2px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05), inset 0 0 0 1px rgba(255,255,255,.05);
  --inset: inset 0 2px 5px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.03);
  --inset-sm: inset 0 1px 3px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.035);
  --pop: 0 16px 40px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.1);
  --tp: #e9e9ec; --ts: #9a9ba3; --tm: #7a7b84;
  --accent: #22d3ee; --accent-hi: #67e8f9; --accent-lo: #0891b2;
  --violet: #9b5cff; --violet-hi: #b98bff; --violet-lo: #7c3aed;
  --pink: #ff4d8d; --pink-hi: #ff85b0; --pink-lo: #d61f63;
  --good: #39e98a; --warn: #ffb547; --critical: #ff4757; --target: #c9cad1;
  --good-ink: #a9f5cb; --warn-ink: #ffd9a3; --bad-ink: #ffb3ba;
  --num-a: #ffffff; --num-b: #b9bac2;
  --hot-a: #ffe7c2; --hot-b: var(--warn);
  --primary: #0e7490; --primary-ink: #ffffff;
  --halo-a: rgba(255,255,255,.028); --halo-b: transparent;
  --ov: 255,255,255; --mix: #fff; --g: .5; --tint: 1; --shade-mix: 55%;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html {
  background-color: var(--bg);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E"),
    /* In pixels: a percentage of a long page would push the halo out of view once the content has loaded. */
    radial-gradient(1200px 650px at 50% -80px, var(--halo-a), transparent 60%),
    radial-gradient(900px 500px at 100% 100%, var(--halo-b), transparent 60%),
    linear-gradient(180deg, var(--bg-top), var(--bg) 700px);
  background-repeat: repeat, no-repeat, no-repeat, no-repeat;
  background-attachment: scroll, scroll, fixed, scroll;
  min-height: 100%;
}
body { margin: 0; min-height: 100vh; color: var(--tp); font: 14px/1.5 Inter, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { border-radius: 99px; border: 3px solid transparent; background-clip: padding-box; background-color: rgba(var(--ov),.18); }
.wrap { max-width: 1376px; margin: 0 auto; padding: 40px 24px 80px; }

/* ── Header, shared by both pages ───────── */
header { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 34px; }
header .hgroup { display: flex; flex-direction: column; gap: 4px; }
/* The hub's account button (<hub-account-button>, packages/auth), last in the app bar: the theme switch's look. */
hub-account-button { --hub-btn-size: 40px; --hub-btn-radius: 13px; --hub-btn-bg: var(--surface-grad); --hub-btn-border: 0;
  --hub-btn-shadow: var(--raised-sm); --hub-btn-color: var(--ts);
  --hub-accent: #0e7490; --hub-accent-soft: rgba(14,116,144,.1); --hub-accent-dark: #22d3ee; --hub-accent-soft-dark: rgba(34,211,238,.12); }
/* public/session.js hides the page until the sign-in is confirmed. */
html.auth-pending body { visibility: hidden; }
h1 { font-family: var(--display); font-size: 28px; font-weight: 600; margin: 0; letter-spacing: -.01em; }
.sub { color: var(--tm); font-size: 13px; }
/* Top right on every page: the app's pages and the theme switch. A page's own controls go in a .toolbar row below the header. */
.appbar { display: flex; gap: 14px; align-items: center; margin-left: auto; }
.toolbar { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin: -14px 0 34px; }

/* ── Buttons ────────────────────────────── */
button {
  font: inherit; font-size: 13px; font-weight: 500; color: var(--ts); cursor: pointer;
  padding: 10px 18px; border: 0; border-radius: 14px; background: var(--surface-grad); box-shadow: var(--raised-sm);
  display: inline-flex; align-items: center; gap: 8px;
  transition: box-shadow .18s, color .18s, transform .12s cubic-bezier(.3,.7,.4,1);
}
button:hover { color: var(--tp); }
button:focus-visible { outline: none; box-shadow: var(--raised-sm), 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent); }
button:active { box-shadow: var(--inset-sm); transform: scale(.96); }
button:disabled { opacity: .35; cursor: not-allowed; transform: none; box-shadow: var(--raised-sm); }
button svg { flex: none; }

/* A group of choices in a well: the page's tabs, the segments of a list, the pages of the app. */
.nav, .seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 14px; background: var(--well-grad); box-shadow: var(--inset-sm); }
.nav button, .seg button, .nav a { padding: 7px 16px; border-radius: 10px; background: transparent; box-shadow: none; color: var(--tm); white-space: nowrap; }
.nav a { font-size: 13px; font-weight: 500; text-decoration: none; transition: color .18s; }
.seg button { padding: 8px 14px; font-size: 12.5px; }
.nav button:hover, .seg button:hover, .nav a:hover { color: var(--tp); text-decoration: none; }
.nav button[aria-pressed="true"], .seg button[aria-pressed="true"], .nav a[aria-current="page"] { color: var(--tp); background: var(--surface-grad); box-shadow: var(--raised-sm); }
.seg .cnt { font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 99px; background: rgba(var(--ov),.06); color: var(--ts); font-variant-numeric: tabular-nums; }
.seg button[aria-pressed="true"] .cnt { background: color-mix(in srgb, var(--pink) 16%, transparent); color: var(--pink-hi); }

/* The light / dark switch, filled and wired by theme.js. */
#themeToggle { width: 40px; height: 40px; padding: 0; justify-content: center; border-radius: 13px; }
#themeToggle svg { width: 17px; height: 17px; }

/* On a phone, the same header on every page: the app bar is a full-width row on top (pages left, theme right),
   then the title; the scorecard's own controls follow and share the width. */
@media (max-width: 760px) {
  .wrap { padding: 20px 16px 64px; }
  header { flex-direction: column; align-items: stretch; gap: 14px; margin-bottom: 24px; }
  .appbar { order: -1; margin-left: 0; justify-content: space-between; gap: 10px; }
  #themeToggle { width: 38px; height: 38px; margin-left: auto; }
  hub-account-button { --hub-btn-size: 38px; }
  h1 { font-size: 24px; }
  .toolbar { margin: -8px 0 24px; gap: 10px; }
  .toolbar > .nav, .toolbar > .monthnav { flex: 1 1 auto; }
  .toolbar > .nav button { flex: 1; justify-content: center; }
  .toolbar .monthnav { justify-content: space-between; }
  .toolbar .monthnav .ml { min-width: 0; flex: 1; }
  .toolbar #refresh { flex: 1 1 auto; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }