/* Sports Stat Tracker V1.5 — presentation layer only
   Layout, spacing and responsive hierarchy. No model or data mechanics. */

body.v150-aesthetic {
  min-height: 100vh;
  background:
    radial-gradient(circle at 50% -18%, rgba(var(--league-rgb), .10), transparent 34rem),
    radial-gradient(circle at 92% 28%, rgba(var(--brand-rgb), .035), transparent 24rem),
    var(--bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.light.v150-aesthetic {
  background:
    radial-gradient(circle at 50% -18%, rgba(var(--league-rgb), .075), transparent 36rem),
    #f4f3ed;
}

.v150-aesthetic .app-shell {
  width: min(1240px, 100%);
  padding-inline: 24px;
  padding-bottom: 56px;
}

.v150-aesthetic .floating-command-shell {
  margin: 0 0 18px;
  padding: 0 0 10px;
  border-bottom-color: color-mix(in srgb, var(--line) 58%, transparent);
  background: color-mix(in srgb, var(--bg) 91%, transparent);
}
.v150-aesthetic .topbar { min-height: 68px; padding-block: 12px 10px; }
.v150-aesthetic .brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  box-shadow: none;
}
.v150-aesthetic .eyebrow { font-size: .58rem; letter-spacing: .17em; }
.v150-aesthetic h1 { margin-top: 3px; font-size: clamp(1.32rem, 2.7vw, 1.72rem); }
.v150-aesthetic h1 span { font-size: .48em; }
.v150-aesthetic .product-pill { padding: 7px 10px; font-size: .62rem; }
.v150-aesthetic .top-data-button,
.v150-aesthetic .icon-button {
  min-height: 38px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
}
.v150-aesthetic .icon-button { width: 38px; height: 38px; }

.v150-aesthetic .league-switcher {
  gap: 4px;
  padding: 4px;
  margin-bottom: 0;
  border-radius: 12px;
  box-shadow: none;
}
.v150-aesthetic .league-button {
  min-height: 42px;
  padding: 8px 10px;
  border-radius: 9px;
}
.v150-aesthetic .league-button strong { display: none; }
.v150-aesthetic .league-short { font-size: .75rem; letter-spacing: .03em; }

.v150-aesthetic .tabbar {
  top: 8px;
  gap: 3px;
  padding: 4px;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}
.v150-aesthetic .tab {
  min-height: 42px;
  padding: 9px 10px;
  border-radius: 10px;
  font-size: .73rem;
}
.v150-aesthetic .panel { padding-top: 26px; }

/* Quieter global card language */
.v150-aesthetic .controls-card,
.v150-aesthetic .status-info,
.v150-aesthetic .home-panel-card,
.v150-aesthetic .player-card,
.v150-aesthetic .game-card,
.v150-aesthetic .status-row,
.v150-aesthetic .metric-card {
  border-color: color-mix(in srgb, var(--line) 78%, transparent);
  box-shadow: none;
}
.v150-aesthetic input,
.v150-aesthetic select {
  min-height: 48px;
  padding-inline: 14px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-2) 82%, var(--surface));
}
.v150-aesthetic label { gap: 8px; font-size: .72rem; letter-spacing: .01em; }
.v150-aesthetic .primary-button,
.v150-aesthetic .secondary-button {
  min-height: 42px;
  padding-inline: 16px;
  border-radius: 11px;
}
.v150-aesthetic .v136-panel-masthead {
  margin-bottom: 18px;
  padding: 24px 26px;
  border-radius: 20px;
  background:
    linear-gradient(115deg, rgba(var(--league-rgb), .075), transparent 48%),
    var(--surface);
}
.v150-aesthetic .v136-panel-masthead h2 {
  margin-block: 6px;
  font-size: clamp(1.55rem, 3vw, 2.25rem);
}
.v150-aesthetic .v136-panel-masthead p { max-width: 720px; font-size: .78rem; }

