/* ═══════════════════════════════════════════════════════════════
   admin.css — the console's OWN, self-contained stylesheet
   ---------------------------------------------------------------
   Same brand TOKENS as JML/TalentHub (by decision), but this file
   owns them, so a separate site can never collide with TalentHub's
   CSS. Premium pass: the identity is unchanged (navy + lime, Fraunces
   + Plus Jakarta). The polish is in PRECISION — layered elevation,
   a real type scale, tabular figures on data, a disciplined lime
   accent language, and an accessibility floor. Every class name the
   JS generates is preserved; nothing structural changed.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --navy:#001E67; --navy-dark:#00133F; --navy-mid:#123A94; --navy-deep:#000E30;
  --navy-surface:#EEF1F8;
  --lime:#9AC900; --lime-dark:#6F9200; --lime-soft:#F1F7DC;
  --white:#FFFFFF; --canvas:#F4F6FB; --surface:#FBFCFE;
  --border:#E6E9F1; --border-strong:#D8DEEA;
  --text:#3A4256; --text-dark:#0B1533; --ink:#0B1533; --muted:#6B7280; --light:#9AA3B2;
  --r-sm:8px; --r-md:12px; --r-lg:18px; --r-pill:999px;
  --shadow-sm:0 1px 2px rgba(11,21,51,.05);
  --shadow:0 1px 3px rgba(11,21,51,.05), 0 12px 28px -16px rgba(11,21,51,.18);
  --shadow-lift:0 2px 6px rgba(11,21,51,.06), 0 22px 44px -22px rgba(11,21,51,.26);
  --focus:0 0 0 3px rgba(18,58,148,.22);
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Plus Jakarta Sans',sans-serif; color:var(--text); background:var(--canvas); line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
h1,h2 { font-family:'Fraunces',serif; font-weight:900; color:var(--text-dark); letter-spacing:-.015em; }
a { text-decoration:none; color:inherit; }
[hidden] { display:none !important; }
.muted { color:var(--muted); font-size:14px; }
.accent { color:var(--lime); }
::selection { background:var(--lime-soft); color:var(--navy-dark); }

/* ── Buttons ── */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 22px; border:none; border-radius:var(--r-pill); font-family:inherit; font-size:14px; font-weight:700; letter-spacing:.005em; cursor:pointer; box-shadow:var(--shadow-sm); transition:background .15s ease, box-shadow .2s ease, transform .1s ease, border-color .15s ease; }
.btn.full { width:100%; }
.btn--navy { background:var(--navy); color:#fff; }
.btn--navy:hover { background:var(--navy-mid); }
.btn--outline { background:#fff; color:var(--navy); border:1px solid var(--border-strong); }
.btn--outline:hover { background:var(--navy-surface); border-color:var(--navy-mid); }
.btn--danger { background:#DC2626; color:#fff; }
.btn--danger:hover { background:#B91C1C; }
.btn:active { transform:translateY(1px); }
.btn:focus-visible { outline:none; box-shadow:var(--focus); }
.btn:disabled { opacity:.55; cursor:not-allowed; box-shadow:none; transform:none; }

/* ── Inputs ── */
.label { display:block; margin:18px 0 6px; font-size:13px; font-weight:600; color:var(--text-dark); }
.input { width:100%; padding:12px 14px; border:1px solid var(--border-strong); border-radius:var(--r-md); font-family:inherit; font-size:14px; color:var(--text-dark); background:#fff; transition:border-color .15s ease, box-shadow .15s ease; }
.input::placeholder { color:var(--light); }
.input:focus { outline:none; border-color:var(--navy-mid); box-shadow:var(--focus); }
select.input { cursor:pointer; }

/* ── Sign-in ── */
.auth-body { display:flex; align-items:center; justify-content:center; min-height:100vh; padding:24px; background:radial-gradient(120% 120% at 50% -10%, #fff 0%, var(--canvas) 60%); }
.auth-card { width:100%; max-width:404px; background:#fff; border:1px solid var(--border); border-radius:var(--r-lg); padding:40px; box-shadow:var(--shadow); text-align:center; }
.auth-mark, .side-mark, .loading-mark, .admin-denied-mark { display:inline-flex; align-items:center; justify-content:center; font-family:'Fraunces',serif; font-weight:900; background:var(--navy); color:#fff; }
.auth-mark { width:58px; height:58px; border-radius:16px; font-size:23px; margin:0 auto 18px; box-shadow:0 8px 20px -8px rgba(0,30,103,.55); }
.auth-title { font-size:27px; color:var(--navy); letter-spacing:-.02em; }
.auth-sub { margin-top:5px; font-size:14px; color:var(--muted); }
.auth-card form { text-align:left; margin-top:22px; }
.auth-card .btn { margin-top:24px; }
.note { margin-top:14px; min-height:18px; font-size:13px; font-weight:600; color:var(--lime-dark); text-align:center; }
.note.error { color:#DC2626; }
.auth-foot { margin-top:22px; font-size:12px; color:var(--light); line-height:1.5; }

/* ── Loading / denied ── */
.loading { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; color:var(--muted); }
.loading-mark { width:52px; height:52px; border-radius:14px; font-size:20px; animation:pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:.4;} }
.admin-denied { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:14px; padding:40px 24px; }
.admin-denied-mark { width:62px; height:62px; border-radius:16px; font-size:25px; }
.admin-denied h1 { font-size:28px; color:var(--navy); }
.admin-denied p { max-width:420px; font-size:15px; }
.admin-denied .btn { margin-top:8px; }

/* ── Shell ── */
.shell { display:flex; min-height:100vh; }
.side { width:252px; flex-shrink:0; background:linear-gradient(180deg,var(--navy) 0%,var(--navy-deep) 100%); padding:22px 14px; display:flex; flex-direction:column; position:sticky; top:0; height:100vh; }
.side-brand { display:flex; align-items:center; gap:11px; padding:6px 8px 4px; color:#fff; font-family:'Fraunces',serif; font-weight:900; font-size:20px; letter-spacing:-.01em; }
.side-mark { width:36px; height:36px; border-radius:10px; font-size:16px; background:var(--lime); color:var(--navy); }
.scope-label { padding:16px 12px 10px; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.5); }
.scope-label span { color:var(--lime); }
.nav { display:flex; flex-direction:column; gap:3px; flex:1; overflow-y:auto; min-height:0; }
.link { display:flex; align-items:center; gap:12px; padding:11px 13px; border-radius:var(--r-md); color:rgba(255,255,255,.72); font-size:14px; font-weight:600; transition:background .15s ease, color .15s ease, box-shadow .15s ease; }
.link svg { width:18px; height:18px; flex-shrink:0; transition:color .15s ease; }
.link:hover { background:rgba(255,255,255,.07); color:#fff; }
.link.active { background:rgba(154,201,0,.16); color:#fff; font-weight:700; box-shadow:inset 3px 0 0 var(--lime); }
.link.active svg { color:var(--lime); }
.link:focus-visible { outline:none; box-shadow:inset 0 0 0 2px rgba(154,201,0,.65); }
.signout { display:flex; align-items:center; gap:12px; padding:11px 13px; border:none; background:none; border-radius:var(--r-md); color:rgba(255,255,255,.7); font-family:inherit; font-size:14px; font-weight:600; cursor:pointer; transition:background .15s ease, color .15s ease; }
.signout svg { width:18px; height:18px; }
.signout:hover { background:rgba(255,255,255,.07); color:#fff; }
.signout:focus-visible { outline:none; box-shadow:inset 0 0 0 2px rgba(154,201,0,.65); }

.main { flex:1; padding:32px 40px; min-width:0; }
.topbar { background:#fff; border:1px solid var(--border); border-radius:var(--r-lg); padding:24px 28px; box-shadow:var(--shadow); }
.hello { font-family:'Fraunces',serif; font-size:27px; font-weight:900; color:var(--navy); letter-spacing:-.02em; }
.topbar-sub { margin-top:3px; font-size:14px; color:var(--muted); }

/* ── Stat cards ── the number is the hero; the lime is a quiet marker,
   not a full accent bar (that reads as a stock-dashboard template). */
.stats { margin-top:20px; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.stat { position:relative; background:#fff; border:1px solid var(--border); border-radius:var(--r-lg); padding:22px 22px 20px; box-shadow:var(--shadow); transition:box-shadow .2s ease, transform .2s ease; }
.stat:hover { box-shadow:var(--shadow-lift); transform:translateY(-2px); }
.stat-num { font-family:'Fraunces',serif; font-size:34px; font-weight:900; color:var(--navy); line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums; display:block; }
.stat-label { margin-top:11px; font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); display:flex; align-items:center; gap:8px; }
.stat-label::before { content:''; width:7px; height:7px; border-radius:2px; background:var(--lime); flex-shrink:0; }

/* ── Cards ── */
.card { margin-top:20px; background:#fff; border:1px solid var(--border); border-radius:var(--r-lg); padding:26px; box-shadow:var(--shadow); }
.card-title { font-family:'Fraunces',serif; font-size:21px; font-weight:900; color:var(--navy); letter-spacing:-.015em; }
.card-text { margin-top:9px; font-size:14px; color:var(--text); line-height:1.65; max-width:64ch; }
.card > .btn { margin-top:18px; }

.filter-row { display:flex; gap:12px; margin:18px 0 4px; flex-wrap:wrap; }
.filter-row .input { max-width:300px; }

/* ── Table ── framed as an inset data panel ── */
.table-wrap { overflow-x:auto; margin-top:18px; border:1px solid var(--border); border-radius:var(--r-md); -webkit-overflow-scrolling:touch; }
.table { width:100%; border-collapse:collapse; min-width:600px; }
.table th { text-align:left; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--light); padding:13px 16px; background:var(--surface); border-bottom:1px solid var(--border); white-space:nowrap; }
.table td { padding:15px 16px; border-bottom:1px solid var(--border); vertical-align:middle; font-size:14px; }
.table tbody tr:last-child td { border-bottom:none; }
.row { transition:background .12s ease; }
.row:hover { background:var(--navy-surface); }
.cell-name { display:flex; flex-direction:column; gap:2px; }
.cell-name .nm { font-weight:700; color:var(--ink); }
.cell-name .sub { font-size:12px; color:var(--muted); word-break:break-word; }
.roles { font-size:13px; color:var(--text); text-transform:capitalize; }
.reg { font-size:12.5px; color:var(--muted); white-space:nowrap; font-variant-numeric:tabular-nums; }
.act { white-space:nowrap; }
.act .btn { padding:7px 15px; font-size:13px; }
.you { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--navy); background:var(--lime); padding:2px 7px; border-radius:999px; margin-left:6px; }

/* ── Status pills — dot + label reads as a real status language ── */
.pill { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:5px 11px; border-radius:999px; white-space:nowrap; line-height:1; }
.pill--active { background:var(--lime-soft); color:#4A6B00; }
.pill--active::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--lime-dark); }
.pill--deactivated { background:#FBEAEA; color:#A33A3A; }
.pill--deactivated::before { content:''; width:6px; height:6px; border-radius:50%; background:#C0433A; }

/* Report queue pills (present whether or not that screen is wired) */
.pill--reason { background:var(--navy-surface); color:var(--navy-mid); }
.pill--open { background:#FDECC8; color:#8A5A00; }
.pill--reviewing { background:#DCE7FF; color:var(--navy-mid); }
.pill--resolved { background:var(--lime-soft); color:#4A6B00; }

/* ── Report cards ── */
.rep-list { margin-top:16px; display:flex; flex-direction:column; gap:14px; }
.rep-item { border:1px solid var(--border); border-radius:var(--r-md); padding:16px 18px; background:var(--surface); transition:border-color .15s ease, box-shadow .15s ease; }
.rep-item:hover { border-color:var(--border-strong); box-shadow:var(--shadow-sm); }
.rep-head { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.rep-when { margin-left:auto; font-size:12px; color:var(--light); white-space:nowrap; }
.rep-who { margin-top:10px; display:flex; flex-direction:column; gap:2px; }
.rep-who strong { color:var(--navy); font-size:15px; }
.rep-who .sub { font-size:12px; color:var(--muted); word-break:break-all; }
.rep-details { margin-top:8px; font-size:14px; color:var(--text); line-height:1.55; white-space:pre-wrap; }
.rep-foot { margin-top:14px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.rep-contact { font-size:13px; color:var(--muted); }
.rep-actions { display:flex; gap:8px; flex-wrap:wrap; }
.rep-actions .btn { padding:7px 16px; font-size:13px; }
.rep-count { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#A33A3A; background:#FBEAEA; padding:3px 9px; border-radius:999px; }

/* ── Pager ── */
.pgn-controls { display:flex; align-items:center; justify-content:center; gap:16px; margin-top:24px; }
.pgn-btn { padding:9px 18px; border-radius:var(--r-pill); font-size:13.5px; font-weight:700; background:#fff; color:var(--navy); border:1px solid var(--border-strong); box-shadow:var(--shadow-sm); cursor:pointer; transition:border-color .15s ease, background .15s ease; }
.pgn-btn:hover:not(:disabled) { border-color:var(--lime); background:var(--lime-soft); }
.pgn-btn:disabled { opacity:.45; cursor:default; box-shadow:none; }
.pgn-btn:focus-visible { outline:none; box-shadow:var(--focus); }
.pgn-info { font-size:13px; font-weight:600; color:var(--muted); font-variant-numeric:tabular-nums; }

/* ── Mobile ── */
.topbar-mobile, .drawer-overlay { display:none; }
@media (max-width:860px) {
  .main { padding:76px 18px 24px; }
  .topbar-mobile { display:flex; align-items:center; gap:14px; position:fixed; top:0; left:0; right:0; z-index:900; height:60px; padding:0 18px; background:var(--navy); color:#fff; box-shadow:0 2px 12px rgba(0,0,0,.14); }
  .topbar-mobile-title { font-family:'Fraunces',serif; font-weight:900; font-size:18px; }
  .burger { color:#fff; background:none; border:none; display:flex; padding:4px; cursor:pointer; }
  .burger svg { width:26px; height:26px; }
  .side { position:fixed; top:0; left:0; height:100vh; width:264px; max-width:82vw; transform:translateX(-100%); transition:transform .28s ease; z-index:1200; }
  .shell.drawer-open .side { transform:translateX(0); }
  .drawer-overlay { display:block; position:fixed; inset:0; background:rgba(0,10,40,.5); opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s ease; z-index:1100; }
  .shell.drawer-open .drawer-overlay { opacity:1; visibility:visible; }
  .stats { grid-template-columns:1fr; }
  .filter-row .input { max-width:none; flex:1 1 100%; }
}

/* ── Accessibility floor ── */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

/* ═══════════════════════════════════════════════════════════════
   ADMIN LOGIN — split-screen portal  ·  append at END of admin.css
   ---------------------------------------------------------------
   Mirrors the Flutter admin login: a navy brand panel with soft
   circles on the left, a clean form card on the right. Built entirely
   on the premium tokens already in this file.
   ═══════════════════════════════════════════════════════════════ */

.login-body { background: var(--surface); }
.login-split { display: grid; grid-template-columns: 5fr 4fr; min-height: 100vh; }

/* ── Brand panel ── */
.login-brand { position: relative; overflow: hidden; background: linear-gradient(150deg, var(--navy) 0%, var(--navy-deep) 100%); padding: 56px; display: flex; flex-direction: column; justify-content: center; }
.login-circle { position: absolute; border-radius: 50%; pointer-events: none; }
.login-circle--tr { top: -90px; right: -60px; width: 280px; height: 280px; background: rgba(255,255,255,.04); }
.login-circle--bl { bottom: -100px; left: -70px; width: 260px; height: 260px; background: rgba(154,201,0,.06); }
.login-brand-inner { position: relative; max-width: 460px; }
.login-badge { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--lime); background: rgba(154,201,0,.15); border: 1px solid rgba(154,201,0,.4); border-radius: var(--r-md); padding: 6px 12px; }
.login-headline { margin-top: 26px; font-family: 'Fraunces', serif; font-weight: 900; font-size: 40px; line-height: 1.12; letter-spacing: -.03em; color: #fff; }
.login-headline .hl { color: var(--lime); }
.login-lede { margin-top: 18px; max-width: 420px; font-size: 15px; line-height: 1.7; color: #D1D5DB; }
.login-features { margin-top: 32px; display: flex; flex-direction: column; gap: 14px; list-style: none; }
.login-features li { display: flex; align-items: center; gap: 14px; font-size: 14.5px; font-weight: 600; color: #E5E7EB; }
.login-features .tick { flex-shrink: 0; width: 24px; height: 24px; border-radius: 7px; background: var(--lime); color: var(--navy); display: flex; align-items: center; justify-content: center; }
.login-features .tick svg { width: 15px; height: 15px; }
.login-copyright { position: absolute; left: 56px; bottom: 32px; font-size: 12px; color: #9CA3AF; }

/* ── Form panel ── */
.login-form-wrap { display: flex; align-items: center; justify-content: center; padding: 32px; }
.login-card { width: 100%; max-width: 400px; background: #fff; border-radius: var(--r-lg); padding: 40px; text-align: center; }
.login-logo { height: 56px; width: auto; margin: 0 auto 22px; display: block; }
.login-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--lime-dark); }
.login-title { margin-top: 6px; font-family: 'Fraunces', serif; font-weight: 900; font-size: 28px; color: var(--navy); letter-spacing: -.02em; }
.login-sub { margin-top: 8px; font-size: 14px; color: var(--muted); }

.login-label { display: block; text-align: left; margin: 20px 0 6px; font-size: 13px; font-weight: 600; color: var(--navy); }
.login-input { position: relative; display: flex; align-items: center; }
.login-input-icon { position: absolute; left: 14px; width: 18px; height: 18px; color: var(--muted); pointer-events: none; }
.login-input input { width: 100%; padding: 13px 14px 13px 42px; border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface); font-family: inherit; font-size: 14px; color: var(--text-dark); transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.login-input input::placeholder { color: var(--light); }
.login-input input:focus { outline: none; border-color: var(--navy-mid); box-shadow: var(--focus); background: #fff; }
.login-eye { position: absolute; right: 8px; display: flex; padding: 6px; color: var(--muted); background: none; border: none; cursor: pointer; border-radius: 8px; }
.login-eye:hover { color: var(--navy); }
.login-eye.is-on { color: var(--navy); }
.login-eye svg { width: 18px; height: 18px; }

.login-forgot { display: block; text-align: right; margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--navy); }
.login-forgot:hover { color: var(--navy-mid); text-decoration: underline; }

.login-note { margin-top: 14px; text-align: left; font-size: 13px; font-weight: 600; color: var(--lime-dark); background: var(--lime-soft); padding: 10px 12px; border-radius: var(--r-md); }
.login-note.error { color: #B91C1C; background: #FEE2E2; }

.login-submit { margin-top: 18px; }

.login-protected { margin-top: 24px; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; color: var(--light); }
.login-protected svg { width: 14px; height: 14px; flex-shrink: 0; }

/* ── Mobile: brand panel drops away, card gets its own elevation ── */
@media (max-width: 900px) {
  .login-split { grid-template-columns: 1fr; }
  .login-brand { display: none; }
  .login-card { border: 1px solid var(--border); box-shadow: var(--shadow); }
}
@media (max-width: 480px) {
  .login-card { padding: 32px 22px; }
}

/* ═══════════════════════════════════════════════════════════════
   SELECTION + BRAND MARK LAYER  ·  paste at the very END of admin.css
   ---------------------------------------------------------------
   Nothing above is rewritten. Appended, so it wins on equal
   specificity — the same trick the premium layer already uses.

   (a) .bulk-bar        — the navy bulk action bar (admin-users)
   (b) .col-check/.col-num/.chk — checkbox + row-number columns
   (c) the brand marks  — real logo image instead of the "JM" glyph

   To undo any section, delete that section.
   ═══════════════════════════════════════════════════════════════ */

/* ── (a) Bulk action bar ── */
.bulk-bar { display:flex; align-items:center; flex-wrap:wrap; gap:9px; margin-top:16px; padding:11px 14px; border-radius:var(--r-md); background:linear-gradient(180deg,var(--navy) 0%,var(--navy-dark) 100%); box-shadow:var(--shadow); }
.bulk-count { display:inline-flex; align-items:center; gap:9px; font-size:13px; font-weight:700; color:#fff; font-variant-numeric:tabular-nums; }
.bulk-count::before { content:''; flex-shrink:0; width:8px; height:8px; border-radius:50%; background:var(--lime); box-shadow:0 0 0 3px rgba(154,201,0,.22); }
.bulk-count--busy::before { animation:pulse 1s ease-in-out infinite; }
.bulk-link { background:none; border:none; padding:0 2px; font-family:inherit; font-size:12.5px; font-weight:700; color:var(--lime); cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.bulk-link:hover { color:#fff; }
/* The two wrapper divs admin-users.js puts inside .bulk-bar. Without
   these the bar has no desktop layout: .bulk-head and .bulk-actions are
   plain blocks, so the count, the link and the chips fall out of line. */
.bulk-head { flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.bulk-actions { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.bulk-chip { display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:7px 15px; border:1px solid rgba(255,255,255,.26); border-radius:var(--r-pill); background:rgba(255,255,255,.08); color:#fff; font-family:inherit; font-size:12.5px; font-weight:700; white-space:nowrap; cursor:pointer; transition:background .15s ease, border-color .15s ease; }
/* The count on a mixed batch — "Suspend 3" — sits inside the chip. */
.bulk-n { min-width:18px; padding:1px 5px; border-radius:var(--r-pill); background:rgba(255,255,255,.22); font-size:11px; font-weight:800; font-variant-numeric:tabular-nums; }
.bulk-chip:hover:not(:disabled) { background:rgba(255,255,255,.17); border-color:var(--lime); }
.bulk-chip--danger { background:rgba(220,38,38,.92); border-color:rgba(255,255,255,.2); }
.bulk-chip--danger:hover:not(:disabled) { background:#B91C1C; border-color:#fff; }
.bulk-clear { background:none; border:none; padding:7px 6px; font-family:inherit; font-size:12.5px; font-weight:600; color:rgba(255,255,255,.7); cursor:pointer; }
.bulk-clear:hover { color:#fff; }
.bulk-bar button:focus-visible { outline:none; box-shadow:0 0 0 2px rgba(154,201,0,.8); }
.bulk-bar button:disabled { opacity:.5; cursor:default; }

/* ── (b) Selectable table: checkbox + row-number columns ── */
.table th.col-check, .table td.col-check { width:44px; padding-right:0; text-align:center; }
.table th.col-num, .table td.col-num { width:54px; color:var(--light); font-weight:700; font-variant-numeric:tabular-nums; }
.chk { width:17px; height:17px; accent-color:var(--lime); cursor:pointer; vertical-align:middle; }
.chk:disabled { cursor:default; opacity:.4; }
.chk:focus-visible { outline:none; box-shadow:var(--focus); }
.table--sel { min-width:760px; }
.table--sel tbody tr:nth-child(even) { background:rgba(244,246,251,.55); }
.table--sel tbody tr.is-sel { background:var(--lime-soft); box-shadow:inset 3px 0 0 var(--lime); }
.table--sel tbody tr.is-sel .nm { color:var(--navy); }

/* ── (c) Brand mark: the real logo instead of the "JM" glyph ──
   font-size:0 collapses whatever text is still inside these divs, so
   the swap works even on pages whose HTML you have not touched yet.
   Paths are ROOT-ABSOLUTE (/assets/…), not relative — a relative url()
   inside a CSS file resolves against the CSS file's own folder, which
   silently breaks the moment admin.css moves. */
.auth-mark, .side-mark, .loading-mark, .admin-denied-mark {
  font-size:0;
  background-repeat:no-repeat;
  background-position:center;
  background-size:62%;
  background-image:url('/assets/icons/jml_logo_512.png');
}

/* The sidebar tile is LIME, so it needs the navy logo, not the white one. */
.side-mark {
  background-color:var(--lime);
  background-image:url('/assets/icons/jml_logo_512.png');
}

/* Blinking logo loader. Fades and breathes rather than just blinking on
   and off — a hard on/off flash reads as a broken image. */
.loading-mark { animation:logo-blink 1.25s ease-in-out infinite; }
@keyframes logo-blink {
  0%, 100% { opacity:1;   transform:scale(1); }
  50%      { opacity:.34; transform:scale(.93); }
}

/* prefers-reduced-motion is already handled by the accessibility floor
   further up this file, which stops all animation at 1 iteration. */

/* ── (d) Mobile: restack, fill the width, stick to the top ──
   860px matches the breakpoint where the sidebar becomes a drawer and
   the fixed 60px .topbar-mobile appears, so the bar parks just under it.
   Chips go to two-up so they reach the 44px touch target without a
   cramped single row, and Clear takes its own line with a divider —
   it must not sit shoulder-to-shoulder with Delete under a thumb. */
@media (max-width:860px) {
  .bulk-bar { position:sticky; top:66px; z-index:600; flex-direction:column; align-items:stretch; gap:11px; padding:12px; }
  .bulk-head { flex:0 0 auto; flex-direction:column; align-items:flex-start; gap:5px; }
  .bulk-count { font-size:13.5px; }
  .bulk-link { padding:2px 0; font-size:13px; }
  .bulk-actions { gap:8px; }
  .bulk-chip { flex:1 1 calc(50% - 4px); min-height:44px; padding:10px 12px; font-size:13px; }
  .bulk-clear { flex:1 1 100%; min-height:40px; margin-top:2px; padding-top:10px; border-top:1px solid rgba(255,255,255,.16); color:rgba(255,255,255,.8); }
}

/* Very narrow phones: one action per line, nothing truncated. */
@media (max-width:400px) {
  .bulk-chip { flex:1 1 100%; }
}

/* ── Three-state account status (Stage 2) ── */ 
.pill--deactivated { background:
#FDECC8; color:
#8A5A00; } .pill--deactivated::before { content:''; width:6px; height:6px; border-radius:50%; background:
#C98A00; } .pill--suspended { background:
#FBEAEA; color:
#A33A3A; } .pill--suspended::before { content:''; width:6px; height:6px; border-radius:50%; background:
#C0433A; }

/* The reason, shown under the pill. Truncated — the full text is in the title attribute on hover, and in full on the user's own suspended screen, which is the copy that actually matters. */ 
.reason-note { display:block; margin-top:5px; max-width:190px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-style:italic; color:
#A33A3A; }

/* Suspend is consequential but reversible, so it is amber — not the red reserved for permanent deletion. Colour should track how hard an action is to undo, not how important it feels. */ 
.bulk-chip--warn { background:rgba(201,138,0,.92); border-color:rgba(255,255,255,.2); } .bulk-chip--warn:hover:not(:disabled) { background:
#A87400; border-color:#fff; }

/* Reason text would blow out the row on a phone. */ 
@media (max-width:860px) { .reason-note { max-width:130px; } }


/* ══ OVERVIEW ══════════════════════════════════════════════════
   The page has one loud element and everything else is quiet.
   That is the whole design: spend the boldness once.
   ═══════════════════════════════════════════════════════════ */

/* ── SIGNATURE: the marketplace balance ── */
.ov-beam { position:relative; overflow:hidden; margin-top:20px; padding:26px 28px 24px; border-radius:var(--r-lg); background:linear-gradient(150deg, var(--navy) 0%, var(--navy-deep) 100%); box-shadow:var(--shadow-lift); }

/* A single lime hairline along the top edge. The only ornament on
   the page, and it earns its place by tying the panel to the brand
   without borrowing the loudness of a full lime block. */
.ov-beam::before { content:''; position:absolute; inset:0 0 auto 0; height:3px; background:linear-gradient(90deg, var(--lime) 0%, var(--lime-dark) 100%); }

.ov-beam__top { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.ov-eyebrow { font-size:10.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.62); }

.ov-refresh { padding:6px 14px; border:1px solid rgba(255,255,255,.24); border-radius:var(--r-pill); background:rgba(255,255,255,.06); color:rgba(255,255,255,.9); font-family:inherit; font-size:11.5px; font-weight:700; letter-spacing:.02em; cursor:pointer; transition:background .15s ease, border-color .15s ease; }
.ov-refresh:hover:not(:disabled) { background:rgba(255,255,255,.14); border-color:var(--lime); }
.ov-refresh:disabled { opacity:.45; cursor:default; }
.ov-refresh:focus-visible { outline:none; box-shadow:0 0 0 2px rgba(154,201,0,.8); }

.ov-scale { margin-top:22px; display:flex; align-items:flex-end; justify-content:space-between; gap:20px; }
.ov-side { display:flex; flex-direction:column; gap:2px; min-width:0; }
.ov-side--right { text-align:right; }

/* Fraunces appears HERE AND NOWHERE ELSE on this page. Exclusivity
   is what makes the display face mean something — used on every
   number it would just be the body font in a hat. */
.ov-big { font-family:'Fraunces',serif; font-weight:900; font-size:clamp(38px, 7vw, 60px); line-height:.92; letter-spacing:-.03em; color:#fff; font-variant-numeric:tabular-nums; }
.ov-side-label { font-size:12px; font-weight:600; letter-spacing:.03em; color:rgba(255,255,255,.62); }

.ov-bar { margin-top:18px; display:flex; gap:3px; height:10px; }
.ov-bar span { display:block; border-radius:var(--r-pill); transition:width .7s cubic-bezier(.22,.9,.3,1); }
.ov-bar__supply { background:linear-gradient(90deg, var(--lime-dark), var(--lime)); }
.ov-bar__demand { background:rgba(255,255,255,.30); }
.ov-beam.is-loading .ov-bar span { width:50%; opacity:.35; }

.ov-ratio { margin-top:14px; font-size:13.5px; font-weight:600; line-height:1.55; color:rgba(255,255,255,.88); }

/* ── Quiet supporting blocks ── */
.ov-block { margin-top:30px; }
.ov-block__title { font-size:10.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--light); }

/* auto-fit + minmax: the grid picks its own column count from the
   space it is given, so there is no breakpoint here to maintain. */
.ov-grid { margin-top:12px; display:grid; grid-template-columns:repeat(auto-fit, minmax(136px, 1fr)); gap:10px; }

.ov-cell { padding:15px 16px 13px; border:1px solid var(--border); border-radius:var(--r-md); background:var(--white); box-shadow:var(--shadow-sm); transition:border-color .15s ease, box-shadow .2s ease; }
.ov-cell:hover { border-color:var(--border-strong); box-shadow:var(--shadow); }
.ov-cell__num { display:block; font-size:25px; font-weight:800; line-height:1.1; letter-spacing:-.02em; color:var(--navy); font-variant-numeric:tabular-nums; }
.ov-cell__label { display:block; margin-top:3px; font-size:12px; font-weight:600; color:var(--muted); }

/* Amber only when the number is above zero — see the note in the JS. */
.ov-block--watch .ov-cell.is-hot { border-color:#F2D89B; background:#FFF9EC; }
.ov-block--watch .ov-cell.is-hot .ov-cell__num { color:#8A5A00; }

/* Skeleton, not an ellipsis. A shimmering bar the width of the number
   that will replace it says "this is loading"; a "…" says "this is
   the value", which is a small lie told several times a day. */
.ov-skel { display:inline-block; width:42px; height:22px; border-radius:6px; background:linear-gradient(90deg, var(--navy-surface) 25%, #F7F9FD 50%, var(--navy-surface) 75%); background-size:220% 100%; animation:ov-shimmer 1.3s linear infinite; }
@keyframes ov-shimmer { from { background-position:220% 0; } to { background-position:-220% 0; } }

.ov-foot { margin-top:24px; font-size:11.5px; letter-spacing:.02em; color:var(--light); }
.ov-error { margin-top:10px; padding:11px 13px; border-radius:var(--r-md); background:#FBEAEA; color:#A33A3A; font-size:12.5px; line-height:1.55; }

@media (max-width:560px) {
  .ov-beam { padding:22px 20px 20px; }
  .ov-scale { gap:14px; }
  .ov-cell__num { font-size:22px; }
}

/* The global reduced-motion floor higher up this file already stops
   the shimmer. This kills the bar's travel too, so the beam simply
   appears at its final proportions. */
@media (prefers-reduced-motion: reduce) {
  .ov-bar span { transition:none; }
}

/* ── Header strip (replaces the old admin-who card) ──
   A hairline, not a card. It sits directly above the navy Overview
   panel, and two competing surfaces stacked on each other is what
   made the old header feel heavy. This one recedes. */
.topline { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; padding:4px 2px 18px; border-bottom:1px solid var(--border); }
.topline__greet { font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--lime-dark); }
.topline__title { margin-top:5px; font-family:'Fraunces',serif; font-size:27px; font-weight:900; letter-spacing:-.02em; color:var(--navy); line-height:1.1; }
.topline__date { margin-top:3px; font-size:13px; color:var(--muted); }
 
.topline__who { display:flex; align-items:center; gap:11px; padding:7px 14px 7px 7px; border:1px solid var(--border); border-radius:var(--r-pill); background:var(--white); box-shadow:var(--shadow-sm); }
.topline__avatar { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--navy); color:#fff; font-size:13px; font-weight:800; letter-spacing:.02em; }
.topline__id { display:flex; flex-direction:column; line-height:1.25; min-width:0; }
.topline__name { font-size:13px; font-weight:700; color:var(--navy); }
/* The email is reference, not identity. It gets the smallest type on
   the page and truncates rather than wrapping the chip onto two lines. */
.topline__mail { font-size:11.5px; color:var(--light); max-width:190px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
 
@media (max-width:640px) {
  .topline { align-items:flex-start; }
  .topline__title { font-size:23px; }
  .topline__who { width:100%; }
  .topline__mail { max-width:none; }
}
 
 
/* ── Reports table ── */
.table--reports { min-width:1020px; }
.ar-reason { display:block; font-size:12.5px; font-weight:700; color:var(--navy); }
.ar-snip { display:block; max-width:280px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ar-rep, .ar-when { white-space:nowrap; font-size:12.5px; color:var(--muted); }
 
/* The repeat badge is the single most important thing on this screen,
   so it is the only red on it. One report is a complaint; six against
   the same artisan is a decision. */
.rep-count { display:inline-flex; align-items:center; padding:3px 9px; border-radius:var(--r-pill); background:#FBEAEA; color:#A33A3A; font-size:11px; font-weight:800; letter-spacing:.03em; }
.rep-count--inline { font-size:10.5px; padding:2px 7px; }
 
.ar-repeat { display:inline-flex; align-items:center; gap:8px; margin-top:12px; font-size:13px; font-weight:600; color:var(--text); cursor:pointer; }
.bulk-link--static { color:rgba(255,255,255,.55); text-decoration:none; cursor:default; font-weight:600; }
 
 
/* ── Report detail drawer ──
   A drawer, not a centred modal: it slides from the edge the reader's
   attention already left from, and it can be tall without fighting
   the viewport the way a centred box does. */
.rd-wrap { position:fixed; inset:0; z-index:1200; }
.rd-scrim { position:absolute; inset:0; background:rgba(11,21,51,.42); backdrop-filter:blur(2px); animation:rd-fade .18s ease; }
.rd-panel { position:absolute; top:0; right:0; bottom:0; width:min(480px, 100%); overflow-y:auto; padding:24px 26px 30px; background:#fff; box-shadow:-24px 0 60px -30px rgba(11,21,51,.5); animation:rd-slide .24s cubic-bezier(.22,.9,.3,1); }
@keyframes rd-fade  { from { opacity:0; } }
@keyframes rd-slide { from { transform:translateX(24px); opacity:0; } }
 
/* Stops the page behind from scrolling while the drawer is open —
   without it, a phone scrolls the list under the drawer and you lose
   your place in the queue. */
body.rd-open { overflow:hidden; }
 
.rd-top { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.rd-pills { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.rd-close { border:none; background:none; padding:0 4px; font-size:26px; line-height:1; color:var(--light); cursor:pointer; }
.rd-close:hover { color:var(--navy); }
.rd-close:focus-visible { outline:none; box-shadow:var(--focus); border-radius:var(--r-sm); }
 
.rd-name { margin-top:16px; font-family:'Fraunces',serif; font-size:21px; font-weight:900; letter-spacing:-.015em; color:var(--navy); }
.rd-uid { margin-top:4px; font-size:12px; color:var(--light); }
.rd-uid code { font-size:11.5px; }
.rd-link { border:none; background:none; padding:0 2px; font-family:inherit; font-size:12px; font-weight:700; color:var(--navy-mid); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
 
.rd-actions-top { margin-top:14px; display:flex; gap:8px; flex-wrap:wrap; }
.rd-actions-top .btn { padding:8px 14px; font-size:12.5px; }
 
.rd-h { margin-top:22px; font-size:10.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--light); }
.rd-details { margin-top:7px; padding:13px 15px; border-radius:var(--r-md); background:var(--navy-surface); font-size:14px; line-height:1.65; color:var(--text-dark); white-space:pre-wrap; }
.rd-meta { margin-top:6px; font-size:13px; line-height:1.6; color:var(--text); }
.rd-prev { padding:11px 13px; border-left:3px solid var(--lime); background:var(--lime-soft); border-radius:0 var(--r-sm) var(--r-sm) 0; }
.rd-note { margin-top:7px; width:100%; resize:vertical; font-family:inherit; line-height:1.6; }
 
.rd-foot { position:sticky; bottom:-30px; margin:26px -26px -30px; padding:16px 26px 22px; display:flex; gap:9px; flex-wrap:wrap; background:linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 34%); }
.rd-foot .btn { flex:1 1 auto; }

/* ── User detail drawer (admin-users.js) ── */ .ud-list { margin-top:8px; border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden; } .ud-row { display:flex; align-items:baseline; gap:14px; padding:9px 13px; font-size:13px; border-top:1px solid var(--border); } .ud-row:first-child { border-top:none; } .ud-row:nth-child(even) { background:var(--navy-surface); }

/* Fixed-width key column so the values line up into a scannable edge. Ragged values are why long key/value lists feel like a wall of text rather than a table. */ .ud-k { flex:0 0 132px; font-weight:700; color:var(--muted); } .ud-v { flex:1 1 auto; min-width:0; color:var(--text-dark); word-break:break-word; } .ud-v--mono { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:11.5px; }

.ud-chips { margin-top:9px; display:flex; gap:7px; flex-wrap:wrap; } .ud-chip { padding:5px 12px; border:1px solid var(--border); border-radius:var(--r-pill); background:var(--white); font-size:12px; font-weight:700; color:var(--muted); } .ud-chip.is-active { border-color:var(--lime-dark); background:var(--lime-soft); color:
#4A6B00; }

/* The verdict sentence. It says WHY someone is hidden, not just that they are — "hidden" with no reason sends you hunting through three collections to find out. */ .ud-why { margin-top:10px; padding:10px 13px; border-left:3px solid var(--navy-mid); border-radius:0 var(--r-sm) var(--r-sm) 0; background:var(--navy-surface); font-size:12.5px; line-height:1.6; color:var(--text-dark); }

.ud-hint { padding:9px 13px; font-size:12px; line-height:1.55; color:var(--muted); background:var(--white); }

@media (max-width:520px) { .ud-row { flex-direction:column; gap:2px; } .ud-k { flex:none; font-size:11px; letter-spacing:.05em; text-transform:uppercase; } }

/* Section divider inside the drawer's key/value list. */
.ud-row--head { background:var(--navy-surface); font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
.ud-row--head .ud-k, .ud-row--head .ud-v { color:var(--muted); font-weight:800; }

/* The public-page buttons are injected into a wrapper span after the
   reads land. `display:contents` removes that span from layout so its
   children become direct flex items of .rd-actions-top and inherit the
   parent's gap — rather than nesting a second flex container that
   wraps on its own terms. */
#ud-public { display: contents; }

/* ── Verification review ── */
.table--verify { min-width:880px; }
 
/* A thumbnail, not the document. Big enough to see that something was
   uploaded and roughly what it is; too small to review from, which is
   deliberate — the decision belongs in the drawer where the full
   image and the confirm dialog are. */
.av-thumb img { display:block; width:56px; height:38px; object-fit:cover; border-radius:var(--r-sm); border:1px solid var(--border); background:var(--navy-surface); }
 
.av-doc { display:block; margin-top:9px; border-radius:var(--r-md); overflow:hidden; border:1px solid var(--border); background:var(--navy-surface); }
.av-doc img { display:block; width:100%; height:auto; max-height:340px; object-fit:contain; }
 
/* The question the screen exists to ask, phrased as a question. An
   admin scrolling quickly should still be confronted with it. */
.av-check { margin-top:12px; padding:11px 13px; border-left:3px solid var(--lime); border-radius:0 var(--r-sm) var(--r-sm) 0; background:var(--lime-soft); font-size:12.5px; line-height:1.6; color:#3F5A00; }
 
/* Third status colour, matching the pill set already in the file. */
.pill--pending  { background:#FDECC8; color:#8A5A00; }
.pill--pending::before  { content:''; width:6px; height:6px; border-radius:50%; background:#C98A00; }
.pill--approved { background:var(--lime-soft); color:#4A6B00; }
.pill--approved::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--lime-dark); }
.pill--rejected { background:#FBEAEA; color:#A33A3A; }
.pill--rejected::before { content:''; width:6px; height:6px; border-radius:50%; background:#C0433A; }

/* ── Job post moderation ── */ .table--jobs { min-width:900px; } .aj-apps { font-weight:700; font-variant-numeric:tabular-nums; color:var(--navy); }

/* The old un-namespaced .pill--open / .pill--closed / .pill--blocked
   lived here. They are gone: .pill--open collided with the REPORTS
   queue's amber .pill--open further up this file, and because this
   block came later it won — every open report rendered lime green,
   the same colour as resolved. The namespaced .pill--job-* set below
   replaces them. Do not reintroduce a bare state name here. */

.aj-blocked { border-left-color:
#C0433A; background:
#FBEAEA; color:
#A33A3A; }

.pill--job-open    { background:var(--lime-soft); color:#4A6B00; }
.pill--job-open::before    { content:''; width:6px; height:6px; border-radius:50%; background:var(--lime-dark); }
.pill--job-closed  { background:var(--navy-surface); color:var(--muted); }
.pill--job-closed::before  { content:''; width:6px; height:6px; border-radius:50%; background:var(--light); }
.pill--job-blocked { background:#FBEAEA; color:#A33A3A; }
.pill--job-blocked::before { content:''; width:6px; height:6px; border-radius:50%; background:#C0433A; }
     
/* ── (a) Zebra + hover, with the specificity sorted out ──
   Verification and Jobs had no striping while Users and Reports did, so
   the four tables did not look like the same product. Striping is now
   shared. The ORDER of these three rules is load-bearing: stripe, then
   hover, then selection. Hover outranks the stripe (0,3,2 vs 0,2,2) and
   selection outranks hover on equal specificity by coming last. */
.table tbody tr:nth-child(even) { background:rgba(244,246,251,.55); }
.table tbody tr.row:hover,
.table--sel tbody tr.row:hover { background:var(--navy-surface); }
.table--sel tbody tr.row.is-sel,
.table--sel tbody tr.row.is-sel:hover { background:var(--lime-soft); box-shadow:inset 3px 0 0 var(--lime); }

/* ── (b) Visible horizontal scrollbar on wide tables ──
   .table--verify is 880px and .table--jobs is 900px. On a 1280px screen,
   minus the 252px rail and 80px of padding, you have ~948px — so these
   tables scroll, and on macOS the overlay scrollbar is invisible until
   you already know to drag. Columns were being missed entirely. */
.table-wrap { scrollbar-width:thin; scrollbar-color:var(--border-strong) transparent; }
.table-wrap::-webkit-scrollbar { height:9px; }
.table-wrap::-webkit-scrollbar-track { background:transparent; }
.table-wrap::-webkit-scrollbar-thumb { border-radius:var(--r-pill); background:var(--border-strong); }
.table-wrap::-webkit-scrollbar-thumb:hover { background:var(--light); }

/* ── (c) Row actions on small screens ──
   .act .btn is 7px/13px, about 31px tall. Fine for a mouse, under the
   44px target for a thumb. Only raised where a thumb is likely. */
@media (max-width:860px) {
  .act .btn { min-height:40px; padding:9px 15px; }
  .act { display:flex; gap:7px; }
}

/* ── (d) Print ──
   An admin taking a user list or a verification record into a meeting.
   The rail, the bulk bar, the pager and the action column carry nothing
   onto paper, so they come off. Rows do not split across pages. */
@media print {
  body { background:#fff; }
  .shell { display:block; }
  .side, .topbar-mobile, .drawer-overlay, .bulk-bar,
  .pgn-controls, .signout, .ov-refresh, .filter-row,
  .col-check, .act { display:none !important; }
  .main { padding:0; }
  .card, .table-wrap, .stat, .ov-cell { border:none; box-shadow:none; }
  .table { min-width:0 !important; }
  .table th { background:#fff; color:#000; border-bottom:2px solid #000; }
  .table tbody tr { background:#fff !important; break-inside:avoid; }
  /* Pills lose their fill on most printers, so give them an outline. */
  .pill { border:1px solid currentColor; }
  .ov-beam { background:#fff !important; box-shadow:none; }
  .ov-beam .ov-big, .ov-beam .ov-eyebrow,
  .ov-beam .ov-side-label, .ov-beam .ov-ratio { color:#000 !important; }
}

/* ── Review moderation ── */
.table--reviews { min-width:1040px; }

/* Stars are the score, so they get the accent. Empty stars stay grey
   rather than disappearing — four filled out of five reads faster when
   the fifth is still visibly there. */
.rv-stars { font-size:14px; letter-spacing:1px; color:var(--lime-dark); white-space:nowrap; }
.rv-score { white-space:nowrap; }
.rv-stars-big { margin-top:7px; font-size:26px; letter-spacing:3px; color:var(--lime-dark); }
.rv-comment { max-width:320px; }

/* Three states. Live is lime, hidden is amber because it is reversible,
   purged is grey — the same reasoning as closed jobs. Grey is "over",
   red is "wrong". A purge is a completed decision, not a fault. */
.pill--rv-live { background:var(--lime-soft); color:#4A6B00; }
.pill--rv-live::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--lime-dark); }
.pill--rv-hidden { background:#FDECC8; color:#8A5A00; }
.pill--rv-hidden::before { content:''; width:6px; height:6px; border-radius:50%; background:#C98A00; }
.pill--rv-purged { background:var(--navy-surface); color:var(--muted); }
.pill--rv-purged::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--light); }

.rv-hidden-note { border-left-color:#C98A00; background:#FDECC8; color:#8A5A00; }

/* ── Company moderation ── */
.table--companies { min-width:1060px; }

/* Four states, and the two "down" ones are deliberately different
   colours. Blocked is red because JML did it and JML can undo it.
   Owner-suspended is amber because the listing is innocent — it is
   riding on a sanction applied somewhere else, and unblocking here
   would achieve nothing. Same colour for both would send an admin
   pressing the wrong button. */
.pill--co-live { background:var(--lime-soft); color:#4A6B00; }
.pill--co-live::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--lime-dark); }
.pill--co-blocked { background:#FBEAEA; color:#A33A3A; }
.pill--co-blocked::before { content:''; width:6px; height:6px; border-radius:50%; background:#C0433A; }
.pill--co-ownerheld { background:#FDECC8; color:#8A5A00; }
.pill--co-ownerheld::before { content:''; width:6px; height:6px; border-radius:50%; background:#C98A00; }
.pill--co-down { background:var(--navy-surface); color:var(--muted); }
.pill--co-down::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--light); }

.co-blocked-note { border-left-color:#C0433A; background:#FBEAEA; color:#A33A3A; }
.co-owner-note { border-left-color:#C98A00; background:#FDECC8; color:#8A5A00; }
.co-nosite { margin-top:14px; border-radius:var(--r-md); border:1px dashed var(--border-strong); }

/* ── Admin access ── */
.table--access { min-width:720px; }
.ad-scope { font-size:11px; padding:3px 9px; }

.pill--ad-full { background:var(--navy-surface); color:var(--navy-mid); }
.pill--ad-full::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--navy-mid); }
.pill--ad-orphan { background:#FDECC8; color:#8A5A00; }
.pill--ad-orphan::before { content:''; width:6px; height:6px; border-radius:50%; background:#C98A00; }

/* Warnings sit ABOVE the table, not inside it. A problem with who holds
   the keys is not a row — it is a thing to read before reading rows. */
.ad-warn { margin-top:16px; padding:13px 15px; border-radius:var(--r-md);
           border-left:3px solid; font-size:13px; line-height:1.6; }
.ad-warn code { font-size:12px; }
.ad-warn--orphan { border-color:#C98A00; background:#FDECC8; color:#8A5A00; }
.ad-warn--held { border-color:#C0433A; background:#FBEAEA; color:#A33A3A; }

.ad-scopes-off { margin-top:14px; border-radius:var(--r-md);
                 border:1px dashed var(--border-strong); }

/* ── Identity queue ── */
.table--identity { min-width:1000px; }

/* A row past the 24-hour promise is marked in the list, not only in
   the summary. Someone scanning the table should not have to do
   arithmetic to find the person who has been invisible for two days. */
.ai-overdue td { background:#FFF6E6 !important; }
.ai-flag { display:inline-block; margin-left:7px; padding:2px 7px; border-radius:var(--r-pill);
           background:#FDECC8; color:#8A5A00; font-size:10px; font-weight:800;
           letter-spacing:.04em; text-transform:uppercase; }

.ai-sum { margin-top:16px; padding:12px 15px; border-radius:var(--r-md);
          border-left:3px solid var(--navy-mid); background:var(--navy-surface);
          font-size:13.5px; line-height:1.6; color:var(--navy); }
.ai-sum--clear { border-color:var(--lime-dark); background:var(--lime-soft); color:#3F5A00; }
.ai-sum--late  { border-color:#C0433A; background:#FBEAEA; color:#8a2f28; }

/* ── The drawer ── */
.ai-panel { width:min(560px, 100%); }

/* The pose instruction is the security control and the check most
   likely to be skipped. It gets the loudest treatment in the drawer
   and sits ABOVE the photographs, so it is read before they are
   looked at rather than after. */
.ai-pose { margin-top:16px; padding:14px 16px; border-radius:var(--r-md);
           background:var(--lime-soft); border-left:4px solid var(--lime); }
.ai-pose-label { display:block; font-size:10px; font-weight:800; letter-spacing:.14em;
                 text-transform:uppercase; color:var(--lime-dark); }
.ai-pose strong { display:block; margin-top:4px; font-size:17px; color:#3F5A00; }
.ai-pose-ask { display:block; margin-top:7px; font-size:12.5px; line-height:1.55; color:#4A6B00; }

.ai-shots { display:flex; gap:10px; margin-top:14px; }
.ai-shots figure { flex:1 1 0; min-width:0; margin:0; }
.ai-shots figcaption { font-size:10px; font-weight:800; letter-spacing:.12em;
                       text-transform:uppercase; color:var(--light); margin-bottom:5px; }
.ai-shots img { display:block; width:100%; border-radius:var(--r-md);
                border:1px solid var(--border); background:var(--navy-surface);
                cursor:zoom-in; }
.ai-tip { margin-top:7px; font-size:11.5px; color:var(--light); }

.ai-match { margin-top:9px; padding:9px 12px; border-radius:var(--r-sm);
            font-size:12.5px; line-height:1.55; }
.ai-match--ok { background:var(--lime-soft); color:#3F5A00; }
.ai-match--no { background:#FDECC8; color:#6b4600; }

.ai-rejected { border-left-color:#C0433A; background:#FBEAEA; color:#A33A3A; }
.ai-cleared { margin-top:16px; border-radius:var(--r-md);
              border:1px dashed var(--border-strong); }

@media (max-width:560px) { .ai-shots { flex-direction:column; } }

/* Room for the checkbox and row-number columns. */
.table--jobs { min-width:1020px; }

/* The fourth job state. Amber, not red — the post itself is innocent.
   It is riding on a sanction applied to its company, and the action
   that fixes it lives on a different page. Red here would send an
   admin to press Unblock, which does nothing. */
.pill--job-coblocked { background:#FDECC8; color:#8A5A00; }
.pill--job-coblocked::before { content:''; width:6px; height:6px; border-radius:50%; background:#C98A00; }

.aj-coblocked { border-left-color:#C98A00; background:#FDECC8; color:#6b4600; }

/* Revocation warning. Amber, not red: the red in this console is
   reserved for the button that performs the irreversible thing, and a
   panel shouting the same colour as the button trains an admin to
   stop reading both. */
.ai-revoke-note {
  border-left-color: #C98A00;
  background: #FDECC8;
  color: #8A5A00;
}

.pill--job-ownerheld { background:#FDECC8; color:#8A5A00; }

/* ═══════════════════════════════════════════════════════════════
   PAYMENTS QUEUE  —  append to admin/css/admin.css
   ═══════════════════════════════════════════════════════════════ */

/* ── The match block ──────────────────────────────────────────
   Reference, amount, date — the only three fields that connect a
   row on this screen to a line on a real bank statement. Given the
   top of the drawer at size so nothing competes with them. */
.ap-match {
  background: #F1F4FA; border-radius: 16px;
  padding: 18px 20px; margin: 4px 0 14px;
}
.ap-match-label {
  display: block;
  font-size: 10.5px; font-weight: 800; letter-spacing: 1.4px;
  color: #6B7280; margin-bottom: 10px;
}

/* Monospace and large. The reviewer's next action is to paste this
   into a bank search box, so it is a button, not a label. */
.ap-ref {
  display: inline-flex; align-items: center; gap: 12px;
  border: 0; background: #fff; cursor: pointer;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 24px; font-weight: 700; letter-spacing: 1px;
  color: var(--navy, #001E67);
  border-radius: 10px; padding: 10px 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.ap-copy-hint {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 10.5px; font-weight: 800; letter-spacing: .8px;
  color: #8A94A8; text-transform: uppercase;
}
.ap-ref.is-copied { background: #ECFDF5; }
.ap-ref.is-copied .ap-copy-hint::after { content: 'ied'; }

.ap-match-row { display: flex; gap: 36px; margin-top: 14px; }
.ap-k {
  display: block; font-size: 10.5px; font-weight: 800;
  letter-spacing: 1.2px; color: #8A94A8;
}
.ap-v {
  display: block; font-size: 19px; font-weight: 800;
  color: var(--navy, #001E67); margin-top: 3px;
}

/* Amber, not red. Red in this console belongs to the button that
   does the irreversible thing; a panel shouting the same colour
   trains an operator to stop reading both. */
.ap-warn {
  background: #FDF6E3; border-left: 3px solid #C98A00;
  border-radius: 10px; padding: 13px 15px;
  font-size: 13.5px; line-height: 1.55; color: #8A5A00;
  margin-bottom: 6px;
}
.ap-note { border-left-color: #6B7280; background: #F1F4FA; color: #4A5568; }

/* ── Table ────────────────────────────────────────────────────── */
.ap-ref-cell {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 13px; font-weight: 700; letter-spacing: .4px;
  color: var(--navy, #001E67);
}
.ap-amount { font-weight: 800; color: var(--navy, #001E67); white-space: nowrap; }
.ap-overdue { background: #FFF9EC; }

/* ── Status pills ─────────────────────────────────────────────
   Amber for waiting: it needs an action from JML. Green for
   confirmed, grey for not accepted — a rejection is a decision, not
   an alarm, and the alarm colour is reserved for things still owed. */
.pill--pay-claimed   { background: #FDECC8; color: #8A5A00; }
.pill--pay-confirmed { background: #ECFDF5; color: #1F7A52; }
.pill--pay-rejected  { background: #F1F4FA; color: #59637A; }

@media (max-width: 640px) {
  .ap-ref { font-size: 19px; }
  .ap-match-row { gap: 20px; flex-wrap: wrap; }
}

/* Plan and cycle are two facts on two lines. Without this .sub is
   inline and they run together — "artisan_promonthly" reads as a
   plan id that does not exist. */
.table--payments .sub { display: block; font-size: 12px; color: var(--muted); }

/* The number the member typed, sat beside the document image so a
   reviewer can compare the two without moving their eyes. Monospace
   so 0 against O and 1 against l are distinguishable at the one
   moment it matters. */
.ai-num {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin: 12px 0;
  padding: 12px 14px;
  background: #F1F4FB;
  border: 1px solid #D6DCF0;
  border-radius: 10px;
}
.ai-num-k {
  font-size: 10.5px; font-weight: 800; letter-spacing: 1px;
  text-transform: uppercase; color: #6b7280;
}
.ai-num-v {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 17px; font-weight: 700; letter-spacing: 1px; color: #001E67;
}
.ai-num-ask { flex-basis: 100%; font-size: 12.5px; color: #4b5563; }

/* Duplicate-document finding. Red, and the only red on this screen.
   Everything else in the identity queue is informational; this is an
   allegation about a submission and it should stop the eye. */
.ai-dup {
  margin: 14px 0;
  padding: 14px 16px;
  background: #FEF2F2;
  border: 1px solid #FCA5A5;
  border-left: 4px solid #DC2626;
  border-radius: 10px;
  font-size: 13.5px;
  line-height: 1.6;
  color: #7F1D1D;
}
.ai-dup strong { display: block; margin-bottom: 8px; color: #991B1B; }
.ai-dup ul { margin: 8px 0; padding-left: 20px; }
.ai-dup li { margin-bottom: 3px; }
.ai-dup p { margin: 8px 0 0; font-size: 13px; }

/* The top block, credit version. Lime edge rather than the neutral
   frame, so an operator can tell at a glance — before reading a
   word — that this row does not send them to the bank. */
.ap-match--credit {
  border-left: 3px solid #9AC900;
  background: rgba(154, 201, 0, .07);
}

.ap-credit-head {
  margin: 4px 0 10px;
  font-size: 1.05rem;
  font-weight: 600;
  color: #001E67;
}

/* The reference still appears, small and quiet. It is not the join
   to anything on a statement here, but it IS the id an operator
   quotes back to a member, and the redemption is keyed on it. */
.ap-ref-small {
  display: inline-block;
  margin-top: 10px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: .82rem;
  letter-spacing: .04em;
  color: rgba(0, 30, 103, .55);
}

/* A read that failed. Must not look like a number. */
.ap-unknown {
  font-style: italic;
  color: rgba(0, 30, 103, .5);
}

/* ── THE TWO CREDIT VERDICTS ───────────────────────────────── */

.ap-warn--ok {
  border-left: 3px solid #9AC900;
  background: rgba(154, 201, 0, .10);
  color: #2c3b00;
}

.ap-warn--stop {
  border-left: 3px solid #b3261e;
  background: rgba(179, 38, 30, .08);
  color: #7a1a15;
}

/* ── THE ROW BADGE ─────────────────────────────────────────────
   Sits beside the amount rather than in its own column. A new
   column would push the table wider on a screen that is already
   eight columns across, and the fact belongs to the amount: it
   qualifies what that number means. */
.ap-tag-credit {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(154, 201, 0, .22);
  color: #3d5200;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* Matching pill in the drawer header. */
.pill--credit {
  background: rgba(154, 201, 0, .22);
  color: #3d5200;
}

@media (max-width: 720px) {
  .ap-tag-credit {
    display: block;
    margin: 4px 0 0;
    width: fit-content;
  }
}

/* ── SETTINGS ────────────────────────────────────────────────── */

.rf-set .ud-v {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rf-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.rf-rate {
  width: 92px;
  text-align: right;
}

.rf-pct {
  color: rgba(0, 30, 103, .6);
  font-size: .9rem;
}

.rf-note {
  margin-top: 12px;
  font-size: .9rem;
  color: rgba(0, 30, 103, .72);
}

.rf-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}

/* ── LIABILITY ───────────────────────────────────────────────── */

.rf-figs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.rf-fig {
  flex: 1 1 160px;
  padding: 14px 16px;
  border: 1px solid rgba(0, 30, 103, .12);
  border-radius: 10px;
  background: rgba(0, 30, 103, .03);
}

.rf-fig-k {
  display: block;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(0, 30, 103, .6);
}

.rf-fig-v {
  display: block;
  margin: 4px 0 2px;
  font-size: 1.3rem;
  font-weight: 600;
  color: #001E67;
}

.rf-fig-s {
  display: block;
  font-size: .8rem;
  color: rgba(0, 30, 103, .55);
}

/* The debt. Navy fill so it reads first without using red — this is
   a commitment, not an alarm. */
.rf-fig--big {
  flex: 1 1 100%;
  background: #001E67;
  border-color: #001E67;
}

.rf-fig--big .rf-fig-k { color: rgba(255, 255, 255, .68); }
.rf-fig--big .rf-fig-s { color: rgba(255, 255, 255, .6); }

.rf-fig--big .rf-fig-v {
  color: #fff;
  font-size: 1.9rem;
}

/* ── DRIFT ───────────────────────────────────────────────────── */

/* Amber, not red. Nothing is broken and no money is wrong — the
   ledger is correct and one cached number is stale. Red here would
   compete with the payment queue's genuine stop states. */
.rf-drift {
  border-left: 3px solid #d68a00;
}

.rf-drift-row .ud-v {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.rf-drift-was {
  color: rgba(0, 30, 103, .5);
  text-decoration: line-through;
}

.rf-drift-is {
  font-weight: 600;
  color: #001E67;
}

/* ── DRAWER ──────────────────────────────────────────────────── */

.rf-amount {
  margin: 6px 0 12px;
  font-size: 1.9rem;
  font-weight: 600;
  color: #001E67;
}

/* ── STATUS PILLS ────────────────────────────────────────────── */

.pill--rf-earned {
  background: rgba(154, 201, 0, .22);
  color: #3d5200;
}

.pill--rf-void {
  background: rgba(179, 38, 30, .12);
  color: #7a1a15;
}

.pill--rf-orphaned {
  background: rgba(0, 30, 103, .10);
  color: rgba(0, 30, 103, .65);
}

@media (max-width: 720px) {
  .rf-figs { flex-direction: column; }
  .rf-set .ud-v { flex-wrap: wrap; }
}

/* ═══════════════════════════════════════════════════════════════
   EVENT REVIEW  (.evr-)  —  inside the payment drawer
   ---------------------------------------------------------------
   Prefix is evr-, not ev-. The member site owns .ev-* for the
   Events screens, and although the two stylesheets never ship on
   the same page today, a name that would collide if they ever did
   is a name waiting to be misread by whoever merges them.
   ═══════════════════════════════════════════════════════════════ */

.evr {
  margin: 18px 0;
  padding: 18px 18px 20px;
  border: 1px solid #E3E8F2;
  border-radius: 14px;
  background: #FBFCFE;
}

.evr-head { margin-bottom: 14px; }
.evr-tag {
  display: inline-block;
  font-size: 10px; font-weight: 800; letter-spacing: 1.3px;
  text-transform: uppercase;
  color: #4A6B00; background: #F1F6DF;
  padding: 4px 10px; border-radius: 999px;
}
.evr-title {
  margin: 9px 0 0;
  font-size: 19px; font-weight: 800; line-height: 1.3;
  color: #001E67; overflow-wrap: anywhere;
}

/* Real size, not a thumbnail. The cover is half of what a reader
   will judge this event on, and an operator cannot review an image
   they cannot see. */
.evr-cover {
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  background-size: cover; background-position: center;
  background-color: #EEF1F7;
  border: 1px solid #E3E8F2;
}
.evr-cover--none {
  display: flex; align-items: center; justify-content: center;
  color: #8A93A6; font-size: 13px;
}

.evr-rows { margin-top: 14px; }
.evr-row {
  display: flex; gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid #EDF0F5;
  font-size: 13.5px; line-height: 1.5;
}
.evr-row:last-child { border-bottom: 0; }
.evr-k {
  flex: 0 0 132px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: #8A93A6;
  padding-top: 1px;
}
.evr-v { flex: 1 1 auto; min-width: 0; color: #001E67; overflow-wrap: anywhere; }

/* A member-supplied URL. Shown in full, never shortened — half of
   this review is the operator reading where a link actually goes,
   and a truncated domain is the part that matters. */
.evr-link {
  color: #001E67; text-decoration: underline; text-underline-offset: 2px;
  font-family: ui-monospace, Menlo, monospace; font-size: 12.5px;
  overflow-wrap: anywhere;
}

.evr-desc { margin-top: 16px; }
.evr-desc p {
  margin: 8px 0 0;
  padding: 12px 14px;
  background: #fff; border: 1px solid #E3E8F2; border-radius: 10px;
  font-size: 14px; line-height: 1.7; color: #303A4E;
  max-height: 320px; overflow-y: auto;
  overflow-wrap: anywhere;
}

/* Amber. These two fields go to the open web the moment Confirm is
   pressed, and the operator is the last person who can stop it. */
.evr-contact {
  margin-top: 16px;
  padding: 13px 15px;
  background: #FFFBEB; border: 1px solid #FDE68A;
  border-left: 3px solid #D97706;
  border-radius: 10px;
}
.evr-contact .evr-k { color: #92400E; }
.evr-contact .evr-row { border-bottom-color: #FDE68A; }
.evr-contact .evr-v { color: #78350F; }

/* ── The gate ────────────────────────────────────────────────
   Navy, and heavier than everything above it. This is the last
   thing the operator reads before the button, and it is the only
   part of the panel that is an instruction rather than a fact. */
.evr-gate {
  margin-top: 18px;
  padding: 16px 18px;
  background: #001E67;
  border-radius: 12px;
  color: #fff;
}
.evr-gate-h {
  margin: 0;
  font-size: 14.5px; font-weight: 800; line-height: 1.5;
}
.evr-check {
  margin: 12px 0 0; padding: 0 0 0 18px;
  list-style: disc;
  font-size: 13px; line-height: 1.7; color: #C3CBDF;
}
.evr-tick {
  display: flex; align-items: center; gap: 10px;
  margin-top: 14px; padding-top: 13px;
  border-top: 1px solid rgba(255,255,255,.18);
  font-size: 14px; font-weight: 700; color: #fff;
  cursor: pointer;
}
/* 17px and never smaller. This checkbox is a publishing decision. */
.evr-tick input {
  width: 17px; height: 17px; flex: none;
  accent-color: #9AC900; cursor: pointer;
}

/* ── Blocking states ─────────────────────────────────────────
   Red, where the contact block is amber, and the difference is
   deliberate: amber says "pay attention to this", red says "do not
   press Confirm". */
.evr--bad {
  background: #FEF2F2;
  border-color: #FCA5A5;
}
.evr-bad-h { margin: 0 0 8px; font-size: 15px; font-weight: 800; color: #991B1B; }
.evr--bad p { font-size: 13.5px; line-height: 1.65; color: #7F1D1D; margin: 0 0 8px; }
.evr--bad p:last-child { margin-bottom: 0; }

.evr-stale {
  margin-bottom: 14px;
  padding: 12px 14px;
  background: #FEF2F2; border: 1px solid #FCA5A5;
  border-left: 3px solid #DC2626;
  border-radius: 10px;
  font-size: 13.5px; line-height: 1.6; color: #7F1D1D;
}
.evr-stale strong { color: #991B1B; }

@media (max-width: 620px) {
  .evr-row { flex-direction: column; gap: 3px; }
  .evr-k { flex: none; }
}

/* The event pill on the drawer's status row. Lime, matching the
   member's own "Live" pill on the Events screen — one colour for
   one fact, across two consoles. */
.pill--event { background: #F1F6DF; color: #4A6B00; }

/* A link TalentHub refused to make clickable. Loud, because it is
   close to conclusive that this listing should be rejected. */
.evr-badurl {
  display: inline-block;
  padding: 5px 9px; border-radius: 7px;
  background: #FEF2F2; border: 1px solid #FCA5A5;
  color: #991B1B; font-family: ui-monospace, Menlo, monospace;
  font-size: 12px; overflow-wrap: anywhere;
}

/* ── Events desk ─────────────────────────────────────────────
   Pills reuse the colour language of the payments and jobs
   queues. One status, one colour, across every moderation
   surface. */
.pill--ev-live    { background: #E8F5D6; color: #4A6B00; }
.pill--ev-pending { background: #FFF3D6; color: #8A6A00; }
.pill--ev-draft   { background: #EFF1F5; color: #5A6478; }
.pill--ev-expired { background: #EFF1F5; color: #5A6478; }
.pill--ev-held    { background: #FBE9E9; color: #A33A3A; }
.pill--ev-blocked { background: #FBE9E9; color: #A33A3A; }
.pill--edited     { background: #001E67; color: #fff; }

/* A lime edge, not a second badge. The row already carries a
   status pill, and two competing markers read as noise. */
.ae-edited { border-left: 3px solid #9AC900; }

.ae-set { display: flex; flex-direction: column; gap: 5px; }
.ae-set span {
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: #8A93A6;
}

/* The master switch. Navy and heavier than the fields above it,
   because it is the one control here that changes what every
   member sees. */
.ae-switch {
  margin-top: 16px; padding: 14px 16px;
  background: #001E67; border-radius: 12px;
  border-top: none;
}

/* The result of a save, beside the button rather than below it.
   Pushed left so the button stays at the right edge where every
   other footer puts it. */
.ae-foot { display: flex; align-items: center; gap: 14px; }
.ae-note { flex: 1; font-size: 13.5px; font-weight: 600; color: #8A93A6; }
.ae-note--ok  { color: #4A6B00; }
.ae-note--bad { color: #A33A3A; }

@media (max-width: 560px) {
  .ae-foot { flex-wrap: wrap; }
  .ae-note { flex: 0 0 100%; order: 2; }
}

.pill--co-ownerdown  { background:#fef3c7; color:#92400e; }
.pill--co-unverified { background:#e0e7ff; color:#3730a3; }
.pill--co-orphan     { background:#fee2e2; color:#991b1b; }
.pill--co-down       { background:#f1f5f9; color:#475569; }