/* ==========================================================================
   Cincinnati Christian Cougars — Track & Field
   Quiet editorial: paper, ink, navy brand bar, gold as a rare accent.
   ========================================================================== */

:root {
    /* CCS brand — royal blue + black + white, per cincinnatichristianathletics.org */
    --ccs-blue: #00529A;
    --ccs-blue-700: #003F76;
    --ccs-blue-900: #002B52;
    --ccs-blue-100: #DCE8F3;
    --ccs-black: #0A0A0A;
    --paper: #FFFFFF;
    --paper-2: #F4F6F9;
    --ink: #121A2C;
    --ink-soft: #4C5769;
    --ink-faint: #8E97A8;
    --signal: #C8342B;
    --green-pr: #1F7A4D;
    --cinder: #B5552E;       /* Track-cinder rust — girls section accent */
    --cinder-ink: #8E4424;   /* Darkened cinder for girls text on white (contrast) */
    --accent: #F4B942;       /* Small warm accent for IN/PR callouts only */
    --line: rgba(10, 26, 51, 0.10);
    --line-strong: rgba(10, 26, 51, 0.22);

    /* Back-compat aliases for any code still using the old names */
    --navy-900: var(--ccs-blue-900);
    --navy-800: var(--ccs-blue);
    --navy-700: var(--ccs-blue-700);
    --gold-500: var(--accent);
    --gold-400: #F5C86B;
    --gold-300: #F5D78A;

    --font-display: 'Barlow Condensed', 'Oswald', ui-sans-serif, system-ui, sans-serif;
    --font-body: 'Manrope', ui-sans-serif, system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'Menlo', monospace;

    --radius: 2px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 15.5px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Mobile typography — bump baseline + tight mono labels so the dashboard
   is readable on a phone. The desktop sizes above are tuned for a 1280px
   masthead-bound layout; phones get more generous leading + slightly
   relaxed letter-spacing on uppercase mono so labels don't compress to
   illegibility. */
@media (max-width: 720px) {
    html, body { font-size: 16.5px; line-height: 1.55; }
    .small { font-size: 0.95rem; }
    .overline,
    .section-head .eyebrow { font-size: 0.74rem; letter-spacing: 0.16em; }
    h1 { font-size: clamp(2rem, 7vw, 2.6rem); }
    h2 { font-size: clamp(1.35rem, 5vw, 1.8rem); }
    /* Mono "kicker" labels (key/eyebrow/tally) bump up so 0.55–0.62rem
       desktop sizes don't hit ~9px on a 4-inch phone. The class names below
       are the recurring "k" / "key" patterns across components. */
    .scorecard-k,
    .sb-meta-k,
    .sb-k,
    .ms-k,
    .mc-k,
    .mc-stat-k,
    .scm-k,
    .sb-u,
    .scs-k,
    .rt-k,
    .stat-tile .label,
    .rc-meta,
    /* additional mono kicker/eyebrow/pill labels that otherwise compute to
       8.8–10.5px on a phone (measured live). Keep this list in sync as new
       per-page kicker classes are added. */
    .overline,
    .sched-stage, .sched-hero-label, .sched-group-head, .hero-stage, .hero-countdown,
    .side-eyebrow, .sl-tag, .status-pill, .mc-stage,
    .live-cta-k, .live-watch-title,
    .jh-filter-k, .bucket-lbl, .amod-kicker, .pb-lbl-l, .pb-lbl-m, .pb-lbl-r, .pb-you,
    .sp-section-k, .sp-kind, .sp-event-gender, .spark-k, .ahs-k { font-size: 0.78rem; letter-spacing: 0.1em; }
    /* Roster card name reads as the primary headline on small screens. */
    .rc-name { font-size: 1.15rem; }
    .rc-best-event { font-size: 0.92rem; }
    .rc-best-mark  { font-size: 1rem; }
}
@media (max-width: 480px) {
    html, body { font-size: 17px; }
}

/* --- Typography --------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: 0.01em;
    line-height: 1;
    margin: 0 0 0.5em;
    color: var(--ink);
    text-transform: uppercase;
}
h1 { font-size: clamp(2.25rem, 4.5vw, 3.5rem); font-weight: 900; letter-spacing: 0.005em; }
h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing: 0.02em; }
h3 { font-size: 1.25rem; letter-spacing: 0.03em; }
h4 { font-size: 1rem; letter-spacing: 0.08em; }

p { margin: 0 0 1em; }
a { color: var(--ccs-blue); text-decoration: none; border-bottom: 1px solid transparent; transition: color 0.12s ease, border-color 0.12s ease; }
a:hover { color: var(--ccs-blue-700); border-bottom-color: var(--ccs-blue); }
hr { border: none; border-top: 1px solid var(--line); margin: 1.5rem 0; }

.mono, code, pre, .tabular { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.muted { color: var(--ink-soft); }
.small { font-size: 0.85rem; }

/* Router auto-focus target — keep focus ring off on programmatic focus */
main:focus { outline: none; }

/* --- Page chrome used by content pages --------------------------------- */

.overline {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 0.5rem;
}

.section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin: 2rem 0 1rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid var(--line);
}
.section-head h2 { margin: 0; }
.section-head .eyebrow {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

/* --- Top nav (in masthead) --------------------------------------------- */

.topnav {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.15rem;
    color: var(--paper);
    flex-wrap: wrap;
    row-gap: 0.1rem;
}

/* Public links — plain wordmarks on the masthead. */
.topnav-link {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.7rem;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.72);
    text-decoration: none;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 2px 2px 0 0;
    line-height: 1;
    transition: color 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}
