/* ============================================================
   Mailman console — design tokens & component skeleton
   Built on the My Best Book design system (MetaPro / Sekate,
   anthracite core, muted alternative families).
   CSP-safe: no inline styles required; all styling lives here.
   AMENDED by plan-design-review 2026-07-20 (see the Design
   Review Addendum in the design doc): contrast fixes, focus
   states, danger row grammar, toast variants, skeletons,
   liveness pill. This file is the SINGLE styling source; the
   .dc.html prototype is reference only.
   ============================================================ */

:root {
  /* ---------- CORE (from MBB) ---------- */
  --anthracite: #183E5B;
  --white: #FFFFFF;
  --fg: var(--anthracite);
  --fg-soft: #4C5C6E;          /* secondary text (pigeon-dark) */
  --fg-caption: #6B7A89;       /* ages, micro-labels (was #8494A3 — 3.1:1 FAIL) */
  --bg: var(--white);
  --bg-tint: #F4F6F8;
  --hairline: #E2E7EC;
  --line-strong: var(--anthracite); /* the straight-line divider */

  /* Console family: Pigeon Blue (one family per piece) */
  --pigeon-dark: #4C5C6E; --pigeon-base: #91A5B9; --pigeon-light: #CED4DD;

  /* DS aliases the prototype markup references (design review fix 8) */
  --sand-light: #FFF0B3;
  --pistachio-light: #DCE4DE;
  --pistachio-dark: #5F796A;

  /* ---------- CATEGORY CHIPS (7, muted register) ----------
     Always paired with a text label — never color-only.
     Foregrounds darkened 2026-07-20 to >=4.5:1 on their bgs. */
  --cat-needs-reply-fg: #8C4A4A;   --cat-needs-reply-bg: #EDD8D8;   /* 4.83 ok */
  --cat-action-req-fg:  #7E5023;   --cat-action-req-bg:  #F4E2CB;   /* was #96602A (4.14) */
  --cat-invoice-fg:     #4E655A;   --cat-invoice-bg:     #DCE4DE;   /* was #5F796A (3.66) */
  --cat-spam-fg:        #5C6871;   --cat-spam-bg:        #E6EAED;   /* 4.72 ok */
  --cat-newsletter-fg:  #755A1E;   --cat-newsletter-bg:  #FFF0B3;   /* was #8A6A24 (4.41) */
  --cat-notification-fg:#4C5C6E;   --cat-notification-bg:#CED4DD;   /* 4.60 ok */
  --cat-personal-fg:    #5A4F73;   --cat-personal-bg:    #CFC7E3;   /* was #6C6184 (3.51) */

  /* ---------- STATUS / DANGER ---------- */
  --ok: #5F796A;               /* dots / LIVE text on white (passes) */
  --ok-bg: #DCE4DE;
  --ok-on-tint: #4E655A;       /* text ON ok-bg (queued pill) — >=4.5 */
  --warn: #755A1E;             /* stale / caution text on warn-bg (was #8A6A24) */
  --warn-bg: #FFF0B3;          /* own-domain strip, paused banner */
  --danger: #A14D4D;           /* solid danger fills, outlines, text on white */
  --danger-bg: #F0DCDC;
  --danger-on-tint: #8F4444;   /* danger TEXT on danger-bg (banner) — >=4.5 */
  --quarantine-border: #C7D2DB; /* dashed border around untrusted mail text */

  /* ---------- TYPE ---------- */
  --font-sans: "MetaPro", "Fira Sans", system-ui, sans-serif; /* DS stack */
  --font-rounded: "Sekate", "MetaPro", system-ui, sans-serif; /* titles, UPPERCASE */
  --t-h1: 26px; --t-h2: 19px; --t-body: 14.5px;
  --t-small: 13px; --t-caption: 12px; --t-micro: 11px;

  /* ---------- SPACING (4px base) / RADII / ELEVATION ---------- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;
  --r-sm: 6px; --r-md: 12px; --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(24,62,91,.06), 0 1px 3px rgba(24,62,91,.08);
  --shadow-md: 0 4px 12px rgba(24,62,91,.10), 0 2px 4px rgba(24,62,91,.06);
  --shadow-lg: 0 18px 40px rgba(24,62,91,.14), 0 6px 14px rgba(24,62,91,.08);

  /* Breakpoint: 1080px (single number — spec's 860 line is void). */
}

/* ---------- BASE ---------- */
body { margin: 0; font-family: var(--font-sans); font-size: var(--t-body);
  color: var(--fg); background: var(--bg); line-height: 1.5;
  -webkit-font-smoothing: antialiased; }
a { color: var(--anthracite); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--pigeon-dark); }
.num { font-variant-numeric: tabular-nums; }

/* Focus (design review fix 5): every actionable, keyboard-visible. */
a:focus-visible, .btn:focus-visible, .chip:focus-visible,
button:focus-visible, input:focus-visible, [role="radio"]:focus-visible {
  outline: 2px solid var(--anthracite); outline-offset: 2px; }
.topbar a:focus-visible, .topbar .btn:focus-visible {
  outline-color: var(--white); }

/* ---------- BUTTONS ---------- */
.btn { font: 700 13px var(--font-sans); border-radius: var(--r-md);
  border: 2px solid transparent; padding: 8px 16px; cursor: pointer;
  background: var(--anthracite); color: var(--white); line-height: 1; }
