*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
:root {
	--paper: #f2f0ea;
	--card: #ffffff;
	--rule: #d8d8d4;
	--rule-soft: #e8e6e0;
	--ink: #111111;
	--mute: #666660;
	--faint: #999994;
	--navy: #1a3a6b;
	--amber: #8a4800;
	--green: #1a5c1a;
	--red: #b22222;
	--sel: #eef2f9;
	--rule-strong: #555555;
	--edge: #111111;
	--gold: #b8860b;
	--silver: #74747f;
	--bronze: #96562a;
	--serif: "Libre Baskerville", Georgia, "Times New Roman", serif;
	--display: "Playfair Display", Georgia, "Times New Roman", serif;
	--mono: "Source Code Pro", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
/* Light is the default: an un-stamped root renders light even when the OS asks for
   dark. Only an explicit choice below switches it, so the board looks the same to
   everyone unless they opt out. */
:root[data-theme="dark"] {
	--paper: #131312;
	--card: #1b1b19;
	--rule: #34342f;
	--rule-soft: #262622;
	--ink: #eceae1;
	--mute: #a5a49b;
	--faint: #7a7a71;
	--navy: #8ab0ea;
	--amber: #e0a44a;
	--green: #6cc06c;
	--red: #e0736b;
	--sel: #232a35;
	--rule-strong: #6e6e64;
	--edge: #8c8c82;
	--gold: #e3b23c;
	--silver: #b9b9c6;
	--bronze: #cf8b52;
}
body {
	font-family: var(--serif);
	background: var(--paper);
	color: var(--ink);
	-webkit-text-size-adjust: 100%;
	line-height: 1.5;
}
.wrap {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 1.25rem 3rem;
}

.masthead {
	background: var(--card);
	border-top: 3px solid var(--edge);
	border-bottom: 1px solid var(--rule);
	padding: 6px 1.25rem 5px;
	margin: 8px -1.25rem 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
}
.mh-name {
	font-size: 0.55rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--mute);
}
.mh-right {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	flex-shrink: 0;
}
.mh-date {
	font-size: 0.55rem;
	color: var(--faint);
	white-space: nowrap;
}
.themebtn {
	font-family: var(--mono);
	font-size: 0.55rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	padding: 4px 9px;
	min-height: 26px;
	border: 1px solid var(--rule);
	background: transparent;
	color: var(--mute);
	cursor: pointer;
	line-height: 1.3;
}
.themebtn:hover {
	color: var(--ink);
	border-color: var(--rule-strong);
}
.themebtn:focus-visible,
.sortbtn:focus-visible,
#seasonsel:focus-visible,
.rowbtn:focus-visible,
.act:focus-visible {
	outline: 2px solid var(--navy);
	outline-offset: 2px;
}

.title {
	padding: 1.1rem 0 0.2rem;
	text-align: center;
}
.title h1 {
	font-family: var(--display);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1;
	font-size: clamp(1.7rem, 7vw, 3rem);
	text-wrap: balance;
}
.rules {
	max-width: 58ch;
	margin: 0.85rem auto 0;
	display: flex;
	flex-direction: column;
	gap: 0.28rem;
}
.rules p {
	text-align: center;
	font-size: 0.8rem;
	color: var(--mute);
	line-height: 1.6;
	text-wrap: balance;
}
.rules b {
	color: var(--ink);
	font-weight: 700;
	white-space: nowrap;
}

.slug {
	font-family: var(--mono);
	font-size: 0.65rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--mute);
	border-top: 1px solid var(--rule-strong);
	padding-top: 4px;
	margin: 2rem 0 0.7rem;
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}
.slug .count {
	color: var(--faint);
}
.slug .deadline {
	color: var(--amber);
}
.slug .deadline.closed {
	color: var(--red);
}

.bar {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	align-items: center;
	justify-content: space-between;
	margin: 0.2rem 0 1rem;
}
.sorts {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}
/* The caret is a CSS triangle on the wrapper: the native one goes with
   appearance: none, and this keeps the control free of image assets. */
