/* The same palette powers the live site and the miniature in each swatch. */
.skin-sample[data-palette="classic"] {
  --deep:#102e23; --dark:#14392c; --yellow:#f5c64f; --paper:#f5f3e9; --card:#fffcf3; --line:#d5d8c9;
}
[data-palette="cobalt"] {
  --paper:#eef2ff; --card:#fcfdff; --ink:#182853; --dark:#233cb1; --deep:#142164;
  --yellow:#dcff52; --mute:#53617e; --line:#c2cce8; --tint:#dfe7ff;
}
[data-palette="terrace"] {
  --paper:#fff1e4; --card:#fffbf4; --ink:#48202c; --dark:#772344; --deep:#46172b;
  --yellow:#ffad59; --mute:#775665; --line:#e4c8b7; --tint:#ffe0c6;
}
[data-palette="violet"] {
  --paper:#f4effc; --card:#fefbff; --ink:#352045; --dark:#562786; --deep:#30164f;
  --yellow:#ff99d2; --mute:#6b5676; --line:#dcc9e5; --tint:#efdefa;
}
[data-palette="coast"] {
  --paper:#edf4f2; --card:#fbfdf8; --ink:#183d42; --dark:#15545b; --deep:#113940;
  --yellow:#efcf92; --mute:#4b6769; --line:#bfd2cd; --tint:#d6e9e3;
}
[data-palette="floodlights"] {
  color-scheme:dark;
  --paper:#101624; --card:#1a2538; --ink:#e9f3ff; --dark:#243d63; --deep:#0b1020;
  --yellow:#56e8ec; --mute:#b0bfd5; --line:#495b72; --tint:#29394f;
  --red:#ffb1ac; --positive:#9ee4b4; --negative:#ffb1ac; --warning-bg:#4d381e;
}
html[data-palette]:not([data-palette="classic"]) {
  --on-dark:#fff; --field-bg:var(--card); --surface-soft:var(--tint);
  --surface-hover:color-mix(in srgb,var(--tint) 50%,var(--card));
  --secondary-text:var(--mute); --main-button:var(--dark); --primary-text:var(--ink);
  --progress-track:var(--line); --progress-fill:var(--mute);
  --focus-ring:var(--ink);
}
html[data-palette]:not([data-palette="classic"]) .hero-image {isolation:isolate;background:linear-gradient(125deg,var(--dark),var(--yellow) 72%);}
html[data-palette]:not([data-palette="classic"]) .hero-image img {mix-blend-mode:luminosity;}
html[data-palette]:not([data-palette="classic"]) .roster-head {
  background:linear-gradient(95deg,var(--deep) 20%,color-mix(in srgb,var(--dark) 92%,transparent) 58%,color-mix(in srgb,var(--dark) 75%,transparent)),url('/matchday.jpg') 72% 46% / cover;
}
html[data-palette]:not([data-palette="classic"]) .roster-count {color:var(--yellow);}
html[data-palette]:not([data-palette="classic"]) .design-showcase {background:linear-gradient(135deg,var(--deep),var(--dark));}
html[data-palette]:not([data-palette="classic"]) header :focus-visible,
html[data-palette]:not([data-palette="classic"]) .hero :focus-visible {outline-color:var(--yellow);}
html[data-palette]:not([data-palette="classic"]) .top-button:hover,
html[data-palette]:not([data-palette="classic"]) .menu-button:hover {background:var(--dark);}
html[data-palette="floodlights"] .skip {background:var(--card);}
html[data-palette="floodlights"] .skill-tile.natural-skill {background:color-mix(in srgb,var(--kit) 32%,var(--card));}
html[data-palette="floodlights"] .board-card:is(:hover,.selected) {background:var(--tint);}
html[data-palette="floodlights"] .btn.outline {border-color:var(--line);}
html[data-palette="floodlights"] :is(.btn:not(.outline):not(.gold),.division-tabs button[aria-pressed="true"]) {border-color:#65829f;}
html[data-palette="floodlights"] input,html[data-palette="floodlights"] select,html[data-palette="floodlights"] textarea {color-scheme:dark;}

dialog:has(#skin-picker) {width:min(640px,calc(100% - 28px));}
#skin-picker fieldset {padding:0;margin:12px 0 18px;border:0;min-width:0;}
#skin-picker legend {color:var(--mute);font-size:14px;margin-bottom:12px;}
.skin-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
.skin-option {position:relative;display:grid;align-content:start;gap:4px;cursor:pointer;border:1px solid var(--line);border-radius:7px;padding:9px;color:var(--ink);background:var(--card);}
.skin-option:has(:checked) {border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);}
.skin-option input {position:absolute;right:13px;top:12px;margin:0;width:17px;height:17px;z-index:1;accent-color:var(--dark);}
.skin-option strong {font:700 20px/1.12 var(--display);}
.skin-option small {color:var(--mute);font-size:11px;line-height:1.35;}
.skin-sample {display:grid;grid-template:8px 27px 8px / 1.3fr 1fr;gap:3px;padding:5px;border-radius:4px;background:var(--paper);border:1px solid var(--line);overflow:hidden;margin-bottom:4px;}
.skin-sample::before {content:'';grid-column:1/-1;background:var(--deep);border-bottom:2px solid var(--yellow);}
.skin-sample i {grid-column:1/-1;background:linear-gradient(115deg,var(--dark) 55%,var(--yellow) 55%);border-radius:2px;}
.skin-sample b,.skin-sample em {background:var(--card);border:1px solid var(--line);border-radius:2px;}
@media(max-width:560px){.skin-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:340px){.skin-option strong{font-size:17px;}.dialog-card:has(#skin-picker){padding:15px;}}

[data-palette="ofl-green"] {
  --paper:#77b848; --card:#e0eece; --ink:#101d0c; --dark:#214d17; --deep:#090e08;
  --yellow:#ffd149; --mute:#37492f; --line:#75905a; --tint:#cae5aa;
}
html[data-palette="ofl-green"] {background:#299522;}
html[data-palette="ofl-green"] body {
  max-width:1240px; margin-inline:auto; min-height:100vh;
  background:repeating-linear-gradient(90deg,#7dbd50 0 84px,#72b447 84px 168px);
  box-shadow:0 0 0 1px #254a15;
}
html[data-palette="ofl-green"] header {background:#090c08;border-bottom:4px solid #ffbe30;}
html[data-palette="ofl-green"] .panel,
html[data-palette="ofl-green"] .board-card {border:1px solid #485c29;border-radius:2px;}
html[data-palette="ofl-green"] :is(.card-head,.forum-list-head,thead th) {
  background:linear-gradient(#fff099,#ffd34b 60%,#efbe38);color:#17220b;
}
html[data-palette="ofl-green"] .forum-list-head {padding:12px;}
html[data-palette="ofl-green"] .card-head .meta {color:#364225;}
html[data-palette="ofl-green"] .page-heading {padding-bottom:8px;border-bottom:3px double #e2eacf;}
html[data-palette="ofl-green"] #nav a {color:#14200a;background:#ffd044;font-weight:700;}
html[data-palette="ofl-green"] #nav a:is(:hover,[aria-current="page"]) {background:#fff3a0;color:#102008;}
html[data-palette="ofl-green"] #nav a[aria-current="page"]::after {background:#345e20;}
.skin-sample[data-palette="ofl-green"] i {background:linear-gradient(90deg,#ffcf3b 0 16%,#7dbd50 16% 43%,#72b447 43% 72%,#7dbd50 72%);}
@media(min-width:1000px){
  html[data-palette="ofl-green"] header {position:relative;z-index:2;}
  html[data-palette="ofl-green"] #nav {
    position:absolute;top:calc(100% + 15px);left:12px;width:142px;
    display:flex;flex-direction:column;gap:0;border:1px solid #283a18;background:#ffcf3b;
  }
  html[data-palette="ofl-green"] #nav a {padding:7px 10px;border-bottom:1px solid #b08b24;line-height:1.25;}
  html[data-palette="ofl-green"] #nav a:last-child {border:0;}
  html[data-palette="ofl-green"] #nav a[aria-current="page"]::after {inset:0 auto 0 0;width:4px;height:auto;}
  html[data-palette="ofl-green"] main.wrap {width:auto;min-height:36rem;margin-left:172px;margin-right:18px;}
  html[data-palette="ofl-green"] .menu-button {display:none;}
}
@media(max-width:999px){
  html[data-palette="ofl-green"] #nav a {padding:6px 10px;border-radius:2px;}
}

[data-palette="match-studio"] {
  --paper:#eff2f5; --card:#fff; --ink:#17212c; --dark:#233041; --deep:#18212d;
  --yellow:#ff976a; --mute:#536271; --line:#ccd4db; --tint:#e3e9ee;
}
html[data-palette="match-studio"] {--display:DM,Arial,sans-serif;}
html[data-palette="match-studio"] header {border-bottom:3px solid var(--yellow);}
html[data-palette="match-studio"] .brand b {font-size:26px;letter-spacing:-1.4px;}
html[data-palette="match-studio"] #nav a {color:#e1e6ed;}
html[data-palette="match-studio"] #nav a[aria-current="page"] {color:#ffad89;}
html[data-palette="match-studio"] :is(h1,h2,h3,.brand b) {letter-spacing:-.045em;}
html[data-palette="match-studio"] .hero h1 {font-size:clamp(40px,6vw,78px);line-height:1.02;}
html[data-palette="match-studio"] :is(.hero,.roster-head,.account-summary) {border-radius:16px;}
html[data-palette="match-studio"] :is(.panel,.board-card,.roster-card,.deadline,.dialog-card) {
  border-radius:14px;box-shadow:0 4px 16px #1423300b;
}
html[data-palette="match-studio"] :is(.panel-icon,.pitch-scroll,.btn,.top-button) {border-radius:9px;}
html[data-palette="match-studio"] :is(.score,.meta,.standings td) {font-variant-numeric:tabular-nums;}
html[data-palette="match-studio"] .roster-filters button[aria-pressed="true"] {background:var(--deep);color:white;}
.skin-sample[data-palette="match-studio"] {border-radius:8px;}
.skin-sample[data-palette="match-studio"] i {border-radius:5px;background:linear-gradient(115deg,#18212d 0 57%,#ff976a 57% 70%,#e1e7ed 70%);}

/* OFLM used gold headers, grey league standings and blue record sheets. */
html[data-palette="ofl-green"] {
  --classic-rule:#293419;
  --classic-gold:linear-gradient(#d7a918 0%,#ffe25f 34%,#fff5a8 62%,#f7d238 100%);
  --sans:Verdana,Arial,sans-serif;
}
html[data-palette="ofl-green"] main table {
  font:13px/1.4 Verdana,Arial,sans-serif;color:#10170d;border:1px solid var(--classic-rule);
}
html[data-palette="ofl-green"] main table :is(th,td) {padding:5px 7px;border:1px solid var(--classic-rule);}
html[data-palette="ofl-green"] main thead th {background:var(--classic-gold);color:#10170d;text-transform:none;letter-spacing:0;font-size:12px;}
html[data-palette="ofl-green"] main :where(:not(.classic-index)) > table:not(.standings) tbody tr {background:#def;}
html[data-palette="ofl-green"] main .standings tbody tr:nth-child(odd) {background:#d1d1d1;}
html[data-palette="ofl-green"] main .standings tbody tr:nth-child(even) {background:#eae8e8;}
html[data-palette="ofl-green"] main .standings tbody td {border:none;padding:5px 7px;color:#161616;}
html[data-palette="ofl-green"] main .standings .own-row td {font-weight:700;}
html[data-palette="ofl-green"] main .standings .club-link {font-size:13px;gap:6px;}
html[data-palette="ofl-green"] main .standings .club-link:hover {text-decoration:underline;}
html[data-palette="ofl-green"] main .standings .club-link svg {width:16px;height:19px;}
html[data-palette="ofl-green"] main .picker-table table tbody tr.current-pick {background:#ffefad;}
.classic-index {display:none;}
html[data-palette="ofl-green"] .classic-index {display:block;margin:0 0 20px;}
html[data-palette="ofl-green"] .forum-hub .board-grid {display:none;}
html[data-palette="ofl-green"] :is(.forum-hub,.forum-thread) {max-width:900px;margin:16px auto 32px;color:#10170d;}
html[data-palette="ofl-green"] .forum-mast {padding-bottom:6px;border-bottom:3px double #e2eacf;margin:0 0 12px;}
html[data-palette="ofl-green"] .page-heading h1,
html[data-palette="ofl-green"] .forum-mast h1 {color:#fff;font:700 clamp(20px,3vw,26px)/1.18 Georgia,serif;letter-spacing:.08em;text-transform:none;text-shadow:0 1px 2px #214817;}
html[data-palette="ofl-green"] .forum-mast .btn,
html[data-palette="ofl-green"] .forum-search .btn {min-height:30px;padding:4px 10px;border-radius:1px;font-size:12px;}
html[data-palette="ofl-green"] .classic-crumb {font-size:12px;margin:0 0 3px;}
html[data-palette="ofl-green"] .classic-index table {table-layout:fixed;}
html[data-palette="ofl-green"] .classic-index .folder-col {width:5%;}
html[data-palette="ofl-green"] .classic-index .count-col {width:10%;}
html[data-palette="ofl-green"] .classic-index .last-col {width:24%;}
html[data-palette="ofl-green"] main .classic-index tbody tr {background:transparent;}
html[data-palette="ofl-green"] .classic-index :is(th,td) {text-align:center;}
html[data-palette="ofl-green"] .classic-index th:first-child,
html[data-palette="ofl-green"] .classic-index th[scope="row"],
html[data-palette="ofl-green"] .classic-index .last-post,
html[data-palette="ofl-green"] .classic-index thead th:last-child {text-align:left;}
html[data-palette="ofl-green"] .classic-index tbody tr {height:64px;}
html[data-palette="ofl-green"] .classic-index tbody th {vertical-align:top;padding-top:9px;}
html[data-palette="ofl-green"] .classic-index th[scope="row"] a {font:bold 16px/1.2 Georgia,serif;text-decoration:underline;}
html[data-palette="ofl-green"] .classic-index small {display:block;font-size:12px;font-weight:normal;margin-top:3px;}
html[data-palette="ofl-green"] .classic-index .last-post {font-size:12px;}
html[data-palette="ofl-green"] .classic-index :is(.last-post,.classic-crumb) a {text-decoration:underline;}
html[data-palette="ofl-green"] .classic-search {border:0;padding:2px 5px;background:transparent;text-decoration:underline;font:inherit;}
.classic-folder {display:inline-block;position:relative;width:15px;height:10px;background:linear-gradient(#fff5a4,#ffcb48);border:1px solid #946919;border-radius:1px 2px 2px 2px;transform:skewY(-8deg);}
.classic-folder::before {content:"";position:absolute;left:-1px;top:-4px;width:7px;height:3px;background:#ffe294;border:1px solid #946919;border-bottom:0;}
html[data-palette="ofl-green"] .classic-stats {margin-top:16px;border:1px solid var(--classic-rule);}
html[data-palette="ofl-green"] .classic-stats h2 {margin:0;background:var(--classic-gold);border-bottom:1px solid var(--classic-rule);padding:3px 7px;font:700 13px/1.5 Verdana,sans-serif;}
html[data-palette="ofl-green"] .classic-stats p {margin:0;padding:7px;font-size:12px;}
html[data-palette="ofl-green"] .forum-panel {border-radius:0;padding:10px;background:#ffffff29;}
html[data-palette="ofl-green"] .forum-list-head {background:var(--classic-gold);padding:5px 8px;border:1px solid var(--classic-rule);}
html[data-palette="ofl-green"] .forum-panel h2 {font:700 17px/1.3 Georgia,serif;}
html[data-palette="ofl-green"] .forum-row {padding:8px 4px;}
html[data-palette="ofl-green"] .forum-row + .forum-row {border-color:var(--classic-rule);}
html[data-palette="ofl-green"] .forum-title {font:bold 15px Georgia,serif;text-decoration:underline;}
@media(max-width:560px){
  html[data-palette="ofl-green"] .classic-index .folder-col {width:4px;}
  html[data-palette="ofl-green"] .classic-folder {display:none;}
  html[data-palette="ofl-green"] .classic-index .count-col {width:14%;}
  html[data-palette="ofl-green"] .classic-index .last-col {width:27%;}
  html[data-palette="ofl-green"] main .classic-index :is(td,th) {padding:5px 3px;}
  html[data-palette="ofl-green"] main .classic-index .folder-cell {padding:0;}
  html[data-palette="ofl-green"] .classic-index th[scope="row"] a {font-size:14px;}
}

/* League boundaries also apply to the eight-club match centre table. */
.standings,.table-key {
  --promotion-line:#237047;
  --playoff-line:#986009;
  --relegation-line:#b63e37;
  --promotion-wash:color-mix(in srgb,var(--promotion-line) 15%,transparent);
  --playoff-wash:color-mix(in srgb,#dd9b18 19%,transparent);
  --relegation-wash:color-mix(in srgb,var(--relegation-line) 14%,transparent);
}
html[data-palette="floodlights"] :is(.standings,.table-key) {
  --promotion-line:#76db9d;
  --playoff-line:#ffd27d;
  --relegation-line:#ff9691;
  --playoff-wash:color-mix(in srgb,var(--playoff-line) 16%,transparent);
}
/* Paint the tint over the row so the Classic Green stripes still show. */
.standings[data-division="1"] tbody tr:first-child,
.standings:not([data-division="1"]) tbody tr:nth-child(-n+2) {--place-wash:var(--promotion-wash);}
.standings:not([data-division="1"]) tbody tr:nth-child(n+3):nth-child(-n+6) {--place-wash:var(--playoff-wash);}
.standings:not([data-division="4"]) tbody tr:nth-child(n+14) {--place-wash:var(--relegation-wash);}
.standings tbody td {background-image:linear-gradient(var(--place-wash,transparent),var(--place-wash,transparent));}
.standings .own-row td:first-child {box-shadow:inset 3px 0 var(--ink);font-weight:700;}
html main .standings[data-division="1"] tbody tr:first-child td,
html main .standings[data-division]:not([data-division="1"]) tbody tr:nth-child(2) td {
  border-bottom:3px solid var(--promotion-line);
}
html main .standings[data-division]:not([data-division="1"]) tbody tr:nth-child(6) td {
  border-bottom:3px dashed var(--playoff-line);
}
html main .standings[data-division]:not([data-division="4"]) tbody tr:nth-child(13) td {
  border-bottom:3px double var(--relegation-line);
}

.table-key {list-style:none;display:flex;align-items:center;flex-wrap:wrap;gap:6px 20px;margin:12px 0 0;padding:0;font-size:13px;}
.table-key li {display:inline-flex;align-items:center;gap:7px;}
.table-key li::before {content:"";width:22px;height:10px;background:var(--promotion-wash);border-bottom:3px solid var(--promotion-line);}
.table-key .playoff::before {background:var(--playoff-wash);border-bottom:3px dashed var(--playoff-line);}
.table-key .relegation::before {background:var(--relegation-wash);border-bottom:3px double var(--relegation-line);}