/* responsive2026 results template: one layout from phone to widescreen.
   Plain CSS, no framework. Tokens follow assets/mobile/mobile.css. */

:root {
	--brand: #1f4e79;
	--brand-dark: #163a5b;
	--brand-light: #e8f0f8;
	--bg: #eef1f4;
	--card: #ffffff;
	--text: #1d2329;
	--muted: #5d6873;
	--line: #d5dbe1;
	--row-alt: #f5f7f9;
	--head-bg: #e3e9ef;
	--warn-bg: #fff4d6;
	--warn-line: #e0b84a;
	--radius: 8px;
	--first-col: 3rem;
}

@media (prefers-color-scheme: dark) {
	:root {
		--brand: #4f8fc9;
		--brand-dark: #0f2a42;
		--brand-light: #1c2b3a;
		--bg: #12171c;
		--card: #1b2229;
		--text: #e6eaee;
		--muted: #9aa6b2;
		--line: #2f3a45;
		--row-alt: #20282f;
		--head-bg: #26313b;
		--warn-bg: #3b3317;
		--warn-line: #8a7424;
	}
}

* { box-sizing: border-box; }

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

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font: 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "PingFang SC", "Microsoft YaHei", Helvetica, Arial, sans-serif;
}

a { color: var(--brand); }
img { max-width: 100%; }

.r-wrap {
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 16px;
}

/* ---- event header ---- */
.r-header { background: var(--brand-dark); color: #fff; }
.r-banner { display: block; margin: 0 auto; max-width: 100%; height: auto; }
.r-hero { padding: 14px 0 12px; }
.r-event { margin: 0; font-size: 1.6rem; line-height: 1.2; font-weight: 700; }
.r-event a { color: inherit; text-decoration: none; }
.r-dates, .r-venue { margin: 2px 0 0; opacity: .9; }
.r-links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 10px 0 0; padding: 0; list-style: none; font-size: .95rem; }
.r-links a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

@media (min-width: 720px) {
	.r-event { font-size: 2.1rem; }
	.r-hero { padding: 20px 0 16px; }
}

/* ---- page ---- */
.r-main { padding-top: 16px; padding-bottom: 32px; }
.r-main h1 { margin: 0 0 4px; font-size: 1.4rem; line-height: 1.25; }
.r-main h2 { margin: 24px 0 8px; font-size: 1.15rem; }
.r-sub, .r-hint { margin: 0 0 12px; color: var(--muted); }
.r-back { display: inline-block; margin-bottom: 6px; text-decoration: none; font-size: .95rem; }
.r-warn {
	margin: 0 0 12px; padding: 10px 12px;
	background: var(--warn-bg); border: 1px solid var(--warn-line); border-radius: var(--radius);
}
.r-empty { padding: 16px 0; color: var(--muted); }

/* ---- class / race navigation: links, scrolls sideways on narrow screens ---- */
.r-tabs { margin: 12px -16px 14px; border-bottom: 1px solid var(--line); background: var(--card); }
.r-tabs ul {
	display: flex; gap: 2px; margin: 0; padding: 0 16px; list-style: none;
	overflow-x: auto; scrollbar-width: none;
}
.r-tabs ul::-webkit-scrollbar { display: none; }
.r-tabs a {
	display: block; padding: 10px 14px; white-space: nowrap;
	color: var(--text); text-decoration: none; border-bottom: 3px solid transparent;
}
.r-tabs a:hover { background: var(--row-alt); }
.r-tabs a[aria-current="page"] { color: var(--brand); border-bottom-color: var(--brand); font-weight: 600; }
@media (min-width: 1132px) {
	.r-tabs { margin-left: 0; margin-right: 0; border: 1px solid var(--line); border-radius: var(--radius); }
}

/* ---- home: class cards ---- */
.r-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.r-card {
	display: flex; gap: 12px; align-items: center; padding: 12px;
	background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
}
.r-logo { flex: none; display: block; line-height: 0; }
.r-logo .classlogo { width: 80px; height: auto; max-height: 80px; object-fit: contain; }
.r-card-body { min-width: 0; }
.r-card h3 { margin: 0; font-size: 1.05rem; line-height: 1.25; }
.r-card h3 a { text-decoration: none; }
.r-card h3 a:hover { text-decoration: underline; }
.r-card p { margin: 2px 0 0; color: var(--muted); font-size: .9rem; }
.r-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.r-chip {
	display: inline-block; padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px;
	font-size: .85rem; text-decoration: none; background: var(--brand-light); color: var(--brand);
}
.r-chip.is-off { background: transparent; color: var(--muted); }

