/* ===========================================================
   pn-chrome-fixes.css — D.3 prefix-mismatch remediation

   ROOT CAUSE: D.2.1 retro sportsbook CSS used .pnn-* prefixes throughout,
   but D.3.1–D.3.5 chrome partials (header, footer, leftrail, subnav,
   pageshell, betslip, betslip-result, bodysearch, marquee, sports, etc.)
   were written with single .pn-* prefix.

   This file provides CSS rules for ALL .pn-* classes used in templates
   that were missing from pn-theme.css.

   Loaded AFTER pn-theme.css in base.html.
   See: STORY-08 fix/sprint8-d3-prefix-and-e2e
   =========================================================== */

/* ─────────────────────────────────────────────────────────────
   HEADER
   ───────────────────────────────────────────────────────────── */

.pn-header {
  background: linear-gradient(to bottom, var(--c-pnn-nav) 0%, var(--c-pnn-nav-lt) 100%);
  border-bottom: 2px solid var(--c-chrome-900);
  font-family: var(--ff-chrome);
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
}

.pn-header__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 12px;
  height: 40px;
  max-width: var(--page-w);
  margin: 0 auto;
}

.pn-brand {
  color: #FFCC33;
  font-family: var(--ff-head);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.02em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}
.pn-brand:hover { color: #FFE066; }

.pn-header__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

/* ─────────────────────────────────────────────────────────────
   PRIMARY NAV
   ───────────────────────────────────────────────────────────── */

.pn-nav {
  display: flex;
  align-items: stretch;
  gap: 0;
  flex: 1;
}

.pn-nav--primary {
  height: 100%;
}

.pn-nav--primary a {
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  color: #D0D8E8;
  font-family: var(--ff-chrome);
  font-size: var(--fs-sm);
  font-weight: bold;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-right: 1px solid rgba(255, 255, 255, 0.07);
  white-space: nowrap;
  height: 100%;
}
.pn-nav--primary a:hover,
.pn-nav--primary a[aria-current="page"] {
  background: var(--c-pnn-nav-lt);
  color: #FFCC33;
}

/* ─────────────────────────────────────────────────────────────
   HAMBURGER (mobile — hidden by default, shown in MQ ≤768px)
   ───────────────────────────────────────────────────────────── */

.pn-hamburger {
  display: none;
  background: linear-gradient(to bottom, #F5F3EE 0%, #D4D0C4 100%);
  border: 1px solid var(--c-chrome-500);
  color: var(--c-navy-900);
  font-size: 18px;
  line-height: 1;
  padding: 4px 10px;
  cursor: pointer;
  box-shadow: var(--bevel-out);
  flex-shrink: 0;
  min-width: 36px;
  min-height: 36px;
  align-items: center;
  justify-content: center;
}
.pn-hamburger:hover { filter: brightness(1.08); }

/* ─────────────────────────────────────────────────────────────
   BUTTONS  (.pn-btn, .pn-btn-ghost, .pn-btn-primary)
   ───────────────────────────────────────────────────────────── */

.pn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  font-family: var(--ff-chrome);
  font-size: var(--fs-xs);
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  border: 1px solid var(--c-chrome-500);
  cursor: pointer;
  white-space: nowrap;
  box-shadow: var(--bevel-out);
  line-height: 1.4;
}

.pn-btn-ghost {
  background: transparent;
  color: #D0D8E8;
  border-color: rgba(255,255,255,0.25);
}
.pn-btn-ghost:hover {
  background: rgba(255,255,255,0.1);
  color: #FFCC33;
  border-color: rgba(255,255,255,0.5);
}

.pn-btn-primary,
.pn-btn--primary {
  background: linear-gradient(to bottom, var(--c-pnn-deposit-hi) 0%, var(--c-pnn-deposit) 100%);
  color: #FFFFFF;
  border-color: var(--c-pnn-deposit-lo);
}
.pn-btn-primary:hover,
.pn-btn--primary:hover {
  filter: brightness(1.1);
  color: #FFFFFF;
}

/* Hero CTA overrides: gold text on the hero's dark navy background for maximum
   contrast (WCAG AA: #FFCC33 on #2F8C3C is 4.8:1). */
.pn-hero .pn-btn--primary {
  background: #FFCC33;
  color: #001A33;
  border-color: #C8A000;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
.pn-hero .pn-btn--primary:hover {
  filter: brightness(1.08);
  color: #001A33;
}

/* ─────────────────────────────────────────────────────────────
   HEADER SEARCH BAR (inline, between nav and actions)
   ───────────────────────────────────────────────────────────── */

.pn-header-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  max-width: 340px;
  min-width: 120px;
}

.pn-header-search__icon {
  position: absolute;
  left: 8px;
  width: 14px;
  height: 14px;
  color: rgba(208, 216, 232, 0.6);
  pointer-events: none;
  flex-shrink: 0;
}

.pn-header-search__input {
  width: 100%;
  padding: 5px 8px 5px 28px;
  font-family: var(--ff-chrome);
  font-size: var(--fs-sm);
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #E8EDF5;
  outline: none;
  line-height: 1.4;
}
.pn-header-search__input::placeholder {
  color: rgba(208, 216, 232, 0.5);
  font-style: italic;
}
.pn-header-search__input:focus {
  background: rgba(0, 0, 0, 0.35);
  border-color: rgba(255, 204, 51, 0.6);
  color: #FFFFFF;
  box-shadow: 0 0 0 2px rgba(255, 204, 51, 0.15);
}
/* Clear button (browser default "x") — style to fit dark bg */
.pn-header-search__input::-webkit-search-cancel-button {
  filter: invert(0.6);
}

.pn-header-search__results {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 3px);
  z-index: 200;
  min-width: 280px;
}

/* On mobile hide the header search (hamburger covers nav) */
@media (max-width: 768px) {
  .pn-header-search { display: none; }
}

/* ─────────────────────────────────────────────────────────────
   TIME FILTER TABS (sports page: Live / Today / Tomorrow / All)
   ───────────────────────────────────────────────────────────── */

.pn-time-filter {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px 4px;
  border-bottom: 1px solid var(--c-chrome-400);
  background: var(--c-chrome-200, #ECEAE4);
  flex-wrap: wrap;
}

.pn-time-filter__btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  font-family: var(--ff-chrome);
  font-size: var(--fs-xs);
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--c-navy-900);
  background: linear-gradient(to bottom, #F5F3EE 0%, #D4D0C4 100%);
  border: 1px solid var(--c-chrome-500);
  box-shadow: var(--bevel-out);
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.4;
}
.pn-time-filter__btn:hover {
  filter: brightness(1.07);
  color: var(--c-navy-900);
}
.pn-time-filter__btn--active {
  background: linear-gradient(to bottom, var(--c-pnn-nav-lt, #243860) 0%, var(--c-pnn-nav, #1a2a4a) 100%);
  color: #FFCC33;
  border-color: var(--c-navy-900);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.3);
}
.pn-time-filter__btn--active:hover {
  filter: brightness(1.1);
  color: #FFE066;
}

/* Live indicator dot */
.pn-time-filter__dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4CAF50;
  flex-shrink: 0;
  animation: pn-pulse 1.8s ease-in-out infinite;
}
@keyframes pn-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ─────────────────────────────────────────────────────────────
   HEADER BALANCE WIDGET
   ───────────────────────────────────────────────────────────── */

