/* ==========================================================================
   XAI Today — member-area guide (guide.php)
   Course-reading layout: sticky header + progress, sticky TOC sidebar,
   modules, callouts, tables, checklists, prompt library, timeline, FAQ.

   DEPENDENCY: this file assumes the :root design tokens AND the shared
   atoms (.btn, .badge, .disclaimer, .divider, .visually-hidden,
   .cta-card family) from style.css are already loaded. guide.php MUST
   link style.css BEFORE guide.css:
     <link rel="stylesheet" href="assets/css/style.css">
     <link rel="stylesheet" href="assets/css/guide.css">
   Everything specific to the member-area LAYOUT and course COMPONENTS
   (header, TOC, modules, callouts, tables, checklists, prompts,
   timeline, FAQ, back-to-top) is fully defined in this file.
   ========================================================================== */

/* ==========================================================================
   Member header + read progress
   ========================================================================== */
.guide-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(250, 249, 246, 0.92);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--color-rule);
}
.guide-header-inner {
  width: 100%;
  max-width: var(--col-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}
.guide-logo {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-body);
  color: var(--color-ink);
  text-decoration: none;
}
.guide-logo .brand-mark { color: var(--color-maple); }
.guide-header-actions { display: flex; align-items: center; gap: var(--s-3); }
.guide-exit-link {
  font-size: var(--fs-small);
  color: var(--color-ink-muted);
  text-decoration: none;
}
.guide-exit-link:hover { color: var(--color-ink); }

.toc-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  background: var(--color-paper-3);
  border: 1px solid var(--color-rule);
  border-radius: var(--r-pill);
  padding: var(--s-2) var(--s-4);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--color-ink);
  cursor: pointer;
}

.read-progress {
  position: sticky;
  top: var(--header-h);
  z-index: var(--z-header);
  height: 3px;
  background: var(--color-rule-soft);
}
.read-progress-bar {
  height: 100%;
  width: 0%;
  background: var(--color-green);
  transition: width var(--dur) var(--ease);
}

/* ==========================================================================
   Guide hero
   ========================================================================== */
.guide-hero {
  max-width: var(--col);
  margin-inline: auto;
  padding: var(--s-7) var(--gutter) var(--s-6);
  text-align: center;
}
.guide-title { margin-bottom: var(--s-3); }
.guide-subtitle {
  font-size: var(--fs-lead);
  color: var(--color-ink-muted);
  max-width: 52ch;
  margin-inline: auto;
  margin-bottom: var(--s-4);
}
.guide-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-4);
  flex-wrap: wrap;
  font-size: var(--fs-small);
  color: var(--color-ink-muted);
}
.guide-meta-item { display: inline-flex; align-items: center; gap: var(--s-1); }

/* ==========================================================================
   Shell layout: sidebar (TOC) + content
   ========================================================================== */
.guide-shell {
  max-width: var(--col-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.guide-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
  padding-bottom: var(--s-8);
}

/* ==========================================================================
   TOC (mobile: off-canvas drawer / desktop: sticky sidebar)
   ========================================================================== */
.guide-sidebar { order: 2; }
.toc {
  position: fixed;
  inset: 0;
  z-index: var(--z-consent);
  background: var(--color-paper-2);
  padding: var(--s-6) var(--gutter);
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform var(--dur) var(--ease);
}
.toc.is-open { transform: translateX(0); }
.toc-overlay {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-consent) - 1);
  background: rgba(26, 26, 26, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease);
}
.toc-overlay.is-open { opacity: 1; pointer-events: auto; }

.toc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--s-5);
}
.toc-title {
  font-size: var(--fs-kicker);
  font-weight: 700;
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  color: var(--color-ink-muted);
}
.toc-close {
  background: none;
  border: none;
  color: var(--color-ink-muted);
  cursor: pointer;
  padding: var(--s-1);
}
.toc-list { list-style: none; margin: 0; padding: 0; }
.toc-module {
  font-size: var(--fs-kicker);
  font-weight: 700;
  color: var(--color-ink-faint);
  text-transform: uppercase;
  letter-spacing: var(--track-kicker);
  margin-top: var(--s-5);
  margin-bottom: var(--s-2);
}
.toc-module:first-child { margin-top: 0; }
.toc-item { margin: 0; }
.toc-item + .toc-item { margin-top: 0; }
.toc-link {
  display: block;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm);
  border-left: 2px solid transparent;
  font-size: var(--fs-small);
  color: var(--color-ink-soft);
  text-decoration: none;
}
.toc-link:hover { background: var(--color-paper-3); color: var(--color-ink); }
.toc-link.is-active {
  color: var(--color-green-dark);
  border-left-color: var(--color-green);
  background: var(--color-green-soft);
  font-weight: 600;
}

