/* RIGOR live execution board. It is fed only by real job stages. */

/* Locked steps remain visibly pending instead of fading into illegibility. */
#card-intent.locked, #card-engine.locked, #card-run.locked {
  filter: opacity(.86);
  background: linear-gradient(135deg, var(--panel), var(--panel-2));
  border-color: var(--border-strong);
}
#card-intent.locked > h2, #card-engine.locked > h2, #card-run.locked > h2 {
  color: var(--ink); font-size: 13px; font-weight: 850; letter-spacing: .13em;
}
#card-intent.locked > h2 .num, #card-engine.locked > h2 .num,
#card-run.locked > h2 .num { color: var(--accent-deep); font-weight: 900; }
#card-intent.locked .locked-note, #card-engine.locked .locked-note,
#card-run.locked .locked-note {
  color: var(--text-dim); font-weight: 650; line-height: 1.5;
}

/* A 5x5 field of the hummingbird, not one figure.

   It began as three different geoglyphs scattered across the width -- a monkey,
   a spider and this one -- which read as clip art rather than as a mark. The
   hummingbird is the only drawing that holds up, so it is the only one kept.
   One centred copy then failed for a different reason: on a fixed layer it sat
   below the fold and only appeared once the reader scrolled.

   Twenty-five explicit cells rather than `repeat`, because each tile has to be
   centred in its cell and sized by HEIGHT: the asset is 512x768, taller than
   wide, and scaling it to a cell's width on a 16:9 screen would crop or
   distort it. The layer is position:fixed, so the field stays put while the
   page scrolls under it and every screen shows the same twenty-five.

   THE HEIGHT CAME DOWN WHEN THE COUNT WENT UP. Five rows leave a fifth of the
   viewport each, so a tile sized for three rows would overlap its neighbours
   and the field would read as a smear rather than as a pattern. */
body::before {
  background:
    url("rigor-hummingbird-v2.png") no-repeat 5% 6% / auto min(17vh, 190px),
    url("rigor-hummingbird-v2.png") no-repeat 27.5% 6% / auto min(17vh, 190px),
    url("rigor-hummingbird-v2.png") no-repeat 50% 6% / auto min(17vh, 190px),
    url("rigor-hummingbird-v2.png") no-repeat 72.5% 6% / auto min(17vh, 190px),
    url("rigor-hummingbird-v2.png") no-repeat 95% 6% / auto min(17vh, 190px),
    url("rigor-hummingbird-v2.png") no-repeat 5% 28% / auto min(17vh, 190px),
    url("rigor-hummingbird-v2.png") no-repeat 27.5% 28% / auto min(17vh, 190px),
    url("rigor-hummingbird-v2.png") no-repeat 50% 28% / auto min(17vh, 190px),
    url("rigor-hummingbird-v2.png") no-repeat 72.5% 28% / auto min(17vh, 190px),
    url("rigor-hummingbird-v2.png") no-repeat 95% 28% / auto min(17vh, 190px),
    url("rigor-hummingbird-v2.png") no-repeat 5% 50% / auto min(17vh, 190px),
    url("rigor-hummingbird-v2.png") no-repeat 27.5% 50% / auto min(17vh, 190px),
    url("rigor-hummingbird-v2.png") no-repeat 50% 50% / auto min(17vh, 190px),
    url("rigor-hummingbird-v2.png") no-repeat 72.5% 50% / auto min(17vh, 190px),
    url("rigor-hummingbird-v2.png") no-repeat 95% 50% / auto min(17vh, 190px),
    url("rigor-hummingbird-v2.png") no-repeat 5% 72% / auto min(17vh, 190px),
    url("rigor-hummingbird-v2.png") no-repeat 27.5% 72% / auto min(17vh, 190px),
    url("rigor-hummingbird-v2.png") no-repeat 50% 72% / auto min(17vh, 190px),
    url("rigor-hummingbird-v2.png") no-repeat 72.5% 72% / auto min(17vh, 190px),
    url("rigor-hummingbird-v2.png") no-repeat 95% 72% / auto min(17vh, 190px),
    url("rigor-hummingbird-v2.png") no-repeat 5% 94% / auto min(17vh, 190px),
    url("rigor-hummingbird-v2.png") no-repeat 27.5% 94% / auto min(17vh, 190px),
    url("rigor-hummingbird-v2.png") no-repeat 50% 94% / auto min(17vh, 190px),
    url("rigor-hummingbird-v2.png") no-repeat 72.5% 94% / auto min(17vh, 190px),
    url("rigor-hummingbird-v2.png") no-repeat 95% 94% / auto min(17vh, 190px),
    radial-gradient(1200px 700px at 85% -10%, rgba(63, 90, 166, .07), transparent 60%),
    radial-gradient(900px 600px at -5% 100%, rgba(21, 122, 110, .06), transparent 55%);
  /* THE ASSET WAS THE PROBLEM, not this number. It was authored with a maximum
     alpha of 127 -- already half transparent -- and a mean of 49 out of 255, so
     multiplying it by a CSS opacity delivered roughly 12% and nothing was
     visible at any setting. rigor-hummingbird-v2.png normalises that channel to
     a full 255 maximum; the value below is now doing what it looks like it is
     doing. Text never sits on this layer: it is z-index -2, behind the cards. */
  opacity: .65;
}

