/* Sarf · xLabs — Mashqlar tab.
   Only the custom properties from app.css are used, so this follows light, dark and a forced data-theme on <html>.
   Generic pieces (.chip, .seg, .btn, .tag, .filters, .frow, .bar, kbd) come from app.css. */

.ex{gap:14px}
.ex-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
#ex-root{display:grid;gap:14px;min-width:0}
.ex-setup,.ex-play{display:grid;gap:14px;min-width:0}
.ex svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- mode picker ---------- */
.ex-modes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:700px){.ex-modes{grid-template-columns:repeat(4,minmax(0,1fr))}}
.ex-mode{
  display:grid;grid-template-rows:auto auto 1fr;justify-items:start;align-content:start;gap:4px;
  text-align:start;padding:12px 12px 13px;min-height:118px;min-width:0;
  border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:var(--r-l);
  box-shadow:var(--shadow);transition:border-color .15s,background-color .15s,box-shadow .15s;
}
.ex-mode:hover{border-color:var(--line-strong)}
.ex-mi{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--lapis-soft);color:var(--lapis);margin-bottom:4px;transition:background-color .15s,color .15s}
.ex-mi svg{width:22px;height:22px}
.ex-mi .fill{fill:currentColor}
.ex-mt{font-weight:700;font-size:1.02rem;line-height:1.2}
.ex-md{font-size:.85rem;color:var(--muted);line-height:1.3}
.ex-mode[aria-pressed="true"]{border-color:var(--lapis);background:var(--lapis-soft);box-shadow:inset 0 0 0 1px var(--lapis),var(--shadow)}
.ex-mode[aria-pressed="true"] .ex-mi{background:var(--lapis);color:var(--lapis-ink)}
.ex-mode[aria-pressed="true"] .ex-mt{color:var(--lapis)}
.ex-mode:focus-visible{border-radius:var(--r-l)}

.ex-filters{
  display:grid;gap:10px;min-width:0;padding:14px 16px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--shadow);
}
.ex-filters .seg{max-width:100%}
.ex-filters .hint{margin:0}
.ex-check{display:flex;align-items:center;gap:8px;min-height:36px;cursor:pointer;font-size:.95rem}
.ex-check input{width:18px;height:18px;accent-color:var(--lapis);margin:0}
.ex-start{
  position:sticky;bottom:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;
  margin:0 -4px;padding:10px 4px calc(10px + env(safe-area-inset-bottom,0px));
  background:var(--paper);box-shadow:0 -1px 0 var(--line);
}
.ex-start .count{min-width:0}
.ex-start .btn{min-width:200px;flex:1 1 200px;max-width:320px}
.ex-start .btn{background:var(--lapis);border-color:var(--lapis);color:var(--lapis-ink)}

/* ---------- play header ---------- */
.ex-top{display:flex;align-items:center;gap:10px;min-width:0}
.ex-back{
  flex:none;display:inline-flex;align-items:center;gap:2px;min-height:40px;padding:0 14px 0 8px;
  border:1px solid var(--line);background:var(--surface);color:var(--lapis);border-radius:999px;font-weight:700;font-size:.95rem;
}
.ex-back:hover{background:var(--surface-2)}
.ex-back svg{width:20px;height:20px;stroke-width:2.2}
.ex-title{flex:1;min-width:0;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ex-stat{flex:none;font-weight:700;color:var(--lapis);font-variant-numeric:tabular-nums;font-size:1.05rem}
.ex-stat.pen{animation:ex-pen .5s}
@keyframes ex-pen{0%,100%{color:var(--lapis)}20%{color:var(--bad);transform:scale(1.12)}}
.ex-stage{display:grid;gap:12px;min-width:0}

/* ---------- prompt card ---------- */
.ex-card{
  position:relative;display:grid;justify-items:center;align-content:center;gap:6px;text-align:center;min-width:0;
  min-height:172px;padding:24px 18px 20px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--shadow);
}
.ex-card::before{
  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);
}
.ex-card>*{position:relative}
.ex-ql{font-size:.85rem;font-weight:700;color:var(--muted);letter-spacing:.02em}
.ex-par{font-family:var(--ar);font-size:clamp(2.6rem,12vw,3.8rem);line-height:1.55;direction:rtl;outline:none}
.ex-ptr{font-size:clamp(1.35rem,5.4vw,1.75rem);font-weight:700;line-height:1.3;text-wrap:balance;outline:none;max-width:30ch}
.ex-ctx{justify-content:center}
.ex-ctx .ar{font-size:1.2em;line-height:1}
.ex-claim{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:4px 10px;margin-top:4px;padding:8px 14px;border-radius:var(--r-m);background:var(--surface-2);border:1px solid var(--line);max-width:100%}
.ex-ck{font-size:.85rem;font-weight:700;color:var(--muted)}
.ex-cv{font-size:1.15rem;font-weight:700;color:var(--ink)}
.ex-cv.ar-o{font-family:var(--ar);font-size:1.9rem;font-weight:400;line-height:1.4}
.ex-wcard{min-height:0}

