/*
 * SOLDIAGRAM — siden «Soldiagram», blokka ta:soldiagram (KUNDEEID, Tangvall Arena,
 * Inge 12.10; designet 10.10: Main.dc.html + Mobil.dc.html).
 *
 * Egen statisk fil, IKKE i prosjekt.css: prosjekt.css inlines i hver side
 * (inlineCss), mens dette arket bare trengs der blokka står. TaSoldiagram henter
 * det med React 19s <link rel="stylesheet" precedence> — hoistet til <head> og
 * render-blokkerende, så ingen FOUC. Rekkefølgen mot det inlinede prosjekt.css er
 * ikke garantert: regler som konkurrerer med globale regler (overskrifter,
 * .ta-knapp) har derfor HØYERE spesifisitet, ikke bare senere plass.
 *
 * Tokens fra prosjekt.css (.bv-site) og plattformen (tokens.css). Inline-stil i
 * JSX er KUN posisjon/andel: --x/--y (prikkene), --zb/--zl/--zt (mobilutsnittet), --p
 * (merker) og --andel (fyllet i glidebryterne). Prefiks `.ta-sol__`
 * (boenhetssidens solboks er `.ta-solboks`, i prosjekt.css).
 */
.bv-site .ta-sol {
  --ta-sol-sol: var(--ta-terracotta);
  --ta-sol-delvis: var(--ta-sand);
  /* Prikken i skygge: dempet ink som står mot både lyse og mørke partier i bildet. */
  --ta-sol-skygge: #5b5657;
  --ta-sol-skygge-stripe: rgba(35, 31, 32, 0.1);
  /* Bare i illustrasjonen: glassrekkverket og leiligheten (mørkere sand). */
  --ta-sol-glassblaa: #80b2d9;
  --ta-sol-leilighet: #d9c5b6;
  --ta-sol-dempet: rgba(35, 31, 32, 0.75);
  --ta-sol-tommel: 16px;
  /* Største radius på prikkenes treffflate (36 px flate; mobil 28). */
  --ta-sol-treff: 18px;
  padding: 56px 0 88px;
  color: var(--ta-ink);
  /* Blokka er et rutenettelement i .bv-blocks: uten dette tvinger tabellens minstebredde
     (960 px, i egen rulleboks) hele siden bredere enn skjermen på 901–1000 px (Inge 13.10). */
  min-inline-size: 0;
}

/* ---- Felles oppskrifter ---------------------------------------------------- */
/* Mørkt glass over bildet (fanene, dato, nord, meldinger). */
.ta-sol__bygg,
.ta-sol__sider,
.ta-sol__dato,
.ta-sol__nord,
.ta-sol__melding {
  border-radius: var(--radius-pill);
  background: var(--bv-scrim-bg);
  -webkit-backdrop-filter: var(--bv-scrim-blur);
  backdrop-filter: var(--bv-scrim-blur);
}
/* Pilleknappene (faner, segmenter, skjul/vis). */
.bv-site .ta-sol__fane,
.bv-site .ta-sol__segment button,
.bv-site .ta-sol__vispins {
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ta-ink);
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background 150ms ease,
    color 150ms ease;
}
/* Etiketter, merker og metatekst i full ink, som benevnelsene ellers på nettsiden
   (Inge 13.10: ingen store bokstaver, ingen dempede etiketter). Bare løpende brødtekst
   (ingresser, notater) er dempet (--ta-sol-dempet), som «Godt å vite» og salgspunktene. */
