/* ============================================================
   COMPAI PLAYBOOK — v3 (inherits tokens from ../style-v3.css)
   ============================================================ */

/* progress bar */
#progress-bar,.reading-progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--accent);box-shadow:0 0 12px var(--accent);z-index:200;transition:width .1s}

/* ---------- LANDING ---------- */
.landing{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad-x)}
.landing .hero{padding:clamp(4rem,8vw,7rem) 0 clamp(3rem,5vw,4.5rem);border-top:none;text-align:left}
.hero-eyebrow{font-family:var(--f-mono);font-size:.72rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--text-3);display:inline-flex;align-items:center;gap:.6rem;margin-bottom:1.8rem}
.hero-eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent)}
.landing h1.h-display{font-family:var(--f-display);font-weight:600;letter-spacing:-.03em;line-height:1.0;font-size:clamp(2.4rem,5.4vw,4.4rem);margin-bottom:1.5rem;max-width:18ch}
.hero-subtitle{font-size:clamp(1.05rem,1.6vw,1.25rem);line-height:1.55;color:var(--text-2);max-width:60ch;margin-bottom:2.2rem}
.landing .hero-cta{display:flex;gap:.8rem;flex-wrap:wrap;margin-bottom:3rem}
.hero-stats{display:flex;flex-wrap:wrap;gap:2.5rem 3.5rem;padding-top:2rem;border-top:1px solid var(--line)}
.hero-stat-value{font-family:var(--f-display);font-weight:600;font-size:2rem;letter-spacing:-.02em;line-height:1}
.hero-stat-label{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);margin-top:.5rem}

/* landing TOC */
.landing-toc,.landing>h2{max-width:var(--maxw)}
.landing h2{font-family:var(--f-display);font-weight:600;letter-spacing:-.02em;font-size:clamp(1.6rem,3vw,2.4rem);text-align:center;margin:clamp(3rem,6vw,5rem) 0 3rem}
.landing-section{margin-bottom:3rem}
.landing-section>.label,.landing-section-title{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);margin-bottom:.5rem}
.landing-section .landing-section-desc{color:var(--text-2);margin-bottom:1.25rem;font-size:.95rem}
.landing-chapters{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.landing-chapter{display:flex;align-items:center;gap:1.2rem;padding:1rem 1.3rem;border-bottom:1px solid var(--line);text-decoration:none;color:var(--text);transition:background .15s}
.landing-chapter:last-child{border-bottom:none}
.landing-chapter:hover{background:var(--bg-1)}
.landing-chapter-num{font-family:var(--f-mono);font-size:.74rem;color:var(--accent);min-width:2.4rem}
.landing-chapter-title{font-family:var(--f-display);font-weight:500;font-size:1.05rem;flex:1}
.landing-chapter-time{font-family:var(--f-mono);font-size:.72rem;color:var(--text-3)}

/* ---------- CHAPTER READING ---------- */
.chapter-grid{display:grid;grid-template-columns:220px minmax(0,720px) 240px;gap:3rem;max-width:1260px;margin:0 auto;padding:clamp(3rem,6vw,5rem) var(--pad-x) 6rem;justify-content:center}
.chapter-body{min-width:0}
.chapter-header{margin-bottom:3rem;padding-bottom:2rem;border-bottom:1px solid var(--line)}
.chapter-header .eyebrow{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);margin-bottom:1rem;display:block}
.chapter-title{font-family:var(--f-display);font-weight:600;font-size:clamp(2rem,4vw,3.1rem);line-height:1.03;letter-spacing:-.025em;margin:0 0 1.1rem}
.chapter-meta{font-family:var(--f-mono);font-size:.74rem;color:var(--text-3);display:flex;gap:.6rem;align-items:center}

