/* Design tokens taken from ui/mockups/mail-admin.html, the direction approved
   on 2026-08-31, so the built thing looks like the thing that was signed off. */
:root{
  --bg:#f6f7f9; --panel:#fff; --ink:#14181f; --ink2:#5b6472; --ink3:#8d95a3;
  --line:#e4e7ec; --line2:#eef0f3;
  --accent:#1f6feb; --accent-soft:#eaf1fe;
  --ok:#0f7b4f; --ok-soft:#e6f4ee; --bad:#b42318; --bad-soft:#fdecea;
  --radius:10px;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased}
a{color:var(--accent)}

/* ---------- sign in ---------- */
.signin{min-height:100vh;display:grid;place-items:center;padding:32px}
.card{width:100%;max-width:380px;background:var(--panel);border:1px solid var(--line);
  border-radius:14px;padding:34px 32px;box-shadow:0 1px 2px rgba(16,23,34,.04),0 18px 40px -24px rgba(16,23,34,.28)}
.mark{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  background:linear-gradient(145deg,#2d7ff9,#1652c4);margin-bottom:20px}
.mark svg{width:19px;height:19px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
h1{margin:0 0 6px;font-size:19px;font-weight:600;letter-spacing:-.02em}
.sub{margin:0 0 24px;color:var(--ink2);font-size:13px}
label{display:block;font-size:12.5px;font-weight:600;margin:0 0 6px;color:var(--ink2)}
input[type=email],input[type=password]{width:100%;border:1px solid var(--line);border-radius:8px;
  padding:10px 12px;font:14px inherit;background:#fbfbfc;margin-bottom:14px;font-family:inherit}
input:focus{outline:none;border-color:var(--accent);background:#fff;box-shadow:0 0 0 3px var(--accent-soft)}
button{width:100%;border:0;border-radius:8px;padding:11px 14px;font:600 13.5px inherit;
  background:var(--accent);color:#fff;cursor:pointer;font-family:inherit}
button:hover{background:#1a5fd0}
.err{background:var(--bad-soft);border:1px solid #f6c9c4;color:var(--bad);border-radius:8px;
  padding:10px 12px;font-size:13px;margin-bottom:16px}
.foot{margin-top:20px;color:var(--ink3);font-size:12px;text-align:center}

/* ---------- shell ---------- */
.app{display:grid;grid-template-columns:224px 1fr;min-height:100vh}
.rail{background:#101722;color:#c3cbd8;padding:18px 0;display:flex;flex-direction:column}
.brand{display:flex;align-items:center;gap:9px;padding:0 18px 20px}
.brand .mark{width:26px;height:26px;border-radius:7px;margin:0}
.brand b{color:#fff;font-size:14.5px;font-weight:600;letter-spacing:-.2px}
.nav{display:flex;align-items:center;gap:10px;padding:7px 8px;margin:0 10px;border-radius:7px;
  color:#c3cbd8;text-decoration:none;font-size:13.5px}
.nav.on{background:var(--accent);color:#fff}
.nav.out{color:#8fa0b8;text-decoration:none;display:flex;align-items:center;gap:8px}
.nav.out:hover{background:#1a2331;color:#fff}
.nav.out svg{width:13px;height:13px;margin-left:auto;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.7}
.top .who a{color:var(--accent);text-decoration:none}
.top .who a:hover{text-decoration:underline}
.rail-foot{margin-top:auto;padding:14px 18px 0;border-top:1px solid #1c2635;font-size:12px;color:#6b7586}
main{padding:22px 26px 60px;max-width:1180px}
.top{display:flex;align-items:flex-start;gap:16px;margin-bottom:20px}
.top h2{margin:0;font-size:21px;letter-spacing:-.35px;font-weight:600}
.top .who{margin:3px 0 0;color:var(--ink2);font-size:13px}
.top form{margin-left:auto}
.top button{width:auto;background:#fff;color:var(--ink);border:1px solid var(--line);font-weight:500}
.top button:hover{background:#fbfbfc;border-color:#c9cfd8}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.panel + .panel{margin-top:18px}
.phead{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--line2)}
.phead h3{margin:0;font-size:14px;font-weight:600}
.phead .note{font-size:12.5px;color:var(--ink3);margin-left:auto}
table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink3);
  font-weight:600;padding:9px 16px;background:#fafbfc;border-bottom:1px solid var(--line2)}
td{padding:11px 16px;border-bottom:1px solid var(--line2)}
tbody tr:last-child td{border-bottom:none}
.addr{font-family:var(--mono);font-size:12.5px;color:var(--ink2)}
.tag{display:inline-flex;font-size:11.5px;font-weight:600;padding:2.5px 8px;border-radius:20px}
.tag.ok{background:var(--ok-soft);color:var(--ok)}
.tag.mute{background:#eef0f3;color:var(--ink2)}
.empty{padding:34px 16px;text-align:center;color:var(--ink3);font-size:13.5px}
@media(max-width:900px){.app{grid-template-columns:1fr}.rail{flex-direction:row;align-items:center;padding:10px}
  .rail-foot{display:none}.nav{margin:0 4px}}

/* ---------- rail groups, from the approved mockup ---------- */
.navgroup{padding:0 10px;margin-bottom:14px}
.navgroup h6{margin:0 0 5px;padding:0 8px;font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:#5d6a7d;font-weight:600}
.nav{display:flex;align-items:center;gap:10px;padding:7px 8px;margin:0;border-radius:7px;
  color:#c3cbd8;text-decoration:none;font-size:13.5px}
.nav svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.nav:hover{background:#1a2331;color:#fff}
.nav.on,.nav.on:hover{background:var(--accent);color:#fff}
.nav.off{color:#5d6a7d;cursor:default}
.nav.off:hover{background:none;color:#5d6a7d}
.nav .ct{margin-left:auto;font-size:11.5px;color:#7d8798;font-variant-numeric:tabular-nums}
.nav.on .ct{color:#cfe0ff}
.nav .ct.soon{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:#4a5568}
.nav.out svg.ext{width:12px;height:12px;margin-left:auto;opacity:.6}
.rail-foot button.linkish{width:auto;background:none;border:0;padding:0;color:#8fa0b8;
  font:inherit;font-size:12px;text-decoration:underline;cursor:pointer}
.rail-foot button.linkish:hover{color:#fff;background:none}

/* ---------- page furniture ---------- */
.top h1{margin:0;font-size:21px;letter-spacing:-.35px;font-weight:600}
.top .sub{margin:3px 0 0;color:var(--ink2);font-size:13px}
.top .actions{margin-left:auto;display:flex;gap:8px;flex:none}
.btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:#fff;
  color:var(--ink);border-radius:8px;padding:8px 13px;font:500 13px inherit;cursor:pointer;
  text-decoration:none;width:auto;font-family:inherit}
.btn:hover{border-color:#c9cfd8;background:#fbfbfc}
.btn.pri{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.btn.pri:hover{background:#1a5fd0}
.btn.bad{background:var(--bad);border-color:var(--bad);color:#fff;font-weight:600}
.btn.bad:hover{background:#9a1f16}
.btn.wide{width:100%;justify-content:center;padding:11px 14px;margin-top:6px}
.btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:13px 15px}
.stat .k{font-size:11.5px;color:var(--ink3);letter-spacing:.03em;text-transform:uppercase;font-weight:600}
.stat .v{font-size:23px;font-weight:600;letter-spacing:-.6px;margin-top:5px;font-variant-numeric:tabular-nums}
.stat .m{font-size:12px;color:var(--ink2);margin-top:2px}

.banner{display:flex;gap:11px;align-items:flex-start;background:#fdf3e0;border:1px solid #f2dfb8;
  border-radius:var(--radius);padding:12px 14px;margin-bottom:18px}
.banner svg{width:17px;height:17px;flex:none;margin-top:1px;color:#b07d10;fill:none;
  stroke:currentColor;stroke-width:2;stroke-linecap:round}
.banner b{display:block;font-size:13.5px;margin-bottom:2px}
.banner p{margin:0;font-size:12.5px;color:#7a5200;line-height:1.55}
.banner.bad{background:var(--bad-soft);border-color:#f6c9c4}
.banner.bad svg{color:var(--bad)} .banner.bad p{color:#8a2b22}
.banner.ok{background:var(--ok-soft);border-color:#bfe3d2}
.banner.ok svg{color:var(--ok)} .banner.ok p{color:#12603f}
.banner .secret{font-family:var(--mono);font-size:16px;letter-spacing:.02em;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin-top:10px;
  display:inline-block;user-select:all}
.flash{background:var(--ok-soft);border:1px solid #bfe3d2;color:#12603f;border-radius:var(--radius);
  padding:11px 14px;font-size:13px;margin-bottom:18px}

.phead h2{margin:0;font-size:14px;font-weight:600;letter-spacing:-.1px}
.phead .note{font-size:12.5px;color:var(--ink3)}
.phead .right{margin-left:auto;display:flex;gap:8px;align-items:center}
.search{position:relative;display:flex;align-items:center}
.search svg{position:absolute;left:9px;width:14px;height:14px;color:var(--ink3);fill:none;
  stroke:currentColor;stroke-width:2;stroke-linecap:round}
.search input{border:1px solid var(--line);border-radius:7px;padding:6px 10px 6px 29px;font-size:13px;
  width:210px;background:#fbfbfc;margin:0;font-family:inherit}

.who{display:flex;align-items:center;gap:10px}
.av{width:29px;height:29px;border-radius:50%;display:grid;place-items:center;flex:none;
  font-size:11.5px;font-weight:600;color:#fff}
.who .nm{font-weight:500}
.who .ad,td.ad{font-size:12.5px;color:var(--ink3);font-family:var(--mono)}
.q{min-width:150px}
.qbar{height:5px;background:#eceef1;border-radius:3px;overflow:hidden;margin-bottom:4px}
.qfill{display:block;height:100%;border-radius:3px;background:var(--accent)}
.qfill.w{background:#e0a021} .qfill.d{background:#d2503f}
.qtxt{font-size:11.5px;color:var(--ink2);font-variant-numeric:tabular-nums}
td.right,th.right{text-align:right}
.rowbtn{border:1px solid var(--line);background:#fff;border-radius:6px;padding:5px 10px;
  font-size:12px;color:var(--ink2);text-decoration:none;display:inline-block}
.rowbtn:hover{border-color:#c9cfd8;color:var(--ink)}
.foot{padding:11px 16px;border-top:1px solid var(--line2);font-size:12.5px;color:var(--ink3);background:#fafbfc}

/* ---------- forms ---------- */
.panel.form{padding:0}
.panel.form form{padding:22px 24px 24px;max-width:520px}
.panel.form .phead + form{padding-top:18px}
.panel.form label{display:block;font-size:12.5px;font-weight:600;margin:14px 0 6px;color:var(--ink2)}
.panel.form label:first-child{margin-top:0}
.panel.form input[type=text],.panel.form input:not([type]),.panel.form input[type=password],
.panel.form select{width:100%;border:1px solid var(--line);border-radius:8px;padding:10px 12px;
  font:14px inherit;background:#fbfbfc;font-family:inherit}
.panel.form select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#8d95a3 50%),
  linear-gradient(135deg,#8d95a3 50%,transparent 50%);
  background-position:calc(100% - 18px) 18px,calc(100% - 13px) 18px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.addr-row{display:flex;align-items:stretch;gap:0}
.addr-row input{border-radius:8px 0 0 8px}
.addr-row .at{display:flex;align-items:center;padding:0 12px;border:1px solid var(--line);
  border-left:0;border-radius:0 8px 8px 0;background:#f2f4f7;color:var(--ink2);font-size:13.5px}
.hint{margin:6px 0 0;font-size:12.5px;color:var(--ink3)}
.check{display:flex !important;align-items:flex-start;gap:10px;font-weight:400 !important;
  color:var(--ink) !important;font-size:13.5px !important;margin-top:18px !important}
.check input{width:16px;height:16px;margin-top:2px;flex:none}
.panel.form.danger{border-color:#f0cfcb}
.panel.form.danger .phead{border-bottom-color:#f6dedb}
.panel.form code{font-family:var(--mono);font-size:12.5px;background:#f2f4f7;padding:1px 5px;border-radius:4px}
.empty a{color:var(--accent)}
@media(max-width:900px){.stats{grid-template-columns:repeat(2,1fr)}.hide-s{display:none}}

/* ---------- no inline styles anywhere ----------
   The pages run under `style-src 'self'`, which blocks style attributes
   outright. A blocked style attribute does not warn: it is simply dropped,
   which is how every quota bar came to render at 100%. Anything that varies
   per row is therefore a class. */
.hint.flush{margin-top:0}
.rail-foot .signout{margin-top:10px}
.av.av1{background:#1f6feb} .av.av2{background:#0f7b4f} .av.av3{background:#9a6400}
.av.av4{background:#b42318} .av.av5{background:#6b3fa0} .av.av6{background:#0e7490}
.av.av7{background:#a5561b}
.qfill.w0{width:0}     .qfill.w5{width:5%}   .qfill.w10{width:10%} .qfill.w15{width:15%}
.qfill.w20{width:20%}  .qfill.w25{width:25%} .qfill.w30{width:30%} .qfill.w35{width:35%}
.qfill.w40{width:40%}  .qfill.w45{width:45%} .qfill.w50{width:50%} .qfill.w55{width:55%}
.qfill.w60{width:60%}  .qfill.w65{width:65%} .qfill.w70{width:70%} .qfill.w75{width:75%}
.qfill.w80{width:80%}  .qfill.w85{width:85%} .qfill.w90{width:90%} .qfill.w95{width:95%}
.qfill.w100{width:100%}
td.right form{display:inline}
td.right button.rowbtn{font-family:inherit}

/* ---------- two render-only faults found while drawing the next screens ----------
   Neither shows up in the markup; both were caught by screenshotting.

   1. `button{width:100%}` is the sign-in button's rule. Any row button inherits
      it and stretches across its whole cell — the Delete button on Aliases has
      been doing this. Mailboxes was unaffected only because its row action is
      a link.
   2. The sign-in card's `.foot` sets text-align:center, and the panel `.foot`
      further up never unsets it, so every panel footer in the console has been
      quietly centred. Panels read left. */
button.rowbtn{width:auto}
td.right .rowbtn + .rowbtn{margin-left:6px}
.panel .foot{text-align:left}

/* ================================================================
   Screens added 2026-09-03: Domains, App passwords, Queue,
   Quarantine, Reputation. Same rule as everything above — nothing
   varies by inline style, because `style-src 'self'` drops style
   attributes silently and the quota bars taught us what that costs.
   ================================================================ */

/* minmax(0,...) rather than 1fr: a plain 1fr track cannot shrink below its
   content's min-content width, and one long address in a table then pushes the
   sidebar off the right of the page. */
.cols{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:18px;align-items:start}
.cols .panel + .panel{margin-top:18px}
@media(max-width:1020px){.cols{grid-template-columns:1fr}}

/* result chips: y = holds, p = holds but weaker than it could, n = missing */
.checks{display:flex;flex-wrap:wrap;gap:6px}
.chk{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;
  padding:3px 9px 3px 7px;border-radius:20px;border:1px solid transparent}
.chk svg{width:11px;height:11px;flex:none;fill:none;stroke:currentColor;stroke-width:2.8;
  stroke-linecap:round;stroke-linejoin:round}
.chk.y{background:var(--ok-soft);color:var(--ok);border-color:#bfe3d2}
.chk.p{background:#fdf3e0;color:#8a6100;border-color:#f2dfb8}
.chk.n{background:var(--bad-soft);color:var(--bad);border-color:#f6c9c4}

/* one authentication record, as a row of the checks table */
td.recname{width:120px;font-weight:600}
td.recval{font-family:var(--mono);font-size:12px;color:var(--ink2);word-break:break-all}
.rec{display:block;font-family:var(--mono);font-size:12px;line-height:1.6;background:#fafbfc;
  border:1px solid var(--line2);border-radius:8px;padding:10px 12px;color:var(--ink2);
  word-break:break-all;user-select:all}
.rec + .rec{margin-top:8px}

/* key and value list */
.kv{margin:0}
.kv > div{display:flex;gap:14px;align-items:baseline;justify-content:space-between;
  padding:10px 16px;border-bottom:1px solid var(--line2);font-size:13px}
.kv > div:last-child{border-bottom:0}
.kv dt{margin:0;color:var(--ink2)}
.kv dd{margin:0;text-align:right}
.kv dd .m{display:block;font-size:12px;color:var(--ink3);margin-top:2px;line-height:1.45}

/* spam score, always shown against the threshold that judged it */
.score{display:inline-flex;font-family:var(--mono);font-size:12px;font-weight:600;
  padding:2px 7px;border-radius:5px;background:#eef0f3;color:var(--ink2);
  font-variant-numeric:tabular-nums}
.score.ok{background:var(--ok-soft);color:var(--ok)}
.score.warn{background:#fdf3e0;color:#8a6100}
.score.bad{background:var(--bad-soft);color:var(--bad)}
.of{font-size:11.5px;color:var(--ink3);margin-left:5px}

.proto{display:inline-flex;font-size:10.5px;font-weight:600;letter-spacing:.04em;
  padding:2.5px 6px;border-radius:4px;background:#eef2f7;color:#4a5568;margin:0 4px 3px 0}

/* the empty state that most of these screens show most of the time */
.emptybig{padding:54px 24px;text-align:center}
.emptybig svg{width:34px;height:34px;color:#c3cad4;fill:none;stroke:currentColor;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.emptybig b{display:block;margin:13px 0 6px;font-size:15px;font-weight:600}
.emptybig p{margin:0 auto;max-width:460px;font-size:13px;color:var(--ink2);line-height:1.65}

.foot.act{display:flex;align-items:center;gap:10px}
.foot.act > span{margin-right:auto}
.foot.danger{background:#fdf6f5;border-top-color:#f6dedb;color:#8a2b22}

/* the sidebar note that explains a screen without a manual */
.aside{font-size:12.5px;color:var(--ink2);line-height:1.65;padding:14px 16px}
.aside p{margin:0 0 10px}
.aside p:last-child{margin:0}
.aside b{color:var(--ink)}
.aside code{font-family:var(--mono);font-size:12px;background:#f2f4f7;padding:1px 5px;border-radius:4px}

/* A countdown line, e.g. the warming window. The bar inside carries the same
   .qfill class the quota bars use, so there is one set of width steps to keep
   in step with rather than two. */
.meter{height:6px;background:#eceef1;border-radius:3px;overflow:hidden;margin:10px 0 7px}

.dir{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;
  color:var(--ink2)}
.dir svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.dir.out{color:var(--accent)}

td.subj{max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.when{font-size:12px;color:var(--ink3);font-variant-numeric:tabular-nums}
.qid{font-family:var(--mono);font-size:12px;color:var(--ink2)}

/* --- corrections found by screenshotting the five mockups before building --- */

/* A verdict chip must never break across two lines. */
.chk{white-space:nowrap}

/* Timestamps, row buttons and score cells hold their line rather than
   stacking into a column three words tall. */
.when,.rowbtn,td.right,td.sc{white-space:nowrap}

/* break-all splits words mid-letter; anywhere breaks only where it must. */
td.recval{word-break:normal;overflow-wrap:anywhere}
.rec{word-break:normal;overflow-wrap:anywhere}

/* .banner b is display:block for the heading; inside a paragraph it is emphasis. */
.banner p b{display:inline}

/* A narrow panel header wraps its note under the title instead of overflowing. */
.phead{flex-wrap:wrap}

/* A message cell: what it is on top, who it was between underneath, both
   clipped rather than wrapped. max-width:0 with width:100% is what makes an
   ellipsis work inside a table cell — the cell takes the leftover width and
   the two spans clip to it. */
td.msg{width:100%;max-width:0}
td.msg .s{display:block;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
td.msg .p{display:block;margin-top:2px;font-family:var(--mono);font-size:12px;color:var(--ink3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* A size or a duration is one word. */
.qtxt{white-space:nowrap}

/* The typed confirmation that guards a whole-queue delete. */
.foot.act form{display:flex;gap:8px;align-items:center;margin:0}
.foot.act input{width:160px;border:1px solid var(--line);border-radius:7px;padding:6px 10px;
  font:13px inherit;font-family:inherit;background:#fff;margin:0}