/* ==========================================================================
   Guide content column
   ========================================================================== */
.guide-content { order: 1; min-width: 0; }

/* ==========================================================================
   Module structure
   ========================================================================== */
.module {
  padding-block: var(--s-7);
  border-bottom: 1px solid var(--color-rule);
  scroll-margin-top: calc(var(--header-h) + var(--s-4));
}
.module:last-child { border-bottom: none; }
.module-header {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  margin-bottom: var(--s-4);
}
.module-number {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--color-ink);
  color: var(--color-paper);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h3);
}
.module-title { margin-bottom: var(--s-1); }
.module-kicker {
  display: block;
  font-size: var(--fs-kicker);
  font-weight: 700;
  color: var(--color-green-dark);
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  margin-bottom: var(--s-1);
}
.module-intro {
  font-size: var(--fs-lead);
  color: var(--color-ink-muted);
  margin-bottom: var(--s-5);
}
.module-body { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-ink-soft); }
.module-body h3 { margin-block: var(--s-6) var(--s-3); }
.module-body p { margin-bottom: var(--s-4); }
.module-section { margin-bottom: var(--s-6); }

/* ==========================================================================
   Callouts (tip / warning / note / pro / disclaimer)
   ========================================================================== */
.callout {
  display: flex;
  gap: var(--s-3);
  border: 1px solid var(--color-rule);
  border-left: 3px solid var(--color-ink-faint);
  border-radius: var(--r-md);
  background: var(--color-paper-2);
  padding: var(--s-4) var(--s-5);
  margin: var(--s-5) 0;
}
.callout-icon { flex-shrink: 0; font-size: 1.25em; line-height: 1.4; }
.callout-body { flex: 1; min-width: 0; }
.callout-title { font-weight: 700; color: var(--color-ink); margin-bottom: var(--s-1); }
.callout p:last-child { margin-bottom: 0; }

.callout--tip { border-left-color: var(--color-green); background: var(--color-green-soft); }
.callout--tip .callout-title { color: var(--color-green-dark); }
.callout--warning { border-left-color: var(--color-maple); background: var(--color-maple-soft); }
.callout--warning .callout-title { color: var(--color-maple); }
.callout--note { border-left-color: var(--color-ink-muted); background: var(--color-paper-3); }
.callout--pro { border-left-color: var(--color-ink); background: var(--color-shade); }
.callout--disclaimer {
  border-left-color: var(--color-ink-faint);
  background: var(--color-paper-3);
  font-size: var(--fs-small);
  color: var(--color-ink-faint);
}

/* ==========================================================================
   Comparison tables
   ========================================================================== */
.table-wrap {
  overflow-x: auto;
  margin: var(--s-5) 0;
  border: 1px solid var(--color-rule);
  border-radius: var(--r-md);
  -webkit-overflow-scrolling: touch;
}
.comparison-table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: var(--fs-small);
}
.comparison-table th, .comparison-table td {
  padding: var(--s-3) var(--s-4);
  text-align: left;
  border-bottom: 1px solid var(--color-rule);
  vertical-align: top;
}
.comparison-table thead th {
  background: var(--color-shade);
  font-size: var(--fs-kicker);
  font-weight: 700;
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  color: var(--color-ink-muted);
  white-space: nowrap;
}
.comparison-table tbody tr:last-child td { border-bottom: none; }
.comparison-table tbody tr:hover { background: var(--color-paper-3); }
.comparison-table td.is-best, .comparison-table th.is-best {
  background: var(--color-green-soft);
  color: var(--color-green-dark);
  font-weight: 600;
}

/* ==========================================================================
   Checklists
   ========================================================================== */
.checklist { list-style: none; margin: var(--s-5) 0; padding: 0; }
.checklist-item {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding-block: var(--s-2);
  margin: 0;
}
.checklist-item + .checklist-item { margin-top: 0; border-top: 1px solid var(--color-rule-soft); }
.check-mark {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--color-green-soft);
  color: var(--color-green-dark);
  font-size: 0.75rem;
  font-weight: 700;
}

/* ==========================================================================
   Prompt library
   ========================================================================== */
.prompt-block {
  background: var(--color-ink);
  border-radius: var(--r-md);
  overflow: hidden;
  margin: var(--s-5) 0;
}
.prompt-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-4);
  background: rgba(255, 255, 255, 0.06);
}
.prompt-label {
  font-size: var(--fs-kicker);
  font-weight: 700;
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  color: #d8d5cd;
}
.copy-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--r-sm);
  color: #fff;
  font-size: var(--fs-kicker);
  padding: var(--s-1) var(--s-3);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease);
}
.copy-btn:hover { background: rgba(255, 255, 255, 0.12); }
.prompt-text {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  line-height: var(--lh-snug);
  color: #f1efe9;
  padding: var(--s-4);
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ==========================================================================
   Templates
   ========================================================================== */
.template-card {
  background: var(--color-paper-2);
  border: 1px solid var(--color-rule);
  border-radius: var(--r-md);
  padding: var(--s-5);
  margin: var(--s-5) 0;
  box-shadow: var(--shadow-card);
}
.template-title {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-h3);
  margin-bottom: var(--s-3);
}
.template-body { font-size: var(--fs-small); color: var(--color-ink-soft); }
.template-body p:last-child { margin-bottom: 0; }

