/* =========================================================================
   SportDiary — "Court & Ledger" design system (single source of truth)
   A modern tournament SCOREBOARD meets a clean data LEDGER.
   Warm paper · deep court green · sparing clay · hairline court-lines.
   System fonts only (no web fonts). Everything derives from the tokens below;
   the same brand tokens are inlined in base.html.twig — keep them in sync.
   ========================================================================= */

:root {
    /* --- Surfaces (warm paper) --- */
    --bg: #f6f5f1;          /* warm off-white paper */
    --surface: #ffffff;     /* cards, tables, header */
    --surface-2: #f1f3ee;   /* zebra / hover / inset tint */

    /* --- Court green (structure, chrome, links, data) --- */
    --brand: #0c6b52;
    --brand-deep: #083f31;
    --brand-tint: #e5efe9;  /* soft green wash (scoreboard band) */
    --brand-line: #bcd7cb;  /* green hairline */

    /* --- Clay (the ENERGY color — primary CTA / key highlight, sparing) --- */
    --accent: #cf5230;
    --accent-deep: #ad3f20;
    --accent-tint: #f8e8e1;
    --accent-line: #eec2b2;

    /* --- Ink & lines --- */
    --ink: #16241d;
    --muted: #5f6b64;
    --line: #e3e6df;        /* the court line: hairline divider */

    /* --- Semantic --- */
    --ok: #1c7a54;
    --ok-tint: #e5efe9;
    --warn: #b1791b;
    --warn-tint: #f7efd7;
    --warn-line: #e6cf9c;
    --danger: #b12a20;
    --danger-tint: #f8e5e2;
    --danger-line: #e7b8b1;

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

    --step--2: 0.75rem;
    --step--1: 0.8125rem;
    --step-0: 1rem;
    --step-1: 1.1875rem;
    --step-2: 1.5rem;
    --step-3: 2rem;
    --step-4: clamp(2.4rem, 1.7rem + 3vw, 3.4rem);

    /* --- Structure --- */
    --radius: 12px;
    --radius-sm: 8px;
    --radius-lg: 18px;
    --shadow-1: 0 1px 2px rgba(16, 36, 29, 0.05), 0 2px 6px -3px rgba(16, 36, 29, 0.08);
    --shadow-2: 0 16px 40px -20px rgba(16, 36, 29, 0.35), 0 2px 8px -4px rgba(16, 36, 29, 0.12);
    --container: 62rem;
    --focus: 0 0 0 3px rgba(12, 107, 82, 0.32);
    --focus-accent: 0 0 0 3px rgba(207, 82, 48, 0.30);

    /* --- Light energetic (UX2 design system): softer cards, punchier shadow for "šťava" --- */
    --shadow-card: 0 6px 18px -12px rgba(16, 36, 29, 0.25);
    --radius-card: 12px;
    --num: 800; /* weight for big tabular numbers (stat-card__value) */
    /* --bg already defined above (warm off-white paper) — design-system cards reuse it. */
}

* { box-sizing: border-box; }

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

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--step-0);
    line-height: 1.6;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Data grounding: every number lines up like a ledger. */
[data-rankings],
.tnum,
.player-facts .v,
.stat-value {
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------- Type */

h1, h2, h3 { line-height: 1.14; color: var(--ink); text-wrap: balance; }

h1 {
    font-size: var(--step-3);
    font-weight: 800;
    letter-spacing: -0.021em;
    margin: 0 0 0.5rem;
}

h2 {
    font-size: var(--step-2);
    font-weight: 700;
    letter-spacing: -0.012em;
    margin: 2.25rem 0 0.85rem;
}

h3 { font-size: var(--step-1); font-weight: 700; margin: 1.25rem 0 0.5rem; }

p { margin: 0 0 1rem; }

a { color: var(--brand); text-decoration: none; text-underline-offset: 2px; }
a:hover { color: var(--brand-deep); text-decoration: underline; }

/* Micro-label / eyebrow — sporty scoreboard cue. */
.eyebrow {
    display: inline-block;
    font-size: var(--step--1);
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent);
}

.lede { font-size: var(--step-1); color: var(--muted); max-width: 46ch; }

/* Court-line divider — a subtle double baseline. */
.rule {
    height: 0;
    border: 0;
    border-top: 3px double var(--line);
    margin: 2.25rem 0;
}

/* Section heads carry the baseline motif: a double court-line beneath. */
.section-head {
    margin-top: 2.25rem;
    padding-bottom: 0.6rem;
    border-bottom: 3px double var(--brand-line);
}

/* ------------------------------------------------------------ Focus / a11y */

:focus-visible {
    outline: 2px solid transparent;
    box-shadow: var(--focus);
    border-radius: var(--radius-sm);
}

.skip-link {
    position: absolute;
    left: 0.5rem;
    top: -3rem;
    background: var(--brand);
    color: #fff;
    padding: 0.5rem 0.9rem;
    border-radius: var(--radius-sm);
    z-index: 60;
    transition: top 0.15s ease;
}
.skip-link:focus { top: 0.5rem; color: #fff; text-decoration: none; }

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

.admin-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.2rem;
    height: 1.2rem;
    padding: 0 0.4rem;
    margin-left: 0.35rem;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* Language switcher — segmented control. */
.lang {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 999px;
    overflow: hidden;
    background: var(--surface-2);
    padding: 2px;
    gap: 2px;
}
.lang a {
    padding: 0.22rem 0.62rem;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: var(--muted);
    border-radius: 999px;
}
.lang a:hover { color: var(--brand); text-decoration: none; background: var(--brand-tint); }
.lang a.active { background: var(--brand); color: #fff; }
.lang a.active:hover { background: var(--brand-deep); color: #fff; }

/* ================================================== APP SHELL (UX2.2) =====
 * Left green sidebar rail (brand + grouped nav) + slim top bar + content.
 * Replaces the old horizontal .site-header nav (removed; no template
 * references it any more).
 * Off-canvas behaviour on narrow viewports is progressive enhancement: public/
 * js/modules/sidebar.js adds .has-js to .app-shell and then toggles
 * [data-sidebar-open] on it -- without JS (no .has-js) the sidebar is simply
 * always-visible, in-flow content stacked above the page (see the
 * ".app-shell.has-js" gate under the 780px media query below). */

.accent-stripe {
    height: 3px;
    background: linear-gradient(90deg, var(--brand-deep), var(--brand) 55%, var(--accent));
}

.app-shell {
    display: flex;
    align-items: stretch;
    min-height: calc(100vh - 3px);
}

/* --- sidebar --- */

.sidebar {
    width: 13rem;
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    background: linear-gradient(180deg, var(--brand), var(--brand-deep) 70%);
    color: #eaf4ef;
    position: sticky;
    top: 3px;
    height: calc(100vh - 3px);
    overflow-y: auto;
    padding: 0.9rem 0.75rem 1.5rem;
    z-index: 35;
}

.sidebar__brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.5rem 1.1rem;
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
    color: #fff;
}
.sidebar__brand:hover { color: #fff; text-decoration: none; }
.sidebar__brand svg { display: block; flex: none; }

.sidebar__nav { display: flex; flex-direction: column; gap: 1.1rem; }

.sidebar__group { display: flex; flex-direction: column; gap: 0.15rem; }

.sidebar__group-label {
    margin: 0.4rem 0.55rem 0.3rem;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: rgba(234, 244, 239, 0.6);
}

.sidebar__item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.5rem 0.6rem;
    border-radius: var(--radius-sm);
    color: rgba(234, 244, 239, 0.88);
    font-size: 0.9rem;
    font-weight: 600;
}
.sidebar__item svg { width: 18px; height: 18px; flex: none; }
.sidebar__item:hover { background: rgba(255, 255, 255, 0.1); color: #fff; text-decoration: none; }
.sidebar__item.is-active { background: rgba(255, 255, 255, 0.16); color: #fff; }
.sidebar__item.is-active::before {
    content: "";
    position: absolute;
    left: -0.75rem;
    top: 0.3rem;
    bottom: 0.3rem;
    width: 3px;
    border-radius: 999px;
    background: var(--accent);
}
.sidebar__item .admin-badge { margin-left: auto; }
.sidebar__item:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.45); }

/* --- slim top bar --- */

.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.app-topbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.65rem 1.25rem;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 30;
}
.app-topbar .spacer { flex: 1; }
.app-topbar__crumbs { min-width: 0; }
.app-topbar__crumbs .breadcrumbs,
.app-topbar__crumbs .back-link { margin: 0; }

.sidebar-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    flex: none;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
}
.sidebar-toggle:hover { background: var(--surface-2); }
.sidebar-toggle svg { width: 20px; height: 20px; }

.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(8, 20, 15, 0.45);
    z-index: 34;
    opacity: 0;
    pointer-events: none;
}

/* --- responsive: off-canvas sidebar below 780px ---
 * Progressive enhancement: sidebar.js adds .has-js to .app-shell once it has
 * wired up the toggle. Without it (JS disabled/broken), the rules below the
 * ".app-shell.has-js" gate never match, so the sidebar stays a normal,
 * fully-visible, in-flow list of links (stacked above the main content) and
 * the hamburger button -- which would otherwise have nothing to control --
 * stays hidden. With .has-js present, the sidebar becomes the off-canvas
 * panel toggled via [data-sidebar-open]. */

@media (max-width: 780px) {
    .app-shell { flex-direction: column; }

    /* No-JS baseline: sidebar is a plain, always-visible block. */
    .sidebar {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
    }

    /* Has-JS: off-canvas panel + hamburger toggle. */
    .app-shell.has-js .sidebar-toggle { display: inline-flex; }

    .app-shell.has-js .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 16rem;
        max-width: 82vw;
        transform: translateX(-100%);
        transition: transform 0.22s ease;
        z-index: 60;
        box-shadow: var(--shadow-2);
    }
    .app-shell.has-js[data-sidebar-open] .sidebar { transform: translateX(0); }

    .app-shell.has-js .sidebar-backdrop { display: block; }
    .app-shell.has-js[data-sidebar-open] .sidebar-backdrop { opacity: 1; pointer-events: auto; }
}

@media (prefers-reduced-motion: reduce) {
    .sidebar { transition: none; }
}

/* ------------------------------------------------------------------- Main */

main.site-main {
    /* Full remaining width (screen minus the left sidebar), not a centred, capped
       column -- so wide content (brackets, tables) has room. Page-level elements
       that need to stay readable keep their own max-width (.form-narrow, .lede…). */
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 2.25rem 1.75rem 5rem;
}

/* Local page nav (back links) */
.subnav { margin: 0 0 1.25rem; }
.subnav a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 600;
    color: var(--muted);
}
.subnav a:hover { color: var(--brand); text-decoration: none; }
.subnav svg { width: 18px; height: 18px; }

/* ------------------------------------------------------------------ Cards */

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.35rem;
    box-shadow: var(--shadow-1);
}

/* --------------------------------------------------------------- Buttons */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    font: inherit;
    font-weight: 700;
    line-height: 1.1;
    padding: 0.62rem 1.1rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--accent);
    background: var(--accent);
    color: #fff;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.04s ease;
}
.btn:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { box-shadow: var(--focus-accent); }
.btn svg { width: 18px; height: 18px; }

.btn-secondary {
    background: var(--surface);
    color: var(--ink);
    border-color: var(--line);
}
.btn-secondary:hover { background: var(--brand-tint); border-color: var(--brand-line); color: var(--brand-deep); }
.btn-secondary:focus-visible { box-shadow: var(--focus); }

/* Primary positive action (brand green) -- distinct from the accent .btn. */
.btn-primary {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}
.btn-primary:hover { background: var(--brand-deep); border-color: var(--brand-deep); color: #fff; }
.btn-primary:focus-visible { box-shadow: var(--focus); }

.btn-ghost {
    background: transparent;
    color: var(--brand);
    border-color: transparent;
    padding: 0.42rem 0.6rem;
}
.btn-ghost:hover { background: var(--brand-tint); color: var(--brand-deep); }
.btn-ghost:focus-visible { box-shadow: var(--focus); }

.btn-danger {
    background: var(--danger);
    border-color: var(--danger);
    color: #fff;
}
.btn-danger:hover { background: #8f1e17; border-color: #8f1e17; color: #fff; }

.btn-sm { padding: 0.42rem 0.72rem; font-size: 0.9rem; }

/* --------------------------------------------------------------- Forms */

label { font-weight: 600; }

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
textarea,
select {
    font: inherit;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 0.6rem 0.75rem;
    width: 100%;
    max-width: 100%;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 0.75; }
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: var(--focus);
}

.field { margin: 0 0 1.15rem; display: grid; gap: 0.4rem; }
.form-narrow { max-width: 26rem; }

/* Inline search form */
.search-form {
    display: flex;
    gap: 0.65rem;
    align-items: flex-end;
    flex-wrap: wrap;
    margin: 0 0 1.75rem;
}
.search-form .field { flex: 1 1 18rem; margin: 0; }

/* --------------------------------------------------------------- Alerts */

.alert {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    border: 1px solid var(--brand-line);
    border-left: 3px solid var(--brand);
    background: var(--brand-tint);
    color: var(--brand-deep);
    border-radius: var(--radius-sm);
    padding: 0.7rem 0.95rem;
    margin: 0 0 1.15rem;
    font-weight: 600;
}
.alert-success { border-left-color: var(--ok); }
.alert-warning {
    border-color: var(--warn-line);
    border-left-color: var(--warn);
    background: var(--warn-tint);
    color: var(--warn);
}
.alert-danger {
    border-color: var(--danger-line);
    border-left-color: var(--danger);
    background: var(--danger-tint);
    color: var(--danger);
}
.alert-info {
    border-color: var(--brand-line);
    border-left-color: var(--brand);
    background: var(--accent-tint);
    color: var(--brand-deep, var(--brand));
}

/* --------------------------------------------------------------- Tables (ledger) */

table {
    border-collapse: collapse;
    width: 100%;
    background: var(--surface);
}

.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-1);
    background: var(--surface);
}
.table-wrap table { border-radius: inherit; }
.table-wrap caption { padding: 0.85rem 0.95rem 0; }

/* Grouped "my players" sections (managed vs watched). */
.player-group { margin: 1.75rem 0 2.25rem; }
.player-group__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem 0.9rem;
    margin-bottom: 0.9rem;
    padding-bottom: 0.6rem;
    border-bottom: 3px double var(--brand-line);
}
.player-group__head h2 { margin: 0; font-size: var(--step-2); }
.player-group__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem 0.75rem;
    margin: 0;
    color: var(--muted);
    font-size: var(--step--1);
}
.player-group__count {
    display: inline-flex;
    align-items: center;
    padding: 0.08rem 0.5rem;
    border-radius: 999px;
    background: var(--brand-tint);
    color: var(--brand-deep);
    border: 1px solid var(--brand-line);
    /* Always small + quiet, even inside an <h2> section heading. */
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.01em;
    vertical-align: middle;
    font-variant-numeric: tabular-nums;
}
.player-group__count--pct {
    background: var(--accent-tint, rgba(207, 82, 48, 0.12));
    color: var(--accent-deep, #a13b1f);
    border-color: var(--accent-line, rgba(207, 82, 48, 0.4));
    cursor: help;
}
.player-group__count--muted {
    background: var(--surface-2);
    color: var(--muted);
    border-color: var(--line);
}
.player-group__empty {
    color: var(--muted);
    margin: 0;
    padding: 1rem;
    border: 1px dashed var(--brand-line);
    border-radius: var(--radius);
    background: var(--surface-2);
}

/* Inline action clusters. */
.follow-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}
.follow-actions form { margin: 0; }

