/*
 SPDX-License-Identifier: GPL-2.0-only
 Copyright (C) 2026 robinpie

 This program is free software; you can redistribute it and/or modify
 it under the terms of the GNU General Public License as published by
 the Free Software Foundation; version 2 of the License.

 This program is distributed in the hope that it will be useful,
 but WITHOUT ANY WARRANTY; without even the implied warranty of
 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 GNU General Public License for more details.
*/

/* OpenGET layout. Loaded on every page, under whichever skin the reader has
 * chosen. Owns the box model, flex/grid structure, max-widths, overflow,
 * the responsive breakpoint, and the type SCALE — legibility is a site
 * property, not a costume a skin is free to resize. A rule here with no
 * skin counterpart still renders, so a half-finished skin degrades to
 * unstyled rather than broken. See openget.txt (THEMES) for more. */

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
}

/* Every skin is required to draw a focus ring, but none of them is trusted to remember. currentColor is never invisible against the text it accompanies, so this is a floor rather than a design: a skin that sets nothing still passes 2.4.7, and a skin that sets its own colour overrides it by cascade order. */
:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }
main:focus { outline: none; }

/* Visually hidden, still read aloud and still focusable. Used for the page h1 on pages whose title is already carried by the masthead or the nav tab, and for the skip link until it takes focus. */
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Landmarks alone satisfy 2.4.1, but only for readers who navigate by them; a sighted keyboard user still faces fourteen nav links and a search box on every page without this. */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  padding: 8px 14px;
}
.skip:focus { left: 0; text-decoration: none; }

/* ---------------------------------------------------------------- chrome */

.masthead { padding: 12px 16px 0; }

/* Centred, not baseline-aligned: the three control clusters' first flex
 * items disagree about where a text baseline even is (input text, a
 * checkbox's bottom edge, a select's option text), so nothing lines up on
 * baseline. Centres are the only thing they have in common. */
.masthead-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
}

.brand {
  font-size: 30px;
  line-height: 1.1;
}
.brand small {
  display: block;
  margin-top: 2px;
  font-size: 11px;
}

/* Named .sitesearch rather than .searchbox: 7.css defines .searchbox as one of its own components and would otherwise take this element's display and position out from under the masthead. */
.sitesearch { margin-left: auto; display: flex; gap: 6px; }
.sitesearch input { padding: 5px 8px; font: inherit; min-width: 190px; }

/* The site-wide free-to-play filter, in the masthead since it applies to
 * every list page. Carries its own Apply button, since there is no
 * JavaScript here to submit on change. */
.f2ptoggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  white-space: nowrap;
}
/* The label is the checkbox's real target — the 15px box is only the part you can see. 24px tall so 2.5.8 is met outright rather than by arguing the spacing exception. */
.f2ptoggle label { display: flex; align-items: center; gap: 5px; cursor: pointer; min-height: 24px; }
.f2ptoggle input[type="checkbox"] { width: 15px; height: 15px; }
.f2ptoggle button { padding: 3px 10px; font-size: 12px; }

/* The theme picker. Same shape and same reasoning as the free-to-play toggle beside it: a select that only takes effect when you press Apply, because there is no script here to submit on change. */
.themepick {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  white-space: nowrap;
}
.themepick label { display: flex; align-items: center; gap: 5px; min-height: 24px; }
.themepick select { padding: 3px 6px; font: inherit; font-size: 12px; }
.themepick button { padding: 3px 10px; font-size: 12px; }

nav.tabs {
  max-width: 1180px;
  margin: 10px auto 0;
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}
nav.tabs a { padding: 6px 13px 5px; font-size: 13px; }

main {
  max-width: 1180px;
  margin: 0 auto;
  padding: 20px 16px 40px;
}

/* --------------------------------------------------------------- content */

h1 { margin: 0 0 4px; font-size: 34px; line-height: 1.15; }
.subtitle { margin: 0 0 20px; max-width: 74ch; }
/* :not([class]) is the line between a section heading and a panel's own
 * title bar — both are h2 now, but only the bare one wants the 24px and
 * the skins' rule under it. A Heading block never carries a class; a panel
 * title always does (.title-bar / .linkhead). */
h2:not([class]) { margin: 30px 0 10px; font-size: 24px; padding-bottom: 5px; }
h3:not([class]) { margin: 20px 0 8px; font-size: 18px; }

/* A label on a list of links, not a section of the page: the size and spacing the bare h3 above had, since that is what these were before they were levelled. */
.linkhead { margin: 20px 0 8px; font-size: 18px; }

.muted { font-size: 13.5px; }

pre { padding: 10px 12px; overflow-x: auto; font-size: 13px; }

/* ---------------------------------------------------------------- tables */

.tablewrap { overflow-x: auto; margin: 14px 0 22px; }

/* A real <caption> rather than a paragraph after the table: it names the table for anything listing them, and it lands above the scroll the way the text and gemtext renderers have always printed it. */
table caption {
  caption-side: top;
  text-align: left;
  padding: 0 0 6px;
  font-size: 13.5px;
}

table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  min-width: 640px;
  font-size: 13.5px;
}

thead th {
  text-align: left;
  padding: 8px 10px;
  font-size: 12px;
  white-space: nowrap;
  position: sticky;
  top: 0;
}
thead th.r { text-align: right; }

