/* =============================================================
   pages/veloque-ux-ui.css — layout pass for /projects/veloque/ux-ui
   ONLY loaded by that page, ONLY applies inside `.vq-page--uxui`.

   Purpose: re-lay the chapter on the wide rail (--vq-page-max 1600px)
   using the Augment-derived structural vocabulary documented in
   docs/veloque-augment-reference.md:
     · full-bleed section + inner rail + hairline divider
     · hairline grids (gap:1px, zero radius, zero shadow, no cards)
     · asymmetric media+text rows (2fr/3fr, 5fr/7fr) — never 50/50
     · stat strips with border-block and mono tabular numerals
     · four-beat opener: eyebrow → h2 → one-sentence lead → full grid
     · mono for every label, caption, index and provenance line

   Everything here is additive. veloque.css is never edited; each
   rule below is scoped to `.vq-page--uxui` so no other Veloque page
   is affected. New components use the `.vqx-` prefix.
   ============================================================= */

.vq-page--uxui {
  /* Hairline at 11% white — the reference's --s-rule. Slightly
     stronger than --vq-border (8%) because on this page the rule
     IS the structure: there are no cards to fall back on. */
  --vqx-rule:      rgba(255, 255, 255, 0.11);
  --vqx-rule-soft: rgba(255, 255, 255, 0.07);
  --vqx-cell-pad:  clamp(24px, 2.2vw, 40px);
  --vqx-row-gap:   clamp(32px, 4vw, 72px);
  --vqx-lead-max:  768px;
}

/* ── Rail ─────────────────────────────────────────────────────
   .vq-detail already caps at --vq-page-max and is left-aligned
   next to the sidebar. Nothing to change; the grids below simply
   stop clamping themselves to the old 1280 measure. */

/* ── Four-beat section opener ────────────────────────────────
   Lead paragraph rides a narrower measure than the body stream so
   the opening sentence reads as a lead, not as prose. */
.vq-page--uxui .vqx-lead {
  font-size:     clamp(17px, 1.35vw, 21px);
  line-height:   1.55;
  color:         var(--vq-text-mid);
  max-width:     var(--vqx-lead-max);
  margin-bottom: 8px;
}

/* Mono provenance / caption line (pattern D habit: always state
   where a number came from). */
.vq-page--uxui .vqx-cap {
  font-family:    var(--font-mono);
  font-size:      var(--fs-11);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          var(--vq-text-muted);
  margin-top:     clamp(40px, 5vw, 64px);
}

/* ── vqx-grid — the signature hairline grid ──────────────────
   1px rules BETWEEN cells (parent background showing through the
   gap) and a 1px frame around the block. No radius, no shadow, no
   per-cell background: the page black is the cell surface. */
.vq-page--uxui .vqx-grid {
  display:    grid;
  gap:        1px;
  background: var(--vqx-rule);
  border:     1px solid var(--vqx-rule);
  margin-top: clamp(40px, 4vw, 56px);
  list-style: none;
  padding:    0;
}

.vq-page--uxui .vqx-grid > * {
  background: var(--vq-bg);
  padding:    var(--vqx-cell-pad);
  margin:     0;
  border:     none;
  transition: background 0.18s ease-out;
}

.vq-page--uxui .vqx-grid > *:hover {
  background: var(--vq-surface);
}

/* Column counts, re-tuned for the 1600px rail. */
.vq-page--uxui .vqx-grid--2 { grid-template-columns: 1fr; }
.vq-page--uxui .vqx-grid--3 { grid-template-columns: 1fr; }
.vq-page--uxui .vqx-grid--4 { grid-template-columns: 1fr; }

