/* Theme layer over Pico. Pico stays vendored and untouched; everything here
   overrides its own custom properties, so the console reads as one system.

   The selectors mirror Pico's exactly — it declares its palette under
   `:root:not([data-theme=dark])`, specificity (0,2,0), which beats a bare `:root`.
   An earlier pass used `:root` and every colour here was silently ignored.

   The accent is deliberately far from green/amber/red on the wheel: those three
   are spoken for by run outcome, and an accent that collided with them would make
   a link look like a warning. */

:root:not([data-theme="dark"]),
[data-theme="light"] {
  --pico-primary: #4338ca;
  --pico-primary-background: #4f46e5;
  --pico-primary-border: #4f46e5;
  --pico-primary-hover: #3730a3;
  --pico-primary-hover-background: #4338ca;
  --pico-primary-hover-border: #4338ca;
  --pico-primary-focus: rgba(79, 70, 229, 0.25);
  --pico-primary-underline: rgba(67, 56, 202, 0.4);

  --console-ok: #15803d;
  --console-warn: #b45309;
  --console-bad: #b91c1c;
  --console-idle: #6b7280;
}

:root:not([data-theme="light"]),
[data-theme="dark"] {
  --pico-primary: #a5b4fc;
  --pico-primary-background: #4f46e5;
  --pico-primary-border: #4f46e5;
  --pico-primary-hover: #c7d2fe;
  --pico-primary-hover-background: #4338ca;
  --pico-primary-hover-border: #4338ca;
  --pico-primary-focus: rgba(129, 140, 248, 0.3);
  --pico-primary-underline: rgba(165, 180, 252, 0.4);

  --console-ok: #4ade80;
  --console-warn: #fbbf24;
  --console-bad: #f87171;
  --console-idle: #9ca3af;
}

:root {
  /* Pico ramps the root font size 100% -> 131.25% as the viewport grows, so a wide
     monitor renders the whole console ~a third larger and it reads as zoomed in.
     That ramp suits a marketing page, not a dense operations table. Media queries
     add no specificity, so this later-loaded rule beats all five of its breakpoints. */
  --pico-font-size: 100%;
  --pico-border-radius: 0.35rem;
  --pico-line-height: 1.5;
  --pico-block-spacing-vertical: 1rem;
  --pico-form-element-spacing-vertical: 0.5rem;
}

main.container { max-width: 60rem; }

nav { padding-block: 0.5rem 1rem; }
nav strong { font-size: 1.05rem; letter-spacing: -0.01em; }

/* An operations console is read at a glance before it is read carefully. The row
   is a grid rather than a flex huddle so it fills the measure and the columns line
   up; `dd` gets its inherited 40px inline-start margin removed, or every value
   sits right of the label it belongs to.

   All three values share one size on purpose. An earlier pass gave "next run" a
   1.9rem hero treatment, which handed the loudest element on the page to the words
   "not scheduled" — maximum emphasis on an absence. State is carried by the dot and
   the word, not by type size. */
.status {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1.25rem 2rem;
  padding: 1.25rem 0 1.5rem;
  border-bottom: 1px solid var(--pico-muted-border-color);
  margin-bottom: 1.75rem;
}
.status > div { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.status dt,
.status .label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pico-muted-color);
  margin: 0;
}
.status dd {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* Colour never carries the meaning alone: the dot is redundant with the word
   beside it, so the state survives greyscale, colour-blindness and a printout. */
.state { display: inline-flex; align-items: baseline; gap: 0.45rem; }
.state::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--console-idle);
  flex: none;
  transform: translateY(-0.05rem);
}
.state[data-state="running"]::before,
.state[data-state="success"]::before { background: var(--console-ok); }
.state[data-state="partial"]::before { background: var(--console-warn); }
.state[data-state="failed"]::before  { background: var(--console-bad); }

.mode {
  font-family: var(--pico-font-family-monospace);
  font-size: 0.8rem;
  padding: 0.1rem 0.45rem;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: 0.25rem;
}

/* Two actions, side by side on a wide screen. Stacked, they left-hug a 60rem
   measure and leave half the page empty; the grid collapses to one column below
   44rem, which is where the pair stops fitting. */
.panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr));
  gap: 1rem 3rem;
  align-items: start;
}
section.panel { margin-block: 0 1.5rem; }

