/* UTEC Configurator Prototype — styles
   Mobile-first. 375px min-width works without horizontal scroll.

   Brand tokens sourced from utec.co (/assets/css/utec.css :root) — UTE-145.
   Variables named `--navy` / `--blue` etc. are kept operational so existing
   selectors don't have to change; they now resolve to UTEC's actual values:
   primary surface = black, accent = UTEC orange. Aliases prefixed `--utec-*`
   carry the canonical brand names.

   Single deviation from utec.co: `--radius: 2px` (utec.co uses 0, but the
   configurator has 30+ small repeating tap targets where strict 0 reads
   harsher than utec.co does at scale — Eric, 2026-05-03).
*/

/* ── Reset / base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ── Canonical UTEC brand tokens (from utec.co/assets/css/utec.css) ──── */
  --utec-orange:                 #FC5220;
  --utec-orange-dark:            #e8451a;
  --utec-orange-accessible:      #C94200;  /* 4.71:1 contrast on white — buttons */
  --utec-orange-accessible-hover:#A83500;
  --utec-black:                  #191817;
  --utec-true-black:             #000000;
  --utec-off-white:              #F7F7F7;
  --utec-dark-grey:              #2B2B2B;
  --utec-body-text:              rgba(0, 0, 0, 0.8);
  --utec-border-grey:            #E6E9EB;
  --utec-white:                  #FFFFFF;
  --utec-focus-blue:             #2680EB;  /* focus ring only — not an accent */

  /* ── Operational aliases (existing selectors reference these names) ──── */
  /* "navy" → UTEC primary text/surface (black) */
  --navy:        var(--utec-true-black);
  --navy-light:  var(--utec-dark-grey);
  /* "blue" → UTEC accent (orange). Buttons use the accessible variant. */
  --blue:        var(--utec-orange-accessible);
  --blue-hover:  var(--utec-orange-accessible-hover);
  --blue-light:  #FFF1EB;            /* tinted-orange surface for selected states */
  --green:       #16a34a;            /* status only — kept for success banners */
  --red:         #dc2626;            /* status only — error/required asterisk */
  --red-light:   #fef2f2;
  --amber:       #d97706;            /* status only — warn banners / out-of-range */
  --amber-light: #fffbeb;
  --gray-50:     var(--utec-off-white);
  --gray-100:    #F1F2F3;            /* one step darker than off-white */
  --gray-200:    var(--utec-border-grey);
  --gray-400:    #9CA0A4;
  --gray-500:    #6B6F73;
  --gray-600:    #4B5055;
  --gray-800:    var(--utec-dark-grey);
  --white:       var(--utec-white);

  /* ── Layout / typography ─────────────────────────────────────────────── */
  --radius:      2px;                /* configurator-only: utec.co uses 0 */
  --shadow-sm:   0 1px 2px rgba(0,0,0,.06);
  --shadow:      0 2px 8px rgba(0,0,0,.08);
  --shadow-md:   0 4px 16px rgba(0,0,0,.10);
  --font:        'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Header (matches utec.co .site-header) */
  --nav-height:  64px;

  /* Letter-spacing scale (utec.co convention) */
  --tracking-cta:    2px;            /* CTAs / buttons */
  --tracking-nav:    2px;            /* nav labels */
  --tracking-eyebrow:1.5px;          /* small uppercase eyebrows */

  --transition-fast:   0.15s ease;
  --transition-normal: 0.25s ease;
}

html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  background: var(--utec-off-white);
  color: var(--utec-body-text);
  line-height: 1.6;
  min-height: 100vh;
  padding-bottom: 90px; /* room for sticky bar */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Layout ───────────────────────────────────────────────────────────────── */
.configurator-shell {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 16px;
}

/* ── Header ───────────────────────────────────────────────────────────────── */
/* Mirrors utec.co .site-header: white surface, 64px tall, 1px border,
   subtle shadow on scroll, black wordmark, orange hover underline. */
