/* LogPS, Generated Output and Clear All are for staff (see js/stats.js). Hiding is only for
   tidiness: the data behind them is protected by the database rules and the Worker. The Overseer
   panel isn't in the site at all: the Worker sends it to Overseers only. */
body:not(.ms-is-admin) [data-admin-only] { display: none !important; }

/* Match Stats pages. Uses only the LogPS design tokens from index.html, so it follows
   the dark / light theme toggle automatically. */

.ms-muted { color: var(--txm); }
.ms-small { font-size: var(--text-xs); }
.ms-center { text-align: center; }
.ms-good { color: var(--ok); font-weight: 600; }
.ms-bad { color: var(--err); font-weight: 600; }
.ms-unset { color: var(--warn); }
.ms-code { font-family: var(--fm); font-size: var(--text-xs); background: var(--sfd); padding: 1px 6px; border-radius: var(--r-sm); }
.ms-plink { color: var(--pri); text-decoration: none; font-weight: 600; }
.ms-plink:hover { text-decoration: underline; }

/* top bar account */
.ms-auth { display: flex; align-items: center; }
.ms-signin-sm { padding: var(--s2) var(--s4); font-size: var(--text-xs); }
.ms-account { display: flex; align-items: center; gap: var(--s2); }
.ms-account img, .ms-avatar { width: 28px; height: 28px; border-radius: var(--r-full); object-fit: cover; flex-shrink: 0; }
.ms-avatar { display: grid; place-items: center; background: var(--prihi); color: var(--pri); font-weight: 700; font-size: var(--text-xs); }
.ms-account-name { font-size: var(--text-xs); font-weight: 600; color: var(--tx); white-space: nowrap; max-width: 180px; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: var(--s2); }
.ms-admin { font-size: 10px; padding: 1px var(--s2); }
.ms-signout { padding: var(--s1) var(--s3); font-size: var(--text-xs); }

/* sign-in / approval gate */
.ms-gate { max-width: 460px; text-align: center; margin: var(--s8) auto; padding: var(--s8); display: flex; flex-direction: column; align-items: center; gap: var(--s3); }
.ms-gate-icon { width: 48px; height: 48px; border-radius: var(--r-full); display: grid; place-items: center; background: var(--sfo); border: 1px solid var(--brd); }
.ms-gate-icon svg { width: 22px; height: 22px; }
.ms-gate-title { font-size: var(--text-lg); font-weight: 700; letter-spacing: -.02em; }
.ms-gate p { font-size: var(--text-sm); }
.ms-gate .btn { margin-top: var(--s2); }
.ms-uid { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; justify-content: center; }
.ms-uid code { font-family: var(--fm); font-size: var(--text-xs); background: var(--sfo); border: 1px solid var(--brd); border-radius: var(--r-md); padding: var(--s2) var(--s3); }

/* lists */
.ms-list { display: flex; flex-direction: column; gap: var(--s2); }
.ms-logo { width: 32px; height: 32px; object-fit: contain; border-radius: 6px; flex-shrink: 0; display: block; }
.ms-logo-blank { background: var(--sfd); }
.match-team-logo.ms-logo-blank, .team-side-logo.ms-logo-blank { display: inline-block; background: var(--sfd); }
.ms-match-row {
	display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s1) var(--s4);
	background: var(--sf); border: 1px solid var(--brd); border-radius: var(--r-lg); padding: var(--s4) var(--s5);
	color: var(--tx); text-decoration: none; box-shadow: var(--sh-sm); transition: border-color var(--tr), background var(--tr);
}
.ms-match-row:hover { border-color: var(--pri); background: var(--sf2); }
.ms-side { display: flex; align-items: center; gap: var(--s3); min-width: 0; }
.ms-side.ms-away { justify-content: flex-end; text-align: right; }
.ms-team-name { font-weight: 600; font-size: var(--text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-score { font-family: var(--fm); font-weight: 700; font-size: var(--text-lg); display: flex; gap: var(--s2); }
.ms-score span { color: var(--txf); font-weight: 400; }
.ms-row-meta { grid-column: 1 / -1; text-align: center; color: var(--txf); font-size: var(--text-xs); }

/* match page */
.ms-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s5); flex-wrap: wrap; }
.ms-back { padding: var(--s2) var(--s4); font-size: var(--text-xs); margin-bottom: var(--s5); }
.ms-toolbar .ms-back { margin-bottom: 0; }
.btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.ms-scoreboard { margin-bottom: var(--s2); }
.ms-scoreboard .match-meta-value a { font-family: var(--ff); }
.ms-subline { text-align: center; color: var(--txf); font-size: var(--text-xs); margin-bottom: var(--s5); }
.ms-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); padding: var(--s4); }
.ms-stat { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; background: var(--sfo); border: 1px solid var(--div); border-radius: var(--r-lg); padding: var(--s3) var(--s4); }
.ms-stat span { font-family: var(--fm); font-weight: 700; font-size: var(--text-base); }
.ms-stat span:last-child { text-align: right; }
.ms-stat label { font-size: var(--text-xs); color: var(--txf); text-transform: uppercase; letter-spacing: .06em; padding: 0 var(--s2); text-align: center; }
.ms-split { align-items: start; }
.ms-split > .card { margin-bottom: 0; }
.ms-second { margin-top: var(--s6); }
.ms-timeline { list-style: none; display: flex; flex-direction: column; gap: var(--s1); }
.ms-event { display: grid; grid-template-columns: 52px 22px 1fr; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3); background: var(--sfo); border-left: 3px solid var(--team); border-radius: 0 var(--r-md) var(--r-md) 0; font-size: var(--text-sm); }
.ms-time { font-family: var(--fm); font-size: var(--text-xs); color: var(--txm); }
.ms-icon { text-align: center; font-size: var(--text-sm); display: flex; justify-content: center; }
.ms-card-icon { width: 10px; height: 14px; border-radius: 2px; display: inline-block; }
.ms-card-icon.yellow { background: var(--yel); }
.ms-card-icon.red { background: var(--red); }
.ms-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.ms-table th, .ms-table td { padding: var(--s2) var(--s2); text-align: center; border-bottom: 1px solid var(--div); }
.ms-table th { font-size: var(--text-xs); color: var(--txf); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.ms-table th:first-child, .ms-table td:first-child { text-align: left; }
.ms-table td:last-child, .ms-table th:last-child { text-align: right; font-size: var(--text-xs); }
.ms-table td { font-family: var(--fm); }
.ms-table td:first-child { font-family: var(--ff); }
.ms-tag { font-size: 10px; color: var(--txf); margin-left: var(--s2); text-transform: none; letter-spacing: 0; }
.ms-tag-hidden { margin-left: 0; color: var(--warn, #d9a441); }

/* players */
.ms-search { display: flex; gap: var(--s2); margin-bottom: var(--s5); max-width: 560px; }
.ms-search input { flex: 1; background: var(--sf); border: 1px solid var(--brd); border-radius: var(--r-md); padding: var(--s3) var(--s4); font-size: var(--text-sm); }
.ms-results-for { margin: calc(-1 * var(--s2)) 0 var(--s4); font-size: var(--text-xs); }
.ms-player-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: var(--s3); }
.ms-player-card { display: flex; flex-direction: column; gap: 2px; background: var(--sf); border: 1px solid var(--brd); border-radius: var(--r-lg); padding: var(--s4); text-decoration: none; color: var(--tx); box-shadow: var(--sh-sm); transition: border-color var(--tr); }
.ms-player-card:hover { border-color: var(--pri); }
.ms-player-name { font-weight: 700; font-size: var(--text-sm); }
.ms-player-mini { margin-top: var(--s2); font-size: var(--text-xs); color: var(--txm); display: flex; gap: var(--s2); }
.ms-player-mini b { color: var(--tx); font-family: var(--fm); }
.ms-player-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; }
.ms-player-head .page-subtitle { margin-top: var(--s1); }
.ms-tiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s3); margin-bottom: var(--s6); }
.ms-tile { background: var(--sf); border: 1px solid var(--brd); border-radius: var(--r-lg); padding: var(--s4) var(--s2); text-align: center; box-shadow: var(--sh-sm); }
.ms-tile b { display: block; font-family: var(--fm); font-size: var(--text-xl); line-height: 1.1; }
.ms-tile span { font-size: var(--text-xs); color: var(--txf); text-transform: uppercase; letter-spacing: .05em; }
.ms-app-row { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); background: var(--sfo); border: 1px solid var(--div); border-radius: var(--r-md); padding: var(--s3) var(--s4); text-decoration: none; color: var(--tx); font-size: var(--text-sm); }
.ms-app-row:hover { border-color: var(--pri); }
.ms-app-teams { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s1); }
.ms-app-teams .ms-small { flex-basis: 100%; }
.ms-logo-after { margin: 0 0 0 var(--s2); }
.ms-app-stats { font-family: var(--fm); font-size: var(--text-xs); color: var(--txm); white-space: nowrap; }
.ms-note-form { display: flex; flex-direction: column; gap: var(--s2); margin-bottom: var(--s4); }
.ms-note-form textarea { min-height: 72px; resize: vertical; background: var(--sfo); border: 1px solid var(--brd); border-radius: var(--r-md); padding: var(--s3); font-size: var(--text-sm); }
.ms-note-form .btn { align-self: flex-end; }
.ms-notes { list-style: none; display: flex; flex-direction: column; gap: var(--s2); }
.ms-notes li { position: relative; background: var(--sfo); border: 1px solid var(--div); border-radius: var(--r-md); padding: var(--s3) var(--s4); }
.ms-notes li p { font-size: var(--text-sm); white-space: pre-wrap; margin-bottom: var(--s1); padding-right: 64px; }
.ms-notes li.ms-empty { background: none; border: 0; padding: 0; font-size: var(--text-sm); }
.ms-note-del { position: absolute; top: var(--s2); right: var(--s2); }

/* admin tools */
.ms-toolbar-actions { display: flex; gap: var(--s2); flex-wrap: wrap; }
.ms-btn-danger { background: var(--reds); color: var(--red); border-color: var(--red); }
.ms-btn-danger:hover { filter: brightness(1.1); }
.ms-flag { color: var(--warn); font-weight: 600; }
.ms-notice { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; background: var(--warns); border-color: var(--warn); padding: var(--s4) var(--s5); font-size: var(--text-sm); }
.ms-edit-teams { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); margin-bottom: var(--s3); }
.ms-edit-team { display: flex; align-items: flex-end; gap: var(--s3); }
.ms-edit-team .ms-logo { margin-bottom: 4px; }
.ms-edit-list { display: flex; flex-direction: column; gap: var(--s2); }
.ms-edit-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s2) var(--s3); background: var(--sfo); border: 1px solid var(--div); border-radius: var(--r-lg); padding: var(--s3) var(--s4); position: relative; padding-right: 40px; }
.ms-edit-row .event-remove { position: absolute; top: var(--s3); right: var(--s3); }
.ms-edit-type { display: flex; align-items: center; gap: var(--s2); font-size: var(--text-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--txm); min-width: 120px; align-self: center; }
.ms-f { display: flex; flex-direction: column; gap: 2px; min-width: 150px; flex: 1; }
.ms-f > span { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--txf); }
.ms-f-s { flex: 0 1 170px; min-width: 120px; }
.ms-f-xs { flex: 0 0 76px; min-width: 76px; }
.ms-f-note { flex: 1 1 160px; }
.ms-f input, .ms-f select { background: var(--sf); border: 1px solid var(--brd); border-radius: var(--r-md); padding: var(--s2) var(--s3); font-size: var(--text-sm); width: 100%; }
.ms-f input.ms-invalid, .ms-f select.ms-invalid { border-color: var(--err); box-shadow: 0 0 0 2px var(--errs); }
.ms-check { display: flex; align-items: center; gap: var(--s2); font-size: var(--text-xs); color: var(--txm); padding-bottom: var(--s2); cursor: pointer; }
.ms-check input { accent-color: var(--pri); }
.ms-add-row { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s4); }
.ms-add { padding: var(--s1) var(--s3); font-size: var(--text-xs); }
.ms-edit-foot { flex-wrap: wrap; }
.ms-spacer { flex: 1; }

