/* Capsule v2 (2026-11-10, spec 24): hiding turns ONLY the player bar into a small draggable capsule; the 5 tabs never hide.
   The capsule docks to the BOTTOM gutter (horizontal, two-line label) or the LEFT / RIGHT gutter (vertical, upright page number).
   dock.js sets --dock-l / --dock-r / --dock-b on <html>; the mushaf area gives that room so the capsule never covers the page. */
body.cap2.tawajjo #dock { transform: none; visibility: visible; pointer-events: auto; }
body.cap2.tawajjo #dock #mini { display: none; }
body.cap2.tawajjo main, body.cap2.tawajjo.simple main {
  bottom: calc(var(--nav-h) + var(--dock-b, 0px)) !important; left: var(--dock-l, 0px) !important; right: var(--dock-r, 0px) !important; }

body.cap2 #twPill { left: 0; top: 0; bottom: auto; transform: none; height: 44px; padding: 0 10px 0 4px; touch-action: none; cursor: grab;
  user-select: none; -webkit-user-select: none; transition: opacity .25s ease; }
body.cap2 #twPill[hidden] { transform: none; }
body.cap2 #twPill.snap { transition: left .35s cubic-bezier(.34,1.5,.64,1), top .35s cubic-bezier(.34,1.5,.64,1), opacity .25s ease; }
body.cap2 #twPill.drag { cursor: grabbing; opacity: 1; box-shadow: 0 16px 40px #000a, 0 0 0 2px #c9a54a66; }
body.cap2 #twPill.idle:not(:hover):not(:focus-within):not(.drag) { opacity: .55; }
body.cap2 #twPill .dk-b { width: 32px; height: 32px; }
body.cap2 #twPill .dk-b svg { width: 18px; height: 18px; }
body.cap2 #twPill .dk-play { width: 34px; height: 34px; position: relative; }
/* gold repetition ring around play (fills per repetition, --rep 0..1) */
body.cap2 #twPill .dk-play::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(#c9a54a calc(var(--rep, 0) * 1turn), #c9a54a33 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px)); }
.isl-grip { flex: none; display: grid; grid-template-columns: repeat(2, 3px); gap: 3px; padding: 0 4px; opacity: .6; }
.isl-grip i { width: 3px; height: 3px; border-radius: 50%; background: #c9a54a; }
body.cap2 .isl-l1 { font-size: 13px; line-height: 1.3; }
body.cap2 .isl-l2 { font-size: 10px; }
body.cap2 .isl-wave { height: 12px; }
body.cap2 .isl-sep { height: 22px; margin: 0 4px; }
body.cap2 .isl-lbl { cursor: inherit; }
.isl-pg { display: none; font: 600 12px/1 'Segoe UI', 'Noto Naskh Arabic', sans-serif; color: #c9a54a; padding: 2px 0 4px; }

/* vertical (left / right gutter): stacked buttons, no rotated text, only the page number upright below the buttons */
body.cap2 #twPill.vert { width: 44px; height: auto; padding: 6px 0; border-radius: 22px; }
#twPill.vert .isl-in { flex-direction: column; height: auto; gap: 4px; }
#twPill.vert .tw-ctl { flex-direction: column; gap: 2px; }
#twPill.vert .isl-grip { grid-template-columns: repeat(3, 3px); padding: 2px 0; }
#twPill.vert .isl-sep { width: 22px; height: 1px; margin: 0; background: linear-gradient(90deg, transparent, #c9a54a99, transparent); }
#twPill.vert .isl-wave { margin: 0; }
#twPill.vert .isl-t { display: none; }
#twPill.vert .isl-pg { display: block; }

@media (prefers-reduced-motion: reduce) { body.cap2 #twPill.snap { transition: none; } }

/* ================================================================ spec 25: no dock boxes. While dragging: one thin glowing gold line at
   the nearest edge only. [hidden] = display:none, so nothing ever stays visible after the drop. */
#dockHint { position: fixed; z-index: 14; pointer-events: none; border-radius: 3px; background: #e2c25a;
  box-shadow: 0 0 8px 2px #c9a54acc, 0 0 22px 4px #c9a54a55; animation: dk-hint .9s ease-in-out infinite alternate; }
#dockHint[hidden], #dockGhost[hidden] { display: none !important; }
#dockHint.h-b { left: 50%; width: min(520px, 60vw); height: 3px; transform: translateX(-50%); bottom: calc(var(--nav-h) + 2px); }
#dockHint.h-l, #dockHint.h-r { width: 3px; top: 12%; bottom: calc(var(--nav-h) + 12%); }
#dockHint.h-l { left: 1px; } #dockHint.h-r { right: 1px; }
@keyframes dk-hint { from { opacity: .55; } to { opacity: 1; } }
/* the small ghost that follows the pointer while the full bar is dragged (shows the shape it will take) */
#dockGhost { position: fixed; z-index: 15; pointer-events: none; display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 220px; height: 48px; border-radius: 24px; background: #0d1914e6; border: 1px solid #c9a54a; box-shadow: 0 14px 36px #000a; }
#dockGhost.vert { flex-direction: column; width: 56px; height: 200px; }
#dockGhost .dg-b { width: 14px; height: 14px; border-radius: 50%; background: #f1ead2aa; }
#dockGhost .dg-p { width: 22px; height: 22px; background: #c9a54a; }
#dockGhost .isl-grip { opacity: .9; }
#dockGhost.vert .isl-grip { grid-template-columns: repeat(3, 3px); }
body.bar-drag, body.bar-drag * { cursor: grabbing !important; user-select: none; }
@media (prefers-reduced-motion: reduce) { #dockHint { animation: none; } }

/* ================================================================ the FULL player bar: grip dots at its start; bottom = full-width bar,
   left / right = slim 64px vertical side bar (badge, stacked buttons, rep ring, upright page number, no sideways text, no ayah) */
.dk-mini { grid-template-columns: auto auto auto minmax(0, 1fr) auto auto auto; grid-template-areas: "gr av ctl ay rep fo mic"; }
.dk-grip { grid-area: gr; width: 20px; height: 40px; margin-inline-end: -4px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: 8px; cursor: grab; touch-action: none; }
.dk-grip:hover { background: var(--dk-hov); }
.dk-grip .isl-grip { padding: 0; }
.dk-qb-s, .dk-pg, .dk-sp { display: none; }
@media (max-width: 700px) {
  .dk-mini { grid-template-columns: auto auto auto minmax(0, 1fr) auto auto auto; grid-template-areas: "ay ay ay ay ay ay ay" "gr av ctl . rep fo mic"; }
}
body.bar-side:not(.tawajjo) { --dk-h: var(--nav-h); }
body.bar-side:not(.tawajjo) main, body.bar-side:not(.tawajjo) footer { left: var(--dock-l, 0px) !important; right: var(--dock-r, 0px) !important; }
body.bar-side:not(.tawajjo) #dock #mini { position: fixed; z-index: 12; top: 4px; bottom: calc(var(--nav-h) + 4px); width: 64px; height: auto;
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 0 8px; overflow: hidden;
  background: var(--dk-bg); border: 1px solid var(--dk-line); border-radius: 20px; box-shadow: 0 8px 26px #0007; }
body.bar-l:not(.tawajjo) #dock #mini { left: 4px; } body.bar-r:not(.tawajjo) #dock #mini { right: 4px; }
body.bar-side:not(.tawajjo) #mini .dk-grip { width: 40px; height: 18px; margin: 0; flex: none; }
body.bar-side:not(.tawajjo) #mini .dk-grip .isl-grip { grid-template-columns: repeat(3, 3px); }
body.bar-side:not(.tawajjo) #mini .dk-ayah, body.bar-side:not(.tawajjo) #mini .dk-rep, body.bar-side:not(.tawajjo) #mini .dk-qb-n { display: none; }
body.bar-side:not(.tawajjo) #dock #dkAv.dk-qb { flex: none; width: 54px; max-width: 54px; height: 26px; padding: 0 4px; }
body.bar-side:not(.tawajjo) #mini .dk-qb-s { display: block; font: 600 12px/1.3 'Noto Naskh Arabic', 'Amiri', serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46px; direction: rtl; }
body.bar-side:not(.tawajjo) #mini .dk-ctl { flex-direction: column; gap: 2px; }
body.bar-side:not(.tawajjo) #mini .dk-b { width: 40px; height: 40px; }
body.bar-side:not(.tawajjo) #mini .dk-play { width: 42px; height: 42px; margin: 4px 0; position: relative; }
body.bar-side:not(.tawajjo) #mini .dk-play::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(#c9a54a calc(var(--rep, 0) * 1turn), #c9a54a33 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px)); }
body.bar-side:not(.tawajjo) #mini .dk-pg { display: block; font: 600 13px/1 'Segoe UI', 'Noto Naskh Arabic', sans-serif; color: #c9a54a; padding: 2px 0; }
body.bar-side:not(.tawajjo) #mini .dk-sp { display: block; flex: 1 1 0; min-height: 0; }
body.bar-side:not(.tawajjo) #mini .dk-focus { flex: none; width: 40px; min-width: 40px; height: 40px; padding: 0; }
body.bar-side:not(.tawajjo) #mini .dk-focus .dk-fl { display: none; }
body.bar-side:not(.tawajjo) #mini .dk-mic { flex: none; width: 40px; height: 40px; }
/* the progress line runs down the inner edge of the side bar */
body.bar-side:not(.tawajjo) #mini .dk-prog { top: 18px; bottom: 18px; left: auto; right: 0; width: 2px; height: auto; }
body.bar-r:not(.tawajjo) #mini .dk-prog { right: auto; left: 0; }
body.bar-side:not(.tawajjo) #mini .dk-prog i { width: 100% !important; height: calc(var(--pf, 0) * 100%); margin: 0; }