/* Whisperin — Guides layer (editorial index + article).
   Scoped add-on; reuses tokens + .card/.chip/.accordion/.cta-panel from core CSS.
   No color/component invention — every value references an existing token. */

/* ===== Reading-progress bar (article top) ===== */
.read-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:var(--z-header);background:transparent;pointer-events:none}
.read-progress .bar{height:100%;width:0;background:var(--wi-cta);box-shadow:0 0 12px rgba(240,176,200,.5);transform-origin:left center;transition:width var(--dur-fast) linear}
@media (prefers-reduced-motion:reduce){.read-progress .bar{transition:none}}

/* ===== Index: intro ===== */
.guides-intro{padding-top:clamp(104px,14vh,160px);text-align:center}
.guides-intro h1{margin-bottom:var(--s5)}
.guides-intro .lead{max-width:42rem;margin-inline:auto}

/* ===== Index: filter chips (visual + show/hide JS) ===== */
.filter-bar{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:var(--s8)}
.filter-chip{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-micro);font-weight:600;letter-spacing:.04em;color:var(--wi-text-muted);padding:8px 16px;border:1px solid var(--wi-border);border-radius:var(--r-pill);background:var(--wi-glass-btn-bg);backdrop-filter:var(--wi-blur);transition:color var(--dur-fast),border-color var(--dur-fast),background var(--dur-fast)}
.filter-chip:hover{color:var(--wi-text);border-color:var(--wi-border-strong)}
.filter-chip[aria-pressed=true]{color:#2a0a18;background:var(--wi-cta);border-color:transparent;box-shadow:var(--wi-glow)}

/* ===== Index: card grid ===== */
.guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s6);margin-top:var(--s10)}
@media (max-width:900px){.guide-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.guide-grid{grid-template-columns:1fr}}
.guide-grid .is-hidden{display:none}

/* whole-card link: card is the <a> */
a.guide-card{display:flex;flex-direction:column;padding:0;overflow:hidden;color:inherit}
a.guide-card .thumb{aspect-ratio:16/9;border-bottom:1px solid var(--wi-border);position:relative;display:flex;align-items:flex-end;padding:var(--s4)}
a.guide-card .thumb .kind{font-size:var(--fs-micro);font-weight:600;letter-spacing:.04em;padding:4px 10px;border-radius:var(--r-pill);background:rgba(20,8,14,.55);backdrop-filter:blur(8px);border:1px solid var(--wi-glass-border);color:var(--wi-text)}
a.guide-card .body{padding:var(--s5) var(--s6) var(--s6);display:flex;flex-direction:column;gap:8px;flex:1}
a.guide-card .updated{font-size:var(--fs-micro);color:var(--wi-text-subtle);letter-spacing:.03em}
a.guide-card h3{font-size:1.1rem;line-height:var(--lh-snug)}
a.guide-card .desc{font-size:var(--fs-sm);color:var(--wi-text-muted);line-height:1.5}
a.guide-card .more{margin-top:auto;padding-top:var(--s2);font-size:var(--fs-sm);font-weight:600;color:var(--wi-accent);display:inline-flex;align-items:center;gap:6px}
a.guide-card:hover .more{gap:10px}

.guides-libline{text-align:center;margin-top:var(--s10);font-size:var(--fs-sm);color:var(--wi-text-subtle)}
.no-results{text-align:center;color:var(--wi-text-muted);margin-top:var(--s10);display:none}

/* ===== Article shell ===== */
.article{padding-top:clamp(96px,12vh,140px)}
.article-inner{max-width:var(--reading);margin-inline:auto}
.breadcrumb{font-size:var(--fs-sm);color:var(--wi-text-muted);display:inline-flex;align-items:center;gap:6px;transition:color var(--dur-fast)}
.breadcrumb:hover{color:var(--wi-accent)}
.article-byline{font-size:var(--fs-sm);color:var(--wi-text-subtle);margin-top:var(--s6)}
.article h1{margin-top:var(--s4);font-size:clamp(2.1rem,4.4vw,3rem)}
.article-sub{font-size:var(--fs-lead);color:var(--wi-text-muted);line-height:1.5;margin-top:var(--s5)}

