/* blau-drill — Industrial Dark, plain CSS for the Lustre SPA.
   Tokens translated from assets/css/app.css (the Tailwind v4 @theme) +
   docs/design_reference/industrial_precision_control/DESIGN.md into CSS custom
   properties and the component classes the Lustre views use. No Tailwind. */

/* The dual-font strategy from DESIGN.md: Inter for the UI shell, JetBrains Mono
   for all technical data/coordinates. Loaded from Google Fonts (the reference
   mockups use the same families). */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&display=swap");

/* Material Symbols icon font (the design reference's iconography). The glyph is
   the ligature text content of an element with this class. */
.material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}

:root {
  /* fonts */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
  --font-data: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
    "Liberation Mono", monospace;

  /* surfaces / background */
  --background: #131313;
  --surface: #131313;
  --surface-dim: #131313;
  --surface-bright: #393939;
  --surface-container-lowest: #0e0e0e;
  --surface-container-low: #1c1b1b;
  --surface-container: #201f1f;
  --surface-container-high: #2a2a2a;
  --surface-container-highest: #353534;
  --surface-variant: #353534;

  /* foreground / text */
  --on-background: #e5e2e1;
  --on-surface: #e5e2e1;
  --on-surface-variant: #d6c4ac;

  /* outlines */
  --outline: #9e8e78;
  --outline-variant: #514532;

  /* primary: safety amber */
  --primary: #ffd79b;
  --on-primary: #432c00;
  --primary-container: #ffb300;
  --on-primary-container: #6b4900;
  --primary-fixed: #ffdeac;

  /* secondary: laboratory green (success) */
  --secondary: #40e56c;
  --on-secondary: #003912;
  --secondary-container: #02c953;
  --on-secondary-container: #004d1b;

  /* error: emergency red */
  --error: #ffb4ab;
  --on-error: #690005;
  --error-container: #93000a;
  --on-error-container: #ffdad6;

  /* domain accents (PCB canvas) */
  --drill-pending: #00ffff;
  --drill-done: #00c853;

  /* radii (soft) */
  --radius-sm: 0.125rem;
  --radius: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;

  /* hazard stripes for E-STOP / abort / confirm controls */
  --hazard: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    rgba(0, 0, 0, 0.18) 10px,
    rgba(0, 0, 0, 0.18) 20px
  );
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
}

body {
  background: var(--background);
  color: var(--on-surface);
  font-family: var(--font-sans);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

#app {
  height: 100%;
}

/* a focus ring everywhere keyboard users land */
:focus-visible {
  outline: 2px solid var(--primary-container);
  outline-offset: 2px;
}

/* screen-reader-only label (keeps inputs labelled without visual clutter) */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── animations ───────────────────────────────────────────────────────────── */

/* 1 Hz hard on/off blink for warning badges (DESIGN.md §Components) */
@keyframes blink {
  50% {
    opacity: 0.25;
  }
}
.blink {
  animation: blink 1s steps(2, jump-none) infinite;
}

@keyframes soft-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}
.pulse-dot {
  animation: soft-pulse 1.6s ease-in-out infinite;
}

/* ── app shell ────────────────────────────────────────────────────────────── */

.app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

.app-body {
  display: flex;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

.main {
  position: relative;
  flex: 1;
  overflow: hidden;
  background: var(--surface-dim);
  padding: 24px;
  min-width: 0;
}

/* ── header + stepper ─────────────────────────────────────────────────────── */

.header {
  display: flex;
  height: 64px;
  flex: none;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--outline-variant);
  background: var(--surface-container-high);
  padding: 0 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
.brand-mark {
  font-size: 1.875rem;
  line-height: 1;
  color: var(--primary);
}
.brand-word {
  font-family: var(--font-sans);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--primary);
}

.stepper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.step {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.step-node {
  display: flex;
  height: 1.75rem;
  width: 1.75rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  font-family: var(--font-data);
  font-size: 0.75rem;
  font-weight: 700;
}
.step-node.upcoming {
  border: 1px solid var(--outline-variant);
  background: var(--surface-container);
  color: var(--on-surface-variant);
}
.step-node.current {
  border: 2px solid var(--primary);
  background: var(--primary-container);
  color: var(--on-primary-container);
}
.step-node.done {
  background: var(--secondary);
  color: var(--on-secondary);
}
.step-label {
  margin-top: 0.125rem;
  font-family: var(--font-data);
  font-size: 0.5625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--on-surface-variant);
}
.step-label.current {
  color: var(--primary);
}
.step-rail {
  height: 1px;
  width: 2rem;
  background: var(--outline-variant);
}

/* A prior step that is a legal backward-nav target: a transparent button that
   looks exactly like a plain .step but reads as clickable (pointer + a subtle
   hover lift on its node). Keeps the stepper's look; only adds the affordance. */
.step-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.step-nav:hover .step-node,
.step-nav:focus-visible .step-node {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-container);
}
.step-nav:hover .step-label {
  color: var(--primary);
}

.config-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--outline-variant);
  background: var(--surface-container-high);
  border-radius: var(--radius-md);
  padding: 0.375rem 0.75rem;
  font-family: var(--font-data);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--on-surface);
  cursor: pointer;
}
.config-link:hover {
  border-color: var(--primary);
  background: var(--primary-container);
  color: var(--on-primary-container);
}