@media (min-width: 768px) {
  .vq-page--uxui .vqx-grid--2,
  .vq-page--uxui .vqx-grid--3,
  .vq-page--uxui .vqx-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1180px) {
  .vq-page--uxui .vqx-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1280px) {
  .vq-page--uxui .vqx-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Orphan guard: an odd trailing cell spans the leftover columns
   instead of sitting alone in a half-empty row. Only applies where
   the item count and the column count actually disagree. */
@media (min-width: 768px) and (max-width: 1179.98px) {
  /* 3 items at 2-up -> 2 + 1(span 2) */
  .vq-page--uxui .vqx-grid--3.vqx-grid--fill-last > *:last-child { grid-column: span 2; }
}

@media (min-width: 768px) {
  .vq-page--uxui .vqx-grid--4.vqx-grid--fill-last > *:last-child { grid-column: span 2; }
}

/* ── vqx-row — asymmetric media + text (pattern C) ───────────
   Never 50/50. Collapses below 1024px with the media below text. */
.vq-page--uxui .vqx-row {
  display:    grid;
  gap:        var(--vqx-row-gap);
  margin-top: clamp(40px, 4vw, 56px);
  align-items: start;
}

@media (min-width: 1024px) {
  .vq-page--uxui .vqx-row--23 { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .vq-page--uxui .vqx-row--32 { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .vq-page--uxui .vqx-row--57 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

/* ── vqx-stats — pattern D metric strip ──────────────────────
   Rules top and bottom only. No cards, no fills — the numerals sit
   directly on the page in mono with tabular figures. */
.vq-page--uxui .vqx-stats,
.vq-page--uxui .vq-stat-strip {
  display:               grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:                   clamp(28px, 3vw, 48px) clamp(24px, 3vw, 48px);
  background:            transparent;
  border:                none;
  border-block:          1px solid var(--vqx-rule);
  padding-block:         clamp(32px, 3.4vw, 48px);
  margin:                20px 0 0;
  overflow:              visible;
}

@media (min-width: 768px) {
  .vq-page--uxui .vqx-stats,
  .vq-page--uxui .vq-stat-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1180px) {
  .vq-page--uxui .vqx-stats--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.vq-page--uxui .vqx-stat,
.vq-page--uxui .vq-stat {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  background:     transparent;
  padding:        0;
  gap:            14px;
}

.vq-page--uxui .vqx-stat__value,
.vq-page--uxui .vq-stat__value {
  font-family:      var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size:        clamp(36px, 4.4vw, 64px);
  font-weight:      400;
  line-height:      1;
  letter-spacing:   -0.02em;
  color:            var(--vq-text);
}

.vq-page--uxui .vqx-stat__label,
.vq-page--uxui .vq-stat__label {
  font-family:    var(--font-mono);
  font-size:      var(--fs-11);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          var(--vq-text-muted);
  line-height:    1.5;
}

/* ── Cell internals (shared by every hairline grid on the page) ── */
.vq-page--uxui .vqx-cell__index {
  display:        block;
  font-family:    var(--font-mono);
  font-size:      var(--fs-11);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          var(--vq-text-muted);
  margin-bottom:  16px;
}

.vq-page--uxui .vqx-cell__title {
  font-family:    var(--font-headings);
  font-size:      clamp(19px, 1.5vw, 24px);
  font-weight:    500;
  line-height:    1.2;
  letter-spacing: -0.014em;
  color:          var(--vq-text);
  margin:         0 0 12px;
}

.vq-page--uxui .vqx-cell__body {
  font-family: var(--font-text);
  font-size:   var(--fs-15);
  line-height: 1.6;
  color:       var(--vq-text-mid);
  margin:      0;
  max-width:   62ch;
}

.vq-page--uxui .vqx-cell__body strong { color: var(--vq-text); font-weight: 500; }
.vq-page--uxui .vqx-cell__body em     { font-style: italic; color: var(--vq-text); }
.vq-page--uxui .vqx-cell__body + .vqx-cell__body { margin-top: 12px; }

/* =============================================================
   01 — Intro: four-beat opener + 2fr/3fr row + stat strip
   ============================================================= */
.vq-page--uxui .vqx-toc {
  list-style: none;
  margin:     0;
  padding:    0;
  border-top: 1px solid var(--vqx-rule);
}

.vq-page--uxui .vqx-toc li { margin: 0; }

.vq-page--uxui .vqx-toc a {
  display:         flex;
  align-items:     baseline;
  gap:             clamp(12px, 1.4vw, 24px);
  padding:         14px 0;
  border-bottom:   1px solid var(--vqx-rule-soft);
  font-family:     var(--font-mono);
  font-size:       var(--fs-13);
  letter-spacing:  0.06em;
  color:           var(--vq-text-muted);
  text-decoration: none;
  min-height:      44px;
  transition:      color 0.18s ease-out;
}

.vq-page--uxui .vqx-toc a:hover,
.vq-page--uxui .vqx-toc a:focus-visible { color: var(--vq-text); }

.vq-page--uxui .vqx-toc__num {
  flex: 0 0 auto;
  font-size: var(--fs-11);
  letter-spacing: 0.2em;
  /* --vq-text-dim (#6B6B6B) is 3.9:1 on black and fails AA at this
     size; --vq-text-muted (#8A8A8A) is 5.9:1. */
  color: var(--vq-text-muted);
}

/* =============================================================
   02 — Benchmark: full-rail plot + hairline takeaway rail
   ============================================================= */
@media (min-width: 1180px) {
  /* Plot 7fr / docked card 5fr — asymmetric, and the plot no longer
     grows to an absurd height now that the rail is 1600px wide. */
  .vq-page--uxui .vq-bench__plot { aspect-ratio: 16 / 8.5; }
  .vq-page--uxui .vq-bench__card { flex: 0 0 360px; width: 360px; }
}

/* The pinned horizontal takeaway rail: it used 100vw + a
   -50vw margin, which is wrong here because the rail is left-aligned
   next to the sidebar rather than centred in the viewport. Keeping it
   inside the rail also lets the wider viewport show more of the
   track. GSAP measures scrollWidth/clientWidth at runtime, so this is
   transparent to the pin logic. */
.vq-page--uxui .vq-takeaway-scroller {
  width:       100%;
  margin-left: 0;
}

.vq-page--uxui .vq-takeaway-track {
  padding:    0;
  gap:        1px;
  background: var(--vqx-rule);
}

.vq-page--uxui .vq-takeaway-track .vq-takeaway {
  background: var(--vq-bg);
  padding:    var(--vqx-cell-pad);
  width:      min(460px, 84vw);
}

/* =============================================================
   03 — SEO / IA: 2fr/3fr hairline rows, index left, prose right
   ============================================================= */
.vq-page--uxui .vqx-ia {
  margin-top: clamp(40px, 4vw, 56px);
  border-top: 1px solid var(--vqx-rule);
}

.vq-page--uxui .vqx-ia__row {
  display:       grid;
  gap:           clamp(16px, 2.4vw, 56px);
  padding-block: clamp(32px, 3.4vw, 56px);
  border-bottom: 1px solid var(--vqx-rule);
}

@media (min-width: 1024px) {
  .vq-page--uxui .vqx-ia__row { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
}

.vq-page--uxui .vqx-ia__head { align-self: start; }

@media (min-width: 1024px) {
  .vq-page--uxui .vqx-ia__head {
    position: sticky;
    top:      104px;
  }
}

.vq-page--uxui .vqx-ia__head .vq-subhead {
  margin-top:    0;
  margin-bottom: 0;
  font-size:     clamp(21px, 1.9vw, 30px);
}

.vq-page--uxui .vqx-ia__body > .vq-section__body { margin-bottom: 0; }
.vq-page--uxui .vqx-ia__body > .vq-section__body + .vq-section__body { margin-top: 16px; }
.vq-page--uxui .vqx-ia__body > .vq-numbered { margin-top: 24px; }

/* =============================================================
   04 — Wireframes: three variants side by side on the wide rail
   ============================================================= */
@media (min-width: 1200px) {
  .vq-page--uxui .vq-wf__tabs { display: none; }

  .vq-page--uxui .vq-wf__stage {
    display:               grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap:                   1px;
    background:            var(--vqx-rule);
    border:                1px solid var(--vqx-rule);
  }

  .vq-page--uxui .vq-wf__panel,
  .vq-page--uxui .vq-wf__panel.is-active {
    display:    flex;
    flex-direction: column;
    gap:        20px;
    background: var(--vq-bg);
    padding:    var(--vqx-cell-pad);
    border-top: none;
  }

  .vq-page--uxui .vq-wf__panel--win { padding-top: var(--vqx-cell-pad); }

  .vq-page--uxui .vq-wf__media {
    flex:            1 1 auto;
    display:         flex;
    align-items:     center;
    justify-content: center;
  }

  .vq-page--uxui .vq-wf__caption {
    margin-top: auto;
    align-items: flex-start;
  }
}

/* =============================================================
   05 — Sitemap: the artefact fills the rail, two columns of roots
   ============================================================= */
.vq-page--uxui .vq-tree { margin-top: clamp(40px, 4vw, 56px); }

/* Deliberately NOT columnised: a sitemap tree reads top-to-bottom,
   and a two-column grid both scrambles that order and leaves a hole
   beside any expanded branch. The artefact takes the full rail
   width instead, with the caption returning to the rail below it. */
.vq-page--uxui .vqx-artefact-cap {
  font-family:    var(--font-mono);
  font-size:      var(--fs-11);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          var(--vq-text-muted);
  margin-top:     16px;
}

/* =============================================================
   06 — Prototype: 5fr/7fr row, text left, call-out plate right
   ============================================================= */
.vq-page--uxui .vqx-plate {
  border:  1px solid var(--vqx-rule);
  padding: var(--vqx-cell-pad);
}

.vq-page--uxui .vqx-plate__meta {
  list-style: none;
  margin:     0 0 24px;
  padding:    0;
}

.vq-page--uxui .vqx-plate__meta li {
  display:         flex;
  justify-content: space-between;
  gap:             20px;
  padding:         12px 0;
  border-bottom:   1px solid var(--vqx-rule-soft);
  font-family:     var(--font-mono);
  font-size:       var(--fs-11);
  letter-spacing:  0.14em;
  text-transform:  uppercase;
  color:           var(--vq-text-muted);
}

.vq-page--uxui .vqx-plate__meta li span:last-child { color: var(--vq-text); text-align: right; }

/* =============================================================
   08 — Platform: the system map gets the full rail
   ============================================================= */
.vq-page--uxui .vq-mm {
  margin-top: clamp(40px, 4vw, 56px);
  border:     1px solid var(--vqx-rule);
  padding:    clamp(16px, 1.6vw, 28px);
}

.vq-page--uxui .vq-mm__hint { margin-bottom: 12px; }

/* =============================================================
   09 — Walkthrough: alternating 5fr/7fr media + text rows
   ============================================================= */
.vq-page--uxui .vq-walk { gap: 0; margin-top: clamp(40px, 4vw, 56px); }

.vq-page--uxui .vq-walk__item {
  display:       grid;
  gap:           clamp(24px, 3vw, 56px);
  padding-block: clamp(48px, 5vw, 88px);
  border-top:    1px solid var(--vqx-rule);
}

.vq-page--uxui .vq-walk__item:last-child { border-bottom: 1px solid var(--vqx-rule); }

@media (min-width: 1024px) {
  .vq-page--uxui .vq-walk__item {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items:           start;
  }

  .vq-page--uxui .vq-walk__head {
    grid-column:     1;
    grid-row:        1;
    flex-direction:  column;
    align-items:     flex-start;
    position:        sticky;
    top:             104px;
  }

  .vq-page--uxui .vq-walk__media-wrap { grid-column: 2; grid-row: 1; }
  .vq-page--uxui .vq-walk__notes      { grid-column: 1; grid-row: 2; }

  /* Alternate: even rows put the media on the left. */
  .vq-page--uxui .vq-walk__item:nth-child(even) {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }
  .vq-page--uxui .vq-walk__item:nth-child(even) .vq-walk__head       { grid-column: 2; }
  .vq-page--uxui .vq-walk__item:nth-child(even) .vq-walk__notes      { grid-column: 2; }
  .vq-page--uxui .vq-walk__item:nth-child(even) .vq-walk__media-wrap { grid-column: 1; grid-row: 1 / span 2; }

  .vq-page--uxui .vq-walk__title-block { max-width: none; }
  .vq-page--uxui .vq-walk__caption     { max-width: 46ch; }
  .vq-page--uxui .vq-walk__toggle      { margin-top: 20px; }
}

/* Media below text on phone/tablet — the head block already comes
   first in DOM order, so the default single-column stack is correct. */
@media (max-width: 1023px) {
  .vq-page--uxui .vq-walk__item { grid-template-columns: 1fr; }
}

/* Screenshots read as artefacts, not as framed cards. */
.vq-page--uxui .vq-walk__media-wrap {
  background: var(--vq-bg-soft);
  border:     1px solid var(--vqx-rule);
}

/* =============================================================
   10 — CRO mechanics: stepped hairline grid
   ============================================================= */
.vq-page--uxui .vqx-steps {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   1px;
  background:            var(--vqx-rule);
  border:                1px solid var(--vqx-rule);
  margin:                clamp(40px, 4vw, 56px) 0 0;
  padding:               0;
  list-style:            none;
}

@media (min-width: 768px)  { .vq-page--uxui .vqx-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .vq-page--uxui .vqx-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.vq-page--uxui .vqx-steps .vq-numbered__item {
  display:    block;
  background: var(--vq-bg);
  padding:    var(--vqx-cell-pad);
  border:     none;
  transition: background 0.18s ease-out;
}

.vq-page--uxui .vqx-steps .vq-numbered__item:hover { background: var(--vq-surface); }

.vq-page--uxui .vqx-steps .vq-numbered__num {
  display:        block;
  width:          auto;
  min-width:      0;
  margin-bottom:  18px;
  font-size:      var(--fs-11);
  letter-spacing: 0.18em;
}

.vq-page--uxui .vqx-steps .vq-numbered__body {
  font-size:   var(--fs-15);
  line-height: 1.6;
  max-width:   none;
}

/* Seven cells: on 2-up and 4-up the last one spans the gap so no
   single orphan cell is ever left in the final row. */
@media (min-width: 768px)  { .vq-page--uxui .vqx-steps > *:last-child { grid-column: span 2; } }
@media (min-width: 1280px) { .vq-page--uxui .vqx-steps > *:last-child { grid-column: span 2; } }

/* =============================================================
   11 — Trace: full-rail hairline table
   ============================================================= */
.vq-page--uxui .vq-source-table-wrap {
  border:     none;
  border-top: 1px solid var(--vqx-rule);
  margin-top: clamp(40px, 4vw, 56px);
}

.vq-page--uxui .vq-source-table thead th {
  background: transparent;
  padding:    16px 0;
  border-bottom: 1px solid var(--vqx-rule);
}

.vq-page--uxui .vq-source-table tbody tr { border-bottom: 1px solid var(--vqx-rule-soft); }
.vq-page--uxui .vq-source-table tbody tr:last-child { border-bottom: 1px solid var(--vqx-rule); }
.vq-page--uxui .vq-source-table tbody tr:hover { background: var(--vq-surface); }

.vq-page--uxui .vq-source-table tbody td {
  padding:   clamp(18px, 1.6vw, 26px) 0;
  font-size: var(--fs-15);
}

.vq-page--uxui .vq-source-table thead th:not(:first-child),
.vq-page--uxui .vq-source-table tbody td:not(:first-child) { padding-left: clamp(20px, 2.4vw, 48px); }

/* The source column used nowrap to protect a narrow layout; on the
   wide rail it is free to wrap instead of pushing at the rail edge. */
.vq-page--uxui .vq-source-table tbody td:last-child { white-space: normal; }

@media (min-width: 1024px) {
  .vq-page--uxui .vq-source-table tbody td:first-child  { width: 30%; font-size: clamp(17px, 1.3vw, 20px); }
  .vq-page--uxui .vq-source-table tbody td:last-child   { width: 22%; }
}

/* =============================================================
   12 — Learnings: 3-up lessons grid + 2-up phases grid
   ============================================================= */
.vq-page--uxui .vqx-block { margin-top: clamp(32px, 3.4vw, 48px); }
.vq-page--uxui .vqx-block + .vqx-block { margin-top: clamp(56px, 6vw, 96px); }

.vq-page--uxui .vqx-block__title {
  font-family:    var(--font-headings);
  font-size:      clamp(21px, 1.9vw, 28px);
  font-weight:    500;
  letter-spacing: -0.015em;
  color:          var(--vq-text);
  margin:         0;
}

/* =============================================================
   CTA band (pattern H) — hairline top rule, generous air
   ============================================================= */
.vq-page--uxui .vq-cta {
  border-top:     1px solid var(--vqx-rule);
  padding-top:    clamp(72px, 10vh, 140px);
  padding-bottom: clamp(24px, 4vh, 48px);
  margin-top:     clamp(72px, 10vh, 140px);
}

.vq-page--uxui .vq-cta__title { font-size: clamp(34px, 5vw, 72px); line-height: 1; letter-spacing: -0.035em; }
.vq-page--uxui .vq-cta__sub   { max-width: var(--vqx-lead-max); }

.vq-page--uxui .vq-cta__more-cards {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   1px;
  background:            var(--vqx-rule);
  border:                1px solid var(--vqx-rule);
}

@media (min-width: 768px) {
  .vq-page--uxui .vq-cta__more-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.vq-page--uxui .vq-cta__more-card {
  background: var(--vq-bg);
  border:     none;
  padding:    var(--vqx-cell-pad);
  min-height: 44px;
}

.vq-page--uxui .vq-cta__more-card:hover { background: var(--vq-surface); }

/* =============================================================
   Page-wide rhythm on the wide rail
   ============================================================= */

/* Statement lines get air and a hairline instead of a boxed feel. */
.vq-page--uxui .vq-pull {
  max-width:  1100px;
  margin:     clamp(64px, 7vw, 104px) 0;
  padding:    0 0 0 clamp(20px, 2vw, 32px);
}

/* Reading measure never exceeds ~75ch even at 1600px. */
.vq-page--uxui .vq-section__body { max-width: min(var(--vq-read-max), 75ch); }

/* Section titles keep the shared --vq-fs-h2 scale (set in veloque.css).
   Inside the two-column opener below the column already bounds the
   measure, so no max-width and no per-page font-size override. */
.vq-page--uxui .vq-section__title { max-width: none; }

/* Reduced motion: nothing here animates beyond colour, but keep the
   contract explicit for the hover transitions above. */
@media (prefers-reduced-motion: reduce) {
  .vq-page--uxui .vqx-grid > *,
  .vq-page--uxui .vqx-steps .vq-numbered__item,
  .vq-page--uxui .vqx-toc a { transition: none; }
}

/* =============================================================
   Touch targets — both of these ship at 35-36px tall in
   veloque.css, below the 44px minimum. Raised here (page-scoped)
   without touching the shared stylesheet.
   ============================================================= */
.vq-page--uxui .vq-wf__tab,
.vq-page--uxui .vq-walk__toggle {
  min-height:      44px;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             8px;
}

/* =============================================================
   FIX ROUND 1 — 2026-08-16
   Grayscale enforcement, prose links, opener grid, focus states.
   Everything below stays scoped to `.vq-page--uxui`.
   ============================================================= */

/* ── P0 #1 · Gold retirement ──────────────────────────────────
   veloque.css still ships the legacy `--vq-gold*` ramp and this is
   the only page that still consumes it (~20 rules). The Veloque
   language is grayscale-only, so the tokens are re-pointed here
   rather than edited in the shared sheet (other pages may still
   reference them historically).

   Every `background: var(--vq-gold)` in veloque.css already pairs
   with a hardcoded `color: #0A0A0A`, so white surfaces keep 18.9:1.
   --vq-gold-text is the exception: its single consumer
   (.vq-hier__readout-hover) sits on --vq-bg-soft (#141414), NOT on
   the light shop card, so it must resolve to white, not to #0A0A0A. */
.vq-page--uxui {
  --vq-gold:      var(--vq-text);
  --vq-gold-soft: rgba(255, 255, 255, 0.18);
  --vq-gold-dim:  rgba(255, 255, 255, 0.45);
  --vq-gold-text: var(--vq-text);
}

/* The four places veloque.css hardcodes the gold hex/rgba instead of
   reading the token — the override above cannot reach them. */
.vq-page--uxui .vq-bench__node--gold { background: rgba(255, 255, 255, 0.06); }
.vq-page--uxui .vq-mm__flow .vq-mm__wire { stroke: var(--vq-text); }
.vq-page--uxui .vq-mm__flow .vq-mm__pulse {
  fill: #FFFFFF;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.9));
}
.vq-page--uxui .vq-hier__product::after {
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.12), transparent 60%);
}

/* The prototype CTA was a solid gold plate. It is now the page's one
   solid-white button: #0A0A0A on #FFFFFF = 18.9:1. The hover state
   inverts to white-on-black (21:1). */
.vq-page--uxui .vq-prototype-link {
  min-height: 44px;
  background: var(--vq-text);
  border-color: var(--vq-text);
  color: #0A0A0A;
}
.vq-page--uxui .vq-prototype-link:hover { background: transparent; color: var(--vq-text); }
.vq-page--uxui .vq-prototype-link:focus-visible {
  outline: 1px solid var(--vq-text);
  outline-offset: 3px;
}

/* ── P0 #3 · Unclassed links in prose ─────────────────────────
   Three <a> inside .vq-takeaway__response / .vq-numbered__body had
   no rule anywhere, so they fell back to the UA blue (#0000EE =
   2.23:1 on black). Same treatment as .vq-section__body a. */
.vq-page--uxui .vq-takeaway__response a,
.vq-page--uxui .vq-numbered__body a,
.vq-page--uxui .vq-takeaway__finding a,
.vq-page--uxui .vqx-cell__body a,
.vq-page--uxui .vq-walk__caption a {
  color:                  var(--vq-text-soft);
  text-decoration:        underline;
  text-decoration-color:  var(--vq-border-strong);
  text-underline-offset:  3px;
  transition:             text-decoration-color 0.2s, color 0.2s;
}

.vq-page--uxui .vq-takeaway__response a:hover,
.vq-page--uxui .vq-numbered__body a:hover,
.vq-page--uxui .vq-takeaway__finding a:hover,
.vq-page--uxui .vqx-cell__body a:hover,
.vq-page--uxui .vq-walk__caption a:hover {
  color:                 var(--vq-text);
  text-decoration-color: var(--vq-text);
}

.vq-page--uxui .vq-takeaway__response a:focus-visible,
.vq-page--uxui .vq-numbered__body a:focus-visible,
.vq-page--uxui .vq-takeaway__finding a:focus-visible,
.vq-page--uxui .vqx-cell__body a:focus-visible,
.vq-page--uxui .vq-walk__caption a:focus-visible,
.vq-page--uxui .vq-section__body a:focus-visible {
  outline:        1px solid var(--vq-text);
  outline-offset: 2px;
}

/* ── P1 #6 · Two-column section opener ────────────────────────
   The opener was eyebrow → h2 → prose stacked at 820px inside a
   1427px rail, leaving the right 40% of every section empty. It now
   reads as the reference's four-beat opener: eyebrow + h2 in the
   left 2fr, the lead paragraph in the right 3fr, everything after
   the opener spanning the full rail.

   `:has()` keeps the grid off any section that lacks the triple
   (§12 has no lead paragraph) — those degrade to the old block flow.
   The `>` combinator matters: §03 has five more .vq-section__body
   blocks nested inside .vqx-ia, and they must not be pulled up. */
@media (min-width: 1024px) {
  .vq-page--uxui .vq-section:has(> .vq-section__title + .vq-section__body) {
    display:               grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    column-gap:            clamp(40px, 4vw, 80px);
    align-items:           start;
  }

  /* Everything that is not part of the opener spans the whole rail. */
  .vq-page--uxui .vq-section:has(> .vq-section__title + .vq-section__body) > * {
    grid-column: 1 / -1;
    min-width:   0;
  }

  .vq-page--uxui .vq-section:has(> .vq-section__title + .vq-section__body) > .vq-section__label {
    grid-column:   1;
    grid-row:      1;
    margin-bottom: 20px;
  }

  .vq-page--uxui .vq-section:has(> .vq-section__title + .vq-section__body) > .vq-section__title {
    grid-column:   1;
    grid-row:      2;
    margin-bottom: 0;
    max-width:     none;
    text-wrap:     balance;
  }

  .vq-page--uxui .vq-section:has(> .vq-section__title + .vq-section__body) > .vq-section__title + .vq-section__body {
    grid-column:   2;
    grid-row:      1 / span 2;
    margin-bottom: 0;
    max-width:     min(var(--vq-read-max), 75ch);
  }

  /* Row 3 onwards needs its own top air now that grid stops the
     opener's bottom margin from doing the job. */
  .vq-page--uxui .vq-section:has(> .vq-section__title + .vq-section__body) > *:not(.vq-section__label):not(.vq-section__title):not(.vq-section__title + .vq-section__body) {
    margin-top: clamp(48px, 4.5vw, 72px);
  }
}

/* ── P2 #12 · Shared left edge for full-bleed inners ───────────
   .vq-annotation sits directly in <main> (outside the padded
   .vq-detail rail), so its text started at the viewport edge rather
   than at the section left edge. */
.vq-page--uxui .vq-annotation {
  padding-inline: var(--vq-page-pad-x);
  max-width:      var(--vq-page-max);
  margin-inline:  0;
}

/* ── P2 #25 · Vertical length ─────────────────────────────────
   The page rendered ~31k px tall. The walkthrough alone is 13
   items; its per-item padding is halved (the sticky head keeps the
   text pinned beside the image, so the air is not doing any work). */
@media (min-width: 1024px) {
  .vq-page--uxui .vq-walk__item { padding-block: clamp(28px, 2.6vw, 44px); }
  .vq-page--uxui .vq-walk__media-wrap img { max-height: 620px; object-fit: contain; }
  .vq-page--uxui .vq-pull { margin: clamp(48px, 5vw, 72px) 0; }
}

/* ── P1 #10 · focus-visible parity for every :hover we style ─── */
.vq-page--uxui .vqx-grid > *:focus-visible,
.vq-page--uxui .vqx-steps .vq-numbered__item:focus-visible,
.vq-page--uxui .vq-cta__more-card:focus-visible,
.vq-page--uxui .vq-cta__more-card a:focus-visible,
.vq-page--uxui .vqx-toc a:focus-visible,
.vq-page--uxui .vq-source-table-wrap:focus-visible,
.vq-page--uxui .vq-wf__tab:focus-visible,
.vq-page--uxui .vq-walk__toggle:focus-visible,
.vq-page--uxui .vq-tree__node--toggle > .vq-tree__row:focus-visible,
.vq-page--uxui .vq-mm__node:focus-visible,
.vq-page--uxui .vq-bench__node:focus-visible,
.vq-page--uxui .vq-hier__icon-btn:focus-visible {
  outline:        1px solid var(--vq-text);
  outline-offset: 2px;
}

/* The trace table is now a keyboard-scrollable region; make the
   focus ring sit outside the hairline instead of under it. */
.vq-page--uxui .vq-source-table-wrap { scroll-behavior: smooth; }

/* ── P1 #11 · Tap targets on the diagram controls ─────────────
   Measured at 390px before the fix: bench nodes 24px, tree rows
   30px, hier icon buttons 38px, platform-map nodes 41-42px. All of
   them already clear WCAG 2.5.8 Target Size (Minimum, 24x24) but
   miss the project's own 44px floor, so they are raised here.

   Two deliberate exemptions:
   · .vq-bench__node stays at 24px. It is plotted at semantic x/y
     coordinates inside a dense scatter chart; a 44px hit area would
     overlap its neighbours and steal their clicks. 24px is the AA
     requirement and the nodes are not the only route to the content
     (the docked card is always visible).
   · The four <a> in prose (21-18px tall) are inline links inside a
     sentence, which 2.5.8 explicitly exempts. */
/* NOTE: .vq-hier__icon-btn (bag / favourite) no longer exists in the
   markup, the card was rebuilt to match the production product card,
   which has no on-image quick actions. Rule kept inert in case they
   come back; the focus-visible selector above is likewise inert. */
.vq-page--uxui .vq-hier__icon-btn { width: 44px; height: 44px; }

.vq-page--uxui .vq-mm__node { min-height: 44px; }

.vq-page--uxui .vq-tree__node--toggle > .vq-tree__row,
.vq-page--uxui .vq-tree__row {
  min-height:    44px;
  padding-block: 10px;
}

/* Second paragraph of the design-system opener needs air: the shared
   .vq-section__body resets paragraph margins to 0. */
.vq-page--uxui .vqx-style-note { margin-top: 1.1em; }

/* ── 07 Design principles — hairline icon grid ────────────────
   Eleven principles as cells of one hairline grid (gap:1px, radius 0,
   no shadow) reusing the .vqx-grid machinery: mono index + Phosphor
   icon + title + one to two lines of body. 3-up from 1280, 2-up on
   tablet, 1-up on phone. The Photography cell spans two columns
   (it carries the shoot parameters), which also removes the orphan
   an 11-item grid would otherwise leave in both 3-up and 2-up. */
.vq-page--uxui .vqx-principles-eyebrow {
  font-family:    var(--font-mono);
  font-size:      var(--fs-11, 11px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          var(--vq-text-muted);
  margin:         0 0 14px;
}

/* The block is one grid child of the opener grid, so the shared
   "row 3 onwards" top margin applies once, to the whole block,
   instead of once per paragraph. */
.vq-page--uxui .vqx-principles-block { margin-top: clamp(48px, 5vw, 84px); }

.vq-page--uxui .vqx-principles-lead {
  font-family: var(--font-text);
  font-size:   clamp(16px, 1.15vw, 18px);
  line-height: 1.6;
  color:       var(--vq-text-mid);
  max-width:   var(--vqx-lead-max);
  margin:      0;
}

.vq-page--uxui .vqx-pgrid {
  grid-template-columns: minmax(0, 1fr);
  margin-top:            clamp(28px, 3vw, 44px);
}

@media (min-width: 768px) {
  .vq-page--uxui .vqx-pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vq-page--uxui .vqx-pcell--wide { grid-column: span 2; }
}

@media (min-width: 1280px) {
  .vq-page--uxui .vqx-pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.vq-page--uxui .vqx-pcell {
  display:        flex;
  flex-direction: column;
  gap:            10px;
}

.vq-page--uxui .vqx-pcell__head {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             16px;
  margin-bottom:   clamp(18px, 2vw, 30px);
}

.vq-page--uxui .vqx-pcell__num {
  font-family:     var(--font-mono);
  font-size:       var(--fs-11, 11px);
  letter-spacing:  0.18em;
  color:           var(--vq-text-dim);
  font-variant-numeric: tabular-nums;
}

.vq-page--uxui .vqx-pcell__icon {
  font-size: 26px;
  line-height: 1;
  color:     var(--vq-text);
}

.vq-page--uxui .vqx-pcell__title {
  font-family:     var(--font-headings);
  font-size:       clamp(18px, 1.3vw, 22px);
  font-weight:     500;
  letter-spacing:  -0.01em;
  line-height:     1.25;
  color:           var(--vq-text);
  margin:          0;
}

.vq-page--uxui .vqx-pcell__body {
  font-family: var(--font-text);
  font-size:   clamp(15px, 1.05vw, 17px);
  line-height: 1.55;
  color:       var(--vq-text-mid);
  margin:      0;
  max-width:   58ch;
}

/* The grid lives outside .vq-section__body, so an inline link here
   would fall back to the UA blue. */
.vq-page--uxui .vqx-pcell__body a {
  color:                 var(--vq-text);
  text-decoration:       underline;
  text-decoration-color: var(--vq-border-strong);
  text-underline-offset: 4px;
  transition:            text-decoration-color 0.2s;
}
.vq-page--uxui .vqx-pcell__body a:hover { text-decoration-color: var(--vq-text); }

/* Photography shoot parameters: mono label · value pairs, hairline
   separated, two columns of pairs once the wide cell has the room. */
.vq-page--uxui .vqx-pspec {
  margin:     clamp(16px, 1.6vw, 24px) 0 0;
  display:    grid;
  gap:        0 clamp(24px, 3vw, 48px);
  border-top: 1px solid var(--vqx-rule);
}

.vq-page--uxui .vqx-pspec__row {
  display:               grid;
  grid-template-columns: minmax(84px, 22%) minmax(0, 1fr);
  gap:                   4px 16px;
  padding-block:         9px;
  border-bottom:         1px solid var(--vqx-rule);
}

.vq-page--uxui .vqx-pspec dt {
  font-family:    var(--font-mono);
  font-size:      var(--fs-11, 11px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color:          var(--vq-text-muted);
  line-height:    1.6;
}

.vq-page--uxui .vqx-pspec dd {
  font-family: var(--font-text);
  font-size:   14px;
  line-height: 1.55;
  color:       var(--vq-text-mid);
  margin:      0;
}

@media (min-width: 1280px) {
  .vq-page--uxui .vqx-pspec { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
  .vq-page--uxui .vqx-pspec__row { grid-template-columns: minmax(0, 1fr); }
}

/* =============================================================
   06 — Fast Prototype: tightened section + full-screen overlay
   ============================================================= */

/* The chapter is a short aside, not a chapter-weight beat: it gets
   roughly half the rhythm of a full .vq-section. */
.vq-page--uxui .vqx-section--tight {
  margin-bottom: 72px;
  padding-top:   var(--space-24, 24px);
}
.vq-page--uxui .vqx-section--tight .vq-section__title {
  margin-bottom: 28px;
}

.vq-page--uxui .vqx-proto-row {
  align-items: start;
  --vqx-row-gap: clamp(28px, 3vw, 56px);
}
.vq-page--uxui .vqx-proto-row .vq-section__body > p { max-width: 62ch; }
.vq-page--uxui .vqx-proto-lead {
  font-size: clamp(17px, 1.15vw, 20px);
  line-height: 1.55;
  color: var(--vq-text);
  margin-bottom: 20px;
}

/* The CTA is now a <button> (it opens the overlay instead of
   navigating), so reset the UA button defaults veloque.css's
   .vq-prototype-link never had to fight. */
.vq-page--uxui button.vq-prototype-link {
  cursor:     pointer;
  appearance: none;
  border-radius: 0;
  font:       inherit;
  font-family: var(--font-mono);
  font-size:  var(--fs-13);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ── Overlay ──────────────────────────────────────────────────
   Element class names are dictated by modules/modal-iframe.js
   (.uber-modal__body / __loading / __fallback / __btn, data-open,
   data-state, body.uber-modal-open). uber-eats.css is not loaded
   on this page, so these are the page's own grayscale equivalents,
   scoped by .vqx-proto-modal. Radius 0 throughout.
   z-index 9995 clears the sidebar (500) and topbar, stays under the
   custom cursor (99999). */
.vqx-proto-modal {
  position: fixed;
  inset:    0;
  z-index:  9995;
  display:  none;
  align-items:     center;
  justify-content: center;
}
.vqx-proto-modal[data-open='true'] { display: flex; }

.vqx-proto-modal .uber-modal__backdrop {
  position:   absolute;
  inset:      0;
  background: rgba(0, 0, 0, 0.9);
  opacity:    0;
  transition: opacity 0.24s ease;
  border:     0;
}
.vqx-proto-modal[data-open='true'] .uber-modal__backdrop { opacity: 1; }

.vqx-proto-modal .uber-modal__container {
  position: relative;
  display:  flex;
  flex-direction: column;
  width:    100vw;
  height:   100vh;
  height:   100dvh;
  background: #0A0A0A;
  border:     0;
  opacity:    0;
  transform:  translateY(12px);
  transition: opacity 0.24s ease, transform 0.24s ease;
}
.vqx-proto-modal[data-open='true'] .uber-modal__container {
  opacity:   1;
  transform: none;
}

.vqx-proto-modal .uber-modal__header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--vqx-rule);
  background: #0A0A0A;
}

.vqx-proto-modal .uber-modal__title {
  margin: 0;
  font-family: var(--font-mono);
  font-size:   var(--fs-11);
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--vq-text-muted);
}

.vqx-proto-modal .uber-modal__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Secondary action: quiet outline. */
.vqx-proto-modal .uber-modal__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--vqx-rule);
  background: transparent;
  color: var(--vq-text-soft);
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none !important;
  cursor: pointer;
  border-radius: 0;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.vqx-proto-modal .uber-modal__btn:hover {
  border-color: var(--vq-text);
  color: var(--vq-text);
}
.vqx-proto-modal .uber-modal__btn:focus-visible {
  outline: 2px solid var(--vq-text);
  outline-offset: 2px;
}
.vqx-proto-modal .uber-modal__btn i { font-size: 15px; }

/* Primary action is CLOSE: solid white plate, dark glyph, always the
   loudest thing on screen. 48px tall, #0A0A0A on #FFF = 18.9:1. */
.vqx-proto-modal .uber-modal__btn--close {
  min-height: 48px;
  padding: 0 18px;
  background: #FFFFFF;
  border-color: #FFFFFF;
  color: #0A0A0A;
  font-weight: 500;
}
.vqx-proto-modal .uber-modal__btn--close:hover {
  background: var(--vq-text-soft);
  border-color: var(--vq-text-soft);
  color: #0A0A0A;
}
.vqx-proto-modal .uber-modal__btn--close i { font-size: 18px; }

.vqx-proto-modal .uber-modal__body {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  background: #000000;
}

.vqx-proto-modal .uber-modal__iframe {
  display: block;
  width:  100%;
  height: 100%;
  border: 0;
  background: #000000;
}

.vqx-proto-modal .uber-modal__loading,
.vqx-proto-modal .uber-modal__fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 32px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--vq-text-muted);
}
.vqx-proto-modal .uber-modal__fallback { display: none; }

.vqx-proto-modal .uber-modal__loading-spinner {
  width: 22px;
  height: 22px;
  border: 1px solid var(--vqx-rule);
  border-top-color: var(--vq-text);
  border-radius: 50%;
  animation: vqx-proto-spin 0.9s linear infinite;
}
@keyframes vqx-proto-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .vqx-proto-modal .uber-modal__loading-spinner { animation-duration: 3s; }
  .vqx-proto-modal .uber-modal__container,
  .vqx-proto-modal .uber-modal__backdrop { transition: none; }
}

/* data-state is set by the module: loading → loaded → blocked. */
.vqx-proto-modal[data-state='loaded'] .uber-modal__loading { display: none; }
.vqx-proto-modal[data-state='blocked'] .uber-modal__fallback { display: flex; }
.vqx-proto-modal[data-state='blocked'] .uber-modal__iframe,
.vqx-proto-modal[data-state='blocked'] .uber-modal__loading { display: none; }

.vqx-proto-modal .uber-modal__fallback-title {
  margin: 0;
  font-family: var(--font-headings);
  font-size: clamp(20px, 2vw, 28px);
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--vq-text);
}
.vqx-proto-modal .uber-modal__fallback-text {
  margin: 0;
  max-width: 52ch;
  font-family: var(--font-text);
  font-size: var(--fs-15, 15px);
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.6;
  color: var(--vq-text-muted);
}
.vqx-proto-modal .uber-modal__fallback-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 20px;
  background: #FFFFFF;
  border: 1px solid #FFFFFF;
  color: #0A0A0A;
  text-decoration: none !important;
  letter-spacing: 0.14em;
}
.vqx-proto-modal .uber-modal__fallback-btn:hover {
  background: transparent;
  color: var(--vq-text);
}

/* Scroll lock — the module toggles this class on <body>; the rule
   normally ships in uber-eats.css, which this page does not load. */
body.uber-modal-open { overflow: hidden; }

@media (max-width: 640px) {
  .vqx-proto-modal .uber-modal__header {
    padding: 10px 12px;
    gap: 10px;
  }
  /* Keep the title from squeezing the always-visible close plate. */
  .vqx-proto-modal .uber-modal__title { display: none; }
  .vqx-proto-modal .uber-modal__actions {
    width: 100%;
    justify-content: space-between;
  }
  .vqx-proto-modal .uber-modal__btn { padding: 0 12px; }
  .vqx-proto-modal .uber-modal__btn span { font-size: 10px; }
}

/* =============================================================
   Style Sheet bleed — the whole frame, uncropped
   veloque.css:987 gives .vq-bleed--cover img object-fit: cover +
   max-height: 680px, which shaves the top and bottom off the
   1920x1080 style sheet. Here the image IS the content, so the
   block grows to the image's own 16:9 instead of cropping it.
   ============================================================= */
.vq-page--uxui .vqx-bleed--full img {
  width:        100%;
  height:       auto;
  max-height:   none;
  aspect-ratio: 16 / 9;
  object-fit:   contain;
}

/* =============================================================
   D6 hierarchy demo — the real VELOQUE product card
   The shared component in veloque.css (~4059) is an older sketch:
   square corners, image edge-to-edge at 16/11, specs stacked under
   the body. The production card is a white portrait card with a
   generous radius, header text top-left, a category pill top-right
   and the garment centred underneath. Overridden here rather than
   in veloque.css because this is the only page that renders it.

   The 24px radius is the one deliberate exception to the case
   study's square-corner chrome: this element reproduces a piece of
   product UI, so it has to carry the product UI's own shape.
   ============================================================= */

/* Layout: affordance tag over the card, narrative column beside
   both. The tag has to be a SIBLING of the card (not a wrapper)
   or veloque.css's `.vq-hier__card--shop:hover ~ .vq-hier__controls`
   readout/callout swaps stop matching. */
.vq-page--uxui .vq-hier {
  grid-template-columns: minmax(0, 360px) 1fr;
  grid-template-rows:    auto auto;
  grid-template-areas:   "hint controls"
                         "card controls";
  gap:                   14px 44px;
}
.vq-page--uxui .vqx-hier-hint      { grid-area: hint; }
.vq-page--uxui .vq-hier__card--shop { grid-area: card; }
.vq-page--uxui .vq-hier__controls   { grid-area: controls; }

.vq-page--uxui .vqx-hier-hint {
  display:        flex;
  align-items:    center;
  gap:            8px;
  margin:         0;
  font-family:    var(--font-mono);
  font-size:      11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          var(--vq-text-muted);
}
.vq-page--uxui .vqx-hier-hint i { font-size: 15px; letter-spacing: 0; }
/* Only the copy that matches the pointer type is rendered at all,
   so assistive tech never reads both instructions. */
.vq-page--uxui .vqx-hier-hint__tap   { display: none; }
@media (hover: none) {
  .vq-page--uxui .vqx-hier-hint__hover { display: none; }
  .vq-page--uxui .vqx-hier-hint__tap   { display: inline; }
}

/* ── The card ────────────────────────────────────────────────── */
.vq-page--uxui .vq-hier__card--shop {
  position:      relative;
  width:         100%;
  max-width:     360px;
  aspect-ratio:  1 / 1.35;
  background:    #FFFFFF;
  border:        1px solid rgba(0, 0, 0, 0.06);
  border-radius: 24px;
  padding:       24px;
  gap:           0;
  overflow:      hidden;
}
.vq-page--uxui .vq-hier__card--shop:hover,
.vq-page--uxui .vq-hier__card--shop:focus-within {
  transform:  translateY(-3px);
  box-shadow: 0 28px 56px -24px rgba(0, 0, 0, 0.55);
}
.vq-page--uxui .vq-hier__card--shop:focus-visible {
  outline:        2px solid #FFFFFF;
  outline-offset: 3px;
}

.vq-page--uxui .vq-hier__head {
  position:        relative;
  z-index:         4;                    /* sits over the frost overlay */
  display:         flex;
  align-items:     flex-start;
  justify-content: space-between;
  gap:             12px;
}
.vq-page--uxui .vq-hier__hl-name {
  font-size:   20px;
  font-weight: 600;
  line-height: 1.2;
  color:       #0A0A0A;
}
/* One quiet line, 8.2:1 on white — muted by size and weight rather
   than by dropping to a barely-legible grey. */
.vq-page--uxui .vq-hier__hl-desc {
  font-size:  13px;
  color:      #565656;
  margin:     4px 0 0;
  line-height: 1.4;
}
.vq-page--uxui .vq-hier__hl-price {
  font-size:   14px;
  font-weight: 400;
  color:       #565656;
  margin:      6px 0 0;
}
.vq-page--uxui .vq-hier__pill {
  flex-shrink:    0;
  font-family:    var(--font-mono);
  font-size:      10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          #4A4A4A;               /* 7.6:1 on the pill fill */
  background:     #F1F0EF;
  border-radius:  999px;
  padding:        6px 11px;
  line-height:    1;
}

/* The garment sits on the card's own white, centred, unframed. */
.vq-page--uxui .vq-hier__media {
  flex:         1 1 auto;
  min-height:   0;
  aspect-ratio: auto;
  background:   transparent;
  margin-top:   14px;
}
.vq-page--uxui .vq-hier__media img { object-fit: contain; }

/* ── On-action overlay ───────────────────────────────────────── */
/* A frosted white sheet over the WHOLE card (not a block pushed in
   under the image): the product recedes behind the blur and the
   detail that helps a rider decide takes the full surface. */
.vq-page--uxui .vq-hier__reveal {
  position:        absolute;
  inset:           0;
  z-index:         3;
  justify-content: flex-start;
  gap:             12px;
  margin:          0;
  /* Top inset clears the header block, which stays above the frost:
     the card never stops telling you which product it is, and the
     4 rest units + 3 revealed ones are on screen together (the
     4 -> 7 readout beside it would otherwise be a lie). */
  padding:         104px 24px 24px;
  border-top:      none;
  border-radius:   inherit;
  /* 0.88, not 0.80: at 0.80 the blurred navy jersey pushed patches of
     the sheet down to ~#B9BABB, where the muted label grey fell to
     3.8:1. 0.88 keeps the frost reading as frost and holds the floor
     near #EAEAEA, so #4F4F4F labels clear AA everywhere on it. */
  background:      rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(22px) saturate(115%);
  -webkit-backdrop-filter: blur(22px) saturate(115%);
  max-height:      none;
  overflow:        hidden;
  opacity:         0;
  transform:       translateY(6px);
  pointer-events:  none;
}
@media (hover: hover) {
  .vq-page--uxui .vq-hier__card--shop:hover .vq-hier__reveal,
  .vq-page--uxui .vq-hier__card--shop:focus-within .vq-hier__reveal {
    opacity:        1;
    transform:      none;
    max-height:     none;
    pointer-events: auto;
  }
}
/* Touch: no hover to read, so the card (tabindex="0") takes focus on
   tap and :focus-within opens the same overlay; tapping outside
   closes it. veloque.css's hover:none rule would otherwise pin the
   overlay permanently open, hiding the product. */
@media (hover: none) {
  .vq-page--uxui .vq-hier__reveal {
    opacity:    0;
    transform:  translateY(6px);
    overflow:   hidden;
  }
  .vq-page--uxui .vq-hier__card--shop:focus-within .vq-hier__reveal {
    opacity:        1;
    transform:      none;
    pointer-events: auto;
  }
  /* Same rest → active narrative swap the pointer path gets, driven
     off :focus-within alone. */
  .vq-page--uxui .vq-hier__callout--rest   { display: block; }
  .vq-page--uxui .vq-hier__callout--active { display: none; }
  .vq-page--uxui .vq-hier__card--shop:focus-within ~ .vq-hier__controls .vq-hier__callout--rest   { display: none; }
  .vq-page--uxui .vq-hier__card--shop:focus-within ~ .vq-hier__controls .vq-hier__callout--active { display: block; }
  .vq-page--uxui .vq-hier__card--shop:focus-within ~ .vq-hier__controls .vq-hier__readout-rest    { opacity: 0.4; }
  .vq-page--uxui .vq-hier__card--shop:focus-within ~ .vq-hier__controls .vq-hier__readout-hover   { opacity: 1; }
}

.vq-page--uxui .vq-hier__reveal-desc {
  font-family: var(--font-text);
  font-size:   13px;
  line-height: 1.55;
  color:       #2A2A2A;
  margin:      0 0 2px;
}
.vq-page--uxui .vq-hier__reveal-note {
  font-family:    var(--font-mono);
  font-size:      9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height:    1.5;
  color:          #4F4F4F;
  margin:         4px 0 0;
  padding-top:    10px;
  border-top:     1px solid rgba(0, 0, 0, 0.10);
}
/* Labels and values re-stated for the overlay's blurred surface: it
   sits over the garment, so the muted greys are darker here than the
   ones used on the card's own flat white. */
.vq-page--uxui .vq-hier__reveal .vq-hier__feature-label,
.vq-page--uxui .vq-hier__reveal .vq-hier__rating-label { color: #4F4F4F; }
.vq-page--uxui .vq-hier__reveal .vq-hier__feature-value { color: #111111; }

@media (max-width: 900px) {
  .vq-page--uxui .vq-hier {
    grid-template-columns: 1fr;
    grid-template-areas:   "hint" "card" "controls";
    gap:                   14px;
  }
  .vq-page--uxui .vq-hier__controls { margin-top: 12px; }
}
@media (max-width: 640px) {
  /* Phone: the card is ~300px wide, where the overlay copy needs more
     vertical room than a 1:1.35 box has. Height goes intrinsic (with a
     floor that keeps the portrait feel) instead of clipping the reveal;
     overflow-y is a safety valve for 320px-class widths. */
  .vq-page--uxui .vq-hier__card--shop {
    max-width:    none;
    aspect-ratio: auto;
    min-height:   470px;
  }
  .vq-page--uxui .vq-hier__reveal {
    padding:    100px 20px 20px;
    overflow-y: auto;
  }
}

/* =============================================================
   ROUND 11 — 2026-08-17
   9.13 Essentials grid: HTML/CSS prototype replacing the
   `normal-product-grid.png` screenshot inside the walkthrough.

   This is a reproduction of a LIGHT product screen, so it is a
   deliberate, contained exception to the grayscale-dark language
   (same precedent as the D6 shop card): the surface is the real
   #F7F7F7 page with white cards and a 20px-class radius, because
   the artefact's job is to show what the screen looks like.
   Nothing outside `.vqx-ess*` is affected.

   All internal dimensions are expressed in `cqw` against the
   media column so the mock keeps the screenshot's proportions
   (~16:10) at any rail width, with `max()` floors so the type
   stays legible instead of collapsing to 3px at 834/390.
   ============================================================= */
.vq-page--uxui .vqx-ess-wrap {
  --vqx-ess-bg:    #F7F7F7;
  --vqx-ess-card:  #FFFFFF;
  --vqx-ess-ink:   #2E2E2E;
  --vqx-ess-muted: #6E6E6E;
  --vqx-ess-pill:  #101010;
  background:      var(--vqx-ess-bg);
  border:          1px solid var(--vqx-rule);
}

.vq-page--uxui .vqx-ess {
  container-type: inline-size;
  display:        block;
  width:          100%;
  background:     var(--vqx-ess-bg);
}

/* ── Narrow containers (phone): 2 columns, intrinsic height ─── */
.vq-page--uxui .vqx-ess__inner {
  padding: 24px 16px 28px;
}

.vq-page--uxui .vqx-ess__title {
  margin:         0 0 18px;
  font-family:    var(--font-headings);
  font-size:      17px;
  font-weight:    500;
  line-height:    1.25;
  letter-spacing: -0.02em;
  text-align:     center;
  text-wrap:      balance;
  color:          var(--vqx-ess-muted);
}
.vq-page--uxui .vqx-ess__title-strong { color: var(--vqx-ess-ink); }

.vq-page--uxui .vqx-ess__grid {
  display:               grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:                   10px;
}

.vq-page--uxui .vqx-ess__card {
  display:        flex;
  flex-direction: column;
  aspect-ratio:   300 / 390;
  background:     var(--vqx-ess-card);
  border:         0;
  border-radius:  14px;
  overflow:       hidden;
}

.vq-page--uxui .vqx-ess__shot {
  flex:            1 1 auto;
  min-height:      0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         6px 6px 0;
}

/* veloque.css sets `.vq-walk__media-wrap img { width:100%; height:auto }`
   and this page caps it at 620px with object-fit — both wrong for a
   product cutout that must letterbox inside its cell. */
.vq-page--uxui .vqx-ess__shot img {
  width:      auto;
  height:     auto;
  max-width:  100%;
  max-height: 100%;
  object-fit: contain;
  display:    block;
}

.vq-page--uxui .vqx-ess__meta { padding: 0 10px 12px; }

.vq-page--uxui .vqx-ess__name {
  margin:         0;
  font-family:    var(--font-headings);
  font-size:      13px;
  font-weight:    500;
  line-height:    1.3;
  letter-spacing: -0.01em;
  color:          var(--vqx-ess-ink);
}

.vq-page--uxui .vqx-ess__desc {
  margin:      3px 0 0;
  font-family: var(--font-text);
  font-size:   11px;
  line-height: 1.35;
  color:       var(--vqx-ess-muted);
  /* Two lines are reserved so the name / description / price baselines
     stay aligned across the row when a description wraps at 834. */
  min-height:  2.7em;
}

.vq-page--uxui .vqx-ess__price {
  margin:          5px 0 0;
  font-family:     var(--font-mono);
  font-size:       11px;
  line-height:     1.2;
  font-variant-numeric: tabular-nums;
  color:           var(--vqx-ess-muted);
}

.vq-page--uxui .vqx-ess__cta {
  margin:     18px 0 0;
  text-align: center;
}

.vq-page--uxui .vqx-ess__pill {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  background:      var(--vqx-ess-pill);
  color:           #F7F7F7;
  border-radius:   999px;
  padding:         9px 18px;
  font-family:     var(--font-text);
  font-size:       11px;
  line-height:     1.2;
  letter-spacing:  0.005em;
}

/* ── Wide containers: the real 4-up screen, proportional ────── */
@container (min-width: 560px) {
  .vq-page--uxui .vqx-ess__inner   { padding: 2.2cqw 14cqw 2.4cqw; }
  .vq-page--uxui .vqx-ess__title   { font-size: max(15px, 3.2cqw); margin-bottom: max(14px, 3cqw); }
  .vq-page--uxui .vqx-ess__grid    { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: max(8px, 1.5cqw); }
  .vq-page--uxui .vqx-ess__card    { border-radius: max(10px, 1.1cqw); }
  .vq-page--uxui .vqx-ess__shot    { padding: max(4px, 0.6cqw) max(4px, 0.6cqw) 0; }
  .vq-page--uxui .vqx-ess__meta    { padding: 0 max(7px, 0.9cqw) max(9px, 1.2cqw); }
  .vq-page--uxui .vqx-ess__name    { font-size: max(11px, 0.9cqw); }
  .vq-page--uxui .vqx-ess__desc    { font-size: max(9px,  0.68cqw); margin-top: max(2px, 0.25cqw); }
  .vq-page--uxui .vqx-ess__price   { font-size: max(9px,  0.68cqw); margin-top: max(3px, 0.4cqw); }
  .vq-page--uxui .vqx-ess__cta     { margin-top: max(12px, 2.4cqw); }
  .vq-page--uxui .vqx-ess__pill    {
    padding:   max(7px, 0.95cqw) max(14px, 2.2cqw);
    font-size: max(10px, 0.8cqw);
  }
}

/* ── Round 12: Essentials prototype tuning (Vicente review) ──
   Title a touch smaller on two lines; jerseys occupy less of the card;
   name/description pushed down towards the price. */
.vq-page--uxui .vqx-ess__title { line-height: 1.15; }
.vq-page--uxui .vqx-ess__shot { padding-top: 10px; }
.vq-page--uxui .vqx-ess__shot img { max-width: 72%; margin-inline: auto; }
.vq-page--uxui .vqx-ess__meta { padding-top: 14px; }
.vq-page--uxui .vqx-ess__desc { min-height: 0; }
.vq-page--uxui .vqx-ess__price { margin-top: 8px; }
@container (min-width: 560px) {
  .vq-page--uxui .vqx-ess__title { font-size: max(14px, 2.7cqw); }
  .vq-page--uxui .vqx-ess__shot  { padding-top: max(8px, 1.4cqw); }
  .vq-page--uxui .vqx-ess__shot img { max-width: 70%; }
  .vq-page--uxui .vqx-ess__meta  { padding-top: max(12px, 2cqw); }
  .vq-page--uxui .vqx-ess__price { margin-top: max(6px, 0.9cqw); }
}

/* ── Round 13: trace table collapsed by default + tighter rows ──
   Shared expandable module handles mask/toggle; the label is
   hardcoded "Know more" in JS, so it is relabelled here via ::before. */
.vq-page--uxui .vq-source-table tbody td { padding: clamp(10px, 1vw, 14px) 0; }
.vq-page--uxui .vq-source-table thead th { padding-bottom: 10px; }
.vq-page--uxui .vqx-trace-exp.is-collapsed {
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
}
.vq-page--uxui .vqx-trace-exp + .expandable__toggle span { display: none; }
.vq-page--uxui .vqx-trace-exp + .expandable__toggle::before {
  content: "See the full decision tree";
  letter-spacing: 0.06em;
}
.vq-page--uxui .vqx-trace-exp + .expandable__toggle[aria-expanded="true"]::before {
  content: "Collapse the decision tree";
}
.vq-page--uxui .vqx-trace-exp + .expandable__toggle { margin: 24px auto 0; min-height: 44px; }

/* ── Round 14: centre the platform-map canvas inside its frame when the
   rail is wider than the 1100px canvas (auto margins in a flex scroller
   centre without clipping the left edge when it overflows). */
.vq-page--uxui .vq-mm__scroll { display: flex; }
.vq-page--uxui .vq-mm__canvas { margin-inline: auto; }