/* ==========================================================================
   SPRINKLERDUDE UI KIT — STEP 6: CONTROLLER AND CATCH-CAN RESULTS
   Paste after the step 5 block (it reuses .sd-note, .sd-msg, .sd-fieldset,
   .sd-action and .sd-check from steps 4 and 5).
   Covers ARCHITECTURE.md section 4: the controller (Stations, Wiring, Meter
   and Program tabs), the valve box, and the catch-can results panel.
   ========================================================================== */

/* 8.0 Tokens --------------------------------------------------------------- */
:root {
  /* Controller hardware */
  --sd-ctrl-body: #4c555c;            /* grey plastic case */
  --sd-lcd-bg: #2a3a2f;
  --sd-lcd-bg-on: #12321c;
  --sd-lcd-ink: #7cff9a;              /* 9:1 on the off screen, 12:1 when on */
  --sd-lcd-glow: rgba(124, 255, 154, 0.35);
  --sd-sticker: 64px;
  --sd-sticker-sm: 48px;

  /* Wire insulation colors (always shown with the wire's name) */
  --sd-wire-red: #d33a3a;
  --sd-wire-blue: var(--sd-blue);
  --sd-wire-yellow: #f2cf32;
  --sd-wire-white: var(--sd-paper);
  --sd-wire-dot: 18px;

  --sd-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --sd-num-w: 5.5em;                  /* number input width */
  --sd-day-w: 52px;
}

/* 8.1 Shared form pieces ---------------------------------------------------- */
/* Native select, drawn to match .sd-input */
.sd-select {
  -webkit-appearance: none;
  appearance: none;
  max-width: 100%;
  min-height: var(--sd-tap);
  padding: 0 34px 0 var(--sd-sp-3);
  border: var(--sd-bw) solid var(--sd-ink);
  border-radius: var(--sd-r-md);
  background-color: var(--sd-paper);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--sd-ink) 50%),
    linear-gradient(135deg, var(--sd-ink) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
  color: var(--sd-ink);
  font-family: var(--sd-font-body);
  font-size: var(--sd-fs-md);
  font-weight: 600;
  cursor: pointer;
}
.sd-select:disabled,
.sd-input:disabled {
  border-style: dashed;
  border-color: var(--sd-ink-soft);
  background-color: var(--sd-paper-2);
  color: var(--sd-ink-soft);
  cursor: not-allowed;
}
.sd-input--num {
  width: var(--sd-num-w);
  min-height: var(--sd-tap);
  border-width: var(--sd-bw);
  font-size: var(--sd-fs-md);
  font-variant-numeric: tabular-nums;
}
/* One labelled control per row */
.sd-form-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sd-sp-2) var(--sd-sp-3);
  align-items: center;
}
.sd-form-row__label { font-weight: 800; line-height: 1.25; }

/* A button that stays down while it is on: <button class="sd-btn sd-btn--sm sd-toggle" aria-pressed="true"> */
.sd-toggle[aria-pressed="true"] {
  background: var(--sd-lime);
  transform: translateY(3px);
  box-shadow: none;
}
.sd-days {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sd-sp-2) 6px;
  padding-bottom: 4px;
}
.sd-days .sd-toggle {
  flex: 1 1 40px;
  min-width: 40px;
  max-width: var(--sd-day-w);
  padding: 0;
  font-size: var(--sd-fs-sm);
}

/* Small heading inside a panel body */
.sd-subhead {
  margin: 0;
  font-size: var(--sd-fs-md);
  font-weight: 800;
  line-height: 1.3;
}
.sd-list {
  margin: 0;
  padding-left: 1.3em;
  line-height: 1.45;
}

/* ✔ / ✖ checklist: put a kit .sd-mark--pass or --fail span first in each item */
.sd-checklist {
  display: grid;
  gap: var(--sd-sp-1);
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 1.4;
}
.sd-checklist li {
  display: grid;
  grid-template-columns: 1.3em minmax(0, 1fr);
}

