/* Sarf · xLabs
   Lapis ink and textbook-frame motifs; Noto Naskh Arabic keeps every haraka on its letter; amber marks majhul, green marks ism.
   Tokens first, then layout, then components.

   Theme: <html data-theme="light|dark"> forces a scheme; no attribute = follow the OS (prefers-color-scheme).
   An inline script in <head> sets the attribute from localStorage "sarf2:theme" before first paint.
   Every colour below is a custom property, redefined in the two dark blocks (keep those two identical).
   Other stylesheets (e.g. exercises.css) should use only these tokens, never literal colours:
     surfaces  --paper --surface --surface-2 --line --line-strong
     text      --ink --muted
     accent    --lapis --lapis-ink --lapis-soft --lapis-hover
     header    --band --band-2 --band-ink --band-muted
     states    --majhul --majhul-soft --majhul-col --ism --ism-soft
               --good --good-ink --good-soft --bad --bad-soft
     effects   --shadow-sm --shadow --shadow-lg --backdrop --img-filter
     type      --ar --ui      shape  --r-s --r-m --r-l      layout  --gutter --maxw --tabbar-h --tap */

:root{
  --paper:#f2f5fa;
  --surface:#ffffff;
  --surface-2:#e8eef7;
  --ink:#14213a;
  --muted:#55627a;
  --line:#d3dbe8;
  --line-strong:#b4c3db;

  --lapis:#1d4b93;
  --lapis-ink:#ffffff;
  --lapis-soft:#e0e9f7;
  --lapis-hover:#cfdcf2;
  --band:#16396f;          /* header band */
  --band-2:#1f4d8f;
  --band-ink:#ffffff;
  --band-muted:#b9cbea;

  --majhul:#975406;
  --majhul-soft:#fbeed6;
  --majhul-col:#fdf6ea;
  --ism:#25695a;
  --ism-soft:#dcefe8;
  --bad:#b03a2c;
  --bad-soft:#fbe7e4;
  --good:#23744d;
  --good-ink:#ffffff;
  --good-soft:#dcf0e4;

  --shadow-sm:0 1px 2px rgba(20,33,58,.14);
  --shadow:0 1px 2px rgba(20,33,58,.06),0 8px 24px -12px rgba(20,33,58,.18);
  --shadow-lg:0 24px 64px -16px rgba(10,22,45,.45);
  --backdrop:rgba(8,18,38,.55);
  --img-filter:none;       /* book scans */

  --ar:"Noto Naskh Arabic","Amiri","Traditional Arabic","Scheherazade New",serif;
  --ui:"Alegreya Sans","Source Sans 3","Segoe UI",system-ui,sans-serif;

  --r-s:6px; --r-m:10px; --r-l:16px;
  --gutter:max(16px,env(safe-area-inset-left,0px));
  --gutter-r:max(16px,env(safe-area-inset-right,0px));
  --maxw:1320px;
  --tabbar-h:52px;
  --tap:40px;              /* minimum touch target */
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0c1424; --surface:#131e31; --surface-2:#1a2840; --ink:#e4eaf4; --muted:#9caac1;
    --line:#26364f; --line-strong:#36496a;
    --lapis:#8db3f2; --lapis-ink:#0b1426; --lapis-soft:#1b2f52; --lapis-hover:#243c66;
    --band:#0c1d38; --band-2:#14315c; --band-ink:#eef3fb; --band-muted:#9fb6dc;
    --majhul:#f1b860; --majhul-soft:#3a2a12; --majhul-col:#211c14;
    --ism:#7fd2b2; --ism-soft:#15372d;
    --bad:#f29384; --bad-soft:#3a1d1a; --good:#5fcf93; --good-ink:#08180f; --good-soft:#143425;
    --shadow-sm:0 1px 2px rgba(0,0,0,.45);
    --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px -14px rgba(0,0,0,.6);
    --shadow-lg:0 24px 64px -16px rgba(0,0,0,.75);
    --backdrop:rgba(2,6,14,.7);
    --img-filter:brightness(.88);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#0c1424; --surface:#131e31; --surface-2:#1a2840; --ink:#e4eaf4; --muted:#9caac1;
  --line:#26364f; --line-strong:#36496a;
  --lapis:#8db3f2; --lapis-ink:#0b1426; --lapis-soft:#1b2f52; --lapis-hover:#243c66;
  --band:#0c1d38; --band-2:#14315c; --band-ink:#eef3fb; --band-muted:#9fb6dc;
  --majhul:#f1b860; --majhul-soft:#3a2a12; --majhul-col:#211c14;
  --ism:#7fd2b2; --ism-soft:#15372d;
  --bad:#f29384; --bad-soft:#3a1d1a; --good:#5fcf93; --good-ink:#08180f; --good-soft:#143425;
  --shadow-sm:0 1px 2px rgba(0,0,0,.45);
  --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px -14px rgba(0,0,0,.6);
  --shadow-lg:0 24px 64px -16px rgba(0,0,0,.75);
  --backdrop:rgba(2,6,14,.7);
  --img-filter:brightness(.88);
  color-scheme:dark;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html:has(dialog[open]){overflow:hidden;scrollbar-gutter:stable}
body{
  margin:0;min-width:0;background:var(--paper);color:var(--ink);
  font-family:var(--ui);font-size:17px;line-height:1.5;
  font-feature-settings:"kern","liga";
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{line-height:1.2;text-wrap:balance}
p{margin:0}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
img{max-width:100%}
[hidden]{display:none!important}
.ar,[lang="ar"]{font-family:var(--ar);font-weight:400;font-feature-settings:normal}
:focus-visible{outline:3px solid var(--lapis);outline-offset:2px;border-radius:4px}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--surface);color:var(--lapis);padding:10px 14px;border-radius:var(--r-m);box-shadow:var(--shadow);font-weight:700}
.skip:focus{top:12px}

