/* ════════════════════════════════════════════════════════════════════════
   Scrive redesign — scoped design system (#rd-root overlay)
   Faithful to clearline-docs/mockups/scrive/*. Palette = amber + ink + bone.
   EVERY selector is prefixed #rd-root (id specificity beats the classic SPA's
   global classes). NEVER use @scope in this linked sheet — it parses to 0 rules.
   Wave 1: tokens + shell + Reports home + cold-start + states + Settings modal
   + Participants + honest coming/empty. Grows per screen.
   ════════════════════════════════════════════════════════════════════════ */

#rd-root{
  --bg:#FAF9F5; --surface:#FFFFFF; --ink:#0F1B3D; --ink-2:#3C3F46; --label:#6A7180; --quiet:#6C7179;
  --line:#E7E5DE; --line-soft:#F0EFE9; --rail:#FBFAF6;
  --amber:#D4A645; --amber-deep:#8A6A14; --amber-tint:#FBF4E2; --amber-line:#EBD9AE; --bone:#F5F1E8;
  --cta:#B5532F; --cta-deep:#9A4426;
  --ok:#1F7A52; --ok-bg:#EAF6EF; --ok-line:#BFE3CF;
  --flag:#8A6410; --flag-bg:#FBF1D8; --rrp:#9A3B3B; --rrp-bg:#FBEDED;
  --aura:#142774; --aura-bg:#E7EAF6; --compass:#9A4A2C; --compass-bg:#F6E9E2; --pilot:#534AB7; --pilot-bg:#ECEAF8;
  --font-serif:Newsreader,Georgia,"Times New Roman",serif;
  --font-sans:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --radius:14px; --radius-sm:10px;

  position:fixed; inset:0; z-index:9999; background:var(--bg); color:var(--ink);
  font-family:var(--font-sans); font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased; overflow:auto;
  border-top:3px solid; border-image:linear-gradient(90deg,var(--amber),var(--amber-line),var(--amber)) 1;
  font-synthesis-weight:none;
}
#rd-root *,#rd-root *::before,#rd-root *::after{ box-sizing:border-box; }
#rd-root [data-rd]:focus-visible, #rd-root button:focus-visible, #rd-root [role="button"]:focus-visible{ outline:2px solid var(--amber-deep); outline-offset:2px; border-radius:4px; }

/* ── Shell: rail + page ───────────────────────────────────────────────── */
#rd-root .shell{ display:flex; min-height:100%; }
#rd-root .apprail{ width:230px; flex:0 0 230px; background:var(--rail); border-right:1px solid var(--line); display:flex; flex-direction:column; padding:18px 14px; position:sticky; top:0; height:100vh; overflow:auto; }
#rd-root .brand{ display:flex; align-items:center; gap:9px; padding:2px 6px 16px; }
#rd-root .brand .logo{ width:22px; height:22px; border-radius:6px; background:var(--ink); position:relative; flex:0 0 auto; }
#rd-root .brand .logo::after{ content:""; position:absolute; right:-2px; bottom:-2px; width:7px; height:7px; border-radius:50%; background:var(--amber); }
#rd-root .brand .nm{ font-weight:700; font-size:15px; color:var(--ink); line-height:1; }
#rd-root .brand .ey{ font-size:9.5px; text-transform:uppercase; letter-spacing:.16em; color:var(--label); margin-top:3px; }
#rd-root .navgroup{ font-size:10px; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:var(--quiet); padding:14px 10px 5px; }
#rd-root .rd-nav{ display:flex; align-items:center; gap:10px; min-height:38px; padding:8px 9px; border-radius:7px; color:var(--ink-2); font-size:14px; font-weight:500; cursor:pointer; background:none; border:0; text-align:left; width:100%; font-family:inherit; }
#rd-root .rd-nav:hover{ background:var(--surface); }
#rd-root .rd-nav.on{ background:var(--ink); color:#fff; font-weight:600; }
#rd-root .rd-nav.muted{ opacity:.5; cursor:default; }
#rd-root .rd-nav .ic{ width:18px; text-align:center; opacity:.85; }
#rd-root .rd-nav .ct{ margin-left:auto; font-size:11px; font-weight:700; color:var(--label); }
#rd-root .rd-nav.on .ct{ color:#fff; }
#rd-root .railspace{ flex:1; }
#rd-root .railfoot{ border-top:1px solid var(--line); padding-top:10px; }
#rd-root .railfoot .rd-nav .ic{ opacity:.7; }

