/* Exobutiken - blandningsguide
   -------------------------------------------------------------------------
   Formspråket kommer från föremålen, inte från ett gränssnittsbibliotek:
   klart glas, en tryckt gradering, en kanyl. Sprutan är teckningen och svaret
   är anteckningen på den.

   Två beslut styr layouten:
   - Svaret ligger överst och reglagen under. Ändrar man något ser man siffran
     röra sig, i stället för att behöva scrolla ned till den.
   - Inga numrerade steg. De fyra raderna är inställningar som får ändras i
     vilken ordning som helst, inte en sekvens.

   Färgerna är butikens egna, samma som korten och produktsidorna använder:
   #20347c till rubriker, siffror och valda knappar, #2372b9 till det som går
   att göra, och deras ljusa toner till ytor och linjer. Guiden ska se ut som
   en del av exobutiken, inte som ett verktyg någon klistrat in.

   Rött betyder en enda sak och förekommer ingen annanstans: märket på sprutan
   som visar var man ska sluta dra, och rutan som säger att doserna inte är
   våra. Allt annat som syns är blått.

   Inget eget font-family - typsnittet ärvs från temat, men alla siffror är
   tabulära så de inte hoppar i sidled när svaret ändras.

   Filen köas in med wp_enqueue_style och passerar aldrig inläggssparningen,
   till skillnad från CSS i en Divi-modul där style="..." stryks eftersom
   kontot saknar unfiltered_html.
   ------------------------------------------------------------------------- */

.exo-mix {
  /* Butikens egna färger, hämtade ur spwc-cards.css där de redan är satta:
     --spwc-primary #20347c, --spwc-accent #2372b9, --spwc-muted #5b6880,
     linjen #e7eef7 och ytan #f6f8fc. Ändras de där ska de ändras här med. */
  --papper: #ffffff;
  --botten: #f6f8fc;
  --ink: #20347c;
  --ink-svag: #5b6880;
  --accent: #2372b9;
  --linje: #d9e2ef;
  --linje-svag: #e7eef7;
  --glas: #f5f9fd;
  /* Vätskan är accenten utspädd i vitt, 30 respektive 55 procent, så glaset
     får samma blå som resten även när det bara är en ton. */
  --vatska: #bdd5ea;
  --vatska-kant: #86b1d8;
  --metall: #8b96a9;
  --marke: #c0392b;
  --marke-yta: #fdf0ee;

  box-sizing: border-box !important;
  max-width: 940px !important;
  margin: 2rem auto !important;
  padding: 0 !important;
  border: 1px solid var(--linje) !important;
  border-radius: 6px !important;
  background: var(--papper) !important;
  color: var(--ink) !important;
  overflow: hidden !important;
  font-variant-numeric: tabular-nums !important;
  -webkit-font-feature-settings: "tnum" 1 !important;
  font-feature-settings: "tnum" 1 !important;
}

.exo-mix *,
.exo-mix *::before,
.exo-mix *::after { box-sizing: border-box !important; }

/* Hidden måste vinna. Komponenten sätter display med !important på nästan
   allt - raderna är grid, knapparna är grid, svaret är block - och då biter
   inte webbläsarens egen [hidden]-regel längre. Attributet såg ut att
   fungera ända tills potensläget skulle gömma de fyra sprutraderna och de
   stod kvar. En regel som är mer specifik än komponentens egna, så den
   vinner oavsett var i filen den står. */
.exo-mix [hidden] { display: none !important; }

/* Teman sätter gärna sina egna knapp- och fältstilar brett: VERSALER,
   bokstavsspärr, full bredd, skuggor. Värdeknapparna värjde sig redan var
   för sig, resten av reglagen gjorde det inte - i ett tema som skrev
   text-transform: uppercase blev rullgardinen och lägesknappen skrikande
   versaler tvärs över hela raden.

   Listan är klassnamn, inte "button, input, select". Ett elementnamn hade
   vägt tyngre än komponentens egna regler och tagit över bredden på fälten
   som faktiskt ska vara hundra procent. Nu väger raderna lika mycket, och
   den som står senare i filen vinner - alltså komponentens egen. */
