@font-face {
  font-family: "Protest Revolution";
  src: url("../encyclopedia-redesign-v4/fonts/ProtestRevolution-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  --lineup-bg: #0b0d0e;
  --lineup-surface: #15191a;
  --lineup-surface-raised: #1d2223;
  --lineup-surface-soft: #24292a;
  --lineup-text: #f0f1ee;
  --lineup-text-soft: #c3c7c3;
  --lineup-muted: #8d9491;
  --lineup-line: #303637;
  --lineup-line-strong: #4b5352;
  --lineup-clay: #c48e55;
  --lineup-clay-soft: #30271f;
  --lineup-gold: #c6a064;
  --lineup-green: #6f8a78;
  --lineup-green-soft: #222b26;
  --lineup-danger: #d77b6f;
  --lineup-danger-soft: #352421;
  --lineup-shadow: 0 22px 52px rgba(0, 0, 0, .24);
  --lineup-radius-sm: 6px;
  --lineup-radius-md: 10px;
  --lineup-radius-lg: 12px;
  --lineup-font-body: "Microsoft JhengHei", "PingFang TC", "Noto Sans TC", system-ui, sans-serif;
  --lineup-font-data: Bahnschrift, "Arial Narrow", Arial, sans-serif;
}

html[data-theme="light"] {
  --lineup-bg: #e7eff1;
  --lineup-surface: #f7f8f3;
  --lineup-surface-raised: #eef3f0;
  --lineup-surface-soft: #dfeae3;
  --lineup-text: #15242c;
  --lineup-text-soft: #40565f;
  --lineup-muted: #718087;
  --lineup-line: #cbd7d5;
  --lineup-line-strong: #9fb1b4;
  --lineup-clay: #c48e55;
  --lineup-clay-soft: #f2ded8;
  --lineup-gold: #9a742c;
  --lineup-green: #50755f;
  --lineup-green-soft: #dceae4;
  --lineup-danger: #b84d47;
  --lineup-danger-soft: #fff0ef;
  --lineup-shadow: 0 20px 46px rgba(21, 36, 44, .12);
}

* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; scrollbar-gutter: stable; }
body.lineup-v4 {
  min-width: 320px;
  margin: 0;
  overflow-x: clip;
  background: var(--lineup-bg);
  color: var(--lineup-text);
  font-family: var(--lineup-font-body);
  font-size: 16px;
  line-height: 1.5;
}

button, input, select, textarea { font: inherit; }
button, a, summary, select { cursor: pointer; touch-action: manipulation; }
button, a, input, select, summary, textarea { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible, textarea:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--lineup-clay) 55%, transparent);
  outline-offset: 3px;
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.lineup-shell {
  width: min(1360px, calc(100% - 48px));
  margin: 0 auto;
  padding: 16px 0 48px;
}

.lineup-legacy-lede {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr) auto;
  align-items: end;
  gap: 24px;
  min-height: 214px;
  padding: 48px 0 34px;
  border-bottom: 1px solid var(--lineup-line);
}
.lineup-legacy-lede-mark {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 2px;
  min-height: 112px;
  border: 1px solid var(--lineup-line);
  border-radius: 50% 50% 50% 12px;
  color: var(--lineup-clay);
  transform: rotate(-5deg);
}
.lineup-legacy-lede-mark span, .lineup-legacy-lede-mark small { font: 700 10.5px/1 var(--lineup-font-data); letter-spacing: .14em; }
.lineup-legacy-lede-mark strong { font: 700 48px/.9 var(--lineup-font-data); letter-spacing: -.08em; }
.lede-copy { min-width: 0; }
.archive-kicker, .eyebrow { margin: 0; color: var(--lineup-clay); font: 700 12.5px/1.2 var(--lineup-font-data); letter-spacing: .16em; text-transform: uppercase; }
.lede-copy h1 { margin: 8px 0 12px; color: var(--lineup-text); font-size: clamp(34px, 5vw, 68px); font-weight: 760; letter-spacing: -.04em; line-height: .98; text-wrap: pretty; }
.lede-copy > p:last-child { max-width: 680px; margin: 0; color: var(--lineup-text-soft); font-size: 17px; line-height: 1.7; text-wrap: pretty; }
.lineup-legacy-lede-stamp { display: grid; align-content: end; justify-items: end; gap: 4px; padding-bottom: 4px; color: var(--lineup-muted); text-align: right; }
.lineup-legacy-lede-stamp span { color: var(--lineup-text-soft); font: 700 11.5px/1 var(--lineup-font-data); letter-spacing: .16em; }
.lineup-legacy-lede-stamp strong { color: var(--lineup-clay); font-size: 15px; font-weight: 750; }
.lineup-legacy-lede-stamp small { font: 700 10.5px/1 var(--lineup-font-data); letter-spacing: .12em; }

.setup-ribbon {
  display: grid;
  grid-template-columns: auto minmax(240px, .75fr) minmax(280px, 1fr) auto;
  align-items: end;
  gap: 18px;
  padding: 23px 0 20px;
  border-bottom: 1px solid var(--lineup-line);
}
.setup-ribbon-heading { align-self: center; min-width: 160px; }
.setup-ribbon-heading h2, .summary-region-heading h2, .section-heading h2, .summary-panel-heading h2, .support-heading h2 { margin: 5px 0 0; color: var(--lineup-text); font-size: 22px; font-weight: 760; letter-spacing: -.02em; line-height: 1.1; }
.select-field { display: grid; gap: 6px; min-width: 0; }
.select-field > span { color: var(--lineup-muted); font-size: 12.5px; font-weight: 700; letter-spacing: .04em; }
.select-field select, .picker-search input, .roster-dialog textarea {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--lineup-line-strong);
  border-radius: var(--lineup-radius-sm);
  outline: none;
  background: var(--lineup-surface-raised);
  color: var(--lineup-text);
}
.select-field select { padding: 0 12px; }
.select-field select:hover, .picker-search:focus-within, .picker-search input:focus, .roster-dialog textarea:focus { border-color: var(--lineup-clay); }
.select-field select:focus, .picker-search input:focus, .roster-dialog textarea:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--lineup-clay) 22%, transparent); }
.deck-summary { display: grid; align-content: center; gap: 2px; min-height: 44px; padding: 5px 14px; border-left: 3px solid var(--lineup-clay); background: color-mix(in srgb, var(--lineup-clay-soft) 72%, transparent); }
.deck-summary strong { min-width: 0; overflow: hidden; color: var(--lineup-text); font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.deck-summary span { min-width: 0; overflow: hidden; color: var(--lineup-text-soft); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.setup-ribbon-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px; }

.primary-button, .utility-button, .icon-button { min-height: 40px; border-radius: var(--lineup-radius-sm); font-size: 13px; font-weight: 750; touch-action: manipulation; }
.primary-button { padding: 0 14px; border: 1px solid var(--lineup-clay); background: var(--lineup-clay); color: #17110d; }
.primary-button:hover { background: color-mix(in srgb, var(--lineup-clay) 84%, white); }
.utility-button { padding: 0 12px; border: 1px solid var(--lineup-line-strong); background: transparent; color: var(--lineup-text-soft); }
.utility-button:hover { border-color: var(--lineup-clay); color: var(--lineup-text); }
.utility-button-danger:hover { border-color: var(--lineup-danger); color: var(--lineup-danger); }
.utility-button:disabled { cursor: not-allowed; opacity: .45; }
.icon-button { display: inline-grid; place-items: center; width: 44px; padding: 0; border: 1px solid var(--lineup-line-strong); background: transparent; color: var(--lineup-text-soft); }
.icon-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.icon-button:hover { border-color: var(--lineup-clay); color: var(--lineup-clay); }

.summary-region { padding: 23px 0 22px; border-bottom: 1px solid var(--lineup-line); }
.summary-region-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 15px; }
.summary-caption { color: var(--lineup-muted); font-size: 13px; }
.summary-grid { display: grid; grid-template-columns: 1.45fr repeat(3, 1fr); gap: 0; }
.metric-card { min-width: 0; padding: 4px 22px 4px 18px; border-left: 1px solid var(--lineup-line); background: transparent; }
.metric-card:first-child { padding-left: 0; border-left: 0; }
.metric-label { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; color: var(--lineup-muted); }
.metric-label span { font-size: 14px; font-weight: 700; }
.metric-label small { color: color-mix(in srgb, var(--lineup-muted) 74%, transparent); font: 700 10.5px/1 var(--lineup-font-data); letter-spacing: .1em; }
.metric-card > strong { display: block; margin-top: 7px; color: var(--lineup-text); font: 700 clamp(22px, 2.8vw, 34px)/1 var(--lineup-font-data); letter-spacing: -.04em; }
.metric-card > small { display: block; min-height: 18px; margin-top: 8px; overflow: hidden; color: var(--lineup-muted); font-size: 12.5px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.progress-track { height: 5px; margin-top: 13px; overflow: hidden; background: var(--lineup-surface-soft); }
.progress-track i { display: block; width: 0; height: 100%; background: var(--lineup-clay); transition: width 220ms ease; }

.workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 346px); align-items: start; gap: clamp(26px, 3vw, 48px); padding-top: 28px; }
.roster-panel { min-width: 0; }
.panel-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.section-heading { min-width: 0; }
.section-helper { margin: 7px 0 0; color: var(--lineup-muted); font-size: 14px; line-height: 1.55; text-wrap: pretty; }
.roster-heading-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 7px; }
.selected-slot-note { display: inline-flex; align-items: center; min-height: 40px; padding: 0 11px; border: 1px dashed var(--lineup-line-strong); border-radius: var(--lineup-radius-sm); color: var(--lineup-muted); font-size: 12.5px; }
.selected-slot-note.is-selected { border-color: var(--lineup-clay); background: var(--lineup-clay-soft); color: var(--lineup-text); }
.saved-roster-list { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.saved-roster-item { display: inline-flex; align-items: stretch; }
.saved-roster-load, .saved-roster-delete, .saved-roster-empty { min-height: 32px; border: 1px solid var(--lineup-line); background: var(--lineup-surface-raised); color: var(--lineup-text-soft); font-size: 11.5px; }
.saved-roster-load { padding: 0 8px; border-radius: 5px 0 0 5px; }
.saved-roster-delete { width: 28px; padding: 0; border-left: 0; border-radius: 0 5px 5px 0; }
.saved-roster-load:hover, .saved-roster-delete:hover { border-color: var(--lineup-clay); color: var(--lineup-clay); }
.saved-roster-empty { display: inline-flex; align-items: center; padding: 0 8px; border-radius: 5px; color: var(--lineup-muted); }

.v4-saved-rosters {
  margin: 0 0 14px;
  padding: 10px 12px 8px;
  border: 1px solid var(--lineup-line);
  border-left: 2px solid var(--lineup-clay);
  background: color-mix(in srgb, var(--lineup-surface-raised) 55%, transparent);
}
.v4-saved-rosters-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 0;
  cursor: pointer;
  list-style: none;
}
.v4-saved-rosters[open] > .v4-saved-rosters-heading { margin-bottom: 5px; }
.v4-saved-rosters-heading::-webkit-details-marker { display: none; }
.v4-saved-rosters-heading::marker { content: ""; }
.v4-saved-roster-heading-copy { display: grid; gap: 2px; min-width: 0; }
.v4-saved-roster-heading-copy > strong { display: block; margin-top: 2px; color: var(--lineup-text); font-size: 14px; }
.v4-saved-roster-summary { display: inline-flex; align-items: center; gap: 8px; color: var(--lineup-muted); font: 700 11.5px/1 var(--lineup-font-data); white-space: nowrap; }
.v4-saved-roster-chevron { color: var(--lineup-clay); font-size: 13px; transition: transform 160ms ease; }
.v4-saved-rosters[open] .v4-saved-roster-chevron { transform: rotate(180deg); }
.v4-saved-roster-list { display: grid; gap: 0; }
.v4-saved-roster-row {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 39px;
  padding: 4px 0;
  border-top: 1px solid var(--lineup-line);
}
.v4-saved-roster-index { color: var(--lineup-clay); font: 700 13px/1 var(--lineup-font-data); }
.v4-saved-roster-status { display: grid; gap: 2px; min-width: 0; }
.v4-saved-roster-status strong { color: var(--lineup-text-soft); font-size: 13px; }
.v4-saved-roster-status span { overflow: hidden; color: var(--lineup-muted); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.v4-saved-roster-row.is-empty .v4-saved-roster-status strong { color: var(--lineup-muted); font-weight: 650; }
.v4-saved-roster-actions { display: flex; align-items: center; justify-content: end; gap: 5px; }
.v4-saved-roster-actions .utility-button,
.v4-saved-roster-actions .quiet-button { min-height: 30px; padding: 0 9px; font-size: 11.5px; }
.v4-saved-roster-actions .quiet-button { border: 0; background: transparent; color: var(--lineup-muted); }
.v4-saved-roster-actions .quiet-button:hover { color: var(--lineup-danger); }
/* Saved lineup names: the name is a button with a pencil; tapping it swaps in a text field (parity-adapter.js). */
.v4-saved-roster-status .v4-saved-roster-name {
  display: inline-grid;
  grid-template-columns: minmax(0, auto) auto;
  align-items: center;
  justify-content: start;
  gap: 6px;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.v4-saved-roster-status .v4-saved-roster-name strong { overflow: hidden; color: var(--lineup-text); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.v4-saved-roster-status .v4-saved-roster-name.is-unnamed strong { color: var(--lineup-text-soft); font-weight: 650; }
.v4-saved-roster-status .v4-saved-roster-name-icon { overflow: visible; color: var(--lineup-clay); font-size: 13px; line-height: 1; }
.v4-saved-roster-status .v4-saved-roster-name:hover strong { color: var(--lineup-clay); }
.v4-saved-roster-status .v4-saved-roster-name:focus-visible { outline: 2px solid var(--lineup-clay); outline-offset: 3px; border-radius: 4px; }
.v4-saved-roster-rename { margin: 0; }
.v4-saved-roster-name-input {
  width: min(300px, 100%);
  min-height: 30px;
  padding: 0 9px;
  border: 1px solid var(--lineup-clay);
  border-radius: var(--lineup-radius-sm);
  background: var(--lineup-surface);
  color: var(--lineup-text);
  font: 600 14px/1.2 var(--lineup-font-body);
}
.v4-saved-roster-name-input::placeholder { color: var(--lineup-muted); font-weight: 500; }
.v4-saved-roster-name-input:focus { outline: 2px solid color-mix(in srgb, var(--lineup-clay) 45%, transparent); outline-offset: 1px; }
/* Touch screens: iOS zooms the page into any field under 16px. */
@media (pointer: coarse) {
  .v4-saved-roster-name-input { min-height: 36px; font-size: 16px; }
}
.v4-formal-saved-roster-hook { display: none !important; }

.roster-content { display: grid; gap: 27px; }
.roster-group { min-width: 0; }
.roster-group-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 9px; padding-bottom: 8px; border-bottom: 1px solid var(--lineup-line); }
.roster-group-heading strong { color: var(--lineup-text-soft); font-size: 14px; font-weight: 750; }
.roster-group-heading span { color: var(--lineup-muted); font: 700 12.5px/1 var(--lineup-font-data); }
.slot-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.slot-card { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-width: 0; min-height: 198px; padding: 10px; overflow: hidden; border: 1px solid var(--lineup-line); border-top: 3px solid color-mix(in srgb, var(--team-color, var(--lineup-line-strong)) 70%, var(--lineup-line)); border-radius: var(--lineup-radius-md); background: var(--lineup-surface); color: var(--lineup-text); text-align: left; transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease; }
.slot-card:hover { border-color: color-mix(in srgb, var(--team-color, var(--lineup-clay)) 68%, var(--lineup-line-strong)); background: var(--lineup-surface-raised); transform: translateY(-2px); }
.slot-card.is-selected { border-color: var(--lineup-clay); background: color-mix(in srgb, var(--lineup-clay-soft) 62%, var(--lineup-surface)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--lineup-clay) 17%, transparent); }
.slot-head { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 6px; min-width: 0; }
.slot-code { color: var(--lineup-clay); font: 700 13px/1 var(--lineup-font-data); letter-spacing: .04em; }
.slot-name { min-width: 0; overflow: hidden; color: var(--lineup-muted); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.v4-slot-rating { display: inline-grid; justify-items: end; gap: 1px; color: var(--lineup-gold); }
.v4-slot-rating small { font: 700 9px/1 var(--lineup-font-data); letter-spacing: .1em; }
.v4-slot-rating strong { font: 700 16px/.9 var(--lineup-font-data); }
.v4-slot-art { position: relative; display: grid; place-items: end center; height: 98px; margin: 8px -2px 6px; overflow: hidden; border-bottom: 1px solid color-mix(in srgb, var(--team-color, var(--lineup-line)) 35%, var(--lineup-line)); background: linear-gradient(180deg, color-mix(in srgb, var(--team-color, var(--lineup-surface-soft)) 13%, transparent), transparent); }
.v4-slot-art::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 24px; background: linear-gradient(transparent, var(--lineup-surface)); pointer-events: none; }
.v4-slot-art > img:not(.v4-image-fallback) { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 10px 10px rgba(0, 0, 0, .34)); }
.v4-slot-team-mark { position: absolute; z-index: 2; top: 6px; left: 3px; display: grid; place-items: center; width: 25px; height: 25px; opacity: .88; }
.v4-slot-team-mark img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.v4-image-fallback { display: grid; place-items: center; width: 58px; height: 58px; border: 1px solid color-mix(in srgb, var(--team-color, var(--lineup-clay)) 65%, white); border-radius: 50%; background: color-mix(in srgb, var(--team-color, var(--lineup-surface-soft)) 34%, var(--lineup-surface)); color: var(--lineup-text); font: 700 18px/1 var(--lineup-font-data); }
.slot-player { display: grid; align-content: end; gap: 2px; min-width: 0; }
.slot-player strong { min-width: 0; overflow-wrap: anywhere; color: var(--lineup-text); font-size: 14px; font-weight: 750; line-height: 1.2; }
.slot-player > span { min-width: 0; overflow: hidden; color: var(--lineup-muted); font-size: 11.5px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.slot-player .v4-slot-series { color: var(--lineup-text-soft); font-size: 11.5px; }
.slot-player .v4-slot-stats { color: color-mix(in srgb, var(--lineup-clay) 72%, var(--lineup-text)); font: 700 10.5px/1.3 var(--lineup-font-data); }
.slot-player .slot-status { color: var(--lineup-clay); font-size: 10.5px; font-weight: 750; }
.slot-empty { display: grid; align-content: center; gap: 5px; min-height: 120px; color: var(--lineup-muted); font-size: 13px; line-height: 1.4; }
.slot-empty::before { content: "+"; display: grid; place-items: center; width: 31px; height: 31px; border: 1px dashed var(--lineup-line-strong); border-radius: 50%; color: var(--lineup-clay); font: 400 22px/1 var(--lineup-font-data); }
.slot-card > button[data-remove-slot] { position: absolute; top: 7px; right: 7px; z-index: 3; display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--lineup-line); border-radius: 50%; background: color-mix(in srgb, var(--lineup-surface) 82%, transparent); color: var(--lineup-muted); font-size: 16px; line-height: 1; }
.slot-card > button[data-remove-slot]:hover { border-color: var(--lineup-danger); color: var(--lineup-danger); }

