/* ---------------------------------------------------------------------------
   Shared page shell: the header strip and its tab bar.

   Linked BEFORE each page's inline <style>, so anything a page declares after
   the link still wins. Only rules the pages already agreed on live here; where
   a page genuinely differed, that difference stayed inline on that page as a
   small override rather than being harmonised. It started as a pure extraction
   pass; the header identity group (.hdr-id) and the site nav menu (.navmenu)
   were added later and are scoped so they only reach the pages that use them.

   Used by players.html, teams.html, match.html and sequences.html. NOT by
   glossary.html, which shares only the class name "hdr": its markup is
   hdr-mark / hdr-t / hdr-s and it defines none of the custom properties below.

   Relies on the host page defining: --bg2, --bg3, --border, --border2,
   --surface, --accent, --text, --text3, --shadow. The font tokens --f-display,
   --f-body and --f-mono come from theme.css, which every page linking this file
   also links.
--------------------------------------------------------------------------- */

/* Header bar.
   match.html runs a wider gap and sits above a higher stacking context, so it
   overrides gap and z-index inline. */
.hdr{height:52px;background:var(--bg2);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 18px;gap:14px;flex-shrink:0;box-shadow:var(--shadow);z-index:10}

/* Logo chip. Geometry only: the four pages set the glyph's font and colour
   differently, so those stay inline (match.html also recolours the chip). */
.hdr-logo{width:32px;height:32px;border-radius:50%;background:var(--accent);display:grid;place-items:center}

/* Title block. match.html has no .hdr-title element; it uses .hdr-info.

   These carried literal font fallbacks for a while, because teams.html and
   sequences.html declared no --f-display and a bare var() made the whole font
   shorthand invalid. theme.css defines the font tokens for every page now, so
   the token is the single source of truth again. */
.hdr-title{font:800 15px/1 var(--f-display);letter-spacing:-.015em}
.hdr-sub{font-size:10px;color:var(--text3);margin-top:3px}
.hdr-row{display:flex;align-items:center;gap:8px;margin-top:3px}

/* Identity group, players.html and teams.html only.
   Page name, league picker and the caption that qualifies it are one control
   group, not three separately styled things sharing a corner. .hdr-id stacks
   the two rows; .hdr-row is the group, drawn as a single inset chip.
   Everything below is scoped under .hdr-id, and only these two pages have one,
   so sequences.html and match.html are untouched. */
.hdr-id{display:flex;flex-direction:column;justify-content:center;gap:4px;min-width:0;flex-shrink:0}
.hdr-id .hdr-row{margin-top:0;gap:7px;padding:3px 8px;max-width:100%;
  border:1px solid var(--border);border-radius:7px;background:var(--surface)}

/* One type scale across the group: the caption sits one step under the title
   and matches the picker beside it, so neither shouts. It stays on one line at
   desktop, because the old three-line wrap is what forced the header taller
   than its 52px. */
.hdr-id .hdr-row .hdr-sub{margin-top:0;white-space:nowrap;color:var(--text3);
  font:600 10.5px/1.35 var(--f-body);letter-spacing:.005em}

/* Inside the chip the select drops its own box: one border around the group
   reads as one control, nested borders read as two. Hover and keyboard focus
   still give it an edge, and the native menu marker keeps it obviously a
   control. Border width is kept, only the colour goes, so hover shifts nothing. */
.hdr-id .hdr-row .lgpick select{background:transparent;border-color:transparent;color:var(--text);
  padding:1px 2px;font:700 10.5px/1.35 var(--f-body)}
.hdr-id .hdr-row .lgpick select:hover{background:var(--bg2);border-color:var(--border2)}

/* Right-hand action cluster. match.html runs a wider gap, set inline. */
.hdr-right{margin-left:auto;display:flex;align-items:center;gap:6px}

/* Header actions on players.html and teams.html. Scoped to .hdr-right so the
   same .lnk class keeps its existing look everywhere else on those pages, and
   compound enough (0,2,0) to outrank each page's own .lnk without editing it.
   match.html has no .lnk in its header, so none of this reaches it. */