.topnav-link:hover {
    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.08);
    border-bottom-color: rgba(255, 255, 255, 0.5);
}
.topnav-link.active {
    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.12);
    border-bottom-color: #FFFFFF;
    font-weight: 600;
}

.topnav-link-home { letter-spacing: 0.01em; }

/* "Live" gets a small red dot when a meet is in progress today, so the most
   important page on meet day is visibly flagged in the masthead. */
.topnav-link-live { position: relative; }
.topnav-link-live.is-live-today { color: #FFFFFF; }
.topnav-link-live.is-live-today::after {
    content: "";
    position: absolute;
    top: 0.3rem;
    right: 0.25rem;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--signal);
    box-shadow: 0 0 0 2px rgba(200, 52, 43, 0.35);
}

/* HS / JH program toggle — leftmost, prominent. Reads as a "context label"
   for the rest of the dashboard rather than another navigation destination,
   so it gets the gold accent (the only place gold appears in the masthead)
   to break out from the white-on-blue link rhythm. */
/* Top-of-page route loading indicator — thin gold strip that fires on every
   navigation. Pinned above all chrome so it shows on the masthead's top edge.
   See Components/Layout/RouteProgress.razor for the state machine. */
.route-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    background: var(--gold-500, #E5A83A);
    z-index: 1100;
    opacity: 0;
    transition: width 0.7s cubic-bezier(0.0, 0.6, 0.4, 1.0), opacity 0.25s ease;
    pointer-events: none;
    box-shadow: 0 0 8px rgba(229, 168, 58, 0.55);
}
.route-progress.is-active {
    width: 70%;
    opacity: 1;
    /* The active phase grows quickly to 70% then holds — completion comes
       from MainLayout calling FinishAsync after the new page paints. */
}
.route-progress.is-done {
    width: 100%;
    opacity: 1;
    transition: width 0.18s ease, opacity 0.25s ease 0.06s;
}

/* Combined program + season picker. Single gold-bordered pill on the right
   side of the topnav that reads "[icon] Senior High · 2026 ▾"; click opens
   a popover panel with Program and Season sections. Replaced the legacy
   pair of HS/JH pills + native <select> on 2026-04-29. */
