/* ==========================================================================
   COMPONENTS & SCAFFOLD — Web Style Guide v1, pages 07–09
   Hard edges. No shadows. Motion is a hard cut.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ---------- Scaffold ---------- */
.vh-page {
  background: var(--surface-page);
  color: var(--ink);
  font-family: var(--font-sans);
  min-height: 100vh;
}

.vh-page__nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-6) var(--space-16);
  border-bottom: 2px solid var(--rule);
  flex-wrap: wrap;
}
.vh-page__nav a { color: var(--ink); text-decoration: none; }
.vh-page__nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.vh-nav__links { display: flex; gap: var(--space-6); flex-wrap: wrap; }

.vh-page__section {
  padding: var(--space-16);
  display: flex; flex-direction: column; gap: var(--space-6);
  align-items: flex-start;
}

.vh-page__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  /* Rules live on the items, so an incomplete final row leaves no bleed. */
  border-top: 2px solid var(--rule);
  border-left: 2px solid var(--rule);
}
.vh-page__grid > * {
  border-right: 2px solid var(--rule);
  border-bottom: 2px solid var(--rule);
}

.vh-page__prose {
  font-size: 18px; line-height: 28px; max-width: 60ch;
}
.vh-page__prose p { margin: 0 0 var(--space-4); }

.vh-page__foot {
  border-top: 2px solid var(--rule);
  padding: var(--space-12) var(--space-16);
  font-size: 13px; line-height: 18px; color: var(--ink-muted);
  display: flex; justify-content: space-between; gap: var(--space-8); flex-wrap: wrap;
}
.vh-page__foot a { color: var(--ink-muted); }

/* ---------- Button ---------- */
.vh-btn {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 15px; line-height: 20px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  padding: var(--space-3) var(--space-6);
  border: 2px solid var(--rule);
  border-radius: var(--radius-none);
  background: var(--surface-inverse);
  color: var(--ink-inverse);
  text-decoration: none;
  cursor: pointer;
}
.vh-btn:hover { background: var(--yellow); color: var(--on-yellow); border-color: var(--rule); }

.vh-btn--secondary { background: transparent; color: var(--ink); }
.vh-btn--secondary:hover { background: var(--yellow); color: var(--on-yellow); }

.vh-btn--yellow { background: var(--yellow); color: var(--on-yellow); }
.vh-btn--yellow:hover { background: var(--surface-inverse); color: var(--ink-inverse); }

.vh-btn[disabled], .vh-btn--disabled {
  background: var(--hairline); color: var(--ink-muted);
  border-color: var(--hairline); cursor: default;
}

/* ---------- Title card ---------- */
.vh-title-card { padding: var(--space-16); display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start; }
.vh-title-card__eyebrow { color: var(--ink-muted); }
.vh-title-card__title { margin: 0; }
.vh-title-card__tagline { color: var(--ink-muted); max-width: 48ch; margin: 0; }
.vh-title-card--yellow { background: var(--yellow); color: var(--on-yellow); }
.vh-title-card--yellow .vh-title-card__eyebrow,
.vh-title-card--yellow .vh-title-card__tagline { color: var(--on-yellow); }
.vh-title-card--inverse { background: var(--surface-inverse); color: var(--ink-inverse); }
.vh-title-card--inverse .vh-title-card__eyebrow,
.vh-title-card--inverse .vh-title-card__tagline { color: var(--ink-inverse); }

/* Black band treatment — page ground only. Each line is its own plate. */
.vh-band { display: inline-block; background: var(--surface-inverse); color: var(--ink-inverse); padding: 0 var(--space-3); }

/* ---------- Colour block ---------- */
.vh-colorblock {
  min-height: 160px;
  padding: var(--space-8);
  display: flex; flex-direction: column; justify-content: flex-end; gap: var(--space-2);
  border-radius: var(--radius-none);
  text-decoration: none;
  position: relative; overflow: hidden;
}
.vh-colorblock__label { position: relative; z-index: 1; }
.vh-colorblock__value { margin: 0; position: relative; z-index: 1; }

.vh-colorblock--yellow { background: var(--yellow); color: var(--on-yellow); }
.vh-colorblock--yellow .vh-colorblock__label { color: var(--on-yellow); }
.vh-colorblock--pink   { background: var(--pink);   color: var(--on-pink); }
.vh-colorblock--pink .vh-colorblock__label { color: var(--on-pink); }
.vh-colorblock--red    { background: var(--red);    color: var(--on-red); }
.vh-colorblock--paper  { background: var(--surface-paper); color: var(--ink); }
.vh-colorblock--paper .vh-colorblock__label { color: var(--ink-muted); }

