/* /loop only: the Selector's cycle cards and Run cards. terminal.css
   (vendored, the factory's visual identity) has no card component, and
   app.css is the lab chrome this page deliberately does not wear - so the
   handful of rules the cards need live here. */
.cycle,
.run {
    border: 1px solid var(--secondary-color);
    padding: 0 1rem 1rem;
    margin-bottom: 2rem;
}

/* The Run in flight is the one thing on this page that is happening right
   now rather than being remembered, so it is the one thing the border
   distinguishes. */
.run-in-flight {
    border-color: var(--font-color);
    border-left-width: 4px;
}

form.sign-out { display: inline; margin-left: 1rem; }
form.sign-out button {
    background: none; border: 0; padding: 0; color: var(--secondary-color);
    cursor: pointer; font: inherit;
}

.cycle .badge,
.run .badge {
    font-size: 0.8em;
    border: 1px solid currentColor;
    padding: 0 0.4em;
    vertical-align: middle;
}

.cycle .cycle-target,
.cycle .detail,
.run .detail {
    color: var(--secondary-color);
}

.cycle table.skips {
    margin-top: 1rem;
}

/* Where an outcome put the issue (#155). The route badges carry the meaning
   the operator acts on - green is the only one that means "nothing to do but
   review" - so they are the only badges on the card that are coloured. */
.run .badge-awaiting-review {
    border-color: var(--primary-color);
    color: var(--primary-color);
}
.run .badge-handed-to-human,
.run .badge-given-up {
    border-color: var(--error-color);
    color: var(--error-color);
}
.run .badge-retrying {
    border-color: var(--secondary-color);
    color: var(--secondary-color);
}

/* The status strip (#156): four cells across the top of /loop, wrapping to
   one per line on a narrow screen. Grid rather than flex so the cells keep
   equal widths and the box card - the widest by far - does not squeeze the
   other three into their labels. The history page (#160) wears the same strip
   with only the budget cell in it, which auto-fit renders as one full-width
   row without needing a rule of its own. */
.strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0 1.5rem;
  margin: 1.5rem 0;
  padding: 0.75rem 1rem;
  border: 1px solid var(--secondary-color);
}
.strip .cell {
  display: flex;
  flex-direction: column;
  padding: 0.5rem 0;
}
.strip .cell-label {
  color: var(--secondary-color);
  font-size: 0.85em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.strip .cell-value { color: var(--font-color); }
.strip .alarm { color: var(--error-color); }
/* The guardrail chip (#165) is the one cell on the strip that is coloured
   when nothing is wrong. It is an assertion - "this cannot change without a
   review" - and an assertion rendered in the same grey as a timestamp reads
   as another fact rather than as the claim it is. The colour is the vendored
   palette's affirmative one - the same one the awaiting-review badge carries,
   and with the same meaning: nothing to do here. terminal.css has three
   colours and no green among them, and a fourth introduced for one chip would
   be this page leaving the factory's visual identity. */
.strip .guarded { color: var(--primary-color); }
.strip .detail {
  color: var(--secondary-color);
  font-size: 0.85em;
}
/* The box card carries three facts and outgrows one column on a wide screen
   long before the other cells do. */
.strip .cell-box { grid-column: 1 / -1; }

/* The Host (#42): a strip of its own, sitting on the queue rather than on
   the Selector strip above. Those cells prove the Selector can run; these
   prove this machine has headroom for another Run. Distinct from the box
   card, which is what the Run side is holding. */
.host { margin: 1.5rem 0; }
.host h2 { margin-bottom: 0.25rem; }
.host > p { color: var(--secondary-color); margin: 0 0 0.5rem; }
.host .strip { margin: 0; }

/* MicroVMs (#97): the same strip-of-cells as the Host, naming each
   Execution Boundary instance the box is holding. Distinct from the box
   card (what the box IS) and from runs-in-flight (what the Journal has). */
.microvms { margin: 1.5rem 0; }
.microvms h2 { margin-bottom: 0.25rem; }
.microvms > p { color: var(--secondary-color); margin: 0 0 0.5rem; }
.microvms .strip { margin: 0; }
.microvms .detail { color: var(--secondary-color); }

/* The Targets this instance reads issues from. Configuration, not a
   Journal replay: the list is the stanzas in file order. */
.targets { margin: 1.5rem 0; }
.targets h2 { margin-bottom: 0.25rem; }
.targets > p { color: var(--secondary-color); margin: 0 0 0.5rem; }
.targets ul {
  padding-left: 0;
  list-style: none;
  margin: 0;
}
.targets li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.35rem 0;
}
.targets li .btn { flex: 0 0 auto; }
.targets .detail { color: var(--secondary-color); }
.targets .alarm { color: var(--error-color); }
.targets form.target-add {
  margin-top: 1rem;
  max-width: 36rem;
}
.targets form.target-add p { margin: 0 0 0.6rem; }
.targets form.target-add label {
  display: block;
  color: var(--secondary-color);
  font-size: 0.85em;
}
.targets form.target-add input { width: 100%; }
.targets form.target-add details.target-add-more {
  margin: 0 0 0.6rem;
}
.targets form.target-add details.target-add-more > summary {
  cursor: pointer;
  color: var(--secondary-color);
  font-size: 0.85em;
}
.targets form.target-add details.target-add-more > summary::before {
  content: "[+] ";
}
.targets form.target-add details.target-add-more[open] > summary::before {
  content: "[-] ";
}