/* ── sidebar ──────────────────────────────────────────────────────────────── */

.sidebar {
  display: flex;
  width: 320px;
  flex: none;
  flex-direction: column;
  overflow-y: auto;
  border-right: 1px solid var(--outline-variant);
  background: var(--surface-container);
}
.sidebar-head {
  border-bottom: 1px solid var(--outline-variant);
  padding: 24px;
}
.sidebar-title {
  font-family: var(--font-sans);
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0;
  color: var(--primary);
}
.sidebar-status {
  margin-top: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-data);
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--secondary);
}
.sidebar-status .dot {
  display: inline-block;
  height: 0.5rem;
  width: 0.5rem;
  border-radius: 9999px;
  background: var(--secondary);
}
.sidebar-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1.5rem;
  overflow-y: auto;
  padding: 24px;
}

.section-label {
  border-bottom: 1px solid var(--outline-variant);
  padding-bottom: 0.25rem;
  font-family: var(--font-data);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--on-surface-variant);
  margin: 0;
}

.stage-nav {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.stage-nav-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: var(--radius);
  padding: 0.5rem 0.75rem;
  font-family: var(--font-data);
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--on-surface-variant);
}
.stage-nav-item.current {
  border: 2px solid var(--primary);
  background: var(--primary-container);
  color: var(--on-primary-container);
}
.stage-nav-item.done {
  color: var(--secondary);
}

.conn-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--outline-variant);
  background: var(--surface-container-highest);
  padding: 1rem;
}
.conn-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.conn-label {
  font-family: var(--font-data);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--on-surface-variant);
}
.conn-state {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-family: var(--font-data);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
}
.conn-state .dot {
  display: inline-block;
  height: 0.5rem;
  width: 0.5rem;
  border-radius: 9999px;
}
.conn-state.online {
  color: var(--secondary);
}
.conn-state.online .dot {
  background: var(--secondary);
}
.conn-state.offline {
  color: var(--on-surface-variant);
}
.conn-state.offline .dot {
  background: var(--outline);
}
.conn-state.fault {
  color: var(--error);
}
.conn-state.fault .dot {
  background: var(--error);
}
.conn-picker {
  margin-top: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.conn-select {
  min-width: 0;
  flex: 1;
  border-radius: var(--radius);
  border: 1px solid var(--outline-variant);
  /* background-color (not the `background` shorthand) so the shared `select`
     rule's chevron background-image is not reset. */
  background-color: var(--surface-container-lowest);
  padding: 0.5rem;
  padding-right: 2rem;
  font-family: var(--font-data);
  font-size: 0.75rem;
  color: var(--on-surface);
}
.conn-select:disabled {
  opacity: 0.6;
}

/* Custom dropdown chevron for ALL <select>s: strip the native arrow (which the
   browser pins to the very edge) and draw our own, inset 0.85rem from the right
   so it never touches the border. The right padding above leaves room for it. */
select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%239e8e78' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 0.75rem auto;
}
.conn-refresh {
  flex: none;
  border-radius: var(--radius);
  border: 1px solid var(--outline-variant);
  background: var(--surface-container-high);
  padding: 0.5rem;
  font-family: var(--font-data);
  font-size: 0.75rem;
  color: var(--on-surface-variant);
  cursor: pointer;
}
.conn-backend {
  margin: 0.5rem 0 0;
  font-family: var(--font-data);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--on-surface-variant);
}

/* ── instructions card (dynamic per-phase guidance) ───────────────────────── */
/* Compact by design: it shares the 320px sidebar with the connection card and
   e-stop, so type is small and spacing is tight. */
.instr-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--outline-variant);
  border-left: 3px solid var(--primary);
  background: var(--surface-container-high);
  padding: 0.75rem 0.875rem;
}
.instr-title {
  /* reuse .section-label; just trim its bottom rule tighter for this card */
  border-bottom: 1px solid var(--outline-variant);
  padding-bottom: 0.375rem;
  margin-bottom: 0.5rem;
  color: var(--primary);
}
.instr-steps {
  margin: 0;
  padding-left: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  font-family: var(--font-data);
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--on-surface);
}
.instr-steps li {
  padding-left: 0.15rem;
}
.instr-steps li::marker {
  color: var(--primary);
  font-weight: 700;
}
.instr-note {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  margin: 0.5rem 0 0;
  font-family: var(--font-data);
  font-size: 0.6875rem;
  line-height: 1.3;
}
.instr-note .instr-icon {
  flex: none;
  font-size: 0.75rem;
  line-height: 1.2;
}
.instr-note.caveat {
  color: var(--on-surface-variant);
}
.instr-note.caveat .instr-icon {
  color: var(--secondary);
}
.instr-note.warn {
  color: var(--error);
  font-weight: 600;
}

.sidebar-foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* ── buttons ──────────────────────────────────────────────────────────────── */

button {
  font-family: inherit;
}

.btn {
  border-radius: var(--radius);
  border: 1px solid transparent;
  padding: 0.5rem 1rem;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
}
.btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.btn-primary {
  background: var(--primary-container);
  color: var(--on-primary-container);
  border-color: var(--primary-container);
}
.btn-primary:hover:not(:disabled) {
  filter: brightness(1.1);
}

.btn-amber-fill {
  background: var(--primary);
  color: var(--on-primary);
  border-color: var(--primary);
}
.btn-amber-fill:hover:not(:disabled) {
  background: var(--primary-fixed);
}

