/* admin.html's own overrides — the console's shared row, disclosure and modal
   classes already cover almost everything the OKR Cleanup pane needs; this file
   is only what genuinely has no existing token.

   Not merged into `.acct-delete-warn`/`.acct-delete-phrase` in CSS/components.css
   — same visual recipe, but name-scoped to the account-deletion feature that
   owns that file. New classes, same visual language (the same tokens, padding,
   radius) — a future pass could fold both into one shared pair.

   The group header's own Delete-all button, scoped to this pane's id rather
   than `.group-head` itself, which Boards, People and the admin modal also
   draw. Organization is this pane's outer `.group-head`; each Team's own
   header moved one level down into `.group-head-sub` (admin.html's own
   Boards/Teams pattern, reused rather than a second one). */
#okrCleanupPane .group-head{ display:flex; align-items:center; gap:7px; }
#okrCleanupPane .group-head .okrc-group-delete-all,
#okrCleanupPane .group-head-sub .okrc-group-delete-all{ margin-left:auto; }




/* These three destructive confirm dialogs stack their footers on a phone: a
   danger button and Cancel side by side below 520px either overflow or shrink
   unreadable. Three selectors rather than three copies of the same rule —
   core rule 4. `#teamDeleteOverlay`'s copy lives in CSS/team-delete-flow.css,
   since team_board.html hosts that dialog and loads neither this sheet nor
   these three others; a selector shipped to a page that can never emit it is
   dead weight. The classes those three dialogs share with team-delete-flow.css
   (`.okrc-warn` etc.) are defined there now; admin.html loads that sheet right
   after this one, so cascade order is unchanged. */

@media (max-width: 520px){
  #okrCleanupDeleteAllOverlay .modal-footer,
  #okrCleanupDeleteOverlay .modal-footer,
  #organizationDeleteOverlay .modal-footer{ flex-direction:column-reverse; align-items:stretch; }
  #okrCleanupDeleteAllOverlay .modal-footer .btn,
  #okrCleanupDeleteOverlay .modal-footer .btn,
  #organizationDeleteOverlay .modal-footer .btn{ justify-content:center; }
}


/* ==========================================================================================
   EMAIL HEALTH AND THE DELIVERY AUDIT  —  #emailAuditPanel, on the SMTP tab
   See JS/features/admin-email-audit.js for what draws these.

   Not a new visual language — built from the console's own `.sec-section`,
   `.control-row`, `.bulk-bar`, `.row`/`.pick`/`.badge`, `.email-stat`, already
   dressed by alt-admin.css. What IS here: a verdict line, a reason breakdown,
   and the three status colours. `--a-*` tokens alias the classic ones, so one
   set of rules answers both presentations; the short `.alt-app` block at the
   foot is only the type scale that genuinely differs.

   The three status colours are the whole point of this section: sent is
   green and quiet (not news); failed is red (the one state to act on);
   suppressed is GREY, never amber or red — a suppression is a rule being
   obeyed, and a warning colour would misreport correct decisions as problems.
   ========================================================================================== */

.aea-controls{ margin:0 0 14px; }

/* The one sentence read first. Never coloured until there is something to
   colour — `.aea-verdict` alone is "Reading…" or "cannot answer," neither good
   nor bad news. */
.aea-verdict{
  font-size:13px; line-height:1.5; font-weight:600; color:var(--text);
  padding:9px 12px; border-radius:var(--radius-sm);
  background:var(--gray-soft); border:1px solid var(--border-soft);
  margin:0 0 12px;
}
.aea-verdict.is-good{ background:var(--green-soft); border-color:var(--green-text); }
.aea-verdict.is-bad{ background:var(--red-soft); border-color:var(--red-text); }
/* Unknown is not bad — a fact about this database, not a fault in the email system. */
.aea-verdict.is-unknown{ background:var(--yellow-soft); border-color:var(--warn-text); font-weight:500; }

/* The figures reuse `.email-stat` wholesale; only the numeral is tinted. */
.email-stat.aea-stat-failed b{ color:var(--red-text); }
.email-stat.aea-stat-sent b{ color:var(--green-text); }
.email-stat.aea-stat-suppressed b{ color:var(--text-faint); }
/* Scoped again for this experience — `.alt-app .email-stat b` ties these three
   on specificity, and alt-admin.css's own header says not to rely on file order. */
