/* Blog posts and quizzes inside the member area (app/read.html), and the small
   "you are logged in" bar on public blog and quiz pages. Script: js/in-app.js */

/* reader bar */
.reader{position:relative}
.reader-bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;min-height:56px;margin:-8px 0 8px;padding:8px 0;background:var(--paper);border-bottom:1px solid var(--hair)}
.reader-back{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px 0 12px;border:1px solid var(--hair);border-radius:999px;background:var(--card);box-shadow:var(--lift-sm);font-size:15px;font-weight:600;color:var(--ink)}
.reader-back:hover{color:var(--accent-deep)}
.reader-back svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.reader-where{font-size:12px;line-height:16px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted)}
.reader-actions{margin-left:auto;display:none}
.reader-actions .icon-btn{width:40px;height:40px}
.reader-actions .app-actions{gap:8px}

/* loading and error */
.reader-loading{display:flex;align-items:center;justify-content:center;gap:12px;min-height:240px;color:var(--muted);font-size:15px;font-weight:600}
.reader-spin{width:22px;height:22px;border-radius:50%;border:2.5px solid var(--hair);border-top-color:var(--accent);animation:reader-spin .8s linear infinite}
@keyframes reader-spin{to{transform:rotate(360deg)}}
.reader.is-loading .reader-content{display:none}
.reader-error{margin-top:24px;padding:28px;border:1px solid var(--hair);border-radius:20px;background:var(--card);box-shadow:var(--lift)}
.reader-error h1{font-size:clamp(34px,4vw,44px)}
.reader-error h1 i{color:var(--accent)}
.reader-error p{margin-top:8px;color:var(--muted)}
.reader-error-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.reader-noscript{margin-top:24px}
.reader-noscript a{color:var(--accent-deep);font-weight:600;text-decoration:underline}

/* public page content inside the app column */
.reader-content{min-width:0}
.reader-content .wrap{max-width:none;padding-inline:0}
.reader-content > section:first-of-type,.reader-content > article:first-of-type{padding-top:24px}
.reader-content .bi-top,.reader-content .bc-top{padding-top:24px}
.reader-content .quiz{padding-top:24px}
.reader-content h1:focus{outline:none}
.reader-content [id]{scroll-margin-top:80px}
@media (max-width:1180px){
  .reader-content .bi-doodles{display:none}
}
@media (max-width:980px){
  .reader-bar{margin:-18px -16px 8px;padding:8px 16px}
  .reader-actions{display:block}
}
@media (max-width:760px){
  /* chip rows that run to the screen edge: the app column has 16px sides, not 18px */
  .reader-content .bi-chips,.reader-content .quizzes-chips{margin-inline:-16px;padding-inline:16px}
}

/* public pages: bar for members who are logged in */
.member-bar{background:var(--ink);color:#fff;font-size:15px;line-height:20px}
.member-bar .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;min-height:48px;padding-top:10px;padding-bottom:10px}
.member-bar-dot{width:8px;height:8px;border-radius:50%;background:var(--coral);flex:none}
.member-bar a{color:var(--coral);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.member-bar a:hover{color:#fff}