/* phones: LogPS hides its sidebar below 768px, so the sections become a scrolling bar */
.ms-mobile-nav { display: none; }
@media (max-width: 768px) {
	.ms-mobile-nav {
		display: flex; gap: var(--s2); overflow-x: auto; padding: var(--s2) var(--s4);
		background: var(--sf); border-bottom: 1px solid var(--brd); position: sticky; top: 57px; z-index: 99;
		grid-column: 1 / -1; scrollbar-width: none;
	}
	.ms-mobile-nav::-webkit-scrollbar { display: none; }
	.ms-mobile-nav button { flex-shrink: 0; padding: var(--s2) var(--s4); border-radius: var(--r-full); font-size: var(--text-xs); font-weight: 600; color: var(--txm); background: var(--sfo); border: 1px solid var(--brd); }
	.ms-mobile-nav button.active { color: var(--pri); background: var(--prihi); border-color: var(--pri); }
	.app { grid-template-rows: auto auto 1fr; }
	.main { padding: var(--s4); height: auto; }
	.ms-account-name, .ms-signin-sm span, .ms-signout { display: none; }
	.ms-account img, .ms-avatar { cursor: pointer; }
	.ms-stats { grid-template-columns: repeat(2, 1fr); }
	.ms-tiles { grid-template-columns: repeat(3, 1fr); }
	.ms-match-row { padding: var(--s3); gap: var(--s1) var(--s2); }
	.ms-logo { width: 26px; height: 26px; }
	.ms-scoreboard { flex-direction: column; gap: var(--s3); }
	.ms-scoreboard .match-meta { min-width: 0; }
	.ms-event { grid-template-columns: 44px 18px 1fr; }
	.ms-search { flex-direction: column; }
	.ms-edit-teams { grid-template-columns: 1fr; }
	.ms-f, .ms-f-s, .ms-f-note { flex: 1 1 100%; }
}

/* Discord: the post button in Generated Output and the status card on a match page */
#view-output .btn-row { flex-wrap: wrap; align-items: center; }
.ms-discord-post { display: inline-flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.ms-discord-post[hidden] { display: none; }
.ms-discord { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; padding: var(--s4) var(--s5); margin-bottom: var(--s5); font-size: var(--text-sm); }
.ms-discord-icon { width: 36px; height: 36px; border-radius: var(--r-full); display: grid; place-items: center; background: var(--prihi); color: var(--pri); flex-shrink: 0; }
.ms-discord-icon svg { width: 18px; height: 18px; }
.ms-discord-text { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: var(--s1); }
.ms-discord-actions { display: flex; gap: var(--s2); flex-wrap: wrap; }
.ms-discord-actions .btn { padding: var(--s2) var(--s4); font-size: var(--text-xs); }
.ms-modal-wide { max-width: 560px; }
/* a tall form scrolls inside the window; the title and the buttons stay in view */
.modal { max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); display: flex; flex-direction: column; }
.modal > .modal-body { overflow-y: auto; min-height: 0; flex: 1 1 auto; margin-right: calc(-1 * var(--s2)); padding-right: var(--s2); }
.modal > .modal-title, .modal > .modal-actions { flex-shrink: 0; }
.ms-modal-wide p { margin-bottom: var(--s3); }
.ms-diff { font-family: var(--fm); font-size: var(--text-xs); background: var(--sfd); border: 1px solid var(--brd); border-radius: var(--r-md); padding: var(--s3); margin-bottom: var(--s3); max-height: 240px; overflow: auto; white-space: pre-wrap; word-break: break-word; }
.ms-diff-del { color: var(--err); }
.ms-diff-del::before { content: "− your log: "; opacity: .7; }
.ms-diff-add { color: var(--ok); }
.ms-diff-add::before { content: "+ the post: "; opacity: .7; }

/* phones: an admin's top bar (account, theme, links, Clear All) has to fit 360px */
@media (max-width: 768px) {
	/* LogPS's 1fr column grows to its widest content; minmax(0, 1fr) keeps it to the screen */
	.app { grid-template-columns: minmax(0, 1fr); }
	.topbar { padding: var(--s3) var(--s4); gap: var(--s2); min-width: 0; }
	.topbar .logo { min-width: 0; flex: 1 1 auto; overflow: hidden; }
	.topbar .logo img { flex-shrink: 0; }
	.topbar .logo > div { min-width: 0; overflow: hidden; }
	.topbar .logo > div > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	/* (the name wraps rather than being cut off) */
	.topbar .logo > div > div:first-child { white-space: normal; line-height: 1.1; overflow: visible; }
	.topbar-actions { gap: var(--s2); flex-shrink: 0; }
	.btn-clear-all { font-size: 0; gap: 0; padding: var(--s2) var(--s3); }
	.btn-clear-all svg { width: 15px; height: 15px; }
	.ms-toolbar-actions { width: 100%; }
	.ms-toolbar-actions .btn { flex: 1 1 auto; justify-content: center; }
	.ms-discord-text { min-width: 0; flex-basis: calc(100% - 60px); }
	.ms-discord-actions { width: 100%; }
}

/* "Show more" under the match and player lists */
.ms-more { display: flex; justify-content: center; margin-top: var(--s4); }

/* "Save to Matches" in Generated Output */
.ms-save-match { display: inline-flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.ms-save-match[hidden] { display: none; }
.ms-modal-wide .ms-f { display: flex; flex-direction: column; gap: var(--s1); font-size: var(--text-xs); color: var(--txm); max-width: 220px; }
.ms-modal-wide .ms-f input { padding: var(--s2) var(--s3); border-radius: var(--r-md); border: 1px solid var(--brd); background: var(--sfd); color: var(--tx); font: inherit; font-size: var(--text-sm); }

/* Roblox avatars on the players pages */
.ms-pavatar { width: 44px; height: 44px; border-radius: var(--r-full); background: var(--sfd); border: 1px solid var(--brd); overflow: hidden; flex-shrink: 0; display: block; }
.ms-pavatar img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity var(--tr); }
.ms-pavatar img.ms-loaded { opacity: 1; }
.ms-pavatar img:not([src]) { visibility: hidden; }
.ms-pavatar-lg { width: 84px; height: 84px; }
.ms-player-card { display: grid; grid-template-columns: auto 1fr; column-gap: var(--s3); align-items: center; }
.ms-player-card .ms-pavatar { grid-row: span 3; }
.ms-player-head { display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap; }
.ms-player-head-text { flex: 1; min-width: 180px; }

