/* Preview chrome only — NOT part of the design system.
 * Every card links ../colors_and_type.css first, then this file. Nothing here
 * introduces a color: the chrome is built from the system's own tokens so a
 * reviewer never mistakes scaffolding for brand. */

/* body carries no padding at all. Top padding on body would sit ABOVE the
   sticky nav (it is body's first child) and hold the bar off the top edge until
   it snapped to 0 on first scroll; side padding would inset the bar's own
   background and hairline, so the bar stopped short of the window edge instead
   of running full-bleed the way it does on brand-kit.html.
   Both belong on the shell, which is where the content is. */
body {
  padding: 0 0 6rem;
}

/* The gutter ladder is .page-container's, repeated verbatim so the shell's
   content lines up with the nav's — .ds-nav-inner IS a .page-container, and it
   is border-box, so this one has to be too. */
.pv-shell {
  box-sizing: border-box;
  max-width: var(--max-width-desktop);
  margin: 0 auto;
  padding: 4rem var(--gutter-base) 0;
}
@media (min-width: 768px)  { .pv-shell { padding-inline: var(--gutter-md); } }
@media (min-width: 1280px) { .pv-shell { padding-inline: var(--gutter-xl); } }

.pv-head {
  margin-bottom: 3.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--color-surface-quaternary);
}

/* The eyebrow used to clear the 3:1 large-text floor at its signature 32px;
   on the rebuilt #0A0A0B page #5F20FE is 2.94:1 and no longer does. Chrome
   eyebrows step to --color-hovered (8.41:1) to stay in-palette; the component
   itself is left as production ships it. See DESIGN.md sect. 10.5. */
.pv-head .eyebrow { font-size: var(--text-caption); letter-spacing: 0.08em;
                    text-transform: uppercase; margin-bottom: 0.75rem;
                    color: var(--color-hovered); }
.pv-head h1       { font-size: var(--text-heading-md);
                    line-height: var(--text-heading-md--line-height); }
.pv-head p        { max-width: 62ch; margin: 1rem 0 0;
                    color: var(--color-body-secondary-lighter);
                    font-size: var(--text-md); line-height: var(--leading-md); }

.pv-block            { margin-top: 3.5rem; }
.pv-block > h2       { font-size: var(--text-lg); line-height: var(--leading-lg);
                       margin-bottom: 0.5rem; }
.pv-block > .pv-note { max-width: 70ch; margin: 0 0 1.75rem;
                       color: var(--color-body-secondary-lighter);
                       font-size: var(--text-caption);
                       line-height: var(--leading-caption); }

.pv-grid       { display: grid; gap: 1rem; }
.pv-grid-2     { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
.pv-grid-3     { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.pv-grid-4     { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }

.pv-row        { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; }

/* Token label pairs */
.pv-label { display: block; color: var(--color-heading);
            font-size: var(--text-caption); font-weight: var(--font-weight-bold); }
/* Preview chrome recedes by size and family, not by contrast. Labels stay
   on the lighter secondary step (11.9:1); plain --color-body-secondary
   (#9595BB, 6.87:1 since the rebuild) is left to the metadata specimens. */
.pv-meta  { display: block; color: var(--color-body-secondary-lighter);
            font-family: var(--font-mono); font-size: 0.75rem;
            line-height: 1.4; word-break: break-all; }

/* Swatches */
.pv-swatch      { border-radius: var(--radius-md); overflow: hidden;
                  border: 1px solid var(--color-surface-quaternary); }
.pv-swatch-chip { height: 5rem; }
.pv-swatch-body { padding: 0.75rem; background: var(--color-surface-secondary); }

.pv-tile { padding: 1.25rem; border-radius: var(--radius-md);
           background: var(--color-surface-secondary);
           border: 1px solid var(--color-surface-quaternary); }

table.pv-table  { width: 100%; border-collapse: collapse;
                  font-size: var(--text-caption); }
.pv-table th    { text-align: left; padding: 0.75rem 1rem;
                  color: var(--color-body-secondary-lighter);
                  font-weight: var(--font-weight-bold);
                  border-bottom: 1px solid var(--color-surface-quaternary); }
.pv-table td    { padding: 0.75rem 1rem; vertical-align: middle;
                  border-bottom: 1px solid var(--color-surface-quaternary); }
.pv-table code  { font-family: var(--font-mono); font-size: 0.8125rem;
                  color: var(--color-hovered); }

.pv-warn { padding: 1rem 1.25rem; border-radius: var(--radius-sm);
           border: 1px solid var(--color-action);
           color: var(--color-body-secondary-lighter);
           font-size: var(--text-caption); line-height: var(--leading-caption); }
.pv-warn strong { color: var(--color-heading); }

.pv-back { display: inline-block; margin-bottom: 2rem;
           color: var(--color-body-secondary-lighter);
           font-size: var(--text-caption); text-decoration: none; }
.pv-back:hover { color: var(--color-hovered); }