/* Inzicht-pagina (/insights) — stijl volgt de goedgekeurde mockup
   curr/plans/nl-map/insights-powerhouse-v2.html. Alle klassen dragen de ins-prefix;
   de SVG-klassen (prov/dot/base/plbl) komen uit de gedeelde C#-kaartbouwer en zijn
   daarom bewust prefixloos, maar altijd gescoped onder een ins-container. */

.ins-wrap { max-width: 1340px; margin: 0 auto; padding: 0 22px 90px; color: rgba(255,255,255,0.9); }
.ins-wrap { --ins-primary: #F5A623; --ins-primary-rgb: 245,166,35; --ins-good: #6EE7B7; --ins-bad: #F87171; }

/* ── Paginakop ── */
.ins-head { display: flex; align-items: flex-start; gap: 14px; margin: 0 0 12px; }
.ins-head h1 { font-size: 1.3rem; font-weight: 700; margin: 0; display: flex; align-items: center; gap: 10px; }
.ins-head .ins-sub { font-size: 0.76rem; color: rgba(255,255,255,0.4); margin-top: 3px; max-width: 640px; line-height: 1.5; }
.ins-head .ins-acts { margin-left: auto; display: flex; gap: 8px; flex-shrink: 0; flex-wrap: wrap; }
.ins-demo-badge { font-size: 0.56rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: #8BD8FF; background: rgba(56,189,248,0.10); border: 1px solid rgba(56,189,248,0.35);
  border-radius: 5px; padding: 3px 8px; display: inline-flex; align-items: center; gap: 5px; }

.ins-btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 9px;
  font-size: 0.78rem; font-weight: 600; cursor: pointer; border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.8); white-space: nowrap; user-select: none; }
