/* Read Arabic Books
   Layout: a slim site bar over one content column; the reader adds a word-study panel that docks right
   on wide screens and rises as a bottom sheet on phones. */
:root{
  --paper:#f3f4f1; --sheet:#fbfcfa; --ink:#1d2321; --muted:#5f6a66; --rule:#d7dcd8;
  --lapis:#23508f; --lapis-soft:#e3eaf5; --gold:#9a6b12; --gold-soft:#f6ecd6; --hl:#fbeec7;
  --good:#2f7a4f; --good-soft:#e1f0e6; --bad:#a23b2a; --bad-soft:#f6e1dc;
  --ar:"Traditional Arabic","Amiri","Scheherazade New","Times New Roman",serif;
  --serif:"Literata",Georgia,serif;
  --ui:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --arsize:1.9rem; --maxw:1180px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#121615; --sheet:#1a1f1e; --ink:#e6ebe8; --muted:#9aa7a2; --rule:#2e3633;
  --lapis:#8db3ec; --lapis-soft:#1f2c40; --gold:#e0b25a; --gold-soft:#3a2f17; --hl:#4a3d17;
  --good:#7ccf9c; --good-soft:#173525; --bad:#f09a88; --bad-soft:#3d1f19; color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#121615; --sheet:#1a1f1e; --ink:#e6ebe8; --muted:#9aa7a2; --rule:#2e3633;
  --lapis:#8db3ec; --lapis-soft:#1f2c40; --gold:#e0b25a; --gold-soft:#3a2f17; --hl:#4a3d17;
  --good:#7ccf9c; --good-soft:#173525; --bad:#f09a88; --bad-soft:#3d1f19; color-scheme:dark}

*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--paper);color:var(--ink);font-family:var(--ui);font-size:15px;line-height:1.5;min-height:100vh;display:flex;flex-direction:column}
[hidden]{display:none!important}
a{color:var(--lapis)}
h1,h2,h3{text-wrap:balance;line-height:1.25}
img{max-width:100%}
.skip{position:absolute;left:-999px;top:8px;background:var(--sheet);padding:8px 12px;z-index:50}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--lapis);outline-offset:2px}

/* site bar */
header.site{background:var(--sheet);border-bottom:1px solid var(--rule);position:sticky;top:0;z-index:20;padding-top:env(safe-area-inset-top,0px)}
.site-in{max-width:var(--maxw);margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:12px 24px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);margin-right:auto}
.mark{width:36px;height:36px;border-radius:9px;background:var(--lapis);color:var(--sheet);display:grid;place-items:center;font-family:var(--ar);font-size:1.6rem;line-height:1;padding-bottom:4px}
.bt{display:flex;flex-direction:column;line-height:1.15}
.bt strong{font-size:.98rem;letter-spacing:.01em}
.bt .bar{font-family:var(--ar);font-size:1rem;color:var(--muted)}
.mainnav{display:flex;gap:4px;flex-wrap:wrap}
.mainnav a{text-decoration:none;color:var(--muted);font-weight:500;font-size:.9rem;padding:6px 10px;border-radius:6px}
.mainnav a:hover{color:var(--ink);background:var(--paper)}
.mainnav a[aria-current="page"]{color:var(--lapis);background:var(--lapis-soft)}
.account{display:flex;align-items:center;gap:8px}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--gold-soft);color:var(--gold);display:grid;place-items:center;font-weight:600;font-size:.85rem;overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover}
.who{font-size:.85rem;color:var(--muted);max-width:14ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:640px){.who{display:none}.bt .bar{display:none}.mainnav{order:3;width:100%;overflow-x:auto;flex-wrap:nowrap}}
.demo{background:var(--gold-soft);color:var(--ink);font-size:.85rem;text-align:center;padding:8px 16px}

main#view{flex:1;width:100%;max-width:var(--maxw);margin:0 auto;padding-inline:16px;padding-block:24px 64px;outline:none}
.site-foot{border-top:1px solid var(--rule);color:var(--muted);font-size:.8rem;text-align:center;padding:16px 16px calc(16px + env(safe-area-inset-bottom,0px))}
.site-foot p{margin:2px 0}
.loading{color:var(--muted)}

