/* NetMagen language switcher (design B). Shared by the Astro site, the blog and the portal.
 * Logical properties only; every token has a fallback so a shell without the Daylight
 * tokens still renders. Bump ASSET_REV in src/config/locale-switcher.ts and
 * Blog\LocaleSwitcher on ANY change (one-year cache). */

.lsw {
  position: relative;
  display: inline-block;
  font-family: var(--font-sans, 'IBM Plex Sans', 'IBM Plex Sans Hebrew', 'IBM Plex Sans Arabic', system-ui, sans-serif);
  color: var(--ink, #101F33);
  font-size: 15px;
  line-height: 1.35;
}
.lsw [hidden] { display: none !important; }

/* ---- trigger ---- */
.lsw-trigger {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-block-size: 36px;
  box-sizing: border-box;
  padding-block: 6px;
  padding-inline: 9px 11px;
  border: 1px solid var(--line, #D8E1E8);
  border-radius: var(--radius-pill, 999px);
  background: var(--card, #FFFFFF);
  color: var(--ink, #101F33);
  font-size: 14px;
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
.lsw-trigger::-webkit-details-marker { display: none; }
.lsw-trigger::marker { content: ''; }
.lsw-trigger:hover { border-color: var(--brand, #0B5CAB); }
.lsw-trigger:focus-visible { outline: 2px solid var(--brand, #0B5CAB); outline-offset: 2px; }
.lsw[open] > .lsw-trigger {
  border-color: var(--brand, #0B5CAB);
  box-shadow: 0 0 0 3px var(--tint-brand, #E7F0FA);
}
.lsw-globe {
  inline-size: 17px;
  block-size: 17px;
  flex: none;
  color: var(--brand, #0B5CAB);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}
.lsw-code,
.lsw-code2 {
  font-family: var(--font-mono, 'IBM Plex Mono', 'IBM Plex Sans Hebrew', 'IBM Plex Sans Arabic', ui-monospace, monospace);
  font-weight: 500;
  letter-spacing: 0.06em;
}
:lang(ar) .lsw-code,
:lang(ar) .lsw-code2,
:lang(ar) .lsw-label,
:lang(ar) .lsw-chip {
  letter-spacing: 0;
}
:lang(ar) .lsw-code,
:lang(ar) .lsw-code2 {
  font-family: 'IBM Plex Mono', 'IBM Plex Sans Arabic', ui-monospace, monospace;
}

/* ---- scrim (a pseudo-element of the open details) ---- */
.lsw[open]::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  background: rgb(16 31 51 / .28);
}
/* A backdrop-filter / filter ancestor becomes the containing block of fixed
   descendants and would trap the panel inside the header bar. */
:is(header, .hdr):has(.lsw[open]) {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
/* Separate rule on purpose: a browser without :has drops a whole selector list. */
html.lsw-open :is(header, .hdr) {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* ---- panel: desktop, centred palette ---- */
.lsw-panel {
  position: fixed;
  z-index: 2;
  inset-block-start: 4.5rem;
  inset-inline: 0;
  margin-inline: auto;
  inline-size: min(440px, 100vw - 2rem);
  box-sizing: border-box;
  max-block-size: calc(100vh - 6rem);
  max-block-size: calc(100dvh - 6rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--card, #FFFFFF);
  color: var(--ink, #101F33);
  border-radius: 16px;
  box-shadow: 0 24px 60px -20px rgb(16 31 51 / .45);
  text-align: start;
}
@media (prefers-reduced-motion: no-preference) {
  .lsw[open] > .lsw-panel { animation: lsw-in 180ms cubic-bezier(0.22, 1, 0.36, 1); }
  @keyframes lsw-in {
    from { opacity: 0; translate: 0 -8px; }
    to { opacity: 1; translate: 0 0; }
  }
}

/* ---- search ---- */
.lsw-search {
  position: sticky;
  inset-block-start: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: var(--card, #FFFFFF);
  border-block-end: 1px solid var(--line, #D8E1E8);
  color: var(--ink-2, #4E6377);
}
.lsw-mag {
  inline-size: 17px;
  block-size: 17px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}
.lsw-input {
  flex: 1;
  min-inline-size: 0;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  color: var(--ink, #101F33);
  font: inherit;
  font-size: 16px; /* 16px stops iOS from zooming the page on focus */
  caret-color: var(--brand, #0B5CAB);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.lsw-input:focus,
.lsw-input:focus-visible { outline: none; box-shadow: none; }
.lsw-input::placeholder { color: var(--ink-2, #4E6377); opacity: 1; }
.lsw-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.lsw-search:focus-within { box-shadow: inset 0 -2px 0 var(--brand, #0B5CAB); }

/* ---- sections ---- */
.lsw-label {
  margin: 0;
  padding: 10px 16px 4px;
  font-family: var(--font-mono, 'IBM Plex Mono', 'IBM Plex Sans Hebrew', 'IBM Plex Sans Arabic', ui-monospace, monospace);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-2, #4E6377);
}
.lsw-label:lang(ar) {
  font-family: 'IBM Plex Sans Arabic', var(--font-sans, system-ui, sans-serif);
  font-size: 12.5px;
  font-weight: 500;
  text-transform: none;
}
.lsw-list {
  list-style: none;
  margin: 0;
  padding: 0 0 6px;
}
.lsw-list li { margin: 0; padding: 0; }
.lsw-empty {
  margin: 0;
  padding: 18px 16px 22px;
  color: var(--ink-2, #4E6377);
  font-size: 14px;
}

/* ---- rows ---- */
.lsw-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-block-size: 44px;
  box-sizing: border-box;
  padding-block: 9px;
  padding-inline: 16px;
  color: var(--ink, #101F33);
  font-size: 15px;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.lsw-native {
  min-inline-size: 104px;
  font-weight: 600;
}
.lsw-native:lang(ar) { font-family: 'IBM Plex Sans Arabic', var(--font-sans, system-ui, sans-serif); }
.lsw-native:lang(he) { font-family: 'IBM Plex Sans Hebrew', var(--font-sans, system-ui, sans-serif); }
/* Hebrew and Arabic never take tracking, whatever the row inherits. */
.lsw-row[lang='he'], .lsw-row[lang='ar'],
.lsw-native:lang(he), .lsw-native:lang(ar),
.lsw-name:lang(he), .lsw-name:lang(ar),
.lsw-cur:lang(he), .lsw-cur:lang(ar) { letter-spacing: 0; }
.lsw-name {
  color: var(--ink-2, #4E6377);
  font-size: 14px;
}
.lsw-code2 {
  /* DOM order is code, then the current marker; visually the marker precedes the code
     (mockup). Text-only spans, nothing focusable, so no focus-order impact. */
  order: 1;
  margin-inline-start: auto;
  font-size: 11px;
  color: var(--ink-2, #4E6377);
}
.lsw-cur {
  color: var(--brand, #0B5CAB);
  font-size: 14px;
  font-weight: 600;
}
.lsw-row[aria-current='true'] .lsw-name { display: none; }
.lsw-chip {
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--accent, #0E7C72);
  color: #FFFFFF;
  font-family: var(--font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.lsw-chip:lang(ar) {
  font-family: 'IBM Plex Sans Arabic', var(--font-sans, system-ui, sans-serif);
  font-size: 11px;
}
.lsw-row:hover,
.lsw-row:focus-visible,
.lsw-row-sug {
  background: var(--tint-brand, #E7F0FA);
  box-shadow: inset 3px 0 0 var(--brand, #0B5CAB);
}
[dir='rtl'] .lsw-row:hover,
[dir='rtl'] .lsw-row:focus-visible,
[dir='rtl'] .lsw-row-sug {
  box-shadow: inset -3px 0 0 var(--brand, #0B5CAB);
}
.lsw-row:focus-visible { outline: 2px solid var(--brand, #0B5CAB); outline-offset: -2px; }

/* ---- phone: bottom sheet, the globe is a round icon button ---- */
@media (max-width: 40rem) {
  .lsw-trigger {
    inline-size: 40px;
    block-size: 40px;
    min-block-size: 40px;
    padding: 0;
    justify-content: center;
    border-color: var(--brand, #0B5CAB);
    box-shadow: 0 0 0 3px var(--tint-brand, #E7F0FA);
  }
  .lsw-globe { inline-size: 19px; block-size: 19px; }
  .lsw-code { display: none; }
  .lsw-panel {
    inset-block: auto 0;
    inset-inline: 0;
    margin-inline: 0;
    inline-size: auto;
    max-block-size: 85vh;
    max-block-size: 85dvh;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -18px 40px -16px rgb(16 31 51 / .35);
    padding-block-end: env(safe-area-inset-bottom, 0px);
  }
  .lsw-panel::before {
    content: '';
    display: block;
    inline-size: 40px;
    block-size: 4px;
    margin: 9px auto 4px;
    border-radius: 4px;
    background: var(--line, #D8E1E8);
  }
  .lsw-search { margin: 0; padding: 11px 16px; }
  .lsw-row { min-block-size: 48px; padding-block: 12px; padding-inline: 18px; font-size: 16px; }
  .lsw-name, .lsw-cur { font-size: 15px; }
  @media (prefers-reduced-motion: no-preference) {
    .lsw[open] > .lsw-panel { animation-name: lsw-up; }
    @keyframes lsw-up {
      from { translate: 0 24px; opacity: 0; }
      to { translate: 0 0; opacity: 1; }
    }
  }
}

/* ---- header bar placement (Astro header; the blog/portal shells set their own) ---- */
.hdr-inner > .lsw { flex: none; display: flex; }

/* ---- toast after a persisted switch ---- */
.lsw-toast {
  position: fixed;
  z-index: 200;
  inset-block-start: 14px;
  inset-inline-end: 18px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  box-sizing: border-box;
  inline-size: min(420px, 100vw - 2rem);
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--ink, #101F33);
  color: #FFFFFF;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 14px;
  line-height: 1.4;
  box-shadow: 0 18px 40px -16px rgb(16 31 51 / .5);
}
.lsw-toast-ic {
  flex: none;
  inline-size: 20px;
  block-size: 20px;
  margin-block-start: 1px;
  border-radius: 999px;
  background: var(--ok, #1D7A4C);
  position: relative;
}
.lsw-toast-ic::after {
  content: '✓';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 12px;
  line-height: 1;
}
.lsw-toast-msg { flex: 1; min-inline-size: 0; }
.lsw-toast-x {
  flex: none;
  margin: -6px;
  inline-size: 32px;
  block-size: 32px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--on-navy-2, #A8B8C8);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.lsw-toast-x::before { content: '×'; }
.lsw-toast-x:hover { color: #FFFFFF; }
.lsw-toast-x:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 1px; }

/* ---- the open palette sits above the cookie banner ----
   consent.js gives .nm-consent z-index 70, above the header's stacking context (50), so on a short
   screen the banner covered the lower rows of the nine-language list for a first-time visitor.
   While the palette is open the banner drops under it; it comes back when the palette closes. */
html.lsw-open .nm-consent { z-index: 1; }