/* =====================================================================
   THE FELT — design system
   Palette: ink charcoal / brass-gold chips / card red / bone text
   Display: Archivo (condensed, casino-signage). Body: Inter. Mono: Major Mono.
   Signature: suit-symbol dividers + chip-stack podium.
   ===================================================================== */
:root{
  --ink:        #11100f;   /* near-black, warm */
  --ink-2:      #1a1817;   /* card surface */
  --ink-3:      #252220;   /* raised surface */
  --line:       #34302c;   /* hairline */
  --bone:       #efe9df;   /* primary text */
  --bone-dim:   #9d958a;   /* secondary text */
  --brass:      #d9a441;   /* gold chip accent */
  --brass-deep: #b8821f;
  --red:        #c33545;   /* hearts/diamonds, alerts */
  --green:      #3f9e6a;   /* yes / win */
  --amber:      #d98a2b;   /* tentative */
  --felt:       #1f3d2e;   /* a whisper of felt, used sparingly */
  --radius:     14px;
  --shadow:     0 20px 50px -25px rgba(0,0,0,.8);
  --max:        1080px;
}

*{ box-sizing:border-box; }
/* NOTE: overscroll-behavior-y:none was set here on 1 Aug 2026 to kill
   pull-to-refresh, and REVERTED the same day. It did not stop the refresh
   in a standalone PWA — Safari's support for it there is unreliable — and
   it cost the native rubber-band at the top and bottom of every scroll in
   the app, which Ben noticed immediately as a hard stop on Home. A global
   change to how every screen feels, in exchange for nothing. If this is
   ever tried again, it needs to be scoped to the modal case, not applied
   app-wide, and it needs device evidence that it works at all first. */
html{ -webkit-text-size-adjust:100%; background-color:var(--ink); }
body{
  margin:0;
  max-width:100%;
  min-height:100vh;
  background-color:var(--ink);
  color:var(--bone);
  font-family:Inter, system-ui, sans-serif;
  font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
/* atmospheric backdrop on a fixed layer (avoids iOS background-attachment bugs) */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-color:var(--ink);
  background-image:
    radial-gradient(110% 70% at 50% -8%, rgba(217,164,65,.10) 0%, rgba(217,164,65,0) 42%),
    radial-gradient(140% 90% at 50% -20%, rgba(31,61,46,.55) 0%, rgba(31,61,46,0) 50%),
    radial-gradient(130% 100% at 50% 30%, rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 100%),
    linear-gradient(180deg, #16140f 0%, var(--ink) 60%);
  background-repeat:no-repeat;
}
/* faint dot texture on a second fixed layer */
body::after{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.018) 1px, transparent 1px);
  background-size:4px 4px;
}
/* The app bar stays put and the page scrolls underneath it.
   position:STICKY, not fixed — sticky is laid out as part of the scrolling
   content, so it does not carry the iOS mis-paint that has drifted this
   app's fixed elements six times (see .fab and #scroll-top below).
   The rule has to live HERE, on the wrapper, not on .nav. .nav has had
   `position:sticky; top:0` since it was written, and it never stuck: a
   sticky box can only travel within its parent's box, and #nav is exactly
   the bar's own height. No room to travel. Added 1 Aug 2026. */
#nav{ position:sticky; top:0; z-index:50; }
main{ position:relative; z-index:1; }
/* Toasts must sit above .scrim (z-index 150), not merely above the page.
   #toast-host was grouped with #nav and main at z-index 1, and because it
   is positioned that made it its own STACKING CONTEXT — so .toast's
   z-index:200 only ever competed with its siblings inside the host, never
   with the scrim. The host lost at 1 vs 150 and took every toast down with
   it. Any toast raised while a modal was open rendered behind the scrim
   and was invisible: not just the pot-split lock explanations, but every
   error toast from inside every modal in the app.
   Found on device 1 Aug 2026 during the v2.6.0 round. Raising the host is
   the fix — raising .toast alone would have done nothing, which is what
   makes this worth a comment. */
#toast-host{ position:relative; z-index:300; }
/* overflow-y pinned explicitly: setting only overflow-x forces the other
   axis to compute as `auto` per spec, silently turning <main> into its
   own scroll container — and Safari has a long-documented bug where
   position:fixed descendants of an overflow ancestor anchor to THAT
   ancestor instead of the viewport. .fab lives inside <main>, so this
   was a real contributor to the recurring FAB drift. */
main{ overflow-x:clip; overflow-y:visible; max-width:100vw; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
img{ max-width:100%; display:block; }
/* width safety: nothing should force the page wider than the screen */
.card, .wrap, .stat, .bubble{ max-width:100%; }
.grow{ min-width:0; }
h1,h2,h3,h4{ font-family:'Archivo', sans-serif; margin:0; line-height:1.02; letter-spacing:-.01em; }

/* ---- Display utility ---- */
.display{
  font-family:'Archivo Expanded','Archivo',sans-serif;
  font-weight:800; text-transform:uppercase; letter-spacing:.02em;
  overflow-wrap:break-word; word-break:break-word; max-width:100%;
}
/* hero page titles: warm gradient fill + soft glow, like lit signage */
h1.display{
  color:#ecdcb8;  /* fallback if background-clip:text unsupported */
  background:linear-gradient(180deg, #fbf2e0 0%, #e8d4a8 55%, #cba05a 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:0 1px 16px rgba(217,164,65,.12);
}
.eyebrow{
  font-family:'Major Mono Display', monospace;
  font-size:.7rem; letter-spacing:.25em; text-transform:lowercase;
  color:var(--brass); overflow-wrap:break-word; max-width:100%;
}
.muted{ color:var(--bone-dim); }
.mono{ font-family:'Major Mono Display',monospace; }

/* ---- Layout ---- */
.wrap{ max-width:var(--max); width:100%; margin:0 auto; padding:0 20px; }
.stack{ display:flex; flex-direction:column; gap:16px; }
.row{ display:flex; align-items:center; gap:10px; }
.between{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.grow{ flex:1; }
.wrap-gap{ flex-wrap:wrap; }

/* ---- Suit divider (signature structural device) ---- */
.suits{
  display:flex; align-items:center; gap:14px; color:var(--line);
  font-size:.85rem; user-select:none;
}
.suits::before,.suits::after{ content:""; height:1px; flex:1;
  background:linear-gradient(90deg, transparent, var(--line) 50%, transparent); }
.suit-red{ color:var(--red); text-shadow:0 0 10px rgba(195,53,69,.3); }
.suit-gold{ color:var(--brass); text-shadow:0 0 10px rgba(217,164,65,.3); }

/* ---- Buttons ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:1px solid var(--line); background:var(--ink-3); color:var(--bone);
  padding:11px 16px; border-radius:10px; font-weight:600; font-size:.9rem;
  transition:transform .08s ease, border-color .15s ease, background .15s ease;
}
.btn:hover{ border-color:var(--brass-deep); }
.btn:active{ transform:translateY(1px); }
.btn:focus-visible{ outline:2px solid var(--brass); outline-offset:2px; }
.btn-primary{
  background:linear-gradient(180deg,var(--brass),var(--brass-deep));
  color:#231a06; border-color:var(--brass-deep); font-weight:800;
}
.btn-primary:hover{ filter:brightness(1.06); }
.btn-ghost{ background:transparent; }
.btn-danger{ border-color:#5a2730; color:#e88a96; }
.btn-sm{ padding:7px 11px; font-size:.8rem; }
.btn[disabled]{ opacity:.45; cursor:not-allowed; }
/* A destructive admin control, set apart from the page above it. Introduced
   3 Aug 2026 for delete-poll (mockup-poll-back-and-delete.html).
   The rule these express is the one approved for delete-feedback first: a
   destructive control never sits beside one people tap every day, so it goes
   at the BOTTOM and you scroll past the whole thing to reach it.
   Note delete-feedback itself still draws its equivalent with inline styles
   (a dashed red box) rather than these classes. Same intent, different paint.
   Worth unifying one day; not worth touching a shipped, tested feature for
   cosmetics today. */
.danger-zone{ border-top:1px solid var(--line); margin-top:18px; padding-top:14px; }
.danger-label{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--red); font-weight:700; margin-bottom:8px; }

/* ---- Inputs ---- */
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-size:.75rem; letter-spacing:.04em; color:var(--bone-dim); text-transform:uppercase; }
input,select,textarea{
  font-family:inherit; font-size:16px; color:var(--bone);
  background:var(--ink); border:1px solid var(--line); border-radius:10px;
  padding:11px 12px; width:100%;
}
input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--brass); }
textarea{ resize:vertical; min-height:64px; }

/* iOS renders datetime-local centered & tall; normalize to match other fields */
.dt-input{ text-align:left; -webkit-appearance:none; appearance:none; min-height:46px; }
input[type="datetime-local"]{ text-align:left; }