.summary-panel { position: sticky; top: 18px; min-width: 0; padding: 18px 0 0 24px; border-left: 1px solid var(--lineup-line); }
.summary-panel-heading { padding-bottom: 16px; border-bottom: 1px solid var(--lineup-line); }
.aside-deck-lockup { display: grid; gap: 4px; padding: 18px 0; border-bottom: 1px solid var(--lineup-line); }
.aside-label, .aside-readout-list dt { color: var(--lineup-muted); font-size: 12.5px; font-weight: 700; }
.aside-deck-lockup strong { overflow-wrap: anywhere; color: var(--lineup-text); font-size: 21px; font-weight: 760; line-height: 1.15; }
.aside-deck-lockup span:last-child { color: var(--lineup-text-soft); font-size: 13px; }
.aside-readout-list { display: grid; gap: 0; margin: 0; }
.aside-readout-list > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; min-height: 52px; padding: 14px 0; border-bottom: 1px solid var(--lineup-line); }
.aside-readout-list dd { margin: 0; color: var(--lineup-text); font: 700 18px/1 var(--lineup-font-data); }
.aside-divider { height: 1px; margin: 24px 0; background: var(--lineup-line-strong); }
.aside-guidance ol { display: grid; gap: 11px; margin: 13px 0 0; padding: 0; list-style: none; }
.aside-guidance li { display: grid; grid-template-columns: 28px 1fr; align-items: baseline; gap: 9px; color: var(--lineup-text-soft); font-size: 14px; }
.aside-guidance li span { color: var(--lineup-clay); font: 700 11.5px/1 var(--lineup-font-data); }
.aside-footnote { display: flex; align-items: center; gap: 8px; margin-top: 28px; color: var(--lineup-muted); font-size: 12.5px; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lineup-green); box-shadow: 0 0 0 4px var(--lineup-green-soft); }

