/* Citizen-inspired skin: quiet chrome, content first */
:root {
  --bg: #fff; --surface: #f6f7f9; --surface-2: #eceef2; --text: #1b1d21; --muted: #5f6570;
  --border: #dcdfe5; --link: #3366cc; --new: #d33; --radius: 8px;
  --header-h: 3.5rem; --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) {
    --bg: #131417; --surface: #1c1e22; --surface-2: #262930; --text: #e6e8ec; --muted: #9aa0aa;
    --border: #33363d; --link: #8ab4f8; --new: #ff8a80;
  }
}
:root[data-theme=dark] {
  --bg: #131417; --surface: #1c1e22; --surface-2: #262930; --text: #e6e8ec; --muted: #9aa0aa;
  --border: #33363d; --link: #8ab4f8; --new: #ff8a80;
  color-scheme: dark;
}
:root[data-theme=light] { color-scheme: light; }

* { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--header-h) + 1rem); }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.65 var(--sans); }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
a.new { color: var(--new); }
a.external::after { content: "↗"; font-size: .75em; margin-left: .15em; }
a.selflink { color: var(--text); font-weight: 600; pointer-events: none; }
.wrap { max-width: 76rem; margin: 0 auto; padding: 0 16px; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 10; height: var(--header-h);
  background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border); }
.site-header .wrap { display: flex; align-items: center; gap: 1.5rem; height: 100%; }
.logo { font-weight: 700; font-size: 1.1rem; color: var(--text); white-space: nowrap; }
.site-header nav { display: flex; gap: 1.25rem; overflow-x: auto; font-size: .92rem; }
.site-header nav a { color: var(--muted); white-space: nowrap; }
.site-header nav a:hover { color: var(--text); text-decoration: none; }

/* Search + theme toggle */
.tools { margin-left: auto; display: flex; gap: .5rem; align-items: center; }
.search { position: relative; }
.search input { width: 12rem; max-width: 40vw; padding: .35rem .7rem; font: inherit; font-size: .9rem;
  color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.search ul { position: absolute; right: 0; top: 110%; width: 18rem; max-width: 90vw; margin: 0; padding: .25rem;
  list-style: none; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); }
.search ul:empty { display: none; }
.search li a { display: block; padding: .35rem .6rem; border-radius: 4px; color: var(--text); }
.search li a:hover { background: var(--surface-2); text-decoration: none; }
#theme { font-size: 1.1rem; line-height: 1; padding: .35rem .5rem; cursor: pointer; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }

/* Page heading */
.page-heading { padding: 2.5rem 0 1.5rem; border-bottom: 1px solid var(--border); margin-bottom: 2rem; }
.page-heading h1 { font-size: clamp(2rem, 5vw, 2.75rem); font-weight: 600; line-height: 1.15;
  letter-spacing: -.02em; margin: 0; }
.page-heading .ns { color: var(--muted); font-weight: 400; }
.siteSub { color: var(--muted); font-size: .9rem; margin-top: .4rem; }

/* Body + sticky TOC */
.page-body.has-toc { display: grid; grid-template-columns: minmax(0, 1fr) 15rem; gap: 3rem; align-items: start; }
.page-body.has-toc .content { grid-column: 1; grid-row: 1; }
.toc { grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--header-h) + 1.5rem);
  max-height: calc(100vh - var(--header-h) - 3rem); overflow-y: auto; font-size: .88rem; }
.toc-title { font-weight: 600; text-transform: uppercase; letter-spacing: .05em; font-size: .75rem;
  color: var(--muted); margin-bottom: .5rem; }
.toc ul { list-style: none; margin: 0; padding: 0; }
.toc ul ul { padding-left: .9rem; }
.toc a { display: block; padding: .2rem .6rem; border-left: 2px solid var(--border); color: var(--muted); }
.toc a:hover { color: var(--text); border-left-color: var(--link); text-decoration: none; }
.toc a.active { color: var(--link); border-left-color: var(--link); font-weight: 500; }
.content { min-width: 0; display: flow-root; }

/* Headings */
.content h2 { font-size: 1.5rem; font-weight: 600; margin: 2.25rem 0 .75rem; padding-bottom: .3rem;
  border-bottom: 1px solid var(--border); }
.content h3 { font-size: 1.15rem; font-weight: 600; margin: 1.5rem 0 .5rem; }
.content > :first-child { margin-top: 0; }

