/* ══════════════════════════════════════════════════════════════════
   RetainCLM Chart Intelligence - /charts and /charts/<slug>
   ------------------------------------------------------------------
   Same tokens as the landing page (emerald #059669, Inter, slate ink
   scale, 22px glass cards) so this reads as one product rather than a
   documentation site bolted on. Where this page differs it is on
   purpose: a feed needs more vertical rhythm and a quieter surface
   than a marketing section, so the chart card carries the contrast and
   the page behind it stays out of the way.

   Also loaded by the landing page's featured-charts section, which is
   why the .rcv-* renderer styles live here rather than in a third file.
   ════════════════════════════════════════════════════════════════ */

:root {
  --emerald:   #059669;
  --emerald-l: #10B981;
  --slate-900: #0F172A;
  --slate-700: #334155;
  --slate-500: #64748B;
  --slate-400: #94A3B8;
  --slate-300: #CBD5E1;
  --slate-200: #E2E8F0;
  --slate-100: #F1F5F9;
  --slate-50:  #F8FAFC;
  --white:     #FFFFFF;
  --border:    rgba(15,23,42,.09);
  --focus:     0 0 0 3px rgba(5,150,105,.16);
  --shadow:    0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.05);
  --shadow-lg: 0 8px 40px rgba(15,23,42,.10), 0 2px 8px rgba(15,23,42,.06);
}

/* Renderer styles (.rcv-*), the hidden data table (.rc-sr), the figure
   caption and the landing section's cards live in rc-viz.css, which this
   page loads first. Kept there so the landing page can load the renderer
   without also downloading the feed and detail-page styles below. */

/* ── PAGE SHELL ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body.rc-charts {
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  background: var(--white); color: var(--slate-900);
  overflow-x: hidden;
}
.rc-skip {
  position: absolute; left: -9999px; top: 8px; z-index: 4000;
  background: var(--slate-900); color: #fff; padding: 10px 16px; border-radius: 10px;
  font-size: 13px; font-weight: 600; text-decoration: none;
}
.rc-skip:focus { left: 12px; }

/* The nav is the landing page's floating pill, styled by
   /charts/site-chrome.css and emitted by the generator - there is no
   /charts-specific nav any more. The button below is not part of it:
   it is the closing call to action at the foot of each page. */
.rc-cta {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 700; color: #fff; text-decoration: none;
  background: linear-gradient(135deg, var(--emerald), var(--emerald-l));
  padding: 9px 16px; border-radius: 10px; box-shadow: 0 4px 16px rgba(5,150,105,.26);
  border: none; cursor: pointer; font-family: inherit;
  transition: transform .2s, box-shadow .2s;
}
.rc-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(5,150,105,.3); }
.rc-cta:focus-visible { outline: none; box-shadow: var(--focus); }

.rc-wrap { max-width: 1080px; margin: 0 auto; padding: 0 clamp(16px,4vw,32px); }
.rc-narrow { max-width: 800px; }

