/* =============================================================================
   CROSS-DOCUMENT VIEW TRANSITIONS
   -----------------------------------------------------------------------------
   Opts every same-origin navigation between pages built on this shell into a
   browser-driven crossfade instead of the default white flash + repaint. The
   navigation is still a REAL navigation — this does not turn anything into an
   SPA route; it only removes the visual seam.

   The motivating case is /mlb/home-run-results, which is deliberately a
   server-rendered page (its rows must be in the raw HTML to be indexable —
   baseball/routes.py home_run_results). Paired with the speculation-rules
   prefetch in index.html, the document is usually already in cache by the time
   the click lands, so the crossfade is all that remains of the "reload".

   Both the outgoing AND incoming document must opt in for this to apply; every
   page here renders from index.html, so this one rule covers the whole shell.

   Chromium-only today. Everywhere else this block is inert and navigation
   behaves exactly as before — no fallback needed.

   Honoured automatically under prefers-reduced-motion: the UA skips the
   animation and performs an instant swap.
   ========================================================================== */
@view-transition {
  navigation: auto;
}

/* =============================================================================
   A11Y UTILITY
   -----------------------------------------------------------------------------
   Screen-reader-only: removed from the visual layout, still read by assistive
   tech and still parsed as page content. Used for headings a dense tool UI has
   no room to display but which the document outline genuinely needs — the
   workbench <h1> and the "Suggested props" <h2>.

   NOT display:none / visibility:hidden — both remove the element from the
   accessibility tree, which is the opposite of the point. The clip-rect+1px
   pattern is the one screen readers reliably announce.
   ========================================================================== */
.pb-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* =============================================================================
   THEME TOKENS
   ========================================================================== */
:root{
  /* palette */
  --bg-base:        #000000;
  --bg-base-darker: #040a16;
  --bg-noise:       rgba(255,255,255,.045);
  --bg-navy-700:    #001E37;
  --bg-navy-800:    #012E31;
  --bg-navy-900:    #031625;

  /* Primary brand gradient (teal spectrum) */
  --brand-teal:     #00D3BD;
  --brand-teal-600: #00AD84;
  --brand-teal-bright: #00F5D4;
  --brand-cyan:     #00B4D8;
  --brand-green:    #09b05c;
  --brand-red:      #e74c3c;

  /* Gradient definitions */
  --gradient-primary: linear-gradient(135deg, #00D3BD 0%, #00AD84 100%);
  --gradient-accent: linear-gradient(135deg, #00F5D4 0%, #00D3BD 50%, #00AD84 100%);
  --gradient-subtle: linear-gradient(135deg, rgba(0,211,189,0.15) 0%, rgba(0,173,132,0.05) 100%);
  --gradient-glow: linear-gradient(135deg, rgba(0,245,212,0.2) 0%, rgba(0,211,189,0.1) 50%, transparent 100%);
  --gradient-card: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%);
  --gradient-border: linear-gradient(135deg, rgba(0,211,189,0.4) 0%, rgba(0,173,132,0.2) 50%, rgba(0,211,189,0.1) 100%);

  --ink-100:        #ffffff;
  --ink-80:         #e8ffe9;
  --ink-60:         #b4d7c4;
  --ink-40:         #B6F3FE;
  --ink-muted:      #97b2d4;
  --ink-20:         #999;

  --border-1:       #11394A;
  --divider-1:      #033B3F;

  /* radii & shadows */
  --radius-sm:      6px;
  --radius-md:      8px;
  --radius-lg:      12px;
  --radius-xl:      24px;

  --shadow-1:       0 8px 22px rgba(0,0,0,.30);
  --shadow-2:       0 4px 20px rgba(0,211,189,0.1), 0 8px 32px rgba(0,0,0,0.3);
  --shadow-glow:    0 0 20px rgba(0,211,189,0.15), 0 0 40px rgba(0,211,189,0.05);
  --shadow-inset-1: inset 0 0 0 1px rgba(255,255,255,.06);

  /* component tokens */
  --chip-height:    36px;
  --btn-height:     40px;

  /* chart */
  --avg-line-color:     #ff0000;
  --movable-line-color: #00ff00;

  /* icon glow */
  --neon:       #14e5a3;
  --neon-soft:  #14e5a37a;
}

/* =============================================================================
   GLOBAL RESET & BASE
   ========================================================================== */
*,*::before,*::after{ box-sizing: border-box; }

html,body{
  margin:0; padding:0; max-width:100%;
  overflow-x:hidden;
  touch-action: pan-y;
  overscroll-behavior-x: none;

  /* Clean solid background - professional deep navy */
  background: var(--bg-base);
}

body{
  font-family: "Avenir", "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-weight: 200;
  color: var(--ink-80);
  transition: background-color .3s ease, color .3s ease;
  overflow-x: hidden;
}

/* Subtle gradient accent at top of page */
body::before{
  content:"";
  position:fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 400px;
  pointer-events:none;
  background: linear-gradient(180deg, rgba(0,211,189,0.03) 0%, transparent 100%);
  z-index: 0;
}

/* =============================================================================
   LOADER
   ========================================================================== */
#loading-animation{
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
  z-index:9999;
  /* Fully black boot backdrop — the old navy read as a "legacy blue"
     flash against the black app background. */
  background: #000;
}
.loader-wrapper{
  display:flex; flex-direction:column; align-items:center;
}
.bouncing-spheres{
  display: flex;
  gap: 14px;
}
.sphere{
  width: 24px;
  height: 24px;
  background: var(--brand-teal);
  border-radius: 50%;
  animation: bounce 0.75s ease-in-out infinite;
}
.sphere:nth-child(2){ animation-delay: 0.12s; }
.sphere:nth-child(3){ animation-delay: 0.24s; }
@keyframes bounce{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-20px); }
}

/* =============================================================================
   LAYOUT SHELL
  ============================================================================== */
.main-content{ display:flex; flex-wrap:nowrap; margin-top:10px; }
#content-section{ flex:1; display:flex; flex-direction:column; }

/* Hide until populated */
#search-results,#search-results-table,#sidebar{ display:none; }


/* =============================================================================
   THEME DROPDOWN (hidden by default)
   ========================================================================== */
#theme-dropdown{ display:none; }