/* ==========================================================================
   AFO / DAFO CONFIGURATOR — DESIGN TOKENS
   Palette: clinical white + deep clinical blue, built for a medical-device
   product page. Numbered steps are used deliberately here because the
   configurator IS a real fitting sequence (device → side → measure →
   material → color → structure → branding → summary → order) — the
   numbering encodes the actual clinical workflow, not decoration.
   ========================================================================== */

:root {
  /* --- Color: 6 named tokens, everything else derives from these --- */
  --afo-white:        #ffffff;
  --afo-blue-900:      #0B3B66;   /* deep ink-blue, headings on light bg   */
  --afo-blue-700:      #0B5FA5;   /* primary action / brand blue          */
  --afo-blue-500:      #2B84C6;   /* hover / secondary accents            */
  --afo-blue-100:      #EAF3FA;   /* tinted section backgrounds            */
  --afo-teal-600:      #12799E;   /* structural-layer accent               */
  --afo-slate-700:     #1B2733;   /* body text                             */
  --afo-slate-500:     #64748B;   /* muted / secondary text                */
  --afo-slate-200:     #E2E8F0;   /* hairlines, borders                    */
  --afo-green-600:     #2E9E6D;   /* success / durability high             */
  --afo-amber-600:     #B9770E;   /* warning / durability mid              */
  --afo-red-600:       #C23B3B;   /* error / validation                    */

  /* --- Type: display face for headings, body face for content,
         mono face for measurement data (reads as clinical/precise) --- */
  --afo-font-display: 'Manrope', 'Segoe UI', system-ui, sans-serif;
  --afo-font-body:    'Inter', 'Segoe UI', system-ui, sans-serif;
  --afo-font-mono:    'JetBrains Mono', 'Courier New', monospace;

  /* --- Spacing / radius / elevation scale --- */
  --afo-space-1: 4px;
  --afo-space-2: 8px;
  --afo-space-3: 12px;
  --afo-space-4: 16px;
  --afo-space-5: 24px;
  --afo-space-6: 32px;
  --afo-space-7: 48px;
  --afo-space-8: 64px;

  --afo-radius-sm: 6px;
  --afo-radius-md: 10px;
  --afo-radius-lg: 16px;

  --afo-shadow-sm: 0 1px 2px rgba(11, 59, 102, 0.06);
  --afo-shadow-md: 0 4px 16px rgba(11, 59, 102, 0.10);
  --afo-shadow-lg: 0 12px 32px rgba(11, 59, 102, 0.14);

  --afo-transition: 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Respect reduced-motion preference across the whole tool */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ==========================================================================
   RESET / BASE
   ========================================================================== */
.afo-app, .afo-app * {
  box-sizing: border-box;
}
.afo-app {
  font-family: var(--afo-font-body);
  color: var(--afo-slate-700);
  background: var(--afo-white);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  max-width: 1280px;
  margin: 0 auto;
}
.afo-app h1, .afo-app h2, .afo-app h3, .afo-app h4 {
  font-family: var(--afo-font-display);
  color: var(--afo-blue-900);
  margin: 0 0 var(--afo-space-2);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.afo-app button {
  font-family: inherit;
  cursor: pointer;
}
.afo-app :focus-visible {
  outline: 3px solid var(--afo-blue-500);
  outline-offset: 2px;
}
.afo-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ==========================================================================
   SHELL LAYOUT — left progress rail + right live-preview canvas
   (the persistent SVG preview is the tool's signature element: it is
   always visible and always current, no matter which step is open)
   ========================================================================== */
.afo-shell {
  display: grid;
  grid-template-columns: 260px 1fr 380px;
  gap: var(--afo-space-6);
  padding: var(--afo-space-6) var(--afo-space-5);
}

@media (max-width: 1080px) {
  .afo-shell {
    grid-template-columns: 1fr;
  }
  .afo-rail { order: 1; }
  .afo-stage { order: 2; }
  .afo-preview { order: 0; position: static !important; }
}

/* ---- Progress rail ---- */
.afo-rail {
  border-right: 1px solid var(--afo-slate-200);
  padding-right: var(--afo-space-5);
}
.afo-rail-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--afo-slate-500);
  margin-bottom: var(--afo-space-4);
}
.afo-steps {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--afo-space-1);
}
.afo-step-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--afo-space-3);
  border: none;
  background: transparent;
  padding: var(--afo-space-3);
  border-radius: var(--afo-radius-md);
  text-align: left;
  color: var(--afo-slate-500);
  transition: background var(--afo-transition), color var(--afo-transition);
}
.afo-step-btn:hover:not(:disabled) { background: var(--afo-blue-100); }
.afo-step-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.afo-step-num {
  flex: 0 0 auto;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid var(--afo-slate-200);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--afo-font-mono);
  font-size: 12px;
  color: var(--afo-slate-500);
}
.afo-step-label { font-size: 14px; font-weight: 600; }
.afo-step-btn.is-active {
  background: var(--afo-blue-700);
  color: var(--afo-white);
}
.afo-step-btn.is-active .afo-step-num {
  border-color: var(--afo-white);
  color: var(--afo-white);
}
.afo-step-btn.is-complete .afo-step-num {
  background: var(--afo-green-600);
  border-color: var(--afo-green-600);
  color: var(--afo-white);
}