/* ── HERO ────────────────────────────────────────────────────────── */
.rc-hero {
  position: relative; overflow: hidden;
  /* Top spacing comes from .rc-crumbs, which has to clear the floating
     nav anyway - putting it here as well would double it. */
  padding: 0 0 clamp(32px,5vw,52px);
  background:
    radial-gradient(900px 380px at 50% -10%, rgba(5,150,105,.10), transparent 70%),
    linear-gradient(180deg, #F4F8FF 0%, var(--white) 100%);
  border-bottom: 1px solid var(--border);
}
/* The category eyebrow was removed from both page types on request, so
   the H1 now carries the gap the eyebrow used to hold below the
   breadcrumbs. */
.rc-hero .rc-h1 { margin-top: 26px; }
.rc-h1 {
  font-size: clamp(30px,5.2vw,52px); font-weight: 800; letter-spacing: -1.4px;
  line-height: 1.1; margin-bottom: 16px; max-width: 15ch;
}
/* The library title reads as one line wherever it fits. No max-width to
   wrap it early, and the size steps down with the viewport so it breaks
   only when the screen genuinely cannot hold it. */
.rc-h1-wide {
  max-width: none; white-space: nowrap;
  font-size: clamp(26px, 4.35vw, 50px); letter-spacing: -1.5px;
}
@media (max-width: 700px) {
  .rc-h1-wide { white-space: normal; font-size: clamp(28px, 7.4vw, 40px); }
}
/* No max-width: the lede fills whatever column it is in. The 62ch cap
   that used to be here broke the line well short of the container on
   both page types, leaving the right third of the hero empty. The
   reading measure is set by the container instead - 1016px on the
   hub, 736px on a detail page - which is where the line should
   break. */
.rc-lede { font-size: clamp(15px,1.8vw,17.5px); color: var(--slate-500); line-height: 1.65; }

/* ── BREADCRUMBS ─────────────────────────────────────────────────── */
/* The site nav is position:fixed and takes no layout space, so the
   first block on the page clears it. Both page types open with
   breadcrumbs, so this is the single place that needs to know. */
.rc-crumbs { font-size: 12.5px; color: var(--slate-400); padding: 94px 0 0; }
.rc-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.rc-crumbs a { color: var(--slate-500); text-decoration: none; font-weight: 600; }
.rc-crumbs a:hover { color: var(--emerald); text-decoration: underline; }
.rc-crumbs li::after { content: '/'; margin-left: 7px; color: var(--slate-300); }
.rc-crumbs li:last-child::after { content: ''; }
.rc-crumbs [aria-current] { color: var(--slate-700); font-weight: 600; }

/* ── FILTER BAR ──────────────────────────────────────────────────── */
/* Sits below the floating pill, and under it in z-order, so the two
   never overlap as you scroll.

   .rc-filter is the sticky positioner only and paints nothing; the card
   inside it is the visible surface. Splitting the two is what lets the
   card sit inside .rc-wrap's gutters instead of bleeding to the
   viewport edges, while keeping the stickiness the feed already had. */
.rc-filter {
  position: sticky; top: 74px; z-index: 40;
  padding: 10px 0; margin-bottom: 8px;
}
/* Same surface treatment as .rc-card in the feed below - the tokens are
   deliberately shared, not re-chosen. */
.rc-filter-card {
  background: rgba(255,255,255,.92);
  border: 1px solid var(--border); border-radius: 22px;
  padding: clamp(16px,2.1vw,22px) clamp(18px,2.6vw,26px);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
}
.rc-search { position: relative; margin-bottom: 12px; }
.rc-search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--slate-400); pointer-events: none; }
.rc-search input {
  width: 100%; font-family: inherit; font-size: 14px; color: var(--slate-900);
  padding: 11px 14px 11px 40px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--white); outline: none;
}
.rc-search input::placeholder { color: var(--slate-400); }
.rc-search input:focus { border-color: rgba(5,150,105,.45); box-shadow: var(--focus); }
.rc-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.rc-chip {
  font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--slate-500);
  background: var(--slate-100); border: 1px solid transparent; border-radius: 999px;
  padding: 7px 14px; cursor: pointer;
}
.rc-chip:hover { color: var(--slate-900); }
.rc-chip:focus-visible { outline: none; box-shadow: var(--focus); }
.rc-chip[aria-pressed="true"] {
  background: rgba(5,150,105,.1); color: var(--emerald); border-color: rgba(5,150,105,.28);
}
.rc-count { font-size: 12.5px; color: var(--slate-400); font-weight: 600; margin-top: 12px; }
.rc-empty { padding: 60px 0; text-align: center; color: var(--slate-500); font-size: 14.5px; }

/* ── FEED ────────────────────────────────────────────────────────── */
/* Vertical only. The `padding` shorthand here also reset .rc-wrap's
   horizontal gutters to 0, so the feed ran 32px wider than every
   other .rc-wrap block on desktop and went edge-to-edge below
   1080px - which is what left the filter card visibly out of line
   with the cards under it. */
.rc-feed { padding-top: 8px; padding-bottom: 40px; }
.rc-family {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  padding: 44px 0 4px; scroll-margin-top: 200px;
}
.rc-family h2 { font-size: clamp(19px,2.6vw,26px); font-weight: 800; letter-spacing: -.7px; }
.rc-family p { font-size: 13.5px; color: var(--slate-500); flex: 1 1 260px; line-height: 1.6; }

/* The feed card. Alternating chart/prose order is set per-card with
   .is-flipped so the scroll does not become a metronome; on narrow
   screens the chart always comes first, because a reader who has not
   seen it yet has nothing to attach the prose to. */