/* Cream instead of optical white on every solid action surface. */
.opt[aria-pressed="true"] .box::after, .engine .connect, .run, .primary {
  color: var(--panel);
}

.circuit-card {
  overflow: hidden; isolation: isolate;
  background:
    linear-gradient(145deg, rgba(243,231,209,.97), rgba(234,219,193,.94)),
    repeating-linear-gradient(0deg, transparent 0 23px,
      rgba(201,174,130,.12) 23px 24px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow);
}
.circuit-card::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    url("rigor-hummingbird-v2.png") no-repeat 50% 118% / 210px auto;
  opacity: .34;
}
.audit-circuit { width: 100%; position: relative; }
.circuit-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 18px; margin-bottom: 22px; padding-bottom: 14px;
  border-bottom: 1px solid var(--border-strong);
}
.circuit-head > div:first-child { display: flex; flex-direction: column; gap: 3px; }
.circuit-eyebrow {
  color: var(--accent-deep); font: 800 10.5px/1 var(--font-mono);
  letter-spacing: .16em;
}
.circuit-head b { color: var(--ink); font: 750 20px/1.2 var(--font-display); }
.circuit-meters { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
.circuit-meters span {
  padding: 5px 9px; border: 1px solid var(--border-strong); border-radius: 999px;
  background: var(--panel); color: var(--text-dim); font-size: 11.5px; font-weight: 750;
  font-variant-numeric: tabular-nums;
}
.circuit-meters .circuit-clock { color: var(--teal); border-color: rgba(21,122,110,.38); }

.circuit-board {
  display: grid; grid-template-columns: minmax(150px, .75fr) minmax(38px, .18fr)
    minmax(260px, 2fr) minmax(38px, .18fr) minmax(170px, .9fr);
  align-items: center; gap: 0; min-height: 250px;
}
.circuit-node {
  position: relative; min-width: 0; padding: 13px 14px 12px;
  border: 1px solid var(--border-strong); border-radius: 11px;
  background: rgba(243,231,209,.92); box-shadow: 0 4px 16px -10px rgba(52,41,28,.55);
  transition: transform .25s var(--ease), border-color .25s var(--ease),
              box-shadow .25s var(--ease), background .25s var(--ease);
}
.circuit-node-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.circuit-kind {
  color: var(--text-mute); font: 750 9.5px/1 var(--font-mono); letter-spacing: .11em;
}
.circuit-led {
  width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong);
  box-shadow: inset 0 0 0 2px rgba(52,41,28,.10);
}
.circuit-node strong {
  display: block; margin-top: 8px; color: var(--ink);
  font: 750 14px/1.25 var(--font-display); overflow-wrap: anywhere;
}
.circuit-state { display: block; margin-top: 5px; color: var(--text-mute); font-size: 11.5px; font-weight: 650; }
.circuit-reason { display: block; margin-top: 6px; color: var(--text-dim); font-size: 10.5px; line-height: 1.35; }
.circuit-node[data-state="running"] {
  transform: translateY(-2px); border-color: var(--accent);
  background: var(--accent-soft); box-shadow: 0 0 0 3px rgba(200,90,52,.10), var(--shadow-sm);
}
.circuit-node[data-state="running"] .circuit-led {
  background: var(--accent); box-shadow: 0 0 0 5px rgba(200,90,52,.12);
  animation: circuit-pulse 1.35s ease-in-out infinite;
}
.circuit-node[data-state="done"], .circuit-node[data-state="warned"] { border-color: rgba(21,122,110,.52); }
.circuit-node[data-state="done"] .circuit-led,
.circuit-node[data-state="warned"] .circuit-led { background: var(--teal); }
.circuit-node[data-state="failed"] { border-color: var(--fatal); background: rgba(155,44,26,.06); }
.circuit-node[data-state="failed"] .circuit-led { background: var(--fatal); }
.circuit-node[data-state="skipped"] { opacity: .62; border-style: dashed; }