.alt-app .email-stat.aea-stat-failed b{ color:var(--a-red); }
.alt-app .email-stat.aea-stat-sent b{ color:var(--a-green); }
.alt-app .email-stat.aea-stat-suppressed b{ color:var(--a-faint); }

/* ---------- the reason breakdown ---------- */
.aea-reasons{ margin:12px 0 0; display:flex; flex-direction:column; gap:12px; }
/* An empty breakdown is not a breakdown — the same `.sec-note:empty` defect
   alt-admin.css already records. */
.aea-reasons:empty{ display:none; }

.aea-reason-group{
  border:1px solid var(--border-soft); border-radius:var(--radius-sm);
  padding:9px 11px; background:var(--panel-2);
}
/* The left edge carries the meaning, the same 3px weight `.detail` uses. */
.aea-reason-group.is-failed{ border-left:3px solid var(--red-text); }
.aea-reason-group.is-suppressed{ border-left:3px solid var(--border-strong); }
.aea-reason-h{
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.4px;
  color:var(--text-dim);
}
.aea-reason-group.is-failed .aea-reason-h{ color:var(--red-text); }
.aea-reason-note{ font-size:12px; line-height:1.45; color:var(--text-faint); margin:3px 0 8px; }

/* One reason per line. A grid, not flex, because the counts must line up —
   sys_design-system.md §7's fixed-track rule. */
.aea-reason{
  display:grid; grid-template-columns:38px minmax(0, 170px) minmax(0, 1fr);
  gap:4px 10px; align-items:baseline; padding:3px 0;
}
.aea-reason + .aea-reason{ border-top:1px solid var(--border-soft); }
.aea-reason-n{
  font-size:14px; font-weight:700; font-variant-numeric:tabular-nums; text-align:right;
  color:var(--text);
}
.aea-reason.is-failed .aea-reason-n{ color:var(--red-text); }
.aea-reason.is-suppressed .aea-reason-n{ color:var(--text-faint); }
/* The sender's own string, monospace — a literal searched in a log, not prose read. */
.aea-reason-code{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:11px; color:var(--text-dim); overflow-wrap:anywhere;
}
.aea-reason-why{ font-size:12px; line-height:1.45; color:var(--text-faint); }

/* ---------- the delivery list ---------- */
/* The status is on the row's own edge as well as its badge, readable without a
   word. Suppressed rows get no edge — they are the normal case.
   Scoped `.alt-app .row.aea-row`, not `.aea-row`: alt-admin.css's `.alt-app
   .row` border shorthand out-ranks a bare class whatever the source order is. */
.aea-row{ border-left:3px solid transparent; }
.aea-row.is-failed{ border-left-color:var(--red-text); }
.aea-row.is-sent{ border-left-color:var(--green-text); }
.alt-app .row.aea-row{ border-left:3px solid transparent; }
.alt-app .row.aea-row.is-failed{ border-left-color:var(--a-red); }
.alt-app .row.aea-row.is-sent{ border-left-color:var(--a-green); }

/* The reserved checkbox track — a row that cannot be retried draws no control,
   but it must still occupy the width. Matches `.row .pick` exactly. */
.pick-gap{ width:15px; height:15px; flex:0 0 auto; display:inline-block; }

/* The badge, in whichever language the page is speaking. The base `.badge` is
   filled; the suite's is an outline, deliberately, so each presentation's
   variants are written in its own idiom rather than one fighting the other. */
.aea-badge.is-failed{ background:var(--red-soft); color:var(--red-text); }
.aea-badge.is-sent{ background:var(--green-soft); color:var(--green-text); }
/* Restated rather than inherited by accident: a suppression is not a warning,
   and a future base-badge colour change must not silently turn it into one. */
.aea-badge.is-suppressed{ background:var(--gray-soft); color:var(--text-faint); }
/* `background:transparent` is load-bearing here — without it this rule ties
   `.alt-app .badge`'s own transparent at (0,2,0) and the suppressed badge
   renders as a filled pill, the "column of alerts" the outline style exists
   to prevent on a list whose commonest row is a correct suppression. */
