/* Lisan — premium UI layer (v2). Presentation only. Loaded after styles.css and
   styles-persian.css. Palette is unchanged: cream canvas, navy ink, azure accent, ice blue. */

:root {
  --pm-ink: #0F172A;
  --pm-navy: #1E3A8A;
  --pm-azure: #2563EB;
  --pm-sky: #0284C7;
  --pm-ice: #E0F2FE;
  --pm-cream: #FAF8F5;
  --pm-line: rgba(30, 58, 138, .10);
  --pm-line-strong: rgba(37, 99, 235, .28);
  --pm-grad: linear-gradient(135deg, #1E3A8A 0%, #2563EB 55%, #0284C7 100%);
  --pm-sheen: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .78));
  --pm-sh-1: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 14px -6px rgba(30, 58, 138, .10);
  --pm-sh-2: 0 2px 4px rgba(15, 23, 42, .04), 0 18px 40px -18px rgba(30, 58, 138, .22);
  --pm-sh-3: 0 4px 8px rgba(15, 23, 42, .05), 0 30px 70px -26px rgba(30, 58, 138, .32);
  --pm-ease: cubic-bezier(.22, 1, .36, 1);
}

::selection { background: rgba(37, 99, 235, .2); color: var(--pm-ink); }
html { scrollbar-gutter: stable; }
body {
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(1100px 520px at 12% -8%, rgba(224, 242, 254, .85), transparent 60%),
    radial-gradient(900px 480px at 100% 0%, rgba(191, 219, 254, .45), transparent 62%),
    var(--pm-cream);
  background-attachment: fixed;
}
body .ambient-glow { opacity: .16; }

/* Scrollbars */
* { scrollbar-width: thin; scrollbar-color: rgba(30, 58, 138, .25) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(30, 58, 138, .22); border-radius: 99px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(30, 58, 138, .38); background-clip: content-box; border: 3px solid transparent; }

