/* SENTENCE language picker "keys" (האות): one letter per language (א A É Ñ), set like the menu beside it,
   in the logo's typeface. No caps, fills or shadows: the letters are quiet, and the current language carries
   the red pilcrow, the same mark that shows the current section in the menu. Only opacity, transform and colour move.
   Every rule is scoped to html[data-langpick="keys"]; every class starts with lk-. */

html[data-langpick="keys"] .lk {
  position: relative;
  display: flex;
  align-items: center;
  font-family: var(--text);
  font-weight: 500;
  font-size: clamp(1rem, 1.35vw, 1.125rem);
  line-height: 1;
  letter-spacing: 0;
  word-spacing: 0;
}

/* ---------- a key: a 44px tall hit area around one letter ---------- */
html[data-langpick="keys"] .lk-row { display: flex; align-items: center; }
html[data-langpick="keys"] .lk-key {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 30px;
  height: 44px;
  margin: 0;
  padding: 0 5px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--gray);
  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 160ms ease;
}
html[data-langpick="keys"] .lk-cap {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  line-height: 1;
  transition: transform 140ms var(--ease-out);
}
/* the pilcrow keeps its place on every letter, so nothing shifts when the language changes */
html[data-langpick="keys"] .lk-cap::before {
  content: "¶";
  display: inline-block;
  font-family: var(--mono);
  font-weight: 500;
  font-size: .56em;
  vertical-align: .6em;
  margin-inline-end: .2em;
  color: var(--red);
  opacity: 0;
  transition: opacity 160ms ease;
}
html[data-langpick="keys"] .lk-glyph { display: inline-block; }
html[data-langpick="keys"] .lk-back { display: none; }

/* the current language: ink, with the pilcrow */
html[data-langpick="keys"] .lk-key[aria-pressed="true"],
html[data-langpick="keys"] .lk-trigger { color: var(--ink); }
html[data-langpick="keys"] .lk-key[aria-pressed="true"] .lk-cap::before,
html[data-langpick="keys"] .lk-trigger .lk-cap::before { opacity: 1; }

/* a press answers at once */
html[data-langpick="keys"] .lk-key:active .lk-cap { transform: scale(0.94); 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 letter, 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: 5px; border-radius: 3px; }

/* ---------- 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: only the current letter, and a small paper tray of the four under it ---------- */
html[data-langpick="keys"] .lk-trigger { display: none; min-width: 44px; }
html[data-langpick="keys"] .lk-compact .lk-trigger { display: grid; }

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;
}
/* 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 { transition: none; }
  html[data-langpick="keys"] .lk-key:active .lk-cap { transform: none; }
  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 current language stays recognisable in forced colours, where colour is removed */
@media (forced-colors: active) {
  html[data-langpick="keys"] .lk-key[aria-pressed="true"] .lk-glyph { text-decoration: underline 2px; text-underline-offset: 4px; }
  html[data-langpick="keys"] .lk-cap::before { color: CanvasText; }
}
/* 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; } }