/* The ops console, drawn from the design system's admin kit.
 *
 * Dense internal desktop: hairlines rather than shadows, documents rather than
 * pills, and every state paired with a word and an icon rather than signalled
 * by colour alone. The tokens live in ops_tokens.css, vendored from the design
 * system; nothing here invents a value.
 *
 * It is picked up by the layout's own stylesheet manifest, which serves every
 * sheet in this directory to every HTML surface — so nothing in here may be
 * written as a bare element rule. See the note below.
 */

/* Every rule here is `ops-` prefixed and every selector is a class, because
 * this sheet is served on every HTML surface in the application: a bare
 * element rule would restyle somebody else's page from a file they never
 * asked for. The console's own element defaults live inside these classes.
 */

.ops-eyebrow {
  font-size: var(--text-2xs);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  font-weight: var(--fw-semibold);
  color: var(--text-faint);
}

.ops-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- chrome ------------------------------------------------------------- */

/* The shell: a rail on the left, the screen on the right. The design system
 * draws one rail for Admin and the Builder portal — the mark, the destinations
 * with what is waiting behind each, and who is about to sign. */

.ops-shell {
  display: flex;
  min-height: 100vh;
  background: var(--surface-page);
}

.ops-rail {
  width: var(--sidenav-w);
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding: var(--sp-4) var(--sp-3);
  background: var(--surface-card);
  border-right: var(--border-w) solid var(--border-hairline);
  box-sizing: border-box;
}

.ops-rail .rail-mark {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-2);
}

.ops-rail .rail-wordmark {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: var(--fw-semibold);
  letter-spacing: -0.015em;
  color: var(--text-strong);
}

.ops-rail .rail-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ops-rail .rail-label {
  padding: 0 var(--sp-2);
  margin-bottom: var(--sp-1);
  font-size: var(--text-2xs);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  font-weight: var(--fw-semibold);
  color: var(--text-faint);
}

.ops-rail .rail-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2h);
  height: 34px;
  padding: 0 var(--sp-2);
  border-radius: var(--r-field);
  font-size: var(--text-sm);
  color: var(--text-muted);
  text-decoration: none;
  transition: var(--transition-control);
}

.ops-rail .rail-item:hover { background: var(--surface-sunken); color: var(--text-strong); }

.ops-rail .rail-item[aria-current="page"] {
  background: var(--surface-sunken);
  color: var(--text-strong);
  font-weight: var(--fw-semibold);
}

.ops-rail .rail-item-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Monospace so a queue that grows from 9 to 10 does not shift the label. */
.ops-rail .rail-count {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--text-faint);
}

.ops-rail .rail-foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-2);
  border-top: var(--border-w) solid var(--border-hairline);
}

.ops-rail .rail-who {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--ls-record);
  color: var(--text-faint);
}

/* button_to puts the class on the button itself, not on the form it wraps it
   in, so this is `.rail-out` and not `.rail-out button`. */
.ops-rail .rail-out {
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-decoration: underline;
  cursor: pointer;
}

.ops-rail .rail-out:hover { color: var(--text-strong); }

.ops-main {
  flex: 1;
  min-width: 0;
  padding: var(--sp-6) var(--gutter-desktop) var(--sp-9);
}

/* The sign-in page, which has no rail because there is nowhere to go yet. */

.ops-gate {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-5);
  background: var(--surface-page);
}

.gate-card {
  width: 100%;
  max-width: 380px;
  padding: var(--sp-6);
  background: var(--surface-card);
  border: var(--border-w) solid var(--border-hairline);
  border-radius: var(--r-card);
}

.gate-card .gate-mark { display: flex; align-items: center; gap: var(--sp-2h); }

.gate-card .gate-wordmark {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: var(--fw-semibold);
  letter-spacing: -0.015em;
  color: var(--text-strong);
}

.gate-card h1 {
  margin: var(--sp-5) 0 0;
  font-size: var(--text-h2);
  color: var(--text-strong);
}

