/* ============================================================
   BOOK — FreeReads reading experience (typography-first)
   Progress bar · reader header · depth toggle · key ideas ·
   summary prose · now-playing bar · actions · keep going.
   ============================================================ */

.reader{padding-top:118px;padding-bottom:80px;background:var(--paper)}

/* ---------- reading progress bar ---------- */
.progress{
  position:fixed;top:0;left:0;height:4px;width:0%;
  background:var(--accent);z-index:100;
  transition:width .1s linear;
}

/* ---------- reader header ---------- */
.reader__header{display:grid;grid-template-columns:220px 1fr;gap:44px;align-items:center}
.reader__cover-wrap{max-width:220px;margin:0 auto}
.reader__cover-wrap .cover{width:100%}
.reader__cat{margin-bottom:14px}
.badge{
  display:inline-block;padding:5px 13px;border-radius:999px;
  font-size:12.5px;font-weight:700;letter-spacing:.04em;
}
.badge--category{background:var(--ink);color:#fff}
.badge--time{
  background:transparent;border:1.5px solid rgba(25,25,33,.25);
  color:rgba(25,25,33,.65);display:inline-flex;align-items:center;gap:6px;
}
.badge--time svg{width:13px;height:13px}
.reader__title{margin-bottom:10px}
.reader__by{font-size:17px;color:rgba(25,25,33,.65);margin-bottom:8px}
.reader__by strong{color:var(--ink);font-weight:600}
.reader__note{font-size:14px;color:rgba(25,25,33,.5);font-style:italic;margin-bottom:18px}

/* depth toggle */
.depth-toggle{
  display:inline-flex;background:var(--paper-2);
  border-radius:12px;padding:4px;gap:2px;
}
.depth-toggle__btn{
  padding:9px 22px;border-radius:9px;
  font-size:14.5px;font-weight:600;color:rgba(25,25,33,.6);
  transition:background .25s, color .25s, box-shadow .25s;
}
.depth-toggle__btn:hover{color:var(--ink)}
.depth-toggle__btn.is-active{background:var(--ink);color:#fff;box-shadow:0 2px 8px rgba(25,25,33,.18)}

/* ---------- action buttons ---------- */
.reader__actions{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
.action-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 18px;border-radius:10px;
  border:1.5px solid var(--line);background:#fff;
  font-size:14.5px;font-weight:600;color:rgba(25,25,33,.75);
  transition:background .25s, color .25s, border-color .25s, transform .25s;
}
.action-btn:hover{border-color:var(--ink);transform:translateY(-2px)}
.action-btn svg{width:16px;height:16px}
.action-btn.is-saved{background:var(--accent);border-color:var(--accent);color:#fff}
.action-btn.is-saved .action-btn__label-save{display:none}
.action-btn:not(.is-saved) .action-btn__label-unsave{display:none}

/* copy feedback toast */
.copy-toast{
  position:fixed;bottom:26px;left:50%;transform:translate(-50%, 20px);
  background:var(--ink);color:#fff;
  padding:11px 22px;border-radius:999px;
  font-size:14px;font-weight:600;
  opacity:0;pointer-events:none;
  transition:opacity .3s, transform .3s;
  z-index:110;
}
.copy-toast.is-visible{opacity:1;transform:translate(-50%, 0)}

/* ---------- now playing bar ---------- */
.np-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:105;
  background:var(--ink);color:#fff;
  padding:12px 4%;
  transform:translateY(110%);
  transition:transform .35s cubic-bezier(.22,.61,.36,1);
  box-shadow:0 -8px 30px rgba(25,25,33,.25);
}
.np-bar.is-visible{transform:translateY(0)}
.np-bar__inner{
  max-width:var(--w);margin:0 auto;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
}
.np-bar__label{
  display:flex;align-items:center;gap:10px;flex:1;min-width:200px;
  font-size:14px;font-weight:600;min-width:0;
}
.np-bar__eq{display:flex;gap:2.5px;align-items:flex-end;height:16px;flex:none}
.np-bar__eq span{width:3px;border-radius:2px;background:var(--accent);height:30%;animation:eq 1s ease-in-out infinite}
.np-bar__eq span:nth-child(2){animation-delay:.2s;height:80%}
.np-bar__eq span:nth-child(3){animation-delay:.4s;height:50%}
@keyframes eq{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}
.np-bar__title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.np-bar__title small{display:block;font-weight:400;color:rgba(255,255,255,.55);font-size:11.5px}
.np-bar__controls{display:flex;gap:8px}
.np-btn{
  width:40px;height:40px;border-radius:50%;
  border:1px solid rgba(255,255,255,.3);
  display:flex;align-items:center;justify-content:center;color:#fff;
  transition:background .25s, border-color .25s;
}
.np-btn:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.6)}
.np-btn svg{width:15px;height:15px;fill:currentColor}
.np-btn--main{width:46px;height:46px;background:var(--accent);border-color:var(--accent)}
.np-btn--main:hover{background:var(--accent-2);border-color:var(--accent-2)}
.np-btn[hidden]{display:none}

