/* Reality Fracture — full summary page
   Page-specific rules only. Colors, fonts and shared components
   (.chapter-title, .tag-row/.tag-pill, .vol-card/.char-card, .sources,
   .breadcrumb, .back-to-toc, .reader-footer, .archive-*) come from ../style.css
   so this page matches the rest of the Codex instead of running its own theme. */

.rf-section{padding:40px 0 0;}
.rf-section + .rf-section{border-top:1px solid var(--rule);margin-top:40px;}

.rf-intro{font-family:"Noto Serif Thai",serif;font-size:17.5px;line-height:1.9;color:var(--ink);margin:0 0 8px;}
.rf-intro em{color:var(--accent);font-style:normal;font-weight:600;}

/* ---------- faction filter ---------- */

.faction-toggle{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 22px;}
.faction-btn{
  font-family:"Noto Sans Thai",sans-serif;font-size:13px;color:var(--ink-muted);
  background:var(--panel);border:1px solid var(--rule);border-radius:999px;
  padding:7px 15px;cursor:pointer;transition:color .15s,border-color .15s,background .15s;
}
.faction-btn:hover{color:var(--ink);border-color:var(--rule-strong);}
.faction-btn.is-active{color:var(--accent-ink);background:var(--accent);border-color:var(--accent);font-weight:600;}

/* ---------- character cards (reuse .vol-card / .char-card) ---------- */

.rf-char-card{position:relative;}
.rf-char-card .vol-card-top{align-items:center;}
.rf-char-icon{
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  width:26px;height:26px;border-radius:50%;background:var(--accent-soft);
}
.char-icon-svg{width:14px;height:14px;fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.rf-char-card.faction-echoverse .rf-char-icon{background:var(--panel-2);}
.rf-char-card.faction-echoverse .char-icon-svg{stroke:var(--ink-muted);}
.rf-char-role{margin:2px 0 8px;font-size:12px;color:var(--ink-muted);}
.rf-char-link{display:block;margin-top:10px;padding-top:10px;border-top:1px solid var(--rule);font-size:12px;color:var(--ink-faint);}
.rf-char-card:hover .rf-char-link{color:var(--accent);}

/* ---------- timeline accordion ---------- */

.ep-list{list-style:none;margin:18px 0 0;padding:0;position:relative;}
.ep-list::before{content:"";position:absolute;top:6px;bottom:6px;left:19px;width:1px;background:var(--rule);}

.ep-item{position:relative;padding-left:52px;margin-bottom:4px;}

.ep-marker{
  position:absolute;left:0;top:14px;width:40px;height:40px;border-radius:50%;
  background:var(--panel);border:1px solid var(--rule);
  display:flex;align-items:center;justify-content:center;
  font-family:"Fraunces",serif;font-size:14px;color:var(--ink-muted);
}
.ep-item.is-open .ep-marker{color:var(--accent-ink);background:var(--accent);border-color:var(--accent);}
.ep-item.is-final .ep-marker{color:var(--accent);background:var(--accent-soft);border-color:var(--accent);}

.ep-toggle{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:transparent;border:none;border-bottom:1px solid var(--rule);
  padding:14px 0;cursor:pointer;text-align:left;font-family:inherit;color:var(--ink);
}
.ep-item:last-child .ep-toggle{border-bottom:none;}

.ep-title-group{display:flex;flex-direction:column;}
.ep-eyebrow{font-size:12px;color:var(--ink-muted);margin-bottom:2px;}
.ep-title{font-family:"Noto Serif Thai",serif;font-size:16px;font-weight:600;color:var(--ink);}

.ep-caret{
  flex-shrink:0;width:18px;height:18px;
  border-right:1.5px solid var(--ink-faint);border-bottom:1.5px solid var(--ink-faint);
  transform:rotate(45deg);transition:transform .2s ease,border-color .2s ease;
}
.ep-item.is-open .ep-caret{transform:rotate(-135deg);border-color:var(--accent);}

.ep-panel{overflow:hidden;max-height:0;transition:max-height .3s ease;}
.ep-item.is-open .ep-panel{max-height:3000px;}

.ep-body{padding:4px 0 22px;font-family:"Noto Serif Thai",serif;font-size:15.5px;line-height:1.85;color:var(--ink);}
.ep-body p{margin:0 0 12px;}
.ep-body p:last-child{margin-bottom:0;}
.ep-body strong{color:var(--accent);font-weight:600;}

/* ---------- closing quote ---------- */

.rf-theme{
  border-radius:var(--radius-l);padding:32px 28px;
  background:var(--accent-soft);border:1px solid var(--rule);
}
.rf-quote{
  font-family:"Fraunces",serif;font-style:italic;font-weight:600;
  font-size:28px;color:var(--accent);margin:0 0 14px;
}
.rf-quote-body{margin:0;font-family:"Noto Serif Thai",serif;font-size:15.5px;line-height:1.85;color:var(--ink);}
.rf-quote-body strong{color:var(--ink);font-weight:700;}