/* Tempered Ops: Straw to Bronze, for the ops dashboard.
 * Tokens mirror the app (src/renderer/src/index.css). The laws:
 *   Straw  = readings and state: active nav, focus rings, live values, chart marks.
 *   Amber  = the ONE intervention per screen (Run now / Write report now); text on it is Quench.
 *   Bronze = only inside the tempering gradient (the Temper Bar), the page's only gradient.
 *   --fail = the one reserved system red, for confirmed failures only (failed steps, runs, reports).
 * Saira Semi Condensed for titles, eyebrows and the wordmark; IBM Plex Sans for everything else.
 * Live values change instantly (no tweening); one reduced-motion switch at the bottom. */

:root {
  color-scheme: dark;
  --quench: #141517;
  --billet: #1a1c1f;
  --billet-2: #202327;
  --billet-3: #25282c;
  --polished: #f7f8f9;
  --mill: #8f959d;
  --hairline: #30343a;
  --straw: #e8c268;
  --amber: #e09e3c;
  --bronze: #c96f2b;
  /* Chart fill: Straw's own hue stepped down to OKLCH L 0.66 so a filled mark
     sits inside the dark chart band (checked with the dataviz validator, 5.5:1
     on --billet). The hovered mark lifts to full Straw. */
  --mark: #b18d2e;
  --fail: #ef6b61;
  --display: 'Saira Semi Condensed', system-ui, sans-serif;
  --sans: 'IBM Plex Sans', system-ui, sans-serif;
  --radius: 6px;
}