.topnav-context {
    position: relative;
    margin: 0 0.25rem;
}
.topnav-context-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.85rem 0.42rem 0.7rem;
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid var(--gold-500, #E5A83A);
    border-radius: 999px;
    color: #FFFFFF;
    font: inherit;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
    line-height: 1;
}
.topnav-context-trigger:hover { background: rgba(0, 0, 0, 0.32); }
.topnav-context-trigger:focus-visible {
    outline: 2px solid var(--gold-500, #E5A83A);
    outline-offset: 2px;
}
.topnav-context.is-open .topnav-context-trigger {
    background: rgba(0, 0, 0, 0.32);
    border-color: #FFFFFF;
}
.topnav-context-icon {
    width: 1.05rem;
    height: 1.05rem;
    color: var(--gold-500, #E5A83A);
    flex: 0 0 auto;
}
.topnav-context-program {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.92rem;
    letter-spacing: 0.02em;
}
/* 2-letter scope token shown on phones in place of the full "Senior High"
   label, so the context pill still reads "HS · 2026" / "JH · 2026" and the
   active program is never ambiguous on mobile. */
.topnav-context-abbr {
    display: none;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 0.92rem;
    letter-spacing: 0.04em;
}
.topnav-context-sep { color: rgba(255, 255, 255, 0.55); }
.topnav-context-season {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
}
.topnav-context-chev {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.7);
    margin-left: 0.1rem;
    transition: transform 0.12s ease;
}
.topnav-context.is-open .topnav-context-chev { transform: rotate(180deg); }

/* Click-outside backdrop. Sits above page content, below the panel; any
   click on it closes the picker. Non-visible (transparent), but covers
   the viewport so a click anywhere else dismisses. */
.topnav-context-backdrop {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: transparent;
}

.topnav-context-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 100;
    min-width: 240px;
    background: #FFFFFF;
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(10, 26, 51, 0.18);
    padding: 0.5rem 0.55rem 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.ctx-section + .ctx-section {
    padding-top: 0.45rem;
    border-top: 1px solid var(--line);
}
.ctx-section-k {
    font-family: var(--font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--ink-faint);
    padding: 0.15rem 0.45rem 0.3rem;
}
.ctx-opt {
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
    width: 100%;
    padding: 0.4rem 0.55rem 0.45rem;
    background: transparent;
    border: 0;
    border-radius: 4px;
    color: var(--ink);
    cursor: pointer;
    text-align: left;
    transition: background 0.1s ease, color 0.1s ease;
}
.ctx-opt:hover { background: var(--paper-2); }
.ctx-opt.is-active {
    background: rgba(0, 82, 154, 0.08);
    color: var(--ccs-blue);
}
.ctx-opt-tag {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    color: var(--gold-700, #8a5f14);
    flex: 0 0 1.6rem;
}
.ctx-opt.is-active .ctx-opt-tag { color: var(--ccs-blue); }
.ctx-opt-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.92rem;
    flex: 1 1 auto;
}

/* Year list — three-up grid so a 17-year history fits in ~6 rows. */
.ctx-years {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.2rem;
}
.ctx-year {
    width: 100%;
    padding: 0.35rem 0.5rem;
    background: transparent;
    border: 0;
    border-radius: 3px;
    color: var(--ink);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.78rem;
    cursor: pointer;
    transition: background 0.1s ease, color 0.1s ease;
}
.ctx-year:hover { background: var(--paper-2); }
.ctx-year.is-active {
    background: var(--ccs-blue);
    color: #FFFFFF;
}

@media (max-width: 720px) {
    .topnav-context-program { display: none; }
    .topnav-context-abbr { display: inline; }
    .topnav-context-trigger { padding: 0.36rem 0.7rem 0.38rem 0.6rem; }
    /* On wrapped/narrow layouts the trigger sits on the left of the row;
       anchoring the panel right-of-trigger pushes it off the viewport. Pin
       to the trigger's left edge so the panel opens to the right. */
    .topnav-context-panel { right: auto; left: 0; }
}

/* Boys / Girls — grouped, display face, uppercase. Slightly tighter
   pairing to read as one "Teams" axis rather than two siblings. */
.topnav-group {
    display: inline-flex;
    align-items: center;
    gap: 0.05rem;
    padding: 0 0.1rem;
}
.topnav-link-team {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.45rem 0.85rem;
    color: rgba(255, 255, 255, 0.82);
}
.topnav-link-team.active {
    border-bottom-width: 3px;
}

/* Role-gated items sit to the right of the divider. Italic + lower weight
   so they read as tools, not destinations. */
.topnav-link-role {
    color: rgba(220, 232, 243, 0.72);
    font-style: italic;
    font-size: 0.88rem;
}
.topnav-link-role:hover { color: #FFFFFF; }

.topnav-divider {
    width: 1px; height: 22px;
    background: rgba(255, 255, 255, 0.22);
    margin: 0 0.55rem;
    align-self: center;
}
.topnav-divider-role { background: rgba(255, 255, 255, 0.14); margin: 0 0.35rem 0 0.45rem; }

/* Back-compat: older markup may still reference the old separator class. */
.topnav-sep { width: 1px; height: 18px; background: rgba(255, 255, 255, 0.18); margin: 0 0.45rem; }

.topnav-spacer { flex: 1 1 auto; min-width: 0.5rem; }

.topnav-user {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    color: rgba(247, 242, 232, 0.65);
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 0.25rem;
}
.topnav-logout { margin: 0; }
.topnav-logout-btn {
    background: transparent;
    color: rgba(247, 242, 232, 0.6);
    border: none;
    font-family: var(--font-body);
    font-size: 0.85rem;
    padding: 0.45rem 0.5rem;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 0.12s ease, border-color 0.12s ease;
}
.topnav-logout-btn:hover { color: #FFFFFF; border-bottom-color: #FFFFFF; }

.topnav-signin {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.95rem;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--ccs-blue);
    background: #FFFFFF;
    text-decoration: none;
    border: none;
    border-radius: 2px;
    transition: background 0.12s ease, color 0.12s ease;
}
.topnav-signin:hover {
    background: var(--ccs-blue-100);
    color: var(--ccs-blue-700);
    border: none;
}

/* Tablet: tighten gaps so the full set (Home · Meets · Boys · Girls · Plan ·
   Admin + user info) stays on one line longer before wrapping. */
@media (max-width: 1060px) {
    .topnav { gap: 0.05rem; }
    .topnav-divider { margin: 0 0.35rem; }
    .topnav-link { padding: 0.45rem 0.55rem; }
    .topnav-link-team { padding: 0.45rem 0.7rem; font-size: 0.95rem; }
    .topnav-user { max-width: 120px; }
}

/* Narrow tablet + phone landscape: drop user-name and sign-out collapses. */
@media (max-width: 720px) {
    .topnav-sep { display: none; }
    .topnav-user { display: none; }
    .topnav-divider { margin: 0 0.25rem; height: 16px; }
    .topnav-link { padding: 0.4rem 0.5rem; font-size: 0.88rem; }
    .topnav-link-team { font-size: 0.9rem; padding: 0.4rem 0.55rem; letter-spacing: 0.06em; }
    .topnav-link-role { font-size: 0.82rem; padding: 0.4rem 0.45rem; }
    .topnav-spacer { flex: 0 1 0; }
}

/* Phone: nav wraps to its own line under the brand; role links collapse. */
@media (max-width: 520px) {
    .topnav-divider-role { display: none; }
    .topnav-link-role { padding: 0.35rem 0.3rem; }
    .topnav-logout-btn { padding: 0.4rem 0.25rem; font-size: 0.78rem; }
}

/* Narrow phone: the public link row + sign-in button still didn't fit on
   a 375px viewport; give the nav `flex-start` so the leading "Home" never
   gets pushed off-screen, drop the Total/Public divider, and let the
   sign-in button shrink. */
@media (max-width: 420px) {
    .topnav { justify-content: flex-start; }
    .topnav-divider { display: none; }
    .topnav-link { padding: 0.35rem 0.4rem; font-size: 0.82rem; }
    .topnav-link-team { padding: 0.35rem 0.45rem; font-size: 0.82rem; letter-spacing: 0.04em; }
    .topnav-signin {
        font-size: 0.78rem;
        padding: 0.32rem 0.6rem;
        margin-left: auto;          /* push to far end of the row */
    }
    .topnav-spacer { display: none; }
}

/* --- Action-destination cards (home page front door) ------------------ */

.dest-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
    margin: 0 0 1.75rem;
}
.dest-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.95rem 1.1rem 1.05rem;
    background: #FFFFFF;
    border: 1px solid var(--line);
    border-left: 4px solid var(--ccs-blue);
    border-radius: 4px;
    color: var(--ink);
    text-decoration: none;
    transition: transform 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease;
    overflow: hidden;
}
.dest-card:hover {
    transform: translateY(-2px);
    border-color: var(--ccs-blue);
    box-shadow: 0 6px 18px rgba(0, 82, 154, 0.10);
}
.dest-card:focus-visible {
    outline: 2px solid var(--ccs-blue);
    outline-offset: 2px;
}
.dest-kicker {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--ink-soft);
}
.dest-title {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 1.5rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--ink);
    line-height: 1.05;
    margin-top: 0.05rem;
}
.dest-sub {
    font-size: 0.92rem;
    color: var(--ink-soft);
    line-height: 1.4;
}
.dest-arrow {
    position: absolute;
    top: 0.95rem;
    right: 1rem;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.4rem;
    color: var(--ink-faint);
    transition: color 0.14s ease, transform 0.14s ease;
}
.dest-card:hover .dest-arrow {
    color: var(--ccs-blue);
    transform: translateX(3px);
}

