/* Compass redesign — locked design system, scoped to #rd-root (the staging overlay).
 * Ported from the locked mockups (clearline-docs/mockups/compass + governance/
 * clearline-aura-redesign-design-rules.md Rule 0: per-app core). Compass core = deep
 * green; warm-paper canvas; Newsreader + Inter (shared locked type). Prefix-scoped
 * (every selector under #rd-root) — NOT @scope (the aura lesson: @scope in an external
 * sheet parses to 0 rules). #rd-root is a fixed overlay; id specificity beats the
 * legacy SPA's global classes underneath. Reactions/hearts deliberately omitted
 * (per-entry read-only v1 — write-path deferred). */

#rd-root{
  --bg:#ffffff;--ink:#0A0E1A;--ink-2:#3c3f46;--ink-3:#52584f;--label:#6c7269;
  --line:#E8E5DC;--line-soft:#F1EFE8;--rail:#FBF7F0;--canvas:#FFF8F0;
  --compass:#2c4a3e;--compass-2:#22392f;--compass-soft:#e9f1ec;--compass-line:#cfe0d6;--compass-bright:#C47A5A;
  --aura:#142774;--pilot:#475569;--scrive:#8a6a2a;
  /* 2026-07-14 WCAG sweep: --scrive darkened from #D4A645 (2.25:1 with white avatar-initials
     text, the "DO" OT-role avatar, the lowest ratio found across all 4 apps). A code comment
     at compass/index.html:11139 already flagged this exact color+failure ("gold ~2.25:1 on
     white text") for a different avatar-rotation context — confirms this is a known-bad
     combination, not a one-off. New value clears 5.03:1 as an avatar background with white
     text (every real bg usage of --scrive: the flagged team-member avatar + the Circle
     screen's colorOf() avatar, same pattern). Also improves (1.93:1 -> 4.31:1, a real gain,
     though not fully passing) the one unflagged/unverified foreground-text usage (.li .tag on
     #f1ebf8) -- disclosed, not claimed as fixed, since that usage wasn't in the sweep's data. */
  --gold:#b8860b;--gold-soft:#f7efda;--gold-line:#e8d9ad;
  --heart:#c0492f;
  --coral:#C47A5A;
  --amber:#b07d2b;--amber-bg:#fbf2dd;--amber-line:#ecd9a8;
  --watch:#7d560f;--watch-bg:#fbf3e3;
  /* 2026-07-14 WCAG sweep: .i.watch (hero status glyphs ◔ / !) and .planmod .pmh .watch
     referenced var(--watch,#b07d1a) / var(--watch-bg,#fbf3e3) with no actual --watch token
     ever defined in :root -- the inline fallback was the only value ever used, at 3.28:1 on
     #fbf3e3 (fails AA). Defining the token properly here (rather than only patching the
     fallback) matches how every other semantic color pair in this block is architected.
     New --watch clears 5.93:1 against --watch-bg. --watch-bg is unchanged (background colour
     was never the problem). */
  --good:#1f7a52;--good-bg:#eaf6ef;--good-line:#bfe3cf;
  position:fixed;inset:0;z-index:2147483600;overflow:auto;
  background:var(--canvas);color:var(--ink);
  font-family:Inter,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:15px;line-height:1.6;
  -webkit-font-smoothing:antialiased;font-synthesis-weight:none;
}
#rd-root *{box-sizing:border-box}
#rd-root .serif{font-family:Newsreader,Georgia,serif}
/* The redesign overlay is a light-only design system (cards are hard-coded white).
   The legacy global @media(prefers-color-scheme:dark){h1..h5{color:#e6edf3}} is an
   unscoped element selector that leaks into #rd-root and turned locked-card titles
   ("Daily updates are locked" etc.) near-white on the white card in dark mode. Re-
   assert the overlay's own dark ink (--ink stays #0A0E1A here); id+element specificity
   beats the media rule, no-op in light mode. */
#rd-root h1,#rd-root h2,#rd-root h3,#rd-root h4,#rd-root h5{color:var(--ink)}
/* Kai's inbox 2026-07-04: same leak, form fields this time. The legacy global
   @media(prefers-color-scheme:dark){input,select,textarea{background:#0d1117;color:#c9d1d9}}
   painted the Goal textarea + Area/Status selects black on Compass's goal-add form (the Target
   date input escaped it — <input type=date>'s native shadow-DOM control isn't fully covered by a
   plain background-color the same way). Same id+element-specificity fix as the h1-h5 rule above. */
#rd-root input,#rd-root select,#rd-root textarea{background:#fff;color:var(--ink)}
#rd-root a{color:var(--compass);text-decoration:none}
#rd-root :focus-visible{outline:2px solid var(--compass-bright);outline-offset:2px;border-radius:5px}
#rd-root .hair{height:3px;background:var(--compass)}
#rd-root .shell{display:flex;min-height:100vh}

/* rail */
#rd-root .rail{width:230px;flex:0 0 230px;background:var(--rail);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:18px 14px;min-height:100vh;position:sticky;top:0}
#rd-root .brand{display:flex;align-items:center;gap:10px;padding:6px 8px 16px}
#rd-root .brand .mk{width:30px;height:30px;border-radius:9px;background:var(--compass);display:grid;place-items:center;color:#fff;flex:0 0 auto}
#rd-root .brand .mk svg{width:16px;height:16px}
#rd-root .brand .wm{font-family:Newsreader,serif;font-weight:600;font-size:18px;line-height:1}
#rd-root .brand .by{font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:var(--label);margin-top:2px}
#rd-root .nav{flex:1}
#rd-root .nav button{display:flex;align-items:center;gap:11px;width:100%;border:none;background:transparent;font:inherit;text-align:left;color:var(--ink-2);font-size:14px;padding:9px 10px;border-radius:9px;margin-bottom:1px;cursor:pointer}
#rd-root .nav button .ic{width:16px;text-align:center;opacity:.6;font-size:13px}
#rd-root .nav button.on{background:var(--compass-soft);color:var(--compass);font-weight:600}
#rd-root .nav button.on .ic{opacity:1}
#rd-root .railfoot{border-top:1px solid var(--line);padding-top:10px;font-size:11.5px;color:var(--label)}
#rd-root .railfoot .x{cursor:pointer;color:var(--compass);font-weight:600}

/* main column */
#rd-root .main{flex:1;min-width:0;padding:24px clamp(20px,5vw,60px) 70px;display:flex;justify-content:center}
#rd-root .inner{width:100%;max-width:960px}
#rd-root .feed{max-width:620px;margin:0 auto}   /* moments/reading width inside the wider dashboard inner */
#rd-root .topbar{display:flex;align-items:center;gap:12px;margin-bottom:18px}
#rd-root .switcher{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);border-radius:11px;padding:7px 12px}
#rd-root .switcher .av{width:26px;height:26px;border-radius:50%;background:var(--compass);color:#fff;display:grid;place-items:center;font-size:11px;font-weight:700}
#rd-root .switcher .nm{font-family:Newsreader,serif;font-weight:600;font-size:16px}
#rd-root .switcher .ca{color:var(--label);font-size:11px}
#rd-root .topbar .right{margin-left:auto;display:flex;align-items:center;gap:10px}
#rd-root .famchip{font-size:11.5px;font-weight:600;color:#fff;background:var(--compass);padding:5px 11px;border-radius:999px}
#rd-root .hi{font-size:13px;color:var(--ink-3)}
/* plan-tools on/off lives in Settings (no top-bar mode switch — Richard 2026-06-15); the
   former .plantoggle/.sw top-bar control was removed. */
#rd-root .nav button.locked{color:#aab0a6}
#rd-root .nav button .lk{margin-left:auto;font-size:10px;opacity:.7}
#rd-root .footrow{display:flex;align-items:center;gap:10px;margin-top:28px;padding-top:18px;border-top:1px solid var(--line)}
#rd-root .footrow .sp{font-size:11.5px;color:var(--label)}

#rd-root .phead{text-align:center;margin-bottom:14px}
#rd-root .phead h1{font-family:Newsreader,serif;font-weight:500;font-size:30px;margin:0}
#rd-root .phead p{font-size:14px;color:var(--ink-3);margin:6px 0 0}
#rd-root .consent{display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;color:var(--compass);background:var(--compass-soft);border:1px solid var(--compass-line);border-radius:999px;padding:6px 14px;margin:14px auto 0;width:fit-content}
#rd-root .consent a{font-weight:600;text-decoration:underline}

/* day divider */
#rd-root .daydiv{display:flex;align-items:center;gap:12px;margin:8px 2px 16px}
#rd-root .daydiv .d{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--label);font-weight:700}
#rd-root .daydiv .ln{flex:1;height:1px;background:var(--line)}

/* moment card (text/everyday — v1 read-only, no reactions) */
#rd-root .moment{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;margin-bottom:20px;box-shadow:0 14px 30px -26px rgba(30,50,40,.4)}
#rd-root .mbody{padding:18px 18px 16px}
#rd-root .cap{font-size:16px;color:var(--ink);line-height:1.55}
#rd-root .attrib{display:flex;align-items:center;gap:10px;margin-top:13px}
#rd-root .attrib .av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700;color:#fff;flex:0 0 auto;background:var(--compass)}
#rd-root .attrib .nm{font-size:13px;font-weight:600}
#rd-root .attrib .ro{font-size:11.5px;color:var(--label)}
#rd-root .attrib .tm{margin-left:auto;font-size:11.5px;color:var(--label)}

