/* Load-bearing, and first: every layout rule below sets an explicit
   `display`, which otherwise beats the UA stylesheet's
   `[hidden] { display: none }` and renders every hidden state at once. */
[hidden] {
  display: none !important;
}

/*
 * A fixed shell: the page itself never scrolls, and the two columns scroll
 * inside it independently, matching the prototype's `.q { overflow-y:auto }`
 * on each side of the grid.
 */
body.operations-page {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  overflow: hidden;
}

.operations-blob {
  position: fixed;
  z-index: 0;
  top: -150px;
  right: -140px;
  width: 440px;
  height: 440px;
  border-radius: 48% 52% 55% 45%;
  background: radial-gradient(
    circle at 35% 40%,
    var(--color-accent-300),
    var(--color-accent-200) 55%,
    transparent 75%
  );
  filter: blur(16px);
  opacity: 0.5;
  pointer-events: none;
}

/* Named, not blanket (the same lesson stock-organic.css records): the gate is
   `fixed; inset: 0` and must keep positioning itself, so only the elements
   that need `z-index: 1` above the blob get it, by name. */
body.operations-page > header,
body.operations-page > nav.surface-rail,
body.operations-page > main {
  position: relative;
  z-index: 1;
}

/* ------------------------------------------------------------------ *
 * Header
 * ------------------------------------------------------------------ */

body.operations-page > header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6) var(--space-3);
}

.admin-brand-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3);
  min-width: 0;
}

.admin-brand-line .nav-brand {
  margin: 0;
  font-size: 24px;
}

#admin-queue-line {
  font-size: 13px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

.operations-page .role-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
}

/* .role-nav-link itself now lives in organic-system.css, composed
 * unqualified — SURF-4f standards remediation: this page's own copy
 * differed slightly (no border, 17px padding, accent-700 text) from the
 * other three surfaces' identical version for no documented reason. */

/* .btn .btn-ghost composed in markup for shape/hover/active (identical to
 * Menu's #staff-logout, menu-organic.css's own .text-button); everything
 * below is this surface's own genuine delta. */
.operations-page .text-button {
  flex: none;
  min-height: 44px;
  padding: 0 15px;
  color: var(--color-accent-700);
  font-size: 13px;
}

.operations-page .text-button svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ------------------------------------------------------------------ *
 * "Open any surface" rail
 * ------------------------------------------------------------------ */

body.operations-page > nav.surface-rail {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-6) var(--space-3);
  overflow-x: auto;
}

.surface-rail span {
  flex: none;
  font-size: 12px;
  margin-right: var(--space-1);
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

.surface-rail a {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 15px;
  border: 1px solid var(--color-accent-200);
  border-radius: 999px;
  color: var(--color-text);
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
}

.surface-rail a:hover {
  background: color-mix(in srgb, var(--color-text) 5%, transparent);
}

/* ------------------------------------------------------------------ *
 * Route state, connectivity, and the one live region — the pattern
 * every staff surface repeats. connectivity-status itself is already
 * styled by organic-system.css (Shell States); only what is specific to
 * this document's markup lives here.
 * ------------------------------------------------------------------ */

.operations-route-state {
  margin: 0 var(--space-6) var(--space-3);
  padding: var(--space-4);
  border-radius: calc(var(--radius-lg) * 1.15); /* the .card/.dialog radius */
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 13.5px;
  line-height: 1.5;
}

.operations-route-state .eyebrow {
  margin: 0;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-accent-700);
}

.operations-route-state h1 {
  margin: var(--space-1) 0 var(--space-2);
  font-size: 27px;
  line-height: 1.12;
}

#operations-route-state-detail {
  margin: 0;
}

/*
 * The live region is the one thing on this surface the artboard does not
 * draw, so it has to earn its own air rather than inherit it. With
 * `margin: 0` it sat directly on "Waiting on you" — the announcement and the
 * first section heading read as one block, which the captured frame showed
 * and the markup did not. The empty rule below still collapses it to nothing
 * when there is no announcement, so a quiet surface gains no gap.
 */
.operations-page .status {
  margin: 0 var(--space-6) var(--space-3);
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-accent-700);
}

.operations-page .status:empty {
  margin: 0;
  visibility: hidden;
}

/* ------------------------------------------------------------------ *
 * The workspace: two columns, each scrolling independently
 * (Operations.dc.html: `grid-template-columns: 1fr 372px`).
 * ------------------------------------------------------------------ */

.overseer-workspace.admin-queue {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 372px;
  gap: var(--space-3);
  padding: 0 var(--space-6) var(--space-6);
}

@media (max-width: 900px) {
  .overseer-workspace.admin-queue {
    grid-template-columns: 1fr;
  }
}

.admin-queue-lane,
.admin-queue-context {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.operations-section-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-1) var(--space-3);
}

