/* Landing-page demos, shared part: the design switch and the recent-results block. Dark only (the sample designs are dark). Tokens come from tokens.css.
   Every rule is scoped under .ld so nothing here can reach another page. No inline styles anywhere (strict CSP). */
html:has(.ldc) #theme { display: none; }               /* Control Room (a demo) is dark only, so the light/dark button would only break it */
html:not(.js) .ld .res-tools { display: none; }      /* search and filters need a script; without one the whole list is there to scroll */
.ld .sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* the switch between the two designs */
.ld-switch { position: fixed; z-index: 80; left: max(12px, env(safe-area-inset-left)); bottom: max(12px, env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 2px; padding: 4px;
  border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--ink-950) 88%, transparent); backdrop-filter: blur(10px); font: 700 12px var(--font-body); }
.ld-switch span { padding: 0 10px; color: var(--text-dim); letter-spacing: 0.06em; text-transform: uppercase; font-size: 11px; }
.ld-switch a { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 12px; border-radius: 999px; color: var(--text-dim); text-decoration: none; font-size: 13px; }
.ld-switch a:hover { color: var(--text); }
.ld-switch a[aria-current="page"] { background: var(--teal); color: var(--on-teal); }
.ld-switch a small { margin-left: 2px; font-size: 9px; opacity: 0.8; }
@media (max-width: 520px) { .ld-switch span { display: none; } }

/* ---- recent results ------------------------------------------------------------------------------------------------------ */
.ld-results { --acc: var(--teal); display: grid; gap: 18px; min-width: 0; }
.ld-results .res-head { display: grid; gap: 8px; max-width: 62ch; }
.ld-results .res-lede { color: var(--text-dim); max-width: 60ch; }
.res-tools { display: grid; gap: 12px; }
.res-search { position: relative; width: min(100%, 420px); }
.res-search input { width: 100%; min-height: 48px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--ink-800); color: var(--text); font: 500 15px var(--font-body); }
.res-search input::placeholder { color: var(--text-dim); }
.res-search input:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.res-groups { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.res-group { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--ink-900); }
.res-group > span { padding: 0 8px 0 10px; color: var(--text-dim); font: 700 11px var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; }
.res-group button { min-height: 44px; padding: 0 14px; border-radius: 999px; border: 0; background: none; color: var(--text-dim); cursor: pointer; font: 700 13.5px var(--font-body); }
.res-group button:hover { color: var(--text); }
.res-group button[aria-pressed="true"] { background: var(--text); color: var(--ink-950); }
.res-scroll { max-height: min(72vh, 680px); overflow: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--ink-900); overscroll-behavior: contain; }
.res-scroll:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.res-list { list-style: none; margin: 0; padding: 0; }
.res { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) auto auto; gap: 6px 18px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--line); }
.res:first-child { border-top: 0; }
.res[hidden] { display: none; }
.res-teams { display: flex; align-items: center; gap: 12px; min-width: 0; }
.res-badges { display: inline-flex; flex: none; }
.res-badges i { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--ink-900); background: var(--ink-800); color: var(--text); font: 800 10px var(--font-head); font-style: normal; letter-spacing: 0; overflow: hidden; }
.res-badges i + i { margin-left: -10px; background: color-mix(in srgb, var(--teal) 16%, var(--ink-800)); }
.res-names { display: grid; gap: 1px; min-width: 0; }
.res-names b { font-size: 14.5px; line-height: 1.3; overflow-wrap: anywhere; }
.res-meta { color: var(--text-dim); font-size: 12px; }
.res-pick { color: var(--teal-text); font-weight: 600; font-size: 13.5px; overflow-wrap: anywhere; }
.res-price { font: 700 16px var(--font-head); text-align: right; }
.res-out { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 96px; min-height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid currentColor; font: 700 12.5px var(--font-body); }
.res-out[data-outcome="WON"] { color: var(--good-text); background: color-mix(in srgb, var(--ring-green) 12%, transparent); }
.res-out[data-outcome="LOST"] { color: var(--bad-text); background: color-mix(in srgb, var(--ring-red) 10%, transparent); }
.res-out[data-outcome="VOID"] { color: var(--text-dim); }
.res-empty, .res-none { padding: 28px 16px; text-align: center; color: var(--text-dim); }
.res-note { color: var(--text-dim); font-size: 13px; }
@media (max-width: 720px) {
  .res { grid-template-columns: minmax(0, 1fr) auto; }
  .res-teams { grid-column: 1 / -1; }
  .res-pick { grid-column: 1; }
  .res-price { grid-column: 2; grid-row: 2; }
  .res-out { grid-column: 1 / -1; justify-self: start; }
}

/* in Chapters the chapter dots sit on the right edge: keep the list and its filters clear of them */
@media (min-width: 721px) { .ldd .ch-results .wrap { padding-right: 56px; } }
.res-search input::-webkit-search-cancel-button { margin-right: 4px; cursor: pointer; }