:root {
  color-scheme: light dark;
  --canvas: #f2f4f8; --sheet: #ffffff; --nested: #f2f4f8; --hairline: #dde1e6; --strong: #c1c7cd;
  --muted: #8a8f98; --comment: #525252; --text: #393939; --fg: #161616;
  --green: #24a148; --green-ink: #198038; --red: #da1e28; --yellow: #8e6a00; --blue: #0f62fe;
  --green-tint: rgba(36,161,72,.09); --red-tint: rgba(218,30,40,.09); --yellow-tint: rgba(142,106,0,.10); --blue-tint: rgba(15,98,254,.09);
  --green-bright: var(--green-ink); --red-bright: var(--red); --yellow-bright: var(--yellow);
  --sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #161616; --sheet: #1c1c1c; --nested: #262626; --hairline: #262626; --strong: #393939;
    --muted: #525252; --comment: #8a8f98; --text: #dde1e6; --fg: #f2f4f8;
    --green: #42be65; --green-ink: #6fdc8c; --red: #f47067; --yellow: #f2cc60; --blue: #78a9ff;
    --green-tint: rgba(66,190,101,.10); --red-tint: rgba(244,112,103,.10); --yellow-tint: rgba(242,204,96,.10); --blue-tint: rgba(120,169,255,.10);
  }
}

body { background: var(--canvas); color: var(--text); font: 14px/1.5 var(--sans); }
a { color: var(--green-ink); }
a:visited { color: var(--green-ink); }

.auth-shell { background: var(--canvas); background-image: none; }
.auth-panel { background: var(--sheet); border: 1px solid var(--hairline); border-radius: 8px; }
.auth-panel .h1-hl, .auth-panel .h1-serif { font-family: var(--sans); font-style: normal; }

