/* ==========================================================================
   TC de Uithof — design system
   Loaded after each page's own styles, so this file carries the shared skin:
   tokens, typography, surfaces, controls, states and dark mode.
   ========================================================================== */

:root {
    color-scheme: light;

    /* --- Type ---------------------------------------------------------- */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
        "Liberation Mono", monospace;

    /* --- Brand scale (a single blue, used thin) ------------------------ */
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --primary-soft: #eff6ff;
    --primary-border: #bfdbfe;
    --when: #1e3a8a;
    --level: #b45309;

    /* --- Solid fills keep saturated brand colour for white labels ------ */
    --primary-solid: #2563eb;
    --primary-solid-hover: #1d4ed8;
    --success: #16a34a;
    --success-dark: #15803d;
    --success-solid: #16a34a;
    --danger: #dc2626;
    --danger-solid: #dc2626;
    --bg-gray-btn: #64748b;

    --info-accent: #3b82f6;
    --info-accent-2: #60a5fa;
    --info-solid: #2563eb;
    --info-solid-2: #3b82f6;

    --warning-amber: #d97706;
    --warning-gold: #eab308;
    --orange: #ea580c;
    --cancel: #facc15;
    --cancel-text: #422006;
    --whatsapp: #25d366;

    /* --- Surfaces: four neutral layers --------------------------------- */
    --bg-body: #f5f7fa;
    --bg-card: #ffffff;
    --bg-elevated: #ffffff;
    --bg-subtle: #f1f5f9;
    --bg-subtle-2: #e9eef5;
    --bg-inset: #f1f5f9;
    --bg-neutral: #eef2f7;
    --bg-neutral-2: #eef2f7;
    --bg-warm: #f8fafc;
    --bg-hover: #eff6ff;
    --bg-hover-2: #f8fbff;
    --bg-selected: #eff6ff;

    /* --- Text: three levels, never pure black -------------------------- */
    --text-main: #0f172a;
    --text-strong: #1e293b;
    --text-navy: #1e293b;
    --text-body: #334155;
    --text-muted: #64748b;
    --text-soft: #6b7686;
    --text-faint: #94a3b8;
    --text-disabled: #b6c0cd;
    --text-on-accent: #ffffff;

    /* --- Strokes: hairlines, not black borders ------------------------- */
    --border: #e6ebf1;
    --border-strong: #d5dde6;
    --border-soft: #eef2f6;
    --border-faint: #f4f7fa;
    --border-input: #d5dde6;
    --border-muted: #c3ccd8;
    --border-neutral: #dfe6ee;

    /* --- Semantic tints ------------------------------------------------ */
    --info-bg: #eff6ff;
    --info-border: #dbeafe;
    --info-text: #1d4ed8;
    --info-deep: #1e40af;
    --info-violet: #4f46e5;
    --info-navy: #1e3a8a;
    --info-navy-bg: #e0e7ff;
    --info-steel: #1e40af;
    --info-soft-bg: #f5f9ff;
    --info-softer-bg: #f8fbff;
    --info-softer-border: #dbeafe;
    --info-track: #dbeafe;
    --info-waiting-bg: #e0e7ff;
    --info-hub-bg: #f5f9ff;

    --success-bg: #dcfce7;
    --success-soft-bg: #f0fdf4;
    --success-soft-border: #bbf7d0;
    --success-chip-bg: #dcfce7;
    --success-chip-text: #15803d;
    --success-badge-bg: #dcfce7;
    --success-badge-text: #15803d;
    --success-text: #15803d;

    --warning-bg: #fef3c7;
    --warning-chip-bg: #fef3c7;
    --warning-text: #92400e;
    --warning-night-bg: #fff7ed;
    --warning-night-border: #fb923c;
    --warning-box-bg: #fffbeb;
    --warning-box-border: #fde68a;
    --warning-box-text: #78350f;
    --warning-medal-text: #713f12;
    --warning-medal-text-2: #7c2d12;

    --danger-bg: #fee2e2;
    --danger-strong-bg: #fef2f2;
    --danger-chip-bg: #fee2e2;
    --danger-chip-text: #b91c1c;
    --danger-text: #b91c1c;
    --danger-border: #dc2626;
    --danger-soft-bg: #fef2f2;
    --danger-warn-text: #dc2626;

    --neutral-bg: #eef2f7;
    --neutral-text: #475569;
    --neutral-role-bg: #eef2f7;
    --neutral-lvl-bg: #eef2f7;
    --neutral-lvl-text: #334155;

    /* --- Radius: outer minus the gap gives the concentric inner -------
       card 20px with an 8px gap between edges -> inner 12px. */
    --radius-card: 20px;
    --radius-control: 12px;
    --radius-inner: 12px;
    --radius-sm: 9px;
    --radius-pill: 999px;
    --card-pad: 16px;

    /* --- Shadows: low opacity, high blur, tinted slate ---------------- */
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 2px 8px rgba(15, 23, 42, 0.05);
    --shadow-md: 0 4px 16px rgba(15, 23, 42, 0.07), 0 1px 3px rgba(15, 23, 42, 0.04);
    --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.10), 0 3px 10px rgba(15, 23, 42, 0.05);
    --shadow-pop: 0 24px 60px rgba(15, 23, 42, 0.18), 0 6px 16px rgba(15, 23, 42, 0.08);
    --focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.18);

    --nav-height: 64px;
    --safe-area-bottom: env(safe-area-inset-bottom);
}