.btn-surface {
  background: var(--surface-container-high);
  color: var(--on-surface);
  border-color: var(--surface-container-high);
}
.btn-surface:hover:not(:disabled) {
  background: var(--surface-container-highest);
}

.btn-success {
  background: var(--secondary-container);
  color: var(--on-secondary-container);
  border-color: var(--secondary-container);
}
.btn-success:hover:not(:disabled) {
  filter: brightness(1.1);
}

.btn-outline {
  background: transparent;
  color: var(--on-surface-variant);
  border-color: var(--outline-variant);
}
.btn-outline:hover:not(:disabled) {
  border-color: var(--primary);
  color: var(--primary);
}

.btn-danger {
  background: var(--error-container);
  color: var(--on-error-container);
  border: 1px solid var(--error);
}
.btn-danger:hover:not(:disabled) {
  filter: brightness(1.1);
}

.btn-estop {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: var(--radius);
  border: 1px solid var(--error);
  background: var(--error-container);
  background-image: var(--hazard);
  padding: 1rem;
  font-family: var(--font-sans);
  font-size: 1.125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--on-error-container);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
  cursor: pointer;
}
.btn-estop:hover {
  filter: brightness(1.1);
}

.btn-block {
  display: block;
  width: 100%;
}
.btn-lg {
  padding: 0.75rem 1.5rem;
}

/* ── bottom data bar ──────────────────────────────────────────────────────── */

.data-bar {
  display: flex;
  height: 48px;
  flex: none;
  align-items: center;
  justify-content: space-between;
  border-top: 2px solid var(--outline);
  background: var(--surface-container-lowest);
  padding: 0 24px;
  font-family: var(--font-data);
  font-size: 0.875rem;
}
.data-bar-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.data-bar-status .dot {
  display: inline-block;
  height: 0.5rem;
  width: 0.5rem;
  border-radius: 9999px;
}
.data-bar-status.online {
  color: var(--secondary);
}
.data-bar-status.online .dot {
  background: var(--secondary);
}
.data-bar-status.offline {
  color: var(--error);
}
.data-bar-status.offline .dot {
  background: var(--error);
}
.data-bar-coords {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  font-weight: 700;
  color: var(--secondary);
}
.data-bar-coords .sep {
  color: var(--outline);
}
.data-bar-coords .bit {
  color: var(--on-surface-variant);
}

/* ── fault banner ─────────────────────────────────────────────────────────── */

.fault-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  border-bottom: 2px solid var(--error);
  background: var(--error-container);
  padding: 0.5rem 1.5rem;
  font-family: var(--font-data);
  font-size: 0.875rem;
  color: var(--on-error-container);
}
.fault-banner .dot {
  display: inline-block;
  height: 0.625rem;
  width: 0.625rem;
  border-radius: 9999px;
  background: var(--error);
}
.fault-banner .label {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.fault-reconnect {
  border-radius: var(--radius);
  border: 1px solid var(--error);
  background: transparent;
  padding: 0.25rem 0.75rem;
  font-family: var(--font-data);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--on-error-container);
  cursor: pointer;
}
.fault-reconnect:hover {
  background: var(--error);
  color: var(--on-error);
}

/* ── Stage 1: load ────────────────────────────────────────────────────────── */

.stage {
  display: flex;
  height: 100%;
  flex-direction: column;
}
.stage-cols {
  display: flex;
  height: 100%;
  gap: 1rem;
}

.dropzone {
  display: flex;
  flex: 1;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 2.5rem 1.5rem;
  border-radius: var(--radius-lg);
  border: 2px dashed var(--outline-variant);
  background: var(--surface-container-lowest);
  text-align: center;
}
.dropzone:hover {
  border-color: var(--primary);
}
/* The "Load sample board" affordance below the upload area. */
.sample-row {
  margin-top: 1.25rem;
  display: flex;
  justify-content: center;
}
.dropzone-icon {
  font-size: 3.5rem;
  color: var(--on-surface-variant);
}
.dropzone-title {
  font-family: var(--font-sans);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--on-surface);
}
.dropzone-sub {
  font-family: var(--font-data);
  font-size: 0.875rem;
  color: var(--on-surface-variant);
}
.browse-pill {
  border-radius: var(--radius);
  background: var(--surface-container-high);
  padding: 0.5rem 1rem;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--on-surface);
}

.outline-row {
  margin-top: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  cursor: pointer;
  border-radius: var(--radius);
  border: 1px dashed var(--outline-variant);
  background: var(--surface-container-lowest);
  padding: 0.5rem 1rem;
  font-family: var(--font-data);
  font-size: 0.75rem;
  color: var(--on-surface-variant);
}
.outline-row:hover {
  border-color: var(--primary);
}

.file-entry {
  margin-top: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: var(--radius);
  border: 1px solid var(--outline-variant);
  background: var(--surface-container);
  padding: 0.5rem 1rem;
  font-family: var(--font-data);
  font-size: 0.875rem;
  color: var(--on-surface);
}

.upload-error {
  margin-top: 0.75rem;
  border-radius: var(--radius);
  border: 1px solid var(--error);
  background: var(--surface-container);
  padding: 0.75rem 1rem;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: var(--error);
}