.cfg-header {
  background: var(--utec-white);
  color: var(--utec-true-black);
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--utec-border-grey);
  transition: box-shadow var(--transition-normal);
}
.cfg-header.is-scrolled {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
.cfg-header-inner {
  max-width: 860px;
  margin: 0 auto;
  height: var(--nav-height);
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.cfg-brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.cfg-brand img {
  height: 34px;
  width: auto;
  display: block;
}
.cfg-step-title {
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-nav);
  color: var(--utec-true-black);
  flex: 1;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Reset & restart — small subtle link in the header. Findable but not
   inviting accidental clicks (small font, plain underlined link, not a
   styled button). Confirmation dialog protects against misclicks. */
.cfg-reset-link {
  flex-shrink: 0;
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--utec-orange-accessible);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.cfg-reset-link:hover  { color: var(--utec-orange-accessible-hover); }
.cfg-reset-link:focus  { outline: 2px solid var(--utec-focus-blue); outline-offset: 2px; }

/* Progress bar — sits flush at the bottom edge of the header on the white track.
   Orange accent fill against the off-white track is the intended look. */
.progress-bar-track {
  position: absolute;
  bottom: -1px;          /* covers the 1px border-bottom on .cfg-header */
  left: 0;
  right: 0;
  height: 3px;
  background: var(--utec-border-grey);
  overflow: hidden;
}
.progress-bar-fill {
  height: 100%;
  background: var(--utec-orange);
  transition: width .3s ease;
}

/* Step pills (desktop) — utec.co doesn't have a tab-pill component to mirror,
   so we use a flat treatment that reads as part of the white header. */
.step-pills {
  display: none;
  gap: 4px;
  margin-top: 10px;
  flex-wrap: wrap;
}
@media (min-width: 600px) { .step-pills { display: flex; } }

.step-pill {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  padding: 4px 10px;
  border-radius: var(--radius);
  cursor: default;
  color: var(--gray-500);
  background: transparent;
  border: 1px solid var(--utec-border-grey);
  transition: all var(--transition-fast);
  white-space: nowrap;
}
.step-pill.active {
  background: var(--utec-true-black);
  color: var(--utec-white);
  border-color: var(--utec-true-black);
}
.step-pill.clickable { cursor: pointer; }
.step-pill.clickable:hover {
  color: var(--utec-orange);
  border-color: var(--utec-orange);
}

/* ── Step content ─────────────────────────────────────────────────────────── */
.step-content {
  padding: 28px 0 16px;
}
.step-heading {
  font-size: 1.6rem;          /* utec.co h2 */
  font-weight: 700;
  line-height: 1.3;
  color: var(--utec-true-black);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.step-subheading {
  font-size: 1rem;
  color: var(--utec-body-text);
  margin-bottom: 24px;
  line-height: 1.6;
  max-width: 60ch;
}

/* ── Card grid (Step 1) ───────────────────────────────────────────────────── */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}
@media (max-width: 400px) { .card-grid { grid-template-columns: 1fr 1fr; } }

.type-card {
  background: var(--utec-white);
  border: 1px solid var(--utec-border-grey);
  border-radius: var(--radius);
  padding: 18px 12px 14px;
  cursor: pointer;
  text-align: center;
  transition: border-color var(--transition-fast),
              box-shadow var(--transition-normal),
              transform var(--transition-normal);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  outline: none;
}
.type-card:hover   {
  border-color: var(--utec-orange);
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
  transform: translateY(-2px);
}
.type-card:focus-visible {
  outline: 3px solid var(--utec-focus-blue);
  outline-offset: 2px;
}
.type-card.selected {
  border-color: var(--utec-orange);
  border-width: 2px;
  padding: 17px 11px 13px;       /* compensate for +1px border */
  background: var(--blue-light); /* tinted-orange surface — see :root */
}

.type-card svg { width: 44px; height: 44px; color: var(--utec-true-black); }
.type-card.selected svg { color: var(--utec-orange); }

.card-label {
  font-size: .875rem;
  font-weight: 700;
  color: var(--utec-true-black);
  line-height: 1.3;
}
.card-desc {
  font-size: .78rem;
  color: var(--utec-dark-grey);
  line-height: 1.5;
}

/* ── Forms ────────────────────────────────────────────────────────────────── */
/* Mirrors utec.co .card: white surface, 1px border, no shadow at rest. */
.form-section {
  background: var(--utec-white);
  border: 1px solid var(--utec-border-grey);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 16px;
}
.form-section-title {
  font-size: .75rem;             /* 12px — utec.co --font-size-footer-title */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--utec-true-black);
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--utec-border-grey);
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
  margin-bottom: 12px;
}
@media (max-width: 480px) { .field-row { grid-template-columns: 1fr; } }
.field-row.single { grid-template-columns: 1fr; }
.field-row.triple { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 520px) { .field-row.triple { grid-template-columns: 1fr 1fr; } }