/* ---------- Header: floating glass bar ---------- */
body .app-header {
  background: rgba(250, 248, 245, .72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--pm-line);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 10px 30px -24px rgba(30, 58, 138, .35);
}
body .logo-mark {
  background: var(--pm-grad); color: #fff; border: 0;
  box-shadow: 0 6px 16px -6px rgba(37, 99, 235, .55), inset 0 1px 0 rgba(255, 255, 255, .35);
}
body .brand-name { background: linear-gradient(90deg, var(--pm-ink), var(--pm-navy)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
body .glass-btn {
  border-radius: 12px; background: var(--pm-sheen); border: 1px solid var(--pm-line);
  box-shadow: var(--pm-sh-1);
}
body .glass-btn:hover { box-shadow: var(--pm-sh-2); border-color: var(--pm-line-strong); }
body .glass-btn:active { transform: translateY(0) scale(.98); }
body .glass-btn.active { background: linear-gradient(180deg, #fff, var(--pm-ice)); border-color: var(--pm-line-strong); box-shadow: var(--pm-sh-1), 0 0 0 3px rgba(37, 99, 235, .08); }
body .lang-dropdown-menu { border-radius: 20px; box-shadow: var(--pm-sh-3); border: 1px solid var(--pm-line); animation: pm-pop .18s var(--pm-ease) both; transform-origin: top right; }
body .lang-option-btn { transition: background .18s ease, transform .18s var(--pm-ease); }
body .lang-option-btn:hover { background: var(--pm-ice); }
@keyframes pm-pop { from { opacity: 0; transform: translateY(-6px) scale(.97); } to { opacity: 1; transform: none; } }

/* ---------- Home: confident editorial hero ---------- */
body #viewHome .hero-badge {
  padding: 7px 14px; border-radius: 99px; color: var(--pm-navy);
  background: rgba(255, 255, 255, .8); border: 1px solid var(--pm-line);
  box-shadow: var(--pm-sh-1); letter-spacing: .1em;
}
body #viewHome .hero-badge::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--pm-azure); margin-right: 9px; box-shadow: 0 0 0 4px rgba(37, 99, 235, .15); vertical-align: 1px; }
body #viewHome .hero-title { font-weight: 600; letter-spacing: -.05em; color: var(--pm-ink); }
body #viewHome .text-gradient {
  background: var(--pm-grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
body #viewHome .hero-subtitle { font-size: 15.5px; color: #475569; }
body #viewHome .home-lang-selector-panel {
  background: var(--pm-sheen); border-radius: 24px; padding: 22px;
  border: 1px solid var(--pm-line); box-shadow: var(--pm-sh-2);
}
body #viewHome .home-lang-card { border-radius: 13px; transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s var(--pm-ease); }
body #viewHome .home-lang-card:hover { transform: translateY(-1px); background: #fff; border-color: var(--pm-line); box-shadow: var(--pm-sh-1); }
body #viewHome .home-lang-card.active { background: linear-gradient(180deg, #fff, rgba(224, 242, 254, .7)); border-color: var(--pm-line-strong); box-shadow: var(--pm-sh-1), 0 0 0 3px rgba(37, 99, 235, .08); }
body #viewHome .home-lang-card.active::after { content: "✓"; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--pm-azure); color: #fff; font-size: 10px; }

/* Destination cards */
body #viewHome .hero-choice-card {
  position: relative; overflow: hidden; border-radius: 26px; padding: 30px 32px 26px;
  background: var(--pm-sheen); border: 1px solid var(--pm-line); box-shadow: var(--pm-sh-1);
  transition: transform .35s var(--pm-ease), box-shadow .35s var(--pm-ease), border-color .25s ease;
}
body #viewHome .hero-choice-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--pm-grad);
  transform: scaleX(0); transform-origin: left; transition: transform .45s var(--pm-ease);
}
body #viewHome .hero-choice-card:hover, body #viewHome .hero-choice-card:focus-visible { transform: translateY(-5px); border-color: var(--pm-line-strong); box-shadow: var(--pm-sh-3); }
body #viewHome .hero-choice-card:hover::before, body #viewHome .hero-choice-card:focus-visible::before { transform: scaleX(1); }
body #viewHome .icon-bubble { width: 46px; height: 46px; border-radius: 14px; background: var(--pm-grad); border: 0; box-shadow: 0 8px 18px -8px rgba(37, 99, 235, .6), inset 0 1px 0 rgba(255, 255, 255, .35); transition: transform .35s var(--pm-ease); }
body #viewHome .icon-bubble::after { background: #fff; width: 23px; height: 23px; }
body #viewHome .hero-choice-card:hover .icon-bubble { transform: rotate(-6deg) scale(1.06); }
body #viewHome .choice-title { font-weight: 600; letter-spacing: -.04em; }
body #viewHome .feature-tag + .feature-tag::before { color: var(--pm-azure); }
body #viewHome .action-arrow { background: var(--pm-ice); transition: transform .3s var(--pm-ease), background .25s ease, color .25s ease; }
body #viewHome .hero-choice-card:hover .action-arrow { background: var(--pm-azure); color: #fff; transform: translateX(4px); }
body #viewHome .home-progress-ribbon { background: var(--pm-sheen); border: 1px solid var(--pm-line); border-radius: 22px; box-shadow: var(--pm-sh-1); margin-top: 32px; }
body #viewHome .metric-val { font-weight: 600; background: var(--pm-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* Staggered entrance for home content */
body #viewHome.active :is(.hero-badge, .hero-title, .hero-subtitle, .home-lang-selector-panel, .hero-choice-card, .home-progress-ribbon) { animation: pm-rise .6s var(--pm-ease) both; }
body #viewHome.active .hero-title { animation-delay: .06s; }
body #viewHome.active .hero-subtitle { animation-delay: .12s; }
body #viewHome.active .home-lang-selector-panel { animation-delay: .16s; }
body #viewHome.active .hero-choice-card:nth-child(1) { animation-delay: .2s; }
body #viewHome.active .hero-choice-card:nth-child(2) { animation-delay: .26s; }
body #viewHome.active .hero-choice-card:nth-child(3) { animation-delay: .32s; }
body #viewHome.active .hero-choice-card:nth-child(4) { animation-delay: .38s; }
body #viewHome.active .home-progress-ribbon { animation-delay: .44s; }
@keyframes pm-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- Workspaces ---------- */
body .section-title { font-weight: 600; letter-spacing: -.045em; color: var(--pm-ink); }
body :is(.search-filter-card, .search-results-container, .grammar-card, .category-card, .dialogue-hero-card, .dialogue-vocab-panel, .lesson-card) {
  background: var(--pm-sheen); border-radius: 24px; border-color: var(--pm-line); box-shadow: var(--pm-sh-1);
}
body .category-card { transition: transform .3s var(--pm-ease), box-shadow .3s var(--pm-ease), border-color .2s ease; }
body .category-card:hover { transform: translateY(-4px); box-shadow: var(--pm-sh-2); border-color: var(--pm-line-strong); }
body :is(.filter-chip, .series-chip, .dialogue-pill-btn, .subtopic-pill-btn) { border-radius: 99px; padding-inline: 16px; transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s var(--pm-ease), box-shadow .2s ease; }
body :is(.filter-chip, .series-chip, .dialogue-pill-btn, .subtopic-pill-btn):hover { background: #fff; border-color: var(--pm-line-strong); transform: translateY(-1px); }
body :is(.filter-chip, .series-chip, .dialogue-pill-btn, .subtopic-pill-btn).active { background: var(--pm-grad); border-color: transparent; color: #fff; box-shadow: 0 8px 18px -8px rgba(37, 99, 235, .6); }
body :is(.search-input-wrap input, .grammar-sidebar-search, .grammar-mobile-select) { border-radius: 14px; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; }
body :is(.search-input-wrap input, .grammar-sidebar-search, .grammar-mobile-select):focus { background: #fff; border-color: var(--pm-azure); box-shadow: 0 0 0 4px rgba(37, 99, 235, .12); outline: none; }

/* Study card */
body .big-study-card { background: var(--pm-sheen); border-radius: 30px; box-shadow: var(--pm-sh-3); border: 1px solid var(--pm-line); }
body .progress-track { height: 6px; border-radius: 99px; overflow: hidden; }
body .progress-fill { background: var(--pm-grad); border-radius: 99px; }
body #cardEnglishWord:not(.arabic-text) { font-weight: 600; color: var(--pm-ink); }
body :is(.card-mode-tabs, .reading-tabs) { border-radius: 16px; padding: 4px; background: rgba(30, 58, 138, .05); }
body :is(.mode-tab, .reading-tab-btn) { border-radius: 12px; transition: background .2s ease, color .2s ease, box-shadow .2s ease; }
body :is(.mode-tab, .reading-tab-btn).active { box-shadow: var(--pm-sh-1); color: var(--pm-navy); font-weight: 600; }
body :is(.word-pronounce-hero-pill, .sentence-pronounce-hero-card) { background: linear-gradient(180deg, #fff, rgba(224, 242, 254, .55)); }

/* Grammar */
body .grammar-sidebar { background: var(--pm-sheen); box-shadow: var(--pm-sh-1); position: sticky; top: 96px; align-self: start; max-height: calc(100vh - 120px); overflow: auto; }
body .grammar-nav-item { transition: background .18s ease, color .18s ease, transform .18s var(--pm-ease); }
body .grammar-nav-item:hover { background: rgba(224, 242, 254, .6); transform: translateX(2px); }
body .grammar-nav-item.active { background: linear-gradient(90deg, var(--pm-ice), rgba(224, 242, 254, .3)); box-shadow: inset 3px 0 0 var(--pm-azure); font-weight: 600; }
body .topic-title { font-weight: 600; }
body .grammar-masterclass-banner { border-radius: 22px; background: linear-gradient(110deg, #fff, rgba(224, 242, 254, .75)); box-shadow: var(--pm-sh-1); }
body .gmb-icon-wrap { background: var(--pm-grad); color: #fff; }

/* Reading and dialogue */
body .reading-card { border-radius: 30px; background: var(--pm-sheen); box-shadow: var(--pm-sh-3); }
body .reading-nav-bar { background: var(--pm-sheen); border: 1px solid var(--pm-line); box-shadow: var(--pm-sh-1); border-radius: 18px; }
body .reading-title-en:not(.arabic-text) { font-weight: 600; }
body .chat-bubble-card { border-radius: 22px; background: var(--pm-sheen); box-shadow: var(--pm-sh-1); transition: border-color .2s ease, box-shadow .25s ease, transform .25s var(--pm-ease); }
body .chat-bubble-card:hover { box-shadow: var(--pm-sh-2); transform: translateY(-2px); }
body .chat-bubble-speaker-a { border-left-color: var(--pm-azure); }
body .lesson-set-tab, body .lesson-mod-pill { transition: transform .22s var(--pm-ease), box-shadow .22s ease, background .2s ease; }
body .lesson-set-tab:hover, body .lesson-mod-pill:hover { transform: translateY(-2px); box-shadow: var(--pm-sh-1); }
body .lesson-mod-pill.active { background: var(--pm-grad); }

/* Drawers, popovers, toasts get consistent depth */
body :is(.drawer, .side-drawer, .word-drawer, .text-drawer, [class*="drawer-panel"]) { box-shadow: var(--pm-sh-3); }
body :is([class*="toast"], [class*="snackbar"]) { border-radius: 14px; box-shadow: var(--pm-sh-3); }

/* Footer */
body .app-footer { background: transparent; border-top: 1px solid var(--pm-line); color: #64748B; }

/* Focus ring: soft glow + crisp line */
body :is(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--pm-azure); outline-offset: 3px; box-shadow: 0 0 0 6px rgba(37, 99, 235, .14); border-radius: inherit; }

@media (max-width: 640px) {
  body #viewHome .hero-choice-card { padding: 24px; border-radius: 22px; }
  body #viewHome .hero-choice-card:hover { transform: none; }
  body .big-study-card, body .reading-card { border-radius: 24px; }
  body { background-attachment: scroll; }
}
@media (hover: none) {
  body #viewHome .hero-choice-card:hover, body .category-card:hover, body .chat-bubble-card:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  body #viewHome.active :is(.hero-badge, .hero-title, .hero-subtitle, .home-lang-selector-panel, .hero-choice-card, .home-progress-ribbon) { animation: none; }
  body #viewHome .hero-choice-card::before { transition: none; }
}
@media (prefers-reduced-transparency: reduce) {
  body .app-header { background: #FAF8F5; backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (forced-colors: active) {
  body #viewHome .text-gradient, body .brand-name, body #viewHome .metric-val { -webkit-text-fill-color: CanvasText; color: CanvasText; background: none; }
  body .logo-mark, body #viewHome .icon-bubble { forced-color-adjust: auto; }
}

/* Keep hero copy tight when the language panel is taller than the text column. */
body #viewHome .hero-header { align-content: start; grid-template-rows: auto auto auto 1fr; }
body #viewHome .home-lang-selector-panel { grid-row: 1 / span 4; }