* { box-sizing: border-box; }
html { background: var(--quench); }
body {
  margin: 0;
  background: var(--quench);
  color: var(--polished);
  font: 400 14px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input { font: inherit; }
a { color: var(--straw); text-decoration: none; transition: color 100ms; }
a:hover { color: var(--polished); }
/* Focus appears with NO transition. */
:focus-visible { outline: 2px solid var(--straw); outline-offset: 2px; transition: none !important; }
[hidden] { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.small { font-size: 13px; }
.muted { color: var(--mill); }
.noscript { padding: 24px; }

/* ---- Type: 22 / 17 / 14 / 13 / 11 ---- */
.wordmark {
  font: 700 14px/1 var(--display); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--polished); white-space: nowrap;
}
.wordmark:hover { color: var(--polished); }
.wordmark-lg { font-size: 17px; }
.eyebrow {
  font: 600 11px/1.4 var(--display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--mill);
}
.page-title { font: 600 22px/1.2 var(--display); }
.section-title, .card-title { font: 600 17px/1.3 var(--display); }

/* ---- Buttons and inputs ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 0 16px; border: 1px solid transparent; border-radius: var(--radius);
  font: 600 14px/1 var(--sans); white-space: nowrap; cursor: pointer;
  transition: background-color 100ms, color 100ms, border-color 100ms;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary { background: var(--amber); color: var(--quench); }
.btn-primary:hover:not(:disabled) { background: var(--straw); }
.btn-ghost { background: transparent; color: var(--polished); border-color: var(--hairline); }
.btn-ghost:hover:not(:disabled) { background: var(--billet-2); }
.btn-small { min-height: 32px; padding: 0 12px; font-size: 13px; font-weight: 500; }
.btn-block { width: 100%; }
.input {
  width: 100%; min-height: 40px; padding: 8px 12px; background: var(--quench); color: var(--polished);
  border: 1px solid var(--hairline); border-radius: var(--radius);
}
.input::placeholder { color: var(--mill); }
.seg {
  min-height: 32px; padding: 0 12px; background: transparent; color: var(--mill);
  border: 1px solid var(--hairline); border-radius: var(--radius); font-size: 13px; font-weight: 500;
  cursor: pointer; transition: color 100ms, background-color 100ms, border-color 100ms;
}
.seg:hover { color: var(--polished); background: var(--billet-2); }
.seg[aria-pressed='true'] { color: var(--straw); border-color: var(--straw); }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---- Top bar: wordmark, nav, live run indicator, sign out ---- */
.topbar { position: sticky; top: 0; z-index: 10; background: var(--quench); border-bottom: 1px solid var(--hairline); }
.topbar-inner {
  max-width: 1200px; margin: 0 auto; padding: 0 24px; min-height: 56px;
  display: flex; align-items: center; gap: 8px 24px;
}
.nav { display: flex; flex-wrap: wrap; gap: 0 4px; min-width: 0; }
.nav-link {
  padding: 17px 10px 15px; color: var(--mill); font-weight: 500; white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.nav-link:hover { color: var(--polished); }
.nav-link[aria-current='page'] { color: var(--straw); border-bottom-color: var(--straw); }
.topbar-right { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.live-run { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; white-space: nowrap; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--straw); }

/* ---- Page frame ---- */
.main { max-width: 1200px; margin: 0 auto; padding: 24px 24px 64px; }
.page { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.page-enter { animation: page-in 150ms ease-out; }
@keyframes page-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.page-head .eyebrow { margin-bottom: 4px; }
.run-button { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.run-button-note { max-width: 300px; text-align: right; }
.notice {
  display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap;
  margin-bottom: 20px; padding: 12px 16px; background: var(--billet);
  border: 1px solid var(--hairline); border-left: 3px solid var(--straw); border-radius: var(--radius);
}
.notice p { flex: 1 1 240px; overflow-wrap: anywhere; }
.notice.is-fail { border-left-color: var(--fail); }
.stack { display: flex; flex-direction: column; gap: 24px; }
.section { display: flex; flex-direction: column; gap: 12px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.card {
  display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 20px;
  background: var(--billet); border: 1px solid var(--hairline); border-radius: var(--radius);
}
.card > .btn, .card-link { align-self: flex-start; }
.card-link { font-weight: 500; }
.card-headline { font-size: 17px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.card-text { overflow-wrap: anywhere; }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; color: var(--mill); font-variant-numeric: tabular-nums; }
.empty { color: var(--mill); padding: 4px 0; }
.loading { display: flex; flex-direction: column; gap: 8px; padding: 8px 0; }
.load-error {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px;
  background: var(--billet); border: 1px solid var(--hairline); border-radius: var(--radius);
}
.load-error p { overflow-wrap: anywhere; }
.boot { max-width: 320px; margin: 30vh auto 0; padding: 0 16px; }
.info { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px 16px; }
.info dt { font: 600 11px/1.4 var(--display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--mill); }
.info dd { font-size: 13px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* ---- Status chips and icons: an icon AND a word, never colour alone ---- */
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--polished); white-space: nowrap; }
.icon { flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.icon .icon-fill { fill: currentColor; stroke: none; }
.chip.is-running { color: var(--straw); }
.chip.is-failed { color: var(--fail); }
.chip.is-pending, .chip.is-skipped, .chip.is-abandoned { color: var(--mill); }

/* ---- The Temper Bar: the page's one gradient ---- */
.temper-bar { position: relative; height: 6px; overflow: hidden; background: var(--billet-3); border-radius: 999px; }
.temper-bar > span {
  position: absolute; top: 0; bottom: 0; left: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--straw), var(--amber), var(--bronze));
}
.temper-bar.is-sweep > span { width: 34%; animation: sweep 1.2s linear infinite; }
@keyframes sweep { from { left: -34%; } to { left: 100%; } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.live-dot, .icon-running .icon-fill { animation: pulse 1.6s ease-in-out infinite; }

/* ---- Overview: funnel strip and tiles ---- */
.funnel {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  background: var(--billet); border: 1px solid var(--hairline); border-radius: var(--radius);
}
.funnel-step { position: relative; min-width: 0; }
.funnel-step + .funnel-step { border-left: 1px solid var(--hairline); }
/* The arrow sits on the dividing line between two steps. */
.funnel-step + .funnel-step::before {
  content: '→'; position: absolute; top: 14px; left: -9px; z-index: 1; width: 17px;
  background: var(--billet); color: var(--mill); font-size: 12px; line-height: 17px; text-align: center;
}
.funnel-step a { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 14px 16px; color: inherit; }
.funnel-step a:hover { background: var(--billet-2); }
.funnel-label, .tile-label { font-size: 13px; color: var(--mill); overflow-wrap: anywhere; }
.funnel-value, .tile-value { font-size: 22px; font-weight: 600; line-height: 1.25; font-variant-numeric: tabular-nums; }
.funnel-change, .tile-delta { font-size: 13px; font-variant-numeric: tabular-nums; }
.funnel-change { color: var(--mill); }
.funnel-step.is-off .funnel-value { color: var(--mill); }
/* Six tiles: 6, 3 or 2 across, so a row is never left with an orphan. */
.tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.tile {
  display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 16px; color: inherit;
  background: var(--billet); border: 1px solid var(--hairline); border-radius: var(--radius);
}
a.tile { transition: background-color 100ms; }
a.tile:hover { background: var(--billet-2); color: inherit; }
.tile-asof { font-size: 11px; color: var(--mill); }

/* ---- Two-column screens (list + detail) ---- */
.split { display: grid; gap: 20px; align-items: start; }
.split-activity, .split-reports { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.split-trends { grid-template-columns: 260px minmax(0, 1fr); }
.list-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.rows { overflow: hidden; background: var(--billet); border: 1px solid var(--hairline); border-radius: var(--radius); }
.rows li + li { border-top: 1px solid var(--hairline); }
.row-link {
  display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; color: inherit;
  border-left: 2px solid transparent; transition: background-color 100ms;
}
.row-link:hover { background: var(--billet-2); color: inherit; }
.row-link[aria-current='true'] { background: var(--billet-2); border-left-color: var(--straw); }
.row-top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.row-title { font-weight: 500; }
.row-meta { font-size: 13px; color: var(--mill); font-variant-numeric: tabular-nums; }
.row-summary {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 13px; overflow-wrap: anywhere;
}
.detail-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }

/* ---- Agent activity: the step timeline ---- */
.timeline { display: flex; flex-direction: column; }
.step { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; padding-bottom: 16px; }
.step:last-child { padding-bottom: 0; }
.step::before { content: ''; position: absolute; top: 26px; bottom: 2px; left: 11px; width: 1px; background: var(--hairline); }
.step:last-child::before { display: none; }
.step-mark {
  display: grid; place-items: center; width: 24px; height: 24px; color: var(--polished);
  background: var(--billet); border: 1px solid var(--hairline); border-radius: 50%;
}
.step-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-top: 2px; }
.step-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.step-name { font-weight: 600; }
.step-status, .step-time, .step-source, .step-values { font-size: 13px; color: var(--mill); font-variant-numeric: tabular-nums; }
.step-detail { font-size: 13px; overflow-wrap: anywhere; }
.step.is-pending .step-mark, .step.is-skipped .step-mark, .step.is-abandoned .step-mark { color: var(--mill); }
.step.is-pending .step-name { color: var(--mill); }
.step.is-running .step-mark { color: var(--straw); border-color: var(--straw); }
.step.is-running .step-status { color: var(--straw); }
.step.is-failed .step-mark { color: var(--fail); border-color: var(--fail); }
.step.is-failed .step-status { color: var(--fail); }

/* ---- Trends: metric list and chart ---- */
.metric-aside { position: sticky; top: 72px; display: flex; flex-direction: column; gap: 12px; max-height: calc(100vh - 96px); min-width: 0; }
.metric-list { display: flex; flex-direction: column; gap: 16px; overflow-y: auto; padding-right: 4px; }
.metric-group ul { display: flex; flex-direction: column; margin-top: 6px; }
.metric-link {
  display: block; padding: 6px 10px; font-size: 13px; color: var(--polished); overflow-wrap: anywhere;
  border-left: 2px solid transparent; border-radius: 0 4px 4px 0; transition: background-color 100ms;
}
.metric-link:hover { background: var(--billet-2); color: var(--polished); }
.metric-link[aria-current='true'] { color: var(--straw); background: var(--billet); border-left-color: var(--straw); }
.metric-main .card-title { overflow-wrap: anywhere; }
.summary { font-variant-numeric: tabular-nums; }
.how-block { display: flex; flex-direction: column; gap: 4px; padding-top: 12px; border-top: 1px solid var(--hairline); }
.how { font-size: 13px; max-width: 72ch; }
.chart-host { min-width: 0; }
.chart { position: relative; min-width: 0; }
.chart.is-loading { opacity: 0.5; }
.chart-svg { display: block; width: 100%; height: auto; touch-action: pan-y; }
.chart-svg:focus-visible { outline-offset: 4px; }
.chart-svg .gridline { stroke: var(--billet-3); stroke-width: 1; }
.chart-svg .axis { stroke: var(--hairline); stroke-width: 1; }
.chart-svg .tick { fill: var(--mill); font: 400 11px var(--sans); font-variant-numeric: tabular-nums; }
.chart-svg .bar { fill: var(--mark); }
.chart-svg .area { fill: var(--mark); fill-opacity: 0.1; }
.chart-svg .line { fill: none; stroke: var(--mark); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chart-svg .dot { fill: var(--mark); stroke: var(--billet); stroke-width: 2; }
.chart-svg .bar.is-hot, .chart-svg .dot.is-hot { fill: var(--straw); }
.chart-svg .band-hot { fill: var(--polished); fill-opacity: 0.05; }
.chart-svg .crosshair { stroke: var(--mill); stroke-width: 1; }
.chart-tip {
  position: absolute; z-index: 2; display: flex; flex-direction: column; gap: 2px; padding: 8px 10px;
  background: var(--billet-3); border: 1px solid var(--hairline); border-radius: var(--radius);
  font-size: 13px; white-space: nowrap; pointer-events: none;
}
.chart-tip strong { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.chart-tip span { color: var(--mill); }
.chart-empty {
  position: absolute; top: 0; right: 0; bottom: 30px; left: 0;
  display: grid; place-items: center; padding: 16px; color: var(--mill); font-size: 13px; text-align: center; pointer-events: none;
}
.table-wrap { max-height: 420px; overflow: auto; border: 1px solid var(--hairline); border-radius: var(--radius); }
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th {
  position: sticky; top: 0; padding: 8px 12px; background: var(--billet-2); text-align: left;
  font: 600 11px/1.4 var(--display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--mill);
}
.table td { padding: 6px 12px; border-top: 1px solid var(--hairline); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---- Reports ---- */
.report { display: flex; flex-direction: column; gap: 16px; }
.report-headline { font: 600 22px/1.3 var(--sans); overflow-wrap: anywhere; }
.report-section { display: flex; flex-direction: column; gap: 8px; }
.report-section-title { font: 600 17px/1.3 var(--display); }
.report-section p, .report-watch li { max-width: 72ch; overflow-wrap: anywhere; }
.report-watch { display: flex; flex-direction: column; gap: 6px; }
.report-watch li { position: relative; padding-left: 16px; }
.report-watch li::before {
  content: ''; position: absolute; top: 0.62em; left: 2px; width: 5px; height: 5px;
  background: var(--mill); transform: rotate(45deg);
}
.report-question { padding: 12px 16px; background: var(--billet-2); border-left: 2px solid var(--straw); border-radius: 0 var(--radius) var(--radius) 0; }
/* A number in a report is a reading, and a link back to where it came from. */
.fact { color: var(--straw); font-weight: 600; font-variant-numeric: tabular-nums; border-bottom: 1px solid var(--hairline); }
a.fact:hover { color: var(--polished); border-bottom-color: currentColor; }
.fact-missing { padding: 0 4px; background: var(--mill); color: var(--quench); border-radius: 3px; font-size: 12px; font-weight: 600; }
.banner {
  display: flex; flex-direction: column; gap: 8px; padding: 12px 16px; background: var(--billet-2);
  border: 1px solid var(--hairline); border-left: 3px solid var(--fail); border-radius: var(--radius);
}
.banner-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.banner-list { display: flex; flex-direction: column; gap: 4px; padding-left: 20px; list-style: disc; font-size: 13px; overflow-wrap: anywhere; }

/* ---- Sources ---- */
.source-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 16px; align-items: start; }
.conn { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--mill); }
.conn-dot { width: 8px; height: 8px; border: 1px solid var(--mill); border-radius: 50%; }
.conn.is-on { color: var(--straw); }
.conn.is-on .conn-dot { background: var(--straw); border-color: var(--straw); }
.setup { display: flex; flex-direction: column; gap: 6px; padding: 12px; background: var(--billet-2); border-radius: var(--radius); }
.setup p { font-size: 13px; overflow-wrap: anywhere; }
.metric-details summary { color: var(--straw); font-size: 13px; font-weight: 500; cursor: pointer; }
.metric-defs { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.metric-defs li { display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }

/* ---- Sign-in ---- */
.signin { display: grid; place-items: center; min-height: 100vh; padding: 24px 16px; }
.signin-card {
  display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 380px; padding: 28px 24px;
  background: var(--billet); border: 1px solid var(--hairline); border-radius: var(--radius);
}
.signin-form { display: flex; flex-direction: column; gap: 8px; }
.signin-form label { font-size: 13px; color: var(--mill); }
.signin-form .btn { margin-top: 8px; }
.form-msg { min-height: 20px; font-size: 13px; }

/* ---- Narrow screens (down to 375px, no sideways page scroll) ---- */
@media (max-width: 1100px) {
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  .funnel { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .funnel-step:nth-child(3n + 1) { border-left: 0; }
  .funnel-step:nth-child(3n + 1)::before { display: none; }
  .funnel-step:nth-child(n + 4) { border-top: 1px solid var(--hairline); }
}
@media (max-width: 899px) {
  .split-activity, .split-reports, .split-trends { grid-template-columns: minmax(0, 1fr); }
  .split .detail-col { order: -1; }
  .metric-aside { position: static; max-height: none; }
  .metric-list { max-height: 260px; }
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .topbar { position: static; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .topbar-inner { flex-wrap: wrap; padding: 0 16px; gap: 0 12px; }
  .wordmark { padding: 14px 0; }
  .nav { order: 3; flex-basis: 100%; margin-left: -8px; }
  .nav-link { padding: 8px 8px 10px; }
  .main { padding: 16px 16px 48px; }
}
@media (max-width: 600px) {
  .card { padding: 16px; }
  .page-head > div:last-child, .run-button { width: 100%; align-items: stretch; }
  .run-button-note { max-width: none; text-align: left; }
  .funnel { grid-template-columns: minmax(0, 1fr); }
  .funnel-step + .funnel-step { border-left: 0; border-top: 1px solid var(--hairline); }
  .funnel-step + .funnel-step::before { content: '↓'; display: block; top: -9px; left: 16px; }
}

/* One switch for everyone who asks for less motion. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}