/*
 * Practice surfaces: the "Your practice" page (/me) and the finish
 * card in the reader. Light is warm paper; dark follows the reader tokens.
 * /me sets the theme on <html data-theme>; the reader uses body.light-theme.
 */
.cw-practice {
  --p-bg: #f7f2ea;
  --p-bg2: #efe6d8;
  --p-ink: #2a2118;
  --p-body: #5b4f43;
  --p-muted: #7a6b5b;
  --p-dim: #7a6b5b;
  --p-gold: #a86f1e;
  /* Gold TEXT (links, kicker text, native-script words, "Change"/"Add your
     city") needs its own ink: --p-gold on light paper measures ~3.8-4.1:1,
     below WCAG AA. This value matches the sign-in sheet's --s-gold-ink
     (5.12:1 on --p-card, ~4.77:1 on --p-bg). --p-gold itself stays for
     non-text uses (bead rings, the today ring, mala strokes). */
  --p-gold-ink: #94601a;
  --p-line: rgba(90, 60, 30, .13);
  --p-btn: #2a2118;
  --p-btn-ink: #f7f2ea;
  --p-card: #fffaf2;
  --p-card-line: rgba(168, 111, 30, .22);
  --p-card-shadow: 0 10px 30px -18px rgba(90, 55, 20, .35);
  --p-thread: #b8322a;
  --p-tassel: #c0392b;
  --p-dot: rgba(90, 60, 30, .07);
  --p-mini: #8a4a22;
  --p-mini-meru: #6b3413;
  --p-bead-filter: none;
  --p-focus: #a86f1e;
  --p-field: #fff;
  --p-ring: rgba(168, 111, 30, .16);
  --p-err: #9c3b2e;
  --p-font-display: 'Cardo', Georgia, serif;
  --p-font-body: 'Outfit', -apple-system, sans-serif;
  --p-font-deva: 'Tiro Devanagari Sanskrit', 'Noto Serif Devanagari', serif;
}

/* The room start screen sits in the reader, which is dark unless
   body.light-theme: same dark tokens, the reader's switch. */
