/*! Open Historia — wiki & guides stylesheet © 2026 Nicholas Krol, AGPL-3.0-or-later. */
/* The dark parchment/bronze theme, shared with the landing page so the wiki reads as part of
   the site rather than a bolted-on doc host. Tokens, the fluid root size, the header and the
   footer are ported verbatim from site/index.html — if that page's palette moves, move these
   with it. The landing page went dark in "Website improvements"; everything below followed it,
   which is why a handful of rules that used to name a light value now name a dark one.
   The guides component classes (.card, .step, .comparison-table, …) keep their names from the
   pre-wiki guides stylesheet so migrated guide markup renders unchanged; only colours moved.
   public/guides.css is a one-line @import of this file, for anything still linking the old
   name (older desktop installs, cached pages). */

:root {
  --parch: #111113;
  --parch2: #17171a;
  --marble: #1a1a1f;
  --marble2: #212128;
  --ink: #ece4d2;
  --sepia: #a4987f;
  --sepia2: #877c66;
  --line: rgba(233, 220, 192, .14);
  --line2: rgba(233, 220, 192, .26);
  --bronze: #c9932f;
  --bronze-d: #a57a22;
  --gold: #c9932f;
  --gold-l: #dcb954;
  --red: #a8394a;
  --red-d: #7a1e2b;
  --green: #5d9149;
  --grad-gold: linear-gradient(100deg, #a7761f 0%, #e0b44a 52%, #b98f2e 100%);
  --shadow: 0 1.125rem 2.625rem -1.375rem rgba(0, 0, 0, .8);
  --radius: 0.875rem;
  --serif: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --display: 'Cinzel', Georgia, 'Times New Roman', serif;
  --mono: 'Fira Code', 'Cascadia Code', Consolas, monospace;

  /* Wiki-only, and not on the landing page because it never needs them: --red and --green are
     panel and border colours there, but here they are set on TEXT — a ✓, a ✗, a beta badge —
     where neither clears 4.5:1 against the page. These are the same hues lifted to that bar. */
  --red-l: #d4677a;
  --green-l: #86bb6d;
}

/* Native controls — the sidebar search box, its scrollbar, a focus ring — are painted by the
   browser, and on a dark page a light default reads as a bug. */
:root { color-scheme: dark; }

*, *::before, *::after { box-sizing: border-box; }

@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

html {
  /* Clears the sticky header, so a heading jumped to from the contents list is not hidden
     under it — the same offset the landing page uses for its in-page anchors. */
  scroll-padding-top: 5.5rem;
  /* Fluid root size, identical to the landing page: everything below is rem, so this scales
     the page as one. Clamped to 1rem at/below ~90rem, so nothing changes on a laptop. */
  font-size: clamp(1rem, 0.536vw + 0.51812rem, 1.5rem);
}

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(75rem 33.75rem at 50% -12%, rgba(201, 147, 47, .14), transparent 60%),
    radial-gradient(62.5rem 35rem at 100% 2%, rgba(168, 57, 74, .08), transparent 55%),
    repeating-linear-gradient(112deg, rgba(233, 220, 192, .02) 0 0.125rem, transparent 0.125rem 0.4375rem),
    var(--parch);
  overflow-x: hidden;
}

a { color: var(--bronze); text-decoration: none; }
a:hover { color: var(--gold-l); text-decoration: underline; }

.wrap { max-width: 65rem; margin: 0 auto; padding: 0 1.5rem; }

h1, h2, h3, h4, .brand { font-family: var(--display); color: var(--ink); }

/* ---------- header (ported from the landing page) ---------- */

header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(0.5rem);
  background: color-mix(in srgb, var(--parch) 82%, transparent);
  border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; justify-content: space-between; height: 4rem; }
.brand {
  display: flex; align-items: center; gap: 0.625rem;
  font-weight: 700; font-size: 1.12rem; letter-spacing: .04em; color: var(--ink);
}
.brand:hover { text-decoration: none; }
/* Icon instead of an emoji: same glyph cross-platform, stays in palette. /icon-192.png is in
   assemble-site.mjs's ROOT_ASSETS, so it resolves both on the site and inside the desktop app,
   which serves public/ at its own root. */