.diagnostic-bar {
  margin-bottom: 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  border-radius: var(--radius);
  border: 1px solid var(--outline-variant);
  background: var(--surface-container-low);
  padding: 0.75rem 1rem;
  font-family: var(--font-data);
  font-size: 0.875rem;
  color: var(--on-surface-variant);
}
.diagnostic-bar .ok {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  color: var(--secondary);
}
.diagnostic-bar strong {
  color: var(--on-surface);
}

/* the canvas wrapper used by every stage that shows the board */
.canvas-frame {
  position: relative;
  flex: 1;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--outline-variant);
  min-width: 0;
}

.stage-actions {
  margin-top: 1rem;
  display: flex;
  justify-content: flex-end;
}

/* Board-side (Front / Back copper-up) selector. */
.side-toggle {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin: 0.75rem 0;
}
.side-label {
  font-family: var(--font-data);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
}
.side-segs {
  display: inline-flex;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius);
  overflow: hidden;
}
.side-seg {
  appearance: none;
  border: none;
  background: var(--surface-container-lowest);
  color: var(--on-surface-variant);
  font-family: var(--font-data);
  font-size: 0.8rem;
  padding: 0.4rem 0.9rem;
  cursor: pointer;
}
.side-seg + .side-seg {
  border-left: 1px solid var(--outline-variant);
}
.side-seg.active {
  background: var(--primary-container);
  color: var(--on-primary-container);
  font-weight: 600;
}
.side-note {
  font-family: var(--font-data);
  font-size: 0.7rem;
  color: var(--secondary);
}

/* ── Stage 2/3/4 right aside ──────────────────────────────────────────────── */

.aside {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 1rem;
  overflow-y: auto;
}
.aside-360 {
  width: 360px;
}
.aside-280 {
  width: 280px;
}
.aside h3 {
  font-family: var(--font-sans);
  font-size: 1.125rem;
  font-weight: 700;
  margin: 0;
  color: var(--on-surface);
}
.aside-sub {
  font-family: var(--font-data);
  font-size: 0.75rem;
  color: var(--on-surface-variant);
  margin: 0.25rem 0 0;
}

.panel {
  border-radius: var(--radius-lg);
  border: 1px solid var(--outline-variant);
  background: var(--surface-container);
  padding: 1rem;
}
.panel-high {
  background: var(--surface-container-high);
}
/* A restored-but-unconfirmed alignment prompt: error-tinted to flag that the
   restored transform is NOT trusted until the operator reconnects and resumes. */
.panel-warn {
  border-color: var(--error);
  background: rgba(255, 180, 171, 0.08);
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.panel-head-label {
  font-family: var(--font-data);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--on-surface-variant);
}
.badge {
  border-radius: var(--radius);
  border: 1px solid;
  padding: 0.125rem 0.5rem;
  font-family: var(--font-data);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
}
.badge.online {
  border-color: var(--primary);
  background: rgba(255, 179, 0, 0.1);
  color: var(--primary);
}
.badge.offline {
  border-color: var(--error);
  background: rgba(255, 180, 171, 0.1);
  color: var(--error);
}
.panel-hint {
  margin: 0.5rem 0 0;
  font-family: var(--font-data);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--on-surface-variant);
}

/* jog */
.jog-panel.locked {
  pointer-events: none;
  opacity: 0.5;
}
.jog-steps {
  margin-top: 0.5rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.25rem;
}
.jog-step {
  border-radius: var(--radius);
  border: none;
  background: var(--surface-container-high);
  color: var(--on-surface);
  padding: 0.25rem 0.5rem;
  font-family: var(--font-data);
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
}
.jog-step.active {
  background: var(--primary-container);
  color: var(--on-primary-container);
}
.jog-grid {
  margin-top: 0.75rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 0.25rem;
}
.jog-z {
  margin-top: 0.75rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.25rem;
}

/* keyboard jog shortcut legend */
.jog-shortcuts {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--outline-variant);
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.kbd-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.kbd-keys {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  flex-wrap: wrap;
}
.kbd-what {
  font-family: var(--font-data);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--on-surface-variant);
  text-align: right;
}
.kbd-sep {
  color: var(--on-surface-variant);
  font-size: 0.7rem;
}
.kbd {
  display: inline-block;
  min-width: 1.1rem;
  padding: 0.1rem 0.35rem;
  font-family: var(--font-data);
  font-size: 0.7rem;
  line-height: 1.1;
  text-align: center;
  color: var(--on-surface);
  background: var(--surface-container-high);
  border: 1px solid var(--outline);
  border-bottom-width: 2px;
  border-radius: var(--radius-sm);
}
.kbd-note {
  margin: 0.125rem 0 0;
  font-family: var(--font-data);
  font-size: 0.5625rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--on-surface-variant);
}
.jog-btn {
  border-radius: var(--radius);
  border: none;
  background: var(--surface-container-high);
  color: var(--on-surface);
  padding: 0.5rem;
  font-family: var(--font-data);
  font-size: 0.75rem;
  font-weight: 700;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
  cursor: pointer;
}
.jog-btn:hover:not(:disabled) {
  background: var(--surface-container-highest);
}
.jog-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.jog-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.jog-center .dot {
  height: 0.5rem;
  width: 0.5rem;
  border-radius: 9999px;
  background: var(--primary-container);
}

