/* 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;
}

/* Numbered standings markers */
.list-group-numbered > .list-group-item::before {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--brand);
}

/* 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;
}

@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;
}