/* Per-destination accent — the left rule color matches each section's
   identity so the grid reads as differentiated, not a sea of blue. */
.dest-card-highlights { border-left-color: var(--accent, #F4B942); }
.dest-card-highlights .dest-title { color: #8a5f14; }
.dest-card-meets      { border-left-color: var(--ccs-blue); }
.dest-card-athletes   { border-left-color: var(--ink); }
.dest-card-girls      { border-left-color: var(--cinder); }
.dest-card-girls .dest-title { color: var(--cinder-ink); }
.dest-card-boys       { border-left-color: var(--ccs-blue-700, var(--ccs-blue)); }
.dest-card-boys .dest-title { color: var(--ccs-blue-700, var(--ccs-blue)); }
.dest-card-alltime    { border-left-color: var(--green-pr); }
.dest-card-alltime .dest-title { color: var(--green-pr); }

@media (max-width: 920px) {
    .dest-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }
}
@media (max-width: 540px) {
    .dest-grid { grid-template-columns: 1fr; gap: 0.6rem; }
    .dest-card { padding: 0.8rem 0.95rem 0.9rem; }
    .dest-title { font-size: 1.3rem; }
}

/* --- Cards + tiles ----------------------------------------------------- */

.card {
    background: #FFFDF7;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.25rem 1.35rem;
}

.stat-tile {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.9rem 1rem 1rem;
    background: #FFFDF7;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.stat-tile .label {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-soft);
    font-weight: 600;
}
.stat-tile .value {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 1.75rem;
    line-height: 1;
    color: var(--ink);
}
.stat-tile .value.mono {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 1.2rem;
}
.stat-tile .sub { font-size: 0.85rem; color: var(--ink-soft); }

.tile-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

/* --- Status pills (for Road to State status column) -------------------- */

.pill {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: var(--paper-2);
    color: var(--ink);
    line-height: 1.5;
}
.pill--in { background: rgba(31, 122, 77, 0.15); color: var(--green-pr); }
.pill--bubble { background: rgba(244, 185, 66, 0.2); color: #8a5f14; }
.pill--out { background: var(--paper-2); color: var(--ink-soft); }
.pill--pr { background: rgba(31, 122, 77, 0.15); color: var(--green-pr); }

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

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 1rem;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: #FFFDF7;
    color: var(--ink);
    text-decoration: none;
    transition: background 0.12s ease, border-color 0.12s ease;
}
.btn:hover { background: var(--paper-2); border-color: var(--ink-soft); border-bottom: 1px solid var(--ink-soft); }

.btn-primary {
    background: var(--navy-800);
    color: var(--paper);
    border-color: var(--navy-800);
}
.btn-primary:hover {
    background: var(--navy-700);
    color: var(--paper);
    border-color: var(--navy-700);
    border-bottom: 1px solid var(--navy-700);
}

.btn-gold {
    background: var(--gold-500);
    color: var(--navy-900);
    border-color: var(--gold-500);
}
.btn-gold:hover {
    background: var(--gold-400);
    color: var(--navy-900);
    border-color: var(--gold-400);
    border-bottom: 1px solid var(--gold-400);
}

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

input[type="text"], input[type="email"], input[type="password"], textarea, select {
    font-family: var(--font-body);
    font-size: 1rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--line-strong);
    background: #FFFDF7;
    border-radius: var(--radius);
    color: var(--ink);
    width: 100%;
}
input:focus, textarea:focus, select:focus {
    outline: 2px solid var(--ccs-blue);
    outline-offset: 1px;
}

/* --- Data tables ------------------------------------------------------- */

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}
.data-table thead th {
    text-align: left;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-soft);
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--line-strong);
    background: transparent;
    font-weight: 600;
}
.data-table tbody td {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}
.data-table tbody tr:hover { background: rgba(244, 185, 66, 0.05); }
.data-table td.num, .data-table th.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; }
.data-table tr.home td { background: rgba(244, 185, 66, 0.08); font-weight: 600; }

