/* SENTENCE language picker "keys" (האות). Four typewriter keys, drawn without a single line:
   depth comes only from a slightly darker paper fill and soft shadows. The current key is latched down
   (1px lower, its shadow sunk) with its letter in red. Only transform, opacity and colour ever move.
   Every rule is scoped to html[data-langpick="keys"]; every class starts with lk-. */

html[data-langpick="keys"] .lk {
  --lk-hi: #F2F1EC;
  --lk-lo: #EEEDE8;
  --lk-raised: 0 1px 1.5px rgba(20, 20, 20, 0.12), 0 3px 6px -2px rgba(20, 20, 20, 0.16),
    inset 0 1px 1.5px rgba(255, 255, 255, 0.9), inset 0 -2px 2.5px rgba(20, 20, 20, 0.06);
  --lk-sunk: 0 1px 1.5px rgba(255, 255, 255, 0.75), inset 0 1.5px 3px rgba(20, 20, 20, 0.17),
    inset 0 0 1.5px rgba(20, 20, 20, 0.07);
  position: relative;
  display: flex;
  align-items: center;
  font-family: var(--text);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  word-spacing: 0;
}

/* ---------- a key: a 44px tall hit area around a small cap ---------- */
html[data-langpick="keys"] .lk-row { display: flex; align-items: center; }
html[data-langpick="keys"] .lk-key {
  position: relative;
  display: grid;
  place-items: center;
  width: 36px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--graphite);
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
  transition: color 200ms ease;
}
html[data-langpick="keys"] .lk-cap {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(180deg, var(--lk-hi), var(--lk-lo));
  transition: transform 140ms var(--ease-out);
}
/* two shadow layers, cross-faded: raised at rest, sunk when latched or pressed */
html[data-langpick="keys"] .lk-cap::before,
html[data-langpick="keys"] .lk-cap::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  transition: opacity 140ms var(--ease-out);
}
html[data-langpick="keys"] .lk-cap::before { box-shadow: var(--lk-raised); }
html[data-langpick="keys"] .lk-cap::after { box-shadow: var(--lk-sunk); opacity: 0; }
html[data-langpick="keys"] .lk-glyph {
  position: relative;
  z-index: 1;
  font-size: 15px;
  line-height: 1;
  /* the cap's optical centre sits a hair above its box centre */
  transform: translateY(-0.5px);
}

/* the current language: latched down, letter in red */
html[data-langpick="keys"] .lk-key[aria-pressed="true"] { color: var(--red); }
html[data-langpick="keys"] .lk-key[aria-pressed="true"] .lk-cap { transform: translateY(1px); }
html[data-langpick="keys"] .lk-key[aria-pressed="true"] .lk-cap::before { opacity: 0; }
html[data-langpick="keys"] .lk-key[aria-pressed="true"] .lk-cap::after { opacity: 1; }

/* the strike: down fast, back up a touch slower */
html[data-langpick="keys"] .lk-key:active .lk-cap { transform: translateY(2px) scale(0.96); transition-duration: 100ms; }
html[data-langpick="keys"] .lk-key:active .lk-cap::before { opacity: 0; transition-duration: 100ms; }
html[data-langpick="keys"] .lk-key:active .lk-cap::after { opacity: 1; transition-duration: 100ms; }
html[data-langpick="keys"] .lk-key:not([aria-pressed="true"]):active { color: var(--ink); }

@media (hover: hover) and (pointer: fine) {
  html[data-langpick="keys"] .lk-row .lk-key:not([aria-pressed="true"]):hover { color: var(--ink); }
}

/* keyboard focus: the ring hugs the cap, not the invisible hit area */
html[data-langpick="keys"] .lk-key:focus { outline: none; }
html[data-langpick="keys"] .lk-key:focus-visible .lk-cap { outline: 2px solid var(--red); outline-offset: 2px; }

/* ---------- the name under a key: mouse hover (after a short wait) and keyboard focus ---------- */
html[data-langpick="keys"] .lk-tip {
  position: absolute;
  top: calc(100% - 3px);
  inset-inline-start: 50%;
  z-index: 2;
  padding: 3px 6px 4px;
  border-radius: 6px;
  background: var(--paper);
  color: var(--graphite);
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -2px);
  transition: opacity 100ms ease, transform 100ms ease;
}
html[dir="rtl"][data-langpick="keys"] .lk-tip { transform: translate(50%, -2px); }
html[data-langpick="keys"] .lk-key:focus-visible .lk-tip { opacity: 1; transform: translate(-50%, 0); transition-duration: 150ms; }
html[dir="rtl"][data-langpick="keys"] .lk-key:focus-visible .lk-tip { transform: translate(50%, 0); }
@media (hover: hover) and (pointer: fine) {
  html[data-langpick="keys"] .lk-warm .lk-key:hover .lk-tip { opacity: 1; transform: translate(-50%, 0); transition-duration: 150ms; }
  html[dir="rtl"][data-langpick="keys"] .lk-warm .lk-key:hover .lk-tip { transform: translate(50%, 0); }
}
html[data-langpick="keys"] .lk-trigger[aria-expanded="true"] .lk-tip { opacity: 0; }

