/* Gold Coast water palette: deep navy, lagoon blue, sunshine yellow. Medal colours for the podium,
   hatched grey for drops, coloured boxes for scoring codes. */
:root {
  --blue: #00A8E8; --blue-d: #007EA7; --deep: #003459; --abyss: #001f36; --yellow: #FFC300; --ink: #00171F;
  --bg: #eef5f9; --card: #fff; --muted: #5b6b78; --line: #d6e3eb; --zebra: #f5f9fc; --hover: #e4f4fc;
  --bad: #c0392b; --good: #007EA7; --radius: 14px;
  --gold: #ffe27a; --gold-2: #f5b700; --gold-row: #fff7d6; --silver: #eef2f5; --silver-2: #b4c1cb; --silver-row: #f0f3f6;
  --bronze: #f6d0aa; --bronze-2: #c8834a; --bronze-row: #fcefe2;
  --net-bg: #dff3fc; --net-ink: #003459;
  --dn-bg: #fde2df; --dn-ink: #9b1c12; --pen-bg: #4a0f0a; --pen-ink: #ffd9d4; --rdg-bg: #d4f5e8; --rdg-ink: #0b5d4c; --scp-bg: #ffe9c7; --scp-ink: #7a4b00;
  --drop-a: #e9edf0; --drop-b: #dbe1e5; --drop-ink: #7d8a94;
  --shadow: 0 1px 2px rgba(0, 52, 89, .06), 0 6px 18px rgba(0, 52, 89, .08);
  --display: "Outfit", "Segoe UI", system-ui, sans-serif; --body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) { :root {
  --bg: #061521; --card: #0c2231; --ink: #e8f1f6; --muted: #95a9b6; --line: #1d394b; --zebra: #0f2838; --hover: #133650;
  --gold: #8a6d00; --gold-2: #ffc300; --gold-row: #2a2610; --silver: #3a4954; --silver-2: #c9d4dc; --silver-row: #1a2a36;
  --bronze: #7a4a22; --bronze-2: #e0a06a; --bronze-row: #2a1d14;
  --net-bg: #0d3a55; --net-ink: #bfeaff;
  --dn-bg: #4a1a16; --dn-ink: #ffb4ab; --pen-bg: #7d1a10; --pen-ink: #ffe1dc; --rdg-bg: #0f3d31; --rdg-ink: #9ff0d3; --scp-bg: #4a3410; --scp-ink: #ffd88a;
  --drop-a: #1a2c38; --drop-b: #22394a; --drop-ink: #8ea2b0;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 22px rgba(0, 0, 0, .35);
} }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 16px/1.55 var(--body); background: var(--bg); color: var(--ink);
  background-image: radial-gradient(1200px 400px at 90% -100px, rgba(0, 168, 232, .14), transparent 70%); background-repeat: no-repeat; }
a { color: var(--blue-d); } @media (prefers-color-scheme: dark) { a { color: var(--blue); } }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 16px; }
h1, h2, h3 { font-family: var(--display); letter-spacing: -.015em; text-wrap: balance; }
h2 { font-size: 24px; font-weight: 700; margin: 0; }

