/* CALIBRE Play - The Calibre Index (/calibre-index/, parent page-calibre-index.php; data + JS untouched).
   Data looks like data: DM Mono numbers, tabular figures, calm panels on the dark ground, the four
   factors in their type colours (centering water, corners fire, edges grass, surface psychic, as on the
   home page). The long set table scrolls inside its panel instead of stretching the page.
   /calibre-dark.css styles .panel with !important, so a few rules here need it too. */

html body { --mut: var(--play-muted); --mut2: var(--play-muted); --panel: var(--play-card); --ink2: var(--play-card-2); --line: var(--play-line); }
html body .wrap { max-width: 1160px; padding: 0 16px; }

/* Index sub-header (sticks under the site nav) */
html body > header { background: rgba(18, 20, 41, .9); border-bottom: 1px solid var(--play-line); }
html body .mark { font-family: var(--f-brand); font-weight: 700; letter-spacing: .1em; font-size: 24px; color: var(--play-ink); }
html body .mark b { color: var(--play-electric); }
html body .tag { color: var(--play-muted); border-left-color: var(--play-line); }
html body .live { color: var(--play-muted); }
html body .live #liveN { font: 500 14px var(--f-data); color: var(--play-ink); font-variant-numeric: tabular-nums; }
html body .dot { background: var(--play-grass); box-shadow: 0 0 10px var(--play-grass); }

/* hero */
html body .hero { padding: 40px 0 6px; }
html body .hero h1 { font-family: var(--f-display); font-weight: 400; font-size: clamp(34px, 6vw, 64px); line-height: 1.02; letter-spacing: .005em; margin: 0 0 14px; }
html body .hero h1 .b { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--play-electric); }
html body .lede { color: var(--play-muted); font-size: 17px; line-height: 1.55; max-width: 62ch; }

/* filters */
html body .filters { gap: 10px 14px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--play-line); background: var(--play-card); box-shadow: var(--play-shadow); }
html body .filters > div { display: flex; align-items: center; gap: 8px; }
html body .filters label { font: 800 11.5px/1 var(--f-body); letter-spacing: .12em; color: var(--play-muted); margin: 0; }
html body .filters select {
  min-height: 44px; padding: 0 10px; font: 600 14px var(--f-body); color: var(--play-ink) !important;
  background-color: var(--play-card-2) !important; border: 1.5px solid var(--play-line) !important; border-radius: 10px;
}
html body .filters select:hover { border-color: var(--play-water) !important; }
html body .reset { min-height: 44px; padding: 0 6px; font: 600 14px var(--f-body); color: var(--play-fire-ink); }

/* headline numbers */
html body .stats { gap: 12px; margin: 14px 0 6px; }
html body .stat { border-radius: 16px; border: 1px solid var(--play-line); background: var(--play-card); box-shadow: var(--play-shadow); padding: 16px 18px; }
html body .stat .k { font: 800 11.5px/1.2 var(--f-body); letter-spacing: .12em; color: var(--play-muted); }
html body .stat .v { font: 500 44px/1 var(--f-data); letter-spacing: -.03em; margin-top: 10px; font-variant-numeric: tabular-nums; color: var(--play-ink); }
html body .stat .ci { font: 500 12.5px/1.4 var(--f-data); color: var(--play-muted); margin-top: 8px; }

