/* Easy2audit house style — shared by every page and the generated documents.
   Colors/typography 1:1 from docs/library/_template/head.html. The tokens below the palette come from
   docs/library/2026-09-14-ux-ronde.nl.html, section 4: one page width, a type scale with a 12px floor, fixed control heights, and colour only for
   state. The colour rule (decision K115, docs/kit.md): green only when something is really good, coral when it is bad, navy for
   everything neutral; a state stands in a label with a dot and a word, rings and bars are navy measures. Coral has a second
   role that never touches the first: the typographic accent (one italic word in a heading, the active item in the bar, focus on
   the bar). Saffron amber = partly or not measured. --red-* stays for errors of the app itself (a failed call), not for verdicts. */
/* Public Sans from the app itself (assets/fonts, SIL Open Font License beside it), not from Google: no visitor's address goes to a
   third party for a font. One variable file carries every weight; italic is the browser's slant of it, as in the pdf. */
@font-face{font-family:"Public Sans";src:url(fonts/PublicSans.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap;}
:root{
  --ink:#021019; --navy:#112532; --navy-mid:#2c536c; --navy-soft:#5a839d;
  --mist:#e0e7ea; --mist-2:#eef2f4; --paper:#f6f8f9; --white:#ffffff;
  --coral:#e78795; --coral-deep:#c9697a; --coral-tint:#fbeef0; --coral-line:#f1cdd4;
  --backdrop:#0a141c;
  /* the cooler green (decision K115, docs/wording.md): 5.02:1 on white, 4.01:1 on --mist; --green-deep the darker step of the same hue */
  --green:#3d7a68; --green-deep:#305f51; --green-tint:#e8f3ef; --green-line:#cbe2db;
  --red:#c1543f; --red-deep:#9c4232; --red-tint:#fbeeeb; --red-line:#f0d2c9;
  --sans:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --shadow:0 24px 80px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.3);

  /* state text on its tint: the -deep/-line tones above do not reach 4.5:1 there for 12px text */
  --green-ink:#305f51;                                            /* 6.42:1 on --green-tint */
  --coral-ink:#a34a5a;                                            /* 5.05:1 on --coral-tint */
  --amber:#e0a526; --amber-deep:#7d5a0a; --amber-tint:#fbf4e5; --amber-line:#f3dba8;  /* saffron (19 Oct 2026): --amber-deep 6.29:1 on white, 5.74:1 on --amber-tint (12px text). The dot (--amber) is 2.19:1 on white,
     below 3:1: allowed because it always stands beside a word or a number, colour never alone */

  /* layout: one width for the work pages (decision K47, docs/wording.md): on 1440 the panel gets ~1020 px */
  --page-max:1360px; --gutter:32px;
  /* type: six sizes, nothing below 12px */
  --fs-xs:12px;   /* labels, column heads, pills, captions */
  --fs-sm:14px;   /* body, table cells, buttons, fields */
  --fs-md:16px;   /* lead */
  --fs-lg:22px;   /* h2 */
  --fs-kpi:28px;  /* KPI figure */
  --fs-xl:32px;   /* h1 */
  /* lines, shapes, controls */
  --line:rgba(44,83,108,.14); --r:8px; --r-panel:12px; --r-pill:999px;
  /* the card of our website (decision K97, docs/wording.md): a soft line. No shadow on a panel (decision K115, the UX round's section 4): a shadow
     only for what floats over the page (the drawer, a group's list in the bar, the Menu), with --float-shadow */
  --card-line:rgba(44,83,108,.10);
  --card-shadow:none;
  --float-shadow:0 1px 2px rgba(11,28,39,.06),0 18px 40px rgba(11,28,39,.16);
  /* progress is a measure, so navy (decision K115, docs/kit.md): rings, bars, the route's line. Green is for done and good only;
     ratios in docs/kit.md */
  --progress:var(--navy);
  --done-bg:var(--green-tint); --done-line:var(--green-line); --done-ink:var(--green-ink);
  --control-h:36px; --control-h-sm:30px;
  /* space: the gaps between the parts of a card or panel, and one step for the head of a page; a step looser than a
     dense tool, so the app reads like the website (decision K97, docs/wording.md) */
  --sp-1:4px; --sp-2:8px; --sp-3:16px; --sp-4:20px; --sp-5:32px; --sp-6:48px;
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0;padding:40px 20px;background:var(--backdrop);font-family:var(--sans);
  color:var(--navy);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;}
a{color:inherit;}
/* One visible focus for everything reachable by keyboard; light on the dark bar and header. */
:focus-visible{outline:2px solid var(--navy);outline-offset:2px;}
.head :focus-visible{outline-color:#fff;}
/* Focus on the bar in coral (decision K115): the accent, 6.22:1 on --navy. */
.topbar :focus-visible{outline-color:var(--coral);}
.sheet{max-width:940px;margin:0 auto;background:var(--white);border-radius:14px;overflow:hidden;box-shadow:var(--shadow);}
.sheet.narrow{max-width:480px;}
.sheet.wide{max-width:1600px;}
.eyebrow{font-size:var(--fs-xs);font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--coral-deep);margin:0 0 14px;}

