/* =============================================================================
   theme/base.css — reset, tokens, typography, and the responsive shell.

   Colours are NEVER written here. theme.js computes them from the Android
   Theme.kt formulas and injects them as CSS variables at runtime, so a palette
   change produces the exact same hex values on both clients.

   The shell has three states, driven purely by width:
     < 900px   phone      — floating bottom nav, single column
     900–1279  tablet     — icon rail on the right, single wide column
     >= 1280   desktop    — full sidebar + content + optional aside column
   ========================================================================== */

@font-face { font-family:'Vazirmatn'; src:url('../../fonts/vazirmatn_regular.ttf') format('truetype'); font-weight:400; font-display:swap; }
@font-face { font-family:'Vazirmatn'; src:url('../../fonts/vazirmatn_medium.ttf') format('truetype'); font-weight:500; font-display:swap; }
@font-face { font-family:'Vazirmatn'; src:url('../../fonts/vazirmatn_semibold.ttf') format('truetype'); font-weight:600; font-display:swap; }
@font-face { font-family:'Vazirmatn'; src:url('../../fonts/vazirmatn_bold.ttf') format('truetype'); font-weight:700; font-display:swap; }
@font-face { font-family:'Vazirmatn'; src:url('../../fonts/vazirmatn_black.ttf') format('truetype'); font-weight:900; font-display:swap; }

:root {
  /* bootstrap colours only — overwritten by applyTheme() on first frame */
  --primary:#4ADE9F; --on-primary:#07160F; --primary-c:#1D2C25; --on-primary-c:#C4EEDC;
  --secondary:#38BDF8; --on-secondary:#07141B; --secondary-c:#1B2A33; --on-secondary-c:#BFE7FB;
  --tertiary:#FBBF24; --on-tertiary:#191408; --tertiary-c:#2C2A18; --on-tertiary-c:#FDEBC4;
  --bg:#0C1210; --on-bg:#ECF4EF; --surface:#141B18; --on-surface:#ECF4EF;
  --surface-v:#1C2622; --on-surface-v:#8FA39A; --outline:#3D4A44; --outline-v:#25302B;
  --error:#FB7185; --on-error:#4C0519; --grad-a:#3BB27F;
  --scrim:rgba(0,0,0,.62); --glass:rgba(255,255,255,.06); --glass-edge:rgba(255,255,255,.10);
  --primary-rgb:74 222 159; --secondary-rgb:56 189 248; --tertiary-rgb:251 191 36;
  --surface-rgb:20 27 24; --on-surface-rgb:236 244 239;

  /* AppShapes from the Android build (12/16/22/28/34 dp) */
  --r-xs:12px; --r-sm:16px; --r-md:22px; --r-lg:28px; --r-xl:34px; --r-full:999px;

  /* spacing scale — 4pt grid */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s7:28px; --s10:40px; --s12:48px;

  --shadow-sm:0 2px 10px rgba(0,0,0,.16);
  --shadow:0 12px 34px rgba(0,0,0,.24);
  --shadow-lg:0 26px 60px rgba(0,0,0,.34);

  /* motion — ported from the Compose spring/tween values */
  --e-standard:cubic-bezier(.2,0,0,1);
  --e-decel:cubic-bezier(.05,.7,.1,1);
  --e-accel:cubic-bezier(.3,0,.8,.15);
  --e-spring:linear(0,.006,.026,.056,.098,.153,.223,.309,.41,.522,.638,.752,.855,.94,1.001,1.04,1.058,1.06,1.05,1.036,1.021,1.008,1,.996,.994,.995,.998,1);
  --t-fast:140ms; --t-med:240ms; --t-slow:380ms;

  --nav-h:74px;
  --rail-w:82px;
  --side-w:260px;
  --aside-w:320px;
  --topbar-h:62px;
  --maxw:1080px;
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);
}

[data-theme=light] {
  --shadow-sm:0 2px 10px rgba(16,32,26,.06);
  --shadow:0 12px 30px rgba(16,32,26,.10);
  --shadow-lg:0 26px 60px rgba(16,32,26,.14);
}

[data-density=compact] { --s3:10px; --s4:13px; --s5:16px; --s6:19px; --nav-h:66px; }

* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