/* 8.2 Controller ------------------------------------------------------------ */
.sd-ctrl {
  display: grid;
  gap: var(--sd-sp-3);
  min-width: 0;
}
.sd-ctrl__face {
  display: flex;
  align-items: center;
  gap: var(--sd-sp-3);
  padding: var(--sd-sp-2) var(--sd-sp-3);
  border: var(--sd-bw) solid var(--sd-ink);
  border-radius: var(--sd-r-lg);
  background: var(--sd-ctrl-body);
}
.sd-ctrl__sticker {
  flex: none;
  width: var(--sd-sticker-sm);
  height: var(--sd-sticker-sm);
  object-fit: contain;
}
.sd-lcd {
  flex: 1;
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: var(--sd-tap);
  padding: var(--sd-sp-2) var(--sd-sp-3);
  border-radius: var(--sd-r-sm);
  background: var(--sd-lcd-bg);
  color: var(--sd-lcd-ink);
  font-family: var(--sd-font-mono);
  font-size: var(--sd-fs-sm);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.04em;
  overflow-wrap: anywhere;
}
.sd-lcd.is-on {
  background: var(--sd-lcd-bg-on);
  box-shadow: inset 0 0 12px var(--sd-lcd-glow);
}

/* Station rows */
.sd-stations {
  display: grid;
  gap: var(--sd-sp-2);
}
.sd-station {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sd-sp-2) var(--sd-sp-3);
  align-items: center;
  padding: var(--sd-sp-2) var(--sd-sp-3);
  border: var(--sd-bw) solid var(--sd-line);
  border-radius: var(--sd-r-md);
  background: var(--sd-paper);
}
.sd-station__name { font-weight: 800; }
.sd-station__nick { color: var(--sd-ink-soft); }
.sd-station__status {
  display: block;
  color: var(--sd-ink-soft);
  font-size: var(--sd-fs-sm);
  line-height: 1.35;
}
.sd-station__status--bad  { color: var(--sd-red-text); font-weight: 700; }   /* "⚠ not answering" */
.sd-station__status--good { color: var(--sd-green-text); font-weight: 700; } /* "✔ wired" */
.sd-station__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sd-sp-2);
  padding-bottom: 3px;
}
.sd-station__actions .sd-btn { flex: 1 1 auto; }
/* Running: ink outline, blue tint, and a moving water stripe down the left edge */
.sd-station.is-running {
  padding-left: calc(var(--sd-sp-3) + 8px);
  border-color: var(--sd-ink);
  background-color: var(--sd-blue-tint);
  background-image:
    repeating-linear-gradient(180deg,
      transparent 0, transparent 8px,
      var(--sd-ink-a35) 8px, var(--sd-ink-a35) 16px),
    linear-gradient(var(--sd-blue), var(--sd-blue));
  background-size: 8px 32px, 8px 100%;
  background-repeat: repeat-y, no-repeat;
  animation: sd-run 900ms linear infinite;
}
@keyframes sd-run { to { background-position: 0 32px, 0 0; } }
.sd-station.is-running .sd-station__status { color: var(--sd-ink); }
.sd-station__name { overflow-wrap: anywhere; }

/* Running-test box: holds a kit .sd-progress and two .sd-btn--sm */
.sd-testbox {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sd-sp-2) var(--sd-sp-3);
  padding: var(--sd-sp-3) var(--sd-sp-3) calc(var(--sd-sp-3) + 3px);
  border: var(--sd-bw) solid var(--sd-ink);
  border-radius: var(--sd-r-md);
  background: var(--sd-lime-tint);
}
.sd-testbox__text { flex: 1 1 100%; font-weight: 800; }
.sd-testbox .sd-progress { flex: 1 1 140px; }
.sd-action--end { justify-content: flex-end; }