/* On blue the label sits on its own black plate — see guide p.07 */
.vh-colorblock--blue { background: var(--blue); color: var(--on-blue); }
.vh-colorblock--blue .vh-colorblock__label {
  background: var(--surface-inverse); color: var(--ink-inverse);
  align-self: flex-start; padding: var(--space-1) var(--space-2);
}

/* The one curve in the system: a disc, once per composition. */
.vh-disc {
  position: absolute; border-radius: var(--radius-circle);
  width: 96px; height: 96px; top: -32px; right: var(--space-8);
  background: var(--yellow);
}

a.vh-colorblock:hover .vh-colorblock__value { text-decoration: underline; text-underline-offset: 6px; }

/* ---------- Rules ---------- */
.vh-rule { border: 0; border-top: 2px solid var(--rule); margin: 0; }
.vh-hairline { border: 0; border-top: 1px solid var(--hairline); margin: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .vh-page__nav, .vh-page__section, .vh-title-card { padding-left: var(--space-8); padding-right: var(--space-8); }
  .vh-page__foot { padding-left: var(--space-8); padding-right: var(--space-8); }
  .vh-page__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .vh-page__nav, .vh-page__section, .vh-title-card { padding-left: var(--space-6); padding-right: var(--space-6); }
  .vh-page__foot { padding-left: var(--space-6); padding-right: var(--space-6); }
  .vh-page__grid { grid-template-columns: 1fr; }
  .vh-page__section { padding-top: var(--space-12); padding-bottom: var(--space-12); }
}

/* Motion is a hard cut. Respect reduced motion anyway. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ==========================================================================
   FOCUS ON FIELD COLOURS
   The guide states --focus clears 3:1 on every field in its own theme.
   Measured, it does not: in dark theme --focus is #eeede9 while yellow and
   pink are unchanged, giving 1.0:1 on yellow and 1.4:1 on pink.
   Fix uses the system's own logic — a field is always paired with its on-
   token — so the ring takes the field's on- colour. No new values.
   ========================================================================== */
.vh-colorblock--yellow:focus-visible,
.vh-btn--yellow:focus-visible          { outline-color: var(--on-yellow); }
.vh-colorblock--blue:focus-visible     { outline-color: var(--on-blue); }
.vh-colorblock--pink:focus-visible     { outline-color: var(--on-pink); }
.vh-colorblock--red:focus-visible      { outline-color: var(--on-red); }

/* ==========================================================================
   WORDMARK — PLACEHOLDER RECONSTRUCTION
   Not the supplied logo file. Set in the fallback face at the proportions
   shown on brand sheet VH-01: three stacked lines, 900 weight, leading
   tighter than the cap height. Replace with the real asset when available;
   swap .vh-wordmark's contents and nothing else changes.
   ========================================================================== */
.vh-wordmark {
  display: inline-block; text-decoration: none; color: inherit;
  font-family: var(--font-sans); font-weight: 900; text-transform: uppercase;
  font-size: 22px; line-height: 0.82; letter-spacing: -0.02em;
}
.vh-wordmark span { display: block; }
.vh-wordmark--lg { font-size: 64px; }
.vh-wordmark--inline { font-size: 15px; line-height: 0.84; }