.mark { width: 1.75rem; height: 1.75rem; display: block; border-radius: 0.375rem; object-fit: contain; flex: none; }
footer .mark {
  width: 1.35rem; height: 1.35rem; display: inline-block;
  vertical-align: -0.3em; margin-right: 0.25rem; border-radius: 0.25rem;
}
.nav-links { display: flex; align-items: center; gap: 1.75rem; font-size: 1.02rem; }
.nav-links a { color: var(--sepia); transition: color .15s; }
.nav-links a:hover { color: var(--ink); text-decoration: none; }
.nav-cta {
  font-family: var(--display); font-size: .86rem; letter-spacing: .08em;
  text-transform: uppercase; font-weight: 700;
  padding: 0.5625rem 1.125rem; border-radius: 0.5rem;
  background: linear-gradient(180deg, #98283a, var(--red-d));
  color: #f7eccf;
  border: 1px solid rgba(255, 222, 160, .4);
  box-shadow: 0 0.375rem 0.875rem -0.375rem rgba(0, 0, 0, .8);
  transition: background .2s, box-shadow .2s;
}
.nav-cta:hover { background: linear-gradient(180deg, #a12b3e, #7a1e2b); color: #f7eccf; text-decoration: none; }
/* There is no hamburger menu, so below 720px the nav collapses to the Play button plus
   anything explicitly marked .nav-keep — the wiki link has to survive on a phone. */
@media (max-width: 720px) {
  .nav-links a:not(.nav-cta):not(.nav-keep) { display: none; }
  .nav-links { gap: 1rem; }
}

/* ---------- wiki layout ---------- */

.wiki-layout {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
  padding-top: 2rem;
  padding-bottom: 3rem;
}

.wiki-sidebar {
  position: sticky;
  top: 5rem;
  /* Its own scrollbar: the systems section is long enough to outrun a short viewport, and a
     sidebar that scrolls the page instead of itself loses the reader's place. */
  max-height: calc(100vh - 6.5rem);
  overflow-y: auto;
  padding-right: 0.5rem;
  font-size: 0.95rem;
  /* A default scrollbar here is a bright grey slab against the parchment and reads as a page
     divider rather than a control. Thin and tinted, it disappears until it is needed. */
  scrollbar-width: thin;
  scrollbar-color: var(--line2) transparent;
}
.wiki-sidebar::-webkit-scrollbar { width: 0.4rem; }
.wiki-sidebar::-webkit-scrollbar-track { background: transparent; }
.wiki-sidebar::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 999px; }

.wiki-nav, .wiki-nav ul { list-style: none; margin: 0; padding: 0; }
.wiki-nav .sec { margin-bottom: 1.25rem; }
.wiki-nav .sec > span {
  display: block;
  font-family: var(--display);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--sepia2);
  margin-bottom: 0.45rem;
}
.wiki-nav li a {
  display: block;
  padding: 0.22rem 0.6rem;
  margin-left: -0.6rem;
  border-radius: 0.375rem;
  color: var(--sepia);
  border-left: 2px solid transparent;
  transition: color .15s, background .15s;
}
.wiki-nav li a:hover { color: var(--ink); background: rgba(233, 220, 192, .07); text-decoration: none; }
.wiki-nav li a.on {
  color: var(--gold-l);
  font-weight: 600;
  background: var(--marble2);
  border-left-color: var(--gold);
}

/* ---------- search ---------- */

.wiki-search { position: relative; margin-bottom: 1.5rem; }
.wiki-search input {
  width: 100%;
  font-family: var(--serif);
  font-size: 0.95rem;
  color: var(--ink);
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--line2);
  border-radius: 0.5rem;
  background: var(--marble2);
}
.wiki-search input::placeholder { color: var(--sepia2); opacity: 1; }
.wiki-search input:focus { outline: 2px solid var(--gold-l); outline-offset: 1px; }
.wiki-search ul {
  position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 0.35rem);
  list-style: none; margin: 0; padding: 0.3rem;
  background: var(--marble2);
  border: 1px solid var(--line2);
  border-radius: 0.5rem;
  box-shadow: var(--shadow);
  max-height: 20rem; overflow-y: auto;
}
.wiki-search li a {
  display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem;
  padding: 0.35rem 0.5rem; border-radius: 0.375rem; color: var(--ink); font-size: 0.92rem;
}
.wiki-search li a:hover { background: var(--parch2); color: var(--ink); text-decoration: none; }
.wiki-search li a span { color: var(--sepia2); font-size: 0.76rem; white-space: nowrap; }
.wiki-search li.none { padding: 0.35rem 0.5rem; color: var(--sepia2); font-size: 0.9rem; }

