/* ── Administration ───────────────────────────────────────────────────────
   An operator's console on the site's paper and ink: a slim bar, sections in
   a sidebar grouped by what they look after, and one quiet component set
   (panel, table, pill, switch, field) that every section is built from.
   Figures are set in the text face with tabular digits and are never
   underlined; the data face is kept for identifiers someone may copy. */
:root {
  --admin-side: 232px;
  --admin-radius: 12px;
  --admin-ok: #1f7a4a; --admin-ok-wash: #1f7a4a14;
  --admin-warn: #9a5b00; --admin-warn-wash: #c9820014;
  --admin-bad: var(--error, #b8233a); --admin-bad-wash: #b8233a12;
  --admin-live: var(--signal-text, #c13213); --admin-live-wash: #f0442012;
  --admin-raise: 0 1px 2px #171a190a, 0 1px 1px #171a1905;
}
html[data-theme="dark"] {
  --admin-ok: #7ccf9e; --admin-ok-wash: #7ccf9e1a;
  --admin-warn: #f0b45a; --admin-warn-wash: #f0b45a1a;
  --admin-bad-wash: #ff7b8c1a; --admin-live-wash: #ff977d1a;
  --admin-raise: none;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    --admin-ok: #7ccf9e; --admin-ok-wash: #7ccf9e1a;
    --admin-warn: #f0b45a; --admin-warn-wash: #f0b45a1a;
    --admin-bad-wash: #ff7b8c1a; --admin-live-wash: #ff977d1a;
    --admin-raise: none;
  }
}

.admin-body { background: var(--paper); color: var(--ink); }

/* ── Bar ── */
.admin-bar { --bar-h: 60px; padding: 0 20px; border-bottom: 1px solid var(--line); z-index: 6; }
.admin-bar .bar-links { gap: 10px; }
.admin-wordmark { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
.admin-wordmark .wordmark-logo {
  display: block; width: 62px; aspect-ratio: 2087 / 753; background: currentColor;
  mask: url('/assets/landing/wordmark-mask-ui.7535f0e3339b.webp') center / contain no-repeat;
  -webkit-mask: url('/assets/landing/wordmark-mask-ui.7535f0e3339b.webp') center / contain no-repeat;
}
.admin-wordmark-label { padding: 2px 8px; border: 1px solid var(--line-2); border-radius: 999px; font: 500 12px/18px var(--sans); color: var(--ink-2); }
.admin-updated { font: 400 12.5px/1 var(--sans); color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.admin-icon-button {
  display: grid; place-items: center; width: 34px; height: 34px; padding: 0;
  color: var(--ink-2); background: transparent; border: 1px solid transparent; border-radius: 8px; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.admin-icon-button:hover:not(:disabled) { color: var(--ink); background: var(--paper-2); border-color: var(--line); }
.admin-icon-button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.admin-icon-button:disabled svg { animation: admin-spin .9s linear infinite; }
.admin-icon-button:disabled { cursor: progress; opacity: 1 !important; }
@keyframes admin-spin { to { transform: rotate(1turn); } }
.admin-bar #account-button {
  min-height: 34px; padding: 0 14px; margin-left: 4px;
  border: 1px solid var(--line-2); border-radius: 999px; background: var(--paper);
  font: 500 13.5px/1 var(--sans); color: var(--ink); cursor: pointer;
  transition: border-color .15s;
}
.admin-bar #account-button:hover { border-color: var(--ink-3); }
.admin-bar #account-button:not(.is-ready) { min-width: 0; }
.admin-bar :focus-visible, .admin-main :focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

/* ── Shell ── */
.admin-main { font: 14px/1.55 var(--sans); color: var(--ink); }
.admin-main > .admin-alert:not(:empty) { max-width: 1120px; margin: 20px auto 0; padding: 12px 16px; border: 1px solid var(--line); border-left: 3px solid var(--admin-bad); border-radius: 8px; background: var(--admin-bad-wash); color: var(--ink); box-sizing: border-box; }
.admin-workspace { display: grid; grid-template-columns: var(--admin-side) minmax(0, 1fr); min-height: calc(100dvh - 61px);
  /* The sidebar's tint and rule run the page's full height, past the sticky list. */
  background: linear-gradient(to right, var(--paper-2) calc(var(--admin-side) - 1px), var(--line) calc(var(--admin-side) - 1px) var(--admin-side), transparent var(--admin-side)); }
.admin-workspace[hidden] { display: none; }

.admin-side {
  position: sticky; top: 61px; align-self: start; height: calc(100dvh - 61px); box-sizing: border-box;
  display: flex; flex-direction: column; justify-content: space-between; gap: 20px;
  padding: 18px 12px 16px; overflow-y: auto;
}
.admin-tabs { display: flex; flex-direction: column; gap: 1px; }
.admin-nav-group { margin: 18px 10px 6px; font: 500 11.5px/1.2 var(--sans); color: var(--ink-3); letter-spacing: .02em; }
.admin-tabs button {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 34px; padding: 0 10px;
  font: 500 13.5px/1.2 var(--sans); color: var(--ink-2); text-align: left;
  background: transparent; border: 0; border-radius: 8px; cursor: pointer; white-space: nowrap;
  transition: background .12s, color .12s;
}
.admin-tabs button svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
.admin-tabs button:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 5%, transparent); }
.admin-tabs button[aria-selected="true"] { color: var(--ink); background: var(--paper); box-shadow: 0 0 0 1px var(--line), var(--admin-raise); }
.admin-tabs button[aria-selected="true"] svg { opacity: 1; }
.admin-tab-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.admin-count { min-width: 20px; padding: 1px 6px; box-sizing: border-box; border-radius: 999px; background: var(--admin-live-wash); color: var(--admin-live); font: 600 11px/16px var(--sans); font-variant-numeric: tabular-nums; text-align: center; }
.admin-count[hidden] { display: none; }
.admin-side-foot { display: grid; gap: 4px; padding: 12px 10px 0; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink-3); }
#admin-owner { overflow-wrap: anywhere; color: var(--ink-2); }
.admin-side-foot .account-link { justify-self: start; font-size: 12.5px; color: var(--ink-3); }
.admin-side-foot .account-link:hover { color: var(--ink); }