.circuit-wire { position: relative; height: 2px; background: var(--border-strong); }
.circuit-wire::before, .lane-trace::after {
  content: ""; position: absolute; width: 8px; height: 8px; border-radius: 50%;
  top: 50%; left: 0; transform: translate(-50%, -50%); background: var(--accent);
  opacity: 0;
}
.circuit-wire.energized { background: linear-gradient(90deg, var(--teal), var(--ochre)); }
.circuit-wire.energized::before { opacity: 1; animation: signal-x 1.8s linear infinite; }
.circuit-bank { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; padding: 10px 12px; }
.circuit-lane { position: relative; padding-left: 12px; }
.lane-trace {
  position: absolute; left: 0; top: 50%; width: 12px; height: 2px;
  background: var(--border-strong); transform: translateY(-50%);
}
.circuit-lane[data-state="running"] .lane-trace,
.circuit-lane[data-state="done"] .lane-trace,
.circuit-lane[data-state="warned"] .lane-trace { background: var(--teal); }
.circuit-lane[data-state="running"] .lane-trace::after {
  opacity: 1; animation: signal-x-short 1.25s linear infinite;
}
.circuit-tail { display: flex; flex-direction: column; gap: 8px; }
.circuit-tail .circuit-wire { width: 2px; height: 14px; margin: -1px auto; }

@keyframes circuit-pulse { 50% { box-shadow: 0 0 0 8px rgba(200,90,52,0); } }
@keyframes signal-x { from { left: 0; } to { left: 100%; } }
@keyframes signal-x-short { from { left: 0; } to { left: 100%; } }

@media (max-width: 64rem) {
  .circuit-board { grid-template-columns: 1fr; gap: 10px; align-items: stretch; }
  .circuit-wire { width: 2px; height: 22px; margin: 0 auto; }
  .circuit-wire.energized { background: linear-gradient(180deg, var(--teal), var(--ochre)); }
  .circuit-wire.energized::before { animation-name: signal-y; }
  .circuit-bank { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); padding: 0; }
  .circuit-tail { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); }
  .circuit-tail .circuit-wire { display: none; }
}
@media (max-width: 46rem) {
  body::before { background:
    radial-gradient(1200px 700px at 85% -10%, rgba(63,90,166,.07), transparent 60%),
    radial-gradient(900px 600px at -5% 100%, rgba(21,122,110,.06), transparent 55%); }
  .circuit-head { align-items: flex-start; flex-direction: column; }
  .circuit-meters { justify-content: flex-start; }
  .circuit-bank, .circuit-tail { grid-template-columns: 1fr; }
}
@keyframes signal-y { from { top: 0; left: 50%; } to { top: 100%; left: 50%; } }

