/*
 * Outbound dashboard, VUMO Brand Core, operational surface.
 * Tokens only (tokens.css is linked first). Rules from the design system:
 * radius 0 everywhere, no shadows/blur/gradients, hierarchy by lines and surface
 * steps, Space Grotesk only, sentence case, accent only for interaction (hover,
 * focus, the active nav tab), status colours separate from accent.
 * Read on a phone as often as on a desk: everything stacks, nothing needs hover.
 */
*, *::before, *::after { box-sizing: border-box; border-radius: var(--radius-none); }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-canvas);
  color: var(--color-ink);
  font: var(--type-body-md);
  letter-spacing: -0.012em;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
img { max-width: 100%; }
[hidden] { display: none !important; }
a { color: var(--color-ink); text-decoration: underline; text-underline-offset: 3px; transition: color var(--motion-micro) var(--ease-default); }
a:hover { color: var(--color-accent); }
code, pre { font-family: var(--font-mono); }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---- top bar: compact ink bar, white wordmark, page tabs ---- */
.bar {
  position: sticky; top: 0; z-index: 10;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--spacing-sm) var(--spacing-md);
  min-height: var(--nav-height);
  padding: 0 var(--spacing-page-x);
  padding-top: env(safe-area-inset-top, 0px);
  background: var(--color-bar); color: var(--color-on-bar);
  border-bottom: 2px solid var(--color-separator);
}
.bar-left, .bar-right { display: flex; align-items: center; gap: var(--spacing-md); flex-wrap: wrap; min-height: var(--nav-height); }
.wordmark { font: 600 18px / 1 var(--font-sans); letter-spacing: 0.02em; color: var(--color-on-bar); text-decoration: none; padding-top: 2px; }
.wordmark:hover { color: var(--color-on-bar); }
.bar h1 { margin: 0; font: var(--type-body-md); color: var(--color-on-bar-muted); padding-top: 2px; }
.nav { display: flex; gap: var(--spacing-md); align-self: stretch; }
.nav a {
  display: flex; align-items: center; padding: 2px 0 0;
  color: var(--color-on-bar-muted); text-decoration: none;
  border-bottom: 4px solid transparent; margin-bottom: -2px;
}
.nav a:hover { color: var(--color-accent); }
.nav a[aria-current="page"] { color: var(--color-on-bar); border-bottom-color: var(--color-accent); }
.client, .stamp { color: var(--color-on-bar-muted); font: var(--type-body-sm); font-variant-numeric: tabular-nums; }
.mode {
  font: var(--type-label-caps); letter-spacing: var(--type-label-caps-tracking); text-transform: uppercase;
  padding: var(--spacing-xs) var(--spacing-sm);
  background: color-mix(in srgb, var(--color-warning) 18%, transparent); color: var(--color-warning);
}
.bar .btn-ghost { background: transparent; color: var(--color-on-bar); border-color: var(--color-on-bar-muted); }
.bar .btn-ghost:hover:not(:disabled) { color: var(--color-accent); border-color: var(--color-accent); background: transparent; }

/* ---- page ---- */
main { max-width: 1200px; margin: 0 auto; padding: var(--spacing-page-y) var(--spacing-page-x) var(--spacing-2xl); }
main.narrow { max-width: 880px; }
.loading, .summary, .sub, .meta { color: var(--color-slate); }
.summary { margin: 0 0 var(--spacing-md); }
.sub { margin: var(--spacing-xs) 0 0; font: var(--type-body-sm); }
.sub.good { color: var(--color-success); } .sub.warn { color: var(--color-warning); } .sub.bad { color: var(--color-error); }
h2.section { font: var(--type-h3); letter-spacing: var(--type-h3-tracking); margin: var(--spacing-xl) 0 var(--spacing-md); }

/* ---- stat tiles and panels: surface, 1px separator, no radius ---- */
.grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0; margin-bottom: var(--spacing-lg);
  background: var(--color-surface); border: 1px solid var(--color-separator);
}
.tile { padding: var(--spacing-lg); border-right: 1px solid var(--color-separator); border-bottom: 1px solid var(--color-separator); margin: 0 -1px -1px 0; }
.panel { background: var(--color-surface); border: 1px solid var(--color-separator); padding: var(--spacing-lg); margin-bottom: var(--spacing-lg); }
.tile h2, .panel h2 {
  margin: 0 0 var(--spacing-sm);
  font: var(--type-label-caps); letter-spacing: var(--type-label-caps-tracking); text-transform: uppercase; color: var(--color-slate);
}
.figure { margin: 0; font: var(--type-display); letter-spacing: var(--type-display-tracking); font-variant-numeric: tabular-nums; }
.two-up { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--spacing-lg); }