/* ---------- header ---------- */
.top { background: linear-gradient(100deg, var(--abyss), var(--deep) 55%, var(--blue-d)); color: #fff; position: sticky; top: 0; z-index: 20; box-shadow: 0 2px 12px rgba(0, 31, 54, .35); }
.top::after { content: ""; display: block; height: 4px; background: var(--yellow); }
.top-inner { display: flex; align-items: center; justify-content: space-between; height: 58px; }
.brand { display: flex; gap: 10px; align-items: center; color: #fff; text-decoration: none; font: 700 20px/1 var(--display); letter-spacing: -.01em; }
.brand img { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .3)); }
.nav { display: flex; gap: 6px; }
.nav a { color: #e3f4fc; text-decoration: none; padding: 6px 12px; border-radius: 999px; font-weight: 600; font-size: 15px; }
.nav a:hover { background: rgba(255, 255, 255, .14); color: #fff; }
main { padding: 22px 16px 60px; }
h1 { margin: 0 0 4px; font-size: clamp(26px, 4.2vw, 38px); font-weight: 700; line-height: 1.12; }
.muted { color: var(--muted); } .small { font-size: 13px; }

/* ---------- hero bands ---------- */
.hero { --ec: var(--blue); position: relative; overflow: hidden; border-radius: 18px; padding: 22px 24px; margin-bottom: 18px; color: #fff;
  background: linear-gradient(120deg, var(--abyss) 0%, var(--deep) 45%, var(--ec) 140%); box-shadow: var(--shadow); }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34px; pointer-events: none; opacity: .18;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 34' preserveAspectRatio='none'%3E%3Cpath d='M0 20 Q50 6 100 20 T200 20 T300 20 T400 20 V34 H0Z' fill='%23ffffff'/%3E%3C/svg%3E") 0 100% / 400px 34px repeat-x; }
.hero h1 { color: #fff; } .hero p { margin: 4px 0 0; color: #cfe9f7; }
.hero .muted { color: #cfe9f7; }
.hero .btn.secondary { color: #fff; border-color: rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .1); }
.ev-top { display: flex; gap: 12px; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; position: relative; z-index: 1; }
.ec-class { display: inline-block; font: 700 11px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; background: var(--yellow); color: var(--abyss); margin-bottom: 8px; }
.stats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; position: relative; z-index: 1; }
.stats > div { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); border-radius: 12px; padding: 8px 14px; display: grid; min-width: 96px; backdrop-filter: blur(4px); }
.stats b { font: 700 28px/1.05 var(--display); font-variant-numeric: tabular-nums; }
.stats span { font-size: 12px; font-weight: 600; letter-spacing: .02em; color: #cfe9f7; }
.stats .lead { background: linear-gradient(135deg, rgba(255, 195, 0, .35), rgba(255, 195, 0, .12)); border-color: rgba(255, 195, 0, .6); }
.live-pill { background: var(--yellow) !important; color: var(--abyss) !important; box-shadow: 0 0 0 4px rgba(255, 195, 0, .25); }
.live-pill .dot { animation: pulse 1.6s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .live-pill .dot { animation: none; } }

/* ---------- cards and controls ---------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin: 12px 0; box-shadow: var(--shadow); }
.card h3 { margin-top: 0; }
.grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.row { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0; }
button, .btn { font: inherit; font-weight: 600; cursor: pointer; border: 1px solid var(--blue-d); background: linear-gradient(180deg, var(--blue), var(--blue-d)); color: #fff; padding: 8px 15px; border-radius: 10px; text-decoration: none; display: inline-block; box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 2px 6px rgba(0, 126, 167, .25); transition: transform .08s, box-shadow .15s; }
button:hover, .btn:hover { box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 4px 12px rgba(0, 126, 167, .35); }
button:active, .btn:active { transform: translateY(1px); }
button:focus-visible, .btn:focus-visible, a:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
button.secondary, .btn.secondary { background: var(--card); color: var(--ink); border-color: var(--line); box-shadow: 0 1px 3px rgba(0, 52, 89, .08); }
button.secondary:hover, .btn.secondary:hover { border-color: var(--blue); background: var(--hover); }
button.danger { background: linear-gradient(180deg, #e04b3b, var(--bad)); border-color: var(--bad); box-shadow: 0 2px 6px rgba(192, 57, 43, .3); }
button.small, .btn.small { padding: 4px 10px; font-size: 13px; border-radius: 8px; }
button:disabled { opacity: .5; cursor: default; }
input, select, textarea { font: inherit; width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0, 168, 232, .25); }
textarea { min-height: 110px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 14px; }
label { display: block; font-size: 13px; font-weight: 600; color: var(--muted); margin: 10px 0 4px; }

.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0; padding: 5px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); width: fit-content; max-width: 100%; }
.tabs button { background: transparent; color: var(--ink); border-color: transparent; box-shadow: none; border-radius: 10px; }
.tabs button:hover { background: var(--hover); }
.tabs button.on { background: linear-gradient(135deg, var(--deep), var(--blue-d)); color: #fff; box-shadow: 0 3px 10px rgba(0, 52, 89, .3); }
.tabs.sm { padding: 4px; } .tabs.sm button { padding: 3px 11px; font-size: 13px; }

/* ---------- results tables ---------- */
.table-wrap { overflow-x: auto; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
table { border-collapse: collapse; width: 100%; font-size: 14px; font-variant-numeric: tabular-nums; }
th, td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
th { background: linear-gradient(180deg, #004a7c, var(--deep)); color: #fff; font-weight: 700; position: sticky; top: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
th.net-h { background: linear-gradient(180deg, var(--blue), var(--blue-d)); }
tbody tr:nth-child(even) td { background: var(--zebra); }
tbody tr:hover td { background: var(--hover); }
td.num, th.num { text-align: right; }
td.net { background: var(--net-bg) !important; color: var(--net-ink); font: 700 17px/1 var(--display); text-align: center; border-left: 2px solid var(--blue); border-right: 2px solid var(--blue); }
th.net-h { text-align: center; }
.rank { font-weight: 700; }
.medal { display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 4px; border-radius: 50%; font: 700 14px/1 var(--display); background: var(--silver); color: var(--deep); }
.medal.m1 { background: radial-gradient(circle at 30% 30%, #fff6c4, var(--gold) 45%, var(--gold-2)); color: #4a3500; box-shadow: 0 0 0 2px rgba(245, 183, 0, .35); }
.medal.m2 { background: radial-gradient(circle at 30% 30%, #fff, #dde4ea 45%, var(--silver-2)); color: #2c3a44; box-shadow: 0 0 0 2px rgba(180, 193, 203, .45); }
.medal.m3 { background: radial-gradient(circle at 30% 30%, #fde3c8, var(--bronze) 45%, var(--bronze-2)); color: #3f2105; box-shadow: 0 0 0 2px rgba(200, 131, 74, .35); }
@media (prefers-color-scheme: dark) { .medal.m0 { color: var(--ink); } }
tr.p1 td { background: var(--gold-row) !important; } tr.p2 td { background: var(--silver-row) !important; } tr.p3 td { background: var(--bronze-row) !important; }
tr.p1 td:first-child { box-shadow: inset 5px 0 0 var(--gold-2); } tr.p2 td:first-child { box-shadow: inset 5px 0 0 var(--silver-2); } tr.p3 td:first-child { box-shadow: inset 5px 0 0 var(--bronze-2); }

/* race scores: plain numbers; only drops are shaded */
.sc { display: inline-flex; gap: 3px; align-items: baseline; justify-content: center; min-width: 34px; padding: 3px 7px; border-radius: 7px; border: 1px solid transparent; }
.sc small { font-size: 10px; font-weight: 700; letter-spacing: .03em; color: var(--muted); }
.sc.drop { background: repeating-linear-gradient(135deg, var(--drop-a) 0 5px, var(--drop-b) 5px 10px); color: var(--drop-ink); border: 1px dashed var(--drop-ink); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.disc { color: var(--muted); }
.code { font-weight: 700; font-size: 13px; color: var(--muted); }
.heat-h { margin: 18px 0 8px; display: flex; gap: 10px; align-items: baseline; font-size: 22px; }
.heat-h::before { content: ""; width: 6px; align-self: stretch; border-radius: 3px; background: var(--yellow); }
.fleet { display: inline-block; padding: 2px 10px; border-radius: 999px; font-weight: 700; font-size: 12px; background: var(--hover); color: var(--deep); }
.fleet.f-gold { background: linear-gradient(135deg, #fff2b0, var(--gold)); color: #4a3500; }
.fleet.f-silver { background: linear-gradient(135deg, #fff, #cfd8df); color: #2c3a44; }
.fleet.f-bronze { background: linear-gradient(135deg, #fde3c8, var(--bronze)); color: #3f2105; }
.fleet.f-emerald { background: #c9f2e7; color: #0b5d4c; }
@media (prefers-color-scheme: dark) { .fleet { color: var(--ink); } }
.legend { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; font-size: 13px; color: var(--muted); margin: 10px 0; }

.badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; background: #fde7c4; color: #7a4b00; }
.badge.final { background: #dff3fc; color: #003459; } .badge.live { background: #d7f1ff; color: #035a7f; }
.alert { padding: 11px 15px; border-radius: 10px; margin: 10px 0; background: #fdecea; color: #7b1d13; border: 1px solid #f5c2bc; border-left: 5px solid var(--bad); }
.alert.ok { background: #e6f5fc; color: #003459; border-color: #b5e2f5; border-left-color: var(--good); } .alert ul { margin: 4px 0 0; padding-left: 20px; }
.pill { display: inline-flex; gap: 6px; align-items: center; border-radius: 999px; padding: 4px 11px; font-size: 13px; font-weight: 700; background: #dff3fc; color: #003459; }
.pill.off { background: #fdecea; color: #7b1d13; } .pill.wait { background: #fff4d6; color: #6b4a00; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; display: inline-block; }

/* event cards */
.eventcard { --ec: var(--blue); display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: inherit; position: relative; overflow: hidden; padding-top: 20px; transition: transform .15s, box-shadow .15s; }
.eventcard::before { content: ""; position: absolute; inset: 0 0 auto; height: 7px; background: var(--ec); }
.eventcard:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0, 52, 89, .18); border-color: var(--ec); }
.eventcard h3 { margin: 0; font-size: 21px; font-weight: 700; color: var(--deep); line-height: 1.15; }
@media (prefers-color-scheme: dark) { .eventcard h3 { color: #fff; } }
.eventcard .ec-class { align-self: flex-start; margin-bottom: 2px; }
.ec-stats { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.ec-stats span { background: var(--hover); border-radius: 8px; padding: 3px 10px; font-size: 13px; }
.ec-stats b { font: 700 17px/1 var(--display); color: var(--blue-d); }
.wrap-cell { white-space: normal; min-width: 200px; }
mark { background: var(--yellow); color: #000; border-radius: 4px; padding: 0 4px; }

/* ---------- tablet scoring ---------- */
.score-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; background: linear-gradient(110deg, var(--abyss), var(--deep) 60%, var(--blue-d)); color: #fff; padding: 14px 18px; border-radius: 16px; box-shadow: var(--shadow); }
.score-head .muted { color: #cfe9f7; }
.picker { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.picker > div { min-width: 120px; }
.stepper { display: flex; gap: 4px; } .stepper input { text-align: center; width: 70px; font-size: 20px; font-weight: 700; }
.stepper button { min-width: 44px; font-size: 20px; }
.score-layout { display: grid; gap: 14px; grid-template-columns: 1fr 330px; margin-top: 12px; }
@media (max-width: 820px) { .score-layout { grid-template-columns: 1fr; } }
.boats { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.boat { min-height: 82px; border-radius: 14px; border: 0; background: linear-gradient(160deg, #11b4f0, var(--blue-d) 70%, var(--deep)); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6px; user-select: none; -webkit-user-select: none; touch-action: manipulation; box-shadow: 0 4px 0 #00557a, 0 6px 14px rgba(0, 52, 89, .3); }
.boat b { font: 700 30px/1.05 var(--display); text-shadow: 0 1px 2px rgba(0, 0, 0, .25); } .boat span { font-size: 11px; color: #e3f4fc; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.boat:active { transform: translateY(3px); box-shadow: 0 1px 0 #00557a, 0 2px 6px rgba(0, 52, 89, .3); }
.boat.done { background: repeating-linear-gradient(135deg, var(--drop-a) 0 6px, var(--drop-b) 6px 12px); color: var(--drop-ink); box-shadow: none; opacity: .75; }
.boat.done span { color: var(--drop-ink); } .boat.done b { text-shadow: none; }
.order { list-style: none; margin: 0; padding: 0; max-height: 60vh; overflow: auto; counter-reset: none; }
.order li { display: flex; gap: 8px; align-items: center; padding: 7px 6px; border-bottom: 1px solid var(--line); border-radius: 8px; }
.order li:nth-child(1) { background: var(--gold-row); } .order li:nth-child(2) { background: var(--silver-row); } .order li:nth-child(3) { background: var(--bronze-row); }
.order .pos { min-width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; font: 700 15px/1 var(--display); background: var(--silver); color: var(--deep); }
.order li:nth-child(1) .pos { background: var(--gold); color: #4a3500; } .order li:nth-child(2) .pos { background: #dde4ea; color: #2c3a44; } .order li:nth-child(3) .pos { background: var(--bronze); color: #3f2105; }
.order .sail { font: 700 22px/1 var(--display); flex: 1; }
.codes { display: flex; flex-wrap: wrap; gap: 6px; }
.codes button { padding: 6px 11px; }
.codes button.on { background: var(--bad); border-color: var(--bad); color: #fff; }
.sticky-actions { position: sticky; bottom: 0; background: linear-gradient(transparent, var(--bg) 30%); padding: 18px 0 10px; display: flex; gap: 8px; flex-wrap: wrap; }
.big { font-size: 18px; padding: 13px 22px; border-radius: 12px; }
dialog { border: 0; border-radius: 16px; max-width: 560px; width: calc(100% - 32px); background: var(--card); color: var(--ink); box-shadow: 0 20px 60px rgba(0, 0, 0, .35); }
dialog::backdrop { background: rgba(0, 31, 54, .55); backdrop-filter: blur(2px); }

/* ---------- results board (big screen) ---------- */
body.board { background: radial-gradient(1400px 700px at 80% -10%, #00507e, #001b2e 60%); color: #fff; min-height: 100vh; }
body.board .top { display: none; }
.boardview { padding: 22px 30px; }
.boardview h1 { font-size: 52px; color: #fff; } .boardview table { font-size: 28px; }
.boardview th { background: linear-gradient(180deg, #00507e, #00324f); font-size: 18px; }
.boardview td { border-color: #12405a; background: transparent !important; }
.boardview tbody tr:nth-child(even) td { background: rgba(255, 255, 255, .04) !important; }
.boardview tr.p1 td { background: rgba(255, 195, 0, .18) !important; } .boardview tr.p2 td { background: rgba(200, 212, 220, .14) !important; } .boardview tr.p3 td { background: rgba(200, 131, 74, .18) !important; }
.boardview td.net { background: rgba(0, 168, 232, .22) !important; color: #fff; font-size: 32px; border-color: var(--blue); }
.boardview .medal { min-width: 44px; height: 44px; font-size: 24px; }
.boardview .muted { color: #9cc3d8; }
@media print { .top, .toolbar, .tabs, .hero::after { display: none; } .hero { background: none; color: #000; box-shadow: none; } .hero h1, .hero p { color: #000; } th { background: #eee !important; color: #000; } .table-wrap, .card { box-shadow: none; } }

.heat-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { background: linear-gradient(180deg, var(--card), var(--zebra)); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; font-size: 14px; font-weight: 700; }

select.mini { width: auto; padding: 2px 4px; font-size: 13px; }
.order li button.small { padding: 2px 8px; }
.nowrap { white-space: nowrap; }
.check { display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--ink); font-weight: 400; }
.check input { width: auto; margin: 0; }
#editor td { vertical-align: middle; }
#editor select[name=pType] { width: auto; }
#editor .pen { display: flex; gap: 4px; align-items: center; }

.sitehead { display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.sitehead > div { flex: 1; position: relative; z-index: 1; }
.sitehead img { background: #fff; border-radius: 10px; padding: 4px; position: relative; z-index: 1; }
.sitehead .btn { position: relative; z-index: 1; }
input[type=color] { padding: 2px; height: 40px; }

/* ---------- page navigation: back, trail, forward ---------- */
.pagenav { background: var(--card); border-bottom: 1px solid var(--line); box-shadow: 0 2px 8px rgba(0, 52, 89, .06); position: sticky; top: 62px; z-index: 15; }
.pagenav-inner { display: flex; align-items: center; gap: 10px; min-height: 48px; }
.navbtn { display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px 5px 8px; border-radius: 999px; font-size: 14px; background: linear-gradient(180deg, var(--blue), var(--blue-d)); }
#nav-fwd { padding: 5px 8px 5px 12px; }
.navbtn span { font-size: 22px; line-height: 1; margin-top: -2px; }
.navbtn em { font-style: normal; }
.navbtn:disabled { background: var(--zebra); color: var(--muted); border-color: var(--line); box-shadow: none; }
.crumbs { flex: 1; min-width: 0; list-style: none; margin: 0; padding: 0; display: flex; align-items: center; overflow-x: auto; white-space: nowrap; scrollbar-width: none; font-size: 14px; }
.crumbs::-webkit-scrollbar { display: none; }
.crumbs li { display: flex; align-items: center; }
.crumbs li + li::before { content: "›"; margin: 0 8px; color: var(--blue); font-weight: 800; font-size: 17px; }
.crumbs a { text-decoration: none; font-weight: 600; padding: 3px 8px; border-radius: 8px; }
.crumbs a:hover { background: var(--hover); }
.crumbs [aria-current] { font-weight: 800; color: var(--deep); padding: 3px 4px; overflow: hidden; text-overflow: ellipsis; }
@media (prefers-color-scheme: dark) { .crumbs [aria-current] { color: #fff; } }
body.board .pagenav { display: none; }
.board-links { position: fixed; top: max(12px, env(safe-area-inset-top, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); z-index: 30; display: flex; gap: 8px; opacity: .6; transition: opacity .2s; }
.board-links:hover, .board-links:focus-within { opacity: 1; }
.board-links a { color: #fff !important; text-decoration: none; font-weight: 700; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .3); padding: 6px 14px; border-radius: 999px; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; }

@media (max-width: 560px) {
  .navbtn em { display: none; } .navbtn, #nav-fwd { padding: 4px 10px; }
  .brand { font-size: 17px; } .brand span { white-space: nowrap; }
  .nav a { padding: 6px 8px; font-size: 14px; white-space: nowrap; }
  .hero { padding: 16px; border-radius: 14px; }
  .stats { gap: 8px; } .stats > div { min-width: 0; flex: 1 1 40%; padding: 6px 10px; } .stats b { font-size: 22px; }
  th, td { padding: 7px; }
}

/* ---------- home page ---------- */
.home-hero { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; align-items: center;
  border-radius: 22px; padding: 40px 40px 48px; color: #fff; box-shadow: var(--shadow);
  background: radial-gradient(600px 300px at 85% 20%, rgba(0, 168, 232, .45), transparent 70%), linear-gradient(135deg, var(--abyss), var(--deep) 60%, #00507e); }
.home-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40px; opacity: .14; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 40' preserveAspectRatio='none'%3E%3Cpath d='M0 24 Q50 8 100 24 T200 24 T300 24 T400 24 V40 H0Z' fill='%23ffffff'/%3E%3C/svg%3E") 0 100% / 400px 40px repeat-x; }
.home-hero h1 { color: #fff; font-size: clamp(34px, 5.4vw, 56px); font-weight: 800; line-height: 1.02; letter-spacing: -.03em; margin: 10px 0 12px; }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--yellow); }
.lede { font-size: 18px; color: #d5ecf8; max-width: 52ch; margin: 0; }
.hh-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.hh-cta .btn.big { background: var(--yellow); border-color: var(--yellow); color: var(--abyss); box-shadow: 0 6px 18px rgba(255, 195, 0, .3); }
.hh-cta .btn.ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .5); box-shadow: none; }
.hh-cta .btn.ghost:hover { background: rgba(255, 255, 255, .1); }
.hh-art { position: relative; z-index: 1; justify-self: center; width: min(100%, 280px); }
.hh-art img { width: 100%; height: auto; border-radius: 22%; box-shadow: 0 18px 40px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 255, 255, .12); }
.hh-art { width: min(100%, 220px); }
.hh-text { position: relative; z-index: 1; min-width: 0; }
.home-sec { margin-top: 34px; }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.sec-head h2 { font-size: 26px; }
.live-card { display: grid; gap: 4px; padding: 20px; border-radius: var(--radius); text-decoration: none; color: #fff; position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--deep), var(--blue-d) 65%, var(--blue)); box-shadow: var(--shadow); }
.live-card .pill { position: absolute; top: 14px; right: 14px; }
.live-card .ec-class { justify-self: start; }
.live-card h3 { margin: 4px 0 0; font-size: 22px; color: #fff; }
.live-card p { margin: 0; color: #d5ecf8; font-size: 14px; }
.live-card .go, .site-card .go { font-weight: 700; margin-top: 8px; }
.sites { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.site-card { --ec: var(--blue); display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: inherit; box-shadow: var(--shadow); transition: transform .15s, border-color .15s; }
.site-card:hover { transform: translateY(-2px); border-color: var(--ec); }
.site-card > span:nth-child(2) { flex: 1; min-width: 0; display: grid; }
.site-card b { font: 700 18px/1.2 var(--display); }
.site-card small { color: var(--muted); }
.site-card .go { margin: 0; color: var(--ec); font-size: 20px; }
.site-dot { width: 40px; height: 40px; border-radius: 12px; flex: none; background: linear-gradient(135deg, var(--ec), var(--deep)); }
.how { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 24px; box-shadow: var(--shadow); }
.steps { list-style: none; counter-reset: s; margin: 14px 0 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.steps li { counter-increment: s; display: grid; gap: 4px; padding-left: 52px; position: relative; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font: 700 18px/1 var(--display); background: var(--yellow); color: var(--abyss); }
.steps b { font: 700 18px/1.2 var(--display); }
.steps span { color: var(--muted); font-size: 15px; }
@media (max-width: 720px) {
  .home-hero { grid-template-columns: 1fr; padding: 26px 20px 40px; }
  .lede { font-size: 16px; } .hh-cta .btn.big { font-size: 16px; padding: 11px 18px; }
  .hh-art { display: none; }
}

/* ---------- entries ---------- */
.entry-sum { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.entry-sum span { background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 5px 14px; font-size: 14px; box-shadow: var(--shadow); }
.entry-sum b { font: 700 17px/1 var(--display); color: var(--blue-d); }
.entries { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.entry { display: flex; align-items: center; gap: 14px; padding: 12px 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); transition: transform .15s, border-color .15s; }
.entry:hover { transform: translateY(-2px); border-color: var(--blue); }
.e-sail { flex: none; min-width: 58px; height: 58px; padding: 0 8px; border-radius: 14px; display: grid; place-items: center; font: 700 24px/1 var(--display); color: #fff; letter-spacing: -.02em;
  background: linear-gradient(145deg, var(--blue), var(--deep)); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .15); }
.e-main { flex: 1; min-width: 0; display: grid; gap: 6px; }
.e-main b { font: 600 17px/1.25 var(--display); overflow-wrap: anywhere; } /* full names, wrapping if needed */
.e-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.e-chip { font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: var(--hover); color: var(--deep); }
.e-chip.nat { background: var(--deep); color: #fff; letter-spacing: .04em; }
.e-chip.cat { background: #fff1c2; color: #6b4a00; }
.e-chip.wd { background: var(--dn-bg); color: var(--dn-ink); }
@media (prefers-color-scheme: dark) { .e-chip { color: var(--ink); } .e-chip.nat { background: var(--blue-d); } .e-chip.cat { background: #4a3a10; color: #ffe08a; } }
.e-pos { flex: none; font: 700 20px/1 var(--display); color: var(--blue-d); text-align: right; }
.e-pos small { font-size: 11px; margin-left: 1px; }
.entry.wdn { opacity: .6; } .entry.wdn .e-sail { background: var(--drop-ink); }
.entry-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin: 4px 0 14px; }
.entry-bar .entry-sum { margin: 0; }
.view-toggle { margin: 0; }
.e-sail.sm { display: inline-grid; min-width: 46px; height: 32px; border-radius: 9px; font-size: 16px; box-shadow: none; }
.entry-table th:first-child, .entry-table td:first-child { width: 1%; }
.entry-table td { vertical-align: middle; }
.entry-table td b { font: 600 15px/1.2 var(--display); }
.entry-table tr.wdn td { opacity: .6; }
.class-field { display: grid; gap: 6px; }

/* ---------- drag and drop ---------- */
.grip { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; color: var(--muted); font-size: 20px; line-height: 1; padding: 6px 4px; border-radius: 6px; }
.grip:hover { color: var(--blue-d); background: var(--hover); }
td.grip { width: 1%; text-align: center; }
.order li { touch-action: pan-y; }
.drag-shift { transition: transform .15s ease; }
.dragging { position: relative; z-index: 5; background: var(--card) !important; box-shadow: 0 10px 28px rgba(0, 52, 89, .3); border-radius: 10px; }
.dragging .grip { cursor: grabbing; color: var(--blue-d); }
tr.dragging td { background: var(--hover) !important; }
.boat { -webkit-touch-callout: none; }
.drag-ghost { position: fixed; z-index: 100; pointer-events: none; transform: translate(-50%, -60%) scale(1.08); width: 96px; opacity: .92; box-shadow: 0 16px 34px rgba(0, 31, 54, .45); }
.order.drop-on { outline: 3px dashed var(--yellow); outline-offset: 4px; border-radius: 10px; min-height: 60px; }
.order li.drop-before { box-shadow: inset 0 4px 0 var(--yellow); }
.table-wrap.panning, .crumbs.panning { cursor: grabbing; user-select: none; }
@media (prefers-reduced-motion: reduce) { .drag-shift { transition: none; } }
.order { min-height: 90px; }
th.pend-h { background: linear-gradient(180deg, #5d7a8f, #44606f); }
th.pend-h small { display: block; font-size: 9px; letter-spacing: .08em; opacity: .85; }
td.pend { color: var(--muted); background: repeating-linear-gradient(135deg, transparent 0 6px, var(--zebra) 6px 12px); }
.pend-tab .dot { color: var(--yellow); margin-left: 3px; vertical-align: middle; }

/* ---------- fleet board ---------- */
.fb-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; justify-content: space-between; margin: 6px 0 14px; }
.fb-head h2 { font-size: 26px; } .fb-head p { margin: 2px 0 0; }
.fb-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.fb-group { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px 16px; box-shadow: var(--shadow); display: grid; gap: 10px; align-content: start; }
.fb-group header { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.fb-group h3 { margin: 0; font-size: 22px; }
.fb-course { font: 700 12px/1 var(--body); background: var(--hover); color: var(--deep); padding: 4px 9px; border-radius: 999px; vertical-align: middle; }
.fb-status { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--zebra); color: var(--muted); }
.st-next { border: 2px solid var(--yellow); box-shadow: 0 0 0 4px rgba(255, 195, 0, .18), var(--shadow); }
.st-next .fb-status { background: var(--yellow); color: var(--abyss); }
.st-sailed { opacity: .6; } .st-sailed .fb-status { background: var(--hover); color: var(--deep); }
.fb-boats { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); }
.fb-boat { display: grid; justify-items: center; padding: 8px 4px; border-radius: 12px; background: linear-gradient(150deg, var(--blue), var(--deep)); color: #fff; min-width: 0; }
.fb-boat b { font: 700 24px/1 var(--display); }
.fb-boat small { font-size: 10.5px; color: #d5ecf8; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-sailed .fb-boat { background: var(--silver-2); }
.fb-prom { margin: 2px 0 -2px; font-size: 12px; font-weight: 700; color: var(--blue-d); text-transform: uppercase; letter-spacing: .06em; }
.fb-prom + .fb-boats .fb-boat { background: linear-gradient(150deg, #ffd34d, #e0a800); color: var(--abyss); }
.fb-prom + .fb-boats .fb-boat small { color: #4a3500; }
@media (prefers-color-scheme: dark) { .fb-course { color: var(--ink); } .st-sailed .fb-status { color: var(--ink); } }
/* big screen */
.fleetview .fv-title { display: flex; gap: 16px; align-items: center; margin-bottom: 8px; }
.fleetview .fv-title h1 { margin: 0; } .fleetview .fv-title p { margin: 2px 0 0; }
.fleetview .fv-title img { border-radius: 12px; }
.fleetview .fb-head h2 { color: #fff; font-size: 36px; } .fleetview .fb-head .btn { display: none; }
.fleetview .fb-grid { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 20px; }
.fleetview .fb-group { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); box-shadow: none; }
.fleetview .fb-group h3 { color: #fff; font-size: 32px; }
.fleetview .fb-boats { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.fleetview .fb-boat b { font-size: 40px; } .fleetview .fb-boat small { font-size: 13px; }
.fleetview .st-next { border-color: var(--yellow); box-shadow: 0 0 0 5px rgba(255, 195, 0, .25); }
.fleetview .fb-status { font-size: 15px; } .fleetview .st-later .fb-status, .fleetview .st-sailed .fb-status { background: rgba(255, 255, 255, .12); color: #cfe9f7; }
.fleetview .fb-course { background: rgba(255, 255, 255, .15); color: #fff; font-size: 15px; }
.fleetview .fb-prom { color: var(--yellow); }
.fleetview .muted { color: #9cc3d8; }

/* results board: race by race on the big screen */
.resultsview .fv-title { display: flex; gap: 16px; align-items: center; margin-bottom: 14px; }
.resultsview .fv-title h1 { margin: 0; } .resultsview .fv-title p { margin: 2px 0 0; }
.resultsview .fv-title img { border-radius: 12px; }
.resultsview .table-wrap { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .14); box-shadow: none; }
.resultsview table { font-size: 22px; }
.resultsview th { font-size: 14px; padding: 10px 12px; }
.resultsview td { padding: 9px 12px; color: #fff; }
.resultsview td.net { font-size: 26px; }
.resultsview .medal { min-width: 36px; height: 36px; font-size: 19px; }
.resultsview .sc { min-width: 44px; }
.resultsview .sc.drop { background: repeating-linear-gradient(135deg, rgba(255,255,255,.10) 0 5px, rgba(255,255,255,.04) 5px 10px); color: #9cc3d8; border-color: #6f93a8; }
.resultsview tr.p1 td, .resultsview tr.p2 td, .resultsview tr.p3 td { color: #fff; }
.resultsview .rb-h { color: #fff; font-size: 30px; margin: 22px 0 10px; }
.resultsview .legend { color: #9cc3d8; margin-top: 14px; font-size: 16px; }
.resultsview .muted.small, .resultsview .rank .muted { color: #9cc3d8; }
.resultsview td.pend { background: rgba(255, 255, 255, .04); color: #9cc3d8; }
.resultsview .sc small { color: #cfe9f7; font-size: 13px; }
.board-links button { font: inherit; font-weight: 700; color: #fff; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .3); padding: 6px 14px; border-radius: 999px; box-shadow: none; }
.board-links button[aria-pressed="true"] { background: var(--yellow); color: var(--abyss); border-color: var(--yellow); }

/* ---------- results status ---------- */
.rstatus { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; padding: 10px 14px; border-radius: 12px; margin: 10px 0; font-size: 15px; border: 1px solid var(--line); background: var(--card); }
.rs-tag { font: 700 13px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; padding: 6px 10px; border-radius: 8px; }
.rstatus.prov { border-color: var(--yellow); background: #fff8dc; color: #4a3500; } .rstatus.prov .rs-tag { background: var(--yellow); color: var(--abyss); }
.rstatus.final { border-color: var(--blue-d); background: #e6f5fc; color: var(--deep); } .rstatus.final .rs-tag { background: var(--deep); color: #fff; }
.rstatus.amend { border-color: var(--blue-d); background: #e6f5fc; color: var(--deep); } .rstatus.amend .rs-tag { background: var(--deep); color: var(--yellow); }
@media (prefers-color-scheme: dark) { .rstatus.prov { background: #3a3110; color: #ffe8a3; } .rstatus.final, .rstatus.amend { background: #0d3a55; color: #dff3fc; } }
.boardview .rstatus { font-size: 20px; background: rgba(255, 255, 255, .06); color: #fff; border-color: rgba(255, 255, 255, .2); }
.boardview .rstatus.prov { border-color: var(--yellow); } .boardview .rs-tag { font-size: 17px; }
.badge.prov { background: #fff1c2; color: #6b4a00; }
.amend-note { background: #e6f5fc; color: var(--deep); border-color: #b5e2f5; border-left-color: var(--blue-d); }
.amend-note label { color: var(--deep); } .amend-note input { margin-top: 4px; }
@media (prefers-color-scheme: dark) { .amend-note { background: #0d3a55; color: #dff3fc; } .amend-note label { color: #dff3fc; } }
.edit-heat { margin-left: auto; font-family: var(--body); }
.heat-h { flex-wrap: wrap; }
.st-chip { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.st-chip.prov { background: var(--yellow); color: var(--abyss); } .st-chip.final { background: var(--deep); color: #fff; }
.live-card .st-chip { justify-self: start; margin-top: 4px; }
.lc-links { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.lc-links .go { margin: 0 6px 0 0; }
.lc-btn { font-size: 13px; font-weight: 700; padding: 5px 11px; border-radius: 999px; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .35); cursor: pointer; }
.lc-btn:hover { background: rgba(255, 255, 255, .28); }
.status-card .rstatus { margin: 12px 0; }
.ver { margin-top: 18px; font-size: 12px; color: var(--muted); opacity: .7; }
.boardview .ver { color: #9cc3d8; }

/* ---------- print pages ---------- */
.pp { background: #fff; color: #0b1b26; border-radius: 14px; padding: 24px 28px; box-shadow: var(--shadow); }
.pp a:not(.btn) { color: #003459; }
.pp-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid #d6e3eb; }
.pp-tools .btn.secondary { background: #fff; color: #0b1b26; border-color: #d6e3eb; }
.pp-head { display: flex; gap: 14px; align-items: center; border-bottom: 3px solid var(--yellow); padding-bottom: 12px; margin-bottom: 14px; }
.pp-head img { border-radius: 10px; }
.pp-head h1 { margin: 0; font-size: 26px; color: #003459; } .pp-head p { margin: 2px 0 0; color: #4a5d6b; }
.pp-head > div:nth-child(2) { flex: 1; min-width: 0; }
.pp-meta { font-size: 11px; color: #4a5d6b; text-align: right; }
.pp h2 { font-size: 20px; color: #003459; margin: 18px 0 8px; }
.pp-key { font-size: 13px; color: #4a5d6b; margin: 8px 0; }
.pp .table-wrap { box-shadow: none; background: #fff; border-color: #c9d6de; }
.pp table { font-size: 12.5px; color: #0b1b26; }
.pp th { background: #003459 !important; color: #fff; position: static; }
.pp td { background: #fff; border-color: #dde6ec; color: #0b1b26; }
.pp tbody tr:nth-child(even) td { background: #f3f7fa; }
.pp td.net { background: #e3f4fc !important; color: #003459; }
.pp .rstatus { background: #fff; color: #0b1b26; }
.pp-race { border: 1px solid #c9d6de; border-radius: 10px; padding: 8px 10px; margin: 8px 0; break-inside: avoid; page-break-inside: avoid; }
.pp-race h3 { margin: 0 0 8px; font-size: 17px; color: #003459; }
.pp-start + .pp-start { margin-top: 8px; }
.pp-start-h { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #7a5b00; margin-bottom: 4px; }
.pp-courses { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: 10px; }
.pp-heat { border: 1px solid #dde6ec; border-radius: 8px; padding: 6px 8px; min-width: 0; }
.pp-heat h4 { margin: 0 0 4px; font-size: 13.5px; color: #003459; } .pp-heat h4 small { font-weight: 400; color: #4a5d6b; }
.pp-boats { margin: 0; padding-left: 0; list-style: none; columns: 2; column-gap: 12px; font-size: 11px; line-height: 1.3; }
.pp-boats li { break-inside: avoid; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-boats b { display: inline-block; min-width: 30px; }
.pp-grid { border-collapse: collapse; font-size: 10.5px; width: 100%; }
.pp-grid th, .pp-grid td { border: 1px solid #c9d6de; padding: 2px 4px; text-align: center; white-space: nowrap; }
.pp-grid td.nm { text-align: left; max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.pp-grid tbody tr:nth-child(even) td { background: #f3f7fa; }
.pp .fb-group { box-shadow: none; background: #fff; border-color: #c9d6de; color: #0b1b26; }
.pp .fb-group h3 { color: #003459; } .pp .st-sailed { opacity: .55; }
.pp .fb-head .toolbar { display: none; } .pp .fb-head h2 { margin: 0; }
.pp .fb-boat { background: #003459; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.pp .medal, .pp .sc.drop, .pp th, .pp tr.p1 td, .pp tr.p2 td, .pp tr.p3 td, .pp .rs-tag, .pp .fb-status, .pp .fb-prom + .fb-boats .fb-boat { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.pp tr.p1 td { background: #fff7d6 !important; } .pp tr.p2 td { background: #f0f3f6 !important; } .pp tr.p3 td { background: #fcefe2 !important; }
.pp .legend { color: #4a5d6b; }
.pp .ver { display: none; }

@page { margin: 10mm; }
@media print {
  html, body { background: #fff !important; color: #000; }
  body::before, .top, .pagenav, .no-print, .board-links, .toolbar, .tabs, .legend .btn { display: none !important; }
  main { padding: 0 !important; max-width: none; }
  .pp { box-shadow: none; padding: 0; border-radius: 0; }
  .pp-break { break-before: page; page-break-before: always; }
  .table-wrap { overflow: visible !important; border: 0; }
  .pp-grid thead, .pp table thead { display: table-header-group; }
  tr { break-inside: avoid; }
  .hero { background: none !important; color: #000; box-shadow: none; padding: 0; } .hero h1, .hero p, .hero .muted, .stats b, .stats span { color: #000 !important; }
  .hero::after, .stats, .live-pill { display: none !important; }
  .card, .table-wrap, .fb-group { box-shadow: none !important; }
}

/* big-screen fleet board: heats already sailed fold away so the next heats fit */
.fleetview .st-sailed .fb-boats, .fleetview .st-sailed .fb-prom { display: none; }
.fleetview .st-sailed { padding-block: 10px; }

/* ---------- race office: event list ---------- */
.oe-list { display: grid; gap: 12px; margin: 14px 0 20px; }
.oe-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; align-items: center; }
.oe-main { min-width: 0; }
.oe-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.oe-title .ec-class { margin: 0; }
.oe-title h3 { margin: 0; font-size: 20px; min-width: 0; }
.oe-title h3 a { color: var(--ink); text-decoration: none; } .oe-title h3 a:hover { color: var(--blue-d); text-decoration: underline; }
.oe-meta { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.oe-meta b { color: var(--ink); }
.oe-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.oe-edit { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 8px; }
.oe-edit summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--blue-d); width: fit-content; }
.oe-form { display: grid; gap: 10px 12px; grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; margin-top: 6px; }
.oe-form label { margin-top: 0; }
.oe-save button { width: 100%; }
@media (max-width: 900px) { .oe-card { grid-template-columns: 1fr; } .oe-actions { justify-content: flex-start; } .oe-form { grid-template-columns: 1fr 1fr; } .oe-save { grid-column: 1 / -1; } }
@media (max-width: 520px) { .oe-form { grid-template-columns: 1fr; } }
.sc-edit { text-decoration: none; color: inherit; display: inline-block; border-radius: 7px; outline: 1px dashed transparent; }
.sc-edit:hover, .sc-edit:focus-visible { outline-color: var(--blue); background: var(--hover); }
.sc-edit:hover::after { content: " ✎"; font-size: 11px; color: var(--blue-d); }

/* fleet board: heats as columns, sail numbers running down */
.fb-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); align-items: start; }
.fb-count { margin: -4px 0 0; font-size: 12px; color: var(--muted); }
.fb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.fb-list li { display: flex; align-items: baseline; gap: 10px; padding: 5px 10px; border-radius: 8px; background: var(--zebra); min-width: 0; }
.fb-list li:nth-child(even) { background: var(--hover); }
.fb-list b { font: 700 22px/1.1 var(--display); color: var(--deep); min-width: 52px; text-align: right; font-variant-numeric: tabular-nums; }
.fb-list span { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.fb-list.up li { background: #fff1c2; } .fb-list.up b { color: #4a3500; }
@media (prefers-color-scheme: dark) { .fb-list b { color: #fff; } .fb-list.up li { background: #3a3110; } .fb-list.up b { color: var(--yellow); } }
.st-sailed .fb-list b { color: var(--muted); }
/* big screen */
.fleetview .fb-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.fleetview .fb-list li { background: rgba(255, 255, 255, .06); padding: 4px 12px; }
.fleetview .fb-list li:nth-child(even) { background: rgba(255, 255, 255, .11); }
.fleetview .fb-list b { color: #fff; font-size: 34px; min-width: 76px; }
.fleetview .fb-list span { color: #cfe9f7; font-size: 15px; }
.fleetview .fb-list.up li { background: rgba(255, 195, 0, .2); } .fleetview .fb-list.up b { color: var(--yellow); }
.fleetview .fb-count { color: #9cc3d8; font-size: 14px; }
.fleetview .st-sailed .fb-list, .fleetview .st-sailed .fb-count { display: none; }
/* print */
.pp .fb-list li { background: #f3f7fa; } .pp .fb-list b { color: #003459; font-size: 15px; min-width: 40px; } .pp .fb-list span { color: #333; font-size: 11px; }
.pp .fb-list li { padding: 2px 8px; } .pp .fb-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fb-sailed { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 0 0 12px; font-size: 14px; color: var(--muted); }
.fb-sailed span { font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 12px; }
.fb-sailed b { background: var(--zebra); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; font-weight: 600; color: var(--ink); text-decoration: line-through; text-decoration-color: var(--muted); }
/* big screen uses the whole TV width; compact rows so a 20-boat heat fits */
body.board main { max-width: none; }
.fleetview .fb-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.fleetview .fb-list { gap: 3px; }
.fleetview .fb-list li { padding: 1px 12px; }
.fleetview .fb-list b { font-size: 30px; line-height: 1.15; }
.fleetview .fb-sailed { color: #9cc3d8; font-size: 18px; } .fleetview .fb-sailed b { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color: #cfe9f7; }
.fleetview .fb-group { padding: 12px 14px; }
.fb-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 420px)); }
.fleetview .fb-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.pp .fb-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---------- standings tables: separate rounded rows, banner headings, flags ---------- */
.banner { margin: 18px 0 6px; font-size: 0; }
.banner span { display: inline-block; font: 800 20px/1 var(--display); letter-spacing: .04em; text-transform: uppercase; color: var(--abyss); background: var(--yellow); padding: 9px 22px; transform: skewX(-12deg); border-radius: 4px; box-shadow: 0 4px 12px rgba(255, 195, 0, .25); }
.table-wrap.standings { background: transparent; border: 0; box-shadow: none; border-radius: 0; padding: 0 2px; }
.standings table.results { border-collapse: separate; border-spacing: 0 6px; }
.standings thead th { background: none !important; color: var(--muted); font-size: 11px; letter-spacing: .1em; padding: 4px 10px 0; border: 0; position: static; }
.standings th.net-h { color: var(--blue-d); }
.standings tbody td { background: var(--card); border: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 7px 10px; }
.standings tbody tr td:first-child { border-left: 1px solid var(--line); border-radius: 12px 0 0 12px; }
.standings tbody tr td:last-child { border-right: 1px solid var(--line); border-radius: 0 12px 12px 0; }
.standings tbody tr { box-shadow: 0 1px 3px rgba(0, 52, 89, .08); }
.standings tbody tr:nth-child(even) td { background: var(--card); }
.standings tbody tr:hover td { background: var(--hover); }
.standings tr.p1 td { background: var(--gold-row) !important; } .standings tr.p2 td { background: var(--silver-row) !important; } .standings tr.p3 td { background: var(--bronze-row) !important; }
.standings tr.p1 td:first-child, .standings tr.p2 td:first-child, .standings tr.p3 td:first-child { box-shadow: none; }
.standings tr.p1 td:first-child { border-left: 5px solid var(--gold-2); } .standings tr.p2 td:first-child { border-left: 5px solid var(--silver-2); } .standings tr.p3 td:first-child { border-left: 5px solid var(--bronze-2); }
.standings td.helm { font-weight: 700; text-transform: uppercase; letter-spacing: .02em; font-size: 13.5px; }
.standings td.sail b { font: 700 16px/1 var(--display); }
.standings td.net { background: var(--card) !important; border-left: 0; border-right: 0; text-align: center; }
.standings tr.p1 td.net { background: var(--gold-row) !important; } .standings tr.p2 td.net { background: var(--silver-row) !important; } .standings tr.p3 td.net { background: var(--bronze-row) !important; }
.pts { display: inline-block; min-width: 40px; padding: 4px 10px; border-radius: 8px; background: var(--deep); color: var(--yellow); font: 800 17px/1 var(--display); text-align: center; }
.nat { white-space: nowrap; }


.nat-code { font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--muted); }
@media (prefers-color-scheme: dark) { .pts { background: var(--yellow); color: var(--abyss); } .standings th.net-h { color: var(--yellow); } }
/* big screen */
.resultsview .banner span { font-size: 28px; padding: 12px 30px; }
.resultsview .standings tbody td { background: rgba(255, 255, 255, .07) !important; border-color: rgba(255, 255, 255, .12); color: #fff; }
.resultsview .standings tr.p1 td { background: rgba(255, 195, 0, .16) !important; } .resultsview .standings tr.p2 td { background: rgba(200, 212, 220, .14) !important; } .resultsview .standings tr.p3 td { background: rgba(200, 131, 74, .18) !important; }
.resultsview .standings thead th { color: #9cc3d8; font-size: 14px; } .resultsview .standings th.net-h { color: var(--yellow); }
.resultsview .standings td.helm { font-size: 22px; } .resultsview .standings td.sail b { font-size: 26px; }
.resultsview .pts { background: var(--yellow); color: var(--abyss); font-size: 26px; min-width: 60px; }
.resultsview .nat-code { color: #cfe9f7; font-size: 16px; }
.resultsview .table-wrap.standings { background: transparent !important; border: 0; }
/* print */
.pp .standings tbody td { background: #fff; border-color: #c9d6de; color: #0b1b26; padding: 4px 8px; }
.pp .standings table.results { border-spacing: 0 3px; }
.pp .pts { background: #003459; color: #fff; font-size: 13px; padding: 2px 6px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.pp .banner span { -webkit-print-color-adjust: exact; print-color-adjust: exact; font-size: 15px; padding: 6px 14px; }
img.flag { width: 22px; height: 16px; border-radius: 3px; margin-right: 7px; vertical-align: -3px; object-fit: cover; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); font-size: 0; }
.resultsview img.flag { width: 34px; height: 25px; }
.pp img.flag { width: 16px; height: 12px; margin-right: 4px; }

/* ---------- event browser (home and club pages) ---------- */
.browse .filters { display: grid; gap: 12px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow); margin-bottom: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips button { background: var(--zebra); color: var(--ink); border: 1px solid var(--line); box-shadow: none; border-radius: 999px; padding: 6px 12px; font-size: 14px; }
.chips button small { font-size: 11px; color: var(--muted); margin-left: 2px; }
.chips button.on { background: var(--deep); color: #fff; border-color: var(--deep); } .chips button.on small { color: var(--yellow); }
.chips button.none { opacity: .55; }
.chips button:hover { border-color: var(--blue); }
.chip-add { align-self: center; font-size: 14px; font-weight: 700; text-decoration: none; color: var(--blue-d); padding: 6px 12px; border: 1px dashed var(--blue); border-radius: 999px; }
.filter-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.fl { display: grid; gap: 3px; margin: 0; font-size: 12px; font-weight: 700; color: var(--muted); min-width: 140px; flex: 1 1 140px; }
.fl span { text-transform: uppercase; letter-spacing: .06em; font-size: 11px; }
.fl input, .fl select { font-weight: 400; }
.filter-row #ev-clear { flex: 0 0 auto; height: 40px; }
.group-h { display: flex; align-items: baseline; gap: 10px; font-size: 22px; margin: 18px 0 10px; }
.group-h small { font: 600 13px var(--body); color: var(--muted); }
#ev-results .grid { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.file-btn { cursor: pointer; }
.import-drop.drag-on { outline: 3px dashed var(--yellow); outline-offset: 4px; }
#import-csv { min-height: 160px; }

/* fleet board: races still to come */
.fb-future { margin-top: 22px; }
.fb-future-h { font-size: 22px; margin: 0 0 8px; }
.fb-race { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); margin: 8px 0; box-shadow: var(--shadow); }
.fb-race > summary { cursor: pointer; padding: 12px 16px; font: 700 18px var(--display); display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.fb-race > summary small { font: 500 13px var(--body); color: var(--muted); }
.fb-race > .fb-grid { padding: 0 14px 14px; }
.fb-race .fb-group { box-shadow: none; }
.fb-future-note { margin-top: 14px; }
.fleetview .fb-future-h { color: #fff; font-size: 30px; }
.fleetview .fb-race { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .14); box-shadow: none; }
.fleetview .fb-race > summary { color: #fff; font-size: 26px; } .fleetview .fb-race > summary small { color: #9cc3d8; font-size: 16px; }
.fleetview .fb-future-note, .fleetview .fb-future .muted { color: #9cc3d8; }
.pp .fb-race { box-shadow: none; } .pp .fb-race > summary { list-style: none; }

/* boards on a phone: buttons sit in a row above the title instead of floating over it */
@media (max-width: 760px) {
  .board-links { position: static; opacity: 1; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
  .board-links a, .board-links button { font-size: 13px; padding: 5px 11px; }
  .boardview { padding: 12px max(12px, env(safe-area-inset-left, 0px)) 24px; }
  .boardview h1, .fleetview .fv-title h1, .resultsview .fv-title h1 { font-size: 24px; }
  .fv-title img { width: 34px; height: 34px; }
  .boardview .rstatus { font-size: 14px; } .boardview .rs-tag { font-size: 12px; }
  .resultsview .banner span, .fleetview .fb-head h2 { font-size: 18px; }
  .resultsview table { font-size: 15px; } .resultsview th { font-size: 11px; padding: 6px 8px; } .resultsview td { padding: 6px 8px; }
  .resultsview .standings td.helm { font-size: 14px; } .resultsview .standings td.sail b { font-size: 17px; }
  .resultsview .pts { font-size: 17px; min-width: 38px; } .resultsview .medal { min-width: 28px; height: 28px; font-size: 14px; }
  .resultsview img.flag { width: 22px; height: 16px; } .resultsview .nat-code { font-size: 12px; }
  .fleetview .fb-grid { grid-template-columns: 1fr; gap: 12px; }
  .fleetview .fb-group h3 { font-size: 22px; }
  .fleetview .fb-list b { font-size: 24px; min-width: 56px; } .fleetview .fb-list span { font-size: 14px; }
  .fleetview .fb-sailed { font-size: 14px; }
  .fleetview .fb-future-h { font-size: 22px; } .fleetview .fb-race > summary { font-size: 18px; } .fleetview .fb-race > summary small { font-size: 12px; }
}
/* board buttons always in their own row above the title (never floating over it), on every screen */
.board-links { position: static; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin: 0 0 10px; opacity: .75; }

/* zoom out / in from standard size */
:root { --zoom: 1; }
main#app { zoom: var(--zoom); }
.zoom { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--card); flex: none; }
.zoom button { background: transparent; color: var(--ink); border: 0; box-shadow: none; border-radius: 0; padding: 4px 11px; font-size: 16px; font-weight: 800; line-height: 1.2; }
.zoom button:hover { background: var(--hover); }
.zoom .zoom-pct { font-size: 12px; font-weight: 700; min-width: 50px; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.pagenav .zoom { margin-left: auto; }
.board-links .zoom { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .3); }
.board-links .zoom button { color: #fff; padding: 6px 12px; } .board-links .zoom .zoom-pct { border-color: rgba(255, 255, 255, .3); }
@media (max-width: 560px) { .pagenav .zoom .zoom-pct { min-width: 42px; padding: 4px 6px; } .pagenav .zoom button { padding: 4px 8px; } }
@media print { .zoom { display: none !important; } main#app { zoom: 1; } }
/* on the boards only the content zooms; the button row stays full size */
body.board main#app { zoom: 1; }
.boardview > :not(.board-links) { zoom: var(--zoom); }
.protest-form { display: grid; gap: 10px 12px; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; margin: 6px 0; }
.protest-form label { margin-top: 0; }
@media (max-width: 760px) { .protest-form { grid-template-columns: 1fr 1fr; } .protest-form > div:first-child { grid-column: 1 / -1; } }
.day-end { background: #fff8dc; border: 1px solid var(--yellow); border-radius: 10px; padding: 8px 12px; }
@media (prefers-color-scheme: dark) { .day-end { background: #3a3110; } }

/* boat register and the add-from-list picker */
.reg-table input { padding: 5px 7px; font-size: 14px; }
.reg-table td { padding: 4px 5px; }
.pick-open { align-items: center; }
.pick-save { margin-left: auto; display: inline-flex; gap: 6px; align-items: center; }
.pick-save input { width: 200px; padding: 6px 9px; font-size: 14px; }
.picker-card .filter-row { margin: 10px 0; }
.pick-table { max-height: 420px; overflow: auto; }
.pick-table input[type=checkbox] { width: 20px; height: 20px; }
.pick-table tr.entered td { opacity: .55; }
.picker-card .sticky-actions { background: linear-gradient(transparent, var(--card) 30%); }
.sync-line { margin: 4px 0; } .bad { color: var(--bad); font-weight: 600; }

/* scoring tablet: tidy bottom bar - edit buttons left, Submit right, all one height */
.score-actions { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: space-between; gap: 10px; }
.score-actions .sa-left { display: flex; flex-wrap: wrap; gap: 8px; }
.score-actions button, .score-actions .btn { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; padding: 0 20px; font-size: 17px; border-radius: 12px; margin: 0; line-height: 1; }
.score-actions .sa-submit { min-width: 240px; font-size: 19px; gap: 8px; }
.score-actions .sa-submit small { font-size: 13px; font-weight: 600; opacity: .85; background: rgba(255, 255, 255, .2); padding: 3px 8px; border-radius: 999px; }
.score-actions button:disabled { opacity: .45; }
@media (max-width: 640px) { .score-actions .sa-submit { flex: 1 1 100%; order: -1; } .score-actions .sa-left { flex: 1 1 100%; } .score-actions .sa-left > * { flex: 1 1 0; padding: 0 10px; } }
.score-actions.sticky-actions { background: var(--bg); padding: 10px 0 max(10px, env(safe-area-inset-bottom, 0px)); box-shadow: 0 -8px 16px -8px rgba(0, 52, 89, .25); border-top: 1px solid var(--line); }
.score-actions button, .score-actions .btn { white-space: nowrap; }
@media (max-width: 640px) { .score-actions button, .score-actions .btn { min-height: 48px; font-size: 15px; } .score-actions .sa-submit { font-size: 18px; } }

/* ---------- scoring screen: scorer information ---------- */
.race-strip { margin: 10px 0 4px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; box-shadow: var(--shadow); }
.rs-title { font: 700 15px var(--display); color: var(--deep); margin-bottom: 6px; }
.rs-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rs-chip { padding: 5px 11px; border-radius: 999px; font-weight: 700; font-size: 14px; background: var(--zebra); border: 1px solid var(--line); color: var(--muted); }
.rs-chip small { font-weight: 600; font-size: 11px; }
.rs-chip.done { background: #e3f4fc; color: var(--deep); border-color: #b5e2f5; }
.rs-chip.cur { background: var(--yellow); color: var(--abyss); border-color: var(--yellow); }
.rs-arrow { color: var(--muted); }
.rs-notes { margin: 8px 0 0; font-size: 14px; color: var(--ink); }
@media (prefers-color-scheme: dark) { .rs-title { color: #fff; } .rs-chip.done { background: #0d3a55; color: #dff3fc; border-color: #1d5577; } }
.boat { position: relative; }
.boat.up { box-shadow: inset 0 0 0 3px var(--yellow), 0 4px 0 #00557a, 0 6px 14px rgba(0, 52, 89, .3); }
.up-badge { position: absolute; top: 4px; right: 5px; font-style: normal; font-size: 10.5px; font-weight: 800; background: var(--yellow); color: var(--abyss); padding: 1px 6px; border-radius: 999px; }
.boat.done .up-badge { opacity: .6; }
.order-count { margin: -6px 0 8px; font-size: 14px; color: var(--muted); } .order-count b { color: var(--ink); }
.up-key { color: #7a5b00; font-weight: 700; }
.order li.promo { background: #fff1c2 !important; }
.order li.promo .pos { background: var(--yellow) !important; color: var(--abyss) !important; }
.order li.promo-line { justify-content: center; font-size: 12px; font-weight: 800; letter-spacing: .03em; color: #7a5b00; background: none !important; border: 0; border-top: 2px dashed var(--yellow); border-radius: 0; padding: 4px; margin: 2px 0 4px; }
@media (prefers-color-scheme: dark) { .order li.promo { background: #3a3110 !important; } .order li.promo-line, .up-key { color: var(--yellow); } }
.scorer-info { display: grid; gap: 10px; margin: 16px 0; }
.scorer-info details { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.scorer-info summary { cursor: pointer; padding: 12px 16px; font: 700 17px var(--display); display: flex; gap: 10px; align-items: baseline; }
.scorer-info summary small { font: 500 13px var(--body); color: var(--muted); }
.ip-body { padding: 0 14px 14px; }
.ip-body .fb-head .toolbar { display: none; }
.ip-body .fb-list b { font-size: 18px; min-width: 44px; }
.ip-race { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.ip-heat ol { margin: 6px 0 0; padding-left: 26px; font-size: 14px; line-height: 1.6; }
.ip-stand { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ip-stand li { display: flex; gap: 10px; align-items: center; padding: 4px 8px; border-radius: 8px; background: var(--zebra); }
.ip-stand li span { flex: 1; color: var(--muted); } .ip-stand li em { font-style: normal; font: 700 16px var(--display); color: var(--deep); }
@media (prefers-color-scheme: dark) { .ip-stand li em { color: var(--yellow); } }

/* results inside the scoring screen */
.res-top { margin: 12px 0; }
.rh-h { margin: 24px 0 8px; } .rh-h small { font: 500 13px var(--body); color: var(--muted); }
.rh-race { margin: 10px 0 16px; } .rh-race h3 { margin: 0 0 8px; display: flex; gap: 8px; align-items: center; }
.rh-heats { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.rh-heat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; box-shadow: var(--shadow); display: grid; gap: 6px; align-content: start; }
.rh-heat.cur { border-color: var(--yellow); box-shadow: 0 0 0 3px rgba(255, 195, 0, .25); }
.rh-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.rh-order { margin: 0; padding-left: 26px; font-size: 14px; line-height: 1.55; max-height: 230px; overflow: auto; }
.rh-heat button { justify-self: start; }

/* HMS: boats that changed heat since the last race */
.mv { font-style: normal; font-size: 11px; font-weight: 800; padding: 1px 7px; border-radius: 999px; margin-left: auto; white-space: nowrap; }
.mv.down { background: #e1e7ec; color: #3d4f5c; } .mv.up { background: #d4f5e8; color: #0b5d4c; }
.fb-list li.mv-down { box-shadow: inset 4px 0 0 #8aa0b0; }
.fb-moves { font-size: 13px; color: var(--muted); margin: -4px 0 10px; }
.fleetview .mv { font-size: 14px; } .fleetview .mv.down { background: rgba(255,255,255,.18); color: #fff; } .fleetview .fb-moves { color: #9cc3d8; font-size: 16px; }
.up-badge.down { background: #e1e7ec; color: #3d4f5c; } .up-badge.up { background: #d4f5e8; color: #0b5d4c; }
.boat.mv-down { box-shadow: inset 0 0 0 3px #b9c7d1, 0 4px 0 #00557a, 0 6px 14px rgba(0, 52, 89, .3); }
@media (prefers-color-scheme: dark) { .mv.down, .up-badge.down { background: #2b3d4a; color: #d6e2ea; } }

/* class editor */
.class-editor { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.cchip { display: inline-flex; align-items: center; gap: 2px; background: var(--hover); border: 1px solid var(--line); border-radius: 999px; padding: 3px 4px 3px 4px; font-weight: 700; color: var(--deep); }
.cchip button { background: transparent; border: 0; box-shadow: none; color: var(--muted); padding: 2px 7px; border-radius: 999px; font-size: 15px; line-height: 1; }
.cchip button:hover:not(:disabled) { background: var(--card); color: var(--ink); }
.cchip button:disabled { opacity: .25; }
.cchip .crm { color: var(--bad); font-size: 17px; }
.site-classes { gap: 6px 14px; }
@media (prefers-color-scheme: dark) { .cchip { color: var(--ink); } }

/* centre text in every pill-style label and button; never stretch them to fill a card */
.live-card { align-content: start; }
.live-card > * { align-self: start; }
.ec-class, .st-chip, .lc-btn, .pill, .badge, .chip, .fb-status, .rs-chip, .e-chip, .rs-tag, .mv, .up-badge, .fleet, .nat-code, .pts {
  display: inline-flex; align-items: center; justify-content: center; line-height: 1; vertical-align: middle; }
.ec-class { padding: 6px 10px; }
.st-chip { padding: 6px 12px; }
.lc-btn { padding: 8px 14px; min-height: 34px; }
.lc-links { align-items: center; }
.live-pill { padding: 6px 12px; }
.badge { padding: 4px 10px; }
.rs-chip { gap: 4px; }
button, .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; line-height: 1.15; text-align: center; }
/* dragging across a table (to scroll it) should not highlight the headings */
.table-wrap thead, .board-links, .fb-head, .banner { -webkit-user-select: none; user-select: none; }

/* ---------- accounts: login, registration, approvals ---------- */
.acct-grid { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; max-width: 880px; }
.acct-grid > .card { flex: 1 1 300px; min-width: 0; max-width: 100%; margin: 0; }
.owner-login { margin-top: 18px; border-top: 1px solid var(--line, #d5e3ea); padding-top: 12px; }
.owner-login summary { cursor: pointer; color: var(--muted, #557); font-size: .9rem; }
.signup { max-width: 760px; }
.seg { display: inline-flex; border: 2px solid var(--brand, #007EA7); border-radius: 999px; overflow: hidden; margin-bottom: 8px; flex-wrap: wrap; }
.seg label { display: flex; align-items: center; justify-content: center; padding: 8px 18px; cursor: pointer; font-weight: 700; margin: 0; color: var(--brand, #007EA7); }
.seg label.on { background: var(--brand, #007EA7); color: #fff; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label:focus-within { outline: 3px solid var(--sun, #ffc300); outline-offset: -3px; }
.who-chip { background: #e6f3f9; color: #003459; border-radius: 999px; padding: 2px 10px; font-weight: 700; }
.count-pill { display: inline-grid; place-items: center; min-width: 26px; height: 26px; border-radius: 999px; background: #ffc300; color: #003459; font-size: .85rem; padding: 0 6px; vertical-align: middle; }
.acct-req { border-left: 6px solid #ffc300; }
.req-row { display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--line, #d5e3ea); }
.req-row:first-of-type { border-top: 0; }
.pend-list { padding-left: 20px; display: grid; gap: 6px; }
td.nowrap { white-space: nowrap; }
details.card > summary { cursor: pointer; }

/* ---------- event info, online entry, notice board, rankings ---------- */
.pre { white-space: pre-wrap; }
.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; align-items: start; }
.info-card { margin: 0; }
.info-card h3 { margin: 0 0 10px; font-family: var(--display); color: var(--deep); }
.kvs { margin: 0; display: grid; gap: 0; }
.kv { display: grid; grid-template-columns: 120px 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.kv:last-child { border-bottom: 0; }
.kv dt { font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; padding-top: 2px; }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.docs { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.docs li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--zebra); }
.docs li a { font-weight: 700; text-decoration: none; display: inline-flex; gap: 8px; align-items: center; flex: 1 1 auto; }
.docs li button { margin-left: auto; }
.fee { font-family: var(--display); font-size: 28px; font-weight: 800; color: var(--deep); margin: 0 0 6px; }
.sched-day { margin: 12px 0 4px; font-size: 14px; color: var(--blue-d); text-transform: uppercase; letter-spacing: .05em; }
.sched { list-style: none; padding: 0; margin: 0; }
.sched li { display: grid; grid-template-columns: 80px 1fr; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.sched-t { font-weight: 700; font-variant-numeric: tabular-nums; }
.map { width: 100%; height: 260px; border: 0; border-radius: 10px; background: var(--zebra); }
.notices { display: grid; gap: 12px; }
.notice { background: var(--card); border: 1px solid var(--line); border-left: 6px solid var(--blue-d); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); margin-bottom: 12px; }
.notice header { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: center; }
.notice h3 { margin: 6px 0; }
.notice .pre { margin: 6px 0 0; }
.n-kind { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding: 3px 10px; border-radius: 999px; background: #e6f3f9; color: #003459; }
.n-protest { border-left-color: #ffc300; } .n-protest .n-kind { background: #fff4cc; color: #6b5200; }
.n-decision { border-left-color: #2e9d5b; } .n-decision .n-kind { background: #e3f6ea; color: #17603a; }
.hearing { margin: 0; }
.confirm-card { border-top: 6px solid #2e9d5b; max-width: 760px; }
.confirm-card h2 { margin: 4px 0 8px; font-family: var(--display); }
.confirm-card .ref { font-size: 22px; margin: 0 0 10px; }
.confirm-card .ref b { font-family: var(--display); letter-spacing: .08em; background: #ffc300; color: #003459; padding: 2px 12px; border-radius: 10px; }
.confirm-card .eyebrow, .app-hero .eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: 12px; font-weight: 800; color: var(--blue-d); }
.pay-box { background: var(--zebra); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin: 12px 0; }
.pay-box .pre { margin: 6px 0; }
.enter-card { border-top: 6px solid var(--blue-d); }
.check.agree { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; color: var(--ink); margin: 14px 0 4px; }
.check.agree input, .big-check input { width: auto; margin-top: 3px; }
.big-check { display: flex; gap: 10px; align-items: center; font-size: 16px; color: var(--ink); }
.sched-edit { display: grid; gap: 6px; }
.sched-row { display: grid; grid-template-columns: 160px 120px 1fr; gap: 6px; }
@media (max-width: 600px) { .sched-row { grid-template-columns: 1fr 1fr; } .sched-row input[name=s-text] { grid-column: 1 / -1; } .kv { grid-template-columns: 1fr; gap: 2px; } }
button.linklike { background: none; border: 0; padding: 0; color: var(--blue-d); text-decoration: underline; font: inherit; cursor: pointer; box-shadow: none; }
.ok-text { color: #2e9d5b; font-weight: 700; }
.rank-table td.rk-res { white-space: normal; }
.rk-chip { display: inline-block; font-size: 12px; padding: 1px 7px; margin: 1px 2px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); text-decoration: none; font-variant-numeric: tabular-nums; }
.rk-chip.on { background: #e6f3f9; color: #003459; border-color: #9fd3ea; font-weight: 700; }
@media print { .confirm-card .toolbar { display: none; } }
/* four header links: stay inside the screen on phones */
.top-inner { gap: 10px; min-width: 0; }
.nav { min-width: 0; overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
@media (max-width: 560px) { .brand span { display: none; } .nav { gap: 0; } .nav a { padding: 6px 7px; font-size: 13.5px; } }

/* ---------- get the app ---------- */
.nav a.nav-app { background: var(--yellow); color: var(--deep); font-weight: 800; }
.nav a.nav-app:hover { background: #ffd23f; color: var(--deep); }
.app-hero { display: flex; gap: 22px; align-items: flex-start; margin: 18px 0 8px; }
.app-hero h1 { margin: 4px 0 6px; }
.app-icon { border-radius: 22px; box-shadow: 0 8px 24px rgba(0, 31, 54, .28); flex: 0 0 auto; }
.app-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; align-items: start; }
.app-grid .card { margin: 0; }
.app-how h3, .app-qr h3 { margin: 0 0 10px; font-family: var(--display); }
.app-how.mine { border: 2px solid var(--blue-d); box-shadow: 0 0 0 4px rgba(0, 126, 167, .12), var(--shadow); }
.app-how.mine h3::after { content: "Your device"; margin-left: 8px; font: 800 11px/1 var(--body); text-transform: uppercase; letter-spacing: .06em; background: var(--yellow); color: var(--deep); padding: 4px 8px; border-radius: 999px; vertical-align: middle; }
.app-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.app-steps li { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: start; }
.st-n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--deep); color: #fff; font-weight: 800; font-size: 14px; }
.ios-share { display: inline-block; padding: 0 5px; border: 1.5px solid currentColor; border-radius: 5px; font-size: 12px; }
.app-qr { text-align: center; }
.qr { width: 200px; max-width: 100%; margin: 6px auto; background: #fff; padding: 6px; border-radius: 12px; }
.qr svg { display: block; width: 100%; height: auto; }
.ok-pill { background: #e3f6ea; color: #17603a; font-weight: 700; }
@media (max-width: 560px) { .app-hero { flex-direction: column; gap: 10px; } .app-icon { width: 72px; height: 72px; border-radius: 18px; } .nav a.nav-app { margin-left: 4px; } }
@media print { body.qr-poster .top, body.qr-poster .pagenav, body.qr-poster .app-how, body.qr-poster .app-hero .toolbar, body.qr-poster #print-qr { display: none !important; } body.qr-poster .app-grid { display: block; } body.qr-poster .qr { width: 70%; } body.qr-poster .app-qr { box-shadow: none; border: 0; } }
.app-lede { font-size: 17px; color: var(--muted); max-width: 60ch; margin: 0 0 6px; }
.na-short { display: none; }
@media (max-width: 560px) { .na-long { display: none; } .na-short { display: inline; } }
@media (max-width: 430px) { .nav a.nav-rank { display: none; } }
.rk-src { margin: 4px 0 8px; }
.rk-import { margin-top: 18px; }
.rk-import summary { cursor: pointer; }

/* race office navigation bar: stays under the page bar while scrolling a long list */
.office-nav { position: sticky; top: 118px; z-index: 5; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 10px 12px; margin: 10px 0 14px; }
.office-nav .chips { margin: 0 0 6px; }
.office-nav .filter-row { margin: 0; align-items: end; }
.office-nav .fl.grow { flex: 1 1 220px; }
.o-actions { display: flex; gap: 8px; align-items: center; margin-left: auto; flex-wrap: wrap; }
.oe-card[hidden] { display: none; }
@media (max-width: 700px) { .office-nav { position: static; } }
/* name privacy */
.ns-field { margin-top: 6px; }
.ns-field select { max-width: 360px; }
.ns-sel { width: auto; min-width: 130px; }
.ns-sel.ns-withheld, .ns-sel.ns-initials { border-color: #ffc300; background: #fff8dc; color: #6b5200; }
.ns-badge { background: #fff4cc; color: #6b5200; }
/* event level */
.lvl-chip { display: inline-block; margin-left: 6px; font: 800 11px/1 var(--body); text-transform: uppercase; letter-spacing: .06em; padding: 4px 8px; border-radius: 999px; background: #e6f3f9; color: #003459; vertical-align: middle; }
.lvl-state { background: #003459; color: #fff; }
.lvl-national { background: #ffc300; color: #003459; }
.lvl-international { background: #c0392b; color: #fff; }
.ext-enter { border-top-color: #003459; }
/* members area */
.lede-dark { font-size: 17px; color: var(--muted); max-width: 60ch; margin: 0 0 12px; }
.member-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin: 12px 0; }
.m-tile { margin: 0; display: grid; gap: 4px; text-decoration: none; color: var(--ink); transition: transform .12s, box-shadow .12s; }
.m-tile:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 52, 89, .14); }
.m-ic { font-size: 26px; }
/* generic event names */
.rt-field { display: grid; gap: 6px; }
.name-preview { margin: 8px 0 0; padding: 8px 12px; background: var(--zebra); border: 1px dashed var(--line); border-radius: 10px; }
.name-preview b { font-family: var(--display); font-size: 16px; color: var(--deep); }
.oe-prev { grid-column: 1 / -1; }
.official-src { margin-top: 8px; } .imp-card summary { cursor: pointer; }
/* home: club cards with their bigger events linked directly */
.site-wrap { display: grid; gap: 0; align-content: start; }
.site-wrap .site-card { --ec: inherit; }
.site-wrap:has(.site-major) .site-card { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.site-major { list-style: none; margin: 0; padding: 4px 0; background: var(--card); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); box-shadow: var(--shadow); }
.site-major a { display: flex; align-items: center; gap: 8px; padding: 8px 16px; text-decoration: none; color: var(--ink); }
.site-major a:hover { background: var(--hover); }
.site-major .lvl-chip { margin: 0; flex: 0 0 auto; }
.sm-name { flex: 1; min-width: 0; font-weight: 700; }
.site-major .muted { flex: 0 0 auto; }
.sm-live { padding: 2px 8px; font-size: 11px; }
.lvl-regional { background: #007ea7; color: #fff; }
/* race office entries: click a boat to edit */
.ent-list tr.ent-row { cursor: pointer; }
.ent-list tr.ent-row:hover td, .ent-list tr.ent-row:focus-visible td { background: var(--hover); }
.ent-list tr.ent-row:focus-visible { outline: 3px solid var(--yellow); outline-offset: -3px; }
.ent-list .ent-name { font-weight: 700; color: var(--deep); }
.ent-list tr.wdn td { color: var(--muted); }
.ent-list tr.wdn .ent-name { text-decoration: line-through; text-decoration-thickness: 1px; }
.ent-list tr[hidden] { display: none; }
.boat-dlg { border: 0; border-radius: 16px; padding: 0; width: min(720px, calc(100vw - 24px)); box-shadow: 0 24px 60px rgba(0, 31, 54, .35); background: var(--card); color: var(--ink); }
.boat-dlg::backdrop { background: rgba(0, 31, 54, .45); }
.boat-dlg form { padding: 18px 20px 16px; display: grid; gap: 4px; }
.bd-head { display: flex; gap: 12px; align-items: center; margin-bottom: 4px; }
.bd-head h3 { margin: 0; font-family: var(--display); }
.bd-head .bd-x { margin-left: auto; background: none; border: 0; font-size: 28px; line-height: 1; color: var(--muted); cursor: pointer; box-shadow: none; padding: 4px 8px; }
.bd-wd { display: flex; gap: 14px; align-items: center; justify-content: space-between; margin-top: 10px; padding: 12px 14px; border-radius: 12px; background: var(--zebra); border: 1px solid var(--line); }
.bd-wd p { margin: 4px 0 0; }
.bd-wd.is-wd { background: #fde2df; border-color: #f3b5ad; }
.bd-actions { margin-top: 12px; }
@media (max-width: 560px) { .bd-wd { flex-direction: column; align-items: stretch; } }
.boat-dlg { max-height: calc(100dvh - 24px); overflow: auto; }
.boat-dlg .row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 12px; }
.boat-dlg label { margin-top: 8px; }
.boat-dlg .bd-actions { position: sticky; bottom: -16px; background: var(--card); padding: 10px 0 4px; margin-bottom: -4px; }
@media (max-width: 560px) { .boat-dlg .row { grid-template-columns: 1fr 1fr; } }
.takeover-box { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--zebra); border: 1px solid var(--line); } .takeover-box p { margin: 4px 0 8px; }
/* fleet board: any race, with results */
.fb-races { margin: 4px 0 12px; }
.fb-races button.imp:not(.on) { border-style: dashed; }
.fb-res li { display: grid; grid-template-columns: 30px 52px 1fr auto; gap: 8px; align-items: baseline; }
.fb-place { font-weight: 800; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.fb-pts { font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--deep); }
.fb-wide { grid-column: 1 / -1; }
.fb-cols { columns: 2 320px; column-gap: 28px; }
.fb-cols li { break-inside: avoid; }
.fb-step { display: flex; justify-content: space-between; gap: 8px; margin: 4px 0 6px; }

.tabs.sm button.imp-tab:not(.on) { border: 1px dashed var(--line); }
.fb-view { margin: 0 0 8px; }

/* fleet board race picker: ‹ races › on one row */
.fb-step { display: flex; align-items: center; gap: 8px; margin: 4px 0 8px; }
.fb-step .fb-races { margin: 0; flex: 1; min-width: 0; }
.fb-arrow { min-width: 0 !important; width: 44px; height: 40px; padding: 0; font-size: 22px; line-height: 1; flex: 0 0 auto; }

/* event header: details can be folded away; on phones it starts folded so the tables come first */
.ev-hero { position: relative; }
.hero-toggle { display: none; position: absolute; right: 10px; bottom: 10px; z-index: 2; width: 34px; height: 34px; padding: 0; border-radius: 50%; background: rgba(255, 255, 255, .15); border: 1px solid rgba(255, 255, 255, .3); color: #fff; font-size: 16px; box-shadow: none; }
@media (max-width: 700px) {
  .hero-toggle { display: grid; place-items: center; }
  .ev-hero:not(.hero-open) { padding: 12px 52px 12px 14px; margin-bottom: 8px; }
  .ev-hero:not(.hero-open) .ec-class, .ev-hero:not(.hero-open) .ev-top p, .ev-hero:not(.hero-open) .stats, .ev-hero:not(.hero-open) .live-pill { display: none; }
  .ev-hero:not(.hero-open) h1 { font-size: 19px; margin: 0; line-height: 1.2; }
  .ev-hero:not(.hero-open)::after { display: none; }
  .ev-hero:not(.hero-open) .hero-toggle { top: 50%; bottom: auto; transform: translateY(-50%); }
  /* status notice: one line, tap to read it all */
  .rstatus { padding: 6px 10px; margin: 6px 0; cursor: pointer; }
  .rstatus:not(.open) { flex-wrap: nowrap; }
  .rstatus:not(.open) > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .rstatus .rs-tag { padding: 4px 8px; font-size: 11px; }
  /* latest post and club link on one small row */
  .ev-latest { margin: 4px 0; font-size: 12px; }
  .ev-sites { margin: 4px 0 6px; } .ev-sites .btn { padding: 4px 10px; font-size: 12px; }
  /* only the main bar stays fixed while scrolling */
  .pagenav { position: static; }
  .tabs { margin: 8px 0; }
}
/* phones: tabs and race buttons are one row you swipe sideways */
@media (max-width: 700px) {
  .tabs:not(.sm):not(.view-toggle), .fb-races { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; width: 100%; -webkit-overflow-scrolling: touch; }
  .tabs:not(.sm):not(.view-toggle)::-webkit-scrollbar, .fb-races::-webkit-scrollbar { display: none; }
  .tabs:not(.sm):not(.view-toggle) button, .fb-races button { flex: 0 0 auto; width: auto; white-space: nowrap; }
  .tabs:not(.sm):not(.view-toggle) button { padding: 8px 12px; font-size: 15px; }
  .fb-races button { padding: 6px 12px; min-height: 0; }
  .fb-arrow { width: 38px; height: 36px; }
  .tabs.sm { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .tabs.sm button { flex: 0 0 auto; }
}
@media (max-width: 700px) { .fb-head .toolbar { display: none; } .fb-head h2 { margin: 4px 0; font-size: 22px; } .fb-head p { margin: 0 0 6px; } .fb-moves { font-size: 13px; } }
.prov-badge { background: #fff4cc; color: #6b5200; font-size: 11px; vertical-align: middle; margin-left: 6px; }
/* practice scoring */
.practice-bar { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; padding: 10px 14px; margin: 10px 0; border-radius: 12px; background: repeating-linear-gradient(135deg, #fff8dc, #fff8dc 12px, #fff1c2 12px, #fff1c2 24px); border: 1px solid #f0d27a; }
.practice-bar .view-toggle { margin: 0; }
.cmp-races { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.cmp-race { margin: 0; border-left: 6px solid var(--line); } .cmp-race h3 { margin: 0 0 6px; }
.cmp-race.cmp-ok { border-left-color: #2e9d5b; } .cmp-race.cmp-bad { border-left-color: #c0392b; } .cmp-race.cmp-pend { border-left-color: #ffc300; }
.cmp-t { width: 100%; font-size: 14px; } .cmp-t th { position: static; }
.cmp-st tr.cmp-diff td { background: #fff4cc; }