/**
 * Tour — the member's own inbox (walkthrough/screens/email.php). Prefix lem-.
 *
 * Two things live here and they must not be confused:
 *   1. THE MAIL CLIENT — plain, unbranded, nobody's real product: neutral slate
 *      and grey, system-ish type (Inter), no logo, no brand colour. Desk is a
 *      three-pane webmail; the phone is the list, then the message on its own.
 *   2. THE EMAIL — Laydn's own HTML, as laydn_email_wrapper()
 *      (handlers/15-accounts.php) inlines it: graphite #0a0a0a ground, LAYDN in
 *      volt Anta 28px, a white card (radius 14, padding 36/32, #222/#333 text,
 *      the email's own system font stack), Anta 24px heading, the volt button
 *      (Anta 15px/600, 14px 28px, radius 9), the #666 link line with a #3a7a00
 *      link, the #f4f4f4 footnote with a volt edge, the #666 11px footer.
 *      On a phone the product's own @media (max-width:600px) squares the card.
 *
 * ⚠️ Light client inside a dark site: every colour is explicit, on containers
 *    as well as leaves. style.css paints every <p> var(--muted) and sets h1-h6
 *    margins and Anta — every p and heading here is re-set, one class heavier
 *    than .lw-scaler h1/h2 (0,1,1).
 * ⚠️ .lem-scroll is the screen's .lw-main (the engine's scroll target); its
 *    reset is (0,4,0) so neither .lw-main nor .lw-scaler.is-hand .lw-main wins.
 * ⚠️ No transitions or animations: the engine drives every change.
 * ⚠️ Phone layout is .lw-scaler.is-hand only — never @media inside the stage.
 */

/* ---------- the client ---------- */
.lw-scaler .lem{
  position:relative; width:100%; height:100%; overflow:hidden;
  display:flex; flex-direction:column;
  background:#eef0f3; color:#1f2328;
  font-family:'Inter',system-ui,-apple-system,sans-serif; font-size:13px; line-height:1.45;
}
.lw-scaler .lem *{ box-sizing:border-box; }
.lw-scaler .lem p{ margin:0; color:inherit; }

