/* Long reading pages (article.mjs): how Minda handles prompt injection and the privacy audit. hub.css's tokens and type scale:
   one reading column, a contents list beside it on a wide screen (above it on a narrow one), quotes ruled in violet, the audit's
   rows as a title over labelled lines. No motion of its own. */
.ar-hero { padding: clamp(150px, 18vh, 200px) 0 clamp(32px, 4vw, 56px); }
.ar-head { max-width: min(var(--hb-wide), calc(100% - 2 * var(--hb-gut))); }
.ar-h1 { margin-top: 28px; max-width: 18em; font-size: clamp(38px, 3.7vw, 56px); }
.ar-lede { margin-top: 24px; max-width: 40em; }
.ar-meta { margin-top: 16px; font-size: var(--hb-t-sm); line-height: 1.6; color: var(--hb-mut); }

.ar-body { padding-bottom: clamp(56px, 7vw, 96px); }
.ar-grid { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 46rem); gap: clamp(32px, 5vw, 80px); align-items: start; }
.ar-toc { position: sticky; top: calc(var(--hb-hdr) + 24px); max-height: calc(100vh - var(--hb-hdr) - 48px); overflow: auto; font-size: var(--hb-t-sm); line-height: 1.45; }
.ar-toc p { margin-bottom: 12px; font-size: var(--hb-t-lbl); color: var(--hb-mut); }
.ar-toc li + li { margin-top: 10px; }
.ar-toc a { color: var(--hb-mut-2); transition: color .15s; }
.ar-toc a:hover { color: var(--hb-fg); }

.ar-text { font-size: var(--hb-t-body); line-height: 1.7; color: var(--hb-mut-2); text-wrap: pretty; }
.ar-text section + section, .ar-text > h2 { margin-top: 56px; }
.ar-text h2 { font-size: clamp(24px, 2.4vw, 32px); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; color: var(--hb-fg); text-wrap: balance; }
.ar-text > h3, .ar-text section h3 { margin-top: 32px; font-size: var(--hb-t-h3); font-weight: 600; letter-spacing: -.015em; line-height: 1.3; color: var(--hb-fg); }
.ar-text :is(p, ul, ol, blockquote) { margin-top: 16px; }
.ar-text :is(ul, ol) li { position: relative; padding-left: 22px; }
.ar-text ul li::before { content: ''; position: absolute; left: 6px; top: .72em; width: 5px; height: 5px; border-radius: 50%; background: var(--hb-mut); }
.ar-text ol { counter-reset: ar; }
.ar-text ol li { counter-increment: ar; }
.ar-text ol li::before { content: counter(ar) '.'; position: absolute; left: 0; color: var(--hb-mut); font-variant-numeric: tabular-nums; }
.ar-text li + li { margin-top: 10px; }
.ar-text a { color: var(--hb-fg); text-decoration: underline; text-decoration-color: var(--hb-line-2); text-underline-offset: 3px; transition: text-decoration-color .15s; }
.ar-text a:hover { text-decoration-color: currentColor; }
.ar-text strong { font-weight: 600; color: var(--hb-fg); }
.ar-text em { font-style: italic; }
.ar-text code { padding: 1px 6px; border-radius: 6px; font: 500 .86em/1.4 ui-monospace, 'Cascadia Code', Consolas, monospace; color: var(--hb-fg); background: var(--hb-card-2); overflow-wrap: anywhere; }
.ar-text blockquote { padding: 2px 0 2px 20px; border-left: 2px solid var(--hb-vi); color: var(--hb-fg); }
.ar-text blockquote p { margin: 0; }
.ar-text blockquote cite { display: block; margin-top: 6px; font-size: var(--hb-t-lbl); font-style: normal; color: var(--hb-mut); }
.ar-lead { font-weight: 500; color: var(--hb-fg); }
.ar-note { padding: 16px 20px; border-radius: 16px; font-size: var(--hb-t-sm); line-height: 1.6; color: var(--hb-mut-2); background: var(--hb-card); box-shadow: inset 0 0 0 1px var(--hb-line); }
.ar-text > .ar-note + * { margin-top: 40px; }
.ar-not { padding-top: 16px; border-top: 1px solid var(--hb-line); }
.ar-small { font-size: var(--hb-t-sm); color: var(--hb-mut); }
.ar-sources li { font-size: var(--hb-t-sm); }

/* The audit's rows (renderMarkdown's records): a title, then each column as a label and its words */
.ar-text .rec { margin: 0; padding: 20px 0; border-top: 1px solid var(--hb-line); }
.ar-text :is(h2, h3, p, ul) + .rec { margin-top: 24px; }
.ar-text .rec + :is(h2, h3, p, ul) { margin-top: 40px; }
.ar-text .rec h3 { margin: 0; font-size: var(--hb-t-body); font-weight: 600; letter-spacing: -.012em; line-height: 1.4; color: var(--hb-fg); }
.ar-text .rec dl { display: grid; grid-template-columns: minmax(0, 10rem) minmax(0, 1fr); gap: 10px 24px; margin-top: 12px; font-size: var(--hb-t-sm); line-height: 1.6; }
.ar-text .rec dt { color: var(--hb-mut); }
.ar-text .rec dd { margin: 0; color: var(--hb-mut-2); }

@media (max-width: 960px) {
  .ar-grid { grid-template-columns: minmax(0, 1fr); }
  .ar-toc { position: static; max-height: none; padding: 16px 20px; border-radius: 16px; background: var(--hb-card); box-shadow: inset 0 0 0 1px var(--hb-line); }
}
@media (max-width: 560px) {
  .ar-text .rec dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .ar-text .rec dd + dt { margin-top: 10px; }
}