.support-sections { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 42px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--lineup-line); }
.rules-panel, .audit-panel { min-width: 0; }
.support-heading { display: flex; align-items: end; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.source-badge { display: inline-flex; align-items: center; min-height: 27px; padding: 0 9px; border: 1px solid var(--lineup-line); border-radius: 5px; color: var(--lineup-muted); font-size: 11.5px; white-space: nowrap; }
.rule-list { display: grid; gap: 7px; }
.rule-row { display: grid; grid-template-columns: 70px minmax(0, 1fr); align-items: center; gap: 14px; min-height: 52px; padding: 7px 0; border-bottom: 1px solid var(--lineup-line); }
.rule-row.is-next { border-bottom-color: var(--lineup-clay); }
.rule-level { color: var(--lineup-clay); font: 700 13px/1 var(--lineup-font-data); }
.rule-state { color: var(--lineup-muted); font-size: 12.5px; }
.rule-row.is-met .rule-state { color: var(--lineup-green); }
.rule-effects { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.rule-effects-label { margin-right: 4px; color: var(--lineup-muted); font-size: 11.5px; }
.effect-chip { color: var(--lineup-text-soft); font-size: 12.5px; }
.effect-chip + .effect-chip::before { content: " · "; color: var(--lineup-line-strong); }
.missing-summary { margin-top: 17px; padding-top: 15px; border-top: 1px solid var(--lineup-line); }
.missing-summary-heading { display: flex; justify-content: space-between; gap: 10px; color: var(--lineup-text-soft); font-size: 13px; }
.missing-summary-heading span { color: var(--lineup-muted); font-size: 11.5px; }
.missing-condition-list { display: grid; gap: 9px; margin-top: 10px; }
.missing-condition { display: grid; grid-template-columns: 40px 1fr; gap: 9px; color: var(--lineup-muted); font-size: 12.5px; }
.missing-condition > strong { color: var(--lineup-clay); font: 700 12.5px/1.3 var(--lineup-font-data); }
.missing-condition b, .missing-condition span { display: block; }
.missing-condition b { color: var(--lineup-text-soft); font-weight: 700; }
.missing-condition span { margin-top: 2px; }
.rule-notes { margin-top: 16px; border-top: 1px solid var(--lineup-line); color: var(--lineup-muted); }
.rule-notes summary { padding: 12px 0; color: var(--lineup-text-soft); font-size: 13px; }
.rule-notes-body { padding: 0 0 10px; font-size: 12.5px; line-height: 1.65; }
.rule-notes-body p { margin: 0 0 8px; }
.selected-list { min-width: 0; overflow-x: auto; }
.audit-list { min-width: 530px; }
.audit-head, .audit-row { display: grid; grid-template-columns: 48px minmax(155px, 1.1fr) 88px minmax(160px, 1fr); align-items: center; gap: 10px; }
.audit-head { padding-bottom: 8px; border-bottom: 1px solid var(--lineup-line); color: var(--lineup-muted); font-size: 11.5px; }
.audit-row { min-height: 49px; border-bottom: 1px solid var(--lineup-line); font-size: 12.5px; }
.audit-position { color: var(--lineup-clay); font: 700 12.5px/1 var(--lineup-font-data); }
.audit-card { display: grid; gap: 2px; min-width: 0; }
.audit-card strong { overflow: hidden; color: var(--lineup-text-soft); text-overflow: ellipsis; white-space: nowrap; }
.audit-card span, .audit-reason { overflow: hidden; color: var(--lineup-muted); text-overflow: ellipsis; white-space: nowrap; }
.classification { display: inline-flex; align-items: center; min-height: 23px; padding: 0 6px; border: 1px solid var(--lineup-line-strong); border-radius: 4px; color: var(--lineup-text-soft); font-size: 10.5px; white-space: nowrap; }
.classification.same, .classification.eligible { border-color: color-mix(in srgb, var(--lineup-green) 55%, var(--lineup-line)); color: var(--lineup-green); }
.classification.fa { border-color: color-mix(in srgb, var(--lineup-danger) 55%, var(--lineup-line)); color: var(--lineup-danger); }
.classification.wildcard { border-color: color-mix(in srgb, #7296d1 65%, var(--lineup-line)); color: #91addd; }
.classification.external { border-color: color-mix(in srgb, var(--lineup-gold) 55%, var(--lineup-line)); color: var(--lineup-gold); }
.audit-summary { max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
.audit-summary .audit-main { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.audit-summary .audit-total { margin-left: 8px; color: var(--lineup-gold); white-space: nowrap; }
.audit-empty, .empty-state { padding: 22px 0; color: var(--lineup-muted); font-size: 13px; line-height: 1.6; }

/* Under the page title (index.html), between the hero and 選擇牌組. */
.share-roster-notice { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0 0 12px; padding: 12px 14px; border: 1px solid var(--lineup-clay); background: var(--lineup-clay-soft); }
.share-roster-notice[hidden] { display: none !important; }
.share-roster-notice[data-tone="error"] { border-color: var(--lineup-danger); background: var(--lineup-danger-soft); }
.share-roster-notice-copy { display: grid; gap: 3px; min-width: 0; }
.share-roster-notice-copy strong { color: var(--lineup-text); font-size: 14px; }
.share-roster-notice-copy span { color: var(--lineup-text-soft); font-size: 12.5px; text-wrap: pretty; }
.share-roster-notice-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }

.picker-modal, .roster-modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px; }
.picker-modal[hidden], .roster-modal[hidden] { display: none !important; }
.picker-modal-backdrop { position: absolute; inset: 0; background: rgba(4, 8, 9, .78); }
.picker-dialog, .roster-dialog { position: relative; z-index: 1; width: min(980px, 100%); max-height: min(840px, calc(100dvh - 48px)); overflow: auto; border: 1px solid var(--lineup-line-strong); border-radius: var(--lineup-radius-lg); background: var(--lineup-surface); box-shadow: 0 24px 80px rgba(0, 0, 0, .48); }
.picker-dialog-heading { display: flex; align-items: start; justify-content: space-between; gap: 16px; padding: 16px 22px 12px; border-bottom: 1px solid var(--lineup-line); }
.picker-dialog-heading h2, .roster-dialog h2 { margin: 4px 0 0; color: var(--lineup-text); font-size: 21px; font-weight: 760; line-height: 1.1; }
.picker-modal-context { margin: 5px 0 0; color: var(--lineup-muted); font-size: 12.5px; }
.picker-close-button { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--lineup-line); border-radius: var(--lineup-radius-sm); background: transparent; color: var(--lineup-text-soft); font-size: 24px; line-height: 1; }
.picker-close-button:hover { border-color: var(--lineup-clay); color: var(--lineup-clay); }
.picker-modal-filters { display: grid; grid-template-columns: minmax(0, 1fr) minmax(120px, 150px) minmax(150px, 170px); align-items: end; gap: 8px 10px; padding: 10px 22px; border-bottom: 1px solid var(--lineup-line); }
.picker-search { position: relative; display: block; }
.picker-search > span { position: absolute; top: 13px; left: 12px; color: var(--lineup-muted); }
.picker-search svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.7; }
.picker-search input { padding: 0 12px 0 40px; }
.picker-primary-filters { display: contents; }
.picker-primary-filters .select-field { min-width: 0; }
.advanced-filters { display: block; margin: 0; border-bottom: 1px solid var(--lineup-line); }
.advanced-filters summary { display: flex; align-items: center; width: 100%; min-height: 34px; padding: 0 22px; border: 0; border-radius: 0; background: transparent; color: var(--lineup-text-soft); font-size: 12.5px; cursor: pointer; list-style: none; user-select: none; transition: color 150ms ease, background-color 150ms ease; }
.advanced-filters summary::-webkit-details-marker { display: none; }
.advanced-filters summary::before { content: "▸"; display: inline-block; width: 14px; margin-right: 6px; color: var(--lineup-muted); font: 700 13px/1 var(--lineup-font-data); }
.advanced-filters[open] summary::before { content: "▾"; }
.advanced-filters summary::after { content: none; }
.advanced-filters summary:hover { background: var(--lineup-clay-soft); color: var(--lineup-text); }
.advanced-filters summary:focus-visible { outline: 2px solid var(--lineup-clay); outline-offset: -2px; }
.advanced-filter-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 10px 22px 12px; border-top: 1px solid var(--lineup-line); }
.picker-modal-filters .select-field, .advanced-filters .select-field { display: block; position: relative; }
.picker-modal-filters .select-field > span, .advanced-filters .select-field > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.picker-modal-filters .select-field select, .advanced-filters .select-field select { min-height: 44px; }
.picker-hint { display: flex; align-items: center; min-height: 34px; padding: 7px 22px; border-bottom: 1px solid var(--lineup-line); color: var(--lineup-muted); font-size: 12.5px; }
.picker-count { color: var(--lineup-text-soft); font: 700 11.5px/1 var(--lineup-font-data); letter-spacing: .04em; }
.picker-empty-state { display: none !important; }
.card-list { display: grid; gap: 0; padding: 0 22px 12px; }
.picker-card { display: grid; grid-template-columns: 52px minmax(0, 1fr) 54px auto; align-items: center; gap: 10px; min-width: 0; padding: 7px 8px; border: 0; border-bottom: 1px solid var(--lineup-line); border-left: 3px solid color-mix(in srgb, var(--team-color, var(--lineup-line-strong)) 70%, var(--lineup-line)); border-radius: 0; background: var(--lineup-surface-raised); color: var(--lineup-text); text-align: left; transition: background-color 150ms ease, border-color 150ms ease; }
.picker-card:hover:not(:disabled) { border-bottom-color: var(--lineup-line-strong); background: var(--lineup-clay-soft); }
.picker-card.is-selected { border-left-color: var(--lineup-line-strong); background: var(--lineup-surface-raised); opacity: .7; }
.picker-card:disabled { cursor: not-allowed; opacity: .5; }
.picker-card.is-selected .picker-card-action { color: var(--lineup-muted); }
.v4-picker-art { display: grid; place-items: center; width: 52px; height: 52px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--team-color, var(--lineup-line)) 50%, var(--lineup-line)); background: color-mix(in srgb, var(--team-color, var(--lineup-surface-soft)) 15%, transparent); }
.v4-picker-art > img:not(.v4-image-fallback) { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
.v4-picker-art .v4-image-fallback { width: 38px; height: 38px; font-size: 13px; }
.picker-card-main { display: grid; gap: 3px; min-width: 0; }
.picker-card-top, .picker-card-meta, .picker-card-foot { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 6px; min-width: 0; }
.picker-card-top strong { min-width: 0; overflow: hidden; color: var(--lineup-text); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.mini-badge { display: inline-flex; align-items: center; min-height: 19px; padding: 0 5px; border: 1px solid var(--lineup-line-strong); border-radius: 4px; color: var(--lineup-muted); font: 700 10.5px/1 var(--lineup-font-data); white-space: nowrap; }
.mini-badge.grade-3, .mini-badge.grade-4 { border-color: color-mix(in srgb, var(--lineup-gold) 65%, var(--lineup-line)); color: var(--lineup-gold); }
.picker-card-top .mini-badge { display: none; }
.picker-card-meta, .picker-card-foot { overflow: visible; color: var(--lineup-muted); font-size: 11.5px; line-height: 1.25; text-overflow: clip; white-space: normal; }
.picker-card-meta span + span::before, .picker-card-foot span + span::before { content: " · "; color: var(--lineup-line-strong); }
.picker-card-meta .mini-badge { min-height: 0; padding: 0; border: 0; border-radius: 0; color: var(--lineup-gold); font-size: 11.5px; }
.picker-card-foot { white-space: nowrap; }
.picker-card-action { display: inline-flex; align-items: center; justify-content: center; min-width: 54px; min-height: 32px; padding: 0 8px; border-left: 1px solid var(--lineup-line); color: var(--lineup-clay); font-size: 11.5px; font-weight: 750; white-space: nowrap; }
.v4-picker-ovr { display: grid; align-content: center; justify-items: center; min-width: 48px; min-height: 42px; padding: 3px 5px; border: 1px solid var(--lineup-line-strong); color: var(--lineup-gold); }
.v4-picker-ovr small { color: var(--lineup-muted); font: 700 9.5px/1 var(--lineup-font-data); letter-spacing: .08em; }
.v4-picker-ovr strong { font: 760 16px/1 var(--lineup-font-data); font-variant-numeric: tabular-nums; }
.load-more-button { min-height: 40px; margin: 0 22px 20px; padding: 0 14px; border: 1px solid var(--lineup-line-strong); border-radius: var(--lineup-radius-sm); background: transparent; color: var(--lineup-text-soft); font-size: 13px; }
.load-more-button:hover { border-color: var(--lineup-clay); color: var(--lineup-clay); }

.roster-dialog { width: min(620px, 100%); padding: 22px; }
.roster-dialog > .picker-close-button { position: absolute; top: 14px; right: 14px; }
.roster-dialog > h2 { margin-right: 48px; }
.roster-dialog > .eyebrow { margin-right: 48px; }
.roster-dialog textarea { display: block; min-height: 170px; margin: 16px 0 12px; padding: 10px; resize: vertical; font: 11px/1.55 ui-monospace, SFMono-Regular, Consolas, monospace; }
.roster-overview-dialog { display: flex; flex-direction: column; width: min(1220px, 100%); max-height: calc(100dvh - 48px); padding: 0; overflow: hidden; }
.roster-overview-header {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(0, 2.2fr) auto auto;
  grid-template-areas: "title readout status close";
  align-items: center;
  gap: 18px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--lineup-line);
}
.roster-overview-title { grid-area: title; min-width: 0; }
.roster-overview-title h2 { margin: 4px 0 0; }
.roster-overview-header-readout {
  grid-area: readout;
  display: grid;
  grid-template-columns: minmax(170px, .9fr) minmax(0, 1.3fr);
  align-items: center;
  gap: 22px;
  min-width: 0;
  padding-left: 20px;
  border-left: 1px solid var(--lineup-line);
}
.roster-overview-header-deck { display: grid; gap: 2px; min-width: 0; }
.roster-overview-header-deck span { color: var(--lineup-muted); font-size: 10px; }
.roster-overview-header-deck strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--lineup-text-soft);
  font: 700 13px/1.2 var(--lineup-font-data);
}
.roster-overview-header-meta {
  min-width: 0;
  color: var(--lineup-muted);
  font: 700 9px/1.35 var(--lineup-font-data);
  overflow-wrap: anywhere;
}
.roster-overview-status { grid-area: status; display: grid; justify-items: end; gap: 2px; margin-left: 0; }
.roster-overview-status strong { font: 700 18px/1 var(--lineup-font-data); }
.roster-overview-status span { color: var(--lineup-muted); font-size: 10px; }
.roster-overview-header-actions { grid-area: close; display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; }
.roster-overview-export-button { white-space: nowrap; }
.roster-overview-board { display: grid; grid-template-columns: 1.08fr .92fr; grid-auto-rows: max-content; align-content: start; min-height: 0; overflow: auto; background: var(--lineup-line); gap: 1px; }
.roster-overview-unit { min-width: 0; background: var(--lineup-surface); }
.roster-overview-unit-heading, .roster-overview-group-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--lineup-line); }
.roster-overview-unit-heading h3, .roster-overview-group-heading h4 { margin: 0; color: var(--lineup-text); font-size: 15px; }
.roster-overview-unit-eyebrow { margin: 0 0 3px; color: var(--lineup-muted); font: 700 9px/1 var(--lineup-font-data); letter-spacing: .12em; }
.roster-overview-unit-heading > strong, .roster-overview-group-heading > span { color: var(--lineup-muted); font: 700 11px/1 var(--lineup-font-data); }
.roster-overview-group + .roster-overview-group { border-top: 1px solid var(--lineup-line); }
.roster-overview-group-heading { padding-block: 8px; background: var(--lineup-surface-raised); }
.roster-overview-group-heading h4 { color: var(--lineup-text-soft); font-size: 12px; }
.roster-overview-row { display: grid; grid-template-columns: 38px minmax(108px, .78fr) minmax(178px, 1.22fr) 46px; align-items: center; gap: 8px; min-height: 43px; padding: 5px 14px; border-bottom: 1px solid var(--lineup-line); }
.roster-overview-abilities { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 9px; min-width: 0; }
.roster-overview-ability { display: inline-flex; align-items: baseline; justify-content: flex-start; gap: 8px; min-width: 0; }
.roster-overview-ability small { overflow: hidden; flex: 0 0 auto; color: var(--lineup-muted); font: 700 8px/1.1 var(--lineup-font-data); text-overflow: ellipsis; white-space: nowrap; }
.roster-overview-ability strong { overflow: hidden; flex: 0 1 auto; color: var(--lineup-text-soft); font: 700 11px/1 var(--lineup-font-data); font-variant-numeric: tabular-nums; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.roster-overview-position { display: inline-flex; align-items: center; justify-content: center; min-height: 24px; border: 1px solid var(--lineup-line-strong); border-radius: 4px; color: var(--lineup-clay); font: 700 10px/1 var(--lineup-font-data); }
.roster-overview-main { display: grid; gap: 2px; min-width: 0; }
.roster-overview-main strong, .roster-overview-main span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.roster-overview-main strong { color: var(--lineup-text-soft); font-size: 12px; }
.roster-overview-main span { color: var(--lineup-muted); font-size: 10px; }
.roster-overview-rating { display: grid; justify-items: center; gap: 1px; padding: 4px; border: 1px solid color-mix(in srgb, var(--lineup-gold) 50%, var(--lineup-line)); background: var(--lineup-clay-soft); color: var(--lineup-gold); }
.roster-overview-rating small { font: 700 7px/1 var(--lineup-font-data); }
.roster-overview-rating strong { font: 700 13px/1 var(--lineup-font-data); }
.roster-overview-vacancy { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 6px 14px; color: var(--lineup-muted); font-size: 10px; }
.roster-overview-vacancy-slots { display: flex; flex-wrap: wrap; gap: 4px; }
.roster-overview-vacancy-slots span { padding: 3px 5px; border: 1px dashed var(--lineup-line-strong); border-radius: 4px; font: 700 9px/1 var(--lineup-font-data); }
.roster-dialog-copy { margin: 8px 48px 0 0; color: var(--lineup-muted); font-size: 13px; line-height: 1.6; }

.site-footer { display: flex; justify-content: space-between; gap: 16px; margin-top: 56px; padding-top: 15px; border-top: 1px solid var(--lineup-line); color: var(--lineup-muted); font: 700 11.5px/1.4 var(--lineup-font-data); letter-spacing: .1em; }
.back-to-top { position: fixed; right: 22px; bottom: 22px; z-index: 20; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--lineup-line-strong); border-radius: 50%; background: var(--lineup-surface); color: var(--lineup-text-soft); font: 700 18px/1 var(--lineup-font-data); }
.back-to-top:hover { border-color: var(--lineup-clay); color: var(--lineup-clay); }
.toast { position: fixed; right: 22px; bottom: 76px; z-index: 200; max-width: min(360px, calc(100vw - 44px)); padding: 11px 14px; border: 1px solid var(--lineup-line-strong); border-radius: var(--lineup-radius-sm); background: var(--lineup-surface-raised); color: var(--lineup-text); box-shadow: var(--lineup-shadow); font-size: 13px; opacity: 0; pointer-events: none; transform: translateY(7px); transition: opacity 160ms ease, transform 160ms ease; }
.toast.is-visible { opacity: 1; transform: translateY(0); }
body.picker-is-open { overflow: hidden; }

@media (max-width: 1180px) {
  .lineup-shell { width: calc(100% - 48px); }
  .workspace { grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; }
  .slot-grid { gap: 8px; }
  .slot-card { padding-inline: 8px; }
  .roster-heading-actions { max-width: 620px; }
}