/* Dark is its own system: near-black base, a stepped surface ladder,
   desaturated accents and off-white (never pure white) body text. */
[data-theme="dark"] {
    color-scheme: dark;

    --primary: #60a5fa;
    --primary-dark: #93c5fd;
    --primary-soft: rgba(96, 165, 250, 0.14);
    --primary-border: rgba(96, 165, 250, 0.32);
    --when: #93c5fd;
    --level: #fbbf24;

    --primary-solid: #2563eb;
    --primary-solid-hover: #3b82f6;
    --success: #4ade80;
    --success-dark: #22c55e;
    --success-solid: #15803d;
    --danger: #f87171;
    --danger-solid: #b91c1c;
    --bg-gray-btn: #475569;

    --info-accent: #60a5fa;
    --info-accent-2: #3b82f6;
    --info-solid: #2563eb;
    --info-solid-2: #3b82f6;

    --warning-amber: #fbbf24;
    --warning-gold: #facc15;
    --orange: #fb923c;
    --cancel: #facc15;
    --cancel-text: #422006;
    --whatsapp: #25d366;

    --bg-body: #0b0f14;
    --bg-card: #141a23;
    --bg-elevated: #1b222d;
    --bg-subtle: #1b222d;
    --bg-subtle-2: #232c38;
    --bg-inset: #1b222d;
    --bg-neutral: #1e2733;
    --bg-neutral-2: #1e2733;
    --bg-warm: #161d26;
    --bg-hover: rgba(96, 165, 250, 0.14);
    --bg-hover-2: rgba(96, 165, 250, 0.07);
    --bg-selected: rgba(96, 165, 250, 0.16);

    --text-main: #e7ecf3;
    --text-strong: #dbe3ec;
    --text-navy: #cbd5e1;
    --text-body: #c3cdda;
    --text-muted: #94a3b8;
    --text-soft: #8b9aad;
    --text-faint: #78879a;
    --text-disabled: #57616f;
    --text-on-accent: #ffffff;

    --border: #232c39;
    --border-strong: #303b4b;
    --border-soft: #1e2733;
    --border-faint: #1a212b;
    --border-input: #303b4b;
    --border-muted: #3b475a;
    --border-neutral: #303b4b;

    --info-bg: rgba(96, 165, 250, 0.14);
    --info-border: rgba(96, 165, 250, 0.28);
    --info-text: #93c5fd;
    --info-deep: #bfdbfe;
    --info-violet: #a5b4fc;
    --info-navy: #bfdbfe;
    --info-navy-bg: rgba(99, 102, 241, 0.18);
    --info-steel: #a8c7ea;
    --info-soft-bg: rgba(96, 165, 250, 0.09);
    --info-softer-bg: rgba(96, 165, 250, 0.07);
    --info-softer-border: rgba(96, 165, 250, 0.24);
    --info-track: rgba(96, 165, 250, 0.22);
    --info-waiting-bg: rgba(99, 102, 241, 0.18);
    --info-hub-bg: rgba(96, 165, 250, 0.10);

    --success-bg: rgba(74, 222, 128, 0.16);
    --success-soft-bg: rgba(74, 222, 128, 0.12);
    --success-soft-border: rgba(74, 222, 128, 0.30);
    --success-chip-bg: rgba(74, 222, 128, 0.16);
    --success-chip-text: #86efac;
    --success-badge-bg: rgba(74, 222, 128, 0.16);
    --success-badge-text: #86efac;
    --success-text: #86efac;

    --warning-bg: rgba(251, 191, 36, 0.16);
    --warning-chip-bg: rgba(251, 191, 36, 0.15);
    --warning-text: #fcd34d;
    --warning-night-bg: rgba(251, 146, 60, 0.15);
    --warning-night-border: #fb923c;
    --warning-box-bg: rgba(251, 191, 36, 0.10);
    --warning-box-border: rgba(251, 191, 36, 0.28);
    --warning-box-text: #fde68a;
    --warning-medal-text: #422006;
    --warning-medal-text-2: #431407;

    --danger-bg: rgba(248, 113, 113, 0.16);
    --danger-strong-bg: rgba(248, 113, 113, 0.13);
    --danger-chip-bg: rgba(248, 113, 113, 0.16);
    --danger-chip-text: #fca5a5;
    --danger-text: #fca5a5;
    --danger-border: #f87171;
    --danger-soft-bg: rgba(248, 113, 113, 0.12);
    --danger-warn-text: #fca5a5;

    --neutral-bg: rgba(255, 255, 255, 0.08);
    --neutral-text: #adb5bd;
    --neutral-role-bg: rgba(255, 255, 255, 0.08);
    --neutral-lvl-bg: rgba(255, 255, 255, 0.08);
    --neutral-lvl-text: #ced4da;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55);
    --shadow-pop: 0 28px 70px rgba(0, 0, 0, 0.65);
    --focus-ring: 0 0 0 3px rgba(96, 165, 250, 0.28);
}