/* header */
.head{position:relative;padding:40px 44px 40px;color:#eaf1f4;
  background:radial-gradient(120% 90% at 100% -10%, rgba(231,135,149,.20), transparent 54%),
    linear-gradient(155deg,#143042 0%, #112532 46%, #0c1f2b 100%);}
.head__top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:30px;}
.logo{height:22px;width:auto;color:#fff;display:block;}
.kicker{font-size:var(--fs-xs);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(234,241,244,.62);text-align:right;}
.kicker .dot{color:var(--coral);margin:0 .5em;}
.head .eyebrow{color:var(--coral);}
.display{font-family:var(--sans);font-weight:500;font-size:var(--fs-xl);line-height:1.12;letter-spacing:-.016em;color:#fff;margin:0;max-width:22ch;text-wrap:balance;}
.display b{color:var(--coral);font-weight:500;}
.head__lead{font-size:14.5px;line-height:1.62;color:rgba(234,241,244,.82);margin:16px 0 0;max-width:60ch;font-weight:300;}
.head__lead b{color:#fff;font-weight:600;}

/* the one navigation bar — nav.js puts it above the sheet on every page.
   Chrome on the dark backdrop, so it borrows the header's light-on-navy palette and adds no colour.
   Named .topbar because @media print already hides that class; report.html gets its pdf for free. */
.topbar{position:relative;max-width:940px;margin:0 auto 14px;display:flex;align-items:center;flex-wrap:wrap;gap:2px 4px;
  padding:8px 12px;border-radius:var(--r-panel);color:#eaf1f4;font-size:var(--fs-sm);
  background:rgba(255,255,255,.05);border:1px solid rgba(234,241,244,.14);}
.topbar a{color:rgba(234,241,244,.76);text-decoration:none;padding:6px 10px;border-radius:var(--r-panel);white-space:nowrap;}
.topbar a:hover{color:#fff;background:rgba(255,255,255,.09);}
/* The active item: white with a coral underline, the accent (decision K115, the UX round's section 4). */
.topbar a.on{color:#fff;box-shadow:inset 0 -2px 0 var(--coral);border-radius:var(--r-panel) var(--r-panel) 0 0;}
.topbar__spacer{flex:1 1 auto;}
.topbar__tenant{font-size:var(--fs-sm);font-weight:600;color:#fff;padding:0 8px;}
/* 32ch: "Hoofdorpse Luchtvaart Club" fits whole. */
.topbar select{font:inherit;font-size:var(--fs-sm);max-width:32ch;height:var(--control-h-sm);padding:0 8px;border-radius:var(--r);
  color:var(--navy);background:#fff;border:1px solid rgba(234,241,244,.3);}
/* The Menu (decision K26, docs/wording.md): closed while the bar fits on one line -- .topbar__links carry it then. When it does
   not fit (a phone, a narrow window, a long customer name), nav.js sets .topbar--menu and the row becomes logo, customer,
   Instellingen, Menu: the page links move into the list it opens, in the bar's order, so the row never wraps to a second line. */
.topbar__menu{display:none;}
.topbar--menu{position:relative;}
.topbar--menu .topbar__links{display:none;}
.topbar--menu .topbar__menu{display:block;}
/* In the Menu the row is logo, customer, Menu on one line: a long customer name is cut with an ellipsis, never pushes Menu down. */
.topbar--menu{flex-wrap:nowrap;}
.topbar--menu .topbar__menu{flex:none;}
.topbar--menu .topbar__tenant,.topbar--menu select{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.topbar__menu summary{list-style:none;cursor:pointer;font:inherit;font-size:var(--fs-sm);font-weight:600;
  color:#fff;padding:6px 10px;border-radius:var(--r-panel);white-space:nowrap;}
.topbar__menu summary::-webkit-details-marker{display:none;}
.topbar__menu summary:hover,.topbar__menu[open] summary{background:rgba(255,255,255,.09);}
.topbar__menuList{position:absolute;left:0;right:0;top:100%;margin-top:6px;padding:6px;z-index:5;
  display:flex;flex-direction:column;background:var(--navy);border-radius:var(--r-panel);box-shadow:var(--shadow);}
.topbar__menuList a{display:block;width:100%;text-align:left;box-sizing:border-box;}
/* The view (decision K38, docs/wording.md): the note under its three boxes in Instellingen when a change is refused. */
.topbar__viewNote{margin:0;font-size:var(--fs-xs);color:var(--navy-mid);white-space:normal;}
.topbar__viewNote:empty{display:none;}

/* side panel — the detail of a row. In e2a.css and not in controls.html: one stylesheet stays one
   stylesheet. */
.scrim{position:fixed;inset:0;background:rgba(2,16,25,.35);opacity:0;pointer-events:none;transition:opacity .2s;}
/* Closed it is not only off screen but really away: visibility keeps its button out of the tab order
   and out of the screen reader. It turns visible at once on opening (so the button can take focus)
   and only turns hidden after the slide out, hence the delay on the closed state. */
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(620px,100%);background:var(--white);
  box-shadow:var(--shadow);transform:translateX(102%);visibility:hidden;
  transition:transform .25s,visibility 0s linear .25s;overflow:auto;
  padding:22px 26px 40px;z-index:2;}
body.drawer-open .scrim{opacity:1;pointer-events:auto;}
body.drawer-open .drawer{transform:none;visibility:visible;transition:transform .25s,visibility 0s;}
/* The open state carries its own transition (see above), so it is named here as well, or it would
   keep sliding for someone who asked for no motion. */
@media (prefers-reduced-motion:reduce){.drawer,.scrim,body.drawer-open .drawer{transition:none;}}
/* Floated, not absolute: at the same spot (14px from the top, 16px from the right edge), but the crumbs and the
   title wrap before it instead of running under it on a phone. */
.drawer__close{float:right;margin:-8px -10px var(--sp-2) var(--sp-3);}
.drawer__crumbs{font-size:var(--fs-xs);color:var(--navy-mid);margin-bottom:6px;}
.drawer__title{font-family:var(--sans);font-weight:500;font-size:var(--fs-lg);color:var(--navy);margin:0 0 4px;text-wrap:balance;}
.drawer__sub{font-size:var(--fs-xs);color:var(--navy-mid);margin:0 0 18px;}
.drawer__note{font-size:var(--fs-xs);color:var(--navy-mid);margin-top:16px;border-top:1px solid var(--mist);padding-top:10px;}
/* Master-detail: from 1100 px the panel is a column to the right of the list, without the
   scrim, so the filtered list stays readable and clickable beside it and the next open control is one click away.
   The wide sheet makes room for it. Below 1100 px it stays the drawer over the page. */
@media (min-width:1100px){
  .drawer{width:min(620px,45vw);box-shadow:-1px 0 0 var(--line);}
  body.drawer-open .scrim{opacity:0;pointer-events:none;}
  body.app.drawer-open .sheet.wide{margin-right:min(620px,45vw);}
}

/* buttons */
/* One height, never wrapping: a button label is one line (a wrapping label broke "Ruggengraat" in two).
   primary = ink, as on easy2audit.com; secondary (.btn-ghost, the name the pages already use) = white
   with a mist border; tertiary = text only. */
.btn{appearance:none;border:1px solid transparent;cursor:pointer;font-family:var(--sans);font-size:var(--fs-sm);font-weight:600;
  border-radius:var(--r);height:var(--control-h);padding:0 16px;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  text-decoration:none;line-height:1;white-space:nowrap;transition:background .12s ease, border-color .12s ease;}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--ink);color:#fff;}
.btn-primary:hover{background:var(--navy-mid);}
.btn-ghost{background:#fff;border-color:var(--mist);color:var(--navy);}
.btn-ghost:hover{border-color:var(--navy-soft);}
.btn-tertiary{background:none;color:var(--navy-mid);padding:0 6px;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--mist);}
.btn-tertiary:hover{color:var(--navy);text-decoration-color:var(--navy-soft);}
.btn-sm{height:var(--control-h-sm);padding:0 12px;}
.btn-tertiary.btn-sm{padding:0 4px;}
/* A destructive action (intrekken, ontkoppelen, afmelden) is tertiary in red; its confirm() stays. */
.btn-tertiary.btn-danger{color:var(--red-deep);text-decoration-color:var(--red-line);}
.btn-block{width:100%;justify-content:center;}
.btn[disabled]{opacity:.5;pointer-events:none;}
.msicon{width:21px;height:21px;flex:none;}
/* "Sign in with Microsoft", dark theme, on the redlines of the Microsoft Learn branding guidelines
   (howto-add-branding-in-apps): 41px high, 12px before the logo, between logo and text and after the text,
   Segoe UI 15px weight 600, white on #2F2F2F, the logo unaltered. Full width in the card, content centred. */
/* The one size off the type scale, on purpose: Microsoft's branding guidelines fix this button at 15px. */
.btn-ms{display:flex;align-items:center;justify-content:center;gap:12px;height:41px;padding:0 12px;background:#2F2F2F;color:#FFFFFF;
  font-family:"Segoe UI",var(--sans);font-size:15px;font-weight:600;text-decoration:none;border:0;border-radius:0;white-space:nowrap;}
.btn-ms:hover{background:#2F2F2F;color:#FFFFFF;}

/* sections */
.sec{padding:32px 44px;border-top:1px solid var(--mist);}
.sec__head{display:flex;align-items:baseline;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:var(--sp-4);}
.sec h2{font-family:var(--sans);font-weight:500;font-size:var(--fs-lg);line-height:1.15;letter-spacing:-.012em;color:var(--navy);margin:0;}
.sec h2 b{color:var(--coral-deep);font-weight:500;}
.sec__note{font-size:var(--fs-xs);color:var(--navy-mid);max-width:46ch;line-height:1.5;margin:0;}
.body{font-size:var(--fs-sm);line-height:1.65;color:var(--navy-mid);margin:0 0 14px;max-width:74ch;}
.body:last-child{margin-bottom:0;}
.body b{color:var(--navy);font-weight:600;}
.muted{color:var(--navy-mid);}
/* Inline styles the pages would otherwise repeat, each named for what it is, on the space steps above.
   !important only where a stronger rule sets the same margin: .sec h2 under a card title, and a plain .card in a
   panel under a new part. */
.nextstep{margin-top:var(--sp-3);}               /* the line with the button to the next step, under a card's text */
.newpart{margin-top:var(--sp-4) !important;}     /* a new part of a card or panel, under the one before it */
.followup{margin-top:var(--sp-2);}               /* a line that follows directly on the one above */
.cardtitle{margin-bottom:var(--sp-2) !important;} /* the heading of a card on the start page */
.cardlead{margin-bottom:var(--sp-2);}            /* the first, bold line of a notice card */
.statchips{margin-top:var(--sp-5);}              /* the tiles with the totals, under the page head */
.statecell{text-align:right !important;}         /* the table cell with a row's state pill */
.rawvalue{font-size:var(--fs-xs) !important;word-break:break-all !important;}   /* an error or link shown as it is */

/* The page layout: a short submenu on the left, one panel on the right. One subject
   and one primary button per panel; the hash in the address picks the panel. Inside a .sec. The active item is
   navy with a mist background, like the header's chrome: coral is a state colour and stays out of the menu. */
/* 196 px and a gap of 24 (decision K47, docs/wording.md): the panel keeps ~950 px on 1280. */
.split{display:grid;grid-template-columns:196px minmax(0,1fr);gap:24px;align-items:start;}
/* The left column, drawn by E2A.sidebar on every work page, and the only place with its style: a `top` slot, the menu,
   and a `foot` slot under a line. Every text in it starts 15 px in, where an item's label starts (3 px streak + 12). */
.subcol__top{margin:0 0 var(--sp-4);padding-left:15px;}
.subnav{display:flex;flex-direction:column;gap:2px;font-size:var(--fs-sm);}
/* The kit's sidebar (docs/kit.md). A label is never cut: a long one runs on to a second line, as on-prem (no ellipsis;
   "Documenten gevraagd" stands whole on 196 px), and a word too long for the column breaks at a syllable with a hyphen in
   the page's language (Managementsys-teem), never between two letters. The number stands in a fixed column on the right, on the first line, in
   figures of one width, grey at 0. The item at 0 stays, so the menu does not jump between dossiers. */
.subnav a{position:relative;display:block;min-height:32px;line-height:20px;padding:6px 12px;border-left:3px solid transparent;
  border-radius:0 var(--r-panel) var(--r-panel) 0;color:var(--navy);text-decoration:none;overflow-wrap:break-word;hyphens:auto;}
.subnav a:has(.subnav__n){padding-right:calc(12px + 4ch + 8px);}
.subnav__n{position:absolute;top:6px;right:12px;font-weight:400;font-variant-numeric:tabular-nums;color:var(--navy-mid);}
.subnav a:hover{color:var(--navy);background:var(--mist-2);}
.subnav a[aria-current="page"]{color:var(--navy);font-weight:600;background:var(--mist);border-left-color:var(--navy);}
.subnav a.zero,.subnav a.zero .subnav__n{color:var(--navy-mid);}
/* A group head is a quiet label, not a shout: small, half bold, no capitals. */
.subnav__group{font-size:var(--fs-xs);font-weight:600;color:var(--navy-mid);margin:20px 0 4px 15px;overflow-wrap:anywhere;}
.subnav__group:first-child{margin-top:0;}
/* The foot: short lines and links in small grey type, a link underlined only under the pointer. */
.subcol__foot{display:grid;gap:var(--sp-2);margin-top:var(--sp-4);padding:var(--sp-3) 0 0 15px;border-top:1px solid var(--mist);
  font-size:var(--fs-xs);color:var(--navy-mid);}
.subcol__foot > *{margin:0;}
.subcol__foot a{color:inherit;text-decoration:none;}
.subcol__foot a:hover{text-decoration:underline;text-underline-offset:2px;}
/* "Hoe werkt dit?" (Controls): everything beyond the one-sentence lead, folded in the foot. */
.howto summary{cursor:pointer;}
.howto .body{margin:8px 0 0;font-size:var(--fs-xs);}
/* The framework lens (decision K42, docs/wording.md): the field in the top slot of Controls. A framework's label can be
   long (NIS2 names its article in the title): the field keeps the column's width. */
.lens{display:flex;flex-direction:column;gap:4px;}
.lens label,.lens .lens__k{font-size:var(--fs-xs);font-weight:600;color:var(--navy-mid);}
.lens p{margin:0;font-size:var(--fs-sm);color:var(--navy);}
.lens select{max-width:100%;}
.panel > .sec__head{padding-bottom:12px;border-bottom:1px solid var(--mist);}
/* The head of a panel is a working label, not a document title: Public Sans 16/600 (decision K47, docs/wording.md). The page title and
   the side panel's title are the page's type too since decision K148. */
.panel > .sec__head h2{font-family:var(--sans);font-size:var(--fs-md);font-weight:600;letter-spacing:0;line-height:1.3;}
.panel[hidden]{display:none;}
/* The panel is the container the kit's table and tools measure (docs/kit.md): a table turns into a list on the width it
   has itself, not on the window's. */
.panel{container-type:inline-size;}

/* status card (signed-in state, errors) */
.card{background:var(--paper);border:1px solid var(--mist);border-radius:var(--r-panel);padding:var(--sp-4) var(--sp-5);}
.card.ok{background:var(--green-tint);border-color:var(--green-line);}
/* What is already in order, above the counters:the tokens of a passing card. */
.goodstrip{background:var(--green-tint);border:1px solid var(--green-line);border-radius:var(--r-panel);color:var(--green-ink);
  font-size:var(--fs-sm);line-height:1.5;padding:10px 14px;margin:18px 0 0;}
.goodstrip b{font-weight:600;}
.sec > .goodstrip:first-child{margin-top:0;}
.goodstrip b::before{content:"\2713\00a0";}
/* What changed since the previous measurement. Neutral on purpose: the
   direction is in the words, and a colour here would be a fourth meaning next to the three pills. */
.sincestrip{background:var(--mist-2);border:1px solid var(--mist);border-radius:var(--r-panel);color:var(--navy);
  font-size:var(--fs-sm);line-height:1.5;padding:10px 14px;margin:12px 0 0;}
.sincestrip b{font-weight:600;}
.crow .changed{margin-left:6px;}
.card.warn{background:var(--amber-tint);border-color:var(--amber-line);}
.card.info{background:var(--mist-2);border-color:var(--mist);}
.card.err{background:var(--red-tint);border-color:var(--red-line);}
/* A card with a message from a server (a cause, a failure) breaks a long address inside it rather than run out of the panel. */
.card.warn,.card.err{overflow-wrap:anywhere;}
.card .who{display:flex;align-items:center;gap:12px;margin-bottom:4px;}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--navy);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:600;font-size:var(--fs-sm);flex:none;}
.card .name{font-weight:600;color:var(--navy);font-size:var(--fs-sm);}
.card .sub{font-size:var(--fs-xs);color:var(--navy-mid);}
.card-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}


/* chips (stat tiles) */
.chips{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.chips.chips-3{grid-template-columns:repeat(3,1fr);margin-bottom:18px;}
/* A tile carries no colour of its own: the c-pass/c-fail/c-unknown/c-accent classes the pages set stay
   valid but paint no border. State belongs in a pill next to the figure. */
.chip{background:#fff;border:1px solid var(--line);border-radius:var(--r-panel);padding:14px 16px;}
.chip .k{font-size:var(--fs-xs);font-weight:600;color:var(--navy-mid);margin:0 0 6px;}
.chip .v{font-family:var(--sans);font-size:var(--fs-kpi);font-weight:500;color:var(--navy);line-height:1;font-variant-numeric:tabular-nums;}
.chip .v small{font-family:var(--sans);font-size:var(--fs-xs);font-weight:500;color:var(--navy-mid);}
.chip .tsub{font-size:var(--fs-xs);color:var(--navy-mid);margin-top:4px;line-height:1.4;}
/* pills (verdict). Lightly rounded like buttons and tags, not fully round: it matches the one-pagers.
   A pill carries a state word; a name next to it is plain text. */
/* pills: the state colours. Always a dot AND a word, never colour alone.
   pass = at target, fail = deviates, partial = partly or not measured, unknown = a label without a state
   (n.v.t., paused, not set). */
.pill{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-xs);font-weight:600;
  padding:2px 9px 2px 8px;border-radius:var(--r);white-space:nowrap;border:1px solid transparent;line-height:1.4;}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;flex:none;}
.pill-pass{background:var(--green-tint);color:var(--green-ink);border-color:var(--green-line);}
.pill-pass::before{background:var(--green-ink);}
.pill-fail{background:var(--coral-tint);color:var(--coral-ink);border-color:var(--coral-line);}
.pill-fail::before{background:var(--coral);}
.pill-partial{background:var(--amber-tint);color:var(--amber-deep);border-color:var(--amber-line);}
.pill-partial::before{background:var(--amber);}
.pill-unknown{background:#fff;color:var(--navy);border-color:var(--navy-soft);}
.pill-unknown::before{background:var(--navy);}
/* trial = in proef (decision K164): a Conditional Access policy of ours in report-only. It still deviates, so the coral of fail,
   but as a ring half filled: set, and not yet on. */
.pill-trial{background:#fff;color:var(--coral-ink);border-color:var(--coral-line);}
.pill-trial::before{background:linear-gradient(90deg,var(--coral) 50%,transparent 50%);box-shadow:inset 0 0 0 1.5px var(--coral);}

/* tables */
/* No horizontal scrollbar: the table adapts to the width instead of the other way round. The columns
   size to their content (table-layout:auto) and words stay whole: with fixed layout every column gets
   the same share, and a nine-column table broke its buttons letter by letter. Buttons, pills and tags
   never break. On a phone a table stays fixed and breaks anywhere, unless the page gives it
   .tbl--stack: content-sized columns with whole words do not fit 375px. */
.tbl-wrap{overflow:hidden;border:1px solid var(--line);border-radius:var(--r-panel);}
.tbl{width:100%;table-layout:auto;border-collapse:collapse;font-size:var(--fs-sm);}
.tbl th,.tbl td{overflow-wrap:break-word;}
.tbl .btn,.tbl .pill,.tbl .tag{overflow-wrap:normal;}
/* The roles page (inventory.html): names and sign-in names are long and must stay readable. Here the table
   scrolls sideways on a narrow screen instead of breaking a name letter by letter; a name wraps only between
   words, a sign-in name and a list of permissions anywhere; the roles are a list under each other. In print
   the table takes the full width and nothing scrolls. */
.tbl-wrap.inv-scroll{overflow-x:auto;}
.tbl.inv-tbl td,.tbl.inv-tbl th{overflow-wrap:normal;}
.tbl.inv-tbl td.inv-any{overflow-wrap:anywhere;min-width:12ch;}
.tbl.inv-tbl td.inv-name{min-width:14ch;}
.tbl.inv-tbl ul.inv-roles{margin:0;padding:0;list-style:none;}
.tbl.inv-tbl ul.inv-roles li{margin:0 0 3px;}
.tbl.inv-tbl ul.inv-roles li .sub{overflow-wrap:anywhere;}
.tbl.controls th:nth-child(1){width:34%;} .tbl.controls th:nth-child(2){width:12%;} .tbl.controls th:nth-child(4){width:14%;}
.tbl.reasons th:nth-child(1){width:40%;}
/* Report: the gaps and the ISO rollup as tables. The secondary line under a title is
   12px navy-mid, like .sub on the work screens; the rank and the Annex A code are narrow. */
.tbl .sub{display:block;font-size:var(--fs-xs);color:var(--navy-mid);font-weight:400;margin-top:2px;}
.tbl.gaps th:nth-child(1),.tbl.iso th:nth-child(1){width:1%;white-space:nowrap;}
.tbl.gaps th:nth-child(3){width:22%;} .tbl.iso th:nth-child(3){width:1%;white-space:nowrap;}
.tbl thead th{text-align:left;padding:10px 14px;font-size:var(--fs-xs);font-weight:600;
  color:var(--navy-mid);border-bottom:1px solid var(--line);background:#fff;overflow-wrap:normal;position:sticky;top:0;}
.tbl tbody td{padding:12px 14px;color:var(--navy);border-bottom:1px solid var(--line);vertical-align:top;line-height:1.5;}
.tbl tbody tr:last-child td{border-bottom:none;}
.tbl tbody tr:hover{background:var(--mist-2);}
.tbl tbody td:first-child{font-weight:600;color:var(--navy);}
.num{font-variant-numeric:tabular-nums;white-space:nowrap;}
.tbl td.num{text-align:right;} .tbl th.num{text-align:right;}
/* The row's actions: as narrow as its buttons, never under the text. */
.tbl td.actions{width:1%;white-space:nowrap;}
.tbl td.nowrap{white-space:nowrap;}
/* Folds in a long list: the bar of a group, and the fold that hides what already passes. */
summary.chapter{cursor:pointer;display:flex;gap:10px;align-items:baseline;padding:8px 16px;background:var(--paper);
  font-size:var(--fs-xs);font-weight:600;color:var(--navy-mid);border-top:1px solid var(--line);}
summary.chapter::-webkit-details-marker{display:none;}
summary.chapter::before{content:"\25b8";font-size:var(--fs-xs);color:var(--navy-mid);}
details[open] > summary.chapter::before{content:"\25be";}
summary.chapter .gsub{font-weight:400;margin-left:auto;}
details.passfold > summary{cursor:pointer;font-size:var(--fs-sm);color:var(--navy-mid);padding:8px 16px;}
/* The kit's score bar (docs/kit.md; E2A.scoreBar): pass / (pass + fail) as a bar with the figure NEXT to it, never in the
   fill, in figures of one width. Three bands (decision K115, docs/kit.md): navy, green (.high) from the target of 80%, coral
   (.low) below 50%. The width is CSS alone (--p, set on the bar); the figure comes from E2A.score. */
.scorebar{display:inline-grid;grid-template-columns:minmax(60px,1fr) 6ch;gap:var(--sp-2);align-items:center;width:100%;max-width:220px;
  font-size:var(--fs-sm);font-weight:600;line-height:20px;font-variant-numeric:tabular-nums;color:var(--navy);vertical-align:middle;}
.scorebar__track{display:block;height:10px;border-radius:var(--r-pill);background:var(--mist);overflow:hidden;}
.scorebar__fill{display:block;height:100%;width:var(--p);border-radius:var(--r-pill);background:var(--progress);}
.scorebar.high .scorebar__fill{background:var(--green);}
.scorebar.low .scorebar__fill{background:var(--coral);}
.scorebar__n{text-align:right;white-space:nowrap;}
/* A server under a Controls row: its name and its bar on one line, the bar under the name when it does not fit. */
.srvline{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-1) var(--sp-3);}
.srvline .scorebar{flex:0 0 200px;}
/* Phone: the bar over the full width, under the name. */
@media (max-width:759px){
  .srvline .scorebar{flex:1 1 100%;max-width:none;order:1;}
}
/* Report: the instruction under its pill, and the controls behind an Annex A row as a list. */
.tbl .instr{margin-top:4px;}
.tbl ul.fromlist{margin:4px 0 0;padding-left:16px;font-size:var(--fs-xs);color:var(--navy-mid);}
.tbl ul.fromlist li{margin:1px 0;}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em;color:var(--navy-mid);}
.tag{display:inline-block;font-size:var(--fs-xs);font-weight:500;background:#fff;color:var(--navy-mid);border:1px solid var(--mist);
  border-radius:var(--r);padding:0 6px;margin:1px 2px 1px 0;line-height:20px;white-space:nowrap;font-variant-numeric:tabular-nums;}


.foot{padding:20px 44px 24px;border-top:1px solid var(--mist);display:flex;flex-wrap:wrap;gap:8px 20px;
  align-items:baseline;font-size:var(--fs-xs);color:var(--navy-mid);}
.foot .brand{font-weight:700;color:var(--navy);}
.foot .push{margin-left:auto;}
.foot a{text-decoration:underline;text-underline-offset:2px;}

.loading{padding:60px 44px;text-align:center;color:var(--navy-mid);font-size:var(--fs-sm);}
.spin{display:inline-block;width:22px;height:22px;border-radius:50%;
  border:2.5px solid var(--mist);border-top-color:var(--navy);animation:spin .8s linear infinite;margin-bottom:14px;}
@keyframes spin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){.spin{animation:none;}}

@media (max-width:720px){
  body{padding:20px 10px;}
  .head{padding:28px 22px;} .sec{padding:24px 22px;} .foot{padding:18px 22px 22px;}
  .display{font-size:25px;} .chips{grid-template-columns:repeat(2,1fr);}
  /* First content in the first screen (decision K26, docs/wording.md): the kicker adds nothing a phone has
     room for, and a lead that wraps to three lines pushes the real content below the fold. */
  .kicker{display:none;}
  .head__lead{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .tbl{table-layout:fixed;}
  .tbl th,.tbl td{overflow-wrap:anywhere;}
  .tbl.inv-tbl{table-layout:auto;}
  .tbl.inv-tbl th,.tbl.inv-tbl td{overflow-wrap:normal;padding:8px 10px;}
  .tbl.inv-tbl td.inv-any{overflow-wrap:anywhere;}
  /* A table with .tbl--stack becomes a stack per row on a phone, each cell labelled from data-label. */
  .tbl--stack thead{display:none;}
  .tbl--stack tr,.tbl--stack td{display:block;width:auto;}
  .tbl--stack tbody td{border-bottom:none;padding:6px 14px;overflow-wrap:break-word;}
  .tbl--stack tbody tr{border-bottom:1px solid var(--line);padding:6px 0;}
  .tbl--stack td[data-label]::before{content:attr(data-label);display:block;
    font-size:var(--fs-xs);font-weight:600;color:var(--navy-mid);margin-bottom:2px;}
  /* On a phone a long label may wrap between words (never inside one: overflow-wrap stays normal). */
  .btn{white-space:normal;overflow-wrap:normal;height:auto;min-height:var(--control-h);padding:8px 16px;text-align:center;line-height:1.3;}
  .topbar{margin:0 auto 10px;padding:8px;gap:2px;}
  .topbar select{max-width:100%;flex:1 1 auto;}
  /* On a phone the submenu is one scrolling row above the panel, the same items; the group names drop out. */
  .split{grid-template-columns:minmax(0,1fr);gap:18px;}
  /* The panel itself also needs min-width:0: a grid item defaults to min-width:auto, so a wide child -- the
     MFA table's .inv-scroll wrap -- would push the whole panel past the grid track and the page would scroll
     sideways instead of the table alone. */
  .panel,.tbl-wrap{min-width:0;}
  /* The column on a phone: `top`, then the menu as one scrolling row (the same items), then `foot`, all from the left
     edge. An item keeps its one line and its number follows the label. */
  .subcol__top,.subcol__foot{padding-left:0;}
  .subnav{flex-direction:row;overflow-x:auto;gap:4px;padding-bottom:4px;scrollbar-width:thin;}
  .subnav a{flex:none;white-space:nowrap;line-height:20px;padding:4px 12px 5px;border-left:0;border-bottom:3px solid transparent;border-radius:var(--r-panel) var(--r-panel) 0 0;}
  .subnav a:has(.subnav__n){padding-right:12px;}
  .subnav__n{position:static;margin-left:6px;}
  .subnav a[aria-current="page"]{border-bottom-color:var(--navy);}
}

/* A table too wide for a laptop (the admin customer list: eight columns) stacks already below 1100px. */
@media (max-width:1100px){
  .tbl--stack-lg thead{display:none;}
  .tbl--stack-lg tr,.tbl--stack-lg td{display:block;width:auto;}
  .tbl--stack-lg tbody td{border-bottom:none;padding:6px 14px;overflow-wrap:break-word;}
  .tbl--stack-lg tbody tr{border-bottom:1px solid var(--line);padding:6px 0;}
  .tbl--stack-lg td[data-label]::before{content:attr(data-label);display:block;font-size:var(--fs-xs);font-weight:600;color:var(--navy-mid);margin-bottom:2px;}
  .tbl--stack-lg td.actions{width:auto;}
}

/* ---- work screens: body.app ----------------------------------------------------------
   Work screens get a light ground, documents stay dark. The pages that
   are work screens say so with <body class="app">; report.html, the generated policy documents and the
   maintenance page do not, and keep the document look. One width for every work page,
   a navy bar over the full width with the logo, the page title on the ground instead of in
   a dark block, and every section a white panel. Coral is no accent here: heading words are navy. */
body.app{background:var(--paper);padding:0 0 48px;font-size:var(--fs-sm);}
.app .topbar{max-width:none;margin:0 0 8px;border:0;border-radius:0;background:var(--navy);min-height:56px;
  padding:8px max(var(--gutter), calc((100% - var(--page-max)) / 2 + var(--gutter)));}
.app .topbar a{border-radius:0;height:40px;display:inline-flex;align-items:center;padding:0 var(--sp-2);}
.app .topbar a:hover{background:rgba(255,255,255,.08);}
.app .topbar a.topbar__logo{width:116px;height:19px;padding:0;margin-right:16px;background:#fff;
  -webkit-mask:url(/assets/logo.svg) no-repeat left center/contain;mask:url(/assets/logo.svg) no-repeat left center/contain;}
.app .sheet,.app .sheet.wide{max-width:var(--page-max);margin:0 auto;padding:0 var(--gutter);
  background:none;border-radius:0;box-shadow:none;overflow:visible;}
/* The sign-in page keeps a narrow column; its bar is as wide as everywhere else. */
.app .sheet.narrow{max-width:calc(640px + 2 * var(--gutter));margin:0 auto;padding:0 var(--gutter);
  background:none;border-radius:0;box-shadow:none;overflow:visible;}
.app .head{background:none;color:var(--navy);padding:var(--sp-6) 0 var(--sp-5);}
.app .head__top{justify-content:flex-start;gap:12px;margin:0 0 6px;}
.app .head .logo{color:var(--navy);height:20px;}
body.app:has(> .topbar) .head .logo{display:none;}   /* the bar shows it; signed out there is no bar */
.app .display{color:var(--navy);font-size:var(--fs-xl);line-height:1.15;max-width:none;}
.app .display b{color:var(--navy);}
.app .head__lead{color:var(--navy-mid);font-size:var(--fs-md);font-weight:400;max-width:68ch;margin-top:8px;}
.app .head__lead b{color:var(--navy);}
.app .sec{background:#fff;border:1px solid var(--card-line);border-radius:var(--r-panel);padding:var(--sp-5);margin:0 0 var(--sp-5);box-shadow:var(--card-shadow);}
.app .sec h2 b{color:var(--navy);}
/* Two layers at most: a plain .card inside a panel is a part of it, not a third box. Cards that carry
   a state (ok, warn, err, info) keep their tint. */
.app .sec .card:not(.ok):not(.warn):not(.err):not(.info){background:none;border:0;border-top:1px solid var(--line);
  border-radius:0;padding:20px 0 0;margin-top:20px;}
/* Right under a panel's head the head's own line is the divider: the first content starts 18px below it, as everywhere. */
.app .sec .sec__head + .card:not(.ok):not(.warn):not(.err):not(.info){border-top:0;padding-top:0;margin-top:0;}
.app .sub{font-size:var(--fs-xs);color:var(--navy-mid);}
/* Fields at control height, on the page and in the side panel. :where keeps this at the lowest weight, so a
   page's own <style> (backbone and wizard) and the bar's select still decide for themselves. */
:where(.app .sheet, .app .drawer) :where(input:not([type=checkbox]):not([type=radio]),select){height:var(--control-h);padding:0 10px;
  border:1px solid var(--navy-soft);border-radius:var(--r);background:#fff;color:var(--navy);font:inherit;font-size:var(--fs-sm);
  vertical-align:middle;max-width:100%;}
:where(.app .sheet, .app .drawer) textarea{padding:8px 10px;border:1px solid var(--navy-soft);border-radius:var(--r);background:#fff;
  color:var(--navy);font:inherit;font-size:var(--fs-sm);max-width:100%;}
.app .foot{border-top:0;padding:8px 0 0;}
.app #body > .loading,.app .sheet > .loading{background:#fff;border:1px solid var(--line);border-radius:var(--r-panel);}
@media (max-width:720px){
  .app .topbar{padding:6px 20px;min-height:0;}
  .app .topbar a{height:34px;padding:0 8px;}
  .app .topbar a.topbar__logo{width:96px;height:16px;margin-right:6px;}
  .app .sheet,.app .sheet.wide,.app .sheet.narrow{padding:0 20px;}
  .app .head{padding:var(--sp-5) 0 var(--sp-4);}
  /* on a phone the air goes between blocks, not inside them */
  .app .sec{padding:var(--sp-4) var(--sp-3);}
}

/* ---- printing and saving as pdf -------------------------------------------------
   No library needed: the browser makes the pdf. Only a proefdossier carries the watermark
   (decision K25, docs/wording.md); paper of a paying customer gets a head with organisation and date and the
   foot "Momentopname van <datum>. Geen certificaat en geen volledige audit." in .printfoot.
   Every printed page also carries a head "Easy2audit · <organisatie> · <stuk>" and a page number,
   from @page's margin boxes (decision K14, docs/wording.md). A browser without page margin boxes (no
   Chromium) shows none of that there, so .printhead repeats the same head once, in the flow, at the
   top of page 1 -- the same trick .printfoot uses for the foot. */
.printfoot,.printhead{display:none;}

/* policy documents — generated server-side from the wizard answers, in the style of
   the wizard's draft, so that the generated document looks the same as the draft
   the customer knows. One stylesheet:
   no second one is added next to it, and the print rules below apply to it too. */
.doc{border:1px solid var(--mist);border-radius:10px;padding:30px 34px;margin-top:14px;background:#fff;}
/* The head of a paper document is a column; the kit's drawer head below shares the class name and is a grid of three. */
.doc .dhead{display:block;margin:0;}
.doc .dhead .dorg{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--coral-deep);}
/* The approval mark above the title (decision K14, docs/wording.md):a thin line, 'Concept' in the trial colour so a
   customer never mistakes a draft for something approved, 'Vastgesteld op <datum>' in the ordinary one. */
.doc .dhead .doc__status{font-size:11px;font-weight:600;color:var(--navy-mid);border-bottom:1px solid var(--mist);padding-bottom:6px;margin:2px 0 6px;}
.doc .dhead .doc__status--draft{color:var(--coral-deep);border-bottom-color:var(--coral-line);}
.doc .dhead .dtitle{font-family:var(--sans);font-weight:500;color:var(--navy);font-size:22px;margin:3px 0 4px;}
.doc .dhead .dsub{font-size:11.5px;color:var(--navy-soft);border-bottom:2px solid var(--navy);padding-bottom:12px;margin-bottom:16px;}
.doc h2{color:var(--navy);font-size:13.5px;font-weight:800;margin:16px 0 6px;}
.doc h2 .snum{color:var(--coral-deep);margin-right:6px;}
.doc p{margin-bottom:9px;font-size:12.5px;color:var(--navy-mid);}
.doc table{border-collapse:collapse;width:100%;font-size:11.5px;margin:10px 0;}
.doc th,.doc td{border:1px solid var(--mist);padding:6px 8px;text-align:left;vertical-align:top;}
.doc th{background:var(--mist-2);color:var(--navy);}
.doc .bt{display:block;font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--coral-deep);margin-bottom:4px;}
.doc .fillblock{border:1px dashed var(--coral);background:var(--coral-tint);border-radius:7px;padding:10px 13px;margin:10px 0;}
.doc .fillblock p{margin:0;font-size:12px;color:var(--navy-soft);}
.doc .evidenceblock{background:var(--mist-2);border-left:3px solid var(--navy);border-radius:0 7px 7px 0;padding:10px 13px;margin:10px 0;font-size:12px;}
.doc .evidenceblock .bt{color:var(--navy);}
.doc .evidenceblock ul{margin:0 0 0 16px;color:var(--navy-mid);}
.doc .transition{border-left:3px solid var(--coral-deep);background:var(--coral-tint);border-radius:0 7px 7px 0;padding:10px 13px;margin:10px 0;font-size:12px;}
.doc .notapplicable{font-size:12.5px;color:var(--navy-soft);font-style:italic;}
.doc mark{background:var(--coral-tint);color:var(--coral-deep);font-weight:700;padding:0 3px;border-radius:3px;}

/* The security statement on paper (direction A, Etienne 12 October 2026, docs/design-statement-2026-10.md): page 1 is the
   statement on one sheet, sections 1 to 8 follow as the detail. The stand has the colours of the kit (SAAS-106, same day):
   in order green-deep, attention navy-mid, open coral, not applicable mist; nothing amber on it. Every block says where it
   comes from: from the dossier (a navy dot) or stated by the customer (a coral diamond). Colours print as they are
   (print-color-adjust), also when the browser leaves background graphics off. */
.doc .stk{margin:0;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--navy-soft);}
.doc .stsheet__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,15.5rem);gap:var(--sp-5);align-items:end;}
.doc .stsheet__who .dtitle{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--coral-deep);margin:10px 0 0;}
.doc .stsheet__who .dorg{font-size:28px;font-weight:600;letter-spacing:-.02em;text-transform:none;line-height:1.08;color:var(--navy);margin:6px 0 0;}
.doc .stsheet__who .dsub{border:0;padding:0;margin:8px 0 0;font-size:14px;color:var(--navy-mid);}
.doc .stvalid{border:1.5px solid var(--green-line);background:var(--green-tint);border-radius:var(--r-panel);padding:10px 12px;}
.doc .stvalid .stk,.doc .stvalid b{color:var(--green-deep);}
.doc .stvalid b{display:block;margin-top:4px;font-size:20px;font-weight:600;letter-spacing:-.01em;line-height:1.15;}
.doc .stvalid .doc__status{border:0;padding:0;margin:4px 0 0;font-size:11px;font-weight:600;color:var(--navy-mid);}
.doc .stvalid p{margin:4px 0 0;font-size:11.5px;line-height:1.4;}
.doc .stvalid--draft{border-style:dashed;border-color:var(--coral);background:var(--coral-tint);}
.doc .stvalid--expired{border-color:var(--coral-line);background:var(--white);}
.doc .stvalid--draft .stk,.doc .stvalid--draft b,.doc .stvalid--expired .stk,.doc .stvalid--expired b,.doc .stvalid .doc__status--draft{color:var(--coral-deep);}
.doc .sttag{display:inline-flex;align-items:center;gap:5px;font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--navy-soft);}
.doc .sttag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--navy-mid);}
.doc .sttag--stated{color:var(--coral-deep);}
.doc .sttag--stated::before{width:5px;height:5px;border-radius:1px;background:none;border:1.5px solid var(--coral-deep);transform:rotate(45deg);}
.doc .stfigs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:var(--sp-4);border-top:1.5px solid var(--navy);border-bottom:1px solid var(--mist);}
.doc .stfig{display:flex;flex-direction:column;gap:4px;min-width:0;padding:8px 10px 10px;border-left:1px solid var(--mist);}
.doc .stfig:first-child{border-left:0;padding-left:0;}
.doc .stfig__n{font-size:28px;font-weight:600;letter-spacing:-.03em;line-height:1;color:var(--navy);font-variant-numeric:tabular-nums;}
.doc .stfig__n small{font-size:13px;font-weight:500;letter-spacing:0;color:var(--navy-soft);}
.doc .stfig p{margin:0;font-size:11.5px;line-height:1.4;}
.doc .stsrc{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:11.5px;line-height:1.3;color:var(--navy-mid);}
.doc .stsrc b{display:block;font-size:17px;font-weight:600;color:var(--navy);font-variant-numeric:tabular-nums;}
.doc .stsrc .trend{width:64px;height:26px;}
.doc .stbar{display:flex;height:7px;border-radius:var(--r-pill);overflow:hidden;background:var(--mist-2);margin-top:2px;}
.doc .stbar i{display:block;height:100%;width:var(--p);}
.doc .stsq{display:flex;flex-wrap:wrap;gap:2px;}
.doc .stsq i,.doc .stlegend i{display:inline-block;width:9px;height:9px;border-radius:2px;}
.doc .stbar .ok,.doc .stsq .ok,.doc .stlegend .ok{background:var(--green-deep);}
.doc .stbar .attention,.doc .stsq .attention,.doc .stlegend .attention{background:var(--navy-mid);}
.doc .stbar .open,.doc .stsq .open,.doc .stlegend .open{background:var(--coral);}
.doc .stbar .na,.doc .stsq .na,.doc .stlegend .na{background:var(--mist);}
.doc .stvalid,.doc .stbar,.doc .stbar i,.doc .stsq i,.doc .stlegend i{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
.doc .stblock{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-3);margin:var(--sp-4) 0 var(--sp-1);}
.doc .stblock__title{margin:0;font-size:15px;font-weight:700;color:var(--navy);}
.doc .stthemes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--sp-5);}
.doc .sttheme{display:grid;grid-template-columns:minmax(0,1fr) 7.5rem 2rem;gap:var(--sp-2);align-items:center;padding:4px 0;border-bottom:1px solid var(--mist-2);font-size:11.5px;line-height:1.25;color:var(--navy);}
.doc .sttheme__n{text-align:right;color:var(--navy-soft);font-variant-numeric:tabular-nums;}
.doc .stlegend{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin:8px 0 0;font-size:11px;color:var(--navy-soft);}
.doc .stlegend span{display:inline-flex;align-items:center;gap:5px;}
.doc .stchain{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-4);margin-top:var(--sp-4);}
.doc .stans{min-width:0;border-top:1.5px solid var(--navy);padding-top:8px;}
.doc .stans h3{margin:6px 0 4px;font-size:13px;font-weight:700;color:var(--navy);}
.doc .stans p,.doc .stans li{margin:0 0 3px;font-size:11px;line-height:1.4;color:var(--navy-mid);overflow-wrap:anywhere;}
.doc .stans ul{margin:0;padding:0;list-style:none;}
.doc .stans .stans__none{font-style:italic;color:var(--navy-soft);}
.doc .stsheet__foot{display:flex;justify-content:space-between;gap:var(--sp-3);margin:var(--sp-4) 0 0;padding-top:6px;border-top:1px solid var(--mist);font-size:11px;color:var(--navy-soft);}
.doc .stannex__head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-3);margin:var(--sp-6) 0 var(--sp-2);padding-bottom:6px;border-bottom:1.5px solid var(--navy);}
.doc .stannex__title{margin:0;font-family:var(--sans);font-size:22px;font-weight:500;color:var(--navy);}
.doc h2.stsec{display:flex;align-items:baseline;gap:6px;}
.doc h2.stsec .sttag,.doc .stblock .sttag{margin-left:auto;white-space:nowrap;}
.doc .sttag::before{flex:none;}
.doc .noregister .sttag{margin-right:6px;}
@media (max-width:640px){
  .doc .stsheet__head,.doc .stthemes,.doc .stchain{grid-template-columns:minmax(0,1fr);}
  .doc .stfigs{grid-template-columns:repeat(2,minmax(0,1fr));}
  .doc .stfig:nth-child(3){border-left:0;padding-left:0;}
}