.field-group { display: flex; flex-direction: column; gap: 5px; }
label {
  font-size: .82rem;
  font-weight: 600;
  color: var(--gray-800);
  display: flex;
  align-items: center;
  gap: 4px;
}
label .req { color: var(--red); font-size: .75rem; }

input[type="number"],
input[type="text"],
input[type="email"],
input[type="tel"],
select {
  width: 100%;
  padding: 9px 11px;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius);
  font-size: .9rem;
  font-family: var(--font);
  color: var(--gray-800);
  background: var(--white);
  transition: border-color .15s;
  -webkit-appearance: none;
}
input[type="number"]:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
select:focus {
  outline: none;
  border-color: var(--utec-orange);
  box-shadow: 0 0 0 3px rgba(252, 82, 32, .15);
}
input.error, select.error { border-color: var(--red); }
input[readonly] { background: var(--gray-50); color: var(--gray-600); cursor: not-allowed; }

.field-error {
  font-size: .78rem;
  color: var(--red);
  line-height: 1.4;
  display: flex;
  align-items: flex-start;
  gap: 4px;
}
.field-hint {
  font-size: .78rem;
  color: var(--gray-600);
  line-height: 1.4;
}

/* Inline label + radios sharing a single .field-hint block (e.g. UTE-213
   "Measured across:" convention picker). The leading <span> title sits on
   its own row at the field's left edge; the radio labels stack below it
   left-aligned, so the radios line up with the field above rather than
   floating to the right of the title (2026-05-14 fix). */
.field-hint-radios {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.field-hint-radios > label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
.field-hint-radios > label > input[type="radio"] {
  margin: 0;
}

/* ── Field footnote (e.g., hub-thickness explanation) ───────────────────── */
.field-footnote {
  margin-top: 14px;
  padding: 10px 12px;
  background: var(--utec-off-white);
  border-left: 3px solid var(--utec-border-grey);
  border-radius: var(--radius);
  font-size: .8rem;
  line-height: 1.55;
  color: var(--utec-body-text);
  scroll-margin-top: calc(var(--nav-height) + 12px);  /* anchor jump clears sticky header */
}
.field-footnote ul { margin: 6px 0 0 18px; list-style: disc; }
.field-footnote li { margin-bottom: 2px; }
.field-footnote strong { color: var(--utec-true-black); }
.hub-footnote-ref {
  text-decoration: none;
  color: var(--utec-orange-accessible);
  font-weight: 700;
  font-size: .85em;
  vertical-align: super;
  margin-left: 2px;
}
.hub-footnote-ref:hover { color: var(--utec-orange-accessible-hover); }

/* ── Radio card groups ────────────────────────────────────────────────────── */
.radio-card-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.radio-card-group.horizontal {
  flex-direction: row;
  flex-wrap: wrap;
}
.radio-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--white);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 11px 14px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.radio-card:hover { border-color: var(--blue); }
.radio-card input[type="radio"] { margin-top: 2px; flex-shrink: 0; accent-color: var(--blue); }
.radio-card.selected { border-color: var(--blue); background: var(--blue-light); }
.radio-card-content { display: flex; flex-direction: column; gap: 2px; }
.radio-card-label  { font-size: .875rem; font-weight: 600; color: var(--gray-800); }
.radio-card-note   { font-size: .78rem; color: var(--gray-600); line-height: 1.4; }