/* ---- Stage (main step content) ---- */
.afo-stage {
  min-width: 0;
  padding-bottom: var(--afo-space-6);
}
.afo-stage-header { margin-bottom: var(--afo-space-5); }
.afo-eyebrow {
  font-family: var(--afo-font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--afo-blue-700);
  margin-bottom: var(--afo-space-1);
  display: block;
}
.afo-stage-desc { color: var(--afo-slate-500); max-width: 60ch; }

/* ---- Preview panel (right column, sticky) ---- */
.afo-preview {
  position: sticky;
  top: var(--afo-space-5);
  align-self: start;
  background: var(--afo-white);
  border: 1px solid var(--afo-slate-200);
  border-radius: var(--afo-radius-lg);
  box-shadow: var(--afo-shadow-md);
  padding: var(--afo-space-5);
}
.afo-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--afo-space-3);
}
.afo-preview-header h3 { margin: 0; font-size: 15px; }
.afo-preview-badge {
  font-family: var(--afo-font-mono);
  font-size: 11px;
  color: var(--afo-slate-500);
  background: var(--afo-blue-100);
  padding: 2px 8px;
  border-radius: 999px;
}
.afo-preview-canvas {
  background: var(--afo-white);
  border: 1px dashed var(--afo-slate-200);
  border-radius: var(--afo-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 340px;
}
.afo-preview-canvas svg { width: 100%; height: auto; max-height: 420px; }
.afo-layer-toggles {
  margin-top: var(--afo-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--afo-space-2);
}
.afo-layer-toggle {
  display: flex;
  align-items: center;
  gap: var(--afo-space-2);
  font-size: 13px;
  padding: var(--afo-space-2);
  border-radius: var(--afo-radius-sm);
  border: 1px solid var(--afo-slate-200);
  background: var(--afo-white);
  position: relative;
}
.afo-layer-toggle input { accent-color: var(--afo-blue-700); }
.afo-layer-swatch {
  width: 10px; height: 10px; border-radius: 50%;
  flex: 0 0 auto;
}
.afo-layer-info-btn {
  margin-left: auto;
  border: none;
  background: none;
  color: var(--afo-slate-500);
  font-size: 12px;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1px solid var(--afo-slate-200);
}
.afo-tooltip {
  position: absolute;
  z-index: 20;
  bottom: calc(100% + 8px);
  left: 0;
  width: 220px;
  background: var(--afo-blue-900);
  color: var(--afo-white);
  padding: var(--afo-space-3);
  border-radius: var(--afo-radius-sm);
  font-size: 12.5px;
  box-shadow: var(--afo-shadow-lg);
}
.afo-tooltip strong { display: block; margin-bottom: 2px; }

/* ==========================================================================
   CARDS — device type / material selection
   ========================================================================== */
.afo-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--afo-space-4);
}
.afo-card {
  border: 2px solid var(--afo-slate-200);
  border-radius: var(--afo-radius-lg);
  background: var(--afo-white);
  padding: var(--afo-space-5);
  text-align: left;
  transition: border-color var(--afo-transition), box-shadow var(--afo-transition), transform var(--afo-transition);
  display: flex;
  flex-direction: column;
  gap: var(--afo-space-2);
}
.afo-card:hover { box-shadow: var(--afo-shadow-md); transform: translateY(-2px); }
.afo-card.is-selected {
  border-color: var(--afo-blue-700);
  box-shadow: 0 0 0 3px var(--afo-blue-100);
}
.afo-card-icon {
  width: 44px; height: 44px;
  border-radius: var(--afo-radius-md);
  background: var(--afo-blue-100);
  display: flex; align-items: center; justify-content: center;
  color: var(--afo-blue-700);
}
.afo-card-title { font-weight: 700; color: var(--afo-blue-900); }
.afo-card-desc { font-size: 13px; color: var(--afo-slate-500); }
.afo-card-meta {
  margin-top: auto;
  display: flex;
  gap: var(--afo-space-2);
  flex-wrap: wrap;
}
.afo-chip {
  font-family: var(--afo-font-mono);
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--afo-blue-100);
  color: var(--afo-blue-700);
}
.afo-stars { color: var(--afo-amber-600); font-size: 13px; letter-spacing: 1px; }

/* ==========================================================================
   FORM CONTROLS — measurements
   ========================================================================== */
