:root {
  color-scheme: light dark;
  --fg: #1a1a1a;
  --bg: #ffffff;
  --muted: #555555;
  --border: #e0e0e0;
  --good: #1a7f37;
  --ok: #9a6700;
  --low: #cf222e;
  --na: #888888;
  --card: #f6f8fa;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fg: #f2f2f2;
    --bg: #121212;
    --muted: #aaaaaa;
    --border: #2a2a2a;
    --good: #3fb950;
    --ok: #d29922;
    --low: #f85149;
    --na: #999999;
    --card: #1c1c1c;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.5;
}

.wrap {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

.logo {
  height: 40px;
  width: auto;
}

@media (prefers-color-scheme: dark) {
  .logo {
    filter: invert(1);
  }
}

nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
  margin: 1rem 0 2rem;
  font-size: 0.9rem;
}

nav a {
  color: var(--muted);
  text-decoration: none;
}

nav a:hover {
  color: var(--fg);
}

.hero {
  text-align: center;
  padding: 2rem 0 3rem;
}

h1 {
  font-size: 1.75rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
}

h2 {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 2rem 0 0.5rem;
}

h3 {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 1.5rem 0 0.5rem;
}

.tagline {
  color: var(--muted);
  margin: 0 0 1.5rem;
}

a {
  color: inherit;
}

ul.plain {
  list-style: none;
  padding: 0;
  margin: 0;
}

ul.plain li {
  margin: 0.5rem 0;
}

.center {
  text-align: center;
}

footer {
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
  padding: 2rem 1.5rem;
}

.notice {
  border-left: 3px solid var(--border);
  padding: 0.5rem 1rem;
  color: var(--muted);
  font-size: 0.9rem;
  margin: 1.5rem 0;
}

.app-icon {
  height: 40px;
  width: auto;
  vertical-align: middle;
  margin-right: 0.75rem;
}

.app-hero {
  width: 160px;
  max-width: 60%;
  height: auto;
  margin-bottom: 0.5rem;
}

.landing-pair {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  margin: 0 auto 1.5rem;
}

/* Sized by height, not width: the character SVGs have different aspect ratios
   (cordelia.svg is 940x1882, kent.svg 1170x2048), so equal widths render Kent
   noticeably shorter than Cordelia. Matching on height makes the two figures
   stand the same height, and stays correct if another app icon is added. */
.landing-pair img {
  height: 260px;
  width: auto;
}

@media (max-width: 30rem) {
  .landing-pair img {
    height: 180px;
  }
}

.lang-links a {
  display: inline-block;
  font-size: 1.35rem;
  font-weight: 500;
}

.toc-columns {
  column-width: 14rem;
  column-gap: 1.5rem;
}

.table-wrap {
  overflow-x: auto;
  margin: 1rem 0 2rem;
}

.screenshot {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: 6px;
  margin: 1rem 0;
}

pre {
  overflow-x: auto;
  margin: 1rem 0;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

th,
td {
  text-align: left;
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

th {
  font-weight: 600;
}

.table-wrap td code,
.table-wrap th code {
  overflow-wrap: anywhere;
}

.dict-page .table-wrap table {
  table-layout: fixed;
}

.dict-page .table-wrap th:nth-child(1),
.dict-page .table-wrap td:nth-child(1) {
  width: 30%;
}

.dict-page .table-wrap th:nth-child(2),
.dict-page .table-wrap td:nth-child(2) {
  width: 12%;
}

.dict-page .table-wrap th:nth-child(3),
.dict-page .table-wrap td:nth-child(3) {
  width: 58%;
}

.field-remark {
  display: block;
  margin-top: 0.25rem;
  color: var(--muted);
  font-size: 0.85em;
  font-style: italic;
}

/* CSS-only OS tab switcher — see docs/developer/06-content-style.md.
   Radios/panels must be flat siblings inside <main> for the `~` selectors below to work. */

.os-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.os-tabs {
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.2rem;
  border: 1px solid var(--border);
  border-radius: 7px;
  margin: 0 0 1.75rem;
}

.os-tabs label {
  padding: 0.35rem 0.9rem;
  font-size: 0.85rem;
  border-radius: 5px;
  cursor: pointer;
  color: var(--muted);
  user-select: none;
}

.os-tabs label:hover {
  color: var(--fg);
}

#os-linux:checked ~ .os-tabs label[for="os-linux"],
#os-windows:checked ~ .os-tabs label[for="os-windows"],
#os-macos:checked ~ .os-tabs label[for="os-macos"] {
  background: var(--fg);
  color: var(--bg);
}

#os-linux:focus-visible ~ .os-tabs label[for="os-linux"],
#os-windows:focus-visible ~ .os-tabs label[for="os-windows"],
#os-macos:focus-visible ~ .os-tabs label[for="os-macos"] {
  outline: 2px solid var(--fg);
  outline-offset: 2px;
}