/* ── Tread profile visual select ─────────────────────────────────────────── */
.tread-profile-group {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.tread-card {
  border: 2px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 12px 10px;
  text-align: center;
  cursor: pointer;
  background: var(--white);
  transition: border-color .15s;
  min-width: 0;
}
.tread-card:hover   { border-color: var(--blue); }
.tread-card.selected { border-color: var(--blue); background: var(--blue-light); }
.tread-card-label  { font-size: .8rem; font-weight: 600; color: var(--navy); margin-top: 8px; }
.tread-card-note   { font-size: .73rem; color: var(--gray-600); margin-top: 3px; line-height: 1.4; }

.tread-svg { width: 60px; height: 30px; display: block; margin: 0 auto; }

/* ── Info / warning banners ───────────────────────────────────────────────── */
.info-banner, .warn-banner, .out-of-range-banner, .success-banner {
  border-radius: var(--radius);
  padding: 12px 14px;
  font-size: .85rem;
  line-height: 1.5;
  margin-bottom: 14px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
/* Info uses a neutral surface — orange is reserved for accent / CTA, never info.
   Amber and green keep their semantic roles (warn, success). */
.info-banner    { background: var(--utec-off-white); color: var(--utec-true-black); border-left: 4px solid var(--utec-true-black); }
.warn-banner    { background: var(--amber-light); color: #92400e; border-left: 4px solid var(--amber); }
.out-of-range-banner { background: var(--amber-light); color: #92400e; border-left: 4px solid var(--amber); }
.success-banner { background: #f0fdf4; color: #166534; border-left: 4px solid var(--green); }

/* ── Checkbox rows (NDE / options) ───────────────────────────────────────── */
.checkbox-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius);
  cursor: pointer;
  margin-bottom: 8px;
  background: var(--white);
  transition: border-color .15s;
}
.checkbox-item:hover { border-color: var(--blue); }
.checkbox-item.checked { border-color: var(--blue); background: var(--blue-light); }
.checkbox-item input[type="checkbox"] { margin-top: 2px; flex-shrink: 0; accent-color: var(--blue); }
.checkbox-item-content { flex: 1; }
.checkbox-item-label { font-size: .875rem; font-weight: 600; color: var(--gray-800); }
.checkbox-item-note  { font-size: .78rem; color: var(--gray-600); margin-top: 2px; line-height: 1.4; }

/* ── Always-included panel ────────────────────────────────────────────────── */
.always-included {
  background: #f0fdf4;
  border: 1.5px solid #bbf7d0;
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 16px;
}
.always-included-title {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--green);
  margin-bottom: 8px;
}
.always-included ul { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.always-included li { font-size: .85rem; color: #166534; display: flex; align-items: flex-start; gap: 6px; }
.always-included li::before { content: "✓"; font-weight: 700; flex-shrink: 0; }

/* ── Review step ─────────────────────────────────────────────────────────── */
.spec-table { width: 100%; border-collapse: collapse; }
.spec-table tr:nth-child(even) td { background: var(--gray-50); }
.spec-table td {
  padding: 7px 10px;
  font-size: .875rem;
  vertical-align: top;
  border-bottom: 1px solid var(--gray-100);
}
.spec-table .spec-label { color: var(--gray-600); font-weight: 600; width: 45%; }
.spec-table .spec-value { color: var(--gray-800); }
/* UTE-252 follow-up — section headers (Configuration & application,
   Mounting bore & hub, Tread & flange detail / Groove detail, Optional
   features, Hardness finishing & order). Higher specificity than the
   nth-child(even) zebra band so the header tint always wins regardless of
   row index. */
.spec-table tr.spec-section-header td.spec-section-label {
  background: var(--blue-light);
  border-top: 2px solid var(--blue);
  border-bottom: 1px solid var(--blue);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--blue);
  padding: 12px 10px 7px;
}
.spec-table tr.spec-section-header:first-child td.spec-section-label {
  border-top: 1px solid var(--blue);
}
.spec-table .edit-link {
  font-size: .78rem;
  color: var(--blue);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  padding-left: 6px;
}
.spec-table .edit-link:hover { text-decoration: underline; }

.price-block {
  text-align: center;
  padding: 24px 20px 20px;
}
.price-total {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--navy);
  line-height: 1;
}
.price-sub {
  font-size: .9rem;
  color: var(--gray-600);
  margin-top: 4px;
}
.price-leadtime {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--utec-off-white);
  border: 1px solid var(--utec-border-grey);
  border-radius: var(--radius);
  padding: 6px 14px;
  font-size: .82rem;
  color: var(--utec-true-black);
  font-weight: 600;
  margin-top: 12px;
}

.breakdown-table { width: 100%; border-collapse: collapse; margin-top: 10px; }
.breakdown-table td { padding: 5px 10px; font-size: .82rem; border-bottom: 1px solid var(--gray-100); }
.breakdown-table .bd-label { color: var(--gray-600); }
.breakdown-table .bd-value { text-align: right; font-weight: 600; color: var(--gray-800); }

.standards-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.standard-badge {
  background: var(--utec-true-black);
  color: var(--utec-white);
  font-size: .7rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--radius);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
}

