/* Connected, formspråk: Varm våg.
   Färgerna kommer ur Emmas självledarskapsmodell, en enda orange. */

:root {
  --krem: #faf7f2;
  --krem-djup: #f4ede2;
  --varm-ljus: #f6e3d9;
  --kort: #ffffff;
  --linje: #e3dbcd;
  --accent: #d97757;
  --accent-djup: #ab5432;
  --dampad: #8a6a4b;
  --mork: #4a473f;
  --text: #2b2a28;

  --serif: "Newsreader", Georgia, serif;
  --sans: "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;

  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  background: var(--krem);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* en telefonskärm, centrerad på stora fönster */
.app {
  position: relative;
  max-width: 430px;
  min-height: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--krem);
}

.bakgrund { position: absolute; inset: 0; z-index: 0; }
.bakgrund img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bakgrund .sloja { position: absolute; inset: 0; }

.vy {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: max(28px, env(safe-area-inset-top)) 22px calc(104px + env(safe-area-inset-bottom, 0px));
  gap: 15px;
}

/* ------------------------------------------------------------------ text */
h1 { font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.15; margin: 0; text-wrap: balance; }
h2 { font-family: var(--serif); font-weight: 400; font-size: 20px; line-height: 1.2; margin: 0; }
p { margin: 0; }

.marke { font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-djup); }
.etikett { font-size: 12px; font-weight: 600; color: var(--dampad); }
.dampad { color: var(--dampad); }
.fraga { font-size: 13px; font-style: italic; color: var(--dampad); }
.liten { font-size: 13px; }

/* ----------------------------------------------------------------- kort */
.kort {
  background: rgba(255, 255, 255, 0.93);
  border-radius: 22px;
  padding: 15px 17px;
  box-shadow: 0 4px 14px rgba(138, 106, 75, 0.08);
}
.kort.tat { padding: 13px 15px; }
.kort.varm { background: var(--varm-ljus); box-shadow: none; }

.rad { display: flex; align-items: center; gap: 12px; }
.stapel { display: flex; flex-direction: column; gap: 10px; }
.vaxer { flex: 1; min-width: 0; }
.skjut { margin-top: auto; }

.ring {
  width: 32px; height: 32px; flex: 0 0 auto;
  border-radius: 16px; background: var(--varm-ljus);
  color: var(--accent-djup); font-size: 14px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.ring.stor { width: 44px; height: 44px; border-radius: 22px; }

/* --------------------------------------------------------------- knappar */
.knapp {
  font: inherit; font-size: 16px; font-weight: 700;
  min-height: 56px; padding: 0 22px;
  border: 0; border-radius: 28px;
  background: var(--accent-djup); color: var(--krem);
  display: flex; align-items: center; justify-content: center; gap: 10px;
  cursor: pointer; text-decoration: none;
  box-shadow: 0 8px 18px rgba(139, 67, 39, 0.22);
}
.knapp.tom {
  background: transparent; color: var(--text);
  border: 1px solid var(--text); box-shadow: none;
}
.knapp.liten { min-height: 46px; font-size: 15px; padding: 0 18px; }
.knapp:disabled { opacity: 0.45; cursor: default; box-shadow: none; }

.val {
  font: inherit; font-size: 15px; text-align: left;
  min-height: 50px; padding: 13px 16px;
  border: 1px solid var(--linje); border-radius: 14px;
  background: var(--kort); color: var(--text); cursor: pointer;
  width: 100%;
}
.val[aria-pressed="true"] {
  border: 2px solid var(--accent-djup);
  background: var(--varm-ljus);
  font-weight: 600;
}

.chip {
  font: inherit; font-size: 15px;
  min-height: 44px; padding: 10px 18px;
  border: 1px solid var(--linje); border-radius: 22px;
  background: var(--kort); color: var(--text); cursor: pointer;
}
.chip[aria-pressed="true"] {
  border: 2px solid var(--accent-djup);
  background: var(--varm-ljus);
  font-weight: 600;
}
.chiprad { display: flex; gap: 8px; flex-wrap: wrap; }

/* ------------------------------------------------------------------ fält */
label.falt { display: flex; flex-direction: column; gap: 7px; }
textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"] {
  font: inherit; font-size: 15px; line-height: 1.55; color: var(--text);
  padding: 13px 15px;
  border: 1px solid var(--linje); border-radius: 16px;
  background: var(--kort);
  width: 100%;
}
textarea { resize: none; min-height: 130px; }
textarea:focus-visible, input:focus-visible, button:focus-visible, a:focus-visible {
  outline: 3px solid var(--accent-djup); outline-offset: 2px;
}

