/* FluentPlex's language switcher in the app menu (shared/_language_switch; design "FluentPlex Language Switcher").
   It's FluentPlex's control, not the language's: neutral tiles on the menu's dark, FluentPlex's jade for the current
   language and its lavender for focus, each language's name in its own script. The languages themselves (/languages,
   the home page) are cards: languages/_cards, styled in fluentplex-home.css. */
.fpswitch {
  --fp-switch-jade: #3FC2A8; --fp-switch-focus: #9B95FF; --fp-switch-serif: "Newsreader", Georgia, serif;
  --fp-switch-raised: rgba(255, 255, 255, .07); --fp-switch-hover: rgba(255, 255, 255, .11); --fp-switch-line: rgba(255, 255, 255, .16);
  --fp-switch-muted: #C9CBDD;
  position: relative; display: flex; flex-direction: column; gap: 6px; color: var(--text-on-dark);
}
.fpswitch :focus-visible { outline: 2px solid var(--fp-switch-focus); outline-offset: 2px; }
.fpswitch__trigger {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 10px;
  background: var(--fp-switch-raised); border: 1px solid var(--fp-switch-line); border-radius: 14px; color: inherit; text-align: start; cursor: pointer;
}
.fpswitch__trigger:hover { background: var(--fp-switch-hover); }
.fpswitch__trigger[aria-expanded="true"] { background: var(--fp-switch-hover); border-color: var(--fp-switch-jade); }
.fpswitch__trigger:focus-visible { outline-width: 3px; }
.fpswitch__tile {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 36px; height: 36px;
  background: var(--fp-switch-raised); border: 1.5px solid var(--fp-switch-line); border-radius: 10px; font-size: 22px; line-height: 1;
}
.fpswitch__tile--sm { width: 30px; height: 30px; border-radius: 8px; font-size: 17px; }
.fpswitch__tile--current { border-color: var(--fp-switch-jade); }
.fpswitch__trigger-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.fpswitch__kicker { font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--fp-switch-muted); }
.fpswitch__native { align-self: flex-start; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 20px; line-height: 1.5; }
.fpswitch__chevron::before { content: "▾"; font-size: 12px; color: var(--fp-switch-muted); }
.fpswitch__trigger[aria-expanded="true"] .fpswitch__chevron::before { content: "▴"; }

.fpswitch__panel { display: flex; flex-direction: column; gap: 2px; padding: 6px; background: rgba(0, 0, 0, .18); border: 1px solid var(--fp-switch-line); border-radius: 14px; }
.fpswitch__panel[hidden] { display: none; }
.fpswitch__head { padding: 8px 10px 4px; font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--fp-switch-muted); }
.fpswitch__find {
  display: flex; align-items: center; gap: 8px; margin: 4px 4px 6px; padding: 0 10px; min-height: 44px;
  background: rgba(0, 0, 0, .2); border: 1px solid var(--fp-switch-line); border-radius: 10px; color: var(--fp-switch-muted);
}
.fpswitch__find svg { width: 15px; height: 15px; flex-shrink: 0; }
.fpswitch__find input { flex: 1; min-width: 0; border: none; background: none; color: var(--text-on-dark); font: inherit; font-size: 14px; outline: none; }
.fpswitch__find:focus-within { outline: 2px solid var(--fp-switch-focus); outline-offset: 1px; }
.fpswitch__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.fpswitch__list--long { max-height: 252px; overflow-y: auto; }
.fpswitch__list li[hidden] { display: none; }
.fpswitch__row, .fpswitch__add {
  display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 10px; border-radius: 10px;
  color: var(--text-on-dark); text-decoration: none;
}
.fpswitch__row:hover, .fpswitch__add:hover { background: var(--fp-switch-hover); color: var(--text-on-dark); text-decoration: none; }
.fpswitch__row:focus-visible, .fpswitch__add:focus-visible { outline-offset: -2px; }
.fpswitch__row[aria-current="page"] { background: var(--fp-switch-raised); }
.fpswitch__names { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fpswitch__english { font-size: 15px; font-weight: 500; }
.fpswitch__row[aria-current="page"] .fpswitch__english { font-weight: 700; }
.fpswitch__own { align-self: flex-start; font-size: 16px; line-height: 1.6; color: var(--fp-switch-muted); }
.fpswitch__current { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--fp-switch-jade); }
.fpswitch__meta { font-size: 12px; color: var(--fp-switch-muted); white-space: nowrap; }
.fpswitch__add { margin-top: 4px; border-top: 1px solid var(--fp-switch-line); border-radius: 0 0 10px 10px; font-size: 15px; font-weight: 600; }
.fpswitch__plus {
  display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex-shrink: 0;
  border: 1.5px dashed var(--fp-switch-line); border-radius: 8px; font-size: 18px; color: var(--fp-switch-jade);
}

/* The collapsed menu: the current language's glyph; its list is a flyout beside the menu (placed by fp-switch). */
.fpswitch--mini { align-items: center; }
.fpswitch__glyph-button {
  display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; cursor: pointer;
  background: var(--fp-switch-raised); border: 1.5px solid var(--fp-switch-jade); border-radius: 12px; color: var(--text-on-dark); font-size: 21px; line-height: 1;
}
.fpswitch__glyph-button:focus-visible { outline-width: 3px; outline-offset: 3px; }
.fpswitch--mini .fpswitch__panel {
  position: fixed; z-index: 60; width: 272px; background: var(--ink); box-shadow: 0 20px 40px -10px rgba(0, 0, 0, .5);
}
.fpswitch--mini .fpswitch__panel::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: rgba(255, 255, 255, .05); }

/* Phones (the drawer): the languages as tiles, always shown, instead of the button and its list. */
.fpswitch__tiles { display: none; }
@media (max-width: 860px) {
  .fpswitch__trigger, .fpswitch:not(.fpswitch--mini) > .fpswitch__panel { display: none; }
  .fpswitch__tiles { display: flex; flex-direction: column; gap: 8px; padding: 0 2px; }
  .fpswitch__tiles ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .fpswitch__big {
    display: flex; flex-direction: column; justify-content: center; gap: 4px; min-height: 84px; padding: 10px 12px;
    border: 1.5px solid var(--fp-switch-line); border-radius: 14px; color: var(--text-on-dark); text-decoration: none;
  }
  .fpswitch__big:hover { color: var(--text-on-dark); text-decoration: none; background: var(--fp-switch-hover); }
  .fpswitch__big[aria-current="page"] { background: var(--fp-switch-raised); border-color: var(--fp-switch-jade); }
  .fpswitch__big-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
  .fpswitch__big-own { font-size: 22px; line-height: 1.35; }
  .fpswitch__big-tick { font-size: 12px; font-weight: 700; color: var(--fp-switch-jade); }
  .fpswitch__big-english { font-size: 13px; color: var(--fp-switch-muted); }
  .fpswitch__big--add { flex-direction: row; align-items: center; justify-content: center; gap: 8px; border-style: dashed; font-size: 15px; font-weight: 600; }
  .fpswitch__big--add .fpswitch__plus { border: none; width: auto; height: auto; font-size: 20px; }
  .topbar__language { display: flex; align-items: center; gap: 10px; color: var(--text-on-dark); text-decoration: none; }
  .topbar__language .brand-mark { --mark-size: 30px; }
  .topbar__language-name { font-size: 19px; line-height: 1.3; }
}
.topbar__language-name { font-family: "Newsreader", Georgia, serif; }
.topbar__language-name[dir="rtl"] { font-family: var(--font-arabic); }