.render-placeholder {
  background: var(--gray-100);
  border: 2px dashed var(--gray-400);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
  color: var(--gray-400);
  font-size: .875rem;
  font-style: italic;
  text-align: center;
  padding: 20px;
}

/* ── CTA buttons ─────────────────────────────────────────────────────────── */
/* Mirrors utec.co .btn: 48px min-height, uppercase, 2px tracking, 2px solid
   border so primary/secondary share the same footprint. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  border: 2px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font);
  font-size: .8125rem;          /* 13px — utec.co --font-size-cta */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-cta);
  cursor: pointer;
  padding: 10px 24px;
  transition: background-color var(--transition-fast), color var(--transition-fast),
              border-color var(--transition-fast);
  text-decoration: none;
  white-space: nowrap;
}
.btn:focus-visible {
  outline: 3px solid var(--utec-focus-blue);
  outline-offset: 2px;
}
.btn-primary   {
  background: var(--utec-orange-accessible);
  color: var(--utec-white);
  border-color: var(--utec-orange-accessible);
}
.btn-primary:hover {
  background: var(--utec-orange-accessible-hover);
  border-color: var(--utec-orange-accessible-hover);
}
.btn-secondary {
  background: transparent;
  color: var(--utec-true-black);
  border-color: var(--utec-true-black);
}
.btn-secondary:hover {
  color: var(--utec-orange);
  border-color: var(--utec-orange);
}
.btn-success   {
  background: var(--green);
  color: var(--white);
  border-color: var(--green);
}
.btn-amber     {
  background: var(--amber);
  color: var(--white);
  border-color: var(--amber);
}
.btn-danger    {
  background: var(--red);
  color: var(--white);
  border-color: var(--red);
}
.btn:disabled  { opacity: .45; cursor: not-allowed; pointer-events: none; }
.btn-full      { width: 100%; }
.btn-sm        {
  font-size: .75rem;
  min-height: 36px;
  padding: 6px 14px;
  letter-spacing: var(--tracking-eyebrow);
}