@media print{
  /* The left column is a way around the screen, not part of the paper: the panel takes the whole width. */
  .subcol{display:none;}
  .split{display:block;}
  /* Folds print open: the marker and the "show" line say nothing on paper. Advice folds are the one
     exception: nav.js's beforeprint handler closes .advice__fold instead. */
  summary.chapter::before,details.passfold > summary{display:none;}
  /* One @page rule: the head every printable page sets in --e2a-print-head (or, on a proefdossier,
     the trial line, via --e2a-print-top below) in the top margin, and the page number with the date every such
     page sets in --e2a-print-date in the bottom margin. Chromium draws both on every page; a browser without
     page margin boxes draws neither anywhere -- .printhead and .printfoot are the in-flow fallback for page 1. */
  @page{
    size:A4;margin:22mm 14mm 18mm;
    @top-center{content:var(--e2a-print-top);font-family:var(--sans);font-size:9pt;font-weight:bold;}
    @bottom-center{content:counter(page) " / " counter(pages) "  \00b7  " var(--e2a-print-date);font-family:var(--sans);font-size:9pt;color:#444;}
  }
  html,body{background:#fff !important;color:#111 !important;padding:0;}
  /* The sheet's screen shadow and corners are not paper; the app's own pdf prints backgrounds, so it would carry them. */
  .sheet{box-shadow:none;border-radius:0;}
  /* Forms and their buttons never print: a decision or a sign-off already stands as text on the
     row next to it (E2A.decision, the sign-off pill); the editing form under it is a screen-only tool. */
  .topbar,.btn,button,.foot a,.contact,form{display:none !important;}
  /* Print already hides every foot link; without this the "Bewijsdossier Cloud" item next to it (nav.js
     privacyFoot) would dangle with a bare middot and no word after it. */
  .foot__privacy{display:none !important;}
  .printhead{display:block !important;margin:0 0 14px;padding-bottom:8px;border-bottom:1px solid #ddd;font-size:9pt;font-weight:bold;color:#444;}
  /* The side panel is position:fixed and would otherwise print over every page. */
  .drawer,.scrim{display:none !important;}
  .wrap{max-width:none;padding:0;position:relative;z-index:1;}
  /* No machine-speak in the print: the raw evidence, the control ids and who judged
     are for us and for an auditor, not for the reader of a customer report. On
     screen they stay. With those columns in, Safari's print runs to 37 pages and
     the table falls off the page. */
  .machine{display:none !important;}
  /* A table of 28 rows may run across pages; a ROW may not. With break-inside:avoid on
     the whole table, Safari forced it into one piece and cut off the rest. */
  .sec,.card,.chip{break-inside:avoid;box-shadow:none !important;}
  /* A policy document is the print; the frame around it is screen. */
  .doc{border:none;padding:0;border-radius:0;margin:0;}
  .doc h2,.doc .dhead{break-after:avoid;}
  .doc p,.doc .transition,.doc .evidenceblock,.doc .fillblock{break-inside:avoid;}
  /* The security statement: page 1 on its own sheet; a figure, a theme line, an answer and the signature in one piece. */
  .doc .stsheet{break-after:page;}
  .doc .stannex__head{margin-top:0;}
  .doc .stfigs,.doc .sttheme,.doc .stans,.doc table#signature{break-inside:avoid;}
  .doc .bt{break-after:avoid;}
  .tbl{break-inside:auto;box-shadow:none !important;width:100%;table-layout:auto;}
  .tbl tr{break-inside:avoid;}
  .tbl th,.tbl td{font-size:9pt;padding:4px 6px;vertical-align:top;overflow-wrap:anywhere;}
  .tbl-wrap.inv-scroll{overflow:visible;}
  .tbl.inv-tbl{width:100%;table-layout:auto;}
  .tbl.inv-tbl th,.tbl.inv-tbl td{overflow-wrap:normal;}
  .tbl.inv-tbl td.inv-any{overflow-wrap:anywhere;}
  .sec{border:1px solid #ddd !important;background:#fff !important;}
  h2{break-after:avoid;}
  thead{display:table-header-group;}
  a[href]::after{content:"";}
  /* A proefdossier only: on every page, behind the text, and impossible to click away. The word is
     "proefdossier" (decision K14, docs/wording.md), the same as everywhere else in the app. */
  body.is-trial::before{
    content:"PROEFDOSSIER \2014 MOMENTOPNAME";
    position:fixed;inset:0;margin:auto;height:0;
    display:flex;align-items:center;justify-content:center;
    transform:rotate(-32deg);
    font-size:46pt;font-weight:800;letter-spacing:.06em;
    color:rgba(20,30,60,.07);white-space:nowrap;z-index:0;pointer-events:none;
  }
  html[lang="en"] body.is-trial::before{content:"TRIAL DOSSIER \2014 SNAPSHOT";}
  .printfoot{display:block !important;margin-top:14px;font-size:9pt;color:#444;}
}

/* The hardening advice on a deviation (nav.js E2A.advice):a quiet panel under the finding, the
   levels as neutral pills (a level is not a verdict, so no state colour), roll-out and sources folded. */
.advice{margin-top:8px;padding:10px 12px;background:var(--mist-2);border-radius:var(--r);font-size:var(--fs-sm);color:var(--navy);}
.advice__line{margin:0 0 6px;}
.advice__line:last-child{margin-bottom:0;}
.advice .pill{margin:0 4px;}
.advice__more summary,.advice__fold summary{cursor:pointer;font-size:var(--fs-xs);font-weight:600;color:var(--navy-mid);}
.advice__more[open] summary{margin-bottom:6px;}
.advice__sources{margin:0;padding-left:18px;font-size:var(--fs-xs);color:var(--navy-mid);}
.advice__fold .advice{margin-top:6px;}
/* The commands to copy (nav.js commands()): the text as it is typed, wrapping long lines instead of a wide page. */
.advice__cli{margin:8px 0;}
.advice__cmd{margin:0 0 8px;}
.advice__cmdhead{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px;}
.advice__cmd pre{margin:0;padding:8px 10px;background:var(--white);border-radius:var(--r);overflow-x:auto;white-space:pre-wrap;word-break:break-word;}
.advice__cmd code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--fs-xs);color:var(--navy);}
/* A command to copy on a panel (kit 26, Servers toevoegen): the advice's command on the page's mist, a line's room around it. */
.cmdbox{margin:var(--sp-2) 0;max-width:74ch;}
.cmdbox pre{background:var(--mist-2);}
.advice__src{margin:4px 0 0;font-size:var(--fs-xs);color:var(--navy-mid);}
@media print{.advice__more{display:none;}}

/* The proefdossier line: on every page and, below, on every print. nav.js puts one
   .trialbar under the bar and marks the body .is-trial. */
.trialbar{max-width:940px;margin:0 auto 10px;padding:7px 14px;border:1px solid var(--coral-deep);border-radius:var(--r-panel);
  background:var(--coral-tint);color:var(--coral-deep);font-size:var(--fs-sm);font-weight:600;text-align:center;}
.app .trialbar{max-width:none;margin:0 0 8px;border-width:1px 0;border-radius:0;}
/* The measurement notice: consent withdrawn, or the last measurement failed.
   Same shape as .trialbar so the two stack, and amber rather than coral -- coral is the colour of a
   deviating verdict, and a stopped measurement is not a verdict about the customer's estate. */
.noticebar{max-width:940px;margin:0 auto 10px;padding:7px 14px;border:1px solid var(--amber-line);border-radius:var(--r-panel);
  background:var(--amber-tint);color:var(--amber-deep);font-size:var(--fs-sm);font-weight:600;text-align:center;}
.app .noticebar{max-width:none;margin:0 0 8px;border-width:1px 0;border-radius:0;}
.noticebar a{color:inherit;}
/* The acceptance environment: one strip above everything, on screen and on paper, so that nothing made
   there passes for production. nav.js draws it when the settings name the environment staging. */
.envbar{padding:4px 14px;background:var(--navy);color:var(--white);font-size:var(--fs-xs);font-weight:600;
  letter-spacing:.04em;text-align:center;}
/* Who is looking: the same place as the trial line, neutral, and on screen only. */
.rolebar{max-width:940px;margin:0 auto 10px;padding:7px 14px;border:1px solid var(--line);border-radius:var(--r-panel);
  background:var(--mist-2);color:var(--navy-mid);font-size:var(--fs-sm);text-align:center;}
.app .rolebar{max-width:none;margin:0 0 8px;border-width:1px 0;border-radius:0;}
/* "Alleen tellingen" and the lock: a neutral pill, so it never reads as a verdict. */
.lockpill{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:var(--r);font-size:var(--fs-xs);font-weight:600;
  background:var(--navy-tint,rgba(0,0,0,.06));color:var(--navy-mid);white-space:nowrap;}
.lockpill .lock{flex:none;}
.write-off{margin:6px 0 0;font-size:var(--fs-sm);color:var(--navy-mid);}
@media print{
  body.is-trial .trialbar{display:block !important;background:#fff !important;color:#111 !important;border:1px solid #111 !important;}
  /* The notice prints too: a report on paper must carry the reason its figures are not this week's. */
  .noticebar{display:block !important;background:#fff !important;color:#111 !important;border:1px solid #111 !important;}
  .rolebar{display:none !important;}
  /* The view is the reader's own: not on the trial line that prints. */
  .viewline{display:none !important;}
}
.viewline a{color:var(--navy);}
.trialbar .viewline{font-weight:400;}
.trialbar .viewline a{color:inherit;}
/* Every printed page sets --e2a-print-head ("Easy2audit · <organisatie> · <stuk>") and --e2a-print-date; the
   single @page rule above reads both. A proefdossier's trial line wins over the head in the top margin (decision K25, docs/wording.md). */
:root{--e2a-print-top:var(--e2a-print-head,"");--e2a-print-date:"";}
:root:has(body.is-trial){--e2a-print-top:var(--e2a-trial-line,var(--e2a-print-head,""));}
/* ---- The table of Controls, shared with Servers (decision K46, docs/wording.md) ----------------------------------
   Moved here from controls.html so a second page reads the same table, not a copy of it. The panel around a table is the
   container (.panel, container-type:inline-size), for the reading list under 760 px. */
/* The head of the panel on one band: title, counts, search and Alles inklappen. The search keeps its label for the screen
   reader only. */
.phead{align-items:center;gap:8px 16px;}
.phead .sec__note{max-width:none;flex:1 1 280px;font-variant-numeric:tabular-nums;}
.phead .sec__note b{color:var(--navy);font-weight:600;}
.phead .tools{display:flex;gap:12px;align-items:center;margin-left:auto;}
.phead .tools input{width:240px;max-width:100%;}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
/* Controls as a table (decision K46, docs/wording.md): one table per list, fixed
   columns, the chapter as a group row, the same table under ISO 27001 and under a framework. Under a framework a line
   after Stand closes the outcome; Beleid, Documenten, Meting and Aftekening are what it rests on. */
.tw{border:1px solid var(--line);border-radius:var(--r-panel);overflow:clip;}
/* A table with more columns than a panel holds at 640 px (Beheer's customers of a partner: ten) is the reading list on every
   width: its box is a container of at most 759 px, so the list below (@container, under 760 px) always applies. */
.tw--list{container-type:inline-size;max-width:759px;}
.ctbl{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;font-size:var(--fs-sm);}
/* At least 80 px (BIO2's 5.36.01 is 57 px in 14/600 tabular figures, plus the 22 px padding); fitNumberColumn widens it to
   the longest number in the list. The ellipsis and the tooltip are only a safety net. .nrprobe measures in the cell's font. */
.ctbl col.c-nr{width:80px;}
.nrprobe{position:absolute;visibility:hidden;white-space:pre;font-size:var(--fs-sm);font-weight:600;font-variant-numeric:tabular-nums;}
.ctbl col.c-st{width:92px;}
.ctbl col.c-pol,.ctbl col.c-mt{width:120px;}
.ctbl col.c-doc{width:108px;}
.ctbl col.c-so{width:116px;}
/* A server's controls: a CIS code of up to five groups whole, a state word with its tag, and the found and expected value. */
.ctbl col.c-code{width:116px;}
.ctbl col.c-state{width:136px;}
.ctbl col.c-found{width:30%;}
.ctbl thead{position:sticky;top:0;z-index:1;}
.ctbl th{background:var(--white);text-align:left;font-size:var(--fs-xs);font-weight:600;color:var(--navy-mid);padding:8px;
  border-bottom:1px solid var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ctbl tr.colgroup th{padding-bottom:0;border-bottom:0;}
.ctbl tr.colgroup th.evgroup{border-bottom:1px solid var(--line);padding-bottom:var(--sp-1);}
.ctbl td{padding:10px 8px;border-bottom:1px solid var(--line);vertical-align:top;line-height:20px;color:var(--navy);overflow-wrap:break-word;}
.ctbl th:first-child,.ctbl td:first-child{padding-left:14px;}
.ctbl .st{border-right:1px solid var(--line);}
.ctbl td.nr{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ctbl td.nm .t{font-weight:500;}
.ctbl td.nm .s{display:block;font-size:var(--fs-xs);line-height:16px;color:var(--navy-mid);margin-top:2px;}
.ctbl td.nm .note{display:block;font-size:var(--fs-xs);line-height:16px;color:var(--navy-mid);font-style:italic;margin-top:var(--sp-1);}
.ctbl td .sub{display:block;line-height:16px;}
.ctbl tr.clickable{cursor:pointer;}
.ctbl tr.clickable > td.nm .t::after{content:" \203A";color:var(--navy-mid);font-weight:400;}
.ctbl tr.row:hover > td{background:var(--mist-2);}
.ctbl tr.focus > td{background:var(--mist);}
.ctbl tr.focus > td:first-child{box-shadow:inset 3px 0 0 var(--navy);}
.ctbl .dash{color:var(--navy-mid);}
/* The chapter: a group row over the whole width that folds what is under it. */
.ctbl tr.ch > td{background:var(--paper);padding:8px 14px;}
.chtoggle,.fold,.signbtn{all:unset;box-sizing:border-box;cursor:pointer;}
.chtoggle:focus-visible,.fold:focus-visible,.signbtn:focus-visible{outline:2px solid var(--navy);outline-offset:2px;}
.chtoggle{display:flex;width:100%;align-items:baseline;gap:10px;font-size:var(--fs-sm);font-weight:600;color:var(--navy);}
.chtoggle::before{content:"\25BE";font-size:var(--fs-xs);color:var(--navy-mid);}
.chaptergroup.shut .chtoggle::before{content:"\25B8";}
.chaptergroup.shut tr:not(.ch){display:none;}
.chtoggle .gsub{margin-left:auto;font-size:var(--fs-xs);font-weight:400;color:var(--navy-mid);font-variant-numeric:tabular-nums;text-align:right;}
/* A group's counts under their own columns (E2A.kit.table.group `cells`): the same small figures as the bar, on the column
   they count, so "37 open" stands under Beleid. */
.ctbl tr.ch > td.cnt{font-size:var(--fs-xs);font-weight:500;color:var(--navy-mid);font-variant-numeric:tabular-nums;white-space:nowrap;}
/* A group row with a bar (the kit's table, docs/kit.md): title, the bar of the group, its counts; the bar under the title
   when the row is too narrow for both. */
.chtoggle:has(.scorebar){align-items:center;flex-wrap:wrap;column-gap:var(--sp-3);}
.chtoggle .t{flex:1 1 12em;min-width:0;}
.chtoggle .scorebar{flex:0 1 200px;}
/* Beside a bar the counts keep one width, so the bars of the groups and of their sections stand under each other. */
.chtoggle .scorebar + .gsub,.sgline .gsub{margin-left:0;flex:0 0 10rem;}
/* A fold row: one line that opens the rows under it (data-part-of), for what a group keeps closed. */
.ctbl tr.foldrow > td{padding:6px 14px;background:var(--white);}
/* A section row (E2A.kit.table.section): the level under a group row, indented, with its own bar and counts. */
.ctbl tr.sg > td{padding:8px 14px 8px 30px;background:var(--white);}
.sgline{display:flex;flex-wrap:wrap;align-items:center;column-gap:var(--sp-3);font-size:var(--fs-sm);font-weight:500;color:var(--navy);}
.sgline .t{flex:1 1 12em;min-width:0;}
.sgline .scorebar{flex:0 1 200px;}
.sgline .gsub{font-size:var(--fs-xs);font-weight:400;color:var(--navy-mid);font-variant-numeric:tabular-nums;text-align:right;}
.ctbl tr.foldrow .fold{margin-top:0;}
/* Loading: grey bars in the shape of the rows to come; never the words of an empty list (docs/kit.md). */
.skel{display:block;height:12px;margin:4px 0;border-radius:var(--r);background:var(--mist-2);}
.skel.short{width:40%;}
@media (prefers-reduced-motion:no-preference){.skel{animation:skel 1.4s ease-in-out infinite;}}
@keyframes skel{50%{background:var(--mist);}}
/* An empty list inside the table: one cell over the whole width with the kit's empty state. */
.ctbl td.emptycell{padding:var(--sp-4) 14px;}
/* A requirement on more rows: the summary row, its parts folded under it, indented on paper. */
.fold{display:inline-flex;gap:6px;align-items:center;margin-top:6px;font-size:var(--fs-xs);font-weight:600;color:var(--navy-mid);}
.fold::before{content:"\25B8";}
.fold[aria-expanded="true"]::before{content:"\25BE";}
.sum{display:block;font-size:var(--fs-xs);color:var(--navy-mid);font-variant-numeric:tabular-nums;line-height:20px;}
.sum b{color:var(--navy);font-weight:600;}
.sum .w{display:block;}
.ctbl tr.part > td{background:var(--paper);padding-top:6px;padding-bottom:6px;}
.ctbl tr.part > td.nm{padding-left:22px;}
.ctbl tr.part > td.nm .t{font-weight:400;}
.ctbl tr.part:hover > td{background:var(--mist-2);}
.ctbl tr.signrow > td{background:var(--paper);}
/* Aftekenen is quiet: the colour of a link, underlined on hover only, never bold, so that wijkt af and onder doel stand
   out (decision K46, docs/wording.md). A signed check shows its state in the same button. */
.signbtn{font-size:var(--fs-xs);line-height:20px;color:var(--navy);}
.signbtn:not(.has-state):hover{text-decoration:underline;text-underline-offset:3px;}
/* The markers in the table and the reading list: dot and word without a box. In order is quiet (navy-mid, green dot),
   coral and amber are half bold, a label without a state an open ring. The state colours and their meaning stay. */
.ctbl .pill{background:none;border:0;border-radius:0;padding:0;font-weight:500;line-height:20px;color:var(--navy-mid);
  white-space:normal;align-items:flex-start;}
.ctbl .pill::before{width:7px;height:7px;margin-top:6px;}
.ctbl .pill-pass::before{background:var(--green);}
.ctbl .pill-fail{color:var(--coral-ink);font-weight:600;}
.ctbl .pill-partial{color:var(--amber-deep);font-weight:600;}
.ctbl .pill-unknown{color:var(--navy);}
.ctbl .pill-unknown::before{background:none;box-shadow:inset 0 0 0 1.5px var(--navy);}
/* A tag in a cell wraps inside its box instead of running past the cell (1 verslechterd · 1 verbeterd on Controls, naar
   on-prem: mislukt in the reading list of Metingen); kit-check: outOfPanel. */
.ctbl .tag{white-space:normal;}
/* Narrower than 760 px (a phone, or the panel of a control open beside the list) the same table reads as a list:
   number and Stand on top, the name, Beleid, Documenten and Meting as short lines, the parts under their fold. Reading
   only: no sign-off form here. One DOM for both, so a list never says something the table does not. */
@container (max-width:759px){
  .phead .tools{flex:1 1 100%;}
  .phead .tools input{flex:1 1 auto;width:auto;}
  .tw{border:0;border-top:1px solid var(--line);border-radius:0;}
  .ctbl,.ctbl tbody{display:block;}
  .ctbl thead,.ctbl colgroup{display:none;}
  /* Number, name and state on one line; under it one line per labelled cell, the label in a column of its own that never
     runs into the value (it wraps within its 9.5rem instead). */
  .ctbl tr{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--sp-1) var(--sp-3);padding:var(--sp-3);border-bottom:1px solid var(--line);}
  .ctbl tr > td,.ctbl tr.part > td,.ctbl tr.part > td.nm,.ctbl tr.ch > td,.ctbl td.st{display:block;padding:0;border:0;background:none;}
  /* The table's 14px on its first cell (.ctbl td:first-child) is stronger than the line above: the same rule here, later,
     so the first cell starts where the row's other lines start on every page (kit-check: firstCellIndent). */
  .ctbl td:first-child{padding-left:0;}
  .ctbl tr.focus > td:first-child{box-shadow:none;}
  .ctbl tr.focus{box-shadow:inset 3px 0 0 var(--navy);background:var(--mist);}
  .ctbl td.nr{grid-column:1;grid-row:1;}
  .ctbl td.nm{grid-column:2;grid-row:1;hyphens:auto;}
  .ctbl tr:not(:has(> td.nr)) > td.nm{grid-column:1 / 3;}
  .ctbl td.st{grid-column:3;grid-row:1;text-align:right;}
  /* A state cell with a label (a long state, such as "2 van 3 servers" per baseline) gets a line of its own under the name. */
  .ctbl td.st[data-label]{grid-row:auto;text-align:left;}
  .ctbl tr > td[data-label],.ctbl tr.part > td[data-label]{grid-column:1 / -1;display:flow-root;padding-left:calc(9.5rem + var(--sp-2));font-size:var(--fs-xs);}
  .ctbl td[data-label]::before{content:attr(data-label);float:left;width:9.5rem;margin-left:calc(-9.5rem - var(--sp-2));color:var(--navy-mid);line-height:20px;}
  .ctbl td[data-label] .pill{margin-right:var(--sp-2);}
  .ctbl td[data-label]:empty,.ctbl td.so:not(:has(.pill,.sum,.lockpill)){display:none;}
  .sum .w{display:inline;}
  .ctbl tr.ch,.ctbl tr.foldrow{display:block;padding:8px var(--sp-3);background:var(--paper);}
  /* the counts under the columns become one line under the name, each with its column's name first */
  .ctbl tr.ch > td.cnt{display:inline;margin-right:var(--sp-3);}
  .ctbl tr.ch > td.cnt:empty{display:none;}
  .ctbl tr.ch > td.cnt::before{content:attr(data-label) " ";}
  .ctbl tr.sg{display:block;padding:8px var(--sp-3) 8px var(--sp-5);}
  .ctbl tr.sg > td{padding:0;}
  /* The counts of a group on a line of their own under its name, so a name keeps its words whole; a word longer than a
     narrow name cell (Managementverantwoordelijkheden on a phone) breaks at a syllable with a hyphen, never between letters. */
  .chtoggle{flex-wrap:wrap;}
  .chtoggle .gsub,.sgline .gsub{flex-basis:100%;margin-left:0;text-align:left;}
  .ctbl tr.foldrow{background:none;}
  .ctbl tr.emptyrow{display:block;}
  .ctbl tr.part{margin-left:var(--sp-5);background:var(--paper);}
  .ctbl tr.part td.nr,.ctbl tr.part td.st{display:none;}
  .ctbl tr.signrow,.signbtn:not(.has-state){display:none;}
  .ctbl tr[hidden]{display:none;}
}

/* ---- The kit: the parts every page draws with (docs/kit.md) -----------------------------------------------------------
   Ten components, each one family of classes here and, where it does something, one function in assets/kit.js (E2A.kit).
   A page brings no CSS of its own; what is new goes in here first. Already above: the page skeleton (.sheet, .head, .sec,
   .split, .panel), the sidebar (.subcol, .subnav), the table (.tw, .ctbl), the drawer (.drawer), the state label (.pill),
   the score bar (.scorebar) and the buttons (.btn). Below: the parts those had not got yet. */

/* Page skeleton: the crumb, only above an object (Alle servers › DC01), never on a page of its own. */
.crumb{margin:0 0 var(--sp-1);font-size:var(--fs-xs);color:var(--navy-mid);}
.crumb a{color:inherit;text-decoration:none;}
.crumb a:hover{text-decoration:underline;text-underline-offset:2px;}
/* The head of an object with a list of its own (a server): under its title the facts line, label grey and value bold,
   each item whole on a line; then its score line, the bar wider than in a table with the counts beside it. */
.facts{display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-4);margin:0 0 var(--sp-2);font-size:var(--fs-sm);line-height:20px;
  color:var(--navy-mid);font-variant-numeric:tabular-nums;}
.facts b{color:var(--navy);font-weight:600;}
.facts .pill{margin-right:var(--sp-1);}
.scoreline{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-1) var(--sp-3);margin:0 0 var(--sp-4);padding-bottom:var(--sp-4);
  border-bottom:1px solid var(--mist);}
.scoreline .scorebar{flex:0 1 420px;max-width:420px;font-size:var(--fs-md);font-weight:600;}

/* Drawer: the head of three equal blocks under the title, each a label, a value on one line and a note under it. What the
   three are is the page's (Controls: Beleid · Documenten · Meting; a control of a server: Meting · Gevonden · Verwacht). */
.dhead{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-2);margin:var(--sp-3) 0 var(--sp-4);}
.dhead__b{display:grid;gap:2px;align-content:start;min-width:0;padding:var(--sp-2) 10px;border-radius:var(--r);background:var(--paper);
  font-size:var(--fs-xs);line-height:16px;color:var(--navy-mid);}
.dhead__k{font-weight:600;}
.dhead__v{min-width:0;font-size:var(--fs-sm);line-height:20px;font-weight:600;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dhead__v .pill{font-weight:600;}
.dhead__v .scorebar{max-width:none;grid-template-columns:minmax(24px,1fr) 6ch;}
@media (max-width:479px){.dhead{grid-template-columns:minmax(0,1fr);}}
/* The drawer over the table: when the table beside it would get less than 640 px (E2A.kit.drawerMode), the drawer lies over
   the page with its scrim, also on a wide screen, instead of squeezing both. */
@media (min-width:1100px){
  body.drawer-over .drawer{box-shadow:var(--shadow);}
  body.drawer-open.drawer-over .scrim{opacity:1;pointer-events:auto;}
  body.app.drawer-open.drawer-over .sheet.wide{margin-right:auto;}
}
/* Loading and failing inside the drawer: a small turn and a line, or the error card. */
.spin.spin-sm{width:14px;height:14px;border-width:2px;margin:0 var(--sp-2) 0 0;vertical-align:-2px;}

/* Search and filter: the search field and the segment in the panel head (.phead .tools). The choice of a segment is a
   link with the choice in the address (E2A.href), never kept in the browser. */
.phead .tools{flex-wrap:wrap;}
.seg{display:inline-flex;flex:none;max-width:100%;border:1px solid var(--navy-soft);border-radius:var(--r);overflow-x:auto;scrollbar-width:none;}
.seg a{display:inline-flex;flex:none;align-items:center;height:calc(var(--control-h) - 2px);padding:0 12px;font-size:var(--fs-xs);font-weight:600;
  color:var(--navy);text-decoration:none;white-space:nowrap;font-variant-numeric:tabular-nums;}
.seg a + a{border-left:1px solid var(--navy-soft);}
.seg a:hover{background:var(--mist-2);}
.seg a[aria-current="true"]{background:var(--navy);color:var(--white);}
/* A segment at the top of a panel is the choice of the object the panel shows (a baseline on Servers). */
.panel > .seg{margin:0 0 var(--sp-3);}
.routepage > div > .seg{margin:0 0 var(--sp-5);}   /* the choice row above a route (Plan, decision K113) */
/* On a phone a segment wraps to a second line instead of scrolling inside itself, so no choice falls out of sight (Plan's
   kinds: "Processen · 11" stood off screen until you swiped): each choice its own box. */
@media (max-width:720px){
  .seg{display:flex;flex-wrap:wrap;gap:4px;overflow-x:visible;border:0;}
  .seg a,.seg a + a{border:1px solid var(--navy-soft);border-radius:var(--r);}
}

/* Empty state: what is missing, why, and one button or a date. Loading is something else (.skel, .loading). */
.emptystate{display:grid;gap:var(--sp-1);justify-items:start;padding:var(--sp-4) 0;font-size:var(--fs-sm);color:var(--navy-mid);}
.emptystate > p{margin:0;max-width:68ch;}
.emptystate__what{font-weight:600;color:var(--navy);}
.emptystate .btn{margin-top:var(--sp-2);}

/* Form row: the label above the field, one column, and under it a note or "Opgeslagen · 14:05". */
.fieldrow{display:grid;gap:var(--sp-1);justify-items:start;max-width:46ch;margin:0 0 var(--sp-4);}
.fieldrow > label{font-size:var(--fs-xs);font-weight:600;color:var(--navy-mid);}
.fieldrow > input,.fieldrow > select,.fieldrow > textarea{width:100%;}
.fieldrow__note{margin:0;font-size:var(--fs-xs);color:var(--navy-mid);}
/* Three fields of one item on one row (a subprocessor: name, service, region); the rows stack under the label. */
.fieldtrio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-1);width:100%;}
.fieldtrio > input{width:100%;min-width:0;}
/* A short number inside a sentence, its unit beside it (Beheer: Aftekening geldig [365] dagen); .nowrap keeps the two together. */
.numfield{width:6em;}
.nowrap{white-space:nowrap;}
/* A message someone has to send (Beheer, after Uitnodigen): the text itself, readable and selectable, above its copy button. */
.copymsg{background:var(--white);border:1px solid var(--green-line);border-radius:var(--r);padding:10px 12px;margin:10px 0 0;
  font-size:var(--fs-sm);line-height:1.55;color:var(--navy);max-width:74ch;overflow-wrap:anywhere;}

/* Buttons: one primary per block, then the others, removing last and tertiary. */
.btnrow{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center;margin:var(--sp-3) 0 0;}
/* A button that comes in its own paragraph (E2A.portalButton) stands in the row like the others. */
.btnrow > p{margin:0;}

/* Page skeleton: the lines under a panel's head, before its list (Controls: what is in order, what changed, the one
   primary button, what ends soon). */
.viewhead{display:grid;gap:var(--sp-3);margin:0 0 var(--sp-4);}
/* Page skeleton: a part of a panel under a heading of its own (Beheer: the customers of one partner, the failed runs). */
.panel h3{font-family:var(--sans);font-weight:500;font-size:var(--fs-md);line-height:1.2;color:var(--navy);margin:0;}
.panel h3 b{font-weight:600;}
.viewhead > .goodstrip,.viewhead > .sincestrip{margin:0;}
.viewhead .sec__note{max-width:none;}
.viewhead .btn{justify-self:start;}
/* Something that opens on a click outside a table (a line that opens its drawer). */
.clickable{cursor:pointer;}

/* Drawer body: the parts under the head of three blocks. A fold with a quiet head (.more: a part outside the reader's
   view, the tip of an evidence type, the official text of a requirement, what ends soon), a list of short lines
   (.linelist: files, requirements' points, dates), and the lines a verdict rests on (.underneath), whose passing lines
   fold away at the bottom (.passfold). */
.more{margin-top:var(--sp-2);}
.more > summary{cursor:pointer;font-size:var(--fs-xs);font-weight:600;color:var(--navy-mid);}
.more[open] > summary{margin-bottom:var(--sp-1);}
.linelist{list-style:none;margin:var(--sp-1) 0 0;padding:0;color:var(--navy);}
.linelist li{padding:var(--sp-1) 0;}
.linelist li + li{border-top:1px solid var(--line);}
.linelist li > b:first-child{margin-right:var(--sp-1);font-variant-numeric:tabular-nums;}
.linelist .linelist{margin-left:var(--sp-3);}
.ctbl .linelist{font-size:var(--fs-xs);}
.underneath{margin-top:var(--sp-2);padding:10px 12px;background:var(--mist-2);border-radius:var(--r);}
.underneath table{width:100%;border-collapse:collapse;font-size:var(--fs-xs);}
.underneath td{padding:4px 8px 4px 0;vertical-align:top;color:var(--navy);}
.underneath td.id{font-variant-numeric:tabular-nums;color:var(--navy-mid);white-space:nowrap;}
.underneath tr.focus > td{background:var(--mist);}
.underneath tr.focus > td:first-child{box-shadow:inset 3px 0 0 var(--navy);padding-left:9px;}
/* One line per measured control (decision K140): closed it is its head (code, title, state, the setting's button), open it
   carries what it rests on; one line open at a time (control-drawer.js toggleLine). */
.underneath tbody.line:not(.open) > tr:not(.line__head){display:none;}
.underneath tbody.line + tbody.line > tr.line__head > td{border-top:1px solid var(--mist);}
.underneath tr.line__head{cursor:pointer;}
.underneath tr.line__head > td{padding-top:6px;padding-bottom:6px;}
.underneath .line__toggle{background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;text-align:left;cursor:pointer;}
.underneath .line__toggle:hover{text-decoration:underline;}
.underneath tbody.line.open .line__toggle{font-weight:600;}
.underneath td.act{text-align:right;white-space:nowrap;padding-right:0;}
.underneath td.act .btnrow{margin:0;justify-content:flex-end;}
.underneath .passfold{margin-top:var(--sp-2);}
.underneath .passfold > summary{font-weight:600;}

/* Ring (E2A.kit.ring): a score as a ring with the figure in its middle. The arc is navy whatever the score (decision K115): a
   ring measures, the state stands in a label beside it. The fill is a stroke on a circle of circumference 100, the figure in
   figures of one width. While loading only the track; nothing judged, a dash. The small ring (.ring--sm) has no figure: it
   stands beside one, on the dashboard's stand cards. */
.ring{position:relative;display:inline-grid;place-items:center;width:120px;height:120px;flex:none;}
.ring svg{position:absolute;inset:0;width:100%;height:100%;}
.ring circle{fill:none;stroke-width:3.4;}
.ring__track{stroke:var(--mist);}
.ring__fill{stroke:var(--progress);}
.ring--sm{width:56px;height:56px;}
.ring--sm circle{stroke-width:4;}
.ring__n{position:relative;font-family:var(--sans);font-size:var(--fs-kpi);font-weight:500;line-height:1;color:var(--navy);
  font-variant-numeric:tabular-nums;white-space:nowrap;}
.ring.none .ring__n{color:var(--navy-mid);}

/* The dashboard as one overview (decision K114, docs/wording.md): the stand in one row of four cards, under it the
   six steps as one strip with the next step as one card beside it, under them three blocks (Werk, Identiteit, Kaders). Every
   part a white card on the paper with a 1 px line, radius 8 and no shadow; no panel around them. */
.dash{display:grid;gap:var(--sp-4);margin:0 0 var(--sp-5);}
/* A stand card (E2A.kit.standCard): the label above, the figure first in 28 px with its state label beside it, "x van y"
   and one line under it, a small navy ring on the right. The label's link covers the card; a line of its own (.standcard__more)
   keeps its own link above it. */
.standrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--sp-4);}
.standcard{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-3);align-items:center;min-width:0;
  padding:var(--sp-3) var(--sp-4);background:var(--white);border:1px solid var(--card-line);border-radius:var(--r-panel);color:var(--navy);}