.seasonpick {
	position: relative;
	display: inline-flex;
	align-items: center;
}
.seasonpick::after {
	content: "";
	position: absolute;
	right: 10px;
	pointer-events: none;
	border-left: 3.5px solid transparent;
	border-right: 3.5px solid transparent;
	border-top: 4px solid var(--mute);
}
#seasonsel {
	appearance: none;
	font-family: var(--mono);
	font-size: 0.6rem;
	letter-spacing: 0.07em;
	padding: 5px 26px 5px 10px;
	border: 1px solid var(--rule);
	border-radius: 0;
	background: var(--card);
	color: var(--ink);
	cursor: pointer;
	min-height: 32px;
}
#seasonsel:hover {
	border-color: var(--rule-strong);
}
.sortbtn {
	font-family: var(--mono);
	font-size: 0.6rem;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	padding: 5px 10px;
	border: 1px solid var(--rule);
	background: var(--card);
	color: var(--mute);
	cursor: pointer;
	min-height: 32px;
}
.sortbtn[aria-pressed="true"] {
	color: var(--card);
	background: var(--ink);
	border-color: var(--ink);
}
.legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 0.9rem;
	font-family: var(--mono);
	font-size: 0.58rem;
	color: var(--faint);
	letter-spacing: 0.04em;
}
.legend i {
	font-style: normal;
}
.legend .star {
	font-size: 0.7rem;
}

.notice {
	border: 1px solid var(--rule);
	border-left: 3px solid var(--amber);
	background: var(--card);
	padding: 0.5rem 0.7rem;
	margin: 0 0 1rem;
	font-family: var(--mono);
	font-size: 0.6rem;
	letter-spacing: 0.04em;
	color: var(--mute);
	line-height: 1.6;
}
.notice[hidden] {
	display: none;
}

.grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
	gap: 14px;
}
.team {
	background: var(--card);
	border: 1px solid var(--rule);
	border-top: 3px solid var(--edge);
	padding: 0.85rem 0.9rem 0.55rem;
	display: flex;
	flex-direction: column;
}
.team-hd {
	border-bottom: 1px solid var(--rule);
	padding-bottom: 0.5rem;
}
.hd-top {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.5rem;
	font-family: var(--mono);
	font-size: 0.58rem;
	color: var(--faint);
	letter-spacing: 0.05em;
}
.rk {
	color: var(--navy);
	font-weight: 600;
}
.rk-o {
	font-size: 0.85em;
}
.rec {
	font-variant-numeric: tabular-nums;
}
.team h2 {
	font-family: var(--display);
	font-size: 1.12rem;
	font-weight: 700;
	line-height: 1.15;
	margin: 0.3rem 0 0.12rem;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.kstrip {
	border-bottom: 1px solid var(--rule);
	padding: 0.5rem 0 0.55rem;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}
.khead {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.5rem;
	font-family: var(--mono);
	font-size: 0.5rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--faint);
}
.kbud {
	font-variant-numeric: tabular-nums;
	color: var(--navy);
	font-weight: 600;
	font-size: 0.62rem;
}
.kbud.over {
	color: var(--red);
}
.kacts {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}
.act {
	font-family: var(--mono);
	font-size: 0.55rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 5px 9px;
	min-height: 30px;
	border: 1px solid var(--rule);
	background: transparent;
	color: var(--mute);
	cursor: pointer;
	line-height: 1.3;
}
.act.primary {
	border-color: var(--ink);
	color: var(--ink);
	font-weight: 600;
}
.act.primary:not(:disabled):hover {
	background: var(--ink);
	color: var(--card);
}
.act:disabled {
	opacity: 0.4;
	cursor: default;
}
.act.busy {
	opacity: 0.6;
	cursor: progress;
}
.closednote {
	font-family: var(--mono);
	font-size: 0.55rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--faint);
	padding: 6px 0;
	line-height: 1.3;
}

.col-hd {
	display: grid;
	grid-template-columns: 14px 11px 1fr 2.4rem 2.6rem;
	gap: 0.4rem;
	font-family: var(--mono);
	font-size: 0.5rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--faint);
	padding: 0.45rem 0 0.3rem;
	border-bottom: 1px solid var(--rule-soft);
}
.col-hd span:first-child {
	grid-column: 1/4;
}
.col-hd span:nth-child(2),
.col-hd span:nth-child(3) {
	text-align: right;
}