/* Home: remove instructional scaffolding and let content breathe */
.v150-aesthetic .home-hero {
  min-height: 235px;
  padding: 30px 34px;
  border-radius: 24px;
  box-shadow: 0 20px 60px rgba(0,0,0,.20);
}
.v150-aesthetic .home-hero h2 { max-width: 680px; }
.v150-aesthetic .v136-flow-rail { display: none; }
.v150-aesthetic .v136-home-zone {
  margin: 38px 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.v150-aesthetic .v136-zone-heading {
  margin-bottom: 18px;
  padding: 0;
  border: 0;
}
.v150-aesthetic .v136-zone-number { display: none; }
.v150-aesthetic .v136-zone-heading h3 {
  margin-top: 4px;
  font-size: clamp(1.35rem, 2.4vw, 1.8rem);
}
.v150-aesthetic .v136-zone-heading p {
  max-width: 650px;
  font-size: .76rem;
}
.v150-aesthetic .home-stat-row { gap: 12px; margin-bottom: 16px; }
.v150-aesthetic .home-stat-row article { padding: 17px 18px; border-radius: 17px; }
.v150-aesthetic .home-grid { gap: 16px; }
.v150-aesthetic .home-panel-card { padding: 21px; border-radius: 20px; }
.v150-aesthetic .home-game-list,
.v150-aesthetic .home-ranked-list,
.v150-aesthetic .home-news-list { gap: 9px; }

/* Projections: one setup area, then one calm shortlist */
.v150-aesthetic .v1431-projection-cleanup {
  max-width: 1160px;
  margin-inline: auto;
}
.v150-aesthetic .v1431-compact-intro {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 190px;
  display: flex;
  align-items: flex-end;
  padding: 34px 36px;
  border: 1px solid color-mix(in srgb, rgb(var(--league-rgb)) 24%, var(--line));
  border-radius: 26px;
  background:
    linear-gradient(105deg, rgba(7,8,7,.98), rgba(7,8,7,.86) 56%, rgba(7,8,7,.48)),
    linear-gradient(135deg, rgba(var(--league-rgb), .18), transparent 68%),
    var(--surface);
  box-shadow: 0 24px 70px rgba(0,0,0,.24);
}
body.light.v150-aesthetic .v1431-compact-intro {
  background:
    linear-gradient(105deg, rgba(251,250,245,.98), rgba(251,250,245,.92) 58%, rgba(251,250,245,.70)),
    linear-gradient(135deg, rgba(var(--league-rgb), .12), transparent 68%),
    var(--surface);
}
.v150-aesthetic .v1431-compact-intro::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 330px;
  height: 330px;
  right: -105px;
  top: -165px;
  border: 64px solid rgba(var(--league-rgb), .10);
  border-radius: 50%;
}
.v150-aesthetic .v1431-compact-intro > div { max-width: 760px; }
.v150-aesthetic .v1431-compact-intro .section-label { color: rgb(var(--league-rgb)); }
.v150-aesthetic .v1431-compact-intro h3 {
  max-width: 680px;
  margin: 8px 0 8px;
  font-size: clamp(2rem, 4.5vw, 3.45rem);
  line-height: .96;
  letter-spacing: -.055em;
  text-wrap: balance;
}
.v150-aesthetic .v1431-compact-intro p {
  max-width: 640px;
  margin-bottom: 0;
  color: color-mix(in srgb, var(--text) 66%, var(--muted));
  font-size: .86rem;
  line-height: 1.55;
}
.v150-aesthetic .v1431-compact-intro .model-badge {
  position: absolute;
  top: 22px;
  right: 24px;
  color: var(--brand);
  background: rgba(10,12,9,.68);
  border-color: rgba(var(--brand-rgb), .25);
  backdrop-filter: blur(10px);
}
body.light.v150-aesthetic .v1431-compact-intro .model-badge { background: rgba(251,250,245,.78); }
.v150-aesthetic .v1431-quick-hero { display: none; }

