/**
 * Toronto Ice Skating — v3 additions.
 * Loads AFTER style.css and style-additions.css.
 *
 * Everything for the 2.0 release lives here:
 *  1. Service-alert banners (closed / warning / unverified)
 *  2. Live status chips (Starts in Xm · On now · Ended)
 *  3. Paid-venue styling (gold accent, price badge, register link)
 *  4. Week-calendar view
 *  5. Locator + My-rinks + What's-new modals, scope chips, version chip
 *  6. Distance badges, source tags, location notes
 * All colors go through vars so dark mode inherits sensibly, with explicit
 * dark overrides where contrast needs help.
 */

/* ========== Tokens ========== */
:root {
    --paid: #b8860b;              /* goldenrod family — "money" without neon */
    --paid-bg: #fdf6e3;
    --alert-red: #c0392b;
    --alert-red-bg: #fdecea;
    --alert-amber: #9a6700;
    --alert-amber-bg: #fff8e1;
    --live: #1a9c4b;
}
body.dark-mode {
    --paid: #e6c35c;
    --paid-bg: #3a3220;
    --alert-red: #ff7b6b;
    --alert-red-bg: #43221e;
    --alert-amber: #ffce4d;
    --alert-amber-bg: #3d3416;
    --live: #4dd47f;
}

/* ========== 1. Alert banners on program rows ========== */
.alert-banner {
    margin-top: 8px;
    padding: 7px 10px;
    border-radius: var(--radius);
    font-size: 12px;
    line-height: 1.45;
    border: 1px solid;
}
.alert-banner.closed {
    background: var(--alert-red-bg);
    border-color: color-mix(in srgb, var(--alert-red) 45%, transparent);
    color: var(--alert-red);
}
.alert-banner.warning {
    background: var(--alert-amber-bg);
    border-color: color-mix(in srgb, var(--alert-amber) 45%, transparent);
    color: var(--alert-amber);
}
.alert-banner.unverified {
    background: var(--alert-red-bg);
    border: 2px dashed var(--alert-red);
    color: var(--alert-red);
    font-weight: 500;
}
.alert-banner a { color: inherit; font-weight: 700; }
.program-item.has-alert-closed { border-left: 3px solid var(--alert-red); }
.program-item.has-alert { border-left: 3px solid var(--alert-amber); }
.program-item.has-alert-closed .program-title { text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: color-mix(in srgb, var(--alert-red) 65%, transparent); }

/* ========== 2. Live status chips ========== */
.happening-now.live {
    background: var(--live);
    animation: pulse 2s infinite;
}
.ended-chip {
    display: inline-block;
    background: var(--bg);
    color: var(--text-muted);
    border: 1px solid var(--border);
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}
.program-item.is-live { border-left: 3px solid var(--live); }
.program-item.is-ended { opacity: 0.62; }

/* ========== 3. Paid venues ========== */
.program-item.is-paid {
    border-color: color-mix(in srgb, var(--paid) 55%, var(--border));
    background: linear-gradient(90deg, color-mix(in srgb, var(--paid) 9%, var(--bg-white)), var(--bg-white) 120px);
}
.program-item.is-paid .program-title { color: var(--paid); }

