/* Open Adhkar: maroon and gold with warm brown neutrals. Every text colour is 7:1 or better on its background. */
:root {
  --bg: #FBF8F6;
  --surface: #FFFFFF;
  --ink: #261A17;
  --muted: #5C4C46;
  --line: #E7DDD7;
  --edge: #94817A; /* component outlines: 3:1+ on page, card and code backgrounds */
  --accent: #7A1F2B;
  --panel: #4A1219;
  --gold: #946B22;
  --code-bg: #F6EFEA;
  --on-deep: #FFFFFF;
  --on-deep-muted: #F3E4DD;
  --gold-on-deep: #EDCB86;
  --code-on-deep: #F7EAE4;
  --btn: #7A1F2B;
  --radius: 10px;
  --measure: 68ch;
  /* Spacing scale: use only these. */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 40px; --s7: 64px; --s8: 96px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #161010; --surface: #221917; --ink: #F1E8E3; --muted: #C4B2AA; --line: #5A4540; --edge: #8A706A;
    --accent: #EBA5AC; --panel: #3D0F15; --gold: #E3BF78; --code-bg: #2F2421; --btn: #AE4152; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #161010; --surface: #221917; --ink: #F1E8E3; --muted: #C4B2AA; --line: #5A4540; --edge: #8A706A;
    --accent: #EBA5AC; --panel: #3D0F15; --gold: #E3BF78; --code-bg: #2F2421; --btn: #AE4152; color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.65 "Public Sans", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
[lang="ar"] { font-family: "Noto Naskh Arabic", Amiri, serif; direction: rtl; }
code, pre { font-family: "JetBrains Mono", ui-monospace, "Noto Naskh Arabic", monospace; font-size: 0.86em; }
:not(pre) > code { background: var(--code-bg); padding: 1px 6px; border-radius: 5px; }
pre {
  background: var(--code-bg); border: 1px solid var(--edge); border-radius: var(--radius);
  padding: 16px 18px; overflow-x: auto; line-height: 1.55; margin: 0 0 20px;
}

/* Header */
.site-head { border-bottom: 1px solid var(--line); background: var(--surface); }
.site-head .wrap { display: flex; align-items: center; gap: 28px; min-height: 64px; }
.wordmark { font: 600 20px/1 "Public Sans", sans-serif; color: var(--ink); text-decoration: none; letter-spacing: -0.01em; display: flex; align-items: center; gap: 10px; }
.wordmark svg { width: 26px; height: 26px; }
.site-nav { display: flex; gap: 22px; flex: 1; }
.site-nav a { color: var(--muted); text-decoration: none; font-size: 15px; padding: 4px 0; border-bottom: 2px solid transparent; }
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--gold); }
.theme { background: none; border: 1px solid var(--edge); color: var(--muted); border-radius: 999px; width: 34px; height: 34px; cursor: pointer; font-size: 15px; }

.wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }

/* Home hero: the headline, then one dhikr shown three ways — printed page, the check, the record. */
.hero { padding: var(--s7) 0 var(--s8); }
.hero-text { max-width: 820px; margin: 0 0 var(--s6); }
.hero h1 { font: 600 clamp(36px, 5vw, 60px)/1.04 "Public Sans", sans-serif; letter-spacing: -0.03em; margin: 0 0 var(--s4); }
.hero p.lede { font-size: 19px; color: var(--muted); margin: 0 0 var(--s5); }
.actions { display: flex; gap: var(--s3); flex-wrap: wrap; }
.btn { display: inline-block; padding: 11px 20px; border-radius: 8px; text-decoration: none; font-weight: 500; font-size: 16px; border: 1px solid var(--accent); }
.btn.primary { background: var(--btn); border-color: var(--btn); color: #fff; }
.btn.quiet { color: var(--accent); }

.proof { margin: 0; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 2.2fr) minmax(0, 5fr); gap: var(--s5); align-items: stretch; }
.proof .cap { font-size: 13.5px; color: var(--muted); }

/* The printed page: a framed sheet with running head, folio, item number and footnote. */
.page {
  position: relative; background: var(--surface); border: 1px solid var(--edge); border-radius: 6px;
  padding: var(--s5) 30px var(--s4); display: flex; flex-direction: column; gap: var(--s3);
  box-shadow: inset 0 0 0 7px var(--surface), inset 0 0 0 8px var(--gold);
}
.page-head { display: flex; justify-content: space-between; gap: var(--s3); font: 16px/1.5 "Noto Naskh Arabic", serif; color: var(--muted); border-bottom: 1px solid var(--line); padding-bottom: var(--s2); }
.page-head .folio { color: var(--gold); font-weight: 600; }
.page-num { margin: 0; font: 600 18px/1.5 "Noto Naskh Arabic", serif; color: var(--gold); }
.page-text { margin: 0; font: 400 clamp(30px, 3vw, 40px)/1.7 Amiri, "Noto Naskh Arabic", serif; color: var(--ink); }
.page-note { margin: auto 0 0; padding-top: var(--s2); border-top: 1px solid var(--line); font: 17px/1.6 "Noto Naskh Arabic", serif; color: var(--muted); }