.exo-mix__knapp,
.exo-mix__lageknapp,
.exo-mix__nollknapp,
.exo-mix__tipsknapp,
.exo-mix__peptidlista,
.exo-mix__fritext,
.exo-mix__enhetsval {
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  float: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

/* Mörkt läge är samma blå, vänt. Botten är butikens marinblå nedtonad mot
   svart i stället för en neutral gråsvart, så guiden känns igen även här. */
.exo-mix--mork {
  --papper: #0f172f;
  --botten: #0a1022;
  --ink: #dbe6fa;
  --ink-svag: #8fa2c4;
  --accent: #6aa9e0;
  --linje: #21304f;
  --linje-svag: #18233c;
  --glas: #121c33;
  --vatska: #2a5f9e;
  --vatska-kant: #4a8fd6;
  --metall: #4a5874;
  --marke: #ff6a55;
  --marke-yta: #2a1512;
}

.exo-mix__titel {
  margin: 0 !important;
  padding: 1.4rem 1.6rem 0 !important;
  font-size: 1.3rem !important;
  line-height: 1.2 !important;
  color: var(--ink) !important;
}

/* =========================================================================
   Svaret. Det enda man egentligen kom hit för.
   ========================================================================= */

.exo-mix__svar {
  padding: 2rem 1.6rem 1.6rem !important;
  text-align: center !important;
}

.exo-mix__ledtext {
  margin: 0 !important;
  font-size: .95rem !important;
  line-height: 1.4 !important;
  color: var(--ink-svag) !important;
}

.exo-mix__tal {
  display: flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: .5rem !important;
  margin: .1rem 0 1.4rem !important;
}

.exo-mix__siffror {
  font-size: clamp(4rem, 17vw, 7.5rem) !important;
  font-weight: 800 !important;
  line-height: .88 !important;
  letter-spacing: -.045em !important;
  color: var(--ink) !important;
}

.exo-mix__streckord {
  font-size: clamp(1rem, 3.5vw, 1.35rem) !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  color: var(--ink-svag) !important;
}

/* =========================================================================
   Sprutan
   ========================================================================= */

.exo-mix__spruta {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  margin: 0 0 1.5rem !important;
  overflow: visible !important;
}

.exo-mix__nal {
  stroke: var(--metall) !important;
  stroke-width: 5 !important;
  stroke-linecap: round !important;
}
.exo-mix__fattning { fill: var(--metall) !important; }
.exo-mix__cylinder {
  fill: var(--glas) !important;
  stroke: var(--linje) !important;
  stroke-width: 2 !important;
}
.exo-mix__vatska {
  fill: var(--vatska) !important;
  transition: width .32s cubic-bezier(.2, .7, .3, 1) !important;
}
.exo-mix__propp {
  fill: var(--vatska-kant) !important;
  transition: x .32s cubic-bezier(.2, .7, .3, 1) !important;
}
.exo-mix__stang {
  fill: var(--metall) !important;
  transition: x .32s cubic-bezier(.2, .7, .3, 1), width .32s cubic-bezier(.2, .7, .3, 1) !important;
}
.exo-mix__krage,
.exo-mix__tumgrepp { fill: var(--metall) !important; }

.exo-mix__gradering { stroke: var(--metall) !important; stroke-width: 1.6 !important; }
.exo-mix__gradering--stor { stroke: var(--ink-svag) !important; stroke-width: 2.4 !important; }

.exo-mix__siffra {
  fill: var(--ink-svag) !important;
  font-size: 26px !important;
  font-weight: 600 !important;
  text-anchor: middle !important;
}

/* Den enda färgen i hela guiden. */
.exo-mix__marke line {
  stroke: var(--marke) !important;
  stroke-width: 3 !important;
  transition: transform .32s cubic-bezier(.2, .7, .3, 1) !important;
}
.exo-mix__marke circle {
  fill: var(--marke) !important;
  transition: transform .32s cubic-bezier(.2, .7, .3, 1) !important;
}
.exo-mix__marke[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .exo-mix__vatska,
  .exo-mix__propp,
  .exo-mix__stang,
  .exo-mix__marke line,
  .exo-mix__marke circle { transition: none !important; }
}

/* =========================================================================
   Fakta. Fyra tal med hårfina skiljelinjer, som på en mätarpanel.
   ========================================================================= */

/* Fyra tal med hårfina skiljelinjer, som på en mätarpanel. Ingen ram runt
   varje - en rad lådor till gjorde kortet rörigt. */
.exo-mix__fakta {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  margin: 0 !important;
  padding: .3rem 0 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--linje-svag) !important;
}