/* account: a letter avatar and the chosen display name (both open the account dialog) */
.ms-account button.ms-avatar { border: 0; padding: 0; cursor: pointer; font-family: inherit; }
.ms-account button.ms-account-name { background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; }
.ms-account button.ms-account-name:hover { color: var(--pri); }
.ms-modal-wide .modal-actions { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.ms-modal-wide .ms-f input.ms-invalid { border-color: var(--err); }

/* ---- roles: Referee yellow, Manager green, Administrator blue, Overseer red ---- */
.ms-role { display: inline-flex; align-items: center; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 1px var(--s2); border-radius: var(--r-full); border: 1px solid transparent; line-height: 1.5; white-space: nowrap; vertical-align: middle; }
.ms-role-referee { color: #8a6d00; background: #fff4c2; border-color: #f0d264; }
.ms-role-manager { color: #1e7a3c; background: #dcf5e4; border-color: #8fd6a6; }
.ms-role-administrator { color: #1f5fbf; background: #dde9fb; border-color: #93b7ec; }
.ms-role-overseer { color: #b3261e; background: #fbe0de; border-color: #ee9d97; }
[data-theme="dark"] .ms-role-referee { color: #ffd84d; background: rgba(255, 216, 77, .12); border-color: rgba(255, 216, 77, .4); }
[data-theme="dark"] .ms-role-manager { color: #6ee093; background: rgba(110, 224, 147, .12); border-color: rgba(110, 224, 147, .4); }
[data-theme="dark"] .ms-role-administrator { color: #79aaff; background: rgba(121, 170, 255, .12); border-color: rgba(121, 170, 255, .4); }
[data-theme="dark"] .ms-role-overseer { color: #ff7b72; background: rgba(255, 123, 114, .12); border-color: rgba(255, 123, 114, .4); }
.ms-roles { display: flex; flex-direction: column; gap: var(--s2); }

/* ---- filters, competition chips ---- */
.ms-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s3); margin-bottom: var(--s4); }
.ms-filters .ms-f { min-width: 180px; flex: 0 1 220px; }
.ms-comp-chip { display: inline-flex; align-items: center; gap: var(--s1); font-weight: 600; color: var(--txm); background: var(--sfo); border: 1px solid var(--div); border-radius: var(--r-full); padding: 0 var(--s2); }
.ms-comp-link { text-decoration: none; padding: var(--s1) var(--s3); font-size: var(--text-xs); }
.ms-comp-link:hover { border-color: var(--pri); color: var(--pri); }
.ms-chip-logo { width: 16px; height: 16px; object-fit: contain; }
.ms-comp-line { margin-bottom: var(--s2); }
.ms-season-chips { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s4); }
.ms-chip-link { font-size: var(--text-xs); font-weight: 600; text-decoration: none; color: var(--txm); background: var(--sf); border: 1px solid var(--brd); border-radius: var(--r-full); padding: var(--s1) var(--s3); }
.ms-chip-link:hover { border-color: var(--pri); color: var(--pri); }
.ms-chip-link.active { background: var(--pri); border-color: var(--pri); color: #fff; }

/* ---- competitions ---- */
.ms-section-title { font-size: var(--text-sm); text-transform: uppercase; letter-spacing: .06em; color: var(--txf); margin: var(--s5) 0 var(--s3); }
.ms-comp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--s3); }
.ms-comp-card { display: flex; flex-direction: column; align-items: center; gap: var(--s2); text-align: center; padding: var(--s5) var(--s4); background: var(--sf); border: 1px solid var(--brd); border-radius: var(--r-lg); color: var(--tx); text-decoration: none; box-shadow: var(--sh-sm); transition: border-color var(--tr), background var(--tr); }
.ms-comp-card:hover { border-color: var(--pri); background: var(--sf2); }
.ms-comp-logo { width: 56px; height: 56px; object-fit: contain; }
.ms-comp-name { font-weight: 700; font-size: var(--text-sm); }
.ms-comp-head { display: flex; align-items: center; gap: var(--s4); margin-bottom: var(--s4); }
.ms-comp-logo-lg { width: 64px; height: 64px; object-fit: contain; flex-shrink: 0; }
.ms-table-wrap { overflow-x: auto; }
.ms-league-table td, .ms-league-table th { text-align: center; }
.ms-league-table td:nth-child(2), .ms-league-table th:nth-child(2) { text-align: left; }
.ms-league-table tr.ms-top td { font-weight: 700; }
.ms-team-cell { display: inline-flex; align-items: center; gap: var(--s2); white-space: nowrap; }
.ms-form { display: inline-flex; gap: 2px; }
.ms-form i { font-style: normal; font-size: 10px; font-weight: 700; width: 16px; height: 16px; display: grid; place-items: center; border-radius: 3px; color: #fff; }
.ms-form-W { background: var(--ok); } .ms-form-D { background: var(--txf); } .ms-form-L { background: var(--err); }
.ms-history { display: flex; flex-direction: column; }
.ms-history-row { display: grid; grid-template-columns: 110px 1fr auto; gap: var(--s3); align-items: center; padding: var(--s3) var(--s2); border-bottom: 1px solid var(--div); color: var(--tx); text-decoration: none; font-size: var(--text-sm); }
a.ms-history-row:hover { background: var(--sf2); }
.ms-history-row:last-child { border-bottom: 0; }
.ms-history-season { font-weight: 700; }
.ms-winner { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; font-size: var(--text-base); font-weight: 700; margin-bottom: var(--s3); }
@media (max-width: 640px) { .ms-hide-sm { display: none; } .ms-history-row { grid-template-columns: 1fr; gap: var(--s1); } }

/* ---- changelog ---- */
.ms-changes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ms-changes > li { display: flex; gap: var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--div); }
.ms-changes > li:last-child { border-bottom: 0; }
.ms-change-icon { width: 26px; height: 26px; flex-shrink: 0; border-radius: var(--r-full); display: grid; place-items: center; background: var(--sfo); border: 1px solid var(--div); font-size: 12px; }
.ms-change-body { min-width: 0; flex: 1; }
.ms-change-summary { font-weight: 600; font-size: var(--text-sm); overflow-wrap: anywhere; }
.ms-change-by { display: flex; align-items: center; gap: var(--s1); flex-wrap: wrap; margin-top: 2px; }
.ms-change-details { margin-top: var(--s1); font-size: var(--text-xs); color: var(--txm); }
.ms-change-details summary { cursor: pointer; }
.ms-change-details ul { margin: var(--s1) 0 0; padding-left: var(--s5); }
.ms-change-details li { overflow-wrap: anywhere; }
.ms-modal-log .card { box-shadow: none; margin: var(--s4) 0 0; }
.ms-log { margin-top: var(--s4); }

/* ---- editor ---- */
.ms-edit-meta { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: flex-end; }
.ms-edit-meta .ms-f { flex: 0 1 200px; }
.ms-hint { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s3); padding: var(--s3) var(--s4); border-radius: var(--r-md); background: var(--warns); color: var(--tx); font-size: var(--text-xs); }
.ms-hint-btn { padding: var(--s1) var(--s3); font-size: var(--text-xs); }
.ms-roster { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.ms-roster-title { display: flex; align-items: center; gap: var(--s2); font-weight: 700; font-size: var(--text-sm); margin-bottom: var(--s2); }
.ms-chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.ms-chip { display: inline-flex; align-items: center; gap: var(--s1); font-size: var(--text-xs); background: var(--sfo); border: 1px solid var(--div); border-radius: var(--r-full); padding: 2px var(--s2) 2px var(--s3); }
.ms-chip-new { border-color: var(--pri); }
.ms-chip-x { border: 0; background: none; color: var(--txf); cursor: pointer; display: grid; place-items: center; padding: 2px; border-radius: var(--r-full); }
.ms-chip-x:hover { color: var(--err); background: var(--errs); }
.ms-add-player, .ms-inline-form { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: flex-end; margin-top: var(--s4); }
.ms-add-player .ms-f:first-child, .ms-inline-form .ms-f:first-child { flex: 1 1 220px; }
@media (max-width: 640px) { .ms-roster { grid-template-columns: 1fr; } }

/* ---- teams ---- */
.ms-team-toolbar { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s4); }
.ms-league { margin-bottom: var(--s6); }
.ms-league-title { display: flex; align-items: center; gap: var(--s2); font-size: var(--text-base); font-weight: 700; margin: 0 0 var(--s3); }
.ms-league-logo { width: 26px; height: 26px; object-fit: contain; }
.ms-team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--s4); }
.ms-team-actions { margin-top: var(--s3); }
.ms-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); margin-bottom: var(--s3); }
.ms-form-grid .ms-f-wide { grid-column: 1 / -1; }
@media (max-width: 520px) { .ms-form-grid { grid-template-columns: 1fr; } }

/* ---- players: merge, staff tools ---- */
.ms-staff-tools { margin-top: var(--s4); }
.ms-merge-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); margin: var(--s2) 0; }
.ms-merge-card { display: flex; align-items: center; gap: var(--s3); padding: var(--s3); border: 2px solid var(--brd); border-radius: var(--r-lg); cursor: pointer; background: var(--sf); }
.ms-merge-card.ms-keep { border-color: var(--pri); background: var(--prihi); }
.ms-merge-card input { margin: 0; }
.ms-merge-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ms-merge-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--pri); }
.ms-merge-card:not(.ms-keep) .ms-merge-label { color: var(--err); }
@media (max-width: 520px) { .ms-merge-pair { grid-template-columns: 1fr; } }

/* ---- staff ---- */
.ms-staff { display: flex; flex-direction: column; }
.ms-staff-row { display: flex; align-items: center; gap: var(--s2); padding: var(--s2) 0; border-bottom: 1px solid var(--div); flex-wrap: wrap; }
.ms-staff-row:last-child { border-bottom: 0; }
.ms-staff-row select { width: auto; }
.ms-staff-remove { padding: var(--s1) var(--s3); font-size: var(--text-xs); }
.ms-modal-wide .ms-form-grid .ms-f, .ms-modal-wide .ms-f:has(.ms-search) { max-width: none; }
.ms-modal-wide .ms-f select { padding: var(--s2) var(--s3); border-radius: var(--r-md); border: 1px solid var(--brd); background: var(--sfd); color: var(--tx); font: inherit; font-size: var(--text-sm); }
.ms-modal-wide .ms-search { display: flex; gap: var(--s2); }
.ms-modal-wide .ms-search input { flex: 1; min-width: 0; }
.ms-merge-card, .ms-merge-card .ms-merge-text > * { text-transform: none; letter-spacing: normal; font-weight: 400; color: var(--tx); }
.ms-merge-card .ms-merge-text b { font-weight: 700; font-size: var(--text-sm); }
.ms-merge-card .ms-merge-text .ms-muted { color: var(--txm); }
.ms-merge-card .ms-merge-text .ms-merge-label { text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--pri); }
.ms-merge-card:not(.ms-keep) .ms-merge-text .ms-merge-label { color: var(--err); }
.ms-league-table .ms-team-cell, .ms-history .ms-team-cell { font-family: var(--ff); }
.ms-league-table .ms-team-cell { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 640px) { .ms-league-table .ms-team-cell { max-width: 140px; } .ms-league-table td, .ms-league-table th { padding-left: 6px; padding-right: 6px; } }
.ms-account .ms-role { flex-shrink: 0; }
@media (max-width: 640px) { .ms-account .ms-role { display: none; } }

/* ---- confirmed / unconfirmed ---- */
.ms-unconfirmed { color: var(--warn); font-weight: 700; }
.ms-status { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; padding: var(--s3) var(--s4); margin-bottom: var(--s4); }
.ms-status-dot { width: 10px; height: 10px; border-radius: var(--r-full); flex-shrink: 0; }
.ms-status-on .ms-status-dot { background: var(--ok); }
.ms-status-off { border-color: var(--warn); }
.ms-status-off .ms-status-dot { background: var(--warn); }
.ms-status-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 200px; }

/* Teams: active / inactive, colours, rivals */
.ms-team-status { display: inline-block; margin-left: var(--s2); padding: 0 6px; border-radius: var(--r-full); font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; vertical-align: middle; }
.ms-team-active { background: var(--oks); color: var(--ok); }
.ms-team-inactive-tag { background: var(--sfd); color: var(--txf); border: 1px solid var(--brd); }
.team-card.ms-team-inactive .team-card-header { opacity: .6; }
.ms-modal-wide .ms-form-grid .ms-f.ms-check { flex-direction: row; align-items: flex-start; padding: var(--s2) 0; }
.ms-modal-wide .ms-form-grid .ms-f.ms-check input { margin-top: 2px; }
.ms-color-field { display: flex; align-items: center; gap: var(--s2); }
.ms-modal-wide .ms-color-field input[type="color"] { width: 44px; height: 32px; padding: 2px; cursor: pointer; }
.ms-color-clear { padding: 2px var(--s2); font-size: var(--text-xs); }
.ms-color-clear[hidden] { display: none; }
.ms-rivals { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s1) 0 var(--s2); }
.ms-rival-chip { display: inline-flex; align-items: center; gap: var(--s1); padding: 2px 4px 2px var(--s3); border-radius: var(--r-full); background: var(--sfd); border: 1px solid var(--brd); color: var(--tx); font-size: var(--text-sm); }
.ms-rival-x { border: 0; background: none; color: var(--txf); cursor: pointer; font-size: 16px; line-height: 1; padding: 0 var(--s1); }
.ms-rival-x:hover { color: var(--red); }
.ms-modal-wide .ms-rivals + .ms-inline-form select { flex: 1; min-width: 0; padding: var(--s2) var(--s3); border-radius: var(--r-md); border: 1px solid var(--brd); background: var(--sfd); color: var(--tx); font: inherit; font-size: var(--text-sm); }
.ms-modal-wide .ms-form-grid .ms-f.ms-check > input { flex: 0 0 auto; width: 16px; height: 16px; padding: 0; margin: 2px 0 0; }
.ms-modal-wide .ms-form-grid .ms-f.ms-check > span, .ms-f > .ms-color-field { flex: 1 1 auto; min-width: 0; font-size: var(--text-sm); font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--txm); }

/* the team editor: its logo and name as they'll look */
.ms-team-preview { display: flex; align-items: center; gap: var(--s4); padding: var(--s3); border: 1px solid var(--brd); border-radius: var(--r-lg); background: var(--sfd); }
.ms-team-preview-logo { width: 72px; height: 72px; flex: 0 0 72px; display: flex; align-items: center; justify-content: center; border-radius: var(--r-md); background: var(--sf); overflow: hidden; text-align: center; }
.ms-team-preview-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ms-team-preview-logo img[hidden] { display: none; }
.ms-team-preview-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: var(--text-base); color: var(--tx); }

