/* Keep the public calculator aligned with the formula editor's color system. */
:root {
  --blue-950: #09090b;
  --blue-900: #18181b;
  --blue-800: #27272a;
  --blue-700: #3f3f46;
  --blue-500: #4492c2;
  --blue-300: #58a6d4;
  --blue-100: #f4f4f5;

  --color-bg-page: #09090b;
  --color-bg-surface: #18181b;
  --color-bg-sunken: #09090b;
  --color-bg-raised: #27272a;
  --color-text-primary: #f4f4f5;
  --color-text-secondary: #d4d4d8;
  --color-text-muted: #a1a1aa;
  --color-border-subtle: #3f3f46;
  --color-border-strong: #52525b;
  --color-accent-solid: #4492c2;
  --color-accent-solid-hover: #78bce3;
  --color-accent-on-solid: #09090b;
  --color-signal: #58a6d4;
  --color-text-on-accent: var(--color-accent-on-solid);
  --body: "Inter Variable", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --display: "Inter Variable", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --ink: var(--color-text-primary);
  --muted: var(--color-text-muted);
  --canvas: var(--color-bg-page);
  --surface: var(--color-bg-surface);
  --surface-dark: var(--color-bg-sunken);
  --surface-lift: var(--color-bg-raised);
  --line: var(--color-border-subtle);
  --line-strong: var(--color-border-strong);
  --acid: var(--color-accent-solid);
  --acid-light: var(--color-accent-solid-hover);
  --cyan: var(--color-signal);
}

body {
  color: var(--color-text-primary);
  background: var(--color-bg-page);
}

.topbar { background: var(--color-bg-topbar); }
.brand small,
.eyebrow,
.mode-explanation b,
.section-label > span,
.field > span,
.numeric-field small,
.subsection-head span,
.rib-table-head > span,
.checkbox,
.button-primary,
.button-secondary,
.result-topline,
.metric-grid dt,
.metric-grid dd small,
.result-section-heading > span,
.technical-details summary,
.live-indicator,
.result-footer button,
.mode-toggle button {
  font-family: var(--body);
}
.brand small { font-weight: 600; }
.eyebrow { font-weight: 600; letter-spacing: .06em; }
.mode-explanation b { font-weight: 600; }
.field > span { font-size: 11px; font-weight: 500; letter-spacing: .025em; transition: color .18s ease; }
.field:focus-within > span { color: var(--color-accent-solid); }
.numeric-field small,
.result-section-heading > span,
.metric-grid dd small,
.result-footer button { font-weight: 600; }
.geometry-preview-drawing { color: var(--color-accent-solid); }
.subsection-head span { font-size: 11px; font-weight: 500; }
.rib-table-head > span { font-size: 10px; font-weight: 600; letter-spacing: .025em; }
.checkbox { font-size: 11px; font-weight: 500; }
.button-primary,
.button-secondary { font-size: 12px; letter-spacing: .01em; text-transform: none; }
.result-topline { font-size: 10px; font-weight: 600; letter-spacing: .045em; }
.metric-grid dt { font-size: 10px; font-weight: 600; letter-spacing: .025em; }
.metric-grid dd small { font-size: 11px; }
.technical-details summary { font-size: 11px; font-weight: 500; }
.live-indicator { font-size: 10px; font-weight: 600; letter-spacing: .02em; }
.result-footer button { font-size: 11px; }
.status-dot { box-shadow: 0 0 0 4px rgb(88 166 212 / .18); }

.mode-toggle { border-radius: 10px; }
.mode-toggle button { border-radius: 7px; font-size: 11px; font-weight: 600; letter-spacing: .02em; }

