/* Swap recovery guide — same-origin, CSP-safe. Uses shared theme tokens. */
.rec-wrap { width: min(var(--page-width, 960px), 100%); margin: 0 auto; padding: clamp(28px, 5vw, 56px) var(--page-inset, 20px) 72px; }
.rec-intro { max-width: 760px; margin-bottom: clamp(24px, 4vw, 40px); }
.rec-eyebrow { display: inline-block; color: var(--accent); font: 600 11px/1 var(--mono); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 14px; }
.rec-intro h1 { font-family: var(--display); margin: 0 0 14px; line-height: 1.1; }
.rec-intro h1 .z { color: var(--accent); }
.rec-lede { color: var(--muted); font-size: 17px; line-height: 1.7; margin: 0; }
.rec-wrap h2 { font-family: var(--display); font-size: clamp(20px, 3vw, 26px); margin: 40px 0 6px; }
.rec-wrap h2 .num { color: var(--accent); font: 600 15px var(--mono); margin-right: 10px; vertical-align: 2px; }
.rec-wrap h3 { font-size: 16px; margin: 22px 0 6px; }
.rec-wrap p, .rec-wrap li { color: var(--muted); font-size: 15px; line-height: 1.7; }
.rec-wrap strong { color: var(--ink); }
.rec-wrap ul, .rec-wrap ol { padding-left: 22px; margin: 8px 0; }
.rec-wrap li { margin: 5px 0; }
.rec-wrap code { font: 500 13px var(--mono); background: var(--input, var(--surface)); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; color: var(--ink); }
.rec-wrap pre { background: var(--surface); border: 1px solid var(--line); border-left: 2px solid var(--accent); border-radius: 10px; padding: 14px 16px; overflow-x: auto; margin: 12px 0; }
.rec-wrap pre code { background: none; border: 0; padding: 0; color: var(--ink); font-size: 13px; line-height: 1.6; white-space: pre; }
.rec-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; margin: 14px 0; }
.rec-note { border-left: 2px solid var(--accent); }
.rec-warn { border-left: 2px solid var(--warning, #e0a63b); }
.rec-card p:first-child { margin-top: 0; } .rec-card p:last-child { margin-bottom: 0; }
.rec-card .tag { display: inline-block; font: 600 10.5px var(--mono); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; color: var(--accent); }
.rec-warn .tag { color: var(--warning, #e0a63b); }
.rec-table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 14px; }
.rec-table th, .rec-table td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); color: var(--muted); vertical-align: top; }
.rec-table th { color: var(--ink); font: 600 12px var(--mono); text-transform: uppercase; letter-spacing: .05em; }
.rec-table td code { font-size: 12px; }
.rec-toc { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px 20px; margin: 0 0 8px; }
.rec-toc ol { margin: 6px 0 0; }
.rec-toc a { color: var(--ink); text-decoration: none; }
.rec-toc a:hover { color: var(--accent); }