@media (max-width: 960px) {
  .lineup-legacy-lede { grid-template-columns: 70px minmax(0, 1fr); }
  .lineup-legacy-lede-mark { min-height: 92px; }
  .lineup-legacy-lede-mark strong { font-size: 40px; }
  .lineup-legacy-lede-stamp { grid-column: 2; justify-items: start; padding: 0; text-align: left; }
  .setup-ribbon { grid-template-columns: auto minmax(200px, 1fr); }
  .deck-summary { min-width: 0; }
  .setup-ribbon .utility-button { justify-self: start; }
  .summary-grid { grid-template-columns: 1.25fr repeat(3, 1fr); }
  .metric-card { padding-inline: 12px; }
  .support-sections { grid-template-columns: 1fr; gap: 36px; }

  .roster-overview-header {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas:
      "title status close"
      "readout readout readout";
    gap: 8px 10px;
    padding: 11px 13px;
  }
  .roster-overview-header-readout {
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
    padding: 8px 0 0;
    border-left: 0;
    border-top: 1px solid var(--lineup-line);
  }
  .roster-overview-header-meta { text-align: left; }
}

@media (max-width: 760px) {
  body.lineup-v4 { font-size: 15px; }
  .lineup-shell { width: calc(100% - 32px); padding: 16px 0 48px; }
  .lineup-shell .g-system-nav { width: 100%; }
  .lineup-shell .g-system-links { margin-inline: -12px; padding-inline: 12px; }
  .lineup-legacy-lede { grid-template-columns: 52px minmax(0, 1fr); gap: 14px; min-height: auto; padding: 30px 0 23px; }
  .lineup-legacy-lede-mark { min-height: 76px; border-radius: 50% 50% 50% 9px; }
  .lineup-legacy-lede-mark strong { font-size: 32px; }
  .lineup-legacy-lede-mark span, .lineup-legacy-lede-mark small { font-size: 9px; }
  .lede-copy h1 { margin: 7px 0 9px; font-size: clamp(31px, 10vw, 44px); }
  .lede-copy > p:last-child { font-size: 15px; line-height: 1.6; }
  .lineup-legacy-lede-stamp { grid-column: 2; }
  .setup-ribbon { grid-template-columns: 1fr; gap: 11px; padding-block: 19px; }
  .setup-ribbon-heading { min-width: 0; }
  .setup-ribbon-heading h2 { font-size: 20px; }
  .setup-ribbon .utility-button { width: 100%; }
  .deck-summary { min-height: 48px; }
  .summary-region { padding-block: 19px; }
  .summary-region-heading { margin-bottom: 12px; }
  .summary-region-heading h2 { font-size: 20px; }
  .summary-grid { grid-template-columns: 1.3fr 1fr 1fr; margin-inline: -1px; }
  .metric-card { padding: 5px 10px; border-left: 1px solid var(--lineup-line); }
  .metric-card:first-child { grid-column: 1 / -1; padding: 0 0 15px; border: 0; border-bottom: 1px solid var(--lineup-line); }
  .metric-card:first-child > strong { font-size: 31px; }
  .metric-card > strong { font-size: 20px; }
  .metric-card > small { font-size: 11.5px; }
  .metric-label { display: grid; gap: 3px; }
  .metric-label small { font-size: 9.5px; }
  .workspace { display: flex; flex-direction: column; gap: 28px; padding-top: 22px; }
  .summary-panel { position: static; order: -1; width: 100%; padding: 0 0 17px; border: 0; border-bottom: 1px solid var(--lineup-line); }
  .summary-panel-heading { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 11px; }
  .summary-panel-heading h2 { font-size: 18px; }
  .aside-deck-lockup { grid-template-columns: 1fr auto; align-items: baseline; gap: 4px 12px; padding: 13px 0; }
  .aside-label { grid-column: 1 / -1; }
  .aside-deck-lockup strong { font-size: 16px; }
  .aside-deck-lockup span:last-child { justify-self: end; font-size: 11.5px; }
  .aside-readout-list { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .aside-readout-list > div { display: grid; gap: 5px; min-height: 0; padding: 11px 9px 6px 0; border: 0; border-right: 1px solid var(--lineup-line); }
  .aside-readout-list > div:last-child { border-right: 0; }
  .aside-readout-list dd { font-size: 16px; }
  .aside-divider, .aside-guidance, .aside-footnote { display: none; }
  .panel-heading { display: grid; align-items: start; gap: 14px; margin-bottom: 16px; }
  .roster-heading-actions { justify-content: flex-start; max-width: none; }
  .selected-slot-note { width: 100%; }
  .roster-content { gap: 24px; }
  .slot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .slot-card { min-height: 190px; }
  .lineup-grid .slot-card:first-child { grid-column: span 2; }
  .lineup-grid .slot-card:first-child .v4-slot-art { height: 110px; }
  .bench-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bench-grid .slot-card:last-child:nth-child(3n + 1) { grid-column: span 3; }
  .pitcher-grid, .reliever-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .share-roster-notice { display: grid; gap: 10px; }
  .share-roster-notice-actions { justify-content: flex-start; }
  .share-roster-notice-actions button { min-height: 44px; }
  .support-sections { margin-top: 35px; padding-top: 19px; }
  .picker-modal, .roster-modal { align-items: end; padding: 0; }
  .picker-dialog, .roster-dialog { width: 100%; max-height: calc(100dvh - 8px); border-radius: 14px 14px 0 0; }
  .picker-dialog-heading { padding: 17px 15px 13px; }
  .picker-modal-filters { grid-template-columns: 1fr; padding: 13px 15px 9px; }
  .picker-hint, .card-list { padding-inline: 15px; }
  .picker-card { grid-template-columns: 54px minmax(0, 1fr); gap: 9px; padding: 8px; }
  .v4-picker-art { width: 54px; height: 54px; }
  .picker-card-action { grid-column: 2; justify-self: start; min-height: 27px; padding-left: 0; border-left: 0; }
  .load-more-button { margin-inline: 15px; }
  .roster-dialog { padding: 18px 15px; }
  .roster-overview-dialog { padding: 0; }
  .roster-overview-board { grid-template-columns: 1fr; gap: 6px; background: var(--lineup-bg); }
  .roster-overview-header { padding: 11px 13px; }
  .roster-overview-row { grid-template-columns: 34px minmax(0, 1fr) 44px; grid-template-areas: "position main rating" "position abilities rating"; align-items: start; gap: 3px 9px; min-height: 48px; padding: 7px 12px; }
  .roster-overview-position { grid-area: position; align-self: start; }
  .roster-overview-main { grid-area: main; }
  .roster-overview-abilities { grid-area: abilities; }
  .roster-overview-rating { grid-area: rating; align-self: start; }
  .site-footer { margin-top: 42px; }
}

@media (max-width: 390px) {
  .lineup-shell { width: calc(100% - 24px); padding: 8px 0 48px; }
  .lineup-legacy-lede { grid-template-columns: 46px minmax(0, 1fr); gap: 11px; }
  .lineup-legacy-lede-mark { min-height: 68px; }
  .lineup-legacy-lede-mark strong { font-size: 28px; }
  .archive-kicker { font-size: 10.5px; letter-spacing: .11em; }
  .lede-copy h1 { font-size: 30px; }
  .lede-copy > p:last-child { font-size: 14px; }
  .roster-heading-actions { gap: 6px; }
  .roster-heading-actions .utility-button, .roster-heading-actions .primary-button { padding-inline: 9px; }
  .slot-card { min-height: 177px; padding: 8px; }
  .v4-slot-art { height: 82px; margin-top: 6px; }
  .lineup-grid .slot-card:first-child .v4-slot-art { height: 96px; }
  .slot-player strong { font-size: 14px; }
  .slot-player > span { font-size: 10.5px; }
  .slot-player .v4-slot-stats { font-size: 9.5px; }
  .metric-card:first-child > strong { font-size: 28px; }
  .metric-label span { font-size: 13px; }
  .summary-caption { font-size: 11.5px; }
}

@media (max-width: 350px) {
  .slot-grid, .bench-grid, .pitcher-grid, .reliever-grid { grid-template-columns: 1fr 1fr; }
  .lineup-grid .slot-card:first-child { grid-column: span 2; }
  .bench-grid .slot-card:last-child:nth-child(3n + 1) { grid-column: span 2; }
  .roster-heading-actions .icon-button { width: 40px; }
  .roster-heading-actions .utility-button, .roster-heading-actions .primary-button { font-size: 12.5px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}
@media (max-width: 760px) {
  .summary-panel { order: 2; }
  .summary-grid .metric-card:nth-child(2),
  .summary-grid .metric-card:nth-child(3) { display: none; }
  .summary-grid .metric-card:nth-child(4) { grid-column: 2 / 4; }
}


/* V4 shell parity: the lineup playground uses the same page scale as the V4 indexes. */
@media (min-width: 841px) {
  .lineup-shell { zoom: 1.04; }
}

/* Workspace density refinement: preserve the V4 world, change only task priority. */

.lineup-v4 > .skip-link {
  position: fixed;
  top: 10px;
  left: 12px;
  z-index: 300;
  width: max-content;
  max-width: calc(100% - 24px);
  padding: 10px 14px;
  border: 1px solid var(--lineup-clay);
  border-radius: var(--lineup-radius-sm);
  background: var(--lineup-surface-raised);
  color: var(--lineup-text);
  box-shadow: var(--lineup-shadow);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-180%);
  transition: opacity 140ms ease, transform 140ms ease;
}
.lineup-v4 > .skip-link:focus,
.lineup-v4 > .skip-link:focus-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.lineup-v4 .lineup-legacy-nav .score-utility {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 14px;
}
.lineup-v4 .lineup-legacy-nav .data-status {
  display: grid;
  grid-template-columns: 8px auto;
  align-items: center;
  column-gap: 7px;
  color: var(--lineup-muted);
  font: 700 11.5px/1.15 var(--lineup-font-data);
}
.lineup-v4 .lineup-legacy-nav .data-status i {
  grid-row: span 2;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lineup-green);
  box-shadow: 0 0 0 4px var(--lineup-green-soft);
}
.lineup-v4 .lineup-legacy-nav .data-status span:last-child { color: var(--lineup-text-soft); }

.lineup-v4 .lineup-legacy-lede {
  grid-template-columns: 72px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  min-height: 102px;
  padding: 18px 0 16px;
}
.lineup-v4 .lineup-legacy-lede-mark {
  width: 72px;
  min-height: 68px;
  border-radius: 50% 50% 50% 10px;
}
.lineup-v4 .lineup-legacy-lede-mark strong { font-size: 30px; }
.lineup-v4 .lineup-legacy-lede .archive-kicker { font-size: 11.5px; letter-spacing: .13em; }
.lineup-v4 .lineup-legacy-lede .lede-copy h1 {
  margin: 5px 0 5px;
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1;
}
.lineup-v4 .lineup-legacy-lede .lede-copy > p:last-child {
  max-width: 560px;
  font-size: 14px;
  line-height: 1.45;
}
.lineup-v4 .lineup-legacy-lede-stamp {
  align-content: center;
  min-width: 96px;
  padding: 0;
  gap: 3px;
}
.lineup-v4 .lineup-legacy-lede-stamp span { font-size: 10.5px; }
.lineup-v4 .lineup-legacy-lede-stamp strong { color: var(--lineup-text); font: 700 18px/1 var(--lineup-font-data); }
.lineup-v4 .lineup-legacy-lede-stamp small { display: none; }

.lineup-v4 .setup-ribbon {
  grid-template-columns: minmax(112px, .45fr) minmax(260px, 1.15fr) minmax(180px, .72fr) auto;
  align-items: center;
  gap: 14px;
  padding: 12px 0 11px;
}
.lineup-v4 .setup-ribbon-heading { min-width: 0; }
.lineup-v4 .setup-ribbon-heading h2 { margin-top: 3px; font-size: 17px; }
.lineup-v4 .select-field { gap: 3px; }
.lineup-v4 .select-field > span { font-size: 11.5px; }
.lineup-v4 .select-field select { min-height: 40px; }
.lineup-v4 .deck-summary {
  min-height: 40px;
  padding: 4px 12px;
  border-left: 1px solid var(--lineup-line-strong);
  background: transparent;
}
.lineup-v4 .deck-summary strong { font-size: 14px; }
.lineup-v4 .deck-summary span { font-size: 11.5px; }

.lineup-v4 .summary-region {
  padding: 11px 0 13px;
}
.lineup-v4 .summary-region-heading {
  align-items: baseline;
  margin-bottom: 9px;
}
.lineup-v4 .summary-region-heading h2 { margin-top: 3px; font-size: 18px; }
.lineup-v4 .summary-caption { font-size: 11.5px; }
.lineup-v4 .metric-card { min-height: 48px; padding: 2px 16px; }
.lineup-v4 .metric-card:first-child { padding-left: 0; }
.lineup-v4 .metric-label span { font-size: 12.5px; }
.lineup-v4 .metric-label small { display: none; }
.lineup-v4 .metric-card > strong {
  margin-top: 4px;
  font-size: clamp(18px, 2.1vw, 25px);
}
.lineup-v4 .metric-card > small { min-height: 14px; margin-top: 4px; font-size: 11.5px; }
.lineup-v4 .progress-track { height: 3px; margin-top: 6px; }

.lineup-v4 .workspace {
  display: block;
  padding-top: 16px;
}
.lineup-v4 .summary-panel { display: none; }
.lineup-v4 .roster-panel { width: 100%; }
.lineup-v4 .panel-heading {
  align-items: center;
  margin-bottom: 12px;
}
.lineup-v4 .section-heading h2 { margin-top: 3px; font-size: 24px; }
.lineup-v4 .section-helper { margin-top: 5px; font-size: 13px; }
.lineup-v4 .roster-heading-actions { max-width: none; }
.lineup-v4 .slot-grid { gap: 10px; }
.lineup-v4 .slot-card { min-height: 204px; }