.ta-sol__range-merker,
.ta-sol__range-ender,
.ta-sol__stripe-tider,
.ta-sol__tabellhode {
  color: var(--ta-ink);
  font-variant-numeric: tabular-nums;
}
/* Fokus: sidens terrakotta-ring på alle kontroller. */
.ta-sol :is(button, select, input):focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* ---- Tittel, ingress og sol-pillene ------------------------------------ */
.ta-sol__topp {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  padding-block-end: 32px;
}
.ta-sol__intro {
  max-inline-size: 760px;
}
.bv-site .ta-sol__tittel {
  margin: 0;
  font-size: var(--text-h2);
  line-height: 1.02;
  color: var(--ta-ink);
}
.bv-site .ta-sol__ingress {
  margin: 18px 0 0;
  font-size: var(--text-lead);
  line-height: var(--leading-body);
  color: var(--ta-ink);
}
/* Like høy tom til dataene er her (ingen falske klokkeslett i serverens HTML). */
.ta-sol__soldata {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  min-block-size: 41px;
}
.ta-sol__pille {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  background: var(--ta-blush);
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.ta-sol__ikon {
  flex: none;
  inline-size: 18px;
  block-size: 18px;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ta-sol__ikon--opp {
  stroke: var(--ta-terracotta-dark);
}
.ta-sol__ikon--ned {
  stroke: var(--ta-bygg-g);
}
/* Mens dataene lastes: kontrollene står med full høyde, men usynlige. */
.ta-sol[data-laster] .ta-sol__kontroller > * {
  visibility: hidden;
}
.bv-site .ta-sol__ikke-klar {
  margin: 0;
  padding: 40px 28px;
  border-radius: 24px;
  background: var(--ta-blush);
  font-size: 17px;
  text-align: center;
  color: var(--ta-sol-dempet);
}

/* ---- Bildeviseren -------------------------------------------------------- */
.ta-sol__visning {
  position: relative;
  scroll-margin-top: calc(var(--ta-header-h, 84px) + 12px);
}
.ta-sol__stage {
  position: relative;
  /* Container: prikkenes treffflate regnes i cqw (andel av rammebredden). */
  container-type: inline-size;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--ta-ink);
}
.ta-sol__bilde {
  position: absolute;
  inset: 0;
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
/* Bygg og meldinger øverst til venstre i bildet (ingen balkong ligger der); siden
   (perspektivet) står midt i bildet på samme linje fra 1100 px (Inge 13.10) — smalere
   enn det ville den kollidert med byggvelgeren, så der ligger den under. Mobil legger
   fanene i flyt (display: contents). Laget dekker bildets topp, så det slipper pekeren
   gjennom til prikkene og tar den bare på knappene. */
.ta-sol__faner {
  position: absolute;
  z-index: 3;
  inset-block-start: 20px;
  inset-inline: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  pointer-events: none;
}
.ta-sol__faner > * {
  pointer-events: auto;
}
@media (min-width: 1100px) {
  .ta-sol__faner > .ta-sol__sider {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 50%;
    transform: translateX(-50%);
  }
}
.ta-sol__bygg,
.ta-sol__sider {
  display: flex;
  gap: 4px;
  padding: 5px;
}
.ta-sol__bygg:empty,
.ta-sol__sider:empty,
.ta-sol__meldinger:empty {
  display: none;
}
.bv-site .ta-sol__fane {
  padding: 9px 20px;
  color: var(--ta-white);
  font-size: 14px;
}
.bv-site .ta-sol__sider .ta-sol__fane {
  /* Samme høyde som byggvelgeren — de står på samme linje på desktop. */
  padding: 9px 16px;
  font-size: 14px;
}
.bv-site .ta-sol__fane:not([aria-pressed="true"]):hover {
  background: rgba(255, 255, 255, 0.16);
}
.bv-site .ta-sol__fane[aria-pressed="true"] {
  background: var(--ta-white);
  color: var(--ta-ink);
}
/* Den glidende pillen (Inge 13.10): én hvit pille under knappene som «kjører» til
   valget. useGlider måler den aktive knappen (--glid-x/y/w/h) og setter
   data-glid="klar"; før det (SSR/uten JS) er den aktive knappen hvit som vanlig. */
.ta-sol__bygg,
.ta-sol__sider {
  position: relative;
}
.ta-sol__glider {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: var(--glid-w, 0px);
  block-size: var(--glid-h, 0px);
  border-radius: var(--radius-pill);
  background: var(--ta-white);
  transform: translate(var(--glid-x, 0px), var(--glid-y, 0px));
  opacity: 0;
  pointer-events: none;
}
[data-glid="klar"] > .ta-sol__glider {
  opacity: 1;
  transition:
    transform 380ms cubic-bezier(0.32, 0.72, 0, 1),
    inline-size 380ms cubic-bezier(0.32, 0.72, 0, 1);
}
[data-glid] > .ta-sol__fane {
  position: relative;
  z-index: 1;
}
.bv-site .ta-sol [data-glid="klar"] > .ta-sol__fane[aria-pressed="true"] {
  background: transparent;
}
@media (prefers-reduced-motion: reduce) {
  [data-glid="klar"] > .ta-sol__glider {
    transition: none;
  }
}
.ta-sol__meldinger {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.ta-sol__melding {
  padding: 9px 16px;
  color: var(--ta-white);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}
/* Dato og nordpil oppe til høyre. */
.ta-sol__hjorne {
  position: absolute;
  z-index: 3;
  inset-block-start: 20px;
  inset-inline-end: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.ta-sol__dato {
  padding: 12px 18px;
  color: var(--ta-white);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
}
.ta-sol__nord {
  display: grid;
  place-items: center;
  inline-size: 46px;
  block-size: 46px;
}
.ta-sol__nord svg {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}
.ta-sol__nord text {
  fill: var(--ta-white);
  font-family: inherit;
  font-size: 7px;
  font-weight: 700;
}
.ta-sol__nord polygon {
  fill: var(--ta-white);
}

/* Balkongprikkene: sol / delvis / skygge for klokkeslettet i bildet. */
.ta-sol__pins {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.bv-site .ta-sol__pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  inline-size: 16px;
  block-size: 16px;
  padding: 0;
  border: 2px solid var(--ta-white);
  border-radius: var(--radius-pill);
  background: var(--ta-sol-skygge);
  transform: translate(-50%, -50%);
  cursor: pointer;
  pointer-events: auto;
  transition:
    background 200ms ease,
    inline-size 150ms ease,
    block-size 150ms ease;
}
/* Treffflaten: inntil 36 px (mobil 28), men radiusen er aldri mer enn halve avstanden
   til nærmeste nabo (--d, andel av rammebredden) — to prikker deler aldri flate.
   ::before sitter i padding-boksen: 16 px − 2 × 2 px ramme = 12 px, halvparten 6. */
.ta-sol__pin::before {
  --r: clamp(8px, var(--d, 1) * 50cqw, var(--ta-sol-treff));
  content: "";
  position: absolute;
  inset: calc(6px - var(--r));
  border-radius: inherit;
}
/* Den valgte (26 px, padding-boks 22): minst egen størrelse. */
.ta-sol__pin[aria-pressed="true"]::before {
  inset: calc(11px - max(13px, var(--r)));
}
.bv-site .ta-sol__pin[data-t="sol"] {
  background: var(--ta-sol-sol);
}
.bv-site .ta-sol__pin[data-t="delvis"] {
  background: var(--ta-sol-delvis);
}
.bv-site .ta-sol__pin[aria-pressed="true"] {
  z-index: 1;
  inline-size: 26px;
  block-size: 26px;
}
/* Over bildet: hvit ring. (0,4,0) slår den generelle fokusregelen (0,2,1). */
.bv-site .ta-sol__pins .ta-sol__pin:focus-visible,
.bv-site .ta-sol__faner .ta-sol__fane:focus-visible {
  outline: 2px solid var(--ta-white);
  outline-offset: 3px;
}
/* Etiketten over den valgte prikken (dekorativ — prikken har egen aria-label). */
/* Etiketten tones ut mens kjøperen drar i tidsslideren (Inge 13.10). */
.ta-sol__etikett[data-skjult] {
  opacity: 0;
}
.ta-sol__tidsvert {
  display: contents;
}
.ta-sol__etikett {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  background: var(--ta-white);
  color: var(--ta-ink);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 18px));
  transition: opacity 150ms ease;
}
/* Prikken helt øverst i rammen: etiketten under den, så den ikke kuttes av kanten. */
.ta-sol__etikett[data-under] {
  transform: translate(-50%, 18px);
}
.ta-sol__etikett span {
  font-weight: 600;
  color: var(--ta-ink);
}

/* Kontrollene: blush-flate rett UNDER bildet, full bredde — de dekker aldri en balkong. */
.ta-sol__kontroller {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  margin-block-start: 8px;
  padding: 16px 24px;
  border-radius: 24px;
  background: var(--ta-blush);
}
.ta-sol__avspilling {
  flex: none;
  display: flex;
  align-items: center;
  gap: 24px;
}
.bv-site .ta-sol__spill {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 48px;
  block-size: 48px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--ta-green);
  cursor: pointer;
  transition: background 150ms ease;
}
.bv-site .ta-sol__spill:hover:not(:disabled) {
  background: var(--ta-terracotta-dark);
}
.bv-site .ta-sol__spill:disabled {
  cursor: default;
}
.ta-sol__spill svg {
  inline-size: 18px;
  block-size: 18px;
  fill: var(--ta-white);
}
.ta-sol__klokkeblokk {
  min-inline-size: 150px;
}
/* Fast bredde på desktop (Inge 14.10): «3 av 15» og «18 av 21» er ulikt brede, og
   slideren til høyre hoppet sideveis når tallene endret seg. 236 px rommer den lengste
   teksten («88 av 88 balkonger i bildet har sol nå», målt 228 px med like brede sifre). */
@media (min-width: 901px) {
  .ta-sol__klokkeblokk {
    inline-size: 236px;
  }
  .ta-sol__na {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
}
.ta-sol__klokke {
  font-size: 38px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.ta-sol__na {
  margin-block-start: 6px;
  font-size: 14px;
  color: var(--ta-ink);
}
.ta-sol__range--tid {
  flex: 1 1 380px;
  min-inline-size: 0;
}
.ta-sol__kontrollside {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}
.bv-site .ta-sol__vispins {
  padding: 9px 16px;
  border: 1.5px solid var(--ta-ink);
  background: var(--ta-white);
  font-size: 14px;
}
.bv-site .ta-sol__vispins:hover {
  background: var(--ta-white);
  border-color: var(--ta-ink);
}

/* ---- Glidebryterne (designets .ta-range) ------------------------------- */
.ta-sol__range {
  display: grid;
  gap: 5px;
}
.ta-sol__range-spor {
  position: relative;
  block-size: 24px;
}
.ta-sol__range-spor::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: 50%;
  block-size: 4px;
  border-radius: var(--radius-pill);
  background: var(--ta-line);
  translate: 0 -50%;
}
/* Fyllet ender midt i tommelen (tommelen står `--ta-sol-tommel / 2` inn fra kantene). */
.ta-sol__range-fyll {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 50%;
  inline-size: calc(var(--ta-sol-tommel) / 2 + (100% - var(--ta-sol-tommel)) * var(--andel));
  block-size: 4px;
  border-radius: var(--radius-pill);
  background: var(--ta-green);
  translate: 0 -50%;
}
.ta-sol__range-input {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  margin: 0;
  border-radius: var(--radius-pill);
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
}
.ta-sol__range-input:disabled {
  cursor: default;
}
.ta-sol__range-input::-webkit-slider-runnable-track {
  background: transparent;
}
.ta-sol__range-input::-moz-range-track {
  background: transparent;
}
.ta-sol__range-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  inline-size: var(--ta-sol-tommel);
  block-size: var(--ta-sol-tommel);
  border: 2px solid var(--ta-green);
  border-radius: var(--radius-pill);
  background: var(--ta-white);
  cursor: grab;
}
.ta-sol__range-input::-moz-range-thumb {
  box-sizing: border-box;
  inline-size: var(--ta-sol-tommel);
  block-size: var(--ta-sol-tommel);
  border: 2px solid var(--ta-green);
  border-radius: var(--radius-pill);
  background: var(--ta-white);
  cursor: grab;
}
.ta-sol__range-merker {
  position: relative;
  display: block;
  block-size: 16px;
  font-size: 13px;
  font-weight: 500;
  line-height: 16px;
}
.ta-sol__range-merker > span {
  position: absolute;
  left: calc(var(--ta-sol-tommel) / 2 + (100% - var(--ta-sol-tommel)) * var(--p));
  translate: -50% 0;
}
.ta-sol__range-ender {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
}

/* ---- Forklaringene (prikk og stripe) ------------------------------------ */
.ta-sol__forklaring {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 14px;
  font-weight: 600;
}
.ta-sol__forklaring > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ta-sol__forklaring > span::before {
  content: "";
  flex: none;
  background: var(--ta-sol-skygge-stripe);
}
.ta-sol__forklaring--prikk > span::before {
  inline-size: 16px;
  block-size: 16px;
  border: 2px solid var(--ta-white);
  border-radius: var(--radius-pill);
  outline: 1px solid rgba(35, 31, 32, 0.2);
  background: var(--ta-sol-skygge);
}
.ta-sol__forklaring > [data-t="sol"]::before {
  background: var(--ta-sol-sol);
}
.ta-sol__forklaring > [data-t="delvis"]::before {
  background: var(--ta-sol-delvis);
}
.ta-sol__forklaring--stripe {
  gap: 18px;
  margin: 20px 4px 0;
  color: var(--ta-ink);
}
.ta-sol__forklaring--stripe > span {
  gap: 8px;
}
.ta-sol__forklaring--stripe > span::before {
  inline-size: 18px;
  block-size: 10px;
  border-radius: 3px;
}

/* ---- Stripa: sol per halvtime 06–23 -------------------------------------- */
.ta-sol__stripe {
  display: flex;
  gap: 2px;
  block-size: 16px;
}
.ta-sol__stripe > span {
  flex: 1 1 0;
  min-inline-size: 0;
  border-radius: 3px;
  background: var(--ta-sol-skygge-stripe);
}
.ta-sol__stripe > [data-t="sol"] {
  background: var(--ta-sol-sol);
}
.ta-sol__stripe > [data-t="delvis"] {
  background: var(--ta-sol-delvis);
}
/* Timen i bildet: ramme i ink (outline, ingen skygge). */
.ta-sol__stripe > [data-na] {
  outline: 2px solid var(--ta-ink);
  outline-offset: -2px;
}
.ta-sol__stripe--stor {
  block-size: 22px;
}
.ta-sol__stripe--stor > span {
  border-radius: 4px;
}
.ta-sol__stripe-tider {
  position: relative;
  display: block;
  block-size: 16px;
  margin-block-start: 6px;
  font-size: 13px;
  font-weight: 600;
  line-height: 16px;
}
.ta-sol__stripe-tider > span {
  position: absolute;
  left: calc(var(--p) * 100%);
  translate: -50% 0;
}
.ta-sol__stripe-tider > [data-kant="start"] {
  translate: 0 0;
}
.ta-sol__stripe-tider > [data-kant="slutt"] {
  translate: -100% 0;
}

/* ---- Valgt bolig ----------------------------------------------------------- */
.ta-sol__valgt {
  margin-block-start: 16px;
  padding: 24px 28px;
  border-radius: 24px;
  background: var(--ta-blush);
}
.ta-sol__valgt-innhold {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px;
}
.ta-sol__valgt-info {
  flex: 0 1 300px;
  min-inline-size: 220px;
}
.ta-sol__valgt-topp {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.ta-sol__valgt-kode {
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.01em;
}
.bv-site .ta-sol__valgt-meta {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ta-ink);
}
.ta-sol__valgt-meta > span {
  display: block;
}
.ta-sol__valgt-ute {
  margin-block-start: 2px;
}
.ta-sol__valgt-sol {
  flex: 1 1 420px;
  min-inline-size: 0;
}
.ta-sol__valgt-solhode {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-block-end: 10px;
  font-size: 14px;
  font-weight: 700;
}
.ta-sol__timer {
  font-weight: 800;
  color: var(--ta-ink); /* sort som på boenhetssiden (Inge 13.10) */
  font-variant-numeric: tabular-nums;
}
.ta-sol__valgt-solhode .ta-sol__timer {
  font-size: 26px;
  line-height: 1;
}
.bv-site .ta-sol__annen {
  margin: 10px 0 0;
  font-size: 14px;
}
.bv-site .ta-sol__annen button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ta-green);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}
.bv-site .ta-sol__annen button:hover {
  color: var(--ta-terracotta-dark);
}
.ta-sol__valgt-knapper {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* (0,4,0): slår både .ta-knapp (0,2,0) og mobilens .bv-blocks .ta-knapp (0,3,0) uansett rekkefølge. */
.bv-site .ta-sol .ta-sol__valgt-knapper .ta-knapp {
  padding: 14px 26px;
  font-size: 15px;
}
/* Henvisninger (Inge 13.10): tekstlenke med sidens pil, som «Praktisk informasjon →»
   i «Godt å vite» — ikke en knapp. */
.bv-site .ta-sol__henvisning {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding-block: 6px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ta-ink);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.bv-site .ta-sol__henvisning:hover {
  color: var(--ta-terracotta-dark);
}
.bv-site .ta-sol__henvisning:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}
.bv-site .ta-sol__valgt-tom {
  margin: 0;
  font-size: 16px;
  color: var(--ta-sol-dempet);
}