#rd-root .page{ flex:1; min-width:0; }
#rd-root .page-inner{ max-width:1000px; margin:0 auto; padding:28px 34px 80px; }
#rd-root .page-inner.narrow{ max-width:760px; padding:36px 40px 80px; }
#rd-root .loading{ color:var(--quiet); font-size:13px; padding:24px 0; }

/* ── Header ───────────────────────────────────────────────────────────── */
#rd-root .head{ display:flex; align-items:flex-start; gap:16px; flex-wrap:wrap; }
#rd-root h1.serif{ font-family:var(--font-serif); font-weight:500; font-size:30px; line-height:1.08; margin:0; letter-spacing:-.01em; }
#rd-root .head .sub{ font-size:13px; color:var(--label); margin-top:6px; }
#rd-root .head .spacer{ flex:1; }
#rd-root .search{ display:flex; align-items:center; gap:8px; min-width:210px; min-height:46px; padding:0 13px; border:1px solid var(--line); border-radius:11px; background:var(--surface); }
#rd-root .search input{ border:0; outline:0; font:inherit; font-size:14px; width:100%; height:44px; background:transparent; color:var(--ink); }
#rd-root .search .mg{ color:var(--quiet); }
#rd-root .btn-cta{ height:44px; display:inline-flex; align-items:center; gap:6px; background:var(--cta); color:#fff; border:0; border-radius:11px; padding:0 16px; font:inherit; font-weight:600; font-size:14px; cursor:pointer; white-space:nowrap; }
#rd-root .btn-cta:hover{ background:var(--cta-deep); }

/* ── Tabs ─────────────────────────────────────────────────────────────── */
#rd-root .tabs{ display:flex; align-items:center; gap:18px; margin:22px 0 4px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
#rd-root .tab{ background:none; border:0; font:inherit; font-size:14px; color:var(--label); cursor:pointer; padding:8px 0; border-bottom:2px solid transparent; margin-bottom:-1px; min-height:44px; min-width:44px; display:inline-flex; align-items:center; }
#rd-root .tab.on{ color:var(--ink); border-bottom-color:var(--amber); font-weight:600; }
#rd-root .tab .c{ opacity:.7; font-weight:700; }
#rd-root .tabs .sort{ margin-left:auto; font-size:12.5px; color:var(--quiet); }

/* ── "Needs you" strip (amber) ────────────────────────────────────────── */
#rd-root .needs{ border:1px solid var(--amber-line); background:var(--amber-tint); border-radius:14px; padding:14px 16px; margin-top:16px; }
#rd-root .needs .nh{ display:flex; align-items:center; gap:9px; font-weight:700; font-size:13px; margin-bottom:8px; }
#rd-root .needs .nh .n{ background:var(--cta); color:#fff; border-radius:999px; padding:1px 8px; font-size:11px; }
#rd-root .nrow{ display:flex; align-items:center; gap:13px; padding:9px 0; border-top:1px solid var(--amber-line); }
#rd-root .nrow:first-of-type{ border-top:0; }
#rd-root .ntag{ flex:0 0 auto; font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; font-weight:700; border-radius:6px; padding:4px 8px; background:var(--surface); color:var(--amber-deep); }
#rd-root .ntag.sign{ background:var(--cta); color:#fff; } #rd-root .ntag.rrp{ background:var(--rrp-bg); color:var(--rrp); } #rd-root .ntag.start{ background:var(--aura-bg); color:var(--aura); }
#rd-root .nrow .nt{ flex:1; min-width:0; font-size:13px; } #rd-root .nrow .nt .l2{ font-size:12px; color:var(--label); margin-top:2px; }
#rd-root .nrow .go{ flex:0 0 auto; background:var(--cta); color:#fff; border:0; border-radius:9px; padding:7px 12px; font:inherit; font-size:12.5px; font-weight:600; cursor:pointer; }

