/* Charts home: an editorial hero and a browsable gallery of every chart type.
   Breakpoints use container queries because the home sits next to the sidebar. */
.charts-home { --charts-max:1200px; }
.charts-hero { padding:64px var(--gutter) 56px; border-bottom:1px solid var(--line); background:radial-gradient(1000px 420px at 10% -10%,var(--accent-soft),transparent 70%); }
.charts-hero-inner { display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); align-items:center; gap:56px; max-width:var(--charts-max); margin:0 auto; }
.charts-eyebrow { display:flex; align-items:center; gap:8px; margin-bottom:22px; font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-ink); }
.charts-eyebrow > span { width:6px; height:6px; border-radius:50%; background:var(--accent); }
.charts-hero h1 { margin:0 0 20px; font-size:clamp(38px,4.3vw,56px); font-weight:700; letter-spacing:-.03em; line-height:1.12; }
.charts-hero h1 em { font-style:normal; color:var(--accent-ink); }
.charts-hero-copy > p { max-width:460px; margin:0 0 28px; font-size:17px; line-height:1.65; color:var(--muted); }
.charts-hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px 22px; }
.charts-secondary-link { display:inline-flex; align-items:center; gap:6px; font-size:13.5px; font-weight:600; color:var(--muted); transition:color .12s; }
.charts-secondary-link:hover { color:var(--accent-ink); }
.charts-hero-footnote { display:flex; flex-wrap:wrap; gap:0 14px; margin-top:36px; font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); }
.charts-hero-footnote span + span::before { content:"/"; margin-right:14px; color:var(--line-strong); }
.charts-hero-art { min-width:0; margin:0; }
.charts-board-svg { width:100%; height:auto; border-radius:var(--radius-l); box-shadow:var(--shadow-l); }
.charts-hero-art figcaption { display:flex; align-items:center; justify-content:flex-end; gap:6px; margin-top:12px; font-size:12px; color:var(--faint); }
.charts-sample-dot { width:5px; height:5px; border-radius:50%; background:var(--line-strong); }

.charts-gallery { max-width:var(--charts-max); margin:0 auto; padding:56px var(--gutter) 80px; scroll-margin-top:var(--header-h); }
.charts-gallery-intro { display:flex; align-items:flex-end; justify-content:space-between; gap:32px; margin-bottom:22px; }
.charts-section-kicker { margin-bottom:10px; font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-ink); }
.charts-gallery h2 { margin:0 0 10px; font-size:30px; font-weight:700; letter-spacing:-.025em; line-height:1.2; }
.charts-mobile-break { display:none; }
.charts-gallery-intro p { margin:0; font-size:15px; color:var(--muted); }
.charts-search, .grid-features-search { display:flex; align-items:center; gap:10px; height:38px; min-width:280px; padding:0 8px 0 12px; border:1px solid var(--line); border-radius:var(--radius-s); background:var(--bg); color:var(--faint); transition:border-color .15s,box-shadow .15s; }
.charts-search:focus-within, .grid-features-search:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-ring); }
.charts-search input, .grid-features-search input { flex:1; min-width:0; border:0; outline:0; background:none; font-size:13.5px; color:var(--text); }
.charts-search input::placeholder, .grid-features-search input::placeholder { color:var(--faint); }
.charts-search > span { font:500 11px/1 var(--font-sans); color:var(--faint); border:1px solid var(--line); border-bottom-width:2px; border-radius:4px; padding:3px 6px; }
.charts-filters { display:flex; flex-wrap:wrap; gap:6px; }
.charts-filters button { display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 12px; border:1px solid var(--line); border-radius:var(--radius-s); background:var(--bg); font-size:13px; font-weight:500; color:var(--muted); transition:background .12s,color .12s,border-color .12s; }
.charts-filters button:hover { border-color:var(--line-strong); background:var(--hover); color:var(--text); }
.charts-filters button[aria-pressed="true"] { border-color:var(--text); background:var(--text); color:var(--bg); }
.charts-filters button span { font-size:11.5px; color:inherit; opacity:.6; font-variant-numeric:tabular-nums; }
.charts-gallery-status { display:flex; align-items:center; gap:14px; min-height:28px; margin:20px 0 26px; padding-bottom:14px; border-bottom:1px solid var(--line); font-size:12.5px; color:var(--faint); }
.charts-gallery-status [data-charts-count] { font-weight:600; color:var(--muted); white-space:nowrap; }
.charts-gallery-status [data-charts-reset] { display:inline-flex; align-items:center; gap:5px; font-size:12.5px; font-weight:500; color:var(--accent-ink); }
.charts-gallery-caption { margin-left:auto; }
.charts-gallery-group { margin-bottom:40px; }
.charts-group-heading { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:14px; }
.charts-group-heading h3 { margin:0; font-size:15.5px; font-weight:600; }
.charts-group-heading > span { font:12px var(--font-mono); letter-spacing:.05em; color:var(--faint); }
.charts-card-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.charts-card { display:flex; flex-direction:column; min-width:0; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius-m); background:var(--bg); transition:border-color .15s,box-shadow .15s; }
.charts-card:hover { border-color:var(--line-strong); box-shadow:var(--shadow-m); }
.charts-card-visual { padding:14px 10px 6px; border-bottom:1px solid var(--line); background:var(--surface); }
.charts-card-visual svg { width:100%; height:auto; }
.charts-card-label { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:44px; padding:10px 14px; font-size:13.5px; font-weight:500; line-height:1.4; }
.charts-card-label > span { min-width:0; }
.charts-card-label > svg { color:var(--faint); transition:transform .15s,color .15s; }
.charts-card:hover .charts-card-label > svg { color:var(--accent-ink); transform:translateX(2px); }
.charts-no-results { padding:64px 20px; text-align:center; color:var(--faint); }
.charts-no-results > svg { margin:0 auto 16px; }
.charts-no-results h3 { margin:0 0 8px; font-size:18px; color:var(--text); }
.charts-no-results p { margin:0 0 18px; font-size:14px; }

@container (max-width:1040px) {
  .charts-hero { padding-top:48px; padding-bottom:44px; }
  .charts-hero-inner { grid-template-columns:1fr; gap:36px; }
  .charts-hero-copy > p { max-width:560px; }
  .charts-hero-art { max-width:640px; }
  .charts-card-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@container (max-width:720px) {
  .charts-hero h1 { font-size:36px; }
  .charts-hero-copy > p { font-size:16px; }
  .charts-gallery { padding-top:44px; padding-bottom:56px; }
  .charts-gallery-intro { flex-direction:column; align-items:stretch; gap:18px; }
  .charts-gallery h2 { font-size:26px; }
  .charts-search { min-width:0; }
  .charts-card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .charts-card-label { min-height:40px; padding:8px 12px; font-size:12.5px; }
  .charts-gallery-status { flex-wrap:wrap; }
  .charts-gallery-caption { width:100%; margin-left:0; }
}
@container (max-width:420px) {
  .charts-mobile-break { display:block; }
  .charts-hero h1 { font-size:32px; }
  .charts-filters button { height:30px; padding:0 10px; font-size:12.5px; }
  .charts-card-label > svg { display:none; }
}