/* Admin: the operator workspace in the Decision Lab's open layout (`.workflow` in styles.css gives
   it the console's buttons, notices, tables and state markers). Sections hang from hairlines, a
   table becomes labelled facts on a phone, and a review opens under the row it acts on. */
.admin-workspace { min-width: 0; font-variant-numeric: tabular-nums; }
/* Both tab rows scroll sideways on a narrow screen rather than wrapping their names. */
.admin-workspace .view-tabs::-webkit-scrollbar { display: none; }
#admin-content { container: admin / inline-size; min-width: 0; }
.admin-section > * + * { margin-top: var(--space-6); }
.admin-section > * + :is(.admin-block, .admin-columns, .admin-split, .admin-pair, [data-offset-switch]) { margin-top: var(--space-12); }
/* The waitlist's offset and front of the line with their save, then whether the offset fades, on
   one line as wide as the hint above, the fade choice at its right end. Both take a control's
   height, so they sit level. */
.admin-offset { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-3) var(--space-8); max-width: 72ch; margin-bottom: var(--space-4); font-size: var(--text-sm); }
.admin-offset > .field:last-child { margin-left: auto; }
.admin-offset > label.field { flex: 1 1 6rem; max-width: 9rem; margin-right: calc(var(--space-3) - var(--space-8)); }
.admin-offset :is(.button, .segmented button) { min-height: 40px; }
.admin-stack { display: grid; gap: var(--space-4); min-width: 0; }
.admin-workspace .admin-table-wrap + .admin-pagination { margin-top: 0; }
.admin-section > .admin-toolbar + * { margin-top: var(--space-6); }
.admin-block { min-width: 0; }
.admin-block > .section-head .hint { max-width: 72ch; }
.admin-block > * + :not(.section-head) { margin-top: var(--space-4); }
.admin-loading, .admin-note { color: var(--ink-3); font-size: var(--text-ui); }
.admin-note { max-width: 80ch; text-wrap: pretty; }
.admin-money { font-variant-numeric: tabular-nums; }
.admin-workspace code { color: var(--ink-3); font: 400 var(--text-sm)/1.5 var(--font-body); overflow-wrap: anywhere; }
.admin-account-link { color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }
/* A long ID takes the width its column already has, and shows the rest on hover. */
.admin-workspace .admin-id { display: block; width: 0; min-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-table th.admin-cell-id { width: 11rem; }
.admin-target { color: inherit; }
.admin-target:hover { color: var(--ink); }
.admin-revision { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-4); color: var(--ink-3); font-size: var(--text-ui); }
.admin-revision strong { color: var(--ink); font: 500 var(--text-lg)/1.4 var(--font-body); }

/* A section's controls: filters on the left, when it was read and Refresh on the right. */
.admin-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-6); }
.admin-filter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); flex: 1 1 30rem; min-width: 0; }
.admin-filter :is(input:not([type="checkbox"]), select) { flex: 1 1 14rem; width: auto; max-width: 24rem; min-width: 0; }
.admin-filter select { flex: 0 1 12rem; }
.admin-filter .segmented { flex: none; }
.admin-freshness { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-4); margin-left: auto; color: var(--ink-3); font-size: var(--text-ui); }
.admin-freshness:empty, .admin-freshness > span:empty { display: none; }
/* Referral filters name every field, so they line up on their labels. */
.admin-filters { display: grid; grid-template-columns: repeat(2, minmax(8.5rem, .75fr)) repeat(2, minmax(10rem, 1fr)) minmax(9rem, .8fr) auto; align-items: end; gap: var(--space-4); }
.admin-filters .field-label { font-size: var(--text-ui); }
.admin-filters > .button { justify-self: start; }

