/* ==========================================================================
   Train Live theme for the styles.css-based public pages — login, register,
   invite (/vip, /coach), guides, legal (privacy/terms) and 404.
   Emitted by tenant_head_assets() (includes/tenant.php) right AFTER the page's
   own stylesheet / inline <style>, on trainlive hosts only; perfoscan pages
   never load it. Same palette and type as css/landing-trainlive.css (the
   claude.ai/design "Train Live Portal" landing) and css/app/app.css:
   mint surfaces, ink text, green→teal→blue gradient, LIVE red.
   Every selector is prefixed with html[data-brand="trainlive"] so it beats the
   base rules by specificity; !important only where a page uses inline style="".
   ========================================================================== */

/* ── tokens: the dark-theme roles of styles.css, light values ─────────────── */
html[data-brand="trainlive"] {
    --bg-deep: #e4f1f3;
    --bg-base: #eaf4ee;
    --bg-elevated: #ffffff;
    --bg-card: rgba(255, 255, 255, .78);

    --accent-cyan: #2bb2ab;        /* links / accents (was cyan) */
    --accent-orange: #2fae7d;      /* primary action (was orange) */
    --accent-cyan-dim: #23978f;
    --accent-orange-dim: #268f66;

    --glow-cyan: rgba(43, 178, 171, .16);
    --glow-orange: rgba(47, 174, 125, .16);
    --glow-cyan-strong: rgba(43, 178, 171, .35);

    --text-primary: #11302a;
    --text-secondary: #4f6a61;
    --text-muted: #86a098;

    --glass-bg: rgba(255, 255, 255, .72);
    --glass-border: rgba(17, 48, 42, .08);
    --glass-bg-hover: #ffffff;

    --accent-green: #2fae7d;
    --accent-red: #e8675f;
    --green-bg: rgba(47, 174, 125, .12);
    --red-bg: rgba(232, 103, 95, .12);

    --shadow-soft: 0 2px 6px rgba(17, 48, 42, .05), 0 12px 30px rgba(17, 48, 42, .07);
    --shadow-strong: 0 10px 40px rgba(20, 70, 90, .14);

    /* landing tokens, for rules written below */
    --tl-ink: #11302a; --tl-ink-2: #4f6a61; --tl-ink-3: #86a098;
    --tl-line: rgba(17, 48, 42, .08); --tl-line-2: rgba(17, 48, 42, .14);
    --tl-green: #2fae7d; --tl-teal: #2bb2ab; --tl-blue: #5e9fd6; --tl-live: #d0242c;
    --tl-grad: linear-gradient(118deg, #7cd58c 0%, #3fbf9f 48%, #5aa7d8 100%);
    --tl-grad-soft: linear-gradient(118deg, #cdeed5 0%, #c3e9e0 50%, #cfe4f3 100%);
    --tl-shadow-md: 0 2px 6px rgba(17, 48, 42, .05), 0 12px 30px rgba(17, 48, 42, .07);
    --tl-shadow-lg: 0 10px 40px rgba(20, 70, 90, .14);
    --tl-font: 'Manrope', system-ui, -apple-system, sans-serif;
    color-scheme: light;
}

/* ── type: Manrope everywhere (the pages hard-code Barlow per rule, some inline) */
html[data-brand="trainlive"] *:not(svg):not(path):not(.num) { font-family: var(--tl-font) !important; }
html[data-brand="trainlive"] body { background: var(--bg-deep); color: var(--text-primary); -webkit-font-smoothing: antialiased; }
html[data-brand="trainlive"] h1, html[data-brand="trainlive"] h2, html[data-brand="trainlive"] h3, html[data-brand="trainlive"] h4 {
    text-transform: none; letter-spacing: -.02em; font-weight: 800; line-height: 1.12;
}
html[data-brand="trainlive"] ::selection { background: rgba(63, 191, 159, .25); }

/* ── header / nav (styles.css pages) ───────────────────────────────────────── */
html[data-brand="trainlive"] .header { background: rgba(255, 255, 255, .6); border-bottom: 1px solid var(--tl-line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
html[data-brand="trainlive"] .header.scrolled { background: rgba(255, 255, 255, .92); box-shadow: 0 4px 24px rgba(17, 48, 42, .06); }
/* the Train[LIVE].it wordmark, built from the existing <img> + <span class="logo-text"> */
html[data-brand="trainlive"] .logo { gap: 0; align-items: center; }
html[data-brand="trainlive"] .logo img { content: url("/img/brand/trainlive/runner-mark.png"); width: auto; height: 40px; border: 0; border-radius: 0; object-fit: contain; order: 0; margin-right: 7px; }
html[data-brand="trainlive"] .logo::before { content: "Train"; order: 1; font-weight: 800; font-size: 22px; letter-spacing: -.022em; color: var(--tl-ink); line-height: 1; }
html[data-brand="trainlive"] .logo .logo-text { order: 2; font-size: 0; line-height: 1; color: transparent; letter-spacing: 0; margin-left: 3px; display: inline-flex; align-items: center; }
html[data-brand="trainlive"] .logo .logo-text::before { content: "LIVE"; font-size: 15px; font-weight: 800; letter-spacing: .01em; color: #fff; background: var(--tl-live); padding: 4px 7px 3px; border-radius: 8px; line-height: 1; }
html[data-brand="trainlive"] .logo::after { content: ".it"; order: 3; font-weight: 800; font-size: 22px; letter-spacing: -.022em; color: var(--tl-ink); line-height: 1; margin-left: 1px; }
html[data-brand="trainlive"] .nav-links a { color: var(--tl-ink-2); font-weight: 600; }
html[data-brand="trainlive"] .nav-links a:hover { color: var(--tl-ink); }
html[data-brand="trainlive"] .nav-links a::after { background: var(--tl-teal); }
html[data-brand="trainlive"] .mobile-menu-btn { color: var(--tl-ink); }
html[data-brand="trainlive"] .language-btn { background: transparent; border: 1.5px solid var(--tl-line-2); color: var(--tl-ink-2); font-weight: 700; font-size: 13px; }
html[data-brand="trainlive"] .language-btn:hover, html[data-brand="trainlive"] .language-selector.open .language-btn { background: transparent; border-color: var(--tl-teal); color: var(--tl-ink); }
html[data-brand="trainlive"] .language-dropdown { background: #fff; border: 1px solid var(--tl-line); box-shadow: var(--tl-shadow-md); }
html[data-brand="trainlive"] .language-option { color: var(--tl-ink-2); font-weight: 600; }
html[data-brand="trainlive"] .language-option:hover, html[data-brand="trainlive"] .language-option:focus-visible { background: var(--tl-grad-soft); color: var(--tl-ink); }
html[data-brand="trainlive"] .language-option[aria-selected="true"] { background: var(--tl-grad-soft); color: var(--tl-ink); }
/* 16 languages: two balanced columns (read down, then across), the whole list visible without scrolling */
html[data-brand="trainlive"] .language-dropdown { width: 360px; min-width: 0; max-width: calc(100vw - 32px); max-height: min(80vh, 480px); columns: 2; column-gap: 4px; }
html[data-brand="trainlive"] .language-option { break-inside: avoid; }
html[data-brand="trainlive"] .header-auth .btn-login { color: var(--tl-ink-2); }
html[data-brand="trainlive"] .header-auth .btn-login:hover { color: var(--tl-ink); }
@media (max-width: 768px) {
    html[data-brand="trainlive"] .nav-links { background: #fff; border-bottom: 1px solid var(--tl-line); box-shadow: var(--tl-shadow-md); }
}

/* ── buttons ───────────────────────────────────────────────────────────────── */
html[data-brand="trainlive"] .btn { font-weight: 700; letter-spacing: 0; text-transform: none; }
html[data-brand="trainlive"] .btn-primary { background: var(--tl-grad); color: #fff; box-shadow: 0 6px 18px rgba(47, 174, 125, .32); }
html[data-brand="trainlive"] .btn-primary:hover { background: var(--tl-grad); color: #fff; transform: translateY(-1px); box-shadow: 0 10px 24px rgba(47, 174, 125, .4); }
html[data-brand="trainlive"] .btn-outline { border: 1.5px solid var(--tl-line-2); color: var(--tl-ink); }
html[data-brand="trainlive"] .btn-outline:hover { border-color: var(--tl-teal); color: var(--tl-ink); background: transparent; }

/* ── login / invite pages ──────────────────────────────────────────────────── */
html[data-brand="trainlive"] .login-section { background: linear-gradient(160deg, #eaf4ee 0%, #e4f1f3 55%, #dcedf1 100%); }
html[data-brand="trainlive"] .login-card { background: #fff; border: 1px solid var(--tl-line); border-radius: 22px; box-shadow: var(--tl-shadow-lg); backdrop-filter: none; }
html[data-brand="trainlive"] .login-card h1 { font-size: 1.75rem; }
html[data-brand="trainlive"] .login-subtitle { color: var(--tl-ink-2); }
html[data-brand="trainlive"] .login-social-btn { background: #fff; border: 1.5px solid var(--tl-line-2); color: var(--tl-ink); font-weight: 700; border-radius: 999px; }
html[data-brand="trainlive"] .login-social-btn:hover { background: #fff; border-color: var(--tl-teal); }
html[data-brand="trainlive"] .login-divider { color: var(--tl-ink-3); }
html[data-brand="trainlive"] .login-divider::before, html[data-brand="trainlive"] .login-divider::after { background: var(--tl-line-2); }
html[data-brand="trainlive"] .form-label { color: var(--tl-ink-2); font-weight: 600; }
html[data-brand="trainlive"] .form-input, html[data-brand="trainlive"] .hero-login-card .form-input { background: #fff; border: 1.5px solid var(--tl-line-2); color: var(--tl-ink); border-radius: 12px; }
html[data-brand="trainlive"] .form-input::placeholder { color: var(--tl-ink-3); }
html[data-brand="trainlive"] .form-input:focus, html[data-brand="trainlive"] .hero-login-card .form-input:focus { border-color: var(--tl-teal); background: #fff; box-shadow: 0 0 0 3px rgba(43, 178, 171, .18); }
html[data-brand="trainlive"] .form-error, html[data-brand="trainlive"] .hero-login-card .form-error { color: #d0242c; }
html[data-brand="trainlive"] .login-submit { border-radius: 999px; }
html[data-brand="trainlive"] .login-footer-text { color: var(--tl-ink-2); }
html[data-brand="trainlive"] .login-footer-text a { color: var(--tl-teal); font-weight: 700; }
html[data-brand="trainlive"] #codeEmailLabel { color: var(--tl-ink) !important; }
html[data-brand="trainlive"] #changeEmailBtn { color: var(--tl-ink-2) !important; }
html[data-brand="trainlive"] #resendBtn { color: var(--tl-teal) !important; font-weight: 700; }
html[data-brand="trainlive"] #resendStatus { color: var(--tl-ink-2) !important; }
html[data-brand="trainlive"] .invite-hero { background: var(--tl-grad-soft); border: 1px solid rgba(43, 178, 171, .35); backdrop-filter: none; }
html[data-brand="trainlive"] .invite-hero .invite-avatar { border-color: rgba(43, 178, 171, .4); background: #fff; }
html[data-brand="trainlive"] .invite-hero .invite-headline { color: var(--tl-ink-2); }
html[data-brand="trainlive"] .invite-hero .invite-name { text-transform: none; letter-spacing: -.02em; color: var(--tl-ink); font-size: 1.6rem; }
html[data-brand="trainlive"] .invite-avatar { color: var(--tl-teal); background: var(--tl-grad-soft); border-color: var(--tl-line); }
html[data-brand="trainlive"] .invite-sub, html[data-brand="trainlive"] .invite-about-intro { color: var(--tl-ink-2); }
html[data-brand="trainlive"] .invite-check { background: rgba(47, 174, 125, .15); color: var(--tl-green); }
html[data-brand="trainlive"] .invite-check--pending { background: rgba(43, 178, 171, .15); color: var(--tl-teal); }

/* ── guides ────────────────────────────────────────────────────────────────── */
html[data-brand="trainlive"] .section-alt { background: var(--bg-base); }
html[data-brand="trainlive"] .section-header p, html[data-brand="trainlive"] .guide-meta { color: var(--tl-ink-2); }
html[data-brand="trainlive"] .breadcrumbs { color: var(--tl-ink-3); }
html[data-brand="trainlive"] .breadcrumbs a { color: var(--tl-ink-2); }
html[data-brand="trainlive"] .breadcrumbs a:hover { color: var(--tl-teal); }
html[data-brand="trainlive"] .guide-intro { border-left-color: var(--tl-teal); color: var(--tl-ink); }
html[data-brand="trainlive"] .guide-article p, html[data-brand="trainlive"] .guide-article li { color: var(--tl-ink-2); }
html[data-brand="trainlive"] .guide-article a { color: var(--tl-teal); }
html[data-brand="trainlive"] .guide-article strong { color: var(--tl-ink); }
html[data-brand="trainlive"] .guide-takeaways { background: #fff; border: 1px solid var(--tl-line); border-radius: 22px; box-shadow: var(--tl-shadow-md); }
html[data-brand="trainlive"] .guide-cta { background: var(--tl-grad); border: 0; border-radius: 22px; color: #fff; box-shadow: var(--tl-shadow-lg); }
html[data-brand="trainlive"] .guide-cta h2, html[data-brand="trainlive"] .guide-cta p { color: #fff; }
html[data-brand="trainlive"] .guide-cta .btn-primary { background: #fff; color: var(--tl-ink); box-shadow: 0 6px 18px rgba(17, 48, 42, .15); }
html[data-brand="trainlive"] .guide-card { background: rgba(255, 255, 255, .78); border: 1px solid var(--tl-line); border-radius: 22px; box-shadow: 0 1px 2px rgba(17, 48, 42, .05), 0 2px 8px rgba(17, 48, 42, .04); }
html[data-brand="trainlive"] .guide-card:hover { border-color: var(--tl-teal); box-shadow: var(--tl-shadow-md); }
html[data-brand="trainlive"] .guide-card h3 { font-size: 1.15rem; }
html[data-brand="trainlive"] .guide-card p { color: var(--tl-ink-2); }
html[data-brand="trainlive"] .guide-card .guide-card-more { color: var(--tl-teal); font-weight: 700; }
html[data-brand="trainlive"] .faq-item { background: rgba(255, 255, 255, .78); border: 1px solid var(--tl-line); border-radius: 16px; }
html[data-brand="trainlive"] .faq-item[open], html[data-brand="trainlive"] .faq-item:hover { border-color: var(--tl-line-2); background: #fff; }
html[data-brand="trainlive"] .faq-item summary { font-size: 1.02rem; font-weight: 700; }
html[data-brand="trainlive"] .faq-item summary::after { color: var(--tl-teal); font-weight: 400; }
html[data-brand="trainlive"] .faq-item .faq-answer { color: var(--tl-ink-2); }

/* ── legal pages ───────────────────────────────────────────────────────────── */
html[data-brand="trainlive"] .policy-header h1 { color: var(--tl-ink); }
html[data-brand="trainlive"] .policy-header .policy-subtitle, html[data-brand="trainlive"] .policy-header .policy-date { color: var(--tl-ink-2); }
html[data-brand="trainlive"] .policy-section h3 { color: var(--tl-ink); font-size: 1.1rem; }
html[data-brand="trainlive"] .policy-section .pcontent { color: var(--tl-ink-2); }
html[data-brand="trainlive"] .policy-section .pcontent strong { color: var(--tl-ink); }
html[data-brand="trainlive"] .policy-section .pcontent a { color: var(--tl-teal); }
html[data-brand="trainlive"] .policy-notice { background: #fff8e1; border-color: #f0c860; border-radius: 16px; }
html[data-brand="trainlive"] .back-link { color: var(--tl-teal); font-weight: 700; }

/* ── 404 ───────────────────────────────────────────────────────────────────── */
html[data-brand="trainlive"] .nf-code { background: var(--tl-grad); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }
html[data-brand="trainlive"] .nf-title { color: var(--tl-ink); }
html[data-brand="trainlive"] .nf-text { color: var(--tl-ink-2); }
html[data-brand="trainlive"] .nf-links a { border-radius: 999px; font-weight: 700; }
html[data-brand="trainlive"] .nf-primary { background: var(--tl-grad); color: #fff; box-shadow: 0 6px 18px rgba(47, 174, 125, .32); }
html[data-brand="trainlive"] .nf-primary:hover { background: var(--tl-grad); }
html[data-brand="trainlive"] .nf-secondary { background: #fff; border: 1.5px solid var(--tl-line-2); color: var(--tl-ink); }
html[data-brand="trainlive"] .nf-secondary:hover { background: #fff; border-color: var(--tl-teal); }

/* ── footer (styles.css pages) ─────────────────────────────────────────────── */
html[data-brand="trainlive"] .footer { background: rgba(255, 255, 255, .6); border-top: 1px solid var(--tl-line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
html[data-brand="trainlive"] .footer-brand { align-items: center; gap: 7px; }
html[data-brand="trainlive"] .footer-brand img { content: url("/img/brand/trainlive/runner-mark.png"); height: 40px; width: auto; }
html[data-brand="trainlive"] .footer-brand::after { content: "trainlive.it"; font-weight: 800; font-size: 20px; letter-spacing: -.02em; color: var(--tl-ink); }
html[data-brand="trainlive"] .footer-section p { color: var(--tl-ink-2); }
html[data-brand="trainlive"] .footer-section h4 { text-transform: uppercase; letter-spacing: .1em; font-size: 12.5px; font-weight: 800; color: var(--tl-ink-3); }
html[data-brand="trainlive"] .footer-section a { color: var(--tl-ink-2); font-weight: 600; }
html[data-brand="trainlive"] .footer-section a:hover { color: var(--tl-ink); }
html[data-brand="trainlive"] .footer-bottom { border-top-color: var(--tl-line); color: var(--tl-ink-3); }

/* ── register page (all of its rules are inline in register.php) ───────────── */
html[data-brand="trainlive"] body.reg-body, html[data-brand="trainlive"] .reg-marketing, html[data-brand="trainlive"] .reg-form-panel { color: var(--tl-ink); }
html[data-brand="trainlive"] .reg-marketing { background: linear-gradient(160deg, #eaf4ee 0%, #e4f1f3 55%, #d9edf0 100%); }
html[data-brand="trainlive"] .reg-marketing::before { background: radial-gradient(circle, rgba(43, 178, 171, .16), transparent 70%); }
html[data-brand="trainlive"] .reg-marketing::after { background: radial-gradient(circle, rgba(124, 213, 140, .18), transparent 70%); }
html[data-brand="trainlive"] .reg-logo { gap: 7px; }
html[data-brand="trainlive"] .reg-logo img { content: url("/img/brand/trainlive/runner-mark.png"); width: auto; height: 40px; border-radius: 0; object-fit: contain; }
html[data-brand="trainlive"] .reg-logo-text { display: inline-flex; align-items: center; font-size: 0; color: transparent; text-transform: none; letter-spacing: 0; }
html[data-brand="trainlive"] .reg-logo-text::before { content: "Train"; font-size: 22px; font-weight: 800; letter-spacing: -.022em; color: var(--tl-ink); line-height: 1; }
html[data-brand="trainlive"] .reg-logo-text .dot { font-size: 0; color: transparent; display: inline-flex; margin-left: 3px; }
html[data-brand="trainlive"] .reg-logo-text .dot::before { content: "LIVE"; font-size: 15px; font-weight: 800; letter-spacing: .01em; color: #fff; background: var(--tl-live); padding: 4px 7px 3px; border-radius: 8px; line-height: 1; }
html[data-brand="trainlive"] .reg-logo-text::after { content: ".it"; font-size: 22px; font-weight: 800; letter-spacing: -.022em; color: var(--tl-ink); line-height: 1; margin-left: 1px; }
html[data-brand="trainlive"] .reg-headline { text-transform: none; letter-spacing: -.03em; font-weight: 800; font-size: 2.6rem; line-height: 1.06; color: var(--tl-ink); }
html[data-brand="trainlive"] .reg-headline span { background: var(--tl-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-brand="trainlive"] .reg-tagline { color: var(--tl-ink-2); }
html[data-brand="trainlive"] .reg-trust-item { color: var(--tl-ink); font-weight: 600; }
html[data-brand="trainlive"] .reg-trust-icon { background: var(--tl-grad-soft); border-radius: 12px; }
html[data-brand="trainlive"] .reg-trust-icon svg { color: var(--tl-green); }
html[data-brand="trainlive"] .reg-app-badge span { color: var(--tl-ink-3); font-weight: 600; }
html[data-brand="trainlive"] .reg-lang-btn { background: rgba(255, 255, 255, .7); border: 1.5px solid var(--tl-line-2); color: var(--tl-ink-2); border-radius: 999px; font-weight: 700; }
html[data-brand="trainlive"] .reg-lang-btn:hover { background: #fff; border-color: var(--tl-teal); color: var(--tl-ink); }
html[data-brand="trainlive"] .reg-lang-dropdown { background: #fff; border: 1px solid var(--tl-line); box-shadow: var(--tl-shadow-md); border-radius: 16px; padding: 6px; }
html[data-brand="trainlive"] .reg-lang-option { color: var(--tl-ink-2); font-weight: 600; border-radius: 9px; }
html[data-brand="trainlive"] .reg-lang-option:hover { background: var(--tl-grad-soft); color: var(--tl-ink); }
html[data-brand="trainlive"] .reg-lang-option.active { background: var(--tl-grad-soft); color: var(--tl-ink); }
html[data-brand="trainlive"] .reg-lang-dropdown { width: 340px; min-width: 0; max-width: calc(100vw - 32px); max-height: min(80vh, 460px); columns: 2; column-gap: 4px; }
html[data-brand="trainlive"] .reg-lang-option { break-inside: avoid; }
html[data-brand="trainlive"] .reg-form-panel { background: #fff; border-left: 1px solid var(--tl-line); }
html[data-brand="trainlive"] .reg-form-title { text-transform: none; letter-spacing: -.02em; font-weight: 800; font-size: 1.5rem; color: var(--tl-ink); }
html[data-brand="trainlive"] .reg-form-subtitle { color: var(--tl-ink-2); }
html[data-brand="trainlive"] .auth-social-btn { border-radius: 999px; font-weight: 700; }
html[data-brand="trainlive"] .auth-social-btn.google-btn { background: #fff; color: var(--tl-ink); border: 1.5px solid var(--tl-line-2); }
html[data-brand="trainlive"] .auth-social-btn.google-btn:hover { background: #fff; border-color: var(--tl-teal); box-shadow: none; }
html[data-brand="trainlive"] .auth-social-hint { color: var(--tl-ink-3); }
html[data-brand="trainlive"] .auth-divider { color: var(--tl-ink-3); }
html[data-brand="trainlive"] .auth-divider::before, html[data-brand="trainlive"] .auth-divider::after { background: var(--tl-line-2); }
html[data-brand="trainlive"] .form-label .required { color: #d0242c; }
html[data-brand="trainlive"] .form-input.input-error { border-color: #d0242c; box-shadow: 0 0 0 3px rgba(208, 36, 44, .12); }
html[data-brand="trainlive"] .form-field-error { color: #d0242c; }
html[data-brand="trainlive"] .password-toggle { color: var(--tl-ink-3); }
html[data-brand="trainlive"] .password-toggle:hover { color: var(--tl-ink); }
html[data-brand="trainlive"] .reg-form-panel .form-error { color: #d0242c; background: rgba(208, 36, 44, .06); border-color: rgba(208, 36, 44, .18); }
html[data-brand="trainlive"] .auth-submit { background: var(--tl-grad); color: #fff; border-radius: 999px; text-transform: none; letter-spacing: 0; font-weight: 700; font-size: 1rem; box-shadow: 0 6px 18px rgba(47, 174, 125, .32); }
html[data-brand="trainlive"] .auth-submit:hover { background: var(--tl-grad); box-shadow: 0 10px 24px rgba(47, 174, 125, .4); transform: translateY(-1px); }
html[data-brand="trainlive"] .auth-terms { color: var(--tl-ink-3); }
html[data-brand="trainlive"] .auth-terms a { color: var(--tl-ink-2); text-decoration-color: var(--tl-line-2); }
html[data-brand="trainlive"] .auth-terms a:hover { color: var(--tl-teal); text-decoration-color: var(--tl-teal); }
html[data-brand="trainlive"] .auth-footer-text { color: var(--tl-ink-2); }
html[data-brand="trainlive"] .auth-footer-text a { color: var(--tl-teal); }
@media (max-width: 1024px) {
    html[data-brand="trainlive"] .reg-form-panel { background: transparent; }
    html[data-brand="trainlive"] .reg-mobile-header .reg-headline { font-size: 1.7rem; }
}

/* ── phone widths ──────────────────────────────────────────────────────────── */
@media (max-width: 992px) {
    html[data-brand="trainlive"] .header-auth { display: none; }   /* like the landing: the menu carries the links */
}
@media (max-width: 1024px) {
    html[data-brand="trainlive"] .reg-mobile-header { padding-top: 44px; }   /* clear the fixed language button */
}

/* ── public training-video share page (/v/{code}, css/video.css) ─────────── */
/* css/video.css is the dark design (perfoscan keeps it). Train Live gets the
   stream page's light shell: mint page + the landing's waves, the frosted
   header with the exact Train[LIVE].it wordmark, the dark 9:16 clip card, and
   the info column next to it in ink on mint. (Until 2026-10-14 only fonts and
   accents were swapped, so the generic light body rule above left video.css's
   white secondary text, tags and buttons on the mint page, unreadable.) */
html[data-brand="trainlive"] { --tv-bg: #e4f1f3; }   /* video.css paints <html> with it (overscroll) */
html[data-brand="trainlive"] body.video-body { --tv-font: var(--tl-font); --tv-font-num: 'Space Grotesk', var(--tl-font); --tv-accent: #2bb2ab; --tv-accent-2: #2fae7d;
    --tv-ink: var(--tl-ink); --tv-ink-2: #4f6a61; --tv-ink-3: #587066; --tv-glass: rgba(17, 48, 42, .06); --tv-line: rgba(17, 48, 42, .14);
    background: #e4f1f3; color: var(--tl-ink); color-scheme: light; }
html[data-brand="trainlive"] .video-body .num, html[data-brand="trainlive"] .video-body .num * { font-family: 'Space Grotesk', var(--tl-font) !important; }
html[data-brand="trainlive"] .video-body .tv-shell { background: linear-gradient(160deg, #eaf4ee 0%, #e4f1f3 55%, #dcedf1 100%); }
html[data-brand="trainlive"] .video-body .tv-waves { opacity: .9; overflow: hidden; }
html[data-brand="trainlive"] .video-body .tv-waves img { position: relative; left: 50%; transform: translateX(-50%); min-width: 1440px; width: 110vw; max-width: none; }
html[data-brand="trainlive"] .video-body .tv-header { background: rgba(255, 255, 255, .62); border-bottom: 1px solid var(--tl-line); box-shadow: 0 4px 24px rgba(17, 48, 42, .05); }
html[data-brand="trainlive"] .video-body .tv-brand { gap: 7px; color: var(--tl-ink); }
html[data-brand="trainlive"] .video-body .tv-brand-mark { height: 40px; width: auto; display: block; }
html[data-brand="trainlive"] .video-body .tv-brand-word { display: inline-flex; align-items: center; gap: 1px; font-weight: 800; font-size: 22px; letter-spacing: -.022em; line-height: 1; color: var(--tl-ink); white-space: nowrap; }
html[data-brand="trainlive"] .video-body .tv-brand-live { display: inline-block; background: var(--tl-live); color: #fff; font-size: 15px; font-weight: 800; letter-spacing: .01em; line-height: 1; padding: 4px 7px 3px; border-radius: 8px; margin: 0 0 0 3px; vertical-align: baseline; }
html[data-brand="trainlive"] .video-body .tv-btn { font-size: 14.5px; padding: 0 22px; height: 42px; }
html[data-brand="trainlive"] .video-body .tv-btn-ghost { color: var(--tl-ink); border: 1.5px solid var(--tl-line-2); background: transparent; }
html[data-brand="trainlive"] .video-body .tv-btn-ghost:hover { border-color: var(--tl-teal); }
html[data-brand="trainlive"] .video-body .tv-btn-primary, html[data-brand="trainlive"] .video-body .tv-send { background: var(--tl-grad); color: #fff; }
html[data-brand="trainlive"] .video-body .tv-btn-primary { box-shadow: 0 6px 18px rgba(47, 174, 125, .32); }
html[data-brand="trainlive"] .video-body .tv-player { box-shadow: 0 0 0 1px rgba(17, 48, 42, .06), 0 24px 60px rgba(20, 70, 90, .22); }
html[data-brand="trainlive"] .video-body .tv-like:not(.on), html[data-brand="trainlive"] .video-body .tv-more,
html[data-brand="trainlive"] .video-body .tv-signin, html[data-brand="trainlive"] .video-body .tv-pill { color: var(--tl-ink); }
html[data-brand="trainlive"] .video-body .tv-signin:hover, html[data-brand="trainlive"] .video-body .tv-pill:hover, html[data-brand="trainlive"] .video-body .tv-more:hover { border-color: var(--tl-teal); }
html[data-brand="trainlive"] .video-body .tv-composer input { color: var(--tl-ink); background: #fff; }
html[data-brand="trainlive"] .video-body .tv-cerr { color: #c0262d; }
html[data-brand="trainlive"] .video-body .tv-avatar .ini, html[data-brand="trainlive"] .video-body .tv-c-av { color: #1f8a62; }
@media (max-width: 640px) {
    html[data-brand="trainlive"] .video-body .tv-brand-mark { height: 32px; }
    html[data-brand="trainlive"] .video-body .tv-brand-word { font-size: 17px; }
    html[data-brand="trainlive"] .video-body .tv-brand-live { font-size: 12px; padding: 3px 6px 2px; }
    html[data-brand="trainlive"] .video-body .tv-btn { font-size: 13.5px; padding: 0 16px; height: 36px; }
}

/* ── public live-stream share page (/stream/{code}, css/stream.css) ─────────── */
/* The page is the web twin of the app's expanded live stream: DARK on both brands.
   Only the fonts and the accent / LIVE tokens are brand-swapped here. */
html[data-brand="trainlive"] body.stream-body { background: #000; color: #fff; --st-font: var(--tl-font); --st-font-num: 'Space Grotesk', var(--tl-font); --st-accent: #2bb2ab; --st-accent-2: #2fae7d; --st-live: #d0242c; --st-sheet: #0f1a1c; color-scheme: dark; }
html[data-brand="trainlive"] .stream-body h1, html[data-brand="trainlive"] .stream-body h2 { color: #fff; }
html[data-brand="trainlive"] .stream-body .num, html[data-brand="trainlive"] .stream-body .num * { font-family: 'Space Grotesk', var(--tl-font) !important; }
html[data-brand="trainlive"] .stream-body .st-send, html[data-brand="trainlive"] .stream-body .st-primary { background: var(--tl-grad); color: #fff; }
html[data-brand="trainlive"] .stream-body .st-primary .btn-spinner { border-color: rgba(255, 255, 255, .35); border-top-color: #fff; }
html[data-brand="trainlive"] .stream-body .st-avatar .ini, html[data-brand="trainlive"] .stream-body .st-c .av { color: #7cd58c; }
html[data-brand="trainlive"] .stream-body .st-caption { background: linear-gradient(120deg, rgba(63, 191, 159, .42), rgba(90, 167, 216, .42)); }
html[data-brand="trainlive"] .stream-body .st-fi:focus { border-color: var(--tl-teal); }
html[data-brand="trainlive"] .stream-body .st-resend { color: #7cd58c; }
/* ── stream page shell: the home page around the player ───────────────────────
   Light mint page + the landing's waves, a frosted header with the exact
   Train[LIVE].it wordmark (runner mark, ink, LIVE red; sizes of .brand in
   css/landing-trainlive.css) and its Log In / Get Started buttons; the dark
   9:16 player sits below with a soft coloured glow of the current media. */
html[data-brand="trainlive"] .stream-body .st-shell { background: linear-gradient(160deg, #eaf4ee 0%, #e4f1f3 55%, #dcedf1 100%); }
html[data-brand="trainlive"] .stream-body .st-waves { display: block; position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
html[data-brand="trainlive"] .stream-body .st-waves img { position: absolute; left: 50%; transform: translateX(-50%); min-width: 1440px; width: 110vw; max-width: none; opacity: .9; }
html[data-brand="trainlive"] .stream-body .st-waves img:first-child { top: 6%; }
html[data-brand="trainlive"] .stream-body .st-waves img:last-child { top: 58%; transform: translateX(-50%) scaleX(-1); }
html[data-brand="trainlive"] .stream-body .st-header { background: rgba(255, 255, 255, .62); border-bottom: 1px solid var(--tl-line); box-shadow: 0 4px 24px rgba(17, 48, 42, .05); }
html[data-brand="trainlive"] .stream-body .st-brand { gap: 7px; color: var(--tl-ink); }
html[data-brand="trainlive"] .stream-body .st-brand-mark { height: 40px; width: auto; display: block; }
html[data-brand="trainlive"] .stream-body .st-brand-word { display: inline-flex; align-items: center; gap: 1px; font-weight: 800; font-size: 22px; letter-spacing: -.022em; line-height: 1; color: var(--tl-ink); white-space: nowrap; }
html[data-brand="trainlive"] .stream-body .st-brand-live { display: inline-block; background: var(--tl-live); color: #fff; font-size: 15px; font-weight: 800; letter-spacing: .01em; line-height: 1; padding: 4px 7px 3px; border-radius: 8px; margin-left: 3px; }
html[data-brand="trainlive"] .stream-body .st-btn { font-size: 14.5px; padding: 0 22px; height: 42px; }
html[data-brand="trainlive"] .stream-body .st-btn-ghost { color: var(--tl-ink); border: 1.5px solid var(--tl-line-2); background: transparent; }
html[data-brand="trainlive"] .stream-body .st-btn-ghost:hover { border-color: var(--tl-teal); }
html[data-brand="trainlive"] .stream-body .st-btn-primary { color: #fff; background: var(--tl-grad); box-shadow: 0 6px 18px rgba(47, 174, 125, .32); }
html[data-brand="trainlive"] .stream-body .st-btn-primary:hover { box-shadow: 0 10px 24px rgba(47, 174, 125, .4); }
html[data-brand="trainlive"] .stream-body .st-backdrop { inset: 0; filter: blur(60px) saturate(1.4); opacity: .5; transform: none; background-color: transparent;
    -webkit-mask-image: radial-gradient(ellipse 34% 46% at 50% 50%, #000 30%, transparent 100%); mask-image: radial-gradient(ellipse 34% 46% at 50% 50%, #000 30%, transparent 100%); }
@media (min-width: 641px) {
    html[data-brand="trainlive"] .stream-body .st-phone { box-shadow: 0 0 0 1px rgba(17, 48, 42, .06), 0 24px 60px rgba(20, 70, 90, .22); }
}
@media (max-width: 640px) {
    html[data-brand="trainlive"] .stream-body .st-brand-mark { height: 32px; }
    html[data-brand="trainlive"] .stream-body .st-brand-word { font-size: 17px; }
    html[data-brand="trainlive"] .stream-body .st-brand-live { font-size: 12px; padding: 3px 6px 2px; }
    html[data-brand="trainlive"] .stream-body .st-btn { font-size: 13.5px; padding: 0 16px; height: 36px; }
}