.roster {
	list-style: none;
	flex: 1;
}
.row {
	border-bottom: 1px solid var(--rule-soft);
}
.row:last-child {
	border-bottom: none;
}
span.rowbtn {
	cursor: default;
}
.rowbtn {
	display: grid;
	grid-template-columns: 14px 11px 1fr 2.4rem 2.6rem;
	gap: 0.4rem;
	align-items: baseline;
	background: none;
	border: 0;
	font: inherit;
	color: inherit;
	text-align: left;
	cursor: pointer;
	/* pull out to the card edge, pad back in, so the highlight bleeds full width */
	width: calc(100% + 1.8rem);
	margin: 0 -0.9rem;
	padding: 0.32rem 0.9rem;
}
.rowbtn:disabled {
	cursor: default;
}
.rowbtn[aria-pressed="true"] {
	background: var(--sel);
}
.tick {
	width: 11px;
	height: 11px;
	border: 1px solid var(--rule-strong);
	display: block;
	align-self: center;
	margin-top: 0.1rem;
}
.rowbtn[aria-pressed="true"] .tick {
	background: var(--navy);
	border-color: var(--navy);
}
.rowbtn:disabled .tick {
	opacity: 0.3;
}
.star {
	color: var(--amber);
	font-size: 0.68rem;
	line-height: 1.35;
}
.star-none {
	display: block;
}
.who {
	min-width: 0;
}
.nm {
	display: block;
	font-size: 0.76rem;
	line-height: 1.25;
	overflow-wrap: anywhere;
}
.sub {
	display: block;
	font-family: var(--mono);
	font-size: 0.53rem;
	color: var(--faint);
	letter-spacing: 0.03em;
	margin-top: 1px;
}
.pts {
	font-family: var(--mono);
	font-size: 0.66rem;
	color: var(--mute);
	text-align: right;
	font-variant-numeric: tabular-nums;
}
.kv {
	font-family: var(--mono);
	font-size: 0.72rem;
	font-weight: 600;
	text-align: right;
	font-variant-numeric: tabular-nums;
}
.kv-drafted {
	color: var(--navy);
}
.kv-flat {
	color: var(--amber);
}

.team-ft {
	display: flex;
	justify-content: space-between;
	gap: 0.5rem;
	border-top: 1px solid var(--rule);
	margin-top: 0.4rem;
	padding-top: 0.4rem;
	font-family: var(--mono);
	font-size: 0.55rem;
	color: var(--faint);
	letter-spacing: 0.04em;
}
.team-ft .saved {
	color: var(--green);
}
.team-ft .err {
	color: var(--red);
}

.foot {
	margin-top: 2rem;
	border-top: 1px solid var(--rule);
	padding-top: 0.7rem;
	font-size: 0.68rem;
	color: var(--faint);
	line-height: 1.7;
	max-width: 70ch;
}
.foot code {
	font-family: var(--mono);
	font-size: 0.9em;
	color: var(--mute);
}

@media (max-width: 640px) {
	.wrap {
		padding: 0 0.85rem 2.5rem;
	}
	.masthead {
		margin: 8px -0.85rem 0;
		padding: 6px 0.85rem 5px;
	}
	.grid {
		grid-template-columns: 1fr;
		gap: 12px;
	}
	.bar {
		flex-direction: column;
		align-items: flex-start;
	}
	.rowbtn,
	.col-hd {
		grid-template-columns: 16px 11px 1fr 2.4rem 2.8rem;
	}
	.rowbtn {
		padding: 0.42rem 0.9rem;
	}
	.act {
		min-height: 34px;
		padding: 6px 11px;
	}
}
@media (prefers-reduced-motion: reduce) {
	* {
		animation: none !important;
		transition: none !important;
	}
}

/* ---- site chrome ------------------------------------------------------- */
a {
	color: var(--navy);
}
.msg {
	border: 1px solid var(--rule);
	border-left: 3px solid var(--amber);
	background: var(--card);
	padding: 0.6rem 0.8rem;
	margin: 1rem 0 0;
	font-family: var(--mono);
	font-size: 0.62rem;
	line-height: 1.6;
	color: var(--mute);
}
.msg.ok {
	border-left-color: var(--green);
	color: var(--green);
}
.msg.bad {
	border-left-color: var(--red);
	color: var(--red);
}
.narrow {
	max-width: 560px;
}
.leagues {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.league-card {
	display: block;
	background: var(--card);
	border: 1px solid var(--rule);
	border-top: 3px solid var(--edge);
	padding: 0.9rem 1rem;
	text-decoration: none;
	color: inherit;
}
.league-card:hover {
	border-color: var(--rule-strong);
}
.league-card h2 {
	font-family: var(--display);
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.15;
}
.league-card .meta {
	font-family: var(--mono);
	font-size: 0.58rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--faint);
	margin-top: 0.35rem;
}
.skel {
	font-family: var(--mono);
	font-size: 0.62rem;
	color: var(--faint);
	padding: 2rem 0;
	text-align: center;
}