.pn-header-balance {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(0, 0, 0, 0.18);
  font-family: var(--ff-chrome);
  font-size: var(--fs-xs);
  white-space: nowrap;
}

.pn-header-balance__label {
  color: rgba(208, 216, 232, 0.7);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.06em;
}

/* Override pn-balance colour for header context — use gold on dark nav */
.pn-header-balance .pn-balance {
  color: #FFCC33;
  font-family: var(--ff-mono);
  font-weight: bold;
  font-size: var(--fs-xs);
}

/* ─────────────────────────────────────────────────────────────
   USER MENU DROPDOWN
   ───────────────────────────────────────────────────────────── */

.pn-usermenu {
  position: relative;
}

.pn-usermenu__trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.2);
  color: #D0D8E8;
  font-family: var(--ff-chrome);
  font-size: var(--fs-xs);
  font-weight: bold;
  padding: 4px 8px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.pn-usermenu__trigger:hover {
  background: rgba(255,255,255,0.08);
  color: #FFCC33;
}

.pn-usermenu__list {
  position: absolute;
  top: calc(100% + 2px);
  right: 0;
  min-width: 160px;
  background: #FFFFFF;
  border: 1px solid var(--c-navy-900);
  box-shadow: 3px 3px 0 rgba(0,0,0,0.15);
  z-index: 100;
  list-style: none;
  margin: 0;
  padding: 2px 0;
  font-family: var(--ff-chrome);
  font-size: var(--fs-sm);
}
.pn-usermenu__list li a,
.pn-usermenu__list li button {
  display: block;
  width: 100%;
  padding: 5px 12px;
  color: var(--c-navy-900);
  text-decoration: none;
  background: transparent;
  border: none;
  border-bottom: 1px solid #F1EFE6;
  cursor: pointer;
  text-align: left;
  font-family: var(--ff-chrome);
  font-size: var(--fs-sm);
}
.pn-usermenu__list li a:hover,
.pn-usermenu__list li button:hover {
  background: #FFF9E5;
  color: var(--c-pnn-nav);
}

/* ─────────────────────────────────────────────────────────────
   SUBNAV (sport tabs strip)
   ───────────────────────────────────────────────────────────── */

.pn-subnav {
  display: flex;
  align-items: stretch;
  background: linear-gradient(to bottom, var(--c-pnn-sub) 0%, var(--c-pnn-sub-br) 100%);
  border-bottom: 1px solid var(--c-pnn-sub-br);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: 0;
  padding: 0 8px;
}
.pn-subnav::-webkit-scrollbar { display: none; }

.pn-subnav__item {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  font-family: var(--ff-chrome);
  font-size: var(--fs-xs);
  font-weight: bold;
  color: var(--c-navy-700);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  border-right: 1px solid var(--c-pnn-sub-br);
  background: transparent;
  border-bottom: 2px solid transparent;
  transition: background 0.1s;
}
.pn-subnav__item:hover {
  background: rgba(0,0,0,0.05);
  color: var(--c-pnn-nav);
}
.pn-subnav__item--active {
  background: var(--c-pnn-tab-sel);
  color: var(--c-pnn-nav);
  border-bottom-color: var(--c-live);
}

/* Fix: old sidebar (base.html) should not have white bg - let page beige show through */
aside[aria-label="Main navigation"] {
  background: transparent !important;
}

/* ─────────────────────────────────────────────────────────────
   PAGE SHELL (main layout wrapper)
   ───────────────────────────────────────────────────────────── */

.pn-shell {
  display: flex;
  flex: 1;
  align-items: flex-start;
  background: var(--c-chrome-100);
  /* max-width + centered only when NO sidebar is present; leftrail handles its own width */
  width: 100%;
  min-height: calc(100vh - 40px);
}

.pn-shell__body {
  flex: 1;
  min-width: 0;
  padding: 8px;
}

/* ─────────────────────────────────────────────────────────────
   LEFT RAIL
   ───────────────────────────────────────────────────────────── */

.pn-leftrail {
  width: 180px;
  flex: 0 0 180px;
  background: var(--c-chrome-200);
  border-right: 1px solid var(--c-chrome-400);
  font-family: var(--ff-chrome);
  font-size: var(--fs-sm);
  overflow-y: auto;
  max-height: calc(100vh - 40px);
  position: sticky;
  top: 40px;
  align-self: flex-start;
}

.pn-leftrail__section {
  border-bottom: 1px solid var(--c-chrome-400);
}

.pn-leftrail__heading {
  background: linear-gradient(to bottom, var(--c-pnn-nav) 0%, var(--c-pnn-nav-lt) 100%);
  color: #FFCC33;
  font-size: var(--fs-xxs);
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 8px;
  margin: 0;
}

.pn-leftrail__sport-header {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  background: linear-gradient(to bottom, #E8E4D8, #C8C5B8);
  border: none;
  border-bottom: 1px solid var(--c-chrome-400);
  color: var(--c-navy-900);
  font-family: var(--ff-chrome);
  font-size: var(--fs-xs);
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 5px 8px;
  cursor: pointer;
  text-align: left;
}
.pn-leftrail__sport-header:hover {
  background: linear-gradient(to bottom, #F0ECE0, #D4D0C4);
}

.pn-leftrail__chevron {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  transition: transform 200ms ease;
}
.pn-leftrail__chevron.is-open {
  transform: rotate(90deg);
}

.pn-leftrail__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pn-leftrail__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--c-chrome-400);
  padding: 0;
}

