/* ==========================================================================
   AXING FTTR Configurator — Stylesheet
   ========================================================================== */

/* --- Variables ----------------------------------------------------------- */
:root {
  --ax: #009993;
  --ax-light: #e8f4f4;
  --ax-dark: #007a75;

  --bg: #ffffff;
  --bg-subtle: #f5f7f9;
  --bg-muted: #eaecf0;
  --bg-input: #f0f2f5;
  --border: #d0d5dc;
  --border-light: #e2e6eb;

  --text: #1c2028;
  --text-muted: #5c6370;
  --text-light: #8b919d;

  --success: #16a34a;
  --success-bg: #f0fdf4;
  --warning: #d97706;
  --warning-bg: #fffbeb;
  --warning-text: #92400e;
  --danger: #dc2626;
  --danger-bg: #fef2f2;

  --fs: 16px;
  --fs-sm: 15px;
  --fs-lg: 1.125rem;
  --fs-xl: 1.25rem;

  --radius: 10px;
  --radius-sm: 6px;

  /* Spacing scale — used for padding, margin, gap. Pick the closest step.
     --space-3-5 is a half-step (10px) between --space-3 and --space-4, used
     by notice/warn blocks where the 8px/12px options both look off. */
  --space-1: 0.25rem;
  --space-2: 0.375rem;
  --space-3: 0.5rem;
  --space-3-5: 0.625rem;
  --space-4: 0.75rem;
  --space-5: 1rem;
  --space-6: 1.25rem;
  --space-7: 1.5rem;

  /* Effects */
  --ring-focus:  0 0 0 3px rgba(0, 153, 147, 0.12);
  --ring-danger: 0 0 0 3px rgba(220, 38, 38, 0.1);
  --overlay-dark: rgba(0, 0, 0, 0.4);
  --transition-fast: all 0.15s ease;

  /* Optical-budget segment palette (used both in segmented bar and legend dots) */
  --color-fiber: #60a5fa;
  --color-splitter: #f97316;
  --color-conn: #a78bfa;

  /* Step 3 topology signal palette. Three of four reuse segment palette
     so the color language stays coherent across budget / BOM / topology. */
  --sig-internet: #3b82f6;
  --sig-combined: var(--color-conn);   /* purple — GPON + RF overlay on one fiber (post-WDM) */
  --sig-pon: var(--ax);
  --sig-rf: var(--color-splitter);

  /* Step-nav arrows */
  --icon-arrow-left:  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='19' y1='12' x2='5' y2='12'/><polyline points='12 19 5 12 12 5'/></svg>");
  --icon-arrow-right: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='5' y1='12' x2='19' y2='12'/><polyline points='12 5 19 12 12 19'/></svg>");

  /* Service-card icons (Step 1 "Additional Services") */
  --icon-wifi: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M5 13a10 10 0 0 1 14 0'/><path d='M8.5 16.5a5 5 0 0 1 7 0'/><path d='M2 8.82a15 15 0 0 1 20 0'/><line x1='12' y1='20' x2='12.01' y2='20'/></svg>");
  --icon-waves: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M 3 5 Q 6 1 9 5 T 15 5 T 21 5'/><path d='M 3 12 Q 6 8 9 12 T 15 12 T 21 12'/><path d='M 3 19 Q 6 15 9 19 T 15 19 T 21 19'/></svg>");
  --icon-zap: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><polygon points='13 2 3 14 12 14 11 22 21 10 12 10 13 2'/></svg>");
  --icon-tv: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='7' width='20' height='15' rx='2' ry='2'/><polyline points='17 2 12 7 7 2'/></svg>");

  /* Topology icons (Step 3) — sources, core equipment, client devices */
  --icon-internet: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='2' y1='12' x2='22' y2='12'/><path d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/></svg>");
  --icon-sat: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4 10a7.3 7.3 0 0 0 10 10Z'/><path d='M9 15l3-3'/><path d='M17 13a6 6 0 0 0-6-6'/><path d='M21 13A10 10 0 0 0 11 3'/></svg>");
  --icon-server: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='3' width='20' height='7' rx='1.5'/><rect x='2' y='14' width='20' height='7' rx='1.5'/><line x1='6' y1='6.5' x2='6.01' y2='6.5'/><line x1='6' y1='17.5' x2='6.01' y2='17.5'/></svg>");
  --icon-switch: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='8' width='20' height='8' rx='1.5'/><line x1='6' y1='12' x2='6.01' y2='12'/><line x1='10' y1='12' x2='10.01' y2='12'/><line x1='14' y1='12' x2='14.01' y2='12'/><line x1='18' y1='12' x2='18.01' y2='12'/></svg>");
  --icon-amp: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><polygon points='5 4 20 12 5 20 5 4'/><line x1='20' y1='12' x2='22' y2='12'/><line x1='5' y1='12' x2='2' y2='12'/></svg>");
  --icon-combiner: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3 5 L13 12'/><path d='M3 12 L13 12'/><path d='M3 19 L13 12'/><path d='M13 12 L21 12'/></svg>");
  --icon-splitter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12 L11 12'/><path d='M11 12 L21 5'/><path d='M11 12 L21 12'/><path d='M11 12 L21 19'/></svg>");
  --icon-onu: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='8' width='20' height='8' rx='1.5'/><line x1='6' y1='12' x2='6.01' y2='12'/><line x1='13' y1='12' x2='15' y2='12'/><line x1='17' y1='12' x2='19' y2='12'/></svg>");
  --icon-phone: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='7' y='2' width='10' height='20' rx='2'/><line x1='12' y1='18' x2='12.01' y2='18'/></svg>");
  --icon-laptop: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='12' rx='1.5'/><line x1='2' y1='20' x2='22' y2='20'/></svg>");
  --icon-ap: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M6 8 A 8 8 0 0 1 18 8'/><path d='M3 5 A 12 12 0 0 1 21 5'/><rect x='4' y='14' width='16' height='5' rx='2.5'/><line x1='12' y1='14' x2='12' y2='19'/></svg>");

  font-size: 16px;
}


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

