/* =====================================================================
   NARCISSOS × MHC · SHARED UI SERVICES, SETTINGS, ONBOARDING
   ---------------------------------------------------------------------
   Load order: fonts.css → tokens.css → components.css → shell.css → ui.css → features/*.css
   Owns the layers that assets/js/ui.js creates (.uil sheet / modal / celebration, the toast host),
   the help sheet + safety box, the Settings sheet (#sM) and the onboarding overlay (#onbOverlay).
   Role tokens and component classes only. Inline styles are data custom properties only
   (--v, --r, --tilt, --n, confetti --x/--y/--c/--w/--dl).

   LAYERS (see the ladder in shell.css)
     .uil 700 (each new layer is appended later, so it sits on top) · toast host 900.
     Both are above the tab bar (30), the legacy .mb modals (200) and onboarding (600 / tabs 610 / 650),
     so the tab bar never covers an overlay's buttons. body.ui-lock stops the page scrolling behind.
   ===================================================================== */

/* ===================== 1. Overlay layers (ui.js) ===================== */
body.ui-lock{overflow:hidden}
.uil{position:fixed;inset:0;z-index:700}
.uil .scrim{animation:ui-fade var(--d2) var(--ease-out) both}
.uil.is-out{opacity:0;transition:opacity .18s var(--ease-out);pointer-events:none}
.sheet:focus,.modal:focus,.celebrate:focus,.onb:focus,.md:focus{outline:none}
@keyframes ui-fade{from{opacity:0}to{opacity:1}}
@keyframes modal-in{from{opacity:0;transform:translate(-50%,-46%)}to{opacity:1;transform:translate(-50%,-50%)}}

/* bottom sheet: centred column on tablets / desktop, never taller than the screen minus the top inset */
.uil .sheet,#sM .sheet{max-width:var(--app-w);margin:0 auto;max-height:calc(100% - var(--sat) - 48px);
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.sheet__ht{min-width:0;padding-top:var(--s1)}
.sheet__ht .eyebrow{margin-bottom:2px}
.sheet__b{padding-top:var(--s2)}

/* calm cream modal (uiConfirm / uiAlert / info) */
.uil--modal .modal{max-height:calc(100% - var(--sat) - var(--sab) - var(--s7));overflow-y:auto;animation:modal-in var(--d3) var(--ease-stick) both}
.modal__ic{display:inline-grid;place-items:center;width:56px;height:56px;margin-bottom:var(--s4);background:var(--note-yellow);color:var(--ink);
  border-radius:var(--r1);transform:rotate(-4deg);box-shadow:var(--sh-sticker)}
.modal__sub{padding-top:var(--s3);border-top:var(--hair) solid var(--rule);color:var(--fg-2)}

/* full-screen celebration (queued) */
.uil--cel{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;color:var(--fg);
  background-color:var(--page);background-image:linear-gradient(var(--status-band) 0 var(--sat),transparent 0),var(--grain),var(--page-glow);
  background-repeat:no-repeat,repeat,no-repeat;background-size:auto,180px 180px,100% 100%}
.uil--cel .celebrate{max-width:var(--app-w);margin:0 auto}
.celebrate__num--long{font-size:clamp(84px,27vw,128px)}
.celebrate .rewards{align-items:flex-start}
.celebrate .unlock{max-width:62%}
.celebrate .streakgrid{max-width:340px}

/* ===================== 2. Toast host (one toast at a time) ===================== */
#uiToasts .toast{z-index:900;max-width:calc(var(--app-w) - 2 * var(--s4));margin:0 auto;bottom:calc(var(--tab-h) + var(--sb) + var(--s3))}
#uiToasts .toast.is-out{opacity:0;transform:translateY(10px) rotate(-1deg);transition:opacity .2s var(--ease-out),transform .2s var(--ease-out)}
/* the tab bar is covered or hidden: keep the toast clear of the sheet buttons and the keyboard */
body.ui-lock #uiToasts .toast,body.onbActive #uiToasts .toast{top:calc(var(--sat) + var(--s3));bottom:auto}
body.kbOpen #uiToasts .toast{top:calc(var(--st) + var(--hdr-h) + var(--s2));bottom:auto}