/* quality readout */
/* Two parallel quality axes (ADR-0020): REGISTRATION (XY) and DEPTH (Z) sit side
   by side, each its own readout with its own value + pass/fail color, so a green
   XY can never be the lone headline above a red Z. Collapses to one column when
   the aside is narrow. */
.quality-axes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
@media (max-width: 28rem) {
  .quality-axes {
    grid-template-columns: 1fr;
  }
}
.axis-readout {
  min-width: 0;
}
.axis-label {
  display: block;
  font-family: var(--font-data);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--on-surface-variant);
  margin-bottom: 0.25rem;
}
.quality-value {
  font-family: var(--font-data);
  font-size: 1.125rem;
  font-weight: 700;
}
.quality-value.good {
  color: var(--secondary);
}
.quality-value.fair {
  color: var(--primary);
}
.quality-value.poor {
  color: var(--error);
}
/* DEPTH (Z) over tolerance — the failing axis reads emergency red. */
.quality-value.bad {
  color: var(--error);
}
/* DEPTH (Z) unverified (< 4 captures) — a muted amber nudge, not a pass/fail. */
.quality-value.unverified {
  color: var(--primary-container);
  opacity: 0.9;
  font-size: 0.9375rem;
}
.quality-track {
  margin-top: 0.5rem;
  height: 0.25rem;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface-container-highest);
}
.quality-fill {
  height: 100%;
}
.quality-fill.good {
  background: var(--secondary);
}
.quality-fill.fair {
  background: var(--primary-container);
}
.quality-fill.poor {
  background: var(--error);
}
/* DEPTH (Z) over tolerance — the failing axis's bar drains red. */
.quality-fill.bad {
  background: var(--error);
}
.residuals {
  margin: 0.5rem 0 0;
  font-family: var(--font-data);
  font-size: 0.75rem;
  color: var(--on-surface-variant);
}
/* The DEPTH (Z) readout's sub-line (ADR-0020). An unverified Z (< 4 captures)
   reads muted amber — a non-error nudge to capture a 4th, not a warning that the
   fit is wrong. */
.residuals.z-unverified {
  color: var(--primary-container);
  opacity: 0.85;
}
/* The secondary over-tolerance line inside the rejected box (e.g. the XY excess
   noted on a BOTH-axis failure) reads as an error (red). */
.rejected-hint.z-rejected {
  color: var(--error);
}

/* Advisory fit verdict (ADR-0019) — DISPLAY ONLY, never gates. Plausible reads
   green; Suspect reads amber (warning), with one reason line per flag. */
.verdict {
  margin-top: 0.75rem;
  border-radius: var(--radius);
  border: 1px solid;
  padding: 0.5rem;
}
.verdict.plausible {
  border-color: var(--secondary);
  background: rgba(64, 229, 108, 0.08);
}
.verdict.suspect {
  border-color: var(--primary-container);
  background: rgba(255, 179, 0, 0.08);
}
.verdict-badge {
  font-family: var(--font-data);
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.verdict.plausible .verdict-badge {
  color: var(--secondary);
}
.verdict.suspect .verdict-badge {
  color: var(--primary-container);
}
.verdict-reason {
  margin: 0.375rem 0 0;
  font-family: var(--font-data);
  font-size: 0.75rem;
  color: var(--on-surface-variant);
}

/* Always-visible numeric breakdown of the decomposed geometry. A compact
   labelled grid (no toggle — a disclosure toggle would need stored state). */
.fit-breakdown {
  margin-top: 0.75rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.375rem;
}
.breakdown-cell {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  border-radius: var(--radius);
  background: var(--surface-dim);
  padding: 0.25rem 0.5rem;
}
.breakdown-cell .label {
  font-family: var(--font-data);
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--on-surface-variant);
}
.breakdown-cell .value {
  font-family: var(--font-data);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--on-surface);
}

.rejected-box {
  border-radius: var(--radius);
  border: 1px solid var(--error);
  background: var(--surface-container);
  padding: 1rem;
  font-family: var(--font-data);
  font-size: 0.875rem;
  color: var(--on-surface);
}
.rejected-title {
  margin: 0 0 0.25rem;
  font-weight: 600;
  color: var(--error);
}
.rejected-hint {
  margin: 0 0 0.75rem;
  color: var(--on-surface-variant);
  font-size: 0.8rem;
  line-height: 1.4;
}
.residual-list {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-bottom: 0.5rem;
}
.residual-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--on-surface-variant);
  padding: 0.15rem 0.4rem;
  border-radius: var(--radius-sm);
}
.residual-row.worst {
  color: var(--error);
  background: color-mix(in srgb, var(--error) 14%, transparent);
  font-weight: 600;
}
.override-box {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px dashed var(--outline-variant);
}
.override-warn {
  margin: 0 0 0.5rem;
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--on-surface-variant);
}

/* FIX 1 (ADR-0022): a BLOCKED override (Z outlier). The warn line reads as the
   error color so the recapture instruction stands out, and the disabled button
   already greys via the base `:disabled` rule. */
.override-box.override-blocked .override-warn {
  color: var(--error);
  font-weight: 600;
}

.spacer {
  margin-top: auto;
}

/* dry-run overlay tag */
.canvas-tag {
  position: absolute;
  left: 1rem;
  top: 1rem;
  border-radius: var(--radius);
  background: rgba(32, 31, 31, 0.8);
  padding: 0.25rem 0.75rem;
  font-family: var(--font-data);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--primary);
  z-index: 3;
}