/* ── Report list rows ─────────────────────────────────────────────────── */
#rd-root .rows{ border:1px solid var(--line); border-radius:14px; background:var(--surface); overflow:hidden; margin-top:14px; }
#rd-root .row{ display:flex; align-items:center; gap:14px; padding:14px 17px; border-top:1px solid var(--line-soft); cursor:pointer; }
#rd-root .row:first-child{ border-top:0; }
#rd-root .row:hover{ background:#fffdf8; }
#rd-root .rtype{ width:40px; height:40px; flex:0 0 auto; border-radius:10px; background:var(--amber-tint); color:var(--amber-deep); display:grid; place-items:center; font-size:11px; font-weight:700; text-align:center; line-height:1.05; }
#rd-root .rtype.bsp{ background:var(--pilot-bg); color:var(--pilot); }
#rd-root .rmain{ flex:1; min-width:0; }
#rd-root .rmain .t{ font-weight:600; font-size:14.5px; }
#rd-root .rmain .meta{ font-size:12px; color:var(--label); margin-top:3px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
#rd-root .src{ font-size:9.5px; letter-spacing:.04em; text-transform:uppercase; font-weight:700; border-radius:5px; padding:2px 6px; }
#rd-root .src.aura{ background:var(--aura-bg); color:var(--aura); } #rd-root .src.compass{ background:var(--compass-bg); color:var(--compass); } #rd-root .src.pilot{ background:var(--pilot-bg); color:var(--pilot); }
#rd-root .rright{ flex:0 0 auto; display:flex; align-items:center; gap:10px; }
#rd-root .status{ font-size:11px; font-weight:600; border-radius:999px; padding:3px 10px; white-space:nowrap; }
#rd-root .status.draft{ background:var(--line-soft); color:var(--ink-2); } #rd-root .status.review{ background:var(--flag-bg); color:var(--flag); } #rd-root .status.fund{ background:var(--ok-bg); color:var(--ok); }
#rd-root .synced{ font-size:11px; font-weight:600; color:var(--rrp); }
#rd-root .ov{ background:none; border:0; color:var(--quiet); font-size:18px; cursor:pointer; padding:4px 6px; border-radius:6px; }
#rd-root .ov:hover{ background:var(--line-soft); }

/* ── Summary tiles ────────────────────────────────────────────────────── */
#rd-root .stat-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:14px; }
#rd-root .tile{ border:1px solid var(--line); border-radius:14px; padding:14px 16px; background:var(--surface); }
#rd-root .tile .k{ font-size:12px; color:var(--label); }
#rd-root .tile .v{ font-family:var(--font-serif); font-size:23px; font-weight:500; margin-top:5px; }

/* ── Empty / cold-start / coming ──────────────────────────────────────── */
#rd-root .empty{ border:1px dashed var(--line); border-radius:16px; padding:40px 28px; text-align:center; margin-top:18px; }
#rd-root .empty .ic{ width:52px; height:52px; margin:0 auto; border-radius:14px; background:var(--amber-tint); color:var(--amber-deep); display:grid; place-items:center; font-size:22px; }
#rd-root .empty h2{ font-family:var(--font-serif); font-weight:500; font-size:22px; margin:14px 0 6px; }
#rd-root .empty .s{ font-size:13.5px; color:var(--ink-2); max-width:460px; margin:0 auto 16px; }
#rd-root .empty.err .ic{ background:var(--rrp-bg); color:var(--rrp); }
#rd-root .b{ display:inline-flex; align-items:center; gap:6px; background:var(--cta); color:#fff; border:0; border-radius:10px; padding:10px 16px; font:inherit; font-weight:600; cursor:pointer; }
#rd-root .b.ghost{ background:var(--surface); border:1px solid var(--line); color:var(--ink-2); }
#rd-root .acts{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
#rd-root .reassure{ display:flex; gap:9px; align-items:flex-start; background:var(--ok-bg); border:1px solid var(--ok-line); border-radius:11px; padding:11px 13px; font-size:12.5px; color:var(--ink-2); text-align:left; max-width:560px; margin:16px auto 0; }
#rd-root .note{ font-size:12px; color:var(--quiet); margin-top:14px; max-width:520px; margin-left:auto; margin-right:auto; }

