/* MemoryQuran design system: one set of tokens, the top bar, the quick switcher, page transitions
   and the motion language, shared by every page. It doesn't restyle page content by itself
   (orb.css does that for the theme pages), so it is safe to load anywhere. */
:root{
  --mq-void:#020604; --mq-deep:#061A10; --mq-glow:#5CFFA8; --mq-glow-2:#B9FFD9; --mq-text:#E3F5EA; --mq-soft:#C5DCCF; --mq-muted:#86A595;
  --mq-line:rgba(92,255,168,.16); --mq-glass:rgba(6,22,14,.62);
  --mq-serif:"Spectral",Georgia,serif; --mq-sans:"Manrope",system-ui,sans-serif; --mq-ar:"Amiri","Scheherazade New",serif;
  --mq-ease:cubic-bezier(.2,.7,.2,1); --mq-fast:.18s; --mq-med:.42s;
}

/* ---------- page transitions (browsers that support cross-page view transitions) ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:mq-out .22s var(--mq-ease) both}
::view-transition-new(root){animation:mq-in .38s var(--mq-ease) both}
::view-transition-group(mqnav){animation-duration:0s}
@keyframes mq-out{to{opacity:0;transform:scale(.985);filter:blur(2px)}}
@keyframes mq-in{from{opacity:0;transform:scale(1.012);filter:blur(2px)}}

/* ---------- the top bar ---------- */
.mqnav{position:fixed;z-index:60;top:12px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:4px;
  max-width:calc(100vw - 24px);padding:5px 6px;border-radius:999px;background:var(--mq-glass);
  backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:inset 0 0 0 1px var(--mq-line),0 10px 30px rgba(0,0,0,.35);font:500 .88rem/1 var(--mq-sans);color:var(--mq-text);
  view-transition-name:mqnav}
.mqnav a,.mqnav button{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px;border:0;border-radius:999px;background:none;
  color:var(--mq-muted);text-decoration:none;font:inherit;cursor:pointer;white-space:nowrap;transition:color var(--mq-fast),background var(--mq-fast)}
.mqnav a:hover,.mqnav button:hover{color:var(--mq-text);background:rgba(92,255,168,.08)}
.mqnav a:focus-visible,.mqnav button:focus-visible{outline:1.5px solid var(--mq-glow);outline-offset:1px}
.mqnav .home{padding:0 10px}
.mqnav .dot{width:9px;height:9px;border-radius:50%;background:var(--mq-glow);box-shadow:0 0 8px var(--mq-glow),0 0 18px rgba(92,255,168,.6)}
.mqnav .crumbs{display:flex;align-items:center;min-width:0;overflow:hidden}
.mqnav .crumbs a{color:var(--mq-text);min-width:0}
.mqnav .crumbs a span{overflow:hidden;text-overflow:ellipsis}
.mqnav .crumbs .sep{color:rgba(134,165,149,.6);padding:0 1px}
.mqnav .crumbs a.here{color:var(--mq-glow-2)}
.mqnav .n{font-family:var(--mq-serif);color:var(--mq-glow)}
.mqnav .bar{width:1px;height:18px;background:var(--mq-line);margin:0 2px}
.mqnav .kbd{font-size:.72rem;color:var(--mq-muted);border:1px solid var(--mq-line);border-radius:5px;padding:2px 5px;line-height:1}
.mqnav svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
body.mq-hasnav{padding-top:64px}
@media (max-width:640px){
  .mqnav{top:auto;bottom:max(12px,env(safe-area-inset-bottom));font-size:.84rem}
  .mqnav .kbd,.mqnav .wide{display:none}
  body.mq-hasnav{padding-top:0;padding-bottom:76px}
}

