/* ══════════════════════════════════════════════════════════════════════════════
   تابع الاستماع — the prayer card's companion.

   Loaded after prayer-times.css, and it takes over the composition: prayer-times.css
   used to reserve the physical right side with an auto margin "for a future
   companion". That is this. The reservation is retired in favour of a real grid, so
   the two cards stay vertically coupled as their heights change rather than drifting
   past each other.

   Every colour is semantic or a color-mix off --acc, which is prayer-times.css's own
   pattern, so both worlds are correct from one declaration. Shadows are written twice
   because a deep black shadow reads as dirt on cream.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── the pairing ───────────────────────────────────────────────────────────── */
.home-duet{display:grid;grid-template-columns:minmax(0,1fr);align-items:start}

@media(min-width:1001px){
  /* The 680px track is the prayer sanctum's own width; the clamp repeats
     home.css's .hero.container padding, which is what lines the card's edge up with
     the emblem column above it. minmax(0,…) on every track is not decoration: a grid
     child defaults to min-width:auto, and one long Arabic title would blow the track
     out and take the page's horizontal scroll with it. */
  .home-duet{
    grid-template-columns:minmax(0,680px) minmax(0,1fr);
    column-gap:clamp(20px,3vw,44px);
    padding-inline-start:clamp(14px,2vw,32px);
    padding-inline-end:clamp(20px,4vw,64px);
  }
  .home-duet>.prayer-palace{padding-inline:0}

  /* The glow belongs to the ROW now. .prayer-palace::before paints a 750x500 radial
     centred on itself; once the palace is only half the row that reads as a lit panel
     on the left with the companion sitting outside it — which is exactly the "two
     separate sections" complaint. Lifted to the container, one light falls on both. */
  .home-duet{position:relative;isolation:isolate}
  .home-duet::before{
    content:"";position:absolute;inset:0;z-index:-3;pointer-events:none;
    background:radial-gradient(750px 500px at 50% 14%,rgba(200,167,91,.12),transparent 70%);
  }
  .home-duet>.prayer-palace::before{content:none}

  /* The starfield has to span the row too, and it is MARKUP (.prayer-sky, with the
     orbit ring and five stars) rather than a background, so it cannot simply be
     re-declared on the container. Instead the palace stops being the thing it is
     positioned against: static + visible hands .prayer-sky{position:absolute;inset:0}
     up to .home-duet, and one sky falls across both cards. Without this the ring and
     the glow stop dead at the column edge and the row reads as a lit left half beside
     an unlit right half — the page cut down the middle.

     Safe because nothing else in the prayer block depends on the palace being the
     containing block: .prayer-sanctum is position:relative and holds its own halo. */
  .home-duet>.prayer-palace{position:static;overflow:visible}

  /* Grid placement follows `direction`, so in RTL column 1 renders physically right —
     which would swap the pair and break the alignment the clamp above exists for.
     Named explicitly, the way the handful of other genuinely physical cases in this
     codebase are handled. */
  html[dir="rtl"] .home-duet{grid-template-columns:minmax(0,1fr) minmax(0,680px)}
  /* grid-ROW is as load-bearing as grid-column here. The auto-placement cursor only
     moves forward: with prayer explicitly in column 2, an item then asking for column
     1 cannot go backwards, so it wraps to a second row — prayer on the left, the right
     half empty, and the companion stranded underneath. Naming row 1 on both pins them
     to the same row and the cursor never gets a say. */
  html[dir="rtl"] .home-duet>.prayer-palace{grid-column:2;grid-row:1}
  html[dir="rtl"] .home-duet>.listening-hall{grid-column:1;grid-row:1}
}

/* Below the breakpoint they stack, prayer first, and the prayer block's own padding
   returns because the grid is no longer supplying it. */
.listening-hall{padding:clamp(18px,2vw,26px) 20px clamp(24px,3vw,34px)}
/* align-self:start, NOT center. The prayer column is tall — its sky layer alone runs
   past 900px — so centering this block inside that row drops it half a screen below
   its partner and the pair stops reading as a row at all. Tops aligned, they read as
   one composition. */
/* padding-block is left exactly as the base rule set it — the same
   clamp(18px,2vw,26px) top that .prayer-palace carries — so the two headings sit on
   the same line. Only the inline padding goes, because the grid supplies it now. */
@media(min-width:1001px){.listening-hall{padding-inline:0;align-self:start}}

/* ── the frame: the prayer sanctum's recipe, verbatim ──────────────────────── */
.listening-sanctum{
  position:relative;
  width:min(100%,680px);
  margin-inline:auto;
  padding:16px clamp(17px,2.4vw,22px);
  border:1px solid color-mix(in srgb,var(--acc) 34%,var(--edge));
  border-radius:18px;
  background:linear-gradient(145deg,
    color-mix(in srgb,var(--paper) 96%,transparent),
    color-mix(in srgb,var(--bg) 91%,var(--paper)));
  box-shadow:0 28px 68px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.06);
}
html[data-world="manuscript"] .listening-sanctum{
  box-shadow:0 32px 80px rgba(91,68,25,.14),inset 0 1px rgba(255,255,255,.75);
}
/* the inner rule, 9px in, exactly as the prayer card carries it */
.listening-sanctum::before{
  content:"";position:absolute;inset:9px;
  border:1px solid color-mix(in srgb,var(--acc) 15%,transparent);
  border-radius:12px;pointer-events:none;
}

