/* monitor/markt.css: noordt.co/market en alles eronder (redesign 24-10). Gepubliceerd als /market/assets/markt.css.
   Volgt de ontwerpregels van de live site (noordt.co, gelezen 24-10): dezelfde tokens op :root, dezelfde lichte
   redactiezone (.sec-light) tussen donkere boekensteunen (hero, contact, voet), dezelfde kop, voet, knoppen,
   labels en beweging. Lettertypes alleen via --font-display, --font-body en --font-mono: render.js zet die
   gelijk aan de live site, dus een sitebrede letterwissel komt hier vanzelf mee.
   Van richting 1 blijven de indeling, de kaart met druk per land en de zoekmachine; uitgedrukt in de tokens
   van de site. Kleur voor data is een eigen reeks uit het merkblauw (gevalideerd op het papier van de zone). */

/* ===== tokens: gelijk aan :root van noordt.co ===== */
:root {
  --ink: #0a0a0b; --ink-2: #111114; --ink-3: #1a1a1f;
  --paper: #f5f1e8; --paper-dim: #e8e3d6; --paper-muted: #a8a39a; --paper-faint: #575450;
  --line: rgba(245, 241, 232, 0.12); --line-strong: rgba(245, 241, 232, 0.28);
  --signal: #5b8def; --signal-deep: #1a367a; --signal-soft: #7d9be0;
  --radius: 2px; --ease: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Manrope", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --container: 1440px; --gutter: clamp(1.25rem, 4vw, 3rem);
  /* Alleen de markt: de datareeks (merkblauw, licht naar donker; monotone L, stappen >= 0,09, licht eind 2,1:1 op
     het papier van de lichte zone), land zonder rollen, en de hoogte van de vaste kop voor wat eronder plakt. */
  --ramp-1: #91aad6; --ramp-2: #6c8cc9; --ramp-3: #4c6db6; --ramp-4: #32509a; --ramp-5: #1f3677; --ramp-6: #122050;
  --map-zero: #e7e2d3; --nav-h: 76px;
}
/* De lichte redactiezone: dezelfde omslag als op de site, componenten lezen dezelfde variabelen. */
.sec-light {
  --ink: #f6f3ea; --ink-2: #efebdf; --ink-3: #e7e2d3; --paper: #16161a; --paper-dim: #3b3a36; --paper-muted: #6b665c;
  --paper-faint: #98917f; --line: rgba(22, 22, 26, .14); --line-strong: rgba(22, 22, 26, .3); --signal: #1a367a; --signal-soft: #31519b;
  --bone: #16161a; --muted: #6b665c;
  background: var(--ink); color: var(--paper);
}
.sec-light ::selection { background: #1a367a; color: #f5f1e8; }
.sec-light input, .sec-light textarea, .sec-light select { background: rgba(22, 22, 26, .05); color: var(--paper); border-color: var(--line-strong); }
.sec-light input:focus, .sec-light textarea:focus, .sec-light select:focus { border-color: var(--signal); }

/* ===== basis (de site) ===== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { margin: 0; background: var(--ink); color: var(--paper); font-family: var(--font-body); font-weight: 400; font-size: clamp(15px, 0.95vw + 0.5rem, 17px); line-height: 1.65; overflow-x: hidden; letter-spacing: -0.005em; }
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--signal); color: var(--ink); }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: var(--radius); }
.skip { position: absolute; left: -9999px; top: 0; background: var(--signal); color: var(--ink); padding: 0.75rem 1rem; font-weight: 600; z-index: 1000; }
.skip:focus { left: 1rem; top: 1rem; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1; background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"); opacity: 0.4; mix-blend-mode: overlay; }
body::after { content: ""; position: fixed; top: -20%; left: -10%; width: 60vw; height: 60vw; background: radial-gradient(circle at center, rgba(91, 141, 239, 0.08) 0%, transparent 55%); pointer-events: none; z-index: 0; filter: blur(40px); }
main, header, footer, section, nav { position: relative; z-index: 2; }
h1, h2, h3 { margin: 0; }
.display { font-family: var(--font-display); font-weight: 300; line-height: 0.96; letter-spacing: -0.035em; font-variation-settings: "opsz" 144; text-wrap: balance; }
.display em { font-style: italic; font-weight: 300; color: var(--paper-dim); }
.eyebrow { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--signal); display: inline-flex; align-items: center; gap: 0.6rem; }
.eyebrow::before { content: ""; width: 18px; height: 1px; background: var(--signal); }
.lede { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.15rem, 1.1vw + 0.9rem, 1.5rem); line-height: 1.45; color: var(--paper-dim); letter-spacing: -0.01em; }
.wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
/* Het ritme van de site geldt voor de secties van de pagina, niet voor de groepen in de rollenlijst. */
main > section { padding: clamp(4rem, 8vw, 7rem) 0; }
p { text-wrap: pretty; }
[hidden] { display: none !important; }
.nc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.mono { font-family: var(--font-mono); }

/* ===== kop (de site) ===== */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding: 1.25rem 0; background: rgba(10, 10, 11, 0.7); backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px); border-bottom: 1px solid var(--line); transition: padding 0.4s var(--ease); }
.nav.scrolled { padding: 0.85rem 0; }
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; max-width: 1440px; margin: 0 auto; padding: 0 var(--gutter); }
.logo { display: inline-flex; align-items: center; gap: 0.75rem; font-family: var(--font-display); font-size: 1.15rem; font-weight: 400; letter-spacing: -0.01em; color: var(--paper); }
.logo-mark { width: 42px; height: 22px; display: inline-flex; align-items: center; }
.logo-mark svg { width: 100%; height: 100%; display: block; }
.logo-sub { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--paper-muted); padding-left: 0.75rem; border-left: 1px solid var(--line-strong); margin-left: 0.25rem; }
.nav-links { display: flex; gap: 2.5rem; align-items: center; list-style: none; margin: 0; padding: 0; }
.nav-links a { font-size: 0.88rem; color: var(--paper-dim); transition: color 0.3s var(--ease); position: relative; }
.nav-links a:hover, .nav-links a[aria-current="page"], .nav-links a[aria-current="true"] { color: var(--paper); }
.nav-links a[aria-current="page"]::after, .nav-links a[aria-current="true"]::after { content: ""; position: absolute; left: 0; bottom: -6px; width: 100%; height: 1px; background: var(--signal); }
.nav-cta { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.75rem 1.25rem; border: 1px solid var(--line-strong); color: var(--paper); transition: all 0.3s var(--ease); display: inline-flex; align-items: center; gap: 0.5rem; }
.nav-cta:hover { border-color: var(--signal); color: var(--signal); transform: translateY(-1px); }
.nav-toggle { display: none; background: none; border: none; color: var(--paper); cursor: pointer; padding: 0.5rem; }

