/* "How it works": a single quiet column. Shares the tokens in style.css. */

header.top { display: flex; align-items: center; justify-content: space-between; max-width: 720px; }
.brand { color: var(--text); text-decoration: none; font-size: 1.25rem; display: inline-flex; align-items: center; gap: var(--s2); }
.tag {
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; color: var(--accent);
  border: 1px solid currentColor; border-radius: var(--radius-sm); padding: 1px 6px;
}
.back { color: var(--muted); text-decoration: none; font-size: 0.9rem; }
.back:hover { color: var(--accent); }

.article { max-width: 720px; margin: 0 auto; padding-bottom: var(--s7); }
.article h1 { font-size: 2.2rem; font-weight: 300; letter-spacing: -0.02em; margin: var(--s6) 0 var(--s3); }
.lede { font-size: 1.1rem; color: var(--muted); margin: 0 0 var(--s6); }

.article section { border-top: 1px solid var(--border); padding: var(--s6) 0 var(--s4); }
.article .label { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.1em; color: var(--accent); margin: 0; }
.article h2 { font-size: 1.6rem; font-weight: 400; margin: var(--s1) 0 var(--s4); }
.article h3 { font-size: 1rem; font-weight: 600; margin: var(--s5) 0 var(--s2); }
.article p { margin: 0 0 var(--s3); max-width: 64ch; }

.facts { list-style: none; margin: var(--s3) 0 var(--s4); padding: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); }
.facts li { display: grid; grid-template-columns: 9rem 1fr; gap: var(--s3); padding: var(--s2) var(--s3); border-bottom: 1px solid var(--border); font-size: 0.92rem; }
.facts li:last-child { border-bottom: 0; }
.facts span { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); padding-top: 2px; }

.sources { border-top: 1px solid var(--border); padding-top: var(--s4); font-size: 0.82rem; color: var(--muted); }

@media (max-width: 600px) {
  .facts li { grid-template-columns: 1fr; gap: 0; }
}
.draft { background: var(--warn-bg); color: var(--warn-text); padding: var(--s2) var(--s3); border-radius: var(--radius-sm); font-size: 0.88rem; }

[hidden] { display: none !important; }
.top-right { display: flex; align-items: center; gap: var(--s4); }
.lang-switch { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; padding: 2px; }
.lang-switch button {
  background: transparent; color: var(--muted); padding: 3px 10px; border-radius: 999px;
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.06em;
}
.lang-switch button:hover:not(:disabled) { color: var(--text); box-shadow: none; }
.lang-switch button[aria-pressed="true"] { background: var(--ink); color: var(--ink-text); }