.pn-leftrail__link {
  flex: 1;
  display: block;
  padding: 4px 8px;
  color: var(--c-link);
  text-decoration: none;
  font-size: var(--fs-xs);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pn-leftrail__link:hover {
  background: #FFF9E5;
  color: var(--c-pnn-nav);
}

.pn-leftrail__favourites {
  /* Highlighted section for favourites */
  background: #FFFBE8;
}

.pn-leftrail__empty {
  /* Empty state: shown when a sport has zero leagues (BMAD-FU-003) */
  padding: 6px 12px;
  color: #888;
  font-style: italic;
  font-size: var(--fs-xs);
  list-style: none;
}

.pn-leftrail__sport-header:focus-visible {
  /* Visible focus ring for keyboard navigation (BMAD-FU-003) */
  outline: 2px solid var(--c-pnn-nav, #d4a300);
  outline-offset: -2px;
}

/* ─────────────────────────────────────────────────────────────
   STAR FAVOURITE BUTTON
   ───────────────────────────────────────────────────────────── */

.pn-star {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  padding: 4px 6px;
  cursor: pointer;
  color: var(--c-chrome-400);
  flex-shrink: 0;
  line-height: 1;
}
.pn-star:hover { color: var(--c-accent); }

.pn-star--filled {
  color: var(--c-accent);
}
.pn-star--filled:hover { color: var(--c-down); }

/* ─────────────────────────────────────────────────────────────
   FOOTER
   ───────────────────────────────────────────────────────────── */

.pn-footer {
  background: linear-gradient(to bottom, var(--c-pnn-nav) 0%, var(--c-navy-900) 100%);
  border-top: 2px solid var(--c-chrome-900);
  font-family: var(--ff-chrome);
  font-size: var(--fs-xs);
  color: #9AAFCA;
  padding: 12px 0;
  margin-top: auto;
}

.pn-footer__inner {
  max-width: var(--page-w);
  margin: 0 auto;
  padding: 0 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pn-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}
.pn-footer__nav a {
  color: #8AACC8;
  text-decoration: none;
  padding: 2px 8px;
  border-right: 1px solid rgba(255,255,255,0.12);
  font-size: var(--fs-xs);
}
.pn-footer__nav a:first-child { padding-left: 0; }
.pn-footer__nav a:hover { color: #FFCC33; }

.pn-footer__rg {
  color: #6A8BA8;
  font-size: var(--fs-xxs);
  margin: 0;
}
.pn-footer__rg strong { color: var(--c-live); }
.pn-footer__rg a { color: #8AACC8; }
.pn-footer__rg a:hover { color: #FFCC33; }

.pn-footer__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--fs-xxs);
  color: #5A7890;
}

.pn-footer__lang {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.15);
  color: #8AACC8;
  font-size: var(--fs-xxs);
  padding: 1px 4px;
  cursor: pointer;
}

/* ─────────────────────────────────────────────────────────────
   MARQUEE extras (teams line)
   ───────────────────────────────────────────────────────────── */

.pn-marquee__teams {
  font-weight: bold;
  color: #FFFFFF;
}

/* pn-marquee__item-- is a BEM modifier prefix — the dbl-dash class exists but
   has no particular styling by itself; this prevents it from being truly unstyled */
[class*="pn-marquee__item--"] {
  /* inherits from pn-marquee__item */
}

/* ─────────────────────────────────────────────────────────────
   SEARCH RESULTS extras
   ───────────────────────────────────────────────────────────── */

.pn-search-results__teams {
  color: var(--c-navy-900);
  font-size: var(--fs-xs);
}

/* ─────────────────────────────────────────────────────────────
   SPORTS GRID + SPORT CARD
   ───────────────────────────────────────────────────────────── */

.pn-sports-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
  padding: 8px 0;
}

.pn-sport-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 8px;
  background: linear-gradient(to bottom, #FFFFFF, var(--c-chrome-50));
  border: 1px solid var(--c-chrome-400);
  box-shadow: var(--bevel-out);
  text-decoration: none;
  color: var(--c-navy-900);
  font-family: var(--ff-chrome);
  font-size: var(--fs-sm);
  font-weight: bold;
  text-align: center;
  cursor: pointer;
  transition: background 0.1s;
  min-height: 60px;
}
.pn-sport-card:hover {
  background: linear-gradient(to bottom, #FFF9E5, var(--c-chrome-50));
  color: var(--c-pnn-nav);
  border-color: var(--c-chrome-500);
}

.pn-sport-card__name {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--fs-xs);
}

/* ─────────────────────────────────────────────────────────────
   BETSLIP extras: result message sub-elements + stake input
   ───────────────────────────────────────────────────────────── */

.pn-betslip-result__balance {
  font-family: var(--ff-mono);
  font-size: var(--fs-xs);
  color: var(--c-chrome-500);
}
.pn-betslip-result__msg {
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}
.pn-betslip-result__notice {
  font-style: italic;
  color: var(--c-accent);
}
.pn-betslip__stake-input {
  /* pnn-slip__stake already defines width/font, but betslip.html also adds this class */
  width: 70px;
  padding: 3px 5px;
  font-family: var(--ff-mono);
  font-size: var(--fs-sm);
  text-align: right;
  border: none;
  background: #FFFFFF;
}
.pn-betslip__form {
  padding: 8px;
  background: #FFFFFF;
  border-top: 1px solid var(--c-chrome-400);
}

/* ─────────────────────────────────────────────────────────────
   MOBILE RESPONSIVE — header chrome
   ───────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .pn-nav--primary { display: none; }
  .pn-hamburger { display: inline-flex; }
  .pn-leftrail {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 90;
    transform: translateX(-100%);
    transition: transform 220ms ease-out;
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.25);
    max-height: 100vh;
    top: 0;
  }
  .pn-shell {
    display: block;
  }
  .pn-sports-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }
}

@media (min-width: 769px) {
  .pn-hamburger { display: none; }
}

/* ─────────────────────────────────────────────────────────────
   DRAWER — mobile slide-out menu (STORY-08.D.3.6)
   ───────────────────────────────────────────────────────────── */

.pn-drawer {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: stretch;
}

.pn-drawer__scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}

