/*
 * LINEHOUND navigation -- docs/DESIGN_SYSTEM.md section 3 (the shell).
 *
 *   .site-nav          the PUBLIC landing page: no rail, no tab bar, one
 *                      sticky top bar, plus (2026-09-15) a right-hand
 *                      coming-soon slot and, on phone, a sport row and a
 *                      text-link row -- still used by web/landing.html
 *   .rail / .tabbar    the APP shell's two forms of the same destinations
 *                      -- a 228px labelled rail at >= 900px (sport
 *                      heading, numbered items with sub-lines), a bottom
 *                      tab bar (labels only) below it
 *
 * Chrome-owned, CHR-6. Flat and square throughout (section 2): no
 * chamfer, no gradient fill, no hover-lift transform on a nav item.
 */

/* ---- public site nav (landing) ------------------------------------*/
.site-nav {
  position: sticky;
  top: 0;
  z-index: 60;
  height: var(--topbar-height);
  display: flex;
  align-items: center;
  gap: var(--sp-9);
  padding: 0 var(--gutter-desktop);
  background: var(--panel-3);
  box-shadow: inset 0 -1px 0 0 var(--edge);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-5);
  flex: none;
}
.wordmark__mark {
  position: relative;
  width: 22px;
  height: 19px;
  flex: none;
}
.wordmark__mark::before,
.wordmark__mark::after {
  content: "";
  position: absolute;
  top: 0;
  width: 0;
  height: 0;
  border-bottom: 8px solid transparent;
}
.wordmark__mark::before {
  left: 1px;
  border-left: 7px solid var(--primary);
}
.wordmark__mark::after {
  left: 9px;
  border-right: 7px solid var(--money-lit);
}
.wordmark__mark span {
  position: absolute;
  bottom: 0;
  left: 2px;
  width: 18px;
  height: 11px;
  background: var(--primary);
  clip-path: polygon(0 0, 100% 0, 100% 40%, 52% 100%, 0 60%);
}
.wordmark__text {
  font-family: var(--font-display);
  font-style: italic; /* italic survives only in the wordmark (section 2) */
  font-weight: 800;
  font-size: 21px;
  letter-spacing: .03em;
  color: var(--text-hi);
  white-space: nowrap;
}

.site-nav__links {
  display: flex;
  align-items: center;
  gap: var(--sp-10);
  flex: 1;
}
.site-nav__links a {
  font-size: 14.5px;
  color: var(--text-mute);
}
.site-nav__links a:hover { color: var(--text-hi); }

/* ---- right-hand coming-soon slot (desktop) --------------------------
   The same "NFL · COMING SOON" / "TENNIS · COMING SOON" red links as
   the app shell's top strip -- landing.js mounts renderSportLevel's host
   here with linkPrefix: "index.html" (section 3). Assumes it lands as
   the last child of .site-nav, after .site-nav__links; .site-nav__links'
   own flex:1 already pushes a later sibling to the far right, so no
   margin-left:auto is needed (and would only compete with it). -------*/
.site-nav__soon {
  display: inline-flex;
  align-items: center;
  flex: none;
}
@media (max-width: 899px) {
  .site-nav__soon { display: none; } /* moves into .site-nav__sportrow below */
}

/* ---- phone sport row / phone text-link row --------------------------
   Landing's phone header (section 6, Landing item 1): "a sport row, with
   Pricing · FAQ as text links under the hero actions" -- carried here as
   two dedicated rows under .site-nav so landing.html has a documented
   class to mount into. Hidden at >=900px; .site-nav__links already
   covers desktop. ------------------------------------------------------*/
.site-nav__sportrow { display: none; }
.site-nav__textlinks { display: none; }
@media (max-width: 899px) {
  .site-nav__sportrow {
    display: flex;
    align-items: center;
    min-height: var(--sportrow-height);
    padding: 0 var(--gutter-mobile);
    background: var(--panel-3);
    box-shadow: inset 0 -1px 0 0 var(--edge-soft);
  }
  .site-nav__textlinks {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-7);
    padding: var(--sp-3) var(--gutter-mobile) 0;
  }
  .site-nav__textlinks a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    font-size: var(--fs-small);
    color: var(--text-2);
  }
  .site-nav__textlinks a:hover,
  .site-nav__textlinks a:focus-visible {
    color: var(--fresh-text);
  }
}

/* ---- the hound monogram block --------------------------------------
   Two ears over a skewed muzzle, built from four boxes. Rendered at the
   top strip on both desktop and mobile now that the rail carries no
   mark of its own (the sport heading took its place -- see .rail
   below). --------------------------------------------------------- */
.hound {
  position: relative;
  display: block;
  width: 30px;
  height: 26px;
  flex: none;
}
.hound i { position: absolute; display: block; }
.hound i:nth-child(1) {
  top: 0; left: 2px; width: 0; height: 0;
  border-left: 9px solid var(--primary);
  border-bottom: 11px solid transparent;
}
.hound i:nth-child(2) {
  top: 0; left: 12px; width: 0; height: 0;
  border-right: 9px solid var(--money-lit);
  border-bottom: 11px solid transparent;
}
.hound i:nth-child(3) {
  bottom: 0; left: 3px; width: 25px; height: 16px;
  background: var(--primary);
  clip-path: polygon(0 0, 100% 0, 100% 40%, 52% 100%, 0 60%);
}
.hound i:nth-child(4) {
  bottom: 5px; left: 3px; width: 7px; height: 3px;
  background: var(--panel-3);
  transform: skewX(-14deg);
}