/* ---- results tables ---- */
.r-table-wrap {
	overflow-x: auto; -webkit-overflow-scrolling: touch;
	background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
}
.r-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .95rem; }
.r-table th, .r-table td {
	padding: 8px 10px; text-align: left; white-space: nowrap;
	border-bottom: 1px solid var(--line); vertical-align: top;
}
.r-table thead th { background: var(--head-bg); font-weight: 600; font-size: .85rem; }
.r-table tbody tr { background: var(--card); }
.r-table tbody tr:nth-child(even) { background: var(--row-alt); }
.r-table tbody tr:last-child td { border-bottom: 0; }
.r-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.r-table .r-name { white-space: normal; min-width: 7rem; }
.r-table .r-owner { display: none; }
.r-table .r-code { color: var(--muted); font-size: .85em; }
.r-table .flag { vertical-align: -3px; margin-right: 4px; }
.r-table .r-firsts { font-weight: 600; }

/* sticky place and sail number on the left, total on the right */
.r-pointscore .c-place, .r-pointscore .c-sail,
.r-pointscore .c-total { position: sticky; z-index: 1; background: inherit; }
.r-pointscore thead .c-place, .r-pointscore thead .c-sail,
.r-pointscore thead .c-total { background: var(--head-bg); z-index: 2; }
.r-pointscore .c-place { left: 0; width: var(--first-col); min-width: var(--first-col); max-width: var(--first-col); text-align: center; }
.r-pointscore .c-sail { left: var(--first-col); border-right: 1px solid var(--line); }
.r-pointscore .c-total { right: 0; border-left: 1px solid var(--line); font-weight: 700; }

/* daily results: class by day */
.r-days .c-class { position: sticky; left: 0; z-index: 1; background: inherit; min-width: 9rem; border-right: 1px solid var(--line); }
.r-days thead .c-class { background: var(--head-bg); z-index: 2; }
.r-days td.num, .r-days th.num { text-align: center; }
.r-days .r-chip { padding: 2px 10px; }
.r-race { margin-bottom: 24px; }
.r-race h2 { margin-top: 20px; }

[aria-sort] { cursor: pointer; }
th.sortable-h { cursor: pointer; }
th[aria-sort="ascending"]::after { content: " \25B2"; font-size: .7em; }
th[aria-sort="descending"]::after { content: " \25BC"; font-size: .7em; }

.r-count { margin: 8px 0 0; color: var(--muted); font-size: .9rem; }

/* phones: owner sits under the boat name and lower-priority columns are hidden */
.r-table .hide-sm { display: none; }
.r-table .r-under { display: block; color: var(--muted); font-size: .85em; }

/* wider screens: show owner and country as their own columns */
@media (min-width: 720px) {
	.r-table .hide-sm { display: table-cell; }
	.r-table .r-owner { display: table-cell; }
	.r-table .r-under { display: none; }
	.r-table th, .r-table td { padding: 8px 12px; }
}

/* ---- footer ---- */
.r-footer { padding: 16px 0 28px; color: var(--muted); font-size: .85rem; text-align: center; }
.r-footer img { display: block; margin: 0 auto 10px; height: auto; }
.r-footer p { margin: 2px 0; }

/* ---- print ---- */
@media print {
	body { background: #fff; color: #000; }
	.r-header { background: #fff; color: #000; border-bottom: 2px solid #000; }
	.r-links, .r-tabs, .r-back, .r-chips { display: none; }
	.r-table-wrap { overflow: visible; border: 0; }
	.r-table .hide-sm { display: table-cell; }
	.r-table .r-owner { display: table-cell; }
	.r-table .r-under { display: none; }
	.r-pointscore .c-place, .r-pointscore .c-sail, .r-pointscore .c-total { position: static; }
	.r-table tbody tr, .r-table tbody tr:nth-child(even) { background: #fff; }
	.r-table { font-size: 10pt; }
}