.admin-page { min-width: 0; padding: 36px clamp(20px, 4vw, 56px) 80px; }
.admin-page > * { max-width: 1120px; margin-left: auto; margin-right: auto; }
.admin-page-head { margin-bottom: 28px; }
.admin-page-head[hidden] { display: none; }
.admin-page-head h1 { margin: 0; font: 600 26px/1.2 var(--sans); letter-spacing: -.02em; text-wrap: balance; }
.admin-lede { margin: 6px 0 0; max-width: 64ch; color: var(--ink-3); font-size: 14px; }
.admin-lede:empty { display: none; }

/* ── Type inside sections ── */
.admin-main h2 { margin: 40px 0 14px; font: 600 16px/1.3 var(--sans); letter-spacing: -.01em; }
.admin-main h3 { margin: 0 0 8px; font: 600 14px/1.4 var(--sans); }
#admin-content > h2:first-child, #admin-content > .account-error:first-child + h2 { margin-top: 0; }
.admin-main .account-note { font-size: 13px; color: var(--ink-3); max-width: 72ch; }
.admin-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 40px 0 14px; }
.admin-section-head h2 { margin: 0; }
.admin-section-head:first-child { margin-top: 0; }
.admin-section-head .account-note { margin: 0; }

/* ── Panels ── */
.admin-panel { border: 1px solid var(--line); border-radius: var(--admin-radius); background: var(--paper); box-shadow: var(--admin-raise); }
.admin-panel + .admin-panel { margin-top: 16px; }
.admin-panel-pad { padding: 20px; }

