/* ==========================================================================
   DISPUTT DESIGN SYSTEM — the choice of language
   A paper card in the middle of the screen with three round flags, three seconds after the first visit (public/js/i18n/chooser.js).
   (A style sheet of its own: the script that draws the card loads it itself, so a script and an index.html that are not equally new, from the cache, still work.)
   ========================================================================== */

.lang-flag {
  display: inline-block;
  flex: none;
  width: 1.9rem;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 6px 8px 6px 9px / 8px 6px 9px 6px;
  box-shadow: 0 0 0 2px rgb(var(--ink-rgb) / 0.55);
  line-height: 0;
}
.lang-flag { position: relative; }
.lang-flag svg { display: block; width: 100%; height: 100%; }
/* a thin dark rim over the edge of the flag: the white arms of the cross end against the cream card and the edge would otherwise run into it */
.lang-flag::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1.5px rgb(var(--ink-rgb) / 0.8); pointer-events: none; }
.lang-flag--round::after { box-shadow: inset 0 0 0 3px rgb(var(--ink-rgb) / 0.8); }
.lang-flag--round { width: 4.4rem; aspect-ratio: 1; border-radius: 50%; box-shadow: 0 0 0 3px var(--cream), 0 0 0 5px rgb(var(--ink-rgb) / 0.55), 0 5px 0 5px var(--edge); }

/* the dimmed page behind the card (over the sheets, under the connection banner and the toast) */
.lang-back {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgb(var(--shadow-rgb) / 0.78);
  animation: fade var(--dur-2) ease both;
}
.lang-card {
  position: relative;
  width: min(100%, 24rem);
  padding: 2rem 1.2rem 1.5rem;
  border-radius: var(--r-card);
  color: var(--ink);
  text-align: center;
  background: var(--tex-grain), var(--tex-light-soft), var(--cream);
  box-shadow: var(--shadow-3);
  transform: rotate(-1deg);
  animation: pop 0.55s var(--ease-bounce) both;
}
.lang-card h2 { margin: 0; }
.lang-card__peek { position: absolute; top: -2.1rem; right: -0.7rem; }
.lang-card__sub { margin: 0.2rem 0 1.4rem; opacity: 0.8; }
.lang-card__row { display: flex; justify-content: center; gap: 0.7rem; }
.lang-pick {
  --tilt: 0deg;
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.2rem 0.5rem;
  border: 0;
  border-radius: var(--r-input);
  font: 900 1.05rem var(--font-display);
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  transform: rotate(var(--tilt));
  transition: transform var(--dur-1) var(--ease-bounce);
}
.lang-pick:active { transform: scale(0.93) rotate(var(--tilt)); }
.lang-pick.is-now { background: rgb(var(--ink-rgb) / 0.08); }
.lang-pick em {
  position: absolute;
  top: -0.7rem;
  padding: 0.05rem 0.5rem;
  border-radius: 999px;
  font: 700 0.7rem var(--font-text);
  font-style: normal;
  color: var(--ink);
  background: var(--yellow);
  box-shadow: var(--shadow-1);
}

/* the little flag on the start screen (at the right) that opens the card again */
.lang-chip {
  position: fixed;
  top: calc(var(--mantra-total, 0px) + 0.4rem);
  right: 0.5rem;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2rem;
  padding: 0.15rem 0.7rem 0.15rem 0.35rem;
  border: 0;
  border-radius: 999px;
  font: 700 0.8rem var(--font-text);
  color: var(--cream);
  background: rgb(var(--shadow-rgb) / 0.7);
  cursor: pointer;
}
.lang-chip .lang-flag { width: 1.5rem; box-shadow: 0 0 0 1.5px rgb(var(--cream-rgb) / 0.7); }

/* Outside Norwegian a price says «NOK» instead of «kr» (pay/currency.js), a few letters wider: the price on a package gets a little smaller
   so that the name of the package (En weekend, For ét år …) still has its room on one line. */
html[lang='da'] .plan__price,
html[lang='sv'] .plan__price { font-size: 1.3rem; }
html[lang='da'] .plan__was,
html[lang='sv'] .plan__was { font-size: 0.8rem; }

/* «ca. 109 DKK» under the price in NOK (pay/approx.js): a second, small line in the price's own column, so the card is no taller (the name and the
   length already make two lines on the left). */
.plan__price:has(.plan__approx) { display: flex; flex-direction: column; align-items: flex-end; gap: 0.18rem; }
.plan__approx { font-family: var(--font-text); font-size: 0.72rem; font-weight: 700; line-height: 1; opacity: 0.75; letter-spacing: 0; }