/* Research-dashboard program: /onderzoek index + the live dashboards
   (templates/pages/onderzoek*.html). Self-contained — uses theme.css tokens but
   redefines the chart/table primitives so it doesn't depend on article.css. */

/* ── index ─────────────────────────────────────────────────────────────── */
.ond-hero { padding-bottom: clamp(1.5rem, 3vh, 2.5rem); }
.ond-hero .sec-head { margin-bottom: 1.6rem; }
.ond-hero h1 { font-size: clamp(2rem, 4.2vw, 3rem); }

.ond-denominator {
  max-width: 52rem;
  color: var(--ink-60);
  font-size: .92rem;
  line-height: 1.55;
}
.ond-denominator .chip { margin-right: .5rem; vertical-align: middle; }

.ond-hubs-sec { padding-top: clamp(1.5rem, 3vh, 2.5rem); }
.ond-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  gap: 1.2rem;
}
.ond-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.5rem 1.6rem;
}
.ond-card.is-live {
  text-decoration: none;
  color: inherit;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.ond-card.is-live:hover { border-color: var(--blue); box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.ond-card:not(.is-live) { opacity: .82; }

.ond-card-top { display: flex; align-items: center; gap: .6rem; margin-bottom: 1.1rem; }
.ond-hub-label { font-family: var(--jbmono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-40); }

.ond-stat { font-size: clamp(2rem, 4vw, 2.6rem); font-weight: 700; line-height: 1; color: var(--ink); }
.ond-stat-label { font-size: .9rem; color: var(--ink-60); margin-top: .3rem; }
.ond-hook { font-size: 1.02rem; font-weight: 600; color: var(--blue-deep); margin-top: 1rem; line-height: 1.4; }
.ond-blurb { font-size: .9rem; color: var(--ink-60); margin-top: .55rem; line-height: 1.5; flex: 1; }

.ond-card-foot {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--line);
}
.ond-audience { font-family: var(--jbmono); font-size: .66rem; color: var(--ink-40); }
.ond-go { font-size: .82rem; font-weight: 600; color: var(--blue); white-space: nowrap; }

.ond-cta-sec { background: var(--bg-soft); }
.ond-cta { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.ond-cta h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
.ond-cta p { color: var(--ink-60); margin-top: .6rem; max-width: 34rem; }
.ond-cta-btns { display: flex; gap: .7rem; flex-wrap: wrap; }

/* ── dashboard ─────────────────────────────────────────────────────────── */
.ond-d-hero { padding-bottom: clamp(1.5rem, 3vh, 2.2rem); }
.ond-d-meta { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.ond-live-dot { font-family: var(--jbmono); font-size: .68rem; color: var(--green); display: inline-flex; align-items: center; gap: .4rem; }
.ond-live-dot::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 var(--green); animation: ond-pulse 2s infinite; }
@keyframes ond-pulse { 0% { box-shadow: 0 0 0 0 rgba(14,125,82,.5); } 70% { box-shadow: 0 0 0 6px rgba(14,125,82,0); } 100% { box-shadow: 0 0 0 0 rgba(14,125,82,0); } }
.ond-updated { font-family: var(--jbmono); font-size: .68rem; color: var(--ink-40); }
.ond-d-hero h1 { font-size: clamp(2rem, 4.2vw, 3rem); }
.ond-d-lead { color: var(--ink-60); font-size: 1.1rem; margin-top: 1rem; max-width: 44rem; }

.ond-d-body { padding-bottom: clamp(3.5rem, 8vh, 6rem); display: flex; flex-direction: column; gap: 1.4rem; }

.ond-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.ond-kpi { background: #fff; padding: 1.3rem 1.4rem; display: flex; flex-direction: column; }
.ond-kpi-val { font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 700; line-height: 1; color: var(--blue-deep); }
.ond-kpi-label { font-size: .92rem; font-weight: 600; margin-top: .5rem; }
.ond-kpi-sub { font-size: .78rem; color: var(--ink-60); margin-top: .25rem; }

/* evergreen banner — signals "living dashboard, not a dated post" */
.ond-evergreen { display: flex; gap: .8rem; align-items: flex-start; background: var(--green-tint); border: 1px solid #bfe3d2; border-radius: var(--radius); padding: 1rem 1.2rem; }
.ond-evergreen-dot { flex: none; width: .6rem; height: .6rem; border-radius: 50%; background: var(--green); margin-top: .5rem; box-shadow: 0 0 0 0 var(--green); animation: ond-pulse 2s infinite; }
.ond-evergreen p { font-size: .92rem; color: #15533c; line-height: 1.55; }
.ond-evergreen b { color: var(--green); }
.ond-evergreen a { color: var(--green); font-weight: 600; }

.ond-narrative { font-size: 1.12rem; line-height: 1.7; max-width: 46rem; }
.ond-narrative p { margin: .55rem 0; color: var(--ink); }
.ond-narrative b { color: var(--blue-deep); }

.ond-chart-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.5rem 1.6rem; }
.ond-chart-card.ond-highlight { border-color: var(--blue); box-shadow: var(--shadow-lg); }
.ond-chart-card h3 { font-size: 1.15rem; }
.ond-chart-sub { font-size: .85rem; color: var(--ink-60); margin-top: .25rem; margin-bottom: 1.2rem; }

/* chart header: title left, per-chart share control right */
.ond-chart-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }

/* per-chart share control (partials macro chart_share) */
.cshare { position: relative; flex: none; }
.cshare-toggle {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--euclid); font-size: .76rem; font-weight: 500; color: var(--ink-60);
  background: #fff; border: 1px solid var(--line); border-radius: 7px;
  padding: .32rem .6rem; cursor: pointer; transition: color .15s, border-color .15s;
}
.cshare-toggle:hover, .cshare-toggle[aria-expanded="true"] { color: var(--blue); border-color: var(--blue); }
.cshare-menu {
  position: absolute; right: 0; top: calc(100% + .35rem); z-index: 20; min-width: 12.5rem;
  display: flex; flex-direction: column; padding: .3rem;
  background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-lg);
}
.cshare-menu a, .cshare-menu button {
  text-align: left; font-family: var(--euclid); font-size: .85rem; color: var(--ink);
  background: none; border: none; border-radius: 7px; padding: .5rem .6rem; cursor: pointer; text-decoration: none;
}
.cshare-menu a:hover, .cshare-menu button:hover { background: var(--blue-tint); color: var(--blue-deep); }
/* author display: beats the UA [hidden] rule — restore it (see memory note) */
.cshare-menu[hidden] { display: none; }

.ond-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }

