/* Fix articles: one 42rem reading column, steps as a real numbered sequence, code and terminal blocks scroll inside themselves. */
.article { padding-block: 24px 64px; }
.article .wrap { max-width: 42rem; }
.crumbs { font-size: 0.9rem; color: var(--muted); margin-bottom: 18px; }
.crumbs a { color: var(--muted); }
.article h1 { font-size: clamp(1.9rem, 4.5vw, 2.6rem); letter-spacing: -0.015em; margin-top: 10px; }
.article .lede { margin-top: 16px; font-size: 1.12rem; color: var(--muted); }
.meta { margin-top: 14px; font-size: 0.88rem; color: var(--muted); display: flex; gap: 14px; flex-wrap: wrap; }
.meta code { color: var(--ink); }
.article h2 { font-size: 1.4rem; margin-top: 40px; margin-bottom: 12px; }
.article p, .article ul, .article ol { margin: 0 0 14px; }
.article ul, .article ol { padding-left: 1.3em; display: grid; gap: 8px; }
.article li > p { margin: 0; }
.article strong { font-weight: 600; }
.article :not(pre) > code { background: var(--surface); border: 1px solid var(--rule); border-radius: 4px; padding: 1px 5px; overflow-wrap: anywhere; }
.ui { font-weight: 600; }
pre.code { background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; padding: 12px 14px; overflow-x: auto; font-size: 0.82rem; line-height: 1.55; margin: 0 0 16px; }
pre.out { background: var(--term-bg); color: var(--term-ink); border-radius: 10px; padding: 14px 16px; overflow-x: auto; font-size: 0.8rem; line-height: 1.55; margin: 0 0 16px; }
pre.out .high { color: var(--sev-high); font-weight: 700; }
pre.out .medium { color: var(--sev-medium); font-weight: 700; }
pre.out .low { color: var(--sev-low); font-weight: 700; }
pre.out .dim { color: var(--term-dim); }
.callout { border-left: 3px solid var(--signal); background: var(--surface); padding: 12px 16px; border-radius: 0 8px 8px 0; margin: 0 0 16px; font-size: 0.95rem; }
.callout p:last-child { margin: 0; }
.next { margin-top: 44px; background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; padding: 20px 22px; display: grid; gap: 10px; }
.next h2 { margin: 0; font-size: 1.15rem; }
.next p { margin: 0; color: var(--muted); }
.next .cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.btn { display: inline-block; padding: 10px 16px; border-radius: 8px; font-weight: 600; text-decoration: none; border: 1px solid var(--accent); font-size: 0.95rem; }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-ghost { background: transparent; color: var(--accent); }

/* Fix list page */
.fix-list { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 14px; }
.fix-list li { background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 16px 18px; display: grid; gap: 6px; }
.fix-list a { font-weight: 600; font-size: 1.08rem; text-decoration: none; }
.fix-list a:hover { text-decoration: underline; }
.fix-list p { margin: 0; color: var(--muted); font-size: 0.95rem; }
.fix-list .sev { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--signal); font-weight: 700; }