/* These styles are generated from project.scss. */

/* ==== NFL-broadcast theme tokens ==== */
:root {
  --brand: #013369;
  --brand-dark: #012247;
  --brand-rgb: 1 51 105;
  --brand-tint: #e6ecf3;
  --accent: #d50a0a;
  --accent-dark: #a80808;
  --surface: #ffffff;
  --surface-muted: #f2f4f7;
  --ink: #10203a;
  --ink-muted: #5a6577;
  --line: #d9dee7;
  --radius: 0.5rem;
  --shadow-sm: 0 1px 2px rgb(1 34 71 / 8%), 0 2px 10px rgb(1 34 71 / 5%);
  --font-sans: system-ui, -apple-system, "Segoe UI", roboto, "Helvetica Neue",
    arial, sans-serif;
  --font-display: "Oswald", "Arial Narrow", var(--font-sans);

  /* Map onto the Bootstrap 5.2 CSS variables it exposes */
  --bs-primary: var(--brand);
  --bs-primary-rgb: var(--brand-rgb);
  --bs-link-color: var(--brand);
  --bs-link-hover-color: var(--accent-dark);
  --bs-body-color: var(--ink);
  --bs-body-bg: var(--surface-muted);
  --bs-border-radius: var(--radius);
  --bs-border-color: var(--line);
  --bs-font-sans-serif: var(--font-sans);
}

body {
  background: var(--surface-muted);
}

/* Condensed display type for headings and chrome */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.display-5 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

/* Section heading rule */
.game-shell h1 {
  border-bottom: 3px solid var(--accent);
  padding-bottom: 0.3rem;
}

/* Buttons / links / focus */
.btn-primary {
  --bs-btn-bg: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand-dark);
  --bs-btn-hover-border-color: var(--brand-dark);
  --bs-btn-active-bg: var(--brand-dark);
  --bs-btn-active-border-color: var(--brand-dark);
  --bs-btn-disabled-bg: var(--brand);
  --bs-btn-disabled-border-color: var(--brand);
}

.btn-outline-secondary {
  --bs-btn-hover-bg: var(--brand-tint);
  --bs-btn-hover-border-color: var(--brand);
  --bs-btn-hover-color: var(--brand-dark);
}

