/* styles/hold.css — the Hold menu (v1320, built fresh from the owner's squares design)
   CALLED BY: zero.html (<link>), for the markup aypRenderMain() writes into #ayah-pop.
   The sheet itself (#ayah-pop: bottom sheet on the phone, centred from 744px) and the
   generic .al-* kit stay where they were; this file owns the .hm-* layer only.
   Group colours are tokens in styles/al.css (--hm-dr / --hm-st / --hm-qr and their -soft). */

#ayah-pop .hm-ls { --hm-g:var(--al-ink2); --hm-gs:var(--al-card2); }
#ayah-pop .hm-dr { --hm-g:var(--hm-dr); --hm-gs:var(--hm-dr-soft); }
#ayah-pop .hm-st { --hm-g:var(--hm-st); --hm-gs:var(--hm-st-soft); }
#ayah-pop .hm-qr { --hm-g:var(--hm-qr); --hm-gs:var(--hm-qr-soft); }

#ayah-pop .hm-body { gap:calc(var(--al-u) * 3); }
#ayah-pop .hm-body > * { flex:none; }

/* ── the āyah card ─────────────────────────────────────────────────────── */
#ayah-pop .hm-card { position:relative; display:flex; flex-direction:column; gap:calc(var(--al-u) * 2); padding:calc(var(--al-u) * 3) var(--al-gut) calc(var(--al-u) * 3);
  border-radius:var(--al-rsurf); background:var(--al-card); box-shadow:0 0 0 .5px var(--al-line), var(--al-sh-1); min-width:0; }
#ayah-pop .hm-ref { display:flex; align-items:baseline; justify-content:space-between; gap:calc(var(--al-u) * 3); }
#ayah-pop .hm-ref .ayp-ref { font:700 var(--al-floor)/var(--lh-ui) var(--f-ui); }
#ayah-pop .hm-ar { font-family:var(--f-quran); font-size:var(--al-ar2); line-height:var(--lh-ar-card); direction:rtl; unicode-bidi:isolate; text-align:right; color:var(--al-ink);
  max-height:calc(var(--al-ar2) * 2 * 4); overflow:hidden; overflow-wrap:break-word; }
#ayah-pop .hm-ar .al-w { display:inline; }
#ayah-pop .hm-ar .al-w.cur { border-radius:var(--al-rctl); background:var(--al-acc-soft); box-shadow:inset 0 -2px 0 var(--al-acc); }
#ayah-pop .hm-ar.faded { -webkit-mask-image:linear-gradient(to bottom, black 70%, transparent); mask-image:linear-gradient(to bottom, black 70%, transparent); }
#ayah-pop .hm-card.open .hm-ar { max-height:none; }
#ayah-pop .hm-more { align-self:center; min-height:var(--al-tap); padding:0 calc(var(--al-u) * 5); border:0; border-radius:var(--al-rpill); background:var(--al-card2); color:var(--al-ink2);
  font:600 var(--al-floor)/1 var(--f-ui); cursor:pointer; }
#ayah-pop .hm-more[hidden] { display:none; }
/* a held range: the first āyah · ✦ · the last, each to two lines */
#ayah-pop .hm-card.many .hm-ar { max-height:calc(var(--al-ar2) * 2 * 2); -webkit-mask-image:linear-gradient(to left, black 80%, transparent); mask-image:linear-gradient(to left, black 80%, transparent); }
#ayah-pop .hm-n { display:inline-grid; place-items:center; min-width:1.6em; margin-left:calc(var(--al-u) * 2); padding:0 calc(var(--al-u) * 1.5); border-radius:var(--al-rpill);
  background:var(--al-card2); color:var(--al-mut); font:700 var(--al-floor)/1.6 var(--f-ui); vertical-align:middle; }
#ayah-pop .hm-orn { display:flex; align-items:center; gap:calc(var(--al-u) * 3); color:var(--al-acc-txt); }
#ayah-pop .hm-orn i { flex:1; height:1px; background:var(--al-line); }
#ayah-pop .hm-orn b { font:600 var(--al-floor)/1 var(--f-ui); }
#ayah-pop .hm-between { margin-top:calc(var(--al-u) * -2); text-align:center; font:500 var(--al-floor)/var(--lh-ui) var(--f-ui); color:var(--al-mut); }
#ayah-pop .hm-between:empty { display:none; }