.alt-app .badge.aea-badge.is-failed{
  background:transparent; border-color:var(--a-red); color:var(--a-red);
}
.alt-app .badge.aea-badge.is-sent{
  background:transparent; border-color:var(--a-green); color:var(--a-green);
}
.alt-app .badge.aea-badge.is-suppressed{
  background:transparent; border-color:var(--a-line-strong); color:var(--a-faint);
}
/* Queued sits beside `failed`, never instead of it — the column still says
   failed, and this is the second badge saying a Retry took. Amber: in-between,
   not a fault. Unconfirmed is the same amber, for the same reason, but is the
   only badge here that REPLACES the status's meaning, so it is dimmed rather
   than removed — the column still says `failed` underneath. */
.aea-badge.is-inflight{ background:var(--yellow-soft); color:var(--warn-text); }
.aea-badge.is-outranked{ opacity:.55; }
.alt-app .badge.aea-badge.is-inflight{
  background:transparent; border-color:var(--a-amber); color:var(--a-amber);
}
.alt-app .badge.aea-badge.is-outranked{ opacity:.55; }
.aea-badge.is-queued{ background:var(--yellow-soft); color:var(--warn-text); }
.alt-app .badge.aea-badge.is-queued{
  background:transparent; border-color:var(--a-amber); color:var(--a-amber);
}

/* ---------- the per-delivery attempt history ----------

   `.detail`/`.drow`/`.dname`/`.dmeta` do all the work, already dressed by
   alt-admin.css. Only the heading and status column are new — a second detail
   vocabulary for one panel would be the duplication this file argues against. */
.aea-attempts-h{
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.4px;
  color:var(--text-faint); margin-bottom:4px;
}
.alt-app .aea-attempts-h{ font-family:var(--a-display); color:var(--a-faint); }
/* The badge keeps its width so the statuses line up down the panel —
   sys_design-system.md §7's fixed-track rule, applied to three lines. */
.aea-attempt .aea-badge{ flex:0 0 auto; min-width:76px; text-align:center; }
.aea-attempt .dname{ flex:0 0 auto; min-width:0; }
.aea-attempt .dmeta{ flex:1 1 200px; min-width:0; overflow-wrap:anywhere; }

/* The provider's message id — the string that makes a row findable in Resend. Monospace,
   faint, and allowed to disappear before anything else does on a narrow column. */
.aea-provider{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:11px; color:var(--text-faint); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; max-width:150px; flex:0 1 auto;
}

/* The count of loaded rows sits beside the selection count; `.bulk-count` takes
   `margin-right:auto` to push the buttons right, and a second one would push them twice. */
.aea-count{ margin-right:0; }

/* ---------- the drain ----------

   Set apart from the bulk bar above it — it does not act on the selection, it
   sends what is already marked. A top rule, not a panel border stated twice.

   A bare checkbox, not `.pref-switch`: every switch on this console persists
   something; this is a per-run option the run itself switches back off. */
.aea-drain{
  margin:12px 0 0; padding-top:12px; border-top:1px solid var(--border-soft);
  gap:12px; flex-wrap:wrap;
}
.aea-uncertain{ font-size:12px; gap:8px; }
.aea-uncertain input[type="checkbox"]{
  width:15px; height:15px; flex:0 0 auto; margin:0; accent-color:var(--accent);
}
/* The consequence is in the label and coloured like one, so a skimming reader
   still reads the half that can cost them. */
.aea-uncertain b{ color:var(--red-text); font-weight:600; }
.alt-app .aea-drain{ border-top-color:var(--a-line-soft); }
.alt-app .aea-uncertain{ color:var(--a-dim); }
.alt-app .aea-uncertain input[type="checkbox"]{ accent-color:var(--a-blue); }
.alt-app .aea-uncertain b{ color:var(--a-red); }

/* Three different silences, drawn the same way so the WORDS carry the
   difference. `.empty` already centres and pads; this adds the two-line shape. */
.aea-empty-h{ font-size:13px; font-weight:600; color:var(--text-dim); }
.aea-empty-p{ font-size:12px; line-height:1.5; color:var(--text-faint); margin:4px auto 0; max-width:46ch; }

/* ---------- the widths ----------
   880px is the breakpoint `.control-row` and the console's grids already break
   at — a fourth number here would put this block out of step. */
/* An email address is one unbreakable word. `.sub` wraps, but that only helps
   text with spaces, and this line is two addresses and a team name —
   `anywhere` lets it break mid-string, the only place it can. Scoped
   `.alt-app .row.aea-row` to out-rank `.alt-app .row .sub`. Not in the media
   query: a long address overflows a wide grid column too. */
