/* DURF design system v1.1
   Laag bovenop oat (https://oat.ink, @knadh/oat@1.0.0, MIT).
   Laad eerst oat.min.css (meegeleverd in lib/, of de oude jsDelivr-URL) en
   daarna dit bestand. Alles hieronder is ongelaagd en wint dus van de
   @layer-regels van oat. Componenten voor markdown-sites staan in durf-site.css. */

@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=Source+Sans+3:wght@400;600;700&display=swap");

/* ---------- 1. Tokens ---------- */
:root {
  color-scheme: light dark;

  /* Merkpalet (zoals in de position paper) */
  --durf-black: #050E1D;
  --durf-blue: #177ABF;
  --durf-orange: #EE7628;
  --durf-purple: #5C1B61;
  --durf-green: #17A95D;
  --durf-yellow: #F6DA44;
  --durf-red: #83201B;

  /* De zes DURF-thema's (bron: de roadmap). Vaste merkkleur per thema, plus:
     -ink  leesbare tekstkleur op de paginakleur (licht en donker),
     -tint zachte achtergrond in de themakleur,
     -on   tekstkleur op een vlak in de volle themakleur. */
  --durf-theme-1: #EE7628;  /* Governance */
  --durf-theme-2: #F6DA44;  /* Metadata */
  --durf-theme-3: #177ABF;  /* Fulltext */
  --durf-theme-4: #17A95D;  /* Archive */
  --durf-theme-5: #5C1B61;  /* Discovery */
  --durf-theme-6: #83201B;  /* Portal */
  --durf-theme-1-ink: light-dark(#B4530F, #F29A5E);
  --durf-theme-2-ink: light-dark(#7A6100, #F6DA44);
  --durf-theme-3-ink: light-dark(#146DAB, #5BB0EA);
  --durf-theme-4-ink: light-dark(#0B7A40, #4CC585);
  --durf-theme-5-ink: light-dark(#5C1B61, #D9A3DE);
  --durf-theme-6-ink: light-dark(#83201B, #F0857D);
  --durf-theme-1-tint: color-mix(in srgb, var(--durf-theme-1) 16%, var(--background));
  --durf-theme-2-tint: color-mix(in srgb, var(--durf-theme-2) 22%, var(--background));
  --durf-theme-3-tint: color-mix(in srgb, var(--durf-theme-3) 16%, var(--background));
  --durf-theme-4-tint: color-mix(in srgb, var(--durf-theme-4) 16%, var(--background));
  --durf-theme-5-tint: color-mix(in srgb, var(--durf-theme-5) 16%, var(--background));
  --durf-theme-6-tint: color-mix(in srgb, var(--durf-theme-6) 16%, var(--background));
  --durf-theme-1-on: #050E1D;
  --durf-theme-2-on: #050E1D;
  --durf-theme-3-on: #FFFFFF;
  --durf-theme-4-on: #050E1D;
  --durf-theme-5-on: #FFFFFF;
  --durf-theme-6-on: #FFFFFF;

  /* Accent per thema: vaste waarde voor vlakken en tekst, met de tekstkleur erop.
     Standaard blauw. Overschrijf met <html data-accent="yellow"> enz. */
  --accent-solid: light-dark(#177ABF, #5BB0EA);
  --accent-on: light-dark(#FFFFFF, #04223A);
  --accent-ink: var(--accent-solid);                 /* accent als tekstkleur */
  --accent-tint: color-mix(in srgb, var(--accent-solid) 12%, var(--background));

  /* Oat-tokens, opnieuw ingekleurd */
  --background: light-dark(#FFFFFF, #0F1218);
  --foreground: light-dark(#050E1D, #E7E9EE);
  --card: light-dark(#FFFFFF, #1A1E26);
  --card-foreground: var(--foreground);
  --primary: var(--accent-solid);
  --primary-foreground: var(--accent-on);
  --secondary: light-dark(#EAECF0, #262A33);
  --secondary-foreground: var(--foreground);
  --muted: light-dark(#F4F6F8, #20242C);
  --muted-foreground: light-dark(#5E6873, #9AA1AD);
  --faint: light-dark(#F9FAFB, #171A21);
  --faint-foreground: light-dark(#8C969F, #6F7785);
  --accent: color-mix(in srgb, var(--accent-solid) 12%, var(--background));
  --border: light-dark(#EAECF0, #2C303A);
  --input: light-dark(#CDD0D5, #3A3F4A);
  --ring: var(--accent-solid);
  --danger: light-dark(#C0364A, #EF6572);
  --success: light-dark(#0B7A40, #4CC585);
  --warning: light-dark(#A65B00, #F0A742);

  /* Extra tokens */
  --surface: light-dark(#F4F6F8, #14161B);          /* app-achtergrond achter kaarten */
  --link: light-dark(#177ABF, #5BB0EA);
  --durf-yellow-wash: light-dark(#FEF8D3, #2D2914);

  /* Datakleuren voor grafieken en statussen */
  --chart-good: light-dark(#1F9D55, #3EC46D);
  --chart-warn: light-dark(#D97706, #F0A742);
  --chart-bad: light-dark(#D1495B, #EF6572);
  --chart-none: light-dark(#B2B6BE, #4A505C);
  --chart-grid: light-dark(#EAECF0, #262A33);

  /* Typografie */
  --font-sans: "Source Sans 3", "Source Sans Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-heading: Nunito, "Source Sans 3", sans-serif;

  /* Layout */
  --topbar-h: 3.25rem;
  --reading-width: 46rem;
  --page-width: 80rem;
  --durf-radius: .5rem;
  --durf-radius-lg: 1rem;
  --durf-shadow: 0 1px 2px rgb(5 14 29 / .06), 0 .5rem 1.5rem -.75rem rgb(5 14 29 / .25);
}

:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

/* Accenten per DURF-thema. Kies er één per site of pagina: een kleurnaam of
   het themanummer (theme-1 oranje, theme-2 geel, theme-3 blauw, theme-4 groen,
   theme-5 paars, theme-6 rood). Tekst op de accentkleur houdt genoeg contrast. */
:root:is([data-accent="blue"], [data-accent="theme-3"])   { --accent-solid: light-dark(#177ABF, #5BB0EA); --accent-on: light-dark(#FFFFFF, #04223A); }
:root:is([data-accent="orange"], [data-accent="theme-1"]) { --accent-solid: light-dark(#B85410, #F29A5E); --accent-on: light-dark(#FFFFFF, #2A1204); }
:root:is([data-accent="purple"], [data-accent="theme-5"]) { --accent-solid: light-dark(#5C1B61, #D9A3DE); --accent-on: light-dark(#FFFFFF, #2A0D2D); }
:root:is([data-accent="green"], [data-accent="theme-4"])  { --accent-solid: light-dark(#0B7A40, #4CC585); --accent-on: light-dark(#FFFFFF, #04210F); }
:root:is([data-accent="yellow"], [data-accent="theme-2"]) { --accent-solid: light-dark(#8C6E00, #F6DA44); --accent-on: light-dark(#FFFFFF, #1A1600); }
:root:is([data-accent="red"], [data-accent="theme-6"])    { --accent-solid: light-dark(#83201B, #F0857D); --accent-on: light-dark(#FFFFFF, #2A0705); }

/* ---------- 2. Basis ---------- */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--topbar-h) + 1rem); }
body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 800; letter-spacing: -0.01em; }
a { color: var(--link); }
/* Oat kleurt a.button in een laag; de linkkleur hierboven zou die overschrijven. */
a.button { text-decoration: none; }
a.button:where(:not(.outline, .ghost, [data-variant])) { color: var(--primary-foreground); }
a.button:where(.outline, .ghost) { color: var(--foreground); }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

.durf-shell { max-width: var(--page-width); margin-inline: auto; padding-inline: 1.5rem; }
.durf-shell.narrow { max-width: calc(var(--reading-width) + 3rem); }
body.app { background: var(--surface); }

/* ---------- 3. Topbalk met sitemenu ---------- */
.durf-topbar {
  position: sticky; top: 0; z-index: 100;
  background: var(--card);
  border-bottom: 1px solid var(--border);
}
.durf-topbar__inner {
  display: flex; align-items: center; gap: 1.25rem;
  height: var(--topbar-h);
  max-width: var(--page-width); margin-inline: auto; padding-inline: 1rem;
}
.durf-topbar__brand {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-heading); font-weight: 800; font-size: 1.125rem;
  color: var(--foreground); text-decoration: none; flex: 0 0 auto;
}
.durf-topbar__brand img { width: 2rem; height: 2rem; border-radius: 50%; display: block; }
.durf-topbar__nav { display: flex; align-items: stretch; align-self: stretch; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.durf-topbar__nav li { display: flex; margin: 0; padding: 0; }
.durf-topbar__nav a {
  display: inline-flex; align-items: center; padding: 0 .75rem;
  color: var(--muted-foreground); font-weight: 600; font-size: .9375rem; text-decoration: none;
  border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.durf-topbar__nav a:hover { color: var(--foreground); }
.durf-topbar__nav a[aria-current="page"] { color: var(--foreground); border-bottom-color: var(--accent-solid); }
.durf-topbar__spacer { flex: 1; }
.durf-topbar__btn {
  display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; padding: 0;
  background: transparent; color: var(--muted-foreground);
  border: 1px solid transparent; border-radius: .5rem; cursor: pointer;
}
.durf-topbar__btn:hover { background: var(--muted); color: var(--foreground); }
.durf-topbar__btn svg { width: 1.1rem; height: 1.1rem; }
.durf-topbar__menu-btn { display: none; }

@media (max-width: 52rem) {
  .durf-topbar__menu-btn { display: inline-grid; }
  .durf-topbar__nav {
    display: none; position: absolute; inset: var(--topbar-h) 0 auto 0;
    flex-direction: column; gap: 0; padding: .5rem 1rem 1rem;
    background: var(--card); border-bottom: 1px solid var(--border);
  }
  .durf-topbar[data-open] .durf-topbar__nav { display: flex; }
  .durf-topbar__nav li { display: block; width: 100%; }
  .durf-topbar__nav a { display: flex; padding: .75rem .25rem; border-bottom: 1px solid var(--border); margin: 0; }
  .durf-topbar__nav a[aria-current="page"] { border-bottom-color: var(--border); color: var(--accent-solid); }
}
html[data-embed] .durf-topbar { display: none; }

/* Voor oat's sidebar-layout: trek de balk van de hoogte af */
body[data-sidebar-layout] #app-shell,
.app-shell { height: calc(100dvh - var(--topbar-h)); }

/* ---------- 4. Paginakop ---------- */
.durf-page-head { border-bottom: 1px solid var(--border); padding-block: 2.5rem 2rem; }
.durf-page-head__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 2rem; }
.durf-page-head__logo { width: 6rem; height: 6rem; object-fit: contain; flex: 0 0 auto; }
.durf-page-head__text { flex: 1 1 20rem; min-width: 0; }
.durf-page-head h1 { margin: 0; font-size: clamp(1.875rem, 1.5rem + 1.5vw, 2.5rem); line-height: 1.1; }
.durf-page-head .byline { margin: .6rem 0 0; color: var(--muted-foreground); font-weight: 600; }
.durf-page-head .links { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; font-size: .9375rem; font-weight: 600; }
.durf-page-head .links a { text-decoration: none; }
.durf-page-head .links a:hover { text-decoration: underline; }

/* Compacte kop voor dashboards */
.durf-page-head.compact { padding-block: 1.25rem; }
.durf-page-head.compact h1 { font-size: 1.5rem; }

/* ---------- 5. Status-tag ---------- */
.durf-tag {
  display: inline-block; padding: .1rem .6rem; border-radius: 999px;
  font-size: .75rem; font-weight: 700; letter-spacing: .02em; vertical-align: middle;
  background: var(--muted); color: var(--muted-foreground);
}
.durf-tag[data-tone="draft"] { background: var(--durf-yellow-wash); color: light-dark(#6B5900, #E8D67A); }
.durf-tag[data-tone="good"]  { background: color-mix(in srgb, var(--chart-good) 16%, transparent); color: var(--success); }
.durf-tag[data-tone="warn"]  { background: color-mix(in srgb, var(--chart-warn) 16%, transparent); color: var(--warning); }
.durf-tag[data-tone="bad"]   { background: color-mix(in srgb, var(--chart-bad) 16%, transparent); color: var(--danger); }

/* ---------- 6. Leesbare tekst ---------- */
.durf-prose { max-width: var(--reading-width); }
.durf-prose h1 { font-size: 1.875rem; margin: 2.75rem 0 1rem; padding-top: 1.5rem; border-top: 3px solid var(--accent-solid); }
.durf-prose > h1:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.durf-prose h2 { font-size: 1.375rem; margin: 2.25rem 0 .75rem; }
.durf-prose h3 { font-size: 1.125rem; margin: 1.75rem 0 .5rem; }
.durf-prose p, .durf-prose ul, .durf-prose ol { margin: 0 0 1.1rem; }
.durf-prose ul, .durf-prose ol { padding-left: 1.5rem; }
.durf-prose li { margin-bottom: .4rem; }
.durf-prose a { font-weight: 600; }
.durf-prose img { max-width: 100%; height: auto; border: 1px solid var(--border); border-radius: .5rem; }
.durf-prose blockquote { margin: 0 0 1.1rem; padding: .25rem 0 .25rem 1rem; border-left: 3px solid var(--border); color: var(--muted-foreground); }
.durf-prose code { font-size: .9em; padding: .1em .35em; border-radius: .25rem; background: var(--muted); }

/* ---------- 7. Kaarten, kerncijfers, callouts ---------- */
.durf-card { background: var(--card); border: 1px solid var(--border); border-radius: .5rem; padding: 1rem 1.25rem; }
.durf-kpi { background: var(--card); border: 1px solid var(--border); border-radius: .5rem; padding: .9rem 1.1rem; }
.durf-kpi .value { font-family: var(--font-heading); font-weight: 800; font-size: 1.875rem; line-height: 1.1; color: var(--kpi-color, var(--foreground)); }
.durf-kpi .label { margin-top: .25rem; font-size: .875rem; color: var(--muted-foreground); }
.durf-kpi.is-unknown, .durf-kpi[data-unknown] { background: transparent; border-style: dashed; }
.durf-kpi.is-unknown .value, .durf-kpi[data-unknown] .value { color: var(--muted-foreground); font-weight: 700; }
.durf-kpi .check { margin-top: .25rem; font-family: ui-monospace, Consolas, monospace; font-size: .6875rem; color: var(--muted-foreground); overflow-wrap: anywhere; }

.durf-callout {
  margin: 0 0 1.25rem; padding: .9rem 1.1rem;
  border: 1px solid var(--border); border-left: 4px solid var(--callout-color, var(--accent-solid));
  border-radius: .5rem; background: var(--card);
}
.durf-callout > :last-child { margin-bottom: 0; }
.durf-callout[data-tone="good"] { --callout-color: var(--chart-good); }
.durf-callout[data-tone="warn"] { --callout-color: var(--chart-warn); }
.durf-callout[data-tone="bad"]  { --callout-color: var(--chart-bad); }

/* Themakleur op een element: data-theme-n="1" t/m "6" zet --theme-color (de
   merkkleur), --theme-ink (tekst), --theme-tint (achtergrond) en --theme-on
   (tekst op de volle kleur). Componenten lezen deze vier. */
[data-theme-n="1"] { --theme-color: var(--durf-theme-1); --theme-ink: var(--durf-theme-1-ink); --theme-tint: var(--durf-theme-1-tint); --theme-on: var(--durf-theme-1-on); }
[data-theme-n="2"] { --theme-color: var(--durf-theme-2); --theme-ink: var(--durf-theme-2-ink); --theme-tint: var(--durf-theme-2-tint); --theme-on: var(--durf-theme-2-on); }
[data-theme-n="3"] { --theme-color: var(--durf-theme-3); --theme-ink: var(--durf-theme-3-ink); --theme-tint: var(--durf-theme-3-tint); --theme-on: var(--durf-theme-3-on); }
[data-theme-n="4"] { --theme-color: var(--durf-theme-4); --theme-ink: var(--durf-theme-4-ink); --theme-tint: var(--durf-theme-4-tint); --theme-on: var(--durf-theme-4-on); }
[data-theme-n="5"] { --theme-color: var(--durf-theme-5); --theme-ink: var(--durf-theme-5-ink); --theme-tint: var(--durf-theme-5-tint); --theme-on: var(--durf-theme-5-on); }
[data-theme-n="6"] { --theme-color: var(--durf-theme-6); --theme-ink: var(--durf-theme-6-ink); --theme-tint: var(--durf-theme-6-tint); --theme-on: var(--durf-theme-6-on); }

/* Themablok: kleurt mee met het DURF-thema */
.durf-theme-block { border-left: 4px solid var(--theme-color, var(--accent-solid)); padding: .25rem 0 .25rem 1rem; margin: 0 0 1.25rem; }

/* Themastip voor een kop of label, en een themalabel (chip) */
.durf-theme-dot {
  display: inline-block; width: .65em; height: .65em; margin-right: .45em; border-radius: 50%;
  background: var(--theme-color, var(--accent-solid)); vertical-align: .05em; flex: 0 0 auto;
}
.durf-theme-chip {
  display: inline-flex; align-items: center; gap: .4rem; padding: .15rem .65rem; border-radius: 999px;
  font-size: .75rem; font-weight: 700; letter-spacing: .02em;
  background: var(--theme-tint, var(--muted)); color: var(--theme-ink, var(--muted-foreground));
}
.durf-theme-chip::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: var(--theme-color, currentColor); }
.durf-tag[data-theme-n] { background: var(--theme-tint); color: var(--theme-ink); }

/* Puzzelstuk in de themakleur, met optioneel het themanummer erin (grootte via --durf-puzzle-size):
   <span class="durf-puzzle" data-theme-n="3">3</span>. De vorm is assets/icons/puzzle-piece.svg
   (lip boven en rechts, uitsparing onder), zoals de stukken in het DURF-logo. */
.durf-puzzle {
  --durf-puzzle-size: 2rem;
  position: relative; isolation: isolate; flex: 0 0 auto;
  display: inline-grid; place-items: center; box-sizing: border-box;
  width: var(--durf-puzzle-size); height: var(--durf-puzzle-size);
  padding: calc(var(--durf-puzzle-size) * .22) calc(var(--durf-puzzle-size) * .18) calc(var(--durf-puzzle-size) * .14);
  font: 800 calc(var(--durf-puzzle-size) * .4)/1 var(--font-heading);
  color: var(--theme-on, var(--accent-on)); vertical-align: middle;
}
.durf-puzzle::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--puzzle-color, var(--theme-color, var(--accent-solid)));
  -webkit-mask: url("assets/icons/puzzle-piece.svg") center / contain no-repeat;
          mask: url("assets/icons/puzzle-piece.svg") center / contain no-repeat;
}
/* De DURF-puzzel: zes verschillende stukken, één per thema, die samen een puzzel van 3 x 2 vormen
   (thema 1-3 boven, 4-6 onder). Alle stukken hebben hetzelfde kader (assets/icons/puzzle-set/,
   viewBox -26 -26 152 152), dus stukken op (kolom*100, rij*100) passen precies in elkaar.
   <span class="durf-piece" data-theme-n="3"></span>; grootte via --durf-piece-size. */
.durf-piece {
  --durf-piece-size: 6rem;
  display: inline-block; flex: 0 0 auto; vertical-align: middle;
  width: var(--durf-piece-size); height: var(--durf-piece-size);
  background: var(--puzzle-color, var(--theme-color, var(--accent-solid)));
  -webkit-mask: var(--durf-piece) center / contain no-repeat;
          mask: var(--durf-piece) center / contain no-repeat;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.durf-piece[data-theme-n="1"] { --durf-piece: url("assets/icons/puzzle-set/piece-1.svg"); }
.durf-piece[data-theme-n="2"] { --durf-piece: url("assets/icons/puzzle-set/piece-2.svg"); }
.durf-piece[data-theme-n="3"] { --durf-piece: url("assets/icons/puzzle-set/piece-3.svg"); }
.durf-piece[data-theme-n="4"] { --durf-piece: url("assets/icons/puzzle-set/piece-4.svg"); }
.durf-piece[data-theme-n="5"] { --durf-piece: url("assets/icons/puzzle-set/piece-5.svg"); }
.durf-piece[data-theme-n="6"] { --durf-piece: url("assets/icons/puzzle-set/piece-6.svg"); }

@media print { .durf-puzzle::before { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

/* Kleurstrook met de zes themakleuren, als merkaccent (bijvoorbeeld boven de voet) */
.durf-colour-strip { display: flex; height: .375rem; }
.durf-colour-strip::before { content: ""; flex: 1; background: linear-gradient(90deg,
  var(--durf-theme-1) 0 16.667%, var(--durf-theme-2) 0 33.333%, var(--durf-theme-3) 0 50%,
  var(--durf-theme-4) 0 66.667%, var(--durf-theme-5) 0 83.333%, var(--durf-theme-6) 0); }

/* ---------- 8. Voet ---------- */
.durf-footer { margin-top: 3rem; padding-block: 1.5rem 2.5rem; border-top: 1px solid var(--border); color: var(--muted-foreground); font-size: .875rem; }
.durf-footer a { font-weight: 600; }
html[data-embed] .durf-footer, html[data-embed] .durf-page-head { display: none; }

/* The logo (durf-logo.svg) is the mark without ring text and works on light and dark.
   The round logo with ring text (durf-logo-ring.svg) gets a lighter ring text in dark mode. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) img[src$="durf-logo-ring.svg"] { content: url("assets/durf-logo-ring-dark.svg"); }
}
:root[data-theme="dark"] img[src$="durf-logo-ring.svg"] { content: url("assets/durf-logo-ring-dark.svg"); }

/* SURF-pictogram als masker, in de themakleur of de tekstkleur:
   <span class="durf-pictogram" data-theme-n="3" style="--durf-pictogram: url(.../assets/icons/surf/research/research-01.png)"></span> */
.durf-pictogram {
  display: inline-block; width: 3rem; aspect-ratio: 252 / 242; flex: 0 0 auto; vertical-align: middle;
  background: var(--theme-color, currentColor);
  -webkit-mask: var(--durf-pictogram) center / contain no-repeat;
          mask: var(--durf-pictogram) center / contain no-repeat;
}