.gate-card .gate-lede {
  margin: var(--sp-2) 0 var(--sp-5);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.gate-card .gate-form { display: flex; flex-direction: column; gap: var(--sp-3); }

.gate-card .field { display: flex; flex-direction: column; gap: var(--sp-1); }

.gate-card .field label {
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  color: var(--text-body);
}

.gate-card .field input {
  height: 38px;
  padding: 0 var(--sp-2h);
  font: inherit;
  font-size: var(--text-sm);
  color: var(--text-strong);
  background: var(--surface-card);
  border: var(--border-w) solid var(--border-strong);
  border-radius: var(--r-field);
}

.gate-card .field input:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
}

.gate-card .field-inline {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.gate-card .gate-submit {
  height: 40px;
  margin-top: var(--sp-2);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--action-primary-fg);
  background: var(--action-primary-bg);
  border: none;
  border-radius: var(--r-button);
  cursor: pointer;
}

.gate-card .gate-submit:hover { background: var(--action-primary-bg-hover); }

.gate-card .gate-aside {
  display: inline-block;
  margin-top: var(--sp-4);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.ops-head h1 { font-size: var(--text-h1); }
.ops-head { margin-bottom: var(--sp-5); }
.ops-head p { margin: var(--sp-2) 0 0; color: var(--text-muted); font-size: var(--text-sm); max-width: var(--prose-max); }

/* --- flash: one key per refusal reason, one sentence per key ------------- */

/* --- what the console says back ------------------------------------------ */

.ops-toasts {
  position: fixed;
  right: var(--gutter-desktop);
  bottom: var(--sp-5);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  pointer-events: none;
}

.ops-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2h);
  width: 380px;
  max-width: calc(100vw - var(--sp-5) * 2);
  box-sizing: border-box;
  padding: var(--sp-2h) var(--sp-3);
  border: var(--border-w) solid transparent;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-3);
  font-size: var(--text-sm);
  pointer-events: auto;
  animation: ops-toast-in var(--dur-base) var(--ease-out) both;
}

.ops-toast--success {
  background: var(--surface-inverse);
  color: var(--text-inverse);
}

.ops-toast--error {
  background: var(--status-error-bg);
  border-color: var(--status-error-border);
  color: var(--status-error-fg);
}

.ops-toast .toast-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.ops-toast .toast-reason {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--ls-record);
  text-transform: uppercase;
}

.ops-toast--success .toast-reason { color: var(--text-inverse-muted); }
.ops-toast--error .toast-reason { color: var(--text-faint); }

.ops-toast .toast-dismiss {
  flex: 0 0 auto;
  display: inline-flex;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  opacity: 0.7;
  cursor: pointer;
}

.ops-toast .toast-dismiss:hover { opacity: 1; }

.ops-toast.is-leaving { animation: ops-toast-out var(--dur-fast) var(--ease-in) both; }

@keyframes ops-toast-in {
  from { opacity: 0; transform: translateY(var(--sp-2)); }
  to { opacity: 1; transform: none; }
}

@keyframes ops-toast-out {
  from { opacity: 1; }
  to { opacity: 0; transform: translateY(var(--sp-1)); }
}

/* Somebody who has asked for less motion still gets the toast, just without
   it sliding — and the leaving animation still fires, so it still removes. */
@media (prefers-reduced-motion: reduce) {
  .ops-toast { animation-name: ops-toast-fade; }
  .ops-toast.is-leaving { animation-name: ops-toast-fade-out; }
}

@keyframes ops-toast-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ops-toast-fade-out { from { opacity: 1; } to { opacity: 0; } }

/* --- card --------------------------------------------------------------- */

.ops-card {
  background: var(--surface-card);
  border: var(--border-w) solid var(--border-hairline);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-1);
}

.ops-card > header {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: var(--border-w) solid var(--border-hairline);
}

.ops-card > header h2 { font-size: var(--text-h3); }
.ops-card > header .ops-note { margin-left: auto; font-size: var(--text-sm); color: var(--text-muted); }
.ops-card-body { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); }

.ops-row {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) auto;
  gap: var(--sp-4);
  align-items: start;
  padding: var(--sp-3) var(--sp-4);
  border-top: var(--border-w) solid var(--border-hairline);
}

