/* ==========================================================================
   SOUTH TYNESIDE SWIM TEAM – live results theme
   Matches the printed programme, start lists and results.
   Works on the pages exactly as the results software generates them;
   club-highlight.js adds the finishing touches (medals, pills, headings).
   ========================================================================== */

@font-face { font-family: 'Poppins'; font-weight: 300; src: url('./FONTS/Poppins-Light.woff') format('woff'); font-display: swap; }
@font-face { font-family: 'Poppins'; font-weight: 500; src: url('./FONTS/Poppins-Medium.woff') format('woff'); font-display: swap; }
@font-face { font-family: 'Poppins'; font-weight: 700; src: url('./FONTS/Poppins-Bold.woff') format('woff'); font-display: swap; }
@font-face { font-family: 'Carlito'; font-weight: 400; src: url('./FONTS/Carlito-Regular.woff') format('woff'); font-display: swap; }
@font-face { font-family: 'Carlito'; font-weight: 700; src: url('./FONTS/Carlito-Bold.woff') format('woff'); font-display: swap; }
@font-face { font-family: 'Carlito'; font-style: italic; src: url('./FONTS/Carlito-Italic.woff') format('woff'); font-display: swap; }

:root {
    --navy: #000067;
    --navy-2: #1a1a8a;
    --navy-soft: #2b2f8a;
    --tint: #e8eaf6;
    --zebra: #f5f6fb;
    --rule: #c9cce3;
    --grey: #5a5d78;
    --ink: #1b1d3a;
    --bg: #f1f2f8;
    --card: #ffffff;
    --gold: #c9a227;
    --silver: #a7adb8;
    --bronze: #b8773a;
    --highlight: #fff4cc;
    --highlight-edge: #e0b63a;
    --display: 'Poppins', 'Segoe UI', Arial, sans-serif;
    --body: 'Carlito', 'Calibri', 'Segoe UI', Arial, sans-serif;
    --radius: 10px;
    --shadow: 0 1px 2px rgba(0, 0, 103, 0.06), 0 4px 14px rgba(0, 0, 103, 0.06);

    /* names used by older page scripts – kept so they still work */
    --primary: var(--navy);
    --primary-light: var(--navy-2);
    --text: var(--ink);
    --border: var(--rule);
}

* { box-sizing: border-box; }

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

body {
    margin: 0;
    padding: 12px 14px 28px;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--body);
    font-size: 14px;
    line-height: 1.35;
}

