/* One screen contract for Jinja pages and legacy inline documents. */
@import url("tokens.css");

.tl-screen, .tl-screen *, .tl-screen *::before, .tl-screen *::after { box-sizing: border-box; }
.tl-screen { font-family: var(--font-sans); color: var(--text-primary); background-color: var(--tl-surface-page); }
.tl-screen img, .tl-screen video, .tl-screen canvas { max-width: 100%; }
.tl-screen input:not([type=checkbox]):not([type=radio]), .tl-screen select, .tl-screen textarea { max-width: 100%; }
.tl-screen :is(.container, .app-page-shell, .tl-page-shell, .card, .tl-card, .pub-card) { min-width: 0; }
.tl-screen :is(.breadcrumb, .tl-breadcrumb, .back-link),
.tl-screen :is(.breadcrumb, .tl-breadcrumb) a { color: var(--color-primary-dark); }
.tl-screen .breadcrumb-current { color: var(--text-primary); }
.tl-screen :is(.breadcrumb, .tl-breadcrumb, .back-link) a:hover, .tl-screen .back-link:hover { color: var(--color-primary); }
.tl-screen :is(.header, .header-actions, .header-right, .nav-links, .pub-header, .tl-page-header) { flex-wrap: wrap; }
.tl-screen .header > *, .tl-screen .pub-header > * { min-width: 0; }
.tl-screen :is(.header h1, .pub-header h1) { overflow-wrap: anywhere; }
.tl-screen :is(a, button, input, select, textarea, summary):focus-visible { outline: 3px solid var(--color-accent-cyan); outline-offset: 3px; }
.tl-screen :is(.alert-error, .flash-error) { color: var(--color-danger-text); background: var(--color-danger-bg); border: 1px solid var(--color-danger); }
.tl-screen :is(.alert-message, .flash-message) { color: var(--color-info-text); background: var(--color-info-bg); border: 1px solid var(--color-info); }
.tl-table-scroll { max-width: 100%; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.tl-table-scroll > table { width: 100%; }
.tl-global .header, .tl-public .pub-header, .tl-public .live-header { background: var(--surface-brand); }
.tl-public { font-size: var(--font-size-base); }
.tl-public table { font-size: var(--font-size-sm); }
.tl-public .pub-card h3 { color: inherit; }
.tl-public .pub-event-header h3 { color: white; }
.tl-public .header { background: var(--surface-brand); color: white; }
.tl-public .header :is(h1, h2, p) { color: white; }
.tl-global .header h1 { color: white; }
.tl-global .nav-links { display: flex; gap: 12px 20px; }
.tl-global .nav-links a, .tl-public a { color: var(--color-primary-dark); }
.tl-public .pub-tab.active, .tl-public .pub-badge { background: var(--color-primary); color: white; }
.tl-public :is(.pub-footer, .pub-empty) { color: var(--text-secondary); }
.tl-auth .card, .tl-auth .login-box, .tl-auth .login-container { box-shadow: var(--shadow-lg); border-radius: var(--radius-xl); }
.tl-auth { margin: 0; min-height: 100vh; padding: 24px; background: var(--tl-surface-page); }
.tl-auth form :is(button[type=submit], button:not([type]), input[type=submit]), .tl-global .btn-primary { background: var(--color-primary); color: white; }
.tl-screen.with-sidebar .sidebar-hamburger { background: var(--color-primary-dark); }
.tl-screen .sidebar-link.active, .tl-screen .sidebar-sublink.active { font-weight: 700; }
.tl-screen .collapsed .sidebar-sublink::before { content: attr(data-short-label); flex: 0 0 24px; text-align: center; font-size: 0.7rem; font-weight: 700; }
.tl-screen.sidebar-mobile-open { overflow: hidden; }
.tl-screen.with-sidebar.chip-reads-kiosk { margin-left: 0 !important; padding-top: 0 !important; }
.guide-document { line-height: 1.65; overflow-wrap: anywhere; }
.guide-document :is(p, ul, ol, pre, h1, h2, h3) { margin: 12px 0; }
.guide-document :is(ul, ol) { padding-left: 24px; }
.guide-document pre { white-space: pre-wrap; }
.tl-screen .dashboard-quick-actions { overflow: visible; }
.tl-screen .qa-dropdown-trigger { padding: 0; }
.qa-trigger-button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 11px; background: transparent; border: 0; color: inherit; font: inherit; cursor: pointer; text-align: left; }
.tl-screen .qa-dropdown { width: min(280px, calc(100vw - 32px)); min-width: 0; }