/* panels */
html body .panel { border-radius: 18px; padding: 18px 20px; background: var(--play-card) !important; border: 1px solid var(--play-line) !important; box-shadow: var(--play-shadow); color: var(--play-ink) !important; }
html body .panel h2 { font-family: var(--f-display); font-weight: 400; font-size: clamp(20px, 2.4vw, 24px); letter-spacing: .005em; margin: 0 0 6px; }
html body .panel .sub { color: var(--play-muted); font-size: 14px; line-height: 1.5; margin-bottom: 14px; }
html body .panel .sub span[style*="accent2"] { color: var(--play-electric) !important; }
html body .grid { gap: 14px; margin-top: 14px; }
html body .axis { color: var(--play-muted); font: 500 12px var(--f-data); }
html body .tip { background: #0d0f20; border-color: var(--play-water); color: var(--play-ink); font-size: 13px; }
html body .tip .r { color: var(--play-muted); }
html body .tip .r span:last-child, html body .tip .r b { font-family: var(--f-data); }

/* the set table: numbers in mono, scrolls inside its panel */
html body .panel:has(#league) {
  max-height: 640px; overflow: auto; overscroll-behavior: contain; padding-top: 0;
  /* a soft shadow at the bottom edge while there's more to scroll */
  background: linear-gradient(rgba(28, 31, 60, 0), var(--play-card) 65%) center bottom / 100% 48px no-repeat local,
    linear-gradient(rgba(5, 6, 16, 0), rgba(5, 6, 16, .7)) center bottom / 100% 36px no-repeat scroll, var(--play-card) !important;
}
html body .panel:has(#league) > h2 { padding-top: 18px; }
html body .panel:has(#league) table { font-size: 14px; }
html body .panel:has(#league) th {
  position: sticky; top: 0; z-index: 1; background: var(--play-card); box-shadow: 0 1px 0 var(--play-line);
  font: 800 11.5px/1.2 var(--f-body); letter-spacing: .1em; color: var(--play-muted); padding: 16px 10px;
}
html body .panel:has(#league) th:hover { color: var(--play-ink); }
html body #league td { padding: 10px; border-bottom: 1px solid var(--play-line); }
html body #league td:not(:first-child) { font-family: var(--f-data); font-variant-numeric: tabular-nums; white-space: nowrap; }
html body #league tr.row:hover td { background: rgba(111, 157, 224, .08); }
html body .emerging { color: var(--play-electric); border-color: color-mix(in srgb, var(--play-electric) 45%, transparent); font: 600 11px var(--f-body); white-space: nowrap; display: inline-block; margin: 2px 0 0 6px; }
html body .barmini { background: linear-gradient(90deg, var(--play-fire), var(--play-electric), var(--play-grass)); }
html body #league td span[style*="font-size"] { color: var(--play-muted) !important; font-family: var(--f-data); }

/* radar: grid lines visible on the dark panel, factor names in their type colours */
html body #radar polygon { stroke: rgba(242, 242, 251, .13); }
html body #radar polygon:last-of-type { fill: rgba(227, 193, 95, .16); stroke: var(--play-electric); }
html body #radar text { font-family: var(--f-body); font-size: 12px; }
html body #radar text:nth-of-type(2n) { font-family: var(--f-data); font-size: 13px; fill: var(--play-ink); }
html body #radar text:nth-of-type(1) { fill: var(--play-water); }
html body #radar text:nth-of-type(3) { fill: var(--play-fire-ink); }
html body #radar text:nth-of-type(5) { fill: var(--play-grass); }
html body #radar text:nth-of-type(7) { fill: var(--play-psychic); }

/* where the points go: the four factors in their type colours */
html body .barrow .lab { color: var(--play-ink); font: 600 14px var(--f-body); width: 84px; }
html body .barrow .track { background: var(--play-card-2); height: 22px; border-radius: 8px; }
html body .barrow .fill { background: var(--tone, var(--play-water)); color: var(--play-on); font: 500 12px var(--f-data); border-radius: 8px; }
html body #bott .barrow:nth-child(1) { --tone: var(--play-grass); }   /* edges */
html body #bott .barrow:nth-child(2) { --tone: var(--play-fire); }    /* corners */
html body #bott .barrow:nth-child(3) { --tone: var(--play-water); }   /* centering */
html body #bott .barrow:nth-child(4) { --tone: var(--play-psychic); } /* surface */
html body #bott > div:last-child { color: var(--play-muted) !important; font: 500 12.5px var(--f-data); }

/* country contrast */
html body .cmp .col { border: 1px solid var(--play-line); background: var(--play-card-2); border-radius: 14px; }
html body .cmp .big { font: 500 38px/1 var(--f-data); letter-spacing: -.03em; margin: 10px 0 6px; }
html body .cmp .col div[style]:not(.big) { color: var(--play-muted) !important; }
html body .empty { color: var(--play-muted); border-color: var(--play-line); font-size: 14px; line-height: 1.5; }

/* the "generated" line under the panels */
html body #app > div[style*="text-align:center"] { color: var(--play-muted) !important; font-family: var(--f-body) !important; font-size: 13px !important; }
html body #gen { font-family: var(--f-data); }

/* admin gate (only shown without access) */
html body .gate input { min-height: 46px; }
html body .gate button { background: var(--play-fire); color: var(--play-on); min-height: 46px; }

/* the computed grade colours (hsl red-to-green) stay; they're the data. */

@media (max-width: 900px) {
  html body .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  html body > header { position: static; }
  html body .hbar { gap: 4px 14px; padding: 10px 16px 12px; }
  html body .mark { font-size: 19px; }
  html body .hero { padding-top: 22px; }
  html body .lede { font-size: 16px; }
  html body .filters { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 12px; }
  html body .filters > div { flex-direction: column; align-items: stretch; gap: 6px; min-width: 0; }
  html body .filters select { width: 100%; min-width: 0; }
  html body .reset { grid-column: 1 / -1; justify-self: end; margin: 0; }
  html body .stat { padding: 14px; }
  html body .stat .v { font-size: 34px; }
  html body .stat .ci { font-size: 11.5px; }
  html body .panel { padding: 16px 14px; }
  html body .panel:has(#league) { max-height: 560px; }
  /* hide the min-max "Spread" column on phones so set names have room */
  html body .panel:has(#league) th:nth-child(5), html body #league td:nth-child(5) { display: none; }
  html body .panel:has(#league) table { font-size: 13.5px; }
  html body #league td, html body .panel:has(#league) th { padding-left: 6px; padding-right: 6px; }
  html body .cmp .big { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  html body .dot { animation: none; }
  html body .barrow .fill { transition: none; }
}

/* the low end of the script's red-to-green grade colour is too dark on the panel; lift it */
html body #league td:nth-child(3), html body .stat .v[style], html body .cmp .big { filter: brightness(1.3); }

/* /calibre-dark.css loads on this page and forces input colours with !important (lead, 2026-10-07) */
html body input:not([type=checkbox]):not([type=radio]), html body select, html body textarea { background: var(--play-card-2) !important; color: var(--play-ink) !important; border: 1.5px solid var(--play-line) !important; }
html body input:not([type=checkbox]):not([type=radio]):focus, html body select:focus, html body textarea:focus { border-color: var(--play-water) !important; }