/* Empvr member account.
   Two chrome systems live in this file:
   1. Admin chrome (.ea-admin-body, .ea-header, .ea-main, .ea-card, ...) —
      the ORIGINAL protanopia-safe household-standard palette (header
      #0072B2 / white text, amber/teal/yellow/grey status). Used ONLY by
      the internal/admin surfaces (advisor.php, admin_activate.php,
      leader_login.php, leader_console.php) via ea_admin_header() — stays
      plain/functional by design, deliberately untouched by the 2026-07-23
      EARTHLY pass below.
   2. MEMBER chrome (.ea-earthly-body, .site-shell, .empvr-nav, ...) —
      WHITE canvas + Inter, heavy headings: the Home/Insights treatment.
      2026-08-02, Ramesh via Hub: "Go with the white and modern for all
      pages" — Option B of the harmony spec
      (OneDrive/AI/EmpvrMedia/empvr-harmony-spec-2026-08-02.html). This
      SUPERSEDES the 2026-05-29 EARTHLY cream-canvas decision; do not
      "correct" the canvas back to cream because an older doc says so.
      What survives from EARTHLY: teal #4a8b8b is still the PRIMARY action
      colour, tan #b8956e is still the secondary accent, navy #1e2a4a is
      still headings/text. Cream is now a CARD/SECTION tint only — exactly
      how the public Home page already uses it — never the page canvas.
      The .ea-* classnames keep their historical "earthly" spelling so the
      2026-08-02 diff stayed a pure style change; renaming them is a
      separate, riskier sweep across every php template.
      (Was, until 2026-08-02: cream canvas, Cormorant Garamond/Fraunces
      headings, per the approved mockup
      empvr-results-teaser-and-nav-mockup-2026-07-23.)
      Used by every member-facing page (results/signup/login/verify/
      account) via ea_header(). .ea-card/.ea-submit/inputs/.ea-flash/
      .ea-links/.ea-tag-* below are shared classnames restyled for this
      chrome so forms match the rest of the app — protanopia-safe status
      colors are preserved (amber/teal/yellow/grey, never red/green). */

:root {
  --ea-header: #0072B2;
  --ea-amber: #E69F00;
  --ea-blue-light: #D0E8FF;
  --ea-teal-light: #D0F4EC;
  --ea-yellow-light: #FFFACD;
  --ea-grey: #F0F0F0;
  --ea-text: #1a1a1a;
  --ea-border: #cfd8dc;

  --ea-cream: #f5f2eb;
  --ea-cream-dark: #ebe7dc;
  /* Card/field edges. #ebe7dc was designed to sit on a CREAM canvas; on the
     2026-08-02 white canvas it is all but invisible (1.06:1 against #fff).
     These are the public site's OWN values on white surfaces: #e8e2d6 is the
     Contact page's card border, #cfc3b0 its input border. */
  --ea-edge: #e8e2d6;
  --ea-field-border: #cfc3b0;
  /* Link colour on white. The old member link (--ea-gold-dark, underlined)
     read as an old-fashioned document; plain teal #4a8b8b is only 3.8:1 on
     white and fails AA for body text, so links use the DARK teal, 4.6:1. */
  --ea-link: #3f7a7a;
  --ea-navy: #1e2a4a;
  --ea-navy-light: #2d3d5e;
  --ea-accent: #4a8b8b;
  --ea-accent-light: #5a9e9e;
  --ea-accent-dark: #3f7a7a;
  --ea-gold: #b8956e;
  --ea-gold-light: #d4b896;
  --ea-gold-dark: #8a6d3a;
  /* --ea-gold-dark reaches only 4.34:1 on a cream card surface, so the tiny
     uppercase kicker labels that sit ON cream (.ea-journey-kind,
     .empvr-nav__group, results.php's .t-lib-label) were failing WCAG AA by
     0.16. Measured live in tests/e2e_white_modern_2026-08-02.py. This is the
     same hue two steps darker: 5.4:1 on cream, 7.4:1 on white. */
  --ea-gold-deep: #7a5f33;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ea-text);
  background: #fafbfc;
}