body {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: var(--fs);
  line-height: 1.5;
  color: var(--text);
  background: var(--bg-subtle);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

::selection {
  color: #fff!important;
  fill: #fff!important;
  background: var(--ax);
}

img, svg {
  display: block;
  max-width: 100%;
}

h1, h2, h3, h4 {
  line-height: 1.25;
}


/* --- Header (full width, always on top) ---------------------------------- */
.header {
  height: 56px;
  background: var(--bg);
}

/* Inner container — mirrors .main's and .stepnav-inner's max-width +
   horizontal padding so brand / title / actions line up with the rest of
   the content. Flex row with space-between spreads the three zones. */
.header-inner {
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  height: 100%;
  padding: 0 var(--space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}

.header-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
  text-decoration: none;
  color: inherit;
}

.header-logo {
  height: 28px;
  width: auto;
}

.header-logo-full {
  display: none;
}

.header-logo-small {
  display: block;
  height: 20px;
  width: auto;
}

.header-title-group {
  display: flex;
  align-items: center;
  gap: var(--space-3-5);
  min-width: 0;
  line-height: 1;
}

.header-title {
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--text);
}

.header-dot,
.header-subtitle {
  display: none;
}

.header-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--text-light);
  flex-shrink: 0;
}

.header-subtitle {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}


/* --- Header actions (Help + Settings gear, top right) -------------------- */
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-shrink: 0;
}

.header-action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: var(--transition-fast);
}

.header-action:hover {
  background: var(--bg-subtle);
  color: var(--text);
}

.header-action[aria-expanded="true"] {
  background: var(--bg-subtle);
  color: var(--text);
}

.header-action-icon {
  width: 20px;
  height: 20px;
}

/* --- Step navigation (horizontal row below header) ---------------------- */
.stepnav {
  background: var(--bg);
  border-bottom: 1px solid var(--border-light);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* Inner container — mirrors .main's max-width + horizontal padding so the
   tab row lines up flush with the content area. */
.stepnav-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--space-5);
}

.nav-list {
  list-style: none;
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
}

.nav-list::-webkit-scrollbar {
  display: none;
}

.nav-item {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  justify-content: center;
}

/* Connector lines between dots. Each item paints the half-segment on its
   left (::before) and on its right (::after) at the dot's vertical center;
   the dot's opaque background masks the tiny bit that runs behind it. The
   first item hides its ::before and the last item hides its ::after so the
   line visually spans from the first dot's center to the last dot's center. */
.nav-item::before,
.nav-item::after {
  content: "";
  position: absolute;
  top: calc(var(--space-5) + 16px); /* nav-btn top padding + dot radius */
  height: 1px;
  background: var(--border);
  z-index: 0;
}

.nav-item::before {
  left: 0;
  width: 50%;
}

.nav-item::after {
  right: 0;
  width: 50%;
}

.nav-item:first-child::before,
.nav-item:last-child::after {
  display: none;
}

.nav-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-5) var(--space-4);
  border: none;
  background: none;
  font-family: inherit;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition-fast);
  white-space: nowrap;
  text-align: center;
}

.nav-btn:hover {
  color: var(--text);
}

.nav-item.active .nav-btn {
  color: var(--ax-dark);
  font-weight: 500;
}

.nav-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: var(--bg);
  font-size: var(--fs-sm);
  font-weight: 500;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  transition: var(--transition-fast);
}

.nav-item.active .nav-dot {
  background: var(--ax);
  border-color: var(--ax);
  color: #fff;
}

.nav-label {
  display: none;
  white-space: nowrap;
}

/* On narrow viewports show only the active item's label to save space. */
.nav-item.active .nav-label {
  display: block;
}

@media (min-width: 576px) {
  .nav-label {
    display: block;
  }
}


/* --- Content area (holds main + footer) ---------------------------------- */
.content {
  display: flex;
  flex-direction: column;
  flex: 1;
  /* Inline-size container so children can use 100cqi to break out past
     .main's max-width + padding (e.g. .section-divider). */
  container-type: inline-size;
}

/* --- Main Content -------------------------------------------------------- */
.main {
  flex: 1;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  padding: var(--space-6) var(--space-5);
}

.step-panel {
  display: none;
}

.step-panel.active {
  display: block;
}

.step-title {
  font-size: var(--fs-xl);
  font-weight: 600;
  margin-bottom: var(--space-7);
  color: var(--text);
}


/* --- Step 1 app intro: orientation block above the parameters card ------- */
.app-intro {
  background: var(--bg-subtle);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-7);
}

.app-intro-lead {
  margin: 0 0 var(--space-5) 0;
  font-size: var(--fs);
  color: var(--text);
}

.app-intro-lead strong {
  font-weight: 600;
}

.app-intro-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5) var(--space-7);
}

.app-intro-col-title {
  margin: 0 0 var(--space-3) 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ax);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.app-intro-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.app-intro-list li {
  position: relative;
  padding-left: 1.5rem;
  font-size: var(--fs);
  color: var(--text);
}

