/* ============================================================
   AppointmentChat Resource Hub — Reading surfaces (Phase 148)
   ------------------------------------------------------------
   Hand-authored, committed, served. NEVER compiled, NEVER
   generated, and NEVER a deploy.sh step.

   Loaded on GUIDE PAGES ONLY, after /hub.css and before each
   guide's frozen inline <style>, so the frozen .prose rules keep
   the last word.  index.html / 404.html never link this file.

   Contract: .planning/phases/148-.../148-UI-SPEC.md §4.3-§4.8, §7.2.
   Phase 147 froze the hub's chrome — this file ADDS surfaces and
   introduces NO new palette, font or spacing token. The only
   colours used are the inherited tokens (--t1, --t2, --font-display)
   and the hub's existing secondary accent (emerald-400 #34D399 for
   text/fills, emerald-500 #10B981 for structural borders).

   Selector guard (§7.2): no rule here takes a Phase-147 frozen
   selector as its subject, and the ONLY authorised descendant rule
   inside the prose body is `.prose a`.
   ============================================================ */

/* --- Track-grouped index (§4.3) -----------------------------
   The .lc-track* component rules are compiled into hub.css from
   src/hub.input.css (@layer components), because index.html links
   only hub.css. They are deliberately NOT duplicated here.     */

/* --- Two-column guide layout + sticky TOC (§4.6) ------------- */
.guide-layout {
  display: grid;
  gap: 48px 32px;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1024px) {
  .guide-layout { grid-template-columns: minmax(0, 1fr) 224px; }
}

/* Below 1024px the TOC is removed from the layout entirely —
   no toggle, no collapsible disclosure, no mobile variant. */
.guide-toc { display:none; }
@media (min-width: 1024px) {
  .guide-toc {
    display: block;
    position: sticky;
    top: 24px;
    align-self: start;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
  }
}

.guide-toc__label {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--t2, #94A3B8);
  margin: 0 0 16px;
}
.guide-toc__list { list-style: none; margin: 0; padding: 0; }
.guide-toc__list li { margin-bottom: 8px; }
.guide-toc__link {
  display: block;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--t2, #94A3B8);
  padding-left: 12px;
  border-left: 2px solid transparent;
  transition: color .15s, border-color .15s;
  text-decoration: none;
}
.guide-toc__link:hover { color: var(--t1, #F1F5F9); }
.guide-toc__link.is-active {
  color: #34D399;
  border-left-color: #34D399;
  font-weight: 600;
}
.guide-toc__link:focus-visible {
  outline: 2px solid #00ADEE;
  outline-offset: 2px;
}

/* Clear the 4px fixed progress bar when a TOC anchor jumps. */
h2[id] { scroll-margin-top: 24px; }

/* Smooth scrolling is opt-in only (never forced). */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* --- Key Takeaways callout (§4.5) --------------------------- */
.guide-takeaways {
  background: #111827;
  border: 1px solid #1F2937;
  border-top: 4px solid #34D399;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 32px;
}
@media (min-width: 640px) {
  .guide-takeaways { padding: 24px; }
}
.guide-takeaways__label {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #34D399;
  margin: 0 0 8px;
}
.guide-takeaways__list { list-style: none; padding-left: 0; margin: 0; }
.guide-takeaways__list li {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #E5E7EB;
  margin-bottom: 8px;
}
.guide-takeaways__list li::before {
  content: "\25B8"; /* ▸ decorative bullet marker */
  color: #34D399;
  margin-right: 8px;
}
.guide-takeaways__list li strong { color: #FFFFFF; font-weight: 600; }

/* --- Fixed reading-progress bar (§4.7) ----------------------
   The track is TRANSPARENT by design: the nav on guide pages is
   in-flow at y=0, so a painted track would overlay its top 4px at
   scroll 0. A transparent track + zero-width fill paints nothing
   until the visitor scrolls the nav away.                      */
#guide-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: transparent;
  z-index: 60;
  pointer-events: none;
}
#guide-progress-fill {
  height: 100%;
  background: #34D399;
  transform-origin: left center;
  transform: scaleX(0);
  will-change: transform;
}

/* --- Sequence navigation (§4.8) ----------------------------- */
.guide-seqnav {
  background: #111827;
  border: 1px solid #1F2937;
  border-radius: 12px;
  padding: 24px;
  margin-top: 48px;
}
.guide-seqnav__link {
  display: block;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 8px;
  transition: border-color .15s;
}
.guide-seqnav__link:hover { border-color: #10B981; }
.guide-seqnav__link:focus-visible {
  outline: 2px solid #00ADEE;
  outline-offset: 2px;
}
.guide-seqnav__eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #34D399;
  margin-bottom: 8px;
}
.guide-seqnav__title {
  display: block;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--t1, #F1F5F9);
}
.guide-seqnav__link:hover .guide-seqnav__title { color: #34D399; }

/* --- The one authorised descendant rule inside the prose body
   (§7.2): guide bodies were EMPTY at the 147 capture, so no
   captured pixel can regress. Nothing else inside .prose is
   restyled — the frozen inline block owns h2/h3/p/ul/li.       */
.prose a { color: #34D399; text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: #6EE7B7; }