/* ===== knoppen en labels (de site) ===== */
.btn-row { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2rem; }
.btn-primary, .btn-secondary { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.95rem 1.5rem; font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; transition: all 0.3s var(--ease); cursor: pointer; border-radius: 0; }
.btn-primary { background: var(--signal); color: var(--ink); border: 1px solid var(--signal); }
.btn-primary:hover { background: transparent; color: var(--signal); transform: translateY(-1px); }
.btn-secondary { background: transparent; color: var(--paper); border: 1px solid var(--line-strong); }
.btn-secondary:hover { border-color: var(--signal); color: var(--signal); transform: translateY(-1px); }
.btn-small { padding: 0.7rem 1rem; font-size: 0.72rem; }
.tag { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--signal); background: rgba(91, 141, 239, 0.1); border: 1px solid rgba(91, 141, 239, 0.3); padding: 0.3rem 0.6rem; display: inline-block; }
.label { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--paper-muted); font-weight: 500; }
.arrow-link { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--signal); }
.arrow-link:hover { color: var(--signal-soft); }
.arrow-link svg { width: 14px; height: 9px; stroke: currentColor; stroke-width: 1.6; fill: none; transition: transform 0.3s var(--ease); }
.arrow-link:hover svg { transform: translateX(3px); }

/* ===== donkere hero (de site: cli-hero) ===== */
.mk-hero { padding: clamp(8rem, 15vh, 10rem) 0 clamp(3rem, 6vw, 5rem); border-bottom: 1px solid var(--line); position: relative; overflow: hidden; }
.mk-hero-grid { position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: clamp(60px, 8vw, 120px) clamp(60px, 8vw, 120px); mask-image: radial-gradient(ellipse at 30% 30%, black 0%, transparent 65%); -webkit-mask-image: radial-gradient(ellipse at 30% 30%, black 0%, transparent 65%); pointer-events: none; }
.mk-subnav { display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem; align-items: center; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--paper-muted); margin-bottom: clamp(2rem, 5vh, 3rem); }
.mk-subnav a { color: var(--paper-muted); padding-block: 0.3rem; position: relative; transition: color 0.3s var(--ease); }
.mk-subnav a:hover, .mk-subnav a[aria-current="page"] { color: var(--paper); }
.mk-subnav a[aria-current="page"]::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px; background: var(--signal); }
.mk-hero h1 { font-size: clamp(2.5rem, 6.4vw, 5.6rem); margin: 0 0 clamp(2rem, 4vh, 2.5rem); max-width: 17ch; }
.mk-hero-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: end; margin-top: 2rem; }
.mk-hero-bottom .lede { max-width: 46ch; margin: 0; }
.mk-hero .stempel { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--paper-muted); margin: 1.25rem 0 0; }
.role-hero h1 { font-size: clamp(2rem, 4.6vw, 3.8rem); max-width: 24ch; line-height: 1.02; }
.role-meta { margin: 0; color: var(--paper-dim); font-size: 1rem; }
.hero-aside { padding: clamp(1.5rem, 2.5vw, 2.25rem); border: 1px solid var(--line-strong); background: linear-gradient(180deg, rgba(91, 141, 239, 0.04) 0%, transparent 100%); position: relative; }
.hero-aside::before, .hero-aside::after { content: ""; position: absolute; width: 24px; height: 24px; }
.hero-aside::before { top: -1px; left: -1px; border-top: 1px solid var(--signal); border-left: 1px solid var(--signal); }
.hero-aside::after { bottom: -1px; right: -1px; border-bottom: 1px solid var(--signal); border-right: 1px solid var(--signal); }
.hero-aside h2 { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--signal); margin-bottom: 1.25rem; font-weight: 500; }
.hero-aside-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.85rem; }
.hero-aside-list li { display: grid; grid-template-columns: 28px 1fr; gap: 0.5rem; align-items: baseline; font-size: 0.95rem; color: var(--paper-dim); line-height: 1.5; }
.hero-aside-list li .num { font-family: var(--font-mono); font-size: 0.74rem; color: var(--signal); font-weight: 500; }

/* zoekveld in de hero van het overzicht: een gewoon formulier naar /market/jobs/ */
.home-search { display: flex; gap: 0.5rem; margin-top: 2rem; max-width: 640px; }
.home-search .sb-input { flex: 1; }

/* ===== kopjes in de lichte zone (de site: section-head) ===== */
.section-head { display: grid; grid-template-columns: 1fr 2fr; gap: clamp(2rem, 5vw, 5rem); margin-bottom: clamp(2rem, 4vw, 3rem); align-items: baseline; }
.section-head .num { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.2em; color: var(--paper-muted); text-transform: uppercase; }
.section-head h2 { font-family: var(--font-display); font-weight: 300; font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1; letter-spacing: -0.03em; max-width: 22ch; }
.section-head h2 em { font-style: italic; color: var(--paper-dim); }
.section-head p { color: var(--paper-dim); max-width: 60ch; margin: 1rem 0 0; }

