/* SP-38 (Intake Revision) — Visual Pass 1: Assembled Intake Specimen.
   PRESENTATION ONLY on the Stage 13 mechanical baseline. This sheet replaces
   pass2a.css (kept in the snapshots) for the assembled page. It is a specimen
   for evaluating the whole intake as one document, not a final commitment.

   Visual language: the real CR site tokens (Home/Forum shells) — system-ui
   stack, #152536 dark, #d0d5db borders, #0d6efd brand, the 1130px envelope,
   the Forum header's [logo | Citroën Registry | divider | context] structure.
   NOTE: the "SP-38 mockup" named in the directive could not be located; this
   pass is therefore built from the site's own language and the accepted
   three-column grammar, and is flagged so the mockup's character can be
   applied later without structural rework.

   Structure: one continuous page; regions separated by a numbered heading with
   a hairline rule (no boxes around ordinary question groups); one reusable
   question | control | reference row (`.followup-row`, `.vin-card__body`,
   `.cr-qrow` all share it); the closing portion is a tinted band, not a card. */

:root{
  --cr-clamp:1130px;
  --cr-text:#222;
  --cr-muted:#5a6772;
  --cr-border:#d0d5db;
  --cr-hair:#e4e8ed;
  --cr-dark:#152536;
  --cr-brand:#0d6efd;
  --cr-bg:#eceef1;
  --cr-tint:#f5f7fa;
  --cr-ok:#1f7a4d;
  --cr-progress:#8bd39b;   /* light green: filled progress segments */
  --cr-warn:#b7791f;
  --cr-bad:#a12626;
  --cr-font:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --c1:270px;          /* question column */
  --c3:210px;          /* reference column */
  --colgap:36px;
  --header-h:63px;
  /* Body-type line-art icon width (Model/Body/Coachwork column 1 - .body-art img).
     R21 protocol lever: one token governs every current and future body-type icon in
     this slot, so "bump the icon size" is a single-line change here, not a per-image
     edit. History (SP-38 (Intake Revision) change log, R11-R14): 190px -> +5% ->
     199.5px -> +5% -> 209.5px -> +3% -> 215.8px (approved 2026-09-20). R21 (2026-09-22)
     continues that lineage one more +5% step: 215.8 * 1.05 = 226.6px. */
  --cr-body-icon-w:226.6px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-padding-top:120px; }
body{
  margin:0; background:var(--cr-bg); color:var(--cr-text);
  font-family:var(--cr-font); font-size:16px; line-height:1.5;
}