.v150-aesthetic .v1431-builder-controls { margin-top: 20px; }
.v150-aesthetic .v1431-primary-scope {
  margin: 0;
  padding: 24px 26px 26px;
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: 0 16px 44px rgba(0,0,0,.14);
}
.v150-aesthetic .v1431-primary-scope .v136-control-heading { margin-bottom: 18px; }
.v150-aesthetic .v1431-primary-scope .v136-control-heading > b {
  width: 32px;
  height: 32px;
  color: #0b0d09;
  background: var(--brand);
}
.v150-aesthetic .v1431-primary-scope .v136-control-heading small { color: rgb(var(--league-rgb)); }
.v150-aesthetic .v1431-primary-scope .v136-control-heading strong { font-size: 1rem; }
.v150-aesthetic .v1431-primary-scope .v136-control-grid {
  grid-template-columns: minmax(300px, 1.8fr) minmax(135px, .55fr) minmax(180px, .72fr);
  gap: 14px;
}
.v150-aesthetic .v1431-tune-details {
  margin: 12px 0 22px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
}
.v150-aesthetic .v1431-accordion > summary {
  min-height: 58px;
  padding: 14px 18px;
}
.v150-aesthetic .v1431-accordion > summary::after {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--brand) 10%, var(--surface-2));
}
.v150-aesthetic .v1431-tune-details[open] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.v150-aesthetic .v1431-tune-details[open] > summary { grid-column: 1 / -1; }
.v150-aesthetic .v1431-tune-details .v136-control-group {
  padding: 18px;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}
.v150-aesthetic .v1431-tune-details .v136-control-group + .v136-control-group {
  border-left: 1px solid var(--line);
}
.v150-aesthetic .v1431-pick-readout {
  position: static;
  z-index: auto;
  grid-template-columns: auto minmax(0, 1fr) auto;
  margin: 0 0 14px;
  padding: 13px 16px;
  border-radius: 15px;
  background: color-mix(in srgb, rgb(var(--league-rgb)) 4%, var(--surface));
}
.v150-aesthetic .v1431-summary-strip {
  gap: 10px;
  margin: 18px 0 12px;
}
.v150-aesthetic .v1431-summary-strip .metric-card {
  padding: 13px 15px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
}
.v150-aesthetic .v1431-projection-notice {
  margin-bottom: 24px;
  padding: 13px 16px;
  border-style: dashed;
  border-color: color-mix(in srgb, var(--line) 85%, transparent);
  background: transparent;
  line-height: 1.5;
}
.v150-aesthetic .v1431-diagnostics { margin: 18px 0 24px; }
.v150-aesthetic .v1431-pick-list {
  gap: 16px;
  margin-top: 0;
}
.v150-aesthetic .v1431-pick-list::before {
  content: "MODEL SHORTLIST";
  display: block;
  margin: 6px 2px 0;
  color: var(--muted);
  font-size: .64rem;
  font-weight: 950;
  letter-spacing: .16em;
}

.v150-aesthetic .projection-card.v1431-pick-card,
.v150-aesthetic .projection-card.v13-builder-leg {
  grid-template-columns: 66px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  border-radius: 22px;
  background:
    linear-gradient(118deg, rgba(var(--league-rgb), .06), transparent 36%),
    var(--surface);
  box-shadow: 0 14px 42px rgba(0,0,0,.13);
}
.v150-aesthetic .v1431-pick-rank {
  min-height: 100%;
  padding: 18px 8px;
  border-right-color: color-mix(in srgb, rgb(var(--league-rgb)) 18%, var(--line));
  background: color-mix(in srgb, rgb(var(--league-rgb)) 8%, var(--surface-2));
}
.v150-aesthetic .v1431-pick-rank span {
  color: rgb(var(--league-rgb));
  font-size: 1.18rem;
}
.v150-aesthetic .v1431-pick-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(245px, .72fr);
  column-gap: 22px;
  padding: 22px 24px 18px;
}
.v150-aesthetic .v1431-pick-topline { grid-column: 1; align-self: start; }
.v150-aesthetic .v1431-pick-player h3 { margin-top: 7px; font-size: 1.3rem; }
.v150-aesthetic .v1431-pick-player p { margin-top: 4px; }
.v150-aesthetic .v1431-confidence-chip {
  min-width: 66px;
  padding: 9px 10px;
  border-radius: 14px;
}
.v150-aesthetic .v1431-pick-range {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: stretch;
  min-height: 128px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0;
  padding: 18px 20px;
  border-radius: 18px;
  background: color-mix(in srgb, rgb(var(--league-rgb)) 9%, var(--surface-2));
}
.v150-aesthetic .v1431-pick-range strong {
  margin-top: 5px;
  font-size: clamp(1.55rem, 3vw, 2.1rem);
  line-height: 1.05;
}
.v150-aesthetic .v1431-pick-range small { margin-top: 7px; }
.v150-aesthetic .v1431-pick-mini {
  grid-column: 1;
  align-self: end;
  gap: 9px;
  margin: 16px 0 0;
}
.v150-aesthetic .v1431-pick-mini span {
  padding: 10px 11px;
  border-radius: 13px;
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
}
.v150-aesthetic .v1431-pick-why {
  grid-column: 1 / -1;
  margin: 16px 0 12px;
  border-color: color-mix(in srgb, var(--line) 72%, transparent);
}
.v150-aesthetic .v1431-pick-why summary { padding: 10px 0; }
.v150-aesthetic .v1431-pick-actions {
  grid-column: 1 / -1;
  min-height: 38px;
}
.v150-aesthetic .v1431-pick-actions .v12-favorite-button {
  min-height: 38px;
  padding-inline: 14px;
  border-radius: 11px;
}
.v150-aesthetic .v1431-signal-row { gap: 7px; }
.v150-aesthetic .v12-signal { min-height: 23px; padding-inline: 9px; }
.v150-aesthetic .v1431-pick-card .confidence-track,
.v150-aesthetic .projection-card.v13-builder-leg .confidence-track {
  grid-column: 1 / -1;
  height: 5px;
  margin-top: 12px;
}

