/* EDENNE — components rebuilt to Apple's specs.
   Source: the installed `ios-hig-design` skill (Apple Human Interface Guidelines) —
   .references/components.md, .references/typography.md, and SKILL.md §1–§3.
   Loaded AFTER edenne-proto.css: proto owns the composition and the scene, this file owns
   the controls. Brand colour and the garden world are kept (Brand Center outranks Apple's
   defaults); geometry, materials, type scale and control behaviour follow the HIG.

   Colour rule (founder, 2026-09-19): Apple supplies the geometry, materials, states and type
   scale — the palette stays EDENNE's. Accent #f6b1d0 (Lynne #e5c9a3) for every active/tinted
   element. NO neutral system greys anywhere: non-brand states use brand-tinted plum/mauve
   (--ios-fill rgba(191,164,179,.30), off-track #4a3342, secondary text #755d69 / ink at alpha).

   Specs applied:
     nav bar 44pt · tab bar 49pt + safe area, translucent blur · 44x44pt minimum targets
     type: largeTitle 34 / title2 22 / headline 17 semibold / body 17 / subheadline 15 /
           footnote 13 / caption1 12 / caption2 11 · 1.3 line height · left aligned
     lists: inset-grouped rows, 44pt+, separator inset 16pt, chevrons for navigation
     switch 51x31 knob 27 · segmented control 32pt · buttons filled/tinted/plain, radius 14
     material: blur(20px) saturate(180%) */

:root{
  --ios-label:#ffffff;
  --ios-label-2:rgba(255,244,248,.70);
  --ios-label-3:rgba(255,244,248,.46);
  --ios-separator:rgba(191,164,179,.45);
  --ios-fill:rgba(191,164,179,.30);
  --ios-fill-2:rgba(191,164,179,.44);
  --ios-grouped:#1c1c1e;
  --ios-grouped-2:#2c2c2e;
  --ios-radius-row:10px;
  --ios-radius-sheet:28px;
  --ios-radius-btn:12px;
  --ios-font:-apple-system,'SF Pro Text','Segoe UI Variable','Segoe UI',Roboto,system-ui,sans-serif;
}

/* ── typography: the Dynamic Type scale ─────────────────────────────────── */
body,.bubble,#input,.dock button,.sidebar,.sheet-body,.quick button,.opener,.resident-switch button{
  font-family:var(--ios-font);
}
.bottom h1,.setup-bottom h1{font-size:34px;line-height:1.2;letter-spacing:0}   /* largeTitle */
.bottom h3,.setup-bottom h3,.panel h3,.empty-thread h2,.sheet-head h2{font-size:22px;line-height:1.25;letter-spacing:0;font-weight:600;font-family:var(--ios-font)} /* title2 */
.bottom p,.setup-bottom p,.sheet-body p,.sheet-body .note{font-size:17px;line-height:1.3;font-weight:400} /* body */
/* typography for .overline / .hint is owned by the system layer at the bottom of this file */
.overline{font-weight:600}
.side-label{font-size:13px!important;letter-spacing:0;text-transform:none;font-weight:400;color:#755d69!important} /* footnote, iOS grouped header on a light surface */
.sidebar strong,.sheet .mem-row p,.sheet .setting strong{font-size:17px;font-weight:400;line-height:1.3}
.sidebar small,.sidebar .conv,.sidebar .recent{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidebar small{font-size:15px;line-height:1.3;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sheet .setting small{font-size:15px;line-height:1.35;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}  /* subheadline, two lines then ellipsis */
/* body type is owned by the system layer */
.bubble .meta,#thread .meta{font-size:12px;opacity:.9}  /* caption1 */
/* her name is the line; the status under it is a whisper, not a second headline */
.who-is strong{font-size:14px;font-weight:600}
.who-is small{font-size:10.5px;font-weight:400;letter-spacing:.06em;color:rgba(255,244,248,.55);margin-top:3px}
.sheet-head h2{font-size:17px;font-weight:600}

/* ── nav bar: 44pt row, translucent material, borderless glyph buttons ─── */
.topbar,.setup .head{inset:0 0 auto;height:44px;padding:0 8px;align-items:center;gap:0;
  background:rgba(37,19,35,.62);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);
  border-bottom:.5px solid rgba(255,255,255,.16)}
.top-logo,.setup .head img{width:104px;margin:0 0 0 8px}
.who-is{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;white-space:nowrap}
.who-is small{display:block!important}
.who-is small::before{content:none}
.icon-button{width:44px;height:44px;min-width:44px;min-height:44px;margin-left:auto;border:0;border-radius:0;
  background:none;color:var(--accent);display:inline-flex;align-items:center;justify-content:center;font-size:17px}
.icon-button svg{width:22px;height:22px}

/* ── buttons: filled / tinted / plain, 44pt, radius 14 ─────────────────── */
.primary,.secondary{font-size:17px;font-weight:600;min-height:50px;border-radius:var(--ios-radius-btn);padding:12px 20px;gap:8px}
.primary{background:var(--accent);color:var(--accent-ink);box-shadow:none}
.secondary{background:var(--ios-fill);border:0;color:var(--ios-label)}
.opener,.quick button{background:var(--ios-fill);border:0;color:var(--ios-label);font-size:15px;font-weight:400;border-radius:var(--ios-radius-btn);min-height:44px;padding:10px 14px}

/* ── segmented control (Dream | Lynne) ─────────────────────────────────── */
.resident-switch{background:var(--ios-fill);border-radius:12px;padding:2px;gap:2px;margin-bottom:16px}
.resident-switch button{border:0;border-radius:12px;padding:6px 14px;min-height:32px;font-size:13px;font-weight:600;color:var(--ios-label);background:none}
.resident-switch button{flex:1;text-align:center}
.resident-switch button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);box-shadow:0 1px 3px rgba(0,0,0,.28)}

/* ── conversation: iOS Messages geometry ───────────────────────────────── */
.bubble{background:#3a2735!important;color:#fff!important;border-radius:18px!important;padding:10px 14px;max-width:80%}
.row.her .bubble,.bubble{border-bottom-left-radius:4px!important}
.row.me .bubble,.bubble.user{background:var(--accent)!important;color:var(--accent-ink)!important;border-radius:18px 18px 4px 18px!important}
.bubble .meta button{font-size:12px;min-height:44px;min-width:44px}

/* composer as an iOS search field */
.composer{gap:8px}
#input{height:46px;min-height:46px;border:1px solid rgba(246,177,208,.42);border-radius:18px;
  background:rgba(37,19,35,.88);color:#fff;font-size:17px;padding:12px 16px}
#input::placeholder{color:rgba(255,244,248,.72)}
#input:focus{border-color:var(--accent);box-shadow:none}
#addFile,#mic,#call{background:rgba(37,19,35,.60);border:1px solid rgba(246,177,208,.45);color:var(--accent);border-radius:50%}
/* hold to speak: the button fills with the accent while she is listening */
.composer.recording #mic{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.composer.recording #mic svg{animation:edenne-in .6s ease-in-out infinite alternate}
.composer{gap:8px}
#input{min-width:0}
#send{background:var(--accent);color:var(--accent-ink);border:0}

/* ── tab bar: 49pt, translucent, no discs, tint for the active tab ──────── */
.dock{left:0;right:0;bottom:0;padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px));gap:0;
  justify-content:space-around;align-items:center;border-top:.5px solid rgba(255,255,255,.16);
  background:rgba(37,19,35,.68);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%)}
.dock button{flex:1;align-items:center;justify-content:center;gap:3px;min-width:0;min-height:49px;padding:2px 0;color:rgba(255,244,248,.66);font-size:10px;font-weight:500}
.dock button svg{width:25px;height:25px;padding:0;border-radius:0;background:none!important}
.dock button[aria-current="true"]{color:var(--accent)}

/* ── sheets: iOS sheet — grabber, 16pt top radius, inset-grouped rows ──── */
dialog#sheet.sheet,.sheet{background:rgba(250,238,244,.92);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);
  border:1px solid rgba(246,177,208,.38);border-radius:var(--ios-radius-sheet) var(--ios-radius-sheet) 0 0;
  box-shadow:0 -8px 40px rgba(0,0,0,.35);
  max-height:calc(76dvh - 60px);
  margin-bottom:calc(78px + env(safe-area-inset-bottom,0px))}
.sheet::before{content:'';display:block;width:36px;height:5px;border-radius:4px;background:rgba(60,60,67,.3);margin:8px auto 0}
.sheet-head{padding:8px 16px;border-bottom:1px solid rgba(246,177,208,.32)}
.sheet-head .icon{width:44px;height:44px;border:0;background:rgba(246,177,208,.32);border-radius:50%;color:var(--accent-ink);font-size:17px}
.sheet-body{padding:16px 16px 40px;scrollbar-width:none}
.sheet-body::-webkit-scrollbar{display:none}
.sheet::after{content:'';position:absolute;left:0;right:0;bottom:0;height:22px;pointer-events:none;
  background:linear-gradient(180deg,rgba(250,238,244,0),rgba(250,238,244,.96))}