/* ------------------------------------------------------------------- meny */
.meny {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 3;
  padding: 6px 20px max(18px, env(safe-area-inset-bottom));
  display: flex; justify-content: center;
  pointer-events: none;
}
.meny .platta { pointer-events: auto; }
.meny .platta {
  background: rgba(255, 255, 255, 0.94);
  border-radius: 26px; padding: 10px 20px;
  display: flex; gap: clamp(4px, 2.6vw, 20px); align-items: center;
  box-shadow: 0 6px 18px rgba(138, 106, 75, 0.12);
}
.meny button {
  border: 0; background: none; cursor: pointer; padding: 6px 4px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font: inherit; font-size: 11px; color: var(--dampad);
  min-width: 50px; min-height: 44px;
}
.meny button[aria-current="page"] { color: var(--text); font-weight: 700; }
.meny .strek { width: 18px; height: 3px; border-radius: 2px; background: transparent; }
.meny button[aria-current="page"] .strek { background: var(--accent); }

/* ------------------------------------------------------------- småsaker */
.brodsmula { display: flex; align-items: center; gap: 12px; }
.tillbaka {
  width: 40px; height: 40px; flex: 0 0 auto;
  border-radius: 20px; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, 0.9);
  display: flex; align-items: center; justify-content: center;
}
.steg { display: flex; gap: 5px; }
.steg span { width: 20px; height: 4px; border-radius: 2px; background: var(--linje); }
.steg span.nu { background: var(--accent-djup); }


.matare { height: 7px; background: var(--krem-djup); border-radius: 4px; overflow: hidden; }
.matare i { display: block; height: 100%; background: var(--accent); }

.notis {
  position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%);
  background: var(--mork); color: var(--krem);
  padding: 11px 18px; border-radius: 22px; font-size: 14px;
  box-shadow: 0 8px 20px rgba(43, 42, 40, 0.28);
  opacity: 0; pointer-events: none; transition: opacity 0.25s ease;
  z-index: 5; max-width: 90vw; text-align: center;
}
.notis.syns { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .notis { transition: none; }
}

/* ------------------------------------------------------- mikrofon i fält */
.faltmic { position: relative; display: block; }
.faltmic textarea { padding-right: 52px; }
.mic {
  position: absolute; right: 10px; bottom: 10px;
  width: 38px; height: 38px; border-radius: 19px;
  border: 1px solid var(--linje); background: var(--krem);
  color: var(--dampad); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.mic.lyssnar {
  background: var(--accent-djup); color: var(--krem); border-color: var(--accent-djup);
  animation: puls 1.4s ease-in-out infinite;
}
@keyframes puls {
  0%, 100% { box-shadow: 0 0 0 0 rgba(171, 84, 50, 0.35); }
  50%      { box-shadow: 0 0 0 7px rgba(171, 84, 50, 0); }
}
@media (prefers-reduced-motion: reduce) { .mic.lyssnar { animation: none; } }

/* ------------------------------------------------------------------ video */
.videokort {
  border: 0; cursor: pointer; width: 100%;
  display: flex; align-items: center; gap: 14px;
  background: rgba(255, 255, 255, 0.93);
}
.videokort .spela {
  width: 48px; height: 48px; flex: 0 0 auto; border-radius: 24px;
  background: var(--varm-ljus); color: var(--accent-djup);
  display: flex; align-items: center; justify-content: center;
}
/* Filmlaget: filmen far skarmen for sig sjalv i rutan 16:9, texten pa sidan
   vilar under och kommer tillbaka nar filmen ar slut. */
body.ser-film { overflow: hidden; }
body.ser-film .meny,
body.ser-film .globalmic,
body.ser-film .profilknapp { display: none; }

.filmlage {
  position: fixed; inset: 0; z-index: 20;
  background: rgba(30, 28, 26, 0.97);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 64px 12px 32px;
}
.filmduk {
  width: 100%; max-width: 680px; aspect-ratio: 16 / 9;
  border-radius: 16px; overflow: hidden; background: #000;
}
.filmduk > div,
.filmduk iframe { width: 100%; height: 100%; border: 0; display: block; }
.filmlage .filmtext {
  color: rgba(250, 247, 242, 0.78); font-size: 14px; text-align: center;
  max-width: 420px;
}
.filmlage .stangfilm {
  position: absolute; top: 14px; right: 14px;
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(250, 247, 242, 0.15); color: #faf7f2;
}

/* ------------------------------------------------------------- boka tid */
.boka {
  display: flex; align-items: center; gap: 12px;
  margin: 10px 0 12px;
  padding: 14px 17px; min-height: 56px;
  border: 1px solid var(--linje); border-radius: 22px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--text); text-decoration: none;
  font-family: var(--serif); font-size: 18px;
}
button.boka { width: 100%; text-align: left; cursor: pointer; }
.boka .liten {
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  color: var(--accent-djup); white-space: nowrap;
}

