/* FAQ, About, Privacy, Terms, 404: document styles. Tokens come from base.css. */
.doc{padding:var(--s7) 0 var(--s8)}
.doc-wrap{max-width:calc(68ch + 2 * var(--gutter))}
.doc h1{margin-bottom:var(--s3);font-size:var(--fs-2xl)}
.doc h2{font-size:var(--fs-xl);letter-spacing:-.03em;margin:var(--s7) 0 var(--s3);scroll-margin-top:84px}
.doc p,.doc li{max-width:68ch}
.doc ul,.doc ol{padding-left:1.25em}
.doc li{margin-bottom:var(--s2)}
.doc .lede{font-size:var(--fs-lg);color:var(--text-dim);line-height:1.6}
.doc-updated{font:400 var(--fs-xs)/1.3 var(--font-mono);color:var(--text-dim);margin:0 0 var(--s5)}
.toc{border:1px solid var(--hairline);border-radius:var(--radius-card);background:var(--surface);padding:var(--s4) var(--s5);margin:var(--s5) 0 var(--s4)}
.toc-title{font:500 var(--fs-xs)/1 var(--font-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--text-dim);margin:0 0 var(--s3)}
.toc ol,.toc ul{margin:0;padding-left:1.25em;columns:2 16rem;column-gap:var(--s6)}
.toc ol{list-style:none;padding-left:0;counter-reset:toc}
.toc ol li{counter-increment:toc}
.toc ol li a::before{content:counter(toc,decimal-leading-zero);display:inline-block;width:2.5ch;margin-right:var(--s2);font:400 var(--fs-xs) var(--font-mono);color:var(--text-dim)}
.toc ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);columns:auto}
.toc li{margin:0 0 var(--s2);break-inside:avoid}
.toc a{display:inline-block;padding:var(--s1) 0;font-size:var(--fs-sm)}

/* FAQ: hairline separators, no boxes, a chevron from the icon set */
.faq-group{margin-top:var(--s7)}
.faq-group h2{margin:0 0 var(--s4)}
.faq-item{border-top:1px solid var(--hairline)}
.faq-item:last-child{border-bottom:1px solid var(--hairline)}
.faq-item summary{list-style:none;cursor:pointer;min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  padding:var(--s4) 0;font:500 var(--fs-md)/1.35 var(--font-sans);color:var(--text-strong)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"";flex:none;width:16px;height:16px;background:var(--text-dim);
  -webkit-mask:url(../icons/chevron-down.svg) center/16px no-repeat;mask:url(../icons/chevron-down.svg) center/16px no-repeat;transition:transform .25s var(--ease)}
.faq-item[open] summary::after{transform:rotate(180deg)}
.faq-item summary:hover::after{background:var(--text)}
.faq-answer{padding:0 0 var(--s5);color:var(--text-dim)}
.faq-answer p:last-child{margin-bottom:0}
.faq-answer strong{color:var(--text)}

.timeline{list-style:none;padding:0;margin:0;border-left:1px solid var(--hairline-strong)}
.timeline li{display:grid;grid-template-columns:6.5rem 1fr;gap:var(--s4);padding:var(--s3) 0 var(--s3) var(--s5);position:relative;margin:0}
.timeline li::before{content:"";position:absolute;left:-4px;top:calc(var(--s3) + .6em);width:7px;height:7px;background:var(--gray-500)}
.timeline-time{font:500 var(--fs-sm)/1.6 var(--font-mono);color:var(--text-strong);white-space:nowrap}
@media(max-width:520px){.timeline li{grid-template-columns:1fr;gap:var(--s1)}}

.list-not,.list-rules{list-style:none;padding:0}
.list-not li,.list-rules li{position:relative;padding-left:1.6em}
.list-not li::before,.list-rules li::before{content:"";position:absolute;left:0;top:.75em;width:.85em;height:1px;background:var(--red)}
.list-rules li::before{background:var(--green);width:6px;height:6px;top:.6em}
.rule-box{border:1px solid var(--hairline-strong);border-radius:var(--radius-card);padding:var(--s4) var(--s5);background:var(--surface-2);color:var(--text)}
.disclaimer{border:1px solid var(--hairline);padding:var(--s4);background:var(--surface);border-radius:var(--radius-card);margin-top:var(--s7);font-size:var(--fs-sm);color:var(--text-dim)}
.notfound{min-height:60vh;display:grid;align-items:center}
.notfound-actions{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center}
.outputs{padding-left:1.4em}
.outputs li{margin-bottom:var(--s3)}
.outputs strong{color:var(--text-strong)}
.operator{font-size:var(--fs-sm);color:var(--text-dim);margin-top:calc(-1 * var(--s2))}

/* data sources: one small table per dataset */
.ds-tablebox{border:1px solid var(--hairline);border-radius:var(--radius-card);background:var(--surface);overflow-x:auto;margin:0 0 var(--s4)}
.ds-table{font-size:var(--fs-sm)}
.ds-table th{width:9rem;vertical-align:top;white-space:nowrap}
.ds-table td{color:var(--text)}
.ds-table tr:last-child th,.ds-table tr:last-child td{border-bottom:0}
@media(max-width:520px){.ds-table th{width:6.5rem;white-space:normal}}