.dashboard { padding: 0; gap: 0; }
.board-header {
  position: sticky; top: 0; z-index: 2; min-height: 0;
  align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--sheet); border-bottom: 1px solid var(--hairline); padding: 0 24px;
  align-items: stretch; min-height: 52px; gap: 20px;
}
.board-header > div:first-child, .header-status { align-self: center; }
.board-header > div:first-child { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.wordmark { display: none; }
h1 { font: 600 16px/1.3 var(--sans); color: var(--fg); }
.person-filter { margin: 0; font-size: 12px; }
.person-filter span { text-transform: none; color: var(--comment); }
.person-filter select {
  min-width: 0; background: var(--sheet); color: var(--fg);
  border: 1px solid var(--strong); border-radius: 6px; padding: 2px 6px; font: 13px var(--sans);
}
.header-status { display: flex; align-items: center; gap: 12px; padding: 0; margin-left: auto; text-align: left; }
.total-count, .sync-status {
  border: 1px solid var(--strong); border-radius: 999px; padding: 1px 10px;
  font-size: 12px; font-weight: 400; color: var(--comment);
}
.total-count { border-color: var(--green); color: var(--green-ink); background: var(--green-tint); }
.sync-status { margin: 0; border-color: var(--yellow); color: var(--yellow); background: var(--yellow-tint); }
.account-controls { margin: 0; font-size: 13px; color: var(--comment); }

.btn, button {
  font: 13px var(--sans); border-radius: 6px; padding: 6px 14px; cursor: pointer;
  border: 1px solid var(--strong); background: var(--sheet); color: var(--fg);
}
.btn-primary { background: var(--green); border-color: var(--green); color: #fff; }
.btn-primary:hover { background: var(--green-ink); }
.btn-secondary { background: var(--sheet); color: var(--fg); }
.btn-secondary:hover { background: var(--nested); }
.btn-destructive { background: var(--sheet); border-color: var(--red); color: var(--red); }
.btn-destructive:hover { background: var(--red-tint); }
.sign-out-button { padding: 3px 10px; font-size: 12px; }

.block { padding: 0 24px; max-width: none; }
.block:first-of-type { padding-top: 12px; }
.block-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; border-bottom: 0; padding: 0; margin: 16px 0 0; }
h2 {
  font: 600 13px/1.5 var(--sans); text-transform: uppercase; letter-spacing: .06em; color: var(--comment);
}
.block-count {
  border: 1px solid var(--strong); border-radius: 999px; padding: 0 10px; font-size: 12px; color: var(--comment);
}
.block-need .block-count { border-color: var(--green); color: var(--green-ink); background: var(--green-tint); }

.card {
  background: var(--sheet); border: 1px solid var(--hairline); border-radius: 8px; padding: 14px 16px;
}
.card.idle { background: var(--sheet); border-color: var(--hairline); border-left: 3px solid var(--green); }
.card.idle:hover { border-color: var(--strong); border-left-color: var(--green); background: var(--green-tint); }
.card.idle .title, .card.idle.opening .title { color: var(--fg); }
.card.idle .elapsed, .card.idle.opening .elapsed { color: var(--green-ink); }
.card.busy { background: var(--sheet); border-left: 3px solid var(--blue); }
.card.busy .title { color: var(--text); }
.card.busy .elapsed { color: var(--comment); }
.card.archive { background: var(--nested); border-color: var(--hairline); }
.card.archive .title { color: var(--comment); }
.card.archive .elapsed { color: var(--muted); }
.title { font: 600 15px/1.35 var(--sans); }
.elapsed { font: 12px/1.2 "IBM Plex Mono", ui-monospace, monospace; }



.tabs { display: flex; gap: 4px; align-items: flex-end; align-self: flex-end; margin-bottom: -1px; flex-wrap: wrap; }
.tabs a {
  white-space: nowrap; padding: 9px 14px 10px; font-size: 13px; color: var(--comment); text-decoration: none;
  border: 1px solid transparent; border-bottom: 0; border-radius: 8px 8px 0 0;
}
.tabs a:visited { color: var(--comment); }
.tabs a:hover { color: var(--fg); background: var(--nested); }
.tabs a.on { color: var(--fg); font-weight: 600; background: var(--canvas); border-color: var(--hairline); padding-bottom: 11px; }
@media (max-width: 1100px) { .board-header { flex-wrap: wrap; padding-top: 8px; } .header-status { margin-left: 0; } }

[hidden] { display: none !important; }

.overview-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(560px, 1fr)); gap: 16px; margin-top: 12px; padding-bottom: 24px; }
.overview-card { margin: 0; background: var(--sheet); border: 1px solid var(--hairline); border-radius: 8px; padding: 14px 16px; }
.overview-card figcaption { font: 600 14px/1.35 var(--sans); color: var(--fg); margin-bottom: 10px; }
.overview-chart { position: relative; height: 280px; }
.overview-warnings { margin-top: 12px; background: var(--yellow-tint); border-radius: 6px; padding: 8px 12px; font-size: 13px; color: var(--text); }
.overview-warnings p { margin: 0; }
.overview-error { margin-top: 12px; }
.growth-ops-frame { display: block; width: 100%; height: calc(100vh - 53px); border: 0; background: var(--canvas); }
.report-list { display: flex; flex-direction: column; gap: 16px; margin-top: 12px; padding-bottom: 24px; }
.report-card { background: var(--sheet); border: 1px solid var(--hairline); border-radius: 8px; padding: 14px 16px; }
.report-card.report-warn { border-left: 3px solid var(--yellow); }
.report-card.report-error { border-left: 3px solid var(--red); }
.report-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.report-titles h3 { margin: 0; font: 600 14px/1.35 var(--sans); color: var(--fg); }
.report-schedule { font-size: 12px; color: var(--comment); margin-top: 2px; }
.report-badge { border: 1px solid var(--strong); border-radius: 999px; padding: 0 10px; font-size: 12px; color: var(--comment); white-space: nowrap; }
.report-badge-ok { border-color: var(--green); color: var(--green-ink); background: var(--green-tint); }
.report-badge-warn { border-color: var(--yellow); background: var(--yellow-tint); color: var(--text); }
.report-badge-error { border-color: var(--red); color: var(--red); }
.report-body { margin-top: 10px; font-size: 13.5px; color: var(--text); }
.report-body > * + * { margin-top: 8px; }
.report-heading { margin: 0; font: 600 13.5px/1.35 var(--sans); color: var(--fg); }
.report-text { margin: 0; white-space: pre-wrap; }
.report-error { margin-top: 10px; color: var(--red); }
.report-bullets { margin: 0; padding-left: 18px; }
.report-table-wrap { overflow-x: auto; }
.report-table { border-collapse: collapse; font-size: 13px; }
.report-table th, .report-table td { text-align: left; padding: 4px 10px 4px 0; border-bottom: 1px solid var(--hairline); vertical-align: top; }
.report-body .overview-card { padding: 0; border: 0; }