/* ---------- header band ---------- */
.site{
  position:relative;color:var(--band-ink);
  background-color:var(--band);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.11' stroke-width='1'%3E%3Crect x='17' y='17' width='22' height='22'/%3E%3Crect x='17' y='17' width='22' height='22' transform='rotate(45 28 28)'/%3E%3Ccircle cx='28' cy='28' r='5'/%3E%3Cpath d='M0 0l17 17M56 0L39 17M0 56l17-17M56 56L39 39'/%3E%3Crect x='-6' y='-6' width='12' height='12' transform='rotate(45 0 0)'/%3E%3Crect x='50' y='-6' width='12' height='12' transform='rotate(45 56 0)'/%3E%3Crect x='-6' y='50' width='12' height='12' transform='rotate(45 0 56)'/%3E%3Crect x='50' y='50' width='12' height='12' transform='rotate(45 56 56)'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(100deg,var(--band) 30%,var(--band-2));
  background-size:56px 56px,auto;
  background-position:right -14px center,0 0;
}
.site::after{ /* textbook border strip */
  content:"";position:absolute;left:0;right:0;bottom:0;height:7px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='7' viewBox='0 0 14 7'%3E%3Cpath d='M0 3.5L3.5 0 7 3.5 3.5 7zM7 3.5L10.5 0 14 3.5 10.5 7z' fill='none' stroke='%23fff' stroke-opacity='.35' stroke-width='.8'/%3E%3C/svg%3E") repeat-x center/14px 7px,
    var(--band-2);
  border-top:1px solid rgba(255,255,255,.18);
}
.site-in{
  max-width:var(--maxw);margin:0 auto;
  padding:max(12px,env(safe-area-inset-top,0px)) var(--gutter-r) 19px var(--gutter);
  display:grid;align-items:center;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"brand theme" "sub sub" "verbs verbs";
  gap:2px 12px;
}
.brand{grid-area:brand;min-width:0;display:flex;align-items:center;gap:9px;font-weight:700;font-size:1.3rem;letter-spacing:.01em;line-height:1.2}
.brand .star{width:20px;height:20px;fill:none;stroke:var(--band-ink);stroke-width:1.6;stroke-linejoin:round;flex:none}
.sub{grid-area:sub;min-width:0;color:var(--band-muted);font-size:.95rem;line-height:1.35}
.verbs{
  grid-area:verbs;min-width:0;
  margin:0;display:flex;flex-wrap:wrap;gap:0 4px;align-items:center;
  font-size:1.65rem;line-height:1.6;color:var(--band-ink);
}
.verbs span+span::before{content:"،";margin-inline:2px 8px;color:var(--band-muted)}
@media (min-width:700px){
  .site-in{
    padding-top:max(14px,env(safe-area-inset-top,0px));padding-bottom:21px;
    grid-template-columns:minmax(0,1fr) auto auto;
    grid-template-areas:"brand verbs theme" "sub verbs theme";
    column-gap:24px;
  }
}