/* ---------- options ---------- */
.ex-opts{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.ex-opts.two{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:560px){.ex-opts{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}
.ex-opt{
  display:flex;align-items:center;gap:10px;min-height:58px;min-width:0;padding:9px 12px;
  border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);border-radius:var(--r-m);
  text-align:start;font-size:1.02rem;line-height:1.3;touch-action:manipulation;
  transition:border-color .12s,background-color .12s,opacity .15s;
}
.ex-opt:hover:not(:disabled){border-color:var(--lapis);background:var(--lapis-soft)}
.ex-opt:active:not(:disabled){transform:translateY(1px)}
.ex-opt:disabled{cursor:default}
.ex-num{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:.8rem;font-weight:700;background:var(--surface-2);color:var(--muted);border:1px solid var(--line)}
.ex-ot{flex:1;min-width:0;overflow-wrap:anywhere}
.ex-ot.ar-o{font-family:var(--ar);font-size:1.6rem;line-height:1.45;text-align:center;overflow-wrap:normal}
.ex-opt.is-ok{border-color:var(--good);background:color-mix(in srgb,var(--good) 15%,var(--surface));box-shadow:inset 0 0 0 1px var(--good)}
.ex-opt.is-ok .ex-num{background:var(--good);border-color:var(--good);color:var(--good-ink)}
.ex-opt.is-bad{border-color:var(--bad);background:var(--bad-soft);box-shadow:inset 0 0 0 1px var(--bad)}
.ex-opt.is-bad .ex-num{background:var(--bad);border-color:var(--bad);color:var(--surface)}
.ex-opt.is-bad{animation:ex-shake .4s}
.ex-opt.is-dim{opacity:.5}

/* ---------- true / false ---------- */
.ex-tf{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ex-tf .btn{min-height:60px;font-size:1.1rem;gap:8px}
.ex-tf .btn svg{width:22px;height:22px;flex:none}
.ex-yes{border-color:color-mix(in srgb,var(--good) 55%,var(--line));color:var(--good)}
.ex-yes:hover:not(:disabled){background:color-mix(in srgb,var(--good) 12%,var(--surface))}
.ex-no{border-color:color-mix(in srgb,var(--bad) 55%,var(--line));color:var(--bad)}
.ex-no:hover:not(:disabled){background:var(--bad-soft)}
.ex-tf .btn:disabled{opacity:1}
.ex-tf .btn.is-ok{background:var(--good);border-color:var(--good);color:var(--good-ink)}
.ex-tf .btn.is-bad{background:var(--bad);border-color:var(--bad);color:var(--surface);animation:ex-shake .4s}
.ex-tf .btn.is-dim{opacity:.45}

/* ---------- feedback ---------- */
.ex-fbwrap:empty{display:none}
.ex-fb{display:grid;gap:10px;padding:14px 16px 16px;border-radius:var(--r-l);border:1px solid var(--line);min-width:0;animation:ex-in .2s ease-out}
.ex-fb.ok{border-color:color-mix(in srgb,var(--good) 45%,var(--line));background:color-mix(in srgb,var(--good) 8%,var(--surface))}
.ex-fb.bad{border-color:color-mix(in srgb,var(--bad) 45%,var(--line));background:var(--bad-soft)}
.ex-fb-h{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;font-weight:700;font-size:1.12rem}
.ex-fb-h svg{width:24px;height:24px;flex:none;stroke-width:2}
.ex-fb.ok .ex-fb-h{color:var(--good)}
.ex-fb.bad .ex-fb-h{color:var(--bad)}
.ex-fb-r{font-size:.84rem;font-weight:500;color:var(--muted);margin-inline-start:auto}
.ex-fb-ans,.ex-fb-given{line-height:1.45}
.ex-fb-ans .ar,.ex-fb-note .ar{font-size:1.35em;line-height:1.3}
.ex-big{font-family:var(--ar);font-size:1.8rem;line-height:1.4;margin-inline-start:4px}
.ex-fb-ans .ex-big{color:var(--good)}
.ex-fb.bad .ex-fb-given .ex-big{color:var(--bad)}
.ex-fb-note{font-size:.92rem;color:var(--muted)}
.ex-fb-c{display:flex;align-items:center;gap:6px 16px;flex-wrap:wrap;padding:8px 12px;border-radius:var(--r-m);background:var(--surface);border:1px solid var(--line)}
.ex-fb-w{font-family:var(--ar);font-size:2rem;line-height:1.5;direction:rtl}
.ex-fb-m{display:grid;gap:4px;min-width:0;flex:1 1 200px}
.ex-fb-t{font-weight:700;line-height:1.3}
.ex-fb-iz{font-size:.94rem;line-height:1.5;overflow-wrap:anywhere}
.ex-fb-iz b{color:var(--muted);font-size:.86rem;margin-inline-end:4px}
.ex-fb-iz .ar{font-size:1.3em;line-height:1.3}
.ex-fb-a{display:flex;gap:10px;flex-wrap:wrap}
.ex-fb-a .btn{flex:1 1 150px}
.ex-fb-a .btn.flip{flex:2 1 200px}

/* ---------- match ---------- */
.ex-mhint{text-align:center}
.ex-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
@media (min-width:560px){.ex-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}}
.ex-tile{
  position:relative;display:grid;place-items:center;min-width:0;min-height:86px;padding:8px 6px;
  border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);border-radius:var(--r-m);
  box-shadow:var(--shadow);text-align:center;font-size:.9rem;line-height:1.25;
  touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;
  transition:border-color .12s,background-color .12s,transform .1s;
}
@media (min-width:560px){.ex-tile{min-height:104px;font-size:.98rem;padding:10px}}
.ex-tile:hover:not(:disabled){border-color:var(--lapis)}
.ex-tile .w{display:block;max-width:100%;font-family:var(--ar);font-size:1.6rem;line-height:1.45;direction:rtl}
@media (min-width:560px){.ex-tile .w{font-size:1.9rem}}
.ex-tile .t{display:block;max-width:100%;overflow-wrap:anywhere;hyphens:auto}
.ex-tile.tr{background:var(--surface-2)}
.ex-tile[aria-pressed="true"]{border-color:var(--lapis);background:var(--lapis-soft);box-shadow:inset 0 0 0 2px var(--lapis);transform:translateY(-1px)}
.ex-tile.bad{border-color:var(--bad);background:var(--bad-soft);box-shadow:inset 0 0 0 2px var(--bad);animation:ex-shake .4s}
.ex-tile.ok{border-color:var(--good);background:color-mix(in srgb,var(--good) 18%,var(--surface));box-shadow:inset 0 0 0 2px var(--good);animation:ex-pop .38s ease-in forwards;cursor:default}
.ex-tile.gone{visibility:hidden}
@keyframes ex-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
@keyframes ex-pop{0%{transform:scale(1);opacity:1}35%{transform:scale(1.05);opacity:1}100%{transform:scale(.7);opacity:0}}
@keyframes ex-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- write ---------- */
.ex-write{display:grid;gap:10px;min-width:0}
.ex-in{
  width:100%;min-height:62px;padding:6px 14px;text-align:center;
  font-family:var(--ar);font-size:2rem;line-height:1.4;
  border:1px solid var(--line-strong);border-radius:var(--r-m);background:var(--surface);color:var(--ink);
  box-shadow:inset 0 1px 2px color-mix(in srgb,var(--ink) 8%,transparent);
}
.ex-in:focus{outline:3px solid var(--lapis);outline-offset:1px;border-color:var(--lapis)}
.ex-in.need{animation:ex-shake .4s;border-color:var(--bad)}
.ex-in.is-ok{border-color:var(--good);background:color-mix(in srgb,var(--good) 10%,var(--surface))}
.ex-in.is-bad{border-color:var(--bad);background:var(--bad-soft)}
.ex-wa{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 12px}
.ex-wa .hint{font-size:.86rem}
.ex-wbtn{display:grid;grid-template-columns:1fr 2fr;gap:10px}
.ex-wbtn .btn,.ex-tf .btn{grid-column:auto}
.ex-kbd{
  display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:5px;padding:7px;direction:rtl;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-l);
}
.ex-key{
  min-width:0;min-height:46px;padding:0;display:grid;place-items:center;
  border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:8px;
  font-family:var(--ar);font-size:1.45rem;line-height:1;box-shadow:0 1px 0 var(--line-strong);
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;
}
.ex-key:hover:not(:disabled){border-color:var(--line-strong);background:var(--lapis-soft)}
.ex-key:active:not(:disabled){background:var(--lapis-hover);transform:translateY(1px);box-shadow:none}
.ex-key:disabled{opacity:.5;cursor:default}
.ex-key.hk{color:var(--lapis);font-size:2.1rem;line-height:1;padding-bottom:2px}
.ex-key.bs{color:var(--muted)}
.ex-key.bs svg{width:22px;height:22px;transform:scaleX(-1)}
.ex-key.sp{grid-column:1/-1;font-family:var(--ui);font-size:.9rem;color:var(--muted);min-height:42px}
@media (max-width:400px){.ex-kbd{gap:4px;padding:5px}.ex-key{font-size:1.3rem;min-height:44px;border-radius:7px}.ex-key.hk{font-size:1.9rem}}