/* ---------------------------------------------------------- spend tiers ---
   Fixed amounts, not a number field. A tier the manuscript cannot afford stays
   VISIBLE and disabled: hiding it would leave a reader wondering whether $5
   exists, and the answer -- it exists, it is not enough for this paper -- is
   more useful than an absence. */
.tiers {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 10px;
}
.tier {
  min-width: 62px;
  padding: 9px 12px;
  font: 600 15px/1 var(--ui, system-ui, sans-serif);
  color: #34291C;
  background: #FFFDF7;
  border: 1.5px solid #D9CBAE;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease, transform .08s ease;
}
.tier:hover:not(:disabled) { border-color: #C85A34; transform: translateY(-1px); }
.tier-on {
  color: #FFFDF7;
  background: #C85A34;
  border-color: #C85A34;
}
/* The cheapest tier that can run THIS audit. Pointed at, not chosen: the
   reader still has to click it. Until this rule existed the class was added
   by budget.js and drawn by nothing, so the hint lived only in a tooltip. */
.tier-minimum {
  border-color: #C85A34;
  border-width: 2px;
  box-shadow: 0 0 0 3px rgba(200, 90, 52, .16);
  position: relative;
}
.tier-minimum::after {
  content: "minimum";
  position: absolute;
  left: 50%;
  bottom: -16px;
  transform: translateX(-50%);
  font: 600 10px/1 var(--ui, system-ui, sans-serif);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #C85A34;
  white-space: nowrap;
}
.tier-blocked {
  color: #A99C86;
  background: #F3EEE3;
  border-style: dashed;
  cursor: not-allowed;
  text-decoration: line-through;
}
.tier-note {
  margin: 0 0 10px;
  font-size: 13.5px;
  color: #7D6F5B;
}

/* ------------------------------------------------------------- donate ---
   Placeholder. The destination is deliberately not wired: a payment link is the
   one thing in this interface that must not be guessed at. */
.topbar-donate {
  border: 1.5px solid #C85A34;
  border-radius: 7px;
  padding: 4px 11px;
  color: #C85A34;
  font-weight: 600;
}
.topbar-donate:hover { background: #C85A34; color: #FFFDF7; }

/* The wait, stated. An audit runs for 10-30 minutes and the page fills itself
   in; a reader who is not told that reloads in the middle. */
.running-wait {
  margin: 10px 0 0;
  font-size: 14px;
  color: #7D6F5B;
}

/* ------------------------------------------------- depth vs focus ---
   Two questions, side by side, because they ARE two questions. Depth is a
   radio: exactly one. Focus is a set of chips capped at three, with "Full
   paper" sitting apart as the default that covers everything. Putting them in
   one flat list is what made "General audit" look like an alternative to
   "Mathematics" rather than a property of it. */
.scope-split {
  display: grid;
  grid-template-columns: minmax(240px, 0.9fr) minmax(300px, 1.6fr);
  gap: 26px;
  align-items: start;
}
@media (max-width: 860px) { .scope-split { grid-template-columns: 1fr; } }

.scope-head {
  margin: 0 0 10px;
  font: 600 13px/1.3 var(--ui, system-ui, sans-serif);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #34291C;
}
.scope-hint {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  font-style: italic;
  color: #7D6F5B;
}

.depths { display: flex; flex-wrap: wrap; gap: 10px; }
.depth {
  flex: 1 1 150px;
  text-align: left;
  padding: 12px 14px;
  background: #FFFDF7;
  border: 1.5px solid #D9CBAE;
  border-radius: 9px;
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.depth:hover { border-color: #C85A34; }
.depth-on { border-color: #C85A34; background: #FDF5EC; }
.depth-label { display: block; font-weight: 600; color: #34291C; font-size: 15px; }
.depth-blurb { display: block; margin-top: 3px; font-size: 12.5px; color: #7D6F5B; }

.opt-full {
  border-color: #C85A34 !important;
  background: #FDF5EC;
}
.scope-sub { margin: -4px 0 10px; font-size: 13px; color: #7D6F5B; }