.app-intro-list li::before {
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 600;
}

.app-intro-list-in li::before {
  content: "›";
  color: var(--text-light);
}

.app-intro-list-out li::before {
  content: "✓";
  color: var(--ax);
}

@media (min-width: 640px) {
  .app-intro-cols {
    grid-template-columns: 1fr 1fr;
  }
}


/* --- Cards --------------------------------------------------------------- */
.card {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: var(--space-6);
}

.card-heading {
  font-size: var(--fs);
  line-height: 1.25;
  font-weight: 500;
  color: var(--text);
  margin-bottom: var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.card-heading::before {
  content: '';
  width: 3px;
  height: 14px;
  background: var(--ax);
  border-radius: 2px;
  flex-shrink: 0;
}

/* Collapsible card: <details class="card card-collapsible"> with a
   <summary class="card-heading"> replacing the usual <h3>. Native marker
   is hidden; a chevron after the heading rotates on [open]. When closed
   the heading's margin-bottom is suppressed so the card doesn't grow
   empty space below a collapsed summary. */
.card-collapsible > summary.card-heading {
  list-style: none;
  cursor: pointer;
  user-select: none;
}

.card-collapsible > summary.card-heading::-webkit-details-marker {
  display: none;
}

.card-collapsible > summary.card-heading::after {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  margin-left: auto;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
  flex-shrink: 0;
}

.card-collapsible[open] > summary.card-heading::after {
  transform: rotate(45deg);
}

.card-collapsible:not([open]) > summary.card-heading {
  margin-bottom: 0;
}

/* Grouping block inside a card — separates adjacent sections with a soft
   top border + extra spacing so multiple .card-heading subsections can
   coexist in one card without reading as a wall of text. */
.form-section {
  margin-top: var(--space-7);
  padding-top: var(--space-7);
  border-top: 1px solid var(--border-light);
}

.form-section-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
}

.form-section-row > .form-section {
  position: relative;
  flex: 1 1 280px;
  margin-top: 0;
  padding: var(--space-6);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  background: var(--bg);
}

.form-section-row > .form-section-full {
  flex: 1 1 100%;
}


/* --- Form: Input fields -------------------------------------------------- */
.form-group {
  margin-bottom: var(--space-6);
}

.form-group:last-child {
  margin-bottom: 0;
}

.form-label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text);
  margin-bottom: var(--space-2);
}

.form-input {
  display: block;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-family: inherit;
  font-size: var(--fs);
  line-height: 1.375;
  color: var(--text);
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-input::placeholder {
  color: var(--text-light);
}

.form-input:focus {
  border-color: var(--ax);
  box-shadow: var(--ring-focus);
}

.form-input.invalid {
  border-color: var(--danger);
  box-shadow: var(--ring-danger);
}

.form-input-unit {
  position: relative;
}

.form-input-unit .form-input {
  padding-right: 3.5rem;
}

.form-unit {
  position: absolute;
  right: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  pointer-events: none;
}

.form-hint {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--fs-sm);
  color: var(--text-light);
}

.form-hint.warning {
  color: var(--warning);
}

.form-error {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--fs-sm);
  color: var(--danger);
}


/* --- Form: Radio button group -------------------------------------------- */
.radio-group {
  display: flex;
  gap: 0;
}

.radio-btn {
  cursor: pointer;
  display: block;
  position: relative;
}

/* Overlap shared borders so there's only one line between buttons */
.radio-btn:not(:first-child) {
  margin-left: -1px;
}

.radio-btn input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}

.radio-btn-label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 3rem;
  padding: var(--space-3) var(--space-5);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-muted);
  background: var(--bg-input);
  border: 1px solid var(--border);
  transition: var(--transition-fast);
}

.radio-btn:first-child .radio-btn-label {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.radio-btn:last-child .radio-btn-label {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* Hover: teal border on all 4 sides, lift above neighbors */
.radio-btn:hover {
  z-index: 1;
}

.radio-btn:hover .radio-btn-label {
  border-color: var(--ax);
  color: var(--ax);
}

/* Checked: teal fill + border, lift above neighbors (even above hover) */
.radio-btn:has(input:checked) {
  z-index: 2;
}

.radio-btn input:checked + .radio-btn-label {
  background: var(--ax);
  border-color: var(--ax);
  color: #fff;
}

.radio-btn:hover input:checked + .radio-btn-label {
  background: var(--ax-dark);
  color: #fff;
}


/* --- Form: Service cards (Step 1 "Additional Services") ----------------- */
.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
}

.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-5) 1.125rem;
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-sm);
  background: var(--bg);
  cursor: pointer;
  user-select: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.service-card input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}

.service-card:hover {
  border-color: var(--ax);
  background: color-mix(in srgb, var(--ax) 3%, var(--bg));
}

.service-card:has(input:checked) {
  border-color: var(--ax);
  background: color-mix(in srgb, var(--ax) 7%, var(--bg));
}

.service-card:has(input:focus-visible) {
  outline: 2px solid var(--ax);
  outline-offset: 2px;
}

.service-check {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--border);
  border-radius: 4px;
  background: var(--bg-input);
  transition: border-color 0.15s ease, background 0.15s ease;
}

.service-check::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 6px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity 0.15s ease;
}

.service-card:has(input:checked) .service-check {
  background: var(--ax);
  border-color: var(--ax);
}

.service-card:has(input:checked) .service-check::after {
  opacity: 1;
}

