.insights-layout { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.insights-head {
  display: flex; align-items: baseline; gap: 12px;
  padding: 14px 24px; background: var(--surface);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}
.insights-head h2 { margin: 0; font-size: 17px; color: var(--text-strong); }
.insights-when { font-size: 12px; color: var(--muted); }

.insights-body { flex: 1; overflow-y: auto; padding: 20px 24px; }
.insights-inner { max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; }

/* One card per network plus the sum, each in that network's own colour so the
   eye finds Instagram without reading the word. */
.insight-cards {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}
.insight-card {
  background: var(--surface); border-radius: var(--radius); padding: 16px;
  box-shadow: inset 0 0 0 1px var(--border);
  border-top: 3px solid var(--muted);
}
.insight-card.instagram { border-top-color: var(--instagram); }
.insight-card.tiktok { border-top-color: var(--tiktok); }
.insight-card.youtube { border-top-color: var(--youtube); }
.insight-card.total { border-top-color: var(--accent); background: var(--bg-deep); }

.insight-card header {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--muted);
}
.insight-figure {
  font-size: 30px; font-weight: 700; color: var(--text-strong);
  margin-top: 6px; font-variant-numeric: tabular-nums; line-height: 1;
}
.insight-label { font-size: 12px; color: var(--muted); margin-top: 2px; }

.insight-rows { margin: 12px 0 0; display: flex; flex-direction: column; gap: 4px; }
.insight-rows > div { display: flex; justify-content: space-between; gap: 10px; }
.insight-rows dt { font-size: 12px; color: var(--muted); }
.insight-rows dd {
  margin: 0; font-size: 12px; font-weight: 600; color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}

.insight-block h3 { margin: 0 0 2px; font-size: 15px; color: var(--text-strong); }
.insight-hint { margin: 0 0 10px; font-size: 12px; color: var(--muted); line-height: 1.5; }

