/* common.css — shared utilities */

/* Visually hidden (a11y) */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Flex utilities */
.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.gap-1 { gap: .5rem; }
.gap-2 { gap: 1rem; }

/* Spacing */
.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1rem; }
.mb-1 { margin-bottom: .5rem; }
.mb-2 { margin-bottom: 1rem; }

/* Text */
.text-muted { color: var(--muted); }
.text-accent { color: var(--accent); }
.text-sm { font-size: .875rem; }
.text-center { text-align: center; }
.font-bold { font-weight: 700; }

/* Info note */
.note {
  font-size: .85rem;
  color: var(--muted);
  padding: .5rem .75rem;
  background: var(--bg2);
  border-radius: 6px;
  margin-top: .5rem;
}

/* Divider */
.divider { border: none; border-top: 1px solid var(--line); margin: 1.5rem 0; }

/* Input with unit suffix */
.input-unit-wrapper {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}
.input-unit-wrapper input {
  border: none;
  border-radius: 0;
  flex: 1;
}
.input-unit-wrapper input:focus { box-shadow: none; }
.input-unit-suffix {
  background: var(--bg2);
  padding: .55rem .75rem;
  font-size: .875rem;
  color: var(--muted);
  white-space: nowrap;
  border-left: 1px solid var(--line);
}

/* Status indicator */
.status-pass { color: var(--pass-color); font-weight: 700; }
.status-fail { color: var(--fail-color); font-weight: 700; }