/* ============================================================================
   STADIUMS INDEX — "WIN95 STADIUM EXPLORER"
   A Windows-95 file-explorer for the World Cup 2026 host venues. Grey 3D bevels,
   title-bar gradient, details/list view, Properties dialogs. All facts are
   server-rendered; the Properties dialogs use :target and the "Drives by Nation"
   filter uses radio :checked — BOTH work with JS off.
   Built on tokens.css; new classes only, prefixed .s5- / .si-. No literal px
   font-sizes (uses --fs-* tokens). Self-contained — does not touch global.css.
   ========================================================================== */

/* ── Header stat line (in the gold-border panel) ── */
.si-statline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
}
.si-stat { color: var(--c-cream, #f3efe0); }
.si-stat-sep { color: var(--c-sky); }
.si-stat--wc {
  font-family: var(--font-chrome);
  font-size: var(--fs-xs);
  color: var(--c-navy);
  background: var(--c-yellow);
  padding: 3px 8px;
}

/* ── Win95 surface palette (greys are local to this concept) ── */
.s5-desktop {
  --s5-face:   #c0c0c0;   /* classic 3D face grey */
  --s5-light:  #ffffff;
  --s5-shadow: #808080;
  --s5-dark:   #404040;
  --s5-text:   #1a1a1a;
  --s5-tbA:    #0a246a;   /* active title-bar gradient start */
  --s5-tbB:    #3a6ea5;   /* active title-bar gradient end */
  --s5-sel:    #0a246a;   /* selection highlight */
  margin-bottom: 1.25rem;
}

/* The filter radios are visually hidden but remain in the accessibility tree and
   keyboard-focusable (via their drive-card labels). */
.s5-filter {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* ── THE WINDOW ── */
.s5-window {
  background: var(--s5-face);
  color: var(--s5-text);
  border: 2px solid;
  border-color: var(--s5-light) var(--s5-dark) var(--s5-dark) var(--s5-light);
  box-shadow: 1px 1px 0 #000, 6px 6px 0 rgba(0,0,0,0.45);
  padding: 3px;
  font-family: var(--font-ui);
}

/* title bar with the iconic blue gradient */
.s5-titlebar {
  display: flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(90deg, var(--s5-tbA), var(--s5-tbB));
  color: #fff;
  padding: 3px 4px;
  font-family: var(--font-chrome);
  font-size: var(--fs-xs);
}
.s5-tb-icon { font-size: var(--fs-md); line-height: 1; }
.s5-tb-text { flex: 1; letter-spacing: 0.5px; text-shadow: 1px 1px 0 #000; }
.s5-tb-btns { display: flex; gap: 2px; }
.s5-tb-btn {
  width: 18px; height: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--s5-face); color: var(--s5-text);
  border: 2px solid;
  border-color: var(--s5-light) var(--s5-dark) var(--s5-dark) var(--s5-light);
  font-family: var(--font-ui); font-size: var(--fs-xs); line-height: 1;
}
.s5-tb-x { font-weight: bold; }

/* menu bar */
.s5-menubar {
  display: flex;
  gap: 2px;
  background: var(--s5-face);
  padding: 3px 2px;
  border-bottom: 1px solid var(--s5-shadow);
}
.s5-menu {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  color: var(--s5-text);
  padding: 1px 8px;
}
.s5-menu u { text-underline-offset: 2px; }
/* Win95 accelerator look without hardcoding an English letter: underline the first
   letter of whatever the localized menu word is. */
.s5-menu::first-letter { text-decoration: underline; text-underline-offset: 2px; }

/* toolbar / address bar */
.s5-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 4px 6px;
  background: var(--s5-face);
}
.s5-addr-label { font-family: var(--font-ui); font-size: var(--fs-sm); color: var(--s5-text); }
.s5-addr-box {
  flex: 1;
  display: flex; align-items: center; gap: 6px;
  background: #fff;
  padding: 3px 6px;
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  color: var(--s5-text);
  border-style: solid; border-width: 2px;
  border-color: var(--s5-dark) var(--s5-light) var(--s5-light) var(--s5-dark);
}
.s5-tools { display: flex; gap: 3px; }
.s5-tool {
  width: 22px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--s5-face); color: var(--s5-text);
  border: 2px solid;
  border-color: var(--s5-light) var(--s5-dark) var(--s5-dark) var(--s5-light);
  font-size: var(--fs-sm);
}

/* ── DETAILS / LIST VIEW ── */
.s5-colhead,
.s5-rowlink {
  display: grid;
  grid-template-columns: minmax(0, 2.4fr) 1.4fr 0.9fr 1fr 0.8fr;
  align-items: center;
  gap: 8px;
}
.s5-colhead {
  background: var(--s5-face);
  padding: 0 6px;
  margin: 0 3px;
}
.s5-colhead span {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: bold;
  color: var(--s5-text);
  padding: 4px 6px;
  border-style: solid; border-width: 2px;
  border-color: var(--s5-light) var(--s5-dark) var(--s5-dark) var(--s5-light);
  background: var(--s5-face);
}

/* ── Sortable column headers (enhanced by /js/stadiums-index.js; .is-sortable is
   added by JS, so the affordance only appears when sorting can actually happen) ── */
.s5-csort { position: relative; }
.s5-colhead.is-sortable .s5-csort { cursor: pointer; display: flex; align-items: center; }
.s5-colhead.is-sortable .s5-csort:hover { background: #d4d0c8; }
.s5-colhead.is-sortable .s5-csort:focus-visible { outline: 2px solid var(--c-yellow); outline-offset: -2px; }
/* the active (sorted) column gets the Win95 "pressed" inset bevel */
.s5-csort[aria-sort="ascending"],
.s5-csort[aria-sort="descending"] {
  border-color: var(--s5-dark) var(--s5-light) var(--s5-light) var(--s5-dark);
}
/* ↕ / ▲ / ▼ indicator — reset the button chrome inherited from `.s5-colhead span` */
.s5-sortind {
  border: 0; padding: 0; margin-left: auto; margin-right: 5px;
  background: none; font-weight: normal; display: none;
}
.s5-colhead.is-sortable .s5-sortind { display: inline-block; opacity: 0.4; }
.s5-colhead.is-sortable .s5-sortind::after { content: "\25BC"; }            /* ▼ idle: filled (faint via opacity); ▲/▼ at full opacity when active */
.s5-csort[aria-sort="ascending"] .s5-sortind,
.s5-csort[aria-sort="descending"] .s5-sortind { opacity: 1; }
.s5-csort[aria-sort="ascending"] .s5-sortind::after  { content: "\25B2"; } /* ▲ */
.s5-csort[aria-sort="descending"] .s5-sortind::after { content: "\25BC"; } /* ▼ */

/* the white file-list pane */
.s5-filelist {
  list-style: none;
  margin: 3px;
  background: #fff;
  border-style: solid; border-width: 2px;
  border-color: var(--s5-dark) var(--s5-light) var(--s5-light) var(--s5-dark);
  padding: 3px;
  max-height: 560px;
  overflow-y: auto;
}
.s5-row { display: block; }
.s5-rowlink {
  text-decoration: none;
  color: var(--s5-text);
  padding: 4px 6px;
  outline-offset: -2px;
}
.s5-rowlink:hover { background: #e8eefc; }
.s5-rowlink:focus-visible { background: var(--s5-sel); color: #fff; }
.s5-rowlink:focus-visible .s5-c-city,
.s5-rowlink:focus-visible .s5-c-country,
.s5-rowlink:focus-visible .s5-c-cap,
.s5-rowlink:focus-visible .s5-c-opened { color: #fff; }

.s5-rowlink span { font-family: var(--font-ui); font-size: var(--fs-sm); }
.s5-c-name { display: flex; align-items: center; gap: 7px; min-width: 0; }
.s5-fname { font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s5-c-city, .s5-c-country, .s5-c-cap, .s5-c-opened { color: #2a2a2a; }
.s5-c-cap, .s5-c-opened { font-variant-numeric: tabular-nums; }
.s5-flag { font-size: var(--fs-md); }
.s5-star { color: var(--c-orange, #e06000); font-size: var(--fs-sm); }
/* Distinct ★ colour per official 2026 role (matches the row icons + the bottom legend). */
.s5-star--opener { color: var(--c-yellow); }
.s5-star--final  { color: var(--c-sky); }

/* ── Legend (what the ★ markers mean) — sits above the footer ── */
.si-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 1.25rem;
  margin: 1rem 0 0.5rem;
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  color: var(--c-gray1, #c8c8c8);
}
.si-legend-label { color: var(--c-sky); text-transform: uppercase; letter-spacing: 0.05em; }
.si-legend-item { display: inline-flex; align-items: center; gap: 0.4rem; }
.si-legend-item .s5-star { font-size: var(--fs-md); }

/* pixel folder/file icons drawn with box-shadow (no images) */
.s5-ico {
  flex: 0 0 auto;
  width: 18px; height: 16px;
  display: inline-block;
  position: relative;
  image-rendering: pixelated;
  border: 1px solid var(--s5-dark);
}
.s5-ico::before {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, var(--s5-face) 6px, transparent 6px) top left / 8px 4px no-repeat,
    var(--s5-face);
  border-top: 2px solid var(--s5-dark);
}
.s5-ico::after {
  content: "";
  position: absolute;
  left: 3px; right: 3px; top: 4px; bottom: 3px;
}
/* role-coloured "drive" tabs on each icon */
.s5-ico--opener::after { background: var(--c-yellow); }
.s5-ico--final::after  { background: var(--c-orange, #e06000); }
.s5-ico--group::after  { background: var(--c-green, #2aa84a); }
.s5-ico--big { width: 40px; height: 36px; }
.s5-ico--big::after { left: 6px; right: 6px; top: 9px; bottom: 6px; }

/* role tags (text chips) */
.s5-roletag {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: bold;
  padding: 2px 6px;
  display: inline-block;
  border: 1px solid var(--s5-dark);
  white-space: nowrap;
}
.s5-roletag--opener { background: var(--c-yellow); color: var(--c-navy); }
.s5-roletag--final  { background: var(--c-orange, #e06000); color: #fff; }
.s5-roletag--group  { background: #d8d8d8; color: var(--s5-text); }

/* featured rows get a faint tint in the white pane */
.s5-row--feat .s5-rowlink { background: #fff7df; }
.s5-row--feat .s5-rowlink:hover { background: #fdeebf; }
.s5-row--feat .s5-rowlink:focus-visible { background: var(--s5-sel); }

/* window status bar */
.s5-winstatus {
  display: flex;
  gap: 3px;
  margin: 3px;
  margin-top: 4px;
}
.s5-ws-seg {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  color: var(--s5-text);
  padding: 3px 8px;
  background: var(--s5-face);
  border-style: solid; border-width: 2px;
  border-color: var(--s5-dark) var(--s5-light) var(--s5-light) var(--s5-dark);
}
.s5-ws-seg:first-child { flex: 0 0 auto; }
.s5-ws-counts { flex: 1; }
.s5-ws-hint { flex: 0 0 auto; color: var(--s5-dark); font-style: italic; }

/* ── "MY COMPUTER" DRIVES (by-nation FILTER) ── */
.s5-drives {
  background: var(--s5-face);
  color: var(--s5-text);
  border: 2px solid;
  border-color: var(--s5-light) var(--s5-dark) var(--s5-dark) var(--s5-light);
  box-shadow: 1px 1px 0 #000, 4px 4px 0 rgba(0,0,0,0.4);
  padding: 10px;
  margin-top: 1rem;
}
.s5-drives-title {
  font-family: var(--font-chrome);
  font-size: var(--fs-xs);
  color: var(--s5-text);
  margin-bottom: 10px;
}
.s5-drives-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.s5-drive {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 130px;
  padding: 8px 6px;
  background: #fff;
  border-style: solid; border-width: 2px;
  border-color: var(--s5-dark) var(--s5-light) var(--s5-light) var(--s5-dark);
  cursor: pointer;
}
.s5-drive:hover { background: #e8eefc; }
.s5-drive-ico { font-size: var(--fs-emoji); line-height: 1; }
.s5-drive-name { font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: bold; text-align: center; color: var(--s5-text); }
.s5-drive-meta { font-family: var(--font-ui); font-size: var(--fs-xs); color: var(--s5-dark); text-align: center; }
.s5-drive--total { background: #fff7df; }
.s5-drive--total:hover { background: #fdeebf; }

/* ── PURE-CSS NATION FILTER ──
   Each radio is an earlier sibling of #explorer-window's children, so a
   #f-XXX:checked ~ … .s5-window .s5-row rule can hide non-matching rows.
   "All" (default checked) hides nothing. Independent of the :target dialogs. */
#f-usa:checked ~ .s5-window .s5-filelist .s5-row:not([data-cc="USA"]),
#f-mex:checked ~ .s5-window .s5-filelist .s5-row:not([data-cc="MEX"]),
#f-can:checked ~ .s5-window .s5-filelist .s5-row:not([data-cc="CAN"]) {
  display: none;
}

/* active drive card highlight (the checked radio's label) */
#f-all:checked ~ .s5-drives label[for="f-all"],
#f-usa:checked ~ .s5-drives label[for="f-usa"],
#f-mex:checked ~ .s5-drives label[for="f-mex"],
#f-can:checked ~ .s5-drives label[for="f-can"] {
  background: #1f57c3;  /* brighter selection blue — readable with white text (~6.5:1), lighter than the harsh --s5-sel navy */
  border-color: var(--s5-dark) var(--s5-light) var(--s5-light) var(--s5-dark);
}
#f-all:checked ~ .s5-drives label[for="f-all"] .s5-drive-name,
#f-usa:checked ~ .s5-drives label[for="f-usa"] .s5-drive-name,
#f-mex:checked ~ .s5-drives label[for="f-mex"] .s5-drive-name,
#f-can:checked ~ .s5-drives label[for="f-can"] .s5-drive-name { color: #fff; }
#f-all:checked ~ .s5-drives label[for="f-all"] .s5-drive-meta,
#f-usa:checked ~ .s5-drives label[for="f-usa"] .s5-drive-meta,
#f-mex:checked ~ .s5-drives label[for="f-mex"] .s5-drive-meta,
#f-can:checked ~ .s5-drives label[for="f-can"] .s5-drive-meta { color: #eaf0ff; }

/* keyboard focus on a drive (focus is on the hidden radio → style its label) */
.s5-filter:focus-visible + .s5-window,
.s5-filter:focus-visible ~ .s5-drives label[for="f-all"] { outline: 2px dotted var(--s5-sel); outline-offset: 2px; }

/* ── PROPERTIES DIALOG (:target activated) ── */
.s5-dialog-layer {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.s5-dialog-layer:target { display: flex; }
.s5-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10,15,46,0.55);
}
.s5-dialog {
  position: relative;
  width: min(440px, 94vw);
  max-height: 90vh;
  overflow-y: auto;
  background: #c0c0c0;
  color: #1a1a1a;
  border: 2px solid;
  border-color: #ffffff #404040 #404040 #ffffff;
  box-shadow: 2px 2px 0 #000, 8px 8px 0 rgba(0,0,0,0.55);
  padding: 3px;
  font-family: var(--font-ui);
}
.s5-dlg-titlebar {
  display: flex; align-items: center; gap: 6px;
  background: linear-gradient(90deg, #0a246a, #3a6ea5);
  color: #fff;
  padding: 3px 4px;
  font-family: var(--font-chrome);
  font-size: var(--fs-xs);
}
.s5-dlg-titlebar .s5-tb-text { flex: 1; text-shadow: 1px 1px 0 #000; }
.s5-dlg-x {
  width: 18px; height: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #c0c0c0; color: #1a1a1a; text-decoration: none; font-weight: bold;
  border: 2px solid;
  border-color: #fff #404040 #404040 #fff;
  font-size: var(--fs-xs);
}
.s5-dlg-x:hover { background: var(--c-red, #cc2200); color: #fff; }

.s5-dlg-tabs {
  display: flex;
  gap: 2px;
  padding: 6px 8px 0;
  background: #c0c0c0;
}
.s5-tab {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  padding: 4px 12px 5px;
  background: #c0c0c0;
  color: #1a1a1a;
  border: 2px solid;
  border-color: #fff #404040 transparent #fff;
  border-bottom: none;
  position: relative;
  top: 2px;
}
.s5-tab--on { top: 0; padding-top: 6px; font-weight: bold; background: #c0c0c0; z-index: 2; }

.s5-dlg-body {
  margin: 0 6px;
  padding: 12px;
  background: #c0c0c0;
  border: 2px solid;
  border-color: #fff #404040 #404040 #fff;
}
.s5-dlg-head { display: flex; align-items: center; gap: 12px; }
.s5-dlg-name { font-family: var(--font-chrome); font-size: var(--fs-xs); color: #1a1a1a; line-height: 1.4; }
.s5-dlg-nick { font-family: var(--font-vt); font-size: var(--fs-lg); color: #404040; margin-top: 4px; }
.s5-dlg-sep { border: none; border-top: 1px solid #808080; border-bottom: 1px solid #fff; margin: 10px 0; }

.s5-proptable {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 6px 10px;
}
.s5-proptable dt {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: bold;
  color: #404040;
}
.s5-proptable dd {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  color: #1a1a1a;
  margin: 0;
}

.s5-dlg-btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 8px 8px;
}
.s5-btn {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  color: #1a1a1a;
  text-decoration: none;
  background: #c0c0c0;
  padding: 6px 18px;
  min-width: 74px;
  text-align: center;
  border: 2px solid;
  border-color: #fff #404040 #404040 #fff;
}
.s5-btn:hover { background: #d4d4d4; }
.s5-btn:active { border-color: #404040 #fff #fff #404040; }
.s5-btn--default { outline: 1px dotted #1a1a1a; outline-offset: -5px; font-weight: bold; }
.s5-btn--disabled { color: #808080; pointer-events: none; }

/* ── RESPONSIVE: collapse the table columns on narrow screens ── */
@media (max-width: 720px) {
  .s5-colhead { display: none; }
  .s5-rowlink {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "name cap"
      "city opened"
      "country opened";
    gap: 2px 8px;
    padding: 8px;
    border-bottom: 1px dotted #c8c8c8;
  }
  .s5-c-name { grid-area: name; }
  .s5-c-city { grid-area: city; }
  .s5-c-country { grid-area: country; }
  .s5-c-cap { grid-area: cap; align-self: center; text-align: right; }
  .s5-c-opened { grid-area: opened; justify-self: end; }
  .s5-winstatus { flex-direction: column; }
  .s5-drive { width: calc(50% - 5px); }
  .s5-proptable { grid-template-columns: 1fr; gap: 2px; }
  .s5-proptable dt { margin-top: 6px; }
}

/* ── REDUCED MOTION: marquee is global; keep this concept calm ── */
@media (prefers-reduced-motion: reduce) {
  .marquee-inner { animation: none; }
}