/* Mobile results (mobile controller, views/public/results/mobile/default and default-nb).
   Plain CSS, no framework. Replaces jQuery Mobile 1.1.1 (Oct 2026). */

:root {
	--brand: #1f4e79;
	--brand-dark: #163a5b;
	--brand-light: #e8f0f8;
	--bg: #eef1f4;
	--card: #ffffff;
	--text: #1d2329;
	--muted: #5d6873;
	--line: #d5dbe1;
	--row-alt: #f5f7f9;
	--warn-bg: #fff4d6;
	--warn-line: #e0b84a;
	--ok-bg: #e3f4e6;
	--ok-line: #6bb37a;
	--err-bg: #fde8e8;
	--err-line: #d66;
}

* { box-sizing: border-box; }

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

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font: 15px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

a { color: var(--brand); }

/* ---- header ---- */
.m-header {
	position: sticky;
	top: 0;
	z-index: 10;
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 52px;
	padding: 6px 12px;
	background: var(--brand);
	color: #fff;
	box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.m-header .m-back {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-left: -6px;
	border-radius: 8px;
	color: #fff;
	text-decoration: none;
	font-size: 26px;
	line-height: 1;
}
.m-header .m-back:active { background: var(--brand-dark); }
.m-header .m-titles { min-width: 0; }
.m-header .m-event {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.m-header .m-page {
	margin: 0;
	font-size: 13px;
	font-weight: 400;
	opacity: .85;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ---- content ---- */
.m-content { padding: 12px; max-width: 960px; margin: 0 auto; }

.m-content h2 { font-size: 17px; margin: 4px 0 8px; }
.m-content h3 { font-size: 15px; margin: 16px 0 8px; }
.m-sub { color: var(--muted); margin: 0 0 10px; font-size: 14px; }

.m-notice, .m-warn, .m-error {
	padding: 10px 12px;
	margin: 0 0 12px;
	border-radius: 8px;
	border: 1px solid;
}
.m-notice { background: var(--ok-bg); border-color: var(--ok-line); }
.m-warn { background: var(--warn-bg); border-color: var(--warn-line); }
.m-error { background: var(--err-bg); border-color: var(--err-line); }
.m-error p { margin: 2px 0; }

/* ---- sections and link lists ---- */
details.m-section {
	background: var(--card);
	border-radius: 10px;
	margin: 0 0 12px;
	box-shadow: 0 1px 2px rgba(0,0,0,.08);
	overflow: hidden;
}
details.m-section > summary {
	list-style: none;
	cursor: pointer;
	padding: 12px 14px;
	font-weight: 600;
	background: var(--brand-light);
	color: var(--brand-dark);
	display: flex;
	justify-content: space-between;
	align-items: center;
}
details.m-section > summary::-webkit-details-marker { display: none; }
details.m-section > summary::after { content: "+"; font-size: 20px; line-height: 1; }
details.m-section[open] > summary::after { content: "\2212"; }

ul.m-links { list-style: none; margin: 0; padding: 0; }
ul.m-links li + li { border-top: 1px solid var(--line); }
ul.m-links a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 13px 14px;
	color: var(--text);
	text-decoration: none;
}
ul.m-links a::after { content: "\203A"; color: var(--muted); font-size: 22px; line-height: 1; }
ul.m-links a:active { background: var(--brand-light); }
ul.m-links .m-empty { padding: 12px 14px; color: var(--muted); }

/* a list item that opens a nested list (Information > Entry List > classes) */
details.m-subsection > summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 13px 14px;
}
details.m-subsection > summary::-webkit-details-marker { display: none; }
details.m-subsection > summary::after { content: "\203A"; color: var(--muted); font-size: 22px; line-height: 1; transition: transform .15s; }
details.m-subsection[open] > summary::after { transform: rotate(90deg); }
details.m-subsection[open] > summary { font-weight: 600; }
details.m-subsection > ul.m-links { border-top: 1px solid var(--line); background: var(--row-alt); }
details.m-subsection > ul.m-links a { padding-left: 30px; }
.m-count-badge {
	margin-left: auto;
	margin-right: 8px;
	padding: 1px 8px;
	border-radius: 10px;
	background: var(--brand-light);
	color: var(--brand-dark);
	font-size: 12px;
	font-weight: 600;
}

/* race buttons on the pointscore page */
.m-races {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
	gap: 8px;
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
}
.m-races a {
	display: block;
	padding: 10px 4px;
	text-align: center;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 8px;
	text-decoration: none;
	font-weight: 600;
}
.m-races a:active { background: var(--brand-light); }

/* ---- tables: scroll sideways inside their own box, never the page ---- */
.m-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	background: var(--card);
	border-radius: 10px;
	box-shadow: 0 1px 2px rgba(0,0,0,.08);
	margin: 0 0 12px;
}
.m-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}
.m-table th, .m-table td {
	padding: 7px 6px;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--line);
}
.m-table th {
	background: var(--brand);
	color: #fff;
	font-weight: 600;
	white-space: nowrap;
}
.m-table tbody tr:nth-child(even) td { background: var(--row-alt); }
.m-table tbody tr:nth-child(odd) td { background: var(--card); }
.m-table tbody tr:last-child td { border-bottom: 0; }