/* Table header / caption micro-labels — scoreboard cue. */
caption {
    text-align: left;
    font-size: var(--step--1);
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    padding-bottom: 0.5rem;
}

thead th {
    font-size: var(--step--1);
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--muted);
    text-align: left;
    padding: 0.6rem 0.95rem;
    border-bottom: 2px solid var(--line);
    background: var(--surface-2);
    white-space: nowrap;
}

tbody td {
    padding: 0.7rem 0.95rem;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--surface-2); }

/* Numeric columns right-align in the ledger. */
[data-rankings] td.num, [data-rankings] th.num { text-align: right; }

/* Category chips. */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    background: var(--brand-tint);
    color: var(--brand-deep);
    border: 1px solid var(--brand-line);
    white-space: nowrap;
}
.chip svg { width: 15px; height: 15px; }

/* ============================================ RANKINGS: the scoreboard signature */

/* Season group header — a quiet ledger band. */
[data-rankings] tr.rank-season th {
    text-align: left;
    font-size: var(--step--1);
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--brand-deep);
    background: var(--surface-2);
    padding-top: 0.65rem;
    padding-bottom: 0.55rem;
    border-bottom: 1px solid var(--brand-line);
}
.rank-variant {
    display: inline-block;
    margin-left: 0.3rem;
    font-size: 0.75rem;
    color: var(--muted);
    white-space: nowrap;
}

/* The CR / OR standings, rendered like a scoreboard readout: a tinted
   court-green band, big bold tabular numbers, read at a glance. */
[data-rankings] th.rank-pos,
[data-rankings] td.rank-pos {
    background: var(--brand-tint);
    text-align: right;
    font-variant-numeric: tabular-nums;
}
[data-rankings] th.rank-pos {
    color: var(--brand-deep);
    letter-spacing: 0.12em;
}
[data-rankings] td.rank-pos {
    font-size: 1.3rem;
    font-weight: 800;
    line-height: 1;
    color: var(--brand-deep);
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
}
[data-rankings] .rank-pos--cr { border-left: 1px solid var(--brand-line); }
[data-rankings] .rank-pos--or { border-right: 1px solid var(--brand-line); }
/* Quiet the "no standing" dash inside the scoreboard cells. */
[data-rankings] td.rank-pos:has(> .rank-empty) { color: var(--muted); }
[data-rankings] td.rank-pos .rank-empty { font-size: 1rem; font-weight: 600; }
/* Year-over-year ranking movement: + (dropped) is bad -> red, − (improved) green. */
.rank-delta { margin-left: 0.25rem; font-size: 0.72rem; font-weight: 700; vertical-align: super; }
.rank-delta--worse { color: #d64545; }
.rank-delta--better { color: #1f9d55; }

[data-rankings] td.num { font-variant-numeric: tabular-nums; }
.rank-pts { font-variant-numeric: tabular-nums; font-weight: 600; }
.rank-turnaje {
    display: block;
    font-size: 0.72rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}
.rank-empty { color: var(--muted); }

/* Status pills. */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface-2);
    color: var(--muted);
}
.pill-done { background: var(--brand-tint); color: var(--brand-deep); border-color: var(--brand-line); }
.pill-running, .pill-queued { background: var(--accent-tint); color: var(--accent-deep); border-color: var(--accent-line); }
.pill-failed { background: var(--danger-tint); color: var(--danger); border-color: var(--danger-line); }

/* ================================================================= HERO */

.hero {
    max-width: 44rem;
    padding: 3rem 0 3.5rem;
}
.hero h1 { font-size: var(--step-4); max-width: 20ch; line-height: 1.05; letter-spacing: -0.025em; }
.hero .lede { margin: 0.95rem 0 1.9rem; max-width: 54ch; }
.hero-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }

/* Court illustration (shared: empty states, watermark). */
.court-figure { color: var(--brand); }

/* ============================================================ EMPTY STATE */

.empty {
    text-align: center;
    padding: 2.75rem 1.5rem;
    border: 1px dashed var(--brand-line);
    border-radius: var(--radius-lg);
    background: var(--surface);
}
.empty .court-figure {
    width: 88px;
    height: auto;
    margin: 0 auto 1rem;
    color: var(--brand-line);
}
.empty h2 { margin: 0 0 0.4rem; font-size: var(--step-1); border: 0; padding: 0; }
.empty p { color: var(--muted); margin: 0 auto 1.35rem; max-width: 42ch; }

/* ========================================================= PLAYER HERO */

/* Compact identity header: name + tight facts strip + actions. */
.player-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    padding: 0 0 1.15rem;
    margin: 0 0 1.25rem;
    border-bottom: 3px double var(--brand-line);
}
.player-head-id { min-width: 0; }
.player-head h1 {
    margin: 0 0 0.6rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.player-facts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.6rem;
}
.player-facts li { display: flex; align-items: baseline; gap: 0.45rem; }
.player-facts .k {
    font-size: var(--step--2);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}
.player-facts .v { font-weight: 600; }

.player-head-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

/* Header "key" ELO badge: the effective (form-adjusted) singles rating,
   elevated next to the identity so it reads at a glance -- the full
   base/form/rhythm breakdown stays in the .eff-elo section below, this is
   only a compact summary of the same number (see FormAdjustedResult). */
.head-elo-badge {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    background: var(--brand-tint);
    border: 1px solid var(--brand-line);
    border-radius: var(--radius-card);
    cursor: help;
}
.head-elo-badge__label {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    color: var(--muted);
}
.head-elo-badge__value {
    font-size: 1.3rem;
    font-weight: var(--num);
    color: var(--brand-deep);
    line-height: 1;
}
.head-elo-badge__trend { font-size: 0.78rem; }

/* Effective-ELO panel: career rating adjusted for current form + rhythm, per
   discipline, with the base/form/rhythm breakdown. Sits under the identity
   header, above the tabs. */
.eff-elo { margin: 0 0 1.4rem; }
.eff-elo__head {
    font-size: var(--step--1);
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 0.6rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.eff-elo__info {
    font-size: var(--step--1);
    color: var(--muted);
    cursor: help;
    text-transform: none;
    letter-spacing: 0;
}
.eff-elo__cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;
}
.eff-elo__card {
    background: var(--surface-2);
    border: 1px solid var(--brand-line);
    border-radius: var(--radius-sm);
    padding: 0.7rem 0.85rem;
}
.eff-elo__disc {
    font-size: var(--step--2);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}
.eff-elo__value {
    font-size: var(--step-3);
    font-weight: 800;
    line-height: 1.1;
    color: var(--ink);
    margin: 0.1rem 0 0.5rem;
}
.eff-elo__break { margin: 0; display: grid; gap: 0.18rem; }
.eff-elo__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
    font-size: var(--step--1);
}
.eff-elo__row dt { color: var(--muted); }
.eff-elo__row dd { margin: 0; font-weight: 600; text-align: right; }
.eff-elo__row--total {
    margin-top: 0.15rem;
    padding-top: 0.28rem;
    border-top: 1px solid var(--brand-line);
}
.eff-elo__row--total dt,
.eff-elo__row--total dd { font-weight: 800; color: var(--ink); }
.eff-elo__delta { font-weight: 700; }
.eff-elo__delta.is-up { color: var(--ok); }
.eff-elo__delta.is-down { color: var(--accent-deep); }
.eff-elo__n { color: var(--muted); font-weight: 500; font-size: var(--step--2); }
.eff-elo__muted { color: var(--muted); font-weight: 500; }

/* ============================================================== DASHBOARD */
/* UX2.4: dashboard restyled onto the UX2 stat-card design system (see
   "DESIGN SYSTEM (UX2)" further below) so it reads as one product with the
   player card. `.dash-tile` / `.dash-grid` are also reused, unchanged in
   markup, by the admin home + a few admin list pages -- restyling them here
   uplifts those screens too (same card look site-wide), no admin template
   was touched. */

.dash-select {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    margin: 0 0 1.5rem;
}
.dash-select__field { display: flex; flex-direction: column; gap: 0.3rem; }
.dash-select__label { font-size: var(--step--1); font-weight: 700; color: var(--muted); }
.dash-select__control {
    font: inherit;
    font-weight: 600;
    padding: 0.55rem 0.9rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow-card);
    cursor: pointer;
    min-width: 13rem;
}
.dash-select__control:hover { border-color: var(--brand-line); }
.dash-select__control:focus-visible { outline: none; box-shadow: var(--focus); }

/* Hero tournament tile reuses .stat-card--hero (green gradient, white text) --
   only the dashboard-specific inner layout (head row, round sections, match
   list) is defined here, tuned for white-on-green contrast. */
.dash-hero { margin: 0 0 1.25rem; padding: 1.25rem 1.4rem; }
.dash-hero__head-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.7rem;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.85);
}
.dash-hero__head-title svg { width: 16px; height: 16px; }
.dash-hero__empty { color: rgba(255, 255, 255, 0.85); margin: 0; }
.dash-hero__head { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; margin: 0 0 1rem; }
.dash-hero__class-chip { background: rgba(255, 255, 255, 0.22); color: #fff; border-color: rgba(255, 255, 255, 0.4); }
.dash-hero__countdown { font-size: var(--step-2); font-weight: 800; color: #fff; margin: 0; }
.dash-hero__sections { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media (max-width: 640px) { .dash-hero__sections { grid-template-columns: 1fr; } }
.dash-hero .round-head { color: rgba(255, 255, 255, 0.75); margin: 0 0 0.4rem; }
.dash-hero__matches { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
.dash-hero__matches li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.dash-hero__matches li:last-child { border-bottom: none; }
.dash-hero__round { font-size: var(--step--2); color: rgba(255, 255, 255, 0.7); text-transform: uppercase; }
.dash-hero__opponent { flex: 1; font-weight: 700; color: #fff; }
.dash-hero__muted { color: rgba(255, 255, 255, 0.75); margin: 0; }

.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; }
.dash-tile {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    padding: 1rem 1.1rem;
    box-shadow: var(--shadow-card);
}
.dash-tile__head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--ink);
}
.dash-tile__head svg { width: 18px; height: 18px; color: var(--brand); flex: none; }
.dash-tile__empty { color: var(--muted); margin: 0; }
.dash-tile__link { margin-top: auto; font-weight: 700; }

/* Admin scrape monitor: KPI-style stat tiles (job counts by status) and small
   inline status chips (recent jobs / batches tables). Colors mirror the job
   dock's per-status coding (accent = in progress, brand = done, danger = failed)
   so a job's state reads the same everywhere in the app. */
.stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.9rem; margin: 1rem 0 1.75rem; }
.stat-tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.9rem 1.1rem; box-shadow: var(--shadow-1); }
.stat-tile__num { display: block; font-size: var(--step-3); font-weight: 800; line-height: 1.1; }
.stat-tile__label { display: block; margin-top: 0.2rem; color: var(--muted); font-size: var(--step--1); font-weight: 600; }
.stat-tile--running .stat-tile__num,
.stat-tile--queued .stat-tile__num { color: var(--accent); }
.stat-tile--done .stat-tile__num { color: var(--brand); }
.stat-tile--failed .stat-tile__num { color: var(--danger); }

.status-chip { display: inline-flex; align-items: center; padding: 0.15rem 0.65rem; border-radius: 999px; font-size: var(--step--1); font-weight: 700; white-space: nowrap; }
.status-chip--running,
.status-chip--queued { background: var(--accent-tint); color: var(--accent-deep); }
.status-chip--done { background: var(--brand-tint); color: var(--brand-deep); }
.status-chip--failed,
.status-chip--cancelled { background: var(--danger-tint); color: var(--danger); }

.dash-elo { display: grid; gap: 0.6rem; }
.dash-elo__row { display: flex; align-items: center; gap: 0.6rem; }
.dash-elo__disc { flex: 1; color: var(--muted); font-weight: 600; font-size: var(--step--1); }
.dash-elo__value { margin-top: 0; }
.dash-elo__trend--flat { color: var(--muted); font-weight: 700; }
.dash-elo__muted { color: var(--muted); font-size: var(--step--1); }

.dash-recent__record { margin: 0; font-size: var(--step-1); font-weight: 800; }
.dash-recent__pct { margin-left: 0.3rem; }
.dash-recent__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.dash-recent__list li { display: flex; align-items: center; gap: 0.5rem; font-size: var(--step--1); }
.dash-recent__opp { flex: 1; font-weight: 600; }
.dash-recent__event { color: var(--muted); }

.dash-goals__counts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0; }
/* Long ICU-plural phrases ("N otvorených") must wrap inside the pill instead
   of forcing the chip to overflow -- .chip is nowrap by default for short
   category labels, which doesn't fit a full sentence. */
.dash-goals__counts .chip,
.dash-injuries__count .chip { white-space: normal; text-align: left; }
.dash-goals__list { list-style: disc; margin: 0; padding-left: 1.2rem; display: grid; gap: 0.25rem; font-size: var(--step--1); }
.dash-goals__list li.is-overdue { color: #b42318; }
.dash-goals__due { margin-left: 0.35rem; color: var(--muted); font-size: 0.8em; }

.dash-tile__hint { margin: 0; color: var(--muted); font-size: var(--step--1); }
.dash-tile__empty--ok { color: var(--ok); font-weight: 600; }

.dash-trainings__stat { display: flex; flex-direction: column; gap: 0.1rem; }
.dash-trainings__freq { margin: 0; font-weight: 700; font-size: var(--step--1); }
.dash-trainings__meta { margin: 0; color: var(--muted); font-size: var(--step--1); }
.dash-trainings__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.dash-trainings__list li { display: flex; align-items: center; gap: 0.5rem; font-size: var(--step--1); }
.dash-trainings__date { color: var(--muted); }
.dash-trainings__type { flex: 1; font-weight: 600; }
.dash-trainings__perf { color: var(--muted); font-weight: 600; }

/* Active-injury widget gets a danger accent (border + tint) only when it has
   something to flag -- an empty tile stays neutral so the dashboard isn't
   permanently red for players with no health history. */
.dash-tile--alert { border-color: var(--danger-line); background: var(--danger-tint); }
.dash-injuries__count { margin: 0; }
.dash-injuries__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.dash-injuries__item { padding: 0.5rem 0.65rem; background: var(--surface); border: 1px solid var(--danger-line); border-radius: 8px; }
.dash-injuries__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-bottom: 0.25rem; }
.dash-injuries__since { color: var(--muted); font-size: var(--step--1); }
.dash-injuries__description { margin: 0; font-size: var(--step--1); }