@media (max-width: 1120px) and (min-width: 841px) {
  .lineup-v4 .lineup-legacy-nav .data-status { display: none; }
  .lineup-v4 .setup-ribbon { gap: 10px; }
}

@media (max-width: 840px) {
  .lineup-v4 .lineup-legacy-nav {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 14px;
  }
  .lineup-v4 .lineup-legacy-nav .score-utility { display: contents; }
  .lineup-v4 .lineup-legacy-nav .g-system-brand { grid-column: 1; grid-row: 1; }
  .lineup-v4 .lineup-legacy-nav .g-theme-toggle { grid-column: 2; grid-row: 1; align-self: start; }
  .lineup-v4 .lineup-legacy-nav .data-status {
    display: flex;
    grid-column: 1 / -1;
    grid-row: 2;
    align-items: center;
    gap: 8px;
    min-height: 25px;
    padding-top: 6px;
    border-top: 1px solid var(--lineup-line);
  }
  .lineup-v4 .lineup-legacy-nav .data-status i { flex: 0 0 8px; }
  .lineup-v4 .lineup-legacy-nav #dataStamp { display: none; }
  .lineup-v4 .lineup-legacy-nav .g-system-links { grid-column: 1 / -1; grid-row: 3; }
  .lineup-v4 .lineup-legacy-lede {
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 82px;
    padding: 14px 0 12px;
    gap: 12px;
  }
  .lineup-v4 .lineup-legacy-lede-mark { display: none; }
  .lineup-v4 .lineup-legacy-lede .lede-copy h1 { font-size: 29px; }
  .lineup-v4 .lineup-legacy-lede .lede-copy > p:last-child { max-width: 48ch; font-size: 12.5px; line-height: 1.35; }
  .lineup-v4 .lineup-legacy-lede-stamp { min-width: 76px; }
  .lineup-v4 .lineup-legacy-lede-stamp span { display: none; }
  .lineup-v4 .lineup-legacy-lede-stamp strong { font-size: 16px; }
  .lineup-v4 .setup-ribbon {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 10px;
    padding: 10px 0 11px;
  }
  .lineup-v4 .setup-ribbon-heading { grid-column: 1; grid-row: 1; }
  .lineup-v4 .setup-ribbon-actions { grid-column: 2; grid-row: 1; display: grid; gap: 4px; }
  .lineup-v4 .setup-ribbon-actions .utility-button { width: auto; min-height: 36px; }
  .lineup-v4 .deck-select-field { grid-column: 1 / -1; grid-row: 2; }
  .lineup-v4 .deck-summary {
    grid-column: 1 / -1;
    grid-row: 3;
    display: flex;
    align-items: baseline;
    gap: 7px;
    min-height: 24px;
    padding: 0;
    border-left: 0;
  }
  .lineup-v4 .deck-summary strong { font-size: 13px; }
  .lineup-v4 .deck-summary span { font-size: 11.5px; }
  .lineup-v4 .summary-region { padding: 10px 0 11px; }
  .lineup-v4 .summary-region-heading { margin-bottom: 8px; }
  .lineup-v4 .summary-region-heading h2 { font-size: 16px; }
  .lineup-v4 .summary-caption { display: none; }
  .lineup-v4 .summary-grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(60px, .72fr) minmax(74px, .88fr);
    margin-inline: 0;
  }
  .lineup-v4 .metric-card,
  .lineup-v4 .metric-card:first-child {
    grid-column: auto;
    min-height: 0;
    padding: 1px 8px 1px 10px;
    border: 0;
    border-left: 1px solid var(--lineup-line);
  }
  .lineup-v4 .metric-card:first-child { padding-left: 0; border-left: 0; }
  .lineup-v4 .metric-card:nth-child(2),
  .lineup-v4 .metric-card:nth-child(3) { display: none; }
  .lineup-v4 .metric-card:nth-child(4) { grid-column: auto; }
  .lineup-v4 .metric-label span { font-size: 11.5px; }
  .lineup-v4 .metric-card > strong { margin-top: 3px; font-size: 17px; }
  .lineup-v4 .metric-card > small,
  .lineup-v4 .progress-track { display: none; }
  .lineup-v4 .workspace { padding-top: 13px; }
  .lineup-v4 .panel-heading {
    align-items: start;
    gap: 10px;
    margin-bottom: 10px;
  }
  .lineup-v4 .section-heading h2 { font-size: 21px; }
  .lineup-v4 .section-helper { font-size: 12.5px; }
  .lineup-v4 .roster-heading-actions { gap: 6px; }
  .lineup-v4 .roster-heading-actions .selected-slot-note { flex: 1 1 100%; width: auto; min-height: 36px; }
  .lineup-v4 .slot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .lineup-v4 .lineup-grid .slot-card:first-child { grid-column: auto; }
  .lineup-v4 .slot-card {
    grid-template-columns: 52px minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    min-height: 106px;
    padding: 8px;
  }
  .lineup-v4 .slot-card .slot-head { grid-column: 1 / -1; grid-row: 1; }
  .lineup-v4 .v4-slot-art {
    grid-column: 1;
    grid-row: 2;
    align-self: end;
    width: 48px;
    height: 62px;
    margin: 4px 0 0;
    border-bottom: 0;
  }
  .lineup-v4 .v4-slot-team-mark { top: 2px; left: 0; width: 18px; height: 18px; }
  .lineup-v4 .slot-player {
    grid-column: 2;
    grid-row: 2;
    align-self: end;
    gap: 2px;
    padding-left: 6px;
  }
  .lineup-v4 .slot-player strong { font-size: 13px; line-height: 1.15; }
  .lineup-v4 .slot-player > span { font-size: 10.5px; }
  .lineup-v4 .slot-player .v4-slot-series { font-size: 10px; }
  .lineup-v4 .slot-player .v4-slot-stats { display: none; }
  .lineup-v4 .slot-empty {
    grid-column: 1 / -1;
    min-height: 70px;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 8px;
  }
  .lineup-v4 .slot-empty::before { width: 27px; height: 27px; font-size: 19px; }
  .lineup-v4 .slot-card > button[data-remove-slot] { width: 28px; height: 28px; }
}

@media (max-width: 350px) {
  .lineup-v4 .lineup-legacy-lede { min-height: 76px; gap: 8px; }
  .lineup-v4 .lineup-legacy-lede .lede-copy h1 { font-size: 25px; }
  .lineup-v4 .lineup-legacy-lede .lede-copy > p:last-child { font-size: 11.5px; }
  .lineup-v4 .lineup-legacy-lede-stamp { min-width: 68px; }
  .lineup-v4 .lineup-legacy-lede-stamp strong { font-size: 14px; }
  .lineup-v4 .setup-ribbon { gap: 7px 8px; }
  .lineup-v4 .deck-summary span { display: none; }
  .lineup-v4 .slot-card { grid-template-columns: 44px minmax(0, 1fr); min-height: 100px; padding: 7px; }
  .lineup-v4 .v4-slot-art { width: 42px; height: 56px; }
  .lineup-v4 .slot-player { padding-left: 4px; }
  .lineup-v4 .slot-player strong { font-size: 12.5px; }
  .lineup-v4 .slot-player > span { font-size: 9.5px; }
  .lineup-v4 .slot-code { font-size: 12.5px; }
  .lineup-v4 .slot-name { font-size: 10.5px; }
}


/* Density pass: make the operating surface arrive before the fold. */

.lineup-v4 .lineup-legacy-lede {
  min-height: 86px;
  padding: 12px 0 10px;
}
.lineup-v4 .lineup-legacy-lede-mark {
  min-height: 58px;
}
.lineup-v4 .lineup-legacy-lede-mark strong { font-size: 27px; }
.lineup-v4 .lineup-legacy-lede .lede-copy h1 { font-size: clamp(26px, 2.8vw, 35px); }
.lineup-v4 .lineup-legacy-lede .lede-copy > p:last-child { font-size: 13px; line-height: 1.35; }

.lineup-v4 .setup-ribbon {
  padding: 7px 0 8px;
}
.lineup-v4 .select-field select { min-height: 38px; }

.lineup-v4 .summary-region {
  padding: 8px 0 9px;
}
.lineup-v4 .summary-region-heading {
  margin-bottom: 6px;
}
.lineup-v4 .summary-region-heading h2 { font-size: 16px; }
.lineup-v4 .summary-grid { align-items: center; }
.lineup-v4 .metric-card,
.lineup-v4 .metric-card:first-child {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-height: 30px;
  padding: 0 14px;
}
.lineup-v4 .metric-card:first-child { padding-left: 0; }
.lineup-v4 .metric-label { flex: 0 0 auto; }
.lineup-v4 .metric-label span { font-size: 11.5px; }
.lineup-v4 .metric-card > strong {
  margin: 0;
  font-size: clamp(17px, 1.9vw, 22px);
}
.lineup-v4 .metric-card > small,
.lineup-v4 .progress-track { display: none; }

.lineup-v4 .workspace { padding-top: 12px; }
.lineup-v4 .panel-heading { margin-bottom: 9px; }
.lineup-v4 .section-heading h2 { font-size: 21px; }
.lineup-v4 .section-helper { margin-top: 3px; font-size: 12.5px; line-height: 1.35; }

@media (max-width: 840px) {
  .lineup-v4 .lineup-legacy-lede {
    min-height: 74px;
    padding: 11px 0 9px;
  }
  .lineup-v4 .lineup-legacy-lede .lede-copy h1 { font-size: 27px; }
  .lineup-v4 .lineup-legacy-lede .lede-copy > p:last-child { font-size: 11.5px; }
  .lineup-v4 .setup-ribbon {
    gap: 6px 10px;
    padding: 8px 0 9px;
  }
  .lineup-v4 .setup-ribbon-heading .eyebrow,
  .lineup-v4 .deck-select-field > span { display: none; }
  .lineup-v4 .setup-ribbon-heading h2 { margin: 0; font-size: 16px; }
  .lineup-v4 .select-field select { min-height: 44px; }
  .lineup-v4 .deck-summary { min-height: 20px; }
  .lineup-v4 .summary-region { padding: 7px 0 8px; }
  .lineup-v4 .summary-region-heading {
    display: flex;
    align-items: baseline;
    margin-bottom: 5px;
  }
  .lineup-v4 .summary-region-heading .eyebrow { display: none; }
  .lineup-v4 .summary-region-heading h2 { margin: 0; font-size: 15px; }
  .lineup-v4 .summary-grid { align-items: start; }
  .lineup-v4 .metric-card,
  .lineup-v4 .metric-card:first-child {
    display: grid;
    align-content: start;
    gap: 2px;
    min-height: 0;
    padding: 0 8px 0 9px;
  }
  .lineup-v4 .metric-card:first-child { padding-left: 0; }
  .lineup-v4 .metric-card > strong { font-size: 16px; }
  .lineup-v4 .workspace { padding-top: 10px; }
  .lineup-v4 .roster-heading-actions {
    display: grid;
    grid-template-columns: auto auto auto 34px 34px minmax(0, 1fr);
    align-items: center;
    justify-content: start;
    gap: 5px;
  }
  .lineup-v4 .roster-heading-actions .saved-roster-list {
    grid-column: 1 / -1;
    min-height: 28px;
  }
  .lineup-v4 .roster-heading-actions .saved-roster-empty,
  .lineup-v4 .roster-heading-actions .saved-roster-load,
  .lineup-v4 .roster-heading-actions .saved-roster-delete {
    min-height: 28px;
  }
  .lineup-v4 .roster-heading-actions > .utility-button,
  .lineup-v4 .roster-heading-actions > .primary-button,
  .lineup-v4 .roster-heading-actions > .icon-button {
    min-height: 36px;
  }
  .lineup-v4 .roster-heading-actions .selected-slot-note {
    grid-column: 1 / -1;
    min-height: 30px;
  }
  .lineup-v4 .section-heading h2 { font-size: 20px; }
}

@media (max-width: 600px) {
  .v4-saved-rosters { margin-bottom: 11px; padding: 8px 10px 6px; }
  .v4-saved-roster-row {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 7px 8px;
    min-height: 42px;
    padding: 5px 0;
  }
  .v4-saved-roster-actions {
    grid-column: 2;
    justify-content: start;
    gap: 5px;
  }
  .v4-saved-roster-actions .utility-button,
  .v4-saved-roster-actions .quiet-button { min-height: 34px; padding-inline: 10px; }
}

@media (max-width: 350px) {
  .v4-saved-rosters { padding-inline: 8px; }
  .v4-saved-roster-row { grid-template-columns: 25px minmax(0, 1fr); gap: 6px; }
  .v4-saved-roster-actions { gap: 3px; }
  .v4-saved-roster-actions .utility-button,
  .v4-saved-roster-actions .quiet-button { padding-inline: 7px; font-size: 10.5px; }
}

@media (max-width: 350px) {
  .lineup-v4 .lineup-legacy-lede { min-height: 70px; }
  .lineup-v4 .lineup-legacy-lede .lede-copy h1 { font-size: 24px; }
  .lineup-v4 .lineup-legacy-lede .lede-copy > p:last-child { font-size: 10.5px; }
  .lineup-v4 .setup-ribbon { gap: 5px 8px; }
  .lineup-v4 .roster-heading-actions {
    grid-template-columns: auto auto auto 32px 32px minmax(0, 1fr);
    gap: 4px;
  }
  .lineup-v4 .roster-heading-actions > .utility-button,
  .lineup-v4 .roster-heading-actions > .primary-button { padding-inline: 8px; }
}


