/* The player search in the site bar, and the one-line intro above the stats
   (site/boot.js showFinder). Live site only, like upload.css. */

/* The field sits where the site's name leaves room, and its matches drop down
   under it, so the root page opens on the stats rather than on a panel of intro
   copy. The label stays in the markup for screen readers; the placeholder
   carries it visually. It is on every page, so it must not be the thing that
   pushes the links right -- .site-links does that with a margin-left. */
.nav-search {
  position: relative;
  flex: 0 1 300px;
  margin-left: 1.5rem;
}
.nav-search .finder-label {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.nav-search .finder-input { font-size: 0.9rem; padding: 0.35rem 0.7rem; }
.finder-drop {
  display: none;
  position: absolute; top: calc(100% + 0.4rem); left: 0; right: 0;
  max-height: 60vh; overflow-y: auto;
  background: var(--panel-glass);
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  padding: 0.3rem 0.7rem;
  box-shadow: 0 12px 32px rgba(0,0,0,0.5);
  z-index: 60;
}
.nav-search.open .finder-drop { display: block; }

/* The home page's intro: a title and one line. The copy that used to be a panel
   here is on the Upload page now. */
.finder-intro { margin-bottom: 1.25rem; }
.finder-intro h1 { color: var(--gold); font-size: 1.15rem; margin: 0 0 0.3rem; }
.finder-intro p { margin: 0; color: var(--text-dim); font-size: 0.9rem; line-height: 1.5; }

.site-page {
  max-width: 44rem;
  background: linear-gradient(165deg, var(--panel-2-glass) 0%, var(--panel-glass) 100%);
  border: 1px solid var(--panel-border);
  border-top-color: var(--gold-glow);
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
}
.site-page h1 { color: var(--gold); font-size: 1.5rem; margin-bottom: 0.75rem; }
.site-page h2 { color: var(--gold); font-size: 1.1rem; margin: 1.25rem 0 0.5rem; }
.site-page p { line-height: 1.5; margin-bottom: 0.75rem; }
.site-page a { color: var(--gold); }
.site-page ul, .site-page ol { line-height: 1.5; margin: 0 0 0.75rem 1.5rem; }
/* The Upload page's own call to action (site/upload.js handles the click). */
.site-page .upload-btn { text-decoration: none; }
.finder-label { display: block; font-size: 0.85rem; color: var(--text-dim); margin-bottom: 0.35rem; }
.finder-input {
  font: inherit;
  width: 100%;
  color: var(--text);
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  padding: 0.55rem 0.75rem;
}
.finder-input:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.finder-count { color: var(--text-dim); font-size: 0.8rem; margin: 0.15rem 0 0.1rem; }
.finder-list { list-style: none; margin: 0; padding: 0; }
.finder-list li + li { border-top: 1px solid var(--hairline); }
.finder-list a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.4rem 0.2rem;
  color: var(--text);
  text-decoration: none;
  border-radius: 4px;
}
.finder-list a:hover, .finder-list a:focus-visible { background: rgba(224,196,104,0.08); color: var(--gold); }
.finder-list a:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.finder-name { font-weight: 600; overflow-wrap: anywhere; }
.finder-runs { color: var(--text-dim); font-size: 0.8rem; white-space: nowrap; }

/* The site nav (run.py's home_links): the site's name and its pages, full
   width across the top, above whatever page this is. The negative margins
   undo body's gutter (2rem; 14px on phones, dashboard.css). */
.site-nav {
  --gutter: 2rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin: calc(-1 * var(--gutter)) calc(-1 * var(--gutter)) 1.75rem;
  padding: 0.55rem var(--gutter);
  background: var(--panel-glass);
  border-bottom: 1px solid var(--panel-border);
  backdrop-filter: blur(6px);
}
.site-brand {
  font-weight: 700; font-size: 1.05rem; letter-spacing: .02em;
  color: var(--gold); text-decoration: none; white-space: nowrap;
}
.site-brand:hover { color: var(--gold-bright); }
/* Whose page this is. The bar names the player because every number on these
   pages depends on that context, and a shared link otherwise carries none of
   it. It sits between the search and the links: boot.js's showPlayerName fills
   it, and it stays hidden on the root page, where there is no profile to name. */