/* ---- manage-my-team ----------------------------------------------------- */
.manage {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}
.manage .who {
	font-family: var(--mono);
	font-size: 0.58rem;
	letter-spacing: 0.05em;
	color: var(--mute);
}
.panel {
	background: var(--card);
	border: 1px solid var(--rule);
	border-top: 3px solid var(--edge);
	padding: 0.8rem 0.9rem;
	margin: 0 0 1rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: flex-end;
}
.panel[hidden] {
	display: none;
}
.field {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	flex: 1 1 190px;
	min-width: 0;
}
.field label {
	font-family: var(--mono);
	font-size: 0.5rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--faint);
}
.field select,
.field input {
	font-family: inherit;
	font-size: 0.78rem;
	padding: 7px 8px;
	min-height: 36px;
	border: 1px solid var(--rule);
	background: var(--paper);
	color: var(--ink);
	border-radius: 0;
	max-width: 100%;
}
.field select:focus-visible,
.field input:focus-visible {
	outline: 2px solid var(--navy);
	outline-offset: 1px;
}
.panel .err {
	flex: 1 1 100%;
	font-family: var(--mono);
	font-size: 0.58rem;
	color: var(--red);
}
.team.editable {
	border-top-color: var(--navy);
}
.badge-you {
	font-family: var(--mono);
	font-size: 0.5rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--navy);
	border: 1px solid var(--navy);
	padding: 1px 5px;
	margin-left: 0.4rem;
	vertical-align: middle;
	white-space: nowrap;
}

/* ---- league history ---------------------------------------------------- */

.champs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 14px;
}
.champ {
	background: var(--card);
	border: 1px solid var(--rule);
	border-top: 3px solid var(--edge);
	padding: 0.8rem 0.9rem 0.9rem;
}
/* The finish is the border colour, and the place label carries it too — colour alone
   would leave the order to be inferred from a hue. */
.champ.gold {
	border-top-color: var(--gold);
}
.champ.silver {
	border-top-color: var(--silver);
}
.champ.bronze {
	border-top-color: var(--bronze);
}
.champ.gold .champ-yr {
	color: var(--gold);
}
.champ.silver .champ-yr {
	color: var(--silver);
}
.champ.bronze .champ-yr {
	color: var(--bronze);
}
.champ-yr {
	font-family: var(--mono);
	font-size: 0.6rem;
	letter-spacing: 0.12em;
	color: var(--mute);
}
.champ h3 {
	font-family: var(--display);
	font-size: 1.35rem;
	line-height: 1.15;
	letter-spacing: -0.01em;
	margin: 0.15rem 0 0.2rem;
	text-wrap: balance;
}
.champ-who {
	font-family: var(--mono);
	font-size: 0.6rem;
	color: var(--mute);
	letter-spacing: 0.03em;
}
.champ-fin {
	margin-top: 0.55rem;
	padding-top: 0.5rem;
	border-top: 1px solid var(--rule-soft);
	font-size: 0.72rem;
	color: var(--mute);
	display: flex;
	justify-content: space-between;
	gap: 0.6rem;
	align-items: baseline;
}
.champ-sc {
	font-family: var(--mono);
	font-size: 0.62rem;
	color: var(--ink);
	white-space: nowrap;
}

/* Tables scroll inside their own box: a franchise row has ten columns and the page
   itself must never scroll sideways on a phone. */
.tblwrap {
	overflow-x: auto;
	background: var(--card);
	border: 1px solid var(--rule);
}
.tbl {
	border-collapse: collapse;
	width: 100%;
	font-size: 0.74rem;
}
.tbl th,
.tbl td {
	padding: 0.42rem 0.6rem;
	text-align: right;
	white-space: nowrap;
	border-bottom: 1px solid var(--rule-soft);
}
.tbl tbody tr:last-child td {
	border-bottom: 0;
}
.tbl th {
	border-bottom: 1px solid var(--rule-strong);
}
/* Only a header that is a sort button gives up its padding — the button supplies it,
   and full-bleed is what makes the whole cell clickable. A plain header keeps the
   padding of the cells below it, or its label sits out of line with its own column. */