/* ---------- compact: one key (a small stack), and a tray of four under it ---------- */
html[data-langpick="keys"] .lk-trigger { display: none; width: 44px; color: var(--red); }
html[data-langpick="keys"] .lk-compact .lk-trigger { display: grid; }
html[data-langpick="keys"] .lk-trigger > .lk-back,
html[data-langpick="keys"] .lk-trigger > .lk-cap { grid-area: 1 / 1; }
html[data-langpick="keys"] .lk-back {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--lk-lo);
  box-shadow: 0 1px 1.5px rgba(20, 20, 20, 0.1), 0 2px 4px -2px rgba(20, 20, 20, 0.14);
  transform: translate(-3px, -3px);
  transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out);
}
html[dir="rtl"][data-langpick="keys"] .lk-back { transform: translate(3px, -3px); }
/* open: the trigger latches down and the key behind it is dealt out */
html[data-langpick="keys"] .lk-trigger[aria-expanded="true"] .lk-cap { transform: translateY(1px); }
html[data-langpick="keys"] .lk-trigger[aria-expanded="true"] .lk-cap::before { opacity: 0; }
html[data-langpick="keys"] .lk-trigger[aria-expanded="true"] .lk-cap::after { opacity: 1; }
html[data-langpick="keys"] .lk-trigger[aria-expanded="true"] .lk-back,
html[dir="rtl"][data-langpick="keys"] .lk-trigger[aria-expanded="true"] .lk-back { opacity: 0; transform: none; }

html[data-langpick="keys"] .lk-compact .lk-row {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-end: -4px;
  z-index: 3;
  padding: 4px;
  border-radius: 14px;
  background: var(--paper);
  box-shadow: 0 14px 34px -12px rgba(20, 20, 20, 0.26), 0 2px 8px rgba(20, 20, 20, 0.07);
  transform-origin: top right;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-4px) scale(0.97);
  /* exit: quicker than the entry */
  transition: opacity 140ms var(--ease-out), transform 140ms var(--ease-out), visibility 0s linear 140ms;
}
html[dir="rtl"][data-langpick="keys"] .lk-compact .lk-row { transform-origin: top left; }
html[data-langpick="keys"] .lk-compact.lk-open .lk-row {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out), visibility 0s;
}
html[data-langpick="keys"] .lk-compact .lk-row .lk-key {
  width: 44px;
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity 120ms var(--ease-out), transform 120ms var(--ease-out), color 200ms ease;
}
/* the keys are typed out one after another, 30ms apart */
html[data-langpick="keys"] .lk-compact.lk-open .lk-row .lk-key {
  opacity: 1;
  transform: none;
  transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out), color 200ms ease;
  transition-delay: calc(var(--i, 0) * 30ms), calc(var(--i, 0) * 30ms), 0ms;
}
html[data-langpick="keys"] .lk-compact .lk-row .lk-cap { width: 34px; height: 34px; border-radius: 9px; }
html[data-langpick="keys"] .lk-compact .lk-row .lk-glyph { font-size: 16px; }
/* in the tray, a key's name hangs just below the tray, on its own small paper */
html[data-langpick="keys"] .lk-compact .lk-row .lk-tip { top: calc(100% + 6px); box-shadow: 0 6px 16px -8px rgba(20, 20, 20, 0.3); }

/* layout changes (resize between inline and compact) happen without motion */
html[data-langpick="keys"] .lk-still,
html[data-langpick="keys"] .lk-still *,
html[data-langpick="keys"] .lk-still *::before,
html[data-langpick="keys"] .lk-still *::after { transition: none !important; }

/* ---------- reduced motion: nothing travels; states change at once or with a short fade ---------- */
@media (prefers-reduced-motion: reduce) {
  html[data-langpick="keys"] .lk-cap,
  html[data-langpick="keys"] .lk-cap::before,
  html[data-langpick="keys"] .lk-cap::after,
  html[data-langpick="keys"] .lk-back { transition: none; }
  html[data-langpick="keys"] .lk-key:active .lk-cap { transform: none; }
  html[data-langpick="keys"] .lk-key[aria-pressed="true"]:active .lk-cap { transform: translateY(1px); }
  html[data-langpick="keys"] .lk-tip,
  html[dir="rtl"][data-langpick="keys"] .lk-tip,
  html[data-langpick="keys"] .lk-key:focus-visible .lk-tip,
  html[dir="rtl"][data-langpick="keys"] .lk-key:focus-visible .lk-tip { transform: translate(-50%, 0); transition: opacity 120ms ease; }
  html[dir="rtl"][data-langpick="keys"] .lk-tip,
  html[dir="rtl"][data-langpick="keys"] .lk-key:focus-visible .lk-tip { transform: translate(50%, 0); }
  html[data-langpick="keys"] .lk-compact .lk-row,
  html[dir="rtl"][data-langpick="keys"] .lk-compact .lk-row { transform: none; transition: opacity 120ms ease, visibility 0s linear 120ms; }
  html[data-langpick="keys"] .lk-compact.lk-open .lk-row { transition: opacity 120ms ease, visibility 0s; }
  html[data-langpick="keys"] .lk-compact .lk-row .lk-key,
  html[data-langpick="keys"] .lk-compact.lk-open .lk-row .lk-key { opacity: 1; transform: none; transition: color 120ms ease; transition-delay: 0ms; }
}
@media (prefers-reduced-motion: reduce) and (hover: hover) and (pointer: fine) {
  html[data-langpick="keys"] .lk-warm .lk-key:hover .lk-tip { transform: translate(-50%, 0); }
  html[dir="rtl"][data-langpick="keys"] .lk-warm .lk-key:hover .lk-tip { transform: translate(50%, 0); }
}

/* the latched key stays recognisable in forced colours, where colour and shadow are removed */
@media (forced-colors: active) { html[data-langpick="keys"] .lk-key[aria-pressed="true"] .lk-glyph { text-decoration: underline 2px; text-underline-offset: 4px; } }
/* the language name under a key can be hovered (WCAG 1.4.13) */
@media (hover: hover) and (pointer: fine) { html[data-langpick="keys"] .lk-warm .lk-key:hover .lk-tip { pointer-events: auto; } }