/* theme switch: lives on the header band, which stays dark in every theme */
.theme{
  grid-area:theme;justify-self:end;display:inline-flex;gap:2px;padding:1px;
  border-radius:999px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);
}
.theme button{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-width:var(--tap);height:var(--tap);padding:0 10px;border:0;border-radius:999px;
  background:none;color:var(--band-muted);font-size:.9rem;font-weight:500;line-height:1;white-space:nowrap;
  transition:background-color .15s,color .15s;
}
.theme button:hover{color:var(--band-ink);background:rgba(255,255,255,.1)}
.theme button[aria-pressed="true"]{background:var(--band-ink);color:var(--band);font-weight:700}
.theme button:focus-visible{outline:2px solid var(--band-ink);outline-offset:2px;border-radius:999px}
.theme svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.theme svg .fill{fill:currentColor;stroke:none}
.theme .tl{display:none}
@media (min-width:1100px){.theme .tl{display:inline}.theme button{padding:0 13px 0 11px}}

/* ---------- tab bar ---------- */
.tabbar{
  position:sticky;top:0;z-index:20;
  background:color-mix(in srgb,var(--paper) 92%,transparent);
  -webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--line);
}
.tabbar-in{
  max-width:var(--maxw);margin:0 auto;display:flex;gap:4px;
  padding:0 var(--gutter-r) 0 var(--gutter);
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain;
}
.tabbar-in::-webkit-scrollbar{display:none}
.tabbar [role="tab"]{
  position:relative;flex:none;border:0;background:none;color:var(--muted);
  font-weight:500;font-size:1.05rem;height:var(--tabbar-h);padding:0 14px;
}
.tabbar [role="tab"]:hover{color:var(--ink)}
.tabbar [role="tab"][aria-selected="true"]{color:var(--lapis);font-weight:700}
.tabbar [role="tab"][aria-selected="true"]::after{
  content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:3px;border-radius:3px 3px 0 0;background:var(--lapis);
}
.tabbar [role="tab"]:focus-visible{outline-offset:-6px}

/* ---------- main / panels ---------- */
main{display:block;min-width:0}
.panel-tab{margin:0 auto;padding:20px var(--gutter-r) 40px var(--gutter);display:grid;grid-template-columns:minmax(0,1fr);gap:14px;outline:none}
.tab-wide{max-width:var(--maxw)}
.tab-narrow{max-width:760px}
.tab-guide{max-width:var(--maxw)}
.hint{color:var(--muted);font-size:.92rem}
.loading{color:var(--muted);padding:28px 0;text-align:center}
.loading.err{color:var(--bad)}
.loading .btn{margin-top:12px}
.sec-title{font-size:1.25rem;margin:14px 0 0;font-weight:700}
.key-mj{color:var(--majhul);font-weight:700}
.site-foot{max-width:var(--maxw);margin:0 auto;padding:8px var(--gutter-r) max(32px,env(safe-area-inset-bottom,0px)) var(--gutter);color:var(--muted);font-size:.85rem;text-align:center}
.noscript{max-width:760px;margin:16px auto;padding:12px 16px;background:var(--majhul-soft);color:var(--majhul);border-radius:var(--r-m)}