.hdr-right .lnk{display:inline-flex;align-items:center;gap:5px;
  background:transparent;border:1px solid var(--border);color:var(--text2);
  font:600 10.5px/1 'Inter',system-ui,sans-serif;letter-spacing:.02em;
  min-height:29px;padding:0 10px;border-radius:7px;text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:color .15s,background-color .15s,border-color .15s}
.hdr-right .lnk:hover{background:var(--surface2);color:var(--text);border-color:var(--border2)}
.hdr-right .lnk.acc{color:var(--accent);border-color:var(--accent-glow);background:var(--accent-dim)}
.hdr-right .lnk.acc:hover{background:var(--accent-glow);color:var(--accent)}
.hdr-right .lnk:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* League picker, players.html and teams.html.
   No max-width: a select sizes itself to its widest option, so the chosen label
   is always readable. The old 150px cap cut "Premier League (20 available)"
   mid-word. */
.lgpick select{background:var(--bg);color:var(--text);border:1px solid var(--line2,var(--border));
  border-radius:6px;padding:3px 7px;font:700 10px/1.3 inherit;cursor:pointer;
  max-width:none;width:auto;min-width:0;text-overflow:clip;
  /* field-sizing tracks the option actually selected, so the control is only as
     wide as the label it is showing. Where it is not supported, width:auto falls
     back to the widest option, which is roomier but still never truncates. */
  field-sizing:content;
  transition:border-color .15s,background-color .15s}
.lgpick select:hover{border-color:var(--accent);background:var(--bg2)}
/* Keyboard focus must stay visible; only the mouse focus ring is dropped. */
.lgpick select:focus{border-color:var(--accent)}
.lgpick select:focus:not(:focus-visible){outline:none}
.lgpick select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Tab bar. players.html and teams.html additionally let this scroll
   horizontally, which sequences.html does not, so that stays inline on them.
   match.html uses .hdr-tabs and is untouched by these rules.

   Overflow cue: a shaded edge on whichever side has more bar to reach. It is
   painted only when the page adds .cue-l / .cue-r, which those pages do from
   the strip's own scroll position, so a bar that fits paints nothing at all.
   The previous version tried to do this in pure CSS by parking an opaque cover
   over each shadow and attaching the two to different scroll origins; on a
   fractional strip width the pair drifted apart and left a bright hairline just
   past the last tab, reading as an edge that was not there. sequences.html adds
   neither class, so its non-scrolling strip is unaffected either way. */
.tabs{display:flex;gap:2px;margin-left:20px;border-radius:8px;padding:3px;
  background-color:var(--surface);background-repeat:no-repeat;scroll-behavior:smooth}
.tabs.cue-l{background-image:linear-gradient(to right,color-mix(in srgb,var(--text3) 55%,transparent),rgba(0,0,0,0));
  background-position:left center;background-size:26px 100%}
.tabs.cue-r{background-image:linear-gradient(to left,color-mix(in srgb,var(--text3) 55%,transparent),rgba(0,0,0,0));
  background-position:right center;background-size:26px 100%}
.tabs.cue-l.cue-r{background-image:
    linear-gradient(to right,color-mix(in srgb,var(--text3) 55%,transparent),rgba(0,0,0,0)),
    linear-gradient(to left,color-mix(in srgb,var(--text3) 55%,transparent),rgba(0,0,0,0));
  background-position:left center,right center;background-size:26px 100%,26px 100%}
.tab{background:none;border:none;color:var(--text3);font:600 12px/1 'Inter';padding:7px 15px;border-radius:6px;cursor:pointer;
  white-space:nowrap;transition:color .15s,background-color .15s}
.tab:hover{color:var(--text);background:var(--surface2)}
/* Active tab carries weight and a filled chip, not colour alone. */
.tab.on{color:var(--text);background:var(--bg3);box-shadow:var(--shadow);font-weight:800}
.tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Cross-page nav links inside the tab bar. Left in place for any page that
   still puts links in its tab strip; players.html and teams.html no longer do,
   see the site nav menu below. */