.ops-row:first-child { border-top: 0; }
.ops-row-main { display: flex; flex-direction: column; gap: var(--sp-1h); min-width: 0; }
.ops-row-figures { display: flex; flex-direction: column; gap: var(--sp-half); }
.ops-row-actions { display: flex; flex-direction: column; gap: var(--sp-2); align-items: stretch; }
.ops-row-title { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.ops-row-title strong { font-size: var(--text-md); color: var(--text-strong); }
.ops-row-detail { font-size: var(--text-sm); color: var(--text-muted); }
.ops-row.is-flagged { border-left: var(--rule-w) solid var(--status-risk-border); }

/* --- tiles -------------------------------------------------------------- */

.ops-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-3); }

.ops-tile {
  background: var(--surface-card);
  border: var(--border-w) solid var(--border-hairline);
  border-radius: var(--r-card);
  padding: var(--sp-3) var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

/* A dual-currency figure is two numbers and a separator, and the shilling half
   grows with the amount. Left to one line it clipped the dollars off the end —
   the half a reader without a feel for shillings is relying on. It wraps at the
   separator instead, and the tiles are wide enough that most never do. */
.ops-tile .ops-tile-value {
  font-size: var(--text-num-hero);
  font-family: var(--font-mono);
  color: var(--text-strong);
  line-height: var(--lh-tight);
  overflow-wrap: anywhere;
}
.ops-tile .ops-tile-secondary { font-size: var(--text-xs); color: var(--text-faint); }
.ops-tile.is-verified { border-color: var(--status-active-border); }
.ops-tile.is-broken { border-color: var(--status-error-border); }

/* --- money, records, timestamps ----------------------------------------- */

.ops-money { font-family: var(--font-mono); font-size: var(--text-num); color: var(--money-out); white-space: nowrap; }
.ops-money.is-held { color: var(--money-held); }
.ops-money.is-in { color: var(--money-in); }
/* A hero figure is two elements: the shillings at the headline size, the
   dollars small beside them. Set as one string at 34px they overflow the tile
   and the dollar half is cut off, so the two halves wrap against each other
   rather than against the edge of the card. */
.ops-money.is-hero {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-1h);
  font-size: var(--text-num-hero);
  white-space: normal;
}
.ops-money.is-hero .ops-money-primary { white-space: nowrap; }
.ops-money.is-hero .ops-money-secondary {
  font-size: var(--text-sm);
  color: var(--money-secondary);
  white-space: nowrap;
}

.ops-ref, .ops-stamp-time {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--ls-record);
  color: var(--text-faint);
}

/* --- chips and pills ---------------------------------------------------- */

.ops-chip, .ops-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 2px var(--sp-2);
  border-radius: var(--r-sm);
  border: var(--border-w) solid var(--border-strong);
  font-size: var(--text-2xs);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
  white-space: nowrap;
}

.ops-pill.is-active { color: var(--status-active-fg); background: var(--status-active-bg); border-color: var(--status-active-border); }
.ops-pill.is-hold { color: var(--status-hold-fg); background: var(--status-hold-bg); border-color: var(--status-hold-border); }
.ops-pill.is-risk { color: var(--status-risk-fg); background: var(--status-risk-bg); border-color: var(--status-risk-border); }
.ops-pill.is-error { color: var(--status-error-fg); background: var(--status-error-bg); border-color: var(--status-error-border); }
.ops-pill.is-quiet { color: var(--status-expired-fg); background: var(--status-expired-bg); border-color: var(--status-expired-border); }

/* --- provenance: the label and the stamp, never interchangeable ---------- */

.ops-provenance {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-2h);
  border-radius: var(--r-md);
  font-size: var(--text-sm);
}

.ops-provenance .ops-provenance-label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1h);
  font-size: var(--text-2xs);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  font-weight: var(--fw-semibold);
}

.ops-provenance.is-ai { background: var(--agent-bg); border: var(--border-w) solid var(--agent-border); color: var(--text-body); }
.ops-provenance.is-ai .ops-provenance-label { color: var(--agent-fg); }
.ops-provenance.is-system { background: var(--surface-sunken); border: var(--border-w) solid var(--border-hairline); color: var(--text-body); }
.ops-provenance.is-system .ops-provenance-label { color: var(--text-muted); }
.ops-provenance.is-absent { background: transparent; border: var(--border-w) dashed var(--border-strong); color: var(--text-faint); }
.ops-provenance ul { margin: 0; padding-left: var(--sp-4); }