/* ========== 4. Week calendar ========== */
.cal-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.cal-label { font-size: 13px; font-weight: 600; flex: 1; }
.cal-today-btn {
    font-size: 12px;
    padding: 5px 10px;
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.cal-today-btn:hover { border-color: var(--acc-programs); }
.cal-legend { font-size: 10.5px; color: var(--text-muted); margin: 8px 2px 14px; }

/* NB: no scroll-snap here — a fresh snap container re-snaps to its first
   column on creation, which silently undid the scroll-to-today. */
.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(128px, 1fr));
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
}
.cal-day {
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    min-height: 120px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    
}
.cal-day.today {
    border-color: var(--acc-programs);
    box-shadow: inset 0 2px 0 var(--acc-programs);
}
.cal-day-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 1px solid var(--border);
    padding-bottom: 4px;
}
.cal-day-name { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
.cal-day.today .cal-day-name { color: var(--acc-programs); }
.cal-day-num { font-size: 13px; font-weight: 700; }
.cal-empty { color: var(--text-muted); font-size: 12px; text-align: center; margin-top: 10px; }

.cal-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    text-align: left;
    width: 100%;
    background: color-mix(in srgb, var(--acc-programs) 10%, var(--bg-white));
    border: 1px solid color-mix(in srgb, var(--acc-programs) 35%, var(--border));
    border-radius: 6px;
    padding: 5px 7px;
    font-size: 11px;
    cursor: pointer;
    transition: border-color 0.15s, transform 0.1s;
}
.cal-block:hover { border-color: var(--acc-programs); }
.cal-block:active { transform: scale(0.98); }
.cal-block-time { font-weight: 700; font-size: 10.5px; }
.cal-block-title { font-weight: 600; line-height: 1.25; word-break: break-word; }
.cal-block-loc {
    color: var(--text-muted);
    font-size: 10px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* ---- per-type color coding: same palette as the list's .tag badges ----
   (--ct set per type; shared with the legend dots below) */
.cal-type-hockey, .legend-dot.hockey, .c2-kind.hockey { --ct: #cc4455; }
.cal-type-figure, .legend-dot.figure, .c2-kind.figure { --ct: #5566cc; }
.cal-type-speed, .legend-dot.speed, .c2-kind.speed { --ct: #b08a3d; }
.cal-type-leisure, .legend-dot.leisure, .c2-kind.leisure { --ct: #3aa07f; }
.cal-type-adapted, .legend-dot.adapted, .c2-kind.adapted { --ct: #8855bb; }
.cal-type-ringette, .legend-dot.ringette, .c2-kind.ringette { --ct: #bb4499; }
.cal-type-other,    .legend-dot.other,    .c2-kind.other    { --ct: #c9862b; }

.cal-block { position: relative; overflow: hidden; }
.cal-block[class*="cal-type-"] {
    background: color-mix(in srgb, var(--ct) 12%, var(--bg-white));
    border-color: color-mix(in srgb, var(--ct) 45%, var(--border));
}
.cal-block[class*="cal-type-"]::before {
    content: '';
    position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    background: var(--ct);
}
.cal-block[class*="cal-type-"] .cal-block-time { color: color-mix(in srgb, var(--ct) 80%, var(--text)); }
body.dark-mode .cal-block[class*="cal-type-"] {
    background: color-mix(in srgb, var(--ct) 20%, var(--bg-white));
    border-color: color-mix(in srgb, var(--ct) 55%, var(--border));
}
body.dark-mode .cal-block[class*="cal-type-"] .cal-block-time { color: color-mix(in srgb, var(--ct) 55%, var(--text)); }

.legend-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--ct, var(--text-muted));
    margin: 0 3px 0 8px;
    vertical-align: baseline;
}

/* paid identity wins the border/price, type still shows via bar + tint */
.cal-block.cal-paid {
    background: color-mix(in srgb, var(--paid) 14%, var(--bg-white));
    border-color: color-mix(in srgb, var(--paid) 55%, var(--border));
}
.cal-block.cal-paid .cal-block-time { color: var(--paid); }
.cal-block.cal-saved { box-shadow: 0 0 0 2px color-mix(in srgb, #e0245e 55%, transparent); }
.cal-block.cal-closed { opacity: 0.75; }
.cal-block.cal-closed .cal-block-title { text-decoration: line-through; color: var(--alert-red); }
.cal-block.cal-warning { border-color: var(--alert-amber); }
.cal-block.cal-live { border-color: var(--live); box-shadow: inset 3px 0 0 var(--live); }
.cal-block.cal-ended { opacity: 0.5; }
.cal-price { color: var(--paid); font-weight: 700; }

.wn-entry { margin-bottom: 16px; }
.wn-entry h4 { font-size: 14px; margin-bottom: 6px; }
.wn-date { font-size: 11px; color: var(--text-muted); font-weight: 400; margin-left: 6px; }
.wn-entry ul { margin: 0 0 0 18px; display: flex; flex-direction: column; gap: 5px; font-size: 13px; line-height: 1.45; }

.loc-note {
    background: none;
    border: none;
    padding: 0 4px;
    font-size: 12px;
    cursor: pointer;
    vertical-align: baseline;
}
.loc-note:hover { transform: scale(1.15); }

/* schedule-only mode (both community sections hidden): the chat identity
   button is meaningless — community never even boots */
/* data-health banners sit above the list/calendar */
#data-warnings .alert-banner { margin: 0 0 8px; }

/* ========== v2.3: pro-UI pass ========== */

/* Saved chip: ♥ + live count, readable at a glance */

/* Saved rows: gentle tint + the heart already fills */
.program-item.is-saved { background: linear-gradient(90deg, color-mix(in srgb, #e0245e 6%, var(--bg-white)), var(--bg-white) 140px); }

/* Next-saved countdown card */
.saved-next {
    display: flex; align-items: center; gap: 10px;
    width: 100%; text-align: left;
    background: var(--bg-white);
    border: 1px solid color-mix(in srgb, #e0245e 45%, var(--border));
    border-left: 4px solid #e0245e;
    border-radius: var(--radius);
    padding: 9px 12px; margin: 0 0 8px;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.saved-next:hover { box-shadow: 0 0 0 3px color-mix(in srgb, #e0245e 15%, transparent); }
.saved-next-label { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.saved-next.is-live { border-left-color: var(--live); }
/* Calendar: worded legend + cancelled tag + text heart */
.cal-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; }
.legend-group { display: inline-flex; flex-wrap: wrap; gap: 4px 12px; }
.legend-item { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.legend-hint { flex-basis: 100%; color: var(--text-muted); }
.legend-sample {
    display: inline-block; width: 14px; height: 12px;
    border-radius: 3px; border: 1px solid var(--border-dark);
    background: var(--bg-white);
    font-size: 9px; line-height: 11px; text-align: center; color: var(--alert-red);
}
.legend-sample.sample-saved { box-shadow: 0 0 0 2px color-mix(in srgb, #e0245e 55%, transparent); }
.legend-sample.sample-paid { background: color-mix(in srgb, var(--paid) 25%, var(--bg-white)); border-color: var(--paid); }
.legend-sample.sample-cancelled { border-color: var(--alert-red); }
.legend-sample.sample-warning { border-color: var(--alert-amber); border-width: 2px; }
.legend-sample.sample-unverified { border-style: dashed; border-color: var(--alert-red); }
.cal-heart { color: #e0245e; font-weight: 700; }
.cal-tag {
    display: inline-block;
    background: var(--alert-red); color: #fff;
    font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
    border-radius: 3px; padding: 1px 5px; margin: 1px 0;
}
body.dark-mode .cal-tag { color: #1a1a1a; }

/* Safe areas for installed/home-screen use (notch + home indicator) */
.top-bar { padding-top: calc(10px + env(safe-area-inset-top, 0px)); }
.chat-input-bar { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
.view-panel { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }

/* ============================================================
   v2.5 — "NIGHT RINK" dark theme.
   Not spot fixes: a re-based palette + a depth system.

   Design language: an evening rink. The page is deep blue-black ice
   (never neutral grey), surfaces rise toward the viewer in cold steps
   (page → card → input-well is DARKER again, like cut ice), and the
   three panel accents (ice cyan / aurora violet / rink-light amber)
   stay visibly in play. `color-scheme: dark` hands selects, checkboxes
   and scrollbars to the OS in dark — no half-white native controls on
   any device.
   ============================================================ */

body { accent-color: var(--primary); }

body.dark-mode {
    color-scheme: dark;

    /* --- cold ice-night palette (re-bases every var the base set) --- */
    --bg: #0e141b;              /* page: deep blue-black */
    --bg-white: #18212b;        /* raised surfaces (cards, bars) */
    --border: #26323f;
    --border-dark: #38485a;
    --text: #e9eff6;
    --text-muted: #93a3b4;
    --primary: #46c6ea;         /* ice cyan */
    --primary-dark: #2fb4da;
    --bubble-mine: #163a4d;     /* my messages: frozen teal */
    --bubble-other: #202c39;
    --bubble-system: #17202a;
    --bubble-shared: #143240;
    --acc-programs: #52c5ec;
    --acc-guides: #b49df6;
    --acc-chats: #f3ad62;
    --paid: #ecc25f;
    --live: #4ee08a;
}

/* --- depth: raised cards get a top hairline of "sheen" + soft drop --- */
body.dark-mode :is(.program-item, .guide-card, .room-card, .saved-next, .toast) {
    background: linear-gradient(180deg, #1c2632, #18212b);
    border-color: #26323f;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 2px 6px rgba(0, 0, 0, 0.35);
}
/* state washes re-declared over the elevation (same specificity, later) */
body.dark-mode .program-item.is-saved {
    background: linear-gradient(90deg, #2c1d29, #18212b 150px);
}
body.dark-mode .program-item.is-paid {
    background: linear-gradient(90deg, #2c2718, #18212b 150px);
}

/* inputs read as WELLS — a step below the page, not cards */
body.dark-mode :is(input, select, textarea) {
    background: #0b1016;
    border-color: #2b394a;
    color: var(--text);
}
body.dark-mode :is(input, select, textarea):focus { border-color: var(--primary); }

/* chrome: top bar + tabs share one slab with a cyan under-glow */
body.dark-mode .top-bar,
body.dark-mode .view-tabs {
    background: linear-gradient(180deg, #17222d, #121a23);
    border-bottom-color: #223040;
}
body.dark-mode .view-tab.active { color: var(--acc-programs); }
/* modals float on a real shadow */
body.dark-mode .modal {
    background: #1a2430;
    border: 1px solid #26323f;
    box-shadow: 0 18px 56px rgba(0, 0, 0, 0.6);
}
body.dark-mode .modal-overlay { background: rgba(4, 8, 12, 0.66); }

/* calendar: columns are raised ice sheets; today glows cyan */
body.dark-mode .cal-day {
    background: linear-gradient(180deg, #1b2530, #18212b);
    border-color: #26323f;
}
body.dark-mode .cal-day.today {
    border-color: var(--acc-programs);
    box-shadow: inset 0 2px 0 var(--acc-programs), 0 0 14px rgba(82, 197, 236, 0.16);
}

/* readability on the new blues */
body.dark-mode .program-title { color: #8cc2f7; }
body.dark-mode .filter-chip.active { color: #10161d; }
/* AFTER the generic slab rule — same specificity, so order decides */
body.dark-mode .cal-today-btn, body.dark-mode .btn-small { background: #1b2530; }

/* mid-tone accent fills always carry DARK text in dark mode */
body.dark-mode .btn-primary,
body.dark-mode .seg-control button.active,
body.dark-mode .view-tab .badge,
body.dark-mode .chat-input-bar button,
body.dark-mode .comment-input-row button,
body.dark-mode .btn-guide-vote.voted,
body.dark-mode .btn-cvote.voted { color: #0d141b; }

/* activity tags: deep cool-tinted chips, same hue language as light */
body.dark-mode .tag { background: #26313e; color: #b7c4d2; }
body.dark-mode .tag.hockey   { background: #3c2330; color: #ff9cb0; }
body.dark-mode .tag.figure   { background: #252d4c; color: #adbcff; }
body.dark-mode .tag.speed    { background: #39301f; color: #ebcb8b; }
body.dark-mode .tag.leisure  { background: #1c3630; color: #85dfb6; }
body.dark-mode .tag.adapted  { background: #2f2647; color: #cdb2ff; }
body.dark-mode .tag.ringette { background: #3c2440; color: #ffa2e2; }
body.dark-mode .tag.other    { background: #3d2f1a; color: #ffd08a; }
.tag.other { background: #fff1dc; color: #9a5d12; }

/* age badges: calm slate chips */
body.dark-mode .age-badge { background: #303a5e; color: #cad4ff; }
body.dark-mode .age-badge.all-ages { background: #1c3d35; color: #96e7c8; }

/* leftover hardcoded light surfaces from the base sheet */
body.dark-mode .members-bar { background: #16202a; }
body.dark-mode .room-card:hover { background: #1e3230; }
body.dark-mode .room-card.joined { background: #1b2e2a; border-color: #2b4a44; }
body.dark-mode .chat-msg.dm .bubble { background: #33291b; border-color: #55432a; }

/* scrollbars: thin, cold, quiet (WebKit; Firefox gets color-scheme) */
body.dark-mode ::-webkit-scrollbar { width: 10px; height: 10px; }
body.dark-mode ::-webkit-scrollbar-thumb {
    background: #2c3a49; border-radius: 6px;
    border: 2px solid var(--bg); background-clip: padding-box;
}
body.dark-mode ::-webkit-scrollbar-thumb:hover { background: #3a4b5e; border: 2px solid var(--bg); background-clip: padding-box; }
body.dark-mode ::-webkit-scrollbar-track { background: transparent; }

/* text selection matches the ice */
body.dark-mode ::selection { background: rgba(70, 198, 234, 0.35); }

/* ========== v2.7: mobile chat polish ========== */

/* iOS Safari auto-zooms any focused field with font-size < 16px — that
   zoom was cropping the send arrow and half the conversation. Keeping
   controls at 16px on phones kills the zoom without touching pinch-zoom
   accessibility (no maximum-scale hacks). */
@media (max-width: 767px) {
    input, select, textarea { font-size: 16px; }
}

/* Chat header: title on its own line, status UNDER it — the status spans
   had no layout rules and sat in the same flex row as the title, so
   "#95E63B • connected" and "5 here now" overlapped the group name. */
.chat-header-info { flex-direction: column; align-items: flex-start; gap: 1px; }
.chat-status {
    display: flex; align-items: center; gap: 5px;
    font-size: 11px; color: var(--text-muted);
    min-width: 0; max-width: 100%;
}
.chat-status #chat-status-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.chat-online { flex-shrink: 0; white-space: nowrap; margin-left: 0; }

/* Jump-to-latest pill: clear the input bar, which grew with the 16px
   mobile fields (was kissing/overlapping its top edge) */
.jump-pill { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }

/* Sender name is BLOCK-level so the bubble always drops below it —
   as inline-flex, a short bubble ("ok", "see you") fit on the same
   line and rendered beside the name instead of under it like longer
   messages. fit-content keeps the tap/click target hugging the name. */
.chat-msg .sender { display: flex; width: fit-content; max-width: 100%; }
.chat-msg .sender .hue-dot { flex-shrink: 0; }

/* Members bar: show a couple, tuck the crowd behind "+N more" */
#members-list { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; min-width: 0; }
#members-list.expanded { max-height: 96px; overflow-y: auto; }
.members-more-btn {
    background: var(--bg-white);
    border: 1px solid color-mix(in srgb, var(--acc-chats) 45%, var(--border));
    color: var(--acc-chats);
    border-radius: 14px; padding: 3px 9px;
    font-size: 12px; font-weight: 600;
    cursor: pointer; white-space: nowrap;
}
.members-more-btn:hover { border-color: var(--acc-chats); }
.members-bar { display: flex; align-items: flex-start; gap: 6px; }

/* ========== v2.4: Nostr community box (Settings) ========== */

/* ========== v2.4: session counts in pickers ========== */

/* live spots-left badge on paid sessions (fetched from the venue's API) */
.spots-badge {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--live) 55%, transparent);
    color: var(--live);
    background: color-mix(in srgb, var(--live) 10%, transparent);
    white-space: nowrap;
}
.spots-badge.low {
    border-color: color-mix(in srgb, var(--alert-amber) 60%, transparent);
    color: var(--alert-amber);
    background: var(--alert-amber-bg);
}
.spots-badge.closed-reg {
    border-color: var(--border-dark);
    color: var(--text-muted);
    background: var(--bg);
}

/* ========== Section visibility (Settings → Sections) ==========
   Tabs get .hidden from JS; panels are killed here so no route/keyboard
   path can reveal them. The ≥1100px grid re-flows to the remaining columns. */
body.hide-guides #guides-panel,
body.hide-chats #chats-panel { display: none !important; }

@media (min-width: 1100px) {
    /* Every track is fr-based so the grid always FILLS the viewport —
       the old fixed caps (420/460px) on the chats column left a dead
       strip of page background down the far right on wide screens. */
    .main-content {
        grid-template-columns: minmax(400px, 1.6fr) minmax(320px, 1fr) minmax(340px, 1.05fr);
    }
    body.hide-guides:not(.hide-chats) .main-content {
        grid-template-columns: minmax(400px, 1.7fr) minmax(340px, 1fr);
    }
    body.hide-chats:not(.hide-guides) .main-content {
        grid-template-columns: minmax(400px, 1.6fr) minmax(320px, 1fr);
    }
    body.hide-guides.hide-chats .main-content { grid-template-columns: 1fr; }
    body.hide-guides.hide-chats .view-panel.panel-programs { border-right: none; }

    /* keep message lines readable even now that the column can widen */
    .chat-messages { padding-left: 14px; padding-right: 14px; }

    /* the REAL right-gap culprit: base CSS caps the chat panel itself at
       380px (a relic of the old flex layout), so it stopped short inside
       its own grid track. Let the panel fill the track. */
    .view-panel.chat-panel-view { max-width: none; flex: 1 1 auto; }
}

/* ========== First-visit setup modal ========== */

/* style.css's `.modal input { width:100% }` (meant for text fields) hits
   these checkboxes too — it blew them up to ~130px wide, squeezing the
   label text into a narrow off-centre column. Pin the box + let the text
   take the rest of the row. */

/* Settings → Sections: independent on/off buttons (not radio) */
.seg-control.seg-multi button { opacity: 0.55; }
.seg-control.seg-multi button.active { opacity: 1; }

/* ========== Dark-mode & motion sanity ========== */
body.dark-mode .cal-block { background: color-mix(in srgb, var(--acc-programs) 14%, var(--bg-white)); }
body.dark-mode .program-item.is-paid {
    background: linear-gradient(90deg, color-mix(in srgb, var(--paid) 13%, var(--bg-white)), var(--bg-white) 120px);
}

@media (prefers-reduced-motion: reduce) {
    .happening-now.live, .new-dot { animation: none; }
}

/* ============================================================
   v3.0 — weather chip, QR share, rink map, winter banner, tour
   ============================================================ */

/* ---- Weather chip (stats line) ---- */
.weather-chip {
    background: color-mix(in srgb, var(--acc-programs) 10%, var(--bg-white));
    border: 1px solid color-mix(in srgb, var(--acc-programs) 35%, var(--border));
    border-radius: 12px;
    padding: 2px 9px;
    font-size: 11px; font-weight: 700;
    color: var(--text);
    cursor: pointer;
    white-space: nowrap;
    width: fit-content;
}
.weather-chip:hover { border-color: var(--acc-programs); }

/* ---- Paid badge on shared chat cards ---- */
.share-paid-badge {
    display: inline-block;
    margin-top: 3px;
    background: var(--paid);
    color: #fff;
    border-radius: 10px;
    padding: 2px 8px;
    font-size: 11px; font-weight: 700;
}
body.dark-mode .share-paid-badge { color: #10151a; }

/* ---- QR share modal ---- */
.qr-modal-box { max-width: 340px; text-align: center; }
.qr-holder { display: flex; justify-content: center; padding: 8px 0 4px; }
.qr-holder img { image-rendering: pixelated; width: 232px; height: 232px; background: #fff; border-radius: 8px; }
.qr-url { font-size: 12px; color: var(--text-muted); word-break: break-all; margin: 6px 0 10px; }
.qr-copy { width: 100%; }

/* ---- Interactive rink map ---- */
.map-header-actions { display: flex; align-items: center; gap: 8px; }
.map-filter-seg button { font-size: 12px; padding: 6px 10px; }
.map-canvas {
    height: min(62vh, 560px);
    min-height: 320px;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--bg);
}
@media (max-width: 767px) {
    /* phones: the map takes the whole screen — free scroll everywhere */
.map-canvas { flex: 1; height: auto; min-height: 0; }
}
/* Leaflet popup content */
.map-pop { display: flex; flex-direction: column; gap: 4px; font-size: 13px; min-width: 180px; }
.map-pop-meta { font-size: 11.5px; color: #555; }
.map-pop-alert { color: #9a6700; font-weight: 700; }
.map-pop-actions { display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.map-pop-actions .btn-small.starred { border-color: #b8860b; background: #fdf6e3; }

/* dark mode: re-ink the tiles (single provider, zero extra requests)
   and keep popups readable — Leaflet's white popup gets night-rink paint */
body.dark-mode .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(0.92) contrast(0.9) saturate(0.7); }
body.dark-mode .leaflet-popup-content-wrapper,
body.dark-mode .leaflet-popup-tip { background: #1a2430; color: var(--text); box-shadow: 0 6px 24px rgba(0,0,0,.5); }
body.dark-mode .map-pop-meta { color: #93a3b4; }
body.dark-mode .map-pop-alert { color: #ffce4d; }
body.dark-mode .map-pop-actions .btn-small { background: #1b2530; color: var(--text); border-color: #38485a; }
body.dark-mode .map-pop-actions .btn-small.starred { border-color: #ecc25f; background: #2c2718; }
body.dark-mode .leaflet-control-zoom a { background: #1b2530; color: var(--text); border-color: #38485a; }
body.dark-mode .leaflet-control-attribution { background: rgba(14, 20, 27, 0.8); color: #93a3b4; }
body.dark-mode .leaflet-control-attribution a { color: var(--acc-programs); }

/* ---- Quick tour (spotlight coach marks) ---- */
.tour-overlay {
    position: fixed; inset: 0; z-index: 600;
    background: rgba(8, 14, 20, 0.62);
}
.tour-ring {
    position: fixed; z-index: 601;
    border: 2px solid var(--acc-programs);
    border-radius: 10px;
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--acc-programs) 30%, transparent),
                0 0 24px rgba(82, 197, 236, 0.5);
    pointer-events: none;
    transition: left .25s, top .25s, width .25s, height .25s;
}
.tour-card {
    position: fixed; z-index: 602;
    width: min(320px, calc(100vw - 20px));
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 14px 44px rgba(0, 0, 0, 0.45);
    padding: 14px;
    transition: left .25s, top .25s;
}
.tour-card h4 { margin: 4px 0 6px; font-size: 15px; }
.tour-card p { font-size: 13px; color: var(--text-muted); line-height: 1.5; margin-bottom: 12px; }
.tour-skip {
    /* the BIG skip — first thing screen readers and eyes land on */
    display: block; width: 100%;
    background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
    color: var(--text-muted); font-size: 13px; font-weight: 600;
    padding: 8px; margin-bottom: 10px;
}
.tour-skip:hover { color: var(--text); border-color: var(--border-dark); }
.tour-nav { display: flex; align-items: center; justify-content: space-between; }
.tour-count { font-size: 11px; color: var(--text-muted); }
.tour-next { min-width: 88px; }
body.dark-mode .tour-card { background: #1a2430; border-color: #26323f; }

/* ============================================================
   v3.1 — live cross-check flags, verify links, calendar menu,
   weather picker, pull-to-refresh, chat privacy line, guide
   ============================================================ */

/* ---- "the City dropped this session" flag (reuses the closed banner) ---- */
.alert-banner.live-flag { border-style: solid; }
.alert-banner .verify-link {
    display: inline-block; margin-left: 4px;
    color: inherit; font-weight: 700; text-decoration: underline;
    white-space: nowrap;
}

/* ---- compact official-page link beside the map link ---- */

.share-official { font-size: 12px; color: var(--primary); font-weight: 600; text-decoration: none; }
.share-official:hover { text-decoration: underline; }

/* ---- venue live badges ---- */
.spots-badge.full {
    border-color: color-mix(in srgb, var(--alert-red) 60%, transparent);
    color: var(--alert-red);
    background: var(--alert-red-bg);
}

/* ---- picker counts: paid-only rinks read "N paid", not "0 sessions" ---- */
/* ---- weather chip now carries the spot name; picker is a tall popover ---- */
.weather-chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.popover { max-height: min(70vh, 520px); overflow-y: auto; }

/* ---- pull-to-refresh indicator (touch; grows with the pull) ---- */
.ptr {
    height: 0; overflow: hidden;
    display: flex; align-items: flex-end; justify-content: center; gap: 6px;
    font-size: 12px; font-weight: 600; color: var(--text-muted);
    transition: height 0.12s;
    margin: -10px -10px 0;          /* bleed to the panel edges */
}
.ptr.visible { padding-bottom: 8px; }
.ptr-icon { display: inline-block; transition: transform 0.15s; }
.ptr.armed { color: var(--acc-programs); }
.ptr.armed .ptr-icon { transform: rotate(180deg); }
.ptr.busy .ptr-icon { animation: ptr-spin 0.9s linear infinite; }
@keyframes ptr-spin { to { transform: rotate(360deg); } }
/* keep the pull inside the panel — no chained rubber-banding of the page */
.view-panel { overscroll-behavior-y: contain; }

/* ---- chat: who can read this, right above the composer ---- */
.chat-privacy-hint {
    flex-shrink: 0;
    padding: 5px 12px;
    font-size: 11px; line-height: 1.35;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    background: var(--bg-white);
}
.chat-privacy-hint.public { border-left: 3px solid var(--acc-chats); }
.chat-privacy-hint.private { border-left: 3px solid var(--live); }

/* ---- settings: tour + guide buttons ---- */

/* ---- auto-playing guide: progress bar + pause ---- */
.tour-progress {
    height: 4px; border-radius: 2px;
    background: color-mix(in srgb, var(--acc-programs) 18%, var(--border));
    overflow: hidden; margin: 0 0 8px;
}
.tour-progress-bar { height: 100%; width: 0; background: var(--acc-programs); transition: width 0.1s linear; }
.tour-nav-btns { display: flex; gap: 6px; }
.tour-pause, .tour-back {
    background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
    font-size: 12px; padding: 6px 10px;
}
.tour-pause:hover, .tour-back:hover { border-color: var(--border-dark); }

/* ---- dark mode ---- */
body.dark-mode .chat-privacy-hint { background: #16202a; border-top-color: #26323f; }
body.dark-mode .ptr.armed { color: var(--acc-programs); }
body.dark-mode .tour-pause, body.dark-mode .tour-back { background: #1b2530; color: var(--text); border-color: #38485a; }
body.dark-mode .spots-badge.full { background: var(--alert-red-bg); }

/* ============================================================
   v3.2 — the calm schedule: search · Filters / Rinks & map / Week ·
   pills · one status line · day headers. Filters sheet, merged Rinks
   view, hidden tab bar when only the schedule is on.
   ============================================================ */

/* ---- top bar: title + ⚙️ (dot = unseen release) ---- */
.btn-settings { position: relative; }
.btn-settings .new-dot { top: -3px; right: -3px; }
body.hide-guides.hide-chats .view-tabs { display: none; }

/* ---- search with an inline clear ---- */
.search-box { position: relative; }
.search-box input { padding-right: 34px; }
.search-clear {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    background: none; border: none; padding: 4px 8px;
    color: var(--text-muted); font-size: 13px; line-height: 1;
}
.search-clear:hover { color: var(--text); }

/* ---- toolbar: three text buttons ---- */
.toolbar { display: flex; gap: 8px; margin-bottom: 8px; }
.tb-btn {
    flex: 1 1 0; min-width: 0;
    padding: 9px 8px;
    background: var(--bg-white); border: 1px solid var(--border); border-radius: var(--radius);
    font-size: 13px; font-weight: 600; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tb-btn:hover { border-color: var(--acc-programs); }
.tb-btn.active { border-color: var(--acc-programs); color: var(--acc-programs); }
.tb-count {
    display: inline-block; margin-left: 6px; min-width: 18px; padding: 0 5px;
    border-radius: 9px; background: var(--acc-programs); color: #fff;
    font-size: 11px; line-height: 18px; text-align: center; vertical-align: 1px;
}

/* ---- active filters as pills ---- */
.pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 9px; font-size: 12px; border-radius: 14px;
    background: color-mix(in srgb, var(--acc-programs) 12%, var(--bg-white));
    border: 1px solid color-mix(in srgb, var(--acc-programs) 40%, var(--border));
    color: var(--text); cursor: pointer; max-width: 100%;
}
.pill:hover { border-color: var(--acc-programs); }
.pill-x { opacity: 0.6; font-size: 10px; }
.pill.toggle { background: var(--bg-white); border-style: dashed; color: var(--text-muted); }
.pill.toggle.active {
    background: color-mix(in srgb, var(--paid) 18%, var(--bg-white));
    border: 1px solid var(--paid); color: var(--text); font-weight: 600;
}

/* ---- status line: count · freshness · weather ---- */
.status-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-bottom: 8px; }
.status-btn {
    background: none; border: none; padding: 2px 0;
    font-size: 11.5px; color: var(--text-muted); cursor: pointer; text-align: left;
}
.status-btn:hover { color: var(--text); }
.status-btn.stale { color: var(--warning); font-weight: 600; }
.status-line .weather-chip { padding: 1px 8px; font-size: 11px; }

/* ---- list: day headers + lighter rows + show more ---- */
.day-head {
    list-style: none;
    /* -11px, not -1px: the panel scrolls with 10px of padding and browsers
       measure a sticky offset from inside that padding, so -1px left a 9px
       strip of the previous card showing above the stuck header. */
    position: sticky; top: -11px; z-index: 3;
    background: var(--bg);
    padding: 10px 2px 5px; margin: 2px 0 8px;
    font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
}
.day-head.today { color: var(--acc-programs); border-bottom-color: color-mix(in srgb, var(--acc-programs) 50%, var(--border)); }
.day-head strong { color: var(--text); }
.day-head.today strong { color: var(--acc-programs); }
.program-time { font-weight: 600; color: var(--text); }
.city-tag {
    display: inline-block; margin-left: 6px; vertical-align: 1px;
    font-size: 10.5px; color: var(--text-muted);
    border: 1px solid var(--border); border-radius: 10px; padding: 0 6px;
}
.note-badge {
    display: inline-block;
    font-size: 10.5px; line-height: 1.3; color: var(--text-muted);
    border: 1px dashed var(--border-dark); border-radius: 10px; padding: 2px 7px;
    max-width: 100%;   /* wraps — the honesty note must never be clipped on phones */
}
.show-more { display: flex; justify-content: center; padding: 6px 0 18px; }
.btn-more {
    padding: 10px 18px; font-size: 13px; font-weight: 600;
    background: var(--bg-white); border: 1px solid var(--border); border-radius: var(--radius);
}
.btn-more:hover { border-color: var(--acc-programs); }
.btn-more-left { color: var(--text-muted); font-weight: 400; }

/* ---- Filters sheet (bottom sheet on phones, centred card on wider screens) ---- */
.sheet-overlay { align-items: flex-end; padding: 0; }
.modal.sheet {
    max-width: none; width: 100%;
    border-radius: 16px 16px 0 0;
    max-height: 88vh; max-height: 88dvh;
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
    display: flex; flex-direction: column;
}
#filters-body { overflow-y: auto; flex: 1; min-height: 0; padding-right: 2px; }
.sheet-footer { display: flex; gap: 8px; padding-top: 12px; margin-top: 8px; border-top: 1px solid var(--border); }
.sheet-footer .btn-primary { flex: 1; padding: 12px; font-size: 14px; }
.sheet-footer button:not(.btn-primary) { padding: 12px 16px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); font-size: 13px; }
@media (min-width: 768px) {
    .sheet-overlay { align-items: center; padding: 20px; }
    .modal.sheet { max-width: 540px; border-radius: var(--radius-lg); max-height: 85vh; }
}
.fsec { margin-bottom: 14px; }
.fsec h4 {
    font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--text-muted); margin: 0 0 6px;
}
.fcheck { display: flex; align-items: center; gap: 9px; padding: 7px 4px; font-size: 14px; cursor: pointer; }
.fcheck input { width: 18px; height: 18px; flex: 0 0 18px; margin: 0; accent-color: var(--primary); cursor: pointer; }
.fcheck-label { flex: 1; min-width: 0; }
.fcat { display: flex; align-items: center; gap: 6px; }
.fcat .fcheck { flex: 1; }
.fcat.on .fcheck-label { font-weight: 600; }
.fcount { font-size: 11px; color: var(--text-muted); background: var(--bg); border-radius: 9px; padding: 1px 7px; white-space: nowrap; }
.fexpand {
    background: none; border: 1px solid var(--border); border-radius: var(--radius);
    width: 34px; height: 28px; padding: 0; font-size: 12px; color: var(--text-muted);
}
.fexpand:hover { border-color: var(--acc-programs); color: var(--text); }
.fsubs { margin: 0 0 6px 9px; padding-left: 12px; border-left: 2px solid var(--border); }
.fsubs .fcheck { padding: 5px 4px; font-size: 13px; }
.fchips { display: flex; flex-wrap: wrap; gap: 6px; }
.fchip {
    padding: 6px 11px; font-size: 13px; border-radius: 15px;
    background: var(--bg-white); border: 1px solid var(--border); color: var(--text);
}
.fchip:hover { border-color: var(--acc-programs); }
.fchip.active { background: var(--acc-programs); border-color: var(--acc-programs); color: #fff; }
.fage { display: flex; align-items: center; gap: 8px; font-size: 14px; padding: 4px; }
.fage input { width: 90px; }
.flink { margin-left: auto; background: none; border: none; color: var(--primary); font-size: 13px; text-decoration: underline; padding: 0 4px; }

/* ---- Rinks & map: one view ---- */
.rinks-box { max-width: 960px; width: 96vw; display: flex; flex-direction: column; max-height: 92vh; }
.rinks-locate { display: flex; gap: 8px; margin-bottom: 4px; }
.rinks-locate input { flex: 1; min-width: 0; }
.rinks-locate .btn-primary { white-space: nowrap; }
.locator-status { min-height: 14px; margin: 2px 0 8px; }
.rinks-split { display: flex; flex-direction: column; gap: 10px; flex: 1; min-height: 0; }
.rinks-box .map-canvas { height: min(44vh, 400px); min-height: 220px; }
.rinks-list-wrap { display: flex; flex-direction: column; min-height: 0; }
#rinks-search { width: 100%; margin-bottom: 6px; }
.rinks-list { overflow-y: auto; display: flex; flex-direction: column; gap: 6px; max-height: 32vh; }
.rink-row {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 8px 10px;
}
.rink-row.starred { border-color: var(--paid); }
.rink-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rink-info strong { font-size: 13px; }
.rink-meta { font-size: 11px; color: var(--text-muted); }
.rink-actions { display: flex; gap: 6px; flex-shrink: 0; }
.rink-actions .star { min-width: 34px; font-size: 14px; }
.rink-actions .star.starred { border-color: var(--paid); background: color-mix(in srgb, var(--paid) 15%, var(--bg)); color: var(--paid); }
.rinks-hint { margin-top: 8px; }
@media (max-width: 767px) {
    /* phones: the whole screen — map on top, list below, free scroll everywhere */
    #rinks-modal { padding: 0; }
    .rinks-box { width: 100vw; max-width: none; height: 100dvh; max-height: none; border-radius: 0; }
    .rinks-box .map-canvas { height: 38vh; min-height: 200px; flex: none; }
    .rinks-list { max-height: none; flex: 1; }
    .rinks-hint { display: none; }
}
@media (min-width: 768px) {
    .rinks-split { flex-direction: row; }
    .rinks-box .map-canvas { flex: 1.3; height: auto; min-height: 420px; }
    .rinks-list-wrap { flex: 1; min-width: 280px; }
    .rinks-list { max-height: 52vh; }
}

/* ---- dark mode ---- */
body.dark-mode .tb-btn, body.dark-mode .fchip, body.dark-mode .btn-more, body.dark-mode .fexpand,
body.dark-mode .sheet-footer button:not(.btn-primary) { background: #1b2530; color: var(--text); border-color: #38485a; }
body.dark-mode .tb-btn.active { color: var(--acc-programs); border-color: var(--acc-programs); }
body.dark-mode .fchip.active { color: #0d141b; }
body.dark-mode .pill { background: color-mix(in srgb, var(--acc-programs) 18%, var(--bg-white)); }
body.dark-mode .pill.toggle { background: #1b2530; }
body.dark-mode .day-head { background: var(--bg); }
body.dark-mode .modal.sheet { background: #1a2430; }
body.dark-mode .rink-row { background: #1b2530; }
body.dark-mode .rink-actions .star.starred { background: #2c2718; }
body.dark-mode .status-btn.stale { color: #ffce4d; }

/* ============================================================
   v3.4 — the readable schedule: top-bar Paid + Refresh, List/Calendar
   switch, city pill picker, folded Filters, emoji-light rows, calmer
   banners, regrouped Settings, neutral overlays, louder tour Skip.
   ============================================================ */

/* ---- overlays dim, never recolour (the "site turns a different blue" report) ---- */
.modal-overlay { background: rgba(0, 0, 0, 0.5); }
body.dark-mode .modal-overlay { background: rgba(0, 0, 0, 0.62); }

/* ---- top bar: Paid switch · Refresh · Settings, one height ---- */
.top-bar { background: var(--bg-white); }
.top-bar-actions { gap: 8px; }
.top-bar .btn-icon { width: 36px; height: 36px; min-width: 36px; padding: 0; font-size: 18px; border-radius: 10px; }
.btn-refresh { font-size: 20px; line-height: 1; }
.btn-refresh.spinning { animation: ptr-spin 0.9s linear infinite; }
.top-toggle {
    display: inline-flex; align-items: center; gap: 7px;
    height: 36px; padding: 0 12px 0 10px;
    border: 1px solid var(--border); border-radius: 18px;
    background: var(--bg-white); color: var(--text-muted);
    font-size: 13px; font-weight: 600;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.top-toggle-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--border-dark); transition: background 0.15s; }
.top-toggle:hover { border-color: var(--paid); color: var(--text); }
.top-toggle.active { background: color-mix(in srgb, var(--paid) 16%, var(--bg-white)); border-color: var(--paid); color: var(--text); }
.top-toggle.active .top-toggle-dot { background: var(--paid); box-shadow: 0 0 0 3px color-mix(in srgb, var(--paid) 25%, transparent); }

/* ---- toolbar: Filters · Rinks & map · [List | Calendar] ---- */
.toolbar { align-items: stretch; }
.tb-btn { padding: 0 8px; height: 40px; }
.view-seg { display: flex; flex: 1.1 1 0; min-width: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--bg-white); }
.view-seg button {
    flex: 1 1 0; min-width: 0; height: 38px; padding: 0 6px;
    background: none; border: none; border-radius: 0;
    font-size: 13px; font-weight: 600; color: var(--text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.view-seg button + button { border-left: 1px solid var(--border); }
.view-seg button.active { background: var(--acc-programs); color: #fff; }
.view-seg button:not(.active):hover { color: var(--text); background: var(--bg); }

/* ---- pills: the standing city picker + removable filters ---- */
.pill.city { background: color-mix(in srgb, var(--acc-programs) 14%, var(--bg-white)); border-color: color-mix(in srgb, var(--acc-programs) 55%, var(--border)); font-weight: 600; }
.pill.city:not(.on) { background: var(--bg-white); border-style: dashed; color: var(--text-muted); font-weight: 500; }
.pill-caret { font-size: 10px; opacity: 0.7; }
.pill.city .pill-x { margin-left: 2px; padding: 2px 4px; border-radius: 8px; }
.pill.city .pill-x:hover { background: color-mix(in srgb, var(--acc-programs) 25%, transparent); opacity: 1; }
.pill.toggle.active { background: color-mix(in srgb, var(--paid) 16%, var(--bg-white)); border: 1px solid var(--paid); }

/* ---- Filters sheet: aligned rows, an obvious Ages button, folded extras ---- */
.fsec { margin-bottom: 16px; }
.fsec h4 { font-size: 11.5px; margin-bottom: 8px; }
.fcheck { padding: 9px 6px; min-height: 42px; border-radius: var(--radius); }
.fcheck:hover { background: color-mix(in srgb, var(--acc-programs) 6%, transparent); }
.fcheck input { width: 20px; height: 20px; flex: 0 0 20px; }
.fcheck-label { line-height: 1.3; }
.fcat {
    display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 8px;
    padding-left: 8px; margin-bottom: 2px;
    border-radius: var(--radius);
    box-shadow: inset 3px 0 0 var(--tc, var(--border));
}
.fcat.on { background: color-mix(in srgb, var(--tc, var(--acc-programs)) 8%, transparent); }
.fcat .fcheck { min-width: 0; }
.fcat.on .fcheck-label { font-weight: 700; }
.fcat.type-leisure  { --tc: #3aa07f; }
.fcat.type-hockey   { --tc: #cc4455; }
.fcat.type-figure   { --tc: #5566cc; }
.fcat.type-speed    { --tc: #b08a3d; }
.fcat.type-adapted  { --tc: #8855bb; }
.fcat.type-ringette { --tc: #bb4499; }
.fcat.type-other    { --tc: #7a8a99; }
.fcount { min-width: 34px; text-align: center; font-weight: 600; }
.fexpand {
    display: inline-flex; align-items: center; justify-content: center; gap: 4px;
    width: auto; min-width: 74px; height: 36px; padding: 0 10px;
    border: 1px solid color-mix(in srgb, var(--acc-programs) 45%, var(--border)); border-radius: var(--radius);
    background: var(--bg-white); color: var(--acc-programs); font-size: 13px; font-weight: 600;
}
.fexpand:hover { border-color: var(--acc-programs); background: color-mix(in srgb, var(--acc-programs) 8%, var(--bg-white)); }
.fexpand.open { background: var(--acc-programs); color: #fff; border-color: var(--acc-programs); }
.caret { display: inline-block; font-size: 12px; transition: transform 0.15s; }
.open > .caret, .open .caret { transform: rotate(180deg); }
.fsubs { margin: 2px 0 10px 18px; padding-left: 12px; border-left: 2px solid color-mix(in srgb, var(--acc-programs) 40%, var(--border)); }
.fsubs .fcheck { min-height: 38px; padding: 6px 6px; font-size: 13.5px; }
.ftoggle {
    display: flex; align-items: center; gap: 8px; width: 100%;
    margin: 4px 0; padding: 10px 10px;
    background: var(--bg); border: 1px dashed var(--border-dark); border-radius: var(--radius);
    color: var(--text); font-size: 13px; font-weight: 600; text-align: left;
}
.ftoggle .caret { margin-left: auto; }
.ftoggle:hover { border-color: var(--acc-programs); }
.ftoggle.open { border-style: solid; }
.fmore { padding: 4px 0 0; }
.fchip { min-height: 36px; padding: 0 13px; font-weight: 500; }
.fchip.active { background: var(--acc-programs); border-color: var(--acc-programs); color: #fff; font-weight: 700; }
.forder { align-items: center; }
.flabel { font-size: 13px; color: var(--text-muted); margin-right: 2px; }
.fage { padding: 8px 6px; }
.fage input { width: 82px; }
.flink { font-weight: 600; text-decoration: none; }
.flink:hover { text-decoration: underline; }

/* ---- session rows: fewer icons, aligned pieces ---- */
.program-main { min-width: 0; flex: 1; }
.program-title { font-size: 15px; line-height: 1.25; }
.program-where { font-size: 12.5px; color: var(--text-muted); margin-top: 3px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.program-where .city-tag { margin-left: 0; }
.dist { color: var(--acc-programs); font-weight: 600; }
.program-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.program-time { font-size: 14px; }
/* footer grid: badges | actions on line one; links and the note on their own full-width lines */
.program-footer {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 10px;
}
.program-badges { gap: 6px; min-width: 0; }
.program-actions { gap: 6px; margin-left: 0; justify-content: flex-end; }
.program-links { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.program-note { grid-column: 1 / -1; }
.program-footer:has(.program-links:empty) .program-links { display: none; }
.row-link {
    background: none; border: none; padding: 0; margin: 0;
    font-size: 12.5px; font-weight: 600; color: var(--acc-programs);
    text-decoration: none; white-space: nowrap; cursor: pointer;
}
.row-link:hover { text-decoration: underline; }
.row-link.strong {
    padding: 5px 10px; border-radius: var(--radius);
    background: var(--paid); color: #fff; text-decoration: none;
}
.row-link.strong:hover { filter: brightness(1.08); }
/* type badge: capitals + emoji, squarer corners; the age badge is the pill */
.tag { text-transform: uppercase; letter-spacing: 0.04em; font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 5px; }
.age-badge { background: #eef0fd; color: #4650b8; border: 1px solid #d3d8f6; border-radius: 999px; font-weight: 600; }
.age-badge.all-ages { background: #e5f6ec; color: #1e7a52; border-color: #bfe6d1; }
.price-badge {
    display: inline-flex; align-items: center;
    padding: 3px 8px; border-radius: 10px; font-size: 11px; font-weight: 700; white-space: nowrap;
}
.price-badge.paid { background: var(--paid); color: #fff; }
.price-badge.free { background: color-mix(in srgb, var(--live) 14%, var(--bg-white)); color: var(--live); border: 1px solid color-mix(in srgb, var(--live) 45%, transparent); }
.note-badge { font-size: 11px; }
.program-actions button { width: 34px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.btn-favorite { font-size: 19px; line-height: 1; color: #e0245e; }
.btn-favorite.active { color: #e0245e; }
.btn-copy { font-size: 18px; letter-spacing: 1px; color: var(--text); }
.program-item.is-paid .program-title { color: var(--text); }
.program-item.is-paid { background: var(--bg-white); border-left: 3px solid var(--paid); }

/* ---- banners: full text, calm unverified ---- */
.alert-banner { white-space: normal; overflow-wrap: anywhere; }
.alert-banner.unverified {
    background: var(--alert-amber-bg);
    border: 1px dashed color-mix(in srgb, var(--alert-amber) 70%, transparent);
    color: var(--alert-amber); font-weight: 500;
}
.alert-banner .verify-link { margin-left: 0; }

/* ---- rinks view: one control height, scope line, sections ---- */
.rinks-locate { align-items: stretch; }
.rinks-locate button, .rinks-locate input { height: 38px; font-size: 13px; }
.rinks-locate button { padding: 0 12px; white-space: nowrap; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); font-weight: 600; }
.rinks-locate .btn-primary { border-color: var(--primary); }
.rinks-scope { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--text-muted); margin-bottom: 6px; }
.rinks-head { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); padding: 6px 2px 2px; }
.rink-row.has-alert .rink-meta { color: var(--alert-amber); }
.rink-actions .btn-small { height: 32px; }

/* ---- Settings: three groups, one button language ---- */
.settings-box { max-width: 460px; }
.sgroup {
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: 12px 14px 4px; margin-bottom: 12px;
}
.sgroup h4 {
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
    font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--text-muted); margin: 0 0 10px;
}
.sgroup-sub { font-weight: 500; letter-spacing: 0; text-transform: none; font-size: 11.5px; }
.sgroup.community { border-color: color-mix(in srgb, var(--acc-chats) 45%, var(--border)); }
.sgroup.community h4 { color: var(--acc-chats); }
.settings-field { margin-bottom: 12px; }
.settings-field > span { font-weight: 600; color: var(--text); }
.seg-control button { min-height: 38px; font-weight: 600; }
.sbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.sbtns button {
    min-height: 40px; padding: 8px 10px;
    background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
    font-size: 13px; font-weight: 600; color: var(--text);
}
.sbtns button:hover { border-color: var(--acc-programs); }
.settings-inline button { min-height: 38px; padding: 0 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); font-weight: 600; }
.settings-inline button:hover { border-color: var(--acc-programs); }
.settings-hint.credits { margin-top: 4px; line-height: 1.5; }
.modal-header .btn-icon { width: 34px; height: 34px; min-width: 34px; padding: 0; }

/* ---- tour: Skip is the loudest thing on the card ---- */
.tour-skip {
    border: 2px solid var(--acc-programs); color: var(--acc-programs);
    background: color-mix(in srgb, var(--acc-programs) 8%, var(--bg-white));
    font-size: 14px; font-weight: 700; padding: 10px;
}
.tour-skip:hover { background: var(--acc-programs); color: #fff; }

/* ---- dark mode for the new pieces ---- */
body.dark-mode .top-toggle, body.dark-mode .view-seg, body.dark-mode .fexpand, body.dark-mode .ftoggle,
body.dark-mode .sbtns button, body.dark-mode .settings-inline button, body.dark-mode .rinks-locate button { background: #1b2530; color: var(--text); border-color: #38485a; }
body.dark-mode .top-toggle { color: var(--text-muted); }
body.dark-mode .top-toggle.active { background: #2c2718; border-color: var(--paid); color: var(--text); }
body.dark-mode .view-seg button.active { background: var(--acc-programs); color: #0d141b; }
body.dark-mode .fexpand { color: var(--acc-programs); }
body.dark-mode .fexpand.open { background: var(--acc-programs); color: #0d141b; }
body.dark-mode .fchip.active { background: var(--acc-programs); border-color: var(--acc-programs); color: #0d141b; }
body.dark-mode .pill.city { background: color-mix(in srgb, var(--acc-programs) 22%, var(--bg-white)); }
body.dark-mode .pill.city:not(.on) { background: #1b2530; }
body.dark-mode .pill.toggle.active { background: #2c2718; }
body.dark-mode .age-badge { background: #303a5e; color: #cad4ff; border-color: #414d7c; }
body.dark-mode .age-badge.all-ages { background: #1c3d35; color: #96e7c8; border-color: #2c5e4d; }
body.dark-mode .price-badge.paid { color: #1a1a1a; }
body.dark-mode .row-link.strong { color: #1a1a1a; }
body.dark-mode .program-item.is-paid { background: linear-gradient(180deg, #1c2632, #18212b); }
body.dark-mode .program-item.is-paid .program-title { color: #8cc2f7; }
body.dark-mode .alert-banner.unverified { background: var(--alert-amber-bg); }
body.dark-mode .sgroup { border-color: #26323f; }
body.dark-mode .tour-skip { background: #1b2530; }
body.dark-mode .tour-skip:hover { background: var(--acc-programs); color: #0d141b; }
body.dark-mode .fcheck:hover { background: rgba(255, 255, 255, 0.04); }
.fexpand-spacer { display: inline-block; min-width: 74px; height: 1px; }
/* narrow phones: three toolbar controls still fit without clipping "Calendar" */
@media (max-width: 420px) {
    .tb-btn { font-size: 12.5px; padding: 0 6px; }
    .view-seg button { font-size: 12px; padding: 0 4px; }
    .tb-count { margin-left: 4px; }
}

/* ============================================================
   v3.5 — calendar that scales (day strip, time blocks, scroll hint),
   saved-day card, flat top bar under the iOS status bar
   ============================================================ */

/* ---- day strip: jump + "which day am I looking at" ---- */
.cal-days { display: flex; gap: 6px; margin: 0 0 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.cal-days::-webkit-scrollbar { display: none; }
.cal-daychip {
    flex: 1 1 0; min-width: 44px;
    display: flex; flex-direction: column; align-items: center; gap: 1px;
    padding: 6px 4px;
    background: var(--bg-white); border: 1px solid var(--border); border-radius: 10px;
    font-size: 11px; color: var(--text-muted);
}
.cal-daychip-name { font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.cal-daychip-num { font-size: 15px; font-weight: 700; color: var(--text); line-height: 1.1; }
.cal-daychip-count { font-size: 10px; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--bg); }
.cal-daychip.empty .cal-daychip-count { opacity: 0.5; }
.cal-daychip.today { border-color: var(--acc-programs); }
.cal-daychip.today .cal-daychip-num { color: var(--acc-programs); }
.cal-daychip.in-view { background: color-mix(in srgb, var(--acc-programs) 14%, var(--bg-white)); border-color: var(--acc-programs); }
.cal-daychip:hover { border-color: var(--acc-programs); }

/* ---- week arrows say what they do ---- */
.cal-week-btn {
    font-size: 12px; font-weight: 600; padding: 6px 10px; white-space: nowrap;
    background: var(--bg-white); border: 1px solid var(--border); border-radius: var(--radius);
}
.cal-week-btn:hover { border-color: var(--acc-programs); }
.cal-nav { flex-wrap: wrap; }
.cal-label { min-width: 0; }

/* ---- horizontal scroll: visible bar + a fading edge while more columns hide ---- */
.cal-scroll { position: relative; }
.cal-scroll.scrolls:not(.at-end)::after {
    content: ''; position: absolute; top: 0; right: 0; bottom: 10px; width: 28px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--bg));
}
.cal-grid { scrollbar-width: thin; padding-bottom: 10px; }
.cal-grid::-webkit-scrollbar { height: 8px; }
.cal-grid::-webkit-scrollbar-thumb { background: var(--border-dark); border-radius: 4px; }
.cal-grid::-webkit-scrollbar-track { background: var(--bg); }


/* ---- saved-day card: every saved session on that day ---- */
.saved-next { display: flex; flex-direction: column; gap: 5px; cursor: default; }
.saved-next-head { display: flex; justify-content: space-between; align-items: baseline; }
.saved-next-count { font-size: 11px; color: var(--text-muted); }
.saved-row {
    display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; align-items: center; gap: 8px;
    width: 100%; text-align: left; padding: 6px 8px;
    background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
    font-size: 12.5px; color: var(--text);
}
.saved-row:hover { border-color: #e0245e; }
.saved-row-when { font-weight: 700; }
.saved-row-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.saved-row-state { font-size: 11.5px; font-weight: 700; color: var(--acc-programs); white-space: nowrap; }
.saved-row.is-live .saved-row-state { color: var(--live); }
.saved-row.is-live { border-left: 3px solid var(--live); }

/* ---- flat top bar: the iOS status bar (theme-color) and the bar read as one slab ---- */
body.dark-mode .top-bar { background: #17222d; }

/* ---- narrow phones: the List/Calendar switch gets the room "Calendar" needs ---- */
@media (max-width: 420px) {
    .view-seg { flex: 1.5 1 0; }
    .cal-week-btn { padding: 6px 8px; }
}

/* ---- dark mode ---- */
body.dark-mode .cal-daychip, body.dark-mode .cal-week-btn { background: #1b2530; border-color: #38485a; color: var(--text-muted); }
body.dark-mode .cal-daychip-num { color: var(--text); }
body.dark-mode .cal-daychip.today { border-color: var(--acc-programs); }
body.dark-mode .cal-daychip.in-view { background: color-mix(in srgb, var(--acc-programs) 22%, #1b2530); border-color: var(--acc-programs); }
body.dark-mode .saved-row { background: #1b2530; border-color: #38485a; }
body.dark-mode .cal-grid::-webkit-scrollbar-thumb { background: #38485a; }

/* ============================================================
   v3.5b — lean rink rows
   ============================================================ */
.rink-alert {
    display: inline-block; margin-left: 6px; vertical-align: 1px;
    font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--alert-amber); background: var(--alert-amber-bg);
    border-radius: 8px; padding: 1px 6px;
}
.rink-row.has-alert .rink-meta { color: var(--text-muted); }
.rink-sessions { white-space: nowrap; }
.rink-sessions:disabled { opacity: 0.55; cursor: default; }

/* ---- type pills carry an age picker (same look as the city pill) ---- */
.pill.type { font-weight: 600; }
.pill.type .pill-x { margin-left: 2px; padding: 2px 4px; border-radius: 8px; }
.pill.type .pill-x:hover { background: color-mix(in srgb, var(--acc-programs) 25%, transparent); opacity: 1; }

/* ---- wide screens: the schedule reads as a column, not a banner ----
   Percent padding is relative to the panel's own grid track, so this
   centres the content whether the schedule is alone or beside Guides/Chats. */
@media (min-width: 900px) {
    .view-panel.panel-programs { padding-inline: max(10px, calc((100% - 980px) / 2)); }
    .view-panel.panel-guides { padding-inline: max(16px, calc((100% - 760px) / 2)); }
}

/* ============================================================
   v3.5e — two-line cards, lit day chip, heart nudge
   ============================================================ */

/* rink line: the name is the directions link, the ℹ️ the official page */
.program-where .where-link { color: var(--text-muted); text-decoration: none; min-width: 0; }
.program-where .where-link:hover { color: var(--acc-programs); text-decoration: underline; }
.program-where .where-info { font-size: 13px; line-height: 1; text-decoration: none; opacity: 0.85; }
.program-where .where-info:hover { opacity: 1; }

/* the "Schedule" column label only earns its place next to Guides or Chats */
body.hide-guides.hide-chats .panel-programs .panel-title { display: none; }

/* tapping a day chip flashes its column (the only feedback on wide screens) */
@keyframes cal-ping {
    from { box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc-programs) 75%, transparent); }
    to   { box-shadow: 0 0 0 0 transparent; }
}
.cal-day.pinged { animation: cal-ping 0.9s ease-out; }
.cal-day.today.pinged { animation: none; outline: 2px solid var(--acc-programs); outline-offset: 1px; }

/* one-time heart nudge on the first card: pulsing ring + a dismissible line.
   The ring is a pseudo-element animating only transform + opacity: a
   box-shadow animation resized the button's layer every frame and made
   Safari flash black tiles across the page (reported 2026-09-15). */
@keyframes heart-nudge {
    0%   { transform: scale(1);    opacity: 0.85; }
    70%  { transform: scale(1.45); opacity: 0; }
    100% { transform: scale(1.45); opacity: 0; }
}
.btn-favorite.nudge { position: relative; border-color: #e0245e; }
.btn-favorite.nudge::after {
    content: ''; position: absolute; inset: -2px; border-radius: inherit;
    border: 2px solid #e0245e; opacity: 0; pointer-events: none;
    animation: heart-nudge 1.8s ease-out infinite;
}
.heart-hint {
    grid-column: 1 / -1;
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px;
    font-size: 12px; line-height: 1.35; color: var(--text);
    background: color-mix(in srgb, #e0245e 7%, var(--bg-white));
    border: 1px dashed color-mix(in srgb, #e0245e 45%, transparent);
    border-radius: 8px; padding: 6px 10px;
}
.heart-hint > span { flex: 1 1 200px; min-width: 0; }
.heart-hint b { color: #e0245e; font-size: 14px; line-height: 1; }
.heart-hint-x {
    margin-left: auto; background: var(--bg-white); border: 1px solid var(--border); border-radius: 6px;
    padding: 3px 9px; font-size: 11.5px; font-weight: 600; color: var(--text); cursor: pointer;
}
.heart-hint-x:hover { border-color: #e0245e; color: #e0245e; }
body.dark-mode .heart-hint { background: color-mix(in srgb, #e0245e 14%, #1b2530); }
body.dark-mode .heart-hint-x { background: #1b2530; border-color: #38485a; }
@media (prefers-reduced-motion: reduce) {
    .btn-favorite.nudge::after, .cal-day.pinged { animation: none; }
}

/* ---- search row: the box with Filters beside it (clear of the accent bar) ---- */
.search-row { display: flex; align-items: stretch; gap: 8px; margin: 8px 0 10px; }
.search-row .search-box { flex: 1 1 auto; min-width: 0; margin-bottom: 0; }
.search-row .search-box input { height: 40px; box-sizing: border-box; }
.tb-filters { flex: 0 0 auto; padding: 0 12px; }

/* ---- rink line extras: rink note as a small memo icon ---- */
.program-where .where-note { background: none; border: none; padding: 0; font-size: 13px; line-height: 1; cursor: pointer; opacity: 0.85; }
.program-where .where-note:hover { opacity: 1; }

/* ---- roomier ♡ and ⋯ ---- */
.program-actions button { width: 40px; height: 36px; }
.btn-favorite { font-size: 23px; }
.btn-copy { font-size: 21px; }

/* ---- end of the list: 30 more, or everything ---- */
.show-more { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.show-more .btn-more { margin: 0; }
.btn-more.all { color: var(--text-muted); }
.btn-more.all:hover { color: var(--text); }

/* ---- saved-day card: header spread out, rows with time range + length + distance ---- */
.saved-next { align-items: stretch; }
.saved-row { grid-template-columns: auto minmax(0, 1fr) auto; }
.saved-row-when { display: flex; flex-direction: column; line-height: 1.2; white-space: nowrap; }
.saved-row-when small { font-size: 10.5px; font-weight: 500; color: var(--text-muted); }
.saved-row-title .legend-dot { margin: 0 6px 0 0; }
.saved-row.is-alert .saved-row-state { color: var(--alert-red); }
.saved-row.is-warn .saved-row-state { color: var(--alert-amber); }
@media (max-width: 480px) {
    /* phones: let the title take two lines rather than cutting the rink off */
    .saved-row-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; }
}

/* ============================================================
   Calendar 2.0 (experimental, Settings → Display) — the day planner
   ============================================================ */
.c2-empty { padding: 26px 0; }
.c2-by { display: flex; margin: 0 0 10px; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--bg-white); }
.c2-by button { flex: 1 1 0; height: 38px; background: none; border: none; border-radius: 0; font-size: 13.5px; font-weight: 600; color: var(--text-muted); }
.c2-by button + button { border-left: 1px solid var(--border); }
.c2-by button.active { background: var(--acc-programs); color: #fff; }

.c2-day { display: flex; flex-direction: column; gap: 10px; }
.c2-part { background: var(--bg-white); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 8px 8px; }
.c2-part.now { border-color: var(--live); box-shadow: inset 3px 0 0 var(--live); }
.c2-part.empty { opacity: 0.7; }
.c2-part-head { display: flex; align-items: baseline; gap: 7px; margin: 0 2px 8px; font-size: 16px; font-weight: 700; color: var(--text); }
.c2-part-emoji { font-size: 17px; }
.c2-part-n { font-size: 12.5px; font-weight: 500; color: var(--text-muted); }
.c2-part-now { margin-left: auto; font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--live); border: 1px solid var(--live); border-radius: 999px; padding: 1px 8px; }
.c2-rink .c2-part-head { font-size: 14.5px; }
.c2-rink.mine .c2-part-head { color: var(--acc-programs); }
.c2-ended-fold { display: block; width: 100%; margin: 0 0 8px; padding: 7px; font-size: 12.5px; font-weight: 600; color: var(--text-muted); background: var(--bg); border: 1px dashed var(--border); border-radius: 8px; cursor: pointer; }
.c2-ended-fold:hover { color: var(--text); border-color: var(--border-dark); }

.c2-line { display: flex; align-items: stretch; gap: 6px; }
.c2-line + .c2-line { margin-top: 5px; }
.c2-line-main {
    flex: 1 1 auto; min-width: 0;
    display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 10px;
    padding: 8px 10px; text-align: left;
    background: var(--bg); border: 1px solid var(--border); border-left-width: 5px; border-radius: 9px;
    font-size: 13px; color: var(--text); cursor: pointer; transition: border-color 0.15s;
}
.c2-line-main[class*="cal-type-"] { border-left-color: var(--ct); }
.c2-line-main:hover { border-color: var(--acc-programs); border-left-color: var(--ct, var(--acc-programs)); }
.c2-line-time { display: flex; flex-direction: column; line-height: 1.15; min-width: 78px; font-variant-numeric: tabular-nums; }
.c2-line-time b { font-size: 15.5px; font-weight: 700; white-space: nowrap; }
.c2-line-time small { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; }
.c2-line-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.c2-line-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; }
.c2-line-name { flex: 1 1 auto; min-width: 0; font-size: 14.5px; font-weight: 600; line-height: 1.2; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.c2-line-meta { font-size: 12.5px; color: var(--text-muted); line-height: 1.3; }
.c2-kind { font-weight: 700; color: var(--ct, var(--text)); }
.c2-paid { color: var(--paid); font-weight: 700; }
.c2-free { color: var(--live); font-weight: 700; }
.c2-line-state { flex: 0 0 auto; margin-left: auto; font-size: 11.5px; font-weight: 700; white-space: nowrap; color: var(--text-muted); }
.c2-line-state.live { color: var(--live); }
.c2-line-state.soon { color: var(--acc-programs); }
.c2-line-state.alert { color: var(--alert-red); }
.c2-line-state.warn { color: var(--alert-amber); }
.c2-line.cal-ended .c2-line-main { opacity: 0.55; }
.c2-line.cal-closed .c2-line-name { text-decoration: line-through; }
.c2-line-fav { flex: 0 0 46px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg-white); font-size: 23px; line-height: 1; color: #e0245e; cursor: pointer; }
.c2-line-fav:hover { border-color: #e0245e; }
@media (min-width: 900px) {
    .c2-day.by-time { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
}

/* the official-page glyph on the rink line (list rows) */
.program-where .where-info { display: inline-flex; align-items: center; color: var(--text-muted); opacity: 1; }
.program-where .where-info:hover { color: var(--acc-programs); }

body.dark-mode .c2-by, body.dark-mode .c2-part, body.dark-mode .c2-line-fav { background: #1b2530; border-color: #38485a; }
body.dark-mode .c2-part.now { border-color: var(--live); }
body.dark-mode .c2-line-main { background: #141c25; border-color: #38485a; }
body.dark-mode .c2-line-main[class*="cal-type-"] { border-left-color: var(--ct); }
body.dark-mode .c2-ended-fold { background: #141c25; border-color: #38485a; }
body.dark-mode .c2-kind { color: color-mix(in srgb, var(--ct, var(--text)) 60%, #fff); }

/* ============================================================
   v3.6 — Other group, visible age, official-page chip, install card, clear location
   ============================================================ */
.program-where .where-info { gap: 4px; padding: 1px 7px 1px 5px; border: 1px dashed var(--border-dark); border-radius: 10px; font-size: 11px; font-weight: 600; line-height: 1.5; color: var(--text-muted); text-decoration: none; }
.program-where .where-info .where-info-site { order: 1; }
.program-where .where-info:hover { color: var(--acc-programs); border-color: var(--acc-programs); }
.fcat.group .fcheck-label { font-weight: 600; }
.fage-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fage { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.fage input { width: 74px; height: 38px; padding: 0 10px; font-size: 15px; text-align: center; }
.install-card { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 8px; padding: 10px 12px; background: color-mix(in srgb, var(--acc-programs) 8%, var(--bg-white)); border: 1px dashed color-mix(in srgb, var(--acc-programs) 55%, var(--border)); border-radius: var(--radius); font-size: 13px; line-height: 1.4; }
.install-text { flex: 1 1 220px; min-width: 0; }
.install-btns { display: flex; gap: 8px; }
.install-btns button { padding: 7px 12px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg-white); font-size: 12.5px; font-weight: 600; color: var(--text); }
.install-btns .btn-primary { border-color: transparent; color: #fff; }
.install-steps { margin: 0 0 12px 20px; padding: 0; font-size: 14px; line-height: 1.6; }
.rinks-locate #btn-clear-location { padding: 0 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-white); font-size: 12.5px; color: var(--text-muted); }
.rinks-locate #btn-clear-location:hover { color: var(--text); border-color: var(--border-dark); }
body.dark-mode .install-card { background: color-mix(in srgb, var(--acc-programs) 14%, #1b2530); }
body.dark-mode .install-btns button, body.dark-mode .rinks-locate #btn-clear-location { background: #1b2530; border-color: #38485a; color: var(--text); }
body.dark-mode .install-btns .btn-primary { color: #fff; border-color: transparent; }

/* ---- message the dev ---- */
.list-foot { text-align: center; margin: 4px 0 18px; }
.list-foot .flink { background: none; border: none; font-size: 12.5px; color: var(--text-muted); text-decoration: underline; cursor: pointer; }
.list-foot .flink:hover { color: var(--acc-programs); }
.modal.sheet.devchat { display: flex; flex-direction: column; max-height: 88vh; }
.devchat .modal-header { align-items: flex-start; }
.devchat .modal-header .settings-hint { margin: 2px 0 0; }
.devchat-threads { display: flex; gap: 6px; overflow-x: auto; padding: 0 0 8px; }
.devchat-thread { flex: 0 0 auto; padding: 5px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg); font-size: 12px; color: var(--text); }
.devchat-thread.active { border-color: var(--acc-programs); color: var(--acc-programs); }
.devchat-unread { margin-left: 6px; padding: 0 6px; border-radius: 999px; background: #e0245e; color: #fff; font-size: 10.5px; }
.devchat-messages { flex: 1 1 auto; min-height: 160px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 6px 2px; }
.devchat-empty { color: var(--text-muted); font-size: 13px; text-align: center; padding: 18px 8px; }
.devchat-msg { max-width: 86%; align-self: flex-start; background: var(--bg); border: 1px solid var(--border); border-radius: 12px 12px 12px 4px; padding: 8px 10px; font-size: 14px; line-height: 1.4; }
.devchat-msg.mine { align-self: flex-end; background: color-mix(in srgb, var(--acc-programs) 16%, var(--bg-white)); border-color: color-mix(in srgb, var(--acc-programs) 40%, var(--border)); border-radius: 12px 12px 4px 12px; }
.devchat-msg.failed { border-color: var(--alert-red); }
.devchat-text { white-space: pre-wrap; word-break: break-word; }
.devchat-img, .msg-img { display: block; max-width: 100%; max-height: 320px; border-radius: 8px; }
.devchat-ctx { margin-top: 6px; font-size: 11px; color: var(--text-muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-word; }
.devchat-when { margin-top: 4px; font-size: 10.5px; color: var(--text-muted); }
.devchat-preview { position: relative; display: inline-block; margin: 4px 0; }
.devchat-preview img { max-height: 90px; border-radius: 8px; border: 1px solid var(--border); }
.devchat-preview-x { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; border: none; background: var(--text); color: var(--bg-white); font-size: 12px; cursor: pointer; }
.devchat-compose { display: flex; align-items: flex-end; gap: 6px; padding-top: 8px; border-top: 1px solid var(--border); }
.devchat-compose textarea { flex: 1 1 auto; min-height: 44px; max-height: 140px; resize: vertical; font-size: 14px; }
.devchat-compose .btn-icon { width: 40px; height: 40px; min-width: 40px; font-size: 18px; }
.devchat-compose .btn-primary { height: 40px; padding: 0 16px; }
.devchat-foot { margin: 8px 0 0; }
body.dark-mode .devchat-msg { background: #141c25; border-color: #38485a; }
body.dark-mode .devchat-msg.mine { background: color-mix(in srgb, var(--acc-programs) 22%, #1b2530); }
body.dark-mode .devchat-thread { background: #141c25; border-color: #38485a; }

/* ---- top bar: stacked pills (Show paid, Report bug & feedback) ---- */
.top-bar h1 { min-width: 0; }
.top-bar-actions { gap: 8px; }
.top-toggle { padding: 0 10px 0 9px; gap: 6px; }
.top-toggle-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.05; font-size: 11px; letter-spacing: 0.01em; }
.top-toggle-icon { font-size: 14px; line-height: 1; }
.top-feedback:hover { border-color: var(--acc-programs); color: var(--text); }
@media (max-width: 420px) {
    .top-bar { gap: 6px; padding-left: 8px; padding-right: 8px; }
    .top-bar h1 { font-size: 15px; overflow: hidden; text-overflow: ellipsis; }
    .top-bar-actions { gap: 5px; }
    .top-toggle { padding: 0 7px 0 7px; gap: 5px; }
    .top-toggle-text { font-size: 10.5px; }
    .top-toggle-icon { display: none; }
}

/* ---- installed iOS copies: iOS 26 paints a frosted band roughly 62–100 pt from the
   top of the screen, over whatever the page shows there, and nothing turns it off.
   So the bar's content starts below the band and the band blurs a flat colour. ---- */
html.ios-standalone .top-bar { padding-top: calc(44px + env(safe-area-inset-top, 0px)); }

/* ---- report a bug / feedback sheet ---- */
.modal.sheet.devchat { display: flex; flex-direction: column; max-height: 88vh; position: relative; }
@media (min-width: 768px) { .modal.sheet.devchat { max-width: 720px; max-height: 84vh; } .devchat-messages { min-height: 240px; } }
.devchat-intro { padding: 6px 4px 2px; font-size: 14px; line-height: 1.45; color: var(--text); }
.devchat-intro p { margin: 0 0 10px; }
.devchat-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.devchat-chip { padding: 7px 12px; border: 1px solid color-mix(in srgb, var(--acc-programs) 45%, var(--border)); border-radius: 999px; background: color-mix(in srgb, var(--acc-programs) 8%, var(--bg-white)); font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer; }
.devchat-chip:hover { border-color: var(--acc-programs); }
.devchat-note { font-size: 12px; color: var(--text-muted); }
.devchat-drop[hidden] { display: none; }
.devchat-drop { position: absolute; inset: 8px; z-index: 5; display: flex; align-items: center; justify-content: center; border: 2px dashed var(--acc-programs); border-radius: var(--radius-lg, 14px); background: color-mix(in srgb, var(--acc-programs) 12%, var(--bg-white)); font-size: 15px; font-weight: 600; color: var(--text); pointer-events: none; }
.devchat-preview { display: flex; align-items: center; gap: 10px; }
.devchat-preview-name { font-size: 12.5px; color: var(--text-muted); }
.devchat-preview-x { position: static; width: 26px; height: 26px; }
.devchat-compose { display: block; }
.devchat-compose textarea { width: 100%; box-sizing: border-box; min-height: 72px; max-height: 200px; resize: vertical; font-size: 15px; line-height: 1.4; padding: 10px 12px; }
.devchat-tools { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.devchat-tool { padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-white); font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer; }
.devchat-tool:hover { border-color: var(--acc-programs); }
.devchat-tip { flex: 1 1 140px; font-size: 11.5px; color: var(--text-muted); }
.devchat-tools .btn-primary { height: 38px; padding: 0 18px; margin-left: auto; }
.devchat-tools .btn-primary:disabled { opacity: 0.45; cursor: default; }
body.dark-mode .devchat-chip { background: color-mix(in srgb, var(--acc-programs) 14%, #1b2530); border-color: #38485a; }
body.dark-mode .devchat-tool { background: #1b2530; border-color: #38485a; }
body.dark-mode .devchat-drop { background: color-mix(in srgb, var(--acc-programs) 18%, #1b2530); }

/* the feedback pill reads as the special one: accent tint, not the paid pill's neutral */
.top-feedback { background: color-mix(in srgb, var(--acc-programs) 14%, var(--bg-white)); border-color: color-mix(in srgb, var(--acc-programs) 55%, var(--border)); color: color-mix(in srgb, var(--acc-programs) 80%, var(--text)); }
.top-feedback:hover { background: color-mix(in srgb, var(--acc-programs) 24%, var(--bg-white)); border-color: var(--acc-programs); color: var(--text); }
body.dark-mode .top-feedback { background: color-mix(in srgb, var(--acc-programs) 22%, #1b2530); border-color: color-mix(in srgb, var(--acc-programs) 60%, #38485a); color: color-mix(in srgb, var(--acc-programs) 75%, #fff); }
body.dark-mode .top-feedback:hover { background: color-mix(in srgb, var(--acc-programs) 34%, #1b2530); color: #fff; }

/* ---- no focus-zoom on phones: iOS zooms the page into any field under 16 px.
   The base rule above sets 16 px on small screens; these classed fields set
   their own size later in the cascade, so they are pinned here. ---- */
@media (max-width: 767px), (pointer: coarse) {
    .rinks-locate input, .fage input, .devchat-compose textarea, #settings-name, #locator-input,
    .search-row .search-box input, .chat-input-bar input, .chat-input-bar textarea { font-size: 16px; }
    .fage input { width: 80px; }
}

/* ---- "2 pads": the same session listed once per pad by the venue, merged into one card ---- */
.pads-badge { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 10px; font-size: 11px; font-weight: 700; white-space: nowrap; background: var(--bg); color: var(--text-muted); border: 1px solid var(--border); }
body.dark-mode .pads-badge { background: #1b2530; border-color: #38485a; }

/* ---- Free only: the green switch that replaced Show paid ---- */
.top-toggle.free:hover { border-color: var(--live); }
.top-toggle.free.active { background: color-mix(in srgb, var(--live) 16%, var(--bg-white)); border-color: var(--live); color: var(--text); }
.top-toggle.free.active .top-toggle-dot { background: var(--live); box-shadow: 0 0 0 3px color-mix(in srgb, var(--live) 25%, transparent); }
body.dark-mode .top-toggle.free.active { background: color-mix(in srgb, var(--live) 22%, #1b2530); border-color: var(--live); color: var(--text); }

/* ---------- v3.7: venue facts (skate rentals, from the rink's own site) ---------- */
.facts-badge { display: inline-flex; align-items: center; gap: 3px; padding: 3px 8px; border-radius: 10px; font-size: 11px; font-weight: 700; white-space: nowrap; text-decoration: none; background: var(--bg); color: var(--text-muted); border: 1px solid var(--border); }
.facts-badge.yes { color: var(--live, #2e9e5b); border-color: var(--live, #2e9e5b); }
a.facts-badge:hover, a.facts-badge:focus-visible { text-decoration: underline; }
body.dark-mode .facts-badge { background: #1b2530; border-color: #38485a; }
body.dark-mode .facts-badge.yes { border-color: var(--live, #4cc27a); }

/* ---------- v3.7b: map interactivity (rink names fly to pins; a visible You marker) ---------- */
.rink-row[data-map-focus] { cursor: pointer; transition: border-color .15s ease; -webkit-tap-highlight-color: transparent; }
.rink-row.focused { border-color: var(--acc-programs); }
@media (hover: hover) { .rink-row[data-map-focus]:hover { border-color: var(--acc-programs); } }   /* no sticky highlight after a tap on phones */
.rink-row[data-map-focus]:focus-visible { outline: 2px solid var(--acc-programs); outline-offset: 2px; }
.rink-row .btn-small { cursor: pointer; }
.you-pin-wrap { background: transparent; border: 0; }
.you-pin { position: relative; width: 0; height: 0; }
.you-dot { position: absolute; left: 0; top: 0; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: #1673c4; border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .45); }
.you-ring { position: absolute; left: 0; top: 0; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; border: 3px solid #2f9fc4; opacity: .9; animation: you-pulse 2s ease-out infinite; }
@keyframes you-pulse { 0% { transform: scale(.35); opacity: .9; } 100% { transform: scale(1.3); opacity: 0; } }
.you-label { position: absolute; left: 0; top: 12px; transform: translateX(-50%); background: #1673c4; color: #fff; font: 700 11px/1 system-ui, -apple-system, sans-serif; padding: 4px 8px; border-radius: 10px; white-space: nowrap; box-shadow: 0 2px 6px rgba(0, 0, 0, .35); }
@media (prefers-reduced-motion: reduce) { .you-ring { animation: none; transform: scale(.6); } }

/* ---------- v3.8: chat (day separators, grouping, reactions, unsend, paging, offline, mentions) ---------- */
.chat-day { display: flex; align-items: center; gap: 10px; margin: 10px 0 8px; color: var(--text-muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.chat-day::before, .chat-day::after { content: ''; flex: 1; border-top: 1px solid var(--border); }
.chat-msg.cont { margin-top: -4px; }
.chat-msg.deleted .bubble { font-style: italic; color: var(--text-muted); background: transparent; border-style: dashed; }
.chat-msg.mentions-me .bubble { box-shadow: inset 3px 0 0 var(--acc-chats); }
.mention { color: var(--acc-chats); font-weight: 600; }
mark.mention.me { background: color-mix(in srgb, var(--acc-chats) 24%, transparent); color: inherit; border-radius: 4px; padding: 0 2px; }
.reacts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.chat-msg.mine .reacts { justify-content: flex-end; }
.react-chip { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 10px; font-size: 12px; line-height: 1.3; background: var(--bg); border: 1px solid var(--border); color: var(--text); cursor: pointer; }
.react-chip.mine { border-color: var(--acc-chats); background: color-mix(in srgb, var(--acc-chats) 14%, var(--bg)); }
.popover-reacts { display: flex; gap: 2px; padding: 6px 8px; border-bottom: 1px solid var(--border); }
.react-pick { font-size: 20px; line-height: 1; padding: 4px 6px; border-radius: 8px; background: transparent; border: 1px solid transparent; cursor: pointer; }
.react-pick:hover, .react-pick.active { background: var(--bg); border-color: var(--border); }
.react-pick.active { border-color: var(--acc-chats); }
.load-earlier-wrap { text-align: center; margin: 2px 0 10px; }
.load-earlier { font-size: 12px; padding: 5px 12px; border-radius: 12px; background: var(--bg); border: 1px solid var(--border); color: var(--text-muted); cursor: pointer; }
.load-earlier:hover:not([disabled]) { color: var(--acc-chats); border-color: var(--acc-chats); }
.load-earlier[disabled] { opacity: .6; cursor: default; }
.chat-netbar { padding: 6px 12px; font-size: 12px; background: color-mix(in srgb, var(--alert-amber, #d98a00) 18%, var(--bg)); color: var(--text); border-bottom: 1px solid var(--border); }
.chat-input-bar textarea { flex: 1; resize: none; border-radius: 20px; padding: 10px 16px; max-height: 120px; line-height: 1.35; font: inherit; font-size: 16px; }
.dm-unread-badge.mention { background: var(--acc-chats); }
.community-loading p { margin: 0 0 8px; }
body.dark-mode .react-chip, body.dark-mode .load-earlier { background: #1b2530; border-color: #38485a; }
body.dark-mode .react-chip.mine { border-color: var(--acc-chats); }
/* Tablets and small desktops (768–1099px): the chat used to sit in a 380px column (a relic of the
   old three-pane flex layout) with the rest of the window empty; it now fills the panel like the others. */
@media (min-width: 768px) and (max-width: 1099px) {
    .main-content .view-panel.panel-chats.chat-panel-view { max-width: none; flex: none; width: auto; }
}

/* ---------- v3.8a: popover ✕ + the update bar ---------- */
.popover-head { display: flex; align-items: center; gap: 8px; padding: 4px 4px 6px 10px; margin-bottom: 2px; border-bottom: 1px solid var(--border); }
.popover-title { flex: 1; min-width: 0; font-size: 12px; font-weight: 700; color: var(--text-muted); letter-spacing: .02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.popover-close { flex-shrink: 0; background: var(--bg); border: 1px solid var(--border); color: var(--text-muted); font-size: 12px; width: 26px; height: 26px; border-radius: 50%; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.popover-close:hover, .popover-close:focus-visible { color: var(--text); border-color: var(--text-muted); }
.update-bar { display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: color-mix(in srgb, var(--acc-programs, #52c5ec) 16%, var(--bg)); border-bottom: 1px solid var(--border); font-size: 13px; color: var(--text); }
.update-bar.hidden { display: none; }
.update-bar span { flex: 1; min-width: 0; }
.update-bar .btn-update { background: var(--acc-programs, #52c5ec); color: #0b1620; font-weight: 700; border: none; padding: 6px 12px; border-radius: 10px; cursor: pointer; }
.update-bar .btn-icon { width: 30px; height: 30px; }