.rc-card {
  display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr);
  gap: clamp(22px,3.4vw,44px); align-items: center;
  background: rgba(255,255,255,.72);
  border: 1px solid var(--border); border-radius: 22px;
  padding: clamp(20px,2.6vw,30px);
  margin-top: 22px; scroll-margin-top: 200px;
  backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: var(--shadow);
  transition: box-shadow .3s cubic-bezier(.16,1,.3,1), border-color .3s, transform .3s cubic-bezier(.16,1,.3,1);
}
.rc-card:hover { box-shadow: var(--shadow-lg); border-color: rgba(5,150,105,.2); }
.rc-card.is-flipped { grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); }
.rc-card.is-flipped .rc-card-viz { order: 2; }
.rc-card-num {
  font-size: 11px; font-weight: 800; letter-spacing: 1.4px; color: var(--emerald);
  text-transform: uppercase; margin-bottom: 9px;
}
.rc-card h3 { font-size: clamp(19px,2.4vw,25px); font-weight: 800; letter-spacing: -.7px; line-height: 1.2; margin-bottom: 8px; }
.rc-card h3 a { text-decoration: none; color: var(--slate-900); }
.rc-card h3 a:hover { color: var(--emerald); }
.rc-tagline { font-size: 13.5px; color: var(--emerald); font-weight: 600; margin-bottom: 16px; }
.rc-dl { margin: 0 0 4px; }
.rc-dl dt {
  font-size: 10.5px; font-weight: 800; letter-spacing: .9px; text-transform: uppercase;
  color: var(--slate-400); margin-top: 15px;
}
.rc-dl dd { font-size: 13.5px; color: var(--slate-700); line-height: 1.65; margin-top: 4px; }
.rc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.rc-tag {
  font-size: 11px; font-weight: 700; color: var(--slate-500); background: var(--slate-100);
  border-radius: 7px; padding: 4px 9px; text-decoration: none;
}
.rc-tag:hover { color: var(--emerald); background: rgba(5,150,105,.09); }
.rc-more {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 20px;
  font-size: 13.5px; font-weight: 700; color: var(--emerald); text-decoration: none;
}
.rc-more:hover { gap: 10px; }
.rc-more:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 6px; }

/* ── AI INSIGHT ──────────────────────────────────────────────────── */
.rc-ai {
  margin-top: 20px; border-radius: 16px; padding: 16px 18px;
  background: linear-gradient(135deg, rgba(5,150,105,.07), rgba(37,99,235,.05));
  border: 1px solid rgba(5,150,105,.16);
}
.rc-ai-h {
  display: flex; align-items: center; gap: 7px; margin-bottom: 9px;
  font-size: 10.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--emerald);
}
.rc-ai p { font-size: 13px; color: var(--slate-700); line-height: 1.65; }
.rc-ai-act { margin-top: 10px; padding-top: 10px; border-top: 1px dashed rgba(5,150,105,.24); }
.rc-ai-act b { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: var(--slate-500); margin-bottom: 4px; }

/* Data -> Visualization -> AI Insight -> Action */
.rc-chain { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; margin-top: 26px; }
.rc-chain-step {
  flex: 1 1 160px; background: var(--white); border: 1px solid var(--border);
  border-radius: 14px; padding: 15px 16px; position: relative;
}
.rc-chain-step b { display: block; font-size: 13px; font-weight: 800; margin-bottom: 4px; letter-spacing: -.2px; }
.rc-chain-step span { font-size: 12px; color: var(--slate-500); line-height: 1.55; }
.rc-chain-step::after {
  content: '→'; position: absolute; right: -13px; top: 50%; transform: translateY(-50%);
  color: var(--slate-300); font-size: 15px; font-weight: 700;
}
.rc-chain-step:last-child::after { content: ''; }
@media (max-width: 620px) { .rc-chain-step::after { content: ''; } }

/* ── DETAIL PAGE ─────────────────────────────────────────────────── */
/* 26px stands in for the removed category eyebrow above the H1.
   Vertical longhands, not the `padding` shorthand: this element is
   also a .rc-wrap, and the shorthand reset its horizontal gutters
   to 0 - which put the H1 and the prose 32px out of line with the
   breadcrumbs above them, and flush against the edge of a phone. */
.rc-detail { padding-top: 26px; padding-bottom: 24px; }
.rc-detail-figure {
  background: rgba(255,255,255,.72); border: 1px solid var(--border); border-radius: 22px;
  padding: clamp(18px,2.6vw,28px); margin: 26px 0;
  backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: var(--shadow);
}
.rc-prose h2 { font-size: clamp(19px,2.4vw,25px); font-weight: 800; letter-spacing: -.7px; margin: 40px 0 12px; scroll-margin-top: 90px; }
.rc-prose h3 { font-size: 15.5px; font-weight: 700; margin: 24px 0 7px; letter-spacing: -.3px; }
.rc-prose p { font-size: 15px; color: var(--slate-700); line-height: 1.75; margin-bottom: 14px; }
.rc-prose p a, .rc-prose li a { color: var(--emerald); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.rc-prose ul { margin: 0 0 14px 20px; }
.rc-prose li { font-size: 15px; color: var(--slate-700); line-height: 1.75; margin-bottom: 6px; }
.rc-note {
  border-left: 3px solid var(--slate-300); padding: 4px 0 4px 16px; margin: 18px 0;
  font-size: 13.5px; color: var(--slate-500); line-height: 1.7;
}
.rc-faq details {
  border: 1px solid var(--border); border-radius: 14px; padding: 2px 18px; margin-bottom: 10px;
  background: var(--white);
}
.rc-faq summary {
  cursor: pointer; list-style: none; padding: 15px 0; font-size: 15px; font-weight: 700;
  display: flex; align-items: center; gap: 12px; letter-spacing: -.2px;
}
.rc-faq summary::-webkit-details-marker { display: none; }
.rc-faq summary::after {
  content: '+'; margin-left: auto; color: var(--emerald); font-size: 20px; font-weight: 400; line-height: 1;
}
.rc-faq details[open] summary::after { content: '−'; }
.rc-faq summary:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 8px; }
.rc-faq p { font-size: 14.5px; color: var(--slate-700); line-height: 1.75; padding: 0 0 16px; }