/* Solid surfaces and one action colour across every shell. */
.tl-screen { background: var(--tl-surface-page); -webkit-font-smoothing: antialiased; }
:where(.tl-screen a) { color: var(--color-primary-dark); text-underline-offset: 3px; }
.tl-screen :is(h1, h2, h3) { letter-spacing: -.02em; line-height: 1.3; }
.tl-screen :is(p, .subtitle, .tl-page-subtitle, .dash-card-body) { line-height: 1.55; }
.tl-screen :is(.header, .card, .tl-card, .pub-card, .panel, .dash-card, .stat-chip) {
  border: 1px solid var(--tl-border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}
.tl-screen :is(.card, .dash-card, .dashboard-card):hover { transform: none; box-shadow: var(--shadow-sm); }
.tl-screen .header { box-shadow: none; }
.tl-screen :is(.btn, .tl-button, .btn-card, .btn-hero-primary, .btn-hero-secondary, .tl-action-card) { border-radius: var(--radius-md); text-shadow: none; }
.tl-screen :is(.btn, .tl-button, .btn-card, .btn-hero-primary, .btn-hero-secondary):hover { transform: none; }
.tl-screen :is(.btn-primary, .tl-button--primary, .tl-action-card--primary) { background: var(--color-primary); color: white; }
.tl-screen :is(.btn-primary, .tl-button--primary, .tl-action-card--primary):hover { background: var(--color-primary-dark); }
.tl-screen :is(.form-group input, .form-group select, .form-group textarea, .tl-input, .tl-select) { border-color: var(--tl-border-strong); }
.tl-screen :is(.dashboard-hero-title, .dash-hero-title) { text-shadow: none; }
.tl-screen .dashboard-hero { border-left: 4px solid var(--color-accent-warm); }
.tl-screen .dashboard-root--admin { max-width: none; padding: 0; }
.tl-screen .dashboard-root--rider { max-width: none; padding: 0; }
.tl-screen .dash-hero.rider-dashboard-hero { background: white; color: var(--text-primary); border: 1px solid var(--tl-border-subtle); border-left: 4px solid var(--color-accent-warm); }
.tl-screen .dash-hero.rider-dashboard-hero .dash-hero-name { color: var(--text-primary); font-size: clamp(1.35rem, 2vw, 1.75rem); letter-spacing: -.02em; }
.tl-screen .dash-hero.rider-dashboard-hero :is(.dash-hero-title, .dash-hero-sub, .dash-hero-meta) { color: var(--text-secondary); }
.tl-screen .dash-hero.rider-dashboard-hero .pill { background: var(--tl-surface-muted); color: var(--text-secondary); border: 1px solid var(--tl-border-subtle); font-weight: 500; }
.tl-screen .dash-hero.rider-dashboard-hero .btn-hero-primary { background: var(--color-primary); color: white; }
.tl-screen .dash-hero.rider-dashboard-hero .btn-hero-secondary { background: white; color: var(--color-primary-dark); border-color: var(--tl-border-strong); }
.tl-screen .dashboard-shortcuts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tl-screen .dashboard-shortcuts .btn-card { display: flex; align-items: center; justify-content: center; min-height: 44px; }
.tl-screen :is(.dash-card-icon, .panel-title-icon) svg { width: 18px; height: 18px; }
.tl-screen :is(.dashboard-news-card, .dashboard-stat, .qa-icon) { background: var(--tl-surface-muted); }
.tl-screen :is(.dashboard-icon--accent, .dashboard-icon--info, .tl-action-card--subtle, .pub-embed-btn) {
  background: var(--surface-brand-soft); color: var(--color-primary-dark); border-color: var(--tl-border-subtle);
}
.tl-screen .dashboard-next-event, .tl-screen .tonight-box { background: var(--surface-brand); }
.tl-screen .dash-hero { background: var(--surface-brand); color: white; padding: 24px; margin-bottom: 20px; border: 0; box-shadow: none; border-radius: var(--radius-xl); }
.tl-screen .dash-hero :is(h1, h2, .dash-hero-name) { color: white; }
.tl-screen .dash-hero :is(.dash-hero-title, .dash-hero-sub, .dash-hero-meta) { color: #617080; }
.tl-screen .dash-hero .pill { background: #283849; border-color: #B8C3D0; box-shadow: none; }
.tl-screen .dash-hero .btn-hero-primary { background: var(--color-accent-warm); color: var(--color-primary-deep); box-shadow: none; }
.tl-screen .dash-hero .btn-hero-secondary { background: #283849; color: white; border-color: #B8C3D0; }
.tl-screen .btn-card { background: var(--color-primary); box-shadow: none; }
.tl-screen .btn-card-secondary { background: white; color: var(--color-primary-dark); border-color: var(--tl-border-strong); }
.tl-screen .btn-card-disabled { background: #E2E7EE; color: #617080; }
.tl-screen .app-sidebar { background: var(--surface-brand); color: #172331; box-shadow: none; border-right: 1px solid #E2E7EE; }
.tl-screen .sidebar-header { min-height: 72px; }
.tl-screen .sidebar-org-name { letter-spacing: -.015em; }
.tl-screen :is(.sidebar-icon, .dashboard-section-icon, .dashboard-panel-icon, .dashboard-card-icon, .qa-icon) { display: inline-flex; align-items: center; justify-content: center; }
.tl-screen .sidebar-icon svg { width: 18px; height: 18px; }
.tl-screen :is(.sidebar-link, .sidebar-sublink) { color: #425366; }
.tl-screen .sidebar-group-label { color: #617080; font-size: .7rem; letter-spacing: .06em; }
.tl-screen :is(.sidebar-link, .sidebar-sublink).active { background: #EEF3FF; color: white; box-shadow: inset 3px 0 var(--color-accent-warm); }
.tl-screen .sidebar-user-name { color: #617080; }
.tl-screen .sidebar-logout-btn { background: #283849; color: #EEF3FF; }
.tl-auth :is(.card, .login-card, .login-box, .login-container, .signup-container) {
  border: 1px solid var(--tl-border-subtle); border-top: 4px solid var(--color-accent-warm);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-lg);
}
.tl-auth :is(h1, h2) { color: var(--text-primary); }
.tl-auth :is(.org-badge, .org-pill) { background: var(--surface-brand-soft); color: var(--color-primary-dark); border: 1px solid var(--tl-border-subtle); border-radius: var(--radius-md); }
.tl-auth :is(.subtitle, .footer, .back-link) { color: var(--text-secondary); }
.tl-auth a:not(.btn) { color: var(--color-primary-dark); }
.tl-auth input:not([type=checkbox]):not([type=radio]) { border: 1px solid var(--tl-border-strong); border-radius: var(--radius-md); min-height: 44px; }
.tl-auth :is(.btn, button[type=submit], button.primary) { min-height: 44px; border-radius: var(--radius-md); box-shadow: none; }
.tl-auth :is(.btn, button[type=submit], button.primary):hover { transform: none; box-shadow: none; }
.tl-screen input:has(+ .tl-password-toggle) { padding-right: 64px; min-height: 44px; }
.tl-screen .tl-password-toggle {
  position: absolute; top: 4px; right: 4px; width: 54px; height: 36px; min-height: 36px;
  padding: 4px 8px; margin: 0; border: 0; border-radius: 6px;
  background: transparent; color: var(--color-primary-dark); font-size: 12px; font-weight: 600;
  cursor: pointer; transform: none; box-shadow: none;
}
.tl-screen .tl-password-toggle:hover { background: var(--surface-brand-soft); transform: none; box-shadow: none; }
.tl-screen .pw-toggle { color: var(--color-primary-dark); }
.tl-global .header { background: var(--surface-brand); box-shadow: none; border: 0; border-bottom: 3px solid var(--color-accent-warm); }
.tl-public :is(.pub-header, .live-header) { background: var(--surface-brand); border-bottom: 3px solid var(--color-accent-warm); }
.tl-public .pub-card { box-shadow: none; }
.tl-public .pub-tab { border: 1px solid var(--tl-border-subtle); background: white; color: var(--text-secondary); }
.tl-public .pub-tab.active { background: var(--surface-brand-soft); color: var(--color-primary-dark); border-color: var(--color-primary); }

/* Sporting settings share the same restrained header and navigation as dashboards. */
.tl-screen .sporting-page-shell { padding: 24px 10px; }
.tl-screen .sporting-page-title { color: var(--text-primary); font-size: clamp(1.4rem, 2vw, 1.75rem); font-weight: 650; }
.tl-screen .sporting-nav { background: white; border: 1px solid var(--tl-border-subtle); box-shadow: none; border-radius: var(--radius-lg); padding: 6px; gap: 4px; }
.tl-screen .sporting-nav-label { color: var(--text-secondary); border-color: var(--tl-border-subtle); }
.tl-screen .sporting-nav-link { color: var(--text-secondary); border-radius: var(--radius-md); }
.tl-screen .sporting-nav-link:hover { background: var(--tl-surface-muted); color: var(--color-primary-dark); }
.tl-screen .sporting-nav-link.is-active { background: var(--surface-brand-soft); color: var(--color-primary-dark); border: 1px solid var(--tl-border-strong); box-shadow: inset 0 -2px var(--color-primary); }
.tl-screen .sporting-nav-link:focus-visible { outline-color: var(--color-primary); }
.tl-screen .sporting-page-shell .card-header { background: var(--tl-surface-muted); color: var(--text-primary); border-bottom: 1px solid var(--tl-border-subtle); font-size: 1rem; padding: 16px 20px; }
.tl-screen .sporting-page-shell .btn:not(.btn-danger):not(.btn-secondary):not(.btn-warning):not(.btn-success) { background: var(--color-primary); color: white; }
.tl-screen .sporting-page-shell :is(.toggle-details, .point-position) { color: var(--color-primary-dark); }
.tl-screen .sporting-page-header { background: white; border: 1px solid var(--tl-border-subtle); border-left: 4px solid var(--color-accent-warm); border-radius: var(--radius-xl); padding: 24px; margin-bottom: 20px; }
.tl-screen .sporting-page-header .subtitle { margin: 6px 0 0; color: var(--text-secondary); }
.tl-screen .sporting-page-shell .sporting-bib-note { background: var(--surface-brand-soft); color: var(--color-primary-dark); border: 1px solid var(--tl-border-subtle); padding: 14px 16px; border-radius: var(--radius-md); margin-bottom: 20px; line-height: 1.5; }

/* Legacy workflows use the same page header, section and control surfaces. */
.tl-app :is(.hero, .header, .page-header, .dash-hero) {
  background: var(--tl-surface-card); color: var(--text-primary);
  border: 1px solid var(--tl-border-subtle); border-left: 4px solid var(--color-accent-warm);
  border-radius: var(--radius-xl); box-shadow: none;
}
.tl-app :is(.hero, .dash-hero) :is(h1, h2, .dash-hero-name) { color: var(--text-primary); }
.tl-app :is(.hero-subtitle, .hero .subtitle, .dash-hero .dash-hero-title, .dash-hero .dash-hero-sub, .dash-hero .dash-hero-meta) { color: var(--text-secondary); }
.tl-app .hero .filter-form label { color: var(--text-secondary) !important; opacity: 1; margin-left: 0 !important; }
.tl-app .hero .filter-form { gap: 10px; align-items: center; }
.tl-app :is(.hero, .header) h1 { font-size: clamp(1.4rem, 2vw, 1.75rem); }
.tl-app .btn-hero {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: white; color: var(--color-primary-dark); border: 1px solid var(--tl-border-strong);
  border-radius: var(--radius-md); min-height: 40px; box-shadow: none; text-decoration: none;
}
.tl-app .btn-hero:hover { background: var(--surface-brand-soft); border-color: var(--color-primary); transform: none; box-shadow: none; }
.tl-app .btn-hero-primary { background: var(--color-primary); color: white; border-color: var(--color-primary); }
.tl-app .btn-hero-actions-menu { background: white; color: var(--color-primary-dark); border: 1px solid var(--tl-border-strong); border-radius: var(--radius-md); }
.tl-app .card-header { background: var(--tl-surface-muted); color: var(--text-primary); border-bottom: 1px solid var(--tl-border-subtle); }
.tl-app .category-header { background: var(--tl-surface-muted); color: var(--text-primary); border-bottom: 1px solid var(--tl-border-subtle); }
.tl-app button.collapsible-header { width: 100%; min-height: 44px; border: 0; border-bottom: 1px solid var(--tl-border-subtle); text-align: left; font-family: inherit; }
.tl-app .card-header :is(.btn-secondary, .btn-small) { background: white; color: var(--color-primary-dark); border: 1px solid var(--tl-border-strong); }
.tl-app :is(.tab-btn, .mode-tab).active { background: var(--surface-brand-soft); color: var(--color-primary-dark); border-color: var(--color-primary); box-shadow: inset 0 -2px var(--color-primary); }
.tl-app .results-hub-title { color: var(--text-primary); }
.tl-app .results-hub-subtitle { color: var(--text-secondary); }
.tl-screen input[type=checkbox], .tl-screen input[type=radio] { accent-color: var(--color-primary); }
.tl-screen select { color: var(--text-primary); background-color: var(--tl-surface-card); border-color: var(--tl-border-strong); border-radius: var(--radius-md); }
.tl-screen select:disabled { color: var(--text-secondary); background-color: var(--tl-surface-muted); }
.tl-app .grid:has(> a.card) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.tl-screen .league-view-field { min-width: 0; max-width: 100%; }
.tl-screen .league-view-field :is(input, select) { width: 100%; min-width: 0; }

@media (max-width: 767px) {
  .tl-screen .dashboard-shortcuts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tl-screen .chip-reads-toolbar { align-items: stretch; }
  .tl-screen .chip-reads-toolbar .filter-group { width: 100%; min-width: 0; align-self: stretch !important; }
  .tl-screen .chip-reads-toolbar .filter-group :is(input, select) { width: 100%; min-width: 0; }
  .tl-screen .app-sidebar { visibility: hidden; }
  .tl-screen .app-sidebar.mobile-open { visibility: visible; }
  .tl-screen .sidebar-collapse-btn { display: block; }
  .tl-screen.sidebar-mobile-open .sidebar-hamburger { display: none; }
  .tl-screen.with-sidebar { margin-left: 0 !important; padding-top: 60px !important; }
  .tl-screen .app-page-shell, .tl-screen .tl-page-shell { padding: 16px 10px; }
  .tl-screen :is(.header, .pub-header) { gap: 12px; padding: 16px; }
  .tl-screen :is(.header-actions, .header-right) { gap: 8px; }
  .tl-screen .container { max-width: 100%; }
  .tl-global .container { padding: 16px; }
  .tl-global .form-row { flex-direction: column; }
  .tl-global .form-row :is(input, select) { min-width: 0; width: 100%; }
  .tl-global .import-row { grid-template-columns: minmax(0, 1fr); }
  .tl-global :is(.org-grid, .stats-row) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
  .tl-screen input:not([type=checkbox]):not([type=radio]), .tl-screen select, .tl-screen textarea { font-size: 16px; }
  .tl-screen :is(.btn, .tl-button, .pub-tab, .sidebar-hamburger) { min-height: 44px; }
  .tl-app .hero { padding: 20px 16px; }
  .tl-app .hero .filter-form :is(label, select) { width: 100%; }
  .tl-screen select, .tl-screen :is(.btn-hero, .btn-small, .btn-sm, .btn-edit, .btn-new, .btn-add, .btn-save, .tab-btn, .mode-tab) { min-height: 44px; }
  .tl-app .card-header { flex-wrap: wrap; gap: 10px; }
  .tl-screen :is(.form-row, .compact-form, .filter-group) > * { min-width: 0; }
  .tl-auth { padding: 16px; }
}

@media (max-width: 1000px) {
  .tl-operational { height: auto; min-height: 100vh; overflow: auto; }
  .tl-operational #rcp-topbar { flex-wrap: wrap; }
  .tl-operational #rcp-topbar > div { flex-wrap: wrap; min-width: 0; max-width: 100%; }
  .tl-operational #rcp-main { grid-template-columns: minmax(0, 1fr) !important; flex: none; overflow: visible !important; }
  .tl-operational .rcp-panel { min-width: 0; }
  .tl-operational .rcp-panel-body { overflow: visible; }
  .tl-operational #rcp-standings-wrap { max-height: 60vh; overflow: auto; }
  .tl-operational #rcp-toast { max-width: calc(100vw - 24px); min-width: 0; white-space: normal; }
  .tl-operational :is(.pq-timing-status, .pq-local-source-box, .pq-polling-control) { min-width: 0; max-width: 100%; }
  .tl-operational .pq-local-source-form { grid-template-columns: minmax(0, 1fr); }
}

@media print {
  .tl-public, .tl-public table { font-size: 10px; }
  .tl-public .header { background: white; color: black; }
  .tl-public .header :is(h1, h2, p) { color: black; }
  .tl-table-scroll { overflow: visible; }
  .tl-screen.with-sidebar { margin-left: 0 !important; padding-top: 0 !important; }
  .tl-screen :is(.app-sidebar, .sidebar-hamburger, .sidebar-overlay, .studio-topbar) { display: none !important; }
}

/* Studio is the final compatibility layer for legacy and Jinja documents alike. */
:root { --sidebar-width: 220px; --sidebar-collapsed-width: 68px; --studio-topbar-height: 60px; }
.tl-screen { margin-top: 0; font-size: 14px; line-height: 1.5; }
.tl-screen.with-sidebar { padding-top: var(--studio-topbar-height) !important; }
.tl-screen.with-sidebar > .min-h-screen { min-height: calc(100vh - var(--studio-topbar-height)); }
.tl-screen :is(.app-page-shell, .sporting-page-shell) { max-width: 1280px; padding: 32px; }
.tl-screen :is(.container, .tl-page-shell) { max-width: 1280px; }
.tl-screen :is(.header, .hero, .page-header, .dash-hero, .dashboard-hero, .sporting-page-header) {
  background: transparent; color: var(--text-primary); border: 0; border-radius: 0; box-shadow: none;
}
.tl-screen :is(.dashboard-hero, .dash-hero.rider-dashboard-hero) { padding: 0; margin: 0 0 28px; border: 0; align-items: flex-start; background: transparent; }
.tl-screen :is(.header, .hero, .page-header, .sporting-page-header) { padding: 0 0 20px; }
.tl-screen :is(.header, .hero, .page-header, .dash-hero, .dashboard-hero, .sporting-page-header) :is(h1, h2, .dash-hero-name, .dashboard-hero-title) { color: var(--text-primary); text-shadow: none; }
.tl-screen :is(h1, .dash-hero.rider-dashboard-hero .dash-hero-name, .dashboard-hero-title) { font-size: clamp(24px, 2.2vw, 30px); font-weight: 650; letter-spacing: -.035em; }
.tl-screen :is(.hero-subtitle, .header p, .dash-hero-title, .dash-hero-sub, .dash-hero-meta, .dashboard-hero-sub) { color: var(--text-secondary); }
.tl-screen :is(.dashboard-hero-meta, .dash-hero-meta) { gap: 8px; margin-top: 12px; }
.tl-screen :is(.dashboard-hero-badge, .dash-hero .pill, .dash-hero.rider-dashboard-hero .pill) { background: transparent; color: var(--text-secondary); border: 0; border-radius: 0; padding: 0 12px 0 0; box-shadow: none; font-weight: 400; }
.tl-screen :is(.dashboard-hero-actions, .dash-hero-actions) { gap: 8px; flex-direction: row; flex-wrap: wrap; }
.tl-screen :is(.dashboard-hero-button, .dashboard-button, .btn-card, .btn-hero-primary, .btn-hero-secondary, .btn) { border-radius: 8px; }
.tl-screen :is(.dashboard-hero-button--primary, .dash-hero .btn-hero-primary) { background: var(--color-primary); color: white; border: 1px solid var(--color-primary); box-shadow: none; }
.tl-screen :is(.dashboard-hero-button--secondary, .dash-hero .btn-hero-secondary) { background: white; color: var(--text-primary); border: 1px solid var(--tl-border-strong); }
.tl-screen :is(.card, .tl-card, .panel, .dash-card, .pub-card, .dashboard-panel, .dashboard-card, .dashboard-news-card) { background: white; border-radius: 8px; box-shadow: none; }
.tl-screen :is(.dashboard-card, .qa-card):hover { border-color: var(--tl-border-strong); box-shadow: none; transform: none; }
.tl-screen :is(.card-header, .category-header, .panel-header, .dashboard-panel-header) { background: white; color: var(--text-primary); }
.tl-screen .studio-preview-heading { background: var(--tl-surface-muted); color: var(--text-primary); border-bottom: 1px solid var(--tl-border-subtle); }
.tl-screen :is(.dashboard-panel-icon, .dashboard-section-icon, .dashboard-card-icon, .dash-card-icon, .panel-title-icon, .qa-icon) { background: transparent; color: var(--text-secondary); border-radius: 0; }
.tl-screen :is(.dashboard-panel-icon, .dashboard-section-icon, .panel-title-icon) { display: none; }
.tl-screen :is(.dashboard-news-card, .dashboard-next-event, .tonight-box) { background: var(--tl-surface-muted); color: var(--text-primary); border-color: var(--tl-border-subtle); }
.tl-screen :is(.tonight-title, .dashboard-next-event-title) { color: var(--text-primary); }
.tl-screen :is(.btn-secondary, .btn-card-secondary, .tl-button--secondary) { color: var(--text-primary); background: white; border-color: var(--tl-border-strong); }
.tl-screen :is(.btn-primary, .tl-button--primary, .btn-card):hover { background: var(--color-primary-dark); color: white; }
.tl-screen :is(.btn-secondary, .btn-card-secondary, .tl-button--secondary):hover { background: var(--tl-surface-muted); color: var(--text-primary); }
.tl-screen :is(.btn-card-disabled, button:disabled) { cursor: not-allowed; }
.tl-screen :is(input, select, textarea) { font-family: inherit; }
.tl-screen :is(.form-group input, .form-group select, .form-group textarea, .tl-input, .tl-select) { border-radius: 8px; }
.tl-screen table th { background-color: var(--tl-surface-muted); color: #425366; }
.tl-screen .table-wrapper { box-shadow: none; border: 1px solid var(--tl-border-subtle); border-radius: 8px; }
.tl-screen :is(.qa-dropdown, .dropdown-menu, .actions-menu) { border-color: var(--tl-border-subtle); border-radius: 8px; box-shadow: var(--shadow-lg); }

/* Full-width brand bar and a quiet, independently scrolling workspace menu. */
.studio-topbar { position: fixed; inset: 0 0 auto; height: var(--studio-topbar-height); z-index: 990; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 24px; background: white; border-bottom: 1px solid var(--tl-border-subtle); }
.studio-brand { display: inline-flex; align-items: center; gap: 10px; min-width: 0; color: var(--text-primary); font-weight: 700; font-size: 15px; text-decoration: none; }
.studio-brand > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.studio-brand-mark { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 30px; height: 30px; background: var(--surface-brand-soft); color: var(--color-primary); border-radius: 8px; }
.studio-brand-mark svg { width: 18px; height: 18px; }
.studio-account { display: flex; align-items: center; justify-content: flex-end; gap: 12px; min-width: 0; color: var(--text-secondary); font-size: 12px; }
.studio-account-name { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.studio-role { padding: 3px 9px; border: 1px solid var(--tl-border-subtle); border-radius: 6px; color: var(--text-secondary); background: white; }
.tl-screen .app-sidebar { top: var(--studio-topbar-height); height: calc(100vh - var(--studio-topbar-height)); height: calc(100dvh - var(--studio-topbar-height)); color: var(--text-primary); background: white; border-right: 1px solid var(--tl-border-subtle); box-shadow: none; }
.tl-screen .sidebar-header { min-height: 52px; padding: 6px 12px; border-bottom: 0; }
.tl-screen .sidebar-org-name { color: var(--text-secondary); font-size: 11px; text-transform: uppercase; letter-spacing: .09em; font-weight: 600; }
.tl-screen .sidebar-collapse-btn { color: var(--text-secondary); width: 36px; min-height: 36px; }
.tl-screen .sidebar-collapse-btn:hover { color: var(--color-primary); background: var(--surface-brand-soft); }
.tl-screen :is(.sidebar-link, .sidebar-sublink) { min-height: 36px; color: #425366; border-radius: 6px; font-size: 13px; font-weight: 450; }
.tl-screen :is(.sidebar-link, .sidebar-sublink):hover { color: var(--color-primary-dark); background: var(--tl-surface-muted); }
.tl-screen :is(.sidebar-link, .sidebar-sublink).active { color: var(--color-primary-dark); background: var(--surface-brand-soft); box-shadow: none; font-weight: 650; }
.tl-screen .sidebar-group-label { color: var(--text-secondary); font-size: 10px; letter-spacing: .08em; padding-top: 12px; }
.tl-screen .sidebar-icon { color: inherit; }
.tl-screen .sidebar-footer { background: white; border-top: 1px solid var(--tl-border-subtle); }
.tl-screen .sidebar-user-name { color: var(--text-secondary); }
.tl-screen .sidebar-logout-btn { background: var(--tl-surface-muted); color: #425366; border: 1px solid var(--tl-border-subtle); }
.tl-screen .sidebar-logout-btn:hover { background: var(--surface-brand-soft); color: var(--color-primary-dark); }
.tl-screen .sidebar-rider-link { border-top-color: var(--tl-border-subtle); }
.tl-screen .sidebar-global-admin-link { background: transparent; }
.tl-screen.with-sidebar .sidebar-hamburger { background: white; color: var(--text-primary); box-shadow: none; border: 1px solid var(--tl-border-subtle); top: 8px; left: 12px; padding: 7px 10px; }
.tl-screen.with-sidebar.chip-reads-kiosk .studio-topbar { display: none; }

/* Dashboard hierarchy: one heading, inline metrics, then the next useful action. */
.studio-metrics, .tl-screen .dashboard-root--rider .stats-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0 0 28px; padding: 0 0 24px; border-bottom: 1px solid var(--tl-border-subtle); }
.studio-metrics > div, .tl-screen .dashboard-root--rider .stat-chip { display: flex; flex-direction: column; gap: 4px; background: transparent; padding: 0; border: 0; border-radius: 0; box-shadow: none; }
.studio-metrics span, .tl-screen .stat-label { font-size: 12px; color: var(--text-secondary); }
.studio-metrics strong, .tl-screen .stat-value { font-size: 26px; font-weight: 650; color: var(--text-primary); }
.tl-screen .dashboard-root--rider .stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 24px; }
.studio-overview-grid { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(250px, 1fr); gap: 20px; margin-bottom: 24px; }
.studio-section-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--tl-border-subtle); }
.studio-section-heading h2 { margin: 0; font-size: 15px; font-weight: 650; }
.studio-section-heading a { color: var(--color-primary-dark); font-size: 12px; text-decoration: none; }
.studio-event-row { display: flex; align-items: center; gap: 18px; padding: 24px 20px; }
.studio-event-copy { min-width: 0; flex: 1; }
.studio-event-copy h3, .studio-empty h3 { font-size: 17px; font-weight: 650; margin: 0 0 6px; }
.studio-event-copy p, .studio-empty p { color: var(--text-secondary); font-size: 13px; margin: 0 0 8px; }
.studio-date-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 0 0 58px; height: 64px; background: var(--surface-brand-soft); color: var(--color-primary-dark); border-radius: 8px; }
.studio-date-tile strong { font-size: 24px; line-height: 1.2; }
.studio-date-tile span { font-size: 12px; }
.studio-date-tile svg { width: 26px; height: 26px; }
.studio-empty { padding: 24px 20px; }
.studio-checklist > a { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 0 20px; padding: 12px 0; color: var(--text-primary); font-size: 13px; border-bottom: 1px solid var(--tl-border-subtle); text-decoration: none; }
.studio-checklist > a:last-child { border: 0; }
.studio-checklist > a:hover { color: var(--color-primary-dark); }
.studio-checklist > a > :last-child { color: var(--text-secondary); font-size: 12px; text-align: right; }
.tl-screen .dashboard-action-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.tl-screen .qa-card { min-width: 0; padding: 0; background: white; color: var(--text-primary); border: 1px solid var(--tl-border-subtle); border-radius: 6px; box-shadow: none; }
.tl-screen a.qa-card, .tl-screen .qa-trigger-button { padding: 9px 12px; min-height: 40px; }
.tl-screen .qa-icon { width: 18px; height: 18px; padding: 0; }
.tl-screen .qa-label { font-size: 12px; }
.tl-screen .dashboard-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; padding: 0; }
.tl-screen .dashboard-card { border: 0; border-radius: 0; border-bottom: 1px solid var(--tl-border-subtle); padding: 20px; }
.tl-screen .dashboard-card-footer .dashboard-button { width: auto; background: white; color: var(--color-primary-dark); border-color: var(--tl-border-subtle); font-size: 12px; }
.tl-screen .dashboard-card-title { font-size: 14px; }
.tl-screen .dashboard-card-icon { width: 20px; height: 20px; }
.tl-screen .dashboard-card-body { font-size: 13px; }
.tl-screen .dashboard-news-list { display: block; }
.tl-screen .dashboard-news-card { border: 0; padding: 4px 0 16px; }
.tl-screen .dashboard-news-card + .dashboard-news-card { border-top: 1px solid var(--tl-border-subtle); padding-top: 16px; }
.tl-screen .dashboard-root--rider .panel-title { font-size: 15px; }
.tl-screen .dashboard-root--rider .dash-card { border: 0; border-radius: 0; border-bottom: 1px solid var(--tl-border-subtle); }
.tl-screen .dashboard-root--rider .card-grid { gap: 0; padding: 0; grid-template-columns: minmax(0, 1fr); }
.tl-screen .dashboard-root--rider .sections-grid { grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); }
.tl-screen .dashboard-root--rider .btn-card { background: white; color: var(--color-primary-dark); border: 1px solid var(--tl-border-subtle); }

/* Authentication, public results and global admin use the same Studio surfaces. */
.tl-auth :is(.card, .login-card, .login-box, .login-container, .signup-container) { border-top: 1px solid var(--tl-border-subtle); box-shadow: var(--shadow-md); }
.tl-global .header, .tl-public :is(.header, .pub-header, .live-header) { background: white; color: var(--text-primary); border-bottom: 1px solid var(--tl-border-subtle); padding: 20px 24px; }
.tl-global .header h1, .tl-public :is(.header, .pub-header, .live-header) :is(h1, h2, p, .pub-org-name, .pub-subtitle) { color: var(--text-primary); }
.tl-public .pub-event-header { background: var(--tl-surface-muted); color: var(--text-primary); }
.tl-public .pub-event-header h3 { color: var(--text-primary); }
.tl-operational #rcp-topbar { background: white; color: var(--text-primary); border-bottom: 1px solid var(--tl-border-subtle); }

@media (min-width: 1001px) and (max-width: 1399px) {
  .tl-operational #rcp-main { grid-template-columns: minmax(240px, 1fr) minmax(0, 2fr); overflow-y: auto; }
  .tl-operational .rcp-panel { min-height: 360px; }
}

@media (max-width: 1100px) {
  .studio-overview-grid { grid-template-columns: minmax(0, 1fr); }
  .tl-screen .dashboard-root--rider .sections-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .studio-topbar { padding: 0 16px 0 68px; gap: 12px; }
  .studio-brand { font-size: 14px; }
  .studio-brand-mark, .studio-account-name { display: none; }
  .studio-account { flex: 0 0 auto; }
  .tl-screen :is(.app-page-shell, .sporting-page-shell, .tl-page-shell) { padding: 24px 16px; }
  .tl-screen :is(.dashboard-root--admin, .dashboard-root--rider) { padding: 0; }
  .tl-screen :is(.dashboard-hero, .dash-hero.rider-dashboard-hero) { gap: 20px; margin-bottom: 24px; }
  .tl-screen :is(.dashboard-hero-actions, .dash-hero-actions) { width: 100%; flex-direction: row; }
  .tl-screen :is(.dashboard-hero-button, .dash-hero-actions > a) { width: auto; min-width: 0; flex: 1 1 auto; }
  .studio-metrics { gap: 16px; }
  .studio-metrics strong, .tl-screen .stat-value { font-size: 24px; }
  .tl-screen .dashboard-root--rider .stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .studio-event-row { flex-wrap: wrap; padding: 20px 16px; gap: 14px; }
  .studio-event-copy { flex-basis: calc(100% - 80px); }
  .studio-event-row > .tl-button { width: 100%; min-height: 44px; }
  .studio-section-heading { padding: 16px; }
  .studio-section-heading h2 { font-size: 14px; }
  .tl-screen .dashboard-card-grid { grid-template-columns: minmax(0, 1fr); }
  .tl-screen .dashboard-panel-header { flex-direction: row; align-items: center; }
  .tl-screen .qa-dropdown { position: fixed; top: 64px; left: 16px; right: 16px; width: auto; max-height: calc(100dvh - 88px); overflow-y: auto; z-index: 1101; }
  .tl-screen :is(.sidebar-link, .sidebar-sublink, .sidebar-logout-btn, .sidebar-collapse-btn, .qa-trigger-button, .entry-action-btn, .btn-card) { min-height: 44px; }
}
@media (max-width: 480px) {
  .studio-metrics > div > span, .tl-screen .dashboard-root--rider .stat-label { min-height: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .tl-screen *, .tl-screen *::before, .tl-screen *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
@media print {
  .tl-screen.with-sidebar { padding-top: 0 !important; }
}