/* ── Sticky bottom navigation bar ────────────────────────────────────────── */
.sticky-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--white);
  border-top: 1px solid var(--gray-200);
  z-index: 200;
  box-shadow: 0 -4px 12px rgba(0,0,0,.08);
}
.sticky-nav-inner {
  max-width: 860px;
  margin: 0 auto;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.sticky-price-preview {
  font-size: .9rem;
  color: var(--navy);
}
.sticky-price-value {
  font-weight: 800;
  font-size: 1.1rem;
}
.sticky-nav-btns {
  display: flex;
  gap: 10px;
}

/* ── Debug panel ─────────────────────────────────────────────────────────── */
#utec-debug-panel {
  display: none;
  background: var(--gray-800);
  color: #a3e635;
  font-family: 'Courier New', monospace;
  font-size: .78rem;
  padding: 16px;
  border-radius: var(--radius);
  margin-top: 20px;
  max-height: 320px;
  overflow-y: auto;
  white-space: pre;
  line-height: 1.5;
}

/* ── Utility ─────────────────────────────────────────────────────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.divider { height: 1px; background: var(--gray-200); margin: 16px 0; }
.mt-8  { margin-top:  8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mb-8  { margin-bottom:  8px; }
.mb-12 { margin-bottom: 12px; }
[x-cloak] { display: none !important; }

/* ── Loading spinner ─────────────────────────────────────────────────────── */
.spinner {
  width: 24px; height: 24px;
  border: 3px solid var(--gray-200);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Live error region ────────────────────────────────────────────────────── */
#cfg-errors-live {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
}

/* ── Derived value display (UTE-141) ──────────────────────────────────────── */
.derived-display {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 12px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  font-size: 14px;
  color: var(--gray-800);
}
.derived-display strong { font-size: 15px; }
.derived-label { color: var(--gray-600); white-space: nowrap; }
.derived-formula {
  font-size: 11px;
  color: var(--gray-400);
  font-style: italic;
  cursor: help;
}

/* ── Read-only dimension rows in Step 4 (UTE-141) ────────────────────────── */
.readonly-dims {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.readonly-dim-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--blue-light);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
}
.readonly-dim-label {
  flex: 0 0 130px;
  font-size: 14px;
  color: var(--gray-600);
}
.readonly-dim-value { flex: 1; font-size: 15px; }

/* ── Inline checkbox-with-label row (UTE-212 face-recess toggle) ─────────── */
.checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  cursor: pointer;
}
.checkbox-row input[type="checkbox"] { margin: 0; }

.edit-back-link {
  background: none;
  border: none;
  color: var(--blue);
  font-size: 13px;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  white-space: nowrap;
}
.edit-back-link:hover { color: var(--blue-hover); }

/* ── Step 3 override UI (UTE-142) ────────────────────────────────────────── */
.step-subheading-meta {
  font-size: 13px;
  color: var(--gray-600);
  margin-bottom: 20px;
  line-height: 1.5;
}
.radio-card-hrc {
  display: inline-block;
  margin-left: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--utec-orange-accessible);
  background: var(--blue-light);
  border-radius: var(--radius);
  padding: 1px 6px;
  white-space: nowrap;
}
.override-section {
  border-top: 1px solid var(--gray-200);
  padding-top: 16px;
}
.override-toggle-link {
  background: none;
  border: none;
  color: var(--blue);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-align: left;
}
.override-toggle-link:hover { color: var(--blue-hover); }
.override-hint {
  font-size: 13px;
  color: var(--gray-600);
  margin-top: 6px;
  line-height: 1.5;
}
.override-panel {
  margin-top: 14px;
  padding: 16px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
}

