/* Operator pages (/admin). Everything here is what /app/style.css does not already have, plus the handful of
   places the Claude Design pass (design/design_handoff_admin/, 15 Sep 2026) asks the app's own components to sit
   differently on this tool: denser table rows, the attention list, collapsible account sections, inbox rows, and a
   bottom tab bar in place of the rail on a phone. No colours of its own — every value resolves through the app's
   tokens, so light, dark and a later pass all keep working.

   The reference is a shell inside a page, so it uses @container; these pages own the viewport, so the same rules
   live in @media (max-width:700px). */

/* ---- the two screens before the tool: Not found, and sign in ---- */
.a-plain { height:100%; overflow:auto; display:grid; place-items:center; padding:24px 16px; }
.a-plain-card { width:min(460px, 100%); display:flex; flex-direction:column; gap:12px; }
.a-plain-card .brand img { height:26px; width:auto; display:block; }
.a-plain-card h1 { font-size:28px; margin:8px 0 0; }
.a-plain-card p { margin:0; color:var(--text2); }
.a-plain .auth-card { margin:0; }

/* ---- shell ---- */
.a-who { font-size:12px; color:var(--muted); max-width:240px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.a-refreshed { font-size:12px; color:var(--muted); white-space:nowrap; font-variant-numeric:tabular-nums; }
.nav .btn-icon.h30 { width:30px; }
/* The page owns its padding so the card column can breathe 28px at the sides, per the bundle. */
.main { --pad-x:0px; --pad-y:0px; padding:0; gap:0; }
.pane { margin:0; padding:22px 28px 44px; }
.a-wide { max-width:1240px; gap:14px; animation:a-rise 320ms var(--ease) both; }
.s-sec { padding:18px 20px; gap:12px; }
#rail button { position:relative; }
.a-badge { position:absolute; top:6px; left:50%; transform:translateX(6px); min-width:16px; height:16px; padding:0 4px; border-radius:999px;
  background:var(--accent-fill); color:var(--on-accent); font-size:10px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; }
.a-badge.warn { background:var(--warn-fg); color:var(--bg); }
/* The phone navigation. Hidden until the media query below turns it on. */
.a-tabs { display:none; }

/* ---- page head ---- */
.a-head { display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; }
.a-head .a-headact { display:flex; gap:8px; align-items:center; margin-left:auto; flex-wrap:wrap; }

/* ---- the Accounts find box, and "show 50 more" under a long list ---- */
.a-head .a-find { width:210px; font-size:13px; min-height:30px; }
.a-more { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding-top:10px; }
.a-more .hint { margin-right:auto; }

/* ---- stat tiles ---- */
.a-tiles { display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:12px; }
.a-tile { border-radius:var(--r-card); background:var(--surface); padding:16px 18px; display:flex; flex-direction:column; gap:8px; text-align:left; color:inherit; transition:background 120ms; }
button.a-tile:hover { background:var(--track); }
.a-tile .a-big { font-size:26px; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1.1; }
.a-tile .a-parts { display:flex; flex-wrap:wrap; gap:2px 12px; font-size:12px; color:var(--muted); }
.a-tile .a-parts b { color:var(--text2); font-weight:600; font-variant-numeric:tabular-nums; }
.a-tile.plain { background:var(--card); }         /* the export counts: a grid inside a card, not four more cards */

/* ---- "Needs you" ---- */
.a-att { display:flex; flex-direction:column; gap:6px; }
.a-att-row { display:flex; align-items:center; gap:12px; white-space:normal; padding:10px 14px; border-radius:12px; background:var(--card); box-shadow:var(--sh-sm); text-align:left; color:inherit; transition:background 120ms; }
.a-att-row:hover { background:var(--track); }
.a-att-row .t { flex:1; min-width:0; font-weight:500; overflow-wrap:anywhere; }
/* Two lines of detail at most: the row is a summary, and a long error should not push the next one off screen. */
.a-att-row .t span { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:12px; color:var(--muted); font-weight:400; }
.a-att-row .go { color:var(--muted); flex:none; font-size:12px; }
.a-quiet { display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:12px; color:var(--muted); font-size:13px; box-shadow:0 0 0 1px var(--divider); }

/* ---- a meter (today's spend against the cap) ---- */
.a-meter { height:8px; border-radius:99px; background:var(--track); overflow:hidden; display:flex; }
.a-meter i { display:block; height:100%; }
.a-meter .inc { background:var(--accent-fill); }
.a-meter .res { background:color-mix(in srgb, var(--accent-fill) 35%, transparent); }
.a-legend { display:flex; flex-wrap:wrap; gap:4px 16px; font-size:12px; color:var(--muted); }
.a-legend b { color:var(--text); font-weight:600; font-variant-numeric:tabular-nums; }
.a-legend .k { display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:6px; }

/* ---- state dots (worker liveness, attention rows) ---- */
.a-dot { display:inline-block; width:8px; height:8px; border-radius:50%; flex:none; }
.table .a-dot { margin-right:7px; vertical-align:1px; }
.a-dot.live { background:var(--text); } .a-dot.stale { background:var(--warn-fg); }
.a-dot.bad { background:var(--danger); } .a-dot.off { background:var(--faint); } .a-dot.info { background:var(--accent); }

/* ---- tables ----------------------------------------------------------------------------------------------
   Denser than the app's own: 13px cells, 9px rows, a flat rule on the cell instead of the fading gradient the
   editor's ledger uses, because these tables are read in columns rather than glanced at. */
.a-scroll { overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; margin:0 -8px; padding:0 8px; }
.a-scroll .table { min-width:max-content; font-size:13px; }
.a-scroll .table th { padding:0 10px 8px 0; border-bottom:0; box-shadow:inset 0 -1px 0 var(--divider); white-space:nowrap; }
.a-scroll .table td { padding:9px 10px 9px 0; border-bottom:0; box-shadow:inset 0 -1px 0 var(--track); vertical-align:top; white-space:nowrap; }
.a-scroll .table thead tr, .a-scroll .table tbody tr, .a-scroll .table tbody tr:hover, .a-scroll .table tbody tr:last-child:hover { background:none; }
.a-scroll .table tbody tr:last-child td { box-shadow:none; }
.a-scroll .table tr.link { cursor:pointer; }
.a-scroll .table tr.link:hover td { background:color-mix(in srgb, var(--track) 60%, transparent); }
.a-scroll .table td.wrap { white-space:normal; min-width:220px; max-width:420px; }
.a-scroll .table td.acts { text-align:right; }
.a-scroll .table td.acts .btn { margin-left:4px; }
.table td .a-sub { display:block; font-size:11.5px; color:var(--muted); font-weight:400; }
.table td .a-sub.warn { color:var(--warn-fg); }
.table td.amt.spent { color:var(--text2); }
.a-empty { margin:0; padding:8px 2px; color:var(--muted); font-size:13px; }
.a-day > td { font-weight:600; }
.a-day .a-caret { display:inline-block; width:14px; color:var(--muted); }
.a-sub-row > td:first-child { padding-left:24px; }

/* ---- account head card ---- */
.a-facts { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:14px 22px; }
.a-fact .k { display:block; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.a-fact .v { display:block; margin-top:3px; font-weight:500; font-variant-numeric:tabular-nums; }
.a-tags { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.a-actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; row-gap:10px; padding-top:4px; }
.a-actions .sep { width:1px; height:20px; background:var(--divider); margin:0 4px; }
.a-actions .push { margin-left:auto; }
.a-actions .danger, .a-actions .danger:hover:not(:disabled) { color:var(--danger); }
.a-actions .accent, .a-actions .accent:hover:not(:disabled) { color:var(--accent); }

/* ---- collapsible section head ---- */
.a-coll { display:flex; align-items:center; gap:10px; width:100%; text-align:left; }
.a-coll .car { width:18px; height:18px; border-radius:50%; background:var(--track); color:var(--muted); display:inline-flex; align-items:center; justify-content:center; flex:none; transition:transform 160ms; font-size:12px; line-height:1; }
.a-coll.open .car { transform:rotate(90deg); }
.a-coll h5 { font-size:16px; }
.a-coll .n { font-size:12px; color:var(--muted); font-weight:400; }

/* ---- the result line: always the first child of the page column ---- */
.a-result { display:flex; align-items:center; gap:10px; margin:0; padding:10px 14px; border-radius:12px; font-size:13px;
  background:var(--track); color:var(--text); animation:a-rise 240ms var(--ease) both; }
.a-result.err { background:var(--danger-bg); color:var(--danger); }
.a-result .x { margin-left:auto; color:inherit; opacity:.7; font-size:13px; line-height:1; }
.a-result .x:hover { opacity:1; }

/* ---- inbox rows and the inline invite ---- */
.a-rows { display:flex; flex-direction:column; gap:8px; }
.rowc { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:6px 18px; align-items:start; padding:12px 14px; border-radius:12px; background:var(--card); box-shadow:var(--sh-sm); }
.rowc.on { box-shadow:inset 0 0 0 1px var(--accent); }
.rowc-main { display:flex; flex-direction:column; gap:2px; min-width:0; }
/* State of a handled inbox row, under the address: "Invited 3 days ago", or the louder "asked again" when a
   request came back after it was handled. That second case used to be invisible in every interface there is. */
.a-pill { align-self:flex-start; margin-top:2px; font-size:11px; font-weight:600; line-height:1.7; padding:0 8px; border-radius:var(--r-pill); background:var(--track); color:var(--muted); }
.a-pill.warn { background:var(--warn-bg); color:var(--warn-fg); }
.rowc-main .who { font-weight:500; }
.rowc-meta { text-align:right; white-space:nowrap; line-height:1.5; padding-top:2px; }
.rowc-acts { display:flex; gap:6px; align-items:center; }
.a-msg { margin:4px 0 0; white-space:pre-wrap; font-size:13px; color:var(--text2); line-height:1.5; max-width:62ch; text-wrap:pretty; }
.inline { padding:14px 16px; border-radius:14px; background:var(--card); box-shadow:var(--sh-sm); display:flex; flex-direction:column; gap:12px;
  margin:-4px 0 4px 18px; animation:a-rise 200ms var(--ease) both; }
.inline h5 { font-size:15px; }
.inline .fields { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:10px 12px; align-items:end; }
.inline .fields.fields-row { grid-template-columns:repeat(auto-fit, minmax(220px, max-content)); }
.inline label { display:block; font-size:12px; color:var(--muted); font-weight:500; }
.inline label .input { display:block; width:100%; margin-top:4px; color:var(--text); font-weight:400; }
.inline .dlg-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; }

/* ---- the action dialog ---- */
/* Chrome's own stylesheet gives a modal dialog `overflow:auto`, which clips the card's shadow to the dialog's sharp
   rectangle; while the card rises in at 98% that clipped shadow shows as a black edge along the bottom and right.
   The dialog is only a frame here: the card carries the radius and the shadow, and on the phone sheet the card
   itself scrolls, so the frame never needs to. */
#actionDialog { overflow:visible; border-radius:var(--r-dialog); }
/* The dialog element itself takes focus when it opens (the browser's default when nothing inside asks for it), and the
   app's global :focus-visible ring then draws on this sharp-cornered frame around the rounded card. The first field
   is focused by the script, so the frame never needs a ring of its own. */
#actionDialog:focus, #actionDialog:focus-visible { outline:none; }
/* A textarea inherits .input's single-line padding, which sets the first line hard against the top edge. */
.a-dlg textarea.input { padding:10px 12px; line-height:1.45; min-height:88px; }
.a-dlg { width:min(480px, 94vw); gap:14px; }
.a-fields { display:flex; flex-direction:column; gap:12px; }
.a-fields .a-either { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:4px; }
.a-fields .a-either .input { margin-top:0; }
.a-fields label { display:block; }
.a-fields .input { width:100%; }
.a-confirm { margin:0; padding:10px 12px; border-radius:var(--r-md); background:var(--accent-tint); color:var(--accent-press); font-size:13px; line-height:1.45; }
:root[data-theme="dark"] .a-confirm { color:var(--accent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .a-confirm { color:var(--accent); } }
.a-confirm.pending { background:var(--track); color:var(--muted); }
/* Disable and Cancel: the line and the button say the same thing in the same colour. */
.a-confirm.danger, :root[data-theme="dark"] .a-confirm.danger { background:var(--danger-bg); color:var(--danger); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .a-confirm.danger { color:var(--danger); } }
.btn.is-danger { background:transparent; border-color:var(--danger); color:var(--danger); font-weight:700; text-decoration:none; padding:0 18px; }
.btn.is-danger:hover:not(:disabled) { background:var(--danger-bg); }

/* ---- form controls ----
   The app's chevron is a data URI hard-coded to #6D6D6D, which disappears on the dark ground; two gradients
   inherit --muted in both themes instead. */
select.input { appearance:none; -webkit-appearance:none; padding-right:32px; background-color:var(--card);
  background-image:linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position:calc(100% - 17px) 55%, calc(100% - 12px) 55%; background-size:5px 5px, 5px 5px; background-repeat:no-repeat; }

/* ---- motion (under the app's own prefers-reduced-motion guard) ---- */
@keyframes a-rise { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
.a-loading { display:grid; place-items:center; min-height:200px; }

/* ---- phone ------------------------------------------------------------------------------------------------
   The rail goes and a bottom tab bar takes its place: thumb-reachable, all six visible, nothing scrolling
   sideways. Tables either stack into labelled cards or keep their own scroller; the page itself never does. */
@media (max-width:700px) {
  .rail, .a-who, .a-refreshed, #crumbSep, .a-att-row .go { display:none; }
  .crumb-name { display:inline; }
  .nav { padding:0 12px 0 14px; gap:8px; }
  .nav .crumb-name { font-size:15px; }
  .pane { padding:14px 12px 96px; }
  .s-sec { padding:14px; border-radius:16px; }
  .a-head .a-headact { width:100%; }
  /* Five scopes do not fit a phone, and .seg is flex:none with nowrap buttons, so the last one was sliced off by
     the card. It scrolls sideways instead, the way the tables in here already do, and paint() brings the selected
     one back into view so the current filter is never the one off the edge. */
  .a-headact .seg { max-width:100%; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .a-headact .seg::-webkit-scrollbar { display:none; }
  .a-headact .seg button { padding:0 11px; }
  .a-head .a-find { flex:1 1 140px; width:auto; }
  .a-more .btn { flex:1 1 auto; height:36px; }
  .a-tiles { grid-template-columns:1fr 1fr; }
  .a-tile { padding:12px 14px; } .a-tile .a-big { font-size:22px; }
  .a-facts { grid-template-columns:1fr 1fr; }
  .a-actions .btn { flex:1 1 auto; }
  .a-actions .sep { display:none; }
  .a-actions .push { margin-left:0; }
  .a-actions .btn-ghost { flex:1 1 30%; height:36px; text-decoration:none; box-shadow:inset 0 0 0 1px var(--divider); border-radius:var(--r-pill); font-size:13px; }
  .rowc { grid-template-columns:1fr; }
  .rowc-meta { text-align:left; }
  .rowc-acts { padding-top:4px; } .rowc-acts .btn { flex:1; height:36px; font-size:13px; }
  .inline { margin-left:0; }
  .inline .fields { grid-template-columns:1fr; }

  .a-tabs { display:flex; position:fixed; left:0; right:0; bottom:0; z-index:40; height:64px; padding:6px 6px 10px;
    background:var(--surface); box-shadow:inset 0 1px 0 var(--divider); }
  .a-tabs button { flex:1; width:auto; height:48px; border-radius:var(--r-md); display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:3px; font-size:10px; font-weight:500; color:var(--muted); position:relative; min-width:0; }
  .a-tabs button.on { background:var(--accent-tint); color:var(--accent); }
  .a-tabs .a-badge { top:2px; }

  /* The action dialog becomes a bottom sheet. */
  /* Lifted above the software keyboard by the inset admin.js measures from the visual viewport, and capped so the
     sheet's head stays on screen and its body scrolls; iOS does not shrink the page for the keyboard, so a sheet
     anchored at the bottom sat half under it (Josh, iPhone, 2026-09-22). Same rule as the app's sheets. */
  #actionDialog { max-width:none; width:100%; height:auto; margin:0; inset:auto 0 var(--keyboard-inset,0px); max-height:calc(100dvh - var(--keyboard-inset,0px) - 20px); overflow:auto; overscroll-behavior:contain; }
  #actionDialog[open] { display:flex; align-items:flex-end; justify-content:center; }
  #actionDialog { border-radius:24px 24px 0 0; }
  .a-dlg { width:100%; border-radius:24px 24px 0 0; padding:20px 18px max(24px, env(safe-area-inset-bottom)); max-height:none; overflow:visible; }

  /* Stacked tables: each row becomes a small labelled card. */
  .stack .table, .stack .table tbody, .stack .table tr, .stack .table td { display:block; min-width:0; }
  .stack .table thead { display:none; }
  .stack .table tr { display:grid; grid-template-columns:1fr 1fr; gap:4px 12px; padding:10px 0; box-shadow:inset 0 -1px 0 var(--track); }
  .stack .table tr:last-child { box-shadow:none; }
  .stack .table td { padding:0; box-shadow:none; white-space:normal; text-align:left; }
  .stack .table td.r { text-align:left; }
  .stack .table td.lead { grid-column:1 / -1; font-weight:500; font-size:14px; }
  .stack .table td.acts { grid-column:1 / -1; text-align:left; display:flex; gap:8px; padding-top:4px; }
  .stack .table td.acts .btn { margin:0; flex:1; height:36px; font-size:13px; }
  .stack .table td[data-l]::before { content:attr(data-l); display:block; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:600; }
  .stack .table td.ph-hide { display:none; }
  .stack .table td.wrap { min-width:0; max-width:none; }
}

/* iOS zooms into any focused field whose text is under 16px and never zooms back, which crops the page. Every text-entry control
   on a touch device is 16px, whatever class sets its size elsewhere; this block is last so it wins on specificity ties. */
@media (pointer:coarse) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), select, textarea,
  .auth-field .input, .request .input, .request select, .request textarea, .contact-form .input, .a-fields .input, .inline .fields .input, .input { font-size:16px; }
}