.confirm-box {
  margin-top: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--error);
  background: var(--surface-container);
  background-image: var(--hazard);
  padding: 1rem;
}
.confirm-box p {
  margin: 0;
  font-family: var(--font-data);
  font-size: 0.75rem;
  color: var(--on-surface-variant);
}
.confirm-box .title {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* ── Stage 4: drilling ────────────────────────────────────────────────────── */

.drill-overlay {
  pointer-events: none;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}
.drill-ring {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  border-radius: 9999px;
  background: rgba(32, 31, 31, 0.8);
  padding: 2.5rem;
  backdrop-filter: blur(4px);
}
.drill-pct {
  font-family: var(--font-sans);
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--primary-container);
}
.drill-count {
  font-family: var(--font-data);
  font-size: 0.875rem;
  color: var(--on-surface-variant);
}
.drill-status {
  font-family: var(--font-data);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--primary-container);
}

.telemetry-row {
  margin-top: 0.75rem;
}
.telemetry-row .label {
  margin: 0;
  font-family: var(--font-data);
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--on-surface-variant);
}
.telemetry-row .value {
  margin: 0;
  font-family: var(--font-data);
  font-size: 1.125rem;
  font-weight: 700;
}
.telemetry-row .value.primary {
  color: var(--primary);
}
.telemetry-row .value.secondary {
  color: var(--secondary);
}

/* bit-change modal */
.modal-scrim {
  position: absolute;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(19, 19, 19, 0.9);
  backdrop-filter: blur(4px);
}
/* The in-modal Emergency Stop (lives inside the modal card, above the scrim, so
   the e-stop is never covered by the scrim). Separated from the confirm/cancel
   row by a top margin. */
.modal-estop {
  margin-top: 0.75rem;
}
.modal {
  width: 24rem;
  border-radius: var(--radius-lg);
  border: 2px solid var(--primary-container);
  background: var(--surface-container);
  padding: 2rem;
  text-align: center;
}
.modal-icon {
  font-size: 3rem;
  color: var(--primary-container);
}
.modal h3 {
  margin: 0.5rem 0 0;
  font-family: var(--font-sans);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--on-surface);
}
.modal-paused {
  font-family: var(--font-data);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--primary-container);
}
.modal-body {
  margin-top: 1rem;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: var(--on-surface);
}
.modal-warn {
  margin-top: 0.75rem;
  font-family: var(--font-data);
  font-size: 0.75rem;
  color: var(--error);
}

/* ── Stage 5: completion ──────────────────────────────────────────────────── */

.completion {
  position: relative;
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.completion-bg {
  position: absolute;
  inset: 0;
  opacity: 0.4;
}
.completion-card {
  position: relative;
  z-index: 10;
  width: 28rem;
  border-radius: var(--radius-xl);
  border: 1px solid var(--outline-variant);
  background: var(--surface-container);
  padding: 2rem;
  text-align: center;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8);
}
.completion-check {
  font-size: 3.75rem;
  color: var(--secondary);
}
.completion-card h2 {
  margin: 0.5rem 0 0;
  font-family: var(--font-sans);
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--primary);
}
.summary-grid {
  margin-top: 1.5rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  text-align: left;
}
.summary-cell {
  border-radius: var(--radius-lg);
  border: 1px solid var(--outline-variant);
  background: var(--surface-dim);
  padding: 0.75rem;
}
.summary-cell.span2 {
  grid-column: span 2;
}
.summary-cell .label {
  margin: 0;
  font-family: var(--font-data);
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--on-surface-variant);
}
.summary-cell .value {
  margin: 0;
  font-family: var(--font-data);
  font-size: 1.125rem;
  font-weight: 700;
}
.summary-cell .value.secondary {
  color: var(--secondary);
}

/* ── board canvas (ported scoped styles) ──────────────────────────────────── */

.board-canvas {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.board-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  border-radius: var(--radius);
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.6);
  touch-action: none;
}
.board-svg.clickable {
  cursor: crosshair;
}

.zoom-controls {
  position: absolute;
  right: 1rem;
  top: 1rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.25rem;
  z-index: 2;
}
.zoom-controls button {
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--on-surface);
  background: rgba(19, 19, 19, 0.85);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius);
  cursor: pointer;
  font-family: var(--font-data);
}
.zoom-controls button:hover {
  border-color: var(--primary-container);
  color: var(--primary-container);
}
.zoom-controls .reset {
  font-size: 0.9rem;
}
.zoom-level {
  text-align: center;
  font-family: var(--font-data);
  font-size: 0.6rem;
  color: var(--on-surface-variant);
  background: rgba(19, 19, 19, 0.85);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius);
  padding: 0.1rem 0;
}

/* holes */
.hole.done {
  filter: drop-shadow(0 0 6px rgba(0, 200, 83, 0.6));
}
.hole.active {
  filter: drop-shadow(0 0 8px rgba(255, 180, 171, 0.8));
  animation: soft-pulse 1.2s ease-in-out infinite;
}

