/* Advance Reader: minimal default UI. The theme (advance-ksa) restyles .advance-reader; book content
   styles come from each book's content.css (scoped to .advance-reader .ar-content). */
.advance-reader {
  --ar-bg: #ffffff; --ar-panel: #ffffff; --ar-border: #e3e6ec; --ar-text: #1a1a2e; --ar-muted: #5b6270;
  --ar-primary: #0f3d7a; --ar-primary-text: #ffffff; --ar-accent: #f28c28; --ar-mark: #ffe8c7;
  --ar-font-body: "IBM Plex Sans Arabic", "Almarai", "Segoe UI", Tahoma, sans-serif;
  --ar-font-head: "Alexandria", "Cairo", "Segoe UI", Tahoma, sans-serif;
  direction: rtl; text-align: right; color: var(--ar-text); font-family: var(--ar-font-body);
}
.advance-reader[data-theme="dark"] {
  --ar-bg: #11151c; --ar-panel: #171c25; --ar-border: #2f3645; --ar-text: #e6e8ee; --ar-muted: #a7afbd;
  --ar-primary: #7db0e6; --ar-primary-text: #0b1220; --ar-mark: #5a3d12;
}
.advance-reader *, .advance-reader *::before, .advance-reader *::after { box-sizing: border-box; }
.advance-reader [hidden] { display: none !important; }