/* Pause (#161) is a page-wide operating state, so its banner sits above
   the strip rather than pretending to be one status cell among four. */
.pause-control {
  display: flex;
  justify-content: flex-end;
  margin: 1rem 0;
}
.pause-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-color: var(--error-color);
  color: var(--error-color);
}
.pause-banner button { flex: 0 0 auto; }

/* The Termination Contract the Run is under (#162). Open on the Run in
   flight, where "what is it allowed to do for the next ninety minutes" is the
   question being asked, and folded shut on the ended Runs below it so a
   history of cards does not become eight bound lists. */
.run .contract {
  margin: 0 0 1rem 0;
  font-size: 0.9em;
}
.run .contract summary {
  cursor: pointer;
  color: var(--secondary-color);
}
.run .contract ul {
  margin: 0.4rem 0 0 0;
  padding-left: 1.2rem;
}

/* The Iteration records the watcher journals during a Run (#157). Tabular,
   because they are one row per Iteration with the same four facts each time,
   and the operator reads down the column that changed. */
.run .iterations {
  width: 100%;
  margin: 0 0 1rem 0;
}
.run .iterations th,
.run .iterations td {
  padding: 0.2rem 0.6rem 0.2rem 0;
  text-align: left;
  vertical-align: top;
}
.run .iterations thead th {
  font-weight: normal;
  opacity: 0.6;
}

/* The queue board (#158): the tracker's labels as columns, side by side on a
   wide screen and stacked on a narrow one. Grid rather than flex so the
   columns keep equal widths whatever the longest card holds - a board whose
   columns resized with their contents would move under the reader every time
   a cycle ran. */
