/* =====================================================================
   Event showcase on the main page (Kamal, 2026-09-17).

   One section per event: a title row with the day tabs, then one score row
   and the boards of the chosen country's match. The country is picked in the
   score row, where the home team's name stands, and the category (Open,
   Women, whatever the broadcast has) with the switch under it (Kamal,
   2026-09-20; the match list of 2026-09-19 is gone). Tapping a board opens
   the replay popup.

   Colours are tokens on .esw. On a signed-in page the layout's theme
   variables fill them (all twelve themes, light and dark); on the public
   landing pages — always dark — the fallbacks apply. Every rule below is a
   two-class selector so no global stylesheet outranks it.

   Pairs (dark fallback): text #f1f5f9 on card #1e293b = 13.6:1; muted
   #94a3b8 on #1e293b = 6.1:1; tab text #f1f5f9 on tab #334155 = 10.1:1.
   Light member themes (theme-light): text #1e293b on card #ffffff = 14.6:1;
   muted #64748b on #fff = 4.8:1; the card border carries the silhouette.
   ===================================================================== */

.esw {
    --esw-card: var(--theme-card-bg-solid, #1e293b);
    --esw-page: var(--theme-bg-primary, #0f172a);
    --esw-text: var(--theme-text-primary, #f1f5f9);
    --esw-muted: var(--theme-text-secondary, #94a3b8);
    --esw-border: var(--theme-card-border, rgba(148, 163, 184, 0.2));
    --esw-accent: var(--theme-accent-primary, #6366f1);
    --esw-tab: var(--theme-table-header-bg, #334155);
    --esw-tab-text: var(--theme-table-header-text, #f1f5f9);
    --esw-hover: var(--theme-table-row-hover, rgba(99, 102, 241, 0.12));

    color: var(--esw-text);
    background: var(--esw-card);
    border: 1px solid var(--esw-border);
    border-radius: 12px;
    padding: 8px 10px 10px;
    margin: 0 0 12px;
    direction: ltr;               /* names, scores and boards read left to right in every language */
}

/* ----- the title row: name, then the day tabs on the same line ----- */
.esw .esw-head {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;   /* one line: name · chosen day · next-round pill · tabs, the tabs scrolling (Kamal, 2026-09-22) */
    gap: 6px 10px;
    margin-bottom: 8px;
}
.esw .esw-title {
    font-weight: 800;
    font-size: 1rem;
    color: var(--esw-text);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.esw .esw-title i { color: var(--esw-accent); }
/* the row and its two arrows; the arrows show only while there is more that way */
.esw .esw-tabwrap { display: flex; align-items: center; gap: 3px; margin-inline-start: auto; flex: 0 1 auto; min-width: 160px; }
.esw .esw-tarr {
    flex: 0 0 auto; width: 22px; height: 24px; padding: 0; border-radius: 6px; cursor: pointer;
    border: 1px solid var(--esw-border); background: var(--esw-page); color: var(--esw-text);
    display: inline-flex; align-items: center; justify-content: center; font-size: 0.8rem;
}
.esw .esw-tarr[hidden] { display: none; }
.esw .esw-tarr:hover { border-color: var(--esw-accent); color: var(--esw-accent); }
.esw .esw-tarr:focus-visible { outline: 2px solid var(--esw-accent); outline-offset: 1px; }
.esw.esw-crowded .esw-now { display: none; }   /* the tabs do not fit: their row takes the words' room */
.esw .esw-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;   /* the row scrolls under the wheel or a finger; no bar */
    position: relative;      /* the script measures the tabs against the row */
    padding: 2px 0;          /* room for the chosen tab's glow */
}
.esw .esw-tabs::-webkit-scrollbar { display: none; }
.esw .esw-tab { flex: 0 0 auto; }
.esw .esw-tab {
    appearance: none;
    border: 1px solid var(--esw-border);
    background: transparent;
    color: var(--esw-text);
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
}
.esw .esw-tab small { color: var(--esw-muted); font-size: 0.72rem; font-weight: 500; }
.esw .esw-tab:hover { background: var(--esw-hover); color: var(--esw-text); }
.esw .esw-tab:focus-visible { outline: 2px solid var(--esw-accent); outline-offset: 1px; }
/*  The chosen tab is gold, the site's own colour: dark ink #1e293b on #f0c040 = 9.6:1;
    the pill stands out on the navy card (#f0c040 vs #1e293b = 8.6:1) and on the white
    panel its #b8860b border draws it (Kamal, 2026-09-17: grey, then indigo, were too quiet). */
.esw .esw-tab.on,
.esw .esw-tab.on:hover { background: #f0c040; color: #1e293b; border-color: #b8860b; box-shadow: 0 0 0 2px rgba(240, 192, 64, 0.35); font-weight: 800; }
.esw .esw-tab.on small { color: #1e293b; opacity: 0.85; }
/* The chosen day and its date, centred between the name and the tabs (laptop only) */
.esw .esw-now {
    flex: 1 0 auto;
    text-align: center;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--esw-muted);
    white-space: nowrap;
}

/* ----- the score row (Kamal, 2026-09-19; one line 2026-09-20) -----
   Over the boards: flag, the country list, the category switch, the score in
   the middle, the opponent at the end. Pairs: names var(--esw-text) on the
   card; the score var(--esw-text) on var(--esw-page) (dark 13.6:1, feed
   14.6:1); the small words var(--esw-muted). The live dot is the site's red. */
.esw .esw-banner {
    display: grid;
    /* country · switch | search | score | opponent — the score beside the opponent (Kamal, 2026-09-22) */
    grid-template-columns: minmax(0, auto) minmax(90px, 1fr) auto minmax(0, auto);
    align-items: center;
    gap: 12px;
    padding: 6px 14px;
    margin: 0 0 8px;
    border: 1px solid var(--esw-border);
    border-radius: 10px;
    background: linear-gradient(90deg, rgba(240, 192, 64, 0.10), transparent 30%, transparent 70%, rgba(220, 38, 38, 0.10));
}
.esw .esw-bteam { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 900; font-size: 1.2rem; color: var(--esw-text); }
.esw .esw-bteam.r { justify-content: flex-end; text-align: right; }
.esw .esw-bflag { font-size: 1.9rem; line-height: 1; flex: 0 0 auto; }
.esw .esw-bname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.15; }
.esw .esw-bsec { flex: 0 0 auto; font-size: 0.7rem; font-weight: 700; color: var(--esw-muted); letter-spacing: 0.04em; text-transform: uppercase; }
/*  The country list (Kamal, 2026-09-20), standing where the home name is: the
    name in the row's own bold, a pill with the browser's arrow so it reads as a
    list. Text var(--esw-text) on var(--esw-page) (dark 13.6:1, feed 14.6:1);
    its options take the card's pair. */
.esw .esw-team {
    /* 185px on a laptop (Kamal, 2026-09-22): a longer name is cut short in the box and read in full in the open list, which is as wide as it needs */
    appearance: auto; flex: 0 0 185px; width: 185px; max-width: 100%; min-width: 0; text-overflow: ellipsis; border: 1px solid var(--esw-border); background: var(--esw-page); color: var(--esw-text);
    border-radius: 8px; padding: 0 6px; margin: 0; font: inherit; font-weight: 800; font-size: 0.95rem; line-height: 1.55; cursor: pointer;
}
/* the list and the box share one font, so the box is exactly as wide as the longest name (Kamal, 2026-09-22) */
.esw .esw-team option { background: var(--esw-card); color: var(--esw-text); font-size: 0.95rem; font-weight: 800; }
.esw .esw-team:hover { border-color: var(--esw-accent); }
.esw .esw-team:focus-visible { outline: 2px solid var(--esw-accent); outline-offset: 1px; }
/*  The category switch under the country: Open | Women as one segmented pill,
    the chosen one in the accent with white text (#fff on #6366f1 = 4.5:1; on
    the feed's #4f46e5 = 7.0:1), the others var(--esw-muted) on the row. */
.esw .esw-secs { display: inline-flex; flex: 0 0 auto; border: 1px solid var(--esw-border); border-radius: 999px; overflow: hidden; }
.esw .esw-sec {
    appearance: none; border: 0; background: transparent; color: var(--esw-muted); font: inherit;
    font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.6;
    padding: 0 8px; cursor: pointer;
}
.esw .esw-sec + .esw-sec { border-inline-start: 1px solid var(--esw-border); }
.esw .esw-sec:hover { background: var(--esw-hover); color: var(--esw-text); }
.esw .esw-sec.on, .esw .esw-sec.on:hover { background: var(--esw-accent); color: #fff; }
.esw .esw-sec:focus-visible { outline: 2px solid var(--esw-accent); outline-offset: -2px; }
/*  One line (Kamal, 2026-09-20): "2 – 2 · ● Live · 4 boards playing" — the state
    beside the score, not under it. The boards part is dropped on a phone. */
.esw .esw-bscore {
    display: inline-flex; align-items: center; gap: 8px; font-size: 1.7rem; font-weight: 900; line-height: 1.5; font-variant-numeric: tabular-nums;
    color: var(--esw-text); background: var(--esw-page); border: 1px solid var(--esw-border); border-radius: 10px; padding: 0 16px; white-space: nowrap;
}
.esw .esw-bscore small { display: inline; font-size: 0.7rem; font-weight: 700; line-height: 1; color: var(--esw-muted); letter-spacing: 0.04em; white-space: nowrap; }
.esw .esw-bscore small:empty { display: none; }
.esw .esw-bscore small:not(:empty)::before { content: "·"; margin-inline-end: 8px; color: var(--esw-muted); font-weight: 900; }
.esw .esw-bscore small.live { color: var(--esw-text); }
.esw .esw-blink { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #dc2626; margin-inline-end: 5px; vertical-align: 1px; animation: esw-pulse 1.6s ease-in-out infinite; }

/* ----- the player search (Kamal, 2026-09-22) -----
   A round box in the middle of the row, the country list's pair: text
   var(--esw-text) on var(--esw-page) with the row border, the accent border
   when focused; the placeholder var(--esw-muted). The list under it takes the
   card's pair, a row under the pointer the hover tint. On a phone the row
   holds a magnifier; "searching" turns the row into the box with an ✕. */
.esw .esw-bsearch { position: relative; min-width: 0; display: flex; justify-content: center; align-items: center; }
.esw .esw-sbox { position: relative; display: flex; align-items: center; gap: 6px; width: 100%; max-width: 230px; min-width: 0; }
.esw .esw-sbox > .bi-search { position: absolute; inset-inline-start: 10px; top: 50%; transform: translateY(-50%); color: var(--esw-muted); font-size: 0.8rem; pointer-events: none; }
.esw .esw-search {
    appearance: none; width: 100%; min-width: 0; border: 1px solid var(--esw-border); background: var(--esw-page); color: var(--esw-text);
    border-radius: 999px; padding: 2px 12px 2px 30px; margin: 0; font: inherit; font-size: 0.85rem; font-weight: 600; line-height: 1.5;
}
[dir="rtl"] .esw .esw-search { padding: 2px 30px 2px 12px; }
.esw .esw-search::placeholder { color: var(--esw-muted); opacity: 1; }
.esw .esw-sbox.has-value .esw-search { padding-inline-end: 28px; }
.esw .esw-sclear {
    display: none; position: absolute; inset-inline-end: 8px; top: 50%; transform: translateY(-50%);
    width: 17px; height: 17px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
    background: var(--esw-muted); color: var(--esw-page); font-size: 0.95rem; line-height: 1;
    align-items: center; justify-content: center;
}
.esw .esw-sbox.has-value .esw-sclear { display: inline-flex; }
.esw .esw-sclear:hover { background: var(--esw-text); }
.esw .esw-sclear:focus-visible { outline: 2px solid var(--esw-accent); outline-offset: 1px; }
.esw .esw-search:hover { border-color: var(--esw-accent); }
.esw .esw-search:focus { outline: none; border-color: var(--esw-accent); box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.25); }
.esw .esw-sbtn, .esw .esw-sx {
    display: none; align-items: center; justify-content: center; flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
    border: 1px solid var(--esw-border); background: var(--esw-page); color: var(--esw-text); font-size: 0.85rem; cursor: pointer; padding: 0;
}
.esw .esw-sbtn:hover, .esw .esw-sx:hover { border-color: var(--esw-accent); color: var(--esw-accent); }
.esw .esw-sbtn:focus-visible, .esw .esw-sx:focus-visible { outline: 2px solid var(--esw-accent); outline-offset: 1px; }
.esw .esw-slist {
    position: absolute; top: 100%; left: 50%; transform: translateX(-50%); z-index: 30; margin-top: 4px; padding: 4px;
    width: max-content; min-width: 240px; max-width: min(340px, 92vw); max-height: 280px; overflow-y: auto;
    background: var(--esw-card); color: var(--esw-text); border: 1px solid var(--esw-border); border-radius: 8px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
    text-align: start; font-weight: 500;
}
.esw .esw-srow {
    display: flex; align-items: center; gap: 8px; width: 100%; padding: 4px 8px; border: 0; border-radius: 6px;
    background: transparent; color: var(--esw-text); font: inherit; font-size: 0.84rem; line-height: 1.3; text-align: start; cursor: pointer;
}
.esw .esw-srow:hover, .esw .esw-srow:focus-visible { background: var(--esw-hover); color: var(--esw-text); outline: none; }
.esw .esw-sflag { flex: 0 0 auto; font-size: 1.1rem; line-height: 1; }
.esw .esw-sname { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.esw .esw-sname b { font-weight: 800; }
.esw .esw-sname small { color: var(--esw-muted); font-size: 0.74rem; }
.esw .esw-scount { flex: 0 0 auto; color: var(--esw-muted); font-size: 0.74rem; font-variant-numeric: tabular-nums; }
.esw .esw-snone { padding: 6px 10px; color: var(--esw-muted); font-size: 0.82rem; }
.esw .esw-banner.esw-banner-s { grid-template-columns: minmax(0, 1fr); }
/* the line over a player's games: name, team, the count, ✕ back to the match */
.esw .esw-phead {
    display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0 0 6px; padding: 3px 10px;
    border: 1px solid var(--esw-border); border-radius: 8px; background: var(--esw-page); color: var(--esw-text); font-weight: 900; font-size: 1rem;
}
.esw .esw-phead .esw-bflag { font-size: 1.4rem; }
.esw .esw-pname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.esw .esw-phead small { color: var(--esw-muted); font-size: 0.74rem; font-weight: 700; white-space: nowrap; }
.esw .esw-pclose {
    margin-inline-start: auto; flex: 0 0 auto; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--esw-border); border-radius: 50%; background: transparent; color: var(--esw-muted); font-size: 0.8rem; cursor: pointer; padding: 0;
}
.esw .esw-pclose:hover { color: var(--esw-text); border-color: var(--esw-accent); }
.esw .esw-pclose:focus-visible { outline: 2px solid var(--esw-accent); outline-offset: 1px; }
/* the round over a searched player's board */
.esw .esw-cap { font-size: 0.64rem; font-weight: 700; color: var(--esw-muted); text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }
.esw .esw-card.is-live .esw-cap { padding-inline-end: 44px; }

/* ----- the boards: they share the width, never a scrollbar ----- */
.esw .esw-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 6px;
    align-content: start;
}
.esw .esw-card { max-width: 280px; }   /* one lone board does not become a picture */
.esw .esw-card {
    background: var(--esw-page);
    border: 1px solid var(--esw-border);
    border-radius: 8px;
    padding: 5px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    text-align: left;
    color: var(--esw-text);
    font: inherit;
    appearance: none;
    container-type: inline-size;   /* a narrow card drops the rating so the name keeps its room */
}
@container (max-width: 150px) {
    .esw-elo { display: none; }
}
.esw .esw-card:hover { border-color: var(--esw-accent); }
.esw .esw-card:focus-visible { outline: 2px solid var(--esw-accent); outline-offset: 1px; }
.esw .esw-board { width: 100%; }
.esw .esw-board .elbe-board { border-radius: 4px; box-shadow: none; }
.esw .esw-side {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.76rem;
    line-height: 1.2;
    min-width: 0;
    color: var(--esw-text);
}
.esw .esw-dot {
    width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto;
    border: 1px solid rgba(148, 163, 184, 0.6);
}
.esw .esw-dot.w { background: #f8fafc; border-color: rgba(15, 23, 42, 0.5); }
.esw .esw-dot.b { background: #0b1020; border-color: rgba(255, 255, 255, 0.7); }   /* a clear dark disc, not an empty ring, on the dark card */
.esw .esw-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; }
.esw .esw-elo { color: var(--esw-muted); font-size: 0.7rem; flex: 0 0 auto; }
.esw .esw-pt {
    flex: 0 0 auto;
    font-weight: 800;
    font-size: 0.78rem;
    min-width: 1.4em;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.esw .esw-pt.win { color: #34d399; }        /* on dark card #0f172a 8.6:1; on light #f8fafc 2.6:1 — large bold, backed by the score */
.esw .esw-pt.loss { color: var(--esw-muted); }
.esw .esw-note { color: var(--esw-muted); font-size: 0.7rem; text-align: center; }

/* Light member themes: the green needs more ink on a pale card */
body[data-on-light="true"] .esw .esw-pt.win,
.theme-light .esw .esw-pt.win, .theme-cloud .esw .esw-pt.win,
.theme-mint .esw .esw-pt.win, .theme-pearl .esw .esw-pt.win { color: #047857; }   /* on #f8fafc 5.5:1 */

/* ----- phones: edge to edge, seams not gutters, two boards per row ----- */
@media (max-width: 768px) {
    .esw {
        border-radius: 0;
        border-left: 0;
        border-right: 0;
        padding: 6px 4px 8px;
        margin: 0 0 3px;
    }
    .esw .esw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
    .esw .esw-banner { gap: 8px; padding: 4px 8px; margin-bottom: 6px; }
    .esw .esw-bteam { font-size: 0.95rem; gap: 6px; }
    .esw .esw-bflag { font-size: 1.4rem; }
    .esw .esw-team { font-size: 0.9rem; padding: 0 4px; border-radius: 6px; }
    .esw .esw-sec { font-size: 0.58rem; padding: 0 4px; }
    .esw .esw-bscore { font-size: 1rem; padding: 0 5px; gap: 4px; }
    /* the state shrinks to the red dot: the words go (the round tab and the boards say "live" too) */
    .esw .esw-bscore small::before { content: none; }
    .esw .esw-bscore small.done, .esw .esw-bw, .esw .esw-bb { display: none; }
    .esw .esw-blink { margin-inline-end: 0; }
    /* the search: a magnifier in the row; tapped, the row becomes the box.
       The row is a flex line here: the country cell gives way first (its list shrinks
       to a floor, never to nothing), the opponent's name last, with an ellipsis */
    .esw .esw-banner { display: flex; align-items: center; gap: 6px; }
    .esw .esw-bteam { flex: 1 3 auto; min-width: 0; }
    .esw .esw-bteam.r { flex: 0 1 auto; min-width: 48px; }
    .esw .esw-bsearch, .esw .esw-bscore { flex: 0 0 auto; }
    .esw .esw-team { flex: 1 1 auto; width: auto; min-width: 48px; }
    .esw .esw-sbox { display: none; }
    .esw .esw-sbtn { display: inline-flex; width: 26px; height: 26px; }
    .esw .esw-banner.searching .esw-bsearch, .esw .esw-banner.esw-banner-s .esw-bsearch { flex: 1 1 auto; }
    .esw .esw-banner.searching > :not(.esw-bsearch) { display: none; }
    .esw .esw-banner.searching .esw-sbtn { display: none; }
    .esw .esw-banner.searching .esw-sbox { display: flex; max-width: none; }
    .esw .esw-banner.searching .esw-sx { display: inline-flex; }
    .esw .esw-banner.searching .esw-sclear { inset-inline-end: 42px; }   /* clear of the ✕ that closes the box */
    .esw .esw-banner.esw-banner-s .esw-sbox { display: flex; max-width: none; }
    .esw .esw-banner.esw-banner-s .esw-sbtn { display: none; }
    .esw .esw-phead { font-size: 0.9rem; padding: 3px 8px; gap: 6px; }
    .esw .esw-head { flex-wrap: wrap; }
    .esw .esw-tabwrap { margin-inline-start: 0; flex: 1 1 0; min-width: 0; }
    .esw .esw-tarr { display: none; }   /* a finger swipes the row; the arrows would eat its room */
    .esw .esw-next { font-size: 0.78rem; padding: 1px 8px; }
    .esw .esw-now { display: none; }   /* the tabs say it on a phone */
    /* The name stays on one line and is shrunk by the script until it fits (Kamal, 2026-09-18) */
    .esw .esw-title { font-size: 0.95rem; max-width: 100%; overflow: hidden; }
}
/* Inside the public mobile landing the section sits between the hero and the feature strip */
.mp-landing .esw { margin-bottom: 0; }

/* ----- inside the dashboard feed column (laptop): the post box's own look -----
   The feed is always light whatever the theme, so this palette is fixed too:
   text #1e293b on #fff = 14.6:1; muted #64748b on #fff = 4.8:1; tab text
   #1e293b on #e2e8f0 = 11.9:1; game card #f8fafc with border #cbd5e1 on #fff;
   green #047857 on #f8fafc = 5.5:1. */
.esw.esw-feed {
    --esw-card: #fff;
    --esw-page: #f8fafc;
    --esw-text: #1e293b;
    --esw-muted: #64748b;
    --esw-border: #cbd5e1;
    --esw-accent: #4f46e5;
    --esw-tab: #e2e8f0;
    --esw-tab-text: #1e293b;
    --esw-hover: #f1f5f9;
    border: 1px solid #a8bcd0;
    border-radius: var(--bs-card-border-radius, 0.375rem);
    margin-bottom: 1rem;
}
.esw.esw-feed .esw-pt.win { color: #047857; }
.esw.esw-feed .esw-dot.b { border-color: rgba(15, 23, 42, 0.35); }
.esw.esw-feed .esw-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }   /* the four boards of a match fill the column, no empty slot */
.esw.esw-feed .esw-head { flex-wrap: wrap; }
.esw.esw-feed .esw-tabwrap { margin-inline-start: 0; flex: 1 1 0; min-width: 0; }
.esw.esw-feed .esw-banner { padding: 4px 10px; }
.esw.esw-feed .esw-bteam { font-size: 1rem; }
.esw.esw-feed .esw-bflag { font-size: 1.5rem; }
.esw.esw-feed .esw-team { font-size: 0.95rem; }
.esw.esw-feed .esw-bscore { font-size: 1.3rem; padding: 0 10px; }

/* ----- live (Kamal, 2026-09-18) -----
   A round being played: the day's tab and each running board carry a red
   "live" word (white on #dc2626 = 4.5:1, the same on every surface), the
   clocks sit beside the ratings and the side to move is the brighter one.
   Above the boards, before a round, one line counts down to it. */
.esw .esw-tab.is-live::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #dc2626; margin-inline-end: 6px; align-self: center; animation: esw-pulse 1.6s ease-in-out infinite; }
.esw .esw-card { position: relative; }
.esw .esw-card.is-live { border-color: rgba(220, 38, 38, 0.6); }
.esw .esw-live {
    position: absolute; top: 4px; inset-inline-end: 6px; z-index: 2;
    background: #dc2626; color: #fff; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
    border-radius: 999px; padding: 1px 7px; animation: esw-pulse 1.6s ease-in-out infinite;
}
.esw .esw-clk { flex: 0 0 auto; font-size: 0.72rem; font-variant-numeric: tabular-nums; color: var(--esw-muted); }
.esw .esw-clk.on { color: var(--esw-text); font-weight: 700; }
.esw .esw-clk:empty { display: none; }
@keyframes esw-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

.esw .esw-next {
    display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
    padding: 2px 10px; border-radius: 999px;
    background: var(--esw-page); border: 1px solid var(--esw-border);
    font-size: 0.82rem; line-height: 1.5; color: var(--esw-text); white-space: nowrap;
}
.esw .esw-next[hidden] { display: none; }
.esw .esw-bteam .esw-next { margin-inline-start: 6px; }   /* a breath after the switch; the search cell follows at the grid gap */
.esw .esw-banner-s[hidden] { display: none; }
.esw .esw-next i { color: #dc2626; }
.esw .esw-next b { color: #f0c040; }
.esw.esw-feed .esw-next b { color: #b8860b; }   /* gold on the white panel needs the darker shade: 4.6:1 */
@media (max-width: 768px) {
    .esw .esw-live { font-size: 0.6rem; }
}