.card.alignment-visual {
  width: 100%;
  max-width: 560px;
  aspect-ratio: 1;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  gap: 12px;
  border: 1px solid #b9c7d8;
  background: #fbfdff;
  overflow: hidden;
}

.alignment-visual-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.alignment-visual-header h2 {
  margin: 0;
  font-size: clamp(13px, 3.4vw, 18px);
  letter-spacing: .5px;
}

.alignment-visual-toggle {
  display: flex;
  flex-shrink: 0;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #eef3f8;
}

.alignment-visual-toggle button {
  min-height: 38px;
  padding: 7px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.alignment-visual-toggle button[aria-pressed="true"] {
  background: var(--navy);
  color: #fff;
}

.alignment-visual-toggle button:hover {
  box-shadow: inset 0 0 0 1px #8ca2ba;
}

.alignment-visual-toggle button:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.alignment-visual-offset {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 3px 8px;
  font-variant-numeric: tabular-nums;
}

.alignment-visual-offset > span,
.alignment-visual-feet span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .3px;
}

.alignment-visual-offset strong {
  font-size: clamp(18px, 4vw, 26px);
}

.alignment-visual-offset small {
  grid-column: 1 / -1;
  font-size: 12px;
  color: var(--muted);
}

#alignmentVisualDiagram {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: visible;
}

.alignment-visual-ground { stroke: #c9d3df; stroke-width: 2; }
.alignment-visual-pump { fill: #edf3f9; stroke: #b9c7d8; stroke-width: 2; }
.alignment-visual-motor { fill: #edf5fc; stroke: #b9c7d8; stroke-width: 2; }
.alignment-visual-pump-line { fill: none; stroke: #667085; stroke-width: 2; stroke-dasharray: 7 5; }
.alignment-visual-motor-line { fill: none; stroke: #087bdc; stroke-width: 3; }
.alignment-visual-foot { fill: none; stroke: #087bdc; stroke-width: 3; }
.alignment-visual-correction { fill: none; stroke: #138a4b; stroke-width: 2.5; }
.alignment-visual-offset-line { fill: none; stroke: #a66c19; stroke-width: 2; }
.alignment-visual-offset-point { fill: #a66c19; }
.alignment-visual-machine-label { fill: #132238; font-size: 15px; font-weight: 800; letter-spacing: 1px; }
.alignment-visual-pump-label { fill: #667085; font-size: 14px; }
.alignment-visual-motor-label { fill: #087bdc; font-size: 14px; font-weight: 700; }
.alignment-visual-location-label { fill: #667085; font-size: 13px; font-weight: 700; }

.alignment-visual-feet {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.alignment-visual-feet strong {
  display: block;
  margin-top: 4px;
  color: var(--green);
  font-size: clamp(12px, 3vw, 16px);
  font-variant-numeric: tabular-nums;
}

.alignment-visual-note {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

#reportAlignmentVisuals {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.report-alignment-visual {
  break-inside: avoid;
  page-break-inside: avoid;
}

.report-alignment-body {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 8px;
}

.report-alignment-square {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid #b9c7d8;
  background: #fbfdff;
}

.report-alignment-square svg {
  display: block;
  width: 100%;
  height: 100%;
}

.report-alignment-details {
  display: grid;
  gap: 8px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.report-alignment-details .alignment-visual-feet {
  grid-template-columns: 1fr;
  gap: 6px;
  padding-top: 6px;
}

.report-alignment-details .alignment-visual-offset strong { font-size: 18px; }
.report-alignment-status { margin: 0; font-size: 12px; font-weight: 700; }
.report-alignment-square .alignment-visual-pump-label,
.report-alignment-square .alignment-visual-motor-label { font-size: 20px; }
.report-alignment-square .alignment-visual-location-label { font-size: 16px; }

@media screen and (max-width: 520px) {
  .report-alignment-body { grid-template-columns: minmax(0, 1fr); }
  .report-alignment-square { width: 100%; max-width: 280px; justify-self: center; }
}

@media print {
  html:has(#reportAlignmentVisuals), body:has(#reportAlignmentVisuals) { height: auto; }
  #report:has(#reportAlignmentVisuals) { height: auto; min-height: 0; overflow: visible; }
  #report .rgrid { grid-template-columns: 1fr 1fr; }
  #report .rgrid[style*="margin-top:12px"] { margin-top: 7px !important; }
  #report .rtable td, #report .rtable th { padding: 2px 5px; }
  #reportAlignmentVisuals { gap: 6px; margin-top: 7px; }
  .report-alignment-body { grid-template-columns: 170px minmax(0, 1fr); gap: 10px; padding: 5px; }
  .report-alignment-details { gap: 5px; }
  .report-alignment-details .alignment-visual-offset strong { font-size: 13px; }
  .report-alignment-details .alignment-visual-offset > span,
  .report-alignment-details .alignment-visual-feet span { font-size: 9px; }
  .report-alignment-details .alignment-visual-feet strong,
  .report-alignment-details .alignment-visual-offset small,
  .report-alignment-details .alignment-visual-note,
  .report-alignment-status { font-size: 10px; }
  .report-alignment-visual { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  #report .rgrid, #report .rbox, #report .footer { break-inside: avoid; }
}

@media (max-width: 420px) {
  .card.alignment-visual { padding: 12px; gap: 6px; }
  .alignment-visual-header h2 { font-size: 12px; letter-spacing: .2px; white-space: nowrap; }
  .alignment-visual-toggle button { min-height: 36px; padding: 6px 8px; font-size: 10px; }
  .alignment-visual-feet { padding-top: 6px; }
  .alignment-visual-feet strong { font-size: 11px; }
  .alignment-visual-offset > span, .alignment-visual-feet span { font-size: 10px; }
  .alignment-visual-note { font-size: 11px; }
  .alignment-visual-machine-label { font-size: 18px; }
  .alignment-visual-pump-label, .alignment-visual-motor-label { font-size: 20px; }
  .alignment-visual-location-label { font-size: 16px; }
  #alignmentFrontLabel, #alignmentBackLabel { font-size: 14px; }
}