/* ── Buttons ── */
.admin-main .account-primary, .admin-main .account-secondary, .admin-dialog .account-primary, .admin-dialog .account-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 36px; padding: 0 14px; border-radius: 8px; font: 500 13.5px/1 var(--sans);
  transition: border-color .15s, background .15s, opacity .15s; white-space: nowrap;
}
.admin-main .account-secondary { background: var(--paper); }
.admin-main .account-secondary:hover:not(:disabled) { border-color: var(--ink-3); }
.admin-main button:disabled { opacity: .45; cursor: default; }
.admin-main .account-link { font: inherit; font-size: 13.5px; }
.admin-danger { color: var(--admin-bad) !important; }
.admin-main .account-secondary.admin-danger:hover:not(:disabled) { border-color: var(--admin-bad); }

/* ── Pills ── */
.admin-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px 2px 8px;
  border-radius: 999px; background: color-mix(in srgb, var(--ink) 6%, transparent);
  font: 500 12px/18px var(--sans); color: var(--ink-2); white-space: nowrap;
}
.admin-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .7; }
.admin-pill[data-tone="ok"] { background: var(--admin-ok-wash); color: var(--admin-ok); }
.admin-pill[data-tone="warn"] { background: var(--admin-warn-wash); color: var(--admin-warn); }
.admin-pill[data-tone="bad"] { background: var(--admin-bad-wash); color: var(--admin-bad); }
.admin-pill[data-tone="live"] { background: var(--admin-live-wash); color: var(--admin-live); }
.admin-pill[data-tone="live"]::before { opacity: 1; animation: admin-pulse 1.6s ease-in-out infinite; }
.admin-pill[data-tone="plain"]::before { display: none; }
@keyframes admin-pulse { 50% { opacity: .25; } }