.btn {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

a {
  text-underline-offset: 0.15em;
}

/* Cards */
.card {
  --bs-card-border-color: var(--line);
  --bs-card-border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.card-title {
  color: var(--ink);
}

/* Badges — consistent muted palette */
.badge.text-bg-primary {
  background-color: var(--brand) !important;
}

.badge.text-bg-success {
  background-color: #1b6b43 !important;
}

.badge.text-bg-danger {
  background-color: var(--accent) !important;
}

.badge.text-bg-light {
  color: var(--ink-muted) !important;
  background-color: var(--surface-muted) !important;
  border-color: var(--line) !important;
}

.badge {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0.04em;
}

/* Standings: rank marker, points badge, player name — shared by the
   dashboard preview and the full standings page */
.standings-rank {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--brand);
}

.points-badge {
  display: inline-block;
  min-width: 2rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  text-align: center;
}

.player-name {
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* A pick exists but isn't revealed yet — a letter tag, not a status dot,
   and deliberately neutral (not green/red): it says nothing about whether
   the pick was right, only that it exists. */
.pick-status {
  font-family: var(--font-display);
  font-size: 0.75rem;
}

.pick-status--in {
  font-weight: 700;
  color: var(--ink);
}

/* Tables */
.table {
  --bs-table-bg: transparent;
  --bs-table-striped-bg: var(--surface-muted);
}

.table thead th {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #fff;
  background: var(--brand);
  border-bottom-color: var(--brand-dark);
}

/* Alerts keep legacy hooks */
.alert-debug {
  color: black;
  background-color: white;
  border-color: #d6e9c6;
}

.alert-error {
  color: #b94a48;
  background-color: #f2dede;
  border-color: #eed3d7;
}

/* ==== App chrome ==== */
.app-navbar {
  background: var(--brand);
  border-bottom: 3px solid var(--accent);
}

.app-navbar .navbar-brand {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.app-main {
  padding-top: 1.25rem;
  padding-bottom: 2rem;
}

.game-shell {
  max-width: 640px;
  margin: 0 auto;
}

/* Secondary nav: strip on desktop, fixed tab bar on mobile */
.game-subnav {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.game-nav__list {
  list-style: none;
  display: flex;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
}

.game-subnav .game-nav__list {
  max-width: 640px;
  margin: 0 auto;
}

.game-nav__link {
  display: block;
  padding: 0.75rem 1rem;
  text-align: center;
  text-decoration: none;
  color: var(--ink-muted);
  border-radius: var(--radius);
  min-height: 44px;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.game-nav__link.is-active {
  color: var(--brand);
  background: var(--brand-tint);
  box-shadow: inset 0 -3px 0 var(--accent);
}

.game-nav__link:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}

.game-bottomnav {
  position: fixed;
  inset: auto 0 0;
  z-index: 1030;
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding: 0.25rem 0.5rem;
  padding-bottom: calc(0.25rem + env(safe-area-inset-bottom));
}

.game-bottomnav .game-nav__list > li {
  flex: 1 1 0;
  min-width: 0;
}

/* Five tabs on a phone-width row: single uppercase words (no spaces to break
   on) won't shrink below their own width by default, so the row overflows
   past the viewport and the last tab goes missing. Let labels wrap. */
.game-bottomnav .game-nav__link {
  padding: 0.5rem 0.25rem;
  font-size: 0.7rem;
  letter-spacing: 0.01em;
}

.game-bottomnav .game-nav__label {
  display: block;
  overflow-wrap: break-word;
  line-height: 1.15;
}

@media (width <= 767.98px) {
  body.has-app-chrome {
    padding-bottom: 4.5rem;
  }
}

/* Pick form: one card per game, two team choices inside */
.pick-card-list {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.pick-card {
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.pick-card--chosen {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px var(--brand-tint);
}

.pick-card__head {
  float: none;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  align-items: baseline;
  padding: 0.55rem 0.85rem;
  background: var(--surface-muted);
  border-bottom: 1px solid var(--line);
  font-size: 0.85rem;
}

.pick-card__kickoff {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink);
}

.pick-card__where {
  color: var(--ink-muted);
}

.pick-card__teams {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
}

.pick-card__at {
  display: flex;
  align-items: center;
  padding: 0 0.5rem;
  font-family: var(--font-display);
  color: var(--ink-muted);
}

.pick-choice {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.85rem 0.5rem;
  min-height: 64px;
  cursor: pointer;
}

.pick-card__teams > .pick-choice:last-child {
  border-left: 1px solid var(--line);
}

.pick-choice:hover:not(.pick-choice--disabled) {
  background: var(--brand-tint);
}

.pick-choice--selected,
.pick-choice:has(.pick-choice__input:checked) {
  background: var(--brand);
  color: #fff;
}

.pick-choice--selected:hover,
.pick-choice:has(.pick-choice__input:checked):hover {
  background: var(--brand);
}

.pick-choice--disabled {
  color: var(--ink-muted);
  cursor: not-allowed;
}

.pick-choice__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.pick-choice__name {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.pick-choice__abbr {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
}

.pick-choice--selected .pick-choice__abbr,
.pick-choice:has(.pick-choice__input:checked) .pick-choice__abbr {
  color: rgb(255 255 255 / 75%);
}

.pick-choice__reason {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.75rem;
  font-style: italic;
}

.pick-choice__input:focus-visible + .pick-choice__team {
  outline: 3px solid var(--brand);
  outline-offset: 3px;
}

.pick-submit {
  width: 100%;
}

@media (width >= 576px) {
  .pick-submit {
    width: auto;
  }
}

.prose-narrow {
  max-width: 44rem;
}

/* Picks grid: dense season-at-a-glance table */
.picks-grid {
  font-size: 0.8rem;
  white-space: nowrap;
}

.picks-grid th,
.picks-grid td {
  padding: 0.25rem 0.5rem;
}

.picks-grid thead th {
  font-family: var(--font-display);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}