/* cold-start hero + steps */
#rd-root .hero{ border:1px solid var(--amber-line); background:var(--amber-tint); border-radius:16px; padding:20px 22px; margin-top:18px; }
#rd-root .hero h2{ font-family:var(--font-serif); font-weight:500; font-size:23px; margin:0; }
#rd-root .hero p{ font-size:13px; color:var(--ink-2); margin:6px 0 0; }
#rd-root .meter{ display:flex; align-items:center; gap:12px; margin-top:14px; }
#rd-root .meter .pc{ font-family:var(--font-serif); font-size:20px; color:var(--label); }
#rd-root .meter .bar{ flex:1; height:7px; border-radius:999px; background:var(--surface); overflow:hidden; max-width:320px; } #rd-root .meter .bar > i{ display:block; height:100%; background:var(--amber); }
#rd-root .meter .lab{ font-size:12px; color:var(--label); }
#rd-root .step{ display:flex; align-items:flex-start; gap:13px; padding:14px 0; border-top:1px solid var(--line-soft); }
#rd-root .step:first-of-type{ border-top:0; }
#rd-root .step .num{ width:26px; height:26px; flex:0 0 auto; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; font-size:12px; font-weight:700; color:var(--label); }
#rd-root .step.done .num{ background:var(--ok-bg); color:var(--ok); border-color:var(--ok-line); }
#rd-root .step .st{ flex:1; min-width:0; } #rd-root .step .st .t{ font-weight:600; font-size:14px; } #rd-root .step .st .d{ font-size:12.5px; color:var(--label); margin-top:2px; }
#rd-root .step .act{ flex:0 0 auto; }
#rd-root .chip{ font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; font-weight:700; border-radius:6px; padding:2px 7px; background:var(--ok-bg); color:var(--ok); margin-left:8px; }
#rd-root .preview{ border:1px dashed var(--line); border-radius:14px; padding:16px 18px; margin-top:18px; }
#rd-root .preview .ey{ font-size:10px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:var(--quiet); }
#rd-root .preview h3{ font-family:var(--font-serif); font-weight:500; font-size:17px; margin:6px 0 4px; }
#rd-root .preview p{ font-size:12.5px; color:var(--ink-2); margin:0; }

/* ── Participants list ────────────────────────────────────────────────── */
#rd-root .plist{ border:1px solid var(--line); border-radius:14px; background:var(--surface); overflow:hidden; margin-top:14px; }
#rd-root .prow{ display:flex; align-items:center; gap:13px; padding:13px 17px; border-top:1px solid var(--line-soft); }
#rd-root .prow:first-child{ border-top:0; }
#rd-root .pav{ width:38px; height:38px; flex:0 0 auto; border-radius:50%; background:var(--bone); color:var(--ink); display:grid; place-items:center; font-weight:700; font-size:13px; }
#rd-root .pbody{ flex:1; min-width:0; } #rd-root .pbody .pn{ font-weight:600; font-size:14px; } #rd-root .pbody .px{ font-size:12px; color:var(--label); margin-top:2px; }
#rd-root .ptag{ font-size:10.5px; font-weight:600; border-radius:999px; padding:2px 9px; white-space:nowrap; }
#rd-root .ptag.linked{ background:var(--ok-bg); color:var(--ok); } #rd-root .ptag.ref{ background:var(--line-soft); color:var(--ink-2); }