/* ---- admin chrome (unchanged, plain/functional by design) ---- */
.ea-header {
  background: var(--ea-header);
  color: #fff;
}
.ea-header-inner {
  max-width: 640px;
  margin: 0 auto;
  padding: 16px 20px;
}
.ea-brand {
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 20px;
}
.ea-main {
  max-width: 480px;
  margin: 0 auto;
  padding: 32px 20px;
}
.ea-footer {
  text-align: center;
  color: #888;
  font-size: 12px;
  padding: 24px;
}

/* ---- EARTHLY member chrome ---- */
/* font-size/line-height added 2026-08-02 (harmony quick-wins): the member
   body previously set NEITHER, so it inherited 16px/`normal` (~1.2) while the
   public site's theme body is line-height 1.6 and the assessment page runs
   18.4px body copy -- text visibly tightened and shrank the moment a visitor
   signed in. 17px is the spec's stated member minimum; the ported .empvr-nav
   sets its own explicit px sizes, so the chrome is unaffected and 1.6 actually
   makes the nav MORE identical to the public theme (which is also 1.6). */
/* Canvas + type = the public theme's own body rule (white, Inter, 1.6).
   DM Sans is no longer requested anywhere in this app. */
.ea-earthly-body {
  background: #fff;
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.6;
}
.site-shell { background: #fff; min-height: 100vh; }
.ea-earthly-main { max-width: 480px; margin: 0 auto; padding: 32px 20px 12px; }
.ea-earthly-main--wide { max-width: 840px; padding: 0; }
/* Roomier frame that KEEPS the normal side padding (unlike --wide, which is
   padding-less because results.php supplies its own). 2026-08-02: the
   activated account page was a 480px card marooned in a wide empty cream
   field on a laptop, reading as a modal dialog rather than a page of the
   site. 840px is the width the results page already uses successfully.
   Deliberately NOT applied to the not-yet-activated state, which renders the
   approved 2026-07-23 Look-B teaser that was designed around the 480px frame,
   nor to the login/signup/verify forms, where an 840px-wide single email
   field would be worse, not better. */
.ea-earthly-main--roomy { max-width: 840px; }
/* footer ported verbatim from the public theme (.empvr-site-footer) */
.empvr-site-footer {
  text-align: center; padding: 32px 24px; border-top: 1px solid #eee;
  font-size: 13px; color: #999; background: #fff;
}
.empvr-site-footer p { margin: 0; color: #999; }

/* Site chrome (.empvr-nav*) moved to assets/nav.css (2026-08-02).
   It is now loaded by BOTH the page shell and read.php, because the member
   nav had to reach the gated reads -- a member inside a read had no way back
   to the library except the browser back button. style.css cannot be used for
   that: it carries a bare `body {}` rule that would restyle the read page
   underneath the nav. One source, two consumers -- do not copy these rules
   back here. */
/* ---- shared card/form/status classnames, EARTHLY-recolored ---- */
.ea-card {
  background: #fff;
  border: 1px solid var(--ea-edge);
  border-radius: 14px;
  padding: 30px 26px;
  box-shadow: 0 4px 20px rgba(30,42,74,.06);
}
/* Headings = the Home/Insights treatment: Inter, weight 800 for the page
   heading, 700 for sub-headings. (was Cormorant Garamond/Fraunces 500.) */
.ea-earthly-body h1, .ea-earthly-body h2 {
  margin-top: 0;
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ea-navy);
  letter-spacing: -0.4px;
}
.ea-earthly-body h1 { font-size: 1.9rem; font-weight: 800; line-height: 1.2; }
.ea-earthly-body h2 { font-size: 1.35rem; font-weight: 700; line-height: 1.25; }
.ea-earthly-body p { color: #4a4a44; line-height: 1.6; }
.ea-admin-body h1, .ea-admin-body h2 { margin-top: 0; }
label {
  display: block;
  margin: 14px 0 6px;
  font-weight: 600;
  font-size: 14px;
}
/* Labels/links/notes explicitly opted OUT of the body scale at 14px, which is
   what made member text read a full step smaller than the public site even
   after the body was set. Bumped to 15px on the EARTHLY surfaces only — the
   admin chrome keeps its own compact 14px. */
.ea-earthly-body label { color: var(--ea-navy); font-size: 15px; line-height: 1.6; }
input[type=email], input[type=text], input[type=password], input[type=tel] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--ea-border);
  border-radius: 8px;
  font-size: 15px;
  font-family: inherit;
}
.ea-earthly-body input[type=email], .ea-earthly-body input[type=text],
.ea-earthly-body input[type=password], .ea-earthly-body input[type=tel] {
  border: 1px solid var(--ea-field-border);
  background: var(--ea-cream);
  font-size: 16px;
}
.ea-earthly-body input[type=email]:focus, .ea-earthly-body input[type=text]:focus,
.ea-earthly-body input[type=password]:focus, .ea-earthly-body input[type=tel]:focus {
  border-color: var(--ea-accent); background: #fff; outline: none;
}
/* 2026-08-10 (restore phone/preferred-contact): scoped to .ea-card only —
   a bare `select` rule would also restyle the admin dashboard's compact
   filter dropdowns (.ea-dash-filters select), which size themselves
   independently. */