.service-icon {
  width: 26px;
  height: 26px;
  background-color: var(--text-muted);
  mask: var(--service-icon) center / contain no-repeat;
  -webkit-mask: var(--service-icon) center / contain no-repeat;
  transition: background-color 0.15s ease;
}

.service-card:has(input:checked) .service-icon {
  background-color: var(--ax);
}

.service-card[data-svc="wifi"]  { --service-icon: var(--icon-wifi); }
.service-card[data-svc="rf"]    { --service-icon: var(--icon-waves); }
.service-card[data-svc="poe"]   { --service-icon: var(--icon-zap); }
.service-card[data-svc="iptv"]  { --service-icon: var(--icon-tv); }

.service-title {
  font-size: var(--fs);
  font-weight: 500;
  color: var(--text);
  margin-top: var(--space-2);
}

.service-desc {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.4;
}


/* --- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-5) 2rem;
  font-family: inherit;
  font-size: var(--fs);
  font-weight: 500;
  color: #fff;
  background: var(--ax);
  border: 1.5px solid var(--ax);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.btn:hover {
  background: var(--ax-dark);
  border-color: var(--ax-dark);
}

.btn-sm {
  padding: var(--space-3) var(--space-5);
  font-size: var(--fs-sm);
}

.btn-outline {
  color: var(--ax);
  background: transparent;
  border: 1.5px solid var(--border);
}

.btn-outline:hover {
  border-color: var(--ax);
  background: rgba(0, 153, 147, 0.04);
}

/* Step-nav arrow icons */
.btn-prev::before,
.btn-next::after {
  content: "";
  width: 1.1em;
  height: 1.1em;
  background-color: currentColor;
  mask-position: center;
  -webkit-mask-position: center;
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  flex-shrink: 0;
}

.btn-prev::before {
  mask-image: var(--icon-arrow-left);
  -webkit-mask-image: var(--icon-arrow-left);
}

.btn-next::after {
  mask-image: var(--icon-arrow-right);
  -webkit-mask-image: var(--icon-arrow-right);
}


/* --- Bandwidth estimation tiles (Step 2) --------------------------------- */
/* --- Bandwidth gauge (speedtest style) ----------------------------------- */
.bw-gauge {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-3) var(--space-5) 0;
}

.bw-gauge-svg {
  width: 100%;
  max-width: 400px;
}

.bw-gauge-track {
  fill: none;
  stroke: var(--bg-muted);
  stroke-width: 18;
  stroke-linecap: round;
}

.bw-gauge-peak {
  fill: none;
  stroke: var(--text-light);
  stroke-width: 18;
  stroke-linecap: round;
  opacity: 0.35;
  stroke-dashoffset: var(--arc-len);
  transition: stroke-dashoffset 0.8s ease-out;
}

.bw-gauge-peak.animate {
  stroke-dashoffset: 0;
}

.bw-gauge-fill {
  fill: none;
  stroke: var(--est-color);
  stroke-width: 18;
  stroke-linecap: round;
  stroke-dashoffset: var(--arc-len);
  transition: stroke-dashoffset 1s ease-out 0.6s;
}

.bw-gauge-fill.animate {
  stroke-dashoffset: var(--fill-offset);
}

.bw-gauge-marker {
  stroke: var(--text-muted);
  stroke-width: 2;
}

.bw-gauge-marker-label {
  font-size: var(--fs-sm);
  font-family: "Cascadia Mono", "Fira Mono", monospace;
  fill: var(--text-muted);
}

.bw-gauge-center-value {
  font-size: 32px;
  font-weight: 700;
  font-family: "Cascadia Mono", "Fira Mono", monospace;
  text-anchor: middle;
  fill: var(--est-color);
}

.bw-gauge-center-label {
  font-size: var(--fs-sm);
  fill: var(--text-muted);
  text-anchor: middle;
}

.bw-gauge-labels {
  font-size: var(--fs-sm);
  fill: var(--text-light);
  font-family: "Cascadia Mono", "Fira Mono", monospace;
}

.bw-gauge-legend {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: center;
  margin-top: var(--space-5);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.bw-gauge-legend-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: var(--space-2);
  vertical-align: middle;
}

.bw-gauge-legend-dot-peak { background: var(--text-light); opacity: 0.35; }
.bw-gauge-legend-dot-est { background: var(--est-color); }

.bw-est-summary {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* Details toggle */
.bw-est-details {
  padding: var(--space-4);
  background: var(--bg);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

.bw-est-details summary {
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
  user-select: none;
}

.bw-est-details summary::-webkit-details-marker,
.bw-est-details summary::marker {
  color: var(--text-light);
}

.bw-est-details[open] summary {
  margin-bottom: var(--space-3-5);
}

/* Formula — vertical list */
.bw-est-formula {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  font-size: var(--fs-sm);
}

.bw-est-formula-line {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
  color: var(--text-muted);
}

.bw-est-formula-op {
  display: inline-block;
  width: var(--space-6);
  text-align: right;
  flex-shrink: 0;
  font-family: "Cascadia Mono", "Fira Mono", monospace;
  color: var(--text-light);
}

.bw-est-formula-val {
  font-family: "Cascadia Mono", "Fira Mono", monospace;
  font-weight: 600;
  color: var(--text);
}

.bw-est-formula-result {
  margin-top: 0.125rem;
  padding-top: var(--space-2);
  border-top: 1px solid var(--border);
}

.bw-est-formula-result .bw-est-formula-val {
  color: var(--ax);
  font-weight: 700;
}

/* Endpoint capacity note */
.bw-est-note {
  margin: var(--space-3-5) 0 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.4;
}

.bw-est-note strong {
  color: var(--text);
}

/* Methodology note */
.bw-est-methodology {
  margin: var(--space-3-5) 0 0;
  font-size: var(--fs-sm);
  color: var(--text-light);
  line-height: 1.4;
}

/* ISP warning + design-level notice (oversubscription etc.) — shared pattern */
.bw-est-warn,
.design-warn {
  margin: 0 0 var(--space-3-5);
  font-size: var(--fs-sm);
  color: var(--warning-text);
  background: var(--warning-bg);
  padding: var(--space-2) var(--space-3-5);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--warning);
}

.bw-est-warn strong,
.design-warn strong {
  color: inherit;
}


/* --- Step navigation (prev / next) --------------------------------------- */
.step-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 2rem;
  padding-top: var(--space-7);
  border-top: 1px solid var(--border-light);
}