#attention ul { margin: 0; padding-left: var(--spacing-md); }
#attention li { margin-bottom: var(--spacing-xs); }
#attention li.bad { color: var(--color-error); }
#attention li.warn { color: var(--color-warning); }

.chart-wrap { width: 100%; overflow-x: auto; }
#chart { width: 100%; height: 200px; display: block; }

/* ---- tables: separator rules, label-caps headers, no zebra ---- */
.scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font: var(--type-body-sm); }
th, td { text-align: left; padding: var(--spacing-sm) var(--spacing-md) var(--spacing-sm) 0; border-bottom: 1px solid var(--color-separator); white-space: nowrap; height: 40px; }
th { font: var(--type-label-caps); letter-spacing: var(--type-label-caps-tracking); text-transform: uppercase; color: var(--color-slate); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr:hover { background: var(--color-canvas); }
tr:last-child td { border-bottom: none; }

/* ---- chips (static fact): square, label-caps, semantic tint ---- */
.pill, .badge, .chip {
  display: inline-block; padding: var(--spacing-xs) var(--spacing-sm);
  font: var(--type-label-caps); letter-spacing: var(--type-label-caps-tracking); text-transform: uppercase;
  background: var(--color-gray); color: var(--color-ink); border: 0; white-space: nowrap;
}
.pill.ok, .badge.ok { background: color-mix(in srgb, var(--color-success) 14%, transparent); color: var(--color-success); }
.pill.fail, .badge.drop { background: color-mix(in srgb, var(--color-error) 13%, transparent); color: var(--color-error); }
.pill.dry { background: var(--color-gray); color: var(--color-slate); }

/* ---- forms: filled gray inputs, no resting border, focus adds 1px ink ---- */
.form { display: grid; gap: var(--spacing-md); margin-bottom: var(--spacing-md); }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--spacing-md); }
label { display: grid; gap: var(--spacing-xs); font: var(--type-label-caps); letter-spacing: var(--type-label-caps-tracking); text-transform: uppercase; color: var(--color-slate); }
input, textarea, select {
  font: var(--type-body-lg); letter-spacing: -0.018em; color: var(--color-ink);
  background: var(--color-gray); border: 1px solid transparent;
  min-height: var(--input-height); padding: var(--spacing-sm) var(--spacing-md); width: 100%;
  text-transform: none;
}
input::placeholder, textarea::placeholder { color: var(--color-slate); font-weight: 400; }
input:focus, textarea:focus, select:focus { border-color: var(--color-ink); outline: none; }
input:focus-visible, textarea:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
textarea { resize: vertical; }

/* ---- buttons: square, sentence case, 500, 40px; primary ink -> accent on hover ---- */
button, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-sm);
  font: var(--type-body-md); letter-spacing: -0.012em; cursor: pointer;
  height: var(--control-height); padding: 2px 20px 0; /* Space Grotesk sits optically high */
  border: 1px solid var(--color-line); background: var(--color-canvas); color: var(--color-slate);
  transition: background-color var(--motion-micro) var(--ease-default), color var(--motion-micro) var(--ease-default), border-color var(--motion-micro) var(--ease-default);
  white-space: nowrap;
}
button:hover:not(:disabled) { color: var(--color-ink); border-color: var(--color-ink); }
button.primary, .btn-primary { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-surface); }
button.primary:hover:not(:disabled), .btn-primary:hover:not(:disabled) { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-white); }
button.danger { background: var(--color-surface); border-color: var(--color-error); color: var(--color-error); }
button.danger:hover:not(:disabled) { background: var(--color-error); color: var(--color-white); }
button.ghost, .btn-ghost { background: var(--color-canvas); border-color: var(--color-line); color: var(--color-slate); }
button:disabled { opacity: 0.45; cursor: not-allowed; }
button[aria-pressed="true"] { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-surface); }