/* ==========================================================================
   Base
   ========================================================================== */

* {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: var(--font-sans);
    background: var(--bg-body);
    color: var(--text-main);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Large type gets tighter tracking; the bigger the text, the tighter. */
h1,
h2,
h3,
h4,
h5,
h6 {
    letter-spacing: -0.02em;
    font-weight: 700;
    line-height: 1.2;
}

h1 {
    letter-spacing: -0.035em;
}

h2 {
    border-bottom-color: var(--border);
}

a {
    color: var(--primary);
}

::selection {
    background: var(--primary-soft);
    color: var(--primary-dark);
}

/* ==========================================================================
   Surfaces — cards, panels, sheets, grouped lists
   ========================================================================== */

.card,
.panel,
details.howto,
.stat-card,
.alert-cta,
.swap-selected,
.swap-success,
.notice {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-sm);
}

.card {
    margin-bottom: 12px;
}

.panel {
    padding: 18px 16px;
    margin-bottom: 14px;
}

.card-header {
    background: var(--bg-card);
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}

.card-header.is-info {
    background: var(--info-soft-bg);
}

.card-body {
    padding: 16px;
}

/* The header row sits flush inside the card, so its corners follow the
   concentric rule: outer 20 - 1px border = 19. */
.card > .card-header:first-child {
    border-top-left-radius: calc(var(--radius-card) - 1px);
    border-top-right-radius: calc(var(--radius-card) - 1px);
}

/* Grouped list: outer rounded container, flush rows inside. */
.group-list {
    border-radius: var(--radius-card);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    background: var(--bg-card);
}

.group-list > .time-group:first-child {
    border-top-left-radius: calc(var(--radius-card) - 1px);
    border-top-right-radius: calc(var(--radius-card) - 1px);
}

.group-list > .time-group:last-child {
    border-bottom-left-radius: calc(var(--radius-card) - 1px);
    border-bottom-right-radius: calc(var(--radius-card) - 1px);
}