/* Final desktop fold adjustment: keep the first roster row inside 720px. */
@media (min-width: 841px) {
  .lineup-v4 .summary-region { padding: 4px 0 5px; }
}

/* Player V4 template precedence: Lineup keeps only its own content and data. */
.lineup-v4 .score-header,
.lineup-v4 .archive-lede {
  font-family: var(--font-zh);
}
.lineup-v4 .archive-lede .archive-kicker {
  margin: 0;
  color: var(--clay);
  font-family: var(--font-display);
  font-size: var(--top-eyebrow-size);
  font-weight: 700;
  letter-spacing: .16em;
}
.lineup-v4 .archive-lede .lede-copy h1 {
  margin: 6px 0 9px;
  color: var(--ink);
  font-size: clamp(34px, 4.2vw, 58px);
  font-weight: 780;
  letter-spacing: -.055em;
  line-height: 1.03;
  text-wrap: initial;
}
.lineup-v4 .archive-lede .lede-copy > p:last-child {
  max-width: 650px;
  margin: 0;
  color: var(--muted);
  font-size: var(--top-description-size);
  line-height: 1.5;
  text-wrap: initial;
}

@media (max-width: 840px) {
  .lineup-v4 .lineup-shell { width: calc(100% - 32px); }
}

@media (max-width: 620px) {
  .lineup-v4 .lineup-shell {
    width: calc(100% - 24px);
    padding-top: 8px;
  }
  .lineup-v4 .archive-lede .lede-copy h1 { font-size: 37px; }
  .lineup-v4 .archive-lede .lede-copy > p:last-child { font-size: 13px; }
}

@media (max-width: 389px) {
  .lineup-v4 .archive-lede .lede-copy h1 { font-size: 35px; }

}

/* Legacy parity presentation: keep cheer controls inside the roster work surface. */
.v4-cheer-moment-section {
  margin-top: 0;
  margin-bottom: 24px;
  padding-top: 17px;
  border-top: 1px solid var(--lineup-line);
}
.v4-cheer-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 12px;
}
.v4-cheer-section-heading h2 { margin: 2px 0 0; font-size: 22px; letter-spacing: .01em; }
.v4-cheer-section-heading p:not(.eyebrow) { margin: 4px 0 0; color: var(--lineup-muted); font-size: 12.5px; }
.v4-cheer-section-meta { display: grid; justify-items: end; gap: 3px; color: var(--lineup-muted); font-size: 11.5px; white-space: nowrap; }
.v4-cheer-section-meta strong { color: var(--lineup-clay); font-family: var(--lineup-font-data); font-size: 16px; letter-spacing: .04em; }
.v4-cheer-moment-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid var(--lineup-line); }
.v4-cheer-moment-item {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  min-height: 148px;
  padding: 12px 13px 11px;
  border-right: 1px solid var(--lineup-line);
  border-bottom: 1px solid var(--lineup-line);
  background: color-mix(in srgb, var(--lineup-surface) 86%, var(--lineup-clay) 14%);
}
.v4-cheer-moment-item:first-child { border-left: 1px solid var(--lineup-line); }
.v4-cheer-moment-item.is-assigned { box-shadow: inset 0 2px 0 var(--lineup-clay); }
.v4-cheer-moment-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.v4-cheer-moment-heading strong { color: var(--lineup-clay); font-family: var(--lineup-font-data); font-size: 16px; letter-spacing: .05em; }
.v4-cheer-moment-heading span { color: var(--lineup-muted); font-size: 11.5px; }
.v4-cheer-moment-name { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; }
.v4-cheer-moment-name strong { overflow: hidden; color: var(--lineup-text); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.v4-stars { color: var(--lineup-gold); font-family: var(--lineup-font-data); font-size: 14px; letter-spacing: .04em; white-space: nowrap; }
.v4-cheer-moment-effect { min-height: 39px; margin: 0; color: var(--lineup-text-soft); font-size: 12.5px; line-height: 1.45; }
.v4-cheer-moment-bonus { min-height: 16px; overflow: hidden; color: var(--lineup-muted); font-size: 11.5px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.v4-cheer-moment-empty, .v4-cheer-moment-empty-state { color: var(--lineup-muted); font-size: 12.5px; }
.v4-cheer-moment-empty-state { grid-column: 1 / -1; padding: 16px; border: 1px solid var(--lineup-line); border-top: 0; }
.v4-cheer-moment-actions { display: flex; align-items: center; gap: 7px; margin-top: auto; }
.v4-cheer-moment-action, .v4-cheer-moment-remove,
.v4-slot-cheer-trigger, .v4-slot-cheer-remove {
  min-height: 27px;
  padding: 3px 8px;
  border: 1px solid var(--lineup-line-strong);
  border-radius: 5px;
  background: transparent;
  color: var(--lineup-text-soft);
  font-size: 11.5px;
  line-height: 1.2;
}
.v4-cheer-moment-action:hover, .v4-slot-cheer-trigger:hover { border-color: var(--lineup-clay); color: var(--lineup-clay); }
.v4-cheer-moment-action.is-primary { border-color: color-mix(in srgb, var(--lineup-clay) 65%, var(--lineup-line)); color: var(--lineup-clay); }
.v4-cheer-moment-remove, .v4-slot-cheer-remove { border-color: transparent; color: var(--lineup-muted); }
.v4-cheer-moment-remove:hover, .v4-slot-cheer-remove:hover { color: var(--lineup-danger); }

/* Filled player slots keep player identity first and expose cheer as a second-level action. */
.v4-slot-cheer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 3px 6px;
  min-width: 0;
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid color-mix(in srgb, var(--lineup-line) 76%, transparent);
}
.v4-slot-cheer-trigger { display: inline-flex; align-items: center; justify-content: flex-start; gap: 5px; min-width: 0; padding-inline: 5px; border-color: transparent; text-align: left; }
.v4-slot-cheer-trigger span:not(.v4-stars), .v4-slot-cheer-trigger strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v4-slot-cheer-trigger strong { color: var(--lineup-text); font-size: 12.5px; }
.v4-slot-cheer-prefix { color: var(--lineup-clay); font-size: 11.5px; }
.v4-slot-cheer-empty { border-top-style: dashed; }
.v4-slot-cheer-empty .v4-slot-cheer-trigger { color: var(--lineup-muted); }
.v4-slot-cheer-bonus { grid-column: 1 / -1; overflow: hidden; color: var(--lineup-muted); font-size: 10.5px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.v4-cheer-picker-modal { z-index: 30; }
.v4-cheer-picker-dialog { width: min(620px, calc(100% - 28px)); max-height: min(720px, calc(100vh - 34px)); overflow: auto; }
.v4-cheer-picker-list { display: grid; gap: 7px; margin-top: 14px; }
.v4-cheer-picker-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 69px;
  padding: 10px 12px;
  border: 1px solid var(--lineup-line);
  border-radius: 7px;
  background: var(--lineup-surface);
  color: var(--lineup-text);
  text-align: left;
}
.v4-cheer-picker-card:hover, .v4-cheer-picker-card.is-current { border-color: var(--lineup-clay); background: var(--lineup-clay-soft); }
.v4-cheer-picker-copy { display: grid; gap: 3px; min-width: 0; }
.v4-cheer-picker-top, .v4-cheer-picker-meta { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.v4-cheer-picker-top strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.v4-cheer-picker-top span, .v4-cheer-picker-meta span:last-child { color: var(--lineup-muted); font-size: 11.5px; }
.v4-cheer-picker-meta { color: var(--lineup-muted); font-size: 11.5px; }
.v4-cheer-picker-bonus { overflow: hidden; color: var(--lineup-text-soft); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.v4-cheer-picker-action { color: var(--lineup-clay); font-size: 12.5px; white-space: nowrap; }
.v4-cheer-picker-empty { display: grid; gap: 4px; padding: 22px 8px; color: var(--lineup-muted); text-align: center; }
.v4-cheer-picker-empty strong { color: var(--lineup-text); font-size: 14px; }
.v4-cheer-picker-empty span { font-size: 12.5px; }
.v4-cheer-picker-remove { margin-top: 14px; }

@media (max-width: 840px) {
  .v4-cheer-moment-section { margin-top: 0; margin-bottom: 20px; padding-top: 13px; }
  .v4-cheer-section-heading { align-items: start; gap: 10px; margin-bottom: 6px; }
  .v4-cheer-section-heading h2 { font-size: 18px; }
  .v4-cheer-section-heading p:not(.eyebrow) { max-width: 230px; font-size: 11.5px; }
  .v4-cheer-section-meta { font-size: 10.5px; }
  .v4-cheer-section-meta strong { font-size: 14px; }
  /* Two moments per row. Each card spans four shared row tracks (subgrid), so the label / name / effect / bonus
     lines of the two cards in a row stay level even when one effect wraps further. Every line of text stays
     visible: the bonus wraps instead of ending in 「…」. */
  .v4-cheer-moment-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; row-gap: 0; border-top: 1px solid var(--lineup-line); }
  .v4-cheer-moment-item, .v4-cheer-moment-item:first-child {
    display: grid;
    grid-row: span 4;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: subgrid;
    align-content: start;
    gap: 3px 6px;
    min-height: 0;
    padding: 7px 9px 8px;
    border-right: 1px solid var(--lineup-line);
    border-left: 0;
  }
  .v4-cheer-moment-item:nth-child(odd) { border-left: 1px solid var(--lineup-line); }
  .v4-cheer-moment-heading { grid-column: 1; grid-row: 1; align-self: center; }
  .v4-cheer-moment-heading strong { font-size: 14px; }
  .v4-cheer-moment-name { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; gap: 6px; }
  .v4-cheer-moment-name strong { font-size: 14px; }
  /* balance: a wrapped line splits evenly instead of leaving one character on its own line. */
  .v4-cheer-moment-effect { grid-column: 1 / -1; grid-row: 3; min-height: 0; font-size: 11.5px; line-height: 1.4; text-wrap: balance; }
  .v4-cheer-moment-bonus { grid-column: 1 / -1; grid-row: 4; min-height: 0; font-size: 10.5px; white-space: normal; text-overflow: clip; overflow: visible; text-wrap: balance; }
  .v4-cheer-moment-actions { grid-column: 2; grid-row: 1; align-self: center; gap: 2px; margin-top: 0; }
  .v4-cheer-moment-actions .v4-cheer-moment-action, .v4-cheer-moment-actions .v4-cheer-moment-remove { min-height: 24px; padding: 2px 7px; }
  .v4-cheer-moment-item.is-empty .v4-cheer-moment-empty { grid-column: 1 / -1; grid-row: 2; }
  .v4-cheer-moment-item.is-empty .v4-cheer-moment-action { grid-column: 2; grid-row: 1; align-self: center; min-height: 24px; padding: 2px 7px; }
  .v4-cheer-moment-empty-state { padding: 14px 0; border-right: 0; border-left: 0; }
  .v4-slot-cheer { margin-top: 5px; padding-top: 5px; }
  .v4-slot-cheer-trigger, .v4-slot-cheer-remove { min-height: 25px; font-size: 10.5px; }
  .v4-slot-cheer-trigger strong { font-size: 11.5px; }
  .v4-slot-cheer-bonus { font-size: 9.5px; }
  .v4-cheer-picker-dialog { width: min(620px, calc(100% - 20px)); max-height: calc(100vh - 20px); }
  .v4-cheer-picker-card { min-height: 64px; padding: 9px 10px; }
}/* Required parity readouts: compact rows only, preserving the approved V4 layout. */
.v4-overview-details {
  display: grid;
  grid-column: 1 / -1;
  gap: 1px;
  background: var(--lineup-line);
}
.v4-overview-block {
  min-width: 0;
  padding: 15px 17px;
  background: var(--lineup-surface);
}
.v4-overview-block.v4-overview-bonus-block { padding-top: 0; }
.v4-overview-block > header,
.v4-audit-parity-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.v4-overview-block h3,
.v4-audit-parity h3 {
  margin: 3px 0 0;
  color: var(--lineup-text);
  font-size: 15px;
}
.v4-overview-block > header > span,
.v4-audit-parity-heading > span {
  color: var(--lineup-muted);
  font: 700 10px/1 var(--lineup-font-data);
  white-space: nowrap;
}
.v4-overview-summary-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--lineup-line);
}
.v4-overview-summary-item {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px 12px 4px 0;
  border-right: 1px solid var(--lineup-line);
}
.v4-overview-summary-item + .v4-overview-summary-item { padding-left: 12px; }
.v4-overview-summary-item:last-child { border-right: 0; }
.v4-overview-summary-item span,
.v4-overview-bonus-list dt {
  color: var(--lineup-muted);
  font-size: 10px;
}
.v4-overview-summary-item strong {
  overflow: hidden;
  color: var(--lineup-text);
  font: 700 15px/1.15 var(--lineup-font-data);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.v4-overview-player-list,
.v4-overview-cheer-list { display: grid; border-top: 1px solid var(--lineup-line); }
.v4-overview-player-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 64px;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 8px 0;
  border-bottom: 1px solid var(--lineup-line);
}
.v4-overview-position,
.v4-overview-cheer-source {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  border: 1px solid var(--lineup-line-strong);
  border-radius: 4px;
  color: var(--lineup-clay);
  font: 700 10px/1 var(--lineup-font-data);
}
.v4-overview-player-main,
.v4-overview-support {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.v4-overview-player-main > strong,
.v4-overview-player-main > span,
.v4-overview-support > strong,
.v4-overview-support > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.v4-overview-player-main > strong { color: var(--lineup-text-soft); font-size: 12px; }
.v4-overview-player-main > span { color: var(--lineup-muted); font-size: 10px; }
.v4-overview-support { margin-top: 4px; padding-top: 4px; border-top: 1px dashed var(--lineup-line); }
.v4-overview-support > strong { color: var(--lineup-clay); font-size: 10px; }
.v4-overview-support > span { color: var(--lineup-muted); font-size: 9px; }
.v4-overview-support.is-empty { display: block; }
.v4-overview-player-ovr {
  display: grid;
  justify-items: end;
  gap: 2px;
  color: var(--lineup-gold);
}
.v4-overview-player-ovr small { color: var(--lineup-muted); font: 700 8px/1 var(--lineup-font-data); }
.v4-overview-player-ovr strong { font: 700 16px/1 var(--lineup-font-data); }
.v4-overview-cheer-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 8px 0;
  border-bottom: 1px solid var(--lineup-line);
}
.v4-overview-cheer-row > div { display: grid; gap: 2px; min-width: 0; }
.v4-overview-cheer-row > div strong,
.v4-overview-cheer-row > div span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.v4-overview-cheer-row > div strong { color: var(--lineup-text-soft); font-size: 11px; }
.v4-overview-cheer-row > div span { color: var(--lineup-muted); font-size: 10px; }
.v4-overview-cheer-row.is-inactive > div strong { color: var(--lineup-muted); }
.v4-audit-state {
  display: inline-flex;
  align-items: center;
  min-height: 21px;
  padding: 0 6px;
  border: 1px solid var(--lineup-line-strong);
  border-radius: 4px;
  color: var(--lineup-muted);
  font: 700 10.5px/1 var(--lineup-font-data);
  white-space: nowrap;
}
.v4-audit-state.is-active {
  border-color: color-mix(in srgb, var(--lineup-green) 55%, var(--lineup-line));
  color: var(--lineup-green);
}
.v4-audit-state.is-inactive {
  border-color: color-mix(in srgb, var(--lineup-danger) 55%, var(--lineup-line));
  color: var(--lineup-danger);
}
.v4-overview-bonus-moments {
  grid-column: 1 / -1;
  min-width: 0;
  margin: 6px 0 0;
  padding: 8px 0 0;
}
.v4-overview-bonus-moments-heading {
  margin-bottom: 4px;
}
.v4-overview-bonus-moments-heading h4 {
  margin: 0;
  color: var(--lineup-muted);
  font: 700 10px/1 var(--lineup-font-data);
  letter-spacing: .12em;
}
.v4-overview-bonus-sources {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.v4-overview-bonus-source {
  min-width: 0;
  padding: 10px 14px 9px 0;
  border-bottom: 1px solid var(--lineup-line);
}
.v4-overview-bonus-source:nth-child(even) {
  padding-left: 14px;
  border-left: 1px solid var(--lineup-line);
}
.v4-overview-bonus-source-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  margin-bottom: 6px;
}
.v4-overview-bonus-source-heading h4 {
  margin: 0;
  color: var(--lineup-text-soft);
  font-size: 11px;
}
.v4-overview-bonus-source-heading > span {
  color: var(--lineup-muted);
  font: 700 9px/1 var(--lineup-font-data);
  white-space: nowrap;
}
.v4-overview-bonus-role-list {
  display: grid;
  gap: 3px;
}
.v4-overview-bonus-role {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.v4-overview-bonus-role > span {
  color: var(--lineup-muted);
  font-size: 10px;
}
.v4-overview-bonus-role > strong {
  min-width: 0;
  color: var(--lineup-text-soft);
  font: 600 10px/1.35 var(--lineup-font-data);
  overflow-wrap: anywhere;
}
.v4-overview-bonus-empty {
  margin: 0;
  color: var(--lineup-muted);
  font-size: 10px;
}
.v4-overview-bonus-moment-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  justify-content: start;
  align-items: start;
  column-gap: 16px;
  row-gap: 3px;
}
.v4-overview-bonus-moment {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: start;
  gap: 3px;
  min-width: 0;
  padding: 0;
}
.v4-overview-bonus-moment > strong {
  color: var(--lineup-clay);
  font: 700 9px/1 var(--lineup-font-data);
}
.v4-overview-bonus-moment > span {
  display: block;
  margin: 0;
  color: var(--lineup-text-soft);
  font: 600 9px/1.3 var(--lineup-font-data);
  overflow-wrap: anywhere;
}
.v4-overview-empty { padding: 10px 0; color: var(--lineup-muted); font-size: 11px; }
.v4-audit-parity {
  margin-top: 18px;
  padding-top: 15px;
  border-top: 1px solid var(--lineup-line-strong);
}
.v4-audit-group + .v4-audit-group { margin-top: 15px; }
.v4-audit-group > h4 {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  padding-bottom: 7px;
  color: var(--lineup-text-soft);
  font-size: 13px;
}
.v4-audit-group > h4 span { color: var(--lineup-muted); font: 700 11.5px/1 var(--lineup-font-data); }
.v4-audit-list { display: grid; border-top: 1px solid var(--lineup-line); }
.v4-audit-row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) minmax(0, 1.15fr) auto; /* px minimums overflowed a 458px column */
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 7px 0;
  border-bottom: 1px solid var(--lineup-line);
}
.v4-audit-row > span:first-child { color: var(--lineup-clay); font: 700 11.5px/1.25 var(--lineup-font-data); }
.v4-audit-row > strong,
.v4-audit-row > small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.v4-audit-row > strong { color: var(--lineup-text-soft); font-size: 11.5px; }
.v4-audit-row > small { color: var(--lineup-muted); font-size: 11.5px; }
@media (max-width: 600px) {
  .v4-overview-block { padding: 12px; }
  .v4-overview-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .v4-overview-summary-item { padding-block: 8px 3px; }
  .v4-overview-summary-item:nth-child(4) { padding-left: 0; border-top: 1px solid var(--lineup-line); }
  .v4-overview-summary-item:nth-child(5) { border-top: 1px solid var(--lineup-line); }
  .v4-overview-player-row { grid-template-columns: 35px minmax(0, 1fr) 52px; gap: 7px; }
  .v4-overview-player-ovr strong { font-size: 14px; }
  .v4-overview-cheer-row { grid-template-columns: 42px minmax(0, 1fr) auto; gap: 7px; }
  .v4-audit-row { grid-template-columns: 58px minmax(0, 1fr) auto; gap: 7px; }
  .v4-audit-row > small { grid-column: 2 / -1; white-space: normal; line-height: 1.35; }
  .v4-overview-bonus-block > header.v4-overview-bonus-heading {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .v4-overview-bonus-sources { grid-template-columns: 1fr; }
  .v4-overview-bonus-source, .v4-overview-bonus-source:nth-child(even) { padding-right: 0; padding-left: 0; border-left: 0; }
  .v4-overview-bonus-moment-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; row-gap: 6px; }
}@media (max-width: 360px) {
  .v4-overview-bonus-moment-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

}
/* Team Sheet desktop balance: use weighted Grid tracks without changing intrinsic row sizing. */
@media (min-width: 841px) {
  #rosterOverviewContent > .roster-overview-unit:nth-child(2) {
    display: grid;
    grid-template-rows: auto minmax(min-content, 5fr) minmax(min-content, 7fr);
    align-self: stretch;
  }
  #rosterOverviewContent > .roster-overview-unit:nth-child(2) > .roster-overview-group {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-height: 0;
  }
  #rosterOverviewContent > .roster-overview-unit:nth-child(2) > .roster-overview-group:nth-child(2) > .roster-overview-list {
    display: grid;
    grid-template-rows: repeat(5, minmax(43px, 1fr));
  }
  #rosterOverviewContent > .roster-overview-unit:nth-child(2) > .roster-overview-group:nth-child(3) > .roster-overview-list {
    display: grid;
    grid-template-rows: repeat(7, minmax(43px, 1fr));
  }
}@media (max-width: 760px) {
  .picker-modal-filters {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 7px;
    padding: 10px 15px;
  }
  .picker-primary-filters {
    display: grid;
    grid-column: 1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }
  .picker-modal-filters .select-field select,
  .advanced-filters summary {
    width: 100%;
  }
  .advanced-filters,
  .advanced-filters[open] {
    grid-column: 1;
  }
  .advanced-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-inline: 15px;
  }
  .picker-card {
    grid-template-columns: 46px minmax(0, 1fr) 48px;
    grid-template-areas:
      "art main ovr"
      "art main action";
    column-gap: 8px;
    row-gap: 3px;
    padding: 7px 8px;
  }
}

