/* ihsg.midoriresearch.com/docs: the reading room of Halaman Bursa.
   Pages generated by web/scripts/docs.mjs from README.md and docs/*.md load
   this stylesheet alone (no styles.css, no script), so the tokens and the
   shell (navy masthead, navy section bands, white sheets on the newsprint
   ground, the signed footer) are copied here from public/styles.css; keep the
   two in step. Long-form text reads at 18px on a measure of about 66
   characters; every ## section opens with a navy band, as the home
   page's modules do; code sits on the band colour; tables are the home page's
   tables, a 2px ink rule under the head and hairlines between rows. Day by
   default, night when the device asks for it. */

:root {
  color-scheme: light dark;
  --paper: #f3f4f1;     /* the page: cool newsprint grey */
  --sheet: #ffffff;     /* the article and the page list print on a whiter sheet */
  --band: #e8ebe6;      /* code blocks, hovered rows */
  --rule: #cfd4cd;      /* hairlines */
  --edge: #7b847c;      /* a control's outline */
  --ink: #15191e;
  --ink-2: #454e58;
  --ink-3: #5a636e;
  --navy: #123a64;      /* masthead and section bands */
  --navy-2: #0b2a4b;    /* pressed on navy */
  --navy-soft: #e1e8f1; /* the current page, a note */
  --on-navy: #ffffff;
  --on-navy-2: #c9d6e6;
  --link: #0d4c8c;
  --mark: #123a64;      /* the bar beside the current page and a note */
  --hl: #ffe680;
  --focus: #1b5fd1;
  --text: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --head: "Libre Franklin", "Atkinson Hyperlegible Next", system-ui, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  --maxw: 1320px;
  --gutter: 24px;
  --radius: 4px;
  --rail: 300px;
  --measure: 31em;      /* about 66 characters of Atkinson Hyperlegible Next */
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0f151c;
    --sheet: #151d26;
    --band: #1c2631;
    --rule: #2b3643;
    --edge: #6c7a8a;
    --ink: #e9edf2;
    --ink-2: #b4bec9;
    --ink-3: #98a4b1;
    --navy: #173d66;
    --navy-2: #0f2d4f;
    --navy-soft: #1d3554;
    --on-navy: #ffffff;
    --on-navy-2: #c9d6e6;
    --link: #8ec2ff;
    --mark: #8ec2ff;
    --hl: #5c4c0e;
    --focus: #ffc94d;
  }
}

* { box-sizing: border-box; }
html { font-size: 112.5%; background: var(--paper); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: 1rem;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--hl); color: var(--ink); }
a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3 { font-family: var(--head); font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; text-wrap: balance; }
code, kbd, pre, samp { font-family: var(--mono); }
b, strong { font-weight: 700; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--gutter); top: -200px; z-index: 50; background: var(--ink); color: var(--paper); padding: 10px 16px; font-weight: 700; text-decoration: none; border-radius: var(--radius); }
.skip:focus { top: 8px; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

/* ---- masthead (as styles.css) ------------------------------------------------ */
.masthead { background: var(--navy); color: var(--on-navy); }
.masthead .wrap { display: flex; align-items: center; gap: 8px 24px; min-height: 68px; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--on-navy); text-decoration: none; padding: 8px 0; }
.brand img { display: block; width: 36px; height: 36px; }
.brand-name { display: grid; line-height: 1.1; }
.brand-name b { font-family: var(--head); font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; }
.brand-name small { font-size: 0.75rem; color: var(--on-navy-2); font-weight: 600; letter-spacing: 0.01em; }
.nav { display: flex; align-items: stretch; align-self: stretch; gap: 4px; }
.nav a {
  display: flex; align-items: center; padding: 0 14px;
  color: var(--on-navy); text-decoration: none; font-weight: 700; font-size: 1rem;
  border-bottom: 4px solid transparent; border-top: 4px solid transparent;
}
.nav a:hover { background: var(--navy-2); }
.nav a[aria-current="page"] { border-bottom-color: var(--on-navy); }
.masthead :focus-visible { outline-color: #ffc94d; }
.mast-end { margin-left: auto; display: flex; align-items: center; gap: 12px; }
/* No Indonesian docs exist, so the language control is one link to the Indonesian site. */
.lang-l, .masthead .md {
  display: inline-flex; align-items: center; padding: 5px 11px;
  border: 1px solid var(--on-navy-2); border-radius: var(--radius);
  color: var(--on-navy); text-decoration: none; font-size: 0.85rem; font-weight: 700; white-space: nowrap;
}
.lang-l:hover { background: var(--navy-2); }
.masthead .md:hover { background: var(--on-navy); color: var(--navy); }

/* ---- the page: a list of pages beside the article --------------------------- */
.docs {
  max-width: var(--maxw); margin: 0 auto; padding: 24px var(--gutter) 0;
  display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); gap: 24px; align-items: start;
}

/* navy bands: the page list's heads and the article's head */
.ph {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; min-width: 0;
  padding: 11px 18px; background: var(--navy); color: var(--on-navy);
}
.ph .ttl { font-family: var(--head); font-size: 1.2rem; font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; }
.ph .sub { min-width: 0; color: var(--on-navy-2); font-size: 0.9rem; overflow-wrap: anywhere; }
.ph .age { margin-left: auto; color: var(--on-navy-2); font-size: 0.85rem; white-space: nowrap; }
.ph .age b { color: var(--on-navy); }

.rail {
  position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; scrollbar-width: thin;
  background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius);
}
.rail > .ph:first-child { border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0; }
.rail .ph .ttl { font-size: 1.05rem; }
.pages { list-style: none; margin: 0; padding: 6px 0 10px; }
.pages a {
  display: block;
  padding: 8px 18px; color: var(--ink); text-decoration: none; font-size: 0.95rem; line-height: 1.35;
}
.pages a .t { overflow-wrap: anywhere; }
.pages a:hover { background: var(--band); }
.pages a:hover .t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.pages a[aria-current="page"] { background: var(--navy-soft); font-weight: 700; }
.pages .toc { list-style: none; margin: 2px 0 8px; padding: 0; }
.pages .toc a { padding: 5px 18px 5px 32px; color: var(--ink-2); font-size: 0.85rem; }
.pages .toc a:hover { color: var(--ink); }
.pages.plain a { padding-top: 6px; padding-bottom: 6px; color: var(--link); font-size: 0.9rem; }
.pages.plain a .t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.pages.plain a:hover .t { text-decoration-thickness: 2px; }

/* ---- the article sheet ------------------------------------------------------- */
.doc { min-width: 0; display: flex; flex-direction: column; background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius); }
.doc > .ph { border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0; }
.doc-body { --pad: 36px; padding: 0 0 36px; }
.doc-body > * { margin: 16px var(--pad) 0; }
.doc-body > :is(p, ul, ol, blockquote, h1, h3, h4, hr) { max-width: var(--measure); }
.doc-body > h1 { margin-top: 30px; font-size: 2.1rem; line-height: 1.15; }
.doc-body > h1 + * { margin-top: 12px; }
/* README's tagline under the title reads as the standfirst. */
.doc-body > h1 + blockquote { padding: 0; border: 0; background: none; color: var(--ink-2); font-size: 1.2rem; line-height: 1.45; }
.doc-body h2 {
  margin: 44px 0 0; padding: 12px var(--pad);
  background: var(--navy); color: var(--on-navy); font-size: 1.35rem; overflow-wrap: break-word;
}.doc-body > h2 + * { margin-top: 20px; }
.doc-body h3 { margin-top: 36px; font-size: 1.2rem; }
.doc-body > h3 + * { margin-top: 10px; }
.doc-body h4 { margin-top: 26px; font-size: 1.05rem; font-weight: 700; }
.doc-body :is(h2, h3, h4) { scroll-margin-top: 16px; }
.doc-body p, .doc-body li { line-height: 1.6; overflow-wrap: break-word; }
.doc-body ul, .doc-body ol { padding-left: 1.4em; }
.doc-body li + li { margin-top: 6px; }
.doc-body li > ul, .doc-body li > ol, .doc-body li > p + p { margin-top: 6px; }
.doc-body li::marker { color: var(--ink-3); }
.doc-body code { padding: 0.08em 0.32em; border-radius: 3px; background: var(--band); color: var(--ink); font-size: 0.86em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.doc-body a code { color: inherit; }
.doc-body h2 code { background: rgb(255 255 255 / 0.14); color: inherit; }
.doc-body pre {
  padding: 14px 18px; overflow-x: auto; scrollbar-width: thin;
  background: var(--band); border-radius: var(--radius);
  font-size: 0.85rem; line-height: 1.55; color: var(--ink); tab-size: 4;
}
.doc-body pre code { padding: 0; border-radius: 0; background: none; font-size: inherit; }
/* A command and its output read as one block. */
.doc-body > pre:has(+ pre) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.doc-body > pre + pre { margin-top: 0; border-top: 1px solid var(--rule); border-top-left-radius: 0; border-top-right-radius: 0; }
.doc-body blockquote { padding: 14px 18px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--navy-soft); }
.doc-body blockquote > * + * { margin-top: 8px; }
.doc-body hr { border: 0; border-top: 1px solid var(--rule); }
.doc-body img { max-width: 100%; height: auto; }

/* tables: the home page's, left-aligned and wrapping for prose cells */
.doc-body > .tbl-wrap { margin: 20px 0 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.doc-body > h2 + .tbl-wrap { border-top: 0; }
/* A table wider than the sheet scrolls; a soft shadow at either edge says so
   (the shadows stay put while the sheet-coloured covers scroll with the rows). */
.tbl-wrap {
  overflow-x: auto; scrollbar-width: thin;
  background:
    linear-gradient(to right, var(--sheet) 40%, transparent) left center / 48px 100% no-repeat local,
    linear-gradient(to left, var(--sheet) 40%, transparent) right center / 48px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, color-mix(in srgb, var(--ink) 26%, transparent), transparent) left center / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, color-mix(in srgb, var(--ink) 26%, transparent), transparent) right center / 14px 100% no-repeat scroll,
    var(--sheet);
}
.tbl { width: 100%; border-collapse: collapse; font-size: 0.9rem; line-height: 1.45; }
.tbl th {
  padding: 10px 14px; border-bottom: 2px solid var(--ink); text-align: left; vertical-align: bottom; white-space: nowrap;
  color: var(--ink-2); font-size: 0.85rem; font-weight: 700;
}
.tbl td { padding: 9px 14px; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; overflow-wrap: break-word; }
.tbl th:first-child, .tbl td:first-child { padding-left: var(--pad); }
.tbl th:last-child, .tbl td:last-child { padding-right: var(--pad); }
.tbl td:first-child { color: var(--ink); }
/* Code in a cell wraps where its own spaces, brackets and query marks allow,
   so a long command or endpoint never pushes the next column off the sheet;
   docs.mjs wraps each flag in .nobr so it never breaks after its hyphens. */
.tbl code { overflow-wrap: break-word; }
.tbl .nobr { white-space: nowrap; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover td { background: var(--band); }
.tbl tbody tr:hover code { background: var(--sheet); }
.tbl .c { text-align: center; }
.tbl .r { text-align: right; }

.doc-foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px;
  margin-top: auto; padding: 12px 36px 14px; border-top: 1px solid var(--rule);
  color: var(--ink-3); font-size: 0.85rem;
}
.doc-foot a { font-weight: 700; }

/* ---- footer (as styles.css) -------------------------------------------------- */
.sign { margin-top: 32px; padding: 26px 0 34px; border-top: 4px solid var(--ink); background: var(--paper); }
.sign .wrap { display: grid; gap: 10px; }
.sign .place { font-weight: 700; }
.links { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.sign .disc { max-width: 60ch; color: var(--ink-2); font-size: 0.9rem; }

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

/* ---- responsive ---------------------------------------------------------------- */
/* One column: the page list becomes a wrapped row over the article, without the
   section list and the machine-readable links (the masthead keeps Markdown). */
@media (max-width: 64rem) {
  .docs { grid-template-columns: minmax(0, 1fr); gap: 16px; padding-top: 16px; }
  .rail { position: static; max-height: none; overflow: visible; }
  .rail .pages { display: flex; flex-wrap: wrap; gap: 2px 4px; padding: 8px 10px; }
  .rail .pages a { display: inline-flex; gap: 6px; padding: 8px; border-radius: var(--radius); }
  .rail .pages a[aria-current="page"] { box-shadow: inset 0 -3px var(--mark); }
  .rail .pages .toc, .rail .pages + .ph, .rail .pages.plain { display: none; }
}
@media (max-width: 48rem) {
  :root { --gutter: 16px; }
  .masthead .wrap { min-height: 0; padding-top: 6px; gap: 0 12px; }
  .brand img { width: 32px; height: 32px; }
  .nav { order: 3; flex-basis: 100%; margin: 0 calc(-1 * var(--gutter)); padding: 0 calc(var(--gutter) - 14px); overflow-x: auto; border-top: 1px solid rgb(255 255 255 / 0.16); }
  .nav a { padding: 0 14px; min-height: 48px; }
  .ph { padding: 10px 16px; }
  .ph .age { margin-left: 0; }
  /* Reading text stays at 18px on a phone. */
  .doc-body { --pad: 16px; font-size: 1.0625rem; padding-bottom: 24px; }
  .doc-body > h1 { margin-top: 22px; font-size: 1.7rem; }
  .doc-body > h1 + blockquote { font-size: 1.1rem; }
  .doc-body h2 { margin-top: 36px; gap: 10px; font-size: 1.15rem; }
  .doc-body h3 { margin-top: 30px; font-size: 1.1rem; }
  .doc-body pre { padding: 12px 14px; font-size: 0.8rem; }
  /* On a phone a many-column table scrolls rather than crushing its columns;
     the last column, the prose one in these docs, keeps a readable width. */
  .tbl th, .tbl td { min-width: 8em; }
  .tbl td:last-child { min-width: 15em; }
  .doc-foot { padding: 12px 16px 14px; }
}
@media (max-width: 30rem) {
  .masthead .md { display: none; }
}
@media (max-width: 24rem) {
  .brand-name small { display: none; }
  .lang-l { padding: 5px 8px; }
}