/* Summary columns under eyebrows, as on Billing, and figures as on Account. */
.admin-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); align-items: start; gap: var(--space-10) var(--space-12); }
.admin-column { display: grid; align-content: start; min-width: 0; }
.admin-column > .eyebrow { display: block; margin-bottom: var(--space-2); }
.admin-column > :is(.text-link, .hint, .admin-note) { margin-top: var(--space-3); }
.admin-column > .text-link { justify-self: start; }
.admin-column .detail-facts dd { font-size: var(--text-ui); }
.admin-workspace .admin-figures { grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
.admin-eyebrow { display: block; margin-bottom: var(--space-1); }
.admin-workspace .admin-block > .admin-eyebrow + * { margin-top: var(--space-2); }
.admin-total { display: grid; justify-items: start; gap: var(--space-1); padding-bottom: var(--space-4); }
.admin-total strong { color: var(--ink); font: 400 var(--text-figure)/1.15 var(--font-body); letter-spacing: var(--tracking-display); overflow-wrap: anywhere; }
/* Two columns of work side by side on a wide screen: main content and what supports it. */
.admin-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(15rem, 19rem); align-items: start; gap: var(--space-10) var(--space-12); }
.admin-split > * { display: grid; align-content: start; gap: var(--space-12); min-width: 0; }
.admin-split > aside { gap: var(--space-8); padding-left: var(--space-8); border-left: 1px solid var(--line-subtle); }
.admin-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); align-items: start; gap: var(--space-12); }
.admin-pair > * { margin: 0 !important; }

/* The service's state, then anything that needs a person, each with its way in. */
.admin-status { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-3) var(--space-6); }
.admin-status h2 { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--ink); font: 500 var(--text-title)/1.2 var(--font-body); letter-spacing: var(--tracking-display); }
.admin-status h2::before { content: ""; width: 10px; height: 10px; flex: none; border: 1.5px solid var(--mint-ink); border-radius: 50%; background: var(--mint); }
.admin-status.attention h2::before { border-color: var(--amber-ink); background: var(--amber); box-shadow: 0 0 0 4px var(--amber-wash); }
.admin-status.failed h2::before { border-color: var(--danger); background: var(--danger); }
.admin-status.waiting h2::before { border-color: var(--ink-3); background: transparent; }
.admin-status p { margin-top: var(--space-1); color: var(--ink-3); font-size: var(--text-ui); }
.admin-status .admin-freshness { margin-top: var(--space-1); }
.admin-issues { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-subtle); }
.admin-issues li { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: baseline; gap: var(--space-1) var(--space-3); padding-block: var(--space-3); border-bottom: 1px solid var(--line-subtle); }
.admin-issues li::before { content: ""; width: 8px; height: 8px; border: 1px solid var(--amber-ink); border-radius: 50%; background: var(--amber); transform: translateY(-1px); }
.admin-issues strong { color: var(--ink); font-weight: 500; }
.admin-issues p { grid-column: 2; color: var(--ink-3); font-size: var(--text-ui); }
.admin-issues .text-link { grid-row: 1; grid-column: 3; }

/* Tables: hairline rows with the Lab's headings. Secondary lines sit under the value they explain. */
/* Positioned, so a hidden column label (.sr-only) scrolls and clips with its table instead of
   widening the page. */