/* Wide-table escape hatch. Any data table that can't fit a phone width goes
   inside <div class="table-scroll"> so the TABLE scrolls horizontally on its
   own instead of stretching the whole page into a sideways scroll. The small
   negative margin lets the scroll area bleed to the card edge so the first/last
   columns aren't clipped by container padding. */
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -0.25rem;
    padding: 0 0.25rem;
}
.table-scroll > table { min-width: 34rem; }

/* --- Blazor error UI --------------------------------------------------- */

#blazor-error-ui {
    background: var(--signal);
    color: #fff;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    bottom: 0;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* --- Validation + a11y ------------------------------------------------- */

.valid.modified:not([type=checkbox]) { outline: 1px solid var(--green-pr); }
.invalid { outline: 1px solid var(--signal); }
.validation-message { color: var(--signal); font-size: 0.85rem; }

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

/* --- ApexCharts sparkline tooltip -------------------------------------- */
/* ApexCharts renders tooltips into a floating container outside the
   Blazor component's scope, so these must be global. */

.apexcharts-tooltip.apexcharts-theme-light {
    background: #0A1A33;
    border: 0;
    border-radius: 3px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
    color: #FFFFFF;
    padding: 0;
    font-family: var(--font-body, "Manrope", system-ui, sans-serif);
}
.apex-tip {
    padding: 0.45rem 0.65rem 0.5rem;
    min-width: 110px;
    line-height: 1.25;
}
.apex-tip-mark {
    font-family: var(--font-mono, "JetBrains Mono", monospace);
    font-weight: 700;
    font-size: 0.95rem;
    color: #FFD86B;
    letter-spacing: 0.01em;
}
.apex-tip-meet {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.92);
    margin-top: 0.12rem;
}
.apex-tip-date {
    font-family: var(--font-mono, "JetBrains Mono", monospace);
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 0.22rem;
    letter-spacing: 0.06em;
}