.standcard:hover{border-color:var(--navy-soft);}
.standcard[aria-busy],.standcard:has(> .card){grid-template-columns:minmax(0,1fr);align-items:start;}
.standcard__b{display:grid;gap:2px;min-width:0;line-height:1.35;}
.standcard__k{font-size:var(--fs-xs);font-weight:600;color:var(--navy-mid);text-decoration:none;}
.standcard__go::after{content:"";position:absolute;inset:0;border-radius:var(--r-panel);}
.standcard__v{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-1) var(--sp-2);margin:2px 0;}
.standcard__v b{font-family:var(--sans);font-size:var(--fs-kpi);font-weight:500;line-height:1;letter-spacing:-.01em;color:var(--navy);font-variant-numeric:tabular-nums;}
.standcard__of{font-size:var(--fs-sm);font-weight:600;color:var(--navy);font-variant-numeric:tabular-nums;}
.standcard__line{font-size:var(--fs-xs);color:var(--navy-mid);}
.standcard__more{position:relative;z-index:1;font-size:var(--fs-xs);color:var(--navy-mid);}
.standcard__more a{color:var(--navy);font-weight:600;text-underline-offset:2px;}
/* The steps and the next step side by side; one column under 980 px. */
.pathrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:var(--sp-4);align-items:stretch;}
.pathrow--one{grid-template-columns:minmax(0,1fr);}
.pathcard{min-width:0;padding:var(--sp-4);background:var(--white);border:1px solid var(--card-line);border-radius:var(--r-panel);}
.pathcard__head{margin:0 0 var(--sp-4);}
/* A heading with one italic word in coral (decision K115, the UX round's section 4): --coral-deep, 3.63:1 on white,
   large text from 24 px, so the word is 1.1 times the heading's 22. */
.dashtitle{margin:var(--sp-1) 0 0;font-family:var(--sans);font-size:var(--fs-lg);font-weight:500;line-height:1.2;color:var(--navy);text-wrap:balance;}
.dashtitle em{font-style:italic;font-weight:400;font-size:1.1em;color:var(--coral-deep);}
/* The steps strip (E2A.kit.dots): six dots with their names on one line. Done: a green check (done is good); now: a filled navy dot
   and "· nu"; open: a navy ring with the step's number. The line between the dots is the mist. */
.dots{list-style:none;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));margin:0;padding:0;}
.dots__i{position:relative;display:grid;align-content:start;justify-items:center;gap:6px;padding:0 4px;min-width:0;text-align:center;}
.dots__i::before{content:"";position:absolute;top:13px;left:calc(50% + 16px);right:calc(-50% + 16px);height:2px;background:var(--mist);}
.dots__i:last-child::before{display:none;}
.dots__m{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--white);border:1.5px solid var(--navy-soft);
  font-size:var(--fs-xs);font-weight:600;color:var(--navy);font-variant-numeric:tabular-nums;}
.dots__m .ico{width:16px;height:16px;}
.dots__i.is-done .dots__m{background:var(--green-deep);border-color:var(--green-deep);color:var(--white);}
.dots__i.is-now .dots__m{background:var(--navy);border-color:var(--navy);color:var(--white);box-shadow:0 0 0 4px var(--mist-2);}
.dots__i.is-off .dots__m{border-style:dashed;color:var(--navy-soft);}
.dots__i.is-off .dots__t{color:var(--navy-mid);font-weight:500;}
.dots__t{max-width:100%;font-size:var(--fs-sm);font-weight:600;line-height:1.25;color:var(--navy);overflow-wrap:break-word;hyphens:auto;}
.dots__n{max-width:100%;}
.dots__t a{color:inherit;text-decoration:none;}
.dots__t a:hover{text-decoration:underline;text-underline-offset:2px;}
.dots__now{font-weight:600;color:var(--navy-mid);white-space:nowrap;}
.dots__n{font-size:var(--fs-xs);line-height:1.3;color:var(--navy-mid);}
/* The next step (E2A.kit.nextCard): a compact card with a navy top edge and the one primary button. */
.nextcard{display:grid;gap:var(--sp-2);align-content:start;min-width:0;padding:var(--sp-4);background:var(--white);border:1px solid var(--card-line);
  border-top:3px solid var(--navy);border-radius:0 0 var(--r-panel) var(--r-panel);}
.nextcard p{margin:0;}
.nextcard__h{margin:0;font-family:var(--sans);font-size:var(--fs-lg);font-weight:500;line-height:1.2;color:var(--navy);}
.nextcard__fig{font-size:var(--fs-sm);color:var(--navy-mid);}
.nextcard__fig b{margin-right:6px;font-family:var(--sans);font-size:var(--fs-kpi);font-weight:500;color:var(--navy);font-variant-numeric:tabular-nums;}
.nextcard__text{font-size:var(--fs-sm);color:var(--navy-mid);}
.nextcard .btnrow{margin-top:var(--sp-1);}
.dblocks{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--sp-4);}
.dblock{min-width:0;padding:var(--sp-4);background:var(--white);border:1px solid var(--card-line);border-radius:var(--r-panel);}
/* A block's head is a working label, as a panel's head (decision K47, docs/wording.md): over .sec h2. */
.dblock > .dblock__h{margin:0 0 var(--sp-2);font-family:var(--sans);font-size:var(--fs-md);font-weight:600;letter-spacing:0;line-height:1.3;color:var(--navy);}
.figrow{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-1) var(--sp-3);padding:var(--sp-2) 0;
  border-top:1px solid var(--line);font-size:var(--fs-sm);color:var(--navy);text-decoration:none;}
a.figrow:hover .figrow__k{text-decoration:underline;text-underline-offset:2px;}
.figrow__n{font-weight:600;font-variant-numeric:tabular-nums;}
.figrow .scorebar{flex:0 1 220px;}
.figrow .sub{flex-basis:100%;}
.dblock .emptystate{padding:var(--sp-2) 0 0;}
@media (max-width:980px){
  .pathrow{grid-template-columns:minmax(0,1fr);}
}
@media (max-width:620px){
  .standrow{grid-template-columns:minmax(0,1fr);gap:var(--sp-2);}
  .standcard{padding:var(--sp-3);}
  /* the strip turns into a column of six lines: the dot, the name, the note on the right */
  .dots{grid-template-columns:minmax(0,1fr);gap:var(--sp-2);}
  .dots__i{grid-template-columns:28px minmax(0,1fr) auto;justify-items:start;align-items:center;gap:var(--sp-3);padding:0;text-align:left;}
  .dots__i::before{top:28px;left:13px;right:auto;width:2px;height:var(--sp-2);}
  .dots__n{justify-self:end;text-align:right;}
}

/* The groups in the bar (decision K114, docs/kit.md; nav.js navGroups): a button with the group's name and a caret, and a white
   list of links under it. A disclosure (aria-expanded, aria-controls), not an ARIA menu. The group whose page is open carries .on. */
.navgroup{position:relative;display:inline-flex;}
.navgroup__btn{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 var(--sp-2);border:0;background:none;cursor:pointer;
  font:inherit;font-size:var(--fs-sm);color:rgba(234,241,244,.76);white-space:nowrap;}
.navgroup__btn:hover,.navgroup__btn[aria-expanded="true"]{color:#fff;background:rgba(255,255,255,.08);}
.navgroup__btn.on{color:#fff;box-shadow:inset 0 -2px 0 var(--coral);}
.navgroup__btn .ico{width:12px;height:12px;vertical-align:0;transition:transform .15s;}
.navgroup__btn[aria-expanded="true"] .ico{transform:rotate(180deg);}
.navgroup__list{position:absolute;left:0;top:calc(100% + 8px);z-index:6;min-width:220px;padding:6px;display:grid;
  background:var(--white);border:1px solid var(--card-line);border-radius:var(--r-panel);box-shadow:var(--float-shadow);}
.navgroup__list[hidden]{display:none;}
.app .topbar .navgroup__list a,.topbar .navgroup__list a{display:flex;height:auto;padding:9px 12px;border-radius:var(--r);color:var(--navy);font-weight:500;}
.app .topbar .navgroup__list a:hover,.topbar .navgroup__list a:focus-visible{background:var(--mist-2);color:var(--navy);}
.topbar .navgroup__list a:focus-visible{outline:2px solid var(--navy);outline-offset:-2px;}
.topbar .navgroup__list a.on{box-shadow:inset 3px 0 0 var(--coral);border-radius:0 var(--r) var(--r) 0;font-weight:600;}
/* The Menu on a phone: the groups as heads over their links. */
.topbar__menuHead{margin:10px 10px 2px;font-size:var(--fs-xs);font-weight:600;color:rgba(234,241,244,.62);}
.topbar__menuList .topbar__menuSub,.app .topbar .topbar__menuList .topbar__menuSub{padding-left:22px;}
@media (prefers-reduced-motion:reduce){.navgroup__btn .ico{transition:none;}}

/* ==== The lighter kit (decision K97, docs/wording.md), designed in docs/design-improvement-plan-2026-10.md §12 ==============
   The website's card and number chip, thick green bars, green for progress and done, and Phosphor icons. Each component
   below has its function in kit.js where it draws something. */

/* A short coral line under a panel's title, as on the website and in the on-prem reports: a line without a word, so it never
   reads as the state "wijkt af". A panel head with tools (.phead) has none. */
.app .sec__head h2::after{content:"";display:block;width:40px;height:2px;margin-top:var(--sp-2);border-radius:var(--r);background:var(--coral);}
.sec__head.phead h2::after{display:none;}

/* Icons (E2A.kit.icon): Phosphor Light, inline SVG in currentColor, always beside a word. */
.ico{width:18px;height:18px;flex:none;vertical-align:-4px;fill:currentColor;}
.ico--lg{width:24px;height:24px;}

/* Number chip (.nrchip): the website's .cm-nr, coral on its tint; the text in --coral-ink, 5.05:1. */
.nrchip{display:inline-block;flex:none;padding:2px 7px;border-radius:var(--r);background:var(--coral-tint);color:var(--coral-ink);
  font-size:var(--fs-xs);font-weight:600;font-variant-numeric:tabular-nums;line-height:18px;}

/* Progress (E2A.kit.progress): x of y done, a thick green bar with the figure beside it. */
.progress{display:flex;align-items:center;gap:var(--sp-3);}
.progress__track{flex:1 1 auto;height:12px;border-radius:var(--r-pill);background:var(--mist);overflow:hidden;}
.progress__fill{display:block;height:100%;width:var(--p,0%);border-radius:var(--r-pill);background:var(--progress);}
.progress__n{flex:none;font-size:var(--fs-sm);font-weight:600;color:var(--navy);font-variant-numeric:tabular-nums;}

/* Trend (E2A.kit.trend): the score over the last measurements, the target dashed; .delta says the change in words. */
.trend{width:150px;height:44px;flex:none;}
.trend__line{fill:none;stroke:var(--navy-mid);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;}
.trend__target{stroke:var(--progress);stroke-width:1.2;stroke-dasharray:3 3;}
.trend__dot{fill:var(--navy);}
.delta{display:inline-flex;align-items:center;gap:var(--sp-1);white-space:nowrap;font-size:var(--fs-sm);font-weight:600;color:var(--done-ink);font-variant-numeric:tabular-nums;}
.delta.down{color:var(--coral-ink);}

/* Bars (E2A.kit.bars): the website's controls card. A chapter is a native details: chevron, number chip, name, a thick bar and
   the percentage; under it the sub-rows with a thinner bar. Numbers in Public Sans with tabular figures, never monospace. */
.bars{display:grid;}
.bars__head{display:flex;align-items:center;gap:var(--sp-2);margin:0 0 var(--sp-3);font-size:var(--fs-md);font-weight:600;color:var(--navy);}
.bars details{border-top:1px solid var(--card-line);}
.bars summary{display:grid;grid-template-columns:16px auto minmax(0,1fr) minmax(120px,32%) 56px;align-items:center;gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-1);list-style:none;cursor:pointer;}
.bars summary::-webkit-details-marker{display:none;}
.bars summary > .ico{width:16px;height:16px;color:var(--navy-soft);transition:transform .18s ease;}
.bars details[open] > summary > .ico{transform:rotate(180deg);}
.bars__name{font-size:var(--fs-sm);color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bars__track{height:12px;border-radius:var(--r-pill);background:var(--mist);overflow:hidden;}
.bars__fill{display:block;height:100%;width:var(--p,0%);border-radius:var(--r-pill);background:var(--progress);}
.bars__fill.high{background:var(--green);}
.bars__fill.low{background:var(--coral);}
.bars__n{text-align:right;font-size:var(--fs-sm);font-weight:600;color:var(--navy);font-variant-numeric:tabular-nums;}
.bars__sub{padding:0 var(--sp-1) var(--sp-3) calc(16px + var(--sp-3) + var(--sp-1));}
.bars__row{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(100px,28%) 56px;align-items:center;gap:var(--sp-3);
  padding:var(--sp-2) 0;border-top:1px solid var(--card-line);}
.bars__row .bars__nr{font-size:var(--fs-xs);color:var(--navy-mid);font-variant-numeric:tabular-nums;}
.bars__row .bars__name,.bars__row .bars__n{font-size:var(--fs-xs);color:var(--navy-mid);}
.bars__row .bars__n{font-weight:500;}
.bars__row .bars__track{height:8px;}
@media (max-width:540px){
  .bars summary{grid-template-columns:14px auto minmax(0,1fr) 48px;}
  .bars summary .bars__track{grid-column:2 / -1;grid-row:2;height:8px;}
  .bars__sub{padding-left:var(--sp-3);}
  .bars__row{grid-template-columns:auto minmax(0,1fr) 48px;}
  .bars__row .bars__track{grid-column:1 / -1;grid-row:2;height:6px;}
}

/* Hero (E2A.kit.hero): the one band at the top of a page that says what it is about, in mist (decision K115: no green band). */
.hero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-4) var(--sp-5);align-items:center;
  padding:var(--sp-5);border-radius:var(--r-panel);background:var(--mist-2);border:1px solid var(--card-line);margin:0 0 var(--sp-5);}
.hero__k{margin:0;font-size:var(--fs-xs);font-weight:600;letter-spacing:.04em;color:var(--navy-mid);}
.hero__h{margin:var(--sp-1) 0 var(--sp-2);font-family:var(--sans);font-weight:500;font-size:var(--fs-xl);line-height:1.1;color:var(--navy);}
.hero__lead{margin:0 0 var(--sp-3);font-size:var(--fs-md);color:var(--navy-mid);max-width:56ch;}
.hero .progress{max-width:420px;}
.hero__side{display:grid;gap:var(--sp-2);justify-items:start;font-size:var(--fs-sm);color:var(--navy);}
.hero__side .ico{color:var(--navy-mid);}
@media (max-width:720px){.hero{grid-template-columns:minmax(0,1fr);padding:var(--sp-4);}.hero__h{font-size:var(--fs-lg);}}

/* Tip (E2A.kit.tip): one job, in three shapes. The kind is a word and a 4 px accent, never colour alone. */
.tips{display:grid;gap:var(--sp-4);}
.tip{position:relative;padding:var(--sp-4) var(--sp-5) var(--sp-4) calc(var(--sp-5) + 4px);border:1px solid var(--line);
  border-radius:var(--r-panel);background:var(--white);}
.tip::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:var(--r-panel) 0 0 var(--r-panel);background:var(--navy-soft);}
.tip--quick::before{background:var(--navy);}        /* a kind, not a state (decision K115) */
.tip--align::before{background:var(--amber);}       /* 2.19:1 on white: a 4 px accent that always sits beside the word, colour never alone */
.tip--policy::before{background:var(--navy-soft);}  /* 4.06:1 */
.tip__kind{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-3);margin:0 0 var(--sp-2);font-size:var(--fs-xs);font-weight:600;color:var(--navy-mid);}
.tip--align .tip__kind{color:var(--amber-deep);}    /* 6.29:1 */
.tip__kind .push{margin-left:auto;font-weight:500;color:var(--navy-mid);}
.tip__h{margin:0 0 var(--sp-2);font-size:var(--fs-md);font-weight:600;line-height:1.35;color:var(--navy);}
.tip__why{margin:0 0 var(--sp-3);font-size:var(--fs-sm);color:var(--navy-mid);max-width:72ch;}
.tip__meta{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin:0 0 var(--sp-3);padding:0;list-style:none;}
.tip__meta li{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--r-pill);background:var(--paper);
  border:1px solid var(--mist);font-size:var(--fs-xs);font-weight:500;color:var(--navy);}
.tip__meta li.measured{background:var(--mist-2);border-color:var(--navy-soft);color:var(--navy);}
.tip__notice{margin:0 0 var(--sp-3);font-size:var(--fs-sm);color:var(--navy);max-width:72ch;}
.tip__done{margin:var(--sp-3) 0 0;font-size:var(--fs-xs);color:var(--navy-mid);}
.tip .btnrow{margin-top:var(--sp-4);}
.tip--waiting{background:var(--amber-tint);border-color:var(--amber-line);}
/* A quick win is compact, its buttons on the right; a tip that needs alignment names who notices; a policy tip is a document. */
.tip--quick{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-2) var(--sp-5);align-items:start;}
.tip__side{display:grid;gap:var(--sp-2);justify-items:stretch;min-width:190px;}
.tip__side .btn{justify-content:center;}
.tip__people{margin:0 0 var(--sp-3);padding:var(--sp-3) var(--sp-4);border-radius:var(--r);background:var(--amber-tint);border:1px solid var(--amber-line);}
.tip__people p{margin:0 0 var(--sp-2);font-size:var(--fs-xs);font-weight:600;color:var(--amber-deep);}
.tip__people ul{margin:0;padding:0;list-style:none;display:grid;gap:var(--sp-1);font-size:var(--fs-sm);color:var(--navy);}
.tip__people li{display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-3);}
.tip--policy{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--sp-2) var(--sp-4);align-items:start;}
.tip__doc{display:grid;place-items:center;width:52px;height:64px;border-radius:var(--r);background:var(--paper);border:1px solid var(--mist);color:var(--navy-mid);}
@media (max-width:720px){
  .tip{padding:var(--sp-3) var(--sp-3) var(--sp-3) calc(var(--sp-3) + 4px);}
  .tip--quick,.tip--policy{grid-template-columns:minmax(0,1fr);}
  .tip__side{min-width:0;}
  .tip__doc{display:none;}
}

/* Done (E2A.kit.done): a small reward, not a party: a filled green check and one line that says what got safer. The check
   scales in once, and not at all under prefers-reduced-motion. */
.donelist{display:grid;gap:var(--sp-2);margin:0;padding:0;list-style:none;}
.done{display:flex;align-items:flex-start;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);border-radius:var(--r-panel);
  background:var(--done-bg);border:1px solid var(--done-line);color:var(--navy);font-size:var(--fs-sm);}
.done__check{display:inline-grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:var(--green-deep);color:var(--white);}
.done b{font-weight:600;}
.done .sub{display:block;color:var(--done-ink);}
@media (prefers-reduced-motion:no-preference){
  .done--new .done__check{animation:done-pop .5s cubic-bezier(.2,1.4,.4,1) both;}
  @keyframes done-pop{from{transform:scale(.4);opacity:0;}to{transform:scale(1);opacity:1;}}
  .bars__fill,.progress__fill{animation:bar-grow .9s cubic-bezier(.16,1,.3,1) both;transform-origin:left;}
  @keyframes bar-grow{from{transform:scaleX(0);}to{transform:scaleX(1);}}
}
/* Later: the quiet list of what was planned or accepted, each with its icon and its decision. */
.later{display:grid;margin:0;padding:0;list-style:none;}
.later li{display:flex;align-items:flex-start;gap:var(--sp-3);padding:var(--sp-3) 0;border-top:1px solid var(--line);font-size:var(--fs-sm);color:var(--navy);}
.later li:first-child{border-top:0;}
.later .ico{color:var(--navy-mid);margin-top:2px;}

/* ==== 15. Route, focus and meter (decision K106, docs/wording.md) ==========================================================
   The Plan page as a route, after mock B4.1 (docs/mocks/improvement-plan/b4.1-plan-page-varied.html): the website's brand on
   a light page, green for progress only, risk as dots, who notices as a meter. Labels (.caps) in the kit's own label style
   (Public Sans, small capitals with tracking), not the website's monospace; every size from the type scale (docs/kit.md). */
/* No capitals (design round of 13 October 2026): a label is the kit's label, 12/600 navy-mid in sentence case, as on every other page. */
.caps{margin:0;font-size:var(--fs-xs);font-weight:600;color:var(--navy-mid);}
.caps b{font-weight:600;color:var(--navy);}

/* Goal (E2A.kit.goal): x of y done as a large ring, the figure inside. */
.goal{position:relative;display:inline-grid;place-items:center;width:128px;height:128px;flex:none;}
.goal svg{position:absolute;inset:0;width:100%;height:100%;}
.goal circle{fill:none;stroke-width:3;}
.goal__track{stroke:var(--mist);}
.goal__fill{stroke:var(--progress);stroke-linecap:round;}
.goal.is-full .goal__fill{stroke:var(--green);}   /* everything done: good (decision K115) */
.goal__n{position:relative;display:grid;justify-items:center;text-align:center;line-height:1;}
.goal__n b{font-family:var(--sans);font-size:var(--fs-xl);font-weight:500;letter-spacing:-.01em;color:var(--navy);font-variant-numeric:tabular-nums;}
.goalwrap{display:inline-grid;justify-items:center;gap:var(--sp-2);}
.goal__cap{max-width:240px;font-size:var(--fs-xs);line-height:1.35;text-align:center;color:var(--navy-mid);}
.goal__n span{margin-top:4px;font-size:var(--fs-xs);font-weight:500;color:var(--navy-mid);}