/* ---------- article body ---------- */
.reader__body{max-width:720px;margin:64px auto 0}
.reader__ad{max-width:720px;margin:56px auto 0}
.key-ideas{
  background:#fff;border:1px solid var(--line);border-radius:18px;
  padding:36px 40px;margin-bottom:56px;
}
.key-ideas__title{
  font-family:var(--font-display);font-size:24px;font-weight:600;
  margin-bottom:22px;
}
.key-ideas ol{counter-reset:ki;display:flex;flex-direction:column;gap:16px}
.key-ideas li{
  counter-increment:ki;position:relative;
  padding-left:52px;font-size:16.5px;line-height:1.55;
  color:rgba(25,25,33,.85);
}
.key-ideas li::before{
  content:counter(ki);
  position:absolute;left:0;top:1px;
  width:34px;height:34px;border-radius:50%;
  background:var(--accent-soft);color:var(--accent-2);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:15px;
}
.summary{font-size:17.5px;line-height:1.75;color:rgba(25,25,33,.88)}
.summary p{margin-bottom:1.35em}
.summary h2{
  font-family:var(--font-display);font-size:26px;font-weight:600;
  margin:1.8em 0 .7em;line-height:1.25;
}
.summary h2:first-child{margin-top:0}
.summary--soon{
  text-align:center;padding:46px 24px;
  background:#fff;border:1.5px dashed var(--line);border-radius:18px;
  color:rgba(25,25,33,.6);font-style:italic;font-size:16.5px;
}

/* ---------- keep going ---------- */
.keep-going{background:var(--paper-2);padding:80px 0}
.keep-going__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px}

/* ---------- coming-soon hint ---------- */
.coming-soon-note{
  display:none;align-items:center;gap:10px;
  margin-top:18px;font-size:14px;color:rgba(25,25,33,.55);
  font-style:italic;
}
.coming-soon-note.is-visible{display:flex}

/* ---------- responsive ---------- */
@media screen and (max-width:991px){
  .reader{padding-top:104px}
  .reader__header{grid-template-columns:1fr;gap:30px;text-align:center}
  .reader__cover-wrap{max-width:180px}
  .reader__actions{justify-content:center}
  .keep-going__grid{grid-template-columns:1fr 1fr}
  .key-ideas{padding:28px 24px}
}
@media screen and (max-width:560px){
  .reader{padding-top:100px;padding-bottom:56px}
  .keep-going{padding:60px 0}
  .keep-going__grid{grid-template-columns:1fr}
  .depth-toggle{display:flex}
  .depth-toggle__btn{flex:1;padding:9px 10px}
  .reader__body{margin-top:44px}
  .key-ideas{padding:24px 18px}
  .summary{font-size:16.5px}
  .summary h2{font-size:22px}
  .np-bar__label{min-width:140px}
}