/* Chapter pages (free guides and premium chapters).
   Premium chapter body HTML is delivered by the get-chapter-content edge
   function, so the chapter-* class names below are a contract with that
   content: restyle them freely, rename them never. */

.chapter-wrap {
  --chapter-w: 1040px;
  width: min(var(--chapter-w), calc(100% - 2 * var(--gutter)));
  margin-inline: auto;
  padding-top: var(--page-top);
  padding-bottom: var(--page-bottom);
}

/* Premium chapters stay hidden until chapter-access.js has verified access. */
body.premium-chapter main { visibility: hidden; }
body.premium-chapter.chapter-access-ready main { visibility: visible; }

.chapter-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-bottom: var(--s-5); font-size: var(--fs-sm); color: var(--muted); }
.chapter-crumb a { color: var(--muted); font-weight: 500; }
.chapter-crumb a:hover { color: var(--brand); }
.chapter-crumb i { font-size: .7em; color: var(--line-strong); }

.chapter-hero {
  padding: var(--s-10);
  border-radius: var(--r-xl);
  background: linear-gradient(145deg, var(--ink), var(--ink-soft));
  color: #e2e8f0;
}
.chapter-hero h1 { margin: var(--s-3) 0; color: #fff; }
.chapter-hero p { max-width: 48rem; font-size: var(--fs-lead); line-height: 1.7; }
.chapter-hero .chapter-eyebrow { color: #93c5fd; }
.chapter-meta { margin-top: var(--s-4); font-size: var(--fs-sm); color: #cbd5e1; }
.chapter-eyebrow { display: block; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); }
.chapter-badges { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-5); }
.chapter-badge { padding: 4px 10px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .14); color: #fff; font-size: var(--fs-xs); font-weight: 600; }

.chapter-section { margin-top: var(--section-gap); }
.chapter-section-head { margin-bottom: var(--s-5); max-width: 46rem; }
.chapter-section-label { display: block; margin-bottom: var(--s-2); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); }
.chapter-section h2 { font-size: var(--fs-h2); }
.chapter-section-head > h1 { font-size: var(--fs-h2); letter-spacing: -.02em; }
.chapter-section-head p { margin-top: var(--s-2); color: var(--text); }

.chapter-grid, .hub-path-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gap); }
.hub-path-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.chapter-card {
  padding: var(--card-pad);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}
.chapter-card h3 { margin-bottom: var(--s-2); font-size: var(--fs-h3); }
.chapter-card p, .chapter-card li { color: var(--text); line-height: 1.7; }
.chapter-card ul { margin-top: var(--s-3); padding-left: var(--s-5); }
.chapter-card li + li { margin-top: var(--s-2); }
.hub-number { display: inline-grid; place-items: center; width: 36px; height: 36px; margin-bottom: var(--s-3); border-radius: var(--r-sm); background: var(--brand-soft); color: var(--brand); font-size: var(--fs-sm); font-weight: 700; }
.chapter-inline-link { display: inline-block; margin-top: var(--s-3); font-size: var(--fs-ui); font-weight: 600; }
.chapter-inline-link:hover { text-decoration: underline; text-underline-offset: 3px; }

.chapter-flow { padding: var(--s-5); border: 1px solid var(--brand-border); border-radius: var(--r-lg); background: var(--brand-soft); color: var(--ink-soft); font-weight: 600; text-align: center; }
.chapter-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.chapter-table { width: 100%; min-width: 560px; border-collapse: collapse; }
.chapter-table th, .chapter-table td { padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); text-align: left; font-size: var(--fs-ui); line-height: 1.55; vertical-align: top; }
.chapter-table th { background: var(--bg); color: var(--ink); font-weight: 600; }
.chapter-table tr:last-child td { border-bottom: 0; }
.chapter-callout { margin-top: var(--section-gap); padding: var(--s-5) var(--s-6); border-left: 4px solid var(--brand); border-radius: 0 var(--r-md) var(--r-md) 0; background: var(--brand-soft); color: var(--text); line-height: 1.7; }
.chapter-section .chapter-callout { margin-top: 0; }
.chapter-questions { display: grid; gap: var(--s-3); }
.chapter-question { padding: var(--s-4) var(--s-5); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.chapter-question strong { display: block; line-height: 1.55; }
.chapter-question span { display: block; margin-top: var(--s-1); font-size: var(--fs-sm); color: var(--muted); }

.chapter-premium { padding: var(--s-8); border-radius: var(--r-xl); background: linear-gradient(145deg, var(--ink), var(--ink-soft)); color: #e2e8f0; }
.chapter-premium h2 { margin-bottom: var(--s-2); color: #fff; }
.chapter-premium p { color: #cbd5e1; line-height: 1.7; }
.chapter-products { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3); margin-top: var(--s-5); }
.chapter-product { padding: var(--s-4); border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--r-md); background: rgba(255, 255, 255, .06); }
.chapter-product strong { display: block; color: #fff; }
.chapter-product span { display: block; margin-top: var(--s-1); font-size: var(--fs-sm); color: #cbd5e1; line-height: 1.5; }
.chapter-premium-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }
.chapter-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: 44px; padding: 0 var(--s-5); border: 1px solid transparent; border-radius: var(--r-md); font-size: var(--fs-ui); font-weight: 600; }
.chapter-btn.primary { background: #fff; color: var(--brand-hover); }
.chapter-btn.primary:hover { background: var(--brand-soft); }
.chapter-btn.secondary { background: transparent; border-color: rgba(255, 255, 255, .45); color: #fff; }
.chapter-btn.secondary:hover { background: rgba(255, 255, 255, .1); }

/* Progress control appended by js/premium-content.js */
.chapter-progress { margin-top: var(--section-gap); gap: 0; }
.chapter-progress > * + * { margin-top: var(--s-4); }
.chapter-progress__top, .chapter-progress__actions { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.chapter-progress__status { color: var(--muted); font-size: var(--fs-ui); }
.chapter-progress__button.is-complete { background: var(--success); }
.chapter-progress__button[disabled] { opacity: .65; cursor: wait; }
.chapter-progress__error { color: var(--danger); font-size: var(--fs-sm); }

/* Access gate rendered by js/chapter-access.js */
.chapter-access-gate { max-width: 46rem; margin: var(--s-10) auto 0; align-items: center; padding: var(--s-10) var(--s-8); text-align: center; box-shadow: var(--shadow-md); }
.chapter-access-gate > * + * { margin-top: var(--s-4); }
.chapter-access-gate .icon-tile { width: 56px; height: 56px; font-size: 1.375rem; }
.chapter-access-gate p { max-width: 36rem; }
.chapter-access-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); }

@media (max-width: 900px) {
  .chapter-products { grid-template-columns: repeat(2, 1fr); }
  .hub-path-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .chapter-grid { grid-template-columns: 1fr; }
  .chapter-hero, .chapter-premium { padding: var(--s-6) var(--s-5); }
  .chapter-progress__top, .chapter-progress__actions { flex-direction: column; align-items: stretch; }
  .chapter-access-gate { padding: var(--s-8) var(--s-5); }
  .chapter-access-actions .btn { width: 100%; }
}
@media (max-width: 460px) {
  .chapter-products { grid-template-columns: 1fr; }
}