/* Automations health (renderer/automations/automations.js) — "is this still
 * running?", for every background job Hearth has.
 *
 * Direction: the boiler-room gauge wall — the same walnut-and-brass hand as the
 * Collection storage ledger and the Games split gate, but arranged as a wall of
 * mounted instrument plates instead of a shelf of bars. Storage answers "which
 * is biggest", so it is sorted bars; this answers "which one is sick", so it is
 * a plate per job, worst first, every plate the same size and shape. Each plate
 * carries the job's own painted tool (renderer/icons/automations/), a state
 * seal, and a brass cadence rail that fills from its last run toward its next.
 *
 * COLOUR IS NEVER THE SIGNAL ON ITS OWN. Every plate states its condition in a
 * word ("Late", "Blocked", "Off") and carries one of three painted state marks
 * — a lit ember dish, a ringing bell, a snuffed candle. The rim colour only
 * repeats what the word and the mark already said, so the page reads the same
 * to a colour-blind eye, in a screenshot, and read aloud.
 *
 * CONGRUENCE. Plates are flex items with a shared basis, so a short last row
 * STRETCHES to the full width rather than leaving dead cells — see .autoh-grid.
 * Every plate renders the same slots in the same order even when a value is
 * absent, so no plate is a different height from its neighbours by accident.
 */

.autoh {
  /* Walnut and brass, the storage page's surface family. */
  --a-wood:      #171219;
  --a-wood-2:    #1d1720;
  --a-plate:     #221b24;
  --a-plate-2:   #2a2029;
  --a-brass:     #c9a24a;
  --a-brass-dim: #8a6f33;
  --a-ember:     #ff9a3c;
  --a-ember-hi:  #ffc77a;
  --a-ink:       var(--text);
  --a-ink-dim:   var(--text-dim);
  --a-ink-mute:  var(--text-mute);
  --a-line:      rgba(255, 206, 160, .10);
  --a-line-hi:   rgba(255, 190, 130, .28);

  /* Condition hues. Warm family so they belong to the room; the alarm is the
     one genuinely cold-hot note, which is the point of an alarm. */
  --a-ok:        #cf9a3f;
  --a-run:       #ff9a3c;
  --a-due:       #e0b45f;
  --a-bad:       #e0543f;
  --a-off:       #6b6152;

  --a-serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
}
/* The room is a pane of the Systems shell (#ustore-pane-automations, swapped
   in by renderer/systems/systems.js); the shell scrolls, pads and paints the
   wall, so there is no height, scroller or background of its own any more. */
.autoh.hidden { display: none; }

/* ── header ──────────────────────────────────────────────────────────────── */

.autoh-head {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  flex-wrap: wrap;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--a-line);
  margin-bottom: 22px;
}
.autoh-head-text { flex: 1 1 320px; min-width: 0; }
.autoh-title {
  margin: 0;
  font-family: var(--a-serif);
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--a-ink);
}
/* The verdict, in words, at the size of the question. */
.autoh-verdict {
  margin: 6px 0 0;
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.45;
  color: var(--a-brass);
}
.autoh.is-alarm .autoh-verdict { color: var(--a-bad); }
.autoh-sub {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--a-ink-mute);
  font-variant-numeric: tabular-nums;
}
.autoh-head-actions { flex: 0 0 auto; display: flex; gap: 10px; align-items: center; }