/* Reference-entity detail pages (region / club / citizenship / category). */
.reference-head { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
.reference-head h1 { margin: 0; }
.reference-eyebrow {
    margin: 0;
    font-size: var(--step--1);
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
}
.reference-sub { margin: 0.2rem 0 0; color: var(--muted); }
.reference-clubs { margin: 0.5rem 0 1.75rem; }
.chip-list { list-style: none; display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0.6rem 0 0; padding: 0; }
a.chip { text-decoration: none; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; }
a.chip:hover { background: var(--brand); color: #fff; border-color: var(--brand); }
/* Subtle inline entity link inside dense facts/tables. */
.entity-link { font-weight: inherit; }

/* Registration-status indicator (reusable across detail + list). */
.reg-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    line-height: 0;
}
.reg-status--alert { color: var(--danger); }
.reg-status--warn { color: var(--warn); }
.reg-status svg { display: block; }
h1 .reg-status { margin-left: 0.15rem; }
td .reg-status { margin-left: 0.4rem; }

/* Legacy identity list (scrape detail). */
.player-identity {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.35rem 1.25rem;
    margin: 1rem 0;
}
.player-identity dt { color: var(--muted); font-weight: 600; }
.player-identity dd { margin: 0; }

/* ==================================================== ADMIN REVIEW */

.review-group {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.35rem;
    margin: 1.35rem 0;
    background: var(--surface);
    box-shadow: var(--shadow-1);
}
.review-group h2 { margin: 0 0 0.5rem; font-size: var(--step-1); display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; border: 0; padding: 0; }
.review-group h2 code, .review-count strong { font-variant-numeric: tabular-nums; }
.review-label { color: var(--muted); font-weight: 600; }
.review-count { color: var(--muted); }
.review-fragment {
    background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
    padding: 0.85rem; overflow-x: auto; white-space: pre-wrap; word-break: break-word;
    font-family: var(--font-mono); font-size: 0.82rem; color: var(--ink);
}
.review-form { display: flex; align-items: flex-start; gap: 0.6rem; margin: 0.85rem 0; flex-wrap: wrap; }
.review-form textarea { flex: 1 1 20rem; font-family: inherit; }
code { font-family: var(--font-mono); font-size: 0.9em; background: var(--surface-2); padding: 0.1rem 0.35rem; border-radius: 5px; border: 1px solid var(--line); }
.review-group h2 code { background: var(--brand-tint); border-color: var(--brand-line); color: var(--brand-deep); }

.agent-launch-slot:empty { display: none; }

/* ==================================================== AGENT CONSOLE */

.agent-console { border: 1px solid var(--line); border-radius: var(--radius); padding: 0.95rem; margin: 0.95rem 0; background: var(--surface-2); }
.agent-console-bar { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.agent-btn {
    border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius-sm);
    padding: 0.42rem 0.85rem; cursor: pointer; font: inherit; font-weight: 600; font-size: 0.9rem;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.agent-btn:hover { background: var(--brand-tint); border-color: var(--brand-line); }
.agent-btn-stop { color: var(--danger); }
.agent-btn-stop:hover { background: var(--danger-tint); border-color: var(--danger-line); }
.agent-status { color: var(--muted); font-size: 0.85rem; font-weight: 600; }
.agent-session { color: var(--muted); font-size: 0.8rem; margin-left: auto; font-variant-numeric: tabular-nums; }
.agent-output {
    background: var(--brand-deep); color: #e7f1ec; border-radius: var(--radius-sm); padding: 0.8rem;
    height: 16rem; overflow-y: auto; font-family: var(--font-mono); font-size: 0.82rem;
    white-space: pre-wrap; word-break: break-word;
}
.agent-line { margin: 0.1rem 0; }
.agent-line.agent-tool { color: #7fbfe0; }
.agent-line.agent-result { color: #86efac; }
.agent-line.agent-error { color: #fca5a5; }
.agent-line.agent-user { color: #fcd9a8; }
.agent-input { width: 100%; margin-top: 0.5rem; font-family: inherit; padding: 0.5rem 0.65rem; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.agent-history { margin-top: 1.5rem; }
.agent-history-time { color: var(--muted); font-size: 0.8rem; margin-right: 0.4rem; font-variant-numeric: tabular-nums; }
.agent-history-prompt { color: var(--ink); }
.agent-intro { color: var(--muted); }

/* ==================================================== RESPONSIVE */

@media (max-width: 780px) {
    .hero { padding: 2rem 0 2.5rem; }
    .player-hero-watermark { display: none; }
}

@media (max-width: 520px) {
    main.site-main { padding: 1.75rem 1rem 3.5rem; }
    [data-rankings] td.rank-pos { font-size: 1.1rem; }
}

/* ==================================================== MOTION */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==================================================== JOB DOCK */

/* Global scrape-progress chrome (see public/js/modules/job-dock.js): a fixed
   bottom BAR of job chips + a floating detail WINDOW above it. Subtle utility
   surface — light, quiet, never dominating the page. */
.job-dock {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
}
.job-dock[hidden] { display: none; }
.job-dock__ico { display: inline-flex; line-height: 0; }
.job-dock__ico svg { display: block; }

@keyframes job-dock-spin { to { transform: rotate(360deg); } }
.job-dock__spin { transform-origin: center; animation: job-dock-spin 0.9s linear infinite; }

/* ---- bottom bar ---- */
.job-dock__bar {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    max-width: var(--container);
    padding: 0.4rem 0.65rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-bottom: 0;
    border-radius: var(--radius) var(--radius) 0 0;
    box-shadow: var(--shadow-2);
}
.job-dock__collapse {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex: none;
    padding: 0.3rem 0.45rem;
    border: 0;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    border-radius: var(--radius-sm);
    white-space: nowrap;
}
.job-dock__collapse:hover { background: var(--surface-2); }
.job-dock__collapse .job-dock__ico { color: var(--muted); transition: transform 0.2s ease; }
.job-dock.is-collapsed .job-dock__collapse .job-dock__ico { transform: rotate(-90deg); }
.job-dock__title { font-size: var(--step--1); }
.job-dock.is-collapsed .job-dock__chips,
.job-dock.is-collapsed .job-dock__window { display: none; }

.job-dock__chips {
    display: flex;
    gap: 0.4rem;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.15rem;
    overflow-x: auto;
    scrollbar-width: thin;
}

/* ---- job chip ---- */
.job-dock__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex: none;
    max-width: 15rem;
    padding: 0.3rem 0.55rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--ink);
    font: inherit;
    cursor: pointer;
}
.job-dock__chip:hover { border-color: var(--brand-line); }
.job-dock__chip:focus-visible { outline: none; box-shadow: var(--focus); }
.job-dock__chip[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-tint); }
.job-dock__chip.is-active { border-color: var(--brand-line); }
.job-dock__chip .job-dock__ico { flex: none; color: var(--muted); }
.job-dock__chip.status-running .job-dock__ico,
.job-dock__chip.status-queued .job-dock__ico { color: var(--accent); }
.job-dock__chip.status-done .job-dock__ico { color: var(--brand); }
.job-dock__chip.status-failed .job-dock__ico { color: var(--danger); }
.job-dock__chip-label { display: flex; flex-direction: column; text-align: left; min-width: 0; line-height: 1.2; }
.job-dock__chip-name { font-weight: 600; font-size: var(--step--1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.job-dock__chip-step,
.job-dock__chip-state { font-size: 0.72rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.job-dock__chip-dismiss {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    padding: 0.12rem;
    color: var(--muted);
    border-radius: 999px;
    cursor: pointer;
}
.job-dock__chip-dismiss:hover { color: var(--danger); background: var(--danger-tint); }

/* ---- floating detail window ---- */
.job-dock__window {
    pointer-events: auto;
    width: min(24rem, calc(100vw - 1.5rem));
    margin-bottom: 0.5rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-2);
    overflow: hidden;
}
.job-dock__win-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.6rem 0.85rem;
    background: var(--surface-2);
    border-bottom: 1px solid var(--line);
}
.job-dock__win-title { margin: 0; font-size: var(--step-0); font-weight: 700; overflow-wrap: anywhere; }
.job-dock__win-close {
    display: inline-flex;
    flex: none;
    padding: 0.2rem;
    border: 0;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    border-radius: var(--radius-sm);
}
.job-dock__win-close:hover { color: var(--ink); background: var(--line); }
.job-dock__win-close:focus-visible { outline: none; box-shadow: var(--focus); }
.job-dock__win-body { padding: 0.85rem; max-height: min(24rem, 55vh); overflow-y: auto; }
.job-dock__win-status { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0 0 0.6rem; font-weight: 700; }
.job-dock__win-status .job-dock__ico { color: var(--muted); }
.job-dock__win-status.status-running .job-dock__ico,
.job-dock__win-status.status-queued .job-dock__ico { color: var(--accent); }
.job-dock__win-status.status-running,
.job-dock__win-status.status-queued { color: var(--accent-deep); }
.job-dock__win-status.status-done { color: var(--brand-deep); }
.job-dock__win-status.status-failed { color: var(--danger); }
.job-dock__win-status.status-done .job-dock__ico { color: var(--brand); }
.job-dock__win-status.status-failed .job-dock__ico { color: var(--danger); }

.job-dock__track { height: 0.5rem; border-radius: 999px; background: var(--line); overflow: hidden; }
.job-dock__track-fill { height: 100%; background: var(--accent); transition: width 0.4s ease; }
.job-dock__track-fill.status-done { background: var(--brand); }
.job-dock__track-fill.status-failed { background: var(--danger); }

.job-dock__win-step { color: var(--muted); font-size: var(--step--1); margin: 0.6rem 0 0; overflow-wrap: anywhere; }
.job-dock__win-steps-title {
    font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--muted); margin: 0.9rem 0 0.4rem;
}
.job-dock__win-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.job-dock__win-steps-item {
    font-size: var(--step--1); padding: 0.3rem 0.5rem; border-radius: var(--radius-sm);
    background: var(--surface-2); border: 1px solid var(--line); overflow-wrap: anywhere;
}
.job-dock__win-steps-item.status-done { color: var(--brand-deep); }
.job-dock__win-steps-item.status-error { background: var(--danger-tint); color: var(--danger); border-color: var(--danger-line); }

@media (max-width: 640px) {
    .job-dock__bar { border-radius: 0; border-left: 0; border-right: 0; }
    .job-dock__window { border-radius: var(--radius) var(--radius) 0 0; }
    .job-dock__chip { max-width: 11rem; }
}

@media (prefers-reduced-motion: reduce) {
    .job-dock__spin { animation: none; }
    .job-dock__track-fill { transition: none; }
    .job-dock__collapse .job-dock__ico { transition: none; }
}

/* ==================================================== CONFIRM MODAL + ICON BTN */

.confirm-modal {
    padding: 0;
    max-width: min(24rem, calc(100vw - 2rem));
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow-2);
}
.confirm-modal::backdrop { background: rgba(20, 38, 31, 0.45); }
.confirm-modal__box { margin: 0; padding: 1.1rem 1.25rem; }
.confirm-modal__message { margin: 0 0 1rem; }
.confirm-modal__actions { display: flex; justify-content: flex-end; gap: 0.5rem; }

/* Icon-only button (e.g. the unfollow "×" in My players). */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--muted);
    cursor: pointer;
}
.btn-icon:hover { color: var(--ink); background: var(--surface-2); }
.btn-icon:focus-visible { outline: none; box-shadow: var(--focus); }
.btn-icon--danger:hover { color: var(--danger); border-color: #e6b4b0; background: var(--danger-tint); }

/* ==================================================== USER MENU + PAGE HEAD */

.page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}
.page-head h1 { margin: 0; }

/* Global active-player selector in the header (before the language switch). */
.player-select { position: relative; flex: none; }
.player-select__summary {
    display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; list-style: none;
    padding: 0.3rem 0.65rem; border-radius: 999px; background: var(--surface-2); color: var(--ink);
    font-size: 0.85rem; font-weight: 600; max-width: 13rem;
}
.player-select__summary::-webkit-details-marker { display: none; }
.player-select__summary::marker { content: ''; }
.player-select__summary svg { width: 16px; height: 16px; flex: none; opacity: 0.8; }
.player-select__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-select__summary:hover { background: var(--brand-tint); }
.player-select[open] .player-select__summary { box-shadow: var(--focus); }
.player-select__panel {
    position: absolute; right: 0; top: calc(100% + 0.4rem); z-index: 40; min-width: 13rem;
    background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); padding: 0.35rem; display: flex; flex-direction: column; gap: 0.1rem;
}
.player-select__head { margin: 0.2rem 0.5rem 0.35rem; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 700; }
.player-select__panel form { margin: 0; }
.player-select__item { width: 100%; text-align: left; background: none; border: 0; cursor: pointer; padding: 0.42rem 0.55rem; border-radius: 6px; font: inherit; color: var(--ink); white-space: nowrap; }
.player-select__item:hover { background: var(--surface-2); }
.player-select__item.is-active { background: var(--brand-tint); color: var(--brand-deep); font-weight: 700; }

.user-menu { position: relative; flex: none; }
.user-menu__avatar {
    list-style: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 999px;
    background: var(--brand);
    color: #fff;
    font-weight: 700;
    font-size: var(--step--1);
    cursor: pointer;
    user-select: none;
}
.user-menu__avatar::-webkit-details-marker { display: none; }
.user-menu__avatar::marker { content: ''; }
.user-menu__avatar:hover { background: var(--brand-deep); }
.user-menu[open] .user-menu__avatar { box-shadow: var(--focus); }
.user-menu__panel {
    position: absolute;
    right: 0;
    top: calc(100% + 0.4rem);
    min-width: 13rem;
    display: flex;
    flex-direction: column;
    padding: 0.3rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-2);
    z-index: 50;
}
.user-menu__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.6rem;
    border-radius: var(--radius-sm);
    color: var(--ink);
    text-decoration: none;
}
.user-menu__item:hover { background: var(--surface-2); }

/* Tournament entries: withdrawn ("odhlásený") rows are de-emphasized. */
.is-withdrawn { color: var(--muted); }
.is-withdrawn .entry-status { text-decoration: line-through; }
.entry-status { color: var(--muted); font-style: italic; }

/* --- Referee licence-class badge (tooltip explains it; see Documentation) --- */
.cat-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4em;
    height: 1.4em;
    padding: 0 0.35em;
    margin-left: 0.35em;
    border: 1px solid var(--brand-line);
    border-radius: 999px;
    background: var(--brand-tint);
    color: var(--brand-deep);
    font-size: 0.72em;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    vertical-align: middle;
}
abbr.cat-badge { cursor: help; }
th .cat-badge { margin-left: 0; }

/* --- Documentation page --- */
.docs-toc { margin: 0.9rem 0 1.5rem; }
.docs-section { margin: 0 0 2rem; }
.docs-section p { max-width: 68ch; }
.docs-list { max-width: 68ch; margin: 0.4rem 0 0; padding-left: 1.1rem; }
.docs-list li { margin: 0.3rem 0; }
.docs-note { color: var(--muted); font-size: 0.92em; margin-top: 0.5rem; }
.docs-source { color: var(--muted); font-size: 0.86em; margin-top: 2rem; border-top: 1px solid var(--brand-line); padding-top: 0.8rem; max-width: 68ch; }

/* --- Tournament document download list --- */
.doc-list { list-style: none; margin: 0.6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.doc-link {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--brand-line);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text, inherit);
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.doc-link:hover { background: var(--brand-tint); border-color: var(--brand); }
.doc-link svg { width: 20px; height: 20px; color: var(--accent); flex: none; }
.doc-meta { color: var(--muted); font-size: 0.85em; }

/* --- Tournament draw matches --- */
.match-list { list-style: none; margin: 0.6rem 0 0; padding: 0; border: 1px solid var(--brand-line); border-radius: 10px; overflow: hidden; }
.match-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.55rem 0.85rem; border-top: 1px solid var(--brand-line); }
.match-row:first-child { border-top: 0; }
.match-row:nth-child(even) { background: var(--surface-2); }
.match-time { flex: none; width: 5.5rem; color: var(--muted); font-size: 0.85em; }
.match-players { flex: 1 1 auto; display: flex; align-items: baseline; gap: 0.4rem; flex-wrap: wrap; }
.match-vs { color: var(--muted); }
.match-side.is-winner { font-weight: 700; }
.match-score { flex: none; color: var(--brand-deep); font-size: 0.9em; white-space: nowrap; }
@media (max-width: 520px) {
    .match-row { flex-wrap: wrap; }
    .match-time { width: auto; order: 2; }
    .match-score { order: 3; margin-left: auto; }
    .match-players { order: 1; flex-basis: 100%; }
}