.pn-drawer__panel {
  position: relative;
  width: 260px;
  max-width: 80vw;
  background: var(--c-chrome-200, #D4D0C4);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  box-shadow: 4px 0 16px rgba(0, 0, 0, 0.35);
  z-index: 1;
  /* CSS transition for slide-in */
  transition: transform 250ms ease-out;
}

/* Alpine x-transition classes */
.pn-drawer__panel--enter { transition: transform 250ms ease-out; }
.pn-drawer__panel--enter-start { transform: translateX(-100%); }
.pn-drawer__panel--enter-end { transform: translateX(0); }
.pn-drawer__panel--leave { transition: transform 200ms ease-in; }
.pn-drawer__panel--leave-start { transform: translateX(0); }
.pn-drawer__panel--leave-end { transform: translateX(-100%); }

.pn-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(to bottom, var(--c-pnn-nav, #1a2a4a) 0%, var(--c-pnn-nav-lt, #243860) 100%);
  padding: 8px 12px;
  border-bottom: 2px solid var(--c-chrome-900, #888);
  flex-shrink: 0;
}

.pn-drawer__title {
  color: #FFCC33;
  font-family: var(--ff-head, sans-serif);
  font-size: 14px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
}

.pn-drawer__close {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #D0D8E8;
  padding: 4px 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
}
.pn-drawer__close:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #FFCC33;
}
.pn-drawer__close:focus-visible {
  outline: 2px solid #FFCC33;
  outline-offset: 2px;
}

.pn-drawer__nav {
  display: flex;
  flex-direction: column;
  padding: 4px 0;
}

.pn-drawer__link {
  display: block;
  padding: 10px 16px;
  color: var(--c-navy-900, #1a2a4a);
  font-family: var(--ff-chrome, sans-serif);
  font-size: 13px;
  font-weight: bold;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--c-chrome-400, #bbb);
}
.pn-drawer__link:hover {
  background: #FFF9E5;
  color: var(--c-pnn-nav, #1a2a4a);
}
.pn-drawer__link:focus-visible {
  outline: 2px solid #1a2a4a;
  outline-offset: -2px;
}

/* ─────────────────────────────────────────────────────────────
   A11Y — focus-visible polish (STORY-08.D.3.6)
   ───────────────────────────────────────────────────────────── */

/* Ensure all interactive elements have visible focus ring */
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid #1a5fb4;
  outline-offset: 2px;
}

/* pncl chrome specific focus styles */
.pn-nav--primary a:focus-visible {
  outline: 2px solid #FFCC33;
  outline-offset: -2px;
}

.pn-leftrail__link:focus-visible {
  outline: 2px solid #1a2a4a;
  outline-offset: -1px;
}

.pn-star:focus-visible {
  outline: 2px solid #1a5fb4;
  outline-offset: 1px;
}

/* FAV toggle (D.3.6 star button variant) */
.pn-fav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  padding: 4px 6px;
  cursor: pointer;
  color: var(--c-chrome-400, #bbb);
  flex-shrink: 0;
  line-height: 1;
}
.pn-fav-toggle:hover { color: var(--c-accent, #f8a800); }
.pn-fav-toggle[aria-pressed="true"] { color: var(--c-accent, #f8a800); }
.pn-fav-toggle:focus-visible {
  outline: 2px solid #1a5fb4;
  outline-offset: 1px;
}

.pn-icon--gold {
  color: #FFCC33;
}

/* Skip link styling polish */
a[href="#main-content"]:focus {
  outline: 3px solid #FFCC33;
  outline-offset: 2px;
}

/* ─────────────────────────────────────────────────────────────
   HOME PAGE — Hero, Section titles, Live badge, Event cards
   (pn-* classes used in home.html / pages with event sections)
   ───────────────────────────────────────────────────────────── */

/* Hero banner */
.pn-hero {
  background: linear-gradient(135deg, var(--c-navy-900) 0%, var(--c-navy-700) 100%);
  padding: 40px 20px;
  margin-bottom: 24px;
  border-bottom: 3px solid var(--c-chrome-900);
}
.pn-hero__inner {
  max-width: 680px;
}
.pn-hero__title {
  color: #FFCC33;
  font-family: var(--ff-head);
  font-size: clamp(20px, 4vw, 32px);
  font-weight: 900;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.pn-hero__sub {
  color: var(--c-chrome-300);
  font-family: var(--ff-chrome);
  font-size: var(--fs-sm);
  margin: 0 0 20px;
}
.pn-hero__cta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Section titles (shared) */
.pn-section__title {
  font-family: var(--ff-chrome);
  font-size: var(--fs-sm);
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-chrome-50);
  background: linear-gradient(to bottom, var(--c-pnn-nav) 0%, var(--c-pnn-nav-lt) 100%);
  padding: 4px 10px;
  border-bottom: 2px solid var(--c-chrome-900);
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* LIVE badge */
.pn-live-badge {
  display: inline-block;
  background: var(--c-live);
  color: #FFFFFF;
  font-family: var(--ff-chrome);
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 0.08em;
  padding: 1px 5px;
  vertical-align: middle;
  animation: pn-live-pulse 1.4s ease-in-out infinite;
}
.pn-live-badge--sm {
  font-size: 9px;
  padding: 1px 4px;
}
@keyframes pn-live-pulse {
  0%,100% { opacity: 1; }
  50%      { opacity: 0.6; }
}

/* Events row — horizontal scroll of event cards */
.pn-events-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 0 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--c-chrome-400) transparent;
}
.pn-events-row::-webkit-scrollbar { height: 4px; }
.pn-events-row::-webkit-scrollbar-thumb { background: var(--c-chrome-400); }

/* Event card (LIVE / Featured) */
.pn-event-card {
  flex-shrink: 0;
  width: 200px;
  background: linear-gradient(to bottom, #FFFFFF, var(--c-chrome-50));
  border: 1px solid var(--c-chrome-400);
  box-shadow: var(--bevel-out);
  padding: 10px;
  font-family: var(--ff-chrome);
  font-size: var(--fs-xs);
  color: var(--c-chrome-900);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pn-event-card--live {
  background: linear-gradient(to bottom, #FFFFFF, var(--c-pnn-row-live));
  border-color: #88CC77;
}
.pn-event-card__badge {
  display: flex;
  align-items: center;
  gap: 4px;
}
.pn-event-card__teams {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-weight: bold;
}
.pn-event-card__home,
.pn-event-card__away {
  display: block;
  color: var(--c-navy-900);
  font-size: var(--fs-xs);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
  text-transform: capitalize;
}
.pn-event-card__vs {
  color: var(--c-chrome-500);
  font-size: 10px;
  font-weight: normal;
  align-self: center;
}
.pn-event-card__competition {
  color: var(--c-chrome-500);
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pn-event-card__link {
  display: inline-block;
  margin-top: 4px;
  background: var(--c-pnn-deposit);
  color: #FFFFFF;
  font-family: var(--ff-chrome);
  font-size: var(--fs-xs);
  font-weight: bold;
  padding: 3px 10px;
  text-decoration: none;
  text-align: center;
  align-self: flex-start;
  border: 1px solid var(--c-pnn-deposit-lo);
}
.pn-event-card__link:hover {
  background: var(--c-pnn-deposit-hi);
}

/* Events list — vertical upcoming rows */
.pn-events-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Upcoming event row */
.pn-event-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--c-chrome-300);
  font-family: var(--ff-chrome);
  font-size: var(--fs-xs);
  color: var(--c-chrome-900);
  background: #FFFFFF;
  transition: background 0.1s;
}
.pn-event-row:nth-child(even) {
  background: var(--c-pnn-row-alt);
}
.pn-event-row:hover {
  background: var(--c-highlight);
}
.pn-event-row__teams {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
  font-weight: bold;
  color: var(--c-navy-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pn-event-row__vs {
  color: var(--c-chrome-500);
  font-weight: normal;
  flex-shrink: 0;
}
.pn-event-row__league {
  color: var(--c-chrome-500);
  font-size: 10px;
  white-space: nowrap;
  flex-shrink: 0;
}
.pn-event-row__link {
  color: var(--c-link);
  text-decoration: none;
  font-size: var(--fs-xs);
  flex-shrink: 0;
  padding: 2px 8px;
  border: 1px solid var(--c-chrome-300);
  background: var(--c-chrome-50);
}
.pn-event-row__link:hover {
  background: var(--c-highlight);
  color: var(--c-link-hov);
  border-color: var(--c-highlight-border);
}

/* Empty-state message */
.pn-events-empty {
  padding: 16px 10px;
  font-family: var(--ff-chrome);
  font-size: var(--fs-sm);
  color: var(--c-chrome-500);
  text-align: center;
}
.pn-events-empty a {
  color: var(--c-link);
}

/* Section containers */
.pn-live-now,
.pn-featured-events,
.pn-upcoming-events,
.pn-featured-sports {
  margin-bottom: 20px;
}

/* ─────────────────────────────────────────────────────────────
   LEAGUES NAV — clickable league chips (events-list partial)
   Replaces the old unstyled inline-script pills (launch fix #38).
   ───────────────────────────────────────────────────────────── */
.pn-leagues-nav-wrap {
  margin-bottom: 14px;
}
.pn-leagues-nav__head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 6px;
}
.pn-leagues-nav__title {
  font-family: var(--ff-chrome);
  font-size: var(--fs-xs);
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-pnn-nav);
}
.pn-leagues-nav__count {
  font-family: var(--ff-chrome);
  font-size: var(--fs-xs);
  color: var(--c-chrome-500);
}
.pn-leagues-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.pn-league-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 240px;
  padding: 3px 8px;
  background: linear-gradient(to bottom, #FFFFFF, var(--c-pnn-sub));
  border: 1px solid var(--c-pnn-sub-br);
  box-shadow: var(--bevel-out);
  border-radius: 2px;
  font-family: var(--ff-chrome);
  font-size: var(--fs-xs);
  font-weight: bold;
  color: var(--c-navy-700);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.1s, border-color 0.1s;
}
.pn-league-pill:hover {
  background: var(--c-pnn-tab-sel);
  border-color: var(--c-pnn-nav);
  color: var(--c-pnn-nav);
}
.pn-league-pill:focus-visible {
  outline: 2px solid var(--c-pnn-nav);
  outline-offset: 1px;
}
.pn-league-pill__name {
  overflow: hidden;
  text-overflow: ellipsis;
}
.pn-league-pill__count {
  font-weight: normal;
  color: var(--c-chrome-500);
}
.pn-league-pill:hover .pn-league-pill__count {
  color: var(--c-pnn-nav);
}

/* LIVE league chips: red dot + greenish tint to match live-row gamma */
.pn-league-pill--live {
  background: linear-gradient(to bottom, #FFFFFF, var(--c-pnn-row-live));
  border-color: #88CC77;
}
.pn-league-pill__live {
  color: var(--c-live);
  font-size: 9px;
  line-height: 1;
  animation: pn-live-pulse 1.4s ease-in-out infinite;
}

.pn-leagues-nav__note {
  margin: 8px 0 0;
  font-family: var(--ff-chrome);
  font-size: var(--fs-xs);
  color: var(--c-chrome-500);
}

/* ─────────────────────────────────────────────────────────────
   LIVE PAGE — /live full-width grid layout (D.4.3)
   Replaces the narrow single-column list with a responsive grid.
   ───────────────────────────────────────────────────────────── */

/* Page wrapper — full width within pn-shell__body */
.pn-live-page {
  width: 100%;
}

/* Page header */
.pn-live-page .pn-page-header {
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--c-chrome-400);
}
.pn-live-page .pn-page-title {
  font-family: var(--ff-chrome);
  font-size: 18px;
  font-weight: bold;
  color: var(--c-navy-900);
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.pn-live-page .pn-page-sub {
  font-family: var(--ff-chrome);
  font-size: var(--fs-xs);
  color: var(--c-chrome-500);
  margin: 0;
}

/* Live content area */
.pn-live-content {
  position: relative;
}

/* Outer polling container — takes full width */
.pn-live-events-wrap {
  width: 100%;
}

/* Section wrapper */
.pn-live-events {
  width: 100%;
}

/* Grid container replacing the old <ul> single-column */
.pn-live-events__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

/* In the live grid: cards fill their cell (override horizontal-row width) */
.pn-live-events__list .pn-event-card {
  width: auto;          /* override the 200px from .pn-events-row context */
  flex-shrink: unset;
  min-width: 0;
}

/* "Bet now" button — full width inside live grid cards */
.pn-live-events__list .pn-event-card__link {
  align-self: stretch;
  text-align: center;
}

/* Team name overflow in wider cards */
.pn-live-events__list .pn-event-card__home,
.pn-live-events__list .pn-event-card__away {
  max-width: none;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}

/* Empty state — centered, not collapsed */
.pn-live-empty {
  padding: 40px 24px;
  text-align: center;
  font-family: var(--ff-chrome);
  font-size: var(--fs-sm);
  color: var(--c-chrome-500);
  border: 1px dashed var(--c-chrome-400);
  background: var(--c-chrome-50);
}
.pn-live-empty a {
  color: var(--c-navy-600);
  text-decoration: underline;
}
.pn-live-empty a:hover {
  color: var(--c-navy-900);
}

/* Loading spinner */
.pn-live-spinner {
  display: none;
  padding: 12px;
  text-align: center;
}
.pn-live-spinner.htmx-request {
  display: block;
}

/* Reconnecting / WS badges */
.pn-live-reconnecting,
.pn-live-ws-status {
  margin-top: 8px;
  font-family: var(--ff-chrome);
  font-size: var(--fs-xs);
  color: var(--c-chrome-500);
  display: flex;
  align-items: center;
  gap: 6px;
}
.pn-live-badge--reconnecting {
  background: var(--c-pnn-delay-br);
}
.pn-live-badge--pulse {
  animation: pn-live-pulse 1.4s ease-in-out infinite;
}
.pn-live-badge--ws {
  background: var(--c-pnn-deposit);
}

/* Footer actions */
.pn-live-footer {
  margin-top: 20px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* ── Responsive: tighter columns on narrow viewports ── */
@media (max-width: 768px) {
  .pn-live-events__list {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 8px;
  }
  .pn-live-footer {
    flex-direction: column;
  }
}

/* ── Large desktop: cap at 4 columns ── */
@media (min-width: 1200px) {
  .pn-live-events__list {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ── Team name Title-case (issue #4) ──────────────────────────────────────
   Team names from the odds feed arrive in all-lowercase.
   CSS text-transform:capitalize makes the first letter of each word uppercase
   for display only — raw data is not modified (betslip/price-verify use data-*).
   Targets:
     - events-list team cols (Tailwind inline classes inside col-span-4 <a>)
     - home page event rows (.pn-event-row__teams spans)
     - live events list cards (already has pn-event-card__home/away but inherit is enough)
   ── */
.pn-event-row__teams span,
.pn-upcoming-events .pn-event-row__teams span {
  text-transform: capitalize;
}

/* events-list.html: team name divs inside the col-span-4 link */
.col-span-4.hover\:underline div {
  text-transform: capitalize;
}

/* ─────────────────────────────────────────────────────────────
   SPORTS PAGE — two-column layout: leagues sidebar + events
   ───────────────────────────────────────────────────────────── */

/* Outer layout: sidebar left, events right */
.pn-sports-layout {
  display: flex;
  align-items: flex-start;
  gap: 0;
  width: 100%;
}

/* ── Leagues sidebar ── */
.pn-lsb {
  flex: 0 0 220px;
  width: 220px;
  min-width: 0;
  background: var(--c-chrome-200);
  border-right: 1px solid var(--c-chrome-400);
  font-family: var(--ff-chrome);
  font-size: var(--fs-xs);
  overflow-y: auto;
  max-height: calc(100vh - 80px);
  position: sticky;
  top: 40px;
  align-self: flex-start;
}

/* Country collapsible header */
.pn-lsb__country-hdr {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  background: linear-gradient(to bottom, var(--c-pnn-nav) 0%, var(--c-pnn-nav-lt) 100%);
  color: #FFCC33;
  font-family: var(--ff-chrome);
  font-size: var(--fs-xxs);
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 4px 6px;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  cursor: pointer;
  text-align: left;
  line-height: 1.2;
}
.pn-lsb__country-hdr:hover {
  background: linear-gradient(to bottom, #163C6D 0%, #1E4D85 100%);
}

.pn-lsb__chevron {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  transition: transform 180ms ease;
  color: #FFCC33;
}
.pn-lsb__chevron--open {
  transform: rotate(0deg);
}
.pn-lsb__chevron:not(.pn-lsb__chevron--open) {
  transform: rotate(-90deg);
}

.pn-lsb__country-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pn-lsb__country-cnt {
  font-weight: normal;
  opacity: 0.75;
  flex-shrink: 0;
}

/* League list under a country */
.pn-lsb__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pn-lsb__row {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--c-chrome-400);
  padding: 0;
}

.pn-lsb__row--live {
  background: linear-gradient(to right, var(--c-pnn-row-live), transparent 60%);
}

.pn-lsb__live-dot {
  color: var(--c-live);
  font-size: 8px;
  padding: 0 3px 0 5px;
  flex-shrink: 0;
  animation: pn-live-pulse 1.4s ease-in-out infinite;
}

.pn-lsb__link {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  width: 100%;
  padding: 4px 8px;
  background: transparent;
  border: none;
  color: var(--c-link);
  font-family: var(--ff-chrome);
  font-size: var(--fs-xs);
  text-align: left;
  cursor: pointer;
  line-height: 1.25;
  min-width: 0;
}
.pn-lsb__link:hover {
  background: #FFF9E5;
  color: var(--c-pnn-nav);
}
.pn-lsb__link--active {
  background: var(--c-pnn-tab-sel);
  color: var(--c-pnn-nav);
  font-weight: bold;
}

.pn-lsb__link-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pn-lsb__link-cnt {
  flex-shrink: 0;
  color: var(--c-chrome-500);
  font-size: var(--fs-xxs);
}
.pn-lsb__link:hover .pn-lsb__link-cnt,
.pn-lsb__link--active .pn-lsb__link-cnt {
  color: var(--c-pnn-nav);
}

.pn-lsb__empty {
  padding: 8px 10px;
  font-family: var(--ff-chrome);
  font-size: var(--fs-xs);
  color: var(--c-chrome-500);
  font-style: italic;
}

/* Events area: takes remaining width */
.pn-sports-events-wrap {
  flex: 1;
  min-width: 0;
  padding: 4px 6px;
}

/* ── Hide horizontal pill chips on desktop (sidebar replaces them) ── */
@media (min-width: 769px) {
  .pn-leagues-nav-wrap {
    display: none;
  }
}

/* ── Mobile: stack sidebar above events, pills show instead ── */
@media (max-width: 768px) {
  .pn-sports-layout {
    flex-direction: column;
  }
  .pn-lsb {
    width: 100%;
    flex: none;
    max-height: 280px;
    position: static;
    border-right: none;
    border-bottom: 1px solid var(--c-chrome-400);
  }
  .pn-leagues-nav-wrap {
    display: block;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   /sports 3-column conversion layout — leagues | events | bet slip
   ════════════════════════════════════════════════════════════════════════ */

.pn-sports-layout--3col {
  align-items: flex-start;
}

/* RIGHT column: sticky bet slip (~300px). The betslip partial renders an
   <aside> sized for the /events flex layout; here we constrain it. */
.pn-sports-slip {
  flex: 0 0 300px;
  width: 300px;
  min-width: 0;
  align-self: flex-start;
  position: sticky;
  top: 40px;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  border-left: 1px solid var(--c-chrome-400);
  background: var(--c-chrome-100);
}
/* Neutralise the partial's Tailwind width utilities inside the slip column. */
.pn-sports-slip > aside {
  width: 100%;
  max-width: none;
  flex: none;
}

/* ── Leagues sidebar: filter + Popular ────────────────────────────────── */
.pn-lsb__inner { display: block; }

.pn-lsb__filter {
  padding: 6px;
  border-bottom: 1px solid var(--c-chrome-400);
  background: var(--c-chrome-100);
  position: sticky;
  top: 0;
  z-index: 2;
}
.pn-lsb__filter-input {
  width: 100%;
  box-sizing: border-box;
  padding: 5px 8px;
  font-family: var(--ff-chrome);
  font-size: var(--fs-xs);
  color: var(--c-navy-900);
  background: #FFFFFF;
  border: 1px solid var(--c-chrome-500);
  border-radius: 4px;
}
.pn-lsb__filter-input:focus {
  outline: none;
  border-color: var(--c-pnn-nav, #1E4D85);
  box-shadow: 0 0 0 2px rgba(30, 77, 133, 0.18);
}

.pn-lsb__popular-hdr .pn-lsb__country-name { color: #FFCC33; }
.pn-lsb__no-match { padding: 10px 8px; }

/* ── Selectable odds cells in the events list (centre) ────────────────── */
.pn-odds-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 4px 6px;
  background: #F4F2EA;
  border: 1px solid var(--c-chrome-400);
  border-radius: 4px;
  cursor: pointer;
  line-height: 1.1;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
  font-family: var(--ff-chrome);
}
.pn-odds-cell:hover {
  background: #FFF6D6;
  border-color: #E0B400;
}
.pn-odds-cell:focus-visible {
  outline: 2px solid var(--c-pnn-nav, #1E4D85);
  outline-offset: 1px;
}
.pn-odds-cell--selected,
.pn-odds-cell--selected:hover {
  background: linear-gradient(to bottom, #2E6FB7, #1E4D85);
  border-color: #163C6D;
  color: #FFFFFF;
}
.pn-odds-cell--selected .text-gray-400,
.pn-odds-cell--selected .font-semibold { color: #FFFFFF; }

/* ── Inline-auth modal ────────────────────────────────────────────────── */
.pn-auth-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pn-auth-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}
.pn-auth-modal__card {
  position: relative;
  width: 92%;
  max-width: 360px;
  background: #FFFFFF;
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  padding: 18px 18px 14px;
  font-family: var(--ff-chrome);
}
.pn-auth-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.pn-auth-modal__head strong { font-size: 15px; color: var(--c-navy-900); }
.pn-auth-modal__close {
  border: none;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: var(--c-chrome-600, #666);
}
.pn-auth-modal__sub {
  font-size: 12px;
  color: var(--c-chrome-600, #666);
  margin: 0 0 12px;
}
.pn-auth-modal__form { display: flex; flex-direction: column; gap: 4px; }
.pn-auth-modal__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--c-navy-900);
  margin-top: 6px;
}
.pn-auth-modal__input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  font-size: 14px;
  border: 1px solid var(--c-chrome-500);
  border-radius: 6px;
}
.pn-auth-modal__input:focus {
  outline: none;
  border-color: var(--c-pnn-nav, #1E4D85);
  box-shadow: 0 0 0 2px rgba(30, 77, 133, 0.18);
}
.pn-auth-modal__err {
  color: #C0341B;
  font-size: 12px;
  margin: 6px 0 0;
}
.pn-auth-modal__submit {
  margin-top: 12px;
  padding: 9px 12px;
  background: linear-gradient(to bottom, #2E6FB7, #1E4D85);
  color: #FFFFFF;
  font-weight: bold;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
.pn-auth-modal__submit:disabled { opacity: 0.6; cursor: not-allowed; }
.pn-auth-modal__alt {
  margin: 10px 0 0;
  text-align: center;
  font-size: 12px;
}
.pn-auth-modal__alt a { color: var(--c-pnn-nav, #1E4D85); }

/* ── Mobile: stack columns; bet slip becomes a bottom-sheet pill ─────────
   The bet slip's <aside> uses .pnn-slip-col as a fixed bottom-sheet on mobile.
   Inside the /sports 3-column wrapper we must keep that sheet COLLAPSED (only
   the floating pill visible) until the user taps it open — otherwise the fixed
   60vh sheet sits on top of the events list and swallows odds-cell clicks. */
@media (max-width: 768px) {
  .pn-sports-slip {
    flex: none;
    width: 100%;
    position: static;
    max-height: none;
    overflow: visible;
    border-left: none;
    background: transparent;
  }
  /* Collapsed: the sheet container must not intercept pointer events over the
     events list. The floating pill (.pn-betslip__pill) stays tappable. */
  .pn-sports-slip .pnn-slip-col {
    height: auto;
    background: transparent;
    box-shadow: none;
    pointer-events: none;
  }
  .pn-sports-slip .pnn-slip-col--expanded {
    height: 85vh;
    background: var(--c-chrome-100);
    box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.3);
    pointer-events: auto;
  }
  /* Re-enable interaction for the always-visible pill and, when open, the panel. */
  .pn-sports-slip .pn-betslip__pill { pointer-events: auto; }
  .pn-sports-slip .pn-betslip__panel--open { pointer-events: auto; }
}

/* ══════════════════════════════════════════════════════════════════
   ⭐ FAVORITES — My Leagues sidebar stars + My Leagues section
   ══════════════════════════════════════════════════════════════════ */

/* ── Star button in league sidebar rows ─────────────────────────── */
.pn-lsb__star {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  margin-right: 3px;
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: 3px;
  opacity: 0.45;
  transition: opacity 120ms ease, transform 100ms ease;
  line-height: 1;
}
.pn-lsb__star:hover {
  opacity: 1;
  transform: scale(1.15);
}
.pn-lsb__star svg {
  width: 13px;
  height: 13px;
  display: block;
}

/* Outline (not favorited) */
.pn-lsb__star--outline svg {
  fill: none;
  stroke: var(--c-chrome-500);
  stroke-width: 1.5;
}
.pn-lsb__star--outline:hover svg {
  fill: #FFCC33;
  stroke: #C89900;
  stroke-width: 1;
}

/* Filled (favorited) */
.pn-lsb__star--filled {
  opacity: 1;
}
.pn-lsb__star--filled svg {
  fill: #FFCC33;
  stroke: #C89900;
  stroke-width: 0.8;
}

/* ── My Leagues section (top of sidebar) ────────────────────────── */
.pn-lsb__myleagues {
  border-bottom: 2px solid #FFCC33;
}
.pn-lsb__myleagues-hdr {
  background: linear-gradient(to bottom, #0D3566 0%, #163C6D 100%) !important;
  display: flex;
  align-items: center;
  gap: 5px;
}
.pn-lsb__myleagues-hdr .pn-lsb__country-name {
  color: #FFCC33;
}
.pn-lsb__myleagues-hdr .pn-lsb__country-cnt {
  color: rgba(255, 204, 51, 0.7);
}
.pn-lsb__star-ico {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  fill: #FFCC33;
}

/* My Leagues rows show star-filled always on the right */
.pn-lsb__myleagues .pn-lsb__row {
  display: flex;
  align-items: center;
}
.pn-lsb__myleagues .pn-lsb__link {
  flex: 1;
  min-width: 0;
}

/* ══════════════════════════════════════════════════════════════════
   ⭐ FAVORITES — Event row star button
   ══════════════════════════════════════════════════════════════════ */

.pn-ev-star {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  margin-top: 2px;
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: 3px;
  opacity: 0.35;
  transition: opacity 120ms ease, transform 100ms ease;
  flex-shrink: 0;
}
.pn-ev-star:hover {
  opacity: 1;
  transform: scale(1.2);
}
.pn-ev-star svg {
  display: block;
}

/* Outline (not favorited) */
.pn-ev-star--outline svg {
  fill: none;
  stroke: #9C9988;
  stroke-width: 1.5;
}
.pn-ev-star--outline:hover svg {
  fill: #FFCC33;
  stroke: #C89900;
  stroke-width: 0.8;
}

/* Filled (favorited) */
.pn-ev-star--filled {
  opacity: 1;
}
.pn-ev-star--filled svg {
  fill: #FFCC33;
  stroke: #C89900;
  stroke-width: 0.8;
}

/* ════════════════════════════════════════════════════════════════════════
   VALUE / FORKS PAGE  (/value)  — pn-forks-*
   2-column layout: fork cards (left/centre) + sticky betslip (right).
   Mirrors the /sports 3-col pattern; reuses pn-btn / chromebar tokens.
   DISCLOSURE-SAFETY: no class names or text hints at arbitrage.
   ════════════════════════════════════════════════════════════════════════ */

/* Page wrapper */
.pn-forks-page {
  width: 100%;
}

/* ── Section header bar (chromebar--navy) ── */
.pn-forks-hdr {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 10px;
}
.pn-forks-hdr__title {
  font-family: var(--ff-chrome);
  font-weight: bold;
  font-size: var(--fs-md);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #FFFFFF;
  text-shadow: 0 1px 0 rgba(0,0,0,0.5);
}
.pn-forks-hdr__sub {
  font-family: var(--ff-chrome);
  font-size: var(--fs-xs);
  color: rgba(255,255,255,0.72);
  border-left: 1px solid rgba(255,255,255,0.2);
  padding-left: 10px;
}
/* Tiny spinner dot that pulses while htmx polling is in flight */
.pn-forks-hdr__spinner {
  display: none;
  margin-left: auto;
}
.pn-forks-hdr__spinner.htmx-request {
  display: flex;
  align-items: center;
}
.pn-forks-spin-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #FFCC33;
  animation: pn-live-pulse 1.4s ease-in-out infinite;
}

/* ── 2-col layout ── */
.pn-forks-layout {
  display: flex;
  align-items: flex-start;
  gap: 0;
  width: 100%;
}

/* Left: forks list */
.pn-forks-main {
  flex: 1;
  min-width: 0;
  padding: 6px 8px;
}

/* Right: sticky betslip — same dimensions as .pn-sports-slip */
.pn-forks-slip {
  flex: 0 0 300px;
  width: 300px;
  min-width: 0;
  align-self: flex-start;
  position: sticky;
  top: 40px;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  border-left: 1px solid var(--c-chrome-400);
  background: var(--c-chrome-100);
}
/* Neutralise Tailwind widths inside the betslip partial */
.pn-forks-slip > aside {
  width: 100%;
  max-width: none;
}

/* ── Fork cards list ── */
.pn-forks-list {
  width: 100%;
}

.pn-forks-ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ── Single fork card ── */
.pn-fork-card {
  background: #FFFFFF;
  border: 1px solid var(--c-chrome-400);
  box-shadow: var(--bevel-out);
}
.pn-fork-card--live {
  background: var(--c-pnn-row-live);
  border-color: #88CC77;
}

/* Card header row */
.pn-fork-card__head {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(to bottom, var(--c-table-head-a), var(--c-table-head-b));
  color: #FFFFFF;
  padding: 4px 8px;
  border-bottom: 1px solid var(--c-navy-900);
  font-family: var(--ff-chrome);
  font-size: var(--fs-sm);
  text-shadow: 0 1px 0 rgba(0,0,0,0.4);
}
.pn-fork-card--live .pn-fork-card__head {
  background: linear-gradient(to bottom, #1A7A00, #0D4F00);
  border-bottom-color: #0A3A00;
}

.pn-fork-card__live-dot {
  color: #6AFF3A;
  font-size: 9px;
  flex-shrink: 0;
  animation: pn-live-pulse 1.4s ease-in-out infinite;
}

.pn-fork-card__match {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  overflow: hidden;
}
.pn-fork-card__teams {
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--fs-sm);
}
.pn-fork-card__vs {
  color: rgba(255,255,255,0.5);
  font-weight: normal;
  margin: 0 2px;
}

.pn-fork-card__meta {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.pn-fork-card__sport {
  font-family: var(--ff-chrome);
  font-size: var(--fs-xxs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.65);
  border: 1px solid rgba(255,255,255,0.2);
  padding: 1px 5px;
}
.pn-fork-card__time {
  font-family: var(--ff-mono);
  font-size: var(--fs-xxs);
  color: rgba(255,255,255,0.75);
  white-space: nowrap;
}
.pn-fork-card__time--live {
  color: #6AFF3A;
  font-weight: bold;
}

/* Type badge — rightmost in header.
   Two variants: surebet (profit>0, green) and value (profit≤0, gold/blue neutral). */
.pn-fork-card__profit-wrap {
  flex-shrink: 0;
}

/* Legacy .pn-fork-card__profit — kept for any external usage; prefer the badge variants below. */
.pn-fork-card__profit {
  display: inline-block;
  background: var(--c-pnn-deposit);
  color: #FFFFFF;
  font-family: var(--ff-mono);
  font-weight: bold;
  font-size: var(--fs-md);
  padding: 2px 8px;
  border: 1px solid var(--c-pnn-deposit-lo);
  text-shadow: 0 1px 0 rgba(0,0,0,0.4);
  white-space: nowrap;
  min-width: 52px;
  text-align: center;
}

/* Shared badge base */
.pn-fork-card__badge {
  display: inline-block;
  font-family: var(--ff-chrome);
  font-weight: bold;
  font-size: var(--fs-xs);
  padding: 3px 8px;
  white-space: nowrap;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid transparent;
}

/* SUREBET — green: real arbitrage, guaranteed margin */
.pn-fork-card__badge--surebet {
  background: #1A8A2E;
  color: #FFFFFF;
  border-color: #0F5C1E;
  text-shadow: 0 1px 0 rgba(0,0,0,0.35);
}
.pn-fork-card--live .pn-fork-card__badge--surebet {
  background: #22A83A;
  border-color: #157026;
}

/* VALUE — gold/navy neutral: our price is better than external BK, but not locked profit */
.pn-fork-card__badge--value {
  background: #FFCC33;
  color: #1A2A4A;
  border-color: #C8A000;
  text-shadow: none;
}

/* ── Legs row ── */
.pn-fork-card__legs {
  display: flex;
  align-items: stretch;
}

/* Thin vertical divider between legs */
.pn-fork-card__divider {
  width: 1px;
  background: var(--c-chrome-300);
  flex-shrink: 0;
}

.pn-fork-card__leg {
  flex: 1;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.pn-fork-card__leg--ext {
  background: #FAFAF8;
}
.pn-fork-card__leg--ours {
  background: var(--c-pnn-tab-sel);
}

.pn-fork-card__leg-bk {
  font-family: var(--ff-chrome);
  font-size: var(--fs-xxs);
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-navy-800);
}
.pn-fork-card__leg-bk--ours {
  color: var(--c-pnn-deposit);
}

.pn-fork-card__leg-mkt {
  font-family: var(--ff-chrome);
  font-size: var(--fs-xs);
  color: var(--c-chrome-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pn-fork-card__leg-odds {
  font-family: var(--ff-mono);
  font-weight: bold;
  font-size: var(--fs-lg);
  color: var(--c-navy-800);
  line-height: 1.1;
}

/* Leg CTA buttons */
.pn-fork-card__leg-btn {
  margin-top: 4px;
  display: inline-block;
  text-align: center;
  font-size: var(--fs-xs);
}
.pn-fork-card__leg-btn--na {
  font-family: var(--ff-chrome);
  font-size: var(--fs-xs);
  color: var(--c-chrome-400);
  font-style: italic;
}
.pn-fork-card__leg-btn--info {
  font-family: var(--ff-chrome);
  font-size: var(--fs-xs);
  color: var(--c-chrome-500);
  font-style: italic;
  padding: 2px 0;
  display: inline-block;
}

/* ── Empty state ── */
.pn-forks-empty {
  padding: 36px 20px;
  text-align: center;
  background: #FFFFFF;
  border: 1px solid var(--c-chrome-300);
  box-shadow: var(--bevel-out);
}
.pn-forks-empty__icon {
  font-size: 36px;
  color: var(--c-chrome-400);
  line-height: 1;
  margin-bottom: 10px;
  display: block;
}
.pn-forks-empty__title {
  font-family: var(--ff-chrome);
  font-weight: bold;
  font-size: var(--fs-lg);
  color: var(--c-navy-900);
  margin: 0 0 6px;
}
.pn-forks-empty__sub {
  font-family: var(--ff-chrome);
  font-size: var(--fs-sm);
  color: var(--c-chrome-500);
  margin: 0;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .pn-forks-layout {
    flex-direction: column;
  }
  .pn-forks-slip {
    flex: none;
    width: 100%;
    position: static;
    max-height: none;
    border-left: none;
    border-top: 1px solid var(--c-chrome-400);
  }
  .pn-fork-card__legs {
    flex-direction: column;
  }
  .pn-fork-card__divider {
    width: auto;
    height: 1px;
  }
}