/* The game shell's own styling, from base.html.
 *
 * Moved out of templates/base.html on 2026-08-31: the 2 top-level
 * blocks of it. 11 blocks stayed inline because they render inside
 * {% if %} and a <link> cannot be conditional.
 *
 * Inline CSS is re-sent on every request and cached by nobody.
 * url_for('static', ...) keys this URL on the file's own CONTENT hash
 * and serves it immutable for a year.
 */

    /* Presence status dot — wraps any girl avatar */
    .presence-wrap { position: relative; display: inline-block; flex-shrink: 0; }
    .presence-dot {
        position: absolute; bottom: -1px; right: -1px; z-index: 2;
        width: 10px; height: 10px; border-radius: 50%;
        border: 2px solid var(--presence-border);
        background: var(--red); /* red = not working */
    }
    .presence-dot.active { background: var(--green); /* green = working */ }
    /* Predicted-but-not-confirmed: hollow ring instead of solid disc.
       Used during PREDICTIVE/DECAYING states (the morning blind spot)
       when she has not clocked in yet but the 30-day history says she
       likely will today. Dot fills in solid the moment she clocks in. */
    .presence-dot.active.predicted {
        background: transparent;
        box-shadow: inset 0 0 0 2px var(--green);
    }
    /* Scale dot for small avatars (28px) */
    .presence-wrap.sm .presence-dot { width: 8px; height: 8px; border-width: 1.5px; bottom: -1px; right: -1px; }
    .presence-wrap.sm .presence-dot.active.predicted { box-shadow: inset 0 0 0 1.5px var(--green); }
    /* Scale dot for large avatars (60px+) */
    .presence-wrap.lg .presence-dot { width: 12px; height: 12px; bottom: 0; right: 0; }
    .presence-wrap.lg .presence-dot.active.predicted { box-shadow: inset 0 0 0 2.5px var(--green); }

    /* Blind-spot banner — rendered by _presence.blind_spot_banner()
       between 09:00 and 13:00 Thai. Plain prose explainer; tiny
       inline dot swatches show the hollow-vs-solid distinction so
       a player can pattern-match without leaving the page. */
    .blind-spot-banner {
        display: flex; align-items: center; gap: 0.6rem;
        padding: 0.6rem 0.85rem; margin: 0 0 1rem;
        border: 1px solid color-mix(in srgb, var(--green) 35%, transparent);
        background: color-mix(in srgb, var(--green) 8%, transparent);
        border-radius: 10px;
        font-size: 0.82rem; line-height: 1.45;
        color: var(--text-body, var(--text-heading));
    }
    .blind-spot-banner .bsb-icon { font-size: 1.1rem; flex-shrink: 0; }
    .blind-spot-banner .bsb-body { flex: 1; }
    .blind-spot-banner .bsb-body strong { color: var(--text-heading); }
    .blind-spot-banner .bsb-dot {
        display: inline-block; width: 11px; height: 11px;
        border-radius: 50%; vertical-align: -2px;
        margin: 0 0.05rem;
    }
    .blind-spot-banner .bsb-dot.bsb-hollow {
        background: transparent;
        box-shadow: inset 0 0 0 2px var(--green);
    }
    .blind-spot-banner .bsb-dot.bsb-solid { background: var(--green); }
    /* Presence filter toggle */
    .presence-filter {
        display: inline-flex; align-items: center; gap: 0.35rem;
        padding: 0.3rem 0.6rem; border-radius: 6px; font-size: 0.7rem; font-weight: 600;
        cursor: pointer; user-select: none; border: 1px solid var(--border);
        background: var(--bg-card); color: var(--text-secondary); transition: all 0.2s;
    }
    .presence-filter:hover { border-color: var(--accent-border); color: var(--text-primary); }
    .presence-filter.filter-working { border-color: rgba(46,204,113,0.4); color: var(--green); background: rgba(46,204,113,0.1); }
    .presence-filter.filter-not-working { border-color: rgba(231,76,60,0.4); color: var(--red); background: rgba(231,76,60,0.1); }
    .presence-filter .pf-dot { width: 8px; height: 8px; border-radius: 50%; }
    .presence-filter .pf-dot.green { background: var(--green); }
    .presence-filter .pf-dot.red { background: var(--red); }

    /* Global themed select — override system dropdown chrome */
    select, .themed-select {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-color: var(--select-bg);
        background-image: var(--select-chevron);
        background-repeat: no-repeat;
        background-position: right 0.6rem center;
        background-size: 10px 7px;
        border: 1px solid var(--border);
        border-radius: 8px;
        color: var(--text-heading);
        font-size: 0.85rem;
        font-weight: 600;
        padding: 0.45rem 2rem 0.45rem 0.75rem;
        outline: none;
        cursor: pointer;
        transition: border-color 0.2s;
    }
    select:hover, .themed-select:hover { border-color: var(--accent-border); }
    select:focus, .themed-select:focus { border-color: var(--accent); }
    select option {
        background: var(--select-bg);
        color: var(--text-heading);
        padding: 0.4rem;
    }
    

    /* Staff profile links — consistent dotted-underline treatment so a
       clickable name reads as "this goes somewhere" without disrupting
       the surrounding layout. Inherits colour from the parent by default. */
    a.staff-link {
        color: inherit;
        text-decoration: none;
        border-bottom: 1px dotted color-mix(in srgb, currentColor 45%, transparent);
        transition: color 0.12s, border-color 0.12s;
    }
    a.staff-link:hover {
        color: var(--scheme-primary, var(--accent));
        border-bottom-color: currentColor;
    }
    /* Cashier names render in a distinct, theme-tuned colour so cashiers are
       identifiable in every staff list (roster cashiers section, bench,
       group / organize) on both surfaces. `--cashier-name` is set per theme
       in themes/*.css; on mobile the .m-name rule maps it to the light-palette
       teal (--mc-cashier). Needs `a.cashier-name` specificity (0,1,1) to beat
       `a.staff-link { color: inherit }`; keep it after that rule. */
    a.cashier-name, .cashier-name { color: var(--cashier-name); }
    a.cashier-name:hover { color: var(--cashier-name); }
    .m-name { --cashier-name: var(--mc-cashier); }

    /* Swap / hire / compare modal scaffolding — hoisted here so every
       template that uses .swap-overlay + .swap-modal (e.g. the Compare
       modal on /scouting, the Captain picker on /staff, the hire modals
       on /home) renders correctly even if the surrounding page didn't
       re-declare these styles locally. */
    .swap-overlay {
        display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
        background: var(--overlay-bg, rgba(10, 20, 30, 0.55));
        /* Above mobile-top-shield (1050), floating top-nav buttons (1100),
           and notif-backdrop (1150) so the modal isn't pierced by the
           fixed top row on mobile. Matches sidebar's 1200. */
        z-index: 1200; justify-content: center; align-items: center;
    }
    .swap-overlay.open { display: flex; }
    .swap-modal {
        background: var(--bg-card-solid, var(--bg-card));
        border: 1px solid var(--border); border-radius: 16px;
        padding: 1.5rem; max-width: 520px; width: 90%;
        max-height: 80vh; overflow-y: auto; position: relative;
    }
    .swap-modal h3 { font-size: 1.1rem; margin-bottom: 0.25rem; }
    .swap-close {
        position: absolute; top: 0.75rem; right: 0.9rem;
        background: none; border: none;
        color: var(--text-secondary); font-size: 1.4rem; cursor: pointer;
        line-height: 1;
    }
    .swap-close:hover { color: var(--text-heading); }
    .swap-sub { font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 1rem; }

    /* Mobile top-shield: a full-width opaque bar that sits BEHIND the fixed
       hamburger + gear/camera/bell buttons so scrolled content doesn't
       bleed through the gaps between them. Desktop uses the sidebar and
       doesn't need this. */
    .mobile-top-shield {
        display: none;
        position: fixed; top: 0; left: 0; right: 0;
        height: 56px;
        background: var(--bg-card-solid);
        border-bottom: 1px solid var(--border);
        z-index: 1050;  /* below 1100 (the buttons) so they float on top */
        pointer-events: none;
    }
    @media (max-width: 768px) {
        .mobile-top-shield { display: block; }
    }

    /* ── Header icon cluster ──────────────────────────────────────────
       Fixed, right-aligned, read right-to-left:

         bell · Chat · Inbox · scan · scout · games · School   (· cog)

       Every slot is a 40px square with a 4px gap, so each offset steps
       by 2.75rem. Chat and Inbox sit nearest the bell deliberately: all
       three are "someone is waiting on you" surfaces and they moved out
       of the sidebar in the 12→6 nav change, so they get the two most
       reachable positions rather than the leftmost leftovers.

       Buttons stay individually `position: fixed` rather than living in
       a flex row, so anything hidden at a breakpoint must be the
       LEFTMOST visible item or a gap opens mid-cluster. School shrinks
       to icon-only at ≤1200px instead of disappearing, since it is the
       widest item and the only permanent re-entry point to the Table of
       Knowledge. */
    /* Notification bell */
    .notif-bell {
        position: fixed; top: 0.75rem; right: 0.75rem; z-index: 1100;
        background: var(--bg-card-solid); border: 1px solid var(--border); border-radius: 8px;
        color: var(--text-primary); font-size: 1.2rem; width: 40px; height: 40px;
        display: flex; align-items: center; justify-content: center;
        cursor: pointer; line-height: 1; padding: 0;
    }
    .notif-bell:hover { border-color: var(--accent-border); }
    /* Chat — real-lady conversations. Carries the unread badge, which is
       the thing players actually scan the header for. */
    .chat-header-btn {
        position: fixed; top: 0.75rem; right: 3.5rem; z-index: 1100;
        background: var(--bg-card-solid); border: 1px solid var(--border); border-radius: 8px;
        color: var(--text-primary); font-size: 1.15rem; width: 40px; height: 40px;
        display: flex; align-items: center; justify-content: center;
        cursor: pointer; line-height: 1; padding: 0; text-decoration: none;
    }
    .chat-header-btn:hover { border-color: var(--accent-border); }
    .chat-header-btn.active, .inbox-header-btn.active { border-color: var(--scheme-primary); }
    /* Inbox — unbadged on purpose; the bell two slots over already
       carries urgency and two red dots side by side read as noise. */
    .inbox-header-btn {
        position: fixed; top: 0.75rem; right: 6.25rem; z-index: 1100;
        background: var(--bg-card-solid); border: 1px solid var(--border); border-radius: 8px;
        color: var(--text-primary); font-size: 1.15rem; width: 40px; height: 40px;
        display: flex; align-items: center; justify-content: center;
        cursor: pointer; line-height: 1; padding: 0; text-decoration: none;
    }
    .inbox-header-btn:hover { border-color: var(--accent-border); }
    @media (max-width: 720px) {
        .chat-header-btn, .inbox-header-btn { display: none; }
    }
    /* Bill scan button */
    .scan-bill-btn {
        position: fixed; top: 0.75rem; right: 9rem; z-index: 1100;
        background: var(--bg-card-solid); border: 1px solid var(--border); border-radius: 8px;
        color: var(--text-primary); font-size: 1.2rem; width: 40px; height: 40px;
        display: flex; align-items: center; justify-content: center;
        cursor: pointer; line-height: 1; padding: 0;
    }
    .scan-bill-btn:hover { border-color: var(--accent-border); }
    /* Scout search — left of the camera, opens the find-a-bar typeahead */
    .scout-search-btn {
        position: fixed; top: 0.75rem; right: 11.75rem; z-index: 1100;
        background: var(--bg-card-solid); border: 1px solid var(--border); border-radius: 8px;
        color: var(--text-primary); font-size: 1.2rem; width: 40px; height: 40px;
        display: flex; align-items: center; justify-content: center;
        cursor: pointer; line-height: 1; padding: 0;
    }
    .scout-search-btn:hover { border-color: var(--accent-border); }
    /* Hide on narrow viewports — mobile header has its own scout icon */
    @media (max-width: 720px) { .scout-search-btn { display: none; } }
    /* Mini games launcher — left of scout, opens the games picker */
    .games-launcher-btn {
        position: fixed; top: 0.75rem; right: 14.5rem; z-index: 1100;
        background: var(--bg-card-solid); border: 1px solid var(--border); border-radius: 8px;
        color: var(--text-primary); font-size: 1.05rem; width: 40px; height: 40px;
        display: flex; align-items: center; justify-content: center;
        cursor: pointer; line-height: 1; padding: 0;
    }
    .games-launcher-btn:hover { border-color: var(--accent-border); }
    @media (max-width: 720px) { .games-launcher-btn { display: none; } }
    /* Bar Owner School chip — chair + progress fraction, opens the
       Table of Knowledge modal. Permanent re-entry surface in the
       header so the curriculum is always one click away from any
       page, not just /home. */
    .school-btn {
        position: fixed; top: 0.75rem; right: 17.25rem; z-index: 1100;
        background: var(--bg-card-solid); border: 1px solid var(--border); border-radius: 999px;
        color: var(--text-primary);
        height: 40px; min-width: 40px;
        display: flex; align-items: center; gap: 6px;
        padding: 0 12px 0 8px;
        cursor: pointer; line-height: 1;
        font: 700 12px/1 system-ui;
    }
    .school-btn .school-btn-icon { font-size: 1.2rem; }
    .school-btn .school-btn-label {
        font-size: 12px; font-weight: 700;
        letter-spacing: 0.02em;
    }
    .school-btn .school-btn-count {
        font-variant-numeric: tabular-nums;
        color: var(--text-secondary);
    }
    .school-btn:hover { border-color: var(--accent-border); }
    /* Narrow desktop (1024–1200px): the cluster is now seven buttons, so
       drop School to its chair glyph rather than hiding it. Reclaims
       ~70px, the largest single saving available, and the only gap it
       opens is to its left where the (invisible, admin-only) cog sits. */
    @media (min-width: 721px) and (max-width: 1200px) {
        .school-btn { padding: 0; width: 40px; justify-content: center; }
        .school-btn .school-btn-label,
        .school-btn .school-btn-count { display: none; }
    }

    /* Desktop hover popdown — gives a new player who hovers the chair
       a quick "what is this thing" reveal, in addition to the native
       title tooltip. CSS-only; appears below the button on hover/focus. */
    .school-btn::after {
        content: 'Bar Owner School. Click to open the Table of Knowledge.';
        position: absolute; top: 100%; right: 0; margin-top: 8px;
        white-space: nowrap;
        background: var(--bg-card-solid); color: var(--text-primary);
        border: 1px solid var(--border); border-radius: 8px;
        padding: 8px 12px; font: 600 12px/1.4 system-ui;
        box-shadow: 0 8px 24px rgba(0,0,0,0.18);
        opacity: 0; pointer-events: none; visibility: hidden;
        transform: translateY(-4px);
        transition: opacity 120ms ease, transform 120ms ease, visibility 120ms;
    }
    .school-btn:hover::after, .school-btn:focus-visible::after {
        opacity: 1; transform: translateY(0); visibility: visible;
    }
    @media (max-width: 720px) { .school-btn { display: none; } }

    /* Admin cog — only rendered for system users.
       Sits to the left of .school-btn (chip with icon + label +
       progress count is ~9rem wide, so cog is parked clear of it with
       a small gap). */
    .admin-cog-btn {
        position: fixed; top: 0.75rem; right: 26.5rem; z-index: 1100;
        background: var(--bg-card-solid); border: 1px solid var(--border); border-radius: 8px;
        color: var(--gold); font-size: 1.2rem; width: 40px; height: 40px;
        display: flex; align-items: center; justify-content: center;
        cursor: pointer; line-height: 1; padding: 0;
        text-decoration: none;
        transition: all 0.15s;
        /* Hidden until hovered so it stays out of marketing/Steam
           screenshots. opacity:0 still receives clicks, so an admin who
           knows where it sits can hover the spot to reveal and use it. */
        opacity: 0;
    }
    .admin-cog-btn:hover, .admin-cog-btn:focus-visible {
        opacity: 1; border-color: var(--gold); transform: rotate(30deg);
    }
    /* Scan overlay */
    .scan-overlay {
        display: none; position: fixed; inset: 0; z-index: 9000;
        background: rgba(0,0,0,0.85); backdrop-filter: blur(6px);
        align-items: center; justify-content: center;
    }
    .scan-overlay.open { display: flex; }
    .scan-overlay-content {
        background: var(--bg-card-solid); border: 1px solid var(--border); border-radius: 16px;
        padding: 1.5rem; max-width: 400px; width: 92%; text-align: center;
        box-shadow: var(--shadow-lg);
    }
    .scan-overlay h3 { margin: 0 0 0.75rem; color: var(--text-heading); font-size: 1.1rem; }
    .scan-overlay p { margin: 0 0 1.25rem; color: var(--text-secondary); font-size: 0.85rem; line-height: 1.5; }
    .scan-overlay .scan-btn-row { display: flex; gap: 0.75rem; justify-content: center; }
    .scan-overlay .scan-btn-primary {
        padding: 0.65rem 1.5rem; border-radius: 8px; font-size: 0.85rem; font-weight: 700;
        cursor: pointer; border: none; background: var(--btn-gradient); color: #fff;
    }
    .scan-overlay .scan-btn-cancel {
        padding: 0.65rem 1.5rem; border-radius: 8px; font-size: 0.85rem; font-weight: 700;
        cursor: pointer; border: 1px solid var(--border); background: var(--accent-hover-bg); color: var(--text-secondary);
    }
    #scanReader { width: 100%; max-width: 350px; margin: 0 auto; }
    #scanReader video { border-radius: 8px; }
    .scan-result-box {
        padding: 1rem; border-radius: 10px; margin-top: 1rem;
    }
    .scan-result-box.success { background: rgba(39,174,96,0.15); border: 1px solid rgba(39,174,96,0.3); }
    .scan-result-box.error { background: rgba(231,76,60,0.15); border: 1px solid rgba(231,76,60,0.3); }
    .scan-result-box .result-icon { font-size: 2rem; margin-bottom: 0.5rem; }
    .scan-result-box .result-msg { font-size: 0.85rem; color: var(--text-primary); line-height: 1.5; }
    .scan-result-box .result-amount { font-size: 1.4rem; font-weight: 700; color: var(--green); margin: 0.5rem 0; }
    .notif-badge {
        position: absolute; top: -4px; right: -4px;
        background: var(--red); color: #fff; font-size: 0.6rem; font-weight: 700;
        min-width: 16px; height: 16px; border-radius: 8px;
        display: flex; align-items: center; justify-content: center;
        padding: 0 4px; line-height: 1;
    }
    /* Sidebar inline red pill badge (Home action count, Inbox unread count) */
    .sidebar-pill {
        display: inline-flex; align-items: center; justify-content: center;
        background: var(--red); color: #fff; font-size: 0.62rem; font-weight: 700;
        min-width: 16px; height: 16px; border-radius: 8px;
        padding: 0 5px; line-height: 1; margin-left: 0.35rem;
    }
    /* Sidebar footer — actions row rendered below the profile block */
    .sidebar-footer-row {
        display: flex;
        gap: 0.4rem;
        align-items: center;
        justify-content: space-between;
        padding-top: 0.4rem;
        border-top: 1px solid var(--border-subtle, var(--border));
    }
    .sidebar-footer-row > a,
    .sidebar-footer-row > form,
    .sidebar-footer-row > .whats-new-wrap {
        flex: 0 0 auto;
    }
    .sidebar-docs-link {
        font-size: 0.72rem; color: var(--text-secondary); text-decoration: none;
        padding: 0.25rem 0.4rem; border-radius: 4px;
    }
    .sidebar-docs-link:hover { color: var(--text-heading); background: var(--accent-hover-bg); }
    .sidebar-footer-row a[href*="logout"] {
        font-size: 0.72rem;
        padding: 0.25rem 0.4rem;
        border-radius: 4px;
    }
    .sidebar-footer-row a[href*="logout"]:hover { background: var(--accent-hover-bg); }
    .sidebar-theme-toggle {
        background: var(--bg-card); border: 1px solid var(--border); color: var(--text-primary);
        width: 28px; height: 28px; border-radius: 6px; cursor: pointer;
        display: inline-flex; align-items: center; justify-content: center;
        font-size: 0.85rem; line-height: 1; padding: 0;
        flex-shrink: 0;
    }
    .sidebar-theme-toggle:hover { border-color: var(--accent-border); }
    .notif-dropdown {
        display: none; position: fixed; top: 52px; right: 0.75rem; z-index: 1200;
        width: 320px; max-height: 420px; overflow-y: auto;
        background: var(--bg-card-solid); border: 1px solid var(--border); border-radius: 12px;
        box-shadow: var(--shadow-lg);
    }
    .notif-dropdown.open { display: block; }
    .notif-dropdown-header {
        display: flex; justify-content: space-between; align-items: center;
        padding: 0.75rem 1rem; border-bottom: 1px solid var(--border);
        font-size: 0.85rem; color: var(--text-primary);
    }
    .notif-dropdown-list { padding: 0.25rem 0; }
    .notif-item {
        display: block; padding: 0.6rem 1rem; border-bottom: 1px solid var(--border-subtle);
        text-decoration: none; color: var(--text-primary); transition: background 0.15s;
    }
    .notif-item:hover { background: var(--accent-hover-bg); }
    .notif-item.unread { border-left: 3px solid var(--accent); }
    .notif-item-title { font-size: 0.8rem; font-weight: 600; color: var(--text-heading); margin-bottom: 0.15rem; }
    .notif-item-msg { font-size: 0.7rem; color: var(--text-secondary); line-height: 1.3; }
    .notif-item-time { font-size: 0.6rem; color: var(--text-muted); margin-top: 0.2rem; }
    .notif-empty { padding: 1.5rem; text-align: center; color: var(--text-secondary); font-size: 0.8rem; }
    .notif-backdrop { display: none; position: fixed; inset: 0; z-index: 1150; }
    .notif-backdrop.open { display: block; }
    @media (max-width: 640px) {
        .notif-dropdown { left: 0.5rem; right: 0.5rem; width: auto; }
    }

    /* ---- Loading skeletons (available globally) ---- */
    @keyframes skeletonPulse {
        0%   { background-position: -200% 0; }
        100% { background-position: 200% 0; }
    }
    .skeleton-block {
        display: block;
        width: 100%;
        height: 1rem;
        border-radius: 6px;
        background: linear-gradient(90deg,
            var(--bg-card) 0%,
            var(--accent-hover-bg) 50%,
            var(--bg-card) 100%);
        background-size: 200% 100%;
        animation: skeletonPulse 1.4s ease-in-out infinite;
    }
    .skel-loading {
        position: relative;
    }
    .skel-loading::after {
        content: "";
        position: absolute; inset: 0;
        background: linear-gradient(90deg,
            rgba(255,255,255,0.02) 0%,
            rgba(255,255,255,0.08) 50%,
            rgba(255,255,255,0.02) 100%);
        background-size: 200% 100%;
        animation: skeletonPulse 1.4s ease-in-out infinite;
        border-radius: inherit;
        pointer-events: none;
        z-index: 1;
    }

    /* ---- Contextual help (?) tooltips ---- */
    .help-icon {
        display: inline-flex; align-items: center; justify-content: center;
        width: 16px; height: 16px; border-radius: 50%;
        background: var(--accent-hover-bg); color: var(--text-secondary);
        font-size: 0.7rem; font-weight: 700; font-family: inherit;
        border: 1px solid var(--border); cursor: help;
        margin-left: 0.35rem; vertical-align: middle;
        position: relative; line-height: 1;
        user-select: none;
    }
    .help-icon:hover, .help-icon:focus { color: var(--text-heading); border-color: var(--accent-border); outline: none; }
    /* Tooltip bubble — position: fixed so it escapes every ancestor's
       overflow clipping and stacking context. Coordinates set by JS on
       hover/focus from the icon's getBoundingClientRect(). */
    .help-icon .help-tip {
        position: fixed; top: 0; left: 0;
        background: var(--bg-card-solid); color: var(--text-primary);
        border: 1px solid var(--border); border-radius: 6px;
        padding: 0.5rem 0.7rem; font-size: 0.72rem; font-weight: 500;
        white-space: normal; width: max-content; max-width: 260px;
        line-height: 1.4; text-align: left;
        box-shadow: var(--shadow-lg);
        opacity: 0; pointer-events: none; transition: opacity 0.15s;
        z-index: 9999;
        display: flex; flex-direction: column; gap: 0.35rem;
    }
    .help-icon:hover .help-tip,
    .help-icon:focus .help-tip,
    .help-icon:focus-within .help-tip { opacity: 1; pointer-events: auto; }
    .help-icon .help-tip-text { display: block; }
    .help-icon .help-tip-link {
        display: inline-block; align-self: flex-end;
        font-size: 0.7rem; font-weight: 600;
        color: var(--accent-secondary, #8ab4ff);
        text-decoration: none;
        padding: 0.1rem 0.2rem;
    }
    .help-icon .help-tip-link:hover { text-decoration: underline; }

    /* ---- Keyboard shortcut toast ---- */
    .kbd-toast {
        position: fixed; bottom: 1.25rem; left: 50%; transform: translateX(-50%);
        background: var(--bg-card-solid); color: var(--text-heading);
        border: 1px solid var(--accent-border); border-radius: 8px;
        padding: 0.55rem 1rem; font-size: 0.8rem; font-weight: 600;
        box-shadow: var(--shadow-lg);
        z-index: 9500;
        opacity: 0; pointer-events: none; transition: opacity 0.12s;
    }
    .kbd-toast.show { opacity: 1; }

    /* ---- What's new dot + popover ---- */
    .whats-new-wrap { position: relative; display: inline-block; margin: 0; }
    .whats-new-btn {
        background: none; border: none; color: var(--text-secondary);
        cursor: pointer; font-size: 0.85rem; padding: 0.1rem 0.3rem;
        position: relative; line-height: 1;
    }
    .whats-new-btn:hover { color: var(--text-heading); }
    .whats-new-dot {
        position: absolute; top: 0; right: 0;
        width: 7px; height: 7px; border-radius: 50%;
        background: var(--red); display: none;
    }
    .whats-new-wrap.has-new .whats-new-dot { display: block; }
    .whats-new-popover {
        display: none; position: absolute; bottom: calc(100% + 8px); right: 0;
        width: 260px; background: var(--bg-card-solid);
        border: 1px solid var(--border); border-radius: 10px;
        padding: 0.75rem 0.9rem; box-shadow: var(--shadow-lg);
        z-index: 2500; text-align: left;
    }
    .whats-new-popover.open { display: block; }
    .whats-new-popover h4 { margin: 0 0 0.5rem; color: var(--text-heading); font-size: 0.85rem; }
    .whats-new-popover ul { margin: 0; padding-left: 1rem; font-size: 0.75rem; color: var(--text-secondary); line-height: 1.4; }
    .whats-new-popover li { margin-bottom: 0.3rem; }

    /* P1 — league badges (football pyramid, 6 tiers). Absolute colours
       (not theme tokens) so the badge reads identically across every
       theme + on mobile. Source of truth:
       dashboard/templates/_tier_badge.html. */
    .tier-badge {
        display: inline-block; padding: 1px 6px; margin-left: 6px;
        font-size: 0.62rem; font-weight: 800; letter-spacing: 0.06em;
        line-height: 1.4; text-transform: uppercase;
        border-radius: 4px; vertical-align: middle; color: #fff;
    }
    .tier-badge.tier-sunday_league   { background: #8a8d9e; }
    .tier-badge.tier-national_league { background: #5a8fb5; }
    .tier-badge.tier-league_two      { background: #16a34a; }
    .tier-badge.tier-league_one      { background: #3b82f6; }
    .tier-badge.tier-championship    { background: #7c3aed; }
    .tier-badge.tier-premier         { background: #b8860b; }
    .tier-badge.tier-unknown         { background: #8a8d9e; }

    .tier-chip {
        display: inline-block; padding: 0.32rem 0.7rem; white-space: nowrap;
        margin: 0 0.25rem 0.25rem 0; font-size: 0.78rem;
        text-align: center;
        font-weight: 600; color: #5a5c6e; background: #f0f1f5;
        border: 1px solid #dcdee5; border-radius: 999px;
        cursor: pointer; text-decoration: none;
        transition: background 0.15s, color 0.15s, border-color 0.15s;
    }
    .tier-chip:hover { background: #e8eaef; color: #1a1b2e; }
    .tier-chip-active {
        background: #1a1b2e; color: #fff; border-color: #1a1b2e;
    }
    .tier-chip-active:hover { background: #1a1b2e; color: #fff; }
    .tier-chip-sunday_league.tier-chip-active   { background: #8a8d9e; border-color: #8a8d9e; }
    .tier-chip-national_league.tier-chip-active { background: #5a8fb5; border-color: #5a8fb5; }
    .tier-chip-league_two.tier-chip-active      { background: #16a34a; border-color: #16a34a; }
    .tier-chip-league_one.tier-chip-active      { background: #3b82f6; border-color: #3b82f6; }
    .tier-chip-championship.tier-chip-active    { background: #7c3aed; border-color: #7c3aed; }
    .tier-chip-premier.tier-chip-active         { background: #b8860b; border-color: #b8860b; }