/* Clean & Preview uses the shared apex-derived application tokens. */
main.preview-page { max-width:1120px; padding:2.25rem 2.25rem 3rem; }
.preview-page h1,.clean-progress h1 { font-family:var(--font-sans);font-size:2.25rem;letter-spacing:-.07rem;line-height:1.2;margin:0 0 .8rem; }
.preview-steps { display:flex;align-items:center;gap:1rem;font-size:.75rem;color:var(--ink-soft);margin-bottom:2.25rem; }
.preview-steps a { color:inherit; }
.preview-eyebrow { font-size:.7rem;letter-spacing:.11rem;text-transform:uppercase;font-weight:700;color:var(--primary);margin:0 0 .65rem; }
.preview-summary { display:flex;gap:2rem;margin:1.8rem 0;padding:1.3rem 0;border-block:1px solid var(--grid-line); }
.preview-summary>div { display:flex;align-items:baseline;gap:.65rem; }
.preview-summary strong { color:var(--primary);font-size:1.6rem;font-weight:600; }
.preview-summary span { font-size:.75rem;color:var(--ink-soft); }
.preview-panel { background:var(--surface);border:1px solid var(--grid-line);border-radius:6px;overflow:hidden; }
.preview-table-head { display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.25rem 1.4rem;border-bottom:1px solid var(--grid-line); }
.preview-table-head strong { overflow-wrap:anywhere; }
.preview-table-head p { font-size:.7rem;color:var(--ink-soft);margin:.25rem 0 0; }
.preview-badge { white-space:nowrap;color:var(--primary);background:var(--primary-light);padding:.3rem .6rem;font-size:.7rem;border-radius:3px; }
.preview-scroll { overflow-x:auto; }
.preview-scroll:focus-visible { outline:2px solid var(--primary);outline-offset:-3px; }
.preview-table { position:relative;min-width:100%;width:max-content; }
.preview-table table { margin:0;border-collapse:collapse;width:100%; }
.preview-table th,.preview-table td { padding:.8rem 1rem;border-bottom:1px solid var(--grid-line);text-align:left;white-space:nowrap;max-width:280px;overflow:hidden;text-overflow:ellipsis; }
.preview-table thead th { font:600 .65rem var(--font-sans);letter-spacing:.05rem;text-transform:uppercase;color:var(--ink-soft);background:var(--bg); }
.preview-table td { font: .75rem/1.5 var(--font-mono); }
.preview-table td.preview-cell-changed { background:var(--primary-light); }
.preview-table td.preview-cell-warning { background:#faf8f2; }
.preview-table td.preview-cell-error { background:#faf0ee; }
.preview-table tbody th { font-size:.65rem;color:var(--ink-soft);font-weight:400; }
.preview-fade::after { content:"";position:absolute;bottom:0;left:0;right:0;height:140px;background:linear-gradient(transparent,var(--surface) 95%);pointer-events:none; }
.preview-caption { padding:.8rem 1.4rem 1.1rem;font-size:.7rem;color:var(--ink-soft);margin:0; }
.preview-actions { margin-top:1.5rem;display:flex;justify-content:space-between;align-items:center;gap:2rem; }
.preview-actions p { max-width:470px;font-size:.8rem;color:var(--ink-soft); }
.preview-actions .button { white-space:nowrap; }
.preview-actions .button span { margin-left:1rem; }
.clean-progress[hidden] { display:none; }
.clean-progress { padding:1rem 0; }
.preview-wait { margin:2rem 0;background:var(--surface);border:1px solid var(--grid-line);border-radius:6px;position:relative;overflow:hidden; }
.preview-wait span { display:block;height:52px;border-bottom:1px solid var(--grid-line);background:linear-gradient(90deg,transparent 15%,var(--grid-line) 15%,var(--grid-line) calc(15% + 1px),transparent calc(15% + 1px)); }
.preview-wait::after { content:"";position:absolute;inset:0;background:linear-gradient(transparent,var(--bg)); }
@media(max-width:700px) { main.preview-page { padding:1.5rem 1.25rem; }.preview-page h1,.clean-progress h1{font-size:1.75rem}.preview-steps{gap:.5rem;font-size:.65rem}.preview-summary{justify-content:space-between;gap:.7rem}.preview-summary>div{display:block}.preview-summary span{display:block;font-size:.65rem}.preview-table-head{align-items:flex-start;padding:1rem;flex-wrap:wrap}.preview-actions{flex-direction:column;align-items:stretch;gap:.5rem}.preview-actions .button{text-align:center} }

header.app-nav[hidden] { display:none; }

.preview-comparison { display:flex;justify-content:space-between;padding:.6rem 1.4rem;font-size:.75rem;color:var(--ink-soft); }
.preview-comparison[hidden] { display:none; }
.preview-compare-stage { position:relative; }
.preview-table .preview-before { position:absolute;top:0;left:0;table-layout:fixed;background:var(--surface);pointer-events:none; }
.preview-divider { position:absolute;top:0;width:28px;transform:translateX(-50%);z-index:2;cursor:ew-resize;touch-action:none;outline:none; }
.preview-divider::before { content:"";position:absolute;top:0;bottom:0;left:13px;width:2px;background:var(--primary); }
.preview-divider span { position:absolute;top:45%;left:0;width:28px;height:36px;border:1px solid var(--primary);border-radius:14px;background:var(--surface);color:var(--primary);display:grid;place-items:center;box-shadow:0 1px 5px #0002; }
.preview-divider:focus-visible span { outline:2px solid var(--primary);outline-offset:3px; }

.preview-steps strong, .preview-steps [aria-current="step"] { font-weight:800; color:var(--primary); }