/* Tables: plain markdown tables */
.content table:not(.infobox):not(.navbox) { border-collapse: separate; border-spacing: 0; margin: 1.25rem 0;
  border: 1px solid var(--border); border-radius: var(--radius); font-size: .92rem;
  display: block; max-width: 100%; overflow-x: auto; width: fit-content; }
.content table:not(.infobox):not(.navbox) th,
.content table:not(.infobox):not(.navbox) td { padding: .5rem .9rem; border-bottom: 1px solid var(--border); text-align: left; }
.content table:not(.infobox):not(.navbox) th { background: var(--surface); font-weight: 600; }
.content table:not(.infobox):not(.navbox) tr:last-child td { border-bottom: 0; }

/* Infobox */
.infobox { float: right; clear: right; width: 20rem; margin: 0 0 1.5rem 2rem; font-size: .88rem;
  line-height: 1.5; background: var(--surface); border-radius: var(--radius); border-spacing: 0;
  overflow: hidden; }
.infobox th, .infobox td { vertical-align: top; text-align: left; padding: .4rem .9rem; }
.infobox th[scope="row"] { color: var(--muted); font-weight: 500; width: 40%; }
.infobox p { margin: 0; }
.infobox-title { font-size: 1.15rem; font-weight: 600; text-align: center !important; padding: .9rem !important; }
.infobox-header { text-align: center !important; background: var(--surface-2); font-weight: 600;
  font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; }
.infobox-image { text-align: center !important; background: var(--surface-2); padding: 1rem !important; }
.infobox-image img { max-width: 100%; width: 128px; image-rendering: pixelated; }
.infobox-caption { font-size: .85em; color: var(--muted); margin-top: .5rem; }

/* Navbox */
.navbox { clear: both; width: 100%; margin-top: 3rem; font-size: .88rem; border-spacing: 0;
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.navbox-title { background: var(--surface); padding: .6rem; font-weight: 600; }
.navbox-group { white-space: nowrap; text-align: left; padding: .5rem 1rem; width: 1%;
  color: var(--muted); font-weight: 500; border-top: 1px solid var(--border); }
.navbox-list { padding: .5rem 1rem; border-top: 1px solid var(--border); }
.navbox-list ul { display: inline; margin: 0; padding: 0; }
.navbox-list li { display: inline; }
.navbox-list li + li::before { content: " · "; color: var(--muted); }

/* Categories as chips */
.catlinks { clear: both; margin-top: 2rem; font-size: .85rem; display: flex; flex-wrap: wrap;
  gap: .4rem; align-items: center; }
.catlinks > a { color: var(--muted); margin-right: .3rem; }
.catlinks ul { display: contents; }
.catlinks li { list-style: none; }
.catlinks li a { display: inline-block; background: var(--surface); padding: .2rem .7rem; border-radius: 999px; }

/* Image thumbnails */
.thumb { max-width: 100%; margin: .3rem 0 1.25rem; font-size: .85rem; color: var(--muted); }
.thumb-right { float: right; clear: right; margin-left: 2rem; }
.thumb-left { float: left; clear: left; margin-right: 2rem; }
.thumb-center { margin-left: auto; margin-right: auto; }
.thumb img { display: block; width: 100%; height: auto; border-radius: var(--radius); }
.thumb figcaption { margin-top: .4rem; line-height: 1.45; }
.thumb figcaption p { margin: 0; }
.missing-file { color: var(--new); }

.columns { columns: 3 14em; }
footer { color: var(--muted); font-size: .8rem; padding-top: 3rem; padding-bottom: 2rem; }

@media (max-width: 960px) {
  .page-body.has-toc { display: block; }
  .toc { position: static; max-height: none; background: var(--surface); border-radius: var(--radius);
    padding: 1rem; margin-bottom: 1.5rem; }
}
@media (max-width: 640px) {
  .infobox, .thumb { float: none; width: 100% !important; margin: 0 0 1.5rem; }
  .site-header .wrap { gap: 1rem; }
}

/* Main-page tiles */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 1.5rem 0; }
.tiles a { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; color: var(--text); text-align: center;
  transition: transform .15s, border-color .15s, box-shadow .15s; }
.tiles a:hover { text-decoration: none; transform: translateY(-2px); border-color: var(--link);
  box-shadow: 0 4px 12px rgb(0 0 0 / .12); }
.tile-icon { font-size: 2.5rem; line-height: 1; padding: 1.5rem 0; }
.tile-name { background: var(--surface-2); border-top: 1px solid var(--border); padding: .6rem .5rem;
  font-weight: 600; font-size: .95rem; }
@media (max-width: 40rem) { .tiles { grid-template-columns: repeat(2, 1fr); } }