/* controls */
.btn{font:500 .88rem var(--ui);border:1px solid var(--rule);background:var(--sheet);color:var(--ink);border-radius:7px;padding:8px 12px;cursor:pointer;display:inline-flex;gap:7px;align-items:center;text-decoration:none;line-height:1.2}
.btn:hover{border-color:var(--lapis)}
.btn:disabled{opacity:.55;cursor:default;border-color:var(--rule)}
.btn.primary{background:var(--lapis);border-color:var(--lapis);color:var(--sheet)}
.btn.primary:hover{filter:brightness(1.08)}
.btn.danger{color:var(--bad);border-color:var(--bad-soft)}
.btn.danger:hover{border-color:var(--bad)}
.btn.small{padding:5px 9px;font-size:.8rem}
.btn[aria-pressed="true"]{background:var(--lapis);border-color:var(--lapis);color:var(--sheet)}
.gbtn{background:var(--sheet);color:var(--ink);border:1px solid var(--rule)}
.gbtn svg{width:16px;height:16px}
.link{background:none;border:0;color:var(--lapis);font:500 .85rem var(--ui);cursor:pointer;padding:4px 0}
.link:disabled{color:var(--muted);cursor:default}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.spacer{flex:1}
input[type=text],input[type=search],input[type=number],textarea,select{font:inherit;color:var(--ink);background:var(--sheet);border:1px solid var(--rule);border-radius:7px;padding:8px 10px;width:100%}
textarea{resize:vertical;line-height:1.6}
textarea.ar,input.ar{font-family:var(--ar);font-size:1.35rem;direction:rtl;line-height:1.9}
label.f{display:grid;gap:4px;font-size:.82rem;color:var(--muted);font-weight:500}
.eyebrow{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600;margin:0 0 6px}
.muted{color:var(--muted)}
.ar-t{font-family:var(--ar);direction:rtl}
.arx{font-family:var(--ar);font-size:1.2em}
.empty{color:var(--muted);font-size:.92rem}
.card{background:var(--sheet);border:1px solid var(--rule);border-radius:12px;padding:18px}
.pill{display:inline-flex;align-items:center;gap:4px;font:600 .72rem var(--ui);letter-spacing:.05em;text-transform:uppercase;padding:3px 8px;border-radius:99px;background:var(--rule);color:var(--muted)}
.pill.good{background:var(--good-soft);color:var(--good)}
.pill.gold{background:var(--gold-soft);color:var(--gold)}
.pill.blue{background:var(--lapis-soft);color:var(--lapis)}
.meter{height:6px;border-radius:99px;background:var(--rule);overflow:hidden}
.meter>i{display:block;height:100%;background:var(--lapis);border-radius:99px}
.meter.good>i{background:var(--good)}
.pct{font-variant-numeric:tabular-nums;font-size:.8rem;color:var(--muted)}
#toasts{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);display:grid;gap:8px;z-index:60;width:min(92vw,420px)}
.toast{background:var(--ink);color:var(--paper);padding:10px 14px;border-radius:8px;font-size:.9rem;box-shadow:0 6px 20px rgba(0,0,0,.2)}
.toast.bad{background:var(--bad);color:#fff}
@media(max-width:959px){#toasts{bottom:auto;top:calc(12px + env(safe-area-inset-top,0px))}}

/* library */
.hero{display:grid;gap:6px;margin-bottom:28px;max-width:70ch}
.hero h1{font-family:var(--serif);font-weight:600;font-size:clamp(1.6rem,3.5vw,2.2rem);margin:0}
.hero p{margin:0;color:var(--muted);font-size:1.02rem}
.hero .ar-h{font-family:var(--ar);font-size:1.6rem;color:var(--lapis);margin:0}
.books{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:18px}
.book{display:grid;grid-template-rows:auto 1fr auto;gap:10px;text-decoration:none;color:inherit;background:var(--sheet);border:1px solid var(--rule);border-radius:12px;padding:20px;transition:border-color .15s}
.book:hover{border-color:var(--lapis)}
.book .bar-ar{font-family:var(--ar);font-size:2rem;line-height:1.4;direction:rtl;margin:0;color:var(--ink)}
.book h2{font-family:var(--serif);font-size:1.12rem;font-weight:600;margin:0}
.book .by{font-size:.86rem;color:var(--muted);margin:2px 0 0}
.book .desc{font-family:var(--serif);font-size:.93rem;color:var(--muted);margin:0}
.book .foot{display:grid;gap:6px}
.book .foot .row{justify-content:space-between}
.sec-h{display:flex;align-items:baseline;gap:12px;margin:34px 0 14px;flex-wrap:wrap}
.sec-h h2{margin:0;font-size:1.1rem}

/* book page */
.bookhead{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 24px;align-items:end;border-bottom:1px solid var(--rule);padding-bottom:18px;margin-bottom:8px}
@media(max-width:700px){.bookhead{grid-template-columns:1fr}}
.bookhead .bar-ar{font-family:var(--ar);font-size:2.6rem;line-height:1.3;margin:0;direction:rtl;text-align:right}
@media(min-width:701px){.bookhead .bar-ar{text-align:left}}
.bookhead h1{font-family:var(--serif);font-size:1.4rem;margin:4px 0 0;font-weight:600}
.bookhead p{margin:4px 0 0;color:var(--muted)}
.chapters{list-style:none;padding:0;margin:0}
.chapters li{border-bottom:1px solid var(--rule)}
.chapters li a{display:grid;grid-template-columns:42px minmax(0,1fr) 140px;gap:16px;align-items:center;padding:14px 4px;text-decoration:none;color:inherit}
.chapters li .chsum{margin:-4px 160px 14px 62px}
.chapters li a:hover{background:var(--sheet)}
.chapters .n{font-family:var(--ar);font-size:1.5rem;color:var(--gold);text-align:center}
.chapters .nm{display:grid;gap:2px;min-width:0}
.chapters .nm b{font-weight:600}
.chapters .nm .ar-t{font-size:1.25rem;color:var(--muted)}
.chapters .pg{display:grid;gap:4px}
@media(max-width:560px){.chapters li a{grid-template-columns:32px minmax(0,1fr)}.chapters .pg{grid-column:2}.chapters li .chsum{margin:-4px 4px 14px 52px}}
/* the book's own outline: parts (folding) and their divisions */
.parts-bar{display:flex;justify-content:space-between;align-items:baseline;gap:6px 16px;flex-wrap:wrap;margin:14px 0 2px;font-size:.85rem}
.parts-bar p{margin:0}
.part{border-bottom:1px solid var(--rule)}
.part>summary{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:4px 14px;align-items:center;padding:16px 4px;cursor:pointer;list-style:none}
.part>summary::-webkit-details-marker{display:none}
.part>summary::before{content:'';width:7px;height:7px;border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(-45deg);justify-self:center}
.part[open]>summary::before{transform:rotate(45deg)}
.part>summary:hover{background:var(--sheet)}
.part .ph{display:grid;gap:2px;min-width:0}
.part .ph b{font-family:var(--serif);font-size:1.15rem;font-weight:600}
.part>summary .ar-t{font-size:1.45rem;color:var(--muted);line-height:1.4}
.part>.chapters,.subpart{margin-left:34px}
.subhead{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 14px;align-items:baseline;padding:12px 4px 6px;border-bottom:1px solid var(--rule)}
.subhead .ph b{font-family:var(--serif);font-size:1rem;color:var(--lapis)}
.subhead .ar-t{font-size:1.25rem;color:var(--muted)}
.subpart .chapters li:last-child{border-bottom:0}
.subpart{margin-bottom:6px}
@media(max-width:700px){.part>summary{grid-template-columns:20px minmax(0,1fr)}.part>summary .ar-t{grid-column:2}.subhead{grid-template-columns:1fr}.part>.chapters,.subpart{margin-left:10px}}

/* reader */
.reader{display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
@media(min-width:960px){.reader{grid-template-columns:minmax(0,1fr) 340px}}
.rhead{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:14px 28px;align-items:flex-end;justify-content:space-between;border-bottom:1px solid var(--rule);padding-bottom:14px}
.rhead .crumb{font-size:.85rem;margin:0 0 4px}
.rhead .crumb a{text-decoration:none}
.rhead h1{font-family:var(--ar);font-weight:700;font-size:2.1rem;line-height:1.35;margin:0;direction:rtl}
.rhead .sub{margin:2px 0 0;color:var(--muted);font-family:var(--serif)}
.rhead .rpages{margin:2px 0 0;color:var(--muted);font-size:.8rem}
.controls{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.sz{display:inline-flex}.sz .btn{border-radius:0}.sz .btn:first-child{border-radius:7px 0 0 7px}.sz .btn:last-child{border-radius:0 7px 7px 0;border-left:0}
.rprog{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 14px;align-items:center;margin-top:-12px}
.rmain{min-width:0}
.hint{font-size:.86rem;color:var(--muted);margin:0 0 14px}
.chsum{background:var(--sheet);border:1px solid var(--rule);border-left:3px solid var(--lapis);border-radius:0 8px 8px 0;padding:10px 14px;margin:0 0 8px;font-family:var(--serif);font-size:1rem;line-height:1.6}
.chsum summary{font:600 .8rem var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--lapis);cursor:pointer}
.chsum p{margin:10px 0 0}.chsum ul{margin:8px 0 0;padding-left:1.2em}.chsum li{margin:3px 0}
.signin-note{background:var(--lapis-soft);border-radius:8px;padding:10px 14px;font-size:.88rem;margin:0 0 16px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.para{display:grid;grid-template-columns:minmax(0,1fr) 34px;gap:4px 12px;padding-block:18px;border-bottom:1px solid var(--rule)}
.para .num{grid-column:2;grid-row:1;font:600 .75rem var(--ui);color:var(--gold);text-align:center;padding-top:.9rem;font-variant-numeric:tabular-nums}
.para.done .num{color:var(--good)}
.para .arp{grid-column:1;grid-row:1;direction:rtl;text-align:justify;font-family:var(--ar);font-size:var(--arsize);line-height:2.15;margin:0}
.para.head .arp{font-weight:700;text-align:right;color:var(--lapis)}
.para.verse .arp{text-align:center;color:var(--lapis)}
.hem{display:inline-block;width:2.5em}
.w{cursor:pointer;border-radius:4px;padding:0 1px;transition:background .12s;touch-action:manipulation}
.w:hover{background:var(--lapis-soft)}
.w.same{background:var(--hl)}
.w.cur{background:var(--lapis);color:var(--sheet)}
.w.voc{background:var(--hl);color:var(--ink);box-shadow:0 0 0 1px var(--gold)}
.w.saved{text-decoration:underline dotted var(--gold);text-underline-offset:.45em}
.prow{grid-column:1;display:flex;gap:6px 18px;flex-wrap:wrap;align-items:center}
.prow .link{font-size:.8rem}
.pgtag{font:500 .75rem var(--ui);color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.markbtn{font:600 .78rem var(--ui);border:1px solid var(--rule);background:none;color:var(--muted);border-radius:99px;padding:4px 10px;cursor:pointer;margin-left:auto;display:inline-flex;gap:6px;align-items:center}
.markbtn:hover{border-color:var(--good);color:var(--good)}
.markbtn[aria-pressed="true"]{background:var(--good-soft);border-color:var(--good-soft);color:var(--good)}
.markbtn .plainstar{color:var(--gold)}
.en{grid-column:1;font-family:var(--serif);font-size:1.02rem;line-height:1.65;max-width:68ch;margin:6px 0 0;padding:12px 14px;background:var(--sheet);border-left:3px solid var(--gold);border-radius:0 6px 6px 0}
.para.head .en{border-left-color:var(--lapis)}
/* laptops and wider: the reader page widens, and a shown translation sits to the left of its Arabic paragraph */
@media(min-width:1100px){
  main#view:has(> .reader){max-width:1480px}
  .para.showen{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr) 34px;column-gap:24px}
  .para.showen .en{grid-column:1;grid-row:1/span 2;align-self:start;margin:.45rem 0 0;max-width:none;border-left:0;border-right:3px solid var(--gold);border-radius:6px 0 0 6px}
  .para.head.showen .en{border-right-color:var(--lapis)}
  .para.showen .arp,.para.showen .prow{grid-column:2}
  .para.showen .num{grid-column:3}
}
.chend{display:flex;gap:10px;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-top:24px}
.srcnote{font-size:.8rem;color:var(--muted);margin-top:18px}
aside.study{min-width:0}
.panel{background:var(--sheet);border:1px solid var(--rule);border-radius:12px;padding:18px}
@media(min-width:960px){.panel{position:sticky;top:calc(env(safe-area-inset-top,0px) + 76px);max-height:calc(100vh - 96px);overflow:auto}}
@media(max-width:959px){
  aside.study{position:fixed;left:0;right:0;bottom:0;z-index:15;padding:0 8px calc(env(safe-area-inset-bottom,0px) + 8px)}
  .panel{max-height:46vh;overflow:auto;box-shadow:0 -6px 24px rgba(0,0,0,.18)}
  .panel.closed .pbody{display:none}
  .reader{padding-bottom:120px}
}
.sheetbar{display:none}
@media(max-width:959px){.sheetbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}}
.wbig{font-family:var(--ar);direction:rtl;font-size:2.6rem;line-height:1.5;margin:0}
.wvoc{font-family:var(--ar);direction:rtl;font-size:1.7rem;color:var(--lapis);margin:0}
.wmean{font-family:var(--serif);font-size:1.15rem;margin:8px 0 12px}
dl.meta{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;margin:0 0 14px;font-size:.88rem}
dl.meta dt{color:var(--muted);font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;padding-top:2px}
dl.meta dd{margin:0}
.root{font-family:var(--ar);font-size:1.35rem;direction:rtl;display:inline-block;letter-spacing:.15em}
.occ{font-size:.82rem;color:var(--muted);margin:0 0 12px}
.case{display:inline-block;font:600 .72rem var(--ui);letter-spacing:.07em;text-transform:uppercase;padding:3px 8px;border-radius:99px;background:var(--lapis-soft);color:var(--lapis);margin:4px 0 10px}
.case.b{background:var(--rule);color:var(--muted)}
.why{font-family:var(--serif);font-size:1.02rem;line-height:1.6;margin:0 0 14px}
.ctx{font-family:var(--ar);direction:rtl;font-size:1.3rem;line-height:1.9;color:var(--muted);margin:0 0 12px}
.ctx b{color:var(--ink)}

/* progress dashboard */
.dash{display:grid;gap:18px;grid-template-columns:repeat(12,minmax(0,1fr))}
.dash>*{grid-column:span 12;min-width:0}
@media(min-width:860px){.dash .s4{grid-column:span 4}.dash .s8{grid-column:span 8}.dash .s6{grid-column:span 6}}
.score{display:grid;gap:10px}
.score .big{font-size:3rem;font-weight:600;line-height:1;font-variant-numeric:tabular-nums;color:var(--lapis)}
.score .lvl{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.score .lvl .ar-t{font-size:1.6rem;color:var(--gold)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.stat{border:1px solid var(--rule);border-radius:10px;padding:12px;background:var(--sheet)}
.stat b{display:block;font-size:1.5rem;font-variant-numeric:tabular-nums}
.stat span{font-size:.8rem;color:var(--muted)}
.breakdown{width:100%;border-collapse:collapse;font-size:.88rem}
.breakdown td{padding:7px 4px;border-bottom:1px solid var(--rule)}
.breakdown td:last-child{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;max-width:320px}
.cal i{aspect-ratio:1;border-radius:4px;background:var(--rule);display:block}
.cal i.on{background:var(--good)}
.cal i.today{outline:2px solid var(--gold);outline-offset:1px}
.bprog{display:grid;gap:14px}
.bprog .it{display:grid;gap:6px}
.bprog .it .row{justify-content:space-between}

/* words + review */
.wl{width:100%;border-collapse:collapse}
.wl th{font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);text-align:left;padding:6px;border-bottom:1px solid var(--rule)}
.wl td{padding:8px 6px;border-bottom:1px solid var(--rule);vertical-align:middle}
.wl .a{font-family:var(--ar);font-size:1.5rem;direction:rtl;white-space:nowrap}
.tblwrap{overflow-x:auto}
.flash{display:grid;gap:14px;justify-items:center;text-align:center;padding:28px 18px}
.flash .a{font-family:var(--ar);font-size:3.2rem;line-height:1.5;direction:rtl}
.flash .ans{min-height:4.2em;display:grid;gap:4px}
.flash .ans .v{font-family:var(--ar);font-size:1.8rem;color:var(--lapis)}
.flash .ans .m{font-family:var(--serif);font-size:1.15rem}
.boxes{display:flex;gap:4px}
.boxes i{width:16px;height:6px;border-radius:3px;background:var(--rule)}
.boxes i.on{background:var(--good)}

/* admin */
.adm-grid{display:grid;gap:18px}
.adm-book{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center}
.adm-ch{list-style:none;margin:0;padding:0}
.adm-ch li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 4px;border-bottom:1px solid var(--rule)}
.form2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:12px}
.tabs{display:flex;gap:4px;margin-bottom:14px;flex-wrap:wrap}
.tab{font:600 .78rem var(--ui);letter-spacing:.06em;text-transform:uppercase;background:none;border:0;border-bottom:2px solid var(--rule);color:var(--muted);padding:8px 10px;cursor:pointer}
.tab[aria-selected="true"]{color:var(--lapis);border-color:var(--lapis)}
.ed-para{display:grid;gap:8px;padding:14px 0;border-bottom:1px solid var(--rule)}
.ed-para .row .eyebrow{margin:0}
.warn{background:var(--gold-soft);border-radius:8px;padding:8px 12px;font-size:.85rem}
.err{background:var(--bad-soft);color:var(--bad);border-radius:8px;padding:8px 12px;font-size:.85rem}
.lexed{width:100%;border-collapse:collapse;font-size:.88rem}
.lexed td,.lexed th{padding:4px;border-bottom:1px solid var(--rule);text-align:left}
.lexed input{padding:5px 7px;font-size:.88rem}
.lexed td:first-child{font-family:var(--ar);font-size:1.3rem;direction:rtl;white-space:nowrap}
.progressbar{display:grid;gap:6px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}