/* ── heading ───────────────────────────────────────────────────────────────── */
/* .prayer-intro's home edition is `max-width:680px;margin:0 auto 10px`. Matching it
   exactly is what aligns the two headings; anything else and they sit on different
   lines however well the containers line up. */
.listening-intro{text-align:center;max-width:680px;margin:0 auto 10px}
/* .prayer-kicker's home edition, declaration for declaration. It is inline there, so
   display:block here made it 2px taller and pushed everything below it out of step. */
.listening-kicker{
  font-family:var(--font-ui);font-size:9px;
  letter-spacing:.22em;
  color:var(--acc-text);
}
/* h2, not h1: the page already has the hero's and the prayer partial's. A third
   would be an outline defect, not a style choice. */
/* The prayer heading's home edition, matched declaration for declaration:
   clamp(32px,3.5vw,46px) with margin 3px 0 4px and line-height 1.14. Two blocks
   presented as a pair have to be the same size — at 27px against its 46px the
   companion read as a footnote beside a title, and because the intros then differ in
   height the CARDS fall out of line too. Matching the type aligns both. */
.listening-intro h2{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(32px,3.5vw,46px);
  line-height:1.14;margin:3px 0 4px;
  background:var(--foil);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  color:var(--acc-text);
}
html[data-world="manuscript"] .listening-intro h2{
  background:none;-webkit-text-fill-color:#5e4a25;color:#5e4a25;
}

/* ── rows: the prayer row's geometry ───────────────────────────────────────── */
.listening-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}

.listening-invite{
  font-family:var(--font-ui);font-size:12px;line-height:1.9;
  color:var(--mut);text-align:center;
  padding:16px 14px;
  border:1px dashed color-mix(in srgb,var(--acc) 22%,var(--edge));
  border-radius:9px;
}

.listening-row{position:relative;display:flex;align-items:center;gap:4px}
.listening-row__a{
  position:relative;flex:1;min-width:0;
  min-height:38px;
  display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:9px;
  padding:4px 11px;
  border:1px solid var(--edge);border-radius:9px;
  text-decoration:none;color:inherit;overflow:hidden;
  transition:transform .25s var(--paper-ease),border-color .25s,background .25s;
}
.listening-row__a:hover{
  transform:translateY(-4px);
  border-color:color-mix(in srgb,var(--acc) 45%,transparent);
  background:color-mix(in srgb,var(--acc) 4%,transparent);
}
/* the medallion — the ف ظ ع م ش of the prayer rows, one wing at a time */
.listening-row__seal{
  width:24px;height:24px;display:grid;place-items:center;
  border:1px solid color-mix(in srgb,var(--acc) 28%,var(--edge));
  border-radius:50%;
  font-family:var(--font-display);font-size:12px;
  color:var(--acc-text);
}
.listening-row__body{min-width:0;display:flex;flex-direction:column;gap:1px}
.listening-row__t{
  font-family:var(--font-head);font-size:14px;line-height:1.5;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.listening-row__sub{font-family:var(--font-ui);font-size:10px;color:var(--mut)}
.listening-row__left{
  font-family:var(--font-ui);font-size:11.5px;color:var(--txt2);
  font-variant-numeric:tabular-nums;
}
/* progress, as .prayer-time__mark's twin: 2px pinned to the row's bottom edge */
.listening-row__mark{
  position:absolute;inset-inline-start:0;bottom:0;height:2px;
  background:var(--gold-brushed);
  box-shadow:0 0 12px rgba(200,167,91,.5);
}
.listening-row.is-current .listening-row__seal{
  background:var(--gold-brushed);color:var(--on-gold);border-color:var(--acc);
}
.listening-row.is-current .listening-row__t{color:var(--acc-text)}
.listening-row.is-current .listening-row__mark{animation:prayerRoyalThread 3.2s ease-in-out infinite}

/* Hidden until hover on a pointer device, ALWAYS visible on touch — otherwise a
   touch reader can never remove a row. */
.listening-row__x{
  flex:none;width:22px;height:22px;
  display:grid;place-items:center;
  border:0;background:transparent;color:var(--mut);
  font-size:11px;cursor:pointer;border-radius:50%;
  opacity:0;transition:opacity .2s,color .2s;
}
.listening-row:hover .listening-row__x,
.listening-row__x:focus-visible{opacity:1}
.listening-row__x:hover{color:var(--acc-text)}
@media(hover:none){.listening-row__x{opacity:1}}

/* ── foot ──────────────────────────────────────────────────────────────────── */
.listening-foot{margin-top:14px;text-align:center}
.listening-cta{min-height:40px;padding:9px 22px 11px;font-size:13px}
.listening-note{
  margin-top:10px;
  font-family:var(--font-ui);font-size:10px;color:var(--mut);
}
/* The button STAYS once there are rows. It used to be hidden here, on the reasoning
   that the invitation had done its job — but it no longer opens a wing, it opens the
   reader's own room, and that room is never more useful than when there are rows the
   rail could not fit. Only the label changes; listening.js swaps it. */
.listening-hall[data-state="resume"] .listening-cta{margin-top:2px}

@media(prefers-reduced-motion:reduce){
  .listening-row__a{transition:none}
  .listening-row__a:hover{transform:none}
  .listening-row.is-current .listening-row__mark{animation:none}
}


/* ══════════════════════════════════════════════════════════════════════════════
   الغرفة — the room «ادخلِ» opens, at /{lang}/continue.

   Deliberately the same furniture as the home block: the same sanctum, the same
   rows, the same medallions. A reader pressing «ادخلِ» should feel they walked
   further into the same building, not that they were handed off to a different one.
   What changes is only what a room can hold that a rail cannot — every row instead
   of three, a count, and a way to erase the lot.
   ══════════════════════════════════════════════════════════════════════════════ */
.ledger-room{padding-bottom:clamp(40px,6vw,90px)}
.ledger-hall{padding:clamp(18px,2vw,26px) 0 0}
.ledger-intro{margin-bottom:16px}
/* h1 here, h2 on the home page: this is the page's own title, and the type has to
   match the block it continues, declaration for declaration. */
.ledger-intro h1{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(32px,3.5vw,46px);
  line-height:1.14;margin:3px 0 4px;
  background:var(--foil);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  color:var(--acc-text);
}
html[data-world="manuscript"] .ledger-intro h1{
  background:none;-webkit-text-fill-color:#5e4a25;color:#5e4a25;
}
/* The prayer block's .prayer-rule, restated rather than borrowed: that declaration
   lives in prayer-times.css, which only the home page loads, and pulling 16 KB of
   prayer styles onto this page for one ornament would be the wrong trade. Five lines
   and a note is the cheaper honesty. */
.ledger-rule{display:flex;align-items:center;width:min(150px,45%);margin:10px auto 0;color:var(--acc)}
.ledger-rule::before,.ledger-rule::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,transparent,currentColor)}
.ledger-rule::after{transform:scaleX(-1)}
.ledger-rule i{width:9px;height:9px;border:1px solid currentColor;transform:rotate(45deg);margin:0 10px;box-shadow:0 0 12px rgba(200,167,91,.4)}