/* Meter (E2A.kit.meter): who notices, as dots, an empty track or a dotted one, always beside its words. */
.meter{display:inline-flex;align-items:center;gap:var(--sp-2);}
.meter svg{width:64px;height:8px;flex:none;overflow:visible;}
.meter--used .meter__dot{fill:var(--navy-mid);}
.meter--used .meter__word{color:var(--navy);}
.meter--quiet .meter__track{fill:var(--mist);}
.meter--expected .meter__outline{fill:none;stroke:var(--navy-soft);stroke-width:1;stroke-dasharray:2 2;}
.meter--expected .meter__dots{stroke:var(--navy-mid);stroke-width:4;stroke-linecap:round;stroke-dasharray:0 6;}
.meter__word{font-size:var(--fs-xs);color:var(--navy-mid);}

/* Risk (E2A.kit.risk): three dots, coral-deep for high, amber for medium; beside the word, never alone. */
.risk{display:inline-flex;align-items:center;gap:4px;margin-right:6px;}
.risk i{width:7px;height:7px;border-radius:50%;background:var(--mist);}
.risk--high i{background:var(--coral-deep);}
.risk--medium i:nth-child(-n+2){background:var(--amber);}
.risk--low i:first-child{background:var(--navy-soft);}

/* Route (E2A.kit.route): numbered nodes on one line; the line navy below a done step, dashed below a started one; a done node a green check. */
/* One grid for the page (decision K106, round 3): a rail of --node, a gap of --rail, then the content edge; every text on the
   route starts on that edge, every right edge on the column's edge. */
.route,.routepage{--node:40px;--rail:32px;}
.route{list-style:none;margin:0;padding:0;}
.route__step{position:relative;display:grid;grid-template-columns:var(--node) minmax(0,1fr);gap:0 var(--rail);padding-bottom:var(--sp-4);}
.route__step::before,.route__mark::before{content:"";position:absolute;left:calc(var(--node) / 2 - 1px);width:2px;background:var(--mist);}
.route__step::before{top:var(--node);bottom:0;}
.route__step:last-child::before{display:none;}
.route__step.is-done::before,.route__mark.is-after-done::before{background:var(--progress);}
.route__step.is-started::before,.route__mark.is-after-started::before{background:repeating-linear-gradient(var(--progress) 0 5px,transparent 5px 10px);}
.route__mark{position:relative;display:grid;grid-template-columns:var(--node) minmax(0,1fr);gap:0 var(--rail);padding:var(--sp-3) 0 var(--sp-2);}
.route__mark::before{top:0;bottom:0;}
/* A route that opens with its group label (Documenten: "Nu" above step 1) has no line above that label. */
.route > .route__mark:first-child::before{display:none;}
.route__mark .caps{grid-column:2;}
.route__node{position:relative;z-index:1;display:grid;place-items:center;width:var(--node);height:var(--node);border-radius:50%;background:var(--white);
  border:1.5px solid var(--navy-soft);font-size:var(--fs-sm);font-weight:600;color:var(--navy);font-variant-numeric:tabular-nums;}
.route__node .ico{width:18px;height:18px;}
.is-focus > .route__node{background:var(--navy);border-color:var(--navy);color:var(--white);box-shadow:0 0 0 6px var(--paper);}
.is-done > .route__node{background:var(--green-deep);border-color:var(--green-deep);color:var(--white);}
.is-started > .route__node{border-color:var(--progress);color:var(--progress);}
.route__body{min-width:0;}
.checkline{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px var(--sp-3);min-height:var(--node);margin:0;padding-top:9px;font-size:var(--fs-sm);color:var(--navy);}
.checkline b{font-weight:600;}
.checkline span{font-size:var(--fs-xs);color:var(--navy-mid);}
.is-started .checkline span{font-weight:600;}

/* Focus (E2A.kit.focus): the step you are on, the one card on the route, with its three figures. Always an article: a marked
   row (tr.focus, .tree__leaf.focus, the kit's mark) carries the same class and must not get the card's margin, padding and border. */
article.focus{margin:-6px 0 0 calc(-1 * var(--sp-4) - 1px);padding:var(--sp-4) var(--sp-4) var(--sp-5);background:var(--white);border:1px solid var(--card-line);border-radius:var(--r-panel);box-shadow:var(--card-shadow);}
.focus__k{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-1) var(--sp-3);margin:0;}
.focus__src{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-xs);color:var(--navy-mid);}
.focus__h{margin:var(--sp-2) 0 0;font-size:var(--fs-kpi);font-weight:600;line-height:1.15;letter-spacing:-.02em;color:var(--navy);text-wrap:balance;}
.figs{display:flex;flex-wrap:wrap;gap:var(--sp-3) var(--sp-5);margin:var(--sp-4) 0 0;padding:var(--sp-3) 0;border-top:1px solid var(--mist);border-bottom:1px solid var(--mist);}
.fig{display:grid;gap:6px;align-content:start;}
.fig__v{display:flex;align-items:baseline;gap:var(--sp-2);margin:0;min-height:40px;}
.fig__v b{font-family:var(--sans);font-size:var(--fs-xl);font-weight:500;line-height:1;letter-spacing:-.01em;color:var(--navy);font-variant-numeric:tabular-nums;}
.fig__v span{font-size:var(--fs-sm);color:var(--navy-mid);}
.fig__v .risk{align-self:center;}
.fig__v .risk + span{align-self:center;}
.fig__v .meter{align-self:center;}
.fig__v .fig__w{align-self:center;font-size:var(--fs-md);font-weight:600;color:var(--navy);}
.fig__v .fig__w + span{align-self:center;}
.fig__v .risk i{width:10px;height:10px;}
.focus__one{display:grid;gap:var(--sp-3);margin-top:var(--sp-4);min-width:0;}
.focus__one > .more{margin:0;}
.focus__two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-4) var(--sp-5);margin-top:var(--sp-4);}
.focus__two > div{min-width:0;}
.focus__two .caps{margin-bottom:var(--sp-2);}
.focus__done{margin:var(--sp-4) 0 0;font-size:var(--fs-xs);color:var(--navy-mid);}
article.focus .advice .btn{max-width:100%;height:auto;min-height:var(--control-h);padding-block:6px;line-height:1.35;white-space:normal;text-align:left;}

/* Step line (E2A.kit.stepLine): one line per step that opens in 150 ms. */
.stepline{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:4px var(--sp-3);align-items:center;width:100%;min-height:40px;padding:6px 0;
  border:0;background:none;text-align:left;font:inherit;color:inherit;cursor:pointer;}
.stepline > .ico{color:var(--navy-mid);}
.stepline--plain{grid-template-columns:minmax(0,1fr) auto;}
.stepline--plain .stepline__t,.stepline--plain .stepline__s{grid-column:1;}
.stepline--plain .stepline__m{grid-column:2;}
.stepline--plain ~ .fold__in,.stepline--plain ~ .stepfold .fold__in{padding-left:0;}
.stepline__t{font-size:var(--fs-sm);font-weight:600;line-height:1.35;}
.stepline__s{grid-column:2;display:flex;flex-wrap:wrap;align-items:center;gap:4px var(--sp-3);font-size:var(--fs-xs);color:var(--navy-mid);}
.stepline__s > .ico{width:16px;height:16px;color:var(--navy-mid);}
/* A slot of the line: its label, its dots or meter, one word; every line has the same slots in the same places. */
.slot{display:inline-flex;flex:none;width:220px;align-items:center;gap:var(--sp-2);min-width:0;white-space:nowrap;}
.slot .caps{font-size:var(--fs-xs);}
.stepline__m{grid-row:1 / span 2;grid-column:3;text-align:right;line-height:1;}
.stepline__m b{font-family:var(--sans);font-size:var(--fs-lg);font-weight:500;letter-spacing:-.01em;font-variant-numeric:tabular-nums;}
.stepline__m span{display:block;margin-top:3px;font-size:var(--fs-xs);font-weight:500;color:var(--navy-mid);}
.stepline:hover .stepline__t{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;}
.stepfold{display:grid;grid-template-rows:0fr;transition:grid-template-rows .15s ease-out;}
.stepfold > div{overflow:hidden;min-width:0;visibility:hidden;transition:visibility 0s .15s;}
.stepfold.is-open > div{visibility:visible;transition:visibility 0s;}
.stepfold.is-open{grid-template-rows:1fr;}
.fold__in{display:grid;gap:var(--sp-2);padding:var(--sp-1) 0 var(--sp-3) calc(22px + var(--sp-3));max-width:72ch;font-size:var(--fs-sm);}
.fold__in p{margin:0;}

/* Side box and pair (E2A.kit.sideBox, pair): a card in the side column; a figure from what to what. */
.sidebox{display:grid;gap:var(--sp-2);}
.sidebox--top{padding-top:var(--sp-3);border-top:3px solid var(--progress);}
.sidebox__big{margin:0;font-family:var(--sans);font-size:var(--fs-xl);font-weight:500;line-height:1.05;letter-spacing:-.01em;color:var(--navy);font-variant-numeric:tabular-nums;}
.sidebox p{margin:0;}
.sidelink{margin:0;}
.sidelink a{font-size:var(--fs-sm);font-weight:600;color:var(--navy);text-underline-offset:3px;}
.pair{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-3);}
.pair__v{margin:0;font-family:var(--sans);font-size:var(--fs-kpi);font-weight:500;line-height:1;letter-spacing:-.01em;color:var(--navy);font-variant-numeric:tabular-nums;white-space:nowrap;}
.pair__v span{color:var(--progress);font-weight:500;}
.pair__k{margin:6px 0 0;font-size:var(--fs-xs);color:var(--navy-mid);}
.pair .trend{width:100%;max-width:180px;height:40px;margin-top:var(--sp-2);}
/* The route page: its head (the month line, title with the month in italics, the coral line, the goal ring, the stat trio) and the
   route beside a sticky side column, one column under 980 px with the route first. */
.routehead{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-4) var(--sp-5);align-items:center;margin:var(--sp-6) 0 var(--sp-5);}
.routehead > div{min-width:0;}
.routehead .goalwrap{justify-self:end;}
.routehead__k{margin:0;font-size:var(--fs-xs);font-weight:600;letter-spacing:.04em;color:var(--navy-mid);}
/* The title of a route page is the page title of every other page (.display): 32/500, one italic word in coral. */
.routehead__h{margin:var(--sp-2) 0 0;font-family:var(--sans);font-size:var(--fs-xl);font-weight:500;line-height:1.15;letter-spacing:-.016em;color:var(--navy);text-wrap:balance;}
.routehead__h em{font-style:italic;font-weight:400;letter-spacing:-.01em;color:var(--coral-deep);}   /* the accent, 3.63:1 at 28-32 px */
.routehead__rule{width:56px;height:3px;margin:var(--sp-3) 0;border-radius:var(--r);background:var(--coral);}
.routehead__lead{margin:0;font-size:var(--fs-md);color:var(--navy-mid);max-width:56ch;}
.routehead__since{margin:var(--sp-2) 0 0;font-size:var(--fs-xs);color:var(--navy-mid);}
.routehead .stats{grid-column:1 / -1;}
.routepage{display:grid;grid-template-columns:minmax(0,680px) minmax(0,400px);grid-template-areas:"head ." "main side";justify-content:start;column-gap:72px;align-items:start;}
.routepage > .routehead{grid-area:head;}
.routepage > div{grid-area:main;min-width:0;}
.routepage > aside{grid-area:side;position:sticky;top:var(--sp-4);display:grid;gap:var(--sp-5);min-width:0;}
.routepage .callout{margin:var(--sp-4) 0 var(--sp-5) calc(var(--node) + var(--rail));}
.routepage > aside .callout,.routepage .doctiles__h > .callout{margin:0;}
.routepage .later li{font-size:var(--fs-xs);}
@media (max-width:980px){
  .routepage{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "main" "side";row-gap:var(--sp-5);}
  .routepage > aside{position:static;}
}

/* ==== 16. Shapes that vary (docs/kit.md): stat trio, quote, callout, timeline, document card, accounts ================== */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));}
.stat{display:grid;gap:4px;align-content:start;padding:0 var(--sp-4);}
.stat:first-child{padding-left:0;}
.stat + .stat{border-left:1px solid var(--mist);}
.stat__v{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px var(--sp-2);margin:0;}
.stat__v b{font-family:var(--sans);font-size:var(--fs-kpi);font-weight:500;line-height:1;letter-spacing:-.01em;color:var(--navy);font-variant-numeric:tabular-nums;}
.stat__v span{font-size:var(--fs-sm);color:var(--navy-mid);}
.stat__n{margin:0;font-size:var(--fs-xs);color:var(--navy-mid);}
.quote{margin:0 0 var(--sp-3);padding:var(--sp-3) var(--sp-4);background:var(--mist-2);border-left:3px solid var(--coral);border-radius:0 var(--r-panel) var(--r-panel) 0;}
.quote p{margin:0;font-family:var(--sans);font-style:italic;font-size:var(--fs-md);line-height:1.45;color:var(--navy);}
.quote cite{display:block;margin-top:var(--sp-2);font-style:normal;font-size:var(--fs-xs);font-weight:600;color:var(--navy-mid);}
.callout{margin:0;padding:var(--sp-1) 0 var(--sp-1) var(--sp-4);border-left:3px solid var(--progress);}
.callout p{margin:0;font-family:var(--sans);font-style:italic;font-size:var(--fs-md);line-height:1.45;color:var(--navy);}
.callout b{display:block;margin-bottom:4px;font-family:var(--sans);font-style:normal;font-size:var(--fs-sm);font-weight:600;color:var(--navy);}
.timeline{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));margin:0;padding:0;}
.timeline li{position:relative;padding:20px var(--sp-2) 0 0;font-size:var(--fs-xs);color:var(--navy-mid);}
.timeline li::before{content:"";position:absolute;top:4px;left:0;width:10px;height:10px;box-sizing:border-box;border-radius:50%;background:var(--white);border:2px solid var(--mist);}
.timeline li::after{content:"";position:absolute;top:8px;left:14px;right:4px;height:2px;background:var(--mist);}
.timeline li:last-child::after{display:none;}
.timeline li.is-on::before{background:var(--progress);border-color:var(--progress);}
.timeline li.is-on::after{background:var(--progress);}
.timeline li.is-now::before{background:var(--amber-tint);border-color:var(--amber);}
.timeline b{display:block;font-weight:600;color:var(--navy);}
.doccard{display:grid;grid-template-columns:64px minmax(0,1fr);gap:var(--sp-3) var(--sp-4);align-items:start;padding:var(--sp-4);background:var(--mist-2);border-radius:var(--r-panel);}
.doccard__page{position:relative;width:64px;height:80px;background:var(--white);border:1px solid var(--mist);border-radius:var(--r);clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%);}
.doccard__page::before{content:"";position:absolute;top:0;right:0;width:16px;height:16px;background:var(--mist);}
.doccard__page i{position:absolute;left:10px;right:12px;height:3px;border-radius:var(--r);background:var(--mist);}
.doccard__page i:nth-child(1){top:26px;}
.doccard__page i:nth-child(2){top:36px;}
.doccard__page i:nth-child(3){top:46px;right:22px;}
.doccard__page i:nth-child(4){top:56px;}
.doccard__page b{position:absolute;left:10px;bottom:8px;font-size:var(--fs-xs);font-weight:600;color:var(--navy-soft);}
.doccard__h{margin:var(--sp-1) 0;font-size:var(--fs-md);font-weight:600;line-height:1.25;letter-spacing:-.01em;color:var(--navy);}
.doccard p{margin:0 0 6px;font-size:var(--fs-sm);color:var(--navy-mid);max-width:62ch;}
.doccard .doccard__done{font-size:var(--fs-xs);}
/* The feature document (docCard feature): white, the navy top edge; the one card on the shelf with an
   edge, so the eye lands there first (on Documenten the document the board adopts). */
.doccard--feature{grid-template-columns:96px minmax(0,1fr);background:var(--white);border:1px solid var(--card-line);border-top:3px solid var(--progress);border-radius:0 0 var(--r-panel) var(--r-panel);box-shadow:var(--card-shadow);}
.doccard--feature .doccard__page{width:96px;height:120px;background:var(--paper);}
.doccard--feature .doccard__h{font-size:var(--fs-lg);letter-spacing:-.015em;}
/* The shelf (docTiles): a tile per document, its drawn page in the state's tint, the whole tile a link. */
.doctiles{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--sp-3);margin:0;padding:0;}
.doctiles__h{margin:var(--sp-5) 0 var(--sp-3);}
.doctile{display:grid;grid-template-columns:44px minmax(0,1fr);gap:var(--sp-2) var(--sp-3);align-items:start;height:100%;padding:var(--sp-3);
  background:var(--white);border:1px solid var(--card-line);border-radius:var(--r-panel);color:inherit;text-decoration:none;}
.doctile:hover{border-color:var(--navy-soft);}
.doctile__page{position:relative;width:44px;height:56px;background:var(--paper);border-radius:var(--r);clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%);}
.doctile__page::after{content:"";position:absolute;left:8px;right:10px;top:12px;height:20px;background:repeating-linear-gradient(var(--mist) 0 2px,transparent 2px 7px);}
.doctile__page b{position:absolute;left:7px;bottom:4px;font-size:var(--fs-xs);font-weight:600;color:var(--navy-soft);}
.doctile.is-adopted .doctile__page{background:var(--green-tint);}
.doctile.is-adopted .doctile__page b{color:var(--green-ink);}
.doctile.is-review .doctile__page{background:var(--amber-tint);}
.doctile.is-review .doctile__page b{color:var(--amber-deep);}
.doctile__b{display:grid;gap:2px;justify-items:start;min-width:0;}
.doctile__h{font-size:var(--fs-sm);font-weight:600;line-height:1.3;color:var(--navy);overflow-wrap:break-word;hyphens:auto;}
.doctile__b > span{font-size:var(--fs-xs);color:var(--navy-mid);}
.doctile__b .pill{margin-top:6px;}
.accounts{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--sp-2);margin:var(--sp-1) 0 var(--sp-2);padding:0;}
.accounts li{display:grid;gap:2px;padding:var(--sp-2) var(--sp-3);background:var(--mist-2);border-radius:var(--r-panel);}
.accounts b{font-size:var(--fs-sm);font-weight:600;color:var(--navy);overflow-wrap:anywhere;}
.accounts span{font-size:var(--fs-xs);color:var(--navy-mid);}

@media (prefers-reduced-motion:no-preference){
  .route__step,.route__mark{animation:route-settle .5s cubic-bezier(.16,1,.3,1) both;}
  .route > :nth-child(2){animation-delay:.04s;}
  .route > :nth-child(3){animation-delay:.08s;}
  .route > :nth-child(4){animation-delay:.12s;}
  .route > :nth-child(5){animation-delay:.16s;}
  .route > :nth-child(6){animation-delay:.2s;}
  .route > :nth-child(n+7){animation-delay:.24s;}
  @keyframes route-settle{from{opacity:.35;transform:translateY(10px);}}
  .goal__fill{animation:goal-fill 1.1s cubic-bezier(.16,1,.3,1) .2s both;}
  @keyframes goal-fill{from{stroke-dasharray:0 100;}}
}
@media (prefers-reduced-motion:reduce){.stepfold,.stepfold > div{transition:none;}}
@media (max-width:720px){
  .route,.routepage{--node:32px;--rail:16px;}
  article.focus{margin-left:-13px;padding:12px 12px var(--sp-4);}
  .focus__h{font-size:var(--fs-lg);}
  .figs{gap:var(--sp-3) var(--sp-4);}
  .fig__v b{font-size:var(--fs-kpi);}
  .focus__two{grid-template-columns:minmax(0,1fr);}
  .stepline{grid-template-columns:minmax(0,1fr) auto;gap:4px var(--sp-2);}
  .stepline > .ico,.stepline > span:first-child:empty{display:none;}
  .stepline__t{grid-column:1;}
  .stepline__s{grid-column:1;}
  .stepline__m{grid-column:2;}
  .stepline__m b{font-size:var(--fs-lg);}
  /* the two slots under the title, one per line, the kind's icon before them; the labels one width so the dots line up */
  .stepline__s{grid-column:1 / -1;display:grid;grid-template-columns:16px minmax(0,1fr);gap:2px var(--sp-2);}
  .stepline__s > .ico{grid-row:span 2;align-self:start;margin-top:2px;}
  .stepline__s > :not(.ico){grid-column:2;}
  .slot{width:auto;}
  .slot .caps{min-width:76px;}
  .fold__in{padding-left:0;}
  .stat{min-width:0;padding:0 var(--sp-2);}
  .stat .caps{letter-spacing:.06em;}
  .stat__v b{font-size:var(--fs-lg);}
  .stat__v span{flex-basis:100%;font-size:var(--fs-xs);}
  .doccard{grid-template-columns:minmax(0,1fr);}
  .doccard--feature{grid-template-columns:minmax(0,1fr);}
  .doccard__page{display:none;}
  .quote p,.callout p{font-size:var(--fs-md);}
  .pair{grid-template-columns:minmax(0,1fr);}
  .routehead{grid-template-columns:minmax(0,1fr) 100px;align-items:start;gap:var(--sp-3);margin-top:var(--sp-4);}
  .routehead__h{font-size:var(--fs-kpi);}
  .routehead .goal{width:84px;height:84px;}
  .routehead .goal__cap{max-width:100px;}
  .routehead .goal__n b{font-size:var(--fs-kpi);}
  .routehead .goal__n span{font-size:var(--fs-xs);letter-spacing:.06em;}
}

/* the stat trio (Plan: Snelle winst · Eerst afstemmen · Beleid) stacks in one column under 480 px instead of three cramped ones */
@media (max-width:479px){
  .stats{grid-template-columns:minmax(0,1fr);gap:var(--sp-3);}
  .stat,.stat:first-child{padding:0;}
  .stat + .stat{border-left:0;border-top:1px solid var(--mist);padding-top:var(--sp-3);}
}
@media print{
  /* A tip may run over a page (a command is long); its head stays with its first lines. Colour where it carries meaning. */
  .tip{break-inside:auto;}
  .tip__kind,.tip__h{break-after:avoid;}
  .tip::before,.hero,.done,.progress__fill,.bars__fill{print-color-adjust:exact;-webkit-print-color-adjust:exact;}
  .hero,.done{break-inside:avoid;}
  .tip .btnrow,.tip__side{display:none;}
  /* Paper has no screen to breathe on: the head and the panels keep the tighter padding, so a page prints as before. */
  .app .head{padding:0 0 var(--sp-3);}
  .app .sec{padding:var(--sp-4);margin:0 0 var(--sp-4);}
}

/* ==== The K148 layer (decision K148, 18 October 2026): one layer over the kit ================================================
   The zero design of K119 (13 October 2026: a rail on the left, one typeface, near-white paper, a state as a dot and a word, no
   shadows) with the design round of K148 over it (concepten/2026-10-17-ontwerpronde-k148 in the working folder, round 4b): the page ground
   only as the space between, everything with text on white except the page head, one typeface (Public Sans), the three words as
   marks, "nu" as a navy edge, a white rail of 232 px that collapses to 56 px. Every colour below is a token of the :root block
   right here (dark mode comes later as one more layer of tokens); the rules above stay as the fallback stand. docs/kit.md, The
   K148 layer. */
:root{
  --sans:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  /* ink and paper: three greys for text, white where text stands, the page ground (icy blue-grey, K156) only as the space between on a reading page */
  --ink:#0f1f2b; --ink-2:#51616b; --ink-3:#65727a;
  --paper:#ffffff; --page:#f1f5f8; --page-line:#dde6ec;
  /* the ground of round 4b, for whoever chooses it in the display (decision K157) */
  --page-linen:#f8f5ef; --page-line-linen:#ebe5db;
  --ground:#fbfbfa; --rule:#e5e8e9; --rule-2:#f0f2f3; --hover:#f4f6f7; --bad:#c2454f;
  /* the three words as a mark (a 4 px stripe, the colour of an icon), never as a fill */
  --m-policy:#9f88d3; --m-docs:#e0a526; --m-meas:#6d9cc3;
  /* the light fill of the marks: 8 % of each word's tint in white, where the three words stand as a set (the Dashboard's three
     tiles, the section heads of the side panel on Status) and nowhere else; text on it in --ink or --ink-2 */
  --m-policy-tint:#f7f5fb; --m-docs-tint:#fdf8ee; --m-meas-tint:#f3f7fa;
  /* type and colour on navy (the primary button, a chosen chip, the phone's bar) */
  --on-navy:#ffffff; --on-navy-2:rgba(255,255,255,.72); --on-navy-tint:rgba(255,255,255,.18); --navy-hover:#1a3547;
  /* the scale: 12 caption, 13 grid, 14 buttons and meta, 15 text, 17 lead, 20 h2, 22 drawer title, 24 the step, 28 h1, 64 score */
  --fs-xs:12px; --fs-grid:13px; --fs-sm:14px; --fs-md:15px; --fs-lead:17px; --fs-h2:20px; --fs-lg:22px; --fs-step:24px;
  --fs-kpi:28px; --fs-xl:28px; --fs-hero:64px;
  /* corners: 6 for a button and a field, 12 for a plane */
  --r:6px; --r-panel:12px;
  --rail:232px; --rail-mini:56px;
}
/* every page stands on the page ground (decision K157): the reading pages and Status and Beheer alike; what you read or work in is a
   white sheet on it */
