/* PCO-beheerscherm. Huisstijl van pco-group.com: signaalrood op wit.
   Ontwerprichting: industriele precisie, een werkbon en geen dashboard. PCO levert
   machines aan bioscopen en de monteur staat aan zo'n machine, dus rechte hoeken,
   harde randen, tabulaire cijfers en rood alleen waar het echt een signaal is.

   Die richting stond er al, maar los uitgevoerd: zes bijna gelijke grijzen, knoppen die
   per scherm anders waren, en losse marges per regel. Hij is nu STRENG gemaakt:
     - een donkere appbalk met daaronder EEN tabrij met onderstreping op de actieve tab;
     - geen omkaderd blok meer binnen een omkaderd blok;
     - de cijfers boven de wachtrij zijn EEN paneel met verticale scheidingslijnen;
     - drie grijzen: tekstgrijs, gedempt grijs, lijngrijs (allemaal AA op wit);
     - EEN knophoogte, drie varianten: primair, omlijnd, stil;
     - een spatieschaal 4/8/12/16/24/32 als variabelen, overal gebruikt.

   GEEN externe bronnen: op de klantomgeving staat het uitgaand verkeer dicht, dus geen
   webfont en geen CDN. Dat dwingt een systeemstack af, en die is met de juiste maten en
   letterafstand prima. De enige externe verwijzing is het ingebakken logo als data-URI; de CSP laat
   data: toe onder img-src en er staat een test op die de twee vergelijkt. */