/* ---- Rangeringen ----------------------------------------------------------- */
.ta-sol__rangering {
  padding-block-start: 88px;
}
.ta-sol__rang-topp {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-block-end: 28px;
}
.ta-sol__rang-tekst {
  max-inline-size: 760px;
}
.bv-site .ta-sol .ta-sol__rang-tekst h2 {
  margin: 0;
  font-size: var(--text-h2);
  line-height: 1.05;
  color: var(--ta-ink);
}
.bv-site .ta-sol__rang-tekst p {
  margin: 14px 0 0;
  font-size: var(--text-lead);
  line-height: var(--leading-body);
  color: var(--ta-ink);
}
.bv-site .ta-sol__forelopig {
  max-inline-size: 360px;
  margin: 0;
  padding: 11px 16px;
  border-radius: 14px;
  background: rgba(197, 132, 90, 0.14);
  font-size: 14px;
  line-height: 1.5;
}
.ta-sol__filter {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 22px 32px;
  padding: 24px 28px;
  border-radius: 24px;
  background: var(--ta-blush);
}
.ta-sol__felt {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ta-sol__felt--min {
  flex: 1 1 240px;
  min-inline-size: 240px;
}
.ta-sol__feltnavn {
  font-size: 14px;
  font-weight: 700;
}
.ta-sol__segment {
  display: flex;
  gap: 4px;
  padding: 4px;
  border: 1.5px solid var(--ta-ink);
  border-radius: var(--radius-pill);
  background: var(--ta-white);
}
.bv-site .ta-sol__segment button {
  padding: 8px 16px;
  font-size: 14px;
}
.bv-site .ta-sol__segment button:not([aria-pressed="true"]):hover {
  background: var(--ta-blush);
}
.bv-site .ta-sol__segment button[aria-pressed="true"] {
  background: var(--ta-green);
  color: var(--ta-white);
}
/* Glidende pille også i rangeringens valg (Inge 13.10) — KUN desktop: grønn, under
   knappene. På mobil er valgene løse piller som brekker, og pillen er skjult. */
.ta-sol__segment {
  position: relative;
}
.ta-sol__segment > .ta-sol__glider {
  background: var(--ta-green);
}
.ta-sol__segment[data-glid] > button {
  position: relative;
  z-index: 1;
}
@media (min-width: 901px) {
  .bv-site .ta-sol .ta-sol__segment[data-glid="klar"] > button[aria-pressed="true"] {
    background: transparent;
  }
}
@media (max-width: 900px) {
  .ta-sol__segment > .ta-sol__glider {
    display: none;
  }
}
/* Bryter for balkongprikkene — bare mobil (vises i mobilblokka). Av: hvit med sort
   strek og sort knott; på: grønt spor med hvit knott som glir (Inge 13.10). */
.ta-sol__bryterrad {
  display: none;
}
.bv-site .ta-sol__bryter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  inline-size: 100%;
  min-block-size: 44px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: var(--ta-ink);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.ta-sol__bryter-spor {
  position: relative;
  flex: none;
  inline-size: 46px;
  block-size: 28px;
  border: 1.5px solid var(--ta-ink);
  border-radius: var(--radius-pill);
  background: var(--ta-white);
  transition: background 200ms ease, border-color 200ms ease;
}
.ta-sol__bryter-knott {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 3px;
  inline-size: 19px;
  block-size: 19px;
  border-radius: var(--radius-pill);
  background: var(--ta-ink);
  transform: translateY(-50%);
  transition: transform 220ms cubic-bezier(0.32, 0.72, 0, 1), background 200ms ease;
}
.ta-sol__bryter[aria-checked="true"] .ta-sol__bryter-spor {
  border-color: var(--ta-green);
  background: var(--ta-green);
}
.ta-sol__bryter[aria-checked="true"] .ta-sol__bryter-knott {
  background: var(--ta-white);
  transform: translate(18px, -50%);
}
.bv-site .ta-sol__bryter:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
@media (prefers-reduced-motion: reduce) {
  .ta-sol__bryter-spor,
  .ta-sol__bryter-knott {
    transition: none;
  }
}
.ta-sol__avkryss {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-block-end: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.ta-sol__avkryss input {
  inline-size: 20px;
  block-size: 20px;
  margin: 0;
  accent-color: var(--ta-green);
}
/* Sorteringen: pille som segmentene ved siden av, med egen chevron (samme strek som
   plattformens ChevronIcon, m4 6 4 4 4-4) i stedet for nettleserens, som satt klemt
   inntil kanten (Inge 13.10). */
.bv-site .ta-sol__velg {
  -webkit-appearance: none;
  appearance: none;
  min-height: 44px;
  padding: 10px 44px 10px 18px;
  border: 1.5px solid var(--ta-ink);
  border-radius: var(--radius-pill);
  background: var(--ta-white)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23231F20' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E")
    no-repeat right 16px center / 16px 16px;
  color: var(--ta-ink);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.bv-site .ta-sol__velg:hover {
  border-color: var(--ta-ink);
}
.bv-site .ta-sol__antall {
  margin: 24px 4px 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ta-ink);
}

/* Tabellen (desktop): seks kolonner, rull sideveis under 980 px. */
.ta-sol__tabellrull {
  overflow-x: auto;
}
.ta-sol__tabell {
  /* Ingen nummerkolonne (Inge 13.10). */
  --ta-sol-kolonner: 250px 170px minmax(0, 1fr) 96px 100px;
  min-inline-size: 960px;
}
.ta-sol__tabell[data-uten-status] {
  --ta-sol-kolonner: 250px 170px minmax(0, 1fr) 96px;
  min-inline-size: 840px;
}
.ta-sol__tabellhode {
  display: grid;
  grid-template-columns: var(--ta-sol-kolonner);
  align-items: end;
  gap: 20px;
  padding: 0 20px 10px;
  font-size: 14px;
  font-weight: 700;
}
.ta-sol__tabellhode .ta-sol__stripe-tider {
  margin: 0;
  letter-spacing: 0;
  text-transform: none;
}
.ta-sol__liste {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ta-sol__rad {
  display: grid;
  grid-template-columns: var(--ta-sol-kolonner);
  align-items: center;
  gap: 20px;
  padding: 14px 20px;
  border: 1px solid var(--ta-line);
  border-radius: 18px;
  background: var(--ta-white);
}
.ta-sol__rad[data-valgt] {
  border-color: var(--ta-green);
  background: var(--ta-blush);
}
.ta-sol__rad--tom {
  min-block-size: 78px;
  border-color: transparent;
  background: var(--ta-blush);
}
.bv-site .ta-sol__rad-kode {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ta-ink);
  font: inherit;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
  text-align: start;
  cursor: pointer;
}
.bv-site .ta-sol__rad-kode:hover {
  color: var(--ta-terracotta-dark);
}
.ta-sol__rad-meta {
  display: block;
  margin-block-start: 2px;
  font-size: 14px;
  color: var(--ta-ink);
}
.ta-sol__rad-ute {
  font-size: 14px;
  line-height: 1.4;
}
.ta-sol__rad-timer {
  font-size: 22px;
}
.ta-sol__rad-status {
  justify-self: start;
}
.bv-site .ta-sol__ingen {
  margin: 8px 4px 0;
  font-size: 15px;
  color: var(--ta-sol-dempet);
}
/* (0,3,0): .ta-knapp er inline-flex (0,2,0) — her en sentrert blokk. */
.bv-site .ta-sol .ta-sol__alle {
  display: flex;
  inline-size: fit-content;
  margin: 24px auto 0;
}

/* ---- Metoden: sand-flate med illustrasjonen ------------------------------- */
.ta-sol__metode {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 48px;
  margin-block-start: 88px;
  padding: 56px;
  border-radius: var(--radius-lg);
  background: var(--ta-sand);
}
.ta-sol__metode-tekst {
  flex: 1 1 420px;
  min-inline-size: 0;
}
.bv-site .ta-sol .ta-sol__metode h2 {
  margin: 0;
  font-size: 38px;
  line-height: 1.1;
  color: var(--ta-ink);
}
.ta-sol__punkter {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
.ta-sol__punkter li {
  display: flex;
  gap: 16px;
}
.ta-sol__punktnr {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 36px;
  block-size: 36px;
  border-radius: var(--radius-pill);
  background: var(--ta-green);
  color: var(--ta-white);
  font-weight: 800;
}
.bv-site .ta-sol__punkter p {
  margin: 6px 0 0;
  font-size: 16px;
  line-height: 1.55;
}
.bv-site .ta-sol__note {
  margin: 24px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ta-sol-dempet);
}
.ta-sol__figur {
  flex: 1 1 460px;
  min-inline-size: 0;
  margin: 0;
  padding: 28px;
  border-radius: 22px;
  background: var(--ta-blush);
}
.ta-sol__figur svg {
  display: block;
  inline-size: 100%;
  block-size: auto;
  font-family: inherit;
}
.ta-sol__figur-leilighet {
  fill: var(--ta-sol-leilighet);
}
.ta-sol__figur-gulv {
  fill: var(--ta-white);
  stroke: var(--ta-outline);
}
.ta-sol__figur-vegg {
  fill: var(--ta-ink);
}
.ta-sol__figur-glass {
  fill: var(--ta-sol-glassblaa);
}
.ta-sol__figur-kile {
  fill: var(--ta-line);
}
.ta-sol__figur circle[data-t="sol"],
.ta-sol__figur-sola {
  fill: var(--ta-sol-sol);
}
.ta-sol__figur-krans {
  fill: none;
  stroke: var(--ta-sol-sol);
  stroke-width: 3;
  stroke-linecap: round;
}
.ta-sol__figur circle[data-t="skygge"] {
  fill: var(--ta-sol-skygge);
}
.ta-sol__figur-straler {
  fill: none;
  stroke: var(--ta-sol-sol);
  stroke-width: 2;
  stroke-dasharray: 5 6;
}
.ta-sol__figur-tekst {
  fill: var(--ta-ink);
  font-size: 13px;
  font-weight: 700;
}
.ta-sol__figur-tekst--stor {
  font-size: 15px;
}
.ta-sol__figur-tekst--dempet {
  fill: var(--ta-sol-dempet);
  font-weight: 400;
}

/* ---- Mobil (≤ 900 px, Mobil.dc.html) ------------------------------------ */
@media (max-width: 900px) {
  .bv-site .ta-sol {
    --ta-sol-tommel: 18px;
    padding: 32px 0 48px;
  }
  /* Løse tekster 20 px inn (12 + 8), flatene 12 px — sidens mobilregel. */
  .ta-sol__topp {
    display: block;
    padding: 0 8px 20px;
  }
  .bv-site .ta-sol__tittel {
    font-size: 34px;
  }
  .bv-site .ta-sol__ingress {
    margin-block-start: 14px;
    font-size: 16px;
    line-height: 1.55;
  }
  .ta-sol__soldata {
    display: none;
  }

  /* Bygg og side OVER bildet (i bildet ville sidefanene dekket de øverste
     balkongene i f1), meldingene øverst til venstre i bildet, kontrollene under. */
  .ta-sol__visning {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
  .ta-sol__faner {
    display: contents;
  }
  .ta-sol__bygg,
  .ta-sol__bygg:empty {
    grid-row: 1;
    grid-column: 1;
    display: flex;
    min-block-size: 52px;
    margin-block-end: 8px;
    padding: 4px;
    /* Mørk skinne med hvit (glidende) pille i begge radene (Inge 13.10, forslag 3). */
    background: var(--ta-ink);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .bv-site .ta-sol__bygg .ta-sol__fane {
    flex: 1 1 0;
    min-block-size: 44px;
    padding: 0 12px;
    color: var(--ta-white);
    font-size: 15px;
  }
  .bv-site .ta-sol__bygg .ta-sol__fane:not([aria-pressed="true"]):hover,
  .bv-site .ta-sol__sider .ta-sol__fane:not([aria-pressed="true"]):hover {
    background: rgba(255, 255, 255, 0.16);
  }
  .bv-site .ta-sol__bygg .ta-sol__fane[aria-pressed="true"],
  .bv-site .ta-sol__sider .ta-sol__fane[aria-pressed="true"] {
    background: var(--ta-white);
    color: var(--ta-ink);
  }
  /* Sideraden: samme skinne, et hakk lavere (hierarki), kort navn. */
  .ta-sol__sider,
  .ta-sol__sider:empty {
    grid-row: 2;
    grid-column: 1;
    display: flex;
    gap: 4px;
    min-block-size: 46px;
    margin-block-end: 8px;
    padding: 3px;
    border-radius: var(--radius-pill);
    background: var(--ta-ink);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .bv-site .ta-sol__sider .ta-sol__fane {
    flex: 1 1 0;
    min-inline-size: 0;
    min-block-size: 40px;
    padding: 0 12px;
    border: 0;
    background: transparent;
    color: var(--ta-white);
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .ta-sol__meldinger {
    z-index: 3;
    grid-row: 3;
    grid-column: 1;
    align-self: start;
    margin: 10px 60px 0 10px;
  }
  /* Én linje på mobil: på 360 px brakk «Balkongen til F-H0508 synes ikke i bildene» til to
     linjer og dekket tre prikker i f1 (kontrolltesten). Ellipse bare som sikkerhetsnett. */
  .ta-sol__melding {
    max-width: 100%;
    padding: 8px 12px;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .ta-sol__stage {
    grid-row: 3;
    grid-column: 1;
    aspect-ratio: 4 / 3;
    border-radius: 22px;
  }
  .ta-sol__hjorne {
    inset-block-start: 10px;
    inset-inline-end: 10px;
  }
  .ta-sol__dato {
    display: none;
  }
  .ta-sol__nord {
    inline-size: 40px;
    block-size: 40px;
  }
  .bv-site .ta-sol {
    --ta-sol-treff: 14px;
  }
  /* Mindre prikker på mobil (Inge 14.10): 12 px, den valgte 20. Treffflaten er den
     samme (::before) — 12 − 2 × 2 px ramme = 8 px padding-boks, halvparten 4. */
  .bv-site .ta-sol__pin {
    inline-size: 12px;
    block-size: 12px;
  }
  .ta-sol__pin::before {
    inset: calc(4px - var(--r));
  }
  .ta-sol__pin[aria-pressed="true"]::before {
    inset: calc(8px - max(10px, var(--r)));
  }
  .bv-site .ta-sol__pin[aria-pressed="true"] {
    inline-size: 20px;
    block-size: 20px;
  }
  /* Etiketten vises også på mobil når en balkong er trykket (Inge 14.10), litt mindre. */
  .ta-sol__etikett {
    gap: 6px;
    padding: 5px 10px;
    font-size: 12px;
    transform: translate(-50%, calc(-100% - 14px));
  }
  .ta-sol__etikett[data-under] {
    transform: translate(-50%, 14px);
  }
  /* Utsnittet: bygget i midten, litt zoomet (--zb bredde, --zl/--zt forskyvning — settes
     av komponenten fra balkongpunktene). */
  .ta-sol__bilde {
    inset: auto;
    left: var(--zl, 0%);
    top: var(--zt, 0%);
    inline-size: var(--zb, 100%);
    max-inline-size: none; /* nettstedets img { max-width: 100% } ville stoppet zoomen */
    block-size: auto;
    aspect-ratio: 16 / 9;
    object-fit: fill;
  }
  .ta-sol__kontroller {
    grid-row: 4;
    grid-column: 1;
    display: block;
    padding: 16px;
    border-radius: 22px;
  }
  .ta-sol__avspilling {
    gap: 14px;
  }
  .ta-sol__klokkeblokk {
    min-inline-size: 0;
  }
  .ta-sol__klokke {
    font-size: 32px;
  }
  .ta-sol__na {
    margin-block-start: 5px;
  }
  .ta-sol__range--tid {
    margin-block-start: 14px;
  }
  /* 44 px berøringsflate, men sporet ser ut som designets 28 px. */
  .ta-sol__range-spor {
    block-size: 44px;
    margin-block: -8px;
  }
  .ta-sol__kontrollside {
    margin-block-start: 14px;
  }
  .ta-sol__vispins {
    display: none;
  }
  .ta-sol__bryterrad {
    display: block;
    margin-block-start: 8px;
  }

  .ta-sol__valgt {
    margin-block-start: 8px;
    padding: 18px;
    border-radius: 22px;
  }
  .ta-sol__valgt-innhold {
    display: block;
  }
  .ta-sol__valgt-topp {
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 10px;
  }
  .ta-sol__valgt-kode {
    font-size: 26px;
  }
  .bv-site .ta-sol__valgt-meta {
    margin-block-start: 6px;
    font-size: 14px;
  }
  .ta-sol__valgt-meta > span {
    display: inline;
  }
  .ta-sol__valgt-ute::before {
    content: " · ";
  }
  .ta-sol__valgt-solhode {
    margin: 14px 0 8px;
    font-size: 14px;
  }
  .ta-sol__valgt-solhode .ta-sol__timer {
    font-size: 22px;
  }
  .ta-sol__stripe--stor {
    block-size: 18px;
  }
  .ta-sol__stripe--stor > span {
    border-radius: 3px;
  }
  .ta-sol__stripe-tider {
    margin-block-start: 5px;
    font-size: 12px;
  }
  .ta-sol__stripe-tider > [data-kun-desktop],
  .ta-sol__kun-desktop {
    display: none;
  }
  .ta-sol__valgt-knapper {
    margin-block-start: 16px;
  }
  .bv-site .ta-sol .ta-sol__valgt-knapper .ta-knapp {
    padding: 15px 24px;
  }
  /* Mobilen har bare «Se boligen» (designet). */
  .bv-site .ta-sol .ta-sol__valgt-knapper .ta-sol__til-velger {
    display: none;
  }

  .ta-sol__rangering {
    padding-block-start: 56px;
  }
  .ta-sol__rang-topp {
    display: block;
    margin-block-end: 18px;
    padding-inline: 8px;
  }
  .bv-site .ta-sol .ta-sol__rang-tekst h2 {
    font-size: 34px;
    line-height: 1.08;
  }
  .bv-site .ta-sol__rang-tekst p {
    margin-block-start: 10px;
    font-size: 15px;
    line-height: 1.55;
  }
  .bv-site .ta-sol__forelopig {
    max-inline-size: none;
    margin-block-start: 10px;
    padding: 9px 14px;
  }
  .ta-sol__filter {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 16px;
    border-radius: 22px;
  }
  .ta-sol__felt--del .ta-sol__feltnavn,
  .ta-sol__felt--sorter {
    display: none;
  }
  /* Tidsrom og bygg som løse piller med ramme (designet), minst 44 × 44 px. */
  .ta-sol__segment {
    flex-wrap: wrap;
    gap: 6px;
    padding: 0;
    border: 0;
    background: none;
  }
  .bv-site .ta-sol__segment button {
    min-block-size: 44px;
    min-inline-size: 44px;
    padding: 0 16px;
    border: 1.5px solid var(--ta-ink);
    background: var(--ta-white);
  }
  .bv-site .ta-sol__segment button[aria-pressed="true"] {
    border-color: var(--ta-green);
  }
  .ta-sol__felt--min {
    flex: none;
    min-inline-size: 0;
  }
  .ta-sol__avkryss {
    min-block-size: 44px;
    padding: 0;
  }
  .bv-site .ta-sol__antall {
    margin: 18px 12px 10px;
  }

  /* Kortlista: kode + timer, bygg/etasje + uteplass, stripe. */
  .ta-sol__tabellrull {
    overflow: visible;
  }
  .ta-sol__tabell,
  .ta-sol__tabell[data-uten-status] {
    min-inline-size: 0;
  }
  .ta-sol__tabellhode {
    display: none;
  }
  .ta-sol__rad {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "kode status timer"
      "meta meta ute"
      "stripe stripe stripe";
    gap: 0 10px;
    padding: 16px;
  }
  .ta-sol__rad-bolig {
    display: contents;
  }
  .bv-site .ta-sol__rad-kode {
    grid-area: kode;
    min-block-size: 44px;
    margin-block: -6px;
    font-size: 19px;
  }
  .ta-sol__rad-status {
    grid-area: status;
  }
  /* «Bare ledige» på: alle er ledige, chipen sier ingenting. */
  .ta-sol__liste[data-bare-ledige] .ta-sol__rad-status {
    display: none;
  }
  .ta-sol__rad-timer {
    grid-area: timer;
    justify-self: end;
    font-size: 20px;
    text-align: end;
  }
  .ta-sol__rad-meta {
    grid-area: meta;
    margin-block: 2px 10px;
  }
  .ta-sol__rad-ute {
    grid-area: ute;
    margin-block: 2px 10px;
    font-size: 14px;
    text-align: end;
    color: var(--ta-ink);
  }
  .ta-sol__rad-stripe {
    grid-area: stripe;
    block-size: 12px;
  }
  .ta-sol__rad-stripe > span {
    border-radius: 2px;
  }
  .ta-sol__rad--tom {
    min-block-size: 96px;
  }
  .ta-sol__forklaring--stripe {
    margin: 16px 8px 0;
  }

  .ta-sol__metode {
    display: block;
    margin-block-start: 48px;
    padding: 28px 20px;
    border-radius: 22px;
  }
  .bv-site .ta-sol .ta-sol__metode h2 {
    font-size: 28px;
    line-height: 1.12;
  }
  .ta-sol__punkter {
    gap: 14px;
    margin-block-start: 18px;
  }
  .ta-sol__punkter li {
    gap: 12px;
  }
  .ta-sol__punktnr {
    inline-size: 30px;
    block-size: 30px;
    font-size: 14px;
  }
  .bv-site .ta-sol__punkter p {
    margin-block-start: 3px;
    font-size: 15px;
  }
  /* Illustrasjonen er bare på desktop (mobildesignet har den ikke). */
  .ta-sol__figur {
    display: none;
  }
  .bv-site .ta-sol__ikke-klar {
    padding: 28px 20px;
    border-radius: 22px;
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bv-site .ta-sol__fane,
  .bv-site .ta-sol__pin,
  .bv-site .ta-sol__spill,
  .bv-site .ta-sol__vispins,
  .bv-site .ta-sol__segment button {
    transition: none;
  }
}