.time-head {
    background: var(--bg-subtle);
    color: var(--text-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.group-row:hover {
    background: var(--bg-hover-2);
}

.group-row.selected {
    background: var(--bg-hover);
}

.spot-card {
    border: 1px solid var(--border);
    border-left: 4px solid var(--primary);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-xs);
    padding: 14px 16px;
}

.spot-card:hover {
    box-shadow: var(--shadow-sm);
}

/* ==========================================================================
   Controls — buttons, inputs, chips
   ========================================================================== */

.btn,
.btn-action,
.tc-confirm-btn,
.header-action,
.icon-btn,
.fchip,
.btn-date,
.comp-loc,
.comp-level-chip,
.comp-time-chip,
.tchip {
    transition: background-color 0.16s ease, border-color 0.16s ease,
        color 0.16s ease, box-shadow 0.16s ease, transform 0.06s ease;
}

.btn {
    padding: 10px 16px;
    border-radius: var(--radius-control);
    font-weight: 600;
    letter-spacing: -0.01em;
}

.btn:active {
    transform: translateY(1px);
}

.btn:disabled,
.btn-action:disabled,
button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.btn-primary,
.btn-book,
.btn-ladder {
    background: var(--primary-solid);
    color: var(--text-on-accent);
}

.btn-primary:hover,
.btn-book:hover,
.btn-ladder:hover {
    background: var(--primary-solid-hover);
}

.btn-success {
    background: var(--success-solid);
    color: var(--text-on-accent);
}

.btn-success:hover {
    filter: brightness(1.06);
}

.btn-danger {
    background: var(--danger-solid);
    color: var(--text-on-accent);
}

.btn-danger:hover {
    filter: brightness(1.06);
}

.btn-action {
    border-radius: var(--radius-control);
    font-weight: 600;
}

.page-index .btn-action {
    min-height: 48px;
    padding: 12px 16px;
    font-weight: 700;
}

.btn-action:active {
    transform: translateY(1px);
}

.btn-sm,
.btn-small {
    padding: 7px 12px;
    font-size: 0.85rem;
}

.icon-btn {
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-muted);
}

.icon-btn:hover,
.theme-toggle:hover {
    color: var(--primary);
    border-color: var(--primary-border);
    background: var(--primary-soft);
}

.icon-btn:active,
.theme-toggle:active {
    transform: scale(0.96);
}

input,
select,
textarea {
    border: 1px solid var(--border-input);
    border-radius: var(--radius-control);
    background: var(--bg-card);
    color: var(--text-main);
    transition: border-color 0.15s ease, box-shadow 0.15s ease,
        background-color 0.15s ease;
}

input::placeholder,
textarea::placeholder {
    color: var(--text-faint);
}

input:hover,
select:hover,
textarea:hover {
    border-color: var(--border-muted);
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: var(--focus-ring);
}

input:disabled,
select:disabled,
textarea:disabled {
    background: var(--bg-subtle);
    color: var(--text-disabled);
}

/* Soft tinted chips, no gradients. */
.badge,
.skill-pill,
.fchip,
.lvl-chip,
.spot-day-badge,
.role-badge,
.tchip,
.badge-red,
.badge-green,
.badge-yellow {
    border-radius: var(--radius-pill);
    font-weight: 700;
    letter-spacing: 0.01em;
}

.fchip {
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-body);
    padding: 6px 13px;
}

.fchip:hover {
    border-color: var(--border-strong);
    background: var(--bg-subtle);
}

.fchip.active {
    background: var(--primary-solid);
    border-color: var(--primary-solid);
    color: var(--text-on-accent);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.28);
}

.comp-level-chip,
.comp-time-chip,
.comp-loc {
    border: 1px solid var(--border-input);
    background: var(--bg-card);
}

.comp-level-chip:hover,
.comp-time-chip:hover,
.comp-loc:hover {
    border-color: var(--border-muted);
    background: var(--bg-subtle);
}

.comp-level-chip.active,
.comp-time-chip.active,
.comp-loc.active {
    background: var(--primary-solid);
    border-color: var(--primary-solid);
    color: var(--text-on-accent);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}

.btn-date {
    border: 1px solid var(--border);
    background: var(--bg-card);
}

.btn-date:hover {
    border-color: var(--border-strong);
    background: var(--bg-subtle);
}

.btn-date.active {
    border-color: var(--primary-solid);
    background: var(--primary-solid);
    color: var(--text-on-accent);
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.30);
}

/* iOS Safari/WebKit (incl. Brave) refuses to open a native date picker via
   showPicker()/click() on a display:none input. Instead overlay a real,
   transparent date input on the "More" button so the tap hits it directly. */
.btn-date.has-picker {
    position: relative;
    overflow: hidden;
}

.btn-date.has-picker input[type="date"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.btn-date.has-picker input[type="date"]::-webkit-date-and-time-value {
    visibility: hidden;
}

.btn-date.has-picker input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: pointer;
}

.tchip.active {
    border-color: var(--primary);
    background: var(--primary-soft);
    color: var(--primary-dark);
}

/* ==========================================================================
   Header, app bar, bottom navigation
   ========================================================================== */

.app-bar {
    background: rgba(255, 255, 255, 0.82);
    border-bottom: 1px solid var(--border);
    box-shadow: none;
}

.app-bar.is-scrolled {
    background: rgba(255, 255, 255, 0.92);
    box-shadow: var(--shadow-sm);
}

