:root {
  color-scheme: dark;
  --bg: #050b13;
  --bg-deep: #03070d;
  --band: #071320;
  --panel: #081523;
  --panel-2: #0a1828;
  --panel-3: #0e2035;
  --line: #243d5a;
  --line-soft: rgba(96, 132, 177, .22);
  --text: #f3f7ff;
  --muted: #8ea6c4;
  --soft: #b7c7dd;
  --accent: #7eb7ff;
  --accent-2: #9ecbff;
  --primary-hover-fill: rgba(117, 187, 255, .16);
  --warn: #ffd166;
  --bad: #ff6b7a;
  --ink: #03070d;
  --confirmed: #7cffb2;
  --live: #ffd166;
  --postponed: #ff6b7a;
  --good: #35e3a4;
  --line-strong: #2f527a;
  --pos: #35e3a4;
}

/* Desktop shares Late Swap's charcoal palette. Component declarations consume
   these tokens directly; their fallbacks preserve the existing mobile palette.
   The app's viewport check keeps phone colors through rotation and screen changes. */
@media (min-width: 641px) {
  :root.desktop-palette {
    --bg: #080b0f;
    --bg-deep: #080b0f;
    --band: #0b0e13;
    --panel: #10141a;
    --panel-2: #10141a;
    --panel-3: #171e27;
    --line: #2a313c;
    --line-soft: #252d37;
    --line-strong: #3a4656;
    --text: #f1f5fb;
    --muted: #a1adbc;
    --soft: #bdc7d4;
    --accent: #75bbff;
    --primary-hover-fill: var(--accent);
    --ink: #080b0f;
    --surface-page: #080b0f;
    --surface-base: #0b0e13;
    --surface-raised: #10141a;
    --surface-field: #0e1319;
    --surface-hover: #171e27;
    --surface-selected: #17222e;
    --control-line: #3a4656;
    --control-accent: #75bbff;
    --foreground: #f1f5fb;
    --foreground-soft: #bdc7d4;
    --foreground-muted: #a1adbc;
    --foreground-dim: #697583;
    /* Preserve opacity for backdrops, borders, shadows and subtle fills. */
    --control-accent-rgb: 117, 187, 255;
    --control-line-rgb: 58, 70, 86;
    --foreground-rgb: 241, 245, 251;
    --foreground-soft-rgb: 189, 199, 212;
    --surface-base-rgb: 11, 14, 19;
    --surface-field-rgb: 14, 19, 25;
    --surface-hover-rgb: 23, 30, 39;
    --surface-raised-rgb: 16, 20, 26;
    --surface-selected-rgb: 23, 34, 46;
    --border-muted: #7d8ea6;
    --border-muted-rgb: 125, 142, 166;
    --data-positive: var(--accent);
    --chart-fill: #75bbff;
    --chart-track: #596575;
  }
  /* Selected navigation uses Build's outline treatment without a filled panel. */
  :root.desktop-palette .calendar-grid button.selected-day,
  :root.desktop-palette .slate-card.active,
  :root.desktop-palette #contestPlanner .ccmd-pool-row.active {
    background: transparent;
    border-color: var(--control-accent);
    box-shadow: none;
  }
}



* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-width: 0;
  overflow-x: hidden;
  background:
    var(--surface-page, linear-gradient(180deg, rgba(59, 119, 178, 0.11), transparent 260px),
    var(--bg));
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
}

button,
input,
select {
  font: inherit;
}

button {
  height: 34px;
  border: 1px solid var(--control-line, #315f87);
  border-radius: 6px;
  background: var(--surface-base, #0d2236);
  color: var(--text);
  font-weight: 760;
  cursor: pointer;
}

button:hover {
  border-color: var(--accent);
}

button.primary {
  background: var(--surface-selected, #1f5f91);
  border-color: var(--control-accent, #83c4ff);
}

input,
select {
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-field, #03101c);
  color: var(--text);
  padding: 0 8px;
  outline: none;
}

label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

th,
td {
  border-bottom: 1px solid var(--line-soft);
  padding: 9px 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  font-size: 13px;
}

th {
  color: var(--control-accent, #98c8ff);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0;
  background: var(--surface-base, #061320);
  position: sticky;
  top: 0;
  z-index: 2;
}

tbody tr {
  cursor: pointer;
}

tbody tr:hover,
tbody tr.selected {
  background: var(--surface-hover, #153a5b);
}

.app-shell {
  min-height: 100vh;
}

.topbar {
  min-height: 66px;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  background: var(--surface-base, #061320);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

/* Admin preview badge (owner 7/24). The server stamps <body data-ui-mode=
   "preview"> when the signed-in owner is being served the WORKING TREE **and it
   actually differs from the published snapshot** - so the badge means "what I'm
   looking at is not what members have", not merely "I am an admin". It
   disappears on its own once you publish. Pure CSS - no JS, so it cannot fail to
   render. */
body[data-ui-mode="preview"]::after {
  content: "PREVIEW - unpublished changes";
  position: fixed;
  left: 10px;
  bottom: 10px;
  z-index: 200;
  padding: 5px 10px;
  border-radius: 6px;
  background: var(--warn);
  color: var(--ink);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  pointer-events: none;
  opacity: .92;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .45);
}

/* Update notice (owner 7/24) - shown only after a UI publish, never by default.
   Sticky, but IN NORMAL FLOW (not fixed): it reserves its own height, so it can
   never cover the header or a control, and it avoids the fixed/transform iOS
   scroll traps. z-index sits above page content and far below every modal (300+). */
.update-bar {
  position: sticky;
  top: 0;
  z-index: 95;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  background: var(--accent);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  border-bottom: 1px solid var(--control-accent, #4f9ce0);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}
/* REQUIRED: display:flex above would otherwise beat the [hidden] attribute and
   the bar would show on every load. */
.update-bar[hidden] { display: none; }

.update-bar-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink);
  flex: 0 0 auto;
  opacity: .75;
}

.update-bar-text {
  flex: 1 1 auto;
  min-width: 0;
}

.update-bar-btn {
  flex: 0 0 auto;
  height: 26px;
  padding: 0 14px;
  border: 0;
  border-radius: 6px;
  background: var(--ink);
  color: var(--foreground, #eaf4ff);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.update-bar-btn:hover { background: var(--surface-hover, #0d2233); }

.update-bar-x {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  opacity: .65;
}
.update-bar-x:hover { opacity: 1; background: rgba(var(--surface-hover-rgb, 6, 16, 24), .12); }

@media (max-width: 560px) {
  .update-bar { font-size: 12px; padding: 8px 10px; gap: 8px; }
  .update-bar-btn { padding: 0 10px; }
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

/* Text branding shares the workspace palette and stays readable at small widths. */
.brand-wordmark {
  flex: 0 0 auto;
  white-space: nowrap;
  color: var(--text);
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.045em;
}
.brand-wordmark span {
  color: var(--accent);
  letter-spacing: -0.035em;
}

/* Desktop identity reads as one line; the phone header keeps its compact layout. */
@media (min-width: 951px) and (min-device-width: 641px), (min-width: 641px) and (min-height: 501px) and (min-device-width: 641px) {
  .topbar { grid-template-columns: minmax(max-content, 1fr) minmax(0, auto) auto; }
  .brand-context { display: flex; align-items: center; gap: 12px; min-width: 0; }
  .brand-lockup .brand-wordmark,
  .brand-lockup #appTitle,
  .brand-lockup #runLine { font-size: 14px; line-height: 1.25; white-space: nowrap; margin: 0; }
  .brand-lockup .brand-wordmark,
  .brand-lockup .brand-wordmark span { letter-spacing: normal; }
  .brand-lockup #appTitle { flex-shrink: 0; }
  .brand-lockup #runLine { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1 {
  font-size: 20px;
  line-height: 1.1;
}

h2 {
  font-size: 19px;
  line-height: 1.15;
}

h3 {
  font-size: 14px;
  line-height: 1.15;
}

p {
  color: var(--muted);
  font-size: 13px;
}

.view-tabs,
.status-cluster,
.control-row,
.button-row,
.filter-band {
  display: flex;
  align-items: center;
  gap: 8px;
}

.view-tabs {
  justify-content: flex-end;
  flex-wrap: nowrap;
  min-width: 0;
}

.view-tab {
  min-width: 74px;
}

.header-actions button {
  min-width: auto;
  padding: 0 8px;
  white-space: nowrap;
}

.backend-pill {
  width: auto;
  min-width: 126px;
  border-color: #236b5b;
  color: #c8f7e3;
  white-space: nowrap;
}

.backend-pill.online {
  background: #0b2f32;
  border-color: #279178;
}

.backend-pill.missing-key {
  background: #2c2110;
  border-color: #b88a31;
  color: #ffe0a2;
}

.view-tab.active {
  background: var(--surface-selected, #245b89);
  border-color: var(--accent);
}

.status-cluster {
  justify-content: flex-end;
  flex-wrap: nowrap;
  min-width: 0;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  max-width: 128px;
  border-radius: 6px;
  border: 1px solid var(--line);
  padding: 0 8px;
  color: var(--muted);
  background: var(--surface-base, #071827);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.status-pill.good {
  color: #e9fff9;
  border-color: #0a8f80;
  background: var(--surface-base, #053140);
}

.status-pill.warn {
  color: #ffe0a2;
  border-color: #b88a31;
}

.workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(280px, 16vw, 340px);
  gap: 12px;
  padding: 12px;
}

.left-rail,
.right-rail,
.center-stage {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
}

/* Cap the center column's content at its grid track so wide tables scroll INSIDE
   their shell instead of overflowing onto the right rail on laptop-width screens.
   Grid items default to min-width:auto (min-content), which is what let the 2200px
   player table push the whole center column to 1274px and collide with the rail. */
.center-stage { grid-template-columns: minmax(0, 1fr); }

.right-rail {
  overflow: hidden;
}

.panel,
.toolbar-band,
.filter-band,
.table-shell,
.game-strip {
  background: rgba(var(--surface-base-rgb, 6, 19, 32), 0.98);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.panel {
  overflow: hidden;
}

.panel.compact {
  min-height: 120px;
}

.panel.wide {
  min-height: 360px;
}

.panel-head,
.toolbar-band {
  padding: 14px;
  border-bottom: 1px solid var(--line-soft);
}

.panel-head {
  display: grid;
  gap: 4px;
}

.panel-head.inline-head {
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 12px;
}

.eyebrow {
  color: var(--control-accent, #8cc8ff);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.slate-month-popup {
  position: absolute;
  z-index: 60;
  top: 40px;
  left: 14px;
  right: 14px;
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-base, #061320);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .46);
}

.slate-month-popup[hidden] {
  display: none;
}

.slate-month-popup-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.slate-month-popup-head strong {
  font-size: 13px;
}

.slate-month-popup-close {
  width: 28px;
  min-width: 28px;
  height: 28px;
  padding: 0;
  font-size: 18px;
  line-height: 1;
}

.slate-month-popup-fields {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .8fr);
  gap: 8px;
}

.slate-month-popup-fields label {
  display: grid;
  gap: 5px;
  color: var(--control-accent, #8cc8ff);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.slate-month-popup-fields select {
  width: 100%;
  min-width: 0;
  height: 36px;
  padding: 0 9px;
}

.slate-month-popup-go {
  width: 100%;
  height: 36px;
  border-color: var(--control-line, #3e7ca9);
  background: var(--surface-base, #0b2b43);
  font-weight: 850;
}

.icon-btn {
  width: 34px;
  min-width: 34px;
  padding: 0;
}

.calendar-box {
  margin: 0 14px 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-base, #04111d);
  padding: 10px;
}

.calendar-head {
  display: grid;
  grid-template-columns: 34px 1fr 34px;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  text-align: center;
}

.calendar-title-stack {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.calendar-title-stack span {
  color: var(--control-accent, #8cc8ff);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.calendar-title-stack b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-subtitle {
  margin: 0 0 9px;
  color: var(--foreground-muted, #7fa2c2);
  font-size: 11px;
  line-height: 1.25;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.calendar-grid span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-align: center;
}

.calendar-grid button {
  width: 100%;
  min-width: 0;
  height: 28px;
  padding: 0;
  border-color: var(--control-line, #183957);
  background: var(--surface-base, #030e19);
  font-size: 12px;
}

.calendar-grid button.selected-day {
  border-color: var(--accent);
  background: var(--surface-base, #1d5481);
}

.calendar-grid button.cached-day {
  box-shadow: inset 0 0 0 1px rgba(53, 227, 164, 0.22);
}

.calendar-grid button.today-day {
  color: var(--foreground, #dff2ff);
  border-color: var(--control-line, #386f9c);
}

.calendar-grid button.muted-day {
  color: var(--foreground-muted, #5d7184);
  background: var(--surface-base, #020a12);
}

.calendar-grid button.no-game-day:disabled {
  color: var(--foreground-dim, #3e5061);
  border-color: var(--control-line, #10283d);
  background: var(--surface-base, #020a12);
  opacity: .42;
  cursor: default;
}

.calendar-legend {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 9px;
  color: var(--foreground-muted, #7fa2c2);
  font-size: 10px;
}

.calendar-legend span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.legend-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--surface-base, #2f5576);
}

.legend-dot.selected {
  background: var(--accent);
}

.legend-dot.cached {
  background: var(--accent-2);
}

.legend-dot.today {
  background: var(--surface-base, #91a9c0);
}

.slate-schedule {
  display: grid;
  gap: 10px;
  padding: 0 14px 14px;
}

.slate-schedule-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
}

.slate-schedule-head h3 {
  margin-top: 3px;
  color: var(--text);
}

.saved-pill {
  color: var(--foreground-muted, #8da9c6);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  white-space: nowrap;
}

.schedule-filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.schedule-filters select {
  width: 100%;
  min-width: 0;
  height: 30px;
  padding: 0 8px;
  font-size: 12px;
}

.slate-list {
  display: grid;
  gap: 8px;
  padding: 0 14px 14px;
}

.slate-schedule .slate-list {
  padding: 0;
}

.slate-card,
.game-card,
.build-item {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-raised, #061521);
}

.slate-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 94px;
  gap: 10px;
  align-items: stretch;
  min-height: 94px;
  padding: 11px;
  width: 100%;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  /* Buttons don't grow for overflowing grid content (Chromium), so a long
     slate name bled onto the card below (owner 7/17, the 8-team WNBA name).
     Clip inside the card; the name itself ellipsizes below. */
  overflow: hidden;
}

/* One line + ellipsis: an 8-team WNBA slate name wrapped to two lines and
   overflowed the fixed card height. Full name on hover (title attr). */
.slate-card .slate-main b {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.slate-card.active {
  border-color: var(--accent);
  background: var(--surface-selected, #0c2b45);
}

.slate-card.disabled {
  cursor: not-allowed;
  opacity: 0.78;
}

.slate-card b,
.game-card b {
  display: block;
  font-size: 14px;
}

.slate-card .mini {
  display: block;
  margin-top: 4px;
  line-height: 1.25;
}

.slate-main {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.slate-card-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.slate-card-topline strong {
  display: inline-flex;
  align-items: center;
  height: 22px;
  border: 1px solid var(--control-accent, #6faee2);
  border-radius: 6px;
  padding: 0 7px;
  color: var(--foreground, #e2f2ff);
  background: var(--surface-raised, #123254);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.slate-card-topline .state-chip {
  height: 21px;
  padding: 0 7px;
  font-size: 11px;
  flex-shrink: 0;
}

.slate-title {
  color: var(--text);
  font-size: 15px;
  line-height: 1.2;
  white-space: normal;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.slate-meta {
  color: var(--foreground-muted, #8da9c6);
  font-size: 12px;
  line-height: 1.25;
  white-space: normal;
  overflow-wrap: anywhere;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.slate-counts {
  display: grid;
  grid-template-columns: minmax(88px, 1fr);
  gap: 6px;
  align-items: center;
}

.slate-counts span {
  display: grid;
  place-items: center;
  min-height: 40px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: var(--surface-base, #04111d);
}

.slate-counts b {
  font-size: 13px;
  line-height: 1.05;
}

.slate-counts small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.05;
}

.slate-footnote {
  color: var(--foreground-muted, #789ab8);
  font-size: 11px;
  line-height: 1.3;
}

.mini {
  color: var(--muted);
  font-size: 12px;
}

.metric {
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: var(--surface-raised, #04111d);
  padding: 10px;
}

.metric b {
  display: block;
  font-size: 19px;
}

.metric span {
  color: var(--muted);
  font-size: 12px;
}

.view {
  display: none;
  gap: 12px;
}

.view.active {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
}

/* The scroll shells must be allowed to shrink below their (wide) table content so
   overflow-x:auto actually engages instead of the shell pushing its column wider. */
.table-shell { min-width: 0; }

.game-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(226px, 236px));
  /* Keep wrapped rows tall enough for live footers inside the scroll limit. */
  grid-auto-rows: max-content;
  align-content: start;
  align-items: start;
  justify-content: start;
  gap: 10px;
  padding: 10px 12px;
  max-height: 284px;
  overflow-y: auto;
  overflow-x: hidden;
}

.game-card {
  padding: 9px 12px 8px;
  cursor: pointer;
  min-height: 122px;
  background: var(--surface-raised, #071624);
  border-color: var(--control-line, #1c4669);
  transition: border-color 120ms ease, background 120ms ease;
}

.game-card.selected {
  background: var(--surface-raised, #0a1c2b);
  box-shadow: none;
}

.game-card.confirmed {
  border-color: #2bd17f;
  box-shadow: inset 0 0 0 1px rgba(18, 183, 119, 0.25);
}

.game-card.live {
  border-color: #ffd166;
  box-shadow: inset 0 0 0 1px rgba(214, 161, 29, 0.32);
}

.game-card.delayed {
  border-color: #ff9f43;
  box-shadow: inset 0 0 0 1px rgba(214, 122, 29, 0.32);
}

.game-card.final {
  border-color: var(--control-line, #5b7898);
  box-shadow: none;
}

.game-card.postponed {
  border-color: #ff6b7a;
  box-shadow: inset 0 0 0 1px rgba(227, 77, 91, 0.34);
}

.game-card-top,
.team-line,
.game-footer {
  display: grid;
  align-items: center;
}

.game-card-top.has-game-sim { margin-bottom: 2px; }
.game-sim-row { display: flex; align-items: center; min-height: 18px; margin-bottom: 2px; }
.game-sim-label { display: none; color: #ffd166; font-size: 10px; line-height: 18px; white-space: nowrap; }
.game-sim-light[data-phase="simulating"] + .game-sim-label,
.game-sim-light[data-phase="publishing"] + .game-sim-label { display: inline; }
.game-sim-light {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 24px; width: 24px; height: 18px; min-width: 24px;
  padding: 0; margin: 0; border: 0; border-radius: 4px;
  background: transparent; color: #dce7ef; cursor: help;
}
.game-sim-light i { display: block; width: 8px; height: 8px; border-radius: 50%; background: #54616c; }
.game-sim-light[data-phase="ready"] i { background: #39d98a; box-shadow: 0 0 6px #39d98a55; }
.game-sim-light[data-phase="simulating"] i,
.game-sim-light[data-phase="publishing"] i { background: #ffd166; animation: game-sim-pulse 1.8s ease-in-out infinite; }
.game-sim-light:focus-visible { outline: 1px solid #39d98a; outline-offset: 2px; }
.game-sim-tip { display: none; position: absolute; z-index: 5; top: calc(100% + 5px); left: 0;
  width: max-content; max-width: 180px; padding: 6px 8px; border: 1px solid #374452; border-radius: 5px;
  background: #111820; color: #e9f1f7; font-size: 11px; font-weight: 400; line-height: 1.35; pointer-events: none; }
.game-sim-light:hover .game-sim-tip,.game-sim-light:focus .game-sim-tip { display: block; }
@keyframes game-sim-pulse { 0%,100% { opacity: .45; box-shadow: 0 0 0 0 #ffd16600; } 50% { opacity: 1; box-shadow: 0 0 0 3px #ffd16622; } }
@media (prefers-reduced-motion: reduce) {
  .game-sim-light[data-phase="simulating"] i,.game-sim-light[data-phase="publishing"] i { animation: none; box-shadow: 0 0 0 2px #ffd16644; }
}

.game-time-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.game-card-top {
  grid-template-columns: auto 1fr;
  gap: 8px;
  margin-bottom: 11px;
}

.time-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  width: max-content;
  border: 1px solid var(--control-accent, #6faee2);
  border-radius: 6px;
  padding: 0 8px;
  color: var(--foreground, #e2f2ff);
  background: var(--surface-base, #123254);
  font-size: 11px;
  font-weight: 900;
}

.early-line-badge {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 2px 7px;
  border: 1px solid var(--control-line, #426b94);
  border-radius: 999px;
  color: var(--control-accent, #b8d8f4);
  background: var(--surface-base, #10273d);
  font-size: 10px;
  font-weight: 850;
  white-space: nowrap;
}

.time-badge.live {
  border-color: #ffd166;
  color: #ffe6a3;
  background: #392910;
}

.time-badge.delayed {
  border-color: #ff9f43;
  color: #ffd9ad;
  background: #39200e;
}

.time-badge.final {
  border-color: var(--control-accent, #8fb1d4);
  color: var(--foreground, #e2f2ff);
  background: var(--surface-base, #1c3249);
}

.time-badge.confirmed {
  border-color: #2bd17f;
  color: #c9ffe8;
  background: #063d2a;
}

.time-badge.confirmed::before {
  content: "";
  width: 5px;
  height: 8px;
  margin-right: 5px;
  border-right: 2px solid #6effb5;
  border-bottom: 2px solid #6effb5;
  transform: rotate(45deg);
}

.time-badge.postponed {
  border-color: #ff6b7a;
  color: #ffe1e4;
  background: #4a1820;
}

.weather-note {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  color: var(--foreground-muted, #86a9ca);
  font-size: 11px;
  font-weight: 850;
  text-align: right;
}

.weather-icon {
  display: block;
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
}

.weather-label { display: inline-flex; align-items: center; gap: 4px; line-height: 1; white-space: nowrap; }
.weather-wind { display: inline-flex; align-items: center; gap: 3px; line-height: inherit; white-space: nowrap; }
.weather-wind-icon { width: 12px; height: 12px; flex-basis: 12px; }

.weather-note.empty {
  visibility: hidden;
}


.team-line {
  grid-template-columns: 24px minmax(0, 1fr) 42px;
  gap: 7px;
  min-height: 30px;
  font-size: 16px;
}

.team-line b {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  color: var(--foreground, #f2f8ff);
  font-size: 16px;
  font-weight: 950;
  letter-spacing: 0;
}

/* Live game cards: the team at bat glows gold (Top = away, Bot = home). */
.team-line b.batting {
  color: #e8b34b;
}

/* Bat beside the confirmed check on the side that is hitting. Explicit white
   (owner 7/24) rather than currentColor - it would otherwise inherit the gold
   team name and disappear into it. Sized to sit with the text, not stretch the
   row. */
/* Wide and short, matching the 24x10 viewBox of the horizontal bat (2.4:1) - a
   square box would letterbox it and shrink the bat to fit the height. */
.bat-icon {
  width: 19px;
  height: 8px;
  vertical-align: 0;
  margin-left: 4px;
}
/* Wood tones, not a flat silhouette. Both are light enough to read on the dark
   card - a true dark grip (as on a printed bat icon over white) disappears. */
.bat-icon .bat-barrel { fill: #e0bb87; }
.bat-icon .bat-grip   { fill: #9a7550; }

/* NFL possession: crisp laces and stripes at the existing team-label size. */
.football-icon { width: 22px; height: 13px; flex: 0 0 auto; margin-left: 5px; vertical-align: -2px; }
.football-body { fill: #b8753d; stroke: #f0c18f; stroke-width: 1; }
.football-stripe { fill: none; stroke: #fff3dd; stroke-width: 1.5; }
.football-laces { fill: none; stroke: #fff; stroke-width: 1.2; stroke-linecap: round; }

.team-line strong {
  text-align: right;
}

.team-line strong {
  color: var(--control-accent, #9fd5ff);
  font-size: 16px;
  font-weight: 950;
}

.game-card .team-logo {
  width: 23px;
  height: 23px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.game-card .team-logo img {
  width: 22px;
  height: 22px;
}

.team-logo {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 6px;
  border: 1px solid var(--control-line, #244f73);
  background: var(--surface-base, #081929);
  color: #ff6678;
  font-size: 12px;
  font-weight: 950;
}

.team-logo img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  display: block;
  grid-area: 1 / 1;
}

.team-logo .logo-fallback {
  display: none;
  grid-area: 1 / 1;
}

.team-logo.logo-failed img {
  display: none;
}

.team-logo.logo-failed .logo-fallback {
  display: block;
}

.muted-logo {
  color: var(--foreground-soft, #aabbd0);
}

.ok-dot {
  display: inline-block;
  width: 5px;
  height: 9px;
  margin-left: 4px;
  border-right: 2px solid var(--accent-2);
  border-bottom: 2px solid var(--accent-2);
  transform: rotate(45deg);
  vertical-align: 1px;
}

.game-footer {
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  margin-top: 9px;
  color: var(--foreground-muted, #8fb6d2);
  font-size: 13px;
  line-height: 1.1;
}

.game-footer strong {
  text-align: center;
  color: var(--foreground, #f1f7ff);
  font-size: 13px;
  font-weight: 950;
}

.game-footer span:last-child {
  text-align: right;
}

.game-card.postponed .game-footer strong,
.game-card.postponed .game-footer span:last-child {
  color: #ff8792;
}

.toolbar-band {
  display: grid;
  grid-template-columns: minmax(190px, 260px) minmax(0, 1fr);
  align-items: stretch;
  gap: 14px;
}

.build-command-grid {
  display: grid;
  gap: 10px;
  align-content: end;
}

.build-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  flex-wrap: wrap;
}

.build-actions button {
  height: 30px;
  padding: 0 8px;
  font-size: 12px;
  /* Labels stay on one line; the row wraps whole buttons instead. Without
     this, mid-width windows squeezed "Import DK Entry" into a 3-line tower. */
  white-space: nowrap;
}

.build-actions .square-btn {
  width: 32px;
  min-width: 32px;
  padding: 0;
}

.build-tab-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px;
  background: var(--surface-base, #061320);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.mini-tab {
  height: 28px;
  min-width: 76px;
  padding: 0 9px;
  font-size: 12px;
}

.mini-tab.active {
  border-color: var(--accent);
  background: var(--surface-selected, #205b8c);
}

.stack-size-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.stack-size-tabs .mini-tab {
  min-width: 86px;
}
.row-count {
  margin-left: auto;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.reset-grids-btn {
  height: 28px;
  margin-left: 8px;
  padding: 0 10px;
  font-size: 12px;
  white-space: nowrap;
}

.control-row {
  justify-content: flex-end;
  flex-wrap: wrap;
}

.lineup-title-row {
  display: flex;
  align-items: center;
  /* Wrap: on phones (and narrow center columns) the fill-button strip is
     wider than the panel; without wrap the overflow was clipped by the
     panel's overflow:hidden with no way to reach S1M / Fill / Min Unique. */
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
}

/* The lineup player-filter controls live in the pool toolbar, not this row, but
   the owner asked them to look exactly like Create Contest - so they share the
   rule rather than duplicating its numbers (owner 7/24). */
.lineup-title-row button,
.lineup-player-filter,
.lineup-player-filter-x {
  height: 28px;
  min-width: 86px;
  padding: 0 8px;
  font-size: 12px;
}

.control-row input,
.control-row select {
  width: 130px;
}

.wide-run {
  width: 210px;
  min-width: 210px;
}

.filter-band {
  padding: 10px;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.position-quick-filters {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

.position-chip {
  height: 28px;
  min-width: 36px;
  padding: 0 9px;
  border-color: var(--control-line, #28425f);
  border-radius: 5px;
  background: var(--surface-base, #050f1a);
  color: var(--foreground-soft, #b7c7dd);
  box-shadow: none;
}

.position-chip:hover {
  border-color: var(--control-accent, #5f8ec3);
  color: var(--foreground, #f3f7ff);
}

.position-chip.active {
  border-color: var(--control-accent, #7eb7ff);
  background: var(--surface-selected, #0a1a2d);
  color: var(--foreground, #f4f8ff);
  box-shadow: none;
}

.filter-band input {
  flex: 1;
  min-width: 260px;
}

.filter-band select {
  width: 150px;
}

.filter-band select[hidden] {
  display: none !important;
}

.table-shell {
  max-height: 460px;
  overflow: auto;
}

.player-grid-shell {
  height: clamp(520px, calc(100vh - 320px), 1400px);
  max-height: none;
}

.player-table {
  min-width: 2200px;
  /* Size every column to its content so names ("Pete Crow-Armstrong") and the
     stat/percent columns stop clipping. The base `table` rule is fixed-layout
     (equal ~75px columns for ~45 stats); auto lets narrow numeric columns give
     their width to the wide ones, and the shell scrolls horizontally. */
  table-layout: auto;
}

.table-shell.short {
  max-height: 310px;
  margin: 0 14px 14px;
}

.player-name {
  font-weight: 850;
}

.empty-table-note {
  min-height: 54px;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-weight: 850;
  white-space: normal;
}

.id-chip,
.pos-chip,
.state-chip {
  display: inline-flex;
  align-items: center;
  height: 22px;
  border-radius: 6px;
  border: 1px solid var(--line);
  padding: 0 7px;
  font-size: 12px;
  font-weight: 850;
  color: var(--foreground, #d7edff);
  background: var(--surface-base, #0a243a);
}

/* PROJECTED batting slot ("~4"): our own prediction for a team whose card has
   not posted. Deliberately MUTED and dashed - it must never read as a
   confirmed order (.good, green). A real posted order replaces it. */
.state-chip.projected {
  color: var(--foreground-muted, #8fa6bd);
  border-color: rgba(var(--control-accent-rgb, 143, 166, 189), .40);
  border-style: dashed;
  background: rgba(var(--surface-base-rgb, 143, 166, 189), .07);
  font-weight: 700;
  font-style: italic;
}

.state-chip.good {
  color: #7cffb2;
  border-color: rgba(124, 255, 178, .62);
  background: rgba(30, 155, 95, .14);
}

.state-chip.warn {
  color: #ffd166;
  border-color: rgba(255, 209, 102, .62);
  background: rgba(168, 118, 24, .14);
}

.state-chip.bad {
  color: #ff6b7a;
  border-color: rgba(255, 107, 122, .68);
  background: rgba(179, 47, 64, .14);
}

.number {
  font-variant-numeric: tabular-nums;
}

/* Actual DK score: the real result. Use the bright accent blue (same as the
   checkbox checkmarks) with bold weight so it stands out from the white sim
   numbers, with no background band (matches the rest of the grid). */
.actual-cell {
  color: var(--accent);
  font-weight: 800;
}

.bar {
  height: 6px;
  border-radius: 999px;
  background: var(--surface-base, #04111d);
  border: 1px solid var(--line-soft);
  overflow: hidden;
}

.bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}

.selected-body {
  padding: 10px;
  display: grid;
  gap: 8px;
  min-width: 0;
}
/* Grid items default to min-width:auto (min-content). The game-log table's
   ~336px min-content was forcing .selected-body (and with it the metric grid)
   wider than the ~280px right-rail panel, so the panel's overflow:hidden clipped
   the metrics' right column AND the game log. min-width:0 lets each block shrink
   to the panel width; the wide game log then scrolls inside its own wrapper. */
.selected-body > * { min-width: 0; }

.snapshot-list {
  display: grid;
  gap: 7px;
  padding: 12px 14px 14px;
}

.snapshot-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 34px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: var(--surface-base, #04111d);
  padding: 0 8px;
  font-size: 13px;
}

.snapshot-line span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.selected-top {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-base, #04111d);
  padding: 8px;
}

.team-tile {
  /* owner 8/7 "make bigger" - the tile now carries a face, not a monogram */
  width: 84px;
  height: 84px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--surface-base, #061a2b);
  font-weight: 950;
  color: var(--accent);
}

.team-tile .team-logo {
  width: 58px;
  height: 58px;
  border-radius: 6px;
  background: transparent;
}

.team-tile .team-logo img {
  width: 30px;
  height: 30px;
}

.team-tile .team-logo .logo-fallback {
  font-size: 15px;
}

.metric-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 14px;
}

.selected-body .metric-strip {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 0;
}

.selected-body .metric {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 32px;
  padding: 6px 7px;
  min-width: 0;
  gap: 5px;
}

.selected-body .metric b {
  font-size: 14.5px;
  flex-shrink: 0;
  white-space: nowrap;
}

.selected-body .metric span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.manual-box,
.stack-box,
.recent-box {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-raised, #04111d);
  padding: 10px;
  display: grid;
  gap: 8px;
}

.two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.two-col input {
  width: 100%;
  min-width: 0;
}

.small-action-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.small-action-row button {
  height: 28px;
  font-size: 12px;
  min-width: 0;
  width: 100%;
  padding: 0 6px;
}

.range-line {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 34px;
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.range-line input {
  width: 100%;
  height: 22px;
  padding: 0;
}

/* Range sliders, checkboxes and radios were inheriting accent-color:auto = the OS
   accent (purple on some Windows themes). Pin them all to the app blue so they match
   on every machine (the player-grid select/lock checks were the purple ones). */
input[type="range"], input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }

.impact-line,
.recent-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 34px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  padding: 7px;
  background: var(--surface-base, #061521);
  font-size: 12px;
}

.impact-line span,
.recent-line span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.impact-line b {
  color: var(--text);
}

.donut-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  gap: 10px;
  align-items: center;
}

.donut {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--accent) 0deg, var(--chart-track, #14314d) 0deg);
  border: 4px solid var(--control-line, #245276);
  font-size: 11px;
  font-weight: 900;
}

.split-grid {
  display: grid;
  grid-template-columns: minmax(380px, 1fr) minmax(480px, 1.2fr);
  gap: 12px;
}

.auto-sim-console {
  margin: 0 14px 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-base, #061521);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.auto-sim-console label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
}

.auto-sim-console input[type="time"],
.auto-sim-console select {
  min-height: 28px;
  padding: 4px 8px;
  border-radius: 5px;
  border: 1px solid var(--line-strong);
  background: var(--surface-field, #04111d);
  color: var(--text);
}

.auto-sim-console button {
  min-height: 28px;
  padding: 4px 10px;
}

.auto-sim-toggle input {
  margin: 0;
}

.auto-sim-status {
  margin-left: auto;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.auto-sim-status.on {
  color: var(--good);
}

.auto-sim-status.running {
  color: var(--accent);
}

.auto-sim-status.warn {
  color: var(--warn);
}
.sim-game-list {
  display: grid;
  gap: 8px;
  padding: 14px;
  max-height: 510px;
  overflow: auto;
}

.sim-game-item {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-base, #061521);
  padding: 12px;
  cursor: pointer;
}

.sim-game-item.active {
  border-color: var(--accent);
  background: var(--surface-selected, #0d2e4b);
}

.button-row {
  padding: 12px 14px;
  flex-wrap: wrap;
}

.button-row button {
  min-width: 112px;
}

.score-board {
  margin: 0 14px 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-base, #04111d);
  min-height: 72px;
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.score-board strong {
  display: block;
  font-size: 21px;
}

.lineup-board {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 620px), 1fr));
  gap: 10px;
  padding: 12px;
}

.lineup-board.table-mode {
  display: block;
}


/* Desktop lineup cards: the sole desktop lineup view. */
.lineup-board.compact-lineups {
  display: block;
}

.desktop-compact-lineup-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-top: 0;
  color: var(--muted);
  background: var(--surface-raised, #061320);
  font-size: 12px;
}

.desktop-compact-lineup-tools label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  cursor: pointer;
}

.desktop-compact-lineup-tools-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.desktop-compact-lineup-tools-actions button {
  min-height: 28px;
  padding: 4px 10px;
  border: 1px solid rgba(var(--border-muted-rgb, 63, 155, 255), .55);
  border-radius: 6px;
  color: var(--text);
  background: var(--surface-raised, #0a1d30);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.desktop-compact-lineup-tools-actions button:hover {
  border-color: var(--accent);
  background: var(--surface-hover, #102944);
}

.desktop-compact-lineup-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 410px), 1fr));
  gap: 10px;
  padding-top: 10px;
}

.desktop-compact-lineup-card {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid rgba(var(--border-muted-rgb, 120, 145, 175), .24);
  border-radius: 10px;
  background: var(--surface-raised, #071827);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
  content-visibility: auto;
  contain-intrinsic-size: auto 390px;
}

.desktop-compact-lineup-card:hover,
.desktop-compact-lineup-card.open {
  border-color: rgba(var(--border-muted-rgb, 63, 155, 255), .55);
  background: var(--surface-hover, #0a1d30);
}

.desktop-compact-lineup-head {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.desktop-compact-lineup-use {
  display: inline-flex;
  align-items: center;
  flex: none;
  cursor: pointer;
}

.desktop-compact-lineup-rank {
  min-width: 28px;
  color: var(--control-accent, #6fb3ff);
  font-size: 13px;
  font-weight: 850;
}

.desktop-compact-lineup-total {
  display: flex;
  flex-direction: column;
  min-width: 38px;
}

.desktop-compact-lineup-total small {
  color: var(--foreground-muted, #6d8199);
  font-size: 8.5px;
  letter-spacing: .6px;
}

.desktop-compact-lineup-total b {
  color: var(--foreground, #dceaff);
  font-size: 12.5px;
  white-space: nowrap;
}

.desktop-compact-lineup-total.actual b {
  color: var(--data-positive, #5dcaa5);
}

.desktop-compact-lineup-players {
  margin-top: 7px;
  color: var(--foreground);
  font-size: 12px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}


.desktop-compact-lineup-context {
  margin-top: 7px;
  overflow: hidden;
  color: var(--foreground-muted, #8296ae);
  font-size: 10.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.desktop-compact-lineup-strip {
  display: flex;
  gap: 4px;
  margin-top: 9px;
}

.desktop-compact-lineup-shot {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  aspect-ratio: 1;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  border-radius: 50%;
  background: rgba(255, 255, 255, .05);
}

.desktop-compact-lineup-shot.empty {
  border: 1px dashed rgba(var(--border-muted-rgb, 120, 145, 175), .3);
}

.desktop-compact-lineup-shot .desktop-compact-lineup-shot-img,
.desktop-compact-lineup-shot img,
.desktop-compact-lineup-shot svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.desktop-compact-lineup-roster {
  display: grid;
  gap: 4px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(var(--border-muted-rgb, 120, 145, 175), .18);
}

.desktop-compact-lineup-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 70px 42px;
  align-items: center;
  gap: 8px;
}

.desktop-compact-lineup-roster.has-actual .desktop-compact-lineup-row {
  grid-template-columns: 30px minmax(0, 1fr) 70px 42px 48px;
}

.desktop-compact-lineup-roster-head {
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(var(--border-muted-rgb, 120, 145, 175), .14);
}

.desktop-compact-lineup-roster-head span {
  overflow: hidden;
  color: var(--foreground-muted, #6d8199);
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: .55px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.desktop-compact-lineup-roster-head span:nth-child(n + 3) {
  text-align: right;
}

.desktop-compact-lineup-slot {
  color: var(--foreground-muted, #6d8199);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .5px;
}

.desktop-compact-lineup-name {
  overflow: hidden;
  color: var(--foreground, #dceaff);
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.desktop-compact-lineup-name small {
  margin-left: 5px;
  color: var(--foreground-muted, #7e93ad);
  font-size: 10px;
}

.desktop-compact-lineup-name.muted {
  color: var(--foreground-muted, #6d8199);
}

.desktop-compact-lineup-num {
  color: var(--foreground-soft, #a9c0da);
  font-size: 12px;
  text-align: right;
}

.desktop-compact-lineup-num.actual {
  color: var(--data-positive, #5dcaa5);
}

.muted-cell {
  color: var(--muted);
}

.lineup-table-shell {
  max-height: clamp(460px, calc(100vh - 360px), 1200px);
}

.lineup-table {
  min-width: 1600px;
  table-layout: fixed;
}

/* Main lineup board: column widths by SEMANTIC CLASS, not position - so
   conditional columns (Actual/Finish only on backtest) and reordering can't
   misalign the fixed layout. Select stays :first-child (always column 1). */
.lineup-table th:first-child,
.lineup-table td:first-child { width: 48px; }
.lb-cols .col-entry { width: 86px; }
.lb-cols .col-finish { width: 104px; }
.lb-cols .col-pool { width: 70px; }
.lb-cols .col-contest { width: 230px; }
.lb-cols .col-stack { width: 130px; }
.lb-cols .col-players { width: 620px; }
.lb-cols .col-num { width: 112px; }
/* Legacy positional widths for the OTHER .lineup-table tables (gap report,
   late-swap) that don't use the col-* classes. Excluded from the col-class
   board so its class widths win (nth-child would otherwise out-specify a class). */
.lineup-table:not(.lb-cols) th:nth-child(2),
.lineup-table:not(.lb-cols) td:nth-child(2) { width: 86px; }
.lineup-table:not(.lb-cols) th:nth-child(3),
.lineup-table:not(.lb-cols) td:nth-child(3) { width: 70px; }
.lineup-table:not(.lb-cols) th:nth-child(4),
.lineup-table:not(.lb-cols) td:nth-child(4) { width: 230px; }
.lineup-table:not(.lb-cols) th:nth-child(5),
.lineup-table:not(.lb-cols) td:nth-child(5) { width: 130px; }
.lineup-table:not(.lb-cols) th:nth-child(6),
.lineup-table:not(.lb-cols) td:nth-child(6) { width: 620px; }
.lineup-table:not(.lb-cols) th:nth-child(7),
.lineup-table:not(.lb-cols) td:nth-child(7),
.lineup-table:not(.lb-cols) th:nth-child(8),
.lineup-table:not(.lb-cols) td:nth-child(8),
.lineup-table:not(.lb-cols) th:nth-child(9),
.lineup-table:not(.lb-cols) td:nth-child(9),
.lineup-table:not(.lb-cols) th:nth-child(10),
.lineup-table:not(.lb-cols) td:nth-child(10) { width: 112px; }

.lineup-players-cell {
  white-space: normal;
}

.lineup-table-player-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  align-items: center;
  min-width: 0;
}

.lineup-table-player {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 190px;
  min-width: 0;
  padding: 2px 6px;
  border: 1px solid rgba(var(--control-line-rgb, 64, 124, 177), .42);
  border-radius: 4px;
  background: rgba(var(--surface-raised-rgb, 9, 26, 43), .78);
  color: var(--text);
  line-height: 1.15;
}

.lineup-table-player b {
  flex: 0 0 auto;
  color: var(--control-accent, #89c8ff);
  font-size: 11px;
  font-weight: 850;
}

.lineup-table-player-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lineup-table-player em {
  flex: 0 0 auto;
  color: var(--muted);
  font-style: normal;
  font-size: 11px;
}

.pool-page-toolbar {
  /* Span the full width of the card-view grid instead of dropping into the
     first grid cell (which rendered as an empty top-left "lineup card"). */
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-bottom: 0;
  background: var(--surface-base, #061320);
}

.pool-page-toolbar > div:first-child {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  flex: 1 1 220px;
}

.pool-page-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-left: auto;
}

/* Lineup player filter (owner 7/24): a button in the pool toolbar that opens
   the picker popup. A button, not an input, so a board rebuild cannot steal
   focus mid-type. Highlights while a filter is active. */
/* Matches the standard app button (same as Create Contest / Switch to Table):
   inherits button{height:34px; border:1px solid #315f87; border-radius:6px;
   background:#0d2236}. Only sizing for long names is added here (owner 7/24:
   "outline needs to look like the one on create contest"). */
.lineup-player-filter {
  flex: 0 0 auto;
  max-width: 220px;
  padding: 0 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lineup-player-filter.on {
  border-color: var(--accent);
  color: var(--text);   /* white text; the accent border carries the "active" cue */
}

/* Opener + its own clear button, joined so they read as one control. The clear
   MUST be a separate button - as a glyph inside the opener, clicking it just
   re-opened the popup. */
.lineup-player-filter-wrap {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}
/* When the clear button is present the pair reads as ONE control: square off
   the touching edges and keep the outer corners at the standard 6px. */
.lineup-player-filter-wrap .lineup-player-filter.on {
  border-radius: 6px 0 0 6px;
  border-right-width: 0;
}
.lineup-player-filter-x {
  min-width: 26px;              /* narrow: overrides the shared 86px */
  padding: 0 8px;
  font-size: 15px;
  line-height: 1;
  border-radius: 0 6px 6px 0;   /* outer corner keeps the standard 6px */
  border-color: var(--accent);
  color: var(--text);
}
.lineup-player-filter-x:hover {
  background: rgba(var(--surface-hover-rgb, 117, 187, 255), .18);
}

/* Wider cc-modal for the player list (the stock one is min(430px,92vw)). */
.cc-modal.cc-modal-wide {
  width: min(560px, 94vw);
  /* Rounded shell, same as every other modal here (owner 7/24 "i don't want
     corners"). Left explicit rather than deleted so it cannot drift back. */
  border-radius: 12px;
}
.cc-modal.cc-modal-wide .cc-list {
  max-height: min(52vh, 460px);
  overflow-y: auto;
}
/* Outlines match the standard app button - same as Create Contest (owner 7/24
   "wrong outline on player card", pointing at Create Contest): 6px corners with
   the shared button border/fill, instead of pill chips and faint tinted rows.
   Scoped to THIS popup on purpose - .cc-chip/.cc-opt are shared with the Create
   Contest and build modals and restyling those was not asked for.
   .cc-opt.selected / .cc-chip.selected are declared later in this file, so the
   accent selected state still wins over these. */
/* ROUNDED edges everywhere - same 6px as Create Contest - plus its border and
   fill. (owner 7/24 "i don't want corners": no sharp corners anywhere in this
   popup. The chips are rectangles rather than 999px pills, which is what the
   earlier "square not round" note was about.) */
.cc-modal-wide .cc-chip,
.cc-modal-wide .cc-input,
.cc-modal-wide .cc-select,
.cc-modal-wide .cc-opt,
.cc-modal-wide .cc-actions button {
  border-radius: 6px;
  border: 1px solid var(--control-line, #2a4565);
  background: var(--surface-raised, #071827);
}
/* "Show all" matches "Clear" - no accent fill (owner 7/24 "no need for extra
   color"). Must be set explicitly: the base .cc-primary paints an accent
   background with near-black #041018 text, which on this popup's dark fill was
   invisible. Same dark fill + white text as every other action button here. */
.cc-modal-wide .cc-actions .cc-primary {
  background: var(--surface-raised, #071827);
  border-color: var(--control-line, #2a4565);
  color: var(--text, #f1f8ff);
  font-weight: inherit;
}
.cc-modal-wide .cc-actions .cc-primary:hover {
  background: var(--surface-raised, #071827);
  filter: none;
  border-color: var(--accent, #75bbff);
}
/* Disabled primary ("Show all" with nothing picked) must still be legible. */
.cc-modal-wide .cc-actions .cc-primary:disabled {
  opacity: .55;
  cursor: default;
}


/* Player Search + Sort travel together as ONE group (owner 7/24 "move it next
   to sort"). Without this wrapper the toolbar's space-between pushed them to
   opposite ends of the strip. */
.pool-toolbar-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

/* "filtered from N" note next to the pool count. */
.pool-filter-note {
  color: var(--accent);
  font-size: 12px;
  white-space: nowrap;
}

.pool-page-actions button {
  height: 26px;
  min-width: 54px;
  padding: 0 8px;
  font-size: 12px;
}
/* Card sorter (owner 7/24): metric dropdown + direction toggle in the pool
   toolbar. Sits between the count and the pager (toolbar is space-between). */
.pool-sort {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}
.pool-sort select {
  height: 26px;
  padding: 0 6px;
  font-size: 12px;
}
.pool-sort button {
  height: 26px;
  min-width: 30px;
  padding: 0 8px;
  font-size: 12px;
}
.build-shelf {
  display: grid;
  gap: 8px;
  padding: 14px;
}

.build-item {
  padding: 9px;
}

@media (max-width: 1240px) {
  .workspace { grid-template-columns: minmax(0, 1fr); }
  .right-rail { grid-column: 1 / -1; grid-template-columns: repeat(2, 1fr); }
}

.api-dashboard {
  display: grid;
  gap: 14px;
  padding: 14px;
}

.api-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}

.api-metric-card {
  min-height: 86px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: var(--surface-raised, #071827);
  padding: 12px;
}

.api-metric-card span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.api-metric-card b {
  display: block;
  margin-top: 7px;
  color: var(--text);
  font-size: 19px;
}

.api-metric-card.good { border-color: #249f69; }
.api-metric-card.warn { border-color: #b88a31; }
.api-metric-card.bad { border-color: #c74452; }

.api-source-section {
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  overflow: hidden;
  background: var(--surface-base, #061320);
}

.api-source-title {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line-soft);
}

.api-table-shell {
  overflow: auto;
}

.api-source-table {
  width: 100%;
  min-width: 1120px;
  border-collapse: collapse;
}

.api-source-table th,
.api-source-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
  vertical-align: top;
}

.api-source-table th {
  color: var(--control-accent, #8cc8ff);
  font-size: 11px;
  text-transform: uppercase;
}

.api-condition {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: 6px;
  border: 1px solid var(--line);
  padding: 0 8px;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.api-condition.good {
  color: #c7f9e2;
  border-color: #249f69;
  background: #08251f;
}

.api-condition.warn {
  color: #ffe0a2;
  border-color: #b88a31;
  background: #211808;
}

.api-condition.bad {
  color: #ffb3bd;
  border-color: #c74452;
  background: #260b12;
}

.api-condition.idle {
  color: var(--foreground, #d7edff);
  background: var(--surface-base, #0a243a);
}

.api-endpoint {
  color: var(--control-accent, #b7d9f5);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 12px;
  overflow-wrap: anywhere;
}

.api-link {
  color: var(--control-accent, #8cc8ff);
  font-weight: 900;
  text-decoration: none;
}

/* User preference: keep the app text out of bold weight everywhere. */
body,
body * {
  font-weight: 400 !important;
}

/* Player grid: remove boxed chip/control styling. */
.player-table .id-chip,
.player-table .pos-chip,
.player-table .state-chip {
  display: inline;
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--foreground, #d7edff);
  font-size: 13px;
}

.player-table .state-chip.good {
  color: #7cffb2;
  background: transparent;
}

.player-table .state-chip.warn {
  color: #ffd166;
  background: transparent;
}

.player-table .state-chip.bad {
  color: #ff6b7a;
  background: transparent;
}

.player-table input[type="number"] {
  width: 62px;
  height: auto;
  min-height: 0;
  padding: 0 0 2px;
  border: 0;
  border-bottom: 1px solid rgba(var(--border-muted-rgb, 124, 190, 255), 0.35);
  border-radius: 0;
  background: transparent;
  color: var(--text);
}

.player-table input[type="number"]:focus {
  border-bottom-color: var(--accent);
  outline: none;
  box-shadow: none;
}

/* Player grid sortable headers. */
.player-table th[data-sort-key],
.lineup-table th[data-lineup-sort-key] {
  cursor: pointer;
  user-select: none;
}

.player-table th[data-sort-key]:hover,
.player-table th.sort-active,
.lineup-table th[data-lineup-sort-key]:hover,
.lineup-table th.sort-active {
  color: var(--foreground, #d7edff);
}

.player-table th[data-sort-key]::after,
.lineup-table th[data-lineup-sort-key]::after {
  display: inline-block;
  width: 10px;
  margin-left: 4px;
  color: var(--control-accent, #7fc4ff);
}

.player-table th[data-sort-dir="asc"]::after,
.lineup-table th[data-sort-dir="asc"]::after {
  content: "\25B2";
}

.player-table th[data-sort-dir="desc"]::after,
.lineup-table th[data-sort-dir="desc"]::after {
  content: "\25BC";
}

/* Player grid thin percent bars. */
.percent-cell {
  display: grid;
  gap: 4px;
  min-width: 84px;
}

.percent-value {
  color: var(--text);
  line-height: 1;
}

.percent-bar {
  height: 4px;
  border-radius: 999px;
  background: var(--surface-base, #04111d);
  border: 1px solid var(--line-soft);
  overflow: hidden;
}

.percent-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}



body {
  background: var(--surface-page, linear-gradient(180deg, #06101b 0%, #07111d 46%, #03070d 100%));
  color: var(--text);
}

body::before {
  content: none;
  display: none;
}

.app-shell {
  position: relative;
  z-index: 1;
}

.topbar,
.panel,
.toolbar-band,
.filter-band,
.table-shell,
.game-strip,
.build-tab-row,
.api-source-section,
.api-metric-card,
.metric,
.stack-box,
.selected-top,
.build-item,
.slate-card,
.slate-counts span,
.calendar-box {
  background: var(--surface-base, #071320);
  border-color: var(--line);
  box-shadow: none;
}

.panel.compact,
.panel.wide,
.api-source-title,
.calendar-grid button,
.slate-card-topline strong,
.status-pill,
.metric-strip .metric,
.selected-body .metric,
.lineup-board,
.lineup-table-shell,
.api-table-shell,
.snapshot-line,
.manual-box,
.recent-box {
  background: var(--surface-raised, #050f1a);
  border-color: var(--line-soft);
}

button,
input,
select {
  color: var(--text);
  background: var(--surface-field, #071827);
  border-color: var(--control-line, #2a4565);
}

button:hover,
input:focus,
select:focus {
  border-color: var(--accent);
  box-shadow: none;
}

input:focus, select:focus, textarea:focus {
  outline: none;
}

button.primary,
.view-tab.active,
.mini-tab.active,
.calendar-grid button.selected-day,
.slate-card.active {
  color: var(--foreground, #f4f8ff);
  background: var(--surface-selected, #17385c);
  border-color: var(--control-accent, #6ea6f8);
}

.status-pill,
.backend-pill,
.api-condition,
.slate-card-topline strong {
  color: var(--foreground, #dce9ff);
  background: var(--surface-raised, #0a1a2d);
  border-color: var(--control-line, #395679);
}

.status-pill.good,
.backend-pill.online,
.api-condition.good {
  color: #c9f7e0;
  background: var(--surface-base, #081827);
  border-color: rgba(124, 255, 178, .44);
}

.status-pill.warn,
.backend-pill.missing-key,
.api-condition.warn {
  color: #ffd899;
  background: #14170f;
  border-color: rgba(255, 209, 102, .42);
}

.api-condition.bad,
.api-metric-card.bad {
  color: #ffd9dc;
  border-color: rgba(255, 107, 122, .52);
}

h1,
h2,
h3,
.slate-title,
.player-name,
.team-line b,
.selected-top h3,
.metric b,
.api-metric-card b {
  color: var(--text);
}

p,
.mini,
.slate-meta,
.slate-footnote,
.saved-pill,
.metric span,
.calendar-subtitle,
.calendar-title-stack span,
.game-footer,
.weather-note,
.empty-row,
.player-sub,
.api-metric-card span {
  color: var(--muted);
}

th {
  color: var(--foreground-soft, #9fbde0);
  background: var(--surface-base, #071320);
  border-bottom-color: var(--control-line, #243d5a);
}

td,
.api-source-table td,
.lineup-table td {
  border-bottom-color: rgba(var(--border-muted-rgb, 87, 126, 177), .14);
}

tbody tr:hover,
tbody tr.selected {
  background: rgba(var(--surface-hover-rgb, 126, 183, 255), .09);
}

.player-table th[data-sort-key]:hover,
.player-table th.sort-active,
.lineup-table th[data-lineup-sort-key]:hover,
.lineup-table th.sort-active {
  color: var(--foreground, #e4f1ff);
}

.player-table th[data-sort-key]::after,
.lineup-table th[data-lineup-sort-key]::after {
  color: var(--control-accent, #7eb7ff);
}

.player-table input[type="number"] {
  color: var(--text);
  border-bottom-color: rgba(var(--border-muted-rgb, 126, 183, 255), .34);
}

.player-table input[type="number"]:focus {
  border-bottom-color: var(--accent);
  box-shadow: none;
}

.player-table .id-chip,
.player-table .pos-chip,
.player-table .state-chip {
  color: var(--foreground, #d7edff);
  background: transparent;
  border: 0;
}

.player-table .state-chip.good {
  color: #7cffb2;
  background: transparent;
}

.player-table .state-chip.warn {
  color: #ffd166;
  background: transparent;
}

.player-table .state-chip.bad {
  color: #ff6b7a;
  background: transparent;
}

.game-card {
  background: var(--surface-raised, #071320);
  border-color: var(--control-line, #28425f);
  box-shadow: none;
}

.game-card:hover {
  background: var(--surface-hover, #09192a);
  border-color: var(--control-accent, #557fae);
}

/* Strip cards are informational (click opens the weather modal); no persistent
   "selected" ring here. Game Sims does its own selection via .sim-game-item. */
.game-card.selected {
  background: var(--surface-raised, #071320);
  border-color: var(--control-line, #28425f);
  box-shadow: none;
}

.game-card.confirmed {
  background: var(--surface-raised, #071320);
  border-color: var(--control-line, #28425f);
  box-shadow: inset 0 2px 0 rgba(124, 255, 178, .58);
}

.game-card.confirmed.selected {
  background: var(--surface-raised, #071320);
  border-color: var(--control-line, #28425f);
  box-shadow: inset 0 2px 0 rgba(124, 255, 178, .58);
}

.game-card.live {
  background: var(--surface-raised, #071320);
  border-color: var(--control-line, #28425f);
  box-shadow: inset 0 2px 0 rgba(255, 209, 102, .66);
}

.game-card.live.selected {
  background: var(--surface-raised, #071320);
  border-color: var(--control-line, #28425f);
  box-shadow: inset 0 2px 0 rgba(255, 209, 102, .72);
}

.game-card.delayed,
.game-card.delayed.selected {
  background: var(--surface-raised, #071320);
  border-color: var(--control-line, #28425f);
  box-shadow: inset 0 2px 0 rgba(255, 159, 67, .66);
}

.game-card.final {
  border-color: var(--control-line, #28425f);
  box-shadow: none;
}

.game-card.postponed {
  background: #100d13;
  border-color: var(--control-line, #28425f);
  box-shadow: inset 0 2px 0 rgba(255, 107, 122, .70);
}

.game-card.postponed.selected {
  background: #100d13;
  border-color: var(--control-line, #28425f);
  box-shadow: inset 0 2px 0 rgba(255, 107, 122, .76);
}

.game-card.final.selected {
  background: var(--surface-raised, #071320);
  border-color: var(--control-line, #28425f);
  box-shadow: none;
}

.time-badge {
  color: var(--foreground, #dce9ff);
  background: var(--surface-base, #102038);
  border-color: var(--control-line, #46658d);
}

.time-badge.confirmed,
.game-card.confirmed .time-badge {
  color: #d8fbea;
  background: rgba(8, 48, 36, .55);
  border-color: rgba(124, 255, 178, .70);
}

.time-badge.confirmed::before,
.ok-dot {
  border-right-color: #7cffb2;
  border-bottom-color: #7cffb2;
}

.time-badge.live,
.game-card.live .time-badge {
  color: #ffe4a8;
  background: rgba(70, 45, 13, .58);
  border-color: rgba(255, 209, 102, .80);
}

.time-badge.delayed,
.game-card.delayed .time-badge {
  color: #ffdcb3;
  background: rgba(70, 38, 13, .58);
  border-color: rgba(255, 159, 67, .80);
}

.time-badge.postponed,
.game-card.postponed .time-badge {
  color: #ffd9dc;
  background: rgba(76, 24, 32, .58);
  border-color: rgba(255, 107, 122, .80);
}

.team-line strong,
.game-footer strong,
.api-link {
  color: var(--foreground, #cfe4ff);
}


.team-logo,
.table-logo {
  background: var(--surface-base, #081929);
  border-color: var(--control-line, #244f73);
}

.percent-bar,
.bar-track {
  background: var(--surface-base, #03101c);
  border-color: var(--control-line, #1c344f);
}

.percent-bar span,
.bar-fill {
  background: var(--chart-fill, linear-gradient(90deg, #5a95d6, #9ecbff));
}

.calendar-grid button.cached-day {
  border-color: var(--control-accent, #5a7ca9);
}

.calendar-grid button.today-day {
  color: var(--control-accent, #93c5fd);
}

.slate-card.active {
  color: var(--foreground, #f4f8ff);
  background: var(--surface-selected, #0a1a2d);
  border-color: var(--control-accent, #5f8ec3);
  box-shadow: none;
}

.build-shelf,
.selected-body {
  background: transparent;
}

.tab-section {
  min-height: clamp(520px, calc(100vh - 430px), 760px);
  overflow: hidden;
}

.section-board {
  padding: 12px;
  display: grid;
  gap: 10px;
}

.section-table-shell {
  max-height: clamp(470px, calc(100vh - 330px), 1200px);
  overflow: auto;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: var(--surface-base, #050f1a);
}

.section-table {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
  /* Size columns to content so the wider stat columns (e.g. Team Stacks'
     Lineup Exp / Pool Exp) stop clipping; the base `table` rule is fixed. */
  table-layout: auto;
}

.section-table th,
.section-table td {
  height: 42px;
  padding: 8px 15px;
  border-bottom: 1px solid rgba(var(--border-muted-rgb, 87, 126, 177), .14);
  font-size: 13px;
  vertical-align: middle;
}

.section-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  color: var(--foreground-soft, #9fbde0);
  background: var(--surface-base, #071320);
  text-align: left;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 850;
}

/* Clickable sort headers on the section boards (Team Stacks / Games / Stack
   Shapes) - identical look and behavior to the Players grid. */
.section-table th[data-section-sort] {
  cursor: pointer;
  user-select: none;
}

.section-table th[data-section-sort]:hover,
.section-table th.sort-active {
  color: var(--foreground, #d7edff);
}

.section-table th[data-section-sort]::after {
  display: inline-block;
  width: 10px;
  margin-left: 4px;
  color: var(--control-accent, #7fc4ff);
}

.section-table th[data-section-sort][data-sort-dir="asc"]::after {
  content: "\25B2";
}

.section-table th[data-section-sort][data-sort-dir="desc"]::after {
  content: "\25BC";
}

/* Stadium weather popup (click a game card) */
.weather-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 4vh 16px;
  background: rgba(var(--surface-raised-rgb, 2, 8, 14), 0.72);
  overflow-y: auto;
}

.weather-sheet {
  width: min(860px, 100%);
  max-height: 92vh;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 20px 22px;
}

.weather-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}

.weather-head h2 { margin: 2px 0; }

#wxClose {
  font-size: 22px;
  line-height: 1;
  padding: 4px 12px;
}

.wx-roof {
  border: 1px solid var(--warn);
  border-radius: 10px;
  padding: 8px 12px;
  margin-bottom: 12px;
  color: var(--warn);
  font-size: 13px;
}

.wx-roof.nfl {
  border-color: rgba(var(--control-accent-rgb, 117, 187, 255), 0.45);
  background: rgba(var(--surface-base-rgb, 117, 187, 255), 0.06);
  color: var(--text);
}

.wx-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

.wx-chip {
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 10px 14px;
  min-width: 170px;
}

.wx-chip b { font-size: 20px; margin-right: 6px; }
.wx-chip-label { display: block; font-size: 11px; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.wx-chip-lean { font-size: 12px; font-weight: 700; }
.wx-chip-sub { margin-top: 6px; font-size: 11px; color: var(--muted); }
.wx-chip.good { border-color: rgba(53, 227, 164, 0.55); }
.wx-chip.good .wx-chip-lean, .wx-chip.good b { color: var(--accent-2); }
.wx-chip.cold .wx-chip-lean, .wx-chip.cold b { color: var(--bad); }
.wx-chip.warm { border-color: rgba(255, 209, 102, 0.45); }
.wx-chip.warm .wx-chip-lean, .wx-chip.warm b { color: var(--warn); }
.wx-chip.cool { border-color: rgba(var(--control-accent-rgb, 117, 187, 255), 0.45); }
.wx-chip.cool .wx-chip-lean, .wx-chip.cool b { color: var(--accent); }
.wx-chip.flat .wx-chip-lean, .wx-chip.flat b { color: var(--text); }

.wx-outlooks {
  background: var(--panel-2);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 14px;
}

.wx-outlook-row { padding: 6px 0; }
.wx-outlook-row b { font-size: 13px; }
.wx-outlook-row p { margin: 3px 0 0; color: var(--muted); font-size: 13px; }

.wx-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.wx-metric {
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 8px 12px;
}

.wx-metric span { display: block; font-size: 11px; color: var(--muted); text-transform: uppercase; }
.wx-metric b { font-size: 15px; }

.wx-delay {
  border: 1px solid rgba(53, 227, 164, 0.45);
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 14px;
}

.wx-delay-nums { display: flex; gap: 26px; }
.wx-delay-nums span { display: block; font-size: 11px; color: var(--muted); text-transform: uppercase; }
.wx-delay-nums b { font-size: 20px; color: var(--accent-2); }
.wx-delay p { margin: 6px 0 0; font-size: 13px; color: var(--muted); }

.wx-map { border: 1px solid var(--line-soft); border-radius: 12px; padding: 10px 12px; }
.wx-map-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.wx-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.wx-tab { font-size: 12px; padding: 3px 10px; border-radius: 999px; }
.wx-tab.active { background: var(--accent); color: var(--ink); border-color: var(--accent); }

.wx-map-svg { width: 100%; height: auto; display: block; }

.wx-map-stage {
  position: relative;
  aspect-ratio: 15 / 8;
  overflow: hidden;
  border-radius: 12px;
  background: #07130d;
}

.wx-map-stage .wx-map-svg {
  position: absolute;
  inset: 0;
  height: 100%;
}

.wx-map-base { z-index: 0; }

.wx-sat {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.wx-sat img {
  position: absolute;
  display: block;
}

.wx-map-overlay {
  z-index: 2;
  pointer-events: none;
}

.wx-attr {
  position: absolute;
  right: 8px;
  bottom: 5px;
  z-index: 3;
  font-size: 9px;
  color: rgba(255, 255, 255, 0.55);
}

/* Keep live play below the betting lines; the header remains weather-only. */
.game-live-footer {
  margin-top: 5px;
  padding-top: 4px;
  border-top: 1px solid var(--line-soft);
}

.game-live-footer .live-inning {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  color: var(--text);
  white-space: nowrap;
}

.game-live-footer .outs {
  color: var(--accent);
}

.game-live-footer .bases {
  display: block;
  flex: 0 0 34px;
  margin: 0;
}

.bases {
  display: inline-block;
  width: 34px;
  height: 21px;
  vertical-align: -6px;
  margin-left: 5px;
}

.bases polygon {
  /* Hollow empty bases vs solid bright-green occupied - at scoreboard-chip
     size, dim-green-vs-green was unreadable (explicit colors - some themes
     remap the accent variables). */
  fill: rgba(255, 255, 255, 0.07);
  stroke: rgba(255, 255, 255, 0.45);
  stroke-width: 1;
}

.bases polygon.on {
  fill: #3dff9e;
  stroke: #c8ffe6;
  stroke-width: 1.3;
}

/* Boost column: +/- belief nudge on build projections. */
.boost-ctl {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.boost-btn {
  width: 20px;
  height: 20px;
  min-width: 20px;
  padding: 0;
  font-size: 13px;
  line-height: 1;
  border-radius: 5px;
}

.boost-val {
  min-width: 26px;
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
}

.boost-val.pos {
  color: #3dff9e;
}

.boost-val.neg {
  color: #ff7d6b;
}

/* Keep the checkbox/lock/boost columns snug against the player name. */
.player-table th.select-cell,
.player-table td[data-col="use"],
.player-table th[data-sort-key="lock"],
.player-table td[data-col="lock"],
.player-table th[data-sort-key="boost"],
.player-table td[data-col="boost"] {
  width: 1%;
  padding-left: 9px;
  padding-right: 9px;
  white-space: nowrap;
}

.player-table th[data-sort-key="lock"],
.player-table td[data-col="lock"] {
  width: 46px;
  min-width: 46px;
}

.player-table th[data-sort-key="boost"],
.player-table td[data-col="boost"] {
  width: 94px;
  min-width: 94px;
}

.player-table td[data-col="boost"] .boost-ctl {
  gap: 2px;
}

.player-table td[data-col="boost"] .boost-btn {
  width: 18px;
  height: 18px;
  min-width: 18px;
}

.player-table td[data-col="boost"] .boost-val {
  min-width: 30px;
}

/* Showdown (Captain Mode) slates: CPT Sal column only exists there, and the
   classic roster-position chips collapse to All / B / P. */
.player-table th.showdown-col,
.player-table td.showdown-col {
  display: none;
}

.showdown-slate .player-table th.showdown-col,
.showdown-slate .player-table td.showdown-col {
  display: table-cell;
}

/* On showdown the CPT/UTIL slot toggle appears; the roster-position chips stay
   alongside it (owner 9/17 "need to add per pos ... mlb also"). */
.showdown-slot-tabs {
  display: none;
  gap: 4px;
}

.showdown-slate .showdown-slot-tabs {
  display: inline-flex;
}
.player-use-head {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 34px;
  color: var(--foreground-soft, #9eb4d0);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1;
  cursor: pointer;
}

.player-use-head .section-check {
  margin: 0;
}

/* The active CPT view already puts CPT salary in the main Salary column.
   Do not show the same number twice. FanDuel MVP salary is also unchanged. */
.showdown-slate.showdown-reference-salary-hidden .player-table th.showdown-col,
.showdown-slate.showdown-reference-salary-hidden .player-table td.showdown-col {
  display: none;
}


/* Match the classic position-chip look (square theme). */
.showdown-slot-tab {
  height: 28px;
  min-width: 48px;
  padding: 0 12px;
  border-color: var(--control-line, #28425f);
  border-radius: 5px;
  background: var(--surface-base, #050f1a);
  color: var(--foreground-soft, #b7c7dd);
  box-shadow: none;
  font-weight: 700;
}

.showdown-slot-tab:hover {
  border-color: var(--control-accent, #5f8ec3);
  color: var(--foreground, #f3f7ff);
}

.showdown-slot-tab.active {
  border-color: var(--control-accent, #7eb7ff);
  background: var(--surface-selected, #0a1a2d);
  color: var(--foreground, #f4f8ff);
  box-shadow: none;
}

/* A single-game showdown has nothing to weight game-vs-game, so the Games
   tab is classic-only. Team Stacks and Stack Shapes stay. */
.showdown-slate .mini-tab[data-main-tab="games"] {
  display: none;
}

.wx-map-bg { fill: #07130d; stroke: #12301f; }
.wx-outfield { fill: #0d2417; stroke: #1c4a2e; }
.wx-infield { fill: #17331f; stroke: #285c38; }
.wx-foul { stroke: #cfe8d5; stroke-width: 1.4; opacity: 0.5; }
.wx-plate { fill: var(--foreground, #f1f8ff); }
.wx-football-field > rect { fill: #0d2a1b; stroke: rgba(207, 232, 213, 0.62); stroke-width: 2; }
.wx-football-field > rect.endzone { fill: #123a25; stroke-width: 1; }
.wx-football-field line { stroke: rgba(207, 232, 213, 0.58); stroke-width: 1; }
.wx-football-field text { fill: rgba(var(--foreground-rgb, 241, 248, 255), 0.62); font-size: 10px; }
.wx-arrows line, .wx-arrows path { stroke: var(--accent-2); stroke-width: 2; fill: none; opacity: 0.85; }
.wx-compass circle { fill: rgba(var(--surface-base-rgb, 6, 16, 24), 0.8); stroke: var(--line); }
.wx-compass text { fill: var(--muted); font-size: 9px; }
.wx-compass path { fill: var(--accent); }
.wx-map-chip rect { fill: rgba(var(--surface-base-rgb, 6, 16, 24), 0.85); stroke: var(--line-soft); }
.wx-map-chip text { fill: var(--text); font-size: 13px; }

.section-table tbody tr:hover {
  background: rgba(var(--surface-hover-rgb, 126, 183, 255), .09);
}

.section-table .percent-cell {
  min-width: 150px;
}

/* Working section controls */
.select-cell {
  width: 42px;
  min-width: 42px;
  text-align: center;
}

.section-table th.select-cell,
.section-table td.select-cell,
.lineup-table th.select-cell,
.lineup-table td.select-cell {
  width: 42px;
  min-width: 42px;
  text-align: center;
}

.section-check {
  width: 14px;
  height: 14px;
  accent-color: var(--control-accent, #78b7ff);
  cursor: pointer;
}

.section-exposure-input,
.section-pool-count-input,
.exposure-input-cell input {
  width: 76px;
  min-width: 64px;
  height: 30px;
  border: 1px solid var(--control-line, #244b70);
  border-radius: 6px;
  background: var(--surface-field, #071421);
  color: var(--foreground, #d7ecff);
  text-align: center;
  font: inherit;
}

.section-pool-count-input {
  width: 92px;
  min-width: 82px;
  border-color: var(--control-line, #3d79ad);
}

.pool-count-input-cell {
  min-width: 104px;
}

.section-exposure-input:disabled {
  cursor: not-allowed;
  opacity: 0.38;
}

.section-row-disabled {
  opacity: 0.45;
}

.section-row-disabled td {
  color: var(--foreground-muted, #7e90a5);
}

/* Player grid exposure boxes match section tables */
.player-table input[type="number"] {
  width: 76px;
  min-width: 64px;
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--control-line, #244b70);
  border-radius: 6px;
  background: var(--surface-field, #071421);
  color: var(--foreground, #d7ecff);
  text-align: center;
  font: inherit;
  box-shadow: none;
}

.player-table input[type="number"]:focus {
  border-color: var(--control-accent, #78b7ff);
  outline: none;
  box-shadow: none;
}
/* Compact build controls: remove tall build console band */
.compact-build-row {
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  min-height: 44px;
}

.build-tabs {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 0 1 auto;
  flex-wrap: wrap;
  min-width: 0;
}

.compact-build-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 1 auto;
  flex-wrap: wrap;
  min-width: 0;
  margin-left: auto;
}

.strategy-template-controls {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  padding-right: 10px;
  margin-right: 2px;
  border-right: 1px solid rgba(var(--border-muted-rgb, 126, 183, 255), 0.22);
}

.strategy-template-button {
  height: 28px;
  min-height: 28px;
  padding: 0 14px;
  white-space: nowrap;
  border-color: rgba(var(--border-muted-rgb, 117, 187, 255), 0.34);
  background: var(--surface-base, linear-gradient(180deg, rgba(117, 187, 255, 0.17), rgba(117, 187, 255, 0.07)));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.strategy-template-button:hover {
  border-color: var(--accent, #75bbff);
  background: var(--surface-hover, linear-gradient(180deg, rgba(117, 187, 255, 0.25), rgba(117, 187, 255, 0.11)));
}

.strategy-template-card {
  width: min(900px, 94vw);
  max-height: min(86vh, 780px);
  overflow: auto;
  padding: 0;
  border-color: rgba(var(--border-muted-rgb, 117, 187, 255), .34);
  background:
    var(--surface-raised, radial-gradient(circle at top left, rgba(79, 155, 255, .16), transparent 34%),
    linear-gradient(180deg, rgba(11, 28, 44, .98), rgba(6, 18, 31, .98)));
}

.strategy-template-card .strategy-template-head,
.strategy-template-card .strategy-template-top,
.strategy-template-card .strategy-template-summary,
.strategy-template-card .strategy-template-section,
.strategy-template-card .strategy-template-rules,
.strategy-template-card .strategy-template-note,
.strategy-template-card .strategy-template-actions {
  margin-left: 18px;
  margin-right: 18px;
}

.strategy-template-head {
  position: sticky;
  top: 0;
  z-index: 2;
  margin: 0 !important;
  padding: 16px 18px 12px;
  border-bottom: 1px solid rgba(var(--border-muted-rgb, 117, 187, 255), .18);
  background: rgba(var(--surface-base-rgb, 8, 22, 36), .96);
}

.strategy-template-head p,
.strategy-template-note,
.strategy-template-empty {
  margin: 4px 0 0;
  color: var(--muted, #9cb8d4);
  font-size: 12px;
}

.strategy-template-top {
  display: grid;
  grid-template-columns: minmax(190px, .8fr) minmax(240px, 1.2fr);
  gap: 10px;
  margin-top: 14px;
}

.strategy-template-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px;
}

.strategy-template-pill {
  border: 1px solid rgba(var(--border-muted-rgb, 117, 187, 255), .24);
  border-radius: 999px;
  padding: 5px 9px;
  color: var(--foreground, #cfe7ff);
  background: rgba(var(--surface-base-rgb, 117, 187, 255), .08);
  font-size: 12px;
}

.strategy-template-section {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(var(--border-muted-rgb, 117, 187, 255), .18);
  border-radius: 12px;
  background: rgba(var(--surface-base-rgb, 7, 20, 33), .72);
}

.strategy-template-section h3 {
  margin: 0 0 9px;
  font-size: 13px;
  letter-spacing: .02em;
  color: var(--foreground, #e9f5ff);
}

.strategy-template-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.strategy-template-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  color: var(--muted, #9cb8d4);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .045em;
}

.strategy-template-field input,
.strategy-template-field select,
.strategy-template-rule-row input[type="number"] {
  width: 100%;
  min-width: 0;
  height: 34px;
  border: 1px solid rgba(var(--border-muted-rgb, 117, 187, 255), .24);
  border-radius: 8px;
  background: rgba(var(--surface-field-rgb, 2, 12, 22), .74);
  color: var(--text, #f1f8ff);
  padding: 0 9px;
}

.strategy-template-flags {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(170px, 1fr);
  gap: 9px;
  align-items: end;
  margin-top: 10px;
}

.strategy-template-flags > label:first-child {
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--foreground, #dceeff);
  font-size: 13px;
}

.strategy-template-rules {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.strategy-template-rule-head,
.strategy-template-rule-row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) 62px 62px;
  gap: 7px;
  align-items: center;
}

.strategy-template-rule-head {
  color: var(--muted, #9cb8d4);
  font-size: 11px;
  margin-bottom: 6px;
}

.strategy-template-rule-row {
  margin-top: 6px;
}

.strategy-template-rule-row label {
  display: flex;
  gap: 7px;
  align-items: center;
  min-width: 0;
  color: var(--foreground, #dceeff);
  font-size: 12px;
}

.strategy-template-rule-row label span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.strategy-template-note {
  margin-top: 12px;
}

.strategy-template-actions {
  position: sticky;
  bottom: 0;
  padding: 12px 0 14px;
  background: linear-gradient(180deg, rgba(var(--surface-base-rgb, 6, 18, 31), 0), rgba(var(--surface-base-rgb, 6, 18, 31), .97) 22%);
}

.compact-build-controls .build-actions,
.compact-run-controls {
  flex-wrap: wrap;
}

.compact-build-controls .build-actions {
  justify-content: flex-end;
}

.compact-run-controls {
  display: flex;
  flex: 1 1 820px;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.compact-run-controls label,
.compact-run-controls select {
  margin: 0;
}

.inline-build-settings,
.inline-build-actions,
.inline-build-salary {
  display: flex;
  align-items: stretch;
  gap: 6px;
  min-width: 0;
}

.inline-build-settings {
  flex: 1 1 auto;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.inline-build-actions {
  flex: 0 1 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.inline-build-field {
  display: grid;
  grid-template-rows: 10px 25px;
  gap: 2px;
  min-width: 74px;
  padding: 3px 7px 4px;
  border: 1px solid rgba(var(--border-muted-rgb, 126, 183, 255), .2);
  border-radius: 6px;
  background: rgba(var(--surface-base-rgb, 5, 19, 32), .72);
}

.inline-build-field > span {
  color: var(--foreground-muted, #8099b4);
  font-size: 8px;
  font-weight: 700;
  line-height: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* A build priced on generic economics rather than the real lobby ladder.
   Warn colour, because the number on the card means something different. */
.contest-build-line.contest-build-generic { color: #ffbf6b; }

.filter-band .inline-build-field input,
.filter-band .inline-build-field select {
  flex: 0 0 auto;
  width: 78px;
  min-width: 0;
  height: 25px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--foreground, #dcecff);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  outline: none;
}

.inline-build-fill {
  flex: 0 0 112px;
  width: 112px;
  min-width: 112px;
}
.filter-band .inline-build-fill select {
  width: 100%;
  cursor: pointer;
}
.filter-band .inline-build-fill select option { background: var(--surface-field, #061321); color: var(--foreground, #dcecff); }

.inline-build-target-field {
  min-width: 150px;
}

.inline-build-targets {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 3px;
  min-width: 136px;
}

.filter-band .inline-build-targets button {
  min-width: 0;
  height: 25px;
  padding: 0 6px;
  border: 1px solid rgba(var(--border-muted-rgb, 126, 183, 255), .22);
  border-radius: 4px;
  background: rgba(var(--surface-base-rgb, 2, 12, 22), .56);
  color: var(--foreground-muted, #91a9c2);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;
}

.filter-band .inline-build-targets button:hover {
  border-color: rgba(var(--control-accent-rgb, 98, 171, 255), .54);
  color: var(--foreground, #dcecff);
}

.filter-band .inline-build-targets button.active {
  border-color: var(--control-accent, #62abff);
  background: var(--surface-selected, linear-gradient(180deg, rgba(45, 126, 218, .9), rgba(24, 79, 145, .94)));
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .13);
}

.filter-band .inline-build-unique input {
  width: 48px;
}

.inline-build-field:focus-within {
  border-color: rgba(var(--control-accent-rgb, 99, 172, 255), .74);
  box-shadow: none;
}

.inline-build-check {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 42px;
  padding: 0 8px;
  border: 1px solid rgba(var(--border-muted-rgb, 126, 183, 255), .2);
  border-radius: 6px;
  background: rgba(var(--surface-base-rgb, 5, 19, 32), .72);
  color: var(--foreground-soft, #a9bfd7);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
}

.filter-band .inline-build-check input {
  flex: 0 0 auto;
  width: 14px;
  min-width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--control-accent, #62abff);
}

.inline-build-reset {
  min-width: 52px;
  height: 42px;
  padding: 0 8px;
  border-color: rgba(var(--border-muted-rgb, 126, 183, 255), .2);
  background: rgba(var(--surface-base-rgb, 5, 19, 32), .72);
  color: var(--foreground-muted, #94abc3);
  font-size: 10px;
}

.compact-build-controls .wide-run {
  width: 138px;
  min-width: 138px;
  height: 42px;
}

.compact-build-controls .row-count {
  margin-left: 0;
  white-space: nowrap;
}


@media (min-width: 821px) and (max-width: 2100px) {
  .compact-build-controls,
  .compact-run-controls {
    width: 100%;
  }
  .inline-build-settings {
    order: 1;
    flex-basis: 100%;
  }
  .inline-build-actions {
    order: 2;
    margin-left: auto;
  }
}

@media (min-width: 821px) and (max-width: 1120px) {
  .inline-build-settings { flex-wrap: wrap; }
  .inline-build-salary { flex-wrap: nowrap; }
  .compact-build-controls .wide-run { width: 126px; min-width: 126px; }
}

.header-session { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; }
.header-account { display: inline-flex; align-items: center; gap: 8px; padding: 0 10px 0 6px; font-size: 14px; font-weight: 400; white-space: nowrap; }
:root:not(.desktop-palette) .header-session { display: none; }

/* Set-all exposure (owner 7/16): tiny "all" buttons in the Min/Max Exp grid
   headers + the centered popup they open. */
.exp-all-btn {
  height: 18px;
  min-height: 18px;
  padding: 0 6px;
  margin-left: 4px;
  font-size: 10px;
  line-height: 1;
  border-radius: 4px;
  border-color: var(--control-line, #28425f);
  background: var(--surface-base, #050f1a);
  color: var(--foreground-soft, #b7c7dd);
  box-shadow: none;
  vertical-align: middle;
}
.exp-all-btn:hover {
  border-color: var(--control-accent, #5f8ec3);
  color: var(--foreground, #f3f7ff);
}
.exp-all-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--surface-base-rgb, 2, 8, 16), 0.72);
  backdrop-filter: blur(2px);
}
.exp-all-box {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 300px;
  padding: 20px 24px 20px;
  border: 1px solid var(--control-line, #2f4f76);
  border-radius: 12px;
  background: var(--surface-base, linear-gradient(180deg, #0d2138, #081627));
  color: var(--text);
  box-shadow: 0 20px 64px rgba(0, 0, 0, 0.6);
  text-align: center;
}
.exp-all-box .eyebrow {
  align-self: center;
}
.exp-all-box b {
  font-size: 16px;
  letter-spacing: 0.2px;
}
.exp-all-field {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 4px 0 2px;
}
.exp-all-field input {
  width: 110px;
  min-width: 0;
  height: 44px;
  font-size: 22px;
  font-weight: 600;
  text-align: center;
  border-radius: 8px;
  border-color: var(--control-line, #2f4f76);
}
.exp-all-field input:focus {
  border-color: var(--accent);
  box-shadow: none;
}
.exp-all-suffix {
  font-size: 18px;
  color: var(--foreground-muted, #8fa8c8);
}
.exp-all-actions {
  display: flex;
  gap: 10px;
}
.exp-all-actions .primary {
  flex: 1;
  min-height: 36px;
}
.exp-all-actions button:not(.primary) {
  min-height: 36px;
  padding: 0 16px;
}

.compact-build-row .build-actions {
  margin-left: auto;
  flex-wrap: nowrap;
}


.compact-build-row .row-count {
  margin-left: 8px;
  white-space: nowrap;
}

/* Multi-contest lineup workspace */
.contest-planner {
  border-bottom: 1px solid var(--line);
  padding: 12px;
  display: grid;
  gap: 10px;
}

.contest-planner-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.contest-planner-head h2 {
  margin: 2px 0 0;
  font-size: 17px;
  font-weight: 700;
}

.contest-planner-title {
  display: grid;
  gap: 2px;
}

.contest-planner-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.contest-clear-settings {
  height: 28px;
  min-height: 28px;
  padding: 0 12px;
  border: 1px solid var(--control-line, #315f87);
  border-radius: 6px;
  background: var(--surface-base, #071827);
  color: var(--text, #f1f8ff);
  font-size: 12px;
  font-weight: 760;
  line-height: 1;
  cursor: pointer;
}

.contest-clear-settings:hover:not(:disabled) {
  border-color: var(--accent, #75bbff);
  background: var(--surface-hover, #0d2236);
  color: var(--text, #f1f8ff);
}

.contest-clear-settings:disabled {
  border-color: var(--control-line, #2a4565);
  color: var(--text, #f1f8ff);
  opacity: .45;
  cursor: not-allowed;
}

.contest-summary-strip {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 12px;
}

.contest-summary-strip span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: var(--surface-base, #061522);
}

.contest-summary-strip b {
  color: var(--text);
  font-size: 14px;
}

.contest-summary-strip .contest-pnl-rate.won,
.contest-summary-strip .contest-pnl-rate.lost {
  color: var(--muted);
}

.contest-summary-strip .contest-pnl-rate.won b {
  color: var(--data-positive, #2bd17f);
}

.contest-summary-strip .contest-pnl-rate.lost b {
  color: #e06c6c;
}

.contest-card-grid {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.contest-card {
  width: 238px;
  min-width: 238px;
  height: auto;
  min-height: 96px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  padding: 10px;
  border: 1px solid var(--control-line, #28425f);
  border-radius: 7px;
  background: var(--surface-raised, #071320);
  color: var(--text);
}
/* Pin the backtest result block (Won / cashed / Winner) to the bottom edge so
   it lines up across every contest card regardless of name/meta length. Cards
   in the row already stretch to equal height, so margin-top:auto aligns them. */
.contest-card-truth {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.contest-card:hover {
  border-color: var(--control-accent, #557fae);
  background: var(--surface-hover, #09192a);
}

.contest-card.active {
  border-color: var(--accent);
  background: var(--surface-selected, #10243a);
  box-shadow: none;
}

.contest-card b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 700;
}

.contest-card-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.contest-card-stats span {
  display: grid;
  gap: 1px;
  min-height: 32px;
  padding: 6px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: var(--surface-raised, #04111d);
  color: var(--muted);
  font-size: 11px;
}

.contest-card-stats strong {
  color: var(--text);
  font-size: 14px;
  line-height: 1;
}

.lineup-empty-state {
  display: block;
  padding: 12px;
}

.lineup-empty-state p {
  margin: 5px 0 0;
  color: var(--muted);
}

.lineup-table {
  min-width: 1500px;
}

.opti-status-popup {
  position: fixed;
  left: 50%;
  top: 50%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  z-index: 70;
  width: min(420px, calc(100vw - 32px));
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-base, #061320);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.42);
  padding: 12px 14px;
  color: var(--text);
}

.opti-status-popup.done {
  border-color: rgba(124, 255, 178, 0.45);
}

.opti-status-popup.warn {
  border-color: rgba(255, 209, 102, 0.55);
  left: 50%;
  top: 50%;
  right: auto;
  bottom: auto;
  z-index: 70;
  width: min(460px, calc(100vw - 32px));
  transform: translate(-50%, -50%);
}

/* MLB progress stays at the viewport center in every phase, not just errors. */
.opti-status-popup.mlb-build-progress {
  left: 50%;
  top: 50%;
  right: auto;
  bottom: auto;
  z-index: 70;
  transform: translate(-50%, -50%);
}

/* Keep build progress centered for every sport, including on phones. */
.mobile-build-run-overlay:not([hidden]) {
  inset: 0;
  display: grid;
  place-items: center;
  padding: max(20px, env(safe-area-inset-top)) 18px max(20px, env(safe-area-inset-bottom));
  pointer-events: none;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.mobile-build-run-overlay .mobile-build-run-card {
  width: min(390px, 100%);
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  pointer-events: auto;
}

.opti-status-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.opti-status-title {
  color: var(--control-accent, #8cc8ff);
  font-size: 11px;
  letter-spacing: 0;
  text-transform: uppercase;
}

.opti-status-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.opti-status-pct {
  color: var(--accent-2);
  font-size: 12px;
  white-space: nowrap;
}

.opti-status-close {
  width: 26px;
  height: 24px;
  border: 1px solid rgba(255, 209, 102, 0.45);
  border-radius: 6px;
  background: rgba(255, 209, 102, 0.08);
  color: #ffe29a;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
}

.opti-status-close:hover {
  background: rgba(255, 209, 102, 0.16);
  border-color: rgba(255, 209, 102, 0.72);
}

.opti-status-stage {
  color: var(--text);
  font-size: 15px;
  line-height: 1.25;
}

.opti-status-detail {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.opti-status-bar {
  height: 4px;
  margin-top: 10px;
  border-radius: 999px;
  background: var(--surface-base, #03101b);
  border: 1px solid var(--line-soft);
  overflow: hidden;
}

.opti-status-bar span {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}

.opti-status-popup.done .opti-status-bar span {
  background: linear-gradient(90deg, #7cffb2, #9fffd0);
}

.opti-status-popup.warn .opti-status-bar span {
  background: linear-gradient(90deg, #ffd166, #ffe29a);
}

.mobile-build-run-overlay {
  position: fixed;
  inset: 0;
  z-index: 700;
  display: grid;
  place-items: center;
  padding: max(20px, env(safe-area-inset-top)) 18px max(20px, env(safe-area-inset-bottom));
  background: rgba(1, 7, 13, .78);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.mobile-build-run-overlay[hidden] { display: none; }
.mobile-build-run-card {
  width: min(390px, 100%);
  min-height: 126px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 20px 18px;
  border: 1px solid rgba(88, 158, 236, .74);
  border-radius: 16px;
  background: linear-gradient(150deg, #0a1b2d, #06101b 68%);
  box-shadow: 0 24px 65px rgba(0, 0, 0, .62);
}
.mobile-build-run-spinner {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 4px solid rgba(96, 166, 245, .2);
  border-top-color: #4f9dff;
  color: #07141f;
  font-size: 23px;
  font-weight: 950;
  animation: mobileBuildSpin .8s linear infinite;
}
.mobile-build-run-spinner.done {
  border-color: #5ee7a2;
  background: #5ee7a2;
  animation: none;
}
.mobile-build-run-copy { min-width: 0; }
.mobile-build-run-title {
  color: #f3f8ff;
  font-size: 17px;
  font-weight: 850;
}
.mobile-build-run-stage {
  margin-top: 4px;
  color: #99caff;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.35;
}
.mobile-build-run-detail {
  margin-top: 3px;
  color: #8ca2ba;
  font-size: 11.5px;
  line-height: 1.35;
}
.mobile-build-run-pct {
  align-self: start;
  color: var(--data-positive, #5ee7a2);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.mobile-build-run-progress {
  height: 4px;
  margin-top: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(123, 157, 194, .18);
}
.mobile-build-run-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2f8bff, #5ee7a2);
  transition: width .25s ease;
}
@keyframes mobileBuildSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .mobile-build-run-spinner { animation-duration: 1.8s; }
  .mobile-build-run-progress span { transition: none; }
}
@media (max-width: 420px) {
  .mobile-build-run-card {
    grid-template-columns: auto minmax(0, 1fr);
    padding: 18px 15px;
  }
  .mobile-build-run-pct {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }
}

.slate-loading-overlay {
  position: fixed;
  inset: 0;
  /* Above the slate drawer (350) + backdrop (340) so the "Loading slate" card
     is visible when a date is picked from inside the open mobile drawer. */
  z-index: 360;
  display: grid;
  place-items: center;
  background: rgba(var(--surface-base-rgb, 2, 10, 18), 0.28);
  backdrop-filter: blur(1px);
}

.slate-loading-overlay[hidden] {
  display: none;
}

.slate-loading-card {
  width: min(380px, calc(100vw - 32px));
  min-height: 92px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--control-line, #5f8ec3);
  border-radius: 8px;
  background: var(--surface-raised, #071320);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.46);
}

.slate-loading-spinner,
.slate-picker-status::before {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 3px solid rgba(var(--control-accent-rgb, 126, 183, 255), 0.22);
  border-top-color: var(--control-accent, #9ecbff);
  animation: slateLoadingSpin 0.78s linear infinite;
}

.slate-loading-title {
  color: #fff;
  font-size: 16px;
  line-height: 1.25;
}

.slate-loading-detail {
  margin-top: 4px;
  color: #fff;
  font-size: 13px;
  line-height: 1.35;
}

@keyframes slateLoadingSpin {
  to { transform: rotate(360deg); }
}
.opti-settings-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
  padding: 12px;
}

.opti-settings-card {
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-raised, #06131f);
  padding: 12px;
  display: grid;
  gap: 10px;
}

.opti-settings-card-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
}

.opti-settings-card-title {
  font-size: 13px;
  color: var(--text);
}

.opti-setting-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 8px;
}

.opti-setting-field {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.opti-setting-field span {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
}

.opti-setting-field input,
.opti-setting-field select {
  width: 100%;
  min-width: 0;
}
.player-table .leverage-cell.good {
  color: var(--data-positive, #36d889) !important;
}

.player-table .leverage-cell.bad {
  color: #ff6b7a;
}

.player-table .stack-cell {
  color: var(--control-accent, #b7d9f5);
  white-space: nowrap;
}
#teamStacksBoard .section-table {
  min-width: 2320px;
}

#teamStacksBoard .stack-edge-cell {
  color: var(--data-positive, #8ff4c9);
}

#teamStacksBoard .run-edge-cell {
  color: var(--foreground, #b8f7ff);
}

#teamStacksBoard .top-hitters-cell {
  min-width: 640px;
  max-width: 900px;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.lineup-title-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.contest-sim-board {
  border-bottom: 1px solid var(--line);
  padding: 12px;
  display: grid;
  gap: 10px;
  background: var(--surface-base, #050f1a);
}

.contest-sim-board[hidden] {
  display: none;
}

.contest-sim-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.contest-sim-head h2 {
  margin: 2px 0 0;
  font-size: 17px;
  font-weight: 700;
}

.contest-sim-table-shell {
  overflow: auto;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
}

.contest-sim-table {
  width: 100%;
  min-width: 920px;
  border-collapse: collapse;
}

.contest-sim-table th,
.contest-sim-table td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
  vertical-align: top;
}

.contest-sim-table th {
  color: var(--accent);
  font-size: 12px;
  text-transform: uppercase;
}

.contest-sim-table td {
  color: var(--text);
}

.contest-sim-note {
  color: var(--muted);
  font-size: 12px;
}
.auto-sims-global {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 10px;
}
.auto-sims-global .state-chip.running {
  border-color: var(--control-accent, #3f8cff);
  color: var(--control-accent, #9cc4ff);
}

.account-line {
  margin: 2px 0 0;
  font-size: 11px;
  color: var(--foreground-muted, #7f97b8);
}
.account-line .link-button {
  background: none;
  border: none;
  color: var(--control-accent, #4f8cff);
  cursor: pointer;
  font-size: 11px;
  padding: 0 2px;
  text-decoration: underline;
}
.login-overlay {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* Opaque branded backdrop (owner 8/2 "ship all"): the old translucent
     #060b14f2 let the dead app shell bleed through, which read as a bug and
     leaked workspace layout to logged-out visitors. */
  background:
    var(--surface-base, radial-gradient(1200px 800px at 75% -15%, rgba(20, 60, 100, 0.55), transparent 60%),
    radial-gradient(900px 700px at -10% 110%, rgba(9, 46, 58, 0.5), transparent 60%),
    linear-gradient(160deg, #041020 0%, #020a12 45%, #010609 100%));
}
/* The [hidden] attribute must actually hide it: an author display:flex rule
   overrides the UA [hidden]{display:none}, so without this guard the card
   stayed on screen even though login had succeeded and the app loaded
   behind it. */
.login-overlay[hidden] {
  display: none;
}
/* Blanket safety net so no other display-styled element can be defeated by
   the same specificity trap when toggled via .hidden. */
[hidden] {
  display: none !important;
}
/* Passive, failure-only indicator: appears only while per-slate saves are
   failing to reach the DB (expired session / tunnel blip), so silent data
   loss is visible. Not interactive - it clears itself when a save succeeds. */
body[data-persist-warn="1"]::after {
  content: "\26A0 Not saved - retrying";
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 9999;
  padding: 8px 14px;
  border-radius: 8px;
  background: #7a1f1f;
  color: #ffe8e8;
  font: 600 13px/1 system-ui, sans-serif;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  pointer-events: none;
}
.login-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 320px;
  padding: 28px;
  border: 1px solid var(--control-line, #1d2c44);
  border-radius: 12px;
  background: var(--surface-raised, #0a1220);
}
.login-card h2 {
  margin: 0;
}
.login-card label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--foreground-muted, #7f97b8);
}
.login-card input {
  padding: 8px 10px;
}
.login-card button {
  padding: 9px 10px;
}
.login-error {
  min-height: 16px;
  margin: 0;
  font-size: 12px;
  color: #ff7d7d;
}
/* Split sign-in card (owner-approved 7/07 preview, redlines applied:
   no "Command center" lockup text, no contests stat, no build stamp). */
.login-card.login-split {
  flex-direction: row;
  width: min(620px, calc(100vw - 28px));
  padding: 0;
  gap: 0;
  overflow: hidden;
  border-radius: 12px;
}
.login-brand {
  flex: 0 0 224px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 26px 20px;
  background: var(--surface-base, #081020);
  border-right: 1px solid var(--control-line, #16233a);
}
.login-brand-top { display: flex; align-items: center; gap: 10px; }
.login-brand-sub { font-size: 11px; color: var(--foreground-muted, #5b6f8f); letter-spacing: .4px; }
.login-tag { margin: 4px 0 0; font-size: 15px; line-height: 1.45; color: var(--foreground, #d7e9ff); font-weight: 600; }
.login-stats { margin-top: auto; display: flex; flex-direction: column; gap: 11px; }
.login-stat { display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--foreground-soft, #9db8dd); }
.login-stat svg { color: var(--accent); flex: 0 0 auto; }
.login-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 26px 26px 20px; }
.login-main h2 { font-size: 20px; }
.login-sub { margin: 0 0 10px; font-size: 12.5px; color: var(--foreground-muted, #7c92b4); }
.login-main label { font-size: 12px; color: var(--foreground-muted, #8fa7c9); }
/* Controls follow the main app css (owner 7/07: base button/input tokens -
   #03101c fields, var(--line) borders, 6px radius, button.primary blues). */
.login-main input {
  width: 100%;
  height: 34px;
  background: var(--surface-field, #03101c);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  padding: 0 10px;
}
.login-main input:focus {
  border-color: var(--accent);
  box-shadow: none;
  outline: none;
}
.login-pw-head { display: flex; justify-content: space-between; align-items: baseline; margin-top: 6px; }
.login-pw-head .link-button {
  border: none;
  background: none;
  padding: 0;
  height: 44px;
  font-size: 12px;
  font-weight: 650;
  color: var(--accent);
  cursor: pointer;
}
.login-pw-head .link-button:hover { text-decoration: underline; }
.login-pw-wrap { position: relative; }
.login-pw-wrap input { padding-right: 52px; }
.login-eye {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--foreground-muted, #5b6f8f);
  width: 44px;
  height: 44px;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-eye:hover { color: var(--foreground-soft, #9db8dd); }
.login-eye.active { color: var(--accent); }
.login-primary {
  margin-top: 12px;
  height: 36px;
  background: var(--surface-base, #1f5f91);
  border: 1px solid var(--control-accent, #83c4ff);
  border-radius: 6px;
  color: var(--text);
  font-size: 14px;
  cursor: pointer;
}
.login-primary:hover { background: var(--surface-hover, #276fa8); }
@media (max-width: 640px) {
  .login-card.login-split { flex-direction: column; width: min(360px, calc(100vw - 28px)); }
  .login-brand { flex: none; border-right: none; border-bottom: 1px solid #16233a; }
}
.account-create-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 10px 0 14px;
}
.account-create-row input,
.account-create-row select {
  padding: 6px 8px;
}

.account-card { width: 360px; }
.account-meta {
  margin: -4px 0 8px;
  color: var(--foreground-muted, #7f97b8);
  line-height: 1.5;
}
.account-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
}
.login-error.ok { color: #5fd08a; }

.reset-links { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 10px; }
.reset-link-row { display: flex; align-items: center; gap: 8px; }
.reset-link-row input {
  flex: 1;
  font-size: 11px;
  padding: 4px 6px;
  color: var(--control-accent, #9cc4ff);
}

/* Column picker (right-click a player-table header). */
.col-picker { position: fixed; inset: 0; z-index: 500; display: flex; align-items: center; justify-content: center; background: rgba(var(--surface-base-rgb, 6, 11, 20), 0.72); }
.col-picker[hidden] { display: none; }
.col-picker-card { width: 320px; max-width: calc(100vw - 32px); max-height: 78vh; display: flex; flex-direction: column; background: var(--surface-raised, #0a1220); border: 1px solid var(--control-line, #1d2c44); border-radius: 12px; padding: 16px; }
.col-picker-head { display: flex; align-items: center; justify-content: space-between; }
.col-picker-head h2 { font-size: 16px; }
.col-picker-list { overflow-y: auto; margin: 10px -4px; padding: 0 4px; display: grid; gap: 1px; }
.col-opt { display: flex; align-items: center; gap: 9px; padding: 8px; border-radius: 6px; font-size: 13px; color: var(--text); cursor: pointer; }
.col-opt:hover { background: var(--surface-hover, #10233a); }
.col-opt input { width: 16px; height: 16px; flex: 0 0 auto; }
.col-picker-foot { display: flex; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.col-picker-spacer { flex: 1; }

.sel-sheet-close { display: none; }

/* ==========================================================   UI/UX AUDIT FIXES (2026-07-09) — consistency, states, color, scannability.
   Appended after the desktop rules (so these win) but BEFORE the mobile
   media queries below (so mobile still wins at narrow widths).
   ================================================================= */

/* Tokens referenced but never defined (green "on" states + input borders went
   dead), plus a dedicated positive/green that won't collide with accent-blue. */


/* Restore green = positive (accent-2 got flipped to blue and collided with the
   interactive accent) and revive the dead "Auto ON" / bordered inputs. */
.cev-ev-pos, .cev-be-easy, .wx-chip.good, .wx-delay-nums b, .opti-status-pct,
.boost-val.pos { color: var(--data-positive, var(--pos)); }
.auto-sim-status.on { color: var(--pos); }
.boost-val.neg { color: var(--bad); }
.auto-sim-console input, .auto-sim-console select { border-color: var(--line-strong); }

/* Calendar "cached" cue: match its own legend hue + make the ring legible. */
.legend-dot.cached { background: #35e3a4; }
.calendar-grid button.cached-day { box-shadow: inset 0 0 0 1px rgba(53,227,164,.5); }

/* One chip token — the app's 6px square (the Rules tab shipped as pills). */
.pf-chip, .pf-add,
.contest-card, .opti-settings-card, .slate-counts span, .impact-line, .recent-line,
.position-chip, .showdown-slot-tab, .boost-btn { border-radius: 6px; }

/* One "selected list-card" cue everywhere: the slate-card left bar. */
.contest-card.active, .sim-game-item.active {
  box-shadow: none; border-color: var(--control-accent, #5f8ec3);
}
/* Status cards keep only their status cue (the colored inset top-border) when
   selected — no blue selection ring on the informational game strip. */
.game-card.confirmed.selected, .game-card.live.selected,
.game-card.final.selected, .game-card.postponed.selected { border-color: var(--control-line, #28425f); }

/* Compact secondary buttons share one 28px height; chips match the 34px inputs. */
.build-actions button, .schedule-filters select,
.pool-page-actions button, .gr-suggest-chip { min-height: 28px; height: 28px; }
.position-chip, .showdown-slot-tab { height: 34px; }
.position-quick-filters, .build-tabs, .build-actions { gap: 8px; }

/* Disabled controls must read as disabled (there was no global rule). */
button:disabled, button[disabled] { opacity: .45; cursor: not-allowed; }
button:disabled:hover, button[disabled]:hover { border-color: var(--control-accent, #2a4565); box-shadow: none; }
.slate-card.disabled { opacity: .45; }

/* One keyboard-focus stroke on the existing edge, with no outer halo.
   Borderless links/controls still get a visible indicator without moving layout. */
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
:where(.mini-tab, .view-tab, .position-chip, a[href], summary, [tabindex]):focus-visible {
  outline: 1px solid var(--accent); outline-offset: -1px; box-shadow: none;
}

/* Read-only analytics tables shouldn't fake a clickable affordance. */
#view-calibration tbody tr, #view-pitchercal tbody tr, #view-contestev tbody tr { cursor: default; }
#view-calibration tbody tr:hover, #view-pitchercal tbody tr:hover, #view-contestev tbody tr:hover { background: transparent; }

/* Themed scrollbars (native gray bars on the dark grid were the loudest tell). */
* { scrollbar-width: thin; scrollbar-color: var(--control-line, #2a4565) var(--control-line, #071320); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--surface-base, #071320); }
::-webkit-scrollbar-thumb { background: var(--surface-base, #2a4565); border-radius: 6px; border: 2px solid var(--control-line, #071320); }
::-webkit-scrollbar-thumb:hover { background: var(--surface-hover, #395679); }

/* Desktop: a quiet blue handle with no visible track. Keep native scrolling.
   Firefox uses its thin setting; Edge/Chrome/Safari use the exact 4px width. */
@media (min-width: 641px) {
  :root.desktop-palette, :root.desktop-palette * {
    scrollbar-width: thin;
    scrollbar-color: var(--accent) transparent;
  }
  @supports selector(::-webkit-scrollbar) {
    /* Non-auto standard values would override the WebKit width and thumb. */
    :root.desktop-palette, :root.desktop-palette * {
      scrollbar-width: auto;
      scrollbar-color: auto;
    }
    :root.desktop-palette::-webkit-scrollbar,
    :root.desktop-palette *::-webkit-scrollbar { width: 4px; height: 4px; }
    :root.desktop-palette::-webkit-scrollbar-track,
    :root.desktop-palette *::-webkit-scrollbar-track { background: transparent; }
    :root.desktop-palette::-webkit-scrollbar-thumb,
    :root.desktop-palette *::-webkit-scrollbar-thumb {
      background: var(--accent);
      border: 0;
      border-radius: 4px;
    }
    :root.desktop-palette::-webkit-scrollbar-thumb:hover,
    :root.desktop-palette *::-webkit-scrollbar-thumb:hover { background: var(--accent-2); }
    :root.desktop-palette::-webkit-scrollbar-button,
    :root.desktop-palette *::-webkit-scrollbar-button { display: none; }
    :root.desktop-palette::-webkit-scrollbar-corner,
    :root.desktop-palette *::-webkit-scrollbar-corner { background: transparent; }
  }
}


/* Ease interactive state changes (only game cards eased before). */
button, input, select, .mini-tab, .view-tab, .position-chip, .showdown-slot-tab,
.slate-card, .contest-card, .pf-pos-chip, .pf-add {
  transition: border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}

/* Tabular figures so digits line up column-to-column. NOTE: do NOT right-align
   these number cells — the player/section/lineup headers are left-aligned (built
   by helpers with no .number class), so right-aligning only the cells flings each
   value to the far side of its (wide) column, away from its header. Keep cells
   left so they sit directly under their headers. */
table { font-variant-numeric: tabular-nums; }

/* Persistent, dim sort glyph on unsorted sortable headers (was invisible until
   clicked, and clicking shifted the label). Sorted ▲/▼ rules are left intact. */
.player-table th[data-sort-key]:not([data-sort-dir])::after,
.lineup-table th[data-sort-key]:not([data-sort-dir])::after,
.section-table th[data-section-sort]:not([data-sort-dir])::after { content: "\2195"; opacity: .4; margin-left: 4px; }

/* Uppercase micro-labels: tracking for legibility; subordinate the eyebrow. */
.eyebrow, th, label { letter-spacing: .06em; }
.eyebrow { color: var(--muted); }

/* Subtle zebra on the very wide grids so a row stays a continuous target. */
.player-table tbody tr:nth-child(even),
.section-table tbody tr:nth-child(even) { background: rgba(var(--surface-base-rgb, 126, 183, 255), .035); }

.filter-band { row-gap: 12px; column-gap: 8px; }
/* When the toolbar can't fit everything on one line (laptop / smaller desktop, not
   phones), drop the SEARCH bar to its own row instead of the build controls — so
   Lineups/Pool/Min/Max/Run Build stay on the top row. On wide screens (>2000px) the
   normal order (search inline, build on the right) is untouched. */
@media (min-width: 821px) and (max-width: 2000px) {
  .filter-band #playerSearch { order: 1; }
}
/* Reserve space only for the optional auxiliary rail. */
.workspace { grid-template-columns: minmax(0, 1fr) clamp(280px, 16vw, 340px); }

/* Mid-width topbar (821-1560px: laptops / smaller desktop windows): brand +
   the full tab strip + status don't fit one 66px row - the brand column got
   crushed, the title wrapped, and the account chip painted UNDER the Main
   tab. Stack instead: brand left + status right on row 1, tabs on their own
   full-width wrapping row. Wide screens (>1560) keep the one-row layout. */
@media (min-width: 821px) and (max-width: 1560px) {
  .topbar {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 8px 14px;
    row-gap: 6px;
  }
  .view-tabs {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .header-session {
    grid-column: 2;
    grid-row: 1;
  }
}

/* ---- Guide tab (member how-to; owner-approved 7/17) ---- */
.guide-body {
  display: grid;
  gap: 14px;
  max-width: 780px;
  padding: 16px;
}

.guide-lede {
  margin: 0;
  font-size: 15px;
}

.guide-video {
  width: 100%;
  max-width: 780px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #000;
  display: block;
}

.guide-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.guide-flow span {
  padding: 4px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: var(--surface-base, #0a1a2d);
  color: var(--foreground, #dce9ff);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.guide-flow b {
  color: var(--muted);
  font-weight: 400;
}

.guide-step {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-soft);
}

.guide-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  color: var(--accent);
  font-size: 14px;
  font-weight: 800;
}

.guide-step h3 {
  margin: 3px 0 6px;
  font-size: 15px;
}

.guide-step p {
  margin: 0 0 6px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
}

.guide-step p.mini {
  color: var(--muted);
  font-size: 12px;
}

.guide-tips {
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: var(--surface-base, #061522);
  padding: 12px 14px;
}

.guide-tips h3 {
  margin: 0 0 8px;
  font-size: 14px;
}

.guide-tips ul {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
}

/* Auth + account cards fit any phone width and never trigger iOS zoom. */
@media (max-width: 480px) {
  .login-card, .account-card { width: min(340px, calc(100vw - 28px)); padding: 22px; }
  .login-card input { font-size: 16px; padding: 10px 12px; }
  .login-overlay { background: #060b14fb; }
}

/* New phone Players screen: selected-player detail sheet. */
.mp-backdrop { display: none; }
@media (max-width: 640px), (max-width: 950px) and (max-height: 500px), (max-device-width: 640px) {
  #selectedPanel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 345;
    margin: 0 auto;
    max-width: 480px;
    max-height: 88vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 18px 18px 0 0;
    border-bottom: none;
    transform: translateY(112%);
    transition: transform 0.26s cubic-bezier(.32,.72,0,1);
    box-shadow: 0 -14px 44px rgba(0,0,0,.6);
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }
  #selectedPanel.on { transform: translateY(0); }
  body.sel-sheet-open .app-shell { z-index: auto; }
  body.sel-sheet-open .sel-sheet-close {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    z-index: 346;
    top: 14vh;
    right: max(16px, calc((100vw - 480px) / 2 + 12px));
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 22px;
    line-height: 1;
    padding: 0;
    background: #0f2337;
    color: #cfe3f7;
    border: 1px solid #2f527a;
  }
  .mp-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 340;
    background: rgba(2,7,13,0.6);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
  }
  .mp-backdrop.on { opacity: 1; pointer-events: auto; }
}
@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  #selectedPanel, .mp-backdrop { transition: none; }
}
/* Late-swap controls (Swap Watch tab) - inherits the app button theme */
.late-swap-controls { display: flex; align-items: center; gap: 10px; padding: 8px 0 12px; flex-wrap: wrap; }
.late-swap-controls button[data-action="run-late-swap"] { height: 30px; padding: 0 12px; font-size: 12px; }
.late-swap-controls button[data-action="run-late-swap"]:disabled { opacity: 0.45; cursor: not-allowed; }
.late-swap-detail { padding: 2px 0 12px; max-height: 200px; overflow-y: auto; }
.late-swap-detail .mini { padding: 2px 0; opacity: 0.85; }
.late-swap-table .lineup-table-player.late-swap-chip-swapped { background: #0c2a22; border-color: #17513f; }
.late-swap-table .lineup-table-player.late-swap-chip-swapped .lineup-table-player-name { color: #5dcaa5; }
.late-swap-table .lineup-table-player.late-swap-chip-locked { opacity: 0.55; }
/* Column widths for the late-swap table's 8-col layout (# / Entry / Contest /
   Stack / Players / Salary / Proj / Slots). The shared .lineup-table nth-child
   widths are keyed to the Lineups 10-col order, which put the wide Players
   width (620px) on the wrong column here - so the player chips stacked
   vertically. These overrides realign widths so Players is the wide column and
   the chips flow horizontally exactly like the Lineups board. */
.late-swap-table.lineup-table th:nth-child(3),
.late-swap-table.lineup-table td:nth-child(3) { width: 180px; }  /* Contest */
.late-swap-table.lineup-table th:nth-child(4),
.late-swap-table.lineup-table td:nth-child(4) { width: 130px; }  /* Stack */
.late-swap-table.lineup-table th:nth-child(5),
.late-swap-table.lineup-table td:nth-child(5) { width: 620px; }  /* Players */
.late-swap-table.lineup-table th:nth-child(6),
.late-swap-table.lineup-table td:nth-child(6) { width: 112px; }  /* Salary */
/* Contest-select cards embedded in the late-swap board: drop the box padding
   so the card grid's left edge lines up with the controls and table below. */
.late-swap-planner { padding: 0 0 12px; margin: 0 0 12px; }

/* WNBA sport mode: the SAME MLB workspace renders WNBA data - no separate
   panes. Only the position quick-filter chips swap (G/F instead of MLB
   positions) and MLB-only DK-entry actions hide. */
.wnba-chip { display: none; }
body.sport-wnba .wnba-chip { display: inline-block; }
body.sport-wnba .position-chip:not(.wnba-chip):not([data-position-filter="ALL"]) { display: none; }

/* NFL position chips (owner 8/09). Same show/hide mechanism as WNBA: the chips
   for every other sport collapse and only All + the NFL set remain. K is in the
   markup but stays hidden on Classic, which has no kicker slot - only Showdown
   prices them, so showing it on a Classic slate would offer a filter that can
   never match a row. */
.nfl-chip { display: none; }
body.sport-nfl .nfl-chip { display: inline-block; }
body.sport-nfl .position-chip:not(.nfl-chip):not([data-position-filter="ALL"]) { display: none; }
body.sport-nfl:not(.showdown-slate) .nfl-chip[data-position-filter="K"] { display: none; }
/* Grid columns per sport: MLB-only columns hide in WNBA mode; the WNBA
   per-game stat averages (MIN/PTS/REB/AST/STL/BLK/TO/3PM) show only there. */
.player-table .wnba-col { display: none; }
body.sport-wnba .player-table .wnba-col { display: table-cell; }
body.sport-wnba .player-table .mlb-col { display: none; }
/* Golf mode: the transparent Sim-Savant-style column set (mean/P10/P50/P90,
   make-cut/top-20/top-5/win %, wave/wind/WD) is ALWAYS visible; the MLB and
   WNBA column sets hide. Golf is 6 flat G slots - no positions/stacks/order. */
.player-table .golf-col { display: none; }
body.sport-golf .player-table .golf-col { display: table-cell; }
body.sport-golf .player-table .mlb-col { display: none; }
body.sport-golf .player-table .wnba-col { display: none; }
/* NFL mode: the MLB stat block (HR/SB/K/BB/IP/Pitches/QS%/Win%/Spike%) is
   baseball-only and means nothing next to a quarterback. WNBA and golf columns
   are already display:none by default, so MLB's is the only set to hide. NFL
   has no stat columns of its own yet - there is no NFL projection model, so
   inventing columns would only give them zeros to display. */
body.sport-nfl .player-table .mlb-col { display: none; }
/* Golf has no team stacks, games, stack shapes, late swap, or Rules tab -
   6 golfers under one $50k cap. Hide those main-tabs and MLB-only views. */
body.sport-golf .mini-tab[data-main-tab="team-stacks"],
body.sport-golf .mini-tab[data-main-tab="games"],
body.sport-golf .mini-tab[data-main-tab="stack-shapes"],
body.sport-golf .mini-tab[data-main-tab="late-swap"],
body.sport-golf .mlb-only-tab { display: none; }
body.sport-golf [data-view="calibration"],
body.sport-golf [data-view="pitchercal"],
body.sport-golf .auto-sim-console,
body.sport-golf #autoSimsGlobalStatus { display: none; }
/* Golf: no roster-position quick-filter chips (single "G" slot). */
body.sport-golf .position-chip:not([data-position-filter="ALL"]) { display: none; }
/* Golf tournament card: one summary card in place of the per-game strip. */
.golf-tourney-card {
  border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2);
  padding: 12px 14px; min-width: 260px; display: flex; flex-direction: column; gap: 6px;
}
.golf-tourney-card .gt-name { font-weight: 800; font-size: 14px; color: var(--text); }
.golf-tourney-card .gt-sub { font-size: 12px; color: var(--muted); }
.golf-tourney-card .gt-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.golf-tourney-card .gt-stat { display: flex; flex-direction: column; }
.golf-tourney-card .gt-stat span { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.golf-tourney-card .gt-stat b { font-size: 14px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
/* MLB-only views and consoles hide in WNBA mode (main tabs all render
   WNBA-native content). */
/* (7/16: the SHOWDOWN style-filter option is back for WNBA - Showdown slates
   are real now. The old option-hide + force-reset pair is gone.) */
body.sport-wnba [data-view="calibration"],
body.sport-wnba [data-view="pitchercal"],
body.sport-wnba .auto-sim-console,
body.sport-wnba #autoSimsGlobalStatus { display: none; }

/* Backtest gross winnings stay green; signed net amounts use money tones. */
.contest-card .truth-won { color: var(--pos); font-weight: 700; }
.contest-card .truth-line { white-space: normal; overflow-wrap: anywhere; line-height: 1.35; }
.contest-card .truth-line b { white-space: normal; }

/* Pitcher Calibration tab (consensus tripwire) */
#view-pitchercal .inline-actions { display: flex; align-items: center; gap: 10px; }
.pcal-status { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pcal-note { margin: 4px 14px 12px; color: var(--muted); font-size: 12.5px; line-height: 1.45; max-width: 760px; }
.pcal-summary { display: flex; flex-wrap: wrap; gap: 10px; padding: 0 14px 14px; }
.pcal-stat {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 120px; padding: 9px 13px;
  border: 1px solid var(--line-soft); border-radius: 10px;
  background: var(--panel-2);
}
.pcal-stat b { font-size: 20px; font-weight: 850; color: var(--text); font-variant-numeric: tabular-nums; }
.pcal-stat span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .02em; }
.pcal-stat.hot { border-color: rgba(255, 209, 102, .55); }
.pcal-stat.hot b { color: var(--warn); }
#pcalRows td.num, #view-pitchercal th.num { text-align: right; font-variant-numeric: tabular-nums; }
.pcal-flag-row { background: rgba(168, 118, 24, .08); }
.pcal-div-flag { color: var(--warn); font-weight: 800; }
.pcal-adj { margin-left: 6px; font-size: 11px; color: var(--muted); font-weight: 600; }

/* Contest EV tab */
.cev-controls { flex-wrap: wrap; gap: 10px; }
.cev-controls label { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); }
.cev-controls input { width: 74px; padding: 4px 6px; background: var(--panel-2); color: var(--text); border: 1px solid var(--line); border-radius: 6px; }
.cev-controls select { max-width: 240px; padding: 4px 6px; background: var(--panel-2); color: var(--text); border: 1px solid var(--line); border-radius: 6px; }
#cevRows td.num, #view-contestev th.num, #cevAllocRows td.num { text-align: right; font-variant-numeric: tabular-nums; }
.cev-ev-pos { color: var(--accent-2); font-weight: 800; }
.cev-ev-neg { color: var(--muted); }
.cev-be-easy { color: var(--accent-2); font-weight: 700; }

/* Pool filters (Rules v1) */
.pool-filters-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 0 2px; }
.pf-label i { font-style: normal; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.pf-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.pf-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; background: rgba(var(--surface-base-rgb, 117, 187, 255), .14); color: var(--accent); border: 1px solid rgba(var(--border-muted-rgb, 117, 187, 255), .42); padding: 3px 10px; border-radius: 20px; cursor: default; }
.pf-chip.hide { background: rgba(255,107,122,.14); color: var(--bad); border-color: rgba(255,107,122,.42); }
.pf-chip .pf-x { cursor: pointer; opacity: .65; font-weight: 700; }
.pf-chip .pf-x:hover { opacity: 1; }
/* Saved rule chips are click-to-edit (reopen the builder pre-filled). */
.pf-chip[data-action] { cursor: pointer; }
.pf-chip[data-action]:hover { border-color: var(--accent); background: rgba(var(--surface-hover-rgb, 117, 187, 255), .22); }
.pf-add { font-size: 12px; padding: 4px 11px; border: 1px dashed var(--line); border-radius: 20px; background: transparent; color: var(--muted); cursor: pointer; }
.pf-add:hover { border-color: var(--accent); color: var(--accent); }
.pf-builder { background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 12px; margin-top: 6px; display: flex; flex-direction: column; gap: 10px; max-width: 660px; }
.pf-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pf-txt { font-size: 12px; color: var(--muted); }
.pf-builder select, .pf-builder input { padding: 5px 7px; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 6px; font-size: 12px; }
.pf-pos { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.pf-pos-chip { min-width: 34px; height: 28px; border-radius: 6px; font-size: 11px; color: var(--muted); background: var(--panel); border: 1px solid var(--line); cursor: pointer; }
.pf-pos-chip.on { background: rgba(var(--surface-base-rgb, 117, 187, 255), .16); color: var(--accent); border-color: var(--accent); font-weight: 700; }
.pf-hint { font-size: 11px; color: var(--muted); margin-left: 4px; }
.pf-actions { justify-content: flex-end; }
.player-table tr.pf-filtered { opacity: .32; }
body.sport-wnba .pool-filters-bar, body.sport-wnba .pf-builder { display: none; }
.pf-empty { font-size: 12px; color: var(--muted); font-style: italic; }
.pf-cond-x { width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--line); background: transparent; color: var(--muted); font-weight: 700; cursor: pointer; line-height: 1; }
.pf-cond-x:hover { color: var(--bad); border-color: var(--bad); }
.gr-suggest-chip { min-width: 0; padding: 0 10px; height: 26px; }

/* Rules tab (dedicated Build Rules section) */
.tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 16px; padding: 0 5px; margin-left: 6px; border-radius: 8px; background: var(--accent); color: var(--panel); font-size: 10px; font-weight: 800; line-height: 1; }
.tab-badge[hidden] { display: none; }
.wnba-only-action { display: none; }
body.sport-wnba .mlb-only-tab { display: none; }
body.sport-wnba .wnba-only-action { display: inline-flex; align-items: center; justify-content: center; }
.portfolio-controls-panel { max-width: 1320px; }
.portfolio-control-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.portfolio-controls-lede { margin: 6px 0 10px; color: var(--text); font-size: 13px; line-height: 1.5; max-width: 900px; }
.portfolio-shared-note { margin: 0 0 14px; padding: 10px 12px; border: 1px solid var(--control-line, #294969); border-left: 3px solid var(--accent); border-radius: 8px; background: var(--surface-base, #0b1c2e); color: var(--foreground-soft, #a9bdd5); font-size: 12px; line-height: 1.45; }
/* One portfolio section visible at a time (sub-tab nav), so the active card fills the width. */
.portfolio-subtabs { margin: 14px 0 6px; flex-wrap: wrap; }
.portfolio-control-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
.portfolio-control-card[hidden] { display: none; }
.portfolio-control-card { min-width: 0; padding: 15px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); }
.portfolio-control-card.portfolio-risk { border-color: #5f4c2b; background: linear-gradient(180deg, rgba(78,54,20,.18), var(--panel-2) 96px); }
.portfolio-control-card.portfolio-s1m { border-color: var(--control-line, #28547f); }
.portfolio-control-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 5px; }
.portfolio-control-head h3 { margin: 2px 0 0; color: var(--text); font-size: 17px; }
.portfolio-control-card h4 { margin: 14px 0 7px; padding-top: 9px; border-top: 1px solid rgba(var(--border-muted-rgb, 87, 126, 177), .18); color: var(--foreground-soft, #9fb8d2); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.portfolio-control-card > .mini { min-height: 34px; margin: 0; line-height: 1.45; }
.portfolio-fields { display: grid; grid-template-columns: repeat(3, minmax(110px, 1fr)); gap: 8px; }
.portfolio-fields label { display: flex; flex-direction: column; gap: 5px; min-width: 0; color: var(--foreground-muted, #91a8c2); font-size: 11px; font-weight: 650; }
.portfolio-fields input { width: 100%; min-width: 0; box-sizing: border-box; padding: 7px 8px; border: 1px solid var(--control-line, #29425e); border-radius: 6px; background: var(--surface-field, #071523); color: var(--text); font: 700 12px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; }
.portfolio-fields input:focus { outline: none; border-color: var(--accent); box-shadow: none; }
.portfolio-fields input.invalid { border-color: #e36b6b; box-shadow: 0 0 0 2px rgba(227,107,107,.12); }
.portfolio-fixed-list { display: grid; gap: 7px; margin: 12px 0 0; }
.portfolio-fixed-list div { display: flex; justify-content: space-between; gap: 16px; padding: 7px 9px; border: 1px solid rgba(var(--border-muted-rgb, 87, 126, 177), .16); border-radius: 6px; background: var(--surface-base, #081624); }
.portfolio-fixed-list dt { color: var(--muted); font-size: 11px; }
.portfolio-fixed-list dd { margin: 0; color: var(--text); font-size: 12px; font-weight: 700; }
@media (max-width: 1050px) { .portfolio-control-grid { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .portfolio-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } .portfolio-control-actions { justify-content: flex-start; } }
.rules-panel .rules-intro { margin: 2px 0 18px; font-size: 13px; color: var(--muted); max-width: 720px; line-height: 1.5; }
.rules-group { border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; margin-bottom: 14px; background: var(--panel-2); }
.rules-group-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.rules-group-head h3 { margin: 0; font-size: 14px; font-weight: 700; color: var(--text); }
.rules-hint { display: block; font-size: 12px; color: var(--muted); line-height: 1.5; margin: 0 0 12px; max-width: 720px; }
.rules-group .pf-chips { margin-bottom: 4px; }
.rules-limit-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.rules-limit { display: inline-flex; align-items: center; gap: 10px; margin: 0; }
.rules-limit-label { font-size: 13px; color: var(--text); font-weight: 600; }
.rules-limit input { width: 66px; padding: 6px 8px; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 6px; font-size: 13px; text-align: center; }
.rules-limit-row .rules-hint { margin: 0; flex: 1 1 260px; }
/* Scope tag on a Rules group: says which engine actually reads the control.
   Amber = binds Late Swap but not Build; red = reaches nothing today. */
.rules-scope-tag { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--warn); border: 1px solid var(--warn); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.rules-group-head .rules-scope-tag { margin-right: auto; }
.rules-scope-tag.rules-scope-dead { color: var(--bad); border-color: var(--bad); }
.rules-hint-warn { color: var(--warn); }
.rules-hint-dead { color: var(--bad); }
.pcal-dim td { color: var(--muted); }
.state-chip.muted { color: var(--muted); background: var(--panel-2); border-color: var(--line-soft); }
.pcal-empty { text-align: center; color: var(--muted); padding: 22px 0; }

/* --- Audit overrides re-applied at the very end: these selectors are defined
   later in this file (trailing Rules / Contest-EV CSS), so they must be
   re-asserted here to win the cascade. --- */
.pf-chip, .pf-add { border-radius: 6px; }
.cev-ev-pos, .cev-be-easy, .truth-won { color: var(--pos); }
.gr-suggest-chip { min-height: 28px; height: 28px; }

/* Selected Player recent-games trend chart + game log (from /api/player-log). */
.sel-gamelog { margin-top: 12px; }
.sel-gl-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.gl-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.gl-tab { font-size: 11px; font-weight: 700; padding: 5px 9px; border-radius: 6px; background: var(--surface-base, #0b1a2b); color: var(--muted); border: 1px solid var(--line); cursor: pointer; }
.gl-tab.on { background: var(--surface-base, #17385c); color: var(--foreground, #f4f8ff); border-color: var(--control-accent, #6ea6f8); }
.gl-chart-wrap { background: var(--surface-base, #0a1a2b); border: 1px solid var(--line); border-radius: 8px; padding: 8px 6px 2px; }
.gl-chart { width: 100%; height: auto; display: block; }
.gl-bar { fill: var(--control-accent, #3d8fd6); }
.gl-bar.neg { fill: #e0685f; }
.gl-zero { stroke: rgba(var(--foreground-soft-rgb, 148, 178, 214), .35); stroke-width: 1; stroke-dasharray: 2 2; }
.gl-trend { stroke: #ffd166; stroke-width: 1.4; stroke-dasharray: 3 3; }
.gl-xlab { fill: var(--foreground-muted, #8da9c6); font-size: 9px; text-anchor: middle; }
.gl-table-wrap { overflow-x: auto; margin-top: 9px; -webkit-overflow-scrolling: touch; }
/* table-layout:auto (not the global `table{fixed}`) so columns size to content —
   the Date column needs more room than single-char stat columns or "Jun 30" clips. */
.gl-table { width: 100%; border-collapse: collapse; font-size: 11.5px; table-layout: auto; }
.gl-table th { text-align: left; color: var(--foreground-muted, #6c86a6); font-size: 9.5px; text-transform: uppercase; letter-spacing: .04em; padding: 4px 6px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.gl-table th.n, .gl-table td.n { text-align: right; font-variant-numeric: tabular-nums; }
.gl-table td { padding: 5px 6px; border-bottom: 1px solid rgba(var(--border-muted-rgb, 87, 126, 177), .12); color: var(--foreground-soft, #b7c7dd); white-space: nowrap; }
.gl-table td.gl-dk { color: var(--foreground, #eaf3fc); font-weight: 700; }
.sel-gl-empty { font-size: 12px; color: var(--muted); font-style: italic; padding: 10px 2px; }

/* Data Source Review tab (admin-only). Static review content; dsr- prefix
   keeps it isolated from the rest of the app's table/tag styles. */
#view-datareview .panel { max-width: 1040px; }
.dsr-lede {
  background: var(--surface-base, #0d2238); border: 1px solid var(--control-line, #28425f); border-left: 3px solid var(--control-accent, #7eb7ff);
  border-radius: 8px; padding: 12px 16px; margin: 14px 0 4px;
  font-size: 13.5px; line-height: 1.55; color: var(--foreground, #cfe1f5);
}
.dsr-h { font-size: 15px; margin: 26px 0 2px; color: var(--foreground, #eaf3fc); }
.dsr-sub { margin: 0 0 10px; color: var(--foreground-muted, #8aa0b8); font-size: 12.5px; }
.dsr-scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  background: var(--surface-base, #0a1626); border: 1px solid var(--control-line, #22344a); border-radius: 8px;
}
.dsr-table { border-collapse: collapse; width: 100%; font-size: 12.5px; table-layout: auto; }
.dsr-table th {
  text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--foreground-muted, #6c86a6); padding: 9px 12px; border-bottom: 1px solid var(--control-line, #22344a); white-space: nowrap;
}
.dsr-table td { padding: 9px 12px; border-bottom: 1px solid var(--control-line, #182b40); vertical-align: top; color: var(--foreground-soft, #c3d4e8); line-height: 1.5; }
.dsr-table tr:last-child td { border-bottom: none; }
.dsr-table td b { color: var(--foreground, #eaf3fc); font-weight: 650; }
.dsr-num { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--foreground-muted, #6c86a6); }
.dsr-lever { display: block; margin-top: 3px; font-size: 11px; color: var(--foreground-muted, #7f95ad); }
.dsr-tag {
  display: inline-block; font-size: 10px; font-weight: 800; padding: 2px 8px;
  border-radius: 999px; white-space: nowrap; letter-spacing: .02em;
}
.dsr-tag.trivial { background: #0d3524; color: #5fe3a1; }
.dsr-tag.small { background: var(--surface-base, #122c47); color: var(--control-accent, #7eb7ff); }
.dsr-tag.medium { background: #33260c; color: #ffd166; }
.dsr-tag.bug { background: #3a161b; color: #ff8d99; }
.dsr-tag.park { background: var(--surface-base, #1a2636); color: var(--foreground-muted, #8aa0b8); }
.dsr-details {
  background: var(--surface-base, #0a1626); border: 1px solid var(--control-line, #22344a); border-radius: 8px;
  margin: 10px 0; padding: 0;
}
.dsr-details summary {
  cursor: pointer; padding: 11px 14px; font-weight: 650; font-size: 13.5px; color: var(--foreground, #eaf3fc);
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.dsr-mini { font-weight: 400; color: var(--foreground-muted, #8aa0b8); font-size: 11.5px; }
.dsr-inner { padding: 0 16px 12px; font-size: 13px; color: var(--foreground-soft, #c3d4e8); }
.dsr-inner p { margin: 6px 0; }
.dsr-inner ul { margin: 6px 0; padding-left: 20px; }
.dsr-inner li { margin: 5px 0; line-height: 1.5; }
.dsr-inner b { color: var(--foreground, #eaf3fc); font-weight: 650; }
.dsr-neg { color: var(--foreground-muted, #8aa0b8); }
#view-datareview code {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 11.5px;
  background: var(--surface-base, #16283d); padding: 1px 5px; border-radius: 4px; color: var(--foreground-soft, #a8c4e4);
}
.dsr-foot { margin-top: 22px; color: var(--foreground-muted, #7f95ad); font-size: 11.5px; border-top: 1px solid var(--control-line, #22344a); padding-top: 12px; }

/* The app's global td rule ellipsizes on one line (grid tables); review
   prose cells must wrap instead. */
.dsr-table td { white-space: normal; overflow: visible; text-overflow: clip; }
.dsr-table td.dsr-num, .dsr-table td:last-child { white-space: nowrap; }
.dsr-table td:nth-child(2) { min-width: 320px; width: 100%; }

/* DK draft-alert flag (e.g. two-way "pitching stats only") next to the name. */
.dk-alert-flag {
  margin-left: 5px; font-size: 11px; color: #ffb454; cursor: help;
}

/* Admin Grid Audit tab. */
#view-audit .panel { max-width: 1040px; }
.audit-actions { display: flex; gap: 8px; align-items: center; }
.audit-actions input[type="date"] { height: 28px; background: var(--surface-field, #102038); border: 1px solid var(--control-line, #46658d); color: var(--foreground, #dce9ff); border-radius: 6px; padding: 0 8px; }
.audit-empty { color: var(--foreground-muted, #8aa0b8); font-size: 13px; padding: 14px 2px; }
.audit-empty.audit-bad { color: #ff8d99; }
.audit-card { background: var(--surface-raised, #0a1626); border: 1px solid var(--control-line, #22344a); border-radius: 8px; margin: 10px 0; }
.audit-card > summary { cursor: pointer; padding: 11px 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.audit-date { font-weight: 800; color: var(--foreground, #eaf3fc); font-size: 14px; font-variant-numeric: tabular-nums; }
.audit-slate { color: var(--foreground-muted, #8aa0b8); font-size: 12.5px; }
.audit-gen { margin-left: auto; color: var(--foreground-muted, #6c86a6); font-size: 11px; }
.audit-badge { font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: var(--surface-base, #16283d); color: var(--foreground-soft, #a8c4e4); white-space: nowrap; }
.audit-badge.good { background: #0d3524; color: #5fe3a1; }
.audit-badge.warn { background: #33260c; color: #ffd166; }
.audit-badge.bad { background: #3a161b; color: #ff8d99; }
.audit-body { padding: 0 14px 12px; }
.audit-stats { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--foreground-soft, #c3d4e8); padding: 4px 0 8px; border-top: 1px solid var(--control-line, #182b40); }
.audit-stats b { color: var(--foreground, #eaf3fc); }
.audit-bad { color: #ff8d99; }
.audit-note { color: #ffd166; font-size: 12px; margin: 4px 0; }
.audit-drill { margin: 8px 0; font-size: 12.5px; color: var(--foreground-soft, #c3d4e8); }
.audit-drill b { color: var(--foreground, #eaf3fc); }
.audit-drill ul { margin: 4px 0; padding-left: 20px; }
.audit-drill li { margin: 2px 0; font-variant-numeric: tabular-nums; }
.audit-drill p { margin: 4px 0; color: var(--foreground-muted, #8aa0b8); line-height: 1.5; }

/* Drag-to-reorder contest cards: card 1 fills first. */
.contest-card-draggable { cursor: grab; }
.contest-card-draggable:active { cursor: grabbing; }
.contest-card.dragging { opacity: 0.45; }
.contest-card.drag-over { outline: 1px dashed var(--control-accent, #7eb7ff); outline-offset: -1px; }
.contest-drag-grip { margin-left: 6px; color: var(--foreground-muted, #5f7794); letter-spacing: -2px; font-weight: 900; }

/* Total entry-fee buy-in in the Contest Select strip. */
.contest-total-fees b { color: #ffd166; }
/* Currency is green, with negative amounts red, independently of blue data. */
.money-green { color: var(--pos) !important; -webkit-text-fill-color: var(--pos); font-weight: 700; }
.money-negative { color: #ff5e64 !important; -webkit-text-fill-color: #ff5e64; font-weight: 700; }
/* The currency wrapper is a nested <span>; the summary-strip chip rule boxes every
   span, which drew a box-in-a-box on the greened fees/won figure. Strip that
   inherited chip box off the wrapper (higher specificity than the chip rule). */
.contest-summary-strip span.money-green,
.contest-summary-strip span.money-negative {
  display: inline; align-items: initial; gap: 0;
  min-height: 0; padding: 0; border: 0; border-radius: 0; background: none;
}

/* Create Contest modal (frontend-only synthetic contest slot; theme-matched) */
/* Create Contest is both-sport as of 7/21 (owner: "add create contest to mlb
   like wnba has") - the old WNBA-only display gate is retired. */
.cc-backdrop { position: fixed; inset: 0; background: rgba(var(--surface-base-rgb, 2, 10, 18), .62); display: flex; align-items: center; justify-content: center; z-index: 9999; }
.cc-modal { background: var(--panel, #0a1a2a); border: 1px solid rgba(var(--border-muted-rgb, 117, 187, 255), .22); border-radius: 12px; padding: 18px 20px; width: min(430px, 92vw); box-shadow: 0 16px 48px rgba(0,0,0,.55); color: var(--text, #f1f8ff); }
/* Keep long desktop settings dialogs reachable on laptop-height windows. */
@media (min-width: 641px) {
  :root.desktop-palette .cc-modal { max-height: calc(100dvh - 32px); overflow-y: auto; }
}
.cc-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; font-size: 15px; }
.cc-x { background: none; border: none; color: var(--muted, #8da9c6); font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px; }
.cc-x:hover { color: var(--text, #f1f8ff); }
.cc-lab { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted, #8da9c6); margin: 12px 0 5px; }
.cc-select, .cc-input { width: 100%; background: var(--bg, #020a12); border: 1px solid rgba(var(--border-muted-rgb, 117, 187, 255), .22); color: var(--text, #f1f8ff); border-radius: 7px; padding: 9px 11px; font-size: 13px; box-sizing: border-box; }
.cc-select { height: 36px; min-height: 36px; line-height: 18px; padding-top: 6px; padding-bottom: 6px; }
.cc-select:focus, .cc-input:focus { outline: none; border-color: var(--accent, #75bbff); }
/* Tappable contest list - long names WRAP instead of clipping (native <select>
   can't wrap its closed value; this is the phone-friendly picker). */
.cc-list { display: flex; flex-direction: column; gap: 6px; max-height: 42vh; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 2px; margin-top: 2px; }
.cc-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; text-align: left; box-sizing: border-box; padding: 9px 11px; border-radius: 8px; border: 1px solid rgba(var(--control-accent-rgb, 117, 187, 255), .16); background: rgba(255,255,255,.02); color: var(--text, #f1f8ff); cursor: pointer; /* override the global button{height:34px} - rows must grow to fit the wrapped 2-line content */ height: auto; min-height: 0; flex: 0 0 auto; }
.cc-opt b { font-weight: 600; font-size: 13px; line-height: 1.3; white-space: normal; overflow-wrap: anywhere; }
.cc-opt-meta { font-size: 12px; color: var(--muted, #8da9c6); }
.cc-opt:hover { border-color: rgba(var(--control-accent-rgb, 117, 187, 255), .4); }
.cc-opt.selected { border-color: var(--accent, #75bbff); background: rgba(var(--surface-selected-rgb, 117, 187, 255), .14); }
.cc-empty { padding: 14px 10px; text-align: center; font-size: 13px; color: var(--muted, #8da9c6); }
/* Entry-cap filter chips (owner 7/23): compact toggles above the list. */
.cc-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 6px; }
.cc-chip { height: auto; min-height: 0; padding: 5px 12px; font-size: 12px; border-radius: 999px; border: 1px solid rgba(var(--border-muted-rgb, 117, 187, 255), .2); background: rgba(255,255,255,.03); color: var(--muted, #8da9c6); cursor: pointer; }
.cc-chip:hover { border-color: rgba(var(--control-accent-rgb, 117, 187, 255), .45); color: var(--text, #f1f8ff); }
.cc-chip.selected { border-color: var(--accent, #75bbff); background: rgba(var(--surface-selected-rgb, 117, 187, 255), .16); color: var(--text, #f1f8ff); }
/* Desktop (owner 7/23 "double rows so i can scroll faster"): widen the modal
   and lay the contest list out two-up. Phones keep the single column - two
   columns at 92vw would clip the long satellite names. */
@media (min-width: 700px) {
  .cc-modal { width: min(760px, 92vw); }
  .cc-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; max-height: 56vh; }
  .cc-opt { width: auto; }
}

/* Backtest "Finish" column: place is primary, "/ field size" muted. */
.finish-cell .finish-of { color: var(--muted, #8da9c6); font-size: 11px; }
/* Contest-card action icons (settings on real cards, remove-x on synthetic cards). */
.contest-card > .eyebrow { display: flex; align-items: center; gap: 6px; }
.contest-settings { margin-left: auto; padding: 0 5px; font-size: 13px; line-height: 1; color: var(--control-accent, #9fd5ff); cursor: pointer; border: 1px solid rgba(var(--border-muted-rgb, 117, 187, 255), .28); border-radius: 999px; background: rgba(var(--surface-base-rgb, 117, 187, 255), .08); }
.contest-settings:hover { color: #ffffff; border-color: rgba(var(--control-accent-rgb, 117, 187, 255), .55); background: rgba(var(--surface-hover-rgb, 117, 187, 255), .16); }
.contest-settings-line { color: var(--control-accent, #9fd5ff); }
.contest-build-line { color: var(--muted, #8da9c6); }
.contest-remove { float: none; margin-left: 4px; padding: 0 4px; font-size: 15px; line-height: 1; color: var(--muted, #8da9c6); cursor: pointer; }
.contest-remove:hover { color: #ff8d99; }
.cc-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; }
.cc-actions button { background: rgba(var(--surface-base-rgb, 117, 187, 255), .08); border: 1px solid rgba(var(--border-muted-rgb, 117, 187, 255), .22); color: var(--text, #f1f8ff); border-radius: 7px; padding: 8px 18px; cursor: pointer; font-size: 13px; }
.cc-actions button:hover { background: rgba(var(--surface-hover-rgb, 117, 187, 255), .16); }
.cc-actions .cc-primary { background: var(--accent, #75bbff); border-color: var(--accent, #75bbff); color: var(--surface-page, #041018); font-weight: 600; }
.cc-actions .cc-primary:hover { background: var(--primary-hover-fill); filter: brightness(1.08); }
.cc-note { font-size: 11px; color: var(--muted, #8da9c6); margin: 14px 0 0; line-height: 1.4; }
.cl-check { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; font-size: 12.5px; color: var(--text, #f1f8ff); cursor: pointer; }
.cl-check input { width: 15px; height: 15px; accent-color: var(--accent, #75bbff); cursor: pointer; }
.cl-salary-row { display: flex; gap: 10px; }
.cl-salary { flex: 1; display: block; }
.cl-salary .cc-lab { margin-top: 12px; }
.cl-salary .cc-input { width: 100%; box-sizing: border-box; }

/* ---- WNBA head-to-head matchup popup (owner 7/14) ------------------------- */
/* Clicking anywhere on a WNBA game card opens it (MLB weather-popup parity). */
.mu-series {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 8px 0 16px;
}
.mu-series-team {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 18px;
  font-weight: 950;
  color: var(--foreground, #f2f8ff);
}
.mu-series-team .mu-logo { width: 28px; height: 28px; }
.mu-series-score {
  font-size: 28px;
  font-weight: 950;
  color: #e8b34b;
  letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
}
.mu-series-score span { color: var(--foreground-muted, #86a9ca); padding: 0 3px; font-size: 20px; }
.mu-logo { width: 18px; height: 18px; object-fit: contain; display: inline-block; vertical-align: middle; }
.mu-game {
  background: var(--surface-base, #081929);
  border: 1px solid var(--control-line, #1c4669);
  border-radius: 12px;
  padding: 11px 13px 12px;
  margin-bottom: 10px;
}
.mu-game-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.mu-date-chip {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--control-accent, #9fd5ff);
  background: rgba(var(--surface-base-rgb, 117, 187, 255), 0.1);
  border: 1px solid var(--control-line, #244f73);
  border-radius: 999px;
  padding: 2px 10px;
}
.mu-box {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.mu-box th {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.6px;
  color: var(--foreground-muted, #5f83a6);
  text-align: center;
  padding: 0 4px 4px;
}
.mu-box td {
  text-align: center;
  padding: 3px 4px;
  font-size: 13px;
  color: var(--foreground-muted, #86a9ca);
}
.mu-box td.mu-team { text-align: left; }
.mu-box td.mu-team span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 950;
  font-size: 14px;
}
.mu-box td.mu-total { font-size: 16px; font-weight: 950; color: var(--control-accent, #9fd5ff); }
.mu-box tr.mu-winner td { color: var(--foreground, #f2f8ff); }
.mu-box tr.mu-winner td.mu-total { color: var(--data-positive, #8fdb9d); }
.mu-w {
  font-style: normal;
  font-size: 9px;
  font-weight: 950;
  color: #052012;
  background: #8fdb9d;
  border-radius: 4px;
  padding: 1px 4px;
  letter-spacing: 0.5px;
}
.mu-leaders-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--control-line, #10314e);
}
.mu-leader-col {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
}
.mu-leader-team {
  font-size: 12px;
  font-weight: 950;
  color: var(--control-accent, #9fd5ff);
  min-width: 32px;
}
.mu-stat {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  min-width: 54px;
}
.mu-stat b { font-size: 15px; color: var(--foreground, #f2f8ff); font-weight: 950; line-height: 1.1; }
.mu-stat small { font-size: 8.5px; letter-spacing: 0.8px; color: var(--foreground-muted, #5f83a6); font-weight: 900; }
.mu-stat i { font-style: normal; font-size: 10px; color: var(--foreground-muted, #86a9ca); white-space: nowrap; }
.mu-score-line { display: flex; gap: 9px; align-items: baseline; font-size: 15px; }
.mu-score-line b { color: var(--foreground, #f2f8ff); font-weight: 950; }
.mu-score-line b.mu-won { color: var(--data-positive, #8fdb9d); }
/* ---- Late Swap net-exposure summary (owner 7/14) --------------------------- */
.ls-summary {
  background: #081929;
  border: 1px solid #1c4669;
  border-radius: 14px;
  padding: 13px 16px 14px;
  margin: 12px 0 8px;
}
.ls-summary-head {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.ls-summary-head .eyebrow { margin-right: 4px; }
.ls-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  background: rgba(117, 187, 255, 0.07);
  border: 1px solid #1c4669;
  border-radius: 10px;
  padding: 5px 13px;
}
.ls-chip small {
  font-size: 8.5px;
  font-weight: 900;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #5f83a6;
}
.ls-chip b {
  font-size: 15px;
  font-weight: 950;
  color: #f2f8ff;
  font-variant-numeric: tabular-nums;
}
.ls-chip.good b { color: var(--data-positive, #8fdb9d); }
.ls-chip.warn b { color: #e8b34b; }
.ls-net {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.ls-net-col {
  flex: 1 1 300px;
  max-width: 480px;
  background: #071320;
  border: 1px solid #16395a;
  border-radius: 12px;
  padding: 9px 12px 10px;
}
.ls-net-title {
  font-size: 10.5px;
  font-weight: 950;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 7px;
  padding-bottom: 6px;
  border-bottom: 1px solid #10314e;
}
.ls-net-title.in { color: #8fdb9d; }
.ls-net-title.out { color: #ff8a97; }
.ls-net-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px 8px;
  border-radius: 7px;
  overflow: hidden;
}
.ls-net-bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 7px;
  pointer-events: none;
}
.ls-net-bar.in { background: rgba(143, 219, 157, 0.09); }
.ls-net-bar.out { background: rgba(255, 138, 151, 0.08); }
.ls-net-badge {
  position: relative;
  min-width: 34px;
  text-align: center;
  font-size: 13px;
  font-weight: 950;
  font-variant-numeric: tabular-nums;
  border-radius: 7px;
  padding: 2px 6px;
}
.ls-net-badge.in { color: #052012; background: #8fdb9d; }
.ls-net-badge.out { color: #2a070c; background: #ff8a97; }
.ls-net-logo {
  position: relative;
  width: 18px;
  height: 18px;
  object-fit: contain;
}
.ls-net-row b {
  position: relative;
  color: #f2f8ff;
  font-weight: 950;
  font-size: 13.5px;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ls-own-pill {
  position: relative;
  font-size: 11px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: #9fd5ff;
  background: rgba(117, 187, 255, 0.1);
  border: 1px solid #244f73;
  border-radius: 999px;
  padding: 1.5px 9px;
}
.ls-own-pill.chalk { color: #ffb3bc; background: rgba(255, 138, 151, 0.12); border-color: #6e2f3a; }
.ls-own-pill.lev { color: var(--data-positive, #a9e8b4); background: rgba(143, 219, 157, 0.1); border-color: #2d5c3c; }
.ls-proj {
  position: relative;
  min-width: 34px;
  text-align: right;
  font-size: 12.5px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: #86a9ca;
}
/* Swap Watch post-game verdict (owner 7/15): proj -> actual + Result chip */
.ls-chip.bad b { color: #ff8a97; }
.ls-proj i { font-style: normal; color: #5f83a6; font-weight: 900; }
.ls-proj em { font-style: normal; color: #f2f8ff; font-weight: 950; font-size: 13px; }

/* ---- Sign-in card motion and feedback ---------------------------------- */
/* Card lift + entrance. */
.login-card.login-split {
  position: relative;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  animation: login-rise 0.5s cubic-bezier(0.2, 0.9, 0.25, 1);
}
@keyframes login-rise { from { transform: translateY(14px); opacity: 0; } }
.login-shake { animation: login-shake 0.4s !important; }
@keyframes login-shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(3px); }
  30%, 50%, 70% { transform: translateX(-5px); }
  40%, 60% { transform: translateX(5px); }
}
/* Brand-panel pitch. */
.login-tick { color: var(--accent-2); font-size: 11px; line-height: 1.6; flex: 0 0 auto; }
.login-stat b { color: var(--text); font-weight: 600; }
.login-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.login-badges span {
  font-size: 10.5px; letter-spacing: 0.8px; color: var(--muted);
  border: 1px solid var(--line-soft); border-radius: 999px; padding: 3px 10px;
  background: rgba(var(--surface-base-rgb, 16, 42, 64), 0.35);
}
/* Caps-lock hint inside the password field. */
.login-pw-wrap { position: relative; }
.login-caps {
  position: absolute; right: 38px; top: 50%; transform: translateY(-50%);
  font-size: 10px; letter-spacing: 0.6px; color: var(--warn); pointer-events: none;
}
/* Sign-in button feel. */
.login-primary { transition: transform 0.12s, filter 0.12s; }
.login-primary:hover:not([disabled]) { transform: translateY(-1px); filter: brightness(1.06); }
.login-primary[disabled] { opacity: 0.75; cursor: default; }
/* Live footer strip. */
.login-live {
  display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--line-soft); font-size: 12px; color: var(--muted);
}
.login-live-right { margin-left: auto; color: var(--accent); font-size: 11px; letter-spacing: 0.4px; }
.login-pulse {
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent-2);
  box-shadow: 0 0 0 0 rgba(53, 227, 164, 0.5); animation: login-pulse 2.2s infinite;
}
@keyframes login-pulse {
  70% { box-shadow: 0 0 0 7px rgba(53, 227, 164, 0); }
  100% { box-shadow: 0 0 0 0 rgba(53, 227, 164, 0); }
}


/* ---------------------------------------------------------------------------
   APPROVED MOBILE AUTH (owner 8/7). His design, ported onto the REAL login:
   every field id, data-action and endpoint is the existing one - only the
   phone-width presentation changes. Desktop (>640px) keeps the two-panel card
   untouched until he signs off on a desktop layout; the shipped package had no
   desktop layout at all (its only breakpoints were 560/380 and it drew an
   iPhone home bar on every screen).
   --------------------------------------------------------------------------- */
.auth-hero { display: none; }
/* hero art is shared by the phone and desktop layouts */
:root { --auth-bg: none; --auth-hero-a: none; --auth-hero-b: none; }
.auth-hero-login { background-image: var(--auth-hero-a); }
.auth-hero-signup { background-image: var(--auth-hero-b); }

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0 12px;
  color: #8296ae;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.auth-divider::before,
.auth-divider::after { content: ""; flex: 1; height: 1px; background: rgba(140, 160, 185, .28); }
.auth-social {
  width: 100%;
  height: 52px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 14px;
  background: rgba(9, 16, 26, .96);
  border: 1px solid rgba(140, 160, 185, .34);
  color: #eaf2ff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.auth-social-icon { width: 19px; height: 19px; flex: none; }
.auth-social-icon.apple { fill: #fff; }

.auth-mobile-only { display: none; }
#loginOverlay[hidden],
#loginOverlay .auth-extra[data-oauth-ready="false"] { display: none !important; }
#loginOverlay :focus-visible {
  outline: 1px solid var(--control-accent, #75bbff);
  outline-offset: -1px;
}
/* Login fields use their existing accent border as the single focus edge. */
#loginOverlay input:focus-visible { outline: none; }
/* Keep the login/signup focus border visible above their field styles. */
#loginOverlay .login-main input:focus,
#loginOverlay #signupForm input:focus {
  border-color: rgba(var(--control-accent-rgb, 96, 165, 255), .85);
  box-shadow: none;
}

@media (max-width: 640px) {
  /* the card is taller than a phone - the desktop overlay centres and clips it,
     which ate the logo at the top and the Apple button at the bottom. */
  #loginOverlay {
    display: block;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  #loginOverlay { background: radial-gradient(120% 90% at 50% 0%, #0b1a2b 0%, #04080f 60%, #01040a 100%); }

  .login-card.login-split,
  #signupForm.login-card,
  #forgotForm.login-card,
  #resetForm.login-card {
    /* FULL-BLEED on a real phone. The approved art is a mock of a handset, so
       its card carries a device frame (1px outline + 34px corners) and a fake
       iOS home bar. Reproducing those on an actual phone draws a phone inside
       a phone and leaves the card floating in a scrollable overlay, which is
       what "the outline" and "it moves around" were. */
    margin: 0;
    width: 100vw;
    max-width: 100vw;
    min-height: 100vh;
    min-height: 100dvh;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: linear-gradient(180deg, rgba(5, 13, 22, .98), rgba(0, 5, 10, .995));
    overflow: hidden;
    padding-top: env(safe-area-inset-top);
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
  }
  /* the OS draws the real one */
  .auth-home-indicator { display: none; }

  /* hero art */
  .auth-hero {
    display: block;
    width: 100%;
    aspect-ratio: 853 / 930;
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
  }

  /* the desktop brand rail is redundant next to the hero */
  #loginOverlay .login-brand { display: none; }

  .login-main { padding: 4px 22px 18px; gap: 12px; }
  .login-main h2 {
    font-size: 26px;
    letter-spacing: .4px;
    color: #4f9dff;
    text-transform: uppercase;
    font-weight: 800;
  }
  .login-sub { color: #b7c6d8; font-size: 14px; margin: -6px 0 2px; }
  .login-main label { display: none; }
  /* signup labels are bare text nodes wrapping the input - zero them out and
     restore the size on the control itself. */
  #signupForm label { font-size: 0; }
  #signupForm label input { font-size: 16px; }
  .login-pw-head { display: flex; justify-content: flex-end; }
  .login-pw-head label { display: none; }

  .login-main input,
  #signupForm input {
    height: 54px;
    border-radius: 14px;
    background: rgba(13, 22, 34, .96);
    border: 1px solid rgba(120, 140, 165, .34);
    color: #eaf2ff;
    font-size: 16px;
    padding: 0 16px;
  }
  .login-main input::placeholder,
  #signupForm input::placeholder { color: #7e90a8; }
  .login-pw-wrap { position: relative; }
  .login-eye { right: 14px; }

  .login-primary,
  #signupForm button[type="submit"] {
    height: 54px;
    margin-top: 6px;
    border-radius: 14px;
    background: linear-gradient(180deg, #2e7dd8, #1a55ad);
    border: 0;
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    box-shadow: none;
  }

  .auth-mobile-only { display: block; }
  .auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 0 12px;
    color: #8296ae;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
  }
  .auth-divider::before,
  .auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(140, 160, 185, .28);
  }
  .auth-social {
    width: 100%;
    height: 52px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 14px;
    background: rgba(9, 16, 26, .96);
    border: 1px solid rgba(140, 160, 185, .34);
    color: #eaf2ff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
  }
  .auth-social-icon { width: 19px; height: 19px; }
  .auth-social-icon.apple { fill: #fff; }
  .auth-home-indicator {
    width: 104px;
    height: 5px;
    margin: 20px auto 4px;
    border-radius: 99px;
    background: rgba(255, 255, 255, .94);
  }

  #loginOverlay .login-stats,
  #loginOverlay .login-badges,
  #loginOverlay .login-live { display: none; }
  .login-toggle { text-align: center; color: #93a7c0; }
}


/* ---------------------------------------------------------------------------
   APPROVED DESKTOP AUTH (owner 8/7 screenshot): one full-bleed rounded card,
   athlete hero on the left under BUILD YOUR LEGACY, form column on the right.
   Same real inputs, ids, actions and endpoints as every other layout.
   --------------------------------------------------------------------------- */
.auth-hero-tag { display: none; }

@media (min-width: 641px) {
  #loginOverlay {
    background:
      var(--surface-base, radial-gradient(1100px 700px at 20% -10%, rgba(24, 76, 130, .5), transparent 62%),
      radial-gradient(900px 700px at 100% 110%, rgba(12, 52, 96, .42), transparent 60%),
      #04070d);
    padding: 55px 60px;
  }

  #loginOverlay .login-card.login-split,
  #loginOverlay #signupForm.login-card {
    width: min(1180px, calc(100vw - 120px));
    height: min(760px, calc(100vh - 110px));
    max-width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(360px, 1fr);
    gap: 0;
    padding: 0;
    overflow: hidden;
    border-radius: 26px;
    border: 1px solid rgba(var(--border-muted-rgb, 120, 145, 175), .38);
    background: var(--surface-raised, linear-gradient(180deg, #070e18, #02060c));
    box-shadow: 0 50px 130px rgba(0, 0, 0, .7);
  }

  /* left: the approved art, with the tagline under it */
  #loginOverlay .auth-hero {
    display: flex;
    position: relative;
    align-items: flex-end;
    min-height: 0;
    padding: 34px 40px;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    background-color: #04070d;
    border-right: 1px solid rgba(120, 145, 175, .28);
  }
  #loginOverlay .auth-hero-signup { background-image: var(--auth-hero-a); }
  /* The signup card has ~10 direct children, each forced to grid column 2 -
     so auto-placement gave the hero COLUMN 1, ROW 1 ONLY, and the arena art
     cover-cropped into a 40px strip (the "messed up" create-account page,
     owner 8/12). grid-row: 1/-1 cannot span IMPLICIT rows, so the hero leaves
     the flow entirely and fills the left column absolutely; 60.784% is the
     grid's own 1.55fr / 2.55fr split. */
  #loginOverlay #signupForm.login-card { position: relative; align-content: center; }
  #loginOverlay #signupForm .auth-hero {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 60.784%;
  }
  #loginOverlay .auth-hero-tag {
    display: block;
    margin: 0;
    font-size: clamp(19px, 1.9vw, 27px);
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #f2f7ff;
    line-height: 1.34;
  }
  #loginOverlay .auth-hero-tag span { display: block; color: #cfe0f5; }
  #loginOverlay .login-brand { display: none; }

  /* right: the form column */
  #loginOverlay .login-main,
  #loginOverlay #signupForm > *:not(.auth-hero) {
    grid-column: 2;
  }
  #loginOverlay .login-main {
    padding: 0 44px;
    gap: 12px;
    align-self: center;
    overflow-y: auto;
    max-height: 100%;
  }
  #loginOverlay #signupForm.login-card {
    align-items: stretch;
  }
  #loginOverlay #signupForm > *:not(.auth-hero) {
    max-width: 460px;
    width: 100%;
    justify-self: center;
    padding-left: 44px;
    padding-right: 44px;
  }
  #loginOverlay .login-main h2,
  #loginOverlay #signupForm h2 {
    font-size: 30px;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--control-accent, #3f9bff);
  }
  #loginOverlay .login-sub { color: var(--foreground-soft, #b7c6d8); font-size: 14px; margin: -4px 0 6px; }
  #loginOverlay .login-main label { display: none; }
  #loginOverlay #signupForm label { font-size: 0; }
  #loginOverlay #signupForm label input { font-size: 16px; }
  #loginOverlay #signupForm .eyebrow { display: none; }

  #loginOverlay .login-main input,
  #loginOverlay #signupForm input {
    height: 56px;
    border-radius: 14px;
    background: rgba(var(--surface-field-rgb, 11, 19, 30), .96);
    border: 1px solid rgba(var(--border-muted-rgb, 120, 140, 165), .34);
    color: var(--foreground, #eaf2ff);
    font-size: 16px;
    padding: 0 16px 0 48px;
    background-repeat: no-repeat;
    background-position: 16px center;
    background-size: 20px 20px;
  }
  #loginOverlay #loginUsername { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237e90a8' stroke-width='1.7'%3E%3Ccircle cx='12' cy='8' r='3.6'/%3E%3Cpath d='M4.5 20a7.5 7.5 0 0 1 15 0'/%3E%3C/svg%3E"); }
  #loginOverlay #loginPassword,
  #loginOverlay #signupPassword,
  #loginOverlay #signupPassword2 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237e90a8' stroke-width='1.7'%3E%3Crect x='5' y='10' width='14' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E"); }
  #loginOverlay #signupUsername { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237e90a8' stroke-width='1.7'%3E%3Ccircle cx='12' cy='8' r='3.6'/%3E%3Cpath d='M4.5 20a7.5 7.5 0 0 1 15 0'/%3E%3C/svg%3E"); }
  #loginOverlay #signupEmail { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237e90a8' stroke-width='1.7'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m4 7 8 6 8-6'/%3E%3C/svg%3E"); }
  #loginOverlay .login-main input::placeholder,
  #loginOverlay #signupForm input::placeholder { color: var(--foreground-muted, #7e90a8); }
  #loginOverlay .login-pw-head { display: flex; justify-content: flex-end; }
  #loginOverlay .login-pw-head label { display: none; }
  #loginOverlay .login-eye { right: 16px; }

  #loginOverlay .login-primary,
  #loginOverlay #signupForm button[type="submit"] {
    height: 56px;
    margin-top: 6px;
    border-radius: 14px;
    /* Dimmed 8/12 (owner: "not so bright") - deeper blues, softer glow. */
    background: var(--surface-base, linear-gradient(180deg, #2e7dd8, #1a55ad));
    border: 0;
    color: var(--foreground, #f2f7ff);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    box-shadow: none;
  }

  #loginOverlay .auth-extra { display: block; }
  #loginOverlay .login-stats,
  #loginOverlay .login-badges,
  #loginOverlay .login-live { display: none; }
  #loginOverlay .login-toggle { text-align: center; color: var(--foreground-muted, #93a7c0); }
}

/* short desktop windows: let the whole card scroll rather than clip the form */
@media (min-width: 641px) and (max-height: 780px) {
  #loginOverlay { overflow-y: auto; align-items: flex-start; }
  #loginOverlay .login-card.login-split,
  #loginOverlay #signupForm.login-card { height: auto; min-height: 640px; }
}


/* Owner-approved desktop arena fills the space around the card. The asset
   keeps a dark center safe area; phones retain their flat backdrop. */
@media (min-width: 641px) {
  #loginOverlay {
    background-image:
      linear-gradient(rgba(3, 7, 13, .30), rgba(3, 7, 13, .52)),
      var(--auth-bg);
    background-size: cover, cover;
    background-position: center, center center;
    background-repeat: no-repeat, no-repeat;
    background-color: var(--surface-base, #04070d);
  }
}

/* Selected-player headshot (owner 8/7). The team logo is rendered behind the
   photo and hidden while the photo exists; a failed DK image removes itself
   and the logo is simply revealed - no empty tile, no JS fallback plumbing. */
.player-shot {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 6px;
}
.player-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 8%;
  border-radius: 6px;
}
.player-shot img ~ .team-logo { display: none; }
.team-tile .player-shot .team-logo { width: 34px; }

/* ---------------------------------------------------------------------------
   MOBILE TAB SHELL (owner 8/7 layout spec). Phone only - every button drives a
   control the desktop already owns, so this is navigation, not a second app.
   --------------------------------------------------------------------------- */
.mobile-tabs { display: none; }
.mobile-more { display: none; }

@media (max-width: 640px), (max-width: 950px) and (max-height: 500px), (max-device-width: 640px) {
  .mobile-tabs {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 380;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 2px;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    background: rgba(4, 9, 16, .97);
    border-top: 1px solid rgba(120, 145, 175, .32);
    backdrop-filter: blur(8px);
  }
  .mobile-tabs .mtab[data-mobile-board-tab] { display: none; }
  .mobile-tabs.has-board-tabs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2px 4px;
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
  }
  .mobile-tabs.has-board-tabs .mtab[data-mobile-board-tab] { display: flex; }
  .mobile-tabs.has-board-tabs .mtab {
    min-height: 42px;
    gap: 1px;
    padding: 3px 2px 2px;
    font-size: 9.5px;
  }
  .mobile-tabs.has-board-tabs .mtab svg { width: 18px; height: 18px; }
  .mobile-tabs.has-board-tabs .mtab span { white-space: nowrap; }
  .mobile-tabs[hidden] { display: none; }
  .mtab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    min-height: 44px;
    padding: 6px 2px 4px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #7e93ad;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .2px;
    cursor: pointer;
  }
  .mtab svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .mtab.active { color: #4f9dff; }
  .mtab.active svg { stroke: #4f9dff; }

  /* keep the tab bar from covering the last row of any list */
  body { padding-bottom: 66px; }
  body.mobile-board-tabs { padding-bottom: 102px; }

  .mobile-more {
    position: fixed;
    inset: 0;
    z-index: 390;
    display: flex;
    align-items: flex-end;
    background: rgba(2, 5, 10, .62);
  }
  .mobile-more[hidden] { display: none; }
  .mobile-more-card {
    width: 100%;
    max-height: min(82vh, 620px);
    overflow-y: auto;
    padding: 14px 16px calc(20px + env(safe-area-inset-bottom));
    border-radius: 18px 18px 0 0;
    background: #071019;
    border-top: 1px solid rgba(120, 145, 175, .34);
  }
  .mobile-more-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    color: #eaf2ff;
    font-size: 15px;
  }
  .mobile-more-files {
    display: grid;
    gap: 8px;
    padding: 4px 0 12px;
    border-bottom: 1px solid rgba(120, 145, 175, .24);
  }
  .mobile-more-global-own { margin: 0 0 14px; }
  .mobile-more-global-own[hidden] { display: none; }
  .mobile-more-global-own button {
    display: grid;
    gap: 5px;
    width: 100%;
    min-height: 62px;
    padding: 12px 14px;
    border: 1px solid rgba(63, 155, 255, .65);
    border-radius: 11px;
    background: rgba(12, 30, 46, .96);
    color: #b5d9ff;
    text-align: left;
    white-space: normal;
  }
  .mobile-more-global-own b { font-size: 14px; }
  .mobile-more-global-own span { color: #a1b5c9; font-size: 12px; line-height: 1.4; }
  .mobile-more-section-label {
    color: #7e93ad;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .9px;
    text-transform: uppercase;
  }
  .m-entry-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  .m-entry-actions button {
    min-width: 0;
    min-height: 48px;
    padding: 8px 6px;
    border: 1px solid rgba(120, 145, 175, .32);
    border-radius: 11px;
    background: rgba(12, 22, 34, .96);
    color: #dceaff;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.2;
    white-space: normal;
  }
  .m-entry-actions button:active { transform: translateY(1px); }
  .m-entry-actions [data-action="attach-dk-entry"] {
    border-color: rgba(63, 155, 255, .52);
    background: rgba(12, 22, 34, .96);
    color: #8fc5ff;
  }
  .m-entry-actions [data-action="export-dk"] {
    border-color: rgba(53, 202, 133, .45);
    color: #baf4d5;
  }
  .mobile-more-alerts {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 12px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(120, 145, 175, .24);
  }
  .mobile-more-alerts > .mobile-more-section-label,
  .mobile-more-alerts > p { grid-column: 1 / -1; }
  .phone-alert-copy { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
  .phone-alert-copy b { color: #eef6ff; font-size: 14px; }
  .phone-alert-copy span { color: #8fa4bd; font-size: 11.5px; line-height: 1.35; }
  .mobile-more-alerts.is-on .phone-alert-copy span { color: #55dda0; }
  .phone-alert-actions { display: flex; align-items: center; gap: 7px; }
  .phone-alert-actions button {
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid rgba(63, 155, 255, .5);
    border-radius: 11px;
    background: linear-gradient(180deg, #226bbd, #15477d);
    color: #f3f8ff;
    font-size: 11.5px;
    font-weight: 750;
    white-space: nowrap;
  }
  .phone-alert-actions #phoneAlertTest {
    border-color: rgba(120, 145, 175, .34);
    background: rgba(12, 22, 34, .96);
  }
  .mobile-more-alerts.is-on #phoneAlertToggle {
    border-color: rgba(53, 202, 133, .44);
    background: rgba(24, 82, 60, .72);
    color: #baf4d5;
  }
  .phone-alert-actions button:disabled { opacity: .55; }
  .mobile-more-alerts > p {
    margin: 0;
    color: #71869e;
    font-size: 10.5px;
    line-height: 1.4;
  }
  .m-late-swap-screen > h2 { margin: 0 0 5px; color: #eef6ff; font-size: 24px; }
  .m-late-swap-intro { margin: 0 0 12px; color: #8fa4bd; font-size: 12.5px; line-height: 1.45; }
  #mLateSwapHost > [data-main-panel="late-swap"] {
    display: block;
    margin: 0;
    border-color: rgba(63, 155, 255, .28);
    background: rgba(5, 15, 25, .94);
  }
  #mLateSwapHost > [data-main-panel="late-swap"] > .panel-head { display: none; }
  #mLateSwapHost .late-swap-controls { position: sticky; top: 0; z-index: 2; padding: 8px; background: rgba(5, 15, 25, .97); }
  #mLateSwapHost .lineup-table-wrap { overflow-x: auto; }
  .mobile-more-account {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(120, 145, 175, .24);
  }
  .mobile-more-account[hidden] { display: none; }
  .mobile-more-profile,
  .mobile-more-signout {
    min-height: 52px;
    border-radius: 12px;
    border: 1px solid rgba(120, 140, 165, .3);
    background: rgba(12, 22, 34, .96);
    color: #dceaff;
  }
  .mobile-more-profile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
    padding: 8px 12px;
    text-align: left;
  }
  .mobile-more-profile span { font-size: 14px; font-weight: 700; }
  .mobile-more-profile small { color: #7e93ad; font-size: 11px; }
  .mobile-more-signout {
    padding: 0 16px;
    border-color: rgba(224, 108, 108, .45);
    color: #ffb1b1;
    font-size: 13px;
    font-weight: 700;
  }
}

/* ---------------------------------------------------------------------------
   PHONE BUILD SCREEN (owner 8/7 spec). The desktop popup becomes a full-screen
   settings sheet: labelled rows, +/- steppers, a live summary and a sticky
   build button. Identical inputs and identical Build action - only the
   presentation changes, so a phone build and a desktop build are the same run.
   --------------------------------------------------------------------------- */
.cc-step { display: contents; }
.cc-step > button { display: none; }
.cc-summary { display: none; }

@media (max-width: 640px), (max-width: 950px) and (max-height: 500px), (max-device-width: 640px) {
  #clBuildModal { padding: 0; align-items: stretch; }
  #clBuildModal .cc-modal {
    width: 100vw;
    max-width: 100vw;
    max-height: 100vh;
    border-radius: 0;
    border: 0;
    padding: 14px 14px calc(96px + env(safe-area-inset-bottom));
    overflow-y: auto;
    background: linear-gradient(180deg, #060d16, #02060c);
  }
  #clBuildModal .cc-head {
    position: sticky;
    top: -14px;
    z-index: 2;
    margin: -14px -14px 10px;
    padding: 14px;
    background: #060d16;
    border-bottom: 1px solid rgba(120, 145, 175, .28);
    font-size: 17px;
  }
  #clBuildModal .cc-lab {
    display: block;
    margin: 14px 0 6px;
    color: #9fb3cc;
    font-size: 13px;
    font-weight: 600;
  }
  /* stepper rows */
  #clBuildModal .cc-step {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) 46px;
    align-items: center;
    gap: 8px;
  }
  #clBuildModal .cc-step > button {
    display: block;
    height: 46px;
    border-radius: 12px;
    border: 1px solid rgba(120, 140, 165, .34);
    background: rgba(12, 22, 34, .96);
    color: #dceaff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
  }
  #clBuildModal .cc-input {
    height: 46px;
    border-radius: 12px;
    background: rgba(9, 16, 26, .96);
    border: 1px solid rgba(120, 140, 165, .3);
    color: #eaf2ff;
    font-size: 16px;   /* 16px stops iOS zooming the page on focus */
    text-align: center;
  }
  #clBuildModal .cl-salary-row { display: grid; grid-template-columns: 1fr; gap: 0; }
  #clBuildModal .cl-salary { display: block; }
  #clBuildModal .cc-list { display: grid; gap: 8px; }
  #clBuildModal .cc-opt {
    text-align: left;
    padding: 12px 14px;
    border-radius: 12px;
    min-height: 58px;
  }
  #clBuildModal .cl-check { display: flex; align-items: center; gap: 10px; margin-top: 16px; font-size: 14px; }

  /* live summary */
  #clBuildModal .cc-summary {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin: 18px 0 4px;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid rgba(120, 145, 175, .28);
    background: rgba(8, 15, 24, .9);
  }
  #clBuildModal .cc-summary div { display: flex; flex-direction: column; gap: 2px; }
  #clBuildModal .cc-summary b { color: #eaf2ff; font-size: 15px; }
  #clBuildModal .cc-summary span { color: #8296ae; font-size: 11px; text-transform: uppercase; letter-spacing: .6px; }

  /* sticky build button */
  #clBuildModal .cc-actions {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    display: grid;
    grid-template-columns: 78px 84px minmax(0, 1fr);
    gap: 10px;
    margin: 0;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: rgba(4, 9, 16, .97);
    border-top: 1px solid rgba(120, 145, 175, .3);
  }
  #clBuildModal .cc-actions button { height: 52px; border-radius: 13px; font-size: 15px; }
  #clBuildModal .cc-actions .cc-primary {
    background: linear-gradient(180deg, #3f9bff, #1f6ee0);
    border: 0;
    color: #fff;
    font-weight: 800;
    letter-spacing: 1.6px;
  }
  #clBuildModal .cc-note { margin-top: 14px; font-size: 12px; color: #7e93ad; }
}

.row-shot { display: none; }

/* ---------------------------------------------------------------------------
   PHONE APP HEADER (owner 8/7 layout spec): brand left, sport centre,
   status dot and menu right. The desktop view-tab strip is off on phones - it
   stays desktop-only.
   --------------------------------------------------------------------------- */
.mhead-center { display: none; }
.mhead-actions { display: none; }

@media (max-width: 640px), (max-width: 950px) and (max-height: 500px), (max-device-width: 640px) {
  .topbar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: calc(8px + env(safe-area-inset-top)) 12px 8px;
    background: #050b13;
    border-bottom: 1px solid rgba(120, 145, 175, .28);
  }
  .topbar .view-tabs,
  .topbar #runLine { display: none; }
  .brand-lockup { gap: 8px; }
  .brand-wordmark { font-size: 18px; }
  .topbar #appTitle {
    font-size: 11px;
    letter-spacing: 1.4px;
    color: #8fb4e8;
    text-transform: uppercase;
    margin: 0;
  }

  .mhead-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 0 4px;
    border: 0;
    background: transparent;
    min-width: 0;
  }
  .mhead-sport-select {
    color: #eaf2ff;
    background-color: rgba(12, 31, 50, .92);
    border: 1px solid rgba(94, 151, 219, .62);
    border-radius: 9px;
    min-height: 30px;
    max-width: 42vw;
    padding: 3px 8px;
    font: inherit;
    font-size: 14px;
    font-weight: 750;
    text-align: center;
    text-align-last: center;
  }
  .mhead-sport-select:focus-visible {
    outline: 1px solid #4f9dff;
    outline-offset: -1px;
  }
  .mhead-sport-select option { color: #eaf2ff; background: #071019; }
  .mhead-actions { display: flex; align-items: center; gap: 10px; }
  .mhead-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #2bd17f;
    box-shadow: 0 0 8px rgba(43, 209, 127, .75);
  }
  .mhead-dot.off { background: #e06c6c; box-shadow: 0 0 8px rgba(224, 108, 108, .7); }
  .mhead-menu {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 0;
    background: transparent;
    cursor: pointer;
  }
  .mhead-menu svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: #cfe0f5;
    stroke-width: 1.9;
    stroke-linecap: round;
  }
}

/* ---------------------------------------------------------------------------
   PHONE SCREENS (owner 8/7: "exactly the same as this on mobile", desktop and
   mobile need not match). A dedicated screen layer that sits over the
   desktop workspace, which stays hidden at phone breakpoints.
   --------------------------------------------------------------------------- */
.m-screen { display: none; }

@media (max-width: 640px), (max-width: 950px) and (max-height: 500px), (max-device-width: 640px) {
  .m-screen[hidden] { display: none; }
  /* Fixed overlay under the phone header: .app-shell carries min-height:100vh,
     so an in-flow screen would start a full viewport down the page. --mhead-h
     is stamped from the live header height when the screen opens. */
  .m-screen {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    top: var(--mhead-h, 57px);
    bottom: 0;
    z-index: 200;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px 14px calc(84px + env(safe-area-inset-bottom));
    background: radial-gradient(120% 60% at 50% 0%, #0a1826 0%, #050b13 55%, #02060c 100%);
  }
  body.mobile-board-tabs .m-screen {
    padding-bottom: calc(112px + env(safe-area-inset-bottom));
  }
  /* The desktop workspace remains only as a hidden data/control host on phones. */
  .app-shell > .topbar ~ * { display: none; }
  .app-shell.m-screen-open { min-height: 0; }

  .m-sec-lab {
    margin: 14px 2px 8px;
    color: #7e93ad;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
  }
  .m-sec-lab:first-child { margin-top: 4px; }

  /* date navigation */
  .m-date-nav-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 4px 2px 8px;
  }

  .m-date-nav-head .m-sec-lab { margin: 0; }

  .m-date-nav-actions {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .m-date-step {
    width: 32px;
    min-width: 32px;
    height: 30px;
    min-height: 30px;
    padding: 0;
    border: 1px solid rgba(94, 151, 219, .5);
    border-radius: 9px;
    background: rgba(12, 31, 50, .92);
    color: #dceaff;
    font-size: 20px;
    line-height: 1;
  }

  .m-slate-clear-filters {
    width: fit-content;
    max-width: 100%;
    min-height: 32px;
    margin-bottom: 10px;
    padding: 6px 10px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: transparent;
    color: var(--text);
    font-size: 12px;
    line-height: 1.3;
  }
  .m-slate-clear-filters[hidden] { display: none; }

  .m-date-month {
    width: 132px;
    height: 30px;
    min-height: 30px;
    padding: 3px 7px;
    border: 1px solid rgba(94, 151, 219, .5);
    border-radius: 9px;
    background: rgba(12, 31, 50, .92);
    color: #dceaff;
    color-scheme: dark;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
  }

  /* date strip */
  .m-datestrip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
  .m-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 0;
    border-radius: 12px;
    border: 1px solid rgba(120, 145, 175, .26);
    background: rgba(9, 17, 27, .9);
    color: #8fa7c9;
    cursor: pointer;
    /* global button{height:34px} + the 40px mobile min-height would crop these
       two-line cards; they must size to their content. */
    height: auto;
    min-height: 0;
  }
  .m-day span { font-size: 10px; letter-spacing: .6px; }
  .m-day b { font-size: 15px; color: #dceaff; }
  .m-day.active { border-color: #3f9bff; background: rgba(24, 62, 110, .85); }
  .m-day.active b, .m-day.active span { color: #eaf2ff; }
  .m-day.no-game-day:disabled { opacity: .34; cursor: default; }

  /* slate cards */
  .m-slate-list { display: grid; gap: 8px; }
  .m-slate {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid rgba(120, 145, 175, .26);
    background: rgba(8, 15, 24, .92);
    text-align: left;
    cursor: pointer;
    height: auto;
    min-height: 64px;
  }
  .m-slate.active { border-color: #3f9bff; background: rgba(14, 34, 58, .95); }
  .m-slate[disabled] { opacity: .45; }
  .m-slate-tick {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid rgba(140, 165, 195, .5);
  }
  .m-slate.active .m-slate-tick { border-color: #3f9bff; background: #3f9bff; }
  .m-slate-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  .m-slate-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .m-slate-top b { color: #eaf2ff; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .m-chip {
    flex: none;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(43, 209, 127, .16);
    color: #57d69b;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .6px;
    text-transform: uppercase;
  }
  .m-slate-sub { color: #8296ae; font-size: 12px; }
  .m-slate-counts { display: flex; flex-direction: column; align-items: center; }
  .m-slate-counts b { color: #dceaff; font-size: 14px; }
  .m-slate-counts small { color: #7e93ad; font-size: 9.5px; text-transform: uppercase; }

  /* games rail */
  .m-games-rail {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .m-games-rail::-webkit-scrollbar { display: none; }
  .m-game {
    flex: none;
    width: 126px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
    border-radius: 13px;
    border: 1px solid rgba(120, 145, 175, .26);
    background: rgba(8, 15, 24, .92);
  }
  .m-game.confirmed { border-color: rgba(124, 255, 178, .46); box-shadow: inset 0 3px 0 rgba(124, 255, 178, .72); }
  .m-game.live { border-color: rgba(255, 209, 102, .50); box-shadow: inset 0 3px 0 rgba(255, 209, 102, .82); }
  .m-game.delayed { border-color: rgba(255, 159, 67, .50); box-shadow: inset 0 3px 0 rgba(255, 159, 67, .82); }
  .m-game.final { border-color: rgba(143, 177, 212, .38); box-shadow: none; }
  .m-game.postponed { border-color: rgba(255, 107, 122, .50); box-shadow: inset 0 3px 0 rgba(255, 107, 122, .82); background: rgba(32, 12, 19, .92); }
  .m-game-time { overflow: hidden; color: #8fb4e8; font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
  .m-game.confirmed .m-game-time { color: #7cffb2; }
  .m-game.live .m-game-time { color: #ffd166; }
  .m-game.delayed .m-game-time { color: #ffb873; }
  .m-game.final .m-game-time { color: #8fb1d4; }
  .m-game.postponed .m-game-time { color: #ff8792; }
  .m-game-teams { display: flex; align-items: center; gap: 6px; color: #eaf2ff; font-size: 13px; font-weight: 700; }
  .m-game-teams b { display: inline-flex; min-width: 0; align-items: center; gap: 3px; }
  .m-game-teams i { color: #7e93ad; font-style: normal; font-size: 11px; }
  .m-game-check { color: #7cffb2; font-size: 11px; }
  .m-game-score { color: #f2f7ff; font-size: 13px; font-weight: 800; }
  .m-game-wx { color: #8296ae; font-size: 11px; }
  /* NFL scores and possession stay together; other sports retain their rail width. */
  body.sport-nfl .m-game { width: max-content; min-width: 126px; }
  body.sport-nfl .m-game-teams > b { flex: 0 0 auto; white-space: nowrap; }

  .m-cta {
    width: 100%;
    height: 54px;
    margin-top: 18px;
    border-radius: 14px;
    border: 0;
    background: linear-gradient(180deg, #3f9bff, #1f6ee0);
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .6px;
    box-shadow: none;
  }
  .m-empty { color: #7e93ad; font-size: 13px; padding: 8px 2px; }
}

@media (max-width: 640px), (max-width: 950px) and (max-height: 500px), (max-device-width: 640px) {
  .m-chip.good { background: rgba(43, 209, 127, .16); color: #57d69b; }
  .m-chip.warn { background: rgba(255, 176, 46, .16); color: #ffc35c; }
  .m-chip.bad { background: rgba(255, 90, 90, .16); color: #ff8b8b; }
}

/* ---- PHONE PLAYERS SCREEN (owner 8/7) ---- */
@media (max-width: 640px), (max-width: 950px) and (max-height: 500px), (max-device-width: 640px) {
  .m-search {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }
  .m-search svg {
    position: absolute;
    left: 12px;
    width: 17px;
    height: 17px;
    fill: none;
    stroke: #7e93ad;
    stroke-width: 1.9;
    stroke-linecap: round;
    pointer-events: none;
  }
  .m-search input {
    width: 100%;
    height: 44px;
    padding: 0 14px 0 37px;
    border-radius: 12px;
    border: 1px solid rgba(120, 145, 175, .26);
    background: rgba(8, 15, 24, .92);
    color: #eaf2ff;
    font-size: 14.5px;
  }
  .m-search input::placeholder { color: #6d8199; }

  .m-gamechips {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 4px;
    margin-bottom: 8px;
    scrollbar-width: none;
  }
  .m-gamechips::-webkit-scrollbar { display: none; }
  .m-gchip {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    height: auto;
    min-height: 0;
    min-width: 122px;
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid rgba(120, 145, 175, .26);
    background: rgba(8, 15, 24, .92);
    color: #b9cbe2;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
  }
  .m-gchip.all-games { min-width: 82px; align-items: center; justify-content: center; }
  .m-gchip.confirmed { border-color: rgba(124, 255, 178, .46); box-shadow: inset 0 3px 0 rgba(124, 255, 178, .72); }
  .m-gchip.live { border-color: rgba(255, 209, 102, .50); box-shadow: inset 0 3px 0 rgba(255, 209, 102, .82); }
  .m-gchip.delayed { border-color: rgba(255, 159, 67, .50); box-shadow: inset 0 3px 0 rgba(255, 159, 67, .82); }
  .m-gchip.final { border-color: rgba(143, 177, 212, .38); box-shadow: none; }
  .m-gchip.postponed { border-color: rgba(255, 107, 122, .50); box-shadow: inset 0 3px 0 rgba(255, 107, 122, .82); background: rgba(32, 12, 19, .92); }
  .m-gchip-match { display: flex; align-items: center; gap: 5px; }
  .m-gchip-match b { display: inline-flex; align-items: center; gap: 3px; }
  .m-gchip-match i { color: #7e93ad; font-style: normal; font-size: 10px; }
  .m-gchip .m-game-score { font-size: 12px; }
  .m-gchip small { color: #7e93ad; font-size: 9.5px; font-weight: 600; }
  .m-gchip.confirmed small { color: #7cffb2; }
  .m-gchip.live small { color: #ffd166; }
  .m-gchip.delayed small { color: #ffb873; }
  .m-gchip.final small { color: #8fb1d4; }
  .m-gchip.postponed small { color: #ff8792; }
  .m-gchip.active { outline: 1px solid #3f9bff; outline-offset: -1px; background: rgba(24, 62, 110, .9); color: #eaf2ff; }
  .m-pills { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  .m-pills::-webkit-scrollbar { display: none; }
  .m-pill {
    flex: none;
    height: 32px;
    min-height: 0;
    padding: 0 13px;
    border-radius: 999px;
    border: 1px solid rgba(120, 145, 175, .26);
    background: rgba(8, 15, 24, .92);
    color: #b9cbe2;
    font-size: 12.5px;
    font-weight: 700;
  }
  .m-pill.active { border-color: #3f9bff; background: linear-gradient(180deg, #3f9bff, #2273df); color: #fff; }

  .m-player-filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin: 8px 2px 0;
  }
  .m-show-all { display: inline-flex; align-items: center; gap: 7px; color: #b7c7dd; font-size: 11.5px; cursor: pointer; }
  .m-show-all input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: #3f9bff;
  }

  .m-count {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 7px 2px 8px;
    color: #7e93ad;
    font-size: 11.5px;
    letter-spacing: .8px;
    text-transform: uppercase;
  }
  .m-count b { color: #eaf2ff; font-size: 14px; }
  .m-clear {
    height: auto;
    min-height: 0;
    padding: 0;
    border: 0;
    background: none;
    color: #6fb3ff;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
  }

  .m-plist { display: grid; gap: 7px; }
  .m-pcard {
    display: grid;
    grid-template-columns: 24px 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 9px 10px 9px 6px;
    border-radius: 13px;
    border: 1px solid rgba(120, 145, 175, .22);
    background: rgba(8, 15, 24, .92);
  }
  .m-pcard.off { opacity: .48; }
  .m-pcard.locked { border-color: rgba(255, 196, 84, .5); }
  .m-pc-use { display: flex; align-items: center; justify-content: center; }
  .m-pc-use input { width: 19px; height: 19px; accent-color: #3f9bff; }
  /* fixed-size slot: playerRowShot() returns an <img> that removes itself when
     the DK headshot 404s and falls back to a team logo, so the grid must not
     depend on what it emits */
  .m-pc-shot {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(255, 255, 255, .05);
    display: flex;
    align-items: flex-end;
    justify-content: center;
  }
  .m-pc-shot > * { width: 100%; height: 100%; object-fit: cover; }
  /* DraftKings has no photo for some rookies/depth players. The photo is
     emitted before the logo; while it exists the adjacent logo stays hidden.
     playerRowShot() removes a failed image, revealing the team logo without a
     blank portrait or a user-facing warning. */
  .m-pc-shot > .m-pc-shot-img ~ .m-pc-shot-team { display: none; }
  .m-pc-shot > .m-pc-shot-team {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border-color: rgba(88, 139, 190, .7);
    background: #071729;
  }
  .m-pc-shot > .m-pc-shot-team img { width: 30px; height: 30px; }
  .m-pc-shot > .m-pc-shot-team .logo-fallback { font-size: 11px; }
  .m-pc-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .m-pc-name-line { display: flex; align-items: center; gap: 5px; min-width: 0; }
  .m-pc-name-line > b { flex: 1 1 auto; min-width: 0; }
  .m-pc-status.state-chip { flex: none; height: 17px; padding: 0 5px; font-size: 8px; line-height: 1; }

  .m-pc-id b {
    color: #eaf2ff;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .m-pc-lock { font-size: 10px; font-style: normal; margin-left: 4px; }
  .m-pc-id small { color: #8296ae; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .m-pc-stats { display: flex; gap: 8px; }
  .m-pc-stats i { min-width: 30px; }
  .m-pc-stats i { display: flex; flex-direction: column; align-items: center; font-style: normal; }
  .m-pc-stats small { color: #6d8199; font-size: 8.5px; letter-spacing: .6px; }
  .m-pc-stats b { color: #dceaff; font-size: 13px; }
  .m-pc-stats i.actual b { color: #7fc8ff; }
}

/* ---- PHONE LINEUPS SCREEN (owner 8/7) ---- */
@media (max-width: 640px), (max-width: 950px) and (max-height: 500px), (max-device-width: 640px) {
  .m-lchips { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  .m-lchips::-webkit-scrollbar { display: none; }
  .m-lchip {
    flex: none;
    max-width: 190px;
    height: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    padding: 8px 13px;
    border-radius: 12px;
    border: 1px solid rgba(120, 145, 175, .26);
    background: rgba(8, 15, 24, .92);
    text-align: left;
  }
  .m-lchip b {
    color: #dceaff;
    font-size: 13px;
    max-width: 164px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .m-lchip small { color: #7e93ad; font-size: 10.5px; }
  .m-lchip.active { border-color: #3f9bff; background: rgba(8, 15, 24, .92); }
  .m-lchip.active b { color: #8fc5ff; }

  .m-lineup-entry-actions { margin: 10px 0 12px; }

  .m-llist { display: grid; gap: 8px; }
  .m-lcard {
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(120, 145, 175, .22);
    background: rgba(8, 15, 24, .92);
  }
  .m-lcard.open { border-color: rgba(63, 155, 255, .5); }
  .m-lhead { display: flex; align-items: center; gap: 12px; }
  .m-lrank { color: #6fb3ff; font-size: 13px; font-weight: 800; min-width: 30px; }
  .m-ltot { display: flex; flex-direction: column; }
  .m-ltot small { color: #6d8199; font-size: 8.5px; letter-spacing: .6px; }
  .m-ltot b { color: #dceaff; font-size: 13px; }
  .m-ltot.act b { color: #5dcaa5; }
  .m-lcaret { margin-left: auto; color: #7e93ad; font-size: 14px; transition: transform .15s ease; }
  .m-lcard.open .m-lcaret { transform: rotate(180deg); }

  .m-lstrip { display: flex; gap: 3px; margin-top: 9px; }
  .m-lshot {
    flex: 1 1 0;
    min-width: 0;
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(255, 255, 255, .05);
    display: flex;
    align-items: flex-end;
    justify-content: center;
  }
  .m-lshot.empty { border: 1px dashed rgba(120, 145, 175, .3); }
  .m-lshot .m-lshot-img, .m-lshot img, .m-lshot svg { width: 100%; height: 100%; object-fit: cover; }

  .m-lroster { margin-top: 10px; border-top: 1px solid rgba(120, 145, 175, .18); padding-top: 8px; display: grid; gap: 4px; }
  .m-lrow { display: grid; grid-template-columns: 30px minmax(0, 1fr) 54px 40px; align-items: center; gap: 8px; }
  .m-lroster.has-actual .m-lrow { grid-template-columns: 30px minmax(0, 1fr) 54px 40px 40px; gap: 6px; }
  .m-lroster-head { padding-bottom: 3px; border-bottom: 1px solid rgba(120, 145, 175, .14); }
  .m-lroster-head span { overflow: hidden; color: #6d8199; font-size: 8px; font-weight: 800; letter-spacing: .45px; text-overflow: ellipsis; white-space: nowrap; }
  .m-lroster-head span:nth-child(n + 3) { text-align: right; }
  .m-lslot { color: #6d8199; font-size: 10px; font-weight: 800; letter-spacing: .5px; }
  .m-lname { color: #dceaff; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .m-lname small { color: #7e93ad; font-size: 10px; margin-left: 5px; }
  .m-lname.muted { color: #6d8199; }
  .m-lnum { color: #a9c0da; font-size: 12px; text-align: right; }
  .m-lnum.actual { color: #5dcaa5; }
}

/* ---- Build popup: info dots, Advanced group, Reset (owner 8/7 layout spec) ---- */
.cc-info {
  height: 16px;
  min-height: 0;
  width: 16px;
  margin-left: 6px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(var(--border-muted-rgb, 140, 175, 215), .45);
  background: transparent;
  color: var(--control-accent, #8fb4e8);
  font-size: 10px;
  font-weight: 800;
  font-style: italic;
  line-height: 1;
  vertical-align: middle;
}
.cc-info-note {
  display: block;
  margin: 4px 0 2px;
  padding: 7px 9px;
  border-radius: 8px;
  background: rgba(var(--surface-base-rgb, 63, 155, 255), .1);
  border: 1px solid rgba(var(--border-muted-rgb, 63, 155, 255), .22);
  color: var(--control-accent, #b9d4f2);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.35;
  white-space: normal;
}
.cc-reset { margin-right: auto; }
.cc-adv-toggle { display: none; }
.cc-adv-body { display: block; }

@media (max-width: 640px), (max-width: 950px) and (max-height: 500px), (max-device-width: 640px) {
  .cc-adv { margin: 12px 0 4px; }
  .cc-adv-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 46px;
    padding: 0 13px;
    border-radius: 12px;
    border: 1px solid rgba(120, 145, 175, .26);
    background: rgba(8, 15, 24, .92);
    color: #b9cbe2;
    font-size: 14px;
    font-weight: 600;
  }
  .cc-adv-caret { color: #7e93ad; transition: transform .15s ease; }
  .cc-adv.open .cc-adv-caret { transform: rotate(90deg); }
  .cc-adv-body { display: none; padding-top: 10px; }
  .cc-adv.open .cc-adv-body { display: block; }
}

/* ---- PHONE BUILD SCREEN (owner 8/7) ----
   The real popup is moved into #mBuildScreen, so its fixed-overlay chrome has
   to become an ordinary page: no backdrop, no z-9999, and the action bar sits
   above the tab bar instead of under it. Scoped to #clBuildModal.m-build-host so the
   desktop popup and the same popup opened from anywhere else are untouched. */
@media (max-width: 640px), (max-width: 950px) and (max-height: 500px), (max-device-width: 640px) {
  #mBuildScreen { padding: 0; }
  .m-build-chooser {
    padding: 18px 14px calc(82px + env(safe-area-inset-bottom));
  }
  body.mobile-board-tabs .m-build-chooser {
    padding-bottom: calc(112px + env(safe-area-inset-bottom));
  }
  .m-build-chooser h2 {
    margin: 4px 0 6px;
    color: #eaf2ff;
    font-size: 22px;
    letter-spacing: -.3px;
  }
  .m-build-intro {
    margin: 0 0 20px;
    color: #7e93ad;
    font-size: 13px;
    line-height: 1.45;
  }
  .m-build-entry-tools {
    display: grid;
    gap: 8px;
  }
  .m-build-entry-tools .m-sec-lab { margin: 0; }
  .m-build-entry-tools-chooser { margin: 0 0 20px; }
  .m-build-entry-tools-hosted { margin: 12px 14px 2px; }
  .m-build-choice-list { display: grid; gap: 12px; }
  .m-build-choice {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 24px;
    align-items: center;
    min-height: 64px;
    padding: 13px 16px;
    border: 1px solid rgba(120, 145, 175, .3);
    border-radius: 16px;
    background: rgba(8, 15, 24, .94);
    color: #eaf2ff;
    text-align: left;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
  }
  .m-build-choice.s1m {
    border-color: rgba(63, 155, 255, .58);
    background: linear-gradient(135deg, rgba(25, 75, 135, .9), rgba(13, 38, 70, .95));
  }
  .m-build-choice:active { transform: translateY(1px); }
  .m-build-choice:focus-visible { outline: 1px solid #62abff; outline-offset: -1px; }
  .m-build-choice:disabled { opacity: .48; transform: none; }
  .m-build-choice-copy { display: grid; gap: 6px; }
  .m-build-choice-copy b { font-size: 18px; letter-spacing: .1px; }
  .m-build-choice-copy small { color: #9cb0c9; font-size: 12px; line-height: 1.4; }
  .m-build-choice.s1m .m-build-choice-copy small { color: #c4dcfa; }
  .m-build-choice-arrow { color: #62abff; font-size: 32px; line-height: 1; text-align: right; }
  .m-build-unavailable {
    margin: 14px 0 0;
    padding: 11px 12px;
    border: 1px solid rgba(255, 184, 115, .28);
    border-radius: 12px;
    background: rgba(92, 54, 20, .22);
    color: #ffc98f;
    font-size: 12px;
    line-height: 1.4;
  }
  #clBuildModal.m-build-host {
    position: static;
    inset: auto;
    z-index: auto;
    display: block;
    background: none;
    padding: 0;
  }
  #clBuildModal.m-build-host .cc-modal {
    width: 100%;
    max-width: none;
    max-height: none;
    min-height: 100%;
    box-shadow: none;
    background: none;
    padding: 12px 14px calc(84px + env(safe-area-inset-bottom));
    overflow: visible;
  }
  body.mobile-board-tabs #clBuildModal.m-build-host .cc-modal {
    padding-bottom: calc(118px + env(safe-area-inset-bottom));
  }
  /* the phone header already names the screen; this is the section title */
  #clBuildModal.m-build-host .cc-head {
    position: static;
    margin: 0 0 4px;
    padding: 0 0 10px;
    background: none;
    border-bottom: 0;
    font-size: 18px;
  }
  #clBuildModal.m-build-host .cc-head b { color: #eaf2ff; letter-spacing: .3px; }
  #clBuildModal.m-build-host .cc-lab {
    margin: 16px 2px 8px;
    color: #7e93ad;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
  }
  #clBuildModal.m-build-host .cc-opt {
    padding: 12px 13px;
    border-radius: 13px;
    border: 1px solid rgba(120, 145, 175, .26);
    background: rgba(8, 15, 24, .92);
  }
  #clBuildModal.m-build-host .cc-opt.selected {
    border-color: #3f9bff;
    background: rgba(24, 62, 110, .9);
  }
  #clBuildModal.m-build-host .cc-step {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) 52px;
    gap: 8px;
  }
  #clBuildModal.m-build-host .cc-step > button {
    height: 48px;
    min-height: 0;
    border-radius: 12px;
    border: 1px solid rgba(120, 145, 175, .26);
    background: rgba(8, 15, 24, .92);
    color: #9fc9ff;
    font-size: 20px;
  }
  #clBuildModal.m-build-host .cc-input {
    height: 48px;
    border-radius: 12px;
    border: 1px solid rgba(120, 145, 175, .26);
    background: rgba(8, 15, 24, .92);
    color: #eaf2ff;
    font-size: 16px;
    text-align: center;
  }
  #clBuildModal.m-build-host .cl-check {
    margin-top: 14px;
    padding: 12px 13px;
    border-radius: 13px;
    border: 1px solid rgba(120, 145, 175, .22);
    background: rgba(8, 15, 24, .92);
    font-size: 13.5px;
  }
  #clBuildModal.m-build-host .cc-summary {
    margin-top: 16px;
    padding: 12px;
    border-radius: 13px;
    border: 1px solid rgba(63, 155, 255, .28);
    background: rgba(16, 40, 70, .5);
  }
  /* Reset | Cancel | BUILD - three buttons, so the two-column grid the popup
     shipped with would wrap BUILD onto its own row */
  #clBuildModal.m-build-host .cc-actions {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(53px + env(safe-area-inset-bottom));
    z-index: 210;
    display: grid;
    grid-template-columns: 78px 84px minmax(0, 1fr);
    gap: 8px;
    margin: 0;
    padding: 9px 14px;
    background: rgba(4, 9, 16, .97);
    border-top: 1px solid rgba(120, 145, 175, .3);
  }
  body.mobile-board-tabs #clBuildModal.m-build-host .cc-actions {
    bottom: calc(95px + env(safe-area-inset-bottom));
  }
  #clBuildModal.m-build-host .cc-note { margin-top: 12px; }
}

/* The popup keeps its own two-button layout everywhere else; Reset just joins
   the row. */
.cc-actions:has(.cc-reset) { display: flex; align-items: center; gap: 8px; }


@media (prefers-reduced-motion: reduce) {
  #loginOverlay *,
  #loginOverlay *::before,
  #loginOverlay *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* MOBILE PLAYER DETAIL SHEET (r6): the real selected-player panel is moved to
   body while open so it is not trapped in the phone-hidden desktop workspace. */
.sel-sheet-handle,
.sel-panel-close,
.sel-player-nav { display: none; }

.player-boost-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-base, #04111d);
  padding: 10px;
}
.player-boost-box p { margin: 4px 0 0; max-width: 34rem; color: var(--muted); font-size: 11.5px; line-height: 1.4; }
.detail-boost-ctl { display: grid; grid-template-columns: 40px minmax(76px, 1fr) 40px; min-width: 176px; }
/* The desktop Player Detail rail is only 280-340px wide. Give its explanatory
   copy the full row instead of squeezing it beside the fixed-width control. */
.right-rail .player-boost-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 8px;
}
.right-rail .player-boost-box > div:first-child { display: contents; }
.right-rail .player-boost-box .eyebrow { grid-row: 1; }
.right-rail .detail-boost-ctl {
  grid-row: 2;
  width: 100%;
  min-width: 0;
  grid-template-columns: 40px minmax(0, 1fr) 40px;
}
.right-rail .player-boost-box p { grid-row: 3; margin-top: 0; }
.detail-boost-ctl > button {
  min-width: 0;
  height: 40px;
  padding: 0;
  border-radius: 0;
  border-color: var(--control-line, #29445f);
  background: var(--surface-base, #0a1b2c);
  color: var(--foreground, #eaf2ff);
  font-size: 18px;
}
.detail-boost-ctl > button:first-child { border-radius: 8px 0 0 8px; }
.detail-boost-ctl > button:last-child { border-radius: 0 8px 8px 0; }
.detail-boost-value { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.detail-boost-value b { font-size: 13px; line-height: 1; }
.detail-boost-value small { color: var(--foreground-muted, #8296ae); font-size: 9.5px; }
.detail-boost-value.pos b { color: var(--pos); }
.detail-boost-value.neg b { color: var(--bad); }

@media (max-width: 640px), (max-width: 950px) and (max-height: 500px), (max-device-width: 640px) {
  body.sel-sheet-open { overflow: hidden; }
  body.sel-sheet-open .sel-sheet-close { display: none; }
  .m-pcard { cursor: pointer; touch-action: manipulation; }
  .m-pcard:focus-visible { outline: 1px solid #64adff; outline-offset: -1px; }

  #selectedPanel {
    left: max(0px, calc((100vw - 520px) / 2));
    right: max(0px, calc((100vw - 520px) / 2));
    bottom: calc(64px + env(safe-area-inset-bottom));
    width: auto;
    max-width: 520px;
    max-height: calc(100dvh - var(--mhead-h, 58px) - 72px);
    margin: 0;
    padding: 0 0 14px;
    border: 1px solid rgba(109, 146, 187, .36);
    border-bottom: 0;
    border-radius: 22px 22px 0 0;
    background: linear-gradient(180deg, rgba(9, 23, 38, .99), rgba(3, 10, 18, .995));
    box-shadow: 0 -18px 54px rgba(0, 0, 0, .72);
    overscroll-behavior: contain;
  }
  body.mobile-board-tabs #selectedPanel {
    bottom: calc(102px + env(safe-area-inset-bottom));
    max-height: calc(100dvh - var(--mhead-h, 58px) - 110px);
  }
  #selectedPanel[aria-hidden="true"] { pointer-events: none; }
  #selectedPanel .sel-sheet-handle {
    display: block;
    position: sticky;
    top: 0;
    z-index: 2;
    width: 44px;
    height: 5px;
    margin: 9px auto 2px;
    border-radius: 999px;
    background: #46627f;
  }
  #selectedPanel .sel-panel-close {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    z-index: 3;
    top: 10px;
    right: 12px;
    width: 38px;
    height: 38px;
    min-height: 38px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(126, 170, 218, .35);
    background: #0d2237;
    color: #d9eaff;
    font-size: 22px;
  }
  #selectedPanel .panel-head { padding: 8px 58px 10px 16px; border-bottom-color: rgba(120, 145, 175, .2); }
  #selectedPanel .panel-head h2 { margin-top: 2px; font-size: 20px; }
  #selectedPanel .panel-head p { margin-top: 3px; color: #8196af; font-size: 10.5px; overflow-wrap: anywhere; }
  #selectedPanel .selected-body { display: grid; gap: 10px; padding: 10px 12px 4px; }
  #selectedPanel .selected-top {
    grid-template-columns: 76px minmax(0, 1fr) auto;
    min-height: 82px;
    padding: 7px;
    border-color: rgba(120, 145, 175, .22);
    border-radius: 12px;
    background: rgba(7, 18, 30, .86);
  }
  #selectedPanel .team-tile { width: 76px; height: 76px; border: 0; background: transparent; }
  #selectedPanel .team-tile > * { max-width: 76px; max-height: 76px; }
  #selectedPanel .selected-top p { margin: 0; color: #cfe0f4; font-size: 13px; font-weight: 650; }
  #selectedPanel .state-chip { align-self: start; }

  #selectedPanel .selected-body .metric-strip { gap: 1px; padding: 0; overflow: hidden; border: 1px solid rgba(120, 145, 175, .2); border-radius: 10px; background: rgba(7, 18, 30, .86); }
  #selectedPanel .selected-body .sel-primary-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #selectedPanel .selected-body .sel-sim-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #selectedPanel .selected-body .metric {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 52px;
    padding: 7px 3px;
    border: 0;
    border-right: 1px solid rgba(120, 145, 175, .14);
    border-bottom: 1px solid rgba(120, 145, 175, .14);
    border-radius: 0;
    background: transparent;
  }
  #selectedPanel .selected-body .metric span { max-width: 100%; color: #7e93ad; font-size: 8.5px; text-transform: uppercase; letter-spacing: .35px; }
  #selectedPanel .selected-body .metric b { font-size: 14px; }

  #selectedPanel .player-boost-box { padding: 10px; border-radius: 12px; background: rgba(7, 18, 30, .86); }
  #selectedPanel .player-boost-box > div:first-child { min-width: 0; }
  #selectedPanel .player-boost-box p { font-size: 10.5px; }
  #selectedPanel .detail-boost-ctl { flex: 0 0 166px; min-width: 166px; grid-template-columns: 42px 82px 42px; }
  #selectedPanel .detail-boost-ctl > button { height: 44px; min-height: 44px; }

  #selectedPanel .manual-box,
  #selectedPanel .stack-box,
  #selectedPanel .recent-box { border-radius: 12px; border-color: rgba(120, 145, 175, .22); background: rgba(7, 18, 30, .86); }
  #selectedPanel .two-col input { min-height: 42px; font-size: 16px; }
  #selectedPanel .small-action-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #selectedPanel .small-action-row button { height: 40px; min-height: 40px; font-size: 10.5px; padding: 0 3px; }
  #selectedPanel .range-line { grid-template-columns: 30px minmax(0, 1fr) 38px; min-height: 38px; }

  #selectedPanel .sel-player-nav { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; }
  #selectedPanel .sel-player-nav button { min-height: 42px; padding: 0 10px; border-radius: 10px; font-size: 11.5px; }
  #selectedPanel .sel-player-nav button:last-child { justify-self: stretch; }
  #selectedPanel .sel-player-nav span { color: #7890aa; font-size: 10.5px; white-space: nowrap; }

  #selectedPanel .sel-gamelog { margin-top: 0; padding: 10px; border: 1px solid rgba(120, 145, 175, .22); border-radius: 12px; background: rgba(7, 18, 30, .86); }
  #selectedPanel .sel-gl-head { align-items: flex-start; flex-direction: column; }
  #selectedPanel .gl-tab { min-height: 34px; padding: 6px 10px; }
  #selectedPanel .gl-chart-wrap { padding: 6px 4px 0; }
  #selectedPanel .gl-table { min-width: 360px; }
  #selectedPanel .gl-table th,
  #selectedPanel .gl-table td { padding: 6px; }
}

@media (max-width: 360px) {
  #selectedPanel .player-boost-box { align-items: stretch; flex-direction: column; }
  #selectedPanel .detail-boost-ctl { width: 100%; grid-template-columns: 44px minmax(0, 1fr) 44px; }
  #selectedPanel .small-action-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* MOBILE NAVIGATION PERFORMANCE (r7): keep long cached lists in the DOM while
   allowing the browser to skip layout/paint work for off-screen cards. */
@media (max-width: 640px), (max-width: 950px) and (max-height: 500px), (max-device-width: 640px) {
  .m-pcard {
    content-visibility: auto;
    contain-intrinsic-size: auto 58px;
  }
  .m-lcard {
    content-visibility: auto;
    contain-intrinsic-size: auto 86px;
  }
}
/* DESKTOP PLAYER CARDS (8/10): dedicated card DOM backed by the shared player
   state. Player Detail owns the long-form stats and exposure controls. */
.desktop-player-card-toolbar {
  display: none;
}

@media (min-width: 951px), (min-width: 641px) and (min-height: 501px) {
  .player-grid-shell {
    container-type: inline-size;
    overflow: auto;
    background:
      var(--surface-base, radial-gradient(circle at 50% -20%, rgba(40, 106, 180, .13), transparent 42%),
      #040d17);
  }

  .desktop-player-card-toolbar {
    position: sticky;
    top: 0;
    z-index: 7;
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 42px;
    padding: 6px 10px;
    border-bottom: 1px solid rgba(var(--border-muted-rgb, 96, 132, 177), .28);
    background: rgba(var(--surface-raised-rgb, 5, 15, 26), .96);
    box-shadow: 0 7px 18px rgba(0, 0, 0, .18);
    backdrop-filter: blur(10px);
  }

  .desktop-player-use-all,
  .desktop-player-show-all,
  .desktop-player-sort {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--foreground-soft, #b7c7dd);
    font-size: 11px;
    white-space: nowrap;
  }

  .desktop-player-use-all,
  .desktop-player-show-all {
    cursor: pointer;
  }

  .desktop-player-use-all .section-check,
  .desktop-player-show-all .section-check {
    width: 17px;
    height: 17px;
    margin: 0;
    accent-color: var(--control-accent, #3f9bff);
  }

  .desktop-player-sort > span {
    color: var(--foreground-muted, #7890aa);
    font-size: 9px;
    letter-spacing: .6px;
    text-transform: uppercase;
  }

  .desktop-player-sort select {
    width: 180px;
    min-width: 0;
    height: 29px;
    min-height: 29px;
    padding: 0 28px 0 9px;
    border-color: var(--control-line, #28425f);
    border-radius: 7px;
    background-color: var(--surface-field, #071421);
    color: var(--foreground, #dceaff);
    font-size: 11px;
  }

  .desktop-player-card-hint {
    margin-left: auto;
    color: var(--foreground-muted, #6f86a1);
    font-size: 10px;
    white-space: nowrap;
  }

  .desktop-player-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 10px;
    width: 100%;
    padding: 9px;
  }

  .desktop-player-card {
    display: grid;
    grid-template-columns: minmax(180px, 200px) repeat(5, minmax(52px, 64px)) minmax(0, 1fr);
    align-items: center;
    column-gap: 8px;
    min-width: 0;
    min-height: 72px;
    padding: 9px 10px 9px 8px;
    border: 1px solid var(--control-line, #28425f);
    border-radius: 11px;
    background: var(--surface-raised, linear-gradient(135deg, rgba(9, 25, 42, .98), rgba(5, 16, 28, .98)));
    box-shadow: 0 5px 14px rgba(0, 0, 0, .14);
    content-visibility: auto;
    contain-intrinsic-size: auto 72px;
    transition: border-color .14s ease, background-color .14s ease, transform .14s ease;
  }
  .desktop-player-card.has-actual {
    grid-template-columns: minmax(170px, 200px) repeat(6, minmax(48px, 60px)) minmax(0, 1fr);
  }


  .desktop-player-card:nth-child(even) {
    background: var(--surface-raised, linear-gradient(135deg, rgba(9, 25, 42, .98), rgba(5, 16, 28, .98)));
  }

  .desktop-player-card:hover {
    border-color: var(--control-accent, #507eac);
    background: var(--surface-hover, linear-gradient(135deg, rgba(14, 38, 63, .99), rgba(7, 22, 38, .99)));
    transform: translateY(-1px);
  }

  .desktop-player-card.selected {
    border-color: var(--control-accent, #4c9eff);
    background: var(--surface-selected, linear-gradient(135deg, rgba(18, 52, 88, .98), rgba(7, 26, 47, .98)));
    box-shadow: 0 6px 18px rgba(0, 0, 0, .2);
  }

  .desktop-player-card.pf-filtered {
    opacity: .5;
  }

  .desktop-player-card:focus-visible {
    outline: 1px solid var(--control-accent, #78b8ff);
    outline-offset: -1px;
  }

  .desktop-player-card-identity {
    grid-column: 1;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    column-gap: 10px;
    min-width: 0;
    overflow: hidden;
  }

  .desktop-player-card-identity .player-card-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
  }

  .desktop-player-card-identity .player-name,
  .desktop-player-card-identity .player-card-copy > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .desktop-player-card-identity .player-name {
    color: var(--foreground, #f3f7ff);
    font-size: 13px;
    line-height: 1.15;
  }

  .desktop-player-card-identity .player-card-copy > span {
    color: var(--foreground-muted, #91a8c4);
    font-size: 10px;
    line-height: 1.15;
  }

  .desktop-player-card-identity .player-card-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    overflow: visible;
  }

  .desktop-player-card-identity .player-card-meta > span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .desktop-player-card-identity .player-card-status.state-chip {
    flex: 0 0 auto;
    height: 17px;
    padding: 0 5px;
    border-radius: 4px;
    font-size: 8px;
    line-height: 1;
    letter-spacing: .25px;
    text-transform: uppercase;
  }

  .desktop-player-card-metric {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 6px;
    color: var(--foreground, #edf5ff);
    font-size: 12px;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
  }

  .desktop-player-card-metric > span {
    color: var(--foreground-muted, #7890aa);
    font-size: 8px;
    line-height: 1;
    letter-spacing: .65px;
  }
  .desktop-player-card-metric.actual > b {
    color: var(--control-accent, #7fc8ff);
  }


  .desktop-player-card-metric.exposure > b,
  .desktop-player-card-metric.pool-exposure > b {
    color: var(--data-positive, #83d9b2);
  }

  .desktop-player-card-metric.lineup-exposure > span,
  .desktop-player-card-metric.pool-exposure > span {
    letter-spacing: .25px;
  }

  .desktop-player-card-empty {
    grid-column: 1 / -1;
    min-height: 70px;
  }

  .player-grid-shell .player-card-portrait {
    grid-row: 1 / span 2;
    position: relative;
    width: 42px;
    height: 42px;
    isolation: isolate;
  }

  .player-grid-shell .player-card-face {
    position: absolute;
    inset: 1px;
    z-index: 1;
    width: 40px;
    height: 40px;
    border: 1px solid var(--control-line, #466f9c);
    border-radius: 50%;
    background: var(--surface-raised, #071729);
    object-fit: cover;
    object-position: center top;
  }

  .player-grid-shell .player-card-team-badge {
    position: absolute;
    right: -1px;
    bottom: -1px;
    z-index: 2;
    width: 17px;
    height: 17px;
    border: 2px solid var(--control-line, #071523);
    border-radius: 50%;
    background: var(--surface-raised, #0b2034);
    box-shadow: 0 2px 5px rgba(0, 0, 0, .4);
  }

  .player-grid-shell .player-card-team-badge img {
    width: 12px;
    height: 12px;
  }

  .player-grid-shell .player-card-portrait:not(:has(.player-card-face)) .player-card-team-badge {
    inset: 1px auto auto 1px;
    width: 40px;
    height: 40px;
    border-width: 1px;
    border-color: var(--control-line, #466f9c);
    background: var(--surface-raised, #071729);
    box-shadow: none;
  }

  .player-grid-shell .player-card-portrait:not(:has(.player-card-face)) .player-card-team-badge img {
    width: 34px;
    height: 34px;
  }

}

@container (max-width: 1099px) {
  .desktop-player-card-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .player-grid-shell .desktop-player-card-hint {
    display: none;
  }
}

@container (max-width: 620px) {
  .desktop-player-card {
    grid-template-columns: minmax(150px, 200px) repeat(5, minmax(46px, 56px)) minmax(0, 1fr);
    column-gap: 6px;
    padding-left: 7px;
    padding-right: 7px;
  }

  .desktop-player-card.has-actual {
    grid-template-columns: minmax(140px, 200px) repeat(6, minmax(42px, 52px)) minmax(0, 1fr);
  }

  .player-grid-shell .desktop-player-sort select {
    width: 150px;
  }
}

/* GAME BOARD CUSTOM SORT (8/10): matches the Players/Team Stacks toolbar and
   only changes local section sort state. */
.games-board-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 42px;
  padding: 6px 8px;
  border: 1px solid rgba(var(--border-muted-rgb, 96, 132, 177), .24);
  border-radius: 7px;
  background: rgba(var(--surface-base-rgb, 5, 15, 26), .96);
}

.games-board-sort {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--foreground-soft, #b7c7dd);
  font-size: 11px;
  white-space: nowrap;
}

.games-board-sort > span {
  color: var(--foreground-muted, #7890aa);
  font-size: 9px;
  letter-spacing: .6px;
  text-transform: uppercase;
}

.games-board-sort select {
  width: 210px;
  min-width: 0;
  height: 29px;
  min-height: 29px;
  padding: 0 28px 0 9px;
  border-color: var(--control-line, #28425f);
  border-radius: 7px;
  background-color: var(--surface-field, #071421);
  color: var(--foreground, #dceaff);
  font-size: 11px;
}

.games-board-sort-hint {
  margin-left: auto;
  color: var(--foreground-muted, #6f86a1);
  font-size: 10px;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .games-board-toolbar {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .games-board-sort select {
    width: 170px;
  }

  .games-board-sort-hint {
    display: none;
  }
}

/* DESKTOP GAME BOARD CARDS + GAME DETAIL (8/11): desktop MLB only. */
#gamesBoard {
  container-type: inline-size;
  min-width: 0;
}

.game-board-card-toolbar {
  position: sticky;
  top: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 46px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(var(--border-muted-rgb, 96, 132, 177), .24);
  background: rgba(var(--surface-raised-rgb, 5, 15, 26), .96);
  backdrop-filter: blur(10px);
}

.game-board-use-all {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--foreground-soft, #b7c7dd);
  font-size: 11px;
  white-space: nowrap;
  cursor: pointer;
}

.game-board-use-all .section-check {
  width: 17px;
  height: 17px;
  margin: 0;
}

.game-board-card-hint {
  margin-left: auto;
  color: var(--foreground-muted, #6f86a1);
  font-size: 10px;
  white-space: nowrap;
}

.game-board-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 10px;
  width: 100%;
}

.game-board-card {
  display: grid;
  grid-template-columns: minmax(225px, 1fr) repeat(4, minmax(58px, 74px));
  align-items: center;
  column-gap: 8px;
  min-width: 0;
  min-height: 78px;
  padding: 9px 10px 9px 8px;
  border: 1px solid var(--control-line, #28425f);
  border-radius: 11px;
  background: var(--surface-raised, linear-gradient(135deg, rgba(9, 25, 42, .98), rgba(5, 16, 28, .98)));
  box-shadow: 0 5px 14px rgba(0, 0, 0, .14);
  content-visibility: auto;
  contain-intrinsic-size: auto 78px;
  cursor: pointer;
  transition: border-color .14s ease, background-color .14s ease, transform .14s ease, opacity .14s ease;
}

.game-board-card:hover {
  border-color: var(--control-accent, #507eac);
  background: var(--surface-hover, linear-gradient(135deg, rgba(14, 38, 63, .99), rgba(7, 22, 38, .99)));
  transform: translateY(-1px);
}

.game-board-card.selected {
  border-color: var(--control-accent, #4c9eff);
  background: var(--surface-selected, linear-gradient(135deg, rgba(18, 52, 88, .98), rgba(7, 26, 47, .98)));
  box-shadow: 0 6px 18px rgba(0, 0, 0, .2);
}

.game-board-card.disabled { opacity: .47; }
.game-board-card.disabled.selected { opacity: .72; }
.game-board-card:focus-visible { outline: 1px solid var(--control-accent, #78b8ff); outline-offset: -1px; }

.game-board-card-use {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.game-board-card-use .section-check {
  width: 18px;
  height: 18px;
  margin: 0;
}

.game-board-card-matchup {
  display: grid;
  grid-template-columns: minmax(82px, 1fr) 16px minmax(82px, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 4px 6px;
  min-width: 0;
}

.game-board-card-team {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.game-board-card-team > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.game-board-card-team b,
.game-board-card-team span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.game-board-card-team b { color: var(--foreground, #f3f7ff); font-size: 12px; }
.game-board-card-team span { color: var(--foreground, #dbeaff); font-size: 12px; font-weight: 800; }

.game-board-card-logo {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border-color: var(--control-line, #466f9c);
  background: var(--surface-raised, #071729);
}

.game-board-card-logo img { width: 29px; height: 29px; }
.game-board-card-logo .logo-fallback { font-size: 11px; }
.game-board-card-at { color: var(--foreground-muted, #67819e); font-size: 10px; text-align: center; }

.game-board-card-matchup > small {
  grid-column: 1 / 4;
  color: var(--foreground-muted, #8199b5);
  font-size: 9px;
}

.game-board-card-matchup > .state-chip {
  grid-column: 4;
  grid-row: 1 / 3;
  align-self: center;
  min-height: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 8px;
}

.game-board-card-metric {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 6px;
  color: var(--foreground, #edf5ff);
  font-size: 12px;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.game-board-card-metric > span {
  color: var(--foreground-muted, #7890aa);
  font-size: 8px;
  letter-spacing: .45px;
}

.game-board-card-metric.total > b,
.game-board-card-metric.exposure > b { color: var(--data-positive, #83d9b2); }
.game-board-card-empty { grid-column: 1 / -1; }

.game-detail-panel .game-detail-top {
  grid-template-columns: 108px minmax(0, 1fr) auto;
}

.game-detail-logo-pair {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--foreground-muted, #7890aa);
  font-size: 9px;
}

.game-detail-logo {
  width: 43px;
  height: 43px;
  border-radius: 50%;
  border-color: var(--control-accent, #4b80b8);
  background: var(--surface-base, #071729);
}

.game-detail-logo img { width: 35px; height: 35px; }
.game-detail-logo .logo-fallback { font-size: 12px; }
.game-detail-panel .game-detail-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.game-exposure-box input[type="number"] { text-align: left; }

.game-detail-teams,
.game-detail-players {
  display: grid;
  gap: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-base, #04111d);
}

.game-detail-teams > .eyebrow,
.game-detail-players > .eyebrow { margin-bottom: 8px; }

.game-detail-team-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  border-top: 1px solid rgba(var(--border-muted-rgb, 96, 132, 177), .18);
}

.game-detail-team-row:nth-of-type(2) { border-top: 0; }
.game-detail-team-row > div { display: grid; gap: 3px; min-width: 0; }
.game-detail-team-row b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--foreground, #f0f6ff); font-size: 10px; }
.game-detail-team-row span { color: var(--foreground-muted, #7f96b1); font-size: 8px; }
.game-detail-team-row strong { color: var(--data-positive, #83d9b2); font-size: 13px; }

.game-detail-team-logo { width: 34px; height: 34px; border-radius: 50%; background: var(--surface-base, #071729); }
.game-detail-team-logo img { width: 27px; height: 27px; }
.game-detail-team-logo .logo-fallback { font-size: 10px; }

.game-detail-player-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px 42px 42px;
  align-items: center;
  gap: 5px;
  min-height: 31px;
  border-top: 1px solid rgba(var(--border-muted-rgb, 96, 132, 177), .18);
  color: var(--foreground, #c9d9ed);
  font-size: 9px;
  text-align: right;
}

.game-detail-player-head {
  min-height: 24px;
  border-top: 0;
  color: var(--foreground-muted, #7188a3);
  font-size: 8px;
  letter-spacing: .4px;
  text-transform: uppercase;
}

.game-detail-player-row > :first-child { text-align: left; }
.game-detail-player-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--foreground, #f0f6ff); }

@container (max-width: 1140px) {
  .game-board-card-grid { grid-template-columns: minmax(0, 1fr); }
  .game-board-card-hint { display: none; }
}

@container (max-width: 700px) {
  .game-board-card {
    grid-template-columns: minmax(205px, 1fr) repeat(4, minmax(50px, 60px));
    column-gap: 6px;
    padding-left: 7px;
    padding-right: 7px;
  }
  .game-board-card-toolbar { align-items: flex-start; flex-wrap: wrap; }
}
/* TEAM STACK CARDS + TEAM DETAIL (8/10): desktop Team Stacks now follows the
   player-card interaction model. The Slate Picker and its layout are untouched. */
#teamStacksBoard {
  container-type: inline-size;
  min-width: 0;
  padding: 0 10px 10px;
  background:
    var(--surface-base, radial-gradient(circle at 50% -20%, rgba(40, 106, 180, .11), transparent 44%),
    #040d17);
}

.team-stack-card-toolbar {
  position: sticky;
  top: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 46px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(var(--border-muted-rgb, 96, 132, 177), .24);
  background: rgba(var(--surface-raised-rgb, 5, 15, 26), .96);
  backdrop-filter: blur(10px);
}

.team-stack-card-toolbar .stack-size-tabs {
  flex: 1 1 auto;
}

.wnba-team-stack-mode {
  display: inline-grid;
  flex: 0 0 auto;
  min-width: 78px;
  min-height: 34px;
  align-content: center;
  justify-items: center;
  padding: 3px 11px;
  border: 1px solid var(--control-line, #31577e);
  border-radius: 8px;
  background: var(--surface-base, #071729);
  color: var(--foreground, #e7f2ff);
  line-height: 1.05;
}

.wnba-team-stack-mode b {
  font-size: 12px;
}

.wnba-team-stack-mode small {
  margin-top: 3px;
  color: var(--foreground-muted, #7890aa);
  font-size: 8px;
  letter-spacing: .45px;
  text-transform: uppercase;
}

.wnba-team-stack-card .team-stack-card-copy > span {
  color: var(--foreground-soft, #a6bad2);
}

.team-stack-sort {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--foreground-soft, #b7c7dd);
  font-size: 11px;
  white-space: nowrap;
}

.team-stack-sort > span {
  color: var(--foreground-muted, #7890aa);
  font-size: 9px;
  letter-spacing: .6px;
  text-transform: uppercase;
}

.team-stack-sort select {
  width: 180px;
  min-width: 0;
  height: 29px;
  min-height: 29px;
  padding: 0 28px 0 9px;
  border-color: var(--control-line, #28425f);
  border-radius: 7px;
  background-color: var(--surface-field, #071421);
  color: var(--foreground, #dceaff);
  font-size: 11px;
}
.team-stack-use-all {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--foreground-soft, #b7c7dd);
  font-size: 11px;
  white-space: nowrap;
  cursor: pointer;
}

.team-stack-use-all .section-check {
  width: 17px;
  height: 17px;
  margin: 0;
}

.team-stack-card-hint {
  color: var(--foreground-muted, #6f86a1);
  font-size: 10px;
  white-space: nowrap;
}

.team-stack-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 10px;
  width: 100%;
  padding-top: 9px;
}

.team-stack-card {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) repeat(5, minmax(54px, 70px));
  align-items: center;
  column-gap: 8px;
  min-width: 0;
  min-height: 72px;
  padding: 9px 10px 9px 8px;
  border: 1px solid var(--control-line, #28425f);
  border-radius: 11px;
  background: var(--surface-raised, linear-gradient(135deg, rgba(9, 25, 42, .98), rgba(5, 16, 28, .98)));
  box-shadow: 0 5px 14px rgba(0, 0, 0, .14);
  content-visibility: auto;
  contain-intrinsic-size: auto 72px;
  cursor: pointer;
  transition: border-color .14s ease, background-color .14s ease, transform .14s ease, opacity .14s ease;
}

.team-stack-card:hover {
  border-color: var(--control-accent, #507eac);
  background: var(--surface-hover, linear-gradient(135deg, rgba(14, 38, 63, .99), rgba(7, 22, 38, .99)));
  transform: translateY(-1px);
}

.team-stack-card.selected {
  border-color: var(--control-accent, #4c9eff);
  background: var(--surface-selected, linear-gradient(135deg, rgba(18, 52, 88, .98), rgba(7, 26, 47, .98)));
  box-shadow: 0 6px 18px rgba(0, 0, 0, .2);
}

.team-stack-card.disabled {
  opacity: .47;
}

.team-stack-card.disabled.selected {
  opacity: .72;
}

.team-stack-card:focus-visible {
  outline: 1px solid var(--control-accent, #78b8ff);
  outline-offset: -1px;
}

.team-stack-card-use {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.team-stack-card-use .section-check {
  width: 18px;
  height: 18px;
  margin: 0;
}

.team-stack-card-identity {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.team-stack-card-logo {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border-color: var(--control-line, #466f9c);
  background: var(--surface-raised, #071729);
}

.team-stack-card-logo img {
  width: 34px;
  height: 34px;
}

.team-stack-card-logo .logo-fallback {
  font-size: 13px;
}

.team-stack-card-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 3px 7px;
  min-width: 0;
}

.team-stack-card-copy b,
.team-stack-card-copy > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-stack-card-copy b {
  color: var(--foreground, #f3f7ff);
  font-size: 13px;
}

.team-stack-card-copy > span {
  grid-column: 1 / -1;
  color: var(--foreground-muted, #91a8c4);
  font-size: 10px;
}

.team-stack-card-copy .state-chip {
  grid-column: 2;
  grid-row: 1;
  min-height: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 8px;
}

.team-stack-card-metric {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 6px;
  color: var(--foreground, #edf5ff);
  font-size: 12px;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.team-stack-card-metric > span {
  color: var(--foreground-muted, #7890aa);
  font-size: 8px;
  letter-spacing: .55px;
}

.team-stack-card-metric.edge > b,
.team-stack-card-metric.exposure > b,
.team-stack-card-metric.pool-exposure > b {
  color: var(--data-positive, #83d9b2);
}

.team-stack-card-metric.lineup-exposure > span,
.team-stack-card-metric.pool-exposure > span {
  letter-spacing: .2px;
}

.team-stack-card-metric.run-edge > b {
  color: var(--foreground, #b8f7ff);
}

.team-stack-card-empty {
  grid-column: 1 / -1;
}

.team-detail-panel .team-detail-head p {
  margin-top: 3px;
}

.team-detail-panel .team-detail-top {
  grid-template-columns: 72px minmax(0, 1fr) auto;
}

.team-detail-panel .team-detail-top small {
  color: var(--foreground-muted, #7f96b1);
  font-size: 10px;
}

.team-detail-panel .team-detail-tile {
  width: 72px;
  height: 72px;
}

.team-detail-panel .team-detail-logo {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border-color: var(--control-accent, #4b80b8);
  background: var(--surface-base, #071729);
}

.team-detail-panel .team-detail-logo img {
  width: 48px;
  height: 48px;
}

.team-detail-panel .team-detail-logo .logo-fallback {
  font-size: 17px;
}

.team-detail-panel .team-detail-metrics {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.team-stack-exposure-box input[type="number"] {
  text-align: left;
}

.team-detail-hitters {
  display: grid;
  gap: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-base, #04111d);
}

.team-detail-hitters > .eyebrow {
  margin-bottom: 8px;
}

.team-detail-hitter-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px 58px 42px;
  align-items: center;
  gap: 5px;
  min-height: 31px;
  border-top: 1px solid rgba(var(--border-muted-rgb, 96, 132, 177), .18);
  color: var(--foreground, #c9d9ed);
  font-size: 10px;
  text-align: right;
}

.team-detail-hitter-row:first-of-type {
  border-top: 0;
}

.team-detail-hitter-head {
  min-height: 24px;
  color: var(--foreground-muted, #7188a3);
  font-size: 8px;
  letter-spacing: .45px;
  text-transform: uppercase;
}

.team-detail-hitter-row > :first-child {
  text-align: left;
}

.team-detail-hitter-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--foreground, #f0f6ff);
}

@container (max-width: 1140px) {
  .team-stack-card-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .team-stack-card-hint {
    display: none;
  }
}

@container (max-width: 660px) {
  .team-stack-card {
    grid-template-columns: minmax(140px, 1fr) repeat(5, minmax(48px, 58px));
    column-gap: 6px;
    padding-left: 7px;
    padding-right: 7px;
  }

  .team-stack-card-toolbar {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .team-stack-sort select {
    width: 150px;
  }
}


/* DESKTOP STACK SHAPE CARDS + SHAPE DETAIL (8/11): desktop MLB only. */
#stackShapesBoard {
  container-type: inline-size;
  min-width: 0;
  padding: 0 10px 10px;
  background:
    var(--surface-base, radial-gradient(circle at 50% -20%, rgba(40, 106, 180, .11), transparent 44%),
    #040d17);
}

.stack-shape-card-toolbar {
  position: sticky;
  top: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 46px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(var(--border-muted-rgb, 96, 132, 177), .24);
  background: rgba(var(--surface-raised-rgb, 5, 15, 26), .96);
  backdrop-filter: blur(10px);
}

.stack-shape-sort {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--foreground-soft, #b7c7dd);
  font-size: 11px;
  white-space: nowrap;
}

.stack-shape-sort > span {
  color: var(--foreground-muted, #7890aa);
  font-size: 9px;
  letter-spacing: .6px;
  text-transform: uppercase;
}

.stack-shape-sort select {
  width: 218px;
  min-height: 28px;
  padding: 4px 28px 4px 8px;
  border: 1px solid var(--control-line, #315071);
  border-radius: 5px;
  background: var(--surface-field, #071827);
  color: var(--foreground, #e8f2ff);
  font-size: 10px;
}

.stack-shape-use-all {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--foreground-muted, #9db0c8);
  font-size: 10px;
  white-space: nowrap;
  cursor: pointer;
}

.stack-shape-use-all .section-check {
  width: 16px;
  height: 16px;
  margin: 0;
}

.stack-shape-card-hint {
  margin-left: auto;
  color: var(--foreground-muted, #657d99);
  font-size: 9px;
}

.stack-shape-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding-top: 10px;
}

.stack-shape-card {
  display: grid;
  grid-template-columns: minmax(215px, 1fr) repeat(4, minmax(54px, 70px));
  align-items: center;
  column-gap: 8px;
  min-height: 82px;
  padding: 9px 10px;
  border: 1px solid var(--control-line, #24415f);
  border-radius: 8px;
  background: var(--surface-raised, linear-gradient(135deg, rgba(8, 27, 45, .98), rgba(5, 18, 31, .98)));
  box-shadow: none;
  cursor: pointer;
  transition: border-color .14s ease, background-color .14s ease, transform .14s ease, opacity .14s ease;
}

.stack-shape-card.has-actual {
  grid-template-columns: minmax(175px, 1fr) repeat(6, minmax(50px, 64px));
}

.stack-shape-card:hover {
  border-color: var(--control-accent, #507eac);
  background: var(--surface-hover, linear-gradient(135deg, rgba(14, 38, 63, .99), rgba(7, 22, 38, .99)));
  transform: translateY(-1px);
}

.stack-shape-card.selected {
  border-color: var(--control-accent, #4c9eff);
  background: var(--surface-selected, linear-gradient(135deg, rgba(18, 52, 88, .98), rgba(7, 26, 47, .98)));
  box-shadow: 0 6px 18px rgba(0, 0, 0, .2);
}

.stack-shape-card.disabled { opacity: .47; }
.stack-shape-card.disabled.selected { opacity: .72; }
.stack-shape-card:focus-visible { outline: 1px solid var(--control-accent, #78b8ff); outline-offset: -1px; }

.stack-shape-card-use {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.stack-shape-card-use .section-check {
  width: 18px;
  height: 18px;
  margin: 0;
}

.stack-shape-card-identity {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.stack-shape-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  white-space: nowrap;
}

.stack-shape-glyph > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--control-accent, #4b80b8);
  border-radius: 8px;
  background: var(--surface-base, linear-gradient(145deg, #163b62, #0a223b));
  box-shadow: none;
  color: var(--foreground, #eef7ff);
  font-size: 14px;
  font-weight: 800;
}

.stack-shape-glyph > i {
  color: var(--foreground-muted, #6f8daa);
  font-size: 10px;
  font-style: normal;
}

.stack-shape-glyph.no-stack > span {
  border-style: dashed;
  border-color: var(--control-line, #4a6078);
  background: var(--surface-base, #0a1826);
  color: var(--foreground-muted, #8196ad);
}

.stack-shape-card-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 7px;
  min-width: 0;
}

.stack-shape-card-copy b,
.stack-shape-card-copy > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stack-shape-card-copy b {
  color: var(--foreground, #f3f7ff);
  font-size: 13px;
}

.stack-shape-card-copy > span {
  grid-column: 1 / -1;
  color: var(--foreground-muted, #91a8c4);
  font-size: 9px;
}

.stack-shape-card-copy > small {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  padding: 3px 5px;
  border: 1px solid rgba(var(--border-muted-rgb, 74, 158, 255), .35);
  border-radius: 4px;
  background: rgba(var(--surface-raised-rgb, 29, 104, 180), .16);
  color: var(--control-accent, #8ec8ff);
  font-size: 8px;
}

.stack-shape-card-metric {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 6px;
  color: var(--foreground, #edf5ff);
  font-size: 12px;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.stack-shape-card-metric > span {
  color: var(--foreground-muted, #7890aa);
  font-size: 8px;
  letter-spacing: .45px;
}

.stack-shape-card-metric.exposure > b,
.stack-shape-card-metric.projection > b,
.stack-shape-card-metric.actual > b {
  color: var(--data-positive, #83d9b2);
}

.stack-shape-card-empty { grid-column: 1 / -1; }

.shape-detail-panel .shape-detail-head p {
  margin-top: 3px;
}

.shape-detail-panel .shape-detail-top {
  grid-template-columns: 112px minmax(0, 1fr) auto;
}

.shape-detail-panel .shape-detail-top small {
  color: var(--foreground-muted, #7f96b1);
  font-size: 10px;
}

.shape-detail-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 108px;
  min-height: 64px;
  padding: 8px;
  border: 1px solid var(--control-line, #315778);
  border-radius: 7px;
  background: var(--surface-base, linear-gradient(145deg, #09233b, #051624));
}

.sport-nfl .shape-detail-tile .shape-detail-glyph {
  min-width: 0;
  max-width: 100%;
}
.sport-nfl .shape-detail-tile .shape-detail-glyph > strong {
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.25;
}

.shape-detail-glyph > span {
  width: 30px;
  height: 34px;
  border-radius: 7px;
  font-size: 13px;
}

.shape-detail-panel .shape-detail-metrics {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.shape-detail-rule-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: 8px;
}

.shape-detail-rule-fields > label {
  display: grid;
  gap: 5px;
  color: var(--foreground-muted, #8fa5bf);
  font-size: 9px;
  letter-spacing: .35px;
  text-transform: uppercase;
}

.shape-detail-rule-fields > label:nth-child(3) {
  grid-column: 1 / -1;
}

.shape-detail-rule-fields input {
  width: 100%;
  min-width: 0;
  text-align: left;
}

.shape-detail-rule-note {
  margin: 7px 0 0;
  color: #f2c977;
  font-size: 9px;
  line-height: 1.35;
}

.shape-detail-lineups {
  display: grid;
  gap: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-raised, #04111d);
}

.shape-detail-lineups > .eyebrow {
  margin-bottom: 8px;
}

.shape-detail-lineup-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 62px 50px;
  align-items: center;
  gap: 6px;
  min-height: 31px;
  border-top: 1px solid rgba(var(--border-muted-rgb, 96, 132, 177), .18);
  color: var(--foreground, #c9d9ed);
  font-size: 10px;
  text-align: right;
}

.shape-detail-lineups.has-actual .shape-detail-lineup-row {
  grid-template-columns: minmax(0, 1fr) 62px 50px 50px;
}

.shape-detail-lineup-row > :first-child {
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--foreground, #f0f6ff);
}

.shape-detail-lineup-head {
  min-height: 24px;
  border-top: 0;
  color: var(--foreground-muted, #7188a3);
  font-size: 8px;
  letter-spacing: .45px;
  text-transform: uppercase;
}

.shape-detail-lineup-head > :first-child {
  color: var(--foreground-muted, #7188a3);
}

@container (max-width: 1180px) {
  .stack-shape-card-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .stack-shape-card-hint {
    display: none;
  }
}

@container (max-width: 680px) {
  .stack-shape-card {
    grid-template-columns: minmax(190px, 1fr) repeat(4, minmax(48px, 58px));
    column-gap: 6px;
    padding-left: 7px;
    padding-right: 7px;
  }

  .stack-shape-card.has-actual {
    grid-template-columns: minmax(145px, 1fr) repeat(6, minmax(42px, 52px));
  }

  .stack-shape-card-toolbar {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .stack-shape-sort select {
    width: 180px;
  }
}


/* STACK SHAPE TYPOGRAPHY CLEANUP r2 (8/11): one signature, no number boxes. */
.stack-shape-glyph {
  min-width: 80px;
  justify-content: flex-start;
  gap: 0;
}

.stack-shape-glyph > strong {
  color: var(--foreground, #eaf5ff);
  font-size: 19px;
  font-weight: 750;
  letter-spacing: .8px;
  line-height: 1;
  white-space: nowrap;
}

.stack-shape-glyph.no-stack > strong {
  color: var(--foreground-muted, #8ea3b9);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .25px;
}

.stack-shape-card-copy > span {
  grid-column: 1;
  grid-row: 1;
  color: var(--foreground-muted, #91a8c4);
  font-size: 10px;
}

.stack-shape-card-copy > small {
  grid-column: 2;
  grid-row: 1;
}

.shape-detail-glyph > strong {
  font-size: 21px;
  letter-spacing: 1px;
}

.shape-detail-glyph.no-stack > strong {
  font-size: 13px;
}


/* STACK SHAPE NORMAL TEXT SIZE r3 (8/11). */
.stack-shape-glyph > strong,
.stack-shape-glyph.no-stack > strong,
.shape-detail-glyph > strong,
.shape-detail-glyph.no-stack > strong {
  font-size: 13px;
  font-weight: 650;
  letter-spacing: .2px;
}


/* SHARED SECTION GLOBAL EXPOSURE r237 (8/25): one real Min/Max control for
   Players, Team Stacks, Games, and Stack Shapes. The established Stack Shape
   class names stay in place so the responsive popover remains one component. */
.section-global-exposure-legacy {
  display: flex;
  padding: 7px 0;
}
.stack-shape-global-pool {
  position: relative;
  flex: 0 0 auto;
}

.stack-shape-global-pool-control {
  display: grid;
  grid-template-columns: auto auto 10px;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 4px 8px;
  border: 1px solid var(--control-line, #315071);
  border-radius: 5px;
  background: var(--surface-base, #071827);
  color: var(--foreground, #e8f2ff);
  line-height: 1;
}

.stack-shape-global-pool-control > span {
  color: var(--foreground-muted, #7890aa);
  font-size: 9px;
  letter-spacing: .6px;
  text-transform: uppercase;
}

.stack-shape-global-pool-control > strong {
  color: var(--foreground, #d9eaff);
  font-size: 10px;
  font-weight: 650;
  white-space: nowrap;
}

.stack-shape-global-pool-control > i {
  color: var(--control-accent, #78b8ff);
  font-size: 12px;
  font-style: normal;
  transform: translateY(-1px);
}

.stack-shape-global-pool-control[aria-expanded="true"] {
  border-color: var(--control-accent, #5aa9ff);
  background: var(--surface-base, #0a2138);
  box-shadow: none;
}

.stack-shape-global-popover {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 30;
  width: 310px;
  padding: 12px;
  border: 1px solid var(--control-line, #376185);
  border-radius: 8px;
  background: var(--surface-raised, #071725);
  box-shadow: 0 16px 38px rgba(0, 0, 0, .52);
  color: var(--foreground, #dcecff);
}

.stack-shape-global-popover[popover] {
  position: fixed;
  inset: auto;
  margin: 0;
  max-width: calc(100vw - 24px);
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
}

.stack-shape-global-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.stack-shape-global-head > div {
  display: grid;
  gap: 4px;
}

.stack-shape-global-head span {
  color: var(--control-accent, #7dbdff);
  font-size: 9px;
  letter-spacing: .75px;
  text-transform: uppercase;
}

.stack-shape-global-head b {
  color: var(--foreground, #eaf4ff);
  font-size: 12px;
  font-weight: 650;
}

.stack-shape-global-head > button {
  width: 25px;
  min-width: 25px;
  min-height: 25px;
  padding: 0;
  border-color: transparent;
  color: var(--foreground-muted, #8fa7c1);
  font-size: 17px;
}

.stack-shape-global-range {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 9px;
  min-height: 37px;
}

.stack-shape-global-range > span {
  color: var(--foreground-muted, #92a9c3);
  font-size: 9px;
  letter-spacing: .6px;
  text-transform: uppercase;
}

/* STACK SHAPE RANGE ALIGNMENT r5 (8/11): the painted track is inset by the
   thumb radius, so 0% and 100% land exactly on the visible endpoints. */
.stack-shape-global-range input[type="range"] {
  width: 100%;
  height: 18px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  outline: 0;
  background:
    linear-gradient(to right,
      var(--control-accent, #67afff) 0%,
      var(--control-accent, #67afff) var(--stack-shape-range-fill, 0%),
      var(--chart-track, #75869a) var(--stack-shape-range-fill, 0%),
      var(--chart-track, #75869a) 100%)
    center / calc(100% - 14px) 3px no-repeat;
  cursor: pointer;
}

.stack-shape-global-range input[type="range"]::-webkit-slider-runnable-track {
  height: 3px;
  border: 0;
  background: transparent;
}

.stack-shape-global-range input[type="range"]::-webkit-slider-thumb {
  width: 14px;
  height: 14px;
  margin-top: -5.5px;
  -webkit-appearance: none;
  border: 1px solid var(--control-accent, #8bc5ff);
  border-radius: 50%;
  background: var(--surface-field, #67afff);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .45);
}

.stack-shape-global-range input[type="range"]::-moz-range-track {
  height: 3px;
  border: 0;
  background: transparent;
}

.stack-shape-global-range input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 1px solid var(--control-accent, #8bc5ff);
  border-radius: 50%;
  background: var(--surface-field, #67afff);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .45);
}

.stack-shape-global-range input[type="range"]:focus-visible {
  outline: 1px solid rgba(var(--control-accent-rgb, 103, 175, 255), .72);
  outline-offset: -1px;
  border-radius: 4px;
}

.stack-shape-global-range output {
  color: var(--foreground, #f1f7ff);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.stack-shape-global-popover > small {
  display: block;
  margin-top: 5px;
  color: var(--foreground-muted, #7088a3);
  font-size: 9px;
}

.stack-shape-global-actions {
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 8px;
  margin-top: 13px;
}

.stack-shape-global-actions button {
  min-height: 30px;
}

@container (max-width: 680px) {
  .stack-shape-global-popover {
    width: min(310px, calc(100vw - 56px));
  }
}

/* DESKTOP BOARD CARD GEOMETRY r1 (8/11): every data card uses the Players
   card's exact height, inset, outline, radius, surface, shadow, and grid gap. */
@media (min-width: 951px), (min-width: 641px) and (min-height: 501px) {
  .desktop-player-card,
  .team-stack-card,
  .game-board-card,
  .stack-shape-card {
    min-width: 0;
    min-height: 72px;
    padding: 9px 10px 9px 8px;
    border: 1px solid var(--control-line, #28425f);
    border-radius: 11px;
    background: var(--surface-raised, linear-gradient(135deg, rgba(9, 25, 42, .98), rgba(5, 16, 28, .98)));
    box-shadow: 0 5px 14px rgba(0, 0, 0, .14);
    content-visibility: auto;
    contain-intrinsic-size: auto 72px;
  }

  .desktop-player-card-grid,
  .team-stack-card-grid,
  .game-board-card-grid,
  .stack-shape-card-grid {
    gap: 8px 10px;
    width: 100%;
  }
}
/* MOBILE RECENT-PARITY r32 (8/11): shared MLB boards, truthful Pool controls,
   exact portfolio receipt, and the missing S1M P/C build choice. */
@media (max-width: 640px), (max-width: 950px) and (max-height: 500px), (max-device-width: 640px) {
  .mobile-more-boards {
    display: grid;
    gap: 8px;
    padding: 4px 0 12px;
    border-bottom: 1px solid rgba(120, 145, 175, .24);
  }

  .mobile-more-boards[hidden] { display: none; }

  .mobile-board-links,
  .m-board-switch {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }

  .mobile-board-links button,
  .m-board-switch button {
    min-width: 0;
    min-height: 44px;
    height: auto;
    padding: 7px 5px;
    border: 1px solid rgba(120, 145, 175, .32);
    border-radius: 10px;
    background: rgba(12, 22, 34, .96);
    color: #dceaff;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.2;
    white-space: normal;
  }

  .m-board-screen { padding-top: 8px; }

  .m-board-screen > .m-sec-lab {
    margin: 0 0 7px;
  }

  .m-board-switch {
    position: sticky;
    top: -8px;
    z-index: 12;
    margin: 0 -2px 8px;
    padding: 8px 2px;
    background: rgba(5, 11, 19, .97);
    backdrop-filter: blur(10px);
  }

  .m-board-switch button.active {
    border-color: #4c9eff;
    background: rgba(24, 62, 110, .86);
    color: #f3f8ff;
    box-shadow: none;
  }

  .m-board-host {
    container-type: inline-size;
    min-width: 0;
  }

  .m-board-host .team-stack-card-toolbar,
  .m-board-host .game-board-card-toolbar,
  .m-board-host .stack-shape-card-toolbar {
    position: sticky;
    top: 52px;
    z-index: 8;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 0;
    margin: 0;
    padding: 8px 0;
    background: rgba(5, 15, 26, .97);
  }

  .m-board-host .team-stack-card-hint,
  .m-board-host .game-board-card-hint,
  .m-board-host .stack-shape-card-hint {
    display: none;
  }

  .m-board-host .stack-size-tabs {
    display: flex;
    flex: 1 1 100%;
    gap: 5px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .m-board-host .stack-size-tabs::-webkit-scrollbar { display: none; }

  .m-board-host .stack-size-tab {
    flex: 1 0 auto;
    min-height: 36px;
    height: 36px;
    padding: 0 9px;
  }

  .m-board-host .team-stack-sort,
  .m-board-host .games-board-sort,
  .m-board-host .stack-shape-sort {
    flex: 1 1 170px;
    min-width: 0;
  }

  .m-board-host .team-stack-sort select,
  .m-board-host .games-board-sort select,
  .m-board-host .stack-shape-sort select {
    width: 100%;
    min-height: 36px;
  }

  .m-board-host .team-stack-use-all,
  .m-board-host .game-board-use-all,
  .m-board-host .stack-shape-use-all {
    min-height: 36px;
  }

  .m-board-host .stack-shape-global-pool {
    flex: 1 1 145px;
  }

  .m-board-host .stack-shape-global-pool-control {
    width: 100%;
    min-height: 36px;
  }

  #mPlayerGlobalExposure {
    flex: 1 1 100%;
    min-width: 0;
  }

  #mPlayerGlobalExposure .stack-shape-global-pool-control {
    width: 100%;
    min-height: 40px;
  }

  #mPlayerGlobalExposure .stack-shape-global-popover {
    position: fixed;
    z-index: 760;
    left: 14px;
    right: 14px;
    top: auto;
    bottom: calc(76px + env(safe-area-inset-bottom));
    width: auto;
    max-height: 58vh;
    overflow-y: auto;
  }

  .m-board-host .stack-shape-global-popover {
    position: fixed;
    left: 14px;
    right: 14px;
    top: auto;
    bottom: calc(76px + env(safe-area-inset-bottom));
    width: auto;
    max-height: 58vh;
    overflow-y: auto;
  }

  body.mobile-board-tabs .m-board-host .stack-shape-global-popover {
    bottom: calc(110px + env(safe-area-inset-bottom));
  }
  .m-board-host .team-stack-card-grid,
  .m-board-host .game-board-card-grid,
  .m-board-host .stack-shape-card-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    width: 100%;
    padding-top: 0;
  }

  .m-board-host .team-stack-card,
  .m-board-host .game-board-card,
  .m-board-host .stack-shape-card {
    min-width: 0;
    min-height: 104px;
    padding: 9px 8px;
    border: 1px solid #28425f;
    border-radius: 11px;
    background: linear-gradient(135deg, rgba(9, 25, 42, .98), rgba(5, 16, 28, .98));
    box-shadow: 0 5px 14px rgba(0, 0, 0, .14);
    content-visibility: auto;
    contain-intrinsic-size: auto 104px;
  }

  .m-board-host .team-stack-card {
    grid-template-columns: 26px minmax(0, 1fr) repeat(2, minmax(45px, 56px));
    grid-template-rows: repeat(3, minmax(32px, auto));
    gap: 6px;
    min-height: 132px;
    contain-intrinsic-size: auto 132px;
  }

  .m-board-host .team-stack-card-use {
    grid-column: 1;
    grid-row: 1 / 4;
  }

  .m-board-host .team-stack-card-identity {
    grid-column: 2;
    grid-row: 1 / 4;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 7px;
  }

  .m-board-host .team-stack-card-logo {
    width: 36px;
    height: 36px;
  }

  .m-board-host .team-stack-card-logo img {
    width: 29px;
    height: 29px;
  }

  .m-board-host .team-stack-card-metric.edge { grid-column: 3; grid-row: 1; }
  .m-board-host .team-stack-card-metric.run-edge { grid-column: 4; grid-row: 1; }
  .m-board-host .team-stack-card-metric:not(.edge):not(.run-edge):not(.exposure):not(.pool-exposure) { grid-column: 3; grid-row: 2; }
  .m-board-host .team-stack-card-metric.exposure { grid-column: 4; grid-row: 2; }
  .m-board-host .team-stack-card-metric.pool-exposure { grid-column: 3 / 5; grid-row: 3; }

  .m-board-host .game-board-card {
    grid-template-columns: 26px repeat(4, minmax(0, 1fr));
    grid-template-rows: auto auto;
    gap: 7px 5px;
  }

  .m-board-host .game-board-card-use {
    grid-column: 1;
    grid-row: 1 / 3;
  }

  .m-board-host .game-board-card-matchup {
    grid-column: 2 / 6;
    grid-row: 1;
    grid-template-columns: minmax(68px, 1fr) 12px minmax(68px, 1fr) auto;
  }

  .m-board-host .game-board-card-team {
    grid-template-columns: 31px minmax(0, 1fr);
    gap: 5px;
  }

  .m-board-host .game-board-card-logo {
    width: 30px;
    height: 30px;
  }

  .m-board-host .game-board-card-logo img {
    width: 24px;
    height: 24px;
  }

  .m-board-host .game-board-card-metric { grid-row: 2; }
  .m-board-host .game-board-card-metric:nth-of-type(2) { grid-column: 2; }
  .m-board-host .game-board-card-metric:nth-of-type(3) { grid-column: 3; }
  .m-board-host .game-board-card-metric:nth-of-type(4) { grid-column: 4; }
  .m-board-host .game-board-card-metric:nth-of-type(5) { grid-column: 5; }

  .m-board-host .stack-shape-card {
    grid-template-columns: 26px minmax(0, 1fr) repeat(2, minmax(45px, 58px));
    grid-template-rows: repeat(2, minmax(36px, auto));
    gap: 6px;
  }

  .m-board-host .stack-shape-card.has-actual {
    grid-template-rows: repeat(3, minmax(32px, auto));
    min-height: 134px;
    contain-intrinsic-size: auto 134px;
  }

  .m-board-host .stack-shape-card-use {
    grid-column: 1;
    grid-row: 1 / 3;
  }

  .m-board-host .stack-shape-card.has-actual .stack-shape-card-use {
    grid-row: 1 / 4;
  }

  .m-board-host .stack-shape-card-identity {
    grid-column: 2;
    grid-row: 1 / 3;
    gap: 6px;
  }

  .m-board-host .stack-shape-card.has-actual .stack-shape-card-identity {
    grid-row: 1 / 4;
  }

  .m-board-host .stack-shape-glyph { min-width: 56px; }

  .m-board-host .stack-shape-card-metric:nth-of-type(2) { grid-column: 3; grid-row: 1; }
  .m-board-host .stack-shape-card-metric:nth-of-type(3) { grid-column: 4; grid-row: 1; }
  .m-board-host .stack-shape-card-metric:nth-of-type(4) { grid-column: 3; grid-row: 2; }
  .m-board-host .stack-shape-card-metric:nth-of-type(5) { grid-column: 4; grid-row: 2; }
  .m-board-host .stack-shape-card-metric:nth-of-type(6) { grid-column: 3; grid-row: 3; }
  .m-board-host .stack-shape-card-metric:nth-of-type(7) { grid-column: 4; grid-row: 3; }

  .m-board-host .team-stack-card-metric,
  .m-board-host .game-board-card-metric,
  .m-board-host .stack-shape-card-metric {
    gap: 4px;
    font-size: 11px;
  }

  .m-pool-toolbar:empty { display: none; }

  .m-pool-toolbar .pool-page-toolbar {
    display: grid;
    gap: 8px;
    margin: 8px 0;
    padding: 9px;
    border: 1px solid rgba(120, 145, 175, .25);
    border-radius: 10px;
    background: rgba(7, 18, 30, .88);
  }

  .m-pool-toolbar .pool-page-toolbar > div {
    min-width: 0;
    flex-wrap: wrap;
  }

  .m-pool-toolbar .pool-page-actions {
    display: flex;
    gap: 5px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .m-pool-toolbar .pool-page-actions::-webkit-scrollbar { display: none; }

  .m-pool-toolbar button,
  .m-pool-toolbar select {
    min-height: 38px;
    height: 38px;
  }

  .m-pool-toolbar button { min-width: 46px; }
  .m-pool-toolbar .pool-sort select { width: 104px; }

  .m-pool-toolbar[hidden] { display: none; }

  .m-pool-toolbar {
    margin: 8px 0;
    border: 1px solid rgba(120, 145, 175, .25);
    border-radius: 10px;
    background: rgba(7, 18, 30, .88);
  }

  .m-pool-toolbar > summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 28px;
    align-items: center;
    gap: 8px;
    min-height: 52px;
    padding: 9px 10px;
    color: #dcecff;
    cursor: pointer;
    list-style: none;
  }

  .m-pool-toolbar > summary::-webkit-details-marker { display: none; }

  .m-pool-collapse-copy {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 6px;
    min-width: 0;
  }

  .m-pool-portfolio-context {
    flex: 1 0 100%;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
  }

  .m-pool-portfolio-context span {
    color: #83a0bf;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .6px;
  }

  .m-pool-portfolio-context b {
    color: #dcecff;
    font-size: 12px;
    text-align: right;
  }

  .m-pool-collapse-copy .mini {
    flex: 1 0 100%;
    color: #83a0bf;
  }

  .m-pool-collapse-chevron {
    display: grid;
    place-items: center;
    color: #83a0bf;
    transition: transform .16s ease;
  }

  .m-pool-toolbar[open] .m-pool-collapse-chevron { transform: rotate(180deg); }

  .m-pool-toolbar .pool-page-toolbar {
    margin: 0;
    padding: 9px;
    border: 0;
    border-top: 1px solid rgba(120, 145, 175, .18);
    border-radius: 0;
    background: transparent;
  }

  .m-pool-toolbar .pool-page-toolbar > div:first-child { display: none; }

  .m-build-choice.pc {
    border-color: rgba(128, 104, 255, .62);
    background: linear-gradient(135deg, rgba(62, 48, 133, .92), rgba(27, 27, 73, .96));
  }

  .m-build-choice.pc .m-build-choice-copy small { color: #d3ccff; }

  #selectedPanel .sel-panel-close {
    position: absolute;
    top: 13px;
    right: 13px;
    z-index: 5;
  }
}


/* Contest Command Center - additive desktop/mobile layout. */
.ccmd-grid{display:grid;grid-template-columns:minmax(290px,.95fr) minmax(440px,1.3fr) minmax(360px,1fr);gap:10px;padding:10px;background:var(--surface-base, linear-gradient(180deg,rgba(6,20,34,.72),rgba(4,15,26,.35)));border-top:1px solid var(--line)}
.ccmd-grid>section{min-width:0;border:1px solid var(--control-line, #1a3b58);border-radius:8px;background:var(--surface-base, linear-gradient(145deg,#071a2b,#061522));box-shadow:inset 0 1px rgba(255,255,255,.018)}
.ccmd-navigator{padding:12px;display:flex;flex-direction:column;gap:8px}
.ccmd-navigator h3,.ccmd-portfolio h3{margin:0 0 5px;text-transform:uppercase;letter-spacing:.08em;font-size:12px;color:var(--foreground, #d9e9f7)}.ccmd-navigator h3 span{display:inline-grid;place-items:center;margin-left:6px;width:18px;height:18px;border-radius:99px;background:var(--surface-base, #17344e);color:var(--control-accent, #a9d2f5)}
.ccmd-pool-row,.ccmd-contest-pick{border:0;background:transparent;color:inherit;text-align:left}.ccmd-pool-row{display:grid;grid-template-columns:1fr auto 22px;align-items:center;width:100%;padding:12px;border:1px solid var(--control-line, #1c4668);border-radius:6px;background:var(--surface-base, #091d30)}.ccmd-pool-row:hover,.ccmd-pool-row.active{border-color:var(--control-accent, #4c9fe4);background:var(--surface-hover, #0c2943)}.ccmd-pool-row span{font-weight:700}.ccmd-pool-row b{font-size:18px}.ccmd-pool-row i{font-style:normal;color:var(--control-accent, #6fb7f2);text-align:right}
.ccmd-contest-list{display:grid;gap:4px;max-height:280px;overflow:auto}.ccmd-contest-row{display:grid!important;grid-template-columns:minmax(0,1fr) 28px 28px;align-items:center;min-height:39px;padding:0!important;border:1px solid var(--control-line, #173a55)!important;border-radius:5px!important;background:var(--surface-base, #071827) !important;overflow:hidden}.ccmd-contest-row.active{border-color:var(--control-accent, #4a99de)!important;background:var(--surface-selected, #0d477a) !important}.ccmd-contest-row.dragging{opacity:.55}.ccmd-contest-row.drag-over{box-shadow: none;}
.ccmd-contest-pick{display:grid;grid-template-columns:27px minmax(0,1fr) auto 56px 54px;align-items:center;gap:7px;min-width:0;height:100%;padding:7px 9px}.ccmd-contest-pick:hover{background:rgba(var(--surface-hover-rgb, 60, 144, 211), .1)}.ccmd-order{display:grid;place-items:center;width:20px;height:20px;color:var(--foreground-soft, #b8d3e7);font-weight:700}.ccmd-row-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}.ccmd-row-entries{font-size:11px;color:var(--foreground-soft, #bdd1e2);white-space:nowrap}.ccmd-row-actual{color:var(--foreground-muted, #708ca3);text-align:right;font-size:11px;font-weight:800;white-space:nowrap}.ccmd-row-actual.has-actual{color: var(--data-positive, #38d9ae)}.ccmd-row-roi,.ccmd-row-state{text-align:right;font-weight:800;font-size:12px}.ccmd-row-tool{width:25px;height:25px;padding:0;border:0;background:transparent;color:var(--foreground-muted, #82a9c8);font-size:14px}.ccmd-row-tool:hover{color:white;background:var(--surface-hover, #183c58)}.ccmd-row-tool.remove{font-size:19px}.ccmd-clear{align-self:flex-start;border:0;background:transparent;color:var(--foreground-muted, #6f8ca3);padding:4px 0;font-size:11px}.ccmd-clear:not(:disabled):hover{color:var(--control-accent, #a9d7fa)}
.ccmd-selected{padding:14px 16px;display:flex;flex-direction:column}.ccmd-selected-title{display:flex;gap:11px;align-items:center;margin:5px 0 14px}.ccmd-selected-title h2{margin:0;color:var(--foreground, #f3f8fc);font-size:22px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ccmd-selected-title p{margin:5px 0 0;color:var(--foreground-soft, #b0c6d8)}.ccmd-selected-title p i{font-style:normal;color:var(--foreground-muted, #587691);margin:0 4px}.ccmd-selected-title p em{font-style:normal;color: var(--pos)}.ccmd-badge{display:grid;place-items:center;flex:0 0 42px;height:42px;border:1px solid var(--control-accent, #478ac4);border-radius:6px;background:var(--surface-base, #0c2a45);color:var(--control-accent, #78beff);font-size:27px}.ccmd-ready-row{display:flex;align-items:baseline;gap:7px;text-transform:uppercase;color:var(--foreground-muted, #7798b3);font-size:10px}.ccmd-ready-row b{font-size:20px;color:var(--foreground, #edf7ff);margin-left:8px}.ccmd-ready-row b:first-child{margin-left:0}.ccmd-ready-row strong{margin-left:auto}.ccmd-selected-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;border-top:1px solid var(--control-line, #17364e);padding-top:12px}.ccmd-selected-grid>div{display:flex;flex-direction:column;gap:4px;min-width:0}.ccmd-selected-grid b{color:var(--foreground, #e6f0f8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ccmd-selected-grid small{color:var(--foreground-muted, #91aabe);line-height:1.3}.ccmd-details-link{align-self:flex-start;border:0;border-bottom:1px solid var(--control-accent, #55a6e4);border-radius:0;background:transparent;color:var(--control-accent, #65b8f5);padding:3px 0;margin-top:2px}.ccmd-details-link:hover{color:white;border-color:white}
.ccmd-portfolio{position:relative;padding:12px;display:flex;flex-direction:column}
.ccmd-portfolio-totals{display:grid;grid-template-columns:minmax(0,1fr)}
.ccmd-kpi-row{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--control-line, #1b425f);border-radius:6px 6px 0 0;overflow:hidden}
.ccmd-kpi-row.secondary{border-top:0;border-radius:0 0 6px 6px}
.ccmd-portfolio.has-run-comparison .ccmd-portfolio-totals{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.ccmd-portfolio.has-run-comparison .ccmd-kpi-row{border-radius:6px 0 0 6px}
.ccmd-portfolio.has-run-comparison .ccmd-kpi-row.secondary{border-top:1px solid var(--control-line, #1b425f);border-left:0;border-radius:0 6px 6px 0}
.ccmd-kpi-row>div{min-width:0;text-align:center;padding:15px 4px;border-right:1px solid var(--control-line, #1b425f);background:rgba(var(--surface-raised-rgb, 10, 31, 49), .72)}
.ccmd-kpi-row>div:last-child{border-right:0}
.ccmd-kpi-row b{display:block;font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ccmd-kpi-row span{display:block;margin-top:5px;color:var(--foreground-soft, #c4d4e2);font-size:11px}
.ccmd-portfolio footer{display:flex;justify-content:space-between;gap:10px;margin-top:auto;padding:11px 6px 0;color:var(--foreground-soft, #c6d6e2);font-size:11px}
.ccmd-portfolio.has-run-comparison .ccmd-kpi-row>div{padding:10px 4px}
.ccmd-portfolio.has-run-comparison .ccmd-kpi-row b{font-size:16px}
.ccmd-portfolio.has-run-comparison .ccmd-kpi-row span{margin-top:3px;font-size:10px}
.ccmd-portfolio.has-run-comparison footer{padding-top:9px}
.ccmd-kpi-row.secondary b.money-green{color:var(--pos)!important;font-weight:700}
.ccmd-grid.has-run-comparison .ccmd-selected{grid-column:2/-1}
.ccmd-grid.has-run-comparison .ccmd-portfolio{grid-column:1/-1}
.ccmd-run-comparison{position:relative;margin-top:12px;padding-top:10px;border-top:1px solid var(--control-line, #1b425f);min-width:0}
.ccmd-run-comparison>header{display:flex;align-items:center;min-height:32px;margin:0 106px 7px 3px}
.ccmd-run-comparison>header>div{display:flex;align-items:baseline;gap:8px;min-width:0}
.ccmd-run-comparison>header .eyebrow{color:var(--foreground-muted, #7899b3);font-size:9px;line-height:1.2;white-space:nowrap}
.ccmd-run-comparison h4{margin:0;color:var(--foreground, #dcebf7);font-size:11px;line-height:1.2;letter-spacing:.01em;white-space:nowrap}
.ccmd-run-comparison>header p{margin:0;color:var(--foreground-muted, #7798b1);font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ccmd-run-comparison-brief{border:1px solid var(--control-line, #1b425f);border-radius:6px;overflow:hidden;background:rgba(var(--surface-base-rgb, 7, 24, 39), .64);font-variant-numeric:tabular-nums}
.ccmd-run-comparison-brief-row{display:grid;grid-template-columns:minmax(135px,1.05fr) repeat(4,minmax(72px,.55fr)) minmax(220px,1.65fr);align-items:stretch;min-height:38px}
.ccmd-run-comparison-brief-row+ .ccmd-run-comparison-brief-row{border-top:1px solid var(--control-line, #1b425f)}
.ccmd-run-comparison-brief-row>*{min-width:0}
.ccmd-run-comparison-brief-name{display:flex;align-items:center;padding:7px 10px;color:var(--foreground, #e7f2fb);font-size:11px;text-transform:uppercase;letter-spacing:.04em}
.ccmd-run-comparison-brief-row>span{display:flex;align-items:baseline;justify-content:center;gap:5px;padding:7px 8px;border-left:1px solid var(--control-line, #173b56);white-space:nowrap}
.ccmd-run-comparison-brief-row>span b{color:var(--foreground, #edf7ff);font-size:13px}
.ccmd-run-comparison-brief-row>span small{color:var(--foreground-muted, #7899b3);font-size:8px;text-transform:uppercase;letter-spacing:.07em}
.ccmd-run-comparison-brief-row>p{display:flex;align-items:center;margin:0;padding:7px 10px;border-left:1px solid var(--control-line, #173b56);color:var(--foreground-muted, #9db4c6);font-size:10px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ccmd-run-comparison-details>summary{position:absolute;top:7px;right:0;display:grid;place-items:center;min-width:96px;min-height:32px;padding:5px 10px;border:1px solid var(--control-line, #315b79);border-radius:6px;background:var(--surface-base, #071b2c);color:var(--control-accent, #8fc5ff);font-size:10px;font-weight:700;line-height:1;cursor:pointer;list-style:none;touch-action:manipulation;user-select:none}
.ccmd-run-comparison-details>summary::-webkit-details-marker{display:none}
.ccmd-run-comparison-details>summary:focus-visible{outline:1px solid var(--control-accent, #55aaf1);outline-offset:-1px}
.ccmd-run-comparison-details-open{display:none}
.ccmd-run-comparison-details[open] .ccmd-run-comparison-details-closed{display:none}
.ccmd-run-comparison-details[open] .ccmd-run-comparison-details-open{display:inline}
.ccmd-run-comparison-details[open] .ccmd-run-comparison-scroll{margin-top:8px}
.ccmd-run-comparison-scroll{max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-gutter:stable}
.ccmd-run-comparison table{width:100%;min-width:860px;table-layout:auto;border-spacing:0;border-collapse:separate;border:1px solid var(--control-line, #1b425f);border-radius:7px;overflow:hidden;font-variant-numeric:tabular-nums}
.ccmd-run-comparison th,.ccmd-run-comparison td{border-right:1px solid var(--control-line, #1b425f);border-bottom:1px solid var(--control-line, #1b425f);padding:10px 12px;text-align:right;vertical-align:middle;background:rgba(var(--surface-base-rgb, 8, 27, 43), .76)}
.ccmd-run-comparison th:last-child,.ccmd-run-comparison td:last-child{border-right:0}
.ccmd-run-comparison tbody tr:last-child th,.ccmd-run-comparison tbody tr:last-child td{border-bottom:0}
.ccmd-run-comparison thead th{padding-top:8px;padding-bottom:8px;background:var(--surface-base, #091d30);color:var(--foreground-muted, #8ba9c0);font-size:9px;text-transform:uppercase;letter-spacing:.08em;white-space:nowrap}
.ccmd-run-comparison thead th:first-child,.ccmd-run-comparison tbody th{text-align:left}
.ccmd-run-comparison tbody th{width:34%;min-width:260px;white-space:normal;overflow:visible;text-overflow:clip}
.ccmd-run-comparison tbody th b{display:block;color:var(--foreground, #e9f4fc);font-size:13px;text-transform:uppercase;letter-spacing:.04em}
.ccmd-run-comparison tbody th small,.ccmd-run-comparison tbody th em{display:block;margin-top:3px;color:var(--foreground-muted, #91aabe);font-size:10px;font-style:normal;font-weight:400;line-height:1.25}
.ccmd-run-comparison tbody th b,.ccmd-run-comparison tbody th small,.ccmd-run-comparison tbody th em{white-space:normal;overflow-wrap:anywhere}
.ccmd-run-comparison tbody th em{color:var(--foreground-soft, #b9cbd9)}
.ccmd-run-comparison td b{display:block;color:var(--foreground, #edf7ff);font-size:14px;white-space:nowrap}
.m-contest-command-summary .ccmd-run-comparison{margin-top:8px;padding-top:9px}
.m-contest-command-summary .ccmd-run-comparison-scroll{-webkit-overflow-scrolling:touch}
.m-contest-command-summary .ccmd-run-comparison table{min-width:680px}
.good{color:#36d889!important}.data-value.good{color:var(--data-positive,#36d889)!important}.bad{color:#ff5e64!important}.warn{color:#f1b34f!important}
body.ccmd-standings-open .workspace{grid-template-columns:minmax(0,1fr) clamp(400px,29vw,480px)!important}
body.ccmd-standings-open .right-rail{display:block!important;position:sticky;top:12px;height:calc(100vh - 24px);max-height:calc(100vh - 24px);overflow:hidden}
body.ccmd-standings-open .right-rail>:not(#ccmdStandingsRail){display:none!important}
.ccmd-standings-rail{height:100%;border:1px solid var(--control-line, #184363);border-radius:8px;background:var(--surface-base, radial-gradient(circle at 90% 20%,rgba(20,92,142,.22),transparent 42%),#061827);overflow:hidden}
.ccmd-standings-shell{height:100%;min-height:0;display:flex;flex-direction:column;overflow:hidden;color:var(--foreground, #d9e7f2)}.ccmd-standings-shell>header{display:flex;justify-content:space-between;align-items:center;padding:14px 16px 4px}.ccmd-standings-shell>h2{margin:4px 16px;font-size:19px;color:var(--foreground, #eff7fd)}.ccmd-contest-meta{margin:0 16px 7px;color:var(--foreground-soft, #9db5c9)}.ccmd-contest-meta i{font-style:normal;color:var(--foreground-muted, #496c87);margin:0 4px}.ccmd-synced{align-self:flex-start;margin:0 16px 12px;padding:4px 8px;border:1px solid #1f6b4e;border-radius:5px;background:#0a2d25;color:#48db8f;font-size:10px}.ccmd-rail-nav{display:flex;gap:5px}.ccmd-rail-nav button{display:grid;place-items:center;width:29px;height:29px;padding:0;border:1px solid var(--control-line, #315b79);background:var(--surface-base, #071b2c);color:var(--foreground, #dbe9f4);font-size:20px}.ccmd-rail-nav .ccmd-rail-close{border:0;background:transparent;font-size:24px}.ccmd-standing-body{min-height:0;flex:1 1 0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding:0 12px 14px}.ccmd-standing-summary{display:grid;grid-template-columns:repeat(5,1fr);border:1px solid var(--control-line, #1b405c);border-radius:6px;overflow:hidden}.ccmd-standing-summary>div{text-align:center;padding:10px 3px;border-right:1px solid var(--control-line, #173b57);border-bottom:1px solid var(--control-line, #173b57)}.ccmd-standing-summary>div:nth-child(5n){border-right:0}.ccmd-standing-summary>div:nth-child(n+6){border-bottom:0}.ccmd-standing-summary span{display:block;color:var(--foreground-muted, #7899b3);font-size:9px}.ccmd-standing-summary b{display:block;margin-top:4px;font-size:12px}.ccmd-standing-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:9px 0;overflow:visible}.ccmd-standing-tabs button{min-width:0;min-height:38px;border:1px solid var(--control-line, #244b67);border-radius:5px;background:var(--surface-base, #071a2a);color:var(--foreground-soft, #a9bfd0);padding:8px 6px;line-height:1.15;white-space:normal;overflow-wrap:anywhere;touch-action:manipulation}.ccmd-standing-tabs button.active{border-color:var(--control-accent, #4da7f0);background:var(--surface-selected, #071a2a);color:var(--foreground, #e8f6ff);box-shadow: none;}.ccmd-standing-tools{display:grid;grid-template-columns:1fr 100px;gap:7px;margin-bottom:8px}.ccmd-standing-tools label{display:flex;align-items:center;gap:6px;border:1px solid var(--control-line, #244b67);border-radius:5px;padding:0 8px;background:var(--surface-base, #061522)}.ccmd-standing-tools input,.ccmd-standing-tools select,.ccmd-standing-tools+select{min-width:0}.ccmd-standing-tools input{width:100%;border:0;background:transparent;padding:8px 0;color:white}.ccmd-standing-tools select{border:1px solid var(--control-line, #244b67);background:var(--surface-field, #071827);color:white;border-radius:5px;padding:0 7px}.ccmd-standing-list{display:grid;min-width:0;gap:6px}.ccmd-standing-entry{min-width:0;border:1px solid var(--control-line, #153a57);border-radius:6px;background:var(--surface-base, #071a2a);overflow:hidden}.ccmd-standing-entry.open{border-color:var(--control-accent, #3e8fd2);background:var(--surface-base, #0a2740)}.ccmd-standing-entry>button{display:grid;grid-template-columns:minmax(68px,auto) minmax(0,1fr) minmax(42px,auto) minmax(50px,auto) 12px;align-items:center;gap:5px;width:100%;min-width:0;border:0;background:transparent;color:inherit;text-align:left;padding:10px 8px}.ccmd-standing-entry>button>*{min-width:0}.ccmd-standing-entry>button span{display:flex;align-items:baseline;overflow:hidden;white-space:nowrap}.ccmd-standing-entry>button span b{font-size:15px}.ccmd-standing-entry>button span small{margin-left:3px;color:var(--foreground-muted, #7998ae);overflow:hidden;text-overflow:ellipsis}.ccmd-standing-entry>button strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ccmd-standing-entry>button em,.ccmd-standing-entry>button i{font-style:normal;font-weight:800;text-align:right;white-space:nowrap}.ccmd-standing-entry>button u{text-decoration:none;text-align:right;color:var(--control-accent, #79b7e8)}.ccmd-roster{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:0 8px 9px}.ccmd-roster>div{display:grid;grid-template-columns:27px minmax(0,1fr) 35px;align-items:center;gap:5px;padding:6px;border:1px solid var(--control-line, #1a415f);border-radius:4px;background:var(--surface-base, #061521)}.ccmd-roster span{color:var(--foreground-muted, #74afd8)}.ccmd-roster b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px}.ccmd-roster em{text-align:right;font-style:normal;color:var(--foreground-soft, #a8c4d8)}.ccmd-payouts{display:grid;gap:4px}.ccmd-payouts>div{display:flex;justify-content:space-between;padding:8px 10px;border:1px solid var(--control-line, #173b56);border-radius:4px;background:var(--surface-base, #071a2a)}.ccmd-pages{display:flex;justify-content:center;align-items:center;gap:9px;margin:10px 0}.ccmd-pages button{padding:5px 10px}.ccmd-loader,.ccmd-error,.ccmd-empty{text-align:center;padding:28px 12px;color:var(--foreground-muted, #8ba7bb)}.ccmd-loader i{display:inline-block;width:24px;height:24px;border:3px solid var(--control-line, #1c4665);border-top-color:var(--control-accent, #5db8fc);border-radius:50%;animation:ccmd-spin .8s linear infinite}@keyframes ccmd-spin{to{transform:rotate(360deg)}}.ccmd-error b{color:var(--foreground, #e7f1f8)}.ccmd-standings-shell>footer{position:relative;z-index:2;flex:0 0 auto;display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:10px 12px;border-top:1px solid var(--control-line, #183d58);background:var(--surface-base, #061522)}.ccmd-standings-shell>footer label{margin-right:auto;color:var(--foreground-soft, #b5cad8)}.ccmd-standings-shell>footer button{padding:8px 10px}.ccmd-standings-shell>footer .primary{background:var(--surface-selected, #1765c4);border-color:var(--control-accent, #3c91ed);color:white}
.m-contest-command-summary{margin:6px 10px 10px}.m-contest-command-summary[hidden]{display:none!important}.m-contest-command-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 38px;gap:6px;align-items:stretch}.m-contest-command-actions>button,.m-contest-command-more>summary{min-width:0;min-height:38px;display:grid;place-items:center;margin:0;padding:7px 6px;border:1px solid #315b79;border-radius:7px;background:#071b2c;color:#dbe9f4;font:inherit;font-size:12px;font-weight:700;line-height:1;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;touch-action:manipulation}.m-contest-command-actions>button:disabled{opacity:.45}.m-contest-command-actions>.m-contest-command-create{border-color:#3c91ed;background:#071b2c;color:#8fc5ff}.m-contest-command-more{position:relative;min-width:0}.m-contest-command-more[hidden]{display:none}.m-contest-command-more>summary{height:100%;padding:0;font-size:16px;letter-spacing:1px;cursor:pointer;list-style:none}.m-contest-command-more>summary::-webkit-details-marker{display:none}.m-contest-command-more>button{position:absolute;z-index:30;top:calc(100% + 6px);right:0;width:max-content;min-width:138px;min-height:40px;border:1px solid #8a4148;border-radius:7px;background:#2a1118;color:#ffc7cc;box-shadow:0 12px 30px rgba(0,0,0,.5)}
.m-contest-command-actions.no-standings{grid-template-columns:minmax(0,1fr) 38px}
.ccmd-mobile-standings{position:fixed;inset:var(--mhead-h,55px) 0 var(--m-nav-h,64px);z-index:420;background:var(--surface-base, #061827);overflow:hidden}.ccmd-mobile-standings .ccmd-standings-shell{max-width:none}.ccmd-mobile-standings .ccmd-standing-body{padding-left:8px;padding-right:8px}.ccmd-mobile-standings .ccmd-standing-summary{grid-template-columns:repeat(5,minmax(58px,1fr));overflow-x:auto}.ccmd-mobile-standings .ccmd-standing-entry>button{grid-template-columns:minmax(64px,auto) minmax(0,1fr) minmax(40px,auto) minmax(48px,auto) 12px}.ccmd-mobile-standings .ccmd-standings-shell>footer{padding-bottom:max(10px,env(safe-area-inset-bottom))}
@media(max-width:1450px){.ccmd-grid{grid-template-columns:minmax(250px,.85fr) minmax(370px,1.2fr) minmax(300px,.95fr)}.ccmd-kpi-row b{font-size:15px}.ccmd-selected-title h2{font-size:18px}.ccmd-contest-pick{grid-template-columns:24px minmax(0,1fr) 52px 47px}.ccmd-row-entries{display:none}}
@media(max-width:1100px){.ccmd-grid{grid-template-columns:minmax(240px,.8fr) minmax(380px,1.2fr)}.ccmd-portfolio{grid-column:1/-1}.ccmd-portfolio footer{margin-top:8px}}
@media(max-width:640px),(max-width:950px) and (max-height:500px),(max-device-width:640px){.ccmd-grid{display:block;padding:7px}.ccmd-navigator,.ccmd-portfolio{display:none}.ccmd-selected{padding:10px}.ccmd-selected-grid{grid-template-columns:1fr}.ccmd-selected-title h2{font-size:16px}.ccmd-ready-row{flex-wrap:wrap}.ccmd-ready-row strong{margin-left:0}.ccmd-mobile-standings{display:block}.ccmd-roster{grid-template-columns:1fr}.ccmd-standing-summary{font-size:9px}.ccmd-standings-shell>h2{font-size:16px}}

/* Command Center responsive layout r40: size to the center stage, not the full viewport. */
#contestPlanner{min-width:0;overflow:clip}
#contestPlanner .ccmd-grid{grid-template-columns:minmax(270px,.86fr) minmax(0,1.24fr) minmax(320px,1fr)}
.ccmd-contest-row.contest-card{width:auto;min-width:0;min-height:39px;height:auto;gap:0}
.ccmd-contest-row .ccmd-contest-pick{width:100%;min-width:0}
.ccmd-contest-row .ccmd-row-name{display:block!important;min-width:0;color:var(--foreground, #e7f2fb)!important;opacity:1!important}
.ccmd-selected-title{min-width:0}.ccmd-selected-title>div{min-width:0}.ccmd-selected-title h2{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.ccmd-kpi-row b{font-size:clamp(13px,1.05vw,18px);text-overflow:clip}
#contestPlanner[data-ccmd-layout="medium"] .ccmd-grid{grid-template-columns:minmax(270px,.72fr) minmax(0,1.28fr)}
#contestPlanner[data-ccmd-layout="medium"] .ccmd-portfolio{grid-column:1/-1}
#contestPlanner[data-ccmd-layout="medium"] .ccmd-contest-pick{grid-template-columns:24px minmax(0,1fr) 52px 48px}
#contestPlanner[data-ccmd-layout="medium"] .ccmd-row-entries{display:none}
#contestPlanner[data-ccmd-layout="medium"] .ccmd-portfolio footer{margin-top:10px}
#contestPlanner[data-ccmd-layout="compact"] .ccmd-grid{grid-template-columns:minmax(0,1fr)}
#contestPlanner[data-ccmd-layout="compact"] .ccmd-grid.has-run-comparison .ccmd-selected{grid-column:1}
#contestPlanner[data-ccmd-layout="compact"] .ccmd-navigator{display:grid;grid-template-columns:minmax(180px,.42fr) minmax(0,1fr);align-items:start}
#contestPlanner[data-ccmd-layout="compact"] .ccmd-navigator h3,#contestPlanner[data-ccmd-layout="compact"] .ccmd-clear{grid-column:1/-1}
#contestPlanner[data-ccmd-layout="compact"] .ccmd-pool-row{height:100%;min-height:78px}
#contestPlanner[data-ccmd-layout="compact"] .ccmd-contest-list{max-height:170px}
#contestPlanner[data-ccmd-layout="compact"] .ccmd-contest-pick{grid-template-columns:24px minmax(0,1fr) 52px 48px}
#contestPlanner[data-ccmd-layout="compact"] .ccmd-row-entries{display:none}
#contestPlanner[data-ccmd-layout="compact"] .ccmd-selected,#contestPlanner[data-ccmd-layout="compact"] .ccmd-portfolio{min-height:0}
#contestPlanner[data-ccmd-layout="compact"] .ccmd-portfolio-totals{grid-template-columns:minmax(0,1fr)}
#contestPlanner[data-ccmd-layout="compact"] .ccmd-kpi-row{border-radius:6px 6px 0 0}
#contestPlanner[data-ccmd-layout="compact"] .ccmd-kpi-row.secondary{border-top:0;border-left:1px solid var(--control-line, #1b425f);border-radius:0 0 6px 6px}
#contestPlanner[data-ccmd-layout="compact"] .ccmd-run-comparison-brief-row{grid-template-columns:minmax(95px,1.2fr) repeat(4,minmax(52px,.65fr))}
#contestPlanner[data-ccmd-layout="compact"] .ccmd-run-comparison-brief-name{padding:6px 7px;font-size:10px}
#contestPlanner[data-ccmd-layout="compact"] .ccmd-run-comparison-brief-row>span{padding:6px 3px;gap:3px}
#contestPlanner[data-ccmd-layout="compact"] .ccmd-run-comparison-brief-row>span b{font-size:11px}#contestPlanner[data-ccmd-layout="compact"] .ccmd-run-comparison-brief-row>span small{font-size:7px}
#contestPlanner[data-ccmd-layout="compact"] .ccmd-run-comparison-brief-row>p{grid-column:1/-1;display:-webkit-box;padding:6px 7px;border-top:1px solid var(--control-line, #173b56);border-left:0;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:2}
#contestPlanner[data-ccmd-layout="compact"] .ccmd-portfolio footer{margin-top:10px}
body.ccmd-standings-open .workspace{grid-template-columns:minmax(0,1fr) clamp(350px,25vw,430px)!important}
body.ccmd-standings-open .right-rail{align-self:start;height:var(--ccmd-rail-height,calc(100dvh - 24px));max-height:var(--ccmd-rail-height,calc(100dvh - 24px));overflow:hidden}
.ccmd-standings-rail{max-height:100%}
.ccmd-standings-rail.is-empty{height:min(310px,100%)}
.ccmd-standings-shell>footer{display:grid;grid-template-columns:max-content minmax(0,1fr) minmax(0,1fr);gap:7px;flex-wrap:nowrap}
.ccmd-standings-shell>footer label{display:inline-flex;align-items:center;gap:6px;margin:0;white-space:nowrap}
.ccmd-standings-shell>footer label input{appearance:auto;width:15px;height:15px;min-width:15px;margin:0;accent-color:var(--control-accent, #4aa6ee)}
.ccmd-standings-shell>footer button{min-width:0;white-space:normal;line-height:1.15}
.ccmd-mobile-standings[hidden]{display:none!important}
body.ccmd-mobile-standings-open{overflow:hidden}
body.ccmd-mobile-standings-open .ccmd-mobile-standings{display:block;inset:64px 12px 12px auto;width:min(620px,calc(100vw - 24px));border:1px solid var(--control-line, #28618a);border-radius:10px;box-shadow:0 24px 80px rgba(0,0,0,.68)}
@media(min-width:1180px) and (max-width:1400px){body.ccmd-standings-open .workspace{grid-template-columns:minmax(0,1fr) minmax(340px,360px)!important}.ccmd-standing-entry>button{grid-template-columns:65px minmax(0,1fr) 45px 51px 12px}.ccmd-standings-shell>footer{font-size:10px;padding-left:8px;padding-right:8px}}
@media(max-width:779px){#contestPlanner[data-ccmd-layout="compact"] .ccmd-navigator{grid-template-columns:1fr}#contestPlanner[data-ccmd-layout="compact"] .ccmd-navigator h3,#contestPlanner[data-ccmd-layout="compact"] .ccmd-clear{grid-column:auto}#contestPlanner[data-ccmd-layout="compact"] .ccmd-pool-row{min-height:0}#contestPlanner[data-ccmd-layout="compact"] .ccmd-selected-grid{grid-template-columns:1fr}.ccmd-ready-row{flex-wrap:wrap}.ccmd-ready-row strong{margin-left:0}.ccmd-run-comparison>header{align-items:flex-start;flex-direction:column;gap:4px}.ccmd-run-comparison>header p{text-align:left}}
@media(max-width:779px){
  .ccmd-run-comparison>header{justify-content:center;min-height:44px;margin-right:110px}
  .ccmd-run-comparison>header>div{display:flex;flex-wrap:wrap}.ccmd-run-comparison>header p{flex-basis:100%;margin-top:3px;text-align:left}
  .ccmd-run-comparison-brief-row{grid-template-columns:minmax(95px,1.2fr) repeat(4,minmax(52px,.65fr))}
  .ccmd-run-comparison-brief-name{padding:6px 7px;font-size:10px}.ccmd-run-comparison-brief-row>span{padding:6px 3px;gap:3px}.ccmd-run-comparison-brief-row>span b{font-size:11px}.ccmd-run-comparison-brief-row>span small{font-size:7px}
  .ccmd-run-comparison-brief-row>p{grid-column:1/-1;display:-webkit-box;padding:6px 7px;border-top:1px solid var(--control-line, #173b56);border-left:0;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:2}
  .ccmd-run-comparison-details>summary{top:5px;min-height:44px;min-width:104px}
  .m-contest-command-summary .ccmd-run-comparison-brief-row{grid-template-columns:minmax(92px,1.2fr) repeat(4,minmax(50px,.65fr))}
}
@media(max-width:640px),(max-width:950px) and (max-height:500px),(max-device-width:640px){#contestPlanner .ccmd-grid{display:block}#contestPlanner .ccmd-navigator,#contestPlanner .ccmd-portfolio{display:none}body.ccmd-mobile-standings-open .ccmd-mobile-standings{inset:var(--mhead-h,55px) 0 var(--m-nav-h,64px);width:auto;border:0;border-radius:0;box-shadow:none}.ccmd-standings-shell>footer{grid-template-columns:max-content 1fr}.ccmd-standings-shell>footer .primary{grid-column:1/-1}.ccmd-contest-row .ccmd-row-name{display:block!important}}


/* Contest detail truth + fit r41. */
.ccmd-pool-row{grid-template-columns:27px minmax(0,1fr) auto 22px;gap:7px;height:39px;min-height:39px;padding:7px 9px}
.ccmd-pool-row .ccmd-order{font-size:11px;font-weight:700}
.ccmd-pool-row .ccmd-row-name{font-size:13px}
.ccmd-pool-row .ccmd-pool-count{font-size:13px;line-height:1}
#contestPlanner[data-ccmd-layout="compact"] .ccmd-pool-row{height:39px;min-height:39px}
.ccmd-roster-context{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 8px 6px;padding:7px 8px;border:1px solid var(--control-line, #235070);border-radius:4px;background:var(--surface-base, #082039)}
.ccmd-roster-context span{color:var(--foreground-muted, #789db8);font-size:9px;text-transform:uppercase;letter-spacing:.08em}
.ccmd-roster-context b{color:var(--foreground, #d9edf9);font-size:11px;text-align:right}
.ccmd-roster>div>b{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:5px}
.ccmd-roster>div>b small{color:var(--control-accent, #65b9ee);font-size:8px;font-weight:800;letter-spacing:.05em}
.ccmd-derived-note{margin:-2px 0 8px;padding:7px 8px;border:1px solid var(--control-line, #31506a);border-radius:4px;background:var(--surface-base, #0a1c2b);color:var(--foreground-soft, #9eb6c8);font-size:9px;line-height:1.35}
.ccmd-standings-shell>footer{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}
.ccmd-standings-shell>footer label{grid-column:1/-1;min-height:17px}
.ccmd-standings-shell>footer button{white-space:nowrap;font-size:11px;padding:8px 6px}
@media(max-width:380px){.ccmd-standings-shell>footer button{font-size:10px}.ccmd-roster>div{grid-template-columns:25px minmax(0,1fr) 31px}}
/* Phone player selection uses the existing native checkbox. */
.m-pc-use input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  display: grid;
  place-content: center;
  border: 1px solid #5f6872;
  border-radius: 2px;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
}

.m-pc-use input[type="checkbox"]::before {
  content: "";
  width: 5px;
  height: 9px;
  border-right: 2px solid #3f9bff;
  border-bottom: 2px solid #3f9bff;
  opacity: 0;
  transform: translateY(-1px) rotate(45deg);
}

.m-pc-use input[type="checkbox"]:checked {
  border-color: #5f6872;
  background: transparent;
}

.m-pc-use input[type="checkbox"]:checked::before {
  opacity: 1;
}

.m-pc-use input[type="checkbox"]:focus-visible {
  outline: 1px solid #6fb7f2;
  outline-offset: -1px;
}

/* Build bar cleanup r46: grouped salary range and outline-only actions. */
.inline-build-settings {
  align-items: stretch;
  gap: 8px;
}

.inline-build-salary {
  display: grid;
  grid-template-columns: minmax(66px, 1fr) auto minmax(66px, 1fr);
  grid-template-rows: 10px 25px;
  align-items: center;
  gap: 2px 5px;
  min-width: 174px;
  padding: 3px 7px 4px;
  border: 1px solid rgba(var(--border-muted-rgb, 126, 183, 255), .2);
  border-radius: 6px;
  background: rgba(var(--surface-base-rgb, 5, 19, 32), .72);
}

.inline-build-salary-label {
  grid-column: 1 / -1;
  color: var(--foreground-muted, #8099b4);
  font-size: 8px;
  font-weight: 700;
  line-height: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.inline-build-salary::after {
  content: "";
  grid-column: 2;
  grid-row: 2;
  width: 8px;
  height: 1px;
  align-self: center;
  justify-self: center;
  background: var(--surface-base, #55738d);
}

.inline-build-salary .inline-build-field {
  display: flex;
  grid-row: 2;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.inline-build-salary .inline-build-field:first-of-type { grid-column: 1; }
.inline-build-salary .inline-build-field:last-of-type { grid-column: 3; }
.inline-build-salary .inline-build-field > span { display: none; }
.filter-band .inline-build-salary .inline-build-field input {
  width: 100%;
}

.filter-band .inline-build-salary .inline-build-field:first-of-type input {
  text-align: right;
}

.filter-band .inline-build-salary .inline-build-field:last-of-type input {
  text-align: center;
}

.filter-band .inline-build-targets button,
.filter-band .inline-build-targets button.active,
.inline-build-reset,
.compact-build-controls .wide-run,
.compact-build-controls .wide-run.primary {
  background: transparent;
  box-shadow: none;
}

.filter-band .inline-build-targets button.active {
  border-color: var(--control-accent, #62abff);
  color: var(--control-accent, #7fc0ff);
  box-shadow: none;
}


.inline-build-reset {
  border-color: rgba(var(--border-muted-rgb, 126, 183, 255), .24);
}

.compact-build-controls .wide-run,
.compact-build-controls .wide-run.primary {
  border-color: var(--control-accent, #3978ac);
  color: var(--foreground, #e6f2fb);
}

.compact-build-controls .wide-run:hover,
.compact-build-controls .wide-run:focus-visible,
.inline-build-reset:hover,
.inline-build-reset:focus-visible {
  border-color: var(--control-accent, #62abff);
  background: transparent;
  color: #fff;
  box-shadow: none;
}

.inline-build-actions.pc-default-recommended .wide-run {
  border-color: var(--control-line, #2a4358);
  color: var(--foreground-soft, #a8bac9);
  box-shadow: none;
}

.inline-build-actions.pc-default-recommended .wide-run:not(.default-recommended):hover,
.inline-build-actions.pc-default-recommended .wide-run:not(.default-recommended):focus-visible {
  border-color: var(--control-accent, #55738d);
  color: var(--foreground, #d8e5ef);
  box-shadow: none;
}

/* MLB 3+ game default recommendation: P/C is the only blue action outline.
   The render gate keeps this off every other sport/site/slate shape. */
.inline-build-actions.pc-default-recommended .wide-run.default-recommended,
.inline-build-actions.pc-default-recommended .wide-run.primary.default-recommended {
  border-color: var(--control-accent, #62abff);
  background: transparent;
  color: #fff;
  box-shadow: none;
}

@media (min-width: 1501px) {
  .compact-run-controls { align-items: stretch; }
  .inline-build-actions { gap: 8px; }
}

@media (min-width: 821px) and (max-width: 1120px) {
  .inline-build-salary { min-width: 164px; }
}

/* Legal strip under the auth cards (owner 8/12). Muted on purpose: it
   has to be present and readable without competing with the form. */
.auth-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 14px 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: #6f8098;
}
.auth-legal a {
  color: #8fa6c2;
  text-decoration: none;
  border-bottom: 1px solid rgba(143, 166, 194, .35);
}
.auth-legal a:hover { color: #cfe0f5; border-bottom-color: rgba(207, 224, 245, .6); }
/* The copyright wraps to its own line rather than being squeezed
   between the two links on a narrow card. */
.auth-legal .auth-copy { flex-basis: 100%; text-align: center; color: #61708a; }

/* ---- Membership page (owner 8/13) ---------------------------------------- */
.membership-board { display: flex; flex-direction: column; gap: 14px; }
.membership-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; max-width: 720px; }
.membership-plan { border: 1px solid var(--line, #1f2739); border-radius: 10px; padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; background: rgba(255, 255, 255, 0.02); }
.membership-plan h3 { margin: 0; font-size: 28px; }
.membership-plan h3 .mini { font-size: 13px; font-weight: 400; }
.membership-plan button[disabled] { opacity: 0.45; cursor: not-allowed; }
/* Keep the directional standings sort labels readable inside the dock. */
.ccmd-standing-tools{grid-template-columns:minmax(0,1fr) minmax(150px,auto)}
/* Expanded DK standings roster context: stack identity + exact salary used. */
.ccmd-roster-context>div{display:grid;min-width:0;gap:2px}
.ccmd-roster-context>div:last-child{text-align:right}
.ccmd-roster-context>div b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}


/* First-run guided onboarding (r143). Additive overlay only; no board/build
   geometry is changed when the tour is closed. */
.onboarding-welcome,
.onboarding-tour-root {
  --onboarding-accent: var(--control-accent, #4f8cf7);
  color: var(--foreground, #edf5ff);
  font-family: inherit;
}

.onboarding-welcome {
  position: fixed;
  inset: 0;
  z-index: 40000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(var(--surface-base-rgb, 1, 7, 15), 0.82);
  backdrop-filter: blur(8px);
}

.onboarding-welcome-card {
  width: min(480px, 100%);
  padding: 34px;
  border: 1px solid rgba(var(--control-line-rgb, 79, 140, 247), 0.46);
  border-radius: 20px;
  background: var(--surface-raised, radial-gradient(circle at 88% 8%, rgba(79, 140, 247, 0.22), transparent 36%), linear-gradient(155deg, #0c1b2d 0%, #07111e 72%));
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.62), 0 0 0 1px rgba(255, 255, 255, 0.025) inset;
}

.onboarding-welcome-mark {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: 22px;
  border: 1px solid rgba(var(--control-accent-rgb, 79, 140, 247), 0.64);
  border-radius: 15px;
  color: var(--foreground, #fff);
  font-size: 17px;
  font-weight: 850;
  font-style: italic;
  letter-spacing: -1px;
  background: var(--surface-base, linear-gradient(145deg, rgba(79, 140, 247, 0.2), rgba(9, 23, 39, 0.76)));
  box-shadow: none;
}

.onboarding-kicker {
  display: block;
  margin-bottom: 8px;
  color: var(--control-accent, #79a9ff);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.onboarding-welcome-card h2 {
  margin: 0;
  color: var(--foreground, #f4f8ff);
  font-size: clamp(27px, 4vw, 34px);
  line-height: 1.12;
}

.onboarding-welcome-card p {
  margin: 14px 0 0;
  color: var(--foreground-soft, #aebed3);
  font-size: 15px;
  line-height: 1.58;
}

.onboarding-welcome-actions,
.onboarding-step-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
}

.onboarding-primary,
.onboarding-secondary,
.onboarding-skip-tips,
.account-replay-tour,
.mobile-more-replay {
  min-height: 40px;
  border-radius: 9px;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}

.onboarding-primary {
  padding: 0 18px;
  border: 1px solid var(--control-accent, #6fa3ff);
  color: var(--foreground, #fff);
  background: var(--surface-base, #4f8cf7);
  box-shadow: none;
}

.onboarding-primary:hover,
.onboarding-primary:focus-visible {
  background: var(--surface-hover, #6199fb);
}

.onboarding-secondary,
.onboarding-skip-tips {
  padding: 0 14px;
  border: 1px solid var(--control-line, #31445d);
  color: var(--foreground-soft, #aebed3);
  background: var(--surface-base, #0a1625);
}

.onboarding-secondary:hover,
.onboarding-secondary:focus-visible,
.onboarding-skip-tips:hover,
.onboarding-skip-tips:focus-visible {
  color: var(--foreground, #eef5ff);
  border-color: var(--control-accent, #56749a);
}

.onboarding-primary:focus-visible,
.onboarding-secondary:focus-visible,
.onboarding-skip-tips:focus-visible,
.account-replay-tour:focus-visible,
.mobile-more-replay:focus-visible {
  outline: 1px solid rgba(var(--control-accent-rgb, 79, 140, 247), 0.42);
  outline-offset: -1px;
}

.onboarding-tour-root {
  position: fixed;
  inset: 0;
  z-index: 39000;
  pointer-events: none;
}

.onboarding-mask {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 39000;
  pointer-events: auto;
  opacity: 0;
  overflow: visible;
  transition: opacity 220ms ease;
}

.onboarding-mask path {
  fill: rgba(var(--surface-base-rgb, 0, 5, 12), 0.8);
}

.onboarding-tour-root.ready .onboarding-mask {
  opacity: 1;
}

.onboarding-reveal-ring {
  position: fixed;
  z-index: 39001;
  pointer-events: none;
  opacity: 0;
  border: 1px solid rgba(var(--control-accent-rgb, 79, 140, 247), 0.42);
  border-radius: 12px;
  box-shadow: none;
  transition: opacity 240ms ease;
}

.onboarding-tour-root.ready .onboarding-reveal-ring {
  opacity: 1;
}

.onboarding-target-ring {
  position: fixed;
  z-index: 39001;
  pointer-events: auto;
  border: 2px solid var(--onboarding-accent);
  border-radius: 12px;
  box-shadow: none;
  transition: left 140ms ease, top 140ms ease, width 140ms ease, height 140ms ease;
}

.onboarding-popover {
  position: fixed;
  z-index: 39002;
  width: min(350px, calc(100vw - 20px));
  padding: 19px;
  border: 1px solid rgba(var(--control-line-rgb, 79, 140, 247), 0.58);
  border-radius: 14px;
  pointer-events: auto;
  background: var(--surface-raised, linear-gradient(155deg, #10243b, #081522 76%));
  box-shadow: 0 22px 62px rgba(0, 0, 0, 0.58);
}

.onboarding-popover::before {
  content: "";
  position: absolute;
  left: var(--onboarding-arrow-x, 50%);
  width: 13px;
  height: 13px;
  border-left: 1px solid rgba(var(--control-line-rgb, 79, 140, 247), 0.58);
  border-top: 1px solid rgba(var(--control-line-rgb, 79, 140, 247), 0.58);
  background: var(--surface-raised, #10243b);
  transform: translateX(-50%) rotate(45deg);
}

.onboarding-popover[data-side="below"]::before {
  top: -7px;
}

.onboarding-popover[data-side="above"]::before {
  bottom: -7px;
  transform: translateX(-50%) rotate(225deg);
  background: var(--surface-raised, #081522);
}

.onboarding-popover[data-side="over"]::before {
  display: none;
}

.onboarding-step-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.onboarding-step-head > span {
  color: var(--control-accent, #79a9ff);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.onboarding-progress {
  display: flex;
  gap: 5px;
}

.onboarding-progress i {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--control-line, #34485f);
}

.onboarding-progress i.done {
  background: var(--foreground-muted, #6688b2);
}

.onboarding-progress i.active {
  width: 16px;
  background: var(--onboarding-accent);
}

.onboarding-popover h3 {
  margin: 12px 0 0;
  color: var(--foreground, #f4f8ff);
  font-size: 19px;
  line-height: 1.2;
}

.onboarding-popover p {
  margin: 8px 0 0;
  color: var(--foreground-soft, #b2c2d7);
  font-size: 13px;
  line-height: 1.52;
}

.onboarding-step-actions {
  justify-content: space-between;
  margin-top: 19px;
}

.onboarding-step-actions .onboarding-primary {
  margin-left: auto;
}

.account-tour-action {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding: 12px;
  border: 1px solid var(--control-line, #263b53);
  border-radius: 10px;
  background: rgba(var(--surface-base-rgb, 13, 31, 50), 0.62);
}

.account-tour-action span {
  color: var(--foreground-muted, #8fa4bc);
  font-size: 12px;
  line-height: 1.35;
}

.account-replay-tour,
.mobile-more-replay {
  flex: 0 0 auto;
  padding: 0 14px;
  border: 1px solid var(--control-accent, #4f8cf7);
  color: var(--foreground, #dbe9ff);
  background: transparent;
}

.mobile-more-replay {
  width: 100%;
  margin-top: 8px;
}

@media (max-width: 700px) {
  .onboarding-welcome {
    align-items: end;
    padding: 12px 12px calc(14px + env(safe-area-inset-bottom));
  }

  .onboarding-welcome-card {
    padding: 25px 22px 22px;
    border-radius: 18px;
  }

  .onboarding-welcome-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .onboarding-welcome-actions button {
    width: 100%;
  }

  .onboarding-popover {
    padding: 17px;
    border-radius: 13px;
  }

  .onboarding-step-actions {
    gap: 8px;
  }

  .onboarding-step-actions button {
    min-height: 42px;
  }

  .onboarding-step-actions .onboarding-primary {
    max-width: 210px;
  }

  .account-tour-action {
    align-items: stretch;
    flex-direction: column;
  }
}

/* Mobile entry workflow parity (r201). One persistent receipt replaces popup
   stacks; build progress never blocks the rest of the phone UI. */
@media (max-width: 640px), (max-width: 950px) and (max-height: 500px), (max-device-width: 640px) {
  .mobile-build-run-overlay {
    inset: auto 10px calc(74px + env(safe-area-inset-bottom)) 10px;
    z-index: 690;
    display: block;
    padding: 0;
    pointer-events: none;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .mobile-build-run-card {
    width: 100%;
    min-height: 0;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px;
    padding: 10px 12px;
    pointer-events: auto;
    border-radius: 12px;
  }

  .mobile-build-run-spinner { width: 28px; height: 28px; border-width: 3px; }
  .mobile-build-run-detail { display: none; }
  .mobile-build-run-overlay[data-mlb-block-detail="true"] .mobile-build-run-detail {
    display: block;
  }
  .mobile-build-run-progress { margin-top: 7px; }
  .mobile-build-background {
    min-height: 34px;
    padding: 0 10px;
    border: 1px solid #31597f;
    border-radius: 9px;
    background: #0a1a2a;
    color: #a9cdf5;
    font: inherit;
  }

  .m-search input { font-size: 16px; }

  .m-workflow-receipt-host { margin-top: 10px; }
  .m-workflow-receipt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 12px;
    border: 1px solid rgba(73, 205, 145, .42);
    border-radius: 11px;
    background: rgba(9, 42, 31, .74);
  }
  .m-workflow-receipt.error {
    border-color: rgba(255, 112, 120, .55);
    background: rgba(64, 18, 24, .78);
  }
  .m-workflow-receipt div { min-width: 0; display: grid; gap: 3px; }
  .m-workflow-receipt b { color: #69e6aa; font-size: 13px; }
  .m-workflow-receipt.error b { color: #ff9199; }
  .m-workflow-receipt span { color: #aabdd2; font-size: 11px; overflow-wrap: anywhere; }
  .m-workflow-receipt button {
    min-width: 96px;
    min-height: 42px;
    border: 1px solid #4dbf8c;
    border-radius: 9px;
    background: #123b2d;
    color: #8af1bd;
    font-weight: 800;
  }

  .m-workflow-receipt.m-csv-receipt { flex-wrap: wrap; }
  .m-workflow-receipt .m-csv-actions { display: flex; flex-wrap: wrap; gap: 8px; }
  .m-csv-actions button, .m-csv-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid #4dbf8c;
    border-radius: 9px;
    background: #123b2d;
    color: #8af1bd;
    font: inherit;
    font-weight: 800;
    text-decoration: none;
  }

  .m-lineup-selection {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 8px 0;
    color: #8fa7bf;
    font-size: 11px;
  }
  .m-lineup-select-all { display: flex; align-items: center; gap: 8px; min-height: 44px; }
  .m-lineup-use { display: grid; place-items: center; min-width: 44px; min-height: 44px; margin: -8px 0 -8px -8px; }
  .m-lineup-use input,
  .m-lineup-select-all input { width: 20px; height: 20px; }
  .m-lhead { gap: 8px; }
  .m-lcard.section-row-disabled { opacity: .5; }

  #mRulesHost .rules-panel { display: block; width: 100%; margin: 0; }
  .m-board-rules-stale {
    margin: 4px 0 10px;
    padding: 8px 10px;
    border-left: 3px solid #ffcf66;
    background: rgba(82, 60, 12, .28);
    color: #f2d181;
    font-size: 11px;
  }
  .m-board-host .team-stack-card-hint,
  .m-board-host .game-board-card-hint,
  .m-board-host .stack-shape-card-hint { display: block !important; flex-basis: 100%; white-space: normal; }
  .m-board-host .team-stack-card-use,
  .m-board-host .game-board-card-use,
  .m-board-host .stack-shape-card-use { min-width: 44px; min-height: 44px; display: grid; place-items: center; }
  .m-board-host .section-check { width: 20px; height: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .onboarding-mask,
  .onboarding-reveal-ring,
  .onboarding-target-ring {
    transition: none;
  }
}

/* Responsive shell contract r269.
   The late base .workspace rule above intentionally owns wide desktop, but it
   also overrode the older max-1240 breakpoint. Keep every width class explicit
   here, after all feature CSS, so tablet/laptop tracks cannot collapse the
   center stage or clip the slate picker. Wide tables continue to scroll inside
   their own shells; the page itself never needs horizontal overflow. */
.workspace,
.workspace > *,
.left-rail > *,
.center-stage > *,
.right-rail > * {
  min-width: 0;
  max-width: 100%;
}

.slate-card {
  height: auto;
}

/* Full desktop: workspace plus optional auxiliary rail. */
@media (min-width: 1600px) {
  .workspace {
    grid-template-columns: minmax(0, 1fr) clamp(280px, 16vw, 340px);
  }
}

/* Laptop: protect the working canvas; auxiliary detail moves below it and DK
   standings opens as the existing dismissible sheet instead of a third dock. */
@media (min-width: 901px) and (max-width: 1599px) {
  .workspace {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding: 10px;
  }
  body.ccmd-standings-open .workspace {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .right-rail {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .toolbar-band {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding: 10px;
  }
  .build-command-grid,
  .compact-build-controls,
  .compact-run-controls {
    width: 100%;
    min-width: 0;
  }
  .inline-build-settings {
    flex: 1 1 100%;
    justify-content: flex-start;
  }
  .inline-build-actions {
    display: grid;
    grid-template-columns: repeat(4, minmax(120px, 1fr));
    width: 100%;
    margin-left: 0;
  }
  .compact-build-controls .wide-run {
    width: auto;
    min-width: 120px;
  }
}

/* Tablet portrait and small split windows: use one readable column. The phone
   app still takes over at 640px and below; this closes the old 641-900 gap. */
@media (min-width: 641px) and (max-width: 900px) {
  .topbar {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 8px 10px;
    row-gap: 6px;
  }
  .view-tabs {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    padding-bottom: 2px;
  }
  .header-session {
    grid-column: 2;
    grid-row: 1;
  }
  .workspace {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 8px;
  }
  .left-rail,
  .center-stage,
  .right-rail {
    grid-column: 1;
  }
  .right-rail {
    grid-template-columns: minmax(0, 1fr);
  }
}


@media (min-width: 641px) and (max-width: 720px) {
  .toolbar-band {
    grid-template-columns: minmax(0, 1fr);
  }
  .filter-band input {
    min-width: min(260px, 100%);
  }
}

/* Compact contest board r269: readable dense cards with 4/3/2/1 width-aware fit. */
#contestPlanner .ccmd-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  padding: 10px;
}
#contestPlanner .ccmd-navigator {
  grid-column: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
#contestPlanner .ccmd-pool-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 22px;
  gap: 8px;
  width: 100%;
  height: auto;
  min-height: 39px;
  padding: 8px 10px;
}
#contestPlanner .ccmd-pool-copy {
  display: flex;
  align-items: baseline;
  gap: 5px;
  min-width: 0;
}
#contestPlanner .ccmd-pool-copy b {
  color: var(--foreground, #edf7ff);
  font-size: 13px;
  white-space: nowrap;
}
#contestPlanner .ccmd-pool-copy small {
  min-width: 0;
  overflow: hidden;
  color: var(--foreground-muted, #8eb0c8);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#contestPlanner .ccmd-contest-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  max-height: none;
  overflow: visible;
}
#contestPlanner .ccmd-contest-row,
#contestPlanner .ccmd-contest-row.contest-card {
  position: relative;
  display: block !important;
  width: auto;
  min-width: 0;
  min-height: 0;
  height: auto;
  padding: 0 !important;
  border: 1px solid var(--control-line, #1b496b) !important;
  border-radius: 8px !important;
  background: var(--surface-raised, linear-gradient(145deg, #082035, #061725)) !important;
  overflow: hidden;
}
#contestPlanner .ccmd-contest-row.active {
  border-color: var(--control-accent, #4aa8ed) !important;
  background: var(--surface-selected, linear-gradient(145deg, #092742, #071b2c)) !important;
  box-shadow: none;
}
#contestPlanner .ccmd-contest-pick,
#contestPlanner[data-ccmd-layout="medium"] .ccmd-contest-pick,
#contestPlanner[data-ccmd-layout="compact"] .ccmd-contest-pick {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 8px 9px 7px;
}
#contestPlanner .ccmd-card-heading {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: start;
  gap: 7px;
  min-width: 0;
  padding-right: 25px;
}
#contestPlanner .ccmd-card-heading .ccmd-order {
  width: 28px;
  height: 28px;
  border: 1px solid var(--control-line, #3985bd);
  border-radius: 6px;
  background: var(--surface-raised, #0b2c49);
  color: var(--control-accent, #72bdff);
  font-size: 20px;
  font-weight: 500;
}
#contestPlanner .ccmd-card-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 1px;
}
#contestPlanner .ccmd-card-copy strong {
  display: block;
  overflow: hidden;
  color: var(--foreground, #f3f8fc);
  font-size: 15px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#contestPlanner .ccmd-card-copy small {
  display: block;
  overflow: hidden;
  color: var(--foreground-soft, #9cb7ca);
  font-size: 9px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#contestPlanner .ccmd-card-copy i {
  margin: 0 3px;
  color: var(--foreground-muted, #567891);
  font-style: normal;
}
#contestPlanner .ccmd-card-copy em {
  color: var(--pos);
  font-style: normal;
}
#contestPlanner .ccmd-card-tools {
  position: absolute;
  z-index: 2;
  top: 5px;
  right: 5px;
  display: flex;
  align-items: center;
  gap: 1px;
}
#contestPlanner .ccmd-card-tools .ccmd-row-tool {
  width: 22px;
  height: 22px;
  border-radius: 5px;
}
#contestPlanner .ccmd-contest-metrics {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 8px;
  margin-top: 7px;
  min-width: 0;
}
#contestPlanner .ccmd-contest-metrics > span:not(.ccmd-card-actual) {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
#contestPlanner .ccmd-contest-metrics b {
  color: var(--foreground, #edf7ff);
  font-size: 17px;
  line-height: 1;
}
#contestPlanner .ccmd-contest-metrics small {
  color: var(--foreground-muted, #7294ad);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;
}
#contestPlanner .ccmd-card-actual {
  justify-self: end;
  overflow: hidden;
  color: var(--foreground-muted, #7895ab);
  font-size: 10px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#contestPlanner .ccmd-card-actual.has-actual {
  color: var(--data-positive, #38d9ae);
}
#contestPlanner .ccmd-contest-metrics > strong {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;
}
#contestPlanner .ccmd-contest-metrics > strong.warn {
  color: #f0b84c;
}
#contestPlanner .ccmd-card-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3px;
  min-width: 0;
  padding-top: 6px;
  border-top: 1px solid var(--control-line, #173a55);
}
#contestPlanner .ccmd-card-detail-grid > span {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
  white-space: nowrap;
}
#contestPlanner .ccmd-card-detail-grid .eyebrow {
  flex: 0 0 auto;
  color: var(--foreground-muted, #7aa0bc);
  font-size: 9px;
  line-height: 1.1;
}
#contestPlanner .ccmd-card-detail-grid b,
#contestPlanner .ccmd-card-detail-grid em,
#contestPlanner .ccmd-card-detail-grid small:not(.eyebrow) {
  display: block;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#contestPlanner .ccmd-card-detail-grid b {
  flex: 0 1 auto;
  color: var(--foreground, #e8f2fa);
  font-size: 11px;
}
#contestPlanner .ccmd-card-detail-grid em,
#contestPlanner .ccmd-card-detail-grid small:not(.eyebrow) {
  flex: 0 1 auto;
  color: var(--foreground-muted, #88a8be);
  font-size: 10px;
  font-style: normal;
}
#contestPlanner .ccmd-card-detail-grid small.ccmd-built-count {
  flex-shrink: 0;
  max-width: 40%;
}
#contestPlanner .ccmd-card-result b {
  flex-shrink: 0;
  max-width: 45%;
}
#contestPlanner .ccmd-clear {
  margin: 0 4px;
}
#contestPlanner .ccmd-summary-grid {
  display: grid;
  grid-template-columns: minmax(420px, .92fr) minmax(0, 1.08fr);
  gap: 8px;
  min-width: 0;
}
#contestPlanner .ccmd-summary-grid:not(.has-run-comparison) {
  grid-template-columns: minmax(0, 1fr);
}
#contestPlanner .ccmd-summary-grid > section {
  min-width: 0;
  border: 1px solid var(--control-line, #1a3b58);
  border-radius: 8px;
  background: var(--surface-base, linear-gradient(145deg, #071a2b, #061522));
  box-shadow: inset 0 1px rgba(255, 255, 255, .018);
}
#contestPlanner .ccmd-portfolio {
  grid-column: auto;
  min-height: 0;
  padding: 8px;
}
#contestPlanner .ccmd-portfolio-totals {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
#contestPlanner .ccmd-portfolio:not(.has-run-comparison) .ccmd-kpi-row {
  border-radius: 6px 0 0 6px;
}
#contestPlanner .ccmd-portfolio:not(.has-run-comparison) .ccmd-kpi-row.secondary {
  border-top: 1px solid var(--control-line, #1b425f);
  border-left: 0;
  border-radius: 0 6px 6px 0;
}
#contestPlanner .ccmd-portfolio.has-run-comparison .ccmd-portfolio-totals {
  grid-template-columns: minmax(0, 1fr);
}
#contestPlanner .ccmd-portfolio.has-run-comparison .ccmd-kpi-row {
  border-radius: 6px 6px 0 0;
}
#contestPlanner .ccmd-portfolio.has-run-comparison .ccmd-kpi-row.secondary {
  border-top: 0;
  border-left: 1px solid var(--control-line, #1b425f);
  border-radius: 0 0 6px 6px;
}
#contestPlanner .ccmd-kpi-row > div,
#contestPlanner .ccmd-portfolio.has-run-comparison .ccmd-kpi-row > div {
  padding: 7px 4px;
}
#contestPlanner .ccmd-run-comparison {
  margin: 0;
  padding: 10px;
  border-top: 1px solid var(--control-line, #1a3b58);
}
#contestPlanner .ccmd-run-comparison > header {
  margin-left: 1px;
}
#contestPlanner .ccmd-run-comparison-brief-row {
  grid-template-columns: minmax(120px, 1fr) repeat(4, minmax(58px, .55fr)) minmax(180px, 1.45fr);
}
#contestPlanner .ccmd-board-footer {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 1px 4px 0;
  color: var(--foreground-soft, #c6d6e2);
  font-size: 10px;
}
#contestPlanner .ccmd-board-footer > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#contestPlanner[data-ccmd-layout="medium"] .ccmd-grid,
#contestPlanner[data-ccmd-layout="compact"] .ccmd-grid {
  grid-template-columns: minmax(0, 1fr);
}
#contestPlanner[data-ccmd-layout="medium"] .ccmd-navigator,
#contestPlanner[data-ccmd-layout="compact"] .ccmd-navigator {
  grid-template-columns: minmax(0, 1fr);
}
#contestPlanner[data-ccmd-layout="medium"] .ccmd-contest-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
#contestPlanner[data-ccmd-layout="standard"] .ccmd-contest-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
#contestPlanner[data-ccmd-layout="medium"] .ccmd-summary-grid,
#contestPlanner[data-ccmd-layout="compact"] .ccmd-summary-grid {
  grid-template-columns: minmax(0, 1fr);
}
#contestPlanner[data-ccmd-layout="compact"] .ccmd-contest-list {
  grid-template-columns: minmax(0, 1fr);
  max-height: none;
}
#contestPlanner[data-ccmd-layout="compact"] .ccmd-pool-copy {
  display: grid;
  gap: 2px;
}
#contestPlanner[data-ccmd-layout="medium"] .ccmd-portfolio:not(.has-run-comparison) .ccmd-portfolio-totals,
#contestPlanner[data-ccmd-layout="compact"] .ccmd-portfolio:not(.has-run-comparison) .ccmd-portfolio-totals {
  grid-template-columns: minmax(0, 1fr);
}
#contestPlanner[data-ccmd-layout="medium"] .ccmd-portfolio:not(.has-run-comparison) .ccmd-kpi-row,
#contestPlanner[data-ccmd-layout="compact"] .ccmd-portfolio:not(.has-run-comparison) .ccmd-kpi-row {
  border-radius: 6px 6px 0 0;
}
#contestPlanner[data-ccmd-layout="medium"] .ccmd-portfolio:not(.has-run-comparison) .ccmd-kpi-row.secondary,
#contestPlanner[data-ccmd-layout="compact"] .ccmd-portfolio:not(.has-run-comparison) .ccmd-kpi-row.secondary {
  border-top: 0;
  border-left: 1px solid var(--control-line, #1b425f);
  border-radius: 0 0 6px 6px;
}
#contestPlanner[data-ccmd-layout="compact"] .ccmd-board-footer {
  align-items: flex-start;
  flex-direction: column;
}
#contestPlanner[data-ccmd-layout="compact"] .ccmd-board-footer > span:last-child {
  text-align: left;
  white-space: normal;
}
@media (max-width: 640px), (max-width: 950px) and (max-height: 500px), (max-device-width: 640px) {
  #contestPlanner .ccmd-summary-grid {
    display: none;
  }
}

/* Historical replay + full Pool download placement r226. */
#contestPlanner .ccmd-pool-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 8px;
  min-width: 0;
}
#contestPlanner .ccmd-pool-download {
  min-width: 108px;
  min-height: 39px;
  padding: 7px 11px;
  border: 1px solid var(--control-line, #2c6b98);
  border-radius: 6px;
  background: var(--surface-base, #0a2941);
  color: var(--foreground, #cfeaff);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}
#contestPlanner .ccmd-pool-download:not(:disabled):hover {
  border-color: var(--control-accent, #57aee9);
  background: var(--surface-hover, #0d3656);
  color: #fff;
}
#contestPlanner .ccmd-pool-download:disabled {
  opacity: .52;
}
.m-pool-download[hidden] {
  display: none !important;
}
.m-pool-download {
  margin: 8px 0;
}
.m-pool-download-button {
  width: 100%;
  min-height: 44px;
  border: 1px solid #2c6b98;
  border-radius: 9px;
  background: #0a2941;
  color: #cfeaff;
  font-weight: 800;
}
.m-pool-download-button:disabled {
  opacity: .52;
}


/* RESPONSIVE HARDENING r299 (9/02): audit-driven, UI-only. */
@media (min-width: 641px) and (max-width: 1160px) {
  /* Game Sims and rule panes must stack before their combined 872px floor can
     be clipped by the application's intentionally hidden body overflow. */
  .split-grid { grid-template-columns: minmax(0, 1fr); }

  /* A single card per row keeps every control and exposure number visible in
     the previously unowned tablet band. */
  .desktop-player-card-grid,
  .team-stack-card-grid,
  .game-board-card-grid,
  .stack-shape-card-grid { grid-template-columns: minmax(0, 1fr); }

  /* Wide result tables scroll inside their own evidence surface; the page
     itself remains fixed and no columns are silently amputated. */
  .table-shell,
  .lineup-table-shell,
  .section-table-shell,
  .api-table-shell,
  .contest-sim-table-shell,
  .lineup-table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  .build-actions,
  .compact-build-row .build-actions,
  .m-entry-actions { flex-wrap: wrap; }

  /* The five static/admin tables inherit the application's fixed table layout.
     Give them a readable canvas and scroll their own shell at tablet width. */
  .table-shell > table:not(.player-table):not(.lineup-table):not(.section-table):not(.api-source-table):not(.contest-sim-table) {
    min-width: 800px;
    table-layout: auto;
  }
  #accountsBoard { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #accountsBoard .mini-table { min-width: 760px; table-layout: auto; }

}

@media (pointer: coarse) and (min-width: 641px) and (max-width: 1160px) {
  button,
  select,
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
    min-height: 40px;
  }
}

/* Short laptops retain a reachable close button and action row. */
@media (min-width: 641px) and (max-height: 760px) {
  .cc-backdrop {
    align-items: flex-start;
    padding: 12px;
    overflow-y: auto;
    box-sizing: border-box;
  }
  .cc-modal {
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
    box-sizing: border-box;
  }
  .cc-head {
    position: sticky;
    top: -18px;
    z-index: 4;
    padding: 18px 0 8px;
    background: var(--panel, #0a1a2a);
  }
  .cc-actions {
    position: sticky;
    bottom: -18px;
    z-index: 4;
    padding: 10px 0 18px;
    background: var(--panel, #0a1a2a);
  }
  .cc-list { max-height: min(38dvh, 300px); }
}

/* At iPad portrait width the two-column auth card cropped the branding art.
   Use a deliberate one-column card instead of displaying half a logo. */
@media (min-width: 641px) and (max-width: 900px) {
  #loginOverlay {
    align-items: center;
    padding: 24px;
    overflow-y: auto;
  }
  #loginOverlay .login-card.login-split,
  #loginOverlay #signupForm.login-card {
    width: min(560px, calc(100vw - 48px));
    height: auto;
    min-height: 0;
    max-height: calc(100dvh - 48px);
    display: block;
    overflow-y: auto;
    border-radius: 20px;
  }
  #loginOverlay .auth-hero,
  #loginOverlay #signupForm .auth-hero { display: none; }
  #loginOverlay .login-main {
    padding: 34px 42px;
    max-height: none;
  }
  #loginOverlay #signupForm > *:not(.auth-hero) {
    display: block;
    width: auto;
    max-width: none;
    margin-left: 42px;
    margin-right: 42px;
    padding-left: 0;
    padding-right: 0;
  }
  #loginOverlay #signupForm > h2 { margin-top: 34px; }
  #loginOverlay #signupForm > .login-toggle { margin-bottom: 34px; }
}

@media (max-width: 640px), (max-width: 950px) and (max-height: 500px), (max-device-width: 640px) {
  .mobile-more-membership,
  .mobile-more-profile {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 52px;
    padding: 8px 12px;
    border: 1px solid rgba(120, 140, 165, .3);
    border-radius: 12px;
    background: rgba(12, 22, 34, .96);
    color: #dceaff;
    text-align: left;
  }
  .mobile-more-membership {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
  }
  .mobile-more-membership span,
  .mobile-more-membership small { display: block; }
  .mobile-more-membership small { margin-top: 2px; color: #7e93ad; }
  .m-membership-screen h2 { margin: 4px 0 12px; }
  .m-membership-host .membership-plans { grid-template-columns: minmax(0, 1fr); }
  .m-membership-host .membership-plan { min-width: 0; }
}


/* Keep the final late-swap row clear of the horizontal scrollbar at desktop. */
.lineup-table-shell:has(.late-swap-table) {
  overflow: auto;
  scrollbar-gutter: stable;
}
.late-swap-table { margin-bottom: 10px; }

/* Keep slate file actions in the header, wrapping whole buttons on smaller desktops. */
.topbar .header-actions { flex-wrap: wrap; }
.header-build-actions {
  max-width: 100%;
  justify-content: flex-start;
  padding-right: 12px;
  margin-right: 4px;
  border-right: 1px solid var(--line);
}
/* Approved entry-tool styling; the existing actions and phone controls stay shared. */
.topbar .header-entry-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: 8px;
  height: 34px;
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid #303c4b;
  border-radius: 5px;
  background: #0b0e13;
  color: #f1f5fb;
  font-size: var(--workspace-control-size, 14px);
  font-weight: 400;
  line-height: 20px;
}
.topbar .header-entry-action[hidden] { display: none; }
.topbar .header-entry-action.is-entry-next { border-color: #75bbff; }
.topbar .header-entry-action:hover:not(:disabled) { background: #18222f; }
.header-entry-action svg {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.header-entry-divider { width: 1px; height: 22px; flex: 0 0 1px; margin: 0 3px; background: #303c4b; }
.header-entry-divider:has(+ [hidden]) { display: none; }

body:has(#view-main:not(.active)) .header-build-actions { display: none; }

/* Player filters belong with exposure and sorting above the cards. */
.desktop-player-card-toolbar { flex-wrap: wrap; gap: 8px 12px; }
.desktop-player-filters {
  display: flex;
  align-items: center;
  flex: 0 1 auto;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
}
.desktop-player-filters .position-quick-filters { flex: 0 1 auto; flex-wrap: wrap; }
.desktop-player-filters #teamFilter { width: 150px; max-width: 100%; }
/* Full placeholder plus search icon/padding, without filling the entire row. */
.desktop-player-filters #playerSearch { flex: 0 0 auto; width: 240px; min-width: 0; max-width: 100%; }

/* Approved A: one connected position rail, no player-count badges.
   Do not set display here: sport and Showdown rules own chip visibility. */
:root.desktop-palette .desktop-player-filters .position-quick-filters {
  gap: 0; padding: 3px; max-width: 100%;
  border: 1px solid #303c4b; border-radius: 7px; background: transparent;
}
:root.desktop-palette .desktop-player-filters .position-chip {
  position: relative; height: 36px; min-width: 40px; padding: 0 10px;
  border: 1px solid transparent; border-radius: 5px;
  background: transparent; color: #edf4fc; box-shadow: none;
  font-size: 14px; font-weight: 400; line-height: 20px;
  transition: border-color .16s, box-shadow .16s, color .16s;
}
:root.desktop-palette .desktop-player-filters .position-chip + .position-chip::before {
  content: ""; position: absolute; left: -1px; top: 9px; bottom: 9px; width: 1px;
  background: #303c4b; pointer-events: none;
}
:root.desktop-palette .desktop-player-filters .position-chip.active {
  border-color: #75bbff; color: #75bbff; background: transparent; box-shadow: none;
}
/* The inset divider must not paint over a highlighted button border. */
:root.desktop-palette .desktop-player-filters .position-chip.active::before,
:root.desktop-palette .desktop-player-filters .position-chip:hover:not(:disabled)::before,
:root.desktop-palette .desktop-player-filters .position-chip:focus-visible::before,
:root.desktop-palette .desktop-player-filters .position-chip.active + .position-chip::before { background: transparent; }
:root.desktop-palette .desktop-player-filters .position-chip:hover:not(:disabled) {
  border-color: #75bbff; color: #75bbff; background: transparent; box-shadow: none;
}
:root.desktop-palette .desktop-player-filters #teamFilter,
:root.desktop-palette .desktop-player-filters #playerSearch {
  height: 36px; border: 1px solid #303c4b; border-radius: 7px;
  background-color: #0e1319; color: #edf4fc;
  font-size: 14px; font-weight: 400; line-height: 20px;
}
:root.desktop-palette .desktop-player-filters #teamFilter {
  width: 164px; padding: 0 29px 0 34px; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23a6b3c3%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16%2021v-2a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v2M22%2021v-2a4%204%200%200%200-3-3.87M16%203.13a4%204%200%200%201%200%207.75%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%227%22%20r%3D%224%22%2F%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23a6b3c3%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m6%209%206%206%206-6%22%2F%3E%3C%2Fsvg%3E");
  background-position: 11px center, right 10px center;
  background-size: 15px 15px, 13px 13px; background-repeat: no-repeat;
}
:root.desktop-palette .desktop-player-filters #playerSearch {
  padding-left: 35px; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23a6b3c3%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%228%22%2F%3E%3Cpath%20d%3D%22m21%2021-4.3-4.3%22%2F%3E%3C%2Fsvg%3E");
  background-position: 11px center; background-size: 15px 15px; background-repeat: no-repeat;
}
@media (prefers-reduced-motion: reduce) {
  :root.desktop-palette .desktop-player-filters .position-chip { transition: none; }
}

/* Settings start at the left; Build keeps the right edge at every desktop width. */
.filter-band .compact-build-controls {
  flex: 1 1 auto;
  width: 100%;
  margin-left: 0;
  justify-content: flex-start;
}
.filter-band .compact-run-controls {
  flex: 1 1 auto;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: flex-start;
}
.filter-band .inline-build-settings {
  flex: 1 1 auto;
  order: 0;
  justify-content: flex-start;
}
.filter-band .inline-build-actions {
  display: flex;
  flex: 0 0 auto;
  width: auto;
  margin-left: auto;
  order: 0;
  justify-content: flex-end;
}

/* Let controls share a row whenever they fit; the optional hint yields first. */
@container (max-width: 1799px) {
  .player-grid-shell .desktop-player-card-hint { display: none; }
}

/* Build settings stay mounted in a native dialog; the summary remains in the toolbar. */
.filter-band { container: build-setup / inline-size; }
.filter-band .compact-build-controls { flex-direction: column; align-items: stretch; gap: 0; min-width: 0; }
.filter-band .compact-run-controls { width: 100%; flex-wrap: wrap; align-items: center; gap: 12px; }
.build-settings-summary { display: grid; flex: 1 1 320px; gap: 4px; min-width: 0; }
.build-settings-summary strong { color: var(--foreground, #e3efff); font-size: 13px; font-weight: 600; }
#buildSettingsSummaryText { color: var(--foreground-soft, #a7bdd4); font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.filter-band .inline-build-actions { align-items: center; max-width: 100%; }
.filter-band .build-settings-toggle { min-width: 94px; height: 42px; padding: 0 12px; font-size: 13px; border-color: var(--control-line, #315878); }
/* Approved concept A: outline and icons, with no blue interior in any state. */
:root.desktop-palette .filter-band .inline-build-actions .build-settings-toggle,
:root.desktop-palette .filter-band .inline-build-actions .wide-run {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 40px; min-height: 40px; width: auto; padding: 0 17px;
  border: 1px solid #303c4b; border-radius: 7px;
  background: transparent; color: #edf4fc; box-shadow: none;
  font-size: 14px; font-weight: 500; line-height: 20px;
  transition: border-color .16s, box-shadow .16s;
}
:root.desktop-palette .filter-band .inline-build-actions .wide-run { min-width: 136px; border-color: #75bbff; }
:root.desktop-palette .filter-band .inline-build-actions .build-settings-toggle { min-width: 112px; }
:root.desktop-palette .filter-band .inline-build-actions button[hidden] { display: none; }
:root.desktop-palette .filter-band .inline-build-actions .build-settings-toggle::before,
:root.desktop-palette .filter-band .inline-build-actions .wide-run::before {
  content: ""; display: block; flex: 0 0 16px; width: 16px; height: 16px;
  background-color: #a6b3c3; mask-repeat: no-repeat; mask-position: center; mask-size: contain;
}
:root.desktop-palette .filter-band .inline-build-actions .build-settings-toggle::before { mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%204h-7M10%204H3M21%2012h-9M8%2012H3M21%2020h-5M12%2020H3M14%202v4M8%2010v4M16%2018v4%22%2F%3E%3C%2Fsvg%3E"); }
:root.desktop-palette .filter-band .inline-build-actions .wide-run::before { background-color: #75bbff; mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolygon%20points%3D%2213%202%203%2014%2012%2014%2011%2022%2021%2010%2012%2010%2013%202%22%2F%3E%3C%2Fsvg%3E"); }
:root.desktop-palette .filter-band .inline-build-actions .build-settings-toggle:hover:not(:disabled) { border-color: #6683a0; background: transparent; }
:root.desktop-palette .filter-band .inline-build-actions .wide-run:hover:not(:disabled) { border-color: #a0d2ff; background: transparent; box-shadow: none; }
:root.desktop-palette .filter-band .inline-build-actions .wide-run:active:not(:disabled) { background: transparent; box-shadow: none; }
@media (prefers-reduced-motion: reduce) {
  :root.desktop-palette .filter-band .inline-build-actions .build-settings-toggle,
  :root.desktop-palette .filter-band .inline-build-actions .wide-run { transition: none; }
}
/* Section navigation and contest actions share the approved outline style.
   Keep display untouched: sport/Showdown/hidden rules still own visibility.
   Decorative masks survive dynamic labels and preserve click routing. */
:root.desktop-palette :where(.build-tabs, .lineup-title-actions) > :is([data-main-tab], .reset-grids-btn, [data-action="create-contest"], [data-action="clear-contests"]) {
  position: relative; height: 34px; min-height: 34px; min-width: 0;
  padding: 0 13px 0 36px; border: 1px solid #303c4b; border-radius: 7px;
  background: transparent; color: #edf4fc; box-shadow: none;
  font-size: 14px; font-weight: 500; line-height: 20px; white-space: nowrap;
  transition: border-color .16s, box-shadow .16s;
}
:root.desktop-palette :where(.build-tabs, .lineup-title-actions) > :is([data-main-tab], .reset-grids-btn, [data-action="create-contest"], [data-action="clear-contests"])::before {
  content: ""; position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; pointer-events: none; background-color: #a6b3c3;
  mask-repeat: no-repeat; mask-position: center; mask-size: contain;
}
:root.desktop-palette :where(.build-tabs, .lineup-title-actions) > :is([data-main-tab], .reset-grids-btn, [data-action="create-contest"], [data-action="clear-contests"]):hover:not(:disabled) { border-color: #75bbff; background: transparent; box-shadow: none; }
:root.desktop-palette :where(.build-tabs, .lineup-title-actions) > :is([data-main-tab], .reset-grids-btn, [data-action="create-contest"], [data-action="clear-contests"]):active:not(:disabled) { background: transparent; box-shadow: none; }
:root.desktop-palette .build-tabs > [data-main-tab].active,
:root.desktop-palette .lineup-title-actions > #createContestBtn { border-color: #75bbff; }
:root.desktop-palette .build-tabs > [data-main-tab].active::before,
:root.desktop-palette .lineup-title-actions > #createContestBtn::before { background-color: #75bbff; }
:root.desktop-palette .build-tabs > .reset-grids-btn { margin-left: 4px; }
:root.desktop-palette .build-tabs > [data-main-tab] .tab-badge { margin-left: 4px; }
:root.desktop-palette .build-tabs > [data-main-tab="team-stacks"]::before { mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m12%203%2010%205-10%205L2%208l10-5ZM2%2012l10%205%2010-5M2%2016l10%205%2010-5%22%2F%3E%3C%2Fsvg%3E"); }
:root.desktop-palette .build-tabs > [data-main-tab="games"]::before { mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%2218%22%20height%3D%2214%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M12%205v14M7%209v6M17%209v6%22%2F%3E%3C%2Fsvg%3E"); }
:root.desktop-palette .build-tabs > [data-main-tab="stack-shapes"]::before { mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%223%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%2214%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%2214%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%221%22%2F%3E%3C%2Fsvg%3E"); }
:root.desktop-palette .build-tabs > [data-main-tab="rules"]::before { mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m3%206%202%202%204-4M13%206h8M3%2014l2%202%204-4M13%2014h8M13%2020h8%22%2F%3E%3C%2Fsvg%3E"); }
:root.desktop-palette .build-tabs > [data-main-tab="lineups"]::before { mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%2216%22%20height%3D%2218%22%20rx%3D%222%22%2F%3E%3Crect%20x%3D%229%22%20y%3D%222%22%20width%3D%226%22%20height%3D%224%22%20rx%3D%221%22%2F%3E%3Cpath%20d%3D%22M9%2011h6M9%2016h6%22%2F%3E%3C%2Fsvg%3E"); }
:root.desktop-palette .build-tabs > .reset-grids-btn::before { mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2010a9%209%200%201%201%202.5%208M3%204v6h6%22%2F%3E%3C%2Fsvg%3E"); }
:root.desktop-palette .lineup-title-actions > #createContestBtn::before { mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%205v14M5%2012h14%22%2F%3E%3C%2Fsvg%3E"); }
:root.desktop-palette .lineup-title-actions > #clearContestsBtn::before { mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%206h18M9%206V4a1%201%200%200%201%201-1h4a1%201%200%200%201%201%201v2M5%206l1%2014a1%201%200%200%200%201%201h10a1%201%200%200%200%201-1l1-14M10%2010v7M14%2010v7%22%2F%3E%3C%2Fsvg%3E"); }
@media (prefers-reduced-motion: reduce) {
  :root.desktop-palette :where(.build-tabs, .lineup-title-actions) > :is([data-main-tab], .reset-grids-btn, [data-action="create-contest"], [data-action="clear-contests"]) { transition: none; }
}
body.build-settings-open { overflow: hidden; }
.build-settings-panel { container: build-settings / inline-size; width: min(820px, calc(100% - 40px)); min-width: 0; max-width: 820px; max-height: calc(100dvh - 40px); margin: auto; padding: 0; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--surface-base, #0b0e13); color: var(--text); box-shadow: 0 24px 80px #0008; overflow: hidden; }
.build-settings-panel[open] { display: flex; flex-direction: column; }
.build-settings-panel:not([open]) { display: none; }
.build-settings-panel::backdrop { background: rgba(0, 0, 0, .62); }
.build-settings-dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex: 0 0 auto; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.build-settings-dialog-header h2 { margin: 0; font-size: 18px; }
.build-settings-dialog-header p { margin: 6px 0 0; font-size: 12px; color: var(--muted); }
.build-settings-dialog-header button { width: 34px; padding: 0; flex-shrink: 0; font-size: 22px; }
#buildSettingsPanel .inline-build-settings { min-height: 0; padding: 20px; overflow: auto; overscroll-behavior: contain; }
#buildSettingsPanel button:focus-visible { outline: 1px solid var(--accent); outline-offset: -1px; }
.filter-band .inline-build-settings[hidden], .build-settings-summary[hidden] { display: none !important; }
.filter-band .inline-build-settings { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 20px 28px; width: 100%; max-width: 1100px; }
.build-settings-group { min-width: 0; padding: 0; margin: 0; border: 0; }
.build-settings-group legend { padding: 0; margin-bottom: 12px; color: var(--foreground, #dcecff); font-size: 13px; font-weight: 600; }
.build-settings-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.filter-band .build-settings-group .inline-build-field { display: grid; grid-template-rows: auto 38px; width: auto; min-width: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; gap: 6px; }
.filter-band .build-settings-group .inline-build-field > span { display: block; color: var(--foreground-soft, #a7bdd4); font-size: 12px; line-height: 16px; font-weight: 400; letter-spacing: 0; text-transform: none; white-space: normal; }
.filter-band .build-settings-group .inline-build-field input,
.filter-band .build-settings-group .inline-build-field select { width: 100%; min-width: 0; height: 38px; padding: 6px 9px; border: 1px solid var(--control-line, #31516f); border-radius: 5px; background: var(--surface-field, #061321); color: var(--foreground, #e0eeff); font-size: 14px; }
.filter-band .build-settings-group input:focus-visible,
.filter-band .build-settings-group select:focus-visible { outline: 1px solid var(--control-accent, #7eb7ff); outline-offset: -1px; }
.filter-band .build-settings-group #inlineCoverageWrap { grid-column: 1 / -1; }
.filter-band .build-settings-group .inline-build-targets { min-width: 0; }
.filter-band .build-settings-group .inline-build-targets button { height: 38px; font-size: 12px; padding: 0 8px; white-space: normal; }
.filter-band .build-settings-group .inline-build-salary { display: grid; grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto; gap: 12px; min-width: 0; padding: 0; border: 0; background: transparent; }
.filter-band .build-settings-group .inline-build-salary-label,
.filter-band .build-settings-group .inline-build-salary::after { display: none; }
.filter-band .build-settings-group .inline-build-salary .inline-build-field { grid-row: auto; grid-column: auto; }
.filter-band .build-settings-group .inline-build-salary .inline-build-field input { text-align: left; }
.filter-band .build-settings-group .inline-build-check { grid-column: 1 / -1; min-height: 32px; padding: 0; border: 0; background: transparent; font-size: 12px; font-weight: 400; letter-spacing: 0; white-space: normal; }
.build-settings-footer { grid-column: 1 / -1; display: flex; justify-content: flex-end; padding-top: 12px; border-top: 1px solid var(--control-line, #25415b); }
.filter-band .build-settings-footer .inline-build-reset { height: 34px; min-width: 72px; font-size: 12px; }
@container build-settings (max-width: 620px) {
  .filter-band .inline-build-settings { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .build-settings-group + .build-settings-group { border-top: 1px solid var(--line); padding-top: 16px; }
}
@container build-setup (max-width: 460px) {
  .filter-band .inline-build-actions { flex: 1 1 100%; margin-left: 0; }
  .filter-band .inline-build-actions > button { flex: 1 1 100px; min-width: 0; width: auto; }
}

/* Per-account, per-slate-size Build defaults. */
.build-settings-footer { flex-wrap: wrap; gap: 10px; align-items: center; }
.build-defaults-note { flex: 1 1 240px; min-width: 0; display: grid; gap: 4px; color: var(--muted, #91adc7); font-size: 12px; line-height: 1.5; }
[data-build-defaults-status]:empty { display: none; }
[data-build-defaults-status][data-error="true"] { color: #ffb4a9; }
[data-save-build-defaults] { min-height: 36px; padding: 7px 14px; white-space: nowrap; }
.cc-modal .build-defaults-note { margin: 14px 0 8px; }
.cc-modal .cc-actions:has([data-save-build-defaults]) { flex-wrap: wrap; }
@container build-settings (max-width: 460px) {
  .build-settings-footer .build-defaults-note { flex-basis: 100%; }
  .build-settings-footer > button { flex: 1 1 auto; }
}

/* Keep auxiliary cards reachable on laptops, including scaled/short screens. */
@media (min-width: 1024px) {
  .right-rail {
    grid-column: 2;
    grid-row: 1;
    grid-template-columns: minmax(0, 1fr);
    position: sticky;
    top: 10px;
    align-self: start;
    max-height: var(--ccmd-rail-height, calc(100dvh - 90px));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }
  .right-rail > .panel { min-height: min-content; }
}
@media (min-width: 1024px) and (max-width: 1599px) {
  .workspace {
    grid-template-columns: minmax(0, 1fr) 280px;
  }
  body.ccmd-standings-open .workspace {
    grid-template-columns: minmax(0, 1fr) 340px !important;
  }
}
.ccmd-standings-shell > header,
.ccmd-standings-shell > h2,
.ccmd-standings-shell > .ccmd-contest-meta,
.ccmd-standings-shell > .ccmd-synced { flex-shrink: 0; min-width: 0; overflow-wrap: anywhere; }
.ccmd-standings-shell > footer { flex-shrink: 0; }

/* Optional MLB Classic selection preference, inside the existing disclosure. */
.build-defense-bias { grid-column: 1 / -1; min-width: 0; }
.build-defense-bias[hidden] { display: none !important; }
.build-defense-bias p { margin: 7px 0 0; color: var(--foreground-soft, #a7bdd4); font-size: 12px; line-height: 1.45; }
@media (max-width: 600px) {
  #clBuildModal:has(#clDefenseAttackBias) .cc-actions {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  #clBuildModal:has(#clDefenseAttackBias) .cc-actions > button {
    width: 100%; min-width: 0; white-space: normal;
  }
}

/* Desktop selections open their matching detail popup; mobile retains its sheet. */
@media (min-width: 641px) {
  body.player-detail-popup-layout:not(.ccmd-standings-open) .workspace {
    grid-template-columns: minmax(0, 1fr);
  }
  body.player-detail-popup-layout:not(.ccmd-standings-open) .right-rail { display: none; }
}
@media (min-width: 1024px) and (max-width: 1599px) {
  body.player-detail-popup-layout:not(.ccmd-standings-open) .workspace {
    grid-template-columns: minmax(0, 1fr);
  }
}
body.player-detail-open { overflow: hidden; }
#playerDetailDialog .detail-use-action { width: 100%; margin-top: 8px; }
.desktop-player-card.excluded { opacity: .5; }
.player-detail-dialog {
  width: min(980px, calc(100% - 40px));
  max-width: 980px;
  max-height: calc(100dvh - 40px);
  margin: auto;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--surface-base, #0b0e13);
  color: var(--text);
  box-shadow: 0 24px 80px #0008;
  overflow: hidden;
}
.player-detail-dialog[open] { display: flex; flex-direction: column; }
.player-detail-dialog::backdrop { background: rgba(0, 0, 0, .62); }
.player-detail-dialog-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex: 0 0 auto; padding: 12px 20px; border-bottom: 1px solid var(--line);
}
.player-detail-dialog-bar > span { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.player-detail-dialog-bar button { padding: 0 12px; background: transparent; }
.player-detail-dialog button:focus-visible,
.player-detail-dialog input:focus-visible { outline: 1px solid var(--accent); outline-offset: -1px; }
.player-detail-content { min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
#playerDetailDialog #selectedPanel { border: 0; border-radius: 0; background: transparent; min-height: 0; overflow: visible; }
#playerDetailDialog .panel-head { padding: 18px 20px 14px; }
#playerDetailDialog .panel-head .eyebrow { display: none; }
#playerDetailDialog .panel-head h2 { font-size: 24px; line-height: 1.2; }
#playerDetailDialog .panel-head p { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
#playerDetailDialog .selected-body {
  padding: 16px 20px 20px; gap: 14px; align-items: start;
  grid-template-columns: minmax(280px, .85fr) minmax(0, 1.25fr);
  grid-template-areas: "identity primary" "boost sim" "rules history" "recent upside";
}
#playerDetailDialog .selected-top { grid-area: identity; min-height: 102px; }
#playerDetailDialog .sel-primary-metrics { grid-area: primary; }
#playerDetailDialog .sel-sim-metrics { grid-area: sim; }
#playerDetailDialog .metric-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#playerDetailDialog .metric { display: grid; align-content: center; justify-content: start; gap: 6px; min-height: 48px; padding: 10px; }
#playerDetailDialog .metric span { font-size: 11px; }
#playerDetailDialog .metric b { font-size: 18px; }
#playerDetailDialog .player-boost-box { grid-area: boost; display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
#playerDetailDialog .detail-boost-ctl { width: 100%; min-width: 0; }
#playerDetailDialog .manual-box { grid-area: rules; gap: 12px; }
#playerDetailDialog .manual-box .small-action-row button { height: 34px; }
#playerDetailDialog .sel-gamelog { grid-area: history; margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-raised, #10141a); }
#playerDetailDialog .gl-chart-wrap { margin-top: 12px; }
#playerDetailDialog .gl-table-wrap { max-height: 285px; overflow: auto; }
#playerDetailDialog .stack-box { grid-area: upside; }
#playerDetailDialog .recent-box { grid-area: recent; }
/* Section dialogs use their own content layout, never the player's history grid. */
#playerDetailDialog:not([data-detail-section="players"]) .selected-body {
  grid-template-areas: "identity primary" "rules primary" "history history";
}
#playerDetailDialog .team-detail-metrics,
#playerDetailDialog .game-detail-metrics,
#playerDetailDialog .shape-detail-metrics { grid-area: primary; }
#playerDetailDialog .team-detail-hitters,
#playerDetailDialog .game-detail-players,
#playerDetailDialog .shape-detail-lineups { grid-area: history; min-width: 0; }
#playerDetailDialog[data-detail-section="games"] .selected-body {
  grid-template-areas: "identity primary" "rules primary" "matchup history";
}
#playerDetailDialog .game-detail-teams { grid-area: matchup; min-width: 0; }
@media (max-width: 800px) {
  .player-detail-dialog { width: calc(100% - 24px); max-height: calc(100dvh - 24px); }
  #playerDetailDialog:not([data-detail-section="players"]) .selected-body { grid-template-areas: "identity" "primary" "rules" "matchup" "history"; }
  #playerDetailDialog .selected-body { grid-template-columns: minmax(0, 1fr); grid-template-areas: "identity" "primary" "sim" "boost" "rules" "history" "upside" "recent"; }
}

/* Late Swap shares the app theme and the Import contest-workspace presentation. */
.ls-dialog { --ls-bg:var(--surface-base,var(--band)); --ls-panel:var(--surface-raised,var(--panel)); --ls-line:var(--line); --ls-muted:var(--muted); --ls-accent:var(--accent); color-scheme:dark; background:var(--ls-bg); color:var(--text); width:min(960px,calc(100% - 32px)); max-width:960px; max-height:calc(100dvh - 40px); margin:auto; padding:0; border:1px solid var(--control-line,var(--line-strong)); border-radius:15px; box-shadow:0 24px 80px rgba(0,0,0,.5); overflow:hidden; font-size:13px; }
.ls-dialog[open] { display:flex; flex-direction:column; }
.ls-dialog::backdrop { background:rgba(0,0,0,.55); backdrop-filter:blur(3px); }
.ls-dialog * { box-sizing:border-box; }
.ls-dialog [hidden] { display:none!important; }
.ls-dialog button { height:auto; min-height:34px; padding:6px 11px; border:1px solid var(--control-line,var(--line-strong)); border-radius:7px; background:transparent; color:var(--text); font:inherit; font-weight:500; cursor:pointer; box-shadow:none; }
.ls-dialog button:hover:not(:disabled),.ls-dialog button:active:not(:disabled) { border-color:var(--ls-accent); background:transparent; }
.ls-dialog button:disabled { opacity:.45; cursor:not-allowed; }
.ls-dialog button:focus-visible,.ls-dialog input:focus-visible,.ls-dialog select:focus-visible,.ls-dialog summary:focus-visible { outline:1px solid var(--ls-accent); outline-offset:-1px; }
.ls-dialog input,.ls-dialog select { background:var(--ls-bg); border:1px solid var(--control-line,var(--line-strong)); border-radius:6px; color:var(--text); font:inherit; height:auto; min-height:32px; max-width:100%; padding:5px 7px; }
.ls-dialog input[type=checkbox],.ls-dialog input[type=radio] { appearance:none; width:14px; height:14px; min-height:14px; padding:0; flex-shrink:0; display:inline-grid; place-content:center; margin:0; border:1px solid var(--soft); background:transparent; }
.ls-dialog input[type=radio] { border-radius:50%; }
.ls-dialog input:checked { border-color:var(--ls-accent); }
.ls-dialog input[type=checkbox]:checked::after { content:"✓"; color:var(--ls-accent); font-size:12px; line-height:1; }
.ls-dialog input[type=checkbox]:indeterminate::after { content:"−"; color:var(--ls-accent); }
.ls-dialog input[type=radio]:checked::after { content:""; width:6px; height:6px; border-radius:50%; background:var(--ls-accent); }
.ls-head { display:flex; align-items:center; gap:11px; padding:14px 18px; flex-shrink:0; border-bottom:1px solid var(--ls-line); }
.ls-head h2 { margin:1px 0 0; font-size:22px; font-weight:500; line-height:1.2; letter-spacing:-.6px; }
.ls-head p { margin:4px 0 0; color:var(--ls-muted); font-size:12px; overflow-wrap:anywhere; }
.ls-kicker { font-size:10px; letter-spacing:1.2px; color:var(--soft); }
.ls-mark { display:grid; place-items:center; width:38px; height:38px; flex-shrink:0; border:1px solid var(--control-line,var(--line-strong)); border-radius:10px; color:var(--ls-accent); background:var(--surface-selected,var(--panel-3)); font-size:22px; }
.ls-mark svg { width:18px; height:18px; }
.ls-head-counts { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:4px 10px; margin-left:auto; color:var(--soft); font-size:11px; text-align:right; }
.ls-head-counts b { font-weight:500; color:var(--ls-accent); }
.ls-dialog .ls-close { display:grid; place-items:center; flex:0 0 34px; width:34px; height:34px; margin-left:auto; padding:0; font-size:22px; color:var(--soft); }
.ls-head-counts + .ls-close { margin-left:0; }
.ls-context { display:flex; align-items:center; flex-wrap:wrap; gap:7px; padding:10px 18px; border-bottom:1px solid var(--ls-line); color:var(--soft); font-size:11px; flex-shrink:0; }
.ls-context-chip { padding:2px 6px; border:1px solid var(--control-line,var(--line-strong)); border-radius:4px; background:var(--surface-selected,var(--panel-3)); }
.ls-context-name { min-width:0; overflow-wrap:anywhere; }
.ls-lock { display:flex; align-items:center; gap:6px; margin-left:auto; }
.ls-lock svg { width:13px; height:13px; color:var(--ls-accent); }
.ls-body { display:grid; grid-template-columns:minmax(280px,.9fr) minmax(0,1.3fr); overflow:auto; min-height:0; }
.ls-settings { border:0; margin:0; padding:17px 18px; min-width:0; }
.ls-label { font-size:10px; color:var(--soft); text-transform:uppercase; letter-spacing:.7px; font-weight:500; }
.ls-modes { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin:8px 0 12px; }
.ls-dialog .ls-modes button { text-align:left; padding:10px; min-width:0; }
.ls-modes b { display:flex; align-items:center; gap:6px; font-size:12px; font-weight:500; }
.ls-modes svg { width:15px; height:15px; }
.ls-modes small { display:block; color:var(--ls-muted); font-size:11px; margin-top:4px; font-weight:400; line-height:1.45; }
.ls-dialog .ls-modes button[aria-pressed=true] { background:transparent; border-color:var(--ls-accent); }
.ls-option { padding:11px 0; border-bottom:1px solid var(--ls-line); }
.ls-option label,.ls-choice { text-transform:none; letter-spacing:normal; font-weight:400; }
.ls-option p,.ls-muted { color:var(--ls-muted); font-size:11px; line-height:1.55; margin:4px 0 0; }
.ls-between { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.ls-between b { font-size:12px; font-weight:500; }
.ls-between select { max-width:145px; font-size:12px; }
.ls-dialog .ls-switch { width:31px!important; height:18px!important; min-height:18px!important; border-radius:20px!important; display:block!important; position:relative; border-color:var(--control-line,var(--line-strong)); }
.ls-dialog .ls-switch::after { content:""!important; width:10px; height:10px; top:3px; left:3px; position:absolute; border:0; border-radius:50%; background:var(--ls-muted); }
.ls-dialog .ls-switch:checked { border-color:var(--ls-accent); }
.ls-dialog .ls-switch:checked::after { transform:translateX(13px); background:var(--ls-accent); }
.ls-entries { padding-top:17px; }
.ls-select-actions { display:flex; gap:10px; flex-wrap:wrap; }
.ls-dialog .ls-select-actions button { padding:3px 0; min-height:24px; border:0; border-radius:0; font-size:11px; color:var(--ls-accent); background:transparent; }
#lsSelectedCount { margin:4px 0 9px; color:var(--ls-accent); font-size:11px; }
.ls-dialog summary { cursor:pointer; font-size:11px; color:var(--soft); padding:8px 0; }
.ls-entries>details { max-height:250px; overflow:auto; scrollbar-width:thin; overscroll-behavior:contain; }
.ls-contest { border:1px solid var(--ls-line); border-radius:7px; background:var(--ls-panel); margin:6px 0; }
.ls-contest summary { display:flex; gap:8px; align-items:center; padding:10px 9px; }
.ls-contest summary span { flex:1; min-width:0; overflow-wrap:anywhere; color:var(--text); font-size:12px; }
.ls-contest summary small,.ls-contest-count { flex:0 0 auto; font-size:11px; color:var(--ls-muted); white-space:nowrap; }
.ls-contest-entries { padding:0 9px 8px 30px; max-height:190px; overflow:auto; }
.ls-choice { display:flex; gap:8px; align-items:center; font-size:12px; padding:6px 0; }
.ls-fields { display:flex; flex-wrap:wrap; gap:6px; margin:5px 0 10px 22px; }
.ls-fields input { width:65px; min-width:0; }
.ls-fields select { min-width:0; flex:1; font-size:12px; }
.ls-preview { background:var(--ls-panel); border-left:1px solid var(--ls-line); padding:17px 18px; min-width:0; display:flex; flex-direction:column; }
.ls-preview-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.ls-preview-head h3 { margin:0; font-size:13px; font-weight:500; letter-spacing:-.15px; }
#lsPreviewTag { border:1px solid var(--control-line,var(--line-strong)); border-radius:20px; padding:3px 8px; font-size:10px; color:var(--ls-accent); }
#lsPreviewContent { flex:1; min-width:0; }
.ls-empty { display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; min-height:200px; height:100%; padding:28px 10px; }
.ls-empty-icon { color:var(--ls-accent); background:var(--surface-selected,var(--panel-3)); border:1px solid var(--control-line,var(--line-strong)); border-radius:11px; width:44px; height:44px; display:grid; place-items:center; margin-bottom:14px; font-size:24px; }
.ls-empty h3 { margin:0 0 7px; font-size:14px; font-weight:500; }
.ls-empty p { margin:0; max-width:230px; font-size:12px; line-height:1.6; color:var(--ls-muted); }
.ls-lock-note { display:flex; align-items:flex-start; gap:7px; border-top:1px solid var(--ls-line); margin-top:18px; padding-top:12px; font-size:11px; line-height:1.55; color:var(--ls-muted); }
.ls-lock-note svg { width:14px; height:14px; flex:0 0 auto; margin-top:2px; }
.ls-footer { padding:12px 18px; border-top:1px solid var(--ls-line); background:var(--ls-bg); display:flex; flex-wrap:wrap; gap:10px; align-items:center; flex-shrink:0; }
#lsStatus { flex:1; min-width:140px; color:var(--soft); font-size:11px; overflow-wrap:anywhere; }
.ls-footer-actions { display:flex; gap:7px; flex-wrap:wrap; }
.ls-dialog .ls-primary { border-color:var(--ls-accent); background:transparent; color:var(--text); }
.ls-warning,#lsStatus.ls-error { color:var(--warn); font-size:12px; }
.ls-results-summary { margin:17px 0 0; color:var(--ls-muted); font-size:12px; }
.ls-results-hero { display:flex; flex-wrap:wrap; gap:8px; align-items:baseline; }
.ls-results-hero strong { font-size:32px; line-height:1.1; letter-spacing:-1px; color:var(--text); font-weight:500; }
.ls-results-caption { color:var(--soft); font-size:12px; }
.ls-gain { font-size:12px; color:var(--pos); margin:7px 0 12px; }
.ls-gain small { font-size:11px; color:var(--ls-muted); }
.ls-gain.is-negative { color:var(--neg,var(--warn)); }
.ls-gain.is-neutral { color:var(--soft); }
.ls-totals { display:flex; flex-wrap:wrap; gap:6px 15px; border-top:1px solid var(--ls-line); border-bottom:1px solid var(--ls-line); padding:9px 0; margin-top:12px; color:var(--soft); font-size:11px; }
.ls-swap-labels,.ls-swap-names { display:grid; grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr); align-items:center; }
.ls-swap-labels { color:var(--ls-muted); font-size:10px; margin:16px 0 6px; letter-spacing:.7px; }
.ls-swap-labels>:last-child { grid-column:3; color:var(--ls-accent); }
.ls-swap-row { padding:11px 0; border-bottom:1px solid var(--ls-line); }
.ls-swap-names b { font-size:12px; font-weight:500; min-width:0; overflow-wrap:anywhere; color:var(--text); }
.ls-swap-names b:first-child { color:var(--soft); }
.ls-swap-arrow { color:var(--ls-accent); font-size:16px; }
.ls-swap-row small { display:block; font-size:11px; color:var(--ls-muted); margin-top:4px; }
.ls-entry-details { margin-top:10px; }
.ls-entry-change { display:grid; gap:3px; padding:9px 0; border-bottom:1px solid var(--ls-line); font-size:11px; overflow-wrap:anywhere; }
.ls-entry-change small { color:var(--ls-muted); font-size:10px; }
.ls-sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
@media(max-width:660px) { .ls-dialog { width:calc(100% - 16px); max-height:calc(100dvh - 16px); border-radius:12px; }.ls-body { grid-template-columns:1fr; }.ls-head { padding:12px 14px; gap:9px; }.ls-head h2 { font-size:21px; }.ls-kicker { font-size:9px; letter-spacing:.6px; }.ls-head-counts { font-size:10px; max-width:85px; gap:2px; }.ls-context { padding:10px 14px; }.ls-lock { margin-left:0; width:100%; margin-top:2px; }.ls-settings,.ls-preview { padding:16px; }.ls-preview { border-left:0; border-top:1px solid var(--ls-line); }.ls-empty { min-height:150px; padding:24px 10px; }.ls-footer { padding:10px 14px; }#lsStatus { flex-basis:100%; }.ls-footer-actions { width:100%; justify-content:flex-end; }.ls-primary { flex:1; }.ls-dialog select,.ls-dialog input[type=number] { font-size:16px; }.ls-entries>details { max-height:220px; } }
@media(pointer:coarse) { .ls-dialog .ls-close { width:44px; flex-basis:44px; } .ls-dialog button,.ls-dialog summary,.ls-choice { min-height:44px; }.ls-dialog .ls-select-actions button { min-height:44px; }.ls-between:has(.ls-switch) { min-height:44px; } }


/* Desktop slate selection uses the existing controls in one native dialog. */
:root.desktop-palette .brand-lockup #runLine,
:root.desktop-palette .brand-lockup #appTitle { display: none; }
.header-desktop-context { display: none; }
:root.desktop-palette .header-desktop-context { display: inline-flex; align-items: baseline; gap: 8px; min-width: 0; max-width: min(36vw, 420px); vertical-align: middle; }
.header-slate-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.header-slate-divider, .header-slate-date-label, .header-slate-time-label { flex: 0 0 auto; color: var(--muted); }
.header-slate-picker { flex: 0 1 auto; min-width: 0; max-width: 100%; }
#slatePickerToggle { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 0 12px; font-size: 14px; font-weight: 400; white-space: nowrap; }
.header-picker-label, .header-picker-chevron { flex: 0 0 auto; }
.header-picker-separator { flex: 0 0 1px; height: 16px; margin: 0 2px; background: var(--control-line); }
.header-picker-icon { flex: 0 0 auto; width: 16px; height: 16px; color: var(--accent); }
.header-picker-chevron { color: var(--muted); font-size: 12px; }
:root:not(.desktop-palette) .header-slate-picker { display: none; }
body.slate-picker-open { overflow: hidden; }
.slate-picker-dialog {
  width: min(880px, calc(100% - 32px)); max-width: 880px;
  max-height: calc(100dvh - 40px); margin: auto; padding: 0;
  border: 1px solid var(--control-line, #3a4656); border-radius: 14px;
  background: var(--surface-base, #0b0e13); color: var(--text);
  box-shadow: 0 24px 80px rgba(0,0,0,.5); overflow: auto;
}
.slate-picker-dialog[open] { display: flex; flex-direction: column; }
.slate-picker-dialog::backdrop { background: rgba(0,0,0,.55); }
.slate-picker-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px; border-bottom: 1px solid var(--line); flex: 0 0 auto; }
.slate-picker-header h2 { font-size: 20px; font-weight: 500; }
.slate-picker-header p { margin-top: 6px; font-size: 12px; color: var(--muted); }
.slate-picker-header button { padding: 0 12px; font-weight: 400; }
.slate-picker-status { padding: 14px 20px; color: #fff; font-size: 14px; line-height: 1.4; border-bottom: 1px solid var(--line); }
.slate-picker-status:not([hidden]) { display: flex; align-items: center; gap: 12px; }
.slate-picker-status::before { content: ""; }
@media (prefers-reduced-motion: reduce) {
  .slate-picker-status::before { animation: none; }
}
.slate-picker-dialog .left-rail { display: block; overflow: auto; min-height: 0; overscroll-behavior: contain; }
.slate-picker-dialog .panel { display: grid; grid-template-columns: 285px minmax(0,1fr); align-items: start; gap: 20px; padding: 20px; border: 0; overflow: visible; }
.slate-picker-dialog .calendar-box { position: sticky; top: 0; margin: 0; padding: 12px; }
.slate-picker-dialog .calendar-title-stack { height: auto; padding: 5px 2px; background: transparent; border-color: transparent; font-weight: 400; }
.slate-picker-dialog .calendar-title-stack:hover { border-color: var(--control-line); }
.slate-picker-dialog .calendar-title-stack b { font-weight: 500; }
.slate-picker-dialog .slate-month-popup { top: 56px; left: 8px; right: 8px; }
.slate-picker-dialog .slate-schedule { padding: 0; }
.slate-picker-dialog .slate-card { min-height: 92px; }
.slate-picker-dialog :focus-visible, .header-slate-picker :focus-visible { outline: 1px solid var(--accent); outline-offset: -1px; }
@media (min-width: 641px) and (max-width: 900px) {
  .brand-context { flex-wrap: wrap; }
  .slate-picker-dialog .panel { grid-template-columns: minmax(0,1fr); }
  .slate-picker-dialog .calendar-box { position: relative; width: 100%; max-width: 340px; justify-self: center; }
}

/* Account center: one neutral popup; existing account actions and alert controls. */
.account-initial { width: 24px; height: 24px; display: inline-grid; place-items: center; flex-shrink: 0; border-radius: 50%; background: #172b3f; color: #75bbff; font-size: 12px; font-weight: 600; }
.account-center-dialog { box-sizing: border-box; width: min(440px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 40px); margin: auto; padding: 0; overflow-y: auto; border: 1px solid #303c4b; border-radius: 12px; background: #10141a; color: #f1f5fb; box-shadow: 0 24px 80px #0008; }
.account-center-dialog::backdrop { background: #0008; }
.account-center-dialog [hidden] { display: none !important; }
.account-center-dialog button, .account-center-dialog input { font: inherit; }
.account-center-dialog button { cursor: pointer; }
.account-center-dialog a { color: #75bbff; }
.account-center-dialog :focus-visible { outline: 1px solid #75bbff; outline-offset: -1px; }
.account-center-head { display: flex; align-items: center; justify-content: space-between; padding: 15px 20px; border-bottom: 1px solid #28323e; }
.account-center-head h2 { margin: 0; font-size: 15px; font-weight: 600; }
.account-center-head .account-close { width: 30px; height: 30px; min-height: 30px; padding: 0; border: 0; background: transparent; color: #a1adbc; font-size: 23px; }
.account-center-body { padding: 20px; }
.account-identity { display: flex; align-items: center; gap: 12px; padding-bottom: 19px; margin-bottom: 5px; border-bottom: 1px solid #28323e; }
.account-identity > div { min-width: 0; flex: 1; }
.account-identity .account-initial { width: 44px; height: 44px; font-size: 18px; }
.account-identity h3 { margin: 0 0 4px; font-size: 17px; font-weight: 600; overflow-wrap: anywhere; }
.account-identity p { margin: 0; font-size: 12px; color: #a1adbc; overflow-wrap: anywhere; }
.account-role-tag { padding: 4px 6px; border: 1px solid #34404e; border-radius: 4px; color: #a1adbc; font-size: 10px; text-transform: uppercase; }
.account-center-dialog .account-menu-row { height: auto; min-height: 68px; line-height: 1.4; white-space: normal; width: 100%; display: flex; align-items: center; gap: 14px; padding: 15px 9px; border: 0; border-radius: 6px; background: transparent; color: #f1f5fb; text-align: left; }
.account-center-dialog .account-menu-row:hover { background: #19212c; }
.account-menu-row svg { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: #75bbff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.account-menu-row > span:not(.account-row-arrow) { flex: 1; min-width: 0; }
.account-menu-row b { display: block; font-size: 14px; font-weight: 500; }
.account-menu-row small { display: block; margin-top: 4px; color: #a1adbc; font-size: 12px; }
.account-menu-row .account-row-arrow { color: #708092; font-size: 22px; }
.account-center-footer { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-top: 1px solid #28323e; }
.account-center-footer button { background: transparent; border: 0; padding: 6px 0; color: #efabab; font-size: 13px; }
.account-center-footer > span { font-size: 11px; color: #708092; }
.account-page-heading { margin-bottom: 18px; }
.account-page-heading button { padding: 0; min-height: 28px; background: transparent; border: 0; color: #a1adbc; font-size: 12px; }
.account-page-heading h3 { margin: 10px 0 0; font-size: 18px; }
.account-center-form { display: grid; gap: 8px; }
.account-center-form label { font-size: 12px; color: #a1adbc; }
.account-center-form input { box-sizing: border-box; width: 100%; min-width: 0; min-height: 36px; background: #0b0e13; border: 1px solid #34404e; border-radius: 5px; padding: 8px 10px; color: #f1f5fb; }
.account-center-form button, #accountMembershipPlans, #accountAlertsHost button { background: #151e29; border: 1px solid #34404e; border-radius: 5px; padding: 9px 12px; color: #f1f5fb; font-size: 13px; }
.account-password-form { border-top: 1px solid #28323e; margin-top: 18px; padding-top: 16px; }
.account-password-form h4 { margin: 0 0 8px; font-size: 14px; }
.account-feedback, .account-center-form .login-error { margin: 2px 0 0; font-size: 12px; min-height: 16px; }
.account-feedback { color: #a1adbc; }
.account-info-card { border: 1px solid #28323e; border-radius: 7px; padding: 14px; margin-bottom: 12px; }
.account-info-label { display: block; color: #a1adbc; font-size: 11px; margin-bottom: 8px; }
.account-info-card b { text-transform: capitalize; font-size: 15px; }
.account-info-card p, .account-help { color: #a1adbc; font-size: 13px; line-height: 1.6; margin: 8px 0; }
.account-legal { display: flex; gap: 18px; border-top: 1px solid #28323e; padding-top: 16px; margin-top: 24px; font-size: 12px; }
.account-support-link { display: inline-block; margin: 10px 0; font-size: 15px; overflow-wrap: anywhere; }
#accountAlertsHost .mobile-more-alerts { display: grid; gap: 14px; padding: 0; border: 0; background: transparent; }
#accountAlertsHost .mobile-more-section-label { display: none; }
#accountAlertsHost .phone-alert-copy { display: grid; gap: 8px; }
#accountAlertsHost .phone-alert-copy b { color: #f1f5fb; font-size: 14px; }
#accountAlertsHost .phone-alert-copy span, #accountAlertsHost #phoneAlertHint { color: #a1adbc; font-size: 13px; line-height: 1.6; }
#accountAlertsHost .phone-alert-actions { display: flex; gap: 8px; }
#accountAlertsHost button:disabled { opacity: .55; cursor: default; }
@media (max-width: 640px) { .account-center-dialog { width: calc(100vw - 24px); max-height: calc(100dvh - 32px); } .account-center-body { padding: 16px; } }

/* One Import workspace; use the app theme tokens for every sport and screen.
   Action emphasis is an outline, and money follows the shared --pos color. */
#entryImportDialog { box-sizing: border-box; width: min(860px, calc(100vw - 40px)); max-width: none; max-height: min(920px, calc(100dvh - 40px)); margin: auto; padding: 0; overflow: hidden; border: 1px solid var(--control-line, var(--line-strong)); border-radius: 16px; background: var(--surface-base, var(--band)); color: var(--text); box-shadow: 0 24px 80px rgba(0,0,0,.5); color-scheme: dark; }
#entryImportDialog[open] { display: flex; flex-direction: column; }
#entryImportDialog::backdrop { background: rgba(0,0,0,.55); backdrop-filter: blur(3px); }
#entryImportDialog [hidden] { display: none !important; }
.entry-import-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 20px; border-bottom: 1px solid var(--line); background: var(--surface-base, var(--band)); flex: 0 0 auto; }
.entry-import-title { display: flex; align-items: center; gap: 10px; }
.entry-import-mark,.entry-import-icon { display: grid; place-items: center; flex: 0 0 auto; width: 36px; height: 38px; border: 1px solid var(--control-line, var(--line-strong)); border-radius: 11px; color: var(--accent); background: var(--surface-selected, var(--panel-3)); }
.entry-import-mark svg,.entry-import-icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.entry-import-eyebrow { display: block; margin-bottom: 4px; color: var(--muted); font-size: 9px; font-weight: 600; letter-spacing: .16em; }
.entry-import-head h2 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -.025em; }
.entry-import-head > button { min-height: 36px; width: 36px; padding: 0; border-radius: 8px; background: transparent; border: 1px solid var(--control-line, var(--line-strong)); color: var(--soft); font-size: 23px; }
.entry-import-body { padding: 14px 20px; overflow-y: auto; overscroll-behavior: contain; min-height: 0; scrollbar-gutter: stable; }
.entry-import-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.entry-import-body h3 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -.025em; }
.entry-import-body p { margin: 6px 0; color: var(--soft); font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.entry-import-body #entryImportContext { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--soft); margin-top: 6px; font-size: 11px; }
.entry-import-context-tag { display: inline-flex; align-items: center; border: 1px solid var(--line); background: var(--surface-selected, var(--panel-3)); border-radius: 5px; padding: 2px 7px; color: var(--soft); font-weight: 600; letter-spacing: .02em; }
.entry-import-context-date { color: var(--muted); }.entry-import-context-divider { color: var(--muted); }
.entry-import-badge { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; padding: 6px 9px; border: 1px solid var(--control-line, var(--line-strong)); border-radius: 20px; color: var(--soft); font-size: 9px; letter-spacing: .055em; font-weight: 600; }
#entryImportDialog[data-import-state="success"] .entry-import-badge { color: var(--good); background: transparent; border-color: var(--good); }
#entryImportDialog[data-import-state="error"] .entry-import-badge { color: var(--warn); background: var(--surface-raised, var(--panel)); border-color: var(--warn); }
.entry-import-body .entry-import-note { font-size: 11px; color: var(--muted); }.entry-import-note:empty { display: none; }
.entry-import-result { display: flex; align-items: center; gap: 10px; padding: 7px 10px; margin: 10px 0 0; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-field, var(--panel-2)); color: var(--soft); font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
.entry-import-result::before { content: 'CSV'; flex: 0 0 auto; font-size: 9px; font-weight: 600; color: var(--accent); padding: 4px; border: 1px solid var(--control-line, var(--line-strong)); border-radius: 4px; }
.entry-import-result.is-error { color: var(--warn); border-color: var(--warn); background: var(--surface-raised, var(--panel)); }.entry-import-result.is-error::before { content: '!'; border-color: var(--warn); color: var(--warn); width: 18px; text-align: center; }
.entry-import-summary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin: 10px 0; }
.entry-import-stat { border: 1px solid var(--line); background: var(--surface-raised, var(--panel)); border-radius: 8px; padding: 10px 12px; }
.entry-import-stat span { display: block; color: var(--muted); font-size: 9px; letter-spacing: .08em; }
.entry-import-stat strong { display: block; color: var(--text); font-size: 26px; font-weight: 600; margin-top: 3px; font-variant-numeric: tabular-nums; letter-spacing: -.035em; line-height: 1.25; overflow-wrap: anywhere; }
.entry-import-stat:last-child strong { color: var(--pos); }.entry-import-stat small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; }
.entry-import-completion { display: flex; align-items: center; gap: 12px; margin: 10px 0 14px; color: var(--soft); font-size: 11px; }.entry-import-completion > span { flex: 0 1 auto; }
.entry-import-meter { display: flex; flex: 1; min-width: 60px; height: 5px; overflow: hidden; background: var(--line); border-radius: 6px; }.entry-import-meter i { height: 100%; background: var(--soft); }.entry-import-meter i.is-partial { background: var(--muted); }
.entry-import-section-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 5px; align-items: baseline; }.entry-import-section-head h4 { font-size: 14px; margin: 0; font-weight: 600; }.entry-import-section-head span { color: var(--muted); font-size: 10px; }
.entry-import-columns,.entry-import-contest-summary { display: grid; grid-template-columns: minmax(0,1fr) 70px 58px 84px 12px; gap: 10px; }
.entry-import-columns { position: sticky; top: 0; z-index: 1; background: var(--surface-base, var(--band)); padding: 5px 12px; color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }.entry-import-columns > :not(:first-child) { text-align: right; }
.entry-import-contests { max-height: min(330px, 40dvh); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: thin; }
.entry-import-contest { border: 1px solid var(--line); border-radius: 8px; margin-bottom: 6px; overflow: hidden; background: var(--surface-raised, var(--panel)); }
.entry-import-contest-summary { align-items: center; padding: 9px 12px; cursor: pointer; list-style: none; }.entry-import-contest-summary::-webkit-details-marker { display: none; }.entry-import-contest > summary.entry-import-contest-summary:hover { background: var(--surface-hover, var(--panel-3)); }.entry-import-contest[open] > .entry-import-contest-summary { background: var(--surface-selected, var(--panel-3)); border-bottom: 1px solid var(--line); }
.entry-import-contest-name { display: flex; align-items: center; gap: 8px; min-width: 0; }.entry-import-contest-name strong { display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); font-size: 12px; font-weight: 600; overflow-wrap: anywhere; line-height: 1.55; }.entry-import-contest-name small { display: block; flex: 0 0 auto; white-space: nowrap; color: var(--muted); margin-top: 0; font-size: 10px; line-height: 1.5; }
div.entry-import-contest > .entry-import-contest-summary { cursor: default; }
.entry-import-contest-number { text-align: right; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--soft); }.entry-import-contest-number.is-total { color: var(--pos); }
.entry-import-chevron { color: var(--soft); transition: transform .15s; font-size: 20px; text-align: right; }.entry-import-contest[open] .entry-import-chevron { transform: rotate(90deg); }
.entry-import-contest-body { padding: 12px; background: var(--surface-base, var(--band)); }.entry-import-meta { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px 14px; }
.entry-import-meta span { font-size: 10px; color: var(--muted); min-width: 0; }.entry-import-meta b { display: block; margin-top: 5px; font-size: 12px; font-weight: 500; color: var(--soft); overflow-wrap: anywhere; }
.entry-import-footer { display: grid; grid-template-columns: minmax(0,1fr) auto auto auto; align-items: center; gap: 8px 12px; padding: 9px 20px; background: var(--surface-base, var(--band)); border-top: 1px solid var(--line); flex: 0 0 auto; }
.entry-import-clear { min-height: 34px; padding: 7px 10px; border: 1px solid var(--control-line, var(--line-strong)); border-radius: 7px; background: transparent; color: var(--soft); font-size: 11px; white-space: nowrap; }
.entry-import-clear:hover:not(:disabled) { border-color: var(--accent); background: transparent; color: var(--text); }
.entry-import-export-option { display: flex; min-height: 34px; align-items: center; justify-content: space-between; gap: 10px; margin: 0; color: var(--soft); font-size: 11px; font-weight: 400; text-transform: none; letter-spacing: normal; cursor: pointer; }
.entry-import-export-option input { appearance: none; position: relative; flex: 0 0 32px; width: 32px; height: 18px; margin: 0; padding: 0; border: 1px solid var(--control-line, var(--line-strong)); border-radius: 20px; background: transparent; cursor: pointer; }
.entry-import-export-option input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 10px; height: 10px; border-radius: 50%; background: var(--muted); transition: transform .15s; }
.entry-import-export-option input:checked { border-color: var(--accent); }
.entry-import-export-option input:checked::after { transform: translateX(14px); background: var(--accent); }
.entry-import-export-option input:focus-visible { outline: 1px solid var(--accent); outline-offset: -1px; box-shadow: none; }
.entry-import-primary { display: flex; justify-content: center; align-items: center; gap: 22px; flex: 0 0 auto; height: auto; min-height: 40px; min-width: 110px; padding: 9px 17px; border: 1px solid var(--accent); border-radius: 7px; background: transparent; color: var(--text); font-size: 12px; font-weight: 600; }
.entry-import-primary:hover:not(:disabled),.entry-import-primary:active { background: transparent; border-color: var(--accent); color: var(--text); }
.entry-import-secondary { display: flex; flex-wrap: wrap; gap: 0 18px; }.entry-import-secondary button { height: auto; min-height: 30px; padding: 4px 0; border: 0; background: transparent; color: var(--soft); font-size: 11px; text-align: left; }.entry-import-secondary button:hover { color: var(--text); }
#entryImportDialog :is(button,summary,select) { box-shadow: none !important; outline: none; }#entryImportDialog :is(button,summary,select):focus-visible { outline: 1px solid var(--accent) !important; outline-offset: -1px !important; }#entryImportDialog button:disabled { opacity: .55; cursor: wait; }
.entry-import-body .entry-import-dropzone { display: flex; position: relative; flex-direction: column; align-items: center; justify-content: center; gap: 9px; width: 100%; height: auto; min-height: 136px; margin-top: 14px; padding: 16px; border: 1px dashed var(--control-line, var(--line-strong)); border-radius: 11px; background: var(--surface-selected, var(--panel-3)); color: var(--text); font-size: 16px; font-weight: 500; line-height: 1.4; white-space: normal; transition: border-color .15s,background .15s; }
.entry-import-dropzone .entry-import-drop-caption { color: var(--muted); font-size: 12px; font-weight: 400; }.entry-import-file-type { position: absolute; top: 14px; right: 14px; color: var(--muted); font-size: 9px; letter-spacing: .1em; }.entry-import-body .entry-import-dropzone:hover:not(:disabled),.entry-import-body .entry-import-dropzone.is-dragover { background: var(--surface-hover, var(--panel-3)); border-color: var(--accent); }
.entry-import-body .entry-import-dropzone.is-repeat { min-height: 40px; margin-top: 10px; padding: 8px 12px; flex-direction: row; gap: 10px; font-size: 12px; }.entry-import-dropzone.is-repeat :is(.entry-import-icon,.entry-import-file-type) { display: none; }
.entry-import-features { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin: 14px 0 10px; }.entry-import-features > div { position: relative; padding-left: 28px; }.entry-import-features span { position: absolute; left: 0; top: 1px; font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; }.entry-import-features strong { display: block; font-size: 11px; color: var(--soft); font-weight: 500; }.entry-import-features small { display: block; margin-top: 5px; font-size: 10px; color: var(--muted); line-height: 1.5; }
#entryImportDialog[aria-busy="true"] .entry-import-icon { border-radius: 50%; width: 35px; height: 35px; background: transparent; border: 2px solid var(--control-line, var(--line-strong)); border-top-color: var(--accent); animation: entry-import-spin .8s linear infinite; }#entryImportDialog[aria-busy="true"] .entry-import-icon svg { visibility: hidden; }
@keyframes entry-import-spin { to { transform: rotate(360deg); } }
@media(max-width:640px) { .entry-import-contest-name { flex-wrap: wrap; gap: 1px 6px; }.entry-import-contest-summary { min-height: 44px; } #entryImportDialog { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); border-radius: 12px; }.entry-import-head { padding: 12px 14px; }.entry-import-head h2 { font-size: 19px; }.entry-import-mark { width: 36px; height: 40px; }.entry-import-body { padding: 12px 14px; scrollbar-gutter: auto; }.entry-import-body h3 { font-size: 19px; }.entry-import-hero { gap: 8px; }.entry-import-badge { font-size: 8px; padding: 5px 7px; }.entry-import-summary { gap: 6px; }.entry-import-stat { padding: 9px 8px; }.entry-import-stat strong { font-size: 23px; }.entry-import-stat span { font-size: 8px; letter-spacing: .04em; }.entry-import-stat small { font-size: 9px; }.entry-import-columns,.entry-import-contest-summary { grid-template-columns: minmax(0,1fr) 45px 38px 10px; gap: 7px; }.entry-import-columns .is-total,.entry-import-contest-summary .is-total { display: none; }.entry-import-meta { grid-template-columns: repeat(2,minmax(0,1fr)); }.entry-import-footer { padding: 8px 14px; grid-template-columns: minmax(0,1fr) auto; }.entry-import-export-option { min-height: 44px; grid-column: 1/-1; grid-row: 1; padding-bottom: 6px; border-bottom: 1px solid var(--line); }.entry-import-primary { min-width: 80px; min-height: 44px; gap: 12px; }.entry-import-secondary { display: grid; gap: 3px; }.entry-import-completion { flex-wrap: wrap; gap: 8px; }.entry-import-completion .entry-import-meter { flex-basis: 100%; order: 2; }.entry-import-section-head span { font-size: 9px; text-align: right; }.entry-import-features { gap: 9px; }.entry-import-features > div { padding: 0; }.entry-import-features span { position: static; display: block; margin-bottom: 7px; }.entry-import-body .entry-import-dropzone.is-repeat { min-height: 44px; }.entry-import-dropzone.is-repeat .entry-import-drop-caption { display: none; } }
@media(max-width:700px) { .entry-import-footer { grid-template-columns: minmax(0,1fr) auto; }.entry-import-export-option { grid-column: 1/-1; grid-row: 1; min-height: 44px; }.entry-import-secondary { grid-column: 1/-1; grid-row: 2; display: flex; gap: 0 14px; }.entry-import-clear { grid-column: 1; grid-row: 3; justify-self: start; min-height: 44px; }.entry-import-primary { grid-column: 2; grid-row: 3; min-height: 44px; } }
@media(prefers-reduced-motion:reduce) { #entryImportDialog * { transition: none !important; animation: none !important; } }


/* NFL exact shapes share the MLB cards; mode buttons keep neutral interiors. */
.sport-nfl .stack-shape-card-toolbar [data-nfl-stack-view] {
  background: transparent;
  box-shadow: none;
}
@media (max-width: 640px), (max-width: 950px) and (max-height: 500px), (max-device-width: 640px) {
  .sport-nfl .m-board-host .stack-shape-card {
    grid-template-columns: 44px minmax(0, 1fr) repeat(2, minmax(45px, 58px));
  }
  .sport-nfl .m-board-host .stack-shape-card-identity {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .sport-nfl .m-board-host .stack-shape-glyph {
    white-space: normal;
    justify-content: flex-start;
    text-align: left;
  }
}

/* Shared player shortcuts: compact stacked outline controls beside the portrait. */
.player-quick-rules { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 0 0 24px; }
.player-quick-rules .player-quick-rule { display: grid; place-items: center; width: 24px; height: 24px; min-width: 24px; min-height: 24px; padding: 3px; border: 1px solid var(--line); border-radius: 6px; background: transparent; color: var(--muted); box-shadow: none; cursor: pointer; touch-action: manipulation; }
.player-quick-rule svg { width: 16px; height: 16px; pointer-events: none; }
.player-quick-rules .player-quick-rule:hover { color: var(--soft); border-color: var(--soft); background: transparent; }
.player-quick-rules .player-quick-rule.is-lock[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); }
.player-quick-rules .player-quick-rule.is-exclude[aria-pressed="true"] { color: var(--bad); border-color: var(--bad); }
.player-quick-rules .player-quick-rule:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.player-quick-rules .player-quick-rule:disabled { opacity: .45; cursor: not-allowed; }
.desktop-player-card-identity { grid-template-columns: 24px 42px minmax(0, 1fr); column-gap: 8px; }
.desktop-player-card-identity > .player-quick-rules { grid-column: 1; grid-row: 1; }
.desktop-player-card-identity > .player-card-portrait { grid-column: 2; grid-row: 1; }
.desktop-player-card-identity > .player-card-copy { grid-column: 3; grid-row: 1; }
.desktop-player-card.excluded { opacity: 1; }
.desktop-player-card.excluded .player-card-copy, .desktop-player-card.excluded .player-card-portrait, .desktop-player-card.excluded .desktop-player-card-metric { opacity: .5; }
.desktop-player-card.excluded .player-name { text-decoration: line-through; }
.m-pcard.off { opacity: 1; }
.m-pcard.off .m-pc-shot, .m-pcard.off .m-pc-id, .m-pcard.off .m-pc-stats { opacity: .5; }
.m-pcard.off .m-pc-name-line > b { text-decoration: line-through; }
.m-pcard.locked { border-color: var(--accent); }

/* Approved sport-specific team exclusion: saved team overlay, outline controls. */
.team-line.has-team-exclude { grid-template-columns: 24px 20px minmax(0, 1fr) 34px; gap: 5px; }
.team-exclude { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 1px solid var(--line); border-radius: 5px; background: transparent; color: var(--muted); cursor: pointer; }
.team-exclude:hover { color: var(--accent); border-color: var(--accent); }
.team-exclude.is-excluded { color: var(--bad); border-color: var(--bad); }
.team-exclude:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.team-line.is-team-excluded > b, .is-team-excluded .m-game-team-name { color: var(--muted); text-decoration: line-through; }
.team-ball-icon { display: block; position: relative; width: 16px; height: 16px; font-size: 16px; pointer-events: none; }
.team-ball-icon *, .team-ball-icon *::before, .team-ball-icon *::after { box-sizing: border-box; }
.team-ball-icon i { color: inherit; font-size: inherit; }
.team-ball-icon .ball-slash { position: absolute; left: 56%; top: 2%; height: 96%; width: .065em; border-radius: .05em; background: currentColor; transform: rotate(40deg); }
.team-ball-icon.football .ball-body { position: absolute; left: 20%; top: 20%; width: 60%; height: 60%; border: .065em solid currentColor; border-radius: 8% 92% 8% 92%; transform: scaleY(1.4) rotate(-45deg); }
.team-ball-icon .ball-laces { position: absolute; left: 27%; top: 36%; width: 33%; height: 18%; display: flex; justify-content: space-between; align-items: center; }
.team-ball-icon .ball-laces::before { content: ""; position: absolute; left: 0; right: 0; height: .052em; border-radius: .03em; background: currentColor; }
.team-ball-icon .ball-laces i { width: .052em; height: 100%; border-radius: .03em; background: currentColor; }
.team-ball-icon.round .ball-body { position: absolute; left: 12%; top: 12%; width: 76%; height: 76%; border: .065em solid currentColor; border-radius: 50%; overflow: hidden; }
.team-ball-icon .ball-seam { position: absolute; top: -8%; height: 116%; width: 75%; border: .055em solid currentColor; border-radius: 50%; }
.team-ball-icon .ball-seam.left { left: -44%; }
.team-ball-icon .ball-seam.right { right: -44%; }
.team-ball-icon .ball-stitch { position: absolute; height: .05em; width: .14em; background: currentColor; border-radius: .03em; }
.team-ball-icon .ball-stitch.one { left: 14%; top: 25%; transform: rotate(-20deg); }
.team-ball-icon .ball-stitch.two { left: 14%; top: 68%; transform: rotate(20deg); }
.team-ball-icon .ball-stitch.three { right: 14%; top: 25%; transform: rotate(20deg); }
.team-ball-icon .ball-stitch.four { right: 14%; top: 68%; transform: rotate(-20deg); }
.team-ball-icon.basketball .ball-body::before { content: ""; position: absolute; left: 47%; top: 0; bottom: 0; width: .055em; background: currentColor; }
.team-ball-icon.basketball .ball-body::after { content: ""; position: absolute; top: 47%; left: 0; right: 0; height: .055em; background: currentColor; }
.team-ball-icon.basketball .ball-seam { width: 74%; }
.team-ball-icon.basketball .ball-seam.left { left: -48%; }
.team-ball-icon.basketball .ball-seam.right { right: -48%; }
.m-game-team-entry { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 4px; white-space: nowrap; }
@media (max-width: 640px), (max-width: 950px) and (max-height: 500px), (max-device-width: 640px) {
  .m-game:has(.team-exclude) { width: max-content; min-width: 126px; }
  .m-game .team-exclude, .m-gchip .team-exclude { width: 44px; height: 44px; }
  .m-game .team-ball-icon { color: inherit; }
}

.m-gchip-filter { width: 100%; min-height: 28px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.m-gchip-filter:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.team-exclude:disabled { cursor: wait; opacity: .5; }

/* A single status ring surrounds the player portrait, including photo fallback.
   The little team badge keeps its ordinary neutral border. */
:is(.player-card-portrait, .m-pc-shot):has(> .player-status-logo) {
  --player-status-color: transparent;
  box-sizing: border-box; border: 1px solid var(--player-status-color);
  border-radius: 50%; box-shadow: none;
}
.player-card-portrait:has(> .player-status-logo) { border-width: 2px; }
:is(.player-card-portrait, .m-pc-shot):has(> .player-status-logo.is-status-neutral) {
  --player-status-color: var(--text);
}
:is(.player-card-portrait, .m-pc-shot):has(> .player-status-logo.is-status-good) {
  --player-status-color: color-mix(in srgb, var(--good) 70%, var(--bg));
}
.player-grid-shell .player-card-portrait:has(> .player-status-logo) .player-card-face {
  inset: 0; width: 100%; height: 100%; border: 0;
}
.player-grid-shell .player-card-portrait:has(> .player-status-logo):not(:has(.player-card-face)) > .player-card-team-badge {
  inset: 0; width: 100%; height: 100%; border: 0; box-shadow: none;
}
@media (max-width: 640px), (max-width: 950px) and (max-height: 500px), (max-device-width: 640px) {
  .m-pc-shot { position: relative; overflow: visible; }
  .m-pc-shot > .m-pc-shot-img { border: 0; border-radius: 50%; }
  .m-pc-shot > .m-pc-shot-team.player-status-logo {
    display: flex; align-items: center; justify-content: center; position: absolute; right: -2px; bottom: -2px; z-index: 2;
    width: 17px; height: 17px; border: 2px solid var(--control-line, var(--line));
    background: var(--surface-raised, var(--panel)); box-shadow: none;
  }
  .m-pc-shot > .m-pc-shot-team.player-status-logo img { width: 12px; height: 12px; }
  .m-pc-shot > .m-pc-shot-team.player-status-logo .logo-fallback { font-size: 8px; }
  .m-pc-shot:not(:has(.m-pc-shot-img)) > .m-pc-shot-team.player-status-logo {
    inset: 0; width: 100%; height: 100%; border: 0;
  }
  .m-pc-shot:not(:has(.m-pc-shot-img)) > .m-pc-shot-team.player-status-logo img { width: 30px; height: 30px; }
  .m-pc-shot:not(:has(.m-pc-shot-img)) > .m-pc-shot-team.player-status-logo .logo-fallback { font-size: 11px; }
}

/* Team names filter the grid; only the weather text opens its forecast. */
.team-name-filter { display: inline-flex; align-items: center; padding: 0; margin: 0; border: 0; border-radius: 2px; background: transparent; color: inherit; font: inherit; line-height: inherit; cursor: pointer; }
.team-name-filter:hover, .team-name-filter.is-selected { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.team-name-filter:focus-visible, .weather-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.weather-trigger { display: inline-flex; align-items: center; gap: 4px; appearance: none; border: 0; border-radius: 2px; padding: 0; background: transparent; font: inherit; cursor: pointer; }
.weather-trigger:hover .weather-label { text-decoration: underline; text-underline-offset: 3px; }
.game-card-top .weather-trigger { font-size: 10px; }
.team-grid-clear { flex: 0 0 auto; padding: 5px 8px; border: 1px solid var(--line); border-radius: 5px; background: transparent; color: var(--accent); font: inherit; font-size: 11px; cursor: pointer; }
.team-grid-clear[hidden] { display: none !important; }
@media (max-width: 640px), (max-width: 950px) and (max-height: 500px), (max-device-width: 640px) {
  .m-game-team-entry .team-name-filter { min-height: 44px; }
  .m-game-team-entry > b { align-items: center; }
  .m-gchip .m-gchip-status { display: block; margin-top: 6px; font-size: 10px; color: var(--muted); }
  .m-gchip .weather-trigger, .m-game .weather-trigger { min-height: 32px; font-size: 10px; color: var(--muted); }
  .m-gchip .weather-trigger { display: flex; align-items: center; gap: 4px; }
  .m-game-meta { display: block; font-size: 10px; color: var(--muted); }
}

.game-card-context { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; min-width: 0; }

/* Approved Compact B: player-only presentation; section dialogs keep their layout. */
#playerDetailDialog[data-detail-section="players"] { width:min(736px,calc(100% - 24px)); max-width:736px; }
#playerDetailDialog[data-detail-section="players"] .player-detail-dialog-bar { position:absolute; top:0; right:0; z-index:5; padding:22px 16px; border:0; }
#playerDetailDialog[data-detail-section="players"] .player-detail-dialog-bar>span { display:none; }
#playerDetailDialog[data-detail-section="players"] #playerDetailClose { width:32px; height:32px; min-height:32px; padding:0; overflow:hidden; font-size:0; }
#playerDetailDialog[data-detail-section="players"] #playerDetailClose::after { content:"×"; font-size:20px; }
#playerDetailDialog[data-detail-section="players"] .player-detail-content { scrollbar-gutter:auto; }
#selectedPanel.player-detail-panel { --pd-bg:var(--surface-base,var(--band)); --pd-panel:var(--surface-raised,var(--panel)); background:var(--pd-bg); color:var(--text); }
#selectedPanel.player-detail-panel * { box-sizing:border-box; }
#selectedPanel.player-detail-panel button { background:transparent; color:var(--text); border:1px solid var(--line); border-radius:5px; box-shadow:none; font:inherit; min-height:30px; height:auto; cursor:pointer; }
#selectedPanel.player-detail-panel button:hover:not(:disabled) { background:transparent; border-color:var(--accent); }
#selectedPanel.player-detail-panel button:disabled { opacity:.45; cursor:not-allowed; }
#selectedPanel.player-detail-panel button:focus-visible,
#selectedPanel.player-detail-panel input:focus-visible,
#selectedPanel.player-detail-panel summary:focus-visible { outline:1px solid var(--accent); outline-offset:2px; }
#selectedPanel.player-detail-panel .panel-head { display:flex; align-items:center; gap:12px; padding:18px 62px 18px 16px; min-height:92px; border-bottom:1px solid var(--line); }
#selectedPanel.player-detail-panel .player-detail-portrait { position:relative; display:block; flex:0 0 48px; width:48px; height:48px; }
#selectedPanel.player-detail-panel .player-detail-portrait>.large-logo { display:block; width:48px; height:48px; max-width:none; max-height:none; object-fit:cover; border:1px solid var(--line-strong); border-radius:50%; background:var(--pd-panel); }
#selectedPanel.player-detail-panel .player-detail-team { position:absolute; right:-3px; bottom:-2px; width:19px; height:19px; padding:2px; border:1px solid var(--line); border-radius:50%; background:var(--pd-bg); object-fit:contain; }
#selectedPanel.player-detail-panel .player-detail-heading { min-width:0; flex:1; }
#selectedPanel.player-detail-panel .panel-head .eyebrow { display:block; font-size:9px; letter-spacing:1px; margin:0 0 4px; color:var(--soft); }
#selectedPanel.player-detail-panel .panel-head h2 { font-size:20px; line-height:1.2; margin:0; overflow-wrap:anywhere; }
#selectedPanel.player-detail-panel .panel-head p { display:flex; flex-wrap:wrap; gap:4px 12px; font-size:10px; margin:5px 0 0; color:var(--soft); }
#selectedPanel.player-detail-panel .state-chip { margin:0; flex-shrink:0; font-size:10px; }
#selectedPanel.player-detail-panel .selected-body { display:flex; flex-direction:column; align-items:stretch; gap:14px; padding:14px 16px; }
#selectedPanel.player-detail-panel .metric-strip { background:transparent; border:0; padding:0; border-radius:0; min-width:0; }
#selectedPanel.player-detail-panel .sel-primary-metrics { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:0; overflow:visible; }
#selectedPanel.player-detail-panel .sel-primary-metrics .metric { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:5px; padding:0 10px; min-height:44px; border:0; border-left:1px solid var(--line); border-radius:0; background:transparent; min-width:0; }
#selectedPanel.player-detail-panel .sel-primary-metrics .metric:first-child { padding-left:0; border-left:0; }
#selectedPanel.player-detail-panel .metric span { font-size:10px; color:var(--soft); text-transform:none; letter-spacing:0; }
#selectedPanel.player-detail-panel .sel-primary-metrics .metric b { font-size:20px; font-weight:600; line-height:1.1; }
#selectedPanel.player-detail-panel .player-detail-controls { display:grid; grid-template-columns:195px minmax(0,1fr); gap:10px; }
#selectedPanel.player-detail-panel .player-boost-box,
#selectedPanel.player-detail-panel .manual-box { grid-area:auto; display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; gap:10px; padding:12px; border:1px solid var(--line); border-radius:7px; background:var(--pd-panel); margin:0; min-width:0; }
#selectedPanel.player-detail-panel .player-boost-box>div:first-child,
#selectedPanel.player-detail-panel .player-detail-control-heading { display:flex; align-items:center; justify-content:space-between; gap:6px; }
#selectedPanel.player-detail-panel .player-boost-box .eyebrow,
#selectedPanel.player-detail-panel .manual-box .eyebrow { font-size:11px; color:var(--text); text-transform:none; letter-spacing:0; }
#selectedPanel.player-detail-panel .player-boost-box small,
#selectedPanel.player-detail-panel .player-detail-control-heading small { color:var(--soft); font-size:10px; }
#selectedPanel.player-detail-panel .player-boost-box p { margin:0; font-size:10px; line-height:1.5; color:var(--soft); }
#selectedPanel.player-detail-panel .detail-boost-ctl { display:grid; grid-template-columns:32px minmax(0,1fr) 32px; align-items:center; width:100%; min-width:0; }
#selectedPanel.player-detail-panel .detail-boost-ctl>button { height:32px; border-radius:5px; font-size:18px; }
#selectedPanel.player-detail-panel .detail-boost-ctl>.detail-boost-value { border-color:transparent; height:40px; }
#selectedPanel.player-detail-panel .detail-boost-value b { font-size:16px; line-height:1.2; }
#selectedPanel.player-detail-panel .player-detail-ranges { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
#selectedPanel.player-detail-panel .player-detail-range-field { min-width:0; }
#selectedPanel.player-detail-panel .player-detail-range-field>label { display:flex; align-items:center; justify-content:space-between; gap:5px; color:var(--soft); font-size:10px; text-transform:none; letter-spacing:0; }
#selectedPanel.player-detail-panel .player-detail-number { display:flex; align-items:center; gap:2px; border:1px solid var(--line); border-radius:5px; padding-right:7px; background:var(--pd-bg); }
#selectedPanel.player-detail-panel input[type="number"] { width:43px; height:28px; min-height:28px; min-width:0; padding:4px 2px 4px 7px; border:0; background:transparent; color:var(--text); font-size:11px; appearance:textfield; }
#selectedPanel.player-detail-panel input[type="number"]::-webkit-inner-spin-button { appearance:none; }
#selectedPanel.player-detail-panel .range-line { display:flex; margin:0; padding:0; height:18px; min-height:18px; }
#selectedPanel.player-detail-panel .range-line b { display:none; }
#selectedPanel.player-detail-panel input[type="range"] { appearance:none; width:100%; height:18px; min-height:18px; padding:0; margin:0; border:0; border-radius:0; background:transparent; cursor:pointer; }
#selectedPanel.player-detail-panel input[type="range"]::-webkit-slider-runnable-track { height:3px; border-radius:3px; background:linear-gradient(to right,var(--accent) 0 var(--range-pct,0%),var(--line) var(--range-pct,0%) 100%); }
#selectedPanel.player-detail-panel input[type="range"]::-webkit-slider-thumb { appearance:none; margin-top:-3px; width:9px; height:9px; border:1px solid var(--accent); border-radius:50%; background:var(--pd-bg); }
#selectedPanel.player-detail-panel input[type="range"]::-moz-range-track { height:3px; border-radius:3px; background:var(--line); }
#selectedPanel.player-detail-panel input[type="range"]::-moz-range-progress { height:3px; background:var(--accent); }
#selectedPanel.player-detail-panel input[type="range"]::-moz-range-thumb { width:7px; height:7px; border:1px solid var(--accent); border-radius:50%; background:var(--pd-bg); }
#selectedPanel.player-detail-panel .manual-box .small-action-row { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; margin:0; }
#selectedPanel.player-detail-panel .manual-box .small-action-row button { min-width:0; height:30px; padding:4px; font-size:10px; }
#selectedPanel.player-detail-panel .sel-gamelog { min-width:0; margin:0; padding:12px; border:1px solid var(--line); border-radius:7px; background:transparent; }
#selectedPanel.player-detail-panel .sel-gl-head { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; }
#selectedPanel.player-detail-panel .sel-gl-head .eyebrow { color:var(--text); text-transform:none; letter-spacing:0; font-size:11px; }
#selectedPanel.player-detail-panel .gl-tabs { display:flex; gap:4px; }
#selectedPanel.player-detail-panel .gl-tab { min-height:28px; padding:4px 8px; font-size:10px; }
#selectedPanel.player-detail-panel .gl-tab.on { border-color:var(--accent); color:var(--text); }
#selectedPanel.player-detail-panel .gl-compact-grid { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:16px; margin-top:10px; align-items:center; }
#selectedPanel.player-detail-panel .gl-chart-wrap { margin:0; min-width:0; padding:0; border:0; background:transparent; }
#selectedPanel.player-detail-panel .gl-chart { display:block; width:100%; height:auto; max-height:165px; }
#selectedPanel.player-detail-panel .gl-compact-line { stroke:var(--accent); stroke-width:1.5; stroke-linejoin:round; stroke-linecap:round; fill:none; }
#selectedPanel.player-detail-panel .gl-compact-point { stroke:var(--accent); stroke-width:1.2; fill:var(--pd-bg); }
#selectedPanel.player-detail-panel .gl-zero,
#selectedPanel.player-detail-panel .gl-grid { stroke:var(--line); stroke-width:1; }
#selectedPanel.player-detail-panel .gl-xlab,
#selectedPanel.player-detail-panel .gl-ylab { fill:var(--soft); font-size:9px; }
#selectedPanel.player-detail-panel .gl-summary-wrap { min-width:0; overflow:auto; }
#selectedPanel.player-detail-panel .gl-summary-wrap .gl-table { min-width:0; width:100%; font-size:10px; }
#selectedPanel.player-detail-panel .gl-table th { padding:5px; color:var(--soft); font-size:9px; font-weight:500; }
#selectedPanel.player-detail-panel .gl-table td { padding:5px; font-size:10px; }
#selectedPanel.player-detail-panel .gl-table-wrap { margin-top:8px; max-height:240px; overflow:auto; }
#selectedPanel.player-detail-panel summary { display:flex; align-items:center; justify-content:space-between; list-style:none; cursor:pointer; min-height:30px; font-size:10px; color:var(--soft); padding:7px 0; }
#selectedPanel.player-detail-panel summary::-webkit-details-marker { display:none; }
#selectedPanel.player-detail-panel summary::after { content:"⌄"; font-size:16px; line-height:1; }
#selectedPanel.player-detail-panel details[open]>summary::after { transform:rotate(180deg); }
#selectedPanel.player-detail-panel .player-detail-more { border-top:1px solid var(--line); min-width:0; }
#selectedPanel.player-detail-panel .sel-sim-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:6px; }
#selectedPanel.player-detail-panel .sel-sim-metrics .metric { min-height:50px; padding:8px; border:1px solid var(--line); border-radius:5px; background:var(--pd-panel); }
#selectedPanel.player-detail-panel .sel-sim-metrics .metric b { font-size:14px; }
#selectedPanel.player-detail-panel .sel-sim-metrics.detail-stats-four { grid-template-columns:repeat(2,minmax(0,1fr)); }
#selectedPanel.player-detail-panel .stack-box { margin-top:10px; padding:0; border:0; background:transparent; }
#selectedPanel.player-detail-panel .stack-box .eyebrow { font-size:10px; }
#selectedPanel.player-detail-panel .impact-line { font-size:11px; }
#selectedPanel.player-detail-panel .panel-head .player-detail-ids { display:block; color:var(--muted); font-size:10px; line-height:1.35; margin:4px 0 0; overflow-wrap:anywhere; }
#selectedPanel.player-detail-panel .player-detail-recent { display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 14px; padding:0; margin:0; border:0; background:transparent; font-size:10px; color:var(--soft); }
#selectedPanel.player-detail-panel .player-detail-recent b { color:var(--text); margin-left:6px; font-weight:500; }
#selectedPanel.player-detail-panel .player-detail-footer { position:sticky; bottom:0; z-index:2; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 16px; background:var(--pd-bg); border-top:1px solid var(--line); }
#selectedPanel.player-detail-panel .player-detail-footer button { width:auto; margin:0; padding:6px 12px; font-size:11px; }
#selectedPanel.player-detail-panel .player-detail-footer .player-detail-done { border-color:var(--accent); display:flex; align-items:center; gap:14px; }
@media (max-width:640px), (max-width:950px) and (max-height:500px), (max-device-width:640px) {
  #selectedPanel.player-detail-panel { padding-bottom:0; background:var(--pd-bg); }
  #selectedPanel.player-detail-panel .panel-head { display:grid; grid-template-columns:48px minmax(0,1fr); gap:8px; padding:10px 58px 12px 12px; }
  #selectedPanel.player-detail-panel .panel-head h2 { font-size:18px; }
  #selectedPanel.player-detail-panel .state-chip { grid-column:2; justify-self:start; margin:0; }
  #selectedPanel.player-detail-panel .selected-body { padding:12px; gap:12px; }
  #selectedPanel.player-detail-panel .sel-panel-close { width:44px; height:44px; min-height:44px; right:8px; top:14px; background:transparent; }
  #selectedPanel.player-detail-panel .sel-primary-metrics { grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px 0; }
  #selectedPanel.player-detail-panel .sel-primary-metrics .metric:nth-child(4) { border-left:0; padding-left:0; }
  #selectedPanel.player-detail-panel .player-detail-controls { grid-template-columns:minmax(0,1fr); }
  #selectedPanel.player-detail-panel .player-boost-box { display:grid; grid-template-columns:minmax(0,1fr) 150px; align-items:center; gap:6px 10px; }
  #selectedPanel.player-detail-panel .player-boost-box>div:first-child { display:block; }
  #selectedPanel.player-detail-panel .player-boost-box small { display:block; margin-top:4px; }
  #selectedPanel.player-detail-panel .player-boost-box p { grid-column:1 / -1; }
  #selectedPanel.player-detail-panel .detail-boost-ctl { grid-template-columns:44px minmax(0,1fr) 44px; }
  #selectedPanel.player-detail-panel .detail-boost-ctl>button { height:44px; min-height:44px; }
  #selectedPanel.player-detail-panel input[type="number"] { min-height:44px; width:47px; }
  #selectedPanel.player-detail-panel input[type="range"],
  #selectedPanel.player-detail-panel .range-line { min-height:44px; height:44px; }
  #selectedPanel.player-detail-panel .manual-box .small-action-row { grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
  #selectedPanel.player-detail-panel .manual-box .small-action-row button,
  #selectedPanel.player-detail-panel .player-detail-footer button,
  #selectedPanel.player-detail-panel .gl-tab,
  #selectedPanel.player-detail-panel summary { min-height:44px; }
  #selectedPanel.player-detail-panel .gl-compact-grid { grid-template-columns:minmax(0,1fr); gap:10px; }
  #selectedPanel.player-detail-panel .gl-chart { max-height:150px; }
  #selectedPanel.player-detail-panel .gl-summary-wrap .gl-table { font-size:11px; }
  #selectedPanel.player-detail-panel .sel-sim-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #selectedPanel.player-detail-panel .sel-player-nav { display:flex; align-items:center; justify-content:space-between; gap:6px; }
  #selectedPanel.player-detail-panel .sel-player-nav button { min-height:44px; font-size:10px; padding:5px 8px; }
  #selectedPanel.player-detail-panel .sel-player-nav span { font-size:10px; }
  #selectedPanel.player-detail-panel .player-detail-footer { padding:8px 12px; }
}

#selectedPanel.player-detail-panel .detail-use-action { display:inline-flex; align-items:center; gap:7px; }
#selectedPanel.player-detail-panel .detail-use-action svg { width:15px; height:15px; flex-shrink:0; }
#selectedPanel.player-detail-panel .gl-empty-label { fill:var(--soft); font-size:11px; }
#selectedPanel.player-detail-panel .gl-summary-wrap { margin-top:0; }

/* Keep the existing team fallback centered when a provider headshot fails. */
#selectedPanel.player-detail-panel .player-detail-portrait>.player-shot { display:grid; place-items:center; }
#selectedPanel.player-detail-panel .player-detail-portrait>.player-shot>.team-logo { width:32px; height:32px; max-width:32px; max-height:32px; object-fit:contain; }


/* Approved last-four history: chronological scores without graphs or averages. */
.player-card-history { min-width:0; display:grid; gap:6px; font-variant-numeric:tabular-nums; }
.card-history-label { display:flex; align-items:baseline; gap:5px; color:var(--soft); font-size:11px; line-height:1.2; white-space:nowrap; }
.card-history-scores { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; padding-top:3px; }
.card-history-score { min-width:0; color:var(--text); font-size:12px; line-height:1.4; white-space:nowrap; }
.card-history-score[data-score-known="false"] { color:var(--muted); }
.card-history-empty { display:flex; align-items:center; min-height:20px; font-size:11px; line-height:1.2; color:var(--muted); }
.desktop-player-card.excluded .player-card-history,.m-pcard.off .player-card-history { opacity:.5; }
@media(min-width:951px), (min-width:641px) and (min-height:501px) {
  .desktop-player-card.has-player-history { grid-template-columns:minmax(185px,200px) repeat(5,minmax(44px,62px)) minmax(0,1fr); row-gap:2px; min-height:88px; contain-intrinsic-size:auto 88px; }
  .desktop-player-card.has-player-history.has-actual { grid-template-columns:minmax(185px,200px) repeat(6,minmax(42px,56px)) minmax(0,1fr); }
}
@container(max-width:620px) {
  .desktop-player-card.has-player-history { grid-template-columns:minmax(150px,200px) repeat(5,minmax(46px,56px)) minmax(0,1fr); }
  .desktop-player-card.has-player-history.has-actual { grid-template-columns:minmax(140px,200px) repeat(6,minmax(42px,52px)) minmax(0,1fr); }
}
@media(max-width:640px), (max-width:950px) and (max-height:500px), (max-device-width:640px) {
  .m-pcard.has-player-history { grid-template-columns:24px 32px minmax(0,1fr); gap:7px; }
  .m-pcard.has-player-history>.m-pc-shot { width:32px; height:32px; }
  .m-pcard.has-player-history>.m-pc-id { grid-column:3; min-width:0; }
  .m-pcard.has-player-history .m-pc-id b { white-space:normal; overflow-wrap:anywhere; }
  .m-pcard.has-player-history>.player-card-history { grid-column:1 / -1; border-top:1px solid var(--line); padding-top:7px; }
  .m-pcard.has-player-history>.m-pc-stats { grid-column:1 / -1; justify-content:space-between; border-top:1px solid var(--line); padding-top:6px; }
}

/* Official team batting cards, directly below Games on both picker surfaces. */
.slate-counts > span { padding: 7px 8px; gap: 5px; }
.slate-counts .slate-confirmation, .m-slate-counts .slate-confirmation {
  border-top: 1px solid var(--line-soft); margin-top: 2px; padding-top: 6px;
  width: 100%; text-align: center; font-size: 9px; line-height: 1.15;
  text-transform: none; white-space: nowrap;
}
.slate-counts .slate-confirmation.partial, .m-slate-counts .slate-confirmation.partial { color: #ffd166; }
.slate-counts .slate-confirmation.complete, .m-slate-counts .slate-confirmation.complete { color: #39d98a; }
.slate-counts .slate-confirmation.unknown, .m-slate-counts .slate-confirmation.unknown { color: var(--muted); }

/* Optional NFL roster limits; whole lineup, one independent switch per position. */
.nfl-team-limits { display:flex; flex-wrap:wrap; gap:8px; grid-column:1 / -1; }
.nfl-team-limits[hidden] { display:none; }
.nfl-team-limits button { flex:1 1 140px; padding:9px 10px; font:inherit; font-size:12px; border:1px solid var(--border, #344957); border-radius:5px; background:var(--panel, #0b1117); color:var(--text, #dce8f1); cursor:pointer; }
.nfl-team-limits button[aria-pressed="true"] { border-color:#75caff; background:#102a3c; color:#9bddff; }
.nfl-team-limits button:focus-visible { outline:2px solid #9bddff; outline-offset:2px; }
.cc-modal .nfl-team-limits { margin-top:16px; }

/* Balance two player cards and the contest panel;42px accounts for their gutters and player-grid padding. Manual widths override this default. */
.desktop-palette .combined-workspace { container: combined-workspace / inline-size; min-width: 0; }
.desktop-palette .combined-workspace-columns { --desktop-workspace-height: clamp(520px, calc(100vh - 320px), 1400px); display: grid; position: relative; grid-template-columns: minmax(520px, 1fr) var(--desktop-panel-width, clamp(320px, calc((100cqw - 42px) / 3), calc(100cqw - 532px))); align-items: start; gap: 12px; }
.desktop-palette .combined-workspace-columns > section { min-width: 0; margin: 0; }
.desktop-palette .combined-workspace-columns > .player-grid-shell { height: var(--desktop-workspace-height); }
.desktop-palette .combined-lineup-panel > .panel-head { padding: 12px; }
.desktop-palette .combined-lineup-panel h2 { font-size: 17px; }
.desktop-palette .combined-lineup-panel .lineup-title-row { flex-wrap: wrap; gap: 9px; }
.desktop-palette .combined-lineup-panel .lineup-title-actions { flex-wrap: wrap; }
.desktop-palette .combined-lineup-panel .lineup-title-actions button { min-width: 0; font-size: 11px; }
.desktop-palette .combined-lineup-panel .desktop-compact-lineup-grid { grid-template-columns: minmax(0, 1fr); }
.desktop-palette .combined-lineup-panel .desktop-compact-lineup-head { flex-wrap: wrap; gap: 9px; }
.desktop-palette .combined-lineup-panel .desktop-compact-lineup-tools { flex-wrap: wrap; gap: 8px; }
.desktop-palette .combined-lineup-panel .desktop-compact-lineup-tools-actions { flex-wrap: wrap; justify-content: flex-start; }
.desktop-palette .combined-lineup-panel .desktop-compact-lineup-tools-actions > span { display: none; }
.desktop-palette .combined-lineup-panel .desktop-compact-lineup-row { grid-template-columns: 30px minmax(0,1fr) 58px 36px; gap: 6px; }
.desktop-palette .combined-lineup-panel .desktop-compact-lineup-roster.has-actual .desktop-compact-lineup-row { grid-template-columns: 30px minmax(0,1fr) 58px 36px 42px; }
.desktop-palette .combined-lineup-panel .desktop-compact-lineup-name { white-space: normal; overflow-wrap: anywhere; }
.desktop-palette .combined-lineup-panel .desktop-compact-lineup-context { white-space: normal; overflow-wrap: anywhere; }
.desktop-palette .combined-lineup-panel #contestPlanner { container: combined-contests / inline-size; }
.desktop-palette .combined-lineup-panel #contestPlanner .ccmd-navigator { grid-template-columns: minmax(0,1fr); }
.desktop-palette .combined-lineup-panel #contestPlanner .ccmd-grid,
.desktop-palette .combined-lineup-panel #contestPlanner .ccmd-portfolio-totals { grid-template-columns: minmax(0,1fr); }
.desktop-palette .combined-lineup-panel #contestPlanner .ccmd-grid > section { grid-column: 1; }
.desktop-palette .combined-lineup-panel #contestPlanner .ccmd-contest-pick { grid-template-columns: 22px minmax(0,1fr) auto; gap: 5px; }
.desktop-palette .combined-lineup-panel #contestPlanner .ccmd-row-actual,
.desktop-palette .combined-lineup-panel #contestPlanner .ccmd-row-roi,
.desktop-palette .combined-lineup-panel #contestPlanner .ccmd-row-state { grid-column: auto; }
.desktop-palette .combined-lineup-panel #contestPlanner .ccmd-kpi-row { grid-template-columns: repeat(2,minmax(0,1fr)); }
.desktop-palette .combined-lineup-panel #contestPlanner .ccmd-run-comparison-brief-row { display: flex; flex-wrap: wrap; }
.desktop-palette .combined-lineup-panel #contestPlanner .ccmd-run-comparison-brief-row > * { flex: 1 1 75px; min-width: 0; }
.desktop-palette .combined-lineup-panel #contestPlanner .ccmd-run-comparison-brief-row > p { flex-basis: 100%; }
.desktop-palette .combined-lineup-panel .pool-page-toolbar { flex-wrap: wrap; }
.desktop-palette #lineupRowCount { display: block; margin-top: 5px; white-space: normal; }
.desktop-palette #desktopLineupInspectionStatus { padding: 7px 10px; color: var(--control-accent); font-size: 12px; }
.desktop-palette .desktop-lineup-role { display: inline-block; width: fit-content; padding: 1px 5px; margin-top: 3px; border: 1px solid var(--control-accent); border-radius: 4px; color: var(--control-accent); font-size: 11px; }
.desktop-palette .desktop-player-card.lineup-inspected-player { box-shadow: inset 3px 0 var(--control-accent); }
.desktop-palette .desktop-compact-lineup-card.lineup-inspected { outline: 1px solid var(--control-accent); outline-offset: -1px; }
.desktop-palette .desktop-lineup-inspect,
.desktop-palette .desktop-lineup-expand { padding: 4px 6px; min-height: 28px; background: transparent; border: 1px solid var(--line); color: inherit; border-radius: 4px; }
.desktop-palette .desktop-lineup-expand { margin-left: auto; border-color:transparent; box-shadow:none; }
.desktop-palette .desktop-lineup-expand:hover { border-color:transparent; background:transparent; }
.desktop-palette .desktop-lineup-expand:focus-visible { outline:1px solid var(--control-accent); outline-offset:2px; }
@container combined-workspace (max-width: 891px) {
  .desktop-palette .combined-workspace-columns { grid-template-columns: minmax(0,1fr); }
}

.desktop-palette .combined-lineup-panel #contestPlanner .ccmd-contest-list { grid-template-columns: minmax(0, 1fr); }
/* Desktop compact contest browser. Existing phone surfaces keep their markup. */
.desktop-palette .combined-lineup-panel > .panel-head { border-bottom:0; }
.desktop-palette .combined-lineup-panel .lineup-title-row { gap:8px; }
.desktop-palette .combined-lineup-panel .lineup-title-actions { margin-left:auto; gap:6px; }
.desktop-palette .combined-lineup-panel #lineupRowCount { display:none; }
.desktop-palette .combined-lineup-summary { display:flex; gap:5px 14px; flex-wrap:wrap; padding:0 12px 12px; font-size:12px; color:var(--foreground-muted); }
.desktop-palette .combined-lineup-tabs { display:flex; gap:18px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:0 12px; }
.desktop-palette .combined-lineup-tabs button { border:0; border-bottom:2px solid transparent; background:transparent; border-radius:0; color:var(--foreground-muted); padding:6px 0; font-size:var(--workspace-control-size); line-height:20px; }
.desktop-palette .combined-lineup-tabs button[aria-selected="true"] { color:var(--foreground); border-bottom-color:var(--control-accent); }
.desktop-palette .combined-lineup-tabs button span { font-size:inherit; margin-left:5px; }
.desktop-palette .combined-lineup-panel #contestPlanner { padding:0; }
.desktop-palette .combined-contest-row { border-bottom:1px solid var(--line); min-width:0; }
.desktop-palette .combined-contest-heading { display:flex; align-items:center; gap:4px; padding:7px 9px; }
.desktop-palette .combined-contest-pick { display:grid; grid-template-columns:minmax(0,1fr); column-gap:6px; row-gap:4px; text-align:left; flex:1; min-width:0; width:100%; height:auto; white-space:normal; border:0; background:transparent; border-radius:0; color:inherit; padding:5px 3px; }
.desktop-palette .combined-contest-toggle { flex:0 0 22px; width:22px; min-height:30px; padding:3px; border:0; background:transparent; color:inherit; }
.desktop-palette :is(.combined-contest-toggle, .combined-contest-pick):focus-visible { outline:1px solid var(--control-accent); outline-offset:1px; }
.desktop-palette .combined-contest-copy { min-width:0; }
.desktop-palette .combined-contest-copy b { display:block; font-size:var(--workspace-name-size, 13px); white-space:normal; overflow-wrap:anywhere; }
.desktop-palette .combined-contest-copy small { display:block; font-size:11px; color:var(--foreground-muted); margin-top:3px; }
.desktop-palette .combined-contest-status { grid-column:1; font-size:11px; }
.desktop-palette .combined-contest-tools { display:flex; align-self:flex-start; gap:3px; }
.desktop-palette .combined-contest-tools button { background:transparent; padding:4px; border:0; color:inherit; min-width:25px; }
.desktop-palette .combined-contest-row.active > .combined-contest-heading { background:var(--surface-selected); box-shadow:inset 2px 0 var(--control-accent); }
.desktop-palette .combined-entry-body { padding:0 8px 10px; }
.desktop-palette .combined-entry-body #lineupBoard { border:0; padding:0; }
.desktop-palette .combined-empty,.desktop-palette .combined-pool-note p,.desktop-palette .combined-pool-error { margin:0; padding:10px 12px; font-size:12px; }
.desktop-palette .combined-entry-toolbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; padding:10px 0; }
.desktop-palette .combined-entry-toolbar .pool-sort { display:flex; align-items:center; flex-wrap:wrap; gap:5px; }
.desktop-palette .combined-entry-toolbar select { max-width:180px; }
.desktop-palette .combined-pool-toolbar { display:block; padding:12px; }
.desktop-palette .combined-pool-controls { display:flex; flex-wrap:wrap; align-items:end; gap:10px; }
.desktop-palette .combined-pool-controls > label { flex:1 1 190px; min-width:0; }
.desktop-palette .combined-pool-controls .pool-sort { display:flex; flex-wrap:wrap; gap:5px; }
.desktop-palette .combined-pool-controls .pool-sort select { flex:1; min-width:0; max-width:100%; width:auto; }
.desktop-palette .combined-pool-range { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; margin:12px 0; font-size:12px; }
.desktop-palette .combined-pool-range small { display:block; }
.desktop-palette .combined-pool-range button { font-size:11px; }
.desktop-palette .combined-pool-paging { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:7px; }
.desktop-palette .combined-pool-paging button { padding:5px 9px; min-width:28px; }
.desktop-palette .combined-pool-paging span { font-size:12px; }
.desktop-palette .combined-lineup-panel .desktop-compact-lineup-shots { justify-content:flex-start; }
.desktop-palette .combined-lineup-panel .desktop-compact-lineup-shot { max-width:54px; }
@container combined-contests (min-width:530px) {
  .desktop-palette .combined-contest-pick { grid-template-columns:minmax(0,1fr) auto; }
  .desktop-palette .combined-contest-status { grid-column:auto; align-self:center; }
}

/* Folding a tall adjacent contest changes the grid row height. Automatic
   paint containment can leave visible player contents blank after that reflow.
   Keep phone and full-width grid virtualization; paint the combined grid normally. */
.desktop-palette .combined-workspace .desktop-player-card { content-visibility:visible; }

/* Fixed right frame: pane content scrolls locally, never resizes Players. */
.desktop-palette .desktop-workspace-panel { min-width:0; height:clamp(420px,70dvh,900px); display:flex; flex-direction:column; border:1px solid var(--line); border-radius:6px; overflow:hidden; }
.desktop-palette .desktop-workspace-tabs { display:flex; flex-wrap:nowrap; flex-shrink:0; height:45px; align-items:center; gap:4px; padding:0 7px; overflow-x:auto; overflow-y:hidden; scrollbar-width:thin; }
.desktop-palette .desktop-workspace-tabs > .mini-tab { flex:none; white-space:nowrap; padding:6px; font-size:var(--workspace-control-size); line-height:20px; }
.desktop-palette .desktop-workspace-tabs > .mini-tab::before { display:none; }
.desktop-palette .desktop-workspace-tools { display:flex; justify-content:space-between; align-items:center; flex-shrink:0; gap:8px; height:35px; padding:0 8px; border-bottom:1px solid var(--line); }
.desktop-palette .desktop-workspace-navigation > .reset-grids-btn { flex:none; margin:0; height:34px; min-height:34px; padding:6px 7px; font-size:var(--workspace-control-size); line-height:20px; white-space:nowrap; }
.desktop-palette .desktop-workspace-content { flex:1; min-height:0; overflow:hidden; }
.desktop-palette .desktop-workspace-content > [data-main-panel] { box-sizing:border-box; width:100%; height:100%; min-width:0; margin:0; border:0; border-radius:0; overflow:auto; overscroll-behavior:contain; scrollbar-gutter:stable; }
.desktop-palette .desktop-workspace-content .section-board { min-width:0; overflow-x:auto; }
.desktop-palette .desktop-workspace-content :is(.team-stack-card-grid,.game-board-card-grid,.stack-shape-card-grid) { grid-template-columns:minmax(0,1fr); }
.desktop-palette .desktop-workspace-content :is(.rules-group-head,.rules-limit-row,.pf-row) { flex-wrap:wrap; }
.desktop-palette .desktop-workspace-content .rules-limit { min-width:0; }
.desktop-palette .desktop-workspace-content :is(.rules-hint,.rules-intro) { overflow-wrap:anywhere; }
.desktop-palette .desktop-workspace-content .panel-head { padding:12px; }
.desktop-palette .desktop-player-card-toolbar > #rowCount { white-space:nowrap; font-size:11px; }

:root.desktop-palette .desktop-workspace-tabs > .mini-tab[aria-selected="true"] { background:var(--surface-selected); border-color:var(--control-accent); }
.desktop-palette .desktop-workspace-content :is(.team-stack-card-identity,.game-board-card-matchup,.stack-shape-card-identity) { grid-column:1 / -1; min-width:0; }
.desktop-palette .desktop-workspace-content :is(.team-stack-card-metric,.game-board-card-metric,.stack-shape-card-metric) { min-width:0; }
/* Content-sized section cards reflow with their existing board containers. */
.desktop-palette .desktop-workspace-content :is(.team-stack-card-grid,.game-board-card-grid,.stack-shape-card-grid) {
  gap: 6px;
  align-content: start;
  grid-auto-rows: max-content;
}
.desktop-palette .desktop-workspace-content :is(.team-stack-card,.game-board-card,.stack-shape-card,.stack-shape-card.has-actual) {
  min-height: 0;
  content-visibility: visible;
  contain-intrinsic-size: none;
  padding: 8px;
  gap: 6px;
  border-radius: 7px;
}
.desktop-palette .desktop-workspace-content .team-stack-card { grid-template-columns: repeat(5,minmax(0,1fr)); }
.desktop-palette .desktop-workspace-content :is(.game-board-card,.stack-shape-card) { grid-template-columns: repeat(4,minmax(0,1fr)); }
.desktop-palette .desktop-workspace-content .stack-shape-card.has-actual { grid-template-columns: repeat(3,minmax(0,1fr)); }
.desktop-palette .desktop-workspace-content :is(.team-stack-card-metric,.game-board-card-metric,.stack-shape-card-metric) {
  gap: 4px;
}
.desktop-palette .desktop-workspace-content .team-stack-card-identity { grid-template-columns: 28px minmax(0,1fr); gap: 7px; }
.desktop-palette .desktop-workspace-content .team-stack-card-logo { width: 28px; height: 28px; }
.desktop-palette .desktop-workspace-content .team-stack-card-logo img { width: 24px; height: 24px; }
.desktop-palette .desktop-workspace-content .game-board-card-team { grid-template-columns: 28px minmax(0,1fr); gap: 5px; }
.desktop-palette .desktop-workspace-content .game-board-card-logo { width: 28px; height: 28px; }
.desktop-palette .desktop-workspace-content .game-board-card-logo img { width: 24px; height: 24px; }
.desktop-palette .desktop-workspace-content .stack-shape-card-identity { gap: 7px; }
.desktop-palette .desktop-workspace-content .stack-shape-glyph > span { width: 26px; height: 26px; font-size: 12px; border-radius: 5px; }
@container (min-width: 500px) {
  .desktop-palette .desktop-workspace-content .team-stack-card { grid-template-columns: minmax(140px,1.5fr) repeat(5,minmax(0,1fr)); }
  .desktop-palette .desktop-workspace-content .team-stack-card-identity { grid-column: auto; }
  .desktop-palette .desktop-workspace-content .stack-shape-card.has-actual { grid-template-columns: repeat(6,minmax(0,1fr)); }
}
@container (min-width: 640px) {
  .desktop-palette .desktop-workspace-content .game-board-card { grid-template-columns: minmax(260px,2fr) repeat(4,minmax(0,1fr)); }
  .desktop-palette .desktop-workspace-content .game-board-card-matchup { grid-column: auto; }
  .desktop-palette .desktop-workspace-content .stack-shape-card { grid-template-columns: minmax(190px,2fr) repeat(4,minmax(0,1fr)); }
  .desktop-palette .desktop-workspace-content .stack-shape-card.has-actual { grid-template-columns: minmax(190px,2fr) repeat(6,minmax(0,1fr)); }
  .desktop-palette .desktop-workspace-content .stack-shape-card-identity { grid-column: auto; }
}


/* Divider occupies the existing column gap, so the automatic default is unchanged. */
.desktop-workspace-divider { display:none; }
.desktop-palette .desktop-workspace-divider:not([hidden]) { display:block; position:absolute; z-index:3; top:0; right:var(--desktop-panel-width, clamp(320px, calc((100cqw - 42px) / 3), calc(100cqw - 532px))); width:12px; height:clamp(420px,70dvh,900px); cursor:col-resize; touch-action:none; outline:none; }
.desktop-palette .desktop-workspace-divider::before { content:""; position:absolute; top:0; bottom:0; left:5px; width:2px; background:var(--line); border-radius:2px; }
.desktop-palette .desktop-workspace-divider:is(:hover,:focus-visible)::before,
.desktop-palette.workspace-resizing .desktop-workspace-divider::before { background:var(--control-accent); width:3px; }
.workspace-resizing, .workspace-resizing * { cursor:col-resize !important; user-select:none !important; }
@container combined-workspace (max-width: 891px) {
  .desktop-palette .desktop-workspace-divider:not([hidden]) { display:none; }
}

/* Persistent build header; the same complete controls return to their phone anchor. */
.desktop-palette { --workspace-text-size: 12px; --workspace-name-size: var(--workspace-text-size); --workspace-control-size: var(--workspace-text-size); }
.desktop-palette .desktop-workspace-panel { container: right-workspace / inline-size; }
/* Both side-by-side panes and their drag divider share Players' existing height. */
@container combined-workspace (min-width: 892px) {
  .desktop-palette .desktop-workspace-panel,
  .desktop-palette .desktop-workspace-divider:not([hidden]) { height: var(--desktop-workspace-height); }
}
.desktop-palette .desktop-workspace-header { display:grid; grid-template-columns:minmax(0,1fr) auto; flex:none; min-width:0; border-bottom:1px solid var(--line); }
.desktop-palette .desktop-workspace-header > .desktop-workspace-navigation { grid-column:1; grid-row:1; display:flex; align-items:center; gap:4px; min-width:0; flex-wrap:wrap; min-height:45px; padding:6px 7px; }
.desktop-palette .desktop-workspace-navigation > .desktop-workspace-tabs { height:auto; padding:0; flex-wrap:wrap; max-width:100%; }
.desktop-palette #desktopBuildHost,
.desktop-palette #desktopBuildHost > .filter-band:not([hidden]),
.desktop-palette #desktopBuildHost .compact-build-controls,
.desktop-palette #desktopBuildHost .compact-run-controls { display:contents; }
.desktop-palette #desktopBuildHost .inline-build-actions { grid-column:2; grid-row:1; justify-self:end; display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; margin:0; padding:5px 8px; min-width:0; max-width:230px; }
.desktop-palette #desktopBuildHost .inline-build-actions > button { min-width:0; min-height:32px; height:32px; padding:0 10px; font-size:var(--workspace-control-size); line-height:20px; }
.desktop-palette #desktopBuildHost #boardRulesStale { white-space:normal; flex-basis:100%; text-align:right; }
.desktop-palette #desktopBuildHost #buildSettingsSummary { grid-column:1 / -1; grid-row:2; display:grid; gap:2px; padding:2px 10px 7px; }
.desktop-palette #desktopBuildHost #buildSettingsSummaryText { font-size:11px; line-height:1.45; }
.desktop-palette #desktopBuildHost #strategyTemplateControls { grid-column:1; grid-row:3; justify-self:start; padding:0 8px; margin:0; border:0; }
.desktop-palette .desktop-workspace-header > .desktop-workspace-tools { grid-column:2; grid-row:3; border:0; height:29px; }
.desktop-palette .desktop-player-card-toolbar > #rowCount { order:10; margin-left:0; }
.desktop-palette .desktop-player-card-hint { order:11; }
@container right-workspace (max-width: 639px) {
  .desktop-palette .desktop-workspace-header > .desktop-workspace-navigation { grid-column:1 / -1; }
  .desktop-palette #desktopBuildHost .inline-build-actions { grid-column:1 / -1; grid-row:2; padding-top:0; }
  .desktop-palette #desktopBuildHost #buildSettingsSummary { grid-row:3; }
  .desktop-palette #desktopBuildHost #strategyTemplateControls { grid-row:4; }
  .desktop-palette .desktop-workspace-header > .desktop-workspace-tools { grid-row:4; }
}
/* Actions are siblings of the live summary, not children lost to its innerHTML update. */
.desktop-palette .combined-lineup-summary-row { display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; padding:0 12px 8px; }
.desktop-palette .combined-lineup-summary-row > .combined-lineup-summary { flex:1 1 200px; padding:0; gap:5px 10px; }
.desktop-palette .combined-contest-actions { display:flex; align-items:center; gap:8px; margin-left:auto; }
.desktop-palette .combined-contest-actions > button { display:inline-flex; align-items:center; gap:7px; min-height:28px; padding:3px; border:0; background:transparent; box-shadow:none; color:inherit; font-size:12px; }
.desktop-palette .combined-contest-actions > button:hover { color:var(--control-accent); }
.desktop-palette .combined-contest-actions > button:focus-visible { outline:1px solid var(--control-accent); outline-offset:2px; }
.desktop-palette .combined-contest-actions #createContestPlusBtn { width:28px; justify-content:center; }
.desktop-palette .combined-contest-actions #createContestPlusBtn > span { font-size:19px; line-height:1; }
.desktop-palette .combined-contest-actions #clearContestsBtn { width:28px; justify-content:center; }
.desktop-palette .combined-contest-actions svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.desktop-palette .combined-secondary-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; padding:0 12px 5px; }
.desktop-palette .combined-secondary-actions:not(:has(> button:not([hidden]))) { display:none; }
.desktop-palette .combined-secondary-actions > button { min-height:25px; padding:3px; border:0; background:transparent; color:var(--foreground-muted); font-size:11px; }
.desktop-palette .combined-secondary-actions > button[hidden] { display:none; }

.desktop-palette #desktopBuildHost #strategyTemplateButton { font-size:11px; min-height:25px; height:25px; padding:3px 7px; }
.desktop-palette .desktop-workspace-header:not(:has(#strategyTemplateControls:not([hidden]))) > .desktop-workspace-tools { grid-column:1 / -1; }

.desktop-palette .desktop-workspace-tools:has(> #rightPaneCount:empty) { display:none; }

/* Normal controls and workspace text share 12px. Player cards keep their
   original compact name, metric-label and history typography.
   Section headings and graphical icons retain their own hierarchy. The palette
   class is absent on phone, so existing mobile typography is unchanged. */
:root.desktop-palette #combinedWorkspace :is(#desktopWorkspacePanel, .desktop-player-card-toolbar)
  :is(div, span, p, small, b, strong, em, i, a, li, td, th, label, legend, summary, button, input, select, textarea):not(:is(h1, h2, h3, h4, h5, h6, svg) *) {
  font-size: var(--workspace-text-size);
}
:root.desktop-palette #combinedWorkspace #desktopWorkspacePanel #createContestPlusBtn > span { font-size:19px; }
:root.desktop-palette #combinedWorkspace :is(.team-stack-card-metric, .game-board-card-metric, .stack-shape-card-metric) {
  min-width:0; white-space:normal; line-height:1.25;
}
:root.desktop-palette #combinedWorkspace :is(.team-stack-card-metric, .game-board-card-metric, .stack-shape-card-metric) > span {
  max-width:100%; white-space:normal; overflow-wrap:anywhere; letter-spacing:0;
}
:root.desktop-palette #combinedWorkspace :is(.team-stack-card-metric, .game-board-card-metric, .stack-shape-card-metric) > b { white-space:nowrap; }
:root.desktop-palette #desktopWorkspacePanel .state-chip { height:auto; min-height:17px; line-height:1.2; }
:root.desktop-palette #combinedWorkspace .team-stack-card-copy { grid-template-columns:minmax(0,1fr) auto; }
:root.desktop-palette #combinedWorkspace .desktop-compact-lineup-context { line-height:1.4; }

:root.desktop-palette #combinedWorkspace :is(.desktop-player-sort, .team-stack-sort, .games-board-sort, .stack-shape-sort) { flex-wrap:wrap; min-width:0; max-width:100%; }
:root.desktop-palette #combinedWorkspace :is(.desktop-player-sort, .team-stack-sort, .games-board-sort, .stack-shape-sort) select { width:auto; min-width:0; max-width:100%; }

/* Section shortcuts use the existing rule store; keep both actions readable
   even when the card's content is excluded. No phone controls or player edits. */
.desktop-palette .section-quick-rules { display:inline-flex; flex-direction:column; flex:0 0 24px; width:24px; align-items:center; gap:4px; }
.desktop-palette .section-quick-rule { display:inline-flex; align-items:center; justify-content:center; flex:0 0 24px; width:24px; height:24px; min-height:24px; padding:3px; border:1px solid var(--line); border-radius:4px; background:var(--surface-field); color:var(--foreground-muted); cursor:pointer; }
.desktop-palette .section-quick-rule svg { width:16px; height:16px; }
.desktop-palette .section-quick-rule:hover,
.desktop-palette .section-quick-rule.is-lock[aria-pressed="true"] { color:var(--control-accent); border-color:var(--control-accent); }
.desktop-palette .section-quick-rule.is-exclude[aria-pressed="true"] { color:#ff7777; border-color:currentColor; }
.desktop-palette .section-quick-rule:focus-visible { outline:2px solid var(--control-accent); outline-offset:2px; }
.desktop-palette .desktop-workspace-content .team-stack-card-identity:has(> .section-quick-rules) { grid-template-columns:24px 28px minmax(0,1fr); }
.desktop-palette .section-quick-game-identity { display:flex; gap:7px; align-items:center; min-width:0; grid-column:1 / -1; }
.desktop-palette .section-quick-game-identity > .game-board-card-matchup { flex:1; grid-template-columns:minmax(0,1fr) 12px minmax(0,1fr) auto; }
.desktop-palette .desktop-workspace-content :is(.team-stack-card,.game-board-card,.stack-shape-card).disabled { opacity:1; }
.desktop-palette .desktop-workspace-content :is(.team-stack-card,.game-board-card,.stack-shape-card).disabled :is(.team-stack-card-logo,.team-stack-card-copy,.game-board-card-matchup,.stack-shape-card-glyph,.stack-shape-card-copy,.team-stack-card-metric,.game-board-card-metric,.stack-shape-card-metric) { opacity:.5; }
@container (min-width: 500px) {
  .desktop-palette .desktop-workspace-content .team-stack-card { grid-template-columns:minmax(200px,1.5fr) repeat(5,minmax(0,1fr)); }
}
@container (min-width: 640px) {
  .desktop-palette .desktop-workspace-content .game-board-card { grid-template-columns:minmax(305px,2fr) repeat(4,minmax(0,1fr)); }
  .desktop-palette .section-quick-game-identity { grid-column:auto; }
  .desktop-palette .desktop-workspace-content .stack-shape-card { grid-template-columns:minmax(240px,2fr) repeat(4,minmax(0,1fr)); }
  .desktop-palette .desktop-workspace-content .stack-shape-card.has-actual { grid-template-columns:minmax(240px,2fr) repeat(6,minmax(0,1fr)); }
}

.desktop-palette .desktop-workspace-content .stack-shape-card-identity { grid-template-columns:24px auto minmax(0,1fr); }

/* Uniform text scale - owner request September 22, 2026 ("go ahead and publish
   text fix"; Fable text-size audit, s1m_coordination/active/
   fable_audit_text_size_20260922.md). Desktop only: the desktop-palette class is
   absent on phone, so phone typography is unchanged. Four steps: label 10px,
   body 12px (same as --workspace-text-size), name 13px, title 17px. The whole
   header row is 12px (owner: "12 i guess"). Icon and glyph buttons (+, x,
   arrows, avatars, logo letters) keep their own sizes. Order matters: labels,
   names, body, titles. Game-strip cards retain their original sport typography. */
:root.desktop-palette { --text-label: 10px; --text-body: 12px; --text-name: 13px; --text-title: 17px; }

/* Small labels, eyebrows, tags and times: 10px */
:root.desktop-palette .desktop-player-card-metric > span,
:root.desktop-palette #combinedWorkspace #desktopWorkspacePanel :is(.team-stack-card-metric, .game-board-card-metric, .stack-shape-card-metric) > span,
:root.desktop-palette #combinedWorkspace #desktopWorkspacePanel :is(.eyebrow, .state-chip, .rules-scope-tag),
:root.desktop-palette .eyebrow,
:root.desktop-palette #selectedPanel.player-detail-panel .panel-head .eyebrow,
:root.desktop-palette .slate-counts .slate-confirmation,
:root.desktop-palette .card-history-label,
:root.desktop-palette .card-history-empty,
:root.desktop-palette .calendar-grid span,
:root.desktop-palette .calendar-title-stack span,
:root.desktop-palette .calendar-subtitle,
:root.desktop-palette .slate-card-topline strong,
:root.desktop-palette .opti-status-title,
:root.desktop-palette .account-center-footer > span { font-size: var(--text-label); }

/* Names and sub-headings: 13px */
:root.desktop-palette .slate-card b,
:root.desktop-palette .account-identity h3,
:root.desktop-palette .account-menu-row b,
:root.desktop-palette .rules-group-head h3,
:root.desktop-palette .slate-schedule-head h3,
:root.desktop-palette .calendar-title-stack b,
:root.desktop-palette .opti-status-stage { font-size: var(--text-name); }

/* Ordinary text, values, buttons and inputs: 12px */
:root.desktop-palette #selectedPanel.player-detail-panel .impact-line,
:root.desktop-palette #selectedPanel.player-detail-panel .player-detail-footer button,
:root.desktop-palette #selectedPanel.player-detail-panel input[type="number"],
:root.desktop-palette #selectedPanel.player-detail-panel .player-boost-box .eyebrow,
:root.desktop-palette #selectedPanel.player-detail-panel .manual-box .eyebrow,
:root.desktop-palette #selectedPanel.player-detail-panel .sel-gl-head .eyebrow,
:root.desktop-palette #selectedPanel.player-detail-panel .manual-box .small-action-row button,
:root.desktop-palette #selectedPanel.player-detail-panel summary,
:root.desktop-palette #selectedPanel.player-detail-panel .sel-sim-metrics .metric b,
:root.desktop-palette #selectedPanel.player-detail-panel .detail-boost-value b,
:root.desktop-palette .status-pill,
:root.desktop-palette .slate-counts b,
:root.desktop-palette .account-center-footer button { font-size: var(--text-body); }

/* Header row: one size, 12px (brand, Slate Picker and slate name/date/time,
   Account, the admin view tabs and backend pill; entry actions are already 12px) */
:root.desktop-palette #slatePickerToggle,
:root.desktop-palette .brand-lockup .brand-wordmark,
:root.desktop-palette .header-account,
:root.desktop-palette .topbar .view-tab,
:root.desktop-palette .topbar .backend-pill { font-size: var(--text-body); }

/* Panel and dialog titles, and the player-detail headline numbers: 17px */
:root.desktop-palette #combinedWorkspace #desktopWorkspacePanel .panel-head h2,
:root.desktop-palette .build-settings-dialog-header h2,
:root.desktop-palette #selectedPanel.player-detail-panel .panel-head h2,
:root.desktop-palette #selectedPanel.player-detail-panel .sel-primary-metrics .metric b,
:root.desktop-palette .slate-picker-header h2,
:root.desktop-palette .account-center-head h2 { font-size: var(--text-title); }

/* The entire desktop history is one full-width row beneath the player and metrics. */
:root.desktop-palette .desktop-player-card > .player-card-history { grid-column:1 / -1; order:1; display:flex; align-items:baseline; gap:16px; white-space:nowrap; }
:root.desktop-palette .desktop-player-card :is(.card-history-recent,.card-history-matchup) { display:flex; flex:none; align-items:baseline; gap:8px; white-space:nowrap; }
:root.desktop-palette .desktop-player-card .card-history-label { flex:none; }
:root.desktop-palette .desktop-player-card .card-history-recent .card-history-label { font-size:var(--text-body); }
:root.desktop-palette .desktop-player-card .card-history-scores { display:grid; grid-template-columns:repeat(4,minmax(max-content,1fr)); gap:8px; padding-top:0; }

/* DK Standings: official points/ownership fit even in a narrow rail. */
.ccmd-roster { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.ccmd-roster > div { grid-template-columns: 27px minmax(0, 1fr) max-content max-content; }
.ccmd-roster em { min-width: 38px; white-space: nowrap; }
.ccmd-roster em small { display: block; }
/* Same desktop scale in both the side rail and a desktop standings sheet.
   Phone fonts and the navigation/icon glyph sizes keep their existing rules. */
.desktop-palette .ccmd-standings-shell,
.desktop-palette .ccmd-standings-shell :is(p, label, input, select, option),
.desktop-palette .ccmd-standing-tabs button,
.desktop-palette .ccmd-standings-shell > footer button,
.desktop-palette .ccmd-pages button,
.desktop-palette .ccmd-error button,
.desktop-palette .ccmd-standing-entry > button,
.desktop-palette .ccmd-standing-entry > button span b,
.desktop-palette .ccmd-standing-summary b,
.desktop-palette .ccmd-roster-context b,
.desktop-palette .ccmd-payouts,
.desktop-palette .ccmd-roster em { font-size: var(--text-body, 12px); }
.desktop-palette .ccmd-standings-shell .eyebrow,
.desktop-palette .ccmd-synced,
.desktop-palette .ccmd-standing-summary span,
.desktop-palette .ccmd-standing-entry > button small,
.desktop-palette .ccmd-roster-context span,
.desktop-palette .ccmd-roster span,
.desktop-palette .ccmd-roster small { font-size: var(--text-label, 10px); }
.desktop-palette .ccmd-standing-entry > button strong,
.desktop-palette .ccmd-roster b { font-size: var(--text-name, 13px); }
.desktop-palette .ccmd-standings-shell > h2 { font-size: var(--text-title, 17px); }

/* Compact Official/Replay receipts: desktop only, metric groups wrap together. */
.desktop-palette #combinedReturnSummary { padding:0 12px 10px; }
.desktop-palette .combined-return-rows { display:flex; flex-direction:column; gap:4px; min-width:0; }
.desktop-palette .combined-contest-copy > .combined-return-rows { margin-top:5px; }
.desktop-palette .combined-return-row { display:flex; flex-wrap:wrap; align-items:baseline; gap:3px 10px; font-size:12px; line-height:1.4; font-weight:400; color:var(--foreground-muted); }
.desktop-palette .combined-return-row > span { white-space:nowrap; }
.desktop-palette .combined-return-label { color:var(--foreground); }
.desktop-palette .combined-return-hypothetical { color:var(--foreground-muted); font-size:10px; }
.desktop-palette .combined-return-row .combined-return-status { white-space:normal; }
.desktop-palette .combined-return-pending { color:var(--foreground-muted); }
@media (max-width: 767px) { #combinedReturnSummary { display:none; } }

/* Standings search owns one outer focus border, not a second inset box. */
.ccmd-standing-tools input[data-ccmd-search]:focus-visible { outline: none; }
.ccmd-standing-tools label:focus-within { border-color: var(--control-accent, #78b8ff); }

/* Prior-date desktop layout preferences are independent of live and phone. */
.desktop-player-information-content, .desktop-workspace-scroll { display: contents; }
.desktop-player-information-toggle { display: none; }
.desktop-palette .past-player-layout { --past-player-applied-width: clamp(32px, var(--desktop-player-width), calc(100% - 44px)); grid-template-columns: var(--past-player-applied-width) minmax(0, 1fr); }
.desktop-palette .past-player-layout > .player-grid-shell { grid-column: 1; grid-row: 1; overflow: auto; }
.desktop-palette .past-player-layout .desktop-player-information-content { display: block; min-width: 520px; container-type: inline-size; }
.desktop-palette .past-player-layout > .desktop-workspace-panel { grid-column: 2; grid-row: 1; height: var(--desktop-workspace-height); overflow-x: auto; overflow-y: hidden; }
.desktop-palette .past-player-layout .desktop-workspace-scroll { display: flex; flex-direction: column; min-width: 320px; width: 100%; height: 100%; min-height: 0; }
.desktop-palette .past-player-layout .desktop-workspace-divider:not([hidden]) { display: block; left: var(--past-player-applied-width); right: auto; height: var(--desktop-workspace-height); }
.desktop-palette .past-player-layout .desktop-player-information-toggle:not([hidden]) { display: flex; align-items: center; justify-content: center; position: absolute; z-index: 9; left: calc(var(--past-player-applied-width) - 6px); top: 6px; width: 24px; height: 32px; padding: 0; border: 1px solid var(--line); border-radius: 4px; color: var(--foreground); background: var(--surface-base); cursor: pointer; }
.desktop-player-information-toggle .player-information-arrow { font-size: 20px; line-height: 1; }
.desktop-player-information-toggle .player-information-label { display: none; }
.desktop-palette .past-player-layout.player-information-closed { grid-template-columns: 32px minmax(0, 1fr); gap: 0; }
.desktop-palette .player-information-closed > .player-grid-shell { display: none !important; }
.desktop-palette .player-information-closed .desktop-player-information-toggle:not([hidden]) { left: 0; top: 0; width: 32px; height: var(--desktop-workspace-height); flex-direction: column; justify-content: flex-start; gap: 12px; padding: 9px 0; }
.desktop-palette .player-information-closed .player-information-label { display: block; writing-mode: vertical-rl; font-size: 12px; }
.desktop-player-information-toggle:focus-visible { outline: 1px solid var(--control-accent); outline-offset: -1px; }