:root{
  --bg:#0b1620; --bg2:#102230; --card:#0f2029;
  --line:rgba(190,230,240,.12); --line2:rgba(190,230,240,.2);
  --text:#e8f1f4; --muted:#8aa6b0; --faint:#6a858f;
  --accent:#bfe6ff; --accent-ink:#0b1620; --warm:#ffd9a0; --danger:#ff9b8f;
  --s1:#12303a; --s2:#17323e; --s3:#0a1a22; --s4:#14323c; --s5:#13293a; --s6:#0e2330; --s7:#0a1820; --s8:#0d2029; --s9:#081219; --s10:#15303c; --s11:#1b3a48; --s12:#0f2a33; --s13:#050b11; --s14:#060d14;
  --glass1:14,34,44; --glass2:8,20,28; --glass3:15,32,41;
  --serif:Georgia,'Iowan Old Style',serif;
  --sans:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:radial-gradient(120% 90% at 30% 0%, var(--s4) 0%, var(--bg) 60%, var(--s14) 100%);
  color:var(--text); font-family:var(--sans); line-height:1.5;
  display:flex; justify-content:center;
}
/* align-self:flex-start matters: body is a flex row, and a stretched item is pinned to the screen's height, so its
   bottom padding never reached below long content and the last button sat under the tab bar or the keyboard. */
.phone{width:100%; max-width:460px; min-height:100%; align-self:flex-start; padding:calc(22px + env(safe-area-inset-top, 0px)) 20px calc(28px + env(safe-area-inset-bottom, 0px)); position:relative}  /* clear of the notch and the home bar on an installed iPhone app */

.view{display:none; flex-direction:column}
body[data-view="loading"] .view-loading,
body[data-view="auth"] .view-auth,
body[data-view="onboarding"] .view-onboarding,
body[data-view="home"] .view-home,
body[data-view="groups"] .view-groups,
body[data-view="group"] .view-group,
body[data-view="photo"] .view-photo,
body[data-view="privacy"] .view-privacy,
body[data-view="people"] .view-people,
body[data-view="world"] .view-world,
body[data-view="awaken"] .view-awaken,
body[data-view="chat"] .view-chat,
body[data-view="inbox"] .view-inbox,
body[data-view="thread"] .view-thread,
body[data-view="plan"] .view-plan,
body[data-view="planedit"] .view-planedit,
body[data-view="connect"] .view-connect,
body[data-view="claim"] .view-claim{display:flex}

.view-loading{align-items:center; justify-content:center; min-height:70vh; gap:14px}

h1{font-family:var(--serif); font-weight:500; font-size:30px; margin:18px 0 6px}
h2{font-family:var(--serif); font-weight:500; font-size:26px; margin:10px 0 2px}
h3{font-weight:500; font-size:15px; margin:0}
.muted{color:var(--muted)} .faint{color:var(--faint)}
.sub{margin:0 0 18px; font-size:14px}
.tiny{font-size:12px; margin:10px 0 0}

/* the mark — the pebble (marketing/pebble.js draws the same shapes). It sits quietly in every wordmark, chip and
   helper button, so the brand is in the corner of your eye all day without ever being in the way. */
:root{--pebble:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-46 -44 92 88'%3E%3Cg transform='translate(-2 -4) rotate(6)'%3E%3Cpath d='M-24 -32 Q28 -40 36 -4 Q41 32 -6 33 Q-38 32 -33 -2 Q-31 -24 -24 -32 Z' fill='%23f3ecdf'/%3E%3Cg transform='translate(-11 -4)'%3E%3Cellipse rx='3.9' ry='5' fill='%230b1620'/%3E%3Crect x='-5' y='-7.5' width='10' height='4.4' fill='%23f3ecdf'/%3E%3C/g%3E%3Cg transform='translate(13 -5)'%3E%3Cellipse rx='3.9' ry='5' fill='%230b1620'/%3E%3Crect x='-5' y='-7.5' width='10' height='4.4' fill='%23f3ecdf'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(-32 26) rotate(-8)'%3E%3Cpath d='M-7 -9 Q8 -12 10 -1 Q12 10 -2 10 Q-11 9 -9 0 Q-9 -6 -7 -9 Z' fill='%232bb3a0'/%3E%3Cg transform='translate(-3 -1)'%3E%3Cellipse rx='1.4' ry='1.8' fill='%230b1620'/%3E%3Crect x='-2' y='-3' width='4' height='1.5' fill='%232bb3a0'/%3E%3C/g%3E%3Cg transform='translate(4 -1.5)'%3E%3Cellipse rx='1.4' ry='1.8' fill='%230b1620'/%3E%3Crect x='-2' y='-3' width='4' height='1.5' fill='%232bb3a0'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")}
.aura-mark{display:inline-block; width:16px; height:16px; background:var(--pebble) center/contain no-repeat; vertical-align:-3px; transform-origin:50% 90%}
.aura-mark.big{width:72px; height:72px; animation:breathe 4s ease-in-out infinite}
.aura-mark.tiny{width:13px; height:13px; vertical-align:-2px}
.aura-mark.hop{animation:markHop .5s cubic-bezier(.2,1.4,.4,1)}   /* a tiny hop when something arrives */
@keyframes breathe{0%,100%{opacity:.92; transform:scale(.97)}50%{opacity:1; transform:scale(1.03)}}
@keyframes markHop{0%{transform:none}30%{transform:translateY(-4px) scaleY(1.08)}60%{transform:translateY(0) scale(1.08,.92)}100%{transform:none}}
/* while something loads, the pebble waits with you instead of three dots */
.empty.wait{min-height:22px}
.empty.wait::before{content:""; display:inline-block; width:18px; height:18px; margin-right:6px; vertical-align:-4px; background:var(--pebble) center/contain no-repeat; animation:breathe 2.2s ease-in-out infinite}

.card{background:var(--card); border:.5px solid var(--line); border-radius:16px; padding:16px 18px}
form.card{display:flex; flex-direction:column; gap:14px; margin-top:8px}
label{display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--muted)}
input,textarea,select{background:var(--s3); border:.5px solid var(--line2); border-radius:10px;
  padding:11px 13px; color:var(--text); font:inherit; font-size:16px; outline:none}  /* <16px makes iPhones zoom on focus */
input:focus,textarea:focus{border-color:var(--accent)}
textarea{resize:vertical}

button{font:inherit; cursor:pointer; border:none; background:none; color:var(--text)}
.primary{background:var(--accent); color:var(--accent-ink); font-size:16px; font-weight:500;
  border-radius:22px; padding:13px; margin-top:4px}
.primary:disabled{opacity:.5; cursor:default}
.link{color:var(--accent); font-size:13px}

.bar{display:flex; align-items:center; justify-content:space-between; margin:-4px -2px 8px}
.wordmark{font-family:var(--serif); font-size:19px; display:flex; align-items:center; gap:8px}
/* the brand: the pebbles blinking beside "aura" in the film's serif (self-hosted, never fetched from Google by the app) */
@font-face{font-family:'Newsreader'; font-style:normal; font-weight:300 700; font-display:swap; src:url('/static/fonts/newsreader-normal.woff2') format('woff2')}
.wordmark.wm-brand{gap:7px}
.wm-word{font-family:'Newsreader', Georgia, serif; font-weight:400; font-size:24px; letter-spacing:-.01em; color:var(--text); line-height:1}
.pmark{width:26px; height:25px; display:inline-block; overflow:visible; transform-origin:50% 90%}
.pmark.small{width:24px; height:23px}
.pmark .lid{transform-box:fill-box; transform-origin:50% 0; transform:scaleY(1)}
/* a blink every so often: the lids drop and lift, big ones first, the little one a beat behind */
.pmark.live .lid{animation:blink 5.2s ease-in-out infinite}
.pmark.live .lid-s{animation-delay:.35s}
@keyframes blink{0%,91%,100%{transform:scaleY(1)}93.5%{transform:scaleY(2.3)}96%{transform:scaleY(1)}}
.chat-face{width:30px; height:30px; vertical-align:middle; display:inline-block}

/* the bar at the bottom of a phone */
.tabbar{position:fixed; left:0; right:0; bottom:0; z-index:30; display:flex; justify-content:space-around; align-items:stretch;
  padding:6px 8px calc(6px + env(safe-area-inset-bottom, 0px)); background:rgba(var(--glass2), .9); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-top:.5px solid var(--line)}
