@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root { --ink: #151925; --muted: #7f8595; --line: #e9eaf0; --paper: #fbfbfd; --blue: #2361dc; --blue-soft: #eaf0ff; --dark: #11151f; --shadow: 0 18px 50px rgba(28, 34, 52, .10); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #eef0f4; color: var(--ink); font-family: 'DM Sans', sans-serif; -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font: inherit; }
button { border: 0; cursor: pointer; color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid rgba(35, 97, 220, .35); outline-offset: 3px; }
.app-shell { width: min(100%, 1440px); min-height: 100vh; margin: 0 auto; background: var(--paper); position: relative; overflow: hidden; }
.demo-banner { min-height: 28px; display: flex; align-items: center; justify-content: center; gap: 7px; background: #f0f4ff; color: #596784; font-size: 11px; letter-spacing: .05em; }
.status-dot, .mini-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; background: #4b70e8; }
.topbar { height: 82px; padding: 0 clamp(22px, 6vw, 92px); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(226, 228, 235, .75); background: rgba(251, 251, 253, .9); }
.brand { display: flex; align-items: center; gap: 11px; color: var(--ink); text-decoration: none; font-family: Manrope, sans-serif; font-size: 12px; letter-spacing: .18em; font-weight: 800; }
.brand img { width: 95px; height: auto; object-fit: contain; }
.topbar-actions { display: flex; align-items: center; gap: 13px; }
.role-pill { display: inline-flex; align-items: center; gap: 8px; padding: 10px 13px; border: 1px solid var(--line); border-radius: 100px; background: white; color: #555d6d; font-size: 12px; font-weight: 700; }
.role-icon { color: var(--blue); font-size: 15px; }
.chevron { color: #9aa1af; font-size: 15px; line-height: 1; }
.avatar { width: 36px; height: 36px; border-radius: 50%; background: #1d2432; color: white; display: grid; place-items: center; font-size: 11px; font-weight: 800; letter-spacing: .04em; }
.page { width: min(100% - 44px, 1030px); margin: 0 auto; padding: 64px 0 126px; }
.page-home { max-width: 1110px; padding-top: 36px; }
.page-intro { margin-bottom: 38px; }
.page-intro.compact { max-width: 630px; margin-bottom: 30px; }
.overline { margin: 0 0 11px; color: #8c92a1; font-size: 10px; line-height: 1.3; letter-spacing: .16em; font-weight: 800; }
.overline .mini-dot { margin: 0 6px 1px; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: Manrope, sans-serif; letter-spacing: -.05em; }
h1 { margin-bottom: 15px; font-size: clamp(38px, 5.5vw, 74px); line-height: .98; font-weight: 700; }
h1 em { color: var(--blue); font-style: normal; }
.lede { max-width: 470px; margin-bottom: 0; color: var(--muted); font-size: 15px; line-height: 1.65; }
.event-switcher { width: 100%; min-height: 60px; margin-bottom: 14px; padding: 11px 14px 10px 16px; display: grid; grid-template-columns: 1fr auto; grid-template-rows: 18px 17px; column-gap: 12px; align-items: center; text-align: left; background: white; border: 1px solid var(--line); border-radius: 14px; box-shadow: none; }
.event-current { grid-column: 1; grid-row: 1; color: var(--ink); font-size: 14px; font-weight: 800; }
.event-date { grid-column: 1; grid-row: 2; color: #9298a6; font-size: 11px; }
.switch-mark { grid-column: 2; grid-row: 1 / 3; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: #f4f6fb; color: #687187; }
.switch-mark svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.hero-card { min-height: 360px; position: relative; overflow: hidden; border-radius: 22px; color: white; background: var(--dark); box-shadow: 0 18px 44px rgba(23, 28, 40, .19); background-image: var(--hero-image); background-size: cover; background-position: center; }
.hero-card:after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(18, 22, 31, .93) 0%, rgba(21, 24, 38, .66) 46%, rgba(21, 24, 38, .18) 100%); }
.hero-card.crimson:after { background: linear-gradient(100deg, rgba(29, 20, 29, .92) 0%, rgba(75, 24, 37, .67) 52%, rgba(20, 26, 44, .15) 100%); }
.hero-card.pine:after { background: linear-gradient(100deg, rgba(15, 28, 27, .93) 0%, rgba(22, 64, 58, .65) 52%, rgba(20, 26, 44, .15) 100%); }
.hero-card.violet:after { background: linear-gradient(100deg, rgba(25, 22, 48, .93) 0%, rgba(54, 42, 99, .65) 52%, rgba(20, 26, 44, .15) 100%); }
.hero-card.ocean:after { background: linear-gradient(100deg, rgba(16, 27, 40, .93) 0%, rgba(24, 63, 88, .65) 52%, rgba(20, 26, 44, .15) 100%); }
.hero-content { height: 100%; min-height: 360px; position: relative; z-index: 1; padding: 28px 31px 26px; display: flex; flex-direction: column; justify-content: space-between; }
.hero-top, .hero-bottom { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.eyebrow { font-size: 11px; letter-spacing: .11em; text-transform: uppercase; font-weight: 700; color: rgba(255,255,255,.74); }
.sample-chip { display: inline-flex; align-items: center; width: max-content; padding: 5px 8px; border-radius: 5px; background: rgba(255,255,255,.13); color: rgba(255,255,255,.73); font-size: 9px; letter-spacing: .11em; font-weight: 800; }
.hero-date { margin-bottom: 8px; color: rgba(255,255,255,.68); font-size: 12px; letter-spacing: .13em; font-weight: 800; }
.hero-card h2 { max-width: 580px; margin-bottom: 15px; font-size: clamp(38px, 6vw, 70px); line-height: .93; font-weight: 700; }
.hero-location { margin: 0; display: flex; align-items: center; gap: 7px; color: rgba(255,255,255,.78); font-size: 13px; }
.hero-location svg, .detail-list svg, .spotlight-footer svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.65; }
.hero-bottom { color: rgba(255,255,255,.67); font-size: 12px; font-weight: 600; }
.circle-arrow { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.38); border-radius: 50%; background: rgba(255,255,255,.10); color: white; transition: .2s ease; }
.circle-arrow:hover { background: white; color: var(--ink); transform: translateX(2px); }
.circle-arrow svg, .primary-action svg, .text-action svg, .fan-actions svg, .primary-button svg, .event-option svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.focus-section { max-width: 800px; margin: 55px auto 0; }
.section-heading { margin-bottom: 18px; display: flex; align-items: end; justify-content: space-between; }
.section-heading h3 { margin-bottom: 0; font-size: clamp(23px, 3vw, 31px); }
.step-count { color: #b7bdc9; font-family: Manrope, sans-serif; font-size: 12px; font-weight: 800; }
.status-chip { display: inline-flex; margin-left: 7px; padding: 4px 7px; vertical-align: 1px; border-radius: 5px; background: #eef2ff; color: var(--blue); font-size: 9px; letter-spacing: .08em; }
.primary-action { width: 100%; min-height: 86px; padding: 15px 18px; display: flex; align-items: center; gap: 15px; text-align: left; border-radius: 16px; background: #1c55ca; color: white; box-shadow: 0 14px 27px rgba(35, 97, 220, .2); transition: .2s ease; }
.primary-action:hover, .primary-button:hover { background: #1749af; transform: translateY(-2px); }
.action-icon { width: 45px; height: 45px; display: grid; place-items: center; border-radius: 13px; background: rgba(255,255,255,.15); font-size: 21px; }
.primary-action strong { display: block; margin-bottom: 4px; font-size: 14px; }
.primary-action small { display: block; color: rgba(255,255,255,.68); font-size: 12px; }
.primary-action svg { margin-left: auto; }
.home-fan-action { max-width: 800px; margin: 28px auto 0; }
.quick-links { max-width: 800px; margin: 30px auto 0; }
.link-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.link-row button, .link-row a { min-height: 76px; padding: 12px; display: grid; grid-template-columns: 27px 1fr; grid-template-rows: 19px 17px; column-gap: 8px; align-items: center; text-align: left; border: 1px solid var(--line); border-radius: 14px; background: white; color: inherit; text-decoration: none; }
.link-row button > span, .link-row a > span { width: 30px; height: 30px; display: grid; place-items: center; grid-row: 1 / 3; border-radius: 9px; background: var(--blue-soft); color: var(--blue); }
.link-row svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.link-row b { font-size: 12px; }
.link-row small { color: #9da3af; font-size: 10px; }
.resource-note { margin: 14px 0 0; color: #9da3af; font-size: 11px; line-height: 1.45; text-align: center; }
.quiet-note { margin: 15px 0 0; text-align: center; color: #b2b6c0; font-size: 11px; }
.events-page { max-width: 900px; }
/* Legacy .directory-card contract retained while rows keep the page compact. */
.directory-meta { max-width: 760px; margin: 0 auto 16px; display: flex; align-items: center; justify-content: space-between; gap: 15px; color: #8f97a7; font-size: 10px; }
.directory-meta strong { color: #5e687b; font-size: 12px; }
.directory-filters { max-width: 760px; margin: 0 auto 24px; display: flex; flex-wrap: wrap; gap: 7px; }
.directory-filter { min-height: 34px; padding: 0 11px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid #e2e6ee; border-radius: 999px; background: white; color: #788397; font-size: 10px; font-weight: 800; }
.directory-filter span { min-width: 17px; height: 17px; display: grid; place-items: center; border-radius: 50%; background: #f0f3f8; color: #9ca5b5; font-size: 9px; }
.directory-filter.active { border-color: #bfd0f5; background: #eff4ff; color: var(--blue); }
.directory-filter.active span { background: #dce7ff; color: var(--blue); }
.event-directory { display: grid; gap: 27px; max-width: 760px; margin: 0 auto; }
.directory-group { display: grid; gap: 9px; }
.directory-group > h2 { margin: 0 0 3px; color: #a0a8b7; font-size: 10px; letter-spacing: .14em; font-weight: 800; text-transform: uppercase; }
.directory-row { min-width: 0; padding: 14px; display: grid; grid-template-columns: 47px minmax(0, 1fr) auto; align-items: center; gap: 13px; border: 1px solid var(--line); border-left: 3px solid #9ca8bd; border-radius: 15px; background: white; box-shadow: 0 7px 22px rgba(28, 34, 52, .035); }
.directory-row.crimson { border-left-color: #b74761; }.directory-row.pine { border-left-color: #347b70; }.directory-row.violet { border-left-color: #7162ba; }.directory-row.ocean { border-left-color: #4b8aa9; }
.directory-thumb { width: 47px; height: 62px; display: block; object-fit: cover; border-radius: 9px; background: #eef2f8; }
.directory-thumb.no-image { display: grid; place-items: center; color: #b4bdcc; font-size: 20px; }
.directory-row-main { min-width: 0; }
.directory-source, .directory-freshness { font-size: 9px; letter-spacing: .1em; font-weight: 800; text-transform: uppercase; }
.directory-source { color: #6476a6; }.directory-freshness { color: #a0a7b4; font-weight: 600; letter-spacing: .04em; text-transform: none; }
.directory-row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 10px; }
.directory-row h2 { margin: 5px 0 4px; overflow: hidden; color: #3f4b63; font-size: clamp(16px, 2.4vw, 21px); line-height: 1.1; text-overflow: ellipsis; }
.directory-row-sub { margin: 0; display: flex; flex-wrap: wrap; gap: 5px 10px; color: #7b879a; font-size: 10px; line-height: 1.35; }
.directory-row-sub span + span { padding-left: 10px; border-left: 1px solid #dfe4ec; }
.directory-row-sub .pending-time { color: #a45a5a; font-weight: 800; }
.directory-row-descriptor { margin: 5px 0 0; color: #a0a8b6; font-size: 10px; line-height: 1.35; }
.directory-row-actions { min-width: 124px; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.directory-primary { min-height: 34px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 9px; background: var(--blue); color: white; font-size: 10px; font-weight: 800; white-space: nowrap; }
.directory-primary svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.directory-watch { display: inline-flex; align-items: center; gap: 5px; min-height: 38px; color: var(--blue); font-size: 11px; font-weight: 800; text-decoration: none; }
.directory-watch svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.directory-watch.pending { color: #a4aab6; font-weight: 600; }
.partner-placeholder { max-width: 760px; margin: 30px auto 0; padding: 18px 19px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border: 1px dashed #d8dde8; border-radius: 17px; background: #fafbfe; }
.partner-placeholder h2 { margin: 5px 0 7px; font-size: 21px; }
.partner-placeholder p:not(.overline) { max-width: 500px; margin: 0; color: #8c95a5; font-size: 11px; line-height: 1.5; }
.partner-placeholder > span { flex: 0 0 auto; color: #9da5b2; font-size: 10px; font-weight: 800; }
.free-access-card { max-width: 720px; margin-top: 28px; padding: 21px; display: flex; align-items: center; justify-content: space-between; gap: 22px; border: 1px solid #dce6fa; border-radius: 18px; background: linear-gradient(135deg, #f2f6ff, #fbfcff); }
.free-access-card h2 { margin: 4px 0 7px; font-size: 22px; }
.free-access-card p { max-width: 470px; margin: 0 0 6px; color: #5f6b83; font-size: 12px; line-height: 1.5; }
.free-access-card small { display: block; max-width: 470px; color: #929bad; font-size: 10px; line-height: 1.45; }
.free-access-card .primary-button { flex: 0 0 auto; white-space: nowrap; text-decoration: none; }
.coach-tools { max-width: 800px; margin: 25px auto 0; padding: 15px 17px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border: 1px solid #e7ebf3; border-radius: 14px; background: #fafbfe; }
.coach-tools strong, .coach-tools small { display: block; }
.coach-tools strong { margin-top: 4px; color: #59657b; font-size: 12px; }
.coach-tools small { max-width: 540px; margin-top: 5px; color: #919aaa; font-size: 10px; line-height: 1.45; }
.coach-tools-unavailable { display: inline-flex; align-items: center; flex: 0 0 auto; color: #9aa3b2; font-size: 10px; font-weight: 800; }
.coach-system-note { margin: 18px 0; padding: 13px; border-radius: 11px; background: #f3f6fc; }
.coach-system-note strong { color: #56627a; font-size: 11px; }
.coach-system-note p { margin: 5px 0 9px; color: #8993a4; font-size: 10px; line-height: 1.45; }
.coach-system-note .coach-tools-unavailable { color: #8f99a9; }
.team-list { display: grid; gap: 12px; max-width: 720px; }
.team-card { min-height: 96px; padding: 16px 18px; display: flex; align-items: center; gap: 15px; text-align: left; background: white; border: 1px solid var(--line); border-radius: 16px; transition: .2s ease; }
.team-card:hover { border-color: #c8d4f1; box-shadow: 0 11px 28px rgba(28, 34, 52, .07); transform: translateY(-2px); }
.team-mark { width: 47px; height: 47px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 14px; font-family: Manrope, sans-serif; font-size: 13px; font-weight: 800; }
.team-mark.blue { background: #e6efff; color: #2965d4; }
.team-mark.red { background: #f9e7eb; color: #b84961; }
.team-main { display: flex; flex-direction: column; gap: 3px; }
.team-main strong { font-size: 14px; }
.team-main small { color: #7b8291; font-size: 12px; }
.team-main em { margin-top: 5px; color: var(--blue); font-size: 11px; font-style: normal; font-weight: 700; }
.team-arrow { margin-left: auto; color: #a1a8b5; }
.team-arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.soft-panel { max-width: 720px; margin-top: 28px; padding: 18px; display: flex; gap: 13px; border-radius: 16px; background: #f1f4fb; }
.panel-icon { width: 31px; height: 31px; display: grid; place-items: center; flex: 0 0 auto; color: var(--blue); background: white; border-radius: 9px; }
.soft-panel strong { font-size: 12px; }
.soft-panel p { margin: 4px 0 0; color: #81899a; font-size: 11px; line-height: 1.5; }
.text-action { margin-top: 24px; padding: 8px 0; background: none; color: #747d91; font-size: 12px; }
.text-action span { margin-left: 5px; color: var(--blue); font-weight: 700; }
.text-action svg { display: inline-block; width: 13px; height: 13px; vertical-align: -2px; }
.arena-mirror { max-width: 820px; margin-top: 28px; padding: 18px; border: 1px solid #dfe5ef; border-radius: 20px; background: #fff; box-shadow: 0 12px 30px rgba(31, 42, 64, .06); }
.arena-mirror-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.arena-mirror-head h2 { margin: 6px 0 0; font-size: 25px; letter-spacing: -.04em; }
.arena-frame { width: 100%; overflow: hidden; border-radius: 13px; background: #07121e; aspect-ratio: 16 / 9; }
.arena-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.arena-mirror-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 11px; color: #8b95a7; font-size: 10px; line-height: 1.35; }
.arena-mirror-footer a { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; color: var(--blue); font-weight: 800; text-decoration: none; }
.arena-mirror-footer svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.mirror-note { margin: 10px 0 0; text-align: left; }
.unavailable-mirror { min-height: 150px; background: #f8fafc; box-shadow: none; }
.unavailable-mirror > p { max-width: 560px; margin: 24px 0 4px; color: #8c96a6; font-size: 12px; line-height: 1.55; }
.fan-spotlight { max-width: 720px; min-height: 244px; margin-top: 24px; padding: 26px; position: relative; overflow: hidden; border-radius: 20px; background: #161d2c; color: white; }
.fan-spotlight:after { content: '✦'; position: absolute; right: 28px; bottom: -28px; color: rgba(66, 117, 235, .2); font-size: 178px; line-height: 1; }
.spotlight-label { position: relative; z-index: 1; color: #8392b4; font-size: 10px; letter-spacing: .13em; font-weight: 800; }
.spotlight-label .sample-chip { margin-left: 7px; padding: 4px 6px; background: rgba(90, 119, 188, .26); color: #9bb2ea; }
.live-pulse { width: 7px; height: 7px; display: inline-block; margin-right: 6px; border-radius: 50%; background: #6f8ff4; box-shadow: 0 0 0 4px rgba(111, 143, 244, .14); }
.fan-spotlight h2 { position: relative; z-index: 1; margin: 42px 0 10px; font-size: 34px; }
.spotlight-team { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 5px; }
.spotlight-team strong { font-family: Manrope, sans-serif; font-size: 18px; }
.spotlight-team span, .spotlight-footer { color: #98a5bf; font-size: 11px; }
.spotlight-footer { position: relative; z-index: 1; margin-top: 27px; display: flex; align-items: center; justify-content: space-between; }
.spotlight-footer span { display: flex; align-items: center; gap: 6px; }
.spotlight-footer button { background: none; color: #b2c5f3; font-size: 11px; font-weight: 700; }
.spotlight-footer button svg { width: 12px; height: 12px; vertical-align: -2px; }
.fan-actions { max-width: 720px; margin-top: 45px; }
.fan-action-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.fan-action-grid button, .fan-action-grid a { min-height: 142px; padding: 18px; display: flex; flex-direction: column; align-items: flex-start; text-align: left; background: white; border: 1px solid var(--line); border-radius: 16px; color: inherit; text-decoration: none; }
.fan-action-grid button:hover, .fan-action-grid a:hover { border-color: #c8d4f1; }
.big-icon { width: 35px; height: 35px; display: grid; place-items: center; margin-bottom: 16px; border-radius: 10px; background: #edf2ff; color: var(--blue); }
.big-icon svg { width: 17px; height: 17px; }
.fan-action-grid strong { margin-bottom: 5px; font-size: 13px; }
.fan-action-grid small { color: #969daa; font-size: 11px; }
.vote-card { max-width: 720px; margin-top: 25px; padding: 16px; display: flex; align-items: center; gap: 12px; border: 1px solid #f0e7db; border-radius: 15px; background: #fffaf4; }
.vote-icon { width: 35px; height: 35px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 10px; background: #fff0d9; color: #bd7634; font-size: 20px; }
.vote-card strong { font-size: 12px; }
.vote-card p { margin: 3px 0 0; color: #9a8b7b; font-size: 11px; }
.vote-card button { margin-left: auto; color: #bd7634; background: transparent; font-size: 12px; font-weight: 800; }
.vote-card button span { font-size: 15px; }
.ask-page { max-width: 820px; }
.conversation { max-width: 690px; margin-top: 42px; padding: 25px 0 26px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.message { display: flex; align-items: flex-start; gap: 10px; }
.message + .message { margin-top: 19px; }
.message-avatar { width: 30px; height: 30px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 9px; background: #1d56c9; color: white; font-size: 9px; font-weight: 800; }
.message p { max-width: 430px; margin: 4px 0 0; padding: 12px 14px; border-radius: 4px 14px 14px 14px; background: #f0f3f9; color: #525b6c; font-size: 13px; line-height: 1.5; }
.message small { color: #a0a6b2; font-size: 10px; }
.message.user { justify-content: flex-end; text-align: right; }
.message.user p { border-radius: 14px 4px 14px 14px; background: #e8efff; color: #3657a0; }
.message-input { width: 100%; margin-top: 24px; padding: 14px 15px; display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--line); border-radius: 13px; background: white; color: #b4bac5; text-align: left; font-size: 12px; }
.message-input b { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: #e9efff; color: var(--blue); font-size: 17px; font-weight: 400; }
.status-card { margin: 22px 0 0 40px; padding: 14px; display: flex; align-items: flex-start; gap: 10px; border-radius: 13px; background: #fafbfc; border: 1px solid var(--line); }
.status-ring { width: 24px; height: 24px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid #80a0ed; border-radius: 50%; color: var(--blue); font-size: 11px; }
.status-card strong { display: block; font-size: 11px; }
.status-card p { margin: 3px 0 0; color: #8e96a5; font-size: 11px; line-height: 1.45; }
.ask-shortcuts { max-width: 690px; margin-top: 37px; }
.ask-shortcuts button { width: 100%; padding: 14px 0; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); background: transparent; color: #5c6577; font-size: 12px; text-align: left; }
.ask-shortcuts button span { color: #a4abba; }
.ask-shortcuts svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.bottom-nav { width: min(100% - 44px, 450px); height: 70px; padding: 7px; position: fixed; z-index: 5; left: 50%; bottom: 18px; display: grid; grid-template-columns: repeat(4, 1fr); transform: translateX(-50%); border: 1px solid rgba(226, 229, 238, .9); border-radius: 21px; background: rgba(255,255,255,.9); box-shadow: 0 14px 35px rgba(29, 37, 57, .15); backdrop-filter: blur(14px); }
.bottom-nav.fan-mode { display: none; grid-template-columns: repeat(3, 1fr); }
.app-shell.fan-zone-route { overflow: visible; }
.app-shell.fan-zone-route .bottom-nav { position: static; left: auto; bottom: auto; margin: 18px auto 18px; transform: none; }
.nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border-radius: 15px; background: transparent; color: #9ca4b3; font-size: 10px; font-weight: 700; }
.nav-item.active { background: #edf2ff; color: var(--blue); }
.nav-glyph { display: grid; place-items: center; height: 21px; font-size: 19px; line-height: 1; font-weight: 400; }
.modal-backdrop { position: fixed; z-index: 10; inset: 0; display: grid; place-items: center; padding: 22px; background: rgba(19, 25, 39, .43); backdrop-filter: blur(8px); }
.modal-backdrop.hidden { display: none; }
.modal { width: min(100%, 520px); max-height: min(700px, calc(100vh - 44px)); overflow: auto; padding: 28px; border-radius: 22px; background: #fff; box-shadow: 0 24px 80px rgba(15, 20, 35, .26); animation: modal-in .18s ease-out; }
@keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.modal-head { display: flex; align-items: start; justify-content: space-between; gap: 15px; }
.modal h2 { margin-bottom: 0; font-size: 27px; line-height: 1.06; }
.close-button { width: 29px; height: 29px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: #f3f5f9; color: #777f90; }
.close-button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.modal-copy { margin: 18px 0 23px; color: #828a99; font-size: 13px; line-height: 1.6; }
.event-options { display: grid; gap: 9px; }
.event-option { min-height: 69px; padding: 12px 13px; display: flex; align-items: center; gap: 11px; text-align: left; border: 1px solid var(--line); border-radius: 13px; background: white; }
.event-option:hover, .event-option.selected { border-color: #b6c7f2; background: #f9fbff; }
.event-option > span:nth-child(2) { display: flex; flex-direction: column; gap: 4px; }
.event-option strong { font-size: 12px; }
.event-option small { color: #9198a6; font-size: 10px; }
.event-option > b, .event-option > svg { margin-left: auto; color: var(--blue); }
.option-accent { width: 7px; height: 38px; border-radius: 5px; }
.option-accent.crimson { background: #b74761; }.option-accent.pine { background: #347b70; }.option-accent.violet { background: #7162ba; }.option-accent.ocean { background: #4b8aa9; }
.detail-hero { margin: 23px 0 18px; padding: 25px; display: flex; flex-direction: column; gap: 7px; border-radius: 14px; color: white; background: #28365f; }
.detail-hero.crimson { background: #6a3346; }.detail-hero.pine { background: #285a54; }.detail-hero.violet { background: #514b87; }.detail-hero.ocean { background: #2c637a; }
.detail-hero span { color: rgba(255,255,255,.66); font-size: 11px; letter-spacing: .12em; font-weight: 800; }.detail-hero strong { font-family: Manrope, sans-serif; font-size: 19px; }
.detail-list { display: grid; gap: 12px; margin-bottom: 23px; }.detail-list p { margin: 0; display: flex; align-items: center; gap: 9px; color: #6e7788; font-size: 12px; line-height: 1.45; }.detail-list span { color: var(--blue); }
.modal-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; margin-top: 23px; }
.primary-button, .secondary-button { min-height: 42px; padding: 0 15px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 10px; font-size: 12px; font-weight: 700; }
.primary-button { background: var(--blue); color: white; }.secondary-button { background: #f1f3f7; color: #616a7a; }.full { width: 100%; }
.tiny-note { margin: 14px 0 0; color: #b0b5bf; font-size: 10px; text-align: center; }
.confirm-box { padding: 15px; display: flex; align-items: center; gap: 11px; border: 1px solid #e6eaf3; border-radius: 13px; background: #fbfcfe; }.confirm-box > div { display: flex; flex-direction: column; gap: 4px; }.confirm-box strong { font-size: 12px; }.confirm-box small { color: #969eac; font-size: 10px; }.check-mark { margin-left: auto; color: #3d91a1; font-size: 17px; }
.access-note { margin-top: 13px; padding: 12px; display: flex; gap: 9px; border-radius: 10px; background: #f3f6fc; }.access-note > span { color: var(--blue); }.access-note p { margin: 0; color: #8791a2; font-size: 10px; line-height: 1.45; }
.field-label input.code-input, .field-label input[aria-label="Demo access code"] { width: 100%; padding: 12px; color: #596476; border: 1px solid #e0e4ec; border-radius: 9px; background: white; font-size: 12px; letter-spacing: .03em; }
.team-intent-list { display: grid; gap: 9px; }.team-intent-row { padding: 12px; display: flex; align-items: center; gap: 12px; border: 1px solid #e8ebf1; border-radius: 10px; }.team-intent-row > span { display: flex; flex-direction: column; gap: 3px; }.team-intent-row strong { font-size: 11px; }.team-intent-row small { color: #969eac; font-size: 10px; }.team-intent-row select { margin-left: auto; padding: 8px 23px 8px 8px; color: #596476; border: 1px solid #e0e4ec; border-radius: 8px; background: white; font-size: 11px; }
.bid-progress { padding: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-radius: 11px; background: #f3f6fc; }.bid-progress div { display: flex; flex-direction: column; gap: 4px; }.bid-progress strong { color: #4e5b74; font-size: 11px; }.bid-progress small, .bid-progress > span { color: #8f99a9; font-size: 10px; }.bid-progress > span { text-align: right; }
.team-tabs { display: flex; gap: 7px; margin: 15px 0 10px; overflow-x: auto; }.team-tab { padding: 8px 10px; white-space: nowrap; border: 1px solid #e6eaf1; border-radius: 8px; background: white; color: #8b94a4; font-size: 10px; font-weight: 700; }.team-tab.active { border-color: #b9c9f2; background: #eef3ff; color: var(--blue); }
.championship-list { display: grid; gap: 7px; }.championship-row { padding: 10px; display: flex; align-items: center; gap: 10px; border: 1px solid #e8ebf1; border-radius: 10px; }.championship-row > span { display: flex; min-width: 0; flex-direction: column; gap: 3px; }.championship-row strong { font-size: 11px; }.championship-row small { color: #969eac; font-size: 9px; }.championship-row select { width: 118px; margin-left: auto; padding: 8px 20px 8px 7px; color: #596476; border: 1px solid #e0e4ec; border-radius: 8px; background: white; font-size: 10px; }
.check-list, .choice-list { display: grid; gap: 8px; }.check-list label, .choice-list label { padding: 13px; display: flex; align-items: center; gap: 10px; border: 1px solid #e8ebf1; border-radius: 10px; color: #646e7e; font-size: 12px; }.check-list input, .choice-list input { accent-color: var(--blue); }
.validation-note { margin: 12px 0 0; padding: 10px 11px; border: 1px solid #edc6c6; border-radius: 9px; background: #fff7f7; color: #a45151; font-size: 11px; line-height: 1.45; }.validation-note[hidden] { display: none; }
.progress-bar { height: 5px; margin-top: 28px; overflow: hidden; border-radius: 5px; background: #edf0f5; }.progress-bar span { height: 100%; display: block; border-radius: inherit; background: var(--blue); transition: width .2s; }
.review-summary { margin: 20px 0 24px; padding: 14px 16px; display: grid; grid-template-columns: 1fr 1.5fr; gap: 7px 10px; border-radius: 13px; background: #f5f7fb; }.review-summary > span { color: #9ba3b2; font-size: 11px; }.review-summary > strong { color: #5d6678; font-size: 11px; }.summary-team { grid-column: 1 / -1; padding-top: 12px; margin-top: 6px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px 10px; border-top: 1px solid #e4e8f1; }.summary-team > strong { grid-column: 1 / -1; color: #596476; font-size: 11px; }.summary-team.incomplete > strong { color: #a45151; }.summary-team-status { display: block; margin-top: 3px; color: #3a947d; font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }.summary-team.incomplete .summary-team-status { color: #b45a5a; }.summary-team > span { display: flex; flex-direction: column; gap: 2px; color: #5d6678; font-size: 10px; }.summary-team > span small { color: #9ba3b2; font-size: 9px; }
.success-mark { width: 50px; height: 50px; margin: 2px 0 20px; display: grid; place-items: center; border-radius: 16px; background: #e3f4ee; color: #3a947d; font-size: 25px; }.blue-success { background: #e9efff; color: var(--blue); }
.team-detail-head { margin: 21px 0; display: flex; align-items: center; gap: 12px; }.team-detail-head > div { display: flex; flex-direction: column; gap: 4px; }.team-detail-head strong { font-size: 13px; }.team-detail-head span { color: #929aa8; font-size: 10px; }.schedule-card { margin-bottom: 24px; padding: 18px; border-radius: 14px; background: #f3f6fc; }.schedule-card .overline { color: #7184af; }.schedule-card h3 { margin-bottom: 8px; font-size: 19px; letter-spacing: -.03em; }.schedule-card p:last-child { margin: 0; color: #8992a3; font-size: 11px; line-height: 1.5; }
.field-label { display: grid; gap: 7px; margin-bottom: 15px; color: #858d9c; font-size: 10px; letter-spacing: .08em; font-weight: 800; text-transform: uppercase; }.field-label select, .field-label textarea { width: 100%; padding: 11px 12px; color: #4f596a; border: 1px solid #e0e4ec; border-radius: 9px; background: white; font-size: 12px; letter-spacing: 0; text-transform: none; }.field-label textarea { min-height: 100px; resize: vertical; }.field-label textarea::placeholder { color: #b8bec8; }
.compact-status { margin: 0 0 23px; }.compact-status p { color: #a1a8b4; }
.unavailable-card { margin: 24px 0; padding: 16px; display: flex; align-items: center; gap: 11px; border-radius: 13px; background: #f5f7fa; }.unavailable-card > span { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 9px; background: #e8edf5; color: #7b879d; }.unavailable-card div { display: flex; flex-direction: column; gap: 4px; }.unavailable-card strong { font-size: 12px; }.unavailable-card small { color: #9da5b2; font-size: 10px; }
.profile-card { margin: 23px 0 9px; padding: 15px; display: flex; align-items: center; gap: 12px; border-radius: 13px; background: #f5f7fb; }.avatar.large { width: 42px; height: 42px; }.profile-card div { display: flex; flex-direction: column; gap: 4px; }.profile-card strong { font-size: 12px; }.profile-card small { color: #929aa8; font-size: 10px; }.vote-options { display: grid; gap: 9px; margin: 20px 0 18px; }.vote-options button { padding: 15px; display: flex; justify-content: space-between; align-items: center; text-align: left; border: 1px solid var(--line); border-radius: 12px; background: white; }.vote-options button:hover { border-color: #c7d4f4; background: #fafcff; }.vote-options strong { font-size: 12px; }.vote-options span { color: #939cab; font-size: 10px; }.vote-confirmed { padding: 22px; display: grid; place-items: center; gap: 6px; border-radius: 13px; background: #fff8ee; color: #ba773b; }.vote-confirmed span { font-size: 31px; }.vote-confirmed strong { font-size: 13px; }.vote-confirmed small { color: #a58c76; font-size: 10px; }
@media (min-width: 760px) { .page { padding-top: 80px; }.topbar { height: 88px; }.hero-card { min-height: 430px; }.hero-content { min-height: 430px; padding: 34px 42px 31px; }.event-switcher { max-width: 620px; }.page-home .event-switcher { max-width: 100%; } }

@media (max-width: 620px) {
  .topbar { height: 67px; padding: 0 18px; }
  .brand img { width: 82px; }
  .brand { font-size: 10px; gap: 8px; }
  .role-pill { padding: 8px 9px; font-size: 11px; }
  .role-icon { display: none; }
  .avatar { width: 31px; height: 31px; }
  .page { width: min(100% - 30px, 1030px); padding-top: 46px; }
  .page-home, .spectator-page { padding-top: 24px; }
  .page-intro { margin-bottom: 28px; }
  .page-intro.compact { margin-bottom: 25px; }
  h1 { font-size: 42px; }
  .lede { font-size: 13px; line-height: 1.55; }
  .hero-card, .hero-content { min-height: 350px; }
  .hero-content { padding: 23px 22px 21px; }
  .hero-card h2 { font-size: 43px; }
  .hero-date { font-size: 10px; }
  .hero-location { font-size: 12px; }
  .hero-bottom { font-size: 11px; }
  .circle-arrow { width: 38px; height: 38px; }
  .focus-section { margin-top: 44px; }
  .section-heading h3 { font-size: 24px; }
  .quick-links { margin-top: 24px; }
  .link-row { grid-template-columns: repeat(2, 1fr); }
  .link-row button, .link-row a { min-height: 82px; padding: 12px 8px; grid-template-columns: 25px 1fr; column-gap: 7px; }
  .link-row button > span, .link-row a > span { width: 25px; height: 25px; }
  .link-row b { font-size: 10px; }
  .link-row small { font-size: 9px; }
  .free-access-card { align-items: flex-start; flex-direction: column; gap: 15px; padding: 18px; }
  .free-access-card h2 { font-size: 20px; }
  .free-access-card .primary-button { width: 100%; justify-content: center; }
  .directory-meta { align-items: flex-start; flex-direction: column; gap: 5px; }
  .directory-filter { flex: 1 1 auto; justify-content: center; }
  .directory-row { grid-template-columns: 40px minmax(0, 1fr); align-items: start; gap: 10px; padding: 12px; }
  .directory-thumb { width: 40px; height: 54px; }
  .directory-row-meta { flex-direction: column; align-items: flex-start; gap: 4px; }
  .directory-row h2 { font-size: 17px; }
  .directory-row-actions { grid-column: 1 / -1; min-width: 0; width: 100%; align-items: stretch; padding-top: 10px; border-top: 1px solid #eef0f4; }
  .directory-primary { width: 100%; }
  .directory-row-actions .directory-watch { min-height: 30px; justify-content: center; }
  .partner-placeholder { align-items: flex-start; flex-direction: column; gap: 12px; margin-top: 24px; }
  .coach-tools { align-items: flex-start; flex-direction: column; }
  .bottom-nav { bottom: 12px; height: 65px; width: calc(100% - 26px); }
  .modal-backdrop { padding: 14px; align-items: end; }
  .modal { max-height: calc(100vh - 28px); padding: 23px 20px; border-radius: 21px 21px 14px 14px; }
  .modal h2 { font-size: 24px; }
  .modal-actions { margin-top: 18px; }
  .conversation { margin-top: 32px; }
}

/* Event-first spectator view: one screen, one status, then quiet utilities. */
.spectator-page { width: min(100% - 44px, 1120px); max-width: 1120px; padding-top: 36px; padding-bottom: calc(160px + env(safe-area-inset-bottom)); }
.spectator-display { position: relative; overflow: hidden; margin-top: 14px; padding: 24px; border-radius: 22px; color: #fff; background: linear-gradient(135deg, #16274a, #0b1629); box-shadow: 0 22px 60px rgba(22, 34, 61, .18); }
.spectator-display.canonical-fan-zone { overflow: visible; margin-top: 12px; padding: 0; border-radius: 0; color: inherit; background: transparent; box-shadow: none; }
.spectator-display.canonical-fan-zone:before { display: none; }
.spectator-display:before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 85% 10%, rgba(111, 143, 244, .35), transparent 34%), linear-gradient(120deg, transparent 45%, rgba(255, 255, 255, .05)); pointer-events: none; }
.spectator-display.crimson { background: linear-gradient(135deg, #5c2d43, #171d32); }
.spectator-display.pine { background: linear-gradient(135deg, #24544d, #111d2c); }
.spectator-display.violet { background: linear-gradient(135deg, #514581, #161c31); }
.spectator-display.ocean { background: linear-gradient(135deg, #2c637a, #111e2c); }
.spectator-display.canonical-fan-zone { background: transparent; }
.spectator-display > * { position: relative; z-index: 1; }
.spectator-display-top, .spectator-section-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.spectator-display h2 { max-width: 520px; margin: 7px 0 0; font-size: clamp(25px, 4vw, 42px); line-height: 1; letter-spacing: -.05em; }
.display-status, .activity-pill { display: inline-flex; align-items: center; border-radius: 999px; padding: 7px 10px; font-size: 10px; font-weight: 850; letter-spacing: .08em; white-space: nowrap; }
.display-status.connected, .activity-pill.connected { background: #b2f1d5; color: #14573e; }
.display-status.preview, .activity-pill.preview { background: #ffe0a3; color: #63440b; }
.display-status.local-demo { background: #ffe0a3; color: #63440b; }
.display-status.stale { background: #ffd0a3; color: #683e11; }
.display-status.disconnected, .activity-pill.disconnected { background: #ffffff22; color: #d8e1eb; }
.spectator-now { margin-top: 28px; padding: 20px; border: 1px solid #ffffff2a; border-radius: 16px; background: #07142566; }
.spectator-kicker { color: #9bb6d2; font-size: 10px; letter-spacing: .14em; font-weight: 850; }
.spectator-now strong { display: block; margin: 11px 0 8px; font-size: clamp(34px, 7vw, 76px); line-height: .95; letter-spacing: -.06em; }
.spectator-now span, .spectator-next span { color: #c0cfdd; font-size: 13px; }
.spectator-next { display: flex; justify-content: space-between; align-items: end; gap: 18px; margin-top: 10px; padding: 17px 20px; border-radius: 16px; background: #ffffff14; }
.spectator-next strong { display: block; margin: 7px 0 3px; font-size: 23px; letter-spacing: -.03em; }
.next-mark { font-size: 30px; color: #70ece8 !important; }
.spectator-disconnected { margin-top: 28px; padding: 20px; border: 1px dashed #ffffff4c; border-radius: 16px; background: #07142555; }
.spectator-disconnected strong { display: block; margin: 0 0 7px; font-size: clamp(23px, 4vw, 34px); letter-spacing: -.04em; }
.spectator-disconnected p { max-width: 560px; margin: 0; color: #bdcad6; font-size: 13px; line-height: 1.45; }
.spectator-source { margin-top: 14px; color: #9fb1c2; font-size: 11px; line-height: 1.45; }
.spectator-vote-card { width: 100%; max-width: 640px; margin: 16px auto 0; padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border: 1px solid #c9d9ff; border-left: 4px solid var(--blue); border-radius: 16px; background: linear-gradient(120deg, #f3f7ff, #fff); box-sizing: border-box; }
.spectator-vote-copy .overline { margin-bottom: 7px; color: #4a68ac; }
.local-preview-dot { display: inline-block; width: 6px; height: 6px; margin: 0 3px 1px; border-radius: 50%; background: #7695e8; }
.spectator-vote-copy h2 { margin: 0; font-size: clamp(23px, 3vw, 34px); line-height: 1; }
.spectator-vote-program { margin: 5px 0 8px; color: #556a9a; font-size: 13px; font-weight: 700; }
.spectator-vote-tally { display: flex; align-items: baseline; gap: 7px; margin: 2px 0 7px; }
.spectator-vote-tally strong { color: var(--blue); font-size: clamp(23px, 4vw, 34px); line-height: 1; font-variant-numeric: tabular-nums; }
.spectator-vote-tally span { color: #7180a0; font-size: 10px; font-weight: 700; }
.spectator-vote-status { color: #6f7d98; font-size: 11px; }
.spectator-vote-action { display: grid; gap: 6px; justify-items: end; flex: 0 0 auto; }
.on-floor-vote { min-height: 48px; padding: 0 18px; border-radius: 11px; background: var(--blue); color: #fff; font-size: 12px; font-weight: 800; }
.on-floor-vote:hover { background: #1749af; }
.on-floor-vote:disabled { cursor: not-allowed; background: #aeb8cb; }
.spectator-vote-action small { color: #8c96a8; font-size: 10px; }
.spectator-vote-card--unavailable, .spectator-vote-card--closed { border-color: #e3e7ef; border-left-color: #aab4c6; background: #fafbfe; }
.schedule-votes-panel { width: 100%; max-width: 820px; margin: 22px auto 0; padding: 20px 0 8px; border-top: 1px solid var(--line); }
.schedule-votes-panel > summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 56px; padding: 8px 4px; cursor: pointer; list-style: none; font-size: 18px; font-weight: 800; color: var(--ink); }
.schedule-votes-panel > summary::-webkit-details-marker { display: none; }
.schedule-votes-panel > summary svg { flex: 0 0 20px; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.schedule-votes-panel[open] > summary svg { transform: rotate(180deg); }
.schedule-votes-panel > summary svg { transition: transform 180ms ease-out; }
.schedule-votes-panel[open] > .schedule-sort { animation: schedule-reveal 180ms ease-out; }
@keyframes schedule-reveal { from { opacity: .4; transform: translateY(-3px); } to { opacity: 1; transform: translateY(0); } }
.spectator-page .schedule-sort button, .spectator-page .my-team-toggle,
.spectator-page .canonical-action, .spectator-page .utility-card, .spectator-page .on-floor-vote {
  transition: background-color 160ms ease-out, border-color 160ms ease-out, box-shadow 160ms ease-out, transform 120ms ease-out;
}
.spectator-page .my-team-toggle:active, .spectator-page .canonical-action:active,
.spectator-page .on-floor-vote:not(:disabled):active { transform: translateY(1px); }
@media (prefers-reduced-motion: reduce) {
  .schedule-votes-panel > summary svg, .spectator-page .schedule-sort button,
  .spectator-page .my-team-toggle, .spectator-page .canonical-action,
  .spectator-page .utility-card, .spectator-page .on-floor-vote { transition: none; }
  .schedule-votes-panel[open] > .schedule-sort, .modal { animation: none; }
  .spectator-page .my-team-toggle:active, .spectator-page .canonical-action:active,
  .spectator-page .on-floor-vote:not(:disabled):active { transform: none; }
}
.schedule-votes-note { margin: 0 0 12px; color: #66738a; font-size: 12px; }
.schedule-source-note a { color: #1954aa; text-decoration: underline; text-underline-offset: 3px; }
.schedule-source-note { font-size: 13px; line-height: 1.5; color: #526078; }
.schedule-search { margin: 12px 0 18px; }
.schedule-search label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 700; }
.schedule-search > div { display: flex; gap: 8px; }
.schedule-search input { min-width: 0; flex: 1; border: 1px solid #a2adc0; border-radius: 10px; min-height: 44px; padding: 9px 12px; font: inherit; font-size: 16px; }
.schedule-search button { min-height: 44px; border: 1px solid #a2adc0; border-radius: 10px; padding: 8px 12px; background: white; color: #1954aa; font-weight: 700; }
.schedule-search :focus-visible { outline: 3px solid #2863c6; outline-offset: 2px; }
.spectator-vote-card.spectator-vote-card--preevent { grid-template-columns: minmax(0,1fr); }
.spectator-vote-card--preevent p { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: #526078; }
.spectator-staff-entry { margin: 8px 0 0; text-align: right; }
.spectator-staff-entry a { display: inline-flex; align-items: center; min-height: 44px; color: #53637d; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.schedule-votes-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.schedule-votes-heading h2 { margin: 0; font-size: 22px; letter-spacing: -.03em; }
.schedule-votes-heading small { color: #8c96a8; font-size: 11px; text-align: right; }
.schedule-votes-loading { color: #8c96a8; padding: 14px 0; font-size: 12px; }
.photo-upload-preview { display: block; width: 100%; max-height: 180px; object-fit: contain; border-radius: 12px; background: #081a36; border: 1px solid #6d91c733; margin-top: 8px; }
.checkbox-label { display: flex; gap: 9px; align-items: flex-start; color: #828a99; font-size: 12px; line-height: 1.45; margin: 10px 0; text-transform: none; letter-spacing: 0; font-weight: 500; }
.checkbox-label input { margin-top: 3px; accent-color: #3e7bff; }
.schedule-vote-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) 112px 170px; gap: 12px; align-items: center; padding: 12px 8px; border-bottom: 1px solid var(--line); }
.schedule-vote-row.current { background: #eefaf5; border-left: 3px solid #27a36a; padding-left: 5px; }
.schedule-vote-row .position { color: var(--blue); font-weight: 800; font-variant-numeric: tabular-nums; }
.schedule-vote-row .identity { display: grid; gap: 2px; min-width: 0; color: var(--ink); }
.schedule-vote-row .identity small, .schedule-vote-row .identity strong { overflow-wrap: anywhere; }
.schedule-vote-row .identity small { color: #59657a; font-size: 11px; }
.schedule-vote-row .identity strong { font-size: 14px; }
.schedule-vote-row .time { color: #59657a; font-size: 12px; font-variant-numeric: tabular-nums; }
.schedule-vote-row .total { display: grid; gap: 2px; text-align: right; }
.schedule-vote-row .total strong { font-size: 13px; }
.schedule-vote-row .total small { color: #59657a; font-size: 10px; }
.schedule-vote-row .status-final { color: #9b6b00; }
.schedule-vote-row .status-open, .schedule-vote-row .current-label { color: #168153; }
.schedule-vote-row .status-unavailable { color: #59657a; }
.schedule-vote-row:has(.my-team-toggle) { grid-template-columns: 32px minmax(0,1fr) 76px 100px 144px; gap: 10px; }
.my-team-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 144px; max-width: 100%; min-height: 44px; padding: 8px; border: 1px solid #bac7dc; border-radius: 10px; background: #fff; color: #314967; font-size: 12px; font-weight: 700; line-height: 1.3; }
.my-team-toggle svg { width: 16px; height: 16px; flex: 0 0 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.my-team-toggle[aria-pressed="true"] { color: #1749af; background: #edf3ff; }
.my-team-toggle:focus-visible { outline: 3px solid #175bd9; outline-offset: 3px; }
.my-teams-empty { padding: 14px 0; color: #53637d; }
.schedule-vote-row .identity .team-classification { margin-top: 3px; font-size: 12px; line-height: 1.5; }
.schedule-vote-row.personal-schedule-row:has(.my-team-toggle) { grid-template-columns: 32px minmax(0,1fr) 100px 144px; }
.schedule-presence { display: block; margin-top: 4px; color: #168153; font-weight: 700; }
.my-teams-empty button { min-height: 44px; padding: 8px 16px; border-radius: 10px; color: #1749af; background: #edf3ff; font-weight: 750; }
@media(max-width:620px) {
  .schedule-vote-row:has(.my-team-toggle) { grid-template-columns: 26px minmax(0,1fr); gap: 6px 8px; }
  .schedule-vote-row:has(.my-team-toggle) .identity { grid-column: 2; grid-row: 1; }
  .schedule-vote-row:has(.my-team-toggle) .my-team-toggle { grid-column: 2; grid-row: 4; justify-self: start; }
  .schedule-vote-row:has(.my-team-toggle) .time { grid-column: 2; grid-row: 2; }
  .schedule-vote-row:has(.my-team-toggle) .total { grid-column: 2; grid-row: 3; flex-wrap: wrap; }
  .schedule-vote-row.personal-schedule-row:has(.my-team-toggle) { grid-template-columns: 26px minmax(0,1fr); }
  .schedule-vote-row.personal-schedule-row:has(.my-team-toggle) .my-team-toggle { grid-row: 3; }
}
.spectator-vote-card--unavailable strong { display: block; margin-bottom: 4px; font-size: 14px; }
.texas-trivia-card{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:18px;margin:10px auto 0;width:100%;max-width:640px;padding:16px 18px;border:1px solid #c9d7f0;border-radius:14px;background:linear-gradient(135deg,#f6f8ff,#eef4ff);color:#142c55}
.texas-trivia-card .overline{margin:0 0 5px;color:#5876b4;font-size:9px;letter-spacing:.12em}
.texas-trivia-card h2{margin:0;font-size:22px;letter-spacing:-.04em}.texas-trivia-card p:not(.overline){margin:5px 0 0;color:#52657a;font-size:12px;line-height:1.4}.texas-trivia-card small{display:block;margin-top:7px;color:#7a879b;font-size:10px}
.texas-trivia-card .primary-button{min-height:44px;white-space:nowrap}.texas-trivia-card .primary-button span{margin-left:6px}
.trivia-name-picker{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}.trivia-name-picker select{width:100%;min-width:0}#triviaShuffleName{margin:0 0 10px}#triviaShuffleName+.tiny-note{color:#667085;font-size:11px;line-height:1.5;margin:4px 0 16px}
.trivia-progress{height:7px;margin:7px 0 20px;border-radius:99px;background:#e5ebf7;overflow:hidden}.trivia-progress span{display:block;height:100%;border-radius:inherit;background:#175bd9;transition:width .25s ease}.trivia-question{margin:0 0 18px;color:var(--ink);font-size:clamp(21px,3vw,29px);font-weight:800;line-height:1.18;letter-spacing:-.03em}.trivia-options{display:grid;gap:8px}.trivia-options button{padding:13px 14px;border:1px solid var(--line);border-radius:11px;background:#f7f9fd;color:var(--ink);font:inherit;font-size:13px;line-height:1.35;text-align:left;cursor:pointer}.trivia-options button:hover,.trivia-options button:focus-visible{border-color:#7da0e4;background:#eef4ff}.trivia-options button:disabled{opacity:.65;cursor:wait}.trivia-score{margin:0 0 12px;color:#175bd9;font-size:24px;font-weight:850;font-variant-numeric:tabular-nums}.trivia-source{margin:12px 0 0;color:#7b879a;font-size:11px;line-height:1.4}.trivia-source a{color:#175bd9;text-underline-offset:3px}
.spectator-vote-card--unavailable small { display: block; color: #8c96a8; font-size: 11px; }
.previous-vote-list { grid-column: 1 / -1; display: grid; gap: 8px; padding-top: 14px; border-top: 1px solid #dfe7f7; }
.previous-vote-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 12px; border: 1px solid #dfe7f7; border-radius: 11px; background: #fff; }
.previous-vote-identity { min-width: 0; }
.previous-vote-row .overline { margin: 0 0 4px; color: #7185b4; font-size: 9px; }
.previous-vote-row strong, .previous-vote-row small { display: block; }
.previous-vote-row strong { font-size: 13px; }
.previous-vote-row strong, .previous-vote-row small { overflow-wrap: normal; word-break: normal; }
.previous-vote-row small { margin-top: 3px; color: #7887a1; font-size: 10px; }
.previous-vote-tally { display: block; margin-top: 5px; color: var(--blue); font-size: 10px; font-weight: 800; font-variant-numeric: tabular-nums; }
.previous-vote-button { min-width: 0; min-height: 44px; padding: 8px 12px; border: 1px solid #9eb5e8; border-radius: 9px; background: #f5f8ff; color: #214fae; font-size: 11px; font-weight: 800; line-height: 1.3; white-space: normal; overflow-wrap: anywhere; }
.previous-vote-button:disabled { cursor: not-allowed; border-color: #d9dfec; background: #f3f5f9; color: #929caf; }
.ranking-link { margin-top: 12px; padding: 0; background: transparent; color: var(--blue); font-size: 11px; font-weight: 800; }
.ranking-link svg { width: 13px; height: 13px; margin-left: 3px; vertical-align: -2px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.display-mode-toggle { margin-top: 18px; padding: 9px 12px; border: 1px solid #ffffff35; border-radius: 10px; background: #ffffff12; color: #e8f1f7; font-size: 11px; font-weight: 800; }
.display-mode-toggle:hover { background: #ffffff1e; }
.spectator-participation, .spectator-utilities { margin-top: 28px; padding: 22px 0; border-top: 1px solid var(--line); background: transparent; }
.canonical-fan-zone { padding-bottom: 0; }
.canonical-preview-shell { position: relative; width: 100%; max-width: 640px; aspect-ratio: 16 / 9; margin-inline: auto; overflow: hidden; border-radius: 14px; background: #06121e; }
.fan-zone-canonical-frame { display: block; width: 100%; height: 100%; min-height: 0; margin-top: 0; border: 0; border-radius: inherit; background: #06121e; overflow: hidden; transform-origin: top left; }
.canonical-fan-zone .spectator-source { display: none; }
.canonical-actions { margin-top: 22px; padding: 18px 0 0; border-top: 1px solid rgba(255,255,255,.16); }
.canonical-actions-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.canonical-actions-head .overline { margin-bottom: 0; color: #b9c9dc; }
.canonical-actions-head h2 { margin: 4px 0 0; color: #fff; font-size: 22px; letter-spacing: -.04em; }
.canonical-actions-head > span { color: #e7c889; font-size: 9px; font-weight: 850; letter-spacing: .1em; }
.canonical-action-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 13px; }
.canonical-action { min-height: 69px; padding: 12px 13px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 5px; border: 1px solid rgba(255,255,255,.2); border-radius: 12px; background: rgba(255,255,255,.08); color: #fff; text-align: left; text-decoration: none; }
.canonical-action:hover { border-color: rgba(255,255,255,.52); background: rgba(255,255,255,.14); }
.canonical-action strong { font-size: 12px; }
.canonical-action small { color: #bdccda; font-size: 10px; line-height: 1.3; }
.canonical-action.watch-action small { color: #a7f0dc; }
.join-fun { margin-top: 22px; padding: 18px 0 0; border-top: 1px solid var(--line); background: transparent; }
.join-fun .canonical-actions-head .overline { color: var(--blue); }
.join-fun .canonical-actions-head h2 { color: var(--ink); }
.join-fun .canonical-actions-head > span { color: #7f8fbd; }
.join-fun .canonical-action-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.join-fun-secondary .canonical-action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.join-fun .canonical-action { min-height: 86px; border-color: var(--line); background: #f7f8fc; color: var(--ink); }
.join-fun .canonical-action:hover { border-color: #9db3e5; background: #fff; }
.join-fun .canonical-action small { color: #929aaa; }
.shoutout-receipts { margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--line); }
.shoutout-receipts .overline { margin-bottom: 7px; color: #7f8fbd; }
.shoutout-receipts ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.shoutout-receipts li { display: grid; gap: 3px; color: #59647a; font-size: 11px; }
.receipt-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; min-width: 0; }
.receipt-author { color: #33415e; font-size: 11px; }
.receipt-text { min-width: 0; overflow-wrap: anywhere; }
.receipt-status { color: #7b879a; font-weight: 800; white-space: nowrap; }
.receipt-status--approved { color: #2f8761; }
.receipt-status--hidden { color: #a15f6d; }
.shoutout-receipts > small { display: block; margin-top: 7px; color: #9aa2af; font-size: 10px; }
.spectator-section-head h2 { margin: 7px 0 0; font-size: 24px; letter-spacing: -.04em; }
.spectator-shoutouts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }
.spectator-shoutouts article { padding: 15px; border-radius: 14px; background: #f7f8fc; }
.spectator-shoutouts span { color: #7f8fbd; font-size: 9px; letter-spacing: .12em; font-weight: 850; }
.spectator-shoutouts p { margin: 9px 0 7px; color: #4d5870; font-size: 16px; font-weight: 800; }
.spectator-shoutouts small { color: #969eac; font-size: 11px; }
.spectator-empty { margin: 20px 0 0; padding: 15px; border-radius: 13px; background: #f7f8fb; color: #8c95a4; font-size: 12px; }
.participation-note { display: flex; gap: 10px; align-items: baseline; margin-top: 17px; padding-top: 15px; border-top: 1px solid var(--line); color: #929aaa; font-size: 11px; }
.participation-note strong { color: #56627a; }
.spectator-utility-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin-top: 12px; }
.spectator-utility-links a, .spectator-utility-links button { display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; text-decoration: none; }
.spectator-utility-links svg { flex: 0 0 23px; width: 23px; height: 23px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.spectator-utility-links button { font: inherit; text-align: left; color: var(--muted); background: transparent; cursor: default; }
.spectator-utility-links a:hover { border-color: #9db3e5; background: #fafcff; }
.spectator-utility-links strong, .spectator-utility-links small { display: block; }
.spectator-utility-links strong { font-size: 12px; }
.my-next-team { color: #175bd9; font-size: 10px; font-weight: 750; letter-spacing: .02em; }
.spectator-utility-links small { margin-top: 8px; color: #929aaa; font-size: 10px; line-height: 1.35; }
.spectator-utility-note { margin: 13px 0 0; color: #929aaa; font-size: 11px; }
.modal .field-label input { width: 100%; margin-top: 7px; padding: 12px 13px; border: 1px solid var(--line); border-radius: 11px; background: #fff; color: var(--ink); font: inherit; box-sizing: border-box; }
.form-status { min-height: 18px; margin: 10px 0 0; color: #58709c; font-size: 11px; line-height: 1.4; }
.modal-receipts { margin-top: 17px; padding: 13px; border-radius: 12px; background: #f6f8fc; }
.modal-receipts .overline { margin-bottom: 8px; color: #7f8fbd; }
.modal-receipts p { margin: 8px 0 0; color: #657088; font-size: 11px; }
.modal-receipts p:first-of-type { margin-top: 0; }
.modal-receipts strong, .modal-receipts span { display: block; }
.modal-receipts strong { color: #3b5e9e; }
.modal-receipts span { margin-top: 3px; overflow-wrap: anywhere; }
.ranking-list { display: grid; gap: 7px; margin: 18px 0 0; padding: 0; list-style: none; }
.ranking-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 11px 12px; border: 1px solid var(--line); border-radius: 11px; background: #fafbfe; }
.ranking-position { color: var(--blue); font-size: 12px; font-weight: 850; }
.ranking-identity { min-width: 0; }
.ranking-identity strong, .ranking-identity b, .ranking-identity small { display: block; }
.ranking-identity strong { color: #7a8496; font-size: 10px; font-weight: 700; }
.ranking-identity b { margin-top: 2px; color: var(--ink); font-size: 12px; overflow-wrap: anywhere; }
.ranking-identity small { margin-top: 4px; color: #9aa2af; font-size: 10px; }
.ranking-total { text-align: right; }
.ranking-total strong, .ranking-total small { display: block; }
.ranking-total strong { color: var(--blue); font-size: 14px; }
.ranking-total small { color: #98a0af; font-size: 10px; }
.ranking-empty, .ranking-loading { margin-top: 17px; padding: 14px; border-radius: 11px; background: #f6f8fc; color: #8b95a7; font-size: 12px; }
@media (max-width: 620px) {
  .spectator-display { padding: 19px; border-radius: 18px; }
  .spectator-display.canonical-fan-zone { padding: 0; border-radius: 0; }
  .spectator-display-top, .spectator-section-head { display: block; }
  .display-status, .activity-pill { margin-top: 13px; }
  .spectator-now { margin-top: 25px; padding: 18px; }
  .spectator-now strong { font-size: 47px; }
  .spectator-next { align-items: start; padding: 15px; }
  .spectator-next strong { font-size: 20px; }
  .spectator-shoutouts { grid-template-columns: 1fr; }
  .spectator-participation, .spectator-utilities { padding: 16px 0; }
  .page.spectator-page { padding-bottom: calc(154px + env(safe-area-inset-bottom)); }
  .canonical-preview-shell { border-radius: 12px; }
  .canonical-actions { margin-top: 15px; padding-top: 15px; }
  .canonical-actions-head { display: block; }
  .canonical-actions-head > span { display: inline-flex; margin-top: 9px; }
  .canonical-action-grid { grid-template-columns: 1fr; }
  .canonical-action { min-height: 56px; }
  .join-fun { padding: 16px 0 0; }
  .join-fun .canonical-action-grid { grid-template-columns: 1fr; }
  .join-fun-secondary .canonical-action-grid { grid-template-columns: 1fr; }
  .spectator-vote-card { display: grid; gap: 14px; }
  .schedule-votes-heading { display: block; }
  .schedule-votes-heading small { display: block; margin-top: 4px; text-align: left; }
  .schedule-vote-row { grid-template-columns: 28px minmax(0, 1fr) 86px; gap: 8px; padding: 11px 4px; }
  .schedule-vote-row .total { grid-column: 2 / -1; display: flex; gap: 8px; text-align: left; align-items: baseline; }
  .schedule-vote-row .identity strong { font-size: 13px; }
  .spectator-vote-action { justify-items: stretch; }
  .on-floor-vote { width: 100%; }
  .previous-vote-row { grid-template-columns: 1fr; align-items: stretch; }
  .previous-vote-button { width: 100%; }
  .spectator-utility-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .texas-trivia-card{grid-template-columns:1fr;gap:12px;padding:15px}.texas-trivia-card .primary-button{width:100%}
}
@media (min-width: 621px) and (max-width: 900px) {
  .canonical-preview-shell { max-width: none; margin-inline: 0; }
}
.spectator-event-top{display:flex;align-items:center;gap:12px;max-width:640px;margin:0 auto 12px;width:100%}
.spectator-event-top .event-switcher{flex:1;min-width:0;margin:0}
.spectator-watch-live{display:flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap;min-height:44px;padding:0 14px;border-radius:12px;background:#175bd9;color:white;font-size:13px;font-weight:750;text-decoration:none}
.spectator-watch-live svg{width:16px;height:16px}
@media(max-width:440px){.spectator-event-top{gap:8px}.spectator-watch-live{padding:0 10px;font-size:12px}.spectator-event-top .event-switcher{padding-right:30px}.spectator-event-top .event-date{font-size:9px}}
.submission-confirmation{display:grid;gap:12px;padding:18px 0 24px}
.receipt-photo{display:block;width:100%;max-height:260px;object-fit:contain;border-radius:12px;background:#e8eef5}
.receipt-message{margin:0;font-size:clamp(21px,3vw,28px);font-weight:750;line-height:1.25;overflow-wrap:anywhere}
.receipt-sender{margin:0;font-size:15px;color:#52657a;line-height:1.4;overflow-wrap:anywhere}
.shoutout-receipts li{display:grid;gap:8px}
.shoutout-receipts .receipt-photo{max-height:180px}
.shoutout-receipts .receipt-text{display:block;line-height:1.35}
/* Spectator-only compact hierarchy. The canonical arena canvas is unchanged. */
body:has(.spectator-page) .topbar{height:56px;padding-inline:22px}
.page.spectator-page{padding-top:14px;padding-bottom:calc(36px + env(safe-area-inset-bottom))}
.spectator-event-top{margin-bottom:8px}
.fan-zone-sponsor{max-width:640px;margin:6px auto 10px;display:flex;align-items:center;justify-content:center;gap:12px}
.fan-zone-sponsor p{margin:0;color:#52657a;font-size:12px;line-height:1.5;max-width:160px}
.fan-zone-sponsor strong{display:block;color:#142c55;font-size:16px;font-weight:750}
.fan-zone-sponsor a{display:block;flex:0 1 400px;min-width:0;border-radius:10px;overflow:hidden;line-height:0}
.fan-zone-sponsor a:focus-visible{outline:3px solid #175bd9;outline-offset:4px}
.fan-zone-sponsor img{display:block;width:100%;height:auto;aspect-ratio:4/1;object-fit:contain}
@media(max-width:480px){.fan-zone-sponsor{flex-direction:column;gap:4px;margin:6px auto 10px}.fan-zone-sponsor p{max-width:none;font-size:11px}.fan-zone-sponsor strong{display:inline;font-size:inherit}.fan-zone-sponsor a{flex:none;width:100%;max-width:360px}}
/* On wide screens sponsorship shares the existing masthead rather than
   inserting a second full-height banner row between event and participation. */
@media(min-width:760px){
  body:has(.fan-zone-sponsor) .topbar{height:56px}
  .fan-zone-sponsor{position:absolute;top:3px;right:22px;width:348px;max-width:calc(100% - 240px);margin:0;justify-content:flex-end;gap:12px}
  .fan-zone-sponsor p{flex:0 1 136px;font-size:11px;max-width:136px}
  .fan-zone-sponsor strong{font-size:14px}
  .fan-zone-sponsor a{flex:0 1 200px}
}
.spectator-event-top{position:relative;padding-bottom:0}
.spectator-event-top .event-switcher{grid-template-rows:auto auto;row-gap:2px}
.spectator-share{flex:0 0 44px;display:grid;place-items:center;width:44px;min-height:44px;padding:10px;border-radius:12px;background:#eaf0ff;color:#1749af}
.spectator-share svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.spectator-share:disabled{opacity:.55;cursor:wait}
.share-notice{position:absolute;right:0;top:100%;z-index:2;font-size:12px;color:#1749af;background:white;border-radius:5px;padding:2px 6px}
.share-notice:empty{display:none}
.share-link-input{display:block;width:100%;box-sizing:border-box;margin:10px 0 16px;padding:12px;border:1px solid #b9c9e5;border-radius:9px;font:inherit;font-size:14px}
.spectator-event-top .event-switcher{min-height:50px;padding-block:6px}
.spectator-display.canonical-fan-zone{margin-top:8px}
.spectator-vote-card{padding:12px 14px;margin-top:10px;gap:10px;display:grid;grid-template-columns:minmax(0,1fr) auto}
.spectator-vote-copy{min-width:0}.spectator-vote-copy h2{font-size:clamp(19px,2.6vw,28px);line-height:1.12;overflow-wrap:break-word}
.spectator-vote-copy .overline{font-size:9px;margin-bottom:4px;letter-spacing:.09em}
.spectator-vote-program{margin:3px 0 5px;font-size:12px}.spectator-vote-tally{margin-bottom:4px}.spectator-vote-tally strong{font-size:24px}
.spectator-vote-status{font-size:12px}.spectator-vote-action{max-width:165px}.on-floor-vote{min-height:44px;padding:8px 12px}
.voting-rules{grid-column:1/-1;border-top:1px solid #dfe7f7;margin-top:2px;padding-top:9px}
.voting-rules summary{cursor:pointer;color:var(--blue);font-size:11px;font-weight:850;list-style:none}
.voting-rules summary::-webkit-details-marker{display:none}
.voting-rules summary::after{content:'+';float:right;font-size:15px;line-height:1;font-weight:700}
.voting-rules[open] summary::after{content:'−'}
.voting-rules-copy{margin-top:8px;padding:10px 12px;border-radius:10px;background:#f7f9fd;color:#59657a;font-size:11px;line-height:1.45}
.voting-rules-copy p{margin:0 0 6px;color:var(--ink);font-weight:750}
.voting-rules-copy ul{margin:0;padding-left:17px}.voting-rules-copy li+li{margin-top:4px}
.join-fun-secondary{width:100%;max-width:640px;margin:8px auto 0;padding:0;border:0}
.join-fun-secondary .canonical-action-grid{grid-template-columns:1fr;margin:0}
.join-fun-secondary .canonical-action{min-height:50px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;padding:9px 14px;background:#eaf0ff;border:0;color:#1749af}
.join-fun-secondary .canonical-action strong{font-size:15px}.join-fun-secondary .canonical-action small{grid-column:1;font-size:11px;color:#52657a}.join-fun-secondary .canonical-action svg{width:24px;height:24px;grid-column:2;grid-row:1/3;fill:none;stroke:currentColor;stroke-width:1.6}
.schedule-sort{display:flex;gap:4px;padding:4px;background:#eaf0ff;border-radius:12px;margin:10px 0}.schedule-sort button{flex:1;min-height:44px;padding:8px 12px;border-radius:9px;background:transparent;color:#52657a;font-weight:750}.schedule-sort button[aria-pressed=true]{background:white;color:#1749af;box-shadow:0 2px 7px #142c5514}
.event-performances{max-width:640px;margin:14px auto}.event-performances>button,.event-performances>a{width:100%;min-height:48px;padding:10px 14px;border-radius:12px}.event-performances>button{background:#edf0f6;color:#737e94;cursor:not-allowed;text-align:left;font-weight:750}.event-performances small{display:block;font-size:11px;font-weight:500;margin-top:3px}
@media(max-width:440px){.spectator-page{width:calc(100% - 28px)}.spectator-vote-card{grid-template-columns:minmax(0,1fr) 120px}.spectator-vote-action{width:120px}.spectator-vote-action .on-floor-vote{font-size:12px}.spectator-event-top .event-switcher{padding-inline:10px}.previous-vote-row{grid-template-columns:minmax(0,1fr) auto}.previous-vote-button{max-width:120px}.spectator-event-top .event-date{font-size:10px}}
/* Small, optional destinations after the event's primary actions. */
.spectator-social-links{display:flex;align-items:center;flex-wrap:wrap;gap:0 16px;margin-top:8px;color:var(--muted,#718096);font-size:12px}
.spectator-social-links a{display:inline-flex;align-items:center;min-height:44px;color:inherit;text-underline-offset:3px}
.spectator-social-links a:focus-visible{outline:2px solid #3b82f6;outline-offset:4px;border-radius:3px}
@media(max-width:480px){.spectator-social-links{gap:0 12px}.spectator-social-links>span{flex-basis:100%;padding-top:4px}}