/* a team's page */
.ms-team-head { display: flex; align-items: center; gap: var(--s5); }
.ms-team-head-logo { width: 88px; height: 88px; object-fit: contain; flex: 0 0 88px; border-radius: var(--r-lg); }
.ms-team-head-text .page-title { margin: 0; }
.ms-team-head-text .page-subtitle { margin: var(--s1) 0 0; }
.ms-team-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--s4); }
.ms-team-fact { display: flex; flex-direction: column; gap: 2px; font-size: var(--text-sm); color: var(--tx); }
.ms-team-fact-label { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--txf); }
.ms-team-actions { display: flex; gap: var(--s2); flex-wrap: wrap; }

/* Sign in, settings */
.ms-role-badges { display: inline-flex; gap: 4px; align-items: center; }
.ms-settings-btn { width: 34px; height: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.ms-settings-btn svg { width: 18px; height: 18px; fill: none; }
.ms-signin-box { display: flex; flex-direction: column; gap: var(--s4); }
.ms-signin-box p { margin: 0; }
.ms-google-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); background: var(--sfo); border: 1px solid var(--brd); color: var(--tx); padding: var(--s3) var(--s4); font-weight: 600; }
.ms-google-btn:hover { border-color: var(--pri); }
.ms-legal { font-size: var(--text-xs); color: var(--txf); }
.ms-legal a, .ms-settings-privacy { color: var(--txm); }
.ms-settings-modal { max-width: 460px; }
.ms-settings-group { display: flex; flex-direction: column; gap: var(--s1); margin-bottom: var(--s5); }
.ms-settings-head { font-size: var(--text-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--txf); margin-bottom: var(--s1); }
.ms-settings-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding: var(--s3) 0; border-top: 1px solid var(--div); }
.ms-settings-row:first-of-type { border-top: 0; }
.ms-settings-row b { color: var(--tx); font-weight: 600; font-size: var(--text-sm); }
.ms-settings-row .btn { flex-shrink: 0; padding: var(--s2) var(--s4); font-size: var(--text-xs); }
.ms-settings-row .ms-btn-danger[disabled] { opacity: .45; cursor: not-allowed; }
.ms-seg { display: inline-flex; border: 1px solid var(--brd); border-radius: var(--r-full); padding: 2px; background: var(--sfd); flex-shrink: 0; }
.ms-seg button { padding: var(--s1) var(--s4); border-radius: var(--r-full); font-size: var(--text-xs); font-weight: 600; color: var(--txm); }
.ms-seg button.on { background: var(--sf); color: var(--tx); box-shadow: var(--sh-sm); }
.ms-settings-privacy { display: block; text-align: center; font-size: 11px; opacity: .7; text-decoration: underline; text-underline-offset: 2px; }
.ms-settings-privacy:hover { opacity: 1; }
@media (max-width: 720px) { .ms-role-badges { display: none; } }

/* the Legal link, at the bottom of every page */
.main { display: flex; flex-direction: column; }
.main > .view.active { flex: 1 0 auto; }
.ms-site-footer { margin-top: var(--s8); padding-top: var(--s4); border-top: 1px solid var(--div); text-align: center; font-size: 12px; }
.ms-site-footer a { color: var(--txf); text-decoration: none; }
.ms-site-footer a:hover { color: var(--txm); text-decoration: underline; }
.main > * { min-width: 0; }

/* Your data */
.ms-mydata th { width: 34%; color: var(--txm); font-weight: 600; text-align: left; vertical-align: top; }
.ms-mydata th, .ms-mydata td { text-align: left !important; }
.ms-mydata td { overflow-wrap: anywhere; font-family: var(--ff) !important; font-size: var(--text-sm); color: var(--tx); }
.ms-mydata td .ms-code { font-family: var(--fm); }
.ms-mydata-list { list-style: none; display: flex; flex-direction: column; }
.ms-mydata-list li { display: flex; flex-direction: column; gap: 2px; padding: var(--s2) 0; border-top: 1px solid var(--div); }
.ms-mydata-list li:first-child { border-top: 0; }

/* ---- tiers, positions and the Tierlist ---- */
.ms-tier { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--r-md); font-family: var(--fm); font-weight: 800; font-size: var(--text-sm); color: #15130f; }
.ms-tier-s { background: #e9b949; }
.ms-tier-a { background: #6fc28a; }
.ms-tier-b { background: #6aaee0; }
.ms-tier-c { background: #b49ae0; }
.ms-tier-d { background: #a8a49c; }
.ms-pos { display: inline-block; font-family: var(--fm); font-size: var(--text-xs); font-weight: 700; letter-spacing: .04em; padding: 2px 8px; border-radius: var(--r-full); border: 1px solid var(--brd); background: var(--sf2); color: var(--tx); }
.ms-tierlist td, .ms-tierlist th { text-align: left; vertical-align: middle; font-family: var(--ff); }
.ms-tierlist td:last-child, .ms-tierlist th:last-child { text-align: left; font-size: var(--text-sm); }
.ms-tierlist td:first-child, .ms-tierlist th:first-child { width: 56px; }
.ms-tierlist tr.ms-tl-break td { border-top: 2px solid var(--brd); }
.ms-tl-team { display: inline-flex; align-items: center; gap: var(--s2); }
.ms-tl-team .ms-logo { width: 22px; height: 22px; }
.ms-tl-sort { align-items: center; margin-bottom: 0; }
.ms-tl-sort button { cursor: pointer; font-family: inherit; }
.ms-chip-link.active { border-color: var(--pri); color: var(--pri); background: var(--prihi); }
.ms-tl-edit select { background: var(--sf2); border: 1px solid var(--brd); border-radius: var(--r-md); color: var(--tx); padding: 4px 6px; font-size: var(--text-xs); max-width: 170px; }
.ms-tl-edit td:first-child, .ms-tl-edit th:first-child { width: 28px; }
.ms-tl-handle { cursor: grab; color: var(--txf); font-size: 18px; user-select: none; text-align: center !important; }
.ms-tl-row.ms-dragging { opacity: .4; }
.ms-tl-head td { background: var(--sf2); padding-top: var(--s3); padding-bottom: var(--s3); }
.ms-tl-head td .ms-tier { margin-right: var(--s3); }
.ms-tl-edit td.ms-tl-moves { white-space: nowrap; text-align: right; }
.ms-tl-moves .copy-btn { display: inline-flex; padding: 2px 8px; margin: 0 0 0 2px; }
.ms-tl-moves .copy-btn:disabled { opacity: .3; cursor: default; }
tr.ms-drop-before td { box-shadow: inset 0 2px 0 var(--pri); }
tr.ms-drop-after td { box-shadow: inset 0 -2px 0 var(--pri); }
tr.ms-drop-into td { box-shadow: inset 0 0 0 2px var(--pri); }
.ms-player-details { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s2); }
.ms-player-details .ms-plink { text-decoration: none; }
.ms-details-form { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: flex-end; margin-bottom: var(--s2); }
.ms-details-form select, .ms-f-wide input[type="text"] { background: var(--sf2); border: 1px solid var(--brd); border-radius: var(--r-md); color: var(--tx); padding: var(--s2) var(--s3); font-size: var(--text-sm); }
.ms-f-wide input[type="text"] { width: 100%; margin-bottom: var(--s3); }
.ms-toolbar-end { justify-content: flex-end; margin-bottom: var(--s3); }
@media (max-width: 640px) {
	.ms-tl-edit .ms-tl-handle, .ms-tl-edit th:first-child { display: none; }
	/* editing on a phone: each player is a small card, name and arrows on top, the menus below */
	.ms-tl-edit, .ms-tl-edit tbody { display: block; }
	.ms-tl-edit thead { display: none; }
	.ms-tl-edit tr.ms-tl-head { display: block; }
	.ms-tl-edit tr.ms-tl-head td { display: flex; align-items: center; width: auto; }
	.ms-tl-edit tr.ms-tl-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: var(--s3) 0; border-bottom: 1px solid var(--div); }
	.ms-tl-edit tr.ms-tl-row td { border: 0; padding: 0; }
	.ms-tl-edit tr.ms-tl-row td:nth-child(5) { order: -2; grid-column: span 2; align-self: center; font-size: var(--text-sm); }
	.ms-tl-edit tr.ms-tl-row td.ms-tl-moves { order: -1; }
	.ms-tl-edit select { width: 100%; max-width: none; }
	.ms-tierlist td, .ms-tierlist th { padding-left: 6px; padding-right: 6px; }
}
.ms-th-sort { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; border-radius: var(--r-sm); }
.ms-th-sort:hover, .ms-th-sort.active { color: var(--pri); }
.ms-th-sort:focus-visible { outline: 2px solid var(--pri); outline-offset: 3px; }
.ms-th-arrow { font-size: 9px; opacity: .55; }
.ms-th-sort.active .ms-th-arrow { opacity: 1; }
.ms-tl-logo-only { display: inline-flex; }
.ms-tl-logo-only .ms-logo { width: 28px; height: 28px; }
.ms-tl-code { font-family: var(--fm); font-size: var(--text-xs); font-weight: 700; padding: 2px 6px; border: 1px solid var(--brd); border-radius: var(--r-sm); }
/* the Tierlist: Tier, Position and Team as narrow as each other, Player takes the rest */
.ms-tierlist:not(.ms-tl-edit) { table-layout: fixed; }
.ms-tierlist:not(.ms-tl-edit) th:nth-child(-n+3), .ms-tierlist:not(.ms-tl-edit) td:nth-child(-n+3) { width: 124px; }
.ms-tierlist:not(.ms-tl-edit) td:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) { .ms-tierlist:not(.ms-tl-edit) th:nth-child(-n+3), .ms-tierlist:not(.ms-tl-edit) td:nth-child(-n+3) { width: 84px; } }
/* player cards: the avatar on the left; name, names and numbers on the right, never wider than the card */
.ms-player-card { column-gap: var(--s4); row-gap: 4px; padding: var(--s4) var(--s5); align-content: center; }
.ms-player-card > :not(.ms-pavatar) { grid-column: 2; min-width: 0; }
.ms-player-card .ms-pavatar { width: 52px; height: 52px; grid-row: 1 / span 4; align-self: center; }
.ms-player-name, .ms-player-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-player-name { font-size: var(--text-base); }
.ms-player-mini { margin-top: var(--s1); gap: var(--s4); flex-wrap: wrap; }
.ms-player-mini > span { white-space: nowrap; }
.ms-player-card .ms-tag-hidden { justify-self: start; margin-top: 2px; }
/* a player card's tier and team logo, on the right */
.ms-player-card { grid-template-columns: auto minmax(0, 1fr) auto; }
.ms-player-card > .ms-card-badges { grid-column: 3; grid-row: 1 / span 4; align-self: center; display: flex; flex-direction: column; align-items: center; gap: var(--s2); }
.ms-tier-sm { width: 24px; height: 24px; font-size: var(--text-xs); border-radius: var(--r-sm); }
.ms-card-team { width: 26px; height: 26px; object-fit: contain; display: block; }
/* staff tools on a phone: one button per line, full width */
@media (max-width: 640px) {
	.ms-staff-tools .btn-row { flex-direction: column; align-items: stretch; }
	.ms-staff-tools .btn-row .btn { width: 100%; justify-content: center; }
	.ms-staff-tools .btn-row .ms-spacer { display: none; }
	.ms-details-form .ms-f { min-width: 100%; }
	.ms-details-form .btn { width: 100%; justify-content: center; }
}
.ms-f-grow { flex: 3; }
.ms-discord-card input[type="text"] { background: var(--sf2); border: 1px solid var(--brd); border-radius: var(--r-md); color: var(--tx); padding: var(--s2) var(--s3); font-size: var(--text-sm); }
#msDiscState { margin-bottom: var(--s3); }

/* ---- the transfer market, finances, honours ---- */
.ms-team-chip { display: inline-flex; align-items: center; gap: var(--s2); }
.ms-team-chip .ms-logo { width: 22px; height: 22px; }
.ms-window { display: inline-block; font-size: var(--text-xs); font-weight: 700; padding: 2px 10px; border-radius: var(--r-full); border: 1px solid var(--brd); color: var(--txm); }
.ms-window-open { color: var(--ok); border-color: var(--ok); background: var(--oks); }
.ms-deal-status { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 8px; border-radius: var(--r-full); border: 1px solid var(--brd); white-space: nowrap; }
.ms-st-open { color: var(--pri); border-color: var(--pri); }
.ms-st-agreed { color: var(--warn); border-color: var(--warn); background: var(--warns); }
.ms-st-done { color: var(--ok); border-color: var(--ok); background: var(--oks); }
.ms-st-off { color: var(--txf); }
.ms-deal-list { display: flex; flex-direction: column; gap: var(--s2); }
.ms-deal-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: var(--s3); align-items: center; padding: var(--s3) var(--s4); border: 1px solid var(--brd); border-radius: var(--r-md); background: var(--sf2); text-decoration: none; color: var(--tx); }
.ms-deal-row:hover { border-color: var(--pri); }
.ms-deal-player { display: flex; flex-direction: column; min-width: 0; }
.ms-deal-player b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-deal-teams { display: inline-flex; align-items: center; gap: var(--s2); }
.ms-deal-teams .ms-logo { width: 22px; height: 22px; }
.ms-deal-fee { font-family: var(--fm); font-weight: 700; white-space: nowrap; }
.ms-market-table td, .ms-market-table th { text-align: left; }
.ms-market-table td:last-child { text-align: right; }
.ms-btn-sm { padding: 4px 10px; font-size: var(--text-xs); }
.ms-balance-table td:last-child { font-family: var(--fm); font-weight: 700; font-size: var(--text-sm); }
.ms-neg { color: var(--err); }
.ms-money-pos { color: var(--ok); }
.ms-select { background: var(--sf2); border: 1px solid var(--brd); border-radius: var(--r-md); color: var(--tx); padding: var(--s2) var(--s3); margin-bottom: var(--s3); }
.ms-ledger { display: flex; flex-direction: column; }
.ms-ledger-row { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; grid-template-areas: "when team amount" "what what what"; gap: 2px var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--div); }
.ms-ledger-when { grid-area: when; }
.ms-ledger-team { grid-area: team; display: inline-flex; align-items: center; gap: var(--s2); min-width: 0; }
.ms-ledger-team .ms-logo { width: 20px; height: 20px; }
.ms-ledger-amount { grid-area: amount; font-family: var(--fm); font-weight: 700; white-space: nowrap; }
.ms-ledger-what { grid-area: what; display: flex; flex-direction: column; font-size: var(--text-sm); }
.ms-contract-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s3); }
.ms-contract-move { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; margin: var(--s3) 0 var(--s4); font-size: var(--text-base); }
.ms-contract-move .ms-logo { width: 32px; height: 32px; }
.ms-contract-arrow { font-size: 22px; color: var(--txf); }
.ms-steps { margin: 0; padding-left: var(--s5); display: flex; flex-direction: column; gap: var(--s2); }
.ms-steps li { display: flex; flex-direction: column; }
.ms-prize-league, .ms-prize-cup { padding: var(--s3) 0; border-bottom: 1px solid var(--div); }
.ms-prize-head { display: flex; align-items: center; gap: var(--s2); font-weight: 700; margin-bottom: var(--s2); }
.ms-prize-places { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--s2); margin-bottom: var(--s2); }
.ms-prize-cup { display: grid; grid-template-columns: minmax(0, 1.5fr) 1fr 1fr; gap: var(--s3); align-items: end; }
.ms-prize-places input, .ms-prize-cup input, .ms-f-wide input[type="text"], .ms-f-wide textarea, .ms-details-form input[type="text"] { background: var(--sf2); border: 1px solid var(--brd); border-radius: var(--r-md); color: var(--tx); padding: var(--s2) var(--s3); font-size: var(--text-sm); width: 100%; }
.ms-f-wide textarea { min-height: 70px; resize: vertical; margin-bottom: var(--s2); }
.ms-squad { display: flex; flex-direction: column; gap: 4px; }
.ms-squad-row { display: flex; align-items: center; gap: var(--s3); padding: 6px var(--s2); border-radius: var(--r-md); text-decoration: none; color: var(--tx); }
.ms-squad-row:hover { background: var(--sf2); }
.ms-squad-row .ms-tier { width: 24px; height: 24px; font-size: var(--text-xs); }
.ms-tier-none { background: var(--sfd); color: var(--txf); }
.ms-honours { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--s2); }
.ms-honour { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: var(--s2); align-items: center; padding: var(--s3); border: 1px solid var(--brd); border-radius: var(--r-md); text-decoration: none; color: var(--tx); background: var(--sf2); }
.ms-honour .ms-chip-logo { grid-row: span 2; }
.ms-honours-table td, .ms-honours-table th { text-align: left; white-space: nowrap; }
.ms-honours-table td:last-child, .ms-honours-table th:last-child { text-align: left; font-size: var(--text-sm); }
@media (max-width: 640px) {
	.ms-deal-row { grid-template-columns: minmax(0, 1fr) auto; }
	.ms-deal-teams { grid-row: 2; }
	.ms-ledger-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "team amount" "when when" "what what"; }
	.ms-prize-cup { grid-template-columns: 1fr 1fr; }
	.ms-prize-cup .ms-prize-head { grid-column: span 2; }
}
.ms-honours-table td { font-family: var(--ff); }
.ms-deal-row .ms-deal-status { justify-self: end; }