/* --- Footer -------------------------------------------------------------- */
.footer {
  background: var(--bg-muted);
  border-top: 1px solid var(--border);
  margin-top: auto;
}

.footer-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--space-5) var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.footer-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.footer-brand-link {
  color: var(--text);
  font-weight: 500;
  text-decoration: underline dotted currentColor;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--text-muted) 40%, transparent);
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.footer-brand-link:hover {
  color: var(--ax);
  text-decoration-color: var(--ax);
}

.footer-copyright {
  flex-shrink: 0;
}

/* --- Footer disclaimer (expandable <details>, sits on the left of the row) ---------------------------- */
.footer-disclaimer {
  flex: 1 1 auto;
  min-width: 0;
}

.footer-disclaimer > summary {
  cursor: pointer;
  color: var(--text-muted);
  font-weight: 500;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  user-select: none;
}

.footer-disclaimer > summary::-webkit-details-marker {
  display: none;
}

.footer-disclaimer > summary::after {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
  flex-shrink: 0;
  margin-bottom: 2px;
}

.footer-disclaimer[open] > summary::after {
  transform: rotate(45deg);
  margin-bottom: 4px;
}

.footer-disclaimer > summary:hover {
  color: var(--text);
}

.footer-disclaimer-body {
  margin-top: var(--space-4);
  color: var(--text-muted);
  line-height: 1.5;
}

.footer-disclaimer-body p {
  margin: 0 0 var(--space-3) 0;
}

.footer-disclaimer-body p:last-child {
  margin-bottom: 0;
}

.footer-disclaimer-body strong {
  color: var(--text);
  font-weight: 500;
}

.footer-disclaimer-notice {
  margin-top: var(--space-4) !important;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-light);
}

.footer-disclaimer-email {
  color: var(--text-muted);
  text-decoration: underline dotted currentColor;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.15s ease;
}

.footer-disclaimer-email:hover {
  color: var(--ax);
}


/* --- Design summary (Step 2) --------------------------------------------- */
.design-summary {
  background: var(--bg);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: var(--space-6) var(--space-7);
  margin-bottom: var(--space-7);
}

.card-gauge {
  margin-bottom: var(--space-7);
}

.summary-stats {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  align-items: center;
}

.stat-inline {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-4);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  background: var(--bg-subtle);
  border-radius: 100px;
  border: 1px solid var(--border-light);
}

.stat-inline-value {
  font-weight: 700;
  color: var(--text);
  font-family: "Cascadia Mono", "Fira Mono", monospace;
}

.badge {
  display: inline-block;
  padding: var(--space-1) var(--space-4);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ax-dark);
  background: var(--ax-light);
  border-radius: 100px;
}

/* Wrapper around the variable feature badges (WiFi / RF / PoE / IPTV).
   Gives the badges their own gap since they're not direct flex children
   of .summary-stats. */
#designBadges,
#bomBadges {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}


/* --- Design grid (Step 2) ------------------------------------------------ */
.design-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}

@media (min-width: 1200px) {
  .design-group {
    flex-direction: row;
  }
}

.design-group .card {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.design-value {
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--text);
  margin-bottom: var(--space-1);
}

.design-group .card .design-value {
  margin-bottom: auto;
}

.design-value a {
  color: inherit;
}

.design-detail {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.6;
}

.product-link {
  color: var(--ax);
  text-decoration: underline dotted currentColor;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--ax) 50%, transparent);
  font-weight: 600;
  transition: text-decoration-color 0.15s;
}

.product-link:hover {
  text-decoration-color: var(--ax);
}


/* --- Key-value rows ------------------------------------------------------ */
.design-kv {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.kv-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--fs-sm);
}

.kv-label {
  color: var(--text-muted);
}

.kv-value {
  font-weight: 600;
  color: var(--text);
  font-family: "Cascadia Mono", "Fira Mono", monospace;
  font-size: var(--fs-sm);
}

.kv-accent {
  color: var(--ax);
}


/* --- Port utilization bar ------------------------------------------------ */
.utilization-bar {
  height: 6px;
  background: var(--bg-muted);
  border-radius: 3px;
  overflow: hidden;
}

.utilization-fill {
  height: 100%;
  width: var(--w, 0);
  background: var(--ax);
  border-radius: 3px;
  transition: width 0.4s ease;
}

.utilization-label {
  font-size: var(--fs-sm);
  color: var(--text-light);
  margin-top: var(--space-1);
}


/* --- Splitter stage chain ------------------------------------------------ */
.stage-chain {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.stage-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-3) var(--space-5);
  background: var(--bg-subtle);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
}