/* ── Settings modal ───────────────────────────────────────────────────── */
#rd-root .setmodal{ position:fixed; inset:0; z-index:60; background:rgba(27,34,51,.5); display:flex; align-items:flex-start; justify-content:center; padding:40px 16px; overflow:auto; }
#rd-root .setmodal .modal{ background:var(--bg); width:100%; max-width:680px; border-radius:18px; box-shadow:0 20px 60px rgba(15,27,61,.32); overflow:hidden; }
#rd-root .setmodal .mh{ display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--line); }
#rd-root .setmodal .mh h2{ font-family:var(--font-serif); font-weight:500; font-size:20px; margin:0; }
#rd-root .setmodal .x{ background:none; border:0; font-size:18px; color:var(--label); cursor:pointer; }
#rd-root .setmodal .m-wrap{ display:grid; grid-template-columns:206px 1fr; min-height:330px; }
#rd-root .setmodal .snav{ border-right:1px solid var(--line); background:var(--rail); padding:14px 10px; display:flex; flex-direction:column; gap:2px; }
#rd-root .setmodal .sn{ text-align:left; background:none; border:0; font:inherit; font-size:13.5px; color:var(--ink-2); padding:9px 11px; border-radius:8px; cursor:pointer; }
#rd-root .setmodal .sn.on{ background:var(--amber-tint); color:var(--amber-deep); font-weight:600; }
#rd-root .setmodal .scontent{ padding:20px 24px; }
#rd-root .setmodal .pane{ display:none; } #rd-root .setmodal .pane.on{ display:block; }
#rd-root .setmodal .ssec{ font-size:11px; letter-spacing:.06em; text-transform:uppercase; font-weight:700; color:var(--quiet); margin-bottom:8px; }
#rd-root .setmodal .row{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:11px 0; border-top:1px solid var(--line-soft); }
#rd-root .setmodal .row:first-of-type{ border-top:0; }
#rd-root .setmodal .rk{ font-size:13.5px; font-weight:600; } #rd-root .setmodal .rv{ font-size:13px; color:var(--ink-2); margin-top:2px; } #rd-root .setmodal .rd{ font-size:12px; color:var(--label); margin-top:2px; max-width:380px; }
#rd-root .setmodal .brandbox{ border:1px solid var(--amber-line); background:var(--amber-tint); border-radius:12px; padding:13px 15px; margin-top:8px; font-size:12.5px; color:var(--ink-2); }
#rd-root .setmodal .brandbox b{ font-weight:600; }
#rd-root .setmodal .locked{ font-size:11px; font-weight:700; color:var(--ok); background:var(--ok-bg); border-radius:999px; padding:3px 9px; white-space:nowrap; }
#rd-root .setmodal .connectid .cidval{ font-family:var(--font-serif); font-size:20px; font-weight:600; color:var(--ink); }
#rd-root .setmodal .lb{ background:var(--surface); border:1px solid var(--line); border-radius:9px; padding:6px 12px; font:inherit; font-size:12px; cursor:pointer; color:var(--ink-2); }
#rd-root .setmodal .danger{ border:1px solid #f3cabb; border-radius:12px; padding:14px 16px; margin-top:18px; background:#fffaf8; }
#rd-root .setmodal .danger-btn{ border-color:var(--rrp)!important; color:var(--rrp)!important; margin-top:10px; }
#rd-root .setmodal .pwform .field{ margin-bottom:10px; } #rd-root .setmodal .pwform label{ display:block; font-size:12px; color:var(--label); margin-bottom:4px; } #rd-root .setmodal .pwform input{ width:100%; border:1px solid var(--line); border-radius:9px; padding:9px 11px; font:inherit; font-size:14px; }
#rd-root .setmodal .row-between{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:6px; }
#rd-root .setmodal .mf{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 22px; border-top:1px solid var(--line); background:var(--rail); font-size:12px; color:var(--quiet); }