#sheetBody input,.sheet input,.sheet textarea{min-height:44px;border:1px solid rgba(246,177,208,.45);border-radius:12px;background:rgba(255,255,255,.72);font-size:17px;padding:11px 14px}
.sheet .field{gap:8px}
.sheet .field .primary{min-height:44px;height:44px;border-radius:12px;font-size:17px;background:none;color:#8d4f6c;font-weight:600;padding:0 10px}
.sheet .field .primary:disabled{opacity:.55;color:#a86b86}
/* a standalone action in a sheet is the filled one; the quiet choice is the outlined one */
.sheet .primary{min-height:50px;height:auto;border-radius:14px;font-size:17px;font-weight:600;background:var(--accent)!important;color:var(--accent-ink)!important;margin-top:12px}
.sheet .secondary{min-height:50px;border-radius:14px;font-size:17px;background:none;color:#8d4f6c;border:1px solid rgba(246,177,208,.55);margin-top:8px}
.sheet .task-source,.board .task-source{font-size:12px;color:#755d69}
.sheet .mem-row,.sheet .setting{padding:12px 14px;border:1px solid rgba(246,177,208,.30);border-radius:12px;background:rgba(255,255,255,.62);margin-bottom:8px}
.sheet .mem-row button:not(.switch),.sheet .setting button:not(.switch){background:none;border:0;color:#8d4f6c;border-radius:12px;font-size:17px;font-weight:400;min-height:44px;padding:0 4px}

/* ── switch: iOS 51x31, knob 27 ────────────────────────────────────────── */
.sheet .setting .switch{width:51px;min-width:51px;height:31px;min-height:31px;max-height:31px;padding:0;border-radius:999px;
  background:#4a3342!important;border:1px solid rgba(255,244,248,.22)!important;box-shadow:inset 0 1px 2px rgba(0,0,0,.25);flex:0 0 auto}
.sheet .setting .switch::after{width:27px;height:27px;top:1px;left:1px;box-shadow:0 3px 8px rgba(0,0,0,.15);transition:transform .2s}
.sheet .setting .switch[aria-checked="true"]{background:var(--accent)!important;border-color:rgba(0,0,0,.08)!important}
.sheet .setting .switch[aria-checked="true"]::after{transform:translateX(20px)}

/* ── drawer: iOS grouped list, flat rows, chevrons ─────────────────────── */
.sidebar{background:rgba(250,238,244,.88);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);
  border-right:1px solid rgba(246,177,208,.38);border-radius:0 var(--ios-radius-sheet) var(--ios-radius-sheet) 0}
.side-label{margin:22px 0 6px;padding-top:14px;border-top:1px solid rgba(246,177,208,.32);color:rgba(150,84,114,.9)!important}
.side-block:first-of-type .side-label{margin-top:12px}
.sidebar .who{color:#755d69}
.side-head{padding-bottom:8px;border-bottom:1px solid rgba(246,177,208,.32)}
.side-head .icon{width:44px;height:44px;border-radius:50%;background:rgba(246,177,208,.38);color:#4a2b3a;display:grid;place-items:center;font-size:19px;line-height:1}
.sidebar button,.sidebar .res-item,.sidebar .resident,.sidebar .conv,.side-foot button{
  padding:12px 0;border-bottom:1px solid rgba(246,177,208,.30);font-size:17px;min-height:48px;position:relative;color:#3a2331}
.sidebar .resident[aria-pressed="true"]{background:none;border-radius:0;box-shadow:none;padding-left:0;padding-right:0}
.sidebar .resident[aria-pressed="true"]::after{content:'✓';margin-left:auto;color:#8d4f6c;font-size:17px;font-weight:600}
.sidebar .resident[aria-pressed="true"] strong{font-weight:600}
.sidebar .resident img,.side-block img{width:36px;height:36px;border-radius:50%}
.side-foot button:last-of-type{border-bottom:0}
.side-foot button::after{content:'\203A';margin-left:auto;color:#8d4f6c;font-size:20px;line-height:1}
/* the "start a new moment" action must not read as another history row */
.sidebar #newChat{color:#8d4f6c;font-weight:600;border-bottom:0;padding-top:14px}
.sidebar #newChat::after{content:'\203A';margin-left:auto;color:#8d4f6c;font-size:20px;line-height:1}

@media(max-width:650px){
  .topbar,.setup .head{padding-top:max(0px,env(safe-area-inset-top))}
  .dock{bottom:0;left:0;right:0}
  .composer,.bottom,.thread,.quick{left:16px;right:16px}
}

/* Edenne navigation: preserve the prototype world, reduce the chrome. */
.thread[hidden],.composer[hidden],.board[hidden],.resident-menu[hidden]{display:none!important}
.side-block .resident-toggle{display:flex;gap:6px;margin-top:4px}
.side-block .resident-toggle button{flex:1;display:flex;align-items:center;gap:9px;padding:9px 11px;min-height:56px;text-align:left;
  border:1px solid rgba(246,177,208,.45);border-radius:14px;background:rgba(255,255,255,.5);color:#4a2b3a;font-size:15px}
.side-block .resident-toggle button img{width:30px;height:30px;border-radius:50%;object-fit:cover;object-position:50% 12%;flex:none}
.side-block .resident-toggle button strong{display:block;font-weight:600;font-size:15px}
.side-block .resident-toggle button small{display:block;font-size:12px;color:#8d4f6c;margin-top:1px}
.side-block .resident-toggle button[aria-pressed="true"]{background:rgba(246,177,208,.30);border-color:var(--accent)}
.side-block .resident-toggle button[aria-pressed="true"] small{color:#6b3a52}
.side-block .resident-toggle button:disabled{opacity:.5}
/* autonomy: Never / Ask first / Allowed */
.sheet .autonomy{display:flex;gap:2px;padding:2px;border:1px solid rgba(246,177,208,.45);border-radius:999px;background:rgba(255,255,255,.55);flex:none}
.sheet .autonomy button{min-height:36px;padding:0 12px;border:0;border-radius:999px;background:none;color:#8d4f6c;font-size:13px;font-weight:600;white-space:nowrap}
.sheet .autonomy button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.resident-toggle svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.topbar #openSide{display:inline-flex;margin-left:auto}
/* minimum clearance between the mark and the bar's controls */
.topbar>.top-logo,.setup .head>img{margin-right:16px}
.resident-menu{position:absolute;z-index:10;right:54px;top:54px;width:154px;padding:6px;border:1px solid #e5ccd8;border-radius:12px;background:#f7eff2;box-shadow:0 12px 28px #150b1580}
.resident-menu button{display:block;width:100%;min-height:44px;padding:9px 12px;text-align:left;border:0;border-radius:12px;background:transparent;color:#34212e;font-size:14px}
.resident-menu button[aria-current="true"]{background:#efd7e3;font-weight:700}
.resident-toggle:focus-visible,.resident-menu button:focus-visible,.board button:focus-visible,.board a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sidebar .side-block{flex:1;min-height:0;overflow:auto}
.sidebar .side-label{margin-top:10px;padding-top:10px}
.sidebar .conv{padding:9px 0;min-height:44px}
.sidebar .side-foot{flex:0 0 auto}
/* the board is its own page inside the frame, not a card floating over the conversation */
.board{position:absolute;z-index:4;inset:0;display:flex;flex-direction:column;min-height:0;padding:calc(env(safe-area-inset-top,0px) + 50px) 0 78px;color:#fff3f7;background:linear-gradient(180deg,#1c0e1ad9 0%,#1a0f18e8 34%,#180d16fa 100%)}
.board-head{display:flex;align-items:center;justify-content:space-between;gap:10px;height:54px;padding:0 16px;border-bottom:.5px solid rgba(255,255,255,.16)}
.dock button{font-size:11.5px}
.board-head h1{font-family:Belleza,Georgia,serif;font-size:27px;line-height:1.1;font-weight:400;margin:0}
.board-head button,.board-draft,.task-actions button,.task-actions a{min-height:44px;border:1px solid #ffffff4d;border-radius:12px;background:#00000038;color:#fff8fb;padding:9px 12px;font-size:12px;text-decoration:none}
.board-draft{align-self:flex-start;margin:12px 16px 4px;background:#f6b1d0;color:#34212e;border-color:#f6b1d0;font-weight:600}
.board-lanes{flex:1;min-height:0;display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;padding:14px 16px 10px;scroll-snap-type:x mandatory;scrollbar-width:thin}
.board-lane{flex:0 0 min(78%,300px);min-width:0;overflow-y:auto;scroll-snap-align:start;padding:14px;border:1px solid #ffffff30;border-radius:12px;background:#00000038;scrollbar-width:thin}
.board-lane h2{font-family:Belleza,Georgia,serif;font-size:19px;font-weight:400;margin:0 0 13px;color:#fffafc}
.board-empty,.board-message{color:#e8d4df;font-size:13px;line-height:1.5}
.task-card{padding:12px;margin:0 0 9px;border:1px solid #ffffff35;border-radius:12px;background:#21141fd9;overflow-wrap:anywhere}
.task-kicker{display:block;color:var(--accent);font-size:11.5px;letter-spacing:.04em}
.task-card h3{font-family:Belleza,Georgia,serif;font-size:17px;font-weight:400;line-height:1.2;margin:6px 0 5px}
.task-state{font-size:12px;color:#e4ccd9;margin:0 0 7px}
.task-actions{display:flex;flex-wrap:wrap;gap:6px}
.task-actions button,.task-actions a{display:inline-flex;align-items:center;justify-content:center;min-height:40px}
.task-actions button:first-child{border-color:var(--accent);color:var(--accent)}
.task-actions button:disabled{opacity:.55}
/* what she prepared, and honest state notices, sit in the transcript as cards, not as her words */
.prepared{align-self:flex-start;max-width:88%;margin:0;padding:12px 14px;border:1px solid #ffffff2e;border-radius:12px;background:#0000003d;color:#fff4f8}
.prepared strong{display:block;font-size:13px;font-weight:600;margin-bottom:5px}
.prepared p{font-size:13px;line-height:1.45;color:#e8d3df;margin:0 0 8px}
.prepared button{width:100%;margin-top:2px}
.prepared.notice-card{border-color:#e5c9a380}

/* ── side menu: rail + panel ──────────────────────────── */
/* the rail runs down the left edge, the panel takes the rest — sideways, not stacked */
#sidebar{display:flex;flex-direction:row;align-items:stretch;padding:0;gap:0;overflow:hidden}
.rail{flex:0 0 64px;width:64px;height:100%;display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 0;
  background:rgba(233,196,214,.55);border-right:1px solid rgba(141,79,108,.3)}
.rail .rail-btn{width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;flex:0 0 44px;border:0;border-radius:14px;background:transparent;color:#8d4f6c;padding:0!important;
  display:grid;place-items:center;cursor:pointer;transition:background .18s ease,color .18s ease}
.rail-btn svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.rail-btn.on{background:rgba(246,177,208,.55);color:#3a2331}
.rail-btn:focus-visible{outline:2px solid #f6b1d0;outline-offset:2px}
.side-panel{flex:1;min-width:0;overflow-y:auto;overflow-x:hidden;padding:0 16px 16px}
/* the resident rows must fit the panel: no clipped names next to the rail */
.side-panel .pane button{width:100%!important;max-width:100%;min-width:0;box-sizing:border-box;overflow:hidden}
/* …but the close button keeps its own size */
.side-head .icon,#closeSide{width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;flex:0 0 36px!important;padding:0!important;border-radius:50%!important}
#residentToggle button{display:flex;align-items:center;gap:10px;padding:10px 12px!important}
/* the avatar stays an avatar — it must never stretch to the row width */
#residentToggle img,.side-panel .pane img{width:38px!important;height:38px!important;flex:0 0 38px!important;border-radius:50%;object-fit:cover;object-position:50% 12%}
/* the lockup in the panel head is a wordmark, not an avatar */
.side-head img,#sideLogo{width:118px!important;height:auto!important;flex:0 0 auto!important;border-radius:0!important;object-fit:contain}
#residentToggle button span,.side-panel button span{flex:1 1 auto;min-width:0;text-align:left}
#residentToggle button span{min-width:0;overflow:hidden;text-align:left}
#residentToggle strong,#residentToggle small,.side-panel strong,.side-panel small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.pane[hidden]{display:none}
.side-wide{width:100%;min-height:44px;border-radius:12px;border:1px solid rgba(141,79,108,.3);background:rgba(246,177,208,.22);
  color:#3a2331;font:inherit;font-weight:600;cursor:pointer}
.side-things{display:flex;flex-direction:column;gap:8px}
.side-things .row{border:1px solid rgba(141,79,108,.22);border-radius:12px;padding:10px 12px;font-size:13.5px;color:#3a2331;background:rgba(255,255,255,.5)}

/* the line under a resident's name is a whisper: smaller, fainter, given room to breathe */
#residentToggle small,.sidebar .resident small,.resident-switch small,.side-panel small{
  display:block;font-size:10.5px!important;font-weight:400!important;letter-spacing:.05em;
  line-height:1.7!important;color:rgba(141,79,108,.68)!important;margin-top:3px!important}

/* ── founder's picks, 2026-09-25 ──────────────────────────────────────── */
/* the menu glyph: two dashes that turn into a cross while the menu is open */
#openSide .burger g{transform-box:fill-box;transform-origin:50% 50%;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
body.menu-open #openSide .l1{transform:translateY(3px) rotate(45deg)}
body.menu-open #openSide .l2{transform:translateY(-3px) rotate(-45deg)}
@media (prefers-reduced-motion:reduce){#openSide .burger g{transition:none}}

/* the resident you are with, at the top of the menu */
.side-me{margin:2px 0 8px}
.side-me-row{display:flex;align-items:center;gap:12px;padding:8px 0}
.side-me-row img{width:56px!important;height:56px!important;flex:0 0 56px!important;border-radius:50%;object-fit:cover;object-position:50% 12%}
.side-me-text{flex:1 1 auto;min-width:0}
.side-me-text strong{display:block;font-size:16px;color:#39232f}
.side-me-text small{display:block;font-size:10.5px;letter-spacing:.05em;line-height:1.7;color:rgba(141,79,108,.68);margin-top:3px}
.swap{width:40px!important;height:40px!important;min-width:40px!important;flex:0 0 40px;border-radius:50%;
  border:1px solid rgba(141,79,108,.4);background:transparent;color:#8d4f6c;font-size:17px;padding:0!important;cursor:pointer}
/* the others stay small and quiet under her */
#sideMe img,.side-me-row img{width:56px!important;height:56px!important;flex:0 0 56px!important;border-radius:50%;object-fit:cover;object-position:50% 12%}
#residentToggle strong{font-size:14.5px}

/* the roster popup the swap button opens */
.roster-row{display:flex;align-items:center;gap:12px;width:100%!important;text-align:left;background:transparent!important;
  border:0!important;border-bottom:1px solid rgba(141,79,108,.2)!important;border-radius:0!important;
  padding:12px 2px!important;min-height:56px!important;color:#3a2331!important;cursor:pointer}
.roster-row img{width:40px;height:40px;border-radius:50%;object-fit:cover;object-position:50% 12%}
.roster-row strong{display:block;font-size:15px}
.roster-row small{display:block;font-size:10.5px;letter-spacing:.05em;color:rgba(141,79,108,.7);margin-top:3px}
.roster-soon{padding:14px 2px;font-size:13px;color:rgba(141,79,108,.55);border-bottom:1px dashed rgba(141,79,108,.3)}

/* settings: a short list, each row opens its own page */
.nav-row{display:flex;align-items:center;gap:10px;width:100%!important;text-align:left;background:transparent!important;
  border:0!important;border-bottom:1px solid rgba(141,79,108,.22)!important;border-radius:0!important;
  padding:14px 2px!important;min-height:56px!important;color:#3a2331!important;cursor:pointer}
.nav-row .nav-text{flex:1 1 auto;min-width:0}
.nav-row strong{display:block;font-size:15.5px}
.nav-row small{display:block;font-size:11.5px;color:rgba(141,79,108,.72);margin-top:2px}
.nav-row .chev{color:rgba(141,79,108,.65);font-size:19px;line-height:1}
.nav-row.back{gap:8px;border-bottom:1px solid rgba(141,79,108,.32)!important;margin-bottom:10px}
.nav-row.back strong{font-size:14px;color:#8d4f6c}

/* Things: one column, grouped by state */
.board-lanes{flex-direction:column!important;gap:0!important;overflow-y:auto!important;overflow-x:hidden!important;
  scroll-snap-type:none!important;padding:14px 16px 18px!important}
.board-lane{flex:0 0 auto!important;width:100%!important;border:0!important;background:none!important;padding:0!important;
  margin-top:18px;overflow:visible!important;scroll-snap-align:none!important}
.board-lane:first-child{margin-top:0}
.board-lane h2{font-size:12.5px!important;letter-spacing:.08em!important;text-transform:uppercase!important;color:#f6b1d0!important;
  margin:0 0 10px!important;padding-bottom:7px!important;border-bottom:1px solid rgba(255,255,255,.16)!important;font-family:inherit!important}

/* ── abilities module: each ability is its own small agent, in her theme ── */
.ability{display:block;width:100%!important;text-align:left;background:rgba(246,177,208,.14)!important;
  border:1px solid rgba(141,79,108,.22)!important;border-radius:16px!important;padding:14px!important;
  margin:10px 0;min-height:88px;color:#39232f!important;cursor:pointer;box-shadow:none!important}
.ability.waiting{background:rgba(255,255,255,.05)!important;border-color:rgba(141,79,108,.18)!important}
.ability-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.ability-agent{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:#8d4f6c;font-weight:600}
.ability-state{font-size:10.5px;letter-spacing:.04em;color:rgba(141,79,108,.75)}
.ability.waiting .ability-state{color:rgba(141,79,108,.5)}
.ability>strong{display:block;font-size:16px;margin-bottom:3px}
.ability>small{display:block;font-size:11.5px;line-height:1.5;color:rgba(141,79,108,.72)}

.agent-head{display:flex;align-items:center;gap:12px;padding:12px;border-radius:16px;
  background:rgba(246,177,208,.2);margin-bottom:6px}
.agent-head img{width:52px!important;height:52px!important;flex:0 0 52px!important;border-radius:50%;object-fit:cover;object-position:50% 12%}
.agent-text{min-width:0}
.agent-text>span{display:block}
.agent-text>strong{display:block;font-size:17px;color:#39232f}
.agent-text>small{display:block;font-size:11.5px;color:rgba(141,79,108,.75);margin-top:3px}
.agent-line{font-size:13.5px;line-height:1.55;color:#4a3742;margin:0 0 6px}
.agent-ask{display:flex;gap:8px;margin-top:8px}
.agent-ask input{flex:1;min-width:0;min-height:46px;border-radius:14px;border:1px solid rgba(141,79,108,.35);
  background:rgba(255,255,255,.75);color:#39232f;font:inherit;font-size:14.5px;padding:0 13px}
.agent-ask button{min-height:46px;border-radius:14px;border:0;background:#f6b1d0;color:#34212e;font-weight:600;padding:0 18px}
.agent-run{padding:10px 0;border-bottom:1px solid rgba(141,79,108,.2)}
.agent-run strong{display:block;font-size:14.5px}
.agent-run small{display:block;font-size:11.5px;color:rgba(141,79,108,.72);margin-top:2px}
.agent-run a{display:inline-block;margin-top:6px;font-size:13px;color:#8d4f6c}

/* ── 2026-09-25: the chat is the whole screen, the rail carries the destinations ────── */
/* the conversation runs from under the header to the composer — no half-height box */
.thread{position:absolute!important;left:16px!important;right:16px!important;top:96px!important;
  bottom:calc(104px + env(safe-area-inset-bottom,0px))!important;max-height:none!important;
  overflow-y:auto!important;overflow-x:hidden!important;display:flex!important;flex-direction:column;
  gap:14px;padding:6px 2px 10px!important}
.composer{position:absolute!important;z-index:5;left:16px!important;right:16px!important;
  bottom:calc(16px + env(safe-area-inset-bottom,0px))!important}

/* the menu control is a glyph, not a box */
.topbar #openSide,.topbar .icon-button{width:44px;height:44px;min-width:44px;border:0!important;
  background:none!important;box-shadow:none!important;border-radius:0!important;padding:0!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.topbar #openSide svg,.topbar .icon-button svg{width:24px;height:24px}

/* the rail: quiet tint for the one you are on, never a loud pill */
.rail .rail-btn.on{background:rgba(246,177,208,.34)!important;border-radius:10px!important;color:#3a2331}

/* ── the transcript, in the shape a good agent harness uses ─────────────── */
.thread .row{display:flex!important;gap:10px;align-items:flex-start;max-width:100%}
.thread .row.me{justify-content:flex-end}
.thread .row .face{display:block!important;width:30px!important;height:30px!important;flex:0 0 30px!important;border-radius:50%;
  object-fit:cover;object-position:50% 12%;margin-top:3px}
.thread .msg{max-width:84%;min-width:0}
.thread .row.her .bubble{background:none!important;border:0!important;padding:0!important;border-radius:0!important;
  box-shadow:none!important;color:#f4e6ee!important;font-size:15px;line-height:1.6;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.thread .row.me .bubble{background:rgba(246,177,208,.94)!important;color:#2a1723!important;border:0!important;
  border-radius:18px!important;padding:11px 14px!important;font-size:15px;line-height:1.55}
.thread .meta{display:flex;align-items:center;gap:6px;margin-top:5px;opacity:.45;transition:opacity .15s ease}
.thread .row:hover .meta,.thread .row:focus-within .meta{opacity:.85}
.thread .meta .time{font-size:11px;letter-spacing:.04em;color:#f0dbe6}
.thread .row.me .meta{justify-content:flex-end}
.thread .meta .act{width:28px!important;height:28px!important;min-width:28px!important;min-height:28px!important;
  border:0!important;background:none!important;color:#f0dbe6!important;padding:0!important;display:grid;place-items:center;
  cursor:pointer;border-radius:8px}
.thread .meta .act:hover{background:rgba(246,177,208,.16)}
.thread .meta .act svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* her portrait stays clear at the top; the ground darkens where the words are */
.hero-scrim{background:linear-gradient(180deg,rgba(20,10,18,0) 0%,rgba(20,10,18,.28) 26%,
  rgba(20,10,18,.70) 50%,rgba(20,10,18,.88) 78%,rgba(20,10,18,.95) 100%)!important}
.thread .row.her .bubble{text-shadow:0 1px 3px rgba(12,5,11,.75)}

/* the header is not a bar: the art runs behind the mark and the glyph */
.topbar{background:linear-gradient(180deg,rgba(20,10,18,.42),rgba(20,10,18,0))!important;
  border-bottom:0!important;box-shadow:none!important;backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important}
.setup .head{background:linear-gradient(180deg,rgba(20,10,18,.38),transparent)!important;border-bottom:0!important}

/* ── 2026-09-25 (round two): bar ground, bubble ground, labelled rail, one VI ───────── */
/* the header keeps a ground so the conversation does not run into the art */
.topbar{background:rgba(30,16,28,.78)!important;border-bottom:1px solid rgba(246,177,208,.16)!important;
  backdrop-filter:blur(18px) saturate(140%)!important;-webkit-backdrop-filter:blur(18px) saturate(140%)!important}
.setup .head{background:rgba(30,16,28,.74)!important;border-bottom:1px solid rgba(246,177,208,.14)!important;
  backdrop-filter:blur(18px) saturate(140%)!important}

/* both sides of the conversation carry a ground; the corner nearest the speaker is square */
.thread .row .bubble{border-radius:18px!important;padding:11px 14px!important;font-size:15px;line-height:1.55}
.thread .row.her .bubble{background:rgba(41,23,35,.78)!important;color:#f7ecf2!important;border:1px solid rgba(246,177,208,.16)!important;
  border-top-left-radius:6px!important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);text-shadow:none}
.thread .row.me .bubble{background:rgba(246,177,208,.94)!important;color:#2a1723!important;border-top-right-radius:6px!important}
body[data-resident="lynne"] .thread .row.her .bubble{border-color:rgba(229,201,163,.24)!important}
body[data-resident="lynne"] .thread .row.me .bubble{background:rgba(229,201,163,.94)!important;color:#2b2119!important}

/* the rail says what its icons mean */
.rail{flex:0 0 78px!important;width:78px!important;gap:4px!important;padding:12px 0 10px!important}
.rail .rail-btn{width:70px!important;height:60px!important;min-height:60px!important;flex-direction:column;gap:3px}
.rail .rail-btn span{font-size:10.5px;letter-spacing:.01em;line-height:1}
.rail .rail-btn svg{width:22px;height:22px}

/* the roster popup: the one you are with is selected, the other is an invitation */
.roster-row{position:relative}
.roster-row.selected{background:rgba(246,177,208,.22)!important;border-radius:14px!important;border-bottom-color:transparent!important}
.roster-row.selected strong{font-weight:700}
.roster-mark{margin-left:auto;color:#8d4f6c;font-size:15px;font-weight:600;min-width:18px;text-align:right}

/* Lynne wears the same system as Dream: same grounds, same shapes, her own warm accent */
body[data-resident="lynne"]{--surface:rgba(41,23,35,.9)}
body[data-resident="lynne"] .hero-scrim{background:linear-gradient(180deg,rgba(24,15,11,0) 0%,rgba(24,15,11,.28) 26%,
  rgba(24,15,11,.70) 50%,rgba(24,15,11,.88) 78%,rgba(24,15,11,.95) 100%)!important}
body[data-resident="lynne"] .topbar{background:rgba(32,26,20,.78)!important;border-bottom-color:rgba(229,201,163,.18)!important}
body[data-resident="lynne"] .rail{background:rgba(240,232,220,.94)!important;border-right-color:rgba(141,112,79,.28)!important}
body[data-resident="lynne"] .rail .rail-btn{color:#8c7355}
body[data-resident="lynne"] .rail .rail-btn.on{background:rgba(229,201,163,.45)!important;color:#3a2f22}
body[data-resident="lynne"] .side-panel{background:rgba(250,244,236,.96)!important}
body[data-resident="lynne"] .nav-row,body[data-resident="lynne"] .roster-row{color:#3a2f22!important}
body[data-resident="lynne"] .ability{background:rgba(229,201,163,.18)!important}
body[data-resident="lynne"] .agent-head{background:rgba(229,201,163,.26)!important}
body[data-resident="lynne"] .agent-ask button,body[data-resident="lynne"] .seg span.on{background:#e5c9a3!important;color:#2b2119!important}

body[data-resident="lynne"] .thread .row.her .bubble{background:rgba(44,36,29,.8)!important;color:#f6efe4!important}
body[data-resident="lynne"] .agent-line,body[data-resident="lynne"] .roster-row small,body[data-resident="lynne"] .side-me-text small{color:rgba(140,115,85,.85)!important}

/* the leftover "bare words" rule flattened her bubble to a sharp rectangle — this wins outright */
#thread .row .bubble{border-radius:18px!important;padding:11px 14px!important}
#thread .row.her .bubble{border-radius:18px!important;border-top-left-radius:6px!important;padding:11px 14px!important}
#thread .row.me .bubble{border-radius:18px!important;border-top-right-radius:6px!important;padding:11px 14px!important}
#thread .row .msg{max-width:84%}
#thread .row.me .msg{margin-left:auto}

/* the shape reads as a bubble: three generous corners, the speaker-side one nearly square,
   and the bubble hugs its words instead of stretching to a fixed width */
#thread .row .bubble{width:fit-content;max-width:100%}
#thread .row.her .msg{max-width:82%}
#thread .row.me .msg{max-width:82%;margin-left:auto;display:flex;flex-direction:column;align-items:flex-end}
#thread .row.her .bubble{border-radius:20px!important;border-top-left-radius:4px!important}
#thread .row.me .bubble{border-radius:20px!important;border-top-right-radius:4px!important}
#thread .row.me .meta{justify-content:flex-end;margin-right:2px}

/* ── the drawer, rebuilt to the agreed model (2026-09-25) ───────────────────────────
   One column. Every row either takes you somewhere or changes who you are with:
   her identity, Chat, Work, the other resident, recent moments, all moments, Settings. */
#sidebar{display:flex!important;flex-direction:column!important;gap:12px!important;
  padding:18px 16px calc(14px + env(safe-area-inset-bottom,0px))!important;
  width:min(88%,340px)!important;overflow-y:auto!important;overflow-x:hidden!important}
.rail{display:none!important}
.side-head{display:flex!important;align-items:center;justify-content:space-between;margin-bottom:0}

.side-dest{display:flex;flex-direction:column;gap:6px}
.side-row{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:0 14px;
  border:1px solid rgba(141,79,108,.22);border-radius:16px;background:rgba(255,255,255,.55);
  color:#39232f;font:inherit;font-size:15.5px;font-weight:600;cursor:pointer;text-align:left}
.side-row svg{width:22px;height:22px;flex:0 0 22px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;color:#8d4f6c}
.side-row[aria-current="true"]{background:rgba(246,177,208,.5);border-color:rgba(246,177,208,.72)}
.side-row.quiet{background:transparent;border-color:transparent;color:#4a3742}
.side-row.quiet[aria-current="true"]{background:rgba(246,177,208,.3)}

.side-block{margin-top:2px}
.side-recent{display:flex;flex-direction:column;margin-bottom:6px}
.side-moment{display:flex;align-items:flex-start;gap:10px;width:100%;text-align:left;background:transparent;
  border:0;border-bottom:1px solid rgba(141,79,108,.16);border-radius:0;padding:11px 2px;min-height:52px;
  color:#39232f;font:inherit;cursor:pointer}
.side-moment strong{display:block;font-size:14.5px;font-weight:600}
.side-moment small{display:block;font-size:11px;letter-spacing:.04em;color:rgba(141,79,108,.7);margin-top:3px}
.side-moment[aria-current="true"] strong{color:#8d4f6c}
.side-empty{font-size:13px;line-height:1.5;color:rgba(141,79,108,.7);margin:2px 0 10px}

.side-other{display:flex;flex-direction:column;gap:6px}
.side-visit{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:transparent;
  border:1px solid rgba(141,79,108,.22);border-radius:16px;padding:8px 12px;min-height:56px;
  color:#39232f;font:inherit;cursor:pointer}
.side-visit img{width:40px!important;height:40px!important;flex:0 0 40px!important;border-radius:50%;
  object-fit:cover;object-position:50% 12%}
.side-visit strong{display:block;font-size:15.5px}
.side-visit small{display:block;font-size:11px;letter-spacing:.04em;color:rgba(141,79,108,.7);margin-top:3px}

.side-foot{margin-top:auto;padding-top:10px;border-top:1px solid rgba(141,79,108,.18)}
.side-foot .who{font-size:11px;color:rgba(141,79,108,.6);margin:8px 0 0}

/* Lynne keeps the same shapes in her own warm tone */
body[data-resident="lynne"] .side-row,body[data-resident="lynne"] .side-visit{color:#3a2f22}
body[data-resident="lynne"] .side-row[aria-current="true"]{background:rgba(229,201,163,.5);border-color:rgba(229,201,163,.72)}
body[data-resident="lynne"] .side-row svg{color:#8c7355}

/* a moment's title is a summary, not the whole sentence: two lines, then ellipsis */
.side-moment span{min-width:0;flex:1 1 auto}
.side-moment strong{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  overflow-wrap:anywhere;line-height:1.35}

/* actions are visible without hover (touch has no hover), and the speak toggle reads its state */
.thread .meta{opacity:.72}
.thread .meta .act{opacity:.9}
@media (hover:none){.thread .meta{opacity:.9}}
#topSpeak[aria-pressed="true"]{color:#f6b1d0;background:rgba(246,177,208,.16)!important;border-radius:12px!important}
.composer.recording{box-shadow:0 0 0 2px rgba(246,177,208,.35) inset;border-radius:26px}

/* a document reads in the app first */
.doc-read{white-space:pre-wrap;word-break:break-word;background:rgba(37,19,35,.55);border:1px solid rgba(141,79,108,.25);
  border-radius:14px;padding:14px;font:13px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#f4e6ee;
  max-height:46vh;overflow:auto;margin:0 0 12px}
.sheet .primary{width:100%;min-height:48px;border:0;border-radius:14px;background:#f6b1d0;color:#34212e;font:inherit;font-weight:600}
.setup .figure{pointer-events:none}

/* Work keeps a direct way back to the conversation (no rail, no tabs) */
.board-head{gap:10px!important;padding:0 14px!important}
.board-back{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px!important;
  border:1px solid rgba(255,255,255,.28)!important;border-radius:12px!important;background:rgba(0,0,0,.22)!important;
  color:#fff4f8!important;font:inherit;font-size:13px!important}
.board-back svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.board-head .board-sub{flex:1 1 auto;min-width:0;margin:0 4px!important}
/* the call is its own mode: full screen, her portrait, one control to end it */
.call-mode{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  background:#150a13f2;backdrop-filter:blur(6px);color:#fff4f8;padding:0 22px calc(28px + env(safe-area-inset-bottom,0px))}
.call-mode .portrait{width:min(62vw,240px);aspect-ratio:3/4;border-radius:26px;background-size:cover;background-position:50% 12%;
  margin-bottom:auto;margin-top:calc(36px + env(safe-area-inset-top,0px));border:1px solid rgba(246,177,208,.3)}
.call-mode .state{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:#f6b1d0;margin-bottom:10px}
.call-mode .said{font-size:16px;line-height:1.55;text-align:center;color:#f2e3ec;max-height:34vh;overflow:auto;margin:0 0 18px;width:100%}
.call-mode .row{display:flex;gap:14px;align-items:center;justify-content:center;width:100%}
.call-mode .round{width:64px;height:64px;border-radius:50%;border:1px solid rgba(246,177,208,.4);background:rgba(37,19,35,.7);
  color:#f6b1d0;display:grid;place-items:center;font-size:22px}
.call-mode .round.end{background:#f6b1d0;color:#2a1723;border-color:#f6b1d0}
.call-mode .round svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.call-mode.live .portrait{box-shadow:0 0 0 3px rgba(246,177,208,.35)}


/* the speak toggle needs to be seen to be used: definition without a boxy chip */
.setup .head .icon-button{ color:#fff6fa; background:rgba(20,10,18,.38); border-color:rgba(255,255,255,.34) }

/* ── Arrival (the first screen) ────────────────────────────────────────────────
   2026-09-26. One left-aligned column on a single gutter, one action, and a scrim
   whose stops are placed where the type actually sits — the small scene label used to
   ride a fixed gradient that did not cover its position. The founder's art is untouched:
   same backdrops, same cut-outs, full bleed. Hierarchy: scene label → display → deck →
   the one action → who you are meeting. The old reassurance line was removed: the switch
   says what it said, and the bottom block is no longer five layers deep. */
.setup .scrim{
  background:
    linear-gradient(180deg,
      rgba(18,9,16,.66) 0%, rgba(18,9,16,.22) 16%, rgba(18,9,16,0) 32%,
      rgba(19,10,17,.52) 48%, rgba(18,9,16,.74) 60%, rgba(18,9,16,.92) 74%,
      rgba(16,8,14,.98) 90%, #100810 100%);
}
.setup .bottom{
  left:22px; right:22px; bottom:calc(26px + env(safe-area-inset-bottom,0px));
  max-height:64%;
}
.setup .overline{
  font-size:11px; letter-spacing:.14em; font-weight:700; color:#ffd3e7; opacity:1;
  margin:0 0 10px; text-shadow:0 1px 3px rgba(8,3,7,.95), 0 1px 10px rgba(8,3,7,.85);
}
.setup .bottom h1{
  font-family:Belleza,EDisplay,'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans CJK SC',Georgia,serif;
  font-size:clamp(34px,9.6vw,42px); line-height:1.08; letter-spacing:.02em;
  color:#fff6fa; margin:0 0 12px; text-shadow:0 2px 18px rgba(9,4,8,.6);
}
#arrivalLine{
  font-size:17px; line-height:1.5; color:rgba(255,246,250,.94);
  max-width:34ch; margin:0 0 26px; text-shadow:0 1px 3px rgba(8,3,7,.9), 0 1px 12px rgba(8,3,7,.8);
}
/* who you are meeting: a quiet segmented control under the one action, 44px targets */
.setup .resident-switch{
  display:flex; gap:3px; margin:0 0 16px; padding:3px;
  background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.20); border-radius:14px;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.setup .resident-switch button{
  flex:1 1 0; min-height:44px; padding:0 14px; border:1px solid transparent; border-radius:11px; background:none;
  color:rgba(255,244,248,.68); font-size:14px; font-weight:600; letter-spacing:.01em;
}
/* the chosen resident is a selection, not a second button: a tinted fill, never a solid pill —
   the accent stays with the one action below it */
.setup .resident-switch button[aria-pressed="true"]{
  background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.62); color:#ffffff;
  box-shadow:inset 0 0 0 .5px rgba(255,255,255,.25);
}
body[data-resident="lynne"] .setup .resident-switch button[aria-pressed="true"]{
  background:rgba(229,201,163,.22); border-color:rgba(229,201,163,.46); color:#fffaf4;
}
.setup .resident-switch button:focus-visible{ outline:2px solid #fff6fa; outline-offset:2px }
/* the one action: a full pill, sized for a thumb, with a press state */
.setup .primary{
  min-height:54px; border-radius:999px; font-size:17px; letter-spacing:.01em;
  box-shadow:0 12px 28px rgba(246,177,208,.24); margin:0;
}
.setup .primary svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round }
.setup .primary:active{ transform:translateY(1px) }
.setup .primary:focus-visible{ outline:2px solid #fff6fa; outline-offset:3px }
.setup .bottom .hint{ display:none }

/* Entrance: the scene settles, she arrives, the copy follows. Nothing loops; nothing runs
   again after it has played, and reduced-motion gets the finished state immediately. */
@media (prefers-reduced-motion: no-preference){
  .setup .scene{ animation:arr-settle 1600ms cubic-bezier(.22,.61,.36,1) both }
  .setup .figure{ animation:arr-figure 900ms cubic-bezier(.22,.61,.36,1) 140ms both }
  .setup .bottom .overline{ animation:arr-rise 560ms cubic-bezier(.22,.61,.36,1) 220ms both }
  .setup .bottom h1{ animation:arr-rise 620ms cubic-bezier(.22,.61,.36,1) 290ms both }
  #arrivalLine{ animation:arr-rise 620ms cubic-bezier(.22,.61,.36,1) 360ms both }
  .setup .resident-switch{ animation:arr-rise 620ms cubic-bezier(.22,.61,.36,1) 430ms both }
  .setup .primary{ animation:arr-rise 620ms cubic-bezier(.22,.61,.36,1) 490ms both }
}
@keyframes arr-settle{ from{ transform:scale(1.045) } to{ transform:scale(1) } }
@keyframes arr-figure{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }
@keyframes arr-rise{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }

/* a narrow phone: keep the display from wrapping into a third line */
@media (max-width:360px){
  .setup .bottom h1{ font-size:32px }
  #arrivalLine{ font-size:16px; margin-bottom:18px }
}