/* bars */
.ond-bars { display: flex; flex-direction: column; gap: .55rem; }
.ond-bar-row { display: grid; grid-template-columns: minmax(7rem, 12rem) 1fr auto; align-items: center; gap: .9rem; }
.ond-bar-label { font-size: .9rem; color: var(--ink); }
.ond-bar-track { background: var(--bg-soft); border-radius: 99px; height: .85rem; overflow: hidden; }
.ond-bar-fill { height: 100%; background: var(--blue); border-radius: 99px; transform-origin: left; animation: ond-grow .8s cubic-bezier(.2,.8,.2,1) both; }
.ond-bar-fill.alt { background: var(--green); }
@keyframes ond-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.ond-bar-val { font-family: var(--jbmono); font-size: .8rem; color: var(--ink-60); white-space: nowrap; text-align: right; }

.ond-chart-foot { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 1.2rem; padding-top: .9rem; border-top: 1px solid var(--line); font-family: var(--jbmono); font-size: .68rem; color: var(--ink-40); }
.ond-chart-foot .ond-src { color: var(--ink-60); }

/* table */
.ond-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.ond-table th { text-align: left; font-family: var(--jbmono); font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-40); padding: .6rem .7rem; border-bottom: 1px solid var(--line); }
.ond-table td { padding: .7rem .7rem; border-bottom: 1px solid var(--line); }
.ond-table tbody tr:last-child td { border-bottom: none; }
.ond-table td.num, .ond-table th:nth-child(2), .ond-table th:nth-child(4), .ond-table th:nth-child(5) { text-align: right; font-family: var(--jbmono); }
.ond-table tbody tr:hover { background: var(--bg-soft); }

