/**
 * Trialoop - site menu (site redesign 2026-11, batch "menu"), linked by includes/header.php.
 * Floating pill (desktop >= 1024 px: logo, primary links, search, language, account, Menu; phone: logo, Live,
 * account, Menu) + full-screen menu (#nav-menu) grouped by use. Every colour is a theme token with the Grid
 * value as fallback; Vitesse gets a blue pill and a blue full-screen menu (its "blue band" signature).
 * Scoped under .tl-menu (class of <header>) so it wins over ui.css and the header's own <style> block.
 * The avatar rules (.user-avatar-wrapper, .user-avatar, .dropdown-avatar) are NOT touched (PRODUCTION_LOCKED.md).
 */

/* ---------- menu tokens (derived from the theme tokens, Grid fallbacks) ---------- */
.tl-menu {
    --m-pill-a: 84%;
    --m-pill-bg: color-mix(in srgb, var(--tl-glass, #1a0a1a) var(--m-pill-a), transparent);
    /* same colour as the glass over the page background, opaque (used while the page scrolls) */
    --m-pill-solid: color-mix(in srgb, var(--tl-glass, #1a0a1a) var(--m-pill-a), var(--tl-bg, #1a0a1a));
    --m-pill-line: var(--tl-line, rgba(255, 255, 255, 0.12));
    --m-pill-shadow: var(--shadow-lg, 0 8px 32px rgba(0, 0, 0, 0.5));
    --m-ink: var(--tl-text, #ffffff);
    --m-dim: var(--tl-muted, rgba(255, 255, 255, 0.72));
    --m-hover: rgba(var(--tl-ink-rgb, 255, 255, 255), 0.08);
    --m-ctl-line: rgba(var(--tl-ink-rgb, 255, 255, 255), 0.22);
    --m-btn-bg: var(--tl-text, #ffffff);
    --m-btn-ink: var(--tl-bg, #1a0a1a);
    --m-dot: var(--tl-accent, #ff1e6a);
    --m-dot-rgb: var(--tl-accent-rgb, 255, 30, 106);
    --m-ov-bg: var(--tl-bg, #1a0a1a);
    --m-ov-glow: rgba(var(--tl-accent-rgb, 255, 30, 106), 0.22);
    --m-ov-ink: var(--tl-text, #ffffff);
    --m-ov-dim: var(--tl-muted, rgba(255, 255, 255, 0.7));
    --m-ov-line: var(--tl-line, rgba(255, 255, 255, 0.12));
    --m-ov-label: var(--tl-accent-ink, #ff4d8a);
    --m-ov-accent: var(--tl-accent, #ff1e6a);
    --m-ov-card: var(--tl-surface, rgba(255, 255, 255, 0.05));
    --m-ov-hover: rgba(var(--tl-ink-rgb, 255, 255, 255), 0.07);
    --m-display: var(--tl-font-display, 'Wave Block', 'Play', sans-serif);
    --m-body: var(--tl-font-body, 'Play', sans-serif);
}

/* Vitesse: blue pill and blue full-screen menu with white ink (shade-rgb = white in this theme) */
html[data-theme="vitesse"] .tl-menu {
    --m-pill-bg: var(--tl-accent-fill, #1D3FBF);
    --m-pill-solid: var(--tl-accent-fill, #1D3FBF);
    --m-pill-line: transparent;
    --m-pill-shadow: 0 10px 28px rgba(var(--tl-accent-rgb, 29, 63, 191), 0.32);
    --m-ink: var(--tl-on-accent, #ffffff);
    --m-dim: rgba(var(--tl-shade-rgb, 255, 255, 255), 0.84);
    --m-hover: rgba(var(--tl-shade-rgb, 255, 255, 255), 0.14);
    --m-ctl-line: rgba(var(--tl-shade-rgb, 255, 255, 255), 0.45);
    --m-btn-bg: var(--tl-surface, #ffffff);
    --m-btn-ink: var(--tl-accent, #1D3FBF);
    --m-dot: var(--tl-on-accent, #ffffff);
    --m-dot-rgb: var(--tl-shade-rgb, 255, 255, 255);
    --m-ov-bg: var(--tl-accent-fill, #1D3FBF);
    --m-ov-glow: rgba(var(--tl-shade-rgb, 255, 255, 255), 0.10);
    --m-ov-ink: var(--tl-on-accent, #ffffff);
    --m-ov-dim: rgba(var(--tl-shade-rgb, 255, 255, 255), 0.82);
    --m-ov-line: rgba(var(--tl-shade-rgb, 255, 255, 255), 0.24);
    --m-ov-label: rgba(var(--tl-shade-rgb, 255, 255, 255), 0.78);
    --m-ov-accent: var(--tl-on-accent, #ffffff);
    --m-ov-card: rgba(var(--tl-shade-rgb, 255, 255, 255), 0.10);
    --m-ov-hover: rgba(var(--tl-shade-rgb, 255, 255, 255), 0.14);
}

/* Home page (always-black cinema hero): a denser pill so light themes stay crisp over the black */
html:not([data-theme="vitesse"]) body:has(.tl-cinema) .tl-menu {
    --m-pill-a: 94%;
    --m-pill-bg: color-mix(in srgb, var(--tl-glass, #1a0a1a) var(--m-pill-a), transparent);
    --m-pill-solid: color-mix(in srgb, var(--tl-glass, #1a0a1a) var(--m-pill-a), var(--tl-bg, #1a0a1a));
}

/* ---------- header shell: transparent band, the pill floats ---------- */
.header.tl-menu,
.header.tl-menu.scrolled {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height, 80px);
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    pointer-events: none;
    z-index: 1000;
}
.tl-menu .navbar { height: auto; }

.tl-menu .nav-container.tl-pill {
    pointer-events: auto;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 2px;
    box-sizing: border-box;
    width: max-content;
    max-width: calc(100% - 32px);
    height: 58px;
    margin: 14px auto 0;
    padding: 6px 6px 6px 16px;
    border-radius: 999px;
    color: var(--m-ink);
    font-family: var(--m-body);
}
/* Glass on a pseudo-element: a backdrop-filter on the pill itself would trap the fixed full-screen menu */
.tl-menu .tl-pill::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: var(--m-pill-bg);
    border: 1px solid var(--m-pill-line);
    box-shadow: var(--m-pill-shadow);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    pointer-events: none;
    /* own compositing layer: the blur is re-sampled on that layer instead of repainting the page behind it */
    transform: translateZ(0);
    backface-visibility: hidden;
}
/* Home: no live blur while the page moves (Safari re-samples it every frame and flickers); opaque twin instead */
html.tl-is-scrolling body:has(.tl-cinema) .tl-menu .tl-pill::before {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background-color: var(--m-pill-solid);
}
html[data-theme="vitesse"] .tl-menu .tl-pill::before {
    background-image: repeating-linear-gradient(-76deg, rgba(var(--tl-shade-rgb, 255, 255, 255), 0.07) 0 14px, transparent 14px 36px);
    background-size: 46% 100%;
    background-position: right center;
    background-repeat: no-repeat;
    background-color: var(--m-pill-bg);
}

/* Logo: same markup and theme colours, sized for the pill */
.tl-menu .logo { flex: none; min-height: 44px; margin-right: 6px; z-index: auto; }
.tl-menu .logo img,
.tl-menu .logo-svg-wrapper { height: 40px; }

/* Primary links */
.tl-menu .tl-pill__links { display: flex; align-items: center; gap: 2px; margin-right: 6px; }
.tl-menu .tl-pill__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 14px;
    border-radius: 999px;
    color: var(--m-dim);
    font: 500 14px/1 var(--m-body);
    text-decoration: none;
    white-space: nowrap;
    opacity: 1;
    transition: color .15s ease, background-color .15s ease;
}
.tl-menu .tl-pill__link:hover,
.tl-menu .tl-pill__link:focus-visible { color: var(--m-ink); background: var(--m-hover); }
.tl-menu .tl-pill__link.is-current { color: var(--m-ink); background: var(--m-hover); }
.tl-menu .tl-pill__live { color: var(--m-ink); font-weight: 600; }
.tl-menu .tl-pill__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: none;
    background: var(--m-dot);
    animation: tl-menu-ping 1.6s infinite;
}
@keyframes tl-menu-ping {
    0% { box-shadow: 0 0 0 0 rgba(var(--m-dot-rgb), .6); }
    70% { box-shadow: 0 0 0 9px rgba(var(--m-dot-rgb), 0); }
    100% { box-shadow: 0 0 0 0 rgba(var(--m-dot-rgb), 0); }
}

/* Right-hand controls: search, language, account (visual order; DOM order unchanged) */
.tl-menu .nav-user { display: flex; align-items: center; gap: 4px; }
.tl-menu .nav-user > .site-search { order: 1; margin: 0; }
.tl-menu .nav-user > .lang-selector { order: 2; margin: 0; padding: 0; border: 0; }
.tl-menu .nav-user > .user-menu,
.tl-menu .nav-user > a.btn { order: 3; }
.tl-menu .nav-user > .user-menu { display: flex; align-items: center; }

.tl-menu .site-search-toggle {
    width: 44px;
    height: 44px;
    color: var(--m-ink);
    border-color: var(--m-ctl-line);
    background: transparent;
}
.tl-menu .lang-current {
    min-height: 44px;
    padding: 0 12px;
    border-radius: 999px;
    background: transparent;
    border: 1px solid var(--m-ctl-line);
    color: var(--m-ink);
    font: 600 13px/1 var(--m-body);
}
.tl-menu .lang-current:hover,
.tl-menu .lang-current.open { background: var(--m-hover); color: var(--m-ink); }
.tl-menu .lang-menu { top: calc(100% + 12px); }
.tl-menu .site-search-panel { top: calc(100% + 12px); }
.tl-menu .user-dropdown { margin-top: 12px; }
.tl-menu .user-dropdown .dropdown-divider { background: var(--tl-line, rgba(255, 255, 255, 0.12)); }
.tl-menu .nav-user > a.btn {
    min-height: 44px;
    padding: 0 20px;
    font: 600 14px/1 var(--m-body);
    white-space: nowrap;
}

/* Menu button (#hamburger-toggle), visible on every size */
.tl-menu .hamburger.tl-menu-btn {
    order: 10;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: none;
    min-width: 44px;
    min-height: 44px;
    margin: 0 0 0 4px;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    background: var(--m-btn-bg);
    color: var(--m-btn-ink);
    font: 600 14px/1 var(--m-body);
    cursor: pointer;
    position: relative;
    z-index: auto;
    transition: transform .15s ease, filter .15s ease;
}
.tl-menu .hamburger.tl-menu-btn::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 1px; }
.tl-menu .hamburger.tl-menu-btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.tl-menu .hamburger.tl-menu-btn span { width: auto; height: auto; background: none; border-radius: 0; transition: none; transform: none; opacity: 1; }
.tl-menu .hamburger.tl-menu-btn svg { flex: none; }

/* Keyboard focus, visible on every theme */
.tl-menu a:focus-visible,
.tl-menu button:focus-visible,
.tl-menu input:focus-visible {
    outline: 2px solid var(--m-ov-accent);
    outline-offset: 2px;
}

/* Vitesse: the theme file paints every header control white with !important; keep the white-on-blue
   look in the pill and fix the button labels that would turn white on white */
html[data-theme="vitesse"] .tl-menu .hamburger.tl-menu-btn,
html[data-theme="vitesse"] .tl-menu .hamburger.tl-menu-btn span {
    color: var(--m-btn-ink) !important;
    background: none !important;
}
html[data-theme="vitesse"] .tl-menu .hamburger.tl-menu-btn {
    background: var(--m-btn-bg) !important;
    border-radius: 0;
    clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
    padding: 0 24px;
}
html[data-theme="vitesse"] .tl-menu .nav-user > a.btn-primary,
html[data-theme="vitesse"] .tl-menu .nav-menu a.btn-primary {
    background: var(--tl-surface, #ffffff) !important;
    border-color: var(--tl-surface, #ffffff) !important;
    color: var(--tl-accent, #1D3FBF) !important;
}
html[data-theme="vitesse"] .tl-menu .lang-menu .lang-option { color: var(--tl-muted, #4A5160); }
html[data-theme="vitesse"] .tl-menu .lang-menu .lang-option.active,
html[data-theme="vitesse"] .tl-menu .lang-menu .lang-option:hover { color: var(--tl-text, #0F1424); }

/* ==========================================================================
   Full-screen menu (#nav-menu)
   ========================================================================== */
.header.tl-menu .nav-menu {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 26px;
    width: auto;
    height: auto;
    margin: 0;
    padding: 22px 20px 0;
    box-sizing: border-box;
    list-style: none;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    pointer-events: auto;
    color: var(--m-ov-ink);
    font-family: var(--m-body);
    background:
        radial-gradient(900px 620px at 88% -8%, var(--m-ov-glow), transparent 62%),
        radial-gradient(640px 480px at -12% 46%, var(--m-ov-glow), transparent 60%),
        var(--m-ov-bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    visibility: hidden;
    opacity: 0;
    clip-path: circle(0 at var(--tl-mx, calc(100% - 48px)) var(--tl-my, 44px));
    transition: clip-path .45s cubic-bezier(.7, 0, .2, 1), opacity .3s ease, visibility 0s linear .45s;
}
.header.tl-menu .nav-menu.open {
    visibility: visible;
    opacity: 1;
    clip-path: circle(150vmax at var(--tl-mx, calc(100% - 48px)) var(--tl-my, 44px));
    transition: clip-path .55s cubic-bezier(.7, 0, .2, 1), opacity .2s ease, visibility 0s;
}
html[data-theme="vitesse"] .header.tl-menu .nav-menu {
    background:
        repeating-linear-gradient(-76deg, rgba(var(--tl-shade-rgb, 255, 255, 255), 0.06) 0 22px, transparent 22px 58px) right top / 58% 100% no-repeat,
        var(--m-ov-bg);
}
.header.tl-menu .nav-menu > li { list-style: none; min-width: 0; }
.tl-menu .nav-menu ul { list-style: none; margin: 0; padding: 0; }

/* Group labels */
.tl-menu .tl-sheet__label,
.tl-menu .nav-menu .dropdown-toggle.tl-sheet__label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px;
    padding: 0;
    font: 700 12px/1.2 var(--m-body);
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--m-ov-label) !important;
    opacity: 1;
    cursor: default;
}
.tl-menu .tl-sheet__label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--m-ov-line);
}

/* Search field at the top */
.tl-menu .tl-sheet__searchform {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 18px;
    border-radius: 999px;
    background: var(--m-ov-card);
    border: 1px solid var(--m-ov-line);
    color: var(--m-ov-dim);
    max-width: 560px;
}
.tl-menu .tl-sheet__searchform input {
    flex: 1;
    min-width: 0;
    min-height: 50px;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    color: var(--m-ov-ink) !important;
    font: 500 16px var(--m-body);
    outline: none;
}
.tl-menu .tl-sheet__searchform input::placeholder { color: var(--m-ov-dim); opacity: .85; }
.tl-menu .tl-sheet__searchform:focus-within { border-color: var(--m-ov-accent); }

/* Discover: big display links */
.tl-menu .tl-sheet__list--big { display: flex; flex-direction: column; gap: 2px; }
.tl-menu .tl-sheet__list--big a {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: 2px 0;
    font-family: var(--m-display);
    font-style: italic;
    font-weight: 800;
    font-size: clamp(36px, 10vw, 64px);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .01em;
    color: var(--m-ov-ink) !important;
    text-decoration: none;
    opacity: 1;
    transition: color .2s ease, transform .25s cubic-bezier(.2, .8, .2, 1);
}
.tl-menu .tl-sheet__list--big a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 4px;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--m-ov-accent), transparent);
    transform: scaleX(0) skewX(-14deg);
    transform-origin: left center;
    transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}
.tl-menu .tl-sheet__list--big a:hover,
.tl-menu .tl-sheet__list--big a:focus-visible,
.tl-menu .tl-sheet__list--big a.is-current { color: var(--m-ov-accent) !important; transform: translateX(8px); }
.tl-menu .tl-sheet__list--big a:hover::after,
.tl-menu .tl-sheet__list--big a:focus-visible::after,
.tl-menu .tl-sheet__list--big a.is-current::after { transform: scaleX(1) skewX(-14deg); }
html[data-theme="vitesse"] .tl-menu .tl-sheet__list--big a:hover,
html[data-theme="vitesse"] .tl-menu .tl-sheet__list--big a.is-current { color: var(--m-ov-ink) !important; }

/* Manage / Admin: the dropdowns become always-open groups (beats the inline display set by html-foot.php) */
.tl-menu .nav-menu .dropdown { position: static; }
.tl-menu .nav-menu .dropdown-menu,
.tl-menu .nav-menu .dropdown:hover .dropdown-menu {
    position: static;
    display: flex !important;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0;
    box-shadow: none !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    text-align: left;
    z-index: auto;
}
.tl-menu .nav-menu .dropdown-menu a,
.tl-menu .nav-menu .submenu a,
.tl-menu .nav-menu .tl-sheet__item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 6px 12px;
    border-radius: 12px;
    color: var(--m-ov-ink) !important;
    font: 500 15px/1.25 var(--m-body);
    text-decoration: none;
    opacity: 1;
    white-space: normal;
    transition: background-color .15s ease, color .15s ease;
}
.tl-menu .nav-menu .dropdown-menu a:hover,
.tl-menu .nav-menu .submenu a:hover,
.tl-menu .nav-menu .tl-sheet__item:hover,
.tl-menu .nav-menu .dropdown-menu a.is-current {
    background: var(--m-ov-hover) !important;
    color: var(--m-ov-ink) !important;
}
.tl-menu .nav-menu .dropdown-menu a i,
.tl-menu .nav-menu .tl-sheet__item i {
    width: 20px;
    text-align: center;
    color: var(--m-ov-accent) !important;
    flex: none;
}
.tl-menu .nav-menu .tl-sheet__item--muted { color: var(--m-ov-dim) !important; }
/* Items without an icon keep the same text column as the ones with an icon */
.tl-menu .nav-menu .dropdown-menu a:not(:has(> i))::before {
    content: '';
    width: 20px;
    flex: none;
}
.tl-menu .nav-menu .dropdown-menu .dropdown-divider {
    height: 1px;
    margin: 6px 12px;
    background: var(--m-ov-line) !important;
    list-style: none;
}
/* Debug sub-menu (super admin, APP_DEBUG): shown inline */
.tl-menu .nav-menu .has-submenu { position: static; }
.tl-menu .nav-menu .submenu-toggle { pointer-events: none; color: var(--m-ov-dim) !important; }
.tl-menu .nav-menu .submenu-arrow { display: none; }
.tl-menu .nav-menu .submenu,
.tl-menu .nav-menu .has-submenu:hover .submenu {
    position: static;
    display: block !important;
    min-width: 0;
    margin: 0 0 0 20px;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none;
    backdrop-filter: none;
}
.tl-menu .nav-menu .submenu .dropdown-divider { display: none; }

/* My account */
.header.tl-menu .nav-menu .nav-menu-mobile-auth {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    margin: 0;
    padding: 0;
    border: 0;
}
.tl-menu .nav-menu .tl-sheet__login {
    align-self: flex-start;
    min-height: 48px;
    padding: 0 28px;
    font: 600 15px/1 var(--m-body);
}

/* Active organisation (org switcher, same behaviour: click to list, click an organisation to switch) */
.tl-menu .nav-menu .org-switcher { margin: 0; }
.tl-menu .nav-menu .org-current {
    width: 100%;
    max-width: 420px;
    min-height: 48px;
    padding: 0 16px;
    gap: 10px;
    border-radius: 14px;
    background: var(--m-ov-card);
    border: 1px solid var(--m-ov-line);
    color: var(--m-ov-ink);
    font: 600 15px/1.2 var(--m-body);
    text-align: left;
}
.tl-menu .nav-menu .org-current:hover { background: var(--m-ov-hover); }
.tl-menu .nav-menu .org-current i { color: var(--m-ov-accent) !important; opacity: 1 !important; font-size: .9rem !important; }
.tl-menu .nav-menu .org-name { max-width: none; flex: 1; }
.tl-menu .nav-menu .org-menu {
    position: static;
    max-width: 420px;
    margin-top: 6px;
    background: var(--m-ov-card);
    border: 1px solid var(--m-ov-line);
    border-radius: 14px;
    box-shadow: none;
    backdrop-filter: none;
}
.tl-menu .nav-menu .org-option {
    min-height: 44px;
    color: var(--m-ov-ink);
    font: 500 15px/1.2 var(--m-body);
}
.tl-menu .nav-menu .org-option:hover { background: var(--m-ov-hover); color: var(--m-ov-ink); }
.tl-menu .nav-menu .org-option.active { color: var(--m-ov-accent); }
.tl-menu .nav-menu .org-option svg path { stroke: currentColor; }

/* Languages */
.header.tl-menu .nav-menu .nav-menu-lang {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
}
.tl-menu .tl-sheet__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tl-menu .nav-menu .lang-option-mobile {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid var(--m-ov-line);
    background: transparent;
    color: var(--m-ov-dim);
    font: 500 14px/1 var(--m-body);
    text-decoration: none;
    white-space: nowrap;
}
.tl-menu .nav-menu .lang-option-mobile:hover { color: var(--m-ov-ink); background: var(--m-ov-hover); }
.tl-menu .nav-menu .lang-option-mobile.active {
    color: var(--m-ov-ink);
    border-color: var(--m-ov-accent);
    background: var(--m-ov-hover);
    font-weight: 700;
}

/* Close button: bottom of the screen on phones (thumb), top right on desktop */
.header.tl-menu .nav-menu .tl-sheet__bar {
    order: 99;
    position: sticky;
    bottom: 0;
    margin-top: auto;
    padding: 18px 0 max(18px, env(safe-area-inset-bottom));
    background: linear-gradient(transparent, var(--m-ov-bg) 38%);
    z-index: 2;
}
.tl-menu .tl-sheet__close {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 54px;
    padding: 0 22px;
    border: 0;
    border-radius: 999px;
    background: var(--m-ov-ink);
    color: var(--m-ov-bg);
    font: 700 15px/1 var(--m-body);
    cursor: pointer;
    box-shadow: var(--shadow-lg, 0 8px 32px rgba(0, 0, 0, 0.5));
}
html[data-theme="vitesse"] .tl-menu .tl-sheet__close {
    background: var(--tl-surface, #ffffff);
    color: var(--tl-accent, #1D3FBF);
    border-radius: 0;
    clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
}

/* Staggered reveal (index --i written by site-menu.js) */
.tl-menu .nav-menu.open > li:not(.tl-sheet__group--discover),
.tl-menu .nav-menu.open .tl-sheet__list--big > li,
.tl-menu .nav-menu.open .tl-sheet__group--discover > .tl-sheet__label {
    animation: tl-menu-in .55s cubic-bezier(.2, .8, .2, 1) both;
    animation-delay: calc(90ms + var(--i, 0) * 45ms);
}
@keyframes tl-menu-in {
    from { opacity: 0; transform: translateY(22px); }
    to { opacity: 1; transform: none; }
}

/* Body scroll lock while the menu is open */
html.tl-menu-open,
html.tl-menu-open body { overflow: hidden; }

/* ==========================================================================
   Phone and tablet (< 1024 px): compact bar
   ========================================================================== */
@media (max-width: 1023.98px) {
    .tl-menu .nav-container.tl-pill {
        width: auto;
        max-width: none;
        height: 56px;
        margin: 10px 10px 0;
        padding: 5px 5px 5px 14px;
        gap: 4px;
    }
    .tl-menu .logo img,
    .tl-menu .logo-svg-wrapper { height: 34px; }
    .tl-menu .tl-pill__links { margin: 0 0 0 auto; }
    .tl-menu .tl-pill__more,
    .tl-menu .nav-user > .site-search,
    .tl-menu .nav-user > .lang-selector { display: none; }
    .tl-menu .tl-pill__link { padding: 0 10px; }
    .tl-menu .nav-user { display: flex; }
    .tl-menu .nav-user > a.btn { padding: 0 16px; }
    .tl-menu .hamburger.tl-menu-btn { width: 44px; padding: 0; margin-left: 2px; }
    html[data-theme="vitesse"] .tl-menu .hamburger.tl-menu-btn { width: 52px; padding: 0; }
    .tl-menu .tl-menu-btn__label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
    /* Account menu: anchored to the screen so it never leaves it */
    .tl-menu .user-dropdown {
        position: fixed;
        top: 74px;
        right: 10px;
        left: auto;
        width: min(320px, calc(100vw - 20px));
        min-width: 0;
        margin: 0;
        max-height: calc(100vh - 90px);
        overflow-y: auto;
    }
}
@media (max-width: 400px) {
    .tl-menu .nav-container.tl-pill { padding-left: 12px; }
    .tl-menu .logo img,
    .tl-menu .logo-svg-wrapper { height: 30px; }
    .tl-menu .logo { margin-right: 0; }
    .tl-menu .tl-pill__link { padding: 0 8px; gap: 7px; font-size: 13px; }
    /* Login becomes a round icon button (the label stays the accessible name) */
    .tl-menu .nav-user > a.btn {
        width: 44px;
        min-width: 44px;
        padding: 0 !important;
        font-size: 0 !important;
        clip-path: none !important;
        border-radius: 50% !important;
    }
    .tl-menu .nav-user > a.btn::before {
        content: '\f007';
        font: 900 16px/1 'Font Awesome 6 Free';
    }
}

/* ==========================================================================
   Desktop (>= 1024 px)
   ========================================================================== */
@media (min-width: 1024px) {
    .header.tl-menu .nav-menu {
        display: grid !important;
        grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
        grid-auto-flow: row dense;
        align-content: start;
        column-gap: clamp(32px, 4vw, 64px);
        row-gap: 34px;
        padding: 30px max(48px, calc((100vw - 1240px) / 2)) 56px;
    }
    .tl-menu .nav-menu > .tl-sheet__search { grid-column: 1 / 3; grid-row: 1; align-self: center; }
    .header.tl-menu .nav-menu .tl-sheet__bar {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
        align-self: start;
        position: sticky;
        top: 0;
        margin: 0;
        padding: 0;
        background: none;
    }
    .tl-menu .tl-sheet__close { width: auto; min-height: 48px; }
    .tl-menu .nav-menu > .tl-sheet__group--discover { grid-column: 1; grid-row: 2 / span 8; }
    .tl-menu .tl-sheet__list--big a { font-size: clamp(44px, 5vw, 72px); }
}

/* Short screens: smaller display links */
@media (max-height: 640px) {
    .tl-menu .tl-sheet__list--big a { font-size: clamp(30px, 7vh, 48px); min-height: 44px; }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .tl-menu .tl-pill__dot { animation: none; }
    .header.tl-menu .nav-menu,
    .header.tl-menu .nav-menu.open { clip-path: none; transition: opacity .15s ease, visibility 0s linear .15s; }
    .header.tl-menu .nav-menu.open { transition: opacity .15s ease, visibility 0s; }
    .tl-menu .nav-menu.open > li,
    .tl-menu .nav-menu.open .tl-sheet__list--big > li,
    .tl-menu .nav-menu.open .tl-sheet__group--discover > .tl-sheet__label { animation: none; }
    .tl-menu .tl-sheet__list--big a,
    .tl-menu .tl-sheet__list--big a::after,
    .tl-menu .hamburger.tl-menu-btn { transition: none; }
}