/* ---------- chips / segmented ---------- */
.toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px}
.chips{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.chip{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:var(--tap);
  border:1px solid var(--line);background:var(--surface);color:var(--ink);
  border-radius:999px;padding:3px 13px;font-size:.95rem;line-height:1.6;min-height:var(--tap);white-space:nowrap;
  transition:background-color .15s,border-color .15s,color .15s;
}
.chip:hover{border-color:var(--line-strong);background:var(--surface-2)}
.chip .ar{font-size:1.25em;line-height:1.3}
.chip small{font-size:.8em;opacity:.8;margin-inline-start:-2px}
.chip[aria-pressed="true"]{background:var(--lapis);border-color:var(--lapis);color:var(--lapis-ink)}
.seg{display:inline-flex;max-width:100%;padding:3px;gap:2px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line)}
.seg button{border:0;background:none;border-radius:999px;padding:4px 13px;font-size:.92rem;color:var(--muted);min-height:34px;white-space:nowrap}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--lapis);font-weight:700;box-shadow:var(--shadow-sm)}
.link{border:0;background:none;padding:2px 0;min-height:var(--tap);display:inline-flex;align-items:center;color:var(--lapis);font-size:.92rem;font-weight:500;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.link:hover{text-decoration-thickness:2px}
.link.danger{color:var(--bad)}

/* ---------- tasrif table ---------- */
.tscroll{
  direction:rtl;overflow:auto;position:relative;
  max-width:100%;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);
  box-shadow:var(--shadow);
  overscroll-behavior-x:contain;
  scrollbar-color:var(--line-strong) transparent;scrollbar-width:thin;
}
.tscroll:has(table:empty){display:none}
.tscroll-main{max-height:max(420px,calc(100svh - var(--tabbar-h) - 28px))}
.tscroll:focus-visible{outline-offset:3px;border-radius:var(--r-l)}
table.sarf{border-collapse:separate;border-spacing:0;direction:rtl;min-width:100%;font-size:.9rem}
table.sarf th,table.sarf td{
  border-bottom:1px solid var(--line);border-left:1px solid var(--line);
  padding:0;text-align:center;vertical-align:middle;background:var(--surface);
}
table.sarf tr>*:last-child{border-left:0}
table.sarf tbody tr:last-child>*{border-bottom:0}
table.sarf thead th{
  position:sticky;top:0;z-index:2;background:var(--surface-2);
  padding:8px 4px 7px;font-weight:500;border-bottom:1px solid var(--line-strong);
}
table.sarf thead th .ar{display:block;font-size:1rem;line-height:1.6;white-space:nowrap;color:var(--ink)}
table.sarf thead th .uz{display:block;font-size:.78rem;color:var(--muted);white-space:nowrap;direction:ltr;font-weight:500}
table.sarf td.mj{background:var(--majhul-col)}
table.sarf thead th.mj{background:var(--majhul-soft)}
table.sarf thead th.mj .uz{color:var(--majhul)}
table.sarf .p{
  position:sticky;right:0;z-index:1;min-width:76px;padding:4px 10px;
  background:var(--surface);
  box-shadow:-1px 0 0 var(--line-strong);
}
table.sarf thead .p{z-index:3;background:var(--surface-2)}
table.sarf .p .ar{display:block;font-size:1.25rem;line-height:1.5;color:var(--lapis)}
table.sarf .p .uz{display:block;font-size:.76rem;color:var(--muted);font-weight:500;direction:ltr;white-space:nowrap}
table.sarf thead .p .uz{font-size:.8rem}
table.sarf tr.grp>*{background:var(--surface-2);border-bottom:1px solid var(--line-strong);height:26px}
table.sarf tr.grp th.p{background:var(--surface-2);text-align:right;padding:0;min-width:0;z-index:2;box-shadow:none}
table.sarf tr.grp .glabel{position:absolute;top:50%;right:10px;transform:translateY(-50%);direction:ltr;display:block;font-size:.76rem;font-weight:700;color:var(--lapis);letter-spacing:.02em;white-space:nowrap}
table.sarf tr.grp td{position:relative}
.cell{
  width:100%;min-height:64px;border:0;background:none;color:var(--ink);
  padding:7px 4px 8px;display:grid;gap:0;justify-items:center;align-content:center;
  transition:background-color .12s;
}
.cell:hover{background:var(--lapis-soft)}
.cell:focus-visible{outline:2px solid var(--lapis);outline-offset:-3px;border-radius:2px;background:var(--lapis-soft)}
td.mj .cell:hover,td.mj .cell:focus-visible{background:color-mix(in srgb,var(--majhul-soft) 80%,var(--lapis-soft))}
.cell .w{font-family:var(--ar);font-size:1.55rem;line-height:1.55;white-space:nowrap;direction:rtl}
.cell .t{font-size:.78rem;color:var(--muted);direction:ltr;max-width:104px;line-height:1.25;margin-top:1px}
.empty{color:var(--line-strong)}
.ism-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-items:start}
@media (min-width:900px){.ism-grid{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}}

