/* Shared chrome for the SIGA design-system preview cards.
   Each card links ../colors_and_type.css + ../tokens.css + ../assets/siga.css
   (the real product runtime) and then this file for review-only framing.
   Nothing here introduces a colour outside the contract. */

body {
  margin: 0;
  padding: 28px 32px 64px;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
}

.pv-head { max-width: 1120px; margin: 0 0 22px; }
.pv-eyebrow {
  font-family: var(--font-display);
  font-size: 11px; font-weight: 600; letter-spacing: 0.085em;
  text-transform: uppercase; color: var(--muted-ink);
}
.pv-head h1 { margin-top: 6px; font-size: 21px; }
.pv-head p {
  margin: 7px 0 0; font-size: 13px; color: var(--muted-ink);
  max-width: 72ch; line-height: 1.55;
}
.pv-src {
  margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px;
  font-family: var(--font-mono); font-size: 11px;
}
.pv-src span {
  padding: 2px 7px; border-radius: 4px;
  background: var(--subtle); border: 1px solid var(--border); color: var(--muted-ink);
}

.pv-wrap { max-width: 1120px; display: flex; flex-direction: column; gap: 18px; }

.pv-sect { }
.pv-sect > h2 { font-size: 14px; margin-bottom: 4px; }
.pv-sect > .pv-note {
  font-size: 12.5px; color: var(--muted-ink); margin: 0 0 12px; max-width: 72ch; line-height: 1.5;
}

/* swatch grid */
.pv-swatches { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 900px) { .pv-swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.sw {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface);
}
.sw__chip { height: 62px; border-bottom: 1px solid var(--border); }
.sw__meta { padding: 9px 11px 11px; }
.sw__name { font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-strong); }
.sw__role { font-size: 11.5px; color: var(--muted-ink); margin-top: 3px; line-height: 1.4; }
.sw__ratio {
  font-family: var(--font-mono); font-size: 11px; color: var(--muted-ink);
  margin-top: 5px; display: block;
}

/* a text-on-fill proof block */
.proof {
  border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 13px 15px; font-size: 13px;
}
.proof b { font-weight: 600; }
.proof .m { font-family: var(--font-mono); font-size: 11.5px; opacity: 0.85; display: block; margin-top: 4px; }

/* spec list */
.spec { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 8px 16px; align-items: baseline; }
.spec dt { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted-ink); }
.spec dd { margin: 0; font-size: 13px; color: var(--fg-strong); }
@media (max-width: 700px) { .spec { grid-template-columns: minmax(0, 1fr); } }

/* frame that loads a preserved source file */
.pv-frame {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface);
}
.pv-frame__bar {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; border-bottom: 1px solid var(--border); background: var(--subtle);
}
.pv-frame__name { font-family: var(--font-display); font-size: 13px; font-weight: 600; color: var(--fg-strong); }
.pv-frame__path { font-family: var(--font-mono); font-size: 11px; color: var(--muted-ink); margin-left: auto; }
.pv-frame iframe { display: block; width: 100%; height: 620px; border: 0; background: var(--surface); }
.pv-frame img { display: block; width: 100%; height: auto; }

.pv-swap { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }