/* ==========================================================================
   Tipskungen — welcome page stylesheet
   Extracted from index-draft-modern.php for caching, reuse, and review.
   Scoped under body#page2 so it can coexist with the legacy site styles.

   Concept: "Halftime Programme" — a printed Swedish football tipping
   programme reimagined as a 2025 page. Stadium-green palette + Fraunces
   editorial serif + IBM Plex Sans body + JetBrains Mono numerals.
   ========================================================================== */

:root {
    --paper:        #e9efe9;   /* stadium concrete with grass tint */
    --paper-tint:   #dfe7df;
    --surface:      #ffffff;   /* cards: pure white */
    --ink:          #131815;   /* near-black with green undertone */
    --ink-2:        #3a423c;
    --ink-3:        #6a7269;
    --rule:         #d3dbd4;   /* hairline rule */
    --rule-soft:    #e1e7e2;
    --pitch:        #0e3a23;   /* dark forest green */
    --pitch-deep:   #08291a;
    --pitch-light:  #155a35;
    --saffron:      #c47a07;   /* CTA / accent */
    --saffron-deep: #9b5e04;
    --crimson:      #9b2a2a;   /* PÅGÅR / live */
    --cream-ink:    #f3efe0;   /* text on dark green */
}

/* ---- Page frame: stadium daylight with faint mowed-pitch stripes --------- */
body#page2 {
    background:
        repeating-linear-gradient(
            180deg,
            rgba(14,58,35,0) 0 130px,
            rgba(14,58,35,0.035) 130px 260px
        ),
        var(--paper) !important;
    background-attachment: fixed !important;
    color: var(--ink);
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-feature-settings: 'ss01', 'cv11';
}
/* Universal border-box so padding never bursts percentage widths */
body#page2,
body#page2 *,
body#page2 *::before,
body#page2 *::after { box-sizing: border-box; }
body#page2 > .main { position: relative; z-index: 1; padding-top: 18px; }

/* Reset legacy white panel — let the paper bg breathe between cards */
.bg { background: transparent !important; padding: 0 !important; box-shadow: none !important; }

/* Widen the welcome-page canvas (overrides skeleton's 960/990px scaffold) */
body#page2 > .main {
    width: 100% !important;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
}
section#content > .main {
    width: 100% !important;
    max-width: none;
    padding: 0;
}
body#page2 .container_12 { width: 100% !important; }

/* Convert the legacy float-grid to flex so widths stay fluid */
body#page2 .container_12 .wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    align-items: flex-start;
}
body#page2 .container_12 .wrapper > .tk-footer-banner { flex: 1 1 100%; }
body#page2 .container_12 .grid_7,
body#page2 .container_12 .grid_5 {
    margin: 0 !important;
    float: none !important;
    box-sizing: border-box;
}
body#page2 .container_12 .grid_7 { flex: 1 1 58%; width: auto; }
body#page2 .container_12 .grid_5 { flex: 1 1 calc(42% - 30px); width: auto; }
body#page2 .container_12 .grid_6 { flex: 1 1 calc(50% - 15px); width: auto; }

/* Collapse to single column below tablet breakpoint — and reorder cards for mobile */
@media (max-width: 899px) {
    body#page2 .container_12 .wrapper {
        display: flex;
        flex-direction: column;
        gap: 0;
        /* Override the desktop `flex-start` — column flex with flex-start leaves
           items at intrinsic cross-axis width. Stretch makes children fill the
           wrapper width so negative-margin breakouts work symmetrically. */
        align-items: stretch;
    }
    /* Flatten the column wrappers so all 4 cards become direct flex children */
    body#page2 .container_12 .grid_7,
    body#page2 .container_12 .grid_6,
    body#page2 .container_12 .grid_5 { display: contents; }
    body#page2 .container_12 .tk-card { width: 100%; margin: 0 0 22px !important; }

    /* Mobile reading order:
       1. Intro (brand + headline)        — grid_7 > .tk-intro
       2. Login                            — grid_5 > .tk-card:nth-of-type(1)
       3. Rules                            — grid_5 > .tk-card:nth-of-type(2)
       4. Chronicle                        — grid_7 > .tk-card:nth-of-type(2)
       5. Footer banner                    — .tk-footer-banner
    */
    body#page2 .container_12 .grid_7 > .tk-intro                  { order: 1; }
    body#page2 .container_12 .grid_5 > .tk-card:nth-of-type(1)    { order: 2; }
    body#page2 .container_12 .grid_5 > .tk-card:nth-of-type(2)    { order: 3; }
    body#page2 .container_12 .grid_7 > .tk-card:nth-of-type(2)    { order: 4; }
    body#page2 .container_12 .wrapper > .tk-footer-banner         { order: 5; }
}

/* ---- Header: a programme cover panel, inset from the page edge ------------ */
body#page2 > .main > header {
    background: linear-gradient(180deg, var(--pitch) 0%, var(--pitch-deep) 100%);
    color: var(--cream-ink);
    padding: 0 !important;
    margin-bottom: 30px;
    border-radius: 4px;
    position: relative;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.06) inset,
        0 18px 38px -22px rgba(8,30,18,0.55);
    overflow: hidden;
}
/* faint repeating pitch-stripe ornament */
body#page2 > .main > header::before {
    content: "";
    position: absolute; inset: 0;
    background:
        repeating-linear-gradient(
            90deg,
            transparent 0 60px,
            rgba(255,255,255,0.018) 60px 120px
        ),
        radial-gradient(ellipse 80% 60% at 85% 10%, rgba(247,239,217,0.07), transparent 60%);
    pointer-events: none;
}
body#page2 > .main > header > * { position: relative; z-index: 1; }
/* Neutralize legacy header CSS only when the new .tk-header-row markup is used.
   Without this scoping, the rules hide the event logo and member panel on every
   legacy-header page that uses body#page2 (ranking, matchfakta, kommande, …). */
body#page2 > .main > header .tk-header-row h1 { float: none; overflow: visible; margin: 0; padding: 28px 32px 18px; }
/* Welcome page (index.php) uses <h1><div class="tk-lockup"> directly under <header>.
   Neutralize legacy `h1 { float:left; overflow:hidden }` so the nav strip clears below. */
body#page2 > .main > header > h1 { float: none; width: 100%; overflow: visible; margin: 0; }

/* ---- Logo lockup (inline SVG mark + Fraunces wordmark + meta) ------------- */
.tk-lockup {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 22px;
    padding: 30px 34px 22px;
}
.tk-mark {
    width: 64px; height: 64px;
    display: inline-flex; align-items: center; justify-content: center;
    background: radial-gradient(circle at 35% 30%, #f4ad1f 0%, var(--saffron) 55%, var(--saffron-deep) 100%);
    color: var(--pitch-deep);
    border-radius: 50%;
    box-shadow:
        inset 0 -3px 0 rgba(0,0,0,0.18),
        inset 0 1px 0 rgba(255,255,255,0.35),
        0 4px 0 rgba(0,0,0,0.18);
}
.tk-mark svg { width: 38px; height: 38px; }
.tk-wordmark { line-height: 1; }
.tk-wordmark .tk-name {
    display: block;
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: 'SOFT' 50, 'WONK' 0, 'opsz' 100;
    font-weight: 700;
    font-size: 38px;
    letter-spacing: -1.2px;
    color: #fff;
}
.tk-wordmark .tk-name em {
    font-style: italic;
    font-variation-settings: 'SOFT' 80, 'WONK' 1, 'opsz' 100;
    color: #f7d77a;
}
.tk-wordmark .tk-meta {
    display: block;
    margin-top: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: rgba(247,239,217,0.72);
}
.tk-wordmark .tk-meta b { color: var(--cream-ink); font-weight: 500; }

/* Status pill — "PÅGÅR · VM 2026" */
.tk-status {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px 8px 12px;
    background: rgba(247,239,217,0.08);
    border: 1px solid rgba(247,239,217,0.18);
    border-radius: 999px;
    font: 500 11px/1 'JetBrains Mono', monospace;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--cream-ink);
    white-space: nowrap;
}
.tk-status .tk-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #ff6b3d;
    box-shadow: 0 0 0 0 rgba(255,107,61, 0.55);
    animation: tk-pulse 1.8s infinite;
}
@keyframes tk-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(255,107,61,0.55); }
    70%  { box-shadow: 0 0 0 8px rgba(255,107,61,0); }
    100% { box-shadow: 0 0 0 0 rgba(255,107,61,0); }
}

/* Header rule + nav */
body#page2 > .main > header .navigation {
    background: rgba(0,0,0,0.16);
    border-top: 1px solid rgba(247,239,217,0.10);
    padding: 0 32px;
    margin: 0;
}
body#page2 > .main > header .menu { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px; }
body#page2 > .main > header .menu li { float: none; margin: 0; padding: 0; background: none; }
body#page2 > .main > header .menu li a {
    display: inline-block;
    white-space: nowrap;
    padding: 14px 12px;
    font: 600 11.5px/1 'IBM Plex Sans', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(247,239,217,0.80);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    background: none;
}
body#page2 > .main > header .menu li a:hover {
    color: #fff;
    border-bottom-color: var(--saffron);
}
body#page2 > .main > header .menu li.current a,
body#page2 > .main > header .menu li a.active {
    color: #fff; border-bottom-color: var(--saffron);
}
body#page2 > .main > header nav { background: none; }
.clear { clear: both; }

/* ============ Cards / "context windows" ===================== */
.tk-card {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 3px;
    padding: 28px 30px;
    margin-bottom: 22px;
    position: relative;
    box-shadow:
        0 1px 0 rgba(0,0,0,0.02),
        0 14px 28px -22px rgba(24,26,22,0.30);
}
.tk-card + .tk-card { margin-top: 22px; }

/* All H3 in cards become small-caps category labels */
.tk-card h2 {
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: 'SOFT' 30, 'WONK' 0, 'opsz' 144;
    font-weight: 700;
    font-size: 32px; line-height: 1.05;
    letter-spacing: -1px;
    color: var(--ink);
    margin: 0;
}
.tk-card h3 {
    font: 600 11px/1 'IBM Plex Sans', sans-serif;
    text-transform: uppercase;
    letter-spacing: 2.2px;
    color: var(--ink-3);
    margin: 0 0 18px;
}
.tk-card p { font-size: 15px; line-height: 1.65; color: var(--ink-2); margin: 0; }
.tk-card p + p { margin-top: 12px; }
.tk-card strong { color: var(--ink); font-weight: 600; }

/* Eyebrow above each card title — small caps + count + accent rule */
.tk-eyebrow {
    display: flex; align-items: center; gap: 10px;
    font: 500 10.5px/1 'JetBrains Mono', monospace;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: var(--ink-3);
    margin: 0 0 14px;
}
.tk-eyebrow::after {
    content: ""; flex: 1; height: 1px; background: var(--rule);
}
.tk-eyebrow b { font-weight: 600; color: var(--pitch); }

/* ---- Intro card --------------------------------------------------------- */
.tk-intro h2 { font-size: 52px; line-height: 1.0; letter-spacing: -2px; margin-top: 6px; }
.tk-intro h2 em {
    font-style: italic;
    font-variation-settings: 'SOFT' 80, 'WONK' 1, 'opsz' 144;
    color: var(--pitch);
}
.tk-intro .tk-lede {
    font-size: 17px; line-height: 1.55; color: var(--ink-2);
    margin-top: 18px;
}
.tk-intro .tk-lede strong { color: var(--ink); }

/* Host flags chip row */
.tk-hosts {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 14px;
    font: 500 11px/1 'JetBrains Mono', monospace;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--ink-3);
}
.tk-flag {
    display: inline-block;
    width: 22px; height: 14px;
    border-radius: 1px;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
    overflow: hidden;
    vertical-align: middle;
}
.tk-flag svg { display: block; width: 100%; height: 100%; }

/* ---- Features as a numbered chapter list -------------------------------- */
.tk-features {
    list-style: none; padding: 0;
    margin: 24px 0 4px;
    border-top: 1px solid var(--rule);
}
.tk-features li {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid var(--rule);
    align-items: baseline;
}
.tk-roman {
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: 'opsz' 144, 'SOFT' 30;
    font-weight: 600;
    font-size: 28px;
    color: var(--pitch);
    font-feature-settings: 'tnum';
    letter-spacing: -0.5px;
}
.tk-features strong {
    display: block;
    font: 600 14px/1.3 'IBM Plex Sans', sans-serif;
    color: var(--ink);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 4px;
}
.tk-features span {
    display: block;
    font-size: 14.5px; line-height: 1.55; color: var(--ink-2);
}

/* Signature */
.tk-signature {
    margin-top: 22px;
    display: flex; align-items: center; gap: 12px;
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 120;
    font-style: italic; font-size: 18px;
    color: var(--ink-2);
}
.tk-signature::before {
    content: ""; display: inline-block;
    width: 36px; height: 1px; background: var(--ink-3);
}

/* ---- Login card --------------------------------------------------------- */
.tk-login label {
    display: block;
    font: 600 10.5px/1 'JetBrains Mono', monospace;
    letter-spacing: 2px; text-transform: uppercase;
    color: var(--ink-3);
    margin: 16px 0 7px;
}
.tk-login input[type=text],
.tk-login input[type=password] {
    width: 100%; box-sizing: border-box;
    background: #f7faf7;
    border: 1px solid var(--rule);
    border-bottom: 2px solid var(--ink-3);
    border-radius: 2px;
    padding: 11px 12px;
    font: 500 15px/1.2 'IBM Plex Sans', sans-serif;
    color: var(--ink);
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.tk-login input:focus {
    outline: none;
    background: #fff;
    border-color: var(--rule);
    border-bottom-color: var(--pitch);
    box-shadow: 0 1px 0 0 var(--pitch);
}

.tk-btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--saffron);
    color: #fff;
    border: 0; cursor: pointer;
    padding: 12px 18px;
    border-radius: 2px;
    font: 600 12.5px/1 'IBM Plex Sans', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    box-shadow:
        inset 0 -2px 0 rgba(0,0,0,0.18),
        inset 0 1px 0 rgba(255,255,255,0.25);
    transition: transform .08s, background .12s;
}
.tk-btn:hover { background: var(--saffron-deep); transform: translateY(-1px); }
.tk-btn:active { transform: translateY(0); }
.tk-btn svg { width: 14px; height: 14px; }

.tk-link {
    color: var(--pitch);
    font: 500 13px/1 'IBM Plex Sans', sans-serif;
    text-decoration: none;
    border-bottom: 1px dashed var(--ink-3);
    padding-bottom: 1px;
    transition: color .12s, border-color .12s;
}
.tk-link:hover { color: var(--saffron-deep); border-color: var(--saffron-deep); }

.tk-actions {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 14px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--rule);
}

.tk-alert {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 14px 16px;
    font-size: 14px; line-height: 1.5;
    border-radius: 2px;
    border-left: 3px solid;
    margin-top: 4px;
}
.tk-alert.ok   { background: #dfeede; color: #1f3d1a; border-color: var(--pitch); }
.tk-alert.err  { background: #f3dcd6; color: #6a1818; border-color: var(--crimson); }
.tk-alert svg { flex: 0 0 18px; margin-top: 1px; }

/* ---- Rules card --------------------------------------------------------- */
.tk-rules {
    list-style: none; padding: 0;
    margin: 4px 0 0;
    counter-reset: r;
}
.tk-rules li {
    counter-increment: r;
    display: grid;
    grid-template-columns: 50px 1fr;
    gap: 10px;
    padding: 12px 0;
    align-items: baseline;
    border-bottom: 1px dashed var(--rule);
}
.tk-rules li:last-child { border-bottom: none; }
.tk-rules li::before {
    content: counter(r, upper-roman) ".";
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: 'opsz' 144;
    font-weight: 600;
    font-size: 19px;
    color: var(--pitch);
    text-align: right;
    padding-right: 6px;
}
.tk-rules strong {
    font: 600 14px/1.4 'IBM Plex Sans', sans-serif;
    color: var(--ink);
}
.tk-rules .tk-sub {
    display: block;
    font: 400 13px/1.5 'IBM Plex Sans', sans-serif;
    color: var(--ink-3);
    margin-top: 2px;
}

/* Worked example — a tiny scoreboard demo for the rules */
.tk-example {
    margin-top: 18px;
    padding: 16px 18px;
    background: linear-gradient(180deg, #f1f6f1 0%, #e7eee7 100%);
    border: 1px solid var(--rule);
    border-radius: 2px;
    position: relative;
}
.tk-example::before {
    content: "EXEMPEL";
    position: absolute; top: -8px; left: 14px;
    background: var(--surface);
    padding: 0 8px;
    font: 600 9.5px/1 'JetBrains Mono', monospace;
    letter-spacing: 2.4px;
    color: var(--ink-3);
}
.tk-score {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 6px 12px;
    font: 500 13px/1.5 'JetBrains Mono', monospace;
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
}
.tk-score b { color: var(--ink); font-weight: 600; }
.tk-score .tk-result { color: var(--pitch); font-weight: 600; }
.tk-score-summary {
    grid-column: 1 / -1;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    border-top: 1px dashed var(--rule);
    padding-top: 8px;
    margin-top: 4px;
    font-size: 12.5px;
}
.tk-score-summary > span:first-child { white-space: nowrap; }
.tk-points { color: var(--saffron-deep); font-weight: 600; white-space: nowrap; }

/* Private-game stamp */
.tk-stamp {
    display: flex; align-items: center; gap: 14px;
    margin-top: 20px;
    padding: 14px 18px;
    border: 2px dashed var(--crimson);
    color: var(--crimson);
    border-radius: 2px;
    background: rgba(155,42,42,0.04);
    font-size: 13.5px; line-height: 1.5;
}
.tk-stamp svg { flex: 0 0 28px; color: var(--crimson); }
.tk-stamp strong { color: var(--crimson); text-transform: uppercase; letter-spacing: 1.5px; font: 700 11px/1 'JetBrains Mono', monospace; display: block; margin-bottom: 4px; }

/* ---- Chronicle (replaces the 9-logo strip) ------------------------------ */
.tk-chronicle {
    list-style: none; padding: 0; margin: 4px 0 0;
    counter-reset: c;
}
.tk-chronicle li {
    counter-increment: c;
    display: grid;
    grid-template-columns: 48px 56px 1fr auto 92px;
    gap: 14px;
    align-items: center;
    padding: 13px 0;
    border-top: 1px solid var(--rule);
    font-variant-numeric: tabular-nums;
}
.tk-chronicle li:last-child { border-bottom: 1px solid var(--rule); }
.tk-chronicle .tk-num {
    font: 500 13px/1 'JetBrains Mono', monospace;
    color: var(--ink-3);
}
.tk-chronicle .tk-num::before { content: "Nº "; opacity: 0.6; }
.tk-chronicle .tk-logo {
    width: 48px; height: 48px;
    display: flex; align-items: center; justify-content: center;
    background: #fff;
    border: 1px solid var(--rule);
    border-radius: 2px;
}
.tk-chronicle .tk-logo img {
    max-width: 38px; max-height: 38px;
    filter: grayscale(0.9) contrast(1.05);
    opacity: 0.92;
}
.tk-chronicle .tk-title {
    font: 600 16px/1.2 'Fraunces', Georgia, serif;
    font-variation-settings: 'opsz' 144, 'SOFT' 30;
    color: var(--ink);
}
.tk-chronicle .tk-host {
    display: block;
    font: 400 12px/1 'IBM Plex Sans', sans-serif;
    color: var(--ink-3);
    margin-top: 4px;
    letter-spacing: 0.2px;
}
.tk-chronicle .tk-year {
    font: 500 13px/1 'JetBrains Mono', monospace;
    color: var(--ink-2);
}
.tk-chronicle .tk-state {
    font: 600 10.5px/1 'JetBrains Mono', monospace;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ink-3);
    text-align: right;
}
/* Active (Pågår) — pulsing crimson dot */
.tk-chronicle li.is-active {
    background: linear-gradient(90deg, rgba(155,42,42,0.06) 0%, transparent 70%);
}
.tk-chronicle li.is-active .tk-title { color: var(--pitch); }
.tk-chronicle li.is-active .tk-state {
    color: var(--crimson);
    display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end;
}
.tk-chronicle li.is-active .tk-state::before {
    content: ""; display: inline-block;
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--crimson);
    box-shadow: 0 0 0 0 rgba(155,42,42,0.55);
    animation: tk-pulse-r 1.8s infinite;
}
@keyframes tk-pulse-r {
    0%   { box-shadow: 0 0 0 0 rgba(155,42,42,0.55); }
    70%  { box-shadow: 0 0 0 7px rgba(155,42,42,0); }
    100% { box-shadow: 0 0 0 0 rgba(155,42,42,0); }
}

/* Upcoming (Kommande) — saffron, no pulse, static dot */
.tk-chronicle li.is-upcoming {
    background: linear-gradient(90deg, rgba(196,122,7,0.08) 0%, transparent 70%);
}
.tk-chronicle li.is-upcoming .tk-title { color: var(--pitch); }
.tk-chronicle li.is-upcoming .tk-state {
    color: var(--saffron-deep);
    display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end;
}
.tk-chronicle li.is-upcoming .tk-state::before {
    content: ""; display: inline-block;
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--saffron);
    box-shadow: 0 0 0 1px rgba(196,122,7,0.25);
}

/* Finished (Avslutad post-final) — muted, no accent */
.tk-chronicle li.is-finished .tk-title { color: var(--ink); }
.tk-chronicle li.is-finished .tk-state { color: var(--ink-3); }

/* Header status pill colour variants */
.tk-status.tk-status-kommande { background: rgba(196,122,7,0.16); border-color: rgba(196,122,7,0.40); color: #f7d77a; }
.tk-status.tk-status-kommande .tk-dot { background: var(--saffron); animation: none; box-shadow: 0 0 0 1px rgba(196,122,7,0.45); }
.tk-status.tk-status-avslutad { background: rgba(247,239,217,0.05); border-color: rgba(247,239,217,0.12); color: rgba(247,239,217,0.55); }
.tk-status.tk-status-avslutad .tk-dot { background: rgba(247,239,217,0.4); animation: none; box-shadow: none; }

/* Collapse rows 6–10 behind a "Visa alla" toggle (pure CSS) */
.tk-toggle-input { position: absolute; opacity: 0; pointer-events: none; }
.tk-chronicle li:nth-child(n+6) { display: none; }
.tk-toggle-input:checked ~ .tk-chronicle li:nth-child(n+6) {
    display: grid;
    animation: tk-rise 0.45s ease-out;
}
.tk-toggle {
    display: flex; align-items: center; justify-content: center;
    gap: 10px;
    margin-top: 14px;
    padding: 13px 16px;
    cursor: pointer;
    font: 600 10.5px/1 'JetBrains Mono', monospace;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: var(--pitch);
    border: 1px dashed var(--rule);
    border-radius: 2px;
    background: transparent;
    transition: background .15s, border-color .15s, color .15s;
    user-select: none;
}
.tk-toggle:hover {
    background: rgba(14,58,35,0.05);
    border-color: var(--pitch);
    color: var(--pitch-deep);
}
.tk-toggle b { font-weight: 600; color: var(--saffron-deep); }
.tk-toggle-hide { display: none; }
.tk-toggle-input:checked ~ .tk-toggle .tk-toggle-show { display: none; }
.tk-toggle-input:checked ~ .tk-toggle .tk-toggle-hide { display: inline-flex; align-items: center; gap: 10px; }
.tk-toggle-arrow {
    display: inline-block;
    width: 10px; height: 10px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translate(-2px,-2px);
    transition: transform .25s ease;
}
.tk-toggle-input:checked ~ .tk-toggle .tk-toggle-arrow {
    transform: rotate(-135deg) translate(-2px,-2px);
}
/* Keyboard focus for accessibility */
.tk-toggle-input:focus-visible ~ .tk-toggle {
    outline: 2px solid var(--pitch);
    outline-offset: 2px;
}

/* ---- Footer banner — a fake scoreboard line ----------------------------- */
.tk-footer-banner {
    margin: 26px auto 0;
    padding: 18px 22px;
    background: var(--pitch);
    color: var(--cream-ink);
    border-radius: 3px;
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 14px;
    font: 500 12px/1 'JetBrains Mono', monospace;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}
.tk-footer-banner .tk-fb-score {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 18px; letter-spacing: 0;
    color: #fff;
}
.tk-footer-banner .tk-fb-score b { color: var(--saffron); font-weight: 600; }

/* ==========================================================================
   DASHBOARD — "Press Box Ledger"
   Logged-in pages (eview, sys, ranking, etc.). Same brand chassis as the
   welcome page, but with denser, more authoritative editorial-page feel:
   ruled sections, monospace anchors, ledger rows, press-pass identity.
   ========================================================================== */

/* ---- Press Ribbon: tiny pitch-green strip anchoring the content top -----
   Negative horizontal margins break the ribbon out of both the .tk-dashboard
   wrapper padding (12px) AND the body#page2 > .main outer padding (24px),
   so it spans the full page width (up to body's 1240px max-width cap). */
.tk-press-ribbon {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 38px;
    margin: 0 -24px 22px;
    background: var(--pitch);
    color: var(--cream-ink);
    border-radius: 3px;
    font: 600 12px/1.25 'JetBrains Mono', monospace;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    flex: 1 1 auto;
}
.tk-press-ribbon > span { white-space: nowrap; }
.tk-press-ribbon::before {
    content: "";
    width: 7px; height: 7px;
    background: var(--saffron);
    border-radius: 50%;
    flex-shrink: 0;
}
.tk-press-ribbon .tk-ribbon-bar {
    flex: 1;
    height: 1px;
    background: rgba(247,239,217,0.14);
    white-space: normal;
}
.tk-press-ribbon .tk-ribbon-date {
    color: rgba(247,239,217,0.72);
    font-weight: 500;
    letter-spacing: 1.2px;
}

/* ---- Section header: chapter title + pill, with single full-width bottom rule.
   Old approach had a `.tk-section-rule` span inside flex + a `.tk-ledger` border-top,
   producing visually-stacked double rules. Now the border-bottom on the header
   serves as the single dividing line between the section and its content. */
.tk-section-header {
    display: flex;
    align-items: baseline;
    gap: 18px;
    margin: 28px 0 0;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--rule);
    flex: 1 1 100%;
}
.tk-section-header .tk-section-rule { display: none; }
.tk-section-header.tk-section-active  { border-bottom-color: rgba(14,58,35,0.30); }
.tk-section-header.tk-section-archive { border-bottom-color: rgba(155,42,42,0.28); }
.tk-section-header .tk-section-eyebrow {
    font: 600 10px/1 'JetBrains Mono', monospace;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--ink-3);
}
.tk-section-header .tk-section-title {
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: 'opsz' 144, 'SOFT' 30;
    font-weight: 700;
    font-size: 30px;
    line-height: 1.0;
    letter-spacing: -0.8px;
    color: var(--ink);
    margin: 0;
}
.tk-section-header .tk-section-rule {
    flex: 1;
    height: 1px;
    background: var(--rule);
    align-self: center;
}
.tk-section-header .tk-section-count {
    font: 600 10px/1 'JetBrains Mono', monospace;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: var(--ink-3);
}
.tk-section-header .tk-section-count b {
    color: var(--ink);
    font-weight: 600;
    margin-right: 6px;
    font-variant-numeric: tabular-nums;
}
.tk-section-header.tk-section-active .tk-section-title { color: var(--pitch); }
.tk-section-header.tk-section-active .tk-section-count b { color: var(--pitch); }
.tk-section-header.tk-section-archive .tk-section-title { color: var(--crimson); }
.tk-section-header.tk-section-archive .tk-section-count b { color: var(--crimson); }

/* ==========================================================================
   Event hero — "Huvudnummer" (the lead feature of this issue)
   Shares the back-issue DNA (green masthead, gold accents, Fraunces display)
   but reads as the marquee: a full-width cover story with a live scoreboard.
   ========================================================================== */
.tk-event-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 4px;
    margin: 18px 0 16px;
    overflow: hidden;
    color: inherit;
    box-shadow:
        0 1px 0 rgba(0,0,0,0.02),
        0 18px 34px -24px rgba(24,26,22,0.42);
    transition: transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .25s, border-color .2s;
    flex: 1 1 100%;
}
.tk-event-hero,
.tk-event-hero:hover,
.tk-event-hero:focus { text-decoration: none; }
.tk-event-hero:hover {
    transform: translateY(-3px);
    box-shadow:
        0 1px 0 rgba(0,0,0,0.02),
        0 30px 52px -26px rgba(24,26,22,0.50);
    border-color: rgba(196,122,7,0.50);
}
/* Gold binding spine — sets the live feature apart from green-spined archives */
.tk-event-hero::before {
    content: "";
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 5px; z-index: 3;
    background: linear-gradient(180deg, #f4ad1f 0%, var(--saffron) 45%, var(--saffron-deep) 100%);
}

/* ---- Masthead band: the back-issue header, grander ---------------------- */
.tk-event-hero-masthead {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 13px 24px 12px 26px;
    background: linear-gradient(180deg, var(--pitch) 0%, var(--pitch-deep) 100%);
    color: var(--cream-ink);
    border-bottom: 2px solid var(--pitch-deep);
    font: 600 10px/1 'JetBrains Mono', monospace;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.tk-event-hero-pub { color: var(--cream-ink); font-weight: 700; letter-spacing: 2.6px; white-space: nowrap; }
.tk-event-hero-kicker {
    color: var(--saffron);
    padding-left: 12px;
    border-left: 1px solid rgba(247,239,217,0.20);
    white-space: nowrap;
}
.tk-event-hero-mast-rule { flex: 1; height: 1px; background: rgba(247,239,217,0.16); min-width: 12px; }
.tk-event-hero-edition { color: rgba(247,239,217,0.70); font-weight: 600; white-space: nowrap; }

/* Status pill, sitting on the dark masthead */
.tk-event-hero-status {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 5px 11px;
    border-radius: 999px;
    font: 700 9px/1 'JetBrains Mono', monospace;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
}
.tk-event-hero-status::before {
    content: "";
    width: 6px; height: 6px; border-radius: 50%;
    flex-shrink: 0;
}
.tk-event-hero-status.is-active {
    background: rgba(255,255,255,0.08);
    color: #ff9a9a;
    box-shadow: inset 0 0 0 1px rgba(255,140,140,0.40);
}
.tk-event-hero-status.is-active::before { background: #ff5a5a; animation: tk-pulse-r 1.8s infinite; }
.tk-event-hero-status.is-upcoming {
    background: rgba(196,122,7,0.20);
    color: #f4c469;
    box-shadow: inset 0 0 0 1px rgba(244,196,105,0.35);
}
.tk-event-hero-status.is-upcoming::before { background: var(--saffron); }
.tk-event-hero-status.is-pending {
    background: rgba(247,239,217,0.07);
    color: rgba(247,239,217,0.62);
    box-shadow: inset 0 0 0 1px rgba(247,239,217,0.18);
}
.tk-event-hero-status.is-pending::before { background: rgba(247,239,217,0.55); }

/* ---- Feature body ------------------------------------------------------- */
.tk-event-hero-body {
    position: relative;
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 24px 28px;
}
.tk-event-hero-lead { flex: 1 1 auto; min-width: 0; }
.tk-event-hero-body::before {
    /* Faint mowed-pitch stripes — atmosphere behind the headline */
    content: "";
    position: absolute; inset: 0;
    background: repeating-linear-gradient(
        180deg,
        transparent 0 80px,
        rgba(14,58,35,0.018) 80px 160px
    );
    pointer-events: none;
}
.tk-event-hero-body > * { position: relative; z-index: 1; }
.tk-event-hero-eyebrow {
    display: inline-block;
    font: 600 10px/1 'JetBrains Mono', monospace;
    letter-spacing: 2.6px;
    text-transform: uppercase;
    color: var(--saffron-deep);
    margin: 0 0 11px;
}
.tk-event-hero h3 {
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: 'opsz' 144, 'SOFT' 30, 'WONK' 1;
    font-weight: 700;
    font-size: 33px; line-height: 1.04;
    letter-spacing: -1.1px;
    color: var(--pitch);
    margin: 0 0 6px;
}
.tk-event-hero h3 { transition: color .15s; }
a.tk-event-hero:hover h3 { color: var(--saffron-deep); }
.tk-event-hero-host {
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: 'opsz' 60, 'SOFT' 80, 'WONK' 1;
    font-style: italic;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.3;
    color: var(--ink-2);
    margin: 0;
}

/* Meta panel — participants + dates as a tidy stat block, set off to the
   right with a binding rule, the way a magazine runs its fact column. */
.tk-event-hero-meta {
    flex: 0 0 auto;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    margin: 0;
    padding-left: 26px;
    border-left: 1px solid var(--rule);
    text-align: right;
}
.tk-meta-cell { display: block; }
.tk-meta-cell dt {
    font: 600 9px/1 'JetBrains Mono', monospace;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--ink-3);
    margin: 0 0 4px;
}
.tk-meta-cell dd {
    margin: 0;
    font: 600 15px/1 'JetBrains Mono', monospace;
    letter-spacing: 0.4px;
    color: var(--pitch);
    font-variant-numeric: tabular-nums;
}
/* Participant tally is the live figure — give it the saffron headline cut */
.tk-meta-cell dd.tk-meta-count {
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: 'opsz' 96, 'SOFT' 30, 'WONK' 1;
    font-weight: 700;
    font-size: 32px;
    line-height: 0.9;
    letter-spacing: -1px;
    color: var(--saffron-deep);
}

/* ---- Action bar: one full-width, unmistakable click target -------------- */
.tk-event-hero-action {
    border-top: 1px solid var(--rule);
}
.tk-hero-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 24px;
    font: 700 12px/1 'IBM Plex Sans', sans-serif;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: #fff;
    background: var(--pitch);
    box-shadow: inset 0 -2px 0 rgba(0,0,0,0.20), inset 0 1px 0 rgba(255,255,255,0.10);
    transition: background .15s;
}
.tk-hero-cta svg { width: 15px; height: 15px; transition: transform .15s; }
a.tk-event-hero:hover .tk-hero-cta { background: var(--pitch-light); }
a.tk-event-hero:hover .tk-hero-cta svg { transform: translateX(3px); }
.tk-hero-cta.tk-btn-saffron { background: var(--saffron); }
a.tk-event-hero:hover .tk-hero-cta.tk-btn-saffron { background: var(--saffron-deep); }
.tk-hero-cta.tk-btn-ghost {
    background: #f1ece0;
    color: var(--ink-3);
    box-shadow: inset 0 0 0 1px var(--rule);
}

/* ---- Locked variant: not a member / pending ----------------------------- */
.tk-event-hero.is-locked::before {
    background: linear-gradient(180deg, var(--ink-3) 0%, var(--ink-2) 100%);
    opacity: 0.45;
}
.tk-event-hero.is-locked h3 { color: var(--ink-2); font-style: italic; }

/* Empty state for "no active tournaments" / "no archive" */
.tk-empty-state {
    padding: 26px 24px;
    background: var(--surface);
    border: 1px dashed var(--rule);
    border-radius: 4px;
    color: var(--ink-3);
    font: 400 italic 16px/1.5 'Fraunces', Georgia, serif;
    font-variation-settings: 'opsz' 36, 'SOFT' 80;
    text-align: center;
    margin: 0 0 16px;
    flex: 1 1 100%;
}
.tk-empty-state b {
    display: block;
    font-style: normal;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 10px;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 6px;
}

/* ---- Archive shelf: "Back Issues" — past editions as magazine covers --- */
.tk-archive-grid {
    list-style: none;
    padding: 0;
    margin: 18px 0 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
    gap: 20px;
    flex: 1 1 100%;
}
/* Cards are direct children of .tk-archive-grid — no <li> wrapper, so no
   `display: contents` workaround needed. Avoids iOS Safari quirks where
   <li> in a grid was leaving phantom-row gaps. */

@keyframes tk-archive-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

.tk-archive-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 348px;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 3px;
    color: var(--ink);
    text-decoration: none;
    overflow: hidden;
    box-shadow:
        0 1px 0 rgba(0,0,0,0.02),
        0 14px 26px -20px rgba(24,26,22,0.30);
    transform-origin: 50% 100%;
    opacity: 0;
    animation: tk-archive-rise 0.6s cubic-bezier(.2,.7,.2,1) forwards;
    transition:
        transform .25s cubic-bezier(.2,.7,.2,1),
        box-shadow .25s,
        border-color .2s;
}
/* No hover lift on archive cards — the "Gå till →" status signals the link. */
/* Kill the base a:hover underline (A/style.css) on archive cards — cover the
   block-level children too, since the flex card doesn't propagate the override. */
.tk-archive-card:hover,
.tk-archive-card:focus,
.tk-archive-card:hover *,
.tk-archive-card:focus * { text-decoration: none; }
/* …but keep the year as the clickable cue: underline it on hover. */
.tk-archive-card:hover .tk-archive-year,
.tk-archive-card:focus .tk-archive-year {
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 2px;
}

/* Spine: tinted bar on the left edge, mimicking a binding stitch */
.tk-archive-card::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--pitch) 0%, var(--pitch-deep) 100%);
    transition: background .2s;
    z-index: 1;
}
/* Masthead: pitch-green band with publication, edition number */
.tk-archive-masthead {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px 10px 18px;
    background: var(--pitch);
    color: var(--cream-ink);
    font: 600 9px/1 'JetBrains Mono', monospace;
    letter-spacing: 2px;
    text-transform: uppercase;
    border-bottom: 2px solid var(--pitch-deep);
    position: relative;
}
.tk-archive-masthead-name {
    color: rgba(247,239,217,0.62);
}
.tk-archive-masthead-rule {
    flex: 1;
    height: 1px;
    background: rgba(247,239,217,0.16);
}
.tk-archive-masthead-num {
    color: var(--saffron);
    font-weight: 700;
    letter-spacing: 1.4px;
    white-space: nowrap;
}

/* Body: dominant year + event */
.tk-archive-body {
    padding: 22px 18px 4px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.tk-archive-year {
    display: block;
    margin: 0;
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: 'opsz' 144, 'SOFT' 60, 'WONK' 1;
    font-weight: 700;
    font-size: 64px;
    line-height: 0.9;
    letter-spacing: -3px;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.tk-archive-event {
    display: block;
    margin: 14px 0 0;
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: 'opsz' 60, 'SOFT' 80, 'WONK' 1;
    font-style: italic;
    font-weight: 500;
    font-size: 19px;
    line-height: 1.15;
    letter-spacing: -0.4px;
    color: var(--pitch);
    overflow-wrap: break-word;
}
.tk-archive-host {
    display: block;
    margin: 6px 0 0;
    font: 500 10px/1.3 'JetBrains Mono', monospace;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--ink-3);
}

/* Hairline divider — fades to right */
.tk-archive-divider {
    margin: 18px 18px 0;
    height: 1px;
    background: linear-gradient(90deg, var(--rule) 0%, var(--rule) 70%, transparent 100%);
}

/* Honours: champion + silver/bronze runners-up */
.tk-archive-podium { display: flex; flex-direction: column; }
.tk-archive-champion {
    padding: 14px 18px 10px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.tk-archive-champion-points {
    margin-left: auto;
    flex-shrink: 0;
    text-align: right;
    white-space: nowrap;
    font: 600 10px/1 'JetBrains Mono', monospace;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--ink-3);
}
.tk-archive-champion-points b {
    display: inline;
    margin-right: 3px;
    font: 700 19px/1 'Fraunces', Georgia, serif;
    font-variation-settings: 'opsz' 40, 'SOFT' 30;
    color: var(--saffron-deep);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.6px;
}
.tk-archive-medal {
    flex: 0 0 30px;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #f4ad1f 0%, var(--saffron) 55%, var(--saffron-deep) 100%);
    color: var(--pitch-deep);
    display: flex; align-items: center; justify-content: center;
    box-shadow:
        inset 0 -2px 0 rgba(0,0,0,0.22),
        inset 0 1px 0 rgba(255,255,255,0.30),
        0 2px 0 rgba(0,0,0,0.10);
    font: 700 12px/1 'JetBrains Mono', monospace;
    flex-shrink: 0;
}
.tk-archive-champion-body {
    flex: 1;
    min-width: 0;
}
.tk-archive-champion-label {
    display: block;
    font: 600 8.5px/1 'JetBrains Mono', monospace;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 5px;
}
.tk-archive-champion-name {
    display: block;
    font: 600 16px/1.15 'Fraunces', Georgia, serif;
    font-variation-settings: 'opsz' 36, 'SOFT' 80, 'WONK' 1;
    font-style: italic;
    color: var(--ink);
    letter-spacing: -0.3px;
    overflow-wrap: break-word;
}
.tk-archive-champion-name.is-missing {
    font-style: italic;
    color: var(--ink-3);
    font-weight: 500;
}

/* Footer: faux barcode + status */
.tk-archive-footer {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 18px 11px;
    background: var(--paper-tint);
    border-top: 1px solid var(--rule);
    font: 600 9px/1 'JetBrains Mono', monospace;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--ink-3);
}
.tk-archive-field {
    white-space: nowrap;
    color: var(--ink-3);
    flex-shrink: 0;
}
.tk-archive-field b {
    color: var(--ink);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.tk-archive-barcode {
    flex: 1;
    height: 16px;
    background-image: repeating-linear-gradient(
        90deg,
        var(--ink-2) 0 1.5px,
        transparent 1.5px 4px,
        var(--ink-2) 4px 5px,
        transparent 5px 8px,
        var(--ink-2) 8px 10px,
        transparent 10px 13px,
        var(--ink-2) 13px 13.5px,
        transparent 13.5px 17px
    );
    background-repeat: no-repeat;
    background-size: 78% 100%;
    background-position: left center;
    opacity: 0.55;
}
.tk-archive-status {
    color: var(--crimson);
    white-space: nowrap;
    display: inline-flex; align-items: center; gap: 6px;
    transition: color .2s;
}
.tk-archive-status::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--crimson);
    opacity: 0.55;
    flex-shrink: 0;
    transition: opacity .2s, background .2s;
}
.tk-archive-arrow {
    display: inline-block;
    margin-left: 2px;
}

/* Locked variant: archived, no access */
.tk-archive-card.is-locked {
    background: linear-gradient(180deg, #f6f7f6 0%, #eef1ed 100%);
    cursor: default;
    pointer-events: none;
}
.tk-archive-card.is-locked .tk-archive-year { color: var(--ink-3); }
.tk-archive-card.is-locked .tk-archive-event { color: var(--ink-3); }
.tk-archive-card.is-locked .tk-archive-medal {
    background: linear-gradient(180deg, #d6d8d4 0%, #b1b4ad 100%);
    color: #fff;
    box-shadow:
        inset 0 -2px 0 rgba(0,0,0,0.12),
        inset 0 1px 0 rgba(255,255,255,0.30);
}
.tk-archive-card.is-locked .tk-archive-champion-name {
    color: var(--ink-2);
    font-style: italic;
}
.tk-archive-card.is-locked::before {
    background: linear-gradient(180deg, var(--ink-3) 0%, var(--ink-2) 100%);
    opacity: 0.35;
}
.tk-archive-card.is-locked .tk-archive-masthead {
    background: linear-gradient(180deg, #3a4239 0%, #2c322c 100%);
}
.tk-archive-card.is-locked .tk-archive-status { color: var(--ink-3); }
.tk-archive-card.is-locked .tk-archive-status::before { background: var(--ink-3); opacity: 0.4; }

@media (prefers-reduced-motion: reduce) {
    .tk-archive-card { opacity: 1 !important; animation: none !important; }
    a.tk-archive-card:hover { transform: none !important; }
}

/* ---- Press Pass (replaces .tk-user-panel for dashboard pages) ----------- */
.tk-press-pass {
    position: relative;
    display: block;
    padding: 14px 18px 12px;
    background: linear-gradient(180deg, rgba(247,239,217,0.04) 0%, rgba(247,239,217,0.10) 100%);
    border: 1px solid rgba(247,239,217,0.16);
    border-radius: 4px 4px 8px 8px;
    color: var(--cream-ink);
    min-width: 260px;
    margin: 14px 0 14px auto;
    overflow: hidden;
}
/* Saffron lanyard bar at top */
.tk-press-pass::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--saffron-deep) 0%, var(--saffron) 50%, var(--saffron-deep) 100%);
}
/* Tiny "clip hole" dot just below the lanyard */
.tk-press-pass::after {
    content: "";
    position: absolute; top: 10px; left: 50%;
    transform: translateX(-50%);
    width: 28px; height: 4px;
    background: rgba(0,0,0,0.35);
    border-radius: 999px;
    box-shadow: inset 0 1px 0 rgba(0,0,0,0.4);
}
.tk-press-pass-label {
    display: flex; align-items: center; gap: 8px;
    margin: 10px 0 4px;
    font: 600 9.5px/1 'JetBrains Mono', monospace;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: rgba(247,239,217,0.55);
}
.tk-press-pass-label::after {
    content: "";
    flex: 1; height: 1px;
    background: rgba(247,239,217,0.10);
}
.tk-press-pass-name {
    font: 700 18px/1.1 'Fraunces', Georgia, serif;
    font-variation-settings: 'opsz' 60, 'SOFT' 40;
    color: #fff;
    letter-spacing: -0.4px;
    display: block;
}
.tk-press-pass-name em {
    font-style: italic;
    color: #f7d77a;
    font-variation-settings: 'opsz' 60, 'SOFT' 80, 'WONK' 1;
}
.tk-press-pass-meta {
    display: block;
    margin-top: 4px;
    font: 500 10.5px/1.4 'JetBrains Mono', monospace;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: rgba(247,239,217,0.55);
    font-variant-numeric: tabular-nums;
}
.tk-press-pass-meta b { color: var(--cream-ink); font-weight: 500; }

/* Press-pass status row — tips placement or rank update */
.tk-press-pass-status {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 9px;
    padding: 6px 9px;
    font: 600 10.5px/1.2 'JetBrains Mono', monospace;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 3px;
    text-decoration: none;
    transition: background 160ms ease, transform 160ms ease;
}
a.tk-press-pass-status { cursor: pointer; }
.tk-press-pass-status .tk-status-text { font-weight: 600; color: #fff; }
.tk-press-pass-status .tk-status-meta {
    margin-left: auto;
    font-weight: 500;
    color: rgba(247,239,217,0.55);
    letter-spacing: 0.04em;
    text-transform: lowercase;
}
.tk-press-pass-status .tk-status-cta {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 700;
    color: #f7d77a;
    letter-spacing: 0.10em;
}
.tk-press-pass-status .tk-status-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 0 currentColor;
    animation: tkLivePulse 1.6s ease-out infinite;
}

/* Variants */
.tk-press-pass-status.is-none {
    background: linear-gradient(90deg, rgba(196,122,7,0.22) 0%, rgba(196,122,7,0.10) 100%);
    border: 1px solid rgba(247,201,101,0.35);
    color: #f7d77a;
}
.tk-press-pass-status.is-none:hover {
    transform: translateY(-1px);
    background: linear-gradient(90deg, rgba(196,122,7,0.32) 0%, rgba(196,122,7,0.18) 100%);
}
.tk-press-pass-status.is-none .tk-status-dot { background: #f7d77a; }
.tk-press-pass-status.is-none .tk-status-text { color: #f7d77a; }

.tk-press-pass-status.is-pending {
    background: rgba(247,239,217,0.06);
    border: 1px solid rgba(247,239,217,0.14);
    color: rgba(247,239,217,0.65);
}
.tk-press-pass-status.is-pending .tk-status-dot {
    background: rgba(247,239,217,0.55);
    animation: none;
}
.tk-press-pass-status.is-pending .tk-status-text { color: rgba(247,239,217,0.85); }

.tk-press-pass-status.is-ranked {
    background: linear-gradient(90deg, rgba(74,222,128,0.18) 0%, rgba(74,222,128,0.06) 100%);
    border: 1px solid rgba(74,222,128,0.38);
    color: rgba(247,239,217,0.78);
}
.tk-press-pass-status.is-ranked:hover {
    transform: translateY(-1px);
    background: linear-gradient(90deg, rgba(74,222,128,0.28) 0%, rgba(74,222,128,0.12) 100%);
}
.tk-press-pass-status.is-ranked .tk-status-rank {
    font: 700 13px/1 'Fraunces', serif;
    font-style: italic;
    color: #86efac;
    letter-spacing: -0.01em;
    text-transform: none;
}
.tk-press-pass-status.is-ranked .tk-status-text b {
    color: #fff;
    font-weight: 700;
    font-feature-settings: 'tnum';
}

.tk-press-pass-foot {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed rgba(247,239,217,0.18);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font: 600 10px/1 'JetBrains Mono', monospace;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}
.tk-press-pass-foot .tk-online {
    color: rgba(247,239,217,0.55);
    font-weight: 500;
}
.tk-press-pass-foot .tk-online a {
    color: rgba(247,239,217,0.55);
    text-decoration: none;
    border: none;
}
.tk-press-pass-foot .tk-online a:hover { color: rgba(247,239,217,0.9); }
.tk-press-pass-foot .tk-online b {
    color: #fff;
    font-weight: 600;
    margin-left: 4px;
    font-variant-numeric: tabular-nums;
}
.tk-press-pass-foot a.tk-logout {
    color: #f7c965;
    text-decoration: none;
    border-bottom: 1px dashed rgba(247,201,101,0.55);
    padding-bottom: 1px;
    transition: color .15s, border-color .15s;
    display: inline-flex; align-items: center; gap: 6px;
}
.tk-press-pass-foot a.tk-logout:hover {
    color: #fff8e1;
    border-color: #fff8e1;
}

/* ---- Dashboard wrapper inset: gives the flat dashboard rows
   (press ribbon, section headers, hero, ledger) a touch of breathing
   room from the container edge. Doesn't affect the welcome page. */
body#page2 .container_12 .wrapper.tk-dashboard {
    padding: 0 12px;
}
@media (max-width: 480px) {
    body#page2 .container_12 .wrapper.tk-dashboard { padding: 0 4px; }
}

/* ---- Section pill: count badge sitting next to the section title
   (replaces the lonely text on the far right of the rule). */
.tk-section-header .tk-section-pill.is-empty {
    background: transparent;
    border: 1px dashed rgba(14,58,35,0.28);
    color: var(--ink-3);
    font-style: italic;
    text-transform: none;
    letter-spacing: 0.04em;
    font-weight: 500;
    font-family: 'Fraunces', serif;
    font-size: 11.5px;
    padding: 4px 11px;
}
.tk-section-header .tk-section-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(14,58,35,0.08);
    border: 1px solid rgba(14,58,35,0.18);
    font: 600 10px/1 'JetBrains Mono', monospace;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--pitch);
    white-space: nowrap;
    flex-shrink: 0;
    align-self: center;
}
.tk-section-header .tk-section-pill b {
    color: var(--pitch);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.2px;
    font-size: 12px;
}
.tk-section-header.tk-section-active .tk-section-pill {
    background: rgba(14,58,35,0.10);
    border-color: rgba(14,58,35,0.28);
    color: var(--pitch);
}
.tk-section-header.tk-section-active .tk-section-pill b { color: var(--pitch); }
.tk-section-header.tk-section-archive .tk-section-pill {
    background: rgba(155,42,42,0.08);
    border-color: rgba(155,42,42,0.25);
    color: var(--crimson);
}
.tk-section-header.tk-section-archive .tk-section-pill b { color: var(--crimson); }

/* ---- Mobile tightening for dashboard components ------------------------ */
@media (max-width: 899px) {
    .tk-press-pass { min-width: 0; margin: 0 0 14px; flex: 1 1 100%; }
    .tk-section-header { gap: 12px; margin: 22px 0 12px; }
    .tk-section-header .tk-section-title { font-size: 24px; }
    /* Mobile hero card: keep at wrapper inner width — content cards need
       visible breathing room from the viewport edge. The press ribbon stays
       full-bleed as page chrome. */
    .tk-event-hero h3 { font-size: 29px; letter-spacing: -1px; }
    .tk-archive-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 16px;
        margin-top: 14px;
        grid-auto-rows: min-content;
    }
    /* `align-self: start` stops grid from stretching cards to match the row's
       tallest neighbor. !important on min-height defeats any iOS cascade
       quirk where the desktop 348px floor leaked through. */
    .tk-archive-card {
        min-height: 0 !important;
        height: auto !important;
        align-self: start;
    }
    .tk-archive-body { padding-top: 18px; padding-bottom: 4px; flex: 0 0 auto; }
    .tk-archive-footer { margin-top: 12px; }
    .tk-archive-year { font-size: 52px; letter-spacing: -2.2px; }
    .tk-archive-event { font-size: 16.5px; margin-top: 10px; }
    .tk-archive-divider { margin-top: 14px; }
    .tk-archive-champion { padding-top: 10px; padding-bottom: 10px; }
}
@media (max-width: 480px) {
    /* Mobile: -16px breaks out of wrapper (4px) + body (12px) padding so the ribbon
       spans the full viewport width on smallest screens too. */
    .tk-press-ribbon {
        padding: 10px 18px; font-size: 9.5px; letter-spacing: 0.5px; gap: 6px;
        width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        flex-wrap: nowrap; align-items: center;
        overflow: hidden;
    }
    .tk-press-ribbon::before { width: 6px; height: 6px; }
    .tk-press-ribbon .tk-ribbon-bar { display: none; }
    .tk-press-ribbon .tk-ribbon-date {
        font-size: 9.5px; letter-spacing: 0.4px;
        margin-left: auto;
    }
    .tk-section-header { gap: 10px; flex-wrap: wrap; }
    .tk-section-header .tk-section-title { font-size: 22px; }
    .tk-section-header .tk-section-rule { display: none; }
    .tk-event-hero-masthead { padding: 11px 16px 10px 18px; gap: 8px; font-size: 9px; letter-spacing: 1.4px; flex-wrap: wrap; }
    .tk-event-hero-edition { display: none; }
    .tk-event-hero-mast-rule { min-width: 8px; }
    /* Stack the feature: title block, then the stat strip runs along the bottom */
    .tk-event-hero-body { flex-direction: column; align-items: stretch; gap: 0; padding: 16px 18px 18px; }
    .tk-event-hero-eyebrow { margin-bottom: 9px; }
    .tk-event-hero h3 { font-size: 26px; letter-spacing: -0.8px; }
    .tk-event-hero-host { font-size: 15px; }
    .tk-event-hero-meta {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-end;
        gap: 16px;
        margin-top: 16px;
        padding: 14px 0 0;
        border-left: 0;
        border-top: 1px solid var(--rule);
        text-align: left;
    }
    .tk-meta-cell dt { margin-bottom: 3px; }
    .tk-meta-cell dd { font-size: 13.5px; }
    .tk-meta-cell dd.tk-meta-count { font-size: 26px; }
    .tk-event-hero-status { font-size: 8px; padding: 4px 8px; letter-spacing: 1.2px; }
    .tk-hero-cta { padding: 14px 18px; font-size: 11px; letter-spacing: 1.4px; }
    /* Compact 2-col archive cards. Fixed 2-col grid + min-content auto-rows
       guarantees rows hug content height. !important on min-height defeats
       any iOS cascade quirk where the desktop 348px floor leaked through. */
    .tk-archive-grid {
        gap: 10px;
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: min-content;
    }
    .tk-archive-card {
        min-height: 0 !important;
        height: auto !important;
        align-self: start;
    }
    .tk-archive-masthead { font-size: 8px; letter-spacing: 1.4px; padding: 7px 11px 6px 13px; gap: 7px; }
    .tk-archive-body { padding: 12px 13px 2px; flex: 0 0 auto; }
    .tk-archive-footer { margin-top: 10px; }
    .tk-archive-year { font-size: 38px; letter-spacing: -1.4px; }
    .tk-archive-event { font-size: 14px; margin-top: 8px; }
    .tk-archive-host { font-size: 9px; letter-spacing: 1.3px; margin-top: 3px; }
    .tk-archive-divider { margin: 10px 13px 0; }
    /* Narrow card: give the name the full width and drop the points onto
       their own line beneath it (indented under the body) — no truncation. */
    .tk-archive-champion { padding: 9px 13px; gap: 9px; flex-wrap: wrap; }
    .tk-archive-medal { flex-basis: 22px; width: 22px; height: 22px; font-size: 10px; }
    .tk-archive-champion-label { font-size: 8px; letter-spacing: 2px; margin-bottom: 3px; }
    .tk-archive-champion-name { font-size: 13px; }
    .tk-archive-champion-points {
        font-size: 8px;
        flex-basis: 100%;
        margin-left: 0;
        padding-left: 31px;
        box-sizing: border-box;
        text-align: left;
    }
    .tk-archive-champion-points b { font-size: 15px; }
    .tk-archive-footer { padding: 7px 13px 8px; font-size: 8px; letter-spacing: 1.2px; gap: 8px; }
    .tk-archive-field { display: none; }
    .tk-archive-barcode { height: 11px; }
    .tk-press-pass { padding: 12px 14px 11px; }
    .tk-press-pass-name { font-size: 16px; }
    .tk-press-pass-meta { font-size: 9.5px; letter-spacing: 1.2px; }
    .tk-press-pass-foot { font-size: 9.5px; letter-spacing: 1.2px; }
}

/* ==========================================================================
   Legacy logged-in layout components (kept for backward-compat)
   ========================================================================== */

/* ---- Header row: logo on the left, user panel on the right --------------- */
body#page2 > .main > header .tk-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding: 0 32px;
    flex-wrap: wrap;
}
body#page2 > .main > header .tk-header-row h1 {
    margin: 0;
    padding: 22px 0 16px;
    flex: 0 1 auto;
}
body#page2 > .main > header .tk-header-row .tk-lockup {
    padding: 0;
    gap: 18px;
}

/* Logo link as its own grid container for pages without a status pill.
   Replaces the .tk-lockup wrapper used on the welcome page —
   avoids the layout breakage of <div> nested inside <a> inside <h1>.

   The !important resets below override legacy `style.css h1 a` rules:
   image-replacement technique (width:193px height:41px text-indent:-999em
   background:url(logo.png)) that hides the text and clips the SVG mark. */
body#page2 > .main > header .tk-logo-link {
    display: inline-grid !important;
    grid-template-columns: auto auto;
    align-items: center;
    gap: 18px;
    text-decoration: none;
    color: inherit;
    transition: opacity .15s;
    /* Legacy resets */
    float: none !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    background: none !important;
    text-indent: 0 !important;
    white-space: normal !important;
    margin: 0 !important;
}
body#page2 > .main > header .tk-logo-link:hover { opacity: 0.92; }
/* Explicit display rules so spans don't collapse weirdly inside the grid */
body#page2 > .main > header .tk-logo-link .tk-wordmark { display: block; line-height: 1; }
body#page2 > .main > header .tk-logo-link .tk-name    { display: block; color: #fff; font-size: 34px; }
body#page2 > .main > header .tk-logo-link .tk-meta    { display: block; }
/* Tournament event logo (replaces wordmark when an event is selected) */
body#page2 > .main > header .tk-logo-link .tk-event-logo {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
}

/* ---- User panel (top-right, rounded "logged in" window) ------------------ */
.tk-user-panel {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 16px 10px;
    background: rgba(247,239,217,0.07);
    border: 1px solid rgba(247,239,217,0.16);
    border-radius: 14px;
    color: var(--cream-ink);
    min-width: 240px;
    align-self: center;
    margin: 14px 0 14px auto; /* margin-left:auto pushes it to the right of the flex row */
}
.tk-user-panel .tk-user-name {
    font: 700 15px/1.2 'Fraunces', Georgia, serif;
    font-variation-settings: 'opsz' 36, 'SOFT' 30;
    color: #fff;
    letter-spacing: -0.2px;
}
.tk-user-panel .tk-user-name em {
    font-style: italic;
    color: #f7d77a;
}
.tk-user-panel .tk-user-meta {
    display: block;
    font: 500 10px/1.5 'JetBrains Mono', monospace;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: rgba(247,239,217,0.62);
}
.tk-user-panel .tk-user-meta b { color: var(--cream-ink); font-weight: 500; }
.tk-user-panel-actions {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(247,239,217,0.10);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font: 600 10px/1 'JetBrains Mono', monospace;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}
.tk-user-panel-actions .tk-online {
    color: rgba(247,239,217,0.55);
    font-weight: 500;
}
.tk-user-panel-actions .tk-online b {
    color: #fff;
    font-weight: 600;
    margin-left: 4px;
}
.tk-user-panel-actions a {
    color: var(--saffron);
    text-decoration: none;
    border-bottom: 1px dashed rgba(196,122,7,0.5);
    padding-bottom: 1px;
    transition: color .15s, border-color .15s;
    display: inline-flex; align-items: center; gap: 6px;
}
.tk-user-panel-actions a:hover {
    color: #f4c060;
    border-color: #f4c060;
}

/* ---- Admin secondary nav (shown only to admin/presenter users) ----------- */
body#page2 > .main > header .menu.admin {
    border-top: 1px solid rgba(247,239,217,0.08);
    margin-top: 0;
    padding-top: 0;
}
body#page2 > .main > header .menu.admin li a {
    font-size: 10.5px;
    letter-spacing: 1.2px;
    color: rgba(247,239,217,0.55);
    padding: 11px 14px;
}
body#page2 > .main > header .menu.admin li a:hover {
    color: rgba(247,239,217,0.95);
    border-bottom-color: rgba(247,239,217,0.4);
}

/* ---- Data tables (tournaments, rankings, etc.) --------------------------- */
.tk-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 8px;
    font: 500 13.5px/1.45 'IBM Plex Sans', sans-serif;
}
.tk-table thead th {
    text-align: left;
    font: 600 10.5px/1 'JetBrains Mono', monospace;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--ink-3);
    padding: 4px 12px 10px 0;
    border-bottom: 1px solid var(--rule);
    vertical-align: bottom;
}
.tk-table thead th:last-child { padding-right: 0; }
.tk-table tbody td {
    padding: 13px 12px 13px 0;
    border-bottom: 1px solid var(--rule);
    color: var(--ink-2);
    vertical-align: middle;
}
.tk-table tbody td:last-child { padding-right: 0; }
.tk-table tbody tr:last-child td { border-bottom: none; }
.tk-table tbody tr:hover td { background: rgba(14,58,35,0.025); }
.tk-table .tk-table-event {
    color: var(--ink);
    font-weight: 600;
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: 'opsz' 36, 'SOFT' 30;
    font-size: 16px;
    line-height: 1.2;
}
.tk-table .tk-table-event a {
    color: var(--pitch);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color .15s, color .15s;
}
.tk-table .tk-table-event a:hover {
    color: var(--saffron-deep);
    border-bottom-color: var(--saffron);
}
.tk-table .tk-table-event .tk-table-locked {
    color: var(--ink-3);
    font-style: italic;
}
.tk-table .tk-table-meta {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 13px;
    color: var(--ink-3);
}
.tk-table .tk-table-date,
.tk-table .tk-table-num {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    color: var(--ink-3);
    letter-spacing: 0.3px;
}
.tk-table .tk-table-action {
    text-align: right;
    font: 600 10px/1 'JetBrains Mono', monospace;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    white-space: nowrap;
}
.tk-table .tk-table-action a {
    color: var(--saffron-deep);
    text-decoration: none;
    border-bottom: 1px dashed var(--saffron);
    padding-bottom: 1px;
}
.tk-table .tk-table-action a:hover { color: var(--saffron); }
.tk-table .tk-table-status {
    display: inline-block;
    padding: 4px 8px;
    background: rgba(196,122,7,0.10);
    color: var(--saffron-deep);
    font: 600 9.5px/1 'JetBrains Mono', monospace;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    border-radius: 2px;
}
.tk-table-empty {
    color: var(--ink-3);
    font-style: italic;
    padding: 16px 0;
    font-size: 14px;
}

/* Card variants — semantic green/crimson coloring matching legacy "gron/rod" */
.tk-card-active h2 { color: var(--pitch); }
.tk-card-active .tk-eyebrow b { color: var(--pitch); }
.tk-card-active .tk-table thead th { color: var(--pitch-light); }

.tk-card-archive h2 { color: var(--crimson); }
.tk-card-archive .tk-eyebrow b { color: var(--crimson); }
.tk-card-archive .tk-table thead th { color: #8a3232; }
.tk-card-archive .tk-table .tk-medal { background: var(--crimson); }

/* Archive table: give the Event column priority width so titles don't wrap awkwardly */
.tk-card-archive .tk-table { table-layout: fixed; }
.tk-card-archive .tk-table thead th:nth-child(1) { width: 46%; }
.tk-card-archive .tk-table thead th:nth-child(2) { width: 34%; }
.tk-card-archive .tk-table thead th:nth-child(3) { width: 20%; }
.tk-card-archive .tk-table tbody td { word-wrap: break-word; overflow-wrap: break-word; }

/* Active table: 4 columns; give Event the largest share */
.tk-card-active .tk-table { table-layout: fixed; }
.tk-card-active .tk-table thead th:nth-child(1) { width: 40%; }
.tk-card-active .tk-table thead th:nth-child(2) { width: 25%; }
.tk-card-active .tk-table thead th:nth-child(3) { width: 18%; }
.tk-card-active .tk-table thead th:nth-child(4) { width: 17%; }

/* Subtle medal accents for podium rows in finished-tournament tables */
.tk-table .tk-medal {
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
    background: var(--saffron);
}

/* Empty-state hint for "request pending" etc. */
.tk-notice {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin: 0 0 18px;
    padding: 12px 14px;
    border-left: 3px solid var(--pitch);
    background: rgba(14,58,35,0.05);
    color: var(--ink);
    font-size: 14px;
    line-height: 1.45;
    border-radius: 2px;
}
.tk-notice svg { flex: 0 0 18px; color: var(--pitch); }

/* Footer disclaimer paragraph */
.tk-footnote {
    margin-top: 18px;
    font-size: 12px;
    color: var(--ink-3);
    line-height: 1.5;
}

/* ---- Mobile tightening for the new components ---------------------------- */
@media (max-width: 899px) {
    body#page2 > .main > header .tk-header-row { padding: 0 22px; gap: 18px; }
    body#page2 > .main > header .tk-header-row h1 { padding: 18px 0 12px; }
    body#page2 > .main > header .tk-logo-link .tk-event-logo { max-height: 72px; }
    .tk-user-panel { min-width: 0; flex: 1 1 100%; margin: 0 0 14px; }
    /* Menu: let items wrap to multiple rows instead of overflowing/colliding */
    body#page2 > .main > header .menu {
        flex-wrap: wrap;
        gap: 0 2px;
        row-gap: 0;
    }
    body#page2 > .main > header .menu li a {
        white-space: nowrap;
        padding: 11px 12px;
    }
}
@media (max-width: 480px) {
    body#page2 > .main > header .tk-header-row { padding: 0 16px; }
    body#page2 > .main > header .tk-logo-link .tk-event-logo { max-height: 56px; }
    .tk-user-panel { padding: 10px 14px 9px; border-radius: 12px; }
    .tk-user-panel .tk-user-name { font-size: 14px; }
    .tk-user-panel .tk-user-meta { font-size: 9.5px; letter-spacing: 1.2px; }
    .tk-user-panel-actions { font-size: 9.5px; letter-spacing: 1.2px; }

    body#page2 > .main > header .menu.admin li a {
        font-size: 9.5px; letter-spacing: 1px; padding: 10px 10px;
    }

    /* Data tables fit narrow screens */
    .tk-table { font-size: 13px; }
    .tk-table thead th { font-size: 9.5px; letter-spacing: 1.4px; padding: 4px 8px 9px 0; }
    .tk-table tbody td { padding: 11px 8px 11px 0; }
    .tk-table .tk-table-event { font-size: 14.5px; }
    .tk-table .tk-table-date { font-size: 11.5px; }
    .tk-table .tk-table-action { font-size: 9px; letter-spacing: 1.3px; }
}

/* ---- Utilities (replace recurring inline style="" attributes) ----------- */
.tk-h2-sm           { font-size: 28px; }
.tk-h2-sm.tk-h2-spaced { margin-bottom: 18px; }
.tk-logo-num {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 700;
    color: var(--pitch);
    font-size: 13px;
}
.tk-email-display {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
}
.tk-helper {
    font-size: 14px;
    color: var(--ink-2);
    margin-bottom: 6px;
}
.tk-login form { margin-top: 14px; }
/* Each flag + country name is a tight pair; .tk-hosts provides the wider
   inter-pair gap so the groups read distinctly. */
.tk-host-pair { display: inline-flex; align-items: center; gap: 6px; }
.tk-hosts { gap: 14px; }
/* Footer banner inline-coloured spans */
.tk-footer-banner .tk-fb-roman { color: #fff; font-weight: 600; }
.tk-footer-banner .tk-fb-num   { color: var(--saffron); font-weight: 600; }

/* ---- Staggered reveal on load ------------------------------------------ */
@keyframes tk-rise {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.tk-card, .tk-footer-banner {
    opacity: 0;
    animation: tk-rise 0.55s ease-out forwards;
}
.tk-card:nth-of-type(1) { animation-delay: 0.05s; }
.tk-card:nth-of-type(2) { animation-delay: 0.15s; }
.tk-card:nth-of-type(3) { animation-delay: 0.10s; }
.tk-card:nth-of-type(4) { animation-delay: 0.20s; }
.tk-footer-banner       { animation-delay: 0.30s; }

/* If the user (or iOS) prefers reduced motion, show everything immediately */
@media (prefers-reduced-motion: reduce) {
    .tk-card, .tk-footer-banner { opacity: 1 !important; animation: none !important; }
    .tk-dot, .tk-chronicle li.is-active .tk-state::before { animation: none !important; }
}

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 899px) {
    .tk-lockup { grid-template-columns: auto 1fr; gap: 16px; padding: 22px 22px 16px; }
    .tk-status { grid-column: 1 / -1; justify-self: start; margin-top: 6px; }
    .tk-intro h2 { font-size: 40px; letter-spacing: -1.4px; }
    .tk-card { padding: 22px 20px; }
    .tk-chronicle li { grid-template-columns: 36px 44px 1fr 78px; }
    .tk-chronicle .tk-year { display: none; }
}
@media (max-width: 560px) {
    .tk-wordmark .tk-name { font-size: 28px; }
    .tk-mark { width: 52px; height: 52px; }
    .tk-mark svg { width: 32px; height: 32px; }
    .tk-intro h2 { font-size: 34px; }
    .tk-features li { grid-template-columns: 40px 1fr; }
    .tk-roman { font-size: 22px; }
}

/* Narrow viewports (phones < 480px) — tighter paddings, smaller type,
   and drops decorative tracks that compete for horizontal space.
   Note: `font-size: 16px` on inputs below is the one iOS Safari–specific bit;
   anything smaller triggers Mobile Safari's auto-zoom on focus. */
@media (max-width: 480px) {
    html, body { overflow-x: hidden; }
    body#page2 > .main { padding: 0 12px; }

    /* Header */
    body#page2 > .main > header h1 { padding: 18px 16px 12px; }
    .tk-lockup { padding: 0; gap: 12px; grid-template-columns: auto 1fr; }
    .tk-mark { width: 44px; height: 44px; }
    .tk-mark svg { width: 26px; height: 26px; }
    .tk-wordmark .tk-name { font-size: 22px; letter-spacing: -0.6px; }
    .tk-wordmark .tk-meta { font-size: 9px; letter-spacing: 1.2px; }
    .tk-status { grid-column: 1 / -1; justify-self: start; margin-top: 4px; font-size: 10px; padding: 6px 10px; }
    body#page2 > .main > header .navigation { padding: 0 16px; }
    body#page2 > .main > header .menu li a { padding: 12px 10px; font-size: 10.5px; letter-spacing: 1.2px; }

    /* Cards */
    body#page2 .container_12 .tk-card { padding: 18px 16px !important; }
    /* Drop flex on the eyebrow on mobile — inline children (<b>, <span>) were
       becoming individual flex items, each rendering as its own narrow column.
       Plain block + inline text flow wraps cleanly at the · separators. */
    .tk-eyebrow {
        display: block;
        line-height: 1.5;
        font-size: 9.5px;
        letter-spacing: 1.4px;
    }
    .tk-eyebrow::after { display: none; } /* trailing rule line not needed on mobile */

    /* Intro */
    .tk-intro h2 { font-size: 28px; letter-spacing: -0.8px; }
    .tk-intro .tk-lede { font-size: 14.5px; }
    .tk-hosts { font-size: 10px; letter-spacing: 1px; flex-wrap: wrap; }
    .tk-features li { grid-template-columns: 30px 1fr; gap: 10px; padding: 13px 0; }
    .tk-roman { font-size: 18px; }
    .tk-features strong { font-size: 13px; }
    .tk-features span { font-size: 13.5px; }
    .tk-signature { font-size: 16px; }

    /* Chronicle row */
    .tk-chronicle li { grid-template-columns: 28px 38px 1fr 64px; gap: 10px; padding: 11px 0; }
    .tk-chronicle .tk-num { font-size: 11px; letter-spacing: 0; }
    .tk-chronicle .tk-num::before { content: ""; }      /* drop the "Nº " prefix on narrow screens — column is too tight */
    .tk-chronicle .tk-logo { width: 38px; height: 38px; }
    .tk-chronicle .tk-logo img { max-width: 30px; max-height: 30px; }
    .tk-chronicle .tk-title { font-size: 14px; }
    .tk-chronicle .tk-host { font-size: 11px; margin-top: 2px; }
    .tk-chronicle .tk-state { font-size: 9px; letter-spacing: 1.2px; }

    /* Toggle button */
    .tk-toggle { padding: 12px 14px; font-size: 9.5px; letter-spacing: 1.6px; gap: 8px; }

    /* Login */
    .tk-login input[type=text],
    .tk-login input[type=password] { font-size: 16px; padding: 10px 11px; } /* 16px prevents iOS focus-zoom */
    .tk-login label { font-size: 10px; letter-spacing: 1.6px; }
    .tk-btn { padding: 11px 14px; font-size: 11.5px; letter-spacing: 1.4px; }
    .tk-actions { gap: 10px; padding-top: 14px; }

    /* Rules + example */
    .tk-rules li { grid-template-columns: 36px 1fr; }
    .tk-rules li::before { font-size: 17px; }
    .tk-example { padding: 14px 14px; }
    .tk-example::before { font-size: 8.5px; left: 12px; padding: 0 6px; }
    .tk-score { grid-template-columns: 68px 1fr; gap: 4px 10px; font-size: 12px; }

    /* Privat-spel stamp */
    .tk-stamp { padding: 12px 14px; font-size: 13px; gap: 12px; }
    .tk-stamp svg { flex: 0 0 24px; }

    /* Footer banner */
    .tk-footer-banner { padding: 14px 16px; gap: 10px; font-size: 10.5px; letter-spacing: 1.2px; }
    .tk-footer-banner .tk-fb-score { font-size: 14.5px; }

    /* ------ Overflow defense ------
       CSS Grid 1fr is `minmax(auto, 1fr)` by default, and `auto` won't
       shrink below content's min-content width — pushing letter-spaced
       labels past the viewport. Force `minmax(0, 1fr)` everywhere we
       use 1fr, plus `min-width:0` on descendants for any flex items. */
    body#page2 .tk-card,
    body#page2 .tk-card *,
    body#page2 > .main > header,
    body#page2 > .main > header * { min-width: 0; }

    body#page2 .tk-lockup       { grid-template-columns: auto minmax(0, 1fr); }
    body#page2 .tk-features li  { grid-template-columns: 30px minmax(0, 1fr); }
    body#page2 .tk-rules li     { grid-template-columns: 36px minmax(0, 1fr); }
    /* On narrow screens the label spans the full row (colspan-like), and the
       value goes on its own line below — gives the score the entire card width. */
    body#page2 .tk-score        { grid-template-columns: 1fr; gap: 2px; }
    body#page2 .tk-score > span { margin-top: 8px; color: var(--ink-3); font-size: 11.5px; }
    body#page2 .tk-score > span:first-child { margin-top: 0; }
    body#page2 .tk-score > b    { margin-bottom: 4px; font-size: 14px; white-space: nowrap; }
    .tk-score-summary { font-size: 11.5px; gap: 8px; margin-top: 10px; }
    body#page2 .tk-chronicle li { grid-template-columns: 28px 38px minmax(0, 1fr) 84px; }

    /* Allow long sentences to break — but only at word boundaries, never mid-word.
       This applies to body text where the column might still be too narrow. */
    .tk-features strong,
    .tk-chronicle .tk-host { overflow-wrap: break-word; }
}

/* ==========================================================================
   SYS.PHP — Arena: Sändning (Broadcast) + Statistikbordet (Stats Desk)
   --------------------------------------------------------------------------
   Tournament dashboard. Left rail: today's live matches as press-box cards,
   followed by an upcoming-fixtures ticker. Right rail: a 4-dial stats desk,
   editorial highlights ("Snabbaste / Målkung / Målrikaste"), and a per-edition
   digest strip. Reuses paper, ink, pitch, saffron, crimson tokens.
   ========================================================================== */

/* The dashboard wrapper already runs flex inside .container_12 .wrapper.
   We need the arena to span 100% — it owns its own internal grid. */
body#page2 .container_12 .wrapper.tk-arena-wrap > .tk-arena { flex: 1 1 100%; }

/* The tip alert is a flex child of the same wrapper. Without this it stays
   content-sized (flex: 0 1 auto) and gets squeezed onto the press ribbon's row,
   floating to the right. Force its own full-width row so it sits above the
   arena, left-aligned with "Dagens omgångar". */
body#page2 .container_12 .wrapper.tk-arena-wrap > .tk-tip-alert { flex: 1 1 100%; }

.tk-arena {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
    width: 100%;
    margin-top: 6px;
}

/* ---------------------------------------------------------------- TIP ALERT */
/* Surfaces missing tips on the user's start page. Sits above the arena. */
.tk-tip-alert {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 16px;
    align-items: center;
    padding: 14px 18px;
    margin: 0 0 22px 0;
    background: linear-gradient(180deg, #fff7e3 0%, #f9ecc8 100%);
    border: 1px solid var(--saffron);
    border-left: 4px solid var(--saffron);
    border-radius: 4px;
    box-shadow: 0 1px 0 var(--rule-soft);
    position: relative;
    animation: tk-tip-alert-rise 0.45s ease-out both;
}
@keyframes tk-tip-alert-rise {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.tk-tip-alert.is-urgent {
    border-color: #b54a08;
    border-left-color: #b54a08;
    background: linear-gradient(180deg, #ffe7c8 0%, #f9d8a4 100%);
    animation: tk-tip-alert-rise 0.45s ease-out both, tk-tip-alert-pulse 2.2s ease-in-out 0.5s infinite;
}
@keyframes tk-tip-alert-pulse {
    0%, 100% { box-shadow: 0 1px 0 var(--rule-soft), 0 0 0 0 rgba(181, 74, 8, 0.0); }
    50%      { box-shadow: 0 1px 0 var(--rule-soft), 0 0 0 6px rgba(181, 74, 8, 0.10); }
}

.tk-tip-alert-icon {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--saffron);
    color: #fff;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.tk-tip-alert.is-urgent .tk-tip-alert-icon { background: #b54a08; }

.tk-tip-alert-body {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}
.tk-tip-alert-kicker {
    font: 700 11px/1 "Inter", system-ui, sans-serif;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #5a3603;
}
.tk-tip-alert.is-urgent .tk-tip-alert-kicker { color: #6b1e05; }

.tk-tip-alert-msg {
    margin: 0;
    font: 500 14px/1.45 "Inter", system-ui, sans-serif;
    color: var(--ink);
}
.tk-tip-alert-msg b { font-weight: 700; color: #5a3603; }
.tk-tip-alert.is-urgent .tk-tip-alert-msg b { color: #6b1e05; }

.tk-tip-alert-time {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font: 500 11.5px/1 "Inter", system-ui, sans-serif;
    color: #5a3603;
    padding: 4px 9px;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(196, 122, 7, 0.30);
    border-radius: 2px;
    width: max-content;
    margin-top: 2px;
    letter-spacing: 0.02em;
}
.tk-tip-alert-time b { font-weight: 700; color: var(--pitch); }
.tk-tip-alert.is-urgent .tk-tip-alert-time {
    border-color: rgba(181, 74, 8, 0.40);
    color: #6b1e05;
}
.tk-tip-alert.is-urgent .tk-tip-alert-time b { color: #6b1e05; }

.tk-tip-alert-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    background: var(--pitch);
    color: #fff;
    font: 700 12px/1 "Inter", system-ui, sans-serif;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 2px;
    transition: background 0.15s ease, transform 0.15s ease;
    white-space: nowrap;
}
.tk-tip-alert-cta:hover {
    background: var(--pitch-deep);
    transform: translateY(-1px);
    color: #fff;
    text-decoration: none;
}

@media (max-width: 640px) {
    .tk-tip-alert {
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "icon body"
            "cta cta";
        gap: 12px;
        padding: 14px 14px;
    }
    .tk-tip-alert-icon { grid-area: icon; width: 36px; height: 36px; }
    .tk-tip-alert-body { grid-area: body; }
    .tk-tip-alert-cta  { grid-area: cta; justify-content: center; padding: 12px 16px; }
    .tk-tip-alert-msg { font-size: 13.5px; }
}

/* ---------------------------------------------------------------- BROADCAST */

.tk-broadcast { min-width: 0; }

.tk-section-header.tk-section-broadcast,
.tk-section-header.tk-section-fixtures,
.tk-section-header.tk-section-folkets { margin-top: 4px; }
.tk-section-header.tk-section-fixtures { margin-top: 32px; }
.tk-section-header.tk-section-folkets  { margin-top: 32px; }

/* ---- Folkets tips card -------------------------------------------------
   Editorial coupon. Paper surface, hairline rules, three semantic accents
   in the brand palette (pitch / saffron / clay). No gradients, no gloss.
---------------------------------------------------------------------- */
.tk-folkets-card {
    --fk-home:      var(--pitch);       /* 1 — hemmavinst */
    --fk-home-soft: #dfeede;
    --fk-draw:      var(--saffron);     /* X — oavgjort   */
    --fk-draw-soft: #f5e4c4;
    --fk-away:      #8b3a1b;            /* 2 — bortavinst, clay */
    --fk-away-soft: #f1e0d6;

    position: relative;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 4px;
    overflow: hidden;
    margin-top: 2px;
    box-shadow: 0 1px 0 var(--rule-soft);
    animation: tk-folkets-rise 0.45s ease-out both;
}
@keyframes tk-folkets-rise {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Three-stripe coupon mark across the top edge */
.tk-folkets-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(
        90deg,
        var(--fk-home) 0% 33.33%,
        var(--fk-draw) 33.33% 66.66%,
        var(--fk-away) 66.66% 100%
    );
}

/* Slides */
.tk-folkets-slide { display: block; }
.tk-folkets-slide[hidden] { display: none; }

/* Head */
.tk-folkets-head {
    padding: 18px 22px 14px 22px;
    border-bottom: 1px dashed var(--rule);
}
.tk-folkets-card.has-nav .tk-folkets-head { padding-right: 116px; }

.tk-folkets-when {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.tk-folkets-kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: 600 10.5px/1 "Inter", system-ui, sans-serif;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.tk-folkets-kicker svg { color: var(--saffron); }
.tk-folkets-time {
    font: 700 12px/1 "Inter", system-ui, sans-serif;
    color: var(--pitch);
    letter-spacing: 0.04em;
    padding: 4px 10px;
    background: var(--paper-tint);
    border-radius: 2px;
}

.tk-folkets-fixture {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 14px;
}
.tk-folkets-team {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.tk-folkets-team-home { justify-content: flex-start; }
.tk-folkets-team-away { justify-content: flex-end; }
.tk-folkets-team-flag {
    width: 28px;
    height: 19px;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(8,30,18,0.14);
    flex-shrink: 0;
    display: inline-block;
}
.tk-folkets-team-name {
    font: 700 15px/1.2 "Inter", system-ui, sans-serif;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.tk-folkets-vs {
    font: 600 10.5px/1 "Inter", system-ui, sans-serif;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-3);
}

/* Carousel nav — ghost buttons, top-right */
.tk-folkets-nav {
    position: absolute;
    top: 14px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    z-index: 2;
}
.tk-folkets-nav-btn {
    width: 26px; height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 50%;
    color: var(--pitch);
    cursor: pointer;
    padding: 0;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.tk-folkets-nav-btn:hover {
    background: var(--paper-tint);
    border-color: var(--ink-3);
    color: var(--ink);
}
.tk-folkets-nav-btn:focus-visible {
    outline: 2px solid var(--saffron);
    outline-offset: 1px;
}
.tk-folkets-nav-indicator {
    font: 600 11px/1 "Inter", system-ui, sans-serif;
    color: var(--ink-2);
    letter-spacing: 0.04em;
    min-width: 32px;
    text-align: center;
}
.tk-folkets-nav-indicator b { color: var(--ink); font-weight: 700; }
.tk-folkets-nav-indicator i {
    font-style: normal;
    color: var(--ink-3);
    margin: 0 2px;
    font-weight: 400;
}

/* Drama eyebrow */
.tk-folkets-drama {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 14px 22px 0 22px;
    padding: 5px 9px;
    font: 600 10.5px/1 "Inter", system-ui, sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 2px;
    width: max-content;
    max-width: calc(100% - 44px);
}
.tk-folkets-drama-dominant {
    background: var(--fk-home-soft);
    color: var(--fk-home);
    border: 1px solid rgba(14, 58, 35, 0.30);
}
.tk-folkets-drama-split {
    background: var(--fk-draw-soft);
    color: #5a3603;
    border: 1px solid rgba(196, 122, 7, 0.35);
}

/* Vote bar */
.tk-folkets-bar {
    display: flex;
    height: 8px;
    margin: 14px 22px;
    border: 1px solid var(--rule);
    background: var(--paper-tint);
    border-radius: 2px;
    overflow: hidden;
}
.tk-folkets-bar-seg {
    height: 100%;
    transition: flex-basis 0.4s ease;
}
.tk-folkets-bar-1 { background: var(--fk-home); }
.tk-folkets-bar-x { background: var(--fk-draw); }
.tk-folkets-bar-2 { background: var(--fk-away); }

/* Vote tiles */
.tk-folkets-votes {
    list-style: none;
    margin: 0;
    padding: 0 18px 18px 18px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.tk-folkets-vote {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 3px 10px;
    align-items: center;
    padding: 10px 12px;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 4px;
    transition: border-color 0.18s ease, background 0.18s ease;
}
.tk-folkets-vote:hover { border-color: var(--ink-3); background: var(--paper-tint); }

.tk-folkets-vote-tag {
    grid-row: span 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    border-radius: 3px;
    font: 800 13px/1 "Inter", system-ui, sans-serif;
    letter-spacing: 0.02em;
    color: #fff;
    flex-shrink: 0;
}
.tk-folkets-vote-1 .tk-folkets-vote-tag { background: var(--fk-home); }
.tk-folkets-vote-x .tk-folkets-vote-tag { background: var(--fk-draw); }
.tk-folkets-vote-2 .tk-folkets-vote-tag { background: var(--fk-away); }

.tk-folkets-vote-team {
    font: 600 12px/1.2 "Inter", system-ui, sans-serif;
    color: var(--ink-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.tk-folkets-vote-pct {
    font: 800 22px/1 "Inter", system-ui, sans-serif;
    color: var(--ink);
    letter-spacing: -0.02em;
}
.tk-folkets-vote-pct i {
    font-style: normal;
    font-size: 13px;
    color: var(--ink-3);
    margin-left: 2px;
    letter-spacing: 0;
    font-weight: 700;
}
.tk-folkets-vote-cnt {
    grid-column: 2;
    font: 500 10px/1 "Inter", system-ui, sans-serif;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-3);
}

/* Leader treatment — saffron underline, no gold gloss */
.tk-folkets-vote.is-leader {
    border-color: var(--saffron);
    box-shadow: 0 0 0 2px rgba(196, 122, 7, 0.14);
    background: var(--surface);
}
.tk-folkets-vote-crown {
    position: absolute;
    top: -7px;
    right: -7px;
    width: 18px; height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--saffron);
    color: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 0 rgba(0,0,0,0.05);
}

/* Empty */
.tk-folkets-empty {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 22px;
    padding: 14px 16px;
    background: var(--paper-tint);
    border: 1px dashed var(--rule);
    border-radius: 4px;
    color: var(--ink-2);
    font: 500 13px/1.4 "Inter", system-ui, sans-serif;
}
.tk-folkets-empty svg { color: var(--ink-3); flex-shrink: 0; }
.tk-folkets-empty b { color: var(--ink); font-weight: 700; }

@media (max-width: 760px) {
    .tk-folkets-head { padding: 16px 16px 12px 16px; }
    .tk-folkets-card.has-nav .tk-folkets-head { padding-right: 110px; }
    .tk-folkets-fixture { gap: 10px; }
    .tk-folkets-team-name { font-size: 14px; }
    .tk-folkets-team-flag { width: 22px; height: 15px; }
    .tk-folkets-drama { margin: 12px 16px 0 16px; }
    .tk-folkets-bar { margin: 12px 16px; }
    .tk-folkets-votes { padding: 0 12px 14px 12px; gap: 6px; }
    .tk-folkets-vote { padding: 9px 10px; }
    .tk-folkets-vote-pct { font-size: 19px; }
    .tk-folkets-vote-team { font-size: 11px; }
    .tk-folkets-empty { margin: 14px 16px; }
}

/* ---- Live match card --------------------------------------------------- */
.tk-live-card {
    position: relative;
    display: grid;
    grid-template-columns: 74px 1fr;
    gap: 20px;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-left: 0;                     /* rail handles left edge */
    padding: 18px 22px 16px 22px;
    margin: 0 0 14px 0;
    box-shadow: 0 1px 0 rgba(14,58,35,0.04), 0 8px 22px -22px rgba(14,58,35,0.35);
    opacity: 0;
    transform: translateY(4px);
    animation: tkLiveIn 540ms cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes tkLiveIn { to { opacity: 1; transform: none; } }

/* Status rail — coloured spine running the full card height */
.tk-live-card-rail {
    position: absolute;
    top: -1px; bottom: -1px; left: 0;
    width: 6px;
    background: var(--ink-3);
}
.tk-live-card.is-live    .tk-live-card-rail { background: var(--crimson); }
.tk-live-card.is-final   .tk-live-card-rail { background: var(--pitch-light); }
.tk-live-card.is-upcoming .tk-live-card-rail { background: var(--saffron); }

/* Live cards subtle paper texture for "extra edition" feel */
.tk-live-card.is-live {
    background:
        radial-gradient(120% 80% at 0% 0%, rgba(155,42,42,0.06) 0%, transparent 60%),
        var(--surface);
}

/* Date stamp on the left — like a kicker timestamp */
.tk-live-card-stamp {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 1px solid var(--rule);
    padding: 10px 4px;
    background: var(--paper-tint);
    color: var(--ink);
    line-height: 1;
}
.tk-live-card-day {
    font-family: 'Fraunces', serif;
    font-weight: 700;
    font-size: 30px;
    letter-spacing: -0.02em;
}
.tk-live-card-mon {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.18em;
    color: var(--ink-3);
    margin-top: 4px;
}
.tk-live-card-time {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 500;
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid var(--rule);
    width: 100%;
    color: var(--ink-2);
}

/* Body content */
.tk-live-card-body { min-width: 0; }

.tk-live-card-statusrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.tk-live-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 4px 8px;
    border: 1px solid var(--ink);
    color: var(--ink);
    background: var(--paper-tint);
}
.tk-live-status.is-live      { border-color: var(--crimson); color: var(--crimson); background: rgba(155,42,42,0.05); }
.tk-live-status.is-final     { border-color: var(--pitch-light); color: var(--pitch); background: rgba(14,58,35,0.05); }
.tk-live-status.is-upcoming  { border-color: var(--saffron-deep); color: var(--saffron-deep); background: rgba(196,122,7,0.05); }

.tk-live-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--crimson);
    box-shadow: 0 0 0 0 rgba(155,42,42,0.55);
    animation: tkLivePulse 1.6s ease-out infinite;
}
@keyframes tkLivePulse {
    0%   { box-shadow: 0 0 0 0 rgba(155,42,42,0.55); }
    70%  { box-shadow: 0 0 0 8px rgba(155,42,42,0); }
    100% { box-shadow: 0 0 0 0 rgba(155,42,42,0); }
}

.tk-live-tv {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    padding: 3px 7px;
    border: 1px dashed var(--rule);
    color: var(--ink-2);
    background: transparent;
}

/* Fixture: HOME — score — AWAY, all on one line */
.tk-live-card-fixture {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    margin: 6px 0 12px 0;
}

.tk-live-team {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.tk-live-team-away { justify-content: flex-end; }

.tk-live-team-mark {
    width: 34px; height: 34px;
    flex: 0 0 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--pitch);
    color: var(--cream-ink);
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.04em;
    border-radius: 2px;
}
.tk-live-card.is-final   .tk-live-team-mark { background: var(--pitch-light); }
.tk-live-card.is-live    .tk-live-team-mark { background: var(--crimson); }

/* National-team flags — replace the abbreviation mark when a flag asset exists.
   Echoes the matchfakta flag treatment (cover crop, hairline inset, soft drop)
   so the two surfaces feel like one system. */
.tk-flag {
    display: inline-block;
    object-fit: cover;
    border-radius: 3px;
    background: var(--paper);
    box-shadow: 0 4px 12px -7px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(0,0,0,0.07);
}
.tk-live-flag {
    width: 34px; height: 23px;
    flex: 0 0 34px;
}

/* Team badge — stacks red-card markers directly above the flag/mark, like a
   TV scoreboard. The column only gains height when cards are present, so the
   fixture row stays put for matches without sendings-off. Inside this column
   the flag/mark must keep its own dimensions, hence the flex:none override
   (a column flex would otherwise reinterpret their flex-basis as height). */
.tk-live-team-badge {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
}
.tk-live-team-badge .tk-live-flag,
.tk-live-team-badge .tk-live-team-mark { flex: none; }

.tk-live-reds {
    display: inline-flex;
    gap: 2px;
    height: 13px;
    line-height: 0;
}
.tk-red-card {
    width: 9px; height: 13px;
    border-radius: 1.5px;
    background: var(--crimson);
    box-shadow: 0 2px 4px -1px rgba(0,0,0,0.45), inset 0 0.5px 0 rgba(255,255,255,0.3);
    transform: rotate(-5deg);
}
.tk-red-card + .tk-red-card { transform: rotate(5deg); }

.tk-live-team-name {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: 19px;
    line-height: 1.15;
    letter-spacing: -0.005em;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tk-live-score {
    font-family: 'Fraunces', serif;
    font-weight: 700;
    font-size: 28px;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--ink);
    padding: 4px 14px;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 2px;
    white-space: nowrap;
}
.tk-live-card.is-live  .tk-live-score { color: var(--crimson); border-color: var(--crimson); }
.tk-live-card.is-final .tk-live-score { color: var(--pitch); border-color: var(--pitch-light); }

.tk-live-vs {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 15px;
    color: var(--ink-3);
    padding: 0 6px;
}

/* Footer: matchfakta link + comment count */
.tk-live-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--rule-soft);
}

.tk-live-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--pitch);
    text-decoration: none;
    white-space: nowrap;
    transition: color 160ms ease, transform 160ms ease;
}
.tk-live-link svg { width: 12px; height: 12px; transition: transform 200ms ease; }
.tk-live-link:hover { color: var(--saffron-deep); }
.tk-live-link:hover svg { transform: translateX(3px); }

.tk-live-comments {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 11.5px;
    color: var(--ink-3);
}
.tk-live-comments svg { width: 12px; height: 12px; }
.tk-live-comments b { color: var(--ink); font-weight: 600; font-family: 'JetBrains Mono', monospace; }

/* Programmenotis ("shout") indicator — flags a match that has a pre-match
   note. Saffron accent separates it from the grey comments count. */
.tk-live-link { margin-right: auto; }
.tk-live-notis {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--saffron-deep);
}
.tk-live-notis svg { width: 13px; height: 13px; }

.tk-fixture-notis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--saffron-deep);
    text-decoration: none;
    transition: transform 160ms ease, color 160ms ease;
}
.tk-fixture-notis:hover { transform: scale(1.12); color: var(--saffron); }

/* ---- Folkets tips poll, embedded inside the live card ------------------ */
/* The 1/X/2 vote split for the card's match. Teams are intentionally absent
   (the fixture row above already names them); cells carry only tag + % + count
   so the strip reads as a tight stat ledger under the fixture. Colours reuse
   the base tokens directly — pitch (1), saffron (X), clay (2) — rather than the
   .tk-folkets-card-scoped --fk-* vars, so it's self-contained. */
.tk-live-poll {
    margin: 2px 0 12px 0;
    padding-top: 12px;
    border-top: 1px solid var(--rule);
}
.tk-live-poll-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 9px;
}
.tk-live-poll-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-2);
}
.tk-live-poll-label svg { color: var(--saffron); flex-shrink: 0; }
.tk-live-poll-total {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-3);
    white-space: nowrap;
}
.tk-live-poll-total b { color: var(--ink-2); font-weight: 600; }

.tk-live-poll-bar {
    display: flex;
    height: 7px;
    border: 1px solid var(--rule);
    background: var(--paper-tint);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 10px;
}
.tk-live-poll-seg { height: 100%; transition: flex-basis 0.4s ease; }
.tk-live-poll-seg.is-1 { background: var(--pitch); }
.tk-live-poll-seg.is-x { background: var(--saffron); }
.tk-live-poll-seg.is-2 { background: #8b3a1b; }

.tk-live-poll-cells {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.tk-live-poll-cell {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 1px 8px;
    align-items: center;
    padding: 8px 10px;
    background: var(--paper-tint);
    border: 1px solid var(--rule);
    border-radius: 3px;
}
.tk-live-poll-tag {
    grid-row: span 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px; height: 24px;
    border-radius: 3px;
    font: 800 12px/1 'IBM Plex Sans', system-ui, sans-serif;
    color: #fff;
    flex-shrink: 0;
}
.tk-live-poll-cell.is-1 .tk-live-poll-tag { background: var(--pitch); }
.tk-live-poll-cell.is-x .tk-live-poll-tag { background: var(--saffron); }
.tk-live-poll-cell.is-2 .tk-live-poll-tag { background: #8b3a1b; }
.tk-live-poll-pct {
    font: 800 18px/1 'Fraunces', serif;
    color: var(--ink);
    letter-spacing: -0.01em;
}
.tk-live-poll-pct i {
    font-style: normal;
    font-size: 11px;
    color: var(--ink-3);
    margin-left: 1px;
    font-weight: 700;
}
.tk-live-poll-cnt {
    grid-column: 2;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.tk-live-poll-cell.is-leader {
    border-color: var(--saffron);
    box-shadow: 0 0 0 2px rgba(196,122,7,0.14);
    background: var(--surface);
}
.tk-live-poll-cell.is-leader .tk-live-poll-cnt { color: var(--saffron-deep); }

/* Correct tecken once the match is final — green wins over the saffron leader
   treatment so "which was right" reads at a glance. */
.tk-live-poll-cell.is-correct {
    border-color: var(--pitch);
    box-shadow: 0 0 0 2px rgba(14,58,35,0.18);
    background: #dfeede;                 /* brand green-soft */
}
.tk-live-poll-cell.is-correct .tk-live-poll-pct { color: var(--pitch); }
.tk-live-poll-cell.is-correct .tk-live-poll-cnt { color: var(--pitch); }

/* Badge bubble in the cell corner: crown (favorite, pre-result) / check (correct) */
.tk-live-poll-badge {
    position: absolute;
    top: -7px; right: -7px;
    width: 17px; height: 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    box-shadow: 0 1px 0 rgba(0,0,0,0.05);
}
.tk-live-poll-badge.is-leader  { background: var(--saffron); }
.tk-live-poll-badge.is-correct { background: var(--pitch); }

@media (max-width: 760px) {
    .tk-live-poll-cells { gap: 6px; }
    .tk-live-poll-cell { padding: 7px 8px; }
    .tk-live-poll-pct { font-size: 16px; }
    .tk-live-poll-tag { width: 22px; height: 22px; }
}

/* ---- Fixture list (upcoming) ------------------------------------------- */
.tk-fixture-list {
    list-style: none;
    padding: 0;
    margin: 0;
    background: var(--surface);
    border: 1px solid var(--rule);
}

.tk-fixture-row {
    display: grid;
    grid-template-columns: 108px 56px 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--rule-soft);
    transition: background 140ms ease;
}
.tk-fixture-row:last-child { border-bottom: 0; }
.tk-fixture-row:hover      { background: var(--paper-tint); }

.tk-fixture-when {
    display: flex;
    align-items: baseline;
    gap: 8px;
    white-space: nowrap;
}
.tk-fixture-day {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.tk-fixture-time {
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
}

.tk-fixture-tv {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--ink-2);
    padding: 3px 6px;
    border: 1px dashed var(--rule);
    text-align: center;
    justify-self: start;
    line-height: 1;
}
.tk-fixture-tv-empty {
    color: var(--rule);
    border-color: transparent;
}

.tk-fixture-teams {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
    font-family: 'Fraunces', serif;
    font-size: 16px;
    font-weight: 500;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tk-fixture-team {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}
.tk-fixture-flag {
    width: 21px; height: 14px;
    flex: 0 0 21px;
}
.tk-fixture-vs {
    font-style: italic;
    font-size: 13px;
    color: var(--ink-3);
    font-weight: 400;
}

/* ------------------------------------------------------------- STATS DESK */

/* ==========================================================================
   STATISTIKBORDET — Stadium broadcast desk (vibrant, alive)
   Color identity per stat: lime-green goals, sunny yellow/crimson cards,
   electric-blue VAR, amber bolt, gold crown, coral flame.
   All icons carry their own fill colors so they survive a CSS-broken state.
   ========================================================================== */

/* Per-stat accent tokens (scoped local to the desk so they don't bleed) */
.tk-desk,
.tk-arena {
    --mal-green:     #22c55e;
    --mal-green-lt:  #4ade80;
    --mal-green-bg:  #0e3a23;
    --card-yellow:   #f5c518;
    --card-yellow-d: #c9930b;
    --card-red:      #e63946;
    --card-red-d:    #a01b27;
    --var-blue:      #38bdf8;
    --var-blue-d:    #0369a1;
    --var-blue-bg:   #082f49;
    --bolt-amber:    #fb923c;
    --crown-gold:    #f59e0b;
    --crown-gold-lt: #fde047;
    --flame-coral:   #ef4444;
    --comments-bz:   #b45309;
}

.tk-desk {
    position: sticky;
    top: 18px;
    background:
        linear-gradient(180deg, #ffffff 0%, #fafdf8 100%);
    border: 1px solid var(--rule);
    padding: 20px 22px 22px 22px;
    box-shadow:
        0 1px 0 rgba(14,58,35,0.04),
        0 18px 36px -28px rgba(14,58,35,0.32),
        inset 0 1px 0 rgba(255,255,255,0.6);
}
.tk-desk::before {
    /* Hairline saffron rule along the top — broadcast banner */
    content: "";
    position: absolute;
    top: -1px; left: -1px; right: -1px;
    height: 3px;
    background:
        linear-gradient(90deg,
            var(--saffron) 0%,
            var(--saffron) 30%,
            var(--mal-green) 30%,
            var(--mal-green) 55%,
            var(--var-blue) 55%,
            var(--var-blue) 75%,
            var(--card-red) 75%,
            var(--card-red) 100%);
    border-radius: 1px 1px 0 0;
}
.tk-desk { position: relative; }

/* Masthead with pulsing ON AIR badge */
.tk-desk-masthead {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 11px;
    border-bottom: 1px solid var(--ink);
}
.tk-desk-masthead-live {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 9px;
    letter-spacing: 0.16em;
    color: #fff;
    background: var(--card-red);
    padding: 3px 6px 3px 5px;
    border-radius: 2px;
    text-transform: uppercase;
    box-shadow: 0 0 0 0 rgba(230,57,70,0.55), 0 4px 10px -4px rgba(230,57,70,0.45);
    animation: tkOnAirPulse 1.6s ease-in-out infinite;
}
.tk-desk-masthead-dot {
    display: inline-block;
    width: 6px; height: 6px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(255,255,255,0.85);
}
@keyframes tkOnAirPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(230,57,70,0.55), 0 4px 10px -4px rgba(230,57,70,0.45); }
    50%      { box-shadow: 0 0 0 6px rgba(230,57,70,0.0),  0 4px 10px -4px rgba(230,57,70,0.45); }
}
.tk-desk-masthead-name {
    font-family: 'Fraunces', serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink);
}
.tk-desk-masthead-rule {
    flex: 1; height: 1px;
    background:
        linear-gradient(90deg, var(--rule) 0%, var(--rule-soft) 100%);
}
.tk-desk-masthead-meta {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 11px;
    color: var(--pitch);
    letter-spacing: 0.04em;
    font-feature-settings: 'tnum';
}

.tk-desk-title {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: 26px;
    line-height: 1.1;
    letter-spacing: -0.015em;
    color: var(--ink);
    margin: 16px 0 18px 0;
}
.tk-desk-title em {
    font-style: italic;
    font-weight: 500;
    color: var(--pitch-light);
    background: linear-gradient(180deg, var(--pitch-light) 0%, var(--pitch) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Shared "No. 0X" tag — kicker for stats sections */
.tk-stat-num-tag {
    display: inline-block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #fff;
    border: 0;
    padding: 3px 7px;
    border-radius: 2px;
    background: var(--pitch);
    line-height: 1.2;
}
.tk-stat-num-tag-cards { background: linear-gradient(90deg, var(--card-yellow-d) 0%, var(--card-red) 100%); }
.tk-stat-num-tag-var   { background: linear-gradient(90deg, var(--var-blue) 0%, var(--var-blue-d) 100%); }

/* ============================ HERO MÅL (stadium scoreboard) ============================ */
.tk-stat-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(120px, auto) 1fr auto;
    align-items: center;
    gap: 18px;
    padding: 26px 22px 24px 24px;
    margin-top: 6px;
    background:
        radial-gradient(140% 110% at 110% -10%, rgba(74,222,128,0.18) 0%, transparent 55%),
        radial-gradient(120% 100% at -10% 120%, rgba(34,197,94,0.12) 0%, transparent 55%),
        linear-gradient(160deg, var(--pitch-deep) 0%, var(--pitch) 65%, #114a2a 100%);
    color: var(--cream-ink);
    border: 1px solid #051c0f;
    border-radius: 2px;
    overflow: hidden;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.06),
        inset 0 -40px 60px -40px rgba(0,0,0,0.5),
        0 18px 30px -22px rgba(8,41,26,0.55);
    animation: tkHeroEnter 700ms cubic-bezier(.2,.7,.2,1) both;
}
@keyframes tkHeroEnter {
    from { opacity: 0; transform: translateY(8px) scale(0.992); }
    to   { opacity: 1; transform: none; }
}
/* Pitch stripes pattern */
.tk-stat-hero-grass {
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(
            90deg,
            transparent 0 22px,
            rgba(255,255,255,0.025) 22px 23px
        );
    pointer-events: none;
}
/* Soft floodlight glow that sweeps slowly */
.tk-stat-hero-glow {
    position: absolute;
    top: -40%; right: -10%;
    width: 70%; height: 180%;
    background:
        radial-gradient(closest-side, rgba(74,222,128,0.32) 0%, transparent 70%);
    filter: blur(20px);
    pointer-events: none;
    animation: tkFloodSweep 9s ease-in-out infinite alternate;
}
@keyframes tkFloodSweep {
    from { transform: translate(0,0); opacity: 0.85; }
    to   { transform: translate(-12%, 4%); opacity: 1; }
}

.tk-stat-hero-num {
    position: relative;
    line-height: 1;
    min-width: 110px;
    z-index: 2;
}
.tk-stat-hero-num-ink {
    font-family: 'Fraunces', serif;
    font-variation-settings: 'SOFT' 30, 'WONK' 1;
    font-weight: 700;
    font-size: 92px;
    letter-spacing: -0.045em;
    color: var(--mal-green-lt);
    font-feature-settings: 'tnum';
    display: block;
    position: relative;
    z-index: 2;
    text-shadow:
        0 1px 0 rgba(0,0,0,0.35),
        0 0 24px rgba(74,222,128,0.45);
}
.tk-stat-hero-num-ghost {
    position: absolute;
    top: 6px;
    left: -6px;
    font-family: 'Fraunces', serif;
    font-weight: 700;
    font-size: 92px;
    letter-spacing: -0.045em;
    color: var(--mal-green);
    opacity: 0.10;
    z-index: 1;
    pointer-events: none;
    user-select: none;
}

.tk-stat-hero-text {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    position: relative;
    z-index: 2;
}
.tk-stat-hero-kicker {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mal-green-lt);
    align-self: flex-start;
    padding: 3px 7px;
    background: rgba(74,222,128,0.14);
    border: 1px solid rgba(74,222,128,0.4);
    border-radius: 2px;
}
.tk-stat-hero-label {
    font-family: 'Fraunces', serif;
    font-weight: 700;
    font-style: italic;
    font-size: 26px;
    line-height: 1.05;
    letter-spacing: -0.012em;
    color: #fff;
}
.tk-stat-hero-sub {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 12.5px;
    color: rgba(243,239,224,0.72);
    margin-top: 2px;
}
.tk-stat-hero-sub b {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    color: var(--mal-green-lt);
    font-feature-settings: 'tnum';
}
.tk-stat-hero-sub-empty { font-style: italic; color: rgba(243,239,224,0.55); }

.tk-stat-hero-icon {
    width: 60px;
    height: 60px;
    flex: 0 0 60px;
    align-self: center;
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 4px 12px rgba(74,222,128,0.45));
    animation: tkBallSpin 12s linear infinite;
}
@keyframes tkBallSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.tk-stat-hero-icon svg { width: 100%; height: 100%; display: block; }

/* ============================ DOMARENS FICKA ============================ */
.tk-discipline {
    margin-top: 22px;
}
.tk-discipline-kicker {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.tk-discipline-kicker-label {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 700;
    font-size: 10.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-2);
}
.tk-discipline-kicker-rule {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--card-yellow) 0%, var(--card-red) 100%);
    opacity: 0.45;
}

/* The "stage": two referee cards leaning into each other on a pitch backdrop */
.tk-discipline-stage {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 20px;
    padding: 18px 8px 22px 8px;
    background:
        radial-gradient(80% 60% at 50% 100%, rgba(14,58,35,0.10) 0%, transparent 70%),
        repeating-linear-gradient(
            90deg,
            transparent 0 22px,
            rgba(14,58,35,0.035) 22px 23px
        );
    border-radius: 2px;
}

.tk-ref-card {
    position: relative;
    width: 100px;
    aspect-ratio: 5 / 7;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 11px 11px 12px 11px;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.28) inset,
        0 -1px 0 rgba(0,0,0,0.14) inset,
        0 14px 26px -12px rgba(8,41,26,0.42),
        0 28px 34px -28px rgba(8,41,26,0.36);
    transform-origin: bottom center;
    transition: transform 220ms cubic-bezier(.2,.7,.2,1);
    animation: tkCardFlip 700ms cubic-bezier(.2,.7,.2,1) both;
}
@keyframes tkCardFlip {
    from { opacity: 0; transform: rotate(0deg) translateY(14px) scale(0.95); }
    to   { opacity: 1; }
}
.tk-ref-card-yellow {
    background:
        linear-gradient(160deg, #ffe066 0%, var(--card-yellow) 50%, var(--card-yellow-d) 100%);
    color: #2a1d04;
    transform: rotate(-4deg) translateY(2px);
    animation-delay: 0.1s;
}
.tk-ref-card-red {
    background:
        linear-gradient(160deg, #ff5d5d 0%, var(--card-red) 55%, var(--card-red-d) 100%);
    color: #fef2f2;
    transform: rotate(5deg) translateY(2px);
    animation-delay: 0.18s;
}
.tk-ref-card-yellow:hover { transform: rotate(-2deg) translateY(-5px); }
.tk-ref-card-red:hover    { transform: rotate(3deg)  translateY(-5px); }

/* The "corner" — like a referee's notation in pen */
.tk-ref-card-corner {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.08em;
    opacity: 0.55;
    text-transform: uppercase;
    align-self: flex-end;
}

.tk-ref-card-num {
    font-family: 'Fraunces', serif;
    font-weight: 700;
    font-size: 44px;
    line-height: 1;
    letter-spacing: -0.04em;
    text-align: center;
    align-self: center;
    font-feature-settings: 'tnum';
    margin-top: -4px;
}

.tk-ref-card-label {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-align: center;
    opacity: 0.85;
}

/* Diagonal stripe across the bottom — adds physical card detail */
.tk-ref-card-stripe {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, rgba(0,0,0,0.18), transparent);
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

/* Composite bar of yellow vs red */
.tk-discipline-bar {
    display: flex;
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
    background: var(--rule-soft);
    margin-top: 14px;
}
.tk-discipline-bar-yellow { background: linear-gradient(90deg, #fcd741, #e8b21f); }
.tk-discipline-bar-red    { background: linear-gradient(90deg, #d62828, #9b1c1c); }

.tk-discipline-readout {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    color: var(--ink-3);
    letter-spacing: 0.04em;
}
.tk-discipline-readout b { color: var(--ink); font-weight: 600; }
.tk-discipline-readout-sep { color: var(--rule); }

/* ============================ VAR ROW (electric-blue accent) ============================ */
.tk-var-row {
    position: relative;
    display: grid;
    grid-template-columns: 40px 1fr auto;
    align-items: center;
    gap: 14px;
    margin-top: 24px;
    padding: 14px 16px 14px 18px;
    background:
        radial-gradient(60% 120% at 0% 50%, rgba(56,189,248,0.08) 0%, transparent 70%),
        var(--surface);
    border: 1px solid var(--rule);
    border-left: 4px solid var(--var-blue);
    border-radius: 2px;
    overflow: hidden;
    transition: box-shadow 240ms ease, transform 240ms ease;
}
.tk-var-row:hover {
    transform: translateX(2px);
    box-shadow: -4px 6px 18px -10px rgba(56,189,248,0.45);
}
.tk-var-row::after {
    /* Subtle scanline shimmer along the left rail */
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.45) 50%, transparent 100%);
    transform: translateY(-100%);
    animation: tkScanline 4.5s ease-in-out infinite;
}
@keyframes tkScanline {
    0%   { transform: translateY(-110%); }
    50%  { transform: translateY(110%); }
    100% { transform: translateY(110%); }
}
.tk-var-icon {
    width: 34px; height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(56,189,248,0.08);
    border: 1px solid rgba(56,189,248,0.28);
    border-radius: 4px;
}
.tk-var-icon svg { display: block; }
.tk-var-body {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}
.tk-var-body .tk-stat-num-tag { align-self: flex-start; }
.tk-var-label {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-style: italic;
    font-size: 16px;
    color: var(--ink);
    line-height: 1;
}
.tk-var-num {
    font-family: 'Fraunces', serif;
    font-weight: 700;
    font-size: 34px;
    color: var(--var-blue-d);
    letter-spacing: -0.025em;
    line-height: 1;
    font-feature-settings: 'tnum';
}

/* ============================ HIGHLIGHTS (editorial pull-quotes, colored chips) ============================ */
.tk-desk-highlights {
    margin-top: 24px;
}
.tk-desk-highlights-head,
.tk-editions-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.tk-desk-highlights-head > span:first-child,
.tk-editions-head > span:first-child {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 700;
    font-size: 10.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-2);
}
.tk-desk-highlights-rule,
.tk-editions-rule {
    flex: 1; height: 1px;
    background: linear-gradient(90deg, var(--rule) 0%, transparent 100%);
}
.tk-desk-highlights-kicker,
.tk-editions-meta {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--ink-3);
    font-style: italic;
    text-transform: lowercase;
}

.tk-highlight {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 12px;
    align-items: center;
    padding: 12px 0;
    border-top: 1px dashed var(--rule);
    transition: transform 200ms ease;
}
.tk-highlight:hover { transform: translateX(3px); }
.tk-highlight:first-of-type { border-top: 1px solid var(--ink); padding-top: 14px; }

.tk-highlight-icon {
    width: 36px; height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}
.tk-highlight-icon svg { display: block; position: relative; z-index: 2; }
.tk-highlight-icon::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Per-highlight icon chips — vibrant tinted backgrounds */
.tk-highlight-icon-bolt {
    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
    border: 1px solid rgba(251,146,60,0.45);
    box-shadow: inset 0 -8px 18px -8px rgba(251,146,60,0.35), 0 4px 10px -6px rgba(251,146,60,0.35);
}
.tk-highlight-icon-crown {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border: 1px solid rgba(245,158,11,0.45);
    box-shadow: inset 0 -8px 18px -8px rgba(245,158,11,0.35), 0 4px 10px -6px rgba(245,158,11,0.35);
}
.tk-highlight-icon-flame {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border: 1px solid rgba(239,68,68,0.45);
    box-shadow: inset 0 -8px 18px -8px rgba(239,68,68,0.35), 0 4px 10px -6px rgba(239,68,68,0.35);
}

.tk-highlight-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.tk-highlight-label {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-weight: 500;
    font-size: 12px;
    color: var(--ink-3);
    letter-spacing: 0.01em;
}
.tk-highlight-value {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.3;
}
.tk-highlight-value em {
    display: inline-block;
    margin-left: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-style: normal;
    font-weight: 600;
    font-size: 11.5px;
    color: var(--pitch);
    padding: 1px 6px;
    border: 1px solid rgba(14,58,35,0.25);
    background: rgba(14,58,35,0.06);
    border-radius: 2px;
    vertical-align: 1px;
}
.tk-highlight-value-stack { display: block; }
.tk-mini-link {
    color: var(--pitch);
    text-decoration: none;
    border-bottom: 1px dotted var(--rule);
    transition: color 140ms ease, border-color 140ms ease;
}
.tk-mini-link:hover { color: var(--saffron-deep); border-bottom-color: var(--saffron); }
.tk-mini-link em {
    margin-left: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-style: normal;
    font-size: 12px;
    color: var(--ink-2);
    border: 1px solid rgba(14,58,35,0.18);
    padding: 0 5px;
    border-radius: 2px;
    background: rgba(14,58,35,0.04);
}
.tk-dot-sep { margin: 0 6px; color: var(--rule); }

/* ============================ ALLA UPPLAGOR (vibrant tile grid) ============================ */
.tk-editions {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 2px solid var(--ink);
    position: relative;
}
.tk-editions::before {
    content: "";
    position: absolute;
    top: -2px; left: 0;
    width: 80px; height: 2px;
    background: linear-gradient(90deg, var(--mal-green) 0%, var(--saffron) 100%);
}

.tk-editions-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.tk-edition-tile {
    position: relative;
    background:
        linear-gradient(180deg, #ffffff 0%, #f7faf6 100%);
    border: 1px solid var(--rule);
    border-radius: 3px;
    padding: 12px 12px 11px 12px;
    overflow: hidden;
    transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
    animation: tkTileEnter 480ms cubic-bezier(.2,.7,.2,1) both;
}
@keyframes tkTileEnter {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}
.tk-edition-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px -14px rgba(14,58,35,0.4);
    border-color: var(--pitch-light);
}
.tk-edition-tile.is-current {
    background:
        radial-gradient(120% 100% at 100% 0%, rgba(74,222,128,0.16) 0%, transparent 70%),
        linear-gradient(160deg, #0e3a23 0%, #155a35 100%);
    color: var(--cream-ink);
    border-color: #051c0f;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.06) inset,
        0 16px 28px -18px rgba(8,41,26,0.5);
}
.tk-edition-tile.is-current:hover {
    transform: translateY(-3px);
}

.tk-edition-flag {
    position: absolute;
    top: 8px;
    right: 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #062814;
    background: var(--mal-green-lt);
    padding: 2px 6px 2px 5px;
    border-radius: 2px;
    box-shadow: 0 0 12px -2px rgba(74,222,128,0.65);
}
.tk-edition-flag-dot {
    width: 5px; height: 5px;
    background: #062814;
    border-radius: 50%;
    animation: tkLivePulse 1.6s ease-out infinite;
}

.tk-edition-name {
    display: block;
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: 13px;
    line-height: 1.1;
    letter-spacing: -0.005em;
    color: var(--ink);
    margin-bottom: 6px;
    padding-right: 38px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tk-edition-tile.is-current .tk-edition-name {
    color: #fff;
}

.tk-edition-hero {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 8px;
}
.tk-edition-mal {
    font-family: 'Fraunces', serif;
    font-weight: 700;
    font-size: 30px;
    line-height: 1;
    letter-spacing: -0.035em;
    color: var(--pitch);
    font-feature-settings: 'tnum';
}
.tk-edition-tile.is-current .tk-edition-mal {
    color: var(--mal-green-lt);
    text-shadow: 0 0 14px rgba(74,222,128,0.45);
}
.tk-edition-mal-label {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.tk-edition-tile.is-current .tk-edition-mal-label {
    color: rgba(243,239,224,0.62);
}

.tk-edition-bar {
    height: 4px;
    background: var(--rule-soft);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 8px;
}
.tk-edition-bar-fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--mal-green) 0%, var(--mal-green-lt) 100%);
    border-radius: 2px;
    transition: width 480ms cubic-bezier(.2,.7,.2,1);
    animation: tkBarGrow 700ms cubic-bezier(.2,.7,.2,1) both;
}
@keyframes tkBarGrow {
    from { width: 0 !important; }
}
.tk-edition-tile.is-current .tk-edition-bar {
    background: rgba(255,255,255,0.10);
}

/* ---- Edition tiers: top → green, then lime, amber, faded ---- */
.tk-edition-tile.tk-tier-1 .tk-edition-bar-fill {
    background: linear-gradient(90deg, #16a34a 0%, #4ade80 100%);
}
.tk-edition-tile.tk-tier-1 .tk-edition-mal { color: #15803d; }

.tk-edition-tile.tk-tier-2 .tk-edition-bar-fill {
    background: linear-gradient(90deg, #84cc16 0%, #bef264 100%);
}
.tk-edition-tile.tk-tier-2 .tk-edition-mal { color: #4d7c0f; }

.tk-edition-tile.tk-tier-3 .tk-edition-bar-fill {
    background: linear-gradient(90deg, #d97706 0%, #fbbf24 100%);
}
.tk-edition-tile.tk-tier-3 .tk-edition-mal { color: #b45309; }

.tk-edition-tile.tk-tier-4 .tk-edition-bar-fill {
    background: linear-gradient(90deg, #cbd5e1 0%, #e2e8f0 100%);
}
.tk-edition-tile.tk-tier-4 .tk-edition-mal { color: var(--ink-3); }
.tk-edition-tile.tk-tier-4 .tk-edition-bar { background: rgba(14,58,35,0.05); }

/* Current edition always uses the vibrant pitch palette regardless of tier */
.tk-edition-tile.is-current .tk-edition-bar-fill {
    background: linear-gradient(90deg, var(--mal-green) 0%, var(--mal-green-lt) 100%);
}
.tk-edition-tile.is-current .tk-edition-mal {
    color: var(--mal-green-lt);
    text-shadow: 0 0 14px rgba(74,222,128,0.45);
}

.tk-edition-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.tk-edition-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    font-weight: 600;
    padding: 2px 5px 2px 4px;
    border-radius: 2px;
    line-height: 1.2;
    border: 1px solid transparent;
    font-feature-settings: 'tnum';
}
.tk-edition-chip b { font-weight: 700; font-feature-settings: 'tnum'; }
.tk-edition-chip-glyph {
    font-size: 9px;
    line-height: 1;
    opacity: 0.85;
}
.tk-chip-yellow {
    color: #6b4f08;
    background: rgba(245,197,24,0.18);
    border-color: rgba(245,197,24,0.45);
}
.tk-chip-yellow .tk-edition-chip-glyph { color: var(--card-yellow-d); }
.tk-chip-red {
    color: #7a1822;
    background: rgba(230,57,70,0.12);
    border-color: rgba(230,57,70,0.4);
}
.tk-chip-red .tk-edition-chip-glyph { color: var(--card-red); }
.tk-chip-var {
    color: #075985;
    background: rgba(56,189,248,0.12);
    border-color: rgba(56,189,248,0.4);
}
.tk-chip-var .tk-edition-chip-glyph { color: var(--var-blue-d); }
.tk-chip-comments {
    color: #78350f;
    background: rgba(196,122,7,0.14);
    border-color: rgba(196,122,7,0.4);
}
.tk-chip-comments .tk-edition-chip-glyph { color: var(--saffron-deep); }

/* On dark "current" tiles, lift contrast of chips */
.tk-edition-tile.is-current .tk-edition-chip {
    background: rgba(255,255,255,0.10);
    border-color: rgba(255,255,255,0.18);
    color: rgba(255,255,255,0.92);
}
.tk-edition-tile.is-current .tk-chip-yellow   .tk-edition-chip-glyph { color: var(--card-yellow); }
.tk-edition-tile.is-current .tk-chip-red      .tk-edition-chip-glyph { color: #ff8a93; }
.tk-edition-tile.is-current .tk-chip-var      .tk-edition-chip-glyph { color: var(--var-blue); }
.tk-edition-tile.is-current .tk-chip-comments .tk-edition-chip-glyph { color: var(--saffron); }

/* ============================ DRAFT PREVIEW STRIP ============================ */
.tk-draft-strip {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 18px;
    background: linear-gradient(90deg, var(--saffron-deep) 0%, var(--saffron) 100%);
    color: #fff;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 12px;
    line-height: 1.3;
    border-bottom: 1px solid rgba(0,0,0,0.15);
    box-shadow: 0 4px 14px -8px rgba(0,0,0,0.35);
}
.tk-draft-strip-tag {
    flex-shrink: 0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 3px 7px;
    background: rgba(0,0,0,0.22);
    border-radius: 2px;
}
.tk-draft-strip-text {
    flex: 1;
    min-width: 0;
    font-weight: 500;
}
.tk-draft-strip-back {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px dotted rgba(255,255,255,0.5);
    transition: border-color 140ms ease;
    flex-shrink: 0;
}
.tk-draft-strip-back:hover { border-bottom-color: #fff; }

/* ------------------------------------------------------------- RESPONSIVE */

/* Tablet — narrow the desk slightly */
@media (max-width: 1100px) {
    .tk-arena { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 22px; }
    .tk-live-team-name { font-size: 17px; }
    .tk-live-score     { font-size: 24px; padding: 4px 10px; }

    .tk-stat-hero-num-ink,
    .tk-stat-hero-num-ghost { font-size: 78px; }
    .tk-ref-card { width: 88px; }
    .tk-ref-card-num { font-size: 40px; }
    .tk-stat-hero-icon { width: 52px; height: 52px; flex-basis: 52px; }
}

/* Collapse to single column */
@media (max-width: 899px) {
    .tk-arena {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .tk-desk { position: static; padding: 20px 18px 22px 18px; }

    .tk-live-card { grid-template-columns: 60px 1fr; gap: 14px; padding: 14px 16px 14px 16px; }
    .tk-live-card-day { font-size: 24px; }
    .tk-live-team-name { font-size: 16px; }
    .tk-live-score { font-size: 22px; padding: 3px 8px; }
    .tk-live-team-mark { width: 28px; height: 28px; flex-basis: 28px; font-size: 11px; }
    .tk-live-flag { width: 28px; height: 19px; flex-basis: 28px; }

    .tk-fixture-row {
        grid-template-columns: 96px 48px 1fr auto;
        gap: 10px;
        padding: 11px 14px;
    }
    .tk-fixture-teams { font-size: 14.5px; }
}

/* Smallest mobile — restack the fixture meta above teams */
@media (max-width: 520px) {
    .tk-live-card {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .tk-live-card-stamp {
        flex-direction: row;
        gap: 10px;
        justify-content: flex-start;
        align-items: baseline;
        padding: 6px 10px;
    }
    .tk-live-card-day  { font-size: 22px; }
    .tk-live-card-mon  { margin-top: 0; }
    .tk-live-card-time {
        margin-top: 0;
        padding-top: 0;
        padding-left: 10px;
        border-top: 0;
        border-left: 1px solid var(--rule);
        width: auto;
    }

    /* Mobil: behåll lagen i vänster/höger kant med resultatet i mitten */
    .tk-live-card-fixture {
        grid-template-columns: 1fr auto 1fr;
        gap: 8px;
        align-items: center;
    }
    .tk-live-team { gap: 8px; }
    .tk-live-team-name { font-size: 15px; }
    .tk-live-team-mark { width: 26px; height: 26px; flex: 0 0 26px; font-size: 10px; }
    .tk-live-flag { width: 26px; height: 18px; flex: 0 0 26px; }
    .tk-live-score { font-size: 20px; padding: 3px 8px; }
    .tk-live-score, .tk-live-vs { justify-self: center; }

    .tk-fixture-row {
        grid-template-columns: 1fr auto auto;
        grid-template-areas: "when tv notis" "teams teams teams";
        gap: 6px 10px;
        padding: 10px 12px;
    }
    .tk-fixture-when  { grid-area: when; }
    .tk-fixture-tv    { grid-area: tv; justify-self: end; }
    .tk-fixture-teams { grid-area: teams; white-space: normal; }
    .tk-fixture-notis { grid-area: notis; justify-self: end; align-self: center; }

    .tk-stat-hero {
        grid-template-columns: auto 1fr auto;
        padding: 18px 14px 18px 18px;
        gap: 14px;
    }
    .tk-stat-hero-num { min-width: 78px; }
    .tk-stat-hero-icon {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
    }
    .tk-stat-hero-num-ink,
    .tk-stat-hero-num-ghost { font-size: 64px; }
    .tk-stat-hero-label { font-size: 21px; }

    .tk-ref-card { width: 96px; padding: 10px 8px 11px 8px; }
    .tk-ref-card-num { font-size: 34px; }
    .tk-ref-card-label {
        font-size: 8.5px;
        letter-spacing: 0.06em;
    }

    .tk-var-row { gap: 10px; padding: 12px 14px; }
    .tk-var-num { font-size: 28px; }

    .tk-editions-grid { grid-template-columns: 1fr; gap: 8px; }
    .tk-edition-mal { font-size: 26px; }
    .tk-edition-name { font-size: 12.5px; padding-right: 42px; }
    .tk-edition-chip { font-size: 10px; }
}

/* ==========================================================================
   TIPSKUPONG — score sheet / betting slip for the tips page
   Concept: 1960s Swedish football pools coupon, modernised. Each match is
   a stamped row with a tactile score stepper and a live 1/X/2 ticket stub
   that lights up. Greens for hemma, saffron for X, crimson for borta.
   ========================================================================== */

.tk-coupon-wrap { padding: 0 4px; }
@media (max-width: 899px) { .tk-coupon-wrap { padding: 0; } }

/* Flatten the inner grid into a single column so our coupon-grid governs layout */
body#page2 .container_12 .wrapper.tk-coupon-wrap > *:not(.tk-press-ribbon) { width: 100%; }

/* ----------------------------------------------------------- Flash messages */
.tk-flash {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    border-radius: 4px;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-left-width: 4px;
    margin-bottom: 22px;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 14px;
    color: var(--ink);
    box-shadow: 0 6px 18px -12px rgba(8,30,18,0.18);
}
.tk-flash-icon { flex: 0 0 22px; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; }
.tk-flash-icon svg { width: 22px; height: 22px; }
.tk-flash-text { line-height: 1.45; }
.tk-flash-text a { color: var(--pitch); border-bottom: 1px solid var(--rule); }
.tk-flash-text a:hover { border-color: var(--pitch); }
.tk-flash-ok    { border-left-color: var(--pitch);   color: var(--pitch-deep); background: linear-gradient(90deg, rgba(14,58,35,0.06), transparent 60%); }
.tk-flash-ok .tk-flash-icon { color: var(--pitch); }
.tk-flash-warn  { border-left-color: var(--saffron); color: #5a3a05; background: linear-gradient(90deg, rgba(196,122,7,0.10), transparent 60%); }
.tk-flash-warn .tk-flash-icon { color: var(--saffron-deep); }
.tk-flash-err   { border-left-color: var(--crimson); color: #6a1818; background: linear-gradient(90deg, rgba(155,42,42,0.10), transparent 60%); }
.tk-flash-err .tk-flash-icon { color: var(--crimson); }

/* ------------------------------------------------------------ Intro banner */
.tk-coupon-intro {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 26px;
    align-items: start;
    padding: 24px 28px 26px;
    margin-bottom: 26px;
    background:
        linear-gradient(180deg, var(--surface) 0%, #f5f9f5 100%);
    border: 1px solid var(--rule);
    border-radius: 4px;
    box-shadow: 0 14px 32px -22px rgba(8,30,18,0.18);
    position: relative;
    overflow: hidden;
}
.tk-coupon-intro::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(45deg, transparent 0 14px, rgba(14,58,35,0.025) 14px 15px);
    pointer-events: none;
}
.tk-coupon-intro > * { position: relative; z-index: 1; }
.tk-coupon-intro-mark {
    width: 96px; height: 96px;
    display: inline-flex; align-items: center; justify-content: center;
    background: radial-gradient(circle at 35% 30%, #f4ad1f 0%, var(--saffron) 55%, var(--saffron-deep) 100%);
    color: var(--pitch-deep);
    border-radius: 4px;
    box-shadow:
        inset 0 -3px 0 rgba(0,0,0,0.18),
        inset 0 1px 0 rgba(255,255,255,0.35),
        0 6px 0 rgba(0,0,0,0.12);
}
.tk-coupon-intro-mark svg { width: 56px; height: 56px; }
.tk-coupon-intro-eyebrow {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--saffron-deep);
    margin-bottom: 8px;
}
.tk-coupon-intro-title {
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: 'SOFT' 50, 'WONK' 0, 'opsz' 80;
    font-weight: 600;
    font-size: 26px;
    line-height: 1.18;
    letter-spacing: -0.5px;
    color: var(--ink);
    margin: 0 0 10px;
}
.tk-coupon-intro-title em {
    font-family: 'JetBrains Mono', monospace;
    font-style: normal;
    font-weight: 700;
    font-size: 22px;
    letter-spacing: 0.06em;
    padding: 1px 8px;
    background: var(--pitch);
    color: var(--cream-ink);
    border-radius: 3px;
    margin: 0 2px;
    vertical-align: 3px;
}
.tk-coupon-intro-lead { font-size: 14.5px; line-height: 1.6; color: var(--ink-2); margin: 0 0 14px; max-width: 56ch; }
.tk-coupon-intro-lead b { color: var(--ink); font-weight: 600; }

.tk-coupon-progress { display: flex; align-items: center; gap: 14px; margin-top: 4px; }
.tk-coupon-progress-text {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11.5px;
    letter-spacing: 0.06em;
    color: var(--ink-3);
}
.tk-coupon-progress-num { color: var(--pitch); font-weight: 700; font-size: 14px; }
.tk-coupon-progress-bar {
    flex: 1;
    max-width: 320px;
    height: 6px;
    background: rgba(14,58,35,0.10);
    border-radius: 3px;
    overflow: hidden;
}
.tk-coupon-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--pitch-light) 0%, var(--pitch) 100%);
    border-radius: 3px;
    transition: width 240ms ease;
}

/* ------------------------------------------------------------- Coupon grid */
.tk-coupon-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: 26px;
    align-items: start;
}
@media (max-width: 1100px) {
    .tk-coupon-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 22px; }
}
@media (max-width: 899px) {
    .tk-coupon-grid { grid-template-columns: 1fr; gap: 18px; }
}

/* -------------------------------------------------------------- Coupon card */
.tk-coupon-card {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 4px;
    box-shadow: 0 18px 38px -26px rgba(8,30,18,0.22);
    overflow: hidden;
    position: relative;
}
.tk-coupon-card::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--pitch) 0%, var(--pitch-light) 40%, var(--saffron) 100%);
}
.tk-coupon-card-head {
    padding: 22px 26px 18px;
    border-bottom: 1px dashed var(--rule);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 14px 18px;
}
.tk-coupon-card-eyebrow {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--saffron-deep);
    flex: 1 1 100%;
}
.tk-coupon-card-title {
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: 'SOFT' 50, 'WONK' 0, 'opsz' 70;
    font-weight: 600;
    font-size: 22px;
    letter-spacing: -0.3px;
    color: var(--ink);
    margin: 0;
    flex: 1 1 auto;
}
.tk-coupon-legend {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    letter-spacing: 0.08em;
    color: var(--ink-3);
    margin-left: auto;
}
.tk-legend-pip {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 22px; height: 22px;
    border-radius: 3px;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 12px;
    color: #fff;
}
.tk-legend-1 { background: var(--pitch); }
.tk-legend-x { background: var(--saffron); }
.tk-legend-2 { background: var(--crimson); }
.tk-legend-label { margin-right: 10px; color: var(--ink-2); font-weight: 500; }
.tk-coupon-legend > :last-child { margin-right: 0; }

/* ----------------------------------------------------------- Coupon list */
.tk-coupon-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.tk-coupon-row {
    display: grid;
    grid-template-columns: 56px 1fr 168px;
    grid-template-areas:
        "stamp meta meta"
        "stamp match tkn";
    gap: 6px 18px;
    align-items: center;
    padding: 16px 26px;
    border-bottom: 1px solid var(--rule-soft);
    position: relative;
    transition: background 140ms ease;
}
.tk-coupon-row:last-child { border-bottom: 0; }
.tk-coupon-row.is-filled { background: linear-gradient(90deg, rgba(14,58,35,0.025) 0%, transparent 65%); }
.tk-coupon-row.is-locked { opacity: 0.62; background: repeating-linear-gradient(135deg, transparent 0 10px, rgba(14,58,35,0.04) 10px 11px); }

.tk-coupon-stamp {
    grid-area: stamp;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 22px;
    letter-spacing: -0.5px;
    color: var(--pitch);
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 2px solid var(--pitch);
    border-radius: 50%;
    background: var(--surface);
    box-shadow: inset 0 0 0 3px var(--surface), 0 2px 0 rgba(14,58,35,0.10);
}
.tk-coupon-meta {
    grid-area: meta;
    display: flex;
    gap: 10px;
    align-items: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    letter-spacing: 0.06em;
    color: var(--ink-3);
    text-transform: uppercase;
}
.tk-coupon-kickoff { color: var(--ink-3); }
.tk-coupon-lock {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 7px;
    background: var(--crimson);
    color: #fff;
    border-radius: 2px;
    font-weight: 700;
    letter-spacing: 0.12em;
}
.tk-coupon-lock svg { width: 10px; height: 10px; }

/* Team names sit ABOVE the score panel — home left, away right — and the
   score steppers claim the full row width below. Same pattern at every
   breakpoint so long team names never wrap awkwardly. */
.tk-coupon-match {
    grid-area: match;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
        "home  away"
        "score score";
    gap: 10px 18px;
    align-items: center;
}
.tk-coupon-team {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.tk-coupon-team-home { grid-area: home; justify-content: flex-start; text-align: left; }
.tk-coupon-team-away { grid-area: away; justify-content: flex-end;   text-align: right; }
.tk-coupon-team-name {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 700;
    font-size: 17px;
    color: var(--ink);
    line-height: 1.2;
    word-break: break-word;
}

/* --------------------------------------------------------- Score steppers */
.tk-score-pair {
    grid-area: score;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 4px 0 2px;
}
.tk-score-stepper {
    display: inline-grid;
    grid-template-columns: 44px 64px 44px;
    align-items: stretch;
    border-radius: 6px;
    overflow: hidden;
    background: var(--paper-tint);
    border: 1px solid var(--rule);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
}
.tk-step-btn {
    appearance: none;
    background: transparent;
    border: 0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    color: var(--ink-2);
    cursor: pointer;
    padding: 0;
    min-height: 48px;
    transition: background 120ms ease, color 120ms ease;
}
.tk-step-btn:hover:not(:disabled) { background: rgba(14,58,35,0.10); color: var(--pitch-deep); }
.tk-step-btn:active:not(:disabled) { background: rgba(14,58,35,0.18); }
.tk-step-btn:disabled { cursor: not-allowed; opacity: 0.4; }
.tk-step-dec { border-right: 1px solid var(--rule); }
.tk-step-inc { border-left: 1px solid var(--rule); }

.tk-score-input {
    appearance: none;
    background: var(--surface);
    border: 0;
    text-align: center;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 26px;
    line-height: 1;
    color: var(--ink);
    padding: 12px 0;
    -moz-appearance: textfield;
    outline: none;
    transition: background 120ms ease, color 120ms ease;
}
.tk-score-input::-webkit-outer-spin-button,
.tk-score-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tk-score-input:focus { background: #fff; box-shadow: inset 0 -2px 0 var(--pitch); }
.tk-score-input:disabled,
.tk-score-input[readonly] { background: rgba(255,255,255,0.6); color: var(--ink-3); }

.tk-score-sep {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 22px;
    color: var(--ink-3);
    user-select: none;
}

/* ---------------------------------------------------- 1/X/2 ticket stub */
.tk-coupon-tkn {
    grid-area: tkn;
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 4px;
    background: var(--paper-tint);
    border: 1px solid var(--rule);
    border-radius: 4px;
    justify-self: end;
    /* Lagnamnen står ovanför stegrarna i match-cellen, så centrering här lyfter
       1X2 för högt. Bottenjustera mot match-cellen + 4px så mitten möter stegrarna. */
    align-self: end;
    margin-bottom: 9px;
    position: relative;
}
.tk-coupon-tkn::before {
    /* perforation between coupon and stub */
    content: "";
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 70%;
    background:
        radial-gradient(circle, var(--surface) 2px, transparent 2.5px) 0 0 / 6px 8px;
    pointer-events: none;
}
.tk-tkn-pip {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 40px;
    height: 38px;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 17px;
    color: var(--ink-3);
    border-radius: 3px;
    transition: all 180ms cubic-bezier(0.2, 0, 0, 1.2);
    letter-spacing: 0;
}
.tk-tkn-pip.is-active {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px -4px rgba(0,0,0,0.35), inset 0 -2px 0 rgba(0,0,0,0.15);
}
.tk-coupon-tkn .tk-tkn-1.is-active { background: var(--pitch);   box-shadow: 0 4px 12px -4px rgba(14,58,35,0.45),  inset 0 -2px 0 rgba(0,0,0,0.15); }
.tk-coupon-tkn .tk-tkn-x.is-active { background: var(--saffron); box-shadow: 0 4px 12px -4px rgba(196,122,7,0.45), inset 0 -2px 0 rgba(0,0,0,0.15); }
.tk-coupon-tkn .tk-tkn-2.is-active { background: var(--crimson); box-shadow: 0 4px 12px -4px rgba(155,42,42,0.45), inset 0 -2px 0 rgba(0,0,0,0.15); }

/* Shake animation when submit guard hits an empty row */
@keyframes tkShake {
    0%, 100% { transform: translateX(0); }
    20%      { transform: translateX(-6px); }
    40%      { transform: translateX(6px); }
    60%      { transform: translateX(-4px); }
    80%      { transform: translateX(4px); }
}
.tk-coupon-row.tk-shake { animation: tkShake 480ms ease; background: rgba(155,42,42,0.06); }

/* ============================================================
   Inline facit reveal — graded coupon rows once a match is played.
   Reuses the coupon palette: pitch = hit, saffron = partial,
   crimson/ink = miss. A finished row is the MOST informative row,
   so it drops the .is-locked dimming and gains a coloured edge.
   ============================================================ */
/* Only finished rows gain the facit track, so locked/open rows keep the
   exact score-box + 1X2 alignment. The match cell stays a 2-row grid; the
   tkn stub still bottom-aligns to the score, unaffected by the facit line. */
.tk-coupon-row.is-finished {
    opacity: 1;
    grid-template-areas:
        "stamp meta  meta"
        "stamp match tkn"
        ".     facit facit";
}
.tk-coupon-row.is-finished.tk-row-hit  { box-shadow: inset 3px 0 0 var(--pitch);   background: linear-gradient(90deg, rgba(14,58,35,0.055) 0%, transparent 62%); }
.tk-coupon-row.is-finished.tk-row-part { box-shadow: inset 3px 0 0 var(--saffron); background: linear-gradient(90deg, rgba(196,122,7,0.06) 0%, transparent 62%); }
.tk-coupon-row.is-finished.tk-row-miss { box-shadow: inset 3px 0 0 var(--crimson); background: linear-gradient(90deg, rgba(155,42,42,0.05) 0%, transparent 62%); }

/* points chip + "ej spelad" note ride in the mono meta bar.
   Colour comes from the shared .tk-pts-zero/mid/hi classes (same palette
   as the sidebar "Mina matcher" boxes) — base sets only shape/spacing. */
.tk-coupon-pts {
    display: inline-flex; align-items: baseline; gap: 3px;
    padding: 2px 8px;
    border-radius: 2px;
    font-weight: 700;
    letter-spacing: 0.04em;
}
.tk-coupon-pts b { font-size: 13px; }
.tk-coupon-pts-unit { font-size: 10px; opacity: 0.75; }
.tk-coupon-await { color: var(--ink-3); font-style: italic; text-transform: none; letter-spacing: 0; }

/* Running total — pitch-green scoreboard pill in the intro banner */
.tk-coupon-score {
    display: inline-flex;
    align-items: baseline;
    gap: 9px;
    margin-top: 16px;
    padding: 10px 16px;
    background: var(--pitch);
    color: #fff;
    border-radius: 6px;
    font-family: 'JetBrains Mono', monospace;
    box-shadow: 0 4px 14px -6px rgba(14,58,35,0.5);
}
.tk-coupon-score-label { font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.82; align-self: center; }
.tk-coupon-score-num   { font-size: 28px; font-weight: 700; line-height: 1; letter-spacing: -0.5px; }
.tk-coupon-score-unit  { font-size: 15px; font-weight: 700; opacity: 0.8; }
.tk-coupon-score-meta  { font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.72; align-self: center; }

/* The user's own digits, tinted by correctness. Equal/higher specificity
   than .tk-score-input:disabled (set later in the file) so the tint wins. */
.tk-score-input.is-correct { color: var(--pitch); }
.tk-score-input.is-wrong   { color: var(--crimson); }
.tk-score-input:disabled.is-correct,
.tk-score-input[readonly].is-correct { color: var(--pitch);   background: rgba(14,58,35,0.05);  box-shadow: inset 0 -3px 0 var(--pitch); }
.tk-score-input:disabled.is-wrong,
.tk-score-input[readonly].is-wrong   { color: var(--crimson); background: rgba(155,42,42,0.05); box-shadow: inset 0 -3px 0 rgba(155,42,42,0.55); }

/* Facit caption under the score — full match-cell width below the steppers */
.tk-coupon-facit {
    grid-area: facit;
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px;
    margin-top: 0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.04em;
}
.tk-facit-label   { text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-3); }
.tk-facit-score   { font-weight: 700; font-size: 14px; color: var(--ink); }
.tk-facit-verdict { color: var(--ink-2); }
.tk-coupon-facit.tk-facit-hit  .tk-facit-score { color: var(--pitch); }
.tk-coupon-facit.tk-facit-miss .tk-facit-score { color: var(--crimson); }

/* Graded 1/X/2. Correctness overrides the SIGN colour so a wrong pick never
   shows a reassuring green; the true sign is ringed via .is-facit.
   Selectors are (0,4,0) — they beat the sign rules (0,3,0) without !important. */
.tk-coupon-tkn.is-graded.is-correct .tk-tkn-pip.is-active {
    background: var(--pitch);
    color: #fff;
    box-shadow: 0 0 0 2px rgba(14,58,35,0.30), inset 0 -2px 0 rgba(0,0,0,0.15);
}
.tk-coupon-tkn.is-graded.is-wrong .tk-tkn-pip.is-active {
    background: var(--ink-3);
    color: #fff;
    box-shadow: inset 0 -2px 0 rgba(0,0,0,0.15);
}
.tk-coupon-tkn.is-graded .tk-tkn-pip.is-facit {
    box-shadow: inset 0 0 0 2px var(--pitch);
    color: var(--pitch);
}

/* ----------------------------------------------------------- Extra cards */
.tk-coupon-extra {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 22px;
    align-items: start;
    margin-top: 22px;
    padding: 22px 26px 24px;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 4px;
    box-shadow: 0 14px 30px -24px rgba(8,30,18,0.18);
    position: relative;
}
.tk-coupon-extra::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--saffron);
}
.tk-coupon-extra-goals::before { background: var(--crimson); }
.tk-coupon-extra-skyttekung::before { background: var(--saffron-deep, #b1820a); }

.tk-extra-icon {
    width: 64px; height: 64px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(196,122,7,0.10);
    color: var(--saffron-deep);
    border-radius: 4px;
}
.tk-coupon-extra-goals .tk-extra-icon { background: rgba(155,42,42,0.10); color: var(--crimson); }
.tk-coupon-extra-skyttekung .tk-extra-icon {
    background: linear-gradient(135deg, rgba(196,122,7,0.18), rgba(196,122,7,0.06));
    color: var(--saffron-deep, #b1820a);
}
.tk-extra-icon svg { width: 38px; height: 38px; }
.tk-extra-body { min-width: 0; }
.tk-extra-eyebrow {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--saffron-deep);
    margin-bottom: 6px;
}
.tk-coupon-extra-goals .tk-extra-eyebrow { color: var(--crimson); }
.tk-coupon-extra-skyttekung .tk-extra-eyebrow { color: var(--saffron-deep, #b1820a); }

/* Bonus-sektion: nyhetsbanner (t.ex. "poäng höjda") */
.tk-extra-notice {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    padding: 10px 12px;
    background: rgba(155,42,42,0.06);
    border-left: 3px solid var(--crimson);
    border-radius: 3px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--ink-2);
}
.tk-extra-notice-badge {
    flex: 0 0 auto;
    align-self: flex-start;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 3px 8px;
    background: var(--crimson);
    color: #fff;
    border-radius: 2px;
    margin-top: 1px;
}
.tk-extra-notice-text strong { color: var(--ink); }
.tk-extra-title {
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: 'SOFT' 50, 'WONK' 0, 'opsz' 70;
    font-weight: 600;
    font-size: 19px;
    color: var(--ink);
    margin: 0 0 6px;
    letter-spacing: -0.2px;
}
.tk-extra-help { font-size: 13.5px; line-height: 1.55; color: var(--ink-2); margin: 0 0 14px; }
.tk-extra-selects {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 12px;
    align-items: end;
}
.tk-select-block { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tk-select-block-wide { grid-column: 1 / -1; }
.tk-select-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.tk-select-vs {
    font-family: 'Fraunces', Georgia, serif;
    font-style: italic;
    font-weight: 600;
    color: var(--ink-3);
    padding: 0 4px 8px;
}
.tk-select {
    appearance: none;
    -webkit-appearance: none;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 3px;
    padding: 10px 32px 10px 12px;
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: var(--ink);
    outline: none;
    cursor: pointer;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--ink-2) 50%),
        linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
    background-position:
        calc(100% - 16px) 50%,
        calc(100% - 11px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    transition: border-color 140ms ease, box-shadow 140ms ease;
}
.tk-select:hover { border-color: var(--pitch-light); }
.tk-select:focus { border-color: var(--pitch); box-shadow: 0 0 0 3px rgba(14,58,35,0.10); }

/* ------------------------------------------- Skyttekung search combobox */
.tk-skytte { position: relative; }
.tk-skytte-combo { position: relative; }
.tk-combo { position: relative; }
/* .tk-select-block sets display:flex, which beats the UA [hidden] rule;
   force hidden wrappers off so native and combo never show together. */
.tk-skytte-native[hidden],
.tk-skytte-combo[hidden] { display: none !important; }

/* Closed state: a button that mirrors .tk-select */
.tk-combo-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    appearance: none;
    -webkit-appearance: none;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 3px;
    padding: 10px 12px;
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
    outline: none;
    transition: border-color 140ms ease, box-shadow 140ms ease;
}
.tk-combo-trigger:hover { border-color: var(--pitch-light); }
.tk-combo-trigger:focus-visible,
.tk-combo.is-open .tk-combo-trigger {
    border-color: var(--saffron-deep, #b1820a);
    box-shadow: 0 0 0 3px rgba(177,130,10,0.12);
}
.tk-combo-trigger-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-combo-trigger-text.is-placeholder { color: var(--ink-3); font-weight: 400; }
.tk-combo-trigger-icon {
    flex: 0 0 auto;
    width: 16px; height: 16px;
    color: var(--ink-2);
    transition: transform 160ms ease;
}
.tk-combo.is-open .tk-combo-trigger-icon { transform: rotate(180deg); }

/* Open state: popover with pinned search + scrollable list */
.tk-combo-panel {
    position: absolute;
    z-index: 40;
    top: calc(100% + 6px);
    left: 0; right: 0;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 4px;
    box-shadow: 0 16px 40px -12px rgba(14,58,35,0.28);
    overflow: hidden;
}
/* Flip above the trigger when there isn't room below */
.tk-combo.is-up .tk-combo-panel {
    top: auto;
    bottom: calc(100% + 6px);
    box-shadow: 0 -16px 40px -12px rgba(14,58,35,0.28);
}
.tk-combo-search {
    position: relative;
    display: flex;
    align-items: center;
    padding: 8px;
    border-bottom: 1px solid var(--rule);
}
.tk-combo-icon {
    position: absolute;
    left: 20px;
    width: 16px; height: 16px;
    color: var(--ink-3);
    pointer-events: none;
}
.tk-combo-input {
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    background: var(--paper, #faf8f3);
    border: 1px solid var(--rule);
    border-radius: 3px;
    padding: 9px 12px 9px 34px;
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: var(--ink);
    outline: none;
}
.tk-combo-input::placeholder { color: var(--ink-3); font-weight: 400; }
.tk-combo-input:focus {
    border-color: var(--saffron-deep, #b1820a);
    box-shadow: 0 0 0 2px rgba(177,130,10,0.12);
}
.tk-combo-list {
    max-height: 264px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px;
}
.tk-combo-group {
    position: sticky;
    top: 0;
    background: var(--surface);
    font-family: 'JetBrains Mono', monospace;
    font-size: 9.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--saffron-deep, #b1820a);
    padding: 9px 10px 4px;
}
.tk-combo-option {
    display: flex;
    align-items: baseline;
    gap: 10px;
    width: 100%;
    text-align: left;
    border: none;
    background: transparent;
    padding: 8px 10px;
    border-radius: 3px;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 14px;
    color: var(--ink);
    line-height: 1.3;
    cursor: pointer;
}
.tk-combo-option:hover,
.tk-combo-option.is-active { background: rgba(177,130,10,0.10); }
.tk-combo-option.is-selected { color: var(--saffron-deep, #b1820a); font-weight: 600; }
.tk-combo-opt-no {
    flex: 0 0 auto;
    min-width: 22px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--ink-3);
    text-align: right;
}
.tk-combo-option.is-selected .tk-combo-opt-no { color: var(--saffron-deep, #b1820a); }
.tk-combo-opt-name { flex: 1 1 auto; min-width: 0; }
.tk-combo-option mark {
    background: rgba(177,130,10,0.22);
    color: inherit;
    border-radius: 2px;
    padding: 0 1px;
}
.tk-combo-empty {
    padding: 14px 10px;
    font-size: 13px;
    color: var(--ink-3);
    text-align: center;
}

/* ----------------------------------------------------------- Submit row */
.tk-coupon-submit {
    margin-top: 26px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
}
.tk-coupon-submit-btn {
    appearance: none;
    border: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 16px 28px;
    background: linear-gradient(180deg, var(--pitch-light) 0%, var(--pitch) 100%);
    color: var(--cream-ink);
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.02em;
    border-radius: 4px;
    box-shadow:
        inset 0 -3px 0 rgba(0,0,0,0.25),
        inset 0 1px 0 rgba(255,255,255,0.1),
        0 12px 28px -14px rgba(8,30,18,0.5);
    transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
.tk-coupon-submit-btn:hover {
    background: linear-gradient(180deg, #1c6c40 0%, var(--pitch-light) 100%);
    transform: translateY(-1px);
    box-shadow:
        inset 0 -3px 0 rgba(0,0,0,0.25),
        inset 0 1px 0 rgba(255,255,255,0.12),
        0 16px 32px -14px rgba(8,30,18,0.55);
}
.tk-coupon-submit-btn:active {
    transform: translateY(1px);
    box-shadow:
        inset 0 -1px 0 rgba(0,0,0,0.25),
        inset 0 1px 0 rgba(255,255,255,0.1),
        0 6px 16px -10px rgba(8,30,18,0.5);
}
.tk-coupon-submit-icon { display: inline-flex; align-items: center; }
.tk-coupon-submit-help {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--ink-3);
}

/* Floating save — visas bara i redigeringsläge, göms när riktiga knappen syns */
.tk-coupon-fab {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 120;
    appearance: none;
    border: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    background: linear-gradient(180deg, var(--pitch-light) 0%, var(--pitch) 100%);
    color: var(--cream-ink);
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.02em;
    border-radius: 999px;
    box-shadow:
        inset 0 -3px 0 rgba(0,0,0,0.25),
        inset 0 1px 0 rgba(255,255,255,0.1),
        0 14px 30px -10px rgba(8,30,18,0.55);
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px);
    transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease, background 120ms ease;
}
.tk-coupon-fab.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.tk-coupon-fab:hover {
    background: linear-gradient(180deg, #1c6c40 0%, var(--pitch-light) 100%);
    transform: translateY(-2px);
    box-shadow:
        inset 0 -3px 0 rgba(0,0,0,0.25),
        inset 0 1px 0 rgba(255,255,255,0.12),
        0 18px 34px -10px rgba(8,30,18,0.6);
}
.tk-coupon-fab:active {
    transform: translateY(1px);
    box-shadow:
        inset 0 -1px 0 rgba(0,0,0,0.25),
        inset 0 1px 0 rgba(255,255,255,0.1),
        0 8px 18px -10px rgba(8,30,18,0.5);
}
.tk-coupon-fab-icon { display: inline-flex; align-items: center; }
/* Horisontell placering på desktop sköts av JS (positionFab i tips.php) — FAB
   mäts mot kupongrutans verkliga högerkant och läggs precis utanför den. */
@media (min-width: 900px) {
    .tk-coupon-fab { bottom: 28px; }
}

.tk-coupon-locked {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px 22px;
    background: linear-gradient(180deg, #fff5f5 0%, #ffeaea 100%);
    border: 1px solid rgba(155,42,42,0.25);
    border-left: 4px solid var(--crimson);
    border-radius: 4px;
    width: 100%;
}
.tk-coupon-locked-stamp {
    display: inline-flex; align-items: center; justify-content: center;
    width: 64px; height: 64px;
    border: 3px solid var(--crimson);
    border-radius: 50%;
    color: var(--crimson);
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.16em;
    transform: rotate(-8deg);
    box-shadow: inset 0 0 0 2px rgba(155,42,42,0.05);
}
.tk-coupon-locked-title {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: var(--crimson);
}
.tk-coupon-locked-meta { font-size: 13px; color: var(--ink-2); margin-top: 2px; }

/* ----------------------------------------------------------- Empty state */
.tk-empty-coupon {
    text-align: center;
    padding: 60px 24px;
    background: var(--surface);
    border: 1px dashed var(--rule);
    border-radius: 4px;
    color: var(--ink-2);
}
.tk-empty-coupon svg { color: var(--ink-3); margin-bottom: 14px; }
.tk-empty-coupon h3 {
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: 'SOFT' 50, 'WONK' 0, 'opsz' 70;
    font-weight: 600;
    font-size: 22px;
    color: var(--ink);
    margin: 0 0 6px;
}
.tk-empty-coupon p { font-size: 14px; line-height: 1.55; margin: 0; max-width: 44ch; margin-left: auto; margin-right: auto; }

/* ============================================================== SIDEBAR */
.tk-coupon-side { display: flex; flex-direction: column; gap: 22px; min-width: 0; }

.tk-side-card {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 14px 30px -24px rgba(8,30,18,0.18);
    position: relative;
}
.tk-side-card-head {
    padding: 18px 22px 14px;
    border-bottom: 1px dashed var(--rule);
}
.tk-side-card-eyebrow {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--saffron-deep);
    margin-bottom: 6px;
}
.tk-side-card-title {
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: 'SOFT' 50, 'WONK' 0, 'opsz' 60;
    font-weight: 600;
    font-size: 19px;
    letter-spacing: -0.2px;
    color: var(--ink);
    margin: 0;
}

.tk-side-admin .tk-side-card-eyebrow { color: var(--crimson); }
.tk-side-admin-form {
    display: flex;
    gap: 8px;
    padding: 14px 22px 18px;
    align-items: center;
}
.tk-side-admin-form .tk-select { flex: 1; min-width: 0; }
.tk-side-admin-btn {
    appearance: none;
    border: 0;
    padding: 10px 16px;
    background: var(--ink);
    color: var(--surface);
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 600;
    font-size: 13px;
    border-radius: 3px;
    cursor: pointer;
    transition: background 120ms ease;
}
.tk-side-admin-btn:hover { background: var(--pitch); }

/* ----------------------------------------------------------- Score sheet */
.tk-side-total {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 18px 22px;
    background: linear-gradient(180deg, var(--pitch) 0%, var(--pitch-deep) 100%);
    color: var(--cream-ink);
    position: relative;
}
.tk-side-total::before {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background:
        repeating-linear-gradient(90deg, var(--cream-ink) 0 6px, transparent 6px 12px);
    opacity: 0.3;
}
.tk-side-total-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(247,239,217,0.65);
}
.tk-side-total-num {
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: 'SOFT' 50, 'WONK' 1, 'opsz' 144;
    font-weight: 700;
    font-size: 56px;
    line-height: 1;
    color: #fff;
    margin-left: auto;
    letter-spacing: -2px;
}
.tk-side-total-unit {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    letter-spacing: 0.1em;
    color: rgba(247,239,217,0.65);
}

.tk-side-rows {
    list-style: none;
    margin: 0;
    padding: 0;
}
.tk-side-row {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 12px 22px;
    border-bottom: 1px solid var(--rule-soft);
}
.tk-side-row:last-child { border-bottom: 0; }
.tk-side-row-num {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--ink-3);
}
.tk-side-row-match {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 600;
    font-size: 13.5px;
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 140ms ease;
    display: block;
    line-height: 1.25;
}
.tk-side-row-match:hover { border-bottom-color: var(--pitch); }
.tk-side-row-meta {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    color: var(--ink-3);
    margin-top: 3px;
    letter-spacing: 0.02em;
}
.tk-side-row-meta b { color: var(--ink-2); font-weight: 600; }
.tk-side-row-pts {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 13px;
    padding: 4px 9px;
    border-radius: 3px;
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
}
.tk-side-row-pts b { font-weight: 700; font-size: 14px; }
.tk-side-row-pts-unit { font-size: 10.5px; opacity: 0.75; font-weight: 600; }
.tk-pts-zero { background: rgba(106,114,105,0.10); color: var(--ink-3); }
.tk-pts-mid  { background: rgba(196,122,7,0.15);  color: var(--saffron-deep); }
.tk-pts-hi   { background: var(--pitch);          color: #fff; }

.tk-side-empty {
    padding: 30px 22px;
    text-align: center;
    color: var(--ink-3);
}
.tk-side-empty svg { color: var(--ink-3); margin-bottom: 10px; }
.tk-side-empty-text { font-size: 13px; line-height: 1.55; }

/* ------------------------------------------------------- Svitjakt (streaks) */
.tk-side-streak .tk-side-card-eyebrow { color: var(--pitch-light); }
.tk-streak-body { padding: 4px 22px 20px; }
.tk-streak-track { padding: 16px 0 4px; border-bottom: 1px dashed var(--rule); }
.tk-streak-track:last-child { border-bottom: 0; padding-bottom: 0; }

.tk-streak-track-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 13px;
}
.tk-streak-medal {
    flex: 0 0 auto;
    width: 38px; height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 4px 10px -5px rgba(8,30,18,0.5);
}
.tk-streak-medal svg { width: 19px; height: 19px; }
.tk-streak-medal.tier-bronze { background: linear-gradient(155deg, #c8893f 0%, #9a5f25 100%); }
.tk-streak-medal.tier-silver { background: linear-gradient(155deg, #b7c0c6 0%, #7d878d 100%); }
.tk-streak-medal.tier-gold   { background: linear-gradient(155deg, #e0a83a 0%, var(--saffron-deep) 100%); }

.tk-streak-track-meta {
    flex: 1; min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.tk-streak-track-eyebrow {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 600;
    font-size: 13px;
    color: var(--ink);
    letter-spacing: -0.1px;
}
.tk-streak-track-best {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.03em;
    color: var(--ink-3);
}
.tk-streak-track-figure {
    flex: 0 0 auto;
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: 'SOFT' 50, 'WONK' 1, 'opsz' 80;
    line-height: 1;
    white-space: nowrap;
    display: flex;
    align-items: baseline;
    gap: 4px;
}
.tk-streak-track-figure b { font-size: 30px; font-weight: 700; color: var(--pitch); letter-spacing: -1px; }
.tk-streak-track-unit {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-3);
}

/* ---- pip rail: one pip per match toward the gold tier ---- */
.tk-streak-rail {
    position: relative;
    display: flex;
    gap: 3px;
    padding-bottom: 16px;        /* room for tier numbers under boundary pips */
}
.tk-streak-pip {
    position: relative;
    flex: 1 1 0;
    height: 9px;
    border-radius: 2px;
    background: rgba(19,24,21,0.08);
    transition: background 200ms ease;
}
.tk-streak-pip.is-best {                /* high-water mark: best run this event */
    background: rgba(21,90,53,0.22);
}
.tk-streak-pip.is-filled {              /* live: current ongoing run (overrides ghost) */
    background: linear-gradient(180deg, var(--pitch-light) 0%, var(--pitch) 100%);
}
.tk-streak-pip.is-tier::after {
    content: "";
    position: absolute;
    left: 0; right: 0; top: -3px;
    height: 2px;
    border-radius: 2px;
}
.tk-streak-pip.is-tier.tier-bronze::after { background: #b97a3a; }
.tk-streak-pip.is-tier.tier-silver::after { background: #97a1a7; }
.tk-streak-pip.is-tier.tier-gold::after   { background: var(--saffron); }
.tk-streak-pip.is-next {
    box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--saffron);
}
.tk-streak-pip-num {
    position: absolute;
    top: 13px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'JetBrains Mono', monospace;
    font-size: 9.5px;
    font-weight: 600;
    color: var(--ink-3);
    white-space: nowrap;
}
.tk-streak-pip-chk {
    font-style: normal;
    color: var(--saffron-deep);
    font-size: 8px;
    margin-left: 1px;
    vertical-align: top;
}
.tk-streak-pip.is-earned.is-tier::after { background: var(--saffron); }
.tk-streak-pip.is-earned .tk-streak-pip-num { color: var(--saffron-deep); }
.tk-streak-caption {
    font-size: 12px;
    color: var(--ink-2);
    line-height: 1.5;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 7px;
    margin-bottom: 8px;
}
.tk-streak-next-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--saffron-deep);
}
.tk-streak-next-label.is-earned {
    color: #fff;
    background: linear-gradient(155deg, #e0a83a 0%, var(--saffron-deep) 100%);
    padding: 2px 7px;
    border-radius: 3px;
    letter-spacing: 0.1em;
}
.tk-streak-next-name {
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: 'SOFT' 50, 'opsz' 40;
    font-weight: 600;
    font-size: 14px;
    color: var(--ink);
}
.tk-streak-next-need {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    color: var(--ink-3);
    letter-spacing: 0.02em;
}
.tk-streak-done {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--pitch-light);
}

.tk-streak-live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    letter-spacing: 0.03em;
}
.tk-streak-live-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    flex: 0 0 auto;
}
.tk-streak-live.is-hot  { color: var(--saffron-deep); }
.tk-streak-live.is-hot  .tk-streak-live-dot { background: var(--saffron); box-shadow: 0 0 0 3px rgba(196,122,7,0.2); }
.tk-streak-live.is-live { color: var(--pitch); }
.tk-streak-live.is-live .tk-streak-live-dot { background: var(--pitch-light); box-shadow: 0 0 0 3px rgba(21,90,53,0.15); }
.tk-streak-live.is-cold { color: var(--ink-3); }
.tk-streak-live.is-cold .tk-streak-live-dot { background: transparent; border: 1.5px solid var(--ink-3); }

/* ---- expand: the live line is the click target (native details/summary) ---- */
.tk-streak-expand { margin-top: 6px; }
.tk-streak-summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;
    padding: 7px 9px;
    margin: 0 -9px;
    border-radius: 4px;
    transition: background 120ms ease;
    outline: none;
}
.tk-streak-summary::-webkit-details-marker { display: none; }
.tk-streak-summary:hover { background: rgba(14,58,35,0.05); }
.tk-streak-summary:focus-visible { box-shadow: 0 0 0 2px var(--saffron); }
.tk-streak-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.tk-streak-chev { width: 13px; height: 13px; transition: transform 180ms ease; }
.tk-streak-expand[open] .tk-streak-chev { transform: rotate(180deg); }

.tk-streak-detail { padding-top: 12px; }

/* sequence strip: one hoverable cell per finished, tipped match, in order */
.tk-streak-seq {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-bottom: 13px;
}
.tk-streak-cell {
    width: 14px; height: 14px;
    border-radius: 3px;
    cursor: help;
}
.tk-streak-cell.is-hit  { background: linear-gradient(180deg, var(--pitch-light) 0%, var(--pitch) 100%); }
.tk-streak-cell.is-miss { background: rgba(155,42,42,0.18); box-shadow: inset 0 0 0 1px rgba(155,42,42,0.28); }

/* detailed per-match list */
.tk-streak-games {
    list-style: none;
    margin: 0; padding: 0;
    max-height: 280px;
    overflow-y: auto;
    border-top: 1px solid var(--rule-soft);
}
.tk-streak-game {
    display: grid;
    grid-template-columns: 24px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 9px 2px;
    border-bottom: 1px solid var(--rule-soft);
}
.tk-streak-game:last-child { border-bottom: 0; }
.tk-streak-game-num {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--ink-3);
}
.tk-streak-game-match {
    display: block;
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 600;
    font-size: 12.5px;
    color: var(--ink);
    text-decoration: none;
    line-height: 1.25;
    border-bottom: 1px solid transparent;
}
.tk-streak-game-match:hover { border-bottom-color: var(--pitch); }
.tk-streak-game-meta {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--ink-3);
    margin-top: 3px;
    letter-spacing: 0.01em;
}
.tk-streak-game-meta i { font-style: normal; color: var(--ink-2); font-weight: 600; }
.tk-streak-game-mark {
    width: 22px; height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 700;
    flex: 0 0 auto;
}
.tk-streak-game-mark.is-hit  { background: var(--pitch); color: #fff; }
.tk-streak-game-mark.is-miss { background: rgba(155,42,42,0.12); color: var(--crimson); }
.tk-streak-game.is-miss .tk-streak-game-match { color: var(--ink-2); }

/* next match to track (card footer, shared by both streaks) */
.tk-streak-next-match {
    border-top: 1px dashed var(--rule);
    padding: 15px 22px 18px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.tk-streak-nm-eyebrow {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--saffron-deep);
}
.tk-streak-nm-teams {
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: 'SOFT' 50, 'opsz' 50;
    font-weight: 600;
    font-size: 15px;
    color: var(--ink);
}
.tk-streak-nm-meta {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    color: var(--ink-3);
    letter-spacing: 0.02em;
}

/* ============================================================== RESPONSIVE */
@media (max-width: 1100px) {
    .tk-coupon-row { grid-template-columns: 50px 1fr 148px; gap: 6px 14px; padding: 14px 20px; }
    .tk-coupon-stamp { width: 40px; height: 40px; font-size: 19px; }
    .tk-tkn-pip { width: 36px; height: 36px; font-size: 15px; }
    .tk-score-stepper { grid-template-columns: 26px 50px 26px; }
    .tk-score-input { font-size: 20px; padding: 9px 0; }
}

@media (max-width: 899px) {
    .tk-coupon-intro { grid-template-columns: 64px 1fr; gap: 18px; padding: 18px 18px 20px; }
    .tk-coupon-intro-mark { width: 64px; height: 64px; }
    .tk-coupon-intro-mark svg { width: 40px; height: 40px; }
    .tk-coupon-intro-title { font-size: 21px; }
    .tk-coupon-intro-title em { font-size: 17px; padding: 0 6px; vertical-align: 2px; }
    .tk-coupon-intro-lead { font-size: 13.5px; }
    .tk-coupon-progress { flex-direction: column; align-items: flex-start; gap: 8px; }
    .tk-coupon-progress-bar { max-width: none; width: 100%; }

    .tk-coupon-card-head { padding: 18px 18px 14px; }
    .tk-coupon-card-title { font-size: 19px; }
    .tk-coupon-legend { margin-left: 0; flex: 1 1 100%; }

    .tk-coupon-row {
        grid-template-columns: 44px 1fr;
        grid-template-areas:
            "stamp meta"
            "match match"
            "tkn   tkn";
        gap: 10px 14px;
        padding: 14px 16px;
    }
    /* facit sits under the score, above the 1X2 row (overrides the desktop
       is-finished template, which uses 3 columns this layout doesn't have) */
    .tk-coupon-row.is-finished {
        grid-template-areas:
            "stamp meta"
            "match match"
            "facit facit"
            "tkn   tkn";
    }
    .tk-coupon-stamp { width: 44px; height: 44px; font-size: 18px; }

    /* Base layout already stacks names-above-panel; just tighten sizing */
    .tk-coupon-team-name { font-size: 16px; }
    .tk-score-stepper { grid-template-columns: 48px 72px 48px; }
    .tk-step-btn { font-size: 24px; min-height: 52px; }
    .tk-score-input { font-size: 26px; padding: 12px 0; }
    .tk-score-sep { font-size: 22px; }

    .tk-coupon-tkn { justify-self: stretch; justify-content: space-between; align-self: auto; margin-bottom: 0; }
    .tk-coupon-tkn::before { display: none; }
    .tk-tkn-pip { flex: 1; width: auto; height: 44px; font-size: 17px; }

    .tk-coupon-extra { grid-template-columns: 48px 1fr; gap: 14px; padding: 16px 18px 18px; }
    .tk-extra-icon { width: 48px; height: 48px; }
    .tk-extra-icon svg { width: 30px; height: 30px; }
    .tk-extra-selects { grid-template-columns: 1fr; gap: 10px; }
    .tk-select-vs { display: none; }

    .tk-coupon-submit-btn { width: 100%; justify-content: center; padding: 14px 20px; font-size: 15px; }
    .tk-coupon-fab { right: 14px; bottom: 14px; padding: 13px 20px; font-size: 14px; }

    .tk-side-total { padding: 16px 18px; }
    .tk-side-total-num { font-size: 44px; }
    .tk-side-row { padding: 11px 18px; grid-template-columns: 28px 1fr auto; gap: 10px; }
    .tk-side-card-head { padding: 16px 18px 12px; }
    .tk-side-admin-form { padding: 12px 18px 14px; }
}

/* Tiny phones — same layout, slightly tighter sizing but +/- stays tap-friendly */
@media (max-width: 520px) {
    .tk-coupon-intro {
        grid-template-columns: 1fr;
        text-align: left;
    }
    .tk-coupon-intro-mark { width: 56px; height: 56px; }
    .tk-coupon-locked { flex-direction: column; align-items: flex-start; gap: 14px; }

    .tk-coupon-row {
        grid-template-columns: 40px 1fr;
        gap: 8px 10px;
        padding: 12px 12px;
    }
    .tk-coupon-stamp { width: 40px; height: 40px; font-size: 16px; }
    .tk-coupon-meta { font-size: 9.5px; gap: 8px; }

    .tk-coupon-team-name { font-size: 15px; }
    .tk-score-pair { gap: 10px; }
    .tk-score-stepper { grid-template-columns: 46px 64px 46px; }
    .tk-step-btn { font-size: 22px; min-height: 50px; }
    .tk-score-input { font-size: 24px; padding: 11px 0; }
    .tk-score-sep { font-size: 20px; }

    .tk-tkn-pip { height: 42px; font-size: 16px; }
}

/* Extra-small phones (≤ ~380px) — keep touch target ≥ 44px */
@media (max-width: 380px) {
    .tk-coupon-row { padding: 11px 10px; grid-template-columns: 36px 1fr; }
    .tk-coupon-stamp { width: 36px; height: 36px; font-size: 14px; }
    .tk-coupon-team-name { font-size: 14px; }
    .tk-score-pair { gap: 6px; }
    .tk-score-stepper { grid-template-columns: 44px 54px 44px; }
    .tk-step-btn { font-size: 20px; min-height: 48px; }
    .tk-score-input { font-size: 22px; padding: 10px 0; }
}

/* ==========================================================================
   MATCHREFERAT — broadcast scoreboard + editorial timeline
   Concept: a sports magazine match report fused with a TV broadcast graphic.
   Massive Fraunces score numerals, inline SVG glyphs, vertical timeline with
   side-aware tilt (home vs away), podium-style tipsresultat leaderboard.
   ========================================================================== */

.tk-report-wrap { padding: 0 4px; }
body#page2 .container_12 .wrapper.tk-report-wrap > *:not(.tk-press-ribbon) { width: 100%; }

/* Defuse any inherited min-height from skeleton/style.css that would stretch
   the hero into empty green canvas. The wrapper itself decides its height
   from its content. */
body#page2 section#content,
body#page2 section#content > .main,
body#page2 section#content .bg,
body#page2 section#content .container_12 { min-height: 0; }
body#page2 .container_12 .wrapper.tk-report-wrap { align-content: flex-start; }

/* -------------------------------------------------------------- HERO BOARD */
.tk-mf-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;       /* override any inherited stretch */
    flex: 0 0 auto;      /* hero never stretches inside flex parents */
    background: linear-gradient(150deg, var(--pitch-deep) 0%, var(--pitch) 55%, #145232 100%);
    color: var(--cream-ink);
    border-radius: 4px;
    margin-bottom: 22px;
    padding: 12px 24px 10px;
    box-shadow:
        0 22px 50px -28px rgba(8,30,18,0.6),
        inset 0 1px 0 rgba(255,255,255,0.06);
    overflow: hidden;
}
.tk-mf-hero::before {
    /* faint pitch stripes */
    content: "";
    position: absolute; inset: 0;
    background:
        repeating-linear-gradient(90deg, transparent 0 60px, rgba(255,255,255,0.018) 60px 120px),
        radial-gradient(ellipse 80% 60% at 85% 10%, rgba(247,239,217,0.08), transparent 60%);
    pointer-events: none;
}
.tk-mf-hero-ornament {
    position: absolute;
    right: -80px; top: -80px;
    width: 280px; height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 40%, rgba(196,122,7,0.18) 0%, transparent 60%);
    pointer-events: none;
}
.tk-mf-hero-live::before {
    background:
        repeating-linear-gradient(90deg, transparent 0 60px, rgba(255,200,200,0.04) 60px 120px),
        radial-gradient(ellipse 80% 60% at 85% 10%, rgba(255,180,180,0.08), transparent 60%);
}

.tk-mf-hero > * { position: relative; z-index: 1; }

/* ---------- Hero meta (status + chips) ---------- */
.tk-mf-hero-meta {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin: 0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(247,239,217,0.65);
}
.tk-mf-status {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 8px;
    border-radius: 2px;
    background: rgba(247,239,217,0.10);
    color: var(--cream-ink);
    font-weight: 700;
    letter-spacing: 0.22em;
}
.tk-mf-status-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--cream-ink);
}
.tk-mf-status-live    { background: rgba(155,42,42,0.30); color: #ffb8b8; }
.tk-mf-status-live    .tk-mf-status-dot {
    background: #ff5a5a;
    box-shadow: 0 0 0 3px rgba(255,90,90,0.25);
    animation: tkPulse 1.4s ease-in-out infinite;
}
@keyframes tkPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,90,90,0.45); }
    50%      { box-shadow: 0 0 0 5px rgba(255,90,90,0); }
}
.tk-mf-status-done     { background: rgba(20,82,50,0.45); color: #cfead8; }
.tk-mf-status-done     .tk-mf-status-dot { background: #6fc28a; }
.tk-mf-status-upcoming { background: rgba(196,122,7,0.20); color: #f7d77a; }
.tk-mf-status-upcoming .tk-mf-status-dot { background: var(--saffron); }

.tk-mf-meta-chip {
    padding: 2px 7px;
    background: rgba(247,239,217,0.06);
    color: rgba(247,239,217,0.75);
    border-radius: 2px;
    font-weight: 500;
    letter-spacing: 0.14em;
}
.tk-mf-meta-edit {
    margin-left: auto;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 7px;
    color: rgba(247,239,217,0.65);
    background: rgba(247,239,217,0.06);
    border-radius: 2px;
    text-decoration: none;
    transition: color 140ms ease, background 140ms ease;
}
.tk-mf-meta-edit:hover { color: var(--cream-ink); background: rgba(247,239,217,0.12); }
.tk-mf-meta-edit svg { width: 13px; height: 13px; }

/* ---------- Hero board ---------- */
.tk-mf-hero-board {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 18px;
    padding: 0;
    margin: 0;
}
.tk-mf-side {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 12px;
    row-gap: 0;
    min-width: 0;
}
.tk-mf-side-home { text-align: left; }
.tk-mf-side-away { text-align: right; grid-template-columns: 1fr auto; }
.tk-mf-side-home .tk-mf-flag,
.tk-mf-side-home .tk-mf-team-mark { grid-row: 1 / span 2; }
.tk-mf-side-away .tk-mf-flag,
.tk-mf-side-away .tk-mf-team-mark { grid-row: 1 / span 2; grid-column: 2; }
.tk-mf-side-away .tk-mf-team-name { grid-column: 1; }
.tk-mf-side-away .tk-mf-team-tag { grid-column: 1; }

.tk-mf-team-mark {
    display: inline-flex; align-items: center; justify-content: center;
    width: 58px; height: 58px;
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 22px;
    letter-spacing: 0.04em;
    color: #fff;
    box-shadow: inset 0 -3px 0 rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.18);
}
.tk-mf-mark-home { background: linear-gradient(160deg, #1c6c40 0%, var(--pitch-light) 100%); }
.tk-mf-mark-away { background: linear-gradient(160deg, var(--saffron) 0%, var(--saffron-deep) 100%); }

/* ---------- Flags ---------- */
.tk-mf-flag {
    display: inline-block;
    object-fit: cover;
    border-radius: 3px;
    box-shadow: 0 6px 16px -8px rgba(0,0,0,0.4), inset 0 0 0 1px rgba(0,0,0,0.05);
}
.tk-mf-flag-big {
    width: 44px;
    height: 30px;
    border-radius: 3px;
}
.tk-mf-flag-small {
    width: 20px;
    height: 14px;
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.18), inset 0 0 0 1px rgba(0,0,0,0.05);
    vertical-align: -2px;
}

.tk-mf-team-name {
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: 'SOFT' 50, 'WONK' 0, 'opsz' 100;
    font-weight: 600;
    font-size: 22px;
    line-height: 1.05;
    color: #fff;
    letter-spacing: -0.4px;
    max-width: 100%;
}
.tk-mf-team-tag {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(247,239,217,0.5);
    margin-top: 2px;
}

.tk-mf-board-center {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 0 6px;
}
.tk-mf-score-line {
    display: flex; align-items: baseline; gap: 14px;
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: 'SOFT' 50, 'WONK' 1, 'opsz' 144;
    font-weight: 700;
    color: #fff;
    letter-spacing: -2px;
    line-height: 1;
    text-shadow: 0 6px 22px rgba(0,0,0,0.35);
}
.tk-mf-score-num {
    font-size: 56px;
    min-width: 38px;
    text-align: center;
}
.tk-mf-score-sep {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 400;
    font-size: 26px;
    color: rgba(247,239,217,0.4);
    letter-spacing: 0;
    margin-bottom: 6px;
}
.tk-mf-score-pending .tk-mf-score-num { color: rgba(247,239,217,0.35); }

.tk-mf-paus {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 2px 9px;
    background: rgba(247,239,217,0.08);
    border-radius: 2px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(247,239,217,0.55);
}
.tk-mf-paus b { color: var(--cream-ink); font-weight: 700; }
.tk-mf-paus-empty { height: 0; background: transparent; }

/* ---------- Hero footer (arena/publik/domare) ---------- */
.tk-mf-hero-foot {
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    margin-top: 0;
    padding-top: 8px;
    border-top: 1px dashed rgba(247,239,217,0.18);
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 11.5px;
    color: rgba(247,239,217,0.7);
}
.tk-mf-foot-item {
    display: inline-flex; align-items: center; gap: 6px;
}
.tk-mf-foot-item svg { width: 14px; height: 14px; color: rgba(247,239,217,0.42); flex-shrink: 0; }
.tk-mf-foot-item b { color: var(--cream-ink); font-weight: 600; }

/* ================================================================ GRID */
.tk-mf-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: 26px;
    align-items: start;
}
@media (max-width: 1100px) {
    .tk-mf-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 22px; }
}
@media (max-width: 899px) {
    .tk-mf-grid { grid-template-columns: 1fr; gap: 18px; }
}

.tk-mf-main, .tk-mf-side-col { display: flex; flex-direction: column; gap: 22px; min-width: 0; }

/* ================================================================ CARD */
.tk-mf-card {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 4px;
    box-shadow: 0 14px 32px -24px rgba(8,30,18,0.18);
    overflow: hidden;
    position: relative;
}
.tk-mf-card::before {
    content: "";
    position: absolute;
    left: 0; top: 0;
    width: 3px; height: 64px;
    background: linear-gradient(180deg, var(--saffron) 0%, var(--pitch) 100%);
    z-index: 2;
}
.tk-mf-card-head {
    display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
    padding: 16px 24px 12px;
    border-bottom: 1px solid var(--rule);
    background: linear-gradient(180deg, rgba(14,58,35,0.025) 0%, transparent 100%);
}
.tk-mf-card-eyebrow {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--saffron-deep);
    flex: 1 1 100%;
}
.tk-mf-card-title {
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: 'SOFT' 50, 'WONK' 0, 'opsz' 80;
    font-weight: 600;
    font-size: 24px;
    letter-spacing: -0.4px;
    color: var(--ink);
    margin: 0;
    flex: 1 1 auto;
}
.tk-mf-card-action {
    margin-left: auto;
    display: inline-flex; align-items: center; gap: 5px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--pitch);
    text-decoration: none;
    padding: 5px 10px;
    border: 1px solid var(--rule);
    border-radius: 2px;
    transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
.tk-mf-card-action:hover { background: var(--pitch); color: var(--cream-ink); border-color: var(--pitch); }
.tk-mf-card-action svg { width: 11px; height: 11px; }
.tk-mf-card-count {
    margin-left: auto;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--ink-3);
}

.tk-mf-empty {
    display: flex; align-items: center; gap: 14px;
    padding: 28px 24px;
    color: var(--ink-3);
    font-size: 14px;
    line-height: 1.55;
}
.tk-mf-empty svg { color: var(--ink-3); flex-shrink: 0; }

/* ============================================================== TIMELINE */
.tk-mf-timeline {
    list-style: none;
    margin: 0;
    padding: 18px 0 10px;
    position: relative;
}
/* central vertical rule */
.tk-mf-timeline::before {
    content: "";
    position: absolute;
    left: 88px; top: 0; bottom: 0;
    width: 1px;
    background: repeating-linear-gradient(180deg, var(--rule) 0 5px, transparent 5px 9px);
}
.tk-mf-tl-item {
    display: grid;
    grid-template-columns: 64px 36px minmax(0, 1fr);
    align-items: center;
    gap: 10px 14px;
    padding: 10px 24px;
    position: relative;
}
.tk-mf-tl-item + .tk-mf-tl-item { margin-top: 2px; }
.tk-mf-tl-item.is-home { background: linear-gradient(90deg, rgba(14,58,35,0.04) 0%, transparent 55%); }
.tk-mf-tl-item.is-away { background: linear-gradient(270deg, rgba(196,122,7,0.06) 0%, transparent 55%); }

/* Goal moments get a broadcast spotlight */
.tk-mf-tl-item.tk-mf-tl-goal,
.tk-mf-tl-item.tk-mf-tl-penalty,
.tk-mf-tl-item.tk-mf-tl-own {
    padding: 14px 24px;
    background: linear-gradient(90deg, rgba(14,58,35,0.07) 0%, rgba(14,58,35,0.02) 40%, transparent 70%);
    border-left: 3px solid var(--pitch);
    padding-left: 21px;
}
.tk-mf-tl-item.tk-mf-tl-goal.is-away,
.tk-mf-tl-item.tk-mf-tl-penalty.is-away,
.tk-mf-tl-item.tk-mf-tl-own.is-away {
    background: linear-gradient(270deg, rgba(196,122,7,0.09) 0%, rgba(196,122,7,0.02) 40%, transparent 70%);
    border-left: 0;
    border-right: 3px solid var(--saffron);
    padding-left: 24px;
    padding-right: 21px;
}
.tk-mf-tl-item.tk-mf-tl-goal .tk-mf-tl-min-num,
.tk-mf-tl-item.tk-mf-tl-penalty .tk-mf-tl-min-num,
.tk-mf-tl-item.tk-mf-tl-own .tk-mf-tl-min-num {
    font-size: 24px;
    color: var(--pitch-deep);
}

.tk-mf-tl-min {
    text-align: right;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 18px;
    color: var(--pitch);
    line-height: 1;
}
.tk-mf-tl-min-tick { font-size: 12px; color: var(--ink-3); margin-left: 1px; }

.tk-mf-tl-glyph {
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--surface);
    border: 2px solid var(--rule);
    color: var(--ink-2);
    z-index: 1;
    flex-shrink: 0;
}
.tk-mf-tl-glyph svg { width: 18px; height: 18px; }

/* event-kind palette */
.tk-mf-tl-goal    .tk-mf-tl-glyph { background: var(--pitch);   border-color: var(--pitch);   color: var(--cream-ink); box-shadow: 0 6px 14px -8px rgba(14,58,35,0.55); }
.tk-mf-tl-penalty .tk-mf-tl-glyph { background: var(--saffron); border-color: var(--saffron); color: #fff; }
.tk-mf-tl-own     .tk-mf-tl-glyph { background: #fff; border-color: var(--crimson); color: var(--crimson); }
.tk-mf-tl-yellow  .tk-mf-tl-glyph { background: #fcd34d; border-color: #d4a017;   color: #5a3a05; }
.tk-mf-tl-red     .tk-mf-tl-glyph { background: var(--crimson); border-color: #7a1f1f; color: #fff; }
.tk-mf-tl-injury  .tk-mf-tl-glyph { background: #fff; border-color: var(--crimson); color: var(--crimson); }
.tk-mf-tl-var     .tk-mf-tl-glyph { background: #1f3a8a; border-color: #15296a;   color: #d6e2ff; }
.tk-mf-tl-whistle .tk-mf-tl-glyph { background: var(--ink);  border-color: var(--ink);  color: var(--cream-ink); }
.tk-mf-tl-sub     .tk-mf-tl-glyph { background: #e2e8df; border-color: var(--rule); color: var(--ink-2); }

.tk-mf-tl-body { min-width: 0; }
.tk-mf-tl-head {
    display: flex; align-items: baseline; gap: 10px;
    margin-bottom: 3px;
}
.tk-mf-tl-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-3);
    flex: 0 0 auto;
    min-width: 0;
}
.tk-mf-tl-detail {
    font-size: 15.5px;
    color: var(--ink);
    line-height: 1.35;
}
.tk-mf-tl-player {
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: 'SOFT' 50, 'WONK' 0, 'opsz' 60;
    font-weight: 600;
    font-size: 17px;
    letter-spacing: -0.2px;
    color: var(--ink);
    margin-right: 4px;
}
.tk-mf-tl-tag {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 2px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    vertical-align: 2px;
    margin-right: 4px;
}
.tk-mf-tl-tag-own { background: rgba(155,42,42,0.15); color: var(--crimson); }
.tk-mf-tl-tag-pen { background: rgba(196,122,7,0.18); color: var(--saffron-deep); }
.tk-mf-tl-tally {
    display: inline-block;
    margin-left: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--ink-3);
    letter-spacing: 0.02em;
}
.tk-mf-tl-team {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 12.5px;
    color: var(--ink-3);
    margin-top: 4px;
}

.tk-mf-tl-score {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 3px 8px;
    background: var(--pitch-deep);
    color: var(--cream-ink);
    border-radius: 3px;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.04em;
}

/* ============================================================== PREVIEW */
.tk-mf-preview-body {
    padding: 18px 24px 22px;
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: 'SOFT' 30, 'WONK' 0, 'opsz' 80;
    font-weight: 400;
    font-size: 17px;
    line-height: 1.55;
    color: var(--ink-2);
    column-rule: 1px solid var(--rule);
}
.tk-mf-preview-body::first-letter {
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: 'SOFT' 80, 'WONK' 1, 'opsz' 144;
    font-weight: 700;
    font-size: 56px;
    float: left;
    line-height: 0.95;
    padding: 5px 10px 0 0;
    color: var(--pitch);
}

/* ============================================================ STANDINGS */
.tk-mf-standings-wrap { padding: 6px 6px 8px; overflow-x: auto; }
.tk-mf-standings {
    width: 100%;
    border-collapse: collapse;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 14px;
}
.tk-mf-standings thead th {
    text-align: left;
    padding: 10px 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-3);
    border-bottom: 1px solid var(--rule);
    font-weight: 600;
}
.tk-mf-standings tbody td {
    padding: 11px 8px;
    border-bottom: 1px solid var(--rule-soft);
    color: var(--ink-2);
}
.tk-mf-standings tbody tr:last-child td { border-bottom: 0; }
.tk-mf-standings .tk-col-pos {
    width: 32px;
    text-align: center;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    color: var(--ink-3);
}
.tk-mf-standings .tk-col-team {
    font-weight: 600;
    color: var(--ink);
    min-width: 140px;
}
.tk-mf-standings th, .tk-mf-standings td { text-align: center; }
.tk-mf-standings .tk-col-team, .tk-mf-standings thead th.tk-col-team { text-align: left; }
.tk-mf-standings .tk-col-pts {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    color: var(--ink);
}
.tk-mf-standings .tk-pos { color: var(--pitch); font-weight: 600; }
.tk-mf-standings .tk-neg { color: var(--crimson); font-weight: 600; }
.tk-mf-standings tbody tr.is-here td {
    background: linear-gradient(90deg, rgba(14,58,35,0.06) 0%, transparent 80%);
}
.tk-mf-standings tbody tr.is-here .tk-col-team { color: var(--pitch); }

/* ============================================================ COMMENTS */
.tk-mf-comments {
    list-style: none;
    margin: 0;
    padding: 8px 0;
}
.tk-mf-comment {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 14px;
    padding: 14px 24px;
    border-bottom: 1px solid var(--rule-soft);
}
.tk-mf-comment:last-of-type { border-bottom: 0; }
.tk-mf-avatar {
    width: 42px; height: 42px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 14px;
    color: #fff;
    letter-spacing: 0.04em;
    box-shadow: inset 0 -2px 0 rgba(0,0,0,0.18), 0 4px 10px -6px rgba(0,0,0,0.3);
}
.tk-mf-avatar-sm { width: 28px; height: 28px; font-size: 11px; }
.tk-mf-comment-head {
    display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
    margin-bottom: 4px;
}
.tk-mf-comment-name {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 700;
    font-size: 14.5px;
    color: var(--ink);
}
.tk-mf-comment-time {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--ink-3);
    letter-spacing: 0.04em;
}
.tk-mf-comment-del {
    margin-left: auto;
    display: inline-flex; align-items: center; gap: 4px;
    color: var(--ink-3);
    font-size: 11.5px;
    text-decoration: none;
    padding: 3px 7px;
    border-radius: 2px;
    transition: color 140ms ease, background 140ms ease;
}
.tk-mf-comment-del:hover { color: var(--crimson); background: rgba(155,42,42,0.08); }
.tk-mf-comment-text {
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--ink-2);
}

.tk-mf-composer {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 14px;
    padding: 18px 24px 22px;
    background: linear-gradient(180deg, var(--surface) 0%, #f5f9f5 100%);
    border-top: 1px dashed var(--rule);
}
.tk-mf-composer-label {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 6px;
}
.tk-mf-composer textarea {
    width: 100%;
    border: 1px solid var(--rule);
    border-radius: 3px;
    background: var(--surface);
    padding: 12px 14px;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 14.5px;
    color: var(--ink);
    line-height: 1.5;
    resize: vertical;
    transition: border-color 140ms ease, box-shadow 140ms ease;
}
.tk-mf-composer textarea:focus {
    outline: none;
    border-color: var(--pitch);
    box-shadow: 0 0 0 3px rgba(14,58,35,0.10);
}
.tk-mf-composer-actions { display: flex; gap: 10px; margin-top: 10px; }
.tk-mf-btn-primary, .tk-mf-btn-ghost {
    appearance: none;
    border: 0;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 16px;
    border-radius: 3px;
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 600;
    font-size: 13.5px;
    letter-spacing: 0.02em;
    transition: background 140ms ease, color 140ms ease, transform 100ms ease;
}
.tk-mf-btn-primary {
    background: linear-gradient(180deg, var(--pitch-light) 0%, var(--pitch) 100%);
    color: var(--cream-ink);
    box-shadow: inset 0 -2px 0 rgba(0,0,0,0.22), 0 8px 18px -10px rgba(8,30,18,0.45);
}
.tk-mf-btn-primary:hover { transform: translateY(-1px); }
.tk-mf-btn-ghost {
    background: transparent;
    color: var(--ink-3);
    border: 1px solid var(--rule);
}
.tk-mf-btn-ghost:hover { background: var(--paper-tint); color: var(--ink-2); }

/* ============================================================== LINEUPS */
.tk-mf-lineups {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}
.tk-mf-lineup {
    padding: 16px 18px 18px;
}
.tk-mf-lineup-home { border-right: 1px dashed var(--rule); }
.tk-mf-lineup-head {
    display: flex; align-items: center; gap: 10px;
    padding-bottom: 12px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--rule-soft);
}
.tk-mf-lineup .tk-mf-team-mark {
    width: 32px; height: 32px;
    font-size: 13px;
    box-shadow: inset 0 -2px 0 rgba(0,0,0,0.18);
}
.tk-mf-lineup-name {
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: 'SOFT' 50, 'WONK' 0, 'opsz' 50;
    font-weight: 600;
    font-size: 15px;
    color: var(--ink);
    letter-spacing: -0.2px;
}
.tk-mf-lineup-rows {
    list-style: none;
    margin: 0;
    padding: 0;
}
.tk-mf-lineup-row {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 13px;
    color: var(--ink);
    border-bottom: 1px solid transparent;
}
.tk-mf-lineup-row.is-bench {
    color: var(--ink-2);
    font-size: 12.5px;
}
.tk-mf-lineup-num {
    width: 26px; height: 26px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    border: 1.5px solid var(--rule);
    background: var(--surface);
    font-family: 'JetBrains Mono', monospace;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--pitch);
    line-height: 1;
}
.tk-mf-lineup-row.is-bench .tk-mf-lineup-num {
    border-color: var(--rule-soft);
    background: var(--paper-tint);
    color: var(--ink-3);
    width: 22px; height: 22px;
    font-size: 10.5px;
}
.tk-mf-lineup-player { font-weight: 500; line-height: 1.25; }
.tk-mf-lineup-divider {
    display: flex; align-items: center; gap: 10px;
    margin: 8px 0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.tk-mf-lineup-divider::before,
.tk-mf-lineup-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: repeating-linear-gradient(90deg, var(--rule) 0 4px, transparent 4px 8px);
}

.tk-mf-lineup-actions {
    display: inline-flex; align-items: center; gap: 4px;
    flex-shrink: 0;
}
.tk-mf-lineup-action {
    width: 16px; height: 16px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    color: var(--ink-2);
}
.tk-mf-lineup-action svg { width: 12px; height: 12px; }
.tk-mf-lineup-action-goal    { background: var(--pitch);    color: var(--cream-ink); }
.tk-mf-lineup-action-penalty { background: var(--saffron);  color: #fff; }
.tk-mf-lineup-action-own     { background: #fff; border: 1px solid var(--crimson); color: var(--crimson); }
.tk-mf-lineup-action-yellow  { background: #fcd34d; color: #5a3a05; border-radius: 2px; }
.tk-mf-lineup-action-red     { background: var(--crimson); color: #fff; border-radius: 2px; }
.tk-mf-lineup-action-injury  { background: #fff; border: 1px solid var(--crimson); color: var(--crimson); }
.tk-mf-lineup-action-sub     { background: var(--paper-tint); color: var(--ink-2); }

/* =============================================================== TIPBOARD */
.tk-mf-tipboard {
    list-style: none;
    margin: 0;
    padding: 6px 0 4px;
}
.tk-mf-tipboard-row {
    display: grid;
    grid-template-columns: 30px 28px 1fr auto auto;
    align-items: center;
    gap: 10px;
    padding: 9px 22px;
    border-bottom: 1px solid var(--rule-soft);
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 13.5px;
    color: var(--ink);
    position: relative;
}
.tk-mf-tipboard-row:last-child { border-bottom: 0; }
.tk-mf-tipboard-row.is-me {
    background: linear-gradient(90deg, rgba(14,58,35,0.07) 0%, transparent 75%);
    box-shadow: inset 3px 0 0 var(--pitch);
}
.tk-mf-tipboard-pos {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 700;
    color: var(--ink-3);
    text-align: center;
}
.tk-mf-tipboard-name {
    font-weight: 600;
    display: inline-flex; align-items: center; gap: 6px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tk-mf-tipboard-tip {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ink-2);
    padding: 3px 8px;
    background: var(--paper-tint);
    border-radius: 3px;
    letter-spacing: 0.04em;
}
.tk-mf-tipboard-pts {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--ink-3);
    letter-spacing: 0.02em;
}
.tk-mf-tipboard-pts b {
    font-weight: 700;
    color: var(--pitch);
    font-size: 14px;
}
.tk-mf-tipboard-row.is-me .tk-mf-tipboard-pts b { color: var(--pitch-deep); }

.tk-mf-medal {
    display: inline-block;
    width: 14px; height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: inset 0 -2px 0 rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.4);
}
.tk-mf-medal-gold   { background: radial-gradient(circle at 35% 30%, #ffe066 0%, #d4a017 80%); }
.tk-mf-medal-silver { background: radial-gradient(circle at 35% 30%, #f3f5f7 0%, #aab2b9 80%); }
.tk-mf-medal-bronze { background: radial-gradient(circle at 35% 30%, #d9a06c 0%, #8a4f1f 80%); }

.tk-mf-buddy {
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--saffron);
}

/* ----- Tipboard points legend ----- */
.tk-mf-pts-legend {
    padding: 14px 22px 18px;
    border-top: 1px dashed var(--rule);
    background: linear-gradient(180deg, var(--surface) 0%, #f5f9f5 100%);
}
.tk-mf-pts-legend-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 10px;
}
.tk-mf-pts-legend ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
.tk-mf-pts-legend li {
    display: flex; align-items: baseline; gap: 8px;
    font-size: 12.5px;
    color: var(--ink-2);
}
.tk-mf-pts-legend li b {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 14px;
    color: var(--pitch);
    min-width: 28px;
}

/* ================================================================ RESPONSIVE */
@media (max-width: 1100px) {
    .tk-mf-hero { padding: 12px 20px 10px; }
    .tk-mf-score-num { font-size: 52px; min-width: 36px; }
    .tk-mf-team-name { font-size: 20px; }
}

@media (max-width: 899px) {
    .tk-mf-hero { padding: 10px 14px 10px; gap: 6px; }
    .tk-mf-hero-board { gap: 10px; }
    .tk-mf-team-mark { width: 38px; height: 38px; font-size: 15px; }
    .tk-mf-team-name { font-size: 17px; }
    .tk-mf-team-tag { font-size: 9px; }
    .tk-mf-flag-big { width: 36px; height: 24px; }
    .tk-mf-score-num { font-size: 42px; min-width: 30px; }
    .tk-mf-score-sep { font-size: 22px; margin-bottom: 4px; }
    .tk-mf-hero-foot { gap: 12px; font-size: 11px; padding-top: 8px; }
    .tk-mf-meta-edit { margin-left: 0; }

    .tk-mf-card-head { padding: 16px 18px 12px; }
    .tk-mf-card-title { font-size: 21px; }

    .tk-mf-timeline::before { left: 60px; }
    .tk-mf-tl-item { grid-template-columns: 44px 32px minmax(0, 1fr); gap: 8px 10px; padding: 9px 16px; }
    .tk-mf-tl-min { font-size: 16px; }
    .tk-mf-tl-glyph { width: 32px; height: 32px; }
    .tk-mf-tl-glyph svg { width: 16px; height: 16px; }
    .tk-mf-tl-player { font-size: 15.5px; }
    .tk-mf-tl-detail { font-size: 14.5px; }
    .tk-mf-tl-tally { display: block; margin-left: 0; margin-top: 2px; }

    .tk-mf-preview-body { padding: 16px 18px 20px; font-size: 16px; }
    .tk-mf-preview-body::first-letter { font-size: 44px; }

    .tk-mf-comment { padding: 12px 18px; grid-template-columns: 36px 1fr; gap: 12px; }
    .tk-mf-avatar { width: 36px; height: 36px; font-size: 13px; }
    .tk-mf-composer { padding: 16px 18px 18px; grid-template-columns: 36px 1fr; gap: 12px; }

    .tk-mf-pts-legend ul { grid-template-columns: 1fr; }
    .tk-mf-tipboard-row { padding: 9px 18px; grid-template-columns: 24px 26px 1fr auto auto; }
}

@media (max-width: 640px) {
    .tk-mf-hero-board {
        grid-template-columns: 1fr auto 1fr;
        gap: 10px;
    }
    .tk-mf-side { grid-template-columns: auto 1fr; column-gap: 8px; }
    .tk-mf-side-away { grid-template-columns: 1fr auto; }
    .tk-mf-score-num { font-size: 38px; }

    .tk-mf-lineups { grid-template-columns: 1fr; }
    .tk-mf-lineup-home { border-right: 0; border-bottom: 1px dashed var(--rule); }
}

@media (max-width: 480px) {
    .tk-mf-hero { padding: 10px 12px 10px; }
    .tk-mf-team-name { font-size: 14px; letter-spacing: -0.2px; }
    .tk-mf-team-tag { display: none; }
    .tk-mf-flag-big { width: 28px; height: 19px; }
    .tk-mf-score-num { font-size: 34px; min-width: 24px; }
    .tk-mf-score-line { gap: 8px; }
    .tk-mf-score-sep { font-size: 18px; }
    .tk-mf-hero-foot { font-size: 10.5px; gap: 10px; padding-top: 6px; }
    .tk-mf-foot-item svg { width: 12px; height: 12px; }

    .tk-mf-timeline::before { left: 46px; }
    .tk-mf-tl-item { grid-template-columns: 36px 28px minmax(0, 1fr); padding: 9px 14px; gap: 6px 10px; }
    .tk-mf-tl-min { font-size: 14px; }
    .tk-mf-tl-glyph { width: 28px; height: 28px; }
    .tk-mf-tl-glyph svg { width: 14px; height: 14px; }
    .tk-mf-tl-score { font-size: 11px; padding: 2px 6px; }
    .tk-mf-tl-head { flex-wrap: wrap; }
}


/* ===================================================================
   MATCHFAKTA — TACTICAL PRESS DISPATCH (redesign, prefix tk-mfx-)
   Editorial folio · top-down pitch chart · tabloid leaderboard.
   =================================================================== */

/* ---------- FOLIO HEAD (replaces broadcast scoreboard) ---------- */
.tk-mfx-folio {
    position: relative;
    background:
        radial-gradient(ellipse 70% 100% at 100% 0%, rgba(196,122,7,0.06), transparent 60%),
        radial-gradient(ellipse 50% 80% at 0% 100%, rgba(14,58,35,0.05), transparent 60%),
        var(--surface);
    border-top: 4px solid var(--saffron);
    border-bottom: 1px solid var(--rule);
    padding: 18px 28px 18px;
    margin-bottom: 20px;
}
.tk-mfx-folio::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: -5px;
    height: 4px;
    background: linear-gradient(90deg, var(--pitch) 0%, var(--pitch-deep) 60%, var(--saffron-deep) 100%);
}
.tk-mfx-folio-meta {
    display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 14px;
}
.tk-mfx-folio-status {
    padding: 3px 9px;
    background: var(--pitch);
    color: var(--cream-ink);
    font-weight: 700;
    border-radius: 1px;
}
.tk-mfx-folio-status.is-live    { background: var(--crimson); }
.tk-mfx-folio-status.is-upcoming { background: var(--saffron); color: var(--ink); }
.tk-mfx-folio-meta-sep { width: 6px; height: 6px; border-radius: 50%; background: var(--rule); }
.tk-mfx-folio-meta b { color: var(--ink); font-weight: 700; }
.tk-mfx-folio-edit {
    margin-left: auto;
    display: inline-flex; align-items: center; gap: 5px;
    color: var(--ink-3);
    text-decoration: none;
    padding: 3px 8px;
    background: rgba(14,58,35,0.04);
    border-radius: 1px;
    transition: background 140ms ease, color 140ms ease;
}
.tk-mfx-folio-edit:hover { background: var(--pitch); color: var(--cream-ink); }
.tk-mfx-folio-edit svg { width: 11px; height: 11px; }
@media (max-width: 520px) {
    .tk-mfx-folio-edit {
        position: absolute;
        top: 10px;
        right: 12px;
        margin-left: 0;
        padding: 5px 7px;
        background: rgba(14,58,35,0.08);
        z-index: 2;
    }
    .tk-mfx-folio-edit-label { display: none; }
    .tk-mfx-folio-edit svg { width: 14px; height: 14px; }
}

.tk-mfx-folio-board {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 26px;
    align-items: center;
}
.tk-mfx-folio-team {
    display: flex; flex-direction: column; gap: 4px;
    min-width: 0;
}
.tk-mfx-folio-team-home { align-items: flex-start; text-align: left; }
.tk-mfx-folio-team-away { align-items: flex-end;   text-align: right; }
.tk-mfx-folio-team-flag {
    display: inline-block;
    width: 40px; height: 27px;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.05), 0 2px 6px rgba(0,0,0,0.08);
}
.tk-mfx-folio-team-flag.tk-mf-team-mark {
    width: 36px; height: 27px;
    background: var(--pitch);
    color: #fff;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700; font-size: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    letter-spacing: 0.04em;
}
.tk-mfx-folio-team-mark-away { background: var(--saffron-deep); }
.tk-mfx-folio-team-tag {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px; letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.tk-mfx-folio-team-name {
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: 'SOFT' 30, 'WONK' 0, 'opsz' 100;
    font-weight: 600;
    font-size: 28px;
    letter-spacing: -0.5px;
    color: var(--ink);
    line-height: 1;
}

.tk-mfx-folio-score {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.tk-mfx-folio-score-line {
    display: flex; align-items: baseline; gap: 14px;
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: 'SOFT' 50, 'WONK' 1, 'opsz' 144;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -3px;
    line-height: 0.92;
}
.tk-mfx-folio-score-num {
    font-size: 58px;
    text-align: center;
    min-width: 42px;
}
.tk-mfx-folio-score-sep {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 400;
    font-size: 26px;
    color: var(--ink-3);
    letter-spacing: 0;
    margin-bottom: 6px;
}
.tk-mfx-folio-score.is-pending .tk-mfx-folio-score-num { color: var(--ink-3); }
.tk-mfx-folio-paus {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9.5px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-top: 2px;
}
.tk-mfx-folio-paus b { color: var(--ink); font-weight: 700; }

.tk-mfx-folio-foot {
    display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed var(--rule);
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.tk-mfx-folio-foot b { color: var(--ink); font-weight: 700; }
.tk-mfx-folio-foot-item {
    display: inline-flex; align-items: center; gap: 7px;
}
.tk-mfx-folio-foot-item svg { width: 13px; height: 13px; color: var(--ink-3); }

/* ---------- PITCH DISPATCH CARD ---------- */
.tk-mfx-pitch-card {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 4px;
    margin-bottom: 20px;
    overflow: hidden;
    box-shadow: 0 18px 36px -28px rgba(8,30,18,0.22);
}
.tk-mfx-pitch-head {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 14px;
    padding: 12px 22px;
    border-bottom: 1px dashed var(--rule);
    background: linear-gradient(180deg, rgba(14,58,35,0.04) 0%, transparent 100%);
}
.tk-mfx-pitch-side {
    display: flex; align-items: center; gap: 10px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.tk-mfx-pitch-side.right { justify-content: flex-end; }
.tk-mfx-pitch-side b {
    color: var(--ink);
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: -0.2px;
    text-transform: none;
}
.tk-mfx-pitch-side .tk-mfx-formation {
    color: var(--saffron-deep);
    font-weight: 700;
}
.tk-mfx-pitch-eyebrow {
    text-align: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9.5px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ink-3);
    padding: 0 12px;
}
.tk-mfx-pitch-eyebrow b { color: var(--pitch); }

.tk-mfx-pitch-svg-wrap {
    position: relative;
    background: #0e3a23;
}
.tk-mfx-pitch-svg {
    display: block;
    width: 100%;
    height: auto;
}

/* Pitch chip styling */
.tk-mfx-chip { cursor: default; }
.tk-mfx-chip-circle {
    transition: filter 180ms ease, transform 180ms ease;
    transform-origin: center;
    transform-box: fill-box;
}
.tk-mfx-chip:hover .tk-mfx-chip-circle {
    filter: drop-shadow(0 0 10px rgba(247,239,217,0.45));
}
.tk-mfx-chip.is-home .tk-mfx-chip-circle {
    fill: var(--cream-ink); stroke: var(--pitch-deep); stroke-width: 1.6;
}
.tk-mfx-chip.is-away .tk-mfx-chip-circle {
    fill: var(--saffron); stroke: #6b4202; stroke-width: 1.6;
}
.tk-mfx-chip-num {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700; font-size: 13px;
    text-anchor: middle; dominant-baseline: central;
    pointer-events: none;
}
.tk-mfx-chip.is-home .tk-mfx-chip-num { fill: var(--pitch-deep); }
.tk-mfx-chip.is-away .tk-mfx-chip-num { fill: #3a2401; }
.tk-mfx-chip-name {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 500; font-size: 9px;
    letter-spacing: 0.04em;
    fill: rgba(247,239,217,0.78);
    text-anchor: middle;
    pointer-events: none;
}
.tk-mfx-chip-badge {
    pointer-events: none;
}
.tk-mfx-chip-badge-bg { stroke-width: 1.2; }
.tk-mfx-chip-badge.goal .tk-mfx-chip-badge-bg { fill: var(--cream-ink); stroke: var(--pitch-deep); }
.tk-mfx-chip-badge.yellow .tk-mfx-chip-badge-bg { fill: #f5c032; stroke: #8a6700; }
.tk-mfx-chip-badge.red .tk-mfx-chip-badge-bg { fill: var(--crimson); stroke: #5a1010; }
.tk-mfx-chip-badge.own .tk-mfx-chip-badge-bg { fill: #fff; stroke: var(--crimson); }
.tk-mfx-chip-badge-text {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700; font-size: 8px;
    text-anchor: middle; dominant-baseline: central;
    fill: var(--pitch-deep);
}
.tk-mfx-chip-badge.yellow .tk-mfx-chip-badge-text,
.tk-mfx-chip-badge.red .tk-mfx-chip-badge-text { fill: #fff; }
.tk-mfx-chip-badge.own .tk-mfx-chip-badge-text { fill: var(--crimson); }
.tk-mfx-chip-badge.goal .tk-mfx-chip-badge-ball polygon { fill: var(--pitch-deep); }
.tk-mfx-chip-badge.goal .tk-mfx-chip-badge-ball path { stroke: var(--pitch-deep); stroke-width: 0.8; }
.tk-mfx-chip-badge.subout .tk-mfx-chip-badge-bg { fill: var(--ink); stroke: var(--ink-3); }
.tk-mfx-chip-badge.subout path { stroke: var(--cream-ink); stroke-width: 1.6; }
.tk-mfx-chip-badge.own .tk-mfx-chip-badge-ball polygon { fill: var(--crimson); }
.tk-mfx-chip-badge.own path { stroke: var(--crimson); }

/* ---------- BENCH RAIL ---------- */
.tk-mfx-bench {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px dashed var(--rule);
}
.tk-mfx-bench-side {
    padding: 12px 20px;
}
.tk-mfx-bench-side + .tk-mfx-bench-side {
    border-left: 1px dashed var(--rule);
}
.tk-mfx-bench-eyebrow {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 8px;
    display: flex; gap: 6px; align-items: center;
}
.tk-mfx-bench-eyebrow b { color: var(--ink); }
.tk-mfx-bench-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
}
.tk-mfx-bench-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 12.5px;
    color: var(--ink-2);
}
.tk-mfx-bench-num {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700; font-size: 10.5px;
    color: var(--ink-3);
    min-width: 18px;
    text-align: right;
}
.tk-mfx-bench-name { font-weight: 500; color: var(--ink); }
.tk-mfx-bench-actions {
    display: inline-flex; gap: 4px;
    margin-left: 2px;
    align-items: center;
}
.tk-mfx-bench-actions:empty { display: none; }
.tk-mfx-bench-badge {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 2px;
}
.tk-mfx-bench-badge svg {
    width: 12px; height: 12px;
}
.tk-mfx-bench-badge.sub svg { color: var(--saffron-deep); }
.tk-mfx-bench-badge.goal { color: var(--pitch); }
.tk-mfx-bench-badge.goal b {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700; font-size: 10px;
    color: var(--pitch);
    letter-spacing: 0;
}
.tk-mfx-bench-badge.own { color: var(--crimson); }
.tk-mfx-bench-badge.own b {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700; font-size: 10px;
    color: var(--crimson);
    letter-spacing: 0;
}
.tk-mfx-bench-badge.yellow,
.tk-mfx-bench-badge.red {
    width: 8px; height: 11px;
    border-radius: 1px;
}
.tk-mfx-bench-badge.yellow { background: #f5c032; box-shadow: inset 0 0 0 1px #8a6700; }
.tk-mfx-bench-badge.red    { background: var(--crimson); box-shadow: inset 0 0 0 1px #5a1010; }
.tk-mfx-bench-row.is-subbed .tk-mfx-bench-name { color: var(--ink); }
.tk-mfx-bench-side.tk-mfx-bench-away {
    text-align: right;
}
.tk-mfx-bench-side.tk-mfx-bench-away .tk-mfx-bench-list { justify-content: flex-end; }
.tk-mfx-bench-side.tk-mfx-bench-away .tk-mfx-bench-row { flex-direction: row-reverse; }
.tk-mfx-bench-side.tk-mfx-bench-away .tk-mfx-bench-num { text-align: left; }

/* ---------- GOAL-BAR (minute timeline strip) ---------- */
.tk-mfx-goalbar {
    position: relative;
    padding: 56px 28px 60px;
    border-top: 1px dashed var(--rule);
    background: linear-gradient(180deg, rgba(14,58,35,0.03) 0%, transparent 100%);
}
.tk-mfx-goalbar-head {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 14px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px; letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.tk-mfx-goalbar-head b { color: var(--ink); font-weight: 700; }
.tk-mfx-goalbar-rail {
    position: relative;
    height: 2px;
    background: var(--rule);
    margin: 24px 0;
}
.tk-mfx-goalbar-half {
    position: absolute; top: -3px;
    width: 1px; height: 8px;
    background: var(--ink-3);
}
.tk-mfx-goalbar-half-label {
    position: absolute; top: 14px;
    transform: translateX(-50%);
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.06em;
    color: var(--ink-3);
}
.tk-mfx-goalbar-tick {
    position: absolute; top: -2px;
    width: 1px; height: 6px;
    background: var(--rule);
    opacity: 0.7;
}
.tk-mfx-goalbar-pip {
    position: absolute;
    transform: translateX(-50%);
    width: 16px; height: 16px;
    line-height: 0;
    background: var(--surface);
    border-radius: 50%;
    padding: 1px;
    box-shadow: 0 0 0 1.5px var(--surface);
}
.tk-mfx-goalbar-pip svg { width: 100%; height: 100%; display: block; }
.tk-mfx-goalbar-pip.is-home {
    top: -8px;
    color: var(--pitch);
}
.tk-mfx-goalbar-pip.is-away {
    top: -8px;
    color: var(--saffron-deep);
}
/* Own goal: crimson ball regardless of side */
.tk-mfx-goalbar-pip.is-own { color: var(--crimson); }
/* Penalty: deeper accent so the "P" badge reads */
.tk-mfx-goalbar-pip.is-home.is-pen { color: var(--pitch-deep); }
.tk-mfx-goalbar-pip.is-away.is-pen { color: #6b4202; }
.tk-mfx-goalbar-pip-label {
    position: absolute;
    transform: translateX(-50%);
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 9.5px;
    letter-spacing: 0.04em;
    color: var(--ink-2);
    white-space: nowrap;
    padding: 2px 5px;
    background: var(--surface);
    border-radius: 2px;
    box-shadow: 0 0 0 1px var(--rule);
}
.tk-mfx-goalbar-pip-label.is-home { color: var(--pitch); }
.tk-mfx-goalbar-pip-label.is-away { color: var(--saffron-deep); }
.tk-mfx-goalbar-pip-label.is-own  { color: var(--crimson); box-shadow: 0 0 0 1px rgba(201,42,42,0.35); }
.tk-mfx-goalbar-pip-label .tk-pip-min  { font-weight: 700; }
.tk-mfx-goalbar-pip-label .tk-pip-name { margin-left: 4px; }
.tk-mfx-goalbar-pip-label em {
    font-style: normal;
    font-size: 8.5px;
    letter-spacing: 0.08em;
    color: var(--ink-3);
    margin-left: 2px;
    text-transform: uppercase;
}
.tk-mfx-goalbar-pip-label.is-own em { color: var(--crimson); }
/* row-0 sits closest to the rail; subsequent rows fan outward */
.tk-mfx-goalbar-pip-label.is-home.is-row-0 { top: -28px; }
.tk-mfx-goalbar-pip-label.is-home.is-row-1 { top: -46px; }
.tk-mfx-goalbar-pip-label.is-home.is-row-2 { top: -64px; }
.tk-mfx-goalbar-pip-label.is-away.is-row-0 { top: 18px; }
.tk-mfx-goalbar-pip-label.is-away.is-row-1 { top: 36px; }
.tk-mfx-goalbar-pip-label.is-away.is-row-2 { top: 54px; }
.tk-mfx-goalbar-empty {
    text-align: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    letter-spacing: 0.18em;
    color: var(--ink-3);
    text-transform: uppercase;
    padding: 8px 0;
}

/* ---------- STATLINE PRESS CARDS (4 dark tiles, press-pass vibe) ---------- */
.tk-mfx-statline {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 22px;
}
.tk-mfx-statcard {
    position: relative;
    overflow: hidden;
    padding: 22px 18px 14px;
    color: var(--cream-ink);
    background:
        linear-gradient(180deg, rgba(247,239,217,0.04) 0%, rgba(247,239,217,0.10) 100%),
        var(--ink);
    border: 1px solid rgba(247,239,217,0.10);
    border-radius: 4px 4px 8px 8px;
    transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.tk-mfx-statcard:hover {
    transform: translateY(-2px);
    border-color: rgba(247,239,217,0.22);
    box-shadow: 0 8px 22px -10px rgba(0,0,0,0.55);
}
/* Top "lanyard" stripe — palette per tile */
.tk-mfx-statcard-lanyard {
    position: absolute; top: 0; left: 0; right: 0;
    height: 3px;
}
.tk-mfx-statcard.is-goals  .tk-mfx-statcard-lanyard { background: linear-gradient(90deg, #1c6c40 0%, #4ade80 50%, #1c6c40 100%); }
.tk-mfx-statcard.is-cards  .tk-mfx-statcard-lanyard { background: linear-gradient(90deg, #8a6700 0%, #f5c032 35%, #c92a2a 70%, #5a1010 100%); }
.tk-mfx-statcard.is-var    .tk-mfx-statcard-lanyard { background: linear-gradient(90deg, #1f3a8a 0%, #6b8bff 50%, #1f3a8a 100%); }
.tk-mfx-statcard.is-events .tk-mfx-statcard-lanyard { background: linear-gradient(90deg, var(--saffron-deep) 0%, var(--saffron) 50%, var(--saffron-deep) 100%); }
/* Press-pass clip-hole flourish */
.tk-mfx-statcard-perf {
    position: absolute; top: 9px; left: 50%;
    transform: translateX(-50%);
    width: 32px; height: 4px;
    background: rgba(0,0,0,0.40);
    border-radius: 999px;
    box-shadow: inset 0 1px 0 rgba(0,0,0,0.45);
}
/* Live pulse — only present when match is live */
.tk-mfx-statcard-live {
    position: absolute; top: 12px; right: 14px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #f7d77a;
    box-shadow: 0 0 0 0 rgba(247,215,122,0.8);
    animation: tkLivePulse 1.6s ease-out infinite;
    z-index: 2;
}
/* Watermark glyph at bottom-right */
.tk-mfx-statcard-glyph {
    position: absolute;
    bottom: -10px; right: -8px;
    width: 88px; height: 88px;
    opacity: 0.10;
    pointer-events: none;
}
.tk-mfx-statcard.is-goals  .tk-mfx-statcard-glyph { color: #86efac; opacity: 0.18; }
.tk-mfx-statcard.is-cards  .tk-mfx-statcard-glyph { opacity: 0.22; }
.tk-mfx-statcard.is-var    .tk-mfx-statcard-glyph { color: #9ab4ff; opacity: 0.20; }
.tk-mfx-statcard.is-events .tk-mfx-statcard-glyph { color: #f7d77a; opacity: 0.18; }
.tk-mfx-statcard:hover .tk-mfx-statcard-glyph { opacity: 0.28; transition: opacity 240ms ease; }
/* Header row: eyebrow + tag */
.tk-mfx-statcard-head {
    display: flex; align-items: baseline; gap: 8px;
    margin: 8px 0 8px;
    position: relative; z-index: 1;
}
.tk-mfx-statcard-eyebrow {
    font: 700 10.5px/1 'JetBrains Mono', monospace;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #fff;
}
.tk-mfx-statcard-tag {
    font: 500 9.5px/1 'JetBrains Mono', monospace;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(247,239,217,0.45);
}
.tk-mfx-statcard.is-goals  .tk-mfx-statcard-eyebrow { color: #86efac; }
.tk-mfx-statcard.is-cards  .tk-mfx-statcard-eyebrow { color: #f5c032; }
.tk-mfx-statcard.is-var    .tk-mfx-statcard-eyebrow { color: #9ab4ff; }
.tk-mfx-statcard.is-events .tk-mfx-statcard-eyebrow { color: #f7d77a; }
/* Big serif value */
.tk-mfx-statcard-value {
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: 'SOFT' 60, 'WONK' 1, 'opsz' 144;
    font-weight: 700;
    font-size: 52px;
    line-height: 0.95;
    letter-spacing: -1.8px;
    color: #fff;
    margin-bottom: 12px;
    position: relative; z-index: 1;
    font-variant-numeric: tabular-nums;
}
/* Split chips at bottom */
.tk-mfx-statcard-split {
    display: flex; flex-wrap: wrap; gap: 6px;
    padding-top: 10px;
    border-top: 1px dashed rgba(247,239,217,0.16);
    position: relative; z-index: 1;
}
.tk-mfx-statchip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 7px;
    background: rgba(247,239,217,0.06);
    border: 1px solid rgba(247,239,217,0.10);
    border-radius: 999px;
    font: 600 10px/1 'JetBrains Mono', monospace;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(247,239,217,0.6);
    font-variant-numeric: tabular-nums;
}
.tk-mfx-statchip b {
    color: #fff; font-weight: 700; font-size: 11px;
    letter-spacing: -0.01em;
}
.tk-statchip-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 6px currentColor;
    flex-shrink: 0;
}
.tk-statchip-card {
    width: 6px; height: 9px;
    border-radius: 1px;
    flex-shrink: 0;
}
.tk-statchip-card.yellow { background: #f5c032; box-shadow: 0 0 0 1px #8a6700; }
.tk-statchip-card.red    { background: #c92a2a; box-shadow: 0 0 0 1px #5a1010; }
/* Chip palette per type */
.tk-mfx-statchip.is-home   { color: #86efac; }
.tk-mfx-statchip.is-away   { color: #f7d77a; }
.tk-mfx-statchip.is-yellow { color: #f5c032; }
.tk-mfx-statchip.is-red    { color: #ff8a8a; }
.tk-mfx-statchip.is-pos    { color: #86efac; }
.tk-mfx-statchip.is-neg    { color: #ff8a8a; }
.tk-mfx-statchip.is-other  { color: #9ab4ff; }
.tk-mfx-statchip.is-sub    { color: #9ab4ff; }
.tk-mfx-statchip.is-injury { color: #ff8a8a; }
/* Live keyframes (reuse name if already defined elsewhere) */
@keyframes tkLivePulse {
    0%   { box-shadow: 0 0 0 0 rgba(247,215,122,0.7); }
    70%  { box-shadow: 0 0 0 8px rgba(247,215,122,0); }
    100% { box-shadow: 0 0 0 0 rgba(247,215,122,0); }
}

/* ---------- TIPSBOARD (tabloid leaderboard) ---------- */
.tk-mfx-board-card {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 4px;
    margin-bottom: 20px;
    overflow: hidden;
}
.tk-mfx-board-head {
    display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
    padding: 14px 22px 12px;
    background: var(--ink);
    color: var(--cream-ink);
}
.tk-mfx-board-eyebrow {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px; letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--saffron);
    font-weight: 600;
    flex: 1 1 100%;
}
.tk-mfx-board-title {
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: 'SOFT' 30, 'WONK' 0, 'opsz' 100;
    font-weight: 600;
    font-size: 22px;
    color: var(--cream-ink);
    margin: 0;
    flex: 1 1 auto;
    letter-spacing: -0.3px;
}
.tk-mfx-board-action {
    margin-left: auto;
    display: inline-flex; align-items: center; gap: 5px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px; letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(247,239,217,0.7);
    text-decoration: none;
    padding: 4px 10px;
    border: 1px solid rgba(247,239,217,0.18);
    border-radius: 2px;
    transition: background 140ms ease, color 140ms ease;
}
.tk-mfx-board-action:hover { background: rgba(247,239,217,0.1); color: var(--cream-ink); }
.tk-mfx-board-action svg { width: 11px; height: 11px; }

.tk-mfx-board-col-head {
    display: grid;
    grid-template-columns: 44px 40px minmax(0, 1fr) 70px minmax(80px, 130px) 70px;
    align-items: center;
    gap: 14px;
    padding: 8px 22px;
    border-bottom: 1px solid var(--rule);
    font-family: 'JetBrains Mono', monospace;
    font-size: 9.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.tk-mfx-board-col-head .tk-mfx-board-col-pts { text-align: right; }

.tk-mfx-board {
    list-style: none; margin: 0; padding: 0;
}
.tk-mfx-board-row {
    display: grid;
    grid-template-columns: 44px 40px minmax(0, 1fr) 70px minmax(80px, 130px) 70px;
    align-items: center;
    gap: 14px;
    padding: 12px 22px;
    border-bottom: 1px dashed var(--rule);
    transition: background 140ms ease;
}
/* Transparent wrapper so the existing 6-col grid is unaffected on desktop & tablet. */
.tk-mfx-board-meta { display: contents; }
.tk-mfx-board-row:last-child { border-bottom: 0; }
.tk-mfx-board-row:hover { background: rgba(14,58,35,0.025); }
.tk-mfx-board-row.is-me {
    background: rgba(196,122,7,0.07);
    box-shadow: inset 3px 0 0 var(--saffron);
}
.tk-mfx-board-row.is-me:hover { background: rgba(196,122,7,0.1); }

.tk-mfx-board-pos {
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: 'SOFT' 30, 'WONK' 1, 'opsz' 100;
    font-weight: 700; font-size: 24px;
    color: var(--ink-3);
    line-height: 1;
    letter-spacing: -0.5px;
}
.tk-mfx-board-row.is-top1 .tk-mfx-board-pos { color: var(--saffron-deep); }
.tk-mfx-board-row.is-top2 .tk-mfx-board-pos { color: #6c757d; }
.tk-mfx-board-row.is-top3 .tk-mfx-board-pos { color: #a06a3c; }

.tk-mfx-board-avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700; font-size: 12px;
    letter-spacing: 0.04em;
    box-shadow: inset 0 -2px 0 rgba(0,0,0,0.15);
}
.tk-mfx-board-name {
    display: flex; align-items: center; gap: 8px;
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 500; font-size: 16px;
    color: var(--ink);
    min-width: 0;
    letter-spacing: -0.1px;
}
.tk-mfx-board-name b {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tk-mfx-board-medal {
    display: inline-block;
    width: 14px; height: 14px;
    border-radius: 50%;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -1px 0 rgba(0,0,0,0.2);
    flex-shrink: 0;
}
.tk-mfx-board-medal.gold   { background: linear-gradient(180deg, #f5d96a 0%, #c48a07 100%); }
.tk-mfx-board-medal.silver { background: linear-gradient(180deg, #d4d4d6 0%, #8d8d92 100%); }
.tk-mfx-board-medal.bronze { background: linear-gradient(180deg, #d99670 0%, #8a5226 100%); }
.tk-mfx-board-buddy {
    display: inline-flex; align-items: center; justify-content: center;
    width: 14px; height: 14px;
    color: var(--saffron-deep);
    flex-shrink: 0;
}
.tk-mfx-board-buddy svg { width: 12px; height: 12px; }

.tk-mfx-board-tip {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700; font-size: 14px;
    color: var(--ink-2);
    padding: 4px 8px;
    background: rgba(14,58,35,0.05);
    border-radius: 2px;
    letter-spacing: 0.06em;
    text-align: center;
}
.tk-mfx-board-bar {
    height: 8px;
    background: var(--rule);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}
.tk-mfx-board-bar-fill {
    position: absolute; top: 0; bottom: 0; left: 0;
    background: linear-gradient(90deg, var(--pitch) 0%, #1c6c40 100%);
    transition: width 320ms ease;
}
/* Per-point bar shading: 4p deep green → 0p warm grey */
.tk-mfx-board-bar-fill.is-max  { background: linear-gradient(90deg, #1c6c40 0%, var(--pitch-deep) 100%); } /* 4p */
.tk-mfx-board-bar-fill.is-mid  { background: linear-gradient(90deg, var(--pitch) 0%, #1c6c40 100%); }     /* 3p */
.tk-mfx-board-bar-fill.is-low  { background: linear-gradient(90deg, #6ea585 0%, #4a8a64 100%); }          /* 2p */
.tk-mfx-board-bar-fill.is-min  { background: linear-gradient(90deg, #b0c9b8 0%, #87a896 100%); }          /* 1p */
.tk-mfx-board-bar-fill.is-zero { background: #c4c0b3; }                                                    /* 0p */
.tk-mfx-board-pts {
    text-align: right;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700; font-size: 17px;
    color: var(--ink);
    letter-spacing: -0.02em;
}
.tk-mfx-board-pts span { font-size: 11px; color: var(--ink-3); font-weight: 500; margin-left: 1px; }
.tk-mfx-board-pts.is-zero { color: var(--ink-3); }

.tk-mfx-board-legend {
    border-top: 1px solid var(--rule);
    padding: 14px 22px;
    background: rgba(14,58,35,0.02);
    display: grid;
    grid-template-columns: auto repeat(4, 1fr);
    gap: 16px;
    align-items: baseline;
}
.tk-mfx-board-legend-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.tk-mfx-board-legend-item {
    display: flex; align-items: baseline; gap: 6px;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 11.5px;
    color: var(--ink-2);
}
.tk-mfx-board-legend-item b {
    font-family: 'JetBrains Mono', monospace;
    color: var(--pitch);
    font-weight: 700;
    font-size: 13px;
}

/* ---------- BOARD: COLLAPSE / EXPAND ---------- */
.tk-mfx-board.is-collapsed .tk-mfx-board-row.is-collapsible { display: none; }
.tk-mfx-board-more {
    display: flex; justify-content: center;
    padding: 18px 22px 22px;
    border-bottom: 1px dashed var(--rule);
}
.tk-mfx-board-toggle {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px; font-weight: 500; letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--cream-ink);
    background: var(--pitch);
    cursor: pointer;
    padding: 11px 24px;
    border: 1px solid var(--pitch-deep);
    border-radius: 3px;
    box-shadow: 0 6px 16px -8px rgba(14,58,35,0.5);
    transition: background 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}
.tk-mfx-board-toggle:hover {
    background: var(--pitch-deep);
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -10px rgba(14,58,35,0.6);
}
.tk-mfx-board-toggle svg { width: 14px; height: 14px; transition: transform 160ms ease; }
.tk-mfx-board-toggle .lbl-less { display: none; }
.tk-mfx-board-toggle[aria-expanded="true"] .lbl-all { display: none; }
.tk-mfx-board-toggle[aria-expanded="true"] .lbl-less { display: inline; }
.tk-mfx-board-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

/* ---------- LOWER GRID: STANDINGS + LOG ---------- */
.tk-mfx-lower {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    gap: 20px;
    align-items: start;
    margin-bottom: 20px;
}
@media (max-width: 1000px) {
    .tk-mfx-lower { grid-template-columns: 1fr; }
}

/* Group standings */
.tk-mfx-table-card {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 4px;
    overflow: hidden;
}
.tk-mfx-table-head {
    padding: 12px 20px;
    background: linear-gradient(180deg, var(--pitch-deep) 0%, var(--pitch) 100%);
    color: var(--cream-ink);
}
.tk-mfx-table-head .tk-mfx-table-eyebrow {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px; letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--saffron);
    margin-bottom: 2px;
}
.tk-mfx-table-head .tk-mfx-table-title {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: 21px;
    color: #fff;
    letter-spacing: -0.3px;
    margin: 0;
}

.tk-mfx-table { width: 100%; border-collapse: collapse; }
.tk-mfx-table thead th {
    padding: 9px 8px;
    text-align: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--ink-3);
    background: rgba(14,58,35,0.04);
    border-bottom: 1px solid var(--rule);
}
.tk-mfx-table thead th.tk-mfx-th-team {
    text-align: left; padding-left: 20px;
}
.tk-mfx-table tbody td {
    padding: 10px 8px;
    text-align: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    color: var(--ink-2);
    border-bottom: 1px dashed var(--rule);
}
.tk-mfx-table tbody tr:last-child td { border-bottom: 0; }
.tk-mfx-table tbody td.tk-mfx-td-pos {
    width: 40px;
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 700;
    font-size: 16px;
    color: var(--ink);
}
.tk-mfx-table tbody td.tk-mfx-td-team {
    text-align: left; padding-left: 20px;
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 500; font-size: 15px;
    color: var(--ink);
    letter-spacing: -0.1px;
}
.tk-mfx-table tbody td.tk-mfx-td-pts {
    font-weight: 700;
    color: var(--ink);
    font-size: 15px;
}
.tk-mfx-table tbody td.tk-mfx-td-diff.is-pos { color: var(--pitch); }
.tk-mfx-table tbody td.tk-mfx-td-diff.is-neg { color: var(--crimson); }
.tk-mfx-table tbody tr.is-here {
    background: rgba(196,122,7,0.05);
}
.tk-mfx-table tbody tr.is-here td.tk-mfx-td-pos {
    box-shadow: inset 3px 0 0 var(--saffron);
}
.tk-mfx-table tbody tr.is-here td.tk-mfx-td-team::after {
    content: "MATCH";
    margin-left: 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 8.5px;
    letter-spacing: 0.18em;
    color: var(--saffron-deep);
    padding: 1px 5px;
    background: rgba(196,122,7,0.12);
    border-radius: 1px;
    vertical-align: 2px;
    font-weight: 700;
}

/* Compact log */
.tk-mfx-log-card {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 4px;
    overflow: hidden;
}
.tk-mfx-log-head {
    padding: 12px 20px;
    border-bottom: 1px dashed var(--rule);
    display: flex; align-items: baseline; gap: 10px;
}
.tk-mfx-log-eyebrow {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px; letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--saffron-deep);
    flex: 1 1 100%;
}
.tk-mfx-log-title {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: 21px;
    color: var(--ink);
    letter-spacing: -0.3px;
    margin: 0;
    white-space: nowrap;
}
.tk-mfx-log-action {
    margin-left: auto;
    display: inline-flex; align-items: center; gap: 5px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px; letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--pitch);
    text-decoration: none;
    padding: 4px 9px;
    border: 1px solid var(--rule);
    border-radius: 2px;
    white-space: nowrap;
    flex-shrink: 0;
}
.tk-mfx-log-action:hover { background: var(--pitch); color: var(--cream-ink); border-color: var(--pitch); }
.tk-mfx-log-action svg { width: 10px; height: 10px; }

.tk-mfx-log {
    list-style: none; margin: 0; padding: 4px 0;
    max-height: 480px;
    overflow-y: auto;
}
.tk-mfx-log-item {
    display: grid;
    grid-template-columns: 44px 24px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 7px 20px 7px 16px;
    border-bottom: 1px dashed transparent;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 13px;
    line-height: 1.35;
    position: relative;
}
.tk-mfx-log-item + .tk-mfx-log-item { border-top: 1px dashed var(--rule); }
.tk-mfx-log-min {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 13px;
    color: var(--ink-3);
    text-align: right;
}
.tk-mfx-log-min b { color: var(--ink); }
.tk-mfx-log-glyph {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--rule);
    color: var(--ink-2);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.tk-mfx-log-glyph svg { width: 12px; height: 12px; }
.tk-mfx-log-text {
    color: var(--ink); font-weight: 500;
    overflow: hidden;
}
.tk-mfx-log-text small {
    display: block;
    color: var(--ink-3);
    font-size: 11.5px;
    font-weight: 400;
    margin-top: 1px;
}
.tk-mfx-log-score {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700; font-size: 12px;
    color: var(--cream-ink);
    background: var(--pitch);
    padding: 2px 7px;
    border-radius: 2px;
    letter-spacing: 0.04em;
}
.tk-mfx-log-item.is-goal,
.tk-mfx-log-item.is-penalty,
.tk-mfx-log-item.is-own {
    background: linear-gradient(90deg, rgba(14,58,35,0.04) 0%, transparent 60%);
    border-left: 2px solid var(--pitch);
    padding-left: 14px;
}
.tk-mfx-log-item.is-goal .tk-mfx-log-glyph,
.tk-mfx-log-item.is-penalty .tk-mfx-log-glyph { background: var(--pitch); color: var(--cream-ink); }
.tk-mfx-log-item.is-own .tk-mfx-log-glyph { background: var(--crimson); color: #fff; }
.tk-mfx-log-item.is-yellow .tk-mfx-log-glyph { background: #f5c032; color: #5a3a05; }
.tk-mfx-log-item.is-red .tk-mfx-log-glyph { background: var(--crimson); color: #fff; }
.tk-mfx-log-item.is-sub .tk-mfx-log-glyph { background: #1f3a8a; color: #fff; }
.tk-mfx-log-item.is-injury .tk-mfx-log-glyph { background: var(--crimson); color: #fff; }
.tk-mfx-log-item.is-var .tk-mfx-log-glyph { background: #1f3a8a; color: #d6e2ff; }
.tk-mfx-log-item.is-whistle .tk-mfx-log-glyph { background: var(--ink); color: var(--cream-ink); }
.tk-mfx-log-item.is-whistle { background: rgba(0,0,0,0.02); }
.tk-mfx-log-empty {
    padding: 22px;
    text-align: center;
    color: var(--ink-3);
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px) {
    .tk-mfx-folio { padding: 14px 18px 16px; }
    .tk-mfx-folio-board { gap: 14px; }
    .tk-mfx-folio-team-name { font-size: 20px; }
    .tk-mfx-folio-team-flag { width: 32px; height: 22px; }
    .tk-mfx-folio-score-num { font-size: 44px; min-width: 32px; }
    .tk-mfx-folio-score-sep { font-size: 22px; }
    .tk-mfx-folio-foot { gap: 12px; font-size: 9.5px; padding-top: 10px; margin-top: 10px; }

    .tk-mfx-pitch-head { padding: 10px 14px; grid-template-columns: 1fr 1fr; gap: 8px; align-items: start; }
    .tk-mfx-pitch-eyebrow { display: none; }
    /* Mobil: lag i vänster/höger kant, formation på egen rad under lagnamnet */
    .tk-mfx-pitch-side { flex-wrap: wrap; row-gap: 2px; }
    .tk-mfx-pitch-side b { font-size: 14px; }
    .tk-mfx-formation { flex-basis: 100%; }
    .tk-mfx-pitch-side.right .tk-mfx-formation { order: 3; text-align: right; }
    .tk-mfx-bench { grid-template-columns: 1fr; }
    .tk-mfx-bench-side + .tk-mfx-bench-side { border-left: 0; border-top: 1px dashed var(--rule); }
    .tk-mfx-bench-side.tk-mfx-bench-away { text-align: left; }
    .tk-mfx-bench-side.tk-mfx-bench-away .tk-mfx-bench-list { justify-content: flex-start; }
    .tk-mfx-bench-side.tk-mfx-bench-away .tk-mfx-bench-row { flex-direction: row; }

    .tk-mfx-goalbar { padding: 64px 14px 70px; }
    .tk-mfx-goalbar-head { font-size: 9px; letter-spacing: 0.14em; gap: 6px; }
    .tk-mfx-goalbar-pip-label {
        padding: 2px 5px;
        font-size: 8.5px;
        letter-spacing: 0;
    }
    .tk-mfx-goalbar-pip-label .tk-pip-name { margin-left: 3px; }
    /* push staggered rows farther apart so home/away boxes don't crowd the rail */
    .tk-mfx-goalbar-pip-label.is-home.is-row-0 { top: -32px; }
    .tk-mfx-goalbar-pip-label.is-home.is-row-1 { top: -52px; }
    .tk-mfx-goalbar-pip-label.is-home.is-row-2 { top: -72px; }
    .tk-mfx-goalbar-pip-label.is-away.is-row-0 { top: 22px; }
    .tk-mfx-goalbar-pip-label.is-away.is-row-1 { top: 42px; }
    .tk-mfx-goalbar-pip-label.is-away.is-row-2 { top: 62px; }
    .tk-mfx-goalbar-half-label { font-size: 8px; letter-spacing: 0.04em; }
    .tk-mfx-statline { grid-template-columns: 1fr 1fr; }
    .tk-mfx-statcard { padding: 20px 16px 12px; }
    .tk-mfx-statcard-value { font-size: 44px; margin-bottom: 10px; }
    .tk-mfx-statcard-glyph { width: 76px; height: 76px; bottom: -8px; right: -6px; }

    .tk-mfx-board-col-head,
    .tk-mfx-board-row {
        grid-template-columns: 36px 32px minmax(0, 1fr) 56px 64px;
        gap: 10px;
        padding-left: 16px; padding-right: 16px;
    }
    .tk-mfx-board-col-bar { display: none; }
    .tk-mfx-board-bar { display: none; }
    .tk-mfx-board-name { font-size: 14px; }
    .tk-mfx-board-pos { font-size: 18px; }
    .tk-mfx-board-tip { font-size: 12px; padding: 3px 5px; }
    .tk-mfx-board-pts { font-size: 14px; }
    .tk-mfx-board-legend { grid-template-columns: 1fr 1fr; padding: 12px 16px; gap: 10px; }
    .tk-mfx-board-legend-title { grid-column: 1 / -1; }

    .tk-mfx-table thead th,
    .tk-mfx-table tbody td { padding: 8px 5px; }
    .tk-mfx-table tbody td.tk-mfx-td-team { padding-left: 14px; font-size: 13.5px; }
    .tk-mfx-table thead th.tk-mfx-th-team { padding-left: 14px; }
}
@media (max-width: 520px) {
    .tk-mfx-folio { padding: 12px 14px 14px; }
    .tk-mfx-folio-team-name { font-size: 16px; letter-spacing: -0.2px; }
    .tk-mfx-folio-team-tag { font-size: 8px; letter-spacing: 0.2em; }
    .tk-mfx-folio-team-flag { width: 26px; height: 18px; }
    .tk-mfx-folio-score-num { font-size: 36px; min-width: 26px; }
    .tk-mfx-folio-score-sep { font-size: 18px; }
    .tk-mfx-folio-foot { font-size: 9px; gap: 10px; }

    .tk-mfx-statline { grid-template-columns: 1fr 1fr; gap: 10px; }
    .tk-mfx-statcard { padding: 18px 14px 12px; }
    .tk-mfx-statcard-value { font-size: 38px; letter-spacing: -1.4px; }
    .tk-mfx-statcard-glyph { width: 68px; height: 68px; opacity: 0.16 !important; }
    .tk-mfx-statcard-eyebrow { font-size: 9.5px; letter-spacing: 0.20em; }
    .tk-mfx-statcard-tag { display: none; }
    .tk-mfx-statchip { padding: 2px 6px; font-size: 9px; }
    .tk-mfx-statchip b { font-size: 10px; }

    /* Tipsboard: two-line scorecard layout */
    .tk-mfx-board-col-head { display: none; }
    .tk-mfx-board-row {
        grid-template-columns: 30px 36px minmax(0, 1fr);
        grid-template-rows: auto auto;
        grid-template-areas:
            "pos avatar name"
            "pos avatar meta";
        column-gap: 12px;
        row-gap: 6px;
        padding: 12px 14px;
        align-items: center;
    }
    .tk-mfx-board-pos {
        grid-area: pos;
        align-self: center;
        font-size: 22px;
    }
    .tk-mfx-board-avatar {
        grid-area: avatar;
        align-self: center;
        width: 36px; height: 36px;
        font-size: 12px;
    }
    .tk-mfx-board-name {
        grid-area: name;
        align-self: end;
        min-width: 0;
        font-size: 15px;
        gap: 6px;
    }
    /* Switch wrapper to flex so it occupies a single grid cell */
    .tk-mfx-board-meta {
        display: flex;
        grid-area: meta;
        align-self: start;
        align-items: center;
        gap: 8px;
        min-width: 0;
    }
    /* Restore visibility for tip, bar, pts and lay them out within meta */
    .tk-mfx-board-tip {
        display: inline-flex; align-items: center; justify-content: center;
        flex-shrink: 0;
        font-size: 11.5px;
        padding: 3px 7px;
    }
    .tk-mfx-board-bar {
        display: block;
        flex: 1 1 auto;
        min-width: 40px;
        height: 6px;
    }
    .tk-mfx-board-pts {
        font-size: 17px;
        font-family: 'Fraunces', Georgia, serif;
        font-variation-settings: 'opsz' 60;
        font-weight: 700;
        flex-shrink: 0;
        white-space: nowrap;
        letter-spacing: -0.02em;
    }
    .tk-mfx-board-pts span {
        display: inline;
        font-size: 10px;
        font-family: 'JetBrains Mono', monospace;
        color: var(--ink-3);
        font-weight: 500;
        margin-left: 2px;
        letter-spacing: 0.04em;
    }
    /* is-me saffron rail still works because box-shadow is inset on the <li> */
    .tk-mfx-log-head { flex-wrap: wrap; }
    .tk-mfx-log-title { font-size: 18px; }
}


/* =========================================================
   RANKING (.tk-rk-*) — newspaper standings page
   ========================================================= */

.tk-rk-wrap {
    background:
        radial-gradient(ellipse 800px 360px at 18% 0%, rgba(14,58,35,0.04), transparent 60%),
        radial-gradient(ellipse 600px 280px at 100% 30%, rgba(196,122,7,0.035), transparent 65%),
        var(--surface);
    padding: 0 24px 60px;
    margin: 0;
    border-radius: 0;
}
/* `.wrapper` is `display: flex; flex-wrap: wrap` globally — force every
   direct child to its own row so the ribbon and hero don't share a line. */
body#page2 .container_12 .wrapper.tk-rk-wrap > *:not(.tk-press-ribbon) { width: 100%; }


/* ----- HERO ----- */
.tk-rk-hero {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 4px 0 24px;
    border-bottom: 1px solid var(--rule);
    margin-bottom: 24px;
    position: relative;
}
.tk-rk-hero::before {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 3px;
    background: linear-gradient(90deg, var(--pitch) 0%, var(--pitch) 30%, var(--saffron-deep) 65%, var(--crimson) 100%);
}
.tk-rk-hero-headline { min-width: 0; }
.tk-rk-hero-eyebrow {
    display: flex; align-items: center; gap: 10px;
    font: 600 10.5px/1 'JetBrains Mono', monospace;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin: 0 0 14px;
    padding: 0;
}
.tk-rk-hero-eyebrow::before {
    content: "";
    width: 24px; height: 1px;
    background: var(--saffron-deep);
    flex-shrink: 0;
}
.tk-rk-hero-title {
    display: block;
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: 'SOFT' 30, 'WONK' 0, 'opsz' 144;
    font-weight: 800;
    font-size: 58px;
    line-height: 0.95;
    letter-spacing: -2px;
    color: var(--ink);
    margin: 0 0 18px !important;
    padding: 0;
    text-transform: none;
    text-shadow: none;
    background: none;
    border: none;
}
.tk-rk-hero-title em {
    font-style: italic;
    font-variation-settings: 'SOFT' 80, 'WONK' 1, 'opsz' 144;
    color: var(--pitch);
    font-weight: 700;
}
.tk-rk-hero-lede {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink-2);
    max-width: 56ch;
    margin: 0;
}
.tk-rk-hero-lede strong { color: var(--ink); font-weight: 700; }

.tk-rk-hero-meta {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--rule);
    border: 1px solid var(--rule);
    border-radius: 3px;
    overflow: hidden;
}
.tk-rk-meta-cell {
    display: flex; flex-direction: column; gap: 6px;
    padding: 16px 18px;
    background: var(--surface);
}
.tk-rk-meta-cell-leader { background: var(--ink); color: var(--cream-ink); }
.tk-rk-meta-cell-leader .tk-rk-meta-label { color: rgba(243,239,224,0.6); }
.tk-rk-meta-cell-leader .tk-rk-meta-value { color: #fff; }
.tk-rk-meta-cell-leader .tk-rk-meta-value small { color: rgba(243,239,224,0.55); }

.tk-rk-meta-label {
    font: 600 9.5px/1 'JetBrains Mono', monospace;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.tk-rk-meta-value {
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: 'opsz' 144, 'SOFT' 50;
    font-weight: 700;
    font-size: 30px;
    line-height: 1;
    letter-spacing: -1px;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.tk-rk-meta-value small {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.06em;
    margin-left: 3px;
    color: var(--ink-3);
}

/* ----- MEDALS (shared between podium + leaderboard row) ----- */
.tk-medal { display: block; }
.tk-rk-pod-medal .tk-medal { width: 72px; height: 92px; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.18)); }
.tk-rk-rank .tk-medal { width: 34px; height: 44px; filter: drop-shadow(0 2px 5px rgba(0,0,0,0.18)); }
.tk-rk-pod-1 .tk-medal,
.tk-rk-row.is-leader .tk-medal { animation: tk-medal-shine 3.2s ease-in-out infinite; }
@keyframes tk-medal-shine {
    0%, 100% { filter: drop-shadow(0 4px 10px rgba(0,0,0,0.18)); }
    50%      { filter: drop-shadow(0 6px 16px rgba(243,193,74,0.55)) drop-shadow(0 0 6px rgba(243,193,74,0.35)); }
}

/* ----- PODIUM ----- */
.tk-rk-podium {
    display: grid;
    grid-template-columns: 1fr 1.15fr 1fr;
    gap: 14px;
    margin-bottom: 32px;
    align-items: end;
}
.tk-rk-pod {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 4px;
    padding: 22px 18px 18px;
    text-align: center;
    box-shadow: 0 14px 30px -22px rgba(24,26,22,0.30);
    overflow: hidden;
}
.tk-rk-pod::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--ink-3);
}
.tk-rk-pod-1 { padding-top: 28px; padding-bottom: 24px; transform: translateY(-6px); border-color: rgba(196,122,7,0.45); }
.tk-rk-pod-1::before { background: linear-gradient(90deg, #d99619, #f3c14a, #d99619); height: 4px; }
.tk-rk-pod-2::before { background: linear-gradient(90deg, #9a9a9a, #cfcfcf, #9a9a9a); }
.tk-rk-pod-3::before { background: linear-gradient(90deg, #8a5a2b, #c08956, #8a5a2b); }
.tk-rk-pod-me { box-shadow: 0 0 0 2px var(--saffron) inset, 0 14px 30px -22px rgba(24,26,22,0.30); }

.tk-rk-pod-medal {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 4px 10px 4px 6px;
    border-radius: 999px;
    background: rgba(0,0,0,0.04);
    margin-bottom: 12px;
}
.tk-rk-pod-medal img { width: 18px; height: 18px; }
.tk-rk-pod-medal-label {
    font: 600 9.5px/1 'JetBrains Mono', monospace;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    color: var(--ink-2);
}
.tk-rk-pod-pos {
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: 'SOFT' 30, 'WONK' 1, 'opsz' 144;
    font-weight: 800;
    font-size: 14px;
    color: var(--ink-3);
    letter-spacing: 0.04em;
    margin-bottom: 2px;
}
.tk-rk-pod-1 .tk-rk-pod-pos { color: var(--saffron-deep); }
.tk-rk-pod-name {
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: 'SOFT' 40, 'opsz' 90;
    font-weight: 700;
    font-size: 19px;
    line-height: 1.15;
    color: var(--ink);
    margin-bottom: 14px;
    letter-spacing: -0.3px;
}
.tk-rk-pod-1 .tk-rk-pod-name { font-size: 22px; }
.tk-rk-pod-you {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 7px;
    font: 600 9.5px/1.4 'JetBrains Mono', monospace;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    background: var(--saffron);
    color: #fff;
    border-radius: 2px;
    vertical-align: middle;
}
.tk-rk-pod-score {
    display: flex; align-items: baseline; justify-content: center; gap: 8px;
    margin-bottom: 10px;
}
.tk-rk-pod-num {
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: 'SOFT' 30, 'WONK' 1, 'opsz' 144;
    font-weight: 800;
    font-size: 44px;
    line-height: 1;
    letter-spacing: -1.6px;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.tk-rk-pod-1 .tk-rk-pod-num { font-size: 54px; color: var(--pitch); }
.tk-rk-pod-unit {
    font: 600 10.5px/1 'JetBrains Mono', monospace;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.tk-rk-pod-meta {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    font: 500 11px/1 'JetBrains Mono', monospace;
    color: var(--ink-3);
    letter-spacing: 0.04em;
}
.tk-rk-pod-meta-sep { width: 4px; height: 4px; border-radius: 50%; background: var(--rule); }

/* ----- FILTER BAR ----- */
.tk-rk-filterbar {
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    padding: 10px 14px;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 3px;
    margin-bottom: 22px;
}

/* segmented control */
.tk-rk-toggle {
    display: inline-flex;
    padding: 3px;
    background: rgba(14,58,35,0.06);
    border-radius: 999px;
    gap: 2px;
}
.tk-rk-toggle-opt {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 14px;
    border-radius: 999px;
    text-decoration: none !important;
    color: var(--ink-2) !important;
    background: transparent;
    font: 600 12px/1 'IBM Plex Sans', sans-serif;
    letter-spacing: 0.01em;
    border: 1px solid transparent;
    transition: background 140ms ease, color 140ms ease, box-shadow 140ms ease;
    cursor: pointer;
    white-space: nowrap;
}
.tk-rk-toggle-opt:hover { color: var(--ink) !important; background: rgba(255,255,255,0.6); }
.tk-rk-toggle-opt.is-on {
    background: var(--ink);
    color: var(--cream-ink) !important;
    box-shadow: 0 4px 12px -6px rgba(0,0,0,0.35);
}
.tk-rk-toggle-opt img { width: 13px; height: 13px; display: block; }
.tk-rk-toggle-label { line-height: 1; }
.tk-rk-toggle-count {
    display: inline-block;
    min-width: 18px;
    padding: 2px 6px;
    font: 700 10px/1.3 'JetBrains Mono', monospace;
    letter-spacing: 0.04em;
    background: rgba(0,0,0,0.10);
    color: inherit;
    border-radius: 999px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.tk-rk-toggle-opt.is-on .tk-rk-toggle-count {
    background: rgba(255,255,255,0.18);
    color: var(--cream-ink);
}

.tk-rk-filter-legend {
    display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
    padding: 10px 14px;
    margin: 0 0 12px;
    background: rgba(14,58,35,0.025);
    border: 1px dashed var(--rule);
    border-radius: 3px;
    font: 600 10px/1.6 'JetBrains Mono', monospace;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.tk-rk-filter-legend .tk-rk-legend-label {
    color: var(--ink-2);
    letter-spacing: 0.22em;
    font-weight: 700;
}
.tk-rk-filter-legend .tk-rk-leg b {
    font-weight: 700;
    color: var(--ink);
    letter-spacing: 0.04em;
    margin-left: 4px;
    text-transform: none;
}
.tk-rk-leg { display: inline-flex; align-items: center; gap: 6px; }
.tk-rk-leg-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    display: inline-block;
}
.tk-rk-leg-final  { background: var(--saffron); }
.tk-rk-leg-malrik { background: var(--crimson); }
.tk-rk-leg-skytte { background: var(--pitch); }

/* ----- MAIN GRID ----- */
.tk-rk-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 26px;
    align-items: start;
}

/* ----- BOARD HEAD ----- */
.tk-rk-board {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 4px;
    padding: 24px 28px 26px;
    box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 14px 28px -22px rgba(24,26,22,0.30);
}
.tk-rk-board-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 22px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 16px;
    margin-bottom: 14px;
}
.tk-rk-board-headline { min-width: 0; flex: 1 1 280px; }
.tk-rk-board-eyebrow {
    font: 600 10.5px/1 'JetBrains Mono', monospace;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--pitch);
    margin-bottom: 8px;
}
.tk-rk-board-title {
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: 'SOFT' 30, 'WONK' 0, 'opsz' 144;
    font-weight: 700;
    font-size: 30px;
    line-height: 1;
    color: var(--ink);
    letter-spacing: -0.7px;
    margin: 0 0 6px;
}
.tk-rk-board-sub {
    font: 500 12px/1.4 'IBM Plex Sans', sans-serif;
    color: var(--ink-3);
}

/* ----- ROWS ----- */
.tk-rk-rows {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: tk-rk-row;
}
.tk-rk-row {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 12px 14px;
    border-bottom: 1px dashed var(--rule);
    position: relative;
    transition: background 140ms ease;
}
.tk-rk-row:last-child { border-bottom: none; }
.tk-rk-row:hover { background: rgba(14,58,35,0.025); }
.tk-rk-row.is-me {
    background: linear-gradient(90deg, rgba(196,122,7,0.10), rgba(196,122,7,0.02) 70%, transparent);
    box-shadow: inset 3px 0 0 var(--saffron);
    border-radius: 2px;
    border-bottom-style: solid;
    border-bottom-color: rgba(196,122,7,0.18);
}
.tk-rk-row.is-price:not(.is-me) {
    box-shadow: inset 3px 0 0 var(--pitch);
}

.tk-rk-row-main {
    display: grid;
    grid-template-columns: 88px minmax(0, 1.6fr) 96px 140px 32px;
    gap: 18px;
    align-items: center;
}

/* rank column */
.tk-rk-rank {
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
}
.tk-rk-rank-num {
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: 'SOFT' 30, 'WONK' 1, 'opsz' 144;
    font-weight: 700;
    font-size: 30px;
    line-height: 0.95;
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
    letter-spacing: -1.2px;
}
.tk-rk-row.is-leader .tk-rk-rank-num { color: var(--pitch); }
.tk-rk-rank-medal { width: 30px; height: 30px; display: block; }
.tk-rk-rank-kicker {
    font: 600 9px/1 'JetBrains Mono', monospace;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    padding: 3px 6px;
    border-radius: 2px;
    background: rgba(0,0,0,0.04);
    color: var(--ink-3);
}
.tk-rk-kicker-ledare  { background: var(--pitch); color: var(--cream-ink); }
.tk-rk-kicker-price   { background: rgba(196,122,7,0.14); color: var(--saffron-deep); }
.tk-rk-kicker-podium  { background: rgba(196,122,7,0.10); color: var(--saffron-deep); }
.tk-rk-kicker-topp    { background: rgba(14,58,35,0.08); color: var(--pitch); }
.tk-rk-kicker-mid     { background: rgba(0,0,0,0.04); color: var(--ink-3); }
.tk-rk-kicker-tail    { background: rgba(155,42,42,0.08); color: var(--crimson); }

/* identity column */
.tk-rk-id { min-width: 0; }
.tk-rk-name {
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: 'SOFT' 40, 'opsz' 90;
    font-weight: 600;
    font-size: 18px;
    line-height: 1.2;
    color: var(--ink);
    letter-spacing: -0.2px;
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.tk-rk-row.is-leader .tk-rk-name { font-weight: 700; }
.tk-rk-you {
    display: inline-block;
    padding: 2px 7px;
    font: 600 9px/1.4 'JetBrains Mono', monospace;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    background: var(--saffron);
    color: #fff;
    border-radius: 2px;
}
.tk-rk-livedot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--crimson);
    box-shadow: 0 0 0 3px rgba(155,42,42,0.18);
    animation: tk-rk-pulse 1.8s infinite;
}
@keyframes tk-rk-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(155,42,42,0.18); }
    50%      { box-shadow: 0 0 0 6px rgba(155,42,42,0.04); }
}
.tk-rk-narrative {
    margin-top: 4px;
    font: 500 11.5px/1.4 'IBM Plex Sans', sans-serif;
    color: var(--ink-3);
}
.tk-rk-narrative-lead { color: var(--pitch); font-weight: 600; }
.tk-rk-narrative-gap {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    color: var(--ink-2);
    font-size: 11px;
    letter-spacing: 0.04em;
}
.tk-rk-narrative-meta {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    color: var(--ink-3);
    letter-spacing: 0.04em;
}

/* score column */
.tk-rk-score {
    display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
    text-align: right;
}
.tk-rk-score-num {
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: 'SOFT' 30, 'WONK' 1, 'opsz' 144;
    font-weight: 700;
    font-size: 28px;
    line-height: 1;
    letter-spacing: -1px;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.tk-rk-row.is-leader .tk-rk-score-num { color: var(--pitch); }
.tk-rk-score-paren {
    font: 600 10.5px/1 'JetBrains Mono', monospace;
    letter-spacing: 0.04em;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}

/* percent column */
.tk-rk-pct { display: flex; flex-direction: column; gap: 6px; }
.tk-rk-pct-bar {
    height: 6px;
    background: rgba(14,58,35,0.06);
    border-radius: 999px;
    overflow: hidden;
}
.tk-rk-pct-fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--pitch) 0%, var(--pitch-light) 80%, var(--saffron) 100%);
    border-radius: 999px;
    transition: width 600ms cubic-bezier(.2,.7,.2,1);
}
.tk-rk-row.is-leader .tk-rk-pct-fill {
    background: linear-gradient(90deg, var(--saffron-deep), var(--saffron) 80%, #f3c14a);
}
.tk-rk-pct-text {
    font: 600 11px/1 'JetBrains Mono', monospace;
    letter-spacing: 0.04em;
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
}

/* narrative bonus tag */
.tk-rk-narrative-bonus {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    color: var(--saffron-deep);
    font-size: 11px;
    letter-spacing: 0.04em;
}

/* ----- PICKS SUBROW (compact, inline) ----- */
.tk-rk-picks {
    list-style: none;
    margin: 0;
    padding: 6px 10px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    background: rgba(14,58,35,0.025);
    border: 1px solid var(--rule);
    border-radius: 3px;
    position: relative;
}
.tk-rk-row.is-leader .tk-rk-picks {
    background: linear-gradient(180deg, rgba(196,122,7,0.05) 0%, rgba(14,58,35,0.04) 100%);
    border-color: rgba(196,122,7,0.22);
}

.tk-rk-pick {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(255,255,255,0.55);
    border: 1px solid var(--rule);
    min-width: 0;
    line-height: 1.2;
    position: relative;
}

.tk-rk-pick-eyebrow {
    font: 700 9px/1 'JetBrains Mono', monospace;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-3);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}
.tk-rk-pick-eyebrow::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--ink-3);
    opacity: 0.4;
}
.tk-rk-pick-final  .tk-rk-pick-eyebrow::before { background: var(--saffron); opacity: 1; }
.tk-rk-pick-malrik .tk-rk-pick-eyebrow::before { background: var(--crimson); opacity: 1; }
.tk-rk-pick-skytte .tk-rk-pick-eyebrow::before { background: var(--pitch); opacity: 1; }

.tk-rk-pick-body {
    display: inline-flex; align-items: center; gap: 5px;
    min-width: 0;
    overflow: hidden;
}

.tk-rk-pick-team {
    display: inline-flex; align-items: center; gap: 4px;
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 600;
    font-size: 12px;
    color: var(--ink-2);
    opacity: 0.7;
    filter: saturate(0.7);
    transition: opacity 140ms ease, filter 140ms ease, color 140ms ease;
    white-space: nowrap;
}
.tk-rk-pick-team img {
    width: 14px; height: 14px;
    border-radius: 2px;
    box-shadow: 0 0 0 1px var(--rule);
}
.tk-rk-pick-team.is-hit {
    opacity: 1;
    filter: saturate(1);
    color: var(--saffron-deep);
}
.tk-rk-pick-team.is-hit img {
    box-shadow: 0 0 0 1.5px var(--saffron), 0 0 0 2px rgba(196,122,7,0.20);
}
.tk-rk-pick-vs {
    font-family: 'Fraunces', Georgia, serif;
    font-style: italic;
    font-size: 11px;
    color: var(--ink-3);
}

.tk-rk-pick-match {
    display: inline-flex; align-items: center; gap: 5px;
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 600;
    font-size: 12px;
    color: var(--ink-2);
    text-decoration: none !important;
    line-height: 1.2;
    white-space: nowrap;
}
.tk-rk-pick-match img { width: 12px; height: 12px; opacity: 0.55; }
a.tk-rk-pick-match:hover { color: var(--crimson); text-decoration: underline !important; }
.tk-rk-pick-malrik.is-hit .tk-rk-pick-match { color: var(--crimson); }
.tk-rk-pick-malrik.is-hit .tk-rk-pick-match img { opacity: 1; }

.tk-rk-pick-player {
    display: inline-flex; align-items: baseline; gap: 5px;
    color: var(--ink-2);
    min-width: 0;
    white-space: nowrap;
}
.tk-rk-pick-player svg {
    width: 12px; height: 12px;
    color: var(--pitch);
    opacity: 0.5;
    flex-shrink: 0;
    align-self: center;
}
.tk-rk-pick-skytte.is-hit .tk-rk-pick-player svg { opacity: 1; }
.tk-rk-pick-player-name {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: 13px;
    color: var(--ink);
    line-height: 1.15;
    letter-spacing: -0.1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 130px;
}
.tk-rk-pick-skytte.is-hit .tk-rk-pick-player-name { color: var(--pitch); }
.tk-rk-pick-player-land {
    font: 500 10px/1 'JetBrains Mono', monospace;
    color: var(--ink-3);
    letter-spacing: 0.04em;
}

.tk-rk-pick-empty {
    font: 500 11px/1 'IBM Plex Sans', sans-serif;
    color: var(--ink-3);
    font-style: italic;
}

.tk-rk-pick-pts {
    position: static;
    display: inline-flex; align-items: center;
    padding: 2px 7px;
    background: linear-gradient(135deg, #f3c14a 0%, #d99619 55%, var(--saffron-deep) 100%);
    color: #fff;
    font: 800 10px/1.3 'JetBrains Mono', monospace;
    letter-spacing: 0.04em;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.55) inset,
        0 0 0 1px rgba(155,94,4,0.45),
        0 3px 8px -3px rgba(196,122,7,0.55),
        0 0 0 3px rgba(243,193,74,0.18);
    text-shadow: 0 1px 0 rgba(0,0,0,0.18);
    animation: tk-rk-gold-pulse 2.4s ease-in-out infinite;
}

@keyframes tk-rk-gold-pulse {
    0%, 100% {
        box-shadow:
            0 0 0 1.5px rgba(255,255,255,0.55) inset,
            0 0 0 1px rgba(155,94,4,0.45),
            0 4px 12px -4px rgba(196,122,7,0.55),
            0 0 0 4px rgba(243,193,74,0.18);
    }
    50% {
        box-shadow:
            0 0 0 1.5px rgba(255,255,255,0.55) inset,
            0 0 0 1px rgba(155,94,4,0.5),
            0 6px 16px -4px rgba(196,122,7,0.7),
            0 0 0 7px rgba(243,193,74,0.06);
    }
}

/* hit-state backgrounds */
.tk-rk-pick.is-hit {
    background: #fff;
    border-color: rgba(196,122,7,0.30);
    box-shadow: 0 1px 3px -1px rgba(0,0,0,0.08);
}

/* both finallag correct → full-gold pill */
.tk-rk-pick-final.is-hit-full {
    background: linear-gradient(135deg, #d99619 0%, var(--saffron-deep) 55%, #8a5a08 100%);
    border-color: rgba(155,94,4,0.55);
    box-shadow:
        0 0 0 1px rgba(155,94,4,0.55),
        0 4px 12px -6px rgba(155,94,4,0.65),
        inset 0 1px 0 rgba(255,255,255,0.35);
    color: #fff;
}

.tk-rk-pick-final.is-hit-full .tk-rk-pick-eyebrow {
    color: rgba(255,245,214,0.95);
    text-shadow: 0 1px 0 rgba(0,0,0,0.18);
}
.tk-rk-pick-final.is-hit-full .tk-rk-pick-eyebrow::before {
    background: #fff5d6;
    box-shadow: 0 0 0 2px rgba(255,245,214,0.30);
}

.tk-rk-pick-final.is-hit-full .tk-rk-pick-team {
    color: #fff;
    opacity: 1;
    filter: none;
    font-weight: 700;
    text-shadow: 0 1px 0 rgba(0,0,0,0.20);
}
.tk-rk-pick-final.is-hit-full .tk-rk-pick-team img {
    box-shadow: 0 0 0 1.5px #fff5d6, 0 0 0 2.5px rgba(255,245,214,0.40);
}
.tk-rk-pick-final.is-hit-full .tk-rk-pick-vs {
    color: rgba(255,245,214,0.85);
    font-style: italic;
}

/* gold-on-gold pts pill: invert so it pops on the gold cell */
.tk-rk-pick-final.is-hit-full .tk-rk-pick-pts {
    background: linear-gradient(135deg, #fff5d6 0%, #f3c14a 100%);
    color: var(--saffron-deep);
    text-shadow: none;
    box-shadow:
        0 0 0 1.5px rgba(255,255,255,0.85) inset,
        0 0 0 1px rgba(155,94,4,0.55),
        0 4px 12px -4px rgba(0,0,0,0.35),
        0 0 0 4px rgba(255,245,214,0.25);
}

/* actions column */
.tk-rk-actions {
    display: flex; align-items: center; justify-content: center;
}
.tk-rk-buddy {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid transparent;
    transition: background 120ms ease, border-color 120ms ease;
}
.tk-rk-buddy:hover { background: rgba(196,122,7,0.10); border-color: rgba(196,122,7,0.25); }
.tk-rk-buddy img { width: 16px; height: 16px; }

/* footnotes */
.tk-rk-finefoot {
    display: flex; flex-direction: column; gap: 4px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--rule);
    font: 500 11px/1.5 'IBM Plex Sans', sans-serif;
    color: var(--ink-3);
}
.tk-rk-finefoot sup { color: var(--saffron-deep); font-weight: 700; margin: 0 1px; }

/* ----- EMPTY ----- */
.tk-rk-empty {
    background: var(--surface);
    border: 1px dashed var(--rule);
    border-radius: 4px;
    padding: 48px 28px;
    text-align: center;
    color: var(--ink-3);
}
/* Explicit size + block centering so the glyph stays a small, centered 48px
   icon on mobile too — guards against the inline width attr being ignored and
   against the legacy skeleton.css `img{width:100%}` phone rule. */
.tk-rk-empty svg,
.tk-rk-empty img {
    width: 48px;
    height: 48px;
    display: block;
    margin: 0 auto 12px;
    color: var(--ink-3);
}
.tk-rk-empty h3 {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 1.2;
    color: var(--ink);
    margin: 0 0 6px;
    /* defeat legacy style.css `h3{text-transform:uppercase; letter-spacing:-1px}` */
    text-transform: none;
    letter-spacing: normal;
}
.tk-rk-empty p { font: 500 13px/1.5 'IBM Plex Sans', sans-serif; margin: 0; }

/* ----- SIDEBAR ----- */
.tk-rk-side { display: flex; flex-direction: column; gap: 16px; }

.tk-rk-side-card {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 4px;
    padding: 22px 22px 18px;
    position: relative;
    box-shadow: 0 14px 30px -24px rgba(24,26,22,0.30);
}
.tk-rk-side-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--saffron-deep), var(--saffron));
}
.tk-rk-side-eyebrow {
    font: 600 10px/1 'JetBrains Mono', monospace;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--saffron-deep);
    margin-bottom: 8px;
}
.tk-rk-side-title {
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: 'SOFT' 30, 'opsz' 90;
    font-weight: 700;
    font-size: 22px;
    color: var(--ink);
    margin: 0 0 14px;
    letter-spacing: -0.4px;
}

.tk-rk-side-pott {
    padding: 12px 0 14px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--rule);
    text-align: center;
}
.tk-rk-side-pott-num {
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: 'SOFT' 30, 'WONK' 1, 'opsz' 144;
    font-weight: 800;
    font-size: 44px;
    line-height: 1;
    letter-spacing: -1.8px;
    color: var(--pitch);
    font-variant-numeric: tabular-nums;
}
.tk-rk-side-pott-num small {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 600;
    color: var(--saffron-deep);
    margin-left: 2px;
    letter-spacing: 0.06em;
}
.tk-rk-side-pott-meta {
    margin-top: 6px;
    font: 500 11px/1.4 'IBM Plex Sans', sans-serif;
    color: var(--ink-3);
}

.tk-rk-side-prizes { list-style: none; margin: 0; padding: 0; }
.tk-rk-prize {
    display: grid;
    grid-template-columns: 22px 50px 1fr;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px dashed var(--rule);
}
.tk-rk-prize:last-child { border-bottom: none; }
.tk-rk-prize-pos {
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: 'opsz' 90, 'SOFT' 30;
    font-weight: 700;
    font-size: 18px;
    color: var(--ink);
    text-align: center;
}
.tk-rk-prize-1 .tk-rk-prize-pos { color: var(--saffron-deep); }
.tk-rk-prize-2 .tk-rk-prize-pos { color: var(--ink-2); }
.tk-rk-prize-3 .tk-rk-prize-pos { color: #8a5a2b; }
.tk-rk-prize-pct {
    font: 600 11.5px/1 'JetBrains Mono', monospace;
    letter-spacing: 0.04em;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}
.tk-rk-prize-kr {
    font: 600 14px/1 'JetBrains Mono', monospace;
    letter-spacing: 0.02em;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    text-align: right;
}
.tk-rk-prize-kr small {
    font-size: 10px;
    color: var(--ink-3);
    margin-left: 2px;
    font-weight: 500;
}
.tk-rk-side-empty {
    padding: 14px 0;
    margin: 0;
    font: 500 12px/1.5 'IBM Plex Sans', sans-serif;
    color: var(--crimson);
}

.tk-rk-side-cta {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px;
    background: linear-gradient(135deg, var(--pitch) 0%, var(--pitch-deep) 100%);
    color: var(--cream-ink) !important;
    text-decoration: none !important;
    border-radius: 4px;
    transition: transform 140ms ease, box-shadow 140ms ease;
    box-shadow: 0 12px 28px -10px rgba(8,30,18,0.40);
}
.tk-rk-side-cta.is-back {
    background: var(--ink);
}
.tk-rk-side-cta:hover { transform: translateY(-1px); box-shadow: 0 16px 34px -12px rgba(8,30,18,0.55); }
.tk-rk-side-cta img { width: 22px; height: 22px; flex-shrink: 0; }
.tk-rk-side-cta small {
    display: block;
    font: 600 9.5px/1 'JetBrains Mono', monospace;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    opacity: 0.7;
    margin-bottom: 4px;
}
.tk-rk-side-cta strong {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 700;
    font-size: 14px;
}

/* =========================================================
   Responsive: tablet
   ========================================================= */
@media (max-width: 1024px) {
    .tk-rk-hero-title { font-size: 44px; }
    .tk-rk-grid { grid-template-columns: 1fr; }
    .tk-rk-side { flex-direction: row; flex-wrap: wrap; }
    .tk-rk-side-card { flex: 1 1 280px; }
    .tk-rk-side-cta { flex: 1 1 220px; align-self: stretch; }
    .tk-rk-row-main {
        grid-template-columns: 72px minmax(0, 1.4fr) 90px 130px 32px;
        gap: 14px;
    }
    .tk-rk-picks { padding: 6px 8px; }
}

/* =========================================================
   Responsive: mobile (≤ 640px)
   ========================================================= */
@media (max-width: 640px) {
    .tk-rk-wrap { padding: 0 10px 32px; }

    /* Hero */
    .tk-rk-hero { padding: 4px 0 18px; margin-bottom: 18px; gap: 14px; }
    .tk-rk-hero-title { font-size: 30px; letter-spacing: -1px; margin: 0 0 12px !important; }
    .tk-rk-hero-lede { font-size: 13.5px; line-height: 1.5; }
    .tk-rk-hero-meta { grid-template-columns: repeat(2, 1fr); }
    .tk-rk-meta-cell { padding: 11px 12px; gap: 5px; }
    .tk-rk-meta-label { font-size: 8.5px; letter-spacing: 0.18em; }
    .tk-rk-meta-value { font-size: 22px; }
    .tk-rk-meta-value small { font-size: 10px; }

    /* Empty state */
    .tk-rk-empty { padding: 36px 20px; }
    .tk-rk-empty h3 { font-size: 19px; }

    /* Podium → single column, leader first */
    .tk-rk-podium { grid-template-columns: 1fr; gap: 10px; margin-bottom: 22px; }
    .tk-rk-pod-1 { transform: none; order: -1; padding: 20px 14px 16px; }
    .tk-rk-pod { padding: 14px 14px 12px; }
    .tk-rk-pod-medal { margin-bottom: 8px; padding: 3px 8px 3px 5px; }
    .tk-rk-pod-medal .tk-medal { width: 48px; height: 62px; }
    .tk-rk-pod-name { font-size: 17px; margin-bottom: 8px; }
    .tk-rk-pod-1 .tk-rk-pod-name { font-size: 19px; }
    .tk-rk-pod-num { font-size: 34px; }
    .tk-rk-pod-1 .tk-rk-pod-num { font-size: 40px; }
    .tk-rk-pod-score { margin-bottom: 6px; }

    /* Board */
    .tk-rk-board { padding: 16px 10px 16px; border-radius: 3px; }
    .tk-rk-board-eyebrow { font-size: 9.5px; margin-bottom: 6px; }
    .tk-rk-board-title { font-size: 20px; letter-spacing: -0.4px; }
    .tk-rk-board-sub { font-size: 11px; }
    /* Stack head vertically so toggle becomes a full-width segmented control */
    .tk-rk-board-head {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding-bottom: 14px;
        margin-bottom: 12px;
    }
    .tk-rk-board-headline { flex: 0 0 auto; }
    .tk-rk-toggle { align-self: stretch; }
    .tk-rk-toggle-opt {
        flex: 1 1 0;
        justify-content: center;
        padding: 8px 10px;
        font-size: 11.5px;
        white-space: nowrap;
    }

    .tk-rk-filter-legend {
        gap: 6px 10px;
        font-size: 9px;
        letter-spacing: 0.14em;
        padding: 8px 10px;
    }
    .tk-rk-filter-legend .tk-rk-legend-label { font-size: 9px; padding-right: 6px; margin-right: 2px; }

    /* Leaderboard row — compact 2-row layout:
       Col 1: rank cluster (medal + kicker stacked), spans both rows
       Row 1: name + narrative | score | star
       Row 2: %-bar + percent (spans the right side) */
    .tk-rk-row { padding: 12px 8px 12px; gap: 10px; }
    .tk-rk-row-main {
        grid-template-columns: auto minmax(0, 1fr) auto auto;
        grid-template-areas:
            "rank id    score   actions"
            "rank meter meter   meter";
        gap: 8px 16px;
        align-items: center;
    }
    .tk-rk-row-main > .tk-rk-rank    {
        grid-area: rank;
        flex-direction: column;
        align-items: center;
        gap: 5px;
        align-self: center;
    }
    .tk-rk-row-main > .tk-rk-id      { grid-area: id; min-width: 0; align-self: center; }
    .tk-rk-row-main > .tk-rk-score   {
        grid-area: score;
        flex-direction: column;
        align-items: flex-end;
        gap: 1px;
        align-self: center;
        text-align: right;
    }
    .tk-rk-row-main > .tk-rk-pct     {
        grid-area: meter;
        flex-direction: row;
        align-items: center;
        gap: 10px;
        min-width: 0;
    }
    .tk-rk-row-main > .tk-rk-actions { grid-area: actions; justify-content: flex-end; align-self: center; }

    .tk-rk-rank-num { font-size: 22px; letter-spacing: -0.8px; }
    .tk-rk-rank-medal { width: 26px; height: 26px; }
    .tk-rk-rank .tk-medal { width: 30px; height: 38px; }
    .tk-rk-rank-kicker {
        font-size: 8px;
        letter-spacing: 0.12em;
        padding: 2px 4px;
        max-width: 64px;
        text-align: center;
        line-height: 1.1;
    }

    .tk-rk-name { font-size: 15.5px; gap: 6px; }
    .tk-rk-you { font-size: 8.5px; padding: 2px 6px; }
    .tk-rk-narrative { font-size: 11px; line-height: 1.4; margin-top: 3px; }

    .tk-rk-score-num { font-size: 20px; letter-spacing: -0.4px; line-height: 1; }
    .tk-rk-score-paren { font-size: 10px; }

    .tk-rk-pct { flex-direction: row; }
    .tk-rk-pct-bar { flex: 1 1 auto; height: 5px; min-width: 0; }
    .tk-rk-pct-text { font-size: 10.5px; flex-shrink: 0; min-width: 32px; text-align: right; }

    /* 44px hit target for the star button */
    .tk-rk-buddy { width: 36px; height: 36px; }

    /* Bonus picks: each pill becomes a full-width row so long names don't overflow */
    .tk-rk-picks {
        flex-direction: column;
        align-items: stretch;
        flex-wrap: nowrap;
        padding: 6px 8px;
        gap: 4px;
    }
    .tk-rk-pick {
        display: flex;
        width: 100%;
        justify-content: flex-start;
        align-items: center;
        padding: 5px 9px;
        gap: 8px;
        min-width: 0;
        border-radius: 4px;
    }
    .tk-rk-pick-eyebrow {
        font-size: 8.5px;
        letter-spacing: 0.14em;
        min-width: 62px;
    }
    .tk-rk-pick-body {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        gap: 5px;
    }
    .tk-rk-pick-team, .tk-rk-pick-match, .tk-rk-pick-player {
        min-width: 0;
        overflow: hidden;
        font-size: 11.5px;
    }
    .tk-rk-pick-team > span,
    .tk-rk-pick-match > span,
    .tk-rk-pick-player-name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .tk-rk-pick-player-name { max-width: none; font-size: 12.5px; flex: 1 1 auto; }
    .tk-rk-pick-pts {
        margin-left: auto;
        font-size: 9.5px;
        padding: 2px 6px;
        flex-shrink: 0;
    }

    /* Sidebar */
    .tk-rk-side { flex-direction: column; }
    .tk-rk-side-card { padding: 18px 16px; }
    .tk-rk-side-pott-num { font-size: 32px; }

    .tk-rk-finefoot { font-size: 10px; padding: 10px 8px; gap: 6px; flex-direction: column; }
}

/* =========================================================
   Responsive: very narrow (≤ 400px)
   ========================================================= */
@media (max-width: 400px) {
    .tk-rk-wrap { padding: 0 8px 28px; }
    .tk-rk-hero-title { font-size: 26px; letter-spacing: -0.8px; }
    .tk-rk-hero-meta { grid-template-columns: 1fr 1fr; }
    .tk-rk-meta-value { font-size: 20px; }

    .tk-rk-board { padding: 14px 8px 14px; }
    .tk-rk-board-title { font-size: 18px; }

    .tk-rk-row { padding: 10px 6px 10px; }
    .tk-rk-row-main {
        grid-template-columns: auto minmax(0, 1fr) auto auto;
        gap: 6px 12px;
    }
    .tk-rk-rank-num { font-size: 18px; }
    .tk-rk-rank .tk-medal { width: 26px; height: 34px; }
    .tk-rk-rank-kicker { font-size: 7.5px; max-width: 56px; padding: 1px 3px; }
    .tk-rk-name { font-size: 14.5px; }
    .tk-rk-score-num { font-size: 18px; }
    .tk-rk-narrative { font-size: 10.5px; }

    .tk-rk-pick-eyebrow { min-width: 54px; font-size: 8px; }
    .tk-rk-pick { padding: 4px 7px; gap: 6px; }
}

/* =========================================================
   Vy-växlare: Ranking ⇄ Folkets bonusar (ranking.php)
   Segmenterad pillerkontroll; serverside-länkar (?folket),
   ingen JS — jQuery laddas inte tillförlitligt på denna sida.
   ========================================================= */
.tk-rk-viewswitch {
    display: inline-flex;
    gap: 4px;
    margin: 0 0 22px;
    padding: 4px;
    background: rgba(14,58,35,0.06);
    border: 1px solid var(--rule);
    border-radius: 999px;
}
.tk-rk-vsw {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 18px;
    border-radius: 999px;
    font: 600 13px/1 'IBM Plex Sans', sans-serif;
    color: var(--ink-3);
    text-decoration: none;
    white-space: nowrap;
    transition: background 150ms ease, color 150ms ease, box-shadow 150ms ease;
}
.tk-rk-vsw svg { width: 15px; height: 15px; flex-shrink: 0; }
.tk-rk-vsw:hover { color: var(--ink); }
.tk-rk-vsw.is-on {
    background: var(--pitch);
    color: var(--cream-ink);
    box-shadow: 0 8px 16px -9px rgba(8,30,18,0.65);
}
@media (max-width: 480px) {
    .tk-rk-viewswitch { display: flex; width: 100%; }
    .tk-rk-vsw { flex: 1 1 0; justify-content: center; padding: 11px 8px; font-size: 12px; }
}

/* Vinstplan-fliken är endast till nytta på mobil — på desktop ligger
   vinstplanen alltid synlig i sidofältet. Döljs därför på desktop, och
   när folkdata saknas döljs hela remsan (då finns bara Ranking kvar där). */
.tk-rk-vsw-vinst { display: none; }
.tk-rk-viewswitch--mobileonly { display: none; }
.tk-rk-vsw-vinst .is-on,
.tk-rk-vsw-vinst.is-on { color: var(--saffron); }
@media (max-width: 899px) {
    .tk-rk-vsw-vinst { display: inline-flex; }
    .tk-rk-viewswitch--mobileonly { display: inline-flex; }
}

/* Vinstplan som egen vy (mobil-flik) — centrerat, begränsat kort. */
.tk-rk-vinstview {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 460px;
    margin: 0 auto;
}

/* =========================================================
   Folkets bonusar — kollektivets bonusval (ranking.php)
   Editorial "feature" band: heavy top rule, Fraunces head,
   one ballot card per aktiv bonuskategori with poll bars.
   ========================================================= */
.tk-folk {
    margin: 28px 0 4px;
    padding: 22px 0 4px;
    border-top: 2px solid var(--ink);
    position: relative;
}
.tk-folk::before { /* thin rule shadowing the heavy one — newspaper masthead feel */
    content: "";
    position: absolute; left: 0; right: 0; top: 4px;
    height: 1px; background: var(--rule);
}
.tk-folk-head { margin-bottom: 18px; max-width: 660px; }
.tk-folk-eyebrow {
    font: 600 10.5px/1 'JetBrains Mono', monospace;
    letter-spacing: 0.24em; text-transform: uppercase;
    color: var(--pitch); display: block; margin-bottom: 8px;
}
.tk-folk-title {
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: 'SOFT' 30, 'WONK' 0, 'opsz' 144;
    font-weight: 700; font-size: 30px; line-height: 1;
    color: var(--ink); letter-spacing: -0.7px; margin: 0 0 7px;
}
.tk-folk-title em {
    font-style: italic; color: var(--saffron-deep);
    font-variation-settings: 'SOFT' 60, 'WONK' 1, 'opsz' 144;
}
.tk-folk-lede { font: 500 13px/1.5 'IBM Plex Sans', sans-serif; color: var(--ink-3); margin: 0; }

.tk-folk-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(244px, 1fr));
    gap: 16px;
}

.tk-folk-card {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-top: 3px solid var(--ink-3);
    border-radius: 4px;
    padding: 15px 16px 14px;
    box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 14px 26px -22px rgba(24,26,22,0.28);
}
.tk-folk-final  { border-top-color: var(--saffron); }
.tk-folk-malrik { border-top-color: var(--crimson); }
.tk-folk-skytte { border-top-color: var(--pitch); }

.tk-folk-card-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin-bottom: 4px;
}
.tk-folk-cat {
    font: 700 11px/1 'JetBrains Mono', monospace;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--ink-2);
    display: inline-flex; align-items: center; gap: 7px;
}
.tk-folk-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); flex-shrink: 0; }
.tk-folk-final  .tk-folk-dot { background: var(--saffron); }
.tk-folk-malrik .tk-folk-dot { background: var(--crimson); }
.tk-folk-skytte .tk-folk-dot { background: var(--pitch); }
.tk-folk-tot { font: 500 11px/1 'IBM Plex Sans', sans-serif; color: var(--ink-3); white-space: nowrap; }
.tk-folk-tot b { font-weight: 700; color: var(--ink); }

.tk-folk-q {
    font: italic 500 12px/1.35 'Fraunces', Georgia, serif;
    color: var(--ink-3); margin: 0 0 12px; padding-bottom: 10px;
    border-bottom: 1px dashed var(--rule);
}

.tk-folk-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.tk-folk-opt { position: relative; }

.tk-folk-opt-row { display: flex; align-items: center; gap: 9px; margin-bottom: 5px; }
.tk-folk-opt-rank {
    font: 700 11px/1 'JetBrains Mono', monospace;
    color: var(--ink-3); width: 14px; flex-shrink: 0; text-align: center;
    font-variant-numeric: tabular-nums;
}
.tk-folk-opt.is-lead .tk-folk-opt-rank { color: var(--ink); }

.tk-folk-opt-label {
    flex: 1 1 auto; min-width: 0;
    display: inline-flex; align-items: center; gap: 6px;
    font: 600 13px/1.2 'IBM Plex Sans', sans-serif;
    color: var(--ink-2); overflow: hidden;
}
.tk-folk-opt-link { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: inherit; text-decoration: none; overflow: hidden; }
.tk-folk-opt-link:hover { color: var(--crimson); text-decoration: underline; }
.tk-folk-team, .tk-folk-player { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.tk-folk-team > span, .tk-folk-player, .tk-folk-opt-link > span {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tk-folk-team img { width: 15px; height: 15px; border-radius: 2px; box-shadow: 0 0 0 1px var(--rule); flex-shrink: 0; }
.tk-folk-teamcheck {
    display: inline-flex; align-items: center; justify-content: center;
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--saffron); color: #fff; flex-shrink: 0; margin-left: 1px;
}
.tk-folk-x { font: italic 11px/1 'Fraunces', Georgia, serif; color: var(--ink-3); flex-shrink: 0; }
.tk-folk-ball { width: 13px; height: 13px; opacity: 0.55; flex-shrink: 0; }
.tk-folk-boot { width: 14px; height: 14px; color: var(--pitch); opacity: 0.6; flex-shrink: 0; }
.tk-folk-player { font-family: 'Fraunces', Georgia, serif; font-weight: 600; }
.tk-folk-land {
    font: 600 8.5px/1 'JetBrains Mono', monospace; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--ink-3);
    padding: 2px 5px; border: 1px solid var(--rule); border-radius: 999px; flex-shrink: 0;
}

.tk-folk-hit {
    display: inline-flex; align-items: center; justify-content: center;
    width: 15px; height: 15px; border-radius: 50%;
    background: var(--saffron); color: #fff; flex-shrink: 0;
}

.tk-folk-opt-fig { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }
.tk-folk-opt-pct {
    font-family: 'Fraunces', Georgia, serif; font-weight: 700; font-size: 16px;
    color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1;
}
.tk-folk-opt-pct i { font-style: normal; font-size: 9px; color: var(--ink-3); margin-left: 1px; }
.tk-folk-opt-cnt { font: 500 9px/1 'JetBrains Mono', monospace; color: var(--ink-3); }

.tk-folk-opt-bar {
    height: 6px; border-radius: 3px; background: rgba(14,58,35,0.08);
    overflow: hidden; margin-left: 23px;
}
.tk-folk-opt-bar > span {
    display: block; height: 100%; border-radius: 3px;
    background: var(--ink-3);
    transition: width 600ms cubic-bezier(.2,.7,.2,1);
}
.tk-folk-final  .tk-folk-opt-bar > span { background: linear-gradient(90deg, var(--saffron-deep), var(--saffron)); }
.tk-folk-malrik .tk-folk-opt-bar > span { background: linear-gradient(90deg, #6f1f1f, var(--crimson)); }
.tk-folk-skytte .tk-folk-opt-bar > span { background: linear-gradient(90deg, var(--pitch-deep), var(--pitch-light)); }
.tk-folk-opt:not(.is-lead) .tk-folk-opt-bar > span { opacity: 0.5; }

.tk-folk-opt.is-hit .tk-folk-opt-label { color: var(--saffron-deep); }
.tk-folk-opt.is-hit::before {
    content: ""; position: absolute; left: -10px; top: -2px; bottom: 6px;
    width: 3px; border-radius: 2px; background: var(--saffron);
}

.tk-folk-more {
    display: inline-block;
    margin-top: 13px; padding-top: 11px; border-top: 1px dashed var(--rule);
    font: 600 10px/1 'JetBrains Mono', monospace; letter-spacing: 0.07em;
    text-transform: uppercase; color: var(--ink-3);
    text-decoration: none; transition: color 140ms ease;
}
a.tk-folk-more:hover { color: var(--saffron-deep); text-decoration: underline; }
a.tk-folk-more.is-less:hover { color: var(--pitch); }

@media (max-width: 1024px) {
    .tk-folk-grid { grid-template-columns: repeat(auto-fit, minmax(224px, 1fr)); }
}
@media (max-width: 640px) {
    .tk-folk { margin: 18px 0 2px; padding: 18px 0 2px; }
    .tk-folk-title { font-size: 24px; }
    .tk-folk-lede { font-size: 12px; }
    .tk-folk-grid { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 400px) {
    .tk-folk-card { padding: 14px 12px 12px; }
    .tk-folk-opt-label { font-size: 12px; }
    .tk-folk-opt-pct { font-size: 14px; }
}

/* ==========================================================================
   Simple sub-pages: mittkonto, speladematcher, kommande
   ========================================================================== */

body#page2 .container_12 .wrapper.tk-simple-wrap > *:not(.tk-press-ribbon) {
    width: 100%;
}
.tk-simple-wrap {
    padding: 0 12px 32px;
}
@media (max-width: 480px) {
    .tk-simple-wrap { padding: 0 4px 24px; }
}

.tk-simple-panel {
    background: #fff;
    border: 1px solid var(--rule);
    border-radius: 6px;
    padding: 26px 30px 30px;
    margin-top: 18px;
    box-shadow:
        0 6px 18px -10px rgba(8,30,18,0.18),
        0 1px 0 rgba(255,255,255,0.6) inset;
}
@media (max-width: 640px) {
    .tk-simple-panel { padding: 22px 16px 26px; }
}
.tk-simple-panel-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 18px; flex-wrap: wrap;
    border-bottom: 1px solid var(--rule-soft);
    padding-bottom: 14px;
    margin-bottom: 22px;
}
.tk-simple-panel-headline { display: block; }
.tk-simple-panel-eyebrow {
    font: 600 10.5px/1 'IBM Plex Sans', sans-serif;
    letter-spacing: 2px; text-transform: uppercase;
    color: var(--ink-3);
    display: block; margin-bottom: 8px;
}
.tk-simple-panel-title {
    font: 700 26px/1.1 'Fraunces', Georgia, serif;
    font-variation-settings: 'opsz' 60;
    color: var(--ink);
    margin: 0;
}
.tk-simple-panel-title em {
    font-style: italic;
    color: var(--saffron-deep);
    font-variation-settings: 'opsz' 60, 'SOFT' 30, 'WONK' 1;
}
.tk-simple-panel-meta {
    font: 500 12px/1 'JetBrains Mono', monospace;
    color: var(--ink-3);
    letter-spacing: 0.4px;
    flex-shrink: 0;
}

/* Match list rows (kommande/spelade) */
.tk-mlist { list-style: none; margin: 0; padding: 0; }
.tk-mlist > li {
    display: grid;
    grid-template-columns: 130px 78px 1fr auto;
    align-items: center;
    gap: 16px;
    padding: 14px 4px;
    border-bottom: 1px solid var(--rule-soft);
    transition: background .12s;
}
.tk-mlist > li:last-child { border-bottom: 0; }
.tk-mlist > li:hover { background: var(--paper-tint); }

.tk-mlist-date {
    font: 500 11.5px/1.3 'JetBrains Mono', monospace;
    color: var(--ink-3);
    letter-spacing: 0.3px;
}
.tk-mlist-date strong {
    display: block;
    color: var(--ink);
    font: 700 13.5px/1.2 'JetBrains Mono', monospace;
    margin-bottom: 3px;
    letter-spacing: 0.2px;
}

.tk-mlist-tv {
    display: inline-flex; align-items: center; justify-self: start;
    padding: 4px 9px;
    border-radius: 3px;
    background: var(--pitch);
    color: var(--cream-ink);
    font: 700 10.5px/1.3 'IBM Plex Sans', sans-serif;
    letter-spacing: 1.2px; text-transform: uppercase;
    white-space: nowrap;
}
.tk-mlist-tv:empty,
.tk-mlist-tv-empty { display: none; }

.tk-mlist-teams {
    font: 600 14.5px/1.3 'IBM Plex Sans', sans-serif;
    color: var(--ink);
}
.tk-mlist-teams .tk-mlist-score {
    font: 700 14px/1 'JetBrains Mono', monospace;
    color: var(--saffron-deep);
    margin-left: 8px;
    padding: 2px 7px;
    background: rgba(196,122,7,0.08);
    border-radius: 3px;
}
.tk-mlist-teams.is-live { color: #c92b3a; }
.tk-mlist-teams.is-live .tk-mlist-score { color: #c92b3a; background: rgba(201,43,58,0.10); }
.tk-mlist-teams.is-done .tk-mlist-score { color: var(--pitch-light); background: rgba(21,90,53,0.10); }

.tk-mlist-action {
    display: inline-flex; align-items: center; gap: 7px;
    color: var(--pitch);
    text-decoration: none;
    font: 600 11.5px/1 'IBM Plex Sans', sans-serif;
    letter-spacing: 0.6px;
    padding: 9px 12px;
    border: 1px solid var(--rule);
    border-radius: 3px;
    background: #fff;
    transition: background .15s, transform .08s, border-color .15s, color .15s;
    text-transform: uppercase;
    white-space: nowrap;
}
.tk-mlist-action:hover {
    background: var(--pitch);
    color: var(--cream-ink);
    border-color: var(--pitch);
    transform: translateY(-1px);
}
.tk-mlist-action svg { width: 12px; height: 12px; }
.tk-mlist-comment {
    margin-left: 6px;
    display: inline-flex; align-items: center; gap: 4px;
    font: 600 11px/1 'JetBrains Mono', monospace;
    color: var(--ink-3);
}
.tk-mlist-comment::before {
    content: ""; width: 4px; height: 4px; border-radius: 50%;
    background: var(--saffron); display: inline-block;
}

.tk-mlist-empty {
    padding: 28px 16px;
    text-align: center;
    color: var(--ink-3);
    font: 500 14px/1.5 'IBM Plex Sans', sans-serif;
    background: var(--paper-tint);
    border: 1px dashed var(--rule);
    border-radius: 4px;
}

@media (max-width: 720px) {
    .tk-mlist > li {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 16px 10px;
        border-bottom: 1px solid var(--rule-soft);
    }
    .tk-mlist-tv { justify-self: start; }
    .tk-mlist-action { justify-self: stretch; justify-content: center; }
}

/* Mitt konto: form */
.tk-form { display: flex; flex-direction: column; gap: 18px; max-width: 460px; }
.tk-form-field { display: flex; flex-direction: column; gap: 7px; }
.tk-form-label {
    font: 600 10.5px/1 'IBM Plex Sans', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    color: var(--ink-2);
}
.tk-form-input {
    appearance: none;
    border: 1px solid var(--rule);
    background: var(--paper);
    padding: 11px 14px;
    border-radius: 3px;
    font: 500 14px/1.3 'IBM Plex Sans', sans-serif;
    color: var(--ink);
    transition: border-color .15s, background .15s, box-shadow .15s;
    width: 100%;
    box-sizing: border-box;
}
.tk-form-input:focus {
    outline: 0;
    border-color: var(--pitch);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(14,58,35,0.10);
}
.tk-form-actions {
    display: flex; gap: 12px; flex-wrap: wrap;
    align-items: center;
    margin-top: 8px;
}
.tk-form-flash {
    padding: 12px 16px;
    border-radius: 3px;
    font: 500 13px/1.4 'IBM Plex Sans', sans-serif;
    margin-bottom: 18px;
    display: flex; align-items: center; gap: 10px;
}
.tk-form-flash::before {
    content: ""; width: 8px; height: 8px; border-radius: 50%;
    flex-shrink: 0;
}
.tk-form-flash-ok {
    background: rgba(21,90,53,0.08);
    color: var(--pitch-light);
    border: 1px solid rgba(21,90,53,0.25);
}
.tk-form-flash-ok::before { background: var(--pitch-light); }
.tk-form-flash-err {
    background: rgba(201,43,58,0.06);
    color: #a32531;
    border: 1px solid rgba(201,43,58,0.22);
}
.tk-form-flash-err::before { background: #c92b3a; }

.tk-btn-primary {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--pitch);
    color: var(--cream-ink) !important;
    border: 0; cursor: pointer;
    padding: 12px 22px;
    border-radius: 3px;
    font: 600 12px/1 'IBM Plex Sans', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    box-shadow: inset 0 -2px 0 rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.10);
    transition: transform .08s, background .12s;
    text-decoration: none;
}
.tk-btn-primary:hover { background: var(--pitch-light); transform: translateY(-1px); }
.tk-btn-primary:active { transform: translateY(0); }
.tk-btn-primary svg { width: 14px; height: 14px; }

.tk-btn-ghost {
    display: inline-flex; align-items: center; gap: 8px;
    background: transparent;
    color: var(--pitch) !important;
    border: 1px solid var(--rule);
    cursor: pointer;
    padding: 11px 18px;
    border-radius: 3px;
    font: 600 11.5px/1 'IBM Plex Sans', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    text-decoration: none;
    transition: background .15s, border-color .15s, transform .08s, color .15s;
}
.tk-btn-ghost:hover {
    background: var(--paper-tint);
    border-color: var(--pitch);
    transform: translateY(-1px);
}
.tk-btn-ghost svg { width: 13px; height: 13px; }

.tk-pwd-link {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 11px 15px;
    border: 1px dashed var(--rule);
    border-radius: 3px;
    color: var(--pitch) !important;
    text-decoration: none;
    background: var(--paper-tint);
    font: 600 12px/1 'IBM Plex Sans', sans-serif;
    letter-spacing: 0.4px;
    transition: background .15s, border-color .15s, transform .08s;
    margin-bottom: 4px;
}
.tk-pwd-link:hover {
    background: var(--paper);
    border-style: solid;
    border-color: var(--pitch);
    transform: translateY(-1px);
}
.tk-pwd-link svg { width: 14px; height: 14px; color: var(--saffron-deep); }

/* ==========================================================================
   Simple sub-pages v2: hero + reactive rows
   (Overrides above where keys collide. Frontend-design pass.)
   ========================================================================== */

/* ---- Hero: icon | (eyebrow + title + lede) | meta ledger -------------------- */
.tk-simple-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 32px;
    align-items: stretch;
    margin-top: 22px;
    padding: 30px 32px;
    background:
        radial-gradient(ellipse at 92% 8%, rgba(196,122,7,0.06) 0%, transparent 55%),
        linear-gradient(180deg, #fbf8ed 0%, var(--paper) 100%);
    border: 1px solid var(--rule);
    border-radius: 6px;
    box-shadow:
        0 6px 20px -12px rgba(8,30,18,0.22),
        0 1px 0 rgba(255,255,255,0.7) inset;
    position: relative;
    overflow: hidden;
}
.tk-simple-hero::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--pitch) 0%, var(--saffron) 35%, var(--saffron) 65%, var(--pitch) 100%);
    opacity: 0.85;
}
.tk-simple-hero::after {
    content: ""; position: absolute; right: -60px; bottom: -60px;
    width: 220px; height: 220px;
    background: radial-gradient(circle, rgba(14,58,35,0.04) 0%, transparent 65%);
    pointer-events: none;
}

.tk-simple-hero-left {
    display: flex;
    align-items: center;
    gap: 22px;
    min-width: 0;
}

.tk-simple-hero-icon {
    flex-shrink: 0;
    width: 80px; height: 80px;
    display: grid; place-items: center;
    background: linear-gradient(160deg, #fffcef 0%, var(--paper) 100%);
    border: 1px solid var(--rule);
    border-radius: 14px;
    color: var(--pitch);
    position: relative;
    box-shadow:
        0 2px 0 rgba(255,255,255,0.6) inset,
        0 8px 18px -10px rgba(8,30,18,0.22);
    overflow: hidden;
    transition: transform .25s cubic-bezier(.2,.7,.3,1.4);
}
.tk-simple-hero-icon::before {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(circle at 28% 22%, rgba(255,255,255,0.55) 0%, transparent 55%);
    pointer-events: none;
}
.tk-simple-hero-icon::after {
    content: ""; position: absolute; right: -8px; bottom: -8px;
    width: 36px; height: 36px;
    background: radial-gradient(circle, rgba(196,122,7,0.18) 0%, transparent 70%);
    pointer-events: none;
}
.tk-simple-hero-icon svg { width: 44px; height: 44px; position: relative; z-index: 1; }
.tk-simple-hero:hover .tk-simple-hero-icon { transform: rotate(-3deg) translateY(-1px); }

.tk-simple-hero-headline { min-width: 0; }
.tk-simple-hero-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font: 600 10.5px/1 'IBM Plex Sans', sans-serif;
    letter-spacing: 2.2px; text-transform: uppercase;
    color: var(--saffron-deep);
    margin-bottom: 10px;
}
.tk-simple-hero-eyebrow::before {
    content: ""; width: 18px; height: 1px;
    background: var(--saffron-deep);
    display: inline-block;
}
.tk-simple-hero-title {
    font: 700 38px/1.02 'Fraunces', Georgia, serif;
    font-variation-settings: 'opsz' 96, 'SOFT' 40;
    color: var(--ink);
    margin: 0 0 10px;
    letter-spacing: -0.4px;
}
.tk-simple-hero-title em {
    font-style: italic;
    color: var(--saffron-deep);
    font-variation-settings: 'opsz' 96, 'SOFT' 30, 'WONK' 1;
    font-weight: 700;
}
.tk-simple-hero-lede {
    font: 400 14px/1.55 'IBM Plex Sans', sans-serif;
    color: var(--ink-2);
    margin: 0;
    max-width: 48ch;
}

.tk-simple-hero-meta {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(80px, auto);
    gap: 26px;
    align-items: center;
    border-left: 1px dashed var(--rule);
    padding-left: 30px;
}
.tk-simple-hero-meta-cell { text-align: left; min-width: 70px; }
.tk-simple-hero-meta-label {
    font: 600 9.5px/1 'IBM Plex Sans', sans-serif;
    letter-spacing: 1.8px; text-transform: uppercase;
    color: var(--ink-3);
    display: block; margin-bottom: 8px;
}
.tk-simple-hero-meta-value {
    font: 700 22px/1.1 'JetBrains Mono', monospace;
    color: var(--ink);
    letter-spacing: -0.4px;
    display: inline-flex; align-items: baseline; gap: 4px;
}
.tk-simple-hero-meta-value small {
    font-size: 11px;
    color: var(--ink-3);
    letter-spacing: 0.4px;
    font-weight: 500;
}
.tk-simple-hero-meta-value.is-accent { color: var(--saffron-deep); }
.tk-simple-hero-meta-value.is-live   { color: #c92b3a; }
.tk-simple-hero-meta-value.is-pitch  { color: var(--pitch); }

@media (max-width: 880px) {
    .tk-simple-hero {
        grid-template-columns: 1fr;
        padding: 24px 22px;
        gap: 22px;
    }
    .tk-simple-hero-meta {
        border-left: 0;
        border-top: 1px dashed var(--rule);
        padding-left: 0;
        padding-top: 18px;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        gap: 14px;
    }
    .tk-simple-hero-title { font-size: 30px; }
    .tk-simple-hero-icon { width: 64px; height: 64px; }
    .tk-simple-hero-icon svg { width: 36px; height: 36px; }
    .tk-simple-hero-meta-value { font-size: 19px; }
}
@media (max-width: 480px) {
    .tk-simple-hero { padding: 20px 16px; }
    .tk-simple-hero-left { gap: 14px; }
    .tk-simple-hero-icon { width: 56px; height: 56px; }
    .tk-simple-hero-icon svg { width: 30px; height: 30px; }
    .tk-simple-hero-title { font-size: 26px; }
    .tk-simple-hero-lede { font-size: 13px; }
    .tk-simple-hero-meta { gap: 10px; padding-top: 14px; }
    .tk-simple-hero-meta-cell { min-width: 0; }
    .tk-simple-hero-meta-value { font-size: 16px; }
    .tk-simple-hero-meta-label { font-size: 8.5px; letter-spacing: 1.2px; }
}

/* ---- Account variant: stack meta as label/value rows under 640px ---------- */
@media (max-width: 640px) {
    .tk-simple-hero-meta.is-account {
        grid-auto-flow: row;
        grid-auto-columns: 1fr;
        gap: 0;
        border-top: 1px dashed var(--rule);
        padding-top: 10px;
    }
    .tk-simple-hero-meta.is-account .tk-simple-hero-meta-cell {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 9px 0;
        border-bottom: 1px solid var(--rule-soft);
        min-width: 0;
    }
    .tk-simple-hero-meta.is-account .tk-simple-hero-meta-cell:last-child {
        border-bottom: 0;
    }
    .tk-simple-hero-meta.is-account .tk-simple-hero-meta-label {
        margin-bottom: 0;
        flex-shrink: 0;
    }
    .tk-simple-hero-meta.is-account .tk-simple-hero-meta-value {
        font-size: 14px !important;
        text-align: right;
        margin-left: auto;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
        max-width: 65%;
    }
}

/* ---- Panel: removes top border-bottom dance, sharpens spacing -------------- */
.tk-simple-panel { margin-top: 18px; }
.tk-simple-panel-head {
    margin-bottom: 18px;
    padding-bottom: 14px;
}

/* ---- Match list (single-line, dense, alive) -------------------------------- */
.tk-mlist { list-style: none; margin: 0; padding: 0; }
.tk-mlist > li {
    display: grid;
    grid-template-columns: minmax(118px, auto) 1fr auto;
    align-items: center;
    column-gap: 18px;
    padding: 14px 8px;
    border-bottom: 1px solid var(--rule-soft);
    transition: background .15s, transform .15s;
}
.tk-mlist > li:last-child { border-bottom: 0; }
.tk-mlist > li:hover { background: var(--paper-tint); }

.tk-mlist-when {
    font: 500 11px/1.2 'JetBrains Mono', monospace;
    color: var(--ink-3);
    white-space: nowrap;
    letter-spacing: 0.2px;
}
.tk-mlist-when strong {
    display: block;
    color: var(--ink);
    font: 700 13px/1.15 'JetBrains Mono', monospace;
    margin-bottom: 2px;
    letter-spacing: 0.1px;
}

.tk-mlist-fact {
    display: flex; align-items: center;
    gap: 12px;
    min-width: 0;
    font: 600 14.5px/1.2 'IBM Plex Sans', sans-serif;
    color: var(--ink);
}
.tk-mlist-fact.is-live { color: #b22230; }
.tk-mlist-fact.is-live::before {
    content: "LIVE";
    flex-shrink: 0;
    padding: 4px 8px;
    border-radius: 3px;
    background: #c92b3a;
    color: #fff;
    font: 700 9px/1.3 'IBM Plex Sans', sans-serif;
    letter-spacing: 1.4px;
    animation: tk-live-pulse 1.6s ease-in-out infinite;
    box-shadow: 0 2px 8px -2px rgba(201,43,58,0.5);
}
@keyframes tk-live-pulse {
    0%, 100% { opacity: 1; box-shadow: 0 2px 8px -2px rgba(201,43,58,0.5); }
    50%      { opacity: 0.78; box-shadow: 0 2px 12px 0 rgba(201,43,58,0.7); }
}

.tk-mlist-tv {
    flex-shrink: 0;
    padding: 3px 8px;
    border-radius: 3px;
    background: var(--pitch);
    color: var(--cream-ink);
    font: 700 10px/1.3 'IBM Plex Sans', sans-serif;
    letter-spacing: 1.1px; text-transform: uppercase;
    white-space: nowrap;
}
.tk-mlist-tv-empty { display: none; }

.tk-mlist-teams {
    flex: 1 1 auto;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    overflow: hidden;
}
.tk-mlist-team {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1 1 auto;
}
.tk-mlist-team-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.tk-mlist-teams .tk-mlist-vs {
    color: var(--ink-3);
    font-weight: 400;
    margin: 0 2px;
    flex-shrink: 0;
}
.tk-mlist-flag {
    width: 22px;
    height: 15px;
    object-fit: cover;
    display: inline-block;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(8,30,18,0.12);
    flex-shrink: 0;
}
.tk-mlist-flag-pre, .tk-mlist-flag-post { margin: 0; }

@media (max-width: 520px) {
    .tk-mlist-teams { gap: 4px; }
    .tk-mlist-team { gap: 5px; }
    .tk-mlist-flag { width: 18px; height: 12px; }
    .tk-mlist-teams .tk-mlist-vs { margin: 0; font-size: 11px; }
}
.tk-mlist-score {
    flex-shrink: 0;
    font: 700 13px/1 'JetBrains Mono', monospace;
    color: var(--saffron-deep);
    padding: 5px 9px;
    background: rgba(196,122,7,0.10);
    border-radius: 3px;
    letter-spacing: 0.4px;
}
.tk-mlist-fact.is-live  .tk-mlist-score { color: #b22230; background: rgba(201,43,58,0.10); }
.tk-mlist-fact.is-done  .tk-mlist-score { color: var(--pitch-light); background: rgba(21,90,53,0.10); }
.tk-mlist-comment {
    flex-shrink: 0;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 8px 4px 7px;
    background: rgba(14,58,35,0.06);
    border-radius: 3px;
    font: 600 10.5px/1.3 'IBM Plex Sans', sans-serif;
    color: var(--ink-2);
    letter-spacing: 0.4px;
    text-transform: uppercase;
}
.tk-mlist-comment svg { width: 11px; height: 11px; color: var(--saffron-deep); }

.tk-mlist-go {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 14px;
    border: 1px solid var(--rule);
    border-radius: 3px;
    background: #fff;
    color: var(--pitch) !important;
    text-decoration: none;
    font: 600 11px/1 'IBM Plex Sans', sans-serif;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    transition: background .18s, color .18s, border-color .18s, transform .12s, box-shadow .18s;
    white-space: nowrap;
}
.tk-mlist-go:hover {
    background: var(--pitch);
    color: var(--cream-ink) !important;
    border-color: var(--pitch);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px -4px rgba(8,30,18,0.4);
}
.tk-mlist-go svg { width: 12px; height: 12px; }
.tk-mlist-go .tk-mlist-go-label { display: inline-block; }

@media (max-width: 720px) {
    .tk-mlist > li {
        grid-template-columns: auto 1fr auto;
        column-gap: 12px;
        padding: 13px 6px;
    }
    .tk-mlist-when strong { font-size: 12px; }
    .tk-mlist-when { font-size: 10px; }
    .tk-mlist-fact { gap: 8px; font-size: 13px; }
    .tk-mlist-fact .tk-mlist-tv { display: none; }
    .tk-mlist-comment { display: none; }
    .tk-mlist-go { padding: 8px 10px; }
    .tk-mlist-go .tk-mlist-go-label { display: none; }
}
@media (max-width: 420px) {
    .tk-mlist > li { column-gap: 10px; }
    .tk-mlist-fact { font-size: 12.5px; }
    .tk-mlist-score { font-size: 11px; padding: 4px 7px; }
}

/* ---- Form: brighter inputs, white surface, accented focus ------------------ */
.tk-form { display: flex; flex-direction: column; gap: 18px; max-width: 460px; }
.tk-form-field {
    display: flex; flex-direction: column; gap: 8px;
    position: relative;
}
.tk-form-label {
    display: inline-flex; align-items: center; gap: 8px;
    font: 600 10.5px/1 'IBM Plex Sans', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    color: var(--ink-2);
}
.tk-form-label::after {
    content: ""; flex: 1; height: 1px;
    background: var(--rule);
    margin-left: 4px;
}
.tk-form-input {
    appearance: none;
    border: 1px solid var(--rule);
    background: #fffdf6;
    padding: 13px 16px;
    border-radius: 3px;
    font: 500 15px/1.3 'IBM Plex Sans', sans-serif;
    color: var(--ink);
    transition: border-color .18s, background .18s, box-shadow .18s;
    width: 100%;
    box-sizing: border-box;
    box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset;
}
.tk-form-input::placeholder { color: var(--ink-3); opacity: 0.55; }
.tk-form-input:hover { border-color: var(--ink-3); background: #fff; }
.tk-form-input:focus {
    outline: 0;
    border-color: var(--pitch);
    background: #fff;
    box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 0 0 3px rgba(14,58,35,0.10);
}

.tk-form-flash {
    padding: 13px 16px;
    border-radius: 3px;
    font: 500 13px/1.4 'IBM Plex Sans', sans-serif;
    margin-bottom: 22px;
    display: flex; align-items: center; gap: 12px;
    position: relative;
    overflow: hidden;
}
.tk-form-flash::before {
    content: ""; width: 8px; height: 8px; border-radius: 50%;
    flex-shrink: 0;
}
.tk-form-flash::after {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
}
.tk-form-flash-ok {
    background: rgba(21,90,53,0.06);
    color: #1e4f33;
    border: 1px solid rgba(21,90,53,0.18);
}
.tk-form-flash-ok::before { background: var(--pitch-light); }
.tk-form-flash-ok::after  { background: var(--pitch-light); }
.tk-form-flash-err {
    background: rgba(201,43,58,0.05);
    color: #931e2a;
    border: 1px solid rgba(201,43,58,0.20);
}
.tk-form-flash-err::before { background: #c92b3a; }
.tk-form-flash-err::after  { background: #c92b3a; }

/* ---- Account row strip (eyebrow + pwd link) -------------------------------- */
.tk-account-strip {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    padding: 14px 16px;
    background: var(--paper-tint);
    border: 1px solid var(--rule);
    border-left: 3px solid var(--saffron);
    border-radius: 4px;
    margin-bottom: 22px;
}
.tk-account-strip-text {
    font: 500 13px/1.4 'IBM Plex Sans', sans-serif;
    color: var(--ink-2);
}
.tk-account-strip-text strong { color: var(--ink); font-weight: 700; }


/* ==========================================================================
   ANVÄNDARE — admin user roster (anvandare-draft.php)
   Press-newsroom / editorial directory aesthetic, paired with eview.php
   ========================================================================== */

.tk-anv { padding-bottom: 40px; }

/* ---- Notice variants ---- */
.tk-notice-ok {
    background: linear-gradient(180deg, rgba(14,58,35,0.04) 0%, rgba(14,58,35,0.07) 100%);
    border: 1px solid rgba(14,58,35,0.20);
    color: var(--pitch-deep);
}
.tk-notice-ok svg { color: var(--pitch); }
.tk-notice-warn {
    background: linear-gradient(180deg, #fdf6e3 0%, #fbeec5 100%);
    border: 1px solid rgba(155,94,4,0.30);
    color: var(--saffron-deep);
}
.tk-notice-warn svg { color: var(--saffron-deep); }

.tk-notice-credentials .tk-credentials {
    display: flex; flex-wrap: wrap; gap: 18px;
    margin: 10px 0 6px;
}
.tk-notice-credentials .tk-credentials > div {
    display: flex; flex-direction: column; gap: 2px;
}
.tk-notice-credentials .tk-credentials span {
    font: 600 10.5px/1 'JetBrains Mono', monospace;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--ink-3);
}
.tk-notice-credentials .tk-credentials code {
    font: 600 16px/1.2 'JetBrains Mono', monospace;
    color: var(--pitch-deep);
    background: rgba(14,58,35,0.08);
    padding: 5px 9px; border-radius: 3px;
    border: 1px solid rgba(14,58,35,0.14);
    user-select: all;
}
.tk-notice-credentials em {
    display: block;
    font: italic 400 12.5px/1.5 'Fraunces', Georgia, serif;
    color: var(--ink-3);
}

/* ---- Top row: stats grid + side CTA ---- */
.tk-anv-toprow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 230px;
    gap: 14px;
    align-items: stretch;
    margin: 4px 0 22px;
}
.tk-anv-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
.tk-stat-card {
    background: #fff;
    border: 1px solid rgba(19,24,21,0.10);
    border-top: 3px solid var(--ink-2);
    padding: 16px 18px 14px;
    border-radius: 2px;
    position: relative;
    box-shadow: 0 1px 0 rgba(19,24,21,0.04);
    transition: transform .15s ease, box-shadow .15s ease;
}
.tk-stat-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px -14px rgba(19,24,21,0.25);
}
.tk-stat-card-live { border-top-color: var(--crimson); background: linear-gradient(180deg, #fff 0%, #fdf3f0 100%); }
.tk-stat-card-tot  { border-top-color: var(--saffron); }
.tk-stat-card .tk-stat-card-label {
    font: 600 10.5px/1 'JetBrains Mono', monospace;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 8px;
}
.tk-stat-card .tk-stat-card-value {
    font: 600 36px/1 'Fraunces', Georgia, serif;
    color: var(--pitch-deep);
    font-feature-settings: "tnum" 1, "lnum" 1;
    margin-bottom: 6px;
    letter-spacing: -0.01em;
}
.tk-stat-card-live .tk-stat-card-value { color: var(--crimson); }
.tk-stat-card .tk-stat-card-meta {
    font: 500 12px/1.3 'IBM Plex Sans', sans-serif;
    color: var(--ink-3);
    display: flex; align-items: center; gap: 6px;
}
.tk-stat-dot {
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--crimson);
    box-shadow: 0 0 0 0 rgba(155,42,42,0.6);
    animation: tk-stat-pulse 2s ease-in-out infinite;
}
@keyframes tk-stat-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(155,42,42,0.55); }
    50%      { box-shadow: 0 0 0 5px rgba(155,42,42,0); }
}

/* ---- Toolbar (filter tabs + new user CTA) ---- */
.tk-anv-toolbar {
    display: flex; align-items: center; gap: 18px;
    flex-wrap: wrap;
    margin: 6px 0 14px;
    padding: 10px 0 14px;
    border-bottom: 1px dashed rgba(19,24,21,0.12);
}
.tk-filter-tabs {
    display: inline-flex;
    background: #fff;
    border: 1px solid rgba(19,24,21,0.14);
    border-radius: 999px;
    padding: 4px;
    gap: 2px;
}
.tk-filter-tab {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 16px;
    border-radius: 999px;
    font: 600 13px/1 'IBM Plex Sans', sans-serif;
    color: var(--ink-2);
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
    min-height: 36px;
}
.tk-filter-tab:hover { background: rgba(14,58,35,0.06); color: var(--pitch); }
.tk-filter-tab.is-active {
    background: var(--pitch);
    color: #fff;
    box-shadow: 0 1px 0 rgba(0,0,0,0.06) inset;
}
.tk-filter-tab.is-active .tk-stat-dot { background: #f7d77a; box-shadow: 0 0 0 0 rgba(247,215,122,0.5); }
.tk-filter-tab-count {
    font: 700 11px/1 'JetBrains Mono', monospace;
    background: rgba(19,24,21,0.08);
    color: var(--ink-2);
    padding: 3px 7px; border-radius: 999px;
}
.tk-filter-tab.is-active .tk-filter-tab-count {
    background: rgba(255,255,255,0.18);
    color: #fff;
}
.tk-anv-cta-new {
    display: flex; flex-direction: column; align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 20px 16px;
    background: linear-gradient(165deg, var(--pitch) 0%, var(--pitch-deep) 100%);
    color: var(--cream-ink) !important;
    text-decoration: none;
    border-radius: 2px;
    border-top: 3px solid var(--saffron);
    box-shadow: 0 1px 0 rgba(19,24,21,0.04), 0 12px 28px -18px rgba(8,30,18,0.6);
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
    position: relative;
    overflow: hidden;
}
.tk-anv-cta-new::after {
    content: '';
    position: absolute;
    right: -40px; bottom: -40px;
    width: 140px; height: 140px;
    background: radial-gradient(circle at center, rgba(196,122,7,0.25) 0%, transparent 65%);
    pointer-events: none;
}
.tk-anv-cta-new:hover {
    transform: translateY(-2px);
    box-shadow: 0 1px 0 rgba(19,24,21,0.04), 0 22px 38px -22px rgba(8,30,18,0.7);
    background: linear-gradient(165deg, var(--pitch-light) 0%, var(--pitch) 100%);
}
.tk-anv-cta-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--saffron);
    color: var(--pitch-deep);
    box-shadow: 0 1px 0 rgba(0,0,0,0.08) inset;
}
.tk-anv-cta-icon svg { width: 16px; height: 16px; }
.tk-anv-cta-text { display: flex; flex-direction: column; gap: 4px; }
.tk-anv-cta-text small {
    font: 700 10.5px/1 'JetBrains Mono', monospace;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--saffron);
}
.tk-anv-cta-text strong {
    font: 600 17px/1.2 'Fraunces', Georgia, serif;
    color: #fff;
    letter-spacing: -0.005em;
}

/* ---- Roster table ---- */
.tk-roster {
    background: #fff;
    border: 1px solid rgba(19,24,21,0.10);
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0 1px 0 rgba(19,24,21,0.04);
}
.tk-roster-head {
    display: grid;
    grid-template-columns: minmax(220px, 2.2fr) 130px 160px 110px 96px;
    gap: 14px;
    padding: 14px 18px;
    background: linear-gradient(180deg, #f7f3e8 0%, #efeadb 100%);
    border-bottom: 2px solid var(--ink);
    font: 600 10.5px/1 'JetBrains Mono', monospace;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--ink-2);
}

@keyframes tk-roster-fade {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.tk-roster-row {
    display: grid;
    grid-template-columns: minmax(220px, 2.2fr) 130px 160px 110px 96px;
    gap: 14px;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(19,24,21,0.07);
    opacity: 0;
    animation: tk-roster-fade 0.45s cubic-bezier(.2,.7,.2,1) forwards;
    transition: background .12s ease;
}
.tk-roster-row:last-child { border-bottom: none; }
.tk-roster-row:hover { background: rgba(14,58,35,0.025); }
.tk-roster-row.is-live { background: linear-gradient(90deg, rgba(155,42,42,0.04) 0%, rgba(255,255,255,0) 80%); }
.tk-roster-row.is-live:hover { background: linear-gradient(90deg, rgba(155,42,42,0.07) 0%, rgba(14,58,35,0.025) 80%); }

.tk-roster-col-name {
    display: flex; align-items: center; gap: 12px;
    min-width: 0;
}
.tk-avatar {
    flex-shrink: 0;
    width: 38px; height: 38px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font: 700 13px/1 'IBM Plex Sans', sans-serif;
    letter-spacing: 0.02em;
    color: #fff;
    background: var(--ink-2);
    position: relative;
    box-shadow: 0 1px 0 rgba(0,0,0,0.06) inset, 0 0 0 2px #fff, 0 0 0 3px rgba(19,24,21,0.08);
}
.tk-avatar.tk-avatar-is-admin     { background: linear-gradient(135deg, #155a35, #08291a); }
.tk-avatar.tk-avatar-is-presenter { background: linear-gradient(135deg, #c47a07, #9b5e04); }
.tk-avatar.tk-avatar-is-blocked   { background: linear-gradient(135deg, #9b2a2a, #6e1d1d); opacity: 0.75; }
.tk-avatar.tk-avatar-is-member    { background: linear-gradient(135deg, #3a423c, #20251f); }
.tk-avatar-pulse {
    position: absolute; right: -1px; bottom: -1px;
    width: 11px; height: 11px;
    background: var(--crimson);
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(155,42,42,0.55);
    animation: tk-stat-pulse 2s ease-in-out infinite;
}

.tk-roster-name-block {
    display: flex; flex-direction: column; gap: 2px;
    min-width: 0;
}
.tk-roster-realname {
    font: 600 15px/1.25 'IBM Plex Sans', sans-serif;
    color: var(--ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tk-roster-username {
    font: 500 12px/1 'JetBrains Mono', monospace;
    color: var(--ink-3);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.tk-anv-status {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    font: 600 11px/1 'IBM Plex Sans', sans-serif;
    letter-spacing: 0.02em;
    white-space: nowrap;
    border: 1px solid transparent;
}
.tk-anv-status.is-member    { background: rgba(19,24,21,0.06); color: var(--ink-2); border-color: rgba(19,24,21,0.10); }
.tk-anv-status.is-admin     { background: rgba(14,58,35,0.10); color: var(--pitch); border-color: rgba(14,58,35,0.22); }
.tk-anv-status.is-presenter { background: rgba(196,122,7,0.13); color: var(--saffron-deep); border-color: rgba(196,122,7,0.30); }
.tk-anv-status.is-blocked   { background: rgba(155,42,42,0.10); color: var(--crimson); border-color: rgba(155,42,42,0.26); text-decoration: line-through; text-decoration-color: rgba(155,42,42,0.40); }
.tk-anv-status.is-admin::before,
.tk-anv-status.is-presenter::before,
.tk-anv-status.is-blocked::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: currentColor;
}

.tk-anv-live {
    display: inline-flex; align-items: center; gap: 8px;
    font: 600 12.5px/1 'IBM Plex Sans', sans-serif;
    color: var(--crimson);
}
.tk-roster-time {
    font: 500 13px/1.25 'IBM Plex Sans', sans-serif;
    color: var(--ink-2);
    font-feature-settings: "tnum" 1;
}
.tk-roster-time-muted { color: var(--ink-3); }

.tk-roster-col-actions {
    display: flex; gap: 6px; justify-content: flex-end;
}
.tk-icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px;
    border-radius: 4px;
    color: var(--ink-2);
    border: 1px solid rgba(19,24,21,0.12);
    background: #fff;
    text-decoration: none;
    transition: background .12s ease, color .12s ease, border-color .12s ease, transform .12s ease;
}
.tk-icon-btn:hover {
    background: var(--pitch);
    color: #fff;
    border-color: var(--pitch);
    transform: translateY(-1px);
}
.tk-icon-btn-danger:hover {
    background: var(--crimson);
    border-color: var(--crimson);
}
.tk-icon-btn svg { width: 16px; height: 16px; }

/* ---- Form card (create / edit) ---- */
.tk-anv-formcard {
    background: #fff;
    border: 1px solid rgba(19,24,21,0.10);
    border-top: 3px solid var(--pitch);
    border-radius: 3px;
    padding: 28px 32px 26px;
    max-width: 560px;
    box-shadow: 0 1px 0 rgba(19,24,21,0.04), 0 24px 60px -38px rgba(14,58,35,0.20);
}
.tk-anv-formcard-lede {
    font: italic 400 15px/1.5 'Fraunces', Georgia, serif;
    color: var(--ink-2);
    margin: 0 0 22px;
    padding-bottom: 16px;
    border-bottom: 1px dashed rgba(19,24,21,0.12);
}
.tk-anv-form { display: flex; flex-direction: column; gap: 18px; }
.tk-field { display: flex; flex-direction: column; gap: 6px; }
.tk-field-label {
    font: 600 11px/1 'JetBrains Mono', monospace;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--ink-2);
}
.tk-field input[type=text],
.tk-field input[type=email],
.tk-field select {
    font: 500 15px/1.3 'IBM Plex Sans', sans-serif;
    color: var(--ink);
    padding: 11px 13px;
    border: 1px solid rgba(19,24,21,0.20);
    border-radius: 3px;
    background: #fdfcf7;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
    min-height: 44px;
    width: 100%;
    box-sizing: border-box;
}
.tk-field input[type=text]:focus,
.tk-field input[type=email]:focus,
.tk-field select:focus {
    outline: none;
    border-color: var(--pitch);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(14,58,35,0.10);
}
.tk-field-hint {
    font: 500 12px/1.4 'IBM Plex Sans', sans-serif;
    color: var(--ink-3);
}

.tk-form-actions {
    display: flex; align-items: center; gap: 14px;
    margin-top: 6px;
    padding-top: 18px;
    border-top: 1px dashed rgba(19,24,21,0.12);
}
.tk-form-actions .tk-btn-primary {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 22px;
    background: var(--pitch);
    color: #fff;
    border: none;
    border-radius: 2px;
    font: 600 14px/1 'IBM Plex Sans', sans-serif;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease;
    min-height: 44px;
}
.tk-form-actions .tk-btn-primary:hover { background: var(--pitch-light); transform: translateY(-1px); }
.tk-btn-ghost-link {
    font: 600 13px/1 'IBM Plex Sans', sans-serif;
    color: var(--ink-3);
    text-decoration: none;
    border-bottom: 1px dotted var(--ink-3);
    padding: 4px 0;
    transition: color .15s ease, border-color .15s ease;
}
.tk-btn-ghost-link:hover { color: var(--pitch); border-bottom-color: var(--pitch); }

/* ==========================================================================
   ANVÄNDARE — mobile responsiveness
   Roster collapses to card list; touch targets ≥ 44px
   ========================================================================== */

@media (max-width: 1100px) {
    .tk-anv-toprow {
        grid-template-columns: 1fr;
    }
    .tk-anv-cta-new {
        flex-direction: row;
        align-items: center;
        gap: 16px;
        padding: 14px 20px;
    }
    .tk-anv-cta-text { flex: 1; }
}

@media (max-width: 900px) {
    .tk-anv-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    .tk-roster-head,
    .tk-roster-row {
        grid-template-columns: minmax(180px, 2fr) 120px 130px 80px;
    }
    .tk-roster-col-reg { display: none; }
}

@media (max-width: 640px) {
    .tk-anv-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .tk-stat-card { padding: 12px 14px 11px; }
    .tk-stat-card .tk-stat-card-value { font-size: 28px; }

    .tk-anv-toolbar {
        gap: 12px;
    }
    .tk-anv-cta-new {
        padding: 14px 16px;
        min-height: 56px;
    }
    .tk-anv-cta-text strong { font-size: 15.5px; }
    .tk-filter-tabs { flex: 1 1 100%; justify-content: space-between; }
    .tk-filter-tab { flex: 1; justify-content: center; min-height: 44px; }

    /* Convert table to card list */
    .tk-roster { border-radius: 4px; }
    .tk-roster-head { display: none; }
    .tk-roster-row {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "name actions"
            "status status"
            "online online"
            "reg reg";
        gap: 10px 12px;
        padding: 16px 16px 14px;
        border-bottom: 1px solid rgba(19,24,21,0.08);
    }
    .tk-roster-col-name    { grid-area: name; }
    .tk-roster-col-status  { grid-area: status; padding-left: 50px; }
    .tk-roster-col-online  { grid-area: online; padding-left: 50px; }
    .tk-roster-col-reg     { grid-area: reg; display: flex; padding-left: 50px; }
    .tk-roster-col-actions { grid-area: actions; align-self: start; }

    .tk-roster-col-status::before,
    .tk-roster-col-online::before,
    .tk-roster-col-reg::before {
        content: attr(data-label);
        display: inline-block;
        min-width: 84px;
        margin-right: 8px;
        font: 600 10px/1 'JetBrains Mono', monospace;
        letter-spacing: 0.16em; text-transform: uppercase;
        color: var(--ink-3);
        align-self: center;
    }
    .tk-roster-col-status, .tk-roster-col-online, .tk-roster-col-reg {
        display: flex; align-items: center;
    }
    .tk-icon-btn { width: 44px; height: 44px; }

    .tk-anv-formcard { padding: 22px 18px 20px; }
    .tk-form-actions { flex-wrap: wrap; }
    .tk-form-actions .tk-btn-primary { flex: 1 1 100%; justify-content: center; min-height: 48px; }

    .tk-notice-credentials .tk-credentials { gap: 12px; }
    .tk-notice-credentials .tk-credentials code { font-size: 14px; }
}

@media (max-width: 420px) {
    .tk-anv-stats { grid-template-columns: 1fr 1fr; }
    .tk-roster-row { padding: 14px 12px 12px; }
    .tk-roster-col-status,
    .tk-roster-col-online,
    .tk-roster-col-reg { padding-left: 0; }
    .tk-avatar { width: 36px; height: 36px; }
}

/* =============================================================================
   ACHIEVEMENT DASHBOARD WIDGETS
   (1) .tk-ach-notify  - once-only "you earned a badge" banner (top of hub)
   (2) .tk-desk-lb     - compact tournament merit-point top-3 in the stats aside
   Both reuse the editorial broadcast palette: pitch green, saffron, gold medal,
   Fraunces display + JetBrains Mono numerals.
   ============================================================================= */

/* --- (1) NEW-BADGE NOTIFICATION BANNER --------------------------------------
   Deliberately distinct from the saffron .tk-tip-alert (a warning): this is a
   celebratory dark-green "broadcast" bar with a gold trophy medal, so an earned
   badge reads as a reward, not a to-do. */
.tk-ach-notify {
    display: grid;
    grid-template-columns: auto 1fr auto auto auto;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    margin: 0 0 16px 0;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(120% 140% at 0% 0%, rgba(196,122,7,0.22) 0%, rgba(196,122,7,0) 42%),
        linear-gradient(135deg, var(--pitch) 0%, var(--pitch-deep) 100%);
    border: 1px solid rgba(196,122,7,0.42);
    border-left: 4px solid var(--saffron);
    border-radius: 6px;
    box-shadow: 0 14px 32px -24px rgba(8,41,26,0.95), inset 0 1px 0 rgba(255,255,255,0.05);
    animation: tk-ach-notify-rise 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes tk-ach-notify-rise {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* Faint sweeping shine across the bar on entry */
.tk-ach-notify-spark {
    position: absolute; top: 0; bottom: 0; left: -40%; width: 38%;
    background: linear-gradient(100deg, transparent 0%, rgba(255,224,138,0.16) 50%, transparent 100%);
    transform: skewX(-18deg);
    animation: tk-ach-notify-sweep 1.5s ease-out 0.35s both;
    pointer-events: none;
}
@keyframes tk-ach-notify-sweep {
    from { left: -45%; opacity: 0; }
    25%  { opacity: 1; }
    to   { left: 115%; opacity: 0; }
}

.tk-ach-notify-medal {
    position: relative;
    width: 46px; height: 46px;
    border-radius: 50%;
    display: grid; place-items: center;
    flex-shrink: 0;
    color: #4a3402;
    background: linear-gradient(145deg, #ffe08a, #c8920c);
    box-shadow: 0 0 0 3px rgba(255,224,138,0.16), 0 6px 14px -6px rgba(0,0,0,0.55);
}
.tk-ach-notify-medal svg { width: 24px; height: 24px; }
.tk-ach-notify-medal.tier-bronze   { background: linear-gradient(145deg, #d98a4e, #7a4513); color: #fff; }
.tk-ach-notify-medal.tier-silver   { background: linear-gradient(145deg, #eef2f6, #97a3b0); color: #2b3138; }
.tk-ach-notify-medal.tier-gold     { background: linear-gradient(145deg, #ffe08a, #c8920c); color: #4a3402; }
.tk-ach-notify-medal.tier-platinum { background: linear-gradient(145deg, #e9f6ff, #7fc7e8 45%, #b39ddb); color: #243140; }
.tk-ach-notify-medal.tier-none     { background: linear-gradient(145deg, var(--pitch-light), var(--pitch-deep)); color: #ffe08a; }

.tk-ach-notify-body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.tk-ach-notify-kicker {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700; font-size: 9.5px;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--saffron);
}
.tk-ach-notify-kicker svg { color: #ffe08a; }
.tk-ach-notify-name {
    margin: 0;
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 500; font-size: 16px; line-height: 1.12;
    color: var(--cream-ink);
}
.tk-ach-notify-name b { font-weight: 700; color: #fff; }
.tk-ach-notify-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.tk-ach-notify-chip {
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: 11px; font-weight: 600;
    color: var(--cream-ink);
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,224,138,0.22);
    border-radius: 999px; padding: 2px 9px;
}
.tk-ach-notify-chip.is-more { color: #ffe08a; background: transparent; border-style: dashed; }
.tk-ach-notify-mp {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700; font-size: 12px; letter-spacing: 0.02em;
    color: #ffe08a; white-space: nowrap;
    background: rgba(255,224,138,0.10);
    border: 1px solid rgba(255,224,138,0.28);
    border-radius: 4px; padding: 4px 8px;
}
.tk-ach-notify-cta {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600; font-size: 12px; letter-spacing: 0.03em;
    text-decoration: none; white-space: nowrap;
    color: var(--pitch-deep);
    background: linear-gradient(180deg, #ffe08a 0%, #f4ad1f 100%);
    border-radius: 4px; padding: 8px 12px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.tk-ach-notify-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 14px -6px rgba(255,224,138,0.6); }
.tk-ach-notify-close {
    -webkit-appearance: none; appearance: none;
    border: 0; cursor: pointer; line-height: 1;
    width: 28px; height: 28px; border-radius: 50%;
    font-size: 17px; color: var(--cream-ink);
    background: rgba(255,255,255,0.06);
    transition: background 0.15s ease, color 0.15s ease;
}
.tk-ach-notify-close:hover { background: rgba(255,255,255,0.14); color: #fff; }

@media (max-width: 620px) {
    .tk-ach-notify {
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
            "medal body  close"
            "mp    cta   cta";
        gap: 9px 10px;
        padding: 11px 12px;
        margin-bottom: 12px;
    }
    .tk-ach-notify-medal { grid-area: medal; width: 38px; height: 38px; align-self: start; }
    .tk-ach-notify-medal svg { width: 19px; height: 19px; }
    .tk-ach-notify-body  { grid-area: body; gap: 2px; }
    .tk-ach-notify-close { grid-area: close; align-self: start; }
    /* Badge-name chips drop on phones - the count line + Visa CTA carry the
       message, and the chip list is what made the banner tall. */
    .tk-ach-notify-chips { display: none; }
    .tk-ach-notify-name  { font-size: 14px; }
    .tk-ach-notify-mp    { grid-area: mp; justify-self: start; align-self: center; }
    .tk-ach-notify-cta   { grid-area: cta; justify-self: end; }
}

/* --- (2) TOURNAMENT TOP-3 (Mästerskapsligan) IN THE STATS ASIDE -------------
   Sits below Höjdpunkter inside .tk-desk. Header echoes .tk-desk-highlights-head;
   rows reuse the utmarkelser .tk-lb pos-1/2/3 gold/silver/bronze treatment in a
   tighter 3-row footprint. */
.tk-desk-lb { margin-top: 24px; }
.tk-desk-lb-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.tk-desk-lb-name-h {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 700; font-size: 13.5px; letter-spacing: 0.01em;
    color: var(--ink); white-space: nowrap;
}
.tk-desk-lb-rule { flex: 1; height: 1px; background: linear-gradient(90deg, var(--rule) 0%, var(--rule-soft) 100%); }
.tk-desk-lb-kicker {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--ink-3); white-space: nowrap;
}
.tk-desk-lb-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 0;
    border-top: 1px solid var(--rule-soft);
}
.tk-desk-lb-row:first-of-type { border-top: 0; }
.tk-desk-lb-pos {
    position: relative; flex: 0 0 auto;
    width: 22px; text-align: center;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700; font-size: 13px; color: var(--ink-3);
}
.tk-desk-lb-pos.pos-1 { color: #c8920c; }
.tk-desk-lb-pos.pos-2 { color: #8c98a4; }
.tk-desk-lb-pos.pos-3 { color: #a9651f; }
/* Tiny medallion ring behind podium positions */
.tk-desk-lb-pos.pos-1::before,
.tk-desk-lb-pos.pos-2::before,
.tk-desk-lb-pos.pos-3::before {
    content: ""; position: absolute; inset: -3px -1px;
    border-radius: 50%; z-index: -1;
}
.tk-desk-lb-pos.pos-1::before { background: rgba(200,146,12,0.12); }
.tk-desk-lb-pos.pos-2::before { background: rgba(140,152,164,0.14); }
.tk-desk-lb-pos.pos-3::before { background: rgba(169,101,31,0.12); }
.tk-desk-lb-nm {
    flex: 1; min-width: 0;
    font-weight: 600; font-size: 13px; color: var(--ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tk-desk-lb-nm a { color: inherit; text-decoration: none; }
.tk-desk-lb-nm a:hover { text-decoration: underline; color: var(--saffron-deep); }
.tk-desk-lb-nm em { font-style: normal; color: var(--saffron-deep); font-weight: 700; }
.tk-desk-lb-mp {
    flex: 0 0 auto;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700; font-size: 12.5px; color: var(--saffron-deep);
    min-width: 34px; text-align: right;
    font-feature-settings: 'tnum';
}
.tk-desk-lb-mp::after { content: " mp"; font-size: 9px; font-weight: 600; color: var(--ink-3); letter-spacing: 0.04em; }
.tk-desk-lb-row.is-me {
    background: rgba(196,122,7,0.10);
    border-radius: 7px; margin: 0 -8px; padding: 8px;
}
.tk-desk-lb-row.tk-desk-lb-sep { border-top: 2px dotted var(--rule); }
.tk-desk-lb-more {
    display: inline-block; margin-top: 10px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
    color: var(--saffron-deep); text-decoration: none;
}
.tk-desk-lb-more:hover { text-decoration: underline; }

/* ---- Session error / not-logged-in state -------------------------------- */
/* Rendered via $error_text (L/inc/inc.php) on every gated subpage when the   */
/* session is missing. Self-contained card that sits inside the page wrapper. */
.tk-session-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
    max-width: 460px;
    margin: 24px auto;
    padding: 38px 32px;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-top: 3px solid var(--crimson);
    border-radius: 5px;
    box-shadow: 0 1px 0 var(--rule-soft), 0 18px 40px -28px rgba(8,41,26,0.45);
}
.tk-session-error-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    color: var(--crimson);
    background: rgba(155,42,42,0.08);
    border: 1px solid rgba(155,42,42,0.18);
}
.tk-session-error-icon svg { width: 26px; height: 26px; }
.tk-session-error-title {
    margin: 0;
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: 'opsz' 40, 'SOFT' 60;
    font-size: 26px;
    font-weight: 600;
    line-height: 1.15;
    color: var(--ink);
}
.tk-session-error-text {
    margin: 0;
    max-width: 34ch;
    font: 400 15px/1.55 'IBM Plex Sans', system-ui, sans-serif;
    color: var(--ink-3);
}
.tk-session-error-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 4px;
    padding: 13px 22px;
    font: 700 12px/1 'IBM Plex Sans', sans-serif;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #fff;
    background: var(--pitch);
    border-radius: 2px;
    text-decoration: none;
    box-shadow: inset 0 -2px 0 rgba(0,0,0,0.20), inset 0 1px 0 rgba(255,255,255,0.10);
    transition: background .15s, transform .08s;
}
.tk-session-error-btn svg { width: 16px; height: 16px; }
.tk-session-error-btn:hover { background: var(--pitch-light); transform: translateY(-1px); }
.tk-session-error-btn:active { transform: translateY(0); }

/* ============================ MIN STATISTIK ============================ */
/* .wrapper is globally display:flex; flex-wrap:wrap; gap:30px — force every
   top-level block (ribbon, hero, trend strip, arena) onto its own full-width
   row, the same pattern as tk-coupon-wrap / tk-rk-wrap / tk-report-wrap. */
body#page2 .container_12 .wrapper.tk-ms-wrap > * { width: 100%; }
.tk-ms-eyebrow {
    display: inline-block;
    font: 600 10px 'JetBrains Mono', monospace;
    letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--saffron-deep); margin-bottom: 6px;
}
.tk-ms-wrap .tk-card h2 { font: 700 26px/1.1 'Fraunces', Georgia, serif; color: var(--pitch); margin: 0 0 16px; }
.tk-ms-empty { padding: 26px; text-align: center; color: var(--ink-3); background: var(--paper-tint); border-radius: 6px; }
.tk-ms-empty p { color: var(--ink-3); }
.tk-ms-empty a { color: var(--saffron-deep); font-weight: 600; }

/* hero / rank chart */
.tk-ms-hero-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 8px; }
.tk-ms-hero-head h2 { margin: 0; }
.tk-ms-hero-now { text-align: right; flex-shrink: 0; }
.tk-ms-now-rank { display: block; font: 800 38px/1 'Fraunces', Georgia, serif; color: var(--saffron); }
.tk-ms-now-sub { display: block; font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.tk-ms-chart-wrap { width: 100%; margin-top: 8px; }
.tk-ms-chart { width: 100%; height: auto; display: block; max-height: 360px; }
.tk-ms-grid { stroke: var(--rule); stroke-width: 1; }
.tk-ms-axis { fill: var(--ink-3); font: 500 11px 'JetBrains Mono', monospace; }
.tk-ms-xlbl { fill: var(--ink-3); font: 500 11px 'JetBrains Mono', monospace; }
.tk-ms-money { stroke: var(--crimson); stroke-width: 1.5; stroke-dasharray: 5 4; opacity: 0.7; }
.tk-ms-money-lbl { fill: var(--crimson); font: 600 10px 'JetBrains Mono', monospace; letter-spacing: 0.04em; }
.tk-ms-area { fill: var(--saffron); opacity: 0.10; }
.tk-ms-line { stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.tk-ms-line-me { stroke: var(--saffron); }
.tk-ms-line-rival { stroke: var(--ink-3); stroke-width: 2; stroke-dasharray: 4 4; opacity: 0.65; }
.tk-ms-dot { fill: var(--saffron); }
.tk-ms-dot-last { fill: var(--pitch); stroke: var(--saffron); stroke-width: 2.5; }
.tk-ms-dot-rival { fill: var(--ink-3); opacity: 0.6; }
.tk-ms-hit { fill: transparent; pointer-events: all; cursor: pointer; }
.tk-ms-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 12px; }
.tk-ms-leg { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ink-2); font-weight: 500; }
.tk-ms-leg::before { content: ''; width: 16px; height: 3px; border-radius: 2px; background: var(--ink-3); }
.tk-ms-leg-me::before { background: var(--saffron); }
.tk-ms-leg-rival::before { background: var(--ink-3); }
.tk-ms-leg-money::before { background: var(--crimson); }

/* two-column arena: wide main + right rail */
.tk-ms-arena { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.tk-ms-main, .tk-ms-side { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
/* the rail is narrow — collapse inner grids so nothing overflows the column */
.tk-ms-side .tk-ms-bonus-grid { grid-template-columns: 1fr; }
.tk-ms-side .tk-ms-ach-list { grid-template-columns: 1fr; }

/* trend strip: 3 equal-width, equal-height tiles, full width under the hero.
   Flex (not grid) so align-items:stretch reliably equalises height even when one
   tile's label wraps to a second line. */
.tk-ms-trend { display: flex; gap: 16px; align-items: stretch; }
.tk-ms-trend > .tk-card { flex: 1 1 0; min-width: 0; }
.tk-ms-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tk-ms-stat { padding: 18px 22px; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.tk-ms-stat-lbl { display: block; font: 600 10px 'JetBrains Mono', monospace; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.tk-ms-stat-val { display: block; font: 700 20px/1.15 'Fraunces', Georgia, serif; color: var(--pitch); }
.tk-ms-stat-val.is-up { color: var(--pitch-light); }
.tk-ms-stat-val.is-down { color: var(--crimson); }

/* head-to-head picker */
.tk-ms-vs { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; }
.tk-ms-vs label { font: 600 10px 'JetBrains Mono', monospace; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.tk-ms-vs select { font: 500 13px 'IBM Plex Sans', sans-serif; padding: 6px 10px; border: 1px solid var(--rule); border-radius: 5px; background: var(--surface); color: var(--ink); max-width: 240px; cursor: pointer; }
.tk-ms-vs button { font: 600 12px 'IBM Plex Sans', sans-serif; padding: 6px 12px; border: 0; border-radius: 5px; background: var(--saffron); color: #fff; cursor: pointer; }

/* streak centerpiece */
.tk-ms-streak { border-top: 4px solid var(--saffron); }
.tk-ms-streak-body { margin-top: 4px; }

/* bonus */
.tk-ms-bonus-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.tk-ms-bonus-card { padding: 16px 18px; background: var(--paper-tint); border-radius: 6px; border: 1px solid var(--rule-soft); }
.tk-ms-bonus-cat { font: 600 11px 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3); margin-bottom: 10px; }
.tk-ms-bonus-cat b { color: var(--saffron-deep); }
.tk-ms-bonus-pick { font: 700 16px 'Fraunces', Georgia, serif; color: var(--pitch); line-height: 1.25; }
.tk-ms-bonus-sub { font: 500 12px 'IBM Plex Sans', sans-serif; color: var(--ink-3); }
.tk-ms-bonus-team { font: 500 12px 'IBM Plex Sans', sans-serif; color: var(--ink-3); margin-top: 3px; }
.tk-ms-bonus-status { margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.tk-ms-bonus-status.is-hit { color: var(--pitch-light); }
.tk-ms-bonus-empty { font-size: 13px; color: var(--ink-3); font-style: italic; }

/* final result */
.tk-ms-final { background: linear-gradient(180deg, var(--pitch) 0%, var(--pitch-deep) 100%); }
.tk-ms-final h2, .tk-ms-final .tk-ms-eyebrow { color: var(--cream-ink); }
.tk-ms-final .tk-ms-eyebrow { color: #f4ad1f; }
.tk-ms-final-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.tk-ms-final-cell { text-align: center; padding: 14px; background: rgba(255,255,255,0.06); border-radius: 6px; }
.tk-ms-final-num { display: block; font: 800 30px/1 'Fraunces', Georgia, serif; color: #f4ad1f; }
.tk-ms-final-lbl { display: block; font-size: 11px; color: var(--cream-ink); opacity: 0.75; margin-top: 6px; }

/* accuracy */
.tk-ms-acc-bar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--paper-tint); }
.tk-ms-acc-seg { height: 100%; }
.tk-ms-acc-seg.seg-exact { background: var(--pitch-light); }
.tk-ms-acc-seg.seg-sign { background: var(--saffron); }
.tk-ms-acc-seg.seg-miss { background: var(--rule); }
.tk-ms-acc-legend { display: flex; gap: 18px; margin-top: 10px; font-size: 12px; color: var(--ink-2); }
.tk-ms-acc-legend b { color: var(--pitch); font-weight: 700; }
.tk-ms-acc-meta { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.tk-ms-acc-meta > div { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding-bottom: 10px; border-bottom: 1px solid var(--rule-soft); }
.tk-ms-acc-meta > div:last-child { border-bottom: 0; }
.tk-ms-acc-k { font: 600 10px 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-3); min-width: 120px; }
.tk-ms-acc-v { font: 700 15px 'Fraunces', Georgia, serif; color: var(--pitch); }
.tk-ms-acc-cmp { font-size: 12px; color: var(--ink-3); }

/* achievements */
.tk-ms-ach-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.tk-ms-ach-head > div { min-width: 0; }
.tk-ms-ach-head h2 { margin: 0; }
.tk-ms-ach-count { flex-shrink: 0; font: 800 30px 'Fraunces', Georgia, serif; color: var(--saffron); line-height: 1; }
.tk-ms-ach-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.tk-ms-ach-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--paper-tint); border-radius: 6px; border-left: 3px solid var(--rule); }
.tk-ms-ach-item.tier-bronze { border-left-color: #b07a45; }
.tk-ms-ach-item.tier-silver { border-left-color: #9aa3a8; }
.tk-ms-ach-item.tier-gold { border-left-color: #d9a520; }
.tk-ms-ach-item.tier-platinum { border-left-color: #5fb3c4; }
.tk-ms-ach-icon { width: 22px; height: 22px; flex-shrink: 0; color: var(--pitch); display: inline-flex; }
.tk-ms-ach-icon svg { width: 22px; height: 22px; }
.tk-ms-ach-name { flex: 1; font-size: 13px; font-weight: 600; color: var(--ink); }
.tk-ms-ach-pts { font: 600 12px 'JetBrains Mono', monospace; color: var(--saffron-deep); }
.tk-ms-ach-more { display: inline-block; margin-top: 14px; color: var(--saffron-deep); font-weight: 600; font-size: 13px; text-decoration: none; }
.tk-ms-ach-more:hover { text-decoration: underline; }

/* two-column: best places + contributions */
.tk-ms-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.tk-ms-best-rank { font: 700 15px 'Fraunces', Georgia, serif; color: var(--saffron-deep); }
.tk-ms-contrib-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.tk-ms-contrib-item { display: flex; flex-direction: column; gap: 3px; padding-bottom: 12px; border-bottom: 1px solid var(--rule-soft); }
.tk-ms-contrib-item:last-child { border-bottom: 0; }
.tk-ms-contrib-match { font-weight: 700; font-size: 13px; color: var(--pitch); text-decoration: none; }
.tk-ms-contrib-match:hover { color: var(--saffron-deep); }
.tk-ms-contrib-msg { font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.tk-ms-contrib-date { font: 500 10px 'JetBrains Mono', monospace; color: var(--ink-3); }

/* share card */
.tk-ms-share-hint { font-size: 13px; color: var(--ink-3); margin: 0 0 14px; }
.tk-ms-share-wrap { max-width: 600px; }
.tk-ms-share-svg { width: 100%; height: auto; display: block; border-radius: 14px; box-shadow: 0 12px 30px -12px rgba(8,30,18,0.4); }
.tk-ms-share-eyebrow { fill: #f4ad1f; font: 700 13px 'JetBrains Mono', monospace; letter-spacing: 0.16em; }
.tk-ms-share-event { fill: var(--cream-ink); font: 700 28px 'Fraunces', Georgia, serif; }
.tk-ms-share-rank { fill: #ffffff; font: 800 92px 'Fraunces', Georgia, serif; }
.tk-ms-share-of { fill: var(--cream-ink); font: 500 17px 'IBM Plex Sans', sans-serif; opacity: 0.85; }
.tk-ms-share-pctnum { fill: #f4ad1f; font: 800 30px 'Fraunces', Georgia, serif; }
.tk-ms-share-pctlbl { fill: var(--cream-ink); font: 500 12px 'IBM Plex Sans', sans-serif; opacity: 0.8; }
.tk-ms-share-name { fill: var(--cream-ink); font: 600 17px 'IBM Plex Sans', sans-serif; }
.tk-ms-share-badge { fill: #f4ad1f; font: 600 14px 'IBM Plex Sans', sans-serif; }

/* all-time career leaderboards (expandable, native <details>) */
.tk-ms-alltime-sub { font-size: 13px; color: var(--ink-3); margin: 0 0 16px; }
.tk-ms-boards { display: flex; flex-direction: column; gap: 10px; }
.tk-ms-board { border: 1px solid var(--rule-soft); border-radius: 10px; background: rgba(255,255,255,0.5); overflow: hidden; }
.tk-ms-board[open] { border-color: var(--saffron); box-shadow: 0 6px 18px -12px rgba(8,30,18,0.35); }
.tk-ms-board-sum { display: flex; align-items: center; gap: 14px; padding: 14px 16px; cursor: pointer; list-style: none; -webkit-user-select: none; user-select: none; }
.tk-ms-board-sum::-webkit-details-marker { display: none; }
.tk-ms-board-sum:hover { background: rgba(14,58,35,0.04); }
.tk-ms-board-sum:focus-visible { box-shadow: 0 0 0 2px var(--saffron); }
.tk-ms-board-cat { flex: 1; font: 700 14px 'IBM Plex Sans', sans-serif; color: var(--ink); }
.tk-ms-board-mine { display: flex; align-items: baseline; gap: 12px; text-align: right; }
.tk-ms-board-val { font: 700 16px 'JetBrains Mono', monospace; color: var(--saffron-deep); white-space: nowrap; }
.tk-ms-board-pos { font: 700 14px 'Fraunces', Georgia, serif; color: var(--pitch); white-space: nowrap; }
.tk-ms-board-of { font: 500 11px 'IBM Plex Sans', sans-serif; color: var(--ink-3); }
.tk-ms-board-chev { width: 14px; height: 14px; color: var(--ink-3); flex-shrink: 0; transition: transform 180ms ease; }
.tk-ms-board[open] .tk-ms-board-chev { transform: rotate(180deg); }
.tk-ms-board-body { max-height: 360px; overflow-y: auto; border-top: 1px solid var(--rule-soft); }
.tk-ms-board-list { list-style: none; margin: 0; padding: 6px 0; }
.tk-ms-board-row { display: flex; align-items: center; gap: 12px; padding: 7px 16px; font-size: 13px; }
.tk-ms-board-row:nth-child(even) { background: rgba(14,58,35,0.025); }
.tk-ms-board-rank { width: 46px; flex-shrink: 0; font: 600 12px 'JetBrains Mono', monospace; color: var(--ink-3); }
.tk-ms-board-name { flex: 1; color: var(--ink-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-ms-board-pts { font: 600 13px 'JetBrains Mono', monospace; color: var(--ink); white-space: nowrap; }
.tk-ms-board-row.is-me { background: rgba(196,122,7,0.12); }
.tk-ms-board-row.is-me .tk-ms-board-name,
.tk-ms-board-row.is-me .tk-ms-board-rank,
.tk-ms-board-row.is-me .tk-ms-board-pts { color: var(--saffron-deep); font-weight: 700; }
.tk-ms-board-you { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--saffron); color: #fff; font: 700 9px 'JetBrains Mono', monospace; letter-spacing: 0.08em; text-transform: uppercase; vertical-align: middle; }
.tk-ms-board-na { font: 600 11px 'IBM Plex Sans', sans-serif !important; color: var(--ink-3); }

/* responsive */
@media (max-width: 980px) {
    .tk-ms-arena { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
    .tk-ms-grid2 { grid-template-columns: 1fr; }
    .tk-ms-grid3 { grid-template-columns: 1fr; }
    .tk-ms-final-grid { grid-template-columns: repeat(2, 1fr); }
    .tk-ms-hero-head { flex-direction: column; }
    .tk-ms-hero-now { text-align: left; }
}
@media (max-width: 767px) {
    .tk-ms-wrap .tk-card h2 { font-size: 22px; }
    .tk-ms-trend { flex-direction: column; }
    .tk-ms-ach-list { grid-template-columns: 1fr; }
    .tk-ms-acc-legend { flex-wrap: wrap; gap: 10px; }
    .tk-ms-board-sum { flex-wrap: wrap; gap: 6px 12px; }
    .tk-ms-board-cat { flex: 1 0 100%; }
    .tk-ms-board-mine { flex: 1; justify-content: flex-start; text-align: left; }
}

/* ============================================================
   MATCH-DAY THEME — Sverige vs Japan · VM 2026 (2026-06-25)
   "Matchday fixture seam": a slim scoreboard line seated in the
   gap between the nav menu and the page. National colour is
   AMBIENT, not striped — blue glow from the left (Sverige),
   crimson from the right (Japan), pitch-green between. Sweden
   gold = baseline rule; Japan white = top hairline.
   TEMPORARY — TO REMOVE: delete this entire block.
   ============================================================ */
body#page2 > .main > header::after {
    /* Inline SVG flags sit BETWEEN the text segments, hugging the team names */
    content:
        "VM 2026   ·  "
        url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='20'%20height='13'%20viewBox='0%200%2016%2010'%3E%3Crect%20width='16'%20height='10'%20fill='%23006AA7'/%3E%3Crect%20x='5'%20width='2'%20height='10'%20fill='%23FECC02'/%3E%3Crect%20y='4'%20width='16'%20height='2'%20fill='%23FECC02'/%3E%3C/svg%3E")
        " SVERIGE – JAPAN "
        url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='19'%20height='13'%20viewBox='0%200%2015%2010'%3E%3Crect%20width='15'%20height='10'%20fill='%23ffffff'/%3E%3Ccircle%20cx='7.5'%20cy='5'%20r='3'%20fill='%23BC002D'/%3E%3C/svg%3E")
        "  ·   INATT";
    display: block;
    position: relative;   /* sit above the faint header ::before ornament */
    z-index: 1;
    padding: 10px 24px;
    font: 700 11px/15px 'JetBrains Mono', monospace;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    color: var(--cream-ink);
    background:
        /* ambient team-colour wash: blue glow left (Sverige), crimson right (Japan) */
        radial-gradient(135% 200% at 0% 50%,   rgba(0,106,167,0.42), transparent 52%),
        radial-gradient(135% 200% at 100% 50%, rgba(188,0,45,0.42),  transparent 52%);
    border-top: 1px solid rgba(247,239,217,0.16);     /* Japan white hairline */
    box-shadow: inset 0 -2px 0 rgba(254,204,2,0.65);  /* Sverige gold baseline */
}
@media (max-width: 600px) {
    body#page2 > .main > header::after {
        content:
            url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='20'%20height='13'%20viewBox='0%200%2016%2010'%3E%3Crect%20width='16'%20height='10'%20fill='%23006AA7'/%3E%3Crect%20x='5'%20width='2'%20height='10'%20fill='%23FECC02'/%3E%3Crect%20y='4'%20width='16'%20height='2'%20fill='%23FECC02'/%3E%3C/svg%3E")
            " SVERIGE – JAPAN "
            url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='19'%20height='13'%20viewBox='0%200%2015%2010'%3E%3Crect%20width='15'%20height='10'%20fill='%23ffffff'/%3E%3Ccircle%20cx='7.5'%20cy='5'%20r='3'%20fill='%23BC002D'/%3E%3C/svg%3E");
        letter-spacing: 0.18em;
        padding: 10px 18px;
    }
}