/* dashboard cards */
#rd-root .card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px;margin-bottom:16px;box-shadow:0 14px 30px -26px rgba(30,50,40,.35)}
#rd-root .card h3{font-family:Newsreader,serif;font-weight:600;font-size:18px;margin:0 0 4px}
#rd-root .card .src{font-size:11.5px;color:var(--label);margin-bottom:10px}
#rd-root .card .body{font-size:15px;color:var(--ink-2);line-height:1.55}
#rd-root .kv{display:flex;gap:8px;font-size:13.5px;color:var(--ink-2);padding:6px 0;border-top:1px solid var(--line-soft)}
#rd-root .kv .k{color:var(--label);min-width:120px}
#rd-root .lockchip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--compass);background:var(--compass-soft);border:1px solid var(--compass-line);border-radius:999px;padding:4px 11px}

#rd-root .end{text-align:center;font-size:12.5px;color:var(--label);margin-top:8px}
#rd-root .muted{color:var(--label)}
#rd-root .loading{color:var(--label);font-size:13px;text-align:center;padding:30px}

/* ===== Home day-one dashboard (mockup: Compass · Set up Mia's Compass) — always gives the family something to do ===== */
#rd-root .greet{font-family:Newsreader,serif;font-weight:500;font-size:26px;margin:6px 0 4px}
#rd-root .greetsub{font-size:14.5px;color:var(--ink-3);margin:0 0 18px;max-width:620px}

