:root{
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  --canvas:#F2F3F8; --card:#FFFFFF; --ink:#0B0B14; --muted:#5A6075; --line:#0B0B14; --hair:rgba(11,11,20,.14); --hair2:rgba(11,11,20,.18);
  --brand:#3A5FE6; --brand-ink:#FFFFFF; --soft:#EAEFFF; --doodle:#D3D7E4;
  --danger:#D32F45; --danger-ink:#D32F45; --ok:#0B7A3E; --ok-ink:#0B7A3E; --shadow:rgba(11,11,20,.16);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --canvas:#0D0F1E; --card:#171A30; --ink:#F4F5FB; --muted:#A5AAC6; --line:#F4F5FB; --hair:rgba(244,245,251,.14); --hair2:rgba(244,245,251,.18);
    --soft:#232850; --doodle:#232846; --shadow:rgba(0,0,0,.55); --brand:#6F8CFF; --brand-ink:#0B0B14; --danger-ink:#FF8696; --ok-ink:#5EE29A;
  }
}
:root[data-theme="dark"]{
  --canvas:#0D0F1E; --card:#171A30; --ink:#F4F5FB; --muted:#A5AAC6; --line:#F4F5FB; --hair:rgba(244,245,251,.14); --hair2:rgba(244,245,251,.18);
  --soft:#232850; --doodle:#232846; --shadow:rgba(0,0,0,.55); --brand:#6F8CFF; --brand-ink:#0B0B14; --danger-ink:#FF8696; --ok-ink:#5EE29A;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px);background:var(--canvas)}
body{margin:0;min-height:100vh;background:var(--canvas);color:var(--ink);font-family:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;line-height:1.45;-webkit-font-smoothing:antialiased}
body::before{content:'';position:fixed;top:0;right:0;bottom:0;left:0;inset:0;background:var(--doodle);-webkit-mask-image:var(--doodle-mask);mask-image:var(--doodle-mask);-webkit-mask-size:260px;mask-size:260px;pointer-events:none;opacity:.8;z-index:0}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:10px}
[hidden]{display:none!important}
h1,h2,h3,p{margin:0}