/* ---- a league's own table ---- */
.ms-standings th, .ms-standings td { text-align: center; padding: 10px 8px; font-family: var(--fm); }
.ms-standings .ms-st-club { text-align: left; font-family: var(--ff); min-width: 180px; }
.ms-standings .ms-st-pos { width: 36px; color: var(--txm); }
.ms-standings th:last-child, .ms-standings td:last-child { text-align: center; }
.ms-standings .ms-st-pts { font-weight: 800; font-size: var(--text-base); }
.ms-standings tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--sf2) 55%, transparent); }
.ms-standings tr.ms-st-first td:first-child, .ms-standings tr.ms-st-champion td:first-child { box-shadow: inset 3px 0 0 var(--pri); color: var(--tx); font-weight: 700; }
.ms-standings tr.ms-st-champion td:first-child { box-shadow: inset 3px 0 0 #e9b949; }
.ms-standings .ms-team-cell .team-side-logo { width: 24px; height: 24px; }
.ms-standings-card { padding-top: var(--s4); }
@media (max-width: 640px) { .ms-standings th, .ms-standings td { padding: 8px 4px; } .ms-standings .ms-st-club { min-width: 120px; } }
/* finances by league, the log as a table */
.ms-balance-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s5); }
.ms-balance-head { display: flex; align-items: center; gap: var(--s2); font-weight: 700; margin-bottom: var(--s2); }
.ms-ledger-filters { margin-bottom: var(--s3); }
.ms-ledger-filters select { background: var(--sf2); border: 1px solid var(--brd); border-radius: var(--r-md); color: var(--tx); padding: var(--s2) var(--s3); }
.ms-ledger-table th, .ms-ledger-table td { text-align: left; vertical-align: top; font-family: var(--ff); }
.ms-ledger-table td.ms-ledger-amount, .ms-ledger-table td.ms-ledger-balance, .ms-ledger-table th:nth-child(4), .ms-ledger-table th:nth-child(5) { text-align: right; font-family: var(--fm); white-space: nowrap; font-size: var(--text-sm); }
.ms-ledger-table .ms-ledger-what { display: table-cell; }
.ms-ledger-table .ms-ledger-what .ms-muted { display: block; }
.ms-choice { display: flex; flex-direction: column; gap: var(--s2); margin: var(--s2) 0 var(--s3); }
.ms-choice label { display: flex; gap: var(--s2); align-items: baseline; }
/* the finance log on a phone: one card per line (team and the change on top, the balance after
   and the date under it, then what happened) */
