/* Shared distance between the app header and the first visible screen content. */
:root { --header-content-space: 24px; }
.page { padding-top: var(--header-content-space); }

/* Reader panels use their own inner inset. Removing the outer bottom inset
   prevents a navigation-like blank strip after chapters, MCQs and PYQs. */
.reader-page { padding: 0; }
.reader-content { padding-top: var(--header-content-space); padding-bottom: 20px; }
.reader-content__body > :last-child { margin-bottom: 0; }
.test-page { padding-top: var(--header-content-space); }

/* List indices always use the same study-brand accent. */
.card-index { color: var(--saffron); }
.page-intro, .home-greeting { margin-top: 0; }
.page > .library-section:first-child, .page > .checkout-summary:first-child { margin-top: 0; }

/* A purchased kit uses an icon instead of an extra status word. */
.access-icon { width: 30px; height: 30px; display: inline-grid; place-items: center; flex: 0 0 auto; border-radius: 9px; }
.access-icon--unlocked { background: #EAF2FF; }
.access-icon--locked { background: var(--saffron-pale); }
.access-icon img { display: block; width: 18px; height: 18px; }
.state-chip--locked { background: var(--saffron-pale); color: #B9470B; border: 1px solid #FFD6BC; }

/* Keep the complete purchase action obvious without hiding resource scope. */
.locked-note--cta { display: grid; align-items: stretch; gap: 12px; }
.locked-note--cta .button { width: 100%; }

/* The base progress-bar selector targets every nested div. Reset it for the
   text row so the question number and timer can never be clipped. */
.test-progress__meta { display: flex; height: auto !important; overflow: visible !important; align-items: center; justify-content: space-between; gap: 16px; background: transparent !important; border-radius: 0 !important; }
.test-progress__meta b { min-width: 66px; padding: 4px 9px; border-radius: 8px; background: #EAF2FF; color: var(--navy); text-align: center; font-variant-numeric: tabular-nums; }

/* Test controls remain centred as a deliberate pair, even on wide screens. */
.test-next { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 20px; }
.test-next .button, .test-next form { min-width: 132px; }
.test-next form { margin: 0; }

/* Keep secondary floating reader utilities visibly branded, not filled. */
.chapter-toc-trigger { border-color: var(--saffron) !important; }
.chapter-toc-trigger:active { background: var(--saffron-pale) !important; }

/* The close glyph is a centred icon, independent of browser button defaults. */
.chapter-toc-sheet__panel > div > button { display: grid !important; place-items: center; padding: 0 !important; font-family: Arial, sans-serif !important; line-height: 1 !important; }

/* Author display rules must never override an element intentionally hidden by
   reader interactions, such as the mobile chapter contents sheet. */
.chapter-toc[hidden], .chapter-toc-trigger[hidden], .chapter-toc-sheet[hidden] { display: none !important; }

.empty-state { min-height: calc(100dvh - 132px); display: grid; place-items: center; text-align: center; color: var(--muted); font-size: 16px; }
.empty-state p { margin: 0; }

@media (min-width: 720px) {
    .reader-page { padding: 0 24px; }
    .empty-state { min-height: calc(100dvh - 108px); }
}