[data-theme="dark"] .app-bar {
    background: rgba(20, 26, 35, 0.82);
}

[data-theme="dark"] .app-bar.is-scrolled {
    background: rgba(20, 26, 35, 0.92);
}

header {
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    box-shadow: none;
}

.header-title {
    letter-spacing: -0.025em;
}

.header-action {
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    background: var(--bg-card);
}

.header-action:hover {
    border-color: var(--primary-border);
    background: var(--primary-soft);
}

.bottom-nav {
    background: var(--bg-card);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
}

.page-admin .bottom-nav,
.page-ladder-admin .bottom-nav {
    border: none;
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.05);
}

/* Floating pill nav keeps its soft-glass treatment. */
.page-index .bottom-nav,
.page-trainers .bottom-nav {
    background: rgba(255, 255, 255, 0.78);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: var(--shadow-lg);
}

[data-theme="dark"] .page-index .bottom-nav,
[data-theme="dark"] .page-trainers .bottom-nav {
    background: rgba(20, 26, 35, 0.82);
    border-color: rgba(255, 255, 255, 0.10);
}

.page-trainers .nav-item.active {
    background: var(--primary-soft);
    color: var(--primary-dark);
}

[data-theme="dark"] .page-trainers .nav-item.active {
    background: var(--bg-hover);
}

.nav-item {
    color: var(--text-muted);
    font-weight: 600;
}

.nav-item:hover {
    color: var(--text-body);
}

.nav-item.active {
    color: var(--primary-dark);
}

.page-index .nav-item.active {
    background: var(--primary-soft);
}

[data-theme="dark"] .page-index .nav-item.active {
    background: var(--bg-hover);
}

/* ==========================================================================
   Tables — a tool, not a picture
   ========================================================================== */

.mini-table {
    font-variant-numeric: tabular-nums;
    font-size: 0.9rem;
}

.mini-table th {
    background: var(--bg-subtle);
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    letter-spacing: 0.05em;
}

.mini-table td {
    border-bottom: 1px solid var(--border-soft);
}

.mini-table tbody tr:hover td {
    background: var(--bg-hover-2);
}

.example-table th,
.trainer-divider td {
    background: var(--bg-subtle);
}

/* ==========================================================================
   Ladder & competition flourishes
   ========================================================================== */

.ladder-hero,
.ladder-pos-hero {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-top: 3px solid var(--primary);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-sm);
}

.ladder-hero h2,
.ladder-pos-hero .pos-num {
    color: var(--info-deep);
}

/* Big numerals are "large text": tighter tracking, tabular figures. */
.ladder-pos-hero .pos-num,
.stat-num {
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
}

.ladder-progress-track {
    background: var(--bg-subtle-2);
    border-radius: var(--radius-pill);
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.08);
}

.ladder-progress-fill {
    background: linear-gradient(90deg, var(--primary), var(--info-accent-2));
    border-radius: var(--radius-pill);
}

.btn-ladder {
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.28);
}