/* --- Draw: rounds, winner, my/watched players --- */
.round-head { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 1.1rem 0 0.35rem; }
.round-points { margin-left: 0.5em; font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 0.9em; color: var(--accent-deep); }
.results-table .pts-max { color: var(--muted); font-weight: 400; }
.match-trophy { width: 15px; height: 15px; color: var(--accent); margin-right: 0.3rem; vertical-align: -2px; flex: none; }
.match-pair.is-winner .match-side { font-weight: 700; }
.match-amp { color: var(--muted); }
/* My (managed) players stand out strongly; watched ones only subtly. */
.match-side.is-mine {
    background: var(--accent-tint);
    color: var(--accent-deep);
    font-weight: 700;
    padding: 0.05em 0.4em;
    border-radius: 6px;
    box-shadow: inset 0 0 0 1px var(--accent);
}
.match-side.is-watched { text-decoration: underline dotted var(--brand-line); text-underline-offset: 3px; }

/* --- Tournament status badge (finished / ongoing / planned) --- */
.t-status {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.05em 0.5em;
    border-radius: 999px;
    font-size: 0.72em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    vertical-align: middle;
}
.t-status--finished { background: var(--surface-2); color: var(--muted); }
.t-status--ongoing { background: var(--accent-tint); color: var(--accent-deep); }
.t-status--planned { background: var(--brand-tint); color: var(--brand-deep); }
.t-status--unknown { display: none; }

/* --- Tournament schedule state badge (registration / acceptance / playing) --- */
.t-state {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.05em 0.55em;
    border-radius: 999px;
    font-size: 0.72em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    vertical-align: middle;
    white-space: nowrap;
}
.t-state--registration { background: var(--brand-tint); color: var(--brand-deep); }
.t-state--acceptance { background: var(--accent-tint); color: var(--accent-deep); }
.t-state--playing { background: var(--brand); color: #fff; }
.t-state--playing::before {
    content: "";
    display: inline-block;
    width: 0.5em; height: 0.5em;
    margin-right: 0.35em;
    border-radius: 50%;
    background: #fff;
    vertical-align: baseline;
    animation: t-pulse 1.4s ease-in-out infinite;
}
.t-state--unknown, .t-state--finished { display: none; }
@keyframes t-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* --- Acceptance list --- */
.acceptance-table .wc-badge { font-size: 0.7em; font-weight: 700; color: var(--accent-deep); background: var(--accent-tint); padding: 0 0.3em; border-radius: 4px; }

/* --- Back link (top of every inner page) --- */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin: 0 0 1rem;
    color: var(--muted);
    text-decoration: none;
    font-size: 0.9em;
    font-weight: 600;
}
.back-link:hover { color: var(--brand); }
.back-link svg { width: 17px; height: 17px; }

/* --- Breadcrumbs (global UX rule): real, clickable hierarchy --- */
.breadcrumbs { margin: 0 0 1.25rem; }
.breadcrumbs__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.15rem;
    font-size: 0.86rem;
    line-height: 1.4;
}
.breadcrumbs__item { display: inline-flex; align-items: center; min-width: 0; }
.breadcrumbs__link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.15rem 0.4rem;
    border-radius: 6px;
    color: var(--muted);
    text-decoration: none;
    font-weight: 600;
    max-width: 22ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 0.12s ease, background-color 0.12s ease;
}
.breadcrumbs__link:hover { color: var(--brand); background: var(--brand-wash, rgba(12,107,82,0.07)); }
.breadcrumbs__link:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.breadcrumbs__home { padding-inline: 0.3rem; }
.breadcrumbs__icon { width: 16px; height: 16px; }
.breadcrumbs__sep { width: 14px; height: 14px; color: var(--line); flex: none; }
.breadcrumbs__current {
    display: inline-block;
    padding: 0.15rem 0.4rem;
    color: var(--ink);
    font-weight: 700;
    max-width: 32ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

/* --- Diary goals (D1) --- */
.goal-form {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin: 0 0 1.5rem;
    padding: 1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
}
.goal-form__field { display: flex; flex-direction: column; gap: 0.25rem; }
.goal-form__field > span { font-size: 0.8rem; font-weight: 600; color: var(--muted); }
.goal-form textarea,
.goal-form select,
.goal-form input[type="text"] {
    font: inherit;
    color: var(--ink);
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0.5rem 0.6rem;
    width: 100%;
}
.goal-form textarea { resize: vertical; min-height: 3rem; }
.goal-form__row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
}
.goal-form__row .goal-form__field { flex: 1 1 10rem; }
.goal-form__row .btn { flex: none; }

.goal-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.goal-item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    justify-content: space-between;
    padding: 0.8rem 1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    border-radius: 10px;
}
.goal-item--done { border-left-color: var(--brand); opacity: 0.72; }
.goal-item--done .goal-item__content { text-decoration: line-through; }
.goal-item__main { min-width: 0; }
.goal-item__content { margin: 0 0 0.4rem; white-space: pre-wrap; }
.goal-item__meta { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.goal-tag {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: var(--bg);
    border: 1px solid var(--line);
    color: var(--muted);
}
.goal-tag--done { color: var(--brand-deep); border-color: var(--brand); }
.goal-tag--due { color: var(--muted); }
.goal-tag--late { color: #b42318; border-color: #f0b4ac; background: #fdecea; }
.goal-tag--shared { color: var(--brand-deep); border-color: var(--brand); }
.goal-tag--tour a { color: inherit; }
.goal-item--overdue { border-left-color: #d64545; }
.goal-item__actions { display: flex; align-items: center; gap: 0.4rem; flex: none; }
.goal-item__actions form { margin: 0; display: flex; }

/* Inline edit (goal): a <details> toggle revealing a pre-filled form. */
.goal-form__check { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--muted); }
.goal-form__check input { width: auto; }
.goal-edit { margin-top: 0.5rem; }
.goal-edit > summary { display: inline-flex; align-items: center; gap: 0.3rem; cursor: pointer; list-style: none; width: max-content; }
.goal-edit > summary::-webkit-details-marker { display: none; }
.goal-edit[open] > summary { margin-bottom: 0.6rem; }
.goal-edit .goal-form { margin: 0; }

/* Pre-tournament motivation reminder (F2.3). */
.motivation-tile { margin: 0 0 1.25rem; padding: 0.8rem 1rem; background: var(--brand-tint); border: 1px solid var(--brand-line); border-left: 4px solid var(--brand); border-radius: 10px; }
.motivation-tile__head { margin: 0 0 0.4rem; font-size: 1rem; color: var(--brand-deep); display: flex; align-items: center; gap: 0.4rem; }
.motivation-tile__icon { width: 1em; height: 1em; }
.motivation-tile__phrase { margin: 0 0 0.4rem; font-size: 1.05rem; font-weight: 600; color: var(--brand-deep); font-style: italic; }
.motivation-tile__list { margin: 0.3rem 0 0; padding-left: 1.2rem; }
.motivation-tile__list li { margin: 0.2rem 0; }

/* Motivation library phrases (migrated): daily thought + next-match line. */
.motivation-daily { display: flex; align-items: center; gap: 0.45rem; margin: 0 0 1rem; padding: 0.5rem 0.85rem; background: var(--brand-tint); border-radius: 8px; color: var(--brand-deep); font-style: italic; font-weight: 600; }
.motivation-daily__icon { width: 1em; height: 1em; flex: none; }
.stat-card__motivation { display: block; margin-top: 0.35rem; font-size: 0.8rem; font-style: italic; color: var(--muted); }

/* "Playing hurt" warning on a tournament detail (F2.1). */
.injury-warn { margin: 0 0 1.25rem; padding: 0.8rem 1rem; background: #fdecea; border: 1px solid #f0b4ac; border-left: 4px solid #d64545; border-radius: 10px; color: #7a271a; }
.injury-warn__icon { width: 1em; height: 1em; vertical-align: -0.15em; margin-right: 0.35rem; }
.injury-warn__list { margin: 0.4rem 0 0; padding-left: 1.2rem; }
.injury-warn__list li { margin: 0.15rem 0; }

/* Doubles pair prediction (draw not out yet): ranked predicted pairs. */
.doubles-pred-pairs { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.doubles-pred-pair { display: flex; align-items: center; gap: 0.75rem; padding: 0.4rem 0.6rem; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.doubles-pred-pair__seed { flex: none; min-width: 1.4rem; text-align: center; font-weight: 700; color: var(--muted); }
.doubles-pred-pair__prob { flex: none; min-width: 3rem; font-weight: 700; color: var(--brand-deep); }
.doubles-pred-pair__names { flex: 1 1 auto; min-width: 0; }
.doubles-pred-pair__ee { flex: none; color: var(--muted); font-size: 0.85rem; }
.doubles-pred-pair__drilled { color: #d19a00; cursor: help; }

/* Diary free-text note (D7). */
.note-intro { color: var(--muted); margin: 0 0 0.75rem; }
.note-form__field { display: block; }
.note-form__field textarea { width: 100%; box-sizing: border-box; resize: vertical; }
.note-form__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 0.6rem; }
.note-form__updated { color: var(--muted); font-size: 0.85rem; }

/* Phrase reorder arrows (▲▼), stacked, one small button each. */
.phrase-reorder { display: flex; flex-direction: column; gap: 0.1rem; }
.phrase-reorder form { margin: 0; }
.phrase-reorder .btn-icon { line-height: 1; padding: 0.1rem 0.35rem; }
.phrase-reorder .btn-icon[disabled] { opacity: 0.3; cursor: default; }

/* --- Diary trainings (D2) --- */
.training-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 0 0 1.5rem;
    padding: 1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
}
.training-form__field { display: flex; flex-direction: column; gap: 0.25rem; }
.training-form__field > span { font-size: 0.8rem; font-weight: 600; color: var(--muted); }
.training-form textarea,
.training-form select,
.training-form input[type="text"],
.training-form input[type="datetime-local"] {
    font: inherit;
    color: var(--ink);
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0.5rem 0.6rem;
    width: 100%;
}
.training-form textarea { resize: vertical; min-height: 3rem; }
.training-form__row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem; }
.training-form__row .training-form__field { flex: 1 1 10rem; }

.training-parts { display: flex; flex-direction: column; gap: 0.5rem; }
.training-parts__head { margin: 0; font-size: 0.85rem; font-weight: 700; color: var(--muted); }
.training-parts__list { display: flex; flex-direction: column; gap: 0.5rem; }
.training-part-row { display: flex; align-items: center; gap: 0.5rem; }
.training-part-row input[name="partName[]"] { flex: 1 1 12rem; }
.training-part-row input[name="partNote[]"] { flex: 2 1 16rem; }

.training-indicators {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0.6rem 0.75rem;
}
.training-indicators legend { font-size: 0.8rem; font-weight: 600; color: var(--muted); padding: 0 0.25rem; }
.training-indicator-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.9rem; }
.training-indicator-row__chk { display: flex; align-items: center; gap: 0.35rem; font-size: 0.9rem; flex: 1 1 12rem; }
.training-indicator-row__slider { display: flex; align-items: center; gap: 0.5rem; flex: 1 1 14rem; }
.training-indicator-row__slider input[type="range"] { flex: 1 1 auto; }
.training-indicator-row__slider input[type="range"]:disabled { opacity: 0.4; }
.training-indicator-row__bubble {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.8rem;
    padding: 0.1rem 0.4rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--ink);
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 999px;
}
.training-item__performance { font-weight: 700; }
.training-indicator-list { color: var(--ink); }

.training-participants {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0.6rem 0.75rem;
}
.training-participants legend { font-size: 0.8rem; font-weight: 600; color: var(--muted); padding: 0 0.25rem; }
.training-participants__chk { display: flex; align-items: center; gap: 0.35rem; font-size: 0.9rem; }

.training-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.training-item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    justify-content: space-between;
    padding: 0.8rem 1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    border-radius: 10px;
}
.training-item__main { min-width: 0; }
.training-item__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.3rem; }
.training-item__date { font-weight: 600; }
.training-item__note { margin: 0 0 0.4rem; white-space: pre-wrap; }
.training-part-list { list-style: disc; margin: 0 0 0.4rem; padding-left: 1.25rem; font-size: 0.9rem; color: var(--muted); }
.training-item__participants { font-size: 0.85rem; color: var(--muted); }
.training-item__actions { display: flex; align-items: center; gap: 0.4rem; flex: none; }
.training-item__actions form { margin: 0; display: flex; }

/* --- Diary health records (D5) --- */
.health-form {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin: 0 0 1.5rem;
    padding: 1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
}
.health-form__field { display: flex; flex-direction: column; gap: 0.25rem; }
.health-form__field > span { font-size: 0.8rem; font-weight: 600; color: var(--muted); }
.health-form__hint { font-size: 0.72rem; color: var(--muted); }
.health-form textarea,
.health-form select,
.health-form input[type="date"] {
    font: inherit;
    color: var(--ink);
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0.5rem 0.6rem;
    width: 100%;
}
.health-form textarea { resize: vertical; min-height: 3rem; }
.health-form__row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem; }
.health-form__row .health-form__field { flex: 1 1 10rem; }