body.app{background:var(--page);color:var(--ink);font-feature-settings:"tnum" 1;}
/* the frame: the bar is a rail from 980 px; under that it stays the bar with its Menu */
@media (min-width:980px){
  body.app{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);align-items:start;padding:0;}
  body.app > *{grid-column:2;}
  .app .topbar{grid-column:1;grid-row:1 / span 40;position:sticky;top:0;height:100vh;overflow:auto;margin:0;
    flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:0;padding:28px 20px 24px;min-height:0;
    background:var(--white);color:var(--navy);border-right:1px solid var(--rule);}
  .app .topbar a.topbar__logo{order:-3;width:136px;height:22px;margin:0 0 22px;background:var(--navy);}
  .app .topbar__tenant,.app .topbar select{order:-2;margin:0 0 20px;padding:0 10px;max-width:100%;white-space:normal;font-size:var(--fs-xs);line-height:1.4;color:var(--navy);}
  .app .topbar select{height:var(--control-h-sm);border:1px solid var(--rule);padding:0 8px;}
  .app .topbar__links{display:flex;flex-direction:column;gap:2px;}
  .app .topbar a,.app .topbar .navgroup__list a{height:36px;padding:0 10px;border-radius:var(--r);color:var(--ink-2);font-weight:500;white-space:nowrap;}
  .app .topbar a:hover,.app .topbar .navgroup__list a:hover{background:var(--rule-2);color:var(--navy);}
  .app .topbar a.on,.app .topbar .navgroup__list a.on{background:var(--rule-2);color:var(--navy);box-shadow:none;font-weight:600;}
  .app .topbar .navgroup{display:contents;}
  .app .topbar .navgroup__btn{pointer-events:none;height:auto;margin:14px 0 2px;padding:0 10px;font-size:var(--fs-xs);font-weight:500;color:var(--ink-3);background:none;box-shadow:none;}
  .app .topbar .navgroup__btn .ico{display:none;}
  .app .topbar .navgroup__list,.app .topbar .navgroup__list[hidden]{display:flex;flex-direction:column;gap:2px;position:static;min-width:0;padding:0;border:0;box-shadow:none;background:none;}
  .app .topbar__spacer{flex:1 1 auto;}
  .app .topbar .topbar__menu{display:none;}
  .app .trialbar,.app .noticebar,.app .rolebar{margin:0;border-width:0 0 1px;}
  .app .sheet,.app .sheet.wide{max-width:calc(1120px + 2 * 56px);margin:0;padding:0 56px;}
  .app .sheet.narrow{margin:0;}
  .app .head{padding:40px 0 28px;}
  body.app.drawer-open .sheet.wide{margin-right:0;}
}
/* the page: one title, one line, the blocks */
.app .display{font-size:var(--fs-xl);font-weight:500;letter-spacing:-.015em;line-height:1.1;}
.app .display em,.app .display b{font-style:italic;font-weight:400;color:var(--coral-deep);}
.app .head__lead{font-size:var(--fs-sm);color:var(--ink-2);margin-top:var(--sp-1);max-width:72ch;}
.app .sec{border-color:var(--rule);border-radius:var(--r-panel);box-shadow:none;padding:var(--sp-5);}
.app .sec__head h2::after{display:none;}
.app .sec h2,.app .panel > .sec__head h2,.app .dblock > .dblock__h{font-family:var(--sans);font-size:var(--fs-md);font-weight:600;letter-spacing:0;}
.app .sec__note,.app .sub,.app .crumb,.app .subnav__group,.app .k{color:var(--ink-2);}
.app .subnav__group{color:var(--ink-3);font-weight:500;}
.app .subnav a{color:var(--ink-2);font-weight:500;border-left:0;border-radius:var(--r);}
.app .subnav a[aria-current="page"]{background:var(--rule-2);color:var(--navy);border-left:0;}
.app .subnav__n{color:var(--ink-3);}
/* state: a dot and a word, no box */
.app .pill,.app .ctbl .pill,.app .dhead__v .pill{background:none;border:0;padding:0;border-radius:0;font-weight:600;font-size:var(--fs-xs);line-height:1.4;gap:7px;}
.app .pill::before,.app .ctbl .pill::before{width:7px;height:7px;margin:0;}
.app .pill-pass{color:var(--green);} .app .pill-pass::before,.app .ctbl .pill-pass::before{background:var(--green);}
.app .pill-fail,.app .ctbl .pill-fail{color:var(--bad);} .app .pill-fail::before,.app .ctbl .pill-fail::before{background:var(--bad);}
.app .pill-partial,.app .ctbl .pill-partial{color:var(--amber-deep);} .app .pill-partial::before{background:var(--amber);}
.app .pill-unknown,.app .ctbl .pill-unknown{color:var(--ink-2);} .app .pill-unknown::before,.app .ctbl .pill-unknown::before{background:none;box-shadow:inset 0 0 0 1.5px currentColor;}
.app .pill-trial,.app .ctbl .pill-trial{color:var(--bad);} .app .pill-trial::before,.app .ctbl .pill-trial::before{background:linear-gradient(90deg,var(--bad) 50%,transparent 50%);box-shadow:inset 0 0 0 1.5px var(--bad);}
.app .tag{border-color:var(--rule);color:var(--ink-2);}
.app .lockpill{background:var(--rule-2);color:var(--ink-2);}
/* tables: heads in grey, hairlines, chapters as a quiet line */
.app .tw,.app .tbl-wrap{border-color:var(--rule);border-radius:var(--r-panel);}
.app .ctbl th,.app .tbl thead th{font-weight:500;color:var(--ink-3);border-bottom-color:var(--rule);padding-top:10px;padding-bottom:10px;}
.app .ctbl td,.app .tbl tbody td{border-bottom-color:var(--rule-2);}
.app .ctbl tr.ch > td{background:none;border-bottom:1px solid var(--rule);padding-top:14px;padding-bottom:8px;}
.app .ctbl tr.part > td,.app .ctbl tr.signrow > td{background:var(--ground);}
.app .ctbl tr.ch > td.cnt{color:var(--ink-3);}
.app .chtoggle .gsub,.app .sgline .gsub{color:var(--ink-3);}
.app .ctbl tr.focus > td{background:var(--rule-2);}
.app .ctbl tr.row:hover > td,.app .tbl tbody tr:hover{background:var(--ground);}
.app .ctbl td.nr{color:var(--ink-2);}
/* drawer: the head of three as three columns between hairlines */
.app .drawer{box-shadow:none;border-left:1px solid var(--rule);padding:28px 32px 40px;}
.app .drawer__title{font-family:var(--sans);font-size:var(--fs-lg);}
.app .dhead{gap:0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:var(--sp-2) 0;}
.app .dhead__b{background:none;border-radius:0;padding:var(--sp-1) var(--sp-3) var(--sp-1) 0;color:var(--ink-2);}
.app .dhead__b + .dhead__b{border-left:1px solid var(--rule);padding-left:var(--sp-3);}
.app .advice,.app .underneath{background:none;border:1px solid var(--rule);border-radius:var(--r-panel);}
.app .more > summary,.app .fold{color:var(--ink-2);}
/* controls and fields */
.app .btn{border-radius:var(--r);}
.app .btn-ghost{border-color:var(--rule);}
.app .btn-ghost:hover{border-color:var(--ink-3);}
:where(.app .sheet, .app .drawer) :where(input:not([type=checkbox]):not([type=radio]),select,textarea){border-color:var(--rule);border-radius:var(--r);}
.app .seg{border-color:var(--rule);}
.app .seg a + a{border-left-color:var(--rule);}
.app .card{border-color:var(--rule);background:var(--ground);}
.app .foot{color:var(--ink-3);}

/* the overview (the zero design): the score left, the next step right as the one dark block, the steps as one line under it,
   the dossier as one row of four cells between hairlines; no rings */
.app .dash{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--sp-4);align-items:stretch;}
.app .dash > .standrow,.app .dash > .pathrow--one{grid-column:1 / -1;}
.app .hero0{display:grid;gap:var(--sp-1);align-content:center;padding:var(--sp-5) var(--sp-6);background:var(--white);border:1px solid var(--rule);border-radius:var(--r-panel);}
.app .hero0__n{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--sp-3);margin:0;}
.app .hero0__n b{font-size:var(--fs-hero);font-weight:600;line-height:1;letter-spacing:-.05em;color:var(--navy);font-variant-numeric:tabular-nums;}
.app .hero0__n b small{font-size:var(--fs-xl);font-weight:500;letter-spacing:-.02em;color:var(--ink-3);margin-left:2px;}
.app .hero0__t{margin:var(--sp-2) 0 0;font-size:var(--fs-sm);color:var(--ink-2);max-width:40ch;}
.app .hero0__t b{color:var(--navy);font-weight:600;}
.app .hero0__trend{margin:var(--sp-2) 0 0;font-size:var(--fs-xs);font-weight:600;color:var(--green);}
.app .hero0__trend.down{color:var(--bad);}
.app .hero0 .skel{height:48px;margin:var(--sp-2) 0;} .app .hero0 .skel.short{height:14px;}
.app .pathrow{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"next" "steps";gap:var(--sp-3);}
.app .pathrow > .nextcard{grid-area:next;}
.app .pathrow > .pathcard{grid-area:steps;padding:0;border:0;background:none;}
.app .pathcard__head{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sp-1) var(--sp-3);}
.app .pathcard__head .caps{order:2;}
.app .dashtitle{font-family:var(--sans);font-size:var(--fs-sm);font-weight:600;margin:0;}
.app .dashtitle em{font-style:normal;font-size:1em;color:var(--navy);}
/* the next step is "nu" (decision K148): white with a 1.5 px navy edge, no fill */
.app .nextcard{border:1.5px solid var(--navy);border-radius:var(--r-panel);background:var(--paper);color:var(--ink);padding:var(--sp-5) var(--sp-5);gap:var(--sp-2);}
.app .nextcard .caps{color:var(--ink-2);}
.app .nextcard__h{font-family:var(--sans);font-size:var(--fs-step);font-weight:500;line-height:1.3;letter-spacing:-.01em;color:var(--ink);}
.app .nextcard__fig,.app .nextcard__text{color:var(--ink-2);}
.app .nextcard__fig b{color:var(--ink);font-family:var(--sans);font-weight:500;font-size:var(--fs-md);letter-spacing:0;}
/* the six steps as one line: a check and the name for a done step, the open one in bold with "nu"; the notes drop */
.app .dots{display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-3);margin:var(--sp-1) 0 0;}
.app .dots__i{display:inline-flex;align-items:center;gap:6px;padding:0;text-align:left;}
.app .dots__i::before{display:none;}
.app .dots__m{width:auto;height:auto;border:0;background:none;box-shadow:none;color:var(--ink-3);font-size:var(--fs-xs);}
.app .dots__i.is-done .dots__m{background:none;color:var(--green);}
.app .dots__i.is-done .dots__m .ico{width:14px;height:14px;}
.app .dots__i.is-now .dots__m{background:none;color:var(--navy);box-shadow:none;}
.app .dots__t{font-size:var(--fs-xs);font-weight:500;color:var(--ink-2);}
.app .dots__i.is-now .dots__t{font-weight:600;color:var(--navy);}
.app .dots__n{display:none;}
/* the dossier as one row of four: label, figure with its word, one line, a 6 px bar; no ring */
.app .standrow{gap:0;background:var(--white);border:1px solid var(--rule);border-radius:var(--r-panel);}
.app .standcard{grid-template-columns:minmax(0,1fr);border:0;border-radius:0;padding:var(--sp-4) var(--sp-5);background:none;}
.app .standcard + .standcard{border-left:1px solid var(--rule);}
.app .standcard:hover{border-color:var(--rule);}
.app .standcard .ring{display:none;}
.app .standcard__k{color:var(--ink-3);font-weight:500;}
.app .standcard__v b{font-family:var(--sans);font-size:var(--fs-lg);font-weight:600;letter-spacing:-.02em;}
.app .standcard__of{font-weight:400;color:var(--ink-2);font-size:var(--fs-xs);}
.app .standcard__line,.app .standcard__more{color:var(--ink-2);}
@media (max-width:980px){
  .app .dash{grid-template-columns:minmax(0,1fr);}
  .app .standrow{grid-template-columns:repeat(2,minmax(0,1fr));}
  .app .standcard:nth-child(odd){border-left:0;} .app .standcard:nth-child(n+3){border-top:1px solid var(--rule);}
}
@media (max-width:620px){
  .app .standrow{grid-template-columns:minmax(0,1fr);}
  .app .standcard{border-left:0;} .app .standcard + .standcard{border-top:1px solid var(--rule);}
  .app .hero0{padding:var(--sp-4);}
  .app .hero0__n b{font-size:var(--fs-hero);}
}

/* the drawer beside a rail (decision K141): the whole screen under 980 px; from 980 px it lies over the page (the page keeps
   its width) with the scrim, 60 % of the screen, at least 720 px and at most 1200 px */
.app .drawer{width:100%;}
@media (min-width:980px){
  .app .drawer{width:clamp(720px,60vw,1200px);box-shadow:var(--float-shadow);}
  body.app.drawer-open .sheet.wide,body.app.drawer-open.drawer-over .sheet.wide{margin-right:0;}
  body.app.drawer-open .scrim{opacity:1;pointer-events:auto;}
}
/* route pages (Plan, Documenten): no coral stub under the title, the goal ring as a figure in words */
.app .routehead__rule{display:none;}
.app .routehead__lead{margin-top:var(--sp-1);font-size:var(--fs-sm);}
.app .routehead .goal svg{display:none;}
.app .routehead .goal{width:auto;height:auto;}
.app .routehead .goal__n b{font-family:var(--sans);font-size:var(--fs-xl);font-weight:600;letter-spacing:-.03em;}
.app .routehead .goal__cap{text-align:right;max-width:none;}
.app .routehead .goalwrap{justify-items:end;gap:var(--sp-1);}
.app .is-done > .route__node{background:var(--white);border-color:var(--green);color:var(--green);}
.app .route__step.is-done::before,.app .route__mark.is-after-done::before{background:var(--rule);}
.app article.focus{box-shadow:none;border-color:var(--rule);}
.app .focus__h{font-family:var(--sans);font-weight:500;letter-spacing:-.01em;}
.app .caps b{color:var(--navy);}
.app .sidebox--top{border-top-color:var(--navy);}
.app .callout{border-left-color:var(--navy);}

/* ---- the subjects of a page as rows of chips (the zero design): no column of twenty lines beside the panel; the same items,
   the same marks (aria-current), one row per group with its name at the head; the top slot (a lens) above, the foot below */
.app .split{grid-template-columns:minmax(0,1fr);gap:var(--sp-4);}
.app .subcol{display:grid;gap:var(--sp-3);}
.app .subcol__top{padding-left:0;margin:0;}
.app .subnav{flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--sp-2);overflow:visible;padding:0;}
/* a menu in groups: the names in the first column, as wide as the longest name of this menu (each row a subgrid of the
   menu), the chips of a group wrapping in the second; a row without a name (under the tabs) takes both columns */
.app .subnav:has(> .subnav__row){display:grid;grid-template-columns:max-content minmax(0,1fr);gap:var(--sp-2) var(--sp-4);align-items:start;}
.app .subnav__row{display:grid;grid-column:1/-1;grid-template-columns:subgrid;align-items:start;}
.app .subnav__chips{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);min-width:0;}
.app .subnav__chips:first-child{grid-column:1/-1;}
.app .subnav__group{display:inline-flex;align-items:center;min-height:34px;margin:0;font-size:var(--fs-xs);font-weight:500;color:var(--ink-3);white-space:nowrap;}
/* the groups as tabs (Metingen with more than one customer): text in the height of a chip, the chosen one underlined in navy */
.app .subnav__tabs{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:2px;border-bottom:1px solid var(--rule);}
.app .subnav a,.app .subnav a:has(.subnav__n){display:inline-flex;align-items:center;gap:8px;min-height:0;height:34px;padding:0 14px;border:1px solid var(--rule);
  border-radius:var(--r-pill);background:var(--white);color:var(--navy);font-weight:500;line-height:1;white-space:nowrap;hyphens:manual;}
.app .subnav__n{position:static;top:auto;right:auto;margin:0;color:var(--ink-3);font-weight:600;}
.app .subnav a:hover{background:var(--rule-2);color:var(--navy);}
.app .subnav a[aria-current="page"]{background:var(--navy);border-color:var(--navy);color:var(--white);font-weight:500;}
.app .subnav a[aria-current="page"] .subnav__n{color:var(--on-navy-2);}
.app .subnav a.zero{color:var(--ink-3);}
.app .subcol__foot{display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-4);padding:0;margin:0;border:0;font-size:var(--fs-xs);color:var(--ink-3);}
.app .subnav .subnav__tabs a{height:34px;margin-bottom:-1px;padding:0 14px;border:0;border-bottom:3px solid transparent;border-radius:0;
  background:none;color:var(--ink-2);}
.app .subnav .subnav__tabs a:hover{background:none;color:var(--navy);}
.app .subnav .subnav__tabs a[aria-current="page"]{background:none;color:var(--navy);font-weight:600;border-bottom-color:var(--navy);}
/* every figure in the one typeface (the zero design): the serif stays for the page title alone */
.app .fig__v b,.app .stat__v b,.app .goal__n b,.app .sidebox__big,.app .pair__v,.app .stepline__m b,.app .chip .v,.app .nextcard__fig b,.app .ring__n{font-family:var(--sans);font-weight:600;letter-spacing:-.02em;}
.app .focus__h{font-family:var(--sans);font-size:var(--fs-lg);font-weight:600;letter-spacing:-.015em;}
.app .dashtitle,.app .drawer__title{font-family:var(--sans);}

/* on a phone each row of chips is one scrolling row again, as the kit's sidebar was, with the group's name above it */
@media (max-width:720px){
  .app .subnav{flex-wrap:nowrap;overflow-x:auto;padding-bottom:var(--sp-1);scrollbar-width:thin;}
  .app .subnav:has(> .subnav__row){grid-template-columns:minmax(0,1fr);overflow:visible;padding-bottom:0;}
  .app .subnav__row{grid-template-columns:minmax(0,1fr);gap:var(--sp-1);}
  .app .subnav__group{min-height:0;}
  .app .subnav__chips,.app .subnav__tabs{flex-wrap:nowrap;overflow-x:auto;padding-bottom:var(--sp-1);scrollbar-width:thin;}
  .app .subnav__chips:first-child{grid-column:auto;}
  .app .subnav .subnav__tabs a{flex:none;}
  .app .hero0__n b{font-size:var(--fs-hero);}
}

/* the top slot of a page's subjects (Controls: the framework lens and the domain list) as one row of fields, each its own width */
.app .subcol__top{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-5);align-items:end;}
.app .lens select{width:auto;max-width:min(100%,360px);}

/* ---- the lead, the dossier row, the hero, the states and the tags, tightened after the first round of the zero design ---- */
/* a lead wraps on a phone instead of ending in an ellipsis */
@media (max-width:720px){.app .head__lead{white-space:normal;overflow:visible;text-overflow:clip;}}
/* the dossier row: the cells aligned at the top, the figure with its word on one line, the servers line quiet */
.app .standcard{align-content:start;align-items:start;}
.app .standcard__v{align-items:baseline;gap:var(--sp-1) var(--sp-2);}
.app .standcard__of{font-size:var(--fs-sm);}
.app .standcard__line{font-size:var(--fs-xs);}
.app .standcard__more a{font-weight:500;color:var(--ink-2);text-decoration:none;}
.app .standcard__more{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
/* the hero: the score and the dark block the same height, the steps as one line over the full width in their own panel */
.app .pathrow{display:contents;}
.app .pathrow > .nextcard{grid-column:2;grid-row:1;}
.app .dash > .hero0{grid-column:1;grid-row:1;}
.app .pathrow > .pathcard{grid-column:1 / -1;grid-row:2;padding:var(--sp-3) var(--sp-5);background:var(--white);border:1px solid var(--rule);border-radius:var(--r-panel);}
.app .dash > .standrow{grid-row:3;}
.app .dashtitle{font-family:var(--sans);}
.app .pathcard__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sp-1) var(--sp-3);}
.app .pathcard__head + .dots{margin-top:var(--sp-2);}
@media (max-width:980px){
  .app .pathrow > .nextcard,.app .dash > .hero0,.app .pathrow > .pathcard,.app .dash > .standrow{grid-column:1;grid-row:auto;}
}
/* states in a table on the cell's size, the dot centred; a tag in a cell is plain grey text */
.app .ctbl .pill{font-size:var(--fs-sm);font-weight:500;align-items:center;line-height:20px;}
.app .ctbl .pill-fail,.app .ctbl .pill-partial{font-weight:600;}
.app .ctbl .pill::before{margin-top:0;}
.app .ctbl .tag,.app .qtags .tag,.app .qhead .tag{border:0;padding:0;margin:0 var(--sp-1) 0 0;background:none;color:var(--ink-3);font-weight:400;line-height:inherit;}
/* the drawer's title tighter */
.app .drawer__title{line-height:1.15;letter-spacing:-.012em;}
/* the plan's closing block in the one typeface */
.app .callout p,.app .quote p{font-family:var(--sans);font-style:normal;font-size:var(--fs-sm);}
/* focus on the rail in navy (coral on white falls short) */
@media (min-width:980px){.app .topbar :focus-visible{outline-color:var(--navy);}}

/* the measurement pages on the app frame: no capitals in the mode line, the brand line is the rail's */
.app .kicker{text-transform:none;letter-spacing:0;color:var(--ink-3);text-align:left;}
.app .kicker .dot{color:var(--ink-3);}
.app .eyebrow{display:none;}
.app .head__top{margin:0 0 var(--sp-1);}

/* ---- 19. Tree (E2A.kit.tree): the website's controls card with levels, in the look of the zero design ----------------------
   A chapter, its sections and their controls as lines of one grid: fold mark, number, name, bar, figure, count. The columns are
   the same on every level, so number, name, bar and figure stand under each other; the fold mark steps in per level, the figure
   stands right in figures of one width, and the count is quiet on the right. The bar is the kit's score bar (E2A.scoreBar)
   laid into the line's columns (display:contents): its track in the bar column, its figure in the figure column, its band
   (decision K115, docs/kit.md: navy, green from 80%, coral below 50%) unchanged. A control is one line: number, name with what was found and what is
   expected as a second line, the state as dot and word under the bar, new or better quiet on the right. Under 640 px of its
   own width the figure stays on the name's line and the bar and the count go under it. */
.tree{container-type:inline-size;--tree-tg:2.25rem;--tree-tail:10rem 4.25rem 7.5rem;border-top:1px solid var(--rule);}
/* The number column is as narrow as the numbers of its level, so number and name read as one label (as on the website): a
   chapter's two figures, a section's five, a control's 01.01.01 (wider only for the rare longer number). The bar, the figure
   and the count keep their columns on every level; the name's column takes what is left. */
.tree__line,.tree__leaf{display:grid;grid-template-columns:var(--tree-tg) var(--tree-nrw,7ch) minmax(0,1fr) var(--tree-tail);grid-template-areas:"tg nr nm bar pct n";column-gap:8px;
  align-items:center;padding:10px 4px;font-size:var(--fs-sm);line-height:20px;color:var(--navy);}
.tree summary{list-style:none;cursor:pointer;}
.tree summary::-webkit-details-marker{display:none;}
.tree summary:focus-visible,.tree__leaf:focus-visible{outline:2px solid var(--navy);outline-offset:-2px;}
.tree__tg{grid-area:tg;width:14px;height:14px;color:var(--ink-3);vertical-align:0;transition:transform .15s ease;}
details:not([open]) > summary > .tree__tg{transform:rotate(-90deg);}
.tree__nr{grid-area:nr;font-variant-numeric:tabular-nums;color:var(--ink-2);white-space:nowrap;}
.tree__nm{grid-area:nm;min-width:0;overflow-wrap:break-word;}
.tree__n{grid-area:n;text-align:right;font-size:var(--fs-xs);color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap;}
.tree__bar,.tree__bar .scorebar{display:contents;}
.tree .scorebar__track{grid-area:bar;}
.tree .scorebar__n{grid-area:pct;text-align:right;}
/* chapter: the strongest line, a rule under the whole chapter */
.tree__ch{border-bottom:1px solid var(--rule);}
.tree__ch > .tree__line{padding-top:14px;padding-bottom:14px;--tree-nrw:minmax(3ch,max-content);}
.tree__ch > .tree__line .tree__nr,.tree__ch > .tree__line .tree__nm{font-weight:600;color:var(--navy);}
.tree__ch > .tree__in{padding-bottom:var(--sp-2);}
/* section: one step quieter, its fold mark one step in, a thinner bar */
.tree__sec{border-top:1px solid var(--rule-2);}
.tree__sec > .tree__line{--tree-nrw:minmax(5ch,max-content);}
.tree__sec > .tree__line .tree__tg{justify-self:end;}
.tree__sec > .tree__line .tree__nm{font-weight:500;}
.tree__sec .scorebar__track{height:8px;}
.tree__sec .scorebar__n{font-weight:500;}
/* control: one line on paper, the state under the bar */
.tree__leaf{align-items:start;border-top:1px solid var(--rule-2);background:var(--ground);--tree-nrw:minmax(7ch,max-content);}
.tree__leaf .t{display:block;}
.tree__leaf .s{display:block;margin-top:2px;font-size:var(--fs-xs);line-height:16px;color:var(--ink-2);}
.tree__st{grid-column:4 / 6;grid-row:1;}
.tree__st .sub{display:block;font-size:var(--fs-xs);line-height:16px;}
.tree__leaf.clickable{cursor:pointer;}
.tree__leaf.clickable .t::after{content:" \203A";color:var(--ink-3);}
.tree__leaf.clickable:hover{background:var(--rule-2);}
.tree__leaf.focus{background:var(--rule-2);box-shadow:inset 3px 0 0 var(--navy);}
/* what a section keeps closed: a quiet line that opens */
.tree__fold > summary{display:flex;align-items:center;gap:6px;padding:6px 4px 6px calc(2.25rem + 12px);border-top:1px solid var(--rule-2);
  font-size:var(--fs-xs);font-weight:600;color:var(--ink-2);}
.tree__fold > summary > .tree__tg{width:12px;height:12px;}
/* with columns (E2A.kit.tree.wrap with cols; Controls: Beleid, Documenten, Meting): a control's states stand in narrow
   columns of one width over the heads' bar, figure and count, each a dot and a word with what belongs to it under it; the
   columns' names are one quiet line on top, never a table head. Fewer columns in view share the same width. A block under a
   control (a sign-off) stands under its name; what opens a chapter or a section (a reference, the text) stands under its head. */
.tree--cells{--tree-tail:11rem 4.25rem 9rem;}
.tree__cols{display:grid;grid-template-columns:var(--tree-tg) 7ch minmax(0,1fr) var(--tree-tail);column-gap:8px;padding:8px 4px 6px;
  font-size:var(--fs-xs);font-weight:600;line-height:16px;color:var(--ink-3);}