a { color: var(--navy); font-weight: 700; text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, select:focus-visible { outline: 3px solid rgba(0, 0, 103, 0.35); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   Headings
   -------------------------------------------------------------------------- */
h1, h2 {
    font-family: var(--display);
    font-weight: 700;
    color: var(--navy);
    text-align: center;
    letter-spacing: 0.3px;
    margin: 10px 0;
}
h1 { font-size: 22px; }
h2 { font-size: 17px; }

/* Plain h3 as generated (event titles, age groups). The script upgrades
   these to the event header / age-group bar; this is the fallback. */
div[align="center"] { text-align: left; }
h3 {
    display: block;
    margin: 18px 0 8px;
    padding: 8px 12px;
    font-family: var(--display);
    font-size: 14px;
    font-weight: 700;
    color: var(--navy);
    background: var(--tint);
    border-left: 3px solid var(--navy);
    border-radius: 3px;
    text-align: left;
}
h5 { font-family: var(--body); font-weight: 400; color: var(--grey); text-align: center; }

/* --------------------------------------------------------------------------
   Tables – the software's t2 / t1 / t4 classes
   -------------------------------------------------------------------------- */
table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    margin: 0 0 6px;
    background: var(--card);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
}

td {
    padding: 6px 8px;
    font-size: 14px;
    white-space: nowrap;
    border: 0;
    vertical-align: middle;
}

/* column headings: small grey capitals, like the printed results */
.t2 {
    background: var(--card);
    color: var(--grey);
    font-family: var(--body);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding: 8px 8px 5px;
    border-bottom: 1.5px solid var(--navy);
    text-align: left;
}

.t1_left, .t4_left { text-align: left; }
.t1_centre, .t4_centre { text-align: center; }
.t1_right, .t4_right { text-align: right; font-variant-numeric: tabular-nums; }

.t1_left, .t1_centre, .t1_right, .t1_split { background: var(--card); }
.t4_left, .t4_centre, .t4_right, .t4_split { background: var(--zebra); }

tr:hover > td:not(.t2) { background: var(--tint); }

/* distance-event split rows */
.t1_split, .t4_split {
    font-size: 12px;
    color: var(--navy);
    padding-top: 1px;
    padding-bottom: 1px;
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Enhancements added by club-highlight.js
   -------------------------------------------------------------------------- */

/* event header – same as the printed documents */
.st-event {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 6px 0 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--navy);
}
.st-event-num {
    flex: 0 0 auto;
    min-width: 58px;
    padding: 5px 8px 6px;
    background: var(--navy);
    color: #fff;
    border-radius: 6px;
    text-align: center;
    font-family: var(--display);
    line-height: 1.05;
}
.st-event-num small { display: block; font-size: 9px; font-weight: 300; letter-spacing: 1px; }
.st-event-num b { display: block; font-size: 19px; font-weight: 700; }
.st-event-text { min-width: 0; }
.st-event-race { font-family: var(--display); font-weight: 700; font-size: 21px; color: var(--navy); line-height: 1.15; }
.st-event-sub { font-family: var(--display); font-weight: 500; font-size: 12px; color: var(--grey); margin-top: 2px; }
.st-event-kind {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    border: 1px solid var(--navy);
    border-radius: 999px;
    color: var(--navy);
    font-size: 10.5px;
    font-weight: 500;
    vertical-align: 1px;
}

/* start list <-> results switch in the event header */
.st-switch {
    display: inline-flex; margin-left: 8px; vertical-align: 1px;
    border: 1.2px solid var(--navy); border-radius: 999px; overflow: hidden;
}
.st-seg {
    display: inline-block; padding: 2px 10px; font-family: var(--display); font-weight: 500;
    font-size: 11px; line-height: 1.5; color: var(--navy); background: #fff; white-space: nowrap;
}
.st-seg + .st-seg { border-left: 1.2px solid var(--navy); }
a.st-seg:hover { background: var(--tint); text-decoration: none; }
.st-seg.is-on { background: var(--navy); color: #fff; }
.st-seg.is-off { color: #aab0c8; cursor: default; }
a.st-seg.is-off:hover { background: #fff; }
/* green light: results published */
.st-live-dot {
    display: none; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; vertical-align: 1px;
    background: #2ecc71; box-shadow: 0 0 0 2px rgba(46, 204, 113, 0.28);
}
.st-seg.is-live .st-live-dot, .st-note-live .st-live-dot { display: inline-block; }
.st-seg.is-on.is-live .st-live-dot { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35); }
.st-ev-links a.st-res.st-published::before {
    content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 5px;
    vertical-align: 1px; background: #2ecc71; box-shadow: 0 0 0 2px rgba(46, 204, 113, 0.35);
}

/* age group bar */
h3.st-group {
    margin: 16px 0 0;
    padding: 7px 12px 7px 14px;
    font-size: 14px;
    background: var(--tint);
    border-left: 0;
    box-shadow: inset 3px 0 0 var(--navy);
    /* square top-left so the navy accent runs straight, as in the printed results */
    border-radius: 0 var(--radius) 0 0;
}
h3.st-group + .st-scroll,
.st-scroll.st-after-group { border-top-left-radius: 0; border-top-right-radius: 0; }
h3.st-group + table,
div.st-group-wrap + table { border-top-left-radius: 0; border-top-right-radius: 0; }

/* start-list heat heading row */
td.st-heat {
    background: var(--navy) !important;
    color: #fff;
    font-family: var(--display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border-bottom: 0;
    padding: 7px 12px;
}

/* place markers */
.st-medal, .st-to {
    display: inline-flex;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-family: var(--display);
    font-size: 11px;
    font-weight: 700;
    color: #fff;
}
.st-medal.m1 { background: var(--gold); }
.st-medal.m2 { background: var(--silver); }
.st-medal.m3 { background: var(--bronze); }
.st-place { font-weight: 700; color: var(--navy); }
.st-to { background: transparent; color: var(--navy); border: 1.5px solid var(--navy); font-size: 9.5px; }
.st-to-pill.st-to-pill-quiet { background: transparent; color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
.st-to-pill {
    display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
    background: var(--navy); color: #fff; font-family: var(--display); font-weight: 500;
    font-size: 10px; letter-spacing: 0.2px; vertical-align: 1px; white-space: nowrap;
}

/* DQ / DNC / DNS / WDR tags */
.st-status {
    display: inline-block;
    min-width: 34px;
    padding: 1px 7px;
    border: 1.2px solid var(--navy);
    border-radius: 5px;
    color: var(--navy);
    font-weight: 700;
    font-size: 11.5px;
    text-align: center;
    letter-spacing: 0.4px;
}

.st-time { font-weight: 700; color: var(--navy); }
.st-rt, .st-dim { color: var(--grey); font-size: 12.5px; }
.st-lane { color: var(--grey); font-weight: 700; }
.st-club-sub { display: none; }

/* split grid for distance events: "50m 34.29" */
.st-split-d { color: var(--grey); font-size: 10.5px; margin-right: 6px; }
.st-split-t { color: var(--navy); }
tr.st-laps td { color: var(--grey); font-style: italic; padding-bottom: 4px; }
tr.st-laps + tr:not(.st-split) td,
tr.st-split-first td { border-top: 0; }

/* fixed, shared column widths (set by the script) */
table.st-fixed { table-layout: fixed; }
table.st-fixed td { overflow: hidden; text-overflow: ellipsis; }
table.st-result { min-width: 700px; }
table.st-start { min-width: 480px; }
.t2.st-nocase { text-transform: none; }

/* split grid built by the script for 400m / 800m / 1500m */
td.st-splits-cell { padding: 0 8px 6px 44px; white-space: normal; }
.st-splits {
    display: grid;
    grid-template-columns: repeat(8, minmax(74px, 1fr));
    gap: 1px 14px;
    max-width: 860px;
}
.st-sp { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; font-size: 12px; }
.st-sp .st-split-l { flex-basis: 100%; text-align: right; color: var(--grey); font-style: italic; font-size: 11.5px; }
tr.st-has-splits > td { padding-bottom: 2px; }

/* collapsible splits */
tr.st-split { display: none; }
tr.st-split.st-show { display: table-row; }
tr.st-has-splits { cursor: pointer; }
.st-sp-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; margin: 0 6px 0 -2px; padding: 0;
    border-radius: 50%; background: var(--tint); color: var(--navy);
    font-size: 10px; line-height: 1; vertical-align: 1px;
    transition: transform 0.15s ease;
}
.st-sp-btn:hover { background: var(--navy); color: #fff; }
tr.st-open .st-sp-btn { transform: rotate(90deg); background: var(--navy); color: #fff; }
.st-split-all {
    margin-left: auto; align-self: center; flex: 0 0 auto;
    background: #fff; color: var(--navy); box-shadow: inset 0 0 0 1.2px var(--navy);
    font-size: 12px; padding: 5px 12px;
}
.st-split-all:hover { background: var(--tint); }
.st-split-all[aria-pressed="true"] { background: var(--navy); color: #fff; }
td.st-splits-cell { padding-left: 62px; }

/* spacer columns the software leaves empty are hidden by the script */
.st-hide { display: none !important; }

/* wide tables scroll inside their own box on small screens */
.st-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin: 0 0 6px;
    background: var(--card);
}
.st-scroll > table { box-shadow: none; margin: 0; border-radius: 0; }
h3.st-group + .st-scroll { border-top-left-radius: 0; border-top-right-radius: 0; }

/* club highlight */
tr.highlight > td,
tr[data-club-highlight="1"] > td {
    background: var(--highlight) !important;
    font-weight: 700;
}
tr.highlight > td:first-child,
tr[data-club-highlight="1"] > td:first-child { box-shadow: inset 3px 0 0 var(--highlight-edge); }

/* footer / page bits */
.st-footer {
    margin: 22px 0 4px;
    text-align: center;
    font-size: 12px;
    color: var(--grey);
}
.st-ver { color: #aab0c8; }
.st-footer img { width: 28px; height: auto; vertical-align: middle; margin-right: 6px; }
.st-top-link { display: inline-block; margin-top: 8px; font-family: var(--display); font-size: 12px; }

/* buttons & selects */
button {
    font-family: var(--display);
    font-weight: 500;
    font-size: 13px;
    border: 0;
    border-radius: 999px;
    padding: 6px 14px;
    background: var(--navy);
    color: #fff;
    cursor: pointer;
}
button:hover { background: var(--navy-2); }
select {
    font-family: var(--display);
    font-size: 13px;
    color: var(--ink);
    padding: 8px 12px;
    border: 1px solid var(--rule);
    border-radius: 999px;
    background: #fff;
}

/* --------------------------------------------------------------------------
   Small screens
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
    body { padding: 10px 8px 24px; font-size: 13px; }
    td { font-size: 13px; padding: 6px 6px; }
    .t2 { font-size: 10px; }
    .st-event-race { font-size: 18px; }
    .st-event-num b { font-size: 16px; }
    .st-event-num { min-width: 50px; }
    td.st-splits-cell { padding-left: 10px; }
    .st-split-all { font-size: 11px; padding: 4px 9px; }
    .st-switch { display: flex; width: max-content; margin: 5px 0 0; }
    .st-seg { padding: 3px 12px; font-size: 11.5px; }
    .st-event { flex-wrap: wrap; }
    .st-splits { grid-template-columns: repeat(4, minmax(70px, 1fr)); }
}

/* phones: drop reaction times, tighten columns so results fit the screen */
@media (max-width: 600px) {
    table.st-result { min-width: 0; }
    table.st-result:has(col.st-c-split) { min-width: 560px; }
    /* Phones: club (shown under the name) and reaction times are dropped.
       Fixed table layout would still reserve their width in some browsers
       (Safari), so switch to automatic layout, where a column with nothing
       showing takes no room. The page script also removes these columns. */
    table.st-fixed { table-layout: auto; }
    col.st-c-rt, col.st-c-club, td.st-c-rt, td.st-c-club { display: none !important; }
    td.st-c-name { width: 99%; }
    col.st-c-place { width: 40px !important; }
    col.st-c-age, col.st-c-aad { width: 34px !important; }
    .st-club-sub { display: block; font-size: 11.5px; color: var(--grey); font-weight: 400; line-height: 1.15; }
    td.st-c-name { white-space: normal; line-height: 1.2; }
    col.st-c-time { width: 68px !important; }
    col.st-c-wapts { width: 44px !important; }
    col.st-c-split { width: 62px !important; }
    col.st-c-lane { width: 38px !important; }
    table.st-start { min-width: 0; }
    table.st-start col.st-c-time { width: 64px !important; }
    td.st-c-wapts { font-size: 12px; }
    .t2.st-c-wapts, .t2.st-c-place, .t2.st-c-age, .t2.st-c-aad, .t2.st-c-lane { font-size: 0; padding-left: 2px; padding-right: 2px; }
    .t2.st-c-wapts::after { content: 'PTS'; font-size: 10px; }
    .t2.st-c-place::after, .t2.st-c-lane::after { content: '#'; font-size: 11px; }
    .t2.st-c-age::after, .t2.st-c-aad::after { content: 'AGE'; font-size: 9.5px; }
    .st-medal, .st-to { width: 20px; height: 20px; font-size: 10px; }
    td { padding-left: 5px; padding-right: 5px; }
    .st-bar-sub { display: none; }
}

@media print {
    body { background: #fff; padding: 0; }
    table, .st-scroll { box-shadow: none; }
    .st-footer .st-top-link { display: none; }
}

/* ==========================================================================
   Site layout (index.htm) – replaces the old frameset, works on phones
   ========================================================================== */
body.st-shell { padding: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
.st-bar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 16px;
    padding-top: calc(8px + env(safe-area-inset-top, 0px));
    background: var(--navy);
    color: #fff;
    position: relative;
    overflow: hidden;
}
.st-bar img.st-logo { height: 46px; width: auto; }
.st-bar .st-star { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); height: 84px; opacity: 1; pointer-events: none; }
.st-bar-text { min-width: 0; position: relative; }
.st-bar-title { font-family: var(--display); font-weight: 700; font-size: 18px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-bar-sub { font-family: var(--display); font-weight: 300; font-size: 12.5px; color: #c9cce3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-bar-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; position: relative; z-index: 1; }
.st-bar-cog {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255, 255, 255, 0.12); color: #fff;
    box-shadow: inset 0 0 0 1.2px rgba(255, 255, 255, 0.7);
    padding: 6px 12px; font-size: 12.5px;
}
.st-bar-cog:hover { background: rgba(255, 255, 255, 0.25); }
.st-bar-cog svg { width: 17px; height: 17px; }
.st-bar .st-star { right: 150px; }
.st-menu-btn { display: none; margin-left: auto; position: relative; background: #fff; color: var(--navy); font-weight: 700; white-space: nowrap; flex: 0 0 auto; }
.st-menu-btn:hover { background: var(--tint); }
.st-frames { flex: 1 1 auto; display: flex; min-height: 0; }
.st-frames iframe { border: 0; display: block; height: 100%; }
#LeftFrame { width: 360px; flex: 0 0 360px; border-right: 1px solid var(--rule); background: var(--bg); }
#MainFrame { flex: 1 1 auto; width: 100%; background: var(--bg); }

@media (max-width: 820px) {
    .st-menu-btn { display: inline-block; }
    .st-bar-cog { padding: 7px; border-radius: 50%; }
    .st-bar-cog span { display: none; }
    .st-bar img.st-logo { height: 38px; }
    .st-bar .st-star { display: none; }
    .st-bar-title { font-size: 15px; }
    #LeftFrame {
        position: fixed; z-index: 20; left: 0; bottom: 0;
        top: var(--bar-h, 58px);
        width: min(380px, 92vw);
        height: calc(100vh - var(--bar-h, 58px));
        height: calc(100dvh - var(--bar-h, 58px));
        transform: translateX(-102%); transition: transform 0.22s ease;
        box-shadow: 6px 0 24px rgba(0, 0, 40, 0.25);
    }
    body.st-menu-open #LeftFrame { transform: none; }
    .st-scrim { display: none; position: fixed; inset: 0; z-index: 10; background: rgba(0, 0, 40, 0.35); }
    body.st-menu-open .st-scrim { display: block; }
}

/* ==========================================================================
   Menu (before.htm)
   ========================================================================== */
body.st-menu { padding: 12px 12px 24px; }
.st-card {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 12px;
    margin: 0 0 12px;
}
.st-label {
    font-family: var(--display);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--navy);
    margin: 0 0 8px;
}
.st-links { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.st-link {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 10px;
    border: 1px solid var(--rule);
    border-radius: 8px;
    font-family: var(--display); font-weight: 500; font-size: 12.5px;
    color: var(--navy);
    background: #fff;
}
.st-link:hover { background: var(--tint); text-decoration: none; }
.st-links > .st-link:nth-child(n+4),   /* document links (Draft Programme ...) */
.st-link.st-doc { grid-column: 1 / -1; }
.st-link.st-live { grid-column: 1 / -1; background: var(--navy); color: #fff; border-color: var(--navy); justify-content: center; }
.st-link.st-live:hover { background: var(--navy-2); }
.st-dot { width: 8px; height: 8px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 0 3px rgba(61, 220, 132, 0.25); }
.st-card select { width: 100%; }
.st-hint { font-size: 12px; color: var(--grey); margin-top: 6px; }
.st-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.st-chip {
    background: #fff; color: var(--navy);
    border: 1px solid var(--rule);
    padding: 5px 12px; font-size: 12.5px;
}
.st-chip:hover { background: var(--tint); }
.st-chip.is-active { background: var(--navy); color: #fff; border-color: var(--navy); }

.st-session { margin: 0 0 14px; }
.st-session-head {
    display: flex; align-items: center; justify-content: space-between; gap: 6px 8px; flex-wrap: wrap;
    padding: 10px 12px;
    background: var(--navy);
    color: #fff;
    border-radius: var(--radius) var(--radius) 0 0;
    position: relative; overflow: hidden;
}
.st-session-head img { position: absolute; right: -6px; top: 50%; transform: translateY(-50%); height: 64px; pointer-events: none; }
.st-session-title { font-family: var(--display); font-weight: 700; font-size: 16px; position: relative; }
.st-session-when { font-family: var(--display); font-weight: 300; font-size: 11.5px; color: #dfe1f3; position: relative; white-space: nowrap; }
.st-session-pdfs { display: flex; gap: 6px; position: relative; }
.st-session-pdfs a {
    white-space: nowrap;
    font-family: var(--display); font-weight: 500; font-size: 11px;
    color: #fff; border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 999px; padding: 3px 9px;
}
.st-session-pdfs a:hover { background: rgba(255, 255, 255, 0.15); text-decoration: none; }
.st-events { background: var(--card); border-radius: 0 0 var(--radius) var(--radius); box-shadow: var(--shadow); }
.st-ev { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-top: 1px solid #eef0f7; }
.st-ev:first-child { border-top: 0; }
.st-ev-num {
    flex: 0 0 38px; text-align: center;
    font-family: var(--display); font-weight: 700; font-size: 12.5px; color: var(--navy);
    border: 1px solid var(--navy); border-radius: 5px; padding: 2px 0;
}
.st-ev-text { flex: 1 1 auto; min-width: 0; }
.st-ev-race { font-family: var(--display); font-weight: 500; font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-ev-sub { font-size: 11.5px; color: var(--grey); }
.st-ev-links { display: flex; gap: 4px; flex: 0 0 auto; }
.st-ev-links a, .st-ev-links span {
    font-family: var(--display); font-weight: 500; font-size: 11px;
    padding: 4px 8px; border-radius: 999px; border: 1px solid var(--navy); color: var(--navy);
}
.st-ev-links a.st-res { background: var(--navy); color: #fff; }
.st-ev-links a:hover { text-decoration: none; filter: brightness(1.15); }
.st-ev-links span { border-color: var(--rule); color: #aab0c8; }
.st-ev-links a.st-pending:not(.st-res) { color: #aab0c8; border-color: var(--rule); }
.st-ev-links a.st-res.st-pending { background: #fff; color: #aab0c8; border-color: var(--rule); }
.st-note {
    margin: -4px 0 12px; padding: 9px 12px; border-radius: 8px;
    background: var(--tint); box-shadow: inset 3px 0 0 var(--navy); color: var(--ink); font-size: 13.5px;
}
.st-note b { color: var(--navy); }
.st-note-action { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.st-note-btn {
    display: inline-block; padding: 6px 14px; border-radius: 999px; background: var(--navy); color: #fff;
    font-family: var(--display); font-weight: 500; font-size: 12.5px; white-space: nowrap;
}
.st-note-off { font-family: var(--display); font-size: 12px; color: var(--grey); white-space: nowrap; }
.st-note-btn:hover { background: var(--navy-2); text-decoration: none; }
.st-menu-foot { text-align: center; color: var(--grey); font-size: 11.5px; margin-top: 18px; }

/* ==========================================================================
   Home page (main.htm)
   ========================================================================== */
body.st-home { padding: 0 0 30px; }
.st-hero {
    position: relative; overflow: hidden;
    background: var(--navy); color: #fff;
    padding: 28px 28px 30px;
}
.st-hero img.st-hero-logo { height: 110px; width: auto; display: block; margin-bottom: 14px; }
.st-hero img.st-hero-star { position: absolute; right: -30px; bottom: -40px; height: 240px; pointer-events: none; }
.st-hero-kicker { font-family: var(--display); font-weight: 300; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: #c9cce3; position: relative; }
.st-hero-title { font-family: var(--display); font-weight: 700; font-size: 30px; line-height: 1.1; margin: 4px 0; position: relative; }
.st-hero-dates { font-family: var(--display); font-weight: 500; font-size: 14px; position: relative; }
.st-hero-venue { font-family: var(--display); font-weight: 300; font-size: 13px; color: #dfe1f3; position: relative; }
.st-wrap { max-width: 900px; margin: 0 auto; padding: 18px 18px 0; }
.st-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-bottom: 18px; }
.st-tile {
    display: block; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
    padding: 14px 16px; color: var(--navy);
}
.st-tile:hover { text-decoration: none; box-shadow: 0 0 0 2px var(--navy), var(--shadow); }
.st-tile b { display: block; font-family: var(--display); font-size: 15px; }
.st-tile span { display: block; font-family: var(--body); font-weight: 400; color: var(--grey); font-size: 13px; margin-top: 2px; }
.st-sched td { font-size: 14px; }
.st-h2 { font-family: var(--display); font-weight: 700; font-size: 16px; color: var(--navy); margin: 8px 0 8px; text-align: left; }

/* ==========================================================================
   Live results (lastresult.htm) and warm-up (warmup.htm)
   ========================================================================== */
.st-live-card { max-width: 820px; margin: 0 auto 16px; }
.st-live-title { font-family: var(--display); font-weight: 700; font-size: 17px; color: var(--navy); margin: 0 0 2px; }
.st-live-sub { font-size: 12.5px; color: var(--grey); margin: 0 0 10px; display: flex; align-items: center; gap: 6px; }
.st-waiting { max-width: 820px; margin: 30px auto; text-align: center; }
.st-waiting b { display: block; font-family: var(--display); color: var(--navy); font-size: 16px; margin-bottom: 4px; }

.st-pill {
    display: inline-block; margin: 2px 4px 2px 0; padding: 3px 10px; border-radius: 999px;
    font-family: var(--display); font-weight: 500; font-size: 12px;
}
.st-pill.male { background: var(--navy); color: #fff; }
.st-pill.female { background: var(--tint); color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
.st-pill.open { background: #fff; color: var(--grey); box-shadow: inset 0 0 0 1px var(--rule); }
.st-warm-start {
    font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--navy); text-align: center;
}
table.st-warm td { white-space: normal; }

/* ==========================================================================
   Settings (cog) – text size and dialog
   ========================================================================== */
html.st-large body { zoom: 1.15; }
html.st-large body.st-shell { zoom: 1; }   /* the frames zoom their own pages */
@supports not (zoom: 1) { html.st-large { font-size: 115%; } }

.st-cog {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; font-size: 12.5px;
    background: #fff; color: var(--navy); box-shadow: inset 0 0 0 1.2px var(--navy);
}
.st-cog:hover { background: var(--tint); }
.st-cog svg { width: 16px; height: 16px; flex: 0 0 auto; }
.st-cog.st-cog-icon { padding: 5px; border-radius: 50%; }
.st-hero .st-cog { position: absolute; top: 16px; right: 16px; z-index: 2; }
.st-label-row { display: flex; align-items: center; justify-content: space-between; margin: 0 0 8px; }
.st-label-row .st-label { margin: 0; }

.st-dialog {
    font-family: var(--body); font-size: 14px;   /* lives outside <body>, so set the font here */
    border: 0; border-radius: 14px; padding: 0; width: min(380px, 92vw);
    box-shadow: 0 20px 60px rgba(0, 0, 40, 0.35); color: var(--ink);
}
.st-dialog::backdrop { background: rgba(0, 0, 40, 0.45); }
.st-dialog-body { padding: 0 16px 14px; margin: 0; }
.st-dialog-head {
    display: flex; align-items: center; justify-content: space-between;
    margin: 0 -16px 12px; padding: 12px 16px; background: var(--navy); color: #fff;
}
.st-dialog-title { font-family: var(--display); font-weight: 700; font-size: 16px; }
.st-dialog-x { background: transparent; color: #fff; font-size: 22px; line-height: 1; padding: 0 4px; }
.st-dialog-x:hover { background: rgba(255, 255, 255, 0.15); }
.st-set { margin: 0 0 14px; }
.st-set select { width: 100%; }
.st-opts { display: flex; gap: 8px; }
.st-opt { flex: 1 1 0; position: relative; cursor: pointer; }
.st-opt input { position: absolute; opacity: 0; pointer-events: none; }
.st-opt span {
    display: block; text-align: center; padding: 8px 10px; border-radius: 999px;
    border: 1px solid var(--rule); font-family: var(--display); font-weight: 500; font-size: 13px; color: var(--navy);
}
.st-opt input:checked + span { background: var(--navy); color: #fff; border-color: var(--navy); }
.st-opt input:focus-visible + span { outline: 3px solid rgba(0, 0, 103, 0.35); outline-offset: 2px; }
.st-dialog-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 4px; }
.st-reset { background: #fff; color: var(--grey); box-shadow: inset 0 0 0 1px var(--rule); }
.st-reset:hover { background: var(--tint); }
.st-dialog .st-hint { text-align: center; margin-top: 10px; }

/* live results: heats mix age groups, so places are plain numbers, not medals */
body[data-st-page="live"] .st-medal { background: transparent; color: var(--navy); font-size: 13px; width: auto; }

/* phones: "Open events here" bubble pointing at the Events button */
.st-coach {
    position: fixed; z-index: 30; pointer-events: none;
    background: var(--navy); color: #fff; border-radius: 10px;
    padding: 8px 12px; font-family: var(--display); font-weight: 500; font-size: 13px;
    box-shadow: 0 6px 20px rgba(0, 0, 40, 0.35), 0 0 0 2px #fff;
    opacity: 0; transform: translateY(6px); transition: opacity 0.35s ease, transform 0.35s ease;
}
.st-coach::before {
    content: ''; position: absolute; top: -7px; right: var(--arrow-right, 18px);
    width: 14px; height: 14px; background: var(--navy); transform: rotate(45deg);
    box-shadow: -2px -2px 0 0 #fff; border-radius: 2px;
}
.st-coach.is-on { opacity: 1; transform: none; animation: st-bob 1.4s ease-in-out 0.4s 3; }
.st-coach.is-off { opacity: 0; transform: translateY(-4px); animation: none; }
@keyframes st-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .st-coach.is-on { animation: none; } }