/* API docs page. Builds on styles.css tokens. */
.dtop { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); padding: var(--s4) var(--s6); border-bottom: 1px solid var(--rope); }
.dname { color: var(--foam); font-weight: 700; font-size: 18px; text-decoration: none; }
.dnav { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); margin-left: auto; }
.dnav a { color: var(--fog); text-decoration: none; padding: 6px 10px; border-radius: 8px; font-size: 14px; }
.dnav a:hover, .dnav a[aria-current] { color: var(--foam); background: var(--deck-2); }
.dnav a:focus-visible, .dname:focus-visible { outline: 2px solid var(--beacon); outline-offset: 2px; }
.dmain { max-width: 1040px; margin: 0 auto; padding: var(--s6) var(--s4) var(--s7); outline: none; }
.dmain h1 { margin: 0 0 var(--s2); font-size: 32px; }
.dmain h2 { margin: 0 0 var(--s3); font-size: 22px; }
.dmain section { margin: var(--s6) 0; }
.dmain .lede { color: var(--fog); max-width: 75ch; margin: 0 0 var(--s4); }
.dmain a { color: #8fb0ff; }
.dmain code { font-family: var(--mono); font-size: 0.9em; }
.dnote-box { border: 1px dashed var(--sealed); background: var(--deck); border-radius: 10px; padding: var(--s3) var(--s4); max-width: 90ch; }
.toc { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); font-size: 14px; }
.dbox { background: var(--deck); border: 1px solid var(--rope); border-radius: 12px; padding: var(--s4); }
.dmuted { color: var(--fog); font-size: 14px; }
.dlist { margin: 0; padding-left: 20px; color: var(--foam); }
.dlist li { margin: 6px 0; }
pre.code { background: var(--night); border: 1px solid var(--rope); color: var(--foam); font: 12.5px/1.55 var(--mono); border-radius: 8px; padding: 10px 12px; overflow-x: auto; white-space: pre; margin: var(--s2) 0; }
.console { display: grid; gap: var(--s3); }
.console label { display: grid; gap: 4px; font-size: 13px; color: var(--fog); }
.console label.inl { display: flex; align-items: center; gap: var(--s2); }
.console .row { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.console .row .grow { flex: 1 1 16rem; }
.console textarea { min-height: 120px; font: 13px/1.5 var(--mono); }
.console .input { width: 100%; }
.console .out { max-height: 440px; overflow: auto; margin: 0; }
.console [hidden] { display: none !important; }
h3.grp { font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fog); margin: var(--s5) 0 var(--s2); }
.ep { border: 1px solid var(--rope); border-radius: 10px; background: var(--deck); margin: 0 0 var(--s2); }
.ep > summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; padding: 10px 14px; }
.ep > summary::-webkit-details-marker { display: none; }
.ep > summary:focus-visible { outline: 2px solid var(--beacon); outline-offset: -2px; border-radius: 10px; }
.ep .m { font: 700 11.5px var(--mono); padding: 3px 8px; border-radius: 6px; min-width: 56px; text-align: center; border: 1px solid currentColor; }
.m-GET { color: var(--cleared); } .m-POST { color: #8fb0ff; } .m-DELETE { color: var(--refused); }
.ep .p { font: 600 13.5px var(--mono); overflow-wrap: anywhere; }
.ep .d { color: var(--fog); font-size: 14px; }
.ep .body { padding: 2px 14px 12px; border-top: 1px solid var(--rope); }
.ep .who { font: 12px var(--mono); color: var(--sealed); }
.t { width: 100%; border-collapse: collapse; font-size: 14px; }
.t td { padding: 8px; border-bottom: 1px solid var(--rope); vertical-align: top; }
.scroll { overflow-x: auto; }
.pill { font: 700 12px var(--mono); padding: 3px 8px; border-radius: 6px; white-space: nowrap; }
.p-allow { color: var(--cleared); border: 1px solid var(--cleared); } .p-redact { color: var(--sealed); border: 1px solid var(--sealed); }
.p-review { color: var(--held); border: 1px solid var(--held); } .p-block { color: var(--refused); border: 1px solid var(--refused); }
@media (max-width: 640px) { .dtop { padding: var(--s3) var(--s4); } .dnav { margin-left: 0; } }

/* How it works page */
.hw-creed { color: var(--fog); border-left: 3px solid var(--seal-a); padding-left: var(--s3); max-width: 75ch; }
.hw-creed b { color: var(--foam); font-weight: 500; }
.hw-flow { list-style: none; margin: 0; padding: 0; counter-reset: s; display: grid; gap: 0; }
.hw-flow li { counter-increment: s; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 2px var(--s3); padding: var(--s3) 0; border-top: 1px solid var(--rope); }
.hw-flow li:first-child { border-top: 0; }
.hw-flow li::before { content: counter(s); grid-row: span 2; font: 700 13px/1.7 var(--mono); color: var(--seal-a); }
.hw-flow span { color: var(--fog); }
.hw-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s3); }
.hw-grid p { margin: var(--s2) 0 0; color: var(--fog); font-size: 14px; }
.hw-scen { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--s2); margin: var(--s3) 0 var(--s4); }
.hw-scen button { text-align: left; background: var(--deck); border: 1px solid var(--rope); border-radius: 10px; padding: 10px 14px; color: var(--foam); cursor: pointer; font: inherit; }
.hw-scen button:hover { border-color: var(--rope-2); }
.hw-scen button[aria-pressed="true"] { border-color: var(--seal-a); box-shadow: inset 3px 0 0 var(--seal-a); }
.hw-scen button:focus-visible { outline: 2px solid var(--beacon); outline-offset: 2px; }
.hw-scen button[disabled] { opacity: .55; cursor: wait; }
.hw-scen .t { display: block; font-weight: 500; }
.hw-scen .x { display: block; font: 11.5px var(--mono); color: var(--fog-2); margin-top: 4px; }
.hw-result h3 { font-size: 14px; color: var(--fog); margin: var(--s4) 0 var(--s1); font-weight: 500; }
.hw-head { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); align-items: center; }
.hw-status { font: 12.5px var(--mono); color: var(--fog); }
.hw-title { font-weight: 700; font-size: 17px; margin: var(--s3) 0 var(--s1); }
.hw-kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px var(--s4); font-size: 14px; margin: 0; }
.hw-kv dt { color: var(--fog); } .hw-kv dd { margin: 0; overflow-wrap: anywhere; }
.hw-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s4); }
.hw-cols pre.code { white-space: pre-wrap; overflow-wrap: anywhere; }
.hw-why { margin: var(--s3) 0 0; }
.dlist.mono { font-family: var(--mono); font-size: 13px; }
.hw-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.hw-checks li { font: 12px var(--mono); border: 1px solid var(--rope); border-radius: 999px; padding: 3px 10px; }
.hw-checks li.ok { color: var(--cleared); border-color: rgba(61, 213, 152, .4); } .hw-checks li.bad { color: var(--refused); border-color: var(--refused); }
@media (max-width: 560px) { .hw-kv { grid-template-columns: minmax(0, 1fr); } }