/* keep the sail number in view while the rest of the row scrolls */
.m-table .pin {
	position: sticky;
	left: 0;
	z-index: 1;
	box-shadow: 1px 0 0 var(--line);
}
.m-table th.pin { background: var(--brand); }

.m-table .num, .m-table .nowrap { white-space: nowrap; }
.m-table .num { text-align: right; }
.m-table .code { font-size: .8em; color: var(--muted); }

/* sortable headers (entry list) */
.m-table.sortable th { cursor: pointer; user-select: none; }
.m-table.sortable th[aria-sort="ascending"]::after { content: " \25B2"; font-size: .7em; }
.m-table.sortable th[aria-sort="descending"]::after { content: " \25BC"; font-size: .7em; }

.m-count { color: var(--muted); font-size: 13px; margin: -4px 0 12px; }

/* ---- forms ---- */
.m-form {
	background: var(--card);
	border-radius: 10px;
	padding: 14px;
	box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
.m-field { margin: 0 0 14px; }
.m-field > label, .m-field > .m-label {
	display: block;
	font-weight: 600;
	margin: 0 0 5px;
}
.m-field em { color: #c33; font-style: normal; }
.m-form input[type=text], .m-form input[type=number], .m-form select, .m-form textarea {
	width: 100%;
	padding: 10px;
	font: inherit;
	font-size: 16px; /* 16px stops iOS zooming on focus */
	color: var(--text);
	background: #fff;
	border: 1px solid #b8c2cc;
	border-radius: 8px;
}
.m-form textarea { min-height: 120px; resize: vertical; }
.m-form input:focus, .m-form select:focus, .m-form textarea:focus {
	outline: 2px solid var(--brand);
	outline-offset: 0;
	border-color: var(--brand);
}
.m-form input:user-invalid, .m-form select:user-invalid, .m-form textarea:user-invalid { border-color: #c33; }

.m-choice { display: flex; gap: 8px; }
.m-choice label {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 10px;
	border: 1px solid #b8c2cc;
	border-radius: 8px;
	font-weight: 600;
}
.m-choice input { width: 18px; height: 18px; margin: 0; }
.m-choice label:has(input:checked) { background: var(--brand-light); border-color: var(--brand); }

.m-button {
	display: block;
	width: 100%;
	padding: 13px;
	font: inherit;
	font-size: 16px;
	font-weight: 600;
	color: #fff;
	background: var(--brand);
	border: 0;
	border-radius: 8px;
	cursor: pointer;
}
.m-button:active { background: var(--brand-dark); }
.m-button[disabled] { opacity: .6; }

/* info pages: content comes from the workbench editor */
.m-page-body {
	background: var(--card);
	border-radius: 10px;
	padding: 12px 14px;
	box-shadow: 0 1px 2px rgba(0,0,0,.08);
	overflow-wrap: anywhere;
}
.m-page-body img, .m-page-body iframe { max-width: 100%; height: auto; }
.m-page-body table { display: block; max-width: 100%; overflow-x: auto; }

.m-footer { text-align: center; color: var(--muted); font-size: 12px; padding: 8px 12px 24px; }
.m-footer a { color: var(--muted); }