.health-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.health-item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    justify-content: space-between;
    padding: 0.8rem 1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 3px solid var(--muted);
    border-radius: 10px;
}
.health-item--active { border-left-color: var(--danger); background: var(--danger-tint); }
.health-item--resolved { opacity: 0.75; }
.health-item__main { min-width: 0; }
.health-item__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin-bottom: 0.4rem; }
.health-item__dates { font-size: 0.85rem; color: var(--muted); }
.health-item__description { margin: 0 0 0.3rem; white-space: pre-wrap; }
.health-item__treatment { margin: 0; font-size: 0.9rem; color: var(--muted); white-space: pre-wrap; }
.health-tag {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: var(--bg);
    border: 1px solid var(--line);
    color: var(--muted);
}
.health-tag--pain { color: var(--warn); border-color: var(--warn-line); background: var(--warn-tint); }
.health-tag--injury { color: var(--danger); border-color: var(--danger-line); background: var(--danger-tint); }
.health-tag--illness { color: var(--accent-deep); border-color: var(--brand-line); background: var(--accent-tint); }
.health-status {
    display: inline-block;
    padding: 0.05em 0.5em;
    border-radius: 999px;
    font-size: 0.72em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.health-status--active { background: var(--danger); color: #fff; }
.health-status--resolved { background: var(--surface-2); color: var(--muted); }
.health-item__actions { display: flex; align-items: center; gap: 0.4rem; flex: none; }
.health-item__actions form { margin: 0; display: flex; }

/* --- Diary phrases (D6) -- reuses .goal-form/.goal-list/.goal-item --- */
.phrase-section { margin-bottom: 2rem; }
.phrase-section:last-child { margin-bottom: 0; }

/* --- Coaches (FÁZA C) -- assigned list reuses .goal-list/.goal-item/.goal-tag;
   the picker reuses .search-form/.field. --- */
.coach-picker { margin-top: 1.4rem; }
.empty-inline { color: var(--muted); margin: 0.4rem 0; }

/* --- "My players" highlighted everywhere (managed strong, watched subtle) --- */
a.is-mine, .is-mine { font-weight: 700; color: var(--accent-deep); }
a.is-watched, .is-watched { text-decoration: underline dotted var(--brand-line); text-underline-offset: 3px; }
tr.row-mine { background: var(--accent-tint); }
tr.row-mine > td { box-shadow: inset 0 0 0 0 transparent; }
tr.row-watched { background: color-mix(in srgb, var(--brand-tint) 45%, transparent); }

/* --- Player-card tabs --- */
/* Two-tier nav (R.3): tier-1 SECTION bar uses the shared `.segmented` control,
   tier-2 SUB-tab bar uses the shared `.pill-nav` control (see "DESIGN SYSTEM
   (UX2)" at the end of this file for their base rules + the [aria-selected]
   active-state additions, since public/js/modules/tabs.js drives these via
   role/aria/id attributes only, never a CSS class). #}
.tabpanel[hidden] { display: none; }
/* Sub-tab bar spacing under the section bar (the shared .pill-nav rule has no
   opinion on vertical rhythm between the two tiers or before the panels). */
[id^="subtabs-"] { margin: 0.6rem 0 1.25rem; }
/* Won/lost rows in the player's match history. Wins are emphasised (tinted row
   + green bold score) so they stand out at a glance; losses stay quiet. */
tr.match-won { background: rgba(12, 107, 82, 0.06); }
tr.match-won > td:first-child { box-shadow: inset 4px 0 0 var(--brand); }
tr.match-won .match-score { color: var(--brand-deep); font-weight: 700; }
tr.match-lost > td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
tr.match-lost .match-score { color: var(--muted); }
tr[data-match][hidden] { display: none; }

/* Planned (future, not played yet): calm blue -- tinted row + blue rail, never
   the red/amber of a lost/undecided match. */
tr.match-planned { background: rgba(59, 115, 196, 0.07); }
tr.match-planned > td:first-child { box-shadow: inset 4px 0 0 #3b73c4; }
.match-planned-tag {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.02rem 0.4rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #26507f;
    background: rgba(59, 115, 196, 0.14);
    border: 1px solid rgba(59, 115, 196, 0.45);
    white-space: nowrap;
}

/* Undecided (no winner yet -- a data gap): amber marker so they're findable. */
tr.match-undecided > td:first-child { box-shadow: inset 3px 0 0 #d19a2a; }
.match-undecided-tag {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.02rem 0.4rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #8a5a00;
    background: rgba(209, 154, 42, 0.16);
    border: 1px solid rgba(209, 154, 42, 0.5);
    cursor: help;
    white-space: nowrap;
}

/* Consolation ("útecha") round marker: a neutral tag in the round column so a
   consolation game isn't mistaken for a main-draw final (both are round 2). */
.tag-consolation {
    display: inline-block;
    padding: 0.02rem 0.4rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #5a4b7a;
    background: rgba(120, 92, 170, 0.14);
    border: 1px solid rgba(120, 92, 170, 0.42);
    white-space: nowrap;
}

/* Podium finish (1st-3rd) -- the headline of a youth event, so spotlighted very
   prominently in both the match list and the tournament list: a medal chip, a
   soft full-row tint, and a thick medal-coloured bar on the leading cell that
   wins over the win/loss bar (a medal is the bigger story). */
.podium-chip {
    display: inline-block;
    margin-right: 0.35rem;
    padding: 0.06rem 0.5rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    white-space: nowrap;
    vertical-align: middle;
}
.podium-chip--1 { color: #7a5c00; background: rgba(212, 175, 55, 0.20); border: 1px solid rgba(212, 175, 55, 0.7); }
.podium-chip--2 { color: #475569; background: rgba(148, 163, 184, 0.24); border: 1px solid rgba(148, 163, 184, 0.75); }
.podium-chip--3 { color: #7c4a1e; background: rgba(176, 120, 70, 0.20); border: 1px solid rgba(176, 120, 70, 0.65); }

tr.match-podium--1 > td, tr.podium-row--1 > td { background: rgba(212, 175, 55, 0.10); }
tr.match-podium--2 > td, tr.podium-row--2 > td { background: rgba(148, 163, 184, 0.12); }
tr.match-podium--3 > td, tr.podium-row--3 > td { background: rgba(176, 120, 70, 0.10); }
tr.match-podium--1 > td:first-child, tr.podium-row--1 > td:first-child { box-shadow: inset 5px 0 0 #d4af37 !important; }
tr.match-podium--2 > td:first-child, tr.podium-row--2 > td:first-child { box-shadow: inset 5px 0 0 #94a3b8 !important; }
tr.match-podium--3 > td:first-child, tr.podium-row--3 > td:first-child { box-shadow: inset 5px 0 0 #b07846 !important; }

/* --- Team encounter (družstvá) detail --- */
.te-scoreboard {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    flex-wrap: wrap;
    margin: 0.6rem 0 0.9rem;
}
.te-team {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ink);
}
.te-team--win { font-weight: 800; color: var(--brand-deep); }
.te-vs {
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    padding: 0.1rem 0.7rem;
    border-radius: 8px;
    background: var(--brand-tint);
    color: var(--brand-deep);
    border: 1px solid var(--brand-line);
    font-variant-numeric: tabular-nums;
}
.te-note {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1rem;
    padding: 0.6rem 0.9rem;
    font-size: 0.85rem;
    color: var(--muted);
    background: var(--surface-2);
    border: 1px dashed var(--brand-line);
    border-radius: 8px;
}
.te-note__icon { width: 17px; height: 17px; flex: none; }
.te-table td, .te-table th { vertical-align: top; }
.te-side--win { font-weight: 700; }
tr.te-row--home > td:first-child { box-shadow: inset 3px 0 0 var(--brand); }
tr.te-row--away > td:last-child { box-shadow: inset -3px 0 0 var(--brand); }
.te-table tr.te-row--home,
.te-table tr.te-row--away { background: rgba(12, 107, 82, 0.03); }

/* --- Match-list filters --- */
.match-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.75rem;
    align-items: flex-start;
    margin: 0 0 1rem;
    padding: 0.85rem 1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
}
.match-filters__group { border: 0; margin: 0; padding: 0; min-width: 0; }
.match-filters__group legend {
    padding: 0;
    margin-bottom: 0.4rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
}
.match-filters__chk {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    margin: 0 0.9rem 0.25rem 0;
    font-size: 0.86rem;
    cursor: pointer;
    white-space: nowrap;
}
.match-filters__chk input { cursor: pointer; }
.match-filters__partners { max-width: 34rem; }
.match-filters__count {
    width: 100%;
    margin: 0.1rem 0 0;
    font-size: 0.8rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

/* --- Ranking season header: dates + winter/summer halves --- */
.rank-season .season-title { font-weight: 700; }
.rank-season .season-dates { margin-left: 0.6rem; font-weight: 400; color: var(--muted); font-size: 0.85em; }
.season-half { margin-left: 0.5rem; font-size: 0.72em; font-weight: 700; padding: 0.05em 0.5em; border-radius: 999px; white-space: nowrap; }
.season-half--winter { background: #e7eef5; color: #2b5678; }
.season-half--summer { background: var(--accent-tint); color: var(--accent-deep); }

/* --- Results by season (detail_body) --- */
.results-table .pts { font-weight: 700; }
.results-table .rnd { font-size: 0.75em; color: var(--muted); }
.results-table tr.is-team { background: color-mix(in srgb, var(--brand-tint) 40%, transparent); }
.team-badge { font-size: 0.7em; font-weight: 700; text-transform: uppercase; color: var(--brand-deep); background: var(--brand-tint); padding: 0 0.35em; border-radius: 4px; margin-left: 0.35em; }
.type-badge { display: inline-block; font-size: 0.72em; text-transform: uppercase; letter-spacing: 0.03em; padding: 0.05em 0.55em; border-radius: 999px; background: var(--brand-tint); color: var(--brand-deep); border: 1px solid var(--brand-line); }
.type-badge--loan { background: var(--accent-tint); color: var(--accent-deep); border-color: var(--accent-line); }
.type-badge--active { background: var(--ok-tint); color: var(--ok); border-color: var(--brand-line); }
.type-badge--inactive { background: var(--danger-tint); color: var(--danger); border-color: var(--danger-line); }

/* --- Small inline category chip in the event breakdown --- */
.chip--sm { font-size: 0.72em; padding: 0.05em 0.5em; }

/* --- Champions on the tournament detail --- */
.champion { font-weight: 700; }
.champion-icon { width: 16px; height: 16px; color: var(--accent); margin-right: 0.35rem; vertical-align: -3px; }

/* --- Doubles partner line under the opponent in a match row --- */
.match-partner { font-size: 0.8em; color: var(--muted); margin-top: 0.15rem; }
.match-points { font-size: 0.72em; color: var(--accent-deep); margin-top: 0.1rem; }

/* --- Ranking (OR) badge next to a player name --- */
.rank-badge { display: inline-flex; align-items: baseline; gap: 0.28em; font-size: 0.72em; font-weight: 600; line-height: 1; padding: 0.18em 0.5em; border-radius: 999px; background: var(--brand-tint); color: var(--brand-deep); border: 1px solid var(--brand-line); vertical-align: middle; white-space: nowrap; }
.rank-badge__label { font-size: 0.85em; letter-spacing: 0.04em; opacity: 0.75; }
.rank-badge__prev { opacity: 0.6; }
.rank-badge__arr { opacity: 0.5; }
.rank-badge__cur { font-weight: 700; }
/* Elo badge -- like the OR badge but in the accent hue so form (Elo) reads apart
   from the official ranking sitting next to it. */
.elo-badge { display: inline-flex; align-items: baseline; gap: 0.3em; font-size: 0.72em; font-weight: 600; line-height: 1; padding: 0.18em 0.5em; border-radius: 999px; background: var(--accent-tint); color: var(--accent-deep); border: 1px solid var(--accent-line); vertical-align: middle; white-space: nowrap; }
.elo-badge__label { font-size: 0.85em; letter-spacing: 0.04em; opacity: 0.75; }
.elo-badge__val { font-weight: 700; }
/* An unrated player counted as 0 for draw win-odds: muted, neutral, so it doesn't
   read as a real rating. */
.elo-badge.is-zero { background: var(--surface-2); color: var(--muted); border-color: var(--line); }
.bracket-slot .elo-badge { flex: none; }
/* The E / EE / STR trio next to a name (badge.elo() macro): a small inline
   group so the three pills sit with a consistent gap, wherever they land. */
.elo-badge-group { display: inline-flex; align-items: baseline; gap: 0.25em; vertical-align: middle; }
.bracket-slot .elo-badge-group { flex: none; }
/* EE (effective/form-adjusted Elo) -- court-green tint, distinct from the
   career "E" badge's clay hue. STR (sila hráča) -- a third, mustard tint, so
   all three read apart from each other at a glance. */
.elo-badge--ee { background: var(--brand-tint); color: var(--brand-deep); border-color: var(--brand-line); }
.elo-badge--str { background: var(--warn-tint); color: var(--warn); border-color: var(--warn-line); }

/* Elo change from a result: +N green up, -N red down. */
.elo-delta { display: inline-block; font-size: 0.72em; font-weight: 700; line-height: 1; padding: 0.16em 0.42em; border-radius: 6px; vertical-align: middle; white-space: nowrap; font-variant-numeric: tabular-nums; }
.elo-delta.is-up { color: #0c6b52; background: rgba(12, 107, 82, 0.12); }
.elo-delta.is-down { color: #b4453a; background: rgba(180, 69, 58, 0.12); }
.elo-delta.is-flat { color: var(--muted); background: rgba(95, 107, 100, 0.1); }
.elo-delta-wrap { margin-left: 0.35rem; }

/* Draw-prediction win probability for a followed player (Elo-based), a small bar
   inside the bracket box. */
.bracket-winprob { position: relative; margin: 0.15rem 0.5rem; height: 0.95rem; border-radius: 5px; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; }
.bracket-winprob__fill { position: absolute; top: 0; left: 0; bottom: 0; }
.bracket-winprob__fill.is-fav { background: rgba(12, 107, 82, 0.28); }
.bracket-winprob__fill.is-dog { background: rgba(180, 69, 58, 0.22); }
.bracket-winprob__txt { position: relative; z-index: 1; display: block; text-align: center; line-height: 0.95rem; font-size: 0.62rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }

/* Per-player Elo win chance on a real, still-unplayed match (both opponents
   known): a small progress bar UNDER each name whose fill is proportional to that
   side's chance (fav = ahead green, dog = behind red). Each player gets their own
   bar under their own name; the two fills sum to 100%. Full-width so it sits on
   its own line beneath the name, which keeps full width above. */
.bracket-slot-winprob { position: relative; flex-basis: 100%; height: 0.85rem; border-radius: 4px; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; }
.bracket-slot-winprob__fill { position: absolute; top: 0; left: 0; bottom: 0; }
.bracket-slot-winprob__fill.is-fav { background: rgba(12, 107, 82, 0.28); }
.bracket-slot-winprob__fill.is-dog { background: rgba(180, 69, 58, 0.22); }
.bracket-slot-winprob__txt { position: relative; z-index: 1; display: block; text-align: right; padding-right: 0.35rem; line-height: 0.85rem; font-size: 0.58rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }

/* Elo-over-time career chart on the player card. */
.elo-chart { position: relative; margin: 0 0 1.5rem; padding: 0.9rem 1rem 0.6rem; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent, #b5533a); border-radius: var(--radius, 12px); }
.elo-chart__cap { font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin-bottom: 0.35rem; }
.elo-chart canvas { display: block; width: 100%; height: 220px; cursor: crosshair; }
.elo-chart__tip { position: absolute; transform: translate(-50%, -100%); pointer-events: none; background: var(--ink); color: #fff; font-size: 0.72rem; line-height: 1.35; padding: 0.4rem 0.55rem; border-radius: 8px; white-space: nowrap; box-shadow: 0 6px 18px -8px rgba(0,0,0,0.5); z-index: 3; }
.elo-chart__tip-ev { opacity: 0.7; }

/* Multi-player Elo graph page. */
.elo-graph-page { max-width: 60rem; }
.elo-graph__adhoc { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin: 0.75rem 0 0; padding: 0.6rem 0.85rem; background: var(--accent-tint, rgba(181,83,58,0.08)); border: 1px solid var(--accent-line, rgba(181,83,58,0.25)); border-radius: var(--radius, 10px); font-size: 0.88rem; }
.elo-graph__adhoc span { color: var(--ink); }
.elo-group-btn { white-space: nowrap; }
.elo-graph__search { display: flex; gap: 0.5rem; margin: 1rem 0; max-width: 34rem; }
.elo-graph__search input[type="search"] { flex: 1; padding: 0.5rem 0.7rem; border: 1px solid var(--line); border-radius: var(--radius, 10px); font-size: 0.95rem; }
.elo-graph__candidates { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.elo-graph__candidates li { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.3rem 0.3rem 0.7rem; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; font-size: 0.85rem; }
.elo-graph__added { color: var(--muted); font-size: 0.8rem; padding-right: 0.5rem; }
.elo-graph__legend { list-style: none; padding: 0; margin: 1.25rem 0 0.5rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; }
.elo-legend { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.88rem; padding: 0.15rem 0.5rem 0.15rem 0.35rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.elo-legend.is-mine { border-color: var(--accent, #b5533a); box-shadow: inset 0 0 0 1px var(--accent, #b5533a); }
.elo-legend.is-watched { border-color: var(--brand-line); }
.elo-legend__dot { width: 0.7rem; height: 0.7rem; border-radius: 50%; flex: none; }
.elo-legend__elo { font-weight: 700; }
.elo-legend__n { color: var(--muted); font-size: 0.8rem; }
.elo-legend__x { margin-left: 0.15rem; color: var(--muted); text-decoration: none; font-weight: 700; padding: 0 0.25rem; border-radius: 6px; }
.elo-legend__x:hover { background: var(--danger-tint, rgba(180,69,58,0.12)); color: var(--danger, #b4453a); }
/* Head-to-head icon (a match-count badge linking to the h2h record) */
.h2h-icon { display: inline-flex; align-items: center; justify-content: center; min-width: 1.15rem; height: 1.15rem; padding: 0 0.3rem; margin-left: 0.3rem; font-size: 0.72rem; font-weight: 700; line-height: 1; color: var(--accent-deep, #b5533a); background: var(--accent-tint, rgba(181,83,58,0.12)); border: 1px solid var(--accent-line, rgba(181,83,58,0.3)); border-radius: 999px; text-decoration: none; vertical-align: middle; }
.h2h-icon:hover { background: var(--accent, #b5533a); color: #fff; }

/* Career analysis panel */
.career-signals { list-style: none; padding: 0; margin: 0 0 1.25rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.career-signal { font-size: 0.9rem; font-weight: 600; padding: 0.35rem 0.75rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); }
.career-signal--rising { color: var(--good, #1f7a4d); border-color: var(--good-line, rgba(31,122,77,0.35)); background: var(--good-tint, rgba(31,122,77,0.08)); }
.career-signal--falling { color: var(--danger, #b4453a); border-color: var(--danger-line, rgba(180,69,58,0.35)); background: var(--danger-tint, rgba(180,69,58,0.08)); }
.career-signal--tough { color: var(--accent-deep, #b5533a); border-color: var(--accent-line, rgba(181,83,58,0.3)); background: var(--accent-tint, rgba(181,83,58,0.08)); }
.career-signal--fighter { color: var(--ink); }
.career-profile { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; margin: 0 0 1.25rem; font-size: 0.95rem; }
.career-stat strong { font-size: 1.1rem; }
.career-head { font-size: 1rem; margin: 1.5rem 0 0.5rem; }
.career-table { width: 100%; }
.career-table td, .career-table th { padding: 0.4rem 0.6rem; }

/* Multiple action forms side-by-side in a table cell (e.g. admin sport config:
   toggle-active + delete next to each other instead of stacked). */
.row-actions { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.row-actions form { margin: 0; display: flex; }

/* Inline weight-edit form in a table cell (admin sport config indicators). */
.weight-form { display: flex; align-items: center; gap: 0.4rem; margin: 0; justify-content: flex-end; }
.weight-form__input { width: 5rem; padding: 0.4rem 0.5rem; }
.career-note { font-size: 0.85rem; margin: 0.4rem 0 0; }
.career-bestwins { list-style: none; padding: 0; margin: 0.25rem 0 0; display: flex; flex-direction: column; gap: 0.4rem; }
.career-bestwins li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 0.9rem; padding: 0.4rem 0.6rem; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.career-bestwins__opp { font-weight: 600; }
.career-bestwins__gap { color: var(--good, #1f7a4d); font-weight: 600; }
.career-bestwins__score { color: var(--muted); }
.career-bestwins__date { color: var(--muted); font-size: 0.85rem; margin-left: auto; }
.career-disclaimer { font-size: 0.82rem; margin-top: 1.5rem; }

.elo-multi { margin: 0.5rem 0 1.5rem; padding: 0.9rem 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius, 12px); }
.elo-multi__settings { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.75rem; margin-bottom: 0.75rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--line); }
.elo-multi__settings-group { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.15rem 0.75rem; border: 0; margin: 0; padding: 0; }
.elo-multi__settings-group legend { font-size: 0.72rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; padding: 0; margin-right: 0.4rem; }
.elo-multi__settings-group label { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.85rem; cursor: pointer; }
.elo-multi__settings-hint { flex-basis: 100%; font-size: 0.76rem; margin: 0; }
.elo-multi__cap { font-size: 0.8rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.35rem; }
.elo-multi__cap-hint { font-weight: 400; text-transform: none; letter-spacing: 0; opacity: 0.8; }
.elo-multi__plot { position: relative; }
.elo-multi__plot canvas { display: block; width: 100%; cursor: crosshair; }
.elo-multi__plot [data-elo-canvas] { height: 340px; }
.elo-multi__plot [data-elo-season-canvas] { height: 240px; }
.elo-multi__season { margin-top: 1.1rem; padding-top: 0.9rem; border-top: 1px solid var(--line); }
.elo-multi__season-item { margin-top: 0.9rem; }
.elo-multi__season-item:first-of-type { margin-top: 0.5rem; }
.elo-multi__season-label { font-size: 0.82rem; font-weight: 600; color: var(--ink); margin-bottom: 0.2rem; }
.elo-multi__season-now { font-size: 0.7rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent-deep, #b5533a); background: var(--accent-tint, rgba(181,83,58,0.12)); border-radius: 999px; padding: 0.05em 0.5em; margin-left: 0.3rem; vertical-align: middle; }
.season-live { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent-deep); background: var(--accent-tint); border: 1px solid var(--accent-line); border-radius: 999px; padding: 0.05em 0.5em; margin-left: 0.5rem; vertical-align: middle; }

/* --- Draw bracket (prediction + real) --- */
.bracket-head-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 1.4rem; }
.bracket-head-row .section-head { margin-top: 0; }
.pred-badge { display: inline-block; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; background: var(--accent-tint); color: var(--accent-deep); border: 1px solid var(--accent-line); border-radius: 999px; padding: 0.1em 0.6em; vertical-align: middle; }
.pred-note { color: var(--muted); font-size: 0.85rem; margin: 0.3rem 0 0.9rem; }

.bracket-wrap { padding-bottom: 0.5rem; overflow-x: auto; }
/* Fixed-width rounds + horizontal scroll: every column is wide enough for a name
   plus the E/EE/STR badges on ONE line, so boxes stay short and never overflow
   their cell into the neighbour (the old "shrink to fit" made narrow columns wrap
   badges onto many lines, inflating the box until boxes overlapped). The
   inter-round gap doubles as the connector width. */
.bracket { display: flex; gap: var(--bkt-gap); align-items: stretch; width: max-content; --bkt-gap: 1.4rem; }
.bracket-round { display: flex; flex-direction: column; flex: 0 0 14rem; min-width: 0; }
.bracket-round-head { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 0.4rem; text-align: center; }
.bracket-round-points { display: block; margin-top: 0.15rem; font-size: 0.62rem; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--accent-deep); }
.bracket-round-body { display: flex; flex-direction: column; justify-content: normal; flex: 1 1 auto; gap: 0; }
/* Each match sits in an equal-height cell (flex:1), vertically centred and taller
   than the box so first-round boxes keep clear air between them (no overlap).
   Equal cells + the same total round height mean a round-(r+1) match centres on
   the midpoint of its two feeders -- which is what lets the connectors line up. */
/* min-height must exceed the TALLEST box (two paired names + a ranking badge on
   its own line + the time/score footer row) so every centred box keeps clear air
   around it and unrelated matches never touch. Bumped to fit the footer that
   now also carries the scheduled time for followed/managed players' boxes. */
.bracket-cell { flex: 1 1 0; display: flex; flex-direction: column; justify-content: center; position: relative; min-height: 14rem; }
/* flex-shrink:0 is REQUIRED: overflow:hidden makes a flex item's automatic
   minimum size 0, so in an equal-height cell that is shorter than the content
   (e.g. when a pair carries a ranking badge on its own line) the box would be
   squashed and the score row clipped. Not shrinking keeps the score visible. */
.bracket-match { border: 1px solid var(--brand-line); border-radius: 8px; overflow: hidden; background: var(--surface); flex-shrink: 0; margin-block: 1rem; }
/* A match that is ready to be played next (both players known, not yet decided)
   -- e.g. the pre-round contests -- gets an accent frame so it stands out among
   the many byes and doesn't get lost. */
.bracket-match.is-ready { border-color: var(--accent-line); box-shadow: 0 0 0 1px var(--accent-line); }

/* Connector lines. Half the inter-round gap on each side (var(--bkt-gap)/2) meets
   in the middle. A horizontal stub leaves every cell (except the final round) and
   enters every cell (except the first); a vertical line joins each pair. */
.bracket-round:not(:last-child) .bracket-cell::after,
.bracket-round:not(:first-child) .bracket-cell::before {
    content: ''; position: absolute; width: calc(var(--bkt-gap) / 2); top: 50%; border-top: 1px solid var(--brand-line);
}
.bracket-round:not(:last-child) .bracket-cell::after { left: 100%; }
.bracket-round:not(:first-child) .bracket-cell::before { right: 100%; }
/* Top of a pair: stub at the cell centre + vertical line down to the pair midpoint. */
.bracket-round:not(:last-child) .bracket-cell:nth-child(odd)::after {
    top: 50%; bottom: 0; border-right: 1px solid var(--brand-line);
}
/* Bottom of a pair: stub at the cell centre (box bottom) + vertical line up to the midpoint. */
.bracket-round:not(:last-child) .bracket-cell:nth-child(even)::after {
    top: 0; bottom: 50%; border-top: 0; border-bottom: 1px solid var(--brand-line); border-right: 1px solid var(--brand-line);
}
.bracket-slot { display: flex; align-items: center; flex-wrap: wrap; gap: 0.15rem 0.4rem; padding: 0.35rem 0.5rem; font-size: 0.85rem; min-height: 1.95rem; border-top: 1px solid var(--line); }
/* Long names truncate (full name in a hover title) so nothing spills out; the
   ranking badge drops to its own line under the name to give the name full width. */
.bracket-slot .match-side { flex-basis: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bracket-slot .rank-badge { flex: none; margin-left: 0; }
/* Compact ratings in the cramped bracket: smaller pills + tight group so the
   whole E/EE/STR trio sits on ONE line under the name in a 14rem column. */
.bracket-slot .elo-badge-group { gap: 0.12em; flex: none; }
.bracket-slot .elo-badge { font-size: 0.58rem; padding: 0 0.24em; border-radius: 3px; }
.bracket-slot .elo-badge__label { font-size: 0.82em; }
.bracket-slot:first-child { border-top: 0; }
.bracket-slot.is-winner { font-weight: 700; background: var(--brand-tint); }
.bracket-slot.is-bye { color: var(--muted); font-style: italic; }
/* A box still waiting for a result shows a muted hint of where its player comes
   from -- one line, truncated (full text in the hover title) so it never wraps. */
.bracket-slot.is-empty { display: block; min-height: 1.95rem; line-height: 1.25rem; padding: 0.35rem 0.5rem; color: var(--muted); font-style: italic; font-size: 0.78em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bracket-seed { flex: none; font-size: 0.66rem; color: var(--muted); min-width: 1.3em; text-align: center; border: 1px solid var(--line); border-radius: 4px; padding: 0 0.2em; }
/* Footer row of a bracket box: the scheduled time (left, subtle metadata with a
   clock glyph) and the score (right, emphasised). One row so it never inflates
   the box height -- which is what deformed the taller followed/managed boxes. */
.bracket-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 0.4rem; padding: 0.15rem 0.5rem; border-top: 1px solid var(--line); background: var(--surface-2); }
.bracket-foot__time { font-size: 0.66rem; color: var(--muted); letter-spacing: 0.01em; white-space: nowrap; font-weight: 700; }
.bracket-foot__time::before { content: '\1F550'; margin-right: 0.2rem; opacity: 0.7; }
/* Score stands out -- bolder and darker than the metadata around it. */
.bracket-foot__score { margin-left: auto; font-size: 0.8rem; font-weight: 700; color: var(--ink); white-space: nowrap; }
/* A forecast tip score (not a real result): muted + italic so it never reads as a fact. */
.bracket-foot__score.is-tip { font-weight: 600; font-style: italic; color: var(--muted); }
/* Responsive: on narrow screens shrink the gap, tighten the boxes and drop the
   ranking badge so the whole draw still fits the width without a scrollbar. */
@media (max-width: 760px) {
    .bracket { --bkt-gap: 0.75rem; }
    .bracket-round { flex-basis: 12rem; }
    .bracket-slot { font-size: 0.75rem; padding: 0.3rem 0.35rem; gap: 0.25rem; }
    .bracket-slot .rank-badge { display: none; }
    .bracket-seed { font-size: 0.6rem; min-width: 1.1em; }
}
@media (max-width: 460px) {
    .bracket { --bkt-gap: 0.45rem; }
    .bracket-round { flex-basis: 10.5rem; }
    .bracket-slot { font-size: 0.68rem; padding: 0.28rem 0.28rem; }
    .bracket-seed { display: none; }
}

.pred-prob { margin-top: 1.3rem; }
.pred-prob-foot { color: var(--muted); font-size: 0.82rem; margin: 0.2rem 0 0.9rem; }
.pred-prob-grid { display: flex; flex-wrap: wrap; gap: 1.4rem; align-items: flex-start; }
.pred-prob-player { flex: 1 1 260px; max-width: 360px; }
.pred-prob-title { font-size: 0.95rem; margin: 0 0 0.4rem; }
.pred-prob-title.is-mine { color: var(--accent-deep); }
.pred-prob-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.pred-prob-table th, .pred-prob-table td { text-align: left; padding: 0.3rem 0.5rem; border-bottom: 1px solid var(--line); }
.pred-prob-table th { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 600; }
.pred-prob-table td.num, .pred-prob-table th.num { text-align: right; }
.pred-prob-table tbody tr:first-child td { font-weight: 700; color: var(--brand-deep); }

/* --- Chance square: opponent difficulty vs the card's player (E[EE] based) --- */
.pl-chance {
    display: inline-block;
    width: 0.62rem;
    height: 0.62rem;
    border-radius: 2px;
    margin-right: 0.32rem;
    vertical-align: baseline;
    border: 1px solid rgba(0, 0, 0, 0.18);
    cursor: help;
}
.pl-chance--easy { background: var(--ok); }
.pl-chance--even { background: var(--warn); }
.pl-chance--hard { background: var(--danger); }

/* --- Forecast bracket: collapsible projected-winners draw under the real one --- */
.forecast-details { margin-top: 1.2rem; border-top: 1px solid var(--brand-line); padding-top: 0.6rem; }
.forecast-summary { cursor: pointer; font-weight: 700; color: var(--brand-deep); padding: 0.4rem 0; user-select: none; list-style-position: inside; }
.forecast-summary:hover { color: var(--brand); }
.forecast-details[open] .forecast-summary { margin-bottom: 0.4rem; }

/* --- Field outlook: "sila poľa a moje šance" summary above the R1 odds --- */
.field-outlook {
    border: 1px solid var(--brand-line);
    background: var(--brand-tint);
    border-radius: 8px;
    padding: 0.6rem 0.7rem;
    margin-bottom: 0.8rem;
}
.field-outlook .fo-top { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.field-outlook .fo-first { display: flex; align-items: baseline; gap: 0.4rem; }
.field-outlook .fo-first-val { font-size: 1.35rem; font-weight: 800; color: var(--brand-deep); line-height: 1; }
.field-outlook .fo-first-lbl { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 600; }
.field-outlook .fo-seed {
    font-size: 0.72rem; font-weight: 700; padding: 0.12rem 0.45rem; border-radius: 999px;
    background: var(--surface); color: var(--muted); border: 1px solid var(--line); white-space: nowrap;
}
.field-outlook .fo-seed.is-seeded { background: var(--ok-tint); color: var(--ok); border-color: var(--brand-line); }
.field-outlook .fo-buckets { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.55rem 0 0.4rem; }
.field-outlook .fo-chip {
    font-size: 0.78rem; font-weight: 700; padding: 0.15rem 0.5rem; border-radius: 6px; border: 1px solid transparent;
}
.field-outlook .fo-easy { background: var(--ok-tint); color: var(--ok); border-color: var(--brand-line); }
.field-outlook .fo-even { background: var(--warn-tint); color: var(--warn); border-color: var(--warn-line); }
.field-outlook .fo-hard { background: var(--danger-tint); color: var(--danger); border-color: var(--danger-line); }
.field-outlook .fo-avg { font-size: 0.82rem; color: var(--ink, var(--brand-deep)); }
.field-outlook .fo-avg .tnum { font-weight: 700; }
.field-outlook .fo-note { font-size: 0.72rem; color: var(--muted); margin: 0.4rem 0 0; line-height: 1.35; }

/* --- Player calendar (D4): unified trainings/matches/tournaments timeline --- */
.calendar-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.calendar-month-head {
    margin: 1.1rem 0 0.2rem;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
}
.calendar-month-head:first-child { margin-top: 0; }
.calendar-item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.6rem;
    padding: 0.55rem 0.8rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
}
.calendar-item--won { border-left: 3px solid var(--brand); }
.calendar-item--lost { border-left: 3px solid var(--accent); }
.calendar-item__date { flex: none; font-weight: 600; color: var(--muted); font-size: 0.85rem; }
.calendar-item__main { flex: 1 1 14rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; min-width: 0; }
.calendar-item__title { font-weight: 600; }
.calendar-item__detail { color: var(--muted); font-size: 0.9rem; }
.cal-type {
    flex: none;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    white-space: nowrap;
}
.cal-type--training { background: var(--brand-tint); color: var(--brand-deep); border: 1px solid var(--brand-line); }
.cal-type--match { background: var(--accent-tint); color: var(--accent-deep); border: 1px solid var(--accent-line); }
.cal-type--tournament { background: var(--bg); color: var(--muted); border: 1px solid var(--line); }
.cal-type--goal { background: #eef6ff; color: #1c5d99; border: 1px solid #cfe3f7; }
.cal-type--injury { background: #fdecea; color: #b42318; border: 1px solid #f0b4ac; }

/* Calendar type-filter chips. */
.cal-filter { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 1rem; }
.cal-filter__chip { cursor: pointer; font-size: 0.75rem; font-weight: 600; padding: 0.2rem 0.6rem; border-radius: 999px; }
.cal-filter__chip[aria-pressed="false"] { opacity: 0.4; text-decoration: line-through; }
.cal-future-tag {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--brand-deep);
    background: var(--brand-tint);
    border-radius: 999px;
    padding: 0.1em 0.5em;
    vertical-align: middle;
}

/* ===== DESIGN SYSTEM (UX2) =====
 * "Light energetic": white/tinted cards on the warm paper background, bold
 * tabular numbers, a vivid clay hero gradient used sparingly, soft lifted
 * shadows. These are the base building blocks the rest of the UX2 refactor
 * (dashboard, player card, tournament bracket, ...) composes with.
 *
 * Preview every component live at /dev/styleguide (dev-only).
 *
 * Note on .chip: a generic `.chip` (category/nav pill) already exists above
 * (~line 556) and is used across docs/player pages. We deliberately do NOT
 * redefine its base rule here (that would silently reflow every existing
 * chip on the site) — we only ADD the status-color modifiers below, which
 * layer onto the existing base.
 */

/* --- stat-card / stat-grid ---------------------------------------------- */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 0.7rem;
}
.stat-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    padding: 0.7rem 0.85rem;
    box-shadow: var(--shadow-card);
}
.stat-card--accent {
    background: var(--accent-tint);
    border-color: var(--accent-line);
}
.stat-card--hero {
    background: linear-gradient(120deg, var(--brand), #0f8a67);
    border: none;
    color: #fff;
}
.stat-card__label {
    display: block;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    color: var(--muted);
}
.stat-card--hero .stat-card__label { color: rgba(255, 255, 255, 0.85); }
.stat-card__value {
    display: block;
    margin-top: 0.15rem;
    font-size: 1.4rem;
    font-weight: var(--num);
    letter-spacing: -0.02em;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}
.stat-card__sub {
    display: block;
    margin-top: 0.1rem;
    font-size: 0.68rem;
    color: var(--muted);
}
.stat-card--hero .stat-card__sub { color: rgba(255, 255, 255, 0.85); }
/* A card whose "value" is a short label/name rather than a number (e.g. the
   player card's "next tournament" hero) -- smaller, normal tabular-nums off,
   wraps instead of overflowing a long tournament name. */
.stat-card__value--text {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: normal;
    font-variant-numeric: normal;
    overflow-wrap: break-word;
}
.stat-card--hero .stat-card__value--text a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.stat-card--hero .stat-card__value--text a:hover { color: #fff; opacity: 0.85; }
/* Calm/positive reading for a "good" count (e.g. 0 active injuries) -- the
   number itself still says "0", this is only a supportive color cue. */
.stat-card__value--ok { color: var(--brand); }

/* --- trend indicators ---------------------------------------------------- */
.trend-up { color: var(--brand); font-weight: 700; white-space: nowrap; }
.trend-down { color: var(--accent-deep); font-weight: 700; white-space: nowrap; }

/* --- pill-nav -------------------------------------------------------------
 * A row of pill links/buttons (e.g. player-card season switcher).
 */
.pill-nav { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.pill-nav__item {
    display: inline-block;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
}
.pill-nav__item:hover { color: var(--brand-deep); }
.pill-nav__item.is-active { background: var(--brand); color: #fff; font-weight: 700; }
/* A JS-driven tablist (e.g. public/js/modules/tabs.js) toggles the ARIA state,
   not a CSS class -- so the active pill/segment must also react to
   [aria-selected="true"], mirroring .is-active above 1:1. */
.pill-nav__item[aria-selected="true"] { background: var(--brand); color: #fff; font-weight: 700; }
.pill-nav[hidden] { display: none; }

/* --- segmented control ----------------------------------------------------
 * A compact tab switcher (e.g. "Prehľad / Výsledky / Denník").
 */
.segmented {
    display: inline-flex;
    gap: 0.15rem;
    background: var(--surface-2);
    border-radius: 10px;
    padding: 0.2rem;
}
.segmented__item {
    padding: 0.3rem 0.8rem;
    border-radius: 8px;
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 600;
    background: transparent;
    border: none;
    text-decoration: none;
    cursor: pointer;
}
.segmented__item.is-active {
    background: var(--surface);
    color: var(--brand);
    font-weight: 700;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
/* See .pill-nav__item[aria-selected] above: same JS-driven-ARIA reasoning. */
.segmented__item[aria-selected="true"] {
    background: var(--surface);
    color: var(--brand);
    font-weight: 700;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

/* --- status chips -----------------------------------------------------
 * Color modifiers only — layer onto the existing base `.chip` rule.
 */
.chip--win { color: var(--brand-deep); background: var(--brand-tint); border-color: var(--brand-line); }
.chip--loss { color: var(--accent-deep); background: var(--accent-tint); border-color: var(--accent-line); }
.chip--info { color: var(--brand-deep); background: var(--surface-2); border-color: var(--line); }
.chip--warn { color: var(--warn); background: var(--warn-tint); border-color: var(--warn-line); }

/* --- focus-visible (a11y): interactive design-system pills/segments/cards */
.pill-nav__item:focus-visible,
.segmented__item:focus-visible,
.stat-card:focus-visible {
    outline: none;
    box-shadow: var(--focus);
}

/* --- micro-interactions: the "energetic" feel, opt-out via reduced-motion */
@media (prefers-reduced-motion: no-preference) {
    .stat-card,
    .pill-nav__item,
    .segmented__item {
        transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease, color 0.12s ease;
    }
    .stat-card:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -14px rgba(16, 36, 29, 0.3); }
}

/* ===== "Všetky turnaje" list: same-day zebra + upcoming|past divider + best hint ===== */
/* Zebra shading is per SAME-DAY GROUP (parity flips when the date changes),
   not per row, so tournaments on one day read as a single block. */
.ttrow--g1 > td { background: var(--surface-2); }
.ttrow--g0 > td { background: var(--surface); }
/* Thick dark-green divider before the first FINISHED tournament (list is upcoming-first). */
.ttrow--first-past > td { border-top: 5px solid var(--brand-deep); }
/* Within a day that has several tournaments, the best P(1. kolo) / E[body]
   is flagged red -- the "kam sa najviac oplatí ísť" hint. */
.tt-best { color: var(--danger); font-weight: 800; }
.tt-best .chip { background: var(--danger-tint); color: var(--danger); border-color: var(--danger-line); }

/* Hover on the tournament list must clearly differ from the darker zebra shade
   (--surface-2) -- use the green brand tint so a hovered row never blends in. */
.ttrow:hover > td { background: var(--brand-tint); }

/* ===== Match list: zebra by DATE GROUP (same-day matches share one shade) ===== */
/* The td background groups matches by day; result stays readable via the
   left-edge accent (td:first-child box-shadow) + coloured score chip + trophy,
   which draw on top of it. Distinct hover so a hovered row never blends in. */
tr.mgrp--0 > td { background: var(--surface); }
tr.mgrp--1 > td { background: var(--surface-2); }
tr[data-match]:hover > td { background: var(--brand-tint); }

/* --- Živý zápis zápasu (J.1-3): scoreboard + záznamový zoznam --- */
.record-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.record-item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    justify-content: space-between;
    padding: 0.8rem 1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 3px solid var(--line);
    border-radius: 10px;
}
.record-item--won { border-left-color: var(--brand); }
.record-item--lost { border-left-color: #d64545; }
.record-item--open { border-left-color: var(--muted); }
.record-item__main { min-width: 0; }
.record-item__head { margin: 0 0 0.35rem; display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.record-item__result { font-weight: 700; }
.record-item--won .record-item__result { color: var(--brand-deep); }
.record-item--lost .record-item__result { color: #b42318; }
.record-item__score { font-variant-numeric: tabular-nums; font-size: 1.05rem; font-weight: 600; letter-spacing: 0.02em; }
.record-item__meta { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; color: var(--muted); font-size: 0.82rem; }
.record-item__note { margin: 0.4rem 0 0; white-space: pre-wrap; color: var(--muted); font-size: 0.88rem; }
.record-item__actions { display: flex; align-items: center; gap: 0.4rem; flex: none; }
.record-item__actions form { margin: 0; display: flex; }

/* Scoreboard: full-width on-court UI, big tap targets. */
.scoreboard { max-width: 720px; margin: 0 auto; }
.scoreboard__title { margin: 0 0 0.3rem; }
.scoreboard__lede { color: var(--muted); margin: 0 0 1.2rem; }
.scoreboard__discipline { display: flex; flex-wrap: wrap; gap: 0.8rem 1.2rem; align-items: center; }
.scoreboard__discipline legend { width: 100%; }
.scoreboard__discipline label { display: inline-flex; align-items: center; gap: 0.35rem; }
.scoreboard__discipline input { width: auto; }
.field__hint { flex: 1 1 100%; margin: 0.2rem 0 0; color: var(--muted); font-size: 0.82rem; }

.scoreboard__display {
    text-align: center;
    padding: 1.2rem 1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    margin-bottom: 1rem;
}
.scoreboard__sets { font-variant-numeric: tabular-nums; font-size: 1.6rem; font-weight: 700; letter-spacing: 0.08em; min-height: 1.7rem; }
.scoreboard__game { font-variant-numeric: tabular-nums; font-size: 2.8rem; font-weight: 800; line-height: 1.1; }

.scoreboard__tap { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.tap-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    min-height: 40vh;
    padding: 1rem;
    border: 2px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
    cursor: pointer;
    font: inherit;
    transition: background 0.1s, transform 0.05s;
    -webkit-tap-highlight-color: transparent;
}
.tap-zone:active { transform: scale(0.98); }
.tap-zone--a { border-color: var(--brand); }
.tap-zone--a:active { background: color-mix(in srgb, var(--brand) 14%, var(--surface)); }
.tap-zone--b:active { background: var(--bg); }
.tap-zone__name { font-size: 1.15rem; font-weight: 700; text-align: center; }
.tap-zone__hint { font-size: 0.78rem; color: var(--muted); }

.scoreboard__controls { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 0.9rem; }
.scoreboard__status { color: var(--muted); font-variant-numeric: tabular-nums; }
.scoreboard__save { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.8rem; }
.scoreboard__result { font-size: 1.2rem; font-weight: 700; margin: 0; }
.scoreboard__result.is-won { color: var(--brand-deep); }
.scoreboard__result.is-lost { color: #b42318; }
.scoreboard__save-actions { display: flex; gap: 0.6rem; justify-content: flex-end; }
.scoreboard__finish-early { text-align: center; margin-top: 0.8rem; }

/* --- Živý zápas: court tracker (J.1-3) --- */
.tracker { max-width: 560px; margin: 0 auto; }
.tracker__title { margin: 0 0 0.3rem; }
.tracker__lede { color: var(--muted); margin: 0 0 1.2rem; }
.tracker__radios { display: flex; flex-wrap: wrap; gap: 0.5rem 1.1rem; align-items: center; }
.tracker__radios legend { width: 100%; margin-bottom: 0.2rem; }
.tracker__radios label { display: inline-flex; align-items: center; gap: 0.35rem; }
.tracker__radios input { width: auto; }

.tracker__scorebar {
    display: flex; align-items: baseline; justify-content: center; gap: 1rem;
    flex-wrap: wrap; padding: 0.6rem; margin-bottom: 0.6rem;
    background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
}
.tracker__sets { font-variant-numeric: tabular-nums; font-size: 1.3rem; font-weight: 700; letter-spacing: 0.06em; }
.tracker__game { font-variant-numeric: tabular-nums; font-size: 1.9rem; font-weight: 800; }
.tracker__serve { flex: 1 1 100%; text-align: center; color: var(--muted); font-size: 0.85rem; }

.tracker__court { position: relative; display: flex; flex-direction: column; align-items: center; }
.tracker__court canvas { display: block; border-radius: 8px; touch-action: manipulation; cursor: crosshair; }
.tracker__name {
    font-size: 0.9rem; font-weight: 600; color: var(--muted);
    padding: 0.15rem 0.3rem;
}
.tracker__name.is-serving { color: var(--brand-deep); font-weight: 800; }

.tracker__prompt {
    display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center;
    align-items: center; margin: 0.8rem 0; min-height: 2.6rem;
}
.tracker-hint { flex: 1 1 100%; text-align: center; margin: 0; color: var(--muted); font-size: 0.9rem; }
.tracker-btn {
    font: inherit; font-weight: 600; cursor: pointer;
    padding: 0.65rem 1rem; border-radius: 10px;
    border: 1px solid var(--line); background: var(--surface); color: var(--text);
    -webkit-tap-highlight-color: transparent;
}
.tracker-btn:active { transform: scale(0.97); }
.tracker-btn.is-a { border-color: var(--brand); color: var(--brand-deep); }
.tracker-btn.is-b { border-color: #c98a24; color: #a5661a; }
.tracker-btn.is-accent { background: #ffd60a; border-color: #e6bf00; color: #3a2e00; }
.tracker-btn.is-ghost { background: transparent; color: var(--muted); }

.tracker__controls { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; margin-top: 0.4rem; }
.tracker__save { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.8rem; }
/* display:flex would defeat the [hidden] attribute -- the save form must stay
   invisible until the match is finished. */
.tracker__save[hidden] { display: none; }
.tracker__result { font-size: 1.2rem; font-weight: 700; margin: 0; }
.tracker__result.is-won { color: var(--brand-deep); }
.tracker__result.is-lost { color: #b42318; }
.tracker__save-actions { display: flex; gap: 0.6rem; justify-content: flex-end; }

/* --- Živý zápas: pravidlá v setupe (#23) --- */
.tracker__rules { display: flex; flex-direction: column; gap: 0.55rem; }
.tracker__rule { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; }
.tracker__rule > span { color: var(--muted); font-size: 0.9rem; }
.tracker__rule select { width: auto; min-width: 12rem; }
.tracker__rule--check { justify-content: flex-start; }
.tracker__rule--check input { width: auto; }
.tracker__rules-label { flex: 1 1 100%; text-align: center; color: var(--muted); font-size: 0.76rem; letter-spacing: 0.02em; }

/* --- Detail zapísaného zápasu: hlavička, štatistiky, mapa dopadov (#22) --- */
.match-detail { display: flex; flex-direction: column; gap: 1.2rem; max-width: 760px; }
.match-detail__head { border-left: 5px solid var(--muted); }
.match-detail__head--won { border-left-color: var(--brand); }
.match-detail__head--lost { border-left-color: #d64545; }
.match-detail__result { margin: 0; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.82rem; color: var(--muted); }
.match-detail__head--won .match-detail__result { color: var(--brand-deep); }
.match-detail__head--lost .match-detail__result { color: #b42318; }
.match-detail__score { margin: 0.1rem 0 0.35rem; font-size: 2rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.match-detail__vs { margin: 0 0 0.6rem; }
.match-detail__vs-sep { color: var(--muted); margin: 0 0.35rem; }
.match-detail__meta { list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; margin: 0 0 0.5rem; padding: 0; color: var(--muted); font-size: 0.85rem; }
.match-detail__rules { margin: 0; color: var(--muted); font-size: 0.8rem; }
.match-detail__note { margin: 0.7rem 0 0; white-space: pre-wrap; }
.match-detail__actions { display: flex; gap: 0.6rem; align-items: center; margin-top: 1rem; }
.match-detail__actions form { margin: 0; }

.statcmp { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 0.9rem; }
.statcmp__head { display: flex; justify-content: space-between; font-size: 0.8rem; font-weight: 700; color: var(--muted); }
.statcmp__who--b { text-align: right; }
.statcmp__row { display: grid; grid-template-columns: 4.5rem 1fr 4.5rem; grid-template-areas: 'a label b' 'bar bar bar'; align-items: baseline; gap: 0.25rem 0.5rem; }
.statcmp__val { font-variant-numeric: tabular-nums; font-weight: 700; }
.statcmp__val--a { grid-area: a; }
.statcmp__val--b { grid-area: b; text-align: right; }
.statcmp__val.is-better { color: var(--brand-deep); }
.statcmp__val--b.is-better { color: #a5661a; }
.statcmp__label { grid-area: label; text-align: center; color: var(--muted); font-size: 0.85rem; }
.statcmp__bar { grid-area: bar; display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: var(--surface-2); }
.statcmp__bar-a { background: var(--brand); }
.statcmp__bar-b { background: #d9a441; }

.heatmap { display: flex; flex-direction: column; align-items: center; gap: 0.7rem; margin-top: 0.9rem; }
.heatmap__filters { display: flex; flex-wrap: wrap; gap: 0.35rem; justify-content: center; align-items: center; }
.heatmap__chip { background: var(--surface-2); color: var(--muted); border-color: var(--line); cursor: pointer; }
.heatmap__chip.is-active { background: var(--brand-tint); color: var(--brand-deep); border-color: var(--brand-line); }
.heatmap__sep { width: 1px; height: 1.1rem; background: var(--line); margin: 0 0.25rem; }
.heatmap__court canvas { display: block; border-radius: 8px; }
.heatmap__count { margin: 0; color: var(--muted); font-size: 0.85rem; }
.heatmap__legend { list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; justify-content: center; margin: 0; padding: 0; color: var(--muted); font-size: 0.8rem; }
.heatmap__legend li { display: inline-flex; align-items: center; gap: 0.35rem; }
.heatmap__dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

/* --- Kam ideme: miesto konania turnaja + jedlo v okolí --- */
.venue { margin-top: 0.4rem; }
/* Zbaliteľná sekcia: hlavička je summary, obsah sa načíta až po rozbalení. */
.venue__summary { list-style: none; cursor: pointer; }
.venue__summary::-webkit-details-marker { display: none; }
.venue__head { display: flex; align-items: center; gap: 0.45rem; }
.venue__head::after {
    content: '';
    width: 0.5em; height: 0.5em; margin-left: 0.1rem;
    border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
    transform: rotate(45deg) translate(-0.12em, -0.12em);
    transition: transform 0.15s ease;
}
.venue[open] .venue__head::after { transform: rotate(-135deg) translate(-0.05em, -0.05em); }
.venue__summary:hover .venue__head::after { border-color: var(--brand-deep); }
.venue__summary:focus-visible { box-shadow: var(--focus); border-radius: var(--radius); }
.venue__status { color: var(--muted); font-size: 0.9rem; margin: 0.4rem 0; }
.venue__address { margin: 0.5rem 0 0.7rem; font-weight: 600; }
.venue__note { color: var(--muted); font-size: 0.9rem; margin: 0.3rem 0; }
.venue__map { width: 100%; max-width: 720px; height: 320px; border: 1px solid var(--line); border-radius: var(--radius); display: block; }
.venue__links { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.7rem 0; }
.venue__sub { margin: 1.1rem 0 0.4rem; font-size: var(--step-0); }
.venue__eateries { list-style: none; margin: 0; padding: 0; max-width: 720px; }
.venue__eateries li {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.6rem;
    padding: 0.4rem 0; border-bottom: 1px solid var(--line);
}
.venue__eateries li:last-child { border-bottom: 0; }
.venue__kind, .venue__cuisine { color: var(--muted); font-size: 0.78rem; }
.venue__rating { display: inline-flex; align-items: baseline; gap: 0.25rem; }
.venue__stars { color: #d9a441; letter-spacing: -0.05em; font-size: 0.85rem; }
.venue__rating-value { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 0.82rem; }
.venue__rating-count { color: var(--muted); font-size: 0.75rem; }
.venue__source { color: var(--muted); font-size: 0.75rem; margin: 0.5rem 0 0; }
.venue__cuisine::before { content: '· '; }
.venue__dist { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--muted); font-size: 0.85rem; }

/* --- Súhrn zo zápisníka (agregát z court trackera) --- */
.recap { margin: 0.9rem 0 1.2rem; }
.recap__head { margin: 0 0 0.2rem; font-size: var(--step-0); }
.recap__lede { margin: 0 0 0.9rem; color: var(--muted); font-size: 0.85rem; }
.recap__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.7rem; }
.recap__tile {
    display: flex; flex-direction: column; gap: 0.1rem;
    background: var(--surface-2); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 0.6rem 0.75rem;
}
.recap__label { color: var(--muted); font-size: 0.76rem; line-height: 1.25; }
.recap__value { font-size: 1.35rem; font-weight: 800; font-variant-numeric: tabular-nums; }
/* Smer zmeny je farebná pilulka — vzhľad si berie z .chip/.chip--sm/.chip--win/--loss
   (app.css vyššie), tu ostáva len zarovnanie a číslice. */
.recap__delta { align-self: flex-start; margin-top: 0.15rem; }
.recap__note { margin: 0.7rem 0 0; color: var(--muted); font-size: 0.76rem; }

/* --- Predzápasová kartička --- */
.prematch { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; }
.prematch__title { margin: 0; }
.prematch__head { padding: 0.2rem 0; }
.prematch__vs { margin: 0 0 0.5rem; font-size: 1.35rem; font-weight: 800; line-height: 1.25; }
.prematch__vs-sep { color: var(--muted); font-weight: 500; margin: 0 0.4rem; font-size: 0.9rem; }
.prematch__meta { list-style: none; display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; margin: 0; padding: 0; color: var(--muted); font-size: 0.85rem; }
.prematch__sub { margin: 0 0 0.6rem; font-size: var(--step-0); }
.prematch__sub--sm { margin-top: 1.1rem; font-size: 0.95rem; }
.prematch__numbers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
.prematch__num {
    display: flex; flex-direction: column; gap: 0.15rem; text-align: center;
    background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.6rem 0.4rem;
}
.prematch__num-label { color: var(--muted); font-size: 0.72rem; line-height: 1.2; }
.prematch__num-value { font-size: 1.4rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.prematch__num--chance { background: var(--brand-tint); border-color: var(--brand-line); }
.prematch__num--chance .prematch__num-value { color: var(--brand-deep); }
.prematch__stance { margin: 0.8rem 0 0; font-weight: 600; }
.prematch__note { margin: 0.5rem 0 0; color: var(--muted); font-size: 0.9rem; }
.prematch__h2h { list-style: none; margin: 0; padding: 0; }
.prematch__h2h-item { display: flex; flex-wrap: wrap; gap: 0.3rem 0.6rem; align-items: baseline; padding: 0.35rem 0; border-bottom: 1px solid var(--line); font-size: 0.88rem; }
.prematch__h2h-item:last-child { border-bottom: 0; }
.prematch__h2h-res { font-weight: 700; }
.prematch__h2h-item--won .prematch__h2h-res { color: var(--brand-deep); }
.prematch__h2h-item--lost .prematch__h2h-res { color: #b42318; }
.prematch__h2h-score { font-variant-numeric: tabular-nums; }
.prematch__h2h-event { color: var(--muted); }
.prematch__h2h-date { margin-left: auto; color: var(--muted); font-size: 0.8rem; }
.prematch__goals { margin: 0; padding-left: 1.1rem; }
.prematch__goals li { margin-bottom: 0.3rem; }
.prematch__phrase {
    margin: 1rem 0 0; padding: 0.7rem 0.9rem; font-style: italic; font-size: 1.05rem;
    background: var(--brand-tint); border-left: 4px solid var(--brand); border-radius: var(--radius);
}
.prematch__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }

/* Vytlačená kartička: len obsah, bez navigácie a tlačidiel. */
@media print {
    .sidebar, .breadcrumbs, .no-print, .lang, .user-menu { display: none !important; }
    .prematch { max-width: none; }
    .prematch .card { border: 1px solid #999; box-shadow: none; }
    .prematch__phrase { background: none; border-left: 3px solid #333; }
}

/* --- Pozápasový rozbor --- */
.insights { list-style: none; margin: 0.8rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.insights__item { padding: 0.5rem 0.75rem; border-radius: var(--radius); border-left: 4px solid var(--line); background: var(--surface-2); }
.insights__item--good { border-left-color: var(--brand); background: var(--brand-tint); }
.insights__item--watch { border-left-color: var(--warn); background: var(--warn-tint); }
.insights__item--neutral { border-left-color: var(--line); }

/* --- Mobil: nové obrazovky sú určené na telefón pri kurte --- */
@media (max-width: 520px) {
    /* Tri ELO dlaždice vedľa seba sú na 360 px nečitateľné: šanca ostane veľká
       hore, obe ELO pod ňou vedľa seba. */
    .prematch__numbers { grid-template-columns: 1fr 1fr; }
    .prematch__num--chance { grid-column: 1 / -1; order: -1; }
    .prematch__num-value { font-size: 1.25rem; }
    .prematch__vs { font-size: 1.15rem; }
    .prematch__h2h-date { margin-left: 0; }

    /* Riadok pravidiel (popis + select) sa musí zalomiť, inak select pretečie. */
    .tracker__rule { flex-wrap: wrap; align-items: flex-start; }
    .tracker__rule select { min-width: 0; width: 100%; }

    /* Súhrn zápisníka: dlaždice pod seba v dvoch stĺpcoch. */
    .recap__grid { grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); }
    .recap__value { font-size: 1.15rem; }

    /* Štatistiky zápasu: úzke stĺpce pre hodnoty, aby label mal miesto. */
    .statcmp__row { grid-template-columns: 3.6rem 1fr 3.6rem; }
    .statcmp__label { font-size: 0.78rem; }

    /* Mapa a filtre miesta konania. */
    .venue__map { height: 260px; }
    .venue__eateries li { gap: 0.2rem 0.45rem; }
    .venue__dist { margin-left: auto; }
}

/* Najbližší zápas na dashboarde -> predzápasová kartička. */
.dash-hero__prematch {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.6rem;
    margin: 0 0 0.9rem; padding: 0.55rem 0.8rem; text-decoration: none;
    background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--radius); color: inherit;
}
.dash-hero__prematch:hover { background: rgba(255, 255, 255, 0.22); text-decoration: none; }
.dash-hero__prematch-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.85; }
.dash-hero__prematch-opp { font-weight: 700; }
.dash-hero__prematch-cta { margin-left: auto; font-size: 0.8rem; font-weight: 700; }
@media (max-width: 520px) { .dash-hero__prematch-cta { margin-left: 0; } }

/* Rozpísaný zápas z prehliadača (localStorage) — ponuka pokračovať. */
.tracker__resume {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.8rem;
    margin: 0 0 1.1rem; padding: 0.7rem 0.9rem;
    background: var(--warn-tint); border: 1px solid var(--warn-line); border-radius: var(--radius);
}
.tracker__resume[hidden] { display: none; }
.tracker__resume-text { margin: 0; flex: 1 1 14rem; font-weight: 600; }
.tracker__resume-actions { display: flex; gap: 0.4rem; }

/* Poznámka na detaile zápisu: zobrazená, po kliknutí editovateľná. */
.match-detail__note-edit { margin-top: 0.7rem; }
.match-detail__note-edit > summary { cursor: pointer; list-style: none; }
.match-detail__note-edit > summary::-webkit-details-marker { display: none; }
.match-detail__note-cta { display: inline-block; margin-top: 0.2rem; font-size: 0.82rem; font-weight: 700; color: var(--brand-deep); }
.match-detail__note-edit > summary:hover .match-detail__note-cta { text-decoration: underline; }
.match-detail__note-edit form { margin-top: 0.6rem; display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; }
.match-detail__note-edit textarea { width: 100%; }
.section-head--sm { margin-top: 1.6rem; font-size: var(--step-0); border-bottom-width: 1px; border-bottom-style: solid; }

/* Návrhy procesných cieľov: klik predvyplní pole cieľa. */
.goal-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin: 0 0 0.7rem; }
.goal-suggest__label { color: var(--muted); font-size: 0.82rem; margin-right: 0.2rem; }
.goal-suggest__chip { cursor: pointer; background: var(--surface-2); color: var(--muted); border-color: var(--line); font-weight: 600; }
.goal-suggest__chip:hover { background: var(--brand-tint); color: var(--brand-deep); border-color: var(--brand-line); }

/* Forma súpera na predzápasovej kartičke: V/P bodky za posledné zápasy. */
.prematch__form { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; margin: 0.9rem 0 0; }
.prematch__form-label { color: var(--muted); font-size: 0.85rem; margin-right: 0.2rem; }
.prematch__form-dot {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.5rem; height: 1.5rem; border-radius: 50%;
    font-size: 0.75rem; font-weight: 800; border: 1px solid transparent;
}
.prematch__form-dot--won { background: var(--brand-tint); color: var(--brand-deep); border-color: var(--brand-line); }
.prematch__form-dot--lost { background: var(--accent-tint); color: var(--accent-deep); border-color: var(--accent-line); }
.prematch__health { border-left: 4px solid var(--warn); }
.prematch__health-list { margin: 0; padding-left: 1.1rem; }