:root{
  /* -- spatieschaal. Elke marge, padding en gap in dit blad komt hieruit. Losse
        waarden als .85rem of .55rem waren de reden dat niets uitlijnde. -- */
  --r1:4px; --r2:8px; --r3:12px; --r4:16px; --r6:24px; --r8:32px;

  /* -- signaalrood: alleen waar iets een signaal IS -- */
  --rood:#e2000f;          /* het echte PCO-rood, uit hun logo-svg */
  --rood-diep:#b30009;
  --rood-was:#fdecec;

  /* -- drie grijzen, meer niet. Gemeten op wit:
        inkt 16,9:1  gedempt 6,1:1  (beide ruim boven de 4,5:1 van WCAG AA).
        lijngrijs draagt nooit tekst, alleen randen en scheidingslijnen. -- */
  --inkt:#1a1d21;          /* tekstgrijs */
  --gedempt:#5c636d;       /* gedempt grijs: bijschrift, label, kolomkop */
  --lijn:#d6dae0;          /* lijngrijs: elke rand */

  /* -- de chatdraad. Twee groenen, alleen hier gebruikt. Ze dragen geen betekenis:
        groen als SIGNAAL blijft --goed, dat is een andere, donkerdere kleur. Gemeten
        met --inkt erop: draadvel 14,5:1 en belgroen 14,3:1; met --gedempt (het
        tijdstempel in de bel) 5,2:1 en 5,1:1, dus allebei boven de 4,5:1 van AA. -- */
  --draadvel:#e7f0e2;      /* de ondergrond van het gesprek */
  --belgroen:#dcf3c8;      /* de bel met wat de bot terugstuurde */

  /* -- de twee andere signaalkleuren; geen grijs, dus ze tellen niet mee -- */
  --goed:#0e6b3a;   --goed-was:#eef7f1;
  --let-op:#8a5a00; --let-op-was:#fdf6e7;

  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI Variable","Segoe UI",Ubuntu,
         "Helvetica Neue",Helvetica,sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Mono","Roboto Mono",Menlo,Consolas,monospace;

  /* De breedte van de tekstkolom. De appbalk rekent zijn zijmarge hieruit, zodat logo,
     tabs en inhoud op EEN kolomrand staan zonder een tweede maat in een mediablok. */
  --breed:58rem;
  --kant:max(var(--r4), calc((100% - var(--breed))/2 + var(--r4)));
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:#fff; color:var(--inkt);
  font:16px/1.55 var(--sans); font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

/* ---- 1. De appbalk. Donker, over de volle breedte, met de tabrij eronder als een
        eigen witte strook. De navigatie zweefde eerder in het wit en had niets om
        aan vast te zitten; nu staat de actieve tab met een rode onderstreping vast
        aan de onderrand van de strook.
        Header heeft zelf GEEN zijpadding: dan is de omsluitende doos van nav even
        breed als die van main, en levert dezelfde --kant-berekening dezelfde rand. -- */
header{
  background:var(--inkt); padding:0;
  display:flex; flex-wrap:wrap; align-items:center;
}

/* Het echte PCO-logo, als data-URI want er mag niets extern geladen worden. Op de
   donkere balk staat het op een wit plaatje: de letters in het merk zijn uitsparingen
   en zouden op zwart dichtlopen. */
header::before{
  content:""; order:0; flex:0 0 auto; display:block;
  width:88px; height:30px; padding:var(--r2) var(--r3);
  margin:var(--r2) 0 var(--r2) var(--kant); box-sizing:content-box;
  background:#fff url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJFYmVuZV8xX0tvcGllIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE3Ni4xcHgiIGhlaWdodD0iNzIuNHB4IiB2aWV3Qm94PSItMjAxLjYgMzgzLjggMTc2LjEgNzIuNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAtMjAxLjYgMzgzLjggMTc2LjEgNzIuNDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPiA8c3R5bGUgdHlwZT0idGV4dC9jc3MiPiAuc3Qwe2ZpbGw6I0UyMDAwRjt9IC5zdDF7ZGlzcGxheTpub25lO30gLnN0MntkaXNwbGF5OmlubGluZTtmaWxsOiNFMjAwMEY7fSA8L3N0eWxlPiA8Zz4gPGc+IDxnPiA8cGF0aCBjbGFzcz0ic3QwIiBkPSJNLTU0LjgsNDQyLjhjLTguMiwwLTE1LjEtMi45LTIwLjctOC42Yy01LjctNS43LTguNS0xMi43LTguNS0yMC45YzAtOC4yLDIuOC0xNS4yLDguNS0yMC45IGM1LjctNS43LDEyLjYtOC42LDIwLjctOC42YzguMiwwLDE1LjEsMi45LDIwLjgsOC42YzUuNyw1LjcsOC41LDEyLjcsOC41LDIwLjljMCw4LjItMi44LDE1LjItOC41LDIwLjkgQy0zOS43LDQzOS45LTQ2LjYsNDQyLjgtNTQuOCw0NDIuOHogTS01NC44LDQwNS43Yy0xLjYsMC0zLDAuNi00LDEuN2MtMS4xLDEuMS0xLjYsMi42LTEuNiw0LjNzMC41LDMuMSwxLjYsNC4zIGMxLjEsMS4xLDIuNCwxLjcsNCwxLjdjMS42LDAsMy0wLjYsNC4xLTEuN2MxLjEtMS4xLDEuNi0yLjYsMS42LTQuM3MtMC41LTMuMS0xLjYtNC4zQy01MS44LDQwNi4zLTUzLjEsNDA1LjctNTQuOCw0MDUuN3oiLz4gPC9nPiA8Zz4gPGc+IDxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0tMTk1LjUsNDIzLjFjLTAuNiwwLTAuOSwwLjMtMC45LDF2MC41aDEuOFY0MjRDLTE5NC42LDQyMy41LTE5NC45LDQyMy4xLTE5NS41LDQyMy4xeiBNLTE5My45LDQxMi42IGMtMS4zLDAtMi40LDAuMi0yLjQsMS4yYzAsMC45LDAuOSwxLjIsMi40LDEuMmMxLjUsMCwyLjQtMC4zLDIuNC0xLjJDLTE5MS41LDQxMy0xOTIuMSw0MTIuNi0xOTMuOSw0MTIuNnogTS0xOTUuNSwzOTIuMSBjLTAuNSwwLTAuOSwwLjItMC45LDF2MC42aDEuOXYtMC41Qy0xOTQuNSwzOTIuMy0xOTQuOSwzOTIuMS0xOTUuNSwzOTIuMXogTS0xNjcsMzg0LjdoLTM0LjZ2NTcuMWgyNS4zdi0yMy41IGM0LjMsMy4zLDguNyw1LDEzLjEsNWM1LjIsMCw5LjctMS45LDEzLjQtNS42YzMuNy0zLjcsNS42LTguMyw1LjYtMTMuNmMwLTUuNS0yLTEwLTUuOS0xMy44IEMtMTU0LjEsMzg2LjYtMTU5LjcsMzg0LjctMTY3LDM4NC43eiBNLTE5Ny43LDM5Mi45YzAtMS44LDEuMi0yLjUsMi4zLTIuNWMwLjgsMCwyLjIsMC40LDIuMiwyLjV2MC43aDMuMXYxLjdoLTcuNlYzOTIuOXogTS0xOTMuOCw0MzcuMWMtMi4zLDAtNC0xLjQtNC0zLjRjMC0wLjcsMC4yLTEuMywwLjYtMmgxLjZjLTAuNSwwLjctMC43LDEuMS0wLjcsMS44YzAsMS4yLDAuOSwxLjksMi42LDEuOSBjMS40LDAsMi40LTAuNSwyLjQtMS41YzAtMC4yLTAuMS0wLjUtMC4yLTAuN2gtMS4zdjAuOWgtMS4zdi0yLjZoMy4zYzAuNSwwLjcsMC45LDEuNSwwLjksMi41IEMtMTkwLDQzNS43LTE5MS42LDQzNy4xLTE5My44LDQzNy4xeiBNLTE5MC4xLDQyNC42djEuN2gtNy42di0yLjVjMC0xLjYsMC45LTIuNCwyLjEtMi40YzAuOSwwLDEuNCwwLjQsMS44LDEuMyBjMC40LTAuNywyLjEtMC45LDMuNy0xLjZ2MS44bC0xLjQsMC40Yy0xLjYsMC41LTEuOCwwLjYtMS44LDEuM0gtMTkwLjF6IE0tMTk0LDQxNi44Yy0yLjYsMC0zLjgtMS41LTMuOC0zYzAtMS40LDEuMS0zLDMuOS0zIGMzLDAsMy45LDEuNywzLjksM0MtMTkwLDQxNS4zLTE5MS4xLDQxNi44LTE5NCw0MTYuOHogTS0xOTIuNyw0MDUuOWgtNXYtMS43aDUuMmMwLjYsMCwxLTAuMywxLTAuOWMwLTAuNy0wLjQtMC45LTEuMS0wLjloLTUuMSB2LTEuN2g1YzEuNywwLDIuNywwLjksMi43LDIuN0MtMTkwLDQwNC44LTE5MC44LDQwNS45LTE5Mi43LDQwNS45eiBNLTE2OS43LDQwOGMtMS4yLDEuMi0yLjcsMS44LTQuNiwxLjggYy0wLjYsMC0xLjMtMC4xLTIuMS0wLjN2LTEyLjRoMi43YzEuOCwwLDMuMywwLjYsNC4zLDEuN2MxLDEuMSwxLjUsMi42LDEuNSw0LjVDLTE2Ny45LDQwNS4yLTE2OC41LDQwNi44LTE2OS43LDQwOHogTS0xMDUsNDE3LjJjLTIuOCwwLTQuOS0wLjQtNi40LTEuMmMtMS41LTAuOC0yLjItMS45LTIuMi0zLjNjMC0yLjksMi43LTQuNCw4LTQuNGMzLjcsMCw3LjIsMC41LDEwLjMsMS42bDEwLjYtMjAuMiBjLTIuOC0xLjgtNi40LTMuMy0xMC42LTQuNGMtNC4zLTEuMS04LjQtMS42LTEyLjQtMS42Yy05LjIsMC0xNi44LDIuOC0yMi44LDguNGMtNiw1LjYtOSwxMi44LTksMjEuNGMwLDguMiwyLjksMTUuMSw4LjYsMjAuNyBjNS44LDUuNiwxMy41LDguNCwyMy4yLDguNGMzLjksMCw3LjktMC41LDEyLjItMS42YzQuMi0xLjEsNy45LTIuNSwxMC44LTQuM2wtMTAuNi0yMS42Qy05OCw0MTYuNi0xMDEuMiw0MTcuMi0xMDUsNDE3LjJ6Ii8+IDwvZz4gPC9nPiA8ZyBjbGFzcz0ic3QxIj4gPHBhdGggY2xhc3M9InN0MiIgZD0iTS0yMDEuNiw0NDYuOWgyLjVjMS44LDAsMi41LDEuMiwyLjUsMi4zYzAsMC44LTAuNCwyLjItMi41LDIuMmgtMC43djMuMWgtMS43VjQ0Ni45eiBNLTE5OS40LDQ1MC4xIGMwLjgsMCwxLTAuNCwxLTAuOWMwLTAuNS0wLjItMC45LTEtMC45aC0wLjZ2MS45SC0xOTkuNHoiLz4gPHBhdGggY2xhc3M9InN0MiIgZD0iTS0xOTEuNSw0NDYuOGMxLjQsMCwzLDEuMSwzLDMuOWMwLDMtMS43LDMuOS0zLDMuOWMtMS41LDAtMy0xLjEtMy00Qy0xOTQuNSw0NDguMS0xOTMsNDQ2LjgtMTkxLjUsNDQ2Ljh6IE0tMTkxLjUsNDUzLjFjMC44LDAsMS4yLTAuNiwxLjItMi40YzAtMS4zLTAuMi0yLjQtMS4yLTIuNGMtMC45LDAtMS4yLDAuOS0xLjIsMi40Qy0xOTIuNyw0NTIuMi0xOTIuNCw0NTMuMS0xOTEuNSw0NTMuMXoiLz4gPHBhdGggY2xhc3M9InN0MiIgZD0iTS0xODUuOSw0NDYuOWgyLjVjMS44LDAsMi41LDEuMiwyLjUsMi4zYzAsMC44LTAuNCwyLjItMi41LDIuMmgtMC43djMuMWgtMS43VjQ0Ni45eiBNLTE4My43LDQ1MC4xIGMwLjgsMCwxLTAuNCwxLTAuOWMwLTAuNS0wLjItMC45LTEtMC45aC0wLjZ2MS45SC0xODMuN3oiLz4gPHBhdGggY2xhc3M9InN0MiIgZD0iTS0xNzMuOSw0NTQuMWMtMC41LDAuNC0xLDAuNi0xLjgsMC42Yy0xLjgsMC0zLjEtMS41LTMuMS0zLjhjMC0yLjQsMS4yLTQsMy4xLTRjMC42LDAsMS4yLDAuMSwxLjcsMC40djEuNSBjLTAuNi0wLjMtMC45LTAuNC0xLjMtMC40Yy0xLDAtMS43LDAuOC0xLjcsMi40YzAsMS42LDAuNiwyLjUsMS42LDIuNWMwLjQsMCwxLTAuMiwxLjQtMC42VjQ1NC4xeiIvPiA8cGF0aCBjbGFzcz0ic3QyIiBkPSJNLTE2OC41LDQ0Ni44YzEuNCwwLDMsMS4xLDMsMy45YzAsMy0xLjcsMy45LTMsMy45Yy0xLjUsMC0zLTEuMS0zLTRDLTE3MS41LDQ0OC4xLTE3MCw0NDYuOC0xNjguNSw0NDYuOHogTS0xNjguNSw0NTMuMWMwLjgsMCwxLjItMC42LDEuMi0yLjRjMC0xLjMtMC4yLTIuNC0xLjItMi40Yy0wLjksMC0xLjIsMC45LTEuMiwyLjRDLTE2OS43LDQ1Mi4yLTE2OS40LDQ1My4xLTE2OC41LDQ1My4xeiIvPiA8cGF0aCBjbGFzcz0ic3QyIiBkPSJNLTE2Mi45LDQ0Ni45aDIuNWMxLjYsMCwyLjQsMC45LDIuNCwyLjFjMCwwLjktMC40LDEuNC0xLjMsMS44YzAuNywwLjQsMC45LDIuMSwxLjYsMy43aC0xLjhsLTAuNC0xLjQgYy0wLjUtMS42LTAuNi0xLjgtMS4zLTEuOHYzLjJoLTEuN1Y0NDYuOXogTS0xNjAuNiw0NTBjMC42LDAsMC45LTAuMywwLjktMC45YzAtMC42LTAuMy0wLjktMS0wLjloLTAuNXYxLjhILTE2MC42eiIvPiA8cGF0aCBjbGFzcz0ic3QyIiBkPSJNLTE1NS4zLDQ0Ni45aDEuNmwyLjEsNC4zaDB2LTQuM2gxLjZ2Ny42aC0xLjVsLTIuMi00LjVoMHY0LjVoLTEuNlY0NDYuOXoiLz4gPHBhdGggY2xhc3M9InN0MiIgZD0iTS0xNDEuOSw0NDYuOWgxLjZsMi4xLDQuM2gwdi00LjNoMS42djcuNmgtMS41bC0yLjItNC41aDB2NC41aC0xLjZWNDQ2Ljl6Ii8+IDxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0tMTMyLjMsNDQ2LjloMS44bDIsNy42aC0xLjdsLTAuNC0xLjZoLTEuN2wtMC40LDEuNmgtMS43TC0xMzIuMyw0NDYuOXogTS0xMzAuOCw0NTEuN2wtMC42LTIuOGgwbC0wLjYsMi44IEgtMTMwLjh6Ii8+IDxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0tMTIxLjgsNDU0LjFjLTAuNSwwLjQtMSwwLjYtMS44LDAuNmMtMS44LDAtMy4xLTEuNS0zLjEtMy44YzAtMi40LDEuMi00LDMuMS00YzAuNiwwLDEuMiwwLjEsMS43LDAuNHYxLjUgYy0wLjYtMC4zLTAuOS0wLjQtMS4zLTAuNGMtMSwwLTEuNywwLjgtMS43LDIuNGMwLDEuNiwwLjYsMi41LDEuNiwyLjVjMC40LDAsMS0wLjIsMS40LTAuNlY0NTQuMXoiLz4gPHBhdGggY2xhc3M9InN0MiIgZD0iTS0xMTksNDQ2LjloMS43djMuMWgxLjl2LTMuMWgxLjd2Ny42aC0xLjd2LTMuMmgtMS45djMuMmgtMS43VjQ0Ni45eiIvPiA8cGF0aCBjbGFzcz0ic3QyIiBkPSJNLTEwOC4xLDQ0Ni44YzEuNCwwLDMsMS4xLDMsMy45YzAsMy0xLjcsMy45LTMsMy45Yy0xLjUsMC0zLTEuMS0zLTRDLTExMS4xLDQ0OC4xLTEwOS42LDQ0Ni44LTEwOC4xLDQ0Ni44eiBNLTEwOC4xLDQ1My4xYzAuOCwwLDEuMi0wLjYsMS4yLTIuNGMwLTEuMy0wLjItMi40LTEuMi0yLjRjLTAuOSwwLTEuMiwwLjktMS4yLDIuNEMtMTA5LjMsNDUyLjItMTA5LDQ1My4xLTEwOC4xLDQ1My4xeiIvPiA8cGF0aCBjbGFzcz0ic3QyIiBkPSJNLTEwMi43LDQ1Mi40YzAuNywwLjYsMS4xLDAuOCwxLjYsMC44YzAuNCwwLDAuNy0wLjMsMC43LTAuNmMwLTEuMS0yLjQtMS45LTIuNC0zLjhjMC0xLjEsMC45LTEuOSwyLjItMS45IGMwLjUsMCwxLjEsMC4xLDEuNywwLjV2MS40Yy0wLjgtMC40LTEuMS0wLjUtMS41LTAuNWMtMC40LDAtMC43LDAuMi0wLjcsMC41YzAsMC45LDIuNSwyLDIuNSwzLjhjMCwxLjItMC45LDIuMS0yLjIsMi4xIGMtMC42LDAtMS4xLTAuMi0xLjktMC42VjQ1Mi40eiIvPiA8cGF0aCBjbGFzcz0ic3QyIiBkPSJNLTkwLjksNDQ2LjloNC40djEuM2gtMi43djEuOGgyLjV2MS4zaC0yLjV2MS45aDIuOHYxLjNoLTQuNVY0NDYuOXoiLz4gPHBhdGggY2xhc3M9InN0MiIgZD0iTS04NC4xLDQ1MC43YzAtMi43LDEuNS0zLjksMy0zLjljMC44LDAsMS41LDAuMywyLDAuOWMwLjcsMC43LDEsMS43LDEsM2MwLDEuOS0wLjcsMy4yLTEuOSwzLjcgYzAuMywwLjQsMC44LDAuNiwxLjIsMC42YzAuMiwwLDAuMiwwLDAuNS0wLjFsMC4xLDBsMC4yLDAuMWwtMC45LDEuMmMtMS4zLDAtMi4zLTAuOS0yLjctMS43Qy04My4zLDQ1NC4yLTg0LjEsNDUyLjgtODQuMSw0NTAuNyB6IE0tODEuMiw0NTMuMWMwLjksMCwxLjItMC43LDEuMi0yLjRjMC0xLjQtMC4yLTIuNC0xLjItMi40Yy0wLjksMC0xLjIsMC44LTEuMiwyLjRDLTgyLjQsNDUyLjMtODIuMSw0NTMuMS04MS4yLDQ1My4xeiIvPiA8cGF0aCBjbGFzcz0ic3QyIiBkPSJNLTczLjksNDQ2Ljl2NS4yYzAsMC42LDAuMywxLDAuOSwxYzAuNywwLDAuOS0wLjQsMC45LTEuMXYtNS4xaDEuN3Y1YzAsMS43LTAuOSwyLjctMi43LDIuNyBjLTEuNiwwLTIuNy0wLjgtMi43LTIuN3YtNUgtNzMuOXoiLz4gPHBhdGggY2xhc3M9InN0MiIgZD0iTS02Ny41LDQ0Ni45aDEuN3Y3LjZoLTEuN1Y0NDYuOXoiLz4gPHBhdGggY2xhc3M9InN0MiIgZD0iTS02Mi44LDQ0Ni45aDIuNWMxLjgsMCwyLjUsMS4yLDIuNSwyLjNjMCwwLjgtMC40LDIuMi0yLjUsMi4yaC0wLjd2My4xaC0xLjdWNDQ2Ljl6IE0tNjAuNiw0NTAuMSBjMC44LDAsMS0wLjQsMS0wLjljMC0wLjUtMC4yLTAuOS0xLTAuOWgtMC42djEuOUgtNjAuNnoiLz4gPHBhdGggY2xhc3M9InN0MiIgZD0iTS01NS4zLDQ0Ni45aDEuNmwxLjcsMy4xbDEuNy0zLjFoMS42djcuNmgtMS42di00LjloMGwtMS41LDIuOWgtMC4zbC0xLjUtMi45aDB2NC45aC0xLjZWNDQ2Ljl6Ii8+IDxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0tNDUuOCw0NDYuOWg0LjR2MS4zaC0yLjd2MS44aDIuNXYxLjNoLTIuNXYxLjloMi44djEuM2gtNC41VjQ0Ni45eiIvPiA8cGF0aCBjbGFzcz0ic3QyIiBkPSJNLTM4LjcsNDQ2LjloMS42bDIuMSw0LjNoMHYtNC4zaDEuNnY3LjZoLTEuNWwtMi4yLTQuNWgwdjQuNWgtMS42VjQ0Ni45eiIvPiA8cGF0aCBjbGFzcz0ic3QyIiBkPSJNLTI5LjIsNDQ4LjNILTMxdi0xLjNoNS4ydjEuM2gtMS43djYuM2gtMS43VjQ0OC4zeiIvPiA8L2c+IDwvZz4gPGc+IDxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0tMjAxLjYsNDUyLjRjMC43LDAuNiwxLjEsMC44LDEuNiwwLjhjMC40LDAsMC43LTAuMywwLjctMC42YzAtMS4xLTIuNC0xLjktMi40LTMuOGMwLTEuMSwwLjktMS45LDIuMi0xLjkgYzAuNSwwLDEuMSwwLjEsMS43LDAuNXYxLjRjLTAuOC0wLjQtMS4xLTAuNS0xLjUtMC41Yy0wLjQsMC0wLjcsMC4yLTAuNywwLjVjMCwwLjksMi41LDIsMi41LDMuOGMwLDEuMi0wLjksMi4xLTIuMiwyLjEgYy0wLjYsMC0xLjEtMC4yLTEuOS0wLjZWNDUyLjR6Ii8+IDxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0tMTkyLjYsNDQ2LjloMS42bDIuMSw0LjNoMHYtNC4zaDEuNnY3LjZoLTEuNWwtMi4yLTQuNWgwdjQuNWgtMS42VjQ0Ni45eiIvPiA8cGF0aCBjbGFzcz0ic3QwIiBkPSJNLTE4MC44LDQ0Ni45aDEuOGwyLDcuN2gtMS43bC0wLjQtMS42aC0xLjdsLTAuNCwxLjZoLTEuN0wtMTgwLjgsNDQ2Ljl6IE0tMTc5LjMsNDUxLjdsLTAuNi0yLjhoMGwtMC42LDIuOCBILTE3OS4zeiIvPiA8cGF0aCBjbGFzcz0ic3QwIiBkPSJNLTE2OCw0NTQuMWMtMC41LDAuNC0xLDAuNi0xLjgsMC42Yy0xLjgsMC0zLjEtMS41LTMuMS0zLjhjMC0yLjQsMS4yLTQsMy4xLTRjMC42LDAsMS4yLDAuMSwxLjcsMC40djEuNSBjLTAuNi0wLjMtMC45LTAuNC0xLjMtMC40Yy0xLDAtMS43LDAuOC0xLjcsMi40YzAsMS42LDAuNiwyLjUsMS42LDIuNWMwLjQsMCwxLTAuMiwxLjQtMC42VjQ1NC4xeiIvPiA8cGF0aCBjbGFzcz0ic3QwIiBkPSJNLTE2My4xLDQ0Ni45aDEuN3YzLjdoMGwxLjktMy43aDEuN2wtMS45LDMuNmwyLjQsNGgtMS45bC0yLjItMy43aDB2My43aC0xLjdWNDQ2Ljl6Ii8+IDxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0tMTUyLjgsNDQ2LjloNHYxLjNoLTIuM3YxLjhoMi4ydjEuM2gtMi4ydjMuMmgtMS43VjQ0Ni45eiIvPiA8cGF0aCBjbGFzcz0ic3QwIiBkPSJNLTE0MS40LDQ0Ni44YzEuNCwwLDMsMS4xLDMsMy45YzAsMy0xLjcsMy45LTMsMy45Yy0xLjUsMC0zLTEuMS0zLTRDLTE0NC40LDQ0OC4xLTE0Mi45LDQ0Ni44LTE0MS40LDQ0Ni44eiBNLTE0MS40LDQ1My4xYzAuOCwwLDEuMi0wLjYsMS4yLTIuNGMwLTEuMy0wLjItMi40LTEuMi0yLjRjLTAuOSwwLTEuMiwwLjktMS4yLDIuNEMtMTQyLjcsNDUyLjItMTQyLjQsNDUzLjEtMTQxLjQsNDUzLjF6Ii8+IDxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0tMTMwLjksNDQ2LjhjMS40LDAsMywxLjEsMywzLjljMCwzLTEuNywzLjktMywzLjljLTEuNSwwLTMtMS4xLTMtNEMtMTMzLjksNDQ4LjEtMTMyLjQsNDQ2LjgtMTMwLjksNDQ2Ljh6IE0tMTMwLjksNDUzLjFjMC44LDAsMS4yLTAuNiwxLjItMi40YzAtMS4zLTAuMi0yLjQtMS4yLTIuNGMtMC45LDAtMS4yLDAuOS0xLjIsMi40Qy0xMzIuMSw0NTIuMi0xMzEuOSw0NTMuMS0xMzAuOSw0NTMuMXoiLz4gPHBhdGggY2xhc3M9InN0MCIgZD0iTS0xMjMsNDQ2LjloMi4yYzIuNCwwLDMuMywxLjksMy4zLDMuN2MwLDEuNy0wLjgsMy45LTMuMiwzLjloLTIuM1Y0NDYuOXogTS0xMjAuOSw0NTMuM2MxLjIsMCwxLjYtMSwxLjYtMi41IGMwLTEuNC0wLjQtMi42LTEuNS0yLjZoLTAuNXY1SC0xMjAuOXoiLz4gPHBhdGggY2xhc3M9InN0MCIgZD0iTS0xMDUuNSw0NTIuNGMwLjcsMC42LDEuMSwwLjgsMS42LDAuOGMwLjQsMCwwLjctMC4zLDAuNy0wLjZjMC0xLjEtMi40LTEuOS0yLjQtMy44YzAtMS4xLDAuOS0xLjksMi4yLTEuOSBjMC41LDAsMS4xLDAuMSwxLjcsMC41djEuNGMtMC44LTAuNC0xLjEtMC41LTEuNS0wLjVjLTAuNCwwLTAuNywwLjItMC43LDAuNWMwLDAuOSwyLjUsMiwyLjUsMy44YzAsMS4yLTAuOSwyLjEtMi4yLDIuMSBjLTAuNiwwLTEuMS0wLjItMS45LTAuNlY0NTIuNHoiLz4gPHBhdGggY2xhc3M9InN0MCIgZD0iTS05My45LDQ0Ni44YzEuNCwwLDMsMS4xLDMsMy45YzAsMy0xLjcsMy45LTMsMy45Yy0xLjUsMC0zLTEuMS0zLTRDLTk2LjksNDQ4LjEtOTUuMyw0NDYuOC05My45LDQ0Ni44eiBNLTkzLjksNDUzLjFjMC44LDAsMS4yLTAuNiwxLjItMi40YzAtMS4zLTAuMi0yLjQtMS4yLTIuNGMtMC45LDAtMS4yLDAuOS0xLjIsMi40Qy05NS4xLDQ1Mi4yLTk0LjgsNDUzLjEtOTMuOSw0NTMuMXoiLz4gPHBhdGggY2xhc3M9InN0MCIgZD0iTS04Niw0NDYuOWgxLjd2Ni4yaDIuOHYxLjRILTg2VjQ0Ni45eiIvPiA8cGF0aCBjbGFzcz0ic3QwIiBkPSJNLTc1LjMsNDQ2Ljl2NS4yYzAsMC42LDAuMywxLDAuOSwxYzAuNywwLDAuOS0wLjQsMC45LTEuMXYtNS4xaDEuN3Y1YzAsMS43LTAuOSwyLjctMi43LDIuNyBjLTEuNiwwLTIuNy0wLjgtMi43LTIuN3YtNUgtNzUuM3oiLz4gPHBhdGggY2xhc3M9InN0MCIgZD0iTS02NS41LDQ0OC4yaC0xLjd2LTEuM2g1LjJ2MS4zaC0xLjd2Ni4zaC0xLjdWNDQ4LjJ6Ii8+IDxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0tNTcuNCw0NDYuOWgxLjd2Ny42aC0xLjdWNDQ2Ljl6Ii8+IDxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0tNDcuOCw0NDYuOGMxLjQsMCwzLDEuMSwzLDMuOWMwLDMtMS43LDMuOS0zLDMuOWMtMS41LDAtMy0xLjEtMy00Qy01MC44LDQ0OC4xLTQ5LjMsNDQ2LjgtNDcuOCw0NDYuOHogTS00Ny44LDQ1My4xYzAuOCwwLDEuMi0wLjYsMS4yLTIuNGMwLTEuMy0wLjItMi40LTEuMi0yLjRjLTAuOSwwLTEuMiwwLjktMS4yLDIuNEMtNDksNDUyLjItNDguNyw0NTMuMS00Ny44LDQ1My4xeiIvPiA8cGF0aCBjbGFzcz0ic3QwIiBkPSJNLTM5LjksNDQ2LjloMS42bDIuMSw0LjNoMHYtNC4zaDEuNnY3LjZoLTEuNWwtMi4yLTQuNWgwdjQuNWgtMS42VjQ0Ni45eiIvPiA8cGF0aCBjbGFzcz0ic3QwIiBkPSJNLTI5LjYsNDUyLjRjMC43LDAuNiwxLjEsMC44LDEuNiwwLjhjMC40LDAsMC43LTAuMywwLjctMC42YzAtMS4xLTIuNC0xLjktMi40LTMuOGMwLTEuMSwwLjktMS45LDIuMi0xLjkgYzAuNSwwLDEuMSwwLjEsMS43LDAuNXYxLjRjLTAuOC0wLjQtMS4xLTAuNS0xLjUtMC41Yy0wLjQsMC0wLjcsMC4yLTAuNywwLjVjMCwwLjksMi41LDIsMi41LDMuOGMwLDEuMi0wLjksMi4xLTIuMiwyLjEgYy0wLjYsMC0xLjEtMC4yLTEuOS0wLjZWNDUyLjR6Ii8+IDwvZz4gPC9nPiA8L3N2Zz4=") no-repeat center;
  background-size:contain; background-origin:content-box;
}

header .wie{
  order:1; margin:0 var(--kant) 0 auto; padding:var(--r2) 0;
  color:rgba(255,255,255,.72); font-size:.8rem; letter-spacing:.01em;
}
header .wie b{color:#fff; font-weight:650}

/* De tabrij: EEN strook onder de balk, wit, over de volle breedte, met de kolomrand
   van de inhoud. Wat er niet op een regel past valt door naar de tweede regel -- niet
   wegschuiven, want dan is de actieve tab op een telefoon onzichtbaar. */
nav{
  order:2; flex:1 0 100%; margin:0;
  display:flex; flex-wrap:wrap; gap:0;
  padding:0 var(--kant); background:#fff; border-bottom:1px solid var(--lijn);
}
nav a{
  display:flex; align-items:center; padding:var(--r3);
  min-height:48px; margin-bottom:-1px;
  text-decoration:none; color:var(--gedempt);
  font-size:.92rem; font-weight:600;
  border-bottom:2px solid transparent;
  transition:color .12s ease, border-color .12s ease;
}
nav a:first-child{padding-left:0}
nav a:hover{color:var(--inkt)}
nav a.actief{color:var(--inkt); font-weight:700; border-bottom-color:var(--rood)}

main{max-width:var(--breed); margin:0 auto; padding:var(--r6) var(--r4) var(--r8)}

h1{
  font-size:1.5rem; font-weight:750; letter-spacing:-.018em;
  margin:0 0 var(--r1); line-height:1.2;
}
h2{font-size:1.02rem; font-weight:700; letter-spacing:-.008em; margin:var(--r6) 0 var(--r2)}
h3{margin:0 0 var(--r2); font-size:1.02rem; font-weight:700; letter-spacing:-.008em}
p{margin:var(--r2) 0}

/* ---- 2. De kaart als werkbon. Een rand, een linkerbies, geen schaduw. Alles wat
        HIERBINNEN staat krijgt hooguit een linkerbies en nooit een eigen kader:
        een omkaderd blok in een omkaderd blok leest als een storing. ---- */
.kaart{
  background:#fff; border:1px solid var(--lijn); border-left:3px solid var(--lijn);
  border-radius:2px; padding:var(--r4); margin-bottom:var(--r3);
}
main > .kaart, main > form > .kaart{animation:opkomst .26s ease both}
.kaart:nth-of-type(2){animation-delay:.04s}
.kaart:nth-of-type(3){animation-delay:.08s}
.kaart:nth-of-type(4){animation-delay:.12s}
.kaart:nth-of-type(n+5){animation-delay:.16s}
@keyframes opkomst{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  main > .kaart, main > form > .kaart{animation:none}
}

/* ---- merkjes: ticket, onderwerp, rol. Voorrang is het enige dat rood mag ---- */
.merk{
  display:inline-block; padding:var(--r1) var(--r2); margin:0 var(--r1) var(--r1) 0;
  border:1px solid var(--lijn); border-radius:2px; background:#fff;
  color:var(--gedempt); font-size:.72rem; font-weight:700;
  letter-spacing:.07em; text-transform:uppercase; vertical-align:middle;
  line-height:1.5;
}
.merk.voorrang{
  background:var(--rood); border-color:var(--rood); color:#fff; letter-spacing:.08em;
}
.merk.goed{border-color:var(--goed); color:var(--goed); background:var(--goed-was)}
/* Niet aangekomen is een SIGNAAL en geen bijschrift: dit is de enige stand waarin een
   mens iets moet doen dat niemand anders gaat doen. */
.merk.niet-aangekomen{background:var(--rood); border-color:var(--rood); color:#fff}

.uitleg{color:var(--gedempt); font-size:.88rem; line-height:1.5}
.groot{
  font-size:2.4rem; font-weight:750; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums; line-height:1.05; margin:0 0 var(--r1);
}

blockquote{
  margin:var(--r3) 0; padding:var(--r3) var(--r4);
  background:rgba(26,29,33,.035); border-left:3px solid var(--lijn);
  white-space:pre-wrap; font-size:.95rem;
}

/* ---- invoer ---- */
label{
  display:block; margin:var(--r4) 0 var(--r1); font-size:.78rem; font-weight:700;
  letter-spacing:.07em; text-transform:uppercase; color:var(--gedempt);
}
input[type=text],input[type=password],textarea,select,input[type=file]{
  width:100%; padding:var(--r3) var(--r3); min-height:52px; font:inherit;
  color:var(--inkt); background:#fff;
  border:1px solid var(--lijn); border-radius:2px;
  transition:border-color .12s ease, box-shadow .12s ease;
}
input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:none; border-color:var(--rood); box-shadow:0 0 0 3px var(--rood-was);
}
textarea{min-height:8rem; line-height:1.5; padding:var(--r3); resize:vertical}

/* ---- 5. EEN knop. Een hoogte, drie varianten, en verder niets:
        primair (rood gevuld), omlijnd, stil (alleen tekst).
        De hoogte is bewust 52px: een monteur bedient dit met handschoenen aan. ---- */
button, a.knop, details.doen > summary{
  display:flex; align-items:center; justify-content:center; gap:var(--r2);
  min-height:52px; padding:var(--r3) var(--r4);
  font:inherit; font-weight:700; letter-spacing:.01em; text-align:center;
  border:1px solid transparent; border-radius:2px;
  cursor:pointer; text-decoration:none;
  transition:background .12s ease, border-color .12s ease, color .12s ease;
}
/* primair */
button{
  width:100%; margin-top:var(--r4);
  background:var(--rood); border-color:var(--rood); color:#fff;
}
button:hover{background:var(--rood-diep); border-color:var(--rood-diep)}
button:active{transform:translateY(1px)}
button:focus-visible{outline:3px solid var(--rood-was); outline-offset:2px}
/* omlijnd */
a.knop, details.doen > summary{
  background:#fff; border-color:var(--lijn); color:var(--inkt);
}
a.knop{margin-top:var(--r4); width:100%}
a.knop:hover, details.doen > summary:hover{border-color:var(--inkt); color:var(--inkt)}
a.knop:focus-visible, details.doen > summary:focus-visible{
  outline:3px solid var(--rood-was); outline-offset:2px;
}
/* stil: alleen tekst. Geen vlak en geen rand, wel dezelfde hoogte, zodat hij in een
   rij naast een omlijnde knop op dezelfde lijn staat. */
button.stil{
  width:fit-content; margin-top:var(--r2); padding:var(--r3) var(--r2);
  background:none; border-color:transparent; color:var(--gedempt);
  font-weight:600; text-decoration:underline; text-underline-offset:3px;
}
button.stil:hover{background:none; color:var(--rood)}

.rij-knoppen{display:flex; gap:var(--r3); flex-wrap:wrap}
.rij-knoppen form,.rij-knoppen a{flex:1 1 12rem}

/* ---- meldingen: een bies in de signaalkleur, geen kader. Zo blijft hij ook BINNEN
        een kaart een melding en geen tweede doos. ---- */
.melding{
  padding:var(--r3) var(--r4); margin:0 0 var(--r4);
  border-left:3px solid; border-radius:0 2px 2px 0;
  font-size:.93rem; font-weight:600;
}
.melding.goed{background:var(--goed-was); border-color:var(--goed); color:var(--goed)}
.melding.fout{background:var(--rood-was); border-color:var(--rood); color:var(--rood-diep)}
.melding.let-op{background:var(--let-op-was); border-color:var(--let-op); color:var(--let-op)}
.kaart .melding{margin:var(--r4) 0 0}

/* ---- tabellen: cijfers horen uitgelijnd ---- */
.tabelrol{
  overflow-x:auto; scrollbar-width:thin;
  background:
    linear-gradient(to right, #fff 40%, rgba(255,255,255,0)) left center,
    linear-gradient(to left,  #fff 40%, rgba(255,255,255,0)) right center,
    radial-gradient(farthest-side at 0 50%, rgba(26,29,33,.16), rgba(26,29,33,0)) left center,
    radial-gradient(farthest-side at 100% 50%, rgba(26,29,33,.16), rgba(26,29,33,0)) right center;
  background-repeat:no-repeat;
  background-size:34px 100%, 34px 100%, 11px 100%, 11px 100%;
  background-attachment:local, local, scroll, scroll;
}
table{width:100%; border-collapse:collapse; font-size:.94rem}

/* Vier kolommen passen niet op een telefoon. In plaats van zijwaarts schuiven, waarbij
   juist de laatste kolom (Staat) wegvalt, valt de tabel uiteen in regels met hun eigen
   kopje. Vanaf 34rem is het weer een gewone tabel. */
@media (max-width:33.99rem){
  .stapel{background:none}
  .stapel tr:first-child{display:none}
  .stapel tr{display:block; padding:var(--r3) 0; border-bottom:1px solid var(--lijn)}
  .stapel tr:last-child{border-bottom:none}
  .stapel td{
    display:flex; gap:var(--r2); align-items:baseline;
    padding:var(--r1) 0; border:none;
  }
  .stapel td::before{
    content:attr(data-kop); flex:0 0 5.2rem;
    font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
    color:var(--gedempt);
  }
  .stapel td:first-child{padding-bottom:var(--r2)}
  .stapel td:first-child::before{content:none}
  .stapel td:first-child a{font-size:1rem; font-weight:650}
}
th{
  color:var(--gedempt); font-size:.72rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  padding:var(--r2) var(--r2) var(--r1) 0; border-bottom:1px solid var(--lijn);
}
td{padding:var(--r2) var(--r2) var(--r2) 0; border-bottom:1px solid var(--lijn)}
tr:last-child td{border-bottom:none}
td.getal,th.getal{text-align:right; font-variant-numeric:tabular-nums; padding-right:0}

a{color:var(--rood-diep); text-decoration-thickness:1px; text-underline-offset:2px}
/* In een tabel is elke regel een link; allemaal rood onderstreept leest als een
   waarschuwing in plaats van een lijst. De streep komt terug bij aanwijzen. */
table a{color:var(--inkt); text-decoration:none}
table a:hover{color:var(--rood); text-decoration:underline}
a:hover{color:var(--rood)}

/* ---- wachtrij: scanbaar, niet vijf uitgeklapte formulieren ---- */
.reden .vak{color:var(--gedempt); font-weight:600}
.reden .vak::after{content:' · '; color:var(--gedempt)}

/* ---- toegangsbeheer ---- */
.vinkjes{display:flex; flex-wrap:wrap; gap:var(--r1) var(--r3); margin:var(--r1) 0 var(--r3)}
label.vink{
  display:inline-flex; align-items:flex-start; gap:var(--r1); font-weight:500;
  color:var(--inkt); font-size:.95rem; margin:0; cursor:pointer;
  text-transform:none; letter-spacing:0; line-height:1.45;
}
label.vink input{width:auto; min-height:0; margin:var(--r1) 0 0; flex:none}
/* Een waarschuwingsregel, geen doos: bies plus rode tekst. */
.let-op{
  margin:var(--r1) 0 var(--r3); padding:var(--r2) var(--r3); font-size:.9rem;
  color:var(--rood-diep); background:var(--rood-was); border-left:3px solid var(--rood);
}
.kaart.gebruiker .vraag{margin-bottom:var(--r1)}
.kaart.gebruiker .wanneer{font-family:var(--sans); font-size:.8rem; letter-spacing:.01em}

/* ---- gesprekken: de lijst van wat er gebeurd is ---- */
.filters{display:flex; flex-wrap:wrap; gap:var(--r2); margin:0 0 var(--r4)}
a.filter{
  display:inline-flex; align-items:baseline; gap:var(--r1);
  padding:var(--r2) var(--r3); min-height:44px;
  border:1px solid var(--lijn); border-radius:2px; background:#fff;
  color:var(--gedempt); text-decoration:none; font-size:.9rem; font-weight:600;
}
a.filter b{color:var(--inkt); font-variant-numeric:tabular-nums}
a.filter:hover{border-color:var(--inkt); color:var(--inkt)}
a.filter.aan{border-color:var(--inkt); color:var(--inkt); border-bottom:2px solid var(--rood)}

/* ---- het gesprek als DRAADJE, niet als kaart met een citaatblok ----
   Een kaart met "vraag" en "antwoord" leest als een formulier; wat er gebeurde is een
   gesprek. Dus: een kopregel met wie/wat/wanneer, en daaronder de bellen in de volgorde
   waarin ze vielen. De ondergrond is met twee verlopen GETEKEND en niet met een plaatje:
   op de klantomgeving staat uitgaand verkeer dicht en de CSP laat onder img-src alleen
   'self' en data: toe, dus een externe verwijzing hier is een bron die stil geweigerd
   kan worden. */
.kaart.gesprek{padding:0}
.draadkop{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--r1) var(--r2);
  padding:var(--r3) var(--r4); border-bottom:1px solid var(--lijn);
  font-size:.9rem; color:var(--gedempt);
}
.draadkop b{color:var(--inkt); font-weight:650}
.draadkop .vak{color:var(--gedempt); font-weight:600}
.draadkop .merk{margin:0}
.draadkop .wanneer{margin-left:auto}
.draadkop .ticket{
  font-family:var(--mono); font-size:.72rem; color:var(--gedempt);
  letter-spacing:.02em; font-variant-numeric:tabular-nums;
}
.draad{
  display:flex; flex-direction:column; align-items:flex-start;
  gap:var(--r2); padding:var(--r4);
  background-color:var(--draadvel);
}
.bel{
  position:relative; max-width:min(82%, 34rem);
  padding:var(--r2) var(--r3); border:1px solid var(--lijn); border-radius:2px;
  font-size:.95rem; line-height:1.5; overflow-wrap:anywhere;
}
.bel p{margin:0}
/* De punt is TWEE driehoeken: de buitenste in lijngrijs is de rand, de binnenste in de
   vulkleur dekt hem af. Met een enkele driehoek loopt de rand van de bel dood. */
.bel::before, .bel::after{
  content:''; position:absolute; bottom:-1px; width:0; height:0; border-style:solid;
}
.bel.in{align-self:flex-start; background:#fff; color:var(--inkt)}
.bel.in::before{left:-9px; border-width:0 0 10px 9px;
                border-color:transparent transparent var(--lijn) transparent}
.bel.in::after{left:-7px; bottom:0; border-width:0 0 8px 7px;
               border-color:transparent transparent #fff transparent}
/* De uitgaande bel krijgt een eigen tint, maar GEEN rood: rood is in dit blad het
   signaal dat er iets aan de hand is, en een verstuurd antwoord is juist het normale
   geval. Rood blijft voor "niet herkend" en "niet aangekomen". */
.bel.uit{align-self:flex-end; background:var(--belgroen); color:var(--inkt)}
.bel.uit::before{right:-9px; border-width:0 9px 10px 0;
                 border-color:transparent transparent var(--lijn) transparent}
.bel.uit::after{right:-7px; bottom:0; border-width:0 7px 8px 0;
                border-color:transparent transparent var(--belgroen) transparent}
.beltijd{
  display:block; margin-top:var(--r1); text-align:right;
  font-family:var(--mono); font-size:.68rem; color:var(--gedempt);
  font-variant-numeric:tabular-nums;
}
/* Een systeemregel is GEEN bericht. Hij staat smal en gecentreerd tussen de bellen,
   zodat je ziet dat er op dat moment niets naar de klant ging. Een lege bel zou het
   tegenovergestelde suggereren. */
.systeemregel{
  align-self:center; max-width:92%; margin:var(--r1) 0; text-align:center;
  padding:var(--r1) var(--r3); font-size:.75rem; font-weight:600;
  letter-spacing:.02em; color:var(--gedempt);
  background:#fff; border:1px solid var(--lijn); border-radius:2px;
}
@media (max-width:26rem){
  .draad{padding:var(--r3)}
  .bel{max-width:88%}
  .draadkop .wanneer{margin-left:0}
}
.let-op.niet-aangekomen p{margin:0 0 var(--r2)}
.let-op.niet-aangekomen form{margin:0}
.wanneer{font-family:var(--mono); font-size:.72rem; color:var(--gedempt);
         font-variant-numeric:tabular-nums}
.bon .wanneer + .ticket{margin-left:var(--r2)}
.onbekend{
  font-weight:600; font-size:.78rem; color:var(--rood-diep);
  border:1px solid var(--rood); border-radius:2px;
  padding:0 var(--r1); margin-left:var(--r1);
}

/* ---- 3. Het overzicht boven de wachtrij: EEN paneel, geen vier losse blokjes.
        Verticale scheidingslijnen tussen de cijfers en tabulaire cijfers, zodat de
        getallen onder elkaar op dezelfde plek staan en je ze kunt vergelijken. ---- */
.kaart.overzicht{padding:0; overflow:hidden}
.tellingen{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin:0;
  border-bottom:1px solid var(--lijn);
}
.telling{
  display:flex; flex-direction:column; gap:var(--r1);
  background:#fff; padding:var(--r3) var(--r2);
}
.telling + .telling{border-left:1px solid var(--lijn)}
.telling b{
  font-size:1.5rem; line-height:1.05; font-weight:750; color:var(--inkt);
  font-variant-numeric:tabular-nums; letter-spacing:-.02em;
}
.telling span{font-size:.7rem; color:var(--gedempt); letter-spacing:.02em; line-height:1.3}
.telling.dringend b{color:var(--rood)}
.botregel{margin:0; padding:var(--r3) var(--r4) 0; color:var(--gedempt)}
.botregel b{color:var(--inkt); font-variant-numeric:tabular-nums}
.botregel.fout-tekst{color:var(--rood-diep)}
a.schakel{display:inline-block; padding:var(--r2) var(--r4) var(--r3);
          font-weight:600; font-size:.9rem}

/* De afhandelknop is de stille tweede keus naast een kennisitem maken. */
details.doen.terug > summary{color:var(--inkt); font-weight:700}
details.doen.terug > summary::before{content:none}
/* Afhandelen zonder kennisitem is geen gelijkwaardige derde knop maar de uitgang.
   Rechts, stil, en pas te vinden als je hem zoekt. */
form.afdoen{margin:0 0 0 auto}

.bon{display:flex; align-items:center; flex-wrap:wrap; gap:var(--r1); margin-bottom:var(--r2)}
.bon .ticket{
  margin-left:auto; font-family:var(--mono); font-size:.72rem; color:var(--gedempt);
  letter-spacing:.02em; font-variant-numeric:tabular-nums;
}
.vraag{
  font-size:1.12rem; font-weight:600; line-height:1.4; letter-spacing:-.012em;
  margin:var(--r1) 0 var(--r2); color:var(--inkt);
}
.reden{margin:0 0 var(--r3); font-size:.86rem; color:var(--gedempt)}
.reden b{color:var(--inkt); font-weight:650}
.reden .poort{color:var(--gedempt)}
/* Het concept van de bot: een bies en een gedempt vlak, geen tweede kader. */
.concept{
  background:rgba(26,29,33,.035); border-left:3px solid var(--lijn);
  padding:var(--r3) var(--r4); font-size:.93rem;
}
.concept .cl{
  display:block; font-size:.68rem; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--gedempt); margin-bottom:var(--r1);
}
.geen-concept{margin:var(--r1) 0; font-size:.86rem; color:var(--gedempt); font-style:italic}

.kaart.dringend{border-left-color:var(--rood)}
/* De kaart geeft zelf de ruimte; een kop of alinea die er als eerste in staat mag daar
   geen tweede marge bovenop leggen. */
.kaart > :first-child{margin-top:0}
.kaart > label:first-child{margin-top:0}

/* Een rij, een lijn erboven, en de kaart eindigt in een rand. Zodra iemand een
   actie openklapt pakt die de volle breedte en schuift de rest eronder. */
.acties{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--r2);
  margin-top:var(--r4); border-top:1px solid var(--lijn); padding-top:var(--r3);
}
.acties button.stil{margin-top:0}
details.doen{margin:0; flex:1 1 14rem}
details.doen[open]{flex:1 0 100%}
details.doen > summary{
  width:100%; list-style:none; font-size:.9rem; color:var(--inkt);
}
details.doen > summary::-webkit-details-marker{display:none}
details.doen > summary::before{content:"+"; font-weight:700; color:var(--rood)}
details.doen[open] > summary::before{content:"–"}
details.doen[open] > summary{color:var(--gedempt)}
details.doen label:first-of-type{margin-top:var(--r2)}

/* ---- vanaf een tablet: knoppen zo breed als hun tekst, ruimere kaarten ---- */
@media (min-width:44rem){
  header .wie{font-size:.82rem}
  nav a{padding:var(--r3) var(--r4); min-height:52px}
  nav a:first-child{padding-left:0}
  main{padding-top:var(--r8)}
  h1{font-size:1.75rem}
  button, a.knop{width:fit-content; min-width:14rem}
  button.stil{min-width:0}
  input[type=text],input[type=password],select{max-width:32rem}
  .kaart{padding:var(--r6)}
  .telling{padding:var(--r4)}
  .telling b{font-size:1.9rem}
  .telling span{font-size:.78rem}
  .botregel{padding:var(--r4) var(--r6) 0}
  a.schakel{padding:var(--r2) var(--r6) var(--r4)}
  details.doen{flex:0 1 auto}
  details.doen > summary{width:fit-content}
}

/* ---- breed scherm: gebruik de ruimte, houd de regel leesbaar ---- */
@media (min-width:60rem){
  :root{--breed:64rem}
  .vraag{font-size:1.18rem; max-width:46rem}
}