/* ── Participant detail (Connect / care-team wave) ────────────────────── */
#rd-root .prow{ cursor:pointer; }
#rd-root .prow:hover{ background:#fffdf8; }
#rd-root .pav.lg{ width:44px; height:44px; font-size:15px; }
#rd-root .ctback{ background:none; border:0; color:var(--cta); font:inherit; font-size:13px; cursor:pointer; padding:0 0 6px; }
#rd-root .crumb{ font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--label); font-weight:600; }
#rd-root .pdgrid{ display:grid; grid-template-columns:1fr 320px; gap:22px; margin-top:18px; align-items:start; }
#rd-root .pdmain{ min-width:0; display:flex; flex-direction:column; gap:16px; }
#rd-root .pdrail{ position:sticky; top:18px; display:flex; flex-direction:column; gap:14px; }
#rd-root .card{ border:1px solid var(--line); border-radius:14px; background:var(--surface); padding:16px 18px; }
#rd-root .card > .ch{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
#rd-root .card > .ch h2{ font-family:var(--font-serif); font-weight:500; font-size:18px; margin:0; }
#rd-root .card .lab{ font-size:10px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; color:var(--quiet); }
#rd-root .roster{ border:1px solid var(--line); border-radius:12px; overflow:hidden; }
#rd-root .m{ display:flex; gap:12px; padding:13px 14px; border-top:1px solid var(--line-soft); align-items:flex-start; }
#rd-root .m:first-child{ border-top:0; }
#rd-root .m .av{ width:36px; height:36px; flex:0 0 auto; border-radius:9px; display:grid; place-items:center; font-weight:700; font-size:13px; color:#fff; background:var(--ink); }
#rd-root .m .av.aura{ background:var(--aura); } #rd-root .m .av.compass{ background:var(--compass); }
#rd-root .m .body{ flex:1; min-width:0; } #rd-root .m .nm{ font-size:14px; font-weight:600; } #rd-root .m .role{ font-size:12px; color:var(--label); margin-top:1px; }
#rd-root .m .macts{ display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
#rd-root .m .mg{ background:var(--surface); border:1px solid var(--line); color:var(--ink-2); border-radius:8px; padding:5px 10px; font:inherit; font-size:11.5px; font-weight:600; cursor:pointer; }
#rd-root .m .mg:hover{ border-color:var(--amber-deep); color:var(--amber-deep); }
#rd-root .m .mr{ flex:0 0 auto; } #rd-root .m .st{ font-size:10.5px; font-weight:700; border-radius:999px; padding:3px 9px; white-space:nowrap; }
#rd-root .m .st.on{ background:var(--ok-bg); color:var(--ok); } #rd-root .m .st.pend{ background:var(--flag-bg); color:var(--flag); } #rd-root .m .st.off{ background:var(--line-soft); color:var(--quiet); }
#rd-root .invrow{ display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
#rd-root .card .ch .mg{ background:var(--surface); border:1px solid var(--line); color:var(--ink-2); border-radius:8px; padding:6px 11px; font:inherit; font-size:12px; font-weight:600; cursor:pointer; }

/* Reused audited modals (invite/messages/about-me/appointment) append to <body> at z-index 60;
   #rd-root is 9999, so lift active modals above it (still below the .cl-confirm overlay at 10050). */
.modal-overlay.active{ z-index:10001 !important; }

/* ── Behaviour support home ───────────────────────────────────────────── */
#rd-root .clockband{ display:flex; gap:12px; align-items:flex-start; background:var(--flag-bg); border:1px solid #e8d199; border-radius:13px; padding:14px 16px; margin-top:16px; font-size:12.5px; color:var(--ink-2); }
#rd-root .clockband .ic{ color:var(--flag); font-size:16px; flex:0 0 auto; }
#rd-root .clockband b{ font-weight:600; color:var(--ink); }
#rd-root .bsec{ font-family:var(--font-serif); font-weight:500; font-size:18px; margin:20px 0 10px; }