.tbl th.srt {
	padding: 0;
}
.tbl th .sortbtn {
	width: 100%;
	border: 0;
	background: transparent;
	text-align: right;
	min-height: 30px;
	padding: 7px 0.6rem;
}
.tbl th.l .sortbtn {
	text-align: left;
}
.tbl th .sortbtn[aria-pressed="true"] {
	background: transparent;
	color: var(--ink);
	border-bottom: 2px solid var(--ink);
}
.tbl .l {
	text-align: left;
}
/* Truncation only bites under a fixed layout; with auto layout the table simply widens
   to fit the longest name. */
.tbl .clip {
	overflow: hidden;
	text-overflow: ellipsis;
}
/* Truncation for a cell in an auto-layout table: the width has to sit on a block inside
   the cell, because a max-width on the cell itself is advisory at best. */
.clipw {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.tbl.season {
	table-layout: fixed;
	min-width: 43rem;
}
.tbl.season .c-fin {
	width: 3rem;
}
.tbl.season .c-rec {
	width: 5rem;
}
.tbl.season .c-pts {
	width: 5.25rem;
}
.tbl.season .c-seed {
	width: 6rem;
}
.tbl .wide {
	max-width: 15rem;
	overflow: hidden;
	text-overflow: ellipsis;
}
.tbl .num {
	font-family: var(--mono);
	font-size: 0.68rem;
	font-variant-numeric: tabular-nums;
}
.tbl .who {
	font-family: var(--mono);
	font-size: 0.66rem;
	color: var(--mute);
}
.tbl .up {
	color: var(--green);
}
.tbl .down {
	color: var(--red);
}
.tbl .none {
	color: var(--faint);
}
.tbl .apps {
	font-family: var(--mono);
	font-size: 0.58rem;
	color: var(--faint);
}
.tbl tbody tr:hover {
	background: var(--sel);
}
.ttl {
	font-family: var(--mono);
	font-size: 0.6rem;
	background: var(--ink);
	color: var(--card);
	padding: 2px 5px;
	margin-left: 3px;
}
.ttl.gold {
	background: var(--gold);
	color: var(--paper);
}
.ttl.silver {
	background: var(--silver);
	color: var(--paper);
}
.ttl.bronze {
	background: var(--bronze);
	color: var(--paper);
}
.ttl:first-child {
	margin-left: 0;
}

.recs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
	gap: 14px;
	margin-bottom: 1.4rem;
}
/* Scoped to .recs: the draft board has its own bare .rec span in the card
   header, and the unscoped selector was boxing that too. */
.recs .rec {
	background: var(--card);
	border: 1px solid var(--rule);
	border-left: 3px solid var(--navy);
	padding: 0.7rem 0.85rem 0.75rem;
	display: flex;
	flex-direction: column;
}
.rec-t {
	font-family: var(--mono);
	font-size: 0.58rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--mute);
}
.rec-pts {
	font-family: var(--display);
	font-size: 1.5rem;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
}
.rec-who {
	font-size: 0.76rem;
}
.rec-when {
	font-family: var(--mono);
	font-size: 0.58rem;
	color: var(--faint);
	margin-top: 0.1rem;
}
.lists {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 14px;
}
.list {
	background: var(--card);
	border: 1px solid var(--rule);
	padding: 0.7rem 0.9rem 0.8rem;
}
.list h3 {
	font-family: var(--mono);
	font-size: 0.58rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--mute);
	font-weight: 400;
	margin-bottom: 0.4rem;
}
.rlist {
	list-style: none;
}
.rlist li {
	display: grid;
	grid-template-columns: 1.3rem 3.6rem minmax(0, 1fr) auto;
	align-items: baseline;
	gap: 0.5rem;
	padding: 0.32rem 0;
	border-top: 1px solid var(--rule-soft);
	font-size: 0.74rem;
}
.rlist li:first-child {
	border-top: 0;
}
.rlist .rec-pts {
	font-family: var(--mono);
	font-size: 0.76rem;
	text-align: right;
}
.rlist .rec-when {
	grid-column: 4;
	margin: 0;
	text-align: right;
	white-space: nowrap;
}
.rlist .rec-who {
	grid-column: 3;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.rk-n {
	font-family: var(--mono);
	font-size: 0.6rem;
	color: var(--faint);
}

.won {
	font-family: var(--mono);
	font-size: 0.6rem;
	color: var(--mute);
	letter-spacing: 0.03em;
}
.won b {
	color: var(--ink);
}
.weeks {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
	gap: 14px;
	margin-top: 14px;
}
.wk {
	background: var(--card);
	border: 1px solid var(--rule);
	padding: 0.55rem 0.75rem 0.65rem;
}
.wk.po {
	border-top: 3px solid var(--amber);
}
.wk h4 {
	font-family: var(--mono);
	font-size: 0.58rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--mute);
	font-weight: 400;
	display: flex;
	justify-content: space-between;
	gap: 0.5rem;
	padding-bottom: 0.3rem;
	border-bottom: 1px solid var(--rule-strong);
}
.po-t {
	color: var(--amber);
}
.games {
	list-style: none;
}
.g {
	display: grid;
	grid-template-columns: 1fr 3.1rem;
	align-items: baseline;
	column-gap: 0.4rem;
	padding: 0.3rem 0;
	border-bottom: 1px solid var(--rule-soft);
	font-size: 0.72rem;
}
.g:last-child {
	border-bottom: 0;
}
.gt {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--mute);
}
.gp {
	font-family: var(--mono);
	font-size: 0.66rem;
	text-align: right;
	color: var(--mute);
	font-variant-numeric: tabular-nums;
}
.gt.w,
.gp.w {
	color: var(--ink);
	font-weight: 700;
}
.gtag,
.bye-t {
	grid-column: 1 / -1;
	font-family: var(--mono);
	font-size: 0.55rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--faint);
}
.g.br .gtag {
	color: var(--amber);
}
.g.bye .gt:first-child {
	color: var(--ink);
}