.exo-mix__fakta > div {
  padding: .7rem .5rem .2rem !important;
  border-left: 1px solid var(--linje-svag) !important;
  min-width: 0 !important;
}
.exo-mix__fakta > div:first-child { border-left: 0 !important; }

.exo-mix__fakta dt {
  margin: 0 0 .15rem !important;
  font-size: .75rem !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  color: var(--ink-svag) !important;
}

.exo-mix__fakta dd {
  margin: 0 !important;
  font-size: 1.02rem !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  color: var(--ink) !important;
  word-break: break-word !important;
}

/* Invändning, inte fel: uträkningen står kvar och går att läsa. Samma röda
   som märket, för det är samma sak den handlar om. */
.exo-mix__varning {
  margin: 1rem 0 0 !important;
  padding: .8rem 1rem !important;
  border-left: 3px solid var(--marke) !important;
  border-radius: 0 6px 6px 0 !important;
  background: var(--marke-yta) !important;
  color: var(--marke) !important;
  font-size: .9rem !important;
  line-height: 1.5 !important;
  text-align: left !important;
}
.exo-mix__varning[hidden] { display: none !important; }

/* =========================================================================
   Reglagen
   ========================================================================= */

.exo-mix__val {
  padding: .4rem 1.6rem 1.4rem !important;
  border-top: 1px solid var(--linje-svag) !important;
  background: var(--botten) !important;
}

.exo-mix__rad {
  display: grid !important;
  grid-template-columns: 6.5rem 1fr !important;
  align-items: center !important;
  gap: .9rem !important;
  padding: .7rem 0 !important;
  border-bottom: 0 !important;
}
.exo-mix__rad:last-child { border-bottom: 0 !important; }

.exo-mix__rubrik {
  font-size: .95rem !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  color: var(--ink) !important;
}

/* Knapparna ligger i ett rutnät med fasta spalter, inte på rad efter
   varandra. Annars styr texten bredden - "5 mg" blir smal och "1000 mcg"
   bred - och raderna hamnar i otakt med varandra. Nu står "Flaskan",
   "Vatten", "Din dos" och "Sprutan" i samma spalter rakt ned.
   minmax(0, 7rem) är ett tak, inte ett mått: i en smal spalt krymper
   spalterna i stället för att sticka ut. */
.exo-mix__knappar {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 7rem)) !important;
  justify-content: start !important;
  gap: .45rem !important;
  min-width: 0 !important;
}

.exo-mix__knapp {
  appearance: none !important;
  -webkit-appearance: none !important;
  margin: 0 !important;
  padding: .5rem .5rem !important;
  min-height: 42px !important;
  border: 1px solid var(--linje) !important;
  border-radius: 6px !important;
  background: var(--papper) !important;
  color: var(--ink) !important;
  font: inherit !important;
  font-size: .92rem !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: border-color .15s ease, background-color .15s ease !important;
}

.exo-mix__knapp:hover { border-color: var(--accent) !important; }

/* Öppnar fritextfältet. Tystare än värdeknapparna: den är en utväg, inte
   ett av alternativen. */
.exo-mix__knapp--annat {
  border-style: dashed !important;
  color: var(--ink-svag) !important;
  font-weight: 600 !important;
}
.exo-mix__knapp--annat:hover { color: var(--ink) !important; }
.exo-mix__knapp--annat[hidden] { display: none !important; }

.exo-mix__knapp.ar-vald {
  border-color: var(--ink) !important;
  background: var(--ink) !important;
  color: var(--papper) !important;
}

.exo-mix__knapp:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px !important;
}

/* Fältet och enhetsväljaren sitter inuti en ram med overflow: hidden, så en
   egen fokusring hade klippts och synts som ett rött streck mitt i rutan.
   Ramen runt dem mörknar i stället, via :focus-within ovan. */
.exo-mix__fritext:focus-visible,
.exo-mix__enhetsval:focus-visible {
  outline: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .exo-mix__knapp { transition: none !important; }
}

/* Egna fältet får en egen rad i rutnätet, två spalter brett. En spalt räcker
   inte till en siffra och en enhetsväljare, och skulle det tryckas in sist på
   knappraden blev bredden olika beroende på hur många knappar raden har. */