.btn:hover { filter: brightness(.94); }
.btn:active { transform: translateY(1px); }
.btn--secondary { background: var(--white); color: var(--anthracite); border-color: var(--anthracite); }
.btn--danger { background: var(--danger); color: var(--white); }
.btn--danger-outline { background: var(--white); color: var(--danger); border-color: var(--danger); }
.btn--on-color { background: var(--white); color: var(--anthracite); }
.btn:disabled { opacity: .45; cursor: default; transform: none; }
.btn--touch { min-height: 44px; }

/* ---------- CHIPS ---------- */
.chip { display: inline-flex; align-items: center; gap: 6px;
  font: 600 var(--t-caption) var(--font-sans); padding: 3px 10px;
  border-radius: var(--r-pill); }
.chip--mailbox { background: var(--white); color: var(--fg-soft); border: 1px solid var(--hairline); }
.chip--needs_reply    { background: var(--cat-needs-reply-bg); color: var(--cat-needs-reply-fg); }
.chip--action_required{ background: var(--cat-action-req-bg);  color: var(--cat-action-req-fg); }
.chip--invoice_finance{ background: var(--cat-invoice-bg);     color: var(--cat-invoice-fg); }
.chip--spam           { background: var(--cat-spam-bg);        color: var(--cat-spam-fg); }
.chip--newsletter     { background: var(--cat-newsletter-bg);  color: var(--cat-newsletter-fg); }
.chip--notification   { background: var(--cat-notification-bg);color: var(--cat-notification-fg); }
.chip--personal       { background: var(--cat-personal-bg);    color: var(--cat-personal-fg); }
/* Follow-up wait, in words ("No reply in 21 days") — a labelled chip, never a
   bare figure in the age column. */
.chip--wait           { background: var(--warn-bg);            color: var(--warn); }

/* Label for a figure that stands alone once columns stack (a11y). */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- UNTRUSTED MAIL CONTENT (quarantine zone) ---------- */
.mail-quote { background: var(--bg-tint); border: 1px dashed var(--quarantine-border);
  border-radius: var(--r-sm); padding: 8px 10px; overflow-wrap: anywhere; }
.mail-quote .sender { font-weight: 700; }

/* ---------- TABLE ROWS ---------- */
.rowhead { font: 700 var(--t-micro) var(--font-sans); text-transform: uppercase;
  letter-spacing: .1em; color: var(--fg-soft);
  border-bottom: 2px solid var(--line-strong); }
.row { border-bottom: 1px solid var(--hairline); }
.row:hover { background: rgba(24,62,91,.03); }        /* fix 14: bind eye to button */
.row--ghost { opacity: .72; }                          /* decided / executed rows */
.row--danger { background: rgba(255,240,179,.35); }    /* D8: own-domain / delete rows */
.row-warnstrip { background: var(--warn-bg); color: var(--warn);
  font-weight: 700; font-size: var(--t-small); padding: 6px 10px;
  border-radius: var(--r-sm); }

/* Liveness pill (D5): new proposals never reflow the list. */
.newrows-pill { display: inline-flex; align-items: center; gap: 8px;
  background: var(--anthracite); color: var(--white); border-radius: var(--r-pill);
  font: 700 13px var(--font-sans); padding: 8px 16px; cursor: pointer;
  margin: 10px 0; }

/* Loading (fix 11): static skeletons — instrument panels don't shimmer. */
.skeleton { background: var(--bg-tint); border-radius: var(--r-sm); min-height: 14px; }

/* ---------- FEEDBACK ---------- */
.banner--error { background: var(--danger-bg); color: var(--danger-on-tint);
  border: 1px solid var(--danger); border-radius: var(--r-sm);
  padding: 10px 14px; font-weight: 600; }
.banner--paused { background: var(--warn-bg); color: var(--warn);
  border-bottom: 2px solid var(--line-strong); padding: 10px 20px; font-weight: 700; }
.toast { position: fixed; bottom: calc(24px + env(safe-area-inset-bottom));
  left: 50%; transform: translateX(-50%);
  background: var(--anthracite); color: var(--white); border-radius: var(--r-md);
  padding: 12px 18px; font: 600 var(--t-small) var(--font-sans);
  box-shadow: var(--shadow-lg); max-width: calc(100vw - 32px); }
.toast--error { background: var(--danger); }
.status-pill--queued   { background: var(--ok-bg);   color: var(--ok-on-tint); border-radius: var(--r-pill); font-weight: 700; padding: 6px 12px; }
.status-pill--declined { background: var(--bg-tint); color: var(--fg-soft);    border-radius: var(--r-pill); font-weight: 700; padding: 6px 12px; }
.status-pill--executed { background: var(--bg-tint); color: var(--fg-soft);    border-radius: var(--r-pill); font-weight: 600; padding: 6px 12px; }
.undo-link { font: 600 12.5px var(--font-sans); background: none; border: none;
  color: var(--fg-soft); text-decoration: underline; cursor: pointer; padding: 0; }
.undo-link:disabled { color: var(--fg-caption); text-decoration: none; cursor: default; }

/* ---------- NARROW (<1080px) ---------- */
@media (max-width: 1079px) {
  .btn { min-height: 44px; }
  .navpill, .filterpill { min-height: 44px; }
  .navrow { position: relative; }
  .navrow::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0;
    width: 28px; background: linear-gradient(to right, transparent, var(--bg-tint));
    pointer-events: none; }   /* overflow affordance — the one permitted gradient
                                 (a scrim, not a color-mix; DS rule intact) */
  .toast { white-space: normal; }
}