/* ---------- end screens ---------- */
.ex-end{
  display:grid;gap:10px;justify-items:center;text-align:center;padding:26px 18px 20px;min-width:0;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--shadow);animation:ex-in .2s ease-out;
}
.ex-end-k{font-weight:700;color:var(--muted);font-size:.92rem}
.ex-score{line-height:1.1}
.ex-score b{font-size:clamp(2.8rem,12vw,3.6rem);color:var(--lapis);font-variant-numeric:tabular-nums}
.ex-score span{font-size:1.4rem;color:var(--muted);font-weight:700}
.ex-badge{font-weight:700;color:var(--good-ink);background:var(--good);padding:3px 14px;border-radius:999px;font-size:.95rem}
.ex-end-a{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;width:100%;margin-top:6px}
.ex-end-a .btn{flex:1 1 160px;max-width:300px}
.ex-mist{width:100%;text-align:start;display:grid;gap:8px;margin-top:6px}
.ex-mist h3{margin:0;font-size:1.05rem;display:flex;align-items:center;gap:8px}
.ex-mist h3 span{font-size:.82rem;background:var(--bad-soft);color:var(--bad);padding:1px 9px;border-radius:999px}
.ex-mist ul,.ex-pairs ul{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden}
.ex-mist li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"w q a" "w r a";align-items:center;gap:0 14px;padding:8px 12px;border-bottom:1px solid var(--line)}
.ex-mist li:last-child,.ex-pairs li:last-child{border-bottom:0}
.ex-mist .w{grid-area:w;font-family:var(--ar);font-size:1.55rem;line-height:1.5;white-space:nowrap}
.ex-mist .ex-mq{grid-area:q;font-size:.82rem;color:var(--muted);font-weight:700}
.ex-mist .ex-mq .ar{font-size:1.3em;font-weight:400}
.ex-mist .ex-mr{grid-area:r;display:flex;flex-wrap:wrap;gap:0 12px;font-size:.94rem;min-width:0;overflow-wrap:anywhere}
.ex-mist .ex-mr .ok{color:var(--good);font-weight:700}
.ex-mist .ex-mr .bad{color:var(--bad)}
.ex-mist .ex-mr .ar{font-size:1.3em;line-height:1.3}
.ex-mist .link{grid-area:a}
.ex-pairs{width:100%;text-align:start}
.ex-pairs>summary{cursor:pointer;color:var(--lapis);font-weight:700;padding:6px 0;list-style:none;display:flex;align-items:center;justify-content:center;gap:8px;min-height:40px}
.ex-pairs>summary::-webkit-details-marker{display:none}
.ex-pairs>summary::before{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .15s}
.ex-pairs[open]>summary::before{transform:rotate(45deg)}
.ex-pairs[open]>summary{margin-bottom:6px}
.ex-pairs li{display:flex;align-items:center;gap:14px;padding:6px 12px;border-bottom:1px solid var(--line)}
.ex-pairs li>span:nth-child(2){flex:1;min-width:0}
.ex-pairs .w{font-family:var(--ar);font-size:1.45rem;line-height:1.5}

@media (max-width:620px){
  .ex-card{min-height:150px;padding:20px 14px 16px}
  .ex-mode{min-height:0;padding:10px 10px 11px}
  .ex-md{font-size:.8rem}
  .ex-back span{font-size:.9rem}
  .ex-mist li{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"w q" "w r" "w a";justify-items:start}
  .ex-fb{padding:12px 13px 14px}
  .ex-filters{padding:12px;gap:8px}
  .ex-filters .frow{grid-template-columns:minmax(0,1fr);gap:4px}
  .ex-filters .flabel{padding-top:0}
}