.exo-mix__eget {
  display: flex !important;
  align-items: stretch !important;
  grid-column: 1 / span 2 !important;
  min-width: 0 !important;
  border: 1px solid var(--ink) !important;
  border-radius: 6px !important;
  background: var(--papper) !important;
  overflow: hidden !important;
}
.exo-mix__eget[hidden] { display: none !important; }

/* Fokusringen sitter på ramen, inte på fältet inuti. Ett outline på fältet
   hamnar innanför overflow: hidden och klipps till ett rött streck mitt i
   rutan; på ramen ritas den utanför och syns runt om, som på knapparna. */
.exo-mix__eget:focus-within {
  border-style: solid !important;
  border-color: var(--ink) !important;
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px !important;
}

.exo-mix__fritext {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: .5rem .7rem !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  color: var(--ink) !important;
  font: inherit !important;
  font-size: .92rem !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
}

.exo-mix__fritext::placeholder { color: var(--ink-svag) !important; font-weight: 400 !important; opacity: 1 !important; }

.exo-mix__enhetsval {
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 1.5rem 0 .55rem !important;
  border: 0 !important;
  border-left: 1px solid var(--linje-svag) !important;
  border-radius: 0 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background-color: transparent !important;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%235b6880' d='M0 0h10L5 6z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right .5rem center !important;
  background-size: 9px 6px !important;
  color: var(--ink-svag) !important;
  font: inherit !important;
  font-size: .85rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}

.exo-mix--mork .exo-mix__enhetsval {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%238fa2c4' d='M0 0h10L5 6z'/%3E%3C/svg%3E") !important;
}

/* Peptidraden. Den ligger först eftersom den fyller i de andra raderna -
   den är en genväg, inte en inställning bland dem. Därför också en egen
   linje under, så det syns var genvägen slutar och inställningarna börjar. */
/* Raden med en rullgardin i, till skillnad från raderna med knappar. Två
   klassnamn för att båda listorna ser likadana ut men inte är samma sak:
   ett test som frågar "finns det någon peptidrad?" ska inte få svaret ja
   för att potensraden lånat peptidernas klass. */
.exo-mix__rad--peptid,
.exo-mix__rad--valj {
  border-bottom: 1px solid var(--linje-svag) !important;
  margin-bottom: .3rem !important;
}

/* Trettio knappar tar över hela guiden, så listan är en rullgardin. Dosen
   står i varje rad, för man ska kunna jämföra utan att välja först. */
.exo-mix__peptidval {
  display: flex !important;
  min-width: 0 !important;
}

.exo-mix__peptidlista {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: .6rem 2.2rem .6rem .8rem !important;
  border: 1px solid var(--linje) !important;
  border-radius: 6px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background-color: var(--papper) !important;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%2320347c' d='M0 0h10L5 6z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right .8rem center !important;
  background-size: 10px 6px !important;
  color: var(--ink) !important;
  font: inherit !important;
  font-size: .95rem !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  cursor: pointer !important;
  text-overflow: ellipsis !important;
}

.exo-mix--mork .exo-mix__peptidlista {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%23dbe6fa' d='M0 0h10L5 6z'/%3E%3C/svg%3E") !important;
}

.exo-mix__peptidlista:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px !important;
}

/* Rekommenderad vattenmängd för den valda dosen. Ett tips, inte ett fel -
   därför husets blå och inte varningsrött. */
.exo-mix__vattentips {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: .5rem .8rem !important;
  margin: 0 0 .85rem !important;
  padding: .65rem .9rem !important;
  border-radius: 6px !important;
  background: var(--papper) !important;
  border: 1px solid var(--linje) !important;
  font-size: .88rem !important;
  line-height: 1.5 !important;
  color: var(--ink-svag) !important;
}
.exo-mix__vattentips[hidden] { display: none !important; }

.exo-mix__tipsknapp {
  appearance: none !important;
  -webkit-appearance: none !important;
  margin: 0 !important;
  padding: .35rem .8rem !important;
  /* Accenten, inte marinblått. Marinblått betyder "det här är valt" på hela
     raden ovanför; den här knappen gör något i stället. */
  border: 1px solid var(--accent) !important;
  border-radius: 6px !important;
  background: var(--accent) !important;
  color: #ffffff !important;
  font: inherit !important;
  font-size: .82rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}
.exo-mix__tipsknapp:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px !important;
}

