/* CatLog's plain pages (/dataset, /paper/<PMID>, /ec/<EC>, /ec/, 404): the catalog's tokens and calm look (the app's
   DESIGN.md "Type And Color"), no script. */
:root {
  color-scheme:light;
  --font:-apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
  --font-mono:ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --text:#172120; --text-2:#3d4845; --muted:#5c6865;
  --line:#d3dcd7; --line-soft:#e7ece9; --bg:#ffffff; --surface-2:#f6f8f7; --surface-3:#fafbfa;
  --accent-line:#aebdb7;
  --gutter:24px;
}
* { box-sizing:border-box }
html, body { background:var(--bg) }
body { margin:0; color:var(--text); font-family:var(--font); font-size:14px; line-height:20px; font-variant-numeric:tabular-nums lining-nums }
a { color:var(--text); text-decoration:underline; text-decoration-color:var(--accent-line); text-decoration-thickness:1px; text-underline-offset:2px }
a:hover { text-decoration-color:currentColor }
.page-header { display:flex; flex-wrap:wrap; align-items:center; gap:8px 24px; min-height:56px; border-bottom:1px solid var(--line); padding:8px var(--gutter) }
.brand { display:flex; align-items:baseline; gap:8px; text-decoration:none }
.brand strong { font-size:18px; font-weight:600 }
.brand span { color:var(--muted); font-size:13px }
.page-header nav { display:flex; flex-wrap:wrap; gap:4px 20px }
.page-header nav a { color:var(--text-2); font-weight:500; text-decoration:none }
.page-header nav a:hover { color:var(--text); text-decoration:underline }
main { max-width:1120px; padding:24px var(--gutter) 48px }
h1 { margin:0 0 8px; font-size:24px; line-height:30px; font-weight:600; overflow-wrap:anywhere }
h2 { margin:32px 0 8px; font-size:18px; line-height:24px; font-weight:600 }
p { margin:0 0 12px; max-width:760px }
.lead { color:var(--text-2); font-size:16px; line-height:24px }
.values { max-width:420px; margin:0 0 16px }
.values th[scope="row"] { font-size:14px; color:var(--text) }
.open-record { margin-top:16px }
/* Review result: the app's words in their colours' text shades (catlog-static.css --st-*-ink, --checked) */
.state { font-weight:500 }
.state-accepted { color:#3C5488 }
.state-pending { color:#975B4C }
.state-unverified { color:#60687F }
.state-disputed { color:#DC0000 }
.state-checked { color:#007664; font-weight:500 }
.check-icon { width:12px; height:12px; margin-right:2px; vertical-align:-1px }
.open-record a { font-weight:600 }
.paper-cite { margin:0 0 6px; font-size:16px; line-height:24px; font-weight:500; overflow-wrap:anywhere }
.ids { display:flex; flex-wrap:wrap; gap:4px 20px; margin:0 0 16px; color:var(--text-2) }
.note { color:var(--muted); font-size:13px; line-height:18px }
.facts { display:grid; grid-template-columns:max-content minmax(0,1fr); gap:6px 24px; margin:0 0 16px; max-width:760px }
.facts dt { color:var(--muted) }
.facts dd { margin:0 }
.table-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:4px }
table { width:100%; border-collapse:collapse; font-size:13px; line-height:18px }
th { background:var(--bg); border-bottom:1px solid var(--line); color:var(--text-2); font-size:12px; line-height:16px; font-weight:600; padding:8px 10px; text-align:left; white-space:nowrap }
td { border-top:1px solid var(--line-soft); padding:7px 10px; vertical-align:top }
tbody tr:nth-child(even) :is(td, th) { background:var(--surface-3) }
td.num, th.num { text-align:right; white-space:nowrap }
td.nowrap { white-space:nowrap }
.form { display:block; color:var(--text-2); font-size:12px; line-height:16px; font-weight:400 }
.form-word { color:var(--muted) }
.condition-note { display:block; color:var(--muted); font-size:12px; line-height:16px }
td.name { font-weight:500 }
.calc { color:var(--muted); font-size:12px }
.ec-list { columns:3 240px; column-gap:32px; margin:0; padding:0; list-style:none }
.ec-list li { break-inside:avoid; margin:0 0 4px }
.ec-list small, .paper-list small, .muted { color:var(--muted) }
.paper-list { margin:0; padding:0; list-style:none }
.paper-list li { margin:0 0 6px; max-width:900px }
.visually-hidden { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 }
:where(a):focus-visible { outline:2px solid var(--text); outline-offset:2px; border-radius:2px }
code { font-family:var(--font-mono); font-size:13px; overflow-wrap:anywhere }
.page-footer { border-top:1px solid var(--line); color:var(--muted); font-size:13px; line-height:18px; padding:16px var(--gutter) 32px }
.page-footer a { color:var(--text-2) }
@media (max-width: 640px) {
  :root { --gutter:16px }
  h1 { font-size:20px; line-height:26px }
  .facts { grid-template-columns:minmax(0,1fr); gap:0 }
  .facts dd { margin:0 0 8px }
  table.records td:nth-child(-n+3) { min-width:8.5rem }
}