/* UTE-183 — Step 3 bore-type derivation banner */
.derivation-banner {
  padding: 14px 16px;
  background: var(--utec-off-white);
  border-left: 4px solid var(--utec-orange);
  border-radius: var(--radius);
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.derivation-label    { font-size: 15px; color: var(--utec-true-black); }
.derivation-rationale { font-size: 13px; color: var(--gray-600); font-style: italic; }
.form-section-title-meta {
  font-size: 13px;
  font-weight: 400;
  color: var(--gray-500);
  text-transform: none;
  letter-spacing: 0;
}
.link-btn {
  background: none;
  border: none;
  color: var(--blue);
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  font: inherit;
}
.link-btn:hover { color: var(--blue-hover); }

/* ── Parametric render module (UTE-139) ─────────────────────────────────────
   Namespaced .cfg-render block — appended at bottom so brand-token edits
   above (UTE-145) flow through. SVG geometry uses currentColor exclusively;
   we set color on the container so the renderer adopts whatever brand tokens
   land. No hardcoded hex values here. */
.cfg-render-container {
  background: var(--white);
  border-radius: var(--radius);
  padding: 12px 16px;
  box-shadow: var(--shadow-sm);
}
.cfg-render {
  width: 100%;
  height: auto;
  max-height: 320px;        /* Step 2 — embedded preview */
  color: var(--navy);
  display: block;
}
/* .cfg-render-large used to carry max-height: 480px from when the class
   lived on individual render cells. The class now lives on the zone
   wrapper (.cfg-render-zone.cfg-render-large) — clamping the WRAPPER to
   480px while the inner cells each demand height: 480 forced the cells
   to overflow the zone by ~24px (the zone's 12px+12px vertical padding),
   landing on the first orange section-header band of the spec table
   below. Cell-level height locks from the UTE-252 follow-up already
   handle the 480px cap; the zone should auto-size around them. */
.cfg-render svg {
  width: 100%;
  height: auto;
  max-height: inherit;
  display: block;
}
.cfg-render text {
  font-family: var(--font);
  fill: var(--gray-600);
}
/* Tread-profile preview-scale footnote — sits directly below the SVG
   container; HTML so the message wraps naturally on narrow viewports
   (the SVG element would clip it). */
.render-footnote {
  margin-top: 6px;
  padding: 6px 10px;
  background: var(--utec-off-white);
  border-left: 3px solid var(--utec-border-grey);
  border-radius: var(--radius);
  font-size: .78rem;
  line-height: 1.45;
  color: var(--utec-body-text);
  font-style: italic;
}
/* Font sizes and stroke widths are emitted inline by the renderer, scaled
   per-render so a 4″ wheel and a 48″ wheel both render at ~constant on-screen
   pixel sizes. Defining font-size or stroke-width here would land in SVG
   user-space (where 1px = 1 user unit), which scales with the viewBox and
   breaks that contract. Step 7's larger preview (cfg-render-large, 480px max-
   height vs 320px) gets proportionally larger labels for free via container
   sizing. */

/* ── Three-up render zone (UTE-181) ─────────────────────────────────────────
   Hosts the schematic SVG (UTE-139), 3D parametric viewer (this issue), and
   nearest-anchor photo placeholder (UTE-182). On desktop ≥768px all three
   slots render side-by-side; on mobile <768px only the active mode is
   visible and the segmented toggle above selects which mode renders. The
   3D mode has a singleton WebGL canvas that viewer3d.attachTo() reparents
   into the active step's [data-viewer3d-host] on step change.

   Brand chrome on the toggle pills and reset-view button is INTERIM —
   TODO(UTE-145): swap to canonical brand tokens when UTE-145 commits. */
.cfg-render-zone {
  background: var(--white);
  border-radius: var(--radius);
  padding: 12px 16px;
  box-shadow: var(--shadow-sm);
}
.cfg-render-grid {
  display: grid;
  gap: 12px;
}
.cfg-render-toggle {
  display: none;          /* hidden on desktop — three-up grid covers it */
  gap: 4px;
  padding: 4px;
  margin-bottom: 8px;
  border: 1px solid var(--utec-border-grey);
  border-radius: var(--radius);
  background: var(--utec-off-white);
}
.cfg-render-pill {
  /* TODO(UTE-145): swap to canonical brand tokens when UTE-145 commits. */
  flex: 1;
  padding: 8px 12px;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--utec-body-text);
  background: transparent;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 120ms, color 120ms;
}
.cfg-render-pill:hover { background: var(--utec-white); }
.cfg-render-pill.active {
  background: var(--utec-orange-accessible);
  color: var(--utec-white);
}
.cfg-render-3d {
  position: relative;
  min-height: 240px;
  background: linear-gradient(135deg, #f4f5f7 0%, #e6e9ec 100%);
  border-radius: var(--radius);
  overflow: hidden;
}
.cfg-render-3d canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}
.cfg-render-reset {
  /* TODO(UTE-145): swap to canonical brand tokens when UTE-145 commits. */
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  padding: 6px 10px;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--utec-body-text);
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--utec-border-grey);
  border-radius: var(--radius);
  cursor: pointer;
}
.cfg-render-reset:hover { background: var(--utec-white); }
.cfg-render-photo {
  min-height: 240px;
  background: var(--utec-off-white);
  border: 1px dashed var(--utec-border-grey);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cfg-render-photo-empty {
  color: var(--gray-600);
  font-size: 0.85rem;
  font-style: italic;
  text-align: center;
  padding: 24px;
}
/* UTE-252 follow-up — Step 7 review preview height lock. Both render
   cells (SVG schematic + 3D canvas) need to fit exactly within 480px so
   neither bleeds down into the spec table's orange section header band.
   Before the fix: `.cfg-render-large .cfg-render-3d` set only
   min-height:480, relying on the cascaded `.cfg-render-large .cfg-render
   { max-height: 480 }` to clamp the ceiling. That min-height-only ceiling
   was getting expanded — likely by the WebGL canvas's intrinsic dims
   that Three.js's renderer.setSize sets inline — pushing the pane past
   480 and visually overlapping the table below. Explicit lock: both
   panes get height:480 + max-height:480, the grid row is pinned to 480
   so it can't grow with content, and overflow:hidden on the SVG cell
   matches the 3D cell's existing clip. */
.cfg-render-large .cfg-render-grid {
  grid-auto-rows: 480px;
}
.cfg-render-large .cfg-render-3d,
.cfg-render-large .cfg-render-photo,
.cfg-render-large .cfg-render-svg {
  height: 480px;
  min-height: 480px;
  max-height: 480px;
  overflow: hidden;
}
.cfg-render-large .cfg-render { max-height: 480px; }
.cfg-render-large .cfg-render-svg svg {
  width: 100%;
  height: 100%;
  max-height: none;
}

/* Desktop ≥768px: two columns side-by-side (SVG + 3D), toggle hidden.
   Photo placeholder is commented out in index.html until UTE-182 ships
   (Eric, 2026-05-07). When restoring, change to `1fr 1fr 1fr`. */
@media (min-width: 768px) {
  .cfg-render-grid {
    grid-template-columns: 1fr 1fr;
  }
  .cfg-render-toggle { display: none; }
}

/* Mobile <768px: single pane, segmented toggle visible.
   Only the active mode's pane is shown. */
@media (max-width: 767px) {
  .cfg-render-toggle { display: flex; }
  .cfg-render-zone[data-render-mode='svg']   .cfg-render-3d,
  .cfg-render-zone[data-render-mode='svg']   .cfg-render-photo,
  .cfg-render-zone[data-render-mode='3d']    .cfg-render-svg,
  .cfg-render-zone[data-render-mode='3d']    .cfg-render-photo,
  .cfg-render-zone[data-render-mode='photo'] .cfg-render-svg,
  .cfg-render-zone[data-render-mode='photo'] .cfg-render-3d { display: none; }
}