/* release 370 (design panel): the site's one visual system, loaded last in <head> on every HTML page by design_system.py.
   Five designers scored release 369 and found three primary-button colours (mint, black, orange), 15 corner radii, a focus ring
   that disappears on the navy header, 12px selects that make iPhones zoom, text down to 8px and targets under 44px on phones.
   This file maps the existing components onto one set of tokens by selector; page files keep their layout.
   :not(#sx370a):not(#sx370b):not(#sx370c) lifts these rules above the older page layers (brand_accent, scoutics_nav, the
   cream/light themes and the simulator's own sheet) without depending on source order. */

/* ---- tokens ---- */
:root {
  --sx-mint: #19EFAE; --sx-mint-hover: #12D89B; --sx-navy: #08111C; --sx-ink: #18181B; --sx-line: #E4E4E7; --sx-muted: #52525B;
  --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-pill: 999px;
  --btn-h: 44px; --btn-font: 600 15px/1.2 Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  /* one focus ring: navy on light surfaces, mint on the navy header (redefined below) */
  --focus-color: #08111C; --focus-ring: 2px solid var(--focus-color);
}

/* ---- focus ring ---- */
/* a page shown in its dark theme gets the mint ring, like the navy header */
html[data-theme="dark"] { --focus-color: #19EFAE; --focus-ring: 2px solid #19EFAE; }
html:not(#sx370a):not(#sx370b):not(#sx370c) body :is(header.sx-nav, .sx-navbar, header.scoutics-topbar) { --focus-color: #19EFAE; --focus-ring: 2px solid #19EFAE; }
/* light panels that open from the header (dropdowns, the phone drawer, the account menu, the search sheet) go back to navy */
html:not(#sx370a):not(#sx370b):not(#sx370c) body :is(.sx-drop-list, #scTopMenuPanel, #scTopProfileMenu, .scoutics-profile-menu, .sau-menu, .sx-psheet-card, .scoutics-menu-panel) { --focus-color: #08111C; --focus-ring: 2px solid #08111C; }
@media (max-width: 991px) { html:not(#sx370a):not(#sx370b):not(#sx370c) body #sxMenu { --focus-color: #08111C; --focus-ring: 2px solid #08111C; } }
html:not(#sx370a):not(#sx370b):not(#sx370c) body :is(a, button, input, select, textarea, summary, [role="tab"], [role="radio"], [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: var(--focus-ring) !important; }
/* the mint "Compare prices" button in the navy bar had a navy ring (1:1 on the bar): mint, outside the button */
html:not(#sx370a):not(#sx370b):not(#sx370c):not(#sx370d) body :is(header.sx-nav .sx-nav-right a.sx-btn, header.scoutics-topbar a.scoutics-top-sim):focus-visible {
  outline: 2px solid #19EFAE !important; outline-offset: 3px !important; }
/* the chat box shows focus on its own frame; the mint button's ring sits outside it so it reads on navy and on white */
html:not(#sx370a):not(#sx370b):not(#sx370c) body .sca .sca-form textarea:focus-visible { outline: 0 !important; }
html:not(#sx370a):not(#sx370b):not(#sx370c) body .sca .sca-form:focus-within { border-color: #08111C; box-shadow: 0 0 0 1px #08111C; }

/* ---- one primary button: mint, 44px, 8px corners, 600 15px Inter ---- */
html:not(#sx370a):not(#sx370b):not(#sx370c) body :is(
  .sx-btn:not(.is-outline):not(.is-light),
  .button.primary,
  button.sc-play-cta,
  .featured .plan-cta, .pricing-plan.chosen .plan-cta,
  .bt-btn-primary,
  #sx-age .sx-age-yes,
  #sx-signin-dialog .sxs-btn:not(.sxs-outline),
  .mw-btn:not(.is-ghost):not(.mw-ghost),
  .pricing-continue
) {
  min-height: var(--btn-h) !important; padding-top: 0 !important; padding-bottom: 0 !important; padding-left: 18px !important; padding-right: 18px !important;
  border: 1px solid var(--sx-mint) !important; border-radius: var(--r-md) !important;
  background: var(--sx-mint) !important; background-color: var(--sx-mint) !important; color: var(--sx-navy) !important;
  font: var(--btn-font) !important; letter-spacing: 0 !important; text-transform: none !important; text-decoration: none !important;
  box-shadow: none !important; filter: none !important; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
}
html:not(#sx370a):not(#sx370b):not(#sx370c) body :is(.sx-btn:not(.is-outline):not(.is-light), .button.primary, button.sc-play-cta, .featured .plan-cta, .pricing-plan.chosen .plan-cta, .bt-btn-primary, #sx-age .sx-age-yes, #sx-signin-dialog .sxs-btn:not(.sxs-outline), .mw-btn:not(.is-ghost):not(.mw-ghost), .pricing-continue) * { color: var(--sx-navy) !important; }
html:not(#sx370a):not(#sx370b):not(#sx370c) body :is(.sx-btn:not(.is-outline):not(.is-light), .button.primary, button.sc-play-cta, .featured .plan-cta, .pricing-plan.chosen .plan-cta, .bt-btn-primary, #sx-age .sx-age-yes, #sx-signin-dialog .sxs-btn:not(.sxs-outline), .mw-btn:not(.is-ghost):not(.mw-ghost), .pricing-continue):hover:not(:disabled) {
  background: var(--sx-mint-hover) !important; background-color: var(--sx-mint-hover) !important; border-color: var(--sx-mint-hover) !important; }
/* links and inline buttons need a box to take the height */
html:not(#sx370a):not(#sx370b):not(#sx370c) body :is(a.sx-btn, a.bt-btn-primary, a.plan-cta, a.sxs-btn, .button.primary, .bt-btn-ghost, .sx-btn) { display: inline-flex; }
html:not(#sx370a):not(#sx370b):not(#sx370c) body .plan-cta { display: flex !important; align-items: center; justify-content: center; }

/* ---- one secondary button: white with a #E4E4E7 line, same shape ---- */
html:not(#sx370a):not(#sx370b):not(#sx370c) body :is(
  .sx-btn.is-outline, .sx-btn.is-light,
  #sx-signin .sxs-btn, .sxs-btn.sxs-outline,
  .plan-cta:not(.featured .plan-cta):not(.pricing-plan.chosen .plan-cta),
  .bt-btn-ghost,
  #sx-age .sx-age-no
) {
  min-height: var(--btn-h) !important; padding-top: 0 !important; padding-bottom: 0 !important; padding-left: 18px !important; padding-right: 18px !important;
  border: 1px solid var(--sx-line) !important; border-radius: var(--r-md) !important;
  background: #fff !important; background-color: #fff !important; color: var(--sx-navy) !important;
  font: var(--btn-font) !important; letter-spacing: 0 !important; text-transform: none !important; text-decoration: none !important;
  box-shadow: none !important; filter: none !important; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
}
html:not(#sx370a):not(#sx370b):not(#sx370c) body :is(.sx-btn.is-outline, .sx-btn.is-light, #sx-signin .sxs-btn, .sxs-btn.sxs-outline, .plan-cta:not(.featured .plan-cta):not(.pricing-plan.chosen .plan-cta), .bt-btn-ghost, #sx-age .sx-age-no):hover:not(:disabled) {
  background: #F4F4F5 !important; background-color: #F4F4F5 !important; border-color: #D4D4D8 !important; color: var(--sx-navy) !important; }
/* on the dark band at the foot of the home page the secondary stays readable */
html:not(#sx370a):not(#sx370b):not(#sx370c) body .sx-cta :is(.sx-btn.is-outline, .sx-btn.is-light) { background: transparent !important; color: #fff !important; border-color: rgba(255,255,255,.5) !important; }
/* a button that can't be used looks it, in both kinds */
html:not(#sx370a):not(#sx370b):not(#sx370c) body :is(.button.primary, button.sc-play-cta, .plan-cta, .bt-btn-primary, .bt-btn-ghost, .sx-age-yes, .mw-btn):is(:disabled, [aria-disabled="true"]) {
  background: #F4F4F5 !important; background-color: #F4F4F5 !important; border-color: var(--sx-line) !important; color: #63636B !important; cursor: not-allowed; opacity: 1 !important; }

/* /pricing: the chosen plan and its message are marked in navy, not the old blue */
html:not(#sx370a):not(#sx370b):not(#sx370c) body .pricing-plan.chosen { outline: 2px solid var(--sx-navy) !important; outline-offset: 3px; }
html:not(#sx370a):not(#sx370b):not(#sx370c) body .pricing-message.info { border-color: var(--sx-line) !important; background: #fff !important; color: var(--sx-navy) !important; }

/* ---- one chip per plan, the same colour everywhere (plan badges, the "Pro" tags on Games tabs, the locked-value links).
   static/js/upgrade_links.js marks each with data-sx-plan; the account badges already carry the plan in their class. ---- */
html:not(#sx370a):not(#sx370b):not(#sx370c) body :is(.bt-pro-tag, .sau-plan, .plan-chip, a.bt-lock, [class*="plan-badge--"]) {
  display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px !important; border: 1px solid transparent !important; border-radius: var(--r-pill) !important;
  font: 600 12px/1.4 Inter, ui-sans-serif, system-ui, sans-serif !important; letter-spacing: 0 !important; text-transform: none !important; text-decoration: none !important; white-space: nowrap; vertical-align: middle;
  background: #F4F4F5 !important; color: #3F3F46 !important; border-color: #E4E4E7 !important; }
html:not(#sx370a):not(#sx370b):not(#sx370c) body :is(.bt-pro-tag, .sau-plan, .plan-chip, a.bt-lock):is([data-sx-plan="fan"]), html:not(#sx370a):not(#sx370b):not(#sx370c) body [class*="plan-badge--fan"] {
  background: #E6FCF5 !important; color: #065F46 !important; border-color: #8FE9CD !important; }
html:not(#sx370a):not(#sx370b):not(#sx370c) body :is(.bt-pro-tag, .sau-plan, .plan-chip, a.bt-lock):is([data-sx-plan="starter"]), html:not(#sx370a):not(#sx370b):not(#sx370c) body [class*="plan-badge--starter"] {
  background: #FEF3C7 !important; color: #92400E !important; border-color: #FCD34D !important; }
html:not(#sx370a):not(#sx370b):not(#sx370c) body :is(.bt-pro-tag, .sau-plan, .plan-chip, a.bt-lock):is([data-sx-plan="pro"]), html:not(#sx370a):not(#sx370b):not(#sx370c) body [class*="plan-badge--pro"] {
  background: #08111C !important; color: #19EFAE !important; border-color: #08111C !important; }
html:not(#sx370a):not(#sx370b):not(#sx370c) body :is(.bt-pro-tag, .sau-plan, .plan-chip, a.bt-lock):is([data-sx-plan="insider"]), html:not(#sx370a):not(#sx370b):not(#sx370c) body [class*="plan-badge--insider"] {
  background: #F3E8FF !important; color: #6B21A8 !important; border-color: #D8B4FE !important; }
html:not(#sx370a):not(#sx370b):not(#sx370c) body :is(.bt-pro-tag, .sau-plan, .plan-chip, a.bt-lock, [class*="plan-badge--"]) * { color: inherit !important; }
html:not(#sx370a):not(#sx370b):not(#sx370c) body a.bt-lock:hover { filter: brightness(.96); text-decoration: underline !important; }

/* ---- corners: four steps. Cards 12, controls 8, controls inside a control 6, chips and pills 999 ---- */
html:not(#sx370a):not(#sx370b):not(#sx370c) body :is(a.hn-card, section.card, .audience-list, .pgh-fact, .ow-card, .fantasy-lineup-card, section.lineup-lab, .lineup-lab.ht-lab, .pricing-plan, .scoutics-profile-menu, .sau-menu, .lv-group, #sx-age, #sx-signin, #sx-signin-dialog) { border-radius: var(--r-lg) !important; }
html:not(#sx370a):not(#sx370b):not(#sx370c) body :is(.bt-tabs.is-date, .bt-quick-sum, .bt-views, .gp-tabs, .ow-seg, .mw-opt, .lv-days, .dashboard-mobile-nav a, .dw-settings > summary, .bt-qmore > summary, input.lineup-search, main select, .lineup-lab select, select.scoutics-footer__region, .button) { border-radius: var(--r-md) !important; }
html:not(#sx370a):not(#sx370b):not(#sx370c) body :is(.bt-views button, .gp-tabs button, .lv-day, .bt-tabs.is-date button, .save-badge, .badge, .inj-tag, .ow-seg button) { border-radius: var(--r-sm) !important; }
html:not(#sx370a):not(#sx370b):not(#sx370c) body :is(.billing-toggle, .billing-toggle button, .popular-badge) { border-radius: var(--r-pill) !important; }

/* ---- type: a 12px floor for reading text (sizes were down to 8px). Only elements measured below 12px are listed, so nothing
   larger shrinks. The pitch's player labels go to 11px semibold (they sit inside the player discs). ---- */
html:not(#sx370a):not(#sx370b):not(#sx370c) body :is(
  .sc-tabbar a, .sc-tabbar a span,
  .bt-badge, .bt-ev, .dw-live-count, .dw-source, .dw-record, a.bt-tile i, .gx-row.is-head > span, .gp-panel label small, .bt label small,
  .wrap > .eyebrow, .analysis .eyebrow, .pgh-copy .sx-eyebrow, .home-next .hn-k,
  .ht .badge, .ht .table-note, .ht th, .progress-top .badge, .analysis .table-note, .analysis th,
  .inj-tag, .pitch-legend, .pitch-legend__item, .pitch-legend__item b, .pitch-legend__lead, .nfl-roster-count, .sim-steps b
) { font-size: 12px !important; }
/* the bottom bar's labels at 12px keep 4.5:1 on its frosted white on every page (the simulator pages tinted them #71717A) */
html:not(#sx370a):not(#sx370b):not(#sx370c) body .sc-tabbar a:not([aria-current="page"]) { color: #52525B !important; }
html:not(#sx370a):not(#sx370b):not(#sx370c) body .sc-tabbar a[aria-current="page"] { color: #08111C !important; }
html:not(#sx370a):not(#sx370b):not(#sx370c) body :is(button.native-lineup-player, button.fantasy-player) :is(span, small) { font-size: 11px !important; font-weight: 600 !important; }

/* ---- phones ---- */
@media (max-width: 767px) {
  /* inputs at 16px, so iPhone Safari does not zoom the page when one gets focus */
  html:not(#sx370a):not(#sx370b):not(#sx370c) body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="color"]):not([type="file"]), select, textarea) { font-size: 16px !important; }
  /* 44px targets */
  html:not(#sx370a):not(#sx370b):not(#sx370c) body summary { min-height: 44px; box-sizing: border-box; align-content: center; }
  html:not(#sx370a):not(#sx370b):not(#sx370c) body .sx-link { display: inline-flex !important; align-items: center; min-height: 44px; padding-bottom: 0 !important; border-bottom: 0 !important;
    text-decoration: underline !important; text-decoration-thickness: 1px !important; text-underline-offset: 4px; }
  html:not(#sx370a):not(#sx370b):not(#sx370c) body .sxs-x { width: 44px !important; height: 44px !important; min-width: 44px; }
  html:not(#sx370a):not(#sx370b):not(#sx370c) body #sx-signin .sxs-x { top: 2px !important; right: 2px !important; }
  html:not(#sx370a):not(#sx370b):not(#sx370c) body button.button { min-height: 44px !important; }
  /* the Ask button and the bottom bar never cover the end of the page or the control that has focus */
  /* (only on pages with the bottom bar, so the simulator's own frames keep their height) */
  html.sc-has-tabbar { scroll-padding-bottom: calc(57px + 64px + env(safe-area-inset-bottom, 0px)); }
  html:not(#sx370a):not(#sx370b):not(#sx370c).sc-has-tabbar body main { padding-bottom: max(72px, calc(56px + env(safe-area-inset-bottom, 0px))) !important; }
}

/* ---- zoomed in a lot (400%, 320x256): the fixed bars would take 40% of the screen; the page's own menu stays at the top ---- */
@media (max-width: 767px) and (max-height: 480px) {
  html:not(#sx370a):not(#sx370b):not(#sx370c) body .sc-tabbar { display: none !important; }
  html:not(#sx370a):not(#sx370b):not(#sx370c).sc-has-tabbar body { padding-bottom: 0 !important; }
}

/* release 370 (design panel): the Ask button tucked away while the simulator frame has focus on a phone */
@media (max-width:640px){.sca-fab.is-tucked{opacity:0;pointer-events:none;transform:translateY(80px)}}