.tree__cells{grid-column:4 / 7;grid-row:1;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);column-gap:8px;min-width:0;}
.tree__c{min-width:0;overflow-wrap:break-word;}
.tree__c .sub{display:block;margin-top:2px;font-size:var(--fs-xs);line-height:16px;}
.tree__c .tag{border:0;padding:0;margin:0;background:none;color:var(--ink-3);font-weight:400;line-height:inherit;}
.tree__c .signbtn{display:block;margin-top:2px;}
.tree__nm .note{display:block;margin-top:2px;font-size:var(--fs-xs);line-height:16px;color:var(--ink-2);font-style:italic;}
.tree__nm .more{margin-top:2px;}
/* a requirement is a leaf or a section on the same level: one number column for both, so their names stand under each other */
.tree--cells .tree__sec > .tree__line{--tree-nrw:minmax(7ch,max-content);}
.tree__below{grid-column:3 / -1;grid-row:2;padding-top:var(--sp-2);cursor:auto;}
.tree__lead{padding:0 4px 8px calc(var(--tree-tg) + 7ch + 20px);font-size:var(--fs-xs);line-height:16px;color:var(--ink-2);}
.tree__lead > *{margin:2px 0 0;}
@container (max-width:640px){
  .tree{--tree-tg:1rem;--tree-tail:3.5rem;}
  .tree__cols{display:none;}
  /* the states under the name, one per line, each after its column's name */
  .tree__cells{grid-column:2 / 5;grid-row:3;grid-auto-flow:row;row-gap:2px;}
  .tree__c{display:grid;grid-template-columns:6.5rem minmax(0,1fr);column-gap:8px;align-items:baseline;}
  .tree__c[data-label]::before{content:attr(data-label);font-size:var(--fs-xs);line-height:16px;color:var(--ink-3);}
  .tree__c > *{grid-column:2;}
  /* reading only on a phone, as the table's reading list was: the sign-off and Aftekenen are for a wider screen */
  .tree__below,.tree .signbtn:not(.has-state){display:none;}
  .tree__lead{padding-left:calc(1rem + 12px);}
  .tree__nr{font-size:var(--fs-xs);}
  .tree__line{grid-template-areas:"tg nr nm pct" ". bar bar bar" ". n n n";row-gap:6px;}
  .tree__line .tree__n{text-align:left;}
  /* a control: its number with new or better on the first line, the name over the full width under it, then the state */
  .tree__leaf{grid-template-areas:"tg nr nr n" ". nm nm nm";row-gap:4px;}
  .tree__st{grid-column:2 / 5;grid-row:3;}
  .tree__fold > summary{padding-left:calc(1rem + 8px);}
}
@media (prefers-reduced-motion:reduce){.tree__tg{transition:none;}}
/* A score in a panel head's tools (a server's head: name, baseline, last seen, score, Meetrapport on one line). */
.phead .tools > .scorebar{flex:0 0 200px;font-size:var(--fs-md);}

/* ---- the filter bar (decision K144): the filters of a list as buttons "Label: waarde ▾" in the size of a chip, each opening a
   list with checks or radios and a count per choice; navy once it holds a choice, as a chosen chip. The list floats under its
   button on a 1 px rule, without a shadow (the zero design); on a phone it takes the width of the bar. */
.fbar{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);}
.fbar__f{position:relative;}
.fbar__btn{display:inline-flex;align-items:center;gap:6px;height:34px;max-width:100%;padding:0 10px 0 14px;border:1px solid var(--rule);
  border-radius:var(--r-pill);background:var(--white);color:var(--navy);font:inherit;font-size:var(--fs-sm);font-weight:500;line-height:1;
  white-space:nowrap;cursor:pointer;}
.fbar__btn:hover{background:var(--rule-2);}
.fbar__btn:focus-visible{outline:2px solid var(--navy);outline-offset:2px;}
.fbar__k{color:var(--ink-3);}
.fbar__v{overflow:hidden;text-overflow:ellipsis;max-width:22ch;}
.fbar__btn .ico{width:14px;height:14px;transition:transform .15s;}
.fbar__btn[aria-expanded="true"] .ico{transform:rotate(180deg);}
.fbar__btn.is-on{background:var(--navy);border-color:var(--navy);color:var(--white);}
.fbar__btn.is-on .fbar__k{color:var(--on-navy-2);}
.fbar__more{display:inline-flex;align-items:center;height:20px;padding:0 6px;border-radius:var(--r-pill);background:var(--rule-2);color:var(--navy);
  font-size:var(--fs-xs);font-weight:600;font-variant-numeric:tabular-nums;}
.fbar__btn.is-on .fbar__more{background:var(--on-navy-tint);color:var(--on-navy);}
.fbar__list{position:absolute;z-index:30;top:calc(100% + 6px);left:0;min-width:260px;max-width:min(380px,calc(100vw - 32px));max-height:min(60vh,440px);
  overflow-y:auto;padding:6px;background:var(--white);border:1px solid var(--rule);border-radius:var(--r-panel);}
.fbar__list[hidden]{display:none;}
.fbar__presets{display:flex;flex-wrap:wrap;gap:4px;padding:2px 2px 8px;margin-bottom:4px;border-bottom:1px solid var(--rule);}
.fbar__preset{height:28px;padding:0 10px;border:1px solid var(--rule);border-radius:var(--r-pill);background:var(--white);color:var(--navy);
  font:inherit;font-size:var(--fs-xs);font-weight:500;cursor:pointer;}
.fbar__preset:hover{background:var(--rule-2);}
.fbar__preset[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:var(--white);}
.fbar__head{margin:6px 8px 2px;font-size:var(--fs-xs);font-weight:500;color:var(--ink-3);}
.fbar__opt{display:flex;align-items:center;gap:10px;min-height:34px;padding:4px 8px;border-radius:var(--r);font-size:var(--fs-sm);color:var(--navy);cursor:pointer;}
.fbar__opt:hover{background:var(--rule-2);}
.fbar__opt input{flex:none;width:16px;height:16px;margin:0;accent-color:var(--navy);}
.fbar__l{flex:1 1 auto;min-width:0;}
.fbar__n{flex:none;color:var(--ink-3);font-weight:600;font-variant-numeric:tabular-nums;}
.fbar__opt.is-zero,.fbar__opt.is-zero .fbar__n{color:var(--ink-3);}
.subcol__top > .fbar{margin:0;}
@media (max-width:720px){
  .fbar__f{position:static;}
  .fbar__list{left:0;right:0;max-width:none;min-width:0;}
}
@media (prefers-reduced-motion:reduce){.fbar__btn .ico{transition:none;}}

/* ---- every open step under the Plan's route (decision K147): one white panel with the filter bar, the search and the kit's table */
.routepage .steps{margin-top:var(--sp-5);}
.steps .fbar{margin:0 0 var(--sp-3);}

/* ---- a report the app issued (decisions K145, K146) --------------------------------------------------------------------
   The verify line and its QR code in the foot of every page of such a pdf, from window.E2A_DATA.report (nav.js); a browser's own
   print has no id and carries neither. The QR stands in @page's margin. The line is a real link, so the pdf gets a link annotation
   and text that copies in one piece: a margin box holds only generated text, and an element pushed into the margin is clipped.
   So the line is position:fixed, which Chromium draws at the foot of the page area on every page, and the body keeps that strip
   free on every page with a padding cloned onto each page's piece of it (box-decoration-break). Chromium places a fixed element
   by the first page's area, so every page of an issued report has an area of the same height (@page report and report-cover). */
:root{--e2a-print-qr:none;}
.printverify{display:none;}
@media print{
  @page{
    @bottom-right{content:var(--e2a-print-qr);vertical-align:middle;text-align:right;}
  }
  body:has(> .printverify){padding-bottom:5mm;box-decoration-break:clone;-webkit-box-decoration-break:clone;}
  .printverify{display:block;position:fixed;left:0;bottom:0;margin:0;font-family:var(--sans);font-size:7.5pt;line-height:1.3;
    color:var(--ink-2);white-space:nowrap;}
  .printverify a{color:inherit;text-decoration:none;}
}
/* The verify page: one sheet, the report's facts, and the place to drop the pdf. */
.verify__facts{margin:var(--sp-3) 0;}
.verify__drop{display:grid;place-items:center;gap:var(--sp-1);margin:var(--sp-4) 0 0;padding:var(--sp-5) var(--sp-3);border:2px dashed var(--navy-soft);
  border-radius:var(--r-panel);text-align:center;color:var(--ink-2);cursor:pointer;}
.verify__drop.is-over{border-color:var(--navy);background:var(--page);}
.verify__drop input{position:absolute;width:1px;height:1px;opacity:0;}
.verify__result{margin:var(--sp-3) 0 0;}
.verify__drop[hidden]{display:none;}
/* The outcome (E2A.kit.verdict, K146): a 64 px mark, the heading and one sentence, so a check cannot be missed (`.app` in the selector: it must beat `.app .sec h2`). Green only for a match,
   coral for a file that is not ours (decision K115); the mark is a graphic (3:1), the heading is -ink on the tint (6.42 / 5.05:1). It draws
   itself once and not at all under prefers-reduced-motion. */
.verdict{display:grid;justify-items:center;gap:var(--sp-2);margin:var(--sp-4) 0 0;padding:var(--sp-5) var(--sp-3);border-radius:var(--r-panel);
  text-align:center;background:var(--green-tint);border:1px solid var(--green-line);}
.verdict--no{background:var(--coral-tint);border-color:var(--coral-line);}
.verdict__mark{width:64px;height:64px;}
.verdict__disc{fill:var(--green-deep);}
.verdict--no .verdict__disc{fill:var(--coral-deep);}
.verdict__glyph{fill:none;stroke:var(--white);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;}
.app .verdict .verdict__h{margin:0;letter-spacing:-.01em;font-size:var(--fs-xl);font-weight:600;line-height:1.2;color:var(--green-ink);}
.app .verdict--no .verdict__h{color:var(--coral-ink);}
.verdict__note{margin:0;max-width:44ch;font-size:var(--fs-md);color:var(--navy);}
.verdict__again{margin-top:var(--sp-2);padding:var(--sp-1) var(--sp-2);border:0;background:none;font:inherit;font-size:var(--fs-sm);color:var(--navy-mid);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer;}
.verdict__again:hover{color:var(--navy);}
@media (prefers-reduced-motion:no-preference){
  .verdict__disc{transform-box:fill-box;transform-origin:center;animation:verdict-disc .5s cubic-bezier(.2,1.3,.4,1) both;}
  .verdict__glyph{stroke-dasharray:1;animation:verdict-draw .4s ease-out .3s both;}
  @keyframes verdict-disc{from{transform:scale(.6);opacity:0;}to{transform:scale(1);opacity:1;}}
  @keyframes verdict-draw{from{stroke-dashoffset:1;}to{stroke-dashoffset:0;}}
}
/* ==== K148: the page, the rail, the marks and "nu" ===========================================================================
   Over everything above; colours from the tokens of the K148 :root block only. */

/* ---- type: one family; the page title 28 px Public Sans 500 and one line under it ---------------------------------------- */
.app .display,.app .routehead__h{font-family:var(--sans);font-size:var(--fs-xl);font-weight:500;letter-spacing:-.01em;line-height:1.2;color:var(--ink);text-wrap:pretty;}
.app .display em,.app .display b,.app .routehead__h em,.app .dashtitle em{font-style:normal;font-weight:inherit;color:inherit;}
/* the page head (.page__head in the design): the title and a lead in --ink-2 (5.85:1 on the page ground); a long lead takes a second line, it is never cut off */
.app .head{padding:40px 0 24px;}
.app .head__lead,.app .routehead__lead{margin-top:6px;font-size:var(--fs-md);color:var(--ink-2);max-width:72ch;}
.app .head__lead b{color:var(--ink);font-weight:500;}
.app .eyebrow,.app .routehead .caps{color:var(--ink-2);}
.app .sec h2,.app .panel > .sec__head h2,.app .dblock > .dblock__h{font-size:var(--fs-h2);font-weight:500;letter-spacing:-.01em;color:var(--ink);}
.app .drawer__title{font-family:var(--sans);font-size:var(--fs-lg);font-weight:500;color:var(--ink);}
.app .hero0__n b{font-size:var(--fs-hero);font-weight:300;letter-spacing:-.03em;}
.app .hero0__n b small{font-size:var(--fs-step);font-weight:300;}
/* the start page's narrow column says what the product is in its lead: it wraps there, as on a phone */
.app .sheet.narrow .head__lead{white-space:normal;}
@media (max-width:720px){.app .head__lead,.app .routehead__lead{white-space:normal;}}

/* ---- focus: 2 px white and 2 px coral-deep (3.63:1 on white) ---------------------------------------------------------------- */
.app :focus-visible,.app .topbar :focus-visible,.fbar__btn:focus-visible{outline:2px solid var(--coral-deep);outline-offset:2px;box-shadow:0 0 0 2px var(--paper);}
.tree summary:focus-visible,.tree__leaf:focus-visible{outline-color:var(--coral-deep);}
@media (max-width:979px){.app .topbar :focus-visible{outline-color:var(--coral);box-shadow:none;}}

/* ---- the ground: every page on the page ground (K156, K157); one class on body (page--read, page--work) says whether it is a page you
   read or one you work in. On the ground everything with text stands on paper; only the page head stands on the ground itself. ---- */
.app .sheet,.app .sheet.wide{max-width:calc(1180px + 2 * 48px);}
@media (min-width:980px){.app .sheet,.app .sheet.wide{padding:0 48px;}}
.app :is(.sec,.card,.panel,.tw,.tbl-wrap,.standrow,.hero0,.pathcard,.nextcard,article.focus,.doccard,.callout,.emptystate,
  .tip,.rp,.drawer,.stats,.timeline,.accounts,.loading,.fbar__list){background:var(--paper);}
.app :is(.sec,.tw,.tbl-wrap,.standrow,.hero0,.pathcard,.rp){border-color:var(--page-line);}
/* a route page (Plan, Documenten): the route and the side column each a white plane under the page head, and the figures in the
   head on a plane of their own */
.page--read .routehead .stats{padding:var(--sp-2) var(--sp-3);border:1px solid var(--page-line);border-radius:var(--r-panel);}
.page--read .routepage > div,.page--read .routepage > aside{padding:28px;background:var(--paper);border:1px solid var(--page-line);border-radius:var(--r-panel);}
@media (min-width:981px){.page--read .routepage{column-gap:var(--sp-4);grid-template-columns:minmax(0,1fr) minmax(0,340px);}}
@media (max-width:720px){.page--read .routepage > div,.page--read .routepage > aside{padding:var(--sp-4) var(--sp-3);}}
.app .sec .card:not(.ok):not(.warn):not(.err):not(.info){background:none;}
.app .foot{color:var(--ink-2);}

/* ---- buttons: primary navy, the ghost a white button on a rule, tertiary a link, small; 6 px corners ------------------------ */
.app .btn{border-radius:var(--r);font-weight:500;}
.app .btn-primary{background:var(--navy);border-color:var(--navy);color:var(--on-navy);}
.app .btn-primary:hover{background:var(--navy-hover);border-color:var(--navy-hover);}
.app .btn-ghost{background:var(--paper);border-color:var(--rule);color:var(--ink);}
.app .btn-ghost:hover{background:var(--hover);border-color:var(--ink-3);}
.app .btn-tertiary{color:var(--navy-mid);text-decoration-color:var(--rule);}
.app .btn-sm{border-radius:var(--r);}

/* ---- a state is a dot and a word, in four states; green, amber and red only as dot and word (K115). .st is its name in the
   K148 design, .pill the kit's (E2A.kit.state). ------------------------------------------------------------------------------- */
.st{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;}
.st::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--ink-3);}
.st--good{color:var(--green);} .st--good::before{background:var(--green);}
.st--bad{color:var(--bad);} .st--bad::before{background:var(--bad);}
.st--warn{color:var(--amber-deep);} .st--warn::before{background:var(--amber);}
.st--open::before{background:none;box-shadow:inset 0 0 0 1.5px var(--ink-3);}
.st--none{color:var(--ink-3);} .st--none::before{display:none;}
/* the kit's table names its state cell `td.st` too (Metingen, Servers, Toestemming): that cell is no dot and word itself, its label is.
   None of the dot's shape either: in the reading list under 760 px the label is this ::before, and with the dot's height, round
   corners and grey it stood as a grey bar over "Stand". */
td.st{display:table-cell;white-space:normal;}
td.st::before{content:none;height:auto;border-radius:0;background:none;}

/* ---- names with a state (E2A.kit.states): a table of two columns, the name on the left and its state (dot and word) in a
   column of its own on the right, so the states stand under each other and never behind a name at a varying distance; a group
   is a head row (th scope="rowgroup"). For every list of "name · state": rights, roles, services, safety nets, users with a
   role, queued steps. --------------------------------------------------------------------------------------------------------- */
.states{width:100%;margin:var(--sp-1) 0 var(--sp-3);border-collapse:collapse;font-size:var(--fs-sm);line-height:1.45;color:var(--ink);}
.states th[scope="rowgroup"]{padding:var(--sp-3) 0 var(--sp-1);border-bottom:1px solid var(--rule);text-align:left;font-size:var(--fs-xs);font-weight:500;color:var(--ink-3);}
.states tbody:first-child th[scope="rowgroup"]{padding-top:0;}
.states td{padding:var(--sp-2) 0;border-bottom:1px solid var(--rule-2);vertical-align:top;}
.states tr:last-child td{border-bottom:0;}
.states td.states__n{min-width:0;overflow-wrap:anywhere;}
.states td.states__s{width:1%;padding-left:var(--sp-4);white-space:nowrap;}
.states__n .sub{display:block;margin-top:2px;}
.states__s .pill,.states__s .st{display:flex;}
.states__s .pill + .pill{margin-top:2px;}
.states__s .sub{display:block;white-space:normal;max-width:24ch;}
@media (max-width:480px){.states td.states__s{white-space:normal;}}

/* ---- the marks of the three words: one attribute, [data-word="policy|documents|measurement"], sets a 4 px stripe on the left
   and the colour of the icon in it (.wicon); never a fill. On the dashboard's dossier row, Controls' column heads and the
   drawer's head and sections. ------------------------------------------------------------------------------------------------- */
[data-word="policy"]{--w-mark:var(--m-policy);}
[data-word="documents"]{--w-mark:var(--m-docs);}
[data-word="measurement"]{--w-mark:var(--m-meas);}
[data-word]{border-left:4px solid var(--w-mark);padding-left:10px;}
.wicon{display:inline-flex;flex:none;width:14px;height:14px;vertical-align:-2px;color:var(--w-mark,var(--navy-mid));}
.app .standcard[data-word]{border-left:4px solid var(--w-mark);padding:0 var(--sp-3);margin:var(--sp-4) 0 var(--sp-4) var(--sp-4);}
@media (min-width:981px){.app .standcard + .standcard:not([data-word]){margin-left:var(--sp-4);}}
.app .dhead__b[data-word]{padding-left:10px;}
.app .dhead__b + .dhead__b[data-word]{border-left:4px solid var(--w-mark);padding-left:10px;margin-left:var(--sp-2);}
.tree__cols .tree__c[data-word]{padding-left:6px;border-left-width:3px;}
.app .drawer__note[data-word]{padding-left:10px;}

/* ---- "nu": a white plane with a 1.5 px navy edge (the next step on the dashboard, the step you are on in a route); the chosen
   row grey with a 3 px navy stripe -------------------------------------------------------------------------------------------- */
.app article.focus{background:var(--paper);border:1.5px solid var(--navy);}
.app .ctbl tr.focus > td{background:var(--hover);}
.app .ctbl tr.focus > td:first-child{box-shadow:inset 3px 0 0 var(--navy);}
.tree__leaf.focus{background:var(--hover);box-shadow:inset 3px 0 0 var(--navy);}
.app .ctbl tr.row:hover > td,.app .tbl tbody tr:hover,.tree__leaf.clickable:hover{background:var(--hover);}

/* ---- the rail (decision K148): white, 232 px, items of 36 px with a slate icon, the open page grey with a 3 px navy stripe and
   no coral; the customer as a field "Klant" at the top, Instellingen at the bottom. It collapses to 56 px (nav.js,
   railWire): the logo's mark, the customer's initials, the icons with their name as a tooltip, the gear of Instellingen. Under 980 px it
   stays the bar with its Menu. Coral only in the logo. ------------------------------------------------------------------------ */