.site-player {
  padding-left: 0.85rem;
  border-left: 1px solid var(--panel-border);
  font-size: 0.92rem; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 42vw;
}
.site-links { display: flex; align-items: center; gap: 1.25rem; margin-left: auto; }
.site-link {
  font-size: 0.9rem; font-weight: 600; color: var(--text-dim); text-decoration: none;
  padding: 0.35rem 0; border-bottom: 2px solid transparent;
}
.site-link:hover { color: var(--text); }
.site-link[aria-current="page"] { color: var(--gold); border-bottom-color: var(--gold); }
.site-github { display: flex; color: var(--text-dim); }
.site-github:hover { color: var(--text); }
.site-brand:focus-visible, .site-link:focus-visible, .site-github:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
/* No .upload-btn rule for the site bar: the Upload page's bar entry is an
   ordinary nav link, taken from that page's `nav:` label, and is styled like
   About. The rule that hid it on touch screens went with the button: the entry
   is a page of instructions now, and the page says for itself which platforms
   the steps cover. */
@media (max-width: 700px), (orientation: landscape) and (max-height: 500px) {
  .site-nav { --gutter: 14px; margin-bottom: 1.25rem; flex-wrap: wrap; }
  /* The player gets a row of their own under the brand and links, so the
     name, run count and date show in full instead of ellipsising beside
     the brand while the rest of that row sat empty. */
  .site-links { gap: 1rem; }
  .site-player { order: 2; flex: 1 1 100%; max-width: none; padding-left: 0; border-left: 0; font-size: 1rem; }
  /* No room beside the links on a phone: the search takes its own row. */
  .nav-search { order: 3; flex: 1 1 100%; margin: 0.6rem 0 0; }
}

/* Site-wide stats under the finder (boot.js showSiteStats). The cards reuse
   dashboard.css's .cards/.card; this grid just has 6 of them. */
.site-stats { margin-top: 2.5rem; }
.site-stats h2 { color: var(--gold); margin-bottom: 1rem; }
/* Six cards. Three across divides them into two even rows wherever six bars
   will not fit; the wide layout below is one row of six. The .site-stats prefix
   is deliberate: it outranks dashboard.css's .cards and its breakpoints
   regardless of which stylesheet is linked first. */
.site-stats .site-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.site-cards .sub a { color: var(--text); }

/* One row of six, each card the same bar as the player pages -- label left,
   value right -- with the sub on a second line.

   Three across gave each bar 501px for between 105px ("Players") and 370px
   ("Runs uploaded") of content, so the short cards held their label and their
   number 406px apart across an otherwise empty box. Six across spans the same
   width with nothing marooned, and the same six facts cost 71px of the fold
   instead of 107px.

   The sub stays in the card rather than moving to a data-tip, and on its own
   line rather than inline. Here it is content, not a footnote: the solo /
   multiplayer / daily split, the win and loss counts, and the fastest-win card
   uses it to link to that player's page, which a tooltip cannot host. Inline it
   needs 370px -- a 372px card's whole width before its padding, which is why
   four across had to ellipsise the daily count away. The markup is label,
   value, sub; a bar reads label, value, then the sub underneath, hence order.

   1471px is measured, not chosen. A bar's first line needs its label and value
   side by side, and the widest pair is "Fastest solo win" (114px) with a
   fastest-win value (75px), so 222px before padding. Six of those plus five
   12px gaps needs 1392px of content column, and that column is the viewport
   less 64px. The line renders clean at 1470px in headless Chromium; the extra
   pixel is because a real browser may measure the same text slightly wider.
   Below the breakpoint the stacked card needs no such room. */
