/* Platform header, buttons, and status chips (phase 2).
   Display: Saira. UI: Inter. Reaction times: JetBrains Mono.
   Lane red and lane blue are the existing race-data colors. This file does not
   repaint the tree. */

:root {
  /* z-index scale for header chrome: header 80, mobile menu 90, account menu 100, sheets/modals 200+ */
  --ptl-z-nav: 90;
  --pf-bg: #090B0E;
  --pf-graphite: #1B2028;
  --pf-charcoal: #303641;
  --pf-red: #E3263B;
  --pf-white: #F3F4F5;
  --pf-muted: #9AA3AE;
  --pf-green: #e3263b;
  --pf-lane-red: #ff2121;
  --pf-lane-blue: #1a6fa8;
  --pf-font-display: 'Saira', system-ui, sans-serif;
  --pf-font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --pf-font-num: 'JetBrains Mono', ui-monospace, monospace;
}

.pf-head,
.psh-head.pf-head {
  position: sticky;
  top: 0;
  z-index: 80;
  background: var(--pf-bg);
  color: var(--pf-white);
  border-bottom: 1px solid var(--pf-charcoal);
  font-family: var(--pf-font-ui);
}
.pf-head .pf-btn,
.pf-head #psh-acct {
  width: auto;
  height: auto;
  min-height: 44px;
  border-radius: 4px;
}
.pf-head .psh-head__row {
  position: relative;
  max-width: 1240px;
  height: 56px;
  margin: 0 auto;
  padding: 0 12px;
  gap: 8px;
  min-width: 0;
}
.pf-logo { display: flex; align-items: center; min-width: 0; flex: 0 1 auto; }
.pf-head .psh-logo { height: 32px; width: auto; max-width: 168px; display: block; }
.pf-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: 0 0 auto; min-width: 0; }
.pf-guest, .pf-user { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pf-guest[hidden], .pf-user[hidden], .psh-bal[hidden], .psh-navbadge[hidden] { display: none !important; }

.pf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 4px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--pf-white);
  font-family: var(--pf-font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.pf-btn--primary { background: var(--pf-red); border-color: var(--pf-red); color: #fff; }
.pf-btn--primary:hover { filter: brightness(1.06); }
.pf-btn--outline { background: transparent; border-color: var(--pf-white); color: var(--pf-white); }
.pf-btn--outline:hover { background: rgba(243, 244, 245, .06); }
.pf-btn--ghost { background: transparent; border-color: transparent; color: var(--pf-white); }
.pf-btn--ghost:hover { background: rgba(243, 244, 245, .06); }
.pf-head a:focus-visible,
.pf-head button:focus-visible,
.pf-menu a:focus-visible,
.pf-menu button:focus-visible {
  outline: 2px solid #F3F4F5;
  outline-offset: 2px;
}
.pf-mine {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 4px;
  color: var(--pf-white);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.pf-head .psh-bal { border-radius: 4px; background: var(--pf-graphite); border-color: var(--pf-charcoal); color: var(--pf-white); }
.pf-head .psh-conn { color: var(--pf-muted); }
.pf-head .psh-conn .lbl { display: none; }

.pf-navbtn {
  display: inline-flex;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.pf-navbtn span { pointer-events: none; display: block; height: 2px; width: 18px; margin: 0 auto; background: var(--pf-white); }

.pf-head .psh-nav {
  display: none;
  align-items: center;
  gap: 2px;
  border: 0;
  margin: 0;
  padding: 0;
  max-width: none;
}
.pf-head .psh-nav > a,
.pf-play > a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 10px;
  color: var(--pf-muted);
  font-family: var(--pf-font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.pf-head .psh-nav > a.on,
.pf-head .psh-nav > a[aria-current="page"],
.pf-play.on > a,
.pf-play > a.on {
  color: var(--pf-white);
  border-bottom-color: var(--pf-red);
}
.pf-head .psh-nav > a:hover,
.pf-play > a:hover { color: var(--pf-white); }

.pf-play { position: relative; display: flex; align-items: center; }
.pf-play__btn {
  width: 28px;
  height: 44px;
  border: 0;
  background: transparent;
  color: var(--pf-muted);
  cursor: pointer;
}
.pf-play__btn::before { content: ""; display: block; margin: 0 auto; border: 5px solid transparent; border-top-color: currentColor; border-bottom: 0; }
.pf-play__menu {
  display: none;
  min-width: 220px;
  padding: 6px;
  background: var(--pf-graphite);
  border: 1px solid var(--pf-charcoal);
  border-radius: 8px;
}
.pf-play__menu a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  color: var(--pf-white);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  border-radius: 6px;
}
.pf-play__menu a:hover { background: var(--pf-charcoal); }

@media (min-width: 1100px) {
  .pf-navbtn { display: none; }
  .pf-head .psh-nav { display: flex; flex: 1 1 auto; }
  .pf-play.is-open .pf-play__menu {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 90;
  }
}
@media (max-width: 1099px) {
  .pf-head.is-open .psh-nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    /* Fixed under the header (top set by ptl-nav.js at open time) so page
       wrappers with overflow-x:hidden can never clip it. Stays inside the
       header stacking layer (header z 80) > page content and rails,
       < account menu (100) and modals. */
    position: fixed;
    left: 0;
    right: 0;
    top: var(--ptl-nav-top, 56px);
    z-index: var(--ptl-z-nav, 90);
    max-height: calc(100vh - var(--ptl-nav-top, 56px));
    max-height: calc(100dvh - var(--ptl-nav-top, 56px));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 8px max(8px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px));
    background: #090B0E;
    border-bottom: 1px solid var(--pf-charcoal);
  }
  /* Background scroll lock while the menu is open; released on every close path. */
  html.ptl-nav-open, html.ptl-nav-open body { overflow: hidden; }
  html.ptl-nav-open .pshell { overflow-y: hidden; }
  .pf-head.is-open .pf-play { flex-direction: column; align-items: stretch; }
  .pf-head.is-open .pf-play__btn { display: none; }
  .pf-head.is-open .pf-play__menu {
    display: flex;
    flex-direction: column;
    position: static;
    min-width: 0;
    padding: 0 0 4px 12px;
    background: transparent;
    border: 0;
  }
  .pf-head.is-open .psh-nav > a,
  .pf-head.is-open .pf-play > a { border-bottom: 0; }
  .pf-head.is-open .psh-nav > a.on,
  .pf-head.is-open .pf-play.on > a { box-shadow: inset 3px 0 0 var(--pf-red); }
  .psh-conn, .lp-topstats { display: none !important; }
  .pf-head.is-open .pf-drawer-extra {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 14px;
    color: var(--pf-white);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: none;
  }
}
.pf-drawer-extra { display: none; }

@media (max-width: 719px) {
  .pf-mine { display: none !important; }
}
@media (max-width: 420px) {
  .pf-head .psh-head__row { padding: 0 8px; gap: 6px; }
  .pf-head .psh-logo { height: 24px; max-width: 108px; }
  .pf-actions, .pf-guest, .pf-user { gap: 6px; }
  .pf-btn { min-height: 44px; padding: 0 8px; font-size: 11px; letter-spacing: .02em; }
  .pf-head .psh-conn .lbl { display: none; }
  .pf-head .psh-bal .esc { display: none; }
}

.pf-menu {
  position: fixed;
  top: 60px;
  right: 10px;
  z-index: 100;
  min-width: 210px;
  padding: 6px;
  background: var(--pf-graphite);
  border: 1px solid var(--pf-charcoal);
  border-radius: 10px;
  font-family: var(--pf-font-ui);
}
.pf-menu a, .pf-menu button {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--pf-white);
  font: 600 14px/1.2 var(--pf-font-ui);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.pf-menu a:hover, .pf-menu button:hover { background: var(--pf-charcoal); }
.pf-menu .pf-out { color: var(--pf-red); }

.pf-chip {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--pf-font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.pf-chip--available { color: var(--pf-green); background: #1a1f26; border-color: #e3263b; }
.pf-chip--registering { color: #E7C36A; background: #2a2416; border-color: #5c4a22; }
.pf-chip--live { color: #ffffff; background: var(--pf-green); border-color: var(--pf-green); }
.pf-chip--full { color: var(--pf-white); background: var(--pf-charcoal); border-color: var(--pf-charcoal); }
.pf-chip--completed { color: var(--pf-muted); background: var(--pf-graphite); border-color: var(--pf-charcoal); }
.pf-chip--unavailable { color: #8B949E; background: transparent; border-color: var(--pf-charcoal); }

.pf-page { max-width: 880px; margin: 0 auto; padding: 28px 16px 64px; color: var(--pf-white); font-family: var(--pf-font-ui); }
.pf-page h1 { margin: 0 0 8px; font-family: var(--pf-font-display); font-weight: 700; font-size: 32px; letter-spacing: 0; }
.pf-page .pf-lead { margin: 0 0 20px; color: var(--pf-muted); }
.pf-list { display: grid; gap: 10px; }
.pf-list a {
  display: block;
  padding: 14px 16px;
  background: var(--pf-graphite);
  border: 1px solid var(--pf-charcoal);
  border-radius: 8px;
  color: var(--pf-white);
  text-decoration: none;
}
.pf-list a b { display: block; font-size: 16px; margin-bottom: 4px; }
.pf-list a span { color: var(--pf-muted); font-size: 14px; }
.pf-private {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: 12px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--pf-charcoal);
  border-radius: 8px;
  background: transparent;
  color: var(--pf-muted);
  font-size: 13px;
}
.pf-private__k { color: var(--pf-white); font-weight: 600; }
.pf-private__sep { color: var(--pf-muted); }
.pf-private button {
  min-height: 36px;
  padding: 0 12px;
  border-radius: 6px;
  border: 1px solid #3a424d;
  background: #171c24;
  color: var(--pf-white);
  font: 600 13px/1 Inter, system-ui, sans-serif;
  cursor: pointer;
}
.pf-private form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.pf-private label { color: var(--pf-muted); }
.pf-private input {
  width: 72px;
  min-height: 36px;
  padding: 0 8px;
  border-radius: 6px;
  border: 1px solid #3a424d;
  background: #101318;
  color: var(--pf-white);
  font: 600 14px/1 Inter, system-ui, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}

@media (max-width: 719px) {
  body:has(.pf-head) { padding-bottom: env(safe-area-inset-bottom, 0px); }
}
.pshell:has(.pf-head) .psh-filters { top: 56px; }
.pshell:has(.pf-head) .psh-feed { padding-bottom: 28px; }

/* Lobby alignment: same surfaces and a red primary action. Green stays for live. */
.lobby-pro {
  --lp-bg: #090B0E;
  --lp-panel: #1B2028;
  --lp-panel-2: #151b24;
  --lp-line: #303641;
  --lp-line-2: #303641;
  --lp-ink: #F3F4F5;
  --lp-ink-2: #A7B0BA;
  --lp-ink-3: #8B949E;
  --lp-accent: #e3263b;
  --lp-accent-ink: #ffffff;
  --lp-action: #E3263B;
  --lp-action-ink: #F3F4F5;
  --lp-red: #E3263B;
  background: var(--lp-bg);
}
.lobby-pro .lp-qm__go,
.lobby-pro .pd-tile--primary,
.lobby-pro .lt-btn,
.lobby-pro .psh-mega__r .enter,
.lobby-pro .wkf-go,
.lobby-pro .lp-fcard__go,
.lobby-pro .lp-prac__go,
.lobby-pro .psh-chip.on {
  background: var(--lp-action);
  border-color: var(--lp-action);
  color: var(--lp-action-ink);
  box-shadow: none;
}
.lobby-pro .lt-btn.ghost { background: transparent; border-color: var(--lp-line-2); color: var(--lp-ink); }