tbody :is(td, th) { padding: 5px 10px; }
tbody :is(td, th).r { text-align: right; font-variant-numeric: tabular-nums; }
/* The first cell of each row is a <th scope="row">. Still a body cell to
 * look at: the UA's bold-and-centred th default reads as unintended
 * emphasis down a column of item names, so it's undone here. */
tbody th { font-weight: inherit; text-align: inherit; }

/* ----------------------------------------------------------------- facts */

.facts {
  display: inline-block;
  vertical-align: top;
  padding: 4px 14px 12px;
  margin: 0 12px 12px 0;
  min-width: 260px;
}
.facts :is(h2, h3) { margin: 9px 0 7px; font-size: 12px; }
.facts dl { margin: 0; display: grid; grid-template-columns: auto auto; gap: 3px 16px; }
.facts dt { font-size: 13px; }
.facts dd {
  margin: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}

/* ----------------------------------------------------------------- links */

ul.linklist { list-style: none; padding: 0; margin: 10px 0 20px; }
ul.linklist li { padding: 3px 0 3px 16px; position: relative; }
ul.linklist .muted { font-size: 13px; }

/* ---------------------------------------------------------------- charts */

.chartbox { margin: 18px 0; padding: 10px; overflow-x: auto; }
.chartbox figcaption { font-size: 13px; margin-bottom: 8px; }
svg.chart { display: block; max-width: 100%; }
svg.chart .ylab { font-size: 10px; text-anchor: end; }
svg.chart .xlab { font-size: 10px; text-anchor: middle; }
svg.chart .legend { font-size: 11px; }
svg.chart .chart-empty { font-size: 13px; text-anchor: middle; }

/* ----------------------------------------------------------------- forms */

.ogform {
  padding: 14px;
  margin: 14px 0 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}
.ogform p { flex-basis: 100%; margin: 0 0 4px; }
.field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.field input, .field select { padding: 5px 8px; font: inherit; }
.field small { font-size: 11.5px; }

/* A checkbox sits beside its label, not under it. order:-1 puts the box
 * first without reordering the markup, keeping the whole label clickable. */
.field.check { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 7px; }
.field.check input { order: -1; width: 15px; height: 15px; padding: 0; }
.field.check small { flex-basis: 100%; }

/* 2.5.8 Target Size (Minimum), WCAG 2.2 AA: no control may draw under
 * 24px. A skin loading a vendored sheet after this one has to restate it —
 * both Windows frameworks here ship 23px buttons. */
button { padding: 6px 18px; font: inherit; cursor: pointer; }
button, select { min-height: 24px; }

/* ----------------------------------------------------------------- notes */

.notes { margin: 26px 0 0; padding: 0 0 11px; }
.notes :is(h2, h3) { margin: 0 0 10px; padding: 5px 12px; font-size: 13px; }
.notes ul { margin: 0; padding: 0 14px 0 12px; list-style: none; }
.notes li { position: relative; padding-left: 16px; font-size: 13px; margin-bottom: 6px; }
.notes li:last-child { margin-bottom: 0; }

.paging { display: flex; gap: 12px; align-items: center; margin: 12px 0 20px; font-size: 13.5px; }

/* The "prices updated" line, which the Windows skins render as a window status bar. Only the first field grows, the way an Explorer status bar puts the wide message on the left and pins the short ones to the right. */
.status-bar { margin: 12px 0 0; padding: 3px 6px; display: flex; gap: 6px; font-size: 13px; }
.status-bar-field { margin: 0; padding: 2px 6px; flex: 1; }
.status-bar-field + .status-bar-field { flex: 0 0 auto; }

/* ---------------------------------------------------------------- footer */

footer { padding: 18px 16px; font-size: 12.5px; }
footer .inner { max-width: 1180px; margin: 0 auto; }
footer p { max-width: 90ch; margin: 5px 0; }
/* The 88x31 badge row. All three are that size, which is the whole reason the format survived. */
footer .badges { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; }
footer .badges img { display: block; }

/* ------------------------------------------------------------ responsive */

@media (max-width: 720px) {
  body { font-size: 14px; }
  .masthead-inner { flex-direction: column; align-items: stretch; }
  .brand { font-size: 25px; }
  .sitesearch { margin-left: 0; }
  .sitesearch input { min-width: 0; flex: 1; }
  /* The masthead is a column here, so these would otherwise stretch their buttons across the full width of the screen. */
  .f2ptoggle, .themepick { justify-content: space-between; }
  .facts { display: block; margin-right: 0; min-width: 0; }
  h1 { font-size: 26px; }
  h2:not([class]) { font-size: 20px; }
  main { padding: 14px 10px 30px; }
}

/* Print is ink on paper in every theme, so it is one sheet here rather than three. Colour is forced rather than inherited: a dark skin printed as-is is a page of toner. */
@media print {
  body { background: #fff; color: #000; }
  .masthead, nav.tabs, .sitesearch, .f2ptoggle, .themepick, footer { display: none; }
  table { background: #fff; color: #000; min-width: 0; }
  thead th { background: #eee; color: #000; }
  a { color: #000; }
  .facts, .notes, .ogform, .chartbox { background: #fff; color: #000; border: 1px solid #000; }
}