@media (min-width: 1471px) {
  .site-stats .site-cards {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    column-gap: 0.75rem;
  }
  .site-stats .site-cards .card {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 0.6rem;
    padding: 0.5rem 0.75rem;
  }
  .site-stats .site-cards .card .label { order: 1; margin: 0; flex: 0 0 auto; }
  .site-stats .site-cards .card .value { order: 2; margin-left: auto; line-height: 1; }
  .site-stats .site-cards .card .sub {
    order: 3; flex: 0 0 100%; margin: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
}

/* Two across on phones, back to the stacked card: the bar form needs room a
   phone column does not have. This has to come after the base rule above --
   both selectors weigh the same, so source order is what decides. */
@media (max-width: 700px), (orientation: landscape) and (max-height: 500px) {
  .site-stats .site-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.site-list {
  background: linear-gradient(165deg, var(--panel-2-glass) 0%, var(--panel-glass) 100%);
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  padding: 1rem 1.25rem;
}
.site-list h3 { color: var(--gold); font-size: 1rem; margin-bottom: 0.25rem; }
.site-note { color: var(--text-dim); font-size: 0.78rem; margin-bottom: 0.6rem; line-height: 1.4; }
.site-list ul, .site-list ol { list-style: none; margin: 0; padding: 0; }
.site-list li {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.3rem 0; font-size: 0.9rem;
}
.site-list li + li { border-top: 1px solid var(--hairline); }
.site-row-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.site-row-num { color: var(--text-dim); font-size: 0.82rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.site-chars { margin-bottom: 1rem; }
/* The lanes are dashboard.css's .fl-* (the player pages' fight lanes). On the home page
   a list is a third of the width, so its name column is narrower and the lane keeps the
   room the value needs. A character row is a name and a solo and a multiplayer lane. */
.site-lanes { grid-template-columns: 26px 7.5rem minmax(0, 1fr); }
.site-lanes.no-icons { grid-template-columns: 7.5rem minmax(0, 1fr); }
.site-lanes .fl-lane { margin-right: 6.5rem; }
.site-chars-rows { grid-template-columns: 8rem minmax(0, 1fr) minmax(0, 1fr); column-gap: 2.5rem; }
.site-chars-rows .fl-section { margin: 0.25rem 0 0; }
.site-lists { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }

/* Recent uploads (boot.js showRecentUploads): the front door's list of who
   uploaded last, so a recent uploader can reach their own page without opening
   the search dropdown. Reuses .site-list's panel and .site-row-name. The rows
   are links, so they carry more height than a stats row -- on a phone a row is
   the tap target -- and no side padding, which keeps their names on the same
   left edge as the panels above. */
.recent-uploads { margin-top: 2rem; }
.recent-uploads li { padding: 0; }
.recent-uploads li a {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.15rem 0.75rem; flex: 1 1 auto; min-width: 0;
  min-height: 2.75rem; padding: 0.3rem 0;
  color: var(--text); text-decoration: none; border-radius: 4px;
}
.recent-uploads li a:hover,
.recent-uploads li a:focus-visible { background: rgba(224,196,104,0.08); color: var(--gold); }
.recent-uploads li a:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.recent-uploads .recent-meta { color: var(--text-dim); font-size: 0.82rem; font-variant-numeric: tabular-nums; }

@media (max-width: 1200px) {
  .site-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .site-lists { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  /* A list's row is its name, then the bar underneath at the full width of the panel,
     with the number after it. The spacer cells and every second axis label go: on a phone
     there is no room for the labels to sit side by side. */
  .site-lanes, .site-lanes.no-icons { grid-template-columns: 26px minmax(0, 1fr); row-gap: 0.15rem; }
  .site-lanes.no-icons { grid-template-columns: minmax(0, 1fr); }
  .site-lanes > span { display: none; }
  .site-lanes .fl-lane { grid-column: 1 / -1; margin-right: 4.8rem; margin-bottom: 0.45rem; }
  .site-lanes .fl-axis { margin-bottom: 0; }
  .site-lanes .fl-axis span:nth-child(2), .site-lanes .fl-axis span:nth-child(4) { display: none; }
  /* The character rows: a name over a solo bar beside a multiplayer bar. */
  .site-chars-rows { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 1rem; }
  .site-chars-rows .fl-name { grid-column: 1 / -1; margin-top: 0.3rem; }
  .site-chars-rows .fl-lane { grid-column: auto; margin-right: 4.6rem; margin-bottom: 0.1rem; }
  .site-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}