/* v4-select.js swaps the five native <select>s for the shared .v4-select-* dropdown (styles come from
   encyclopedia-redesign-v4). Keep the deck picker at the ribbon's 40px control height; the picker-modal
   filters already sat at 44px, which is the shared --control-height default. */
.lineup-v4 .deck-select-field.v4-control {
  --control-height: 38px; /* + 2px border = the 40px the native select had */
}
.lineup-v4 .v4-select-trigger {
  font-size: 14px;
}

/* Filled slot card: keep the Live OVR badge clear of the absolute × remove button. */
.lineup-v4 .slot-card.is-filled .slot-head {
  padding-right: 30px;
}

/* The base .v4-image-fallback rule sets display: grid, which beats the UA style for [hidden]. Honour the attribute. */
.v4-image-fallback[hidden] {
  display: none;
}

/* Phone slot cards use a two-column grid (art | player). The cheer row is appended after the player block, so give it
   the full card width instead of letting it fall into the 52px art column, where stars covered the remove button
   and "＋配置應援" was cut to "＋配…". Desktop slots are single-column, so spanning is harmless there. */
.lineup-v4 .slot-card > .v4-slot-cheer {
  grid-column: 1 / -1;
}

/* Player picker rows: fewer boxes. The art and OVR lose their frames, OVR + action stack on the right, and the
   team colour stays as the thin left edge. The phone grid already declared "art main ovr / art main action"
   areas but never assigned them, so "放入" dropped onto its own row under the art. */
.lineup-v4 .picker-card {
  grid-template-columns: 52px minmax(0, 1fr) auto;
  grid-template-areas:
    "art main ovr"
    "art main action";
  column-gap: 12px;
  row-gap: 2px;
  padding: 10px 12px 10px 10px;
  background: transparent;
}
.lineup-v4 .picker-card > .v4-picker-art { grid-area: art; align-self: center; }
.lineup-v4 .picker-card > .picker-card-main { grid-area: main; align-self: center; }
.lineup-v4 .picker-card > .v4-picker-ovr { grid-area: ovr; align-self: end; }
.lineup-v4 .picker-card > .picker-card-action { grid-area: action; align-self: start; }
.lineup-v4 .v4-picker-art {
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 12px;
  background: color-mix(in srgb, var(--team-color, var(--lineup-surface-soft)) 18%, var(--lineup-surface));
}
.lineup-v4 .v4-picker-ovr {
  min-width: 0;
  min-height: auto;
  padding: 0;
  border: 0;
  justify-items: end;
}
.lineup-v4 .v4-picker-ovr small { font-size: 9.5px; }
.lineup-v4 .v4-picker-ovr strong { font-size: 20px; }
.lineup-v4 .picker-card-action {
  justify-self: end;
  min-width: 0;
  min-height: auto;
  padding: 0;
  border-left: 0;
  font-size: 12.5px;
}
.lineup-v4 .picker-card-top strong { font-size: 15px; }
.lineup-v4 .picker-card-meta,
.lineup-v4 .picker-card-foot { font-size: 12.5px; }
.lineup-v4 .picker-card:hover:not(:disabled) { background: color-mix(in srgb, var(--lineup-clay) 8%, transparent); }

/* Slot cards show all five abilities of the role (力量/打擊/跑壘/守備/傳球 or 體力/控球/球威/精神/球種) as a
   five-column strip under the player — the same pattern as the player encyclopedia cards. */
.lineup-v4 .slot-card.v4-slot-ready > .slot-head { grid-column: 1 / -1; grid-row: 1; }
.lineup-v4 .slot-card.v4-slot-ready > .v4-slot-art { grid-column: 1 / -1; grid-row: 2; }
.lineup-v4 .slot-card.v4-slot-ready > .slot-player { grid-column: 1 / -1; grid-row: 3; }
.lineup-v4 .slot-card.v4-slot-ready > .v4-slot-statboard { grid-column: 1 / -1; grid-row: 4; }
.lineup-v4 .slot-card.v4-slot-ready > .v4-slot-cheer { grid-column: 1 / -1; grid-row: 5; }
.lineup-v4 .v4-slot-statboard {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 8px 0 0;
  padding: 7px 0 6px;
  border-top: 1px solid color-mix(in srgb, var(--lineup-line) 80%, transparent);
}
.lineup-v4 .v4-slot-stat {
  display: grid;
  justify-items: center;
  row-gap: 2px;
  min-width: 0;
}
.lineup-v4 .v4-slot-stat small { color: var(--lineup-muted); font-size: 10.5px; line-height: 1; }
.lineup-v4 .v4-slot-stat b {
  color: var(--lineup-text);
  font: 700 14px/1 var(--lineup-font-data);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 840px) {
  .lineup-v4 .slot-card.v4-slot-ready {
    grid-template-columns: 64px minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    column-gap: 10px;
  }
  /* Bigger art with the team logo laid over its corner instead of floating far above the player. */
  .lineup-v4 .slot-card.v4-slot-ready > .v4-slot-art {
    grid-column: 1;
    grid-row: 2;
    align-self: center;
    width: 64px;
    height: 84px;
    margin: 6px 0 0;
  }
  .lineup-v4 .slot-card.v4-slot-ready .v4-slot-team-mark { top: 0; left: 0; width: 20px; height: 20px; }
  /* Text sits beside the art, vertically centred. */
  .lineup-v4 .slot-card.v4-slot-ready > .slot-player {
    grid-column: 2;
    grid-row: 2;
    align-self: center;
    align-content: center;
    padding-left: 0;
  }
  .lineup-v4 .slot-card.v4-slot-ready > .v4-slot-statboard { grid-row: 3; }
  .lineup-v4 .slot-card.v4-slot-ready > .v4-slot-cheer { grid-row: 4; }
  .lineup-v4 .v4-slot-stat small { font-size: 9.5px; }
  .lineup-v4 .v4-slot-stat b { font-size: 13px; }
}