/* prose */
.chapter-content{font-family:var(--f-sans);font-size:1.075rem;line-height:1.75;color:var(--text-2)}
.chapter-content>p:first-of-type::first-letter{font-family:var(--f-display);font-weight:600;font-size:3.6rem;line-height:.8;float:left;padding:.4rem .5rem 0 0;color:var(--accent)}
.chapter-content h2{font-family:var(--f-display);font-weight:600;font-size:1.7rem;letter-spacing:-.02em;line-height:1.15;color:var(--text);margin:3.2rem 0 1.1rem;scroll-margin-top:6rem}
.chapter-content h3{font-family:var(--f-display);font-weight:600;font-size:1.3rem;color:var(--text);margin:2.2rem 0 .9rem;scroll-margin-top:6rem}
.chapter-content p{margin:1.3rem 0}
.chapter-content ul,.chapter-content ol{margin:1.3rem 0;padding-left:1.4rem}
.chapter-content li{margin:.45rem 0}
.chapter-content li::marker{color:var(--text-3)}
.chapter-content a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;text-decoration-color:rgba(233,178,107,0.4)}
.chapter-content strong{color:var(--text);font-weight:600}
.chapter-content em{color:var(--accent);font-style:normal}
.chapter-content blockquote{border-left:2px solid var(--accent);padding:.3rem 0 .3rem 1.4rem;margin:1.8rem 0;color:var(--text);font-size:1.2rem;line-height:1.5}
.chapter-content code{font-family:var(--f-mono);font-size:.86em;background:var(--bg-2);border:1px solid var(--line);padding:.1rem .4rem;border-radius:6px;color:var(--text)}
.chapter-content pre{background:var(--bg-1);border:1px solid var(--line);border-radius:var(--radius-sm);padding:1.2rem 1.4rem;overflow-x:auto;margin:1.8rem 0;font-size:.86rem;line-height:1.6}
.chapter-content pre code{background:none;border:none;padding:0}
.chapter-content table{width:100%;border-collapse:collapse;margin:1.8rem 0;font-size:.92rem}
.chapter-content th,.chapter-content td{border:1px solid var(--line);padding:.6rem .8rem;text-align:left;vertical-align:top}
.chapter-content th{background:var(--bg-1);font-weight:600;color:var(--text);font-family:var(--f-mono);font-size:.78rem;letter-spacing:.03em}
.chapter-content hr{border:none;border-top:1px solid var(--line);margin:2.6rem 0}

/* left rail */
.chapter-toc-sidebar,.chapter-rail{font-family:var(--f-sans);position:sticky;top:6rem;align-self:start;min-width:0}
.chapter-rail-link{display:block;padding:.85rem 0;text-decoration:none;border-top:1px solid var(--line);color:var(--text-2);transition:color .15s}
.chapter-rail-link:hover{color:var(--text)}
.chapter-rail-link span{display:block;font-family:var(--f-mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);margin-bottom:.3rem}
.chapter-rail-link strong{display:block;font-family:var(--f-display);font-weight:500;font-size:1rem;line-height:1.2}
.chapter-rail-current{padding:.85rem 0;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);border-top:1px solid var(--line)}

/* right TOC scroll-spy */
.chapter-toc{font-family:var(--f-sans);position:sticky;top:6rem;align-self:start;min-width:0;max-height:calc(100vh - 8rem);overflow-y:auto}
.chapter-toc-title,.chapter-toc>.label{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);margin-bottom:1rem}
.chapter-toc ul{list-style:none;margin:0;padding:0;border-left:1px solid var(--line)}
.chapter-toc a{display:block;padding:.4rem 0 .4rem 1rem;margin-left:-1px;border-left:2px solid transparent;color:var(--text-3);text-decoration:none;font-size:.82rem;line-height:1.4;transition:color .15s,border-color .15s}
.chapter-toc a:hover{color:var(--text-2)}
.chapter-toc a.active{color:var(--text);border-left-color:var(--accent)}
.chapter-toc-h3 a{padding-left:1.7rem;font-size:.78rem}

/* footer of chapter */
.chapter-footer{margin-top:4.5rem;padding-top:2.2rem;border-top:1px solid var(--line)}
.chapter-actions{display:flex;gap:.7rem;flex-wrap:wrap;margin-bottom:2.2rem}
.chapter-nav{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.chapter-nav-item{padding:1.2rem 1.4rem;border:1px solid var(--line);border-radius:var(--radius-sm);text-decoration:none;color:var(--text);transition:border-color .2s,background .2s}
.chapter-nav-item:hover{border-color:var(--line-2);background:var(--bg-1)}
.chapter-nav-item .label{font-family:var(--f-mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);margin-bottom:.4rem;display:block}
.chapter-nav-item .title{font-family:var(--f-display);font-weight:500;font-size:1.05rem}
.chapter-nav-item.next{text-align:right}

@media (max-width:1100px){.chapter-grid{grid-template-columns:minmax(0,720px) 220px;gap:2.5rem}.chapter-toc-sidebar,.chapter-rail{display:none}}
@media (max-width:1024px){.chapter-grid{grid-template-columns:1fr;max-width:760px}.chapter-toc{display:none}}
@media (max-width:560px){.hero-stats{gap:1.6rem 2.2rem}}

/* mobile chapter select: hidden on desktop */
.chapter-page-mobile-toc{display:none}
@media (max-width:1024px){.chapter-page-mobile-toc{display:block;margin:1rem var(--pad-x)}.chapter-page-mobile-toc select{width:100%;background:var(--bg-1);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:.6rem .8rem;font-family:var(--f-sans)}}