/*
 * THE ONE NAVIGATION (web/js/nav.js). Same bar and same phone tab bar on every page.
 *
 * KENNEL-FIRST (owner ruling 2026-10-20): My Kennel, Create, Live, Leaderboard and Account for a member; Leaderboard, Live, Sign in
 * and one primary "Find your hound" button for a visitor. Calm and flat: no border (one hairline under the bar), ONE accent (the
 * --accent token, tokens.css) used only for the primary action and the place you are, the current place a soft pill.
 * Phone: a compact top bar (the wordmark) plus a bottom tab bar with the same five places; a visitor's tab bar ends in the
 * primary button. Motion is a colour change on hover and a small press; none of it runs for prefers-reduced-motion.
 */

.lh-nav, .lh-tabbar {
  --lh-bg: #0B0D10;
  --lh-ink: #EEF1F5;
  --lh-mute: #8D96A6;
  --lh-line: rgba(255, 255, 255, .07);
  --lh-soft: rgba(255, 255, 255, .07);
  --lh-accent: var(--accent, #2FD07A);
  --lh-ease: cubic-bezier(.2, .7, .2, 1);
  --lh-t-fast: 120ms; --lh-t-base: 220ms; --lh-t-slow: 420ms;
}

.lh-nav {
  position: sticky; top: 0; z-index: 70;
  background: rgba(11, 13, 16, .82);
  -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px);
  box-shadow: 0 1px 0 var(--lh-line);
  font-family: var(--font-body, 'Instrument Sans', system-ui, sans-serif);
}
.member-app .lh-nav { position: relative; }
.lh-nav__bar {
  max-width: 1180px; margin: 0 auto; height: 56px; padding: 0 20px;
  display: flex; align-items: center; gap: 28px;
}
.lh-nav__brand { display: inline-flex; flex: none; text-decoration: none; }
.lh-nav .wordmark__text { font-size: 19px; }
.lh-nav__links { display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0; }
.lh-nav__links a {
  display: inline-flex; align-items: center; height: 34px; padding: 0 12px; border-radius: 8px;
  font-size: 14px; font-weight: 500; color: var(--lh-mute); text-decoration: none;
  transition: color var(--lh-t-fast) var(--lh-ease), background-color var(--lh-t-fast) var(--lh-ease);
}
.lh-nav__links a:hover { color: var(--lh-ink); background: var(--lh-soft); }
.lh-nav__links a[aria-current="page"] { color: var(--lh-ink); background: var(--lh-soft); }
.lh-nav a:focus-visible, .lh-nav button:focus-visible, .lh-tab:focus-visible {
  outline: 2px solid var(--lh-accent); outline-offset: 2px;
}

