/* Juicebox Summer League — front end.
 * Inherits Twenty Seventeen (Dark) fonts and body colours; all plugin colours
 * are tokens on .jb-app so they're easy to adjust. */

.jb-app {
	--jb-bg: #222;
	--jb-surface: #0f1e2e;
	--jb-surface-2: #1e3550;
	--jb-border: #2c4560;
	--jb-primary: #035c93;
	--jb-accent: #4a90c4;
	--jb-accent-2: #4083a8;
	--jb-text: #eee;
	--jb-heading: #fff;
	--jb-muted: #a0aec0;
	--jb-win: #7ed3a1;
	--jb-radius: 8px;
	--league: var(--jb-accent);

	color: var(--jb-text);
	padding-bottom: 2em;
}

/* Light-scheme fallback if the theme's colour scheme changes later. */
body:not(.colors-dark) .jb-app {
	--jb-bg: #fff;
	--jb-surface: #f3f6f9;
	--jb-surface-2: #e6edf4;
	--jb-border: #cfd9e3;
	--jb-accent: #035c93;
	--jb-accent-2: #035c93;
	--jb-text: #222;
	--jb-heading: #0f1e2e;
	--jb-muted: #55606e;
	--jb-win: #1b7a43;
}

.jb-app *,
.jb-app *::before,
.jb-app *::after { box-sizing: border-box; }

.jb-app a { color: var(--jb-accent); box-shadow: none; }
.jb-app a:hover,
.jb-app a:focus { color: var(--jb-heading); box-shadow: none; }
.jb-app a:focus-visible,
.jb-app summary:focus-visible { outline: 2px solid var(--jb-accent); outline-offset: 2px; }
.jb-app abbr { border: 0; text-decoration: none; cursor: help; }

.jb-muted { color: var(--jb-muted); }
.jb-small { font-size: .8em; display: block; }
.jb-nowrap { white-space: nowrap; }
.jb-empty { padding: 2em 0; text-align: center; color: var(--jb-muted); }

.jb-section-title {
	color: var(--jb-heading);
	font-size: 1.25rem;
	font-weight: 800;
	letter-spacing: .02em;
	margin: 1.5em 0 .4em;
	text-transform: none;
}

/* ── Header band ───────────────────────────────────────────────────── */
.jb-hero {
	display: flex;
	align-items: center;
	gap: 1.25em;
	padding: 1.5em 0 1em;
}
.jb-hero__logo { width: 96px; height: 96px; flex: 0 0 auto; }
.jb-hero__eyebrow {
	margin: 0;
	color: var(--jb-muted);
	font-size: .75rem;
	font-weight: 800;
	letter-spacing: .15em;
	text-transform: uppercase;
}
.jb-hero__title {
	margin: .1em 0 .2em;
	padding: 0;
	color: var(--jb-heading);
	font-size: 1.6rem;
	font-weight: 800;
	line-height: 1.2;
}
.jb-hero__meta { margin: 0; color: var(--jb-muted); font-size: .875rem; line-height: 1.5; }

/* ── Sub-navigation ────────────────────────────────────────────────── */
.jb-subnav { border-bottom: 1px solid var(--jb-border); margin-bottom: 1.25em; }
.jb-subnav ul { display: flex; flex-wrap: wrap; gap: .25em; list-style: none; margin: 0; padding: 0; }
.jb-subnav li { margin: 0; }
.jb-subnav a {
	display: block;
	padding: .65em 1em;
	color: var(--jb-text);
	font-size: .875rem;
	font-weight: 700;
	text-decoration: none;
	border-bottom: 3px solid transparent;
}
.jb-app .jb-subnav a[aria-current="page"] { color: var(--jb-heading); border-bottom-color: var(--jb-primary); }
.jb-subnav a:hover { border-bottom-color: var(--jb-surface-2); }

/* ── Week navigation ───────────────────────────────────────────────── */
.jb-weeknav { margin-bottom: 1.25em; }
.jb-weeknav__bar {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: .5em;
}
.jb-weeknav__title {
	margin: 0;
	padding: 0;
	color: var(--jb-heading);
	font-size: 1.25rem;
	font-weight: 800;
	text-align: center;
	text-transform: none;
	letter-spacing: 0;
}
.jb-weeknav__step {
	font-size: .875rem;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}
.jb-weeknav__step--next { justify-self: end; }
.jb-weeknav__pills {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .35em;
	list-style: none;
	margin: .75em 0 0;
	padding: 0;
}
.jb-weeknav__pills li { margin: 0; }
.jb-weeknav__pills a {
	display: grid;
	place-items: center;
	min-width: 2.4em;
	height: 2.4em;
	border-radius: 999px;
	background: var(--jb-surface);
	border: 1px solid var(--jb-border);
	color: var(--jb-text);
	font-size: .8rem;
	font-weight: 700;
	text-decoration: none;
}
.jb-app .jb-weeknav__pills a.is-current { border-color: var(--jb-accent); }
.jb-app .jb-weeknav__pills a.is-active { background: var(--jb-primary); border-color: var(--jb-primary); color: #fff; }

.jb-badge {
	display: inline-block;
	vertical-align: middle;
	margin-left: .4em;
	padding: .15em .55em;
	border-radius: 999px;
	background: var(--jb-primary);
	color: #fff;
	font-size: .65rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
}

/* ── Chips ─────────────────────────────────────────────────────────── */
.jb-chip {
	display: inline-flex;
	align-items: center;
	gap: .45em;
	font-weight: 700;
	line-height: 1.2;
}
.jb-chip__dot {
	width: .8em;
	height: .8em;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--chip);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .35);
}
.jb-chip--league {
	padding: .2em .6em;
	border-radius: 999px;
	border: 1px solid var(--chip);
	font-size: .75rem;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--jb-heading);
}