/* Buttons and cards (library, denial, login) */
.advance-reader .ar-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 8px 16px; border: 1px solid var(--ar-border); border-radius: 10px; background: var(--ar-panel); color: var(--ar-text); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.advance-reader .ar-btn-primary { background: var(--ar-primary); border-color: var(--ar-primary); color: var(--ar-primary-text); }
.advance-reader .ar-btn-small { min-height: 34px; padding: 4px 10px; font-size: .9em; }
.advance-reader .ar-btn:focus-visible, .advance-reader .ar-icon:focus-visible, .advance-reader a:focus-visible { outline: 3px solid var(--ar-accent); outline-offset: 2px; }
.advance-reader.ar-page { max-width: 920px; margin: 0 auto; padding: 16px; }
.advance-reader .ar-h { font-family: var(--ar-font-head); font-size: 1.6rem; margin: 0 0 16px; }
.advance-reader .ar-h3 { font-family: var(--ar-font-head); font-size: 1.15rem; margin: 0 0 8px; }
.advance-reader .ar-card { background: var(--ar-panel); border: 1px solid var(--ar-border); border-radius: 14px; padding: 18px; margin: 0 0 16px; }
.advance-reader .ar-center { max-width: 560px; margin-inline: auto; }
.advance-reader .ar-muted { color: var(--ar-muted); }
.advance-reader .ar-small { font-size: .9em; }
.advance-reader .ar-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 0; }
.advance-reader .ar-books { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.advance-reader .ar-book { display: flex; flex-direction: column; margin: 0; }
.advance-reader .ar-book .ar-actions { margin-top: auto; padding-top: 12px; }
.advance-reader .ar-kicker { color: var(--ar-accent); font-weight: 700; font-size: .85em; margin: 0 0 4px; }
.advance-reader .ar-book-title { font-family: var(--ar-font-head); font-size: 1.2rem; line-height: 1.5; margin: 0 0 6px; }
.advance-reader .ar-notice { background: var(--ar-mark); border-radius: 8px; padding: 8px 12px; }
.advance-reader .ar-members { list-style: none; padding: 0; margin: 10px 0; }
.advance-reader .ar-members li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--ar-border); }
.advance-reader .ar-members form { margin: 0; }
.advance-reader .ar-add-member { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.advance-reader .ar-add-member input { flex: 1 1 220px; min-height: 44px; padding: 8px 10px; border: 1px solid var(--ar-border); border-radius: 10px; font: inherit; }

/* Reader */
.advance-reader.ar-reader { max-width: 780px; margin: 0 auto; background: var(--ar-bg); min-height: 100vh; }
.advance-reader .ar-bar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 4px; padding: 4px 6px; background: var(--ar-bg); border-bottom: 1px solid var(--ar-border); }
.admin-bar .advance-reader .ar-bar { top: 32px; }
@media (max-width: 782px) { .admin-bar .advance-reader .ar-bar { top: 0; } }
.advance-reader .ar-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 10px; padding: 0; min-width: 0; box-shadow: none; background: transparent; color: var(--ar-text); cursor: pointer; }
.advance-reader .ar-icon svg { width: 22px; height: 22px; max-width: none; flex: none; }
.advance-reader .ar-icon:hover { background: var(--ar-border); }
.advance-reader .ar-back { flex: none; display: inline-flex; align-items: center; gap: 2px; min-height: 44px; padding: 0 4px 0 10px; border-radius: 10px; color: var(--ar-primary); font-family: var(--ar-font-head); font-size: .9rem; font-weight: 700; line-height: 1.2; text-decoration: none; white-space: nowrap; }
.advance-reader .ar-back:hover { background: var(--ar-border); }
.advance-reader .ar-back svg { flex: none; width: 20px; height: 20px; }
.advance-reader .ar-bar-title { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.advance-reader .ar-bar-book { font-size: .75rem; color: var(--ar-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.advance-reader .ar-bar-chapter { font-family: var(--ar-font-head); font-weight: 700; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.advance-reader .ar-progress { position: absolute; right: 0; left: 0; bottom: -1px; height: 3px; }
.advance-reader .ar-progress span { display: block; height: 100%; width: 0; background: var(--ar-accent); transition: width .15s linear; }

.advance-reader .ar-panel { position: sticky; top: var(--ar-bar-h, 53px); z-index: 19; padding: 12px 14px; background: var(--ar-panel); border-bottom: 1px solid var(--ar-border); box-shadow: 0 8px 18px rgba(0,0,0,.08); }
.advance-reader .ar-settings { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.advance-reader .ar-panel-label { color: var(--ar-muted); margin-left: 4px; }
.advance-reader .ar-search form { display: flex; gap: 8px; }
.advance-reader .ar-search input { flex: 1; min-width: 0; min-height: 44px; padding: 8px 12px; border: 1px solid var(--ar-border); border-radius: 10px; background: var(--ar-bg); color: var(--ar-text); font: inherit; }
.advance-reader .ar-results { max-height: 60vh; overflow: auto; margin-top: 10px; }
.advance-reader .ar-results ol { list-style: none; margin: 0; padding: 0; }
.advance-reader .ar-results a { display: block; padding: 10px 4px; border-bottom: 1px solid var(--ar-border); color: inherit; text-decoration: none; }
.advance-reader .ar-results strong { display: block; font-family: var(--ar-font-head); font-size: .9rem; color: var(--ar-primary); }
.advance-reader .ar-results span { display: block; font-size: .9rem; color: var(--ar-muted); line-height: 1.7; }
.advance-reader mark { background: var(--ar-mark); color: inherit; border-radius: 3px; padding: 0 2px; }

.advance-reader .ar-toc { position: fixed; top: 0; bottom: 0; right: 0; z-index: 100001; width: min(88vw, 380px); overflow-y: auto; overscroll-behavior: contain; background: var(--ar-panel); box-shadow: -6px 0 24px rgba(0,0,0,.18); padding: 0 0 24px; }
.advance-reader .ar-toc-head { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; padding: 6px 14px; background: var(--ar-panel); border-bottom: 1px solid var(--ar-border); }
.advance-reader .ar-toc-list { list-style: none; margin: 0; padding: 6px 0; }
.advance-reader .ar-toc-list a { display: block; padding: 9px 16px; color: inherit; text-decoration: none; line-height: 1.6; border-right: 3px solid transparent; }
.advance-reader .ar-toc-list a:hover { background: var(--ar-border); }
.advance-reader .ar-toc-list a.is-current { border-right-color: var(--ar-accent); font-weight: 700; background: var(--ar-border); }
.advance-reader .ar-toc-part { padding: 14px 16px 4px; font-family: var(--ar-font-head); font-weight: 700; font-size: .85rem; color: var(--ar-muted); }
.advance-reader .ar-toc-library { display: block; margin: 10px 16px 0; color: var(--ar-primary); }
.advance-reader .ar-backdrop { position: fixed; inset: 0; z-index: 100000; background: rgba(0,0,0,.45); }
html:has(.advance-reader.ar-toc-open) { overflow: hidden; }

.advance-reader .ar-main { position: relative; }
.advance-reader .ar-content { position: relative; z-index: 1; padding: 20px 16px 8px; background-image: var(--ar-wm-l); background-repeat: repeat; outline: none; }
.advance-reader .ar-wm-layer { position: absolute; inset: 0; z-index: 2; pointer-events: none; background-image: var(--ar-wm-l); background-repeat: repeat; background-position: 150px 90px; }
.advance-reader[data-theme="dark"] .ar-content, .advance-reader[data-theme="dark"] .ar-wm-layer { background-image: var(--ar-wm-d); }
.advance-reader .ar-content img { -webkit-user-drag: none; user-select: none; }
.advance-reader .ar-loading, .advance-reader .ar-error { padding: 40px 0; text-align: center; color: var(--ar-muted); }
.advance-reader .ar-error { color: #b42318; }

.advance-reader .ar-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 16px; border-top: 1px solid var(--ar-border); }
.advance-reader .ar-pager .ar-btn { flex-direction: column; align-items: flex-start; text-align: right; line-height: 1.5; min-height: 64px; }
.advance-reader .ar-pager .ar-next { grid-column: 2; align-items: flex-end; text-align: left; }
.advance-reader .ar-pager small { color: var(--ar-muted); font-weight: 400; font-size: .8rem; }
.advance-reader .ar-pager span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .92rem; }
.advance-reader .ar-toast { position: fixed; bottom: 20px; right: 50%; transform: translateX(50%); z-index: 100002; max-width: 90vw; padding: 10px 16px; border-radius: 10px; background: #1a1a2e; color: #fff; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.advance-reader .ar-print-note { display: none; }
.advance-reader .ar-onboard { position: fixed; inset: 0; z-index: 100004; display: flex; align-items: flex-end; justify-content: center; padding: 16px; background: rgba(0,0,0,.45); }
.advance-reader .ar-onboard-card { width: min(100%, 460px); margin: 0 0 8px; line-height: 1.9; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.advance-reader .ar-onboard-card strong { font-family: var(--ar-font-head); }
@media (min-width: 700px) { .advance-reader .ar-onboard { align-items: center; } }
.advance-reader .ar-greeting { font-size: 1.05rem; margin: 0 0 14px; }
.advance-reader .ar-line { line-height: 1.9; }
.advance-reader .ar-error + .ar-btn { display: flex; width: max-content; margin: 0 auto 30px; }
.advance-reader .ar-zoom { position: fixed; inset: 0; z-index: 100003; overflow: auto; overscroll-behavior: contain; background: #0b0e14; }
.advance-reader .ar-zoom .ar-zoom-inner { width: max-content; padding: 64px 12px 24px; background-color: transparent; }
.advance-reader .ar-zoom .frame::after { content: ""; position: absolute; inset: 0; z-index: 3; background-image: var(--ar-wm-l); background-repeat: repeat; pointer-events: none; }
.advance-reader .ar-zoom figure { margin: 0; }
.advance-reader .ar-zoom .frame { cursor: default; }
.advance-reader .ar-zoom-close { position: fixed; top: 12px; left: 12px; z-index: 2; }

@media (min-width: 900px) {
  .advance-reader .ar-content { padding: 28px 32px 12px; }
}

/* A table wider than the column scrolls in its own box (reader.js markTables); the line above it says so. */
.advance-reader .ar-content .ar-table-hint { display: flex; align-items: center; gap: 8px; margin: 12px 0 -4px; color: var(--ar-muted); font-size: calc(var(--ar-fs, 18px) * .8); line-height: 1.6; }
.advance-reader .ar-content .ar-table-hint::before { content: ""; flex: none; width: 24px; height: 12px; background: currentColor; -webkit-mask: var(--ar-arrows) no-repeat center / contain; mask: var(--ar-arrows) no-repeat center / contain; --ar-arrows: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M2 6h20M7 1.5 2 6l5 4.5M17 1.5 22 6l-5 4.5' stroke='black' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.advance-reader .ar-content .ar-table.ar-table-wide { border: 1px solid var(--ar-border); scrollbar-width: thin; }

/* Full-page view (templates/fullpage.php, html.ar-fullpage): the reader is the whole page, sized by device.
   Phone (up to 599 px): full width, 16 px sides. Tablet (600-1023 px): a 700 px column (644 px of text: a 640 px wide table fits). Laptop and desktop (1024 px
   and up): a 760 px column with more air. The background and the bar span the screen; iPhone safe areas are kept. */
html.ar-fullpage { background: #FCFCFE; }
html.ar-fullpage body { margin: 0; padding: 0; background: transparent; }
.ar-fullpage .advance-reader.ar-reader { --ar-col: 100%; max-width: none; min-height: 100vh; min-height: 100dvh; margin: 0; }
.ar-fullpage .advance-reader .ar-bar { padding: max(4px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right), calc((100% - 1040px) / 2)) 4px max(6px, env(safe-area-inset-left), calc((100% - 1040px) / 2)); }
.ar-fullpage .advance-reader .ar-panel { padding-inline: max(14px, calc((100% - var(--ar-col)) / 2 + 14px)); }
.ar-fullpage .advance-reader .ar-main, .ar-fullpage .advance-reader .ar-pager { max-width: var(--ar-col); margin-inline: auto; }
.ar-fullpage .advance-reader .ar-content { padding: 20px max(16px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left)); }
.ar-fullpage .advance-reader .ar-content [id] { scroll-margin-top: calc(var(--ar-bar-h, 53px) + 16px); }
.ar-fullpage .advance-reader .ar-pager { padding: 16px max(16px, env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
.ar-fullpage .advance-reader .ar-toc-head { padding-top: calc(6px + env(safe-area-inset-top)); }
.ar-fullpage .advance-reader .ar-toc { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
.ar-fullpage .advance-reader .ar-toast { bottom: calc(20px + env(safe-area-inset-bottom)); }
.ar-fullpage .advance-reader .ar-zoom-close { top: calc(12px + env(safe-area-inset-top)); }
@media (min-width: 600px) {
  .ar-fullpage .advance-reader.ar-reader { --ar-col: 700px; }
  .ar-fullpage .advance-reader .ar-content { padding: 32px 28px 12px; }
  .ar-fullpage .advance-reader .ar-pager { padding-inline: 28px; }
}
@media (min-width: 1024px) {
  .ar-fullpage .advance-reader.ar-reader { --ar-col: 760px; }
  .ar-fullpage .advance-reader .ar-content { padding: 48px 40px 16px; }
  .ar-fullpage .advance-reader .ar-pager { padding-inline: 40px; }
  .ar-fullpage .advance-reader .ar-bar-book { font-size: .8rem; }
  .ar-fullpage .advance-reader .ar-bar-chapter { font-size: 1rem; }
}

/* No printing of the paid edition. */
@media print {
  .advance-reader .ar-bar, .advance-reader .ar-panel, .advance-reader .ar-toc, .advance-reader .ar-main, .advance-reader .ar-pager, .advance-reader .ar-toast, .advance-reader .ar-au-dock { display: none !important; }
  .advance-reader .ar-print-note { display: block !important; font-size: 16pt; text-align: center; padding: 40pt 0; }
  .advance-reader.ar-reader { min-height: 0; background: none; color: #000; }
}

/* «الخطوة الجاية»: the end page after the last chapter (templates/endpage.php), inside .ar-content so the watermark
   layers stay over it. Selectors carry three classes to win over the book's content.css (.advance-reader .ar-content h2).
   Store palette: navy, brass, sand; orange only on buy buttons (navy text on orange for contrast). */
.advance-reader .ar-end {
  --ae-navy: #0C1042; --ae-navy-2: #161D63; --ae-brass: #B8955A; --ae-brass-l: #D9BE8C; --ae-bronze: #806230;
  --ae-paper: #F6F2EB; --ae-orange: #DC9434; --ae-on-navy: #E4E6F2;
  --ae-ink: #141A33; --ae-ink-2: #4A463F; --ae-line: #D8CFC0; --ae-title: var(--ae-navy);
  --ae-head: var(--font-head, "Alyamama", "Noto Naskh Arabic", "IBM Plex Sans Arabic", serif);
  --ae-body: var(--font-body, "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif);
  font-family: var(--ae-body); color: var(--ae-ink); font-size: 1rem; line-height: 1.85; padding: 4px 0 8px;
}
.advance-reader[data-theme="dark"] .ar-end {
  --ae-ink: #E6E9FB; --ae-ink-2: #B9BEDF; --ae-paper: #151A45; --ae-line: #2D3570; --ae-bronze: #D9BE8C; --ae-title: #FFFFFF;
}
.advance-reader .ar-end .ar-end-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.advance-reader .ar-end .ar-end-kicker { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; color: var(--ae-bronze); font-size: .88rem; font-weight: 700; }
.advance-reader .ar-end .ar-end-kicker::before { content: ""; flex: none; width: 28px; height: 1.5px; background: currentColor; }
.advance-reader .ar-end .ar-end-title { margin: 0 0 12px; padding: 0; border: 0; font-family: var(--ae-head); font-size: clamp(1.6rem, 1.15rem + 2.2vw, 2.35rem); font-weight: 700; line-height: 1.35; color: var(--ae-title); text-wrap: balance; }
.advance-reader .ar-end .ar-end-lead { margin: 0; font-size: 1.06rem; color: var(--ae-ink-2); }
.advance-reader .ar-end .ar-end-h2 { margin: 0 0 4px; padding: 0; border: 0; font-family: var(--ae-head); font-size: 1.35rem; font-weight: 700; line-height: 1.4; color: var(--ae-title); }
.advance-reader .ar-end .ar-end-note { margin: 0; font-size: .92rem; color: var(--ae-ink-2); }
.advance-reader .ar-end .ar-end-text { margin: 0; }
.advance-reader .ar-end .ar-end-text a { color: inherit; font-weight: 700; text-decoration-color: var(--ae-brass); text-underline-offset: .3em; }
.advance-reader .ar-end .ar-end-mgmt .ar-end-text a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ae-title); }
.advance-reader .ar-end .ar-end-fine { margin: 10px 0 0; font-size: .84rem; line-height: 1.75; color: var(--ae-ink-2); }
.advance-reader .ar-end .ar-end-block { margin: 34px 0 0; }

/* Buttons: 50 px tall, full width on a phone. */
.advance-reader .ar-end .ar-end-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 10px 20px; border: 1.5px solid transparent; border-radius: 12px; font-family: var(--ae-body); font-size: 1rem; font-weight: 700; line-height: 1.4; text-align: center; text-decoration: none; cursor: pointer; transition: background-color .15s, transform .15s; }
.advance-reader .ar-end .ar-end-btn:hover { transform: translateY(-1px); }
.advance-reader .ar-end .ar-end-btn:focus-visible { outline: 3px solid var(--ae-brass-l); outline-offset: 3px; }
.advance-reader .ar-end .ar-end-btn--buy { background: var(--ae-orange); color: var(--ae-navy); box-shadow: 0 8px 20px rgb(220 148 52 / .28); }
.advance-reader .ar-end .ar-end-btn--buy:hover { background: #E5A24A; }
.advance-reader .ar-end .ar-end-btn--brass { background: var(--ae-brass-l); color: var(--ae-navy); }
.advance-reader .ar-end .ar-end-btn--brass:hover { background: #E6CFA6; }
.advance-reader .ar-end .ar-end-btn--line { border-color: var(--ae-title); color: var(--ae-title); background: transparent; }
.advance-reader .ar-end .ar-end-btn--wide { width: 100%; }
.advance-reader .ar-end .ar-end-cta { margin: 18px 0 0; }
.advance-reader .ar-end .ar-end-cta .ar-end-btn { width: 100%; }

/* Prices: the current price large, the regular price crossed. */
.advance-reader .ar-end .ar-end-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 6px; margin: 0; line-height: 1.2; color: var(--ae-title); }
.advance-reader .ar-end .ar-end-num { font-family: var(--ae-body); font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.advance-reader .ar-end .ar-end-cur { font-size: .9rem; font-weight: 600; }
.advance-reader .ar-end .ar-end-was { margin-inline-start: 4px; color: var(--ae-ink-2); font-size: .95rem; text-decoration-thickness: 1.5px; }
.advance-reader .ar-end .ar-end-founding { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font-size: .88rem; font-weight: 600; color: var(--ae-bronze); }
.advance-reader .ar-end .ar-end-founding::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ae-orange); box-shadow: 0 0 0 4px rgb(220 148 52 / .18); }

/* Platform books */
.advance-reader .ar-end .ar-end-books { display: grid; gap: 14px; margin: 16px 0 0; padding: 0; list-style: none; }
.advance-reader .ar-end .ar-end-book { display: grid; grid-template-columns: 112px 1fr; align-items: center; gap: 12px 14px; margin: 0; padding: 16px 14px; border-radius: 18px; background: var(--ae-paper); }
.advance-reader .ar-end .ar-end-cover { display: block; width: 100%; height: auto; filter: drop-shadow(0 6px 10px rgb(12 16 66 / .18)); }
.advance-reader .ar-end .ar-end-book-head { min-width: 0; }
.advance-reader .ar-end .ar-end-book-title { margin: 0; padding: 0; border: 0; font-family: var(--ae-head); font-size: 1.08rem; font-weight: 700; line-height: 1.5; color: var(--ae-title); }
.advance-reader .ar-end .ar-end-meta { margin: 4px 0 0; font-size: .82rem; line-height: 1.6; font-weight: 600; color: var(--ae-bronze); }
.advance-reader .ar-end .ar-end-why { grid-column: 1 / -1; margin: 0; font-size: .97rem; color: var(--ae-ink-2); }
.advance-reader .ar-end .ar-end-buy { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; }
.advance-reader .ar-end .ar-end-buy .ar-end-btn { flex: 1 1 180px; }

/* Navy panels: the full bundle and the call. The light watermark tile is layered on them, since the dark tile of
   the reader's overlay disappears on navy. */
.advance-reader .ar-end .ar-end-star, .advance-reader .ar-end .ar-end-call {
  position: relative; overflow: hidden; margin: 36px 0 0; padding: 24px 18px 22px; border-radius: 24px; border: 1px solid rgb(217 190 140 / .45);
  color: var(--ae-on-navy);
  background-color: var(--ae-navy);
  background-image: var(--ar-wm-d), radial-gradient(120% 70% at 100% 0%, rgb(34 46 170 / .55), transparent 60%), linear-gradient(165deg, var(--ae-navy-2), var(--ae-navy) 62%);
  background-repeat: repeat, no-repeat, no-repeat;
  box-shadow: 0 22px 44px rgb(12 16 66 / .26);
}
.advance-reader .ar-end .ar-end-star .ar-end-kicker, .advance-reader .ar-end .ar-end-call .ar-end-kicker { color: var(--ae-brass-l); }
.advance-reader .ar-end .ar-end-star .ar-end-fine, .advance-reader .ar-end .ar-end-call .ar-end-fine { color: rgb(228 230 242 / .78); }
.advance-reader .ar-end .ar-end-tag { display: inline-block; margin: 0; padding: 3px 14px; border-radius: 999px; background: var(--ae-brass-l); color: var(--ae-navy); font-size: .8rem; font-weight: 700; line-height: 1.6; }
.advance-reader .ar-end .ar-end-star-img { display: block; width: 100%; max-width: 520px; height: auto; margin: 12px auto 6px; filter: drop-shadow(0 14px 18px rgb(0 0 0 / .35)); }
.advance-reader .ar-end .ar-end-star-title { margin: 4px 0 6px; padding: 0; border: 0; font-family: var(--ae-head); font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.2rem); font-weight: 700; line-height: 1.3; color: #FFFFFF; }
.advance-reader .ar-end .ar-end-star .ar-end-text { font-size: .98rem; color: var(--ae-on-navy); }

/* «You have / the full bundle adds» */
.advance-reader .ar-end .ar-end-compare { width: 100%; margin: 20px 0 6px; border: 0; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: .93rem; line-height: 1.6; background: none; }
.advance-reader .ar-end .ar-end-compare caption { caption-side: top; padding: 0 0 10px; text-align: right; font-family: var(--ae-head); font-size: 1.05rem; font-weight: 700; color: var(--ae-brass-l); }
.advance-reader .ar-end .ar-end-compare th, .advance-reader .ar-end .ar-end-compare td { padding: 11px 6px; border: 0; border-top: 1px solid rgb(217 190 140 / .2); background: none; vertical-align: middle; text-align: center; overflow-wrap: normal; word-break: normal; }
.advance-reader .ar-end .ar-end-compare thead th, .advance-reader .ar-end .ar-end-compare thead td { padding-top: 0; padding-bottom: 8px; border-top: 0; font-family: var(--ae-body); font-size: .78rem; font-weight: 700; color: var(--ae-brass-l); }
.advance-reader .ar-end .ar-end-compare thead th:last-child, .advance-reader .ar-end .ar-end-compare td:last-child { width: 68px; background: rgb(217 190 140 / .1); }
.advance-reader .ar-end .ar-end-compare thead th:nth-child(2), .advance-reader .ar-end .ar-end-compare td:nth-child(2) { width: 58px; }
.advance-reader .ar-end .ar-end-compare thead th { line-height: 1.35; }
.advance-reader .ar-end .ar-end-compare thead th:last-child { border-radius: 12px 12px 0 0; padding-top: 8px; }
.advance-reader .ar-end .ar-end-compare tbody tr:last-child td:last-child { border-radius: 0 0 12px 12px; }
.advance-reader .ar-end .ar-end-compare tbody th { padding-inline-start: 2px; text-align: right; font-family: var(--ae-body); font-weight: 500; color: #FFFFFF; }
.advance-reader .ar-end .ar-end-ico { display: inline-block; vertical-align: middle; }
.advance-reader .ar-end .ar-end-yes { color: var(--ae-brass-l); }
.advance-reader .ar-end .ar-end-no { color: rgb(228 230 242 / .42); }
.advance-reader .ar-end .ar-end-part { display: block; font-size: .78rem; font-weight: 700; line-height: 1.35; color: var(--ae-on-navy); }

.advance-reader .ar-end .ar-end-offer { margin: 18px 0 0; padding: 18px 0 0; border-top: 1px solid rgb(217 190 140 / .3); text-align: center; }
.advance-reader .ar-end .ar-end-offer .ar-end-price { justify-content: center; color: #FFFFFF; }
.advance-reader .ar-end .ar-end-price--big .ar-end-num { font-size: 2.7rem; }
.advance-reader .ar-end .ar-end-offer .ar-end-was { color: rgb(228 230 242 / .62); font-size: 1.1rem; }
.advance-reader .ar-end .ar-end-save { margin: 6px 0 16px; font-size: .92rem; font-weight: 600; color: var(--ae-brass-l); }

/* Account management: a quiet line under the bundle, a card after the call. */
.advance-reader .ar-end .ar-end-mgmt { margin: 30px 0 0; padding: 18px 0 0; border-top: 1px solid var(--ae-line); }
.advance-reader .ar-end .ar-end-mgmt .ar-end-text { font-size: .97rem; color: var(--ae-ink-2); }
.advance-reader .ar-end .ar-end-mgmt-card { margin: 22px 0 0; padding: 22px 18px; border-radius: 22px; background: var(--ae-paper); }
.advance-reader .ar-end .ar-end-mgmt-card .ar-end-text { margin: 8px 0 0; color: var(--ae-ink-2); }

/* The call (door 3, upgrade, team). */
.advance-reader .ar-end .ar-end-call { margin-top: 8px; padding: 26px 20px 22px; }
.advance-reader .ar-end .ar-end-call > * { position: relative; }
.advance-reader .ar-end .ar-end-call .ar-end-call-num { position: absolute; top: 14px; left: 18px; font-family: var(--ae-body); font-size: clamp(5rem, 3.6rem + 6vw, 8.5rem); font-weight: 700; line-height: 1; letter-spacing: -.02em; color: rgb(217 190 140 / .13); pointer-events: none; user-select: none; }
.advance-reader .ar-end .ar-end-call .ar-end-title { color: #FFFFFF; }
.advance-reader .ar-end .ar-end-call .ar-end-lead { color: var(--ae-on-navy); }
.advance-reader .ar-end .ar-end-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; padding: 0; list-style: none; }
.advance-reader .ar-end .ar-end-chips li { margin: 0; padding: 2px 12px; border: 1px solid rgb(217 190 140 / .55); border-radius: 999px; color: var(--ae-brass-l); font-size: .84rem; font-weight: 600; }
.advance-reader .ar-end .ar-end-pending { margin: 16px 0 0; padding: 12px 14px; border-radius: 14px; background: rgb(255 255 255 / .07); font-size: .93rem; color: var(--ae-on-navy); }
.advance-reader .ar-end .ar-end-prep { margin: 18px 0 0; padding: 14px 0 0; border-top: 1px solid rgb(217 190 140 / .25); font-size: .9rem; color: var(--ae-brass-l); }

.advance-reader .ar-end .ar-end-back { margin: 30px 0 4px; text-align: center; }
.advance-reader .ar-end .ar-end-back a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ae-title); font-weight: 600; text-decoration-color: var(--ae-brass); text-underline-offset: .3em; }

@media (max-width: 639px) {
  .advance-reader .ar-end .ar-end-call .ar-end-call-num { display: none; }
  .advance-reader .ar-end .ar-end-star, .advance-reader .ar-end .ar-end-call, .advance-reader .ar-end .ar-end-book, .advance-reader .ar-end .ar-end-mgmt-card { margin-inline: -10px; }
}
@media (min-width: 640px) {
  .advance-reader .ar-end .ar-end-book { grid-template-columns: 188px 1fr; align-items: start; padding: 18px; column-gap: 20px; }
  .advance-reader .ar-end .ar-end-cover { grid-row: 1 / span 3; align-self: center; }
  .advance-reader .ar-end .ar-end-why, .advance-reader .ar-end .ar-end-buy { grid-column: 2; }
  .advance-reader .ar-end .ar-end-buy .ar-end-btn { flex: 0 1 auto; }
  .advance-reader .ar-end .ar-end-star, .advance-reader .ar-end .ar-end-call { padding: 30px 32px 28px; }
  .advance-reader .ar-end .ar-end-mgmt-card { padding: 24px 28px; }
  .advance-reader .ar-end .ar-end-cta .ar-end-btn { width: auto; min-width: 280px; }
  .advance-reader .ar-end .ar-end-offer .ar-end-btn--wide { width: auto; min-width: 340px; }
  .advance-reader .ar-end .ar-end-compare { max-width: 600px; margin-inline: auto; font-size: .97rem; }
  .advance-reader .ar-end .ar-end-compare thead th:last-child, .advance-reader .ar-end .ar-end-compare td:last-child { width: 112px; }
  .advance-reader .ar-end .ar-end-compare thead th:nth-child(2), .advance-reader .ar-end .ar-end-compare td:nth-child(2) { width: 92px; }
}

/* The way in: last line of the contents, and the next button of the last chapter. */
.advance-reader .ar-toc-list .ar-toc-end { margin-top: 6px; border-top: 1px solid var(--ar-border); }
.advance-reader .ar-toc-list .ar-toc-end a { font-weight: 700; color: var(--ar-primary); }
.advance-reader .ar-pager .ar-next.ar-pager-end { background: #0C1042; border-color: #0C1042; color: #FFFFFF; }
.advance-reader .ar-pager .ar-next.ar-pager-end small { color: #D9BE8C; }

/* «مكتبتي» on phones (W-WOO, 2026-10-07, with the grouped list): every card full width; a small cover beside the kicker
   and the page line, the title across the card on one or two lines, the button full width with its label on one line.
   The page keeps only the theme's side space. Selectors carry one class more than the theme's (assets/css/reader.css),
   so they win whatever the load order; from 700 px the theme's shelf of cards stays. */
@media (max-width: 699px) {
	.advance-reader.ar-page .ar-books { padding: 0; }
	.entry-content .advance-reader.ar-page { padding-inline: 0; }
	.advance-reader .ar-books .ar-book { display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-areas: "cover kicker" "cover meta" "title title" "act act"; column-gap: 12px; row-gap: 4px; align-items: start; padding: 14px; }
	.advance-reader .ar-books .ar-book .ar-book-body { display: contents; }
	.advance-reader .ar-books .ar-book .ar-cover { grid-area: cover; width: 64px; max-width: 64px; margin: 0; }
	.advance-reader .ar-books .ar-book .ar-kicker { grid-area: kicker; align-self: end; }
	.advance-reader .ar-books .ar-book .ar-muted { grid-area: meta; align-self: start; }
	.advance-reader .ar-books .ar-book .ar-book-title { grid-area: title; margin-top: 6px; font-size: 1.0625rem; line-height: 1.5; }
	.advance-reader .ar-books .ar-book .ar-actions { grid-area: act; margin: 6px 0 0; padding: 0; }
	.advance-reader .ar-books .ar-book .ar-btn-primary { display: flex; width: 100%; white-space: nowrap; }
}
@media (max-width: 320px) {
	/* Very narrow screens (a 412 px phone at 150% display size is about 275 px): the longest title still fits two lines. */
	.advance-reader .ar-books .ar-book { padding: 10px; }
	.advance-reader .ar-books .ar-book .ar-book-title { font-size: .9375rem; }
}

/* Audio companion (1.3.0): «استمع» in «مكتبتي» and in the reader (templates/audio-list.php), and the compact player
   docked at the bottom of the reader (templates/audio-reader.php, assets/audio.js). The /new/ look: neutral greys,
   near-black controls, one blue accent, no gold. In «مكتبتي» it takes the theme's light-system tokens (--l-*, which
   follow the dark mode of the phone) when the page has them; in the reader it follows night mode. */
.advance-reader {
  --au-ink: var(--l-ink, #1d1d1f); --au-mute: var(--l-mute, #6e6e73); --au-line: var(--l-hair, #e8e8ed); --au-soft: var(--l-soft, #f5f5f7);
  --au-accent: var(--l-accent, #222eaa); --au-btn: var(--l-btn, #1d1d1f); --au-btn-ink: var(--l-btn-ink, #fff); --au-surface: var(--l-card, #fff);
}
.advance-reader[data-theme="dark"] {
  --au-ink: #f5f5f7; --au-mute: #a1a1a6; --au-line: rgb(255 255 255 / .12); --au-soft: rgb(255 255 255 / .07);
  --au-accent: #8a97ff; --au-btn: #f5f5f7; --au-btn-ink: #000; --au-surface: var(--ar-panel);
}
.advance-reader .ar-au-group { border-top: 1px solid var(--au-line); }
.advance-reader .ar-au-group:first-of-type { border-top: 0; }
.advance-reader .ar-au-sum { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 4px 2px; color: var(--au-ink); font-weight: 600; line-height: 1.5; cursor: pointer; list-style: none; }
.advance-reader .ar-au-sum::-webkit-details-marker { display: none; }
.advance-reader .ar-au-sum::after { content: ""; flex: none; width: 9px; height: 9px; margin-inline-start: 4px; border: solid var(--au-mute); border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-3px); transition: transform .15s; }
.advance-reader .ar-au-group[open] > .ar-au-sum::after { transform: rotate(-135deg) translateY(-2px); }
.advance-reader .ar-au-count { margin-inline-start: auto; color: var(--au-mute); font-size: .85em; font-weight: 400; }
.advance-reader .ar-au-sum:focus-visible { outline: 3px solid var(--au-accent); outline-offset: 2px; border-radius: 8px; }
.advance-reader .ar-au-ai { margin: 0 0 6px; padding: 6px 12px; border-radius: 10px; background: var(--au-soft); color: var(--au-mute); font-size: .82rem; line-height: 1.7; }
.advance-reader .ar-au-list { list-style: none; margin: 0; padding: 0; }
.advance-reader .ar-au-ep { margin: 0; padding: 2px 0 6px; border-bottom: 1px solid var(--au-line); }
.advance-reader .ar-au-ep:last-child { border-bottom: 0; }
.advance-reader .ar-au-go { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; margin: 0; padding: 8px 4px; border: 0; border-radius: 12px; background: transparent; box-shadow: none; color: var(--au-ink); font: inherit; text-align: start; text-decoration: none; cursor: pointer; }
.advance-reader .ar-au-go:hover { background: var(--au-soft); }
.advance-reader .ar-au-go:focus-visible { outline: 3px solid var(--au-accent); outline-offset: 1px; }
.advance-reader .ar-au-n { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--au-soft); color: var(--au-mute); font-size: .8rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.advance-reader .ar-au-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.5; }
.advance-reader .ar-au-title { font-size: .98rem; font-weight: 600; }
.advance-reader .ar-au-meta { color: var(--au-mute); font-size: .82rem; }
.advance-reader .ar-au-icon { flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--au-btn); color: var(--au-btn-ink); }
.advance-reader .ar-au-ep.is-current .ar-au-n { background: var(--au-accent); color: #fff; }
.advance-reader[data-theme="dark"] .ar-au-ep.is-current .ar-au-n { color: #000; }
.advance-reader .ar-au-ptr { margin: 0; padding-inline-start: 44px; color: var(--au-mute); font-size: .82rem; line-height: 1.6; }
.advance-reader .ar-au-ptr a, .advance-reader .ar-au-more a { color: var(--au-accent); font-weight: 600; text-underline-offset: .2em; }
.advance-reader .ar-au-more { margin: 8px 0 6px; color: var(--au-mute); font-size: .88rem; line-height: 1.8; }
.advance-reader .ar-listen-lib .ar-h3 { margin-bottom: 6px; }
.advance-reader .ar-listen { max-height: min(70vh, 560px); overflow-y: auto; overscroll-behavior: contain; padding-block: 4px 8px; }

/* The compact player: fixed at the bottom while an episode is chosen; the page leaves room for it. */
.advance-reader .ar-au-dock { position: fixed; right: 0; left: 0; bottom: 0; z-index: 30; padding: 8px max(12px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); border-top: 1px solid var(--au-line); background: var(--au-surface); color: var(--au-ink); box-shadow: 0 -8px 28px rgb(0 0 0 / .08); }
.advance-reader.ar-au-on { padding-bottom: var(--ar-dock-h, 160px); }
.advance-reader.ar-au-on .ar-toast { bottom: calc(var(--ar-dock-h, 160px) + 12px); }
.advance-reader .ar-au-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; max-width: 700px; margin: 0 auto; }
.advance-reader .ar-au-head { display: flex; align-items: center; gap: 8px; }
.advance-reader .ar-au-info { flex: 1; min-width: 0; }
.advance-reader .ar-au-now { margin: 0; font-size: .95rem; font-weight: 600; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.advance-reader .ar-au-now-sub { margin: 0; color: var(--au-mute); font-size: .78rem; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.advance-reader .ar-au-now-sub a { color: var(--au-accent); font-weight: 600; }
.advance-reader .ar-au-close { color: var(--au-mute); }
.advance-reader .ar-au-seek { display: flex; align-items: center; gap: 10px; }
.advance-reader .ar-au-seek input { flex: 1; min-width: 0; height: 32px; margin: 0; padding: 0; background: transparent; accent-color: var(--au-accent); cursor: pointer; }
.advance-reader .ar-au-time { flex: none; min-width: 3.2em; color: var(--au-mute); font-size: .78rem; font-variant-numeric: tabular-nums; text-align: center; }
.advance-reader .ar-au-ctrl { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.advance-reader .ar-au-btn { display: inline-grid; place-items: center; width: 48px; height: 48px; min-width: 0; margin: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; box-shadow: none; color: var(--au-ink); cursor: pointer; }
.advance-reader .ar-au-btn:hover { background: var(--au-soft); }
.advance-reader .ar-au-btn svg { max-width: none; }
.advance-reader .ar-au-main, .advance-reader .ar-au-main:hover { width: 56px; height: 56px; background: var(--au-btn); color: var(--au-btn-ink); }
.advance-reader .ar-au-dock .ar-au-i-pause, .advance-reader .ar-au-dock.is-playing .ar-au-i-play { display: none; }
.advance-reader .ar-au-dock.is-playing .ar-au-i-pause { display: inline; }
.advance-reader .ar-au-rate select { min-width: 68px; min-height: 44px; padding: 4px 10px; border: 1px solid var(--au-line); border-radius: 999px; background: var(--au-surface); color: var(--au-ink); font: inherit; font-size: .85rem; font-variant-numeric: tabular-nums; cursor: pointer; }
.advance-reader .ar-au-dock :is(button, select, input, a):focus-visible { outline: 3px solid var(--au-accent); outline-offset: 2px; }
.advance-reader .ar-au-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (min-width: 900px) {
  .advance-reader .ar-au-in { max-width: 960px; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head ctrl" "seek seek"; column-gap: 28px; align-items: center; }
  .advance-reader .ar-au-head { grid-area: head; }
  .advance-reader .ar-au-ctrl { grid-area: ctrl; gap: 10px; }
  .advance-reader .ar-au-seek { grid-area: seek; }
}