/* ---------- main column ---------- */

.wiki-main { min-width: 0; }
.wiki-main h1 { font-size: 2.3rem; line-height: 1.2; margin: 0 0 0.4rem; }
.wiki-main h2 {
  font-size: 1.5rem; margin: 2.4rem 0 0.7rem;
  padding-bottom: 0.35rem; border-bottom: 1px solid var(--line);
}
.wiki-main h3 { font-size: 1.15rem; margin: 1.7rem 0 0.5rem; color: var(--bronze); }
.wiki-main p { margin: 0 0 1rem; }
.wiki-main ul, .wiki-main ol { margin: 0 0 1rem; padding-left: 1.5rem; }
.wiki-main li { margin-bottom: 0.4rem; }
.wiki-main img { max-width: 100%; height: auto; border-radius: 0.5rem; border: 1px solid var(--line2); background: var(--marble); }

/* Markdown renders "![alt](src)" then an italic caption line as ONE paragraph, so the image is
   an inline box with the caption flowing after it. On a wide screenshot that wraps and looks
   right by accident; on a cropped panel there is room left over and the caption sits BESIDE the
   image instead of under it. Force both to blocks so the caption is always below. */
.wiki-main p > img { display: block; margin: 0 auto 0.55rem; }
.wiki-main p > img + em {
  display: block;
  text-align: center;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--sepia);
  max-width: 34rem;
  margin: 0 auto;
}
.wiki-main hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }
.wiki-main blockquote {
  margin: 0 0 1rem; padding: 0.6rem 1rem;
  border-left: 3px solid var(--gold); background: var(--marble2);
  border-radius: 0 0.375rem 0.375rem 0; color: var(--sepia);
}
.wiki-main blockquote p:last-child { margin-bottom: 0; }

.breadcrumbs { font-size: 0.88rem; color: var(--sepia2); margin-bottom: 1.2rem; }
.breadcrumbs a { color: var(--sepia); }
.breadcrumbs span { margin: 0 0.35rem; }

.tagline { font-size: 1.15rem; color: var(--sepia); margin-bottom: 1.6rem; }
.subtitle { font-size: 1.1rem; color: var(--sepia2); margin-bottom: 2rem; }
.muted { color: var(--sepia); }
.highlight { color: var(--bronze); font-weight: 600; }
.check { color: var(--green-l); font-weight: 700; }
.cross { color: var(--red-l); font-weight: 700; }

/* ---------- standalone guide pages ---------- */

/* The wiki owns .wiki-main, but two pages outside it still use the old .page shell and reach
   this stylesheet through the /guides.css shim: /pax-historia-alternative/ (kept at its own URL
   for search) and /sitemap/, plus the redirect stubs. Give .page the same typography so they do
   not render as unstyled prose. */
.page {
  max-width: 50rem;
  margin: 0 auto;
  padding: 3rem 1.5rem 5rem;
}
.page h1, .wiki-main h1 { font-size: 2.3rem; line-height: 1.2; margin: 0 0 0.4rem; }
.page h2 {
  font-size: 1.5rem; margin: 2.4rem 0 0.7rem;
  padding-bottom: 0.35rem; border-bottom: 1px solid var(--line);
}
.page h3 { font-size: 1.15rem; margin: 1.7rem 0 0.5rem; color: var(--bronze); }
.page p { margin: 0 0 1rem; }
.page ul, .page ol { margin: 0 0 1rem; padding-left: 1.5rem; }
.page li { margin-bottom: 0.4rem; }

.logo {
  display: block;
  width: 4rem;
  height: 4rem;
  margin: 0 auto 1.5rem;
  border-radius: 0.75rem;
}

/* ---------- beta markers ---------- */

/* Crimson rather than bronze: everything else on the page is warm, so a notice that says
   "your build may not have this" has to read as an exception at a glance. */
.beta-note, p.beta-note {
  background: rgba(168, 57, 74, .12);
  border: 1px solid rgba(168, 57, 74, .34);
  border-left: 3px solid var(--red);
  border-radius: 0 0.5rem 0.5rem 0;
  padding: 0.7rem 1rem;
  margin: 0 0 1.6rem;
  font-size: 0.98rem;
  color: var(--sepia);
}
.beta-note b { color: var(--red-l); }

.wiki-nav li a em {
  font-family: var(--display);
  font-style: normal;
  font-size: .6rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--red-l);
  border: 1px solid rgba(168, 57, 74, .45);
  border-radius: 0.25rem;
  padding: 0 0.25rem;
  margin-left: 0.3rem;
  vertical-align: 0.1em;
}

/* ---------- on-page contents ---------- */

.wiki-toc {
  background: var(--marble2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin: 0 0 2rem;
  font-size: 0.95rem;
}
.wiki-toc b {
  display: block; font-family: var(--display); font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--sepia2); margin-bottom: 0.5rem;
}
.wiki-toc ul { list-style: none; margin: 0; padding: 0; }
.wiki-toc li { margin: 0.15rem 0; }
.wiki-toc li.d3 { padding-left: 1rem; font-size: 0.9rem; }
.wiki-toc a { color: var(--sepia); }
.wiki-toc a:hover { color: var(--gold-l); }

/* ---------- cards, steps, grids (names kept from the old guides stylesheet) ---------- */

.card {
  background: var(--marble);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.4rem 1.5rem;
  margin-bottom: 1.2rem;
}
.card h3 { margin-top: 0; color: var(--ink); }
.card p:last-child, .card li:last-child { margin-bottom: 0; }

.step {
  background: var(--marble);
  border: 1px solid var(--line);
  border-radius: 0.625rem;
  padding: 1.1rem 1.4rem;
  margin-bottom: 1rem;
}
.step strong { display: block; color: var(--bronze); font-family: var(--display); margin-bottom: 0.3rem; }
.step p { margin: 0; font-size: 0.98rem; }

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
  margin: 1.2rem 0 1.8rem;
}
.feature-tag {
  background: var(--marble);
  border: 1px solid var(--line);
  border-radius: 0.375rem;
  padding: 0.65rem 1rem;
  font-size: 0.95rem;
  color: var(--sepia);
  text-align: center;
}

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

