/* «کد QR صفحه‌ها» — floating button + card, footer band, print corner. Colours follow the page (site theme or reading theme). */
.qr-wrap{--qr-a:var(--c-primary,var(--accent,#17706e));--qr-fg:var(--c-text,var(--ink,#1f2937));--qr-bg:var(--c-surface,var(--paper,#fff));--qr-mu:var(--c-muted,var(--muted,#6b7280));--qr-ln:color-mix(in srgb,var(--qr-fg) 12%,transparent);font-family:inherit}
.qr-fab{position:fixed;bottom:calc(1.1rem + env(safe-area-inset-bottom));z-index:61;width:48px;height:48px;border-radius:16px;border:1px solid var(--qr-ln);background:var(--qr-bg);color:var(--qr-a);display:grid;place-items:center;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.14);transition:transform .2s,box-shadow .2s,background .2s}
.qr-fab.qr-right{right:1.1rem}.qr-fab.qr-left{left:1.1rem}
.qr-fab:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.18)}
.qr-fab:focus-visible{outline:3px solid var(--qr-a);outline-offset:3px}
.qr-on .qr-fab,.qr-fab[aria-expanded="true"]{background:var(--qr-a);color:#fff}
.qr-fab svg,.float-btn.qr-fab-r svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.qr-pop{position:fixed;bottom:calc(5rem + env(safe-area-inset-bottom));z-index:120;width:min(340px,calc(100vw - 2rem));background:var(--qr-bg);color:var(--qr-fg);border:1px solid var(--qr-ln);border-radius:24px;padding:1.25rem 1.25rem 1.1rem;box-shadow:0 24px 70px rgba(0,0,0,.22);animation:qrIn .22s ease-out;text-align:center}
.qr-pop.qr-right{right:1.1rem}.qr-pop.qr-left{left:1.1rem}
.qr-pop[hidden]{display:none}
@keyframes qrIn{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
.qr-x{position:absolute;top:.7rem;inset-inline-end:.7rem;width:32px;height:32px;border-radius:50%;border:0;background:color-mix(in srgb,var(--qr-fg) 7%,transparent);color:var(--qr-fg);cursor:pointer;font-size:.9rem}
.qr-code{position:relative;margin:0 auto .9rem;width:min(232px,100%);padding:10px;border-radius:22px;background:#fff;box-shadow:0 0 0 1px var(--qr-ln),0 10px 26px color-mix(in srgb,var(--qr-a) 18%,transparent)}
.qr-code::before{content:"";position:absolute;inset:-6px;border-radius:26px;padding:2px;background:linear-gradient(135deg,var(--qr-a),transparent 40%,transparent 60%,var(--qr-a));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.55}
.qr-code svg{display:block;width:100%;height:auto}
.qr-info{display:flex;flex-direction:column;align-items:center;gap:.3rem;min-width:0}
.qr-k{margin:0;font-size:.78rem;font-weight:700;color:var(--qr-a);letter-spacing:0}
.qr-t{font-size:1rem;line-height:1.6;max-width:100%;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.qr-u{font-size:.75rem;color:var(--qr-mu);background:color-mix(in srgb,var(--qr-fg) 6%,transparent);border-radius:99px;padding:.15rem .7rem;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qr-h{margin:.2rem 0 .3rem;font-size:.8rem;line-height:1.8;color:var(--qr-mu)}
.qr-acts{display:flex;gap:.4rem;justify-content:center;flex-wrap:wrap;width:100%}
.qr-a{flex:1 1 0;min-width:84px;display:inline-flex;flex-direction:column;align-items:center;gap:.2rem;padding:.55rem .4rem;border-radius:14px;border:1px solid var(--qr-ln);background:transparent;color:var(--qr-fg);font:inherit;font-size:.75rem;cursor:pointer;transition:background .2s,border-color .2s}
.qr-a:hover{background:color-mix(in srgb,var(--qr-a) 9%,transparent);border-color:color-mix(in srgb,var(--qr-a) 35%,transparent)}
.qr-a:focus-visible{outline:2px solid var(--qr-a);outline-offset:2px}
.qr-a svg{width:20px;height:20px;fill:none;stroke:var(--qr-a);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.qr-a[hidden]{display:none}
.qr-done{min-height:1.2em;font-size:.75rem;color:var(--qr-a);font-weight:700}
/* footer band */
.qr-band{padding:2.2rem 1rem}
.qr-band-in{max-width:760px;margin:0 auto;display:flex;align-items:center;gap:1.6rem;background:var(--qr-bg);color:var(--qr-fg);border:1px solid var(--qr-ln);border-radius:26px;padding:1.2rem 1.4rem;box-shadow:0 14px 40px rgba(0,0,0,.07)}
.qr-band .qr-code{width:150px;flex:0 0 150px;margin:0}
.qr-band .qr-info{align-items:flex-start;text-align:start}
.qr-band .qr-acts{justify-content:flex-start}.qr-band .qr-a{flex:0 0 auto;flex-direction:row;padding:.45rem .8rem}
/* print: a small code in the corner of every printed page */
.qr-print{display:none}
@media print{
  .qr-fab,.qr-pop,.qr-band,.float-btn.qr-fab-r{display:none!important}
  .qr-print{display:flex!important;position:fixed;bottom:0;inset-inline-end:0;align-items:center;gap:8px;background:#fff;color:#111;padding:4px;font-size:8pt;line-height:1.5}
  .qr-print svg{width:22mm;height:22mm}
  .qr-print div{display:flex;flex-direction:column}.qr-print span{color:#555}
}
/* phones: the card opens as a sheet from the bottom */
@media (max-width:600px){
  .qr-pop{left:0!important;right:0!important;bottom:0;width:100%;border-radius:26px 26px 0 0;padding:1.4rem 1.2rem calc(1.2rem + env(safe-area-inset-bottom));box-shadow:0 -10px 40px rgba(0,0,0,.2),0 0 0 100vmax rgba(0,0,0,.38);animation-name:qrUp}
  .qr-pop::before{content:"";display:block;width:44px;height:5px;border-radius:9px;background:var(--qr-ln);margin:-.6rem auto .9rem}
  .qr-code{width:min(220px,66vw)}
  .qr-band-in{flex-direction:column;text-align:center}.qr-band .qr-info{align-items:center;text-align:center}.qr-band .qr-acts{justify-content:center}
  .qr-fab{width:44px;height:44px;border-radius:14px}
}
@keyframes qrUp{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.qr-pop{animation:none}.qr-fab{transition:none}}
/* library reading pages: the button sits in the reading tools; the card opens above them */
body#start .qr-pop{bottom:calc(12.4rem + env(safe-area-inset-bottom))}
body#start .qr-pop.qr-left{left:max(24px,calc((100vw - var(--content-width,1150px))/2))}
body#start .float-btn.qr-fab-r{color:var(--accent)}
body#start .float-btn.qr-fab-r[aria-expanded="true"]{background:var(--accent);color:var(--paper)}
/* frames of the code (chosen by the admin): clear = straight on the card, soft = light tint, outline = thin line, tile = white tile with a ring */
.qr-frame-clear .qr-code,.qr-frame-soft .qr-code,.qr-frame-outline .qr-code{box-shadow:none;background:transparent}
.qr-frame-clear .qr-code::before,.qr-frame-soft .qr-code::before,.qr-frame-outline .qr-code::before{display:none}
.qr-frame-clear .qr-bg,.qr-frame-soft .qr-bg,.qr-frame-outline .qr-bg{fill:transparent}
.qr-frame-clear .qr-code{padding:0}
.qr-frame-soft .qr-code{background:color-mix(in srgb,var(--qr-a) 7%,#fff)}
.qr-frame-outline .qr-code{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--qr-a) 40%,transparent)}
/* a dark card (dark site theme, night reading): the code always keeps a light ground so phones can read it */
.qr-on-dark .qr-code,body.dark .qr-wrap .qr-code{background:#fff!important;padding:10px}
.qr-on-dark .qr-bg,body.dark .qr-wrap .qr-bg{fill:#fff!important}
@media print{.qr-print .qr-bg{fill:#fff!important}}