/* money-page funnel */
.ond-money { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.ond-money-card { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem 1.6rem; }
.ond-money-card h3 { font-size: 1.1rem; }
.ond-money-card p { color: var(--ink-60); font-size: .92rem; margin: .55rem 0 1.2rem; line-height: 1.55; }

/* embed rail */
.ond-embed { background: var(--navy); color: #fff; border-radius: var(--radius); padding: 1.7rem 1.8rem; }
.ond-embed-head h3 { font-size: 1.15rem; color: #fff; }
.ond-embed-head p { color: rgba(255,255,255,.72); font-size: .92rem; margin-top: .4rem; max-width: 40rem; line-height: 1.55; }
.ond-embed-head p b { color: #fff; }
.ond-embed-code { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 8px; padding: 1rem 1.1rem; margin-top: 1.1rem; overflow-x: auto; }
.ond-embed-code code { font-family: var(--jbmono); font-size: .78rem; color: #cfe0ff; white-space: pre; }
.ond-embed-fine { font-size: .82rem; color: rgba(255,255,255,.6); margin-top: 1rem; }
.ond-embed-fine a { color: #9dc0ff; }

/* share widget (partials/share.html) */
.share { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: 1.6rem; }
.share-label { font-size: .85rem; font-weight: 600; color: var(--ink-60); margin-right: .15rem; }
.share-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--euclid); font-size: .82rem; font-weight: 500;
  color: var(--ink-60); background: #fff; border: 1px solid var(--line);
  border-radius: 8px; padding: .42rem .7rem; cursor: pointer; text-decoration: none;
  transition: color .15s, border-color .15s, background .15s, transform .15s;
}
.share-btn svg { flex: none; }
.share-btn:hover { transform: translateY(-1px); color: var(--ink); }
.share-x:hover { color: #fff; background: #000; border-color: #000; }
.share-li:hover { color: #fff; background: #0a66c2; border-color: #0a66c2; }
.share-wa:hover { color: #fff; background: #25d366; border-color: #25d366; }
.share-mail:hover, .share-native:hover { color: var(--blue); border-color: var(--blue); }
.share-copytext:hover, .share-copylink:hover { color: var(--ink); border-color: var(--ink-40); }
.share-btn.is-done { color: var(--green); border-color: var(--green); background: var(--green-tint); }
/* native-share button stays hidden until JS unhides it (display: overrides [hidden]) */
.share-btn[hidden] { display: none; }

@media (max-width: 34rem) {
  .share-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .share-btn.share-copytext span, .share-btn.share-copylink span { position: static; width: auto; height: auto; clip: auto; }
}

/* dated snapshots ("verhalen") that link back to this evergreen dashboard */
.ond-stories { border-top: 1px solid var(--line); padding-top: 2rem; }
.ond-stories-head { max-width: 44rem; margin-bottom: 1.4rem; }
.ond-stories-head h3 { font-size: 1.3rem; }
.ond-stories-head p { color: var(--ink-60); font-size: .92rem; margin-top: .5rem; line-height: 1.55; }
.ond-stories-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1.1rem; }
.ond-story { display: flex; flex-direction: column; text-decoration: none; color: inherit; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.2rem 1.3rem; transition: border-color .15s, box-shadow .15s, transform .15s; }
.ond-story:hover { border-color: var(--blue); box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.ond-story-meta { display: flex; align-items: center; gap: .6rem; font-family: var(--jbmono); font-size: .68rem; color: var(--ink-40); margin-bottom: .7rem; }
.ond-story-meta .cat { background: var(--blue-tint); color: var(--blue-deep); padding: .15rem .5rem; border-radius: 99px; letter-spacing: .03em; }
.ond-story h4 { font-size: 1.02rem; line-height: 1.35; }
.ond-story p { font-size: .87rem; color: var(--ink-60); margin-top: .5rem; line-height: 1.5; }
.ond-stories-all { display: inline-block; margin-top: 1.3rem; font-size: .9rem; font-weight: 600; color: var(--blue); text-decoration: none; }
.ond-stories-all:hover { color: var(--blue-deep); }

/* verantwoording */
.ond-method { background: var(--bg-soft); border-left: 3px solid var(--ink-40); border-radius: 0 8px 8px 0; padding: 1.1rem 1.3rem; font-size: .85rem; color: var(--ink-60); line-height: 1.6; }
.ond-method b { display: block; font-family: var(--jbmono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); margin-bottom: .4rem; }

@media (max-width: 46rem) {
  .ond-two-col, .ond-money { grid-template-columns: 1fr; }
  .ond-bar-row { grid-template-columns: minmax(6rem, 9rem) 1fr auto; gap: .6rem; }
}