.board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 1rem;
  /* The board alone steps outside the page's reading column. terminal.css
     sets that column at about 72ch, which is right for prose and too narrow
     for five columns - they wrap onto a second row there, and a board whose
     last two columns are below the fold is a list. The full viewport, less a
     margin: five columns wide enough to read without scrolling down a
     narrow one. Centred, and on a narrow screen the columns stack. */
  width: calc(100vw - 3rem);
  margin: 1.5rem auto;
  margin-left: 50%;
  transform: translateX(-50%);
}
.board .column {
  border: 1px solid var(--secondary-color);
  padding: 0.5rem 0.75rem 0.75rem;
}
.board .column h3 {
  margin: 0.5rem 0 0.25rem;
  font-size: 1em;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
/* The count belongs next to the column's name: "eligible 0" and "eligible 11"
   are the two facts an operator reads the board for, and neither is legible
   by counting cards. */
.board .column h3 .count {
  color: var(--secondary-color);
  float: right;
}
.board .column-label,
.board .column .detail { margin: 0 0 0.5rem; }
.board .column .detail { color: var(--secondary-color); font-size: 0.85em; }
.board .card {
  border-left: 2px solid var(--secondary-color);
  padding: 0.25rem 0 0.25rem 0.6rem;
  margin-bottom: 0.6rem;
}
/* The two columns that are waiting on the operator rather than on the
   Selector are the ones he is on the board to find. */
.board .column[data-column="awaiting-review"] .card {
  border-left-color: var(--primary-color);
}
.board .column[data-column="awaiting-review"] .card.card-conflicting,
.board .card.card-conflicting {
  border-left-color: var(--error-color);
}
.board .card .badge {
  font-size: 0.8em;
  border: 1px solid currentColor;
  padding: 0 0.4em;
  vertical-align: middle;
  margin-left: 0.3rem;
}
.board .card .badge-conflicting {
  border-color: var(--error-color);
  color: var(--error-color);
}
.board .column[data-column="ready-for-human"] .card {
  border-left-color: var(--error-color);
}
.board .column[data-column="in-flight"] .card {
  border-left-color: var(--font-color);
}

/* Whether the page is being pushed to (#159). Sized down and set beside the
   heading rather than given a cell in the status strip: those four cells are
   about the Selector, and this one is about this browser tab. */
.live {
  font-size: 0.5em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: middle;
  margin-left: 0.6rem;
}
.live .live-on { color: var(--primary-color); }
.live .live-off { color: var(--secondary-color); }
/* The default is "not live", so a page whose script never ran says so rather
   than claiming a stream it does not have. */
.live[data-live="on"] .live-off,
.live[data-live="off"] .live-on { display: none; }

/* A foldable section: the heading is the control, so the page can be read as
   an overview with the long sections shut. The default marker is replaced
   with one the terminal identity would draw, and the heading stays a heading
   - the <summary> wraps it rather than replacing it. State is kept per
   section in a cookie loop-ui.js writes, because the live region is
   re-rendered whole on every Journal row (#159) and a fold that reopened on
   each swap would not be a fold. */
details.fold > summary {
  cursor: pointer;
  list-style: none;
}
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary h2 { display: inline-block; margin-right: 0.5rem; }
details.fold > summary::before {
  content: "[-]";
  color: var(--secondary-color);
  margin-right: 0.5rem;
}
details.fold:not([open]) > summary::before { content: "[+]"; }

/* The Dashboard Account's headed-section order on `/` (#147). A control,
   not a headed panel: closed until someone is rearranging. */
.section-order {
  margin: 1rem 0 1.5rem;
}
.section-order > summary {
  cursor: pointer;
  color: var(--secondary-color);
}
.section-order ol {
  padding-left: 1.5rem;
}
.section-order li {
  padding: 0.25rem 0;
}
.section-order .section-move {
  display: inline;
  margin-left: 0.5rem;
}

/* Accounts, decisions, and auth pages (#84). The window's second shell is
   gone, so these pages wear the terminal identity too. terminal.css already
   owns the forms, tables, and prompt blocks; what is left here is what those
   pages add: the account and ADR lists, and the status words on them.

   Those words stay neutral grey on purpose. The route badges on the Run
   cards carry the meaning the operator acts on - green is the only one that
   means "nothing to do but review" - so nothing else on any page borrows
   those colours. An account's role and an ADR's status are read as words,
   not glanced as colours. */
.account-list,
.adr-list {
  padding-left: 0;
}

.account-list .account {
  padding: 0.5rem 0;
  border-bottom: 1px dashed var(--secondary-color);
}

.account-list .account:last-child {
  border-bottom: none;
}

.account-list .account-email {
  font-weight: 700;
}

.account-list .account-role,
.account-list .account-deactivate {
  display: inline;
  margin-left: 0.75rem;
}

.account .badge,
.adr-list .badge,
.adr .badge {
  font-size: 0.8em;
  border: 1px solid var(--secondary-color);
  color: var(--secondary-color);
  padding: 0 0.4em;
  vertical-align: middle;
  white-space: nowrap;
}

.adr-num {
  color: var(--secondary-color);
}

.adr-list .adr-num {
  margin-right: 0.6rem;
}

/* terminal.css styles text inputs and textareas but not selects; the
   accounts page has one (the role picker), and an unstyled control beside
   styled ones reads as broken rather than as native. */
.account select {
  border: 1px solid var(--font-color);
  border-radius: 0;
  background-color: var(--background-color);
  color: var(--font-color);
  font-family: var(--font-stack);
  font-size: 1em;
  padding: 0.5em;
}

/* The theme control: one button, clicked through system / light / dark.
   The dark palette below only lands when it, or the OS, asks for it. */
.theme-toggle {
  background: none;
  border: 1px solid var(--secondary-color);
  color: var(--font-color);
  font-family: var(--font-stack);
  font-size: 0.8em;
  padding: 0.15rem 0.5rem;
  cursor: pointer;
}
.theme-toggle:hover {
  background-color: var(--primary-color);
  color: var(--invert-font-color);
}

/* The dark palette - terminal.css's own dark-theme values. Declared twice on
   purpose: once for an explicit choice (data-theme="dark" wins over
   everything) and once for the OS preference when no explicit choice was
   stored (data-theme absent means "system"). Everything on these pages is
   painted from the variables, so these blocks are the whole theme. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --background-color: #222225;
  --font-color: #e8e9ed;
  --invert-font-color: #222225;
  --primary-color: #62c4ff;
  --secondary-color: #a3abba;
  --error-color: #ff3c74;
  --progress-bar-background: #3f3f44;
  --progress-bar-fill: #62c4ff;
  --code-bg-color: #3f3f44;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --background-color: #222225;
    --font-color: #e8e9ed;
    --invert-font-color: #222225;
    --primary-color: #62c4ff;
    --secondary-color: #a3abba;
    --error-color: #ff3c74;
    --progress-bar-background: #3f3f44;
    --progress-bar-fill: #62c4ff;
    --code-bg-color: #3f3f44;
  }
}