.aea-row .sub{ overflow-wrap:anywhere; }
.alt-app .row.aea-row .sub{ overflow-wrap:anywhere; }

@media (max-width: 880px){
  /* The row stops being one line: `.row` is a nowrap flex, so on a narrow
     column the address and reason ellipsize to nothing useful. Scoped for the
     suite too, for the same reason as the `.sub` rule above. */
  .aea-row{ flex-wrap:wrap; }
  .alt-app .row.aea-row{ flex-wrap:wrap; }
  .aea-row .who-col, .alt-app .row.aea-row .who-col{ flex:1 1 100%; order:2; min-width:0; }
  .aea-row .pick, .aea-row .pick-gap{ order:1; }
  .aea-row .aea-badge{ order:1; }
  .aea-row .meta, .aea-row .aea-provider{ order:3; }
  .aea-provider{ max-width:100%; }
  /* The history panel loses its 26px indent on a narrow column, where it is
     directly under its row with nothing between them anyway.
     `.detail.aea-attempts`, not `.aea-attempts`: admin.html's inline <style>
     sits after every <link>, so at equal specificity the bare class would do
     nothing — an unreachable rule is worse than no rule. */
  .detail.aea-attempts, .alt-app .detail.aea-attempts{ margin-left:0; }
  /* The flag drops under the button rather than squeezing beside it — its sentence is the
     point of it, and a clipped warning is worse than none. */
  .aea-uncertain{ flex:1 1 100%; }
  .aea-attempt .dname{ flex:1 1 100%; }
  /* The reason lines stack: a 38px numeral column beside two text columns has no room to be a
     grid at this width, and the count belongs with the word it counts. */
  .aea-reason{ grid-template-columns:38px minmax(0, 1fr); }
  .aea-reason-why{ grid-column:2; }
}

/* ---------- this experience's own type and faces ----------
   The only things that genuinely differ — everything else resolves through
   shared tokens. Same shape alt-admin.css takes for `.email-stat`. */
.alt-app .aea-verdict{ font-family:var(--a-body); font-size:12.5px; }
.alt-app .aea-reason-h{ font-family:var(--a-display); }
.alt-app .aea-reason-n{ font-family:var(--a-display); }
.alt-app .aea-reason-code{ font-family:var(--a-mono); }
.alt-app .aea-provider{ font-family:var(--a-mono); }
.alt-app .aea-empty-h{ font-family:var(--a-display); }

/* ================= Organization layer: Role, Organization and God Mode badges =================

   New variants on the existing `.alt-app .badge`, exactly like `.badge.admin`/
   `.badge.pending` already are — no base badge rule of its own, only the
   colour/border a caller applies as a second class. Every colour is an
   existing `--a-*` token, so light and dark are both correct with no override. */
.alt-app .badge.role{ border-color:var(--a-blue-text); color:var(--a-blue-text); }
.alt-app .badge.org{ border-color:var(--a-green); color:var(--a-green); }

/* The God Mode column — a button shaped like a badge, a state display AND a
   route into Profile, never a bare toggle. `.godmode-slot` carries no width
   or border when empty, so a reader with no God Mode access sees an unchanged
   People pane.

   Colour alone never carries the state: the unfilled state is an outline in
   the ordinary faint tone; the filled state adds both the purple fill AND a
   leading glyph (`::before`, aria-hidden), so the distinction survives
   grayscale, a colour-blindness simulation, and a screen reader. */
.alt-app .godmode-slot{ display:inline-flex; }
.alt-app .badge.godmode{
  cursor:pointer; font-family:inherit; letter-spacing:.06em;
  border-color:var(--a-line-strong); color:var(--a-dim); background:transparent;
}
.alt-app .badge.godmode:hover{ border-color:var(--a-purple); color:var(--a-purple); }
.alt-app .badge.godmode.on{
  border-color:var(--a-purple); color:var(--a-purple); background:var(--a-purple-soft);
}
.alt-app .badge.godmode.on::before{ content:'\2726  '; }

/* The profile dialog's own badge gets the same glyph, since the two surfaces
   show the same fact and must not disagree about how it looks — not a button
   there, so no cursor/hover rule is needed. */

/* The footer note — same faint, quiet register as `.sec-note`'s prose: a fact
   about the system, not something wrong with it. */
.admin-godmode-note{ font-size:11px; color:var(--a-faint); margin-top:4px; }