.ins-btn:hover { border-color: rgba(255,255,255,0.28); color: #fff; }
.ins-btn.ins-primary { background: var(--ins-primary); border-color: var(--ins-primary); color: #14140f; }
.ins-btn.ins-primary:hover { filter: brightness(1.07); color: #14140f; }
.ins-btn i { font-size: 12px; }
.ins-btn.ins-big { padding: 11px 18px; font-size: 0.84rem; border-radius: 11px; }

/* ── Filterbalk ── */
/* Alles wat je altijd nodig hebt zit in één band die bovenaan blijft hangen: de kop met de drie
   knoppen en de filters. De inhoud eronder schuift erlangs. De band loopt door tot buiten de
   paginamarge, zodat er niets zichtbaar naast de ronde hoeken langsgaat. De bovenvulling zit op de
   band en niet als marge op de kop, want een marge zou door de bovenrand heen vallen en daar een
   doorschijnende strook laten. Onderaan zit om dezelfde reden vulling in plaats van een marge op de
   balk: zo loopt de dekking een paar pixels door voorbij de rand en gaat de schaduw daar vloeiend in
   over, in plaats van dat het beeld pal onder de balk wordt afgekapt. */
.ins-barwrap { position: sticky; top: var(--mud-appbar-height, 64px); z-index: 20;
  margin: 0 -22px 16px; padding: 16px 22px 8px;
  background: var(--mud-palette-background, #121214);
  border-radius: 0 0 15px 15px;
  box-shadow: 0 12px 26px rgba(0,0,0,0.45);
  transition: background-color .12s, box-shadow .12s; }

/* Bovenaan de pagina hoort de band er gewoon te staan, zonder strook of rand eromheen: dan valt
   de dekking en de schaduw weg. Dekkend is bewust de uitgangsstand en niet de uitzondering; komt
   de melding niet aan omdat de verbinding hapert, dan blijft de pagina leesbaar in plaats van dat
   de inhoud dwars door de band heen schuift. Vastzitten is niet in stijl te bevragen, dus een
   peiler vlak boven de band meldt of we nog bovenaan staan. */
.ins-barwrap.ins-at-top { background: transparent; box-shadow: none; }
.ins-stick-probe { height: 1px; margin-bottom: -1px; }

.ins-bar { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 13px;
  padding: 11px 14px; display: flex; flex-direction: column; gap: 9px; }
.ins-bar .ins-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.ins-lb { font-size: 0.6rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.4); }
.ins-select { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.9); border-radius: 8px; outline: none; font-family: inherit; font-size: 0.72rem;
  height: 28px; padding: 2px 7px; }

.ins-pill { padding: 4px 11px; border-radius: 999px; font-size: 0.7rem; font-weight: 600; cursor: pointer;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.10); color: rgba(255,255,255,0.6);
  user-select: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; }
.ins-pill:hover { border-color: rgba(255,255,255,0.24); color: rgba(255,255,255,0.9); }
.ins-pill.ins-on { background: rgba(var(--ins-primary-rgb),0.16); border-color: rgba(var(--ins-primary-rgb),0.5); color: #fff; }
.ins-pill i { font-size: 10px; }
.ins-sep { width: 1px; height: 18px; background: rgba(255,255,255,0.10); margin: 0 3px; }

/* Soort-chips: identiteit = pictogram + naam; het kleuraccent is ondersteuning. */
.ins-tag { padding: 4px 11px 4px 8px; border-radius: 999px; font-size: 0.7rem; font-weight: 600; cursor: pointer;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.10); color: rgba(255,255,255,0.62);
  user-select: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.ins-tag i { font-size: 10px; width: 13px; text-align: center; }
.ins-tag:hover { border-color: rgba(255,255,255,0.26); color: rgba(255,255,255,0.9); }
.ins-tag.ins-on { color: #fff; background: var(--ins-tag-bg, rgba(255,255,255,0.08)); border-color: var(--ins-tag-bd, rgba(255,255,255,0.35)); }
.ins-tag .ins-n { font-size: 0.6rem; color: rgba(255,255,255,0.3); font-variant-numeric: tabular-nums; }
.ins-tag.ins-on .ins-n { color: rgba(255,255,255,0.55); }
.ins-scopeline { font-size: 0.68rem; color: rgba(255,255,255,0.4); }
.ins-scopeline b { color: rgba(255,255,255,0.8); }

/* ── Secties en kaarten ── */
.ins-sec { display: flex; align-items: center; gap: 9px; margin: 30px 0 13px; }
.ins-sec .ins-t { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: rgba(255,255,255,0.4); }
.ins-sec .ins-rule { flex: 1; height: 1px; background: rgba(255,255,255,0.08); }
.ins-sec .ins-share { font-size: 0.58rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--ins-good); border: 1px solid rgba(110,231,183,0.3); border-radius: 4px; padding: 1px 6px; }
.ins-sec .ins-intern { font-size: 0.58rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
  color: rgba(255,255,255,0.3); border: 1px solid rgba(255,255,255,0.12); border-radius: 4px; padding: 1px 6px; }
.ins-sec .ins-note { font-size: 0.66rem; color: rgba(255,255,255,0.3); }

.ins-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 16px 18px; }
.ins-card-t { font-size: 0.92rem; font-weight: 700; color: rgba(255,255,255,0.9); }
.ins-card-s { font-size: 0.71rem; color: rgba(255,255,255,0.4); margin-top: 2px; line-height: 1.45; }
.ins-cols { display: flex; gap: 16px; flex-wrap: wrap; }

/* Kop van de kaart "Waar het werk zit": de titel met daaronder de keuzerijen, elk op een eigen
   regel en links uitgelijnd. Naast de titel gezet verspringt de balk zodra de lagen niet meer
   naast de tekst passen, en dan staan de twee rijen ook niet meer onder elkaar. */
.ins-map-head { display: flex; flex-direction: column; gap: 10px; }
.ins-map-pills { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

/* Een keuzerij die de gekozen laag niet kan bedienen blijft staan, maar gedempt en zonder
   klikbaarheid. Zo verspringt de balk niet en blijft zichtbaar wat er te kiezen valt. */
.ins-map-pills.ins-pills-off { opacity: 0.4; pointer-events: none; }
.ins-pills-why { font-size: 0.64rem; color: rgba(255,255,255,0.45); margin-left: 4px; }
.ins-ex-rows { display: flex; flex-direction: column; gap: 7px; padding: 0 14px 10px; }

/* ── Momenten-rail ── */
/* De rail schuift horizontaal binnen een venster met vaste breedte. Een vast aantal kolommen per
   beeld houdt de kaartjes even groot, ook als er momenten bijkomen. */
.ins-rail { display: flex; align-items: stretch; gap: 8px; }
.ins-rail-track { flex: 1; overflow: hidden; }
.ins-rail-nav { flex: 0 0 30px; display: flex; align-items: center; justify-content: center; cursor: pointer;
  border: 1px solid rgba(255,255,255,0.10); border-radius: 10px; background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.55); user-select: none; }
.ins-rail-nav:hover { border-color: rgba(255,255,255,0.28); color: #fff; }
.ins-rail-nav.ins-rail-off { opacity: 0.25; pointer-events: none; }
.ins-rail-pos { font-size: 0.64rem; color: rgba(255,255,255,0.3); margin-top: 7px; text-align: right; }
.ins-moments { display: grid; grid-auto-flow: column; grid-auto-columns: calc(25% - 9px); gap: 12px;
  transition: transform .18s ease; }
.ins-mo { position: relative; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 13px; padding: 13px 14px 12px; cursor: pointer; transition: transform .12s, border-color .12s;
  display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.ins-mo:hover { transform: translateY(-2px); border-color: rgba(255,255,255,0.22); }
.ins-mo .ins-ic { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center;
  font-size: 14px; flex-shrink: 0; background: rgba(var(--ins-primary-rgb),0.13); }
.ins-mo .ins-mt { font-size: 0.8rem; font-weight: 800; line-height: 1.25; color: rgba(255,255,255,0.92); }
.ins-mo .ins-ms { font-size: 0.66rem; color: rgba(255,255,255,0.4); line-height: 1.4; }
.ins-mo .ins-cta { margin-top: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 0.66rem; font-weight: 700; color: var(--ins-primary); }
.ins-mo.ins-fresh { border-color: rgba(var(--ins-primary-rgb),0.55);
  box-shadow: 0 0 0 1px rgba(var(--ins-primary-rgb),0.25), 0 8px 34px rgba(var(--ins-primary-rgb),0.10); }
.ins-mo .ins-nieuw { position: absolute; top: 10px; right: 10px; font-size: 0.54rem; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: #14140f; background: var(--ins-primary); border-radius: 4px; padding: 2px 6px; }
.ins-mo .ins-stat { font-size: 1.45rem; font-weight: 900; }

/* ── Deelstudio ── */
.ins-studio { display: flex; gap: 22px; flex-wrap: wrap; align-items: flex-start; }
.ins-stage { flex: 1; min-width: 520px; border-radius: 16px; padding: 26px; position: relative;
  background: radial-gradient(640px 320px at 32% 12%, rgba(var(--ins-primary-rgb),0.09), transparent 70%), rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center; min-height: 430px; }
.ins-stage .ins-hint { position: absolute; top: 13px; left: 17px; font-size: 0.62rem; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.3); }
.ins-stage .ins-wys { position: absolute; bottom: 12px; left: 17px; right: 17px; font-size: 0.64rem; color: rgba(255,255,255,0.3); }
.ins-stage-r { width: 300px; display: flex; flex-direction: column; gap: 15px; flex-shrink: 0; }
.ins-ctl-l { font-size: 0.6rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(255,255,255,0.4); margin-bottom: 7px; }
.ins-opts { display: flex; gap: 6px; flex-wrap: wrap; }
.ins-fmt { display: flex; align-items: center; gap: 9px; padding: 8px 11px; border-radius: 9px; cursor: pointer;
  border: 1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.03); }
.ins-fmt:hover { border-color: rgba(255,255,255,0.25); }
.ins-fmt.ins-on { border-color: rgba(var(--ins-primary-rgb),0.55); background: rgba(var(--ins-primary-rgb),0.10); }
.ins-fmt .ins-box { border: 2px solid rgba(255,255,255,0.35); border-radius: 2px; flex-shrink: 0; }
.ins-fmt.ins-on .ins-box { border-color: var(--ins-primary); }
.ins-fmt .ins-nm { font-size: 0.7rem; font-weight: 700; color: rgba(255,255,255,0.88); white-space: nowrap; }
.ins-fmt .ins-px { font-size: 0.58rem; color: rgba(255,255,255,0.4); white-space: nowrap; }

/* De plaat zelf (het exportbeeld, ook de schermvoorvertoning) */
.ins-shot { border: 1px solid rgba(255,255,255,0.10); border-radius: 14px; overflow: hidden; position: relative;
  display: flex; flex-direction: column; isolation: isolate; background: #101013; box-shadow: 0 18px 60px rgba(0,0,0,0.5); }
.ins-shot.ins-light { background: #f7f7f5; border-color: rgba(0,0,0,0.08); }
.ins-shot .ins-wm-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
/* De inhoud van de merklaag komt uit de gedeelde bouwer, dus hier alleen de laag zelf. */
.ins-shot .ins-wm-layer { user-select: none; }
.ins-shot .ins-fg { position: relative; z-index: 1; display: flex; flex-direction: column; height: 100%; }
.ins-shot .ins-sh { padding: 17px 19px 0; display: flex; align-items: flex-start; gap: 10px; }
.ins-shot .ins-st { font-size: 1.05rem; font-weight: 800; line-height: 1.22; }
.ins-shot .ins-sp { font-size: 0.68rem; margin-top: 3px; }
.ins-shot .ins-badge { margin-left: auto; flex-shrink: 0; font-size: 0.56rem; font-weight: 800; letter-spacing: 0.07em;
  text-transform: uppercase; border-radius: 5px; padding: 3px 8px; }
.ins-shot .ins-body { display: flex; gap: 15px; padding: 10px 19px; flex: 1; align-items: center; min-height: 0; }
.ins-shot .ins-nums { display: flex; flex-direction: column; gap: 9px; flex: 1; min-width: 0; }
.ins-shot .ins-v { font-size: 1.6rem; font-weight: 900; line-height: 1; letter-spacing: -0.01em; }
.ins-shot .ins-v.ins-hero { font-size: 2.1rem; }
.ins-shot .ins-l { font-size: 0.62rem; margin-top: 3px; }
.ins-shot .ins-cr { display: flex; align-items: center; gap: 9px; padding: 10px 19px 13px; border-top: 1px solid rgba(255,255,255,0.07); }
.ins-shot.ins-light .ins-cr { border-top-color: rgba(0,0,0,0.10); }
.ins-shot .ins-lo { width: 26px; height: 26px; border-radius: 7px; display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; flex-shrink: 0; }
.ins-shot .ins-co { font-size: 0.72rem; font-weight: 700; }
.ins-shot .ins-cr1 { margin-left: auto; font-size: 0.61rem; text-align: right; line-height: 1.35; }
.ins-shot .ins-cr1 b { font-family: 'Roboto', sans-serif; font-weight: 900; letter-spacing: 0.04em; }
.ins-mini-months { display: flex; align-items: flex-end; gap: 3px; height: 54px; margin-top: 8px; }
.ins-mini-months .ins-mb { flex: 1; border-radius: 2px 2px 0 0; min-height: 3px; }

/* ── Cijfertegels ── */
.ins-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.ins-kpi { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-radius: 12px; padding: 13px 15px; }
.ins-kpi .ins-lbl { font-size: 0.6rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.4); }
.ins-kpi .ins-val { font-size: 1.55rem; font-weight: 800; line-height: 1.1; margin-top: 4px; color: #fff; }
.ins-kpi .ins-sub { font-size: 0.66rem; color: rgba(255,255,255,0.4); margin-top: 3px; line-height: 1.35; }
.ins-kpi .ins-delta { display: inline-flex; align-items: center; gap: 4px; font-size: 0.66rem; font-weight: 700; margin-top: 5px; }
.ins-kpi .ins-delta.ins-up { color: var(--ins-good); }
.ins-kpi .ins-delta.ins-down { color: var(--ins-bad); }

/* ── Kaart (gedeelde SVG-klassen uit de C#-bouwer) ── */
.ins-fig { position: relative; }
.ins-fig svg, .ins-ex-canvas svg { display: block; max-width: 100%; }
.ins-wrap .prov, .ins-ex-canvas .prov { stroke: rgba(255,255,255,0.12); stroke-width: 0.8; transition: filter .12s; }
.ins-wrap .prov:hover, .ins-ex-canvas .prov:hover { filter: brightness(1.25); }
.ins-wrap .prov.nd, .ins-ex-canvas .prov.nd { stroke-dasharray: 3 3; }
.ins-wrap .prov.hl, .ins-ex-canvas .prov.hl { stroke: rgba(255,255,255,0.9); stroke-width: 1.6; }
.ins-wrap .prov.opp, .ins-ex-canvas .prov.opp { stroke: var(--ins-primary); stroke-width: 1.4; stroke-dasharray: 5 3; }
.ins-wrap .dot, .ins-ex-canvas .dot { stroke: #17181a; stroke-width: 2; }
.ins-wrap .base, .ins-ex-canvas .base { fill: none; stroke: rgba(255,255,255,0.85); stroke-width: 2; }
.ins-ex-canvas .plbl { fill: rgba(255,255,255,0.85); font-weight: 700; paint-order: stroke; stroke: rgba(10,10,12,0.85); stroke-width: 2.6px; }
.ins-ex-canvas .plbl2 { fill: rgba(255,255,255,0.55); font-weight: 600; paint-order: stroke; stroke: rgba(10,10,12,0.85); stroke-width: 2.4px; }

.ins-lg { display: flex; align-items: center; gap: 7px; font-size: 0.66rem; color: rgba(255,255,255,0.4); flex-wrap: wrap; margin-top: 9px; }
.ins-lg-steps { display: flex; gap: 2px; }
.ins-lg-sw { width: 20px; height: 9px; border-radius: 2px; display: inline-block; }
.ins-lg-dot { border-radius: 50%; display: inline-block; }
.ins-lg-item { display: inline-flex; align-items: center; gap: 5px; }
.ins-tip { position: absolute; pointer-events: none; opacity: 0; transition: opacity .1s; z-index: 40; background: #17181a;
  border: 1px solid rgba(255,255,255,0.14); border-radius: 7px; padding: 6px 9px; font-size: 0.69rem; line-height: 1.45;
  color: rgba(255,255,255,0.88); box-shadow: 0 6px 18px rgba(0,0,0,0.55); white-space: nowrap; }
.ins-tip.ins-show { opacity: 1; }

.ins-side-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ins-table { width: 100%; border-collapse: collapse; margin-top: 7px; font-size: 0.71rem; color: rgba(255,255,255,0.4); }
.ins-table td { padding: 3px 5px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.ins-table td:last-child { text-align: right; color: rgba(255,255,255,0.75); font-variant-numeric: tabular-nums; }

.ins-opp-list { display: flex; flex-direction: column; gap: 8px; }
.ins-opp-row { display: flex; gap: 10px; align-items: flex-start; background: rgba(var(--ins-primary-rgb),0.05);
  border: 1px solid rgba(var(--ins-primary-rgb),0.22); border-radius: 10px; padding: 9px 12px; font-size: 0.71rem; line-height: 1.5; }
.ins-opp-row i { color: var(--ins-primary); margin-top: 2px; font-size: 11px; }
.ins-opp-row b { color: rgba(255,255,255,0.88); }
.ins-opp-row.ins-muted { border-color: rgba(255,255,255,0.1); background: rgba(255,255,255,0.02); }
.ins-opp-row.ins-muted i { color: rgba(255,255,255,0.4); }

.ins-pcol { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 11px; }
.ins-pchip { font-size: 0.62rem; font-weight: 700; border-radius: 999px; padding: 3px 9px;
  border: 1px solid rgba(255,255,255,0.10); color: rgba(255,255,255,0.3); background: rgba(255,255,255,0.02); }
.ins-pchip.ins-won { color: #14140f; background: var(--ins-primary); border-color: var(--ins-primary); }
.ins-pcol .ins-cnt { font-size: 0.68rem; font-weight: 800; color: rgba(255,255,255,0.85); margin-right: 3px; }

/* ── Werk per soort ── */
.ins-sm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.ins-sm { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-radius: 10px; padding: 9px; }
.ins-sm.ins-clickable { cursor: pointer; }
.ins-sm.ins-clickable:hover { border-color: rgba(255,255,255,0.2); }
.ins-sm.ins-agg { grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column; }
.ins-sm .ins-nm { display: flex; align-items: center; gap: 5px; font-size: 0.69rem; font-weight: 700; color: rgba(255,255,255,0.82); }
.ins-sm .ins-ct { font-size: 0.62rem; color: rgba(255,255,255,0.4); margin-top: 3px; }

/* ── Vergelijken ── */
.ins-cmp { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start; margin-top: 13px; }
.ins-cmp .ins-yr { flex: 0 0 auto; text-align: center; }
.ins-cmp .ins-y { font-size: 0.72rem; font-weight: 800; color: rgba(255,255,255,0.55); margin-bottom: 6px; }
.ins-cmp .ins-deltas { flex: 1; min-width: 250px; display: flex; flex-direction: column; gap: 9px; }
.ins-dl-item { display: flex; align-items: center; gap: 9px; font-size: 0.73rem; color: rgba(255,255,255,0.8);
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-radius: 9px; padding: 8px 12px; }
.ins-dl-item .ins-d { margin-left: auto; font-weight: 800; }
.ins-dl-item .ins-d.ins-up { color: var(--ins-good); }
.ins-dl-item .ins-d.ins-down { color: var(--ins-bad); }

/* ── Geld, trechter, kanalen ── */
.ins-bars { display: flex; align-items: flex-end; gap: 6px; height: 150px; margin-top: 6px; }
.ins-bcol { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 2px; height: 100%; }
.ins-bcol .ins-stk { width: 62%; display: flex; flex-direction: column-reverse; height: 100%; justify-content: flex-start;
  border-radius: 4px 4px 0 0; overflow: hidden; gap: 2px; }
.ins-bcol .ins-paid { min-height: 2px; }
.ins-bcol .ins-open { background: repeating-linear-gradient(135deg, rgba(255,255,255,0.14) 0 3px, rgba(255,255,255,0.04) 3px 6px); }
.ins-bcol .ins-m { font-size: 0.56rem; color: rgba(255,255,255,0.3); margin-top: 3px; }
.ins-bcol .ins-tv { font-size: 0.56rem; color: rgba(255,255,255,0.4); font-variant-numeric: tabular-nums; }
.ins-paystat .ins-v { font-size: 1.3rem; font-weight: 800; }
.ins-paystat .ins-l { font-size: 0.66rem; color: rgba(255,255,255,0.4); margin-top: 1px; }
.ins-funnel { display: flex; flex-direction: column; gap: 7px; margin-top: 12px; }
.ins-fstep { display: flex; align-items: center; gap: 11px; }
.ins-fstep .ins-nm { width: 118px; font-size: 0.73rem; color: rgba(255,255,255,0.8); flex-shrink: 0; }
.ins-fstep .ins-track { flex: 1; height: 26px; background: rgba(255,255,255,0.03); border-radius: 6px; overflow: hidden; }
.ins-fstep .ins-fill { height: 100%; border-radius: 6px; display: flex; align-items: center; padding: 0 9px;
  font-size: 0.7rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.ins-fstep .ins-days { width: 130px; text-align: right; font-size: 0.68rem; color: rgba(255,255,255,0.4); flex-shrink: 0; }
.ins-chan { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.ins-crow { display: flex; align-items: center; gap: 10px; }
.ins-crow .ins-nm { width: 126px; font-size: 0.73rem; color: rgba(255,255,255,0.8); flex-shrink: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ins-crow .ins-track { flex: 1; height: 9px; background: rgba(255,255,255,0.04); border-radius: 5px; overflow: hidden; }
.ins-crow .ins-fill { height: 100%; border-radius: 5px; }
.ins-crow .ins-v { width: 92px; text-align: right; font-size: 0.71rem; font-variant-numeric: tabular-nums; color: rgba(255,255,255,0.85); }
.ins-crow .ins-c { width: 96px; text-align: right; font-size: 0.68rem; color: rgba(255,255,255,0.4); }

/* ── Verkennen (fullscreen overlay, geportald door PortalDialogBase) ── */
.ins-ex-root { position: fixed; inset: 0; z-index: 1400; background: #0b0b0d; display: flex; flex-direction: column; }
.ins-ex-top { display: flex; align-items: center; gap: 10px; padding: 13px 20px; border-bottom: 1px solid rgba(255,255,255,0.09); flex-wrap: wrap; flex-shrink: 0; }
.ins-ex-top .ins-tt { font-size: 0.95rem; font-weight: 800; color: #fff; }
.ins-ex-tags { display: flex; align-items: center; gap: 6px; padding: 0 20px 11px; flex-wrap: wrap; border-bottom: 1px solid rgba(255,255,255,0.09); }
.ins-ex-canvas { flex: 1; position: relative; overflow: hidden; cursor: grab; touch-action: none; }
.ins-ex-canvas.ins-drag { cursor: grabbing; }
.ins-ex-canvas svg { width: 100%; height: 100%; }
.ins-zoomctl { position: absolute; right: 18px; top: 18px; display: flex; flex-direction: column; gap: 6px; z-index: 5; }
.ins-zbtn { width: 34px; height: 34px; border-radius: 9px; background: #17181a; border: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.8); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 13px; }
.ins-zbtn:hover { border-color: rgba(255,255,255,0.3); color: #fff; }
/* Het merkteken op de verkenkaart: groot en nauwelijks aanwezig, de maat die de rest van de
   applicatie voor een merkteken op een werkscherm aanhoudt. Groot genoeg om op een schermafdruk
   te blijven staan, licht genoeg om de kaart eronder niet te hinderen. De letter komt uit de
   gedeelde merkbron, niet uit een kopie hier. */
.ins-ex-mark { position: absolute; right: 24px; bottom: 12px; z-index: 5; pointer-events: none;
  font-weight: 900; font-size: 3.25rem; line-height: 1; letter-spacing: 0.04em;
  text-transform: uppercase; user-select: none; color: rgba(255,255,255,0.05); }
.ins-ex-foot { position: absolute; left: 18px; bottom: 14px; font-size: 0.68rem; color: rgba(255,255,255,0.4); z-index: 5;
  background: rgba(16,16,19,0.82); border: 1px solid rgba(255,255,255,0.09); border-radius: 9px; padding: 7px 11px; max-width: 70%; }

/* ── Groot bekijken (presentatie-overlay) ── */
.ins-pr-root { position: fixed; inset: 0; z-index: 1400; background: #0c0c0f; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 64px 40px 72px; overflow: hidden; }
.ins-pr-close { position: absolute; top: 18px; right: 22px; }
.ins-pr-head { font-size: 1.5rem; font-weight: 900; margin-bottom: 4px; color: #fff; }
.ins-pr-sub { font-size: 0.85rem; color: rgba(255,255,255,0.4); }
.ins-pr-grid { display: flex; gap: 56px; align-items: center; flex-wrap: wrap; justify-content: center; }
.ins-pr-stats { display: flex; flex-direction: column; gap: 26px; }
.ins-pr-stat .ins-v { font-size: 3.4rem; font-weight: 900; line-height: 1; letter-spacing: -0.02em; }
.ins-pr-stat .ins-l { font-size: 0.82rem; color: rgba(255,255,255,0.4); margin-top: 6px; }
.ins-pr-foot { position: absolute; bottom: 22px; display: flex; align-items: center; gap: 10px; font-size: 0.78rem; color: rgba(255,255,255,0.4); }

/* ── Lege staat ── */
.ins-empty { text-align: center; padding: 40px 20px; color: rgba(255,255,255,0.5); font-size: 0.8rem; line-height: 1.6; }
.ins-empty i { font-size: 26px; color: rgba(255,255,255,0.25); display: block; margin-bottom: 10px; }

/* Groot bekijken: filterstrip, doorbladerbare platen en het merkraster erachter. Het raster ligt
   in een eigen laag onder de inhoud, net als op een gedeeld beeld: wie een foto van dit scherm
   maakt, draagt dezelfde herkomst mee. */
/* Het raster hangt op een negatieve laag: boven de eigen achtergrond van het scherm en onder alle
   inhoud. Een positieve laag met een tegenregel op de broertjes zou hun eigen positionering
   overschrijven, en dan schuiven de sluitknop en de voetregel uit hun hoek. */
.ins-pr-mark { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; }
.ins-pr-filters { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin: 10px 0 4px; }
.ins-pr-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 0.72rem;
  color: rgba(255,255,255,0.6); border: 1px solid rgba(255,255,255,0.12); border-radius: 999px;
  padding: 4px 12px; background: rgba(255,255,255,0.03); }
.ins-pr-chip i { font-size: 10px; opacity: 0.7; }
.ins-pr-slide { display: flex; align-items: center; justify-content: center; margin-top: 26px; min-height: 0; }
.ins-pr-nav { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.ins-pr-dot { font-size: 0.68rem; color: rgba(255,255,255,0.35); border: 1px solid rgba(255,255,255,0.10);
  border-radius: 999px; padding: 4px 12px; }
.ins-pr-dot.ins-on { color: #fff; border-color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.06); }
.ins-pr-list { display: flex; flex-direction: column; gap: 10px; min-width: 260px; }
.ins-pr-row { display: flex; justify-content: space-between; gap: 20px; font-size: 1.05rem;
  color: rgba(255,255,255,0.75); border-bottom: 1px solid rgba(255,255,255,0.07); padding-bottom: 8px; }
.ins-pr-bars { display: flex; flex-direction: column; gap: 13px; width: min(860px, 80vw); }
.ins-pr-bar { display: grid; grid-template-columns: 190px 1fr 70px; align-items: center; gap: 14px; font-size: 1rem; }
.ins-pr-bar .ins-nm { color: rgba(255,255,255,0.75); }
.ins-pr-bar .ins-track { height: 14px; border-radius: 999px; background: rgba(255,255,255,0.06); overflow: hidden; }
.ins-pr-bar .ins-fill { display: block; height: 100%; border-radius: 999px; }
.ins-pr-bar b { text-align: right; font-variant-numeric: tabular-nums; }