.insight-posts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.insight-post {
  display: grid; grid-template-columns: 28px 1fr auto auto;
  gap: 10px; align-items: center;
  padding: 8px 11px; border-radius: var(--radius-sm); background: var(--surface);
  font-size: 13px;
}
.post-net {
  font-size: 10px; font-weight: 700; text-align: center;
  padding: 2px 0; border-radius: 4px; color: var(--text-strong);
}
.post-net.instagram { background: var(--instagram-soft); color: #f39ec0; }
.post-net.tiktok { background: var(--tiktok-soft); color: #7ed2ee; }
.post-net.youtube { background: var(--youtube-soft); color: #ef8f93; }
.post-title {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--text-strong);
}
.post-when { font-size: 12px; color: var(--muted); white-space: nowrap; }
.post-views {
  font-weight: 700; font-variant-numeric: tabular-nums; color: #5fd894;
  min-width: 52px; text-align: right;
}

/* Each tag with what it averaged, so the ranking carries its own evidence. */
.tag-rank { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-chip {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 5px 10px; border-radius: 999px;
  background: var(--surface); font-size: 13px; color: #a5b0ff;
  box-shadow: inset 0 0 0 1px var(--border); cursor: default;
}
.tag-chip b { color: var(--text-strong); font-variant-numeric: tabular-nums; font-size: 12px; }

.empty.small { padding: 16px; font-size: 13px; }

@media (max-width: 720px) {
  .insights-head, .insights-body { padding-left: 12px; padding-right: 12px; }
  .insight-post { grid-template-columns: 24px 1fr auto; }
  .insight-post .post-when { display: none; }
}

/* A card is a way in, not just a readout. */
button.insight-card {
  text-align: left; cursor: pointer; font: inherit; color: inherit;
  width: 100%;
}
button.insight-card:hover { background: var(--surface-2); }
button.insight-card.total { cursor: default; }

.insight-rows dd.unknown { color: var(--muted); font-weight: 400; font-style: italic; }
.insight-note {
  margin: 10px 0 0; font-size: 11px; color: var(--muted); line-height: 1.5;
}

.network-head { display: flex; align-items: center; gap: 12px; }
.network-head h3 { margin: 0; font-size: 18px; color: var(--text-strong); }
.network-head.instagram h3 { color: var(--instagram); }
.network-head.tiktok h3 { color: var(--tiktok); }
.network-head.youtube h3 { color: var(--youtube); }

/* A video opens to show the rest of what is known about it. */
.insight-post-wrap { list-style: none; }
button.insight-post {
  width: 100%; text-align: left; font: inherit; color: inherit;
  cursor: pointer; border: none;
}
button.insight-post:hover { background: var(--surface-2); }
button.insight-post.open { border-radius: var(--radius-sm) var(--radius-sm) 0 0; }

.post-detail {
  padding: 10px 14px 12px; margin-bottom: 4px;
  background: var(--bg-deep); border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}
.post-detail[hidden] { display: none; }
.detail-rows { margin: 0; display: flex; flex-wrap: wrap; gap: 8px 26px; }
.detail-rows > div { display: flex; flex-direction: column; }
.detail-rows dt { font-size: 11px; color: var(--muted); }
.detail-rows dd {
  margin: 0; font-size: 14px; font-weight: 600; color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}
/* Likes and comments against views: the share is what compares across videos. */
.detail-rows .rate { font-size: 11px; font-weight: 400; color: var(--muted); }
.detail-text {
  margin: 10px 0 0; font-size: 12px; color: var(--text); line-height: 1.5;
  white-space: pre-wrap;
}
.detail-link {
  display: inline-block; margin-top: 10px; font-size: 12px;
  color: #a5b0ff; text-decoration: none;
}
.detail-link:hover { text-decoration: underline; }

/*
 * Which networks the two lists are about. Ticks rather than a drop-down: all
 * three states are visible at once, and turning one off is a single press.
 */
.insight-block-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.insight-block-head h3 { margin: 0; }
.insight-filter { display: flex; gap: 6px; flex-wrap: wrap; }
.insight-tick {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px; cursor: pointer;
  font-size: 12px; color: var(--muted);
  border: 1px solid var(--line);
  background: transparent;
  transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.insight-tick input { accent-color: var(--net); margin: 0; }
.insight-tick.instagram { --net: var(--instagram); }
.insight-tick.tiktok { --net: var(--tiktok); }
.insight-tick.youtube { --net: var(--youtube); }
.insight-tick.on {
  color: var(--text-strong);
  border-color: color-mix(in srgb, var(--net) 55%, transparent);
  background: color-mix(in srgb, var(--net) 14%, transparent);
}

/* On a phone the ticks sit under the heading rather than squeezing it. */
@media (max-width: 720px) {
  .insight-block-head { align-items: flex-start; flex-direction: column; gap: 8px; }
  .insight-filter { width: 100%; }
  /* A thumb, not a mouse pointer: 40px is the smallest comfortable target. */
  .insight-tick { flex: 1 1 auto; justify-content: center; padding: 10px 8px; min-height: 40px; }
}

/* The hint on the left, the sort on the right. */
.insight-block-sub {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.insight-block-sub .insight-hint { flex: 1 1 320px; margin: 0; }
.insight-order {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--muted); flex: none;
}
.insight-order select { padding: 4px 8px; font-size: 12px; }

@media (max-width: 720px) {
  .insight-block-sub { flex-direction: column; gap: 8px; }
  .insight-order { width: 100%; }
  .insight-order select { flex: 1; min-height: 36px; }
}

/* 30, 60 or 90 days — the same window for every figure on the tab. */
.insight-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.insight-period { margin: 0; font-size: 15px; color: var(--text-strong); }
.insight-window {
  display: inline-flex; border-radius: 999px; overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--border);
}
.insight-window button {
  padding: 5px 14px; font-size: 12px; border-radius: 0;
  background: transparent; color: var(--muted); cursor: pointer;
}
.insight-window button:hover { color: var(--text-strong); }
.insight-window button.on { background: var(--accent); color: #fff; }

@media (max-width: 720px) {
  .insight-top { flex-direction: column; align-items: stretch; gap: 8px; }
  .insight-window { width: 100%; }
  .insight-window button { flex: 1; min-height: 40px; }
}

/* The trials block carries the same yellow trials wear everywhere else in the
   app, so the eye finds it without reading the heading. */
.insight-block.trials {
  border-left: 3px solid var(--warning);
  padding-left: 12px;
}

/* A trial reel, wherever it turns up. */
/*
 * Always in the row, empty when the video is not a trial — a grid with a column
 * that sometimes has nothing in it shifts everything after it along by one.
 */
.trial-tag {
  padding: 1px 7px; border-radius: 999px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.03em;
  background: var(--instagram-soft); color: #f39ec0;
}
.trial-tag.none { padding: 0; background: none; }
.insight-post { grid-template-columns: 28px 1fr auto auto auto; }
@media (max-width: 720px) {
  .insight-post { grid-template-columns: 24px 1fr auto auto; }
}

/* Hoe ver de cijfers reiken, als dat minder is dan het venster dat je vroeg. */
.stale-note {
  border: 1px solid var(--line);
  border-left: 3px solid var(--warn, #e8b931);
  border-radius: var(--radius-sm);
  padding: 8px 10px; margin-bottom: 10px; font-size: 12px;
}
.stale-note b { text-transform: capitalize; }
.stale-why { color: var(--muted); font-size: 11px; margin-top: 4px; }

/* Volgersgroei: het teken doet het werk, dus dat krijgt de kleur. */
.growth.up { color: var(--good, #4ac26b); }
.growth.down { color: var(--danger, #e5484d); }
.growth.flat { color: var(--muted); }
.growth-share { font-size: 11px; opacity: 0.75; }
.growth-short { font-size: 10px; color: var(--muted); font-style: italic; }

/*
 * De geposte video's, verhuisd van Schedule naar hier.
 *
 * Daar ging het tussen het plannen staan; hier hoort het, bij de cijfers.
 */
.gepost-lijst { display: flex; flex-direction: column; gap: 4px; }
.gepost-rij {
  display: grid; gap: 10px; align-items: center; text-align: left;
  grid-template-columns: 1fr auto auto auto auto;
  background: var(--surface-2); border-radius: var(--radius-sm);
  padding: 7px 10px; font-size: 12px; width: 100%;
}
.gepost-rij:hover { background: var(--surface-3); }
.gepost-rij.is-trial { box-shadow: inset 3px 0 0 var(--warning); }
.gepost-naam { color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gepost-tag, .gepost-net, .gepost-dag { color: var(--muted); font-size: 11px; white-space: nowrap; }
.gepost-views { font-variant-numeric: tabular-nums; color: var(--text-strong); white-space: nowrap; }
.gepost-views.won { color: #5fd894; font-weight: 700; }
@media (max-width: 760px) {
  .gepost-rij { grid-template-columns: 1fr auto; }
  .gepost-tag, .gepost-net { display: none; }
}

.gepost-open {
  background: var(--surface-2); color: var(--text-strong);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 7px 13px; font-size: 12px; cursor: pointer; align-self: flex-start;
}
.gepost-open:hover { border-color: var(--accent); }