/* Hero: the hand plate. Placeholder for the VH-04 duotone palm. */
.vh-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--rule); }
.vh-hero__plate {
  background: var(--blue); position: relative; min-height: 420px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.vh-hero__plate { padding: 0; text-decoration: none; }
.vh-hero__logo {
  display: block; width: 100%; height: 100%;
  max-height: 100%; object-fit: contain;
}
.vh-hero__copy {
  background: var(--yellow); color: var(--on-yellow);
  padding: var(--space-16); display: flex; flex-direction: column;
  justify-content: center; gap: var(--space-4); align-items: flex-start;
}
@media (max-width: 900px) { .vh-hero { grid-template-columns: 1fr; } .vh-hero__plate { min-height: 300px; } }

/* ---------- Tool chrome ---------- */
.vh-tool { max-width: 1120px; }
.vh-field { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-6); }
.vh-field label { font-weight: 700; font-size: 14px; line-height: 20px; }
.vh-input, .vh-select {
  font-family: var(--font-sans); font-size: 16px; line-height: 24px;
  padding: var(--space-3); border: 2px solid var(--rule); border-radius: var(--radius-none);
  background: var(--surface-page); color: var(--ink); width: 100%;
}
.vh-room { border: 2px solid var(--rule); padding: var(--space-6); margin-bottom: var(--space-6); background: var(--surface-paper); }
.vh-room__n { color: var(--ink-muted); }
.vh-result { border: 2px solid var(--rule); padding: var(--space-8); margin-top: var(--space-8); }
.vh-tally { display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; background: var(--rule); margin: var(--space-6) 0; }
.vh-tally > div { padding: var(--space-6); background: var(--surface-page); }
.vh-tally strong { display: block; font-size: 40px; line-height: 38px; font-weight: 900; }
@media (max-width: 560px) { .vh-tally { grid-template-columns: 1fr; } }
.vh-list { padding-left: var(--space-6); }
.vh-list li { margin-bottom: var(--space-2); }

/* A section directly after a title card was stacking two --space-16 paddings
   (128px + leading). The title card's own bottom padding is the designed gap. */
.vh-title-card + .vh-page__section,
.vh-title-card + .vh-app,
.vh-title-card + .vh-split { padding-top: 0; }
.vh-title-card + .vh-app,
.vh-title-card + .vh-split { margin-top: var(--space-4); }

/* ==========================================================================
   WIDE LAYOUT
   .vh-page__section is a flex column with align-items:flex-start so that
   headings and buttons size to their content. That also stopped container
   children from reaching their own max-width. Stretch the containers; their
   max-width still caps them, and prose keeps its 60ch measure.
   ========================================================================== */
.vh-page__section > div,
.vh-page__section > ol,
.vh-page__section > ul,
.vh-page__section > table,
.vh-page__section > form,
.vh-page__section > figure { align-self: stretch; }

/* Roomier gutters once there is room to spare. */
@media (min-width: 1500px) {
  .vh-page__nav, .vh-page__section, .vh-title-card, .vh-page__foot,
  .vh-actionbar { padding-left: var(--space-20); padding-right: var(--space-20); }
}

/* ==========================================================================
   DESIGN INDEX — internal review page
   ========================================================================== */
.vh-idx { border-top: 2px solid var(--rule); }
.vh-idx__group { border-bottom: 2px solid var(--rule); padding: var(--space-8) 0; }
.vh-idx__group > h2 { margin: 0 0 var(--space-2); }
.vh-idx__group > p { margin: 0 0 var(--space-6); color: var(--ink-muted);
                     font-size: 15px; line-height: 22px; max-width: 60ch; }
.vh-idx__rows { display: grid; gap: 2px; background: var(--rule);
                border: 2px solid var(--rule); }
.vh-idx__row { background: var(--surface-page); display: grid;
               grid-template-columns: 1fr 190px 120px; gap: var(--space-4);
               align-items: center; padding: var(--space-4) var(--space-6);
               text-decoration: none; color: var(--ink); }
.vh-idx__row:hover { background: var(--yellow); color: var(--on-yellow); }
.vh-idx__row b { font-size: 17px; line-height: 22px; font-weight: 700; }
.vh-idx__row code { font-family: ui-monospace, Menlo, Consolas, monospace;
                    font-size: 12px; line-height: 16px; color: var(--ink-muted); display: block; }
.vh-idx__row:hover code { color: var(--on-yellow); }
.vh-idx__note { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.vh-idx__row:hover .vh-idx__note { color: var(--on-yellow); }
.vh-tag { justify-self: start; font-size: 10px; line-height: 14px; font-weight: 700;
          letter-spacing: 0.12em; text-transform: uppercase; padding: 2px var(--space-2);
          background: var(--surface-inverse); color: var(--ink-inverse); white-space: nowrap; }
.vh-tag--working { background: var(--yellow); color: var(--on-yellow); }
.vh-tag--design  { background: var(--blue);   color: var(--on-blue); }
.vh-tag--todo    { background: var(--red);    color: var(--on-red); }
.vh-tag--content { background: var(--surface-paper); color: var(--ink-muted); }
@media (max-width: 760px) {
  .vh-idx__row { grid-template-columns: 1fr; gap: var(--space-2); }
}