.stage-ratio {
  font-weight: 700;
  font-family: "Cascadia Mono", "Fira Mono", monospace;
  color: var(--text);
  font-size: var(--fs);
}

.stage-loss {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.stage-arrow {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--border);
  position: relative;
}

.stage-arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: -3px;
  border: solid var(--border);
  border-width: 0 2px 2px 0;
  padding: 3px;
  transform: rotate(-45deg);
}



.legend-fiber    { background: var(--color-fiber); }
.legend-splitter { background: var(--color-splitter); }
.legend-conn     { background: var(--color-conn); }
.legend-margin   { background: var(--success); opacity: 0.4; }

.budget-section-label {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text);
  letter-spacing: 0.01em;
}

/* --- RF overlay budget subsection (1550 nm path) ------------------------- */
.budget-rf-section {
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-light);
}

/* --- Budget metrics: key-value list + status LED ------------------------- */
.budget-metrics {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1px var(--space-6);
  align-items: baseline;
  font-size: var(--fs-sm);
}

.budget-metric {
  display: contents;
}

.budget-metric-label {
  margin: 0;
  color: var(--text-muted);
  font-weight: 500;
}

.budget-metric-value {
  margin: 0;
  color: var(--text);
  font-family: "Cascadia Mono", "Fira Mono", monospace;
  font-feature-settings: "tnum";
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.budget-metric-sep {
  margin-top: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-light);
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
}

.budget-led {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--bg-muted);
  box-shadow: 0 0 0 1px var(--border-light);
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.budget-led-success {
  background: var(--success);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--success) 40%, transparent),
              0 0 8px color-mix(in srgb, var(--success) 55%, transparent);
}

.budget-led-warning {
  background: var(--warning);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--warning) 40%, transparent),
              0 0 8px color-mix(in srgb, var(--warning) 55%, transparent);
}

.budget-led-danger {
  background: var(--danger);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--danger) 40%, transparent),
              0 0 8px color-mix(in srgb, var(--danger) 55%, transparent);
}

/* Budget card header alert — shown next to "Optical Power Budget" heading when
   GPON or RF budget status is "fail" (not feasible). Red circle with "!" so
   the issue is visible even when the card is collapsed. */
.budget-alert {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--danger);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
}
.budget-alert[hidden] { display: none; }

/* --- Warn / info blocks -------------------------------------------------- */
.budget-warn {
  font-size: var(--fs-sm);
  color: var(--danger);
  padding: var(--space-3-5) var(--space-4);
  background: var(--danger-bg);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--danger);
}

.budget-info-details {
  padding: var(--space-4);
  background: var(--bg);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

.budget-info-details summary {
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
  user-select: none;
}

.budget-info-details summary::-webkit-details-marker,
.budget-info-details summary::marker {
  color: var(--text-light);
}

.budget-info-details[open] summary {
  margin-bottom: var(--space-3-5);
}

.budget-info-body {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.6;
}

.budget-info-body p { margin: 0 0 var(--space-4); }

.budget-info-body code {
  font-family: "Cascadia Mono", "Fira Mono", monospace;
  font-size: var(--fs-sm);
  background: var(--bg-muted);
  padding: 0.0625rem var(--space-2);
  border-radius: 3px;
  color: var(--text);
}

.budget-info-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-3) 0 var(--space-5);
  font-size: var(--fs-sm);
}

.budget-info-table th,
.budget-info-table td {
  padding: var(--space-2) var(--space-3-5);
  text-align: left;
  border-bottom: 1px solid var(--border-light);
}

.budget-info-table th {
  font-weight: 500;
  color: var(--text);
  background: var(--bg-subtle);
}

.budget-info-table .budget-info-highlight {
  background: color-mix(in srgb, var(--ax) 8%, transparent);
}

.budget-info-table .budget-info-highlight td { color: var(--text); font-weight: 500; }

.budget-info-list {
  margin: 0 0 var(--space-4);
  padding-left: var(--space-6);
}

.budget-info-list li { margin-bottom: var(--space-1); }

.budget-info-formula {
  padding: var(--space-3) var(--space-4);
  background: var(--bg-subtle);
  border-radius: var(--radius-sm);
  border-left: 2px solid var(--ax);
}


/* --- BOM table (Step 4) -------------------------------------------------- */
.bom-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}

/* Heading inside the flex header: parent owns the bottom spacing. */
.bom-card-header .card-heading {
  margin-bottom: 0;
}

.bom-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* Project ID + parameter pills between the card header and the BOM table. */
.bom-card-meta {
  margin-bottom: var(--space-5);
}

/* The last .project-id-row in the card-meta already supplies the gap to the
   pill strip below; no extra inner rules needed. */

.bom-table-wrap {
  overflow-x: auto;
  margin-top: var(--space-3);
}

.bom-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.bom-table th,
.bom-table td {
  padding: var(--space-3-5) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--border-light);
  vertical-align: top;
}

.bom-table th {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  border-bottom: 2px solid var(--text);
}

.bom-table tbody tr:last-child td {
  border-bottom: none;
}

.bom-table .bom-qty,
.bom-table th.bom-qty {
  font-family: "Cascadia Mono", "Fira Mono", monospace;
  text-align: right;
  white-space: nowrap;
  width: 1%;
}

.bom-table .bom-model {
  white-space: nowrap;
  width: 1%;
}

