/* SegmentVelger — segmentert av/på-kontroll (komponenter/segment-velger.js).
   Semantikk-nøytral base. Farge pr. verdi (rød «mangler», grønn «ok») hører
   hjemme i den domene-CSS-en som bruker kontrollen, ikke her. */

.segment {
  /* Auto-kolonner, ikke repeat(N) — samme kontroll brukes med 2, 3 og 4 segmenter. */
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0;
  border: var(--kant);
  border-radius: var(--radius);
  overflow: hidden;
}

.segment__valg {
  padding: 6px 4px;
  border: 0;
  border-left: var(--kant);
  background: var(--farge-overflate);
  color: var(--farge-tekst-dempet);
  font: inherit;
  font-size: var(--font-liten);
  line-height: var(--linje-hoyde-tett);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.segment__valg:first-child { border-left: 0; }
.segment__valg:hover:not(:disabled) { background: var(--farge-overflate-hover); color: var(--farge-tekst); }
.segment__valg:disabled { opacity: 0.45; cursor: not-allowed; }
.segment__valg:focus-visible { outline: 2px solid var(--farge-primary); outline-offset: -2px; }

/* Nøytral «valgt»-tilstand. Overstyres pr. verdi der valget bærer status-semantikk. */
.segment__valg--aktiv {
  font-weight: 600;
  background: var(--farge-primary-svak);
  color: var(--farge-primary);
}

/* Tett variant for sidepaneler der plassen er knapp. */
.segment--liten .segment__valg { padding: 4px 3px; font-size: 11px; }