/* ---------- filters ---------- */
.filters{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);display:grid;box-shadow:var(--shadow);min-width:0}
.fsum{ /* one-line summary bar; tap to show/hide the filters */
  display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  min-height:50px;padding:6px 16px;border:0;background:none;color:var(--ink);text-align:start;border-radius:var(--r-l);
}
.fsum:hover .fsum-r{color:var(--ink)}
.fsum:focus-visible{outline-offset:-3px}
.fsum-r{display:inline-flex;align-items:center;gap:8px;color:var(--lapis);font-weight:700;font-size:.95rem;white-space:nowrap}
.fsum-r svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
.fsum[aria-expanded="true"] .fsum-r svg{transform:rotate(180deg)}
.fbadge{min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--lapis);color:var(--lapis-ink);font-size:.8rem;line-height:22px;text-align:center;font-variant-numeric:tabular-nums}
.f-body{display:grid;gap:10px;padding:12px 16px 14px;border-top:1px solid var(--line);min-width:0}
.f-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 14px}
.count{font-weight:500;min-width:0}
.count b{color:var(--lapis);font-size:1.2rem;font-variant-numeric:tabular-nums}
.frow{display:grid;grid-template-columns:76px minmax(0,1fr);gap:10px;align-items:start}
.frow>.seg{justify-self:start}
.flabel{font-size:.88rem;color:var(--muted);font-weight:700;padding-top:9px}
.search{width:100%;min-height:40px;padding:7px 12px;border:1px solid var(--line-strong);border-radius:var(--r-m);background:var(--surface);color:var(--ink)}
.search::placeholder{color:var(--muted);opacity:.8}
details.more{border-top:1px solid var(--line);padding-top:10px}
details.more>summary{cursor:pointer;color:var(--lapis);font-weight:700;list-style:none;display:inline-flex;flex-wrap:wrap;align-items:center;gap:0 8px;min-height:var(--tap);border-radius:6px}
details.more>summary::-webkit-details-marker{display:none}
details.more>summary::before{
  content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .15s;margin-inline:2px 2px
}
details.more[open]>summary::before{transform:rotate(45deg)}
details.more>summary span{color:var(--muted);font-weight:400;font-size:.9rem}
.morebody{display:grid;gap:12px;padding-top:12px}
.toggles{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:.95rem}
.toggles label{display:flex;gap:8px;align-items:center;cursor:pointer;min-height:var(--tap)}
.toggles input{width:18px;height:18px;accent-color:var(--lapis);margin:0}
.listwrap{border:1px solid var(--line);border-radius:var(--r-m);max-height:360px;overflow:auto;background:var(--surface)}
.listwrap table{width:100%;border-collapse:collapse;font-size:.92rem}
.listwrap th,.listwrap td{text-align:start;padding:6px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.listwrap th{position:sticky;top:0;background:var(--surface-2);font-size:.82rem;color:var(--muted);font-weight:700;z-index:1}
.listwrap td.w{font-family:var(--ar);font-size:1.4rem;direction:rtl;white-space:nowrap;line-height:1.5}
.listwrap tr.r{cursor:pointer}
.listwrap tr.r:hover td,.listwrap tr.r:focus-visible td{background:var(--lapis-soft)}
.listwrap tr.r:focus-visible{outline:2px solid var(--lapis);outline-offset:-2px}
.listwrap tr.known td{color:var(--muted)}
.listwrap tr.known td.w::after{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--good);margin-inline-start:8px;vertical-align:middle}
.listwrap .note{padding:10px 12px;color:var(--muted);font-size:.88rem}

/* ---------- progress ---------- */
.progress{display:grid;gap:6px}
.bar{height:6px;background:var(--surface-2);border-radius:99px;overflow:hidden;border:1px solid var(--line)}
.bar>i{display:block;height:100%;background:linear-gradient(90deg,var(--good),color-mix(in srgb,var(--good) 70%,var(--lapis)));width:0;border-radius:99px;transition:width .3s ease}
.stats{display:flex;justify-content:space-between;gap:8px;font-size:.9rem;color:var(--muted);font-variant-numeric:tabular-nums}

/* ---------- flashcard ---------- */
#stage{perspective:1400px;min-width:0}
.card{
  position:relative;display:grid;min-height:320px;min-width:0;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);
  box-shadow:var(--shadow);
  transform-origin:50% 50%;
}
.card::before{ /* inner textbook frame */
  content:"";position:absolute;inset:7px;border:1px solid var(--lapis-soft);border-radius:11px;pointer-events:none;
  box-shadow:inset 0 0 0 3px var(--surface),inset 0 0 0 4px var(--lapis-soft);
}
.card.front{cursor:pointer;user-select:none;-webkit-user-select:none}
.card.front:hover{border-color:var(--line-strong)}
.card.front:focus-visible{outline:3px solid var(--lapis);outline-offset:3px;border-radius:var(--r-l)}
.card .knot{position:absolute;top:-1px;left:50%;width:28px;height:28px;transform:translate(-50%,-50%);color:var(--lapis);background:var(--paper);border-radius:50%;padding:4px}
.card .knot svg{width:100%;height:100%;fill:var(--surface);stroke:currentColor;stroke-width:1.5;stroke-linejoin:round}
.face-front{display:grid;place-items:center;align-content:center;padding:44px 22px 30px;gap:12px;text-align:center}
.face-front .word{font-family:var(--ar);font-size:clamp(3.2rem,14vw,5.6rem);line-height:1.6;direction:rtl}
.face-front .rev-uz{font-size:clamp(1.4rem,5vw,1.8rem);font-weight:700;line-height:1.3;text-wrap:balance}
.face-front .rev-ru{color:var(--muted);font-size:1.05rem}
.face-front .hint{max-width:34ch;font-size:.9rem}
.face-back{padding:24px 20px 18px;cursor:auto}
.done{display:grid;place-items:center;align-content:center;gap:12px;padding:40px 20px;text-align:center}
.done .big{font-size:1.4rem;font-weight:700}
.done .btn{min-width:220px}