.afo-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--afo-space-4);
}
.afo-field { display: flex; flex-direction: column; gap: var(--afo-space-1); }
.afo-field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--afo-blue-900);
  display: flex;
  align-items: center;
  gap: var(--afo-space-1);
}
.afo-field input, .afo-field textarea, .afo-field select {
  font-family: var(--afo-font-mono);
  font-size: 14px;
  padding: 10px 12px;
  border: 1.5px solid var(--afo-slate-200);
  border-radius: var(--afo-radius-sm);
  background: var(--afo-white);
  color: var(--afo-slate-700);
  transition: border-color var(--afo-transition);
}
.afo-field textarea { font-family: var(--afo-font-body); resize: vertical; min-height: 84px; }
.afo-field input:focus, .afo-field textarea:focus { border-color: var(--afo-blue-700); }
.afo-field input[aria-invalid="true"] { border-color: var(--afo-red-600); }
.afo-field-error {
  font-size: 12px;
  color: var(--afo-red-600);
}
.afo-field-hint { font-size: 12px; color: var(--afo-slate-500); }
.afo-tooltip-trigger {
  border: 1px solid var(--afo-slate-200);
  background: var(--afo-blue-100);
  color: var(--afo-blue-700);
  width: 16px; height: 16px;
  border-radius: 50%;
  font-size: 10px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* ==========================================================================
   COLOR CUSTOMIZATION
   ========================================================================== */
.afo-color-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--afo-space-3);
  border: 1px solid var(--afo-slate-200);
  border-radius: var(--afo-radius-md);
  margin-bottom: var(--afo-space-2);
}
.afo-color-row-label { font-weight: 600; font-size: 14px; }
.afo-color-row-controls { display: flex; align-items: center; gap: var(--afo-space-3); }
.afo-swatch-input {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 2px solid var(--afo-slate-200);
  padding: 0;
  background: none;
  overflow: hidden;
}
.afo-palette {
  display: flex;
  gap: var(--afo-space-2);
}
.afo-preset {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid var(--afo-white);
  box-shadow: 0 0 0 1px var(--afo-slate-200);
}
.afo-preset.is-active { box-shadow: 0 0 0 2px var(--afo-blue-700); }

/* ==========================================================================
   BRANDING
   ========================================================================== */
.afo-upload {
  border: 2px dashed var(--afo-slate-200);
  border-radius: var(--afo-radius-md);
  padding: var(--afo-space-5);
  text-align: center;
  color: var(--afo-slate-500);
  cursor: pointer;
}
.afo-upload:hover { border-color: var(--afo-blue-500); }
.afo-upload img { max-height: 64px; margin-bottom: var(--afo-space-2); }

/* ==========================================================================
   SUMMARY
   ========================================================================== */
.afo-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--afo-space-4);
}
.afo-summary-card {
  background: var(--afo-blue-100);
  border-radius: var(--afo-radius-md);
  padding: var(--afo-space-4);
}
.afo-summary-card h4 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; }
.afo-summary-card dl { margin: 0; }
.afo-summary-card dt { font-size: 12px; color: var(--afo-slate-500); margin-top: var(--afo-space-2); }
.afo-summary-card dd { margin: 0; font-family: var(--afo-font-mono); font-size: 14px; color: var(--afo-slate-700); }

/* ==========================================================================
   BUTTONS / NAV FOOTER
   ========================================================================== */
.afo-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--afo-space-2);
  border-radius: var(--afo-radius-md);
  padding: 12px 20px;
  font-weight: 700;
  font-size: 14px;
  border: 1.5px solid transparent;
  transition: background var(--afo-transition), color var(--afo-transition), border-color var(--afo-transition);
}
.afo-btn-primary { background: var(--afo-blue-700); color: var(--afo-white); }
.afo-btn-primary:hover { background: var(--afo-blue-900); }
.afo-btn-primary:disabled { background: var(--afo-slate-200); color: var(--afo-slate-500); cursor: not-allowed; }
.afo-btn-secondary { background: var(--afo-white); color: var(--afo-blue-700); border-color: var(--afo-blue-700); }
.afo-btn-secondary:hover { background: var(--afo-blue-100); }
.afo-btn-ghost { background: none; color: var(--afo-slate-500); }
.afo-footer-nav {
  display: flex;
  justify-content: space-between;
  margin-top: var(--afo-space-6);
  padding-top: var(--afo-space-5);
  border-top: 1px solid var(--afo-slate-200);
}

/* ==========================================================================
   TOAST / LIVE REGION
   ========================================================================== */
.afo-toast {
  position: fixed;
  bottom: 24px; right: 24px;
  background: var(--afo-blue-900);
  color: var(--afo-white);
  padding: 12px 18px;
  border-radius: var(--afo-radius-md);
  box-shadow: var(--afo-shadow-lg);
  font-size: 14px;
  z-index: 999;
}

/* ==========================================================================
   PRINT / PDF EXPORT
   ========================================================================== */
@media print {
  .afo-rail, .afo-footer-nav, .afo-layer-toggles, .afo-no-print { display: none !important; }
  .afo-shell { grid-template-columns: 1fr; }
  .afo-preview { position: static; box-shadow: none; }
  body { background: #fff; }
}