.ea-card select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--ea-border);
  border-radius: 8px;
  font-size: 15px;
  font-family: inherit;
}
.ea-earthly-body .ea-card select {
  border: 1px solid var(--ea-field-border);
  background: var(--ea-cream);
  font-size: 16px;
}
.ea-earthly-body .ea-card select:focus {
  border-color: var(--ea-accent); background: #fff; outline: none;
}
.ea-pw-wrap { position: relative; }
.ea-pw-wrap input { padding-right: 48px; }
.ea-pw-toggle {
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ea-header);
  padding: 0;
}
.ea-earthly-body .ea-pw-toggle { color: var(--ea-gold-dark); }
.ea-remember {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0;
  font-weight: 400;
  font-size: 14px;
}
.ea-remember input { width: auto; }
.ea-remember-toggle {
  display: block;
  width: 100%;
  min-height: 44px;
  margin: 16px 0;
  padding: 10px 14px;
  border: 1px solid var(--ea-border);
  border-radius: 8px;
  background: #fff;
  color: var(--ea-text);
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.ea-remember-toggle.on {
  background: var(--ea-teal-light);
  border-color: var(--ea-accent, var(--ea-header));
  color: #1a1a1a;
}
.ea-earthly-body .ea-remember-toggle { border-color: var(--ea-field-border); background: var(--ea-cream); }
.ea-earthly-body .ea-remember-toggle.on { background: var(--ea-teal-light); border-color: var(--ea-accent-dark); }
.ea-header-remember {
  font-size: 12px;
  color: rgba(255,255,255,.9);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  text-decoration: underline;
}
/* font-family/line-height added 2026-08-02: a <button> does NOT inherit the
   page font, so every member <button class="ea-submit"> ("Save & Continue",
   "Continue") rendered in the UA default -- measured as Arial 15px on the live
   staging deployment, a typeface that appears nowhere else on Empvr. The
   sibling <a class="ea-submit"> ("Log out") always inherited correctly, which
   is why only the two real form buttons looked subtly off. */
button.ea-submit, a.ea-submit {
  display: inline-block;
  background: var(--ea-header);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 12px 20px;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.3;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  margin-top: 8px;
}
button.ea-submit:hover, a.ea-submit:hover { opacity: 0.92; }
/* PRIMARY member action = TEAL, per Ramesh's 2026-05-29 EARTHLY palette
   decision (teal = primary, tan = secondary accent). This was backwards:
   every public-site button is teal #4a8b8b and every button after the save
   point was tan #b8956e, which is the single clearest "I've left the website"
   signal in the whole journey. Teal also carries BETTER white-text contrast
   than the tan it replaces (3.9:1 vs 2.8:1). Genuinely secondary actions keep
   tan via .ea-submit--secondary below. */
.ea-earthly-body button.ea-submit, .ea-earthly-body a.ea-submit {
  background: var(--ea-accent);
  border-radius: 9px;
  box-shadow: 0 4px 12px rgba(74,139,139,.28);
  font-weight: 700;
}
.ea-earthly-body button.ea-submit:hover, .ea-earthly-body a.ea-submit:hover {
  background: var(--ea-accent-dark); opacity: 1;
}
/* Secondary action on an EARTHLY page — tan, the palette's secondary accent. */
.ea-earthly-body button.ea-submit--secondary, .ea-earthly-body a.ea-submit--secondary {
  background: var(--ea-gold);
  box-shadow: 0 4px 12px rgba(184,149,110,.3);
}
.ea-earthly-body button.ea-submit--secondary:hover, .ea-earthly-body a.ea-submit--secondary:hover {
  background: var(--ea-gold-dark);
}
/* Outlined secondary (e.g. verify.php's "Resend code") — sits beside a teal
   primary without competing with it. */
.ea-earthly-body button.ea-submit--ghost, .ea-earthly-body a.ea-submit--ghost {
  background: #fff;
  color: var(--ea-link);
  border: 1px solid var(--ea-field-border);
  box-shadow: none;
  font-weight: 600;
}
.ea-earthly-body button.ea-submit--ghost:hover, .ea-earthly-body a.ea-submit--ghost:hover {
  background: var(--ea-cream); border-color: var(--ea-gold); color: var(--ea-navy);
}
/* Quiet text link for a low-priority action that should never out-shout the
   page's real primary action (account.php's "Log out" was previously the
   loudest, most colourful element on the page). */
.ea-earthly-body .ea-quiet-link {
  display: inline-block;
  margin-top: 22px;
  background: none;
  border: 0;
  padding: 6px 0;
  font: inherit;
  font-size: 15px;
  color: var(--ea-gold-dark);
  text-decoration: underline;
  cursor: pointer;
}
.ea-earthly-body .ea-quiet-link:hover { color: var(--ea-navy); }
.ea-flash {
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: 14px;
}
.ea-flash-warn { background: var(--ea-amber); color: #1a1a1a; }
.ea-flash-info { background: var(--ea-teal-light); color: #1a1a1a; }
.ea-flash-notice { background: var(--ea-yellow-light); color: #1a1a1a; }
.ea-flash-neutral { background: var(--ea-grey); color: #1a1a1a; }
.ea-links { margin-top: 18px; font-size: 14px; }
.ea-earthly-body .ea-links { font-size: 15px; line-height: 1.6; }
.ea-links a { color: var(--ea-header); }
.ea-earthly-body .ea-links a { color: var(--ea-link); font-weight: 600; }
/* Unclassed body links inside an EARTHLY card (e.g. account.php's "Continue
   the journey" list) had no rule at all, so they fell through to the browser
   default blue/purple on a cream/navy/tan page. Pre-existing, not part of the
   c24742d5 regression, but it is the same raw-UA-link defect on the same
   surface. Scoped to :not([class]) so any anchor carrying its own class
   (buttons, tiles, nav) keeps its own styling. */
.ea-earthly-body .ea-card a:not([class]) { color: var(--ea-link); font-weight: 600; }
.ea-earthly-body .ea-card a:not([class]):hover { color: var(--ea-navy); }
table.ea-table { width: 100%; border-collapse: collapse; font-size: 14px; }
table.ea-table th { background: var(--ea-header); color: #fff; text-align: left; padding: 8px; }
table.ea-table td { padding: 8px; border-bottom: 1px solid var(--ea-border); }
.ea-tag-teal { background: var(--ea-teal-light); padding: 2px 8px; border-radius: 6px; font-size: 12px; }
.ea-tag-amber { background: var(--ea-amber); color: #1a1a1a; padding: 2px 8px; border-radius: 6px; font-size: 12px; }
.ea-tag-grey { background: var(--ea-grey); padding: 2px 8px; border-radius: 6px; font-size: 12px; }
.ea-tag-yellow { background: var(--ea-yellow-light); color: #1a1a1a; padding: 2px 8px; border-radius: 6px; font-size: 12px; }
.ea-saved-note {
  background: var(--ea-teal-light);
  border-radius: 8px;
  padding: 14px 16px;
  margin: 14px 0;
  font-size: 15px;
  line-height: 1.6;
}
.ea-saved-note p { line-height: 1.6; }

/* ---- "Continue the journey" cards (2026-08-02) --------------------------
   account.php previously rendered these as a bare <ul> of underlined links
   sitting UNDER a loud tan "Log out" button — the page's real primary action
   was its quietest element. Same title + one-line-description treatment the
   results page already uses for "Your Empvr Library" (.titem/.ttag/.ttitle/
   .tbenefit), which Ramesh's review called out as the model to copy. */
/* MEDIA / TOOLS group headings above each .ea-journey grid (2026-08-02 21:51).
   Same kicker language as .ea-journey-kind and the menu's .empvr-nav__subgroup,
   so the account page and the My Library menu group the same four items the
   same way and read as one system. */
.ea-journey-group {
  font-size: 10.5px; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ea-gold-deep);
  margin: 18px 0 6px;
}
.ea-journey-group:first-of-type { margin-top: 10px; }
.ea-journey { display: grid; gap: 12px; margin: 6px 0 4px; padding: 0; list-style: none; }
@media (min-width: 700px) { .ea-journey { grid-template-columns: 1fr 1fr; } }
.ea-journey-item {
  display: block;
  background: var(--ea-cream);
  border: 1px solid var(--ea-edge);
  border-left: 4px solid var(--ea-accent);
  border-radius: 10px;
  padding: 14px 16px;
  text-decoration: none;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.ea-journey-item:nth-child(2n) { border-left-color: var(--ea-gold); }
.ea-journey-item:hover {
  background: #fff;
  box-shadow: 0 4px 14px rgba(30,42,74,.08);
}
.ea-journey-kind {
  display: block;
  font-size: 10.5px; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ea-gold-deep);
}
.ea-journey-title {
  display: block;
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 19px; font-weight: 800; color: var(--ea-navy);
  line-height: 1.25; letter-spacing: -0.2px; margin: 2px 0 4px;
}
.ea-journey-desc {
  display: block;
  font-size: 14.5px; line-height: 1.55; color: #4a4a44; margin: 0;
}

/* ============================================================
   "Here's what's ahead" teaser — Look B, approved 2026-07-23.
   EARTHLY palette (cream/navy/teal/tan) for a tier-1, not-yet-
   activated member. Full-bleed dark panel breaking out of
   .ea-main's 20px side padding, still capped at the app's
   480px frame. Locks are a padlock glyph, never a red/green
   color cue (protanopia-safe).
   ============================================================ */
:root {
  --ea-teaser-navy: #1e2a4a;
  --ea-teaser-cream: #f5f2eb;
  --ea-teaser-gold: #b8956e;
  --ea-teaser-gold-light: #d4b896;
  --ea-teaser-accent: #4a8b8b;
}
.ea-teaser {
  background: var(--ea-teaser-navy);
  margin: 24px -20px 0;
  width: calc(100% + 40px);
  padding: 30px 20px 6px;
}
.ea-teaser-inner { max-width: 480px; margin: 0 auto; }
.ea-teaser h2 { color: #fff; font-size: 20px; margin: 0 0 6px; text-align: center; }
.ea-teaser-sub {
  color: #cfd6e4; font-size: 13.5px; text-align: center; margin: 0 auto 22px;
  max-width: 380px; line-height: 1.5;
}
.ea-teaser-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.ea-tile {
  background: var(--ea-teaser-cream);
  border-radius: 10px;
  overflow: hidden;
  border-top: 4px solid var(--ea-teaser-gold);
  display: flex;
  flex-direction: column;
}
.ea-tile:nth-child(2n) { border-top-color: var(--ea-teaser-accent); }
.ea-tile-shot-wrap { position: relative; }
.ea-tile-shot { width: 100%; height: auto; display: block; }
.ea-tile-lock {
  position: absolute; top: 6px; right: 6px;
  background: rgba(30, 42, 74, 0.78);
  color: #fff; font-size: 12px; line-height: 1;
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.ea-tile-body { padding: 10px 10px 14px; }
.ea-tile-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--ea-teaser-navy); color: #fff;
  font-size: 9.5px; font-weight: 700; margin-right: 5px;
}
.ea-tile-tag {
  font-size: 10.5px; font-weight: 700; color: var(--ea-teaser-navy);
  text-transform: uppercase; letter-spacing: .03em;
}
.ea-tile-benefit { font-size: 12.5px; line-height: 1.42; color: #2c2c2c; margin: 7px 0 0; }
.ea-teaser-cta { text-align: center; padding: 22px 10px 28px; }
.ea-teaser-cta p { color: #cfd6e4; font-size: 13px; margin: 0 0 12px; }
.ea-teaser-btn {
  display: inline-block; background: var(--ea-teaser-gold); color: var(--ea-teaser-navy);
  font-weight: 700; font-size: 15px; padding: 12px 30px; border-radius: 9px;
  text-decoration: none;
}
.ea-teaser-btn:hover { background: var(--ea-teaser-gold-light); }

@media (max-width: 480px) {
  .ea-teaser-grid {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%;
    overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }
  .ea-tile { scroll-snap-align: start; }
}

/* ── Leader/admin dashboard (2026-08-09 leader-dashboard build) ────────────── */
.ea-dash-sub { font-size: 14px; color: #555; margin: 4px 0 14px; }
.ea-dash-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 12px; }
.ea-dash-filters label { display: flex; flex-direction: column; font-size: 12px; font-weight: 600; gap: 3px; color: #333; }
.ea-dash-filters select, .ea-dash-filters input[type="text"] {
  font-size: 15px; padding: 7px 9px; border: 1px solid var(--ea-border); border-radius: 6px; min-height: 40px;
}
.ea-btn-sm { padding: 6px 10px !important; font-size: 13px !important; min-height: 36px; }
.ea-btn-amber { background: #fff !important; color: var(--ea-amber) !important; border: 1px solid var(--ea-amber) !important; }
.ea-btn-grey { background: #fff !important; color: #666 !important; border: 1px solid #ccc !important; }
.ea-dash-apply { align-self: flex-end; }
.ea-dash-export { align-self: flex-end; text-decoration: none; }
.ea-dash-count { font-size: 13px; color: #555; margin: 6px 0; }
.ea-dash-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ea-dash-table { min-width: 640px; }
.ea-dash-email { word-break: break-all; }
.ea-dash-empty { text-align: center; color: #666; padding: 18px 8px; }
.ea-dash-actions form { margin: 2px 2px 2px 0; }
.ea-assign-select { font-size: 13px; padding: 5px 7px; border: 1px solid var(--ea-border); border-radius: 6px; max-width: 220px; min-height: 34px; }
@media (max-width: 560px) {
  .ea-dash-filters { gap: 8px; }
  .ea-dash-filters label { flex: 1 1 45%; }
  /* Phone: the table becomes stacked cards so EVERY action (Activate/Extend,
     Deactivate, Assign) is reachable without horizontal scroll. */
  .ea-dash-scroll { overflow-x: visible; }
  .ea-dash-table { min-width: 0; }
  .ea-dash-table thead { position: absolute; left: -9999px; }  /* labels move to ::before */
  .ea-dash-table tbody tr {
    display: block; border: 1px solid var(--ea-border); border-radius: 10px;
    padding: 10px 12px; margin-bottom: 12px;
  }
  .ea-dash-table td {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 6px 0; border-bottom: 1px dotted #eee; text-align: right;
  }
  .ea-dash-table td:last-child { border-bottom: 0; }
  .ea-dash-table td::before {
    content: attr(data-label); font-weight: 600; color: #333; text-align: left; flex: 0 0 auto;
  }
  .ea-dash-table td.ea-dash-email { word-break: break-all; }
  .ea-dash-table td.ea-dash-actions { flex-wrap: wrap; justify-content: flex-end; }
  /* Assigned-to: stack label over a FULL-WIDTH select so the owning leader's
     email is never clipped (this column is the whole point of the admin view). */
  .ea-dash-table td[data-label="Assigned to"] { flex-direction: column; align-items: stretch; text-align: left; }
  .ea-dash-table td[data-label="Assigned to"]::before { margin-bottom: 4px; }
  .ea-dash-table td[data-label="Assigned to"] .ea-assign-form { width: 100%; }
  .ea-assign-select { max-width: 100%; width: 100%; }
  .ea-dash-empty { display: block !important; text-align: center; }
  .ea-dash-empty::before { content: ""; }
}

/* ── Leaders panel (admin promote/demote, 2026-08-09) ─────────────────────── */
.ea-leaders-panel { border: 1px solid var(--ea-border); border-radius: 10px; padding: 10px 12px; margin: 10px 0 14px; background: #fafafa; }
.ea-leaders-title { font-weight: 700; margin: 0; cursor: pointer; }
.ea-leaders-details[open] .ea-leaders-title { margin-bottom: 8px; }
.ea-leader-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px dotted #eee; }
.ea-leader-row:last-child { border-bottom: 0; }
.ea-leader-email { word-break: break-all; font-size: 14px; }