/* Wide reference tables scroll inside this box; the page body never scrolls sideways. */
.table-scroll { overflow-x: auto; margin: 1rem 0 1.6rem; }
.wiki-main table, .comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  background: var(--marble);
}
.wiki-main th, .comparison-table th {
  font-family: var(--display);
  font-size: 0.85rem;
  letter-spacing: .04em;
  text-align: left;
  color: var(--ink);
  background: var(--parch2);
  padding: 0.6rem 0.9rem;
  border-bottom: 2px solid var(--line2);
  white-space: nowrap;
}
.wiki-main td, .comparison-table td {
  padding: 0.5rem 0.9rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.wiki-main tbody tr:nth-child(even) td, .comparison-table tr:nth-child(even) td { background: var(--marble2); }
.comparison-table { margin: 1rem 0 2rem; }

/* ---------- code ---------- */

code {
  font-family: var(--mono);
  font-size: 0.86em;
  background: var(--marble2);
  border: 1px solid var(--line);
  color: var(--gold-l);
  padding: 0.1em 0.35em;
  border-radius: 0.25rem;
}
pre {
  /* Below the page rather than above it: on a dark ground a lighter panel would pull the eye
     to the commands and away from the prose that explains them. */
  background: #0b0b0d;
  border: 1px solid var(--line2);
  border-radius: 0.5rem;
  padding: 1rem 1.2rem;
  overflow-x: auto;
  margin: 0.8rem 0 1.4rem;
}
pre code {
  background: none; border: 0; padding: 0;
  color: var(--ink); font-size: 0.85rem; line-height: 1.55;
}

/* ---------- calls to action ---------- */

.cta, .cta-secondary {
  display: inline-block;
  font-family: var(--display);
  font-size: .86rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 0.7rem 1.6rem;
  border-radius: 0.5rem;
  margin: 0.4rem 0.5rem 0.4rem 0;
}
.cta {
  background: linear-gradient(180deg, #98283a, var(--red-d));
  color: #f7eccf;
  border: 1px solid rgba(255, 222, 160, .4);
  box-shadow: 0 0.75rem 1.875rem -0.75rem rgba(0, 0, 0, .8);
  transition: background .2s;
}
.cta:hover { background: linear-gradient(180deg, #a12b3e, #7a1e2b); color: #f7eccf; text-decoration: none; }
.cta-secondary {
  background: var(--marble);
  color: var(--ink);
  border: 1px solid var(--line2);
  box-shadow: none;
}
.cta-secondary:hover { background: var(--marble2); color: var(--ink); text-decoration: none; }

/* ---------- prev / next ---------- */

.wiki-pager {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.wiki-pager a {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  max-width: 48%;
  padding: 0.7rem 1rem;
  border: 1px solid var(--line);
  border-radius: 0.625rem;
  background: var(--marble);
  color: var(--ink);
  transition: border-color .15s, background .15s;
}
.wiki-pager a:hover { border-color: var(--gold-l); background: var(--marble2); text-decoration: none; }
.wiki-pager a.next { text-align: right; margin-left: auto; }
.wiki-pager span { font-size: 0.78rem; color: var(--sepia2); letter-spacing: .04em; }
.wiki-pager b { font-family: var(--display); font-size: 0.98rem; }

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

footer {
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--marble) 60%, transparent);
  padding: 1.75rem 0 2.5rem;
  font-size: 0.92rem;
  color: var(--sepia);
  text-align: center;
}
footer a { color: var(--sepia); }
footer a:hover { color: var(--ink); }

/* ---------- narrow screens ---------- */

@media (max-width: 900px) {
  /* The sidebar stops being a sidebar and becomes a contents block above the article — a
     sticky rail on a phone would eat most of the screen. */
  .wiki-layout { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .wiki-sidebar {
    position: static;
    /* Capped, not unbounded: thirty links stacked full height would push the article a whole
       screen down, so the contents scroll inside their own box and the prose stays reachable. */
    max-height: 45vh;
    overflow-y: auto;
    padding: 1rem 1.25rem;
    background: var(--marble2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
  }
  .wiki-nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0.75rem 1.5rem; }
  .wiki-nav .sec { margin-bottom: 0; }
}

@media (max-width: 600px) {
  .wrap { padding: 0 1rem; }
  .wiki-main h1 { font-size: 1.8rem; }
  .wiki-main h2 { font-size: 1.3rem; }
  .feature-grid { grid-template-columns: 1fr; }
  .wiki-pager { flex-direction: column; }
  .wiki-pager a { max-width: none; }
  .wiki-pager a.next { text-align: left; margin-left: 0; }
  pre { font-size: 0.9em; padding: 0.8rem; }
}

/* Every page ends with the date and commits the wiki was last checked against, stamped from
   wiki/provenance.json by the generator. Quiet by design: it is a caveat, not a warning, and a
   reader who never notices it has lost nothing. */
.wiki-stale {
  margin: 2rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--sepia);
}
.wiki-stale code {
  font-size: 0.9em;
  background: rgba(233, 220, 192, 0.07);
  padding: 0.05em 0.3em;
  border-radius: 3px;
}