.lh-nav__account { display: flex; align-items: center; gap: 12px; flex: none; }
/* OWNER RULING 2026-10-21: one big primary on the right (My Kennel for a member, "Make your first hound" for a visitor); Sign in is a quiet text link. */
.lh-nav__signin { color: var(--lh-mute); font-size: 14px; font-weight: 500; text-decoration: none; padding: 8px 4px; transition: color var(--lh-t-fast) var(--lh-ease); }
.lh-nav__signin:hover { color: var(--lh-ink); }
.lh-btn--lg { height: 42px; padding: 0 22px; border-radius: 10px; font-size: 15px; }
.lh-btn {
  display: inline-flex; align-items: center; justify-content: center; height: 34px; padding: 0 14px; border-radius: 8px;
  font: 600 14px/1 var(--font-body, 'Instrument Sans', system-ui, sans-serif); text-decoration: none; border: 0; cursor: pointer;
  transition: background-color var(--lh-t-fast) var(--lh-ease), transform var(--lh-t-fast) var(--lh-ease);
}
.lh-btn--solid { background: var(--lh-accent); color: var(--accent-ink, #04140B); }
.lh-btn--solid:hover { background: var(--accent-hi, #4BE08F); }
.lh-btn--soft { background: var(--lh-soft); color: var(--lh-ink); }
.lh-btn--soft:hover, .lh-btn--soft[aria-current="page"] { background: rgba(255, 255, 255, .12); }

/* the member's Account place: a quiet pill with the member's dot, a link to the account page (Change password, Sign out live there) */
.lh-avatar {
  display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px 0 6px; border-radius: 999px;
  background: var(--lh-soft); color: var(--lh-ink); border: 0; text-decoration: none;
  font: 600 13px/1 var(--font-body, 'Instrument Sans', system-ui, sans-serif);
  transition: background-color var(--lh-t-fast) var(--lh-ease);
}
.lh-avatar:hover, .lh-avatar[aria-current="page"] { background: rgba(255, 255, 255, .13); }
.lh-avatar::before { content: ""; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #7BF0B2, #1E9E5C); }

/* the phone tab bar: the same places, bottom of the screen */
:root { --lh-tabbar-h: 60px; }
.lh-tabbar { display: none; }
@media (max-width: 760px) {
  .lh-nav__bar { height: 52px; padding: 0 16px; gap: 12px; justify-content: space-between; }
  .lh-nav__links, .lh-nav__account { display: none; }
  /* the member app (data-bottom="off") keeps its own tab bar for the picks card, so its top bar carries the way home */
  .lh-nav[data-bottom="off"] .lh-nav__account { display: flex; }
  .lh-nav[data-bottom="off"] .lh-nav__account .lh-avatar { display: none; }
  .lh-nav[data-bottom="off"][data-signed-in="true"] .lh-nav__account { margin-left: auto; }
  .lh-nav[data-bottom="off"] .lh-nav__account .lh-btn--lg { height: 36px; padding: 0 16px; font-size: 14px; }
  /* the page ends ABOVE the bar with air to spare: the bar's own height, 24px, and the phone's home-indicator inset.
     Every page that loads this file and draws .lh-tabbar gets it; the member app keeps its own (css/app.css, same sum). */
  body:not(.member-app) { padding-bottom: calc(var(--lh-tabbar-h) + 24px + env(safe-area-inset-bottom, 0px)); }
  .lh-tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: grid; grid-template-columns: repeat(5, 1fr); align-items: center;
    min-height: var(--lh-tabbar-h); padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    background: rgba(11, 13, 16, .92); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px);
    box-shadow: 0 -1px 0 var(--lh-line);
  }
  .lh-tabbar[data-count="4"] { grid-template-columns: repeat(4, 1fr); }
  .lh-tabbar[data-count="3"] { grid-template-columns: repeat(3, 1fr); }
  .lh-tab {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 48px; min-width: 0;
    border-radius: 10px; color: var(--lh-mute); text-decoration: none; font: 500 11px/1 var(--font-body, 'Instrument Sans', system-ui, sans-serif);
    transition: color var(--lh-t-fast) var(--lh-ease);
  }
  .lh-tab__label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .lh-tab[aria-current="page"] { color: var(--lh-accent); }
  .lh-tab__icon { transition: transform var(--lh-t-base) var(--lh-ease); }
  .lh-tab:active .lh-tab__icon { transform: scale(.88); }
  /* a member's centre tab is My Kennel, filled: the one primary of the bar */
  .lh-tab--primary { margin: 0 4px; min-height: 52px; background: var(--lh-accent); color: var(--accent-ink, #04140B); font-weight: 600; }
  .lh-tab--primary[aria-current="page"] { color: var(--accent-ink, #04140B); box-shadow: inset 0 0 0 2px rgba(4, 20, 11, .35); }
  /* a visitor's tab bar ends in the one primary button */
  .lh-tab--cta { margin: 0 4px; min-height: 40px; padding: 0 6px; background: var(--lh-accent); color: var(--accent-ink, #04140B); font-weight: 600; font-size: 12px; text-align: center; }
  .lh-tab--cta[aria-current="page"] { color: var(--accent-ink, #04140B); }
  .lh-tab--cta:active { transform: scale(.97); }
  .lh-tab--cta .lh-tab__label { white-space: normal; line-height: 1.15; }
}

/* The Account routes (#/signin, #/account, #/billing: nav.js onKennelRoute) are the kennel-first product's, not the picks app's: no
   sport tabs, no news strip, no Gameday/Props tab bar. The five-place bar (and on a phone its tab bar) is the only navigation. */
body[data-kennel-route] .appbar, body[data-kennel-route] .news-host, body[data-kennel-route] .tabbar { display: none; }

/* the member app keeps its own sport tabs and clock; the shared bar above it owns the wordmark and the account */
.member-app .topstrip__home, .member-app .topstrip__account { display: none; }

/* the phone tab bar eases in once on load; nothing runs for prefers-reduced-motion */
@media (prefers-reduced-motion: no-preference) {
  .lh-tabbar { animation: lh-tab-in var(--lh-t-slow) var(--lh-ease) both; }
}
@keyframes lh-tab-in { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }

/* The helpline is one unit: "1-800-" on one line and "GAMBLER" on the next is hard to read and to tap. */
a[href^="tel:"] { white-space: nowrap; }

/* The member app's top bar on a phone carries Sign in and the primary button beside the wordmark (no tab bar there): at 390px
   the three were 5px wider than the screen. Tighter buttons keep the bar inside the viewport down to 320px. */
@media (max-width: 420px) {
  .lh-nav[data-bottom="off"] .lh-nav__bar { gap: 8px; }
  .lh-nav[data-bottom="off"] .lh-nav__account { gap: 6px; min-width: 0; }
  .lh-nav[data-bottom="off"] .lh-nav__account .lh-btn { padding-left: 10px; padding-right: 10px; font-size: 13px; white-space: nowrap; }
}

/* One-time member announcements (web/js/announcements.js): a full-screen card over everything. The flicker is for no-preference only. */
.lh-announce { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(8, 6, 6, .94); color: #fff; }
.lh-announce__card { max-width: 440px; width: 100%; text-align: center; display: grid; gap: 18px; justify-items: center; }
.lh-announce__flame { font-size: 56px; margin: 0; line-height: 1; }
.lh-announce__title { font-size: 24px; line-height: 1.25; margin: 0; }
.lh-announce__lead { margin: 0; opacity: .75; }
.lh-announce__steps { text-align: left; margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.lh-announce__x { position: absolute; top: 14px; right: 18px; background: none; border: 0; color: inherit; font-size: 30px; line-height: 1; cursor: pointer; }
.lh-announce[data-kind="kennel_fire"][data-step="1"] { background: radial-gradient(ellipse at 50% 100%, #7a1d00 0%, #1a0603 70%); }
@media (prefers-reduced-motion: no-preference) {
  .lh-announce[data-step="1"] .lh-announce__flame { animation: lh-flicker 0.7s ease-in-out infinite alternate; }
}
@keyframes lh-flicker { from { transform: scale(1) rotate(-2deg); opacity: .85; } to { transform: scale(1.12) rotate(2deg); opacity: 1; } }

/* "Your full access is ending" banner (web/js/access-ending.js): one primary button, a quiet dismiss for the day. */
.lh-ending { margin: 0 auto; max-width: 960px; padding: 14px 16px; display: grid; gap: 6px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 10px; background: rgba(255, 255, 255, .06); }
.lh-ending[data-today="true"] { border-color: rgba(255, 170, 90, .7); }
.lh-ending__title { margin: 0; font-weight: 700; }
.lh-ending__line, .lh-ending__seats, .lh-ending__note { margin: 0; opacity: .85; }
.lh-ending__fine { margin: 0; font-size: 12px; opacity: .6; }
.lh-ending__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 6px; }
.lh-ending__later { background: none; border: 0; color: inherit; opacity: .7; text-decoration: underline; cursor: pointer; font: inherit; }