.app{position:relative;z-index:1;min-height:100vh;display:grid;place-items:center;padding:20px 16px 90px}
.screen{width:100%;max-width:980px;animation:enter .35s ease both}
@keyframes enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.card{position:relative;background:var(--card);border:2px solid var(--line);border-radius:28px;box-shadow:0 10px 30px var(--shadow);padding:28px 22px}
.back{position:absolute;top:16px;left:16px;width:44px;height:44px;border-radius:50%;border:2px solid var(--line);background:var(--card);display:grid;place-items:center;padding:0}
.back svg{width:22px;height:22px}
.h-light{font-weight:300;font-size:clamp(1.3rem,4.4vw,2.2rem);line-height:1.2}
.h-bold{font-weight:800;font-size:clamp(1.5rem,5vw,2.5rem);line-height:1.15}
.head{text-align:center;padding:30px 0 20px}
.note{text-align:center;color:var(--muted);font-size:.78rem;margin-top:18px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:2px solid var(--line);border-radius:999px;background:var(--card);padding:12px 24px;font-weight:600;font-size:1rem;min-height:48px;transition:transform .12s}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--brand);color:var(--brand-ink)}
.btn.danger{background:var(--danger);color:#fff}
.btn.ghost{border-color:transparent;background:transparent;text-decoration:underline}
.btn.big{font-size:1.15rem;padding:15px 34px;min-height:56px}
.btn svg{width:20px;height:20px;flex:none}

/* logo */
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.25rem}
.logo-mark{position:relative;width:34px;height:34px;border-radius:50%;background:conic-gradient(#FF3D81,#FFB02E,#2BD4A5,#3F7BFF,#FF3D81);-webkit-mask:radial-gradient(circle 9px at 50% 50%,transparent 97%,#000 100%);mask:radial-gradient(circle 9px at 50% 50%,transparent 97%,#000 100%)}

/* landing */
.landing{display:flex;flex-direction:column;gap:34px;padding:6px 0}
.top{display:flex;align-items:center;justify-content:space-between}
.top .btn{padding:8px 20px;min-height:42px;font-size:.95rem}
.top-actions{display:flex;gap:10px}
.hero{text-align:center;display:flex;flex-direction:column;align-items:center;gap:20px;padding:10px 0}
.hero h1{font-weight:800;font-size:clamp(2.6rem,10vw,6rem);line-height:1;letter-spacing:-.02em}
.hero p{max-width:34ch;color:var(--muted);font-size:clamp(1rem,2.6vw,1.2rem)}
.hero .row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:6px}
@keyframes pop{from{opacity:0;transform:translateY(30px) rotate(0) scale(.7)}}

/* auth */
.auth{display:grid;grid-template-columns:1fr;padding:0;overflow:hidden}
.auth-art{display:none;background:#3F72D8;color:#fff;padding:36px 30px;flex-direction:column;justify-content:space-between;min-height:100%}
.auth-art h2{font-weight:500;font-size:2rem;line-height:1.2}
.auth-art{position:relative;overflow:hidden;padding:0}
.auth-art-in{position:sticky;top:0;display:block;height:calc(100vh - 124px);min-height:460px;max-height:100%;padding:36px 30px;box-sizing:border-box}      /* its frame stays inside the window while the card scrolls, so the character is always in view */
.auth-art h2{position:relative;z-index:1}
.auth-char{position:absolute;left:-4%;bottom:-1%;width:114%;max-width:none;height:auto;pointer-events:none;user-select:none}      /* the character bleeds off the bottom-left corner of the panel, as in the original */
.auth-form{padding:28px 22px;display:flex;flex-direction:column;gap:14px}
.tabs{display:flex;border:2px solid var(--line);border-radius:999px;padding:4px;gap:4px}
.tab{flex:1;border:0;background:transparent;border-radius:999px;padding:9px;font-weight:600}
.tab[aria-selected="true"]{background:var(--ink);color:var(--card)}
.field{display:flex;flex-direction:column;gap:5px;font-size:.85rem;font-weight:500}
.field input,.field textarea{font:inherit;font-weight:400;border:2px solid var(--line);border-radius:14px;background:var(--card);color:var(--ink);padding:11px 14px;min-height:46px}
.field input::placeholder,.field textarea::placeholder{color:var(--muted)}
.two{display:grid;grid-template-columns:1fr;gap:12px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:2px solid var(--line);border-radius:999px;background:var(--card);padding:8px 16px;font-size:.9rem;font-weight:500}
.chip[aria-pressed="true"]{background:var(--brand);color:var(--brand-ink)}
.divider{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:.8rem}
.divider::before,.divider::after{content:'';flex:1;height:2px;background:var(--doodle)}
.err{color:var(--danger-ink);font-size:.85rem;font-weight:500;min-height:1.2em}
.social{display:flex;align-items:center;justify-content:center;gap:10px;width:100%}
/* Sign in with Google, Apple or Facebook: three equal buttons in each company's own colours (their guidelines ask for exactly that). */
.social-row{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:8px;width:100%}      /* --cols is set by the page: how many providers are on */
.social-cap{grid-column:1/-1;display:none;text-align:center;font-size:.78rem;color:var(--muted)}      /* shown on a phone, where the divider lines are not */
.social-row .btn.social{min-height:46px;padding:9px 10px;gap:8px;font-size:.9rem;font-weight:600;text-decoration:none;white-space:nowrap;box-shadow:none;border-width:1px}
.social-row .btn.social svg{width:18px;height:18px;flex:none}
.social-row .btn.s-google{background:#fff;color:#3c4043;border-color:#dadce0}
.social-row .btn.s-apple{background:#000;color:#fff;border-color:#000}
.social-row .btn.s-facebook{background:#0866FF;color:#fff;border-color:#0866FF}      /* Meta's current blue: white text on the older #1877F2 is only 4.23:1, and 4.5:1 is the minimum */
.social-row .btn.social:focus-visible{outline:3px solid rgba(58,95,230,.5);outline-offset:2px}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .social-row .btn.s-google{background:#131314;color:#e3e3e3;border-color:#8e918f}
  :root:not([data-theme="light"]) .social-row .btn.s-apple{background:#fff;color:#000;border-color:#fff}
}
:root[data-theme="dark"] .social-row .btn.s-google{background:#131314;color:#e3e3e3;border-color:#8e918f}
:root[data-theme="dark"] .social-row .btn.s-apple{background:#fff;color:#000;border-color:#fff}
.up-social{margin:0 0 6px}
/* ---- Recent voices: a section of the Friends panel (wide screens), and a pill on Home where there is no panel ---- */
.rail-recent{margin:0 0 6px}
.rail-recent-head{display:flex;align-items:center;gap:8px;width:100%;padding:9px 12px;border-radius:14px;background:var(--soft);border:1px solid var(--hair);font:inherit;font-weight:600;font-size:.86rem;color:var(--ink);cursor:pointer;text-align:left}
.rail-recent-head:hover{filter:brightness(.98)}
.rr-ico{display:grid;place-items:center;color:var(--brand)}
.rr-ico svg{width:16px;height:16px}
.rr-text{flex:1;min-width:0;display:grid;line-height:1.25}
.rr-title{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rr-avs{display:inline-flex;align-items:center;padding-left:6px}
.rr-avs span{width:20px;height:20px;border-radius:50%;background:var(--card);border:2px solid var(--soft);display:grid;place-items:center;font-size:.66rem;margin-left:-6px;line-height:1}
.rr-count{font-size:.72rem;font-weight:500;color:var(--muted);white-space:nowrap;display:inline-flex;align-items:center;gap:4px}
.rr-count.live{color:var(--ok);font-weight:700}
.rr-chev{width:16px;height:16px;flex:none;transition:transform .18s;color:var(--muted)}
.rail-recent-head[aria-expanded="true"] .rr-chev{transform:rotate(180deg)}
.rail-recent-list{padding:6px 0 2px}
.rrow.rec .rec-go{flex:none;min-height:34px;padding:0 10px;font-size:.74rem;gap:5px;white-space:nowrap;display:inline-flex;align-items:center}
.reconnect-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px}
.rec-left{font-variant-numeric:tabular-nums}
.rr-all{display:block;margin:4px auto 6px}
.rmsg.rec-add.off{opacity:.5;cursor:not-allowed}
.recent-pill{display:none}
@media (max-width:1099px){
  .home-head{position:relative}
  .recent-pill:not([hidden]){display:inline-flex;align-items:center;gap:6px;position:absolute;top:0;right:0;min-height:34px;padding:0 12px;border-radius:999px;border:1px solid var(--hair);background:var(--card);color:var(--ink);font:inherit;font-weight:600;font-size:.8rem;cursor:pointer;z-index:2}
  .recent-pill svg{width:16px;height:16px;color:var(--brand);flex:none}
}
/* where the greeting row is hidden to give the mood cards the room (a shorter phone, or a phone held sideways) there is no room for the pill either: Recent is then one tap further, on the Friends page */
@media (max-width:720px) and (max-height:760px),(max-height:520px){.recent-pill{display:none !important}}
.guest{background:var(--soft);border-radius:18px;padding:14px;display:flex;flex-direction:column;gap:10px;font-size:.88rem}
.check{display:flex;gap:10px;align-items:flex-start}
.check input{width:20px;height:20px;margin-top:2px;accent-color:var(--brand)}

/* gender */
.gcards{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;max-width:760px;margin:0 auto}
.gcard{border:2px solid var(--line);background:var(--card);border-radius:22px;padding:12px 12px 14px;display:flex;flex-direction:column;gap:10px;align-items:center;font-weight:600;box-shadow:0 6px 16px var(--shadow);transition:transform .15s}
.gcard:hover{transform:translateY(-3px)}
.gcard.no-art::before{content:"";width:92px;aspect-ratio:817/857;border:2.5px solid #0B0B14;border-radius:16px;background:linear-gradient(180deg,#d9d6ee,#9a93d1)}      /* only if a picture cannot load */
.screen[data-screen="gender"] .head h1{white-space:nowrap;font-size:min(5.2vw,2rem)}      /* the heading stays on one line at every width: about 17 times its font size wide, so it fits its box at 5.2% of the screen */
.gcard[aria-pressed="true"]{background:var(--soft);transform:scale(1.03)}
.gcard .g-art{display:block;width:100%;height:auto;aspect-ratio:817/857;object-fit:cover;object-position:50% 25%;border:2.5px solid #0B0B14;border-radius:16px;user-select:none;pointer-events:none}

/* mood */
.mood-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:760px;margin:0 auto}
.mood-tile{flex:0 0 calc((100% - 30px)/4);border:2px solid var(--line);border-radius:16px;background:var(--card);padding:6px 6px 5px;display:flex;flex-direction:column;align-items:center;gap:4px;box-shadow:0 5px 12px var(--shadow);transition:transform .15s}
.mood-tile:hover{transform:translateY(-4px) rotate(-1.5deg)}
.mood-tile[aria-pressed="true"]{outline:4px solid var(--brand);outline-offset:2px}
.face{width:100%;aspect-ratio:1;border:2px solid var(--line);border-radius:12px;display:grid;place-items:center;font-size:clamp(1.7rem,6.4vw,3rem);background:linear-gradient(180deg,var(--g1),var(--g2))}
.mood-tile span{font-size:.72rem;font-weight:500}

/* mood match */
.chiprow{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:6px}
.pill{display:inline-flex;align-items:center;gap:8px;border:2px solid var(--line);border-radius:999px;padding:6px 14px;font-size:.85rem;font-weight:500;background:var(--card)}
.pill button{border:0;background:none;padding:0;text-decoration:underline;font-size:.8rem}
.opts{display:flex;flex-direction:column;gap:14px;max-width:560px;margin:14px auto 0}
.opt{display:flex;gap:14px;align-items:center;text-align:left;border:2px solid var(--line);border-radius:22px;background:var(--card);padding:10px 14px 10px 10px;box-shadow:0 6px 14px var(--shadow);transition:transform .15s}
.opt:hover{transform:translateY(-3px)}
.opt .face{width:84px;flex:none;border-radius:14px}
.opt-icon{flex:none;width:84px;aspect-ratio:1;border:2.5px solid #0B0B14;border-radius:14px;overflow:hidden;background:var(--art-bg,linear-gradient(180deg,#d9b0ff,#6b0fb5));display:block}
.opt-icon img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;user-select:none}
.opt-icon.is-mood img{width:auto;max-width:100%;margin:0 auto;object-fit:contain;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%)}      /* the picture's own gradient meets the box gradient with no seam */
.opt-icon.no-art{display:grid;place-items:center;font-size:2rem}
.opt h3{font-weight:700;font-size:1.25rem}
.opt p{font-size:.8rem;color:var(--muted)}
.opt .meet{font-size:.78rem;font-weight:600;margin-top:4px}
.deeper{max-width:560px;margin:16px auto 0;background:var(--soft);border-radius:18px;padding:12px 14px;font-size:.85rem}

/* finding */
.finding{display:grid;gap:26px;text-align:center;justify-items:center;padding:34px 22px}
.rings{position:relative;width:150px;height:150px;display:grid;place-items:center}
.rings i{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;border-radius:50%;border:3px solid var(--brand);opacity:0;animation:ring 2.4s ease-out infinite}
.rings i:nth-child(2){animation-delay:.8s}.rings i:nth-child(3){animation-delay:1.6s}
@keyframes ring{from{transform:scale(.4);opacity:.9}to{transform:scale(1.3);opacity:0}}
.rings .core{width:86px;height:86px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;font-size:2.6rem;background:linear-gradient(180deg,var(--g1),var(--g2))}
.bar{width:min(420px,100%);height:14px;border:2px solid var(--line);border-radius:999px;overflow:hidden}
.bar b{display:block;height:100%;width:0;background:var(--brand);transition:width .3s}
.steps{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;list-style:none;padding:0;margin:0}
.steps li{border:2px solid var(--line);border-radius:999px;padding:6px 14px;font-size:.8rem;font-weight:500;opacity:.45}
.steps li.on{opacity:1;background:var(--brand);color:var(--brand-ink)}
.steps li.done{opacity:1;background:var(--soft)}
.few{background:var(--soft);border-radius:20px;padding:18px;display:grid;gap:12px;max-width:460px;width:100%}
.few .btn{width:100%}

/* match found */
.found{display:grid;gap:22px;text-align:center;justify-items:center;padding:34px 22px}
.partner{display:flex;align-items:center;gap:16px;border:2px solid var(--line);border-radius:22px;padding:12px 18px 12px 12px;background:var(--soft)}
.partner .face{width:76px;flex:none}
.partner h3{font-weight:700;font-size:1.2rem;text-align:left}
.partner p{font-size:.82rem;color:var(--muted);text-align:left}
.why{max-width:42ch;font-size:.95rem}
.found-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.confetti{position:fixed;top:-20px;width:10px;height:10px;border-radius:2px;z-index:5;pointer-events:none;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg);opacity:.8}}

/* call */
.call{padding:0;overflow:hidden}
.call-main{display:contents}      /* a wrapper that changes nothing, except on a laptop (web.css), where the call window and the chat panel become two windows */
.call-chat-title{display:none}
.call-top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 20px;background:var(--brand);color:var(--brand-ink);font-weight:500;font-size:.9rem;flex-wrap:wrap}
.timer{display:inline-flex;align-items:center;gap:8px;background:rgba(0,0,0,.25);padding:4px 12px;border-radius:999px;font-variant-numeric:tabular-nums;font-weight:600}
.timer i{width:9px;height:9px;border-radius:50%;background:#FF5C6C;animation:blink 1.2s infinite}
@keyframes blink{50%{opacity:.25}}
.voices{display:grid;grid-template-columns:1fr;gap:14px;padding:20px}
.voice{border:2px solid var(--line);border-radius:22px;padding:16px;display:flex;flex-direction:column;align-items:center;gap:10px;background:var(--card);transition:background .2s,transform .2s}
.voice.live{background:var(--soft);transform:scale(1.015)}
.voice .face{width:84px}
.voice h3{font-size:1.05rem;font-weight:700}
.voice small{color:var(--muted);min-height:1.3em;font-size:.8rem}
.wave{display:flex;align-items:center;gap:3px;height:46px}
.wave span{width:5px;height:12%;border-radius:3px;background:var(--brand);transition:height .11s}
.prompt{margin:0 20px;border:2px dashed var(--line);border-radius:18px;padding:12px 16px;display:flex;gap:12px;align-items:center;justify-content:space-between;font-size:.92rem}
.prompt button{border:2px solid var(--line);background:var(--card);border-radius:999px;padding:5px 14px;font-size:.8rem;font-weight:600;white-space:nowrap}
.controls{display:flex;justify-content:center;align-items:center;gap:12px;padding:20px;flex-wrap:wrap}
.round{width:56px;height:56px;border-radius:50%;border:2px solid var(--line);background:var(--card);display:grid;place-items:center;padding:0}
.round svg{width:24px;height:24px}
.convo-active,.ch-av,.ch-more{display:none}      /* shown on phones in phone.css */.ch-menu{display:contents}.msg-day{display:none}      /* the Active now strip, the chat avatar, the More button and day separators are for phones; a laptop keeps Block and Report beside Call */
.round .ri{display:contents}.round .rl{display:none}      /* the label under a round control is for phones only */
.call-art{display:none}      /* the partner artwork in the call is for phones only */
.round[aria-pressed="true"]{background:var(--ink);color:var(--card)}
.call-foot{text-align:center;color:var(--muted);font-size:.78rem;padding:0 20px 18px}

/* feedback */
.fb{display:grid;gap:22px;max-width:640px;margin:0 auto}
.fb h2{font-size:1.05rem;font-weight:700;margin-bottom:10px}
.stars{display:flex;gap:6px}
.star{border:0;background:none;padding:2px;width:46px;height:46px}
.star svg{width:100%;height:100%;fill:none;stroke:var(--ink);stroke-width:1.8;transition:fill .12s,transform .12s}
.star[aria-pressed="true"] svg,.star.hot svg{fill:#FFD439;transform:scale(1.08)}
.vibes{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.vibe{border:2px solid var(--line);border-radius:16px;padding:12px;font-weight:600;background:var(--card);display:flex;gap:8px;align-items:center;justify-content:center}
.vibe[aria-pressed="true"]{background:var(--ink);color:var(--card)}
.vibe.rep[aria-pressed="true"]{background:var(--danger);color:#fff;border-color:var(--danger)}
.fb textarea{width:100%;min-height:96px;resize:vertical}
.after{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:20px}
.thanks{text-align:center;display:grid;gap:10px;padding:10px 0}
.fb-person,.fb-hint{display:none}      /* the person at the top and the hint under the stars are for phones (phone.css) */

/* modal + toast + dev bar */
.overlay{position:fixed;top:0;right:0;bottom:0;left:0;inset:0;background:rgba(5,5,15,.6);z-index:20;display:grid;place-items:center;padding:16px;overflow:auto}
.modal{background:var(--card);border:2px solid var(--line);border-radius:24px;padding:24px 22px;width:min(460px,100%);display:grid;gap:14px}
.modal h2{font-size:1.3rem;font-weight:800}
.age-sub{font-size:.9rem;color:var(--muted);margin:0}
.radio{display:flex;gap:10px;align-items:center;border:2px solid var(--line);border-radius:14px;padding:10px 14px;font-size:.92rem}
.radio input{accent-color:var(--brand);width:18px;height:18px}
.actions{display:flex;gap:10px;flex-wrap:wrap}
.actions .btn{flex:1}
.empty-cta{display:none}      /* the next-step button in an empty list is for phones (phone.css) */
#toast{position:fixed;left:50%;bottom:calc(76px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);background:var(--ink);color:var(--card);padding:10px 20px;border-radius:999px;font-size:.88rem;font-weight:500;opacity:0;transition:.25s;z-index:30;pointer-events:none;max-width:92vw;text-align:center}
#toast.show{opacity:1;transform:translate(-50%,0)}
.dev{position:fixed;left:50%;bottom:calc(12px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:25;display:flex;gap:8px;align-items:center;background:var(--ink);color:var(--card);border-radius:999px;padding:6px 10px;font-size:.78rem;box-shadow:0 8px 24px var(--shadow);max-width:96vw;flex-wrap:wrap;justify-content:center}
.dev select,.dev button{font:inherit;font-size:.78rem;background:transparent;color:inherit;border:1px solid currentColor;border-radius:999px;padding:3px 10px}
.dev option{color:#000}
.dev label{display:flex;align-items:center;gap:5px}


.hub{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;align-items:center;min-height:44px;margin-left:56px}
.btn.mini{padding:6px 14px;min-height:36px;font-size:.8rem;font-weight:600;gap:6px}
.btn:disabled{opacity:.6;cursor:default}
.badge{display:inline-grid;place-items:center;min-width:20px;height:20px;border-radius:10px;background:var(--ok);color:#fff;font-size:.7rem;padding:0 5px}
.head.tall{padding-top:62px}
.subnav{max-width:480px;margin:0 auto 18px}
.list{display:grid;gap:10px;max-width:680px;margin:0 auto;width:100%}
.item{display:flex;gap:12px;align-items:center;border:2px solid var(--line);border-radius:20px;padding:10px 12px;background:var(--card);flex-wrap:wrap}
.item .grow{flex:1;min-width:150px;display:flex;flex-direction:column}
.item small{color:var(--muted);font-size:.78rem}
.item .btns{display:flex;gap:6px;flex-wrap:wrap}
.face.s{width:52px;flex:none;border-radius:12px;font-size:1.6rem}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--ok);margin-left:6px}
.dot.off{background:var(--muted);opacity:.5}
.sect{font-size:1rem;font-weight:700;margin:4px auto 10px;max-width:680px}
.note br.nl{display:none}      /* the line break before the links is for phones only */
.empty{text-align:center;color:var(--muted);padding:24px 14px;border:2px dashed var(--line);border-radius:20px;font-size:.9rem}
.banner{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:var(--soft);border:2px solid var(--line);border-radius:18px;padding:12px 16px;max-width:640px;margin:0 auto 18px;font-size:.9rem}
.games{margin:14px 20px 0;border:2px solid var(--line);border-radius:20px;padding:14px;display:grid;gap:12px;justify-items:center;background:var(--card)}
.g-head{display:flex;gap:10px;align-items:center;justify-content:space-between;width:100%;flex-wrap:wrap}
.g-head .tabs{flex:1;min-width:230px}
#gBody{display:grid;gap:12px;justify-items:center;width:100%}
.g-msg{font-size:.9rem;font-weight:500;text-align:center;min-height:1.4em}
.board{display:grid;grid-template-columns:repeat(3,64px);gap:8px;justify-content:center}
.cell{width:64px;height:64px;border:2px solid var(--line);border-radius:14px;background:var(--card);font-size:1.7rem;font-weight:800;display:grid;place-items:center;padding:0}
.cell:disabled{cursor:default;opacity:1;color:var(--ink)}
.wyr{display:grid;gap:8px;width:100%;max-width:420px}
.wyr .btn{border-radius:18px;text-align:center}
.set{display:grid;gap:20px;max-width:640px;margin:0 auto}
.set-nav{display:none}      /* the Settings side menu is for laptops (web.css) */
.set h2{font-size:1rem;font-weight:700;margin-bottom:8px}
.set .hint{font-size:.8rem;color:var(--muted)}
.avatars .chip{font-size:1.4rem;padding:6px 12px}


.badge.new{background:var(--brand);color:var(--brand-ink)}
.chat{margin:14px 20px 0;border:2px solid var(--line);border-radius:20px;padding:12px;display:grid;gap:10px;background:var(--card)}
.msgs{display:flex;flex-direction:column;gap:8px;max-height:220px;overflow-y:auto;padding:4px}
.msgs.tall{max-height:min(52vh,460px);min-height:260px}
.msg{max-width:78%;padding:8px 13px;border-radius:18px;font-size:.92rem;display:flex;flex-direction:column;gap:2px;overflow-wrap:anywhere}
.msg time{font-size:.68rem;opacity:.7}
.msg.me{align-self:flex-end;background:var(--brand);color:var(--brand-ink);border-bottom-right-radius:6px}
.msg.them{align-self:flex-start;background:var(--soft);border:2px solid var(--line);border-bottom-left-radius:6px}
.msg.typing{color:var(--muted);font-size:.8rem;animation:blink 1.2s infinite}
.msg.sys{align-self:center;background:none;color:var(--muted);font-size:.78rem;text-align:center;max-width:92%;padding:4px}
.composer{display:flex;gap:8px}
.composer input{flex:1;min-width:0;font:inherit;border:2px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink);padding:10px 16px;min-height:44px}
.composer input::placeholder{color:var(--muted)}
.support{background:var(--soft);border:2px solid var(--line);border-radius:16px;padding:10px 14px;font-size:.84rem}
.chat .hint,.chatcard .hint{font-size:.74rem;color:var(--muted);text-align:center}
.chat-head{display:flex;align-items:center;gap:12px;padding:0 0 14px 56px;min-height:44px;flex-wrap:wrap}
.chat-head .grow{flex:1;min-width:120px;display:flex;flex-direction:column}
.chat-head .btns{display:flex;gap:6px;flex-wrap:wrap}
.chatcard{max-width:720px;margin:0 auto;display:grid;gap:12px}
.round.has-dot{position:relative}
.round.has-dot::after{content:'';position:absolute;top:3px;right:3px;width:13px;height:13px;border-radius:50%;background:var(--danger);border:2px solid var(--card)}


.plus-tag{display:inline-block;background:linear-gradient(90deg,#FFD439,#FF7A00);color:#0B0B14;border:2px solid var(--line);border-radius:999px;padding:0 12px;font-size:.74rem;font-weight:700;margin:4px 0 6px}
.plans{display:grid;grid-template-columns:1fr;gap:18px;max-width:780px;margin:8px auto 0}
.plan{position:relative;text-align:left;border:2px solid var(--line);border-radius:22px;background:var(--card);padding:18px 16px 14px;display:flex;flex-direction:column;gap:3px;box-shadow:0 6px 14px var(--shadow)}
.plan[aria-pressed="true"]{background:var(--soft);outline:4px solid var(--brand);outline-offset:2px}
.plan .nm{font-weight:600}
.plan .pr{font-size:2.1rem;font-weight:800;line-height:1.1}
.plan .pd{font-size:.8rem;color:var(--muted)}
.plan .sv{font-size:.8rem;font-weight:600;color:var(--ok-ink)}
.plan .tg{position:absolute;top:-13px;right:14px;background:var(--brand);color:var(--brand-ink);border:2px solid var(--line);border-radius:999px;padding:1px 12px;font-size:.72rem;font-weight:600}
.banner.on{background:#DFF8E8;color:#0B3B1F}
:root[data-theme="dark"] .banner.on{background:#13392a;color:#d9ffe9}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .banner.on{background:#13392a;color:#d9ffe9}}
.perks{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.perks li{display:flex;gap:10px;align-items:flex-start;font-size:.92rem}
.perks svg{width:20px;height:20px;flex:none;color:var(--ok-ink);margin-top:2px}
.freebox{background:var(--soft);border-radius:18px;padding:14px 16px;font-size:.88rem}
.pay-row{display:flex;gap:10px;justify-content:space-between;align-items:center;border:2px solid var(--line);border-radius:16px;padding:10px 14px;flex-wrap:wrap;font-size:.88rem}
.pay-row small{color:var(--muted);display:block}
.tag-ok,.tag-bad{border-radius:999px;padding:1px 10px;font-size:.72rem;font-weight:600;border:2px solid var(--line)}
.tag-ok{background:#C8F2D8;color:#0B3B1F}.tag-bad{background:#FFD5DA;color:#5a0b16}
.modal.pay{width:min(480px,100%);max-height:92vh;overflow:auto}
.modal .hint{font-size:.78rem;color:var(--muted)}
.pay-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.pay-top small{color:var(--muted)}
.amt{font-size:1.7rem;font-weight:800}
.demo{background:#FFF4CC;color:#4a3b00;border:2px dashed #b38600;border-radius:12px;padding:6px 12px;font-size:.8rem;font-weight:500}
.paytabs .tab{font-size:.78rem;padding:8px 2px}
.spin{width:46px;height:46px;border-radius:50%;border:5px solid var(--soft);border-top-color:var(--brand);animation:spin 1s linear infinite;margin:12px auto}
@keyframes spin{to{transform:rotate(360deg)}}
.pstate{display:grid;gap:12px;text-align:center;justify-items:center}
.rcpt{display:grid;gap:6px;border:2px solid var(--line);border-radius:16px;padding:12px 14px;font-size:.86rem;width:100%;text-align:left}
.rcpt div{display:flex;justify-content:space-between;gap:12px}
.rcpt span:first-child{color:var(--muted)}
.okmark{width:64px;height:64px;border-radius:50%;background:var(--ok);color:#fff;display:grid;place-items:center}
.okmark svg{width:34px;height:34px}
.badmark{background:var(--danger)}
@media (min-width:760px){.plans{grid-template-columns:repeat(3,1fr)}}


.timechip{display:inline-flex;align-items:center;gap:10px;border:2px solid var(--line);border-radius:999px;background:var(--card);padding:6px 14px;font-size:.82rem;font-weight:500;margin-top:10px}
.tbar{width:70px;height:9px;border:2px solid var(--line);border-radius:999px;overflow:hidden;display:inline-block}
.tbar i{display:block;height:100%;background:var(--brand)}
.tbar.low i{background:var(--danger)}
.fpill{background:rgba(0,0,0,.25);padding:4px 12px;border-radius:999px;font-weight:600;font-size:.85rem;font-variant-numeric:tabular-nums}
.fpill.warn{background:var(--danger);color:#fff}
.grace{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:#FFE3B8;color:#3b2500;padding:10px 20px;font-size:.88rem;font-weight:500}

@media (min-width:760px){
  .card{padding:36px 40px}
  .mood-tile{flex-basis:calc((100% - 50px)/6)}
  .gcards{grid-template-columns:repeat(5,1fr);max-width:960px}
  .auth{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}      /* minmax(0,..): a column may shrink below its content, so the form is never wider than the card */
  .auth-art{display:flex}
  .auth-form{padding:36px 40px}
  .two{grid-template-columns:1fr 1fr}
  .voices{grid-template-columns:1fr 1fr}
  .vibes{grid-template-columns:repeat(4,1fr)}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

.offline{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;background:var(--danger);color:#fff;text-align:center;padding:8px;font-size:.85rem;font-weight:600;z-index:40}
.sr-only{position:absolute;left:-9999px}

.hint-line{font-size:.78rem;color:var(--muted);margin:0}
#startHint{max-width:50ch;margin-left:auto;margin-right:auto;font-size:.8rem;color:var(--muted)}      /* the vertical spacing comes from the landing rules (laptop and phone) */
#landErr:empty{display:none}      /* the reserved error line must not push the layout around when there is no error */
.hint-line a,.guest a{color:var(--brand)}

.grace.net{background:#FFD6D9;color:#5a0b16}

h1[tabindex="-1"]:focus,h2[tabindex="-1"]:focus{outline:none}   /* headings are focused for screen readers; no ring needed */
.linkbtn{background:none;border:0;color:var(--brand);text-decoration:underline;font-size:.8rem;padding:4px;cursor:pointer}
.banners{display:grid;gap:8px;max-width:560px;margin:10px auto 0}
.banners .banner{margin:0;max-width:none}
.badge-pill{display:inline-block;border:2px solid var(--line);border-radius:999px;padding:1px 10px;font-size:.72rem;font-weight:600;background:var(--card);margin-top:4px}
.breathe{width:46px;height:46px;border-radius:50%;background:var(--brand);margin:8px auto;animation:breathe 8s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(.7);opacity:.55}50%{transform:scale(1.15);opacity:1}}
.ndot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#2ecc71;margin-right:6px}
.ndot.fair{background:#f5a524}.ndot.poor{background:#e5384f}
.btn.uncomf{border-color:var(--danger);color:var(--danger-ink)}
.meter{border:2px solid var(--line);border-radius:999px;overflow:hidden}
.meter i{display:block;height:100%;background:var(--brand);transition:width .08s}
.weekrow{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;max-width:640px;margin:0 auto}
.weekday{border:2px solid var(--line);border-radius:14px;padding:8px 2px;text-align:center;font-size:.7rem;display:grid;gap:4px;justify-items:center}
.weekday .face{width:80%;border-radius:10px;font-size:1.3rem}
.weekday.empty{color:var(--muted)}
.weekday.empty .face{opacity:.45}      /* only the face fades: dimming the whole day made its label unreadable */
.intentbox{margin:8px auto 0}
.item .badge-pill{margin-left:6px}

/* =====================================================================
   App shell and home screen (web first). Top bar on desktop, bottom tabs on phones.
   ===================================================================== */
.appbar{position:sticky;top:0;z-index:15;background:var(--card);border-bottom:2px solid var(--line)}
.appbar[hidden]{display:none}
.appbar-in{max-width:1180px;margin:0 auto;height:64px;padding:0 18px;display:flex;align-items:center;gap:18px}
.brand{display:flex;align-items:center;gap:10px;border:0;background:none;padding:0;font-weight:800;font-size:1.22rem;letter-spacing:-.01em;color:var(--ink)}
.logo-ring{width:28px;height:28px;border-radius:50%;flex:none;background:conic-gradient(#ff5c8a,#ffd439,#3fa46a,#4b73ff,#8e5be8,#ff5c8a);-webkit-mask:radial-gradient(circle,transparent 8px,#000 9px);mask:radial-gradient(circle,transparent 8px,#000 9px)}
.mainnav{display:flex;gap:4px;margin-left:6px;flex:1;min-width:0}
.navbtn{position:relative;display:inline-flex;align-items:center;gap:8px;border:0;background:transparent;border-radius:999px;padding:9px 16px;min-height:44px;font-weight:600;font-size:.92rem;color:var(--muted);transition:background .15s,color .15s}
.navbtn svg{width:20px;height:20px;flex:none}
.navbtn:hover{background:var(--soft);color:var(--ink)}
.navbtn[aria-current="page"]{background:var(--ink);color:var(--card)}
.navbtn .badge{margin-left:2px}
.appbar-right{display:flex;align-items:center;gap:10px;flex:none}
.appbar .timechip{margin:0;min-height:40px;padding:5px 14px}
.timechip .plusword{background:linear-gradient(90deg,#FFD439,#FF7A00);color:#0B0B14;border-radius:999px;padding:0 9px;font-size:.74rem}
.me-btn{display:flex;align-items:center;gap:8px;border:2px solid var(--line);background:var(--card);border-radius:999px;padding:3px 14px 3px 3px;min-height:40px;font-weight:600;font-size:.88rem;color:var(--ink)}
.me-av{width:32px;height:32px;border-radius:50%;background:var(--soft);display:grid;place-items:center;font-size:1.15rem;flex:none}
.me-av.lg{width:52px;height:52px;font-size:1.7rem;border:2px solid var(--line)}
body.has-appbar .app{place-items:start center;padding-top:22px}
.screen[data-screen="friends"] .back,.screen[data-screen="history"] .back,.screen[data-screen="settings"] .back,
.screen[data-screen="recharge"] .back,.screen[data-screen="week"] .back,.screen[data-screen="invite"] .back{display:none}
body.has-appbar .head.tall{padding-top:22px}

/* ---------- home ---------- */
.screen[data-screen="mood"]{max-width:1180px}
.home{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start}
.home-main{background:var(--card);border:2px solid var(--line);border-radius:24px;box-shadow:0 8px 24px var(--shadow);padding:24px 26px 18px}
.home-head{padding:0 0 16px}
.home-head h1{margin:0;font-size:clamp(1.55rem,2.4vw,2.1rem)}
.lede{margin:6px 0 0;color:var(--muted);font-size:.95rem}
.home-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px solid var(--hair)}
.home-foot .linkbtn{padding:4px 0;font-size:.88rem}
.safe{font-size:.8rem;color:var(--muted)}
.safe::before{content:'';display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ok);margin-right:7px}

.home-side{display:grid;gap:14px}
.panel{background:var(--card);border:2px solid var(--line);border-radius:20px;padding:16px 18px;box-shadow:0 6px 18px var(--shadow)}
.panel[hidden]{display:none}
.ptitle{margin:0 0 10px;font-size:.72rem;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);font-weight:700}
.greet-top{display:flex;align-items:center;gap:14px}
.hi{margin:0;font-size:1.4rem;font-weight:600;line-height:1.2}
.greet .plus-tag{margin:4px 0 0}
.greet .timechip{margin:12px 0 0;min-height:36px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0 0 12px;font-size:.88rem}
.kv dt{color:var(--muted)}
.kv dd{margin:0;font-weight:600}
.invitebox{background:linear-gradient(135deg,var(--soft),var(--card))}
.invitebox p{margin:0 0 12px;font-size:.9rem}
.home-side .banners{max-width:none;margin:0;display:grid;gap:10px}
.home-side .banners:empty{display:none}
.home-side .banner{margin:0;max-width:none;border-radius:16px;padding:12px 14px;font-size:.86rem;box-shadow:0 6px 18px var(--shadow)}

/* tablet: one column, status panels in two columns underneath */
@media (max-width:1020px){
  .home{grid-template-columns:1fr}
  .home-side{grid-template-columns:repeat(2,minmax(0,1fr))}
  .home-side .banners{grid-column:1/-1}
  .navbtn{padding:9px 12px}
  .navbtn .lbl{display:none}
  .me-btn .nm{display:none}
  .me-btn{padding:3px}
}
/* phone: bottom tab bar, compact top bar, 4 x 4 mood grid fully visible */
@media (max-width:720px){
  .appbar-in{height:56px;gap:10px;padding:0 12px}
  .mainnav{position:fixed;left:0;right:0;bottom:0;margin:0;gap:0;justify-content:space-around;background:var(--card);border-top:2px solid var(--line);padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px));z-index:15}
  .navbtn{flex:1;flex-direction:column;gap:2px;padding:5px 4px;min-height:52px;border-radius:14px;font-size:.68rem}
  .navbtn .lbl{display:inline}
  .navbtn .badge{position:absolute;top:2px;right:calc(50% - 22px)}
  .appbar-right{margin-left:auto}
  .home-main{padding:16px 14px 12px;border-radius:20px}
  .home-head{padding-bottom:12px}
  .lede{font-size:.88rem}
  .screen[data-screen="mood"] .mood-grid{gap:8px}
  .screen[data-screen="mood"] .mood-tile{flex-direction:column;justify-content:center;gap:4px;padding:6px 4px 5px;min-height:0;text-align:center}
  .screen[data-screen="mood"] .face{width:100%;height:auto;aspect-ratio:1;font-size:clamp(1.5rem,7.4vw,2.2rem)}
  .screen[data-screen="mood"] .mood-tile span{font-size:.68rem}
  .home-foot{justify-content:center;text-align:center}
  .home-side{grid-template-columns:1fr}
  .app{padding:14px 12px 96px}
}

/* the page is exactly one screen tall (top bar included); no accidental scrolling */
body.has-appbar .app{min-height:calc(100vh - 64px);padding-bottom:28px}
@media (max-width:720px){body.has-appbar .app{min-height:calc(100vh - 56px);padding-bottom:96px}}

/* ---- compact status column: everything fits on a laptop screen ---- */
.app{grid-template-columns:minmax(0,1fr)}
.screen{min-width:0}
.home-side{gap:12px}
.panel{padding:14px 16px}
.greet-top{gap:12px}
.me-av.lg{width:44px;height:44px;font-size:1.45rem}
.hi-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hi{font-size:1.2rem}
.greet .plus-tag{margin:0}
.greet .timechip{margin:10px 0 0}
.ptitle-row{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:8px}
.ptitle-row .ptitle{margin:0}
.ptitle-row .linkbtn{font-size:.82rem;padding:0}
.kv{margin:0;gap:4px 12px;font-size:.85rem}
.invitebox{display:flex;align-items:center;justify-content:space-between;gap:12px}
.invitebox .ptitle{margin-bottom:4px}
.invitebox p{margin:0;font-size:.84rem;line-height:1.35}
.invitebox .btn{flex:none}
.home-side .banner{padding:10px 12px;font-size:.84rem;gap:8px}
@media (max-width:1020px){.invitebox{grid-column:auto}}
.app{box-sizing:border-box}
body.has-appbar .app{min-height:calc(100vh - 66px)}
@media (max-width:720px){body.has-appbar .app{min-height:calc(100vh - 58px)}}

/* mid-width screens: slightly smaller icon and text so long mood names (Confession) never touch the edge */
@media (min-width:721px) and (max-width:1180px){
  .screen[data-screen="mood"] .mood-tile{padding:8px 10px;gap:9px}
  .screen[data-screen="mood"] .face{width:38px;height:38px;font-size:1.25rem}
  .screen[data-screen="mood"] .mood-tile span{font-size:.84rem}
}
@media (min-width:1021px) and (max-width:1180px){
  .home{grid-template-columns:minmax(0,1fr) 300px;gap:16px}
  .home-main{padding:20px 18px 16px}
}

/* =====================================================================
   Version 2 of the shell: three main tabs, bell, account menu,
   emotion-only home with a friends list on the side, and a profile page.
   ===================================================================== */
.appbar-in{position:relative}
.me-tab{display:none}
.iconbtn{position:relative;width:42px;height:42px;border-radius:50%;border:2px solid var(--line);background:var(--card);display:grid;place-items:center;color:var(--ink);padding:0}
.iconbtn svg{width:20px;height:20px}
.notif-dot{position:absolute;top:7px;right:8px;width:10px;height:10px;border-radius:50%;background:var(--danger);border:2px solid var(--card)}
.me-btn svg{width:16px;height:16px;flex:none;margin-left:-2px}
.me-btn.active{background:var(--ink);color:var(--card)}
.pop{position:absolute;top:calc(100% + 8px);right:18px;width:340px;max-width:calc(100vw - 24px);background:var(--card);border:2px solid var(--line);border-radius:18px;box-shadow:0 14px 34px var(--shadow);padding:12px;z-index:25}
.pop[hidden]{display:none}
.pop.menu{width:240px;padding:6px}
.pop.menu button{display:block;width:100%;text-align:left;border:0;background:none;border-radius:12px;padding:11px 14px;font-weight:500;font-size:.92rem;color:var(--ink);min-height:44px}
.pop.menu button:hover,.pop.menu button:focus-visible{background:var(--soft)}
.pop.menu hr{border:0;border-top:1px solid var(--hair);margin:4px 8px}
.notice{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 4px;font-size:.88rem;border-top:1px solid var(--hair)}
.notice:first-child{border-top:0}
.notice.hot b{color:var(--brand)}
#noticePop .ptitle{margin-bottom:4px}

/* ---- home: just the question, plus friends on the side ---- */
.home{grid-template-columns:minmax(0,1fr) 320px;align-items:stretch}
.rail{position:relative;min-height:0}
.rail-in{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;display:flex;flex-direction:column;background:var(--card);border:2px solid var(--line);border-radius:24px;box-shadow:0 8px 24px var(--shadow);padding:16px 12px 10px}
.rail-head{display:flex;justify-content:space-between;align-items:baseline;padding:0 8px 8px}
.rail-head .ptitle{margin:0}
.rail-count{font-size:.8rem;font-weight:600;color:var(--muted)}
.rail-count.on{color:var(--ok-ink)}
.rail-req{margin:0 4px 6px;border:2px solid var(--line);background:var(--soft);border-radius:12px;padding:8px 12px;font-weight:600;font-size:.84rem;text-align:left;color:var(--ink)}
.rail-req[hidden]{display:none}
.rail-list{flex:1;overflow:auto;min-height:0;padding:0 2px}
.rail-label{margin:10px 8px 4px;font-size:.68rem;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);font-weight:700}
.rrow{display:flex;align-items:center;gap:4px;border-radius:14px}
.rrow:hover{background:var(--soft)}
.rmain{flex:1;min-width:0;display:flex;align-items:center;gap:10px;border:0;background:none;padding:7px 8px;text-align:left;color:var(--ink);border-radius:14px;min-height:50px}
.rav{position:relative;width:38px;height:38px;border-radius:50%;background:var(--soft);display:grid;place-items:center;font-size:1.25rem;flex:none}
.pdot{position:absolute;right:-1px;bottom:-1px;width:12px;height:12px;border-radius:50%;background:#B8BCCB;border:2px solid var(--card)}
.pdot.on{background:var(--ok)}
.rtxt{display:grid;min-width:0}
.rtxt b{font-size:.92rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rtxt small{font-size:.74rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rrow.off .rtxt b{color:var(--muted)}
.rcall{flex:none;width:38px;height:38px;border-radius:50%;border:2px solid var(--line);background:var(--card);display:grid;place-items:center;padding:0;color:var(--ok-ink);margin-right:6px}
.rcall svg{width:18px;height:18px}
.rcall:hover{background:var(--ok);color:#fff}
.rail-empty{padding:14px 10px;color:var(--muted);font-size:.88rem;line-height:1.5}
.rail-foot{padding:8px 10px 2px;border-top:1px solid var(--hair);text-align:center}
.rail-foot .linkbtn{font-size:.84rem}
.phone-friends{display:none;text-align:center;margin:12px 0 0;font-size:.88rem;color:var(--muted)}

/* ---- profile and activity ---- */
.screen[data-screen="profile"]{max-width:1180px}
.profile{display:grid;grid-template-columns:320px minmax(0,1fr);gap:20px;align-items:start}
.pcol,.acol{display:grid;gap:14px;min-width:0}
.pcard{text-align:center;padding:22px 18px}
.me-av.xl{width:84px;height:84px;font-size:2.8rem;border:2px solid var(--line);margin:0 auto}
.pname{margin:12px 0 6px;font-size:1.55rem;font-weight:800;line-height:1.15;overflow-wrap:anywhere}
.pbadges{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;min-height:6px}
.pbadges .plus-tag,.pbadges .badge-pill{margin:0}
.pmeta{margin:10px 0 0;color:var(--muted);font-size:.84rem}
.sub-h{margin:0 0 8px;font-size:.85rem;font-weight:600}
.links{display:flex;gap:8px;flex-wrap:wrap}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.stat{background:var(--card);border:2px solid var(--line);border-radius:18px;padding:14px 16px;box-shadow:0 6px 16px var(--shadow)}
.stat b{display:block;font-size:1.6rem;font-weight:800;line-height:1.1}
.stat span{display:block;font-size:.78rem;color:var(--muted);margin-top:4px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.weekrow.mini{gap:5px;max-width:none}
.weekrow.mini .weekday{padding:5px 2px;font-size:.62rem;border-width:2px;border-radius:12px;gap:3px}
.weekrow.mini .weekday .face{width:78%;height:auto;aspect-ratio:1;font-size:1.05rem;border-radius:8px}
.dbars{display:flex;align-items:flex-end;gap:8px;height:112px}
.dbar{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px;min-width:0}
.dbar i{display:block;width:100%;max-width:34px;background:var(--brand);border-radius:7px 7px 3px 3px;min-height:4px;border:0}
.dbar i.zero{background:var(--hair2)}
.dbar span{font-size:.66rem;color:var(--muted)}
.progress{height:10px;border:2px solid var(--line);border-radius:999px;overflow:hidden;margin:10px 0 6px}
.progress i{display:block;height:100%;background:var(--brand)}
#pListener p{margin:0;font-size:.88rem}

/* ---- breakpoints ---- */
@media (max-width:1020px){
  .navbtn .lbl{display:inline}
  .home{grid-template-columns:1fr}
  .rail-in{position:static;max-height:340px}
  .profile{grid-template-columns:1fr}
  .pcol{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
  .pcard{grid-column:1/-1;display:grid;justify-items:center}
}
@media (max-width:900px){.me-btn .nm{display:none}.me-btn{padding:3px 10px 3px 3px}}
@media (max-width:720px){
  .me-tab{display:flex}
  .navbtn .badge{right:calc(50% - 26px)}
  .me-btn svg{display:none}
  .me-btn{padding:3px}
  .appbar-right{gap:8px}
  .rail{display:none}
  .phone-friends{display:block}
  .pop,.pop.menu{position:fixed;left:8px;right:8px;top:62px;width:auto;max-width:none}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .two{grid-template-columns:1fr}
  .pcol{grid-template-columns:1fr}
}
@media (min-width:1021px) and (max-width:1180px){.home{grid-template-columns:minmax(0,1fr) 280px}}
@media (max-width:480px){
  .brand span{display:none}                      /* the logo ring alone is enough on a small phone */
  .appbar-in{gap:8px;padding:0 10px}
  .iconbtn{width:38px;height:38px}
  .appbar .timechip{padding:4px 10px;gap:6px;font-size:.78rem}
  .tbar{width:44px}
}

.panel .hint,.pcard .hint,.acol .hint{font-size:.8rem;color:var(--muted);line-height:1.45}
#pListener p:first-child{font-weight:600}

/* =====================================================================
   Empty-room fixes and a faster start
   ===================================================================== */
.quickstart{display:grid;gap:8px;justify-items:center;text-align:center;margin:4px 0 2px}
.quickstart .btn{width:100%}
.quickstart .hint-line{margin:0;font-size:.78rem;color:var(--muted)}
.presence{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;margin-top:10px;font-size:.88rem;color:var(--muted)}
.presence[hidden]{display:none}
.presence b{color:var(--ink)}
.presence .live-dot{width:9px;height:9px;border-radius:50%;background:var(--ok);flex:none;box-shadow:0 0 0 0 rgba(20,160,85,.5);animation:pulse 2s infinite}
.presence .quiet-dot{width:9px;height:9px;border-radius:50%;background:#B8BCCB;flex:none}
.presence .btn.mini{min-height:30px;padding:3px 12px;font-size:.78rem}
.presence .linkbtn{font-size:.82rem;padding:0}
@keyframes pulse{70%{box-shadow:0 0 0 7px rgba(20,160,85,0)}100%{box-shadow:0 0 0 0 rgba(20,160,85,0)}}
@media (prefers-reduced-motion:reduce){.presence .live-dot{animation:none}}
.mood-tile{position:relative}
.mood-wait{position:absolute;top:-7px;right:-7px;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:var(--ok);color:#fff;border:2px solid var(--card);font-size:.7rem;font-weight:700;font-style:normal;display:grid;place-items:center;line-height:1}
.mood-wait[hidden]{display:none}
.findprefs{margin:6px 0 0;font-size:.82rem;color:var(--muted)}
.findprefs .linkbtn{font-size:.82rem;padding:0 0 0 6px}
.few .btn{width:100%;margin-top:8px}
.few .hint-line{font-size:.8rem;color:var(--muted);margin:8px 0 0}
.fewevent{display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--soft);border:2px solid var(--line);border-radius:14px;padding:10px 14px;margin-top:10px;font-size:.86rem;text-align:left}
.fewevent[hidden]{display:none}
.upnudge{display:flex;justify-content:space-between;align-items:center;gap:12px;background:linear-gradient(135deg,var(--soft),var(--card));border:2px solid var(--line);border-radius:16px;padding:12px 16px}
.upnudge[hidden]{display:none}
.upnudge p{margin:2px 0 0;font-size:.82rem;color:var(--muted)}
.upnudge .btn{flex:none}

/* when nobody is online, make room: the choices matter more than the breathing animation */
.finding.few-open .breathe,.finding.few-open #waitTip,.finding.few-open .steps,.finding.few-open .bar,.finding.few-open #prioNote{display:none}
.finding.few-open .rings{transform:scale(.7);margin:-14px 0}
.finding.few-open .few{margin-top:0}
.few{display:grid;gap:0}
.finding.few-open .rings{display:none}
.few{grid-template-columns:1fr 1fr;gap:8px;text-align:center}
.few > h2,.few > p,.few #fewNotify,.few .fewevent,.few .hint-line{grid-column:1/-1}
.few .btn{margin-top:0;min-height:44px;font-size:.92rem;padding:8px 12px}
.few #fewNotify{min-height:50px;font-size:1rem}
.few > h2{margin:0}
.few > p{margin:0}
@media (max-width:480px){
  .finding.few-open{padding:16px 14px;gap:10px}
  .finding.few-open h1{font-size:1.35rem}
  .finding.few-open #findStatus{margin-top:2px}
  .few > p:not(.hint-line){display:none}                 /* the reassurance sentence can go on a very small screen */
  .few{gap:6px}
  .few .btn{min-height:42px;padding:6px 10px;font-size:.88rem}
  .few #fewNotify{min-height:46px}
  .fewevent{padding:7px 12px;margin-top:2px}
  .few .hint-line{margin:2px 0 0}
}

/* =====================================================================
   Guest mode on the landing page, and a balanced "Save your account"
   ===================================================================== */
.screen[data-screen="landing"] .actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
#guestMode{background:var(--card)}
.finding.anyone-mode .steps{display:none}
.up-icon{width:40px;height:40px;border-radius:50%;background:var(--brand);color:var(--brand-ink);display:grid;place-items:center;flex:none;border:2px solid var(--line)}
.up-icon svg{width:21px;height:21px}
.up-icon.big{width:48px;height:48px}
.up-icon.big svg{width:25px;height:25px}
.upnudge{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px 14px;background:linear-gradient(135deg,var(--soft),var(--card));border:2px solid var(--line);border-radius:16px;padding:12px 16px}
.upnudge[hidden]{display:none}
.upnudge .up-text b{display:block;font-size:.95rem;line-height:1.25}
.upnudge .up-text p{margin:2px 0 0;font-size:.8rem;color:var(--muted);line-height:1.35}
.upnudge .btn{white-space:nowrap}
.upnudge.stack{grid-template-columns:auto minmax(0,1fr)}
.upnudge.stack .btn{grid-column:1/-1;width:100%;justify-content:center}
@media (max-width:520px){.upnudge{grid-template-columns:auto minmax(0,1fr)}.upnudge .btn{grid-column:1/-1;width:100%;justify-content:center}}
.modal.up-modal{width:min(520px,100%);max-height:94vh;overflow:auto;padding:26px 26px 20px;display:grid;gap:16px}
.up-head{display:flex;gap:14px;align-items:center}
.up-head h2{margin:0;font-size:1.35rem;line-height:1.2}
.up-head .hint{margin:3px 0 0}
.up-perks{list-style:none;display:flex;gap:8px;flex-wrap:wrap;margin:0;padding:0}
.up-perks li{display:inline-flex;align-items:center;gap:6px;background:var(--soft);border:2px solid var(--line);border-radius:999px;padding:3px 12px;font-size:.78rem;font-weight:600}
.up-perks li::before{content:'✓';color:var(--ok-ink);font-weight:800}
.up-form{display:grid;gap:14px}
.up-form .field{margin:0}
.up-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.up-chips{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.up-chips .chip{padding:9px 6px;font-size:.84rem;text-align:center;white-space:normal;line-height:1.2}
.up-modal .err{min-height:0}
.up-go{width:100%;justify-content:center}
.up-skip{justify-self:center;font-size:.88rem;padding:4px 12px}
@media (max-width:520px){.up-row{grid-template-columns:1fr}.up-chips{grid-template-columns:repeat(2,minmax(0,1fr))}.modal.up-modal{padding:20px 18px 16px}}
/* inputs may shrink: the form never pushes past its own padding */
.modal.up-modal{grid-template-columns:minmax(0,1fr)}
.up-row{grid-template-columns:repeat(2,minmax(0,1fr))}
.up-form .field input{width:100%;min-width:0;box-sizing:border-box}
@media (max-width:520px){.up-row{grid-template-columns:minmax(0,1fr)}}
/* phones: Start talking and Guest mode stay side by side, sharing the width */
@media (max-width:480px){
  .screen[data-screen="landing"] .actions{flex-wrap:nowrap;gap:10px;width:100%}
  .screen[data-screen="landing"] .actions .btn.big{flex:1 1 0;min-width:0;padding:13px 10px;font-size:1rem;white-space:nowrap}
}
@media (max-width:480px){
  .hero .row{flex-wrap:nowrap;gap:10px;width:100%}
  .hero .row .btn.big{flex:1 1 0;min-width:0;padding:13px 8px;font-size:1rem;white-space:nowrap}
}
#upNudge{margin:2px 0 12px}

/* =====================================================================
   One design system: tokens, four header types, button scale, landing hero, compact setup pages
   ===================================================================== */
:root{--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-7:48px;
  --fs-xs:.75rem;--fs-sm:.875rem;--fs-md:1rem;--fs-lg:1.25rem;--fs-xl:1.75rem;--fs-2xl:2.25rem;--fs-3xl:3.75rem;
  --r-sm:12px;--r-md:16px;--r-lg:22px;--r-xl:28px;--h-btn-sm:36px;--h-btn:44px;--h-btn-lg:52px}

/* buttons: 36 small, 44 standard, 52 for the one main action on a screen (48 on phones) */
.btn{min-height:var(--h-btn)}
.btn.big{min-height:var(--h-btn-lg);padding:12px 30px;font-size:var(--fs-md);font-weight:700}
.btn.mini{min-height:var(--h-btn-sm)}
@media (max-width:480px){.btn.big{min-height:48px;padding:10px 20px}}

/* header 1: public (landing, sign-in) */
.pubbar{position:sticky;top:0;z-index:15;background:var(--card);border-bottom:2px solid var(--line)}
.pubbar[hidden]{display:none}
.pubbar-in{max-width:1100px;margin:0 auto;height:64px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4)}
.pub-actions{display:flex;gap:var(--sp-2)}
.pubbar .btn{min-height:40px;padding:6px 20px;font-size:var(--fs-sm)}
body.has-pubbar .app{place-items:start center;min-height:calc(100vh - 66px);padding-top:var(--sp-4);padding-bottom:var(--sp-5)}
@media (max-width:720px){.pubbar-in{height:56px;padding:0 12px}body.has-pubbar .app{min-height:calc(100vh - 58px)}}

/* header 3: setup flow on a phone (on a laptop the normal app bar stays) */
.flowbar{display:none}
.eyebrow{margin:0 0 6px;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.09em;color:var(--muted);font-weight:700;text-align:center}
@media (max-width:720px){
  body.flow-mode #appbar{display:none}
  .flowbar{position:sticky;top:0;z-index:15;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);height:56px;padding:0 10px;background:var(--card);border-bottom:2px solid var(--line)}
  .flowbar[hidden]{display:none}
  .fb-btn{width:44px;height:44px;border-radius:50%;border:2px solid var(--line);background:var(--card);display:grid;place-items:center;padding:0;color:var(--ink)}
  .fb-btn.off{visibility:hidden}
  .fb-btn svg{width:20px;height:20px}
  .fb-title{display:grid;text-align:center;line-height:1.2;min-width:0}
  .fb-title b{font-size:var(--fs-md)}
  .fb-title small{font-size:.72rem;color:var(--muted)}
  body.flow-mode .app{padding:12px 12px 20px}
  .screen[data-screen="gender"] .back,.screen[data-screen="moodmatch"] .back,.screen[data-screen="limit"] .back{display:none}
  .eyebrow{display:none}
}

/* landing: a full-width hero, not a tall card */
.screen[data-screen="landing"]{max-width:1100px}
.lp{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--sp-5) var(--sp-7);align-items:center;padding:clamp(8px,3vw,40px) 0 0}
.lp h1{margin:0;font-size:clamp(2.25rem,5.2vw,var(--fs-3xl));line-height:1.04;letter-spacing:-.02em;font-weight:800}
.lp-sub{margin:var(--sp-4) 0 var(--sp-5);max-width:44ch;color:var(--muted);font-size:clamp(1rem,1.5vw,1.2rem);line-height:1.5}
.lp-cta{display:flex;gap:var(--sp-3);flex-wrap:wrap}
.lp-legal{margin:var(--sp-4) 0 0;max-width:54ch;font-size:var(--fs-xs);color:var(--muted);line-height:1.5}
.lp .err{margin:var(--sp-2) 0 0;min-height:0}
.lp-art{display:grid;place-items:center;min-height:300px;padding:var(--sp-5);background:linear-gradient(135deg,var(--soft),var(--card));border:2px solid var(--line);border-radius:var(--r-xl);box-shadow:0 10px 30px var(--shadow)}
.lp-trust{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-6);list-style:none;margin:0;padding:var(--sp-4) 0 0;border-top:1px solid var(--hair);font-size:var(--fs-sm);font-weight:500}
.lp-trust li{display:inline-flex;align-items:center;gap:var(--sp-2)}
.lp-trust li::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none}
@media (max-width:720px){
  .lp{grid-template-columns:minmax(0,1fr);gap:var(--sp-4);padding-top:var(--sp-2)}
  .lp h1{font-size:var(--fs-2xl)}
  .lp-sub{margin:var(--sp-3) 0 var(--sp-4);font-size:.98rem}
  .lp-cta{flex-wrap:nowrap;gap:var(--sp-2)}
  .lp-cta .btn{flex:1 1 0;min-width:0;white-space:nowrap}
  .lp-art{min-height:0;padding:var(--sp-4);border-radius:var(--r-lg)}
  .lp-trust{gap:var(--sp-1) var(--sp-4);font-size:.8rem;padding-top:var(--sp-3)}
}
.auth-art{justify-content:flex-start}

/* setup pages: everything visible, nothing oversized */
.matchsum{display:flex;justify-content:center;align-items:center;gap:var(--sp-2);flex-wrap:wrap;margin:0 0 var(--sp-3);font-size:var(--fs-sm);color:var(--muted);text-align:center}
.matchsum b{color:var(--ink);font-weight:600}
.matchsum .linkbtn{font-size:var(--fs-sm);padding:0}
.screen[data-screen="gender"] .gcards{grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--sp-3);max-width:860px}
.gcard{padding:var(--sp-3);gap:var(--sp-2);border-radius:var(--r-lg)}
.gcard[aria-pressed="true"]{transform:none}
/* Laptop cards in the proportions of the design: the picture fills the card, a clear label area below it in a regular weight, a taller softer card */
@media (min-width:721px){
  .screen[data-screen="gender"] .gcards{gap:14px;max-width:none}
  .screen[data-screen="gender"] .gcard{padding:9px 9px 0;gap:0;border:2.5px solid var(--line);border-radius:22px;background:var(--card);box-shadow:0 10px 22px var(--shadow)}
  .screen[data-screen="gender"] .gcard .g-art{width:100%;margin:0;border-radius:14px}
  .screen[data-screen="gender"] .gcard span{display:flex;align-items:center;justify-content:center;width:100%;min-height:3.4em;padding:4px 2px 8px;font-weight:500;font-size:1rem;line-height:1.25;text-align:center;color:var(--ink)}
}
.intentbox h2{margin:0 0 var(--sp-2);font-size:var(--fs-sm)}
.intentbox .chip{padding:6px 14px;font-size:.84rem}
@media (max-width:900px){.screen[data-screen="gender"] .gcards{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:720px){
  .screen[data-screen="gender"] .card,.screen[data-screen="moodmatch"] .card{padding:var(--sp-4) var(--sp-3)}
  .screen[data-screen="gender"] .head,.screen[data-screen="moodmatch"] .head{padding:var(--sp-1) 0 var(--sp-3)}
  .screen[data-screen="gender"] .gcards{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-2)}
  .gcard{flex-direction:row;justify-content:flex-start;gap:var(--sp-3);padding:var(--sp-2) var(--sp-3);border-radius:var(--r-md);text-align:left;box-shadow:none}
  .gcard .g-art{width:46px;flex:none;border-radius:var(--r-sm)}
  .gcard:last-child{grid-column:1/-1}
  .opts{gap:var(--sp-2);margin-top:var(--sp-2)}
  .opt{padding:var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-2);border-radius:var(--r-md);gap:var(--sp-3);box-shadow:none}
  .opt .face,.opt .opt-icon{width:52px;border-radius:var(--r-sm)}
  .opt h3{font-size:1.05rem}
  .opt p{font-size:.78rem}
  .opt .meet{font-size:.72rem;margin-top:2px}
  .deeper.check{font-size:.82rem}
}

.matchsum button{border:0;background:none;color:var(--brand);text-decoration:underline;font-size:var(--fs-sm);padding:0;cursor:pointer}

/* stragglers found by the layout check */
.presence .btn.mini{min-height:var(--h-btn-sm)}
.links{align-content:flex-start;align-items:flex-start}
@media (max-width:480px){
  .screen[data-screen="settings"] .actions{flex-direction:column;align-items:stretch}
  .screen[data-screen="settings"] .actions .btn{width:100%}
}
/* the nobody-online panel on a short laptop screen (the app bar now stays visible during setup) */
@media (max-height:780px) and (min-width:721px){
  .finding.few-open{padding:16px 22px;gap:8px}
  .finding.few-open h1{font-size:1.45rem}
  .finding.few-open .few{padding:12px 16px}
  .few .btn{min-height:40px}
  .few #fewNotify{min-height:44px}
}
@media (max-width:480px){.btn{padding-left:14px;padding-right:14px}}
@media (max-width:480px){.actions .btn{flex:1 1 auto;white-space:nowrap}}   /* a button never squeezes its label: if two do not fit side by side, they stack */

/* landing: balanced use of the screen */
.lp a{color:var(--brand)}
.lp-art{min-height:clamp(280px,42vh,440px)}
@media (min-width:721px){.lp{min-height:calc(100vh - 130px);align-content:center}}
@media (max-width:720px){
  .lp{min-height:calc(100vh - 104px);min-height:calc(100dvh - 104px);align-content:space-between}
  .lp-art{min-height:0}
}
@media (max-width:480px){.pubbar .brand span{display:inline}}
@media (max-width:720px){.lp{align-content:center;gap:var(--sp-5)}.lp-art{min-height:150px}}
@media (max-width:720px){.gcard .g-art{margin:0}.gcard{align-items:center}}

/* =====================================================================
   Final fit pass: every setup page fits one screen; landing is centred
   ===================================================================== */
/* match style on a laptop: the three choices sit side by side instead of stacking into a long page */
/* the searching page on a short laptop screen */
@media (max-height:780px){
  .finding{gap:14px;padding:22px 22px}
  .finding .rings{transform:scale(.8);margin:-14px 0}
}
/* match style on a phone: a little tighter so it fits 844 px */
@media (max-width:480px){
  .screen[data-screen="moodmatch"] .opt{padding:8px 10px;gap:10px}
  .screen[data-screen="moodmatch"] .opts{gap:10px;margin-top:8px}
  .screen[data-screen="moodmatch"] .deeper{padding:8px 10px;font-size:.8rem}
  .screen[data-screen="moodmatch"] .note{margin:6px 0 0}
}
/* landing: centre the hero in the space under the header on a tall laptop screen */
body.has-pubbar .app{align-content:center}

/* =====================================================================
   Step 1: Home without a side column, and the friends dock on the right
   ===================================================================== */
.home{display:block;max-width:900px;margin:0 auto}
/* landing: the previous design; on a short laptop screen the headline and gaps tighten so it fits without scrolling */
@media (min-width:721px) and (max-height:820px){
  .landing{gap:18px}
  .hero{gap:14px}
  .hero h1{font-size:4.4rem}
}

@media (min-width:721px){body.is-landing .app{padding-bottom:28px}}
/* tablet widths: the dock strip takes 84px, so the mood tiles tighten a little so no name is ever cut off */
@media (min-width:721px) and (max-width:900px){
  .screen[data-screen="mood"] .mood-tile{padding:8px 8px;gap:8px}
  .screen[data-screen="mood"] .face{width:34px;height:34px;font-size:1.15rem}
  .screen[data-screen="mood"] .mood-tile span{font-size:.8rem}
}

/* =====================================================================
   Bento layout: the emotion card and the friends tile sit side by side.
   The tile is a slim stack of friend "bubble heads". Hover it and it grows
   while the emotion card narrows to make room, so nothing is ever covered.
   ===================================================================== */
.screen[data-screen="mood"],.screen[data-screen="gender"],.screen[data-screen="moodmatch"]{max-width:1100px}
.home{max-width:none;margin:0}
.bento{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:stretch}
.bento.has-tile{grid-template-columns:minmax(0,1fr) auto}
.bento > .card,.bento > .home-main{min-width:0;max-width:none;width:100%}
.ftile{position:relative;width:84px;min-height:0;background:var(--card);border:2px solid var(--line);border-radius:24px;box-shadow:0 8px 24px var(--shadow);overflow:hidden;transition:width .22s ease}
.ftile[hidden]{display:none}
.ftile.open{width:300px}
.ft-bubbles{position:absolute;top:0;left:0;bottom:0;width:80px;display:flex;flex-direction:column;align-items:center;gap:12px;padding:14px 0;transition:opacity .12s ease}
.ftile.open .ft-bubbles{opacity:0;pointer-events:none}
.ft-full{position:absolute;top:0;right:0;bottom:0;width:296px;display:flex;flex-direction:column;min-height:0;padding:16px 12px 10px;opacity:0;pointer-events:none;transition:opacity .15s ease}
.ftile.open .ft-full{opacity:1;pointer-events:auto;transition-delay:.08s}
.dock-ico{position:relative;width:42px;height:42px;border-radius:50%;border:2px solid var(--line);background:var(--card);display:grid;place-items:center;color:var(--ink);padding:0;flex:none;cursor:pointer}
.dock-ico:hover{background:var(--soft)}
.dock-ico svg{width:20px;height:20px}
.dock-ico .badge{position:absolute;top:-7px;right:-9px}
.dock-avs{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;min-height:0;overflow:hidden auto;scrollbar-width:none;padding:4px 0}
.dock-avs::-webkit-scrollbar{display:none}
.dock-av{position:relative;width:44px;height:44px;flex:none;border-radius:50%;background:var(--soft);border:0;padding:0;display:grid;place-items:center;font-size:1.4rem;cursor:pointer}
.dock-av:hover{box-shadow:0 0 0 2px var(--brand)}
.dock-av.off{opacity:.55}
.dock-av .badge{position:absolute;top:-5px;right:-7px}
.ft-full .rail-head{display:flex;align-items:center;gap:8px;padding:0 6px 10px}
.ft-full .rail-head .ptitle{margin:0}
.ft-full .rail-head .rail-count{margin-left:auto;font-size:.8rem;font-weight:600;color:var(--muted)}
.ft-full .rail-head .rail-count.on{color:var(--ok-ink)}
.dock-collapse{flex:none;width:30px;height:30px;border-radius:50%;border:2px solid var(--line);background:var(--card);display:grid;place-items:center;padding:0;color:var(--ink);cursor:pointer}
.dock-collapse:hover{background:var(--soft)}
.dock-collapse[aria-pressed="true"]{background:var(--brand);color:var(--brand-ink)}
.dock-collapse svg{width:15px;height:15px}
.ft-full .rail-list{flex:1;overflow:auto;min-height:0}

/* friend rows: avatar with online dot, status, then message and call buttons */
.rrow{display:flex;align-items:center;gap:6px;border-radius:14px;padding-right:6px}
.rrow:hover{background:var(--soft)}
.rtxt small.on{color:var(--ok-ink);font-weight:600}
.rmsg,.rcall{position:relative;flex:none;width:36px;height:36px;border-radius:50%;border:2px solid var(--line);background:var(--card);display:grid;place-items:center;padding:0;margin:0;cursor:pointer}
.rmsg svg,.rcall svg{width:17px;height:17px}
.rmsg{color:var(--brand)}
.rmsg:hover{background:var(--brand);color:var(--brand-ink)}
.rmsg .badge{position:absolute;top:-6px;right:-8px}
.rcall{color:var(--ok-ink)}
.rcall:hover{background:var(--ok);color:#fff}
.rcall.off{opacity:.35;cursor:not-allowed;color:var(--muted)}
.rcall.off:hover{background:var(--card);color:var(--muted)}
@media (prefers-reduced-motion:reduce){.ftile,.ft-bubbles,.ft-full{transition:none}}
@media (max-width:720px){.ftile{display:none !important}.bento.has-tile{grid-template-columns:minmax(0,1fr)}}
/* the emotion tiles adapt to the width of their own card (it narrows while the friends tile is open) */
.home-main{container-type:inline-size}
@container (max-width:840px){
  .screen[data-screen="mood"] .mood-tile{padding:8px 10px;gap:9px}
  .screen[data-screen="mood"] .face{width:38px;height:38px;font-size:1.25rem}
  .screen[data-screen="mood"] .mood-tile span{font-size:.84rem}
}
@container (max-width:680px){
  .screen[data-screen="mood"] .mood-tile{padding:8px 8px;gap:8px}
  .screen[data-screen="mood"] .face{width:32px;height:32px;font-size:1.1rem}
  .screen[data-screen="mood"] .mood-tile span{font-size:.78rem}
}


/* =====================================================================
   Match style: simple, like the original. A heading that follows the emotion,
   three plain buttons, one quiet line. Nothing else.
   ===================================================================== */
.screen[data-screen="moodmatch"] .head{padding:4px 0 6px}
.screen[data-screen="moodmatch"] .feeling{margin:0 0 4px;text-align:center;font-size:.86rem;color:var(--muted)}
.screen[data-screen="moodmatch"] .feeling b{color:var(--ink)}
.screen[data-screen="moodmatch"] .feeling button{border:0;background:none;color:var(--brand);text-decoration:underline;font:inherit;font-size:.82rem;padding:0 0 0 8px;cursor:pointer}
.screen[data-screen="moodmatch"] .opts{display:flex;flex-direction:column;gap:12px;max-width:540px;margin:14px auto 0}
.screen[data-screen="moodmatch"] .opt{padding:10px 18px 10px 10px;gap:16px}
.screen[data-screen="moodmatch"] .opt .face,.screen[data-screen="moodmatch"] .opt .opt-icon{width:68px}
/* Match style on a laptop: bigger type and icons, in the proportions of the design (the layout is unchanged) */
@media (min-width:721px){
  .screen[data-screen="moodmatch"] .bento .head p.h-light{font-size:1.7rem}
  .screen[data-screen="moodmatch"] .bento .head h1.h-bold{font-size:2.2rem}
  .screen[data-screen="moodmatch"] .bento .feeling{font-size:.95rem}
  .screen[data-screen="moodmatch"] .bento .feeling button{font-size:.9rem}
  .screen[data-screen="moodmatch"] .bento .opts{max-width:600px;gap:14px}
  .screen[data-screen="moodmatch"] .bento .opt{padding:12px 20px 12px 12px;gap:18px}
  .screen[data-screen="moodmatch"] .bento .opt .opt-icon{width:88px}
  .screen[data-screen="moodmatch"] .bento .opt h3{font-size:1.5rem}
  .screen[data-screen="moodmatch"] .bento .opt p{font-size:.9rem;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
}
.screen[data-screen="moodmatch"] .opt h3{font-size:1.2rem}
.screen[data-screen="moodmatch"] .opt p{font-size:.84rem;line-height:1.4}
.screen[data-screen="moodmatch"] .note{margin:14px 0 0;text-align:center}

/* =====================================================================
   Step 3: a small, calm "Before you talk" card on the match-found screen (no extra tap)
   ===================================================================== */
.kind{width:min(440px,100%);margin:0 auto;text-align:left;background:var(--soft);border:2px solid var(--line);border-radius:16px;padding:10px 14px}
.kind-title{margin:0 0 6px;font-size:.72rem;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);font-weight:700}
.kind-list{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:.88rem;line-height:1.35}
.kind-list li{display:flex;gap:8px}
.kind-list li::before{content:'';flex:none;width:7px;height:7px;border-radius:50%;background:var(--ok);margin-top:.5em}
.kind-list b{font-weight:600}
.kind-link{display:inline-block;margin-top:6px;font-size:.8rem;color:var(--brand)}
.kind-line{display:none;margin:0;font-size:.84rem;color:var(--muted)}
/* after a few calls it quietens down to a single line */
.kind.compact{background:transparent;border-width:0;padding:6px 14px;text-align:center}
.kind.compact .kind-title,.kind.compact .kind-list{display:none}
.kind.compact .kind-line{display:inline}
.kind.compact .kind-link{margin:0 0 0 6px}

/* =====================================================================
   Step 4: Friends | Requests
   ===================================================================== */
#friendTabs{margin:12px 0 14px}
#friendTabs .tab .badge{margin-left:6px;vertical-align:1px}
#reqPane .sect{margin:14px 0 8px}
#reqPane .list{margin-bottom:8px}

/* Step 4: friend requests. Avatar bubbles (like the friends tile) and rows as wide as their headings */
.avatar-bubble{width:44px;height:44px;flex:none;border-radius:50%;background:var(--soft);border:2px solid var(--line);display:grid;place-items:center;font-size:1.5rem}
#reqPane .list{max-width:none}
#reqPane .sect{margin:16px 0 8px}
#reqPane .sect:first-child{margin-top:8px}

/* =====================================================================
   Step 5: incoming calls on/off (menu switch, top-bar reminder, ringing screen, settings)
   ===================================================================== */
#meMenu .menu-switch{display:flex;justify-content:space-between;align-items:center;gap:14px;text-align:left}
#meMenu .menu-switch small{display:block;color:var(--muted);font-size:.74rem;font-weight:500}
.switch{flex:none;position:relative;width:38px;height:22px;border-radius:999px;background:#B8BCCB;transition:background .15s}
.switch::after{content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .15s}
[aria-checked="true"] > .switch{background:var(--ok)}
[aria-checked="true"] > .switch::after{transform:translateX(16px)}
.calls-chip{flex:none;border:2px solid var(--line);background:#FFF1D6;color:#0B0B14;border-radius:999px;padding:4px 12px;font:inherit;font-size:.78rem;font-weight:600;cursor:pointer}
.calls-chip[hidden]{display:none}
.plan-head,.plan-head-text{display:contents}.plan-avatar,.plan-sub,.plan-quick,.plan-when{display:none}      /* the avatar, quick choices and summary in Plan a call are for phones (phone.css) */
.ring-avatar,.ring-btn .ri{display:none}      /* the caller's big avatar and the round call buttons are for phones (call-phone.css) */
.ring-pause{display:block;margin:12px auto 0;font-size:.84rem}
.ring-pause[hidden]{display:none}
.ring-pause.strong{border:2px solid var(--line);background:var(--soft);border-radius:999px;padding:8px 16px;font-weight:600;text-decoration:none;color:var(--ink)}
.calls-pause{margin:-2px 0 10px 32px}
.calls-pause[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.switch,.switch::after{transition:none}}
@media (max-width:720px){.calls-chip{display:none}}

/* =====================================================================
   Step 6: Messages. One inbox (left) and the open conversation (right)
   ===================================================================== */
.screen[data-screen="messages"]{max-width:1100px}
.msgs-card{padding:0;overflow:hidden}
.msgs-layout{display:grid;grid-template-columns:340px minmax(0,1fr);height:min(660px,calc(100vh - 130px));min-height:420px}
.msgs-list{display:flex;flex-direction:column;min-height:0;border-right:2px solid var(--line)}
.msgs-list-head{padding:16px 18px 6px}
.msgs-title{margin:0;font-size:1.4rem;font-weight:800}
.msgs-search{margin:6px 14px 10px;font:inherit;border:2px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink);padding:8px 16px;min-width:0}
.convos{flex:1;min-height:0;overflow:auto;padding:0 8px 10px}
.convo-label{margin:12px 10px 4px;font-size:.68rem;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);font-weight:700}
.convo{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;color:var(--ink);text-align:left;padding:8px 10px;border-radius:14px;cursor:pointer;min-height:58px}
.convo:hover{background:var(--soft)}
.convo[aria-current="true"]{background:var(--soft);box-shadow:inset 0 0 0 2px var(--line)}
.convo .rav{width:42px;height:42px}
.convo-text{flex:1;min-width:0;display:grid}
.convo-name{font-weight:600;font-size:.94rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.convo.unread .convo-name{font-weight:800}
.convo-prev{font-size:.8rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.convo.unread .convo-prev{color:var(--ink);font-weight:600}
.convo-side{display:grid;justify-items:end;gap:4px;flex:none;font-size:.7rem;color:var(--muted)}
.msgs-thread{display:flex;flex-direction:column;min-width:0;min-height:0}
.msgs-empty{margin:auto;padding:24px;text-align:center;color:var(--muted);max-width:34ch}
.msgs-empty[hidden],.msgs-open[hidden]{display:none}
.msgs-open{display:flex;flex-direction:column;flex:1;min-height:0;padding:14px 18px}
.msgs-open .chat-head{padding:0 0 12px}
.msgs-open .msgs.tall{flex:1;min-height:0;max-height:none;margin-bottom:10px}
.msgs-open .hint{margin:8px 0 0;text-align:center}
.back-list{display:none}
@media (max-width:720px){
  .msgs-layout{grid-template-columns:minmax(0,1fr);height:calc(100vh - 170px)}
  .msgs-list{border-right:0}
  .msgs-thread{display:none}
  .msgs-layout.thread-open .msgs-list{display:none}
  .msgs-layout.thread-open .msgs-thread{display:flex}
  .back-list{display:inline-flex}
}


/* older browsers without aspect-ratio: keep the face tiles from collapsing flat */
@supports not (aspect-ratio:1){.face{min-height:56px}.screen[data-screen="mood"] .face{min-height:0}}

/* =====================================================================
   The top bar is ONE design on every page: Home, Friends, Messages, Plus, each with its icon AND its name.
   Only where there is physically no room (a tablet held upright, under 1000px) do the names go, on every page alike.
   Between 1000px and 1239px the bar is made a little more compact so the names still fit.
   (An older pair of contradictory rules used to switch the names on and off at odd widths.)
   ===================================================================== */
@media (min-width:1000px) and (max-width:1239px){
  .navbtn{padding:9px 12px}
  .navbtn .lbl{display:inline}
  .me-btn .nm{display:none}
  .me-btn{padding:3px 10px 3px 3px}
  .appbar .timechip .tbar{display:none}
}
@media (min-width:721px) and (max-width:999px){
  .navbtn{padding:9px 12px}
  .navbtn .lbl{display:none}
  .me-btn .nm{display:none}
  .me-btn{padding:3px 10px 3px 3px}
  .appbar .timechip .tbar{display:none}
}

/* the language switch (landing, sign-in, Settings) */
.lang-sel{font:inherit;font-size:.82rem;font-weight:600;border:2px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink);padding:6px 12px;min-height:36px;cursor:pointer;max-width:130px}
.set .lang-sel{display:block;margin-top:6px;font-size:.92rem;min-height:42px}
.top-actions,.pub-actions{display:flex;align-items:center;gap:8px}
/* longer text (Hindi, Hinglish) on a short laptop screen: the match-style page drops its footnote and tightens a little so it still fits one screen */
@media (min-width:721px) and (max-height:760px){
  .screen[data-screen="moodmatch"] .note{display:none}
  .screen[data-screen="moodmatch"] .opts{gap:10px}
}
/* the language switch must never push the landing header wider than a phone */
.landing .top{flex-wrap:wrap;row-gap:8px}
.top-actions{flex-wrap:wrap;justify-content:flex-end;min-width:0}
@media (max-width:560px){.lang-sel{max-width:104px;padding:5px 8px;font-size:.78rem}.top-actions{gap:6px}}
/* on a phone the language switch in the header is just a globe (still a real picker, with its name for screen readers) */
@media (max-width:560px){
  #langLanding,#langPub{-webkit-appearance:none;appearance:none;width:40px;min-height:38px;padding:0;color:transparent;
    background:var(--card) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A90A8' stroke-width='2' stroke-linecap='round'><circle cx='12' cy='12' r='9'/><path d='M3 12h18M12 3c3 3 3 15 0 18M12 3c-3 3-3 15 0 18'/></svg>") center/20px no-repeat}
  #langLanding option,#langPub option{color:#0B0B14}
  .landing .top .btn{padding:7px 12px;min-height:38px;font-size:.82rem}
}

/* Hinglish words are wider than English ones, and Hindi lines are taller: the landing page gives a little back so it still fits one screen */
@media (min-width:721px) and (max-height:720px){.landing{gap:12px}.hero{gap:10px}}
html[lang="hi-Latn"] .hero h1{font-size:clamp(2.4rem,6.2vw,4.4rem)}
html[lang="hi-Latn"] .hero > p{font-size:.95rem}
@media (max-width:560px){html[lang="hi-Latn"] .hero h1{font-size:2.1rem}html[lang="hi-Latn"] .hint-line{font-size:.74rem}}

/* finding people */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.field.search input{width:100%;font:inherit;font-size:1rem;padding:12px 16px;border:2px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink);min-height:48px}
.item.tap{cursor:pointer}
.item.tap:hover{border-color:var(--accent)}
.modal.person{max-width:420px}
.pf-head{display:flex;gap:14px;align-items:center;margin-bottom:6px}
.pf-head h2{margin:0;font-size:1.4rem}
.pf-av{width:64px;height:64px;font-size:2rem;flex:none}
.pf-tag{margin:0;color:var(--muted);font-weight:600}
.pf-meta{margin:.2em 0 .6em;color:var(--muted);font-size:.9rem}
.pf-more{margin-top:8px;opacity:.9}
.ptag{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px}
.ptag b{font-size:1.05rem}
#findList,#findPane .item{width:100%}
#findPane .field.search,#findPane .hint{max-width:680px;margin-left:auto;margin-right:auto}

/* the search panel in the top bar */
.searchpop{width:440px;padding:12px}
.sp-box{display:flex;align-items:center;gap:8px;border:2px solid var(--line);border-radius:999px;padding:3px 4px 3px 14px;background:var(--card)}
.sp-box>svg{width:18px;height:18px;flex:none;color:var(--muted)}
.sp-box input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--ink);font:inherit;font-size:1rem;padding:9px 0}
.sp-box:focus-within{border-color:var(--accent)}
.sp-x{width:34px;height:34px;border:0;font-size:1.3rem;line-height:1}
.sp-cancel{display:none}
.searchpop .hint{margin:10px 4px 2px}
.searchpop .list{max-height:min(58vh,440px);overflow:auto;margin-top:10px;gap:8px}
.searchpop .item{padding:8px 10px;width:100%}
.searchpop .item.active{outline:3px solid var(--accent);outline-offset:1px}
.sp-head{display:flex;justify-content:space-between;align-items:center;margin:12px 2px 4px}
.sp-recent{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;background:none;color:var(--ink);font:inherit;padding:10px 8px;border-radius:12px;min-height:44px;cursor:pointer}
.sp-recent:hover,.sp-recent:focus-visible{background:var(--soft)}
.sp-clock{color:var(--muted);font-size:1.1rem}
#spAll{margin:8px 2px 0}
@media (max-width:720px){.searchpop{right:12px;left:12px;width:auto}}
/* the search icon adds one more control to the top bar: between 1000px and 1139px everything gets a little tighter so nothing is ever covered */
@media (min-width:1000px) and (max-width:1139px){
  .navbtn{padding:9px 9px}
  .appbar-right{gap:6px}
  .calls-chip{padding-left:9px;padding-right:9px}
  .timechip{padding-left:10px;padding-right:10px}
}

.call-uncomf{text-align:center;margin-bottom:10px}

/* settings groups: on a big screen they are just headed sections, always open (phone.css turns them into a tap-to-open list) */
.setgrp>summary{list-style:none;cursor:default;pointer-events:none;margin:22px 0 2px}
.setgrp>summary::-webkit-details-marker{display:none}
.setgrp .sg-t{display:block;font-weight:800;font-size:1.15rem}
.setgrp .sg-d{display:none}
.setgrp .sg-body{display:grid;gap:18px;padding-top:6px}
.setgrp:first-child>summary{margin-top:0}
.auth>*{min-width:0}
.auth-form{min-width:0}
.field{min-width:0}
.field input,.field textarea,.field select{min-width:0;max-width:100%}
.setgrp>.sg-body{box-sizing:border-box}      /* the contents of <details> sit in a browser-made wrapper that resets this, and everything inside inherits it */

/* light / dark: a forced dark theme needs the same extra rule as the automatic one; the switch button shows the moon in light and the sun in dark */
:root[data-theme="dark"] .banner.on{background:#13392a;color:#d9ffe9}
.pcard-theme{display:none}      /* the quick light/dark button on the Profile page is for phones; a laptop has the switch in the account menu */
.theme-btn .i-sun{display:none}
.theme-btn[data-eff="dark"] .i-sun{display:block}
.theme-btn[data-eff="dark"] .i-moon{display:none}
.appearance .hint{margin-top:8px}

a:not([class]){color:var(--brand)}
.msg time{font-size:.75rem;opacity:.9}
/* the call header's pills were a dark overlay on a blue header; in dark mode the header is light blue with dark text, so the pills become a light overlay */
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .fpill:not(.warn){background:rgba(255,255,255,.4)}}
:root[data-theme="dark"] .fpill:not(.warn){background:rgba(255,255,255,.4)}

/* ============================================================================
   Home: the mood card and the Friends window are a MATCHED PAIR. Both are exactly as tall as the room below
   the top bar, so their top and bottom edges line up and the page never scrolls. The mood cards then fill
   whatever room the card has (width and height both count), so nothing here is tuned to one screen size.
   Laptop and desktop: six across, three rows. Phone: compact horizontal tiles, two across, nine rows.
   ============================================================================ */
.screen[data-screen="mood"] .home.bento{height:calc(100vh - 116px);height:calc(100dvh - 116px);min-height:380px;align-items:stretch}      /* top bar 66 + gap above 22 + gap below 28 */
.screen[data-screen="mood"] .home-main{container:homecard / inline-size;display:flex;flex-direction:column;height:100%;min-height:0;padding:16px 22px 14px}
.screen[data-screen="mood"] .home-head{flex:none;text-align:center;padding-bottom:8px}
.screen[data-screen="mood"] .home-hi{margin:0;font-size:clamp(1.05rem,1.6vw,1.45rem)}
.screen[data-screen="mood"] .home-head h1{font-size:clamp(1.35rem,2.1vw,1.85rem);line-height:1.15}
.screen[data-screen="mood"] .presence{justify-content:center;text-align:center;margin-top:6px}
.ftile.open{max-height:none}      /* the opened friends panel is as tall as the card beside it; its list scrolls inside */

.screen[data-screen="mood"] .mood-grid{flex:1 1 0;min-height:0;width:100%;max-width:none;margin:0;container-type:size;display:grid;grid-template-columns:repeat(6,max-content);justify-content:center;align-content:center;gap:14px 12px}
.screen[data-screen="mood"] .mood-tile{position:relative;width:min(calc((100cqw - 60px)/6),calc((100cqh - 28px)/3/1.3),172px);min-width:0;min-height:0;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;padding:7px 7px 4px;border:2.5px solid var(--line);border-radius:22px;background:var(--card);box-shadow:0 8px 16px var(--shadow);text-align:left;transition:transform .15s,box-shadow .15s}
.screen[data-screen="mood"] .mood-tile:hover{transform:translateY(-5px) rotate(-1.2deg);box-shadow:0 14px 22px var(--shadow)}
.screen[data-screen="mood"] .mood-tile:active{transform:scale(.97)}
.screen[data-screen="mood"] .mood-tile:focus-visible{outline:3px solid var(--brand);outline-offset:3px}
.screen[data-screen="mood"] .mood-tile[aria-pressed="true"]{outline:4px solid var(--brand);outline-offset:2px}
.mood-art{display:block;aspect-ratio:300/334;border:2.5px solid #0B0B14;border-radius:16px;overflow:hidden;background:var(--art-bg,linear-gradient(180deg,var(--g1),var(--g2)))}
.mood-art.no-art{display:grid;place-items:center;font-size:2.2rem}
.mood-art img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;user-select:none}
.screen[data-screen="mood"] .mood-name{padding:6px 2px 3px 6px;font-size:clamp(.8rem,1.05vw,.95rem);font-weight:500;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.01em}
.screen[data-screen="mood"] .mood-wait{top:-8px;right:-8px}
@container (max-width:780px),(max-height:470px){      /* cards under about 115px wide: a little more room for the longest name */
  .screen[data-screen="mood"] .mood-tile{padding:5px 4px 3px}
  .screen[data-screen="mood"] .mood-name{padding:4px 0 2px 3px;letter-spacing:-.02em}
}
@media (prefers-reduced-motion:reduce){.screen[data-screen="mood"] .mood-tile:hover{transform:none}}

/* on a large desktop the pair uses the room instead of floating small in the middle */
@media (min-width:1500px){.screen[data-screen="mood"]{max-width:1320px}}

/* talk to anyone / check in: two buttons under the cards */
.home-note{flex:none;margin:14px auto 0;max-width:64ch;text-align:center;color:var(--muted);font-size:.85rem}
.screen[data-screen="mood"] .home-foot{flex:none;justify-content:center;border-top:0;margin-top:6px;padding-top:0}
@media (max-height:900px){.home-note{display:none}}      /* the reassurance line only when there is room to spare */
@media (max-height:820px){.screen[data-screen="mood"] .home-foot{display:none}}

/* ---- a PHONE (width 720px or less): horizontal pills, two across and nine down (18 = 2 x 9), each a small square picture and the name beside it.
   (This replaces an earlier three-across card layout; the person chose the pills after comparing six looks.) Old note follows: three columns and six rows (18 = 3 x 6) always; the card's width is set by BOTH the room across and the room down
   (the grid is a size container, so cqw/cqh read its real box), so the whole card scales down together and the artwork is never
   stretched or cropped unevenly (aspect-ratio keeps the picture's own 300:334 shape; only its overall size changes).
   --mood-row-extra below is the height a row needs besides the picture itself: the name line, the tile's own padding and border,
   and the row's share of the vertical gaps. Keeping it as one named number here means the one formula below always matches reality. ---- */
@media (max-width:720px){
  .screen[data-screen="mood"] .home.bento{height:calc(100vh - 148px);height:calc(100dvh - 148px);min-height:0}      /* top bar 58 + 12 above + tab bar 72 + 6 below */
  body:has(.screen[data-screen="mood"]:not([hidden])) .app{padding:12px 12px 78px}
  .screen[data-screen="mood"] .home-main{padding:10px 10px 10px;border-radius:20px}
  .screen[data-screen="mood"] .home-head{padding-bottom:6px}
  .screen[data-screen="mood"] .home-hi{font-size:.95rem}
  .screen[data-screen="mood"] .home-head h1{font-size:1.2rem}
  .screen[data-screen="mood"] .presence,.screen[data-screen="mood"] .home-note,.screen[data-screen="mood"] .home-foot,.screen[data-screen="mood"] .phone-friends{display:none}
  .screen[data-screen="mood"] .mood-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(9,minmax(0,1fr));justify-content:stretch;align-content:stretch;gap:6px}
  .screen[data-screen="mood"] .mood-tile{width:auto;height:auto;flex-direction:row;align-items:center;gap:8px;padding:3px 8px 3px 3px;border-width:2px;border-radius:14px;box-shadow:none}
  .screen[data-screen="mood"] .mood-tile:hover{transform:none;box-shadow:none}
  .screen[data-screen="mood"] .mood-art{flex:none;height:100%;width:auto;aspect-ratio:1;border-width:2px;border-radius:10px}      /* a square picture the height of the pill */
  .screen[data-screen="mood"] .mood-name{padding:0;font-size:.86rem;letter-spacing:0;min-width:0}
  .screen[data-screen="mood"] .mood-wait{top:-6px;right:-3px}
}
@media (max-width:720px) and (max-height:760px){.screen[data-screen="mood"] .home-hi{display:none}}      /* a shorter phone: the question matters more than the greeting, and the cards get the room */

/* ---- a SHORT window (a phone held sideways, or a very low browser window): 18 cards cannot fit in view even at a small size, so the
   home becomes an ordinary page that scrolls, with the cards at a comfortable fixed size, three across ---- */
@media (max-width:720px) and (max-height:520px){
  .screen[data-screen="mood"] .home.bento{height:auto;min-height:0}
  .screen[data-screen="mood"] .home-main{height:auto}
  .screen[data-screen="mood"] .mood-grid{container-type:inline-size;grid-template-columns:repeat(3,minmax(0,1fr));justify-content:stretch;align-content:start;gap:6px;padding:2px 0}
  .screen[data-screen="mood"] .mood-tile{width:auto;height:46px;flex-direction:row;align-items:center;gap:8px;padding:3px 8px 3px 3px;border-width:2px;border-radius:14px;box-shadow:none}
  .screen[data-screen="mood"] .mood-tile:hover{transform:none;box-shadow:none}
  .screen[data-screen="mood"] .mood-art{height:100%;width:auto;aspect-ratio:1;flex:none;border-width:2px;border-radius:10px}
  .screen[data-screen="mood"] .mood-name{padding:0;font-size:.86rem;letter-spacing:0;min-width:0}
  .screen[data-screen="mood"] .mood-wait{top:-6px;right:-3px}
  .screen[data-screen="mood"] .home-hi{display:none}
}
/* a tablet-width window: three cards, then the last two centred under them */
@media (min-width:721px) and (max-width:900px){
  .screen[data-screen="gender"] .gcards{grid-template-columns:repeat(6,minmax(0,1fr))}
  .screen[data-screen="gender"] .gcard{grid-column:span 2}
  .screen[data-screen="gender"] .gcard:nth-child(4){grid-column:2 / span 2}
  .screen[data-screen="gender"] .gcard:nth-child(5){grid-column:4 / span 2}
}
/* a touch screen of any size: hover sticks to the last thing you tapped, so cards must not lift on hover */
@media (hover:none){.opt:hover,.gcard:hover,.mood-tile:hover{transform:none}}

/* ---------------------------------------------------------------- Landing artwork
   The illustration is pinned to the bottom edge of the page, under the headline, the text and the buttons. It is always shown WHOLE (all four people and the globe),
   as large as the room allows: it is never cropped, it only gets smaller on a short window. On a laptop the card keeps its frame but with smaller outer margins and a
   compact text block, so the picture gets the height. */
.land-art{position:relative;min-height:0;overflow:hidden;pointer-events:none;user-select:none}
.land-art img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;object-position:50% 100%}
@media (min-width:721px){
  body.is-landing .app{padding:12px 16px}
  .card.landing{container-type:inline-size;height:max(560px,calc(100vh - 28px));height:max(560px,calc(100dvh - 28px));padding:20px 32px 0;gap:6px;overflow:hidden}      /* a definite height, so the picture (not the page) gives way on a short window */
  .card.landing .hero{margin:auto 0;padding:0;gap:8px}
  .card.landing .hero h1{font-size:clamp(2.6rem,6.4vw,5.2rem)}
  .card.landing .hero > p:not(.hint-line):not(.err){max-width:62ch;font-size:clamp(.95rem,1.45vw,1.15rem);line-height:1.45}
  .card.landing .hero .row{margin-top:2px}
  .card.landing .hero .hint-line{margin:4px auto 0;max-width:100%;font-size:.75rem}      /* 4px of its own on top of the 8px gap: 12px under the buttons */
  .card.landing .hero > p:last-child{margin:4px 0 0;font-size:.8rem}
  .land-art{flex:0 1 auto;width:calc(100% + 64px);margin:4px -32px 0;aspect-ratio:1.878}      /* its natural height; on a short window it shrinks (the picture inside stays whole) */
}
@media (min-width:721px) and (max-height:820px){      /* a short laptop screen: a smaller headline so the picture gets the room */
  .card.landing .hero h1{font-size:clamp(2.6rem,5.4vw,4.2rem)}
}

.ab-phone{display:none}      /* the round avatar in a friend row is for phones (phone.css); a laptop keeps the mood tile */

/* the landing art has a light version (with its soft pale backdrop) and a dark version (cut out, with a thin light edge so dark outlines and hair stay readable); the theme picks one */
.land-art .art-dark{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .land-art .art-light{display:none}:root:not([data-theme="light"]) .land-art .art-dark{display:block}}
:root[data-theme="dark"] .land-art .art-light{display:none}
:root[data-theme="dark"] .land-art .art-dark{display:block}