/* ==========================================================================
   "Overvejer du andre løsninger?" på telefon: os mod én ad gangen
   Emil, 3.10.2026: bud 1 fra artefaktet "Sammenligning: knapper". Fanerne sættes ind af
   scripts/sammenligning-telefon.js, og nyt-site/sammenligning-telefon.js skifter kolonne.
   Reglerne ligger oven på sammenligning.css og sammenligning-papir.css.

   Under 860 px var tabellen bredere end skærmen og skulle rulles til siden. Nu viser
   den to kolonner: vores og den, man har valgt. Man vælger med fire faner med streg
   under, samme greb som dagene i ugeplanen (håndskrift, orange streg under den valgte).
   Over 860 px er der ingen faner, og tabellen står med alle fem kolonner som før.
   ========================================================================== */

.smlf { display: none; }

@media (max-width: 860px) {
  .smlf { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-xs); margin-bottom: var(--space-m); }
  .smlf__fane { appearance: none; margin: 0; padding: 0 0 var(--space-xs); border: 0; border-bottom: 2px solid var(--line-strong); border-radius: 0; background: none; text-align: left; cursor: pointer;
    font: 700 var(--text-2xl)/1 'Caveat', 'Segoe Print', 'Comic Sans MS', cursive; color: var(--text-muted); }
  .smlf__fane[aria-pressed="true"] { color: var(--text); border-bottom-color: var(--accent); }
  .smlf__fane:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

  /* Tabellen fylder skærmens bredde: teksten, vores kolonne og den valgte. */
  .sml .sml__scroll { overflow-x: visible; padding-bottom: 0; }
  .sml .sml__table { min-width: 0; --col: clamp(4.75rem, 3rem + 9vw, 6.5rem); grid-template-columns: minmax(0, 1fr) repeat(2, var(--col)); }
  .sml .sml__row > :nth-child(n+3) { display: none; }
  .sml[data-vis="3"] .sml__row > :nth-child(3),
  .sml[data-vis="4"] .sml__row > :nth-child(4),
  .sml[data-vis="5"] .sml__row > :nth-child(5),
  .sml[data-vis="6"] .sml__row > :nth-child(6) { display: grid; grid-column: 3; }
  /* Teksten til venstre må gerne bryde; prisen i den valgte kolonne skal kunne være der. */
  .sml .sml__row--price > * { white-space: normal; text-align: center; }
}