/* ---------- development-only chrome (loopback hosts only) ---------- */
.dev-strip{ display:none; background:var(--cr-dark); color:#fff; padding:6px 16px; font-size:12.5px; }
.dev-strip strong{ color:#ffb84d; }
html.dev .dev-strip{ display:block; }
.debug-panel{ background:#1e1e1e; color:#c9d1d9; border-radius:6px; padding:14px 18px; font-family:Consolas,monospace; font-size:12.5px; }
.debug-panel h4{ margin:0 0 10px; color:#7fd0ff; font-family:var(--cr-font); }
.debug-panel pre{ white-space:pre-wrap; word-break:break-word; margin:6px 0; }
.debug-label{ color:#8b949e; }
#dev-diagnostics{ display:none; }
.cr-devwrap{ max-width:var(--cr-clamp); margin:24px auto 40px; padding:0 20px; }

/* ================= HEADER (adapted from the Forum header) ================= */
/* R18: the sticky header spans the whole viewport by nature, so it must carry NO surface of its own (a background, border or
   shadow on it can never be width-capped). Its white surface and its shadow are drawn by a separately positioned ::before
   capped to the 1130px envelope - the same fix as the Forum's .App-header (Forum_Faint_Line_Investigation_Abstract.md). */
.cr-header{ position:sticky; top:0; z-index:100; background:transparent; box-shadow:none; }
.cr-header::before{
  content:''; position:absolute; z-index:-1; top:0; bottom:0; left:50%; width:min(100%, var(--cr-clamp)); transform:translateX(-50%);
  background:#fff; box-shadow:0 8px 18px -12px rgba(21,37,54,.28); pointer-events:none;
}
.cr-header__inner{ max-width:var(--cr-clamp); margin:0 auto; padding:0 40px 2px; }
.cr-header__bar{ display:flex; align-items:center; min-height:var(--header-h); gap:10px; }
.cr-header__brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--cr-dark); }
.cr-header__logo{ width:auto; height:40px; display:block; }
.cr-header__title{ font-size:18px; font-weight:700; line-height:40px; white-space:nowrap; }
.cr-header__context{
  flex:none; display:flex; flex-direction:column;
  margin-left:10px; padding-left:20px; border-left:1px solid var(--cr-border);
  font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  line-height:20px; color:#000; white-space:nowrap;
}
.cr-header__side{ flex:none; margin-left:auto; display:flex; flex-direction:column; align-items:flex-end; line-height:20px; }
.cr-header__nav{ display:flex; gap:18px; font-size:14px; }
.cr-header__nav a{ color:var(--cr-muted); text-decoration:none; padding:0; line-height:20px; border-bottom:2px solid transparent; }
.cr-header__nav a:hover{ color:var(--cr-dark); border-bottom-color:var(--cr-brand); }

.cr-summary-wrap{ flex:1 1 auto; min-width:0; display:flex; align-items:flex-start; gap:8px; min-height:40px; margin-left:6px; margin-right:22px; }
.sticky-summary{
  flex:1 1 auto; min-width:0; display:flex; flex-wrap:wrap; column-gap:20px; row-gap:0;
  max-height:40px; overflow:hidden; padding:0; margin:0; background:none; border:0; box-shadow:none;
  position:static; font-size:12.5px; line-height:20px; color:var(--cr-dark);
}
.sticky-summary.is-open{ max-height:none; }
.sticky-summary:empty::before{ content:'Nothing selected yet \2014  your choices will gather here'; color:var(--cr-muted); font-style:italic; }
/* Refinement 1: summary items are plain text (no pills), same type as before. */
.cr-chip, .sticky-summary__line{
  display:inline; padding:0; border:0; border-radius:0; background:none;
  color:var(--cr-dark); font-size:12.5px; line-height:20px; white-space:nowrap; max-width:100%; overflow:hidden; text-overflow:ellipsis;
}
.cr-summary-toggle{
  flex:none; border:0; background:none; color:var(--cr-brand); font:inherit; font-size:12.5px; font-weight:600;
  padding:0 2px; line-height:20px; cursor:pointer; white-space:nowrap;
}
.cr-summary-toggle[hidden]{ display:none; }

/* R24 (2026-09-23): "Start Over" relocated from the alt-noses column to
   sit directly before the save-status indicator - an open (outline) circle
   matching the save dot's exact size, so the two read as a matched pair on
   one line: "o Start Over    * Draft saved". */
.cr-header__status-row{ display:flex; align-items:center; gap:22px; }
.cr-start-over{ flex:none; display:inline-flex; align-items:center; gap:7px; font-size:12.5px; line-height:20px; color:var(--cr-muted); white-space:nowrap; cursor:pointer; }
.cr-start-over[hidden]{ display:none; }
.cr-start-over__dot{ width:9px; height:9px; border-radius:50%; border:1.5px solid var(--cr-muted); box-sizing:border-box; }
.cr-start-over:hover{ color:var(--cr-dark); }
.cr-start-over:hover .cr-start-over__dot{ border-color:var(--cr-dark); }
.cr-save{ flex:none; display:inline-flex; align-items:center; gap:7px; padding-top:0; font-size:12.5px; line-height:20px; color:var(--cr-muted); white-space:nowrap; }
.cr-save__dot{ width:9px; height:9px; border-radius:50%; background:#b9c1cb; }
.cr-save[data-state="saved"] .cr-save__dot{ background:var(--cr-ok); }
.cr-save[data-state="saved"]{ color:var(--cr-dark); }
.cr-save[data-state="saving"] .cr-save__dot{ background:var(--cr-warn); animation:cr-pulse 1s ease-in-out infinite; }
.cr-save[data-state="failed"] .cr-save__dot{ background:var(--cr-bad); }
.cr-save[data-state="failed"]{ color:var(--cr-bad); font-weight:600; }
.cr-save[data-state="submitted"] .cr-save__dot{ background:var(--cr-dark); }
.cr-save[data-state="submitted"]{ color:var(--cr-dark); font-weight:600; }
@keyframes cr-pulse{ 50%{ opacity:.35; } }

/* Progress (specimen): one segment per intake area; a segment fills when the
   area holds at least one answer. Derived from existing state only. */
.cr-progress{ display:flex; gap:4px; margin-top:1px; padding:9px 0 8px; border-top:1px solid var(--cr-hair); border-bottom:1px solid var(--cr-border); }
.cr-progress__seg{ flex:1 1 0; min-width:0; }
.cr-progress__bar{ height:4px; border-radius:2px; background:#dfe4ea; }
.cr-progress__name{ margin-top:4px; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:#8794a1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cr-progress__seg.is-done .cr-progress__bar{ background:var(--cr-progress); height:5px; margin-bottom:-1px; }
.cr-progress__seg.is-done .cr-progress__name{ color:var(--cr-dark); font-weight:600; }
.cr-progress__seg.is-placeholder .cr-progress__bar{ background:transparent; border:1px dashed #a9b3be; height:4px; }
.cr-progress__seg.is-placeholder .cr-progress__name{ font-style:italic; }

/* ---------- notice (save failure, in the new visual language) ---------- */
.cr-notice{ display:none; max-width:var(--cr-clamp); margin:0 auto; }
.cr-notice.is-failure{
  display:block; margin-top:14px; padding:12px 20px; background:#fdf1f1; color:#6f1a1a;
  border-left:4px solid var(--cr-bad); font-size:14.5px; line-height:1.45;
}
.cr-notice.is-failure button{
  margin-left:10px; padding:5px 14px; border:1px solid var(--cr-bad); background:#fff; color:var(--cr-bad);
  border-radius:6px; font:inherit; font-size:13.5px; font-weight:600; cursor:pointer;
}
html.dev .cr-notice:not(.is-failure){ display:block; padding:4px 20px; font-size:11.5px; color:#8794a1; background:transparent; }

/* ================= PAGE FRAME ================= */
.cr-frame{
  counter-reset:region;
  max-width:var(--cr-clamp); margin:0 auto; background:#fff;
  box-shadow:0 0 24px rgba(0,0,0,.05); padding:4px 40px 0;
}
.intake-card{ margin:0; }
hr.section-divider{ display:none !important; }

/* Region headings: numbered, with a hairline rule — the only structure between
   question groups. */
.cr-region__title,
#vin-root > .era-3col__eyebrow,
#engine-root > .era-3col__eyebrow{
  counter-increment:region;
  display:flex; align-items:baseline; gap:14px;
  margin:58px 0 6px; padding-top:22px; border-top:1px solid var(--cr-border);
  font-size:24px; font-weight:700; line-height:1.2; color:var(--cr-dark);
  text-transform:none; letter-spacing:0;
}
.cr-region__title::before,
#vin-root > .era-3col__eyebrow::before,
#engine-root > .era-3col__eyebrow::before{
  content:counter(region, decimal-leading-zero);
  font-size:13px; font-weight:700; letter-spacing:.09em; color:var(--cr-brand);
}
#region-year .cr-region__title{ border-top:0; margin-top:34px; padding-top:0; }

.cr-prompt{ margin:14px 0 14px; font-size:19px; font-weight:600; color:var(--cr-text); }
.cr-prompt em{ font-style:italic; }
#body-root:not(:empty)::before{
  content:'Model / Body / Coachwork'; display:block; margin:40px 0 14px; padding-top:22px;
  border-top:1px solid var(--cr-border);
  font-size:24px; font-weight:700; line-height:1.2; color:var(--cr-dark);
}

/* ---------- Era / Body visual selectors (restyled, not restructured) ---------- */
.noses-initial, .bodytypes-initial{ display:grid; gap:18px; list-style:none; margin:0; padding:0; }
.noses-initial{ grid-template-columns:repeat(3,1fr); }
.bodytypes-initial{ grid-template-columns:repeat(4,1fr); gap:12px; }
.nose-choice, .bodytype-choice{
  background:#fff; border:1px solid var(--cr-border); border-radius:6px; padding:14px;
  text-align:center; cursor:pointer; transition:border-color .12s ease, box-shadow .12s ease;
}
.nose-choice:hover, .bodytype-choice:hover{ border-color:var(--cr-brand); box-shadow:0 4px 14px rgba(13,110,253,.10); }
.nose-choice img{ width:100%; max-width:200px; border-radius:4px; }
.nose-choice__label{ font-weight:600; margin-top:8px; color:var(--cr-dark); }
.nose-choice__hint{ font-size:12.5px; color:var(--cr-muted); }
.bodytype-choice{ padding:18px 10px; font-weight:600; color:var(--cr-dark); }

.era-3col{
  display:grid; grid-template-columns:1.25fr 1fr .95fr; gap:0;
  background:none; border:0; box-shadow:none; border-radius:0; overflow:visible;
}
.era-3col__col{ padding:6px 26px 6px 0; }
.era-3col__col + .era-3col__col{ border-left:1px solid var(--cr-hair); padding-left:26px; }
.era-3col .era-3col__eyebrow{
  margin:0 0 10px; font-size:12px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--cr-muted);
}
.year-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.year-btn, .body-detail-btn{
  border:1px solid var(--cr-border); background:#fff; color:var(--cr-text); border-radius:6px;
  font:inherit; font-size:14.5px; font-weight:600; cursor:pointer;
  transition:border-color .12s ease, background .12s ease, color .12s ease;
}
.year-btn{ padding:11px 4px; }
.year-btn:hover, .body-detail-btn:hover{ border-color:var(--cr-brand); }
.year-btn--dimmed{ opacity:.5; }
.year-btn--selected, .body-detail-btn--selected{ background:var(--cr-dark); border-color:var(--cr-dark); color:#fff; opacity:1; }
.active-nose{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.active-nose img{ width:100%; max-width:190px; border-radius:4px; }
.active-nose__label{ margin-top:10px; font-weight:700; color:var(--cr-dark); }
.active-nose__hint{ font-size:12.5px; color:var(--cr-muted); }
.alt-noses, .alt-bodies{ display:flex; flex-direction:column; gap:10px; justify-content:center; height:100%; }
.alt-nose, .alt-body{
  display:flex; align-items:center; gap:10px; border:1px solid var(--cr-hair); border-radius:6px;
  padding:8px 10px; background:#fafbfc; cursor:pointer; font-size:13px; transition:border-color .12s ease, background .12s ease;
}
.alt-body{ font-weight:600; color:var(--cr-dark); padding:10px 12px; }
.alt-nose:hover, .alt-body:hover{ border-color:var(--cr-brand); background:#fff; }
.alt-nose img{ width:40px; height:40px; object-fit:contain; flex:none; }
.alt-nose__label{ display:block; font-weight:600; color:var(--cr-dark); }
.alt-nose__hint{ font-size:11.5px; color:var(--cr-muted); }
.active-body{ display:flex; align-items:center; justify-content:center; height:100%; text-align:center; }
.active-body__label{ font-weight:700; color:var(--cr-dark); font-size:17px; }
.body-detail-list{ display:flex; flex-direction:column; gap:8px; }
.body-detail-btn{ text-align:left; padding:10px 14px; font-size:14px; }

/* ================= QUESTION | CONTROL | REFERENCE ROW =================
   One grammar for every ordinary question. Column 1: the question (verbatim
   wording) and its help; column 2: the control; column 3: reference material.
   The three markup shapes the intake already emits share it. */
.followup-row, .vin-card__body, .cr-qrow{
  display:grid; grid-template-columns:var(--c1) minmax(0,1fr) var(--c3);
  column-gap:var(--colgap); row-gap:2px; align-items:start;
  padding:0; margin:0; margin-top:26px;
  background:none; border:0; border-radius:0; box-shadow:none;
}
.vin-card__field{ display:contents; }
.followup-row__label, .cr-q-label{
  grid-column:1; margin:0; font-size:16px; font-weight:600; line-height:1.35; color:var(--cr-text);
  text-transform:none; letter-spacing:0;
}
.vin-card__help, .cr-q-help{ grid-column:1; margin:0; font-size:13px; line-height:1.4; color:var(--cr-muted); }
.vin-card__help strong{ color:var(--cr-text); font-size:16px; font-weight:600; }
.followup-row > select, .followup-row > input, .followup-row > .body-detail-list,
.followup-row > .followup-row__combined,
.vin-card__field > input, .vin-card__field > select, .vin-card__field > .body-detail-list,
.cr-qrow__c{
  grid-column:2; grid-row:1 / span 3; min-width:0;
}
.vin-card__img, .cr-qrow__r{ grid-column:3; grid-row:1 / span 3; }
.vin-card__img{ width:100%; max-width:190px; border:1px solid var(--cr-hair); border-radius:4px; display:block; }
.cr-qrow__q{ grid-column:1; }

.followup-row__select, .followup-row__text, .body-detail-select{
  width:100%; height:44px; padding:0 12px; font:inherit; font-size:15px; color:var(--cr-text);
  background:#fff; border:1px solid var(--cr-border); border-radius:6px;
}
select.followup-row__select, select.body-detail-select{
  appearance:none; -webkit-appearance:none; padding-right:36px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235a6772' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center;
}
.followup-row__select:hover, .followup-row__text:hover, .body-detail-select:hover{ border-color:#aab3bd; }
/* R26 (2026-09-23): "DX2 -" as a fixed lead-in inside the Motor Number
   field, visually one box - the wrapper carries the border/height/padding
   normally on the input itself, and the nested input resets to borderless. */
.followup-row__combined{
  display:flex; align-items:center; height:44px; padding:0 12px; gap:6px;
  background:#fff; border:1px solid var(--cr-border); border-radius:6px;
}
.followup-row__combined:hover{ border-color:#aab3bd; }
.followup-row__combined--disabled{ background:var(--cr-tint); border-style:dashed; }
.followup-row__prefix{ flex:none; white-space:nowrap; font:inherit; font-size:15px; font-weight:600; color:var(--cr-text); }
.followup-row__text--suffixed{ flex:1 1 auto; min-width:0; height:auto; padding:0; border:0; border-radius:0; background:transparent; }
.followup-row__text--suffixed:disabled{ background:transparent; cursor:not-allowed; }
select:focus-visible, input:focus-visible, button:focus-visible, a:focus-visible{ outline:2px solid var(--cr-brand); outline-offset:1px; }
.followup-row .body-detail-list{ max-width:520px; }
.vin-card__field > .body-detail-list{ max-width:520px; }

/* ================= CLOSING PORTION: photo, contact, Submit ================= */
.cr-closing{
  margin:64px -40px 0; padding:4px 40px 0; background:var(--cr-tint); border-top:2px solid var(--cr-dark);
  counter-increment:region;
}
.cr-closing .cr-region__title{ counter-increment:none; border-top:0; margin-top:26px; padding-top:0; }
.cr-closing .cr-region__title::before{ content:counter(region, decimal-leading-zero); }
.cr-closing{ padding-bottom:52px; }

.cr-qrow--placeholder{ margin-top:22px; }
.cr-photo-drop{
  display:flex; align-items:center; gap:22px; padding:18px 22px; max-width:560px;
  border:1.5px dashed #a9b3be; border-radius:10px; background:#fff;
}
.cr-photo-drop__art{ width:150px; height:auto; flex:none; opacity:.9; }
.cr-photo-drop__text{ display:flex; flex-direction:column; gap:2px; font-size:14px; color:var(--cr-muted); flex:1; }
.cr-photo-drop__text strong{ color:var(--cr-dark); font-size:15.5px; }
.cr-tag{
  display:inline-block; margin:0; padding:3px 9px; border-radius:999px; font-size:11px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:#7a5b12; background:#fdf3d6; border:1px solid #f0dea0;
}

#contact-root{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:18px 20px; margin-top:44px; }
#contact-root > .era-3col__eyebrow{
  grid-column:1 / -1; margin:0; font-size:19px; font-weight:700; color:var(--cr-dark);
  text-transform:none; letter-spacing:0;
}
#contact-root > .followup-row{ display:block; margin:0; }
#contact-root .followup-row__label{ display:block; font-size:13.5px; margin-bottom:6px; }
#contact-root .followup-row > input{ grid-column:auto; }
#contact-root > .followup-row:nth-child(2), #contact-root > .followup-row:nth-child(3){ grid-column:span 3; }
#contact-root > .followup-row:nth-child(4), #contact-root > .followup-row:nth-child(5){ grid-column:span 6; }
#contact-root > .followup-row:nth-child(6), #contact-root > .followup-row:nth-child(7), #contact-root > .followup-row:nth-child(8){ grid-column:span 2; }
#contact-root > .followup-row:nth-child(9), #contact-root > .followup-row:nth-child(10){ grid-column:span 3; }

#complete-root{ margin-top:38px; padding-top:26px; border-top:1px solid var(--cr-border); }
.cr-complete__note{ margin:0 0 14px; max-width:620px; font-size:14px; color:var(--cr-muted); }
.cr-complete__error{ margin:0 0 12px; color:var(--cr-bad); font-weight:700; font-size:14.5px; }
.cr-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px; height:48px; padding:0 28px;
  border-radius:6px; font:inherit; font-size:16px; font-weight:600; cursor:pointer; border:1px solid var(--cr-dark);
  text-decoration:none; transition:background .12s ease, border-color .12s ease;
}
.cr-btn--primary{ background:var(--cr-dark); color:#fff; }
.cr-btn--primary:hover:not(:disabled){ background:var(--cr-brand); border-color:var(--cr-brand); }
.cr-btn--ghost{ background:#fff; color:var(--cr-dark); height:40px; padding:0 18px; font-size:14px; }
.cr-btn:disabled{ opacity:.6; cursor:not-allowed; }
.cr-btn.is-busy{ opacity:1; cursor:progress; background:var(--cr-dark); }
.cr-btn.is-busy::before{
  content:''; width:16px; height:16px; border-radius:50%; border:2px solid rgba(255,255,255,.35); border-top-color:#fff;
  animation:cr-spin .8s linear infinite;
}
@keyframes cr-spin{ to{ transform:rotate(360deg); } }

/* ================= CONFIRMATION / POST-CONTRIBUTION HUB ================= */
#confirm-root:not(:empty){ padding-top:34px; padding-bottom:56px; }
.hub__title{ margin:0 0 6px; font-size:30px; line-height:1.2; color:var(--cr-dark); }
/* R25 (2026-09-23): top area is two columns - left (title + entry recap),
   right (the "Survey Confirmation" badge, above the photo, top-aligned
   with the title). Replaces R24's side-by-side recap+pill row: the badge
   is no longer a pill (standing rule, Citroen_Registry_Design_Paradigms_
   Abstract.md #10 - no pills sitewide) but an outline cell matching the
   site's own card corner radius, green border/text preserved from the
   pill it replaces. The lede paragraph ("Your contribution is complete...")
   was removed outright, not relocated. */
.hub__top{ display:flex; align-items:flex-start; justify-content:space-between; gap:28px; margin-bottom:34px; }
.hub__top-left{ flex:1 1 auto; min-width:0; }
.hub__top-right{ flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:12px; }
.hub__confirmed-badge{
  display:inline-block; padding:.5rem 1rem; border-radius:8px;
  border:1px solid var(--cr-ok); background:#fff; color:var(--cr-ok); font-weight:700; font-size:12px;
  letter-spacing:.06em; text-transform:uppercase; white-space:nowrap;
}
.hub__recap{ display:flex; flex-wrap:wrap; gap:4px 24px; min-width:0; }
.hub__recap .cr-chip{ white-space:normal; overflow:visible; font-size:14px; line-height:1.5; }
.hub__recap-label{ width:100%; margin:0 0 4px; font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--cr-muted); }
.hub__section{ margin:0 0 14px; padding-top:18px; border-top:1px solid var(--cr-border); font-size:19px; font-weight:700; color:var(--cr-dark); }
.hub__grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-bottom:32px; }
.hub-tile{
  display:flex; flex-direction:column; gap:8px; padding:18px 18px 16px; border:1px solid var(--cr-border);
  border-radius:8px; background:#fff; min-height:150px; text-decoration:none; color:inherit;
}
.hub-tile h3{ margin:0; font-size:17px; color:var(--cr-dark); }
.hub-tile p{ margin:0; font-size:13.5px; color:var(--cr-muted); line-height:1.45; }
.hub-tile .cr-tag{ align-self:flex-start; margin-top:auto; }
.hub-tile.is-live{ border-color:var(--cr-dark); }
.hub-tile.is-live:hover{ border-color:var(--cr-brand); box-shadow:0 4px 14px rgba(13,110,253,.10); }
.hub-tile.is-live .cr-btn{ align-self:flex-start; margin-top:auto; }
.hub-tile__btnrow{ display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; }
.hub-tile__btnrow .cr-btn{ margin-top:0; }
.hub-tile.is-later{ border-style:dashed; background:#fafbfc; }
.hub-tile.is-later h3{ color:#5f6c79; }
.hub-tile.is-transitional .cr-tag{ color:#7a5b12; }
.hub__foot{ margin:0; font-size:14px; color:var(--cr-muted); }

/* ================= FOOTER (Home-style, subordinate) ================= */
.cr-footer{ max-width:var(--cr-clamp); margin:0 auto; padding:14px 40px 26px; text-align:right; }
.cr-footer small{ font-size:.72rem; color:rgba(0,0,0,.6); }


/* ================= MOBILE ================= */
@media (max-width:900px){
  :root{ --c1:220px; --c3:150px; --colgap:24px; }
  .cr-frame{ padding:4px 24px 0; }
  .cr-closing{ margin-left:-24px; margin-right:-24px; padding-left:24px; padding-right:24px; }
}
@media (max-width:760px){
  :root{ --header-h:52px; }
  html{ scroll-padding-top:130px; }
  .cr-header__inner{ padding:0 18px 2px; }
  .cr-header__logo{ height:32px; }
  .cr-header__title{ font-size:16px; line-height:32px; }
  .cr-header__nav{ display:none; }
  .cr-header__bar{ flex-wrap:wrap; row-gap:0; min-height:0; }
  .cr-header__brand{ order:1; height:var(--header-h); flex:1 1 auto; }
  .cr-header__side{ order:2; margin-left:auto; height:var(--header-h); justify-content:center; }
  .cr-header__context{ order:3; margin-left:0; padding-left:0; border-left:0; padding-right:12px; }
  .cr-summary-wrap{ order:4; flex:1 1 0; margin-left:0; margin-right:0; }
  .cr-header__bar::after{ content:''; order:2; flex-basis:100%; height:0; }
  .sticky-summary:empty::before{ content:'Nothing selected yet'; }
  .cr-progress__name{ display:none; }
  .cr-progress{ padding-bottom:6px; }

  .cr-frame{ padding:0 18px 0; }
  #confirm-root:not(:empty){ padding-bottom:40px; }
  .cr-closing{ margin-left:-18px; margin-right:-18px; padding-left:18px; padding-right:18px; }
  .cr-region__title, #vin-root > .era-3col__eyebrow, #engine-root > .era-3col__eyebrow{ font-size:21px; margin-top:44px; }
  .followup-row, .vin-card__body, .cr-qrow{ grid-template-columns:minmax(0,1fr); row-gap:8px; margin-top:24px; }
  .followup-row__label, .vin-card__help, .cr-q-help, .cr-q-label, .cr-qrow__q{ grid-column:1; grid-row:auto; }
  .followup-row > select, .followup-row > input, .followup-row > .body-detail-list,
  .vin-card__field > input, .vin-card__field > select, .vin-card__field > .body-detail-list,
  .cr-qrow__c, .vin-card__img, .cr-qrow__r{ grid-column:1; grid-row:auto; }
  .vin-card__img{ max-width:240px; }
  .noses-initial{ grid-template-columns:1fr; }
  .bodytypes-initial{ grid-template-columns:1fr 1fr; }
  .era-3col{ grid-template-columns:1fr; }
  .era-3col__col{ padding:6px 0; }
  .era-3col__col + .era-3col__col{ border-left:0; border-top:1px solid var(--cr-hair); padding-left:0; margin-top:14px; padding-top:14px; }
  .cr-photo-drop{ flex-direction:column; align-items:flex-start; }
  #contact-root{ grid-template-columns:1fr 1fr; }
  #contact-root > .followup-row:nth-child(n+2){ grid-column:span 2; }
  #contact-root > .followup-row:nth-child(7), #contact-root > .followup-row:nth-child(8){ grid-column:span 1; }
  .hub__grid{ grid-template-columns:1fr; }
  .hub__title{ font-size:24px; }
  .cr-footer{ padding:12px 18px 22px; }
  .cr-btn--primary{ width:100%; }
}


/* ================= Refinement 3 (user-directed) ================= */
/* (b) Region numerals removed (they were a specimen flourish, not content). */
.cr-region__title::before,
#vin-root > .era-3col__eyebrow::before,
#engine-root > .era-3col__eyebrow::before,
.cr-closing .cr-region__title::before{ content:none !important; }
.cr-region__title, #vin-root > .era-3col__eyebrow, #engine-root > .era-3col__eyebrow{ gap:0; }

/* (c) The series prompt: above the Nose tiles in the initial state; once a Nose
   is chosen it moves (script) to sit above the alternatives column. */
#region-year.has-era > .cr-prompt{ display:none; }
.cr-prompt--col{ margin:0 0 12px; font-size:17px; line-height:1.3; font-weight:600; color:var(--cr-text); }
#intake-root .alt-noses{ justify-content:flex-start; height:auto; }

/* (a) Selected Era row, visual order: [Nose image] [Model Year] [alternatives].
   DOM order is unchanged (order only), so borders are re-applied to the visual
   middle and right columns. */
#intake-root .era-3col{ grid-template-columns:1fr 1.25fr .95fr; }
#intake-root .era-3col__col:nth-child(1){ order:2; }
#intake-root .era-3col__col:nth-child(2){ order:1; }
#intake-root .era-3col__col:nth-child(3){ order:3; }
#intake-root .era-3col__col + .era-3col__col{ border-left:0; padding-left:0; }
#intake-root .era-3col__col:nth-child(1),
#intake-root .era-3col__col:nth-child(3){ border-left:1px solid var(--cr-hair); padding-left:26px; }
@media (max-width:760px){
  #intake-root .era-3col{ grid-template-columns:1fr; }
  #intake-root .era-3col__col:nth-child(1),
  #intake-root .era-3col__col:nth-child(3){ border-left:0; padding-left:0; border-top:1px solid var(--cr-hair); margin-top:14px; padding-top:14px; }
}


/* ================= Refinement 4: Vehicle Identification in three columns ================= */
.vin3{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) var(--c3);
  column-gap:var(--colgap); align-items:start;
}
.vin3__col{ min-width:0; }
.vin3 .vin-card__body, .vin3 .followup-row{ display:block; margin-top:26px; }
.vin3 .vin-card__field{ display:block; }
.vin3 .vin-card__help, .vin3 .followup-row__label{ display:block; margin:0 0 4px; }
.vin3 .vin-card__field > input, .vin3 .vin-card__field > select, .vin3 .vin-card__field > .body-detail-list,
.vin3 .followup-row > input, .vin3 .followup-row > select{ display:block; width:100%; margin-top:8px; }
.vin3 .vin-card__field > .body-detail-list{ max-width:none; }
.vin3__fig{ margin:26px 0 0; }
.vin3__fig .vin-card__img{ width:100%; max-width:190px; }
.vin3__fig figcaption{ margin-top:6px; font-size:12.5px; line-height:1.35; color:var(--cr-muted); }
@media (max-width:760px){
  .vin3{ grid-template-columns:1fr; }
  .vin3__col--tags{ order:1; } .vin3__col--refs{ order:2; } .vin3__col--other{ order:3; }
  .vin3__col--refs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:0 14px; }
}

.vin3 .vin-card__field > .body-detail-list{ display:flex; flex-direction:column; gap:8px; width:100%; margin-top:8px; }


/* ================= Refinement 7: two-line heads, aligned rows, Color Code placeholder ================= */
/* Columns 1 and 2 share one grid so that row n of each sits on the same
   horizontal plane whatever the wrapping; column 3 (photos) is separate. */
.vin3{ grid-template-columns:minmax(0,1fr) var(--c3); }
.vin3__fields{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  column-gap:var(--colgap); align-items:end; grid-auto-flow:row dense; min-width:0;
}
.vin3__col--tags, .vin3__col--other{ display:contents; }
.vin3__col--tags > *{ grid-column:1; }
.vin3__col--other > *{ grid-column:2; }
.vin3 .cr-input-placeholder{
  display:block; width:100%; height:44px; margin-top:8px; padding:0 12px; font:inherit; font-size:15px;
  background:var(--cr-tint); border:1px dashed var(--cr-border); border-radius:6px; cursor:not-allowed;
}
@media (max-width:760px){
  .vin3{ grid-template-columns:1fr; }
  .vin3__fields{ display:contents; }
  .vin3__col--tags, .vin3__col--other{ display:block; }
  .vin3__col--tags > *, .vin3__col--other > *{ grid-column:auto; }
}


/* ================= Refinement 8: Engine, Transmission, LHM - LHS on the same 3-column grid ================= */
.vin3__fields > [data-col="1"]{ grid-column:1; }
.vin3__fields > [data-col="2"]{ grid-column:2; }
.vin3 input.followup-row__text:disabled{ background:var(--cr-tint); border-style:dashed; cursor:not-allowed; }
@media (max-width:760px){
  .vin3__fields > [data-col]{ grid-column:auto; }
}
@media (max-width:760px){
  .vin3 .vin-card__help[aria-hidden="true"]{ display:none; }
}

.vin3__fields > [data-row="3"]{ grid-row:3; }
@media (max-width:760px){ .vin3__fields > [data-row]{ grid-row:auto; } }

/* ================= Refinement 10: context-dependent photo-widget art ================= */
/* The Break line art is a white-background raster; multiply lets the tinted
   band show through the white so it reads as line art, not a pasted photo. */
.cr-photo-drop__art--flat{ mix-blend-mode:multiply; opacity:1; width:210px; }


/* ================= Refinement 11: Model / Body / Coachwork ================= */
/* Same column proportions as the Year of Manufacture row above (1 : 1.25 : .95). */
#body-root .era-3col{ grid-template-columns:1fr 1.25fr .95fr; }
/* Line art: same width as the Nose image above (190px), centred in column 1. */
.body-art{ display:flex; justify-content:center; align-items:flex-start; padding-top:4px; }
.body-art img{ width:100%; max-width:var(--cr-body-icon-w); height:auto; display:block; }
/* Per-body-type override (R23, 2026-09-22): the shared --cr-body-icon-w token assumes a
   roughly-square drawing with a real top margin baked in, like the Break masters. The
   Berline (Sedan) master (dsid-n3-berln-01) is a much wider/flatter canvas (2.32:1 vs
   ~1.78:1) with almost no baked-in top margin (1.3% of its own height vs the Break's
   10-17%), so at the shared width it renders both visibly shorter and tighter to the top
   than the Wagon. Fixed locally to this one pool rather than by touching the shared rule
   (which the Wagon already renders correctly under): extra top padding to match the
   Wagon's composition, plus +3% width (226.6 * 1.03 = 233.4px) to close the size gap. */
.body-art--Berln{ padding-top:18px; }
.body-art--Berln img{ max-width:233.4px; }
@media (max-width:760px){ #body-root .era-3col{ grid-template-columns:1fr; } }


/* ================= Refinement 12 ================= */
/* Column 2: pull heading + options up so the first control's top is level with
   the top of the first alternative in column 3 (which is now top-aligned, so the
   two stay level for every body type, not just Break). Offsets: col padding 6 +
   (-13) + eyebrow 18 + 10 gap = 21px = col padding 6 + alternatives margin 15. */
#body-root .era-3col__col:nth-child(2) > .era-3col__eyebrow{ margin-top:-13px; }
#body-root .alt-bodies{ justify-content:flex-start; height:auto; margin-top:15px; }
@media (max-width:760px){
  #body-root .era-3col__col:nth-child(2) > .era-3col__eyebrow{ margin-top:0; }
  #body-root .alt-bodies{ margin-top:0; }
}


/* ================= Refinement 14 ================= */
/* Photo landing box: upper edge level with the top of the "Photo and Contact"
   title (desktop only; stacked on mobile). */


/* ================= Refinement 15: closing row — note left, button right ================= */
@media (min-width:761px){
  #complete-root{ display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:24px; align-items:start; }
  #complete-root > .cr-complete__error{ grid-column:1 / -1; }
  #complete-root > .cr-complete__note{ grid-column:1; margin:0; }
  #complete-root > .cr-btn{ grid-column:2; justify-self:end; min-width:214px; margin-top:6px; }
}

/* SP-41 (Intake Cutover) Item 6 - real-device finding (operator, iPhone SE2): iOS Safari zooms the page in when a form
   field with text under 16px is tapped, and the zoomed page can then be dragged a few pixels sideways. Every field was
   15px. On phone widths they are 16px (the threshold); desktop is unchanged. Pinch-zoom stays available (accessibility). */
@media (max-width:760px){
  input:not([type=file]):not([type=checkbox]):not([type=radio]), select:not([multiple]):not([size]), textarea:not([readonly]){ font-size:16px; } /* :not() lifts specificity above the .followup-row__select / .body-detail-select class rules */
}

/* R28 (2026-09-24): Comments, in the natural space under the photo frame - for the Registry admin only, never published.
   The field matches the form's other text fields; phones get 16px through the shared field rule above (no iOS tap-zoom).
   How it moves once a large photo expands the frame is deliberately left for a later round (operator). */
.cr-comments{ margin-top:22px; display:flex; flex-direction:column; gap:6px; }
.cr-comments__byline{ margin:0; font-size:13px; font-style:italic; line-height:1.4; color:var(--cr-muted); }
.cr-comments__text{
  display:block; width:100%; min-height:120px; padding:10px 12px; box-sizing:border-box; resize:vertical;
  font:inherit; font-size:15px; line-height:1.45; color:var(--cr-text);
  background:#fff; border:1px solid var(--cr-border); border-radius:6px;
}
.cr-comments__text:hover{ border-color:#aab3bd; }
.cr-comments__meta{ display:flex; justify-content:flex-end; margin:0; min-height:18px; font-size:12.5px; color:var(--cr-muted); } /* the counter only (R29: no save status is shown) */
/* The confirmation page shows the comment back to its author (not the header summary - too cramped; operator). */
.hub__comment{ margin-top:16px; }
.hub__comment-note{ text-transform:none; letter-spacing:0; font-weight:400; font-style:italic; }
.hub__comment-text{ margin:0; font-size:14px; line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere; }

/* R30 (2026-09-24), SP-39 (User Email) section 12: the E1 opt-in directly under Email Address. Greyed and inert until the
   address looks like one (the page and the adapter both drop E1 without a usable address). */
/* R30b: inside the Email row, directly under the box, one line in a small font (operator). */
.cr-e1{ display:flex; align-items:center; gap:7px; margin:7px 0 0; font-size:12.5px; line-height:1.3; white-space:nowrap; color:var(--cr-text); cursor:pointer; }
.cr-e1 input{ margin:0; width:14px; height:14px; flex:none; accent-color:var(--cr-dark); cursor:pointer; }
@media (max-width:760px){ .cr-e1{ white-space:normal; align-items:flex-start; } .cr-e1 input{ margin-top:1px; } }  /* phones: same size, may wrap to two lines (operator) */
.cr-e1.is-disabled{ color:var(--cr-muted); cursor:default; }
.cr-e1.is-disabled input{ cursor:default; }
.hub__e1-note{ margin:14px 0 0; font-size:14px; color:var(--cr-text); }