/* The check between the two sources. */
.check { display: flex; flex-direction: column; justify-content: center; gap: var(--s3); padding: var(--s4); border: 1px dashed var(--edge); border-radius: 12px; position: relative; }
.check .src { display: flex; align-items: center; gap: var(--s2); font-weight: 500; }
.tick { flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--btn); position: relative; }
.tick::after { content: ""; position: absolute; left: 7px; top: 4px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.check .verdict { font: 600 22px/1.2 "Public Sans", sans-serif; color: var(--accent); margin-top: var(--s2); }
.proof > .page::after, .proof > .check::after {
  content: ""; position: absolute; top: 50%; right: calc(-1 * var(--s5)); width: var(--s5); height: 2px; background: var(--gold);
}

/* The published record. */
.record { background: var(--panel); color: var(--on-deep); border-radius: 14px; overflow: hidden; -webkit-font-smoothing: auto; border: 1px solid rgb(237 203 134 / 0.25); display: flex; flex-direction: column; }
.record .cap { display: flex; justify-content: space-between; padding: var(--s4) var(--s5) 0; color: var(--on-deep-muted); }
.record pre { background: transparent; border: 0; border-radius: 0; margin: 0; padding: var(--s3) var(--s5) var(--s5); color: var(--code-on-deep); font-size: 13.5px; white-space: pre-wrap; overflow-wrap: anywhere; }
.record pre .k { color: var(--gold-on-deep); }
.record pre .s { color: var(--on-deep); }
.record pre bdi { font-family: "Noto Naskh Arabic", serif; font-size: 1.15em; }

/* Page sections */
.band { padding: var(--s7) 0; border-top: 1px solid var(--line); }
.band-head { margin: 0 0 var(--s6); }
.band-head h2 { font: 600 28px/1.2 "Public Sans", sans-serif; letter-spacing: -0.015em; margin: 0; }
.band-head .intro { color: var(--muted); margin: var(--s3) 0 0; max-width: var(--measure); }

.library { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.library li { display: grid; grid-template-columns: 1fr auto; gap: 8px 32px; padding: 24px 0; border-bottom: 1px solid var(--line); align-items: center; }
.library .t-ar { font: 400 26px/1.5 Amiri, serif; margin: 0; }
.library .t-en { font-weight: 600; margin: 0; }
.library .meta { color: var(--muted); font-size: 15px; margin: 2px 0 0; }
.library .links { display: flex; gap: 10px; }
.library li.soon { color: var(--muted); grid-template-columns: 1fr; }
.badge { display: inline-block; font-size: 12.5px; font-weight: 500; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--gold); color: var(--gold); margin-left: 8px; vertical-align: 2px; }

.usage { display: grid; grid-template-columns: 240px minmax(0, 1fr); border: 1px solid var(--edge); border-radius: 14px; background: var(--surface); overflow: hidden; }
.tabs { display: flex; flex-direction: column; border-right: 1px solid var(--line); padding: 10px; gap: 2px; }
.tabs button {
  text-align: left; background: none; border: 0; border-radius: 8px; padding: 11px 14px;
  font: 500 15.5px/1.3 "Public Sans", sans-serif; color: var(--ink); cursor: pointer;
  border: 1px solid transparent;
}
.tabs button:hover { border-color: var(--edge); background: var(--code-bg); }
/* Selected tab uses the primary button fill so it is unmistakable in both themes. */
.tabs button[aria-selected="true"], .tabs button[aria-selected="true"]:hover { color: #FFFFFF; background: var(--btn); border-color: var(--btn); }
.panels { padding: 24px 28px 26px; min-width: 0; }
.panels p { margin: 0 0 16px; color: var(--muted); max-width: 62ch; }
.panels p.small { font-size: 14.5px; margin: 14px 0 0; }
.panels pre { margin: 0; }

/* Code blocks wrap instead of scrolling sideways, and get a copy button. */
pre { white-space: pre-wrap; overflow-wrap: anywhere; position: relative; }
.copyable { position: relative; }
.copyable pre { padding-right: 84px; }
.copy {
  position: absolute; top: 10px; right: 10px; z-index: 1;
  font: 500 13px/1 "Public Sans", sans-serif; color: var(--ink); background: var(--surface);
  border: 1px solid var(--edge); border-radius: 7px; padding: 7px 11px; cursor: pointer;
}
.copy:hover { border-color: var(--accent); color: var(--accent); }
.copy.done { color: var(--accent); border-color: var(--accent); }

.promises { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.promise { margin: 0; border: 1px solid var(--edge); border-radius: 12px; background: var(--surface); overflow: hidden; }
.promise .vis { min-height: 112px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; padding: 18px; background: var(--code-bg); }
.promise figcaption { padding: 14px 16px 16px; font-size: 15px; color: var(--muted); }
.promise figcaption b { color: var(--ink); font-weight: 600; }
.ar-line { font: 26px/1.5 Amiri, serif; color: var(--ink); width: 100%; text-align: center; }
.tag { font-size: 12.5px; color: var(--gold); font-weight: 500; }
.chip { font-size: 14px; background: var(--surface) !important; border: 1px solid var(--edge); padding: 6px 10px !important; }
.versions { gap: 6px; }
.promise .vis.versions { flex-wrap: nowrap; }
.versions .v { font: 500 13px/1 "JetBrains Mono", monospace; border: 1px solid var(--edge); background: var(--surface); border-radius: 6px; padding: 7px 8px; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.versions .v svg { width: 10px; height: 12px; }
.versions .v.locked { border-color: var(--gold); color: var(--gold); }
.versions .arrow { flex: none; width: 12px; height: 1.5px; background: var(--muted); position: relative; }
.versions .arrow::after { content: ""; position: absolute; right: 0; top: -3px; border: 3.5px solid transparent; border-left: 5px solid var(--muted); border-right: 0; }
.status { font-size: 13.5px; font-weight: 500; border-radius: 999px; padding: 5px 12px; border: 1px solid; }
.status.machine { color: var(--muted); border-color: var(--edge); background: var(--surface); }
.status.reviewed { color: var(--accent); border-color: var(--accent); background: var(--surface); }
.status.retranslated { color: var(--gold); border-color: var(--gold); background: var(--surface); }

/* Document pages (downloads, developers, about) */
.doc { padding: 56px 0 80px; }
.doc .wrap { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 56px; }
.doc aside nav { position: sticky; top: 24px; display: grid; gap: 6px; font-size: 14.5px; }
.doc aside nav a { color: var(--muted); text-decoration: none; }
.doc aside nav a:hover { color: var(--ink); }
.doc article { max-width: 820px; min-width: 0; }
.doc h1 { font: 600 40px/1.1 "Public Sans", sans-serif; letter-spacing: -0.02em; margin: 0 0 var(--s3); }
.doc .lede { font-size: 19px; color: var(--muted); margin: 0 0 var(--s6); max-width: var(--measure); }
.doc h2 { font: 600 24px/1.25 "Public Sans", sans-serif; margin: var(--s7) 0 var(--s4); padding-top: var(--s5); border-top: 1px solid var(--line); scroll-margin-top: var(--s4); }
.doc h2 + * { margin-top: 0 !important; }
.doc article > :is(.diagram, .idparts, .statusrow, .timeline, .licence, .flow, .bar, .steps, .style-eg, .tablewrap, table, pre, .copyable) { margin-bottom: var(--s5); }
.doc h3 { font-size: 18px; margin: 28px 0 8px; }
.doc p, .doc li { max-width: var(--measure); }
.doc table { border-collapse: collapse; width: 100%; font-size: 15px; margin: 0 0 24px; }
.doc th, .doc td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.doc th { font-weight: 600; color: var(--muted); font-size: 13.5px; }
.doc td code { white-space: nowrap; }
.tablewrap { overflow-x: auto; }
.note { border-left: 3px solid var(--gold); padding: 4px 0 4px 16px; color: var(--muted); }

.release-head { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: baseline; margin: 0 0 16px; }
.release-head h2 { border: 0; margin: 0; padding: 0; }
.release-head .meta { color: var(--muted); font-size: 15px; }
.files td:first-child a { font-weight: 500; }
.sha { font-size: 12px; color: var(--muted); cursor: copy; background: none; border: 0; padding: 0; font-family: "JetBrains Mono", monospace; }
.sha:hover { color: var(--ink); }

.site-foot { border-top: 1px solid var(--line); padding: 32px 0 48px; color: var(--muted); font-size: 14.5px; }
.site-foot .wrap { display: flex; flex-wrap: wrap; gap: 12px 32px; justify-content: space-between; }

@media (max-width: 900px) {
  .hero { padding: var(--s6) 0 var(--s7); }
  .doc .wrap, .usage, .proof { grid-template-columns: 1fr; }
  .proof > .page::after, .proof > .check::after { top: auto; bottom: calc(-1 * var(--s5)); right: auto; left: 50%; width: 2px; height: var(--s5); }
  .page { padding: var(--s4) var(--s5); }
  .promises { grid-template-columns: 1fr 1fr; }
  .tabs { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); scrollbar-width: none; }
  .tabs button { white-space: nowrap; padding: 9px 12px; font-size: 14.5px; }
  .panels { padding: 18px 16px 20px; }
  .doc aside { display: none; }
  .site-head .wrap { gap: 16px; flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; }
  .site-nav { order: 3; flex-basis: 100%; gap: 18px; overflow-x: auto; }
    .library li { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }
.files td:nth-child(2), .files td:nth-child(3), .files td:first-child { white-space: nowrap; }
.doc .lede { max-width: 58ch; }
.promises > *, .doc article { min-width: 0; }
.theme { margin-left: auto; }
.doc p code { overflow-wrap: anywhere; }
.doc pre { white-space: pre-wrap; overflow-wrap: anywhere; }

@media (max-width: 520px) { .promises { grid-template-columns: 1fr; } }
@media (min-width: 901px) and (max-width: 1100px) { .promises { grid-template-columns: 1fr 1fr; } }

/* Developers: diagrams */
.diagram { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; margin: 0; padding: var(--s5); border: 1px solid var(--edge); border-radius: 14px; background: var(--surface); }
.tree { display: grid; gap: 14px; position: relative; }
.tree::before { content: ""; position: absolute; left: 22px; top: 30px; bottom: 30px; width: 2px; background: var(--gold); opacity: .55; }
.node { position: relative; margin-left: calc(var(--d, 0) * 22px); display: grid; grid-template-columns: 92px auto 1fr; align-items: baseline; gap: 10px; padding: 10px 14px; border: 1px solid var(--edge); border-radius: 10px; background: var(--bg); }
.node:nth-child(2) { --d: 1; } .node:nth-child(3) { --d: 2; } .node:nth-child(4) { --d: 3; }
.node .k { font-size: 13px; color: var(--muted); }
.node b { font-size: 18px; }
.node small { color: var(--muted); font: 12.5px "JetBrains Mono", monospace; text-align: right; }
.node.coll { border-color: var(--accent); }
.node.coll b { font-size: 16px; }
.layers { display: grid; gap: 8px; }
.layer { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 10px 14px; border-radius: 10px; border: 1px dashed var(--edge); font-size: 14px; color: var(--muted); }
.layer code { background: none !important; padding: 0 !important; color: var(--ink); }
.layer.src { border-style: solid; border-color: var(--gold); }
.layer.merge { border-style: solid; background: var(--code-bg); }
.idparts { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 2px; margin: 0; padding: var(--s5); border: 1px solid var(--edge); border-radius: 14px; background: var(--surface); }
.idparts .part { display: grid; gap: 8px; justify-items: center; }
.idparts .part code { font-size: 22px; padding: 6px 10px !important; border-radius: 8px; background: var(--code-bg); border-bottom: 3px solid var(--gold); }
.idparts .part.sep code { border-bottom-color: transparent; background: none !important; padding: 6px 2px !important; }
.idparts small { font-size: 13px; color: var(--muted); max-width: 18ch; text-align: center; }
.statusrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); margin: 0; }
.statusrow > div { border: 1px solid var(--edge); border-radius: 12px; padding: 16px; background: var(--surface); }
.statusrow p { margin: 10px 0 0; font-size: 14.5px; color: var(--muted); }
.timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 0; }
.timeline .step { position: relative; padding: 26px 12px 0 0; }
.timeline .step::before { content: ""; position: absolute; top: 8px; left: 0; right: 0; height: 2px; background: var(--line); }
.timeline .step::after { content: ""; position: absolute; top: 3px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--bg); border: 2px solid var(--muted); }
.timeline .step.locked::after { border-color: var(--gold); background: var(--gold); }
.timeline code { display: inline-block; font-size: 15px; margin-bottom: 4px; }
.timeline small { display: block; font-size: 13.5px; color: var(--muted); }
.licence { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); margin: 0; }
.licence > div { border: 1px solid var(--edge); border-radius: 12px; padding: 16px; background: var(--surface); display: grid; gap: 6px; }
.licence b { color: var(--accent); }
.licence span { color: var(--muted); font-size: 15px; }
@media (max-width: 900px) {
  .diagram, .statusrow, .licence { grid-template-columns: 1fr; }
  .timeline { grid-template-columns: 1fr 1fr; row-gap: 18px; }
  .node { grid-template-columns: 80px auto; } .node small { display: none; }
}