/* Other exploration screens inherit the calmer rhythm */
.v150-aesthetic .controls-card { margin-bottom: 18px; padding: 20px; border-radius: 18px; }
.v150-aesthetic .leader-strip { gap: 12px; margin-bottom: 18px; }
.v150-aesthetic .leader-card { padding: 17px; border-radius: 17px; }
.v150-aesthetic .player-list,
.v150-aesthetic .game-list,
.v150-aesthetic .status-list { gap: 12px; }
.v150-aesthetic .player-card,
.v150-aesthetic .game-card,
.v150-aesthetic .status-row { border-radius: 18px; }
.v150-aesthetic .player-card { padding: 17px; }
.v150-aesthetic .game-card { padding: 19px; }

@media (max-width: 920px) {
  .v150-aesthetic .v1431-primary-scope .v136-control-grid {
    grid-template-columns: minmax(0, 1fr) minmax(150px, .45fr);
  }
  .v150-aesthetic .v1431-primary-scope .projection-game-control { grid-column: 1 / -1; }
  .v150-aesthetic .v1431-pick-main { display: block; }
  .v150-aesthetic .v1431-pick-range { min-height: 0; margin: 16px 0 0; }
  .v150-aesthetic .v1431-pick-mini { margin-top: 10px; }
}

@media (max-width: 760px) {
  html,
  body.v150-aesthetic {
    max-width: 100%;
    overflow-x: hidden;
    overflow-x: clip;
  }
  .v150-aesthetic .app-shell { padding-inline: 14px; }
  .v150-aesthetic .product-pill { display: none; }
  .v150-aesthetic .floating-command-shell { margin-bottom: 10px; }
  .v150-aesthetic .topbar-actions { gap: 6px; }
  .v150-aesthetic .top-data-button { min-width: 0; padding-inline: 10px; }
  .v150-aesthetic .tabbar {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    overflow: visible;
  }
  .v150-aesthetic .tab {
    min-width: 0;
    overflow: hidden;
  }
  .v150-aesthetic .panel { padding-top: 18px; }

  .v150-aesthetic .app-shell,
  .v150-aesthetic main,
  .v150-aesthetic .panel,
  .v150-aesthetic .v1431-projection-cleanup,
  .v150-aesthetic .v1431-compact-intro,
  .v150-aesthetic .v1431-builder-controls,
  .v150-aesthetic .v1431-primary-scope,
  .v150-aesthetic .v1431-tune-details,
  .v150-aesthetic .v1431-pick-readout,
  .v150-aesthetic .v1431-pick-list,
  .v150-aesthetic .projection-card.v1431-pick-card,
  .v150-aesthetic .projection-card.v13-builder-leg,
  .v150-aesthetic .v1431-pick-main,
  .v150-aesthetic .v1431-pick-topline,
  .v150-aesthetic .v1431-pick-player {
    min-width: 0;
    max-width: 100%;
  }

  .v150-aesthetic .home-hero { min-height: 0; padding: 23px 21px; }
  .v150-aesthetic .home-grid { grid-template-columns: 1fr; }
  .v150-aesthetic .v136-home-zone { margin-top: 28px; }

  .v150-aesthetic .v1431-compact-intro {
    min-height: 0;
    padding: 72px 22px 24px;
    border-radius: 21px;
  }
  .v150-aesthetic .v1431-compact-intro h3 { font-size: clamp(1.8rem, 9vw, 2.6rem); }
  .v150-aesthetic .v1431-compact-intro .model-badge { top: 18px; left: 20px; right: auto; }
  .v150-aesthetic .v1431-primary-scope { padding: 20px; }
  .v150-aesthetic .v1431-primary-scope .v136-control-grid { grid-template-columns: 1fr; }
  .v150-aesthetic .v1431-primary-scope .projection-game-control { grid-column: auto; }
  .v150-aesthetic .v1431-tune-details[open] { display: block; }
  .v150-aesthetic .v1431-tune-details .v136-control-group + .v136-control-group {
    border-left: 0;
  }
  .v150-aesthetic .v1431-pick-readout {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 10px;
  }
  .v150-aesthetic .v1431-pick-readout small { grid-column: 1 / -1; }
  .v150-aesthetic .v1431-summary-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .v150-aesthetic .projection-card.v1431-pick-card,
  .v150-aesthetic .projection-card.v13-builder-leg { grid-template-columns: 46px minmax(0, 1fr); border-radius: 18px; }
  .v150-aesthetic .v1431-pick-main { padding: 17px 15px 14px; }
  .v150-aesthetic .v1431-pick-player h3 { font-size: 1.12rem; }
  .v150-aesthetic .v1431-pick-range strong { font-size: 1.55rem; }
}

