/* ===== UX layer (Phase 2) — identity: ivory #F0E4CC · burgundy #7A1F2B · Markazi ===== */
:root{
  --ux-ivory:#F0E4CC;--ux-ivory2:#F7EEDC;--ux-burg:#7A1F2B;--ux-burg2:#5E1520;--ux-gold:#A87A2A;--ux-gold-l:#C9993F;--ux-ink:#2A1A12;--ux-ink2:#5A4636;
  --purple:#7A1F2B!important;--purple2:#5E1520!important;
  /* type scale — 7 sizes */
  --fs-1:13px;--fs-2:16px;--fs-3:18px;--fs-4:21px;--fs-5:26px;--fs-6:33px;--fs-7:42px;
  --ux-r:12px;--ux-h:44px;--ux-font:"LxBody","Markazi Text",serif;
}
html.light,body.light,[data-theme=light]{--purple:#7A1F2B!important;--purple2:#5E1520!important}
/* 4 — Markazi everywhere; decorative calligraphy only for logo/name */
body,body :where(*:not(svg):not(svg *):not(.logo b):not(.lp-t):not(.lpg-by):not(.lr-pl b):not(.lr-gen b)){font-family:var(--ux-font)!important}
.fw-q,.sh-txt{font-family:var(--ux-font)!important}
.logo b{font-family:"LPCal","LxHead",serif!important}
/* 3 — type scale */
h1{font-size:clamp(var(--fs-5),4vw,var(--fs-7))!important;line-height:1.35}
h2{font-size:var(--fs-5)!important;line-height:1.4}
h3{font-size:var(--fs-4)!important}
h4{font-size:var(--fs-3)!important}
small,.eyebrow,.rh-pill,.chip{font-size:var(--fs-1)}
/* 5 — no purple: burgundy primary, gold outline secondary */
.side-reels-btn,.side-nav .side-reels-btn{background:transparent!important;color:inherit!important;border:1.5px solid var(--ux-gold-l)!important;box-shadow:none!important}
.side-reels-btn .si{color:var(--ux-gold-l)!important}
/* 6 — buttons */
.btn,.rd-gold,.rd-ghost,.rd-rbtn,.xs-btn,button.go,.ux-btn{border-radius:var(--ux-r)!important;min-height:var(--ux-h);display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn-gold,.rd-gold,.rd-rbtn-gold,.ux-btn-p{background:var(--ux-burg)!important;color:#FFF7E8!important;border:1px solid var(--ux-burg)!important}
.btn-gold:hover,.rd-gold:hover,.ux-btn-p:hover{background:var(--ux-burg2)!important}
.rd-ghost,.ux-btn-s{background:transparent!important;border:1.5px solid var(--ux-gold-l)!important;color:inherit!important}
.ux-btn{padding:0 18px;font-size:var(--fs-2);font-weight:700;text-decoration:none;cursor:pointer}
/* lesson page: one primary + icon bar */
.rd-acts .lv-actions .btn:not(:first-child){display:none!important}
.rd-acts .lv-actions .btn:first-child{background:transparent!important;color:inherit!important;border:1.5px solid var(--ux-gold-l)!important}
.ux-ibar{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.ux-ib{min-width:44px;min-height:44px;border-radius:12px;border:1px solid rgba(168,122,42,.45);background:rgba(240,228,204,.08);color:inherit;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 12px;font-size:var(--fs-2);cursor:pointer;text-decoration:none}
.ux-ib[aria-pressed=true]{background:var(--ux-burg);color:#FFF7E8;border-color:var(--ux-burg)}
.ux-ib:focus-visible,.ux-btn:focus-visible,a:focus-visible,button:focus-visible{outline:3px solid var(--ux-gold-l);outline-offset:2px}
/* 1 + 2 — mobile */
@media (max-width:760px){
  body{font-size:var(--fs-2)!important}
  p,li,td,input,select,textarea,.rd-desc,.lx-text p{font-size:max(16px,1em)!important}
  input,select,textarea{font-size:16px!important}
  a.ib,button.ib,.mobile-bottom a,.rd-tab,.fw-chip,.ed-chip,.ux-ib,.drawer a{min-height:44px;min-width:44px}
  .head-tools > :not(.menu-btn){display:none!important}
  .head-tools .menu-btn{width:44px;height:44px;font-size:22px}
  .logo > span:not(.em){position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .mobile-bottom{min-height:64px;padding-bottom:env(safe-area-inset-bottom)}
  .mobile-bottom a{font-size:var(--fs-1)!important;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;flex:1}
  .ux-quote-m{display:block!important}
}
.ux-quote-m{display:none;margin:12px 16px;padding:12px 16px;border-inline-start:3px solid var(--ux-gold-l);background:rgba(240,228,204,.9);color:var(--ux-ink);border-radius:12px;font-size:var(--fs-2)}
.ux-dtools{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:8px 12px}
.ux-dtools a,.ux-dtools button{min-height:44px;border-radius:12px;border:1px solid rgba(168,122,42,.4);background:transparent;color:inherit;display:flex;align-items:center;justify-content:center;font-size:var(--fs-1);text-decoration:none}
/* 7/19 — grouped nav */
.ux-ng{margin:6px 0 10px;width:100%;flex:0 0 auto}
.side-nav.main-nav{flex-wrap:nowrap!important;overflow-y:auto}
.ux-ng > .ux-ngh{letter-spacing:0;opacity:1;margin:0}
.side-nav .ux-ng .nav-link{min-height:40px}
/* 8 — empty states / skeleton / 404 */
.ux-empty{padding:24px;border:1px dashed rgba(168,122,42,.5);border-radius:14px;text-align:center}
.ux-empty h3{margin:.2em 0}
.ux-sugg{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:10px}
.ux-sugg a,.ux-sugg button{min-height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--ux-gold-l);background:transparent;color:inherit;display:inline-flex;align-items:center;cursor:pointer;text-decoration:none}
.ux-skel{display:grid;gap:12px;padding:16px}
.ux-skel i{display:block;height:18px;border-radius:8px;background:linear-gradient(90deg,rgba(168,122,42,.12),rgba(168,122,42,.28),rgba(168,122,42,.12));background-size:200% 100%;animation:uxsk 1.2s infinite}
.ux-skel i:nth-child(1){height:34px;width:60%}.ux-skel i:nth-child(3){width:80%}
@keyframes uxsk{to{background-position:-200% 0}}
/* 15 — resume hero / welcome strip */
.ux-resume{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:14px auto;max-width:1100px;padding:12px 16px;border-radius:14px;background:var(--ux-ivory);color:var(--ux-ink);border:1px solid var(--ux-gold-l)}
.ux-resume b{font-size:var(--fs-3)}
.ux-resume small{display:block;color:var(--ux-ink2);font-size:var(--fs-1)}
.ux-welcome{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px auto;max-width:1100px;padding:0 12px}
.ux-welcome a{min-height:64px;border-radius:14px;padding:12px;background:var(--ux-ivory);color:var(--ux-ink);border:1px solid var(--ux-gold-l);text-decoration:none;display:flex;flex-direction:column;justify-content:center}
.ux-welcome a b{font-size:var(--fs-3);color:var(--ux-burg)}
.ux-welcome a span{font-size:var(--fs-1);color:var(--ux-ink2)}
.ux-welcome .ux-x{grid-column:1/-1;justify-self:start;margin-top:4px;min-height:40px;padding:0 16px;border-radius:999px;border:1.5px solid var(--ux-gold-l);background:transparent;color:var(--ux-burg);cursor:pointer;font-family:LxBody,"Markazi Text",serif;font-size:var(--fs-2);font-weight:700;text-decoration:none}
.ux-welcome .ux-x:hover,.ux-welcome .ux-x:focus-visible{background:rgba(122,31,43,.08);border-color:var(--ux-burg)}
@media (max-width:760px){.ux-welcome{grid-template-columns:1fr}}
/* 16 — player */
.ux-player{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0}
.ux-player select{min-height:44px;border-radius:12px;padding:0 10px;background:var(--ux-ivory);color:var(--ux-ink);border:1px solid var(--ux-gold-l)}
.ux-mini{position:fixed;inset-inline-start:16px;bottom:84px;width:320px;max-width:calc(100vw - 32px);z-index:60;border-radius:14px;overflow:hidden;box-shadow:0 12px 40px rgba(0,0,0,.45);border:2px solid var(--ux-gold-l);background:#000}
.ux-mini iframe{width:100%!important;aspect-ratio:16/9;height:auto!important}
.ux-minibar{display:flex;justify-content:space-between;align-items:center;background:var(--ux-burg);color:#FFF7E8;font-size:var(--fs-1);padding:0 4px}
.ux-minibar button{min-width:44px;min-height:44px;background:none;border:0;color:inherit;font-size:18px;cursor:pointer}
/* 17 — about / source line */
.ux-about{max-width:900px;margin:0 auto;padding:16px}
.ux-about .ux-card{background:var(--ux-ivory);color:var(--ux-ink);border:1px solid var(--ux-gold-l);border-radius:16px;padding:24px;margin-bottom:16px}
.ux-about .ux-card h2{color:var(--ux-burg);margin-top:0}
.ux-bio{font-size:var(--fs-4);line-height:1.8}
.ux-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.ux-src{font-size:var(--fs-1);opacity:.85;margin:8px 0;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.ux-src a{color:inherit;text-decoration:underline;min-height:44px;display:inline-flex;align-items:center}
/* 20 — timed search hits */
.ux-hits{display:grid;gap:10px;margin:16px 0}
.ux-hit{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;padding:12px 14px;border-radius:12px;background:var(--ux-ivory);color:var(--ux-ink);border:1px solid rgba(168,122,42,.45)}
.ux-hit .ux-ts{grid-row:span 2;align-self:center;min-width:64px;min-height:44px;border-radius:10px;background:var(--ux-burg);color:#FFF7E8;display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums;text-decoration:none;font-weight:700}
.ux-hit p{margin:0;font-size:var(--fs-2)}
.ux-hit small{color:var(--ux-ink2);display:flex;gap:10px;flex-wrap:wrap}
.ux-hit small a{color:var(--ux-burg)}
mark.ux-m{background:rgba(201,153,63,.35);color:inherit;border-radius:3px}
/* 21 — bookmarks */
.ux-bm{max-width:1000px;margin:0 auto;padding:16px}
.ux-bm .ux-card{background:var(--ux-ivory);color:var(--ux-ink);border:1px solid var(--ux-gold-l);border-radius:16px;padding:18px;margin-bottom:14px}
.ux-bm ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.ux-bm li{display:flex;gap:8px;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(168,122,42,.25);padding:6px 0}
.ux-bm li a{color:var(--ux-burg);font-weight:700}
.ux-bm blockquote{margin:4px 0;padding:4px 10px;border-inline-start:3px solid var(--ux-gold-l);font-size:var(--fs-2)}
.ux-pop{position:absolute;z-index:80;background:var(--ux-burg);color:#FFF7E8;border-radius:12px;padding:4px;display:flex;gap:4px;box-shadow:0 6px 20px rgba(0,0,0,.35)}
.ux-pop button{min-height:44px;padding:0 12px;background:none;border:0;color:inherit;cursor:pointer;font-size:var(--fs-2)}
/* extras — badges, transitions */
.ux-badge{position:fixed;inset-inline:0;top:20%;margin:auto;width:max-content;max-width:90vw;z-index:90;background:var(--ux-ivory);color:var(--ux-burg);border:2px solid var(--ux-gold-l);border-radius:18px;padding:18px 26px;text-align:center;box-shadow:0 18px 50px rgba(0,0,0,.4);font-size:var(--fs-4);animation:uxpop .4s ease}
.ux-badge small{display:block;color:var(--ux-ink2);font-size:var(--fs-2)}
@keyframes uxpop{from{transform:scale(.85);opacity:0}}
#app.ux-in{animation:uxfade .25s ease}
@keyframes uxfade{from{opacity:.4;transform:translateY(6px)}}
.sr-only,.ux-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[dir=rtl] .ux-flip{transform:scaleX(-1)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}
@media (max-width:760px){.site-head .logo{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}}

.ux-about .ux-card h3{color:var(--ux-burg);margin:18px 0 8px}.ux-about .ux-card li{line-height:1.9;margin-bottom:4px}.ux-sign{text-align:left;font-style:italic;color:var(--ux-burg);margin-top:16px}.ux-wk-list{columns:2;column-gap:28px}@media(max-width:640px){.ux-wk-list{columns:1}}

.ux-khatima{margin-top:18px;padding-top:14px;border-top:1px dashed #C9A04A;color:#5E1520;font-weight:700;line-height:1.95;font-size:17px}
.ux-sign{margin-top:16px;color:#7A1F2B;font-weight:700;font-style:italic}
.ux-lib-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin:12px 0;padding:0;list-style:none}
.ux-lib-stats li{background:#fffaf0;border:1px solid #E6CF9A;border-radius:12px;padding:10px 12px;text-align:center}
.ux-lib-stats b{display:block;color:#7A1F2B;font-size:22px}
.ux-tarjama p{line-height:2;font-size:17.5px;text-align:justify}
.ux-tarjama h3{color:#7A1F2B;margin-top:18px}