/* Team Sheet: larger text inside the same 48px rows, so the sheet does not grow. */
.lineup-v4 .roster-overview-dialog .roster-overview-main strong { font-size: 14px; line-height: 1.25; }
.lineup-v4 .roster-overview-dialog .roster-overview-main span { font-size: 11px; line-height: 1.35; }
.lineup-v4 .roster-overview-dialog .roster-overview-position { font-size: 11px; }
.lineup-v4 .roster-overview-dialog .roster-overview-ability small { font-size: 10px; line-height: 1.2; }
.lineup-v4 .roster-overview-dialog .roster-overview-ability strong { font-size: 13px; line-height: 1.2; }
.lineup-v4 .roster-overview-dialog .roster-overview-rating small { font-size: 8px; }
.lineup-v4 .roster-overview-dialog .roster-overview-rating strong { font-size: 16px; }
.lineup-v4 .roster-overview-dialog .v4-overview-bonus-source h4 { font-size: 13px; }
.lineup-v4 .roster-overview-dialog .v4-overview-bonus-role span,
.lineup-v4 .roster-overview-dialog .v4-overview-bonus-role strong { font-size: 12px; }
.lineup-v4 .roster-overview-dialog .v4-overview-bonus-moment strong,
.lineup-v4 .roster-overview-dialog .v4-overview-bonus-moment span { font-size: 12px; }

/* Team Sheet header: the 採計 / 本隊 / FA / 中華隊 / 外援 / 合計 summary was the smallest text on the sheet. */
.lineup-v4 .roster-overview-header .roster-overview-header-meta {
  font-size: 12px;
  line-height: 1.4;
}

/* Player picker: a larger frame, year / team columns as wide as their 220px dropdown menus, and menus tall enough
   to list every team without an inner scroll. v4-select.js opens a menu from the trigger's right edge whenever it
   would otherwise cross the dialog edge (.is-align-end). */
@media (min-width: 761px) {
  .lineup-v4 .picker-dialog {
    width: min(1120px, 100%);
    max-height: min(920px, calc(100dvh - 48px));
  }
  .lineup-v4 .picker-modal-filters {
    grid-template-columns: minmax(0, 1fr) minmax(170px, 200px) minmax(220px, 240px);
  }
}
.lineup-v4 .picker-dialog .v4-select-menu {
  min-width: 100%;
  max-height: min(420px, 60dvh);
}
.lineup-v4 .v4-control.is-align-end .v4-select-menu {
  left: auto;
  right: 0;
}

/* 「已 FA 到本隊」 checkbox on every player not on the deck's team (parity-adapter.js renderFaTransfers).
   Pending = clay outline, done = green fill; the slot's status line (FA 採計 / 外援 / …) turns green with it. */
.lineup-v4 .slot-player > .v4-slot-fa-wrap {
  display: block;
  overflow: visible;
  white-space: normal;
  line-height: 1.2;
}
.lineup-v4 .v4-slot-fa {
  display: inline-grid;
  grid-template-columns: 12px auto;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  margin: 2px 0 1px;
  padding: 2px 9px 2px 6px;
  border: 1px solid color-mix(in srgb, var(--lineup-clay) 60%, transparent);
  border-radius: 999px;
  background: transparent;
  color: var(--lineup-clay);
  font: 700 11.5px/1.2 var(--lineup-font-body);
  cursor: pointer;
}
.lineup-v4 .v4-slot-fa:hover { background: var(--lineup-clay-soft); }
.lineup-v4 .v4-slot-fa:focus-visible { outline: 2px solid var(--lineup-clay); outline-offset: 2px; }
.lineup-v4 .v4-slot-fa-box {
  display: grid;
  place-items: center;
  width: 12px;
  height: 12px;
  border: 1.5px solid currentColor;
  border-radius: 3px;
  font: 800 10.5px/1 var(--lineup-font-data);
}
.lineup-v4 .v4-slot-fa.is-done {
  border-color: var(--lineup-green);
  background: var(--lineup-green-soft);
  color: var(--lineup-green);
}
.lineup-v4 .v4-slot-fa.is-done .v4-slot-fa-box { background: var(--lineup-green); color: var(--lineup-surface); }
.lineup-v4 .v4-slot-fa.is-done .v4-slot-fa-box::after { content: "✓"; }
.lineup-v4 .v4-slot-fa-note { display: block; color: var(--lineup-muted); font-size: 10.5px; }
/* Phone slots give the player column about 85px, so 「已 FA 到本隊」 broke onto two lines; show 「已 FA」 there. */
@media (max-width: 840px) {
  .lineup-v4 .v4-slot-fa { white-space: nowrap; }
  .lineup-v4 .v4-slot-fa-tail { display: none; }
}
.lineup-v4 .slot-card.is-fa-done .slot-status { color: var(--lineup-green); }

/* Dashboard 「FA 券估算」: the summary strip hides every metric note, but once the lineup has FA cards the note is the
   FA progress (已 FA 1/5 · 還需 80 張), so show it inline after the ticket count. */
.lineup-v4 .metric-card > small.v4-fa-note.is-fa-progress {
  display: block;
  min-width: 0;
  min-height: auto;
  margin: 0;
  color: var(--lineup-clay);
  font-size: 11.5px;
  font-weight: 700;
}
.lineup-v4 .metric-card:has(> .v4-fa-note.is-fa-progress) { gap: 6px; }
.lineup-v4 .metric-card > small.v4-fa-note.is-fa-complete { color: var(--lineup-green); }

/* Team Sheet: 待 FA / 已 FA tag after the player name (inline, so the 48px rows keep their height). */
.lineup-v4 .v4-overview-fa {
  display: inline; /* inline padding / border do not grow the line box */
  margin-left: 6px;
  padding: 1px 6px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  vertical-align: 1px;
}
.lineup-v4 .v4-overview-fa.is-pending { color: var(--lineup-clay); }
.lineup-v4 .v4-overview-fa.is-done { color: var(--lineup-green); }
/* FA quota reached: the unchecked rest read 外援, in the colour the audit list uses for 外援. */
.lineup-v4 .v4-overview-fa.is-external { color: var(--lineup-gold); }

/* 牌組條件 rows: the 70px level column wrapped 「已達成 24 / 12」 onto two lines (iPhone fonts run wider). 88px fits it
   and keeps every row's columns aligned; max-content is only a safety net for unusually wide text. */
.lineup-v4 .rule-row { grid-template-columns: minmax(88px, max-content) minmax(0, 1fr); }
.lineup-v4 .rule-state { white-space: nowrap; }

/* Larger type on phones: the slot head (SP1 + 先發投手 + 即時 OVR + ×) shares ~115px, so keep the micro OVR label
   compact and the gaps tight so the position name still fits, and let the team / series lines wrap instead of
   cutting 「2020 · 特殊投手-SP」 short. */
@media (max-width: 840px) {
  .lineup-v4 .slot-card .slot-head { gap: 4px; }
  .lineup-v4 .slot-card .v4-slot-rating small { font-size: 8px; letter-spacing: .06em; }
  /* keep-all: break at the spaces around 「/」 and 「·」, not inside 鑽石 or a team name */
  .lineup-v4 .slot-card .slot-player > span { white-space: normal; word-break: keep-all; overflow-wrap: anywhere; }
}

/* Desktop slot cards: every card in a visual row shares the same five row tracks (head / art / player / abilities /
   cheer) through subgrid, so names start right under the art and the ability strips line up across the row, however
   much a single card holds (the FA checkbox, a two-line cheer). Phones (≤840px) use their own side-by-side layout. */
@media (min-width: 841px) {
  .lineup-v4 .slot-grid > .slot-card {
    grid-row: span 5;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
  .lineup-v4 .slot-grid > .slot-card > .slot-empty { grid-row: 2 / -1; }
  .lineup-v4 .slot-card.v4-slot-ready > .slot-player { align-content: start; }
  .lineup-v4 .slot-card.v4-slot-ready > .v4-slot-statboard,
  .lineup-v4 .slot-card.v4-slot-ready > .v4-slot-cheer { align-self: start; }
}

/* Desktop slot card layout (from the owner's mockup): the head holds 「2B 二壘手」, vertically centred against × and
   the 「已 FA 到本隊」 checkbox; 即時 OVR sits to the right of the team / series lines. bootstrap.js and
   parity-adapter.js move the OVR and the checkbox here at this breakpoint; phones keep their own layout. */
@media (min-width: 841px) {
  /* One 28px band: the head is 28px tall from the card padding edge, × is 28px at the same top, and the checkbox is a
     fixed 24px pill centred in it, so 2B, 二壘手, 已 FA 到本隊 and × share one centre line whatever the font. */
  .lineup-v4 .slot-card .slot-head { align-items: center; min-height: 28px; }
  .lineup-v4 .slot-card > button[data-remove-slot] { top: 10px; width: 28px; height: 28px; }
  .lineup-v4 .slot-head > .v4-slot-fa-wrap { grid-column: 3; align-self: center; justify-self: end; line-height: 0; }
  .lineup-v4 .slot-head .v4-slot-fa { height: 24px; min-height: 24px; margin: 0; padding-block: 0; }
  .lineup-v4 .slot-card.v4-slot-ready > .slot-player { grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; }
  .lineup-v4 .slot-card.v4-slot-ready > .slot-player > * { grid-column: 1; }
  .lineup-v4 .slot-card.v4-slot-ready > .slot-player > strong { grid-column: 1 / -1; }
  .lineup-v4 .slot-card.v4-slot-ready > .slot-player > span { white-space: normal; word-break: keep-all; overflow-wrap: anywhere; }
  .lineup-v4 .slot-card.v4-slot-ready > .slot-player > .v4-slot-rating {
    grid-column: 2;
    grid-row: 2 / span 2;
    align-self: center;
    overflow: visible;
    color: var(--lineup-gold);
  }
  .lineup-v4 .slot-player > .v4-slot-rating small { font-size: 10px; }
  /* `.slot-player strong` (the player name) would otherwise turn the number white at name weight */
  .lineup-v4 .slot-player > .v4-slot-rating strong { color: var(--lineup-gold); font: 700 20px/.95 var(--lineup-font-data); }
}

/* Narrow desktop cards (≈1024px windows): 「2B 二壘手」 + the full 「已 FA 到本隊」 + × do not fit one line, so the
   checkbox shortens to 「已 FA」 (as on phones), then tightens; on the narrowest cards the Chinese position name, which
   repeats the 2B / SP1 code, gives way to the checkbox. The query container is the head, not the card: containment on
   the card would stop it from being a subgrid and break the row alignment above. Widths are the head's content box
   (card minus the 30px kept for ×). */
@media (min-width: 841px) {
  .lineup-v4 .slot-card .slot-head { container-type: inline-size; column-gap: 4px; }
}
@container (max-width: 181px) {
  .lineup-v4 .slot-head .v4-slot-fa-tail { display: none; }
}
@container (max-width: 141px) {
  .lineup-v4 .slot-head:has(.v4-slot-fa-wrap) .slot-name { font-size: 10.5px; }
  .lineup-v4 .slot-head .v4-slot-fa { gap: 4px; padding-inline: 4px 6px; font-size: 10.5px; }
}
@container (max-width: 128.5px) { /* compact RP7 + 後援投手 + 已 FA needs 129px */
  .lineup-v4 .slot-head:has(.v4-slot-fa-wrap) .slot-name { display: none; }
}

/* Optical centring in the slot head. Measured ink (Windows fonts): the Bahnschrift 「C」 sat 0.8px above the
   Microsoft JhengHei 「捕手」 beside it, so the code drops 1px to share its centre. */
@media (min-width: 841px) {
  .lineup-v4 .slot-card .slot-code { position: relative; top: 1px; }
}
/* The remove button's ring and cross are painted by two pseudo-elements on the same box, so they are concentric by
   construction. (The 「×」 glyph sat ~1px low; a cross positioned against the CSS border still drifted by up to a pixel
   because the border and the cross were snapped to the pixel grid separately on cards with fractional widths.) The
   CSS border is dropped (the ring replaces it); the glyph is hidden and the 「移除 …」 aria-label remains. Both masks are
   drawn on a 28×28 canvas at 100% of the box: with the desktop shell zoomed 1.04 the button is 29.12px, and a 12px
   cross mask was rounded to the pixel grid on its own and landed about half a pixel left of the ring. */
.lineup-v4 .slot-card > button[data-remove-slot] { font-size: 0; border: 0; }
.lineup-v4 .slot-card > button[data-remove-slot]::before,
.lineup-v4 .slot-card > button[data-remove-slot]::after {
  content: "";
  position: absolute;
  inset: 0; /* the whole 28px button: same box for both layers */
  pointer-events: none;
}
.lineup-v4 .slot-card > button[data-remove-slot]::before {
  background: var(--lineup-line);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='13.5' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='13.5' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.lineup-v4 .slot-card > button[data-remove-slot]:hover::before { background: var(--lineup-danger); }
.lineup-v4 .slot-card > button[data-remove-slot]::after {
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M9.75 9.75l8.5 8.5M18.25 9.75l-8.5 8.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M9.75 9.75l8.5 8.5M18.25 9.75l-8.5 8.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}