:root{--navy:#07182e;--navy2:#0b315f;--blue:#0d55b9;--line:#d7e0ea;--ink:#10213a;--muted:#657187;--bg:#eef3f8;--soft:#f9fbfd;--orange:#f39a16;--red:#e32119}
*{box-sizing:border-box}body{margin:0;background:var(--bg);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;color:var(--ink)}
.hero{min-height:190px;background:linear-gradient(135deg,#061426 0%,#081c35 72%,#04101f 100%);color:white;display:grid;grid-template-columns:220px 1fr 1fr;align-items:center;gap:28px;padding:18px 4vw;position:relative;overflow:hidden}.hero:after{content:"";position:absolute;left:-8%;right:-8%;bottom:5px;height:2px;background:linear-gradient(90deg,#e11c2f,#0c63d9,transparent)}
.brand-left{display:flex;justify-content:center}.brand-left img{width:145px;height:145px;object-fit:contain}.brand-center{text-align:center;border-left:1px solid rgba(255,255,255,.35);border-right:1px solid rgba(255,255,255,.35);padding:0 28px}.brand-center img{width:min(520px,95%);height:105px;object-fit:contain}.national-title{font-weight:800;font-size:28px;margin-top:0}.event-meta{text-align:center}.event-meta h1{font-size:clamp(25px,2.4vw,42px);margin:0 0 14px}.event-date{font-size:clamp(20px,2vw,31px);font-weight:800;color:#ffd300}.event-place{font-size:clamp(18px,1.6vw,27px);margin-top:12px}
.shell{width:min(1500px,calc(100% - 28px));margin:-2px auto 20px;background:white;border-radius:34px 34px 18px 18px;padding:26px 28px 14px;box-shadow:0 10px 30px rgba(21,42,68,.08)}
.summary-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:14px}.metric{border:1px solid var(--line);border-radius:18px;min-height:122px;display:flex;align-items:center;padding:20px 24px;gap:18px;background:linear-gradient(180deg,#fff,#fbfcfe)}.metric-icon{width:70px;height:70px;border-radius:50%;background:#edf4ff;display:grid;place-items:center;font-size:45px;color:var(--blue);font-weight:300}.windsock{font-size:40px}.eyebrow{font-size:15px;font-weight:800;letter-spacing:.02em}.metric-value{font-size:clamp(25px,2.4vw,39px);font-weight:800;margin-top:7px;white-space:nowrap}.metric-value #windCardDir{margin-left:20px}.muted{color:var(--muted);margin-top:5px}
.wind-panel{margin-top:14px;border:1px solid var(--line);border-radius:18px;padding:16px;display:grid;grid-template-columns:minmax(0,1fr) 140px 190px;gap:12px;align-items:stretch}.chart-area{min-width:0}.panel-title{font-size:16px;font-weight:800;margin:0 0 5px 4px}.panel-title span{font-weight:500;color:var(--muted)}#windChart{width:100%;height:190px;display:block}.stats-card,.compass-card{border:1px solid var(--line);border-radius:14px;background:#fbfcfe}.stats-card{padding:12px 16px;display:flex;flex-direction:column;justify-content:space-around}.stats-card span{font-size:13px;display:block}.stats-card strong{font-size:22px}.compass-card{text-align:center;padding:4px}.compass-card canvas{width:100%;height:145px}.compass-card strong{font-size:22px;display:block;margin-top:-6px}
.results-panel{margin-top:14px}.toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px}.tabs,.view-switch{display:flex;gap:0}.tabs button,.view-switch button{border:0;padding:12px 20px;font-size:15px;font-weight:750;background:#edf0f4;color:#2a3650;cursor:pointer}.tabs button:first-child,.view-switch button:first-of-type{border-radius:9px 0 0 9px}.tabs button:last-child,.view-switch button:last-child{border-radius:0 9px 9px 0}.tabs button.active,.view-switch button.active{background:linear-gradient(180deg,#1764cf,#0b4eae);color:white}.view-switch{align-items:center;background:#f0f2f5;border-radius:10px;padding-left:12px}.view-switch span{font-size:13px;font-weight:800;margin-right:8px}
.table-wrap{overflow:auto;border-radius:8px;border:1px solid #dce4ed}table{width:100%;border-collapse:collapse;min-width:850px}thead{background:linear-gradient(180deg,#0d4d9e,#083c7d);color:white}th{padding:12px 10px;font-size:14px;text-align:center}th.name{text-align:left}td{padding:11px 10px;border-bottom:1px solid #e3e8ee;text-align:center;font-size:16px}tbody tr:nth-child(odd){background:#f7fbff}tbody tr:first-child{background:#e1f2ff}.name-cell{text-align:left;font-weight:750}.flag{font-size:23px}.total{font-weight:850}.rank{font-weight:800}.round-cell{min-width:56px}
footer{border:1px solid var(--line);background:#fafbfd;border-radius:12px;margin-top:10px;padding:10px 14px;color:#40516b;display:flex;justify-content:space-between;font-size:13px}
body.compact .round-cell,body.compact th.round-head{display:none}
@media(max-width:900px){.hero{grid-template-columns:90px 1fr;min-height:155px;padding:12px 16px;gap:10px}.brand-left img{width:78px;height:78px}.brand-center{border:0;text-align:left;padding:0}.brand-center img{height:62px;width:230px}.national-title{font-size:20px}.event-meta{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.15);padding-top:8px}.event-meta h1{font-size:21px;margin-bottom:5px}.event-date,.event-place{display:inline;font-size:16px}.event-place:before{content:" • ";color:#8798ad}.shell{width:100%;border-radius:22px 22px 0 0;padding:14px}.summary-grid{grid-template-columns:1fr 1fr}.metric{min-height:92px;padding:13px}.metric-icon{width:50px;height:50px;font-size:31px}.metric-value{font-size:23px}.wind-panel{grid-template-columns:1fr 110px}.compass-card{grid-column:2;grid-row:1}.stats-card{display:none}.chart-area{grid-column:1}.toolbar{align-items:flex-start;flex-direction:column}.tabs{width:100%;overflow:auto}.tabs button{white-space:nowrap;flex:1}.view-switch{align-self:flex-end}footer{display:block}footer span:last-child{display:none}}
@media(max-width:600px){.hero{grid-template-columns:72px 1fr}.brand-left img{width:66px;height:66px}.brand-center img{height:48px;width:190px}.national-title{font-size:17px}.event-meta h1{font-size:18px}.event-date,.event-place{font-size:14px}.summary-grid{grid-template-columns:1fr}.metric{min-height:78px}.metric-icon{width:46px;height:46px}.eyebrow{font-size:12px}.metric-value{font-size:21px}.wind-panel{grid-template-columns:1fr;padding:10px}.chart-area{grid-column:1}.compass-card{grid-column:1;grid-row:auto;display:grid;grid-template-columns:120px 1fr;align-items:center}.compass-card canvas{height:105px}.panel-title{font-size:14px}#windChart{height:170px}.tabs button{font-size:12px;padding:10px 11px}.view-switch{display:none}table{min-width:0}.round-cell,th.round-head,.nat-col,th.nat-head,.bib-col,th.bib-head{display:none}th,td{padding:10px 8px}.name-cell{font-size:15px}footer{font-size:12px}}


/* Round state styling */
.round-status{display:inline-flex;align-items:center;margin-top:7px;padding:4px 9px;border-radius:999px;font-size:12px;font-weight:850;letter-spacing:.04em}
.round-status.active{background:#e5f1ff;color:#0b55b6}
.round-status.paused{background:#fff0d7;color:#a45b00}
.round-status.completed{background:#e8f6ed;color:#16723b}
.round-status.pending{background:#eef1f5;color:#667184}
.round-status.cancelled{background:#f6e5e5;color:#a92b2b}

.round-legend{min-height:0;display:flex;flex-wrap:wrap;gap:8px;margin:0 0 8px}
.round-legend:empty{display:none}
.legend-item{padding:5px 9px;border-radius:999px;font-size:12px;font-weight:800}
.legend-item.active{background:#e5f1ff;color:#0b55b6}
.legend-item.paused{background:#fff0d7;color:#a45b00}
.legend-item.cancelled{background:#f6e5e5;color:#a92b2b}

th.round-active{box-shadow:inset 0 -4px 0 #69b4ff}
th.round-paused{box-shadow:inset 0 -4px 0 #f39a16}
th.round-cancelled{background:#687687;color:#edf1f5;text-decoration:line-through}
td.round-paused{background:#fff8ea}
td.round-cancelled{color:#9aa3af;background:#f1f3f5;text-decoration:line-through}

/* Live event state and wind freshness */
.round-status.event-starting-up{background:#eef1f5;color:#667184}
.round-status.event-live{background:#e5f1ff;color:#0b55b6}
.round-status.event-standby-wind{background:#fff0d7;color:#a45b00}
.round-status.event-standby-weather{background:#fff0d7;color:#a45b00}
.round-status.event-finished-for-today{background:#e8f6ed;color:#16723b}
.update-ok{color:inherit}
.update-delay{color:#a45b00}
.update-stale{color:#b3261e;font-size:clamp(18px,2vw,27px)!important}

.live-wind-metric{display:grid;grid-template-columns:70px minmax(0,1fr) 130px;align-items:center}
.live-wind-copy{min-width:0}
.mini-compass-wrap{justify-self:end;text-align:center;min-width:116px}
.mini-compass-wrap canvas{display:block;width:112px;height:84px;margin:auto}
.mini-compass-wrap strong{display:block;font-size:14px;margin-top:-2px;color:#263a57}
@media(max-width:900px){
  .live-wind-metric{grid-template-columns:50px minmax(0,1fr) 110px}
  .mini-compass-wrap canvas{width:96px;height:74px}
  .mini-compass-wrap strong{font-size:12px}
}
@media(max-width:600px){
  .summary-grid{grid-template-columns:1fr}
  .live-wind-metric{grid-template-columns:46px minmax(0,1fr) 96px;gap:10px}
  .mini-compass-wrap{min-width:90px}
  .mini-compass-wrap canvas{width:88px;height:68px}
  .mini-compass-wrap strong{font-size:11px}
  .wind-panel{grid-template-columns:1fr;padding:12px}
  .chart-area{grid-column:1}
  .compass-card{display:none}
  #windChart{height:150px}
  .results-panel{margin-top:10px}
}

@media(max-width:600px){.event-logo,.event-logo-wrap,.brand-center,.brand-event{margin-left:auto!important;margin-right:auto!important;justify-self:center!important;text-align:center!important}.event-logo img,.event-logo-wrap img,.brand-center img,.brand-event img{display:block!important;margin:auto!important}}

/* v3.5: in phone portrait, centre the BK/NK logo on the viewport itself. */
@media(max-width:600px){
  .hero{position:relative}
  .brand-center{
    position:absolute!important;
    left:50%!important;
    top:10px!important;
    transform:translateX(-50%)!important;
    width:200px!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    text-align:center!important;
    justify-self:auto!important;
  }
  .brand-center img{
    display:block!important;
    width:190px!important;
    height:48px!important;
    margin:0 auto!important;
    object-fit:contain!important;
  }
  .brand-center .national-title{
    text-align:center!important;
    margin-top:0!important;
  }
}

.auto-mode-badge{
  display:none;position:fixed;right:18px;top:14px;z-index:9999;
  padding:8px 13px;border-radius:9px;background:rgba(5,24,46,.88);
  color:#fff;font-size:12px;font-weight:800;letter-spacing:.04em;
}
body.auto-scroll-mode .auto-mode-badge{display:block}
@media(orientation:portrait){
  .view-switch button[data-view="auto"]{display:none}
}
body.auto-scroll-mode{overflow:hidden;background:#eef3f8}
body.auto-scroll-mode .hero,
body.auto-scroll-mode .summary-grid,
body.auto-scroll-mode .wind-panel,
body.auto-scroll-mode footer{display:none!important}
body.auto-scroll-mode .shell{
  width:100vw;height:100vh;max-width:none;margin:0;border-radius:0;
  padding:18px 24px 20px;box-shadow:none;overflow:hidden
}
body.auto-scroll-mode .results-panel{
  height:calc(100vh - 4px);margin:0;display:flex;flex-direction:column
}
body.auto-scroll-mode .toolbar{flex:0 0 auto;margin-bottom:9px}
body.auto-scroll-mode .round-legend{flex:0 0 auto}
body.auto-scroll-mode .table-wrap{
  flex:1 1 auto;overflow-y:auto;overflow-x:auto;scroll-behavior:auto;
  border-radius:10px;background:white
}
body.auto-scroll-mode .view-switch button[data-view="table"],
body.auto-scroll-mode .view-switch button[data-view="compact"]{display:none}
body.auto-scroll-mode table{min-width:100%}
body.auto-scroll-mode thead{position:sticky;top:0;z-index:4}

/* ===== v3.7 consolidated live information ===== */
.summary-grid{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:0!important;
}
.current-round-metric{
  min-height:78px!important;
  padding:12px 22px!important;
  display:grid!important;
  grid-template-columns:58px minmax(0,1fr) auto!important;
  gap:16px!important;
  align-items:center!important;
}
.current-round-icon{
  width:52px!important;
  height:52px!important;
  font-size:32px!important;
}
.current-round-copy{
  min-width:0;
  display:flex;
  align-items:center;
  gap:24px;
}
.current-round-copy .eyebrow{
  flex:0 0 auto;
}
.current-round-copy .metric-value{
  margin-top:0!important;
  font-size:clamp(23px,2vw,34px)!important;
}
.current-round-metric .round-status{
  justify-self:end;
  margin:0!important;
  min-width:170px;
  text-align:center;
  font-size:14px;
  padding:10px 16px;
}

.wind-panel{
  grid-template-columns:minmax(0,1fr) 132px 180px!important;
  align-items:stretch!important;
}
.wind-live-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:7px 10px 8px!important;
}
.wind-live-head{
  font-size:12px;
  font-weight:850;
  letter-spacing:.04em;
  margin-bottom:0;
  color:#24344e;
}
.wind-live-card canvas{
  width:138px!important;
  height:94px!important;
  flex:0 0 auto;
  margin-top:-2px;
}
.wind-live-direction{
  font-size:16px;
  font-weight:800;
  margin-top:-7px;
}
.wind-live-speed{
  font-size:24px;
  line-height:1.05;
  font-weight:900;
  color:#0d55b9;
  margin-top:4px;
}
.wind-live-updated{
  font-size:11px;
  color:var(--muted);
  margin-top:5px;
  white-space:nowrap;
}

/* Portrait: wind timeline stays primary; compact live wind card sits below it. */
@media(max-width:600px){
  .current-round-metric{
    grid-template-columns:44px minmax(0,1fr) auto!important;
    min-height:66px!important;
    padding:9px 12px!important;
    gap:9px!important;
  }
  .current-round-icon{
    width:40px!important;height:40px!important;font-size:25px!important;
  }
  .current-round-copy{
    display:block;
  }
  .current-round-copy .metric-value{
    font-size:20px!important;
  }
  .current-round-metric .round-status{
    min-width:0;
    max-width:122px;
    padding:7px 9px;
    font-size:11px;
  }

  .wind-panel{
    grid-template-columns:minmax(0,1fr) 108px!important;
  }
  .chart-area{grid-column:1!important}
  .wind-live-card{
    display:flex!important;
    grid-column:2!important;
    grid-row:1!important;
  }
  .wind-live-card canvas{
    width:86px!important;height:62px!important;
  }
  .wind-live-head{font-size:9px}
  .wind-live-direction{font-size:12px;margin-top:-4px}
  .wind-live-speed{font-size:17px}
  .wind-live-updated{
    font-size:8.5px;
    white-space:normal;
    text-align:center;
  }
}

/* AUTO SCROLL now keeps the compact current-round and wind information visible. */
body.auto-scroll-mode .summary-grid,
body.auto-scroll-mode .wind-panel{
  display:grid!important;
}
body.auto-scroll-mode .shell{
  display:flex;
  flex-direction:column;
}
body.auto-scroll-mode .summary-grid{
  flex:0 0 auto;
}
body.auto-scroll-mode .current-round-metric{
  min-height:60px!important;
  padding:7px 18px!important;
}
body.auto-scroll-mode .current-round-icon{
  width:42px!important;height:42px!important;font-size:27px!important;
}
body.auto-scroll-mode .current-round-copy .metric-value{
  font-size:25px!important;
}
body.auto-scroll-mode .wind-panel{
  flex:0 0 142px;
  margin-top:8px;
  padding:8px 12px;
  grid-template-columns:minmax(0,1fr) 110px 150px!important;
}
body.auto-scroll-mode #windChart{
  height:110px!important;
}
body.auto-scroll-mode .panel-title{
  font-size:13px;
  margin-bottom:1px;
}
body.auto-scroll-mode .stats-card{
  padding:6px 10px;
}
body.auto-scroll-mode .stats-card span{font-size:10px}
body.auto-scroll-mode .stats-card strong{font-size:16px}
body.auto-scroll-mode .wind-live-card canvas{
  width:100px!important;height:65px!important;
}
body.auto-scroll-mode .wind-live-head{font-size:10px}
body.auto-scroll-mode .wind-live-direction{font-size:13px}
body.auto-scroll-mode .wind-live-speed{font-size:19px}
body.auto-scroll-mode .wind-live-updated{font-size:9px}
body.auto-scroll-mode .results-panel{
  flex:1 1 auto;
  min-height:0;
  height:auto!important;
}

/* ===== v3.7.1 AUTO SCROLL refinements ===== */

/* Current round stays left; event status is truly centered in the full bar. */
.current-round-metric{
  position:relative!important;
}
.current-round-metric .round-status{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  transform:translate(-50%,-50%)!important;
  min-width:190px!important;
  max-width:360px!important;
  margin:0!important;
  padding:9px 20px!important;
  font-size:18px!important;
  font-weight:900!important;
  text-align:center!important;
  white-space:nowrap!important;
}

/* In AUTO SCROLL reserve enough real height for the two-minute chart.
   v3.7 compressed the wind panel more than intended. */
body.auto-scroll-mode .wind-panel{
  flex:0 0 184px!important;
  min-height:184px!important;
  height:184px!important;
  grid-template-columns:minmax(0,1fr) 110px 150px!important;
  align-items:stretch!important;
}
body.auto-scroll-mode .chart-area{
  min-height:160px!important;
}
body.auto-scroll-mode #windChart{
  width:100%!important;
  height:145px!important;
}
body.auto-scroll-mode .stats-card,
body.auto-scroll-mode .wind-live-card{
  min-height:160px!important;
  height:160px!important;
}

/* Keep the centered status readable without colliding with the exit badge. */
@media(max-width:900px){
  .current-round-metric .round-status{
    font-size:15px!important;
    min-width:150px!important;
    max-width:240px!important;
  }
}

/* ===== v3.7.2 iPhone landscape refinement ===== */
/* On phone-sized landscape screens the separate compass card beside the
   timeline is redundant because LIVE WIND already shows the direction.
   Hide it and give the timeline the extra width. */
@media (orientation:landscape) and (max-height:520px) and (max-width:1000px){
  .wind-panel{
    grid-template-columns:minmax(0,1fr) 118px!important;
  }
  .chart-area{
    grid-column:1!important;
  }
  .stats-card{
    grid-column:2!important;
  }
  .compass-card{
    display:none!important;
  }

  body.auto-scroll-mode .wind-panel{
    grid-template-columns:minmax(0,1fr) 110px!important;
  }
  body.auto-scroll-mode .chart-area{
    grid-column:1!important;
  }
  body.auto-scroll-mode .stats-card{
    grid-column:2!important;
  }
}

/* ===== v3.7.3 mobile layout corrections ===== */

/* PHONE PORTRAIT
   1. Live Wind gets its own full-width card above the timeline.
   2. Wind timeline uses the full width below it.
   3. Event status is aligned right in Current Round. */
@media (orientation:portrait) and (max-width:600px){
  .current-round-metric{
    position:relative!important;
    grid-template-columns:40px minmax(0,1fr) auto!important;
  }
  .current-round-metric .round-status{
    position:static!important;
    transform:none!important;
    justify-self:end!important;
    align-self:center!important;
    min-width:0!important;
    max-width:120px!important;
    padding:7px 9px!important;
    font-size:11px!important;
    white-space:nowrap!important;
  }

  .wind-panel{
    display:grid!important;
    grid-template-columns:1fr 96px!important;
    grid-template-rows:auto auto!important;
    gap:8px!important;
  }

  /* Live Wind card first, spanning the complete width. */
  .wind-live-card{
    display:grid!important;
    grid-column:1 / -1!important;
    grid-row:1!important;
    grid-template-columns:72px minmax(0,1fr)!important;
    grid-template-rows:auto auto auto!important;
    min-height:100px!important;
    height:auto!important;
    padding:8px 12px!important;
    align-items:center!important;
    justify-items:start!important;
  }
  .wind-live-head{
    grid-column:1 / -1!important;
    grid-row:1!important;
    font-size:10px!important;
    margin:0 0 1px 0!important;
  }
  .wind-live-card canvas{
    display:block!important;
    grid-column:1!important;
    grid-row:2 / 4!important;
    width:68px!important;
    height:58px!important;
    margin:0!important;
  }
  .wind-live-direction{
    grid-column:2!important;
    grid-row:2!important;
    font-size:13px!important;
    margin:0!important;
  }
  .wind-live-speed{
    grid-column:2!important;
    grid-row:3!important;
    font-size:21px!important;
    margin:0!important;
  }
  .wind-live-updated{
    grid-column:2!important;
    grid-row:4!important;
    font-size:9px!important;
    margin-top:1px!important;
    white-space:nowrap!important;
    text-align:left!important;
  }

  .chart-area{
    grid-column:1!important;
    grid-row:2!important;
    min-width:0!important;
  }
  .stats-card{
    grid-column:2!important;
    grid-row:2!important;
  }
}

/* PHONE LANDSCAPE
   Keep Live Wind with compass ABOVE the timeline. The timeline itself uses
   the available width, with AVG/MAX/MIN remaining at the right. */
@media (orientation:landscape) and (max-height:520px) and (max-width:1000px){
  .wind-panel{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 108px!important;
    grid-template-rows:auto auto!important;
    gap:8px!important;
  }

  .wind-live-card{
    display:grid!important;
    grid-column:1 / -1!important;
    grid-row:1!important;
    grid-template-columns:86px 120px minmax(0,1fr)!important;
    grid-template-rows:auto auto!important;
    min-height:82px!important;
    height:82px!important;
    padding:5px 12px!important;
    align-items:center!important;
    justify-items:start!important;
  }
  .wind-live-head{
    grid-column:1!important;
    grid-row:1!important;
    align-self:end!important;
    font-size:9px!important;
  }
  .wind-live-card canvas{
    display:block!important;
    grid-column:1!important;
    grid-row:2!important;
    width:76px!important;
    height:58px!important;
    margin:0!important;
  }
  .wind-live-direction{
    grid-column:2!important;
    grid-row:2!important;
    font-size:13px!important;
    margin:0!important;
  }
  .wind-live-speed{
    grid-column:3!important;
    grid-row:2!important;
    font-size:23px!important;
    margin:0!important;
    justify-self:start!important;
  }
  .wind-live-updated{
    grid-column:3!important;
    grid-row:2!important;
    align-self:end!important;
    font-size:9px!important;
    margin:0 0 2px 0!important;
    white-space:nowrap!important;
  }

  .chart-area{
    grid-column:1!important;
    grid-row:2!important;
    min-width:0!important;
  }
  .stats-card{
    grid-column:2!important;
    grid-row:2!important;
  }

  /* v3.7.2 hid .compass-card here; explicitly restore this live-wind card. */
  .compass-card.wind-live-card{
    display:grid!important;
  }
}

/* Desktop landscape deliberately keeps the existing v3.7 layout. */

/* ===== v3.7.4 final mobile refinements ===== */

/* iPhone portrait:
   compass left; direction/speed/updated grouped to its right.
   Wind timeline then spans the full card width; stats are hidden here
   because the phone portrait chart benefits more from horizontal space. */
@media (orientation:portrait) and (max-width:600px){
  .wind-panel{
    grid-template-columns:1fr!important;
    grid-template-rows:auto auto!important;
  }
  .wind-live-card{
    grid-column:1!important;
    grid-row:1!important;
    grid-template-columns:110px minmax(0,1fr)!important;
    grid-template-rows:auto auto auto auto!important;
    min-height:112px!important;
    padding:9px 14px!important;
  }
  .wind-live-head{
    grid-column:1 / -1!important;
    grid-row:1!important;
  }
  .wind-live-card canvas{
    grid-column:1!important;
    grid-row:2 / 5!important;
    width:88px!important;
    height:74px!important;
    justify-self:center!important;
  }
  .wind-live-direction{
    grid-column:2!important;
    grid-row:2!important;
    align-self:end!important;
    font-size:14px!important;
  }
  .wind-live-speed{
    grid-column:2!important;
    grid-row:3!important;
    font-size:23px!important;
  }
  .wind-live-updated{
    grid-column:2!important;
    grid-row:4!important;
    font-size:10px!important;
    text-align:left!important;
    white-space:nowrap!important;
  }
  .chart-area{
    grid-column:1!important;
    grid-row:2!important;
    width:100%!important;
  }
  .stats-card{
    display:none!important;
  }
}

/* iPhone landscape:
   status at far right.
   Live Wind uses three clear zones:
   compass/direction left, speed centered, updated right. */
@media (orientation:landscape) and (max-height:520px) and (max-width:1000px){
  .current-round-metric{
    position:relative!important;
    grid-template-columns:52px minmax(0,1fr) auto!important;
  }
  .current-round-metric .round-status{
    position:static!important;
    transform:none!important;
    justify-self:end!important;
    align-self:center!important;
    min-width:170px!important;
    max-width:250px!important;
    font-size:15px!important;
    padding:8px 15px!important;
  }

  .wind-live-card{
    grid-template-columns:minmax(190px,1fr) minmax(160px,1fr) minmax(170px,1fr)!important;
    grid-template-rows:auto 1fr!important;
    column-gap:12px!important;
    min-height:88px!important;
    height:88px!important;
  }
  .wind-live-head{
    grid-column:1!important;
    grid-row:1!important;
  }
  .wind-live-card canvas{
    grid-column:1!important;
    grid-row:2!important;
    width:74px!important;
    height:58px!important;
    justify-self:start!important;
  }
  .wind-live-direction{
    grid-column:1!important;
    grid-row:2!important;
    justify-self:start!important;
    margin-left:88px!important;
    align-self:center!important;
    font-size:14px!important;
  }
  .wind-live-speed{
    grid-column:2!important;
    grid-row:1 / 3!important;
    justify-self:center!important;
    align-self:center!important;
    font-size:25px!important;
  }
  .wind-live-updated{
    grid-column:3!important;
    grid-row:1 / 3!important;
    justify-self:end!important;
    align-self:center!important;
    text-align:right!important;
    font-size:11px!important;
    margin:0!important;
  }
}

/* ===== v3.7.5 phone refinements ===== */

/* Portrait: compass remains left. Direction stays beside it; speed and
   updated are placed to the right of the direction instead of below it. */
@media (orientation:portrait) and (max-width:600px){
  .wind-live-card{
    grid-template-columns:110px 92px minmax(0,1fr)!important;
    grid-template-rows:auto 34px 34px!important;
    min-height:112px!important;
  }
  .wind-live-head{
    grid-column:1 / -1!important;
    grid-row:1!important;
  }
  .wind-live-card canvas{
    grid-column:1!important;
    grid-row:2 / 4!important;
    width:88px!important;
    height:74px!important;
    justify-self:center!important;
    align-self:center!important;
  }
  .wind-live-direction{
    grid-column:2!important;
    grid-row:2 / 4!important;
    align-self:center!important;
    justify-self:start!important;
    margin:0!important;
    font-size:14px!important;
    white-space:nowrap!important;
  }
  .wind-live-speed{
    grid-column:3!important;
    grid-row:2!important;
    align-self:end!important;
    justify-self:start!important;
    margin:0!important;
    font-size:22px!important;
    white-space:nowrap!important;
  }
  .wind-live-updated{
    grid-column:3!important;
    grid-row:3!important;
    align-self:start!important;
    justify-self:start!important;
    margin:1px 0 0 0!important;
    font-size:10px!important;
    text-align:left!important;
    white-space:nowrap!important;
  }
}

/* AUTO SCROLL is a large-screen feature only.
   Hide it on phones in BOTH portrait and landscape. */
@media (max-width:1000px) and (max-height:600px),
       (orientation:portrait) and (max-width:600px){
  .view-switch button[data-view="auto"]{
    display:none!important;
  }
  .auto-mode-badge{
    display:none!important;
  }
}

/* ===== v3.7.9 deterministic iPhone portrait LIVE WIND layout ===== */
@media (orientation:portrait) and (max-width:600px){
  .wind-live-card{
    position:relative!important;
    display:grid!important;
    grid-template-columns:110px 92px minmax(0,1fr)!important;
    grid-template-rows:22px 72px!important;
    align-items:center!important;
    padding:8px 12px 10px!important;
    min-height:112px!important;
    height:auto!important;
  }

  .wind-live-head{
    position:static!important;
    grid-column:1 / -1!important;
    grid-row:1!important;
    justify-self:center!important;
    align-self:start!important;
    width:auto!important;
    transform:none!important;
    margin:0!important;
    text-align:center!important;
    line-height:18px!important;
    font-size:11px!important;
  }

  .wind-live-card canvas{
    grid-column:1!important;
    grid-row:2!important;
    justify-self:center!important;
    align-self:start!important;
    width:88px!important;
    height:74px!important;
    margin:0!important;
    transform:none!important;
  }

  .wind-live-direction{
    grid-column:2!important;
    grid-row:2!important;
    justify-self:start!important;
    align-self:center!important;
  }

  .wind-live-speed{
    grid-column:3!important;
    grid-row:2!important;
    justify-self:start!important;
    align-self:start!important;
    margin-top:8px!important;
  }

  .wind-live-updated{
    grid-column:3!important;
    grid-row:2!important;
    justify-self:start!important;
    align-self:end!important;
    margin-bottom:9px!important;
  }
}


/* ===== v3.8 small portrait fixes only ===== */
@media (orientation:portrait) and (max-width:600px){
  /* Give compass labels a little more vertical room and move drawing down
     slightly so the N is fully visible. */
  .wind-live-card canvas{
    width:88px!important;
    height:78px!important;
    align-self:center!important;
    margin-top:3px!important;
  }

  /* STALE/DELAY/WAITING must stay the same compact size as normal updated text. */
  .wind-live-updated,
  .wind-live-updated.stale,
  .wind-live-updated.delay,
  .wind-live-updated.waiting{
    font-size:10px!important;
    line-height:1.15!important;
    white-space:nowrap!important;
  }
}

@media (orientation:portrait) and (max-width:600px){
  .wind-live-updated *{
    font-size:inherit!important;
    line-height:inherit!important;
  }
}


/* ===== v3.8.1 portrait long-status fit ===== */
@media (orientation:portrait) and (max-width:600px){
  #roundStatus{
    margin-left:auto!important;
    margin-right:10px!important;
    width:max-content!important;
    max-width:48vw!important;
    min-width:0!important;
    padding-left:12px!important;
    padding-right:12px!important;
    white-space:nowrap!important;
    box-sizing:border-box!important;
  }
}


/* ===== v3.8.2 iPhone portrait result-table refinements ===== */
@media (orientation:portrait) and (max-width:600px){
  /* Keep the country flag visible, but hide the country abbreviation. */
  .nat-col, th.nat-head{
    display:table-cell!important;
  }
  th.nat-head{
    font-size:0!important;
    width:34px!important;
    padding-left:2px!important;
    padding-right:2px!important;
  }
  .nat-col{
    width:34px!important;
    min-width:34px!important;
    max-width:34px!important;
    padding-left:2px!important;
    padding-right:2px!important;
    white-space:nowrap!important;
  }
  .nat-col .flag{
    display:block!important;
    font-size:20px!important;
    text-align:center!important;
  }

  /* Pull POS/rank slightly left by reducing its left padding and width. */
  th:first-child, td.rank{
    width:38px!important;
    min-width:38px!important;
    padding-left:2px!important;
    padding-right:4px!important;
    text-align:left!important;
  }
}


/* ===== v3.9.0 optional team ranking ===== */
.team-summary{background:#dff2ff!important;font-weight:750}
.team-member-row{background:#f5f8fb!important;color:#35445a}
.team-member-row td{font-size:14px;padding-top:7px;padding-bottom:7px}
.dropped{text-decoration:line-through;opacity:.48}
.team-nat{font-size:18px;font-weight:800}
@media (orientation:portrait) and (max-width:600px){
  body:has(.tabs button.active:nth-last-child(1)) .team-member-row{display:none}
  .team-member-row{display:none}
  .team-summary .bib-col{display:none!important}
  .team-summary .round-cell{display:none!important}
  .team-summary .nat-col{display:table-cell!important}
  .team-summary .name-cell{font-size:15px!important}
}


/* ===== v3.9.3 team landscape alignment ===== */
@media (orientation:landscape), (min-width:701px){
  body.teams-view #resultsTable th:nth-child(3),
  body.teams-view #resultsTable td:nth-child(3){
    width:64px!important;
    min-width:64px!important;
    text-align:center!important;
  }

  body.teams-view #resultsTable th:nth-child(4),
  body.teams-view #resultsTable td:nth-child(4){
    text-align:left!important;
  }

  body.teams-view .team-member-name{
    padding-left:14px!important;
  }
}


/* ===== v3.9.6 finished status ===== */
.event-message{
  margin-top:4px;
  font-size:12px;
  font-weight:650;
  color:#66758a;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:640px;
}
.event-message[hidden], .wind-panel[hidden]{display:none!important;}

body.event-finished-state .current-round-copy{
  flex-wrap:wrap;
  column-gap:24px;
  row-gap:0;
}
body.event-finished-state .current-round-copy .event-message{flex-basis:100%;}
.round-status.event-competition-finished{background:#e8f6ed;color:#16723b;}

@media (orientation:portrait) and (max-width:600px){
  body.event-finished-state .current-round-copy{display:block!important;}
  body.event-finished-state .current-round-copy .eyebrow{font-size:11px!important;}
  body.event-finished-state .current-round-copy .metric-value{
    font-size:20px!important;
    line-height:1.1;
  }
  body.event-finished-state .event-message{
    font-size:10px;
    max-width:100%;
    margin-top:3px;
  }
  body.event-finished-state .current-round-metric .round-status{
    max-width:145px!important;
    white-space:normal!important;
    line-height:1.05;
  }
}


/* ===== v3.9.7 finished card refinement ===== */
body.event-finished-state #roundEyebrow{
  font-size:15px;
  letter-spacing:.35px;
}
body.event-finished-state #roundMainText[hidden]{display:none!important;}
body.event-finished-state .event-message{
  font-size:16px;
  line-height:1.2;
  margin-top:6px;
  font-weight:700;
  color:#34445b;
}
@media (orientation:portrait) and (max-width:600px){
  body.event-finished-state #roundEyebrow{
    font-size:14px!important;
    letter-spacing:.25px;
  }
  body.event-finished-state .event-message{
    font-size:14px;
    line-height:1.15;
    margin-top:5px;
  }
}
