/* Shared chrome for the focused preview cards.
   Each card loads ../colors_and_type.css and ../tokens.css first, so every
   value shown below is the live token — not a copy of it. */

body{ margin:0; padding:40px 28px 64px }
.card-wrap{ max-width:1100px; margin:0 auto }

.card-head{ border-top:2px solid var(--ink); padding-top:12px; margin-bottom:32px;
            display:flex; justify-content:space-between; align-items:baseline; gap:20px; flex-wrap:wrap }
.card-head h1{ font-size:26px; max-width:none; letter-spacing:-.012em; margin-top:6px }
.card-head .src{ margin:0 }
.card-head .where{ font-family:var(--mono); font-size:11.5px; color:var(--ink-quiet); text-align:right }

h2.sec{ font-size:19px; margin:44px 0 4px }
h2.sec:first-of-type{ margin-top:0 }
p.note{ font-size:14px; color:var(--ink-prose); margin:6px 0 18px; max-width:70ch }

table{ width:100%; border-collapse:collapse; background:var(--evidence);
       border:1px solid var(--rule); border-radius:var(--r-card); overflow:hidden; margin:0 0 8px }
th{ text-align:left; font-family:var(--mono); font-size:10px; letter-spacing:var(--ls-label);
    text-transform:uppercase; color:var(--action); padding:11px 14px;
    border-bottom:1px solid var(--rule); background:var(--evidence-inset); font-weight:600 }
td{ padding:11px 14px; border-bottom:1px solid var(--rule-soft); font-size:13.5px; vertical-align:middle }
tr:last-child td{ border-bottom:0 }
td.t{ font-family:var(--mono); font-size:12px; color:var(--ink) }
td.n{ font-family:var(--mono); font-size:12px; color:var(--ink-quiet); font-variant-numeric:tabular-nums }

.sw{ width:44px; height:28px; border-radius:var(--r-ctrl); border:1px solid var(--rule); display:block }
.chip-row{ display:flex; flex-wrap:wrap; gap:12px; align-items:center }
.frame{ border:1px solid var(--rule); border-radius:var(--r-card); background:var(--evidence);
        padding:26px 24px; margin-bottom:16px }
.frame.dark{ background:var(--forest-deep); border-color:transparent }
.frame.ink{ background:var(--ink-band); border-color:transparent }
.caption{ font-family:var(--mono); font-size:11px; color:var(--ink-quiet); letter-spacing:.02em; margin:8px 0 0 }

.pass{ font-family:var(--mono); font-size:11px; color:var(--action); background:var(--status-held-bg);
       border:1px solid currentColor; border-radius:var(--r-bar); padding:2px 7px; letter-spacing:.06em }
.warn{ font-family:var(--mono); font-size:11px; color:var(--status-pending); background:var(--status-pending-bg);
       border:1px solid currentColor; border-radius:var(--r-bar); padding:2px 7px; letter-spacing:.06em }

.backlink{ display:inline-block; margin-top:44px; font-family:var(--mono); font-size:11.5px;
           letter-spacing:.06em; color:var(--action) }