/* passordfeltet skal se ut som alle andre felt, og prikkene skal ha luft */
input[type="text"], input[type="email"], input[type="password"], input[type="date"] {
  min-height: 52px;
  -webkit-appearance: none; appearance: none;
}
input[type="password"] { letter-spacing: 0.16em; font-size: 17px; }
input[type="password"]::placeholder { letter-spacing: 0; font-size: 15px; }
input:-webkit-autofill {
  -webkit-text-fill-color: var(--text);
  box-shadow: 0 0 0 40px var(--kort) inset;
}
.mic.av { opacity: .5; }

/* ------------------------------------------------------- en mikrofon */
/* Liten mikrofon nede til hoyre, over menyen. Den skal vaere der nar du
   trenger den og ellers ikke ta plass. */
.globalmic {
  position: fixed; right: 16px;
  bottom: calc(100px + env(safe-area-inset-bottom, 0px));
  width: 44px; height: 44px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--linje); border-radius: 50%;
  background: rgba(255, 255, 255, 0.92); color: var(--dampad);
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(138, 106, 75, 0.14);
  z-index: 4;
}
.globalmic:hover { color: var(--text); }
.globalmic.av { opacity: .55; }
.globalmic.lyssnar {
  background: var(--accent-djup); color: var(--krem); border-color: var(--accent-djup);
  animation: puls 1.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .globalmic.lyssnar { animation: none; } }


/* ----------------------------------------------- kryssrutor och atgarder */
label.kryss {
  display: flex; align-items: flex-start; gap: 11px;
  cursor: pointer; padding: 2px 0;
}
label.kryss input[type="checkbox"] {
  flex: 0 0 auto; width: 22px; height: 22px; margin: 1px 0 0;
  accent-color: var(--accent-djup); cursor: pointer;
}
label.kryss > span { line-height: 1.5; }
.ta {
  flex: 0 0 auto; width: 28px; height: 28px;
  border: 0; border-radius: 14px; background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.ta:hover { background: var(--varm-ljus); }

/* ------------------------------------------------------- profilknappen */
.profilknapp {
  position: fixed; right: 16px;
  top: calc(20px + env(safe-area-inset-top, 0px));
  width: 38px; height: 38px; padding: 0;
  z-index: 5;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--linje); border-radius: 50%;
  background: rgba(255, 255, 255, 0.88); color: var(--dampad);
  font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
}
.profilknapp span { color: var(--accent-djup); }
.profilknapp.aktiv { border-color: var(--accent-djup); }

/* plats åt profilknappen i överkanten */
.vy > .rad:first-child, .brodsmula { padding-right: 46px; }

/* menyn bär bara symboler nu, så knapparna får andas */
.meny button { min-width: 58px; }

/* ------------------------------------------------------- meddelandetråd */
.bubbla {
  max-width: 84%; padding: 11px 15px;
  border-radius: 18px; font-size: 15px; line-height: 1.5;
  display: flex; flex-direction: column; gap: 4px;
}
.bubbla.min {
  align-self: flex-end; background: var(--varm-ljus); color: var(--text);
  border-bottom-right-radius: 6px;
}
.bubbla.hennes {
  align-self: flex-start; background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--linje); border-bottom-left-radius: 6px;
}
.bubbla .liten { font-size: 12px; }

/* ------------------------------------------------- se vad du skrivit */
.losenfalt { position: relative; display: block; }
.losenfalt input { padding-right: 52px; }
.oga {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 20px; background: none; cursor: pointer;
  color: var(--dampad);
}
.oga[aria-pressed="true"] { color: var(--accent-djup); }

/* ------------------------------------------------- arbetsytorna på en dator */
/* Klientens app ska se ut som en app, också på en stor skärm. Coachens vyer
   är något man jobbar i, och de får bredden. Layouten är densamma, bara
   rymligare, så ingenting kan hamna fel. */