/* top bar */
.lw-scaler .lem-top{
  position:relative; z-index:2; flex:none; height:58px; display:flex; align-items:center; gap:14px;
  padding:0 18px 0 12px; background:#fff; border-bottom:1px solid #e3e6ea; color:#1f2328;
}
.lw-scaler .lem-burger{ flex:none; width:38px; height:38px; display:grid; place-items:center; border-radius:50%; color:#5a6068; font-size:16px; }
.lw-scaler .lem-logo{ flex:none; width:182px; display:flex; align-items:center; gap:9px; color:#1f2328; }
.lw-scaler .lem-logo-ic{ width:30px; height:30px; border-radius:8px; display:grid; place-items:center; background:#334155; color:#fff; font-size:13px; }
.lw-scaler .lem-logo-ic i{ color:#fff; }
.lw-scaler .lem-logo-t{ font-size:18px; font-weight:600; letter-spacing:-.01em; color:#1f2328; }
.lw-scaler .lem-top-title{ display:none; }
.lw-scaler .lem-search{
  flex:0 1 560px; height:40px; display:flex; align-items:center; gap:11px; padding:0 16px;
  border-radius:10px; background:#f1f3f6; color:#8a909a; font-size:13.5px;
}
.lw-scaler .lem-search i{ color:#5a6068; font-size:13px; }
.lw-scaler .lem-search-t{ color:#8a909a; }
.lw-scaler .lem-top-r{ margin-left:auto; display:flex; align-items:center; gap:6px; }
.lw-scaler .lem-top-ic{ width:34px; height:34px; display:grid; place-items:center; border-radius:50%; color:#5a6068; font-size:15px; }
.lw-scaler .lem-me{
  width:34px; height:34px; margin-left:6px; border-radius:50%; display:grid; place-items:center;
  background:#5b6b7f; color:#fff; font-size:12px; font-weight:600; letter-spacing:.02em;
}

.lw-scaler .lem-main{ flex:1 1 auto; min-height:0; display:flex; }

/* folder rail (desk) */
.lw-scaler .lem-rail{
  flex:none; width:228px; display:flex; flex-direction:column; gap:2px; padding:14px 12px 16px;
  background:#eef0f3; color:#1f2328;
}
.lw-scaler .lem-compose{
  align-self:flex-start; display:inline-flex; align-items:center; gap:10px; height:46px; padding:0 20px; margin:0 0 12px 2px;
  border-radius:14px; background:#fff; border:1px solid #dfe3e8; box-shadow:0 1px 2px rgba(15,18,22,.06);
  font-size:13.5px; font-weight:600; color:#1f2328;
}
.lw-scaler .lem-compose i{ color:#334155; font-size:13px; }
.lw-scaler .lem-fold{ display:flex; align-items:center; gap:14px; height:34px; padding:0 14px; border-radius:17px; font-size:13.5px; color:#3d444d; }
.lw-scaler .lem-fold span{ color:inherit; }
.lw-scaler .lem-fold i{ width:16px; text-align:center; font-size:13.5px; color:#5a6068; }
.lw-scaler .lem-fold.is-on{ background:#dde3ec; color:#111418; font-weight:600; }
.lw-scaler .lem-fold.is-on i{ color:#111418; }
.lw-scaler .lem-acct{ margin-top:auto; padding:10px 14px 0; font-size:11.5px; color:#8a909a; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* the message list */
.lw-scaler .lem-list{
  flex:none; width:400px; min-height:0; overflow:hidden; display:flex; flex-direction:column;
  background:#fff; border-left:1px solid #e3e6ea; border-right:1px solid #e3e6ea; color:#1f2328;
}
.lw-scaler .lem-list-head{ flex:none; display:flex; align-items:center; justify-content:space-between; padding:14px 18px 11px; border-bottom:1px solid #eef0f3; }
.lw-scaler .lem-list-t{ font-size:16px; font-weight:600; color:#111418; }
.lw-scaler .lem-list-f{ font-size:12px; color:#8a909a; }
.lw-scaler .lem-list-f i{ margin-left:3px; font-size:9px; color:#8a909a; }
/* position + overflow keep the engine's tap ripple inside the row */
.lw-scaler .lem-row{
  position:relative; overflow:hidden; display:flex; align-items:flex-start; gap:12px;
  padding:12px 18px 12px 18px; background:#fff; border-bottom:1px solid #eef0f3; color:#1f2328;
}
.lw-scaler .lem-row.is-sel{ background:#e8edf4; box-shadow:inset 3px 0 0 #334155; }
.lw-scaler .lem-row.lw-hover{ background:#f3f5f8; }
.lw-scaler .lem-row.is-sel.lw-hover{ background:#e8edf4; }
.lw-scaler .lem-row.lw-rippling::after{ background:rgba(51,65,85,var(--lw-ripple-o,0)); }
.lw-scaler .lem-av{
  flex:none; width:36px; height:36px; border-radius:50%; display:grid; place-items:center;
  background:#6b7c93; color:#fff; font-size:12.5px; font-weight:600; letter-spacing:.02em; line-height:1;
}
/* the client's own tints — muted, none of them anybody's brand */
.lw-scaler .lem-av.is-laydn{ background:#3d4a5c; }
.lw-scaler .lem-av.is-t1{ background:#6b7c93; }
.lw-scaler .lem-av.is-t2{ background:#8a6fa8; }
.lw-scaler .lem-av.is-t3{ background:#5f9e8f; }
.lw-scaler .lem-av.is-t4{ background:#b8805a; }
.lw-scaler .lem-av.is-t5{ background:#7d8f4e; }
.lw-scaler .lem-av.is-t6{ background:#a8687a; }
.lw-scaler .lem-row-b{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
.lw-scaler .lem-row-top{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.lw-scaler .lem-from{ min-width:0; font-size:13.5px; color:#3d444d; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lw-scaler .lem-when{ flex:none; font-size:11.5px; color:#8a909a; }
.lw-scaler .lem-row-subj{ margin-top:1px; font-size:13px; color:#3d444d; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lw-scaler .lem-row-snip{ margin-top:1px; font-size:12.5px; color:#8a909a; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lw-scaler .lem-row.is-unread .lem-from,
.lw-scaler .lem-row.is-unread .lem-row-subj{ font-weight:700; color:#111418; }
.lw-scaler .lem-row.is-unread .lem-when{ font-weight:600; color:#334155; }
.lw-scaler .lem-udot{ position:absolute; left:6px; top:50%; width:7px; height:7px; margin-top:-3.5px; border-radius:50%; background:#334155; }

/* the reading pane */
.lw-scaler .lem-pane{
  position:relative; flex:1 1 auto; min-width:0; min-height:0; overflow:hidden;
  display:flex; flex-direction:column; background:#fff; color:#1f2328;
}
.lw-scaler .lem-empty{
  flex:1 1 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  background:#f7f8fa; color:#8a909a; font-size:13.5px;
}
.lw-scaler .lem-empty i{ font-size:40px; color:#c3c9d1; }
.lw-scaler .lem-empty span{ color:#8a909a; }
.lw-scaler .lem-read{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; background:#fff; color:#1f2328; }
.lw-scaler .lem-read-bar{
  flex:none; height:48px; display:flex; align-items:center; gap:10px; padding:0 22px;
  border-bottom:1px solid #eef0f3; background:#fff; color:#5a6068;
}
.lw-scaler .lem-back{
  display:none; width:38px; height:38px; place-items:center; border-radius:50%;
  position:relative; overflow:hidden; color:#1f2328; font-size:17px;
}
.lw-scaler .lem-back i{ color:#1f2328; }
.lw-scaler .lem-tools{ display:flex; align-items:center; gap:22px; font-size:14px; color:#5a6068; }
.lw-scaler .lem-tools i{ color:#5a6068; }
.lw-scaler .lem-clip{ position:relative; flex:1 1 auto; min-height:0; overflow:hidden; background:#fff; }
.lw-scaler .lem .lem-scroll.lw-main{ flex:none; min-width:0; padding:0 0 32px; background:#fff; color:#1f2328; will-change:transform; }

/* message header */
.lw-scaler .lem-msg-head{ padding:18px 28px 16px; background:#fff; color:#1f2328; }
.lw-scaler .lem-subj-row{ display:flex; align-items:flex-start; gap:10px; margin-bottom:14px; }
.lw-scaler .lem .lem-subj{
  margin:0; font-family:'Inter',system-ui,-apple-system,sans-serif; font-weight:600; font-size:20px;
  line-height:1.3; letter-spacing:-.01em; color:#111418;
}
.lw-scaler .lem-tag{ flex:none; margin-top:4px; padding:2px 7px; border-radius:5px; background:#eef0f3; font-size:11px; font-weight:600; color:#3d444d; }
.lw-scaler .lem-sender{ display:flex; align-items:center; gap:12px; }
.lw-scaler .lem-sender .lem-av{ width:40px; height:40px; font-size:15px; }
.lw-scaler .lem-sender-b{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
.lw-scaler .lem-sender-n{ font-size:14px; font-weight:700; color:#111418; }
.lw-scaler .lem-sender-to{ font-size:12px; color:#5a6068; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lw-scaler .lem-sender-r{ flex:none; display:flex; align-items:center; gap:16px; font-size:12px; color:#8a909a; }
.lw-scaler .lem-sender-when{ color:#8a909a; }
.lw-scaler .lem-sender-r i{ font-size:14px; color:#5a6068; }

/* ---------- the email: laydn_email_wrapper(), as inlined ---------- */
.lw-scaler .lem-canvas{ margin:0 28px; padding:30px 16px; background:#0a0a0a; color:#222; }
.lw-scaler .lem-col{ max-width:600px; margin:0 auto; }
.lw-scaler .lem-brand{
  padding:0 4px 24px; font-family:'Anta',Arial,sans-serif; font-size:28px; line-height:1.2;
  letter-spacing:.04em; color:#C8F135;
}
.lw-scaler .lem-card{
  padding:36px 32px; border-radius:14px; background:#fff; color:#222;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
.lw-scaler .lem .lem-h{
  margin:0 0 16px; font-family:'Anta',Arial,sans-serif; font-weight:400; font-size:24px; line-height:1.2;
  letter-spacing:-.01em; color:#0a0a0a;
}
.lw-scaler .lem-intro{ font-size:15px; line-height:1.6; color:#333; }
/* an email client's default paragraph: 1em top and bottom, collapsing */
.lw-scaler .lem .lem-p{ margin:15px 0; color:#333; }
.lw-scaler .lem .lem-p strong{ font-weight:700; color:#333; }
.lw-scaler .lem .lem-p.is-route{ font-size:17px; font-weight:700; color:#14161a; }
.lw-scaler .lem .lem-p.is-note{ padding:12px 14px; border-radius:8px; background:#f7f8fa; }
.lw-scaler .lem-cta-row{ margin:28px 0; }
.lw-scaler .lem-cta{
  display:inline-block; position:relative; overflow:hidden; padding:14px 28px; border-radius:9px;
  background:#C8F135; color:#0a0a0a; font-family:'Anta',Arial,sans-serif; font-size:15px; font-weight:600;
  line-height:1.2; letter-spacing:.02em;
}
/* the engine's ripple is volt — invisible on a volt button. Ink it instead. */
.lw-scaler .lem-cta.lw-rippling::after{ background:rgba(10,10,10,var(--lw-ripple-o,0)); }
.lw-scaler .lem .lem-link{ margin:0 0 18px; font-size:12px; line-height:1.5; color:#666; word-break:break-all; }
.lw-scaler .lem .lem-link span{ color:#3a7a00; }
.lw-scaler .lem .lem-footnote{
  margin:24px 0 0; padding:14px 16px; background:#f4f4f4; border-left:3px solid #C8F135;
  font-size:12px; line-height:1.55; color:#555;
}
.lw-scaler .lem-foot{
  padding:24px 8px; text-align:center; font-size:11px; line-height:1.6; color:#666;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
.lw-scaler .lem-foot-a{ color:#C8F135; }
.lw-scaler .lem-prefs{ color:#C8F135; text-decoration:underline; }

/* the phone's compose button: phone only */
.lw-scaler .lem-fab{ display:none; }

/* =====================================================================
 * PHONE — .lw-scaler.is-hand (420 x 760). The list fills the screen; the
 * opened email covers it, top bar included, with a back arrow — the way a
 * phone mail app works. The card squares off as the product's own
 * @media (max-width:600px) rule does.
 * ===================================================================== */
.lw-scaler.is-hand .lem-top{ height:56px; gap:6px; padding:0 12px 0 6px; }
.lw-scaler.is-hand .lem-logo{ display:none; }
.lw-scaler.is-hand .lem-top-title{ display:block; flex:1 1 auto; min-width:0; font-size:19px; font-weight:600; letter-spacing:-.01em; color:#111418; }
.lw-scaler.is-hand .lem-search{ flex:none; width:38px; height:38px; padding:0; justify-content:center; border-radius:50%; background:transparent; }
.lw-scaler.is-hand .lem-search i{ font-size:16px; color:#3d444d; }
.lw-scaler.is-hand .lem-search-t{ display:none; }
.lw-scaler.is-hand .lem-top-r{ margin-left:0; }
.lw-scaler.is-hand .lem-top-ic{ display:none; }
.lw-scaler.is-hand .lem-me{ margin-left:2px; }

.lw-scaler.is-hand .lem-main{ position:static; }
.lw-scaler.is-hand .lem-rail{ display:none; }
.lw-scaler.is-hand .lem-list{ flex:1 1 auto; width:auto; border-left:0; border-right:0; }
.lw-scaler.is-hand .lem-list-head{ display:none; }
.lw-scaler.is-hand .lem-row{ padding:13px 16px 13px 20px; }
.lw-scaler.is-hand .lem-av{ width:40px; height:40px; font-size:14px; }
.lw-scaler.is-hand .lem-udot{ left:7px; }

.lw-scaler.is-hand .lem-pane{ position:static; flex:none; width:0; min-width:0; overflow:visible; }
.lw-scaler.is-hand .lem-empty{ display:none; }
.lw-scaler.is-hand .lem-read{ position:absolute; left:0; top:0; right:0; bottom:0; z-index:10; }
.lw-scaler.is-hand .lem-read-bar{ height:56px; padding:0 14px 0 6px; justify-content:space-between; }
.lw-scaler.is-hand .lem-back{ display:grid; }
.lw-scaler.is-hand .lem-tools{ gap:20px; }
.lw-scaler.is-hand .lem-msg-head{ padding:14px 16px 14px; }
.lw-scaler.is-hand .lem .lem-subj{ font-size:18px; }
.lw-scaler.is-hand .lem-sender-r i{ display:none; }
.lw-scaler.is-hand .lem-canvas{ margin:0; }
.lw-scaler.is-hand .lem-card{ border-radius:0; }

.lw-scaler.is-hand .lem-fab{
  position:absolute; right:18px; bottom:22px; z-index:5; display:grid; place-items:center;
  width:56px; height:56px; border-radius:16px; background:#334155; color:#fff; font-size:18px;
  box-shadow:0 8px 20px rgba(15,18,22,.24);
}
.lw-scaler.is-hand .lem-fab i{ color:#fff; }