.bom-table .bom-desc .bom-note {
  display: block;
  font-size: 14px;
  color: var(--text-muted);
  font-weight: 400;
  margin-top: 0.125rem;
}

.bom-table .bom-ordno {
  font-family: "Cascadia Mono", "Fira Mono", monospace;
  font-size: 14px;
  color: var(--text);
  white-space: nowrap;
  width: 1%;
}

.bom-table .bom-desc {
  color: var(--text);
  font-size: 14px;
}


/* --- Attenuator recommendation ------------------------------------------- */
.attenuator-rec {
  font-size: var(--fs-sm);
  color: var(--warning-text);
  padding: var(--space-3-5) var(--space-4);
  background: var(--warning-bg);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--warning);
}

.fatal-error {
  margin: var(--space-5) 0;
  padding: var(--space-4) var(--space-5);
  background: var(--danger-bg);
  border: 1px solid var(--danger);
  border-left: 3px solid var(--danger);
  border-radius: var(--radius-sm);
  color: var(--danger);
  font-size: var(--fs-sm);
}


/* --- Project ID (Step 1 "General") --------------------------------------- */
.project-id-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  font-size: var(--fs-sm);
  line-height: 1.3;
  flex-wrap: wrap;
}

.project-id-label {
  color: var(--text-muted);
}

.project-id-value {
  font-family: "Cascadia Mono", "Fira Mono", monospace;
  font-weight: 600;
  color: var(--text);
  user-select: all;
  letter-spacing: 0.02em;
}

.project-id-reset {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
}


/* Divider between the BOM card and the Request-a-Quote card (Step 4).
   `.main` caps at 1400px + horizontal padding, so a plain `width: 100%`
   stops at the card edges. Using `100cqi` (inline size of the nearest
   `container-type` ancestor = `.content`) plus a symmetric negative margin
   lets the rule break out to the full content-area width on both desktop
   and mobile without any viewport / sidebar math. */
.section-divider {
  border: 0;
  border-top: 1px solid var(--border);
  width: 100cqi;
  margin: var(--space-7) calc((100% - 100cqi) / 2);
}


/* --- Request a Quote (Step 4, below BOM) --------------------------------- */
textarea.form-input {
  min-height: 5.5rem;
  resize: vertical;
  line-height: 1.5;
}

.form-req {
  color: var(--danger);
  font-weight: 500;
}

.quote-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6) var(--space-5);
  margin-bottom: var(--space-6);
}

.quote-grid .form-group {
  margin-bottom: 0;
}

@media (min-width: 640px) {
  .quote-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.quote-actions {
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
  margin-top: var(--space-5);
  flex-wrap: wrap;
}

.quote-notice {
  margin-top: var(--space-4);
  padding: var(--space-3-5) var(--space-4);
  font-size: var(--fs-sm);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--border);
}

.quote-notice-success {
  color: var(--success);
  background: var(--success-bg);
  border-left-color: var(--success);
}

.quote-notice-warn {
  color: var(--warning-text);
  background: var(--warning-bg);
  border-left-color: var(--warning);
}

.quote-notice-error {
  color: var(--danger);
  background: var(--danger-bg);
  border-left-color: var(--danger);
}

.quote-privacy {
  margin-top: var(--space-5);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.6;
}

.quote-recipient-link {
  color: var(--text-muted);
  text-decoration: underline dotted currentColor;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.15s ease;
}

.quote-recipient-link:hover {
  color: var(--ax);
}

.step-placeholder {
  padding: var(--space-6) var(--space-7);
  margin-bottom: var(--space-7);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  background: var(--bg-subtle);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  text-align: center;
}


/* --- Step 3: Topology diagram ------------------------------------------- */
/* Full-SVG top-down schematic. Everything — boxes, icons, labels, lines —
   lives in one SVG. The viewBox is portrait-oriented and set dynamically
   per render (see populateTopology() / MIN_VIEWBOX_WIDTH in main.js).
   Rendered imperatively from composable drawDevice / drawLine /
   appendTopoIconDefs functions. No HTML grid, no click interactivity,
   no alignment math. */

.topo-svg {
  display: block;
  width: auto;
  max-width: 700px;            /* portrait cap — content flow is top-down */
  max-height: 900px;           /* cap tall cascade layouts so the SVG scales down instead of growing past the viewport */
  height: auto;                /* preserves aspect via viewBox */
  margin: var(--space-5) auto 0;
  color: var(--text-muted);    /* drives icon stroke="currentColor" for <use> */
}

/* Device boxes — fill follows theme, border is subtle. Client boxes drop
   the border: the row below ONU is icon-only, and the rect is kept only
   to mask the vertical connection line behind the icon. */