/* Wiring tab */
.sd-wires { display: grid; }
.sd-wire {
  display: grid;
  grid-template-columns: var(--sd-wire-dot) minmax(0, 1fr) minmax(130px, 46%);
  gap: var(--sd-sp-3);
  align-items: center;
  padding: var(--sd-sp-2) 0;
  border-bottom: 1px solid var(--sd-line);
}
.sd-wire .sd-select { width: 100%; }
.sd-wire__dot {
  width: var(--sd-wire-dot);
  height: var(--sd-wire-dot);
  border: var(--sd-bw) solid var(--sd-ink);
  border-radius: 50%;
}
.sd-wire__dot--red    { background: var(--sd-wire-red); }
.sd-wire__dot--blue   { background: var(--sd-wire-blue); }
.sd-wire__dot--yellow { background: var(--sd-wire-yellow); }
.sd-wire__dot--white  { background: var(--sd-wire-white); }

/* Meter tab */
.sd-probes { display: grid; }
.sd-probe {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sd-sp-2) var(--sd-sp-3);
  align-items: center;
  padding: var(--sd-sp-3) 0;
  border-bottom: 1px solid var(--sd-line);
}
.sd-probe__name { font-weight: 800; }
.sd-probe > .sd-reading { grid-column: 1 / -1; }
/* A multimeter display: bright on dark. .is-empty is the unlit "Not measured yet." */
.sd-reading {
  margin: 0;
  padding: var(--sd-sp-2) var(--sd-sp-3);
  border: var(--sd-bw) solid var(--sd-ink);
  border-radius: var(--sd-r-sm);
  background: var(--sd-lcd-bg-on);
  color: var(--sd-lcd-ink);
  font-family: var(--sd-font-mono);
  font-size: var(--sd-fs-sm);
  font-weight: 700;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.sd-reading.is-empty {
  border-color: var(--sd-line);
  background: var(--sd-paper-2);
  color: var(--sd-ink-soft);
  font-weight: 400;
}
.sd-reading:empty { display: none; }

/* Program tab: the estimate line */
.sd-estimate {
  margin: 0;
  padding: var(--sd-sp-2) var(--sd-sp-3) var(--sd-sp-2) calc(var(--sd-sp-3) + 5px);
  border-radius: var(--sd-r-md);
  background: var(--sd-green-tint);
  box-shadow: inset 5px 0 0 var(--sd-green);
  color: var(--sd-green-text);
  font-size: var(--sd-fs-sm);
  font-weight: 700;
  line-height: 1.4;
}

/* A zone's settings in a box: add to a .sd-fieldset */
.sd-fieldset--box {
  display: grid;
  gap: var(--sd-sp-2);
  padding: var(--sd-sp-2) var(--sd-sp-3) var(--sd-sp-3);
  border: var(--sd-bw) solid var(--sd-line);
  border-radius: var(--sd-r-md);
}
.sd-fieldset--box > .sd-fieldset__legend {
  margin: 0;
  padding: 0 var(--sd-sp-2);
  overflow-wrap: anywhere;
}
.sd-estimate--short {                 /* under or over what the lawn needs */
  background: var(--sd-amber-tint);
  box-shadow: inset 5px 0 0 var(--sd-amber-text);
  color: var(--sd-amber-text);
}
/* The monthly bill: the one number the whole Program tab is about */
.sd-bill {
  margin: 0 4px 4px 0;
  padding: var(--sd-sp-3);
  border: var(--sd-bw) solid var(--sd-ink);
  border-radius: var(--sd-r-md);
  background: var(--sd-lime);
  font-size: var(--sd-fs-lg);
  font-weight: 800;
  line-height: 1.3;
  box-shadow: var(--sd-shadow-card);
}
.sd-program {
  display: grid;
  gap: var(--sd-sp-3);
  min-width: 0;
}

/* 8.3 Valve box -------------------------------------------------------------- */
.sd-valves {
  display: grid;
  gap: var(--sd-sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.sd-valve {
  display: grid;
  gap: var(--sd-sp-2);
  padding: var(--sd-sp-3);
  border: var(--sd-bw) solid var(--sd-ink);
  border-radius: var(--sd-r-md);
  background: var(--sd-paper);
}
.sd-valve__name { margin: 0; font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; }
.sd-valve__desc { margin: 0; line-height: 1.4; }
.sd-valve__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sd-sp-3) var(--sd-sp-2);
  padding-bottom: 3px;
}
.sd-valve__actions .sd-btn { min-width: 0; padding: var(--sd-sp-1) var(--sd-sp-2); font-size: var(--sd-fs-sm); }

/* 8.4 Catch-can results ----------------------------------------------------- */
.sd-results {
  display: grid;
  gap: var(--sd-sp-3);
  min-width: 0;
}
/* Slightly tighter cells so two value columns fit a phone */
.sd-results .sd-table th,
.sd-results .sd-table td { padding-left: var(--sd-sp-3); padding-right: var(--sd-sp-3); }
/* Can readings keep the shape of the lawn, so the grid scrolls sideways on a phone */
.sd-cans-wrap {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.sd-cans {
  border-collapse: collapse;
  font-family: var(--sd-font-mono);
  font-size: var(--sd-fs-sm);
  font-variant-numeric: tabular-nums;
}
.sd-cans td {
  padding: var(--sd-sp-1) var(--sd-sp-2);
  border: 1px solid var(--sd-line);
  background: var(--sd-paper);
  text-align: right;
  white-space: nowrap;
}
.sd-cans td.is-low {                  /* lowest quarter: bold, tinted, and the engine's ▼ */
  background: var(--sd-amber-tint);
  box-shadow: inset 0 0 0 1px var(--sd-amber-text);
  font-weight: 800;
}
/* Overspray list: one line per head that waters something it should not */
.sd-problems {
  display: grid;
  gap: var(--sd-sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.sd-problems li {
  display: grid;
  grid-template-columns: 1.3em minmax(0, 1fr);
  padding: var(--sd-sp-2) var(--sd-sp-3);
  border-radius: var(--sd-r-md);
  background: var(--sd-red-tint);
  line-height: 1.35;
}
.sd-problems li::before {
  content: "✖";
  color: var(--sd-red-text);
  font-weight: 800;
}

/* "Saved to your journal" */
.sd-saved {
  margin: 0;
  color: var(--sd-ink-soft);
  font-size: var(--sd-fs-sm);
}
/* A list inside a kit callout (the problems under "Not yet there") */
.sd-callout__list {
  margin: var(--sd-sp-1) 0 0;
  padding-left: 1.2em;
  line-height: 1.4;
}

/* 8.5 Roomier from 600px wide ----------------------------------------------- */
@container sd-viewport (min-width: 600px) {
  .sd-ctrl__face { padding: var(--sd-sp-3); }
  .sd-ctrl__sticker { width: var(--sd-sticker); height: var(--sd-sticker); }
  .sd-lcd { font-size: var(--sd-fs-md); }
  .sd-station { grid-template-columns: minmax(0, 1fr) auto; }
  .sd-station__actions { justify-content: flex-end; }
  .sd-station__actions .sd-btn { flex: none; }
  .sd-testbox__text { flex: 0 1 auto; }
  .sd-form-row { grid-template-columns: minmax(0, 280px) auto; justify-content: start; }
  .sd-valve__actions { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Short screens: slim controller face so the first station row shows */
@container sd-viewport (max-height: 520px) {
  .sd-ctrl { gap: var(--sd-sp-2); }
  .sd-ctrl__face { padding: var(--sd-sp-1) var(--sd-sp-3); }
  .sd-ctrl__sticker { width: var(--sd-tap); height: var(--sd-tap); }
}

/* 8.6 Reduced motion -------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .sd-station.is-running { animation: none; }
  .sd-toggle[aria-pressed="true"] { transform: none; }
}