/* About: comparison and translation visuals */
.flow { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); margin: 0 0 var(--s5) !important; }
.src-card { border: 1px solid var(--edge); border-radius: 12px; padding: 14px 16px; background: var(--surface); display: grid; gap: 2px; }
.src-card span { color: var(--muted); font-size: 14.5px; }
.join { grid-column: 1 / -1; height: 22px; position: relative; }
.join::before { content: ""; position: absolute; left: 25%; right: 25%; top: 0; height: 11px; border: 2px solid var(--gold); border-top: 0; border-radius: 0 0 10px 10px; }
.join::after { content: ""; position: absolute; left: 50%; top: 11px; width: 2px; height: 11px; background: var(--gold); }
.cmp { grid-column: 1 / -1; text-align: center; font-size: 14.5px; color: var(--muted); border: 1px solid var(--gold); border-radius: 999px; padding: 8px 16px; justify-self: center; }
.bar { display: flex; height: 40px; border-radius: 10px; overflow: hidden; margin: 0 0 var(--s3) !important; border: 1px solid var(--edge); }
.bar .seg { display: flex; align-items: center; padding: 0 14px; font-size: 14.5px; white-space: nowrap; min-width: 6px; }
.bar .same { background: #2F6B4F; color: #fff; }
.bar .diff { background: var(--gold); }
.bar .merged { background: var(--accent); }
.bar-key { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 6px; font-size: 15px; color: var(--muted); }
.bar-key i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 8px; vertical-align: -1px; }
.bar-key i.same { background: #2F6B4F; } .bar-key i.diff { background: var(--gold); } .bar-key i.merged { background: var(--accent); }
.bar-key b { color: var(--ink); margin-right: 4px; }
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; counter-reset: step; }
.steps li { position: relative; border: 1px solid var(--edge); border-radius: 12px; padding: 14px 16px; background: var(--surface); display: grid; gap: 4px; align-content: start; }
.steps li:not(:last-child)::after { content: ""; position: absolute; right: -10px; top: 50%; width: 10px; height: 2px; background: var(--gold); }
.steps li:last-child { border-color: var(--accent); }
.steps span { font-size: 14px; color: var(--muted); }
.style-eg { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); margin: 0; }
.style-eg > div { background: var(--code-bg); border-radius: 10px; padding: 12px 14px; }
.style-eg .lbl { font-size: 13px; color: var(--muted); }
.style-eg p { margin: 4px 0 0; font-weight: 500; }
@media (max-width: 900px) {
  .steps, .style-eg { grid-template-columns: 1fr; }
  .steps li:not(:last-child)::after { right: auto; left: 24px; top: auto; bottom: -10px; width: 2px; height: 10px; }
  .bar .seg b, .bar .seg { font-size: 13px; }
}

