/* SwarmFrame UI — gedeelde componenten en layout (Figma Marketing DS-makeover).
   Kernregels uit de DS-readme: pill-CTA's overal (nooit vierkante knoppen),
   badges = mono-uppercase pills met hairline-rand, kaarten gestroked i.p.v.
   geschaduwd, hover = ingehouden (opacity/micro-scale, geen kleurwissels). */

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--canvas);font-family:var(--font-sans);color:var(--ink);-webkit-font-smoothing:antialiased}
a{color:var(--ink);text-decoration:none;transition:opacity var(--transition-fast)}
a:hover{color:var(--ink-muted)}

/* ---------- Buttons (DS Button: primary zwart, secondary hairline, fin=magenta; alles pill) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-xs);
  font-family:var(--font-sans);font-size:var(--button-size);font-weight:var(--button-weight);
  line-height:var(--button-lh);letter-spacing:var(--button-ls);
  border-radius:var(--radius-pill);cursor:pointer;min-height:44px;
  padding:var(--button-padding-y) var(--button-padding-x);
  background:var(--ink);color:var(--on-primary);border:1px solid var(--ink);
  transition:opacity var(--transition-fast),transform var(--transition-fast);
  text-decoration:none;white-space:nowrap}
.btn:hover{opacity:.85;color:var(--on-primary)}
.btn:active{transform:scale(.98)}
.btn.secondary{background:var(--surface-1);color:var(--ink);border-color:var(--hairline)}
.btn.secondary:hover{opacity:1;border-color:var(--ink);color:var(--ink)}
.btn.fin{background:var(--accent-magenta);border-color:var(--accent-magenta);color:var(--on-primary)}
.btn.fin:hover{opacity:.88;color:var(--on-primary)}
.btn.sm{min-height:36px;padding:7px 16px;font-size:13px}
.btn:focus-visible{outline:1px solid var(--focus-ring);outline-offset:2px}
.btn[disabled]{background:var(--surface-2);border-color:var(--surface-2);color:var(--ink-subtle);cursor:default;opacity:1}

/* ---------- Bijlageknop (paperclip) ----------
   Vijf schermen laten een bestand meesturen; ze deden dat met vijf plusjes op
   vijf plaatsen. Eén vorm, één maat, en altijd op de invoerregel: tussen het
   veld en de stuurknop. De ronde icoonknop volgt de pill-vorm van het DS; het
   pad staat in assets/bijlagenvorm.js zodat er maar één paperclip bestaat. */
.fw-clip{width:30px;height:30px;flex:none;border-radius:var(--radius-pill);
  border:1px solid var(--hairline);background:var(--surface-1);color:var(--ink-muted);
  display:inline-flex;align-items:center;justify-content:center;padding:0;cursor:pointer;
  transition:border-color var(--transition-fast),color var(--transition-fast)}