/* ==========================================================================
   30 / 60 / 90-day timeline
   ========================================================================== */
.timeline { position: relative; margin: var(--s-6) 0; padding-left: var(--s-6); }
.timeline::before {
  content: '';
  position: absolute;
  left: 7px; top: 6px; bottom: 6px;
  width: 2px;
  background: var(--color-rule);
}
.timeline-item { position: relative; padding-bottom: var(--s-6); }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-marker {
  position: absolute;
  left: calc(-1 * var(--s-6));
  top: 4px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--color-green);
  border: 3px solid var(--color-paper);
  box-shadow: 0 0 0 1px var(--color-green-line);
}
.timeline-day {
  display: block;
  font-size: var(--fs-kicker);
  font-weight: 700;
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  color: var(--color-green-dark);
  margin-bottom: var(--s-1);
}
.timeline-content h4 {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--color-ink);
  margin-bottom: var(--s-1);
}
.timeline-content p { font-size: var(--fs-small); color: var(--color-ink-muted); margin-bottom: 0; }

/* ==========================================================================
   FAQ (native <details> accordion, appendix)
   ========================================================================== */
.faq-list { border-top: 1px solid var(--color-rule); margin: var(--s-5) 0; }
.faq-item { border-bottom: 1px solid var(--color-rule); padding-block: var(--s-4); }
.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  cursor: pointer;
  font-weight: 700;
  color: var(--color-ink);
  list-style: none;
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question::after {
  content: '+';
  flex-shrink: 0;
  font-size: 1.5em;
  line-height: 1;
  color: var(--color-green);
  transition: transform var(--dur) var(--ease);
}
.faq-item[open] .faq-question::after { transform: rotate(45deg); }
.faq-answer {
  font-size: var(--fs-small);
  color: var(--color-ink-muted);
  padding-top: var(--s-3);
  max-width: 60ch;
}

/* ==========================================================================
   Module prev/next navigation
   ========================================================================== */
.module-nav {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: var(--s-4);
  margin-top: var(--s-7);
}
.module-nav-link {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  background: var(--color-paper-2);
  border: 1px solid var(--color-rule);
  border-radius: var(--r-md);
  padding: var(--s-4);
  text-decoration: none;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.module-nav-link:hover { border-color: var(--color-green); box-shadow: var(--shadow-card); }
.module-nav-next { text-align: right; align-items: flex-end; }
.module-nav-label {
  font-size: var(--fs-kicker);
  font-weight: 700;
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  color: var(--color-ink-faint);
}
.module-nav-title { font-weight: 700; color: var(--color-ink); }

/* ==========================================================================
   Completion CTA (reuses .cta-card / .btn from style.css)
   ========================================================================== */
.guide-completion { padding-block: var(--s-8); }

/* ==========================================================================
   Back to top
   ========================================================================== */
.back-to-top {
  position: fixed;
  right: var(--s-4);
  bottom: var(--s-4);
  z-index: var(--z-sticky);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--color-ink);
  color: var(--color-paper);
  box-shadow: var(--shadow-pop);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.back-to-top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.back-to-top:hover { background: var(--color-green-dark); }

/* ==========================================================================
   Guide footer
   ========================================================================== */
.guide-footer {
  background: var(--color-paper-3);
  border-top: 2px solid var(--color-green);
  padding-block: var(--s-7) var(--s-8);
}

/* ==========================================================================
   Responsive — desktop: sidebar becomes a static sticky column
   ========================================================================== */
@media (min-width: 960px) {
  .toc-toggle { display: none; }
  .guide-layout {
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
    align-items: start;
  }
  .guide-sidebar { order: 1; }
  .guide-content { order: 2; }
  .toc {
    position: sticky;
    inset: auto;
    top: calc(var(--header-h) + var(--s-5));
    transform: none;
    z-index: 1;
    background: transparent;
    padding: 0;
    max-height: calc(100vh - var(--header-h) - var(--s-6));
    overflow-y: auto;
  }
  .toc-header { display: none; }
  .toc-overlay { display: none; }
}

@media (min-width: 640px) {
  .module-header { align-items: center; }
  .checklist { column-count: 2; column-gap: var(--s-6); }
  .checklist-item { break-inside: avoid; }
}