@media (max-width: 640px) {
	.ms-ledger-table thead { display: none; }
	.ms-ledger-table, .ms-ledger-table tbody { display: block; }
	.ms-ledger-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "team amount" "when balance" "what what"; gap: 4px var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--div); }
	.ms-ledger-table td { border: 0; padding: 0; display: block; }
	.ms-ledger-table td:nth-child(1) { grid-area: when; }
	.ms-ledger-table td:nth-child(2) { grid-area: team; }
	.ms-ledger-table td.ms-ledger-what { grid-area: what; display: block; }
	.ms-ledger-table td.ms-ledger-amount { grid-area: amount; }
	.ms-ledger-table td.ms-ledger-balance { grid-area: balance; }
	.ms-ledger-table td.ms-ledger-balance::before { content: "balance "; color: var(--txf); font-family: var(--ff); font-size: var(--text-xs); }
	.ms-ledger-table .ms-ledger-season { display: inline; margin-left: var(--s2); }
}
.ms-ledger-season { display: block; }
/* the league table: position, matches played and points stand out; the last three as icons */
.ms-standings .ms-st-pos { font-weight: 800; color: var(--tx); width: 44px; }
.ms-standings th.ms-st-mp, .ms-standings th.ms-st-pts, .ms-standings th.ms-st-pos { color: var(--pri); }
.ms-standings td.ms-st-mp { font-weight: 700; color: var(--tx); background: color-mix(in srgb, var(--pri) 8%, transparent) !important; }
.ms-standings td.ms-st-pts { font-weight: 800; font-size: var(--text-base); color: var(--tx); background: color-mix(in srgb, var(--pri) 16%, transparent) !important; }
.ms-standings td.ms-st-pos { background: color-mix(in srgb, var(--pri) 8%, transparent) !important; }
.ms-standings .ms-st-last { white-space: nowrap; }
.ms-last { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; font-style: normal; font-weight: 900; font-size: 12px; margin: 0 1px; color: #fff; font-family: var(--ff); }
.ms-last-W { background: #2e9d4b; }
.ms-last-L { background: #c8383f; }
.ms-last-D { background: #8a8a8a; }
.ms-standings-title { display: flex; align-items: center; gap: var(--s2); font-weight: 800; font-size: var(--text-base); margin-bottom: var(--s3); text-transform: uppercase; letter-spacing: .04em; }

/* ---- season top 10s: goals, assists, cards ---------------------------------------------------- */
.ms-leader-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--s3); }
.ms-leader-table { border: 1px solid var(--brd); border-radius: var(--r-md); overflow: hidden; background: var(--sf); }
.ms-leader-head { padding: var(--s2) var(--s3); font-weight: 800; font-size: var(--text-sm); letter-spacing: .02em; background: var(--sf2); border-bottom: 1px solid var(--brd); }
.ms-leader-table > p { padding: var(--s2) var(--s3); margin: 0; }
.ms-leaders { list-style: none; margin: 0; padding: 0; }
.ms-leaders li { display: flex; align-items: center; gap: var(--s2); padding: 6px var(--s3); font-size: var(--text-sm); min-width: 0; }
.ms-leaders li:nth-child(even) { background: color-mix(in srgb, var(--sf2) 55%, transparent); }
.ms-leaders li a { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-leaders li b { font-family: var(--fm); font-weight: 800; min-width: 2ch; text-align: right; }
.ms-leader-rank { width: 2ch; text-align: right; color: var(--txm); font-family: var(--fm); font-size: var(--text-xs); }
.ms-leaders li:first-child .ms-leader-rank { color: #e9b949; font-weight: 800; }
.ms-leader-logo { width: 18px; height: 18px; object-fit: contain; flex: none; }

/* ---- cup brackets: mirrored, the final in the middle ----------------------------------------- */
.ms-bracket-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: var(--s2); }
.ms-bracket { --gap: 24px; display: grid; grid-template-columns: repeat(var(--cols), minmax(180px, 1fr)); column-gap: var(--gap); min-width: calc(var(--cols) * 180px + (var(--cols) - 1) * var(--gap)); }
.ms-bt-col { display: flex; flex-direction: column; min-width: 0; }
.ms-bt-label { text-align: center; font-weight: 800; font-size: var(--text-sm); text-transform: uppercase; letter-spacing: .06em; color: var(--txm); padding-bottom: var(--s2); }
.ms-bt-ties { flex: 1; display: flex; flex-direction: column; justify-content: space-around; }
.ms-bt-pair { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: space-around; padding: 6px 0; }
.ms-bt-tie { position: relative; }
.ms-bt-head, .ms-bt-row { display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: center; column-gap: 4px; }
.ms-bt-2legs .ms-bt-row, .ms-bt-tie:has(.ms-bt-2legs) .ms-bt-head { grid-template-columns: minmax(0, 1fr) 22px 22px 30px; }
.ms-bt-team a { flex: none; }
.ms-bt-head { font-size: 9px; font-weight: 800; color: var(--txm); text-align: center; letter-spacing: .04em; padding: 0 6px 2px; }
.ms-bt-box { border: 1px solid var(--brd); border-radius: var(--r-md); background: var(--sf); overflow: hidden; }
.ms-bt-row { padding: 5px 6px; min-height: 30px; }
.ms-bt-row + .ms-bt-row { border-top: 1px solid var(--div); }
.ms-bt-team { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--text-sm); }
.ms-bt-team a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-bt-code { font-family: var(--fm); font-weight: 700; letter-spacing: .04em; }
.ms-bt-logo { width: 20px; height: 20px; object-fit: contain; flex: none; }
.ms-bt-won a { font-weight: 800; color: var(--tx); }
.ms-bt-lost a { text-decoration: line-through; color: var(--txm); }
.ms-bt-lost .ms-bt-logo { opacity: .5; }
.ms-bt-n { text-align: center; font-family: var(--fm); font-size: var(--text-xs); color: var(--txm); }
.ms-bt-n.ms-bt-agg { font-size: var(--text-sm); }
.ms-bt-agg { font-weight: 800; color: var(--tx); }
.ms-bt-2legs .ms-bt-agg { background: var(--sf2); border-radius: 4px; }
.ms-bt-note { font-size: 10px; color: var(--txm); text-align: center; padding-top: 2px; }
/* the lines between rounds: a pair's two ties join, then go on to the next round */
.ms-bt-left .ms-bt-pair::before, .ms-bt-right .ms-bt-pair::before { content: ""; position: absolute; top: 50%; width: calc(var(--gap) / 2); border-top: 2px solid var(--brd); }
.ms-bt-left .ms-bt-pair::before { right: calc(var(--gap) / -1); }
.ms-bt-right .ms-bt-pair::before { left: calc(var(--gap) / -1); }
.ms-bt-left .ms-bt-pair:not(.ms-bt-joined)::before, .ms-bt-right .ms-bt-pair:not(.ms-bt-joined)::before { width: var(--gap); }
.ms-bt-joined::after { content: ""; position: absolute; top: 25%; bottom: 25%; width: calc(var(--gap) / 2); border: 2px solid var(--brd); }
.ms-bt-left .ms-bt-joined::after { right: calc(var(--gap) / -2); border-left: 0; border-radius: 0 6px 6px 0; }
.ms-bt-right .ms-bt-joined::after { left: calc(var(--gap) / -2); border-right: 0; border-radius: 6px 0 0 6px; }
.ms-bt-center .ms-bt-ties { justify-content: center; }
.ms-bt-center .ms-bt-pair { flex: none; }
/* the cup and the champion take the same height above and below the final, so it lines up with the semifinals */
.ms-bt-above, .ms-bt-below { height: 118px; display: flex; flex-direction: column; justify-content: flex-end; }
.ms-bt-below { justify-content: flex-start; }
.ms-bt-center .ms-bt-box { border-color: color-mix(in srgb, var(--pri) 55%, var(--brd)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--pri) 25%, transparent); }
.ms-bt-cup { display: flex; justify-content: center; padding-bottom: var(--s1); }
.ms-bt-cup-logo { width: 72px; height: 72px; object-fit: contain; }
.ms-bt-final-label { color: var(--tx); }
.ms-bt-champion { text-align: center; font-weight: 800; padding-top: var(--s2); }
/* one round only (the Trophée's final): no lines */
.ms-bracket[style*="--cols:1"] { min-width: 0; max-width: 340px; margin: 0 auto; }
/* the editor */
.ms-br-head { font-weight: 700; margin: var(--s3) 0 var(--s2); }
.ms-br-first { display: grid; gap: var(--s2); }
.ms-br-tie { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--s2); align-items: center; }
.ms-br-tie select, .ms-br-win select { width: 100%; min-width: 0; }
.ms-br-win { display: block; margin-bottom: var(--s2); }

/* ---- money before and after (claims, offers, renewals) --------------------------------------- */
.ms-cost { display: grid; gap: 2px; border: 1px solid var(--brd); border-radius: var(--r-md); padding: var(--s2) var(--s3); margin: var(--s2) 0; font-size: var(--text-sm); }
.ms-cost > div { display: flex; justify-content: space-between; gap: var(--s3); }
.ms-cost b { font-family: var(--fm); font-variant-numeric: tabular-nums; }
.ms-cost-after { border-top: 1px solid var(--div); padding-top: 4px; margin-top: 2px; font-weight: 700; }
/* ---- My team: the balance, the squad and its contracts --------------------------------------- */
.ms-myteam-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); }
.ms-myteam-team .ms-team-chip { font-size: var(--text-base); font-weight: 700; }
.ms-myteam-balance { display: grid; text-align: right; }
.ms-myteam-balance b { font-family: var(--fm); font-size: 1.6rem; font-variant-numeric: tabular-nums; line-height: 1.15; }
.ms-squad-table td { vertical-align: middle; }
.ms-squad-table td:nth-child(3) { min-width: 0; }
.ms-squad-table td:nth-child(3) .ms-muted { display: block; }
.ms-squad-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.ms-contract-state { font-weight: 700; font-size: var(--text-sm); }
.ms-cs-due { color: var(--warn); }
.ms-cs-renewed { color: var(--ok); }
.ms-cs-new { color: var(--pri); }
.ms-tag-warn { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); }
.ms-sub-head { font-weight: 700; margin: var(--s3) 0 var(--s2); }
.ms-renew-list { display: grid; gap: var(--s3); }
.ms-renew-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-bottom: 4px; }
.ms-renew-players { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--text-sm); }
.ms-renew-players a { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 640px) {
	.ms-squad-table thead { display: none; }
	.ms-squad-table tr { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; padding: 8px 0; border-bottom: 1px solid var(--div); }
	.ms-squad-table td { padding: 0; border: 0; }
	.ms-squad-table td:nth-child(3), .ms-squad-table td:nth-child(4) { grid-column: 1 / -1; }
	.ms-squad-actions { justify-content: flex-start; }
	.ms-myteam-balance { text-align: left; }
}
/* honours added by hand; the bracket's random draw */
.ms-honour-wrap { display: inline-flex; align-items: center; gap: 2px; }
.ms-honour-x { padding: 2px 8px; line-height: 1; }
.ms-honour-add { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s2); margin-top: var(--s3); }
.ms-br-head-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2); }

/* match rows: the short code on narrow screens, so no team's name is cut off */
.ms-name-code { display: none; font-family: var(--fm); letter-spacing: .04em; }
@media (max-width: 520px) {
	.ms-match-row .ms-team-name:has(.ms-name-code) .ms-name-full { display: none; }
	.ms-match-row .ms-name-code { display: inline; }
}