/* Lägesknappen för tillväxthormon. Ligger under rullgardinen, inte i den:
   det är ett annat sätt att räkna, inte ännu ett preparat i listan. Vänsterkanten
   är indragen lika mycket som rubrikspalten är bred, så knappen börjar där
   rullgardinen och knapprutnätet börjar i stället för ute i marginalen. */
.exo-mix__lagerad {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: .5rem !important;
  margin: 0 !important;
  padding: 0 0 0 7.4rem !important;
}

.exo-mix__lageknapp {
  appearance: none !important;
  -webkit-appearance: none !important;
  margin: 0 !important;
  padding: .5rem .9rem !important;
  border: 1px solid var(--linje) !important;
  border-radius: 6px !important;
  background: var(--papper) !important;
  color: var(--ink) !important;
  font: inherit !important;
  font-size: .88rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  cursor: pointer !important;
}

.exo-mix__lageknapp:hover { border-color: var(--accent) !important; }

/* Nollställningen ska gå att hitta men aldrig locka: den kastar bort det
   kunden fyllt i. Därför längst till höger och utan ram. */
.exo-mix__nollknapp {
  appearance: none !important;
  -webkit-appearance: none !important;
  margin: 0 0 0 auto !important;
  padding: .5rem .2rem !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--ink-svag) !important;
  font: inherit !important;
  font-size: .85rem !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  cursor: pointer !important;
}

.exo-mix__nollknapp:hover { color: var(--ink) !important; }

.exo-mix__nollknapp:focus-visible,
.exo-mix__tipsknapp:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px !important;
}

.exo-mix__lageknapp[aria-pressed="true"] {
  border-style: solid !important;
  border-color: var(--ink) !important;
  background: var(--ink) !important;
  color: var(--papper) !important;
}

.exo-mix__lageknapp:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px !important;
}

/* Vad som faktiskt fylldes i, en uppgift per rad. På en enda rad blir det en
   klump där dosen försvinner bland det andra. */
.exo-mix__peptidinfo {
  margin: 0 !important;
  padding: .8rem .95rem !important;
  border-radius: 6px !important;
  background: var(--papper) !important;
  border: 1px solid var(--linje-svag) !important;
  font-size: .88rem !important;
  line-height: 1.5 !important;
}
.exo-mix__peptidinfo[hidden] { display: none !important; }

.exo-mix__peptidnamn {
  margin: 0 0 .45rem !important;
  padding: 0 0 .45rem !important;
  border-bottom: 1px solid var(--linje-svag) !important;
  font-size: .95rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  color: var(--ink) !important;
}

.exo-mix__peptidrader {
  display: flex !important;
  flex-direction: column !important;
  gap: .25rem !important;
  margin: 0 !important;
  padding: 0 !important;
}

.exo-mix__peptidrader > div {
  display: flex !important;
  align-items: baseline !important;
  gap: .6rem !important;
  min-width: 0 !important;
}

.exo-mix__peptidrader dt {
  flex: 0 0 4.5rem !important;
  margin: 0 !important;
  font-weight: 400 !important;
  color: var(--ink-svag) !important;
}

.exo-mix__peptidrader dd {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
}

/* Vägen vidare till produkten. En understruken länk räckte inte: den satt
   sist i en ruta full av fet text och lästes som ännu en uppgift. Nu är den
   en knapp med ram, avskild med en linje - det är det enda i rutan man kan
   göra, och då ska det synas att det går att trycka på. */
.exo-mix__peptidlank {
  display: inline-block !important;
  margin-top: .75rem !important;
  padding: .45rem .9rem !important;
  border: 1px solid var(--accent) !important;
  border-radius: 6px !important;
  background: var(--papper) !important;
  color: var(--accent) !important;
  text-decoration: none !important;
  font-size: .88rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  transition: background-color .15s ease, color .15s ease !important;
}
.exo-mix__peptidlank:hover,
.exo-mix__peptidlank:focus {
  background: var(--accent) !important;
  color: #ffffff !important;
  text-decoration: none !important;
}
.exo-mix__peptidlank:focus-visible {
  outline: 2px solid var(--ink) !important;
  outline-offset: 2px !important;
}
.exo-mix__peptidlank[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .exo-mix__peptidlank { transition: none !important; }
}

/* Doserna är inte våra. Det ska stå så att man läser det, inte gömmas
   bland den lilla texten längst ned. */