/* ---------- the quick switcher ---------- */
.mqk{position:fixed;inset:0;z-index:80;display:none;align-items:flex-start;justify-content:center;padding:12vh 16px 16px;
  background:rgba(1,4,2,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.mqk.on{display:flex;animation:mq-fade .2s var(--mq-ease)}
.mqk .box{width:min(620px,100%);border-radius:18px;background:rgba(6,20,13,.92);box-shadow:inset 0 0 0 1px var(--mq-line),0 30px 80px rgba(0,0,0,.6),0 0 60px rgba(92,255,168,.08);
  overflow:hidden;animation:mq-rise .28s var(--mq-ease)}
.mqk input{width:100%;border:0;outline:0;background:transparent;color:var(--mq-text);font:400 1.15rem var(--mq-sans);padding:20px 22px 16px}
.mqk input::placeholder{color:var(--mq-muted)}
.mqk .hint{padding:0 22px 12px;color:var(--mq-muted);font:500 .74rem var(--mq-sans);letter-spacing:.04em;border-bottom:1px solid var(--mq-line)}
.mqk ul{list-style:none;margin:0;padding:6px;max-height:min(56vh,460px);overflow:auto;scrollbar-width:none}
.mqk ul::-webkit-scrollbar{display:none}
.mqk li a{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;text-decoration:none;color:var(--mq-text);font:400 .98rem var(--mq-sans)}
.mqk li a .n{font-family:var(--mq-serif);color:var(--mq-glow);text-align:center;font-size:1.05rem}
.mqk li a .t small{display:block;color:var(--mq-muted);font-size:.8rem;margin-top:2px}
.mqk li a .ar{font-family:var(--mq-ar);color:var(--mq-glow-2);font-size:1.15rem;direction:rtl}
.mqk li a.sel{background:rgba(92,255,168,.09);box-shadow:inset 0 0 0 1px rgba(92,255,168,.25)}
.mqk mark{background:none;color:var(--mq-glow-2);font-weight:600}
.mqk .empty{padding:18px 22px;color:var(--mq-muted);font:400 .95rem var(--mq-sans)}
@keyframes mq-fade{from{opacity:0}}
@keyframes mq-rise{from{opacity:0;transform:translateY(10px) scale(.985)}}

/* ---------- the local graph and hover previews ---------- */
.mqlg{position:fixed;z-index:40;right:18px;bottom:18px;width:232px;padding:6px 6px 10px;border-radius:18px;background:var(--mq-glass);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:inset 0 0 0 1px var(--mq-line),0 14px 40px rgba(0,0,0,.4);animation:mq-rise .5s var(--mq-ease) both}
.mqlg canvas{display:block}
.mqlg .cap{margin:2px 10px 0;font:500 .76rem/1.35 var(--mq-sans);color:var(--mq-soft);min-height:2.7em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mqpv{position:fixed;z-index:70;max-width:320px;padding:12px 14px;border-radius:14px;background:rgba(6,20,13,.94);box-shadow:inset 0 0 0 1px var(--mq-line),0 18px 50px rgba(0,0,0,.55);
  color:var(--mq-text);font:400 .88rem/1.45 var(--mq-sans);pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity .16s var(--mq-ease),transform .16s var(--mq-ease)}
.mqpv.on{opacity:1;transform:none}
.mqpv p{margin:0}.mqpv .k{color:var(--mq-glow);font-size:.74rem;font-weight:600;letter-spacing:.03em}
.mqpv .t{font-family:var(--mq-serif);font-size:1.08rem;margin:3px 0 4px;color:#F2FFF7}.mqpv .t .ar{font-family:var(--mq-ar);color:var(--mq-glow-2);margin-left:6px}
.mqpv .d{color:var(--mq-soft);margin-bottom:4px}

/* ---------- motion: content arrives with one gentle fade ---------- */
.mq-reveal{opacity:0;transform:translateY(10px);transition:opacity .6s var(--mq-ease),transform .6s var(--mq-ease)}
.mq-reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  .mq-reveal{opacity:1;transform:none;transition:none}
  .mqk.on,.mqk .box{animation:none}
}
#offBtn:not(.btn){background:rgba(6,22,14,.8)!important;color:#B9FFD9!important;border-color:rgba(92,255,168,.25)!important;backdrop-filter:blur(10px)}