/* RIVAL demo — neutral messaging canvas, restrained action accents. */
:root {
  color-scheme: dark;
  --ink: #141019;
  --surface: #211e26;
  --raised: #2b2730;
  --line: #ffffff10;
  --text: #edf0eb;
  --quiet: #a1aaad;
  --lime: #e7ff49;
  --mint: #8FE6C1;
  --purple: #b9a3d9;
}
* { box-sizing: border-box; }
html, body { background: var(--ink); }
body { margin: 0; color: var(--text); font: 14px/1.45 Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input, select, textarea { font: inherit; }
button { border: 0; background: none; color: inherit; cursor: pointer; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
button:disabled { cursor: default; opacity: .65; }
h1, h2, h3, p { margin: 0; }
h1 { line-height: 1.2; }
h2 { font-size: 20px; letter-spacing: -.5px; }
h3 { font-size: 14px; }
#app { max-width: 540px; margin: auto; position: relative; background: var(--ink); }

.brandbar { display: flex; align-items: center; justify-content: space-between; }
.wordmark { font-size: 17px; font-weight: 950; letter-spacing: -1px; font-style: italic; }
.brandbar small { color: var(--quiet); }

.pagehead, .row, .sectionhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.icon { width: 21px; height: 21px; display: inline-block; vertical-align: middle; flex: none; }
.iconbtn { display: grid; place-items: center; border-radius: 50%; }
.primary { min-height: 44px; padding: 11px 17px; background: var(--lime); color: var(--ink); border-radius: 10px; font-weight: 700; }
.secondary { padding: 10px 14px; border: 1px solid #ffffff24; background: #ffffff04; border-radius: 10px; font-weight: 600; }
.textbtn { padding: 10px 0; }
.wide { width: 100%; }
.muted { color: var(--quiet); }
.small { font-size: 12px; }
.tiny { font-size: 11px; }
.chip { border-radius: 20px; border: 1px solid transparent; color: var(--quiet); background: #ffffff06; font-weight: 600; }
.chip.active { color: var(--text); background: #ffffff0d; }
.search { display: flex; align-items: center; gap: 10px; padding: 0 14px; background: var(--surface); color: var(--quiet); }
.search input { margin: 0; padding: 0; border: 0; background: transparent; }
.tabs { display: flex; }
.upnext { display: flex; align-items: center; width: 100%; text-align: left; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.calendar { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: none; border: 1px solid #ffffff24; border-radius: 6px; font-weight: 750; }
.calendar small { letter-spacing: 1px; }
.nextcopy { min-width: 0; flex: 1; }
.upnext .label { font-size: 10px; color: var(--quiet); }
.upnext strong { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 600; }
.nextstatus { font-size: 10px; color: var(--quiet); }
.chevron { color: var(--quiet); }
.chevron .icon { width: 16px; height: 16px; }

.chatrow { display: flex; }
.avatar-open { padding: 0; align-self: flex-start; border-radius: 50%; }
.avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; border-radius: 50%; background: #293236; object-fit: cover; }
.initials { font-size: 14px; font-weight: 650; letter-spacing: -.5px; color: #d5dedd; }
.initials.club { font-size: 15px; letter-spacing: -1px; border: 1px solid #ffffff0e; }
.initials.person { background: #313239; color: #ddd8e5; }
.initials.self { background: #354035; color: #e2e8d1; }
.avatar.smallavatar { width: 25px; height: 25px; font-size: 9px; }
.chatcontent { flex: 1; min-width: 0; border-bottom: 1px solid var(--line); }
.chatopen { display: flex; align-items: flex-start; width: 100%; padding: 0; text-align: left; }
.chattext { display: block; min-width: 0; flex: 1; }
.chatopen strong { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.preview { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--quiet); }
.chatmeta { display: flex; flex-direction: column; align-items: flex-end; padding-top: 2px; }
.timestamp { color: var(--quiet); white-space: nowrap; }
.unread { display: grid; place-items: center; }
.inboxpoll, .eventstrip { display: flex; align-items: center; gap: 10px; }
.inboxpoll { padding: 0 0 0 9px; }
.pollinfo { flex: 1; min-width: 0; text-align: left; }
.pollinfo strong { display: block; font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pollinfo .meta { display: block; font-size: 10px; color: var(--quiet); margin-top: 2px; }
.inboxpoll .primary, .eventstrip .primary { border: 1px solid #ffffff26; background: transparent; color: var(--lime); flex: none; }
.progress { display: block; border-radius: 2px; overflow: hidden; background: #ffffff12; }
.progress > span { display: block; height: 100%; }
.primary.joined, .inboxpoll .joined, .eventstrip .joined { color: var(--mint); border: 1px solid #8fe6c133; background: #8fe6c10a; }
.nav { z-index: 10; bottom: 0; left: 50%; display: flex; max-width: 540px; border-top: 1px solid var(--line); }
.nav button { display: flex; flex: 1; flex-direction: column; align-items: center; padding: 3px; color: var(--quiet); }
.nav .icon { width: 22px; height: 22px; }
.nav button.active { color: var(--text); }
.nav button.active .icon { box-sizing: content-box; padding: 4px 18px; margin: -4px 0; border-radius: 20px; }
/* A conversation with plans in it — not a separate event dashboard. */
.group-shell { display: flex; flex-direction: column; }

.group-shell .wordmark { font-size: 14px; }

.grouphead { align-items: center; border-bottom: 1px solid var(--line); }
.grouphead .avatar { font-size: 12px; }
.grouphead .iconbtn { flex: none; }
.groupname { flex: 1; min-width: 0; }
.grouphead h2 { letter-spacing: -.2px; }
.grouphead .tiny { margin-top: 2px; }
.conversation { flex: 1; min-height: 0; overflow: auto; scroll-behavior: smooth; }
.eventzone { position: sticky; z-index: 2; overflow-y: auto; border-bottom: 1px solid var(--line); }

.eventstrip { border-left: 2px solid #a8b79240; }
.eventstrip .pollinfo { padding: 1px 0; }
.eventstrip .pollinfo strong { line-height: 1.2; }

.eventstrip .meta { margin-top: 2px; line-height: 1.2; }

.eventextras { display: flex; justify-content: space-between; align-items: center; }
.eventextras button { color: var(--quiet); }
.date { text-align: center; color: var(--quiet); margin-bottom: 15px; }
.message { display: flex; gap: 7px; align-items: flex-end; }
.message.mine { margin-left: auto; justify-content: flex-end; }
.msgbody { min-width: 0; max-width: 100%; background: var(--raised); }
.mine .msgbody { background: #303a34; }
.msgname { color: #bfb0cf; }
.bubble { color: var(--text); overflow-wrap: anywhere; }
.mine .bubble { padding-top: 9px; }
.msgtime { display: inline-block; float: right; margin: 6px 0 0 12px; color: var(--quiet); white-space: nowrap; }
.receipts { color: #b0c3b1; letter-spacing: -2px; margin-left: 3px; }
.composer { display: flex; align-items: center; gap: 8px; padding: 9px 12px max(10px,env(safe-area-inset-bottom)); background: var(--ink); }
.composer input { flex: 1; min-width: 0; margin: 0; padding: 10px 14px; border: 0; border-radius: 24px; background: var(--raised); }
.composer .iconbtn { flex: none; }
.composer .send { color: var(--ink); }
.composer .send .icon { width: 18px; height: 18px; }
.notice { max-width: 90%; margin: 12px auto; padding: 9px 15px; background: #ffffff05; color: var(--quiet); border-radius: 10px; text-align: center; }
/* Sheets and event reassurance. */
dialog { width: calc(100% - 28px); max-width: 480px; max-height: 90dvh; overflow: auto; border: 1px solid #ffffff20; background: var(--surface); color: var(--text); box-shadow: 0 25px 100px #0008; }
dialog::backdrop { background: #0c090fb8; backdrop-filter: blur(3px); }
.sheethead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.sheethead h2 { font-size: 21px; }
.sheethead button { flex: none; }
.sheetcopy { color: #b8bfc0; margin: 10px 0 20px; }
.summary { padding: 14px 16px; margin: 16px 0; border: 1px solid var(--line); border-radius: 12px; }
.summary .row { padding: 7px 0; }
.summary .total { margin-top: 8px; padding-top: 14px; border-top: 1px solid #ffffff14; font-weight: 750; }
.tag { display: inline-block; margin-bottom: 8px; border-radius: 5px; background: #e7ff4910; color: #d4e99c; font-weight: 750; letter-spacing: .8px; }

.event-facts { margin-top: 13px; }
.event-facts span { flex: none; color: var(--quiet); }
.event-facts strong { font-weight: 600; }
.receipt-note { font-size: 11px; color: var(--quiet); line-height: 1.6; }
.receipt-note span { display: block; }
.attendees { margin: 23px 0; }
.attendees .sectionhead { margin: 0 0 12px; }

.going-status { color: var(--mint); }
.tag.going-status { background: #8fe6c110; }

.back-to-chat { margin-top: 10px; }
.manage-event-title { display: flex; justify-content: space-between; width: 100%; text-align: left; }
.formgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
label { display: block; margin-bottom: 13px; color: #c8cecf; }
input, select, textarea { display: block; width: 100%; min-width: 0; padding: 11px; margin-top: 5px; border: 1px solid #ffffff1b; border-radius: 9px; background: var(--ink); color: var(--text); }
textarea { min-height: 80px; resize: vertical; }
/* Existing Discover, profile, gallery and Tunnel. */
.sectionhead { margin: 25px 0 13px; }
.segmented { display: flex; padding: 4px; margin-bottom: 20px; border-radius: 11px; background: #ffffff06; }
.segmented button { flex: 1; padding: 9px; border-radius: 8px; color: var(--quiet); font-weight: 650; }

.profiletop { display: flex; align-items: center; }

.stats { flex: 1; justify-content: space-between; text-align: center; }
.stats strong { display: block; }
.stats span { color: var(--quiet); }
.bio { color: #c8cecf; }

.gallery { display: grid; grid-template-columns: repeat(3,1fr); }
.gallery.count-1 { grid-template-columns: 1fr; }
.gallery.count-2 { grid-template-columns: 1fr 1fr; }
.gallery button { padding: 0; aspect-ratio: 1; overflow: hidden; }
.gallery img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gallery.count-1 button { aspect-ratio: 1.25; }
.respect { display: flex; justify-content: space-between; gap: 9px; padding: 15px; margin: 20px 0; border-radius: 12px; background: #ffffff05; font-size: 11px; }
.respect b { color: var(--lime); }
.bottomnote { text-align: center; color: var(--quiet); }
.territory { transition: background 1s; }
.territory .msgbody { background: #2b2730; }

.league-list { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }

.league-list div { flex: 1; }

.league-list p { color: var(--quiet); }
.empty { padding: 30px; text-align: center; color: var(--quiet); font-size: 12px; }
#toast { position: fixed; z-index: 100; bottom: 100px; left: 50%; transform: translateX(-50%) translateY(15px); max-width: 90%; padding: 12px 18px; border-radius: 12px; background: var(--text); color: var(--ink); font-size: 12px; font-weight: 600; opacity: 0; pointer-events: none; }
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (min-width:700px) {
 #app { border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
 .nav { max-width: 538px; }
}
@media (max-width:360px) {

 .avatar { width: 42px; height: 42px; }
 .nextstatus { display: none; }
 dialog { padding: 20px; }
 .formgrid { grid-template-columns: 1fr; }

}
@media (prefers-reduced-motion:reduce) {
 * { transition: none !important; scroll-behavior: auto !important; }
}

/* Phone-first refinement: readable conversations, plans as a supporting layer. */
html, body { height: 100%; overflow: hidden; }
#app { height: 100dvh; min-height: 0; }
.shell { height: 100%; min-height: 0; padding-bottom: 0; display: flex; flex-direction: column; }
.brandbar { min-height: 32px; flex-shrink: 0; }
.brandbar small { letter-spacing: .15px; }

.page { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 20px 26px; overscroll-behavior: contain; }
h1 { font-size: 32px; font-weight: 780; letter-spacing: -1.1px; }
.pagehead { min-height: 44px; margin-bottom: 14px; }

.inbox-page .pagehead .iconbtn { background: var(--lime); color: var(--ink); }
.search { height: 44px; margin-bottom: 8px; border-radius: 13px; }
.search input { font-size: 15px; }
.tabs { gap: 6px; margin-bottom: 6px; }
.chip { min-height: 36px; padding: 7px 14px; font-size: 12px; }
.tabs .chip.active { color: var(--mint); background: #8fe6c112; }
.upnext { min-height: 62px; gap: 11px; padding: 9px 0; }
.calendar { width: 34px; height: 40px; font-size: 17px; }
.calendar small { font-size: 9px; }
.upnext .label, .nextstatus { font-size: 12px; }
.upnext strong { font-size: 14px; margin-top: 1px; }
.chatlist { margin: 2px -20px 0; }
.chatrow { padding: 18px 20px 0; gap: 12px; }
.avatar { width: 48px; height: 48px; }
.initials.club { background: #303632; color: #d9e4c9; }
.chatcontent { padding-bottom: 16px; }
.chatopen { min-height: 49px; gap: 7px; }
.chatopen strong { font-weight: 720; line-height: 1.35; }
.preview { margin-top: 4px; line-height: 1.4; }
.timestamp { font-size: 11px; }
.chatmeta { gap: 7px; }
.unread { min-width: 20px; height: 20px; padding: 0 5px; border-radius: 12px; background: var(--mint); color: var(--ink); font-size: 11px; font-weight: 750; }

.pollinfo { min-height: 52px; display: flex; flex-direction: column; justify-content: center; padding: 1px 0; }
.pollinfo strong, .eventstrip .pollinfo strong { font-size: 14px; font-weight: 650; line-height: 1.3; }
.pollinfo .meta, .eventstrip .meta { display: flex; justify-content: space-between; gap: 6px; font-size: 12px; line-height: 1.35; margin-top: 3px; white-space: nowrap; }
.event-time { color: #d6d1db; }
.event-action { display: flex; position: relative; align-items: center; flex-direction: column; justify-content: center; align-self: stretch; flex: none; min-width: 56px; }
.event-price { font-size: 11px; color: var(--quiet); text-align: center; line-height: 1.2; }
.inboxpoll .primary, .eventstrip .primary { min-height: 36px; min-width: 56px; padding: 6px 10px; font-size: 12px; border-radius: 10px; margin-top: 2px; }
.progress { margin-top: 5px; height: 2px; width: 100%; }
.progress > span { background: var(--mint); opacity: .7; }
.nav { position: static; transform: none; flex-shrink: 0; width: 100%; padding: 10px 20px max(12px,env(safe-area-inset-bottom)); background: #19151e; }
.nav button { min-height: 45px; font-size: 11px; gap: 6px; }
.nav button.active .icon { color: var(--mint); background: #8fe6c114; }
.group-shell { height: 100%; min-height: 0; overflow: hidden; }
.group-shell .brandbar { padding: 0 16px; }

.grouphead { min-height: 64px; flex-shrink: 0; }

.grouphead h2 { font-size: 15px; line-height: 1.3; }
.grouphead .tiny { font-size: 11px; }
.grouphead .iconbtn { width: 36px; height: 44px; }
.backlink { display: flex; align-items: center; min-height: 44px; flex: none; font-size: 12px; padding: 0 3px 0 0; gap: 0; color: #c9c1d0; }
.backlink .icon { width: 17px; }
.conversation { padding: 12px 12px 18px; overscroll-behavior: contain; }
.eventzone { top: -12px; margin: -12px -1px 14px; padding: 3px 0 0; background: var(--ink); }
.eventstrip { min-height: 56px; border-left-color: #8fe6c144; }

.eventextras button { min-height: 30px; padding: 3px 0; }
.eventextras .tiny { font-size: 11px; padding-right: 2px; }
.date { font-size: 11px; margin: 12px 0 18px; }
.message { margin-bottom: 14px; max-width: 93%; }
.msgname { font-size: 12px; margin: 8px 12px 0; }
.bubble { padding: 5px 12px 8px; }
.msgtime { font-size: 10px; }
.msgbody { border-radius: 12px 12px 12px 3px; }
.mine .msgbody { border-radius: 12px 12px 3px 12px; }
.composer { min-height: 65px; flex-shrink: 0; border-top: 1px solid var(--line); }
.composer input { min-height: 44px; font-size: 14px; }
.composer .iconbtn { width: 40px; height: 44px; }
.composer .send { width: 44px; height: 44px; background: var(--lime); }
.notice { font-size: 12px; }
.tunnel-context { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 10px 12px; background: #141019aa; font-size: 12px; }
.tunnel-context span { color: #d1cdd4; }

dialog { padding: 22px; border-radius: 20px; }
.sheethead button { width: 44px; height: 44px; }
.sheetcopy { font-size: 14px; }
.tag { font-size: 10px; padding: 5px 8px; }
.event-facts span { font-size: 13px; width: 64px; }
.event-facts strong { font-size: 14px; line-height: 1.5; }
.summary .row { font-size: 14px; }
.summary .total { font-size: 20px; }

.receipt-note, .tiny { font-size: 12px; }
.textbtn { min-height: 44px; font-size: 13px; color: #cbc1d7; }
.secondary { min-height: 44px; }
label { font-size: 13px; }

.profiletop { gap: 18px; margin: 14px 0 16px; }
.profiletop .avatar { width: 86px; height: 86px; border: 2px solid #8fe6c14d; background: #303a34; font-size: 27px; }
.profiletop h2 { font-size: 25px; letter-spacing: -.6px; margin: 3px 0 5px; }
.profile-handle { color: var(--quiet); font-size: 13px; }
.bio { font-size: 14px; line-height: 1.65; margin: 0 0 14px; max-width: 340px; }
.profile-team { display: flex; gap: 8px; align-items: center; font-size: 13px; margin-bottom: 24px; }
.team-mark { display: grid; place-items: center; width: 25px; height: 28px; color: #dfedbf; background: #353e31; clip-path: polygon(0 0,100% 0,100% 75%,50% 100%,0 75%); font-weight: 800; }
.stats { display: grid; grid-template-columns: repeat(3,1fr); padding: 16px 0; border-block: 1px solid var(--line); }
.stats > * { padding: 0; border-right: 1px solid var(--line); }
.stats > :last-child { border: 0; }
.stats strong { font-size: 24px; font-weight: 730; margin-bottom: 3px; }
.stats span { font-size: 12px; }
.stats button strong { color: var(--mint); }
.highlights-head { margin: 18px 0 10px; }
.highlights-head h3 { font-size: 16px; }
.highlights-head h3 span { font-size: 13px; margin-left: 5px; font-weight: 400; }
.highlights-head .textbtn { min-height: 34px; padding: 5px 0 5px 14px; }
.gallery { gap: 4px; }
.gallery button { border-radius: 5px; }
.gallery.count-3, .gallery.count-4 { grid-template-columns: repeat(2,1fr); }
.gallery.count-3 button:first-child { grid-column: span 2; aspect-ratio: 2; }
.gallery.count-5 button:first-child { grid-column: span 2; grid-row: span 2; }
.gallery.count-7 button:first-child { grid-column: span 3; aspect-ratio: 3; }
.gallery.count-8 button:first-child { grid-column: span 2; aspect-ratio: 2; }

.gallery-choices { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.gallery-choices button { min-height: 44px; border: 1px solid #ffffff22; border-radius: 9px; }
.gallery-choices button.active { color: var(--mint); border-color: var(--mint); background: #8fe6c10b; }
.highlight-view { width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: 12px; }
.highlight-view img { width: 100%; height: 100%; object-fit: cover; }
.bottomnote { font-size: 11px; padding-top: 18px; }
@media (max-width:360px) {
 .page { padding-left: 14px; padding-right: 14px; }
 .chatlist { margin-left: -14px; margin-right: -14px; }
 .chatrow { padding-left: 14px; padding-right: 14px; gap: 9px; }
 .chatopen strong { font-size: 15px; }
 .chatrow .avatar { width: 42px; height: 42px; }
 .pollinfo .meta { gap: 4px; font-size: 11px; }
 .grouphead { gap: 6px; padding-inline: 8px; }
 .grouphead h2 { font-size: 14px; }
 .eventstrip .meta { font-size: 12px; }
}
.sample-photo { display: block; width: 100%; height: 100%; background-repeat: no-repeat; }
/* Keep source tiles square, crop the wider adaptive cells without stretching. */
.sample-photo { background-size: 300% auto, cover; }
.gallery.count-1 .sample-photo { background-position: calc(var(--tile-x) * 50%) calc((var(--tile-y) * 100% + 10%) / 2.2) !important; }
.gallery.count-3 button:first-child .sample-photo,
.gallery.count-8 button:first-child .sample-photo { background-position: calc(var(--tile-x) * 50%) calc((var(--tile-y) * 100% + 25%) / 2.5) !important; }
.gallery.count-7 button:first-child .sample-photo { background-position: calc(var(--tile-x) * 50%) calc((var(--tile-y) * 100% + 33.333%) / 2.66667) !important; }
.inboxpoll .primary, .eventstrip .primary { position: relative; }
.inboxpoll .primary::after, .eventstrip .primary::after { content: ''; position: absolute; inset: -4px 0; }
.sheethead h2, .event-facts strong, .profiletop h2, .manage-event-title strong, .groupname h2 { min-width: 0; overflow-wrap: anywhere; }
.profiletop > div, .event-facts > div, .sheethead { min-width: 0; }
.profiletop > div { flex: 1; }
#app:focus { outline: none; }
/* Final hierarchy pass: people and messages first; the plan stays actionable. */
.photo-avatar { position: relative; overflow: hidden; isolation: isolate; }
.avatar-photo { position: absolute; inset: 0; border-radius: inherit; background-image: url('assets/demo-highlights.png'); background-size: 300% 300%; background-repeat: no-repeat; }
.inbox-page .chatopen strong { font-size: 17px; font-weight: 730; }
.inbox-page .preview { color: #b9b2c1; font-size: 15px; line-height: 1.45; }
.inbox-page .chatcontent { border-bottom-color: #ffffff0b; }
.inboxpoll { border-left: 0; padding-left: 0; gap: 13px; margin-top: 9px; }
.inboxpoll .pollinfo { min-height: 60px; }
.inboxpoll .pollinfo strong { font-weight: 500; color: #beb7c6; }
.inboxpoll .meta { margin-top: 4px; }
.inboxpoll .event-time { color: #a9a1b2; }
.inboxpoll .progress { background: #ffffff0b; margin-top: 6px; }
.inboxpoll .progress > span { background: #b4c7bd; opacity: .5; }
.inboxpoll .event-price { font-size: 12px; }
.inboxpoll .primary { min-height: 44px; min-width: 60px; border-color: #e7ff4926; background: #e7ff4904; }
.inboxpoll .primary.joined { color: var(--mint); border-color: #8fe6c12b; background: #8fe6c108; }
.inboxpoll .primary::after { inset: 0; }
@media (max-width:360px) {
 .inbox-page .chatopen strong { font-size: 16px; }
 .inbox-page .preview { font-size: 14px; }
 .inboxpoll .meta { font-size: 12px; }
}
.header-actions { display: flex; align-items: center; gap: 8px; }
.inbox-page .pagehead .search-toggle { background: var(--surface); color: #d3ccd9; }
.inbox-page .search { padding-right: 2px; gap: 8px; }
.inbox-page .search input { flex: 1; min-width: 0; }
.inbox-page .search .iconbtn { background: none; flex: none; width: 44px; height: 44px; color: var(--quiet); }
/* One visual language: compact photographic plans, clear choices, quiet surfaces. */
.discover-tabs, .respect-tabs { margin-bottom: 14px; background: var(--surface); border: 1px solid var(--line); padding: 4px; }
.segmented button { min-height: 44px; font-size: 14px; }
.segmented button.active { background: var(--raised); color: var(--mint); }
.discover-search { padding-right: 2px; }
.discover-search input { flex: 1; }
.discover-search .iconbtn { flex: none; }

.discover-filters .chip { min-height: 44px; background: none; border: 1px solid #ffffff18; }
.discover-filters .chip.active { background: #8fe6c10c; border-color: #8fe6c140; }

.discovery-card { padding: 14px; border: 1px solid #ffffff0d; border-radius: 16px; background: var(--surface); margin-bottom: 12px; }
.discovery-main { display: flex; gap: 13px; align-items: center; }
.discovery-photo { display: block; width: 78px; height: 92px; flex: none; border-radius: 10px; background-image: url('assets/demo-highlights.png'); background-size: 300% 300%; background-repeat: no-repeat; }
.discovery-copy { flex: 1; min-width: 0; }
.eyebrow { color: var(--quiet); font-size: 10px; line-height: 1.4; font-weight: 650; letter-spacing: .7px; }
.discovery-title { display: block; padding: 3px 0; min-height: 44px; width: 100%; text-align: left; }
.discovery-title h2 { font-size: 19px; font-weight: 750; line-height: 1.2; letter-spacing: -.4px; overflow-wrap: anywhere; }
.discovery-time { font-size: 13px; color: #dad4e0; line-height: 1.5; }
.discovery-place { font-size: 13px; line-height: 1.5; color: var(--quiet); }
.discovery-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; border-top: 1px solid #ffffff0b; padding-top: 12px; margin-top: 12px; }
.discovery-footer > div { min-width: 0; }
.discovery-footer strong { display: block; font-size: 16px; font-weight: 680; }
.discovery-footer small { font-size: 11px; font-weight: 400; color: var(--quiet); }
.discovery-footer > div > span { display: block; margin-top: 3px; font-size: 12px; color: var(--quiet); }
.discovery-footer > div > .going-status { color: var(--mint); }
.discovery-footer .primary, .discovery-footer .secondary { flex: none; min-width: 76px; }
.discovery-footer .primary:not(.joined) { border: 1px solid #e7ff493d; background: #e7ff4908; color: var(--lime); }
.discovery-footer .secondary { color: #e3dce8; background: var(--raised); border-color: transparent; font-size: 13px; }
.empty h3 { color: var(--text); margin-bottom: 5px; }
.empty p { margin-bottom: 16px; font-size: 14px; }
.league-intro { display: flex; gap: 16px; align-items: center; margin-bottom: 20px; }
.league-intro .discovery-photo { width: 86px; height: 86px; }
.league-intro h3 { font-size: 20px; line-height: 1.3; margin: 5px 0; }
.league-intro p { font-size: 13px; color: var(--quiet); }
.league-facts { border-block: 1px solid var(--line); padding: 8px 0; }
.league-facts > div { gap: 12px; }
.league-facts span { width: 58px; }
.league-list strong { font-size: 15px; }
.league-list p { font-size: 13px; line-height: 1.5; margin-top: 4px; }
.league-list .avatar { width: 44px; height: 44px; }
.league-list .secondary { font-size: 12px; padding-inline: 10px; }
.manage-card { background: var(--raised); border-color: #ffffff0b; padding: 14px; }
.manage-event-title { min-height: 44px; align-items: center; gap: 10px; padding: 0; }
.manage-event-title strong { font-size: 17px; font-weight: 700; }
.manage-card > p { line-height: 1.6; }
.manage-card > .row { flex-wrap: wrap; }
.manage-card .row + .row { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 10px; }
.manage-card .small { font-size: 13px; }
.manage-card .textbtn { padding-block: 8px; }
.manage-card .secondary { font-size: 12px; }
.summary { background: #ffffff04; }
dialog .primary { font-size: 14px; }
dialog input, dialog select, dialog textarea { min-height: 46px; font-size: 14px; }
dialog .sheethead h2 { font-size: 23px; font-weight: 750; line-height: 1.2; }
dialog .sheethead { margin-bottom: 16px; }
.respect-tabs span { margin-left: 5px; color: var(--quiet); font-size: 12px; }
.recognition-row { display: flex; align-items: center; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.recognition-row .avatar { width: 42px; height: 42px; font-size: 13px; }
.recognition-row > div { flex: 1; min-width: 0; }
.recognition-row strong { font-size: 15px; font-weight: 650; }
.recognition-row p { font-size: 12px; line-height: 1.5; color: var(--quiet); margin-top: 3px; }
.recognition-row time { font-size: 11px; color: var(--quiet); }
.recognition-mark { color: var(--mint); font-size: 20px; }
/* Preserve compact chat proportions while giving every control a real target. */
.grouphead .iconbtn, .composer .iconbtn { width: 44px; }
.eventstrip .primary { min-height: 44px; margin-top: 0; }
.eventstrip .primary::after { inset: 0; }
.eventextras button { min-height: 44px; display: flex; align-items: center; }

.highlights-head .textbtn, .chip { min-height: 44px; }
@media (max-width:360px) {
 .discovery-card { padding: 12px; }
 .discovery-main { gap: 10px; }
 .discovery-photo { width: 64px; height: 86px; }
 .discovery-title h2 { font-size: 17px; }
 .discovery-time, .discovery-place { font-size: 12px; }
 .discovery-footer { gap: 8px; }
 .discovery-footer .secondary { padding-inline: 10px; }
 .league-list { gap: 9px; }
 .league-list .avatar { width: 34px; height: 34px; }
 .league-list strong { font-size: 14px; }
 .recognition-row { gap: 10px; }
}
.discovery-disclosure { color: var(--quiet); text-align: center; font-size: 11px; padding: 6px 0 0; }

/* A short, touch-friendly event sheet; advanced settings stay in the same form. */
.event-context { margin: -6px 0 16px; color: var(--quiet); font-size: 13px; }
#event-form [hidden] { display: none !important; }
#event-form .formgrid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 12px; }
#event-form label { font-size: 13px; }
#event-form input, #event-form select { min-height: 44px; font-size: 16px; color-scheme: dark; }
#event-form .segmented { display: flex; gap: 3px; padding: 3px; border-radius: 12px; background: #141019; }
#event-form .segmented label { flex: 1; position: relative; margin: 0; cursor: pointer; }
#event-form .segmented input { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; margin: 0; }
#event-form .segmented span { display: grid; place-items: center; min-height: 44px; border-radius: 9px; color: var(--quiet); font-size: 14px; font-weight: 650; }
#event-form .segmented input:checked + span { color: #141019; background: #8FE6C1; }
#event-form .segmented input:focus-visible + span { outline: 2px solid #8FE6C1; outline-offset: 2px; }

#event-form #price-amount { margin-top: -5px; }

.event-options { border-top: 1px solid #ffffff12; margin: 8px 0 15px; }
.event-options summary { cursor: pointer; min-height: 44px; padding: 13px 0; font-size: 14px; }
#event-form .public-option { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.public-option small { display: block; color: var(--quiet); margin-top: 4px; }
#event-form .public-option input { width: 24px; min-height: 44px; accent-color: #8FE6C1; margin: 0; }
.event-options .tiny { margin-bottom: 14px; }
.event-form-actions { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; }
.event-form-actions button { min-height: 46px; }
.event-form-error { color: #ffb3b3; font-size: 13px; margin-bottom: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
/* Organizer essentials: four values, with reusable configuration kept secondary. */
#event-form .event-kind {max-width: 190px; margin-bottom: 12px;}
#event-form .event-kind span {min-height:44px;}

.setup-item {padding:8px 0;border-top:1px solid #ffffff12;}
.setup-item>button {text-align:left;width:100%;overflow-wrap:anywhere;}
.setup-item>div {display:flex;justify-content:space-between;gap:8px;}
.setup-item button {min-height:44px;}
.setup-notice {font-size:13px;line-height:1.5;color:#8FE6C1;}
.event-extra p {white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.5;margin:6px 0 16px;}
#event-form textarea {min-height:88px;font-size:16px;}
/* Compact closed state: essentials and Post fit together on a phone. */
dialog:has(#event-form) {padding:18px;}
dialog:has(#event-form) .sheethead {margin-bottom:8px;}
dialog:has(#event-form) .event-context {margin:0 0 6px;}
#event-form .event-tools {display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 8px;}
#event-form .event-tools .event-kind {width:170px;margin:0;flex:none;}
#event-form .setup-utility {min-height:44px;font-size:12px;text-align:right;padding:0;}
#event-form>label, #event-form .formgrid label {margin-bottom:9px;}
#event-form .event-options {margin:0;border-top:1px solid #ffffff12;}
#event-form .event-options>summary {min-height:44px;padding:11px 0;line-height:22px;}

#event-form .event-form-actions {margin-top:10px;}

/* Tap-first host card. One card, one optional section, no template administration. */
.plan-card {padding:10px 12px;background:#141019;border:1px solid #ffffff16;border-radius:16px;}
#event-form .plan-name {margin:0 0 6px;}
#event-form .plan-name input {background:transparent;border:0;padding:4px 0;font-size:18px;font-weight:700;}
#event-form .plan-card label {margin-bottom:8px;}
#event-form .play-times {grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
#event-form .time-note {margin:0 0 8px;font-size:11px;}
#event-form .play-times input {min-width:0;width:100%;}
.price-chips {display:flex;gap:5px;flex-wrap:wrap;margin:6px 0 8px;}
.price-chips button {min-height:44px;min-width:44px;padding:8px 11px;}
.capacity-row {display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;}
.stepper {display:flex;align-items:center;gap:4px;}
#event-form .stepper input {width:48px;text-align:center;padding:4px;border:0;background:transparent;margin:0;appearance:textfield;}
.stepper input::-webkit-inner-spin-button {appearance:none;}
.stepper button {width:44px;min-height:44px;padding:0;font-size:20px;}
.rule-chips {display:flex;gap:8px;flex-wrap:wrap;}
#event-form .rule-chips label {display:flex;align-items:center;gap:6px;min-height:44px;}
#event-form .rule-chips input {width:20px;margin:0;accent-color:#8FE6C1;}
.save-usual {display:flex;justify-content:space-between;flex-wrap:wrap;gap:0 8px;}
.save-usual button {min-height:44px;font-size:13px;padding:0;text-align:left;}
.composer-footnote {line-height:1.4;margin:10px 0 0;}
.schedule-modes {display:flex;gap:8px;}
.schedule-modes label {flex:1;display:flex;align-items:center;gap:8px;padding:8px;background:#141019;border-radius:12px;min-height:44px;}
.schedule-modes input {width:20px;accent-color:#8FE6C1;margin:0;}
.demo-schedule {padding:14px;margin-top:16px;border:1px dashed #8FE6C166;border-radius:14px;font-size:14px;line-height:1.6;}
.demo-schedule button {min-height:44px;white-space:normal;}
#schedule-form .formgrid {grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
#schedule-form input,#schedule-form select {min-height:44px;min-width:0;font-size:16px;color-scheme:dark;}
@media(max-width:360px){dialog:has(#event-form){padding:14px;}#event-form .event-tools .event-kind{width:150px;}.plan-card{padding:8px;}.price-chips{gap:4px;}.price-chips button{padding:7px 9px;}#event-form .formgrid{gap:7px;}#event-form input[type=date],#event-form input[type=time]{padding:8px 4px;min-width:0;}}
#event-form .price-chips .chip.active {background:#8FE6C1;color:#141019;border-color:#8FE6C1;font-weight:750;}
#auto-config[hidden],#auto-demo[hidden],#manual-note[hidden] {display:none!important;}
/* Native date/time widgets need their intrinsic width on narrow phones. */
@media(max-width:360px){#event-form .plan-card .play-times{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}#event-form .plan-card input[type=date],#event-form .plan-card input[type=time]{width:100%;min-height:44px;padding:8px;}}

/* Event roster is a focused full-height surface, not another dashboard. */
dialog:has(.roster-screen) {width:min(100%,620px);height:calc(100dvh - 32px);max-height:calc(100dvh - 32px);padding:24px;}

.roster-tabs {margin-bottom:22px;}

.roster-screen .sectionhead h3 {line-height:1.4;}
.roster-row {display:flex;align-items:center;}
.roster-person {display:flex;align-items:center;text-align:left;flex:1;min-width:0;}
.roster-person>span:last-child {min-width:0;}
.roster-person strong {display:block;overflow-wrap:anywhere;}
.roster-person small {display:block;}
.roster-photo {display:block;border-radius:50%;background-size:300% 300%;}
.team-pill {display:inline-flex;align-items:center;justify-content:center;border-radius:6px;font-size:11px;font-weight:750;background:#8fe6c11a;color:#8FE6C1;width:26px;height:26px;flex-shrink:0;}
.team-B {background:#a78bfa24;color:#c4b5fd;}

.compact-team summary {display:flex;gap:10px;align-items:center;cursor:pointer;}
.compact-team summary>span:last-child {margin-left:auto;color:var(--muted);font-size:12px;}
.compact-team summary:after {content:'⌄';color:var(--muted);}
.compact-team .roster-row:last-child {border:0;}
.friend-note {border-left:2px solid #a78bfa;padding:10px 12px;margin:20px 0;line-height:1.6;font-size:12px;}

.player-preview .stats {grid-template-columns:repeat(2,1fr);}

.roster-screen>.secondary.wide {margin-top:12px;}
.assign-player {padding:8px!important;}
@media(max-width:480px){dialog:has(.roster-screen){width:100%;max-width:100%;height:100dvh;max-height:100dvh;margin:0;border-radius:0;padding:20px 16px;border:0;}.assign-player{max-width:94px;font-size:11px!important}}
/* Quiet chrome; people and the conversation carry the hierarchy. */
.brandbar {height:44px;gap:10px;padding:0 18px;}
.brandbar small {line-height:1.3;max-width:220px;text-align:right;margin-left:auto;}
.iconbtn {width:44px;height:44px;flex:none;}
.brandbar .iconbtn {width:44px;color:var(--quiet);}
.chatopen strong {font-size:16px;letter-spacing:-.25px;}
.preview {font-size:13px;}
.groupname h2 {font-size:17px;}
.bubble {font-size:15px;line-height:1.45;}
.textbtn,.secondary {min-height:44px;}
/* One event, three tabs. No nested panels or dashboard chrome. */
dialog:has(.event-screen),dialog:has(.player-preview) {background:var(--ink);padding:20px 24px;}
dialog:has(.event-screen) .sheethead,dialog:has(.player-preview) .sheethead {margin-bottom:0;gap:10px;}
dialog:has(.event-screen) .sheethead h2 {font-size:24px;letter-spacing:-.7px;line-height:1.2;}

.event-summary {display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;color:var(--quiet);margin:8px 0 16px;}
.event-summary>span:first-child {color:var(--mint);font-weight:600;}
.roster-tabs {display:flex;border-bottom:1px solid #ffffff15;gap:4px;margin:0 0 12px;padding:0;}
.roster-tabs button {flex:1;border-radius:0;background:transparent;color:var(--quiet);min-height:48px;font-weight:650;font-size:14px;position:relative;padding:8px 4px;}
.roster-tabs button.active {background:transparent;color:var(--text);}
.roster-tabs button.active:after {content:'';position:absolute;bottom:-1px;height:2px;left:18%;right:18%;border-radius:2px;background:var(--mint);}
.roster-row {min-height:68px;gap:10px;border-bottom:1px solid #ffffff10;}
.roster-person {gap:12px;padding:10px 0;min-height:68px;}
.roster-person strong {font-size:16px;font-weight:600;line-height:1.3;letter-spacing:-.2px;}
.roster-person small {font-size:12px;line-height:1.3;margin-top:4px;color:var(--quiet);}
.roster-photo {width:48px;height:48px;flex:0 0 48px;background-image:none;border:1px solid #ffffff12;}
.roster-initials {display:flex;align-items:center;justify-content:center;background:#30263d;color:#dbcaee;font-size:15px;font-weight:650;}
/* Ready for a verified eight-person, 4 × 2 portrait asset. */
.roster-photo.portrait {background-image:url('assets/demo-player-portraits.png');background-size:400% 200%;background-repeat:no-repeat;}
.roster-row-actions {display:flex;align-items:center;gap:6px;flex:none;}
.view-profile {color:#cbb6ed;font-size:12px;white-space:nowrap;min-height:44px;padding:0 2px;font-weight:550;}
.roster-pick {font-size:12px;min-width:44px;min-height:44px;padding:8px 10px;border-color:#a78bfa38;background:#a78bfa10;}
.assign-player {max-width:100px;font-size:12px!important;min-height:44px;}
.draft-heading {margin:6px 0 4px;min-height:44px;}
.roster-screen .draft-heading h3 {font-size:17px;letter-spacing:-.3px;}

.compact-team {border:0;border-bottom:1px solid #ffffff12;padding:0;margin:0; border-radius:0;}
.compact-team summary {min-height:52px;font-size:14px;}
.compact-team+.sectionhead {margin-top:20px;margin-bottom:2px;}
.roster-screen .sectionhead h3 {font-size:15px;font-weight:650;}
.event-screen .attendees {margin:20px 0;}
.event-screen .attendees .sectionhead {margin-bottom:2px;}

.event-screen .summary {background:transparent;border-radius:0;padding:0 0 14px;border-bottom:1px solid #ffffff12;}
.event-screen .event-extra {margin:14px 0;}
.event-screen .event-extra p {margin:3px 0 12px;}
/* A profile is an identity, not a selection modal. */

.player-preview .profiletop {align-items:center;}

.player-preview .profiletop h2 {font-size:24px;letter-spacing:-.65px;line-height:1.2;margin-bottom:5px;}
.player-preview .profile-handle {color:var(--quiet);margin:0 0 6px;}

.player-preview .stats {border:0;border-top:1px solid #ffffff12;border-bottom:1px solid #ffffff12;background:none;border-radius:0;}
.player-preview .stats strong {font-size:22px;}
.player-preview .stats span {font-size:12px;}
.friend-note {border:0;padding:0;margin:0 0 20px;color:var(--quiet);font-size:13px;}
.profile-pick-row {display:flex;justify-content:space-between;gap:10px;align-items:center;margin:0 0 22px;}
.profile-pick-row>span {font-size:12px;color:var(--quiet);}
.profile-pick-row button {font-size:12px;border-color:#a78bfa4d;}
.player-preview .gallery {gap:3px;border-radius:12px;overflow:hidden;}
.player-preview .gallery button {border-radius:0;}
@media(min-width:700px){#app{max-width:620px;}dialog:has(.event-screen),dialog:has(.player-preview){width:620px;}.nav{max-width:620px;}.group-shell{max-width:620px;}}
@media(max-width:480px){dialog:has(.event-screen),dialog:has(.player-preview){padding:16px;}.roster-row{gap:8px;}.roster-person{gap:10px;}.roster-person strong{font-size:15px;}.player-preview .profiletop .roster-photo{width:80px;height:80px;flex-basis:80px;}}
@media(max-width:360px){.brandbar{padding:0 12px;gap:4px;}.brandbar small{font-size:8px;max-width:156px;}dialog:has(.event-screen),dialog:has(.player-preview){padding:14px 12px;}.roster-row{gap:5px;}.roster-row-actions{gap:4px;}.roster-person{gap:8px;}.view-profile{font-size:11px;}.roster-pick{padding:8px;}.roster-person small{font-size:11px;}.roster-person strong{font-size:15px;}.assign-player{max-width:80px;font-size:11px!important;}.roster-row:has(.assign-player) .roster-row-actions{flex-wrap:wrap;justify-content:flex-end;max-width:80px;gap:0;}.player-preview .profiletop{gap:12px;}.player-preview .profiletop h2{font-size:22px;}}
.avatar.portrait-avatar {background-image:url('assets/demo-player-portraits.png');background-size:400% 200%;background-repeat:no-repeat;}
@media(max-width:360px){.roster-row:has(.assign-player) .view-profile{min-height:44px;}}

/* Keep navigation in place; the dialog remains the only roster scroll surface. */
dialog:has(.event-screen), dialog:has(.player-preview), dialog:has(.chat-plans) { padding:0; background:var(--ink); scroll-padding-top:136px; }
.navigation-chrome { position:sticky; top:0; z-index:3; background:var(--ink); }
.navigation-chrome .sheethead { justify-content:flex-start; gap:8px; min-height:48px; margin:0; }
.navigation-chrome .sheethead h2 { flex:1; min-width:0; }
dialog:has(.event-screen) .sheethead h2, dialog:has(.player-preview) .sheethead h2 { font-size:19px; line-height:1.25; letter-spacing:-.4px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.navigation-chrome .sheethead .iconbtn { width:44px; height:44px; color:var(--quiet); }
.navigation-chrome .event-summary { min-height:24px; gap:8px; font-size:12px; }
.navigation-chrome .roster-tabs { margin:0; }
.navigation-chrome .roster-tabs button { min-height:46px; }
.event-screen, .player-preview, .chat-plans { padding:0 20px 24px; }
.event-screen .event-facts { margin:16px 0; }
.event-screen .draft-heading { margin:6px 0 2px; }

/* One name in the profile header, then the person, stats and their media. */
dialog:has(.player-preview), dialog:has(.chat-plans) { scroll-padding-top:64px; }
.player-preview .profiletop { margin-top:14px; gap:14px; }
.player-preview .profiletop .roster-photo { width:72px; height:72px; flex-basis:72px; font-size:23px; }
.player-preview .profile-handle { font-size:14px; margin-bottom:7px; overflow-wrap:anywhere; }
.player-preview .bio { margin:12px 0 16px; font-size:14px; line-height:1.5; }
.player-preview .stats { padding:12px 0; margin:0 0 16px; }
.player-preview .friend-note { margin-bottom:14px; }
.player-preview .profile-pick-row { margin-bottom:16px; }
.player-preview .gallery { margin-top:8px; }

/* Category stays prominent; search and filters no longer precede a second title. */
.discover-head { gap:10px; min-height:50px; margin-bottom:10px; }
.discover-head h1 { font-size:26px; }
.discover-head .discover-tabs { width:164px; flex:none; margin:0; padding:3px; border-radius:13px; }
.discover-search { height:44px; margin-bottom:6px; }
.discover-filters { gap:6px; margin-bottom:12px; }
.discover-filters .chip { padding-inline:13px; }

/* Exactly two slim plans stay in chat. Extras get a sheet, never a nested scroller. */
.eventzone { max-height:none; overflow:visible; padding-top:0; }
.eventstrip { padding:2px 8px; margin-bottom:0; border:0; border-bottom:1px solid var(--line); border-radius:0; background:none; gap:10px; }
.eventstrip .pollinfo { min-height:56px; }
.eventstrip .pollinfo strong { font-size:13px; }
.eventstrip .meta { font-size:11px; }
.eventstrip .progress { display:block; height:2px; margin-top:4px; }
.eventstrip .primary { min-width:58px; }
.eventextras { min-height:44px; }
.eventextras button { font-size:11px; }
.chat-plans .eventstrip { padding-block:8px; }
.chat-plans .pollinfo strong { font-size:15px; }
.chat-plans .eventstrip .meta { font-size:12px; }
@media(min-width:700px) {
 .navigation-chrome { padding:12px 24px 0; }
 .event-screen, .player-preview, .chat-plans { padding-inline:24px; }
 .player-preview .profiletop .roster-photo { width:88px; height:88px; flex-basis:88px; }
 .discover-head .discover-tabs { width:200px; }
 .eventstrip .pollinfo strong { font-size:14px; }
}
@media(max-width:360px) {

 .event-screen, .player-preview, .chat-plans { padding-inline:12px; }
 dialog:has(.event-screen) .sheethead h2, dialog:has(.player-preview) .sheethead h2 { font-size:18px; }
 .discover-head h1 { font-size:24px; }
 .discover-head .discover-tabs { width:158px; }
 .eventstrip { padding-inline:4px; gap:7px; }
 .eventstrip .pollinfo strong { font-size:13px; }
 .eventstrip .meta { gap:5px; font-size:11px; }
}

/* Capacity communicates availability, never whether you personally joined. */
:root { --capacity-urgent:#ff6868; --garras-green:#9dffd4; }
.progress.capacity-open > span { background:var(--lime); opacity:1; }
.progress.capacity-warning > span { background:var(--capacity-urgent); opacity:1; }
.progress.capacity-full > span { background:var(--garras-green); opacity:1; }
.primary.joined.capacity-full, .inboxpoll .joined.capacity-full, .eventstrip .joined.capacity-full,
.going-status.capacity-full, .discovery-footer > div > .going-status.capacity-full { color:var(--garras-green); }
.primary.joined.capacity-full { border-color:#9dffd466; background:#9dffd40d; }

#demo-invite-note { min-height:160px; line-height:1.6; }

/* Immediate, restrained motion. No animation delays or click-blocking exit states. */
dialog { overflow-x:hidden; }
button { transition:transform 140ms ease, background-color 160ms ease, color 160ms ease, border-color 160ms ease; }
button:active:not(:disabled) { transform:scale(.975); }
.compact-team summary:after { transition:transform 160ms ease; }
.compact-team[open] summary:after { transform:rotate(180deg); }
#toast { transition:opacity 180ms ease, transform 180ms ease; }
@media (prefers-reduced-motion:reduce) {
 *, *::before, *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
 button:active:not(:disabled) { transform:none; }
}

/* A destination you can read, in the same place on every screen. */
dialog:has(.navigation-chrome), dialog:has(#event-form) { padding:0; background:var(--ink); scroll-padding-top:112px; }
.navigation-chrome { padding:6px 20px 12px; border-bottom:1px solid var(--line); }
.sheet-nav { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:44px; margin-bottom:4px; }
.sheet-back, .backlink { display:inline-flex; align-items:center; gap:4px; min-height:44px; min-width:44px; padding:0 10px 0 6px; border:1px solid #8fe6c17a; background:#8fe6c108; border-radius:8px; color:var(--mint); font-size:14px; font-weight:600; text-align:left; }
.sheet-back .icon, .backlink .icon { width:20px; height:20px; }
.sheet-back span { overflow-wrap:anywhere; }
.sheet-back:hover, .backlink:hover { background:#8fe6c112; border-color:#8fe6c19e; }
.sheet-back:active, .backlink:active { background:#8fe6c122; border-color:var(--mint); }
.sheet-back:focus-visible, .backlink:focus-visible { outline:2px solid var(--lime); outline-offset:3px; }
.sheet-nav>.iconbtn { width:44px; height:44px; color:var(--quiet); flex:none; }
.navigation-chrome .sheethead, dialog:has(#event-form) .sheethead { min-height:28px; margin:0; }
.navigation-chrome .sheethead h2, dialog:has(.event-screen) .sheethead h2, dialog:has(.player-preview) .sheethead h2 { font-size:22px; line-height:1.25; letter-spacing:-.55px; }
.navigation-chrome .event-summary { margin:7px 0 5px; }
.navigation-chrome:has(.roster-tabs) { padding-bottom:0; }
.sheet-body { padding:18px 20px 24px; }
.sheet-body:has(>.event-screen), .sheet-body:has(>.player-preview), .sheet-body:has(>.chat-plans) { padding:0; }
dialog:has(.event-screen) { scroll-padding-top:170px; }
.grouphead { display:grid; grid-template-columns:44px 38px minmax(0,1fr) 44px; padding:8px 16px 10px; align-items:center; gap:10px; }
.grouphead>.backlink { justify-self:start; width:44px; height:44px; padding:0; justify-content:center; margin:0; }
.grouphead>.backlink span { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.grouphead:not(:has(>.iconbtn)) .groupname { grid-column:3 / -1; }
.grouphead>.iconbtn { width:44px; height:44px; }
.grouphead .groupname h2 { font-size:16px; overflow-wrap:anywhere; }
.grouphead .avatar { width:38px; height:38px; }
.group-shell .brandbar { min-height:32px; height:32px; }
.brandbar small { font-size:10px; }
.group-shell .brandbar small { font-size:9px; }
.conversation-empty { text-align:center; max-width:320px; margin:40px auto; padding:20px 8px; }
.conversation-empty>.avatar { width:64px; height:64px; font-size:20px; margin-bottom:16px; }
.conversation-empty h3 { font-size:20px; letter-spacing:-.4px; }
.conversation-empty p { color:var(--quiet); font-size:14px; line-height:1.6; margin:10px auto 22px; }
.empty-actions { display:grid; gap:10px; }
.empty-actions .secondary { border-color:#8fe6c133; color:var(--mint); }
.roster-empty { padding:40px 12px; }
.roster-empty>.icon { width:32px; height:32px; color:var(--mint); margin-bottom:12px; }
.empty h3 { font-size:18px; }
.empty p { margin:10px 0 20px; color:var(--quiet); line-height:1.6; }
.attendee-empty { color:var(--quiet); padding:16px 0; font-size:13px; }
.prototype-note { margin-bottom:24px; }
.prototype-note p { margin-top:12px; color:var(--quiet); line-height:1.65; }
@media(min-width:700px) { .navigation-chrome { padding-inline:24px; } .sheet-body { padding-inline:24px; } }
@media(max-width:360px) { .navigation-chrome { padding-inline:14px; } .sheet-body { padding-inline:14px; } .sheet-back,.backlink { font-size:13px; } .grouphead { padding-inline:12px; } }

/* Shared sheet architecture: centered chrome, pill search, inset grouped rows.
   Menus/settings share these primitives; conversations and media keep their own shape. */
:root {
  --sheet-gutter: 20px;
  --group-radius: 22px;
  --row-inset: 16px;
  --row-leading: 44px;
  --row-gap: 12px;
  --divider-inset: calc(var(--row-inset) + var(--row-leading) + var(--row-gap));
}
dialog#sheet {
  width: min(calc(100% - 24px), 620px);
  max-width: 620px;
  height: auto;
  max-height: calc(100dvh - 24px);
  padding: 0;
  margin: auto;
  border: 1px solid #ffffff14;
  border-radius: 28px;
  background: var(--ink);
  scroll-padding-top: 138px;
}
dialog#sheet:has(.newchat-body), dialog#sheet:has(.roster-screen) { height: min(760px, calc(100dvh - 24px)); }
dialog#sheet .navigation-chrome { position: sticky; top: 0; z-index: 3; padding: 14px var(--sheet-gutter) 16px; border: 0; background: var(--ink); }
dialog#sheet .sheet-nav { display: flex; align-items: center; justify-content: space-between; min-height: 44px; margin: 0 0 8px; gap: 12px; }
.sheet-utilities { display: flex; align-items: center; gap: 6px; margin-left: auto; flex: none; }
dialog#sheet .sheet-close { width: 44px; height: 44px; border-radius: 50%; background: var(--raised); border: 1px solid #ffffff26; color: var(--text); }
.sheet-close .icon { width: 24px; height: 24px; }
dialog#sheet .sheet-close:hover { background: #39333f; }
dialog#sheet .sheethead { display: flex; justify-content: center; min-height: 32px; margin: 0; text-align: center; }
dialog#sheet .sheethead h2 { display: block; font-size: 21px; line-height: 1.3; letter-spacing: -.45px; font-weight: 700; overflow: visible; overflow-wrap: anywhere; -webkit-line-clamp: unset; }
dialog#sheet .root-chrome { padding-top: 22px; padding-bottom: 18px; }
dialog#sheet .root-chrome .sheet-nav { position: absolute; top: 17px; left: var(--sheet-gutter); right: var(--sheet-gutter); margin: 0; }
dialog#sheet .root-chrome .sheethead { min-height: 44px; align-items: center; padding: 0 52px; }
dialog#sheet .sheet-back { max-width: calc(100% - 98px); padding: 0 10px 0 6px; gap: 4px; font-size: 14px; }
dialog#sheet .sheet-body { padding: 4px var(--sheet-gutter) 28px; }
dialog#sheet .sheet-body > .event-screen, dialog#sheet .sheet-body > .player-preview, dialog#sheet .sheet-body > .chat-plans { padding: 0; }
dialog#sheet .sheet-body > .player-preview { padding-top: 4px; }
dialog#sheet .navigation-chrome:has(.roster-tabs) { padding-bottom: 0; }
dialog#sheet .event-summary { margin: 10px 0 8px; font-size: 12px; }
dialog#sheet:has(.event-screen) { scroll-padding-top: 202px; }

/* Labels and groups align to the same left edge across all sheets. */
.ui-section { margin: 0 0 24px; }
.section-label, .sheet-body .sectionhead h3 { color: var(--quiet); font-size: 14px; line-height: 1.4; font-weight: 600; letter-spacing: 0; }
.section-label { margin: 0 0 10px; padding: 0 var(--row-inset); }
.ui-group, .recognition-list, .sheet-body .summary, .sheet-body .event-facts, .sheet-body .plan-card, .sheet-body .event-options, .sheet-body .demo-schedule {
  background: var(--surface);
  border: 0;
  border-radius: var(--group-radius);
}
.ui-group { overflow: hidden; }
.ui-action, .person-row { position: relative; display: flex; align-items: center; gap: var(--row-gap); width: 100%; min-height: 66px; padding: 11px var(--row-inset); text-align: left; }
.ui-action { font-size: 16px; }
.action-symbol { display: inline-flex; justify-content: center; align-items: center; width: var(--row-leading); height: 40px; color: var(--mint); flex: 0 0 var(--row-leading); }
.action-symbol .icon { width: 25px; height: 25px; }
.action-copy { min-width: 0; line-height: 1.35; overflow-wrap: anywhere; }
.ui-action:hover, .person-row:hover { background: #ffffff05; }
.ui-action:focus-visible, .person-row:focus-visible { outline-offset: -3px; }
.ui-group > .ui-action:not(:last-child)::after, .people-group > :not(:last-child)::after, .ui-group > .fact-row:not(:last-child)::after {
  content: ''; position: absolute; left: var(--divider-inset); right: var(--row-inset); bottom: 0; height: 1px; background: #ffffff12;
}
.person-row .avatar, .people-group .recognition-row > .avatar, .people-group .league-list > .avatar { width: var(--row-leading); height: var(--row-leading); flex: 0 0 var(--row-leading); }
.person-copy { display: block; flex: 1; min-width: 0; }
.person-copy strong { display: block; font-size: 16px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.person-copy small { display: block; font-size: 13px; color: var(--quiet); line-height: 1.4; margin-top: 3px; overflow-wrap: anywhere; }
.people-group > .roster-row, .people-group > .recognition-row, .people-group > .league-list { position: relative; padding: 0 var(--row-inset); border: 0; }
.people-group .roster-row { min-height: 76px; gap: 8px; }
.people-group .roster-person { min-height: 76px; gap: var(--row-gap); }
.people-group .roster-photo { width: var(--row-leading); height: var(--row-leading); flex-basis: var(--row-leading); }
.people-group .recognition-row { padding-block: 13px; gap: var(--row-gap); }
.people-group .league-list { padding-block: 14px; gap: var(--row-gap); }
.people-group .roster-person strong { font-size: 15px; }
.people-group .view-profile { color: var(--mint); font-size: 11px; }
.people-group .roster-pick { border-color: #8fe6c133; color: var(--mint); background: #8fe6c10a; }
.sheet-body .sectionhead { padding: 0 var(--row-inset); margin: 24px 0 8px; }
.sheet-body .attendees .sectionhead { margin-bottom: 8px; }

/* A single pill search surface, with an independent clear control. */
.search-field { min-height: 48px; height: auto; padding: 0 16px; gap: 10px; margin-bottom: 20px; border: 1px solid #ffffff15; border-radius: 999px; background: var(--raised); }
.search-field > .icon { width: 21px; height: 21px; color: var(--quiet); }
.search-field input, dialog#sheet .search-field input { appearance: none; -webkit-appearance: none; flex: 1; width: 0; min-height: 46px; border: 0; padding: 0; margin: 0; background: transparent; border-radius: 0; font-size: 15px; }
.search-field input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search-field input:focus-visible { outline-offset: 0; outline-width: 1px; }
.search-field .iconbtn { width: 32px; height: 44px; margin-right: -6px; color: var(--quiet); }
.search-field .iconbtn .icon { width: 17px; height: 17px; }
.newchat-body .ui-section { margin-bottom: 28px; }
.search-empty { min-height: 220px; padding: 42px 20px 24px; border-radius: var(--group-radius); background: var(--surface); }
.search-empty > .icon { width: 28px; height: 28px; color: var(--mint); margin-bottom: 12px; }
.search-empty p { font-size: 14px; margin-bottom: 10px; }

/* Facts, checkout and forms are grouped, not a different visual language. */
.sheet-body .event-facts { margin: 0 0 20px; padding: 0; }
.fact-row { position: relative; display: flex; align-items: center; gap: var(--row-gap); min-height: 72px; padding: 12px var(--row-inset); }
.fact-row > div { flex: 1; min-width: 0; }
.fact-row .action-symbol { width: var(--row-leading); color: var(--mint); }
.fact-row small { display: block; color: var(--quiet); font-size: 12px; margin-bottom: 3px; }
.fact-row strong { display: block; font-size: 14px; font-weight: 550; line-height: 1.45; }
.fact-row strong span { display: inline; width: auto; color: inherit; font-size: inherit; }
.fact-row strong .going-status { color: var(--mint); }
.fact-row strong .capacity-full { color: #9DFFD4; }
.sheet-body .summary { padding: 6px 16px; margin: 0 0 20px; }
.sheet-body .summary .row { min-height: 46px; padding: 10px 0; border-bottom: 1px solid #ffffff12; }
.sheet-body .summary .row:last-child { border-bottom: 0; }
.sheet-body .summary .total { padding: 14px 0; margin: 0; border-top: 0; font-size: 18px; }
.sheet-body .summary .tiny { padding: 0 0 12px; }
.field-group { padding: 16px; margin-bottom: 20px; }
.field-group label { margin: 0 0 18px; font-size: 12px; }
.field-group label:last-child { margin-bottom: 0; }
.field-group input, .field-group select, .field-group textarea, dialog#sheet .disclosure-body input, dialog#sheet .disclosure-body select, dialog#sheet .disclosure-body textarea { background: var(--ink); border-radius: 12px; border-color: #ffffff16; }
dialog#sheet form > .primary { margin-top: 4px; }
dialog#sheet .plan-card { padding: 16px; margin: 0 0 16px; }
dialog#sheet #event-form .event-options { margin: 0 0 16px; border: 0; padding: 0 16px; }
dialog#sheet #event-form .event-options > summary { padding: 16px 0; min-height: 54px; }
.event-options .disclosure-body { padding-bottom: 8px; }
dialog#sheet #event-form .event-form-actions { display: flex; margin-top: 16px; }
dialog#sheet #event-form .event-form-actions .primary { flex: 1; }
.sheet-body .event-context { font-size: 12px; color: var(--quiet); margin: 0 0 16px; text-align: center; }
.sheet-body .event-extra { padding: 16px; margin: 0 0 16px; border-radius: var(--group-radius); background: var(--surface); }
.sheet-body .event-extra p { margin: 4px 0 0; }
.sheet-body .compact-team { padding: 0 16px; margin: 0 0 12px; border: 0; border-radius: var(--group-radius); background: var(--surface); }
.sheet-body .compact-team .roster-row { border-bottom-color: #ffffff12; }

.sheet-body .draft-heading { padding-inline: 0; margin-top: 4px; }
.sheet-body .demo-schedule { padding: 16px; margin-top: 20px; }
.sheet-body .setup-item { padding: 12px 16px; border: 0; border-bottom: 1px solid #ffffff12; }
.sheet-body .setup-item:last-child { border-bottom: 0; }
.sheet-body .manage-card { padding: 16px; }
.sheet-body .manage-card .row { flex-wrap: wrap; }
.sheet-body .manage-event-title { font-size: 16px; line-height: 1.35; }
.sheet-body .league-intro { margin-bottom: 20px; }
.sheet-body .primary, .sheet-body .secondary { border-radius: 14px; }
.sheet-body .receipt-note { margin: -8px 0 20px; }
.sheet-body .gallery-choices { padding: 16px; background: var(--surface); border-radius: var(--group-radius); }
.sheet-body .profile-identity { padding-top: 4px; }
.sheet-body .player-preview .stats { margin-top: 18px; }

@media (min-width:700px) { :root { --sheet-gutter: 24px; } }
@media (max-width:480px) {
 dialog#sheet { width: 100%; max-height: calc(100dvh - 12px); margin: auto auto 0; border-radius: 28px 28px 0 0; border-bottom: 0; }
 dialog#sheet:has(.newchat-body), dialog#sheet:has(.roster-screen) { height: calc(100dvh - 12px); }
 dialog#sheet .sheet-body { padding-bottom: max(28px, env(safe-area-inset-bottom)); }
}
@media (max-width:360px) {
 :root { --sheet-gutter: 14px; --row-inset: 12px; --row-leading: 40px; --row-gap: 10px; }
 dialog#sheet .sheethead h2 { font-size: 19px; }
 .ui-action, .person-copy strong { font-size: 15px; }
 .people-group .roster-row { gap: 5px; }
 .people-group .roster-person strong { font-size: 14px; }
 .people-group .roster-row:has(.assign-player) .roster-row-actions { max-width: 76px; }
 .people-group .assign-player { max-width: 76px; }
 dialog#sheet .plan-card { padding: 12px; }
}
.sheet-body .checkout-title { margin: 12px 0 18px; font-size: 18px; line-height: 1.4; }
.section-spacer { margin-top: 24px; }
.sheet-body .setup-item > .textbtn { color: var(--text); font-size: 15px; }
.sheet-body .setup-item > .textbtn strong { font-weight: 600; }
.sheet-body .setup-item > .textbtn .tiny { display: inline-block; margin-top: 4px; }
.sheet-body #schedule-form > .field-group { margin-top: 8px; }
.sheet-body .compact-team .people-group { margin-inline: -16px; border-radius: 0 0 var(--group-radius) var(--group-radius); }
.sheet-body .compact-team .people-group .roster-row { border-bottom: 0; }

.search-field [hidden] { display: none !important; }

/* Attendee privacy uses the same grouped-row language, with no blurred identity placeholders. */
.attendee-gate { margin:20px 0; }
.attendee-gate .fact-row { align-items:flex-start; }
.attendee-gate h3 { font-size:15px; font-weight:650; line-height:1.4; }
.attendee-gate p { margin:5px 0 0; font-size:13px; color:var(--quiet); line-height:1.5; }
.attendee-gate-action { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:0 var(--row-inset) 16px; }
.attendee-gate-action p { margin:0; }

/* Cancelling a spot stays in the shared grouped-sheet system. */
.booking-group [data-action="cancel-spot"] .action-symbol, .booking-group [data-action="cancel-spot"] .action-copy { color:#ffb8b2; }
.cancellation-buttons { display:grid; gap:10px; margin-top:20px; }
.sheet-body .cancel-confirm { background:#ffd3ce; color:#51221f; }
.cancellation-policy { margin:16px 0; color:var(--text); font-size:14px; line-height:1.6; }
.cancellation-summary .row { gap:14px; align-items:flex-start; }
.cancellation-summary .row strong { flex-shrink:0; }
.cancellation-audit { padding:0 16px 16px; line-height:1.7; overflow-wrap:anywhere; }

/* Secondary records stay available without pushing the current booking action down. */
.booking-receipt > summary, .record-details > summary { min-height:44px; padding:13px var(--row-inset); cursor:pointer; color:var(--quiet); font-size:13px; }
.booking-receipt > .disclosure-body { padding:0 var(--row-inset) 8px; }
.booking-receipt .summary { padding:0; margin:0 0 12px; }
.booking-receipt .receipt-note { margin:0 0 8px; }
.record-details { margin:20px 0; background:var(--surface); border-radius:14px; }
.simulation-notice { display:flex; flex-direction:column; gap:4px; padding:12px 14px; border-left:2px solid var(--mint); border-radius:0 10px 10px 0; background:#8fe6c10a; color:var(--quiet); font-size:12px; }
.simulation-notice strong { color:var(--mint); font-size:10px; letter-spacing:.8px; }

/* Chat-local booking overlays leave the original conversation visibly in place. */
dialog#sheet.chat-booking-sheet {
  inset: auto 0 0;
  height: fit-content;
  min-height: 0;
  max-height: calc(100dvh - max(112px, env(safe-area-inset-top)));
  margin: 0 auto;
  border-radius: 28px 28px 0 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
dialog#sheet.chat-booking-sheet::backdrop { background: #0c090f70; backdrop-filter: none; }
.chat-booking-sheet .spot-identity { display: grid; gap: 6px; margin: 0 0 20px; text-align: center; }
.spot-identity > strong { font-size: 16px; }
.spot-identity > span { font-size: 13px; }
.spot-identity > span:not(.going-status) { color: var(--quiet); }
.chat-booking-sheet .ui-section:last-child { margin-bottom: 0; }

/* A status menu anchored to Going, not a navigation sheet. */
.spot-menu { position: fixed; inset: auto; margin: 0; padding: 6px; max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); overflow: auto; border: 1px solid #ffffff24; border-radius: 14px; background: var(--raised); color: var(--text); box-shadow: 0 12px 36px #0007; z-index: 20; }
.spot-menu[hidden] { display: none; }
.spot-menu::backdrop { background: transparent; }
.status-current { padding: 10px 12px; color: var(--mint); font-size: 14px; font-weight: 600; border-bottom: 1px solid #ffffff12; }
.status-consequence, .status-notice { padding: 0 12px; margin: 10px 0; font-size: 12px; line-height: 1.45; }
.status-notice { color: var(--acid); }
.spot-menu > button { width: 100%; min-height: 44px; text-align: left; padding: 10px 12px; border: 0; border-radius: 8px; background: transparent; color: #ffb8b2; font-size: 14px; }
.spot-menu > button:hover, .spot-menu > button:focus-visible { background: #ffffff0c; outline: 1px solid var(--mint); }
.spot-menu > button:disabled { opacity: .45; }
.status-simulation { padding: 0 12px; margin: 5px 0 7px; color: var(--quiet); font-size: 10px; }

.checkout-mini { padding: 8px 6px 2px; }
.checkout-mini h3 { margin: 2px 6px 12px; font-size: 15px; }
.checkout-mini .summary { padding: 0 6px; margin: 0 0 12px; background: transparent; }
.checkout-mini .summary .row { padding: 7px 0; font-size: 13px; }
.checkout-mini .summary .total { font-size: 15px; margin-top: 4px; padding-top: 10px; }
.checkout-mini > .primary { width: 100%; min-height: 44px; font-size: 13px; border-radius: 9px; }
.checkout-mini .status-simulation { padding: 0 6px; margin-top: 10px; }
.checkout-mini .status-notice { padding: 0 6px; }

.checkout-mini .mini-back { padding: 5px 6px 10px; border: 0; background: transparent; color: var(--mint); font-size: 12px; }
.checkout-mini .payment-choice, .league-mini .payment-choice { display: grid; width: 100%; gap: 4px; min-height:44px; padding: 13px 10px; text-align: left; border: 1px solid #ffffff14; border-radius: 10px; background: var(--surface); color: var(--text); margin-bottom: 8px; }
.payment-choice strong { font-size: 14px; }
.payment-choice span { color: var(--quiet); font-size: 11px; }
.demo-card-preview { display: grid; gap: 25px; margin: 16px 0 22px; padding: 22px; background: linear-gradient(125deg,#332a43,#201b2b); border: 1px solid #ffffff24; border-radius: 18px; }
.demo-card-preview > span { font-size: 10px; letter-spacing: 2px; color: var(--mint); }
.demo-card-preview > strong { font-size: clamp(16px,5vw,22px); letter-spacing: 2px; }
.demo-card-preview > div { display: flex; justify-content: space-between; gap: 10px; font-size: 10px; color: var(--quiet); }
.demo-save-choice { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 22px; font-size: 14px; }
.demo-save-choice input { width: 18px; height: 18px; min-height: 18px; margin: 2px 0 0; accent-color: var(--mint); }
.demo-save-choice small { display: block; margin-top: 5px; font-size: 11px; color: var(--quiet); }
.demo-card-screen .status-simulation { margin: 15px 0 0; text-align: center; }

/* In-place organizer controls share the attendance popover, not a dashboard. */
.spot-menu > .quick-action { color: var(--text); }
.spot-menu > .quick-action:disabled { color: var(--quiet); }
.event-action .event-host-menu { width: 30px; min-width: 30px; height: 30px; min-height: 30px; padding: 5px; color: var(--quiet); align-self: flex-end; }
.event-action .event-host-menu svg { width: 18px; height: 18px; }
.lineup-submit { padding-top: 12px; }
.lineup-submit p { margin: 0 0 10px; }
.roster-row-actions .assign-player { min-height: 36px; font-size: 12px; white-space: nowrap; }
.event-action:has(.event-host-menu) { display: grid; grid-template-columns: auto 30px; column-gap: 2px; align-content: center; }
.event-action:has(.event-host-menu) .event-price { grid-column: 1 / -1; text-align: center; }
.event-action:has(.event-host-menu) .primary { grid-row: 2; grid-column: 1; }
.event-action .event-host-menu { grid-row: 2; grid-column: 2; height: 44px; align-self: center; }

/* Discover density only: ten 50px rows, intact 44px touch targets, no media cards. */
.page:has(.discover-density) { padding:0 12px 8px; }
.shell:has(.discover-density) > .nav { padding:6px 12px max(6px,env(safe-area-inset-bottom)); }
.discover-density .discover-head { min-height:44px; height:44px; margin:0; gap:6px; }
.discover-density .discover-head h1 { font-size:23px; }
.discover-density .discover-tabs { width:160px; padding:0; border:0; background:none; }
.discover-density .discover-tabs button { padding:8px; min-height:44px; }
.discover-toolbar { display:flex; align-items:center; justify-content:space-between; position:relative; height:44px; }
.discover-density .discover-filters { margin:0; gap:2px; }
.discover-density .discover-filters .chip { min-height:44px; padding:6px 12px; border:0; }
.discover-type { color:var(--quiet); font-size:13px; }
.discover-search-toggle > summary { display:grid; place-items:center; width:44px; height:44px; cursor:pointer; list-style:none; border-radius:10px; }
.discover-search-toggle > summary::-webkit-details-marker { display:none; }
.discover-search-toggle[open] > summary { background:var(--raised); color:var(--mint); }
.discover-search-panel { position:absolute; z-index:4; top:44px; left:0; right:0; padding:6px; background:var(--ink); border:1px solid var(--line); border-radius:10px; box-shadow:0 8px 20px #0008; }
.discover-search-panel .search { margin:0; }
.discover-density .discovery-list { border-top:1px solid var(--line); }
.discover-density .discovery-card { display:grid; grid-template-columns:minmax(0,1fr) 55px 76px; gap:6px; align-items:center; min-height:50px; padding:2px 0; margin:0; border:0; border-bottom:1px solid var(--line); border-radius:0; background:none; }
.discover-density .discovery-title { min-width:0; min-height:44px; padding:2px 0; }
.discover-density .discovery-title h2 { font-size:14px; font-weight:650; line-height:20px; letter-spacing:-.2px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.discover-density .discovery-meta { font-size:12px; line-height:18px; color:var(--quiet); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.discovery-price { text-align:right; min-width:0; }
.discovery-price strong { display:block; font-size:13px; line-height:18px; font-weight:650; white-space:nowrap; }
.discovery-price small { font-size:11px; font-weight:400; color:var(--quiet); }
.discovery-price span { display:block; font-size:12px; line-height:18px; color:var(--quiet); }
.discover-density .primary, .discover-density .secondary { min-height:44px; width:76px; padding:8px 3px; font-size:13px; border-radius:8px; }
.discover-density .primary:not(.joined) { border:1px solid #e7ff493d; background:#e7ff4908; color:var(--lime); }
.discover-density .discovery-disclosure { padding:4px 0; font-size:11px; }

/* Make the cancellation consequence unmistakable before the single action. */
.refund-preview { display:grid; gap:5px; margin:8px 4px; padding:12px 8px; border-radius:9px; background:#ffffff06; }
.refund-preview > strong { font-size:16px; line-height:1.3; font-weight:750; }
.refund-preview--refund > strong { color:var(--mint); }
.refund-preview > small { color:var(--quiet); font-size:12px; line-height:1.4; }

/* One event form, progressively exposed inside the shared anchored panel. */
.compact-composer { padding: 5px; }
.compact-composer > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.compact-composer h3 { font-size: 15px; margin: 4px 0; }
.compact-composer > .event-context { font-size: 11px; margin: 2px 0 10px; }
.compact-composer .event-tools { margin: 0 0 10px; flex-wrap: wrap; gap: 8px; }
.compact-composer .event-kind { flex: 1; }
.compact-composer .setup-utility { font-size: 11px; padding: 5px 0; }
.compact-field { display: flex; flex-direction: column; gap: 4px; width: 100%; text-align: left; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 9px; padding: 10px; min-height: 53px; margin-bottom: 6px; }
.compact-field span { font-size: 11px; color: var(--quiet); }
.compact-field strong { font-size: 12px; font-weight: 550; line-height: 1.4; overflow-wrap: anywhere; }
.compact-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.compact-more, .compact-stage-back button { border: 0; background: none; color: var(--mint); font-size: 12px; padding: 10px 0; text-align: left; }
.compact-composer .plan-card { background: none; padding: 0; border: 0; box-shadow: none; margin: 0; }
.compact-composer .plan-card > *, .compact-composer .event-options, .compact-composer .save-usual, .compact-usual, .compact-stage-back { display: none; }
.compact-composer #event-form:not(.stage-summary) .compact-summary, .compact-composer #event-form:not(.stage-summary) .event-tools { display: none; }
.compact-composer form:not(.stage-summary) .compact-stage-back { display: block; }
.compact-composer .stage-time .play-date, .compact-composer .stage-time .time-note,
.compact-composer .stage-venue label:has([name="venueChoice"]), .compact-composer .stage-venue #custom-venue:not([hidden]),
.compact-composer .stage-price #price-amount:not([hidden]), .compact-composer .stage-more .plan-name,
.compact-composer .stage-more .event-options, .compact-composer .stage-more .save-usual,
.compact-composer .stage-usual .compact-usual { display: block; }
.compact-composer .stage-time .play-times { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.compact-composer .stage-price .price-chips, .compact-composer .stage-capacity .capacity-row { display: flex; flex-wrap: wrap; }
.compact-composer .event-options > summary { display: none; }
.compact-composer input, .compact-composer select, .compact-composer textarea { min-width: 0; max-width: 100%; font-size: 14px; padding: 9px; box-sizing: border-box; }
.compact-composer input[type="date"], .compact-composer input[type="time"] { width: 100%; }
.compact-composer .event-form-actions { display: block; margin-top: 10px; }
.compact-composer .event-form-actions button { min-height: 42px; font-size: 13px; }
.compact-composer .composer-footnote { margin-bottom: 0; font-size: 10px; }
.compact-composer .event-form-error { font-size: 12px; }

/* Small sample previews return without increasing the dense row height. */
.discover-density .discovery-title { display:grid; grid-template-columns:36px minmax(0,1fr); column-gap:6px; align-content:center; align-items:center; }
.discover-density .discovery-title .discovery-photo { grid-row:1 / 3; width:36px; height:36px; border-radius:6px; }
.discover-density .discovery-title h2, .discover-density .discovery-title .discovery-meta { grid-column:2; min-width:0; }

/* Compact creation: readable short labels; stage navigation does not edit fields. */
.compact-composer .compact-more, .compact-composer .compact-stage-back button { min-height: 44px; font-size: 13px; line-height: 1.4; }
.compact-composer .compact-field strong { font-size: 13px; line-height: 1.45; }
.compact-composer #create-time-summary { overflow-wrap: normal; font-variant-numeric: tabular-nums; }
.compact-composer .compact-input-label { display: block; font-size: 12px; font-weight: 400; color: var(--quiet); margin-bottom: 6px; }
.compact-composer #event-form .plan-name input { font-size: 16px; font-weight: 500; padding: 9px; border: 1px solid var(--line); border-radius: 8px; }
.compact-composer #event-form input, .compact-composer #event-form select, .compact-composer #event-form textarea { font-size: 16px; }
.compact-composer .compact-weekly-label { width: 100%; margin: 12px 0 3px; font-size: 12px; font-weight: 500; color: var(--quiet); }
.compact-composer .save-usual button { white-space: normal; line-height: 1.4; }
.compact-composer .composer-footnote { font-size: 11px; line-height: 1.45; }

/* Fewer Discover results earn space; ten retain the compact 50px layout. */
.discover-density[data-density="relaxed"] .discovery-card { min-height:clamp(50px,calc((100dvh - 200px) / var(--discover-count)),76px); }
.discover-density[data-density="relaxed"] .discovery-title .discovery-photo { width:40px; height:40px; }
.discover-density[data-density="relaxed"] .discovery-title { grid-template-columns:40px minmax(0,1fr); }
.discover-density:is([data-density="medium"],[data-density="spacious"]) .discovery-card { grid-template-columns:minmax(0,1fr) 55px 76px; padding:6px 0; row-gap:4px; min-height:clamp(96px,calc((100dvh - 200px) / var(--discover-count)),140px); }
.discover-density:is([data-density="medium"],[data-density="spacious"]) .discovery-title { grid-column:1 / -1; grid-template-columns:48px minmax(0,1fr); }
.discover-density:is([data-density="medium"],[data-density="spacious"]) .discovery-title .discovery-photo { width:48px; height:48px; }
.discover-density:is([data-density="medium"],[data-density="spacious"]) .discovery-title h2 { font-size:16px; }
.discover-density:is([data-density="medium"],[data-density="spacious"]) .discovery-meta { white-space:normal; line-height:17px; max-height:34px; }
.discover-density:is([data-density="medium"],[data-density="spacious"]) .discovery-price { grid-column:1 / 3; text-align:left; display:flex; align-items:center; gap:10px; }
.discover-density[data-density="spacious"] .discovery-card { min-height:0; align-content:start; row-gap:10px; border-radius:12px; padding:12px; margin:8px 0; background:var(--surface); }
.discover-density[data-density="spacious"] .discovery-title { grid-template-columns:minmax(0,1fr); gap:6px; min-height:0; }
.discover-density[data-density="spacious"] .discovery-title .discovery-photo { grid-column:1; grid-row:1; position:relative; overflow:hidden; width:100%; height:140px; border-radius:9px; background-image:none; }
/* Keep the sprite tile square, then crop its center in the wide preview window. */
.discover-density[data-density="spacious"] .discovery-title .discovery-photo::before { content:""; position:absolute; width:100%; aspect-ratio:1; left:0; top:50%; transform:translateY(-50%); background-image:url('assets/demo-highlights.png'); background-size:300% 300%; background-position:inherit; background-repeat:no-repeat; }
.discover-density[data-density="spacious"] .discovery-title h2 { grid-column:1; grid-row:2; white-space:normal; font-size:18px; line-height:23px; }
.discover-density[data-density="spacious"] .discovery-meta { grid-column:1; grid-row:3; max-height:none; }

/* Cancelled occurrences keep their record, never an active capacity indicator. */
.cancelled-status { border: 1px solid #ffffff25; border-radius: 9px; padding: 8px; min-height: 40px; background: transparent; color: var(--quiet); font-size: 12px; }
.cancelled-event .pollinfo strong { color: var(--quiet); }
.host-cancel-panel .sheetcopy { margin: 10px 6px; font-size: 13px; line-height: 1.45; }
.host-cancel-panel > .tiny { margin: 10px 6px; line-height: 1.45; }
.host-cancel-panel > button { margin-top: 8px; font-size: 12px; white-space: normal; }
.cancelled-record .summary { margin-block: 14px; }

/* Provisional Social preview accent, not a confirmed GARRAS brand token. */
.discover-density[data-category="social"] { --social-preview-accent:#FF5160; }
.discover-density[data-category="social"] .discover-tabs button.active { background:var(--social-preview-accent); color:#141019; }
.discover-density[data-category="social"] .discover-type { color:var(--social-preview-accent); }
.discover-density[data-category="social"] .discovery-list { border-top-color:#FF516040; }
.discover-density[data-category="social"] .primary:not(.joined)[data-action="join"] { color:var(--social-preview-accent); border-color:#FF516060; background:#FF516012; }

/* Explicit group-scoped simulation, never an account permission claim. */
.group-preview { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 4px 16px; border-bottom: 1px solid var(--line); }
.group-preview > span { font-size: 9px; letter-spacing: .8px; color: var(--quiet); }
.group-preview > button { border: 0; background: none; color: var(--mint); min-height: 36px; font-size: 12px; padding: 6px 0; }
.event-role-note { padding: 0 var(--sheet-gutter); margin: 0 0 10px; color: var(--quiet); font-size: 12px; line-height: 1.4; }

/* Event taps stay in context; people and management are deliberate deeper actions. */
.event-mini { padding: 7px; }
.event-mini > header { display: flex; align-items: flex-start; gap: 8px; }
.event-mini h3 { min-width: 0; flex: 1; margin: 4px 0 9px; font-size: 16px; line-height: 1.35; overflow-wrap: anywhere; }
.event-mini header .iconbtn { flex: none; width: 32px; height: 32px; }
.event-mini-when, .event-mini-place { margin: 4px 0; font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.event-mini-capacity { color: var(--quiet); margin: 9px 0 12px; font-size: 12px; line-height: 1.4; }
.event-mini > .wide { min-height: 44px; font-size: 13px; }
.event-mini-gate { color: var(--quiet); font-size: 12px; margin: 11px 0; }
.event-mini-extra { border-top: 1px solid var(--line); margin: 9px 0; }
.event-mini-extra summary { min-height: 40px; padding: 10px 0; font-size: 12px; color: var(--mint); cursor: pointer; }
.event-mini-extra p { font-size: 12px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.event-mini-extra .summary { margin: 0; padding: 8px; }
.event-mini-extra .row { font-size: 12px; gap: 8px; }
.event-mini-links { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 5px; }
.event-mini-links button, .event-mini-host, .event-mini-history { border: 0; background: none; color: var(--mint); min-height: 40px; font-size: 12px; padding: 6px 0; }
.event-mini .status-simulation { margin: 8px 0 0; padding: 0; }

/* Compact optional fields: no rounded clipping wrappers around flush-left labels. */
.compact-composer #event-form :is(.plan-card, .event-options) { overflow:visible; border-radius:0; border:0; background:none; padding:0; margin:0; }
.compact-composer #event-form .event-options .disclosure-body { padding:0; }
.compact-composer #event-form .stage-more { min-width:0; }
.compact-composer #event-form.stage-more label { margin:0 0 8px; font-size:12px; line-height:18px; }
.compact-composer #event-form.stage-more .compact-input-label { margin-bottom:4px; }
.compact-composer #event-form.stage-more input:not([type="checkbox"]), .compact-composer #event-form.stage-more select { min-height:44px; margin-top:4px; padding:9px; border-radius:8px; }
.compact-composer #event-form.stage-more textarea { min-height:64px; height:64px; margin-top:4px; resize:vertical; border-radius:8px; }
.compact-composer .compact-kit { border-block:1px solid var(--line); margin:4px 0 8px; }
.compact-composer .compact-kit > summary { min-height:44px; padding:12px 0; font-size:13px; line-height:20px; color:var(--mint); cursor:pointer; }
.compact-composer .compact-kit .rule-chips { display:flex; flex-wrap:wrap; gap:4px 12px; margin:0; }
.compact-composer #event-form.stage-more .rule-chips label { display:flex; align-items:center; gap:6px; min-height:44px; margin:0; }
.compact-composer #event-form.stage-more .public-option { min-height:44px; margin:0; align-items:center; }
.compact-composer .compact-weekly-label { margin:8px 0 0; }
.compact-composer .save-usual button { min-height:44px; padding-block:8px; }
.compact-composer .event-form-actions { margin-top:8px; }
.compact-composer .composer-footnote { margin:8px 0 4px; padding-bottom:env(safe-area-inset-bottom,0px); overflow-wrap:anywhere; }

/* Group directory: one quiet entry point in the existing chat header. */
.primary.waitlist-join, .primary.waitlisted { white-space:normal; line-height:1.25; }
.primary.waitlisted, .discover-density .primary.waitlisted { color:#e4bf88; border:1px solid #e4bf884d; background:#e4bf8808; }
.discover-density .primary.waitlist-join, .discover-density .primary.waitlisted { font-size:11px; padding:6px 3px; }
.waitlist-current { color:#e4bf88; }
.event-waitlist-action > .primary { width:100%; min-height:44px; margin-block:12px; }
.group-members-entry {width:100%;text-align:left;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:3px;min-height:44px;padding:3px 0;border-radius:8px;background:transparent;}
.group-members-entry .group-title {font-size:16px;font-weight:650;line-height:1.3;letter-spacing:-.2px;overflow-wrap:anywhere;}
.group-members-entry .tiny {display:flex;align-items:center;gap:7px;}
.group-members-entry .tiny>span {color:var(--text);font-size:18px;line-height:12px;}
.group-members-entry:hover .group-title {color:var(--lime);}
.group-members-entry:focus-visible {outline:2px solid var(--lime);outline-offset:4px;}
.members-heading {display:flex;gap:12px;align-items:center;margin:0 0 20px;}
.members-heading>div {min-width:0;}
.members-heading strong {font-size:16px;overflow-wrap:anywhere;}
.members-heading p {margin-top:4px;}
#members-search {min-width:0;}
.group-member-list {margin-top:18px;}
.group-member-row {display:flex;align-items:center;gap:12px;width:100%;min-height:70px;padding:12px 14px;text-align:left;background:transparent;border-bottom:1px solid var(--line);border-radius:0;}
.group-member-row:last-child {border-bottom:0;}
.group-member-row:hover {background:#ffffff06;}
.group-member-row .roster-photo {width:42px;height:42px;flex:0 0 42px;}
.member-copy {min-width:0;flex:1;}
.member-copy strong {display:block;font-size:15px;line-height:1.3;font-weight:600;overflow-wrap:anywhere;}
.member-copy small {display:block;color:var(--quiet);font-size:12px;margin-top:4px;overflow-wrap:anywhere;}
.member-you {font-size:11px;color:var(--quiet);font-weight:400;margin-left:6px;}
.member-profile-link {font-size:11px;color:var(--quiet);white-space:nowrap;flex:none;}
@media(max-width:360px){.group-member-row{gap:9px;padding:11px 10px;}.member-profile-link{font-size:10px;}.member-copy strong{font-size:14px;}.group-members-entry .group-title{font-size:15px;}}

.profile-followers {font-size:13px;color:var(--quiet);margin:8px 0 0;}
.profile-followers strong {color:var(--text);font-weight:650;}

/* League registration uses one anchored panel, never a stack of pages. */
.league-mini {padding:12px;min-width:0;}
.league-mini header {display:flex;align-items:flex-start;gap:8px;}
.league-mini h3 {font-size:18px;line-height:1.3;margin:4px 0 9px;flex:1;min-width:0;}
.league-mini header .iconbtn {width:32px;height:32px;flex:none;}
.league-mini h4 {font-size:12px;color:var(--quiet);margin:12px 0 7px;font-weight:500;}
.league-meta,.league-note {font-size:12px;line-height:1.45;color:var(--quiet);margin:4px 0;overflow-wrap:anywhere;}
.league-disclosure {border-top:1px solid var(--line);margin-top:8px;}
.league-disclosure summary {font-size:12px;line-height:1.4;padding:12px 0;min-height:44px;box-sizing:border-box;cursor:pointer;color:var(--mint);}
.league-disclosure p {font-size:12px;line-height:1.5;color:var(--quiet);margin:0 0 10px;}
.league-team-main {display:flex;gap:8px;align-items:center;min-height:50px;}
.league-team-main .avatar {width:28px;height:28px;font-size:11px;flex:none;}
.league-team-main > div {min-width:0;flex:1;}
.league-team-main strong,.league-selected strong {display:block;font-size:15px;line-height:1.4;overflow-wrap:anywhere;}
.league-team-main small,.league-selected small {display:block;color:var(--quiet);font-size:12px;line-height:1.4;}
.league-team-main .secondary {padding:9px;min-height:44px;font-size:12px;flex:none;}
.league-team .league-disclosure {border:0;margin:0;}
.league-team {border-bottom:1px solid var(--line);padding:4px 0;}
.league-team textarea {width:100%;max-width:100%;font-size:16px;box-sizing:border-box;resize:vertical;min-height:66px;}
.league-link {display:inline-block;background:none;border:0;color:var(--mint);font-size:12px;min-height:44px;padding:8px 0;}
.league-selected {display:flex;align-items:center;justify-content:space-between;gap:8px;margin:12px 0 5px;}
.league-waiver {display:flex;align-items:center;gap:8px;min-height:44px;font-size:12px;line-height:1.4;cursor:pointer;margin:5px 0;}
.league-waiver input {width:18px;height:18px;flex:none;accent-color:var(--mint);}
.league-total {display:grid;gap:6px;border-top:1px solid var(--line);margin:12px 0;padding-top:10px;font-size:12px;}
.league-total > * {display:flex;justify-content:space-between;gap:10px;}
.league-total b {font-weight:600;}
.league-total > strong {font-size:15px;margin-top:4px;}
.league-size {display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;margin-top:8px;}
.league-size select {width:auto;min-height:44px;font-size:16px;}
.league-mini .primary.wide,.league-demo .secondary {min-height:44px;font-size:13px;white-space:normal;line-height:1.4;}
.league-demo .secondary {margin:3px 0;}
.league-confirmed {padding:14px 0;}
.league-confirmed strong {color:var(--mint);font-size:16px;}
.league-confirmed p {font-size:13px;margin-top:6px;}
.league-mini .status-simulation {padding:0;font-size:10px;line-height:1.4;margin:12px 0 0;}

/* Casual preview entry only. The app remains a publicly delivered simulation. */
#preview-entry { min-height:100vh; min-height:100dvh; display:grid; place-items:center; padding:32px 24px; }
#preview-entry[hidden], #prototype-content[hidden] { display:none!important; }
.preview-entry-panel { width:min(100%,320px); text-align:center; }
.preview-kicker { color:var(--quiet); font-size:10px; font-weight:700; letter-spacing:2px; }
#preview-title { margin:15px 0 8px; font-size:56px; font-style:italic; font-weight:950; letter-spacing:-4px; color:var(--lime); }
.preview-tagline { color:var(--text); font-size:16px; }
#preview-pin-form { margin-top:38px; }
#preview-pin-form label { display:block; margin-bottom:12px; color:var(--quiet); font-size:14px; }
#preview-pin { width:100%; height:60px; padding:10px 10px 10px 22px; text-align:center; color:var(--text); background:var(--surface); border:1px solid #ffffff25; border-radius:14px; font-size:28px; letter-spacing:12px; }
#preview-pin-error { min-height:42px; padding:10px 0 8px; color:#ff9696; font-size:12px; }
#preview-enter { width:100%; min-height:50px; background:var(--lime); color:var(--ink); font-size:15px; font-weight:750; border-radius:14px; }
.preview-caption { margin-top:27px; color:var(--quiet); font-size:12px; }
#preview-entry noscript { display:block; margin-top:20px; color:var(--text); }
@media (prefers-reduced-motion:no-preference) { #preview-enter { transition:transform .16s ease,opacity .16s ease; } #preview-enter:active { transform:scale(.98); } }

/* Roomier league registration; the same anchored dropdown on every screen. */
.league-team-badge {display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;border-radius:10px;background:#a65cff1c;border:1px solid #a65cff45;color:var(--mint);font-size:12px;font-weight:650;}
.league-team-picker {margin-top:6px;}
.league-team-main button[aria-pressed="true"] {border-color:var(--mint);color:var(--mint);}
@media(max-width:360px){.league-mini {padding:8px;}.league-team-main {gap:6px;}.league-team-main strong {font-size:13px;}.league-team-main .secondary {padding-inline:7px;}}

/* One header row: navigation, title, utilities. */
dialog#sheet .navigation-chrome {padding-top:14px;padding-bottom:14px;}
dialog#sheet .navigation-chrome .sheet-nav {position:static;margin:0;gap:10px;}
dialog#sheet .sheet-nav #sheet-title {flex:1;min-width:0;margin:0;font-size:19px;line-height:1.3;letter-spacing:-.35px;text-align:left;overflow-wrap:anywhere;}
dialog#sheet .sheet-nav .sheet-back {flex:0 0 44px;width:44px;min-width:44px;max-width:44px;height:44px;padding:0;justify-content:center;}
dialog#sheet .sheet-nav .sheet-back span {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
dialog#sheet .sheet-nav .sheet-utilities {margin-left:0;}
.pagehead h1 {min-width:0;}
@media(max-width:360px){dialog#sheet .sheet-nav {gap:8px;}dialog#sheet .sheet-nav #sheet-title {font-size:17px;}}

/* A match conversation, not an extra navigation destination. */
.tunnel-chatrow { padding-bottom: 4px; }
.tunnel-avatar { display:flex;align-items:center;justify-content:center;flex:none;width:48px;height:48px;border:1px solid #a65cff70;border-radius:16px;background:linear-gradient(135deg,#48223a,#272148);color:#d8b5ff; }
.tunnel-avatar .icon {width:23px;height:23px;}
.tunnel-row-label {font-size:11px;color:#bd9de2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tunnel-open-label {font-size:10px;color:var(--mint);white-space:nowrap;}
.composer-tunnel {flex:none;display:flex;align-items:center;justify-content:center;gap:4px;min-height:44px;padding:0 8px;border:1px solid #a65cff70;border-radius:14px;background:#271b38;color:#d5b2ff;font-size:11px;font-weight:700;}
.tunnel-dot {width:5px;height:5px;border-radius:50%;background:#a65cff;flex:none;}
.tunnel-chatrow .chattext {min-width:0;}
.tunnel-chatrow .chattext strong {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
@media(max-width:360px){.composer{gap:5px;padding-left:8px;padding-right:8px}.composer-tunnel{padding:0 6px}.tunnel-avatar{width:42px;height:42px}.tunnel-chatrow .chatopen{gap:6px}}

@media(max-width:360px){.grouphead{gap:7px;}.grouphead .group-title{font-size:14px;}}