body {
  font-family:'Vazirmatn', system-ui, 'Tahoma', sans-serif;
  background:var(--bg);
  color:var(--on-bg);
  min-height:100dvh;
  line-height:1.7;
  /* Break only when needed; unlike break-word, anywhere also reduces the
     min-content width of flex/grid items containing user supplied text. */
  overflow-wrap:anywhere;
  /* Vazirmatn stylistic sets swap Latin digits for Persian ones; the app
     must always show Latin numerals, so features stay off. */
  font-feature-settings:normal;
  font-variant-numeric:lining-nums;
  transition:background var(--t-med) var(--e-standard), color var(--t-med) var(--e-standard);
}

/* Latin numerals inside clocks/counters must stay LTR even in an RTL page. */
.ltr { direction:ltr; unicode-bidi:isolate; }
.num { font-variant-numeric:tabular-nums; letter-spacing:.2px; }

h1,h2,h3,h4 { line-height:1.35; font-weight:700; }
h1 { font-size:24px; font-weight:900; letter-spacing:-.3px; }
h2 { font-size:19px; }
h3 { font-size:16px; }

a { color:var(--primary); text-decoration:none; }
button, input, textarea, select { font:inherit; color:inherit; }
img { max-width:100%; display:block; }

/* the single most important accessibility detail in a keyboard-first web app */
:focus-visible {
  outline:2px solid var(--primary);
  outline-offset:2px;
  border-radius:6px;
}
:focus:not(:focus-visible) { outline:none; }

::selection { background:rgba(var(--primary-rgb)/.28); }

/* scrollbars — themed, thin, unobtrusive */
* { scrollbar-width:thin; scrollbar-color:var(--outline) transparent; }
*::-webkit-scrollbar { width:9px; height:9px; }
*::-webkit-scrollbar-track { background:transparent; }
*::-webkit-scrollbar-thumb { background:var(--outline-v); border-radius:99px; border:2px solid transparent; background-clip:content-box; }
*::-webkit-scrollbar-thumb:hover { background:var(--outline); background-clip:content-box; }

.ic { flex:none; vertical-align:middle; }

/* =========================================================================
   SHELL
   ========================================================================= */

#shell {
  display:grid;
  min-height:100dvh;
  grid-template-columns:1fr;
  grid-template-areas:'main';
}

#sidebar { grid-area:side; display:none; }
#aside   { grid-area:aside; display:none; }
#main    { grid-area:main; min-width:0; position:relative; }

#content {
  max-width:var(--maxw);
  margin:0 auto;
  padding:var(--s4) var(--s4) calc(var(--nav-h) + var(--safe-b) + var(--s6));
  min-height:100dvh;
}

/* ---- topbar (phone + tablet) ---- */
#topbar {
  position:sticky; top:0; z-index:40;
  height:calc(var(--topbar-h) + var(--safe-t));
  padding-top:var(--safe-t);
  display:flex; align-items:center; gap:var(--s2);
  padding-inline:var(--s4);
  background:rgba(var(--surface-rgb)/.72);
  backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  border-bottom:1px solid var(--outline-v);
}
#topbar .title { font-weight:800; font-size:17px; flex:1; min-width:0; max-height:min(30dvh, 12rem); overflow-y:auto; overflow-wrap:anywhere; }
#topbar { height:auto; min-height:calc(var(--topbar-h) + var(--safe-t)); }

/* ---- floating bottom nav (phone only) ---- */
#bottomnav {
  position:fixed; z-index:45;
  inset-inline:var(--s4);
  bottom:calc(var(--safe-b) + 10px);
  height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-around;
  padding:0 var(--s2);
  background:rgba(var(--surface-rgb)/.82);
  backdrop-filter:blur(20px) saturate(1.5);
  -webkit-backdrop-filter:blur(20px) saturate(1.5);
  border:1px solid var(--glass-edge);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow);
}

/* =========================================================================
   TABLET — icon rail replaces the bottom bar
   ========================================================================= */
@media (min-width:900px) {
  #shell {
    grid-template-columns:var(--rail-w) minmax(0,1fr);
    grid-template-areas:'side main';
  }
  #sidebar { display:block; }
  #bottomnav { display:none; }
  #content { padding-bottom:var(--s10); padding-inline:var(--s6); }
  #topbar { top:0; }
}