.exo-mix__dosfrisk {
  margin: 0 1.6rem 1rem !important;
  padding: .8rem 1rem !important;
  border-left: 3px solid var(--marke) !important;
  border-radius: 0 6px 6px 0 !important;
  background: var(--marke-yta) !important;
  color: var(--marke) !important;
  font-size: .85rem !important;
  line-height: 1.55 !important;
}

/* =========================================================================
   Svaret en gång till, under reglagen.
   Står man längst ned och trycker på knapparna ska man slippa scrolla upp
   för att se vad som hände. Samma innehåll, mindre satt - det är en
   påminnelse, inte ett andra huvudbudskap.
   ========================================================================= */

/* På en bred skärm får hela guiden plats utan att man scrollar, och då är
   kopian bara en upprepning. Den visas där den gör nytta: på smala skärmar. */
@media (min-width: 1000px) {
  .exo-mix__svar--nere { display: none !important; }
}

.exo-mix__svar--nere {
  padding: 1.2rem 1.6rem 1.4rem !important;
  border-top: 1px solid var(--linje-svag) !important;
  background: var(--botten) !important;
}

.exo-mix__svar--nere .exo-mix__ledtext { font-size: .85rem !important; }

.exo-mix__svar--nere .exo-mix__tal { margin: .1rem 0 .9rem !important; }

.exo-mix__svar--nere .exo-mix__siffror {
  font-size: clamp(2.8rem, 11vw, 4.2rem) !important;
  line-height: .9 !important;
}

.exo-mix__svar--nere .exo-mix__streckord { font-size: clamp(.9rem, 3vw, 1.1rem) !important; }

.exo-mix__svar--nere .exo-mix__spruta { margin-bottom: 1.1rem !important; }

.exo-mix__svar--nere .exo-mix__fakta { background: var(--papper) !important; }

/* Tablettsvarets kopia. Samma nedtoning som sprutans: texten är svaret här,
   så den krymper i stället för siffran, och tabletterna tar mindre plats. */
.exo-mix__svar--nere .exo-mix__tabletttext {
  font-size: clamp(1.15rem, 3.4vw, 1.6rem) !important;
}
.exo-mix__svar--nere .exo-mix__tabletter {
  max-width: 220px !important;
  margin-bottom: 1.1rem !important;
}

/* =========================================================================
   Meningen och den lilla texten
   ========================================================================= */

.exo-mix__mening {
  margin: 0 !important;
  padding: 1rem 1.6rem !important;
  border-top: 1px solid var(--linje-svag) !important;
  background: var(--papper) !important;
  font-size: .92rem !important;
  line-height: 1.6 !important;
  color: var(--ink-svag) !important;
}

.exo-mix__frisk {
  margin: 0 !important;
  padding: 0 1.6rem 1.3rem !important;
  font-size: .78rem !important;
  line-height: 1.55 !important;
  color: var(--ink-svag) !important;
  opacity: .8 !important;
}

/* =========================================================================
   Padda och mobil
   ========================================================================= */

@media (max-width: 760px) {
  .exo-mix__rad {
    grid-template-columns: 1fr !important;
    gap: .5rem !important;
  }
  /* Rubriken har flyttat upp ovanför knapparna, så indraget under
     rullgardinen har inget att rätta sig efter längre. */
  .exo-mix__lagerad { padding-left: 0 !important; }
  .exo-mix__fakta { grid-template-columns: repeat(2, 1fr) !important; }
  .exo-mix__fakta > div:nth-child(3) { border-left: 0 !important; }
  .exo-mix__fakta > div:nth-child(n+3) { border-top: 1px solid var(--linje-svag) !important; }
}