/* fields in a grid take their cell's width (the 150px a field wants elsewhere overlapped the next one) */
.ms-prize-places > .ms-f, .ms-prize-cup > .ms-f, .ms-cost > div { min-width: 0; }
/* a team's own finance log (half a page wide): one card per line, without the team */
.ms-ledger-compact thead { display: none; }
.ms-ledger-compact, .ms-ledger-compact tbody { display: block; }
.ms-ledger-compact tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "what amount" "when balance"; gap: 4px var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--div); }
.ms-ledger-compact td { border: 0; padding: 0; display: block; }
.ms-ledger-compact td:nth-child(1) { grid-area: when; }
.ms-ledger-compact td:nth-child(2) { display: none; }
.ms-ledger-compact td.ms-ledger-what { grid-area: what; display: block; min-width: 0; overflow-wrap: anywhere; }
.ms-ledger-compact td.ms-ledger-amount { grid-area: amount; }
.ms-ledger-compact td.ms-ledger-balance { grid-area: balance; }
.ms-ledger-compact td.ms-ledger-balance::before { content: "balance "; color: var(--txf); font-family: var(--ff); font-size: var(--text-xs); }
.ms-ledger-compact .ms-ledger-season { display: inline; margin-left: var(--s2); }
/* deal rows in a narrow card (a split page) go to two lines, and the player's name wraps, not cut off */
.ms-deal-list { container-type: inline-size; }
.ms-deal-player b { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
@container (max-width: 560px) {
	.ms-deal-row { grid-template-columns: minmax(0, 1fr) auto; }
	.ms-deal-teams { grid-row: 2; }
}
/* My team's squad: names in the body face, left-aligned like the headings */
.ms-squad-table th, .ms-squad-table td { text-align: left; font-family: var(--ff); }
.ms-squad-table td:last-child { text-align: right; }
.ms-team-chip { display: inline-flex; align-items: center; vertical-align: middle; }
/* a league table on a phone: position, club, played, goal difference, the last three and points fit
   the screen (won, drawn, lost and the goals are in the wider view) */
@media (max-width: 480px) {
	.ms-hide-xs { display: none; }
	.ms-standings .ms-st-club { min-width: 0; }
	.ms-standings .ms-team-cell { white-space: normal; }
	.ms-standings th, .ms-standings td { padding-left: 5px; padding-right: 5px; }
	.ms-standings .ms-st-last { white-space: nowrap; }
}

/* a forfeit (FFT) on the match page, under the score */
.ms-fft { font-weight: 600; }
.ms-edit-ffw { margin-top: var(--s3); }
.ms-squad-note { margin-top: var(--s4); }
/* (late Oct) wide money fields: 250,000,000 fits */
.ms-prize-places { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.ms-edit-ffw { max-width: 360px; }
.ms-edit-team .ms-f { min-width: 0; }
@media (max-width: 1100px) { .ms-edit-teams { grid-template-columns: 1fr; } }
.ms-details-form > .ms-f { flex: 1 1 200px; min-width: min(200px, 100%); }
.ms-details-form > .ms-f select, .ms-details-form > .ms-f input { width: 100%; }
.ms-edit-row .ms-f-team { flex: 0 1 240px; }
.ms-diff .ms-diff-key, .ms-diff-key { display: inline; padding: 0 4px; border-radius: 3px; }

/* ---- the schedule ---- */
.ms-tag-ok { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); }
.ms-tag-bad { background: color-mix(in srgb, var(--err) 16%, transparent); color: var(--err); }
.ms-week { padding: 0; overflow: hidden; }
.ms-week > summary, .ms-plan-week > summary { list-style: none; cursor: pointer; }
.ms-week > summary::-webkit-details-marker, .ms-plan-week > summary::-webkit-details-marker { display: none; }
.ms-week-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); padding: var(--s4) var(--s5); }
.ms-week-head::before { content: "▾"; color: var(--txf); font-size: 12px; width: 12px; }
details:not([open]) > .ms-week-head::before { content: "▸"; }
.ms-week-title { font-weight: 700; font-size: var(--text-base); }
.ms-week-head .ms-tag { margin-left: 0; padding: 1px 8px; border-radius: var(--r-full); background: var(--sf2); }
.ms-week-count { margin-left: auto; }
.ms-week .ms-fx-list, .ms-week > p { padding: 0 var(--s5) var(--s5); }
.ms-fx-list { display: grid; gap: var(--s2); }
.ms-fx {
	display: grid; grid-template-columns: 92px minmax(0, 150px) minmax(0, 1fr) minmax(0, auto); align-items: center; gap: var(--s2) var(--s4);
	background: var(--sf); border: 1px solid var(--brd); border-radius: var(--r-lg); padding: var(--s3) var(--s4); cursor: pointer;
	transition: border-color var(--tr), background var(--tr);
}
.ms-week .ms-fx, .ms-delayed .ms-fx { background: var(--sf2); }
.ms-fx:hover, .ms-fx:focus-visible { border-color: var(--pri); outline: none; }
.ms-fx-delayed { border-left: 3px solid var(--warn); }
.ms-fx-played { opacity: .85; }
.ms-fx-when { display: grid; grid-template-columns: auto auto; column-gap: 6px; font-size: var(--text-sm); line-height: 1.3; }
.ms-fx-when b { font-weight: 700; }
.ms-fx-time { grid-column: 1 / -1; font-family: var(--fm); font-weight: 700; font-size: var(--text-base); color: var(--pri); }
.ms-fx-comp { display: flex; align-items: center; gap: var(--s2); font-size: var(--text-xs); color: var(--txm); min-width: 0; }
.ms-fx-comp span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-fx-teams { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--s3); min-width: 0; }
.ms-fx-team { display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.ms-fx-away { justify-content: flex-end; text-align: right; }
.ms-fx-vs { color: var(--txf); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .06em; }
.ms-fx-score { font-family: var(--fm); font-weight: 700; color: var(--tx); text-decoration: none; }
.ms-fx-side { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; }
.ms-fx-refs { overflow-wrap: anywhere; }
.ms-fx-confs { display: inline-flex; gap: 4px; }
.ms-fx-conf { font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: var(--r-full); white-space: nowrap; }
.ms-fx-conf-yes { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); }
.ms-fx-conf-no { background: var(--sf); color: var(--txf); border: 1px solid var(--brd); }
@media (max-width: 1100px) {
	.ms-fx { grid-template-columns: 84px minmax(0, 1fr); }
	.ms-fx-comp { grid-column: 2; grid-row: 1; }
	.ms-fx-teams { grid-column: 1 / -1; }
	.ms-fx-side { grid-column: 1 / -1; justify-content: flex-start; }
	.ms-fx-when { grid-row: 1; }
}
/* the fixture's window */
.ms-fxm-comp { display: flex; align-items: center; gap: var(--s2); color: var(--txm); font-size: var(--text-sm); }
.ms-fxm-teams { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--s3); margin: var(--s4) 0; text-align: center; }
.ms-fxm-team { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--tx); text-decoration: none; min-width: 0; overflow-wrap: anywhere; }
.ms-fxm-team .match-team-logo { width: 56px; height: 56px; }
.ms-fxm-vs { font-family: var(--fm); font-weight: 700; color: var(--txf); }
.ms-fxm-vs a { color: var(--tx); text-decoration: none; font-size: var(--text-xl); }
.ms-fxm-when { margin-bottom: 2px; }
.ms-fxm-confs { display: grid; gap: 6px; margin: var(--s3) 0; padding: var(--s3); background: var(--sf2); border-radius: var(--r-md); font-size: var(--text-sm); }
.ms-fxm-prop { padding: var(--s3); border-radius: var(--r-md); background: color-mix(in srgb, var(--warn) 12%, transparent); font-size: var(--text-sm); }
.ms-fxm-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s3); margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--brd); }
.ms-fxm-form .ms-f { flex: 1 1 220px; }
.ms-fxm-form p { flex-basis: 100%; margin: 0; }
.ms-fxm-form input { width: 100%; background: var(--sf2); border: 1px solid var(--brd); border-radius: var(--r-md); color: var(--tx); padding: var(--s2) var(--s3); font: inherit; }
/* planning */
.ms-plan-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); }
.ms-plan-status { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.ms-plan-status .ms-tag { margin-left: 0; padding: 2px 8px; border-radius: var(--r-full); background: var(--sf2); font-size: var(--text-xs); }
.ms-plan-status .ms-tag-warn, .ms-plan-week .ms-tag-bad { background: color-mix(in srgb, var(--warn) 18%, transparent); }
.ms-plan-status .ms-tag-ok { background: color-mix(in srgb, var(--ok) 18%, transparent); }
.ms-plan-status .ms-tag-bad, .ms-plan-week .ms-tag-bad { background: color-mix(in srgb, var(--err) 16%, transparent); color: var(--err); }
.ms-plan-actions { display: flex; flex-wrap: wrap; gap: var(--s2); }
.ms-plan-days { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s3) 0; }
.ms-day { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border: 1px solid var(--brd); border-radius: var(--r-full); font-size: var(--text-sm); cursor: pointer; }
.ms-day input { accent-color: var(--pri); }
.ms-plan-week { padding: 0; overflow: hidden; }
.ms-plan-week .ms-tag { margin-left: 0; padding: 1px 8px; border-radius: var(--r-full); background: var(--sf2); }
.ms-plan-weekbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s3); padding: 0 var(--s5) var(--s3); }
.ms-plan-rows { display: grid; gap: var(--s2); padding: 0 var(--s5) var(--s3); }
.ms-plan-rows > p { margin: 0; }
.ms-plan-row {
	display: grid; grid-template-columns: minmax(0, 1fr) 160px 140px auto; grid-template-areas: "match date time x" "st st st st" "warn warn warn warn";
	align-items: end; gap: var(--s2) var(--s3); padding: var(--s3); border: 1px solid var(--brd); border-radius: var(--r-md); background: var(--sf2);
}
.ms-plan-match { grid-area: match; display: grid; gap: 6px; min-width: 0; align-self: center; }
.ms-plan-date { grid-area: date; } .ms-plan-time { grid-area: time; } .ms-plan-row > .ms-plan-x, .ms-plan-row > span:empty { grid-area: x; }
.ms-plan-row > .ms-plan-state { grid-area: st; } .ms-plan-row > .ms-plan-warn { grid-area: warn; }
.ms-plan-comp { display: flex; align-items: center; gap: var(--s2); font-size: var(--text-xs); color: var(--txm); }
.ms-plan-teams { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--s3); }
.ms-plan-team { display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.ms-plan-teams .ms-plan-team:last-child { justify-content: flex-start; }
.ms-plan-row .ms-f { min-width: 0; }
.ms-plan-row select, .ms-plan-row input, .ms-plan-weekbar input { width: 100%; min-width: 0; background: var(--sf); border: 1px solid var(--brd); border-radius: var(--r-md); color: var(--tx); padding: var(--s2) var(--s3); font: inherit; font-size: var(--text-sm); }
.ms-plan-row.ms-plan-conflict { border: 2px solid var(--err); background: color-mix(in srgb, var(--err) 6%, var(--sf2)); }
.ms-plan-state { align-self: center; overflow-wrap: anywhere; }
.ms-plan-x { align-self: center; }
.ms-plan-warn { grid-column: 1 / -1; display: grid; gap: 2px; color: var(--err); font-size: var(--text-xs); font-weight: 600; }
.ms-plan-add { display: flex; flex-wrap: wrap; gap: var(--s2); padding: 0 var(--s5) var(--s5); }
.ms-plan-foot { margin-bottom: var(--s6); }
.ms-plan-gen > .ms-f select, .ms-plan-gen > .ms-f input { background: var(--sf2); border: 1px solid var(--brd); border-radius: var(--r-md); color: var(--tx); padding: var(--s2) var(--s3); font: inherit; font-size: var(--text-sm); }
@media (max-width: 640px) {
	.ms-week-head, .ms-plan-weekbar, .ms-plan-rows, .ms-plan-add, .ms-week .ms-fx-list, .ms-week > p { padding-left: var(--s4); padding-right: var(--s4); }
}

/* the schedule on a phone: team codes instead of names cut off; your own team's matches marked */
@media (max-width: 520px) {
	.ms-fx .ms-team-name:has(.ms-name-code) .ms-name-full { display: none; }
	.ms-fx .ms-name-code { display: inline; }
}
.ms-fx-mine { border-left: 3px solid var(--pri); }
.ms-week-head .ms-tag { font-size: 11px; color: var(--txm); }
@media (max-width: 1000px) {
	.ms-plan-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; grid-template-areas: "match match x" "date time time" "st st st" "warn warn warn"; }
}
.ms-plan-actions .btn:disabled, #msGen:disabled { opacity: .45; cursor: not-allowed; }
.ms-plan-gen { margin-top: var(--s3); }
#msGenHint { margin-bottom: var(--s3); }