/* ===================== 3. Help sheet + safety box (always .quiet: no motion) ===================== */
.help__e{display:flex;align-items:center;gap:6px}
.help__lead{color:var(--fg-2)}
.help__dir{margin-top:var(--s4);border-bottom:var(--hair) solid var(--rule)}
.help__a:active{background:var(--bg-sunk)}
.help__a--first .help__n{font-weight:var(--w-black)}
/* long service names (TelefonSeelsorge, Hilfetelefon Gewalt gegen Frauen) wrap instead of running into the number */
.help__n{min-width:0;overflow-wrap:break-word;-webkit-hyphens:manual;hyphens:manual}
.helpsheet .chips{gap:6px}
.helpsheet .signoff{margin-top:var(--s5)}
.safety{margin-top:var(--s5)}
.safety .link{margin-top:var(--s1)}
button.helplink{width:100%;text-align:left}
.helplink>.ic:first-child{flex:none}

/* ===================== 4. Settings sheet (#sM: static markup, .sheet inside the legacy .mb root) ===================== */
#sM.mb--sheet{padding:0;align-items:flex-end}
#sM .sheet{z-index:1}
/* sticky close row: the negative margin takes back only the grabber's gap, so the header never covers the grabber */
.settings .sheet__h{position:sticky;top:-10px;z-index:3;margin-top:calc(var(--s2) * -1);padding-top:10px;background:var(--bg-raise)}
/* the close button keeps the legacy .mc class (updA11y labels it) but sits in the header row, not absolutely */
.sheet__h .mc{position:static;top:auto;right:auto}
#teamInput::placeholder{font-family:var(--f-sans);letter-spacing:0;text-transform:none}
.setgroup__m{color:var(--fg-3);text-align:right}
.lang{width:100%;font:inherit;font-family:var(--f-type);font-weight:700;font-size:13px;letter-spacing:.06em;color:var(--fg)}
.lang[aria-checked="true"]{box-shadow:0 3px 0 -1px var(--accent-lo)}
.tsw{width:100%;font:inherit;color:inherit;cursor:pointer}
.tsw.is-locked{cursor:default}
.tsw__d{white-space:nowrap}
/* text size: a 3-step segmented "Aa" control inside a toggle row */
.setsize{gap:var(--s3)}
.setsize__seg{flex:none;width:156px}
.setsize .seg__opt{min-height:var(--tap);padding:4px}
.setsize__aa{font-weight:var(--w-black);font-size:14px;line-height:1}
.setsize__aa--l{font-size:17px}
.setsize__aa--xl{font-size:21px}
/* list rows (membership, help, tutorial, about links) */
button.setrow{width:100%;text-align:left;font:inherit;color:inherit}
.setrow>.ic:first-child{color:var(--fg-2)}
.setrow__v{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46%}
.setrow__at{color:var(--fg-3);font-weight:500}
.setrow[aria-busy="true"]{opacity:.6;pointer-events:none}
#subSection .setsec__hint{margin:var(--s2) 0 var(--s3)}
#subSection .setsec__hint:empty{display:none}
/* streak card: two stat cells, progress to the next milestone, the milestone wall */
.statgrid--4 .statcell{padding:var(--s4) var(--s4) var(--s4) 0;border-left:0}
.statgrid--4 .statcell:nth-child(2n){padding-left:var(--s4);border-left:var(--hair) solid var(--rule)}
.statgrid--4 .statcell:nth-child(n+3){border-top:var(--hair) solid var(--rule)}
.msnext__t{font-weight:var(--w-strong);font-size:15px}
.mswall{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4) var(--s3)}
.ms{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;text-align:center}
.ms__n{display:flex;flex-direction:column;align-items:center;justify-content:center;width:64px;height:64px;border:var(--line) solid var(--rule-2);border-radius:var(--r1);
  font-weight:var(--w-black);font-size:22px;line-height:1;color:var(--fg-2)}