/* ── Tables ── */
.admin-table-wrap { position: relative; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--admin-radius); background: var(--paper); box-shadow: var(--admin-raise); }
.admin-table { width: 100%; border-collapse: separate; border-spacing: 0; text-align: left; font-size: 13.5px; }
.admin-table th {
  padding: 10px 16px; background: var(--paper-2); border-bottom: 1px solid var(--line);
  font: 500 12px/1.4 var(--sans); color: var(--ink-3); letter-spacing: 0; white-space: nowrap;
}
.admin-table th:first-child { border-top-left-radius: calc(var(--admin-radius) - 1px); }
.admin-table th:last-child { border-top-right-radius: calc(var(--admin-radius) - 1px); }
.admin-table td { padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.admin-table tbody tr:last-child td { border-bottom: 0; }
.admin-table .admin-number { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.admin-table small { display: block; margin-top: 2px; color: var(--ink-3); font-size: 12px; overflow-wrap: anywhere; }
.admin-table code, .admin-code { font: 12px/1.5 var(--data); color: var(--ink-2); overflow-wrap: anywhere; }
.admin-table button {
  display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px;
  font: 500 12.5px/1 var(--sans); color: var(--ink); text-align: left; white-space: nowrap;
  background: var(--paper); border: 1px solid var(--line-2); border-radius: 7px; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.admin-table button:hover:not(:disabled) { border-color: var(--ink-3); }
.admin-table button[data-account] { min-height: 0; padding: 0; border: 0; background: none; font-size: 13.5px; line-height: 1.4; white-space: nowrap; }
.admin-table button[data-account]:hover { text-decoration: underline; text-underline-offset: 3px; }
.admin-row-actions { display: flex; flex-wrap: wrap; gap: 6px; }
/* An invitation's free videos, edited in its own row. */
.admin-table .admin-inline-form { flex-wrap: nowrap; justify-content: flex-end; gap: 6px; margin: 0; }
.admin-main .admin-table .admin-inline-form input { width: 72px; min-height: 30px; padding: 0 8px; text-align: right; }
.admin-account-row { cursor: pointer; }
.admin-table tbody tr { transition: background .12s; }
.admin-table tbody tr:hover { background: color-mix(in srgb, var(--paper-2) 70%, transparent); }
.admin-muted { color: var(--ink-3); }
/* A waitlist idea reads as the person wrote it, clipped to a few lines. */
.admin-idea { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 44ch; font: 400 14px/1.45 var(--reading, inherit); color: var(--ink); }

.admin-empty { margin: 0; padding: 40px 20px; border: 1px dashed var(--line-2); border-radius: var(--admin-radius); color: var(--ink-3); text-align: center; }
.admin-loading { display: grid; gap: 10px; }
.admin-loading span { height: 44px; border-radius: 10px; background: linear-gradient(90deg, var(--paper-2) 0%, color-mix(in srgb, var(--paper-2) 40%, var(--paper)) 50%, var(--paper-2) 100%); background-size: 200% 100%; animation: admin-shimmer 1.4s ease-in-out infinite; }
.admin-loading span:first-child { height: 96px; }
@keyframes admin-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ── Fields and forms ── */
.admin-main input:not([type=checkbox]):not([type=radio]), .admin-main select {
  box-sizing: border-box; min-height: 36px; padding: 0 11px; min-width: 0;
  font: 400 13.5px/1.2 var(--sans); color: var(--ink);
  background: var(--paper); border: 1px solid var(--line-2); border-radius: 8px;
  transition: border-color .15s, box-shadow .15s;
}
.admin-main input:not([type=checkbox]):not([type=radio]):focus, .admin-main select:focus { outline: none; border-color: var(--ink-3); box-shadow: 0 0 0 3px var(--selection); }
.admin-main input::placeholder { color: var(--ink-4); }
.admin-main input[type=number], .admin-main input[inputmode=decimal] { font-variant-numeric: tabular-nums; }
.admin-main input[type=checkbox] { width: 16px; height: 16px; margin: 0; accent-color: var(--ink); }
.admin-main select { padding-right: 30px; appearance: none; background: var(--paper) var(--landing-select-arrow, none) right 10px center / 10px no-repeat; }
.admin-search { display: flex; gap: 8px; max-width: 560px; margin: 0 0 16px; }
.admin-search input { flex: 1; }
/* Forms and filters share one field grid: the label sits above its input and
   the action lines up with the inputs' bottom edge. */
.admin-controls { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px 14px; align-items: end; margin: 0 0 20px; padding: 16px; border: 1px solid var(--line); border-radius: var(--admin-radius); background: var(--paper-2); }
.admin-controls label { display: grid; gap: 6px; font: 500 12.5px/1.3 var(--sans); color: var(--ink-2); }
.admin-controls label[hidden] { display: none; }
.admin-controls label:has(> input[type=checkbox]) { display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 8px; min-height: 36px; font-weight: 400; color: var(--ink); }
.admin-controls > button { justify-self: start; }
.admin-controls .account-error { grid-column: 1 / -1; margin: 0; }
.admin-inline-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.admin-inline-form input { width: 120px; }
.admin-record { margin: 16px 0 0; border: 1px solid var(--line); border-radius: var(--admin-radius); background: var(--paper); }
.admin-record > summary { display: flex; align-items: center; gap: 10px; padding: 14px 16px; cursor: pointer; font-weight: 500; list-style: none; }
.admin-record > summary::-webkit-details-marker { display: none; }
.admin-record > summary::before { content: ""; width: 7px; height: 7px; border-right: 1.5px solid var(--ink-3); border-bottom: 1.5px solid var(--ink-3); transform: rotate(-45deg); transition: transform .15s; }
.admin-record[open] > summary::before { transform: rotate(45deg); }
.admin-record > :not(summary) { margin-left: 16px; margin-right: 16px; }
.admin-record > .admin-controls { margin-bottom: 16px; }
.admin-record > .account-note { margin-top: 0; margin-bottom: 12px; }
.admin-main pre { white-space: pre-wrap; overflow-wrap: anywhere; padding: 16px; background: var(--paper-2); border: 1px solid var(--line); border-radius: 10px; font: 12px/1.6 var(--data); max-height: 500px; overflow: auto; }
.admin-video { display: block; width: 100%; max-width: 780px; max-height: 60vh; background: #171717; margin: 16px 0; border-radius: 10px; }

/* ── Overview ── */
.admin-status { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.admin-status > span {
  display: inline-flex; align-items: center; gap: 9px; min-height: 32px; padding: 0 13px 0 12px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--paper);
  color: var(--ink-2); font-size: 13px;
}
.admin-status b { font-weight: 500; color: var(--ink); }
.admin-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--admin-ok); box-shadow: 0 0 0 3px var(--admin-ok-wash); }
.admin-dot[data-tone="warn"] { background: var(--admin-warn); box-shadow: 0 0 0 3px var(--admin-warn-wash); }
.admin-dot[data-tone="bad"] { background: var(--admin-bad); box-shadow: 0 0 0 3px var(--admin-bad-wash); }

.admin-overview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.admin-overview > section { display: flex; flex-direction: column; padding: 18px 18px 8px; border: 1px solid var(--line); border-radius: var(--admin-radius); background: var(--paper); box-shadow: var(--admin-raise); min-width: 0; }
.admin-overview h2 { margin: 0; font: 500 13px/1.4 var(--sans); color: var(--ink-2); letter-spacing: 0; }
.admin-figure { align-self: flex-start; margin: 10px 0 2px; font: 600 32px/1.1 var(--sans); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
a.admin-figure:hover { color: var(--ink-2); }
.admin-figure[data-tone="live"] { color: var(--admin-live); }
.admin-figure[data-tone="ok"] { color: var(--admin-ok); }
.admin-figure-caption { display: block; margin-bottom: 14px; font-size: 12.5px; color: var(--ink-3); }
/* Budget use, drawn to the budget's own scale; amber once four fifths are gone. */
.admin-meter { display: block; width: 100%; height: 4px; margin: -4px 0 14px; border-radius: 2px; overflow: hidden; }
.admin-meter rect:first-child { fill: var(--line); }
.admin-meter rect + rect { fill: var(--ink); }
.admin-meter rect.is-high { fill: var(--admin-warn); }
.admin-overview dl { margin: auto -8px 0; padding-top: 6px; border-top: 1px solid var(--line); }
.admin-overview dl > div { position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-height: 34px; padding: 0 8px; border-radius: 7px; }
.admin-overview dl > div:has(a):hover { background: var(--paper-2); }
.admin-overview dt { padding-top: 8px; color: var(--ink-3); font-size: 13px; }
.admin-overview dt a { color: inherit; text-decoration: none; }
/* The label's link covers its whole row, so the figure beside it is part of the target. */
.admin-overview dt a::after { content: ""; position: absolute; inset: 0; border-radius: 7px; }
.admin-overview dt a:focus-visible { outline: none; }
.admin-overview dt a:focus-visible::after { outline: 2px solid var(--signal); outline-offset: -2px; }
.admin-overview dl > div:has(a):hover dt { color: var(--ink); }
.admin-overview dd { margin: 0 0 0 auto; padding-top: 8px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.admin-overview .admin-attention dd { color: var(--admin-live); }
.admin-overview .admin-attention dd::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 8px 1px 0; border-radius: 50%; background: currentColor; }

/* ── Metrics ── */
.admin-funnel { list-style: none; margin: 0 0 10px; padding: 6px 20px; }
.admin-funnel li { display: grid; grid-template-columns: minmax(140px, 220px) minmax(0, 1fr) 56px 44px; align-items: center; gap: 16px; min-height: 40px; border-bottom: 1px solid var(--line); }
.admin-funnel li:last-child { border-bottom: 0; }
.admin-funnel .admin-meter { margin: 0; height: 6px; border-radius: 3px; }
.admin-funnel b { font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
.admin-funnel small { color: var(--ink-3); font-size: 12.5px; text-align: right; font-variant-numeric: tabular-nums; }
.admin-price { padding: 18px 20px; }
.admin-price p:first-child { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; margin: 0 0 8px; }
.admin-price b { font: 600 20px/1.2 var(--sans); letter-spacing: -.01em; }
.admin-price span { color: var(--ink-2); }
.admin-price .account-note { margin: 0; }
.admin-stats + .admin-table-wrap { margin-top: 16px; }

.admin-strong { font-weight: 500; }
.admin-intro { margin: 0 0 16px; }
.admin-form-title { margin: 24px 0 10px !important; font-weight: 500 !important; color: var(--ink-2); }
.admin-more { display: flex !important; margin: 16px auto 0; }
/* The switchboard: each control is a row that says what it does, with the
   state read out beside the switch so a paused service is never a guess. */
.admin-switchboard { margin: 0; padding: 0; overflow: hidden; }
.admin-switch-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 24px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.admin-switch-row > span:first-child { display: grid; gap: 2px; }
.admin-switch-row b { font-weight: 500; }
.admin-switch-row small { font-size: 13px; color: var(--ink-3); }
.admin-switch-row > span:last-child { display: inline-flex; align-items: center; gap: 10px; }
.admin-state { min-width: 58px; font: 500 12.5px/1 var(--sans); color: var(--admin-ok); text-align: right; }
.admin-state[data-tone="warn"] { color: var(--admin-warn); }
.admin-main input.admin-switch {
  appearance: none; position: relative; flex: none; width: 36px; height: 20px; margin: 0; cursor: pointer;
  border-radius: 999px; background: var(--line-2); transition: background .18s;
}
.admin-main input.admin-switch::before { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--paper); box-shadow: 0 1px 2px #0003; transition: transform .18s cubic-bezier(.3, .7, .3, 1); }
.admin-main input.admin-switch:checked { background: var(--admin-ok); }
.admin-main input.admin-switch:checked::before { transform: translateX(16px); }
.admin-unit { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-3); font-size: 13px; }
.admin-main .admin-unit input { width: 110px; text-align: right; }
.admin-switch-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; background: var(--paper-2); }
.admin-switch-foot p { margin: 0; font-size: 13px; color: var(--ink-3); }
.admin-switch-foot div { display: flex; gap: 8px; }

/* ── Account detail ── */
.admin-back { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 18px; padding: 0; background: none; border: 0; color: var(--ink-3); font: 500 13px/1 var(--sans); cursor: pointer; }
.admin-back:hover { color: var(--ink); }
.admin-person { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.admin-person h2 { margin: 0 0 8px; font: 600 24px/1.25 var(--sans); letter-spacing: -.02em; overflow-wrap: anywhere; }
.admin-person-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; color: var(--ink-3); font-size: 13px; }
.admin-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 16px; }
.admin-stats > div { padding: 16px 18px; border-left: 1px solid var(--line); }
.admin-stats > div:first-child { border-left: 0; }
.admin-stats dt { font-size: 12.5px; color: var(--ink-3); }
.admin-stats dd { margin: 6px 0 0; font: 600 22px/1.15 var(--sans); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.admin-stats dd small { font: 400 13px/1 var(--sans); color: var(--ink-3); letter-spacing: 0; }
.admin-stats dd .admin-stat-sub { display: block; margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-stats [data-tone="bad"] dd { color: var(--admin-bad); }
.admin-manage { padding: 0; }
.admin-manage > div { display: grid; grid-template-columns: 230px minmax(0, 1fr); align-items: center; gap: 10px 20px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.admin-manage > div:last-child { border-bottom: 0; }
.admin-manage-label b { display: block; font-weight: 500; }
.admin-manage-label small { display: block; font-size: 12.5px; color: var(--ink-3); }
.admin-manage .admin-detail-actions { margin: 0; }
.admin-manage form { margin: 0; }
.admin-detail-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 16px 0; }
.admin-detail-actions a.account-secondary { display: inline-flex; align-items: center; text-decoration: none; }
/* The logo as kept: small, whole, on a quiet ground so a white one shows. */
.admin-logo { display: block; width: 96px; height: 40px; object-fit: contain; padding: 4px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper-2); }
.admin-links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 14px 0 0; }

/* ── Access gate ──
   Until verification succeeds this panel is the entire page, so it is
   composed as a panel and not left as a stray line of status text. */
#admin-gate { padding: 72px 20px; }
#admin-gate[hidden] { display: none; }
.admin-gate {
  max-width: 440px; margin: 0 auto; padding: 32px; box-sizing: border-box;
  background: var(--paper); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--admin-raise);
}
.admin-gate::before {
  content: ""; display: block; width: 40px; height: 40px; margin-bottom: 20px; border-radius: 10px;
  background: var(--paper-2) center / 18px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236e726f' stroke-width='1.5' stroke-linecap='round'%3E%3Crect x='3' y='7' width='10' height='7' rx='1.6'/%3E%3Cpath d='M5.2 7V5a2.8 2.8 0 0 1 5.6 0v2'/%3E%3C/svg%3E");
  box-shadow: inset 0 0 0 1px var(--line);
}
.admin-gate .account-eyebrow { margin: 0 0 6px; font: 500 12.5px/1.4 var(--sans); color: var(--ink-3); text-transform: none; letter-spacing: 0; }
.admin-gate-title { margin: 0 0 8px; font: 600 22px/1.25 var(--sans); letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.admin-gate-lede { margin: 0 0 24px; max-width: 42ch; font: 400 14px/1.6 var(--sans); color: var(--ink-2); text-wrap: pretty; }
.admin-gate .account-primary { width: 100%; min-height: 40px; }

/* ── Review dialog ── */
.account-dialog.admin-dialog { width: min(480px, calc(100vw - 32px)); padding: 24px; border: 1px solid var(--line); border-radius: 16px; }
.admin-dialog header { margin-bottom: 14px; }
.admin-dialog h2 { font: 600 19px/1.3 var(--sans); letter-spacing: -.015em; }
.admin-dialog .account-close { display: grid; place-items: center; width: 32px; min-width: 32px; height: 32px; min-height: 32px; padding: 0; border-radius: 8px; font-size: 20px !important; }
.admin-dialog .account-close:hover { color: var(--ink); background: var(--paper-2); }
.admin-dialog-effect { margin: 0 0 20px !important; padding: 12px 14px; border-radius: 10px; background: var(--paper-2); border: 1px solid var(--line); color: var(--ink); font-size: 14px; line-height: 1.55; }
.admin-dialog label { font: 500 12.5px/1.3 var(--sans); color: var(--ink-2); }
.admin-dialog input:not([type="radio"]) { margin: 6px 0 4px; padding: 10px 12px; background: var(--paper); font-size: 14px; }
.admin-dialog input:focus { outline: none; border-color: var(--ink-3); box-shadow: 0 0 0 3px var(--selection); }
.admin-dialog .account-actions { gap: 8px; margin-top: 20px; }
.admin-dialog .account-actions .account-primary { min-width: 0; }

/* ── Issued invitation ── */
.admin-invite-result { margin-bottom: 24px; padding: 20px; border: 1px solid var(--line); border-left: 3px solid var(--admin-ok); border-radius: var(--admin-radius); background: var(--paper); box-shadow: var(--admin-raise); overflow-wrap: anywhere; }
.admin-invite-result[hidden] { display: none; }
.admin-invite-result h2 { margin: 0 0 6px; }
.admin-invite-result > p { margin: 0 0 14px; color: var(--ink-2); }
.admin-invite-result label { font: 500 12.5px/1.3 var(--sans); color: var(--ink-2); }
.admin-main .admin-invite-result input { display: block; width: 100%; margin-top: 6px; font: 13px var(--data); background: var(--paper-2); }
.admin-invite-result .admin-detail-actions { margin-bottom: 0; }
/* An add that left people out names each of them, and why. */
.admin-invite-result[data-tone="warn"] { border-left-color: var(--admin-warn); }
.admin-refused { margin: 0 0 14px; padding: 0 0 0 18px; font-size: 13.5px; color: var(--ink-2); }
.admin-refused li + li { margin-top: 4px; }
.admin-refused b { font-weight: 500; color: var(--ink); }
#invitation-copy-status:empty { display: none; }
#invitation-copy-status { margin: 10px 0 0; font-size: 13px; color: var(--admin-ok); }

/* ── Organizations ── */
.admin-table button[data-org] { min-height: 0; padding: 0; border: 0; background: none; font: 500 13.5px/1.4 var(--sans); white-space: nowrap; }
.admin-table button[data-org]:hover { text-decoration: underline; text-underline-offset: 3px; }
.admin-main textarea, .admin-dialog textarea {
  box-sizing: border-box; width: 100%; min-height: 60px; padding: 9px 11px; resize: vertical;
  font: 400 13.5px/1.5 var(--sans); color: var(--ink); background: var(--paper); border: 1px solid var(--line-2); border-radius: 8px;
}
.admin-main textarea:focus, .admin-dialog textarea:focus, .admin-dialog select:focus { outline: none; border-color: var(--ink-3); box-shadow: 0 0 0 3px var(--selection); }
.admin-controls .admin-org-span { grid-column: 1 / -1; }
.admin-main .admin-inline-form .admin-org-wide { width: min(100%, 320px); }
.admin-main .admin-inline-form .admin-org-ref { width: 160px; }
.admin-main .admin-inline-form .admin-org-months { width: 72px; }
.admin-org-pay-note:empty { display: none; }
.admin-org-pay-note { grid-column: 1 / -1; margin: 0 !important; color: var(--ink) !important; font-variant-numeric: tabular-nums; }
.admin-main a.admin-org-console { text-decoration: none; }
/* The new-team form: two columns of fields, the long lists across both. */
.account-dialog.admin-org-dialog { width: min(640px, calc(100vw - 32px)); }
.admin-org-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.admin-org-form label { display: grid; gap: 6px; }
.admin-org-form label small { font: 400 12px/1.4 var(--sans); color: var(--ink-3); }
.admin-org-form .admin-org-span { grid-column: 1 / -1; }
.admin-dialog .admin-org-form input:not([type="radio"]) { margin: 0; padding: 9px 11px; border: 1px solid var(--line-2); border-radius: 8px; }
.admin-dialog .admin-org-form select { box-sizing: border-box; min-height: 40px; padding: 0 30px 0 11px; appearance: none; font: 400 14px/1.2 var(--sans); color: var(--ink); background: var(--paper) var(--landing-select-arrow, none) right 10px center / 10px no-repeat; border: 1px solid var(--line-2); border-radius: 8px; }
.admin-org-form .account-error { margin: 0; }
.admin-org-form .account-actions { margin-top: 6px; }
@media (max-width: 640px) { .admin-org-form { grid-template-columns: minmax(0, 1fr); } }

@media (prefers-reduced-motion: reduce) {
  .admin-loading span, .admin-pill[data-tone="live"]::before, .admin-icon-button:disabled svg { animation: none; }
}

/* ── Narrower screens ──
   The sidebar folds into a strip of sections under the bar, and panels
   stack. Tables keep their columns and scroll inside their own frame. */
@media (max-width: 1180px) {
  .admin-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .admin-workspace { grid-template-columns: minmax(0, 1fr); background: none; }
  .admin-side { position: sticky; top: 61px; z-index: 4; height: auto; padding: 8px 12px; background: var(--paper-2); border-bottom: 1px solid var(--line); overflow: visible; }
  .admin-tabs { flex-direction: row; gap: 4px; overflow-x: auto; scrollbar-width: none; mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); padding-right: 24px; }
  .admin-tabs::-webkit-scrollbar { display: none; }
  .admin-tabs button { width: auto; flex: none; }
  .admin-nav-group, .admin-side-foot { display: none; }
  .admin-page { padding-top: 24px; }
  .admin-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-stats > div:nth-child(3) { border-left: 0; }
  .admin-stats > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .admin-manage > div { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .admin-bar { padding: 0 16px; }
  .admin-updated { display: none; }
  .admin-page { padding: 20px 16px 64px; }
  .admin-page-head h1 { font-size: 22px; }
  .admin-overview { grid-template-columns: minmax(0, 1fr); }
  .admin-table { min-width: 620px; }
  .admin-search { flex-wrap: wrap; }
  .admin-switch-row { padding: 14px 16px; }
  .admin-switch-row:has(.admin-unit) { grid-template-columns: minmax(0, 1fr); }
  .admin-state { min-width: 0; }
  .admin-switch-foot { flex-wrap: wrap; padding: 12px 16px; }
  .admin-gate { padding: 24px; }
  #admin-gate { padding: 32px 16px; }
}

.admin-main .account-note + .admin-table-wrap, .admin-main .account-note + .admin-stats { margin-top: 14px; }
.admin-main .admin-table-wrap + .account-note, .admin-main .admin-stats + .account-note { margin-top: 10px; }