.admin-table-wrap { position: relative; min-width: 0; overflow-x: auto; }
.admin-table td { padding-block: var(--space-4); vertical-align: top; color: var(--ink-2); }
.admin-workspace .admin-table thead th { padding-top: 0; white-space: nowrap; }
.admin-table td strong { color: var(--ink); font-weight: 500; }
.admin-table td small { display: block; margin-top: 2px; color: var(--ink-3); font-size: var(--text-sm); line-height: 1.5; overflow-wrap: anywhere; }
.admin-table td details { margin-top: var(--space-1); }
.admin-table td details > summary { font-size: var(--text-sm); }
.admin-table td details[open] > summary { margin-bottom: var(--space-1); }
.admin-table :is(.num, time) { white-space: nowrap; }
.admin-table td > .admin-cell { min-width: 0; }
.admin-table .admin-cell-actions { text-align: right; }
.admin-table .admin-cell-actions :is(.admin-row-actions, a) { flex-wrap: nowrap; white-space: nowrap; }
.admin-table .badge + small { margin-top: 0; }
.admin-row-actions { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 0 var(--space-4); }
.admin-table .check { margin-top: 2px; }
.admin-table .admin-failure { color: var(--danger); }
.admin-table tr[tabindex]:focus { outline: none; }
.admin-table tr[tabindex]:focus > td { background: var(--bg-sunk); }
/* A row that opens a page: its name is the link, and a click elsewhere on the row follows it. */
.admin-table tr[data-href] { cursor: pointer; }
.admin-table tr[data-href]:is(:hover, :has(a:focus-visible)) > td { background: var(--bg-sunk); }
/* A review opens under its row, in a tile, so it reads as part of the row it acts on. */
.admin-table tr:has(+ .admin-table-after) > td { border-bottom: 0; }
.admin-table .admin-table-after > td { padding-top: 0; }
.admin-action { display: grid; gap: var(--space-4); max-width: 46rem; padding: var(--space-5) var(--space-6); border-radius: var(--radius-md); background: var(--tile); color: var(--ink-2); font-size: var(--text-ui); }
.admin-action:focus { outline: none; }
.admin-action h3 { color: var(--ink); font: 500 var(--text-md)/1.4 var(--font-body); }
.admin-action form { display: grid; gap: var(--space-4); }

.admin-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2) var(--space-5); padding-top: var(--space-3); border-top: 1px solid var(--line-subtle); color: var(--ink-3); font-size: var(--text-ui); }
.admin-pagination > :first-child:not(button, a) { margin-right: auto; }
.admin-pagination .icon { width: 16px; height: 16px; }
.admin-workspace .admin-pagination .button { gap: var(--space-1); }
.admin-empty { display: grid; gap: var(--space-1); padding-block: var(--space-6); border-top: 1px solid var(--line-subtle); }
.admin-workspace .admin-empty h3 { color: var(--ink); font: 500 var(--text-md)/1.4 var(--font-body); }
.admin-workspace .admin-notice + .admin-notice { margin-top: var(--space-2); }
.admin-notice .notice-body p + p { margin-top: var(--space-1); }

/* Forms: fields stacked to a readable width; short fields share a line. */
.admin-form { display: grid; gap: var(--space-4); max-width: 38rem; min-width: 0; }
.admin-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); align-items: end; gap: var(--space-4); }
.admin-form-row > *, .admin-form input { min-width: 0; }
.admin-workspace .field-label { font-size: var(--text-ui); }
.admin-workspace .field .hint { font-size: var(--text-sm); }
.admin-form .button-row { margin-top: var(--space-1); }
.admin-form input:disabled, .admin-form textarea:disabled { opacity: .7; background: var(--bg-sunk); }
.admin-results { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-subtle); }
.admin-results li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-1) var(--space-4); padding-block: var(--space-3); border-bottom: 1px solid var(--line-subtle); color: var(--ink); font-size: var(--text-ui); }
.admin-workspace .admin-json { max-height: 560px; white-space: pre-wrap; overflow-wrap: anywhere; }
.admin-disclosure > summary { width: fit-content; }

/* An account: its identity under the title, then its own tabs. */
.admin-identity { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-5); margin: 0 0 var(--space-4); color: var(--ink-3); font-size: var(--text-ui); }
.admin-identity > span { display: inline-flex; align-items: center; gap: var(--space-1); min-width: 0; }
.admin-identity code { max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-subnav { margin-bottom: var(--space-8); }

/* Daily rewards and refunds: a bar each, with the key above. */
.admin-trend-key { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-6); color: var(--ink-3); font-size: var(--text-ui); }
.admin-trend-key span { display: inline-flex; align-items: center; gap: var(--space-2); }
.admin-trend-key span::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--chart-fill); }
.admin-trend-key span + span::before { background: var(--amber); }
.admin-trend { display: grid; gap: var(--space-2); margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.admin-trend li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) 4rem; align-items: center; gap: var(--space-4); color: var(--ink-2); font-size: var(--text-ui); }
.admin-trend-bars { display: grid; gap: 3px; }
.admin-trend-bars span { display: block; height: 8px; border-radius: var(--radius-xs); background: var(--chart-fill); }
.admin-trend-bars span + span { background: var(--amber); }
.admin-trend li > :last-child { text-align: right; color: var(--ink-3); }