.fw-clip .fw-clip-ic{width:17px;height:17px;display:block}
.fw-clip:hover{border-color:var(--ink);color:var(--ink)}
.fw-clip:focus-visible{outline:1px solid var(--focus-ring);outline-offset:2px}
.fw-clip[disabled]{opacity:.45;cursor:default}
.fw-clip[disabled]:hover{border-color:var(--hairline);color:var(--ink-muted)}
/* op de donkere terminalvoet van het sessiescherm: zelfde knop, andere grond */
.fw-clip.donker{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:rgba(255,255,255,.72)}
.fw-clip.donker:hover{border-color:rgba(255,255,255,.4);color:#fff}
.fw-clip.donker:focus-visible{outline-color:#fff}
.fw-clip.donker[disabled]:hover{border-color:rgba(255,255,255,.14);color:rgba(255,255,255,.72)}

/* ---------- Badge (DS-eyebrowstijl: mono uppercase pill met rand) ---------- */
.badge{display:inline-flex;align-items:center;gap:4px;
  font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:.6px;text-transform:uppercase;
  line-height:1;padding:4px 10px;border-radius:var(--radius-pill);
  background:transparent;color:var(--ink);border:1px solid var(--ink);white-space:nowrap}
.badge.fin{background:transparent;color:var(--accent-magenta);border-color:var(--accent-magenta)}
.badge.ink{background:var(--ink);color:var(--on-primary);border-color:var(--ink)}

/* ---------- Form (DS TextInput: 8px radius, hairline, zwarte focus) ---------- */
input[type=checkbox],input[type=radio]{accent-color:var(--ink)} /* nooit browserblauw in een monochroom systeem */
.field{display:flex;flex-direction:column;gap:var(--space-xs)}
.field>label{font-size:var(--body-sm-size);font-weight:540;color:var(--ink)}
.field.compact{gap:6px}
.field.compact>label{font-size:13px}
.input,.select,.textarea{font-family:var(--font-sans);font-size:var(--body-size);line-height:1.45;color:var(--ink);
  background:var(--surface-1);padding:var(--input-padding-y) var(--input-padding-x);min-height:44px;
  border-radius:var(--radius-input);border:1px solid var(--hairline);outline:none;width:100%;
  transition:border-color var(--transition-fast)}
.input:focus,.select:focus,.textarea:focus{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.select{appearance:none;font-size:14px;padding-right:36px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23555555' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center}
.textarea{min-height:80px;resize:vertical;font-size:14px}
.textarea::placeholder,.input::placeholder{color:var(--ink-subtle)}

/* ---------- App-shell ---------- */
.shell{display:flex;min-height:100vh;max-width:var(--container-max);margin:0 auto}
/* De zijbalk is één schermhoogte hoog en blijft staan bij het scrollen (27/8).
   Daarvoor rekte hij mee met het document, en omdat .sidebar .user met
   margin-top:auto onderaan de balk hangt, stond Account onderaan de PAGINA in
   plaats van onderaan het SCHERM: op een lange lijst moest je ervoor scrollen.
   sticky en niet fixed, anders valt de balk uit de op --container-max
   gecentreerde .shell. align-self is nodig omdat een flexkind anders tot de
   volle shell-hoogte uitrekt en sticky dan geen ruimte heeft om te werken.
   overflow-y houdt de nav zelf scrollbaar op een laag venster, zodat het
   accountblok nooit uit beeld gedrukt wordt. */
.sidebar{width:216px;flex:none;border-right:1px solid var(--hairline-soft);padding:24px 20px;
  display:flex;flex-direction:column;gap:28px;
  position:sticky;top:0;align-self:flex-start;
  height:100vh;height:100dvh;overflow-y:auto}
.wordmark{display:inline-flex;align-items:center;gap:8px;font-weight:540;font-size:17px;letter-spacing:-0.5px;color:var(--ink)}

/* ---------- Merkteken (handoff "Naam en merkteken") ----------
   Twee lobben die elkaar nergens raken, een open spleet ertussen, takken die
   vanuit de spleet naar buiten groeien, en één magenta knoop: de agent die nu
   werkt. Drie trappen, hier als varianten op één inline SVG — de constructie-
   regel is dat bij verkleinen de takken verdwijnen, nooit de contour en nooit
   de spleet: die twee dragen de herkenning.
     volledig  44px+    contour + spleet + takken, alle 38 knopen
     medium    20–32px  idem, maar de fijnste contourknopen weg
     klein     16px     alleen contour + spleet, twaalf knopen
   De agent-knoop zit op een takknoop; valt die weg, dan neemt de klein-variant
   een contourknoop over zodat het magenta accent op elke trap blijft staan.
   Het teken staat als inline SVG in elke sidebar en topbar (zo erft het de
   tekstkleur en zijn de trappen met CSS te sturen); `assets/merkteken.svg` is
   dezelfde vorm als losse asset — pas ze samen aan. */
.merkteken{display:block;flex:none;width:40px;height:40px;color:inherit}
.merkteken .mt-agent-klein{display:none}

.merkteken--groot{width:44px;height:44px}

.merkteken--medium{width:23px;height:23px}
.merkteken--medium .mt-lijnen{stroke-width:1.55}
.merkteken--medium .mt-knoop-vol{display:none}

.merkteken--klein{width:16px;height:16px}
.merkteken--klein .mt-lijnen{stroke-width:2}
.merkteken--klein .mt-takken,
.merkteken--klein .mt-takknoop,
.merkteken--klein .mt-knoop-med,
.merkteken--klein .mt-knoop-vol,
.merkteken--klein .mt-agent{display:none}
.merkteken--klein .mt-knoop{r:2.4} /* geometry-property; browsers zonder steun houden de basisstraal */
.merkteken--klein .mt-agent-klein{display:block;r:2.5} /* zelfde coördinaat als mt-knoop hierboven — straal hier samen aanpassen */

.nav{display:flex;flex-direction:column;gap:2px;font-size:14px}
/* Nav-item met icoon in de merkteken-lijntaal (F5): icoon links, label, en de
   teller rechts. Iconen erven currentColor zodat ze meekleuren met de staat. */
.nav a{padding:9px 12px;color:var(--ink-muted);border-radius:var(--radius-md);border:1px solid transparent;
  display:flex;align-items:center;gap:10px}
.nav a .nav-ic{width:17px;height:17px;flex:none;color:currentColor}
.nav a .nav-label{flex:1}
.nav a #nav-n,.nav a .nav-teller{flex:none}
/* Hover = zachte vulling #f7f7f5, één stap lichter dan actief (F5): actief blijft
   het zwaarst, hover is een hint. De onderstreping vervalt. */
.nav a:hover{color:var(--ink);background:var(--surface-2)}
/* Actieve staat = behandeling B uit het navigatiedocument: zachte vulling, geen
   rand. Een omrande witte pill leest als een invoerveld of een knop, niet als
   "je bent hier" (N2). Gewicht 540, zoals de handoff-README r. 182. */
.nav a.active{background:var(--surface-nav-active);font-weight:540;color:var(--ink)}
.nav a.active:hover{background:var(--surface-nav-active)}   /* actief wint van hover */
/* Vault en Activiteit zijn geen nav-items meer maar wonen in het gebruikersmenu
   (F5); de oude uitgang-/scheidingsstijlen blijven staan voor de menu-opmaak. */
.nav .nav-scheiding{height:1px;background:var(--hairline);margin:10px 12px}
.nav a.uitgang{color:var(--ink-subtle);font-size:13px}
/* N2: de poortenteller is een neutraal getal, geen magenta — magenta is
   uitsluitend het actief-accent. Op alle dertien schermen dezelfde tint,
   ook op Vandaag zelf waar het nav-item actief is. */
#nav-n{color:var(--ink-muted)}
.sidebar .user{margin-top:auto;font-size:13px;color:var(--ink-subtle);line-height:1.5}
.main{flex:1;min-width:0;padding:40px 48px;display:flex;flex-direction:column;gap:24px}

/* Publieke pagina's (drop-form, validator, landing) */
.topbar{height:var(--nav-height);display:flex;align-items:center;justify-content:space-between;
  padding:0 40px;border-bottom:1px solid var(--hairline-soft)}
.topbar .meta{font-size:13px;color:var(--ink-subtle)}

/* ---------- Tekst ---------- */
.page-title{margin:0;font-size:var(--headline-size);font-weight:var(--headline-weight);letter-spacing:var(--headline-ls);line-height:var(--headline-lh)}
.crumb{font-size:13px;color:var(--ink-subtle)}
.muted{color:var(--ink-muted)}
.subtle{color:var(--ink-subtle)}
.mono{font-family:var(--font-mono);font-size:var(--mono-size)}
.hint{font-size:13px;color:var(--ink-subtle)}

/* ---------- Kaarten en rijen (gestroked, niet geschaduwd) ---------- */
.card{background:var(--surface-1);border:1px solid var(--hairline);border-radius:var(--radius-card)}
.card.pad{padding:24px}
.row-card{background:var(--surface-1);border:1px solid var(--hairline);border-radius:var(--radius-card);
  padding:20px 24px;display:flex;align-items:center;gap:20px}

/* Filter-pills */
.pills{display:flex;gap:8px;font-size:13px;flex-wrap:wrap}
.pill{padding:6px 14px;border-radius:var(--radius-pill);border:1px solid var(--hairline);color:var(--ink-muted);
  background:transparent;cursor:pointer;font-family:var(--font-sans);font-size:13px;
  transition:color var(--transition-fast),background var(--transition-fast)}
.pill:hover{color:var(--ink)}
.pill.active{background:var(--ink);border-color:var(--ink);color:var(--on-primary);font-weight:540}

/* Divider-noot onderaan een lijst */
.foot-note{border-top:1px solid var(--hairline-soft);padding-top:16px;font-size:13px;color:var(--ink-subtle)}

/* ---------- Toegankelijkheid ---------- */
/* Eén zichtbare focusring voor alles wat met tab bereikbaar is; de knop had er
   al één, links, tabs, velden en de tekstacties in lijsten niet. */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible,
.tab:focus-visible,.pill:focus-visible,summary:focus-visible{
  outline:1px solid var(--focus-ring);outline-offset:2px;border-radius:var(--radius-sm)}
.input:focus-visible,.select:focus-visible,.textarea:focus-visible{outline:none} /* die tonen hun eigen rand */

/* Alleen voor schermlezers (bv. een label bij een icoonknop) */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Wie beweging liever niet heeft, krijgt de schermen stil — ook de
   pulserende agent-dot en de micro-scale op knoppen. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
  .btn:active{transform:none}
}

/* ---------- Smal scherm (< 880px) ----------
   Adminschermen zijn desktop-first (DS: 1280px-referentie), maar mogen op een
   telefoon niet breken: de sidebar wordt een horizontale balk, kaarten met
   brede tabellen scrollen binnenin, en de vaste topbar-hoogte mag meegroeien. */
@media (max-width:880px){
  .shell{flex-direction:column}
  /* op een telefoon is de balk een horizontale strook bovenaan: geen vaste
     schermhoogte en niet sticky, dat zou de halve pagina opeten */
  .sidebar{width:auto;flex-direction:row;align-items:center;flex-wrap:wrap;gap:12px 20px;
    border-right:none;border-bottom:1px solid var(--hairline-soft);padding:12px 16px;
    position:static;align-self:auto;height:auto;overflow:visible}
  /* rij 1: wordmerk + gebruikersblok, rij 2: de nav */
  .nav{order:3;flex-basis:100%;flex-direction:row;flex-wrap:wrap;gap:2px;font-size:13px}
  .nav a{padding:8px 10px}
  .sidebar .user{order:2;margin-left:auto}
  .main{padding:24px 16px}
  .page-title{font-size:24px;letter-spacing:-0.6px}
  .card{overflow-x:auto} /* brede tabelrijen (runs, gebruikers, projecten) scrollen in de kaart */
  .topbar{height:auto;min-height:var(--nav-height);flex-wrap:wrap;gap:4px 12px;padding:8px 16px}
  .row-card{flex-wrap:wrap}
  /* hit-targets (schermaudit 20/8): knoppen en losse actielinks minstens ±44px
     raakvlak op een telefoon; inline prozalinks blijven ongemoeid */
  button,.btn,.pill,.tab{min-height:44px}
  .nav a,.wordmark{padding-block:12px}
  .fw-arrowlink,.retry,.sectiekop a{padding-block:12px;display:inline-flex;align-items:center}
}

/* ---------- De foutfamilie (briefing #3, F): de storingskaart ----------
   Eén anatomie, vier formaten. Altijd: mono-label (wat), één zin (gevolg),
   één herstelactie, en wat nog wél werkt. Rood (#c41c1c) alleen als dot +
   label — nooit als vlak of rand. Wachten en rij zijn neutraal grijs;
   magenta blijft van de agent en komt in geen enkele faalstaat voor. */
.storing{display:flex;flex-direction:column;gap:8px;background:var(--surface-1);
  border:1px solid var(--hairline);border-radius:var(--radius-card);padding:18px 22px}
.storing-label{display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:.6px;text-transform:uppercase;color:var(--ink-muted)}
.storing-label .dot{width:7px;height:7px;border-radius:var(--radius-pill);background:var(--ink-subtle);flex:none}
.storing.fout .storing-label{color:var(--semantic-error)}
.storing.fout .storing-label .dot{background:var(--semantic-error)}
.storing-titel{font-size:15px;font-weight:540}
.storing-zin{font-size:13px;color:var(--ink-muted);line-height:1.55;max-width:56ch}
.storing-acts{display:flex;align-items:center;gap:14px;margin-top:4px;flex-wrap:wrap}
.storing-nogwel{font-size:12px;color:var(--ink-subtle)}
/* strook: systeembreed onder de topbar/bovenaan de main */
.storing.strook{flex-direction:row;align-items:center;gap:16px;border-radius:0;
  border-left:none;border-right:none;border-top:none;padding:10px 24px}
.storing.strook .storing-zin{margin:0;flex:1}
.storing.strook .storing-titel{display:none}
/* rij: binnen een bestaande lijst (F3, runs als familie) — geen eigen kaart,
   want de lijst is al de kaart; label + zin + één herstelactie op één regel */
.storing.rij{flex-direction:row;align-items:center;gap:14px;padding:0;
  background:transparent;border:none;border-radius:0}
.storing.rij .storing-titel{font-size:14px;font-weight:540;flex:none}
.storing.rij .storing-zin{margin:0;flex:1;font-size:13px}
/* regel: in dialogen en formulieren */
.storing.regel{flex-direction:row;align-items:center;gap:12px;padding:10px 14px;
  border-radius:var(--radius-md);background:var(--surface-2);border-color:transparent}
.storing.regel .storing-zin{margin:0}