/* ReadAtlas UX fix 2026-11-13: skeleton + reading-notice + settings-panel fix.
   Source-card selectors retain priority when Vite appends its stylesheet.
   No inline style/script: CSP is style-src/script-src 'self'. */

/* 1. First-paint skeleton: replaces the big black blank before the SPA mounts.
   Vue clears #app on mount, so this only shows while loading. */
.ra-skeleton{max-width:72rem;margin:0 auto;padding:1.5rem 1rem 3rem;color:var(--ink);background:var(--paper)}
.ra-skeleton-top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding-bottom:1rem;border-bottom:1px solid var(--line)}
.ra-skeleton-brand{font-family:var(--serif);font-size:1.5rem;font-weight:700}
.ra-skeleton-note{font-size:.85rem;color:var(--muted)}
.ra-skeleton-hero{height:9rem;margin:1.5rem 0;border-radius:1rem;background:var(--surface)}
.ra-skeleton-grid{display:grid;gap:1rem}
@media(min-width:640px){.ra-skeleton-grid{grid-template-columns:repeat(3,1fr)}}
.ra-skeleton-card{height:11rem;border:1px solid var(--line);border-radius:1rem;background:var(--surface)}
.ra-skeleton-hero,.ra-skeleton-card{animation:ra-shimmer 1.6s ease-in-out infinite}
@keyframes ra-shimmer{50%{opacity:.55}}

/* 2. Source notice: the public story page has no body by licence (title only).
   Make the notice read as a notice, not a plain card. */
:root .reader-source-card{border:1px solid var(--line);border-left:4px solid var(--accent);background:var(--surface)}
:root .reader-source-card h2{font-size:1.25rem}
:root .reader-source-card .reader-source-link{font-weight:700}

/* 3. Reading-settings panel used to cover the article title.
   While it is open, push the heading down so the title stays readable. */
.reader-settings-panel{box-shadow:0 .75rem 2rem rgba(0,0,0,.22)}
.reader-document:has(.reader-settings[open]) .reader-heading{margin-top:10.5rem}

/* 4. Loading / error panel: reserve height so the page does not jump. */
.status-panel{min-height:15rem}

@media(prefers-reduced-motion:reduce){.ra-skeleton-hero,.ra-skeleton-card{animation:none}}