/* ===== zoekband ===== */
.mk-explorer { padding-top: 0 !important; }
.band { position: sticky; top: var(--nav-h); z-index: 20; background: color-mix(in srgb, var(--ink) 94%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line-strong); }
.band-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem 1rem; padding-block: 1rem 0.75rem; align-items: center; }
.sb { position: relative; display: flex; gap: 0.5rem; align-items: stretch; }
.sb-input { position: relative; flex: 1; }
.sb-input input { width: 100%; font-family: var(--font-body); font-size: 1rem; color: var(--paper); background: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 0.85rem 2.6rem 0.85rem 2.6rem; transition: border-color 0.2s var(--ease), background 0.2s var(--ease); }
.mk-hero .sb-input input { background: rgba(245, 241, 232, 0.04); }
.sb-input input::placeholder { color: var(--paper-muted); }
.sb-input input:focus { outline: none; border-color: var(--signal); }
.sb-input input:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.sb-input input::-webkit-search-cancel-button { display: none; }
.sb-input > svg { position: absolute; left: 0.9rem; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; stroke: var(--paper-muted); fill: none; stroke-width: 1.6; pointer-events: none; }
.sb-input kbd { position: absolute; right: 0.7rem; top: 50%; transform: translateY(-50%); font: 500 0.7rem var(--font-mono); color: var(--paper-muted); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 0.1rem 0.4rem; }
.sb-help { width: 48px; flex: none; font-family: var(--font-mono); font-size: 1rem; font-weight: 600; color: var(--paper); background: transparent; border: 1px solid var(--line-strong); border-radius: var(--radius); cursor: pointer; transition: all 0.3s var(--ease); }
.sb-help[aria-expanded="true"], .sb-help:hover { border-color: var(--signal); color: var(--signal); }
.sb-tools { display: flex; align-items: center; gap: 0.6rem; }
.sb-tools select { font-family: var(--font-body); font-size: 0.92rem; color: var(--paper); background-color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 0.7rem 2rem 0.7rem 0.8rem; appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--paper) 50%), linear-gradient(135deg, var(--paper) 50%, transparent 50%); background-position: right 0.95rem center, right 0.6rem center; background-size: 5px 5px; background-repeat: no-repeat; }
.sb-copy { display: inline-flex; align-items: center; gap: 0.45rem; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--paper); background: transparent; border: 1px solid var(--line-strong); border-radius: 0; padding: 0.8rem 1rem; cursor: pointer; white-space: nowrap; transition: all 0.3s var(--ease); }
.sb-copy svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.sb-copy:hover { border-color: var(--signal); color: var(--signal); }
.sb-copy.is-done { background: var(--signal); color: var(--ink); border-color: var(--signal); }
.ctl-label { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--paper-muted); white-space: nowrap; }
.sb-hint { grid-column: 1 / -1; margin: 0; font: 400 0.74rem/1.6 var(--font-mono); color: var(--paper-muted); }
.sb-hint code { font: inherit; color: var(--paper); background: var(--ink-3); padding: 0 0.3rem; border-radius: var(--radius); white-space: nowrap; }
.sb-hint .short { display: none; }
.syntax-pop { position: absolute; top: calc(100% + 0.5rem); right: 0; z-index: 40; width: min(580px, calc(100vw - 2 * var(--gutter))); background: var(--ink); color: var(--paper); border: 1px solid var(--line-strong); box-shadow: 0 18px 40px -20px rgba(10, 10, 11, 0.45); padding: 1.1rem 1.2rem 1.2rem; }
.syntax-pop h2 { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--signal); font-weight: 500; margin: 0 0 0.9rem; }
.syntax-pop dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.5rem 1.1rem; font-size: 0.9rem; }
.syntax-pop dt { font: 500 0.8rem/1.5 var(--font-mono); color: var(--paper); white-space: nowrap; }
.syntax-pop dd { margin: 0; color: var(--paper-dim); }
.syntax-pop p { margin: 1rem 0 0; font-size: 0.86rem; color: var(--paper-muted); }
.syntax-pop button.ex { font: inherit; color: var(--signal); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-align: left; }

/* ===== status: telling en filters ===== */
.status { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; padding-block: 1.25rem 0.25rem; }
#nc-count { margin: 0; font-size: 1.02rem; color: var(--paper-dim); margin-right: 0.5rem; }
#nc-count strong { color: var(--paper); font-weight: 600; }
#nc-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.nc-pill { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--paper); background: transparent; border: 1px solid var(--line-strong); border-radius: 0; padding: 0.4rem 0.65rem; cursor: pointer; display: inline-flex; align-items: center; gap: 0.5rem; max-width: 100%; text-align: left; transition: border-color 0.3s var(--ease), color 0.3s var(--ease); }
.nc-pill:hover { border-color: var(--signal); color: var(--signal); }
.nc-clearall { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--signal); background: none; border: 0; padding: 0.4rem 0.3rem; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.nc-x { width: 8px; height: 8px; position: relative; display: inline-block; flex: none; }
.nc-x::before, .nc-x::after { content: ""; position: absolute; left: 50%; top: 0; width: 1.5px; height: 100%; background: currentColor; transform: rotate(45deg); }
.nc-x::after { transform: rotate(-45deg); }
.filters-toggle { display: none; margin-left: auto; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--paper); background: transparent; border: 1px solid var(--line-strong); padding: 0.65rem 0.9rem; cursor: pointer; }

