/* Draft A, "Manual", chosen by the owner on 2026-10-22 (docs/design-drafts.md).
   Type and layout from Sony's Run-Time Library Overview: Helvetica Neue,
   bold headings that hang left of the text, a rule over each H2, a running
   header. Body size from Apple Developer (17 px). The owner asked for the
   sidebar flush left, the content full width and a small indent.
   Spacing scale 4 8 12 16 24 32 48 64. */
:root {
  /* A soft grey ground in place of white: the owner found white too bright
     (2026-10-22). Text near black; one link blue. */
  --bg: #eceeef;
  --fg: #1d1e20;
  --muted: #55575b;
  --rule: #1d1e20;
  --hair: #cfd2d5;
  --link: #2b55b0;
  --code: #e2e4e6;
  --side: #e4e6e8;
  --del: #ffcc33;
  --add: #afb6e9;
  --plus: #096450;
  --minus: #b32424;
  --warn: #bf3c2c;
  --indent: 0px;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "Courier Prime", "Courier New", Courier, monospace;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 300 17px/1.5 var(--sans); }
a { color: var(--link); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--link) 35%, transparent); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--link); }
b, strong, th { font-weight: 700; }

/* Top bar: the name, search beside it and the user's links on the first
   row; the site's sections on the second (after Wikipedia Vector 2022). */
.topbar { border-bottom: 1px solid var(--rule); font-weight: 400; font-size: 15px; }
.bar { display: flex; align-items: center; gap: 16px; padding: 12px 16px; }
.brand { font-weight: 700; font-size: 18px; color: var(--fg); text-decoration: none; flex: none; }
.search { flex: 0 1 360px; margin: 0; }
.search input { width: 100%; font: inherit; padding: 6px 10px; border: 1px solid var(--hair); border-radius: 4px; background: var(--bg); color: var(--fg); }
.personal { margin-left: auto; text-align: right; }
.personal ul, .personal form { display: inline; margin: 0; padding: 0; }
.personal li { display: inline; margin-left: 16px; }
.personal a, .personal button { color: var(--link); }
.personal .me { font-weight: 700; }
.personal .me span { font-weight: 400; color: var(--muted); }
.personal a.admin { font-weight: 700; }
.personal button { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--link) 35%, transparent); text-underline-offset: 3px; }
.sections { display: flex; gap: 24px; padding: 8px 16px; border-top: 1px solid var(--hair); overflow-x: auto; }
.sections a { color: var(--fg); text-decoration: none; white-space: nowrap; }
.sections a:hover { color: var(--link); }
@media (max-width: 899px) {
  .bar { flex-wrap: wrap; gap: 8px 12px; padding: 10px 16px; font-size: 14px; }
  .search { order: 3; flex: 1 1 100%; }
  .personal li { margin-left: 12px; }
  .personal li:first-child { margin-left: 0; }
  .sections { gap: 16px; font-size: 14px; }
}

/* Sidebar flush left, content beside it. On a phone the menu folds behind
   a Menu line: a checkbox and its label, no script. */
.layout { display: grid; grid-template-columns: 1fr; }
@media (min-width: 900px) { .layout { grid-template-columns: 200px minmax(0, 1fr); } .layout.wide { grid-template-columns: minmax(0, 1fr); } .layout.wide::before { display: none; } }
.side { font-size: 14px; font-weight: 400; padding: 24px 16px; background: var(--side); }
.menu-toggle { position: absolute; opacity: 0; pointer-events: none; }
.menu-label { display: none; }
@media (min-width: 900px) { .side { position: sticky; top: 0; align-self: start; max-height: 100vh; overflow-y: auto; } .layout { position: relative; isolation: isolate; } .layout::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 200px; background: var(--side); z-index: -1; } }
.pagetoc { list-style: none; margin: 0 0 24px; padding: 0; }
.pagetoc .l3 { padding-left: 12px; }
.pagetoc .l4 { padding-left: 24px; }