/* fiducials */
.fid.current circle,
.fid.current line {
  stroke: #ffb300;
}
.fid.current {
  animation: soft-pulse 1.2s ease-in-out infinite;
  cursor: pointer;
  filter: drop-shadow(0 0 4px rgba(255, 179, 0, 0.7));
}
.fid:focus {
  outline: none;
}
.fid:focus-visible circle:first-of-type {
  stroke: #ffd79b;
  stroke-width: 0.4px;
}
.fid.pending circle {
  stroke: #ffb300;
  opacity: 0.3;
}
.fid.pending {
  cursor: pointer;
}
.fid.pending:hover circle {
  opacity: 0.6;
}
.fid.captured circle {
  stroke: #40e56c;
}

/* Post-fit residual annotations: the worst captured fiducial turns error-red
   (ring, check, and label) so the operator can spot which dot is off; every
   captured fiducial gets a small mono mm label beside its marker. */
.fid-worst circle {
  stroke: var(--error);
}
.fid-worst path {
  stroke: var(--error);
}
.fid-residual-label {
  fill: #40e56c;
  font-weight: 600;
  paint-order: stroke;
  stroke: rgba(0, 0, 0, 0.65);
  stroke-width: 0.08px;
}
.fid-residual-label.worst {
  fill: var(--error);
}

/* head crosshair */
.head {
  animation: spin 6s linear infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.head.estimate {
  animation: spin 6s linear infinite, soft-pulse 1.4s ease-in-out infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Downhill tilt arrow (Align stage, non-flat fit). Amber = "attention". */
.tilt-arrow line {
  stroke: #ffb300;
}
.tilt-arrow circle {
  fill: #ffb300;
}

.head-confidence {
  position: absolute;
  left: 1rem;
  top: 1rem;
  font-family: var(--font-data);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius);
  background: rgba(19, 19, 19, 0.85);
  border: 1px solid var(--outline-variant);
  z-index: 2;
}
.head-confidence.none {
  color: var(--outline);
}
.head-confidence.estimate,
.head-confidence.rough {
  color: var(--primary-container);
  border-color: #604100;
}
.head-confidence.aligned {
  color: #22d3ee;
  border-color: #155e6b;
}

.legend {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  background: rgba(19, 19, 19, 0.85);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius);
  padding: 0.5rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-family: var(--font-data);
  font-size: 0.7rem;
  color: var(--on-surface);
  z-index: 2;
}
.legend-title {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--on-surface-variant);
  font-size: 0.625rem;
}
.legend-row {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.legend .dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 9999px;
}

/* ── settings ─────────────────────────────────────────────────────────────── */

.settings-top {
  display: flex;
  height: 64px;
  flex: none;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--outline-variant);
  background: var(--surface-container-high);
  padding: 0 24px;
}
.settings-top-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.settings-divider {
  height: 1.5rem;
  width: 1px;
  background: var(--outline-variant);
}
.settings-sys {
  font-family: var(--font-data);
  font-size: 0.875rem;
  color: var(--on-surface-variant);
}
.maintenance {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: var(--radius);
  border: 1px solid var(--outline-variant);
  background: var(--surface-container);
  padding: 0.25rem 0.75rem;
  font-family: var(--font-data);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--on-surface-variant);
}
.maintenance .dot {
  display: inline-block;
  height: 0.5rem;
  width: 0.5rem;
  border-radius: 9999px;
  background: var(--primary-container);
}

.settings-nav {
  display: flex;
  width: 320px;
  flex: none;
  flex-direction: column;
  border-right: 1px solid var(--outline-variant);
  background: var(--surface-container);
}
.settings-nav ul {
  list-style: none;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.25rem;
  overflow-y: auto;
  padding: 1rem;
  margin: 0;
}
.cat-btn {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.5rem;
  border-radius: var(--radius);
  border: none;
  background: transparent;
  padding: 0.5rem 0.75rem;
  font-family: var(--font-data);
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--on-surface-variant);
  cursor: pointer;
  text-align: left;
}
.cat-btn:hover {
  background: var(--surface-container-highest);
  color: var(--on-surface);
}
.cat-btn.active {
  border: 2px solid var(--primary);
  background: var(--primary-container);
  color: var(--on-primary-container);
}

.settings-main {
  display: flex;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
  background: var(--background);
}
.settings-scroll {
  position: relative;
  flex: 1;
  overflow-y: auto;
  padding: 2rem;
}
.settings-inner {
  max-width: 56rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-bottom: 2rem;
}
.panel-header {
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--outline-variant);
  padding-bottom: 1rem;
}
.panel-header h1 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--on-surface);
}
.panel-header p {
  margin: 0.5rem 0 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--on-surface-variant);
}
.config-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--outline-variant);
  background: var(--surface-container-high);
  padding: 1.5rem;
}
.config-card + .config-card {
  margin-top: 1rem;
}
.config-card h3 {
  margin: 0 0 1rem;
  font-family: var(--font-data);
  font-size: 1.125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--primary);
}
/* Sub-group label inside a card (e.g. the Dry-run / Drill columns under
   "Feeds & Speeds"). Smaller and muted vs the card's h3 title. */