.ms__n small{margin-top:3px;font-family:var(--f-type);font-weight:700;font-size:var(--t-label);letter-spacing:.06em;text-transform:uppercase}
.ms.is-on .ms__n{background:var(--accent-paper);color:var(--on-accent);border-color:var(--accent);transform:rotate(var(--r,-3deg));box-shadow:var(--sh-sticker)}
.ms__l{font-weight:var(--w-strong);font-size:12px;line-height:1.25;color:var(--fg-2);overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;max-width:100%}
/* achievement wall */
.achs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4) var(--s2)}
.ach{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;text-align:center}
.ach__ic{display:grid;place-items:center;width:46px;height:46px;border:var(--line) solid var(--rule-2);border-radius:var(--r1);color:var(--fg-3)}
.ach__ic .ic{width:20px;height:20px}
.ach.is-on .ach__ic{background:var(--accent-paper);color:var(--on-accent);border-color:var(--accent);transform:rotate(-3deg);box-shadow:var(--sh-sticker)}
.ach__l{font-weight:600;font-size:11.5px;line-height:1.25;color:var(--fg-2);overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;max-width:100%}
.ach.is-on .ach__l{color:var(--fg)}
/* team access code (web only) */
.setcode{display:flex;gap:var(--s2)}
.setcode .input{flex:1;min-width:0}
.setcode .btn{flex:none;min-height:52px}
/* about Mental Health Club */
.about{padding:var(--s4);border:var(--line) solid var(--rule-2);border-radius:var(--r2)}
.about__top{display:flex;align-items:center;gap:var(--s3)}
.about__top .heartnote{transform:rotate(-6deg)}
.about__t{font-weight:var(--w-black);font-size:20px;line-height:1.05;letter-spacing:-.01em;text-transform:uppercase}
.about__t span{display:block;margin-top:4px;font-family:var(--f-type);font-weight:700;font-size:var(--t-label);letter-spacing:.1em;text-transform:none;color:var(--fg-2)}
.settings .signoff{margin-top:var(--s5)}

/* ===================== 5. Onboarding (#onbOverlay > .onb) ===================== */
.onb-ov{position:fixed;inset:0;z-index:600;background-color:var(--page);
  background-image:linear-gradient(var(--status-band) 0 var(--sat),transparent 0),var(--grain);background-repeat:no-repeat,repeat;background-size:auto,180px 180px}
.onb-ov .onb{height:100%;min-height:0;max-width:var(--app-w);margin:0 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
/* full-screen steps cover the tab bar (z 610 during the tour); tab steps end above it so the explained tab shows */
#onbOverlay:not(.withTabs){z-index:620}
#onbOverlay.withTabs{bottom:calc(var(--tab-h) + var(--sb))!important}
#onbOverlay.withTabs .onb{padding-bottom:var(--s4)}
.onb__top .link{flex:none;min-width:var(--tap);justify-content:center}
.onb__step{margin-top:var(--s5)}
.onb-ov .onb__art{margin:var(--s7) 0 var(--s6)}
.onb__d{margin-top:var(--s4)}
.onb-logo{display:inline-grid;place-items:center;width:150px;height:150px;padding:0}
.onb-logo .pipsa{width:104px;height:92px;color:var(--ink)}
.onb-logo--heart .heart{width:60px;height:60px}
.onb-tab{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;width:136px;height:136px;padding:0;color:var(--ink)}
.onb-tab .tw{max-width:120px;text-align:center;overflow-wrap:break-word}
.withTabs .onb__t{font-size:clamp(30px,9vw,40px)}
/* step 2 note: the ring marks one short word inside the quote, so the quote gets air between lines
   and the ring gets room on both sides (its stroke reaches 15px past the word) */
.onb__quote{line-height:1.5}
.onb__quote .ring{line-height:1.15;margin:0 13px 0 16px;padding-right:2px;white-space:nowrap}
.onb__quote .ring.is-lead{margin-left:5px}
.onb__help{margin-top:var(--s5)}
.onb__by{margin-top:var(--s5)}
@media (max-height:760px){
  .onb-ov .onb__art{margin:var(--s5) 0 var(--s4)}
  .onb-logo{width:116px;height:116px}
  .onb-logo .pipsa{width:80px;height:71px}
  .onb-logo--heart .heart{width:46px;height:46px}
  .onb-tab{width:104px;height:104px;gap:6px}
  .onb-tab .ic--xl{width:36px;height:36px}
  .onb__note{width:230px;padding:var(--s5) var(--s4) var(--s4)}
  .onb__quote{font-size:20px}
  .onb__t,.withTabs .onb__t{font-size:clamp(28px,8.4vw,36px)}
  .onb__d{font-size:16px}
}
@media (max-height:640px){
  .onb-ov .onb__art{display:none}
  .onb__step{margin-top:var(--s3)}
  .onb__t,.withTabs .onb__t{margin-top:var(--s4)}
}