@media (min-width: 900px) {
  .app[data-bred="ja"] { max-width: 1060px; }
  .app[data-bred="ja"] .vy { padding-left: 36px; padding-right: 36px; }
  /* Löpande text blir oläslig om raderna blir hur långa som helst */
  .app[data-bred="ja"] .vy > h1,
  .app[data-bred="ja"] .vy > p { max-width: 70ch; }
  .app[data-bred="ja"] .kort > p,
  .app[data-bred="ja"] .kort textarea { max-width: 80ch; }
  .app[data-bred="ja"] .bubbla { max-width: 58%; }
}

/* --------------------------------------------------- fällbara områden */
.pil { flex: 0 0 auto; display: flex; transition: transform .15s ease; }
.pil.ner { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .pil { transition: none; } }

/* en övning som ännu inte finns, men som ska ligga där */
.kort.kommer { opacity: .5; }

/* ------------------------------------------------------ skalan 1 till 10 */
/* Tio steg i tva rader om fem, sa att varje siffra far en yta man traffar
   med tummen. En rad om tio hade gett 30 piksler breda knappar. */
.skala { display: flex; flex-wrap: wrap; gap: 8px; }
.skala .chip {
  flex: 1 1 calc(20% - 8px);
  min-width: 0; min-height: 46px;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------- bildband i topp */
/* Ett liggande foto taler inte att klippas till en hog remsa: motivet
   forsvinner. Darfor ligger det som ett band i sitt eget format overst,
   och tonar ut i kremen under. */
.bakgrund.band img {
  height: auto; object-fit: contain;
  /* Bildet tones ut i sin egen nederkant, sa det ikke slutter med en kant */
  -webkit-mask-image: linear-gradient(to bottom, #000 52%, rgba(0, 0, 0, .55) 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 52%, rgba(0, 0, 0, .55) 78%, transparent 100%);
}
.bakgrund.band .sloja {
  background: linear-gradient(to bottom,
    rgba(250, 247, 242, 0) 0%,
    rgba(250, 247, 242, 0) 16%,
    rgba(250, 247, 242, .30) 24%,
    rgba(250, 247, 242, .82) 30%,
    var(--krem) 34%,
    var(--krem) 100%);
}

/* ------------------------------------------------------------ mållista */
.malrad {
  display: flex; flex-direction: column; gap: 7px;
  padding: 9px 2px; border-top: 1px solid var(--linje);
}
.malrad:first-of-type { border-top: 0; }
.malrad.arkiverad { opacity: .55; }

.prio {
  flex: 0 0 auto; font-size: 11px; font-weight: 700; letter-spacing: .02em;
  padding: 3px 9px; border-radius: 12px;
  background: var(--krem-djup); color: var(--dampad);
}
.prio.p1 { background: var(--varm-ljus); color: var(--accent-djup); }

.verktyg {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding-left: 26px; margin-top: 2px;
}
.verktyg button {
  border: 1px solid var(--linje); border-radius: 14px;
  background: none; cursor: pointer; font: inherit; font-size: 12px; font-weight: 600;
  color: var(--dampad); padding: 5px 11px; min-height: 30px;
  display: flex; align-items: center;
}
.verktyg button[aria-pressed="true"] {
  background: var(--varm-ljus); color: var(--accent-djup); border-color: var(--varm-ljus);
}
.verktyg button.farlig { color: var(--accent-djup); }

/* Visionen ar rubriken som allt annat hanger under, sa den ar satt som text
   och inte som ett formular. */
.visionsfalt {
  font-family: var(--serif); font-size: 21px; line-height: 1.3;
  min-height: 84px;
}

/* Arkiverat tar en rad, inte ett kort */
.arkivlista {
  display: flex; flex-direction: column; gap: 6px;
  padding: 8px 0 2px; border-top: 1px solid var(--linje);
}
.lankknapp {
  flex: 0 0 auto; border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--accent-djup);
  text-decoration: underline;
}

.prio {
  min-width: 22px; text-align: center;
}

/* Tallene fra tabellayouten, inne i treet. En rad sma tal under rubriken. */
.talrad {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px;
  font-size: 13px; color: var(--dampad);
}
.talrad .prio { font-size: 11px; padding: 2px 8px; }
.prioforst {
  display: flex; flex-direction: column; gap: 6px;
  padding-top: 7px; border-top: 1px solid var(--linje);
}

/* Den mentala tallriksmodellen: bilden og listen under den */
.tallrikslista {
  display: grid; grid-template-columns: 1fr 1fr; gap: 7px 14px; width: 100%;
}
.tallriksprick {
  width: 20px; height: 20px; border-radius: 10px; flex: 0 0 auto;
  border: 1px solid var(--linje); display: flex; align-items: center;
  justify-content: center; font-size: 11px; font-weight: 700; color: #7a5c40;
}

/* ---------------------------------------------------- flodet och chattarna */
.reaktionsrad {
  display: flex; align-items: center; gap: 6px;
  padding-top: 7px; border-top: 1px solid var(--linje);
}
.reaktion {
  display: flex; align-items: center; gap: 4px;
  min-height: 34px; padding: 0 10px;
  border: 1px solid var(--linje); border-radius: 17px;
  background: none; font: inherit; font-size: 15px; cursor: pointer;
  color: var(--dampad);
}
.reaktion.min { border-color: var(--accent); background: var(--varm-ljus); color: var(--accent-djup); }
.kommentarer {
  display: flex; flex-direction: column; gap: 9px;
  padding-top: 9px; border-top: 1px solid var(--linje);
}

.chattlista { display: flex; flex-direction: column; gap: 9px; margin: 12px 0; }
.bubbla {
  display: flex; flex-direction: column; gap: 3px;
  max-width: 82%; align-self: flex-start;
  padding: 11px 14px; border-radius: 18px 18px 18px 6px;
  background: rgba(255, 255, 255, 0.93); border: 1px solid var(--linje);
}
.bubbla.min {
  align-self: flex-end; border-radius: 18px 18px 6px 18px;
  background: var(--varm-ljus); border-color: transparent;
}

/* ------------------------------------------------- betaversionen: smadelar */
/* Datumet pa ett mal. Blir det gammalt syns det, utan att skrika. */
.datumlapp {
  align-self: flex-start; font-size: 12px; font-weight: 600;
  color: var(--dampad); padding: 1px 0;
}
.datumlapp.forbi { color: var(--accent-djup); }
.datumlapp.forbi::after { content: " \00b7 passerat"; font-weight: 400; }

.lankknapp.farlig { color: #a33; }

/* Rundknappen mellan riktning och utveckling */
.rundrad {
  display: flex; align-items: center; gap: 13px; width: 100%;
  margin: 2px 0 4px; padding: 9px 13px 9px 9px;
  border: 1px solid var(--linje); border-radius: 30px;
  background: rgba(255, 255, 255, 0.72); cursor: pointer; font: inherit;
  text-align: left;
}
.rund {
  width: 42px; height: 42px; border-radius: 21px; flex: 0 0 auto;
  background: var(--varm-ljus); display: flex; align-items: center; justify-content: center;
}

/* Bilden i ett inlagg */
.inlaggsbild {
  width: 100%; border-radius: 14px; display: block;
  border: 1px solid var(--linje); background: #fff;
}

/* Polls: staplarna visar hur manga som svarat vad */
.pollval {
  display: flex; flex-direction: column; gap: 7px;
}
.pollrad {
  position: relative; display: flex; align-items: center; gap: 9px;
  min-height: 38px; padding: 0 12px; border: 1px solid var(--linje);
  border-radius: 12px; background: none; font: inherit; cursor: pointer;
  text-align: left; overflow: hidden;
}
.pollrad i {
  position: absolute; inset: 0 auto 0 0; background: var(--varm-ljus);
  z-index: 0; transition: width 0.25s ease;
}
.pollrad span { position: relative; z-index: 1; }
.pollrad.min { border-color: var(--accent-djup); }
.pollrad .antal { color: var(--dampad); font-size: 13px; font-weight: 600; }

/* Mikroreflektionerna, lasbara igen */
.reflektionsrad {
  display: flex; flex-direction: column; gap: 3px;
  padding: 9px 0; border-top: 1px solid var(--linje);
}

/* ---------------------------------------------------------------- testmiljo */
/* Bara pa connected-test. Betaversionen har ingen flik. */
html[data-miljo="test"] .app::before {
  content: "Testversion";
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 6px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--accent-djup);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  pointer-events: none;
}

/* iPhone malar text bla av sig sjalv pa tva satt: Safari ger knappar och
   lankar systemblatt nar fargen inte ar satt, och iOS gor tappbara lankar
   av datum och tider i texten. Bada stangs av har. */
h1, h2, h3 { color: var(--text); }
button, a { color: inherit; -webkit-text-fill-color: currentColor; }
a[x-apple-data-detectors] {
  color: inherit !important;
  text-decoration: none !important;
  -webkit-text-fill-color: inherit !important;
  pointer-events: none;
}