/* ═══════════════════════════════════════════════════════════════════════
   ems.css — EMS US Transition Hub skin.
   Additive layer over styles.css (Career Hub) + coaching.css. Brings the
   VisionOne "Unstoppable" design polish (Oswald condensed display type,
   crisp cards, pill accents) dressed in EMS US navy #2A3890 / red #BE1E2D.
   Theme colors themselves come from the tenant (applied as CSS vars by app.js).
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  --ems-navy: #2A3890;
  --ems-navy-deep: #162063;
  --ems-red: #BE1E2D;
  --primary-tint: #eef1fb;
  --ems-display: "Oswald", "Arial Narrow", system-ui, sans-serif;
}

/* ── Unstoppable-style display type on headings ─────────────────────────── */
.topbar h1, .card h2, .card h3, .brand-title {
  font-family: var(--ems-display) !important;
  letter-spacing: .01em;
  font-weight: 600;
}
.topbar h1 { text-transform: uppercase; }
.nav-group { text-transform: uppercase; letter-spacing: .06em; }

/* ── Top banner: logo + powered-by, EMS red hairline ────────────────────── */
.app-topbar { display: flex; align-items: center; gap: 14px; border-bottom: 3px solid var(--ems-red); }
.app-topbar-logo { height: 40px; width: auto; }
.app-topbar-powered { font-family: var(--ems-display); font-size: 20px; letter-spacing: .01em; color: var(--ems-navy); font-weight: 700; }
@media (max-width: 720px) { .app-topbar-powered { font-size: 15px; } }
@media (max-width: 640px) { .app-topbar-powered { display: none; } }

/* ── Sidebar brand + Powered-by-VisionOne footer ────────────────────────── */
.brand-title { font-size: 22px; text-transform: uppercase; }
.brand-tag { font-size: 12px; opacity: .8; }
.powered-by {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.14);
  font-size: 11px; letter-spacing: .03em; color: rgba(255,255,255,.62); font-weight: 600;
}

/* ── Crisis banner (Veterans Crisis Line) — always visible where used ────── */
.crisis-banner {
  background: #fff4f4; border: 1px solid #f2c9cd; border-left: 4px solid var(--ems-red);
  color: #7a1420; border-radius: 10px; padding: 12px 16px; margin: 0 0 18px; font-size: 13.5px;
}
.crisis-banner b { color: var(--ems-red); }