.rc-related { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 12px; margin-top: 8px; }
.rc-related a {
  display: block; color: inherit; border: 1px solid var(--border); border-radius: 14px; padding: 15px 17px;
  text-decoration: none; background: var(--white); transition: border-color .2s, transform .2s, box-shadow .2s;
}
.rc-related a:hover { border-color: rgba(5,150,105,.3); transform: translateY(-2px); box-shadow: var(--shadow); }
.rc-related b { display: block; font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.rc-related span { font-size: 12.5px; color: var(--slate-500); line-height: 1.55; }

/* ── CLOSING CTA + FOOTER ────────────────────────────────────────── */
.rc-close {
  margin: 56px 0 0; padding: clamp(34px,5vw,56px) clamp(22px,4vw,48px);
  border-radius: 26px; text-align: center; color: #fff;
  background: linear-gradient(135deg, #065F46, var(--emerald) 55%, var(--emerald-l));
  box-shadow: 0 20px 60px rgba(5,150,105,.22);
}
.rc-close h2 { font-size: clamp(22px,3.4vw,34px); font-weight: 800; letter-spacing: -1px; margin-bottom: 12px; }
.rc-close p { font-size: 15px; color: rgba(255,255,255,.86); line-height: 1.7; max-width: 56ch; margin: 0 auto 24px; }
.rc-close .rc-cta { background: #fff; color: var(--emerald); box-shadow: 0 8px 24px rgba(0,0,0,.16); }

/* The footer is the landing page's, styled by
   /charts/site-chrome.css. */

/* ── RESPONSIVE ──────────────────────────────────────────────────── */
@media (max-width: 480px) {
  /* The pill shrinks and rises on small screens (see site-chrome.css),
     so the clearance follows it down. */
  .rc-crumbs { padding-top: 76px; }
  .rc-filter { top: 64px; }
}
@media (max-width: 900px) {
  /* .rc-card.is-flipped also sets grid-template-columns, and two
     classes outrank one - so the single-column stack has to be
     restated for it or flipped cards keep their two-column split and
     render a 124px-wide chart on a phone. */
  .rc-card, .rc-card.is-flipped { grid-template-columns: minmax(0, 1fr); }
  .rc-card.is-flipped .rc-card-viz { order: 0; }
}
@media (max-width: 700px) {
  /* Wrapped, the nine topic chips take four rows and the sticky filter
     bar swallows a third of a phone screen on every scroll. One
     scrollable row keeps them all reachable and the bar to ~110px. */
  .rc-chips {
    flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    /* Bleeds to the edge of its container so the last chip is not
       clipped mid-word. That container is .rc-filter-card, so the
       offset is the card's padding, not .rc-wrap's. */
    margin: 0 calc(-1 * clamp(18px,2.6vw,26px)); padding: 2px clamp(18px,2.6vw,26px);
  }
  .rc-chips::-webkit-scrollbar { display: none; }
  .rc-chip { flex: 0 0 auto; scroll-snap-align: start; }
  .rc-filter { padding: 8px 0; }
  /* Horizontal padding stays on the same clamp the .rc-chips bleed
     above subtracts, or the last chip clips against the card edge. */
  .rc-filter-card { padding: 14px clamp(18px,2.6vw,26px); border-radius: 18px; }
  .rc-count { margin-top: 9px; }
}
@media (max-width: 560px) {
  .rc-card { padding: 18px 14px; border-radius: 18px; }
  .rcv-tip { max-width: 200px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rc-card, .rc-cta, .rc-more, .rc-related a { transition: none; }
  .rcv-pulse { animation: none; }
  .rc-reveal { opacity: 1 !important; transform: none !important; }
}

/* Scroll reveal, matched to the landing page's easing and distance so
   the two pages feel like one site. */
.rc-reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.rc-reveal.in { opacity: 1; transform: none; }

@media print {
  .site-nav, .rc-filter, .rc-close, .rc-cta { display: none; }
  .rc-card { break-inside: avoid; border: 1px solid #ccc; }
}