.tab-x{text-decoration:none;color:var(--text3)}
.tab-x:hover{color:var(--accent)}
.tab-div{width:1px;align-self:stretch;background:var(--border2);margin:3px 5px;flex-shrink:0}

/* Site nav menu, players.html and teams.html.
   The header used to carry two kinds of navigation in one strip: seven page
   tabs and nine site destinations, sixteen targets in a 52px row. The tail of
   the site nav was only reachable by scrolling and sat under the export
   buttons. Site nav now lives behind one labelled trigger, so the tab strip has
   a single job. Every destination is still present, one click away.

   The panel is position:fixed and placed from script: both pages set
   overflow:hidden on body, which would clip an absolutely positioned panel at
   the header edge. */
.navmenu{position:relative;display:flex}
.navmenu-btn::after{content:'';width:0;height:0;margin-top:2px;
  border:3.5px solid transparent;border-top-color:currentColor;transition:transform .15s}
.navmenu-btn[aria-expanded="true"]{background:var(--surface2);color:var(--text);border-color:var(--border2)}
.navmenu-btn[aria-expanded="true"]::after{transform:rotate(180deg);margin-top:-2px}
.navmenu-panel{position:fixed;top:0;right:0;z-index:60;display:none;
  min-width:198px;max-height:calc(100vh - 72px);overflow-y:auto;
  background:var(--bg2);border:1px solid var(--border2);border-radius:9px;padding:5px;
  box-shadow:0 12px 30px rgba(0,0,0,.28)}
.navmenu-panel.open{display:block}
.navmenu-h{font:700 8.5px/1 'Inter',system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text3);padding:8px 9px 6px}
.navmenu-panel a{display:block;padding:7px 9px;border-radius:6px;text-decoration:none;color:var(--text2);
  font:600 11.5px/1.2 'Inter',system-ui,sans-serif;white-space:nowrap;
  transition:color .15s,background-color .15s}
.navmenu-panel a:hover{background:var(--surface2);color:var(--text)}
.navmenu-panel a:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;
  background:var(--surface2);color:var(--text)}

/* Players and Teams have a long identity chip and six or seven local tabs.
   Give the tabs their own full-width row before they get squeezed beneath the
   export controls. At phone widths, wrap the tab buttons instead of requiring
   a hidden horizontal scroll to discover sections. Other page shells keep
   their existing single-row layout. */
@media(max-width:1440px){
  .hdr.page-hdr{height:auto;min-height:52px;flex-wrap:wrap;gap:7px 12px;padding:7px 14px}
  .hdr.page-hdr .tabs{order:3;flex:1 0 100%;width:100%;margin-left:0;min-width:0}
  .hdr.page-hdr .hdr-right{margin-left:auto}
}
@media(max-width:820px){
  .hdr.page-hdr .tabs{flex-wrap:wrap;overflow:visible;scroll-behavior:auto}
  .hdr.page-hdr .tab{padding:7px 10px}
  .hdr.page-hdr .hdr-id{min-width:0;flex:1 1 180px}
}

/* Narrow header. The identity chip stacks and its caption is allowed to wrap
   again: one unbroken line plus a 390px viewport would put the whole page into
   horizontal scroll. Scoped to .hdr-id, so only players.html and teams.html
   see it. */
@media(max-width:820px){
  /* A wrapping flex line places items at their natural width before it shrinks
     anything, so an identity group that wants 334px pushed itself onto its own
     row and left the logo sitting alone above it. A small flex-basis lets it
     share the first row with the logo and then grow into whatever is left. */
  .hdr-id{flex:1 1 180px}
  .hdr-id .hdr-row{flex-wrap:wrap;row-gap:4px}
  .hdr-id .hdr-row .hdr-sub{white-space:normal}
}

/* Anything animated above is a courtesy, so drop it when asked. */
@media (prefers-reduced-motion:reduce){
  .tabs{scroll-behavior:auto}
  .tab,.hdr-right .lnk,.lgpick select,.navmenu-btn::after,.navmenu-panel a{transition:none}
}