/* The language menu — home's square, red-edged picker, on every page that
   offers a language: the home navbar and Settings. It lived in home.css
   alone, so Settings had to make do with a native <select>, which looked
   like a different control choosing the same thing. The rules below are
   home's, moved here unchanged; home.html keeps its two phone overrides.
   js/lang-menu.js builds the menu wherever a page asks for one; the home
   page's is built by ui.js from the same list. */

  /* ---- language selector: the same control login.html ships ----
     Square, red-bordered, arrow hidden — kept byte-for-byte in step with
     login.html so the two pages never drift apart. */
  .lang-dropdown{position:relative;display:inline-block;font-family:var(--disp);font-size:.85rem;z-index:9999}
  .lang-trigger{display:flex;align-items:center;justify-content:center;background:#fff;border:2px solid #d0112b;
    border-radius:0;padding:10px 18px;color:#d0112b;font-weight:700;cursor:pointer;box-shadow:none;
    transition:background .16s;outline:none;user-select:none;min-width:100px}
  .lang-trigger *{pointer-events:none}
  .lang-trigger:hover{background:#fdf5f5}
  .lang-trigger .lang-arrow{display:none}
  /* As wide as the longest name, never narrower than the trigger. It was
     pinned to the trigger's own edges, which fitted "English" and "Türkçe"
     and nothing longer: on a phone, in Spanish, the list was the width of
     "Español" and every other name was cut — "Françai", "Portugu",
     "Русски". left only, so the i18n mirror turns it to right in Arabic. */
  .lang-list{position:absolute;top:100%;left:0;right:auto;min-width:100%;width:max-content;
    max-width:calc(100vw - 24px);box-sizing:border-box;background:#fff;border:1px solid #111;border-top:none;
    border-radius:0;box-shadow:none;padding:0;margin:0;list-style:none;display:none;overflow:hidden;z-index:9999}
  .lang-dropdown.open .lang-list{display:block}
  .lang-item{padding:10px 16px;cursor:pointer;font-weight:700;text-align:center;color:#d0112b;background:#fff;
    white-space:nowrap;transition:background .16s,color .16s}
  .lang-item:hover{background:#f5f5f5}
  .lang-item.active{background:#1e73be;color:#fff}

  /* Dark mode only. The control was #fff with a red border and had no
     dark rule at all, so on the dark navbar it read as a lit white box
     sitting on top of the page rather than a control belonging to it.
     Light mode is untouched — the red-on-white is the deliberate look
     there, and this is the one surface where it was wrong.

     The list scrolls because eleven languages is taller than the menu
     was ever designed for; three fitted anywhere. */
  :root[data-theme="dark"] .lang-trigger{background:#000;color:#ff5a72;border-color:#ff5a72}
  :root[data-theme="dark"] .lang-trigger:hover{background:#140a0c}
  :root[data-theme="dark"] .lang-list{background:#000;border-color:#3a3e42}
  :root[data-theme="dark"] .lang-item{background:#000;color:#ff5a72}
  :root[data-theme="dark"] .lang-item:hover{background:#181a1c}
  :root[data-theme="dark"] .lang-item.active{background:#1e73be;color:#fff}
  /* Eleven languages is taller than the three this menu was drawn for, so
     it scrolls — with its own scrollbar. The default one on Windows is a
     16px grey trough with arrow buttons, which on a black square-cornered
     dropdown reads as a piece of another decade's UI wedged into the
     corner. Firefox gets the two-property version, everything else the
     WebKit one. */
  /* Five and a half rows, 42px each: all eleven made a column that ran from
     the navbar to the fold. The half row says it scrolls, and opening
     scrolls it to the language in use — see lang-menu.js and ui.js. */
  .lang-list{max-height:min(60vh,231px);overflow-y:auto;
    scrollbar-width:thin;scrollbar-color:#555 transparent}
  .lang-list::-webkit-scrollbar{width:8px}
  .lang-list::-webkit-scrollbar-track{background:transparent}
  .lang-list::-webkit-scrollbar-thumb{background:#c9ced6;border-radius:99px;
    border:2px solid transparent;background-clip:content-box}
  .lang-list::-webkit-scrollbar-thumb:hover{background:#aab1bb;background-clip:content-box}
  .lang-list::-webkit-scrollbar-button{display:none;width:0;height:0}
  :root[data-theme="dark"] .lang-list{scrollbar-color:#4a4f55 transparent}
  :root[data-theme="dark"] .lang-list::-webkit-scrollbar-thumb{background:#4a4f55;background-clip:content-box}
  :root[data-theme="dark"] .lang-list::-webkit-scrollbar-thumb:hover{background:#5d636a;background-clip:content-box}


  /* Opening upwards, for a menu near the foot of a scrolling panel — the
     Language row in Settings sits under the theme cards with little but
     "Log out" below it. Aligned to the trigger's end edge, so it opens
     back across the row rather than out past the panel's side; the i18n
     mirror turns right into left in Arabic, where the row is reversed. */
  .lang-dropdown.up .lang-list{top:auto;bottom:100%;left:auto;right:0;
    border-top:1px solid #111;border-bottom:none}
  :root[data-theme="dark"] .lang-dropdown.up .lang-list{border-color:#3a3e42}