@media (max-width: 500px) {
  .v150-aesthetic .app-shell { padding-inline: 10px; padding-bottom: 42px; }
  .v150-aesthetic .brand-mark { width: 34px; height: 34px; }
  .v150-aesthetic .eyebrow { display: none; }
  .v150-aesthetic h1 { font-size: 1.15rem; }
  .v150-aesthetic .topbar { gap: 7px; }
  .v150-aesthetic .brand-lockup { min-width: 0; flex: 1 1 auto; gap: 8px; }
  .v150-aesthetic .brand-lockup > div:last-child { min-width: 0; }
  .v150-aesthetic .brand-lockup h1 { white-space: nowrap; }
  .v150-aesthetic .topbar-actions { flex: 0 0 auto; gap: 4px; }
  .v150-aesthetic .top-data-button { min-height: 34px; padding-inline: 8px; font-size: .65rem; }
  .v150-aesthetic .icon-button { width: 34px; height: 34px; }
  .v150-aesthetic .league-switcher { gap: 2px; }
  .v150-aesthetic .league-button { min-height: 38px; padding-inline: 4px; }
  .v150-aesthetic .league-short { font-size: .67rem; }
  .v150-aesthetic .tab { font-size: .67rem; }
  .v150-aesthetic .home-stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v150-aesthetic .v1431-compact-intro p { font-size: .78rem; }
  .v150-aesthetic .v1431-primary-scope { padding: 17px; border-radius: 18px; }
  .v150-aesthetic .v1431-primary-scope .v136-control-heading > b { display: none; }
  .v150-aesthetic .v1431-pick-readout { grid-template-columns: 1fr; }
  .v150-aesthetic .v1431-pick-readout > span,
  .v150-aesthetic .v1431-pick-readout small { grid-column: auto; }
  .v150-aesthetic .v1431-summary-strip { gap: 6px; }
  .v150-aesthetic .v1431-summary-strip .metric-card { padding: 10px 8px; }
  .v150-aesthetic .v1431-summary-strip .metric-card strong { font-size: .98rem; }
  .v150-aesthetic .v1431-pick-mini { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
  .v150-aesthetic .v1431-pick-mini span { padding: 8px 6px; }
  .v150-aesthetic .v1431-signal-row { justify-content: flex-start; }
}

@media (max-width: 360px) {
  .v150-aesthetic h1 span { display: none; }
  .v150-aesthetic .brand-mark { width: 32px; height: 32px; }
  .v150-aesthetic .top-data-button { padding-inline: 7px; }
  .v150-aesthetic .v1431-summary-strip { grid-template-columns: 1fr; }
  .v150-aesthetic .v1431-pick-mini { grid-template-columns: 1fr; }
}