/* ---------- analysis (shared by modal and card back) ---------- */
.an{display:grid;gap:14px;min-width:0}
.an-head{display:grid;gap:4px;justify-items:center;text-align:center;padding:4px 0 2px}
.an-word{font-family:var(--ar);font-size:clamp(2.8rem,10vw,3.8rem);line-height:1.55;direction:rtl;margin:0;font-weight:400}
.an-uz{font-size:1.25rem;font-weight:700;line-height:1.3;text-wrap:balance}
.an-ru{color:var(--muted);font-size:1rem}
.tags{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.an .tags{justify-content:center}
.tag{font-size:.84rem;font-weight:700;padding:2px 10px;border-radius:999px;background:var(--lapis-soft);color:var(--lapis);line-height:1.6;white-space:nowrap}
.tag.majhul{background:var(--majhul-soft);color:var(--majhul)}
.tag.ism{background:var(--ism-soft);color:var(--ism)}
.tag.plain{background:var(--surface-2);color:var(--muted)}
.deflist{margin:0;display:grid;grid-template-columns:minmax(96px,max-content) minmax(0,1fr);border-top:1px solid var(--line)}
.deflist dt,.deflist dd{margin:0;padding:9px 0;border-bottom:1px solid var(--line)}
.deflist dt{color:var(--muted);font-size:.88rem;font-weight:700;padding-inline-end:16px;padding-top:11px}
.deflist dd{min-width:0;overflow-wrap:anywhere}
.deflist .ar{font-size:1.3em;line-height:1.5}
.deflist .sep{color:var(--line-strong);margin-inline:6px}
details.book{border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface-2)}
details.book>summary{cursor:pointer;list-style:none;padding:10px 14px;display:flex;align-items:center;gap:10px;font-weight:700;color:var(--lapis);border-radius:var(--r-m)}
details.book>summary::-webkit-details-marker{display:none}
details.book>summary::before{content:"";flex:none;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .15s}
details.book[open]>summary::before{transform:rotate(45deg)}
details.book>summary small{color:var(--muted);font-weight:400;font-size:.88rem}
.pages{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:12px;padding:0 12px 12px}
.pages figure{margin:0;display:grid;gap:4px}
.pages a{display:block;border-radius:6px;line-height:0}
.pages img{width:100%;height:auto;aspect-ratio:641/910;border:1px solid var(--line);border-radius:6px;background:#fff;filter:var(--img-filter)} /* white: the scans are paper */
.pages a:hover img{border-color:var(--lapis)}
.pages figcaption{font-size:.84rem;color:var(--muted)}

/* ---------- action buttons ---------- */
.actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-weight:700;font-size:1.05rem;min-height:52px;padding:10px 14px;border-radius:var(--r-m);
  border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);
  transition:filter .12s,background-color .12s,transform .08s;
}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.5;cursor:default}
.btn.flip{grid-column:1/-1;background:var(--lapis);border-color:var(--lapis);color:var(--lapis-ink)}
.btn.flip:hover:not(:disabled){filter:brightness(1.08)}
.btn.bad{border-color:color-mix(in srgb,var(--bad) 55%,var(--line));color:var(--bad)}
.btn.bad:hover{background:var(--bad-soft)}
.btn.good{background:var(--good);border-color:var(--good);color:var(--good-ink)}
.btn.good:hover{filter:brightness(1.07)}
.keys{display:inline-flex;gap:4px}
kbd{font-family:var(--ui);font-size:.74rem;font-weight:500;line-height:1;padding:4px 6px;border-radius:5px;border:1px solid currentColor;opacity:.75;min-width:1.6em;text-align:center}
.foot{color:var(--muted);font-size:.85rem;text-align:center;max-width:60ch;justify-self:center}
@media (hover:none){.keys{display:none}}