.autoh-btn {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px;                 /* touch target */
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid var(--a-line-hi);
  background: linear-gradient(180deg, var(--a-plate-2), var(--a-plate));
  color: var(--a-ink);
  font: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer;
}
.autoh-btn:hover { border-color: var(--a-brass-dim); background: linear-gradient(180deg, #332733, var(--a-plate-2)); }
.autoh-btn:active { transform: translateY(1px); }
.autoh-btn:disabled { opacity: .5; cursor: default; transform: none; }
.autoh-btn:focus-visible { outline: 2px solid var(--a-ember); outline-offset: 2px; }
.autoh-btn.is-primary { border-color: rgba(255,154,60,.5); background: linear-gradient(180deg, #3a2517, #2a1a12); color: var(--a-ember-hi); }

/* ── the attention rail ──────────────────────────────────────────────────── */
/* Only drawn when something is actually wrong, so its presence IS information. */

.autoh-alarm {
  display: flex; flex-direction: column; gap: 10px;
  margin: 0 0 26px;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid rgba(224, 84, 63, .45);
  background:
    radial-gradient(600px 200px at 0% 0%, rgba(224, 84, 63, .16), transparent 70%),
    linear-gradient(180deg, #2b1a1a, #231619);
}
.autoh-alarm.hidden { display: none; }
.autoh-alarm-head {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--a-serif); font-size: 17px; color: #ffbfae;
}
.autoh-alarm-head img { width: 26px; height: 26px; flex: none; }
.autoh-alarm-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.autoh-alarm-list li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px;
  font-size: 14px; line-height: 1.5; color: #f0ded8;
}
.autoh-alarm-name { font-weight: 700; color: #fff0ea; }
.autoh-alarm-why { color: #e5c8c0; }
.autoh-alarm-jump {
  margin-left: auto; flex: none;
  background: none; border: 0; padding: 6px 4px;
  font: inherit; font-size: 13px; color: var(--a-ember-hi);
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer;
}
.autoh-alarm-jump:focus-visible { outline: 2px solid var(--a-ember); outline-offset: 2px; border-radius: 4px; }

/* ── groups ──────────────────────────────────────────────────────────────── */

.autoh-group { margin: 0 0 30px; }
.autoh-group-head {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 12px;
}
.autoh-group-head h2 {
  margin: 0;
  font-family: var(--a-serif);
  font-size: 19px; font-weight: 600; letter-spacing: .02em;
  color: var(--a-brass);
}
/* A hairline that runs out to the edge — the shelf the plates hang on. */
.autoh-group-head::after {
  content: ''; flex: 1 1 auto; height: 1px;
  background: linear-gradient(90deg, var(--a-line-hi), transparent);
}
.autoh-group-count {
  flex: none; font-size: 12px; color: var(--a-ink-mute);
  font-variant-numeric: tabular-nums;
}

/* Flex, not grid, precisely so a short last row stretches to fill instead of
   leaving dead cells. Plates share one basis, so they stay the same shape. */
.autoh-grid {
  display: flex; flex-wrap: wrap; gap: 14px;
}
.autoh-card {
  /* A wide basis on purpose: two plates per row at 1440, three only past ~1700.
     Narrower plates pushed the problem text to three and four lines, and since
     plates in a row share a height, one wrapped explanation dragged its whole
     row tall and left its healthy neighbours half empty. */
  flex: 1 1 460px;
  min-width: 300px;
  display: flex; flex-direction: column;
  padding: 16px 16px 14px;
  border-radius: 14px;
  border: 1px solid var(--a-line);
  background: linear-gradient(180deg, var(--a-plate-2), var(--a-plate));
  box-shadow: 0 2px 4px rgba(0,0,0,.35), 0 14px 32px rgba(0,0,0,.28);
  /* The condition rim. Repeats the word and the mark — never the only signal. */
  border-left: 4px solid var(--a-cond, var(--a-off));
  position: relative;
}
.autoh-card[data-state="ok"]       { --a-cond: var(--a-ok); }
.autoh-card[data-state="running"]  { --a-cond: var(--a-run); }
.autoh-card[data-state="due"]      { --a-cond: var(--a-due); }
.autoh-card[data-state="late"],
.autoh-card[data-state="failing"],
.autoh-card[data-state="blocked"]  { --a-cond: var(--a-bad); }
.autoh-card[data-state="off"],
.autoh-card[data-state="unknown"]  { --a-cond: var(--a-off); }
.autoh-card[data-state="off"],
.autoh-card[data-state="unknown"]  { opacity: .78; }
.autoh-card.is-attention {
  border-color: rgba(224, 84, 63, .38);
  background:
    radial-gradient(420px 160px at 0% 0%, rgba(224, 84, 63, .12), transparent 70%),
    linear-gradient(180deg, var(--a-plate-2), var(--a-plate));
}
/* Briefly ring the plate you jumped to from the alarm rail. */
.autoh-card.is-jumped { box-shadow: 0 0 0 2px var(--a-ember), 0 14px 32px rgba(0,0,0,.28); }

.autoh-card-top { display: flex; align-items: flex-start; gap: 13px; }
/* The painted tool, in a brass bezel — same treatment as the tile frames. */
.autoh-ico {
  flex: none;
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border-radius: 12px;
  border: 1px solid var(--a-line-hi);
  background: radial-gradient(circle at 50% 30%, rgba(255,154,60,.13), rgba(0,0,0,.25));
}
.autoh-ico img { width: 42px; height: 42px; display: block; }
.autoh-card[data-state="off"] .autoh-ico img,
.autoh-card[data-state="unknown"] .autoh-ico img { filter: grayscale(.85) brightness(.8); }

.autoh-card-id { flex: 1 1 auto; min-width: 0; }
.autoh-name {
  margin: 0;
  font-size: 16px; font-weight: 700; line-height: 1.25;
  color: var(--a-ink);
}
.autoh-summary {
  margin: 4px 0 0;
  font-size: 13px; line-height: 1.45;
  color: var(--a-ink-dim);
}

/* The state seal: painted mark + the condition as a WORD. */
.autoh-state {
  flex: none;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px 5px 6px;
  border-radius: 999px;
  border: 1px solid var(--a-cond, var(--a-off));
  background: rgba(0,0,0,.28);
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--a-cond, var(--a-off));
  white-space: nowrap;
}
.autoh-state img { width: 18px; height: 18px; flex: none; }
.autoh-card[data-state="running"] .autoh-state img { animation: autohPulse 2.4s ease-in-out infinite; }

/* ── the cadence rail ────────────────────────────────────────────────────── */
/* A brass rail that fills from the last run toward the next due one. It is the
   instrument that answers the page's question at a glance: a rail that is full
   and red has not fired when it should have. */

.autoh-rail { margin: 13px 0 0; }
.autoh-rail-track {
  position: relative;
  height: 6px; border-radius: 999px;
  background: rgba(0,0,0,.4);
  border: 1px solid var(--a-line);
  overflow: hidden;
}
.autoh-rail-fill {
  position: absolute; inset: 0 auto 0 0;
  width: var(--a-fill, 0%);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--a-brass-dim), var(--a-cond, var(--a-ok)));
}
.autoh-rail-text {
  display: flex; justify-content: space-between; gap: 10px;
  margin-top: 6px;
  font-size: 12px; color: var(--a-ink-mute);
  font-variant-numeric: tabular-nums;
}
.autoh-rail-text b { font-weight: 600; color: var(--a-ink-dim); }
/* Event-driven jobs have no schedule to be late against, and say so rather than
   showing an empty rail that reads as "never runs". */
.autoh-ondemand {
  margin: 13px 0 0;
  font-size: 12px; color: var(--a-ink-mute);
  padding-top: 10px; border-top: 1px dashed var(--a-line);
}

/* ── stats ───────────────────────────────────────────────────────────────── */

.autoh-stats {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 12px 0 0;
  list-style: none; padding: 0;
}
.autoh-stat {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 4px 9px;
  border-radius: 8px;
  border: 1px solid var(--a-line);
  background: rgba(0,0,0,.22);
  font-size: 12px; color: var(--a-ink-mute);
}
.autoh-stat b { font-size: 13px; font-weight: 700; color: var(--a-ink); font-variant-numeric: tabular-nums; }
.autoh-stat.is-bad { border-color: rgba(224,84,63,.45); }
.autoh-stat.is-bad b { color: #ff9b86; }
.autoh-stat.is-good b { color: var(--a-ember-hi); }

/* ── the problem, and what to do about it ────────────────────────────────── */

.autoh-problem {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(224, 84, 63, .35);
  background: rgba(224, 84, 63, .09);
  font-size: 13px; line-height: 1.5; color: #f3ded8;
}
.autoh-fix { display: block; margin-top: 5px; color: #e3c2b8; }
.autoh-fix::before { content: '→ '; color: var(--a-ember); }

/* ── actions ─────────────────────────────────────────────────────────────── */

/* Plates in a row are equal height by design. The readings block is pinned to
   the foot so the slack falls between the summary and the instruments rather
   than pooling at the bottom of a healthy plate as a hole. */
.autoh-card-foot { margin-top: auto; }

.autoh-actions {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding-top: 13px;
}
.autoh-act {
  min-height: 36px;
  padding: 7px 13px;
  border-radius: 9px;
  border: 1px solid var(--a-line-hi);
  background: rgba(0,0,0,.25);
  color: var(--a-ink); font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer;
}
.autoh-act:hover:not(:disabled) { border-color: var(--a-brass-dim); background: rgba(255,154,60,.12); }
.autoh-act:disabled { opacity: .5; cursor: default; }
.autoh-act:focus-visible { outline: 2px solid var(--a-ember); outline-offset: 2px; }
.autoh-act-note { font-size: 12px; color: var(--a-ink-mute); }
.autoh-act-note.is-bad { color: #ff9b86; }
.autoh-act-note.is-good { color: var(--a-ember-hi); }

/* A real switch, not a checkbox: it is the only control that changes state on
   the server from this page, so it should look like it costs something. */
.autoh-toggle {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 36px; padding: 4px;
  font-size: 12px; color: var(--a-ink-mute);
  background: none; border: 0; cursor: pointer;
}
.autoh-toggle:focus-visible { outline: 2px solid var(--a-ember); outline-offset: 2px; border-radius: 8px; }
.autoh-toggle-track {
  width: 38px; height: 20px; border-radius: 999px;
  border: 1px solid var(--a-line-hi);
  background: rgba(0,0,0,.4);
  position: relative; flex: none;
  transition: background 140ms ease, border-color 140ms ease;
}
.autoh-toggle-track::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--a-off);
  transition: transform 140ms ease, background 140ms ease;
}
.autoh-toggle[aria-pressed="true"] .autoh-toggle-track { background: rgba(255,154,60,.22); border-color: rgba(255,154,60,.55); }
.autoh-toggle[aria-pressed="true"] .autoh-toggle-track::after { transform: translateX(18px); background: var(--a-ember); }

/* ── empty / loading ─────────────────────────────────────────────────────── */

.autoh-empty {
  padding: 60px 20px; text-align: center;
  color: var(--a-ink-mute); font-size: 15px;
}
.autoh-foot {
  margin: 10px 0 0;
  font-size: 12px; line-height: 1.6; color: var(--a-ink-mute);
  max-width: 78ch;
}

/* ── motion ──────────────────────────────────────────────────────────────── */

@keyframes autohPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .5; }
}
@media (prefers-reduced-motion: reduce) {
  .autoh-card[data-state="running"] .autoh-state img { animation: none; }
  .autoh-btn:active { transform: none; }
  .autoh-toggle-track, .autoh-toggle-track::after { transition: none; }
}

/* ── phone ───────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .autoh-head { gap: 12px; }
  .autoh-head-actions { width: 100%; }
  .autoh-head-actions .autoh-btn { flex: 1 1 auto; justify-content: center; }
  /* One plate per row: at this width two would each be too narrow to hold the
     cadence line, and the rail is the reason the page exists. */
  .autoh-card { flex: 1 1 100%; min-width: 0; }
  /* Stack each alarm row: inline-wrapping put "Show me" on its own line for
     some entries and beside the text for others, which reads as a bug. */
  .autoh-alarm-list li { flex-direction: column; align-items: flex-start; gap: 2px; }
  .autoh-alarm-jump { margin-left: 0; padding-left: 0; }
}