/* ── Capture to draft + Letters (#217) ────────────────────────────────── */
#rd-root .formgrid{ display:flex; flex-direction:column; gap:14px; }
#rd-root .fl{ display:block; }
#rd-root .fl .flk{ display:block; font-size:12px; font-weight:600; color:var(--label); margin-bottom:5px; }
#rd-root .fld{ width:100%; box-sizing:border-box; border:1px solid var(--line); border-radius:10px; background:var(--surface); color:var(--ink); font:inherit; font-size:14px; padding:10px 12px; }
#rd-root .fld:focus{ outline:2px solid var(--amber-deep); outline-offset:1px; }
#rd-root textarea.ta{ resize:vertical; line-height:1.5; }
#rd-root .fld[readonly]{ background:var(--line-soft); color:var(--ink-2); }
#rd-root .modeseg{ display:inline-flex; gap:0; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
#rd-root .modeseg .seg{ background:var(--surface); border:0; border-left:1px solid var(--line); font:inherit; font-size:13px; font-weight:600; color:var(--ink-2); padding:9px 14px; cursor:pointer; }
#rd-root .modeseg .seg:first-child{ border-left:0; }
#rd-root .modeseg .seg.on{ background:var(--amber-tint); color:var(--amber-deep); }
#rd-root .modeseg .seg:disabled{ color:var(--quiet); cursor:not-allowed; }
#rd-root .consent{ display:flex; align-items:flex-start; gap:10px; font-size:13px; color:var(--ink-2); border:1px solid var(--amber-line); background:var(--amber-tint); border-radius:11px; padding:12px 14px; }
#rd-root .consent input{ margin-top:2px; flex:0 0 auto; width:16px; height:16px; accent-color:var(--amber-deep); }
#rd-root .b:disabled{ opacity:.5; cursor:not-allowed; }
#rd-root .capgrid{ display:grid; grid-template-columns:1.1fr .9fr; gap:18px; margin-top:14px; align-items:start; }
#rd-root .capedit{ display:flex; flex-direction:column; gap:14px; }
#rd-root .capsource{ border:1px solid var(--line); border-radius:12px; background:var(--rail); padding:14px 16px; }
#rd-root .sbhd{ font-family:var(--font-serif); font-weight:500; font-size:15px; }
#rd-root .sbsub{ font-size:12px; color:var(--label); margin:2px 0 10px; }
#rd-root .sbside{ display:flex; flex-direction:column; gap:10px; }
#rd-root .sbrow{ border:1px solid var(--line); border-radius:10px; background:var(--surface); padding:10px 12px; }
#rd-root .sbtop{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
#rd-root .sbclaim{ font-size:13px; color:var(--ink); flex:1; min-width:0; }
#rd-root .sbsrc{ font-size:12px; color:var(--label); margin-top:6px; }
#rd-root .sbsrc.warn{ color:var(--flag); }
#rd-root .sbkind{ font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--quiet); }
#rd-root .sbnote{ font-size:13px; color:var(--ink-2); }

/* ── Home programs (Slice 2): step lists + the family/worker preview grid ── */
#rd-root .hp-steps{ margin:6px 0 0; padding-left:20px; }
#rd-root .hp-steps li{ font-size:13px; color:var(--ink); line-height:1.5; margin-bottom:4px; }
#rd-root .hp-preview-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start; margin-top:8px; }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width:820px){
  #rd-root .apprail{ display:none; }
  #rd-root .page-inner{ padding:18px 16px 80px; }
  #rd-root .stat-row{ grid-template-columns:1fr; }
  #rd-root .setmodal .m-wrap{ grid-template-columns:1fr; } #rd-root .setmodal .snav{ flex-direction:row; flex-wrap:wrap; border-right:0; border-bottom:1px solid var(--line); }
  #rd-root .row{ flex-wrap:wrap; }
  #rd-root .capgrid{ grid-template-columns:1fr; }
  #rd-root .hp-preview-grid{ grid-template-columns:1fr; }
}