:root {
    color-scheme: light dark ;
    font-size: 16px ;
    font-family: 'Inter', sans-serif ;
  
    /* Surfaces */
    --bg: light-dark(#F3F5F7, #14161e) ;
    --card: light-dark(#f3ecec, #262d39) ;
    --card-border: light-dark(#c9d1d8, #333948) ;
    --border: light-dark(#d8dce1, #343a48) ;
    --surface-sunken: light-dark(#e2e2e2, #0a0b0d);
    --surface-sunken-border: light-dark(#dcdedd, #2c313b);
  
    /* Text */
    --text: light-dark(#252a2e, #f2f3f6) ;
    --text-dim: light-dark(#5b6068, #9aa0ab) ;
    --text-faint: light-dark(#8a92a0, #676e80) ;
    --text-label: light-dark(#4a525c, #b0b6c2) ;
    --ball-text-light: #f2f3f6 ;
    --ball-text-dark: #252a2e ;
  
    /* Status colors */
    --status-live: light-dark(#d64545, #ff5a5a) ;
    --status-live-glow: rgba(239, 91, 91, 0.75) ;
    --status-live-bg: light-dark(rgba(214,69,69,0.12), rgba(255,90,90,0.14)) ;

    --status-idle: light-dark(#a67c00, #f0c419) ;
    --status-idle-bg: light-dark(rgba(166,124,0,0.18), rgba(240,196,25,0.14)) ;

    --status-stale: light-dark(#5b6068, #9aa0ab) ;
    --status-stale-bg: rgba(128,128,128,0.12) ;

    /* Live-row highlight */
    --row-bg: light-dark(
      linear-gradient(90deg, rgba(210,230,205,0.55), rgba(240,242,236,0.35)),
      linear-gradient(90deg, rgba(38,58,34,0.55), rgba(20,26,20,0.35))
    ) ;
    --row-border: light-dark(rgba(169,126,47,0.35), rgba(217,184,120,0.35)) ;

    /* Accent (decorative — brand gold, fixed across modes) */
    --accent-border: #c9a356 ;
    --accent-button: #d7c08a ;
    --accent-button-dim: light-dark(rgba(201,163,86,0.25), rgba(215,192,138,0.3)) ;
    --accent-text: light-dark(#a97e2f, #d7c08a) ;
}
  
* {
    box-sizing: border-box ;
}
  
@font-face {
    font-family: 'Inter' ;
    src: url('/static/fonts/InterVariable.woff2') format('woff2-variations') ;
    font-weight: 100 900 ;
}
  
body {
    font-family: 'Inter', sans-serif ;
    color: var(--text) ;
    background-color: var(--bg) ;
}

.navbar {
    display: flex ;
    align-items: center ;
    justify-content: space-between ;
    padding: 0.5rem 1rem 0.5rem ;
    background: var(--card) ;
    color: var(--text) ;
}

.brand {
    display: flex ;
    align-items: center ;
    gap: 0.5rem ;
    font-weight: 600 ;
    font-size: 1.2rem ;
    color: var(--text) ;
}

.logo {
    width: 2rem ;
    height: 2rem ;
}

.navbar .link {
    display: flex ;
    align-items: center ;
    gap: 0.3rem ;
    color: inherit ;
    text-decoration: none ;
    padding: 0.4rem 0.8rem ;
    border-radius: 0.4rem ;
    font: inherit ;
    font-size: 0.9rem ;
}

.navbar .link:hover {
    background: light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.15)) ;
}
  
.page_wrapper {
    max-width: 1200px ;
    margin: 0 auto ;
    padding: 20px ;
    box-sizing: border-box ;
    overflow-x: hidden ;
}
  
/* Headings */
.page_title {
    font-size: 1.75rem ;
    font-weight: 700 ;
    color: var(--text) ;
}
  
.session_heading {
    font-size: 1.1rem ;
    margin: 2.0rem 0 0 0 ;
    color: var(--text) ;
    font-weight: 700 ;
    letter-spacing: 0.03em ;
    padding-bottom: 0.5rem ;
    border-bottom: 1.5px solid var(--row-border) ;
}

.card {
    display: flex ;
    flex-direction: column ;
    gap: 10px ;
    width: 100% ;
    max-width: max-content ;
    background-color: var(--card) ;
    border: 1px solid var(--card-border) ;
    box-shadow: 0 1px 3px light-dark(
        rgba(20, 30, 40, 0.07),
        rgba(0, 0, 0, 0.25)
    ), 0 6px 16px rgba(20, 30, 40, 0.07) ;
    border-radius: 12px ;
    padding: 0.9em ;
}
  
.session_name {
    font-size: 1rem ;
    font-weight: 600 ;
    color: var(--text) ;
    margin: 0 ;
    overflow: hidden ;
}
  
.venue {
    font-size: 0.85rem ;
    color: var(--text-dim) ;
}

.scoreboard_holder {
    outline: 1px solid red ;
}
  
/* Buttons and links */
a {
    text-decoration: none ;
    color: var(--accent-text)
}

button, .btn {
    background: light-dark(rgba(0,0,0,0.04), rgba(255,255,255,0.06)) ;
    color: var(--text) ;
    border: 1px solid light-dark(rgba(0,0,0,0.08), rgba(255,255,255,0.12)) ;
    backdrop-filter: blur(6px) ;
    padding: 6px 10px ;
    text-decoration: none ;
    border-radius: 6px ;
    font-size: 14px ;
    cursor: pointer ;
    font-family: inherit ;
    text-align: center ;
    justify-content: center ;
    align-items: center ;
    transition: transform 0.08s ease, background-color 0.15s ease, border-color 0.15s
}

.btn:focus {
    outline: 1px solid var(--accent-border) ;
}

.btn:hover {
    background: light-dark(rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.10)) ;
}

button:active, .btn:active {
    background: light-dark(rgba(0, 0, 0, 0.09), rgba(255, 255, 255, 0.14)) ;
    transform: scale(0.98) ;
}

.btn_primary { /* The gold button */
    background: var(--accent-button) ;
    color: #0a2118 ;
    border: none ;
    padding: 8px ;
    font-weight: 600 ;
}

.btn_primary:hover {
    opacity: 0.9 ;
}

.btn_primary:active {
    background: var(--accent-button) ;
    filter: brightness(0.92) ;
    transform: scale(0.98) ;
}
  
/* Status dots + badges */
.status_dot {
    display: inline-block ;
    width: 8px ;
    height: 8px ;
    border-radius: 50% ;
}

.status_text {
    padding: 0 0.2em 0 0.4em ;
}

.status_dot.live {
    background: var(--status-live) ;
    box-shadow: 0 0 7px var(--status-live-glow) ;
}

.status_dot.idle { background: var(--status-idle) ; }

.status_dot.stale { background: currentColor ; }
  
.live {
    color: var(--status-live) ;
    background: var(--status-live-bg) ;
    border: 0.5px solid var(--status-live) ;
}

.live .status_dot {
    background: var(--status-live) ;
    box-shadow: 0 0 7px var(--status-live-glow) ;
}

.live .status_time {
    display: none ;
}
  
.idle {
    color: var(--status-idle) ;
    background: var(--status-idle-bg) ;
    border: 0.5px solid var(--status-idle) ;
}

.idle .status_dot {
    background: var(--status-idle) ;
}
  
.stale {
    color: var(--status-stale) ;
    background: var(--status-stale-bg) ;
    border: 0.5px solid var(--status-stale) ;
}

.stale .status_dot {
    background: var(--status-stale) ;
}