/* hero: the locked live-feed reward + invite (shown when no provider is connected) */
#rd-root .hero{display:grid;grid-template-columns:1fr 1fr;gap:0;overflow:hidden;margin-bottom:18px;background:#fff;border:1px solid var(--line);border-radius:16px}
@media(max-width:820px){#rd-root .hero{grid-template-columns:1fr}}
#rd-root .hero .pitch{padding:26px;display:flex;flex-direction:column;justify-content:center}
#rd-root .hero .pitch .eb{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--compass-bright);font-weight:700}
#rd-root .hero .pitch h2{font-family:Newsreader,serif;font-weight:600;font-size:23px;line-height:1.15;margin:9px 0 0}
#rd-root .hero .pitch p{font-size:14px;color:var(--ink-3);margin:11px 0 0}
#rd-root .hero .pitch .cta,#rd-root .card .cta{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:600;font-size:15px;color:#fff;background:var(--compass);border:none;border-radius:12px;padding:13px 20px;margin-top:18px;cursor:pointer;box-shadow:0 10px 22px -10px rgba(44,74,62,.5)}
#rd-root .hero .pitch .alt{font-size:13px;color:var(--ink-3);margin-top:11px}
#rd-root .hero .pitch .alt a{font-weight:600;cursor:pointer}
#rd-root .lock{position:relative;background:var(--rail);border-left:1px solid var(--line-soft);min-height:280px}
@media(max-width:820px){#rd-root .lock{border-left:0;border-top:1px solid var(--line-soft)}}
#rd-root .lockinner{padding:20px;filter:blur(2.5px);opacity:.5;pointer-events:none;user-select:none}
#rd-root .lockinner .lt{font-family:Newsreader,serif;font-weight:600;font-size:17px;margin-bottom:12px}
#rd-root .lockinner .lm{display:flex;gap:11px;padding:8px 0}
#rd-root .lockinner .lm .dot{width:8px;height:8px;border-radius:50%;background:var(--compass-bright);margin-top:6px;flex:0 0 auto}
#rd-root .lockinner .lm .lx{font-size:13.5px;color:var(--ink-2)}
#rd-root .lockinner .lm .lmm{font-size:11px;color:var(--label)}
#rd-root .lockover{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:20px;background:linear-gradient(180deg,rgba(247,250,247,.35),rgba(247,250,247,.72))}
#rd-root .lockover .lk{width:46px;height:46px;border-radius:50%;background:#fff;border:1px solid var(--compass-line);display:grid;place-items:center;font-size:20px;color:var(--compass)}
#rd-root .lockover .lo1{font-family:Newsreader,serif;font-weight:600;font-size:16px}
#rd-root .lockover .lo2{font-size:12.5px;color:var(--ink-3);max-width:240px}

/* setup checklist */
#rd-root .setup{padding:0;margin-bottom:18px}
#rd-root .setuph{display:flex;align-items:center;padding:16px 20px 12px}
#rd-root .setuph .t{font-family:Newsreader,serif;font-weight:600;font-size:18px}
#rd-root .setuph .prog{margin-left:auto;font-size:12px;color:var(--label);font-weight:600}
#rd-root .progbar{height:6px;background:#edf0ec;border-radius:999px;margin:0 20px 8px;overflow:hidden}
#rd-root .progbar span{display:block;height:100%;background:var(--compass-bright);border-radius:999px}
#rd-root .stepc{display:flex;align-items:center;gap:13px;padding:13px 20px;border-top:1px solid var(--line-soft)}
#rd-root .stepc .ck{width:24px;height:24px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;font-size:12px;font-weight:700}
#rd-root .stepc .ck.done{background:var(--good-bg,#eaf6ef);color:var(--good,#1f7a52)}
#rd-root .stepc .ck.todo{background:#eef1ec;color:#aeb4aa;border:1px solid var(--line)}
#rd-root .stepc .tx .t2{font-size:14px;font-weight:600}
#rd-root .stepc .tx .t2.dim{color:#9aa097;font-weight:500;text-decoration:line-through}
#rd-root .stepc .tx .s2{font-size:12px;color:var(--label);margin-top:1px}
#rd-root .stepc .go{margin-left:auto;font-size:12.5px;font-weight:600;border:1px solid var(--line);background:#fff;border-radius:9px;padding:8px 13px;color:var(--ink-2);white-space:nowrap;cursor:pointer}
#rd-root .stepc.key{background:#fbfdfb}
#rd-root .stepc.key .go{background:var(--compass);color:#fff;border-color:var(--compass)}
#rd-root .stepc.key .ck.todo{border-color:var(--compass-line);color:var(--compass)}

/* organiser grid — "what you can do right now" */
#rd-root .orgh{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--label);font-weight:700;margin:26px 2px 12px}
#rd-root .orggrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:820px){#rd-root .orggrid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){#rd-root .orggrid{grid-template-columns:1fr}}
#rd-root .org{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;display:flex;flex-direction:column}
#rd-root .org .oi{width:38px;height:38px;border-radius:11px;background:var(--compass-soft);color:var(--compass);display:grid;place-items:center;font-size:17px;margin-bottom:12px}
#rd-root .org h3{font-size:15px;margin:0 0 5px;font-weight:600}
#rd-root .org p{font-size:13px;color:var(--ink-3);margin:0 0 14px;flex:1}
#rd-root .org .oa{font-size:13px;font-weight:600;border:1px solid var(--line);background:#fff;border-radius:9px;padding:9px;text-align:center;color:var(--ink-2);cursor:pointer}
#rd-root .org.feature{border-color:var(--compass-line);box-shadow:0 14px 30px -22px rgba(44,74,62,.4)}
#rd-root .org.feature .oa{background:var(--compass);color:#fff;border-color:var(--compass)}
#rd-root .org .reciprocal{font-size:11.5px;color:var(--compass);background:var(--compass-soft);border:1px solid var(--compass-line);border-radius:8px;padding:7px 9px;margin-bottom:12px}

/* ===== Connected Dashboard (mockup: Compass · Mia's dashboard) ===== */
#rd-root .grid2{display:grid;grid-template-columns:1.5fr 1fr;gap:18px}
@media(max-width:900px){#rd-root .grid2{grid-template-columns:1fr}}
/* hero: how they're doing this week */
#rd-root .dashhero{padding:0;overflow:hidden;margin-bottom:18px}
#rd-root .dashhero .hh{display:flex;align-items:center;gap:12px;padding:18px 22px 14px;border-bottom:1px solid var(--line-soft)}
#rd-root .dashhero .hh .t{font-family:Newsreader,serif;font-weight:600;font-size:21px}
#rd-root .dashhero .hh .well{margin-left:auto;font-size:12px;font-weight:700;color:var(--good,#1f7a52);background:var(--good-bg,#eaf6ef);border:1px solid var(--good-line,#bfe3cf);padding:4px 12px;border-radius:999px}
#rd-root .dashhero .lead{padding:16px 22px 4px;font-size:16px;color:var(--ink-2);line-height:1.55}
#rd-root .dashhero .lead b{color:var(--ink)}
#rd-root .heroband{display:grid;grid-template-columns:1.4fr 1fr;gap:0}
@media(max-width:760px){#rd-root .heroband{grid-template-columns:1fr}}
#rd-root .moments{padding:14px 22px 20px}
#rd-root .mlabel{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--label);font-weight:700;margin-bottom:10px}
#rd-root .hmoment{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--line-soft)}
#rd-root .hmoment:last-child{border-bottom:0}
#rd-root .hmoment .dot{width:9px;height:9px;border-radius:50%;background:var(--compass-bright);margin-top:6px;flex:0 0 auto}
#rd-root .hmoment .mx{font-size:14px;color:var(--ink-2)}
#rd-root .hmoment .mm{font-size:11.5px;color:var(--label);margin-top:2px}
#rd-root .today{padding:14px 22px 20px;background:var(--rail);border-left:1px solid var(--line-soft)}
@media(max-width:760px){#rd-root .today{border-left:0;border-top:1px solid var(--line-soft)}}
#rd-root .trow{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid var(--line-soft);font-size:13.5px}
#rd-root .trow:last-child{border-bottom:0}
#rd-root .trow .i{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-size:13px;flex:0 0 auto}
#rd-root .i.good{background:var(--good-bg,#eaf6ef);color:var(--good,#1f7a52)}
#rd-root .i.watch{background:var(--watch-bg,#fbf3e3);color:var(--watch,#b07d1a)}
#rd-root .i.info{background:var(--compass-soft);color:var(--compass)}
#rd-root .trow .meta{margin-left:auto;font-size:12px;color:var(--label)}
#rd-root .herofoot{display:flex;align-items:center;gap:10px;padding:13px 22px;border-top:1px solid var(--line-soft);background:#fcfdfc;flex-wrap:wrap}
#rd-root .herofoot .src{font-size:11.5px;color:var(--label)}
#rd-root .herofoot .src b{color:var(--aura)}
#rd-root .herofoot .msg{margin-left:auto;font-size:13px;font-weight:600;color:#fff;background:var(--compass);border:none;border-radius:9px;padding:8px 14px;cursor:pointer}
/* care team + section heads */
#rd-root .ch{display:flex;align-items:center;padding:16px 18px 10px}
#rd-root .ch .t{font-family:Newsreader,serif;font-weight:600;font-size:17px}
#rd-root .ch .x{margin-left:auto;font-size:11.5px;color:var(--label);cursor:pointer}
#rd-root .team{display:flex;gap:14px;padding:6px 18px 14px;flex-wrap:wrap}
#rd-root .member{text-align:center}
#rd-root .member .av{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:700;color:#fff;margin:0 auto 5px}
#rd-root .member.add .av{background:#fff;border:1.5px dashed var(--compass-line);color:var(--compass-bright)}
#rd-root .member .r{font-size:11px;color:var(--ink-3)}
#rd-root .member .rr{font-size:9.5px;color:var(--label)}
#rd-root .teamfoot{display:flex;align-items:center;gap:8px;padding:12px 18px;border-top:1px solid var(--line-soft);flex-wrap:wrap}
#rd-root .pillbtn{font-size:12px;font-weight:600;border:1px solid var(--line);background:#fff;border-radius:8px;padding:7px 12px;color:var(--ink-2);cursor:pointer}
#rd-root .pillbtn.solid{background:var(--compass);color:#fff;border-color:var(--compass)}
#rd-root .teamfoot .code{margin-left:auto;font-size:11px;color:var(--label)}
#rd-root .teamfoot .code b{font-family:Inter;letter-spacing:.08em;color:var(--ink-2)}
/* this-week list */
#rd-root .listcard{padding:0}
#rd-root .li{display:flex;align-items:center;gap:12px;padding:13px 18px;border-bottom:1px solid var(--line-soft)}
#rd-root .li:last-child{border-bottom:0}
#rd-root .li .d{flex:0 0 auto;text-align:center;width:42px}
#rd-root .li .d .day{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--label);font-weight:700}
#rd-root .li .d .num{font-family:Newsreader,serif;font-size:18px;font-weight:600;line-height:1}
#rd-root .li .lbody .t{font-size:14px;font-weight:600}
#rd-root .li .lbody .s{font-size:12px;color:var(--label)}
#rd-root .li .tag{margin-left:auto;font-size:10.5px;font-weight:700;color:var(--scrive);background:#f1ebf8;border:1px solid #e2d3f2;padding:3px 9px;border-radius:999px}
/* goals */
#rd-root .goal{padding:13px 18px;border-bottom:1px solid var(--line-soft)}
#rd-root .goal:last-child{border-bottom:0}
#rd-root .goal .gt{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:600}
#rd-root .goal .gp{font-size:12px;color:var(--ink-3);margin:5px 0 8px}
#rd-root .bar{height:7px;border-radius:999px;background:#edf0ec;overflow:hidden}
#rd-root .bar span{display:block;height:100%;background:var(--compass-bright);border-radius:999px}
/* quick actions */
#rd-root .qa{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0}
#rd-root .qbtn{background:#fff;border:1px solid var(--line);border-radius:13px;padding:15px;display:flex;align-items:center;gap:11px;font-size:14px;font-weight:600;color:var(--ink-2);cursor:pointer;text-align:left;width:100%}
#rd-root .qbtn .qi{width:32px;height:32px;border-radius:9px;background:var(--compass-soft);color:var(--compass);display:grid;place-items:center;font-size:15px;flex:0 0 auto}
@media(max-width:760px){#rd-root .qa{grid-template-columns:1fr}}
/* optional plan module */
#rd-root .optdiv{display:flex;align-items:center;gap:12px;margin:30px 0 14px}
#rd-root .optdiv .ln{flex:1;height:1px;background:var(--line)}
#rd-root .optdiv .lbl{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--label);font-weight:700}
#rd-root .planmod{position:relative}
#rd-root .planmod .pmh{padding:20px 20px 6px;display:flex;align-items:center}
#rd-root .planmod .pmh .t{font-family:Newsreader,serif;font-weight:600;font-size:18px}
#rd-root .planmod .pmh .ok{margin-left:auto;font-size:11px;font-weight:700;color:var(--good,#1f7a52);background:var(--good-bg,#eaf6ef);border:1px solid var(--good-line,#bfe3cf);padding:3px 10px;border-radius:999px}
/* Bug-hunt CR-20260703-02: the "watch" verdict badge — the headline used to hardcode "On track" (the .ok
   style above) with no amber counterpart, even though the budget bars beneath it already compute a real
   watch signal. Mirrors .i.watch's colour tokens. */
#rd-root .planmod .pmh .watch{margin-left:auto;font-size:11px;font-weight:700;color:var(--watch,#b07d1a);background:var(--watch-bg,#fbf3e3);border:1px solid var(--watch,#b07d1a);padding:3px 10px;border-radius:999px}
#rd-root .planmod .note{padding:0 20px;font-size:12.5px;color:var(--label)}
#rd-root .pm4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:14px 20px 8px}
#rd-root .pmcell{border:1px solid var(--line);border-radius:11px;padding:13px}
#rd-root .pmcell .k{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--label);font-weight:700}
#rd-root .pmcell .v{font-family:Newsreader,serif;font-size:17px;font-weight:600;margin-top:4px}
#rd-root .pmcell .vs{font-size:12px;color:var(--ink-3)}
#rd-root .budget{padding:6px 20px 18px}
#rd-root .bl{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink-2);padding:7px 0}
#rd-root .bl .blnm{flex:0 0 230px}
#rd-root .bl .track{flex:1;height:6px;border-radius:999px;background:#edf0ec;overflow:hidden}
#rd-root .bl .track span{display:block;height:100%;background:var(--compass-bright)}
#rd-root .bl .amt{font-size:12px;color:var(--label);white-space:nowrap}
@media(max-width:760px){#rd-root .pm4{grid-template-columns:1fr 1fr}#rd-root .bl .blnm{flex-basis:140px}}
#rd-root .footrow .b{font-size:12.5px;font-weight:600;border:1px solid var(--line);background:#fff;border-radius:9px;padding:8px 13px;color:var(--ink-2);cursor:pointer}
#rd-root .footrow .sp{margin-left:auto}

/* responsive: rail collapses under 860px */
@media (max-width:860px){
  #rd-root .shell{flex-direction:column}
  #rd-root .rail{width:auto;flex:none;flex-direction:row;align-items:center;gap:6px;min-height:auto;position:static;overflow-x:auto;padding:10px}
  #rd-root .rail .brand{padding:6px 8px}
  #rd-root .rail .railfoot{display:none}
  #rd-root .nav{display:flex;gap:4px}
  #rd-root .nav button{margin-bottom:0;white-space:nowrap;min-height:44px}
  /* AC9 (#123): touch targets >=44px at phone width */
  #rd-root .stepc .go,#rd-root .org .oa,#rd-root .pillbtn,#rd-root .footrow .b,
  #rd-root .herofoot .msg,#rd-root .qbtn,#rd-root .hero .pitch .cta,#rd-root .card .cta,#rd-root .gscreen .g-foot .b,#rd-root .gadd .actions .b,
  #rd-root .appt .act .b,#rd-root .nextup .wbtn{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center}
  #rd-root .org .oa,#rd-root .qbtn{display:flex}
}

/* ===== Goals (mockup: Compass · Mia's goals) — the thread everything hangs on.
   Phone-first: single column, g-head stacks under 600px, evidence = the goal's
   own progress notes only (auto-gathered timeline + AI insight deviations omitted). */
#rd-root .glead{font-size:14.5px;color:var(--ink-3);margin:6px auto 0;max-width:620px;text-align:center}
#rd-root .gscreen .origin{display:flex;align-items:flex-start;gap:12px;background:#fbfdfb;border:1px solid var(--compass-line);border-radius:12px;padding:12px 16px;margin:16px 0 22px;font-size:13px;color:var(--ink-3)}
#rd-root .gscreen .origin .oi{width:28px;height:28px;border-radius:8px;background:var(--compass-soft);color:var(--compass);display:grid;place-items:center;flex:0 0 auto}
#rd-root .gscreen .origin b{color:var(--ink-2);font-weight:600}

#rd-root .gscreen .goal{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 20px;margin-bottom:16px}
#rd-root .gscreen .g-head{display:flex;align-items:flex-start;gap:14px}
#rd-root .gscreen .g-head .gt{flex:1;min-width:0;display:block;font-size:inherit;font-weight:400;gap:0}
#rd-root .gscreen .g-title{font-family:Newsreader,serif;font-weight:600;font-size:19px;line-height:1.25}
#rd-root .gscreen .g-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px}
#rd-root .gscreen .g-meta .chip{font-size:11px;font-weight:600;border-radius:999px;padding:3px 10px;white-space:nowrap}
#rd-root .gscreen .g-meta .chip.area{color:var(--compass);background:var(--compass-soft);border:1px solid var(--compass-line)}
#rd-root .gscreen .g-meta .chip.start{color:#50554d;background:#f1efe8;border:1px solid var(--line)}
#rd-root .gscreen .g-meta .chip.prog{color:#8a5e15;background:var(--amber-bg);border:1px solid var(--amber-line)}
#rd-root .gscreen .g-meta .chip.well{color:var(--good);background:var(--good-bg);border:1px solid var(--good-line)}
#rd-root .gscreen .g-target{font-size:12px;color:var(--label)}
#rd-root .gscreen .g-src{font-size:11.5px;color:var(--label);margin-top:7px;display:flex;align-items:center;gap:6px}

#rd-root .gscreen .prog-wrap{flex:0 0 auto;text-align:right;min-width:130px}
#rd-root .gscreen .prog-wrap .bar{display:flex;gap:4px;justify-content:flex-end;margin-bottom:6px;height:auto;background:none;border-radius:0;overflow:visible}
#rd-root .gscreen .prog-wrap .seg{width:22px;height:7px;border-radius:4px;background:#eee7da}
#rd-root .gscreen .prog-wrap .seg.on{background:var(--coral)}
#rd-root .gscreen .prog-lbl{font-size:11px;color:var(--ink-3)}
#rd-root .gscreen .ev-count{font-size:11px;color:var(--label);margin-top:2px}

#rd-root .gscreen .evi{margin-top:16px;border-top:1px solid var(--line-soft);padding-top:14px}
#rd-root .gscreen .evi-lab{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--label);font-weight:700;margin-bottom:10px}
#rd-root .gscreen .ev{display:flex;gap:11px;padding:7px 0}
#rd-root .gscreen .ev .dot{width:9px;height:9px;border-radius:50%;margin-top:5px;flex:0 0 auto;background:#cdb89d}
#rd-root .gscreen .ev .ec{flex:1;min-width:0}
#rd-root .gscreen .ev .etxt{font-size:13px;color:var(--ink-3)}
#rd-root .gscreen .ev .edate{font-size:10.5px;color:var(--label);margin-top:2px}
#rd-root .gscreen .evi .none{font-size:13px;color:var(--label);margin:0}

#rd-root .gscreen .g-foot{display:flex;align-items:center;gap:10px;margin-top:14px;flex-wrap:wrap}
#rd-root .gscreen .g-foot .review{flex:1;font-size:12px;color:var(--compass);display:flex;align-items:center;gap:6px;min-width:200px}
#rd-root .gscreen .g-foot .b{font-family:inherit;font-size:12.5px;font-weight:600;border:1px solid var(--line);background:#fff;border-radius:9px;padding:8px 13px;color:var(--ink-2);cursor:pointer}

#rd-root .gadd{border:1px dashed var(--compass-line);background:#fbfdfb;border-radius:14px;padding:15px 17px;margin-top:6px}
#rd-root .gadd summary{cursor:pointer;font-family:Newsreader,serif;font-weight:600;font-size:15px;color:var(--compass);list-style:none;display:flex;align-items:center;gap:9px;min-height:44px}
#rd-root .gadd summary::-webkit-details-marker{display:none}
#rd-root .gadd summary .plus{width:24px;height:24px;border-radius:7px;background:var(--compass-soft);color:var(--compass);display:grid;place-items:center;font-size:16px;flex:0 0 auto}
#rd-root .gadd .ax{font-size:12.5px;color:var(--ink-3);margin:10px 0 0 33px}
#rd-root .gadd .actions{margin:14px 0 0 33px;display:flex}
#rd-root .gadd .actions .b{font-family:inherit;font-size:12.5px;font-weight:600;border-radius:9px;padding:9px 15px;cursor:pointer;background:var(--compass);color:#fff;border:1px solid var(--compass)}

#rd-root .gempty{background:#fbfdfb;border:1px solid var(--compass-line);border-radius:14px;padding:20px;text-align:center}
#rd-root .gempty p{font-size:14px;color:var(--ink-3);margin:0 0 14px;max-width:420px;margin-left:auto;margin-right:auto}
#rd-root .gempty .b{font-family:inherit;font-size:13px;font-weight:600;border-radius:9px;padding:10px 18px;cursor:pointer;background:var(--compass);color:#fff;border:1px solid var(--compass);min-height:44px}

@media(max-width:600px){
  #rd-root .gscreen .g-head{flex-direction:column;align-items:stretch}
  #rd-root .gscreen .prog-wrap{text-align:left;min-width:0;margin-top:4px}
  #rd-root .gscreen .prog-wrap .bar{justify-content:flex-start}
}

/* ===== Appointments (mockup: Compass · Mia's appointments) — the calendar that fills
   itself and closes into the record. Phone-first: single column, hero stacks, appt rows
   wrap. OMITTED (real-data-only): source badge, goal-link line, invite-to-connect block,
   Bring/Ask split. The NEXT UP hero is light-on-dark green (the locked mockup surface):
   the muted greens/whites below are one-off neutrals scoped to that dark gradient where
   no #rd-root token applies — same approach the mockup took. */
#rd-root .seclabel{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--label);font-weight:700;margin:24px 2px 12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
#rd-root .seclabel .hint{font-weight:500;letter-spacing:0;text-transform:none;color:var(--label);font-size:12px}

/* NEXT UP hero */
#rd-root .nextup{background:linear-gradient(120deg,var(--compass-2),var(--compass));color:#fff;border-radius:18px;overflow:hidden;margin-bottom:6px}
#rd-root .nextup .nu-top{padding:18px 22px 16px;display:flex;gap:18px;align-items:flex-start}
#rd-root .nextup .nu-date{flex:0 0 auto;text-align:center;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:10px 16px}
#rd-root .nextup .nu-date .d{font-family:Newsreader,serif;font-size:30px;font-weight:600;line-height:1}
#rd-root .nextup .nu-date .m{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#bcd3c6;margin-top:2px}
#rd-root .nextup .nu-main{flex:1;min-width:0}
#rd-root .nextup .nu-eyebrow{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#bcd3c6;font-weight:700}
#rd-root .nextup .nu-title{font-family:Newsreader,serif;font-weight:600;font-size:22px;margin:6px 0 2px;line-height:1.2}
#rd-root .nextup .nu-type{margin:6px 0 2px}
#rd-root .nextup .nu-type .type{color:#eaf3ee;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22)}
#rd-root .nextup .nu-when{font-size:14px;color:#d4e2d9}
#rd-root .nextup .nu-prep{background:rgba(255,255,255,.07);border-top:1px solid rgba(255,255,255,.12);padding:14px 22px}
#rd-root .nextup .nu-prep .k{font-size:11px;color:#9fc2b0;font-weight:600}
#rd-root .nextup .nu-prep .v{font-size:13.5px;color:#eaf3ee;margin-top:2px}
#rd-root .nextup .nu-foot{display:flex;align-items:center;gap:10px;padding:12px 22px;background:rgba(0,0,0,.12);flex-wrap:wrap}
#rd-root .nextup .nu-foot .last{font-size:12px;color:#cdddd3;flex:1;min-width:200px}
#rd-root .nextup .wbtn{font-family:inherit;font-size:13px;font-weight:600;border-radius:9px;padding:9px 14px;cursor:pointer;border:1px solid rgba(255,255,255,.25);background:transparent;color:#fff}
#rd-root .nextup .wbtn.solid{background:#fff;color:var(--compass);border-color:#fff}

/* appointment row */
#rd-root .appt{display:flex;gap:15px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:10px}
#rd-root .appt .date{flex:0 0 auto;text-align:center;width:50px}
#rd-root .appt .date .d{font-family:Newsreader,serif;font-size:23px;font-weight:600;color:var(--compass);line-height:1}
#rd-root .appt .date .m{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--label);margin-top:1px}
#rd-root .appt .date .dow{font-size:11px;color:var(--ink-3);margin-top:4px}
#rd-root .appt .body{flex:1;min-width:0}
#rd-root .appt .nm{font-family:Newsreader,serif;font-weight:600;font-size:16.5px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
#rd-root .appt .type{font-size:11px;font-weight:600;color:var(--compass);background:var(--compass-soft);border:1px solid var(--compass-line);border-radius:999px;padding:2px 9px}
#rd-root .appt .when{font-size:13px;color:var(--ink-3);margin-top:3px}
#rd-root .appt .act{display:flex;flex-direction:column;gap:6px;align-items:flex-end;flex:0 0 auto}
#rd-root .appt .act .b{font-family:inherit;font-size:12.5px;font-weight:600;border:1px solid var(--line);background:#fff;border-radius:9px;padding:8px 13px;color:var(--ink-2);cursor:pointer;white-space:nowrap}

/* outcome (past) */
#rd-root .appt.past{background:#fcfbf8}
#rd-root .appt.past .date .d{color:var(--ink-3)}
#rd-root .appt .outcome{margin-top:9px;background:var(--good-bg);border:1px solid var(--good-line);border-radius:11px;padding:10px 12px}
#rd-root .appt .outcome .or{font-size:12.5px;color:var(--good);display:flex;align-items:center;gap:8px;font-weight:600}
#rd-root .appt .outcome .or .dot{width:7px;height:7px;border-radius:50%;background:var(--good);flex:0 0 auto}
#rd-root .appt .outcome .note{font-size:12.5px;color:var(--ink-3);margin-top:6px;font-style:italic}

/* record loop callout */
#rd-root .loop{display:flex;align-items:flex-start;gap:13px;background:#fbfdfb;border:1px solid var(--compass-line);border-radius:13px;padding:15px 17px;margin:14px 0 4px}
#rd-root .loop .li{width:30px;height:30px;border-radius:9px;background:var(--compass-soft);color:var(--compass);display:grid;place-items:center;font-size:15px;flex:0 0 auto}
#rd-root .loop .lt{font-family:Newsreader,serif;font-weight:600;font-size:15px}
#rd-root .loop .lx{font-size:12.5px;color:var(--ink-3);margin-top:2px}
#rd-root .loop a{font-weight:600;cursor:pointer}

@media(max-width:600px){
  #rd-root .nextup .nu-top{flex-direction:column;gap:12px}
  #rd-root .appt{flex-wrap:wrap}
  #rd-root .appt .act{flex-direction:row;align-items:center;width:100%;margin-top:4px}
}

/* ===== Participant's OWN home (mockup: Compass · Mia's home) — Pillar 3, first-person,
   warm, voice-first, phone-first. The guardian rail + topbar are hidden for a participant
   (the class is toggled in rdRoute and removed for non-participants); this screen renders
   its own warm header. Compass tokens only. Mockup --sage→--compass, --cream→--canvas,
   --coral→--coral, --good→--good, --ink-2→--ink-3. OMITTED (no backend, Richard 2026-06-15):
   the mood picker + the mic/voice capture. The deferred "I need help" channel is a marked
   design-deferred annotation (dashed). */
#rd-root.participant .rail{display:none}
#rd-root.participant .topbar{display:none}
#rd-root.participant .main{padding-top:16px}
/* Single-column, phone-first reading column for the participant home. */
/* P3: bottom padding (incl. safe area) so content scrolls clear of the floating tabbar. */
#rd-root.participant .main{padding-left:clamp(14px,4vw,40px);padding-right:clamp(14px,4vw,40px);padding-bottom:calc(96px + env(safe-area-inset-bottom))}
#rd-root .mia{width:100%;max-width:480px;margin:0 auto}

/* greeting */
#rd-root .mia-top{background:linear-gradient(160deg,#fffdf9,var(--canvas));border:1px solid var(--line);border-radius:22px;padding:22px 20px 18px;margin-bottom:18px}
#rd-root .mia-hello{display:flex;align-items:center;gap:14px}
#rd-root .mia-me{width:58px;height:58px;border-radius:50%;background:var(--compass-soft);color:var(--compass);display:grid;place-items:center;font-weight:600;font-size:24px;flex:0 0 auto;box-shadow:inset 0 0 0 3px #fff}
#rd-root .mia-hi{font-family:Newsreader,serif;font-weight:600;font-size:30px;line-height:1.05;margin:0;color:var(--ink)}
#rd-root .mia-day{font-size:16px;color:var(--ink-3);margin-top:3px;text-transform:capitalize}
#rd-root .mia-readme{margin-top:16px;width:100%;display:flex;align-items:center;justify-content:center;gap:11px;background:var(--compass);color:#fff;border:none;border-radius:16px;padding:15px;font-size:17px;font-weight:600;cursor:pointer;min-height:44px}
#rd-root .mia-readme svg{width:22px;height:22px;flex:0 0 auto}

/* section heading + read-aloud button */
#rd-root .mia-block{margin-bottom:24px}
#rd-root .mia-sectiontitle{display:flex;align-items:center;gap:12px;margin:0 0 14px}
#rd-root .mia-sectiontitle h2{font-family:Newsreader,serif;font-weight:600;font-size:23px;margin:0;flex:1;color:var(--ink)}
#rd-root .mia-block .spk{width:44px;height:44px;border-radius:50%;background:#fff;border:1px solid var(--line);display:grid;place-items:center;flex:0 0 auto;cursor:pointer}
#rd-root .mia-block .spk svg{width:19px;height:19px;color:var(--compass)}

/* cards */
#rd-root .mia-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px 17px}
#rd-root .mia-soft{background:#fbfdfb;border-color:var(--compass-line)}
#rd-root .mia-soft p{margin:0;font-size:15px;color:var(--ink-3)}
#rd-root .mia-today{font-size:18px;line-height:1.5;color:var(--ink);margin:0;white-space:pre-wrap}

/* goals — warm, simple list */
#rd-root .mia-goal{display:flex;align-items:center;gap:14px;padding:14px 0}
#rd-root .mia-goal + .mia-goal{border-top:1px solid var(--line)}
#rd-root .mia-goal:first-child{padding-top:2px}
#rd-root .mia-goal:last-child{padding-bottom:2px}
#rd-root .mia-goal .gi{width:46px;height:46px;border-radius:13px;background:var(--compass-soft);color:var(--compass);display:grid;place-items:center;flex:0 0 auto;font-size:20px}
#rd-root .mia-goal .gt{font-size:17.5px;line-height:1.35;color:var(--ink)}
#rd-root .mia-goal .gd{font-size:13.5px;color:var(--good);font-weight:600;margin-top:3px}

/* people — circle */
#rd-root .mia-people{display:flex;gap:16px;flex-wrap:wrap;justify-content:space-around;padding:4px 0 0}
#rd-root .mia-person{display:flex;flex-direction:column;align-items:center;gap:9px;width:84px}
#rd-root .mia-person .pf{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:600;font-size:22px}
#rd-root .mia-person .pn{font-size:14px;font-weight:600;color:var(--ink);text-align:center}
#rd-root .mia-person .pr{font-size:12px;color:var(--ink-3);text-align:center;margin-top:-6px}

/* your words — link into Moments */
#rd-root .mia-words{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px 17px;cursor:pointer;font:inherit;min-height:44px}
#rd-root .mia-words .wi{width:46px;height:46px;border-radius:13px;background:var(--compass-soft);color:var(--compass);display:grid;place-items:center;flex:0 0 auto;font-size:22px}
#rd-root .mia-words .wt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
#rd-root .mia-words .wt1{font-size:17px;font-weight:600;color:var(--ink)}
#rd-root .mia-words .wt2{font-size:13.5px;color:var(--ink-3)}
#rd-root .mia-words .wa{color:var(--compass);font-size:20px;flex:0 0 auto}

/* deferred safeguarding channel — design annotation, NOT live in v1 */
#rd-root .mia-deferred{border:2px dashed var(--gold-line);background:var(--gold-soft);border-radius:16px;padding:16px;margin:8px 0 24px}
/* P3: darker amber (~#8a6508) so the small uppercase label reaches ~4.5:1 on --gold-soft. */
#rd-root .mia-deferred .dh{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#8a6508}
#rd-root .mia-deferred .dt{font-family:Newsreader,serif;font-size:17px;margin:9px 0 5px;color:var(--ink)}
#rd-root .mia-deferred .dx{font-size:13.5px;color:var(--ink-3);line-height:1.5}
#rd-root .mia-deferred .dx b{color:var(--ink-2)}

/* phone-first bottom nav */
/* P3: respect the iOS home-indicator safe area so the floating bar clears the gesture zone. */
#rd-root .mia-tabbar{display:flex;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;position:sticky;bottom:calc(12px + env(safe-area-inset-bottom));box-shadow:0 8px 24px -16px rgba(44,74,62,.5)}
#rd-root .mia-tab{flex:1;padding:11px 0 12px;display:flex;flex-direction:column;align-items:center;gap:4px;border:none;background:none;color:var(--ink-3);cursor:pointer;font:inherit;min-height:44px;position:relative}
#rd-root .mia-tab .ti{font-size:20px;line-height:1}
#rd-root .mia-tab span:last-child{font-size:12px;font-weight:600}
/* P2-5 (WCAG 1.4.1): the active tab is not distinguished by colour alone — bold weight + top indicator bar. */
#rd-root .mia-tab.on{color:var(--compass);font-weight:700}
#rd-root .mia-tab.on span:last-child{font-weight:700}
#rd-root .mia-tab.on::before{content:"";position:absolute;top:0;left:22%;right:22%;height:3px;border-radius:0 0 3px 3px;background:var(--compass)}

@media(max-width:600px){
  #rd-root.participant .main{padding-top:14px}
  #rd-root .mia-hi{font-size:27px}
  #rd-root .mia-sectiontitle h2{font-size:21px}
}

/* ===== Circle (mockup: Compass · Mia's circle) — care circle. Scoped to .circle so no
   cross-screen leak (Wave-1 lesson). Reuses global .phead/.seclabel/.loading. */
#rd-root .circle .aboutme{background:linear-gradient(120deg,#27433a,#2c4a3e);color:#fff;border-radius:18px;overflow:hidden;margin:4px 0 6px}
#rd-root .circle .aboutme .ah{padding:20px 22px 16px}
#rd-root .circle .aboutme .eb{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#bcd3c6;font-weight:700}
#rd-root .circle .aboutme h2{font-family:Newsreader,serif;font-weight:600;font-size:23px;margin:8px 0 0}
#rd-root .circle .aboutme .promise{font-size:14px;color:#d4e2d9;margin:9px 0 0;max-width:560px}
#rd-root .circle .aboutme .promise b{color:#fff}
#rd-root .circle .ampreview{background:rgba(255,255,255,.07);border-top:1px solid rgba(255,255,255,.12);padding:14px 22px;display:grid;grid-template-columns:1fr 1fr;gap:12px 26px}
#rd-root .circle .ampreview .amload{color:#d4e2d9;margin:0;grid-column:1/-1;font-size:13px}
#rd-root .circle .amf .k{font-size:11px;color:#9fc2b0;font-weight:600}
#rd-root .circle .amf .v{font-size:13.5px;color:#eaf3ee;margin-top:2px}
#rd-root .circle .amfoot{display:flex;align-items:center;gap:12px;padding:13px 22px;background:rgba(0,0,0,.12);flex-wrap:wrap}
#rd-root .circle .amfoot .live{font-size:12px;color:#bcd3c6;display:flex;align-items:center;gap:7px}
#rd-root .circle .amfoot .live .d{width:7px;height:7px;border-radius:50%;background:#8fe0bf;flex:0 0 auto}
/* Reciprocal provider→family medical/emergency card (platform #182): a calm, light, read-only card
   with an Aura accent — distinct from the family's own green About-Me hero, so the incoming-from-Aura
   direction is legible at a glance. Higher specificity (.aboutme.provshare) overrides the green hero. */
#rd-root .circle .aboutme.provshare{background:#fff;color:var(--ink);border:1px solid var(--line);border-left:4px solid var(--aura)}
#rd-root .circle .aboutme.provshare .eb{color:var(--aura)}
#rd-root .circle .aboutme.provshare h2{color:var(--ink);font-size:20px}
#rd-root .circle .aboutme.provshare .promise{color:var(--label)}
#rd-root .circle .aboutme.provshare .ampreview{background:transparent;border-top:1px solid var(--line)}
#rd-root .circle .aboutme.provshare .amf .k{color:var(--aura)}
#rd-root .circle .aboutme.provshare .amf .v{color:var(--ink)}
#rd-root .circle .amfoot .sp{margin-left:auto;display:flex;gap:9px}
#rd-root .circle .wbtn{font-family:inherit;font-size:13px;font-weight:600;border-radius:9px;padding:9px 14px;cursor:pointer;border:1px solid rgba(255,255,255,.25);background:transparent;color:#fff;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
#rd-root .circle .wbtn.solid{background:#fff;color:var(--compass);border-color:#fff}
#rd-root .circle .member{background:#fff;border:1px solid var(--line);border-radius:14px;padding:15px 17px;margin-bottom:11px;display:flex;align-items:flex-start;gap:14px}
#rd-root .circle .member .mav{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:#fff;font-weight:700;font-size:15px;flex:0 0 auto;background:var(--compass)}
#rd-root .circle .member .mid{flex:1;min-width:0}
#rd-root .circle .member .mn{font-family:Newsreader,serif;font-weight:600;font-size:17px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
#rd-root .circle .member .role{font-size:12.5px;color:var(--label);margin-top:1px}
#rd-root .circle .status{font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px}
#rd-root .circle .status.active{color:var(--good);background:var(--good-bg)}
#rd-root .circle .status.you{color:var(--coral);background:#f7ece5;border:1px solid #eccdbd}
#rd-root .circle .status.pend{color:#8a4527;background:#f7ece5;border:1px solid #eccdbd}
#rd-root .circle .member .mact{display:flex;flex-direction:column;gap:6px;flex:0 0 auto;align-items:flex-end}
#rd-root .circle .member.seat{border:1px dashed var(--compass-line);background:#fbfdfb}
#rd-root .circle .b{font-family:inherit;font-size:12.5px;font-weight:600;border:1px solid var(--line);background:#fff;border-radius:9px;padding:8px 13px;color:var(--ink-2);cursor:pointer;white-space:nowrap;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
#rd-root .circle .b.solid{background:var(--compass);color:#fff;border-color:var(--compass)}
#rd-root .circle .b.coral{background:#B5532F;color:#fff;border-color:#B5532F}
#rd-root .circle .grow{display:grid;grid-template-columns:1.3fr 1fr;gap:13px}
#rd-root .circle .gcard{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px}
#rd-root .circle .gcard .gt{font-family:Newsreader,serif;font-weight:600;font-size:16px}
#rd-root .circle .gcard .gx{font-size:12.5px;color:var(--ink-3);margin:4px 0 12px}
#rd-root .circle .code{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
#rd-root .circle .code .cc{font-family:Newsreader,serif;font-weight:700;font-size:20px;letter-spacing:.08em;color:var(--compass);background:var(--compass-soft);border:1px solid var(--compass-line);border-radius:10px;padding:8px 14px}
#rd-root .circle .code .cb{font-size:12px;font-weight:600;color:var(--compass);border:1px solid var(--compass-line);border-radius:8px;padding:7px 11px;cursor:pointer;background:#fff;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
#rd-root .circle .orline{font-size:12.5px;color:var(--label);margin:12px 0 8px}
#rd-root .circle .emrow{display:flex;gap:8px}
#rd-root .circle .emrow input{flex:1;min-width:0;font-family:inherit;font-size:16px;border:1px solid var(--line);border-radius:9px;padding:10px 12px}
#rd-root .circle .control{margin-top:20px;display:flex;align-items:flex-start;gap:12px;background:#fbfdfb;border:1px solid var(--compass-line);border-radius:13px;padding:15px 17px}
#rd-root .circle .control .ci{width:30px;height:30px;border-radius:9px;background:var(--compass-soft);color:var(--compass);display:grid;place-items:center;font-size:15px;flex:0 0 auto}
#rd-root .circle .control .ct{font-family:Newsreader,serif;font-weight:600;font-size:15px}
#rd-root .circle .control .cx{font-size:12.5px;color:var(--ink-3);margin-top:2px}
@media(max-width:620px){
  #rd-root .circle .ampreview{grid-template-columns:1fr}
  #rd-root .circle .grow{grid-template-columns:1fr}
  #rd-root .circle .member{flex-wrap:wrap}
  #rd-root .circle .member .mact{flex-direction:row;width:100%;justify-content:flex-end;align-items:center}
}

/* ===== Settings (mockup: Compass · Settings) — modal over #rd-root. Scoped to .setmodal so the
   generic .row/.tg/.panel/.cat/.seg classes never leak to other screens (Wave-1 lesson). */
#rd-root .setmodal{position:fixed;inset:0;background:rgba(20,28,22,.4);display:flex;align-items:center;justify-content:center;padding:24px;z-index:60}
#rd-root .setmodal .modal{width:100%;max-width:840px;height:min(86vh,640px);background:#fff;border-radius:18px;box-shadow:0 30px 80px rgba(10,20,14,.4);display:flex;flex-direction:column;overflow:hidden}
#rd-root .setmodal .m-top{display:flex;align-items:center;padding:14px 20px;border-bottom:1px solid var(--line-soft);flex:0 0 auto}
#rd-root .setmodal .m-top h2{font-family:Newsreader,serif;font-weight:600;font-size:19px;margin:0}
#rd-root .setmodal .m-top .x{margin-left:auto;width:44px;height:44px;border-radius:8px;border:1px solid var(--line);background:#fff;color:var(--ink-3);font-size:16px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
#rd-root .setmodal .m-body{flex:1;display:flex;min-height:0}
#rd-root .setmodal .cats{width:216px;flex:0 0 216px;border-right:1px solid var(--line-soft);padding:14px 12px;display:flex;flex-direction:column;background:#fdfcf9;overflow-y:auto}
#rd-root .setmodal .cat{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:none;background:none;color:var(--ink-2);font-size:13.5px;padding:10px;border-radius:9px;margin-bottom:2px;min-height:44px;cursor:pointer}
#rd-root .setmodal .cat .ci{width:16px;text-align:center;opacity:.6;flex:0 0 auto}
#rd-root .setmodal .cat.on{background:var(--compass-soft);color:var(--compass);font-weight:600}
#rd-root .setmodal .cat.on .ci{opacity:1}
#rd-root .setmodal .cats .spacer{flex:1}
#rd-root .setmodal .cat.signout{color:var(--ink-3)}
#rd-root .setmodal .panel{flex:1;min-width:0;overflow-y:auto;padding:20px 24px}
#rd-root .setmodal .pane{display:none}
#rd-root .setmodal .pane.on{display:block}
#rd-root .setmodal .pane h3{font-family:Newsreader,serif;font-weight:600;font-size:18px;margin:0 0 4px}
#rd-root .setmodal .pane .sub{font-size:13px;color:var(--ink-3);margin:0 0 18px;max-width:460px}
#rd-root .setmodal .row{display:flex;align-items:center;gap:16px;padding:14px 0;border-top:1px solid var(--line-soft)}
#rd-root .setmodal .row:first-of-type{border-top:none}
#rd-root .setmodal .row .rl{flex:1;min-width:0}
#rd-root .setmodal .row .rk{font-size:14px;font-weight:600}
#rd-root .setmodal .row .rd{font-size:12.5px;color:var(--ink-3);margin-top:2px}
#rd-root .setmodal .row .rv{font-size:13.5px;color:var(--ink-2)}
#rd-root .setmodal .lb{font-family:inherit;font-size:12.5px;font-weight:600;border:1px solid var(--line);background:#fff;border-radius:9px;padding:8px 13px;color:var(--ink-2);min-height:44px;cursor:pointer;flex:0 0 auto}
#rd-root .setmodal .lb.compass{background:var(--compass);color:#fff;border-color:var(--compass)}
#rd-root .setmodal .lb[disabled]{opacity:.5;cursor:default}
#rd-root .setmodal .tg{width:42px;height:24px;border-radius:999px;background:#dcd6c8;position:relative;flex:0 0 auto;transition:background .15s;border:none;cursor:pointer;padding:0}
#rd-root .setmodal .tg::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:left .15s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
#rd-root .setmodal .tg.on{background:var(--compass)}
#rd-root .setmodal .tg.on::after{left:21px}
#rd-root .setmodal .seg{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden}
#rd-root .setmodal .seg button{border:none;background:#fff;font-size:12.5px;padding:9px 13px;color:var(--ink-2);cursor:pointer;min-height:44px}
#rd-root .setmodal .seg button.on{background:var(--compass-soft);color:var(--compass);font-weight:600}
#rd-root .setmodal .owncard{background:#fbfdfb;border:1px solid var(--compass-line);border-radius:13px;padding:16px 18px;margin-bottom:18px}
#rd-root .setmodal .owncard .ot{font-family:Newsreader,serif;font-weight:600;font-size:16px}
#rd-root .setmodal .owncard .ox{font-size:13px;color:var(--ink-3);margin:5px 0 0}
#rd-root .setmodal .danger{border:1px solid #eccabf;background:#fbf0ec;border-radius:13px;padding:16px 18px;margin-top:20px}
#rd-root .setmodal .danger .dl{font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:#a8412a}
#rd-root .setmodal .danger .dt{font-weight:600;font-size:14px;margin-top:8px}
#rd-root .setmodal .danger .dx{font-size:12.5px;color:var(--ink-3);margin-top:4px}
#rd-root .setmodal .danger button{margin-top:12px;border:1px solid #eccabf;background:#fff;color:#a8412a;font-weight:600;font-size:12.5px;border-radius:9px;padding:9px 14px;min-height:44px;cursor:pointer}
@media(max-width:620px){
  #rd-root .setmodal{padding:0}
  #rd-root .setmodal .modal{max-width:100%;height:100%;border-radius:0}
  #rd-root .setmodal .m-body{flex-direction:column}
  #rd-root .setmodal .cats{width:auto;flex:0 0 auto;flex-direction:row;overflow-x:auto;border-right:none;border-bottom:1px solid var(--line-soft);gap:6px;padding:10px}
  #rd-root .setmodal .cat{width:auto;white-space:nowrap;margin-bottom:0}
  #rd-root .setmodal .cats .spacer{display:none}
  #rd-root .setmodal .cat.signout{margin-left:auto}
}

/* ===== Plan review prep (mockup: Compass · Plan review prep). Scoped to .preprep. */
#rd-root .preprep .prep-hero{background:linear-gradient(180deg,#fbfdfb,#fff);border:1px solid var(--line);border-radius:16px;padding:24px 24px 22px;margin-bottom:18px;overflow:hidden}
#rd-root .preprep .prep-hero .eb{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--compass-bright);font-weight:700}
#rd-root .preprep .prep-hero h1{font-family:Newsreader,serif;font-weight:600;font-size:27px;line-height:1.14;margin:9px 0 0;max-width:620px}
#rd-root .preprep .prep-hero p{font-size:15.5px;color:var(--ink-3);margin:12px 0 0;max-width:580px}
#rd-root .preprep .prep-hero .uni{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-size:12.5px;font-weight:600;color:var(--compass);background:var(--compass-soft);border:1px solid var(--compass-line);border-radius:999px;padding:6px 13px}
#rd-root .preprep .prep-steplabel{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--label);font-weight:700;margin:24px 2px 4px}
#rd-root .preprep .prep-intro{font-size:14px;color:var(--ink-3);margin:0 0 14px;max-width:640px}
#rd-root .preprep .prep-paths{display:flex;flex-direction:column;gap:14px}
#rd-root .preprep .prep-path{border:1px solid var(--line);border-radius:16px;background:#fff;overflow:hidden}
#rd-root .preprep .prep-path .ph{display:flex;align-items:flex-start;gap:14px;padding:18px 20px}
#rd-root .preprep .prep-path .pi{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;font-size:18px;flex:0 0 auto;background:#eef1ec;color:#8a9186}
#rd-root .preprep .prep-path.best{border-color:var(--compass-line);box-shadow:0 16px 34px -26px rgba(44,74,62,.4)}
#rd-root .preprep .prep-path.best .pi{background:var(--compass);color:#fff}
#rd-root .preprep .prep-path .pt{font-family:Newsreader,serif;font-weight:600;font-size:17px}
#rd-root .preprep .prep-path .px{font-size:13.5px;color:var(--ink-3);margin-top:4px}
#rd-root .preprep .prep-path .tag{font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:2px 8px;border-radius:999px;margin-left:8px;vertical-align:middle;color:#fff;background:var(--compass);white-space:nowrap}
#rd-root .preprep .prep-path .tag.soft{color:var(--compass);background:var(--compass-soft);border:1px solid var(--compass-line)}
#rd-root .preprep .prep-actions{padding:0 20px 18px;display:flex}
#rd-root .preprep .b{font-family:inherit;font-size:13px;font-weight:600;border:1px solid var(--line);background:#fff;border-radius:10px;padding:10px 15px;color:var(--ink-2);cursor:pointer;white-space:nowrap;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
#rd-root .preprep .b.solid{background:var(--compass);color:#fff;border-color:var(--compass)}
#rd-root .preprep .prep-confirm{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 20px}
#rd-root .preprep .prep-confirm .ct{font-family:Newsreader,serif;font-weight:600;font-size:17px}
#rd-root .preprep .prep-confirm .cs{font-size:13px;color:var(--ink-3);margin:4px 0 14px}
#rd-root .preprep .prep-chips{display:flex;flex-direction:column;gap:8px}
#rd-root .preprep .pchip{display:flex;align-items:center;gap:11px;background:var(--rail);border:1px solid var(--line);border-radius:10px;padding:10px 13px;flex-wrap:wrap}
#rd-root .preprep .pchip .ck{width:20px;height:20px;border-radius:50%;background:var(--good-bg);color:var(--good);display:grid;place-items:center;font-size:10px;font-weight:700;flex:0 0 auto}
#rd-root .preprep .pchip .lab{font-size:12px;color:var(--label);width:130px;flex:0 0 auto}
#rd-root .preprep .pchip .val{font-size:13.5px;font-weight:600}
#rd-root .preprep .prep-payoff{background:#fff;border:1px solid var(--compass-line);border-radius:16px;padding:0;overflow:hidden;margin-top:18px}
#rd-root .preprep .prep-payoff .ph2{padding:18px 22px;background:var(--compass);color:#fff}
#rd-root .preprep .prep-payoff .ph2 .e{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#bcd3c6;font-weight:700}
#rd-root .preprep .prep-payoff .ph2 h2{font-family:Newsreader,serif;font-weight:600;font-size:21px;margin:7px 0 0}
#rd-root .preprep .prep-payoff .ph2 p{font-size:13.5px;color:#d4e2d9;margin:6px 0 0}
#rd-root .preprep .prep-grid{display:grid;grid-template-columns:1fr 1fr;gap:0}
#rd-root .preprep .pcol{padding:16px 20px}
#rd-root .preprep .pcol+.pcol{border-left:1px solid var(--line-soft)}
#rd-root .preprep .rl{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--label);font-weight:700;margin-bottom:10px}
#rd-root .preprep .erow{display:flex;align-items:center;gap:10px;padding:7px 0;font-size:13.5px}
#rd-root .preprep .erow .i{width:20px;height:20px;border-radius:50%;background:var(--good-bg);color:var(--good);display:grid;place-items:center;font-size:10px;flex:0 0 auto}
#rd-root .preprep .erow .i.todo{background:#eef1ec;color:#aeb4aa;border:1px solid var(--line)}
#rd-root .preprep .erow .meta{margin-left:auto;font-size:11.5px;color:var(--label)}
#rd-root .preprep .prep-packbtn{margin:16px 20px 18px;display:block;width:calc(100% - 40px);text-align:center;font-size:14px;font-weight:600;color:#fff;background:var(--compass);border:none;border-radius:11px;padding:14px;cursor:pointer;min-height:44px}
#rd-root .preprep .prep-note{margin-top:20px;font-size:12.5px;color:var(--ink-3);background:#fcfdfc;border:1px solid var(--line);border-radius:11px;padding:13px 15px}
#rd-root .preprep .prep-note b{color:var(--compass)}
@media(max-width:620px){
  #rd-root .preprep .prep-path .ph{flex-wrap:wrap}
  #rd-root .preprep .prep-actions .b{width:100%}
  #rd-root .preprep .prep-grid{grid-template-columns:1fr}
  #rd-root .preprep .pcol+.pcol{border-left:0;border-top:1px solid var(--line-soft)}
  #rd-root .preprep .pchip .lab{width:auto}
}

/* ===== Record / vault (mockup: Compass · Mia's record) — the participant-owned record, read-only.
   Scoped to .record so .ready/.autofill/.cat/.grid/.journey/.act/.share/.note never leak (Wave-1
   lesson). Phone-first: category grid → 1 col ≤560px. Provenance dots use the per-app source tokens
   (--aura navy / --scrive gold / --pilot slate / --coral family) per design-rules Rule 0, not the
   standalone mockup's raw teal. Share button = --cta #B5532F (no #rd-root token for it). */
#rd-root .record .ready{background:linear-gradient(120deg,#27433a,var(--compass));color:#fff;border-radius:16px;padding:18px 22px;margin-bottom:14px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
#rd-root .record .ready .lead{flex:1;min-width:240px}
#rd-root .record .ready .lead .t{font-family:Newsreader,serif;font-weight:600;font-size:19px}
#rd-root .record .ready .lead .s{font-size:13px;color:#cfe0d6;margin-top:4px}
#rd-root .record .ready .pills{display:flex;gap:9px;flex-wrap:wrap}
#rd-root .record .rp{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:7px 12px}
#rd-root .record .rp .d{width:7px;height:7px;border-radius:50%;background:#8fe0bf;flex:0 0 auto}
#rd-root .record .autofill{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 16px;margin-bottom:18px;font-size:13.5px;color:var(--ink-2);flex-wrap:wrap}
#rd-root .record .autofill .big{font-family:Newsreader,serif;font-weight:700;font-size:22px;color:var(--compass)}
#rd-root .record .autofill .via{margin-left:auto;font-size:12px;color:var(--label)}
#rd-root .record .autofill .via b{color:var(--coral)}
#rd-root .record .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:860px){#rd-root .record .grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){#rd-root .record .grid{grid-template-columns:1fr}}
#rd-root .record .cat{background:#fff;border:1px solid var(--line);border-radius:14px;padding:15px 16px;display:flex;flex-direction:column;gap:9px;text-align:left;font:inherit;color:var(--ink);width:100%}
#rd-root .record button.cat{cursor:pointer;transition:border-color .15s,box-shadow .15s}
#rd-root .record button.cat:hover{border-color:var(--compass-line);box-shadow:0 14px 30px -24px rgba(44,74,62,.4)}
#rd-root .record .cat .ch{display:flex;align-items:center;gap:10px}
#rd-root .record .cat .ci{width:34px;height:34px;border-radius:10px;background:var(--compass-soft);color:var(--compass);display:grid;place-items:center;font-size:15px;flex:0 0 auto}
#rd-root .record .cat .cn{font-family:Newsreader,serif;font-weight:600;font-size:16px}
#rd-root .record .cat .cc{margin-left:auto;font-size:12px;color:var(--label);font-weight:600}
#rd-root .record .cat .latest{font-size:12.5px;color:var(--ink-3);line-height:1.5}
#rd-root .record .cat .latest b{color:var(--ink-2);font-weight:600}
#rd-root .record .prov{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--label)}
#rd-root .record .prov .pd{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
#rd-root .record .prov.auto{color:var(--compass)}
#rd-root .record .journey{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 20px;margin:18px 0}
#rd-root .record .journey .jt{font-family:Newsreader,serif;font-weight:600;font-size:16px;margin-bottom:14px}
#rd-root .record .track{display:flex;align-items:flex-start;gap:0;position:relative}
#rd-root .record .track:before{content:"";position:absolute;left:6px;right:6px;top:6px;height:2px;background:var(--compass-line)}
#rd-root .record .jstep{flex:1;text-align:center;position:relative}
#rd-root .record .jstep .jd{width:13px;height:13px;border-radius:50%;background:#fff;border:2px solid var(--compass);margin:0 auto 8px;position:relative;z-index:1}
#rd-root .record .jstep.now .jd{background:var(--coral);border-color:var(--coral)}
#rd-root .record .jstep .jy{font-size:12px;font-weight:700;color:var(--compass)}
#rd-root .record .jstep .jx{font-size:11px;color:var(--label);margin-top:1px}
#rd-root .record .actions{display:flex;gap:11px;flex-wrap:wrap;margin:18px 0 6px}
#rd-root .record .act{flex:1;min-width:200px;display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:13px;padding:14px 16px;cursor:pointer;text-align:left;font:inherit;color:var(--ink);min-height:44px}
#rd-root .record .act .ai{width:34px;height:34px;border-radius:9px;background:var(--compass-soft);color:var(--compass);display:grid;place-items:center;font-size:16px;flex:0 0 auto}
#rd-root .record .act .at{font-weight:600;font-size:14px}
#rd-root .record .act .ax{font-size:12px;color:var(--label)}
#rd-root .record .share{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--coral);border-radius:14px;padding:16px 18px;margin-top:11px}
#rd-root .record .share .si{width:38px;height:38px;border-radius:10px;background:#B5532F;color:#fff;display:grid;place-items:center;font-size:17px;flex:0 0 auto}
#rd-root .record .share .stext{flex:1;min-width:0}
#rd-root .record .share .st{font-family:Newsreader,serif;font-weight:600;font-size:16px}
#rd-root .record .share .sx{font-size:12.5px;color:var(--ink-3);margin-top:2px}
#rd-root .record .share .sb{font-family:inherit;font-size:13px;font-weight:600;color:#fff;background:#B5532F;border:none;border-radius:10px;padding:11px 16px;white-space:nowrap;cursor:pointer;min-height:44px}
#rd-root .record .note{margin-top:18px;font-size:12px;color:var(--ink-3);background:#fcfaf6;border:1px solid var(--line);border-radius:11px;padding:12px 15px;line-height:1.55}
#rd-root .record .note b{color:var(--compass)}
@media(max-width:560px){
  #rd-root .record .ready{padding:16px 18px}
  #rd-root .record .autofill .via{margin-left:0;flex-basis:100%}
  #rd-root .record .share{flex-wrap:wrap}
  #rd-root .record .share .sb{width:100%}
}

/* Record → category detail (Decision 1: the Record is the documents home). */
#rd-root .record .recdetail{max-width:760px;margin:0 auto}
#rd-root .record .recback{font-family:inherit;font-size:13px;font-weight:600;color:var(--compass);background:none;border:none;cursor:pointer;padding:6px 0;margin-bottom:6px;min-height:44px;display:inline-flex;align-items:center;gap:4px}
#rd-root .record .rechead{display:flex;align-items:flex-start;gap:14px;margin-bottom:18px}
#rd-root .record .rechead .ci{width:40px;height:40px;border-radius:11px;background:var(--compass-soft);color:var(--compass);display:grid;place-items:center;font-size:18px;flex:0 0 auto}
#rd-root .record .rechead h1{font-family:Newsreader,serif;font-weight:600;font-size:24px;margin:0}
#rd-root .record .rechead p{font-size:13.5px;color:var(--ink-3);margin:5px 0 0;max-width:560px}
#rd-root .record .reclist{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
#rd-root .record .recrow{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:13px 15px}
#rd-root .record .recrow .rinfo{flex:1;min-width:0}
#rd-root .record .recrow .rn{font-weight:600;font-size:14px;word-break:break-word}
#rd-root .record .recrow .rm{font-size:12px;color:var(--label);margin-top:2px}
#rd-root .record .recrow .ract{display:flex;gap:8px;flex:0 0 auto}
#rd-root .record .recrow .ract button{font-family:inherit;font-size:12.5px;font-weight:600;border:1px solid var(--line);background:#fff;border-radius:9px;padding:8px 13px;color:var(--ink-2);cursor:pointer;min-height:44px}
#rd-root .record .recrow .ract .rdl{color:var(--compass);border-color:var(--compass-line)}
#rd-root .record .recrow .ract .rdel{color:#a8412a;border-color:#eccabf}
#rd-root .record .recempty{background:#fbfdfb;border:1px dashed var(--compass-line);border-radius:12px;padding:20px;text-align:center;font-size:13.5px;color:var(--ink-3)}
#rd-root .record .recadd{font-family:inherit;font-size:13.5px;font-weight:600;color:#fff;background:var(--compass);border:none;border-radius:11px;padding:12px 18px;cursor:pointer;min-height:44px}
#rd-root .record .recform{display:flex;flex-direction:column;gap:14px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px}
#rd-root .record .recform .rfl{display:flex;flex-direction:column;gap:6px;font-size:12.5px;font-weight:600;color:var(--label)}
#rd-root .record .recform input,#rd-root .record .recform select{font-family:inherit;font-size:16px;border:1px solid var(--line);border-radius:9px;padding:10px 12px;background:#fff;color:var(--ink)}
#rd-root .record .reccard{background:#fff;border:1px solid var(--line);border-radius:14px;padding:6px 18px 14px}
#rd-root .record .recfld{padding:12px 0;border-top:1px solid var(--line-soft)}
#rd-root .record .recfld:first-child{border-top:none}
#rd-root .record .recfld .rfk{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--label);font-weight:700}
#rd-root .record .recfld .rfv{font-size:14px;color:var(--ink-2);margin-top:4px;white-space:pre-wrap;word-break:break-word}
#rd-root .record .recerr{font-size:13px;color:#a8412a;background:#fbf0ec;border:1px solid #eccabf;border-radius:9px;padding:10px 12px;margin:2px 0}