@charset "UTF-8";
/* ==========================================================================
   Invelo — Design System QA page furniture
   NOT part of the design system. This lays the specimens out and labels them;
   nothing in here is a token, a component, or something a section template
   should ever use.

   It is a separate stylesheet on purpose. The QA page is built from HTML
   widgets that use these .qa-* classes, and on the WordPress side only
   invelo-global.css is enqueued — so without this file the swatch chips, the
   gradient bar, the spacing bars, the radius boxes, the container-boundary
   marker and every grid layout silently render as nothing. That is exactly
   what happened on the first live build.

   The plugin enqueues this ONLY on the QA page. dev/tools/build-qa.mjs inlines
   this same file into the standalone mirror, so the two cannot drift.
   ========================================================================== */

.qa-wrap { padding-block: 64px 96px; }
/* Section headings are real <h2>s and take the kit's H2 role. Only the rhythm
   and the rule above them belong to the QA page. */
.qa-h2 { margin: 72px 0 20px; padding-top: 24px; border-top: 1px solid var(--invelo-soft-border); }
.qa-sub { font: 500 13px/1.4 var(--invelo-font-body); letter-spacing:.08em; text-transform:uppercase;
          color: var(--invelo-text-soft); margin: 24px 0 12px; }
.qa-note { margin: 16px 0 0; font: 400 14px/1.6 var(--invelo-font-body); color: var(--invelo-text-soft); max-width: 78ch; }
.qa-dim { color: var(--invelo-text-soft); }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }

.qa-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.qa-swatch { display: flex; gap: 12px; align-items: center; }
.qa-swatch__chip { width: 54px; height: 54px; border-radius: var(--invelo-radius-sm);
                   border: 1px solid var(--invelo-soft-border); flex: 0 0 auto;
                   background-image: linear-gradient(45deg,#2a2a2a 25%,transparent 25%,transparent 75%,#2a2a2a 75%),
                                     linear-gradient(45deg,#2a2a2a 25%,transparent 25%,transparent 75%,#2a2a2a 75%);
                   background-size: 12px 12px; background-position: 0 0, 6px 6px; }
.qa-swatch__meta { display: grid; gap: 2px; font: 400 13px/1.35 var(--invelo-font-body); min-width: 0; }
.qa-swatch__meta strong { font-weight: 500; }

.qa-gradient-bar { height: 68px; border-radius: var(--invelo-radius-md); background: var(--invelo-brand-gradient); }
.qa-gradient-stops { display: flex; justify-content: space-between; margin-top: 8px; }
.qa-gradient-stops span { display: grid; gap: 2px; text-align: center; }

.qa-type { display: grid; grid-template-columns: 260px 1fr; gap: 28px; align-items: baseline;
           padding: 20px 0; border-bottom: 1px solid rgba(255,255,255,.07); }
.qa-type__spec { display: grid; gap: 3px; font: 400 12.5px/1.45 var(--invelo-font-body); color: var(--invelo-text-soft); }
.qa-type__spec strong { color: var(--invelo-text-primary); font-weight: 500; font-size: 13px; }
.qa-temp { color: var(--invelo-orange-4); font-style: normal; }
.qa-type__sample { min-width: 0; overflow: hidden; }

.qa-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.qa-radii .qa-radius { width: 118px; height: 92px; display: grid; place-content: center; gap: 2px;
                       text-align: center; background: var(--invelo-surface-elevated);
                       border: 1px solid var(--invelo-soft-border); }

.qa-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; align-items: start; }
.qa-cards--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.qa-cards .invelo-card > * + * { margin-top: 10px; }

.qa-spaces { display: grid; gap: 10px; }
.qa-space { display: grid; grid-template-columns: 190px 1fr auto; gap: 14px; align-items: center; }
.qa-space__bar { height: 14px; border-radius: 3px; background: var(--invelo-brand-gradient); }

.qa-boundary { position: relative; height: 76px; border: 1px dashed var(--invelo-orange-3);
               border-radius: var(--invelo-radius-sm); display: grid; place-items: center; }
.qa-boundary__label { font: 400 13px/1 var(--invelo-font-body); color: var(--invelo-orange-4); }

.qa-scene { margin-top: 16px; padding-block: 34px; border-radius: var(--invelo-radius-md); }
.qa-scene .invelo-container { padding-inline: 28px; }
.qa-scene > .invelo-container > * + * { margin-top: 10px; }

.qa-list { max-width: 80ch; color: var(--invelo-text-muted); font: 400 14px/1.65 var(--invelo-font-body); }
.qa-list li + li { margin-top: 8px; }

.invelo-form > * { max-width: 520px; }

@media (max-width: 767px) {
  .qa-type { grid-template-columns: 1fr; gap: 10px; }
  .qa-space { grid-template-columns: 130px 1fr auto; }
}

/* Nested-container proof (§10b). Outlines only — no padding of its own, so the
   measurement shows the gutter system and nothing else. */
.qa-nest { border: 1px dashed rgba(255, 255, 255, .22); border-radius: 8px; }
.qa-nest .qa-nest { border-color: rgba(250, 166, 26, .45); }
.qa-nest .qa-nest .qa-nest { border-color: rgba(240, 78, 35, .55); }
.qa-nest__readout { margin: 10px 0; color: var(--invelo-text-soft); }

/* Geometry table (§10). */
.qa-table { width: 100%; border-collapse: collapse; margin-top: 16px;
            font: 400 13px/1.5 var(--invelo-font-body); }
.qa-table th, .qa-table td { text-align: left; padding: 7px 12px 7px 0;
            border-bottom: 1px solid rgba(255, 255, 255, .08); }
.qa-table th { color: var(--invelo-text-soft); font-weight: 500;
            font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; }