/* ── Nights & games ────────────────────────────────────────────────── */
.jb-night { margin-bottom: 1.75em; }
.jb-night__title {
	margin: 1em 0 .6em;
	padding: 0;
	color: var(--jb-heading);
	font-size: 1rem;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.jb-slot { display: grid; gap: .6em; margin-bottom: .6em; }
@media (min-width: 600px) {
	.jb-slot--multi { grid-template-columns: 1fr 1fr; }
}

.jb-game {
	background: var(--jb-surface);
	border: 1px solid var(--jb-border);
	border-left: 4px solid var(--league);
	border-radius: var(--jb-radius);
	padding: .75em .9em;
}
.jb-game.is-cancelled { opacity: .6; }
.jb-game.is-cancelled .jb-game__teams { text-decoration: line-through; }
.jb-game__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .4em .75em;
	font-size: .8rem;
	color: var(--jb-muted);
}
.jb-game__time { color: var(--jb-heading); font-weight: 700; font-variant-numeric: tabular-nums; }
.jb-game__title {
	margin: .5em 0 0;
	color: var(--jb-heading);
	font-size: .8rem;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
}
.jb-game__teams { margin-top: .55em; display: grid; gap: .3em; }
.jb-game__side {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5em;
	font-size: 1rem;
}
.jb-game__side.is-tbc .jb-chip { color: var(--jb-muted); font-style: italic; font-weight: 600; }
.jb-game__side.is-winner .jb-chip { color: var(--jb-heading); }
.jb-game__score {
	min-width: 1.6em;
	text-align: right;
	font-size: 1.15rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	color: var(--jb-muted);
}
.jb-game__side.is-winner .jb-game__score { color: var(--jb-heading); }
.jb-so { margin-left: .3em; font-size: .6em; color: var(--jb-win); vertical-align: middle; }
.jb-game__status {
	margin: .45em 0 0;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--jb-muted);
}
.jb-game.is-final .jb-game__status { color: var(--jb-win); }

.jb-break {
	display: flex;
	align-items: center;
	gap: .75em;
	margin: .9em 0;
	color: var(--jb-muted);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.jb-break::before,
.jb-break::after { content: ""; flex: 1; border-top: 1px dashed var(--jb-border); }

/* ── Cards & tables ────────────────────────────────────────────────── */
.jb-card {
	background: var(--jb-surface);
	border: 1px solid var(--jb-border);
	border-radius: var(--jb-radius);
	padding: 1em;
	margin-bottom: 1em;
}
.jb-ladder { border-top: 4px solid var(--league); }
.jb-card__title { margin: 0 0 .75em; padding: 0; font-size: 1rem; text-transform: none; letter-spacing: 0; }

.jb-table-wrap { overflow-x: auto; }
.jb-app .jb-table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	font-size: .9rem;
	font-variant-numeric: tabular-nums;
}
.jb-app .jb-table th,
.jb-app .jb-table td {
	padding: .5em .45em;
	border: 0;
	border-bottom: 1px solid var(--jb-border);
	text-align: left;
	vertical-align: middle;
}
.jb-app .jb-table thead th {
	color: var(--jb-muted);
	font-size: .7rem;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.jb-app .jb-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, .03); }
.jb-app .jb-table tbody tr:hover { background: var(--jb-surface-2); }
.jb-app .jb-table .jb-num { text-align: center; width: 2.6em; }
.jb-app .jb-table tbody th { font-weight: 700; color: var(--jb-heading); }
.jb-pts { font-weight: 800; color: var(--jb-heading); }
.jb-table tr.is-cancelled td { color: var(--jb-muted); text-decoration: line-through; }
.jb-table tr.is-cancelled td.jb-num { text-decoration: none; }
.jb-finals-tag { color: var(--jb-accent); font-weight: 700; }
@media (max-width: 480px) {
	.jb-hide-sm { display: none; }
}