.tabbar.hidden{display:none}
.tabbar button{flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; padding:6px 0 2px; font-size:11px; color:var(--faint); border-radius:14px; max-width:120px}
.tabbar button span{font-size:20px; line-height:24px; height:24px; display:inline-flex; align-items:center; position:relative}
.tabbar button i{font-style:normal; max-width:80px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tabbar button.on{color:var(--text)}
.tabbar button.on span{filter:drop-shadow(0 0 6px rgba(var(--glass3), .9))}
.tabbar .badge{position:absolute; top:-6px; right:-12px; animation:none}
body.has-tabbar .phone{padding-bottom:calc(84px + env(safe-area-inset-bottom, 0px))}
body.has-tabbar[data-view="chat"] .phone, body.has-tabbar[data-view="thread"] .phone, body.has-tabbar[data-view="crew"] .phone{padding-bottom:calc(68px + env(safe-area-inset-bottom, 0px))}
body.has-tabbar .talk-btn{display:none}
/* keyboard up on a phone: room to scroll the thing you're filling in (and its button) above the keyboard, on every screen */
body.kb-open .phone{padding-bottom:calc(var(--kb, 0px) + 60px) !important}
body.kb-open .tabbar{display:none}
body.kb-open .view-planedit .pe-form{padding-bottom:12px}

/* plans and you */
body[data-view="plans"] .view-plans, body[data-view="you"] .view-you{display:flex}
.plans-body{display:flex; flex-direction:column; gap:10px}
.plans-body .section-label{margin-top:8px}
.plans-empty{text-align:center; padding:30px 10px}
.you-head{display:flex; align-items:center; gap:14px; margin:4px 0 14px}
.you-dot{width:56px; height:56px; border-radius:50%; flex:none}
.you-head b{display:block; font-size:19px; font-weight:500} .you-head small{color:var(--muted); font-size:13px}
.you-body{display:flex; flex-direction:column; gap:8px}
.you-row{display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:12px 14px; border-radius:14px; background:var(--card); border:.5px solid var(--line)}
.you-row>span{font-size:20px; flex:none; width:26px; text-align:center; display:grid; place-items:center} .you-row>div{flex:1; min-width:0}
.you-row>span .ic{width:22px; height:22px; color:var(--text); opacity:.8} .you-row.danger-text>span .ic{color:#ff8a80}
.you-row b{display:block; font-weight:500} .you-row small{display:block; color:var(--faint); font-size:12.5px}
.you-row i{color:var(--faint); font-style:normal}
.you-row.danger-text b{color:#ff8a80}
.tiles-more{align-self:flex-start; margin:-6px 0 10px; font-size:13px}
.with-people.collapsed .wp-tile:nth-child(n+5){display:none}
.icon-btn{width:34px; height:34px; border-radius:50%; border:.5px solid var(--line2); position:relative;
  color:var(--muted); font-size:18px; line-height:1; display:grid; place-items:center}
.icon-btn::after{content:""; position:absolute; inset:-6px}   /* a thumb-sized hit area around every small round button */

/* the ⋯ menu: below the header, clear of the notch on an installed iPhone app, and solidly on top of everything */
.menu{position:absolute; top:calc(58px + env(safe-area-inset-top, 0px)); right:20px; z-index:45; background:rgba(var(--glass2), .97);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); box-shadow:0 14px 40px rgba(0,0,0,.45);
  border:.5px solid var(--line2); border-radius:12px; padding:6px; display:flex; flex-direction:column; min-width:190px}
.menu button{text-align:left; padding:10px 12px; border-radius:8px; font-size:14px}
.menu button:hover{background:var(--s10)}
.menu .danger{color:var(--danger)}
.hidden{display:none !important}

/* sign in / join */
.tabs{display:flex; gap:6px; background:var(--s3); border:.5px solid var(--line); border-radius:22px; padding:4px; margin-bottom:4px}
.tab{flex:1; padding:9px; border-radius:18px; font-size:14px; color:var(--muted)}
.tab.active{background:var(--s10); color:var(--text)}
.handle-field{display:flex; align-items:center; background:var(--s3); border:.5px solid var(--line2); border-radius:10px; padding-left:13px}
.handle-field:focus-within{border-color:var(--accent)}
.handle-field .at{color:var(--faint); font-size:15px}
.handle-field input{flex:1; border:none; background:none; padding-left:3px}
.form-error{color:var(--danger); font-size:13px; margin:0; min-height:0}
.form-error:empty{display:none}
body:not(.is-admin) .admin-only{display:none}
.invite-card{margin-bottom:14px}
.invite-card.pop{animation:sayPop .4s cubic-bezier(.2,1.4,.4,1), inviteGlow 1.6s ease}
@keyframes inviteGlow{0%,100%{box-shadow:none}30%{box-shadow:0 0 0 3px rgba(255,217,160,.55)}}
.invite-code{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:26px; letter-spacing:.08em; color:var(--accent); margin:2px 0 4px; text-align:center}
.conn .handle{color:var(--faint); font-size:13px}

/* connect in person */
.center{text-align:center}
.connect-btn{align-self:flex-start; margin:0 0 6px; padding:9px 16px; border-radius:20px;
  border:.5px solid var(--line2); color:var(--accent); font-size:14px; background:rgba(191,230,255,.06)}
.qr-wrap{align-self:center; background:#fff; border-radius:18px; padding:10px; margin:6px 0 14px;
  box-shadow:0 0 60px rgba(191,230,255,.18)}
.qr-wrap img{display:block; width:240px; height:240px}
.connect-code{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:30px; letter-spacing:.12em;
  color:var(--accent); text-align:center; margin:0 0 2px}
.warn{background:rgba(255,155,143,.1); border:.5px solid rgba(255,155,143,.35); color:#ffd2cc;
  border-radius:12px; padding:10px 12px; font-size:13px; margin:12px 0 0}
.warn code{font-size:12px}
.code-card{margin-top:22px}
.code-card input{text-transform:uppercase; letter-spacing:.1em}

.orbs{position:relative; height:170px; margin:10px 0 4px}
.orb{position:absolute; top:40px; width:84px; height:84px; border-radius:50%; mix-blend-mode:screen;
  transition:left 1.8s cubic-bezier(.4,0,.2,1), transform 1.8s ease; animation:breathe 4s ease-in-out infinite}
.orb.me{left:14%}
.orb.them{left:calc(86% - 84px); animation-delay:-2s}
.orbs.merging .orb.me{left:calc(50% - 54px)}
.orbs.merging .orb.them{left:calc(50% - 30px)}
.orbs.merged .orb{transform:scale(1.15)}
.claim-acts{display:flex; flex-direction:column; gap:10px; margin-top:6px}
.ghost{border:.5px solid var(--line2); color:var(--muted); border-radius:22px; padding:12px; font-size:15px}
.claim-result{margin:14px 0}
.claim-result .tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px}
.claim-result .tag{font-size:12px; color:var(--accent); background:rgba(191,230,255,.1); border-radius:20px; padding:4px 11px}
/* invitations */
.invite-url{font-size:12px; color:var(--faint); text-align:center; word-break:break-all; margin:0 0 12px}
.invite-acts{display:flex; gap:8px}
.invite-acts .primary,.invite-acts .ghost{flex:1; margin:0; padding:11px}
.invite-link{display:block; margin:18px auto 0; font-size:14px}

/* ---- the awakening ---- */
@property --size { syntax:'<length>'; inherits:false; initial-value:30px; }
@property --hue  { syntax:'<number>'; inherits:true;  initial-value:200; }
@property --sat  { syntax:'<percentage>'; inherits:true; initial-value:0%; }

.view-awaken{min-height:calc(100vh - 50px); padding-bottom:var(--kb, 0px); transition:padding-bottom .2s}
/* keyboard up on a phone: the light shrinks to a sliver and the words tighten, so the box and what you typed stay in view */
body.kb-open .aw-glow{--size:18px !important; margin:14px auto !important}
body.kb-open .aw-text{min-height:0}
body.kb-open .aw-line{margin-bottom:8px; font-size:17px}
body.kb-open .aw-line:first-child{font-size:20px}
body.kb-open .aw-life-stage{display:none}
body.kb-open .aw-next{margin-top:14px}
.aw-stage{position:relative; flex:1; display:flex; flex-direction:column; align-items:center; text-align:center}
.aw-glow{
  --size:30px; --hue:200; --sat:0%;
  width:var(--size); height:var(--size); border-radius:50%;
  /* fixed 230px band, so the words below never jump as the light grows */
  margin:calc(115px - var(--size) / 2) auto calc(115px - var(--size) / 2);
  background:radial-gradient(circle at 42% 38%, #fff 0%, hsl(var(--hue) var(--sat) 84%) 30%, hsl(var(--hue) var(--sat) 62% / 0) 72%);
  box-shadow:0 0 calc(var(--size) * .9) calc(var(--size) * .15) hsl(var(--hue) var(--sat) 72% / .32);
  transition:--size 2.4s cubic-bezier(.2,.7,.2,1), --hue 2.8s ease, --sat 2.8s ease;
  animation:breathe 4.5s ease-in-out infinite;
}
.aw-alive .aw-glow{animation-duration:3.2s}
.aw-card-mode .aw-glow{display:none}
.aw-inviter{position:absolute; top:4px; right:4px; width:28px; height:28px; border-radius:50%;
  background:radial-gradient(circle at 42% 38%, #fff, hsl(var(--hue) 80% 72%) 40%, hsl(var(--hue) 80% 60% / 0) 72%);
  animation:breathe 4s ease-in-out infinite}
.aw-text{width:100%; max-width:360px; min-height:120px; cursor:default}
.aw-line{opacity:0; transform:translateY(8px); transition:opacity 1.2s ease, transform 1.2s ease;
  font-family:var(--serif); font-size:20px; line-height:1.5; color:var(--text); margin:0 0 16px}
.aw-line:first-child{font-size:26px}
.aw-line.aw-in{opacity:1; transform:none}
.aw-line i{color:var(--accent); font-style:italic}
.aw-promise{font-family:var(--sans); font-size:15px !important; color:var(--muted); text-align:left; line-height:1.55}
.aw-promise b{color:var(--text); font-weight:500}
.aw-big{font-size:68px !important; color:var(--accent); margin-bottom:6px !important}
.aw-name{font-size:42px !important}
.aw-input{width:100%; max-width:360px}
.aw-field{display:flex; flex-direction:column; gap:8px; animation:awFade .9s ease}
.aw-field input,.aw-field textarea{background:rgba(255,255,255,.04); border:.5px solid var(--line2); border-radius:14px;
  padding:14px; font-size:18px; text-align:center; color:var(--text); width:100%}
.aw-field textarea{text-align:left; font-size:16px; line-height:1.5}
.aw-prefixed{display:flex; align-items:center; background:rgba(255,255,255,.04); border:.5px solid var(--line2); border-radius:14px; padding-left:16px}
.aw-prefixed:focus-within{border-color:var(--accent)}
.aw-prefixed span{color:var(--faint); font-size:18px}
.aw-prefixed input{border:none; background:none; text-align:left; padding-left:4px}
.aw-hint{font-size:13px; color:var(--faint); margin:0}
.aw-good{color:#9fe1cb} .aw-bad{color:var(--danger)}
.aw-show{align-self:flex-end; font-size:13px}
.aw-chips{display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:4px}
.aw-chip{border:.5px solid var(--line2); border-radius:20px; padding:6px 14px; font-size:14px; color:var(--muted)}
.aw-chip:hover{color:var(--text); border-color:var(--accent)}
.aw-speech{font-family:var(--serif); font-style:italic; font-size:19px; line-height:1.6; color:#eef6f8; min-height:3.2em; margin:4px 0 0}
.aw-next{margin-top:26px; background:var(--accent); color:var(--accent-ink); border-radius:24px; padding:13px 36px;
  font-size:16px; font-weight:500; animation:awFade .9s ease}
.aw-next:disabled{opacity:.6}
.aw-error{color:var(--danger); font-size:14px; margin:12px 0 0; max-width:340px}
.aw-error:empty{display:none}
.aw-signin{margin-top:22px; font-size:14px}
.aw-hidden{display:none !important}
.aw-leaving .aw-text,.aw-leaving .aw-input,.aw-leaving .aw-next{opacity:0; transition:opacity .45s ease}
@keyframes awFade{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}

.aw-card{--hue:200; background:linear-gradient(180deg,var(--s1),var(--s9)); border:.5px solid var(--line2); border-radius:22px;
  padding:30px 20px 24px; margin:8px 0 16px; box-shadow:0 24px 60px rgba(0,0,0,.45)}
.aw-card-orb{width:120px; height:120px; margin:0 auto 18px; border-radius:50%;
  background:radial-gradient(circle at 42% 38%, #fff 0%, hsl(var(--hue) 85% 80%) 30%, hsl(var(--hue) 80% 60% / 0) 72%);
  box-shadow:0 0 90px 10px hsl(var(--hue) 80% 65% / .3); animation:breathe 4s ease-in-out infinite}
.aw-card-name{font-family:var(--serif); font-size:30px; margin:0}
.aw-card-handle{color:var(--muted); margin:2px 0 14px}
.aw-card-no{color:var(--accent); letter-spacing:.05em; margin:0; font-size:14px}
.aw-card-meta{color:var(--faint); font-size:12px; margin:6px 0 0}
.aw-invite-note{max-width:320px; margin:0 auto; line-height:1.5}
.aw-save{margin-top:12px}

@media (prefers-reduced-motion: reduce){
  .aw-line{transition:none} .aw-glow{transition:none; animation:none}
  .aw-field,.aw-next{animation:none}
}

/* ---- the opening film (cinema.js) ---- */
.cine-bg{position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; display:none}
body.cine-on .cine-bg{display:block}
body.cine-on .phone{z-index:1}
body.cine-film .phone{visibility:hidden}
.cinema{position:fixed; inset:0; z-index:70; overflow:hidden; color:#fff; transition:opacity 1.2s ease;
  -webkit-tap-highlight-color:transparent; user-select:none}
.cinema.cin-out{opacity:0; pointer-events:none}
.cin-start{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  color:#fff; transition:opacity .8s ease}
.cin-start b{font-weight:500; font-size:17px; letter-spacing:.02em}
.cin-start small{font-size:13px; color:rgba(220,235,245,.55)}
.cin-dot{width:18px; height:18px; border-radius:50%; margin-bottom:10px;
  background:radial-gradient(circle, #fff 0 30%, rgba(191,230,255,.5) 55%, rgba(191,230,255,0) 72%);
  box-shadow:0 0 30px 10px rgba(191,230,255,.25); animation:breathe 2.2s ease-in-out infinite}
.cin-playing .cin-start{opacity:0; pointer-events:none}
.cin-clock{position:absolute; left:0; right:0; top:calc(9vh + env(safe-area-inset-top)); text-align:center;
  font-weight:200; font-size:clamp(56px, 15vw, 96px); letter-spacing:-.02em; line-height:1; font-variant-numeric:tabular-nums;
  color:rgba(255,255,255,.92); opacity:0; transform:translateY(-8px); transition:opacity 1.4s ease, transform 1.4s ease;
  text-shadow:0 2px 30px rgba(0,0,0,.35)}
.cin-clock small{font-size:.28em; font-weight:400; letter-spacing:.06em; margin-left:.25em; opacity:.7}
.cin-clock.on{opacity:1; transform:none}
.cin-cap{position:absolute; left:24px; right:24px; top:68vh; margin:0; text-align:center;
  font-family:var(--serif); font-size:clamp(24px, 6.4vw, 38px); line-height:1.25; color:#fff;
  opacity:0; filter:blur(10px); letter-spacing:.08em; text-shadow:0 2px 24px rgba(0,0,0,.45);
  transition:opacity 1.1s ease, filter 1.1s ease, letter-spacing 1.6s cubic-bezier(.2,.8,.2,1)}
.cin-cap.on{opacity:1; filter:none; letter-spacing:0}
.cin-names span{position:absolute; left:0; top:0; width:120px; margin-left:-60px; text-align:center;
  font-size:14px; font-weight:500; color:rgba(255,255,255,.85); text-shadow:0 1px 10px rgba(0,0,0,.5)}
.cin-names{opacity:0; transition:opacity .8s ease}
.cin-names.on{opacity:1}
.cin-note{position:absolute; left:50%; bottom:calc(9vh + env(safe-area-inset-bottom)); width:min(370px, 88vw);
  transform:translate(-50%, 60px) scale(.94); opacity:0; pointer-events:none;
  background:rgba(28,36,48,.55); -webkit-backdrop-filter:blur(22px) saturate(1.4); backdrop-filter:blur(22px) saturate(1.4);
  border:.5px solid rgba(255,255,255,.18); border-radius:24px; padding:14px 16px 14px; text-align:left;
  box-shadow:0 20px 60px rgba(0,0,0,.4); transition:transform .8s cubic-bezier(.2,1.3,.3,1), opacity .5s ease}
.cin-note.on{transform:translate(-50%, 0) scale(1); opacity:1}
.cin-note.gone{transform:translate(-50%, -40px) scale(.9); opacity:0; transition:transform .6s ease, opacity .5s ease}
.cin-note-head{display:flex; align-items:center; gap:8px; font-size:12px; letter-spacing:.04em; color:rgba(255,255,255,.7); margin-bottom:6px}
.cin-note-head b{font-weight:600; text-transform:uppercase}
.cin-note-head small{margin-left:auto; font-size:12px}
.cin-glyph{width:18px; height:18px; border-radius:6px; background:radial-gradient(circle at 40% 35%, #fff, #bfe6ff 45%, #3a7a9a)}
.cin-note p{margin:0 0 12px; font-size:16px; line-height:1.4; color:#fff}
.cin-note-acts{display:flex; gap:8px}
.cin-note-acts span{flex:1; text-align:center; padding:9px; border-radius:14px; font-size:14px; font-weight:500;
  background:rgba(255,255,255,.12); color:rgba(255,255,255,.85)}
.cin-note-acts .cin-yes{background:#bfe6ff; color:var(--bg); transition:transform .2s ease, box-shadow .4s ease}
.cin-yes.press{transform:scale(.92); box-shadow:0 0 0 10px rgba(191,230,255,.25), 0 0 40px 10px rgba(191,230,255,.4)}
.cin-title{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  pointer-events:none; padding:0 20px}
.cin-title p{margin:0; opacity:0; font-weight:700; letter-spacing:-.03em; line-height:1.02; font-size:clamp(44px, 12vw, 92px);
  filter:blur(14px); transform:scale(1.12); transition:opacity .9s ease, filter .9s ease, transform 1.6s cubic-bezier(.15,.8,.2,1)}
.cin-title .l2{background:linear-gradient(90deg, #ffd9a0, #ffb3c7, #bfe6ff); -webkit-background-clip:text; background-clip:text; color:transparent}
.cin-title .l3{margin-top:28px; font-family:var(--serif); font-weight:400; font-size:20px; letter-spacing:.4em; color:rgba(255,255,255,.6)}
.cin-title.on .l1, .cin-title.two .l2, .cin-title.three .l3{opacity:1; filter:none; transform:none}
/* the film about your friend: "Jess saved you a spot." is the big line, the tagline sits under it */
.cin-title.personal .l1{font-size:clamp(34px, 9.5vw, 76px); background:linear-gradient(90deg, #ffd9a0, #ffb3c7, #bfe6ff); -webkit-background-clip:text; background-clip:text; color:transparent}
.cin-title.personal .l2{font-size:clamp(18px, 4.6vw, 28px); font-weight:500; letter-spacing:0; margin-top:14px; background:none; -webkit-text-fill-color:initial; color:rgba(255,255,255,.85)}
.cin-skip{position:absolute; right:calc(18px + env(safe-area-inset-right)); bottom:calc(18px + env(safe-area-inset-bottom));
  font-size:14px; color:rgba(255,255,255,.55); padding:8px 14px; border-radius:20px; border:.5px solid rgba(255,255,255,.2);
  opacity:0; transition:opacity .6s ease 1.2s}
.cin-playing .cin-skip{opacity:1}
.sound-btn{position:fixed; z-index:80; top:calc(14px + env(safe-area-inset-top)); right:calc(14px + env(safe-area-inset-right));
  width:36px; height:36px; border-radius:50%; font-size:15px; display:grid; place-items:center;
  background:rgba(255,255,255,.06); border:.5px solid rgba(255,255,255,.16)}
/* only where there's music: the film, the signup and the three questions (never over photos or sheets) */
body:not(.cine-on):not(.sound-on) .sound-btn{display:none}
.vw-sent{margin:8px 0 0; font-size:14px; color:#9fe1cb}
.vw-sent .link{font-size:14px; margin-left:6px}

/* the setup, as part of the same shot */
body.cine-on .view-awaken .aw-line{filter:blur(8px); letter-spacing:.06em;
  transition:opacity 1.2s ease, transform 1.2s ease, filter 1.2s ease, letter-spacing 1.6s cubic-bezier(.2,.8,.2,1)}
body.cine-on .view-awaken .aw-line.aw-in{filter:none; letter-spacing:0}
body.cine-on .view-awaken .aw-line:first-child{font-size:30px; line-height:1.25}
body.cine-on .aw-leaving .aw-text, body.cine-on .aw-leaving .aw-input{transform:translateY(-14px); filter:blur(6px);
  transition:opacity .45s ease, transform .45s ease, filter .45s ease}
.aw-count{font-variant-numeric:tabular-nums; display:inline-block}
.aw-count.landed{animation:countLand .7s cubic-bezier(.2,1.6,.4,1)}
@keyframes countLand{0%{transform:scale(1.35); text-shadow:0 0 40px rgba(191,230,255,.9)} 100%{transform:none}}
.aw-friend{position:absolute; left:50%; top:20px; width:190px; height:190px; margin-left:-95px; pointer-events:none}
.aw-friend.pop{animation:creaturePop 1s cubic-bezier(.2,1.5,.4,1) both}
body.cine-on .reading{background:radial-gradient(110% 80% at 50% 35%, rgba(var(--glass1),.55) 0%, rgba(var(--glass2),.82) 70%)}

/* the three questions, played like a reveal */
.rd-flash{position:fixed; inset:0; pointer-events:none; opacity:0; z-index:2}
.rd-flash.go{animation:rdFlash var(--dur, .9s) ease-out both}
@keyframes rdFlash{0%{opacity:var(--peak, .45)} 100%{opacity:0}}
.rd-chapter{margin:0 0 10px; font-size:12px; font-weight:600; letter-spacing:.42em; text-transform:uppercase; color:rgba(220,235,245,.55)}
.rd-chapter i{display:inline-block; width:26px; height:1px; background:currentColor; vertical-align:middle; margin:0 12px; font-style:normal}
.reading .rd-ask{font-size:clamp(26px, 7vw, 34px)}
.rd-stage{transition:transform 6.5s cubic-bezier(.4,0,.2,1)}
.reading.rd-forming .rd-stage{transform:scale(1.14); animation:rumble .09s linear infinite}
@keyframes rumble{0%{translate:0 0} 25%{translate:1px -1px} 50%{translate:-1px 1px} 75%{translate:1px 1px} 100%{translate:0 0}}
.rd-words.rd-in > .rd-kind.slam{animation:slam 1.2s cubic-bezier(.15,1.3,.3,1) both}
@keyframes slam{0%{opacity:0; transform:scale(1.9); letter-spacing:.25em; filter:blur(14px)} 55%{opacity:1; filter:none} 100%{opacity:1; transform:none; letter-spacing:normal}}
.reading .rd-kind{font-size:clamp(46px, 13vw, 64px)}
@media (prefers-reduced-motion: reduce){
  .reading.rd-forming .rd-stage{animation:none; transform:none}
  .cin-cap, .cin-title p, .cin-clock{transition:none}
}

/* your world — the preview on home, and full screen */
.world-preview{position:relative; cursor:pointer; margin:10px 0 16px}
.world-preview #world{margin:0}
.world-hint{position:absolute; left:0; right:0; bottom:10px; text-align:center; font-size:12px; color:var(--faint);
  pointer-events:none; letter-spacing:.03em}

body[data-view="world"] .phone{max-width:none; padding:0; height:100vh; height:100dvh; overflow:hidden}
.view-world{height:100%}
.space{position:relative; width:100%; height:100%; overflow:hidden;
  background:radial-gradient(120% 90% at 50% 40%, var(--s1) 0%, var(--s9) 55%, var(--s13) 100%)}
.space canvas{position:absolute; inset:0; width:100%; height:100%; display:block}
.space-bar{position:absolute; top:0; left:0; right:0; display:flex; align-items:center; justify-content:space-between;
  padding:calc(14px + env(safe-area-inset-top)) 16px 10px; pointer-events:none}
.space-bar > *{pointer-events:auto}
.space-title{display:flex; flex-direction:column; align-items:center; font-family:var(--serif); font-size:19px}
.space-sub{font-family:var(--sans); font-size:12px; color:var(--faint); margin-top:2px}
.space-zoom{position:absolute; right:14px; bottom:calc(24px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; gap:8px}
.space-zoom .icon-btn{background:rgba(var(--glass1),.75); color:var(--text); font-size:18px}
.space-tip{position:absolute; transform:translate(-50%, calc(-100% - 18px)); pointer-events:none; white-space:nowrap;
  background:rgba(var(--glass1),.92); border:.5px solid var(--line2); border-radius:12px; padding:6px 10px; font-size:13px}
.space-tip small{display:block; color:var(--faint); font-size:11px}
.space-card{position:absolute; left:50%; bottom:calc(16px + env(safe-area-inset-bottom)); transform:translateX(-50%);
  width:min(440px, calc(100% - 24px)); background:linear-gradient(180deg, rgba(var(--glass1),.97), rgba(var(--glass2),.97));
  border:.5px solid var(--line2); border-radius:22px; padding:18px; box-shadow:0 20px 60px rgba(0,0,0,.5);
  animation:cardUp .55s cubic-bezier(.2,.8,.2,1) both}
@keyframes cardUp{from{opacity:0; transform:translate(-50%, 24px)} to{opacity:1; transform:translate(-50%, 0)}}
.space-card .who{display:flex; gap:14px; align-items:center}
.space-card .sc-orb{width:46px; height:46px; border-radius:50%; flex:none; animation:breathe 4s ease-in-out infinite}
.space-card .name{font-family:var(--serif); font-size:21px; margin:0}
.space-card .sub2{font-size:12px; color:var(--faint); margin:2px 0 0}
.space-card .why{font-size:14px; color:var(--muted); line-height:1.55; margin:12px 0 0}
.space-card .tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px}
.space-card .tag{font-size:12px; color:var(--accent); background:rgba(191,230,255,.1); border-radius:20px; padding:4px 11px}
.space-card .mutual{font-size:12px; color:var(--warm); margin:10px 0 0}
.space-card .acts{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px}
.space-card .acts button{flex:1 1 auto; border-radius:20px; padding:10px 14px; font-size:14px; border:.5px solid var(--line2); color:var(--text)}
.space-card .acts .light{background:var(--accent); color:var(--accent-ink); border:none}
.space-card .close{position:absolute; top:10px; right:14px; color:var(--faint); font-size:18px}
.space-card .sent{font-size:13px; color:var(--warm); margin:10px 0 0}

/* groups */
.groups-entry{display:flex; align-items:center; gap:10px; width:100%; margin:0 0 12px; padding:13px 16px; border-radius:16px;
  background:var(--card); border:.5px solid var(--line); font-size:15px; color:var(--text); text-align:left}
.groups-entry .go{margin-left:auto; color:var(--faint); font-size:20px}
.groups-entry-orbs{width:34px; height:20px; flex:none; background:
  radial-gradient(circle at 30% 50%, hsla(32,80%,70%,.9) 0 5px, transparent 9px),
  radial-gradient(circle at 70% 50%, hsla(205,80%,70%,.9) 0 5px, transparent 9px)}
.groups-list{display:flex; flex-direction:column; gap:10px; margin-bottom:16px}
.group{--hue:200; display:flex; gap:14px; align-items:center; background:var(--card); border:.5px solid var(--line);
  border-radius:16px; padding:14px 16px; cursor:pointer}
.group:hover{border-color:var(--line2)}
.group-cloud{width:46px; height:46px; flex:none; border-radius:50%;
  background:radial-gradient(circle at 50% 50%, hsl(var(--hue) 80% 72% / .55), hsl(var(--hue) 80% 60% / 0) 70%);
  box-shadow:0 0 24px hsl(var(--hue) 80% 60% / .25)}
.group-body{flex:1; min-width:0}
.group-name-line{margin:0; font-family:var(--serif); font-size:18px}
.group-meta{margin:2px 0 0; font-size:12px; color:var(--faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.group .go{color:var(--faint); font-size:20px}
.group.suggested{flex-wrap:wrap; cursor:default}
.group.suggested input{flex:1 1 160px; padding:9px 12px; font-size:16px}
.group.suggested .make{border-radius:18px; padding:9px 14px; background:var(--accent); color:var(--accent-ink); font-size:14px}
.group.suggested .names{flex-basis:100%; margin:0; font-size:13px; color:var(--muted)}
.groups-sug-label{margin-top:20px}
.group-name{width:100%; margin:4px 0 10px; font-size:20px; font-family:var(--serif); padding:12px 14px}
.conn.pick{cursor:pointer}
.conn.pick .tick{margin-left:auto; width:22px; height:22px; border-radius:50%; border:.5px solid var(--line2); flex:none;
  display:grid; place-items:center; font-size:13px; color:var(--accent-ink)}
.conn.pick.on{border-color:var(--accent)}
.conn.pick.on .tick{background:var(--accent); border-color:var(--accent)}
.group-actions{position:sticky; bottom:0; display:flex; flex-direction:column; gap:8px; padding:12px 0 calc(16px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg, rgba(var(--glass2),0), var(--bg) 30%)}
.danger-text{color:var(--danger)}
.space-card .group-picker{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}
.space-card .gchip, .knows-list .gchip{--hue:200; border-radius:18px; padding:7px 12px; font-size:13px; border:.5px solid hsl(var(--hue) 70% 65% / .5); color:var(--text)}
.space-card .gchip.on, .knows-list .gchip.on{background:hsl(var(--hue) 70% 60% / .28); border-color:hsl(var(--hue) 75% 70%)}
.space-card .gchip.add{border-style:dashed; color:var(--muted)}

/* your photo, inside your aura */
.photo-stage{display:flex; justify-content:center; margin:26px 0 22px}
.photo-aura{--hue:200; width:190px; height:190px; border-radius:50%; display:grid; place-items:center;
  background:radial-gradient(circle, hsl(var(--hue) 85% 78% / .55) 0%, hsl(var(--hue) 80% 60% / .18) 55%, hsl(var(--hue) 80% 60% / 0) 72%);
  animation:breathe 4.5s ease-in-out infinite}
.photo-face{width:118px; height:118px; border-radius:50%; background:radial-gradient(circle at 42% 38%, #fff, hsl(var(--hue) 80% 80%) 45%, hsl(var(--hue) 70% 60% / .4) 75%);
  background-size:cover; background-position:center; box-shadow:0 0 0 3px hsl(var(--hue) 85% 75% / .9), 0 0 40px hsl(var(--hue) 85% 70% / .6)}
.photo-face.has{background-color:var(--bg)}
.photo-say{font-family:var(--serif); font-size:18px; line-height:1.5; margin:0 12px 10px}
.photo-actions{display:flex; flex-direction:column; gap:10px; margin-top:20px}
.avatar-dot{background-size:cover !important; background-position:center !important}

/* privacy */
.privacy-list{display:flex; flex-direction:column; gap:10px}
.pv{display:flex; gap:14px; align-items:flex-start; background:var(--card); border:.5px solid var(--line); border-radius:16px; padding:16px}
.pv-text{flex:1}
.pv-label{margin:0; font-size:15px}
.pv-detail{margin:4px 0 0; font-size:13px; color:var(--muted); line-height:1.5}
.switch{flex:none; width:46px; height:28px; border-radius:16px; background:#24404c; position:relative; transition:background .25s ease; margin-top:2px}
.switch::after{content:''; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:#cfe0e6;
  transition:transform .25s ease}
.switch[aria-checked="true"]{background:var(--accent)}
.switch[aria-checked="true"]::after{transform:translateX(18px); background:#fff}
.privacy-foot{margin-top:16px}

/* your people: tappable rows, and the full searchable list */
.conn.tappable{cursor:pointer; transition:border-color .2s ease, background .2s ease}
.conn.tappable:hover,.conn.tappable:focus-visible{border-color:var(--line2); background:var(--s5); outline:none}
.conn .go{margin-left:auto; color:var(--faint); font-size:20px; line-height:1}
.conn .dot.away{opacity:.35; filter:saturate(.5)}
.conn .dot.online{box-shadow:0 0 0 3px rgba(191,230,255,.12), 0 0 14px rgba(191,230,255,.35)}
.here{font-size:11px; color:#9fe1cb; border:.5px solid rgba(159,225,203,.4); border-radius:20px; padding:1px 8px;
  margin-left:6px; font-family:var(--sans); vertical-align:middle}
.conn.compact{padding:11px 14px}
.conn.compact .who{margin-bottom:0}
.see-all{align-self:center; margin-top:4px; padding:9px 18px; border-radius:20px; border:.5px solid var(--line2);
  color:var(--accent); font-size:14px}
.people-search{width:100%; margin:0 0 14px; border-radius:22px; padding:12px 16px}
.people-ways{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 14px}
.people-ways .ghost{font-size:13.5px; padding:8px 14px; border-radius:18px}
.pick-list{max-height:52vh; overflow:auto; margin-bottom:0}
.invite-knows{margin:4px 0 8px}
.invite-knows .faint{font-size:12px}
.knows-list{display:flex; flex-wrap:wrap; gap:6px; margin-top:6px}
.notice.news, .notice[data-kind="news"]{--hue:48}
.people-list{gap:8px; margin-bottom:40px}
.people-list .letter{margin:10px 2px 2px; font-size:12px; color:var(--faint); letter-spacing:.08em}

/* notices — calm news, no buzz, no sound */
.notices{display:flex; flex-direction:column; gap:10px}
.notices:not(:empty){margin:4px 0 16px}
.notice{--hue:200; display:flex; gap:14px; align-items:flex-start; background:linear-gradient(180deg,var(--s1),var(--s8));
  border:.5px solid var(--line2); border-radius:18px; padding:16px; animation:noticeIn 1.6s ease both;
  transition:opacity .9s ease, transform .9s ease}
.notice.leaving{opacity:0; transform:translateY(-6px)}
.notice-orb{width:42px; height:42px; border-radius:50%; flex:none; margin-top:2px;
  background:radial-gradient(circle at 42% 38%, #fff 0%, hsl(var(--hue) 85% 80%) 30%, hsl(var(--hue) 80% 60% / 0) 72%);
  box-shadow:0 0 30px 4px hsl(var(--hue) 80% 65% / .25); animation:breathe 4.5s ease-in-out infinite}
.notice-body{flex:1; min-width:0}
.notice-title{font-family:var(--serif); font-size:19px; margin:0 0 4px}
.notice-text{font-size:14px; color:var(--muted); line-height:1.55; margin:0}
.notice-meta{font-size:12px; color:var(--faint); margin:8px 0 0}
.notice-done{margin-top:10px; font-size:14px; color:var(--accent); border:.5px solid var(--line2); border-radius:18px; padding:6px 16px}
@keyframes noticeIn{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion: reduce){ .notice,.notice-orb{animation:none} .notice{transition:none} }

/* reminders */
.coming-up{display:flex; flex-direction:column; gap:8px; margin-bottom:20px}
.reminder{display:flex; align-items:center; gap:12px; background:var(--card); border:.5px solid var(--line);
  border-radius:14px; padding:12px 14px}
.reminder .when{font-size:12px; color:var(--warm); white-space:nowrap}
.reminder .what{flex:1; font-size:14px}
.reminder button{color:var(--faint); font-size:18px; line-height:1; padding:2px 4px}
.toasts{position:fixed; top:calc(12px + env(safe-area-inset-top, 0px)); left:50%; transform:translateX(-50%); z-index:92; width:min(420px, calc(100% - 24px));
  display:flex; flex-direction:column; gap:8px; pointer-events:none}
.toast{display:flex; align-items:center; gap:12px; background:var(--s1); border:.5px solid var(--line2); pointer-events:auto;
  border-radius:18px; padding:12px 14px; box-shadow:0 12px 40px rgba(0,0,0,.45); animation:awFade .5s ease; transition:opacity .4s, transform .4s}
.toast.going{opacity:0; transform:translateY(-8px)}
.dialog{position:fixed; inset:0; z-index:95; background:rgba(4,10,16,.6); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; padding:20px}
.dialog.hidden{display:none}
.dialog-card{width:min(400px,100%); background:linear-gradient(180deg,var(--s1),var(--s7)); border:.5px solid var(--line2); border-radius:22px;
  padding:20px 20px 16px; box-shadow:0 24px 80px rgba(0,0,0,.5); animation:awFade .25s ease}
.dialog-text{margin:0 0 14px; font-size:16px; line-height:1.5}
.dialog-card input{width:100%; box-sizing:border-box; margin-bottom:14px; font-size:16px}
.dialog-acts{display:flex; justify-content:flex-end; gap:8px}
.dialog-acts button{margin:0; padding:10px 18px}
.dialog-acts .danger{background:#c0392b; color:#fff}
.toast-orb{width:30px; height:30px; border-radius:50%; flex:none; animation:breathe 3s ease-in-out infinite}
.toast-body{flex:1; min-width:0}
.toast-who{margin:0; font-size:12px; color:var(--faint)}
.toast-text{margin:2px 0 0; font-size:15px}
.msg .status{display:block; font-size:13px; font-style:italic; color:var(--faint)}
.msg .status:empty{display:none}

.people .met{font-size:11px; color:var(--warm); border:.5px solid rgba(255,217,160,.35); border-radius:20px; padding:2px 8px; margin-left:6px}

#world{width:100%; display:block; margin:10px 0 16px; border-radius:16px;
  background:linear-gradient(180deg,var(--s3),var(--s9)); border:.5px solid var(--line)}

.card-head{display:flex; justify-content:space-between; align-items:center; font-size:12px;
  letter-spacing:.04em; text-transform:lowercase; color:var(--faint); margin-bottom:8px}
.brief-text{color:var(--text); font-size:15px; margin:0; line-height:1.6}
.brief-card{margin-bottom:20px}

.section-label{color:var(--faint); font-weight:400; font-size:12px; letter-spacing:.04em;
  text-transform:lowercase; margin:0 0 10px}
.connections{display:flex; flex-direction:column; gap:10px; margin-bottom:90px}
.conn{background:var(--card); border:.5px solid var(--line); border-radius:14px; padding:14px}
.conn .who{display:flex; align-items:center; gap:10px; margin-bottom:6px}
.conn .dot{width:30px; height:30px; border-radius:50%; flex:none}
.conn .who b{font-weight:500}
.conn .reason{font-size:14px; color:var(--muted); margin:0 0 10px; line-height:1.5}
.conn .tags{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px}
.conn .tag{font-size:12px; color:var(--accent); background:rgba(191,230,255,.1); border-radius:20px; padding:4px 11px}
.conn .acts{display:flex; gap:8px}
.conn .acts button{font-size:14px; border-radius:20px; padding:8px 16px}
.conn .yes{background:var(--accent); color:var(--accent-ink)}
.conn .no{border:.5px solid var(--line2); color:var(--muted)}
.conn.resolved{opacity:.55}
.empty{color:var(--faint); font-size:14px; padding:4px 2px 0}

.talk-btn{position:fixed; left:50%; transform:translateX(-50%); bottom:22px; width:min(420px,calc(100% - 40px));
  display:flex; align-items:center; justify-content:center; gap:8px;
  background:var(--s1); border:.5px solid var(--line2); color:var(--text);
  border-radius:24px; padding:14px; font-size:15px; backdrop-filter:blur(6px)}

/* chat — an app-style column: the message list scrolls inside itself and the
   input sits in normal flow at the bottom. No position:fixed here: iPhone Safari
   repositions fixed bars around the keyboard and while the page scrolls, which
   made the bottom of the screen flicker as replies streamed in. */
body[data-view="chat"] .phone{height:100vh; height:100dvh; min-height:0; padding-bottom:0;
  display:flex; flex-direction:column; overflow:hidden}
.view-chat{flex:1; min-height:0}
.messages{flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  display:flex; flex-direction:column; gap:10px; padding:8px 2px 12px}
.msg{max-width:82%; padding:11px 14px; border-radius:16px; font-size:15px; line-height:1.5; white-space:pre-wrap}
.msg.user{align-self:flex-end; background:var(--s2); border-bottom-right-radius:5px}
.msg.aura{align-self:flex-start; background:var(--card); border:.5px solid var(--line); border-bottom-left-radius:5px}
.msg.aura.typing{color:var(--muted)}
.jump-latest{flex:none; align-self:center; width:36px; height:36px; margin:-46px 0 10px; z-index:2;
  border-radius:50%; background:var(--s10); border:.5px solid var(--line2); color:var(--accent); font-size:18px;
  box-shadow:0 6px 18px rgba(0,0,0,.4)}
.chat-input{flex:none; margin:6px 0 calc(14px + env(safe-area-inset-bottom));
  display:flex; gap:8px; align-items:center; background:var(--s6); border:.5px solid var(--line2);
  border-radius:24px; padding:6px 6px 6px 16px}
.chat-input input{flex:1; min-width:0; border:none; background:none; padding:8px 0}
/* the emoji button and its little picker, on every message box */
.emoji-btn{flex:none; font-size:17px; border-color:transparent; background:none}
.emoji-btn[aria-expanded="true"]{background:var(--s2)}
.emoji-pop{position:fixed; z-index:60; max-height:min(320px, 50vh); overflow-y:auto; padding:10px 10px 8px; border-radius:16px;
  background:var(--s6); border:.5px solid var(--line2); box-shadow:0 18px 50px rgba(0,0,0,.5); animation:awFade .15s ease}
.emoji-pop.hidden{display:none}
.emoji-head{margin:6px 4px 4px; font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--faint)}
.emoji-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(36px, 1fr)); gap:2px}
.emoji-grid button{font-size:22px; line-height:1; height:38px; border-radius:9px; padding:0}
.emoji-grid button:hover{background:var(--s2)}
.chat-input input:focus{border:none}
.send{background:var(--accent); color:var(--accent-ink); border:none}

/* ---- messages with your people ---- */
.home-acts{display:flex; gap:8px; flex-wrap:wrap; margin:0 0 6px}
.home-acts .connect-btn{margin:0}
.messages-btn{display:inline-flex; align-items:center; gap:7px}
.badge{min-width:19px; height:19px; padding:0 6px; border-radius:10px; background:var(--warm); color:var(--accent-ink);
  font-size:11px; font-weight:600; display:inline-grid; place-items:center; animation:breathe 3s ease-in-out infinite}
.inbox-list{margin-bottom:22px}
.convo{display:flex; align-items:center; gap:12px; background:var(--card); border:.5px solid var(--line);
  border-radius:14px; padding:12px 14px; cursor:pointer; text-align:left; width:100%}
.convo .dot{width:38px; height:38px; border-radius:50%; flex:none}
.convo .dot.away{opacity:.5}
.convo-body{flex:1; min-width:0}
.convo-top{display:flex; justify-content:space-between; gap:8px; align-items:baseline}
.convo-top b{font-weight:500}
.convo-top time{font-size:11px; color:var(--faint); white-space:nowrap}
.convo-last{margin:2px 0 0; font-size:14px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.convo.unread .convo-last{color:var(--text)}
.convo .badge{flex:none}

/* open chats: the strip of everything you're in the middle of. Your sidekick is always first. */
.open-chats{display:flex; gap:6px; overflow-x:auto; flex:none; padding:2px 2px 8px; margin:0 -2px; scrollbar-width:none; -webkit-overflow-scrolling:touch}
.open-chats::-webkit-scrollbar{display:none}
.open-chats.hidden{display:none}
.oc-chip{display:inline-flex; align-items:center; gap:6px; flex:none; padding:5px 10px 5px 6px; border-radius:16px; font-size:13px; color:var(--muted);
  border:.5px solid var(--line2); background:var(--s2); max-width:150px; white-space:nowrap}
.oc-chip .dot{width:20px; height:20px; border-radius:50%; flex:none}
.oc-chip .oc-crew{font-size:14px; line-height:20px}
.oc-chip .oc-name{overflow:hidden; text-overflow:ellipsis; min-width:0}
.oc-chip.on{color:var(--text); border-color:var(--accent); background:var(--s3)}
.oc-chip.unread{color:var(--text)}
.oc-chip .badge{animation:none; min-width:17px; height:17px; font-size:10px}
.oc-chip .oc-x{color:var(--faint); font-size:15px; line-height:1; padding:0 0 0 2px}
.oc-chip .oc-x:hover{color:var(--text)}
.oc-sk{padding-left:10px}
.oc-sk .aura-mark{width:12px; height:12px}

body[data-view="thread"] .phone{height:100vh; height:100dvh; min-height:0; padding-bottom:0;
  display:flex; flex-direction:column; overflow:hidden}
.view-thread{flex:1; min-height:0}
.thread-bar{margin-bottom:4px}
.thread-who{display:flex; align-items:center; gap:10px; min-width:0}
.thread-who .dot{width:32px; height:32px; border-radius:50%; flex:none}
.thread-names{display:flex; flex-direction:column; text-align:left; line-height:1.25; min-width:0}
.thread-names b{font-family:var(--serif); font-weight:500; font-size:18px}
.thread-names small{font-size:12px; color:var(--faint)}
.thread-names small.here{color:#9fe6b8}
.thread-names small.typing, .crew-hint.typing{color:var(--accent); animation:typingPulse 1.2s ease-in-out infinite}
@keyframes typingPulse{0%,100%{opacity:1} 50%{opacity:.55}}
.thread{gap:4px}
.thread .note{align-self:center; max-width:330px; text-align:center; font-size:12px; color:var(--faint);
  margin:6px 0 14px; line-height:1.5}
.thread .day{align-self:center; font-size:11px; color:var(--faint); margin:12px 0 6px; letter-spacing:.04em}
.dm{max-width:80%; padding:9px 13px; border-radius:18px; font-size:15px; line-height:1.45; white-space:pre-wrap;
  overflow-wrap:anywhere; animation:awFade .35s ease}
.dm.theirs{align-self:flex-start; background:var(--card); border:.5px solid var(--line);
  box-shadow:inset 3px 0 0 hsla(var(--hue),75%,68%,.55)}
.dm.mine{align-self:flex-end; background:var(--s2); cursor:pointer}
.dm.gap{margin-top:8px}
/* a reply to a moment: the photo it's about sits just above the words */
.dm-about{display:flex; flex-direction:column; gap:4px; max-width:60%; margin-bottom:-2px}
.dm-about.mine{align-self:flex-end; align-items:flex-end} .dm-about.theirs{align-self:flex-start; align-items:flex-start}
.dm-about.gap{margin-top:10px}
.dm-about-label{font-size:12px; color:var(--faint)}
.dm-about img{width:120px; height:150px; object-fit:cover; border-radius:14px; cursor:pointer; border:.5px solid var(--line2); opacity:.92}
.dm-about img:hover{opacity:1}
.dm-meta{font-size:11px; color:var(--faint); margin:1px 6px 2px}
.dm-meta.mine{align-self:flex-end}
.dm-meta.theirs{align-self:flex-start}
.dm-acts{align-self:flex-end; display:flex; flex-direction:column; align-items:flex-end; gap:6px; margin:2px 0 4px}
.dm-acts.theirs{align-self:flex-start; align-items:flex-start}
.dm-acts-row{display:flex; gap:6px; flex-wrap:wrap}
.dm-acts button{font-size:13px; color:var(--text); border:.5px solid var(--line2); border-radius:14px; padding:7px 12px; min-height:34px}
.dm-acts button.dim{color:var(--faint)}
/* reactions: the picker in a message's menu, and the little row of what's on a message */
.rx-pick{display:flex; gap:2px; background:var(--card); border:.5px solid var(--line2); border-radius:20px; padding:3px 4px}
.dm-acts .rx-pick button{font-size:20px; line-height:1; padding:5px 7px; min-height:0; border:0; border-radius:16px; background:none}
.dm-acts .rx-pick button:hover{background:var(--s2)}
.rx{flex:none; display:flex; gap:4px; flex-wrap:wrap; margin:-6px 4px 4px}
.rx.mine{align-self:flex-end} .rx.theirs{align-self:flex-start}
.rx button{font-size:13px; line-height:1; padding:4px 8px; min-height:0; border-radius:12px; border:.5px solid var(--line2); background:var(--card); color:var(--text)}
.rx button.on{border-color:hsla(var(--hue,200),75%,68%,.8); background:hsla(var(--hue,200),60%,50%,.18)}
/* replies: the few words of the message this one answers, above the bubble; and the bar above the box while you write one */
.dm-quote{flex:none; max-width:70%; font-size:12.5px; color:var(--muted); border-left:2px solid var(--line2); padding:2px 8px; margin-bottom:-4px; cursor:pointer;
  display:flex; flex-direction:column; gap:1px; overflow:hidden}
.dm-quote span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.dm-quote b{font-weight:600; color:var(--faint); font-size:11px}
.dm-quote.mine{align-self:flex-end; text-align:right; border-left:0; border-right:2px solid var(--line2)}
.dm-quote.theirs{align-self:flex-start}
.dm-quote.gone{font-style:italic}
.dm-quote.gap{margin-top:8px}
.sk-msg .dm-quote{max-width:100%; margin:0 0 6px}
.dm.flash{outline:2px solid hsla(var(--hue,200),75%,68%,.8); outline-offset:2px}
.reply-bar{flex:none; display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--muted); padding:6px 12px 0 16px}
.reply-bar span{flex:1; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
.reply-bar b{font-weight:600; color:var(--faint)} .reply-bar i{font-style:normal}
.reply-bar button{font-size:18px; line-height:1; color:var(--faint); padding:2px 8px; min-height:0; border:0; background:none}
.rsvp button.on::before, .pe-who button.on::before{content:"✓ "; font-weight:600}
.aw-back{margin-top:14px; font-size:14px; color:var(--faint)}
.rd-close{position:absolute; top:calc(14px + env(safe-area-inset-top, 0px)); right:16px; z-index:3; font-size:14px; color:var(--faint); padding:8px 10px}
.rd-close.hidden{display:none}
#privacy-list .section-label{margin:14px 0 6px}
.you-row.admin b{color:var(--warm)}
.adm-row{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 0; border-bottom:.5px solid var(--line)}
.adm-row small{color:var(--faint); display:block; font-size:12px}
.adm-temp{font-family:var(--mono, monospace); background:var(--s3); padding:6px 10px; border-radius:8px; user-select:all}
.thread-quiet{flex:none; text-align:center; font-size:13px; color:var(--muted); margin:4px 0}
.helper-row{flex:none; display:flex; align-items:center; gap:10px; margin:6px 0 0}
.helper{display:inline-flex; align-items:center; gap:7px; font-size:13px; color:var(--accent); padding:6px 12px;
  border-radius:16px; background:rgba(191,230,255,.07); border:.5px solid var(--line)}
.helper:disabled{opacity:.6}
.helper-note{font-size:12px; color:var(--faint)}
.thread-input{align-items:flex-end}
.thread-input textarea{flex:1; min-width:0; border:none; background:none; padding:8px 0; resize:none;
  max-height:120px; line-height:1.4}
.thread-input textarea:focus{border:none}
.toast.tappable .toast-body{cursor:pointer}

/* ---- nudges: your aura gently following up ---- */
.nudges{display:flex; flex-direction:column; gap:10px; margin:0 0 14px}
.nudges:empty{display:none}
.nudge{display:flex; gap:12px; align-items:flex-start; padding:14px; border-radius:16px;
  background:linear-gradient(135deg, hsla(var(--hue),60%,30%,.22), rgba(var(--glass3),.9) 60%);
  border:.5px solid hsla(var(--hue),70%,70%,.25); animation:awFade .6s ease; transition:opacity .7s, transform .7s}
.nudge.leaving{opacity:0; transform:translateY(-6px)}
.nudge-orb{width:28px; height:28px; border-radius:50%; flex:none; margin-top:2px; animation:breathe 4s ease-in-out infinite;
  background:radial-gradient(circle at 42% 38%, #fff 0%, hsl(var(--hue),85%,78%) 30%, hsla(var(--hue),80%,60%,0) 72%)}
.nudge-body{flex:1; min-width:0}
.nudge-who{margin:0; font-size:12px; color:var(--faint)}
.nudge-line{margin:2px 0 10px; font-size:15px; line-height:1.5}
.nudge-acts{display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.nudge-acts button{font-size:13px; border-radius:18px; padding:7px 13px; border:.5px solid var(--line2); color:var(--muted)}
.nudge-acts .yes{background:var(--accent); color:var(--accent-ink); border-color:transparent}
.nudge-acts .faint{font-size:13px}

/* Quiet scrollbars that belong to the world, not the browser's default grey bar. */
*{scrollbar-width:thin; scrollbar-color:rgba(190,230,240,.16) transparent}
::-webkit-scrollbar{width:8px; height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(190,230,240,.14); border-radius:8px; border:2px solid transparent; background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background-color:rgba(190,230,240,.3)}
::-webkit-scrollbar-corner{background:transparent}

/* ---- hover, wherever there's a mouse ---- */
@media (hover:hover){
  .conn.tappable, .convo, .group, .groups-entry, .see-all{transition:background .2s, border-color .2s, transform .2s}
  .conn.tappable:hover, .convo:hover, .group:hover, .groups-entry:hover{background:var(--s5); border-color:var(--line2)}
  .connect-btn, .helper, .nudge-acts button, .ghost, .icon-btn, .talk-btn{transition:background .2s, border-color .2s, color .2s}
  .connect-btn:hover, .helper:hover{background:rgba(191,230,255,.12); border-color:rgba(191,230,255,.35)}
  .icon-btn:hover{color:var(--text); border-color:rgba(191,230,255,.4)}
  .ghost:hover, .nudge-acts button:not(.yes):hover{color:var(--text); border-color:rgba(191,230,255,.4)}
  .primary:hover, .nudge-acts .yes:hover, .send:hover{filter:brightness(1.08)}
  .space-card .acts button:not(.light):hover{background:rgba(191,230,255,.08)}
  .dm.mine:hover{background:var(--s11)}
}

/* ---- tablets and small laptops: the same single column, with more room ---- */
@media (min-width:700px){
  .phone{max-width:560px}
}

/* ---- a computer: your world fills the window, and Aura floats over it ----
   The left panel is home (you, your aura's cards, your brief, your people).
   The right panel is whatever you're doing (talking to your aura by default).
   The world between them is alive the whole time. */
@media (min-width:1180px){
  /* three columns over the world: a sidebar (you, your people, actions), the middle (the world, with the brief across
     the top and what's live docked along the bottom), and your sidekick on the right, always. Anything else you open
     (a conversation, a plan, a group chat, settings) is a task: its own column beside the sidekick. */
  body.app{--pad:16px; --left-w:300px; --right-w:400px; --task-w:420px; display:block; overflow:hidden;
    --left-total:calc(var(--left-w) + 2 * var(--pad)); --right-total:calc(var(--right-w) + 2 * var(--pad))}
  body.app.task-open{--right-total:calc(var(--right-w) + var(--task-w) + 3 * var(--pad))}
  body.app .phone{max-width:none; width:100%; height:100vh; min-height:0; padding:0; overflow:hidden}

  body.app .view-world{display:flex; position:fixed; inset:0; z-index:0; height:auto}
  body.app #space-back{visibility:hidden}
  body.app .space-bar{left:var(--left-total); right:var(--right-total); padding-top:14px; opacity:.85}
  body.app .space-title{display:none}   /* the world panel covers it; its top edge used to peek out as two marks */
  body.app .space-zoom{right:calc(var(--right-total) + 6px); bottom:calc(var(--dock-h, 0px) + 22px); flex-direction:row}
  body.app .space-card{left:calc(var(--left-total) + (100% - var(--left-total) - var(--right-total)) / 2);
    width:min(420px, calc(100% - var(--left-total) - var(--right-total) - 2 * var(--pad))); bottom:calc(var(--dock-h, 0px) + 22px)}

  /* glass */
  body.app .view-home, body.app .mid-top, body.app .mid-dock > *,
  body.app .view-chat, body.app .view-inbox, body.app .view-thread, body.app .view-people,
  body.app .view-groups, body.app .view-group, body.app .view-photo, body.app .view-privacy,
  body.app .view-connect, body.app .view-claim, body.app .view-plan, body.app .view-planedit,
  body.app .view-crew, body.app .view-s, body.app .view-plans, body.app .view-you{
    position:fixed; z-index:3; top:var(--pad); bottom:var(--pad); overflow-y:auto; overscroll-behavior:contain;
    background:linear-gradient(180deg, rgba(var(--glass1),.72), rgba(var(--glass2),.78));
    -webkit-backdrop-filter:blur(18px) saturate(140%); backdrop-filter:blur(18px) saturate(140%);
    border:.5px solid rgba(190,230,240,.16); border-radius:22px; box-shadow:0 24px 80px rgba(0,0,0,.45)}

  /* the sidebar */
  body.app .view-home{display:flex; left:var(--pad); width:var(--left-w); padding:16px 16px 18px; gap:0}
  body.app .view-home .world-preview, body.app #open-chat, body.app .view-home .people-strip, body.app .view-home #tiles-more,
  body.app .view-home #people, body.app .view-home .section-label.rc, body.app .view-home .section-label.yp, body.app .view-home .home-id{display:none}
  body.app .view-home .section-label{margin:14px 0 6px}
  body.app .view-home .home-head{margin:4px 0 0}
  body.app .view-home .home-head .hero-stage{width:64px; height:64px}
  body.app .view-home .home-head-words h2{font-size:17px}
  body.app .view-home .home-head-words .hero-kind{font-size:12.5px} body.app .view-home .hero-kind small{display:none}
  body.app .view-home .hero-hint{display:none}
  body.app .view-home .hero-say{bottom:-10px; font-size:14px; padding:9px 12px}
  body.app .view-home .battery-row{margin:10px 0 0}
  body.app .side-people{display:flex; flex-direction:column; gap:2px}
  body.app .side-person{display:flex; align-items:center; gap:10px; padding:7px 8px; border-radius:12px; width:100%; text-align:left; color:var(--text); font-size:14px}
  body.app .side-person:hover{background:rgba(255,255,255,.05)}
  body.app .side-person .dot{width:28px; height:28px; border-radius:50%; flex:none}
  body.app .side-person .dot.away{opacity:.55}
  body.app .side-person b{font-weight:500; display:block; line-height:1.2}
  body.app .side-person small{display:block; color:var(--muted); font-size:12px; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  body.app .side-person small.up{color:var(--warm)}
  body.app .side-person .here{width:7px; height:7px; padding:0; border:0; border-radius:50%; background:#8fe3c6; flex:none; margin-left:auto}   /* a dot, not the "here now" pill */
  body.app .side-more{align-self:flex-start; font-size:12.5px; padding:4px 8px}
  /* the tiles become a plain list of links, all of them, with words */
  body.app .with-people{display:flex; flex-direction:column; gap:1px; margin:0}
  body.app .with-people.collapsed .wp-tile{display:flex}
  body.app .wp-tile{flex-direction:row; justify-content:flex-start; gap:10px; padding:7px 8px; font-size:14px; color:var(--text); border:0; background:none; border-radius:12px; line-height:1.3}
  body.app .wp-tile:hover{background:rgba(255,255,255,.05)}
  body.app .wp-tile .ic{width:19px; height:19px; opacity:.75}
  body.app .upfor-row{flex-direction:column; align-items:stretch; gap:1px; margin:0}
  body.app .upfor-row .share-btn, body.app .upfor-row .upfor-btn, body.app .upfor-row .status-btn{text-align:left; padding:7px 8px; border-radius:12px; font-size:14px; background:none; border:0; color:var(--text)}
  body.app .upfor-row .share-btn:hover, body.app .upfor-row .upfor-btn:hover, body.app .upfor-row .status-btn:hover{background:rgba(255,255,255,.05)}
  body.app .my-upfor{padding:2px 8px 6px}
  body.app .home-acts{flex-direction:column; align-items:stretch; gap:1px; justify-content:flex-start}
  body.app .home-acts .connect-btn{text-align:left; padding:7px 8px; border-radius:12px; font-size:14px; background:none; border:0; color:var(--text); justify-content:flex-start}
  body.app .home-acts .connect-btn:hover{background:rgba(255,255,255,.05)}
  body.app #slot-plans .prow{padding:8px 10px; font-size:14px} body.app #slot-plans .pr-when{font-size:11px}
  body.app .find-plans{font-size:13px; padding:4px 8px}

  /* the middle: the brief across the top, and what's live docked along the bottom */
  body.app .mid-top{left:var(--left-total); right:var(--right-total); top:var(--pad); bottom:auto; max-height:34vh; padding:12px 18px 14px; z-index:2}
  body.app .mid-top .brief-card{background:none; border:0; padding:0}
  body.app .mid-top .brief-text{font-size:15px; line-height:1.5}
  /* the dock wraps into rows that fit the width; nothing scrolls sideways, and a card with nothing in it isn't drawn */
  body.app .mid-dock{position:fixed; z-index:2; left:var(--left-total); right:var(--right-total); bottom:var(--pad); display:grid;
    grid-template-columns:repeat(auto-fit, minmax(270px, 1fr)); gap:10px; align-items:end; max-height:40vh; overflow-y:auto; overflow-x:hidden; padding:4px 2px 2px; scrollbar-width:thin}
  body.app .mid-dock:empty{display:none}
  body.app .mid-dock > *{position:static; width:auto; max-height:40vh; padding:12px 14px; border-radius:18px; margin:0}
  body.app .mid-dock > *:empty, body.app .mid-dock > .dock-empty, body.app .mid-dock .qc-quiet{display:none !important}
  body.app .mid-dock > .question-card{grid-column:span 1}
  body.app .mid-dock .plan-cards, body.app .mid-dock .scard, body.app .mid-dock .notices{display:flex; flex-direction:column; gap:8px}
  body.app .mid-dock .pcard, body.app .mid-dock .scard, body.app .mid-dock .notice{background:none; border:0; padding:0; box-shadow:none}

  /* your sidekick on the right, always */
  body.app .view-chat{display:flex; right:var(--pad); width:var(--right-w); padding:16px 18px 18px; animation:none; overflow:hidden; padding-bottom:4px}
  body.app #chat-back{visibility:hidden}
  body.app .chat-input{margin-bottom:14px}

  /* a task: its own column beside the sidekick */
  body.app .view-inbox, body.app .view-thread, body.app .view-people, body.app .view-groups, body.app .view-group, body.app .view-photo,
  body.app .view-privacy, body.app .view-connect, body.app .view-claim, body.app .view-plan, body.app .view-planedit,
  body.app .view-crew, body.app .view-s, body.app .view-plans, body.app .view-you{
    right:calc(var(--right-w) + 2 * var(--pad)); width:var(--task-w); padding:16px 18px 18px; animation:panelIn .35s cubic-bezier(.2,.8,.2,1) both}
  body.app .view-thread, body.app .view-plan, body.app .view-crew{overflow:hidden; padding-bottom:4px}
  body.app[data-view="crew"] .phone, body.app[data-view="plan"] .phone, body.app[data-view="thread"] .phone{height:100vh}

  /* desktop density: a mouse, not a thumb */
  body.app .brief-text, body.app .msg, body.app .dm, body.app .nudge-line{font-size:15px}
  body.app .msg{max-width:88%}
  body.app .icon-btn{width:30px; height:30px; font-size:16px}
  body.app .card{padding:12px 14px}
  body.app .primary{padding:10px 16px; font-size:14px}
  body.app .pcard{padding:12px}
  body.app .pc-acts button{padding:7px 12px; font-size:13px}
  body.app .convo{padding:10px 12px}
  body.app .wordmark{font-size:17px}
  body.app .wm-word{font-size:21px}
  body.app .pmark{width:22px; height:21px}
  body.app .tabbar{display:none}
}
@media (min-width:1180px) and (max-width:1499px){
  /* on a laptop, a task beside the sidekick leaves the world thin: the brief steps aside until the task closes */
  body.app.task-open .mid-top{display:none}
}
@media (min-width:1500px){
  body.app{--pad:18px; --left-w:320px; --right-w:440px; --task-w:460px}
}
@media (min-width:1800px){
  body.app{--pad:22px; --left-w:340px; --right-w:480px; --task-w:500px}
}
@keyframes panelIn{from{opacity:0; transform:translateX(18px)} to{opacity:1; transform:none}}

/* ---- today's question ---- */
.question-card{margin:0 0 16px; background:linear-gradient(160deg, rgba(255,217,160,.08), var(--card) 55%);
  border-color:rgba(255,217,160,.18)}
.question-card .card-head span:first-child{color:var(--warm)}
.q-count{text-transform:none; letter-spacing:0}
.question{font-family:var(--serif); font-size:21px; line-height:1.35; margin:0 0 12px}
.q-form{display:flex; flex-direction:column; gap:8px}
.q-form textarea{resize:none; min-height:64px; line-height:1.45}
.q-row{display:flex; justify-content:space-between; align-items:center; gap:8px}
.q-send{margin:0; padding:9px 20px; font-size:15px}
.q-mine-text{margin:0; font-size:16px; line-height:1.5; padding:10px 12px; border-radius:12px; background:var(--s2)}
.q-reaction{margin:8px 2px 0; font-size:14px; color:var(--muted); font-style:italic}
.q-reaction:empty{display:none}
.q-mine .link{margin-top:6px; padding:0}
.q-people{display:flex; flex-direction:column; gap:8px; margin-top:12px}
.q-hint{margin:2px 0 0; font-size:13px; color:var(--faint)}
.q-person{display:flex; gap:10px; align-items:flex-start; padding:10px 0 2px; border-top:.5px solid var(--line)}
.q-person .dot{width:28px; height:28px; border-radius:50%; flex:none}
.q-person-body{flex:1; min-width:0}
.q-person-name{margin:0; font-size:12px; color:var(--faint)}
.q-person-text{margin:1px 0 0; font-size:15px; line-height:1.45}
.q-light{flex:none; width:32px; height:32px; border-radius:50%; color:var(--warm); font-size:15px;
  border:.5px solid rgba(255,217,160,.3); transition:background .3s, transform .3s}
.q-light.sent{background:rgba(255,217,160,.22); transform:scale(1.12)}
@media (hover:hover){ .q-light:not(.sent):hover{background:rgba(255,217,160,.12)} }

/* ---- the morning unwrap ---- */
.unwrap{position:fixed; inset:0; z-index:40; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:calc(30px + env(safe-area-inset-top)) 22px calc(30px + env(safe-area-inset-bottom));
  background:radial-gradient(120% 90% at 50% 30%, rgba(20,52,62,.96), rgba(6,14,20,.97) 70%);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); animation:awFade .8s ease; transition:opacity .6s}
.unwrap.leaving{opacity:0}
.uw-hello{font-family:var(--serif); font-size:20px; color:var(--muted); margin:0 0 22px; text-align:center}
.uw-stage{width:min(420px, 100%); min-height:260px; display:flex; align-items:center; justify-content:center; cursor:pointer}
.uw-card{width:100%; text-align:center; padding:30px 26px 28px; border-radius:26px;
  background:linear-gradient(170deg, hsla(var(--hue),55%,32%,.35), rgba(var(--glass3),.92) 65%);
  border:.5px solid hsla(var(--hue),70%,72%,.3); box-shadow:0 0 80px hsla(var(--hue),80%,60%,.16), 0 24px 70px rgba(0,0,0,.45);
  animation:uwIn .7s cubic-bezier(.2,.8,.2,1) both}
@keyframes uwIn{from{opacity:0; transform:translateY(18px) scale(.96); filter:blur(4px)} to{opacity:1; transform:none; filter:none}}
.uw-orb{display:block; width:64px; height:64px; margin:0 auto 16px; border-radius:50%; animation:breathe 4s ease-in-out infinite;
  background:radial-gradient(circle at 42% 38%, #fff 0%, hsl(var(--hue),85%,78%) 30%, hsla(var(--hue),80%,60%,0) 72%)}
.uw-title{font-family:var(--serif); font-size:25px; line-height:1.25; margin:0 0 10px}
.uw-text{font-size:16px; line-height:1.55; color:#cfe0e6; margin:0}
.uw-question .uw-text{font-family:var(--serif); font-size:21px; color:var(--text)}
.uw-meta{font-size:13px; color:var(--warm); margin:12px 0 0}
.uw-dots{display:flex; gap:7px; margin:22px 0 18px}
.uw-dots span{width:7px; height:7px; border-radius:50%; background:rgba(190,230,240,.18); transition:background .4s, transform .4s}
.uw-dots span.on{background:var(--accent); transform:scale(1.15)}
.uw-acts{display:flex; flex-direction:column; gap:10px; width:min(320px, 100%)}
.uw-acts .primary, .uw-acts .ghost{margin:0}
.uw-skip{margin-top:16px; color:var(--faint)}
body.unwrapping{overflow:hidden}

/* ---- lock-screen notifications ---- */
.notify-card{display:flex; gap:12px; align-items:flex-start; margin:0 0 14px}
.notify-card .tiny{margin:0 0 10px}
.pv-section{margin-top:24px}
.pv-status{font-size:13px; margin:0 0 10px}
.notify-device{display:flex; gap:14px; align-items:center; margin:0 0 12px}
.notify-device .ghost{padding:9px 16px; font-size:14px}

/* ---- the aura reading ---- */
/* Centred when there's room, scrollable when there isn't: auto margins on the first and last pieces do the centring,
   and nothing is allowed to shrink (a shrunken words box let the sidekick's lines spill over the button on short phones). */
.reading, .pair{position:fixed; inset:0; z-index:45; display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  padding:calc(24px + env(safe-area-inset-top)) 22px calc(28px + env(safe-area-inset-bottom)); overflow-y:auto; -webkit-overflow-scrolling:touch;
  background:radial-gradient(110% 80% at 50% 35%, var(--s12) 0%, var(--s13) 70%); animation:awFade .9s ease; transition:opacity .7s}
.reading.rd-leaving, .pair.rd-leaving{opacity:0}
body.reading-open{overflow:hidden}
.rd-aura{width:min(78vw, 46vh, 420px); height:min(78vw, 46vh, 420px); flex:none; margin:0 0 6px; pointer-events:none}
.rd-words{width:min(440px, 100%); text-align:center; min-height:120px}
.rd-words.rd-in > *{animation:rdIn .8s cubic-bezier(.2,.8,.2,1) both}
.rd-words.rd-in > *:nth-child(2){animation-delay:.15s}
.rd-words.rd-in > *:nth-child(3){animation-delay:.35s}
@keyframes rdIn{from{opacity:0; transform:translateY(10px); filter:blur(3px)} to{opacity:1; transform:none; filter:none}}
.rd-small{margin:0 0 6px; font-size:14px; letter-spacing:.03em; color:var(--faint)}
.rd-ask{font-family:var(--serif); font-size:25px; line-height:1.3; margin:0 0 18px}
.rd-soft{color:var(--muted); animation:breathe 2.4s ease-in-out infinite !important}
.rd-choices{display:grid; grid-template-columns:1fr 1fr; gap:9px}
.rd-choice{padding:13px 12px; border-radius:16px; font-size:15px; line-height:1.3; color:var(--text);
  background:rgba(191,230,255,.06); border:.5px solid rgba(190,230,240,.2); animation:rdIn .6s ease both;
  transition:background .3s, border-color .3s, transform .3s, opacity .3s}
.rd-choice.on{background:rgba(191,230,255,.2); border-color:var(--accent); transform:scale(1.04)}
.rd-choice:disabled:not(.on){opacity:.35}
@media (hover:hover){ .rd-choice:not(:disabled):hover{background:rgba(191,230,255,.12); border-color:rgba(191,230,255,.45)} }
.rd-words textarea{width:100%; resize:none; text-align:left}
.rd-kind{font-family:var(--serif); font-size:46px; line-height:1.05; margin:2px 0 8px;
  background:linear-gradient(90deg, #fff, #cfeaff, #ffe1b0); -webkit-background-clip:text; background-clip:text; color:transparent}
.rd-essence{font-family:var(--serif); font-style:italic; font-size:19px; color:#cfe0e6; margin:0 0 16px}
.rd-lines{display:flex; flex-direction:column; gap:8px}
.rd-line{margin:0; font-size:16px; line-height:1.5; color:#d8e7ec; animation:rdIn .9s cubic-bezier(.2,.8,.2,1) both}
.reading > *, .pair > *{flex:none}
.reading .rd-stage, .pair .pair-stage{margin-top:auto}
.reading .rd-acts, .pair .rd-acts{margin-bottom:auto}
.rd-acts{display:flex; flex-direction:column; gap:10px; width:min(320px, 100%); margin-top:18px; align-items:stretch}
@media (max-height:740px){
  .rd-stage, .rd-aura{width:min(60vw, 34vh, 300px); height:min(60vw, 34vh, 300px)}
  .reading .rd-kind{font-size:clamp(36px, 10vw, 48px)}
  .rd-essence{margin-bottom:10px} .rd-line{font-size:15px}
}
.rd-acts .primary, .rd-acts .ghost{margin:0}
.rd-skip{align-self:center; color:var(--faint)}

/* ---- your two auras together ---- */
.pair-stage{position:relative; width:min(92vw, 520px); height:min(60vw, 44vh, 340px); flex:none}
.pair-aura{position:absolute; top:0; width:62%; height:100%; mix-blend-mode:screen; transition:left 2.6s cubic-bezier(.4,0,.2,1)}
.pair-aura.me{left:-6%}
.pair-aura.them{left:44%}
.pair.together .pair-aura.me{left:9%}
.pair.together .pair-aura.them{left:29%}
.pair-words{width:min(440px, 100%); text-align:center; min-height:110px}
.pair-words .rd-kind{font-size:40px}

/* ---- home: your living aura ---- */
.hero{position:relative; display:flex; flex-direction:column; align-items:center; margin:-6px 0 6px; cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.hero-aura{width:min(76vw, 300px); height:min(76vw, 300px); display:block}
.hero-kind{margin:-14px 0 0; text-align:center; font-family:var(--serif); font-size:17px; color:#dbe9ee}
.hero-kind small{display:block; font-family:var(--sans); font-size:13px; color:var(--faint); font-style:italic; margin-top:2px}
.hero-find{margin:-10px auto 0; display:block}
.hero-hint{margin:4px 0 0; text-align:center; font-size:12px; color:var(--faint)}
/* what it says when you poke it */
.hero-say{position:absolute; left:4px; right:4px; bottom:-14px; z-index:3; padding:11px 14px; border-radius:18px 18px 18px 6px;
  background:var(--card); border:.5px solid var(--line2); box-shadow:0 10px 30px rgba(0,0,0,.35); font-size:15px; line-height:1.4; color:var(--text); cursor:pointer;
  display:flex; gap:12px; align-items:center; transform-origin:12% 100%}
.hero-say::before{content:""; position:absolute; left:34px; top:-7px; width:12px; height:12px; background:var(--card); border-left:.5px solid var(--line2); border-top:.5px solid var(--line2); transform:rotate(45deg)}
.hero-say span{flex:1; min-width:0}
.hero-say b{flex:none; font-weight:700; font-size:13px; color:var(--accent); white-space:nowrap; padding:6px 10px; border-radius:14px; background:var(--s2)}
.hero-say.pop{animation:sayPop .35s cubic-bezier(.2,1.4,.4,1)}
@keyframes sayPop{from{opacity:0; transform:translateY(6px) scale(.96)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion: reduce){ .hero-say.pop{animation:none} }
body.app .view-home .hero-aura{width:250px; height:250px}
.grown{display:flex; gap:12px; align-items:center}

/* the awakening, once the aura is truly alive */
.aw-life{display:none; width:300px; height:300px; margin:-8px auto -62px; pointer-events:none}
.aw-living .aw-glow{display:none}
.aw-living .aw-life{display:block}
.aw-card-mode .aw-life{display:none}
.aw-card-aura{display:block; width:230px; height:230px; margin:-40px auto -14px}
.aw-card-kind{font-family:var(--serif); font-style:italic; color:#dbe9ee; margin:4px 0 14px}

.claim-pair{width:100%; margin-top:14px}

.view-home #greeting, .view-home > .muted.sub{text-align:center}
.view-home .home-acts{justify-content:center}

/* choosing a vibe */
.aw-vibes{display:flex; flex-direction:column; gap:8px; animation:awFade .9s ease}
.aw-vibe{display:grid; grid-template-columns:auto 1fr; column-gap:10px; text-align:left; padding:11px 14px; border-radius:16px;
  background:rgba(255,255,255,.04); border:.5px solid var(--line2); color:var(--text); transition:background .25s, border-color .25s, transform .25s}
.aw-vibe b{font-weight:600; font-size:16px}
.aw-vibe span{font-size:13px; color:var(--muted); align-self:center}
.aw-vibe i{grid-column:1 / -1; font-size:13px; color:var(--faint); margin-top:3px}
.aw-vibe.on{background:rgba(191,230,255,.14); border-color:var(--accent); transform:scale(1.02)}
.aw-vibe.on i{color:#cfe0e6}

/* ---- creatures, sitting in their aura's glow ---- */
.hero-stage, .rd-stage, .aw-life-stage{position:relative; display:block}
.hero-stage{width:min(76vw, 300px); height:min(76vw, 300px)}
.hero-stage .hero-aura{width:100%; height:100%}
body.app .view-home .hero-stage{width:250px; height:250px}
.rd-stage{width:min(78vw, 46vh, 420px); height:min(78vw, 46vh, 420px); flex:none; margin:0 0 6px}
.rd-stage .rd-aura{width:100%; height:100%; margin:0}
.aw-life-stage{width:300px; height:300px; margin:-8px auto -62px; display:none}
.aw-living .aw-life-stage{display:block}
.aw-card-mode .aw-life-stage{display:none}
.aw-life-stage .aw-life{display:block; width:100%; height:100%; margin:0}
.creature-on{position:absolute; left:21%; top:19%; width:58%; height:58%; pointer-events:none}
.creature-on.pop, .pair-creature.pop{animation:creaturePop 1s cubic-bezier(.2,1.5,.4,1) both}
@keyframes creaturePop{0%{opacity:0; transform:scale(.2) translateY(30px)} 60%{opacity:1} 100%{opacity:1; transform:none}}
.pair-creature{position:absolute; left:34%; top:18%; width:32%; height:64%; pointer-events:none}
.pair.hatched .pair-aura{opacity:.75; transition:left 2.6s cubic-bezier(.4,0,.2,1), opacity 1.2s}

/* ---- friends first: the top of home ---- */
.home-head{display:flex; align-items:center; gap:6px; margin:-4px 0 0; position:relative}
.home-head .hero{margin:0; flex:none}
.home-head .hero-stage, body.app .view-home .home-head .hero-stage{width:104px; height:104px}
.home-head .hero-stage .hero-aura, body.app .view-home .home-head .hero-aura{width:100%; height:100%}
.home-head-words{flex:1; min-width:0}
.home-head-words h2{margin:0; text-align:left !important; font-size:24px; line-height:1.2}
.home-head-words .hero-kind{margin:3px 0 0; text-align:left; font-size:14px}
.home-head-words .hero-kind small{font-size:12px}
.home-head-words .hero-find{margin:8px 0 0; display:inline-flex}
.home-head-words .hero-hint{text-align:left; margin:2px 0 0}
.view-home > .home-id{text-align:left !important; margin:2px 0 14px; font-size:12px}
.together{margin:0 0 14px}
.people-strip{display:flex; gap:14px; overflow-x:auto; padding:4px 2px 10px; margin:0 -4px; scrollbar-width:none}
@media (hover:hover){  /* with a mouse, show that it scrolls */
  .people-strip{scrollbar-width:thin}
  .people-strip::-webkit-scrollbar{display:block; height:6px}
}
.people-strip::-webkit-scrollbar{display:none}
.pstrip{flex:none; width:68px; display:flex; flex-direction:column; align-items:center; gap:4px; cursor:pointer; text-align:center}
.pstrip .dot{width:52px; height:52px; border-radius:50%; position:relative}
.pstrip .dot.away{opacity:.55}
.pstrip.up .dot{box-shadow:0 0 0 2.5px var(--warm), 0 0 16px rgba(255,217,160,.45) !important}
.pstrip b{font-size:12.5px; font-weight:500; max-width:68px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pstrip small{font-size:10.5px; color:var(--warm); line-height:1.2; max-height:2.5em; overflow:hidden}
.pstrip.empty-strip{width:auto; flex:1; text-align:left; align-items:flex-start; cursor:default}
.upfor-row{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:2px 0 10px}
.upfor-btn{padding:8px 14px; border-radius:18px; font-size:14px; color:var(--warm); background:rgba(255,217,160,.08);
  border:.5px solid rgba(255,217,160,.35)}
.my-upfor{display:contents}
.upfor-chip{display:inline-flex; align-items:center; gap:6px; padding:6px 6px 6px 12px; border-radius:16px; font-size:13px;
  background:rgba(255,217,160,.12); color:#ffe7c2}
.upfor-chip button{color:var(--faint); font-size:15px; padding:0 4px}
.upfor-card{display:flex; flex-direction:column; gap:10px; margin:0 0 12px}
.when-chips{display:flex; flex-wrap:wrap; gap:6px}
.when-chip{padding:6px 12px; border-radius:16px; font-size:13px; border:.5px solid var(--line2); color:var(--muted)}
.when-chip.on{background:rgba(191,230,255,.16); border-color:var(--accent); color:var(--text)}
.upfor-acts{display:flex; align-items:center; gap:14px}
.upfor-acts .primary{margin:0; padding:10px 18px; font-size:15px}
.plan-cards{display:flex; flex-direction:column; gap:10px; margin:0 0 10px}
.plan-cards:empty{display:none}
.pcard{border-radius:18px; padding:14px; background:linear-gradient(150deg, rgba(255,217,160,.12), var(--card) 60%);
  border:.5px solid rgba(255,217,160,.25); animation:awFade .5s ease}
.pcard.idea{background:linear-gradient(150deg, hsla(var(--hue),60%,32%,.25), var(--card) 60%); border-color:hsla(var(--hue),70%,70%,.28)}
.pcard .pc-kicker{margin:0; font-size:12px; color:var(--faint)}
.pcard .pc-title{margin:2px 0 4px; font-family:var(--serif); font-size:19px}
.pcard .pc-why{margin:0 0 10px; font-size:14.5px; color:#d6e5ea; line-height:1.45}
.pc-faces{display:flex; align-items:center; margin:2px 0 10px}
.pc-faces .dot{width:26px; height:26px; border-radius:50%; margin-right:-6px; border:2px solid var(--card)}
.pc-faces span{margin-left:12px; font-size:13px; color:var(--muted)}
.pc-acts{display:flex; flex-wrap:wrap; gap:8px}
.pc-acts button{font-size:13.5px; border-radius:18px; padding:8px 14px; border:.5px solid var(--line2); color:var(--muted)}
.pc-acts .yes{background:var(--accent); color:var(--accent-ink); border-color:transparent}
.pc-acts .on{background:rgba(191,230,255,.16); color:var(--text); border-color:var(--accent)}
.plans-list{display:flex; flex-direction:column; gap:8px; margin:0 0 8px}
.plans-list:empty{display:none}
.prow{display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:14px; background:var(--card);
  border:.5px solid var(--line); cursor:pointer; text-align:left; width:100%}
.prow .pr-when{flex:none; width:64px; font-size:12px; color:var(--warm); line-height:1.25}
.prow .pr-body{flex:1; min-width:0}
.prow .pr-body b{font-weight:500; display:block}
.prow .pr-body small{color:var(--muted); font-size:12.5px}
.prow .go{color:var(--faint)}
.find-plans{display:block; margin:2px 0 0; font-size:13px}
@media (hover:hover){ .prow:hover, .pstrip:hover .dot{filter:brightness(1.1)} .prow:hover{border-color:var(--line2)} }

/* ---- making a plan ---- */
.pe-form{display:flex; flex-direction:column; gap:12px}
.pe-who{display:flex; flex-wrap:wrap; gap:6px}
.pe-who button{display:inline-flex; align-items:center; gap:6px; padding:6px 12px 6px 6px; border-radius:18px; font-size:13.5px;
  border:.5px solid var(--line2); color:var(--muted)}
.pe-who button .dot{width:22px; height:22px; border-radius:50%}
.pe-who button.on{background:rgba(191,230,255,.16); border-color:var(--accent); color:var(--text)}
.pe-time input{color-scheme:dark}

/* ---- one plan ---- */
body[data-view="plan"] .phone{height:100vh; height:100dvh; min-height:0; padding-bottom:0; display:flex; flex-direction:column; overflow:hidden}
.view-plan{flex:1; min-height:0}
.plan-wordmark{font-size:20px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:72%}
.plan-head{flex:none; padding:0 2px 8px; border-bottom:.5px solid var(--line)}
.plan-when{margin:0; color:var(--warm); font-size:15px}
.plan-place, .plan-note{margin:2px 0 0; font-size:14px; color:var(--muted)}
.plan-place:empty, .plan-note:empty{display:none}
.plan-people{display:flex; flex-wrap:wrap; gap:6px; margin:10px 0}
.pp.guest .dot{background:rgba(255,255,255,.25)}
.plan-guest-link{display:block; margin:6px 0 0}
.pp{display:inline-flex; align-items:center; gap:6px; padding:4px 10px 4px 4px; border-radius:16px; font-size:13px; background:rgba(255,255,255,.04)}
.pp .dot{width:22px; height:22px; border-radius:50%}
.pp i{font-style:normal; font-size:11px; color:var(--faint)}
.pp.in i{color:#9fe6b8} .pp.maybe i{color:var(--warm)} .pp.out{opacity:.5}
.rsvp{display:flex; gap:8px; margin:4px 0 6px}
.rsvp button{flex:1; padding:9px; border-radius:18px; font-size:14px; border:.5px solid var(--line2); color:var(--muted)}
.rsvp button.on{background:var(--accent); color:var(--accent-ink); border-color:transparent}
.plan-cal{display:inline-block; margin:4px 0 0; font-size:13px}
.plan-owner{margin:4px 0 0}
.plan-chat .note{margin:6px 0}

.aw-age{flex-direction:row; align-items:center; justify-content:center; gap:8px; font-size:14px; color:var(--muted); margin-top:4px}
.aw-age input{width:18px; height:18px; padding:0}
.test-tag{position:fixed; left:50%; transform:translateX(-50%); bottom:calc(4px + env(safe-area-inset-bottom)); z-index:60;
  font-size:10px; letter-spacing:.06em; text-transform:uppercase; padding:2px 8px; border-radius:99px;
  background:rgba(255,190,90,.18); color:#ffd59a; pointer-events:none}
.shelf-intro p{margin:0 0 2px}
.shelf-intro small{color:var(--faint); font-size:12px}
.shelf-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px}
.shelf-item{display:flex; flex-direction:column; gap:3px; padding:10px; border-radius:18px; background:var(--card);
  border:1px solid rgba(255,255,255,.06); min-width:0}
.shelf-item.new{border-color:rgba(255,215,130,.5)}
.shelf-item canvas{width:100%; aspect-ratio:1; display:block}
.shelf-item b{font-size:14px}
.shelf-item small{font-size:12px; color:var(--muted); overflow-wrap:anywhere}
.shelf-item .sv-series{color:hsl(var(--sv), 70%, 72%); font-weight:600}
.shelf-item .sv-first{color:#ffd59a}
.shelf-item.rare{border-color:rgba(255,217,160,.5); box-shadow:0 0 0 1px rgba(255,217,160,.15)}
.sv-acts{display:flex; align-items:center; gap:6px; margin-top:4px} .sv-acts .primary, .sv-acts .ghost{flex:1; margin:0; padding:8px 10px; font-size:13px}
.sv-acts .link{font-size:12px; padding:4px 6px}
.piece-big{display:flex; align-items:center; gap:14px; margin:4px 0 10px} .piece-big>span{font-size:44px; line-height:1}
.piece-big b{display:block; font-size:19px; font-weight:500} .piece-big small{color:hsl(var(--sv), 70%, 72%); font-weight:600}
.piece-line{margin:0 0 8px; font-size:15px; line-height:1.5} .piece-rare{margin:0 0 10px; color:#ffd59a; font-size:14px}
/* the crew's case: a row of pieces its people hold, at the top of the chat */
.crew-case{flex:none; display:flex; gap:8px; overflow-x:auto; padding:2px 2px 8px; scrollbar-width:none} .crew-case::-webkit-scrollbar{display:none}
.cc-piece{flex:none; display:flex; flex-direction:column; align-items:center; gap:1px; width:50px; padding:6px 2px 4px; border-radius:14px;
  background:hsl(var(--sv), 40%, 20%); border:.5px solid hsl(var(--sv), 50%, 40%)}
.cc-piece span{font-size:20px; line-height:1} .cc-piece small{font-size:10px; color:var(--text); max-width:56px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cc-piece em{font-style:normal; font-size:9.5px; color:var(--faint); max-width:56px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.crew-case .cc-piece{width:62px}
.cc-label{flex:none; display:flex; flex-direction:column; justify-content:center; gap:1px; padding:0 8px 0 2px; border-right:.5px solid var(--line2); margin-right:2px}
.cc-label b{font-size:12px; font-weight:600; color:var(--text); white-space:nowrap} .cc-label small{font-size:10px; color:var(--faint); white-space:nowrap}
.cc-piece.rare{border-color:rgba(255,217,160,.7)}
.crew-waiting{flex:none; margin:0 2px 6px; font-size:12.5px; color:var(--muted)} .crew-waiting .link{font-size:12.5px; padding:0}
.drop-swatch{display:inline-block; width:14px; height:14px; border-radius:50%; margin-right:8px; vertical-align:-1px; background:hsl(var(--sv), 70%, 62%); box-shadow:0 0 10px hsl(var(--sv), 80%, 60%)}
.invite-group-link{display:block; margin:8px 0 0; font-size:13px; text-align:left; padding:0}
.aw-seats .aw-chip{font-size:16px; padding:10px 18px} .aw-seats .aw-chip.on{background:var(--accent); color:var(--accent-ink); border-color:transparent} .aw-chip-none{color:var(--faint)}
#qsheet-body input, #qsheet-body textarea{width:100%; box-sizing:border-box; margin-bottom:10px}
.shelf-item button{margin-top:6px}
.shelf-missing{display:flex; flex-direction:column; gap:6px}
.shelf-missing div{display:grid; grid-template-columns:28px 1fr; column-gap:8px; align-items:center; padding:8px 10px;
  border-radius:12px; background:rgba(255,255,255,.03); opacity:.8}
.shelf-missing span{grid-row:span 2; font-size:20px; filter:grayscale(1)}
.shelf-missing b{font-size:13px} .shelf-missing small{font-size:12px; color:var(--faint)}
.knows-promise b{display:block; margin-bottom:4px}
.knows-sec h3{margin:0 0 8px; font-size:15px}
.knows-row{display:flex; align-items:flex-start; justify-content:space-between; gap:10px; padding:8px 0; border-top:1px solid rgba(255,255,255,.06)}
.knows-row p{margin:0; font-size:14px}
.knows-row.out{flex-direction:column; gap:2px}
.knows-row small{color:var(--faint); font-size:12px}
.knows-line{margin:4px 0; font-size:14px}
.knows-more{display:flex; gap:10px; flex-wrap:wrap}
.knows-more button{flex:1}
.care-card{align-self:stretch; margin:6px 0; padding:14px 16px; border-radius:16px; background:var(--card);
  border:1px solid rgba(255,190,150,.35); display:flex; flex-direction:column; gap:8px}
.care-card b{font-size:15px}
.care-line{display:flex; justify-content:space-between; gap:12px; padding:10px 12px; border-radius:12px;
  background:rgba(255,255,255,.05); color:var(--text); text-decoration:none; font-size:14px}
.care-line strong{white-space:nowrap}
.care-card small{color:var(--faint); font-size:12px}
.confirm-card{border-color:rgba(150,220,255,.35)}
.confirm-card > span{font-size:14px}
.confirm-acts{display:flex; gap:8px} .confirm-acts .primary, .confirm-acts .ghost{flex:1; margin:0; padding:9px 12px; font-size:14px}
.aw-born{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px; margin-top:6px; font-size:14px; color:var(--muted)}
.aw-born select{width:auto; min-width:96px; padding:8px 10px}
.aw-born small{flex-basis:100%; text-align:center; font-size:12px; color:var(--faint)}

/* no people yet: the message is a sentence, not a name under a photo */
.pstrip.empty-strip{width:auto; min-width:0; padding:6px 2px}
.pstrip.empty-strip b{max-width:none; white-space:normal; overflow:visible; font-size:14px}
.pstrip.empty-strip small{max-height:none; font-size:13px}

.aw-chip.aw-more{border-style:dashed; color:var(--accent)}

/* ---- phone layout fixes ---- */
/* The night-sky background stays put behind the page, however far you scroll
   (it was drawn one screen tall, leaving a hard edge mid-page). A fixed layer
   works on iPhone, where background-attachment:fixed doesn't. */
html{background:var(--s14)}
body{background:transparent}
body::before{content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(120% 90% at 30% 0%, var(--s4) 0%, var(--bg) 60%, var(--s14) 100%)}
/* Only the very end of home needs room for the floating "Talk to…" button,
   including the iPhone's home bar. */
.connections{margin-bottom:22px}
.view-home{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
.talk-btn{bottom:calc(16px + env(safe-area-inset-bottom))}
.helper-note:empty{display:none}
.q-hint{margin-top:6px}

/* the world preview on home: a wide strip, not a big square box */
#world{height:190px}

/* ---- moments ---- */
.share-btn{padding:8px 14px; border-radius:18px; font-size:14px; color:var(--accent-ink); background:var(--accent); font-weight:500}
.status-btn .st-label{color:var(--faint); font-size:12px; letter-spacing:.03em; text-transform:uppercase; margin-right:2px}
.status-btn .st-edit{color:var(--accent); font-size:12px; margin-left:4px}
.status-btn.set{color:var(--text)}
.status-btn{padding:8px 14px; border-radius:18px; font-size:14px; color:var(--muted); border:.5px solid var(--line2); max-width:100%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pstrip.has-new .dot{box-shadow:0 0 0 2.5px var(--bg), 0 0 0 5px hsl(330,90%,70%), 0 0 18px hsla(300,90%,70%,.5) !important}
.pstrip small.st{color:var(--muted)}
.mosaic{display:inline-grid; gap:2px; border-radius:10px; overflow:hidden; background:var(--bg); vertical-align:middle}
.mosaic i{display:block; background:var(--s5) center/cover no-repeat}
.mosaic.n1{grid-template-columns:1fr} .mosaic.n2{grid-template-columns:1fr 1fr} .mosaic.n3, .mosaic.n4{grid-template-columns:1fr 1fr}
.mosaic.n3 i:first-child{grid-row:span 2}
.mosaic.tip{width:96px; height:72px; margin-top:6px; display:grid}
.mosaic.big{width:170px; height:170px; display:grid; box-shadow:0 18px 50px rgba(0,0,0,.55); border:.5px solid var(--line2)}
.mosaic.wide{width:100%; height:120px; display:grid; margin:0 0 10px}
.mosaic.week{width:100%; height:180px; display:grid; margin-top:14px; grid-template-columns:repeat(3,1fr) !important}
.mosaic-pop{position:fixed; z-index:30; pointer-events:none; animation:awFade .25s ease}
.pcard.album{cursor:pointer}

.sheet, .viewer, .corner{position:fixed; inset:0; z-index:46; display:flex; align-items:flex-end; justify-content:center;
  background:rgba(3,8,12,.55); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); animation:awFade .25s ease}
.sheet-card, .corner-card{width:min(560px,100%); max-height:92vh; overflow-y:auto; background:linear-gradient(180deg,var(--s1),var(--s7));
  border:.5px solid var(--line2); border-radius:24px 24px 0 0; padding:18px 18px calc(18px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; gap:10px; animation:sheetUp .35s cubic-bezier(.2,.8,.2,1)}
@keyframes sheetUp{from{transform:translateY(40px); opacity:.4} to{transform:none; opacity:1}}
.sheet-head{display:flex; justify-content:space-between; align-items:center; font-size:17px}
.sheet-label{margin:4px 0 0; font-size:12px; color:var(--faint)}
.cmp-picks{display:grid; grid-template-columns:repeat(4,1fr); gap:6px}
.cmp-picks:empty{display:none}
.cmp-pick{position:relative; aspect-ratio:1; border-radius:12px; background:var(--s5) center/cover}
.cmp-pick.loading{animation:breathe 1.2s ease-in-out infinite}
.cmp-pick button{position:absolute; top:4px; right:4px; width:22px; height:22px; border-radius:50%; background:rgba(0,0,0,.6); color:#fff; font-size:14px}
.is-video::after{content:'▶'; position:absolute; left:6px; bottom:4px; font-size:12px; color:#fff; text-shadow:0 1px 4px #000}
.cmp-add{display:flex; gap:8px} .cmp-add .ghost{flex:1; padding:10px}
#cmp-caption{resize:none}
.cmp-help, #cmp-help{align-self:flex-start}

.viewer{align-items:center; background:rgba(2,5,8,.94); flex-direction:column}
.vw-media{position:relative; width:100%; max-width:760px; flex:1; min-height:0; display:flex; align-items:center; justify-content:center; padding:52px 8px 8px}
.vw-media img, .vw-media video{max-width:100%; max-height:100%; border-radius:12px; object-fit:contain}
.vw-dots{position:absolute; bottom:14px; left:0; right:0; display:flex; justify-content:center; gap:5px}
.vw-dots span{width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.35)} .vw-dots span.on{background:#fff}
.vw-info{width:min(760px,100%); padding:8px 16px calc(14px + env(safe-area-inset-bottom))}
.vw-who{margin:0; display:flex; align-items:center; gap:8px}
.vw-who .dot{width:26px; height:26px; border-radius:50%} .vw-who small{color:var(--faint)}
.vw-caption{margin:6px 0 0; font-size:15px}
.vw-caption:empty, .vw-likes:empty{display:none}
.vw-likes{margin:4px 0 0; font-size:13px; color:hsl(330,90%,75%)}
.vw-reply{display:flex; gap:8px; align-items:center; margin-top:10px; background:var(--s6); border:.5px solid var(--line2); border-radius:22px; padding:4px 4px 4px 6px}
.vw-reply input{flex:1; border:none; background:none; padding:8px 4px}
.vw-like{font-size:22px; width:38px; color:var(--muted)} .vw-like.on{color:hsl(330,90%,70%)}
.vw-own{display:flex; gap:16px; margin-top:8px} .vw-own .link{color:var(--faint)}
.vw-close{position:absolute; top:calc(10px + env(safe-area-inset-top)); right:12px; z-index:2; background:rgba(0,0,0,.4)}
.vw-nav{position:absolute; top:42%; z-index:2; width:44px; height:64px; font-size:34px; color:rgba(255,255,255,.8)}
.vw-prev{left:4px} .vw-next{right:4px}

.corner.closing{opacity:0; transition:opacity .25s}
.corner-card{position:relative; min-height:55vh}
.corner-grip{width:40px; height:4px; border-radius:2px; background:rgba(255,255,255,.2); align-self:center; margin:-6px 0 4px}
.corner-close{position:absolute; top:12px; right:12px}
.corner-head{display:flex; align-items:center; gap:12px}
.corner-dot{width:56px; height:56px; border-radius:50%; flex:none}
.corner-name{margin:0; font-family:var(--serif); font-size:24px}
.corner-sub{margin:2px 0 0; font-size:12.5px; color:var(--faint)}
.corner-status{margin:0; font-size:14.5px; color:var(--warm)}
.corner-status:empty, .corner-why:empty{display:none}
.corner-acts{display:flex; flex-wrap:wrap; gap:8px}
.corner-acts button{font-size:13.5px; border-radius:18px; padding:8px 14px; border:.5px solid var(--line2); color:var(--text)}
.corner-acts .yes{background:var(--accent); color:var(--accent-ink); border-color:transparent}
.corner-grid, .pa-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:4px}
.cg{position:relative; aspect-ratio:1; border-radius:8px; background:var(--s5) center/cover}
.cg.unseen{box-shadow:inset 0 0 0 2.5px hsl(330,90%,70%)}
.cg[data-n]::before{content:attr(data-n); position:absolute; top:5px; right:6px; font-size:11px; color:#fff; text-shadow:0 1px 4px #000}
.corner-grid .empty, .pa-grid .empty{grid-column:1 / -1}
.corner-plans{display:flex; flex-direction:column; gap:6px}
.corner-why{margin:0; font-size:13.5px; color:var(--muted)}
.corner-foot{display:flex; gap:18px} .corner-foot .link{color:var(--faint); font-size:12.5px}
.corner-swipe{display:flex; justify-content:space-between}
body.corner-open{overflow:hidden}
@media (min-width:1180px){
  /* on a computer, a corner opens in the middle, over the world */
  .corner{align-items:center; background:rgba(3,8,12,.35)}
  .corner-card{border-radius:24px; width:min(520px, calc(100% - var(--left-w, 380px) - var(--right-w, 440px) - 80px)); min-width:380px}
  .corner-grip{display:none}
  .sheet{align-items:center} .sheet-card{border-radius:24px}
}

.plan-album{margin:8px 0 0}
.pa-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; font-size:14px}
.pa-share{flex-direction:row; align-items:center; gap:8px; margin-top:8px; font-size:13px}
.view-plan .plan-head{max-height:55vh; overflow-y:auto}
.q-photo{width:40px; height:40px; border-radius:12px; border:.5px solid var(--line2); background:var(--s3) center/cover; font-size:17px; flex:none}
.q-photo.has{font-size:0; border-color:var(--accent)}
.q-row{flex-wrap:wrap}
.q-pic{display:block; width:120px; height:120px; border-radius:12px; margin-top:6px; background:var(--s5) center/cover}
.q-pic.mine{display:block; margin-top:8px}
.blocked-list{display:flex; flex-direction:column; gap:6px; margin-bottom:24px}

/* the viewer always sits on top (it opens from corners, plans and the question card) */
.viewer{z-index:50}
/* a peek of someone's latest photo on their face in your people strip */
.pstrip .dot{overflow:visible}
.pthumb{position:absolute; right:-6px; bottom:-4px; width:24px; height:24px; border-radius:7px; background:var(--s5) center/cover;
  border:2px solid var(--bg); box-shadow:0 2px 8px rgba(0,0,0,.5)}

/* ===================== the social layer (social.js) ===================== */
body[data-view="crew"] .view-crew, body[data-view="s"] .view-s{display:flex}
body[data-view="crew"] .phone{height:100vh; height:100dvh; min-height:0; padding-bottom:0; display:flex; flex-direction:column; overflow:hidden}
.view-crew{flex:1; min-height:0}
.s-body{display:flex; flex-direction:column; gap:10px; padding-bottom:30px}
.s-body .primary, .s-body .ghost{margin:0}

/* the strip: you first, little battery and couch badges */
.pstrip.you .dot{box-shadow:0 0 0 2px rgba(191,230,255,.35)}
.pbat, .pcouch{position:absolute; left:-5px; bottom:-4px; font-size:13px; font-style:normal; line-height:1; background:var(--bg);
  border-radius:50%; padding:2px; box-shadow:0 1px 6px rgba(0,0,0,.5)}
.pcouch{left:auto; right:-6px; top:-4px; bottom:auto}

/* the social battery */
.battery-row{margin:0 0 12px}
.battery-row:empty{display:none}
.bat-pill{display:flex; align-items:center; gap:8px; padding:8px 14px; border-radius:20px; border:.5px solid var(--line2);
  background:rgba(191,230,255,.05); font-size:14px; color:var(--text)}
.bat-pill span{font-size:17px}
.bat-pill small{color:var(--faint); font-size:12px}
.bat-pill.bat-low{background:rgba(160,140,255,.08); border-color:rgba(180,160,255,.3)}
.bat-pill.bat-full{background:rgba(140,230,170,.07); border-color:rgba(150,230,180,.3)}
.bat-ask{padding:12px 14px; border-radius:16px; background:var(--card); border:.5px solid var(--line)}
.bat-ask p{margin:0 0 8px; font-family:var(--serif); font-size:17px}
.bat-opts{display:flex; gap:6px; flex-wrap:wrap}
.bat-opts button{flex:1; min-width:92px; padding:9px 8px; border-radius:14px; border:.5px solid var(--line2); font-size:13px; color:var(--text);
  display:flex; flex-direction:column; align-items:center; gap:2px}
.bat-opts button span{font-size:20px}
.bat-big{display:flex; flex-direction:column; gap:8px}
.bat-big button{display:grid; grid-template-columns:auto 1fr; column-gap:12px; text-align:left; padding:12px 14px; border-radius:16px;
  border:.5px solid var(--line2); background:rgba(255,255,255,.03); color:var(--text)}
.bat-big span{grid-row:span 2; font-size:26px; align-self:center}
.bat-big b{font-weight:500} .bat-big small{color:var(--muted); font-size:13px}
.uw-choices{display:flex; flex-direction:column; gap:8px; margin-top:16px}
.uw-choices button{display:flex; align-items:center; gap:12px; padding:12px 16px; border-radius:16px; border:.5px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.06); color:#fff; font-size:16px; text-align:left; transition:background .2s, transform .2s}
.uw-choices button span{font-size:22px}
.uw-choices button.on{background:rgba(191,230,255,.25); transform:scale(1.03)}

/* home: cards that need you, and things to do with your people */
/* waiting on you: at the very top of home, big and warm, answered with one tap */
.waiting{display:flex; flex-direction:column; gap:10px; margin:0 0 14px}
.waiting:empty{display:none}
.wait-card{display:flex; gap:14px; align-items:flex-start; padding:16px 16px 14px; border-radius:18px;
  background:linear-gradient(160deg, rgba(150,230,180,.16), var(--card) 65%); border:1px solid rgba(159,225,203,.45);
  box-shadow:0 8px 24px rgba(0,0,0,.25); animation:awFade .4s ease}
.wait-card.homescreen{background:linear-gradient(160deg, rgba(191,230,255,.14), var(--card) 65%); border-color:rgba(191,230,255,.35)}
.wait-card .sc-orb{width:44px; height:44px; flex:none; margin-top:2px; border-radius:50%; background-size:cover}
.hs-orb{width:44px; height:44px; flex:none; display:flex; align-items:center; justify-content:center; font-size:26px; border-radius:50%; background:var(--s2)}
.wait-body{flex:1; min-width:0}
.wait-kicker{margin:0 0 2px; font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--faint)}
.wait-title{margin:0 0 4px; font-family:var(--serif); font-size:19px; line-height:1.25}
.wait-text{margin:0; font-size:14px; color:var(--muted); line-height:1.5}
.wait-card .sc-acts button{font-size:14px; padding:9px 16px; min-height:38px}
.hs-steps{margin:8px 0 0; padding-left:20px; font-size:14px; color:var(--text); line-height:1.6}
.hs-steps li{margin:0 0 4px}
.hs-icon{width:18px; height:18px; vertical-align:-4px; color:var(--accent); background:var(--s2); border-radius:5px; padding:1px}
.social-cards{display:flex; flex-direction:column; gap:10px; margin:0 0 12px}
.social-cards:empty{display:none}
.scard{padding:13px 14px; border-radius:16px; background:linear-gradient(160deg, rgba(191,230,255,.06), var(--card) 60%);
  border:.5px solid var(--line); animation:awFade .5s ease}
.scard.bday{background:linear-gradient(160deg, rgba(255,190,120,.12), var(--card) 60%); border-color:rgba(255,200,140,.25)}
.scard.intro{background:linear-gradient(160deg, rgba(150,230,180,.09), var(--card) 60%)}
.scard.jar{background:linear-gradient(160deg, rgba(255,217,160,.1), var(--card) 60%)}
.sc-kicker{margin:0 0 4px; font-size:12px; color:var(--faint)}
.sc-title{margin:0; font-size:15px; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.sc-title .dot{width:26px; height:26px; border-radius:50%; flex:none}
.sc-title small{color:var(--faint); font-size:12px}
.sc-text{margin:6px 0 0; font-size:14px; color:var(--muted); line-height:1.5}
.sc-acts{display:flex; gap:6px; flex-wrap:wrap; margin-top:10px}
.sc-acts button{font-size:13px; border-radius:18px; padding:7px 13px; border:.5px solid var(--line2); color:var(--muted)}
.sc-acts .yes{background:var(--accent); color:var(--accent-ink); border-color:transparent}
/* all seven, always visible: a grid that wraps, never a row that hides things off-screen */
.with-people{display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; margin:2px 0 12px}
.wp-tile{display:flex; flex-direction:column; align-items:center; gap:3px; min-width:0; padding:10px 4px; border-radius:16px;
  border:.5px solid var(--line); background:rgba(255,255,255,.03); font-size:11.5px; color:var(--muted); line-height:1.2}
.wp-tile .ic{width:24px; height:24px; color:var(--text); opacity:.85}
.ic{display:inline-block; vertical-align:-5px; flex:none}
.share-btn .ic, .upfor-btn .ic, .find-plans .ic{width:17px; height:17px; margin-right:6px}
.share-btn, .upfor-btn, .connect-btn{display:inline-flex; align-items:center; gap:6px}
.connect-btn .ic{width:17px; height:17px}
.status-btn{display:none}   /* status came off the front (Oct 2026 review); it's set from You › Status line */
.notice-go{margin-left:8px; background:var(--accent); color:var(--accent-ink); border-color:transparent}

/* who's free, and your week */
.free-days, .free-parts{flex-wrap:wrap; gap:6px}  /* every day visible: never hidden off to the side */
.free-list{display:flex; flex-direction:column; gap:6px; margin-top:4px}
.free-row{display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:14px; background:var(--card); border:.5px solid var(--line);
  flex-direction:row; color:var(--text); font-size:15px}
.free-row .dot{width:30px; height:30px; border-radius:50%; flex:none}
.free-row b{flex:1; font-weight:500}
.free-row i{font-style:normal; font-size:13px; color:var(--faint)}
.free-row.free i{color:#9fe1cb} .free-row.low i{color:#c5b8ff} .free-row.busy{opacity:.6}
.free-row input{width:20px; height:20px}
.free-acts{display:flex; flex-direction:column; gap:8px; margin-top:6px}
.week-grid{display:grid; grid-template-columns:auto repeat(3, 1fr); gap:5px; align-items:center}
.week-grid > b{font-size:11px; font-weight:500; color:var(--faint); text-align:center; text-transform:capitalize}
.wg-day{font-size:13px; color:var(--muted); padding-right:6px; white-space:nowrap}
.wg-cell{padding:9px 4px; border-radius:10px; border:.5px solid var(--line); font-size:13px; color:var(--faint)}
.wg-cell.free{background:rgba(140,230,170,.16); color:#9fe1cb; border-color:rgba(150,230,180,.35)}
.wg-cell.busy{background:rgba(255,155,143,.1); color:#ffc2ba; border-color:rgba(255,155,143,.25)}

/* the jar */
.jar-hero{display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; margin:4px 0 8px}
.jar-hero p{margin:0; color:var(--muted); font-size:14px; max-width:300px}
.jar-glass{width:92px; height:110px; border-radius:22px 22px 30px 30px; position:relative; display:grid; place-items:center;
  background:linear-gradient(180deg, rgba(191,230,255,.08), rgba(255,217,160,.16)); border:1.5px solid rgba(191,230,255,.35);
  box-shadow:inset 0 -18px 30px rgba(255,217,160,.18), 0 10px 40px rgba(255,217,160,.12)}
.jar-glass::before{content:''; position:absolute; top:-10px; left:16px; right:16px; height:12px; border-radius:6px; background:#2a4a55; border:1px solid rgba(191,230,255,.3)}
.jar-glass span{font-family:var(--serif); font-size:30px; color:var(--warm)}
.jar-note{background:#f6edd8; color:#2b2418; border-radius:6px 14px 10px 12px; padding:14px 16px 10px; transform:rotate(var(--tilt));
  box-shadow:0 8px 24px rgba(0,0,0,.35); animation:awFade .5s ease}
.jar-note.new{box-shadow:0 0 0 2px var(--warm), 0 8px 24px rgba(0,0,0,.35)}
.jar-note p{margin:0 0 8px; font-family:var(--serif); font-size:17px; line-height:1.45}
.jar-note small{color:#7a6c52; font-size:12px}
.jar-acts{display:flex; gap:12px; margin-top:6px} .jar-acts .link{color:#8a7a5c; font-size:12px; padding:0}
.jar-named{flex-direction:row; align-items:center; gap:8px; font-size:14px}
.jar-named input{width:18px; height:18px}

/* ask my people */
.ask-form{gap:8px} .ask-form textarea{resize:none}
.ask-card{padding:13px 14px; border-radius:16px; background:var(--card); border:.5px solid var(--line)}
.ask-who{margin:0 0 4px; display:flex; align-items:center; gap:8px; font-size:14px}
.ask-who .dot, .ask-a .dot{width:24px; height:24px; border-radius:50%; flex:none}
.ask-who small{color:var(--faint)}
.ask-q{margin:0 0 8px; font-family:var(--serif); font-size:18px; line-height:1.35}
.ask-answer{display:flex; gap:6px; align-items:flex-end}
.ask-answer textarea{flex:1; resize:none; min-height:40px}
.ask-a{display:flex; gap:8px; align-items:flex-start; margin:6px 0 0; font-size:14px; line-height:1.45}
.ask-a.new b{color:var(--warm)}
.ask-card .tiny{margin:6px 0 0}

/* the couch */
.couch-intro{margin:0}
.sofa{position:relative; margin:8px 0 4px; padding-top:6px}
.sofa-seats{display:flex; justify-content:center; gap:4px; flex-wrap:wrap; position:relative; z-index:1}
.seat{display:flex; flex-direction:column; align-items:center; width:96px}
.seat canvas{width:92px; height:92px}
.seat b{font-size:13px; font-weight:500; margin-top:-6px}
.seat small{font-size:11px; color:var(--faint)}
.sofa-base{height:54px; margin:-46px 8px 0; border-radius:26px 26px 14px 14px; background:linear-gradient(180deg, #3c5f6b, #24414b);
  box-shadow:inset 0 6px 0 rgba(255,255,255,.08), 0 14px 30px rgba(0,0,0,.4)}
.couch-said{display:flex; flex-direction:column; gap:6px; max-height:38vh; overflow-y:auto}
.cs{margin:0; font-size:14px; padding:8px 12px; border-radius:14px; background:var(--card); border:.5px solid var(--line); align-self:flex-start; max-width:90%}
.cs.mine{align-self:flex-end; background:var(--s2)}
.cs b{font-weight:500; color:var(--accent)} .cs a{color:var(--warm)}
.couch-input input{flex:1; border:none; background:none}
.countdown{position:fixed; inset:0; z-index:90; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  background:rgba(3,8,12,.85); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px)}
.countdown p{margin:0; color:var(--muted)}
.countdown b{font-size:110px; font-weight:700; color:#fff; line-height:1; animation:breathe 1s ease-in-out infinite}
.countdown .primary{padding:12px 28px; text-decoration:none}

/* notes in places */
.place-list{display:flex; flex-direction:column; gap:8px; margin-top:4px}
.place-note{padding:12px 14px; border-radius:16px; background:var(--card); border:.5px solid var(--line)}
.place-note.near{border-color:rgba(255,217,160,.5); background:linear-gradient(160deg, rgba(255,217,160,.12), var(--card) 60%)}
.pn-who{margin:0 0 4px; display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); flex-wrap:wrap}
.pn-who .dot{width:22px; height:22px; border-radius:50%}
.pn-who i{font-style:normal; color:var(--warm)}
.pn-text{margin:0 0 6px; font-size:16px; line-height:1.45}

/* your month */
.recap-title{margin:6px 0 2px}
.recap-mosaic .mosaic.wide{height:180px}
.recap-line{margin:0; font-size:16px; line-height:1.55}
.recap-top{margin:0; display:flex; align-items:center; gap:8px; font-size:15px}
.recap-top .dot{width:24px; height:24px; border-radius:50%} .recap-top i{color:var(--faint); font-style:normal; font-size:13px}
.yb-link{display:block; text-align:center; text-decoration:none; margin-top:10px !important}

/* hangouts that count */
.plan-here{margin:8px 0}
.plan-here:empty{display:none}
.ph-who{margin:0 0 6px; font-size:14px; color:#9fe1cb}
.ph-btn{width:100%}

/* voice notes */
.mic-wrap{display:inline-flex; align-items:center; gap:4px; flex:none}
.mic{font-size:16px; min-width:34px; width:auto; padding:0 8px; border-radius:17px}
.mic.on{background:rgba(255,110,110,.18); border-color:rgba(255,120,120,.5); color:#ffb4b4; font-size:13px; animation:breathe 1.2s ease-in-out infinite}
.mic-cancel{font-size:12px; color:var(--faint)}
.dm.voice{padding:6px 8px}
.dm audio{display:block; height:34px; max-width:240px; margin-top:2px}

/* group chats */
.crews-box{margin-bottom:16px}
.crews-head{display:flex; align-items:baseline; justify-content:space-between}
.crew-row .crew-dot{width:40px; height:40px; flex:none}
.crew-face{width:40px; height:40px; flex:none}
.crew-chat{gap:4px}
.crew-chat .note{align-self:center; font-size:12px; color:var(--faint); margin:6px 0; text-align:center}
.crew-money{flex:none; display:flex; flex-direction:column; gap:2px; padding:8px 12px; border-radius:14px; background:rgba(255,217,160,.07);
  border:.5px solid rgba(255,217,160,.2); margin:0 0 6px}
.crew-money p{margin:0; font-size:13px; color:var(--warm)}
.crew-money .link{font-size:13px; margin-left:6px}
.crew-hint{flex:none; margin:2px 4px; font-size:12px; color:var(--faint)}
.crew-hint .crew-in{display:block; color:var(--muted)} .crew-hint .crew-in .link{font-size:12px; padding:0}
.crew-plus{flex:none; font-size:18px}
.crew-picks{display:flex; flex-direction:column; gap:4px; max-height:40vh; overflow-y:auto}
.crew-pick{display:flex; flex-direction:row; justify-content:flex-start; align-items:center; gap:10px; padding:8px 10px; border-radius:12px; background:rgba(255,255,255,.03); font-size:15px; color:var(--text)}
.crew-pick input{width:18px; height:18px}
.crew-pick .dot{width:26px; height:26px; border-radius:50%}
.sk-msg{align-self:flex-start; max-width:86%; padding:10px 13px; border-radius:18px; margin:6px 0;
  background:linear-gradient(135deg, hsla(var(--hue),60%,35%,.35), rgba(var(--glass3),.95) 70%); border:.5px solid hsla(var(--hue),70%,70%,.35)}
.sk-who{margin:0 0 3px; font-size:12px; color:hsl(var(--hue),80%,80%)} .sk-who small{color:var(--faint)}
.sk-text{margin:0; font-size:15px; line-height:1.5; white-space:pre-wrap}
.sk-plan{margin-top:10px !important; font-size:14px; padding:9px 14px}
.poll-card, .bill-card{align-self:stretch; padding:12px 14px; border-radius:16px; background:var(--card); border:.5px solid var(--line2); margin:6px 0;
  display:flex; flex-direction:column; gap:6px}
.poll-q{margin:0; font-weight:500} .poll-card small, .bill-card small{color:var(--faint); font-size:12px}
.poll-opt{position:relative; display:flex; justify-content:space-between; padding:9px 12px; border-radius:12px; border:.5px solid var(--line2);
  overflow:hidden; color:var(--text); font-size:14px; text-align:left}
.poll-opt i{position:absolute; left:0; top:0; bottom:0; background:rgba(191,230,255,.12); transition:width .4s}
.poll-opt span, .poll-opt b{position:relative} .poll-opt.mine{border-color:var(--accent)}
.bill-card p{margin:0}

/* make it yours */
.editor{position:fixed; inset:0; z-index:52; display:flex; flex-direction:column; align-items:center; overflow-y:auto;
  padding:calc(14px + env(safe-area-inset-top)) 16px calc(20px + env(safe-area-inset-bottom));
  background:radial-gradient(110% 80% at 50% 25%, var(--s1) 0%, var(--s13) 70%); animation:awFade .4s ease}
.ed-top{width:min(520px,100%); display:flex; justify-content:space-between; align-items:center; font-size:17px}
.ed-save{font-size:16px; font-weight:600}
.ed-stage{--hue:200; position:relative; width:min(60vw, 260px); height:min(60vw, 260px); flex:none; margin:8px 0 0;
  background:radial-gradient(circle, hsla(var(--hue),80%,65%,.4) 0%, hsla(var(--hue),80%,50%,0) 65%); border-radius:50%; transition:background .3s}
.ed-glow{display:none}
.ed-creature{position:absolute; inset:8%; width:84%; height:84%}
.ed-kind{margin:2px 0 10px; font-family:var(--serif); font-size:20px; text-align:center}
.ed-tabs{width:min(520px,100%); display:flex; gap:6px; flex-wrap:wrap; justify-content:center; padding-bottom:4px}
.ed-tabs::-webkit-scrollbar{display:none}
.ed-tab{flex:none; padding:7px 13px; border-radius:16px; font-size:13px; color:var(--muted); border:.5px solid var(--line)}
.ed-tab.on{background:var(--accent); color:var(--accent-ink); border-color:transparent}
.ed-opts{width:min(520px,100%); display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:12px; min-height:90px; align-content:flex-start}
.ed-chip{padding:10px 16px; border-radius:16px; border:.5px solid var(--line2); color:var(--text); font-size:15px; background:rgba(255,255,255,.03);
  transition:transform .15s, background .2s}
.ed-chip.on{background:rgba(191,230,255,.2); border-color:var(--accent); transform:scale(1.05)}
.ed-chip.locked{opacity:.55; border-style:dashed}

/* ---- quests: your sidekick's speech bubble, the spotlight walk, the sticker book ---- */
.quest-card{margin:0 0 12px}
.qc{display:flex; gap:10px; align-items:flex-start; animation:awFade .5s ease}
.qc-face{width:58px; height:58px; flex:none; margin-top:-4px}
.qc-body{flex:1; min-width:0; position:relative; padding:11px 14px; border-radius:18px 18px 18px 6px;
  background:linear-gradient(160deg, rgba(191,230,255,.1), var(--card) 70%); border:.5px solid var(--line2)}
.qc-body::before{content:''; position:absolute; left:-7px; top:16px; width:12px; height:12px; background:var(--card);
  border-left:.5px solid var(--line2); border-bottom:.5px solid var(--line2); transform:rotate(45deg)}
.qc-line{margin:0 0 9px; font-size:15px; line-height:1.45}
.qc-acts{display:flex; gap:6px; align-items:center; flex-wrap:wrap}
.qc-acts button{font-size:13px; border-radius:16px; padding:6px 12px; border:.5px solid var(--line2); color:var(--muted)}
.qc-acts .yes{background:var(--accent); color:var(--accent-ink); border-color:transparent}
.qc-acts .qc-log{border:none; padding:6px 2px; margin-left:auto; font-size:12px}
.qc-quiet{display:flex; justify-content:flex-end} .qc-quiet .qc-log{font-size:12px; color:var(--muted); padding:2px 2px}

/* a file your sidekick made, in the chat */
.file-chip{display:inline-flex; align-items:center; gap:6px; margin:4px 2px; padding:8px 13px; border-radius:14px; background:var(--accent); color:var(--accent-ink);
  font-weight:600; font-size:14px; text-decoration:none; white-space:nowrap; max-width:100%; overflow:hidden; text-overflow:ellipsis}
.file-chip:hover{filter:brightness(1.06)}

/* ---- more.js: tipping points, regular things, tables for four, hold my phone, the Sunday drop, quiet mode ---- */
.more-cards{display:flex; flex-direction:column; gap:10px} .more-cards:empty{display:none}
.more-cards .scard.hold{background:linear-gradient(160deg, rgba(255,217,160,.14), var(--card) 60%); border-color:rgba(255,200,140,.3)}
.more-cards .scard.table{background:linear-gradient(160deg, rgba(150,230,180,.1), var(--card) 60%)}
.more-cards .scard.dump{background:linear-gradient(160deg, rgba(191,230,255,.1), var(--card) 60%)}
.more-cards .scard.rescue{background:linear-gradient(160deg, rgba(255,190,120,.1), var(--card) 60%)}
.sc-kicker{margin:0 0 4px; font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--faint)}
.scard{position:relative}
.sc-close{position:absolute; top:8px; right:10px; width:30px; height:30px; border-radius:50%; font-size:18px; line-height:1; color:var(--faint)}
.sc-close:hover{color:var(--text); background:rgba(255,255,255,.06)}
.sc-tally{margin:0 0 6px; font-size:12.5px; color:var(--faint)}
.q-skip{font-size:12px; padding:0; text-transform:none; letter-spacing:0; margin-left:auto}
/* Wednesday at 8: the card glows a little while everyone's on */
.question-card.eight{border-color:rgba(255,217,160,.45); box-shadow:0 0 0 1px rgba(255,217,160,.18), 0 10px 40px rgba(255,217,160,.08); animation:eightGlow 3s ease-in-out infinite}
.question-card.eight .card-head span:first-child{color:var(--warm)}
@keyframes eightGlow{0%,100%{box-shadow:0 0 0 1px rgba(255,217,160,.18)}50%{box-shadow:0 0 0 1px rgba(255,217,160,.4), 0 10px 40px rgba(255,217,160,.14)}}
.scard.weekline textarea{width:100%; box-sizing:border-box; margin:8px 0 10px; font-size:16px; resize:none}
.prow.past .pr-when{color:var(--faint)}
.plans-past{margin-top:10px}
.q-skip.hidden{display:none}
.sc-text{margin:6px 0 0; font-size:14px; color:var(--muted); line-height:1.45}
.seats{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px}
.seat{display:inline-flex; align-items:center; gap:6px; padding:5px 10px 5px 5px; border-radius:18px; border:.5px solid var(--line2); font-size:13px}
.seat .dot{width:22px; height:22px; border-radius:50%} .seat i{font-style:normal; color:var(--faint); font-size:11.5px}
.seat.yes{border-color:var(--accent)} .seat.no{opacity:.5}
.pe-needs .when-chip{font-size:12.5px} .pe-needs-note{margin:-4px 0 0}
.plan-tip{margin:0 0 8px; font-size:13.5px; color:var(--accent)}
.pc-tip{color:var(--accent)}
.rit-row{display:flex; gap:12px; align-items:flex-start; background:var(--card); border:.5px solid var(--line); border-radius:16px; padding:12px 14px}
.rit-row b{display:block; font-size:15px} .rit-row small{display:block; color:var(--muted); font-size:12.5px; margin-top:2px}
.rit-row .rit-faces{display:flex; margin-top:6px} .rit-row .rit-faces .dot{width:20px; height:20px; border-radius:50%; margin-right:-5px; border:1.5px solid var(--card)}
.rit-form label{display:block; margin:10px 0 4px; font-size:13px; color:var(--muted)}
.rit-form input, .rit-form select{width:100%; box-sizing:border-box; font-size:16px; padding:10px 12px; border-radius:12px; border:.5px solid var(--line2); background:var(--card); color:var(--text)}
.rit-form .row2{display:flex; gap:8px} .rit-form .row2 > *{flex:1}
.dump-grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:8px; margin-top:10px}
.dump-tile{position:relative; border-radius:14px; overflow:hidden; aspect-ratio:1; background-size:cover; background-position:center; border:none; padding:0}
.dump-tile span{position:absolute; left:8px; bottom:6px; font-size:12.5px; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.6)}
.dump-count{display:flex; gap:4px; margin:8px 0} .dump-count i{width:10px; height:10px; border-radius:50%; background:var(--line2)} .dump-count i.on{background:var(--accent)}
.hold-pick{display:flex; gap:8px; margin:10px 0} .hold-pick button{flex:1; padding:12px 6px; border-radius:14px; border:.5px solid var(--line2); color:var(--text); font-size:14px}
.quiet-row:empty{display:none} .quiet-row .pv{border-color:rgba(255,200,140,.3)}
.moved-note{margin:6px 0 0; font-size:13px; color:var(--muted)}
/* "just here for my friends": no sidekick on screen, nothing written by a model */
body.quiet .hero, body.quiet #open-chat, body.quiet #hero-hint, body.quiet #quest-card, body.quiet #plan-ideas, body.quiet #find-plans,
body.quiet #nudges, body.quiet #brief-text, body.quiet #brief-label, body.quiet #refresh-brief, body.quiet #q-help, body.quiet #cmp-help,
body.quiet #thread-help, body.quiet .helper-row, body.quiet #talk-name, body.quiet .upfor-card .tiny,
body.quiet .brief-card, body.quiet .oc-sk, body.quiet #crew-hint, body.quiet #hero-kind, body.quiet #hero-find{display:none !important}
.spot{position:fixed; inset:0; z-index:60; pointer-events:none}
.spot .sb{position:fixed; display:block; background:rgba(2,6,10,.74); pointer-events:auto; animation:awFade .35s ease}
.spot .ring{position:fixed; display:block; border-radius:18px; box-shadow:0 0 0 2px var(--accent), 0 0 30px 6px rgba(191,230,255,.35);
  animation:spotPulse 1.6s ease-in-out infinite}
@keyframes spotPulse{0%,100%{box-shadow:0 0 0 2px var(--accent), 0 0 24px 4px rgba(191,230,255,.3)} 50%{box-shadow:0 0 0 3px var(--accent), 0 0 40px 10px rgba(191,230,255,.45)}}
.spot-bubble{position:fixed; display:flex; gap:10px; align-items:flex-start; pointer-events:auto; padding:12px 14px; border-radius:20px;
  background:linear-gradient(160deg, var(--s1), var(--bg)); border:.5px solid var(--line2); box-shadow:0 18px 50px rgba(0,0,0,.5);
  animation:sheetUp .45s cubic-bezier(.2,1.2,.3,1)}
.spot-face{width:56px; height:56px; flex:none}
.spot-line{margin:2px 0 10px; font-size:15px; line-height:1.45}
.spot-acts{display:flex; gap:6px; flex-wrap:wrap}
.spot-acts button{font-size:13px; border-radius:16px; padding:7px 13px; border:.5px solid var(--line2); color:var(--muted)}
.spot-acts .yes{background:var(--accent); color:var(--accent-ink); border-color:transparent}
.spot-skip{display:block; margin-top:8px; font-size:12px; color:var(--faint); padding:0}
.ql-head{margin:0; font-family:var(--serif); font-size:18px}
.ql-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:8px}
.ql-sticker{display:flex; flex-direction:column; align-items:center; text-align:center; gap:2px; padding:12px 6px; border-radius:16px;
  border:.5px dashed var(--line2); color:var(--faint)}
.ql-sticker span{font-size:26px; filter:grayscale(1); opacity:.5}
.ql-sticker b{font-size:12px; font-weight:500}
.ql-sticker small{font-size:11px; color:var(--faint)}
.ql-sticker.done{border-style:solid; background:linear-gradient(160deg, rgba(255,217,160,.1), var(--card) 70%); color:var(--text)}
.ql-sticker.done span{filter:none; opacity:1; transform:rotate(-6deg)}
.ql-sticker.skipped{opacity:.75}
.share-way{display:block; width:100%; text-align:center; margin:8px 0; text-decoration:none; box-sizing:border-box}
.ql-sticker .link{font-size:11px; padding:2px 0}
.ql-item{display:flex; gap:12px; align-items:center; padding:11px 13px; border-radius:16px; background:var(--card); border:.5px solid var(--line)}
.ql-item span{font-size:22px} .ql-item b{display:block; font-weight:500} .ql-item small{color:var(--faint); font-size:13px}
.ql-item.earned{border-color:rgba(255,217,160,.4)}
.ql-toggle{align-self:center; margin-top:6px}
.ql-todo{display:flex; gap:12px; align-items:center; padding:11px 13px; border-radius:16px; background:var(--card); border:.5px solid var(--line)}
.ql-todo>span{font-size:22px; flex:none} .ql-todo>div{flex:1; min-width:0}
.ql-todo b{display:block; font-weight:500} .ql-todo small{display:block; color:var(--muted); font-size:13px; line-height:1.4}
.ql-todo em{display:block; font-style:normal; color:var(--faint); font-size:12px; margin-top:2px}
.ql-todo.later>span{filter:grayscale(1); opacity:.5}
.ql-go{flex:none; padding:7px 14px; border-radius:16px; font-size:13px; background:var(--accent); color:var(--accent-ink); border:0}
.ql-todo .link{flex:none; font-size:12px; padding:0}
@media (prefers-reduced-motion: reduce){ .spot .ring, .qc, .spot-bubble{animation:none} }
.ed-range{width:100%; font-size:13px; color:var(--muted); gap:8px}
.ed-range input{width:100%; accent-color:var(--accent); padding:0}
.ed-hue span{display:flex; align-items:center; gap:8px}
.ed-dot{display:inline-block; width:18px; height:18px; border-radius:50%; box-shadow:0 0 0 2px rgba(255,255,255,.25)}
/* a rainbow track, so you can see every colour you could pick */
.ed-hue input[type=range]{-webkit-appearance:none; appearance:none; height:16px; border-radius:8px; border:none; cursor:pointer;
  background:linear-gradient(to right, hsl(0,75%,62%), hsl(45,85%,62%), hsl(90,65%,58%), hsl(150,65%,55%), hsl(195,75%,60%),
    hsl(240,70%,66%), hsl(285,65%,64%), hsl(330,75%,64%), hsl(359,75%,62%))}
.ed-hue input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:26px; height:26px; border-radius:50%; background:#fff;
  border:3px solid rgba(0,0,0,.35); box-shadow:0 2px 8px rgba(0,0,0,.4)}
.ed-hue input[type=range]::-moz-range-thumb{width:22px; height:22px; border-radius:50%; background:#fff; border:3px solid rgba(0,0,0,.35)}
.ed-hue input[type=range]::-moz-range-track{background:transparent}
.ed-hint{width:100%; margin:4px 0 0; font-size:13px; color:var(--faint)}
.ed-sets{width:100%; display:flex; flex-wrap:wrap; gap:10px; justify-content:center}
.ed-set{width:40px; height:40px; border-radius:50%; box-shadow:0 0 0 2px rgba(255,255,255,.18)}
.ed-set:hover{box-shadow:0 0 0 2px var(--accent)}
.ed-tag{width:100%; text-align:center; margin:4px 0 0; font-family:var(--serif); font-style:italic; color:#cfe0e6}
.ed-note{color:var(--warm); text-align:center; max-width:360px; font-size:14px}
.ed-note:empty{display:none}
.bd-row{display:flex; gap:8px} .bd-row select{flex:1; padding:11px; border-radius:10px; background:var(--s3); color:var(--text); border:.5px solid var(--line2); font-size:16px}
.qsheet-body, #qsheet-body{display:flex; flex-direction:column; gap:10px}
#qsheet-body textarea{resize:none}
#qsheet{z-index:55}
.vw-more{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
.vw-more:empty{display:none}
.vw-btn{padding:8px 14px; font-size:14px}
.send-row{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:14px; background:rgba(255,255,255,.04);
  border:.5px solid var(--line); color:var(--text); font-size:15px; text-align:left}
.send-row .dot{width:28px; height:28px; border-radius:50%; flex:none}
.send-row b{flex:1; font-weight:500}
.send-row small{color:var(--faint); font-size:12px}
.send-row.off{opacity:.5}
.photo-chip{flex:none; display:flex; align-items:center; gap:10px; padding:6px 10px; margin:0 0 6px; border-radius:14px;
  background:var(--card); border:.5px solid var(--line2); font-size:14px}
.photo-chip img{width:40px; height:40px; border-radius:8px; object-fit:cover}
.photo-chip span{flex:1; min-width:0} .photo-chip small{display:block; color:var(--faint); font-size:11.5px}
.crew-moment{margin:6px 0 2px}
.theme-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:8px}
.theme-swatch{display:flex; flex-direction:column; align-items:center; gap:5px; font-size:12px; color:var(--muted); padding:8px 2px;
  border-radius:14px; border:.5px solid transparent}
.theme-swatch i{width:44px; height:44px; border-radius:50%; box-shadow:0 0 0 1px rgba(255,255,255,.15)}
.theme-swatch.on{border-color:var(--accent); color:var(--text)}

@media (prefers-reduced-motion: reduce){ .scard, .jar-note{animation:none} .countdown b, .mic.on{animation:none} }

/* ===================== app colours =====================
   Teal is the default. Each theme shifts the dark surfaces to its own hue and changes the accent;
   your creature keeps its own colours whatever the app looks like. (Generated: see the build notes.) */
html[data-theme="sunset"]{--bg:#200b12; --card:#290f18; --bg2:#30101b; --s1:#3a121f; --s2:#3e1724; --s3:#220a12; --s4:#3c1421; --s5:#3a1320; --s6:#300e19; --s7:#200a11; --s8:#290d16; --s9:#19080e; --s10:#3c1522; --s11:#481b2a; --s12:#330f1b; --s13:#110509; --s14:#14060b; --accent:#ffcfa3; --accent-ink:#200b12; --muted:#b89aa6; --faint:#8f7480; --line:rgba(233,196,208,.12); --line2:rgba(233,196,208,.2); --glass1:44,14,24; --glass2:28,8,15; --glass3:41,15,24}
html[data-theme="forest"]{--bg:#0c1f16; --card:#10281c; --bg2:#122e20; --s1:#143826; --s2:#193c2b; --s3:#0b2116; --s4:#163a28; --s5:#153827; --s6:#102e1f; --s7:#0b1f15; --s8:#0e281b; --s9:#091810; --s10:#173a29; --s11:#1d4632; --s12:#113121; --s13:#06100b; --s14:#07130d; --accent:#bff0cf; --accent-ink:#0c1f16; --muted:#90ab9c; --faint:#6c8a79; --line:rgba(198,231,214,.12); --line2:rgba(198,231,214,.2); --glass1:15,43,29; --glass2:9,27,18; --glass3:16,40,28}
html[data-theme="berry"]{--bg:#1d0c1f; --card:#261028; --bg2:#2c122e; --s1:#351438; --s2:#39193c; --s3:#1f0b21; --s4:#37163a; --s5:#351538; --s6:#2c102e; --s7:#1d0b1f; --s8:#250e28; --s9:#170918; --s10:#37173a; --s11:#421d46; --s12:#2e1131; --s13:#0f0610; --s14:#120713; --accent:#f2c0ff; --accent-ink:#1d0c1f; --muted:#ad98b3; --faint:#86718d; --line:rgba(228,198,231,.12); --line2:rgba(228,198,231,.2); --glass1:40,15,43; --glass2:25,9,27; --glass3:38,16,40}
html[data-theme="midnight"]{--bg:#0b0e20; --card:#0f1229; --bg2:#101430; --s1:#12173a; --s2:#171c3e; --s3:#0a0d22; --s4:#14193c; --s5:#13183a; --s6:#0e1330; --s7:#0a0d20; --s8:#0d1129; --s9:#080a19; --s10:#151a3c; --s11:#1b2148; --s12:#0f1433; --s13:#050711; --s14:#060814; --accent:#c6ccff; --accent-ink:#0b0e20; --muted:#9aa0be; --faint:#737a98; --line:rgba(196,201,233,.12); --line2:rgba(196,201,233,.2); --glass1:14,18,44; --glass2:8,11,28; --glass3:15,18,41}
html[data-theme="ember"]{--bg:#1f130c; --card:#281910; --bg2:#2f1c11; --s1:#392113; --s2:#3d2618; --s3:#21130b; --s4:#3b2315; --s5:#392214; --s6:#2f1b0f; --s7:#1f120b; --s8:#28170e; --s9:#190e08; --s10:#3b2416; --s11:#472c1c; --s12:#321c10; --s13:#110905; --s14:#140b06; --accent:#ffc79c; --accent-ink:#1f130c; --muted:#b8a091; --faint:#8f796b; --line:rgba(232,210,197,.12); --line2:rgba(232,210,197,.2); --glass1:43,25,15; --glass2:27,15,9; --glass3:40,25,16}
html[data-theme="graphite"]{--bg:#151616; --card:#1b1c1d; --bg2:#1f2021; --s1:#242628; --s2:#292a2c; --s3:#151617; --s4:#26282a; --s5:#252628; --s6:#1e1f20; --s7:#141516; --s8:#1a1b1c; --s9:#101011; --s10:#27282a; --s11:#303233; --s12:#202122; --s13:#0b0b0b; --s14:#0c0d0e; --accent:#e8e8e8; --accent-ink:#151616; --muted:#a3a3a3; --faint:#7c7c7c; --line:rgba(213,214,216,.12); --line2:rgba(213,214,216,.2); --glass1:28,29,30; --glass2:17,18,19; --glass3:27,28,29}
html[data-theme] body{background:radial-gradient(120% 90% at 30% 0%, var(--s4) 0%, var(--bg) 60%, var(--s14) 100%)}

/* ===================== the Night: the place, the paper, the chapters, swaps (place.js, night.js) ===================== */
.place{position:relative; margin:-2px 0 12px; border-radius:20px; overflow:hidden; background:linear-gradient(180deg, #0a1826 0%, #0e2232 55%, #09141c 100%); border:.5px solid var(--line)}
.place canvas{display:block; width:100%; height:230px; cursor:pointer}
.place-head{position:absolute; left:12px; right:12px; top:10px; z-index:2; display:flex; flex-direction:column; gap:2px; pointer-events:none; text-shadow:0 1px 3px rgba(0,0,0,.55)}   /* the sky can be bright by day */
.place-worlds{display:flex; gap:6px; flex-wrap:wrap; align-items:center; pointer-events:auto}
.pw-name{font-family:'Newsreader', var(--serif); font-size:20px; color:var(--text)}
.pw-chip{font-family:'Newsreader', var(--serif); font-size:18px; color:rgba(232,241,244,.6); padding:2px 8px; border-radius:12px; position:relative; line-height:1.2}
.pw-chip.on{color:var(--text); background:rgba(255,255,255,.08)}
.pw-chip:hover{color:var(--text)}
/* with more than one world the names are a choice: bordered pills, the open one filled in its own colour */
.pw-label{flex-basis:100%; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:rgba(232,241,244,.72); margin:0 0 1px 2px}
.place-worlds.many .pw-chip{font-size:16px; color:rgba(232,241,244,.88); border:1px solid rgba(232,241,244,.4); background:rgba(0,0,0,.25); padding:3px 11px; border-radius:14px}
.place-worlds.many .pw-chip.on{color:#fff; border-color:hsla(var(--hue,200),75%,72%,.95); background:hsla(var(--hue,200),55%,45%,.55)}
.place-worlds.many .pw-chip.on::before{content:"● "; font-size:9px; vertical-align:2px; color:hsla(var(--hue,200),85%,80%,1)}
.pw-dot{position:absolute; top:3px; right:1px; width:7px; height:7px; border-radius:50%; background:#ffb36b}
.place-sub{font-size:12px; color:rgba(232,241,244,.82); padding-left:8px}   /* over the sky, with the head's shadow: readable by day and night */
.place-foot{position:absolute; left:12px; right:112px; bottom:8px; z-index:2; font-size:12.5px; color:var(--muted); display:flex; gap:6px; align-items:center; flex-wrap:wrap; line-height:1.3; text-shadow:0 1px 3px rgba(0,0,0,.55)}
.place-foot:empty{display:none}
.place-foot .link{font-size:12.5px; padding:2px 6px}
.place-foot .place-start{margin:0 auto; font-size:14px}
.paper-slot:empty{display:none}
.paper-wait{margin:0 0 14px; font-size:13px; color:var(--muted); line-height:1.5}
.paper-card{--hue:200; position:relative; margin:0 0 14px; padding:14px 16px 10px; border-radius:18px; background:linear-gradient(170deg, #f3ecdc, #eadfc6); color:#1f2524; border:.5px solid rgba(0,0,0,.08);
  box-shadow:0 10px 30px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.4)}
.paper-card.leaving{opacity:0; transform:translateY(-6px); transition:opacity .45s, transform .45s}
.paper-card.pop{animation:sayPop .4s cubic-bezier(.2,1.4,.4,1)}
.paper-card.past{margin:0; box-shadow:none}
.paper-head{display:flex; align-items:center; gap:7px; margin:0 0 8px; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:#6a6456}
.paper-head b{font-weight:700; color:#3b352c} .paper-head small{font-size:12px; letter-spacing:0; text-transform:none; color:#8a8172}
.paper-happened{margin:0 0 10px; font-family:'Newsreader', var(--serif); font-size:18px; line-height:1.4; color:#1f2524}
.paper-line{display:flex; align-items:flex-start; gap:8px; width:100%; text-align:left; margin:0 0 6px; padding:8px 10px; border-radius:12px; font-size:14px; line-height:1.45; color:#2c2a24; background:rgba(255,255,255,.45); border:.5px solid rgba(0,0,0,.05)}
.paper-line span{flex:1; min-width:0} .paper-line i{font-style:normal; color:#8a8172; flex:none}
button.paper-line:hover{background:rgba(255,255,255,.75)}
p.paper-line{background:none; border:0; padding:4px 2px}
.paper-line.k-plan{background:rgba(43,179,160,.16); border-color:rgba(43,179,160,.3)}
.paper-line.k-find{background:rgba(255,190,100,.2); border-color:rgba(255,170,70,.35)}
.paper-line.k-quiet{background:rgba(190,170,255,.18)}
.paper-line.k-visit{font-style:italic}
.paper-line.k-law{background:rgba(230,176,74,.18); border-color:rgba(230,176,74,.4)}
.paper-line.k-did{background:rgba(255,255,255,.6); border-left:3px solid #c0533a}
.paper-line.k-rehearsal{background:rgba(74,122,156,.16); border-color:rgba(74,122,156,.35)}
.paper-line.k-met{background:rgba(106,138,74,.16); border-color:rgba(106,138,74,.35)}
/* the second: charter, mandate, live it out */
.mandate-back{margin:8px 0 10px; padding:10px 12px; border-radius:12px; background:rgba(255,255,255,.05); border:.5px solid var(--line); font-size:13.5px}
.mandate-back b{display:block; font-weight:500; margin-bottom:3px} .mandate-back small{color:var(--muted); font-size:12.5px; line-height:1.4}
.reh-ask{display:flex; flex-direction:column; gap:8px; margin:0 0 14px} .reh-ask textarea{min-height:52px}
.reh{border-radius:16px; background:var(--card); border:.5px solid var(--line); overflow:hidden; margin:0 0 10px}
.reh.waiting{opacity:.75}
.reh-body{padding:0 14px 12px} .reh-note{font-family:'Newsreader', var(--serif); font-size:17px; line-height:1.5; margin:0 0 10px}
.reh-run{padding:8px 10px; margin:0 0 6px; border-radius:12px; background:rgba(255,255,255,.04); border-left:3px solid rgba(255,255,255,.15); font-size:14px}
/* keep going: a run played forward, a beat at a time */
.reh-play{margin-top:6px}
.reh-beat{padding:8px 10px; margin:6px 0 0; border-radius:10px; background:rgba(255,255,255,.05); font-size:14px; line-height:1.45}
.reh-beat p{margin:0}
.reh-chose{margin:4px 0 0 10px; font-size:13px; color:var(--accent)}
.reh-opts{display:flex; flex-direction:column; gap:6px; margin-top:8px}
.reh-opts > button{text-align:left; font-size:14px; padding:8px 12px; border-radius:12px; border:.5px solid var(--line2); background:var(--card); color:var(--text)}
.reh-own{display:flex; gap:6px; align-items:center} .reh-own input{flex:1; min-width:0; font-size:14px}
/* hatching: a few stories, each with its creature; and the card after */
/* the hatching stage: the whole screen, the egg in the middle, one idea at a time */
.hatch-stage{--hue:200; position:fixed; inset:0; z-index:60; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:calc(20px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-left, 0px)) calc(24px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-right, 0px));
  background:radial-gradient(ellipse at 50% 42%, hsla(var(--hue),45%,22%,1), #050a10 70%); color:var(--text); text-align:center; overflow:hidden}
.hatch-stage.hidden{display:none}
.hs-glow{position:absolute; left:50%; top:42%; width:var(--size,260px); height:var(--size,260px); transform:translate(-50%,-50%); border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, hsla(var(--hue),80%,70%,.55), hsla(var(--hue),80%,60%,.18) 45%, transparent 70%); filter:blur(14px);
  transition:width 1.2s ease, height 1.2s ease, opacity 1.2s ease}
.hs-glow.flood{--size:1400px; opacity:.9}
.hs-burst{position:absolute; inset:0; width:100%; height:100%; pointer-events:none}
.hs-close{position:absolute; top:calc(14px + env(safe-area-inset-top, 0px)); right:16px; font-size:14px; color:var(--faint); padding:8px 10px; z-index:2}
.hs-egg-wrap{position:relative; z-index:1; width:min(64vw,260px); height:min(64vw,260px); cursor:pointer; -webkit-tap-highlight-color:transparent}
.hs-egg{width:100%; height:100%; display:block}
.hs-egg-wrap.shake{animation:hsShake .32s ease}
@keyframes hsShake{0%,100%{transform:translateX(0) rotate(0)} 25%{transform:translateX(-6px) rotate(-3deg)} 75%{transform:translateX(6px) rotate(3deg)}}
.hs-text{position:relative; z-index:1; max-width:420px; min-height:70px; margin:14px 0 0; font-family:var(--serif); font-size:21px; line-height:1.35}
.hs-text p{margin:0 0 6px; opacity:0; transform:translateY(8px); animation:hsLine .9s ease forwards}
.hs-text p.small{font-family:var(--sans); font-size:14.5px; color:var(--muted)}
.hs-text p.name{font-size:30px; margin-bottom:2px}
.hs-text p.speech{font-family:var(--sans); font-size:16px; color:var(--text); line-height:1.5; max-width:380px}
/* what's new: a warm pop-up, first thing, over everything */
.news-pop{position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center; padding:24px max(16px, env(safe-area-inset-left, 0px)); background:rgba(4,10,16,.72); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px)}
.news-pop.hidden{display:none}
.news-card{--hue:200; width:min(420px, 100%); text-align:center; padding:26px 22px 18px; border-radius:24px; background:linear-gradient(180deg, var(--s1), var(--s9)); border:1px solid hsla(var(--hue),70%,70%,.35); box-shadow:0 24px 60px rgba(0,0,0,.5)}
.news-pop.pop .news-card{animation:sayPop .45s cubic-bezier(.2,1.4,.4,1)}
.news-orb{display:block; width:64px; height:64px; margin:0 auto 12px; border-radius:50%; background:radial-gradient(circle at 35% 35%, hsla(var(--hue),85%,80%,1), hsla(var(--hue),70%,55%,1) 60%, hsla(var(--hue),60%,35%,1)); box-shadow:0 0 30px hsla(var(--hue),80%,65%,.55)}
.news-kicker{margin:0 0 4px; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint)}
.news-title{margin:0 0 10px; font-family:var(--serif); font-size:23px; line-height:1.25; text-wrap:balance}
.news-text{margin:0 0 18px; font-size:15px; line-height:1.55; color:var(--text); text-align:left}
.news-ok{min-width:160px; font-size:16px; padding:12px 26px}
.news-count{margin:10px 0 0}
/* lock-screen notes: how much to say */
.pv-levels{flex-direction:column; align-items:stretch; gap:8px} .pv-levels .when-chips{margin:0}
.pv-muted{opacity:.55}
/* make a plan: a whole group chat in one tap */
.pe-crews{display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:8px}
.pe-crews small{flex-basis:100%; font-size:12px; color:var(--faint)}
.pe-crew{display:inline-flex; align-items:center; gap:6px; font-size:13px; padding:6px 11px; border-radius:16px; border:.5px solid var(--line2); color:var(--muted); background:var(--card)}
.pe-crew.on{color:var(--text); border-color:hsla(var(--hue,200),75%,68%,.9); background:hsla(var(--hue,200),55%,45%,.25)}
.pe-crew-dot{width:10px; height:10px; border-radius:50%; background:hsl(var(--hue,200),60%,62%)}
/* the working bar: never still, so it never looks stuck */
.hs-text p.bar{width:200px; height:4px; margin:10px auto 0; border-radius:2px; background:rgba(255,255,255,.12); overflow:hidden; position:relative}
.hs-text p.bar i{position:absolute; top:0; bottom:0; width:40%; border-radius:2px; background:hsla(var(--hue,200),80%,72%,.9); animation:hsBar 1.4s ease-in-out infinite}
@keyframes hsBar{0%{left:-40%} 100%{left:100%}}
@keyframes hsLine{to{opacity:1; transform:none}}
.hs-input{position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:8px; justify-content:center; max-width:460px; margin-top:12px}
.hs-input:empty{display:none}
.hs-chip{font-size:15px; padding:10px 16px; border-radius:22px; border:1px solid rgba(232,241,244,.3); background:rgba(0,0,0,.25); color:var(--text); min-height:40px}
.hs-chip:hover{border-color:hsla(var(--hue),75%,72%,.9)}
.hs-next{position:relative; z-index:1; margin-top:22px; background:var(--accent); color:var(--accent-ink); border-radius:24px; padding:13px 36px; font-size:16px; font-weight:600}
.hs-next.hidden{display:none}
.hs-stories{width:100%; max-width:520px; max-height:52vh; overflow-y:auto; display:flex; flex-direction:column; gap:8px; text-align:left; padding:2px}
.hs-stories .hatch-story{margin:0; background:rgba(0,0,0,.35); border-color:rgba(232,241,244,.18)}
.hs-stories .hatch-text p{font-size:14.5px}
.hatch-stage.reveal .hs-egg-wrap{animation:hsPop .7s cubic-bezier(.2,1.4,.4,1)}
@keyframes hsPop{0%{transform:scale(.4)} 100%{transform:scale(1)}}
.hatch-wait{font-size:14px; color:var(--muted); animation:awFade 1.2s ease infinite alternate}
.hatch-story{display:flex; gap:12px; align-items:flex-start; padding:10px; margin:0 0 10px; border-radius:16px; background:var(--card); border:.5px solid var(--line)}
.hatch-face{width:96px; height:96px; flex:none; cursor:pointer}
.hatch-text{flex:1; min-width:0} .hatch-text p{margin:0 0 6px; font-size:14px; line-height:1.45} .hatch-text small{display:block; color:var(--muted); margin:0 0 8px; font-size:12.5px}
.hatch-card{text-align:center; padding:6px 0}
.hatch-card-face{display:block; width:200px; height:200px; margin:0 auto}
.hatch-card-story{font-family:'Newsreader', var(--serif); font-size:16px; line-height:1.5; color:var(--text); margin:6px 0 10px}
.hatch-card .sc-acts{justify-content:center; margin-top:12px}
.reh-run.glad{border-left-color:#7fc57a}
.reh-run b{display:block; font-weight:600; margin-bottom:2px} .reh-run p{margin:0 0 4px; line-height:1.45} .reh-run small{color:var(--faint); font-size:12px}
.conn-talk-btn{align-self:flex-start; font-size:13px; padding:2px 0; margin:2px 0 4px}
.conn-talk{margin:0 0 8px; padding:8px 10px; border-radius:12px; background:rgba(255,255,255,.04); font-size:13.5px; line-height:1.45}
.conn-talk p{margin:0 0 5px} .conn-talk b{font-weight:600; margin-right:4px}
a.btn-link{display:inline-block; text-decoration:none; text-align:center}
.paper-plan{margin:4px 0 6px; padding:10px 12px; border-radius:12px; background:rgba(255,255,255,.55); font-size:14px; color:#2c2a24}
.paper-plan .sc-acts{margin-top:8px} .paper-plan .sc-acts button{color:#3b352c; border-color:rgba(0,0,0,.18); background:rgba(255,255,255,.5)} .paper-plan .sc-acts .yes{background:#2bb3a0; color:#0b1620; border-color:transparent}
.paper-foot{display:flex; justify-content:space-between; margin-top:4px} .paper-foot .link{color:#4a6b66; font-size:13px; padding:4px 2px}
.chapter{--hue:200; border-radius:16px; background:var(--card); border:.5px solid var(--line); overflow:hidden}
.chapter.unread{border-color:rgba(255,200,140,.4)}
.ch-head{display:flex; flex-direction:column; gap:2px; width:100%; text-align:left; padding:12px 14px; color:var(--text)}
.ch-kicker{font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--faint)}
.ch-head b{font-family:'Newsreader', var(--serif); font-weight:400; font-size:20px; line-height:1.2}
.chapter.unread .ch-head b::after{content:" ·"; color:#ffb36b}
.ch-story{padding:0 14px 12px; font-family:'Newsreader', var(--serif); font-size:17px; line-height:1.55; color:var(--text)}
.ch-story p{margin:0 0 10px} .ch-story .tiny{font-family:var(--sans)}
.swap .sc-title i{font-style:italic; color:var(--faint); font-size:13px}
.sw-piece{display:inline-flex; align-items:center; gap:4px; padding:3px 9px; border-radius:12px; background:hsl(var(--sv, 200), 40%, 22%); color:hsl(var(--sv, 200), 70%, 80%); font-size:14px}
.swap.done{opacity:.6}
.sw-dot{width:34px; height:34px; border-radius:50%; flex:none; display:inline-flex; align-items:center; justify-content:center; font-size:18px; background:hsl(var(--sv, 200), 45%, 24%)}
.hold-door{display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border-radius:14px; background:rgba(255,255,255,.04); border:.5px solid var(--line); font-size:14px; color:var(--text); flex-direction:row}
.hold-door input{margin-top:3px} .hold-door b{font-weight:500; display:block} .hold-door small{display:block; color:var(--muted); font-size:12.5px; line-height:1.4; margin-top:2px}
.dm.door{border-color:rgba(43,179,160,.45)}
.dm-door{display:block; font-size:11.5px; color:var(--faint); margin-bottom:4px; letter-spacing:.02em}
.aw-world{gap:8px} .aw-world textarea{min-height:84px} .aw-skip{align-self:center; margin-top:2px; color:var(--faint)}
@media (min-width:1180px){
  body.app .mid-top{display:flex; flex-direction:column; gap:10px; max-height:58vh; padding:10px 12px 12px; overflow-y:auto}   /* two unread papers: scroll, don't clip */
  body.app .mid-dock{max-height:calc(100vh - var(--top-h, 0px) - 3 * var(--pad))}
  body.app .mid-top .place{margin:0; flex:none} body.app .mid-top .place canvas{height:210px}
  body.app .mid-top .paper-card{margin:0; flex:none}
  body.app .mid-dock .brief-card{background:none; border:0; padding:0 6px}   /* the dock clips at its edge: keep glyphs off it */
  body.app .mid-dock .brief-text{font-size:14px; line-height:1.45}
}
@media (prefers-reduced-motion: reduce){ .paper-card{animation:none} }