.operations-section-heading h1,
.operations-section-heading h2 {
  margin: 0;
  font-size: 21px;
}

.operations-section-heading .hint {
  flex: 1 0 auto;
  margin: 0;
  font-size: 12.5px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

@media (max-width: 480px) {
  .operations-section-heading .hint {
    flex-basis: 100%;
  }
}

.stall-health {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.admin-approval-empty {
  padding: var(--space-6);
  border-radius: 30px;
  background: var(--color-accent-2-100);
  text-align: center;
}

.admin-approval-empty p {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 19px;
  color: var(--color-accent-2-800);
}

.admin-approval-empty span {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

/* ------------------------------------------------------------------ *
 * "Worth knowing" — notices raised by stalls, real live state.
 * ------------------------------------------------------------------ */

.exceptions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.exception-list {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.exception {
  padding: var(--space-3) var(--space-4);
  border-radius: 24px;
  background: var(--color-surface);
}

.exception:not(.empty) {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: var(--space-3);
  min-height: 66px;
}

.exception:not(.empty)::before {
  content: "";
  grid-row: 1 / span 2;
  align-self: center;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--color-neutral-800);
}

/* Ingredient trouble is the artboard's accent tone; a stall's own state is
   its neutral one. */
.exception[data-exception-kind="restock-alert"]::before {
  background: var(--color-accent);
}

.exception:not(.empty) > * {
  grid-column: 2;
}

.exception.empty {
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
  font-size: 13px;
}

.exception-summary {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 15.5px;
}

/* The artboard's notice row sets `gap: 1px` between its two lines. */
.exception .hint {
  margin: 1px 0 0;
  font-size: 12.5px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

/* ------------------------------------------------------------------ *
 * "The market right now" — health totals.
 * ------------------------------------------------------------------ */

.health {
  flex: none;
  padding: var(--space-4) var(--space-6);
  border-radius: calc(var(--radius-lg) * 1.15); /* the .card/.dialog radius */
  background: var(--color-accent-2-100);
}

.health .operations-section-heading h2 {
  color: var(--color-accent-2-800);
  font-size: 18px;
}

.health-totals {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-4) 0 0;
  padding: 0;
}

.health-totals > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.health-totals dt {
  font-size: 13.5px;
}

.health-totals dt span {
  font-size: 13.5px;
}

.health-totals dd {
  flex: none;
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 24px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--color-accent-2-800);
}

/* The artboard's per-row tone — see the note beside `dataset.tone` in
   overseer.js. Sage is the default above; terracotta only while a row is
   actually reporting trouble. */
.health-totals dd[data-tone="alert"] {
  color: var(--color-accent);
}

.health-total-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-block: 10px;
  margin-block: -10px;
  color: inherit;
  text-decoration: none;
}

.health-total-link:hover {
  text-decoration: underline;
}

.total-share {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 12px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

/* ------------------------------------------------------------------ *
 * "Settled today" — approval history. Only the honest "not supported"
 * copy is styled here, for the same reason as "Waiting on you" above:
 * `state.log` never populates on this document.
 * ------------------------------------------------------------------ */

.settled-today {
  flex: none;
  padding: var(--space-4) var(--space-6);
  border-radius: calc(var(--radius-lg) * 1.15); /* the .card/.dialog radius */
  background: var(--color-surface);
}

.settled-today h2 {
  margin: 0;
  font-size: 18px;
}

/* 3px, which is the artboard's own value under this heading, not a token
   step — the same sub-token measurement `.admin-approval-empty span` takes. */
.settled-today p {
  margin: 3px 0 0;
  font-size: 12.5px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .operations-page * {
    transition: none;
  }
}

/*
 * A row that carries a share prints the share and nothing else.
 *
 * `Operations.dc.html` gives each market row one value: "Stalls trading — 8 of
 * 9". The reference admin sets both the bare count and the share, so the row
 * rendered "Stalls trading  2  2 of 2 stalls" — the same fact twice, and it
 * read as a rendering fault rather than as a measurement. The share is the
 * richer of the two (it carries its own denominator), so it is the one kept.
 *
 * Scoped to rows where a share is actually present and visible: a row without
 * one, like Notices, still prints its count.
 */
.admin-queue-page
  .health-totals
  > div:has(.total-share:not([hidden]))
  dd:not(.total-share) {
  display: none;
}

/* Phone and zoomed layouts use one scrollable document so wrapped navigation
   and live figures stay reachable below a tall header. */
@media (max-width: 480px) {
  body.operations-page {
    height: auto;
    min-height: 100dvh;
    overflow: auto;
  }

  body.operations-page > nav.surface-rail {
    flex-wrap: wrap;
    overflow: visible;
  }

  .admin-queue-lane,
  .admin-queue-context {
    overflow: visible;
  }

  .health-totals > div {
    flex-wrap: wrap;
  }

  .health-totals dd {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
}