/* ── Leagues / rosters ─────────────────────────────────────────────── */
.jb-league { margin: 1.5em 0 2em; }
.jb-league__title {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .6em;
	margin: 0 0 .5em;
	padding: 0;
	font-size: 1rem;
	text-transform: none;
	letter-spacing: 0;
}
.jb-league__title .jb-muted { font-size: .85rem; font-weight: 600; }
.jb-league__notes {
	margin: 0 0 1em;
	padding: .5em .8em;
	border-left: 3px solid var(--league);
	background: var(--jb-surface);
	font-size: .875rem;
}
.jb-roster-grid { display: grid; gap: 1em; }
@media (min-width: 600px) {
	.jb-roster-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
	.jb-roster-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.jb-roster { margin: 0; display: flex; flex-direction: column; }
.jb-roster__role {
	margin: .75em 0 .25em;
	color: var(--jb-muted);
	font-size: .7rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.jb-roster__list { list-style: none; margin: 0; padding: 0; font-size: .9rem; }
.jb-roster__list li { display: flex; gap: .4em; padding: .15em 0; margin: 0; }
.jb-jersey { min-width: 2.2em; color: var(--jb-muted); font-variant-numeric: tabular-nums; }
.jb-roster__cal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5em 1em;
	margin: auto 0 0;
	padding-top: 1em;
}

.jb-app .jb-btn {
	display: inline-block;
	padding: .5em .9em;
	border-radius: 6px;
	background: var(--jb-primary);
	color: #fff;
	font-size: .8rem;
	font-weight: 700;
	text-decoration: none;
}
.jb-app .jb-btn:hover,
.jb-app .jb-btn:focus { background: var(--jb-accent-2); color: #fff; }
.jb-link-sm { font-size: .8rem; }

/* ── Full schedule ─────────────────────────────────────────────────── */
.jb-jump { display: flex; flex-wrap: wrap; gap: .5em; margin-bottom: 1em; }
.jb-jump a { text-decoration: none; }
.jb-week {
	background: var(--jb-surface);
	border: 1px solid var(--jb-border);
	border-left: 4px solid var(--league);
	border-radius: var(--jb-radius);
	margin-bottom: .5em;
}
.jb-week summary {
	display: flex;
	justify-content: space-between;
	gap: 1em;
	padding: .7em .9em;
	cursor: pointer;
	color: var(--jb-heading);
	font-weight: 700;
	list-style-position: inside;
}
.jb-week[open] summary { border-bottom: 1px solid var(--jb-border); }
.jb-week .jb-table { font-size: .85rem; }
.jb-week .jb-table td,
.jb-week .jb-table th { padding-left: .9em; }

/* ── Footer band ───────────────────────────────────────────────────── */
.jb-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1.5em 2em;
	margin-top: 2.5em;
	padding-top: 1.5em;
	border-top: 1px solid var(--jb-border);
}
.jb-footer__logo {
	display: inline-block;
	line-height: 0;
	padding: 10px 14px;
	border-radius: var(--jb-radius);
	background: #f4f6f8; /* light tile: the IHNSW mark is navy and unreadable on dark */
}
.jb-footer__izhc,
.jb-footer__ihnsw { height: 72px; width: auto; }
.jb-footer__text { flex-basis: 100%; margin: 0; text-align: center; color: var(--jb-muted); font-size: .8rem; }

@media (max-width: 480px) {
	.jb-hero { gap: .9em; }
	.jb-hero__logo { width: 72px; height: 72px; }
	.jb-hero__title { font-size: 1.3rem; }
	.jb-subnav a { padding: .6em .7em; }
}

/* Polish: no indent until jersey numbers exist; visible open/closed marker on weeks. */
.jb-jersey:empty { display: none; }
.jb-week summary { list-style: none; }
.jb-week summary::-webkit-details-marker { display: none; }
.jb-week summary > span:first-child::before {
	content: "";
	display: inline-block;
	width: .45em;
	height: .45em;
	margin-right: .6em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
	transition: transform .15s ease;
	vertical-align: .1em;
}
.jb-week[open] summary > span:first-child::before { transform: rotate(45deg); }

/* ── Rules page ────────────────────────────────────────────────────── */
.jb-glance { display: grid; gap: 1em; }
@media (min-width: 700px) {
	.jb-glance { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.jb-glance__card { margin: 0; border-top: 4px solid var(--league); }
.jb-glance__list {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: .35em 1em;
	margin: 0;
	font-size: .9rem;
}
.jb-glance__list dt {
	margin: 0;
	color: var(--jb-muted);
	font-size: .7rem;
	font-weight: 800;
	letter-spacing: .08em;
	line-height: 1.9;
	text-transform: uppercase;
}
.jb-glance__list dd { margin: 0; }

.jb-rules { margin-top: 1.5em; }
.jb-rules h2 {
	margin: 1.75em 0 .5em;
	padding: 0 0 .35em;
	border-bottom: 1px solid var(--jb-border);
	color: var(--jb-heading);
	font-size: 1.1rem;
	font-weight: 800;
	letter-spacing: 0;
	text-transform: none;
}
.jb-rules h3 {
	margin: 1.25em 0 .4em;
	padding: 0;
	color: var(--jb-muted);
	font-size: .75rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.jb-rules ul { margin: 0 0 1em 1.25em; padding: 0; }
.jb-rules li { margin: 0 0 .45em; line-height: 1.55; }
.jb-rules p { margin: 0 0 1em; }
.jb-rules strong { color: var(--jb-heading); }
.jb-rules a { text-decoration: underline; }