.actions, .row { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); align-items: center; margin-top: var(--spacing-md); }
.row input { flex: 1 1 260px; min-width: 0; width: auto; }
pre {
  margin: var(--spacing-md) 0 0; padding: var(--spacing-md); overflow-x: auto;
  background: var(--color-canvas); border: 1px solid var(--color-separator);
  font-size: 12px; line-height: 1.45;
}
.problem { padding: var(--spacing-sm) var(--spacing-md); margin-top: var(--spacing-sm); font: var(--type-body-sm); border-left: 2px solid currentColor; }
.problem.error { background: color-mix(in srgb, var(--color-error) 10%, transparent); color: var(--color-error); }
.problem.warn { background: color-mix(in srgb, var(--color-warning) 12%, transparent); color: var(--color-warning); }
.problem.pass { background: color-mix(in srgb, var(--color-success) 10%, transparent); color: var(--color-success); }

/* ---- drafts and video cards ---- */
.filters { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); margin: 0 0 var(--spacing-md); }
.draft, .card { background: var(--color-surface); border: 1px solid var(--color-separator); padding: var(--spacing-lg); margin: 0 0 var(--spacing-md); }
.draft > header, .card > header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--spacing-sm) var(--spacing-md); margin-bottom: var(--spacing-md); }
.who { font: var(--type-h4); letter-spacing: var(--type-h4-tracking); }
.meta { font: var(--type-body-sm); overflow-wrap: anywhere; }
.email, .reply {
  white-space: pre-wrap; font: var(--type-body-lg); letter-spacing: -0.018em;
  border-left: 1px solid var(--color-pale); padding: var(--spacing-xs) 0 var(--spacing-xs) var(--spacing-md);
  margin: 0 0 var(--spacing-md); overflow-wrap: anywhere;
}
.reason { color: var(--color-error); font: var(--type-body-sm); margin: 0 0 var(--spacing-sm); overflow-wrap: anywhere; }
details { font: var(--type-body-sm); border-top: 1px solid var(--color-separator); padding-top: var(--spacing-sm); }
details > summary { cursor: pointer; color: var(--color-ink); text-decoration: underline; text-underline-offset: 3px; }
details > summary:hover { color: var(--color-accent); }
details.draft > summary { font: var(--type-h4); text-decoration: none; }
.facts { margin: var(--spacing-sm) 0 0; padding: 0; list-style: none; }
.facts li { margin: 0 0 var(--spacing-sm); overflow-wrap: anywhere; }
.facts .k { font-weight: 600; }
.facts q { color: var(--color-slate); font-style: italic; display: block; }
.clock { font: var(--type-h4); font-variant-numeric: tabular-nums; margin-right: var(--spacing-sm); }
.clock.ok { color: var(--color-success); } .clock.warn { color: var(--color-warning); } .clock.bad { color: var(--color-error); }
.photos { display: flex; gap: var(--spacing-xs); overflow-x: auto; margin: 0 0 var(--spacing-md); }
.photos img { height: 72px; border: 1px solid var(--color-separator); display: block; }

/* chart: ink data line, pale reference/axis lines (pale draws technical structure) */
#chart { color: var(--color-ink); }
#chart line { stroke: var(--color-pale); }

/* ---- login: compact dialog width (356px), canvas page ---- */
main.login { display: flex; justify-content: center; padding: var(--spacing-3xl) var(--spacing-page-x); }
.login-card { width: 100%; max-width: 356px; display: grid; gap: var(--spacing-md); background: var(--color-surface); border: 1px solid var(--color-separator); padding: var(--spacing-xl); }
.login-title { margin: 0 0 var(--spacing-sm); font: var(--type-h2); letter-spacing: var(--type-h2-tracking); padding-bottom: var(--spacing-md); border-bottom: 2px solid var(--color-separator); }
.login-error { margin: 0; min-height: 18px; font: var(--type-body-sm); color: var(--color-error); } /* reserved space: no layout shift */
.login-card button { width: 100%; }
.logout { color: var(--color-on-bar-muted); text-decoration: underline; text-underline-offset: 3px; font: var(--type-body-md); }
.logout:hover { color: var(--color-accent); }

/* ---- growth page ---- */
.priority .rank { display: inline-block; min-width: 28px; font: var(--type-h4); color: var(--color-slate); font-variant-numeric: tabular-nums; }
.priority p { margin: 0 0 var(--spacing-sm); }
.pill.doing { background: color-mix(in srgb, var(--color-warning) 16%, transparent); color: var(--color-warning); }
details.finding > summary { font: var(--type-h4); text-decoration: none; }
details.finding { border-top: 1px solid var(--color-separator); }
.calc-out { margin: var(--spacing-md) 0 0; }
td.good { color: var(--color-success); } td.bad { color: var(--color-error); }
#campaigns th[data-sort] { cursor: pointer; }
#campaigns th[data-sort]:hover { color: var(--color-accent); }