/* Språki tap-a-word — shared popup styling for every reading surface.
   Replaces the six per-page copies (#dictionary-popup in lese/lytte/photo/
   podcasts, .books-word-popup, #arb-dict-popup). Warm brand palette: cream
   surface, warm-brown text, gold as the action colour. */

/* ---------------------------------------------------------------- targets */

.sw {
  cursor: pointer;
  border-radius: 3px;
  padding: 0 1px;
  transition: background 0.12s;
}
.sw:hover { background: #ffeec4; }
.sw:active { background: #ffe09a; }

/* Sentence-final punctuation is the tap target for the sentence popup. Only
   armed when the learner has a native language we can translate into — body
   class set by the component. */
.sp { color: inherit; }
body.spraki-tr-active .sp {
  cursor: pointer;
  border-radius: 2px;
  padding: 0 2px;
  transition: background 0.12s;
}
body.spraki-tr-active .sp:hover { background: #ffe4b3; }
.ss--done > .sp { background: rgba(46, 125, 50, 0.14); }

/* ------------------------------------------------------------ word popup */

.swp {
  position: fixed;
  z-index: 2200;
  display: none;
  width: max-content;
  max-width: min(320px, calc(100vw - 16px));
  padding: 12px 14px;
  background: #fff;
  border: 1px solid #e0dbd4;
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.16);
  font-size: 0.92rem;
  line-height: 1.45;
  color: #6d5f4a;
  box-sizing: border-box;
}
.swp *, .swp *::before, .swp *::after { box-sizing: border-box; }

.swp-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f0ece6;
}
.swp-word {
  font-weight: 600;
  font-size: 1.08rem;
  color: #3a3226;
}
.swp-lemma {
  font-size: 0.82rem;
  color: #a2957f;
}
.swp-lemma::before { content: '('; }
.swp-lemma::after  { content: ')'; }

.swp-audio {
  margin-left: auto;
  align-self: center;
  flex: none;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid #ead9b8;
  border-radius: 50%;
  background: #fffaf0;
  color: #b08a3e;
  cursor: pointer;
  font-size: 0.85rem;
  transition: background 0.15s, color 0.15s;
}
.swp-audio:hover { background: #f6ba39; color: #fff; border-color: #f6ba39; }

/* The translation is what most taps are for — it gets the visual weight. */
.swp-tr {
  margin-top: 9px;
  font-size: 1.02rem;
  font-weight: 500;
  color: #3a3226;
}
.swp-tr--loading,
.swp-tr--none {
  font-size: 0.88rem;
  font-weight: 400;
  color: #a2957f;
  display: flex;
  align-items: center;
  gap: 7px;
}

.swp-entry {
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px dashed rgba(201, 161, 106, 0.4);
}
.swp-pos {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #a2957f;
  margin-bottom: 3px;
}
.swp-def {
  font-size: 0.86rem;
  color: #5a4e3c;
}

.swp-actions {
  margin-top: 11px;
  display: flex;
  gap: 8px;
}
.swp-ordbok {
  flex: 1;
  padding: 7px 10px;
  border: 1px solid #ead9b8;
  border-radius: 8px;
  background: #fffaf0;
  color: #8a6d2f;
  font-size: 0.85rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.swp-ordbok:hover { background: #f6ba39; color: #fff; border-color: #f6ba39; }

/* -------------------------------------------------------- sentence popup */

.ssp {
  position: fixed;
  z-index: 2200;
  display: none;
  max-width: min(420px, calc(100vw - 16px));
  padding: 12px 16px;
  background: #fff;
  border: 1px solid #e0dbd4;
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
  font-size: 0.94rem;
  line-height: 1.5;
  color: #1d1d1b;
  box-sizing: border-box;
}
.ssp *, .ssp *::before, .ssp *::after { box-sizing: border-box; }

.ssp-src { font-weight: 500; color: #1d1d1b; margin-bottom: 6px; }
.ssp-tgt {
  color: #6d5f4a;
  font-style: italic;
  font-size: 0.88rem;
  border-top: 1px solid #ead9b8;
  padding-top: 8px;
  margin-top: 6px;
}
.ssp-loading {
  color: #9a8869;
  font-style: italic;
  font-size: 0.88rem;
  border-top: 1px solid #ead9b8;
  padding-top: 8px;
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ssp-bd {
  color: #4d4035;
  font-size: 0.82rem;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(201, 161, 106, 0.45);
}
.ssp-bd-label {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9a8869;
  margin-right: 6px;
}

/* ------------------------------------------------------------------ misc */

.swp-spinner {
  display: inline-block;
  flex: none;
  width: 12px;
  height: 12px;
  border: 2px solid rgba(201, 161, 106, 0.35);
  border-top-color: #c9a16a;
  border-radius: 50%;
  animation: swpSpin 0.7s linear infinite;
}
@keyframes swpSpin { to { transform: rotate(360deg); } }

@media (max-width: 480px) {
  .swp { max-width: calc(100vw - 16px); }
  .ssp { max-width: calc(100vw - 16px); }
}

@media (prefers-reduced-motion: reduce) {
  .sw, .sp, .swp-audio, .swp-ordbok { transition: none; }
  .swp-spinner { animation-duration: 2s; }
}