/* ── the buttons (both layouts) ────────────────────────────────────────── */
#ayah-pop .hm-b { display:flex; align-items:center; gap:calc(var(--al-u) * 2.5); width:100%; min-height:var(--al-tap); padding:calc(var(--al-u) * 2) calc(var(--al-u) * 3);
  border:0; border-radius:var(--al-rctl); background:var(--al-card); box-shadow:0 0 0 .5px var(--al-line); color:var(--hm-g); cursor:pointer; text-align:left; font:inherit;
  -webkit-tap-highlight-color:transparent; transition:transform var(--al-d1) var(--al-eo); }
#ayah-pop .hm-b svg.ic { flex:none; width:22px; height:22px; margin:0; color:inherit; }
#ayah-pop .hm-tx { display:flex; flex-direction:column; min-width:0; }
#ayah-pop .hm-b .al-n { font:600 var(--al-floor)/1.2 var(--f-ui); overflow-wrap:break-word; hyphens:manual; }
#ayah-pop .hm-s { font:500 var(--al-floor)/1.2 var(--f-ui); opacity:.8; }
#ayah-pop .hm-s:empty { display:none; }
#ayah-pop .hm-b.lead { background:var(--al-acc); color:var(--al-acc-ink); box-shadow:var(--al-sh-1); }
#ayah-pop .hm-b:active { transform:scale(.96); }
#ayah-pop .hm-b:focus-visible, #ayah-pop .hm-more:focus-visible { outline:2px solid var(--al-focus); outline-offset:2px; }
#ayah-pop .hm-b.cur { box-shadow:0 0 0 2px var(--hm-g); }

/* ── four panels, two by two ──────────────────────────── */
#ayah-pop .hm-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:calc(var(--al-u) * 2); }
#ayah-pop .hm-grp { display:flex; flex-direction:column; gap:calc(var(--al-u) * 1.5); padding:calc(var(--al-u) * 2); border-radius:var(--al-rsurf); background:var(--hm-gs); }
#ayah-pop .hm-gh { margin:0; padding:calc(var(--al-u) * 1) calc(var(--al-u) * 1.5) 0; font:700 var(--al-floor)/1.2 var(--f-ui); color:var(--hm-g); }
#ayah-pop .hm-ls .hm-gh { color:var(--al-mut); }

/* v1620: nothing inside springs any more — the whole window rises (zero.html rise(), the owner's pick A · Rise) */

/* ── the pages behind: the group's colour on the title ─────────────────── */
#ayah-pop .hm-page .al-title { color:var(--hm-g); }


/* v1330 — 1:1 with the mock's menu: no title bar (the ✕ floats beside the āyah card), the card's head
   centred without the page, the āyah centred, group heads in small tracked capitals, Play's reciter on
   its line, the Planner's open-item count as a badge */
#ayah-pop .al-stage > .al-bar { position:absolute; top:calc(var(--al-u) * 3); right:var(--al-gut); z-index:2; padding:0; min-height:0; background:none; }
#ayah-pop .al-stage > .al-bar .al-title { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
#ayah-pop .al-stage .hm-body { padding-top:calc(var(--al-u) * 3); }
#ayah-pop .al-stage .hm-card { margin-right:calc(var(--al-tap) + var(--al-u) * 2); }
#ayah-pop .al-stage .hm-ref { justify-content:center; }
#ayah-pop .al-stage .hm-ref .ayp-ref { color:var(--al-mut); }
#ayah-pop .al-stage .hm-ref .ayp-sub { display:none; }
#ayah-pop .al-stage .hm-ar { text-align:center; }
#ayah-pop .al-stage .hm-card.many .hm-ar { text-align:right; }
#ayah-pop .hm-gh { text-transform:uppercase; letter-spacing:.08em; }
#ayah-pop .hm-b.lead .hm-tx, #ayah-pop .hm-b[data-hm="plan"] .hm-tx { flex:1; flex-direction:row; align-items:center; justify-content:space-between; gap:calc(var(--al-u) * 2); }
#ayah-pop .hm-b.lead .hm-s { font-weight:600; opacity:.85; }
#ayah-pop .hm-cnt { min-width:26px; height:26px; padding:0 calc(var(--al-u) * 1.5); border-radius:var(--al-rpill); display:inline-grid; place-items:center; background:var(--hm-st); color:var(--hm-st-soft); font:700 var(--al-floor)/1 var(--f-ui); font-variant-numeric:tabular-nums; }
#ayah-pop .hm-cnt:empty { display:none; }
#ayah-pop .hm-b .al-n { color:inherit; }   /* the label takes the group colour (the mock); al.css sets .al-n to ink */