/* ═══════════════════════════════════════════════
   match-analysis.css — Styles specific to /match-analysis
   frontendneeded.com

   This overrides the shared design tokens from styles.css
   to match the tactical-green theme of the React app.
   ═══════════════════════════════════════════════ */

:root {
    --accent: #b8e636;
    --accent-rgb: 184, 230, 54;
    --bg: #0f1410;
}

.site-nav {
    background: #0a0f0c;
}

.nav-dropdown-menu {
    background: #0a0f0c;
}


/* ═══════════════════════════════════════════════
   FIX A — Broken height chain from body → app
   (ROOT CAUSE of the ultra-wide clipping bug)
   
   The HTML structure is:
   
     body  (flex column, 100vh)
       nav.site-nav
       main#main-content        ← not a flex container
         div#match-analysis-root  ← flex:1 has NO EFFECT
   
   On your other pages, <main> IS the .gr-shell, so it
   gets flex:1, display:flex, overflow:hidden from that
   class. But the match-analysis page doesn't use gr-shell.
   <main> is a plain element with no flex properties.
   
   That means:
   1. <main> doesn't grow to fill remaining viewport
      (defaults to flex: 0 1 auto, shrinks to content)
   2. <main> isn't a flex container, so the root div's
      flex: 1 is completely ignored
   3. The React app's height: 100% has no definite
      ancestor height to resolve against
   
   On standard monitors this works by accident because
   the content's natural height fits. On ultra-wide
   monitors (where the SVG's intrinsic aspect ratio
   demands more height than is available), the layout
   overflows and the board tabs and bottom tab bar
   get clipped off.
   
   The fix: make <main> a proper flex participant.
   ═══════════════════════════════════════════════ */

#main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* ── The React app fills all available space below the nav ── */

#match-analysis-root {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}


/* ═══════════════════════════════════════════════
   FIX B — Flexbox min-height cascade
   (The other half of the ultra-wide bug)
   
   Even with the height chain fixed, nested flex
   containers have a subtle default behavior:
   
     min-height: auto
   
   This means a flex item will NEVER shrink below
   the intrinsic size of its content. For most UI
   elements that's fine — a button shouldn't collapse
   to 0px. But for the pitch SVG, the intrinsic
   size is computed from the viewBox aspect ratio:
   
     viewBox = 0 0 700 460, aspect ratio 1.52:1
     Container width on ultra-wide is around 3400px
     Intrinsic height = 3400 / 1.52 = ~2237px
   
   That 2237px becomes the minimum height of every
   flex ancestor up the chain, because min-height:auto
   propagates upward through nested flex containers.
   
   The fix: set min-height:0 on intermediate divs
   so flex items are allowed to shrink below their
   content's intrinsic size.
   
   This is safe because:
   - Elements with inline minHeight (buttons, inputs)
     are unaffected — inline styles override CSS
   - Content-sized elements still grow to fit their
     content via height:auto — min-height:0 just
     removes the FLOOR, it doesn't force anything
     to actually be 0px tall
   ═══════════════════════════════════════════════ */

#match-analysis-root div {
    min-height: 0;
}


/* ═══════════════════════════════════════════════
   FIX C — Cap the pitch width on ultra-wide
   
   Even with the layout fixed, a 3400px-wide pitch
   is a poor experience — markers become tiny specks,
   and precise placement requires mouse travel across
   the entire screen. Capping the SVG at a reasonable
   max-width keeps it usable.
   
   The SVG's preserveAspectRatio="xMidYMid meet"
   already handles centering. We just limit how wide
   the element is allowed to grow, and auto-center
   it in the remaining space.
   ═══════════════════════════════════════════════ */

#match-analysis-root svg[viewBox] {
    max-width: min(100%, 1400px);
    margin-left: auto;
    margin-right: auto;
}


/* ═══════════════════════════════════════════════
   FIX D — Mobile viewport height
   
   The base styles.css sets body { height: 100vh }.
   On mobile Safari/Chrome, 100vh includes the
   browser's address bar, so the actual visible area
   is shorter. This pushes the bottom tab bar behind
   the browser chrome, making it unreachable.
   
   100dvh (dynamic viewport height) tracks the
   actual visible area in real time.
   ═══════════════════════════════════════════════ */

body {
    height: 100dvh;
}


/* ═══════════════════════════════════════════════
   FIX E — Focus visibility (accessibility)
   
   The JSX sets outline:"none" on all inputs, textareas,
   and buttons. This kills the browser's default focus
   ring, so keyboard/tab users can't see what's focused.
   
   :focus-visible fires only on keyboard navigation
   (not mouse clicks), so it won't look weird when
   tapping buttons — it only appears when someone is
   actually tabbing through the UI.
   ═══════════════════════════════════════════════ */

#match-analysis-root *:focus-visible {
    outline: 2px solid var(--accent) !important;
    outline-offset: 2px;
}

#match-analysis-root input:focus-visible,
#match-analysis-root textarea:focus-visible {
    outline-offset: -1px;
}


/* ═══════════════════════════════════════════════
   FIX F — iOS / touch device polish
   ═══════════════════════════════════════════════ */

/* Prevent rubber-band overscroll on the app shell */
#match-analysis-root {
    overscroll-behavior: contain;
}

/* Kill iOS tap highlight flash on dark UI */
#match-analysis-root button,
#match-analysis-root input,
#match-analysis-root textarea {
    -webkit-tap-highlight-color: transparent;
}

/* Prevent iOS font size inflation in narrow containers */
#match-analysis-root {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Lock textareas to vertical-only resize */
#match-analysis-root textarea {
    max-width: 100%;
}

/* Ensure pitch blocks pull-to-refresh and scroll gestures */
#match-analysis-root svg {
    touch-action: none;
}


/* ═══════════════════════════════════════════════
   Narrow-screen overrides
   ═══════════════════════════════════════════════ */

@media (max-width: 374px) {
    #match-analysis-root h1 {
        font-size: 13px !important;
        letter-spacing: 1px !important;
    }
}