body:not(.light-theme) .cw-practice.rh,
:root[data-theme="dark"] .cw-practice {
  --p-bg: #0d0c10;
  --p-bg2: #1b1610;
  --p-ink: var(--cw-text, #f8f3eb);
  --p-body: #c9beae;
  --p-muted: var(--cw-text-muted, #a89a88);
  --p-dim: #907f6e;
  --p-gold: var(--cw-gold, #e4b85b);
  /* Dark theme's --p-gold already clears 4.5:1 on dark backgrounds, so gold
     text reuses it directly here. */
  --p-gold-ink: var(--cw-gold, #e4b85b);
  --p-line: rgba(228, 184, 91, .12);
  --p-btn: var(--cw-gold, #e4b85b);
  --p-btn-ink: #16110a;
  --p-card: rgba(228, 184, 91, .06);
  --p-card-line: rgba(228, 184, 91, .2);
  --p-card-shadow: none;
  --p-thread: #c2402f;
  --p-dot: rgba(255, 240, 220, .06);
  --p-mini: #a8612e;
  --p-mini-meru: #c47a3c;
  --p-bead-filter: brightness(1.75) saturate(1.1);
  --p-focus: var(--cw-gold, #e4b85b);
  --p-field: #15120e;
  --p-ring: rgba(228, 184, 91, .18);
  --p-err: #e08a78;
  /* White text on --p-err is ~2.60:1; reuse the dark ink used on other
     filled/gold dark buttons (--p-btn-ink) to clear 4.5:1. */
}

/* ── Page ─────────────────────────────────────────── */
/* The warm top wash paints on the page ground (html), not the 430px column,
   so it spans the full window on wide viewports with no hard edge at the
   column's sides. The column itself stays transparent over it. */
html:has(body.p-page) {
  background: radial-gradient(120% 55% at 50% 0%, #efe6d8 0%, #f7f2ea 60%) no-repeat, #f7f2ea;
}
:root[data-theme="dark"]:has(body.p-page) {
  background: radial-gradient(120% 55% at 50% 0%, #1b1610 0%, #0d0c10 60%) no-repeat, #0d0c10;
}

body.p-page {
  margin: 0 auto;
  max-width: 430px;
  min-height: 100vh;
  min-height: 100dvh;
  box-sizing: border-box;
  padding: 18px 22px 36px;
  padding-top: max(18px, env(safe-area-inset-top));
  color: var(--p-ink);
  background: none;
  font: 400 15px/1.5 var(--p-font-body);
  -webkit-font-smoothing: antialiased;
}
.p-page *, .p-page *::before, .p-page *::after { box-sizing: border-box; }
.p-page p, .p-page h1, .p-page h2, .p-page h3 { margin: 0; }

.cw-practice a:focus-visible,
.cw-practice button:focus-visible,
.cw-practice [tabindex="-1"]:focus-visible {
  outline: 2px solid var(--p-focus);
  outline-offset: 3px;
}
.cw-practice [tabindex="-1"]:focus:not(:focus-visible) { outline: none; }
.cw-practice ::selection { background: color-mix(in srgb, var(--p-gold) 32%, transparent); color: var(--p-ink); }

.p-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.p-back {
  color: var(--p-muted); font-size: 14px; text-decoration: none;
  display: inline-flex; gap: 4px; align-items: center;
  min-height: 32px; margin-left: -4px; padding: 0 4px; border-radius: 8px;
}
.p-back:hover { color: var(--p-ink); }
.p-brand { font: 700 15px var(--p-font-display); color: var(--p-gold-ink); }

.p-h1 { font: 400 30px/1.1 var(--p-font-display); }
.p-empty { margin-top: 16px; color: var(--p-body); font: 400 18px/1.4 var(--p-font-display); }

/* Signed out: keeping the practice, first thing on the page */
.p-signin {
  margin-top: 16px; padding: 16px 16px 16px 18px; border-radius: 16px;
  display: flex; align-items: center; gap: 14px;
  background: var(--p-card); border: 1px solid var(--p-card-line); box-shadow: var(--p-card-shadow);
}
.p-signin p { flex: 1 1 0; min-width: 0; color: var(--p-body); font-size: 14.5px; line-height: 1.4; }
.p-signin-btn {
  flex: none; min-height: 44px; padding: 0 20px; border-radius: 12px; border: 0; cursor: pointer;
  background: var(--p-btn); color: var(--p-btn-ink); font: 600 15px var(--p-font-body);
}
.p-signin-btn:hover { filter: brightness(1.08); }

/* ── Bead grid ────────────────────────────────────── */
.p-activity { margin-top: 22px; }
/* The totals head the grid */
.p-totals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
.p-tot-n { font: 400 30px/1 var(--p-font-display); font-variant-numeric: lining-nums; }
.p-tot-l { margin-top: 5px; font-size: 12.5px; color: var(--p-muted); }
.p-grid { width: calc(100% + 8px); margin-left: -8px; display: block; overflow: visible; height: auto; }
.p-mlab { font: italic 400 11px var(--p-font-display); fill: var(--p-muted); }
.p-dlab text { font: 500 8.5px var(--p-font-body); fill: var(--p-dim); }
.p-dot { fill: var(--p-dot); filter: url(#cw-press); }
.p-shine { fill: rgba(255, 240, 215, .45); }
.p-today { stroke: var(--p-gold); }
.p-b {
  cursor: pointer;
  transform-box: fill-box;
  transform-origin: center;
  animation: p-bead .5s cubic-bezier(.2, .8, .2, 1) both;
  animation-delay: calc(var(--w, 0) * 22ms);
}
.p-b.sel circle:first-child { stroke: var(--p-ink); stroke-width: .8; }
@keyframes p-bead { from { opacity: 0; transform: scale(.4); } }

.p-act-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  margin-top: 10px; min-height: 20px; font-size: 13px; color: var(--p-muted);
}
.p-tip { transition: color .2s; }
.p-tip.on { color: var(--p-body); }
.p-tip b { color: var(--p-gold-ink); font-weight: 500; }
.p-legend { flex: none; }

/* ── Your malas: one strand per text ─────────────── */
.p-malas { margin-top: 30px; }
.p-sec-h { font: 500 14px/1.4 var(--p-font-body); color: var(--p-body); margin-bottom: 4px; }
.p-mrow {
  display: block; padding: 14px 6px 15px; margin: 0 -6px;
  border-bottom: 1px solid var(--p-line);
  color: inherit; text-decoration: none;
  transition: background-color .15s ease;
}
.p-mrow:last-child { border-bottom-color: transparent; }
.p-mrow:hover { background: color-mix(in srgb, var(--p-card) 70%, transparent); }
.p-mrow:active { background: var(--p-card); }
.p-mrow:hover .p-m-t { color: var(--p-gold-ink); }
.p-m-hd { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; }
.p-m-w { display: block; min-width: 0; }
.p-m-nat { display: block; font: 400 13px/1.5 var(--p-font-deva); color: var(--p-gold-ink); }
.p-m-t { display: block; font: 400 18px/1.15 var(--p-font-display); overflow-wrap: anywhere; }
.p-m-c { flex: none; font: 400 20px/1 var(--p-font-display); white-space: nowrap; font-variant-numeric: lining-nums; }
.p-m-c small { margin-left: 4px; font: 500 12px var(--p-font-body); color: var(--p-muted); }
.p-m-when { display: block; margin-top: 4px; font-size: 12.5px; color: var(--p-muted); }
.p-strand { display: block; width: 100%; height: auto; margin-top: 10px; overflow: visible; }
.p-st-thread { stroke: var(--p-thread); opacity: .45; }
.p-st-fill { stroke: #6b2f12; }
.p-st-spacer { fill: #efe3c8; stroke: rgba(168, 111, 30, .4); stroke-width: 1; }
.p-st-spacer.on, .p-st-meru { fill: url(#cw-gold); stroke: none; }
:root[data-theme="dark"] .p-st-fill { stroke: #9a5228; }
:root[data-theme="dark"] .p-st-spacer:not(.on) { fill: #2a2217; stroke: rgba(228, 184, 91, .35); }

/* ── Account: greeting, place line, footer ──────── */
.p-h1 { overflow-wrap: anywhere; }
.p-place { margin-top: 26px; }
.p-name + .p-place { margin-top: 14px; }
.p-name-note { margin: 6px 0 0; color: var(--p-body); font-size: 13px; line-height: 1.4; opacity: .8; }
.p-place-edit .p-name-note { margin-top: 6px; }
.p-offline {
  margin: 12px 0 0; padding: 12px 14px; border-radius: 12px;
  background: var(--p-card); border: 1px solid var(--p-card-line);
  color: var(--p-body); font-size: 14px; line-height: 1.45;
}
.p-notice {
  margin: 0 0 14px; padding: 12px 14px; border-radius: 12px;
  background: var(--p-card); border: 1px solid var(--p-gold);
  color: var(--p-ink); font-size: 14px; line-height: 1.45;
}
.p-place-line {
  display: flex; flex-wrap: wrap; align-items: center; column-gap: 7px;
  color: var(--p-body); font-size: 14.5px; line-height: 1.4;
}
.p-pin { color: var(--p-gold); flex: none; }
.p-place-text { overflow-wrap: anywhere; min-width: 0; }
.p-place-act {
  /* 44px tall to tap, without pushing the line apart */
  min-height: 44px; margin: -10px 0; padding: 0 6px; border-radius: 8px;
  background: none; border: 0; cursor: pointer;
  color: var(--p-gold-ink); font: 500 14.5px var(--p-font-body);
}
.p-place-text + .p-place-act { margin-left: -2px; }
.p-pin + .p-place-act { margin-left: -6px; }
.p-place-act:hover { text-decoration: underline; text-underline-offset: 3px; }

.p-place-edit {
  margin-top: 4px; padding: 14px; border-radius: 16px;
  background: var(--p-card); border: 1px solid var(--p-card-line); box-shadow: var(--p-card-shadow);
}
.p-place-label { display: block; font: 500 13px var(--p-font-body); color: var(--p-body); margin: 12px 0 6px; }
.p-place-label:first-child { margin-top: 0; }
.p-place-input {
  display: block; width: 100%; height: 46px; padding: 0 14px; border-radius: 12px;
  border: 1px solid var(--p-line); background: var(--p-field); color: var(--p-ink);
  font: 400 16px var(--p-font-body);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.p-place-input:focus { outline: none; border-color: var(--p-gold); box-shadow: 0 0 0 3px var(--p-ring); }
.p-place-err {
  display: flex; gap: 8px; align-items: flex-start; margin-top: 10px;
  color: var(--p-err); font-size: 13.5px; line-height: 1.4;
}
.p-place-err[hidden] { display: none; }
.p-place-err svg { flex: none; margin-top: 2px; }
.p-place-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.p-place-btn {
  height: 44px; border-radius: 12px; border: 0; cursor: pointer;
  background: var(--p-btn); color: var(--p-btn-ink); font: 600 15px var(--p-font-body);
}
.p-place-btn.ghost { background: none; color: var(--p-ink); border: 1px solid var(--p-line); }
.p-place-btn:disabled { opacity: .5; cursor: default; }

/* The footer sits at the bottom of a short page and after the list on a long one. */
body.p-page { display: flex; flex-direction: column; }
.p-main { flex: 1 0 auto; display: flex; flex-direction: column; }
.p-main > :nth-last-child(2) { margin-bottom: 28px; }
.p-foot {
  margin: auto -22px -36px; padding: 18px 22px max(26px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--p-line);
  font-size: 14px; color: var(--p-body);
}
.p-foot-who { overflow-wrap: anywhere; }
.p-foot-who b { color: var(--p-ink); font-weight: 500; }
.p-foot-acts {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; margin-top: 10px;
}
.p-foot-note { flex: 1 1 0; min-width: 0; color: var(--p-muted); font-size: 13.5px; line-height: 1.35; }
.p-foot-pri { flex: none; }
.p-foot-pri {
  min-height: 44px; padding: 0 18px; border-radius: 12px; border: 0; cursor: pointer;
  background: var(--p-btn); color: var(--p-btn-ink); font: 600 15px var(--p-font-body);
}
.p-foot-sm {
  min-height: 44px; padding: 0 16px; border-radius: 11px; cursor: pointer;
  background: none; border: 1px solid var(--p-line); color: var(--p-ink); font: 500 14px var(--p-font-body);
}
.p-foot-pri:hover, .p-place-btn:hover { filter: brightness(1.08); }

/* Inline "readings not saved" warning, shown in place of the normal footer
 * buttons. */
.p-foot-warn { margin: 0; color: var(--p-body); font-size: 13.5px; line-height: 1.45; }
.p-foot-warn b { color: var(--p-ink); font-weight: 600; }
.p-foot-btns { display: flex; gap: 10px; margin-top: 12px; }
.p-foot-btn {
  flex: 1 1 0; min-height: 44px; padding: 0 14px; border-radius: 11px; cursor: pointer;
  background: var(--p-btn); color: var(--p-btn-ink); border: 0; font: 600 14px var(--p-font-body);
}
.p-foot-btn.ghost { background: none; color: var(--p-ink); border: 1px solid var(--p-line); }
.p-foot-btn:disabled { opacity: .6; cursor: default; }
.p-foot-btn:hover:not(:disabled) { filter: brightness(1.08); }

@media (prefers-reduced-motion: reduce) {
  .p-b { animation: none; }
  .p-tip, .p-mrow, .p-place-input { transition: none; }
}

/* ── Finish moment (in the reader) ────────────────────────────────
 * Three quiet lines over the bottom of the reader: no box, no shadow, no
 * close button. A gradient from clear to the reader's own background keeps
 * the verse above readable. The reader is dark-first and switches with
 * body.light-theme, so the moment carries its own two palettes.
 * Timeline: fade in .9s; bead settles at .3s; at .9s the number rises, the
 * thread fills (1.1s) and a breath of light shows behind the bead; at 1.6s
 * line 3 fades in and a newly reached marker lights. Fades out when the
 * reader moves on, after 60s, or on the quiet × (JS).
 */
.cw-finish {
  --f-bg: #0e0c11;
  --f-bg-clear: rgba(14, 12, 17, 0);
  --f-ink: #f8f3eb;
  --f-body: #c9beae;
  --f-muted: #a89a88;
  --f-gold: #e4b85b;
  --f-gold-soft: rgba(228, 184, 91, .55);
  --f-mark-line: rgba(228, 184, 91, .35);
  --f-thread: #8e3a2c;
  --f-breath: rgba(243, 210, 138, .28);
  --f-x: #7a6e60;

  position: fixed;
  left: 0;
  right: 0;
  bottom: env(safe-area-inset-bottom, 0px);
  z-index: 1500;
  box-sizing: border-box;
  padding: 22px 28px 14px;
  background: linear-gradient(var(--f-bg-clear), var(--f-bg) 38%);
  color: var(--f-ink);
  font: 400 15px/1.5 'Outfit', -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-align: center;
  /* Only its own lines take taps: the reader around them stays usable. */
  pointer-events: none;
  animation: f-in .9s ease-out both;
}
body.light-theme .cw-finish {
  --f-bg: #f6f3ed;
  --f-bg-clear: rgba(246, 243, 237, 0);
  --f-ink: #2a2118;
  --f-body: #5b4f43;
  --f-muted: #6f6152;
  --f-gold: #a86f1e;
  --f-gold-soft: rgba(168, 111, 30, .55);
  --f-mark-line: rgba(168, 111, 30, .4);
  --f-thread: #b8322a;
  --f-breath: rgba(196, 140, 50, .25);
  --f-x: #958676;
}
.cw-finish *, .cw-finish *::before, .cw-finish *::after { box-sizing: border-box; }
:where(.cw-finish) p { margin: 0; }
.cw-finish.f-out { animation: f-fade-out .7s ease-in forwards; }
.cw-finish.f-out .f-x, .cw-finish.f-out .f-body { pointer-events: none; }
.f-row { position: relative; display: inline-block; max-width: 100%; }

.f-say {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.f-body {
  display: inline-grid; justify-items: center; gap: 9px;
  max-width: 100%;
  pointer-events: auto;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.f-l1 {
  display: flex; align-items: center; gap: 9px;
  font: 400 17px/1.2 'Cardo', Georgia, serif;
  color: var(--f-body);
}
.f-words { min-width: 0; }
.f-n { display: inline-block; color: var(--f-ink); animation: f-tick .6s ease-out .9s both; }
.f-bead {
  position: relative; flex: none; width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #a8683b, #6e3517 55%, #2c1105);
  animation: f-settle .9s ease-out .3s both;
}
.f-bead.gold { background: radial-gradient(circle at 38% 32%, #ead09a, #b8893a 55%, #6e4f18); }
.f-bead::after {
  content: ""; position: absolute; inset: -7px; border-radius: 50%;
  background: radial-gradient(circle, var(--f-breath), transparent 70%);
  opacity: 0;
  animation: f-breathe 1.8s ease-out .9s forwards;
}
.f-str { position: relative; width: 220px; max-width: 100%; height: 9px; }
.f-th { position: absolute; left: 0; right: 0; top: 4px; height: 1px; background: var(--f-thread); opacity: .55; }
.f-fill {
  position: absolute; left: 0; top: 3px; height: 3px; border-radius: 2px;
  background: var(--f-gold-soft);
  width: var(--from);
  animation: f-grow 1.1s ease-in-out .9s forwards;
}
.f-q {
  position: absolute; top: 2px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%;
  background: var(--f-bg); border: 1px solid var(--f-mark-line);
}
.f-q.on { background: var(--f-gold-soft); border-color: transparent; }
.f-q.turn { animation: f-mark .8s ease-out 1.6s forwards; }
.f-l3 {
  font: 400 12.5px/1.4 'Outfit', -apple-system, sans-serif;
  color: var(--f-muted);
  animation: f-in .8s ease-out 1.6s both;
}
.f-x {
  /* Quiet: low contrast, small glyph, a full 44px tap target. */
  position: absolute; top: 50%; left: 100%;
  width: 44px; height: 44px; margin: -22px 0 0 6px; padding: 0;
  display: grid; place-items: center;
  border: 0; border-radius: 50%; background: none; cursor: pointer;
  font: 300 20px/1 'Outfit', -apple-system, sans-serif;
  color: var(--f-x);
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  animation: f-in .8s ease-out 1.6s both;
}
.f-x:hover { color: var(--f-muted); }
.f-x:focus-visible { outline: 2px solid var(--f-gold); outline-offset: -4px; }
.f-body:focus-visible { outline: 2px solid var(--f-gold); outline-offset: 3px; border-radius: 6px; }

/* When the verse would run under the lines, the reader makes room for
 * them at the bottom (--cw-finish-h, set by finish-card.js; the room class
 * by app.js). Classic view centres the verse "safely": a verse taller than
 * the space scrolls instead of spilling off the top. */
body.cw-finish-room main { padding-bottom: var(--cw-finish-h, 0px); }
body.cw-finish-room .stanza-container { justify-content: safe center; }

@keyframes f-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes f-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes f-settle { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes f-breathe { 0% { opacity: 0; } 40% { opacity: 1; } 100% { opacity: 0; } }
@keyframes f-tick { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes f-grow { to { width: var(--to); } }
@keyframes f-mark { to { background: var(--f-gold-soft); border-color: transparent; } }

@media (prefers-reduced-motion: reduce) {
  /* Static: everything in its final place, no fades. */
  .cw-finish, .f-n, .f-bead, .f-bead::after, .f-fill, .f-q.turn, .f-l3, .f-x { animation: none; }
  .f-fill { width: var(--to); }
  .f-q.turn { background: var(--f-gold-soft); border-color: transparent; }
  .cw-finish.f-out { animation: none; opacity: 0; }
}

/* ── Sign-in sheet (reader and /me) ───────────────────────────────
 * Its own sheet, in the settings sheet's language: scrim, 26px top corners,
 * grab handle, close ×. Dark by default like the reader; light with the
 * reader's body.light-theme or /me's data-theme="light".
 */
.cw-sheet-scrim {
  position: fixed; inset: 0; z-index: 5200;
  background: rgba(0, 0, 0, .55);
}
.cw-sheet {
  --s-card: #1d1914;
  --s-ink: var(--cw-text, #f8f3eb);
  --s-body: #c9beae;
  --s-muted: var(--cw-text-muted, #a89a88);
  --s-gold: var(--cw-gold, #e4b85b);
  /* Gold for text (links, the "Signed in" line): 4.5:1 on the card. */
  --s-gold-ink: var(--s-gold);
  --s-line: rgba(228, 184, 91, .16);
  --s-field: #15120e;
  --s-btn: var(--cw-gold, #e4b85b);
  --s-btn-ink: #16110a;
  --s-err: #e08a78;
  --s-ring: rgba(228, 184, 91, .18);
  --s-shade: rgba(0, 0, 0, .5);

  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5201;
  max-width: 440px; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px);
  margin: 0 auto; overflow-y: auto; overscroll-behavior: contain;
  box-sizing: border-box;
  padding: 10px 22px max(28px, env(safe-area-inset-bottom));
  border-radius: 26px 26px 0 0;
  background: var(--s-card);
  box-shadow: 0 -18px 50px -14px var(--s-shade);
  color: var(--s-ink);
  font: 400 15px/1.5 'Outfit', -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-align: left;
  animation: s-up .32s cubic-bezier(.2, .8, .2, 1) both;
}
body.light-theme .cw-sheet,
:root[data-theme="light"] .cw-sheet {
  --s-card: #fffaf2;
  --s-ink: #2a2118;
  --s-body: #5b4f43;
  --s-muted: #7a6b5b;
  --s-gold: #a86f1e;
  --s-gold-ink: #94601a;
  --s-line: rgba(90, 60, 30, .14);
  --s-field: #fff;
  --s-btn: #2a2118;
  --s-btn-ink: #f7f2ea;
  --s-err: #9c3b2e;
  --s-ring: rgba(168, 111, 30, .16);
  --s-shade: rgba(40, 25, 10, .18);
}
body.light-theme .cw-sheet-scrim,
:root[data-theme="light"] .cw-sheet-scrim { background: rgba(30, 20, 10, .28); }
@keyframes s-up { from { transform: translateY(100%); } }

.cw-sheet *, .cw-sheet *::before, .cw-sheet *::after { box-sizing: border-box; }
.cw-sheet p, .cw-sheet h2 { margin: 0; }
.cw-sheet-grab { width: 38px; height: 4px; border-radius: 2px; background: var(--s-line); margin: 0 auto 14px; }
.cw-sheet-x {
  position: absolute; top: 12px; right: 10px;
  width: 44px; height: 44px; border-radius: 50%; padding: 0;
  display: grid; place-items: center;
  background: none; border: 0; color: var(--s-muted); cursor: pointer;
}
.cw-sheet-x:hover { color: var(--s-ink); }
.cw-sheet button:focus-visible, .cw-sheet a:focus-visible {
  outline: 2px solid var(--s-gold);
  outline-offset: 3px;
}
.cw-sheet ::selection { background: color-mix(in srgb, var(--s-gold) 32%, transparent); color: var(--s-ink); }

.si-h { font: 400 26px/1.15 'Cardo', Georgia, serif; text-wrap: balance; padding-right: 36px; overflow-wrap: anywhere; }
.si-p { color: var(--s-body); font-size: 14.5px; line-height: 1.45; margin-top: 6px; }
.si-p b { color: var(--s-ink); font-weight: 500; overflow-wrap: anywhere; }
/* A leader with followers: signing in may take you to your own room. */
.si-warn {
  margin-top: 12px; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--s-line); background: color-mix(in srgb, var(--s-gold) 9%, transparent);
  color: var(--s-ink); font-size: 14px; line-height: 1.45;
}
.si-ok { color: var(--s-gold-ink); font-weight: 500; font-size: 14.5px; margin-bottom: 14px; padding-right: 36px; }
.si-label { display: block; font: 500 13px 'Outfit', -apple-system, sans-serif; color: var(--s-body); margin: 16px 0 6px; }
.si-input {
  display: block; width: 100%; height: 50px; padding: 0 14px; border-radius: 12px;
  border: 1px solid var(--s-line); background: var(--s-field); color: var(--s-ink);
  font: 400 17px 'Outfit', -apple-system, sans-serif;
  caret-color: var(--s-gold);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.si-input:focus { outline: none; border-color: var(--s-gold); box-shadow: 0 0 0 3px var(--s-ring); }
.si-btn {
  display: block; width: 100%; height: 52px; margin-top: 12px; border-radius: 14px; border: 0; cursor: pointer;
  background: var(--s-btn); color: var(--s-btn-ink);
  font: 600 16px 'Outfit', -apple-system, sans-serif;
  transition: filter .15s ease, opacity .15s ease;
}
.si-btn:hover:not(:disabled) { filter: brightness(1.08); }
.si-btn:disabled { opacity: .45; cursor: default; }
.si-btn.si-ghost { background: none; color: var(--s-ink); border: 1px solid var(--s-line); }
.si-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* "Pick the one you can read" at Welcome (step 3): optional, like the name. */
.si-scripts { border: 0; margin: 0; padding: 0; min-width: 0; }
.si-script-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.si-script-grid input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.si-script {
  display: flex; flex-direction: column; gap: 2px; padding: 8px 8px 7px;
  border: 1px solid var(--s-line); border-radius: 10px; background: var(--s-field); cursor: pointer;
}
.si-script-native { font: 600 15px/1.3 'Tiro Devanagari Sanskrit', 'Noto Serif', Georgia, serif; color: var(--s-ink); }
.si-script[data-script="te"] .si-script-native { font-family: var(--cw-font-telugu), serif; }
.si-script[data-script="kn"] .si-script-native { font-family: var(--cw-font-kannada), serif; }
.si-script[data-script="ta"] .si-script-native { font-family: var(--cw-font-tamil), serif; }
.si-script[data-script="ml"] .si-script-native { font-family: var(--cw-font-malayalam), serif; }
.si-script[data-script="gu"] .si-script-native { font-family: var(--cw-font-gujarati), serif; }
.si-script[data-script="en"] .si-script-native,
.si-script[data-script="en-simple"] .si-script-native { font-family: var(--cw-font-display, Georgia), serif; }
.si-script-name { font: 400 10.5px 'Outfit', -apple-system, sans-serif; color: var(--s-muted); }
.si-script-grid input:checked + .si-script { border-color: var(--s-gold); box-shadow: 0 0 0 1px var(--s-gold) inset; }
.si-script-grid input:focus-visible + .si-script { outline: 2px solid var(--s-gold); outline-offset: 2px; }
@media (max-width: 380px) { .si-script-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.si-consent { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; }
.si-consent input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--s-gold); cursor: pointer; }
.si-consent input:focus-visible { outline: 2px solid var(--s-gold); outline-offset: 2px; }
.si-consent-label { font: 400 13.5px/1.4 'Outfit', -apple-system, sans-serif; color: var(--s-body); cursor: pointer; }
.si-consent-label a { color: var(--s-gold-ink); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.si-fine { color: var(--s-muted); font-size: 12.5px; line-height: 1.4; margin-top: 12px; text-align: center; }
.si-err { display: flex; gap: 8px; align-items: flex-start; color: var(--s-err); font-size: 13.5px; line-height: 1.4; margin-top: 10px; }
.si-err[hidden] { display: none; }
.si-err svg { flex: none; margin-top: 2px; }
.si-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 12px; margin-top: 4px; }
.si-link {
  min-height: 44px; padding: 0; background: none; border: 0; cursor: pointer;
  color: var(--s-gold-ink); font: 500 14px 'Outfit', -apple-system, sans-serif;
}
.si-link:disabled { color: var(--s-body); cursor: default; font-variant-numeric: tabular-nums; }
.si-link:hover:not(:disabled) { text-decoration: underline; text-underline-offset: 3px; }
/* "Not now" at the Welcome step: quiet, centred under the main button. */
.si-link.si-quiet { display: block; margin: 6px auto 0; padding: 0 12px; color: var(--s-body); font-weight: 400; }

/* Six boxes drawn over one real input (paste and one-time-code autofill). */
.si-code { position: relative; margin-top: 18px; }
.si-cells { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.si-cell {
  height: 58px; border-radius: 12px; border: 1px solid var(--s-line); background: var(--s-field);
  display: grid; place-items: center; min-width: 0;
  font: 400 28px 'Cardo', Georgia, serif; color: var(--s-ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.si-cell.on { border-color: var(--s-gold); box-shadow: 0 0 0 3px var(--s-ring); }
.si-cells.bad .si-cell { border-color: var(--s-err); box-shadow: none; }
.si-cells.bad .si-cell.on { box-shadow: 0 0 0 3px color-mix(in srgb, var(--s-err) 18%, transparent); }
.si-code-input {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0;
  border: 0; outline: none; background: transparent;
  color: transparent; -webkit-text-fill-color: transparent; caret-color: transparent;
  font-size: 16px; letter-spacing: 0; cursor: text;
}
.si-code-input::selection { background: transparent; }
.si-code-input:-webkit-autofill { -webkit-box-shadow: 0 0 0 60px transparent inset; transition: background-color 600000s 0s; }

@media (prefers-reduced-motion: reduce) {
  .cw-sheet { animation: none; }
  .si-input, .si-btn, .si-cell { transition: none; }
}

/* ── Your room's start screen (in the reader) ───────────────────────
 * One DOM for phone and desktop: one column on a phone, two from 900px.
 * The week card exists twice (.rh-narrow under the greeting, .rh-wide in
 * the side column); display: none takes the hidden one out of the focus
 * order too. Theme: see the dark token block above.
 */
.rh {
  --rh-soft: color-mix(in srgb, var(--p-card) 55%, var(--p-bg));
  display: block;
  box-sizing: border-box;
  min-height: 100%;
  padding: 20px 18px 36px;
  background: var(--p-bg);
  color: var(--p-ink);
  font: 400 15px/1.5 var(--p-font-body);
  text-align: left;
  -webkit-font-smoothing: antialiased;
}
.rh *, .rh *::before, .rh *::after { box-sizing: border-box; }
:where(.rh) :where(p, h2, h3, ul) { margin: 0; }
:where(.rh) ul { padding: 0; list-style: none; }
:where(.rh) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.rh svg { flex: none; }

.rh .rh-wide, .rh-mala, .rh-note { display: none; }

.rh-hi { font: 400 30px/1.15 var(--p-font-display); }
.rh-sub { margin-top: 4px; color: var(--p-body); font-size: 14.5px; }
.rh-k { margin: 22px 0 8px; font: 500 13px/1.4 var(--p-font-body); color: var(--p-muted); }

/* Week card */
.rh-week {
  --rh-soft: color-mix(in srgb, var(--p-card) 55%, var(--p-bg));
  box-sizing: border-box;
  margin-top: 14px;
  padding: 14px 16px 12px;
  border: 1px solid var(--p-line);
  border-radius: 16px;
  background: var(--rh-soft);
}
.rh-wk-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.rh-wk-n { font: 400 21px/1.15 var(--p-font-display); }
.rh-wk-s { margin-top: 3px; font-size: 13.5px; font-weight: 500; color: var(--p-gold-ink); }
.rh-open {
  display: inline-flex; align-items: center; gap: 2px; flex: none;
  min-height: 44px; margin: -11px -6px 0 0; padding: 0 6px; border-radius: 10px;
  white-space: nowrap; color: var(--p-ink); font-size: 13.5px; font-weight: 500;
}
.rh-open:hover { color: var(--p-gold-ink); }
.rh-days { display: flex; justify-content: space-between; margin-top: 14px; }
.rh-day { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 34px; }
.rh-bead { width: 18px; height: 18px; border-radius: 50%; overflow: visible; }
.rh-bead use { filter: var(--p-bead-filter); }
.rh-bead-empty { fill: var(--p-dot); stroke: color-mix(in srgb, var(--p-muted) 45%, transparent); stroke-width: 1.1; stroke-dasharray: 2.4 2; }
.rh-day.is-future .rh-bead-empty { stroke: none; }
.rh-day.is-today .rh-bead-empty { fill: none; stroke: var(--p-gold); stroke-width: 1.7; stroke-dasharray: none; }
.rh-day.is-today .rh-bead { box-shadow: 0 0 0 3px var(--p-ring); }
.rh-day.is-today.is-done .rh-bead { box-shadow: 0 0 0 1.5px var(--p-gold), 0 0 0 4.5px var(--p-ring); }
.rh-day-l { font-size: 11.5px; color: var(--p-muted); }
.rh-day.is-today .rh-day-l { color: var(--p-gold-ink); font-weight: 600; }
.rh-week p { margin: 0; }
.rh-week *, .rh-week *::before, .rh-week *::after { box-sizing: border-box; }
.rh-wk-tot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--p-line); }
.rh-tot-n { font: 400 28px/1 var(--p-font-display); font-variant-numeric: lining-nums; }
.rh-tot-l { margin-top: 4px; font-size: 12.5px; color: var(--p-muted); }
.rh-wk-f { margin-top: 10px; font-size: 12.5px; color: var(--p-muted); }

/* Continue */
.rh-cont {
  padding: 16px 16px 14px;
  border: 1px solid var(--p-card-line);
  border-radius: 20px;
  background: var(--p-card);
  box-shadow: var(--p-card-shadow);
}
.rh-nat { font: 400 15px/1.5 var(--p-font-deva); color: var(--p-gold-ink); }
.rh-title { margin-top: 2px; font: 400 23px/1.15 var(--p-font-display); }
.rh-where { margin-top: 6px; color: var(--p-body); font-size: 13.5px; }
.rh-bar { height: 4px; margin-top: 10px; overflow: hidden; border-radius: 2px; background: var(--p-dot); }
.rh-bar i { display: block; height: 100%; background: var(--p-gold); }
.rh .rh-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 50px; margin-top: 14px; border-radius: 14px;
  background: var(--p-btn); color: var(--p-btn-ink);
  font: 600 15.5px/1.2 var(--p-font-body);
}
.rh .rh-btn:hover { filter: brightness(1.08); }
.rh .rh-ghost { background: none; color: var(--p-ink); border: 1px solid var(--p-line); }
.rh .rh-ghost:hover { filter: none; border-color: var(--p-card-line); background: var(--rh-soft); }
.rh .rh-invite { margin-top: 18px; }

/* Your texts */
.rh .rh-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; min-height: 44px; padding: 13px 2px;
  border-bottom: 1px solid var(--p-line);
  text-align: left;
}
.rh-row-w { display: flex; flex-direction: column; min-width: 0; }
.rh-row-t { font: 400 18px/1.2 var(--p-font-display); }
.rh-row-m { margin-top: 1px; font-size: 12.5px; color: var(--p-muted); }
.rh-row svg { color: var(--p-muted); }
.rh-row:hover .rh-row-t { color: var(--p-gold-ink); }
.rh .rh-all {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 2px; padding: 0 2px;
  color: var(--p-gold-ink); font-size: 14px; font-weight: 500;
}
.rh .rh-all:hover { color: var(--p-ink); }

/* Mala and note (desktop) */
.rh-mala { margin-top: 16px; padding: 16px; border: 1px solid var(--p-line); border-radius: 16px; background: var(--p-card); }
.rh-mala-t { font: 400 17px/1.3 var(--p-font-display); }
.rh-mala-m { margin-top: 2px; font-size: 13px; color: var(--p-muted); }
.rh-note { margin-top: 12px; font-size: 13px; color: var(--p-muted); }

.rh-grow { margin-top: 18px; padding: 14px 16px 6px; border: 1px solid var(--p-card-line); border-radius: 16px; background: var(--p-card); }
.rh-grow-t { font: 400 19px/1.25 var(--p-font-display); }
.rh-grow-p { margin-top: 4px; font-size: 13.5px; line-height: 1.45; color: var(--p-body); }
.rh .rh-grow-go {
  display: inline-flex; align-items: center; gap: 2px; min-height: 44px; margin-left: -2px; padding: 0 2px;
  color: var(--p-gold-ink); font-size: 14.5px; font-weight: 600;
}
.rh .rh-grow-go:hover { color: var(--p-ink); }

@media (min-width: 900px) {
  .rh {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    column-gap: 36px;
    align-items: start;
    padding: 34px max(24px, calc((100% - 992px) / 2)) 48px;
  }
  .rh .rh-wide, .rh-mala, .rh-note { display: block; }
  .rh .rh-narrow { display: none; }
  .rh-side > .rh-k:first-child { margin-top: 6px; }
  .rh-side .rh-week { margin-top: 0; }
  .rh .rh-side .rh-invite { margin-top: 16px; }
}

.rh .gr-switch {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3px;
  max-width: 340px; margin: 0 0 18px; padding: 3px;
  border: 1px solid var(--p-line); border-radius: 13px; background: var(--rh-soft);
}
.rh .gr-sw { min-height: 40px; border-radius: 10px; color: var(--p-muted); font-size: 14px; font-weight: 500; }
.rh .gr-sw.is-on { background: var(--p-card); color: var(--p-ink); box-shadow: inset 0 0 0 1px var(--p-card-line); cursor: default; }
.rh .gr-sw:not(.is-on):hover { color: var(--p-ink); }
.rh .gr-sw:focus-visible, .rh .gr-card:focus-visible, .rh .gr-gp:focus-visible, .rh .gr-act:focus-visible, .rh .gr-back:focus-visible {
  outline: 2px solid var(--p-focus); outline-offset: 2px;
}

.gr-groups { max-width: 700px; margin: 0 auto; }
.gr-list { display: grid; gap: 10px; }
.rh .gr-card {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; min-height: 76px; padding: 14px 16px;
  border: 1px solid var(--p-line); border-radius: 16px; background: var(--p-card);
  text-align: left;
}
.rh .gr-card.is-live { border-color: var(--p-card-line); background: linear-gradient(180deg, var(--p-ring), transparent), var(--p-card); }
.rh .gr-card:hover { border-color: var(--p-card-line); }
.gr-card-w { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gr-card-t { font: 400 19px/1.2 var(--p-font-display); color: var(--p-ink); }
.gr-card-m { font-size: 13px; color: var(--p-muted); }
.gr-go { display: inline-flex; align-items: center; gap: 2px; flex: none; color: var(--p-gold-ink); font-size: 13.5px; font-weight: 500; }
.rh .gr-start { margin-top: 14px; }
.gr-note { margin-top: 18px; font-size: 13px; color: var(--p-muted); text-align: center; }
@media (min-width: 769px) {
  .gr-list { grid-template-columns: 1fr 1fr; }
  .gr-groups .gr-switch { margin-inline: auto; }
  .rh .gr-start { width: auto; margin-inline: auto; padding: 0 32px; }
}

.rh .gr-state {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  margin-top: 14px; padding: 11px 14px;
  border: 1px solid var(--p-line); border-radius: 14px; background: var(--rh-soft);
  font-size: 14px;
}
.rh .gr-state.is-live { border-color: var(--p-card-line); }
.gr-state b { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.gr-state span { color: var(--p-muted); font-size: 13px; white-space: nowrap; }
.gr-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--p-dim); }
.gr-state.is-live .gr-dot { background: #3f9e68; box-shadow: 0 0 0 3px rgba(63, 158, 104, .18); }
body:not(.light-theme) .gr-state.is-live .gr-dot { background: var(--cw-green, #5cc98a); }
.gr-week .rh-days { margin-top: 2px; }

.rh .gr-gp {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; min-height: 60px; margin-top: 22px; padding: 12px 16px;
  border: 1px dashed var(--p-gold); border-radius: 16px; text-align: left;
}
.rh .gr-gp:hover { background: var(--rh-soft); }
.gr-gp-w { display: flex; flex-direction: column; min-width: 0; }
.gr-gp-t { font-weight: 500; }
.gr-gp-m { font-size: 13px; color: var(--p-muted); }

.gr-chip {
  display: inline-flex; align-items: center; min-height: 32px; flex-shrink: 0;
  padding: 0 12px; border: 1px solid var(--cw-gold-border-strong); border-radius: 999px;
  background: var(--cw-gold-glow); color: var(--cw-gold);
  font: 500 13px/1 var(--cw-font-body); white-space: nowrap; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.gr-chip[hidden] { display: none; }
.gr-chip:hover { background: var(--cw-gold-glow-strong); }
.gr-chip:focus-visible { outline: 2px solid var(--cw-gold); outline-offset: 2px; }
body.light-theme .gr-chip { color: #94601a; border-color: rgba(168, 111, 30, .45); background: #f6ead6; }

.rh.gr-page, .rh.gr-your-groups { display: block; }
.gr-page-in { max-width: 760px; margin-inline: auto; }
body.group-screen header { display: none; }
.rh .gr-back {
  display: flex; align-items: center; gap: 4px; min-height: 44px; margin-top: -8px;
  color: var(--p-muted); font-size: 14px;
}
.gr-back svg { transform: scaleX(-1); color: var(--p-gold-ink); }
.rh .gr-back:hover { color: var(--p-ink); }
.gr-head { display: flex; flex-direction: column; gap: 4px; }
.gr-name { font: 400 30px/1.15 var(--p-font-display); }
.gr-page .gr-wide { display: none; }
.rh .gr-open.gr-narrow { margin-top: 28px; }
.gr-cols { display: grid; gap: 0; }
.gr-col { min-width: 0; }
.gr-k { margin: 22px 0 8px; font: 500 13px/1.4 var(--p-font-body); color: var(--p-gold-ink); }
.gr-rows { border: 1px solid var(--p-line); border-radius: 16px; background: var(--p-card); overflow: hidden; }
.gr-li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 60px; padding: 11px 14px; border-bottom: 1px solid var(--p-line);
}
.gr-li:last-child { border-bottom: 0; }
.gr-li-w { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.gr-li-t { font-size: 15px; }
.gr-li-m { font-size: 13px; color: var(--p-muted); overflow-wrap: anywhere; }
.rh .gr-act {
  display: inline-flex; align-items: center; gap: 2px; flex: none; min-height: 44px; padding: 0 4px;
  color: var(--p-gold-ink); font-size: 14px; font-weight: 500; white-space: nowrap;
}
.rh .gr-act:hover { color: var(--p-ink); }
.rh .gr-leave { color: var(--p-muted); }
.gr-banner {
  display: flex; flex-direction: column; gap: 10px; margin-top: 18px; padding: 14px 16px;
  border: 1px solid #c86a18; border-radius: 14px; background: rgba(230, 126, 34, .1);
  font-size: 14px; line-height: 1.45; color: var(--p-body);
}
.gr-banner b { color: var(--p-ink); font-weight: 600; }
.rh .gr-banner-btn {
  min-height: 44px; padding: 0 16px; border-radius: 12px;
  background: #b85c0e; color: #fff; font-weight: 600;
}
body:not(.light-theme) .rh .gr-banner-btn { background: var(--cw-saffron, #e67e22); color: #16110a; }
.rh .gr-banner-btn:hover { filter: brightness(1.08); }
.rh .gr-banner-btn:focus-visible { outline: 2px solid var(--p-focus); outline-offset: 2px; }
@media (min-width: 700px) {
  .gr-head { flex-direction: row; justify-content: space-between; align-items: center; gap: 16px; }
  .rh .gr-head .gr-open { display: flex; width: auto; margin-top: 0; padding: 0 24px; }
  .gr-page .gr-narrow { display: none; }
  .gr-page-in.is-owner .gr-cols { grid-template-columns: 1fr 1fr; column-gap: 20px; align-items: start; }
  .gr-banner { flex-direction: row; align-items: center; justify-content: space-between; }
  .rh .gr-banner-btn { flex: none; }
}

.gr-menu {
  position: fixed; top: 56px; right: 12px; z-index: 1200;
  width: min(260px, calc(100vw - 24px)); padding-bottom: 4px;
  background: var(--cw-bg-elevated); color: var(--cw-text);
  border: 1px solid var(--cw-gold-border); border-radius: 14px;
  box-shadow: 0 18px 40px var(--cw-shadow);
  font: 400 14px/1.4 var(--cw-font-body);
}
.gr-menu p, .gr-menu hr { margin: 0; }
.gr-who { display: flex; flex-direction: column; padding: 12px 14px; border-bottom: 1px solid var(--cw-border); }
.gr-who b { font-weight: 500; }
.gr-who small { color: var(--cw-text-muted); font-size: 12.5px; overflow-wrap: anywhere; }
.gr-mk { padding: 10px 14px 2px; color: var(--cw-gold); font-size: 12.5px; }
.gr-menu hr { border: 0; border-top: 1px solid var(--cw-border); margin: 4px 0; }
.gr-mi {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  width: 100%; min-height: 44px; padding: 0 14px; border: 0; background: none;
  color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.gr-mi small { color: var(--cw-text-muted); font-size: 12.5px; white-space: nowrap; }
.gr-mi:hover, .gr-mi:focus-visible { background: var(--cw-gold-glow); outline: none; }
.gr-mi.is-here { background: var(--cw-gold-glow); cursor: default; }
body.light-theme .gr-mk { color: #94601a; }
.me-initial[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--cw-gold); }

.groups-back-link {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  min-width: 44px; min-height: 44px; margin: -6px -10px -6px -14px;
  color: var(--cw-gold); border-radius: 8px; -webkit-tap-highlight-color: transparent;
}
.groups-back-link[hidden] { display: none; }
.groups-back-link:focus-visible { outline: 2px solid var(--cw-gold); outline-offset: -2px; }
body.light-theme .groups-back-link { color: #94601a; }
body.room-home .overlay-nav { display: none !important; }
html body.room-home.group-home #bs-lead-section { display: block !important; }