/* --- Mobile bottom tab bar --------------------------------------------- */
/* Phone-only (<=720px). The masthead's inline destination links are hidden at
   the same breakpoint so navigation lives in a thumb-reachable bar — the
   one-handed, at-a-meet pattern of live-timing apps. Above 720px this is
   display:none and the masthead topnav carries navigation. */
.bottomnav { display: none; }

@media (max-width: 720px) {
    /* Hide the masthead's inline links on phones; keep the program/season pill
       + sign-in (still in the masthead). Secondary destinations move to "More". */
    .masthead .topnav-link,
    .masthead .topnav-link-role,
    .masthead .topnav-divider,
    .masthead .topnav-divider-role { display: none; }

    .bottomnav {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 80;
        background: var(--ccs-blue);
        border-top: 1px solid var(--ccs-blue-900);
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.18);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .bottomnav-tab {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.16rem;
        min-height: 56px;
        padding: 0.4rem 0.2rem 0.45rem;
        background: transparent;
        border: 0;
        color: rgba(255, 255, 255, 0.74);
        text-decoration: none;
        font: inherit;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .bottomnav-tab svg { width: 22px; height: 22px; fill: currentColor; }
    .bottomnav-tab span {
        font-family: var(--font-mono);
        font-size: 0.6rem;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        font-weight: 600;
        line-height: 1;
    }
    .bottomnav-tab.is-active { color: #FFFFFF; }
    .bottomnav-tab.is-active::before {
        content: "";
        position: absolute;
        top: 0; left: 50%;
        transform: translateX(-50%);
        width: 26px; height: 3px;
        background: var(--accent);
        border-radius: 0 0 3px 3px;
    }
    .bottomnav-tab:active { background: rgba(0, 0, 0, 0.18); }

    /* Live tab pulse when a meet is in progress today. */
    .bottomnav-live-dot {
        position: absolute;
        top: 0.5rem;
        right: calc(50% - 19px);
        width: 7px; height: 7px;
        border-radius: 50%;
        background: transparent;
    }
    .bottomnav-live-dot.is-live {
        background: var(--signal);
        animation: bn-pulse 1.8s infinite;
    }
    @keyframes bn-pulse {
        0%   { box-shadow: 0 0 0 0 rgba(200, 52, 43, 0.6); }
        70%  { box-shadow: 0 0 0 7px rgba(200, 52, 43, 0); }
        100% { box-shadow: 0 0 0 0 rgba(200, 52, 43, 0); }
    }

    /* Reserve space so the fixed bar never covers content or the footer. */
    .app-shell { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }

    /* "More" bottom sheet. */
    .bottomnav-sheet-backdrop {
        position: fixed; inset: 0; z-index: 90;
        background: rgba(10, 26, 51, 0.5);
    }
    .bottomnav-sheet {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 100;
        background: #FFFFFF;
        border-top-left-radius: 14px;
        border-top-right-radius: 14px;
        box-shadow: 0 -8px 30px rgba(10, 26, 51, 0.28);
        padding: 0.4rem 0.9rem calc(0.9rem + env(safe-area-inset-bottom, 0px));
        display: flex;
        flex-direction: column;
        animation: bn-sheet-up 0.18s ease-out;
    }
    @keyframes bn-sheet-up {
        from { transform: translateY(100%); }
        to   { transform: translateY(0); }
    }
    .bottomnav-sheet-grip {
        width: 38px; height: 4px; border-radius: 2px;
        background: var(--line-strong);
        margin: 0.3rem auto 0.5rem;
    }
    .bottomnav-sheet-link {
        display: flex;
        align-items: baseline;
        gap: 0.6rem;
        padding: 0.8rem 0.55rem;
        border-bottom: 1px solid var(--line);
        text-decoration: none;
        color: var(--ink);
        min-height: 48px;
    }
    .bottomnav-sheet-link:last-child { border-bottom: none; }
    .bottomnav-sheet-link:active { background: var(--paper-2); }
    .bns-k {
        font-family: var(--font-mono);
        font-size: 0.62rem;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--ink-soft);
        font-weight: 700;
        flex: 0 0 3.1rem;
    }
    .bns-v {
        font-family: var(--font-display);
        font-weight: 800;
        font-size: 1.15rem;
        letter-spacing: 0.01em;
        text-transform: uppercase;
        color: var(--ink);
    }
    .bottomnav-sheet-link-role .bns-v { color: var(--ccs-blue); font-style: italic; }
}