/* =========================================================================
   DESKTOP — full sidebar, wider content, optional aside
   ========================================================================= */
@media (min-width:1280px) {
  :root { --maxw:840px; }
  #shell { grid-template-columns:var(--side-w) minmax(0,1fr); }
  body.has-aside #shell {
    grid-template-columns:var(--side-w) minmax(0,1fr) var(--aside-w);
    grid-template-areas:'side main aside';
  }
  body.has-aside #aside { display:block; }
  #topbar { background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; border-bottom:0; }
}

@media (min-width:1600px) {
  :root { --side-w:288px; --aside-w:360px; --maxw:920px; }
}

/* Collapsed sidebar is a user preference, not only a breakpoint. */
@media (min-width:1280px) {
  body.side-collapsed #shell { grid-template-columns:var(--rail-w) minmax(0,1fr); }
  body.side-collapsed.has-aside #shell { grid-template-columns:var(--rail-w) minmax(0,1fr) var(--aside-w); }
}

/* Two-pane screens (chat, flashcards) opt out of the max width. */
#content.wide { max-width:none; }
#content.flush { padding:0; }

/* =========================================================================
   PAGE TRANSITIONS
   The entrance animates paint (opacity + transform) and never layout, so the
   page height is final on the first frame and scrolling never lurches.
   ========================================================================= */
.page-enter { animation:pageIn var(--t-slow) var(--e-decel) both; }
@keyframes pageIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }

.stagger > * { animation:itemIn 420ms var(--e-decel) both; }
.stagger > *:nth-child(1) { animation-delay:0ms; }
.stagger > *:nth-child(2) { animation-delay:40ms; }
.stagger > *:nth-child(3) { animation-delay:80ms; }
.stagger > *:nth-child(4) { animation-delay:120ms; }
.stagger > *:nth-child(5) { animation-delay:160ms; }
.stagger > *:nth-child(6) { animation-delay:200ms; }
.stagger > *:nth-child(n+7) { animation-delay:240ms; }
@keyframes itemIn { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }

@media (prefers-reduced-motion:reduce) {
  .page-enter, .stagger > * { animation:none !important; }
  *, *::before, *::after { transition-duration:1ms !important; animation-duration:1ms !important; }
}