.topbar__toggle,.topbar__initials,.topbar__customerK{display:none;}
.topbar__sub{display:none;}
/* the display (decision K157, docs/kit.md): the ground linen or white instead of icy blue-grey, the reader's choice in Instellingen */
body.display--linen{--page:var(--page-linen);--page-line:var(--page-line-linen);}
body.display--white{--page:var(--paper);--page-line:var(--rule);}
.topbar__customer{display:contents;}
@media (min-width:980px){
  body.app{grid-template-columns:var(--rail) minmax(0,1fr);}
  body.app.rail-mini{grid-template-columns:var(--rail-mini) minmax(0,1fr);}
  .app .topbar{padding:28px 20px 20px;background:var(--paper);color:var(--ink);border-right:1px solid var(--page-line);}
  .app .topbar a.topbar__logo{order:-4;width:128px;height:21px;margin:0 0 28px 4px;background:var(--navy);}
  .app .topbar__toggle{display:inline-flex;position:absolute;top:24px;right:14px;align-items:center;justify-content:center;width:28px;height:28px;
    padding:0;border:0;border-radius:var(--r);background:none;color:var(--ink-3);cursor:pointer;}
  .app .topbar__toggle:hover{background:var(--hover);color:var(--ink);}
  .app .topbar__toggle .ico{width:14px;height:14px;fill:none;}
  .app .topbar__customer{order:-3;display:grid;gap:4px;margin:0 0 24px;}
  .app .topbar__customerK{display:block;margin:0 0 0 10px;font-size:var(--fs-xs);color:var(--ink-3);}
  .app .topbar__customer select,.app .topbar__customer .topbar__tenant{order:0;margin:0;width:100%;max-width:100%;height:36px;padding:0 10px;
    border:1px solid var(--rule);border-radius:var(--r);background:var(--paper);color:var(--ink);font-size:var(--fs-sm);font-weight:500;line-height:34px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .app .topbar__customer select:hover{border-color:var(--ink-3);}
  .app .topbar__customer .topbar__tenant{border-color:transparent;padding:0 10px;}
  .app .topbar a,.app .topbar .navgroup__list a{display:flex;align-items:center;gap:10px;height:36px;padding:0 10px;border-radius:var(--r);
    color:var(--ink-2);font-size:var(--fs-sm);font-weight:400;}
  .app .topbar a:hover,.app .topbar .navgroup__list a:hover{background:var(--hover);color:var(--ink);}
  .app .topbar a.on,.app .topbar .navgroup__list a.on{background:var(--hover);color:var(--navy);font-weight:500;box-shadow:inset 3px 0 0 var(--navy);}
  .app .topbar a.topbar__logo:hover{background:var(--navy);}
  /* the icons: Phosphor Light-like line icons of the design, as a mask in the colour of the item (slate, navy when open) */
  .app .topbar__links a::before{content:"";flex:none;width:16px;height:16px;background:var(--ink-3);
    -webkit-mask:var(--ico) no-repeat center/16px 16px;mask:var(--ico) no-repeat center/16px 16px;}
  .app .topbar__links a.on::before{background:var(--navy);}
  .app .topbar__links a[href^="/dashboard.html"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='currentColor' stroke-width='1.4'%3E%3Crect x='2' y='2' width='5' height='5' rx='1'/%3E%3Crect x='9' y='2' width='5' height='5' rx='1'/%3E%3Crect x='2' y='9' width='5' height='5' rx='1'/%3E%3Crect x='9' y='9' width='5' height='5' rx='1'/%3E%3C/svg%3E");}
  .app .topbar__links a[href^="/plan.html"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='currentColor' stroke-width='1.4'%3E%3Cpath d='M3 4h10M3 8h10M3 12h7'/%3E%3C/svg%3E");}
  .app .topbar__links a[href^="/policy.html"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='currentColor' stroke-width='1.4'%3E%3Cpath d='M4 2.5h8v11H4z'/%3E%3Cpath d='M6 5.5h4M6 8h4M6 10.5h2.5'/%3E%3C/svg%3E");}
  .app .topbar__links a[href^="/documents.html"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='currentColor' stroke-width='1.4'%3E%3Cpath d='M2.5 4.5h4l1.5 1.5h5.5v7h-11z'/%3E%3C/svg%3E");}
  .app .topbar__links a[href^="/statement.html"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='currentColor' stroke-width='1.4'%3E%3Cpath d='M4 2h5l3 3v9H4z'/%3E%3Cpath d='M9 2v3h3M6 10.5l1.5 1.5 3-3'/%3E%3C/svg%3E");}
  .app .topbar__links a[href^="/controls.html"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='currentColor' stroke-width='1.4'%3E%3Crect x='2' y='3' width='12' height='10' rx='1'/%3E%3Cpath d='M2 7h12M6 7v6'/%3E%3C/svg%3E");}
  .app .topbar__links a[href^="/measurements.html"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='currentColor' stroke-width='1.4'%3E%3Cpath d='M2 9.5h3l1.5-4 2.5 6 1.5-3H14'/%3E%3C/svg%3E");}
  .app .topbar__links a[href^="/inventory.html"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='currentColor' stroke-width='1.4'%3E%3Ccircle cx='8' cy='5.5' r='2.5'/%3E%3Cpath d='M3 13.5c.8-2.4 2.8-3.5 5-3.5s4.2 1.1 5 3.5'/%3E%3C/svg%3E");}
  .app .topbar__links a[href^="/servers.html"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='currentColor' stroke-width='1.4'%3E%3Crect x='2.5' y='2.5' width='11' height='4.5' rx='1'/%3E%3Crect x='2.5' y='9' width='11' height='4.5' rx='1'/%3E%3Cpath d='M5 4.75h1M5 11.25h1'/%3E%3C/svg%3E");}
  .app .topbar__links a[href^="/admin.html"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='currentColor' stroke-width='1.4'%3E%3Cpath d='M2 5h3M8 5h6M2 11h6M11 11h3'/%3E%3Ccircle cx='6.5' cy='5' r='1.5'/%3E%3Ccircle cx='9.5' cy='11' r='1.5'/%3E%3C/svg%3E");}
  .app .topbar__links a[href^="/reports.html"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='currentColor' stroke-width='1.4'%3E%3Cpath d='M4 2h5l3 3v9H4z'/%3E%3Cpath d='M9 2v3h3M6 9h4M6 11.5h4'/%3E%3C/svg%3E");}
  /* Status and its two ways in (decision K148): Controls and Assets under it while one of them is open, indented, without an icon */
  .app .topbar__sub{display:flex;flex-direction:column;gap:2px;margin:2px 0 4px;}
  .app .topbar__links .topbar__sub a{height:32px;padding-left:36px;font-size:var(--fs-grid);}
  .app .topbar__links .topbar__sub a::before{display:none;}
  .app .topbar__links .topbar__sub a.on{background:none;box-shadow:none;color:var(--navy);font-weight:500;}
  .rail-mini.app .topbar__sub{display:none;}
  .app .topbar .navgroup__btn{margin:16px 0 4px;padding:0 10px;font-size:var(--fs-xs);font-weight:400;color:var(--ink-3);}
  /* collapsed */
  .rail-mini.app .topbar{padding:20px 8px 16px;align-items:center;}
  .rail-mini.app .topbar a.topbar__logo{order:-5;width:22px;height:22px;margin:0 0 12px;-webkit-mask-size:auto 22px;mask-size:auto 22px;}
  .rail-mini.app .topbar__toggle{order:-4;position:static;margin:0 0 16px;}
  .rail-mini.app .topbar__customer{width:100%;margin:0 0 16px;}
  .rail-mini.app .topbar__customerK,.rail-mini.app .topbar__customer select,.rail-mini.app .topbar__customer .topbar__tenant{display:none;}
  .rail-mini.app .topbar__initials{display:flex;align-items:center;justify-content:center;width:36px;height:36px;margin:0 auto;padding:0;
    border:1px solid var(--rule);border-radius:var(--r);background:var(--paper);color:var(--navy);font:inherit;font-size:var(--fs-xs);font-weight:600;letter-spacing:.02em;cursor:pointer;}
  .rail-mini.app .topbar__initials:hover{background:var(--hover);}
  .rail-mini.app .topbar__links{width:100%;align-items:center;}
  .rail-mini.app .topbar__links a{justify-content:center;width:40px;height:40px;padding:0;gap:0;font-size:0;}
  .rail-mini.app .topbar .navgroup__btn{display:none;}
  .rail-mini.app .topbar .navgroup__list{align-items:center;margin-top:8px;padding-top:8px;border-top:1px solid var(--rule-2);width:100%;}
}

/* ---- Instellingen (Etienne, 19 October 2026; docs/kit.md, component 23): the reader's own language, background, view and
   sign-out behind one item (nav.js, settingsWire). On the bar under 980 px a gear beside the Menu, its panel under the bar at the
   right; in the rail the gear and the word at its foot, its panel beside the rail with its foot at the window's foot; collapsed the
   gear alone, its word the tooltip. The panel is never wider or taller than the window: it scrolls inside itself. The choices are
   the filter bar's presets and boxes. ------------------------------------------------------------------------------------------ */
.settings{display:flex;flex:none;}
.settings__btn{display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 var(--sp-2);border:0;border-radius:var(--r);background:none;
  color:var(--on-navy-2);font:inherit;font-size:var(--fs-sm);cursor:pointer;white-space:nowrap;}
.settings__btn:hover,.settings__btn[aria-expanded="true"]{background:var(--on-navy-tint);color:var(--on-navy);}
.settings__btn .ico{flex:none;width:18px;height:18px;fill:none;}
.settings__l{font-size:0;}   /* on the bar the gear alone; the word stays its name */
.settings__panel{position:absolute;z-index:40;top:100%;right:var(--sp-2);box-sizing:border-box;width:min(300px,calc(100vw - 32px));
  max-height:calc(100vh - 96px);overflow-y:auto;display:flex;flex-direction:column;gap:var(--sp-3);margin-top:6px;padding:var(--sp-3);
  background:var(--paper);color:var(--ink);border:1px solid var(--rule);border-radius:var(--r-panel);box-shadow:var(--float-shadow);
  font-size:var(--fs-sm);text-align:left;white-space:normal;}
.settings__panel[hidden]{display:none;}
/* open, the bar (sticky in the rail, so a layer of its own) lies over the page, sticky table heads and side panels included */
.topbar:has(.settings__panel:not([hidden])){z-index:41;}
.settings__row{display:flex;flex-direction:column;gap:6px;}
.settings__k{font-size:var(--fs-xs);font-weight:500;color:var(--ink-2);}
.settings__opts{display:flex;flex-wrap:wrap;gap:4px;}
.settings__row .fbar__opt{min-height:30px;padding:2px 8px;}
.settings__row .topbar__viewNote{padding:0 8px;color:var(--ink-2);}
.settings__foot{padding-top:var(--sp-2);border-top:1px solid var(--rule);}
.settings__foot .topbar__out{display:block;margin:0;}
.app .topbar .settings__foot .topbar__out button,.app .topbar .settings__foot a.topbar__out{display:flex;align-items:center;box-sizing:border-box;width:100%;height:32px;
  padding:0 8px;border:0;border-radius:var(--r);background:none;color:var(--navy);font:inherit;font-size:var(--fs-sm);font-weight:500;cursor:pointer;}
.app .topbar .settings__foot .topbar__out button:hover,.app .topbar .settings__foot a.topbar__out:hover{background:var(--hover);color:var(--ink);}
.app .topbar .settings__panel :focus-visible{outline-color:var(--coral-deep);}
@media (min-width:980px){
  .app .settings{display:block;margin-top:var(--sp-4);}
  .app .settings__btn{width:100%;height:36px;padding:0 10px;color:var(--ink-2);}
  .app .settings__btn:hover,.app .settings__btn[aria-expanded="true"]{background:var(--hover);color:var(--ink);}
  .app .settings__btn .ico{width:16px;height:16px;color:var(--ink-3);}
  .app .settings__l{font-size:var(--fs-sm);}
  .app .settings__panel{position:fixed;top:auto;right:auto;bottom:16px;left:calc(var(--rail) + 8px);max-height:calc(100vh - 32px);margin:0;}
  .rail-mini.app .settings__panel{left:calc(var(--rail-mini) + 8px);}
  .rail-mini.app .settings__btn{justify-content:center;width:40px;height:40px;padding:0;gap:0;}
  .rail-mini.app .settings__l{font-size:0;}
}

/* ==== Reports on paper (decision K165, 19 October 2026; docs/kit.md, "Reports on paper") =====================================
   The full measurement report (measurement-report.html) and the A4 (summary-report.html) in the A2 design of the working folder
   (concepten/2026-10-19-rapport-ontwerp): one picture with the app and no frames. A block is a 1 px --page-line above it and white
   space; a table is the quiet table (grey heads, hairlines, a group as a row of its own); a state is a dot and a word. The sizes
   are the app's scale at 0.72 for paper (15 px of screen text would print at 11 pt), so the page reads as a document on screen too:
   one white sheet of A4 width on the page ground. Components in kit.js, section 22. */
:root{
  --p-xs:7.5pt; --p-sm:8.5pt; --p-md:9.5pt; --p-lead:11pt; --p-h2:13pt; --p-xl:20pt; --p-pil:24pt; --p-pil-a4:21pt;
  /* code on paper: DejaVu Sans Mono, written into the pdf's stylesheet (Pdf/ReportPage.cs); the container has no Menlo */
  --mono:"DejaVu Sans Mono",Menlo,Consolas,"Courier New";
  /* the right of the running head: which report this is (Volledig rapport, Momentopname), set by the page */
  --e2a-print-kind:"";
}
.rp{font-size:var(--p-md);line-height:1.5;color:var(--ink);font-variant-numeric:tabular-nums;}
.app .rp{max-width:210mm;margin:var(--sp-5) auto;padding:16mm;background:var(--paper);border:1px solid var(--page-line);border-radius:var(--r-panel);}
.rp p{margin:0;}
.rp h1,.rp h2,.rp h3{margin:0;font-family:var(--sans);font-weight:500;letter-spacing:0;color:var(--ink);}
.rp a{color:var(--navy-mid);text-decoration-color:var(--rule);text-underline-offset:2px;overflow-wrap:anywhere;}
.rp__top{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3);}
.rp__top .logo{flex:none;height:5.2mm;width:auto;color:var(--navy);}
.rp__kind{font-size:var(--p-sm);color:var(--ink-2);text-align:right;}
.rp__h{margin-top:12mm;font-size:var(--p-xl);letter-spacing:-.01em;}
.rp__lead{margin-top:1mm;color:var(--ink-2);}
.rp__note{font-size:var(--p-sm);color:var(--ink-2);}
.rp__note + .rp__note{margin-top:1mm;}
.rp .foot{margin-top:6mm;padding:0;font-size:var(--p-xs);color:var(--ink-2);}
/* a block: one line above it and white space, nothing else */
.blk{margin-top:8mm;padding-top:4mm;border-top:1px solid var(--page-line);}
.blk__h{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-3);margin:0 0 3mm;font-size:var(--p-lead);font-weight:500;}
.blk__h span{font-size:var(--p-xs);font-weight:400;color:var(--ink-2);}
/* the pillar row: five fixed places in a fixed order; a pillar that is not measured is left out, never an empty cell */
.pillars{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:6mm;}
.pil__k{font-size:var(--p-xs);color:var(--ink-3);}
.pil__v{margin-top:1mm;font-size:var(--p-pil);font-weight:300;letter-spacing:-.02em;line-height:1.1;color:var(--navy);}
.pil__v small{font-size:12pt;color:var(--ink-3);}
.pil__s{margin-top:1mm;}
/* The lines under a pillar's state are tight (1.25, 0.4 mm), so the A4 with forty servers and three statements keeps to one page
   with room left for the font metrics of another platform. */
.pil__t,.pil__f{margin-top:.4mm;font-size:var(--p-xs);line-height:1.25;color:var(--ink-2);}
.pil__f b{font-weight:600;color:var(--ink);}
/* The fact under Updates that the patch dataset is stale (kit 25): amber words, no dot, so the sentence wraps in its pillar. */
.pil__warn{font-weight:600;color:var(--amber-deep);}
/* the quiet table, with a group as a row of its own (a domain: bold, its score on the right, a line under it) */
.qt{width:100%;border-collapse:collapse;font-size:var(--p-sm);}
.qt th,.qt td{padding:1.5mm 3mm 1.5mm 0;border-bottom:1px solid var(--rule-2);text-align:left;vertical-align:top;font-weight:400;}
.qt thead th{padding-top:0;border-bottom:1px solid var(--page-line);font-size:var(--p-xs);font-weight:500;color:var(--ink-3);}
.qt tbody th[scope="row"]{width:40mm;color:var(--ink-2);}
.qt th:last-child,.qt td:last-child{padding-right:0;}
.qt .r{text-align:right;white-space:nowrap;}
.qt .nr{width:15mm;white-space:nowrap;color:var(--ink-2);}
.qt .s{width:1%;white-space:nowrap;}
.qt .ev{width:1%;white-space:nowrap;font-family:var(--mono);font-size:7pt;color:var(--ink-2);}
.qt .hr{width:1%;white-space:nowrap;text-align:right;color:var(--ink-2);}
.qt .wide{width:52mm;}
.qt tr{break-inside:avoid;}
/* a group's head never stands alone at the foot of a page: it keeps its first two rows with it */
.qt__g,.qt__g + tr{break-after:avoid;}
.qt__g th{padding:6mm 0 1.8mm;border-bottom:1px solid var(--page-line);font-size:var(--p-sm);font-weight:600;color:var(--ink);}
.qt tbody tr.qt__g:first-child th{padding-top:1mm;}
.qt__aside{float:right;font-weight:400;color:var(--ink-2);}
.qt__aside b{font-weight:600;color:var(--ink);}
.qt--kv{table-layout:fixed;}
.qt--kv tbody th[scope="row"]{width:30mm;}
.qt--kv td{overflow-wrap:anywhere;}
.qt--kv tr:last-child > *{border-bottom:0;}
/* a chapter: its head, the line under it, and the part after a break */
.chap{margin:0 0 5mm;}
.chap h2{font-size:var(--p-xl);letter-spacing:-.01em;}
.chap p{margin-top:1mm;color:var(--ink-2);}
.rp__part{margin-top:14mm;}
/* the remediation guide: per control its number small above its name, a table of two columns, the code over the full width
   under it, a thin line between two controls; the head stays with its table, a tool's name with its code */
.remedy{padding:5mm 0 3mm;border-top:1px solid var(--page-line);}
.chap + .remedy{padding-top:0;border-top:0;}
.remedy__top,.remedy__code{break-inside:avoid;}
.remedy__k{font-size:var(--p-xs);color:var(--ink-3);}
.remedy__h{margin:.5mm 0 2.5mm;font-size:var(--p-lead);}
.codetool{margin:3.5mm 0 1mm;font-size:var(--p-xs);font-weight:600;color:var(--ink-2);}
.code{margin:0 0 1mm;padding:0;border:0;background:none;font-family:var(--mono);font-size:7pt;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--ink);}
/* the bridge of the Momentopname: a line above it, no frame */
.bridge{margin-top:10mm;padding-top:5mm;border-top:1px solid var(--page-line);break-inside:avoid;}
.bridge h2{margin-bottom:2.5mm;font-size:var(--p-h2);}
.bridge p{max-width:120mm;margin-top:2mm;color:var(--ink-2);}
.bridge p b{font-weight:600;color:var(--ink);}
.bridge a{font-weight:600;}
/* a score as a chip (E2A.kit.scoreChip): the figure with a dot in its state's colour; a change in points (E2A.kit.delta) grey, a fall red */
.sc{display:inline-flex;align-items:center;gap:1.2mm;min-width:8mm;padding:0 1.6mm;line-height:1.5;border:1px solid var(--rule);border-radius:var(--r-pill);
  background:var(--paper);font-size:7.5pt;font-weight:600;color:var(--ink-2);}
.sc::before{content:"";flex:none;width:5px;height:5px;border-radius:50%;background:var(--ink-3);}
.sc--pass{color:var(--green);} .sc--pass::before{background:var(--green);}
.sc--busy{color:var(--amber-deep);} .sc--busy::before{background:var(--amber);}
.sc--fail{color:var(--bad);} .sc--fail::before{background:var(--bad);}
.dl{font-size:7pt;font-weight:600;color:var(--ink-2);}
.dl--same{font-weight:400;color:var(--ink-3);}
.dl--down{color:var(--bad);}
/* the servers on the A4 (E2A.kit.assetGrid): the coverage as figures first, then the list in two or three columns */
.cov{display:flex;flex-wrap:wrap;gap:2mm 8mm;margin:0 0 3mm;font-size:var(--p-xs);color:var(--ink-2);}
.cov b{display:block;font-size:13pt;font-weight:500;color:var(--ink);}
.ag{display:grid;gap:5mm;align-items:start;}
.ag--2{grid-template-columns:repeat(2,minmax(0,1fr));} .ag--3{grid-template-columns:repeat(3,minmax(0,1fr));}
.ag__col{width:100%;border-collapse:collapse;font-size:7.6pt;}
.ag__col th{padding:0 0 1mm;border-bottom:1px solid var(--rule);text-align:left;font-size:6.8pt;font-weight:500;color:var(--ink-3);}
.ag__col td{padding:.3mm 0;border-bottom:1px solid var(--rule-2);white-space:nowrap;line-height:1.35;}
.ag__col .sc{line-height:1.25;}
.ag__col .r{padding-left:1.5mm;text-align:right;}
.ag__rest{margin-top:2mm;font-size:7.6pt;color:var(--ink-2);}
/* the A4: the next step beside the sources */
.rp--a4 .rp__h{margin-top:7mm;}
.rp--a4 .blk{margin-top:5mm;padding-top:3.5mm;}
.rp--a4 .foot{margin-top:4mm;}
.rp--a4 .bridge{margin-top:5mm;padding-top:3.5mm;}
.rp--a4 .pil__v{font-size:var(--p-pil-a4);}
/* the domains per source (summary-report.html, without a judged server): two sources × every CIS chapter on the one A4, so the
   rows sit tighter than the kit's quiet table and the key stands in the head; the text one step smaller (7.5 pt), so a chapter
   name keeps to one line with the font metrics of every platform */
.rp--a4 .domains{margin-top:3mm;}
.rp--a4 .domains .qt{font-size:var(--p-xs);}
.rp--a4 .domains .blk__h .rp__note{font-weight:400;}
.rp--a4 .domains .qt td{padding-top:.6mm;padding-bottom:.6mm;}
.rp--a4 .domains .qt__g th{padding-bottom:1.2mm;}
.rp--a4 .domains + .bridge{margin-top:3mm;}
/* Nothing on the A4 runs to the right margin: a pillar's count wraps inside its column instead of standing out of it (a state
   word is nowrap elsewhere), and the check column of the statements, as wide as its link and last in the row, keeps 1 mm from
   the margin, so a glyph that reaches past its advance (the ellipsis in a fallback font) stays on the page. */
.rp .pil__c .st{min-width:0;white-space:normal;}
.rp--a4 .qt .ev{padding-right:1mm;}
.two{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:8mm;}
@media (max-width:720px){
  .app .rp{margin:var(--sp-3) 0;padding:var(--sp-4) var(--sp-3);}
  .pillars{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:4mm;}
  .two,.ag--2,.ag--3{grid-template-columns:minmax(0,1fr);}
  .qt .wide{width:auto;}
}
/* On paper: the sheet is the page. The first page (the cover, and the whole A4) has no running head: its own top carries the logo
   and the kind. Every next page of the full report carries the head on the left and the kind on the right; the foot (page, date,
   the verify line and its QR) is the one of every report the app issues, above, unchanged. */
@media print{
  .app .rp{max-width:none;margin:0;padding:0;border:0;border-radius:0;}
  .rp{page:report;}
  .rp__cover,.rp--a4{page:report-cover;}
  .rp__cover{break-after:page;}
  .rp__break{break-before:page;}
  .rp .rp__part{margin-top:0;}
  /* The same margins as report-cover: the verify line (above) stands at the foot of every page only when every page's area is as high. */
  @page report{
    margin:16mm 16mm 22mm;
    @top-center{content:none;}
    @bottom-center{font-size:7pt;color:var(--ink-2);}
    @top-left{content:var(--e2a-print-top);vertical-align:bottom;padding-bottom:3mm;font-family:var(--sans);font-size:7.5pt;font-weight:600;color:var(--ink);}
    @top-right{content:var(--e2a-print-kind);vertical-align:bottom;padding-bottom:3mm;font-family:var(--sans);font-size:7.5pt;color:var(--ink-2);}
  }
  @page report-cover{
    margin:16mm 16mm 22mm;
    @top-center{content:none;}
    @bottom-center{font-size:7pt;color:var(--ink-2);}
  }
}

/* ==== 24. Scope bar and origin (decision K172, 20 October 2026) ==========================================================
   Its own block at the bottom, apart from the components above. The bar above Beheer: Platform › Partner › Klant › Domein, one field
   per level with its label above it. A field is a combobox (.scopebar__box) with a search field, "Recent" and the overview as its
   first option in a menu that floats under it on a 1 px rule, as the filter bar's list; empty (.is-all) it shows "… kiezen…" in
   grey; chosen, the name in navy with a clear button (.scopebar__x) beside it. Whoever has one choice reads it as fixed text
   (.scopebar__fixed). Under 760 px the fields stand under each other. `.origin` is the line under a value that says where it comes
   from ("Overgenomen van platform · Hier aanpassen"). The customer card under the bar is one column of blocks (.kcard) with a rule
   between them; `.only` names who sets a block; `.pair2` puts two fields side by side. */
.scopebar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--sp-2) var(--sp-3);margin:0 0 var(--sp-4);}
.scopebar__f{position:relative;display:grid;gap:4px;width:232px;min-width:0;}
.scopebar__f > .scopebar__k{font-size:var(--fs-xs);color:var(--ink-3);}
.scopebar__row{display:flex;align-items:center;gap:4px;min-width:0;}
.scopebar__box{flex:1;min-width:0;display:flex;align-items:center;gap:8px;height:36px;padding:0 10px;background:var(--white);border:1px solid var(--rule);
  border-radius:var(--r);font:inherit;font-size:var(--fs-sm);font-weight:600;color:var(--navy);text-align:left;cursor:pointer;}
.scopebar__box > span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.scopebar__box .ico{flex:none;width:14px;height:14px;color:var(--ink-3);transition:transform .15s;}
.scopebar__box[aria-expanded="true"]{border-color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy);}
.scopebar__box[aria-expanded="true"] .ico{transform:rotate(180deg);}
.scopebar__box:hover{background:var(--hover);}
.scopebar__box:focus-visible,.scopebar__x:focus-visible,.scopebar__opt:focus-visible{outline:2px solid var(--navy);outline-offset:2px;}
.scopebar__box.is-all{font-weight:400;color:var(--ink-2);}
.scopebar__box:disabled{background:var(--rule-2);color:var(--ink-3);cursor:default;}
/* fixed text takes the width it needs (a long default domain stays on one line where it fits), its note wraps under it */
.scopebar__f:has(.scopebar__fixed){width:auto;max-width:100%;}
.scopebar__fixed{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:6px;min-height:36px;padding-top:8px;box-sizing:border-box;font-size:var(--fs-sm);
  font-weight:600;color:var(--navy);overflow-wrap:anywhere;}
.scopebar__fixed .sub{font-weight:400;font-size:var(--fs-xs);color:var(--ink-3);white-space:nowrap;}
.scopebar__x{flex:none;width:28px;height:28px;border:0;border-radius:var(--r);background:none;color:var(--ink-3);font:inherit;font-size:var(--fs-lead);
  line-height:1;cursor:pointer;}
.scopebar__x:hover{background:var(--hover);color:var(--navy);}
.scopebar__sep{height:36px;display:flex;align-items:center;color:var(--ink-3);}
.scopebar__menu{position:absolute;z-index:30;top:calc(100% + 6px);left:0;width:340px;max-width:calc(100vw - 32px);max-height:min(60vh,440px);overflow-y:auto;
  box-sizing:border-box;padding:6px;background:var(--white);border:1px solid var(--rule);border-radius:var(--r-panel);}
.scopebar__menu[hidden]{display:none;}
.scopebar__menu input[type="search"]{width:100%;box-sizing:border-box;margin:0 0 6px;}
.scopebar__grp{margin:8px 8px 2px;font-size:var(--fs-xs);font-weight:500;color:var(--ink-3);}
.scopebar__grp[hidden],.scopebar__opt[hidden]{display:none;}
.scopebar__opt{display:flex;justify-content:space-between;align-items:baseline;gap:8px;width:100%;min-height:34px;padding:6px 8px;border:0;border-radius:var(--r);
  background:none;font:inherit;font-size:var(--fs-sm);color:var(--ink);text-align:left;cursor:pointer;box-sizing:border-box;}
.scopebar__opt:hover,.scopebar__opt:focus{background:var(--hover);}
.scopebar__opt[aria-selected="true"]{color:var(--navy);font-weight:600;}
.scopebar__opt > span:first-child{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.scopebar__opt .sub{flex:none;font-size:var(--fs-xs);font-weight:400;color:var(--ink-3);white-space:nowrap;}
.scopebar__none{margin:6px 8px;font-size:var(--fs-sm);color:var(--ink-3);}
.origin{display:block;margin-top:2px;font-size:var(--fs-xs);color:var(--ink-3);}
.origin a{color:var(--navy);}
.kcard > .panel{scroll-margin-top:16px;}
.kcard > .panel + .panel{margin-top:var(--sp-5);padding-top:var(--sp-5);border-top:1px solid var(--rule);}
.kcard > .panel > .sec__head h2{font-size:var(--fs-h2);font-weight:500;}
.only{display:inline-block;margin-left:auto;padding:0 8px;border:1px solid var(--rule);border-radius:var(--r-pill);font-size:var(--fs-xs);line-height:20px;
  color:var(--ink-3);white-space:nowrap;}
.pair2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4);max-width:720px;}
.pair2 .fieldrow{max-width:none;}
@media (max-width:759px){
  .scopebar{flex-direction:column;align-items:stretch;}
  .scopebar__f{width:auto;}
  .scopebar__sep{display:none;}
  .scopebar__menu{left:0;right:0;width:auto;}
  .pair2{grid-template-columns:minmax(0,1fr);}
}
@media (prefers-reduced-motion:reduce){.scopebar__box .ico{transition:none;}}
/* ==== The pillar row on screen, and a count per state in a pillar (decision K173, docs/kit.md "Reports on paper") ===========
   One block of its own. E2A.kit.pillars with { screen: true }: the paper row of five fixed places in the app's sizes, each pillar a
   link to its page (the name with its chevron, as .way). A pillar can carry a count per state under its facts (.pil__c: the
   figure, then the state as dot and word); on paper in the paper's sizes. A row of four places (.pillars--four, the Dashboard's
   Hardening · Updates · Antivirus · MFA) keeps four columns down to a phone. Two columns on a phone. */
.pil__c{display:flex;align-items:baseline;gap:1.5mm;margin-top:.4mm;font-size:var(--p-xs);line-height:1.25;color:var(--ink-2);}
.pil__c b{min-width:2ch;font-weight:600;color:var(--ink);}
.pillars--screen{column-gap:var(--sp-4);row-gap:var(--sp-3);}
.pillars--screen .pil{display:block;min-width:0;padding:12px 0 0;border-top:1px solid var(--rule);color:var(--ink);text-decoration:none;}
.pillars--screen .pil__k{display:flex;align-items:center;gap:4px;font-size:var(--fs-sm);font-weight:500;color:var(--navy-mid);}
.pillars--screen .pil__k::after{content:"›";font-weight:400;}
.pillars--screen .pil:hover .pil__k{text-decoration:underline;text-underline-offset:3px;}
.pillars--screen .pil__v{margin-top:4px;font-size:var(--fs-kpi);}
.pillars--screen .pil__v small{font-size:var(--fs-md);}
.pillars--screen .pil__s{margin-top:6px;}
.pillars--screen .pil__s .pill{font-size:var(--fs-xs);}
.pillars--screen .pil__t,.pillars--screen .pil__f,.pillars--screen .pil__c{margin-top:4px;font-size:var(--fs-xs);line-height:1.4;}
.pillars--screen .pil__c{gap:8px;margin-top:2px;}
.pillars--screen .pil__c b{font-size:var(--fs-xs);}
.pillars--screen p{margin:0;}
@media (max-width:1100px){.pillars--screen{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media (max-width:720px){.pillars--screen{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--sp-3);}}
.pillars--screen.pillars--four{grid-template-columns:repeat(4,minmax(0,1fr));}
@media (max-width:720px){.pillars--screen.pillars--four{grid-template-columns:repeat(2,minmax(0,1fr));}}

/* ---- group picker (Beheer › Toestemmingen › Hardening, the break-glass group by name; mock 5 of 23 Oct 2026) ----------------
   A search field as a combobox with its list of hits under it, and the chosen group as one line with its state and a button. */
.gpick{position:relative;width:100%;}
.gpick input[type="search"]{width:100%;}
.gpick__list{list-style:none;margin:4px 0 0;padding:4px;border:1px solid var(--rule);border-radius:var(--r);background:var(--white);box-shadow:var(--float-shadow);}
.gpick__list[hidden]{display:none;}
.gpick__list li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:8px 10px;border-radius:var(--r);font-size:var(--fs-sm);cursor:pointer;}
.gpick__list li[aria-selected="true"],.gpick__list li:hover{background:var(--hover);}
.gpick__list li.gpick__none{display:block;cursor:default;color:var(--ink-2);}
.gpick__list .sub,.gpick__chosen .sub{grid-column:1/-1;display:block;font-size:var(--fs-xs);color:var(--ink-2);overflow-wrap:anywhere;}
.gpick__chosen{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px 12px;width:100%;padding:10px 12px;border:1px solid var(--rule);border-radius:var(--r);background:var(--paper);font-size:var(--fs-sm);}
.gpick__chosen[hidden]{display:none;}