.config-card h4 {
  margin: 1rem 0 0.5rem;
  font-family: var(--font-data);
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--on-surface-variant);
}
.config-card h4:first-of-type {
  margin-top: 0;
}
.field-grid {
  display: grid;
  gap: 1.5rem;
}
.cols-2 {
  grid-template-columns: repeat(2, 1fr);
}
.cols-3 {
  grid-template-columns: repeat(3, 1fr);
}
.field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.field label {
  font-family: var(--font-data);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--on-surface-variant);
}
.field input,
.field select {
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--outline-variant);
  /* background-color (not the `background` shorthand) so the shared `select`
     rule's chevron background-image survives on the select. */
  background-color: var(--surface-container-lowest);
  padding: 0.75rem 1rem;
  font-family: var(--font-data);
  font-size: 0.875rem;
  color: var(--on-surface);
}
.field select {
  padding-right: 2.5rem;
}
/* The Z-height schematic on the Drilling Defaults page. */
.z-diagram {
  margin-bottom: 1.25rem;
  padding: 0.75rem;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius);
  background: var(--surface-container-lowest);
}
.z-diagram-svg {
  display: block;
  width: 100%;
  max-width: 32rem;
  margin: 0 auto;
  height: auto;
}
.field input:focus,
.field select:focus {
  outline: none;
  border-color: var(--primary);
}
.toggle-row {
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--outline-variant);
  background: var(--surface-container-lowest);
  padding: 1rem;
}
.switch {
  position: relative;
  display: inline-block;
  height: 1.5rem;
  width: 2.75rem;
  flex: none;
  padding: 0;
  border-radius: 9999px;
  border: none;
  cursor: pointer;
  background: var(--surface-variant);
}
.switch.on {
  background: var(--primary-container);
}
/* Knob: absolutely positioned with equal insets so the gap is symmetric in both
   states. Track 2.75rem, knob 1.25rem, inset 0.125rem → on-offset =
   2.75 - 1.25 - 0.125 - 0.125 = 1.25rem from the off position. */
.switch .knob {
  position: absolute;
  top: 0.125rem;
  left: 0.125rem;
  height: 1.25rem;
  width: 1.25rem;
  border-radius: 9999px;
  background: #fff;
  transform: translateX(0);
  transition: transform 0.15s;
}
.switch.on .knob {
  transform: translateX(1.25rem);
}
.toggle-text .title {
  display: block;
  font-family: var(--font-data);
  font-size: 0.875rem;
  color: var(--on-surface);
}
.toggle-text .sub {
  font-family: var(--font-data);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--on-surface-variant);
}

.action-bar {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  border-top: 2px solid var(--outline);
  background: var(--surface-container-lowest);
  padding: 1rem 1.5rem;
}
.action-bar .dirty {
  font-family: var(--font-data);
  font-size: 0.875rem;
  color: var(--on-surface-variant);
}
.action-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.btn-reset {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: var(--radius);
  border: 1px solid var(--outline-variant);
  background: transparent;
  padding: 0.75rem 1.5rem;
  font-family: var(--font-data);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--on-surface);
  cursor: pointer;
}
.btn-reset:hover {
  border-color: var(--error-container);
  background: var(--error-container);
  color: var(--on-error-container);
}
.btn-apply {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: var(--radius);
  border: none;
  background: var(--primary);
  color: var(--on-primary);
  padding: 0.75rem 2rem;
  font-family: var(--font-data);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
}
.btn-apply:hover {
  background: var(--primary-fixed);
}

/* ── header actions (Log + Config buttons) ─────────────────────────────────── */
.header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* ── serial comms log screen ───────────────────────────────────────────────── */
.log-count {
  font-family: var(--font-data);
  font-size: 0.75rem;
  color: var(--on-surface-variant);
  margin-right: 0.25rem;
}
.log-scroll {
  flex: 1;
  overflow-y: auto;
  background: var(--surface-container-lowest);
  padding: 0.75rem 1rem;
  font-family: var(--font-data);
  font-size: 0.8125rem;
  line-height: 1.5;
}
.log-empty {
  color: var(--on-surface-variant);
  font-family: var(--font-data);
  padding: 1rem 0;
}
.log-row {
  display: flex;
  gap: 0.75rem;
  white-space: pre-wrap;
  word-break: break-all;
  border-bottom: 1px solid var(--surface-container);
  padding: 0.0625rem 0;
}
.log-time {
  color: var(--outline);
  flex: none;
  opacity: 0.8;
}
.log-arrow {
  flex: none;
  width: 1ch;
  font-weight: 700;
}
.log-line {
  flex: 1;
}
.log-tx .log-arrow,
.log-tx .log-line {
  color: var(--primary);
}
.log-rx .log-arrow,
.log-rx .log-line {
  color: var(--secondary);
}
.log-note .log-arrow,
.log-note .log-line {
  color: var(--on-surface-variant);
  font-style: italic;
}

/* ── safety disclaimer modal ──────────────────────────────────────────────────
   A scrim + centred card raised over the shell before the motors energize. The
   stage stays visible (dimmed) behind it; nothing moves until it is accepted. */
.modal-scrim {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(0, 0, 0, 0.72);
}
.modal-card {
  width: min(34rem, 100%);
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
  border-radius: var(--radius-lg);
  border: 2px solid var(--primary-container);
  background: var(--surface-container);
  padding: 1.5rem;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.6);
}
.modal-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.modal-icon {
  font-size: 1.75rem;
  line-height: 1;
  color: var(--primary-container);
}
.modal-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--on-surface);
}
.modal-lede {
  margin: 0 0 1rem;
  color: var(--on-surface);
  line-height: 1.5;
}
.modal-checklist {
  margin: 0 0 1.5rem;
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  color: var(--on-surface-variant);
  line-height: 1.5;
}
.modal-checklist li::marker {
  color: var(--primary-container);
}
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
}