/* Utility layer */
.row { display:flex; align-items:center; gap:var(--s2); }
.col { display:flex; flex-direction:column; gap:var(--s2); }
.grow { flex:1; min-width:0; }
.wrap { flex-wrap:wrap; }
.between { justify-content:space-between; }
.center { align-items:center; justify-content:center; }
.hidden { display:none !important; }
.muted { color:var(--on-surface-v); }
.sm { font-size:13px; }
.tiny { font-size:11.5px; color:var(--on-surface-v); }
.bold { font-weight:700; }
.black { font-weight:900; }
.trunc { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.clamp2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.gap3 { gap:var(--s3); }
.gap4 { gap:var(--s4); }
.mt2 { margin-top:var(--s2); } .mt4 { margin-top:var(--s4); } .mt6 { margin-top:var(--s6); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }


/* =============================================================================
   Token compatibility layer.

   theme.js paints the Android scheme into --primary / --surface / --outline...
   while the screen stylesheets were written against an older short-name set
   (--accent, --surf, --line, --elev, --fg, --muted). Aliasing them here means
   every screen picks up the real palette instead of falling back to nothing.
   ========================================================================== */
:root{
  --accent:var(--primary);
  --accent-2:var(--secondary);
  --on-accent:var(--on-primary);
  --surf:var(--surface);
  --elev:var(--surface-v);
  --line:var(--outline-v);
  --line-2:var(--outline);
  --fg:var(--on-bg);
  --muted:var(--on-surface-v);
  --on-surface-v:#8FA39A;
  --mint:#4ADE9F;
  --cyan:#38BDF8;
  --amber:#FBBF24;
  --rose:#FB7185;
  --grape:#A78BFA;
  --sh-sm:0 4px 14px -8px rgba(0,0,0,.55);
  --sh-md:0 12px 30px -16px rgba(0,0,0,.60);
  --sh-lg:0 24px 60px -28px rgba(0,0,0,.68);
  --sw-dir:1;
}
[data-theme="light"]{
  --on-surface-v:#5C6B65;
  --sh-sm:0 4px 14px -8px rgba(16,32,26,.20);
  --sh-md:0 12px 30px -16px rgba(16,32,26,.24);
  --sh-lg:0 24px 60px -28px rgba(16,32,26,.28);
}

/* the old sheets styled .ab-list > div, the markup uses <li> */
.ab-list > li{display:flex;align-items:center;gap:10px;color:var(--muted);list-style:none}
.ab-list{padding:0;margin-top:var(--s5);list-style:none}

/* ===== auth (Android AuthUi parity) ===== */
.auth-wrap{min-height:100dvh;display:grid;place-items:center;padding:var(--s5);
  background:radial-gradient(120% 90% at 85% -10%,rgba(var(--primary-rgb) /.22),transparent 60%),
             radial-gradient(90% 80% at 10% 110%,rgba(var(--secondary-rgb) /.18),transparent 60%),var(--bg)}
@media (min-width:980px){
  .auth-wrap{grid-template-columns:1.05fr .95fr;gap:var(--s7);max-width:1080px;margin-inline:auto;align-items:center}
  .auth-brand{display:block}
}
.auth-brand h1{font-size:2.1rem;font-weight:900;margin:var(--s4) 0 var(--s2)}
.auth-card{width:100%;max-width:440px;margin-inline:auto;padding:var(--s6) var(--s5) var(--s5);
  border-radius:var(--r-xl);background:var(--surface);border:1px solid var(--outline-v);box-shadow:var(--sh-lg)}
.auth-logo{width:56px;height:56px;border-radius:var(--r-md);display:grid;place-items:center;margin:0 auto var(--s4);
  background:linear-gradient(140deg,var(--grad-a),var(--primary) 55%,var(--secondary));color:var(--on-primary);
  box-shadow:0 16px 34px -18px rgba(var(--primary-rgb) /.8)}
.auth-card > .seg{margin-bottom:var(--s5)}
.auth-card h2{font-size:1.32rem;font-weight:900;text-align:center;margin:0 0 6px}
.auth-card > p{font-size:.83rem;color:var(--muted);text-align:center;margin:0 0 var(--s5);line-height:1.7}
.auth-steps{display:flex;align-items:center;gap:7px;justify-content:center;margin-bottom:var(--s4)}
.auth-steps .stp{display:inline-flex;align-items:center;gap:6px;font-size:.74rem;font-weight:700;color:var(--muted)}
.auth-steps .stp > i{width:22px;height:22px;border-radius:var(--r-full);display:grid;place-items:center;
  font-size:.7rem;font-style:normal;background:var(--surface-v);border:1px solid var(--outline);color:var(--muted)}
.auth-steps .stp.on{color:var(--on-bg)}
.auth-steps .stp.on > i{background:linear-gradient(135deg,var(--primary),var(--secondary));
  border-color:transparent;color:var(--on-primary)}
.auth-steps .stp.done > i{background:rgba(var(--primary-rgb) /.18);border-color:transparent;color:var(--primary)}
.auth-steps .stp-line{width:18px;height:1px;background:var(--outline)}
.otp-row{display:flex;gap:var(--s2);direction:ltr;justify-content:center}
.otp-box{width:46px;height:56px;text-align:center;font:800 1.3rem/1 inherit;border-radius:var(--r-xs);
  border:1.5px solid var(--outline);background:var(--surface-v);color:var(--on-bg);
  font-variant-numeric:tabular-nums;transition:border-color var(--t-fast),transform var(--t-fast),box-shadow var(--t-fast)}
.otp-box:focus{outline:0;border-color:var(--primary);transform:translateY(-2px);
  box-shadow:0 8px 20px -12px rgba(var(--primary-rgb) /.9)}
.otp-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:var(--s3);
  font-size:.76rem;color:var(--muted)}
.link-btn{background:none;border:none;color:var(--primary);font-weight:800;font-size:.78rem;cursor:pointer;padding:4px}
.link-btn:disabled{color:var(--muted);cursor:default}
.pw-eye.on{color:var(--primary)}

/* The wakeup banner used to stay visible because .an-wake sets display:flex,
   which outranks the plain hidden attribute. One global rule fixes every
   hidden element in the app at once. */
[hidden] { display: none !important; }