/* Pico renders `select` as inline-block, so capping a control's width lets it sit
   inline beside its own label text. Constrain the form instead and leave Pico's
   native label-over-control stacking alone. */
section.panel form { max-width: 26rem; }
section.panel label { margin-bottom: 1rem; font-weight: 500; }
section.panel input[type="text"] { font-family: var(--pico-font-family-monospace); }
section.panel small { display: block; margin-top: 0.35rem; color: var(--pico-muted-color); }
section.panel label:has(input[type="checkbox"]) {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 1.25rem;
}
section.panel label input[type="checkbox"] { margin: 0; }
section.panel > h2 {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pico-muted-color);
  margin-bottom: 0.75rem;
}

/* Trigger is destructive-adjacent: it pushes production data. It reads as an
   action, never as the page's default button. */
.actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.actions button { width: auto; margin: 0; }
.hint { color: var(--pico-muted-color); font-size: 0.85rem; margin: 0; }

table { font-size: 0.9rem; }
table td, table th { padding: 0.5rem 0.75rem; }
td.num { font-variant-numeric: tabular-nums; text-align: right; }
time[title] { border-bottom: 1px dotted var(--pico-muted-border-color); cursor: help; }
td.id, td.when { font-family: var(--pico-font-family-monospace); font-size: 0.82rem; white-space: nowrap; }

/* Per-type counts are a small table, not a sentence. As concatenated prose this
   column wrapped to six lines and set the height of every row above it; on a grid
   the three numbers line up down the page and scan in one pass. */
.types {
  display: grid;
  grid-template-columns: auto repeat(3, 3.6rem);
  gap: 0.15rem 0.4rem;
  align-items: baseline;
}
.types .type { font-size: 0.82rem; white-space: nowrap; padding-right: 0.35rem; }
.types .n {
  font-family: var(--pico-font-family-monospace);
  font-variant-numeric: tabular-nums;
  font-size: 0.82rem;
  text-align: right;
}
/* The count itself already says "3"; the colour only makes a non-zero easier to find. */
.types .n.bad { color: var(--console-bad); font-weight: 600; }

/* The header shares the cells' grid, so the three labels sit exactly over the three
   numbers. Laid out independently they overlapped into one unreadable run. */
th.typeshead .n {
  font-family: var(--pico-font-family-sans-serif);
  font-weight: 400;
  font-size: 0.7rem;
  color: var(--pico-muted-color);
}
th.typeshead .type { font-size: inherit; }

.filters { display: flex; gap: 0.5rem; align-items: baseline; flex-wrap: wrap; }
/* A segmented control, not three links. The previous version rendered the selected
   filter in the lightest colour of the three, so the active state read as disabled. */
.filters {
  display: inline-flex;
  align-self: flex-start;
  gap: 0;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
  overflow: hidden;
  font-size: 0.85rem;
}
.filters a {
  padding: 0.3rem 0.75rem;
  text-decoration: none;
  color: var(--pico-muted-color);
  background: none;
  border-left: 1px solid var(--pico-muted-border-color);
  line-height: 1.4;
}
.filters a:first-child { border-left: none; }
.filters a:hover { color: var(--pico-color); background: var(--pico-card-sectioning-background-color); }
.filters a[aria-current="true"] {
  background: var(--pico-primary-background);
  color: var(--pico-primary-inverse, #fff);
  font-weight: 600;
}
.filters a[aria-current="true"]:hover { background: var(--pico-primary-hover-background); color: #fff; }

.empty {
  padding: 2rem 0;
  color: var(--pico-muted-color);
  border-top: 1px solid var(--pico-muted-border-color);
}

.themetoggle {
  background: none;
  border: none;
  color: var(--pico-muted-color);
  padding: 0.25rem 0.5rem;
  width: auto;
  font-size: 0.85rem;
}
.themetoggle:hover { color: var(--pico-color); background: none; }

.signin { max-width: 22rem; margin: 12vh auto 0; }
.signin h1 { font-size: 1.4rem; letter-spacing: -0.01em; margin-bottom: 0.25rem; }
.signin .hint { margin-bottom: 1.5rem; }

@media (max-width: 40rem) {
  .status { gap: 1rem 1.25rem; }
  .status dd { font-size: 1.05rem; }
}