@media (max-width: 600px) {
  .exo-mix {
    margin: 1.2rem 0 !important;
  }
  .exo-mix__titel { padding: 1.1rem 1.1rem 0 !important; }
  .exo-mix__svar { padding: 1.4rem 1.1rem 1.2rem !important; }
  .exo-mix__svar--nere { padding: 1rem 1.1rem 1.2rem !important; }
  .exo-mix__val { padding: .2rem 1.1rem 1.1rem !important; }
  .exo-mix__mening { padding: .9rem 1.1rem !important; }
  .exo-mix__dosfrisk { margin: 0 1.1rem .9rem !important; }
  .exo-mix__frisk { padding: 0 1.1rem 1.1rem !important; }

  /* Tre spalter över hela bredden i stället för fem smala: på en telefon är
     det träffytan som avgör, inte hur många som får plats. */
  .exo-mix__knappar { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .exo-mix__knapp { padding: .5rem .3rem !important; }
  .exo-mix__eget { grid-column: 1 / -1 !important; }

  /* Hundra streck får inte plats bredvid varandra på en telefon - de blir ett
     grått fält som inte går att räkna. De små strecken tas bort och varannan
     siffra döljs, så sprutan blir en linjal som går att läsa av.
     nth-of-type räknar bara text-elementen, så det gäller alla tre
     sprutstorlekarna och även när skalan ritas om av JavaScript. */
  .exo-mix__gradering:not(.exo-mix__gradering--stor) { display: none !important; }
  .exo-mix__gradering--stor { stroke-width: 3.2 !important; }
  .exo-mix__siffra { font-size: 34px !important; }
  .exo-mix__siffra:nth-of-type(even) { display: none !important; }
  .exo-mix__marke line { stroke-width: 4.5 !important; }
  .exo-mix__marke circle { r: 10 !important; }
}

/* =========================================================================
   Potensläget: tabletter i stället för sprutor
   -------------------------------------------------------------------------
   Sprutan visar var man ska sluta dra. Tabletterna visar var man ska bryta.
   Samma tanke, och därför samma former: hela cirklar för hela tabletter, och
   den sista delad i sektorer med de man ska ta ifyllda. Sektorer och inte en
   stapel, för det är så en tablett faktiskt går sönder.
   ========================================================================= */

.exo-mix__tabletter {
  display: block !important;
  width: 100% !important;
  max-width: 380px !important;
  height: auto !important;
  margin: .4rem auto 1.4rem !important;
  overflow: visible !important;
}

/* Tabletten själv: glaset motsvarighet, ljus och med en tunn kant. */
.exo-mix__tablett {
  fill: var(--glas) !important;
  stroke: var(--linje) !important;
  stroke-width: 2 !important;
}
.exo-mix__tablett--kant { fill: none !important; }

/* En bit av tabletten. Otagen är nästan osynlig, tagen är husets blå. */
.exo-mix__tablettdel {
  fill: var(--glas) !important;
  stroke: none !important;
  transition: fill .18s ease !important;
}
.exo-mix__tablettdel--tas { fill: var(--vatska) !important; }

@media (prefers-reduced-motion: reduce) {
  .exo-mix__tablettdel { transition: none !important; }
}

/* Brytlinjerna. Tunna, men de måste synas även mellan två ifyllda delar,
   annars ser två tredjedelar ut som en enda stor bit. */
.exo-mix__brytlinje {
  stroke: var(--metall) !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
}

/* Svaret är text här, inte en siffra, så det tål inte samma jättegrad. */
.exo-mix__tabletttext {
  display: block !important;
  font-size: clamp(1.6rem, 4.5vw, 2.6rem) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: -.01em !important;
  color: var(--ink) !important;
}

/* Tre faktarutor i stället för fyra när tabletterna räknas. */
.exo-mix__svar--tablett .exo-mix__fakta {
  grid-template-columns: repeat(3, 1fr) !important;
}
@media (max-width: 760px) {
  .exo-mix__svar--tablett .exo-mix__fakta { grid-template-columns: 1fr !important; }
  .exo-mix__svar--tablett .exo-mix__fakta > div { border-left: 0 !important; }
  .exo-mix__svar--tablett .exo-mix__fakta > div + div {
    border-top: 1px solid var(--linje-svag) !important;
  }
}

/* Länken till bakteriostatiskt vatten. Ligger under vattenraden, indragen
   lika mycket som rubrikspalten är bred så den börjar där knapparna börjar.
   Tyst: den ska finnas för den som undrar var vattnet köps, inte tävla med
   reglagen om uppmärksamheten. */
.exo-mix__bacrad {
  margin: -.4rem 0 .2rem !important;
  padding: 0 0 0 7.4rem !important;
}
.exo-mix__baclank {
  color: var(--accent) !important;
  font-size: .85rem !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}
.exo-mix__baclank:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px !important;
}
@media (max-width: 760px) {
  .exo-mix__bacrad { padding-left: 0 !important; }
}