@container admin (max-width: 1000px) {
  .admin-split { grid-template-columns: minmax(0, 1fr); }
  /* Stacked, the summaries come first: they are what a glance is for. */
  .admin-split > aside { order: -1; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--space-8) var(--space-10); padding: 0; border-left: 0; }
  .admin-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* On a phone each row is a card of labelled facts: what it is first, then each value on its own
   line with its column's name, then its actions. A table of six columns or more does so sooner,
   before its first column is squeezed (the same rules, for .wide). */
@container admin (max-width: 860px) {
  .admin-table.wide, .admin-table.wide :is(tbody, tr, td) { display: block; }
  .admin-table.wide thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .admin-table.wide tbody tr { padding-block: var(--space-3); border-bottom: 1px solid var(--line-subtle); }
  .admin-table.wide tbody tr:last-child, .admin-table.wide tr:has(+ .admin-table-after) { border-bottom: 0; }
  .admin-workspace .admin-table.wide td { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); padding: var(--space-1) 0; border: 0; text-align: right; }
  .admin-table.wide td::before { content: attr(data-label); flex: none; color: var(--ink-3); text-align: left; }
  .admin-workspace .admin-table.wide td:is(.admin-cell-main, [data-label=""]) { display: block; text-align: left; }
  .admin-table.wide td:is(.admin-cell-main, [data-label=""])::before { content: none; }
  .admin-table.wide td:has(> .admin-cell:empty) { display: none; }
  .admin-table.wide td.admin-cell-main { padding-bottom: var(--space-2); }
  .admin-table.wide .admin-cell-actions { padding-top: var(--space-2); }
  .admin-table.wide .admin-cell-actions .admin-row-actions { flex-wrap: wrap; justify-content: flex-start; }
  .admin-table.wide .admin-table-after { padding-top: 0; }
}
@container admin (max-width: 640px) {
  .admin-table, .admin-table :is(tbody, tr, td) { display: block; }
  .admin-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .admin-table tbody tr { padding-block: var(--space-3); border-bottom: 1px solid var(--line-subtle); }
  .admin-table tbody tr:last-child, .admin-table tr:has(+ .admin-table-after) { border-bottom: 0; }
  .admin-workspace .admin-table td { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); padding: var(--space-1) 0; border: 0; text-align: right; }
  .admin-table td::before { content: attr(data-label); flex: none; color: var(--ink-3); text-align: left; }
  .admin-workspace .admin-table td:is(.admin-cell-main, [data-label=""]) { display: block; text-align: left; }
  .admin-table td:is(.admin-cell-main, [data-label=""])::before { content: none; }
  .admin-table td:has(> .admin-cell:empty) { display: none; }
  .admin-table td.admin-cell-main { padding-bottom: var(--space-2); }
  .admin-table .admin-cell-actions { padding-top: var(--space-2); }
  .admin-table .admin-cell-actions .admin-row-actions { flex-wrap: wrap; justify-content: flex-start; }
  .admin-table .admin-table-after { padding-top: 0; }
  .admin-action { padding: var(--space-4); }
  .admin-filters { grid-template-columns: minmax(0, 1fr); }
  .admin-filter input:not([type="checkbox"]) { flex-basis: 100%; max-width: none; }
  .admin-filter select { flex: 1 1 0; max-width: none; }
  .admin-freshness { margin-left: 0; }
  .admin-trend li { grid-template-columns: 5.5rem minmax(0, 1fr) 3rem; gap: var(--space-2); }
  .admin-issues li { grid-template-columns: 8px minmax(0, 1fr); }
  .admin-issues .text-link { grid-row: auto; grid-column: 2; justify-self: start; }
}