/* article featured strip (CSS gradient, no asset) */
.article-hero{height:clamp(180px,28vw,300px);border-radius:var(--r-card-lg);border:1px solid var(--wi-border);margin:var(--s10) 0;position:relative;overflow:hidden}
.article-hero .ai-tag{position:absolute;bottom:14px;right:14px;font-size:10px;letter-spacing:.05em;padding:4px 10px;border-radius:var(--r-pill);background:rgba(0,0,0,.5);color:var(--wi-text-subtle);border:1px solid var(--wi-glass-border)}

/* ===== Inline mini-TOC ===== */
.mini-toc{border:1px solid var(--wi-border);border-radius:var(--r-card);background:var(--wi-glass-btn-bg);padding:var(--s6);margin:var(--s8) 0}
.mini-toc h2{font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:.08em;color:var(--wi-text-subtle);margin-bottom:var(--s4);font-weight:700}
.mini-toc ol{display:grid;gap:8px;counter-reset:toc}
.mini-toc a{font-size:var(--fs-sm);color:var(--wi-text-muted);display:inline-flex;gap:10px;transition:color var(--dur-fast)}
.mini-toc a::before{counter-increment:toc;content:counter(toc,decimal-leading-zero);color:var(--wi-accent);font-variant-numeric:tabular-nums}
.mini-toc a:hover{color:var(--wi-text)}

/* ===== Article body prose ===== */
.prose{margin-top:var(--s4)}
.prose>h2{font-size:var(--fs-h3);margin-top:var(--s12);margin-bottom:var(--s4);scroll-margin-top:90px}
.prose>h2:first-child{margin-top:0}
.prose p{margin-bottom:var(--s5);line-height:var(--lh-body)}
.prose ul{margin:0 0 var(--s5);display:grid;gap:var(--s3)}
.prose ul li{display:flex;gap:10px;color:var(--wi-text-muted)}
.prose ul li::before{content:"";flex:0 0 auto;width:7px;height:7px;border-radius:50%;margin-top:11px;background:var(--wi-accent);box-shadow:0 0 8px rgba(240,176,200,.4)}
.prose strong{color:var(--wi-text)}
.prose .bluf{border-left:2px solid var(--wi-border-strong);padding-left:var(--s5);color:var(--wi-text)}
.prose .bluf p{color:var(--wi-text);font-size:1.1rem}

/* stat callout (the required unique data point) */
.stat-callout{border:1px solid var(--wi-border-strong);border-radius:var(--r-card);background:var(--wi-glass-btn-bg);padding:var(--s5) var(--s6);margin:var(--s6) 0;display:flex;align-items:baseline;gap:14px}
.stat-callout .big{font-size:1.8rem;font-weight:900;line-height:1;background:var(--wi-text-gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;flex:0 0 auto}
.stat-callout span.t{font-size:var(--fs-sm);color:var(--wi-text-muted)}

/* inline CTA strip */
.cta-inline{border:1px solid var(--wi-border-strong);border-radius:var(--r-card);background:var(--wi-bg-glow);padding:var(--s6);margin:var(--s10) 0;display:flex;align-items:center;justify-content:space-between;gap:var(--s6);flex-wrap:wrap}
.cta-inline p{color:var(--wi-text);font-weight:600;margin:0}

/* ===== Comparison glass table (listicle) ===== */
.table-wrap{overflow-x:auto;border:1px solid var(--wi-border);border-radius:var(--r-card);background:var(--wi-glass-bg);backdrop-filter:var(--wi-blur);margin:var(--s6) 0}
table.glass{width:100%;border-collapse:collapse;font-size:var(--fs-sm);min-width:480px}
table.glass th,table.glass td{text-align:left;padding:14px var(--s5);border-bottom:1px solid var(--wi-border)}
table.glass thead th{font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.06em;color:var(--wi-text-subtle);background:rgba(0,0,0,.2)}
table.glass tbody tr:last-child td{border-bottom:none}
table.glass td:first-child{color:var(--wi-text);font-weight:600}

/* ===== Related guides ===== */
.related-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);margin-top:var(--s4)}
@media (max-width:560px){.related-grid{grid-template-columns:1fr}}
a.related-card{display:block;padding:var(--s5) var(--s6);color:inherit}
a.related-card .rk{font-size:var(--fs-micro);color:var(--wi-text-subtle);letter-spacing:.04em}
a.related-card strong{display:block;margin-top:6px;font-size:var(--fs-sm);color:var(--wi-text)}
a.related-card:hover strong{color:var(--wi-accent)}