/* Tab panels share one grid cell, so the box is always as tall as the longest panel and nothing jumps
   when switching tabs. Inactive panels stay in layout but are invisible and out of the a11y tree. */
.panels { display: grid; }
.panels > [role="tabpanel"] { grid-area: 1 / 1; }
.panels > [role="tabpanel"][hidden] { display: block; visibility: hidden; }
html { scrollbar-gutter: stable; }

.pg { display: grid; justify-items: center; gap: 2px; border: 1px solid var(--edge); background: var(--surface); border-radius: 6px; padding: 8px 12px; box-shadow: inset 0 0 0 3px var(--surface), inset 0 0 0 4px var(--gold); }
.pg b { font-size: 15px; } .pg small { font-size: 12.5px; color: var(--muted); }
.plus, .eq { color: var(--muted); font-weight: 600; }
.books { gap: 6px; }
.book { font: 16px/1 "Noto Naskh Arabic", serif; border: 1px solid var(--gold); background: var(--surface); border-radius: 6px; padding: 8px 10px; }
.book.next { font: 13px/1 "Public Sans", sans-serif; color: var(--muted); border-style: dashed; border-color: var(--edge); padding: 10px; }
.books .schema { width: 100%; text-align: center; }
.nowrap { white-space: nowrap; }
.page .cap { font-family: "Public Sans", sans-serif; }
.promise .vis { gap: 6px; }
.promise .vis .status { font-size: 12.5px; padding: 4px 9px; }