.os-panel {
  display: none;
}

#os-linux:checked ~ .os-panel-linux,
#os-windows:checked ~ .os-panel-windows,
#os-macos:checked ~ .os-panel-macos {
  display: block;
}

/* Repo home pages (development-notes/repos/<repo>.html) -- feste's tools/repo-pages
   renders these repo-agnostic (no styling of its own beyond a throwaway preview <style>
   sync-repo-pages.py strips), so the component classes it emits are styled here instead. */

header img.icon {
  height: 56px;
  width: auto;
  vertical-align: middle;
  margin-right: 1rem;
}

.namesake-portrait {
  display: block;
  width: 100%;
  max-width: 220px;
  height: auto;
  margin: 1.25rem auto;
}

.namesake,
p.meta {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 0.15rem 0 0;
}

.stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.stat {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.6rem 1rem;
  min-width: 8rem;
}

.stat .n {
  font-size: 1.3rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.stat .l {
  color: var(--muted);
  font-size: 0.8rem;
}

.diagrams {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.diagram {
  text-align: center;
}

.diagram img {
  max-width: 220px;
  max-height: 220px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
}

.diagram .cap {
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: 0.3rem;
}

ul.deps {
  padding-left: 1.2rem;
}

.pct {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.pct.good {
  color: var(--good);
}

.pct.ok {
  color: var(--ok);
}

.pct.low {
  color: var(--low);
}

.pct.na {
  color: var(--na);
  font-weight: 400;
}

.help-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 2rem;
  row-gap: 0.5rem;
}

.help-grid > section > h2,
.help-grid > section > h3 {
  margin-top: 1.5rem;
}

@media (max-width: 30rem) {
  .help-grid {
    grid-template-columns: 1fr;
  }
}

.db-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin: 1.5rem 0 2rem;
}

.db-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.25rem 1rem;
  text-align: center;
}

.db-card img {
  height: 64px;
  width: auto;
  margin-bottom: 0.5rem;
}

.db-card h3 {
  margin: 0 0 0.6rem;
  font-size: 1rem;
}

.db-card ul {
  text-align: left;
  margin: 0 0 0.75rem;
  padding-left: 1.1rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.db-card ul li {
  margin: 0.2rem 0;
}

.db-card .db-size {
  font-size: 0.8rem;
  color: var(--muted);
  margin: 0 0 0.5rem;
}

.db-card .db-links {
  font-size: 0.8rem;
}

.db-card .db-links a {
  margin: 0 0.35rem;
}

@media (max-width: 30rem) {
  .db-grid {
    grid-template-columns: 1fr;
  }
}

/* Promo banner -- a bold, self-contained callout pointing at something outside the current
   page (e.g. the antonio example-scripts repo). See docs/developer/*.md if a written rationale
   ever exists; for now see Fossil ticket b03419e44a. */

.promo-banner {
  text-align: center;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 2rem 1.5rem;
  margin-bottom: 2rem;
}

.promo-eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin: 0 0 0.5rem;
}

.promo-banner-h {
  font-size: 1.9rem;
  margin: 0 0 0.5rem;
  text-wrap: balance;
}

.promo-banner-p {
  color: var(--muted);
  max-width: 30rem;
  margin: 0 auto 1.1rem;
}

.promo-cta {
  display: inline-block;
  background: var(--fg);
  color: var(--bg);
  font-weight: 600;
  padding: 0.55rem 1.1rem;
  border-radius: 7px;
  text-decoration: none;
}

.promo-cta:hover {
  opacity: 0.85;
}

.badge {
  display: inline-block;
  font-size: 0.75rem;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.05rem 0.5rem;
  margin-left: 0.5rem;
  vertical-align: middle;
}