/* app-feel.language.css — Settings → App preferences → Language (2026-09-28)
 *
 * Pairs with assets/js/app-feel.language.js.
 *
 * Three rules this file keeps:
 *  1. Every in-card selector is scoped under `.tlang-card`, the class the JS
 *     puts on the Settings card once it has mounted. Without the JS — or if it
 *     bails — nothing here applies and the card is exactly the nine buttons it
 *     was. The undo bar is the one exception: it is appended to <body>.
 *  2. Every colour is a theme token. The app has four themes plus dark, and a
 *     hard-coded surface here would look right in exactly one of them.
 *  3. The original `.lang-btn` grid is HIDDEN, never removed — i18n.js, app.js
 *     and profile-preferences.ui2.js all still query it.
 */

.tlang-card .tlang-hidden { display: none !important; }

.tlang-card .tlang {
  --tlang-ease: cubic-bezier(.22, .61, .36, 1);
  margin-top: 10px;
}

/* ── the preview: a mock of the app in the language on offer ─────────────── */

.tlang-card .tlang-prev {
  border: 1px solid var(--border);
  border-radius: 14px;
  /* the flat fill first, so a WebView that cannot parse the tinted gradient
     still gets a surface rather than no background at all */
  background: var(--surface2, var(--surface));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--brand) 7%, transparent) 0%, transparent 62%),
    var(--surface2, var(--surface));
  padding: 10px 12px 12px;
  overflow: hidden;
}

.tlang-card .tlang-prev-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.tlang-card .tlang-prev-flag { font-size: 1.05rem; line-height: 1; }

.tlang-card .tlang-prev-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--t1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tlang-card .tlang-change {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--border2, var(--border));
  border-radius: 999px;
  background: var(--surface);
  color: var(--t2);
  font: 600 0.75rem/1 'DM Sans', system-ui, sans-serif;
  padding: 6px 10px 6px 12px;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.tlang-card .tlang-change:hover { color: var(--t1); border-color: var(--brand); }
.tlang-card .tlang-change:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* the word is "Change" / "Изменить" / "Ändern" — cap it, so a long one cannot
   push the button across the head and squeeze the language name out */
.tlang-card .tlang-change-t {
  max-width: 96px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tlang-card .tlang-chev {
  width: 13px; height: 13px;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .26s var(--tlang-ease);
}
.tlang-card .tlang.is-open .tlang-chev { transform: rotate(180deg); }

/* the mock itself */
.tlang-card .tlang-mock-greet {
  font-size: 1rem;
  font-weight: 700;
  color: var(--t1);
  letter-spacing: -.01em;
  margin-bottom: 8px;
}

.tlang-card .tlang-mock-tiles { display: flex; gap: 8px; margin-bottom: 10px; }

.tlang-card .tlang-tile {
  flex: 1 1 0;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 7px 9px;
}
.tlang-card .tlang-tile-v {
  font: 700 1.0625rem/1.1 'DM Sans', system-ui, sans-serif;
  color: var(--t1);
  font-variant-numeric: tabular-nums;
}
.tlang-card .tlang-tile-l {
  margin-top: 2px;
  font-size: 0.625rem;
  line-height: 1.25;
  color: var(--t3);
  /* "Stunden Schlaf", "heures de sommeil" — wrap rather than clip */
  overflow-wrap: anywhere;
}

.tlang-card .tlang-mock-cta {
  display: inline-block;
  max-width: 100%;
  background: var(--brand);
  color: #fff;
  border-radius: 999px;
  padding: 7px 14px;
  font: 600 0.75rem/1.2 'DM Sans', system-ui, sans-serif;
  overflow-wrap: anywhere;
}

/* the cross-fade when the previewed language changes */
.tlang-card .tlang-mock {
  transition: opacity .13s linear, transform .13s var(--tlang-ease);
}
.tlang-card .tlang-mock.tlang-out { opacity: 0; transform: translateY(-4px); }
.tlang-card .tlang-mock.tlang-in  { animation: tlang-mock-in .22s var(--tlang-ease) both; }

@keyframes tlang-mock-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* ── the list ────────────────────────────────────────────────────────────── */

.tlang-card .tlang-panel {
  height: 0;
  overflow: hidden;
  transition: height .28s var(--tlang-ease);
}

.tlang-card .tlang-list { padding-top: 8px; }

.tlang-card .tlang-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 50px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  padding: 7px 10px 7px 7px;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font-family: inherit;
  transition: background .15s, border-color .15s;
}
.tlang-card .tlang-row + .tlang-row { margin-top: 2px; }
.tlang-card .tlang-row:hover { background: var(--surface2, var(--bg1)); }
.tlang-card .tlang-row:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

.tlang-card .tlang-row.is-on {
  background: var(--brand-l);
  border-color: var(--brand);
  border-color: color-mix(in srgb, var(--brand) 38%, transparent);
}

/* the accent that grows down the selected row */
.tlang-card .tlang-row::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 3px; height: 0;
  border-radius: 0 3px 3px 0;
  background: var(--brand);
  transform: translateY(-50%);
  transition: height .24s var(--tlang-ease);
}
.tlang-card .tlang-row.is-on::before { height: 62%; }

