/* REPAIRS FRAGMENT — Archives in-site reader ("reading stand"). Mobile-first.
   Save as app/assets/archives-reader.css and link it in <head>. */

/* ---------- reading stand shell ---------- */
.reader-stand{border:2px solid var(--paper);background:#0c0e0b;box-shadow:12px 12px 0 var(--purple);margin:0 0 36px}
.reader-stand [hidden]{display:none!important}
.reader-stand-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;padding:16px 18px;border-bottom:1px solid var(--line)}
.reader-stand-kicker{display:block;color:var(--green);font-size:.62rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase;margin-bottom:5px}
.reader-stand-head h3{margin:0;font:900 2.1rem/.9 "Barlow Condensed";text-transform:uppercase}
.reader-stand-head .btn{margin:0}

/* ---------- chapter tools ---------- */
.reader-stand-tools{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:12px;padding:12px 18px;border-bottom:1px solid var(--line);background:#080908}
.reader-chapter-label{display:grid;gap:6px;font-size:.68rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);flex:1;min-width:min(100%,240px)}
.reader-chapter{width:100%;min-height:48px;border:1px solid var(--line);background:#0c0e0b;color:var(--paper);padding:10px 12px;font:800 .85rem "Work Sans"}
.reader-font{display:flex;gap:8px}
.reader-font button{min-width:48px;min-height:48px;border:2px solid var(--paper);background:transparent;color:var(--paper);font:900 1rem "Work Sans";cursor:pointer}
.reader-font button:hover,.reader-font button:focus{background:var(--purple);border-color:var(--purple);color:#fff}

/* ---------- the page itself: paper, readable on phones ---------- */
.reader-page{--reader-fs:1.02rem;max-height:min(78vh,760px);overflow-y:auto;padding:26px clamp(18px,5vw,54px);background:#fff9ed;color:#16130e;-webkit-overflow-scrolling:touch}
.reader-page h4{margin:0 0 18px;font:900 1.9rem/.95 "Barlow Condensed";text-transform:uppercase;letter-spacing:.01em;color:#0c0d0a}
.reader-page p{font:500 var(--reader-fs)/1.75 "Work Sans",system-ui,sans-serif;margin:0 0 1.15em;color:#1c1a14;overflow-wrap:break-word}
.reader-page p.chap-head{font-weight:900;text-transform:uppercase;letter-spacing:.07em;margin:1.6em 0 1em;color:#0c0d0a}

/* ---------- prev / next ---------- */
.reader-stand-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 18px;border-top:1px solid var(--line)}
.reader-stand-nav .btn{margin:0}
.reader-stand-nav .btn:disabled{opacity:.32;cursor:default}
.reader-stand-nav .btn:disabled:hover,.reader-stand-nav .btn:disabled:focus{background:transparent;border-color:var(--paper);color:var(--paper)}
.reader-pos{color:var(--muted);font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;text-align:center}

/* ---------- fallback: file not on the stand yet (Wattpad link kept) ---------- */
.reader-stand-soon{display:grid;grid-template-columns:120px 1fr;gap:18px;padding:22px 18px;align-items:start}
.reader-stand-soon img{display:block;width:100%;aspect-ratio:2/3;object-fit:cover;border:1px solid var(--line);background:#191b17}
.reader-stand-soon h4{margin:0 0 8px;font:900 1.8rem/.9 "Barlow Condensed";text-transform:uppercase}
.reader-stand-soon p{color:var(--muted);font-size:.82rem;line-height:1.55;margin:0 0 10px}
.reader-stand-soon .reader-soon-note{color:var(--paper);font-weight:700;margin:0}
.reader-stand-fine{margin:0;padding:12px 18px;border-top:1px solid var(--line);color:var(--muted);font-size:.74rem;line-height:1.55}

/* ---------- phones ---------- */
@media(max-width:640px){
  .reader-stand{box-shadow:8px 8px 0 var(--purple)}
  .reader-stand-head .btn{width:100%;text-align:center}
  .reader-page{max-height:74vh;padding:22px 18px}
  .reader-stand-nav{padding:12px}
  .reader-stand-nav .btn{padding:0 10px;font-size:.62rem;min-height:48px}
  .reader-pos{font-size:.6rem}
  .reader-stand-soon{grid-template-columns:96px 1fr;gap:14px}
}
@media(prefers-reduced-motion:reduce){
  .reader-page{scroll-behavior:auto}
}