/* Email security — the customer page.
 *
 * Branded on the portal's own palette: navy #0b3777, blue #23519e, teal #00f1b6. Light and dark aware via
 * tokens, so every colour has one definition and the dark block only swaps values.
 *
 * COLOUR IS NEVER THE ONLY SIGNAL. Every pill carries its state as words, every chart has a text
 * alternative, and the three tones are also distinguishable by position and label. That is why the good and
 * bad tones are not simply green and red at the same lightness.
 */
.es { --es-navy:#0b3777; --es-blue:#23519e; --es-teal:#00f1b6; --es-link:#23519e;
  --es-good:#1c7a55; --es-warn:#b5811f; --es-bad:#a8393c; --es-neutral:#818a96;
  --es-track:#e6e8ea; --es-line:#23519e;
  --es-card:#ffffff; --es-ink:#222429; --es-muted:#6b7480; --es-rule:#e6e8ea; --es-tint:#f4f6fa;
  display:flex; flex-direction:column; gap:1rem; color:var(--es-ink);
}
/* The dark values. They follow the PAGE's theme (data-theme on <html>, set by /portal/theme.mjs while UI_DARK_MODE is
 * on), not the device on its own: until 3 Oct 2026 they followed prefers-color-scheme directly, so a reader whose device
 * was set to dark got dark cards inside an otherwise light portal. */