.side .navh { font-weight: 700; margin: 0 0 4px; }
.side ul { list-style: none; margin: 0; padding: 0; }
.side a { color: var(--fg); text-decoration: none; display: block; padding: 2px 0; }
.side a:hover { color: var(--link); }
@media (max-width: 899px) {
  .side { padding: 0 16px; border-bottom: 1px solid var(--hair); }
  .menu-label { display: block; padding: 10px 0; font-weight: 700; cursor: pointer; }
  .menu-label::after { content: " +"; font-weight: 400; color: var(--muted); }
  .menu-toggle:checked + .menu-label::after { content: " \2212"; }
  .menu-toggle:focus-visible + .menu-label { outline: 2px solid var(--link); outline-offset: 2px; }
  .side nav { display: none; padding-bottom: 12px; }
  .menu-toggle:checked ~ nav { display: block; }
  .side .navh { display: none; }
  .side a { padding: 4px 0; }
}

main { min-width: 0; padding: 0 32px 64px; }
@media (max-width: 899px) { main { padding: 0 16px 48px; } h1 { font-size: 28px; } .summary { font-size: 17px; } h2 { margin-top: 40px; } }
@media (min-width: 700px) { main { --indent: 24px; } }
main > :not(h1, h2, .runhead) { margin-left: var(--indent); }

/* Running header: the trail and the page's tabs */
.runhead { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; padding-top: 24px; font-size: 13px; font-weight: 400; color: var(--muted); }
.runhead a { color: var(--muted); }
.tabs { list-style: none; margin: 0; padding: 0; display: flex; gap: 16px; }
.tabs a { color: var(--muted); text-decoration: none; }
.tabs a:hover { color: var(--link); }
.tabs li.on a { color: var(--fg); font-weight: 700; }

/* Text */
h1 { font-weight: 700; font-size: 34px; line-height: 1.15; letter-spacing: -0.01em; margin: 8px 0; text-wrap: balance; }
.summary { font-size: 19px; color: var(--muted); margin: 0 0 24px; }
h2 { font-weight: 700; font-size: 24px; line-height: 1.25; border-top: 1px solid var(--rule); padding-top: 12px; margin: 48px 0 12px; text-wrap: balance; clear: both; }
h3 { font-weight: 700; font-size: 18px; margin: 32px 0 8px; }
h4 { font-weight: 700; font-size: 16px; margin: 24px 0 8px; }
p { margin: 0 0 16px; }
ul, ol { padding-left: 24px; margin: 0 0 16px; }
li { margin: 4px 0; }
sup { line-height: 0; }
sup + sup { margin-left: 3px; }

/* Tables: ruled top and bottom, hairlines between rows */
table { border-collapse: collapse; font-size: 15px; font-weight: 400; font-variant-numeric: tabular-nums; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin: 8px 0 24px; }
main > table:not(.infobox):not(.libinfo) { width: calc(100% - var(--indent)); }
caption { caption-side: top; text-align: left; font-weight: 700; font-size: 14px; padding-bottom: 8px; }
th { text-align: left; border-bottom: 1px solid var(--rule); padding: 6px 16px 6px 0; vertical-align: bottom; }
td { padding: 6px 16px 6px 0; border-bottom: 1px solid var(--hair); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
@media (max-width: 699px) { main > table { display: block; overflow-x: auto; } }

.infobox { float: right; clear: right; width: 300px; margin: 0 0 24px 32px; font-size: 14px; }
.infobox caption { font-size: 15px; }
.infobox th { width: 40%; border-bottom: 1px solid var(--hair); vertical-align: top; }
.libinfo { font-size: 14px; }
@media (max-width: 699px) { .infobox { float: none; width: 100%; margin: 0 0 24px; } }

/* Code */
pre { font: 400 15px/1.45 var(--mono); background: var(--code); padding: 12px 16px; overflow-x: auto; margin: 0 0 16px; }
code { font-family: var(--mono); font-size: 0.95em; font-weight: 400; }

/* Footnotes */
.footnotes { font-size: 14px; font-weight: 400; color: var(--muted); }
.footnotes hr { display: none; }
.footnotes ol { padding-left: 24px; }
.footnotes li { margin: 4px 0; }
.footnotes p { margin: 0; }
.footnotes .back { margin-right: 4px; }
.footnotes .back sup { font-style: italic; }

.foot { clear: both; margin-top: 48px; padding-top: 12px; border-top: 1px solid var(--hair); font-size: 14px; font-weight: 400; color: var(--muted); }
.foot a { color: var(--muted); }
.cats { clear: both; margin-top: 48px; padding-top: 12px; border-top: 1px solid var(--hair); font-size: 14px; font-weight: 400; color: var(--muted); }

/* Images: thumb after Wikipedia, docs/design-study.md (files and images) */
figure.thumb { float: right; clear: right; margin: 4px 0 24px 32px; max-width: 260px; }
figure.thumb img { display: block; max-width: 100%; height: auto; border: 1px solid var(--hair); }
figure.thumb figcaption { font-size: 14px; font-weight: 400; color: var(--muted); padding-top: 8px; }
@media (max-width: 699px) { figure.thumb { float: none; margin: 16px 0; } }
.filepreview img { max-width: 100%; height: auto; }
table.files img { max-width: 120px; height: auto; }

/* Category pages: each part with its reference pages, in columns */
.catgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 32px 48px; margin-top: 24px; }
.catgroup { min-width: 0; }
.catgroup h3 { margin: 0 0 4px; font-size: 18px; }
.catgroup h3 a { color: var(--fg); text-decoration: none; }
.catgroup h3 a:hover { color: var(--link); }
.catgroup p { margin: 0 0 8px; font-size: 15px; color: var(--muted); }
.catgroup ul { list-style: none; padding: 0; margin: 0; font-size: 15px; font-weight: 400; }
.catgroup li { margin: 2px 0; }

/* Lists of pages and search */
.results li { margin-bottom: 12px; }
.history li { margin: 4px 0; font-size: 15px; font-weight: 400; }
.history .sum { font-style: italic; color: var(--muted); }

/* Forms */
.editform textarea { width: 100%; font: 400 14px/1.5 var(--mono); border: 1px solid var(--hair); padding: 8px; }
.editform .row { margin: 12px 0; }
.editform label { display: block; font-weight: 700; margin-bottom: 4px; }
.editform input[type=text], .editform input[type=password], .editform input:not([type]), .editform select { width: 100%; max-width: 30em; font: 400 16px var(--sans); padding: 6px 8px; border: 1px solid var(--hair); border-radius: 4px; background: var(--bg); color: var(--fg); }
.editform select { width: auto; }
button, .editform button { font: 400 15px var(--sans); padding: 6px 14px; border: 1px solid var(--rule); border-radius: 4px; background: var(--bg); color: var(--fg); cursor: pointer; }
button[type=submit] { background: var(--fg); color: var(--bg); }
.personal button[type=submit], button.link { background: none; color: var(--link); border: 0; padding: 0; }
.newpage { margin: 8px 0 16px; display: flex; gap: 8px; flex-wrap: wrap; }
.newpage input, .newpage select { font: 400 15px var(--sans); padding: 6px 8px; border: 1px solid var(--hair); border-radius: 4px; }
.problems { border: 1px solid var(--warn); padding: 8px 16px; margin: 0 0 16px; }
.problems li { font-family: var(--mono); font-size: 14px; }
.notice { border: 1px solid var(--hair); background: var(--code); padding: 8px 16px; margin: 0 0 16px; }
.preview { border: 1px solid var(--hair); padding: 0 16px; margin: 12px 0 16px; }
.unpatrolled { font-weight: 700; color: var(--warn); }
form.patrol { text-align: center; margin: 8px 0; }

/* Diff: MediaWiki two-column diff, docs/design-study.md (editing screens) */
.plus { color: var(--plus); }
.minus { color: var(--minus); }
table.diff { width: 100%; table-layout: fixed; border: 0; font-size: 14px; }
table.diff col.m { width: 1.5em; }
table.diff td { border: 0; padding: 4px; vertical-align: top; }
table.diff td.head { text-align: center; }
table.diff td.lineno { font-weight: 700; }
table.diff td.mark { width: 1.2em; text-align: center; }
table.diff td.text { font: 400 13px/1.45 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; border: 1px solid var(--hair); border-radius: 4px; padding: 4px 6px; }
table.diff td.ctx { background: var(--code); }
table.diff td.del { border-color: var(--del); }
table.diff td.add { border-color: var(--add); }
table.diff td.del b { background: var(--del); }
table.diff td.add b { background: var(--add); }
table.diff td.empty { border: 0; }

/* Admin page */
.dash { display: grid; grid-template-columns: 1fr; gap: 0 48px; }
@media (min-width: 1100px) { .dash { grid-template-columns: 1fr 1fr; } }
.dash section { min-width: 0; }
.dash h2 { margin-top: 32px; }
.dash table { width: 100%; }