/* ---- Card surface ---- */
.card{
  position:relative;
  background:
    linear-gradient(180deg, #211e1b 0%, var(--ink-2) 38%, #161412 100%);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:
    var(--shadow),
    inset 0 1px 0 rgba(255,255,255,.05),      /* top edge catches light */
    inset 0 0 0 1px rgba(0,0,0,.2);
}
/* thin brass strip along the very top of each card */
.card::before{
  content:""; position:absolute; top:0; left:14%; right:14%; height:2px;
  border-radius:0 0 3px 3px;
  background:linear-gradient(90deg, transparent, var(--brass) 30%, var(--brass) 70%, transparent);
  opacity:.5; pointer-events:none;
}
.card-pad{ padding:20px; }

/* ---- Pills / chips ---- */
.pill{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.74rem; font-weight:600; padding:4px 10px; border-radius:999px;
  border:1px solid var(--line); color:var(--bone-dim);
}
.pill-yes{ color:#b6e8cb; border-color:#2c5a40; background:#16291e; }
.pill-no{ color:#f0b5bd; border-color:#5a2730; background:#291619; }
.pill-tent{ color:#f0d2a0; border-color:#5a4322; background:#291f12; }
/* A guest whose history has been linked to a member (admin → players →
   guests). Same green family as .pill-yes but its own class: that one means
   "RSVP'd yes", and reusing it here would read as a different fact. */
.pill-linked{ color:#8fd3ae; border-color:#2c5c43; background:rgba(63,158,106,.12); }
.pill-gold{ color:#231a06; border-color:var(--brass-deep);
  background:radial-gradient(120% 120% at 30% 25%, #f0c873 0%, var(--brass) 45%, var(--brass-deep) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 1px 3px rgba(0,0,0,.4);
  font-weight:700; }
.pill-lock{ color:#cdb6f0; border-color:#3c2c5a; background:#1c1629; }
/* Admin ▸ Devices — one row per push subscription. Bordered rather than a
   plain list because each carries a destructive button, and the box makes
   the pairing of device-to-button unambiguous when someone has four. */
.device-person{ border-top:1px solid var(--line); padding:14px 0 6px; }
.device-person:first-of-type{ border-top:none; padding-top:4px; }
.device-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  padding:9px 11px; border:1px solid var(--line); border-radius:10px;
  background:var(--ink); margin-top:8px; }
.pill-warn{ color:#f0d2a0; border-color:#5a4322; background:rgba(217,138,43,.12); }
.pill-closed{ color:var(--bone-dim); border-color:var(--line); background:var(--ink-3); }
.pill-rebuys{ color:var(--brass); border-color:var(--brass-deep); background:rgba(217,164,65,.12); }
.lock-tag{ display:inline-flex; align-items:center; gap:4px; font-size:.72rem;
  font-weight:600; color:#cdb6f0; letter-spacing:.02em; }

/* ---- Avatar ---- */
.avatar{
  width:36px; height:36px; border-radius:50%; object-fit:cover;
  background:var(--ink-3); border:1px solid var(--line);
  display:inline-flex; align-items:center; justify-content:center;
  font-family:'Archivo'; font-weight:800; color:var(--brass); font-size:.8rem;
  flex:0 0 auto;
}
.avatar-lg{ width:84px; height:84px; font-size:1.6rem; }
.avatar-xl{ width:120px; height:120px; font-size:2.2rem; }
.avatar-xs{ width:22px; height:22px; font-size:.55rem; }
.avatar-ghost{ color:var(--bone-dim); opacity:.6; border-style:dashed; }

/* ---- Header / nav ---- */
/* Sticky lives on #nav above, deliberately — not repeated here. */
.nav{
  background:linear-gradient(180deg, rgba(26,24,22,.92), rgba(17,16,15,.82));
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 rgba(217,164,65,.12), 0 8px 24px -16px rgba(0,0,0,.8);
  /* Fill the safe area with the bar's own background. There used to be a
     matching `margin-top:calc(-1 * env(safe-area-inset-top))` here, to buy
     that back-fill "without adding height" while the bar scrolled away.
     It is gone, and must not come back: the negative margin collapsed out
     through #nav and shifted the whole document up by the inset, so a
     sticky #nav pinned its MARGIN box at top:0 and the bar covered the
     first inset-worth of page content. Measured in Chromium at inset 47px
     before the change was made, not reasoned about. With the bar now
     permanently occupying the top, taking that height honestly is also
     simply the correct layout. Both are no-ops on this app's real target:
     apple-mobile-web-app-status-bar-style is `default`, so iOS lays the
     web view out BELOW the status bar and the top inset is 0 in portrait.
     The rule is here for the case where it isn't. */
  padding-top:env(safe-area-inset-top);
}
.brand{ display:flex; align-items:center; gap:10px; font-family:'Archivo Expanded'; font-weight:800;
  text-transform:uppercase; letter-spacing:.04em; font-size:1.05rem; }
.brand .chip{
  width:26px;height:26px;border-radius:50%;
  background:repeating-conic-gradient(var(--brass) 0 18deg,#231a06 18deg 36deg);
  border:2px solid var(--brass); box-shadow:0 0 0 2px var(--ink) inset, 0 0 10px rgba(217,164,65,.35);
}
.nav-link{ color:var(--bone-dim); font-weight:600; font-size:.9rem; padding:6px 4px; }
.nav-link.active{ color:var(--bone); }
.nav-link:hover{ color:var(--bone); }

/* ---- Hamburger button ---- */
.burger{
  width:40px; height:40px; border-radius:10px;
  background:var(--ink-3); border:1px solid var(--line);
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  padding:0; cursor:pointer;
}
.burger:hover{ border-color:var(--brass-deep); }
.burger:focus-visible{ outline:2px solid var(--brass); outline-offset:2px; }
.burger span{ display:block; width:18px; height:2px; border-radius:2px; background:var(--bone); }

/* ---- Slide-in drawer ---- */
.drawer-scrim{
  position:fixed; inset:0; z-index:120;
  background:rgba(0,0,0,0); transition:background .22s ease;
}
.drawer-scrim.open{ background:rgba(0,0,0,.55); }
.drawer-panel{
  position:absolute; top:0; left:0; height:100%;
  width:min(78vw, 300px);
  background:var(--ink-2); border-right:1px solid var(--line);
  box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:6px;
  padding:calc(env(safe-area-inset-top) + 18px) 16px calc(env(safe-area-inset-bottom) + 18px) 16px;
  transform:translateX(-100%); transition:transform .22s ease;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.drawer-panel.open{ transform:translateX(0); }
.drawer-head{
  display:flex; align-items:center; gap:10px; padding:6px 8px 14px;
  border-bottom:1px solid var(--line); margin-bottom:8px;
}
.drawer-link{
  padding:13px 12px; border-radius:10px; font-weight:700; font-size:.95rem;
  color:var(--bone-dim);
}
.drawer-link:hover{ background:var(--ink-3); color:var(--bone); }
.drawer-link.active{ color:var(--bone); background:var(--ink-3); border:1px solid var(--line); }
/* expandable drawer groups */
.group-head{ width:100%; background:none; border:none; cursor:pointer; text-align:left;
  font-family:inherit; font-size:.95rem; font-weight:700; color:var(--bone-dim);
  display:flex; align-items:center; justify-content:space-between; }
.caret{ font-size:.7rem; color:var(--bone-dim); transition:transform .2s ease; }
.group.open .caret{ transform:rotate(90deg); }
.group-children{ overflow:hidden; max-height:0; transition:max-height .3s ease; }
.group.open .group-children{ max-height:400px; }
.child-link{ display:block; padding:11px 12px 11px 30px; border-radius:10px; font-weight:600;
  font-size:.88rem; color:var(--bone-dim); position:relative; }
.child-link::before{ content:''; position:absolute; left:18px; top:0; bottom:0; width:1px; background:var(--line); }
.child-link:hover{ background:var(--ink-3); color:var(--bone); }
.child-link.active{ color:var(--bone); background:var(--ink-3); }
.drawer-version{ text-align:center; font-size:11px; color:#6f685e; padding:10px 0 2px; letter-spacing:.04em; }
.drawer-version:active{ color:var(--brass); }

/* What's New (changelog) */
.changelog-head{ margin-bottom:10px; }
.changelog-toprow{ display:flex; align-items:baseline; gap:10px; margin-bottom:2px; }
.changelog-tag{ font-weight:700; color:var(--brass); font-size:.95rem; letter-spacing:.03em; }
.changelog-date{ color:var(--bone-dim); font-size:.78rem; white-space:nowrap; }
.changelog-title{ color:var(--bone); font-weight:600; display:block; }
.changelog-list{ margin:0; padding-left:18px; display:flex; flex-direction:column; gap:8px; }
.changelog-list li{ color:var(--bone-dim); font-size:.92rem; line-height:1.5; }
.changelog-list li strong{ color:var(--bone); }

/* Pending-approval notification card */
.notify-card{
  position:relative; text-align:center;
  border:1px solid var(--brass-deep);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(217,164,65,.10), transparent 60%),
    var(--ink-2);
  box-shadow:0 0 0 1px rgba(217,164,65,.12), 0 14px 40px -24px rgba(217,164,65,.35);
}
.notify-bell{ font-size:26px; line-height:1; margin-bottom:6px; }
.notify-title{ margin:0 0 6px; font-size:1.02rem; color:var(--bone); }
.notify-sub{ margin:0 0 12px; font-size:.88rem; }
.notify-steps{ text-align:left; margin:0 auto; padding-left:22px; display:flex; flex-direction:column; gap:6px; color:var(--bone-dim); font-size:.9rem; max-width:320px; }
.notify-steps li{ line-height:1.45; }
.notify-steps li::marker{ color:var(--brass); font-weight:700; }
@media (prefers-reduced-motion:reduce){
  .drawer-scrim, .drawer-panel{ transition:none; }
}

/* ---- Podium (signature) ---- */
.podium{ display:flex; align-items:flex-end; justify-content:center; gap:14px; padding:6px 0 0; }
.podium-col{ display:flex; flex-direction:column; align-items:center; gap:8px; width:84px; }
.podium-name{ font-size:.78rem; font-weight:700; text-align:center; line-height:1.1;
  max-width:84px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.podium-won{ font-family:'Major Mono Display',monospace; font-size:.72rem; color:var(--brass); }
.chip-stack{ width:100%; border-radius:8px 8px 0 0; position:relative;
  background:linear-gradient(180deg,var(--ink-3),#0e0d0c);
  border:1px solid var(--line); border-bottom:none;
  display:flex; align-items:flex-start; justify-content:center; padding-top:8px;
  font-family:'Archivo Expanded'; font-weight:800; }
.chip-1{ height:96px; color:var(--brass); }
.chip-2{ height:70px; color:#cfd2d6; }
.chip-3{ height:52px; color:#cf9b6e; }
.medal{ font-size:1.1rem; }

/* ---- Comment / gif feed ---- */
.comment{ display:flex; gap:10px; padding:10px 0; border-bottom:1px solid var(--line); }
.comment:last-child{ border-bottom:none; }
.bubble{ background:var(--ink-3); border:1px solid transparent; border-radius:4px 14px 14px 14px;
  padding:9px 13px; display:inline-block; max-width:100%;
  color:var(--bone); line-height:1.45; box-shadow:0 1px 0 rgba(0,0,0,.25); }
.gif-img{ border-radius:12px; border:1px solid var(--line); max-height:220px; max-width:100%; width:auto; }
.react-btn{ font-size:.78rem; padding:3px 8px; border-radius:999px; border:1px solid var(--line);
  background:var(--ink); color:var(--bone-dim); }
.react-btn.on{ border-color:var(--brass-deep); color:var(--bone); background:#241d0e; }
.mention{ color:var(--brass); font-weight:700; background:rgba(217,164,65,.14); border-radius:4px; padding:0 3px; }

/* ---- Table Talk composer icon row — scoped to "talk-icon", NOT the
   existing .icon-btn system used throughout the rest of the app (edit
   pencils, modal close buttons, etc.), so this doesn't change how any
   of those unrelated buttons already look. ---- */
.talk-icon{ font-size:.82rem; line-height:1; border-radius:8px; border:1px solid var(--line);
  background:var(--ink); color:var(--bone-dim); cursor:pointer;
  width:30px; height:30px; padding:0; display:inline-flex; align-items:center; justify-content:center; flex:none; }
.talk-icon-primary{ font-size:.82rem; line-height:1; border-radius:8px; cursor:pointer;
  background:linear-gradient(180deg,var(--brass),var(--brass-deep)); color:#231a06; border:1px solid var(--brass-deep); font-weight:800;
  width:30px; height:30px; padding:0; display:inline-flex; align-items:center; justify-content:center; flex:none; }
.talk-icon-danger{ font-size:.82rem; line-height:1; border-radius:8px; cursor:pointer;
  background:var(--red); color:#fff; border:1px solid #8f2733; font-weight:800;
  width:30px; height:30px; padding:0; display:inline-flex; align-items:center; justify-content:center; flex:none; }
/* GIF: dashed poker-chip badge — echoes the app's own suit-divider/pot
   vocabulary rather than a generic film icon. */
.talk-icon-chip{ width:30px; height:30px; border-radius:50%; padding:0; cursor:pointer; flex:none;
  border:1.5px dashed var(--brass-deep); background:var(--ink); color:var(--brass);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:.5rem; font-weight:900; letter-spacing:-.02em; }
/* @: same circular-and-gold language as the GIF chip, solid border
   instead of dashed (dashed is specifically GIF's texture). */
.talk-icon-at{ width:30px; height:30px; border-radius:50%; padding:0; cursor:pointer; flex:none;
  border:1.5px solid var(--brass-deep); background:var(--ink); color:var(--brass);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:.95rem; font-weight:800; }
.talk-send-icon{ width:16px; height:16px; display:block; }
.mention-sheet{ margin-top:8px; }
.mention-sheet-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; }

/* ---- Replies (one level, Facebook-style) ---- */
.reply-thread{ margin-left:30px; padding-left:14px; border-left:2px solid var(--line); }
.comment.reply{ padding:8px 0; }
.comment.reply .avatar{ width:30px; height:30px; font-size:.7rem; }

/* ---- Small comment controls ---- */
.icon-btn{ font-size:.82rem; line-height:1; padding:4px 7px; border-radius:8px;
  border:1px solid var(--line); background:var(--ink); color:var(--bone-dim); }
.icon-btn:hover{ color:var(--bone); border-color:var(--brass-deep); }
.share-pill{ white-space:nowrap; color:var(--brass); }
.share-pill:hover{ background:rgba(217,164,65,.08); color:var(--brass); border-color:var(--brass-deep); }
/* tappable address that opens maps — dashed underline + external-link icon hint */
.addr-link{ display:inline; text-align:left; background:none; border:none; padding:0;
  margin:0; font:inherit; color:var(--bone); cursor:pointer; overflow-wrap:break-word; }
.addr-link > span:first-child{ text-decoration:underline; text-decoration-style:dashed;
  text-underline-offset:3px; text-decoration-color:var(--brass-deep); }
.addr-link:hover{ color:var(--brass); }
.addr-link:hover > span:first-child{ text-decoration-color:var(--brass); }
.addr-ext{ color:var(--brass); margin-left:5px; display:inline-flex; vertical-align:-1px; }
/* buy-in paid indicator on the In list */
.paid-chip{ align-items:center; padding:3px 6px; border-radius:999px; border:1px solid var(--line); }
.paid-mark{ background:none; border:none; padding:0; margin:0; cursor:pointer;
  font-size:.95rem; line-height:1; filter:grayscale(1) opacity(.4); transition:filter .15s ease; }
.paid-mark.is-paid{ filter:none; }
.paid-mark[disabled]{ cursor:default; }
.paid-chip:has(.paid-mark.is-paid){ border-color:var(--brass-deep); background:rgba(217,164,65,.08); }
.paid-chip.is-host{ border-color:#3c2c5a; background:#1c1629; }
.host-mark{ font-size:.95rem; line-height:1; }
.needs-pay{ border-color:#5a4322; color:#f0d2a0; }
.link-btn{ background:none; border:none; padding:0; color:var(--bone-dim);
  font-size:.78rem; font-weight:600; cursor:pointer; }
.link-btn:hover{ color:var(--brass); }

/* ---- PayID popover (buy-in pill) ---- */
.pill-buyin{ font-size:.95rem; padding:7px 14px; gap:8px; }
.payid-pop{
  position:absolute; top:calc(100% + 8px); left:0; z-index:60;
  background:var(--ink-3); border:1px solid var(--brass-deep); border-radius:12px;
  padding:12px 14px; min-width:160px; max-width:min(80vw, 240px); box-shadow:var(--shadow);
  animation:popIn .16s ease;
}
@keyframes popIn{ from{ opacity:0; transform:translateY(-6px);} to{ opacity:1; transform:translateY(0);} }
.payid-pop::before{
  content:""; position:absolute; top:-6px; left:18px; width:10px; height:10px;
  background:var(--ink-3); border-left:1px solid var(--brass-deep); border-top:1px solid var(--brass-deep);
  transform:rotate(45deg);
}
.payid-label{ font-family:'Major Mono Display',monospace; font-size:.66rem; letter-spacing:.2em;
  color:var(--brass); text-transform:lowercase; }
.payid-num{ font-family:'Archivo'; font-weight:800; font-size:1.15rem; margin-top:3px; letter-spacing:.02em; }
.payid-host{ color:var(--bone-dim); font-size:.78rem; margin-top:2px; }

/* ---- Page header (shared across all pages) ---- */
.page-header{ display:flex; flex-direction:column; gap:4px; }
/* floating action button — create event / new poll pill, bottom-right.
   A static element (see index.html) that's shown/hidden and relabelled
   per-view via showFab()/hideFab() in app.js, rather than created fresh
   on every render — same fix already proven for #scroll-top below:
   a freshly-inserted position:fixed element can mis-paint on iOS Safari
   when the SPA swaps in new content after the app's been backgrounded,
   since its compositor layer has to be freshly negotiated right as the
   browser is also catching up on other work resuming from background.
   A persistent element's layer, once established, stays put. */
.fab{ position:fixed; right:18px; z-index:50;
  bottom:calc(18px + env(safe-area-inset-bottom, 0px));
  display:inline-flex; align-items:center; gap:7px;
  padding:14px 20px 14px 17px; border:none; border-radius:999px; cursor:pointer;
  font-family:inherit; font-size:1rem; font-weight:800; color:#231a06;
  background:linear-gradient(180deg,#e3b154,#b8821f);
  box-shadow:0 6px 20px rgba(0,0,0,.45), 0 0 0 1px rgba(217,164,65,.3), inset 0 1px 0 rgba(255,255,255,.35);
  /* Own compositor layer — see #scroll-top's note below for why. */
  transform:translateZ(0); will-change:transform;
  transition:transform .12s ease, box-shadow .12s ease, opacity .18s ease;
  opacity:0; visibility:hidden; pointer-events:none; }
.fab.show{ opacity:1; visibility:visible; pointer-events:auto; }
.fab:active{ transform:translateY(1px) scale(.98) translateZ(0); box-shadow:0 3px 12px rgba(0,0,0,.4), 0 0 0 1px rgba(217,164,65,.3); }
.fab-plus{ font-size:1.3rem; line-height:1; margin-top:-1px; }
/* notifications priming card */
.prime-card{ border:1px solid var(--brass-deep); background:linear-gradient(180deg,#221d12,#1a1712); }
.prime-row{ display:flex; gap:13px; align-items:flex-start; }
.prime-ic{ font-size:1.6rem; flex:0 0 auto; margin-top:2px; }
.prime-title{ font-family:'Archivo'; font-weight:800; font-size:1rem; color:var(--bone); }
.prime-sub{ font-size:.85rem; color:var(--bone-dim); margin-top:3px; line-height:1.4; }
.prime-actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:14px; }
/* "N open poll(s) need your vote" — home page, only ever shown when
   there's actually something this specific person hasn't voted on. */
.poll-strip{ display:flex; align-items:center; gap:10px; border:1px solid var(--brass-deep); border-radius:12px;
  padding:11px 14px; background:rgba(217,164,65,.08); cursor:pointer; }
.poll-strip-ic{ font-size:1.1rem; flex:0 0 auto; }
.poll-strip-text{ font-size:.86rem; font-weight:600; flex:1; }
.poll-strip-arrow{ color:var(--brass); font-weight:800; flex:0 0 auto; }
/* re-enable notifications steps (denied state) */
.reenable-steps{ margin:0; padding-left:20px; display:flex; flex-direction:column; gap:5px; }
.reenable-steps li{ font-size:.82rem; color:var(--bone-dim); line-height:1.4; }
.back-btn{ display:inline-flex; align-items:center; gap:2px; align-self:flex-start;
  background:none; border:none; color:var(--brass); font-size:.9rem; font-weight:600;
  padding:0 0 6px; cursor:pointer; font-family:inherit; }
.back-chev{ font-size:1.3rem; line-height:1; margin-top:-2px; }
.player-select{ width:100%; padding:12px 14px; font-size:16px; border-radius:12px;
  background:var(--ink-2); color:var(--bone); border:1px solid var(--line);
  font-family:inherit; -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' fill='none' stroke='%23d9a441' stroke-width='1.5'/></svg>");
  background-repeat:no-repeat; background-position:right 14px center; }
/* player stats page */
.ps-card{ background:linear-gradient(180deg,#1c1a18,#141210); border:1px solid var(--line); border-radius:18px; overflow:hidden; }
.ps-hero{ padding:24px 22px 20px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:15px; }
.ps-avatar{ width:60px; height:60px; border-radius:50%; flex:0 0 60px;
  background:radial-gradient(circle at 35% 30%, #3a352f, #221f1c); border:2px solid var(--brass-deep);
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1.35rem; color:var(--brass); }
.ps-name{ font-family:'Fraunces','Playfair Display',serif; font-weight:800; font-size:1.6rem; line-height:1.05; }
.ps-sub{ color:var(--bone-dim); font-size:.84rem; margin-top:3px; }
.ps-headline{ padding:20px 22px; text-align:center; border-bottom:1px solid var(--line); }
.ps-big{ font-family:'Archivo'; font-weight:800; font-size:2.4rem; color:var(--brass); line-height:1; }
.ps-hl-lbl{ font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--bone-dim); margin-top:8px; }
.ps-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); }
.ps-cell{ background:var(--ink-2); padding:17px 16px; }
.ps-n{ font-family:'Archivo'; font-weight:800; font-size:1.45rem; color:var(--bone); }
.ps-n.gold{ color:var(--brass); }
.ps-l{ font-size:.72rem; color:var(--bone-dim); margin-top:4px; }
.ps-highlights{ padding:18px 22px 20px; }
.ps-hl{ display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--line); font-size:.9rem; }
.ps-hl:last-child{ border-bottom:none; }
.ps-ic{ font-size:1.05rem; }
.ps-v{ margin-left:auto; font-weight:700; color:var(--brass); }
/* tappable player affordance */
.tap-player{ cursor:pointer; }
/* hall of fame & shame — record cards */
.rec{ display:flex; align-items:center; gap:15px; background:linear-gradient(180deg,#1c1a18,#141210);
  border:1px solid var(--line); border-radius:14px; padding:15px 16px; }
.rec-ic{ width:46px; height:46px; flex:0 0 46px; border-radius:12px; background:var(--ink-3);
  display:flex; align-items:center; justify-content:center; font-size:1.5rem; border:1px solid var(--line); }
.rec-body{ flex:1; min-width:0; }
.rec-title{ font-family:'Archivo'; font-weight:800; font-size:.95rem; text-transform:uppercase; letter-spacing:.02em; }
.rec-desc{ font-size:.78rem; color:var(--bone-dim); margin-top:1px; }
.rec-holder{ display:flex; align-items:center; gap:8px; margin-top:8px; }
.rec-name{ font-size:.9rem; font-weight:600; }
.rec-val{ margin-left:auto; text-align:right; flex:0 0 auto; padding-left:10px; }
.rec-v{ font-family:'Archivo'; font-weight:800; font-size:1.25rem; color:var(--brass); line-height:1; }
.rec-v.red{ color:var(--red); }
.rec-u{ font-size:.68rem; color:var(--bone-dim); margin-top:2px; }
.rec-need{ font-size:.72rem; color:var(--bone-dim); font-style:italic; }
.page-header h1.display{ font-size:clamp(1.9rem,5.5vw,3rem); }

/* ---- Scroll-to-top button ---- */
#scroll-top{
  position:fixed; z-index:90;
  left:18px; bottom:calc(env(safe-area-inset-bottom) + 18px);
  width:46px; height:46px; border-radius:50%;
  background:radial-gradient(120% 120% at 30% 25%, #f0c873 0%, var(--brass) 45%, var(--brass-deep) 100%);
  border:2px solid var(--brass);
  color:#231a06; font-size:1.3rem; font-weight:800; line-height:1;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px -2px rgba(0,0,0,.6), 0 0 16px rgba(217,164,65,.35), inset 0 1px 0 rgba(255,255,255,.4);
  cursor:pointer;
  opacity:0; visibility:hidden;
  /* Plain CSS bottom/left position:fixed is correct and stays untouched —
     this was never a containing-block bug (#app/<main> has no transform
     or filter ancestor) and not a repeat of the old JS-computed-`top`
     mistake (long gone). Root cause, actually nailed down this time
     (4th recurrence): <main> was silently overflow-y:auto (see the fix
     above) which is a documented Safari trigger for fixed descendants
     anchoring to the wrong ancestor — and separately, iOS Safari can
     mis-paint ANY fixed element's compositor layer when the SPA swaps in
     new page content of a different height with no accompanying real
     scroll gesture, which explains why this button (outside <main>,
     unaffected by the overflow issue) drifted too. Fix for that part:
     give it its own compositor layer via translateZ(0) + will-change, so
     WebKit re-anchors it to the viewport on every repaint, not only on
     scroll. */
  transform:translateY(10px) scale(.9) translateZ(0);
  will-change:transform;
  transition:opacity .22s ease, transform .22s ease, visibility .22s;
}
#scroll-top.show{ opacity:1; visibility:visible; transform:translateY(0) scale(1) translateZ(0); }
#scroll-top:active{ transform:translateY(0) scale(.92) translateZ(0); }

/* ---- Inline event manage strip (owner/admin) ---- */
.manage-strip{ display:flex; flex-direction:column; gap:8px;
  padding:12px; border-radius:12px; border:1px dashed var(--brass-deep);
  background:rgba(217,164,65,.05); max-width:100%; min-width:0; box-sizing:border-box;
  overflow:hidden; }
.manage-strip .row{ min-width:0; max-width:100%; flex-wrap:wrap; }
.manage-strip .btn{ flex:0 1 auto; white-space:nowrap; }
.manage-label{ font-family:'Major Mono Display',monospace; font-size:.7rem;
  text-transform:uppercase; letter-spacing:.08em; color:var(--brass); }

/* ---- Mini blind timer: slim bar docked under the nav ---- */
#mini-timer{
  position:fixed; left:0; right:0; z-index:49;   /* top set by JS from live nav height */
  display:flex; flex-direction:row; align-items:baseline; justify-content:center; gap:12px;
  width:100%; padding:5px 0; border:none; border-radius:0;
  border-bottom:1px solid var(--brass-deep);
  background:linear-gradient(180deg, rgba(26,24,22,.96), rgba(17,16,15,.9));
  backdrop-filter:blur(10px);
  color:var(--bone); cursor:pointer; font-family:inherit;
  box-shadow:0 8px 24px -16px rgba(0,0,0,.8);
}
#mini-timer[hidden]{ display:none; }
/* content drops down to make room while the bar is showing */
body.has-timerbar #app{ padding-top:36px; }
.mini-timer-clock{ font-family:'Archivo Expanded','Archivo',sans-serif; font-weight:800; font-size:1rem; line-height:1;
  color:var(--brass); }
.mini-timer-blinds{ font-size:.7rem; color:var(--bone-dim); letter-spacing:.04em; }
#mini-timer.low .mini-timer-clock{ color:var(--red); animation:pulseLow .5s ease-in-out infinite; }
#mini-timer.paused{ border-bottom-color:var(--amber); }
#mini-timer.paused .mini-timer-clock{ color:var(--amber); }

/* ---- Pull-to-refresh indicator (PWA only) ---- */
#ptr-indicator{
  position:fixed; top:calc(env(safe-area-inset-top) + 4px); left:50%;
  transform:translateX(-50%) translateY(0); opacity:0; z-index:95;
  width:38px; height:38px; border-radius:50%;
  background:var(--ink-3); border:1px solid var(--brass-deep);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 12px -2px rgba(0,0,0,.6);
  transition:transform .2s ease, opacity .2s ease;
  pointer-events:none;
}
.ptr-spinner{
  width:18px; height:18px; border-radius:50%;
  border:2px solid var(--line); border-top-color:var(--brass);
  transition:transform .1s linear;
}
#ptr-indicator.ready .ptr-spinner{ border-top-color:var(--brass); transform:rotate(180deg); }
#ptr-indicator.spinning .ptr-spinner{ animation:spin .7s linear infinite; }

/* ---- Game Night Tools ---- */
/* Blind timer */
.timer-card{ background:linear-gradient(180deg,#201d1a,var(--ink-2) 60%,#161412);
  border:1px solid var(--brass-deep); border-radius:18px; padding:28px 20px; text-align:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 10px 30px -16px rgba(0,0,0,.8); }
.timer-level{ font-family:'Major Mono Display',monospace; font-size:.78rem; letter-spacing:.2em;
  color:var(--brass); text-transform:lowercase; }
.timer-blinds{ font-family:'Archivo'; font-weight:800; font-size:2rem; margin-top:6px; }
.timer-clock{ font-family:'Archivo Expanded','Archivo',sans-serif; font-weight:800; font-size:4rem;
  line-height:1; margin:10px 0; letter-spacing:.02em;
  background:linear-gradient(180deg,#fbf2e0,#e8d4a8 55%,#cba05a); -webkit-background-clip:text;
  background-clip:text; -webkit-text-fill-color:transparent; color:#ecdcb8; }
.timer-clock.low{ background:none; -webkit-text-fill-color:initial; color:var(--red); animation:pulseLow .5s ease-in-out infinite; }
@keyframes pulseLow{ 0%,100%{ opacity:1; } 50%{ opacity:.5; } }
.timer-next{ color:var(--bone-dim); font-size:.9rem; }
/* Minutes-per-level scroller (5 Oct 2026, mockups/mockup-timer-minutes.html).
   .mins-num's 52px width is also W in blindTimer()'s minutesScroller(). */
.mins-label{ font-size:.85rem; color:var(--bone-dim); text-align:center; }
.mins{ position:relative; width:100%; max-width:320px; margin:0 auto; }
.mins-z{ position:relative; z-index:0; }
.mins-strip{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
  -webkit-overflow-scrolling:touch; padding:0 calc(50% - 26px); overscroll-behavior-x:contain;
  mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent); }
.mins-strip::-webkit-scrollbar{ display:none; }
.mins-num{ flex:0 0 52px; height:52px; scroll-snap-align:center; display:flex; align-items:center; justify-content:center;
  font-family:'Archivo'; font-weight:800; font-size:1.15rem; color:var(--bone-dim); background:none; border:none;
  cursor:pointer; padding:0; transition:color .15s, transform .15s; }
.mins-num.on{ color:#231a06; transform:scale(1.08); }
.mins-ring{ position:absolute; left:50%; top:0; width:52px; height:52px; margin-left:-26px; border-radius:50%;
  background:linear-gradient(180deg,var(--brass),var(--brass-deep)); pointer-events:none; z-index:-1; }
.mins-unit{ text-align:center; font-size:.75rem; color:var(--bone-dim); margin-top:2px; }
.mins.locked{ opacity:.45; pointer-events:none; }
/* The table's chip values, under the timer (5 Oct 2026, mockup-table-settings). */
.chips-line{ display:flex; flex-wrap:wrap; gap:8px 12px; justify-content:center; align-items:center; font-size:.85rem; }
.chips-line-lbl{ color:var(--bone-dim); }
.chip-val{ display:inline-flex; align-items:center; gap:6px; font-weight:700; }
.chip-dot{ width:18px; height:18px; border-radius:50%; border:2px dashed rgba(255,255,255,.6);
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.25), 0 0 0 1px rgba(255,255,255,.28); }

/* Game wheel */
.wheel-wrap{ position:relative; width:260px; height:260px; }
.wheel{ width:100%; height:100%; border-radius:50%; position:relative;
  border:6px solid var(--brass); background:conic-gradient(
    #1f1d1a 0 60deg, #2a2724 60deg 120deg, #1f1d1a 120deg 180deg,
    #2a2724 180deg 240deg, #1f1d1a 240deg 300deg, #2a2724 300deg 360deg);
  box-shadow:0 0 0 3px var(--brass-deep), 0 10px 30px -10px rgba(0,0,0,.8), inset 0 0 40px rgba(0,0,0,.5); }
.wheel-seg{ position:absolute; inset:0; display:flex; justify-content:center;
  pointer-events:none; }
.wheel-seg-text{ display:block; margin-top:14px; max-width:46%;
  font-family:'Archivo'; font-weight:800; font-size:.66rem; line-height:1.05;
  text-transform:uppercase; color:var(--bone); letter-spacing:.02em; text-align:center;
  text-shadow:0 1px 2px rgba(0,0,0,.6); }
.wheel-ptr{ position:absolute; top:-6px; left:50%; transform:translateX(-50%);
  width:0; height:0; border-left:12px solid transparent; border-right:12px solid transparent;
  border-top:20px solid var(--brass); z-index:5; filter:drop-shadow(0 2px 3px rgba(0,0,0,.6)); }
.picker-result{ width:100%; display:flex; flex-direction:column; align-items:center; }
.picker-label{ font-family:'Major Mono Display',monospace; font-size:.7rem; letter-spacing:.18em;
  color:var(--brass); text-transform:lowercase; }
.picker-game{ font-family:'Archivo Expanded','Archivo',sans-serif; font-weight:800; font-size:1.8rem;
  text-transform:uppercase; text-align:center; margin-top:4px;
  background:linear-gradient(180deg,#fbf2e0,#e8d4a8 55%,#cba05a); -webkit-background-clip:text;
  background-clip:text; -webkit-text-fill-color:transparent; color:#ecdcb8; }
.joker-cards{ display:flex; gap:10px; }
.joker-card{ width:54px; height:76px; position:relative; transform-style:preserve-3d;
  transition:transform .45s ease; }
.joker-card.flipped{ transform:rotateY(180deg); }
.joker-card .jc-back, .joker-card .jc-face{ position:absolute; inset:0; border-radius:8px;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  display:flex; align-items:center; justify-content:center; }
.joker-card .jc-back{
  background:repeating-linear-gradient(45deg,#7a1020,#7a1020 6px,#5e0c19 6px,#5e0c19 12px);
  border:2px solid #e8dfc8; box-shadow:0 4px 10px -3px rgba(0,0,0,.6); }
.joker-card .jc-face{ transform:rotateY(180deg);
  background:linear-gradient(160deg,#fdfaf3,#e8dfc8); border:1px solid #c8b99a;
  font-family:'Archivo'; font-weight:900; font-size:1.4rem; color:#231a06;
  box-shadow:0 4px 10px -3px rgba(0,0,0,.6); }
.joker-card .jc-face.is-joker{ font-size:1.9rem; }
.joker-label{ color:var(--bone-dim); font-size:.9rem; min-height:1.2em; text-align:center; }

/* Who deals */
.deal-area{ display:flex; flex-direction:column; gap:10px; }
.deal-row{ display:flex; align-items:center; justify-content:space-between;
  background:var(--ink-2); border:1px solid var(--line); border-radius:12px; padding:10px 14px; }
.deal-card{ width:44px; height:60px; border-radius:7px; background:linear-gradient(160deg,#fdfaf3,#e8dfc8);
  border:1px solid #c8b99a; display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-family:'Archivo'; font-weight:900; color:var(--ink); box-shadow:0 4px 10px -3px rgba(0,0,0,.6);
  transform:translateX(40px) rotate(8deg); opacity:0; animation:dealIn .5s ease forwards; }
@keyframes dealIn{ to{ transform:translateX(0) rotate(0); opacity:1; } }
.deal-rank{ font-size:1.1rem; line-height:1; }
.deal-suit{ font-size:.9rem; line-height:1; }
.deal-suit.red{ color:#c0202f; }
.deal-card.win{ outline:3px solid var(--brass); box-shadow:0 0 18px rgba(217,164,65,.6); }
.deal-win{ font-family:'Archivo'; font-weight:800; font-size:1.2rem; text-align:center; color:var(--brass); margin-top:6px; }
.deal-tie{ text-align:center; color:var(--bone-dim); font-size:.95rem; margin-top:6px; }

/* ---- Our Games (collapsible) ---- */
.game-card{ overflow:hidden; }
.game-head{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:none; border:none; cursor:pointer; color:var(--bone);
  padding:16px 18px; text-align:left; font-family:inherit;
}
.game-name{ font-family:'Archivo'; font-weight:800; font-size:1.1rem; text-transform:uppercase; letter-spacing:.01em; }
.game-tag{ color:var(--bone-dim); font-size:.82rem; margin-top:2px; }
.game-tag.is-placeholder{ color:var(--brass); font-style:italic; }
.game-chev{ color:var(--brass); font-size:1.5rem; line-height:1; flex:0 0 auto;
  transition:transform .2s ease; transform:rotate(90deg); }
.game-card.open .game-chev{ transform:rotate(-90deg); }
.game-body{
  max-height:0; overflow:hidden; transition:max-height .28s ease;
  padding:0 18px;
}
.game-card.open .game-body{ max-height:800px; padding-bottom:16px; }
.game-sec-label{ font-family:'Major Mono Display',monospace; font-size:.64rem; letter-spacing:.14em;
  text-transform:lowercase; color:var(--brass); margin-bottom:3px; }
.game-sec-text{ font-size:.9rem; color:var(--bone); line-height:1.5; }

/* ---- Hand ranking reference ---- */
.hand-row{ display:flex; gap:14px; align-items:flex-start; padding:16px 0; border-bottom:1px solid var(--line); }
.hand-row:last-child{ border-bottom:none; }
.hand-rank{ font-family:'Archivo Expanded'; font-weight:800; font-size:1.1rem; color:var(--brass);
  width:26px; flex:0 0 26px; text-align:center; line-height:1.3; }
.hand-info{ flex:1; min-width:0; }
.hand-name{ font-family:'Archivo'; font-weight:800; font-size:1.05rem; text-transform:uppercase; letter-spacing:.01em; }
.hand-desc{ color:var(--bone-dim); font-size:.86rem; margin-top:2px; }
.hand-cards{ display:flex; gap:4px; margin-top:8px; flex-wrap:wrap; }
.pcard{
  width:34px; height:48px; border-radius:5px; flex:0 0 auto;
  background:linear-gradient(160deg,#fbf6ec,#e7ddc9); border:1px solid #cdbfa4;
  color:var(--ink); font-family:'Archivo'; font-weight:900; font-size:.78rem;
  display:flex; align-items:flex-start; justify-content:flex-start;
  padding:3px 4px; line-height:1; box-shadow:0 2px 5px -2px rgba(0,0,0,.5); position:relative;
}
.pcard.red{ color:#c0202f; }
.pcard span{ position:absolute; bottom:3px; right:4px; font-size:.62rem; }

/* ---- Stat tiles ---- */
.stat-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:12px; }
.stat{
  background:linear-gradient(180deg, #201d1a, var(--ink-2) 60%, #161412);
  border:1px solid var(--line); border-radius:12px;
  padding:16px; min-height:96px; display:flex; flex-direction:column; justify-content:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 6px 18px -14px rgba(0,0,0,.8);
}
.stat-num{ font-family:'Archivo Expanded'; font-weight:800; font-size:2rem; line-height:1; color:var(--bone); }
.stat-label{ font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--bone-dim);
  margin-top:8px; display:inline-flex; align-items:center; gap:6px; line-height:1; }
.stat-label .medal{ font-size:1rem; line-height:1; }

/* ---- Toast ---- */
.toast{ position:fixed; bottom:calc(env(safe-area-inset-bottom) + 20px); left:50%; transform:translateX(-50%);
  background:var(--ink-3); border:1px solid var(--brass-deep); color:var(--bone);
  padding:12px 18px; border-radius:12px; z-index:200; box-shadow:var(--shadow);
  font-weight:600; font-size:.9rem; animation:rise .25s ease; }
@keyframes rise{ from{ opacity:0; transform:translate(-50%,8px);} to{ opacity:1; transform:translate(-50%,0);} }
/* Update nudge: a tappable, gold chip-styled toast that stays until acted on */
.toast-update{
  cursor:pointer; font-family:inherit;
  color:#231a06;
  background:radial-gradient(140% 140% at 30% 20%, #f0c873 0%, var(--brass) 50%, var(--brass-deep) 100%);
  border:1px solid var(--brass);
  box-shadow:0 6px 20px -4px rgba(0,0,0,.6), 0 0 18px rgba(217,164,65,.4);
  animation:rise .25s ease, pulseGlow 2.2s ease-in-out .3s infinite;
}
@keyframes pulseGlow{
  0%,100%{ box-shadow:0 6px 20px -4px rgba(0,0,0,.6), 0 0 14px rgba(217,164,65,.35); }
  50%{ box-shadow:0 6px 20px -4px rgba(0,0,0,.6), 0 0 26px rgba(217,164,65,.6); }
}
/* Tappable "what's new" summary toast, shown right after an update has
   applied. Deliberately the plain toast look (not the gold pulsing
   "action needed" treatment above) — this is FYI, not required, just
   adds a chevron affordance and press feedback since it links through. */
.toast-whatsnew{
  cursor:pointer; font-family:inherit; display:flex; align-items:center; gap:8px;
  transition:background .15s ease, border-color .15s ease;
}
.toast-whatsnew:active{ background:var(--ink); border-color:var(--brass); }
.toast-whatsnew .chev{ color:var(--brass); font-size:.8rem; }

/* ---- Modal ---- */
.scrim{ position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:150;
  display:flex; align-items:center; justify-content:center;
  /* +19px at the top, not +18px. The scrim is pre-scrolled by 1px (see
     ::after below and views.js), which shifts its contents up by exactly
     that much. The extra pixel of padding cancels it out, so the modal
     lands on the same visual gap it always had rather than losing its top
     edge — which is the bug Ben reported an hour before this. */
  padding:calc(env(safe-area-inset-top) + 19px) 18px calc(env(safe-area-inset-bottom) + 18px);
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  /* The scrim ABSORBS the gesture, and is the last link before the page.
     contain stops it handing anything on to the document. */
  /* NO position:relative here. It was added on 1 Aug 2026 so ::after would
     have a containing block and immediately broke every modal in the app:
     this rule already sets position:fixed, the later declaration won, the
     scrim stopped being an overlay and rendered down the document flow.
     Nothing appeared to open — and because a .scrim WAS in the DOM, the
     touch guard armed and cancelled every gesture outside a modal nobody
     could see, so the page froze too.
     position:fixed is itself a containing block for absolutely positioned
     children. The extra declaration was never needed for anything. */
  overscroll-behavior:contain; }
/* One pixel of scrollable room inside the scrim, so it is always a live
   scroll container with somewhere to go. views.js pre-scrolls the scrim to
   1 on open, so a downward drag has something real to consume before iOS
   can decide the gesture is a pull-to-refresh — and crucially it is the
   SCRIM that moves, never the page. Moving the page is what brought the
   FAB drift back on 1 Aug 2026.
   Absolutely positioned on purpose: it contributes to the scrim's scroll
   area without becoming a flex item, so it cannot disturb how the modal is
   centred. The alternative — a spacer in the flow — meant changing
   flex-direction on a rule eight modals share, to buy the same pixel. */
.scrim::after{ content:""; position:absolute; top:100%; left:0;
  width:1px; height:1px; pointer-events:none; }
/* max-height:100%, not 90vh, and margin:auto rather than relying on the
   scrim's align-items:center.

   90vh was measured against the VIEWPORT while the modal is centred inside
   the scrim's CONTENT BOX, which is the viewport minus its padding —
   safe-area-top + 18px above, safe-area-bottom + 18px below. On a notched
   iPhone that padding is roughly 117px against the 10vh (~84px) the cap
   left spare, so a full-height modal was ~33px taller than the space it
   was being centred in. A flex item larger than its container does not
   just overflow when centred: half the excess goes ABOVE the scroll
   origin, where it cannot be scrolled to or painted. That is the clipped
   top edge Ben reported — the brass strip and the rounded corner.
   100% resolves against that same content box, so the modal can no longer
   be taller than the space it sits in, and margin:auto keeps it centred
   while degrading to flush-with-the-top instead of clipping if it ever
   does overflow. Pre-existing; noticed once a long modal was being opened
   repeatedly while chasing the refresh bug. */
.modal{ width:100%; max-width:480px; max-height:100%; overflow:auto; margin:auto;
  /* Stop the modal's own overscroll chaining out to .scrim, which is
     overflow-y:auto and therefore bounces when the modal hits its top or
     bottom. That bounce is what moved the card under the finger and made a
     scroll read as a tap on the scrim, self-dismissing the modal. Removes
     the cause; dismissOnOutsideTap()'s movement threshold in views.js
     catches the symptom if the gesture starts on the scrim instead.

     NOT contain any more, deliberately. The modal SHOULD hand its
     overscroll to the scrim: the scrim is the thing holding a pixel of
     scroll to absorb it, and it is contained itself so nothing reaches the
     page. Containing here as well would strand the gesture at the modal's
     top edge with nowhere to go, which is the state iOS reads as a
     pull-to-refresh. */
  overscroll-behavior:auto; }
.scrim .modal *{ max-width:100%; }

/* =====================================================================
   AUTH PAGE — full-screen immersive table experience
   ===================================================================== */
.auth-screen{
  min-height:100svh; display:flex; flex-direction:column;
  align-items:center; justify-content:flex-end;
  padding:0;
  position:relative; overflow:hidden;
}
/* extra warm spotlight for the auth page — covers the whole screen incl. island */
.auth-screen::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(90% 55% at 50% 12%, rgba(217,164,65,.22) 0%, transparent 65%),
    radial-gradient(120% 80% at 50% -10%, rgba(31,61,46,.4) 0%, transparent 55%);
}
.auth-wrap{
  position:relative; z-index:1; width:100%; max-width:440px;
  display:flex; flex-direction:column; align-items:center; gap:0;
  padding: 0 20px;
}

/* ---- Hero section ---- */
.auth-hero{
  display:flex; flex-direction:column; align-items:center;
  padding:calc(env(safe-area-inset-top) + 18px) 0 20px;
  text-align:center; width:100%;
}

/* Big card fan */
.auth-fan{ position:relative; height:160px; width:260px; margin-bottom:16px; flex:0 0 auto; }
.auth-fan span{
  position:absolute; left:50%; bottom:0;
  width:80px; height:115px; border-radius:10px;
  background:linear-gradient(160deg,#fdfaf3,#e8dfc8);
  border:1px solid #c8b99a;
  transform-origin:bottom center;
  font-family:'Archivo'; font-weight:900; font-size:1.8rem;
  display:flex; align-items:flex-start; padding:8px 10px; color:var(--ink);
  box-shadow:0 8px 24px -8px rgba(0,0,0,.7), 0 2px 0 #b8a98a;
}
.auth-fan span.red{ color:#c0202f; }
.auth-fan span:nth-child(1){ transform:translateX(-50%) rotate(-26deg) translateY(6px); }
.auth-fan span:nth-child(2){ transform:translateX(-50%) rotate(-9deg) translateY(2px); z-index:1; }
.auth-fan span:nth-child(3){ transform:translateX(-50%) rotate(9deg) translateY(2px); z-index:1; }
.auth-fan span:nth-child(4){ transform:translateX(-50%) rotate(26deg) translateY(6px); }

/* Chip logo */
.auth-chip-logo{ margin-bottom:10px; }
.auth-chip-ring{
  width:68px; height:68px; border-radius:50%;
  background:repeating-conic-gradient(var(--brass) 0 18deg, #231a06 18deg 36deg);
  border:3px solid var(--brass);
  box-shadow:0 0 0 3px var(--ink-2) inset, 0 0 30px rgba(217,164,65,.4);
  display:flex; align-items:center; justify-content:center;
}
.auth-chip-centre{
  width:46px; height:46px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #f0c060, var(--brass) 50%, var(--brass-deep));
  display:flex; align-items:center; justify-content:center;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.3);
}
.auth-spade{ font-size:1.5rem; line-height:1; color:#231a06; }

/* Title */
.auth-title{
  font-family:'Archivo Expanded','Archivo',sans-serif;
  font-weight:800; text-transform:uppercase; letter-spacing:.06em;
  font-size:clamp(2.4rem,9vw,3.6rem); line-height:1; margin:0 0 0;
  background:linear-gradient(180deg,#fff8ea 0%,#f0d080 40%,#c8882a 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  color:#f0d080; /* fallback */
  filter:drop-shadow(0 2px 20px rgba(217,164,65,.3));
}
.auth-eyebrow{
  font-family:'Major Mono Display',monospace; font-size:.7rem;
  letter-spacing:.2em; color:var(--brass); text-transform:lowercase;
  margin-bottom:10px;
}
.auth-tagline{
  color:var(--bone-dim); font-size:.95rem; margin:0; line-height:1.4;
}

/* ---- Form surface ---- */
.auth-form-surface{
  width:100%;
  background:linear-gradient(180deg, rgba(37,34,32,.0) 0%, rgba(26,24,22,.94) 18px, rgba(22,20,18,.97) 100%);
  border-top:1px solid rgba(217,164,65,.2);
  border-radius:24px 24px 0 0;
  padding:28px 24px calc(env(safe-area-inset-bottom) + 28px);
  backdrop-filter:blur(8px);
  box-shadow:0 -20px 60px -20px rgba(0,0,0,.8);
  display:flex; flex-direction:column; gap:18px;
}

/* ---- Auth-specific tabs (wider, more presence) ---- */
.auth-tabs{ display:flex; gap:4px; background:rgba(0,0,0,.3); border:1px solid var(--line);
  border-radius:12px; padding:4px; }
.auth-tab{ flex:1; text-align:center; padding:10px 8px; border-radius:9px;
  font-size:.88rem; font-weight:600; color:var(--bone-dim);
  background:none; border:none; cursor:pointer; }
.auth-tab.on{ background:var(--ink-3); color:var(--bone);
  box-shadow:0 1px 3px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.06); }
.auth-tab:hover:not(.on){ color:var(--bone); }

/* ---- misc ---- */
.spinner{ width:22px;height:22px;border-radius:50%;border:3px solid var(--line);
  border-top-color:var(--brass); animation:spin .7s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg);} }
.center-screen{ min-height:100svh; display:flex; align-items:center; justify-content:center;
  padding:calc(env(safe-area-inset-top) + 28px) 16px calc(env(safe-area-inset-bottom) + 28px);
  /* if content is taller than the viewport, allow it to scroll from the top
     instead of being clipped under the status bar / Dynamic Island */
  overflow-y:auto; }
@supports (height: 100dvh){ .center-screen{ min-height:100dvh; } }
/* when the card is tall, top-align so the notch never overlaps it */
@media (max-height:760px){
  .center-screen{ align-items:flex-start; }
}
.tabs{ display:flex; gap:4px; background:var(--ink); border:1px solid var(--line);
  border-radius:12px; padding:5px;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.35); }
.tab{ flex:1; text-align:center; padding:9px 6px; border-radius:8px; font-size:.85rem; font-weight:600;
  color:var(--bone-dim); transition:background .18s ease, color .18s ease, box-shadow .18s ease, transform .12s ease; }
.tab.on{
  background:linear-gradient(180deg,var(--brass),var(--brass-deep));
  color:#231a06; font-weight:800;
  box-shadow:0 2px 8px -1px rgba(0,0,0,.4), 0 0 0 1px rgba(217,164,65,.25);
}
.tab:active{ transform:scale(.97); }
.empty{ text-align:center; padding:40px 20px; color:var(--bone-dim); }
.error-text{ color:#f0b5bd; font-size:.85rem; }

@media (max-width:640px){
  .stat-num{ font-size:1.6rem; }
  .nav-link{ font-size:.82rem; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
}

/* Admin: notification status line on player rows */
.notify-line{ font-size:12px; color:var(--bone-dim); margin-top:3px; }
.notify-line.on{ color:var(--green); }

/* Live "tonight's pot" tracker on today's event card */
.livepot{ display:flex; flex-direction:column; gap:6px; }
.livepot-left{ font-size:1.5rem; font-weight:800; color:var(--brass); }
.livepot-bar{ height:8px; border-radius:999px; background:var(--ink-3); overflow:hidden; }
.livepot-bar > div{ height:100%; background:linear-gradient(90deg,var(--brass),var(--brass-deep)); transition:width .4s ease; }
.livepot-sub{ font-size:.78rem; margin-bottom:4px; }
.livepot-row{ padding:7px 0; border-bottom:1px solid var(--line); font-size:.92rem; }
.livepot-rank{ font-family:monospace; color:var(--brass); }
.livepot-row.zero{ color:var(--bone-dim); }
.livepot-row.zero .livepot-rank{ color:var(--bone-dim); }
.livepot-won{ color:var(--green); font-weight:700; }
.livepot-row.zero .livepot-won{ color:var(--bone-dim); font-weight:400; }

/* "Also Cashed In" — winners beyond the podium's top three */
.also-cashed{ margin-top:14px; text-align:center; }
.also-cashed-label{ color:var(--bone-dim); font-size:11px; letter-spacing:.2em; text-transform:uppercase; margin-bottom:8px; }
.also-cashed-chips{ display:flex; justify-content:center; gap:8px; flex-wrap:wrap; }
.pchip{ display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px;
  background:var(--ink-3); border:1px solid var(--line); color:var(--bone); font-size:.85rem; cursor:pointer; font-family:inherit; }
.pchip:active{ transform:translateY(1px); }
.pchip .amt{ color:var(--green); font-weight:700; }

/* "Awaiting results" — incomplete event whose date has passed */
.card-awaiting{ border-color:var(--amber); box-shadow:0 0 0 1px rgba(217,138,43,.15); }
.pill-awaiting{ background:rgba(217,138,43,.15); border:1px solid var(--amber); color:var(--amber); font-weight:600; }

/* ---- User Guide ("How The Felt works") ---- */
.guide-acc{ background:var(--ink-2); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.guide-acc-head{ display:flex; align-items:center; gap:12px; padding:15px 16px; cursor:pointer; }
.guide-acc-num{ flex:none; width:28px; height:28px; border-radius:50%; background:var(--ink-3);
  display:flex; align-items:center; justify-content:center; color:var(--brass); font-weight:800; font-size:.88rem; }
.guide-acc-title{ flex:1; font-weight:700; font-size:1rem; }
.guide-acc-chev{ color:var(--bone-dim); font-size:1.2rem; transition:transform .2s ease; }
.guide-acc.open .guide-acc-chev{ transform:rotate(90deg); }
.guide-acc-body{ display:none; padding:0 16px 16px 56px; color:var(--bone-dim); font-size:.92rem; line-height:1.6; }
.guide-acc.open .guide-acc-body{ display:block; }
.guide-acc-body p{ margin:0 0 12px; }
.guide-acc-body p:last-child{ margin-bottom:0; }
.guide-acc-body strong{ color:var(--bone); }
.guide-tip{ background:var(--ink-3); border-left:3px solid var(--brass); border-radius:0 8px 8px 0;
  padding:10px 12px; margin:12px 0; color:var(--bone); font-size:.88rem; line-height:1.5; }
.guide-tip:last-child{ margin-bottom:0; }
.auth-guide-link{ display:block; width:100%; margin-top:16px; background:none; border:none;
  color:var(--brass); font-size:.9rem; font-weight:600; cursor:pointer; font-family:inherit; text-align:center; padding:8px; }
.auth-guide-link:active{ opacity:.7; }

/* ---- PayID field: info icon + helper ---- */
.label-row{ display:flex; align-items:center; gap:7px; }
.info-i{ display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px;
  border-radius:50%; border:1px solid var(--brass); color:var(--brass); font-size:.72rem; font-style:italic;
  font-weight:700; cursor:pointer; background:none; font-family:inherit; padding:0; line-height:1; }
.field-helper{ margin-top:8px; background:var(--ink-3); border-left:3px solid var(--brass);
  border-radius:0 8px 8px 0; padding:10px 12px; font-size:.85rem; color:var(--bone-dim); line-height:1.5; }
.field-helper strong{ color:var(--bone); }

/* ---- Payouts screen ---- */
.payout-row{ display:flex; align-items:center; gap:12px; padding:13px 0; border-bottom:1px solid var(--line); }
.payout-row:last-of-type{ border-bottom:none; }
.payout-info{ flex:1; min-width:0; }
.payout-name{ font-weight:700; font-size:.98rem; }
.payout-payid{ color:var(--bone-dim); font-size:.85rem; margin-top:2px; word-break:break-word; }
.payout-payid.missing{ color:var(--red); }
.payout-amt{ color:var(--green); font-weight:800; font-size:1.05rem; font-variant-numeric:tabular-nums; white-space:nowrap; }
.payout-total{ display:flex; justify-content:space-between; padding-top:14px; margin-top:4px;
  border-top:2px solid var(--line); font-weight:800; }
.payout-total .amt{ color:var(--brass); }

/* ---- How buy-ins are paid (5 Oct 2026, mockups/mockup-payment-methods.html) ---- */
/* The method sits inside the buy-in pill: icon, amount, a divider, then the
   method in small caps. */
.pill-sep{ width:1px; align-self:stretch; background:rgba(35,26,6,.35); margin:1px 2px; }
.pill-tag{ font-size:.66rem; text-transform:uppercase; letter-spacing:.08em; font-weight:800; }
/* New event: one choice per way the table plays */
.pay-pick{ display:flex; flex-direction:column; gap:6px; }
.pay-pick button{ text-align:left; display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border-radius:10px;
  border:1px solid var(--line); background:var(--ink); color:var(--bone); font-family:inherit; cursor:pointer; }
.pay-pick button.on{ border-color:var(--brass); box-shadow:inset 0 0 0 1px var(--brass-deep); background:rgba(217,164,65,.06); }
.pay-pick-ic{ font-size:1.1rem; line-height:1.3; }
.pay-pick-nm{ display:block; font-weight:700; font-size:.9rem; }
.pay-pick-tg{ display:block; font-size:.76rem; color:var(--bone-dim); line-height:1.4; }
.pay-pick-radio{ margin-left:auto; flex:0 0 18px; width:18px; height:18px; border-radius:50%; border:2px solid var(--line); margin-top:2px; }
.pay-pick button.on .pay-pick-radio{ border-color:var(--brass); box-shadow:inset 0 0 0 4px var(--ink), inset 0 0 0 10px var(--brass); }
/* Settle up: your own line, who pays whom, the night in numbers */
.yourline{ display:flex; gap:12px; align-items:center; padding:12px 14px; border-radius:12px;
  border:1px solid var(--brass-deep); background:rgba(217,164,65,.08); }
.yourline-ic{ font-size:1.4rem; flex:0 0 auto; }
.yourline-big{ font-family:'Archivo'; font-weight:800; font-size:1.02rem; }
.yourline-sub{ font-size:.8rem; color:var(--bone-dim); word-break:break-word; }
.yourline .btn, .yourline .pill{ margin-left:auto; flex:0 0 auto; }
.xfer{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 12px; padding:12px 0; border-bottom:1px solid var(--line); align-items:center; }
.xfer:last-of-type{ border-bottom:none; }
.xfer-who{ font-weight:700; font-size:.95rem; min-width:0; }
.xfer-arrow{ color:var(--brass); margin:0 6px; font-weight:800; }
.xfer-amt{ font-weight:800; font-size:1.05rem; font-variant-numeric:tabular-nums; }
.xfer-pay{ grid-column:1 / -1; color:var(--bone-dim); font-size:.82rem; word-break:break-word; }
.xfer-pay.missing{ color:var(--red); }
.xfer-ctl{ grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:4px; }
.xfer-when{ font-size:.74rem; color:var(--bone-dim); }
.xfer.mine{ margin:0 -10px; padding:12px 10px; border-radius:10px; background:rgba(217,164,65,.09);
  border-bottom-color:transparent; box-shadow:inset 0 0 0 1px var(--brass-deep); }
.you-tag{ font-size:.6rem; text-transform:uppercase; letter-spacing:.08em; color:#231a06; background:var(--brass);
  border-radius:999px; padding:1px 7px; margin-left:6px; vertical-align:middle; }
.ledger{ width:100%; border-collapse:collapse; font-size:.86rem; font-variant-numeric:tabular-nums; }
.ledger th{ font-size:.66rem; text-transform:uppercase; letter-spacing:.06em; color:var(--bone-dim); font-weight:600; text-align:right; padding:0 0 6px; }
.ledger th:first-child, .ledger td:first-child{ text-align:left; }
.ledger td{ padding:7px 0; border-top:1px solid var(--line); text-align:right; }
.ledger td.pos{ color:var(--green); font-weight:700; }
.ledger td.neg{ color:#f0b5bd; font-weight:700; }
.ledger td.zero{ color:var(--bone-dim); }
.ledger tr.mine td{ color:var(--brass); }
.ledger tfoot td{ border-top:2px solid var(--line); font-weight:800; }

/* ---- Nickname field: counter + hint ---- */
.field-count{ margin-left:auto; color:var(--bone-dim); font-size:.75rem; font-variant-numeric:tabular-nums; }
.field-hint{ margin-top:6px; color:var(--bone-dim); font-size:.78rem; line-height:1.4; }

/* ---- Admin: Send a message panel ---- */
.msg-everyone{ display:flex; align-items:center; justify-content:space-between; padding:10px 0 8px; border-bottom:1px solid var(--line); cursor:pointer; font-weight:700; font-size:.92rem; }
.msg-toggle{ width:42px; height:24px; border-radius:99px; background:var(--line); position:relative; transition:background .15s; }
.msg-toggle::after{ content:''; position:absolute; left:3px; top:3px; width:18px; height:18px; border-radius:50%; background:var(--bone-dim); transition:left .15s, background .15s; }
.msg-toggle.on{ background:var(--brass); }
.msg-toggle.on::after{ left:21px; background:#1a1408; }
.msg-row{ display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--line); cursor:pointer; }
.msg-row:last-child{ border-bottom:none; }
.msg-row.disabled{ opacity:.45; cursor:default; }
.msg-chk{ width:20px; height:20px; border-radius:5px; border:1.5px solid var(--brass); flex:none; display:flex; align-items:center; justify-content:center; color:#1a1408; font-size:.72rem; font-weight:900; }
.msg-chk.on{ background:var(--brass); }
.msg-chk.off{ border-color:var(--line); background:none; }
.msg-chk.locked{ border-color:var(--line); border-style:dashed; background:none; }
.msg-name{ flex:1; font-size:.92rem; }
.msg-stat{ font-size:.78rem; color:var(--bone-dim); }
.msg-stat.on{ color:var(--brass); }
.msg-confirm{ font-size:.85rem; color:var(--bone); background:var(--ink-3); border:1px solid var(--brass); border-radius:10px; padding:10px 12px; margin-top:12px; }

/* ---- Feedback status pills (My Feedback + Admin) ---- */
.feedback-status{ display:inline-flex; align-items:center; gap:6px;
  font-size:.78rem; font-weight:600; padding:4px 10px; border-radius:999px;
  border:1px solid var(--line); color:var(--bone-dim); width:fit-content; }
.feedback-status.new{ color:#f0d2a0; border-color:#5a4322; background:#291f12; }
.feedback-status.pending{ color:#a8c8e8; border-color:#2c4a5a; background:#16222c; }
.feedback-status.ok{ color:#b6e8cb; border-color:#2c5a40; background:#16291e; }
.feedback-status.muted{ color:var(--bone-dim); border-color:var(--line); background:var(--ink-3); }

/* ---- Guest chip in the Who's Playing list ---- */
.paid-chip.is-guest{ border-style:dashed; border-color:var(--brass); background:rgba(217,164,65,.06); }

/* ---- Hosting Roster ---- */
.section-label{ font-family:'Major Mono Display',monospace; font-size:.7rem; text-transform:uppercase;
  letter-spacing:.08em; color:var(--bone-dim); margin:16px 0 8px; }
.section-label:first-child{ margin-top:0; }

.next-card{ display:flex; align-items:center; gap:12px; padding:12px 14px; }
.next-card .pos{ font-family:'Major Mono Display',monospace; color:var(--brass); font-size:.8rem; flex:0 0 16px; }
.next-card .info{ flex:1; min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:4px; }
.next-card .name{ font-weight:700; font-size:.98rem; line-height:1.25; }
.next-card .date{ font-size:.82rem; color:var(--brass); }
.next-card .actions{ display:flex; align-items:center; gap:4px; flex:0 0 auto; }
.tag{ font-size:.65rem; font-weight:800; letter-spacing:.03em; text-transform:uppercase;
  padding:2px 7px; border-radius:20px; white-space:nowrap; }
.tag.confirmed{ color:#a8d8b8; background:#0f2a1a; }
.tag.suggested{ color:var(--bone-dim); background:var(--ink-3); }
.reorder{ display:flex; flex-direction:column; gap:2px; flex:0 0 26px; }
.reorder button{ background:var(--ink-3); border:1px solid var(--line); border-radius:5px; color:var(--bone);
  font-size:.7rem; cursor:pointer; padding:2px 0; line-height:1.2; width:26px; }
.reorder button:disabled{ opacity:.25; cursor:default; }
.reorder button:not(:disabled):hover{ color:var(--brass); border-color:var(--brass); }
.remove-btn{ background:none; border:1px solid var(--line); border-radius:8px; width:26px; height:26px;
  display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--bone-dim); font-size:.85rem; }
.remove-btn:hover{ color:#e88a96; border-color:#5a2730; }
.notify-btn{ font-family:inherit; font-size:.72rem; font-weight:700; color:var(--brass); background:none;
  border:1px solid var(--brass-deep); border-radius:20px; padding:4px 10px; cursor:pointer; align-self:flex-start; }
.notify-btn:hover{ background:rgba(217,164,65,.1); }
.notified-note{ font-size:.7rem; color:var(--bone-dim); align-self:flex-start; }

.host-row{ display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--line); }
.host-row:last-child{ border-bottom:none; }
.host-row .host-name{ flex:1 1 auto; min-width:60px; font-weight:600; font-size:.92rem; }
.wait-badge{ font-size:.72rem; font-weight:700; padding:2px 8px; border-radius:20px; white-space:nowrap; flex:0 0 auto; }
.wait-badge.overdue{ color:#f0a8ae; background:#341018; }
.wait-badge.soon{ color:#f0d2a0; background:#291f12; }
.wait-badge.recent{ color:var(--bone-dim); background:var(--ink-3); }
.lock-btn{ background:none; border:1px solid var(--line); border-radius:8px; width:30px; height:30px; flex:0 0 30px;
  display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--bone-dim); font-size:.9rem; }
.lock-btn:hover{ color:var(--brass); border-color:var(--brass); }

/* ---- Polls: list card ---- */
.poll-card{ cursor:pointer; }
.poll-q{ font-weight:700; font-size:.98rem; line-height:1.3; margin:0 0 8px; }

/* ---- Polls: vote/results row ---- */
.poll-opt{ border:1px solid var(--line); border-radius:12px; padding:12px 14px; cursor:pointer;
  transition:border-color .15s ease, background .15s ease; }
.poll-opt.mine{ border-color:var(--brass); background:rgba(217,164,65,.07); }
.poll-opt-top{ display:flex; align-items:center; gap:10px; }
.poll-opt-mark{ width:20px; height:20px; flex:0 0 20px; border:2px solid var(--line);
  display:flex; align-items:center; justify-content:center; color:#231a06; font-size:.7rem; font-weight:900; }
.poll-opt-mark.radio{ border-radius:50%; }
.poll-opt-mark.check{ border-radius:5px; }
.poll-opt.mine .poll-opt-mark{ background:var(--brass); border-color:var(--brass); }
.poll-opt-label{ flex:1; font-weight:600; font-size:.92rem; }
.poll-opt-count{ font-size:.78rem; color:var(--bone-dim); font-weight:700; }
.poll-opt-bar{ height:4px; border-radius:2px; background:var(--ink); margin:9px 0 8px; overflow:hidden; }
.poll-opt-bar-fill{ height:100%; background:var(--brass-deep); }
.poll-opt-voters{ display:flex; align-items:center; padding-left:2px; }
.poll-opt-voters .avatar-xs{ margin-left:-6px; border-width:2px; border-color:var(--ink-2); }
.poll-opt-voters .avatar-xs:first-child{ margin-left:0; }
/* "Yet to vote (n people)" under a poll's options — each photo opens that
   person's player profile. The button is reset so only the avatar shows. */
.yet-to-vote{ border-top:1px solid var(--line); padding-top:12px; margin-top:4px; }
.yet-title{ font-size:.78rem; font-weight:700; color:var(--bone-dim); text-transform:uppercase; letter-spacing:.06em; margin-bottom:10px; }
.yet-title b{ color:var(--bone); }
.yet-pics{ display:flex; flex-wrap:wrap; gap:8px; }
.yet-pic{ padding:0; margin:0; border:0; background:none; border-radius:50%; cursor:pointer; line-height:0; }
.yet-pic:active{ transform:scale(.92); }

/* ---- Results modal: pot split + rebuys ---- */
.split-grid{ display:grid; gap:6px 8px; text-align:center; }
.split-col-label{ font-size:.78rem; color:var(--bone-dim); font-weight:700; }
.split-col-pot{ font-size:.92rem; font-weight:700; }
.split-col-rebuy{ font-size:.76rem; color:var(--brass); }
.split-row-label{ text-align:left; }
.split-grid input{ width:100%; text-align:center; padding:6px 2px; }
.split-total{ font-size:.8rem; text-align:center; margin-top:10px; }
/* Pot-split lock state. Sized to keep "🔒 Complete" on ONE line in a
   4-column grid at 390px — wrapping there reads as a layout accident
   rather than a deliberate state. */
.split-col-lock{ font-size:.6rem; line-height:1.3; min-height:1.5em;
  white-space:nowrap; letter-spacing:-.01em; }
.lock-complete{ color:var(--green); }
.lock-rebuy{ color:var(--brass); }
.col-locked input{ border-style:dashed; border-color:#3d3833; color:var(--bone-dim); }
.col-locked input[disabled]{ opacity:.75; cursor:not-allowed; background:#141210; }
.col-header{ padding:0 0 2px; }
.rebuy-label{ flex:0 0 64px; text-align:center; font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; color:var(--bone-dim); }
.rebuy{ display:flex; align-items:center; justify-content:center; gap:2px; flex:0 0 64px; }
.rebuy button{ background:var(--ink-3); border:1px solid var(--line); border-radius:5px; color:var(--bone);
  font-size:.72rem; cursor:pointer; width:20px; height:20px; padding:0; line-height:1; }
.rebuy button:disabled{ opacity:.25; cursor:default; }
.rebuy button:not(:disabled):hover{ color:var(--brass); border-color:var(--brass); }
.rebuy .count{ width:16px; text-align:center; font-size:.78rem; font-weight:700; color:var(--bone-dim); }
.rebuy .count.has{ color:var(--brass); }
.player-row{ margin-bottom:4px; }
.player-row:last-child{ margin-bottom:0; }
.game-total-line{ font-size:.72rem; text-align:center; color:var(--bone-dim); margin-top:6px; }
.complete-tag{ font-size:.66rem; font-weight:800; letter-spacing:.03em; text-transform:uppercase;
  padding:2px 8px; border-radius:20px; color:#a8d8b8; background:#0f2a1a; white-space:nowrap; }

/* =====================================================================
   Tables — multi-tenancy stage 3 (views/tables.js). From the four
   approved mockups; see mockups/README.md.
   ===================================================================== */
/* A table's chip: the brand chip re-tinted. --h is set per element. */
.tchip{ width:30px; height:30px; border-radius:50%; flex:0 0 auto; display:inline-block;
  background:repeating-conic-gradient(var(--h) 0 18deg, #141210 18deg 36deg);
  border:2px solid var(--h); box-shadow:0 0 0 2px var(--ink) inset; }
.tchip.sm{ width:22px; height:22px; }
.tchip.lg{ width:56px; height:56px; border-width:3px; }
/* The app bar: the table's name under the brand, once you're in 2+ tables. */
.brand-wrap{ display:flex; flex-direction:column; align-items:center; gap:1px; }
.brand-table{ display:inline-flex; align-items:center; gap:5px; font-size:.68rem; font-weight:700;
  color:var(--bone-dim); letter-spacing:.06em; text-transform:uppercase; background:none; border:none;
  padding:0; font-family:inherit; cursor:default; max-width:60vw; overflow:hidden; white-space:nowrap; }
.brand-table .dot{ width:7px; height:7px; border-radius:50%; background:var(--h); flex:0 0 auto; }
/* The drawer's switcher. */
.tbl-current{ width:100%; display:flex; align-items:center; gap:10px; text-align:left; padding:10px;
  border-radius:12px; border:1px solid var(--line); background:var(--ink-3); color:var(--bone); font-family:inherit; cursor:pointer; }
.tbl-current .name, .tbl-row .name{ font-weight:800; font-size:.92rem; line-height:1.2; }
.tbl-current .sub, .tbl-row .sub{ font-size:.74rem; color:var(--bone-dim); }
.tbl-current .swap{ margin-left:auto; font-size:.72rem; font-weight:700; color:var(--brass); letter-spacing:.04em; white-space:nowrap; }
.tbl-list{ overflow:hidden; max-height:0; transition:max-height .3s ease; }
.tbl-list.open{ max-height:420px; }
.tbl-row{ width:100%; display:flex; align-items:center; gap:10px; text-align:left; padding:10px;
  border-radius:10px; border:none; background:none; color:var(--bone); margin-top:4px; font-family:inherit; cursor:pointer; }
.tbl-row:hover{ background:var(--ink-3); }
.tbl-row.pending{ opacity:.6; cursor:default; }
.tbl-divider{ height:1px; background:var(--line); margin:10px 0 4px; }
.drawer-create{ color:var(--brass); }
/* Icon tabs, style C: an icon over a small word (Q22). Inline SVG, not emoji. */
.icon-tabs{ max-width:480px; margin-bottom:16px; }
.tab.tab-icon{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  padding:7px 2px; min-width:0; border:none; background:none; font-family:inherit; cursor:pointer; }
.tab.tab-icon.on{ background:linear-gradient(180deg,var(--brass),var(--brass-deep)); color:#231a06; }
.ticon{ position:relative; display:inline-flex; width:22px; height:22px; }
.ticon svg{ width:22px; height:22px; }
.tbadge{ position:absolute; top:-6px; right:-9px; min-width:16px; height:16px; padding:0 4px; border-radius:999px;
  background:var(--amber); color:#231a06; font-size:.62rem; font-weight:800; line-height:16px; text-align:center;
  box-shadow:0 0 0 2px var(--ink); }
.tab.on .tbadge{ background:#231a06; color:var(--brass); box-shadow:0 0 0 2px var(--brass); }
.tword{ font-size:.62rem; font-weight:600; letter-spacing:.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
/* Invite codes. */
.code-big{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:2.1rem; font-weight:700;
  letter-spacing:.3em; text-align:center; color:var(--bone); padding:12px 0 4px; }
.code-big.off{ color:#5f584f; text-decoration:line-through; text-decoration-thickness:2px; }
.code-in{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:1.4rem; letter-spacing:.35em;
  text-transform:uppercase; text-align:center; }
.field-hint.err{ color:#f0b5bd; }
.btn-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:8px; }
.invite-head{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; }
.invite-name{ font-family:'Archivo Expanded','Archivo',sans-serif; font-weight:800; text-transform:uppercase;
  font-size:1.2rem; letter-spacing:.03em; }
/* Table settings and deleting. */
.swatches{ display:grid; grid-template-columns:repeat(8,1fr); gap:8px; }
.swatch{ aspect-ratio:1; border-radius:50%; border:2px solid transparent; padding:0; cursor:pointer;
  background:repeating-conic-gradient(var(--h) 0 18deg, #141210 18deg 36deg); box-shadow:0 0 0 2px var(--ink) inset; }
.swatch.on{ border-color:var(--bone); box-shadow:0 0 0 2px var(--ink) inset, 0 0 0 2px var(--bone); }
.table-preview{ border:1px dashed var(--line); border-radius:12px; padding:10px; }
.danger-card{ border-color:#5a2730; }
.danger-card h2{ color:#e88a96; }
.losing{ margin:0; padding-left:18px; font-size:.86rem; color:var(--bone-dim); }
/* Stage 4 (mockups/mockup-open-table-creation.html): limits, holds, reports */
.limit-note{ border:1px solid #5a4322; background:rgba(217,138,43,.10); border-radius:12px; padding:12px 14px; color:#f0d2a0; font-size:.88rem; line-height:1.45; }
.limit-note b{ color:#ffe3b3; }
.about{ display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--ink); }
.link-quiet{ background:none; border:0; color:var(--bone-dim); font:inherit; font-size:.82rem; text-decoration:underline; text-underline-offset:3px; padding:4px; cursor:pointer; }
.trow{ display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--line); }
.req-status{ display:flex; align-items:center; gap:6px; font-size:.74rem; color:var(--bone-dim); }
.req-status .dotw{ width:7px; height:7px; border-radius:50%; background:var(--amber); flex:0 0 auto; }
.req-status.declined{ color:#f0b5bd; }
.req-status.declined .dotw{ background:var(--red); }
.requests-card .trow:last-of-type{ border-bottom:0; }
.req-note{ font-size:.8rem; margin:8px 0 0; }
.leave-btn{ margin-left:auto; color:#e88a96; font-size:.76rem; padding:6px 10px; white-space:nowrap; }

/* Table Admin -> Guests: the collapsed "Hidden guests" section (2 Oct 2026) */
.guests-hidden{ margin-top:8px; }
.guests-hidden summary{ cursor:pointer; color:var(--bone-dim); font-size:.84rem; padding:6px 0; list-style:none; }
.guests-hidden summary::-webkit-details-marker{ display:none; }

/* Add a guest: pick a previous guest (2 Oct 2026) */
.guest-picklist{ max-height:300px; overflow-y:auto; display:flex; flex-direction:column; gap:6px; }
.guest-pick{ display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; text-align:left;
  padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--ink); color:var(--bone); font:inherit; cursor:pointer; }
.guest-pick:disabled{ opacity:.5; cursor:default; }
.guest-pick .nm{ font-weight:600; font-size:.92rem; }
.guest-pick .mt{ font-size:.76rem; color:var(--bone-dim); }
.guest-clash{ border:1px solid #5a4322; background:rgba(217,138,43,.10); border-radius:10px; padding:10px 12px; font-size:.84rem; color:#f0d2a0; }
.guest-clash .link-btn{ color:#ffe3b3; text-decoration:underline; }
.guest-confirm{ padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--ink); }
.guest-confirm .nm{ font-weight:700; font-size:1rem; }
.guest-confirm .mt{ font-size:.78rem; color:var(--bone-dim); }


/* ---- Table settings (5 Oct 2026, mockups/mockup-table-settings.html) ----
   views/settings.js. Used by Table Admin -> Settings and Create a table. */
.set-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:12px 0; border-top:1px solid var(--line); }
.set-body > .set-row:first-child{ border-top:none; padding-top:2px; }
.set-row.col{ flex-direction:column; align-items:stretch; }
.set-t{ font-weight:700; font-size:.92rem; }
.set-d{ color:var(--bone-dim); font-size:.78rem; line-height:1.4; margin-top:2px; }
.set-where{ font-size:.7rem; color:var(--brass); margin-top:4px; letter-spacing:.02em; }
.set-soon{ font-size:.62rem; text-transform:uppercase; letter-spacing:.08em; border:1px solid var(--line); border-radius:999px;
  padding:2px 8px; color:var(--bone-dim); margin-left:8px; font-weight:600; vertical-align:middle; }
.set-row:has(.set-soon){ opacity:.6; }
.set-sw{ position:relative; flex:0 0 50px; width:50px; height:30px; border-radius:999px; background:var(--ink-3);
  border:1px solid var(--line); cursor:pointer; padding:0; }
.set-sw::after{ content:''; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%;
  background:var(--bone-dim); transition:left .15s, background .15s; }
.set-sw[aria-checked="true"]{ background:linear-gradient(180deg,var(--brass),var(--brass-deep)); border-color:var(--brass-deep); }
.set-sw[aria-checked="true"]::after{ left:23px; background:#231a06; }
.set-seg{ display:flex; gap:4px; background:var(--ink); border:1px solid var(--line); border-radius:10px; padding:4px; }
.set-seg button{ flex:1; padding:8px 6px; border-radius:7px; border:none; background:none; color:var(--bone-dim);
  font-family:inherit; font-weight:600; font-size:.82rem; cursor:pointer; }
.set-seg button.on{ background:var(--ink-3); color:var(--bone); box-shadow:inset 0 0 0 1px var(--brass-deep); }
.amts{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.amt{ display:inline-flex; align-items:center; gap:6px; padding:6px 8px 6px 12px; border-radius:999px; border:1px solid var(--line);
  background:var(--ink-3); font-weight:700; font-size:.86rem; cursor:pointer; }
.amt.def{ border-color:var(--brass); box-shadow:inset 0 0 0 1px var(--brass-deep); }
.amt-x{ border:none; background:none; color:var(--bone-dim); font-size:1rem; cursor:pointer; padding:0 4px; line-height:1; }
.amt-star{ font-size:.66rem; color:var(--brass); text-transform:uppercase; letter-spacing:.06em; }
.amt-add{ display:flex; gap:6px; align-items:center; }
.amt-add .amt-in{ width:90px; padding:7px 10px; }
.games-set{ display:flex; flex-direction:column; gap:6px; }
.game-set{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px;
  border:1px solid var(--line); border-radius:10px; background:var(--ink); }
.game-set-nm{ font-weight:700; font-size:.9rem; }
.game-set-tg{ font-size:.74rem; color:var(--bone-dim); }
.game-set.off .game-set-nm, .game-set.off .game-set-tg{ opacity:.45; }
.custom-tag{ font-size:.6rem; text-transform:uppercase; letter-spacing:.08em; color:var(--brass); border:1px solid var(--brass-deep);
  border-radius:999px; padding:1px 7px; margin-left:6px; vertical-align:middle; }
.game-form{ background:var(--ink); }
.game-form textarea{ min-height:84px; }
.ladder-set{ display:grid; grid-template-columns:28px 1fr 1fr 28px; gap:6px; align-items:center; }
.ladder-set input{ padding:7px 10px; text-align:center; }
.ladder-n{ font-family:'Major Mono Display',monospace; font-size:.7rem; color:var(--brass); text-align:center; }
.ladder-hd{ font-size:.66rem; text-transform:uppercase; letter-spacing:.06em; color:var(--bone-dim); text-align:center; }
.set-x{ border:none; background:none; color:var(--bone-dim); font-size:1rem; cursor:pointer; padding:0; }
.chipset-set{ display:grid; grid-template-columns:34px 1fr 28px; gap:8px; align-items:center; }
.chipset-set input{ padding:7px 10px; }
.chip-dot-btn{ width:28px; height:28px; cursor:pointer; padding:0; }
.chip-swatches{ grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:8px; padding:8px; border:1px solid var(--line);
  border-radius:10px; background:var(--ink); }
.chip-sw{ width:30px; height:30px; border-radius:50%; border:2px solid transparent; cursor:pointer; padding:0;
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.25), 0 0 0 1px rgba(255,255,255,.28); }
.chip-sw.on{ border-color:var(--brass); }
.set-step{ flex:0 0 auto; display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.set-step button{ width:40px; height:38px; border:none; background:var(--ink-3); color:var(--bone); font-size:1.1rem; cursor:pointer; }
.set-step span{ min-width:86px; text-align:center; font-weight:700; font-size:.9rem; }
.create-prog{ display:flex; gap:6px; }
.create-prog i{ flex:1; height:4px; border-radius:2px; background:var(--line); }
.create-prog i.on{ background:var(--brass); }

/* App Admin -> Accounts: every account, searchable (mockups/mockup-app-admin-accounts.html) */
.acct-search{ position:relative; }
.acct-search input{ padding-left:36px; padding-right:40px; }
.acct-search input::-webkit-search-cancel-button{ -webkit-appearance:none; appearance:none; }
.acct-search .clr{ position:absolute; right:4px; top:50%; transform:translateY(-50%); width:36px; height:36px;
  border:0; background:none; color:var(--bone-dim); font-size:1.3rem; line-height:1; padding:0; }
.acct-search .mag{ position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--bone-dim); font-size:.95rem; pointer-events:none; }
.fchips{ display:flex; gap:6px; overflow-x:auto; padding-bottom:2px; scrollbar-width:none; }
.fchips::-webkit-scrollbar{ display:none; }
.fchip{ flex:0 0 auto; font-size:.78rem; padding:6px 11px; border-radius:999px; border:1px solid var(--line);
  background:var(--ink-3); color:var(--bone-dim); }
.fchip.on{ background:rgba(217,164,65,.16); border-color:var(--brass-deep); color:#f0dcae; font-weight:700; }
.fchip .n{ opacity:.7; margin-left:4px; }
.acct-list{ padding-top:6px; padding-bottom:6px; }
.acct-count{ padding:8px 0 2px; }
.acct{ border-top:1px solid var(--line); padding:12px 0; }
.acct-count + .acct{ border-top:0; }
.acct-head{ display:flex; gap:10px; align-items:flex-start; width:100%; background:none; border:0; color:inherit;
  text-align:left; padding:0; font:inherit; }
.acct-head > span{ display:block; }
.acct-head > .avatar{ display:inline-flex; flex:0 0 auto; }
.acct-name{ font-size:.94rem; font-weight:700; }
.acct .sub, .acct-list .sub{ display:block; font-size:.76rem; color:var(--bone-dim); overflow-wrap:anywhere; }
.acct .hit{ display:block; font-size:.74rem; color:#f0dcae; margin-top:3px; }
.acct-list mark{ background:rgba(217,164,65,.35); color:#fff3d6; border-radius:3px; padding:0 1px; }
.acct-detail{ margin:10px 0 0 46px; display:flex; flex-direction:column; gap:10px; }
.acct-detail .kv{ margin:0; display:grid; grid-template-columns:84px 1fr; gap:4px 10px; font-size:.82rem; }
.acct-detail .kv dt{ color:var(--bone-dim); }
.acct-detail .kv dd{ margin:0; overflow-wrap:anywhere; }
.tline{ display:flex; align-items:center; gap:8px; font-size:.82rem; padding:3px 0; }
.rolepill{ font-size:.68rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:1px 7px;
  border-radius:999px; border:1px solid var(--line); color:var(--bone-dim); }
.rolepill.admin{ color:#f0dcae; border-color:var(--brass-deep); }
.rolepill.asking{ color:#f0d2a0; border-color:#5a4322; }

/* =====================================================================
   Notification history (mockups/mockup-notification-history.html):
   the bell in the app bar and the list behind it.
   ===================================================================== */
.nbell{ position:relative; width:40px; height:40px; border-radius:50%; background:var(--ink-3); border:1px solid var(--line);
  display:inline-flex; align-items:center; justify-content:center; padding:0; color:var(--bone); }
.nbell:hover{ border-color:var(--brass-deep); }
.nbell:focus-visible, .nopen:focus-visible, .ntick:focus-visible{ outline:2px solid var(--brass); outline-offset:2px; }
.nbell-icon{ display:inline-flex; }
.nbell-icon svg{ width:20px; height:20px; }
.ncount{ position:absolute; top:-4px; right:-4px; min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:var(--red);
  color:#fff; font-size:.68rem; font-weight:800; line-height:1; display:inline-flex; align-items:center; justify-content:center;
  border:2px solid var(--ink); }
.ncount[hidden]{ display:none; }

.nbar{ display:flex; justify-content:flex-end; margin-top:-6px; }
.nmarkall[disabled]{ opacity:.4; cursor:default; }
.nday{ font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--bone-dim); font-weight:700; margin:6px 2px -14px; }
.nlist{ display:flex; flex-direction:column; gap:8px; }
.nrow{ position:relative; background:var(--ink-2); border:1px solid var(--line); border-radius:var(--radius); }
.nrow.unread{ background:linear-gradient(180deg,#26211b,#1d1a17); border-color:#4a3d27; }
.nrow.unread::before{ content:""; position:absolute; left:0; top:12px; bottom:12px; width:3px; border-radius:0 3px 3px 0; background:var(--brass); }
.nopen{ display:block; width:100%; text-align:left; background:none; border:0; border-radius:var(--radius); padding:11px 16px 12px; color:inherit; font:inherit; cursor:pointer; }
.nrow.unread .nopen{ padding-bottom:6px; }
/* Line 1: the time on the right, always; on the left the table or the kind of message. */
.ntop{ display:flex; align-items:center; gap:8px; font-size:.72rem; color:var(--bone-dim); margin-bottom:3px; min-width:0; }
.ntl{ display:flex; align-items:center; gap:7px; min-width:0; flex:1 1 auto; }
.nname{ font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nkind{ font-weight:600; letter-spacing:.06em; text-transform:uppercase; font-size:.66rem; }
.nwhen{ margin-left:auto; flex:0 0 auto; font-variant-numeric:tabular-nums; }
.ntitle{ font-weight:700; font-size:.95rem; overflow-wrap:anywhere; }
.nbody{ font-size:.85rem; color:#cfc7ba; margin-top:1px; overflow-wrap:anywhere; }
/* Mark read: its own line under a NEW message only, so nothing is reserved beside the text. */
.nacts{ display:flex; justify-content:flex-end; padding:0 12px 10px; }
.ntick{ display:inline-flex; align-items:center; gap:6px; min-height:34px; padding:0 12px 0 10px; border-radius:999px;
  border:1px solid var(--brass-deep); background:rgba(217,164,65,.1); color:var(--brass); font:inherit; font-size:.78rem; font-weight:700; cursor:pointer; }
.ntick svg{ width:16px; height:16px; }
.nempty{ text-align:center; padding:48px 20px; }
.nempty-icon svg{ width:34px; height:34px; color:var(--bone-dim); }
.nempty h3{ margin:8px 0 6px; font-size:1.05rem; }
.nempty p{ margin:0; font-size:.85rem; }
.nfoot{ text-align:center; font-size:.74rem; margin:0; }
.tchip.xs{ width:10px; height:10px; border-width:0; box-shadow:none; background:var(--h); }

/* Time zones (12 Oct 2026): the "i" beside a night's time, its note, the new-night banner, the zone picker. */
.tz-when{ display:inline-flex; flex-wrap:wrap; align-items:center; gap:6px; }
.tz-i{ width:22px; height:22px; padding:0; border-radius:50%; border:1px solid var(--brass-deep); background:rgba(217,164,65,.1);
  color:var(--brass); font-weight:800; font-size:.78rem; font-style:italic; line-height:1; cursor:pointer; }
.tz-pop{ flex-basis:100%; background:var(--ink-3); border:1px solid var(--line); border-radius:10px; padding:9px 12px; font-size:.84rem; line-height:1.4; }
.tz-pop[hidden]{ display:none; }
.tz-banner{ border:1px solid #5a4322; background:rgba(217,138,43,.10); border-radius:12px; padding:10px 12px; color:#f0d2a0; font-size:.86rem; line-height:1.45; }
.tz-banner[hidden]{ display:none; }
.zone-pick,.zone-opt{ display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; text-align:left;
  background:var(--ink); border:1px solid var(--line); border-radius:10px; padding:11px 12px; color:var(--bone); font-family:inherit; font-size:.95rem; cursor:pointer; }
.zone-opt{ background:var(--ink-2); }
.zone-opt.on{ border-color:var(--brass-deep); background:rgba(217,164,65,.08); }