[data-theme="dark"] .es {
  --es-card:#161a20; --es-ink:#e8eaee; --es-muted:#98a1ad; --es-rule:#2a303a; --es-tint:#1b2028;
  --es-track:#2a303a; --es-good:#3fbf8f; --es-warn:#e0a94a; --es-bad:#e2777a; --es-line:#6f9be0; --es-link:#8db1f2; }
.es-muted { color:var(--es-muted); }
.es-small { font-size:.82rem; }
.es-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

.es-panel, .es-hero, .es-figures, .es-card { background:var(--es-card); border:1px solid var(--es-rule);
  border-radius:.75rem; padding:1.1rem 1.2rem; }
/* The portal's panels since 3 Oct 2026 (docs/brand.md): rounder, with the same soft shadow. Inner domain cards stay flatter. */
.es-panel, .es-hero, .es-figures { border-radius:14px; padding:1.3rem 1.45rem; box-shadow:var(--shadow-card, none); }
.es-card { border-radius:10px; }
.es-panel h3, .es-hero h2 { margin:0 0 .4rem; }
.es-panel-head { display:flex; align-items:baseline; gap:1rem; flex-wrap:wrap; margin-bottom:.8rem; }
.es-panel-head h3 { flex:1 1 auto; }

/* Hero: the sentence leads, the ring supports it. A score is not an answer to "are we safe". */
.es-hero { display:flex; gap:1.4rem; align-items:center; flex-wrap:wrap;
  background:linear-gradient(135deg, var(--es-navy), var(--es-blue)); border-color:transparent; color:#fff; }
.es-hero h2 { color:#fff; }
.es-hero-text { flex:1 1 20rem; }
.es-headline { font-size:1.08rem; line-height:1.5; margin:.2rem 0 .5rem; }
.es-hero .es-muted { color:rgba(255,255,255,.78); }
.es-hero-ring { display:flex; flex-direction:column; align-items:center; gap:.5rem; }
.es-ring-text { font-weight:700; fill:var(--es-ink); }
.es-hero .es-ring-text { fill:#fff; }
.es-hero .es-ring circle:first-child { stroke:rgba(255,255,255,.25); }


.es-figures { display:grid; grid-template-columns:repeat(auto-fit, minmax(8.5rem, 1fr)); gap:.9rem; }
.es-fig b, .es-stat b { display:block; font-size:1.5rem; line-height:1.15; color:var(--es-ink); }
/* The website's figures: League Spartan, heavy, in the heading colour. */
.es-fig b, .es-stat b { font-family:var(--heading-font, inherit); font-weight:800; font-size:1.7rem; letter-spacing:-.01em; color:var(--heading, var(--es-ink)); }
.es-fig span, .es-stat span { color:var(--es-muted); font-size:.8rem; }

.es-pill { display:inline-block; padding:.12rem .55rem; border-radius:999px; font-size:.78rem; white-space:nowrap;
  border:1px solid var(--es-rule); background:var(--es-tint); color:var(--es-ink); }
.es-pill.good { background:color-mix(in srgb, var(--es-good) 12%, transparent); border-color:var(--es-good); color:var(--es-good); }
.es-pill.warn { background:color-mix(in srgb, var(--es-warn) 12%, transparent); border-color:var(--es-warn); color:var(--es-warn); }
.es-pill.bad  { background:color-mix(in srgb, var(--es-bad) 12%, transparent); border-color:var(--es-bad); color:var(--es-bad); }

/* On the navy hero a tinted pill is dark-on-dark and barely legible. Solid white ground, tone in the
   text. Defined AFTER the tone rules and matching the tone class, because .es-hero .es-pill alone has the
   same specificity as .es-pill.bad and lost on source order — which is exactly how the first attempt at
   this changed nothing on screen. */
.es-hero .es-pill, .es-hero .es-pill.good, .es-hero .es-pill.warn, .es-hero .es-pill.bad {
  background:#fff; border-color:transparent; font-weight:600; }
.es-hero .es-pill.good { color:#14603f; }
.es-hero .es-pill.warn { color:#7a5512; }
.es-hero .es-pill.bad { color:#8d2f31; }

.es-toggle { display:flex; gap:.25rem; }
.es-toggle button { font:inherit; font-size:.82rem; padding:.25rem .7rem; border:1px solid var(--es-rule);
  background:var(--es-card); color:var(--es-ink); border-radius:999px; cursor:pointer; }
.es-toggle button.on { background:var(--es-blue); border-color:var(--es-blue); color:#fff; }

.es-split { display:grid; grid-template-columns:minmax(12rem,auto) 1fr; gap:1.4rem; align-items:center; }
@media (max-width: 640px) { .es-split { grid-template-columns:1fr; } .es-hero { text-align:left; } }
.es-donut-wrap { display:flex; gap:1rem; align-items:center; flex-wrap:wrap; }
.es-donut-big { font-size:1.5rem; font-weight:700; fill:var(--es-ink); }
.es-donut-small { font-size:.62rem; fill:var(--es-muted); }
.es-legend { list-style:none; margin:0; padding:0; font-size:.86rem; }
.es-legend li { display:flex; align-items:center; gap:.45rem; margin:.2rem 0; }
.es-legend b { margin-left:.2rem; }
.es-swatch { width:.7rem; height:.7rem; border-radius:.2rem; display:inline-block; }
.es-swatch.good { background:var(--es-good); } .es-swatch.bad { background:var(--es-bad); }

.es-bars { width:100%; border-collapse:collapse; font-size:.86rem; }
.es-bars th { text-align:left; font-weight:500; padding:.2rem .6rem .2rem 0; color:var(--es-ink);
  white-space:nowrap; max-width:11rem; overflow:hidden; text-overflow:ellipsis; }
.es-bar-cell { width:100%; }
.es-bar-track { background:var(--es-track); border-radius:999px; height:.5rem; }
.es-bar { height:.5rem; border-radius:999px; background:var(--es-line); }
.es-bar.good { background:var(--es-good); } .es-bar.bad { background:var(--es-bad); }
.es-bar-value { text-align:right; padding-left:.6rem; white-space:nowrap; font-variant-numeric:tabular-nums; }
.es-spark { margin:0 0 .9rem; padding:.6rem .7rem; background:var(--es-tint); border-radius:.5rem; }
.es-spark svg { width:100%; height:4rem; display:block; }
.es-spark-title { font-weight:600; font-size:.86rem; margin-bottom:.2rem; color:var(--es-ink); }
.es-spark p { margin:.3rem 0 0; }
.es-note { margin:.9rem 0 0; padding-top:.8rem; border-top:1px solid var(--es-rule); color:var(--es-muted); font-size:.84rem; }

.es-card { padding:0; overflow:hidden; margin-bottom:.6rem; }
.es-card-head { display:flex; align-items:center; gap:.7rem; width:100%; text-align:left; font:inherit;
  background:none; border:0; padding:.8rem 1rem; cursor:pointer; color:var(--es-ink); }
.es-card-head:hover { background:var(--es-tint); }
.es-card-head:focus-visible { outline:2px solid var(--es-line); outline-offset:-2px; }
.es-card-title { flex:1 1 auto; display:flex; flex-direction:column; }
.es-domain { font-weight:600; }
.es-chev { color:var(--es-muted); font-size:1.1rem; width:1rem; text-align:center; }
.es-card-body { padding:0 1rem 1rem; border-top:1px solid var(--es-rule); }
/* At phone widths the domain name, the state pill, the mini ring and the chevron do not fit on one line,
   and it was the CHEVRON that got pushed out — losing the only visible affordance for closing the card
   again. The ring goes instead: the pill already carries the state in words, and the score is inside. */
@media (max-width: 560px) {
  .es-card-head .es-ring { display:none; }
  .es-card-head { gap:.5rem; }
  .es-card-head .es-pill { white-space:normal; }
}
.es-card-body > p:first-child { margin-top:.8rem; }
.es-mechs { list-style:none; margin:.6rem 0; padding:0; display:grid; gap:.4rem; }
.es-mechs li { display:grid; grid-template-columns:auto minmax(9rem,auto) 1fr; gap:.6rem; align-items:baseline; }
@media (max-width: 560px) { .es-mechs li { grid-template-columns:auto 1fr; } .es-mechs li .es-small { grid-column:1/-1; } }
.es-mech-label { font-weight:500; }
.es-detail { margin:.7rem 0; display:grid; gap:.35rem; }
.es-detail p { margin:0; }
.es-card-figures { display:flex; gap:1.4rem; flex-wrap:wrap; margin:.8rem 0; }

.es-ladder ol { list-style:none; margin:.4rem 0; padding:0; display:grid; gap:.5rem; }
.es-step { display:grid; grid-template-columns:auto 1fr; gap:.6rem; align-items:baseline; color:var(--es-muted); }
.es-step .es-step-name { color:var(--es-muted); font-weight:500; }
.es-step.reached .es-step-name { color:var(--es-ink); }
.es-step-dot { width:.7rem; height:.7rem; border-radius:50%; border:2px solid var(--es-track); margin-top:.35rem; }
.es-step.reached .es-step-dot { background:var(--es-good); border-color:var(--es-good); }
.es-step.here .es-step-dot { box-shadow:0 0 0 3px color-mix(in srgb, var(--es-good) 25%, transparent); }
.es-step .es-small { grid-column:2; }
.es-here { font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--es-good); }
.es-next { margin-top:.6rem; padding:.7rem .8rem; background:var(--es-tint); border-radius:.5rem; }
.es-next p { margin:.2rem 0; }

.es-actions { list-style:none; margin:.4rem 0 0; padding:0; display:grid; gap:.6rem; }
.es-actions li { display:grid; grid-template-columns:auto 1fr; gap:.7rem; align-items:baseline; }
@media (max-width: 560px) { .es-actions li { grid-template-columns:1fr; } }

.es-disclose { font:inherit; font-weight:500; background:none; border:0; padding:0; cursor:pointer; color:var(--es-link); }
.es-explain dl { margin:.7rem 0 .4rem; display:grid; grid-template-columns:minmax(9rem,auto) 1fr; gap:.3rem .9rem; }
.es-explain dt { font-weight:600; } .es-explain dd { margin:0; color:var(--es-muted); }
@media (max-width: 560px) { .es-explain dl { grid-template-columns:1fr; } .es-explain dd { margin-bottom:.4rem; } }

.es-controls { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
.es-controls input, .es-controls select { font:inherit; font-size:.86rem; padding:.28rem .5rem;
  border:1px solid var(--es-rule); border-radius:.4rem; background:var(--es-card); color:var(--es-ink); }
.es-sr-label { display:contents; }

.es-skeleton { display:grid; gap:1rem; }
.es-skel-block { height:6rem; border-radius:.75rem; background:linear-gradient(90deg, var(--es-tint), var(--es-track), var(--es-tint));
  background-size:200% 100%; animation:es-shimmer 1.4s infinite linear; }
.es-skel-block:first-child { height:9rem; }
@keyframes es-shimmer { from { background-position:200% 0; } to { background-position:-200% 0; } }
@media (prefers-reduced-motion: reduce) { .es-skel-block { animation:none; } }

.es-print { text-align:right; margin:0; }
.es-print-btn { font:inherit; font-size:.86rem; padding:.4rem .9rem; border:1px solid var(--es-rule);
  background:var(--es-card); color:var(--es-ink); border-radius:.5rem; cursor:pointer; }

/* Print: every card open, nothing interactive, ink-friendly. A saved PDF has to be complete — a reader
   cannot expand a card on paper. */
@media print {
  .es-hero { background:none !important; color:#000; border:1px solid #999; }
  .es-hero h2, .es-hero .es-muted { color:#000; }
  .es-ring-text { fill:#000; }
  .es-card-body[hidden] { display:block !important; }
  .es-chev, .es-toggle, .es-controls, .es-print, .es-disclose { display:none !important; }
  .es-explain [hidden] { display:block !important; }
  .es-panel, .es-card, .es-figures { break-inside:avoid; border-color:#999; }
  .es { gap:.6rem; }
}