/* ───────────────────────────────────────────────────────────────────────────
   .dv-segment — segmented control for a small set of mutually-exclusive
   options rendered as a native radio group (accessible, keyboard-navigable).
   Button chrome lives here so views never hand-roll bg-accent + rounded-btn
   utility soup (which trips the design-system lookalike gate).

   Markup:
     <div class="dv-segment dv-segment--block">
       <label class="dv-segment__option">
         <input type="radio" class="dv-segment__input sr-only" ...>
         <span class="dv-segment__label">DIN</span>
       </label>
       ...
     </div>
   ─────────────────────────────────────────────────────────────────────────── */
.dv-segment {
  display: inline-flex;
  gap: 0.5rem;
}

.dv-segment--block {
  display: flex;
  width: 100%;
}

.dv-segment__option {
  flex: 1 1 0;
  cursor: pointer;
}

.dv-segment__label {
  display: block;
  text-align: center;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: var(--ink);
  background-color: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.dv-segment__option:hover .dv-segment__label {
  background-color: var(--surface-alt);
}

.dv-segment__input:checked + .dv-segment__label {
  background-color: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.dv-segment__input:focus-visible + .dv-segment__label {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}