/* ---- desktop rail -----------------------------------------------------
   228px wide (docs/DESIGN_SYSTEM.md section 2 changed this from 76px),
   --panel-3, full height, ABSOLUTE inside .shell, never fixed to the
   viewport. A "MLB" heading (display 700 13px, --text-3) sits above the
   numbered items; the rail reserves an empty data-hook="sport-plan" slot
   under them for D6's later per-sport plan/price (renders nothing while
   `plan` is null). ------------------------------------------------- */
.rail {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--rail-width); /* 228px */
  z-index: 60;
  display: flex;
  flex-direction: column;
  background: var(--panel-3);
  box-shadow: inset -1px 0 0 0 var(--edge);
  padding: var(--sp-9) 0;
}
.rail__heading {
  flex: none;
  padding: 0 var(--sp-9) var(--sp-7);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-meta); /* 13px */
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
}
.rail__items {
  display: flex;
  flex-direction: column;
  width: 100%;
  /* The index ("01", "02"...) is generated here, not by main.js -- its
     NAV_ITEMS carry no index field, only {hash, label, sub}. A CSS
     counter reproduces docs/DESIGN_SYSTEM.md section 3's "index in mono
     14px" with no JS change: numbering the rendered items is exactly
     what a counter is for. */
  counter-reset: rail-item;
}
.rail__plan {
  margin-top: auto;
  padding: var(--sp-7) var(--sp-9);
}
.rail__plan:empty { display: none; }

/* ---- rail item (docs/DESIGN_SYSTEM.md section 3: index + label +
   sub-line, >=64px tall) and tab bar item (label only, >=56px tall) --
   main.js's navItem() renders these as two independently classed
   elements (`.rail__item` with a sub-line, `.tabbar__item` without), so
   they are styled as two selectors sharing the same visual language
   below rather than one class with contextual overrides. Selected = a
   4px --primary edge (left on the rail, top in the tab bar) plus a
   --primary-soft wash; never a gradient, never a hover-lift. -------- */
.rail__item,
.tabbar__item {
  position: relative;
  display: flex;
  align-items: center;
  color: var(--text-2);
}
.rail__item:hover,
.tabbar__item:hover { background: rgba(255, 255, 255, .04); }

.rail__item {
  counter-increment: rail-item;
  /* CHR-6: the shared `.rail__item, .tabbar__item` rule above sets
     `display: flex`, which puts the index, the label and the sub-line
     in one row -- the label and sub then compete for the same line's
     width, and the sub (nowrap + ellipsis, below) truncates: "Every
     game, in depth" measured 76px visible against a 125px scrollWidth.
     Grid puts the index in its own column, spanning both rows, and
     stacks the label (row 1) over the sub (row 2) in the second column,
     which is exactly the >=64px-tall "label + sub-line" anatomy section
     3 asks for. This overrides the shared rule's `display: flex` for
     `.rail__item` only -- `.tabbar__item` (label only, no sub-line)
     keeps it. */
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--sp-5);
  width: 100%;
  min-height: 64px;
  padding: var(--sp-3) var(--sp-9);
}
.rail__item::before {
  content: counter(rail-item, decimal-leading-zero);
  grid-row: 1 / span 2;
  grid-column: 1;
  align-self: center;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--text-3);
}
.rail__item-label {
  grid-column: 2;
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-lead); /* 19px */
  color: var(--text-hi);
  white-space: nowrap;
}
.rail__item-sub {
  grid-column: 2;
  display: block;
  margin-top: 2px;
  font-size: var(--fs-meta); /* 13px */
  color: var(--text-3);
  /* Full column width now (not squeezed beside the label), so the
     ellipsis truncation this used to need is dropped -- the sub-line
     shows in full, wrapping if a fallback font ever runs long. */
  white-space: normal;
}
.rail__item[aria-current="page"] {
  background: var(--primary-soft);
  box-shadow: inset 4px 0 0 0 var(--primary);
}
.rail__item[aria-current="page"]::before { color: var(--primary); }
.rail__item[aria-current="page"] .rail__item-label { color: var(--text-hi); }

/* ---- mobile tab bar -------------------------------------------------*/
.tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  /* SAFE AREA. On a notched iPhone the bottom of the screen belongs to
     the home indicator, and a bar pinned to `bottom: 0` sits underneath
     it -- the tap targets are physically reachable but the labels are
     cut and a swipe-up hits the OS instead of the app. The inset is 0 on
     every device that does not have one, and 0 in a normal browser tab,
     so this only pays out where it is needed: installed to a home
     screen. Needs viewport-fit=cover on the viewport meta or env()
     reports 0 regardless -- see web/index.html. */
  height: calc(var(--tabbar-height) + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: stretch;
  /* Shorthand FIRST, then the inset -- the other way round the shorthand
     resets padding-bottom back to 0 and the whole fix silently does
     nothing. */
  padding: 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--panel-3);
  box-shadow: inset 0 1px 0 0 var(--edge);
}
.tabbar__item {
  flex: 1;
  min-height: 56px;
  flex-direction: column;
  justify-content: center;
  padding: var(--sp-3) var(--sp-2);
  text-align: center;
}
.tabbar__item-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-small); /* 15px, no glyphs (shell-05) */
  color: var(--text-hi);
  white-space: normal;
}
.tabbar__item[aria-current="page"] {
  background: var(--primary-soft);
  box-shadow: inset 0 4px 0 0 var(--primary);
}

@media (max-width: 899px) {
  .site-nav__links { display: none; }
  .site-nav { padding: 0 var(--gutter-mobile); gap: var(--sp-4); }
  .site-nav .wordmark__text { font-size: 17px; }
  .site-nav .btn { padding: 8px 12px; font-size: 13px; letter-spacing: .06em; }
  .rail { display: none; }
}
@media (min-width: 900px) {
  .tabbar { display: none; }
}