.ops-stamp {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-2h);
  border-radius: var(--r-sm);
  background: var(--human-bg);
  border: var(--border-w) solid var(--human-border);
  color: var(--human-fg);
  font-size: var(--text-xs);
}

.ops-stamp .ops-stamp-initials { font-family: var(--font-mono); font-weight: var(--fw-semibold); letter-spacing: var(--ls-record); }

/* --- controls ----------------------------------------------------------- */

.ops-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }

.ops-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1h);
  padding: var(--sp-1h) var(--sp-3);
  border-radius: var(--r-button);
  border: var(--border-w) solid transparent;
  background: var(--action-primary-bg);
  color: var(--action-primary-fg);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  font-family: inherit;
  cursor: pointer;
  transition: var(--transition-control);
}

.ops-button:hover { background: var(--action-primary-bg-hover); }
.ops-button.is-secondary { background: var(--action-secondary-bg); color: var(--action-secondary-fg); border-color: var(--action-secondary-border); }
.ops-button.is-secondary:hover { background: var(--action-secondary-bg-hover); }
.ops-button.is-seal { background: var(--action-seal-bg); color: var(--action-seal-fg); }
.ops-button.is-seal:hover { background: var(--action-seal-bg-hover); }
.ops-button.is-danger { background: var(--danger-600); color: #fff; }
.ops-button.is-danger:hover { background: var(--danger-700); }
.ops-button[disabled] { background: var(--action-disabled-bg); color: var(--action-disabled-fg); border-color: var(--border-hairline); cursor: not-allowed; }

.ops-why {
  font-size: var(--text-xs);
  color: var(--text-muted);
  max-width: 44ch;
}

.ops-field { display: flex; flex-direction: column; gap: var(--sp-1); font-size: var(--text-sm); }
.ops-field > span { color: var(--text-muted); font-size: var(--text-xs); }

.ops-field input[type="text"],
.ops-field input[type="date"],
.ops-field textarea,
.ops-field select {
  padding: var(--sp-1h) var(--sp-2h);
  border: var(--border-w) solid var(--border-strong);
  border-radius: var(--r-field);
  background: var(--surface-card);
  color: var(--text-body);
  font: inherit;
  font-size: var(--text-sm);
  box-shadow: var(--shadow-inset-field);
}

.ops-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--sp-3); align-items: end; }

/* --- ledger table ------------------------------------------------------- */

.ops-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.ops-table th {
  padding: var(--sp-1h) var(--sp-3);
  text-align: left;
  font-size: var(--text-2xs);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  font-weight: var(--fw-semibold);
  color: var(--text-faint);
  background: var(--surface-sunken);
  border-bottom: var(--border-w) solid var(--border-ledger);
}

.ops-table td { padding: var(--sp-2) var(--sp-3); border-bottom: var(--border-w) solid var(--border-ledger); vertical-align: top; }
.ops-table tbody tr:nth-child(even) { background: var(--surface-ledger-alt); }
.ops-table .is-numeric { text-align: right; font-family: var(--font-mono); white-space: nowrap; }
.ops-table caption { text-align: left; padding: var(--sp-3) var(--sp-4); color: var(--text-muted); font-size: var(--text-sm); }

/* --- notices and empty states ------------------------------------------ */

.ops-notice {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  border: var(--border-w) solid var(--border-hairline);
  background: var(--surface-sunken);
  font-size: var(--text-sm);
  color: var(--text-body);
}

.ops-notice strong { color: var(--text-strong); }
.ops-notice.is-warning { border-color: var(--status-hold-border); background: var(--status-hold-bg); color: var(--status-hold-fg); }

.ops-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-8) var(--sp-4);
  color: var(--text-muted);
  text-align: center;
}

.ops-icon { flex: 0 0 auto; display: block; }

.ops-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2h); }
.ops-list > li { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; padding-bottom: var(--sp-2); border-bottom: var(--border-w) solid var(--border-hairline); }
.ops-list > li:last-child { border-bottom: 0; padding-bottom: 0; }

.ops-claims { display: flex; flex-direction: column; gap: var(--sp-2); }
.ops-claim { display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; font-size: var(--text-sm); }