/* Avail base: Side Car tokens (dark default), type, header/footer, forms, buttons, notices, chips, tables.
   Page-specific styles live in report.css, pages.css and admin.css. */
:root {
  --bg: #202124; --surface: #2a2b2f; --surface2: #35363a; --surface3: #3f4044; --border: #45464a; --border2: #55565a;
  --text: #f7f2f1; --muted: #babcc2; --dim: #8a8c92;
  --orange: #ff6234; --orange-ink: #ff6234; --purple: #ab4ff6; --purple-ink: #ab4ff6; --coral: #ff5f79; --magenta: #d20972; --blue: #3c78d8;
  --pass: #45d6a0; --warn: #fce5cd; --fail: #ff5f79;
  --tint-o: rgba(255,98,52,.15); --tint-p: rgba(171,79,246,.15); --tint-b: rgba(60,120,216,.15);
  --tint-g: rgba(69,214,160,.15); --tint-c: rgba(255,95,121,.15);
  --screen: #141518; --screen-ink: #f7f2f1;
  --head: "Jost", "Montserrat", system-ui, sans-serif;
  --body: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --radius: 10px;
  --on-accent: #202124; /* text on the orange accent: 5.4:1 (white is 2.98:1, fails AA). Magenta hovers keep white. */
  --purple-strong: #8a2fd0; /* filled purple behind white text: 6.2:1 (#ab4ff6 is 4.05:1) */
  --header-h: 3.5rem;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #ffffff; --surface: #f7f2f1; --surface2: #efe8e6; --surface3: #e7dfdc; --border: #e2dcda; --border2: #cfc7c4;
  --text: #000000; --muted: #55565a; --dim: #6a6c72; --coral: #c2185b; --magenta: #a0074f;
  --orange-ink: #b83a0e; --purple-ink: #8a2fd0; /* AA-contrast text variants of the brand accents on light surfaces */
  --pass: #137a55; --warn: #8a4b00; --fail: #c2185b;
  --tint-o: rgba(255,98,52,.12); --tint-p: rgba(171,79,246,.12); --tint-b: rgba(60,120,216,.12);
  --tint-g: rgba(19,122,85,.12); --tint-c: rgba(194,24,91,.1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 1rem/1.65 var(--body); min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden; }
main { flex: 1; width: 100%; }
img { max-width: 100%; }
a { color: var(--coral); text-underline-offset: .15em; }
a:hover { color: var(--magenta); }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
h1, h2, h3, h4 { font-family: var(--head); font-weight: 700; text-wrap: balance; margin: 0; line-height: 1.12; }
h1 { font-size: clamp(2rem, 5vw, 2.625rem); }
h2 { font-size: clamp(1.5rem, 3.5vw, 2rem); }
h3 { font-size: 1.25rem; }
p { margin: 0; }
code, kbd, pre { font-family: var(--mono); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -9999px; top: .5rem; z-index: 100; background: var(--orange); color: var(--on-accent); padding: .5rem .8rem; border-radius: 8px; }
.skip:focus { left: .5rem; }

/* Layout */
.container { width: 100%; max-width: 68rem; margin: 0 auto; padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px)); }
.page { width: 100%; max-width: 44rem; margin: 0 auto; padding: 2rem max(16px, env(safe-area-inset-right, 0px)) 4rem max(16px, env(safe-area-inset-left, 0px)); display: grid; gap: 1.5rem; align-content: start; }
.stack { display: grid; gap: 1rem; }
.row { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; }
.muted { color: var(--muted); }
.dim { color: var(--dim); }
.small { font-size: .875rem; }
.eyebrow { font: 600 .72rem/1.3 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--orange-ink); }
.tc { font: 600 .76rem/1 var(--mono); color: var(--orange-ink); background: var(--tint-o); padding: .25em .45em; border-radius: 4px; text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tc:hover { color: var(--on-accent); background: var(--orange); }
/* Touch: inline timecodes get a 24×24 px minimum target (WCAG 2.5.8); desktop look unchanged. */
@media (pointer: coarse) {
  .tc { display: inline-block; min-width: 24px; min-height: 24px; line-height: 24px; padding-block: 0; text-align: center; vertical-align: middle; }
}
[id] { scroll-margin-top: calc(var(--header-h) + 1rem); }

/* Header */
.site-header { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); padding-top: env(safe-area-inset-top, 0px); }
.site-header .bar-in { display: flex; align-items: center; gap: .5rem; height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: .5rem; color: var(--text); text-decoration: none; font: 700 1.2rem/1 var(--head); letter-spacing: .01em; margin-right: auto; min-width: 0; }
.brand img { width: 28px; height: 28px; flex: none; }
.brand:hover { color: var(--text); }
.nav { display: flex; align-items: center; gap: .15rem; min-width: 0; }
.nav a, .nav button.linkish { font: 600 .85rem/1 var(--body); color: var(--muted); text-decoration: none; padding: .55rem .6rem; border-radius: 8px; background: none; border: 0; cursor: pointer; white-space: nowrap; }
.nav a:hover, .nav button.linkish:hover { color: var(--text); background: var(--surface); }
.nav a[aria-current="page"] { color: var(--text); }
.nav form { margin: 0; display: inline; }
.icon-btn { width: 38px; height: 38px; flex: none; display: inline-grid; place-items: center; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; padding: 0; }
.icon-btn:hover { border-color: var(--orange); }
.icon-btn svg { width: 18px; height: 18px; }
.theme-toggle .sun { display: none; }
:root[data-theme="light"] .theme-toggle .sun { display: block; }
:root[data-theme="light"] .theme-toggle .moon { display: none; }
@media (max-width: 30rem) { .nav .hide-sm { display: none; } .brand span { font-size: 1.05rem; } }

