/* wiki.cermm.it: cermm.it's colours and type (Geist, Geist Mono), and the app's frame:
   a black title bar and sidebar, the page beside them. The frame stays black in the light theme. */

:root {
  --bg: #000;
  --text: #ede9e0;
  --dim: rgba(237, 233, 224, .64);
  --dimmer: rgba(237, 233, 224, .4);
  --hair: rgba(237, 233, 224, .12);
  --panel: rgba(237, 233, 224, .045);
  --code-bg: rgba(237, 233, 224, .06);
  --ok: #3ddc84;
  --you: #7a9eff;   /* Link blue: where you are */
  --wip: #fbbf24;
  --bad: #f87171;
  --link: #ede9e0;
  --ui: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --top-h: 52px;
  --side-w: 264px;
  color-scheme: dark;
}

/* The light sheet: only the page goes light; the frame keeps the dark tokens (re-declared below). */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f3f2ee;
    --text: #38342c;
    --dim: rgba(56, 52, 44, .72);
    --dimmer: rgba(56, 52, 44, .5);
    --hair: rgba(64, 54, 38, .14);
    --panel: #fcfbf8;
    --code-bg: #fbfaf7;
    --ok: #1f9d57;
    --you: #1f4fd8;
    --wip: #b06f00;
    --bad: #c8322b;
    --link: #38342c;
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --bg: #f3f2ee;
  --text: #38342c;
  --dim: rgba(56, 52, 44, .72);
  --dimmer: rgba(56, 52, 44, .5);
  --hair: rgba(64, 54, 38, .14);
  --panel: #fcfbf8;
  --code-bg: #fbfaf7;
  --ok: #1f9d57;
  --you: #1f4fd8;
  --wip: #b06f00;
  --bad: #c8322b;
  --link: #38342c;
  color-scheme: light;
}
.top, .side {
  --bg: #000;
  --text: #ede9e0;
  --dim: rgba(237, 233, 224, .64);
  --dimmer: rgba(237, 233, 224, .4);
  --hair: rgba(237, 233, 224, .12);
  --panel: rgba(237, 233, 224, .06);
  --ok: #3ddc84;
  --you: #7a9eff;   /* Link blue: where you are */
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { background: #000; scroll-padding-top: calc(var(--top-h) + 16px); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 16px/1.65 var(--ui); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; border-radius: 4px; }
code, kbd, pre { font-family: var(--mono); }

/* ── the title bar */
.top {
  position: sticky; top: 0; z-index: 30; height: var(--top-h);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 0 12px 0 10px; background: var(--bg); color: var(--text); border-bottom: 1px solid var(--hair);
}
.top-l { display: flex; align-items: center; gap: 6px; min-width: 0; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 600 14px/1 var(--mono); letter-spacing: -.02em; white-space: nowrap; min-width: 0; }
.brand .path { color: var(--dimmer); }
/* the mark (as cermm.it and the app): bold <> cut out of the disc; on paper the disc goes dark */
.mark { flex: none; width: 26px; height: 26px; color: var(--text); display: block; }
.mark svg { display: block; }
.icon-btn { flex: none; width: 36px; height: 36px; display: grid; place-items: center; background: none; border: 0; border-radius: 8px; color: var(--dim); cursor: pointer; }
.icon-btn:hover { color: var(--text); background: var(--panel); }
.menu-btn { display: none; }
.top-r { display: flex; align-items: center; gap: 2px; }
.top-r a.icon-btn { text-decoration: none; }

/* search, in the middle of the title bar */
.find { position: relative; justify-self: center; width: min(460px, 100%); }
.find input {
  width: 100%; height: 34px; padding: 0 34px 0 34px; border-radius: 8px; border: 1px solid var(--hair);
  background: var(--panel); color: var(--text); font: 400 14px var(--ui); outline: none;
}
.find input::placeholder { color: var(--dimmer); }
.find input:focus { border-color: rgba(237, 233, 224, .32); }
.find .glass-icon { position: absolute; left: 10px; top: 9px; color: var(--dimmer); pointer-events: none; }
.find kbd { position: absolute; right: 8px; top: 7px; font-size: 11px; line-height: 18px; padding: 0 6px; border: 1px solid var(--hair); border-radius: 5px; color: var(--dimmer); }
.find input:focus ~ kbd { display: none; }
.hits {
  position: absolute; top: 40px; left: 0; right: 0; max-height: min(70vh, 520px); overflow-y: auto;
  background: #0c0c0b; border: 1px solid var(--hair); border-radius: 10px; padding: 6px; box-shadow: 0 18px 50px rgba(0, 0, 0, .5);
}
.hits[hidden] { display: none; }
.hits a { display: block; padding: 8px 10px; border-radius: 7px; text-decoration: none; }
.hits a .t { display: block; font-size: 14px; color: var(--text); }
.hits a .p { display: block; font-size: 12.5px; color: var(--dimmer); }
.hits a[aria-selected="true"], .hits a:hover { background: var(--panel); }
.hits .none { padding: 10px; font-size: 14px; color: var(--dimmer); }
.hits mark { background: none; color: var(--text); text-decoration: underline; text-decoration-color: var(--you); text-underline-offset: 3px; }

/* ── the layout: sidebar, page, on this page */
.layout { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr) 220px; min-height: calc(100vh - var(--top-h)); }
.side {
  position: sticky; top: var(--top-h); height: calc(100vh - var(--top-h)); overflow-y: auto; overscroll-behavior: contain;
  background: var(--bg); color: var(--text); padding: 18px 12px 40px; border-right: 1px solid var(--hair);
}
.side h2 { margin: 18px 10px 6px; font: 650 13px/1.3 var(--ui); color: var(--text); }
.side h2:first-child { margin-top: 2px; }
.side ul { list-style: none; margin: 0; padding: 0 0 0 10px; border-left: 1px solid var(--hair); margin-left: 12px; }
.side a { display: block; padding: 4px 10px; font-size: 14px; color: var(--dim); text-decoration: none; border-radius: 6px; }
.side a:hover { color: var(--text); }
.side a[aria-current="page"] { color: var(--text); text-decoration: underline; text-decoration-color: var(--you); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.side .home { margin: 0 0 4px; padding: 6px 10px; font-weight: 500; }
.side .noscript { padding: 10px; font-size: 14px; color: var(--dim); }

main { min-width: 0; padding: 40px clamp(16px, 4vw, 56px) 64px; }
article { max-width: 760px; }
.toc { position: sticky; top: var(--top-h); align-self: start; max-height: calc(100vh - var(--top-h)); overflow-y: auto; padding: 44px 20px 40px 0; font-size: 13px; }
.toc h2 { margin: 0 0 8px; font: 650 13px/1.3 var(--ui); }
.toc ul { list-style: none; margin: 0; padding: 0; }
.toc a { display: block; padding: 3px 0; color: var(--dimmer); text-decoration: none; line-height: 1.4; }
.toc a.sub { padding-left: 12px; }
.toc a:hover, .toc a.here { color: var(--text); }

/* ── the page */
.crumb { margin: 0 0 10px; font-size: 13px; color: var(--dimmer); }
article h1 { margin: 0 0 12px; font: 650 clamp(28px, 4vw, 36px)/1.15 var(--ui); letter-spacing: -.02em; }
article .lede { margin: 0 0 28px; font-size: 18px; color: var(--dim); }
article h2 { margin: 44px 0 10px; font: 650 21px/1.3 var(--ui); letter-spacing: -.01em; }
article h3 { margin: 28px 0 8px; font: 650 16.5px/1.35 var(--ui); }
article h2, article h3 { position: relative; }
article .anchor { margin-left: 8px; color: var(--dimmer); text-decoration: none; opacity: 0; font-weight: 400; }
article :is(h2, h3):hover .anchor, article .anchor:focus { opacity: 1; }
article p, article ul, article ol, article table, article pre, article .note { margin: 0 0 16px; }
article ul, article ol { padding-left: 22px; }
article li { margin: 4px 0; }
article li > ul, article li > ol { margin: 4px 0 0; }
article a { color: var(--link); text-decoration: underline; text-decoration-color: var(--dimmer); text-underline-offset: 3px; }
article a:hover { text-decoration-color: var(--text); }
article b, article strong { font-weight: 600; }
article :not(pre) > code { font-size: .88em; padding: .1em .35em; border-radius: 5px; background: var(--code-bg); border: 1px solid var(--hair); overflow-wrap: anywhere; }
article kbd { display: inline-block; min-width: 1.6em; padding: 0 .45em; font-size: .85em; line-height: 1.6; text-align: center; border: 1px solid var(--hair); border-bottom-width: 2px; border-radius: 5px; background: var(--code-bg); }
.code { position: relative; }
article pre { overflow-x: auto; padding: 14px 16px; border-radius: 10px; background: var(--code-bg); border: 1px solid var(--hair); font-size: 13.5px; line-height: 1.6; }
.code pre { padding-right: 64px; }
.copy { position: absolute; top: 8px; right: 8px; height: 26px; padding: 0 9px; border-radius: 6px; border: 1px solid var(--hair); background: var(--bg); color: var(--dim); font: 500 12px var(--ui); cursor: pointer; }
.copy:hover { color: var(--text); }
.table { overflow-x: auto; margin: 0 0 16px; }
article table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.table table { margin: 0; }
article th, article td { text-align: left; vertical-align: top; padding: 9px 12px 9px 0; border-bottom: 1px solid var(--hair); }
article th { font-weight: 600; }
article td code { white-space: nowrap; }
.note { padding: 12px 16px; border-radius: 10px; background: var(--panel); border: 1px solid var(--hair); }
.note > :last-child { margin-bottom: 0; }
.note b:first-child { font-weight: 600; }
.note.wip { border-left: 3px solid var(--wip); }
.note.warn { border-left: 3px solid var(--bad); }
.tag { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--dim); }
.tag i { width: 7px; height: 7px; border-radius: 50%; background: var(--wip); }
figure { margin: 0 0 20px; }
figure img { display: block; width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--hair); }
figcaption { margin-top: 8px; font-size: 13px; color: var(--dimmer); }

/* the home page's contents */
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; border-top: 1px solid var(--hair); margin: 0 0 24px; }
.cards > div { padding: 16px 0 18px; border-bottom: 1px solid var(--hair); }
.cards h3 { margin: 0 0 6px; }
.cards p { margin: 0 0 8px; font-size: 14.5px; color: var(--dim); }
.cards ul { list-style: none; padding: 0; margin: 0; font-size: 14.5px; }
.cards li { margin: 2px 0; }
.cards a { text-decoration: none; }
.cards a:hover { text-decoration: underline; text-decoration-color: var(--dimmer); }
.status { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; color: var(--dim); }

/* prev / next */
.pager { max-width: 760px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--hair); }
.pager a { display: block; padding: 12px 14px; border: 1px solid var(--hair); border-radius: 10px; text-decoration: none; }
.pager a:hover { border-color: var(--dimmer); }
.pager .k { display: block; font-size: 12.5px; color: var(--dimmer); }
.pager .t { display: block; font-weight: 500; }
.pager .next { grid-column: 2; text-align: right; }
.foot { max-width: 760px; margin-top: 28px; font-size: 13px; color: var(--dimmer); }
.foot a { color: var(--dim); }

.veil { display: none; }

/* ── narrower screens */
@media (max-width: 1240px) {
  .layout { grid-template-columns: var(--side-w) minmax(0, 1fr); }
  .toc { display: none; }
}
@media (max-width: 900px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .menu-btn { display: grid; }
  .side {
    position: fixed; z-index: 40; top: var(--top-h); left: 0; bottom: 0; height: auto; width: min(300px, 86vw);
    transform: translateX(-100%); visibility: hidden; transition: transform .2s ease, visibility 0s .2s;
  }
  html.nav-open .side { transform: none; visibility: visible; transition: transform .2s ease; }
  html.nav-open .veil { display: block; position: fixed; inset: var(--top-h) 0 0 0; z-index: 35; background: rgba(0, 0, 0, .5); }
  main { padding-top: 28px; }
}
@media (max-width: 640px) {
  .top { grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px; padding: 0 6px; }
  .brand .path, .brand .word { display: none; }
  .find kbd { display: none; }
  .find input { padding-right: 10px; }
  .cards { grid-template-columns: 1fr; }
  .pager { grid-template-columns: 1fr; }
  .pager .next { grid-column: 1; }
  /* tables become a stack of rows: the first cell as the row's name, the rest under it */
  article table, article tbody, article tr, article td { display: block; width: 100%; }
  article thead { display: none; }
  article tr { padding: 10px 0; border-bottom: 1px solid var(--hair); }
  article td { padding: 2px 0; border: 0; }
  article td:first-child { font-weight: 600; }
  article td code { white-space: normal; }
  article h2 { margin-top: 36px; }
}
@media (prefers-reduced-motion: reduce) { .side { transition: none !important; } }

/* print: the page alone, on white */
@media print {
  .top, .side, .toc, .pager, .copy, .veil { display: none !important; }
  html, body { background: #fff; color: #000; }
  .layout { display: block; }
  main { padding: 0; }
  article :is(pre, code, .note) { background: none; border-color: #ccc; }
}