/* ===== verkenner: facetten links, kaart en rollen rechts ===== */
.layout { display: grid; grid-template-columns: 268px minmax(0, 1fr); gap: clamp(1.5rem, 2.5vw, 2.5rem); padding-block: 1rem 0; align-items: start; }
html:not(.js) .layout { grid-template-columns: minmax(0, 1fr); }
html:not(.js) .band, html:not(.js) .facets, html:not(.js) .lines-toggle, html:not(.js) .seg-group, html:not(.js) #nc-chips { display: none; }
.nojs-note { font-size: 0.9rem; color: var(--paper-muted); }
html.js .nojs-note { display: none; }
.facets { position: sticky; top: calc(var(--nav-h) + 150px); max-height: calc(100vh - var(--nav-h) - 170px); overflow: auto; padding-right: 0.4rem; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.facet { border: 0; border-top: 1px solid var(--line-strong); margin: 0 0 1.1rem; padding: 0.8rem 0 0; min-width: 0; }
.facet legend { float: left; width: 100%; display: flex; justify-content: space-between; align-items: baseline; padding: 0; margin-bottom: 0.5rem; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--paper-muted); font-weight: 500; }
.facet legend .on { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em; color: var(--signal); }
.facet-note { clear: both; display: block; margin: -0.2rem 0 0.45rem; font-size: 0.78rem; color: var(--paper-muted); }
.facet-list { clear: both; }
.facet-find { clear: both; width: 100%; font-family: var(--font-body); font-size: 0.88rem; color: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 0.45rem 0.6rem; margin-bottom: 0.35rem; }
.facet-find:focus { outline: none; border-color: var(--signal); }
.fx-row { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 0.6rem; align-items: center; padding: 0.3rem 0; cursor: pointer; font-size: 0.9rem; color: var(--paper-dim); }
.fx-row input { width: 16px; height: 16px; margin: 0; accent-color: var(--signal); cursor: pointer; }
.fx-row:hover .fx-label { color: var(--paper); }
.fx-row input:checked + .fx-label { color: var(--paper); font-weight: 600; }
.fx-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-n { font-family: var(--font-mono); font-size: 0.74rem; color: var(--paper-muted); font-variant-numeric: tabular-nums; }
.fx-row.is-zero { opacity: 0.55; }
.fx-more { margin-top: 0.3rem; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--signal); background: none; border: 0; padding: 0.2rem 0; cursor: pointer; }
.fx-more:hover { color: var(--signal-soft); }
.fx-empty { margin: 0.2rem 0; font-size: 0.84rem; color: var(--paper-muted); }
.facet-range { clear: both; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: 0.4rem; }
.facet-range label { display: grid; gap: 0.2rem; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--paper-muted); }
.facet-range input { font-family: var(--font-body); font-size: 0.86rem; color: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 0.35rem 0.4rem; min-width: 0; }

