/* OnlyPedia — Knowledge Base (guides + hub). Token-based, correct in light & dark.
   Loaded on guide/hub pages by includes/knowledge/knowledge-base.php. */

/* the parent content wrapper is transparent → paint our own bg (dark-mode fix) */
.op-guide-page{ background: var(--op-bg); min-height: 60vh; padding: 10px 0 64px; }
.op-guide{ color: var(--op-text-primary); }
.op-guide-inner{ max-width: var(--op-content-max, 1200px); margin: 0 auto; padding: 0 20px; }
.op-guide a{ color: #03aff0; }

.op-guide-eyebrow{ display:inline-block; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:#03aff0; font-weight:700; margin:6px 0 4px; }
.op-guide-h1{ font-size:clamp(1.9rem,4.5vw,2.7rem); line-height:1.12; letter-spacing:-.02em; margin:4px 0 10px; color:var(--op-text-primary); }
.op-guide-meta{ font-size:.82rem; color:var(--op-text-muted); margin:0 0 22px; }
.op-guide-lead{ font-size:1.12rem; line-height:1.7; color:var(--op-text-secondary); max-width:74ch; margin:0 0 30px; padding:18px 22px; background:var(--op-bg-secondary); border:1px solid var(--op-border); border-left:3px solid #03aff0; border-radius:14px; }
.op-guide-lead strong{ color:var(--op-text-primary); }
.op-guide-lead-p{ font-size:1.08rem; line-height:1.7; color:var(--op-text-secondary); max-width:74ch; margin:0 0 30px; }

/* 2-col layout with floating TOC */
.op-guide-layout{ display:grid; grid-template-columns:minmax(0,1fr) 240px; gap:44px; align-items:start; }
.op-guide-body{ min-width:0; }
.op-guide-side{ position:sticky; top:88px; align-self:start; }
@media (max-width:1024px){ .op-guide-layout{ grid-template-columns:1fr; gap:0; } .op-guide-side{ display:none; } }

.op-guide-section{ margin:0 0 34px; scroll-margin-top:90px; }
.op-guide-section h2{ font-size:clamp(1.3rem,3vw,1.6rem); margin:0 0 12px; color:var(--op-text-primary); letter-spacing:-.01em; }
.op-guide-body p{ font-size:1.02rem; line-height:1.75; color:var(--op-text-secondary); margin:0 0 14px; max-width:74ch; }
.op-guide-body strong{ color:var(--op-text-primary); }
.op-guide-body ul{ margin:0 0 16px; padding:0 0 0 4px; list-style:none; max-width:74ch; }
.op-guide-body li{ position:relative; padding-left:24px; margin:0 0 10px; color:var(--op-text-secondary); line-height:1.6; }
.op-guide-body li::before{ content:''; position:absolute; left:2px; top:.55em; width:8px; height:8px; border-radius:50%; background:linear-gradient(135deg,#03aff0,#0362f0); }

/* TOC (self-contained; guide pages don't get the hub's inline CSS) */
.op-toc{ background:var(--op-bg-secondary); border:1px solid var(--op-border); border-radius:16px; padding:16px; }
.op-toc-h{ font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--op-text-muted); margin:0 0 10px; }
.op-toc a{ display:block; font-size:.86rem; color:var(--op-text-secondary); text-decoration:none; padding:5px 10px; border-radius:8px; border-left:2px solid transparent; }
.op-toc a:hover{ color:var(--op-text-primary); background:var(--op-bg-tertiary); }
.op-toc a.active{ color:#03aff0; border-left-color:#03aff0; font-weight:600; }

/* FAQ */
.op-guide-faq details{ border-bottom:1px solid var(--op-border); padding:15px 0; }
.op-guide-faq summary{ cursor:pointer; font-weight:600; color:var(--op-text-primary); list-style:none; }
.op-guide-faq summary::-webkit-details-marker{ display:none; }
.op-guide-faq summary::after{ content:'+'; float:right; color:#03aff0; font-weight:700; }
.op-guide-faq details[open] summary::after{ content:'\2013'; }
.op-guide-faq p{ margin:11px 0 0; color:var(--op-text-secondary); line-height:1.65; }

/* CTA */
.op-guide-cta{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; background:linear-gradient(135deg,rgba(3,175,240,.13),rgba(3,98,240,.05)); border:1px solid rgba(3,175,240,.28); border-radius:18px; padding:22px 26px; margin:30px 0; }
.op-guide-cta strong{ color:var(--op-text-primary); font-size:1.05rem; }
.op-guide-cta p{ margin:5px 0 0; color:var(--op-text-secondary); font-size:.92rem; }
.op-guide-cta-btns{ display:flex; gap:10px; flex-wrap:wrap; }
.op-guide-btn{ display:inline-block; text-decoration:none; border-radius:12px; padding:11px 20px; font-size:.9rem; font-weight:600; color:#fff !important; background:linear-gradient(135deg,#03aff0,#0362f0); }
.op-guide-btn--ghost{ color:#03aff0 !important; background:transparent; border:1px solid var(--op-border-strong); }

/* related */
.op-guide-related{ margin:34px 0 0; }
.op-guide-related h2{ font-size:1.2rem; margin:0 0 14px; color:var(--op-text-primary); }
.op-guide-relgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px; }
.op-guide-relcard{ display:flex; flex-direction:column; gap:6px; text-decoration:none; background:var(--op-bg-secondary); border:1px solid var(--op-border); border-radius:14px; padding:16px 18px; }
.op-guide-relcard:hover{ border-color:#03aff0; }
.op-guide-relc-eyebrow{ font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:#03aff0; font-weight:700; }
.op-guide-relc-title{ font-size:.98rem; color:var(--op-text-primary); font-weight:600; line-height:1.3; }

/* hub grid */
.op-guide-cluster{ margin:0 0 34px; }
.op-guide-cluster h2{ font-size:1.25rem; margin:0 0 14px; color:var(--op-text-primary); }
.op-guide-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; }
.op-guide-card{ display:flex; flex-direction:column; gap:8px; text-decoration:none; background:var(--op-bg-secondary); border:1px solid var(--op-border); border-radius:16px; padding:20px 22px; transition:.15s; }
.op-guide-card:hover{ border-color:#03aff0; transform:translateY(-2px); }
.op-guide-card-title{ font-size:1.08rem; font-weight:700; color:var(--op-text-primary); line-height:1.3; }
.op-guide-card-desc{ font-size:.9rem; color:var(--op-text-secondary); line-height:1.5; }
.op-guide-card-go{ font-size:.84rem; color:#03aff0; font-weight:600; margin-top:2px; }

/* Guide covers (assets/guides/<slug>.jpg, 1200×630) */
.op-guide-cover{ margin:0 0 26px; max-width:880px; }
.op-guide-cover img{ display:block; width:100%; height:auto; aspect-ratio:1200/630; border-radius:16px; border:1px solid var(--op-border); background:#0b0b12; }
.op-guide-card{ overflow:hidden; }
.op-guide-card-img{ display:block; width:calc(100% + 44px); max-width:none; height:auto; aspect-ratio:1200/630; margin:-20px -22px 6px; object-fit:cover; border-bottom:1px solid var(--op-border); background:#0b0b12; }

/* Rich article elements (batch 5): h3, numbered steps, tables, callouts, key facts, sources */
.op-guide-body h3{ font-size:1.12rem; margin:22px 0 8px; color:var(--op-text-primary); }
.op-guide-body ol{ margin:0 0 16px; padding:0; list-style:none; counter-reset:opstep; max-width:74ch; }
.op-guide-body ol > li{ counter-increment:opstep; padding-left:38px; min-height:26px; }
.op-guide-body ol > li::before{ content:counter(opstep); width:26px; height:26px; top:-1px; left:0; border-radius:50%; color:#fff; font-size:.8rem; font-weight:700; display:flex; align-items:center; justify-content:center; }
.op-guide-tablewrap{ overflow-x:auto; margin:4px 0 18px; max-width:100%; border:1px solid var(--op-border); border-radius:12px; }
.op-guide-body table{ width:100%; border-collapse:collapse; font-size:.93rem; min-width:460px; }
.op-guide-body th, .op-guide-body td{ text-align:left; padding:10px 14px; border-bottom:1px solid var(--op-border); color:var(--op-text-secondary); vertical-align:top; line-height:1.5; }
.op-guide-body th{ color:var(--op-text-primary); background:var(--op-bg-secondary); font-weight:700; font-size:.85rem; }
.op-guide-body tr:last-child td{ border-bottom:0; }
.op-guide-note{ margin:4px 0 18px; padding:14px 18px; border-radius:12px; background:var(--op-bg-secondary); border:1px solid var(--op-border); border-left:3px solid #f5a524; max-width:74ch; }
.op-guide-note p:last-child{ margin-bottom:0; }
.op-guide-facts{ margin:-10px 0 30px; max-width:74ch; border:1px solid var(--op-border); border-radius:14px; overflow:hidden; }
.op-guide-facts-h{ margin:0; padding:10px 18px; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:#03aff0; background:var(--op-bg-secondary); border-bottom:1px solid var(--op-border); }
.op-guide-facts dl{ margin:0; display:grid; grid-template-columns:minmax(120px,38%) 1fr; }
.op-guide-facts dt, .op-guide-facts dd{ margin:0; padding:10px 18px; border-bottom:1px solid var(--op-border); font-size:.93rem; line-height:1.5; }
.op-guide-facts dt{ color:var(--op-text-muted); }
.op-guide-facts dd{ color:var(--op-text-primary); font-weight:600; }
.op-guide-facts dt:nth-last-of-type(1), .op-guide-facts dd:last-child{ border-bottom:0; }
@media (max-width:560px){ .op-guide-facts dl{ grid-template-columns:1fr; } .op-guide-facts dt{ border-bottom:0; padding-bottom:0; } }
.op-guide-sources{ margin:26px 0 0; padding-top:18px; border-top:1px solid var(--op-border); }
.op-guide-sources h2{ font-size:1rem; margin:0 0 10px; color:var(--op-text-primary); }
.op-guide-sources ol{ font-size:.86rem; }
.op-guide-sources ol > li{ margin-bottom:6px; }
.op-guide-sources a{ word-break:break-word; }
.op-guide-disclaimer{ font-size:.84rem !important; color:var(--op-text-muted) !important; }
.op-guide-body ol[start="5"]{ counter-reset:opstep 4; }
.op-guide-body ol[start="9"]{ counter-reset:opstep 8; }