/* Footer */
.site-footer { border-top: 1px solid var(--border); color: var(--dim); font-size: .82rem; padding-block: 1.25rem 2rem; }
.site-footer .container { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; justify-content: space-between; }
.site-footer a { color: var(--muted); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font: 600 .92rem/1 var(--body); padding: .8rem 1.25rem; border-radius: var(--radius); border: 1px solid transparent; background: var(--orange); color: var(--on-accent); cursor: pointer; text-decoration: none; min-height: 44px; }
.btn:hover { background: var(--magenta); color: #fff; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.btn.secondary { background: var(--surface); color: var(--text); border-color: var(--border); }
.btn.secondary:hover { border-color: var(--purple); background: var(--surface2); color: var(--text); }
.btn.ghost { background: none; color: var(--text); border-color: var(--border); }
.btn.ghost:hover { border-color: var(--orange); color: var(--text); }
.btn.danger { background: none; color: var(--fail); border-color: color-mix(in srgb, var(--fail) 50%, transparent); }
.btn.danger:hover { background: var(--tint-c); color: var(--fail); }
.btn.small { padding: .5rem .8rem; font-size: .82rem; min-height: 36px; }
.btn.google { background: #fff; color: #1f1f1f; border-color: #747775; }
.btn.google:hover { background: #f2f2f2; color: #1f1f1f; }

/* Forms */
label { font-weight: 600; font-size: .92rem; }
.field { display: grid; gap: .4rem; }
.hint { font-size: .85rem; color: var(--muted); }
input[type="text"], input[type="email"], input[type="url"], input[type="search"], input[type="password"], input[type="number"], select, textarea {
  font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .75rem .9rem; width: 100%; min-width: 0; min-height: 44px; }
input:focus, select:focus, textarea:focus { border-color: var(--purple); }
input[aria-invalid="true"] { border-color: var(--fail); }
.inline-form { display: flex; gap: .5rem; flex-wrap: wrap; }
.inline-form > input { flex: 1 1 16rem; }
.form-error { color: var(--fail); font-size: .9rem; min-height: 1.2em; }
.switch { display: inline-flex; gap: .6rem; align-items: center; cursor: pointer; font-weight: 500; }
.switch input { width: 1.1rem; height: 1.1rem; accent-color: var(--orange); }

/* Cards and notices */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 1.25rem 1.4rem; display: grid; gap: .8rem; }
.card h2 { font-size: 1.35rem; }
.notice { border-radius: var(--radius); padding: .8rem 1rem; border: 1px solid var(--border); background: var(--surface); font-size: .92rem; }
.notice.info { border-color: color-mix(in srgb, var(--purple) 45%, transparent); background: var(--tint-p); }
.notice.warn { border-color: color-mix(in srgb, var(--orange) 50%, transparent); background: var(--tint-o); }
.notice.error { border-color: color-mix(in srgb, var(--fail) 50%, transparent); background: var(--tint-c); }
.notice.ok { border-color: color-mix(in srgb, var(--pass) 50%, transparent); background: var(--tint-g); }

/* Status chips (job statuses) */
.chip { display: inline-flex; align-items: center; gap: .35em; font: 600 .7rem/1 var(--body); letter-spacing: .06em; text-transform: uppercase; padding: .45em .65em; border-radius: 999px; background: var(--surface2); color: var(--muted); white-space: nowrap; }
.chip.ready { background: var(--tint-g); color: var(--pass); }
.chip.queued, .chip.checking, .chip.watching, .chip.writing { background: var(--tint-p); color: var(--purple); }
.chip.delayed, .chip.needs_key { background: var(--tint-o); color: var(--orange-ink); }
.chip.failed, .chip.cancelled { background: var(--tint-c); color: var(--fail); }
.chip.public { background: var(--tint-b); color: var(--blue); }

/* Tables (admin, lists) */
.table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; font-size: .88rem; }
th, td { text-align: left; padding: .6rem .75rem; border-bottom: 1px solid var(--border); vertical-align: top; }
th { font: 600 .7rem/1.3 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); background: var(--surface); white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }