/* Datasheet style in one column: mono section labels in the margin, content about 64ch wide. */

@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans Condensed"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/ibm-plex-sans-condensed-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-style: normal; font-display: swap; src: url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }

:root {
  color-scheme: light dark;
  --paper: #FFFFFF;
  --ink: #0E1726;
  --muted: #5B6577;
  --rule: #CFD6E0;
  --signal: #0A5CD6;
  --tint: #EEF3FB;
  --sans: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --cond: "IBM Plex Sans Condensed", "Arial Narrow", "IBM Plex Sans", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0D1420;
    --ink: #E4EAF3;
    --muted: #93A0B4;
    --rule: #26324A;
    --signal: #6EA2FF;
    --tint: #142036;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.6 var(--sans);
  padding-block: clamp(20px, 5vw, 56px);
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
a { color: var(--signal); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.page { max-width: 900px; margin: 0 auto; display: grid; gap: 44px; }
.main { display: grid; gap: 44px; min-width: 0; }

.label, .code {
  font: 500 12px/1.4 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.code { color: var(--signal); margin: 0; }

/* Top bar */
.topbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px; border-bottom: 2px solid var(--ink); padding-bottom: 12px; }
.topbar .home { font-weight: 600; font-size: 15px; color: var(--ink); text-decoration: none; }
.topbar nav { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.topbar nav a { color: var(--muted); text-decoration: none; }
.topbar nav a:hover { color: var(--ink); }

/* Title block */
.title { display: grid; gap: 18px; }
.title h1 { font: 600 clamp(34px, 6vw, 54px)/1.02 var(--cond); letter-spacing: -.01em; margin: 0; text-wrap: balance; }
.title .role { margin: 0; font-size: 19px; color: var(--muted); }
.title .lede { margin: 0; font-size: 19px; line-height: 1.5; max-width: 60ch; text-wrap: pretty; }
.meta { display: grid; grid-template-columns: auto 1fr; gap: 4px 18px; margin: 0; font-size: 15px; border-top: 1px solid var(--rule); padding-top: 14px; max-width: 64ch; }
.meta dt { font: 500 12px/1.9 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.meta dd { margin: 0; }

/* Sections: label in the margin, content column */
.row { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 10px 40px; scroll-margin-top: 16px; }
.row > h2 { margin: 0; padding-top: 3px; color: var(--muted); display: flex; gap: 10px; }
.row > h2 span { color: var(--signal); }
.body { display: grid; gap: 16px; max-width: 64ch; }
.body p { margin: 0; }

.areas { display: grid; border-top: 1px solid var(--rule); }
.areas > div { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: 2px 16px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.areas .code { grid-row: span 2; padding-top: 4px; color: var(--signal); font-size: 12px; }
.areas h3 { margin: 0; font: 600 18px/1.35 var(--cond); }
.areas p { margin: 0; color: var(--muted); font-size: 15px; }

.tbl { width: 100%; border-collapse: collapse; font-size: 15px; }
.tbl th { text-align: left; font: 500 12px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 0 14px 8px 0; border-bottom: 1px solid var(--rule); }
.tbl td { padding: 9px 14px 9px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.tbl td:first-child { font: 14px/1.6 var(--mono); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tbl tr.now td { background: var(--tint); }
.tbl tr.now td:first-child { box-shadow: inset 3px 0 0 var(--signal); padding-left: 10px; }
.tbl .org { display: block; color: var(--muted); font-size: 14px; }

.list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; font-size: 15px; }
.list b { display: block; font-weight: 600; }
.list span { color: var(--muted); }

.links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; list-style: none; }

.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; border-top: 2px solid var(--ink); padding-top: 14px; font-size: 14px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.foot a { text-decoration: none; }
.foot .rev { font: 12px/1.6 var(--mono); color: var(--muted); }

/* Privacy page */
.prose { display: grid; gap: 14px; max-width: 64ch; }
.prose h1 { font: 600 clamp(28px, 5vw, 40px)/1.1 var(--cond); margin: 0; }
.prose h2 { font: 600 19px/1.35 var(--cond); margin: 14px 0 0; }
.prose p, .prose ul { margin: 0; }
.prose ul { padding-left: 20px; display: grid; gap: 4px; }

@media (max-width: 720px) {
  .row { grid-template-columns: 1fr; }
}
@media (max-width: 460px) {
  .topbar nav { gap: 4px 14px; }
}
@media (max-width: 560px) {
  .tbl thead { display: none; }
  .tbl tr { display: grid; padding: 9px 0; border-bottom: 1px solid var(--rule); }
  .tbl td { border: 0; padding: 0; }
  .tbl tr.now { background: var(--tint); box-shadow: inset 3px 0 0 var(--signal); padding-left: 10px; }
  .tbl tr.now td { background: none; }
  .tbl tr.now td:first-child { box-shadow: none; padding-left: 0; }
  .areas > div { grid-template-columns: 1fr; }
  .areas .code { grid-row: auto; }
}
@media print {
  .topbar nav { display: none; }
  body { padding: 0; }
}