.rank-1 {
    background: linear-gradient(135deg, #fde68a, #f59e0b);
    color: #422006;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.45);
}

.rank-2 {
    background: linear-gradient(135deg, #f8fafc, #cbd5e1);
    color: #334155;
    box-shadow: 0 2px 8px rgba(148, 163, 184, 0.45);
}

.rank-3 {
    background: linear-gradient(135deg, #fed7aa, #ea580c);
    color: #431407;
    box-shadow: 0 2px 8px rgba(234, 88, 12, 0.35);
}

/* ==========================================================================
   Sheets, modals, toasts
   ========================================================================== */

.page-index .modal-content,
.page-trainers .modal-content {
    border-radius: 24px 24px 0 0;
}

.page-admin .modal-content,
.page-ladder-admin .modal-content {
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-pop);
}

.modal-content {
    box-shadow: var(--shadow-pop);
}

.sheet-handle {
    background: var(--border-muted);
}

.sheet-title {
    letter-spacing: -0.025em;
}

.info-note,
.success-note {
    border-radius: var(--radius-control);
}

.empty-emoji,
.cancel-empty .empty-emoji {
    font-size: 2rem;
    line-height: 1;
}

/* ==========================================================================
   Theme toggle
   ========================================================================== */

.theme-toggle {
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-muted);
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease,
        transform 0.06s ease;
}

.theme-toggle svg {
    width: 19px;
    height: 19px;
}

.theme-toggle .icon-sun {
    display: none;
}

.theme-toggle.is-dark .icon-moon {
    display: none;
}

.theme-toggle.is-dark .icon-sun {
    display: block;
}

/* ==========================================================================
   Shared UI layer: motion, accessibility, dialogs, loading
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 3000;
    transform: translateY(-160%);
    background: var(--primary-solid);
    color: var(--text-on-accent);
    padding: 10px 14px;
    border-radius: var(--radius-control);
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.15s ease;
}

.skip-link:focus {
    transform: translateY(0);
}

.modal {
    overscroll-behavior: contain;
}

.modal[aria-hidden="true"] {
    pointer-events: none;
}

body.modal-open {
    overflow: hidden;
}

.spinner {
    display: inline-block;
    width: 26px;
    height: 26px;
    border: 3px solid var(--border-strong);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: tc-spin 0.7s linear infinite;
}

@keyframes tc-spin {
    to {
        transform: rotate(360deg);
    }
}

.loading-block {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 28px;
    color: var(--text-faint);
}

@media (prefers-reduced-motion: reduce) {
    .spinner {
        animation-duration: 1.8s;
    }
}

.tc-toast {
    position: fixed;
    left: 50%;
    bottom: 90px;
    transform: translateX(-50%) translateY(20px);
    background: var(--bg-elevated);
    color: var(--text-strong);
    border: 1px solid var(--border);
    border-left: 4px solid var(--primary);
    padding: 14px 18px;
    border-radius: var(--radius-control);
    box-shadow: var(--shadow-lg);
    font-size: 0.95rem;
    line-height: 1.45;
    text-align: center;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 9999;
    max-width: 90%;
    width: max-content;
    pointer-events: none;
}

.tc-toast.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.tc-toast.tc-toast-success {
    border-left-color: var(--success);
}

.tc-toast.tc-toast-danger {
    border-left-color: var(--danger);
}

.tc-confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.18s ease;
}

.tc-confirm-overlay.visible {
    opacity: 1;
}

.tc-confirm {
    background: var(--bg-elevated);
    color: var(--text-main);
    width: 100%;
    max-width: 420px;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 22px;
    box-shadow: var(--shadow-pop);
    transform: translateY(10px);
    transition: transform 0.18s ease;
}

.tc-confirm-overlay.visible .tc-confirm {
    transform: translateY(0);
}

.tc-confirm-msg {
    margin: 0 0 16px;
    font-size: 0.95rem;
    line-height: 1.5;
    white-space: pre-line;
}

.tc-confirm-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.tc-confirm-btn {
    padding: 10px 16px;
    border-radius: var(--radius-control);
    border: 1px solid var(--border-strong);
    background: var(--bg-subtle);
    color: var(--text-strong);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}

.tc-confirm-btn:hover {
    background: var(--bg-subtle-2);
}

.tc-confirm-btn-primary {
    background: var(--primary-solid);
    border-color: var(--primary-solid);
    color: var(--text-on-accent);
}

.tc-confirm-btn-primary:hover {
    background: var(--primary-solid-hover);
    border-color: var(--primary-solid-hover);
}

.tc-confirm-btn-danger {
    background: var(--danger-solid);
    border-color: var(--danger-solid);
    color: var(--text-on-accent);
}

[data-theme="dark"] .rank-badge:not(.rank-1):not(.rank-2):not(.rank-3) {
    background: var(--bg-subtle);
    color: var(--text-body);
}

[data-theme="dark"] .podium-card {
    background: linear-gradient(180deg, #232c38, #1a212b);
}

[data-theme="dark"] .podium-col.p1 .podium-card {
    background: linear-gradient(180deg, #3a3212, #2b2409);
}

[data-theme="dark"] .podium-col.p2 .podium-card {
    background: linear-gradient(180deg, #232c38, #1a212b);
}

[data-theme="dark"] .podium-col.p3 .podium-card {
    background: linear-gradient(180deg, #3a2411, #2a190b);
}

[data-theme="dark"] .bottom-nav {
    background: rgba(20, 26, 35, 0.9);
    border-color: rgba(255, 255, 255, 0.10);
}

[data-theme="dark"] .example-table th,
[data-theme="dark"] .trainer-divider td {
    background: var(--bg-subtle);
}

[data-theme="dark"] h2,
[data-theme="dark"] .panel h2 {
    border-bottom-color: var(--border);
}

[data-theme="dark"] .btn-ladder {
    box-shadow: none;
}