/* ---------- dialog ---------- */
dialog#dlg{
  border:0;padding:0;margin:auto;
  width:min(720px,calc(100% - 24px));max-height:calc(100dvh - 24px);
  background:var(--surface);color:var(--ink);border-radius:var(--r-l);box-shadow:var(--shadow-lg);
  overflow:hidden;
}
dialog#dlg[open]{display:flex;flex-direction:column}
dialog#dlg::backdrop{background:rgba(8,18,38,.55);background:var(--backdrop,rgba(8,18,38,.55));-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.dlg-in{display:flex;flex-direction:column;min-height:0;max-height:calc(100dvh - 24px)}
.dlg-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 10px 8px 18px;border-bottom:1px solid var(--line);background:var(--surface)}
.dlg-head .tags{flex:1}
.x{flex:none;width:40px;height:40px;display:grid;place-items:center;border:0;background:none;border-radius:var(--r-m);color:var(--muted)}
.x:hover{background:var(--surface-2);color:var(--ink)}
.x svg,.navbtn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dlg-body{overflow:auto;padding:14px 20px 18px;overscroll-behavior:contain;min-height:0}
.dlg-nav{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);background:var(--surface-2)}
.navbtn{display:flex;align-items:center;gap:8px;border:0;background:none;color:var(--ink);padding:8px 14px;text-align:start;min-height:56px}
.navbtn+.navbtn{border-left:1px solid var(--line)}
.navbtn.next{justify-content:flex-end;text-align:end}
.navbtn:hover{background:var(--lapis-soft)}
.navbtn:focus-visible{outline-offset:-3px}
.navbtn>span{display:grid;line-height:1.2}
.navbtn small{font-size:.8rem;color:var(--muted)}
.navbtn .ar{font-size:1.35rem;line-height:1.5}
.navbtn svg{color:var(--lapis);flex:none}
@media (min-width:621px){
  dialog#dlg[open]{animation:dlg-in .18s ease-out}
}
@keyframes dlg-in{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
/* phones: full-screen sheet; head and prev/next bar stay put while the body scrolls */
@media (max-width:620px){
  html:has(dialog[open]){scrollbar-gutter:auto} /* the sheet covers the page, no gutter stripe */
  dialog#dlg{
    width:100%;max-width:100%;height:100%;height:100dvh;max-height:100%;max-height:100dvh;
    margin:0;inset:0;border-radius:0;box-shadow:none;
  }
  dialog#dlg[open]{animation:sheet-in .22s cubic-bezier(.2,.8,.2,1)}
  .dlg-in{height:100%;max-height:none}
  .dlg-head{
    padding:max(6px,env(safe-area-inset-top,0px)) max(8px,env(safe-area-inset-right,0px)) 6px max(14px,env(safe-area-inset-left,0px));
    min-height:52px;
  }
  .x{width:44px;height:44px}
  .dlg-body{flex:1;padding:12px max(14px,env(safe-area-inset-right,0px)) 18px max(14px,env(safe-area-inset-left,0px))}
  .dlg-nav{padding:0 env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)}
  .navbtn{min-height:60px;padding:8px 12px}
}
@keyframes sheet-in{from{transform:translateY(24px);opacity:.4}to{transform:none;opacity:1}}

/* ---------- qoidalar (guide) ---------- */
.guide{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:start}
@media (min-width:1040px){.guide{grid-template-columns:240px minmax(0,780px);justify-content:center;gap:40px}}
.toc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--shadow)}
@media (min-width:1040px){.toc{position:sticky;top:calc(var(--tabbar-h) + 16px);max-height:calc(100vh - var(--tabbar-h) - 32px);overflow:auto}}
.toc>summary{cursor:pointer;list-style:none;padding:12px 16px;font-weight:700;display:flex;align-items:center;gap:10px;color:var(--ink)}
.toc>summary::-webkit-details-marker{display:none}
.toc>summary::before{content:"";width:8px;height:8px;border-right:2px solid var(--lapis);border-bottom:2px solid var(--lapis);transform:rotate(-45deg);transition:transform .15s}
.toc[open]>summary::before{transform:rotate(45deg)}
.toc ol{list-style:none;margin:0;padding:0 8px 10px}
.toc a{display:block;padding:5px 10px;border-radius:8px;color:var(--muted);text-decoration:none;font-size:.95rem;line-height:1.3}
.toc a:hover{background:var(--surface-2);color:var(--ink)}
.toc a.on{color:var(--lapis);background:var(--lapis-soft);font-weight:700}