/* ===== kaart ===== */
.chart { display: grid; grid-template-columns: minmax(0, 1fr) 248px; gap: clamp(1rem, 2vw, 2rem); align-items: start; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.chart-home { grid-template-columns: minmax(0, 1fr) 300px; }
.chart-frame { border: 1px solid var(--line-strong); background: var(--ink); position: relative; }
.chart-top, .chart-bottom { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; padding: 0.75rem 1rem; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em; color: var(--paper-muted); }
.chart-top { border-bottom: 1px solid var(--line-strong); }
.chart-bottom { border-top: 1px solid var(--line-strong); flex-wrap: wrap; }
.chart-top h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.15rem, 1.4vw, 1.35rem); letter-spacing: -0.02em; color: var(--paper); margin: 0; }
.lines-toggle { display: inline-flex; align-items: center; gap: 0.45rem; cursor: pointer; text-transform: uppercase; letter-spacing: 0.12em; }
.lines-toggle input { accent-color: var(--signal); width: 15px; height: 15px; }
.nc-map { position: relative; }
.nc-svg { display: block; width: 100%; height: auto; }
.nc-sea { fill: var(--ink); }
.nc-ctx { fill: var(--ink-3); stroke: none; }
.nc-coast { fill: none; stroke: var(--paper); stroke-width: 0.6; stroke-linejoin: round; opacity: 0.45; pointer-events: none; }
.nc-borders { fill: none; stroke: var(--ink); stroke-width: 1.1; stroke-linejoin: round; pointer-events: none; }
.nc-country { stroke: none; transition: opacity 0.25s var(--ease), filter 0.2s var(--ease); }
html.js .nc-map .nc-country { cursor: pointer; }
.nc-country.is-hover { filter: brightness(1.12) saturate(1.1); }
.nc-country.is-dim { opacity: 0.35; }
.nc-country.r0 { fill: var(--map-zero); }
.nc-country.r1 { fill: var(--ramp-1); } .nc-country.r2 { fill: var(--ramp-2); } .nc-country.r3 { fill: var(--ramp-3); }
.nc-country.r4 { fill: var(--ramp-4); } .nc-country.r5 { fill: var(--ramp-5); } .nc-country.r6 { fill: var(--ramp-6); }
.nc-selpath { fill: none; stroke: var(--paper); stroke-width: 2.2; pointer-events: none; }
/* Drukvelden: tekenen zichzelf bij het laden; wat de browser na een filter opnieuw tekent (.now) staat er meteen. */
.iso { fill: none; stroke: var(--paper); stroke-width: 1.05; stroke-linejoin: round; opacity: 0.7; pointer-events: none; stroke-dasharray: 1; stroke-dashoffset: 0; animation: nc-plot 1.8s var(--ease-out) both; }
.iso.now { animation: none; }
/* Een smalle papieren rand, zodat de lijnen ook over de donkerste landen leesbaar blijven. */
.iso-lines { filter: drop-shadow(0 0 1.2px rgba(246, 243, 234, 0.95)); }
@keyframes nc-plot { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.iso-label { font-family: var(--font-mono); font-size: 13px; font-weight: 500; fill: var(--paper); paint-order: stroke; stroke: var(--ink); stroke-width: 3.5px; pointer-events: none; }
.peak-h { font-family: var(--font-display); font-size: 32px; font-weight: 500; fill: var(--paper); paint-order: stroke; stroke: var(--ink); stroke-width: 4px; pointer-events: none; }
.peak-l { font-family: var(--font-mono); font-size: 13.5px; font-weight: 500; fill: var(--paper); paint-order: stroke; stroke: var(--ink); stroke-width: 3.5px; pointer-events: none; }
.no-lines .iso, .no-lines .iso-label, .no-lines .peak-h, .no-lines .peak-l { display: none; }
.nc-tip { position: absolute; left: 0; top: 0; z-index: 5; min-width: 220px; max-width: 290px; background: #0a0a0b; color: #f5f1e8; border: 1px solid rgba(245, 241, 232, 0.28); padding: 0.8rem 0.9rem 0.7rem; box-shadow: 0 12px 30px -14px rgba(10, 10, 11, 0.6); pointer-events: none; font-size: 0.86rem; }
.nc-tip-n { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.06em; color: #a8a39a; }
.nc-tip-n strong { font-family: var(--font-display); font-weight: 300; font-size: 1.8rem; line-height: 1; color: #f5f1e8; margin-right: 0.25rem; }
.nc-tip-n span { margin-left: 0.35rem; }
.nc-tip-name { font-family: var(--font-display); font-weight: 400; font-size: 1.05rem; margin: 0.25rem 0 0.45rem; }
.nc-tip-list { list-style: none; margin: 0; padding: 0.45rem 0 0; border-top: 1px solid rgba(245, 241, 232, 0.12); display: grid; gap: 0.2rem; }
.nc-tip-list li { display: flex; justify-content: space-between; gap: 1rem; color: #e8e3d6; }
.nc-tip-list b { font-family: var(--font-mono); font-size: 0.76rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.nc-tip-foot { margin-top: 0.45rem; padding-top: 0.4rem; border-top: 1px solid rgba(245, 241, 232, 0.12); color: #a8a39a; font-size: 0.8rem; }
.nc-legend ol { list-style: none; margin: 0; padding: 0; display: inline-flex; flex-wrap: wrap; gap: 0.2rem 0.9rem; }
.nc-legend li { display: inline-flex; align-items: center; gap: 0.35rem; }
.nc-legend i { width: 14px; height: 10px; display: inline-block; border: 1px solid var(--line); }
.nc-legend i.r0 { background: var(--map-zero); } .nc-legend i.r1 { background: var(--ramp-1); } .nc-legend i.r2 { background: var(--ramp-2); }
.nc-legend i.r3 { background: var(--ramp-3); } .nc-legend i.r4 { background: var(--ramp-4); } .nc-legend i.r5 { background: var(--ramp-5); } .nc-legend i.r6 { background: var(--ramp-6); }
.nc-legend-title { color: var(--paper); margin-right: 0.9rem; text-transform: uppercase; letter-spacing: 0.12em; }
.chart-note { font-size: 0.86rem; color: var(--paper-muted); margin: 0.8rem 0 0; max-width: 78ch; }

/* ranglijst: de tabelversie van de kaart */
.ranked h2 { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--paper-muted); font-weight: 500; margin: 0 0 0.75rem; }
.nc-rank { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-strong); }
.nc-rankbtn { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 3px; column-gap: 0.75rem; row-gap: 0.3rem; align-items: baseline; background: transparent; border: 0; border-bottom: 1px solid var(--line); padding: 0.5rem 0.1rem 0.45rem; cursor: pointer; text-align: left; color: var(--paper); font-family: var(--font-body); font-size: 0.92rem; line-height: 1.25; }
div.nc-rankbtn { cursor: default; }
.nc-rankbtn:hover .nc-rank-name, .nc-rankbtn:focus-visible .nc-rank-name { color: var(--signal); }
.nc-rankbtn.is-on { background: var(--ink-2); padding-inline: 0.45rem; }
.nc-rankbtn.is-on .nc-rank-name { font-weight: 700; }
.nc-rank-n { font-family: var(--font-mono); font-size: 0.8rem; font-variant-numeric: tabular-nums; color: var(--paper-dim); }
.nc-rank-bar { grid-column: 1 / -1; height: 3px; background: var(--ink-3); }
.nc-rank-bar i { display: block; height: 100%; background: var(--ramp-4); }
.nc-rank-noloc { margin-top: 0.6rem; color: var(--paper-muted); grid-template-rows: auto; }
.nc-linkbtn { background: none; border: 0; padding: 0.7rem 0 0; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--signal); cursor: pointer; }

/* ===== rollen ===== */
.results-head { display: flex; flex-wrap: wrap; gap: 0.8rem 2rem; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.results-head h2 { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.8rem, 3vw, 2.6rem); letter-spacing: -0.03em; line-height: 1; margin: 0; }
.seg-group { display: inline-flex; align-items: center; gap: 0.7rem; }
.nc-segs { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--line-strong); }
.nc-seg { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--paper-dim); background: transparent; border: 0; border-right: 1px solid var(--line); padding: 0.6rem 0.75rem; cursor: pointer; white-space: nowrap; transition: background 0.3s var(--ease), color 0.3s var(--ease); }
.nc-seg:last-child { border-right: 0; }
.nc-seg:hover { background: var(--ink-2); color: var(--paper); }
.nc-seg.is-on { background: var(--signal); color: var(--ink); }
.nc-group { border-top: 1px solid var(--line-strong); }
.nc-group:last-of-type { border-bottom: 1px solid var(--line-strong); }
/* Alleen de volledige serverlijst (duizenden regels): buiten beeld hoeft de browser hem niet op te maken. */
.nc-ssr { content-visibility: auto; contain-intrinsic-size: auto 900px; }
.nc-ghead { margin: 0; }
.nc-ghead > .nc-gname, .nc-ghead > .nc-gcount { display: inline-block; padding-block: 1rem; margin-right: 0.8rem; }
.nc-gtoggle { width: 100%; display: grid; grid-template-columns: minmax(0, auto) auto minmax(0, 1fr) 20px; gap: 0.4rem 1rem; align-items: baseline; background: none; border: 0; padding: 1rem 0.1rem; cursor: pointer; text-align: left; color: var(--paper); }
.nc-gname { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.2rem, 1.6vw, 1.45rem); letter-spacing: -0.02em; line-height: 1.15; }
.nc-gcount { font-family: var(--font-mono); font-size: 0.82rem; font-variant-numeric: tabular-nums; color: var(--signal); }
.nc-gmeta { font-size: 0.84rem; color: var(--paper-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nc-gicon { width: 11px; height: 11px; align-self: center; justify-self: end; border-right: 1.5px solid var(--paper); border-bottom: 1.5px solid var(--paper); transform: rotate(45deg) translate(-2px, -2px); transition: transform 0.3s var(--ease); }
.is-open .nc-gicon { transform: rotate(-135deg) translate(-2px, -2px); }
.nc-gtoggle:hover .nc-gname { color: var(--signal); }
.nc-rows { list-style: none; margin: 0; padding: 0 0 1rem; }
/* Een rol = titel, werkgever, plaats, (familie), datum. Geen klasse per cel: de lijst telt duizenden regels. */
.nc-rows > li { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1.15fr) 70px; grid-template-areas: "t e l f a"; gap: 0.25rem 1rem; padding: 0.7rem 0.1rem; border-top: 1px solid var(--line); align-items: baseline; font-size: 0.92rem; }
.nc-rows > li > a { grid-area: t; color: var(--paper); font-weight: 600; transition: color 0.3s var(--ease); }
.nc-rows > li > a:hover { color: var(--signal); }
.nc-rows > li > span:nth-of-type(1) { grid-area: e; color: var(--paper-dim); }
.nc-rows > li > span:nth-of-type(2) { grid-area: l; color: var(--paper-muted); }
.nc-rows > li > span:nth-of-type(3) { grid-area: f; color: var(--paper-muted); }
.nc-rows > li > span small { display: block; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--paper-muted); margin-top: 0.15rem; }
.nc-rows > li > time { grid-area: a; font-family: var(--font-mono); font-size: 0.74rem; color: var(--paper-muted); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
[data-group="company"] .nc-rows > li { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1.15fr) 70px; grid-template-areas: "t l f a"; }
[data-group="company"] .nc-rows > li > span:nth-of-type(1) { display: none; }
.is-flat { border-bottom: 1px solid var(--line-strong); }
.is-flat .nc-rows { padding-top: 0; }
.nc-more { padding: 0 0 1.2rem; }
.nc-morebtn { font-family: var(--font-mono); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--paper); background: transparent; border: 1px solid var(--line-strong); padding: 0.65rem 1rem; cursor: pointer; transition: all 0.3s var(--ease); }
.nc-morebtn:hover { border-color: var(--signal); color: var(--signal); }
.nc-more-groups { padding-top: 1.25rem; }
.nc-empty { border: 1px solid var(--line-strong); padding: clamp(1.25rem, 3vw, 2rem); background: var(--ink-2); }
.nc-empty-title { font-family: var(--font-display); font-weight: 400; font-size: 1.35rem; letter-spacing: -0.02em; margin: 0 0 0.5rem; }
.nc-empty-sub { color: var(--paper-dim); margin: 0 0 1rem; max-width: 62ch; }
.nc-empty-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* ===== panelen in de lichte zone (de site: bench-card) ===== */
.readings { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 1.25rem; align-items: start; }
.readings + .readings { margin-top: 1.25rem; }
.stack { display: grid; gap: 1.25rem; min-width: 0; }
.panel { border: 1px solid var(--line-strong); background: rgba(255, 255, 255, 0.55); padding: clamp(1.25rem, 2vw, 1.75rem); position: relative; min-width: 0; }
.panel::before { content: ""; position: absolute; top: -1px; left: -1px; width: 20px; height: 20px; border-top: 1px solid var(--signal); border-left: 1px solid var(--signal); }
.panel-top { display: flex; justify-content: space-between; align-items: baseline; gap: 0.4rem 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.panel-top h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.25rem, 1.6vw, 1.55rem); line-height: 1.15; letter-spacing: -0.02em; }
.panel-top span { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--paper-muted); }
.panel-body > p { color: var(--paper-dim); margin: 0 0 1rem; max-width: 62ch; font-size: 0.95rem; }
.panel-body > p:last-child { margin-bottom: 0; }
.read { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.read th { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--paper-muted); text-align: left; padding: 0 0 0.55rem; border-bottom: 1px solid var(--line-strong); font-weight: 500; }
.read td { padding: 0.55rem 0; border-bottom: 1px solid var(--line); vertical-align: baseline; }
.read tr:last-child td { border-bottom: 0; }
.read .num { font-family: var(--font-mono); font-size: 0.8rem; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; padding-left: 1rem; }
.read a { color: var(--paper); font-weight: 500; transition: color 0.3s var(--ease); }
.read a:hover { color: var(--signal); }
.read .bar { display: block; height: 3px; margin-top: 0.4rem; background: var(--ink-3); }
.read .bar i { display: block; height: 100%; background: var(--ramp-4); }
.src { font-size: 0.86rem; color: var(--paper-muted); max-width: 72ch; }
.src a, .prose p a, .chart-note a { color: var(--signal); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.meer { margin-top: 0.8rem; border-top: 1px solid var(--line); padding-top: 0.6rem; }
.meer summary { cursor: pointer; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--signal); padding: 0.3rem 0; }
.meer[open] summary { margin-bottom: 0.4rem; }