.shape-option { border-radius: 10px; background: var(--color-bg-surface); }
.shape-option.selected { background: var(--color-bg-raised); }
.shape-option small { color: var(--color-text-secondary); }
.configuration-heading h1 {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.08;
}
.configuration-subtitle { margin: 9px 0 0; color: var(--color-text-muted); font-size: 15px; line-height: 1.45; }
.wizard-progress {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: -2px 0 34px;
}
.wizard-step { display: grid; grid-template-rows: auto 8px; gap: 10px; min-width: 0; padding: 0; color: var(--color-text-muted); border: 0; text-align: left; background: transparent; transition: color .22s ease; }
.wizard-step-heading { display: flex; align-items: baseline; gap: 8px; }
.wizard-step-number { color: var(--color-text-muted); font-size: 10px; font-weight: 600; letter-spacing: .04em; transition: color .22s ease; }
.wizard-step-label { overflow: hidden; color: inherit; font-size: 12px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; transition: color .22s ease; }
.wizard-step:hover .wizard-step-label { color: var(--color-text-primary); }
.wizard-step.is-active { color: var(--color-text-primary); }
.wizard-step.is-active .wizard-step-number,
.wizard-step.is-past .wizard-step-number { color: var(--color-accent-solid); }
.wizard-step-track { position: relative; display: block; height: 1px; margin: 3px 0 0 2px; background: var(--color-border-strong); }
.wizard-step-track i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--color-accent-solid); transition: width .42s cubic-bezier(.16, 1, .3, 1); }
.wizard-step-track i.is-filled { width: 100%; }
.wizard-step-track i.is-active { width: 36%; }
.wizard-step-track b { position: absolute; top: 50%; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--color-border-strong); transform: translate(-50%, -50%); transition: background-color .22s ease, transform .32s cubic-bezier(.16, 1, .3, 1); }
.wizard-step.is-active .wizard-step-track b,
.wizard-step.is-past .wizard-step-track b { background: var(--color-accent-solid); }
.wizard-step.is-active .wizard-step-track b { transform: translate(-50%, -50%) scale(1.15); }
.wizard-step-number.is-complete { display: inline-flex; min-width: 2ch; justify-content: center; }
.section-label h2,
.subsection-head h3 {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.18;
}
.shape-option b { font-family: var(--display); font-weight: 550; line-height: 1.05; }
.price-block strong { font-family: var(--display); font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.metric-grid dd { font-family: var(--display); font-weight: 600; line-height: 1.05; letter-spacing: -.01em; }
.result-section-heading h2 { font-family: var(--display); font-weight: 600; }
.field input:disabled,
.field select:disabled { color: var(--color-text-muted); }
.field select,
.field input,
.rib-row select,
.rib-row > input { border-radius: 8px; }
.formula-callout {
  border-color: rgb(88 166 212 / .35);
  background: rgb(88 166 212 / .075);
}
.formula-callout p { color: var(--color-text-secondary); }
.formula-callout b { color: var(--color-text-primary); }

.rib-legend { color: var(--color-text-secondary); }
.rib-legend.muted i { border-color: var(--color-border-strong); }
.rib-row > span { color: var(--color-text-primary); }
.rib-table-head { background: var(--color-bg-raised); }
.rib-table-head > span { color: var(--color-text-muted); }
.rib-row select { color: var(--color-text-primary); }
.checkbox i { border-color: var(--color-border-strong); }
.checkbox input:checked + i { box-shadow: inset 0 0 0 3px var(--color-checkbox-inner); }
.inner-card { border-radius: 10px; background: var(--color-bg-surface); }

.button-primary,
.recalculate-badge { color: var(--color-text-on-accent); }
.button-primary,
.button-secondary { border-radius: 8px; }
.spinner { border-color: var(--color-accent-solid); border-top-color: transparent; }

.result-panel {
  position: sticky;
  top: 20px;
  align-self: start;
  height: fit-content;
  min-height: 0;
  margin: 36px 20px 24px 0;
  padding: 22px;
  border: 1px solid var(--color-border-subtle);
  border-radius: 14px;
  background: var(--color-bg-surface);
}
.result-topline,
.price-block small,
.live-indicator { color: var(--color-text-muted); }
.metric-grid dd,
.result-placeholder b { color: var(--color-text-primary); }
.cost-breakdown dt,
.technical-details dt { color: var(--color-text-secondary); }
.cost-breakdown dd,
.technical-details dd { color: var(--color-text-primary); }
.markup-line { border-top-color: var(--color-border-subtle); }
.technical-details summary { color: var(--color-text-secondary); }
.placeholder-cross { border-color: var(--color-border-strong); }
.result-placeholder { min-height: 160px; padding: 22px 10px; }
.result-footer { position: static; gap: 12px; margin-top: 22px; }

@media (max-width: 1200px) {
  .result-panel { position: relative; top: auto; grid-column: 1 / -1; height: auto; min-height: auto; margin: 0 max(25px, 6vw) 28px; padding: 25px max(25px, 4vw); border: 1px solid var(--color-border-subtle); border-radius: 14px; background: var(--color-bg-surface); }
  .result-footer { max-width: 680px; margin: 21px auto 0; }
}

@media (max-width: 800px) {
  .configuration-subtitle { margin-top: 7px; font-size: 14px; }
  .wizard-progress { gap: 12px; margin-top: 0; margin-bottom: 27px; }
  .wizard-step-label { font-size: 11px; }
  .result-panel { margin: 0 20px 24px; padding: 24px 20px; }
}

@media (max-width: 480px) {
  .mode-toggle button { font-size: 10px; }
  .wizard-progress { gap: 8px; }
  .wizard-step-heading { gap: 5px; }
  .wizard-step-number { font-size: 9px; }
  .wizard-step-label { font-size: 10px; }
  .result-panel { margin-right: 14px; margin-left: 14px; padding-right: 14px; padding-left: 14px; }
}