.prose{min-width:0;font-size:1.06rem;line-height:1.62}
.prose>*+*{margin-top:.9em}
.prose h1{font-size:2rem;margin:0 0 .2em;font-weight:700;color:var(--ink)}
.prose h2{
  font-size:1.45rem;margin-top:2.2em;padding-top:.9em;font-weight:700;color:var(--lapis);
  border-top:1px solid var(--line);position:relative;scroll-margin-top:calc(var(--tabbar-h) + 12px)
}
.prose h2::before{ /* small star knot on the rule */
  content:"";position:absolute;top:-6px;left:0;width:11px;height:11px;background:var(--paper);
  border:1.5px solid var(--lapis);transform:rotate(45deg);
}
.prose h3{font-size:1.18rem;margin-top:1.8em;font-weight:700;scroll-margin-top:calc(var(--tabbar-h) + 12px)}
.prose p,.prose li{max-width:72ch}
.prose ul,.prose ol{padding-inline-start:1.3em}
.prose li+li{margin-top:.25em}
.prose li::marker{color:var(--lapis)}
.prose strong{font-weight:700}
.prose hr{display:none}
.prose a{color:var(--lapis)}
.prose code{font-family:var(--ui);background:var(--surface-2);padding:1px 6px;border-radius:5px;font-size:.95em}
.prose .ar{font-size:1.3em;line-height:1.4}
.prose blockquote{
  margin:1.2em 0;padding:12px 16px;border-radius:0 var(--r-m) var(--r-m) 0;
  background:var(--lapis-soft);border-left:3px solid var(--lapis);color:var(--ink)
}
.prose blockquote p+p{margin-top:.4em}
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface);max-width:100%}
.prose table{border-collapse:collapse;width:100%;font-size:.97rem;line-height:1.45}
.prose th,.prose td{padding:7px 12px;border-bottom:1px solid var(--line);vertical-align:middle;text-align:start}
.prose thead th{background:var(--surface-2);font-weight:700;color:var(--muted);font-size:.88rem;white-space:nowrap}
.prose tbody tr:last-child>*{border-bottom:0}
.prose td .ar{font-size:1.35em;white-space:nowrap}
.prose td.arc{text-align:center}
.prose details{border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface);padding:0}
.prose details>summary{cursor:pointer;padding:12px 16px;color:var(--lapis);font-weight:700}
.prose details[open]>summary{border-bottom:1px solid var(--line)}
.prose details>.tablewrap{border:0;border-radius:0 0 var(--r-m) var(--r-m)}
.prose .meta{color:var(--muted)}
.prose .meta strong{color:var(--ink)}

/* ---------- small screens ---------- */
@media (max-width:620px){
  body{font-size:16px}
  .site-in{padding-bottom:17px}
  .brand{font-size:1.15rem}
  .sub{font-size:.86rem}
  .verbs{font-size:1.3rem;line-height:1.5}
  @media (max-width:400px){.sub{font-size:.79rem}}

  /* tab bar: 4 tabs share a 360px row; scrolls sideways if a 5th ever arrives */
  .tabbar-in{gap:0}
  .tabbar [role="tab"]{flex:1 0 auto;padding:0 8px;font-size:1rem}
  .tabbar [role="tab"][aria-selected="true"]::after{left:6px;right:6px}

  .panel-tab{padding-top:14px;gap:12px}

  /* jadval toolbar: verb chips become one swipeable row, translation switch spans the width */
  .toolbar{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
  .toolbar>.chips{
    flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;
    margin-inline:calc(-1 * var(--gutter)) calc(-1 * var(--gutter-r));
    padding-inline:var(--gutter) var(--gutter-r);scroll-padding-inline:var(--gutter);
    scroll-snap-type:x proximity;
  }
  .toolbar>.chips::-webkit-scrollbar{display:none}
  .toolbar>.chips .chip{flex:none;scroll-snap-align:start}
  .toolbar>.seg{display:flex}
  .seg button{flex:1 1 0;min-height:var(--tap);padding:4px 8px}

  /* tasrif table: tighter cells, header words may break onto two lines */
  table.sarf{font-size:.86rem}
  table.sarf thead th{padding:6px 3px 5px}
  table.sarf thead th .ar{font-size:.95rem;line-height:1.45;white-space:normal;min-width:4.5em}
  table.sarf thead th .uz{font-size:.72rem}
  .cell{min-height:54px;padding:5px 4px 6px}
  .cell .w{font-size:1.32rem;line-height:1.5}
  .cell .t{max-width:92px;font-size:.72rem}
  table.sarf .p{min-width:56px;padding:4px 5px}
  table.sarf .p .ar{font-size:1.1rem}
  table.sarf .p .uz{font-size:.7rem}
  table.sarf tr.grp .glabel{right:8px}

  /* kartochkalar */
  .frow{grid-template-columns:minmax(0,1fr);gap:4px}
  .flabel{padding-top:0}
  .fsum{padding:4px 14px}
  .f-body{padding:10px 12px 12px;gap:8px}
  .filters .chip{padding:2px 11px;font-size:.92rem}
  .card{min-height:300px}
  .face-back{padding:22px 14px 14px}

  .deflist{grid-template-columns:minmax(0,1fr)}
  .deflist dt{padding-bottom:0;border-bottom:0}
  .deflist dd{padding-top:2px}
  .prose{font-size:1rem}
  .prose h1{font-size:1.6rem}
  .prose th,.prose td{padding:6px 9px}
  .toc a{padding:10px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
}
@media print{
  .tabbar,.site-foot,.skip{display:none}
  .tscroll{max-height:none;overflow:visible;box-shadow:none}
}