/* Palabras v7.5.7 Arabic typography and language settings visibility */
html[lang="ar"],
html[lang="ar"] body,
html[lang="ar"] button,
html[lang="ar"] input,
html[lang="ar"] select,
html[lang="ar"] textarea{
  font-family:"IBM Plex Sans Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
html[lang="ar"] body{
  line-height:1.65;
  letter-spacing:0;
  text-rendering:optimizeLegibility;
}
html[lang="ar"] .topbar-title,
html[lang="ar"] .login-logo h1,
html[lang="ar"] .settings-avatar{
  font-family:"IBM Plex Sans Arabic", Georgia, serif;
  font-weight:700;
}
html[lang="ar"] .sgroup-title,
html[lang="ar"] .fg label,
html[lang="ar"] .lang-section-title{
  letter-spacing:0;
}
html[lang="ar"] .srow-label,
html[lang="ar"] .ltab,
html[lang="ar"] .bp,
html[lang="ar"] .bs,
html[lang="ar"] .bdgr{
  font-weight:600;
}
.settings-language-hero{
  margin-top:14px;
  padding:12px;
  border:1px solid var(--bd);
  border-radius:14px;
  background:var(--cr2);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.settings-language-copy{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.settings-language-kicker{
  width:34px;
  height:34px;
  border-radius:11px;
  background:var(--tl);
  border:1px solid var(--bd);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.settings-language-title{
  font-size:13px;
  font-weight:700;
  color:var(--tx);
}
.settings-language-sub{
  font-size:11px;
  color:var(--tx3);
  line-height:1.35;
}
.settings-language-actions{
  display:flex;
  align-items:center;
  gap:6px;
  flex-shrink:0;
}
.lang-pill{
  border:1px solid var(--bd);
  background:var(--wh);
  color:var(--tx2);
  border-radius:999px;
  padding:7px 10px;
  font-size:12px;
  font-weight:700;
  line-height:1;
  min-width:70px;
}
.lang-pill.on{
  border-color:var(--tc);
  background:var(--tc);
  color:#fff;
}
@media (max-width:430px){
  .settings-language-hero{
    align-items:stretch;
    flex-direction:column;
  }
  .settings-language-actions{
    width:100%;
  }
  .lang-pill{
    flex:1;
  }
}

/* v7.5.8 language dropdown polish */
.prelogin-language-select-wrap{
  cursor:pointer;
}
.prelogin-language-icon{
  font-size:16px;
  line-height:1;
  flex-shrink:0;
}
.prelogin-language-select,
.settings-language-select{
  border:0;
  background:transparent;
  color:var(--tx);
  font:inherit;
  font-weight:700;
  outline:none;
  cursor:pointer;
  min-width:92px;
}
.prelogin-language-select{
  max-width:118px;
  font-size:12px;
}
.settings-language-select{
  border:1px solid var(--bd);
  background:var(--wh);
  border-radius:999px;
  padding:8px 12px;
  min-width:132px;
  font-size:12px;
}
html[lang="ar"] .prelogin-language-select,
html[lang="ar"] .settings-language-select{
  font-family:"IBM Plex Sans Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* v7.5.13 mobile toast readability and placement active */
.toast,
.sync-status-pill{
  z-index:2147483647 !important;
}
.toast{
  position:fixed !important;
  left:50% !important;
  right:auto !important;
  transform:translateX(-50%) !important;
  bottom:max(72px, calc(env(safe-area-inset-bottom, 0px) + 64px)) !important;
  width:max-content;
  max-width:min(92vw, 680px) !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  overflow-wrap:break-word;
  word-break:normal;
  line-height:1.45;
  text-align:center;
  padding:12px 16px;
  pointer-events:none;
}
html[lang="ar"] .toast{
  font-family:"IBM Plex Sans Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height:1.55;
}
.sync-status-pill{
  position:fixed !important;
}
@media (max-width:430px){
  .toast{
    bottom:max(96px, calc(env(safe-area-inset-bottom, 0px) + 84px)) !important;
    width:calc(100vw - 28px) !important;
    max-width:calc(100vw - 28px) !important;
    padding:12px 14px;
    border-radius:14px;
    font-size:15px;
  }
}


/* v7.5.14 adaptive toast sizing active
   Short messages stay compact. Long messages expand only up to the screen width
   and wrap cleanly, especially on mobile and Arabic UI. */
.toast{
  width:fit-content !important;
  min-width:auto !important;
  max-width:min(88vw, 640px) !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  overflow-wrap:anywhere;
  word-break:normal;
  line-height:1.45;
  text-align:center;
  padding:10px 14px;
  border-radius:14px;
}
html[lang="ar"] .toast{
  line-height:1.6;
}
@media (max-width:430px){
  .toast{
    bottom:max(132px, calc(env(safe-area-inset-bottom, 0px) + 116px)) !important;
    width:fit-content !important;
    min-width:auto !important;
    max-width:calc(100vw - 44px) !important;
    max-height:32vh;
    overflow:auto !important;
    padding:10px 14px;
    border-radius:14px;
    font-size:15px;
  }
}


/* v7.5.15 smart toast width before wrapping active
   Keep short toasts compact, let medium toasts grow horizontally first,
   and only wrap after reaching the safe viewport width. */
.toast{
  box-sizing:border-box !important;
  width:max-content !important;
  min-width:0 !important;
  max-width:min(92vw, 680px) !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  overflow-wrap:break-word;
  word-break:normal;
  line-height:1.45;
  text-align:center;
  padding:10px 16px;
}
html[lang="ar"] .toast{
  line-height:1.58;
  overflow-wrap:break-word;
  word-break:normal;
}
@media (max-width:430px){
  .toast{
    bottom:max(126px, calc(env(safe-area-inset-bottom, 0px) + 110px)) !important;
    width:max-content !important;
    min-width:0 !important;
    max-width:calc(100vw - 32px) !important;
    max-height:34vh;
    overflow:auto !important;
    padding:10px 14px;
    border-radius:14px;
    font-size:15px;
  }
}

/* v7.6 RTL polish active
   Use logical alignment for Arabic UI while keeping learning/user content readable. */
html[dir="rtl"]{
  direction:rtl;
}
html[dir="rtl"] body{
  text-align:right;
}

/* Keep text typed by users, learned words, romanization, examples, and AI/user content
   from being visually scrambled when Arabic UI is active. */
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] .toast,
html[dir="rtl"] .word,
html[dir="rtl"] .word-text,
html[dir="rtl"] .word-main,
html[dir="rtl"] .word-title,
html[dir="rtl"] .word-meaning,
html[dir="rtl"] .word-rom,
html[dir="rtl"] .word-example,
html[dir="rtl"] .word-notes,
html[dir="rtl"] .example,
html[dir="rtl"] .example-text,
html[dir="rtl"] .rom,
html[dir="rtl"] .romanization,
html[dir="rtl"] .ai-output,
html[dir="rtl"] .ai-practice,
html[dir="rtl"] .history-line,
html[dir="rtl"] .session-line{
  unicode-bidi:plaintext;
}

/* Forms and settings: align labels and copy naturally in Arabic. */
html[dir="rtl"] .fg,
html[dir="rtl"] .srow,
html[dir="rtl"] .settings-language-hero,
html[dir="rtl"] .settings-language-copy,
html[dir="rtl"] .modal,
html[dir="rtl"] .modal-card,
html[dir="rtl"] .sheet,
html[dir="rtl"] .card{
  text-align:right;
}
html[dir="rtl"] .fg label,
html[dir="rtl"] .srow-label,
html[dir="rtl"] .settings-language-title,
html[dir="rtl"] .settings-language-sub{
  text-align:right;
}
html[dir="rtl"] .fg input,
html[dir="rtl"] .fg textarea,
html[dir="rtl"] .fg select,
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select{
  text-align:right;
}

/* Mixed layout rows: use logical spacing without forcing content reversal in cards. */
html[dir="rtl"] .topbar,
html[dir="rtl"] .toolbar,
html[dir="rtl"] .row,
html[dir="rtl"] .actions,
html[dir="rtl"] .settings-language-actions{
  direction:rtl;
}
html[dir="rtl"] .prelogin-controls,
html[dir="rtl"] .prelogin-top-controls{
  direction:ltr;
}

/* Keep icon-only utility controls visually stable and centered. */
html[dir="rtl"] .ib,
html[dir="rtl"] .icon-btn,
html[dir="rtl"] .square-btn,
html[dir="rtl"] .prelogin-language-select-wrap{
  direction:ltr;
  text-align:center;
}

/* Selects need a little more room in Arabic so labels do not feel cramped. */
html[dir="rtl"] select,
html[dir="rtl"] .settings-language-select,
html[dir="rtl"] .prelogin-language-select{
  padding-inline-start:12px;
  padding-inline-end:12px;
}

/* Word cards: keep action buttons readable while content follows its own script direction. */
html[dir="rtl"] .word-row,
html[dir="rtl"] .wrow,
html[dir="rtl"] .word-card,
html[dir="rtl"] .word-list-item{
  text-align:right;
}
html[dir="rtl"] .word-actions,
html[dir="rtl"] .wactions,
html[dir="rtl"] .card-actions{
  direction:ltr;
}

/* Badges/chips remain compact and centered regardless of UI direction. */
html[dir="rtl"] .chip,
html[dir="rtl"] .tag,
html[dir="rtl"] .bdg,
html[dir="rtl"] .bdgr,
html[dir="rtl"] .level,
html[dir="rtl"] .pill{
  direction:rtl;
  text-align:center;
  white-space:nowrap;
}

/* Review screen: user answer and learned-language prompts should not be forced into RTL. */
html[dir="rtl"] .review-card,
html[dir="rtl"] .review-prompt,
html[dir="rtl"] .review-answer,
html[dir="rtl"] .review-result,
html[dir="rtl"] .mc-option{
  unicode-bidi:plaintext;
}
html[dir="rtl"] .review-actions,
html[dir="rtl"] .review-toolbar{
  direction:rtl;
}

/* Mobile Arabic polish: avoid cramped modal/forms and keep controls comfortable. */
@media (max-width:430px){
  html[dir="rtl"] .modal-card,
  html[dir="rtl"] .sheet{
    text-align:right;
  }
  html[dir="rtl"] .fg label{
    margin-bottom:6px;
  }
  html[dir="rtl"] button,
  html[dir="rtl"] .btn,
  html[dir="rtl"] .bp,
  html[dir="rtl"] .bs{
    line-height:1.45;
  }
}

/* v7.8 expanded beta language set active
   Urdu is RTL and benefits from the same readable Arabic-family typography. */
html[lang="ur"],
html[lang="ur"] body,
html[lang="ur"] button,
html[lang="ur"] input,
html[lang="ur"] select,
html[lang="ur"] textarea{
  font-family:"IBM Plex Sans Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
html[lang="ur"] body{
  line-height:1.65;
  letter-spacing:0;
  text-rendering:optimizeLegibility;
}
html[lang="ur"] .topbar-title,
html[lang="ur"] .login-logo h1,
html[lang="ur"] .settings-avatar{
  font-family:"IBM Plex Sans Arabic", Georgia, serif;
  font-weight:700;
}
html[lang="ur"] .sgroup-title,
html[lang="ur"] .fg label,
html[lang="ur"] .lang-section-title{
  letter-spacing:0;
}

/* v7.9.3 pre-login language selector color polish
   Keep the selector visually aligned with the surrounding login controls,
   especially in dark mode where native select backgrounds can appear as a
   mismatched inner rectangle. */
.prelogin-language-select-wrap{
  background:var(--card) !important;
  border-color:var(--bd) !important;
  color:var(--tx) !important;
}
.prelogin-language-select-wrap .prelogin-language-icon{
  color:var(--tc) !important;
}
.prelogin-language-select{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  background:transparent !important;
  color:var(--tx) !important;
  border:0 !important;
  box-shadow:none !important;
  padding-inline-start:2px;
  padding-inline-end:18px;
}
.prelogin-language-select:focus{
  outline:none !important;
}
.prelogin-language-select-wrap:focus-within{
  box-shadow:0 0 0 2px color-mix(in srgb, var(--tc) 24%, transparent), 0 6px 18px rgba(60,30,10,.10) !important;
}


/* v7.9.4 pre-login selector final polish
   Avoid native select inner backgrounds by rendering the selected language as
   normal text and keeping the select as an invisible full-size control. */
.prelogin-language-select-wrap{
  position:fixed !important;
  overflow:hidden !important;
  isolation:isolate;
  min-width:126px;
  height:42px !important;
  background:var(--card) !important;
  border:1px solid var(--bd) !important;
  color:var(--tx) !important;
}
.prelogin-language-label{
  display:inline-flex;
  align-items:center;
  color:var(--tx);
  font-weight:800;
  font-size:12px;
  line-height:1;
  white-space:nowrap;
  max-width:94px;
  overflow:hidden;
  text-overflow:ellipsis;
  pointer-events:none;
}
.prelogin-language-caret{
  color:var(--mut);
  font-weight:900;
  font-size:14px;
  line-height:1;
  margin-inline-start:2px;
  pointer-events:none;
}
.prelogin-language-select{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  min-width:0 !important;
  max-width:none !important;
  opacity:0 !important;
  appearance:auto !important;
  -webkit-appearance:auto !important;
  cursor:pointer !important;
}
html[data-theme="dark"] .prelogin-language-select-wrap,
body.dark .prelogin-language-select-wrap,
.dark .prelogin-language-select-wrap{
  background:var(--card) !important;
  border-color:var(--bd) !important;
}
html[data-theme="dark"] .prelogin-language-label,
body.dark .prelogin-language-label,
.dark .prelogin-language-label{
  color:var(--tx) !important;
}

/* v7.9.5 pre-login language selector caret polish
   Replace the text glyph caret with a small CSS chevron so it matches the app UI. */
.prelogin-language-caret{
  width:7px !important;
  height:7px !important;
  display:inline-block !important;
  border:0 !important;
  border-inline-end:1.7px solid currentColor !important;
  border-block-end:1.7px solid currentColor !important;
  transform:rotate(45deg) translateY(-1px) !important;
  color:var(--mut) !important;
  font-size:0 !important;
  line-height:0 !important;
  margin-inline-start:6px !important;
  flex:0 0 auto !important;
  opacity:.9 !important;
}
html[dir="rtl"] .prelogin-language-caret{
  margin-inline-start:6px !important;
  margin-inline-end:0 !important;
}