/* ===== rolpagina ===== */
.crumbs { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--paper-muted); display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: clamp(1.5rem, 4vh, 2.25rem); }
.crumbs a { color: var(--paper-muted); transition: color 0.3s var(--ease); }
.crumbs a:hover { color: var(--paper); }
.role-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.role-main > p { max-width: 66ch; margin: 0 0 1.2rem; }
.role-main .excerpt { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.15rem, 1vw + 0.85rem, 1.4rem); line-height: 1.5; letter-spacing: -0.01em; color: var(--paper); }
.role-main .src { margin-top: 1.4rem; }
.facts { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.facts th { text-align: left; font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--paper-muted); font-weight: 500; padding: 0.6rem 1rem 0.6rem 0; vertical-align: baseline; white-space: nowrap; }
.facts td { padding: 0.6rem 0; vertical-align: baseline; color: var(--paper); }
.facts tr + tr th, .facts tr + tr td { border-top: 1px solid var(--line); }
.facts time { font-family: var(--font-mono); font-size: 0.84rem; }
.deeplinks { list-style: none; margin: 1.1rem 0 0; padding: 1.1rem 0 0; border-top: 1px solid var(--line-strong); display: grid; gap: 0.7rem; }

/* ===== aanmelden (lichte zone) en de donkere contact-boekensteun ===== */
.aanmeld { display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; border: 1px solid var(--line-strong); border-left: 2px solid var(--signal); background: rgba(255, 255, 255, 0.55); padding: 1.1rem 1.4rem; margin: clamp(1.5rem, 3vw, 2.5rem) 0; }
.aanmeld p { margin: 0; font-size: 0.98rem; color: var(--paper-dim); max-width: 68ch; }
.aanmeld b { color: var(--paper); font-weight: 600; }
.aanmeld a { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.85rem 1.25rem; font-family: var(--font-mono); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; background: var(--signal); color: var(--ink); border: 1px solid var(--signal); white-space: nowrap; transition: all 0.3s var(--ease); }
.aanmeld a:hover { background: transparent; color: var(--signal); transform: translateY(-1px); }
.mk-contact { background: var(--ink-2); border-top: 1px solid var(--line); }
.cta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.cta > div { background: var(--ink); padding: clamp(1.75rem, 3vw, 2.5rem); transition: background 0.3s var(--ease); }
.cta > div:hover { background: var(--ink-2); }
.cta h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.35rem, 2vw, 1.75rem); letter-spacing: -0.02em; margin: 0 0 0.75rem; }
.cta p { color: var(--paper-dim); font-size: 0.95rem; line-height: 1.6; margin: 0 0 1.5rem; max-width: 52ch; }
.cta a { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.95rem 1.5rem; font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; background: var(--signal); color: var(--ink); border: 1px solid var(--signal); transition: all 0.3s var(--ease); }
.cta a:hover { background: transparent; color: var(--signal); transform: translateY(-1px); }
p.cta { display: block; background: none; border: 0; }
.mk-colofon { border-top: 1px solid var(--line); padding: 1.5rem 0; }
.mk-colofon .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem 2rem; font-size: 0.84rem; color: var(--paper-muted); }
.mk-colofon p { margin: 0; max-width: 92ch; }
.mk-colofon .stempel { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }

/* ===== voet (de site) ===== */
footer { border-top: 1px solid var(--line); padding: 3rem 0 2rem; background: var(--ink); }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem; margin-bottom: 3rem; }
.foot-grid h4 { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--paper-muted); margin: 0 0 1.25rem; font-weight: 500; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.foot-grid a { font-size: 0.92rem; color: var(--paper-dim); transition: color 0.3s var(--ease); }
.foot-grid a:hover { color: var(--signal); }
.foot-brand { max-width: 36ch; }
.foot-brand p { font-size: 0.92rem; color: var(--paper-muted); line-height: 1.6; margin: 1rem 0 0; }
footer .foot-grid li, footer .foot-grid a { font-size: 0.92rem; line-height: 1.55; }
.foot-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 2rem; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; color: var(--paper-faint); }
.foot-bottom a { color: var(--paper-muted); }
.foot-bottom a:hover { color: var(--signal); }

/* ===== tabellen en rapportpagina's (inhoud ongewijzigd, nieuwe stijl) ===== */
.tblwrap { overflow-x: auto; border: 1px solid var(--line-strong); background: rgba(255, 255, 255, 0.55); }
.tblwrap table { border-collapse: collapse; width: 100%; font-size: 0.92rem; }
.tblwrap th { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--paper-muted); text-align: left; padding: 0.75rem 1rem; border-bottom: 1px solid var(--line-strong); white-space: nowrap; font-weight: 500; }
.tblwrap td { padding: 0.6rem 1rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.tblwrap tr:last-child td { border-bottom: 0; }
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.balkcel { min-width: 150px; }
.balk { --p: 0%; position: relative; height: 4px; background: var(--ink-3); margin-top: 6px; }
.balk i { position: absolute; inset: 0; width: var(--p); background: var(--ramp-4); }
main > section.prose-zone { padding-top: clamp(7.5rem, 13vw, 10rem); }
main > section.mk-vervolg { padding-top: 0; }
.prose h1 { font-family: var(--font-display); font-weight: 300; font-size: clamp(2.2rem, 4.6vw, 3.8rem); line-height: 1; letter-spacing: -0.03em; max-width: 24ch; margin-bottom: 1rem; }
.prose h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.35rem, 2vw, 1.8rem); letter-spacing: -0.02em; margin: 2.6rem 0 1rem; }
.prose p { max-width: 70ch; }
.prose .tblwrap { max-width: 920px; }
.prose .muted { color: var(--paper-muted); }
.specrow { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; color: var(--paper-muted); margin: 0.9rem 0 0; }
.specrow b { color: var(--paper-dim); font-weight: 500; }
.leadzin { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.25rem, 2.4vw, 1.7rem); line-height: 1.4; max-width: 40ch; margin: 1.6rem 0 0.6rem; text-wrap: balance; }
.leadzin .cijfer { font-weight: 500; color: var(--signal); font-variant-numeric: tabular-nums; }
.rapportlijst { list-style: none; padding: 0; margin: 1.6rem 0; max-width: 640px; border-top: 1px solid var(--line-strong); }
.rapportlijst li { border-bottom: 1px solid var(--line); padding: 1rem 0; }
.rapportlijst a { font-family: var(--font-display); font-size: 1.2rem; color: var(--paper); text-decoration: none; }
.rapportlijst a:hover { color: var(--signal); }
.rapportlijst .meta { font-family: var(--font-mono); font-size: 0.72rem; color: var(--paper-muted); display: block; margin-top: 0.25rem; }
.tag-cat { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid var(--line); padding: 0.2rem 0.45rem; color: var(--paper-dim); white-space: nowrap; }

