/* ───────────── articles (/stati/) ─────────────
   Built on the site's style.css tokens: same dark background, lime accent, cards and radii. */
.art { width: min(760px, 100% - 32px); margin: 0 auto; padding: clamp(32px, 6vw, 72px) 0 0; }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 0 0 28px; padding: 0; list-style: none; font-size: 15px; font-weight: 600; color: var(--muted); }
.crumbs li + li::before { content: "/"; margin-right: 10px; color: #4A5562; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--text); }
.art h1 { margin: 0; font-size: clamp(36px, 6vw, 60px); line-height: 1.02; letter-spacing: -0.045em; font-weight: 850; text-wrap: balance; }
.art__meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 0; padding: 0; list-style: none; }
.art__meta li { padding: 7px 14px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); font-size: 14px; font-weight: 600; color: var(--muted); }
.art__lead { margin: 26px 0 0; font-size: clamp(19px, 2.2vw, 22px); line-height: 1.5; color: var(--text); text-wrap: pretty; }

.art h2 { margin: clamp(48px, 7vw, 72px) 0 16px; font-size: clamp(28px, 4vw, 38px); line-height: 1.08; letter-spacing: -0.035em; font-weight: 850; text-wrap: balance; scroll-margin-top: 90px; }
.art h3 { margin: 32px 0 10px; font-size: 21px; letter-spacing: -0.02em; }
.art p, .art li { color: #C9D1D9; }
.art p { margin: 0 0 16px; }
.art ul, .art ol { margin: 0 0 18px; padding-left: 24px; }
.art li { margin: 6px 0; }
.art li::marker { color: var(--accent); }
.art strong { color: var(--text); }
.art a:not(.btn) { color: var(--accent); text-underline-offset: 3px; }
.art code { padding: 2px 7px; border-radius: 7px; background: var(--card-2); color: var(--accent); font: 600 0.88em "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; }

/* key points right under the title */
.tldr { margin: 34px 0 0; padding: 24px 26px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--accent); }
.tldr .eyebrow { margin-bottom: 10px; }
.tldr ul { margin: 0; padding-left: 22px; }
.tldr li { color: var(--text); margin: 8px 0; }

/* contents */
.toc { margin: 22px 0 0; padding: 20px 24px; border-radius: var(--radius); background: var(--bg-2); border: 1px solid var(--line); }
.toc p { margin: 0 0 8px; font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.toc ol { margin: 0; padding-left: 22px; }
.toc li { margin: 6px 0; font-size: 16px; }
.toc a { color: var(--text) !important; text-decoration: none; }
.toc a:hover { color: var(--accent) !important; }

/* wrong vs right */
.vs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 22px 0; }
.vs__col { padding: 22px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); }
.vs__col h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 18px; }
.vs__col h3::before { content: ""; flex: none; width: 28px; height: 28px; border-radius: 9px; background: center/16px no-repeat; }
.vs__col--bad { border-top: 3px solid var(--fail); }
.vs__col--bad h3::before { background-color: rgba(255, 107, 107, 0.15); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 7l10 10M17 7L7 17' fill='none' stroke='%23FF6B6B' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E"); }
.vs__col--good { border-top: 3px solid var(--pass); }
.vs__col--good h3::before { background-color: rgba(61, 220, 132, 0.13); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%233DDC84' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.vs__col ul { margin: 0; padding-left: 20px; }
.vs__col li { font-size: 16px; }

/* numbered steps */
.steps-list { display: grid; gap: 12px; margin: 22px 0; padding: 0; list-style: none; counter-reset: st; }
.steps-list > li { position: relative; margin: 0; padding: 22px 24px 22px 76px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); counter-increment: st; color: #C9D1D9; }
.steps-list > li::before { content: counter(st); position: absolute; left: 22px; top: 20px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--accent); color: var(--on-accent); font-weight: 850; font-size: 18px; }
.steps-list b { display: block; margin-bottom: 4px; color: var(--text); font-size: 19px; letter-spacing: -0.01em; }

/* notes */
.note { margin: 22px 0; padding: 18px 22px; border-radius: 18px; background: rgba(212, 255, 58, 0.06); border-left: 3px solid var(--accent); }
.note p { margin: 0; color: var(--text); }
.note--warn { background: rgba(255, 181, 71, 0.08); border-left-color: var(--warn); }

/* code */
.code { margin: 18px 0 22px; border-radius: 18px; background: #05070A; border: 1px solid var(--line); overflow: hidden; }
.code__bar { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background: var(--card-2); font-size: 13px; font-weight: 700; color: var(--muted); }
.code pre { margin: 0; padding: 16px 18px; overflow-x: auto; font: 13.5px/1.6 "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; color: #E6EDF3; tab-size: 2; }
.code .c { color: #6B7783; }
.code .k { color: var(--accent); }
.code .s { color: #FFB547; }

/* fines */
.fines { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 22px 0 10px; }
.fine { padding: 22px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); }
.fine b { display: block; font-size: clamp(24px, 3vw, 30px); line-height: 1.05; letter-spacing: -0.03em; color: var(--warn); }
.fine span { display: block; margin-top: 8px; font-size: 15px; color: var(--muted); }
.fine em { display: block; margin-top: 10px; font-style: normal; font-size: 13px; font-weight: 700; color: #6F7B87; }
.fines__note { font-size: 14px !important; color: var(--muted) !important; }

/* inline check — same field as on the home page */
.cta { margin: clamp(40px, 6vw, 56px) 0; padding: clamp(24px, 4vw, 36px); border-radius: 30px; background: radial-gradient(500px 260px at 100% 0%, rgba(212, 255, 58, 0.14), transparent 70%), var(--card); border: 1px solid rgba(212, 255, 58, 0.35); }
.cta h2, .cta .cta__title { margin: 0 0 8px; font-size: clamp(26px, 3.6vw, 34px); line-height: 1.08; letter-spacing: -0.03em; font-weight: 850; color: var(--text); }
.cta > p { margin: 0; color: var(--muted); }
.cta .check { margin: 22px 0 0; max-width: none; }
.cta .check__row { background: var(--bg); }
.cta .check__note { margin-top: 12px; font-size: 14px; }

.sources { margin: 40px 0 0; padding: 22px 24px; border-radius: var(--radius); background: var(--bg-2); border: 1px solid var(--line); }
.sources p { margin: 0 0 8px; font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.sources ul { margin: 0; padding-left: 20px; }
.sources li { font-size: 15px; color: var(--muted); }
.disclaimer { margin: 18px 0 0 !important; font-size: 14px; color: #6F7B87 !important; }

/* article list */
.cards { display: grid; gap: 14px; margin: 32px 0 0; }
.card-link { display: block; padding: 26px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); text-decoration: none; transition: border-color 0.25s, transform 0.25s var(--ease); }
.card-link:hover { border-color: rgba(212, 255, 58, 0.45); transform: translateY(-3px); }
.card-link h2 { margin: 0 0 8px; font-size: clamp(22px, 3vw, 28px); line-height: 1.12; letter-spacing: -0.025em; }
.card-link p { margin: 0; color: var(--muted) !important; font-size: 16px; }
.card-link span { display: inline-block; margin-top: 14px; color: var(--accent); font-weight: 700; font-size: 15px; }

@media (max-width: 640px) {
  .vs, .fines { grid-template-columns: 1fr; }
  .steps-list > li { padding: 70px 20px 20px; }
  .steps-list > li::before { left: 20px; top: 18px; }
  .code pre { font-size: 12.5px; }
}

/* list-shaped components inside the article lose the text-list indents and markers */
.art .crumbs, .art .art__meta, .art .steps-list { padding: 0; }
.art .crumbs li, .art .art__meta li { margin: 0; }
.art .crumbs li::marker, .art .art__meta li::marker, .art .steps-list > li::marker { content: none; }
.art .crumbs a { color: var(--muted); text-decoration: none; }
.art .crumbs a:hover { color: var(--text); }
.art .crumbs [aria-current] { color: var(--text); }
/* code inside the dark block is plain text, not the inline chip */
.code pre code { padding: 0; border-radius: 0; background: none; color: inherit; font: inherit; }
.fine b { font-size: clamp(22px, 2.6vw, 26px); white-space: nowrap; }