@media (max-width: 640px) {
	.champs,
	.recs,
	.lists,
	.weeks {
		grid-template-columns: 1fr;
	}
	.tbl {
		font-size: 0.7rem;
	}
	/* A table that has to be read sideways still has to say whose row you are on, so the
	   team column is pinned and everything else scrolls under it. The pinned cells carry
	   their own background — a transparent sticky cell lets the scrolled columns show
	   through it. */
	.tbl {
		min-width: 44rem;
	}
	/* A team name is the widest thing in either table and the least of it is needed to
	   tell the rows apart, so on a phone it is clipped and the columns that carry the
	   numbers come into view without scrolling for them. */
	.clipw {
		max-width: 8.5rem;
	}
	.tbl.season {
		min-width: 38.25rem;
	}
	.tbl.season .c-team {
		width: 8.5rem;
	}
	.tbl th:first-child,
	.tbl td:first-child {
		position: sticky;
		left: 0;
		z-index: 2;
		background: var(--card);
	}
	.tbl.alltime th:first-child,
	.tbl.alltime td:first-child {
		border-right: 1px solid var(--rule);
	}
	/* The season table leads with the finish, so the pin covers both it and the team. */
	.tbl.season th:nth-child(2),
	.tbl.season td:nth-child(2) {
		position: sticky;
		left: 3rem;
		z-index: 2;
		background: var(--card);
		border-right: 1px solid var(--rule);
	}
	.tbl tbody tr:hover td:first-child,
	.tbl.season tbody tr:hover td:nth-child(2) {
		background: var(--sel);
	}

	/* One line per record wherever it fits. On a phone the qualifier — the week, the
	   opponent — is wider than what is left beside the name, so it drops under it
	   rather than pushing the list into a sideways scroll. */
	.rlist li {
		grid-template-columns: 1.3rem 3.6rem 1fr;
	}
	.rlist .rec-when {
		grid-column: 3;
		text-align: left;
		white-space: normal;
	}
}

.mh-link {
	font-family: var(--mono);
	font-size: 0.55rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--mute);
	text-decoration: none;
	border-bottom: 1px solid var(--rule);
	padding-bottom: 1px;
}
.mh-link:hover {
	color: var(--ink);
	border-color: var(--rule-strong);
}

/* The gold lock that stands in for the checkbox on a card nobody is editing. Drawn
   rather than set as a glyph: the emoji padlock cannot be recoloured, and at 11px it
   has to line up with the tick it replaces. */
.lock {
	width: 11px;
	height: 11px;
	display: block;
	align-self: center;
	margin-top: 0.1rem;
	position: relative;
}
.lock::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 0;
	width: 7px;
	height: 5px;
	border: 1.5px solid var(--gold);
	border-bottom: 0;
	border-radius: 3.5px 3.5px 0 0;
}
.lock::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 11px;
	height: 7px;
	background: var(--gold);
	border-radius: 1px;
}
.tick-none {
	display: block;
}
.legend .lock {
	display: inline-block;
	vertical-align: -1px;
}