/* MRA shared UI — one token source, one component vocabulary.
 *
 * WHY THIS EXISTS. Scout, Scout 3D, Walk and the Desk each defined their own
 * :root and their own .btn / .card / .chip / .row / .honesty. The values mostly
 * agreed, which is worse than disagreeing loudly: desk.html had no --gold at
 * all, so anything reaching for it there fell back to nothing. Eighteen screens
 * only read as one product if they are cut from one sheet.
 *
 * HOW IT IS SAFE TO ADOPT. Two rules:
 *   1. Tokens are shared. The values below are lifted from scout.html's :root,
 *      which every page already agreed with — so defining them here changes
 *      nothing except filling the gaps (desk.html's missing --gold).
 *   2. Components are NAMESPACED `.mra-`. This file never restyles a bare
 *      .btn or .card, so a page can adopt it screen by screen without any
 *      existing rule moving. The old classes die when the last screen using
 *      them is migrated, not before.
 *
 * Loaded BEFORE each page's own <style>, so page rules still win where a page
 * genuinely needs to differ.
 */

:root, [data-theme="light"] {
  --bg:#fdfcf9; --surface:#f6f3fb; --surface2:#ffffff;
  --text:#0e0b16; --muted:#5d5870; --inverse:#ffffff;
  --gold:#e93c8f; --gold-hover:#c92e78; --gold-soft:rgba(233,60,143,0.10);
  --vio:#6c3ce9; --cor:#ff6b4a;
  --grad:linear-gradient(93deg,#6c3ce9,#e93c8f 48%,#ff6b4a);
  --border:rgba(14,11,22,0.10); --divider:rgba(14,11,22,0.07);
  --green:#1d8a4e; --red:#d8452e; --amber:#b8791b; --blue:#3d5f82;
  --shadow:0 10px 28px rgba(14,11,22,0.10);
  --shadow-grad:0 8px 22px rgba(233,60,143,0.28);
  --r-md:0.875rem; --r-lg:1.25rem;
  --body:'General Sans','Inter',sans-serif; --display:'Clash Display',sans-serif;
  /* The line that decides who is a phone. scout.html already used 768 to route
     between Scout and the Desk; the nav below must agree with it or a tablet
     gets a phone bar over a desktop layout. */
  --phone-max:767px;
}
[data-theme="dark"] {
  --bg:#0e0b16; --surface:#161226; --surface2:#1d1830;
  --text:#f2eefb; --muted:#a79fc0;
  --gold:#f45ca6; --gold-hover:#ff7ab8; --gold-soft:rgba(244,92,166,0.15);
  --grad:linear-gradient(93deg,#8d63f2,#f45ca6 48%,#ff8a6b);
  --border:rgba(255,255,255,0.12); --divider:rgba(255,255,255,0.08);
  --green:#5ecf8f; --red:#ff8f76; --amber:#e9b96a; --blue:#8fb3d9;
  --shadow:0 10px 28px rgba(0,0,0,0.45);
}

/* ── surfaces ─────────────────────────────────────────────────────────── */
.mra-card{background:var(--surface2);border:1px solid var(--border);
  border-radius:var(--r-md);box-shadow:var(--shadow)}
.mra-card--flat{box-shadow:none}

/* ── type ─────────────────────────────────────────────────────────────── */
.mra-h1{font-family:var(--display);font-size:1.45rem;font-weight:600;
  line-height:1.15;letter-spacing:-.02em;margin:0}
.mra-lbl{font-family:var(--display);font-size:.62rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted)}
.mra-mut{color:var(--muted)}

/* ── controls. 44px is a floor, not a target. ─────────────────────────── */
.mra-btn{display:grid;place-items:center;min-height:48px;padding:0 1.1rem;
  border-radius:var(--r-md);border:1px solid transparent;cursor:pointer;
  font-family:var(--display);font-size:.9rem;font-weight:600;
  background:var(--surface2);color:var(--text)}
.mra-btn--line{border-color:var(--border)}
.mra-btn--grad{background:var(--grad);color:#fff;box-shadow:var(--shadow-grad)}
.mra-btn:disabled{opacity:.45;cursor:default;box-shadow:none}

.mra-chip{display:inline-flex;align-items:center;min-height:34px;
  padding:.35rem .7rem;border-radius:999px;border:1px solid var(--border);
  background:transparent;color:var(--muted);font-size:.78rem;cursor:pointer}
.mra-chip[aria-pressed="true"]{background:var(--gold-soft);
  border-color:var(--gold);color:var(--gold);font-weight:600}

.mra-row{display:flex;align-items:center;gap:.7rem;padding:.8rem 0;
  border-bottom:1px solid var(--divider);min-height:44px}
.mra-row:last-child{border-bottom:0}

/* ── the honesty block. Only the LEADING label is a heading — inline
      emphasis inside the sentences must stay inline, or the paragraph
      breaks into fragments (this was a real shipped bug). ───────────── */
.mra-honesty{padding:.85rem 1rem;border:1px dashed var(--border);
  border-radius:var(--r-md);font-size:.75rem;line-height:1.55;color:var(--muted)}
.mra-honesty>b:first-child{display:block;margin-bottom:.25rem;color:var(--text)}
.mra-honesty b{color:var(--text)}

/* ── segmented control. Two modes of one screen, never two screens. ──── */
.mra-seg{display:flex;gap:.4rem;margin:0 0 .9rem}
.mra-seg .mra-chip{flex:1;justify-content:center}

/* ── hub ──────────────────────────────────────────────────────────────── */
.mra-hub{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.mra-hub-card{display:flex;flex-direction:column;align-items:flex-start;gap:.6rem;
  text-align:left;padding:1rem;min-height:132px;border-radius:var(--r-lg);
  background:var(--surface2);border:1px solid var(--border);box-shadow:var(--shadow);
  color:var(--text);text-decoration:none;cursor:pointer;font-family:var(--body)}
.mra-hub-card strong{font-family:var(--display);font-size:.98rem;font-weight:600}
.mra-hub-card span:last-child{font-size:.78rem;line-height:1.45;color:var(--muted)}
.mra-hub-ico{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  background:var(--gold-soft);color:var(--gold)}
.mra-hub-ico svg{width:20px;height:20px}


/* ── the bar. Phone only; above --phone-max the Desk shows its rail
      instead and the other pages simply have no bar. ─────────────────── */
.mra-nav{position:fixed;bottom:0;left:0;right:0;z-index:60;display:none;
  grid-template-columns:repeat(4,minmax(0,1fr));
  background:var(--surface2);border-top:1px solid var(--divider);
  padding:.4rem .3rem calc(.4rem + env(safe-area-inset-bottom));
  font-family:var(--body)}
.mra-nav__i{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.22rem;min-height:44px;padding:.35rem 0;border:0;background:none;cursor:pointer;
  color:var(--muted);text-decoration:none;border-radius:.7rem;
  font-family:var(--display);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase}
.mra-nav__i svg{width:21px;height:21px}
.mra-nav__i[aria-current="page"]{color:var(--gold)}
@media (max-width:767px){
  .mra-nav{display:grid}
  body.mra-has-nav{padding-bottom:calc(4.5rem + env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion:no-preference){
  .mra-nav__i{transition:color .15s ease}
}

/* ── the Desk's desktop rail. Same destinations, same order, same
      current-state rule — it is the bar, unrolled. ───────────────────── */
.mra-rail{display:none;width:190px;flex-shrink:0;padding:1.2rem .75rem;
  background:var(--surface2);border-right:1px solid var(--divider);
  flex-direction:column;gap:.2rem}
.mra-rail__i{display:flex;align-items:center;gap:.6rem;padding:.55rem .6rem;
  border-radius:.6rem;color:var(--muted);text-decoration:none;font-size:.82rem;
  min-height:44px;box-sizing:border-box;cursor:pointer;border:0;background:none;
  font-family:var(--body);text-align:left;width:100%}
.mra-rail__i svg{width:18px;height:18px;flex-shrink:0}
.mra-rail__i[aria-current="page"]{background:var(--gold-soft);color:var(--gold);font-weight:600}
@media (min-width:768px){ .mra-rail{display:flex} }

/* ── [hidden] MUST WIN ─────────────────────────────────────────────────
   Any class that sets `display` overrides the user-agent's
   [hidden]{display:none}. A gated hub card was set hidden in JS and stayed on
   screen: the DOM said hidden, the entitlement check passed, and the card was
   visible to everyone. An attribute assertion could not see it — a screenshot
   could. Listed once here so the next component added to this sheet does not
   quietly reintroduce it. */
.mra-btn[hidden], .mra-chip[hidden], .mra-hub[hidden], .mra-hub-card[hidden],
.mra-hub-ico[hidden], .mra-nav[hidden], .mra-nav__i[hidden], .mra-rail[hidden],
.mra-rail__i[hidden], .mra-row[hidden], .mra-card[hidden],
.mra-seg[hidden]{display:none}