/* ===== breedtes ===== */
/* Nine menu items since the Marketplace joined (24-10): tighter gaps just above the hamburger breakpoint, so the
   button on the right keeps its place (with the site's spacing it fell off the screen between 1181 and 1265 px). */
@media (min-width: 1151px) and (max-width: 1320px) { .nav-links { gap: 1.5rem; } .nav-inner { gap: 1.25rem; } }
/* Below 1150 px nine items no longer fit next to the logo and the button: the menu button takes over (as under 960). */
@media (min-width: 961px) and (max-width: 1150px) {
  .nav-links { display: none; }
  .nav-toggle { display: block; }
  .nav.open nav { position: static; }
  .nav.open .nav-links { display: flex; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; background: rgba(10, 10, 11, 0.96); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 1.5rem var(--gutter); gap: 1.25rem; align-items: flex-start; }
  html:not(.js) .nav-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
  html:not(.js) .nav-inner { flex-wrap: wrap; }
  html:not(.js) .nav-toggle { display: none; }
}
@media (max-width: 1180px) {
  .chart, .chart-home { grid-template-columns: 1fr; }
  .nc-rows > li { grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 1fr) 66px; grid-template-areas: "t e l a"; }
  .nc-rows > li > span:nth-of-type(3) { display: none; }
  [data-group="company"] .nc-rows > li { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) 66px; grid-template-areas: "t l a"; }
}
@media (max-width: 960px) {
  /* de site */
  .nav-links { display: none; }
  .nav-toggle { display: block; }
  .nav.open nav { position: static; }
  .nav.open .nav-links { display: flex; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; background: rgba(10, 10, 11, 0.96); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 1.5rem var(--gutter); gap: 1.25rem; align-items: flex-start; }
  .nav.open .nav-cta { display: none; }
  html:not(.js) .nav-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
  html:not(.js) .nav-inner { flex-wrap: wrap; }
  html:not(.js) .nav-toggle { display: none; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-bottom { flex-direction: column; gap: 0.75rem; text-align: center; }
  /* de markt */
  .mk-hero-bottom, .section-head, .role-grid { grid-template-columns: 1fr; }
  .layout { grid-template-columns: 1fr; }
  .facets { position: static; max-height: none; overflow: visible; display: none; border: 1px solid var(--line-strong); background: rgba(255, 255, 255, 0.55); padding: 1rem 1rem 0.2rem; }
  .facets.is-open { display: block; }
  .filters-toggle { display: inline-block; }
  .cta { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .band-in { grid-template-columns: 1fr; }
  .sb-tools { justify-content: space-between; flex-wrap: wrap; }
  .sb-tools .ctl-label { display: none; }
  .sb-tools select { flex: 1; }
  .sb-input kbd { display: none; }
  .sb-input input { padding-right: 0.9rem; }
  .sb-hint .long, .sb-hint .full { display: none; }
  .sb-hint .short { display: inline; }
  .band { position: static; }
  .facets.is-open .facet:first-child { border-top: 0; padding-top: 0; }
  .seg-group { flex-direction: column; align-items: flex-start; gap: 0.4rem; width: 100%; }
  .nc-segs { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nc-seg { padding: 0.65rem 0.3rem; border-bottom: 1px solid var(--line); }
  .nc-rows > li, [data-group] .nc-rows > li { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t a" "e e" "l l"; }
  [data-group="company"] .nc-rows > li { grid-template-areas: "t a" "l l"; }
  .nc-rows > li > span { font-size: 0.86rem; }
  .nc-gtoggle { grid-template-columns: minmax(0, 1fr) auto 16px; }
  .nc-gmeta { grid-column: 1 / -1; grid-row: 2; white-space: normal; }
  .iso-label { display: none; }
  /* De kaart schaalt op een telefoon naar een derde: in kaarteenheden groter, zodat de drukste steden leesbaar blijven (11 px of meer). */
  .peak-h { font-size: 56px; }
  .peak-l { font-size: 32px; stroke-width: 7px; transform: translateY(12px); }
  .chart-bottom { font-size: 0.64rem; }
  .syntax-pop dl { grid-template-columns: 1fr; gap: 0.1rem; }
  .syntax-pop dd { margin-bottom: 0.45rem; }
  /* Op een telefoon komt de zoekbalk eerst; dezelfde regel staat ook onderaan de pagina in het colofon. */
  .mk-hero-jobs .hero-aside { display: none; }
  .home-search { flex-direction: column; }
  .home-search .btn-primary { justify-content: center; }
  .mk-colofon .wrap { flex-direction: column; }
}
@media (max-width: 560px) {
  /* Afwijking van de live kop: daar loopt hij op 375 px 74 px uit beeld (gemeten 24-10 op /clients). Hier vallen
     het onderschrift en "Brief us" weg, zodat niets zijwaarts scrolt; het menu leidt via Clients naar het
     briefformulier en de contactsectie onderaan heeft de route voor wie werft. */
  .logo-sub, .nav-cta { display: none; }
}
@media (max-width: 520px) {
  .foot-grid { grid-template-columns: 1fr; }
  .facts th { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  /* de site */
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
  .iso { animation: none; }
}
@media print {
  .nav, .band, .facets, .aanmeld, .mk-contact, .lines-toggle, footer { display: none !important; }
  body::before, body::after { display: none; }
}