.tlang-card .tlang-flag {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  line-height: 1;
  border-radius: 10px;
  background: var(--surface2, var(--bg1));
  border: 1px solid var(--border);
}
.tlang-card .tlang-row.is-on .tlang-flag { background: var(--surface); }

.tlang-card .tlang-txt { flex: 1 1 auto; min-width: 0; }

.tlang-card .tlang-native {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--t1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tlang-card .tlang-sub {
  display: block;
  margin-top: 1px;
  font-size: 0.6875rem;
  color: var(--t3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tlang-card .tlang-chip {
  flex: 0 0 auto;
  font: 600 0.625rem/1 'DM Sans', system-ui, sans-serif;
  letter-spacing: .02em;
  color: var(--t3);
  background: var(--surface2, var(--bg1));
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 8px;
}

.tlang-card .tlang-check {
  flex: 0 0 auto;
  width: 20px; height: 20px;
  opacity: 0;
  transform: scale(.7);
  transition: opacity .16s linear, transform .2s var(--tlang-ease);
}
.tlang-card .tlang-check circle { fill: var(--brand); stroke: none; }
.tlang-card .tlang-check path {
  fill: none; stroke: #fff; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 14; stroke-dashoffset: 14;
}
.tlang-card .tlang-row.is-on .tlang-check { opacity: 1; transform: none; }
.tlang-card .tlang-row.is-on .tlang-check path {
  animation: tlang-draw .3s .06s var(--tlang-ease) forwards;
}

@keyframes tlang-draw { to { stroke-dashoffset: 0; } }

/* rows arrive in sequence when the panel opens */
.tlang-card .tlang.is-open .tlang-row {
  animation: tlang-row-in .3s var(--tlang-ease) both;
  animation-delay: calc(var(--tlang-i, 0) * 22ms);
}

@keyframes tlang-row-in {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: none; }
}

/* ── the undo bar ────────────────────────────────────────────────────────────
   Appended to <body>, so it is the one thing here outside .tlang-card. It sits
   where the app's own toast sits and borrows its inverted colours
   (.toast in core.cold1.css: background var(--t1), text var(--surface)). */

.tlang-undo {
  position: fixed;
  left: 12px; right: 12px;
  bottom: calc(76px + max(var(--tl-safe-bottom, 0px), env(safe-area-inset-bottom, 0px)));
  z-index: 10050;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 460px;
  margin: 0 auto;
  padding: 10px 10px 10px 14px;
  border-radius: 14px;
  background: var(--t1);
  color: var(--bg);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .22s linear, transform .26s var(--tlang-ease, cubic-bezier(.22, .61, .36, 1));
  overflow: hidden;
}
.tlang-undo.is-up { opacity: 1; transform: none; }

.tlang-undo-lead {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.tlang-undo-flag { font-size: 1rem; line-height: 1; }
.tlang-undo-name {
  font: 600 0.8125rem/1.2 'DM Sans', system-ui, sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tlang-undo-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  border-radius: 9px;
  background: var(--bg);
  background: color-mix(in srgb, var(--bg) 22%, transparent);
  color: inherit;
  font: 600 0.75rem/1 'DM Sans', system-ui, sans-serif;
  padding: 7px 11px;
  cursor: pointer;
}
.tlang-undo-btn:hover { background: color-mix(in srgb, var(--bg) 34%, transparent); }
.tlang-undo-btn:focus-visible { outline: 2px solid var(--bg); outline-offset: 2px; }
.tlang-undo-ico { font-size: 0.875rem; line-height: 1; }

/* the seven seconds the offer lasts, drawn */
.tlang-undo-bar {
  position: absolute;
  left: 0; bottom: 0; height: 2px;
  width: 100%;
  transform-origin: left center;
  background: var(--bg);
  opacity: .45;
}
.tlang-undo.is-up .tlang-undo-bar { animation: tlang-undo-run 7s linear forwards; }

@keyframes tlang-undo-run { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* ── narrow phones ───────────────────────────────────────────────────────── */

@media (max-width: 360px) {
  .tlang-card .tlang-mock-tiles { gap: 6px; }
  .tlang-card .tlang-tile { padding: 6px 7px; }
  .tlang-card .tlang-flag { width: 30px; height: 30px; font-size: 1rem; }
  .tlang-card .tlang-native { font-size: 0.8125rem; }
  .tlang-card .tlang-change-t { max-width: 72px; }
}

/* ── motion off ──────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .tlang-card .tlang-panel,
  .tlang-card .tlang-chev,
  .tlang-card .tlang-check,
  .tlang-card .tlang-row::before,
  .tlang-card .tlang-mock,
  .tlang-undo { transition: none !important; }

  .tlang-card .tlang.is-open .tlang-row,
  .tlang-card .tlang-mock.tlang-in,
  .tlang-card .tlang-row.is-on .tlang-check path,
  .tlang-undo.is-up .tlang-undo-bar { animation: none !important; }

  .tlang-card .tlang-check path { stroke-dashoffset: 0; }
  .tlang-undo { opacity: 1; transform: none; }
}