/* matchdays, the other time zones, the manager's panel */
.ms-fx-comp-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.ms-fx-md { font-size: 11px; color: var(--txf); white-space: nowrap; }
.ms-plan-comp .ms-fx-md { margin-left: var(--s2); }
.ms-fxm-zones { display: flex; flex-wrap: wrap; gap: 4px var(--s4); color: var(--txm); }
.ms-fxm-zones b { color: var(--tx); font-family: var(--fm); font-weight: 600; }
.ms-fxm-panel { margin-top: var(--s4); border: 1px solid var(--pri); border-radius: var(--r-lg); overflow: hidden; }
.ms-fxm-panel-title { display: flex; align-items: center; gap: var(--s2); padding: var(--s3) var(--s4); background: var(--prihi); color: var(--pri); font-weight: 700; font-size: var(--text-sm); }
.ms-fxm-step { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3) var(--s4); border-top: 1px solid var(--brd); }
.ms-fxm-step:not(.ms-fxm-form) > div:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 220px; }
.ms-fxm-new { background: color-mix(in srgb, var(--warn) 10%, transparent); }
.ms-fxm-newtime { font-weight: 700; font-size: var(--text-base); color: var(--tx); }
.ms-fxm-btns { display: flex; flex-wrap: wrap; gap: var(--s2); }
.ms-fxm-step.ms-fxm-form { display: grid; gap: var(--s3); margin: 0; padding: var(--s3) var(--s4); border-top: 1px solid var(--brd); }
.ms-fxm-step.ms-fxm-form .ms-f { flex: none; }
.ms-fxm-formrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s3); }
.ms-fxm-formrow input, .ms-fxm-formrow select { width: 100%; background: var(--sf2); border: 1px solid var(--brd); border-radius: var(--r-md); color: var(--tx); padding: var(--s2) var(--s3); font: inherit; }
.ms-fxm-step.ms-fxm-form p { margin: 0; }
@media (max-width: 480px) { .ms-fxm-formrow { grid-template-columns: minmax(0, 1fr); } .ms-fxm-btns .btn { flex: 1 1 auto; } }
.ms-plan-team .ms-team-name { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
@media (max-width: 1250px) {
	.ms-plan-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; grid-template-areas: "match match x" "date time time" "st st st" "warn warn warn"; }
}
@media (max-width: 480px) {
	.ms-plan-row { grid-template-areas: "match match x" "date date date" "time time time" "st st st" "warn warn warn"; }
	.ms-plan-teams { grid-template-columns: minmax(0, 1fr); }
	.ms-plan-teams .ms-fx-vs { display: none; }
}

/* the match window: compact, the manager's panel beside the details on a wide screen */
.modal.ms-modal-fx { max-width: 560px; padding: var(--s6); }
.modal.ms-modal-fx-two { max-width: 920px; }
.ms-modal-fx .modal-body { margin-bottom: var(--s4); }
.ms-fxm-info > * { margin: 0 0 var(--s3); }
.ms-fxm-info > :last-child { margin-bottom: 0; }
.ms-fxm-teams { margin: var(--s2) 0 var(--s3); }
.ms-fxm-team .match-team-logo { width: 44px; height: 44px; }
.ms-fxm-zones { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.ms-fxm-zone-wide { grid-column: 1 / -1; }
@media (max-width: 420px) { .ms-fxm-zones { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ms-fxm-zone { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 4px; border-radius: var(--r-md); background: var(--sf2); text-align: center; min-width: 0; }
.ms-fxm-zone span { font-size: 11px; color: var(--txf); white-space: nowrap; }
.ms-fxm-zone b { font-family: var(--fm); font-size: var(--text-sm); color: var(--tx); white-space: nowrap; }
.ms-fxm-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px var(--s3); font-size: var(--text-sm); }
.ms-fxm-facts dt { color: var(--txf); }
.ms-fxm-facts dd { margin: 0; color: var(--tx); overflow-wrap: anywhere; }
.ms-fxm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ms-fxm-chips .ms-fx-conf { font-size: 12px; padding: 2px 8px; }
.ms-fxm-panel { margin-top: var(--s3); }
.ms-fxm-step { padding: var(--s2) var(--s4); min-height: 52px; }
.ms-fxm-step .btn { padding: var(--s2) var(--s4); }
.ms-fxm-more { margin-top: var(--s3); }
.ms-fxm-two .ms-fxm-panel { margin: var(--s3) 0 0; }
@media (min-width: 900px) {
	.ms-fxm-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); grid-template-areas: "head panel" "more panel"; column-gap: var(--s5); align-items: start; }
	.ms-fxm-two .ms-fxm-head { grid-area: head; } .ms-fxm-two .ms-fxm-more { grid-area: more; } .ms-fxm-two .ms-fxm-panel { grid-area: panel; margin: 0; }
}
.ms-fxm-panel .ms-fxm-step:not(.ms-fxm-form) > div:first-child { flex-basis: 150px; }
@media (max-width: 520px) {
	.modal.ms-modal-fx { width: 94%; padding: var(--s4); }
	.ms-fxm-team .match-team-logo { width: 32px; height: 32px; }
	.ms-fxm-team .ms-small { display: none; }
	.ms-fxm-teams { margin: 4px 0 var(--s2); }
	.ms-fxm-step .btn { flex: 1 1 auto; }
	.ms-fxm-zone { padding: 4px 2px; }
	.ms-fxm-newtime { font-size: var(--text-sm); }
	.ms-modal-fx .modal-actions .btn { padding: var(--s2) var(--s4); }
}

/* two teams side by side: logo, name and score (or manager) each on one shared line, so they stay
   level even when one name wraps onto two lines */
.match-score-display { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: var(--s4); align-items: center; }
.match-score-display > .match-team { display: grid; grid-row: 1 / span 3; grid-template-rows: subgrid; justify-items: center; row-gap: var(--s2); text-align: center; min-width: 0; }
.match-score-display > .match-team > .match-team-logo, .match-score-display > .match-team > .ms-logo-blank { grid-row: 1; }
.match-score-display > .match-team > .match-team-name { grid-row: 2; align-self: start; overflow-wrap: anywhere; }
.match-score-display > .match-team > .match-team-score { grid-row: 3; }
.match-score-display > .match-divider { grid-row: 3; }
.ms-fxm-teams { grid-template-rows: auto auto auto; align-items: center; }
.ms-fxm-teams > .ms-fxm-team { display: grid; grid-row: 1 / span 3; grid-template-rows: subgrid; justify-items: center; row-gap: 4px; }
.ms-fxm-team > img, .ms-fxm-team > .ms-logo-blank { grid-row: 1; }
.ms-fxm-team > b { grid-row: 2; align-self: start; }
.ms-fxm-team > .ms-small { grid-row: 3; align-self: start; }
.ms-fxm-teams > .ms-fxm-vs { grid-row: 1; }
.ms-fxm-panel .ms-fxm-step:not(.ms-fxm-form) > .btn { min-width: 196px; justify-content: center; text-align: center; }
@media (max-width: 520px) { .ms-fxm-panel .ms-fxm-step:not(.ms-fxm-form) > .btn { min-width: 0; } }
/* a logo and name in a table cell sit on the row's middle line, level with the numbers */
.ms-table td { vertical-align: middle; }
.ms-team-cell, .ms-team-chip { vertical-align: middle; }
.ms-team-cell > img, .ms-team-cell > .ms-logo-blank { flex-shrink: 0; }
/* the finance log as a table: every cell on the row's middle line */
@media (min-width: 641px) { .ms-ledger-table:not(.ms-ledger-compact) td { vertical-align: middle; } }

/* people credited on the site: the avatar of the player a Director assigned to their account
   (the initial underneath until it loads, or if it can't be had) */
.ms-person { display: inline-flex; align-items: center; gap: 5px; vertical-align: middle; max-width: 100%; }
.ms-person > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.ms-person-pic { position: relative; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: var(--r-full); background: var(--prihi); color: var(--pri); font-size: 10px; font-weight: 700; line-height: 1; overflow: hidden; flex-shrink: 0; }
.ms-person-pic img, .ms-account .ms-person-pic img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; object-fit: cover; opacity: 0; transition: opacity var(--tr); }
.ms-person-pic img.ms-loaded { opacity: 1; }
.ms-person-pic img:not([src]) { visibility: hidden; }
.ms-account .ms-avatar-btn { overflow: hidden; }
.ms-avatar-btn .ms-avatar-pic { width: 100%; height: 100%; font-size: inherit; background: none; color: inherit; }
/* a player's page, Directors: the account it's assigned to */
.ms-acct-row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
.ms-acct-row .ms-f { flex: 1 1 240px; margin: 0; }
.ms-acct-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

/* Squadsheets: each league's teams, each team's squad (the manager first, then by tier) */
.ms-sq-league { margin-bottom: var(--s8); }
.ms-sq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 500px), 1fr)); gap: var(--s4); align-items: start; }
.ms-sq { display: flex; flex-direction: column; gap: var(--s3); margin: 0; min-width: 0; }
.ms-sq-head { display: flex; align-items: center; gap: var(--s3); color: var(--tx); text-decoration: none; min-width: 0; }
.ms-sq-head:hover .ms-sq-team { color: var(--pri); }
.ms-sq-logo { width: 44px; height: 44px; object-fit: contain; flex-shrink: 0; border-radius: var(--r-md); }
.ms-sq-team { font-size: var(--text-lg); font-weight: 700; overflow-wrap: anywhere; }
.ms-sq-table { width: 100%; }
.ms-sq-table th, .ms-sq-table td, .ms-sq-table td:last-child, .ms-sq-table th:last-child { text-align: center; white-space: nowrap; font-size: var(--text-sm); }
.ms-sq-table th, .ms-sq-table th:last-child { font-size: var(--text-xs); }
.ms-sq-table td.ms-sq-name { font-family: var(--ff); font-weight: 600; }
.ms-sq-pos-inline { display: none; }
.ms-sq-table th:nth-child(3), .ms-sq-table td.ms-sq-name { text-align: left; white-space: normal; overflow-wrap: anywhere; }
.ms-sq-table td.ms-sq-role { color: var(--txm); font-weight: 600; font-size: var(--text-xs); width: 1%; }
.ms-sq-table .ms-tier { margin: 0 auto; }
.ms-sq-table td.ms-sq-value { font-variant-numeric: tabular-nums; }
.ms-sq-manager td { background: color-mix(in srgb, #e9b949 10%, transparent); }
.ms-sq-manager td.ms-sq-role, .ms-sq-manager td.ms-sq-contract, .ms-sq-manager td.ms-sq-name a { color: #c9962a; font-weight: 700; }
.ms-sq-due { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--warn); }
.ms-sq-foot { display: flex; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; padding-top: var(--s2); border-top: 1px solid var(--div); color: var(--txm); font-size: var(--text-sm); }
.ms-sq-foot b { color: var(--tx); margin-left: 6px; }
/* a phone: the position goes under the name, so the name keeps its room */
@media (max-width: 520px) {
	.ms-sq-table th, .ms-sq-table td, .ms-sq-table td:last-child, .ms-sq-table th:last-child { padding-left: 4px; padding-right: 4px; font-size: var(--text-xs); }
	.ms-sq-table th { letter-spacing: 0; }
	.ms-sq-table td.ms-sq-pos, .ms-sq-table th:nth-child(4) { display: none; }
	.ms-sq-pos-inline { display: block; font-family: var(--fm); font-weight: 400; color: var(--txm); font-size: 10px; }
	.ms-sq-table td.ms-sq-contract { white-space: normal; }
	.ms-sq-due { display: block; }
}