.ledger-lede{
  max-width:560px;margin:12px auto 0;
  font-family:var(--font-ui);font-size:12.5px;line-height:2;color:var(--mut);
}

/* ── the three states ──────────────────────────────────────────────────────── */
/* Every one of them is in the served HTML, and CSS alone decides which is on. A
   reader with no JavaScript keeps the empty room, which is the truth: with no
   JavaScript nothing was ever recorded. */
.ledger-waiting{
  margin:0;padding:22px 14px;text-align:center;
  font-family:var(--font-ui);font-size:12px;color:var(--mut);
}
.ledger-empty{text-align:center;padding:26px 14px 20px}
.ledger-empty__mk{
  display:block;font-family:var(--font-display);font-size:20px;
  color:color-mix(in srgb,var(--acc) 62%,transparent);margin-bottom:10px;
}
.ledger-empty h2{
  font-family:var(--font-head);font-weight:400;font-size:18px;margin:0 0 10px;
  color:var(--acc-text);
}
.ledger-empty p{
  margin:0 auto;max-width:440px;
  font-family:var(--font-ui);font-size:12px;line-height:2;color:var(--mut);
}
.ledger-empty__ways{
  display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:18px;
}
.ledger-empty__ways .btn{min-height:36px;padding:8px 16px 10px;font-size:12px}

.ledger-count{margin:0 0 12px;font-family:var(--font-ui);font-size:11px;color:var(--mut)}
.ledger-count b{
  font-family:var(--font-display);font-size:15px;color:var(--acc-text);
  margin-inline-end:4px;
}
.ledger-clear{min-height:34px;padding:7px 18px 9px;font-size:11.5px}

#listeningLedger[data-state="empty"] .listening-list,
#listeningLedger[data-state="empty"] .ledger-waiting,
#listeningLedger[data-state="empty"] .ledger-foot,
#listeningLedger[data-state="loading"] .listening-list,
#listeningLedger[data-state="loading"] .ledger-empty,
#listeningLedger[data-state="loading"] .ledger-foot,
#listeningLedger[data-state="ledger"] .ledger-empty,
#listeningLedger[data-state="ledger"] .ledger-waiting{display:none}

/* A room holds more than a rail: the rows may run to two dozen, so they breathe. */
#listeningLedger .listening-list{gap:10px}
#listeningLedger .listening-row__a{min-height:46px;padding:7px 13px}
#listeningLedger .listening-row__t{font-size:15px}