.topo-device-box {
  fill: var(--bg);
  stroke: var(--border);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.topo-device-client .topo-device-box {
  stroke: none;
}

/* SVG text styling. Font-sizes are in SVG user units — they scale with the
   viewBox. At max-width 1000px the scale is 1:1, so these map directly to
   pixels. Label follows the 15 px app minimum; sublabel at 12 px is an
   exception (same relaxation as BOM table + print view), justified by the
   dense, schematic-style layout. */
.topo-device-label {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  font-weight: 500;
  fill: var(--text);
}

/* Ditto tile ("ONU" placeholder for non-representative splitter strands)
   — shrink label so it fits comfortably inside the 48×32 tile. */
.topo-device-ditto .topo-device-label {
  font-size: 14px;
}

.topo-device-sublabel {
  font-family: "Cascadia Mono", "Cascadia Code", Consolas, monospace;
  font-size: 14px;
  fill: var(--text-muted);
}

.topo-badge-bg {
  fill: var(--ax);
  stroke: var(--bg);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.topo-badge-text {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 600;
  fill: #fff;
}

/* Per-strand endpoint count marker on splitter → ONU / ditto lines:
   a short 45° slash across the line plus a "×N" label to the right.
   Replaces the per-tile badge — keeps the ONU and ditto boxes clean
   and makes the "each strand serves N endpoints" reading explicit on
   the connection line itself. */
.topo-tick {
  stroke: dimgray;
  stroke-width: 2;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.topo-tick-label {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: 14px;
  font-weight: 600;
  fill: dimgray;
}

/* Connection lines — colored by signal type. vector-effect keeps stroke
   weight constant even when the SVG is scaled up/down to fit the viewport. */
.topo-line {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.topo-line.conn-internet { stroke: var(--sig-internet); }
.topo-line.conn-combined { stroke: var(--sig-combined); }  /* GPON + RF combined fiber (post-WDM) */
.topo-line.conn-pon      { stroke: var(--sig-pon); }
.topo-line.conn-rf       { stroke: var(--sig-rf); }
.topo-line.conn-antenna  { stroke: var(--text); }         /* electrical RF coax — SAT → MK and MK → OTX (pre-optical) */
.topo-line.conn-coax     { stroke: var(--text-muted); }   /* RF coax drop ONU → TV */
.topo-line.conn-client   { stroke: var(--text-light); }

/* Signal-color legend below the diagram (HTML, unchanged). */
.topo-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  justify-content: center;
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-light);
}

.topo-legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.topo-legend-item[hidden] { display: none; }

.topo-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.topo-legend-item[data-sig="internet"] .topo-legend-dot { background: var(--sig-internet); }
.topo-legend-item[data-sig="combined"] .topo-legend-dot { background: var(--sig-combined); }
.topo-legend-item[data-sig="pon"]      .topo-legend-dot { background: var(--sig-pon); }
.topo-legend-item[data-sig="rf"]       .topo-legend-dot { background: var(--sig-rf); }


/* --- Help modal ---------------------------------------------------------- */
.help-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay-dark);
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
}

.help-modal {
  background: var(--bg);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  max-width: 480px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
}

.help-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--border-light);
}

.help-header h3 {
  font-size: var(--fs);
  font-weight: 500;
  color: var(--text);
}

.help-close {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  font-size: var(--fs-xl);
  color: var(--text-light);
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.1s, color 0.1s;
}

.help-close:hover {
  background: var(--bg-subtle);
  color: var(--text);
}

.help-body {
  padding: var(--space-6);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.6;
}

.help-body h4 {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text);
  margin: var(--space-5) 0 var(--space-2);
}

.help-body h4:first-child {
  margin-top: 0;
}

.help-body ol {
  padding-left: var(--space-6);
}

.help-body li {
  margin-bottom: var(--space-1);
}

.help-body p {
  margin: 0;
}


/* --- Confirm modal (reuses .help-overlay / .help-modal) ------------------ */
.confirm-modal {
  max-width: 420px;
}

.confirm-body {
  padding-bottom: var(--space-3);
  color: var(--text);
}

.confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6) var(--space-6);
  flex-wrap: wrap;
}


/* --- Dark theme ---------------------------------------------------------- */
[data-theme="dark"] {
  --bg: #0d1017;
  --bg-subtle: #131720;
  --bg-muted: #1c2030;
  --bg-input: #181c28;
  --border: #2a2f3d;
  --border-light: #222736;

  --text: #d4d7de;
  --text-muted: #8b919d;
  --text-light: #5c6370;

  --ax-light: rgba(0, 153, 147, 0.12);

  --success-bg: rgba(22, 163, 74, 0.12);
  --warning-bg: rgba(217, 119, 6, 0.1);
  --warning-text: #fbbf24;
  --danger-bg: rgba(220, 38, 38, 0.12);
}

[data-theme="dark"] .header {
  background: var(--bg);
}

[data-theme="dark"] .stepnav {
  background: var(--bg);
}

[data-theme="dark"] .card {
  background: var(--bg-subtle);
}

[data-theme="dark"] .design-summary {
  background: var(--bg-subtle);
}

[data-theme="dark"] .help-modal {
  background: var(--bg-subtle);
}


/* --- Scrollbar ----------------------------------------------------------- */
body::-webkit-scrollbar {
  width: 6px;
}

body::-webkit-scrollbar-track {
  background: transparent;
}

body::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}

body::-webkit-scrollbar-thumb:hover {
  background: var(--text-light);
}


/* --- Utilities ----------------------------------------------------------- */
.mt-4  { margin-top: var(--space-1); }
.mt-8  { margin-top: var(--space-3); }
.mt-14 { margin-top: 0.875rem; }
.mt-16 { margin-top: var(--space-5); }
.mt-24 { margin-top: var(--space-7); }


/* --- Responsive ---------------------------------------------------------- */

/* Desktop: full logo + subtitle */
@media (min-width: 768px) {
  .header-inner,
  .stepnav-inner {
    padding: 0 clamp(var(--space-7), 3vw, 2.5rem);
  }

  .header-logo-full {
    display: block;
  }

  .header-logo-small {
    display: none;
  }

  .header-dot,
  .header-subtitle {
    display: block;
  }

  .main {
    padding: 2rem clamp(var(--space-7), 3vw, 2.5rem);
  }

  .card {
    padding: var(--space-7);
  }
}