/* ── Checkable rows (VA benefits, family, timeline) ─────────────────────── */
.checkrow { display: flex; align-items: flex-start; gap: 11px; padding: 9px 0; border-bottom: 1px solid var(--border, #e5e7eb); cursor: pointer; }
.checkrow:last-child { border-bottom: 0; }
.checkrow input[type=checkbox] { width: 18px; height: 18px; margin-top: 2px; flex: none; accent-color: var(--primary); cursor: pointer; }
.checkrow a { color: var(--accent); font-size: 12px; white-space: nowrap; }

/* ── Progress bar ───────────────────────────────────────────────────────── */
.progress { height: 9px; background: #e6e9f2; border-radius: 999px; overflow: hidden; }
.progress-bar { height: 100%; background: linear-gradient(90deg, var(--ems-navy), var(--accent, var(--ems-red))); border-radius: 999px; transition: width .3s ease; }

/* ── Stat tiles (financial calculator) ──────────────────────────────────── */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 18px; }
.stat { background: var(--surface); border: 1px solid var(--border, #e5e7eb); border-top: 3px solid var(--ems-navy); border-radius: 12px; padding: 18px; box-shadow: var(--wt-shadow-1, 0 1px 2px rgba(16,24,16,.06)); }
.stat-n { font-family: var(--ems-display); font-size: 30px; font-weight: 700; color: var(--ems-navy); line-height: 1; }
.stat-l { font-size: 12.5px; color: var(--muted, #6b7280); margin-top: 6px; }

/* ── Mentor dashboard: at-a-glance band ─────────────────────────────────────
   One dark panel carrying the single headline number, above the tiles that
   break it down. The panel is dark so the caseload summary reads as a header for
   the page rather than as one more card in a stack of cards.

   THE RING IS WHITE, NOT RED. The dashboard this is modeled on uses that
   brand's gold for the filled arc. EMS US has navy and red, and red means
   "attention" everywhere else in this app — the crisis banner, waiting-on-you,
   behind-pace, transitioning-now. Spending it on a neutral progress figure would
   make every dashboard look like something is wrong. Red stays for the one tile
   and callout where the alarm is real. */
.dash-hero {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; border: 0; color: #fff;
  background: linear-gradient(120deg, var(--ems-navy-deep), var(--ems-navy));
}
.dash-hero h2 { color: #fff; font-family: var(--ems-display); letter-spacing: .01em; }
.dash-hero .muted { color: rgba(255, 255, 255, .78); }
.dash-hero-main { flex: 1; min-width: 240px; }

/* conic-gradient arc with a knocked-out center — no SVG, no library. */
.dash-ring {
  flex: none; width: 118px; height: 118px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background:
    radial-gradient(closest-side, var(--ems-navy-deep) 79%, transparent 80%),
    conic-gradient(#fff calc(var(--pct, 0) * 1%), rgba(255, 255, 255, .22) 0);
}
.dash-ring-num { font-family: var(--ems-display); font-size: 30px; font-weight: 700; line-height: 1; }
.dash-ring-lbl { font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: rgba(255, 255, 255, .8); margin-top: 3px; }

/* These tiles are read, not clicked — so no hover lift and no pointer cursor,
   which would promise a drill-down that isn't there. */
.dash-metric { cursor: default; }

@media (max-width: 620px) {
  .dash-hero { justify-content: center; text-align: center; }
  .dash-ring { width: 100px; height: 100px; }
  .dash-ring-num { font-size: 26px; }
}

/* ── Chips (ATS keywords) ───────────────────────────────────────────────── */
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-row .chip, span.chip { display: inline-block; background: var(--primary-tint); color: var(--ems-navy-deep); border: 1px solid #d3daf3; border-radius: 999px; padding: 4px 12px; font-size: 12.5px; font-weight: 600; }

/* ── Timeline (transition countdown) ────────────────────────────────────── */
.timeline { position: relative; margin: 4px 0 0 8px; padding-left: 26px; }
.timeline::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px; background: #d7dcec; }
.tl-stage { position: relative; margin-bottom: 8px; }
.tl-dot { position: absolute; left: -26px; top: 16px; width: 12px; height: 12px; border-radius: 50%; background: #c3cae0; border: 2px solid var(--bg, #f4f6fb); }
.tl-stage.is-active .tl-dot { background: var(--ems-red); box-shadow: 0 0 0 4px rgba(190,30,45,.15); }
.tl-body { background: var(--surface); border: 1px solid var(--border, #e5e7eb); border-radius: 12px; padding: 12px 16px; box-shadow: var(--wt-shadow-1, 0 1px 2px rgba(16,24,16,.05)); }
.tl-stage.is-active .tl-body { border-color: var(--ems-navy); }
.tl-when { font-family: var(--ems-display); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; font-size: 14px; color: var(--ems-navy); margin-bottom: 6px; }
.tl-now { font-family: var(--wt-font-stack, sans-serif); background: var(--ems-red); color: #fff; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 999px; letter-spacing: .04em; margin-left: 6px; vertical-align: middle; }
.tl-badge { margin-top: 10px; font-size: 14px; color: var(--ems-navy-deep); }

/* ── Civilian culture guide ─────────────────────────────────────────────── */
.culture-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; margin-bottom: 18px; }
.culture-card { background: var(--surface); border: 1px solid var(--border, #e5e7eb); border-radius: 14px; padding: 18px; box-shadow: var(--wt-shadow-1, 0 1px 2px rgba(16,24,16,.06)); }
.culture-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.culture-ic { font-size: 22px; }
.culture-head h3 { margin: 0; font-size: 16px; }
.culture-row { display: flex; gap: 10px; margin: 6px 0; font-size: 13px; line-height: 1.45; }
.culture-tag { flex: none; width: 62px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 3px 0; text-align: center; height: fit-content; border-radius: 6px; }
.culture-tag.mil { background: var(--primary-tint); color: var(--ems-navy-deep); }
.culture-tag.civ { background: #fbeaec; color: #7a1420; }
.culture-do { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border, #eee); font-size: 13px; color: var(--text); }
.culture-do b { color: var(--ems-navy); }

/* ── De-Mil-ify output block ────────────────────────────────────────────── */
.dm-out { background: var(--soft, #f6f8f6); border: 1px solid var(--border, #e5e7eb); border-radius: 10px; padding: 16px; }

/* Buttons pick up EMS navy automatically via --primary; give ghost a navy hover.
   Matched on the class, not the element, so a link that acts like a button
   ("Book a call", the dashboard's mailto actions) hovers identically — see the
   note above the button block in styles.css. */
button.ghost:hover, a.ghost:hover { background: var(--primary-tint); border-color: #c3cae0; }

/* ── Inline SVG icons (replace emoji) ───────────────────────────────────── */
.ic { display: inline-block; vertical-align: -0.18em; flex: none; }
/* Runtime emoji→icon replacements: a 1em inline box the SVG fills, so it flows
   with text on one line and never balloons regardless of the SVG's own attrs. */
.ic-emoji { display: inline-block; width: 1em; height: 1em; vertical-align: -0.14em; line-height: 0; color: var(--ems-navy); }
.ic-emoji svg, .ic-emoji .ic { display: block; width: 100% !important; height: 100% !important; }
/* On dark surfaces (sidebar, active tabs) inherit the light text color instead */
.sidebar .ic-emoji, .tabbar button.active .ic-emoji, .coach-tab.is-active .ic-emoji, button.primary .ic-emoji, .btn:not(.ghost) .ic-emoji { color: currentColor; }
/* Nav rows: icon + label aligned */
#nav a { display: flex; align-items: center; gap: 10px; }
.nav-ic { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; opacity: .92; flex: none; }
.nav-ic .ic { width: 18px; height: 18px; }
.nav-lbl { flex: 1; min-width: 0; }
/* Icons inside headings/buttons inherit text color; nudge baseline */
h1 .ic, h2 .ic, h3 .ic, button .ic, .btn .ic, summary .ic { vertical-align: -0.15em; margin-right: 4px; }
/* Card-heading leading icon accent (navy) */
.card h2 .ic, .card h3 .ic { color: var(--ems-navy); }

/* ── Resource list (branded rows) ───────────────────────────────────────── */
.res-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.res-item { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; padding: 12px 14px; border: 1px solid var(--border, #e5e7eb); border-left: 3px solid var(--ems-navy); border-radius: 10px; background: var(--surface, #fff); transition: border-color .15s, box-shadow .15s, transform .08s; }
.res-item:hover { border-color: var(--ems-navy); border-left-color: var(--ems-red); box-shadow: var(--wt-shadow-1, 0 4px 14px rgba(16,24,16,.07)); transform: translateY(-1px); }
.res-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.res-item-title { font-weight: 700; font-size: 14px; color: var(--ems-navy-deep); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.res-item-tag { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 2px 8px; border-radius: 999px; background: var(--primary-tint); color: var(--ems-navy); }
.res-item-desc { font-size: 12.5px; color: var(--ink-soft, #4b5563); line-height: 1.45; }
.res-item-ic { flex: none; color: var(--ems-navy); opacity: .7; display: inline-flex; }
.res-item:hover .res-item-ic { opacity: 1; color: var(--ems-red); }

/* ── Persistent page footer (co-branding on every page) ─────────────────── */
.app-footer { margin: 34px auto 8px; padding-top: 16px; border-top: 1px solid var(--border, #e5e7eb); text-align: center; font-size: 12px; letter-spacing: .02em; color: var(--muted, #6b7280); }
.app-footer b { color: var(--ems-navy); font-weight: 700; }

/* ── Admin console ──────────────────────────────────────────────────────── */
.adm-funnel { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.adm-funnel-row { display: flex; align-items: center; gap: 10px; }
.adm-funnel-l { flex: none; width: 96px; font-size: 12.5px; color: var(--ink-soft, #4b5563); text-align: right; }
.adm-funnel-bar { flex: 1; height: 18px; background: #eceffa; border-radius: 6px; overflow: hidden; }
.adm-funnel-bar > div { height: 100%; background: linear-gradient(90deg, var(--ems-navy), var(--accent, var(--ems-red))); border-radius: 6px; min-width: 2px; transition: width .3s ease; }
.adm-funnel-n { flex: none; width: 56px; font-weight: 700; font-size: 13px; color: var(--ems-navy); }
.adm-kv { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--border, #eef); font-size: 13.5px; }
.adm-kv:last-child { border-bottom: 0; }
.adm-kv span { color: var(--muted, #6b7280); }
.adm-toggles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 16px; }
.adm-toggle { display: flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; }
.adm-toggle input { width: auto; accent-color: var(--primary); }

/* ── Mentoring vs coaching vs counseling explainer ──────────────────────── */
.tri-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.tri-card { border: 1px solid var(--border, #e5e7eb); border-top: 3px solid var(--ems-navy); border-radius: 10px; padding: 14px; background: var(--surface, #fff); }
.tri-card:last-child { border-top-color: var(--ems-red); }
.tri-h { font-family: var(--ems-display); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; font-size: 15px; color: var(--ems-navy); margin-bottom: 8px; }
.tri-r { font-size: 12.5px; line-height: 1.45; margin: 6px 0; color: var(--ink-soft, #4b5563); }
.tri-r b { color: var(--ems-navy-deep); }

/* ── Mentoring hub ──────────────────────────────────────────────────────── */
.mentor-hero { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-left: 3px solid var(--ems-red); }
.mentor-road { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.mentor-mile { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border, #e5e7eb); border-radius: 10px; background: var(--surface, #fff); }
.mentor-mile.is-done { border-color: #bfe6cd; background: #f4fbf6; }
.mentor-mile-chk { flex: none; display: flex; align-items: center; }
.mentor-mile-chk input { width: 18px; height: 18px; accent-color: var(--primary); }
.mentor-mile-no { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--primary-tint); color: var(--ems-navy); font-weight: 700; font-size: 12px; }
.mentor-mile-t { font-weight: 700; font-size: 14px; color: var(--ems-navy-deep); }
.mentor-mile-link { font-size: 12px; color: var(--accent); font-weight: 600; margin-left: 6px; }
.mentor-mile-d { font-size: 12.5px; color: var(--ink-soft, #4b5563); margin-top: 2px; }

/* ── STAR story cards ───────────────────────────────────────────────────── */
.star-card { border-left: 3px solid var(--ems-navy); }
.star-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.star-comp { font-family: var(--ems-display); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; font-size: 14px; color: var(--ems-navy); }
.star-q { font-size: 13px; color: var(--ink-soft, #4b5563); margin: 0 0 12px; }
.star-part { display: flex; gap: 10px; margin: 8px 0; font-size: 13.5px; line-height: 1.5; }
.star-tag { flex: none; width: 22px; height: 22px; border-radius: 6px; background: var(--primary-tint); color: var(--ems-navy); font-weight: 700; font-size: 12px; display: flex; align-items: center; justify-content: center; }

/* ── Dashboard ──────────────────────────────────────────────────────────── */
.dash-hero { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; background: linear-gradient(120deg, var(--ems-navy-deep), var(--ems-navy)); color: #fff; border: 0; }
.dash-hero h2 { color: #fff; }
.dash-hero .muted { color: rgba(255,255,255,.8); }
.dash-hero-main { flex: 1; min-width: 240px; }
.dash-ring { flex: none; width: 118px; height: 118px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(closest-side, rgba(255,255,255,.12) 79%, transparent 80%), conic-gradient(var(--ems-red) calc(var(--pct,0) * 1%), rgba(255,255,255,.18) 0); }
.dash-ring-num { font-family: var(--ems-display); font-size: 30px; font-weight: 700; line-height: 1; }
.dash-ring-lbl { font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: rgba(255,255,255,.8); margin-top: 3px; }
.dash-metric { text-align: left; cursor: pointer; border: 1px solid var(--border, #e5e7eb); border-top: 3px solid var(--ems-navy); background: var(--surface, #fff); transition: border-color .15s, transform .1s; }
.dash-metric:hover { border-color: var(--ems-navy); transform: translateY(-1px); }
.dash-steps { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-top: 6px; }
.dash-step { text-align: left; cursor: pointer; background: var(--surface, #fff); border: 1px solid var(--border, #e5e7eb); border-radius: 12px; padding: 14px; transition: border-color .15s, box-shadow .15s, transform .1s; }
.dash-step:hover { border-color: var(--ems-navy); transform: translateY(-1px); box-shadow: var(--wt-shadow-1, 0 6px 18px rgba(16,24,16,.08)); }
.dash-step.is-done { border-left: 3px solid #2e9e5b; }
.dash-step.is-active { border-left: 3px solid var(--ems-red); }
.dash-step.is-todo { border-left: 3px solid #cbd2e6; }
.dash-step-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.dash-step-ic { color: var(--ems-navy); display: inline-flex; }
.dash-step-no { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted, #6b7280); }
.dash-step-badge { margin-left: auto; font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--primary-tint); color: var(--ems-navy-deep); }
.dash-step.is-done .dash-step-badge { background: #e3f4ea; color: #1e7a45; }
.dash-step.is-active .dash-step-badge { background: #fbeaec; color: #a01523; }
.dash-step-label { font-family: var(--ems-display); font-weight: 600; font-size: 15px; margin-bottom: 8px; }
.dash-profilebar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

/* ── Combined AI Coaches: persona switcher ──────────────────────────────── */
.coach-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 0 0 18px; }
.coach-tab { display: flex; align-items: flex-start; gap: 12px; text-align: left; padding: 14px 16px; border: 1px solid var(--border, #e5e7eb); border-radius: 12px; background: var(--surface, #fff); cursor: pointer; box-shadow: var(--wt-shadow-1, 0 1px 2px rgba(16,24,16,.05)); transition: border-color .15s, box-shadow .15s; }
.coach-tab:hover { border-color: #c3cae0; }
.coach-tab.is-active { border-color: var(--ems-navy); box-shadow: 0 0 0 2px rgba(42,56,144,.14); }
.coach-tab-ic { flex: none; width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--primary-tint); color: var(--ems-navy); }
.coach-tab.is-active .coach-tab-ic { background: var(--ems-navy); color: #fff; }
.coach-tab-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.coach-tab-txt b { font-size: 14.5px; }
.coach-tab-txt .muted { font-size: 12px; line-height: 1.35; }

/* ── Check-all-that-apply grids (Profile, Admin share scopes) ────────────── */
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px 14px; margin-top: 6px; }
.check-opt { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; line-height: 1.4; cursor: pointer; padding: 4px 0; }
.check-opt input { width: 17px; height: 17px; margin: 1px 0 0; flex: none; accent-color: var(--primary); cursor: pointer; }
.check-opt.is-on { font-weight: 600; color: var(--ems-navy); }
@media (max-width: 640px) { .check-grid { grid-template-columns: 1fr; } }

/* ── Civilian Career Paths: the collapsible ladder ───────────────────────
   A pathway is a LADDER, not a job listing, so the rungs are numbered and
   connected by a rail. That visual is the whole argument the page is making. */
.pw-grid { display: flex; flex-direction: column; gap: 16px; }
.pw-card { padding: 0; overflow: hidden; }
.pw-head { display: flex; align-items: center; gap: 14px; padding: 18px; cursor: pointer; }
.pw-head:hover { background: var(--primary-tint); }
.pw-ic { flex: none; width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--primary-tint); color: var(--ems-navy); }
.pw-chev { flex: none; color: var(--muted, #6b7280); }
.pw-card.is-open .pw-head { border-bottom: 1px solid var(--border, #e5e7eb); background: var(--primary-tint); }
.pw-body { padding: 18px; }
.pw-entry { background: var(--primary-tint); border-radius: 10px; padding: 12px 14px; font-size: 13.5px; line-height: 1.55; margin-bottom: 16px; }
.pw-fits { font-size: 12.5px; line-height: 1.55; color: var(--ink-soft, #4b5563); margin: -8px 0 16px; }
.pw-fits b { color: var(--ems-navy); }
.pw-ladder { display: flex; flex-direction: column; gap: 10px; }
.pw-rung { display: flex; gap: 12px; }
.pw-rung-no { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--ems-navy); color: #fff; font-weight: 700; font-size: 12.5px; display: flex; align-items: center; justify-content: center; }
.pw-rung-body { flex: 1; min-width: 0; border-left: 2px solid var(--border, #e5e7eb); padding: 0 0 8px 14px; margin-left: -1px; }
.pw-rung:last-child .pw-rung-body { border-left-color: transparent; }
.pw-rung-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.pw-rung-does { font-size: 13.5px; line-height: 1.55; }
.pw-rung-next { font-size: 12.5px; line-height: 1.5; color: var(--ink-soft, #4b5563); margin-top: 4px; }
.pw-rung-next b { color: var(--ems-navy); }
.pw-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border, #e5e7eb); }

/* ═══ The front door: welcome, intake, sign-in (body.gate) ═══════════════
   Full screen, no sidebar. One thing to do per screen, big targets, so it
   works on a phone held in one hand at an event. */
body.gate #app { display: block; min-height: 0; }
body.gate .sidebar, body.gate .topbar, body.gate .app-footer { display: none; }
body.gate .content { max-width: none; padding: 0; }
body.gate .app-topbar { display: none; }
.gate-wrap { max-width: 720px; margin: 0 auto; padding: 28px 18px 40px; }
.gate-wrap.wide { max-width: 980px; }
.gate-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.gate-logo { height: 52px; width: auto; }
.gate-hero { background: #fff; border-radius: 18px; padding: 30px 28px; border-top: 5px solid var(--ems-red); box-shadow: 0 10px 30px rgba(15,23,42,.08); }
.gate-hero h1 { font-family: var(--ems-display); color: var(--ems-navy); font-size: 34px; line-height: 1.1; margin: 0 0 10px; text-transform: uppercase; }
.gate-lead { font-size: 17px; line-height: 1.55; margin: 0 0 14px; }
.gate-note { color: var(--muted, #5b6475); margin: 6px 0 0; }
.gate-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
button.big, a.big { font-size: 16px !important; padding: 14px 24px !important; border-radius: 12px !important; }
.gate-code { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; margin-top: 8px; font-size: 14.5px; }
.gate-code.ok { background: #e8f5ec; color: #14532d; }
.gate-code.bad { background: #fdecea; color: #7f1d1d; }
.gate-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 18px 0; }
.gate-card { background: #fff; border-radius: 14px; padding: 18px; box-shadow: 0 4px 16px rgba(15,23,42,.06); color: var(--ems-navy); }
.gate-card h3 { font-family: var(--ems-display); margin: 8px 0 6px; font-size: 18px; }
.gate-card p { color: var(--text, #1c2333); margin: 0; font-size: 14px; line-height: 1.5; }
.gate-how { background: #fff; border-radius: 14px; padding: 18px 22px; }
.gate-how h2 { font-family: var(--ems-display); color: var(--ems-navy); margin: 0 0 6px; }
.gate-steps { margin: 0; padding-left: 20px; line-height: 1.8; }
.gate-staff { text-align: center; margin: 18px 0 0; }
.gate-foot { text-align: center; color: var(--muted, #6b7280); font-size: 12.5px; margin-top: 26px; }
.gate-panel { background: #fff; border-radius: 16px; padding: 24px; box-shadow: 0 8px 26px rgba(15,23,42,.07); }
.gate-panel h2 { font-family: var(--ems-display); color: var(--ems-navy); font-size: 24px; margin: 0 0 6px; }
.gate-progress { height: 8px; background: #e5e9f4; border-radius: 6px; overflow: hidden; }
.gate-progress > div { height: 100%; background: var(--ems-navy); transition: width .25s; }
.gate-stepno { color: var(--muted, #6b7280); font-size: 13px; margin: 8px 0 12px; font-weight: 600; }
.gate-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 16px; }
.gate-err { color: var(--ems-red); min-height: 1.2em; margin: 10px 0 0; font-weight: 600; }
.gate-choices { display: grid; gap: 10px; margin-top: 12px; }
.gate-choice { display: flex; gap: 14px; align-items: center; text-align: left; background: #f7f8fc; border: 2px solid #e2e6f2; border-radius: 14px; padding: 16px 18px; cursor: pointer; font-size: 15.5px; color: var(--text, #1c2333); }
.gate-choice:hover { border-color: #b9c2e6; }
.gate-choice.on { border-color: var(--ems-navy); background: var(--primary-tint); box-shadow: 0 0 0 3px rgba(42,56,144,.12); }
.gc-ic { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--ems-navy); }
.gate-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.gate-check { display: flex; gap: 10px; align-items: center; background: #f7f8fc; border: 2px solid #e2e6f2; border-radius: 12px; padding: 12px 14px; cursor: pointer; font-size: 15px; }
.gate-check.on { border-color: var(--ems-navy); background: var(--primary-tint); }
.gate-check input { width: 20px; height: 20px; accent-color: var(--ems-navy); }
.demo-accts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.demo-acct { text-align: left; background: #f7f8fc; border: 1px solid #e2e6f2; border-radius: 12px; padding: 10px 12px; cursor: pointer; }
.demo-acct:hover { border-color: var(--ems-navy); }
.demo-acct .pill { margin-left: 6px; font-size: 11px; }
@media (max-width: 720px) {
  .gate-grid3, .gate-checks, .demo-accts { grid-template-columns: 1fr; }
  .gate-hero h1 { font-size: 27px; }
}

/* ═══ My Plan ═════════════════════════════════════════════════════════════ */
.plan-hero { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.plan-next { border-left: 5px solid var(--ems-red); }
.plan-steps { display: flex; flex-direction: column; gap: 8px; }
.plan-step { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid #e6e9f2; border-radius: 12px; }
.plan-step.current { border-color: var(--ems-navy); background: var(--primary-tint); }
.plan-step.done { opacity: .72; }
.plan-no { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: #eef1fb; color: var(--ems-navy); }
.plan-step.done .plan-no { background: var(--ems-navy); color: #fff; }
.plan-mentor, .plan-checkin { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; color: var(--ems-navy); }
.plan-checkin { border-left: 5px solid var(--ems-navy); }
.plan-res { display: flex; gap: 8px; align-items: center; }
.plan-res .res-item-body { flex: 1; text-decoration: none; color: inherit; }
button.small { font-size: 12px !important; padding: 6px 10px !important; }
.linkish { background: none; border: 0; padding: 0; color: var(--ems-navy); text-decoration: underline; cursor: pointer; font-size: 13px; }
.nav-toggle { opacity: .8; font-style: italic; margin-top: 10px; border-top: 1px solid rgba(255,255,255,.12); }
.fam-list li { margin: 6px 0; padding-left: 4px; }
.sv-q { margin: 0 0 18px; }
.sv-q b { display: block; margin-bottom: 8px; }
.sv-scale { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.sv-scale label, .sv-opt { display: inline-flex; gap: 6px; align-items: center; background: #f7f8fc; border: 1px solid #e2e6f2; border-radius: 10px; padding: 7px 11px; cursor: pointer; }
.crisis-footer { margin-top: 10px; font-size: 12.5px; color: var(--muted, #6b7280); border-top: 1px dashed #e2e6f2; padding-top: 8px; }
.crisis-footer b { color: var(--ems-red); }

/* ═══ Admin: members, event codes, check-ins ══════════════════════════════ */
.adm-req { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid #eef0f6; }
.adm-req:first-of-type { border-top: 0; }
.adm-req select, .adm-code select { max-width: 280px; }
.adm-code { display: flex; gap: 16px; align-items: flex-start; padding: 14px 0; border-top: 1px solid #eef0f6; flex-wrap: wrap; }
.adm-code.expired { opacity: .6; }
.adm-qr { width: 112px; height: 112px; flex: 0 0 auto; background: #f4f6fb; border-radius: 8px; }
.adm-qr img, .adm-qr canvas { display: block; }
.sv-sum { display: flex; flex-direction: column; gap: 4px; padding: 10px 0; border-top: 1px solid #eef0f6; }
.sv-avg { font-family: var(--ems-display); font-size: 24px; color: var(--ems-navy); }

.plan-meter { min-width: 160px; text-align: right; }
.plan-meter-n { font-family: var(--ems-display); font-size: 26px; color: var(--ems-navy); line-height: 1; }
.plan-no svg { stroke: currentColor; }

/* ═══ Phones (Troy, 10/29 internal test: "My Plan breaks on phones") ════════
   The desktop frame is two independent scroll areas: body is overflow:hidden and
   #app is a fixed-height grid (coaching.css). Below 760px that grid became one
   column of TWO fixed halves, so the sidebar took the top half (and scrolled
   sideways, 922px wide) and My Plan was squeezed into a 396px window at the
   bottom of a 844px phone. On a phone the page scrolls as one page instead:
   brand, then the nav as one swipeable row, then the page, then the account and
   the crisis line at the bottom. Nothing above 760px changes. */
@media (max-width: 760px) {
  body:not(.gate) { height: auto; overflow: visible; }
  /* Scoped to the app frame: the front-door screens (body.gate) keep their own. */
  body:not(.gate) #app { display: flex; flex-direction: column; height: auto; min-height: 0; }
  body:not(.gate) #app > .sidebar { display: contents; }
  body:not(.gate) #app > .sidebar > .brand, body:not(.gate) #app > .sidebar > #nav, body:not(.gate) #app > .sidebar > .sidebar-foot { background: var(--sidebar-deep, #0e1547); color: #fff; }
  body:not(.gate) #app > .sidebar > .brand { order: 1; margin: 0; padding: 12px 16px 0; }
  body:not(.gate) #app > .sidebar > .brand .brand-head { padding: 0 0 10px; }
  body:not(.gate) #app > .sidebar > #nav { order: 2; flex: none; flex-wrap: nowrap; overflow-x: auto; gap: 4px; padding: 8px 12px 10px; scrollbar-width: thin; }
  body:not(.gate) #app > .sidebar > #nav a { flex: 0 0 auto; white-space: nowrap; padding: 9px 12px; }
  body:not(.gate) #app > .sidebar > #nav .nav-group { flex: 0 0 auto; align-self: center; padding: 0 4px 0 10px; }
  body:not(.gate) #app > .sidebar > #nav .nav-toggle { margin-top: 0; border-top: 0; }
  body:not(.gate) #app > .content { order: 3; height: auto; min-height: 0; overflow: visible; }
  body:not(.gate) #app > .sidebar > .sidebar-foot { order: 4; margin: 0; padding: 14px 16px 24px; }
  /* My Plan's check-in and mentor cards: the text keeps a readable width and
     the button drops below it, instead of the text shrinking to one word a line. */
  .plan-mentor > div[style*="flex:1"], .plan-checkin > div[style*="flex:1"] { min-width: 180px; }
}