@font-face{font-family:"Outfit";font-style:normal;font-display:swap;font-weight:100 900;src:url("lettertype-outfit-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Outfit";font-style:normal;font-display:swap;font-weight:100 900;src:url("lettertype-outfit.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Eyefly tokens. Gegenereerd door tools/bouw.py uit tokens/tokens.json. Niet met de hand wijzigen. */

:root,[data-theme="light"]{
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-6:24px;
  --space-8:32px;
  --space-12:48px;
  --space-30:120px;
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:16px;
  --radius-xl:20px;
  --radius-2xl:28px;
  --radius-pill:999px;
  --fs-12:12px;
  --fs-13:13px;
  --fs-14:14px;
  --fs-16:16px;
  --fs-18:18px;
  --fs-22:22px;
  --fs-26:26px;
  --fs-34:34px;
  --row-cockpit:40px;
  --row-portal:56px;
  --bp-phone:700px;
  --bp-tablet:1024px;
  --bp-laptop:1280px;
  --bp-ws:1100px;
  --web-container:1280px;
  --web-gutter:48px;
  --prose-max:680px;
  --sidebar-cockpit:248px;
  --sidebar-portal:276px;
  --rail:64px;
  --rail-werk:72px;
  --page-detail-max:1200px;
  --info-rail:320px;
  --ws-rail:360px;
  --foto-kolom:520px;
  --search-res:560px;
  --form-max:760px;
  --dialog-s:460px;
  --dialog-m:620px;
  --dialog-l:940px;
  --dialog-xl:1080px;
  --werk-kop:64px;
  --werk-max:1400px;
  --drawer:480px;
  --font-sans:Outfit, system-ui, sans-serif;
  --font-mono:Outfit, system-ui, sans-serif;
  --brand-purple:#592582;
  --brand-purple-line:#592582;
  --brand-blue:#009add;
  --brand-navy:#2e2872;
  --on-brand-blue:#0b1026;
  --canvas:#f3f4f8;
  --panel:#ffffff;
  --surface:#ffffff;
  --sunken:#eef0f5;
  --raised:#ffffff;
  --float-line:rgba(23,21,48,.16);
  --float-hover:#eef0f5;
  --ink:#171530;
  --ink-2:#4a4e6b;
  --ink-3:#5e6284;
  --line:rgba(23,21,48,.10);
  --line-2:rgba(23,21,48,.16);
  --line-ctl:rgba(23,21,48,.5);
  --action:#2e2872;
  --on-action:#ffffff;
  --accent:#006c9c;
  --accent-bg:rgba(0,108,156,.1);
  --accent-ink:#055984;
  --new:#592582;
  --new-bg:rgba(89,37,130,.1);
  --ok:#0a6b4c;
  --ok-bg:rgba(10,107,76,.1);
  --warn:#8a5200;
  --warn-bg:rgba(138,82,0,.1);
  --crit:#b01f38;
  --crit-bg:rgba(176,31,56,.1);
  --glow1:rgba(0,154,221,.15);
  --glow2:rgba(89,37,130,.12);
  --tb:rgba(0,154,221,.09);
  --tp:rgba(89,37,130,.08);
  --tn:rgba(46,40,114,.06);
  --stage:#0a0917;
  --chrome:rgba(16,14,33,.88);
  --chrome-ink:#f0f1f7;
  --chrome-ink-2:#bcc2da;
  --chrome-line:rgba(255,255,255,.28);
  --chrome-selected:rgba(255,255,255,.16);
  --chrome-strong:rgba(16,14,33,.94);
  --chrome-ink-3:#969cba;
  --chrome-hover:rgba(255,255,255,.10);
  --cat-geo:#1f7fbf;
  --cat-geo-bg:rgba(31,127,191,.12);
  --cat-vastgoed:#7a4ab0;
  --cat-vastgoed-bg:rgba(122,74,176,.11);
  --cat-kunstwerk:#b06f12;
  --cat-kunstwerk-bg:rgba(176,111,18,.12);
  --cat-promotie:#be3b74;
  --cat-promotie-bg:rgba(190,59,116,.11);
  --cat-solar:#6f7f12;
  --cat-solar-bg:rgba(111,127,18,.13);
  --cat-water:#11806f;
  --cat-water-bg:rgba(17,128,111,.11);
  --cat-inspectie:#4656c2;
  --cat-inspectie-bg:rgba(70,86,194,.11);
  --cat-onbekend:#64688a;
  --cat-onbekend-bg:rgba(100,104,138,.12);
  --viz-ok:#3c9a78;
  --viz-warn:#b98234;
  --viz-crit:#cf6577;
  --viz-info:#3d93c9;
  --viz-muted:#b4b8cc;
  --viz-track:rgba(23,21,48,.08);
  --shadow-card:0 1px 2px rgba(23,21,48,.05), 0 4px 16px rgba(23,21,48,.04);
  --shadow-pop:0 12px 32px rgba(10,9,23,.18);
  --float-shadow:0 12px 32px rgba(10,9,23,.18);
  color-scheme:light;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --brand-purple:#592582;
    --brand-purple-line:#9255c9;
    --brand-blue:#009add;
    --brand-navy:#2e2872;
    --on-brand-blue:#0b1026;
    --canvas:#0e0c1e;
    --panel:#131129;
    --surface:#1a1835;
    --sunken:#0e0c1e;
    --raised:#131129;
    --float-line:rgba(255,255,255,.42);
    --float-hover:#24214a;
    --ink:#f0f1f7;
    --ink-2:#a8adca;
    --ink-3:#9aa0be;
    --line:rgba(255,255,255,.09);
    --line-2:rgba(255,255,255,.16);
    --line-ctl:rgba(255,255,255,.42);
    --action:#009add;
    --on-action:#0b1026;
    --accent:#4fc3f2;
    --accent-bg:rgba(79,195,242,.14);
    --accent-ink:#4fc3f2;
    --new:#c79ae6;
    --new-bg:rgba(199,154,230,.14);
    --ok:#63d3aa;
    --ok-bg:rgba(99,211,170,.14);
    --warn:#f0bd77;
    --warn-bg:rgba(240,189,119,.14);
    --crit:#ff9aa9;
    --crit-bg:rgba(255,154,169,.14);
    --glow1:rgba(0,154,221,.22);
    --glow2:rgba(146,85,201,.20);
    --tb:rgba(0,154,221,.14);
    --tp:rgba(199,154,230,.12);
    --tn:rgba(255,255,255,.05);
    --stage:#0a0917;
    --chrome:rgba(16,14,33,.88);
    --chrome-ink:#f0f1f7;
    --chrome-ink-2:#bcc2da;
    --chrome-line:rgba(255,255,255,.28);
    --chrome-selected:rgba(255,255,255,.16);
    --chrome-strong:rgba(16,14,33,.94);
    --chrome-ink-3:#969cba;
    --chrome-hover:rgba(255,255,255,.10);
    --cat-geo:#5cb8ee;
    --cat-geo-bg:rgba(92,184,238,.16);
    --cat-vastgoed:#b792e3;
    --cat-vastgoed-bg:rgba(183,146,227,.16);
    --cat-kunstwerk:#e6b062;
    --cat-kunstwerk-bg:rgba(230,176,98,.16);
    --cat-promotie:#f08cb6;
    --cat-promotie-bg:rgba(240,140,182,.15);
    --cat-solar:#bfcb5e;
    --cat-solar-bg:rgba(191,203,94,.15);
    --cat-water:#5acdb9;
    --cat-water-bg:rgba(90,205,185,.15);
    --cat-inspectie:#909df2;
    --cat-inspectie-bg:rgba(144,157,242,.16);
    --cat-onbekend:#9aa0be;
    --cat-onbekend-bg:rgba(154,160,190,.15);
    --viz-ok:#4fb890;
    --viz-warn:#d9a85e;
    --viz-crit:#e8899a;
    --viz-info:#5aaee0;
    --viz-muted:#4a4868;
    --viz-track:rgba(255,255,255,.08);
    --shadow-card:none;
    --shadow-pop:0 12px 32px rgba(0,0,0,.45);
    --float-shadow:0 0 0 1px rgba(0,0,0,.45), 0 16px 40px rgba(0,0,0,.7);
    color-scheme:dark;
  }
}

[data-theme="dark"]{
  --brand-purple:#592582;
  --brand-purple-line:#9255c9;
  --brand-blue:#009add;
  --brand-navy:#2e2872;
  --on-brand-blue:#0b1026;
  --canvas:#0e0c1e;
  --panel:#131129;
  --surface:#1a1835;
  --sunken:#0e0c1e;
  --raised:#131129;
  --float-line:rgba(255,255,255,.42);
  --float-hover:#24214a;
  --ink:#f0f1f7;
  --ink-2:#a8adca;
  --ink-3:#9aa0be;
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.16);
  --line-ctl:rgba(255,255,255,.42);
  --action:#009add;
  --on-action:#0b1026;
  --accent:#4fc3f2;
  --accent-bg:rgba(79,195,242,.14);
  --accent-ink:#4fc3f2;
  --new:#c79ae6;
  --new-bg:rgba(199,154,230,.14);
  --ok:#63d3aa;
  --ok-bg:rgba(99,211,170,.14);
  --warn:#f0bd77;
  --warn-bg:rgba(240,189,119,.14);
  --crit:#ff9aa9;
  --crit-bg:rgba(255,154,169,.14);
  --glow1:rgba(0,154,221,.22);
  --glow2:rgba(146,85,201,.20);
  --tb:rgba(0,154,221,.14);
  --tp:rgba(199,154,230,.12);
  --tn:rgba(255,255,255,.05);
  --stage:#0a0917;
  --chrome:rgba(16,14,33,.88);
  --chrome-ink:#f0f1f7;
  --chrome-ink-2:#bcc2da;
  --chrome-line:rgba(255,255,255,.28);
  --chrome-selected:rgba(255,255,255,.16);
  --chrome-strong:rgba(16,14,33,.94);
  --chrome-ink-3:#969cba;
  --chrome-hover:rgba(255,255,255,.10);
  --cat-geo:#5cb8ee;
  --cat-geo-bg:rgba(92,184,238,.16);
  --cat-vastgoed:#b792e3;
  --cat-vastgoed-bg:rgba(183,146,227,.16);
  --cat-kunstwerk:#e6b062;
  --cat-kunstwerk-bg:rgba(230,176,98,.16);
  --cat-promotie:#f08cb6;
  --cat-promotie-bg:rgba(240,140,182,.15);
  --cat-solar:#bfcb5e;
  --cat-solar-bg:rgba(191,203,94,.15);
  --cat-water:#5acdb9;
  --cat-water-bg:rgba(90,205,185,.15);
  --cat-inspectie:#909df2;
  --cat-inspectie-bg:rgba(144,157,242,.16);
  --cat-onbekend:#9aa0be;
  --cat-onbekend-bg:rgba(154,160,190,.15);
  --viz-ok:#4fb890;
  --viz-warn:#d9a85e;
  --viz-crit:#e8899a;
  --viz-info:#5aaee0;
  --viz-muted:#4a4868;
  --viz-track:rgba(255,255,255,.08);
  --shadow-card:none;
  --shadow-pop:0 12px 32px rgba(0,0,0,.45);
  --float-shadow:0 0 0 1px rgba(0,0,0,.45), 0 16px 40px rgba(0,0,0,.7);
  color-scheme:dark;
}

/* Varianten voor ontwerpschermen: beide thema's naast elkaar op een pagina. */

.t-light{
  --brand-purple:#592582;
  --brand-purple-line:#592582;
  --brand-blue:#009add;
  --brand-navy:#2e2872;
  --on-brand-blue:#0b1026;
  --canvas:#f3f4f8;
  --panel:#ffffff;
  --surface:#ffffff;
  --sunken:#eef0f5;
  --raised:#ffffff;
  --float-line:rgba(23,21,48,.16);
  --float-hover:#eef0f5;
  --ink:#171530;
  --ink-2:#4a4e6b;
  --ink-3:#5e6284;
  --line:rgba(23,21,48,.10);
  --line-2:rgba(23,21,48,.16);
  --line-ctl:rgba(23,21,48,.5);
  --action:#2e2872;
  --on-action:#ffffff;
  --accent:#006c9c;
  --accent-bg:rgba(0,108,156,.1);
  --accent-ink:#055984;
  --new:#592582;
  --new-bg:rgba(89,37,130,.1);
  --ok:#0a6b4c;
  --ok-bg:rgba(10,107,76,.1);
  --warn:#8a5200;
  --warn-bg:rgba(138,82,0,.1);
  --crit:#b01f38;
  --crit-bg:rgba(176,31,56,.1);
  --glow1:rgba(0,154,221,.15);
  --glow2:rgba(89,37,130,.12);
  --tb:rgba(0,154,221,.09);
  --tp:rgba(89,37,130,.08);
  --tn:rgba(46,40,114,.06);
  --stage:#0a0917;
  --chrome:rgba(16,14,33,.88);
  --chrome-ink:#f0f1f7;
  --chrome-ink-2:#bcc2da;
  --chrome-line:rgba(255,255,255,.28);
  --chrome-selected:rgba(255,255,255,.16);
  --chrome-strong:rgba(16,14,33,.94);
  --chrome-ink-3:#969cba;
  --chrome-hover:rgba(255,255,255,.10);
  --cat-geo:#1f7fbf;
  --cat-geo-bg:rgba(31,127,191,.12);
  --cat-vastgoed:#7a4ab0;
  --cat-vastgoed-bg:rgba(122,74,176,.11);
  --cat-kunstwerk:#b06f12;
  --cat-kunstwerk-bg:rgba(176,111,18,.12);
  --cat-promotie:#be3b74;
  --cat-promotie-bg:rgba(190,59,116,.11);
  --cat-solar:#6f7f12;
  --cat-solar-bg:rgba(111,127,18,.13);
  --cat-water:#11806f;
  --cat-water-bg:rgba(17,128,111,.11);
  --cat-inspectie:#4656c2;
  --cat-inspectie-bg:rgba(70,86,194,.11);
  --cat-onbekend:#64688a;
  --cat-onbekend-bg:rgba(100,104,138,.12);
  --viz-ok:#3c9a78;
  --viz-warn:#b98234;
  --viz-crit:#cf6577;
  --viz-info:#3d93c9;
  --viz-muted:#b4b8cc;
  --viz-track:rgba(23,21,48,.08);
  --shadow-card:0 1px 2px rgba(23,21,48,.05), 0 4px 16px rgba(23,21,48,.04);
  --shadow-pop:0 12px 32px rgba(10,9,23,.18);
  --float-shadow:0 12px 32px rgba(10,9,23,.18);
  color-scheme:light;
}

.t-dark{
  --brand-purple:#592582;
  --brand-purple-line:#9255c9;
  --brand-blue:#009add;
  --brand-navy:#2e2872;
  --on-brand-blue:#0b1026;
  --canvas:#0e0c1e;
  --panel:#131129;
  --surface:#1a1835;
  --sunken:#0e0c1e;
  --raised:#131129;
  --float-line:rgba(255,255,255,.42);
  --float-hover:#24214a;
  --ink:#f0f1f7;
  --ink-2:#a8adca;
  --ink-3:#9aa0be;
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.16);
  --line-ctl:rgba(255,255,255,.42);
  --action:#009add;
  --on-action:#0b1026;
  --accent:#4fc3f2;
  --accent-bg:rgba(79,195,242,.14);
  --accent-ink:#4fc3f2;
  --new:#c79ae6;
  --new-bg:rgba(199,154,230,.14);
  --ok:#63d3aa;
  --ok-bg:rgba(99,211,170,.14);
  --warn:#f0bd77;
  --warn-bg:rgba(240,189,119,.14);
  --crit:#ff9aa9;
  --crit-bg:rgba(255,154,169,.14);
  --glow1:rgba(0,154,221,.22);
  --glow2:rgba(146,85,201,.20);
  --tb:rgba(0,154,221,.14);
  --tp:rgba(199,154,230,.12);
  --tn:rgba(255,255,255,.05);
  --stage:#0a0917;
  --chrome:rgba(16,14,33,.88);
  --chrome-ink:#f0f1f7;
  --chrome-ink-2:#bcc2da;
  --chrome-line:rgba(255,255,255,.28);
  --chrome-selected:rgba(255,255,255,.16);
  --chrome-strong:rgba(16,14,33,.94);
  --chrome-ink-3:#969cba;
  --chrome-hover:rgba(255,255,255,.10);
  --cat-geo:#5cb8ee;
  --cat-geo-bg:rgba(92,184,238,.16);
  --cat-vastgoed:#b792e3;
  --cat-vastgoed-bg:rgba(183,146,227,.16);
  --cat-kunstwerk:#e6b062;
  --cat-kunstwerk-bg:rgba(230,176,98,.16);
  --cat-promotie:#f08cb6;
  --cat-promotie-bg:rgba(240,140,182,.15);
  --cat-solar:#bfcb5e;
  --cat-solar-bg:rgba(191,203,94,.15);
  --cat-water:#5acdb9;
  --cat-water-bg:rgba(90,205,185,.15);
  --cat-inspectie:#909df2;
  --cat-inspectie-bg:rgba(144,157,242,.16);
  --cat-onbekend:#9aa0be;
  --cat-onbekend-bg:rgba(154,160,190,.15);
  --viz-ok:#4fb890;
  --viz-warn:#d9a85e;
  --viz-crit:#e8899a;
  --viz-info:#5aaee0;
  --viz-muted:#4a4868;
  --viz-track:rgba(255,255,255,.08);
  --shadow-card:none;
  --shadow-pop:0 12px 32px rgba(0,0,0,.45);
  --float-shadow:0 0 0 1px rgba(0,0,0,.45), 0 16px 40px rgba(0,0,0,.7);
  color-scheme:dark;
}

/* Eyefly bouwstenen. Leest alleen tokens (tokens.css). Thema via data-theme op de root. */
.ef{font-family:var(--font-sans);color:var(--ink);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
.ef *,.ef *::before,.ef *::after{box-sizing:border-box}
.ef-mono{font-family:var(--font-mono)}
/* Iconenpaar: licht standaard; donker bij data-theme="dark" of bij de systeeminstelling zonder expliciete keuze */
.ef-ic-d{display:none!important}
[data-theme="dark"] .ef-ic-l{display:none!important}
[data-theme="dark"] .ef-ic-d{display:revert!important}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ef-ic-l{display:none!important}:root:not([data-theme="light"]) .ef-ic-d{display:revert!important}}
.ef a:focus-visible,.ef button:focus-visible,.ef input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Gradient B */
.ef-sig{display:block;width:72px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--brand-blue),var(--brand-purple-line))}

/* Button */
.ef-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:38px;padding:0 16px;border-radius:var(--radius-sm);border:1px solid transparent;font:500 var(--fs-14)/1 var(--font-sans);cursor:pointer;text-decoration:none;white-space:nowrap}
.ef-btn--primary{background:var(--action);color:var(--on-action)}
.ef-btn--secondary{background:var(--surface);color:var(--ink);border-color:var(--line-ctl)}
.ef-btn--ghost{background:transparent;color:var(--accent)}
.ef-btn--lg{min-height:46px;padding:0 20px;font-size:15px;border-radius:11px}
.ef-btn--sm{min-height:32px;padding:0 12px;font-size:var(--fs-13)}
.ef-btn--danger{background:var(--crit);color:var(--on-action)}
.ef-btn--danger-ghost{background:transparent;color:var(--crit);padding:0 8px}
.ef-btn--danger-ghost:hover{background:var(--crit-bg)}
.ef-btn--touch{min-height:52px;width:100%;font-size:var(--fs-16);font-weight:600;border-radius:var(--radius-md)}
.ef-btn[aria-disabled="true"],.ef-btn:disabled{opacity:.5;cursor:not-allowed}
.ef-btn--image{background:var(--brand-blue);color:var(--on-brand-blue)}
.ef-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Pill */
.ef-pill{display:inline-flex;align-items:center;gap:6px;border-radius:var(--radius-pill);padding:2px 10px;font:500 var(--fs-12)/1.5 var(--font-sans);white-space:nowrap}
.ef-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.ef-pill--ok{background:var(--ok-bg);color:var(--ok)}
.ef-pill--warn{background:var(--warn-bg);color:var(--warn)}
.ef-pill--crit{background:var(--crit-bg);color:var(--crit)}
.ef-pill--accent{background:var(--accent-bg);color:var(--accent-ink)}  /* 1.8.0: accent-ink (in licht iets donkerder dan accent) haalt ook op een getint vlak 4,5:1 */
.ef-pill--new{background:var(--new-bg);color:var(--new)}
.ef-pill--neutral{background:var(--sunken);color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line-2)}

/* Tabs */
.ef-tabs{display:flex;gap:24px;border-bottom:1px solid var(--line-2)}
.ef-tabs a{position:relative;padding:8px 0 11px;font:500 var(--fs-14) var(--font-sans);color:var(--ink-3);text-decoration:none}
.ef-tabs a:hover{color:var(--ink)}
.ef-tabs a[aria-current="page"]{color:var(--ink)}
.ef-tabs a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--brand-blue),var(--brand-purple-line))}
.ef-tabs .ef-count{font:500 11.5px var(--font-mono);color:var(--ink-3);margin-left:5px}

/* NavItem (zijbalk) */
.ef-nav{display:flex;flex-direction:column;gap:1px;padding:12px;background:var(--canvas)}
.ef-nav-grp{font:500 11.5px var(--font-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);padding:12px 10px 4px;margin:0}
.ef-nav-item{position:relative;display:flex;align-items:center;gap:10px;height:34px;padding:0 10px;border-radius:var(--radius-sm);color:var(--ink-2);font:500 var(--fs-14) var(--font-sans);text-decoration:none}
.ef-nav-item:hover{background:var(--sunken);color:var(--ink)}
.ef-nav-item[aria-current="page"]{background:var(--panel);color:var(--ink);box-shadow:var(--shadow-card)}
.ef-nav-item[aria-current="page"]::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:2px;border-radius:2px;background:linear-gradient(180deg,var(--brand-blue),var(--brand-purple-line))}
.ef-nav-item[aria-current="page"] svg{color:var(--accent)}
.ef-nav-item svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ef-nav-count{margin-left:auto;font:500 11.5px var(--font-mono);color:var(--ink-3)}
.ef-nav-count--crit{color:var(--crit);background:var(--crit-bg);border-radius:var(--radius-pill);padding:0 7px}
.ef-nav-item--project{height:auto;padding:6px 8px}
.ef-nav-item--project img{width:44px;height:34px;border-radius:7px;object-fit:cover;flex:none}
.ef-nav-item--project small{display:block;font-size:var(--fs-12);font-weight:400;color:var(--ink-3)}

/* PageHeader */
.ef-hd{position:relative;padding:16px 24px 0;background:var(--panel);overflow:hidden}
.ef-hd::before{content:"";position:absolute;left:-10%;top:-160px;width:60%;height:360px;background:radial-gradient(closest-side,var(--glow1),transparent);pointer-events:none}
.ef-hd::after{content:"";position:absolute;right:-6%;top:-150px;width:50%;height:330px;background:radial-gradient(closest-side,var(--glow2),transparent);pointer-events:none}
.ef-hd>*{position:relative}
.ef-crumb{font-size:var(--fs-13);color:var(--ink-3)}
.ef-crumb b{color:var(--ink);font-weight:500}
.ef-hd-row{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;padding:16px 0}
.ef-hd h1{margin:10px 0 0;font:600 var(--fs-34)/40px var(--font-sans);letter-spacing:-.03em}
.ef-hd-meta{display:flex;gap:16px;flex-wrap:wrap;margin-top:6px;font-size:13.5px;color:var(--ink-2)}
.ef-hd-meta b{color:var(--ink);font-weight:600}
.ef-hd-acts{display:flex;gap:8px;flex:none}

/* KeyFacts */
.ef-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0}
.ef-facts div{background:var(--sunken);border-radius:var(--radius-md);padding:9px 12px}
.ef-facts dt{font-size:var(--fs-12);color:var(--ink-3)}
.ef-facts dd{margin:2px 0 0;font:600 var(--fs-16) var(--font-sans);letter-spacing:-.01em;color:var(--ink)}
.ef-facts dd small{font-weight:400;font-size:var(--fs-12);color:var(--ink-3)}

/* ProductCard */
.ef-product{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius-lg);padding:6px 12px 12px;color:var(--ink);text-decoration:none;transition:transform .2s ease,border-color .2s ease}
.ef-product:hover{transform:translateY(-3px);border-color:var(--line-ctl)}
.ef-product-ill{display:grid;place-items:center;height:86px;margin:4px -4px 10px;border-radius:var(--radius-md)}
.ef-product-ill img{width:90px;height:auto;display:block}
.ef-product b{font-weight:600;font-size:var(--fs-14)}
.ef-product small{font-size:12.5px;color:var(--ink-3)}
.ef-product-row{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:10px}
.ef-fmt{font:500 11.5px var(--font-mono);color:var(--ink-2);border:1px solid var(--line-2);border-radius:6px;padding:1px 6px}
.ef-tint-b{background:var(--tb)}.ef-tint-p{background:var(--tp)}.ef-tint-n{background:var(--tn)}
@media (prefers-reduced-motion:reduce){.ef-product{transition:none}.ef-product:hover{transform:none}}

/* ImageDock: bediening over beeld */
.ef-stage{position:relative;overflow:hidden;border-radius:var(--radius-xl);background:var(--stage)}
.ef-stage>img{display:block;width:100%;height:100%;object-fit:cover}
.ef-dock{position:absolute;left:14px;bottom:14px;display:flex;gap:4px;padding:4px;border-radius:14px;background:var(--chrome);border:1px solid var(--chrome-line)}
.ef-dock button{display:flex;align-items:center;gap:6px;border:0;background:transparent;color:var(--chrome-ink-2);padding:4px 12px 4px 4px;border-radius:10px;font:500 var(--fs-13) var(--font-sans);cursor:pointer}
.ef-dock button img{width:30px;height:auto}
.ef-dock button[aria-pressed="true"]{background:var(--chrome-selected);color:var(--chrome-ink)}

/* Timeline */
.ef-tl{position:relative;height:60px;margin:30px 24px 4px}
.ef-tl-ax{position:absolute;left:0;right:0;top:20px;height:2px;background:var(--line-2);border-radius:2px}
.ef-tl-ax i{position:absolute;left:0;top:0;bottom:0;border-radius:2px;background:linear-gradient(90deg,var(--brand-blue),var(--brand-purple-line))}
.ef-tl-pt{position:absolute;top:13px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center}
.ef-tl-pt b{display:block;width:16px;height:16px;border-radius:50%;background:var(--surface);border:3px solid var(--brand-blue)}
.ef-tl-pt.is-now b{border:4px solid var(--brand-purple);box-shadow:0 0 0 5px var(--new-bg)}
.ef-tl-pt.is-todo b{border:2px dashed var(--line-ctl)}
.ef-tl-pt em{position:absolute;bottom:24px;white-space:nowrap;font:600 12.5px var(--font-sans);font-style:normal;color:var(--ink)}
.ef-tl-pt.is-now em{background:var(--new-bg);color:var(--new);border-radius:8px;padding:1px 8px}
.ef-tl-pt small{position:absolute;top:24px;white-space:nowrap;font:500 11.5px var(--font-mono);color:var(--ink-3)}

/* Board: overzicht per fase (Sales, Projecten, Operations) */
.ef-board{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(240px,1fr);gap:12px;overflow-x:auto;padding-bottom:4px}
.ef-col{background:var(--sunken);border-radius:var(--radius-lg);padding:12px 10px;display:flex;flex-direction:column;gap:10px;min-width:0}
.ef-col-hd{display:flex;justify-content:space-between;align-items:center;padding:2px 6px 4px;font:600 15px var(--font-sans);color:var(--ink)}
.ef-col-hd span{font:500 var(--fs-12) var(--font-sans);color:var(--ink-3);border:1px solid var(--line-2);border-radius:var(--radius-pill);padding:0 9px}
.ef-col-sum{font-size:12.5px;color:var(--ink-3);padding:0 6px}
.ef-card{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius-md);padding:12px 14px;display:flex;flex-direction:column;gap:4px;box-shadow:var(--shadow-card);color:var(--ink);text-decoration:none;transition:border-color .15s ease}
.ef-card:hover{border-color:var(--line-ctl)}
.ef-card b{font-weight:600;font-size:15px;line-height:1.3}
.ef-card small{font-size:var(--fs-13);color:var(--ink-2)}
.ef-card-meta{display:flex;align-items:center;gap:7px;font-size:var(--fs-13);color:var(--ink-2)}
.ef-card-meta svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;color:var(--ink-3)}
.ef-card-ft{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:6px}

/* Veld en venster rekenen vanaf de rand, zodat 38 px en 460 px ook echt zo breed zijn */
.ef-input,.ef-dlg,.ef-drawer,.ef-toast,.ef-dlg-opt{box-sizing:border-box}

/* Field: label, invoer, hulptekst en foutmelding */
.ef-field{min-width:0;display:flex;flex-direction:column;gap:6px}
.ef-field>label,.ef-label{font:500 var(--fs-13)/1.4 var(--font-sans);color:var(--ink-2)}
.ef-input{display:block;width:100%;min-height:38px;border:1px solid var(--line-ctl);border-radius:var(--radius-sm);background:var(--surface);color:var(--ink);padding:0 12px;font:400 var(--fs-14)/1.4 var(--font-sans)}
.ef-input::placeholder{color:var(--ink-3)}
.ef-input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ef-input--sm{min-height:32px;padding:0 10px;font-size:var(--fs-13)}
/* 1.8.0: een tekstvak is zonder rows minstens drie regels hoog en volgt met rows precies dat aantal. De selector weegt (0,1,0) (:where telt niet mee), zodat
   een eigen klasse van de app (`.ow-tekst{min-height:180px}`) er weer van wint; tot 1.7.0 was het `textarea.ef-input{min-height:0}` (0,1,1) en kromp een tekstvak tot één regel. */
:where(textarea).ef-input{padding:8px 12px;line-height:1.5;resize:vertical}
:where(textarea:not([rows])).ef-input{min-height:calc(4.5em + 18px)}
:where(textarea[rows]).ef-input{min-height:0}
select.ef-input{appearance:none;-webkit-appearance:none;padding-right:36px}
.ef-select{position:relative}
.ef-select svg{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;fill:none;stroke:var(--ink-3);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.ef-input[aria-invalid="true"]{border-color:var(--crit)}
.ef-input[readonly]{background:var(--sunken)}
.ef-input:disabled{opacity:.5;cursor:not-allowed}
.ef-help{font-size:12.5px;color:var(--ink-3)}
.ef-error{font-size:12.5px;color:var(--crit)}

/* Chip: een aan te klikken filter in een rij (per verantwoordelijke, per soort); een statuslabel is een Pill */
.ef-chip{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 12px;border:1px solid var(--line-ctl);border-radius:var(--radius-pill);background:transparent;color:var(--ink-2);font:500 var(--fs-13)/1 var(--font-sans);cursor:pointer;white-space:nowrap}
.ef-chip:hover{color:var(--ink);border-color:var(--ink-3)}
.ef-chip[aria-pressed="true"]{background:var(--accent-bg);color:var(--accent);border-color:var(--accent)}
.ef-chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ef-chip-count{font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.ef-chip[aria-pressed="true"] .ef-chip-count{color:var(--accent)}

/* Segmented: lokaal filter of weergave binnen een sectie (tabs wisselen van sectie) */
.ef-seg{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--line-2);border-radius:var(--radius-md);background:var(--sunken)}
.ef-seg button{border:0;background:transparent;color:var(--ink-2);padding:5px 12px;border-radius:var(--radius-sm);font:500 var(--fs-13)/1.4 var(--font-sans);cursor:pointer}
.ef-seg button:hover{color:var(--ink)}
.ef-seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 0 0 1px var(--line-2)}
.ef-seg button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* Table */
.ef-table{width:100%;border-collapse:collapse;font:400 var(--fs-14)/1.45 var(--font-sans);color:var(--ink)}
.ef-table th{padding:8px 12px;text-align:left;font:500 var(--fs-12)/1.4 var(--font-sans);color:var(--ink-3);border-bottom:1px solid var(--line-2);white-space:nowrap}
.ef-table td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.ef-table tbody tr:hover{background:var(--sunken)}
.ef-table .ef-num{text-align:right;font-variant-numeric:tabular-nums}
.ef-table--sticky th{position:sticky;top:0;background:var(--panel);z-index:1}
.ef-table--dense td{padding:6px 12px}

/* Stat: kerncijfer */
.ef-stat{display:flex;flex-direction:column;gap:2px;min-width:0}
.ef-stat dt,.ef-stat-label{font:400 var(--fs-12)/1.4 var(--font-sans);color:var(--ink-3)}
.ef-stat dd,.ef-stat-value{margin:0;font:600 var(--fs-22)/1.2 var(--font-sans);letter-spacing:-.01em;color:var(--ink);font-variant-numeric:tabular-nums}
.ef-stat-sub{font-size:12.5px;color:var(--ink-3)}

/* EmptyState */
.ef-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:32px 20px;color:var(--ink-2)}
.ef-empty-ic{width:48px;height:48px;border-radius:var(--radius-md);display:grid;place-items:center;background:var(--tb);color:var(--accent);margin-bottom:4px}
.ef-empty-ic svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ef-empty b{font:600 var(--fs-16)/1.3 var(--font-sans);color:var(--ink)}
.ef-empty p{margin:0;max-width:340px;font-size:var(--fs-14)}
.ef-empty .ef-btn{margin-top:8px}

/* Dialog: een venster op een gedimde pagina. Maten S, M en L; het zijpaneel is de lade. */
.ef-scrim{position:fixed;inset:0;display:flex;justify-content:center;align-items:flex-start;padding:clamp(48px,10vh,120px) 24px 24px;background:color-mix(in srgb,var(--canvas) 74%,transparent);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
[data-theme="light"] .ef-scrim{background:color-mix(in srgb,var(--ink) 42%,transparent)}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .ef-scrim{background:color-mix(in srgb,var(--ink) 42%,transparent)}}
.ef-scrim--side{justify-content:flex-end;align-items:stretch;padding:0}
.ef-dlg{position:relative;display:flex;flex-direction:column;width:var(--dialog-s);max-width:100%;max-height:85vh;background:var(--surface);color:var(--ink);border:1px solid var(--line-2);border-radius:var(--radius-xl);box-shadow:var(--shadow-pop);overflow:hidden;text-align:left;font:400 var(--fs-14)/1.5 var(--font-sans)}
.ef-dlg::before,.ef-drawer::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:3;background:linear-gradient(90deg,var(--brand-blue),var(--brand-purple-line))}
.ef-dlg--m{width:var(--dialog-m)}
.ef-dlg--l{width:var(--dialog-l)}
.ef-dlg-head{position:relative;flex:none;padding:24px 60px 0 24px}
.ef-dlg-head--icon{display:flex;gap:14px;align-items:flex-start}
.ef-dlg-ic{width:40px;height:40px;border-radius:var(--radius-md);display:grid;place-items:center;flex:none;background:var(--accent-bg);color:var(--accent)}
.ef-dlg-ic--crit{background:var(--crit-bg);color:var(--crit)}
.ef-dlg-ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ef-dlg-eyebrow{font:500 11.5px/1.4 var(--font-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.ef-dlg-title{margin:3px 0 0;font:600 var(--fs-18)/1.3 var(--font-sans);letter-spacing:-.01em}
.ef-dlg-x{position:absolute;z-index:1;right:14px;top:14px;width:36px;height:36px;border:0;border-radius:10px;background:transparent;color:var(--ink-2);display:grid;place-items:center;padding:0;cursor:pointer}
.ef-dlg-x:hover{background:var(--sunken);color:var(--ink)}
.ef-dlg-x:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ef-dlg-x svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ef-dlg-body{padding:10px 24px 20px;color:var(--ink-2);font-size:var(--fs-14);overflow:auto;flex:1;min-height:0}
.ef-dlg-head--icon+.ef-dlg-body{padding-left:78px}
.ef-dlg--m .ef-dlg-head,.ef-dlg--l .ef-dlg-head,.ef-drawer .ef-dlg-head{padding-bottom:16px;border-bottom:1px solid var(--line)}
.ef-dlg--m .ef-dlg-body,.ef-dlg--l .ef-dlg-body{padding:18px 24px 22px;color:var(--ink)}
.ef-dlg-points{list-style:none;margin:12px 0 0;padding:0}
.ef-dlg-points li{position:relative;padding:7px 0 7px 18px;border-top:1px solid var(--line);font-size:13.5px}
.ef-dlg-points li::before{content:"";position:absolute;left:2px;top:15px;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.ef-dlg-points--crit li{color:var(--ink)}
.ef-dlg-points--crit li::before{background:var(--viz-crit)}
.ef-dlg-foot{flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:14px 20px 16px 24px;border-top:1px solid var(--line);background:var(--surface)}
.ef-dlg-foot .ef-kbd-hint{margin-right:auto}
.ef-dlg-foot--end{justify-content:flex-end}
.ef-kbd-hint{font-size:var(--fs-12);color:var(--ink-3)}
.ef-kbd-hint kbd{font:500 11px var(--font-sans);border:1px solid var(--line-2);border-radius:5px;padding:0 5px;margin-right:5px}
.ef-dlg-tech{margin-top:12px;border:1px solid var(--line-2);border-radius:10px;background:var(--sunken)}
.ef-dlg-tech summary{display:flex;align-items:center;gap:6px;cursor:pointer;padding:8px 12px;font:500 var(--fs-13) var(--font-sans);color:var(--ink-2);list-style:none}
.ef-dlg-tech summary::-webkit-details-marker{display:none}
.ef-dlg-tech pre{margin:0;padding:0 12px 10px;font:400 var(--fs-12)/1.55 var(--font-sans);color:var(--ink-2);white-space:pre-wrap}
.ef-dlg-opts{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 24px 22px}
.ef-dlg-opt{text-align:left;display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-height:150px;padding:14px;border:1.5px solid var(--line-ctl);border-radius:14px;background:var(--surface);color:var(--ink);cursor:pointer;font:inherit}
.ef-dlg-opt:hover{border-color:var(--accent);background:var(--accent-bg)}
.ef-dlg-opt:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ef-dlg-opt b{font:600 15px/1.3 var(--font-sans)}
.ef-dlg-opt span{font-size:var(--fs-13);color:var(--ink-2);line-height:1.45}

/* Drawer: de lade rechts voor een detail naast een lijst */
.ef-drawer{position:relative;display:flex;flex-direction:column;width:var(--drawer);max-width:100%;height:100%;flex:none;background:var(--surface);color:var(--ink);border-left:1px solid var(--line-2);box-shadow:var(--shadow-pop);text-align:left;font:400 var(--fs-14)/1.5 var(--font-sans)}

/* Toast: terugmelding na een omkeerbare actie, 8 tot 11 seconden */
.ef-toast-stack{position:fixed;left:50%;bottom:32px;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;align-items:center}
.ef-toast{position:relative;display:flex;align-items:center;gap:12px;min-width:340px;max-width:520px;padding:13px 12px 15px 16px;border-radius:14px;overflow:hidden;background:var(--chrome);border:1px solid var(--chrome-line);color:var(--chrome-ink);font:500 var(--fs-14)/1.4 var(--font-sans);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.ef-toast-tx{flex:1}
.ef-toast-act{border:0;background:transparent;color:var(--chrome-ink);font:600 var(--fs-14) var(--font-sans);text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:4px 6px;border-radius:6px}
.ef-toast-act:hover,.ef-toast-x:hover{background:var(--chrome-selected)}
.ef-toast-x{width:28px;height:28px;border:0;border-radius:8px;background:transparent;color:var(--chrome-ink-2);display:grid;place-items:center;padding:0;cursor:pointer}
.ef-toast-x svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.ef-toast button:focus-visible{outline:2px solid var(--brand-blue);outline-offset:1px}
.ef-toast-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--chrome-selected)}
.ef-toast-bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--brand-blue),var(--brand-purple-line));animation:ef-toast-bar 9s linear forwards}
@keyframes ef-toast-bar{from{width:100%}to{width:0}}
@media (prefers-reduced-motion:reduce){.ef-toast-bar i{animation:none}}

/* Telefoon: elk venster wordt een onderblad, de lade een volledig scherm; knoppen onder elkaar */
@media (max-width:700.98px){
  .ef-scrim{padding:0;align-items:flex-end}
  .ef-dlg{width:100%;max-height:92dvh;border-bottom:0;border-radius:var(--radius-xl) var(--radius-xl) 0 0}
  .ef-dlg::after{content:"";order:-1;flex:none;width:40px;height:4px;border-radius:2px;background:var(--line-ctl);margin:10px auto 0}
  .ef-dlg-head{padding:12px 60px 0 20px}
  .ef-dlg-x{right:8px;top:6px;width:44px;height:44px}
  .ef-dlg-body,.ef-dlg--m .ef-dlg-body,.ef-dlg--l .ef-dlg-body{padding:8px 20px 16px}
  .ef-dlg-head--icon+.ef-dlg-body{padding-left:20px}
  .ef-dlg-foot{flex-direction:column-reverse;flex-wrap:nowrap;align-items:stretch;gap:8px;padding:12px 16px 22px}
  .ef-dlg-foot .ef-btn{min-height:52px;font-size:var(--fs-16);font-weight:600;border-radius:var(--radius-md)}
  .ef-dlg-foot .ef-kbd-hint{display:none}
  .ef-dlg-opts{grid-template-columns:1fr;padding:0 20px 20px}
  .ef-scrim--side{align-items:stretch}
  .ef-drawer{width:100%;border-left:0}
  .ef-toast-stack{left:16px;right:16px;transform:none;bottom:calc(76px + env(safe-area-inset-bottom,0px))}
  .ef-toast{min-width:0;width:100%}
}

/* ===================================================================================================
   1.3.0 — bouwstenen uit de ontwerpborden en de pagina-mockups van de cockpit.
   Alleen var(--…). Lettergroottes uit de schaal fs-12 … fs-34.
   =================================================================================================== */

/* Nieuwe vaste maten rekenen vanaf de rand, ook buiten .ef */
.ef-btn--icon,.ef-search,.ef-av,.ef-ring,.ef-ic-tile,.ef-datetile,.ef-cel,.ef-day,.ef-drop,.ef-subnav,.ef-subnav-item,.ef-menu,.ef-menu-item,.ef-banner,.ef-kpi,.ef-panel,.ef-signal,.ef-row,.ef-gantt-bar,.ef-block,.ef-check input,.ef-radio input,.ef-switch input,.ef-stepper .n{box-sizing:border-box}

/* Tekst-hulpklassen: gedempt, toon, bedrag */
.ef-mut{color:var(--ink-3)}
.ef-tone-ok{color:var(--ok)}.ef-tone-warn{color:var(--warn)}.ef-tone-crit{color:var(--crit)}
.ef-val{font:600 var(--fs-14) var(--font-sans);font-variant-numeric:tabular-nums;white-space:nowrap}

/* Panel: een vlak met kop (titel, teller, actie), inhoud en optioneel een voet */
.ef-panel{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);min-width:0}
.ef-panel-hd{display:flex;align-items:center;gap:10px;padding:14px 16px 0}
.ef-panel-hd h3{margin:0;font:600 var(--fs-16)/1.3 var(--font-sans);letter-spacing:-.005em}
.ef-panel-meta{font:500 var(--fs-12) var(--font-sans);color:var(--ink-3);border:1px solid var(--line-2);border-radius:var(--radius-pill);padding:0 9px}
.ef-panel-act{margin-left:auto;font:500 var(--fs-13) var(--font-sans);color:var(--accent);text-decoration:none}
.ef-panel-act:hover{text-decoration:underline}
.ef-panel-act:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--radius-sm)}
.ef-panel-body{padding:12px 16px 16px}
.ef-panel--flush .ef-panel-body{padding:8px 0 0}
.ef-panel-ft{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px 16px 14px;border-top:1px solid var(--line)}
.ef-panel-ft-l{margin-right:4px;font:500 var(--fs-13) var(--font-sans);color:var(--ink-3)}
.ef-panel-ft-end{margin-left:auto}

/* IcTile: icoon in een tegel; de toon volgt de status */
.ef-ic-tile{width:32px;height:32px;border-radius:var(--radius-md);display:grid;place-items:center;flex:none;background:var(--tb);color:var(--accent)}
.ef-ic-tile svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ef-ic-tile--ok{background:var(--ok-bg);color:var(--ok)}
.ef-ic-tile--warn{background:var(--warn-bg);color:var(--warn)}
.ef-ic-tile--crit{background:var(--crit-bg);color:var(--crit)}
.ef-ic-tile--new{background:var(--new-bg);color:var(--new)}

/* Kpi: kerncijfertegel met label, getal, regel eronder en rechts een ring, sparkline of icoon */
.ef-kpis{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.ef-kpi{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;padding:14px 16px;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);color:var(--ink);text-decoration:none;min-width:0}
.ef-kpi>div{min-width:0}
.ef-kpi-l{display:flex;align-items:center;gap:8px;font:400 var(--fs-13)/1.4 var(--font-sans);color:var(--ink-3)}
.ef-kpi-v{margin-top:6px;font:600 var(--fs-26)/1.15 var(--font-sans);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ef-kpi-v small{font:400 var(--fs-14) var(--font-sans);letter-spacing:0;color:var(--ink-3)}
.ef-kpi-s{display:flex;align-items:center;gap:8px;margin-top:2px;font:400 var(--fs-13) var(--font-sans);color:var(--ink-3)}
.ef-kpi-chev{flex:none;width:16px;height:16px;margin-top:3px;fill:none;stroke:var(--ink-3);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
a.ef-kpi:hover{border-color:var(--line-ctl)}
a.ef-kpi:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ef-delta{border-radius:var(--radius-pill);padding:0 7px;font:500 var(--fs-12) var(--font-sans)}
.ef-delta--up{background:var(--ok-bg);color:var(--ok)}
.ef-delta--down{background:var(--crit-bg);color:var(--crit)}

/* Ring: voortgang als cirkel; --p is het percentage */
.ef-ring{--p:72;--c:var(--viz-ok);position:relative;width:48px;height:48px;border-radius:50%;background:conic-gradient(var(--c) calc(var(--p)*1%),var(--viz-track) 0);display:grid;place-items:center;flex:none}
.ef-ring::before{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--surface)}
.ef-ring b{position:relative;font:600 var(--fs-12) var(--font-sans);font-variant-numeric:tabular-nums}
.ef-ring--lg{width:64px;height:64px}
.ef-ring--lg::before{inset:6px}
.ef-ring--lg b{font-size:var(--fs-14)}
.ef-ring--sm{width:36px;height:36px}
.ef-ring--sm::before{inset:4px}
.ef-ring--warn{--c:var(--viz-warn)}
.ef-ring--crit{--c:var(--viz-crit)}
.ef-ring--info{--c:var(--viz-info)}

/* Spark: lijntje met vlak, een inline svg met de klasse a op het vlak */
.ef-spark{display:block;width:96px;height:32px;fill:none;stroke:var(--viz-info);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ef-spark .a{fill:var(--viz-info);stroke:none;opacity:.14}

/* Legend: bolletje met label, eventueel met een waarde */
.ef-legend{display:flex;gap:6px 16px;flex-wrap:wrap;align-items:center;font:400 var(--fs-13) var(--font-sans);color:var(--ink-2)}
.ef-legend span{display:inline-flex;align-items:center;gap:7px}
.ef-legend i{width:8px;height:8px;border-radius:50%;background:var(--c,var(--viz-info));flex:none}
.ef-legend b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.ef-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--c,var(--viz-info));margin-right:8px;flex:none}
.ef-prog-stack+.ef-legend{margin-top:12px}

/* Avatar: initialen in een cirkel (of vierkant voor een relatie), met maten en persoonskleuren */
.ef-av{--bg:var(--accent-bg);--fg:var(--accent);--ring:transparent;width:28px;height:28px;border-radius:50%;border:1.5px solid var(--ring);display:grid;place-items:center;flex:none;font:600 var(--fs-12) var(--font-sans);background:var(--bg);color:var(--fg)}
.ef-av--sm{width:22px;height:22px}
.ef-av--lg{width:36px;height:36px;font-size:var(--fs-13)}
.ef-av--xl{width:48px;height:48px;font-size:var(--fs-16)}
.ef-av--p1{--bg:var(--cat-geo-bg);--fg:var(--ink);--ring:var(--cat-geo)}
.ef-av--p2{--bg:var(--cat-vastgoed-bg);--fg:var(--ink);--ring:var(--cat-vastgoed)}
.ef-av--p3{--bg:var(--cat-kunstwerk-bg);--fg:var(--ink);--ring:var(--cat-kunstwerk)}
.ef-av--p4{--bg:var(--cat-promotie-bg);--fg:var(--ink);--ring:var(--cat-promotie)}
.ef-av--p5{--bg:var(--cat-solar-bg);--fg:var(--ink);--ring:var(--cat-solar)}
.ef-av--p6{--bg:var(--cat-water-bg);--fg:var(--ink);--ring:var(--cat-water)}
.ef-av--sq{border-radius:var(--radius-sm)}
.ef-av-stack{display:inline-flex}
.ef-av-stack .ef-av{box-shadow:0 0 0 2px var(--surface)}
.ef-av-stack .ef-av+.ef-av{margin-left:-6px}

/* Progress: balk met toon; --lg, de verhouding-balk en de verbruiksregel (meter) */
.ef-prog{height:4px;border-radius:99px;background:var(--line-2);overflow:hidden;margin-top:4px}
.ef-prog i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--brand-blue),var(--brand-purple-line))}
.ef-prog--lg{height:6px}
.ef-prog--ok i{background:var(--viz-ok)}
.ef-prog--warn i{background:var(--viz-warn)}
.ef-prog--crit i{background:var(--viz-crit)}
.ef-prog--muted i{background:var(--viz-muted)}
.ef-prog-stack{display:flex;height:6px;border-radius:99px;overflow:hidden;background:var(--viz-track);gap:2px}
.ef-prog-stack--lg{height:10px}
.ef-prog-stack i{display:block;height:100%;background:var(--c,var(--viz-info))}
.ef-meter{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.ef-meter-hd{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font:400 var(--fs-13) var(--font-sans);color:var(--ink-2)}
.ef-meter-v{font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink)}
.ef-meter--warn .ef-meter-v{color:var(--warn)}
.ef-meter--crit .ef-meter-v{color:var(--crit)}
.ef-meter .ef-prog{margin-top:0}

/* Row: rij in een lijst (voorop iets, titel met regel eronder, achteraan een pil of waarde) */
.ef-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 16px;border-top:1px solid var(--line);color:var(--ink);text-decoration:none}
.ef-row:first-child{border-top:0}
.ef-row>*{min-width:0}
a.ef-row:hover{background:var(--sunken)}
a.ef-row:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.ef-row b{display:block;font:600 var(--fs-14)/1.3 var(--font-sans);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ef-row small{display:block;font:400 var(--fs-13)/1.35 var(--font-sans);color:var(--ink-3)}
.ef-row--inline small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ef-row--wrap b,.ef-row--wrap small{overflow:visible;text-overflow:clip;white-space:normal}
.ef-row b .ef-pill{margin-left:6px;vertical-align:1px}
.ef-row--inline{display:flex;gap:10px;padding:0;border-top:0}
.ef-row--inline>div{min-width:0}
.ef-row-end{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;min-width:0}
.ef-row-end--stack{flex-direction:column;align-items:flex-end;flex-wrap:nowrap;gap:4px}
.ef-row-end--start{flex-direction:column;align-items:flex-start;justify-content:flex-start;flex-wrap:nowrap;gap:3px}
.ef-row-end small{font-size:var(--fs-12)}
.ef-row-flags{display:flex;flex-wrap:wrap;gap:4px 6px;margin-top:4px}

/* Signal: aandachtrij met toon-icoon, tekst, waarde of pil en een chevron */
.ef-signal{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:10px 16px;border-top:1px solid var(--line);color:var(--ink);text-decoration:none}
.ef-signal:first-child{border-top:0}
.ef-signal>*{min-width:0}
a.ef-signal:hover{background:var(--sunken)}
a.ef-signal:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.ef-signal b{display:block;font:600 var(--fs-14)/1.3 var(--font-sans);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ef-signal small{display:block;font:400 var(--fs-13)/1.35 var(--font-sans);color:var(--ink-3)}
.ef-signal--ok .ef-ic-tile{background:var(--ok-bg);color:var(--ok)}
.ef-signal--warn .ef-ic-tile{background:var(--warn-bg);color:var(--warn)}
.ef-signal--crit .ef-ic-tile{background:var(--crit-bg);color:var(--crit)}
.ef-signal--new .ef-ic-tile{background:var(--new-bg);color:var(--new)}
.ef-signal--ok .ef-val{color:var(--ok)}
.ef-signal--warn .ef-val{color:var(--warn)}
.ef-signal--crit .ef-val{color:var(--crit)}
.ef-signal-chev{width:16px;height:16px;fill:none;stroke:var(--ink-3);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Stepper: stappen met nummer, vinkje of aantal; een stap mag een link zijn met een tweede regel */
.ef-stepper{display:flex;gap:0;align-items:center;list-style:none;margin:0;padding:0}
.ef-stepper li{display:flex;align-items:center;gap:8px;font:500 var(--fs-14) var(--font-sans);color:var(--ink-3)}
.ef-stepper li+li::before{content:"";width:28px;height:2px;border-radius:2px;background:var(--line-2);margin:0 8px}
.ef-stepper .n{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font:600 var(--fs-12) var(--font-sans);border:1.5px solid var(--line-ctl);color:var(--ink-2);flex:none}
.ef-stepper .n svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ef-stepper .c{font:500 var(--fs-12) var(--font-sans);color:var(--ink-3);font-variant-numeric:tabular-nums}
.ef-stepper .t{display:flex;flex-direction:column;gap:2px;line-height:1.2}
.ef-stepper .t b{font-weight:500}
.ef-stepper li.is-done{color:var(--ink)}
.ef-stepper li.is-done .n{background:var(--action);border-color:var(--action);color:var(--on-action)}
.ef-stepper li.is-done+li::before{background:linear-gradient(90deg,var(--brand-blue),var(--brand-purple-line))}
.ef-stepper li.is-now{color:var(--ink)}
.ef-stepper li.is-now .n{border-color:var(--accent);color:var(--accent);box-shadow:0 0 0 4px var(--accent-bg)}
.ef-stepper a{display:flex;align-items:center;gap:10px;min-height:44px;padding:4px 6px;border-radius:var(--radius-sm);color:var(--ink);text-decoration:none}
.ef-stepper a:hover{background:var(--sunken)}
.ef-stepper a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ef-stepper--fill{width:100%}
.ef-stepper--fill li+li{flex:1}
.ef-stepper--fill li+li::before{flex:1;width:auto;min-width:16px}
.ef-stepper--lg .n{width:34px;height:34px;font-size:var(--fs-16);background:var(--surface);color:var(--ink)}
@media (max-width:900px){
  .ef-stepper--fill{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .ef-stepper--fill li{padding:8px 12px;border-radius:var(--radius-md);background:var(--sunken)}
  .ef-stepper--fill li+li{flex:none}
  .ef-stepper--fill li+li::before{display:none}
  .ef-stepper--fill a{width:100%;padding:0}
}

/* Banner: melding in de pagina, met toon en eventueel een actie */
.ef-banner{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:var(--radius-md);background:var(--accent-bg);color:var(--ink);font:400 var(--fs-14)/1.45 var(--font-sans)}
.ef-banner svg{width:18px;height:18px;flex:none;margin-top:1px;fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ef-banner b{font-weight:600}
.ef-banner .ef-btn{margin-left:auto;flex:none}
.ef-banner--ok{background:var(--ok-bg)}
.ef-banner--ok svg{stroke:var(--ok)}
.ef-banner--warn{background:var(--warn-bg)}
.ef-banner--warn svg{stroke:var(--warn)}
.ef-banner--crit{background:var(--crit-bg)}
.ef-banner--crit svg{stroke:var(--crit)}

/* Menu: uitklapmenu bij een knop (werkomgeving, "…", versies) */
.ef-menu{display:flex;flex-direction:column;gap:1px;min-width:220px;padding:6px;background:var(--raised);border:1px solid var(--float-line);border-radius:var(--radius-md);box-shadow:var(--float-shadow)}
.ef-menu-hd{padding:8px 10px 4px;font:500 var(--fs-12) var(--font-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.ef-menu-item{display:flex;align-items:center;gap:10px;min-height:34px;padding:0 10px;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--ink);font:500 var(--fs-14) var(--font-sans);text-align:left;text-decoration:none;cursor:pointer}
.ef-menu-item:hover{background:var(--float-hover)}
.ef-menu-item:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.ef-menu-item svg{width:16px;height:16px;flex:none;fill:none;stroke:var(--ink-3);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ef-menu-item.is-on{color:var(--accent)}
.ef-menu-item.is-on svg{stroke:var(--accent)}
.ef-menu-item--danger{color:var(--crit)}
.ef-menu-item--danger svg{stroke:var(--crit)}
.ef-menu-sep{height:1px;background:var(--line);margin:4px 2px}

/* Button: icoonknop en meldpunt */
.ef-btn--icon{width:34px;min-height:34px;padding:0;position:relative;background:var(--surface);color:var(--ink);border-color:var(--line-ctl)}
.ef-btn--icon svg{width:17px;height:17px}
.ef-badge-dot{position:absolute;top:5px;right:5px;width:8px;height:8px;border-radius:50%;background:var(--crit);box-shadow:0 0 0 2px var(--surface)}

/* Dl: definitielijst, label links en waarde rechts; --wide zet de waarde links bij het label */
.ef-dl{display:grid;grid-template-columns:minmax(120px,40%) 1fr;margin:0}
.ef-dl dt,.ef-dl dd{margin:0;padding:8px 0;border-top:1px solid var(--line)}
.ef-dl dt:first-of-type,.ef-dl dd:first-of-type{border-top:0}
.ef-dl dt{font:400 var(--fs-13) var(--font-sans);color:var(--ink-3)}
.ef-dl dd{font:500 var(--fs-14) var(--font-sans);color:var(--ink);text-align:right}
.ef-dl--wide{grid-template-columns:minmax(160px,260px) 1fr}
.ef-dl--wide dd{text-align:left}

/* Grid: tabel van div-rijen op een kolomtemplate (--cols), met kop, groepskop en totaalrij */
.ef-grid{display:grid;grid-template-columns:var(--cols,1fr);column-gap:var(--gap,14px);font:400 var(--fs-14) var(--font-sans);color:var(--ink)}
.ef-grid>div{display:grid;grid-template-columns:subgrid;grid-column:1/-1;align-items:center;padding:8px 16px;border-top:1px solid var(--line)}
.ef-grid>.h{font:500 var(--fs-12) var(--font-sans);color:var(--ink-3);border-top:0;border-bottom:1px solid var(--line-2)}
.ef-grid>.g{background:var(--sunken);font:600 var(--fs-13) var(--font-sans);border-top:1px solid var(--line-2)}
.ef-grid>.t{font-weight:600;border-top:1px solid var(--line-ctl)}
.ef-grid .r{text-align:right;font-variant-numeric:tabular-nums}
.ef-grid>div[id]{scroll-margin-top:16px}
.ef-grid-group{grid-column:1/-1;display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:wrap}
.ef-grid-group .ef-dot{margin-right:0}
.ef-grid-group b{font:600 var(--fs-13) var(--font-sans)}
.ef-grid-group-sub{font:400 var(--fs-13) var(--font-sans);color:var(--ink-3)}
.ef-grid-group-sum{margin-left:auto;font:600 var(--fs-13) var(--font-sans);font-variant-numeric:tabular-nums}
.ef-scroll{overflow-x:auto;overscroll-behavior-x:contain}
.ef-scroll:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.ef-panel--flush>.ef-scroll>.ef-grid>div:last-child{border-radius:0 0 var(--radius-lg) var(--radius-lg)}

/* DateTile: datum als tegel (dag en nummer) */
.ef-datetile{width:44px;height:50px;border-radius:var(--radius-md);background:var(--sunken);display:flex;flex-direction:column;align-items:center;justify-content:center;flex:none}
.ef-datetile small{font:500 var(--fs-12) var(--font-sans);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3)}
.ef-datetile b{font:600 var(--fs-18)/1.1 var(--font-sans);font-variant-numeric:tabular-nums}

/* Check: selectievakje, keuzerondje en schakelaar met eigen vorm */
.ef-check,.ef-radio{display:inline-flex;align-items:center;gap:10px;min-height:32px;font:400 var(--fs-14) var(--font-sans);color:var(--ink);cursor:pointer}
.ef-check input,.ef-radio input{appearance:none;-webkit-appearance:none;margin:0;width:20px;height:20px;border:1.5px solid var(--line-ctl);border-radius:6px;background:var(--surface);display:grid;place-items:center;flex:none;cursor:pointer}
.ef-radio input{border-radius:50%}
.ef-check input:checked,.ef-radio input:checked{background:var(--action);border-color:var(--action)}
.ef-check input:checked::after{content:"";width:9px;height:5px;border-left:2px solid var(--on-action);border-bottom:2px solid var(--on-action);transform:rotate(-45deg) translate(1px,-1px)}
.ef-radio input:checked::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--on-action)}
.ef-check input:focus-visible,.ef-radio input:focus-visible,.ef-switch input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ef-check input:disabled,.ef-radio input:disabled,.ef-switch input:disabled{opacity:.55;cursor:not-allowed}
.ef-switch{display:inline-flex;align-items:center;gap:10px;font:400 var(--fs-14) var(--font-sans);color:var(--ink);cursor:pointer}
.ef-switch input{appearance:none;-webkit-appearance:none;margin:0;position:relative;width:38px;height:22px;border-radius:99px;background:var(--line-ctl);cursor:pointer;transition:background .15s}
.ef-switch input::after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:var(--surface);transition:transform .15s}
.ef-switch input:checked{background:var(--action)}
.ef-switch input:checked::after{transform:translateX(16px);background:var(--on-action)}
@media (prefers-reduced-motion:reduce){.ef-switch input,.ef-switch input::after{transition:none}}

/* Search: zoekveld met een echt invoerveld, pilvorm; --kbd toont de toetsenhint */
.ef-search{display:flex;align-items:center;gap:8px;min-height:34px;min-width:240px;padding:0 12px 0 10px;border:1px solid var(--line-ctl);border-radius:var(--radius-pill);background:var(--surface);color:var(--ink-3);font:400 var(--fs-14) var(--font-sans);cursor:text}
.ef-search svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.ef-search input{flex:1;min-width:0;min-height:32px;border:0;padding:0;background:transparent;color:var(--ink);font:inherit;outline:0}
.ef-search input::placeholder{color:var(--ink-3)}
.ef-search input::-webkit-search-cancel-button{display:none}
.ef-search:focus-within{border-color:var(--accent);outline:2px solid var(--accent);outline-offset:2px}
.ef-search kbd{display:none;margin-left:auto;padding:0 5px;border:1px solid var(--line-2);border-radius:5px;font:500 var(--fs-12) var(--font-sans);color:var(--ink-3)}
.ef-search--kbd kbd{display:inline-block}

/* DateField: invoerveld met kalendericoon (datum of tijd) */
.ef-datefield{position:relative}
.ef-datefield .ef-input{padding-right:38px}
.ef-datefield svg{position:absolute;right:11px;top:50%;transform:translateY(-50%);width:17px;height:17px;fill:none;stroke:var(--ink-3);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.ef-datefield input[type="date"]::-webkit-calendar-picker-indicator,.ef-datefield input[type="time"]::-webkit-calendar-picker-indicator{position:absolute;right:0;top:0;width:38px;height:100%;opacity:0;cursor:pointer}

/* DatePicker: een datumveld met een eigen uitklapkalender (1.5.0). Het gedrag staat in ef-datepicker.js (gedeeld): veld = ef-input + kalenderknop,
   de kalender (ef-dp-pop) hangt aan <body> met de plek in --dp-x en --dp-y (px). Onder 700 px, of met ef-dp-pop--sheet, een onderblad.
   De oorspronkelijke input blijft de waardedrager (ISO) en wordt verborgen met ef-dp-src: een klasse, omdat .ef-input{display:block} van het
   hidden-attribuut zou winnen. */
.ef-datepicker{position:relative}
.ef-dp-src{display:none}
.ef-dp-field{position:relative}
.ef-dp-field .ef-input{padding-right:46px;font-variant-numeric:tabular-nums}
.ef-dp-field.is-open .ef-input{border-color:var(--accent)}
.ef-datepicker .ef-input[aria-invalid="true"]{border-color:var(--crit)}
.ef-dp-btn{position:absolute;right:3px;top:50%;transform:translateY(-50%);width:34px;height:34px;display:grid;place-items:center;padding:0;border:0;border-radius:var(--radius-sm);background:none;color:var(--ink-3);cursor:pointer}
.ef-dp-btn:hover{color:var(--ink);background:var(--sunken)}
.ef-dp-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ef-dp-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ef-dp-pop{position:fixed;left:var(--dp-x,0);top:var(--dp-y,0);z-index:var(--z-datepicker,1100);box-sizing:border-box;width:340px;max-width:calc(100vw - 32px);padding:10px;background:var(--raised);border:1px solid var(--float-line);border-radius:var(--radius-md);box-shadow:var(--float-shadow);color:var(--ink);text-align:left;font:400 var(--fs-14)/1.5 var(--font-sans)}
.ef-dp-pop[hidden]{display:none}
.ef-dp-quick{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.ef-dp-head{display:flex;align-items:center;gap:4px;margin-bottom:8px}
.ef-dp-mnd{flex:1;min-width:0;padding:6px;border:0;border-radius:var(--radius-sm);background:none;color:var(--ink);font:600 var(--fs-14) var(--font-sans);text-transform:capitalize;cursor:pointer}
.ef-dp-nav{width:30px;height:30px;display:grid;place-items:center;padding:0;border:0;border-radius:var(--radius-sm);background:none;color:var(--ink-2);cursor:pointer}
.ef-dp-nav svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ef-dp-mnd:hover,.ef-dp-nav:hover,.ef-dp-day:hover,.ef-dp-link:hover{background:var(--float-hover)}
.ef-dp-dow,.ef-dp-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px}
.ef-dp-dow span{padding:3px 0;text-align:center;font:600 var(--fs-12) var(--font-sans);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.ef-dp-day{aspect-ratio:1;display:grid;place-items:center;padding:0;border:0;border-radius:var(--radius-sm);background:none;color:var(--ink);font:400 var(--fs-14) var(--font-sans);font-variant-numeric:tabular-nums;cursor:pointer}
.ef-dp-day.is-other{color:var(--ink-3)}
.ef-dp-day.is-today{box-shadow:inset 0 0 0 1px var(--line-ctl)}
.ef-dp-day[aria-selected="true"]{background:var(--action);color:var(--on-action);font-weight:600;box-shadow:none}
.ef-dp-mnd:focus-visible,.ef-dp-nav:focus-visible,.ef-dp-day:focus-visible,.ef-dp-link:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.ef-dp-foot{display:flex;justify-content:space-between;margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
.ef-dp-link{padding:6px 8px;border:0;border-radius:var(--radius-sm);background:none;color:var(--ink-2);font:500 var(--fs-13) var(--font-sans);cursor:pointer}
.ef-dp-link:hover{color:var(--ink)}
.ef-dp-scrim{position:fixed;inset:0;z-index:calc(var(--z-datepicker,1100) - 1);background:color-mix(in srgb,var(--stage) 55%,transparent)}
.ef-dp-pop--sheet{left:0;right:0;top:auto;bottom:0;width:auto;max-width:none;padding:8px 16px 20px;border-width:1px 0 0;border-radius:var(--radius-xl) var(--radius-xl) 0 0}
.ef-dp-pop--sheet::before{content:"";display:block;width:36px;height:4px;margin:0 auto 10px;border-radius:var(--radius-pill);background:var(--line-ctl)}
.ef-dp-pop--sheet .ef-dp-quick{flex-wrap:nowrap;overflow-x:auto;margin-inline:-16px;padding-inline:16px;padding-bottom:2px}
.ef-dp-pop--sheet .ef-dp-day{aspect-ratio:auto;min-height:44px;font-size:var(--fs-16)}
.ef-dp-pop--sheet .ef-dp-nav{width:44px;height:44px}
.ef-dp-pop--sheet .ef-dp-mnd{min-height:44px;font-size:var(--fs-16)}
.ef-dp-pop--sheet .ef-dp-link{min-height:44px;font-size:15px}
.ef-dp-pop--sheet .ef-chip{min-height:44px}
@media (max-width:700.98px){
  .ef-dp-pop{left:0;right:0;top:auto;bottom:0;width:auto;max-width:none;padding:8px 16px 20px;border-width:1px 0 0;border-radius:var(--radius-xl) var(--radius-xl) 0 0}
  .ef-dp-pop::before{content:"";display:block;width:36px;height:4px;margin:0 auto 10px;border-radius:var(--radius-pill);background:var(--line-ctl)}
  .ef-dp-quick{flex-wrap:nowrap;overflow-x:auto;margin-inline:-16px;padding-inline:16px;padding-bottom:2px}
  .ef-dp-day{aspect-ratio:auto;min-height:44px;font-size:var(--fs-16)}
  .ef-dp-nav{width:44px;height:44px}
  .ef-dp-mnd{min-height:44px;font-size:var(--fs-16)}
  .ef-dp-link{min-height:44px;font-size:15px}
  .ef-dp-btn{width:44px;height:44px}
}
.ef-ruim .ef-dp-field .ef-input{min-height:46px;font-size:var(--fs-16);padding-right:50px}
.ef-ruim .ef-dp-btn{width:44px;height:44px}
/* 1.6.2: de kalender hangt aan body, buiten .ef-ruim, dus `.ef-ruim .ef-dp-*` raakt hem niet. Het script zet ef-dp-pop--ruim als het
   veld in ef-ruim staat: elk klikvlak 44 px (een dagcel haalt dat via min-height en aspect-ratio, ook in 340 px breed). */
.ef-dp-pop--ruim .ef-dp-nav{width:44px;height:44px}
.ef-dp-pop--ruim .ef-dp-mnd{min-height:44px;font-size:var(--fs-16)}
.ef-dp-pop--ruim .ef-dp-day{min-height:44px}
.ef-dp-pop--ruim .ef-dp-link{min-height:44px;font-size:15px}
.ef-dp-pop--ruim .ef-chip{min-height:44px}
/* 1.6.2: een kalender die hoger is dan het scherm scrolt zelf (plaats() klemt hem binnen het scherm). */
.ef-dp-pop:not(.ef-dp-pop--sheet){max-height:calc(100vh - 16px);overflow-y:auto}

/* Log: gebeurtenissen onder elkaar met een lijn; de stip krijgt een toon of een eigen kleur (--c) */
.ef-log{list-style:none;margin:0;padding:0}
.ef-log li{position:relative;display:grid;grid-template-columns:20px 1fr auto;gap:10px;padding:0 0 14px}
.ef-log li>div{min-width:0}
.ef-log li::before{content:"";position:absolute;left:9px;top:20px;bottom:0;width:2px;background:var(--line-2);border-radius:2px}
.ef-log li:last-child::before{display:none}
.ef-log i{--c:var(--brand-blue);width:10px;height:10px;border-radius:50%;margin:5px 0 0 5px;background:var(--surface);border:2px solid var(--c)}
.ef-log .ef-log-dot--ok{--c:var(--viz-ok)}
.ef-log .ef-log-dot--warn{--c:var(--viz-warn)}
.ef-log .ef-log-dot--crit{--c:var(--viz-crit)}
.ef-log .ef-log-dot--new{--c:var(--brand-purple)}
.ef-log b{font:600 var(--fs-14)/1.3 var(--font-sans)}
.ef-log small{display:block;font:400 var(--fs-13) var(--font-sans);color:var(--ink-3)}
.ef-log time{font:400 var(--fs-12) var(--font-sans);color:var(--ink-3);font-variant-numeric:tabular-nums}

/* Subnav: verticale navigatie in een paneel (Instellingen); de zijbalk zelf houdt geen submenu's */
.ef-subnav{display:flex;flex-direction:column;gap:2px;padding:8px;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius-lg)}
.ef-subnav .ef-nav-grp{padding:8px 10px 4px}
.ef-subnav-item{position:relative;display:flex;align-items:center;gap:10px;height:34px;padding:0 10px;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--ink-2);font:500 var(--fs-14) var(--font-sans);text-align:left;text-decoration:none;cursor:pointer}
.ef-subnav-item:hover{background:var(--sunken);color:var(--ink)}
.ef-subnav-item:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.ef-subnav-item[aria-current="page"]{background:var(--sunken);color:var(--ink)}
.ef-subnav-item[aria-current="page"]::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:2px;border-radius:2px;background:linear-gradient(180deg,var(--brand-blue),var(--brand-purple-line))}

/* Card: standen van de bordkaart, en een kaart die als geheel een link is */
.ef-card--stil{background:linear-gradient(var(--warn-bg),var(--warn-bg)),var(--surface)}
.ef-card--groot{border-left:3px solid var(--accent);padding-left:12px}
.ef-card--link{position:relative}
.ef-card--link>b{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.ef-card-link{color:inherit;text-decoration:none}
.ef-card-link::after{content:"";position:absolute;inset:0;border-radius:var(--radius-md)}
.ef-card-link:focus-visible{outline:none}
.ef-card-link:focus-visible::after{outline:2px solid var(--accent);outline-offset:2px}
.ef-card--link .ef-btn,.ef-card--link .ef-input{position:relative;z-index:1}

/* Chip: telling in een toon, en een chip die een link is */
a.ef-chip{text-decoration:none}
.ef-chip-count--crit,.ef-chip[aria-pressed="true"] .ef-chip-count--crit{color:var(--crit)}
.ef-chip-count--warn,.ef-chip[aria-pressed="true"] .ef-chip-count--warn{color:var(--warn)}

/* Segmented: pilvorm voor filters in een paginakop of filterbalk, en een uitgeschakelde keuze */
.ef-seg--pill,.ef-seg--pill button{border-radius:var(--radius-pill)}
.ef-seg button:disabled{opacity:.5;cursor:not-allowed}

/* FilterBar: rij met chips, keuzelijsten en zoekveld; een groepskop en een scheiding */
.ef-fbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ef-fbar-grow{flex:1}
.ef-fbar-lb{margin-right:2px;font:500 var(--fs-12) var(--font-sans);color:var(--ink-3);white-space:nowrap}
.ef-fbar-sep{width:1px;align-self:stretch;min-height:22px;background:var(--line-2);margin:0 2px}

/* Table: sorteerbare kolomkop */
.ef-sort{display:inline-flex;align-items:center;gap:4px;border:0;background:transparent;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;min-height:24px}
.ef-sort:hover{color:var(--ink)}
.ef-sort:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--radius-sm)}
.ef-sort svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.35}
.ef-table th[aria-sort="ascending"] .ef-sort,.ef-table th[aria-sort="descending"] .ef-sort{color:var(--ink)}
.ef-table th[aria-sort] .ef-sort svg{opacity:1}
.ef-table th[aria-sort="ascending"] .ef-sort svg{transform:rotate(180deg)}
.ef-table th.ef-num .ef-sort{flex-direction:row-reverse}

/* Dialog: somregel links in de voet */
.ef-dlg-sum{margin-right:auto;display:flex;flex-direction:column;gap:1px;min-width:0;font:400 var(--fs-14) var(--font-sans);color:var(--ink-2)}
.ef-dlg-sum b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.ef-dlg-sum small{font-size:var(--fs-12);color:var(--ink-3)}

/* Drop: bestandszone voor bijlagen; .is-over terwijl er iets boven hangt */
.ef-drop{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;padding:16px;border:1.5px dashed var(--line-ctl);border-radius:var(--radius-md);background:var(--sunken);color:var(--ink-2);font:400 var(--fs-14)/1.4 var(--font-sans)}
.ef-drop b{color:var(--ink)}
.ef-drop small{font-size:var(--fs-13);color:var(--ink-3)}
.ef-drop svg{width:22px;height:22px;fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ef-drop.is-over{border-color:var(--accent);background:var(--accent-bg);color:var(--ink)}

/* Gantt: planningsraster (weekkoppen, projectrijen met balken, capaciteit, personen). Werkgebiedkleur via ef-cat--*. */
/* Werkgebied-kleur (B05): zet --c (rand/inkt) en --cbg (vlak). Werkt op balk, legenda-item en pil. */
.ef-cat--geo{--c:var(--cat-geo);--cbg:var(--cat-geo-bg)}
.ef-cat--vastgoed{--c:var(--cat-vastgoed);--cbg:var(--cat-vastgoed-bg)}
.ef-cat--kunstwerk{--c:var(--cat-kunstwerk);--cbg:var(--cat-kunstwerk-bg)}
.ef-cat--promotie{--c:var(--cat-promotie);--cbg:var(--cat-promotie-bg)}
.ef-cat--solar{--c:var(--cat-solar);--cbg:var(--cat-solar-bg)}
.ef-cat--water{--c:var(--cat-water);--cbg:var(--cat-water-bg)}
.ef-cat--inspectie{--c:var(--cat-inspectie);--cbg:var(--cat-inspectie-bg)}
.ef-cat--onbekend{--c:var(--cat-onbekend);--cbg:var(--cat-onbekend-bg)}
.ef-pill--cat{background:var(--cbg);color:var(--ink)}
.ef-pill--cat::before{background:var(--c)}

/* Grip: pakpunt van iets dat je kunt slepen (kaart in de rail, balk, rij) */
.ef-grip{display:inline-flex;align-items:center;justify-content:center;flex:none;color:var(--ink-3);cursor:grab;touch-action:none}
.ef-grip svg{width:14px;height:14px;fill:currentColor;stroke:none}

/* Gantt: weekkoppen, een rij per project met balken, sommatie-rij en persoonsrijen op dezelfde weekkolommen.
   --weeks = aantal weken, --days = dagen in beeld, --label = breedte van de linkerkolom (blijft staan bij zijwaarts scrollen). */
.ef-gantt{--label:220px;--weeks:8;--wk-min:72px;--days:calc(var(--weeks) * 7);--bar-h:30px;position:relative;min-width:calc(var(--label) + var(--weeks) * var(--wk-min));font:400 var(--fs-14) var(--font-sans);color:var(--ink)}
.ef-gantt-head,.ef-gantt-sum,.ef-gantt-person{display:grid;grid-template-columns:var(--label) repeat(var(--weeks),minmax(0,1fr))}
.ef-gantt-head{border-bottom:1px solid var(--line-2)}
.ef-gantt-lab{position:sticky;left:0;z-index:3;min-width:0;padding:9px 14px;background:var(--row-bg,var(--surface))}
.ef-gantt-corner{align-self:end;padding:0 14px 10px;font:500 var(--fs-12) var(--font-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}

.ef-gantt-wk{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0;padding:9px 2px 6px;border-left:1px solid var(--line);color:var(--ink);text-decoration:none}
.ef-gantt-wk:hover{background:var(--sunken)}
.ef-gantt-wk:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.ef-gantt-wk.is-now{background:var(--tb)}
.ef-gantt-wkn{font:600 var(--fs-12)/1.2 var(--font-sans);letter-spacing:.05em}
.ef-gantt-wkd{font:400 var(--fs-12)/1.3 var(--font-sans);color:var(--ink-3)}
.ef-gantt-wk .ef-pill{gap:4px;padding:0 7px;font-size:var(--fs-12)}
.ef-gantt-days{display:flex;width:100%;padding:0 1px;margin-top:1px}
.ef-gantt-days i{flex:1;text-align:center;font:500 var(--fs-12)/1.3 var(--font-sans);color:var(--ink-3)}
.ef-gantt-days i.we{font-weight:400;opacity:.7}

.ef-gantt-body{position:relative}
.ef-gantt-row{display:grid;grid-template-columns:var(--label) minmax(0,1fr);border-bottom:1px solid var(--line)}
.ef-gantt-name{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font:600 var(--fs-14)/1.3 var(--font-sans);color:var(--ink);text-decoration:none}
.ef-gantt-name:hover{text-decoration:underline}
.ef-gantt-name:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--radius-sm)}
.ef-gantt-lab small{display:flex;align-items:center;gap:6px;min-width:0;margin-top:1px;font:400 var(--fs-13)/1.4 var(--font-sans);color:var(--ink-3)}
.ef-gantt-lab small span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ef-gantt-lab small svg{width:12px;height:12px;flex:none}
.ef-gantt-track{position:relative;padding:10px 0 8px;background-image:linear-gradient(90deg,var(--line) 1px,transparent 1px),linear-gradient(90deg,transparent 71.43%,var(--tn) 71.43%);background-size:calc(100% / var(--weeks)) 100%}
.ef-gantt-lane{position:relative;height:var(--bar-h)}

.ef-gantt-bar{position:absolute;top:0;left:calc(var(--s) / var(--days) * 100%);width:calc(var(--d) / var(--days) * 100%);min-width:10px;height:var(--bar-h);display:flex;align-items:center;gap:6px;padding:0 16px;border:0;border-left:3px solid var(--c);border-radius:var(--radius-sm);background:var(--cbg);color:var(--ink);font:500 var(--fs-13) var(--font-sans);white-space:nowrap;overflow:hidden;text-align:left;cursor:pointer}
.ef-gantt-bar:hover{box-shadow:0 0 0 2px var(--line-ctl)}
.ef-gantt-bar:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ef-gantt-bar b{font-weight:600;color:var(--ink)}
.ef-gantt-bar em{font-style:normal;color:var(--ink-2)}
.ef-gantt-bar>span.t{min-width:0;overflow:hidden;text-overflow:ellipsis}
.ef-gantt-bar>svg{width:14px;height:14px;flex:none;margin-left:auto;color:var(--ink-2)}
.ef-gantt-bar.is-sm{padding:0}
.ef-gantt-bar.is-cut-l{border-left-style:dashed;border-top-left-radius:0;border-bottom-left-radius:0}
.ef-gantt-bar.is-cut-r{border-right:3px dashed var(--c);border-top-right-radius:0;border-bottom-right-radius:0}
/* Trekzone aan de rand: in- of uitrekken. Midden van de balk = verplaatsen. */
.ef-gantt-rz{position:absolute;top:0;bottom:0;width:12px;cursor:ew-resize}
.ef-gantt-rz::after{content:"";position:absolute;top:9px;bottom:9px;left:4px;width:5px;background:repeating-linear-gradient(90deg,var(--ink-3) 0 1px,transparent 1px 3px);opacity:.6}
.ef-gantt-rz--l{left:0}
.ef-gantt-rz--r{right:0}
.ef-gantt-bar.is-sm .ef-gantt-rz{display:none}
.ef-gantt-ol{position:absolute;top:0;left:calc((var(--s) + var(--d)) / var(--days) * 100% + 8px);display:flex;align-items:center;gap:6px;height:var(--bar-h);font:500 var(--fs-13) var(--font-sans);color:var(--ink-2);white-space:nowrap;pointer-events:none}
.ef-gantt-ol::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c);flex:none}
.ef-gantt-ol b{font-weight:600;color:var(--ink)}
.ef-gantt-ol--l{left:auto;right:calc(100% - var(--s) / var(--days) * 100% + 8px)}
.ef-gantt-bar.is-short .t{display:none}
.ef-gantt-note{display:flex;align-items:flex-start;gap:6px;max-width:300px;margin:6px 0 0 min(calc(var(--s) / var(--days) * 100%),calc(100% - 300px));font:500 var(--fs-13)/1.35 var(--font-sans);color:var(--warn)}
.ef-gantt-note svg{width:14px;height:14px;flex:none;margin-top:1px}

/* Sleepstaat: oorspronkelijke plek (spoor), balk in de hand, droplijnen op de landingsdagen, live label */
.ef-gantt-bar.is-ghost{background:transparent;border:1.5px dashed var(--c);border-left-style:dashed;cursor:default;opacity:.8}
.ef-gantt-bar.is-drag{z-index:5;padding-left:10px;cursor:grabbing;box-shadow:0 0 0 2px var(--accent),var(--shadow-pop)}
.ef-gantt-bar.is-drag .ef-grip{cursor:grabbing;color:var(--ink-2)}
.ef-gantt-drop{position:absolute;top:0;bottom:0;left:calc(var(--s) / var(--days) * 100%);width:0;border-left:2px dashed var(--accent);z-index:4;pointer-events:none}
.ef-gantt-tip{position:absolute;z-index:6;top:6px;left:calc(var(--s) / var(--days) * 100% + 12px);padding:2px 8px;border:1px solid var(--float-line);border-radius:var(--radius-sm);background:var(--raised);box-shadow:var(--float-shadow);font:600 var(--fs-12)/1.5 var(--font-sans);white-space:nowrap;pointer-events:none}
.ef-gantt-row.is-dragging .ef-gantt-track{padding-top:40px}

.ef-gantt-today{position:absolute;top:0;bottom:0;left:calc(var(--label) + (100% - var(--label)) * var(--t));width:2px;margin-left:-1px;background:var(--accent);z-index:2;pointer-events:none}
.ef-gantt-today::before{content:"";position:absolute;left:-3px;top:0;width:8px;height:8px;border-radius:50%;background:var(--accent)}

/* Sommatie-rij (capaciteit) en cellen */
.ef-gantt-sum{--row-bg:var(--sunken);background:var(--sunken);border-bottom:1px solid var(--line)}
.ef-gantt-sum .ef-gantt-lab b{display:block;font:600 var(--fs-14)/1.3 var(--font-sans)}
.ef-gantt-sum .ef-gantt-lab small{display:block}
.ef-gantt-cell{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;padding:9px 6px 8px;border-left:1px solid var(--line)}
.ef-gantt-cell.is-now{background:var(--tb)}
.ef-gantt-cell .ef-prog{width:100%;margin-top:0}
.ef-gantt-capv{font:400 var(--fs-13)/1.2 var(--font-sans);color:var(--ink-3);white-space:nowrap}
.ef-gantt-capv b{font-weight:600;color:var(--ink)}
.ef-gantt-capw{font:500 var(--fs-12)/1.2 var(--font-sans);white-space:nowrap}
.ef-gantt-capw.is-ok{color:var(--ok)}
.ef-gantt-capw.is-warn{color:var(--warn)}
.ef-gantt-capw.is-crit{color:var(--crit)}

/* Persoonsrij: vijf dagpunten per week (ma-vr). De vorm draagt de betekenis, niet alleen de kleur. */
.ef-gantt-sub{--row-bg:var(--sunken);background:var(--sunken);border-top:1px solid var(--line-2);border-bottom:1px solid var(--line)}
.ef-gantt-sub .ef-gantt-lab b{display:block;font:600 var(--fs-14)/1.3 var(--font-sans)}
.ef-gantt-sub .ef-gantt-lab small{display:block}
.ef-gantt-person{border-bottom:1px solid var(--line)}
.ef-gantt-person .ef-gantt-lab{display:flex;align-items:center;gap:10px;height:44px;padding:0 14px}
.ef-gantt-person .ef-gantt-lab b{display:block;font:500 var(--fs-14)/1.25 var(--font-sans)}
.ef-gantt-person .ef-gantt-lab small{display:block;margin:0;font-size:var(--fs-12);line-height:1.25}
.ef-gantt-person .ef-gantt-cell{flex-direction:row;justify-content:center;gap:3px;height:44px;padding:0}
.ef-gantt-dot{display:block;flex:none;width:11px;height:11px;border-radius:50%;box-sizing:border-box}
.ef-gantt-dot--a{background:var(--viz-ok)}
.ef-gantt-dot--e{background:var(--viz-info);box-shadow:0 0 0 2px var(--accent-bg)}
.ef-gantt-dot--p{background:linear-gradient(90deg,var(--viz-ok) 50%,transparent 50%);border:1.5px solid var(--viz-ok)}
.ef-gantt-dot--n{background:linear-gradient(135deg,transparent 40%,var(--viz-crit) 40% 60%,transparent 60%),var(--crit-bg);border:1.5px solid var(--viz-crit)}
.ef-gantt-dot--r{border:1.5px dashed var(--line-ctl)}
.ef-gantt-dot--l{background:var(--viz-warn)}
.ef-gantt-dot--q{border:1.5px dashed var(--viz-warn)}
.ef-gantt-dot--u{border:1.5px dotted var(--ink-3)}

@media (max-width:700.98px){
  .ef-gantt{--label:140px;--bar-h:44px}
  .ef-gantt-rz{display:none}
  .ef-gantt-lab{padding:9px 10px}
  .ef-gantt-person .ef-gantt-lab{padding:0 10px}
  .ef-gantt-person .ef-gantt-lab .ef-av{display:none}
}

/* Calendar: urenkalender met tijdas, blokken per urensoort (ef-cat--*), nu-lijn en dagstrip voor de telefoon */
/* ef-calendar (.ef-cal): weekkalender met tijdas, dagkolommen, blokken, nu-lijn en leeg vak. Samen met ef-block. */
.ef-cal{--n:5;--hour:62px;--gut:48px;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);overflow:hidden;min-width:0}
.ef-cal[data-n="5"]{--n:5}.ef-cal[data-n="7"]{--n:7}
.ef-cal[data-n="5"] .is-we{display:none}
.ef-cal-hd,.ef-cal-bd{display:grid;grid-template-columns:var(--gut) repeat(var(--n),minmax(0,1fr))}
.ef-cal-hd{border-bottom:1px solid var(--line-2)}
.ef-cal-dh{display:flex;flex-direction:column;justify-content:space-between;gap:6px;padding:8px 8px 8px 10px;min-height:76px;min-width:0;border-left:1px solid var(--line)}
.ef-cal-r1,.ef-cal-r2{display:flex;align-items:center;justify-content:space-between;gap:6px;flex-wrap:wrap}
.ef-cal-r2{justify-content:flex-start}
.ef-cal-dn{display:flex;align-items:center;gap:6px;font:400 var(--fs-13) var(--font-sans);color:var(--ink-2);white-space:nowrap}
.ef-cal-dn b{color:var(--ink)}
.ef-cal-dd{border-radius:var(--radius-pill);padding:0 7px;line-height:20px}
.ef-cal-dh.is-today .ef-cal-dd{background:var(--action);color:var(--on-action);font-weight:500}
.ef-cal-tt{font:600 var(--fs-14) var(--font-sans);color:var(--ink)}
.ef-cal-tt.is-nul{font-weight:400;color:var(--ink-3)}
.ef-cal[data-n="7"] .ef-cal-dn .ef-cal-mnd{display:none}
.ef-cal[data-n="7"] .ef-cal-dh{padding-left:8px;padding-right:6px}
.ef-cal-gut{position:relative;height:calc(var(--hour)*12)}
.ef-cal-gut span{position:absolute;right:8px;font:500 var(--fs-12)/14px var(--font-sans);color:var(--ink-3);transform:translateY(-50%);font-variant-numeric:tabular-nums}
.ef-cal-gut span:first-child{transform:none;top:2px}
.ef-cal-gut span:nth-last-child(2){transform:translateY(-100%)}
.ef-cal-gut .ef-cal-nu{color:var(--accent);background:var(--surface);z-index:3}
.ef-cal-col{position:relative;height:calc(var(--hour)*12);border-left:1px solid var(--line);min-width:0;
  background-image:
    repeating-linear-gradient(to bottom,var(--line-2) 0,var(--line-2) 1px,transparent 1px,transparent var(--hour)),
    repeating-linear-gradient(to bottom,transparent 0,transparent calc(var(--hour)/2),var(--line) calc(var(--hour)/2),var(--line) calc(var(--hour)/2 + 1px),transparent calc(var(--hour)/2 + 1px),transparent var(--hour))}
.ef-cal-col.is-we{background-color:var(--tn)}
.ef-cal-col.is-today{background-color:var(--tb)}
.ef-cal-slot{position:absolute;left:0;right:0;z-index:1;height:calc(var(--hour)/2);border:0;border-radius:var(--radius-sm);background:transparent;padding:0;color:var(--accent);font:500 var(--fs-12) var(--font-sans);text-align:left;cursor:pointer}
.ef-cal-slot:hover,.ef-cal-slot:focus-visible{background:var(--accent-bg)}
.ef-cal-slot:hover::after,.ef-cal-slot:focus-visible::after{content:"+ " attr(data-t);position:absolute;left:8px;top:6px}
.ef-cal-slot:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.ef-cal-leeg{position:absolute;left:6px;right:6px;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;padding:8px;border:1.5px dashed var(--line-ctl);border-radius:var(--radius-md);background:transparent;color:var(--ink-3);font:400 var(--fs-13)/1.35 var(--font-sans);cursor:pointer}
.ef-cal-leeg b{font-size:var(--fs-13);color:var(--ink-2)}
.ef-cal-leeg svg{width:18px;height:18px;fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round}
.ef-cal-leeg:hover{border-color:var(--accent);background:var(--accent-bg)}
.ef-cal-leeg:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ef-cal-now{position:absolute;left:0;right:0;z-index:4;height:0;border-top:2px solid var(--accent);pointer-events:none}
.ef-cal-now::before{content:"";position:absolute;left:-5px;top:-6px;width:10px;height:10px;border-radius:50%;background:var(--accent)}
/* ef-block: een geboekt blok in de kalender, tint per urensoort uit de tokens */
.ef-block{position:absolute;left:3px;right:3px;z-index:2;display:flex;flex-direction:column;text-align:left;border:0;border-left:3px solid var(--c,var(--cat-geo));border-radius:var(--radius-sm);color:var(--ink);padding:3px 6px 3px 7px;overflow:hidden;cursor:pointer;font:400 var(--fs-12)/14px var(--font-sans);font-variant-numeric:tabular-nums;background-image:linear-gradient(var(--cbg,var(--cat-geo-bg)),var(--cbg,var(--cat-geo-bg))),linear-gradient(var(--surface),var(--surface))}
.ef-block:hover{box-shadow:inset 0 0 0 1px var(--c,var(--cat-geo))}
.ef-block:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.ef-block.is-sel{box-shadow:inset 0 0 0 2px var(--accent)}
.ef-block-t{display:flex;align-items:center;gap:6px;font-weight:600;white-space:nowrap}
.ef-block-d{font-weight:500;color:var(--ink-2)}
.ef-block-p{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ef-block-n{color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ef-block-n em{font-style:normal;font-weight:500;color:var(--ink)}
.ef-block-lock{display:none;width:12px;height:12px;margin-left:auto;flex:none;color:var(--ink-2)}
.ef-block.is-lock .ef-block-lock{display:block}
.ef-block.is-lock{cursor:not-allowed}
.ef-block--aanvraag{background-image:linear-gradient(var(--surface),var(--surface));border:1.5px dashed var(--c,var(--cat-geo));border-left-width:3px}
/* ef-day: dagpil voor de telefoon (dag, nummer, uren) */
.ef-days{display:none;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.ef-day{display:flex;flex-direction:column;align-items:center;gap:1px;min-height:68px;padding:8px 0 9px;border-radius:var(--radius-md);border:1px solid transparent;background:transparent;color:var(--ink-3);font:inherit;cursor:pointer}
.ef-day small{font:500 var(--fs-12) var(--font-sans)}
.ef-day b{font:600 var(--fs-18)/1.3 var(--font-sans);color:var(--ink)}
.ef-day i{font:400 var(--fs-12) var(--font-sans);font-style:normal;color:var(--ink-3)}
.ef-day.is-today{border-color:var(--line-2)}
.ef-day[aria-pressed="true"]{background:var(--action);border-color:var(--action)}
.ef-day[aria-pressed="true"] small,.ef-day[aria-pressed="true"] b,.ef-day[aria-pressed="true"] i{color:var(--on-action)}
.ef-day:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Cel: dagcel in een matrix van medewerkers bij dagen; zegt alleen of er die dag geboekt is */
.ef-cel{display:grid;grid-auto-flow:column;gap:2px;place-items:center;justify-self:center;width:44px;height:30px;border-radius:var(--radius-sm);border:1px solid transparent;font:500 var(--fs-13)/1 var(--font-sans);font-variant-numeric:tabular-nums;color:var(--ink-3);white-space:nowrap}
.ef-cel small{font:600 var(--fs-12) var(--font-sans);color:var(--accent)}
.ef-cel--ok{background:var(--ok-bg);color:var(--ok)}
.ef-cel--deels{background:var(--ok-bg);color:var(--ok);border-color:var(--accent)}
.ef-cel--verlof{background:var(--accent-bg);color:var(--accent)}
.ef-cel--mist{background:var(--warn-bg);color:var(--warn);font-size:var(--fs-12)}
.ef-cel--komt{border:1px dashed var(--line-ctl)}
.ef-cel--vrij{color:var(--ink-3);opacity:.7}
.ef-cel--sm{width:auto;min-width:26px;height:20px;padding:0 5px;font-size:var(--fs-12)}

/* Telefoon (onder 700 px): tikvlakken van 44 px, kalender met één dag, gantt met smalle labelkolom */
@media (max-width:700.98px){
  .ef-btn--icon{min-width:44px;min-height:44px}
  .ef-check,.ef-radio,.ef-switch{min-height:44px}
  .ef-check input{width:24px;height:24px}
  .ef-search,.ef-search input{min-height:44px}
  .ef-search{min-width:0}
  .ef-chip,.ef-seg button{min-height:44px}
  .ef-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .ef-kpi{padding:12px}
  .ef-kpi-v{font-size:var(--fs-22)}
  .ef-kpi-chev{display:none}
  .ef-banner{flex-wrap:wrap}
  .ef-dlg-sum{order:3;margin:0 0 4px}
  .ef-banner .ef-btn{margin-left:30px}
  .ef-fbar-sep{display:none}
  .ef-panel-hd{flex-wrap:wrap}
  .ef-panel-hd h3{flex:1 1 auto}
  .ef-panel-act{display:inline-flex;align-items:center;min-height:44px}
  .ef-dl{grid-template-columns:minmax(96px,34%) 1fr}
  .ef-dl--wide{grid-template-columns:minmax(120px,40%) 1fr}
  .ef-dl--wide dd{text-align:right}
  .ef-days{display:grid}
  .ef-cal[data-n]{--n:1;--gut:44px}
  .ef-cal-hd{display:none}
  .ef-cal .ef-cal-col:not(.is-sel){display:none}
  .ef-cal[data-n="5"] .ef-cal-col.is-we.is-sel{display:block}
}

/* ===== 1.4.0 · Portaal: schil, ruime dichtheid, aanmeldkaart, skeleton, tijdlijn ===== */

/* AppShell: de zijbalk staat op het canvas, het werkpaneel is een afgerond vlak ernaast. Boven 1024 px staat de zijbalk er altijd,
   daaronder is hij een lade (.is-open met een .ef-scrim ervoor) en komt er een bovenbalk. Onder 700 px komt er een tabbalk (.ef-tabbar). */
.ef-app{display:grid;grid-template-columns:var(--sidebar-portal) minmax(0,1fr);min-height:100vh;min-height:100dvh;background:var(--canvas);color:var(--ink)}
.ef-side{display:flex;flex-direction:column;gap:2px;position:sticky;top:0;height:100vh;height:100dvh;padding:16px 12px;overflow:auto;background:var(--canvas)}
.ef-side .ef-nav{padding:0;background:transparent}
.ef-side-brand{display:flex;align-items:center;gap:10px;min-height:44px;padding:4px 10px;color:var(--ink);text-decoration:none;font:600 var(--fs-16)/1 var(--font-sans);letter-spacing:-.01em}
.ef-side-brand img{width:34px;height:auto}
.ef-side-org{margin:0 0 6px;padding:10px 12px;border-radius:var(--radius-md);background:var(--sunken);box-shadow:inset 0 0 0 1px var(--line-2);font-size:var(--fs-13);color:var(--ink-3)}
.ef-side-org b{display:block;margin-top:2px;font:600 var(--fs-14) var(--font-sans);color:var(--ink)}
.ef-side-foot{display:flex;flex-direction:column;gap:2px;margin-top:auto;padding-top:12px}
.ef-me{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:8px 10px;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--ink);font:400 var(--fs-14) var(--font-sans);text-align:left;text-decoration:none;cursor:pointer}
.ef-me[hidden]{display:none}
.ef-me:hover{background:var(--sunken)}
.ef-me small{display:block;font-size:var(--fs-12);color:var(--ink-3)}
.ef-main{min-width:0;margin:8px 8px 8px 0;overflow:clip;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg)}
.ef-topbar{display:none}
@media (max-width:1023px){
  .ef-app{grid-template-columns:minmax(0,1fr)}
  .ef-side{position:fixed;left:0;top:0;bottom:0;z-index:var(--z-drawer,40);height:auto;width:min(var(--sidebar-portal),88vw);visibility:hidden;transform:translateX(-100%);box-shadow:var(--shadow-pop);transition:transform .2s ease,visibility 0s linear .2s}
  .ef-side.is-open{visibility:visible;transform:none;transition:transform .2s ease}
  .ef-app>.ef-scrim{z-index:calc(var(--z-drawer,40) - 1)}
  .ef-main{margin:0;border:0;border-radius:0}
  .ef-topbar{display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:var(--z-bar,5);padding:10px 16px;background:var(--canvas);border-bottom:1px solid var(--line)}
  .ef-topbar .ef-side-brand{padding:0}
  .ef-topbar .ef-btn--icon{margin-left:auto}
}
@media (prefers-reduced-motion:reduce){.ef-side{transition:none}}

/* Ruime dichtheid: zet .ef-ruim op de wortel van het portaal. Ruimer dan de cockpit: tekst 16 px, tikvlakken van 44 px,
   titel 44 px, binnenmarge 32 px (README, Typografie en Layout). Geen tokenwijziging: de cockpit merkt hier niets van. */
.ef-ruim{font-size:var(--fs-16);line-height:1.55}
.ef-ruim .ef-nav-item{height:44px}
.ef-ruim .ef-nav-item--project{height:auto;min-height:44px;padding:6px 8px}
.ef-ruim .ef-nav-item--project img{width:48px;height:36px}
.ef-ruim .ef-btn:not(.ef-btn--sm):not(.ef-btn--icon):not(.ef-btn--touch):not(.ef-btn--ghost){min-height:46px;padding:0 20px;font-size:15px;border-radius:11px}
.ef-ruim .ef-btn--sm,.ef-ruim .ef-btn--ghost{min-height:44px}
.ef-ruim .ef-btn--icon{min-width:44px;min-height:44px}
.ef-ruim .ef-hd{padding:20px var(--space-8) 0}
.ef-ruim .ef-hd h1{margin-top:12px;font-size:44px;line-height:50px;text-wrap:balance}
.ef-ruim .ef-hd-meta{font-size:var(--fs-14)}
.ef-ruim .ef-hd-row{padding:18px 0 20px}
.ef-ruim .ef-tabs{gap:28px}
.ef-ruim .ef-hd .ef-tabs{margin-inline:calc(var(--space-8) * -1);padding-inline:var(--space-8)}
.ef-ruim .ef-tabs a:not([hidden]){display:inline-flex;align-items:center;min-height:44px;padding:12px 0 14px;font-size:15px}
.ef-ruim .ef-tabs a[aria-current="page"]{font-weight:600}
.ef-ruim .ef-input:not(.ef-input--sm){min-height:46px;font-size:var(--fs-16)}
.ef-ruim :where(textarea:not([rows])).ef-input:not(.ef-input--sm){min-height:calc(4.5em + 18px)}  /* 1.8.0: ook in ef-ruim drie regels zonder rows */
.ef-ruim .ef-table th{padding-top:14px;padding-bottom:14px}
.ef-ruim .ef-table td{height:var(--row-portal)}
.ef-ruim .ef-product{padding:8px 14px 14px}
.ef-ruim .ef-product-ill{height:96px}
.ef-ruim .ef-product b{font-size:var(--fs-16)}
.ef-ruim .ef-product small{display:block;margin-top:2px;font-size:var(--fs-13)}
.ef-ruim .ef-facts div{padding:12px 14px}
@media (max-width:700.98px){
  .ef-ruim .ef-hd{padding:14px var(--space-4) 0}
  .ef-ruim .ef-hd h1{font-size:var(--fs-34);line-height:40px}
  .ef-ruim .ef-hd-row{flex-direction:column;align-items:stretch}
  .ef-ruim .ef-hd-acts{flex-direction:column}
  .ef-ruim .ef-hd-acts .ef-btn{width:100%}
  .ef-ruim .ef-tabs{gap:24px;overflow-x:auto;white-space:nowrap}
  .ef-ruim .ef-hd .ef-tabs{margin-inline:calc(var(--space-4) * -1);padding-inline:var(--space-4)}
}

/* Pagina-inhoud in het paneel en sectiekop (portaal: 19 px; de cockpit gebruikt een Panel-kop van 16 px) */
.ef-page{display:grid;gap:var(--space-8);padding:28px var(--space-8) 40px}
.ef-page>*{min-width:0}
.ef-sec-hd{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 14px}
.ef-sec-hd h2{margin:0;font:600 19px/1.3 var(--font-sans);letter-spacing:-.01em}
@media (max-width:700.98px){.ef-page{gap:28px;padding:20px var(--space-4) 96px}}

/* Auth: aanmelden, tweede stap, welkom. Een kaart op het canvas met de zachte gloed; geen zijbalk. */
.ef-auth{position:relative;display:grid;place-items:center;min-height:100vh;min-height:100dvh;padding:24px var(--space-4);overflow:hidden;background:var(--canvas);color:var(--ink)}
.ef-auth::before{content:"";position:absolute;left:-10%;top:-20%;width:60%;height:70%;background:radial-gradient(closest-side,var(--glow1),transparent);pointer-events:none}
.ef-auth::after{content:"";position:absolute;right:-10%;bottom:-25%;width:55%;height:70%;background:radial-gradient(closest-side,var(--glow2),transparent);pointer-events:none}
.ef-auth-in{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;width:100%}
.ef-auth-brand{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:22px;font:600 var(--fs-18)/1 var(--font-sans);letter-spacing:-.01em}
.ef-auth-brand img{width:40px;height:auto}
.ef-auth-card{width:100%;max-width:440px;padding:36px 36px 32px;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius-xl);box-shadow:var(--shadow-card)}
.ef-auth-card .ef-sig{margin-bottom:22px}
.ef-auth-card h1{margin:0 0 6px;font:600 var(--fs-26)/1.2 var(--font-sans);letter-spacing:-.02em}
.ef-auth-card>p{margin:0 0 22px;color:var(--ink-2)}
.ef-auth-card form{display:grid;gap:var(--space-4)}
.ef-auth-card .ef-btn{width:100%}
.ef-auth-foot{margin-top:18px;font-size:var(--fs-13);color:var(--ink-3);text-align:center}
.ef-auth-foot a{color:var(--accent)}
@media (max-width:700.98px){.ef-auth-card{padding:28px 20px 24px}}

/* Skeleton: een plek die nog laadt. Alleen opacity beweegt. */
.ef-skel{display:block;min-height:1em;border-radius:var(--radius-sm);background:var(--line-2);animation:ef-skel 1.4s ease-in-out infinite}
.ef-skel--titel{width:220px;max-width:100%;height:44px}
.ef-skel--regel{height:14px}
.ef-skel--tegel{height:180px;border-radius:var(--radius-lg)}
@keyframes ef-skel{50%{opacity:.55}}
@media (prefers-reduced-motion:reduce){.ef-skel{animation:none}}

/* Tijdlijn met twee vormen: horizontaal (ef-tl, tot zes punten, vanaf 700 px) en verticaal (ef-log). Een wrapper kiest. */
.ef-tl-wrap .ef-tl{margin:44px 56px 8px}
.ef-tl-wrap .ef-tl-list{display:none}
.ef-tl-wrap--lijst .ef-tl-wide{display:none}
.ef-tl-wrap--lijst .ef-tl-list{display:block}
@media (max-width:700.98px){
  .ef-tl-wrap .ef-tl-wide{display:none}
  .ef-tl-wrap .ef-tl-list{display:block}
}


.ef-crumb a{color:inherit;text-decoration:none}
.ef-crumb a:hover{color:var(--ink);text-decoration:underline}
@media (max-width:700.98px){.ef-crumb a:not([hidden]){display:inline-flex;align-items:center;min-height:44px}}

/* Tabbalk voor de telefoon (variant H, besluit Remco 12-10-2026): één vorm voor cockpit en portaal. Opaak vlak, actief = dunne verloopstreep
   boven, label 600 (inactief 500) en icoon in accent. De hoogte volgt de dichtheid: 44 px compact, 52 px in ef-ruim, als --tabbar-h (sinds 1.6.0 ook voor ef-actionbar en de toast). Een bestemming is een a of een button. */
.ef-tabbar{--tb-h:var(--tabbar-h,44px);display:none}
.ef-ruim{--tabbar-h:52px}
@media (max-width:700.98px){
  .ef-tabbar{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);position:fixed;left:0;right:0;bottom:0;z-index:var(--z-bar,5);padding:0 4px env(safe-area-inset-bottom,0px);background:var(--panel);border-top:1px solid var(--line-2)}
  .ef-tabbar :is(a,button):not([hidden]){position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:var(--tb-h);border:0;border-radius:0;background:transparent;color:var(--ink-3);font:500 var(--fs-12)/1.1 var(--font-sans);text-decoration:none;cursor:pointer}
  .ef-tabbar :is(a,button) svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .ef-tabbar :is(a,button)[aria-current="page"]{color:var(--ink);font-weight:600}
  .ef-tabbar :is(a,button)[aria-current="page"] svg{color:var(--accent)}
  .ef-tabbar :is(a,button)[aria-current="page"]::before{content:"";position:absolute;top:0;left:22%;right:22%;height:2px;border-radius:0 0 2px 2px;background:linear-gradient(90deg,var(--brand-blue),var(--brand-purple-line))}
}

/* Klikvlak van minstens 44 px in ef-ruim (uitvoering C, besluit Remco 12-10-2026): de zichtbare maat blijft, het klikvlak wordt groter met een
   onzichtbare ::after. Menu-items en gestapelde vinkjes staan tegen elkaar en worden zichtbaar 44 px (anders overlappen hun vlakken).
   Het echte klikvlak meet tools/klikvlak.py met elementFromPoint; deze vlakken breken stil. */
.ef-ruim :is(.ef-chip,.ef-seg button,.ef-crumb a,.ef-check,.ef-radio,.ef-switch){position:relative}
.ef-ruim :is(.ef-chip,.ef-seg button,.ef-crumb a,.ef-check,.ef-radio,.ef-switch)::after{content:"";position:absolute;left:0;right:0;top:50%;height:max(100%,44px);transform:translateY(-50%)}
.ef-ruim .ef-check.ef-check--solo::after{left:-12px;right:-12px}
.ef-ruim .ef-search{position:relative}
.ef-ruim .ef-search::before,.ef-ruim .ef-search::after{content:"";position:absolute;left:-1px;right:-1px;height:6px}
.ef-ruim .ef-search::before{top:-6px}
.ef-ruim .ef-search::after{bottom:-6px}
.ef-ruim .ef-dlg-x::after{content:"";position:absolute;inset:-4px}
.ef-ruim .ef-crumb{position:relative;z-index:1}
.ef-ruim .ef-menu-item{min-height:44px}
.ef-checks{display:flex;flex-direction:column;gap:var(--space-1)}
.ef-ruim .ef-checks{gap:12px}
.ef-ruim .ef-fbar{row-gap:12px}

/* Een container met het attribuut hidden blijft verborgen, ook waar zijn eigen regel display zet (een tabbalk die op het aanmeldscherm niet hoort). */
.ef-tabbar[hidden],.ef-topbar[hidden],.ef-side[hidden],.ef-checks[hidden]{display:none}

/* ===================================================================================================
   1.6.0 · Marcom-kern: werkruimtekop, rustige icoonknop en opmaakbalk, blokkenlijst, voorbeeldvlak, actiebalk, mediategel,
   zoekresultaat-voorbeeld en tekenteller, chip-invoer, werkruimte-indeling, suggestiekaart en controlelijst.
   Regels voor deze sectie (controle.py bewaakt ze): een icoon (svg) in een onderdeel krijgt zijn maat met minstens twee klassen in de
   selector, zodat een algemene regel van een app (svg.i, .klasse svg) hem niet overschrijft; wat in een balk of rij staat is op de
   telefoon en in ef-ruim zichtbaar 44 px; een onderdeel met display:flex of grid blijft verborgen met het attribuut hidden.
   =================================================================================================== */

.ef-hd-titel,.ef-iconbtn,.ef-blk-grip,.ef-blk-add,.ef-taginput,.ef-tag,.ef-tag button,.ef-media,.ef-actionbar,.ef-suggest,.ef-checklist-ic{box-sizing:border-box}

/* V1 · Werkruimtekop: een kop (ef-hd) met een titel die je direct bewerkt, en de opslagstatus ("Opgeslagen 08:42 · versie 4").
   ef-hd-titel is een input; een titel die niet te bewerken is blijft een h1 met ef-hd-titel--vast (zonder rand bij hover). De selector
   heeft drie klassen: de h1-regel van ef-hd en die van ef-ruim winnen er anders van.
   1.6.1: het linkerblok (titel + metaregel) vult de rij naast de knoppen; zonder flex:1 was het titelveld zo breed als zijn inhoud en
   een lange titel afgekapt (bewaakt door tools/test_werkkop.py). */
.ef-hd--werk .ef-hd-row{align-items:center}
.ef-hd--werk .ef-hd-row>:first-child{flex:1;min-width:0}
.ef-hd.ef-hd--werk .ef-hd-titel{display:block;width:calc(100% + 9px);min-width:0;margin:2px 0 0 -9px;padding:2px 8px;border:1px solid transparent;border-radius:var(--radius-sm);background:transparent;color:var(--ink);font:600 var(--fs-26)/1.25 var(--font-sans);letter-spacing:-.02em;text-wrap:balance}
.ef-hd.ef-hd--werk .ef-hd-titel:hover{border-color:var(--line-ctl)}
.ef-hd.ef-hd--werk .ef-hd-titel:focus-visible{outline:2px solid var(--accent);outline-offset:2px;background:var(--surface)}
.ef-hd.ef-hd--werk .ef-hd-titel.ef-hd-titel--vast:hover{border-color:transparent}
.ef-savestate{display:inline-flex;align-items:center;gap:6px;font:400 var(--fs-13)/1.4 var(--font-sans);color:var(--ink-3);white-space:nowrap}
.ef-savestate.ef-savestate svg{width:14px;height:14px;flex:none;fill:none;stroke:var(--ok);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ef-savestate--busy.ef-savestate svg{stroke:var(--ink-3)}
.ef-savestate--warn{color:var(--warn)}
.ef-savestate--warn.ef-savestate svg{stroke:var(--warn)}
.ef-savestate b{font-weight:500;color:var(--ink-2)}

/* V2 · Rustige icoonknop (zonder rand, voor vijf of meer naast elkaar) en de opmaakbalk (role="toolbar") */
.ef-iconbtn{display:inline-grid;place-items:center;flex:none;width:32px;height:32px;padding:0;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--ink-2);cursor:pointer}
.ef-iconbtn:hover{background:var(--sunken);color:var(--ink)}
.ef-iconbtn[aria-pressed="true"]{background:var(--accent-bg);color:var(--accent)}
.ef-iconbtn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.ef-iconbtn:disabled{opacity:.5;cursor:not-allowed}
.ef-iconbtn:disabled:hover{background:transparent;color:var(--ink-2)}
.ef-iconbtn.ef-iconbtn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ef-tb{display:flex;align-items:center;gap:2px;flex-wrap:wrap;padding:4px 6px;border:1px solid var(--line-2);border-radius:var(--radius-md);background:var(--surface)}
.ef-tb-sep{width:1px;align-self:stretch;margin:4px;background:var(--line-2)}
.ef-tb .ef-select{width:auto}
.ef-tb .ef-input--sm{width:auto;border-color:transparent;background:transparent;font-weight:500}
.ef-tb .ef-input--sm:hover{border-color:var(--line-ctl)}

/* V3 · Blokkenlijst: een pagina opgebouwd uit blokken met een sleepgreep (een echte knop), het soort, acties en "Blok toevoegen" */
.ef-blks{display:flex;flex-direction:column;gap:12px;min-width:0}
.ef-blk{border:1px solid var(--line-2);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-card);min-width:0}
.ef-blk:focus-within{border-color:var(--accent)}
.ef-blk-hd{display:flex;align-items:center;gap:8px;padding:8px 10px 8px 6px;border-bottom:1px solid var(--line)}
.ef-blk-grip{display:grid;place-items:center;flex:none;width:24px;height:28px;padding:0;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--ink-3);cursor:grab;touch-action:none}
.ef-blk-grip:hover{background:var(--sunken);color:var(--ink)}
.ef-blk-grip:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.ef-blk-grip.ef-blk-grip svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.ef-blk-kind{font:500 var(--fs-12)/1.4 var(--font-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.ef-blk-acts{margin-left:auto;display:flex;gap:2px}
.ef-blk-body{display:flex;flex-direction:column;gap:12px;min-width:0;padding:14px 16px}
.ef-blk--drag{border-style:dashed;border-color:var(--accent);box-shadow:var(--shadow-pop)}
.ef-blk-add{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 16px;border:1px dashed var(--line-ctl);border-radius:var(--radius-lg);background:transparent;color:var(--ink-2);font:500 var(--fs-14)/1 var(--font-sans);cursor:pointer}
.ef-blk-add:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-bg)}
.ef-blk-add:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ef-blk-add.ef-blk-add svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.ef-prose{max-width:var(--prose-max);font:400 var(--fs-16)/1.6 var(--font-sans);color:var(--ink)}
.ef-prose>:first-child{margin-top:0}
.ef-prose>:last-child{margin-bottom:0}
.ef-prose p,.ef-prose ul,.ef-prose ol{margin:0 0 .8em}
.ef-prose a{color:var(--accent)}
.ef-prose[contenteditable]{min-height:80px}
.ef-prose[contenteditable]:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:var(--radius-sm)}

/* V4 · Voorbeeldvlak: een browserkader met adres en apparaatkeuze (een ef-seg in de balk), de pagina erin. ef-frame-pg is een
   containerquery-vlak (naam ef-pg): wat erin staat reageert op de breedte van het kader en niet op die van het venster. */
.ef-frame{display:flex;flex-direction:column;min-width:0;border:1px solid var(--line-2);border-radius:var(--radius-lg);background:var(--sunken);overflow:hidden}
.ef-frame-bar{display:flex;align-items:center;gap:12px;padding:8px 12px;border-bottom:1px solid var(--line-2);background:var(--surface)}
.ef-frame-bar .ef-seg{flex:none}
.ef-frame-dots{display:flex;gap:6px}
.ef-frame-dots i{width:9px;height:9px;border-radius:50%;background:var(--line-ctl)}
.ef-frame-url{flex:1;min-width:0;display:flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--radius-pill);background:var(--sunken);color:var(--ink-2);font:400 var(--fs-13)/1.4 var(--font-sans);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ef-frame-url.ef-frame-url svg{width:12px;height:12px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ef-frame-vp{display:flex;justify-content:center;padding:16px;overflow:auto}
.ef-frame-pg{container:ef-pg/inline-size;width:100%;min-width:0;background:var(--canvas);border:1px solid var(--line-2);border-radius:var(--radius-md);overflow:hidden}
.ef-frame--tablet .ef-frame-pg{max-width:620px}
.ef-frame--phone .ef-frame-pg{max-width:340px}

/* V5 · Actiebalk: opslagstatus links, hoofdactie rechts. Plakt onderaan het scrollende vlak (zet hem als laatste kind van een kolom die het
   scherm vult; het paneel van ef-app knipt met overflow:clip, dus sticky werkt). Op de telefoon staat hij boven ef-tabbar: de hoogte daarvan
   is --tabbar-h (44 px, in ef-ruim 52 px; zie ef-tabbar) en komt bij de rand van de tabbalk (1 px) en de veilige zone (iPhone). Zijn eigen
   hoogte is --actionbar-h (69 px: een knop van 48 px met 10 px erboven en eronder, plus de rand); de toast gaat er met die waarde bovenlangs. Heeft een
   app een hogere balk, of verbergt hij hem alleen met CSS, dan zet de app --actionbar-h op de wortel (0px bij verborgen). */
.ef-actionbar{position:sticky;bottom:0;z-index:var(--z-bar,5);display:flex;align-items:center;gap:12px;min-height:var(--actionbar-h,69px);margin-top:auto;padding:10px 24px;background:var(--panel);border-top:1px solid var(--line-2)}
.ef-actionbar-sp{flex:1}
.ef-actionbar .ef-btn{flex:none}
.ef-actionbar .ef-savestate{min-width:0;white-space:normal}
:root:has(.ef-actionbar:not([hidden])) .ef-toast-stack{bottom:calc(32px + var(--actionbar-h,69px))}
@media (max-width:700.98px){
  .ef-actionbar{padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px))}
  .ef-actionbar .ef-btn{min-height:48px}
  :root:has(.ef-tabbar:not([hidden])) .ef-actionbar{bottom:calc(var(--tabbar-h,44px) + 1px + env(safe-area-inset-bottom,0px));padding-bottom:10px}
  :root:has(.ef-actionbar:not([hidden])) .ef-toast-stack{bottom:calc(76px + var(--actionbar-h,69px) + env(safe-area-inset-bottom,0px))}
}

/* V6 · Mediategel: een beeld met naam, formaat, vlag, bron en selectie. De tegel is een knop met aria-pressed; het vinkje en de rand
   zeggen samen dat hij gekozen is (niet alleen kleur). */
.ef-media-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(168px,1fr))}
.ef-media{position:relative;display:flex;flex-direction:column;min-width:0;padding:0;border:1px solid var(--line-2);border-radius:var(--radius-md);background:var(--surface);color:var(--ink);font:inherit;text-align:left;overflow:hidden;cursor:pointer}
.ef-media:hover{border-color:var(--line-ctl)}
.ef-media:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ef-media[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.ef-media-img{position:relative;display:grid;place-items:center;aspect-ratio:4/3;background:var(--stage);overflow:hidden}
.ef-media-img img{display:block;width:100%;height:100%;object-fit:cover}
.ef-media-img--contain img{object-fit:contain;padding:16px}
.ef-media-cap{display:flex;flex-direction:column;gap:2px;min-width:0;padding:8px 10px 10px}
.ef-media-cap b{overflow:hidden;font:500 var(--fs-13)/1.3 var(--font-sans);text-overflow:ellipsis;white-space:nowrap}
.ef-media-cap small{font:400 var(--fs-12)/1.3 var(--font-sans);color:var(--ink-3)}
.ef-media-flag{position:absolute;left:8px;top:8px;display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:var(--radius-pill);background:var(--surface);box-shadow:inset 0 0 0 1px var(--warn);color:var(--warn);font:500 var(--fs-12)/1.5 var(--font-sans)}
.ef-media-flag.ef-media-flag svg{width:12px;height:12px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ef-media-src{position:absolute;right:8px;bottom:8px;padding:1px 8px;border-radius:var(--radius-pill);background:var(--chrome);color:var(--chrome-ink);font:500 var(--fs-12)/1.5 var(--font-sans)}
.ef-media-sel{position:absolute;right:8px;top:8px;display:none;place-items:center;width:20px;height:20px;border:1.5px solid var(--chrome-ink);border-radius:50%;background:var(--chrome);color:var(--chrome-ink)}
.ef-media-sel.ef-media-sel svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.ef-media[aria-pressed="true"] .ef-media-sel{display:grid;border-color:var(--action);background:var(--action);color:var(--on-action)}

/* V7 · Zoekresultaat-voorbeeld (SERP) en tekenteller met toestand */
.ef-serp{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border:1px solid var(--line-2);border-radius:var(--radius-md);background:var(--surface)}
.ef-serp-url{overflow:hidden;font:400 var(--fs-12)/1.4 var(--font-sans);color:var(--ink-3);text-overflow:ellipsis;white-space:nowrap}
.ef-serp-t{font:500 var(--fs-18)/1.3 var(--font-sans);color:var(--accent);overflow-wrap:anywhere}
.ef-serp-d{font:400 var(--fs-13)/1.5 var(--font-sans);color:var(--ink-2)}
.ef-chars{font:400 var(--fs-12)/1.4 var(--font-sans);color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.ef-chars--ok{color:var(--ok)}
.ef-chars--warn{color:var(--warn)}

/* V8 · Chip-invoer: tags en categorieën kiezen of typen als verwijderbare chips (een tag met een knop, aria-label "Verwijder …") */
.ef-taginput{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-height:38px;padding:4px 8px;border:1px solid var(--line-ctl);border-radius:var(--radius-sm);background:var(--surface)}
.ef-taginput:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.ef-taginput input{flex:1;min-width:80px;padding:4px 2px;border:0;outline:0;background:transparent;color:var(--ink);font:400 var(--fs-14)/1.4 var(--font-sans)}
.ef-taginput input::placeholder{color:var(--ink-3)}
.ef-tag{display:inline-flex;align-items:center;gap:4px;min-height:26px;padding:0 4px 0 10px;border-radius:var(--radius-pill);background:var(--accent-bg);color:var(--accent);font:500 var(--fs-13)/1 var(--font-sans)}
.ef-tag button{display:grid;place-items:center;width:20px;height:20px;padding:0;border:0;border-radius:50%;background:transparent;color:inherit;cursor:pointer}
.ef-tag button:hover{background:var(--surface)}
.ef-tag button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.ef-tag.ef-tag svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}

/* V9 · Werkruimte: hoofdvlak met een rechter rail van --ws-rail (360 px). De rail plakt bovenaan en scrolt zelf als hij hoger is dan het scherm.
   Onder --bp-ws (1100 px) staat hij onder het hoofdvlak; op de telefoon maakt de pagina er een eigen weergave van (tabs of ef-seg). */
.ef-ws{display:grid;grid-template-columns:minmax(0,1fr) var(--ws-rail);gap:20px;align-items:start;min-width:0}
.ef-ws-main{display:flex;flex-direction:column;gap:16px;min-width:0}
.ef-ws-rail{position:sticky;top:var(--space-4);display:flex;flex-direction:column;gap:16px;min-width:0;max-height:calc(100dvh - var(--space-8));margin:-3px;padding:3px;overflow-y:auto}
.ef-indent{display:inline-block;width:20px;height:1em;margin-right:2px;vertical-align:middle;border-left:1px solid var(--line-ctl);border-bottom:1px solid var(--line-ctl);border-bottom-left-radius:6px;transform:translateY(-3px)}
@media (max-width:1100px){
  .ef-ws{grid-template-columns:minmax(0,1fr)}
  .ef-ws-rail{position:static;max-height:none;overflow:visible}
}

/* Suggestiekaart van de Schrijfhulp: een voorstel dat de gebruiker overneemt of afwijst; er wordt nooit stil iets overschreven.
   ef-suggest--klaar is de kaart nadat er een keuze is gemaakt (een regel zonder knoppen). */
.ef-suggest{display:flex;flex-direction:column;gap:12px;padding:14px;border:1px solid var(--line-2);border-radius:var(--radius-md);background:var(--accent-bg);color:var(--ink);font:400 var(--fs-14)/1.5 var(--font-sans)}
.ef-suggest-hd{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ef-suggest-hd b{font:600 var(--fs-13)/1.3 var(--font-sans)}
.ef-suggest-tx{margin:0;padding:12px;border:1px solid var(--line-2);border-radius:var(--radius-sm);background:var(--surface);color:var(--ink);font:400 var(--fs-14)/1.55 var(--font-sans);white-space:pre-line}
.ef-suggest-ft{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ef-suggest-ft .ef-chars{margin-left:auto}
.ef-suggest-kost{font:400 var(--fs-13)/1.4 var(--font-sans);color:var(--ink-3)}
.ef-suggest--klaar{border-style:dashed;border-color:var(--line-ctl);background:transparent;color:var(--ink-2)}

/* Controlelijst: alleen-lezen controlepunten met een tweede regel en een toon (in orde, open). Geen invoer: een vinkje dat je niet
   kunt aanzetten is een uitgeschakeld vakje voor een schermlezer. De toon staat in het icoon (vinkje of driehoek), in de kleur en in de
   verborgen woorden "In orde:" en "Open:" (ef-checklist-st). */
.ef-checklist{display:flex;flex-direction:column;gap:12px;margin:0;padding:0;list-style:none}
.ef-checklist-item{display:grid;grid-template-columns:16px minmax(0,1fr);gap:8px;align-items:start;color:var(--ink);font:400 var(--fs-14)/1.4 var(--font-sans)}
.ef-checklist-ic{display:grid;place-items:center;width:16px;height:16px;margin-top:2px;color:var(--ok)}
.ef-checklist .ef-checklist-ic svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ef-checklist-item b{display:block;font-weight:500}
.ef-checklist-item small{display:block;margin-top:1px;font:400 var(--fs-13)/1.4 var(--font-sans);color:var(--ink-3)}
.ef-checklist-item--open>.ef-checklist-ic,.ef-checklist-item--open>:not(.ef-checklist-ic)>small{color:var(--warn)}
.ef-checklist-st{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Tikvlak van 44 px op de telefoon en in ef-ruim. Deze onderdelen staan in een balk of tegen elkaar, dus de zichtbare maat wordt 44 px
   (geen onzichtbare ::after die over de buren ligt); de tag is het enige onderdeel met een kleiner teken in een groter vlak. */
@media (max-width:700.98px){
  .ef-iconbtn,.ef-blk-grip{width:44px;height:44px}
  .ef-hd--werk .ef-hd-row{flex-direction:column;align-items:stretch;gap:12px}
  .ef-hd--werk .ef-hd-acts{flex-wrap:wrap}
  .ef-hd.ef-hd--werk input.ef-hd-titel{min-height:44px}
  .ef-tb .ef-input--sm{min-height:44px}
  .ef-taginput{gap:12px 6px;min-height:44px}
  .ef-tag{min-height:32px}
  .ef-tag button{position:relative;width:28px;height:28px}
  .ef-tag button::after{content:"";position:absolute;inset:-8px}
  .ef-suggest-ft .ef-btn{min-height:44px}
  .ef-media-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .ef-frame-bar{flex-wrap:wrap;gap:8px}
  .ef-frame-dots{display:none}
  .ef-frame-url{flex:1 1 100%;order:2}
  .ef-frame-bar .ef-seg{order:1;display:flex;width:100%}
  .ef-frame-bar .ef-seg button{flex:1}
}
.ef-ruim .ef-iconbtn,.ef-ruim .ef-blk-grip{width:44px;height:44px}
.ef-ruim .ef-hd.ef-hd--werk input.ef-hd-titel{min-height:44px}
.ef-ruim .ef-tb .ef-input--sm{min-height:44px}
.ef-ruim .ef-taginput{gap:12px 6px;min-height:44px}
.ef-ruim .ef-tag{min-height:32px}
.ef-ruim .ef-tag button{position:relative;width:28px;height:28px}
.ef-ruim .ef-tag button::after{content:"";position:absolute;inset:-8px}

/* Een onderdeel met display:flex, grid of inline-* blijft verborgen met het attribuut hidden (anders wint zijn eigen display). */
.ef-iconbtn[hidden],.ef-savestate[hidden],.ef-tb[hidden],.ef-blks[hidden],.ef-blk[hidden],.ef-blk-add[hidden],.ef-frame[hidden],.ef-actionbar[hidden],.ef-media-grid[hidden],.ef-media[hidden],.ef-serp[hidden],.ef-taginput[hidden],.ef-tag[hidden],.ef-ws[hidden],.ef-ws-rail[hidden],.ef-suggest[hidden],.ef-checklist[hidden],.ef-checklist-item[hidden]{display:none}

/* ===================================================================================================
   1.7.0 · Beeld-chrome van de 3D-viewer: iconenknop op beeld, modusbalk, pil en labels zonder bolletje, menu op beeld, filmstrook,
   icoonrail als zijbalkvorm voor werkruimtes, en de kleine gaten (chip uit, pil zonder bolletje, banner met twee acties).
   Alles op beeld is chrome (donker in beide thema's, gemeten boven wit en boven stage); een app zet de plek zelf (left/top/right/bottom),
   behalve de modusbalk. De regels van 1.6.0 gelden ook hier: een icoon-maat heeft twee klassen in zijn selector, tikvlakken van 44 px,
   en een onderdeel met display:flex of grid blijft verborgen met het attribuut hidden (onderaan deze sectie).
   =================================================================================================== */

/* Het vlak waarin chrome staat is een containervlak: de modusbalk en de HUD kijken naar de breedte van het BEELD, niet naar die van het scherm. */
.ef-beeld{container:ef-beeld/inline-size}

/* 1 · Iconenknop op beeld: ef-iconbtn ef-iconbtn--image, 44 px. Standaard secundair (chrome); gekozen (aria-pressed) of open (aria-expanded) en
   --primary zijn brand-blue met on-brand-blue. Het Vastleggen-icoon heeft een viewBox van 16 en krijgt ef-iconbtn-ic--lg (22 px). */
.ef-iconbtn.ef-iconbtn--image{width:44px;height:44px;border:1px solid var(--chrome-line);border-radius:var(--radius-md);background:var(--chrome);color:var(--chrome-ink);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.ef-iconbtn.ef-iconbtn--image:hover{background:var(--chrome);background-image:linear-gradient(var(--chrome-hover),var(--chrome-hover));color:var(--chrome-ink)}
.ef-iconbtn.ef-iconbtn--image:disabled,.ef-iconbtn.ef-iconbtn--image:disabled:hover{background:var(--chrome);background-image:none;color:var(--chrome-ink)}
.ef-iconbtn.ef-iconbtn--image[aria-pressed="true"],.ef-iconbtn.ef-iconbtn--image[aria-expanded="true"],.ef-iconbtn.ef-iconbtn--image.ef-iconbtn--primary{border-color:transparent;background:var(--brand-blue);background-image:none;color:var(--on-brand-blue)}
.ef-iconbtn--image.ef-iconbtn svg{width:20px;height:20px;stroke-width:1.8}
.ef-iconbtn--image.ef-iconbtn svg.ef-iconbtn-ic--lg{width:22px;height:22px}
/* de tweede knop op beeld: transparant met een chrome-rand (de tekenkaart, "Annuleren") */
.ef-btn--image-secondary{background:transparent;color:var(--chrome-ink);border-color:var(--chrome-line)}
.ef-btn--image-secondary:hover{background-image:linear-gradient(var(--chrome-hover),var(--chrome-hover))}

/* 2 · Modusbalk: ef-dock ef-dock--bar, boven in het midden van het beeld. Knoppen met icoon en tekst (ef-dock-t), de gekozen is chrome-selected.
   Op een smal BEELD (ef-beeld ≤ 820 px) en met ef-dock--icons blijft alleen het icoon staan (de tekst blijft voor een schermlezer);
   op de telefoon (≤ 700 px) staat de balk onderin het beeld, alleen met iconen. */
.ef-dock.ef-dock--bar{left:50%;right:auto;top:16px;bottom:auto;max-width:calc(100% - 32px);transform:translateX(-50%);gap:4px;padding:4px;border-radius:var(--radius-lg);background:var(--chrome);border:1px solid var(--chrome-line);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.ef-dock.ef-dock--bar button{position:relative;gap:8px;min-height:44px;padding:0 14px 0 12px;border-radius:var(--radius-md);color:var(--chrome-ink-2);font:500 var(--fs-14)/1 var(--font-sans);white-space:nowrap}
.ef-dock.ef-dock--bar button:hover{background:var(--chrome-hover);color:var(--chrome-ink)}
.ef-dock.ef-dock--bar button[aria-pressed="true"]{background:var(--chrome-selected);color:var(--chrome-ink)}
.ef-dock.ef-dock--bar button svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ef-dock--icons .ef-dock-t{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.ef-dock.ef-dock--icons button{min-width:44px;padding:0 12px}
@container ef-beeld (max-width:820px){
  .ef-dock--bar .ef-dock-t{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .ef-dock.ef-dock--bar button{min-width:44px;padding:0 12px}
}
@media (max-width:700.98px){
  .ef-dock.ef-dock--bar{top:auto;bottom:16px}
  .ef-dock--bar .ef-dock-t{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .ef-dock.ef-dock--bar button{min-width:44px;padding:0 12px}
}

/* 3 · Pil en labels op beeld, zonder bolletje. De pil is een ef-pill met ef-pill--image (13 px, icoon van 16 px, een tweede tekst in small);
   ef-pill--wrap laat een hint over twee regels lopen. De HUD, het meetlabel en de infokaart zijn een eigen klein vlak. Het meetlabel en de HUD staan
   op de dichtere chrome-strong (.94), omdat ze direct op het beeld lezen; de bediening blijft op chrome (.88). */
.ef-pill.ef-pill--image{gap:8px;padding:7px 14px;border:1px solid var(--chrome-line);background:var(--chrome);color:var(--chrome-ink);font:500 var(--fs-13)/1.2 var(--font-sans);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.ef-pill.ef-pill--image::before{display:none}
.ef-pill--image small{color:var(--chrome-ink-2);font:400 var(--fs-13) var(--font-sans)}
.ef-pill.ef-pill--image svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ef-pill.ef-pill--image.ef-pill--wrap{max-width:min(720px,100%);justify-content:center;border-radius:var(--radius-xl);text-align:center;white-space:normal}
.ef-hud{padding:8px 12px;border:1px solid var(--chrome-line);border-radius:var(--radius-md);background:var(--chrome-strong);color:var(--chrome-ink-2);font:400 var(--fs-12)/1.5 var(--font-sans);font-variant-numeric:tabular-nums;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.ef-hud b{color:var(--chrome-ink);font-weight:500}
@container ef-beeld (max-width:820px){.ef-hud{display:none}}
.ef-lab{display:inline-block;padding:3px 8px;border:1px solid var(--chrome-line);border-radius:var(--radius-sm);background:var(--chrome-strong);color:var(--chrome-ink);font:500 var(--fs-12)/1.3 var(--font-sans);font-variant-numeric:tabular-nums;white-space:nowrap}
.ef-lab--anker{position:absolute;left:var(--lab-x,0);top:var(--lab-y,0);transform:translate(-50%,-50%)}
.ef-infocard{display:grid;gap:1px;padding:8px 12px;border:1px solid var(--chrome-line);border-radius:var(--radius-md);background:var(--chrome);color:var(--chrome-ink);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.ef-infocard b{font:600 var(--fs-13)/1.3 var(--font-sans)}
.ef-infocard span{font:400 var(--fs-12)/1.3 var(--font-sans);color:var(--chrome-ink-2)}
.ef-infocard small{font:400 11px/1.3 var(--font-sans);color:var(--chrome-ink-3)}
.ef-drawcard{display:flex;align-items:center;gap:12px;padding:8px 8px 8px 14px;border:1px solid var(--chrome-line);border-radius:var(--radius-lg);background:var(--chrome);color:var(--chrome-ink);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.ef-drawcard-t{display:flex;align-items:center;gap:10px;min-width:0}
.ef-drawcard-t b{display:block;font:600 var(--fs-14)/1.2 var(--font-sans)}
.ef-drawcard-t small{display:block;font:400 var(--fs-12)/1.3 var(--font-sans);color:var(--chrome-ink-2)}
.ef-drawcard-val{font:600 var(--fs-14)/1.2 var(--font-sans);font-variant-numeric:tabular-nums;white-space:nowrap}
.ef-drawcard-acts{display:flex;gap:8px}
.ef-drawcard .ef-btn{min-height:44px}
.ef-drawcard kbd{margin-left:6px;font:400 11px var(--font-sans);color:inherit}
.ef-drawcard--fout{border-color:var(--crit);box-shadow:0 0 0 1px var(--crit)}
@media (max-width:700.98px){
  .ef-drawcard{flex-wrap:wrap;justify-content:space-between;gap:10px;padding:10px 10px 10px 14px}
  .ef-drawcard-acts{flex:1 1 100%}
  .ef-drawcard-acts .ef-btn{flex:1}
}

/* 4 · Menu op beeld: ef-menu ef-menu--image, donker in beide thema's, voor een lijst met items (Vastleggen) of voor secties met keuzerondjes
   (ef-radio), schakelaars (ef-switch), een schuifregelaar (ef-menu-range) en een waarschuwingsregel (ef-menu-warn). ef-menu--cols zet twee
   kolommen (ef-menu-kol) naast elkaar op een computer. De schakelaar is er 38 × 22 px (zoals ef-switch); uit is een omlijnde schakelaar
   (rand chrome-ink-2, 3:1), aan is brand-blue. */
.ef-menu.ef-menu--image{border-color:var(--chrome-line);border-radius:var(--radius-lg);background:var(--chrome);color:var(--chrome-ink);color-scheme:dark;box-shadow:var(--shadow-pop);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.ef-menu--image .ef-menu-hd{color:var(--chrome-ink-2)}
.ef-menu--image .ef-menu-item{min-height:44px;color:var(--chrome-ink)}
.ef-menu--image .ef-menu-item:hover{background:var(--chrome-hover)}
.ef-menu--image .ef-menu-item.is-on{background:var(--chrome-selected);color:var(--chrome-ink)}
.ef-menu--image .ef-menu-item svg{stroke:var(--chrome-ink-2)}
.ef-menu--image .ef-menu-item.is-on svg{stroke:var(--chrome-ink)}
.ef-menu--image .ef-menu-item small{display:block;font:400 var(--fs-12)/1.3 var(--font-sans);color:var(--chrome-ink-2)}
.ef-menu--image .ef-menu-sep{background:var(--chrome-line)}
.ef-menu--image .ef-menu-sec{display:flex;flex-direction:column;gap:2px;padding:10px 10px 12px}
.ef-menu--image .ef-menu-sec+.ef-menu-sec{border-top:1px solid var(--chrome-line)}
.ef-menu--image .ef-menu-sec .ef-menu-hd{margin:0 0 4px;padding:0}
.ef-menu--image .ef-radio{align-items:flex-start;gap:12px;min-height:44px;padding:5px 0;color:var(--chrome-ink)}
.ef-menu--image .ef-radio input{margin-top:1px;border-color:var(--chrome-ink-2);background:transparent}
.ef-menu--image .ef-radio input:checked{border-color:var(--brand-blue);background:var(--brand-blue)}
.ef-menu--image .ef-radio input:checked::after{background:var(--on-brand-blue)}
.ef-menu--image .ef-radio b{display:block;font:500 var(--fs-14)/1.3 var(--font-sans)}
.ef-menu--image .ef-radio small{display:block;margin-top:1px;font:400 var(--fs-12)/1.4 var(--font-sans);color:var(--chrome-ink-2)}
.ef-menu--image .ef-radio:has(input:disabled),.ef-menu--image .ef-radio:has(input:disabled) small{color:var(--chrome-ink-3)}
.ef-menu--image .ef-switch{display:flex;gap:12px;min-height:44px;color:var(--chrome-ink);font:500 var(--fs-14)/1.3 var(--font-sans)}
.ef-menu--image .ef-switch input{flex:none;background:transparent;box-shadow:inset 0 0 0 1.5px var(--chrome-ink-2)}
.ef-menu--image .ef-switch input::after{background:var(--chrome-ink-2)}
.ef-menu--image .ef-switch input:checked,.ef-menu--image .ef-switch input:indeterminate{background:var(--brand-blue);box-shadow:none}
.ef-menu--image .ef-switch input:checked::after{background:var(--on-brand-blue)}
.ef-menu--image .ef-switch input:indeterminate::after{transform:translateX(8px);background:var(--on-brand-blue)}
.ef-menu-range{display:flex;align-items:center;gap:12px;min-height:44px;color:var(--chrome-ink);font:400 var(--fs-13) var(--font-sans)}
.ef-menu-range input{flex:1 1 auto;min-width:60px;height:24px;margin:0;accent-color:var(--brand-blue)}
.ef-menu-val{flex:none;margin-left:auto;font:400 var(--fs-12) var(--font-sans);font-variant-numeric:tabular-nums;color:var(--chrome-ink-2)}
.ef-menu-noot{margin:4px 0 0;font:400 var(--fs-12)/1.4 var(--font-sans);color:var(--chrome-ink-2)}
.ef-menu-warn{display:flex;align-items:flex-start;gap:8px;margin:8px 0 0;padding:8px 10px;border-radius:var(--radius-sm);background:color-mix(in srgb,var(--viz-warn) 22%,transparent);color:var(--chrome-ink);font:400 var(--fs-12)/1.4 var(--font-sans)}
.ef-menu-warn.ef-menu-warn svg{width:16px;height:16px;flex:none;margin-top:1px;fill:none;stroke:var(--viz-warn);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ef-menu--cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px;padding:6px 16px}
.ef-menu-kol{display:flex;flex-direction:column;min-width:0}
.ef-menu--cols .ef-menu-kol+.ef-menu-kol{padding-left:28px;margin-left:-14px;border-left:1px solid var(--chrome-line)}
@media (max-width:700.98px){
  .ef-menu--cols{grid-template-columns:minmax(0,1fr);padding:6px}
  .ef-menu--cols .ef-menu-kol+.ef-menu-kol{padding-left:0;margin-left:0;border-left:0}
}
/* de filmstrook met foto's op beeld: een rij miniaturen met de hoek eronder; de gekozen foto (aria-pressed) heeft een ring */
.ef-film{display:flex;gap:8px;padding:6px;border:1px solid var(--chrome-line);border-radius:var(--radius-md);background:var(--chrome);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.ef-film button{display:grid;gap:2px;width:64px;min-height:44px;padding:0;border:0;background:none;color:var(--chrome-ink-2);font:500 11px/1.3 var(--font-sans);text-align:center;cursor:pointer}
.ef-film button img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:6px}
.ef-film button:hover,.ef-film button[aria-pressed="true"]{color:var(--chrome-ink)}
.ef-film button[aria-pressed="true"] img{box-shadow:0 0 0 2px var(--chrome-ink)}

/* 5 · Icoonrail als zijbalkvorm voor werkruimtes: ef-app ef-app--rail. Een rail van --rail-werk (72 px) naast het paneel; de gewone zijbalk
   (ef-side) klapt eroverheen uit met de Menu-knop (is-open op ef-side, een ef-scrim als direct kind van ef-app, zoals de lade van AppShell).
   Onder 700 px is er geen rail: daar staan de bovenbalk (ef-topbar) en dezelfde lade als in AppShell. */
.ef-rail{display:none}
.ef-app--rail>.ef-side{position:fixed;left:0;top:0;bottom:0;z-index:var(--z-drawer,40);height:auto;width:min(var(--sidebar-portal),88vw);overflow:hidden;visibility:hidden;transform:translateX(-100%);box-shadow:var(--shadow-pop);transition:transform .2s ease,visibility 0s linear .2s}
.ef-app--rail>.ef-side.is-open{visibility:visible;transform:none;transition:transform .2s ease}
.ef-app--rail>.ef-scrim{z-index:calc(var(--z-drawer,40) - 1)}
@media (min-width:701px){
  .ef-app.ef-app--rail{grid-template-columns:var(--rail-werk) minmax(0,1fr)}
  .ef-app--rail>.ef-topbar{display:none}
  .ef-app--rail>.ef-main{margin:8px 8px 8px 0;border:1px solid var(--line);border-radius:var(--radius-lg)}
  .ef-rail{display:flex;flex-direction:column;align-items:center;gap:6px;position:sticky;top:0;height:100vh;height:100dvh;min-height:0;padding:14px 0;background:var(--canvas)}
}
@media (prefers-reduced-motion:reduce){.ef-app--rail>.ef-side{transition:none}}
.ef-rail-menu{display:grid;justify-items:center;align-content:center;width:44px;height:52px;margin-bottom:8px;padding:0;border:0;border-radius:var(--radius-md);background:transparent;box-shadow:inset 0 0 0 1px var(--line-2);color:var(--ink-2);cursor:pointer}
.ef-rail-menu:hover{background:var(--sunken);color:var(--ink)}
.ef-rail-menu span{margin-top:3px;font:500 11px/1 var(--font-sans)}
.ef-rail .ef-rail-menu svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* 1.8.0: het merkteken staat bovenaan de rail en de knop Menu eronder (de volgorde in de DOM is de bron, zie AppShell); het merk heeft een klikvlak van 44 px (::after) */
.ef-rail-logo{position:relative;display:grid;place-items:center;margin-bottom:8px}
.ef-rail-logo::after{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%)}
.ef-rail-logo img{width:36px;height:auto}
.ef-rail-item{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:var(--radius-md);background:transparent;color:var(--ink-2);text-decoration:none;cursor:pointer}
.ef-rail-item:hover{background:var(--sunken);color:var(--ink)}
.ef-rail-item[aria-current="page"]{background:var(--sunken);box-shadow:inset 0 0 0 1px var(--line-2);color:var(--ink)}
.ef-rail .ef-rail-item svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ef-rail-foot{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:auto}
/* de uitgeklapte zijbalk: kop met sluitknop, zoekveld, scrollende projectenlijst met miniatuur (ef-nav-item--project) en een voet die blijft staan */
.ef-side-hd{display:flex;align-items:center;justify-content:space-between;padding-right:4px}
.ef-side-search{padding:4px 4px 6px}
.ef-side-search .ef-search{width:100%;min-width:0}
.ef-side-list{flex:1 1 auto;min-height:0;overflow:auto}
.ef-side-empty{margin:8px 12px;font:400 var(--fs-13) var(--font-sans);color:var(--ink-3)}
.ef-app--rail .ef-nav-grp .ef-nav-count{margin-left:4px;font:500 var(--fs-12) var(--font-sans)}

/* 7 · De kleine gaten (V10): een chip die uit staat, een pil zonder bolletje, en een banner met twee acties en een codezin */
.ef-chip:disabled,.ef-chip[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
.ef-chip:disabled:hover,.ef-chip[aria-disabled="true"]:hover{color:var(--ink-2);border-color:var(--line-ctl)}
.ef-chip[aria-pressed="true"]:disabled:hover{color:var(--accent);border-color:var(--accent)}
.ef-pill--plain::before{display:none}
.ef-banner-tx{flex:1;min-width:0}
.ef-banner-code{display:block;margin-top:6px;font:400 var(--fs-13)/1.4 var(--font-sans);color:var(--ink-2);overflow-wrap:anywhere}
.ef-banner-acts{display:flex;flex-wrap:wrap;gap:8px;flex:none;margin-left:auto}
.ef-banner .ef-banner-acts .ef-btn{margin-left:0}
@media (max-width:700.98px){
  .ef-banner-acts{flex:1 1 100%;padding-left:30px}
  .ef-banner-acts .ef-btn{min-height:44px}
}

/* De focusring op beeld (onderaan de sectie, zodat hij na de regels van schakelaar en knop komt en hun box-shadow niet wint): brand-blue met een donkere rand ertussen, zodat hij ook boven een lichte foto zichtbaar blijft (de gewone ring is accent, in licht #006c9c). */
.ef-iconbtn.ef-iconbtn--image:focus-visible,.ef-btn.ef-btn--image:focus-visible,.ef-btn.ef-btn--image-secondary:focus-visible,.ef-dock.ef-dock--bar button:focus-visible,.ef-film button:focus-visible,.ef-drawcard button:focus-visible,.ef-menu.ef-menu--image button:focus-visible,.ef-menu--image .ef-radio input:focus-visible,.ef-menu--image .ef-switch input:focus-visible,.ef-menu--image input[type="range"]:focus-visible{outline:2px solid var(--brand-blue);outline-offset:2px;box-shadow:0 0 0 2px var(--stage)}
.ef-menu.ef-menu--image .ef-menu-item:focus-visible{outline:2px solid var(--brand-blue);outline-offset:-2px;box-shadow:none}

/* Een onderdeel met display:flex, grid of inline-* blijft verborgen met het attribuut hidden (1.7.0). */
.ef-dock--bar[hidden],.ef-pill--image[hidden],.ef-hud[hidden],.ef-lab[hidden],.ef-infocard[hidden],.ef-drawcard[hidden],.ef-film[hidden],.ef-menu--image[hidden],.ef-rail[hidden],.ef-rail-menu[hidden],.ef-rail-item[hidden],.ef-rail-foot[hidden],.ef-banner-acts[hidden]{display:none}

/* ===================================================================================================
   1.8.0 · deel 1: de voorstellen van portaal en cockpit die Remco op 18-10-2026 goedkeurde. Een melding over een beeld, de rail met het merk boven en
   een voortgangsring, de controlelijst met vier toestanden, het accountmenu (kopregel, bediening, blad op de telefoon), de installatiebanner, tabs
   als knoppen, beschikbaarheid (ef-avail), twee pilvarianten, uitbreidingen van paneel, tabel en mediategel, een rijstreep en een veld met een eenheid.
   De regels van 1.6.0 gelden ook hier: een icoon-maat heeft twee klassen in zijn selector, tikvlakken van 44 px, en een onderdeel met display:flex
   of grid blijft verborgen met het attribuut hidden (onderaan deze sectie).
   =================================================================================================== */

.ef-beeldmelding,.ef-install,.ef-unit,.ef-avail,.ef-avail-balk,.ef-pdf,.ef-menu-wie{box-sizing:border-box}

/* 1 · Een blijvende melding over een beeld (besluit A): een fout bij een beeld dat de gebruiker blijft bekijken (3D, kaart, foto). Geen venster dat
   het beeld blokkeert en geen toast die na seconden weg is: een gewone ef-banner in een donkere deelboom (data-theme="dark" op ef-beeldmelding) op
   surface met schaduw, met titel, tekst, acties en altijd Sluiten. --stop (wat je deed lukt niet) staat in het midden onder de modusbalk,
   --neven (het beeld werkt, iets ernaast niet) op de plek van een toast linksonder; meerdere nevenmeldingen in ef-beeldmelding-stapel.
   Op de telefoon staat de modusbalk onderin: de stop-melding gaat dan bovenin (16 px) en de nevenmelding boven de balk (84 px). */
.ef-beeldmelding{position:absolute;z-index:2;border-radius:var(--radius-md);background:var(--surface);color:var(--ink);box-shadow:var(--shadow-pop)}
.ef-beeldmelding--stop{left:50%;top:var(--beeldmelding-top,76px);width:calc(100% - 40px);max-width:360px;transform:translateX(-50%)}
.ef-beeldmelding--neven{left:12px;bottom:var(--beeldmelding-onder,12px);width:calc(100% - 24px);max-width:330px}
.ef-beeldmelding .ef-banner{padding:10px 12px}
.ef-beeldmelding--neven .ef-banner{align-items:center;padding:8px 8px 8px 12px;font-size:var(--fs-13)}
.ef-banner-tx>.ef-banner-acts{margin:8px 0 0;padding-left:0}
.ef-beeldmelding-stapel{position:absolute;left:12px;bottom:var(--beeldmelding-onder,12px);z-index:2;display:flex;flex-direction:column;gap:8px;width:calc(100% - 24px);max-width:330px}
.ef-beeldmelding-stapel>.ef-beeldmelding{position:relative;left:auto;bottom:auto;width:auto;max-width:none}
/* 1.13.0 (Dataportaal, voorstel 4): meer dan één stop-melding tegelijk. De kolom is een laag over het beeld die de meldingen onder elkaar zet (8 px ertussen) en zelf scrolt als ze niet passen;
   alleen de meldingen vangen een klik (de rest van de laag laat het beeld door). Een melding in de kolom staat in de stroom en niet absoluut. De opvulling (8 px boven, 16 px opzij en onderin) is voor de schaduw,
   die de scrollende laag anders afknipt (de schuifbalk is weg: hij zou 15 px van de breedte van de meldingen vreten en door pointer-events:none niet te bedienen zijn; scrollen gaat met het wiel, het aanraken en het toetsenbord);
   de eerste melding staat daardoor precies op --beeldmelding-top. De bovenrand is instelbaar met --beeldmelding-top (standaard 76 px: onder de modusbalk; op de telefoon 16 px)
   en de ruimte onderin met --beeldmelding-onder (standaard 12 px; op de telefoon 84 px, boven de modusbalk). Een app met een hogere balk zet de eigenschap op het beeld of op de melding. */
.ef-beeldmelding-kolom{position:absolute;left:50%;top:calc(var(--beeldmelding-top,76px) - 8px);z-index:2;box-sizing:border-box;display:flex;flex-direction:column;gap:8px;width:calc(100% - 8px);max-width:392px;max-height:calc(100% - var(--beeldmelding-top,76px) + 8px - var(--beeldmelding-onder,12px));padding:8px 16px 16px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;transform:translateX(-50%);pointer-events:none}
.ef-beeldmelding-kolom>.ef-beeldmelding{position:relative;left:auto;top:auto;flex:none;width:auto;max-width:none;transform:none;pointer-events:auto}
@media (max-width:700.98px){
  .ef-beeldmelding--stop{top:var(--beeldmelding-top,16px)}
  .ef-beeldmelding-kolom{top:calc(var(--beeldmelding-top,16px) - 8px);max-height:calc(100% - var(--beeldmelding-top,16px) + 8px - var(--beeldmelding-onder,84px))}
  .ef-beeldmelding--neven,.ef-beeldmelding-stapel{bottom:var(--beeldmelding-onder,84px)}
  .ef-beeldmelding .ef-btn{min-height:44px}
  /* 1.13.0 (voorstel 5): een nevenmelding blijft op een smal beeld een rij, de tekst links en de knoppen rechts: een beeld van een telefoon is een strook van ± 270 px en een melding met Sluiten eronder (44 px) liet anderhalve melding zien.
     De compacte stapel (+N, Minder, hoogstens drie regels) is gedrag van de app en staat in ImageDock.md. */
  .ef-beeldmelding--neven .ef-banner{flex-wrap:nowrap}
  .ef-beeldmelding--neven .ef-banner-acts{flex:none;padding-left:0}
}

/* 2 · De voortgangsring in de railvoet: een ef-rail-item (44 px) met een ef-ring--sm, in een ef-rail-ring met role="status" en eronder "en N andere".
   Een ring mag een teken dragen in plaats van een getal (bezig, gepauzeerd, klaar, fout); het teken neemt de toon van de ring. */
.ef-ring.ef-ring b svg{display:block;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ef-ring.ef-ring svg{color:var(--ok)}
.ef-ring--warn.ef-ring svg{color:var(--warn)}
.ef-ring--crit.ef-ring svg{color:var(--crit)}
.ef-ring--info.ef-ring svg{color:var(--accent)}
/* 1.13.0: de boog van een gepauzeerde ring is ink-3 en niet viz-muted: viz-muted haalt de 3:1 voor een grafisch onderdeel (WCAG 1.4.11) niet (licht 1,79:1, donker 2,22:1); ink-3 haalt 5,4:1 en 7,5:1 op canvas.
   viz-muted zelf blijft: het is de kleur van een inactief segment en van ef-post--1, geen boog die een toestand draagt. controle.py (controle m) bewaakt de vijf ringkleuren. */
.ef-ring--muted{--c:var(--ink-3)}
.ef-ring--muted.ef-ring svg{color:var(--ink-2)}
.ef-rail-ring{display:flex;flex-direction:column;align-items:center;gap:2px}
.ef-rail-ring .ef-rail-item{color:var(--ink)}
.ef-rail-ring-t{font:400 var(--fs-12)/1.2 var(--font-sans);color:var(--ink-2);text-align:center}

/* 3 · Controlelijst met vier toestanden en info: wacht (rondje, ink-3), bezig (pijl, accent), klaar = --ok (vinkje), mislukt (kruis, crit) en info
   (i, accent). Een koprij (ef-checklist-hd), een voortgangsbalk in de rij (ef-prog) en een knop per rij (een ef-btn als laatste kind: derde kolom). */
.ef-checklist-hd{display:flex;justify-content:space-between;gap:8px;margin:0 0 10px;font:400 var(--fs-12)/1.4 var(--font-sans);color:var(--ink-2)}
.ef-checklist-hd b{font-weight:600;color:var(--ink)}
.ef-checklist-item:has(>.ef-btn){grid-template-columns:16px minmax(0,1fr) auto}
.ef-checklist-item>.ef-btn{align-self:center}
/* 1.13.0 (voorstel 8): een duur of tijd rechts in de rij ("al 3 min", "1 min"), als kind van de rij na de tekst. Met een knop erbij is de tijd de derde en de knop de vierde kolom. */
.ef-checklist-item:has(>.ef-checklist-tijd){grid-template-columns:16px minmax(0,1fr) auto}
.ef-checklist-item:has(>.ef-checklist-tijd):has(>.ef-btn){grid-template-columns:16px minmax(0,1fr) auto auto}
.ef-checklist-tijd{align-self:start;padding-top:1px;font:400 var(--fs-13)/1.4 var(--font-sans);font-variant-numeric:tabular-nums;color:var(--ink-3);white-space:nowrap}
/* 1.13.0 (voorstel 8): de toon van een teken werkt op het icoon van de EIGEN rij (kind), niet op elke afstammeling: een bezige ouder kleurt het teken van een rij in zijn sublijst niet meer (de tonen van open, bezig, info, mislukt en wacht). */
.ef-checklist-item--bezig>.ef-checklist-ic,.ef-checklist-item--info>.ef-checklist-ic{color:var(--accent)}
.ef-checklist-item--mislukt>.ef-checklist-ic{color:var(--crit)}
.ef-checklist-item--wacht>.ef-checklist-ic{color:var(--ink-3)}
.ef-checklist-item--wacht b{font-weight:400;color:var(--ink-2)}
.ef-checklist-item .ef-prog{margin-top:5px}

/* 4 · Het accountmenu: een kopregel met avatar, naam en e-mail (ef-menu-wie) en een bediening over de volle breedte (ef-menu-ctl, de themakeuze als
   ef-seg). Op de telefoon (≤ 700 px) is ef-menu--sheet een blad onderin met greep, sluitknop (ef-menu-x), rijen van 46 px en de veilige zone. */
.ef-menu-wie{display:flex;align-items:center;gap:10px;min-width:0;padding:8px 10px 10px}
.ef-menu-wie>div{flex:1;min-width:0}
.ef-menu-wie b{display:block;overflow:hidden;font:600 var(--fs-14)/1.3 var(--font-sans);text-overflow:ellipsis;white-space:nowrap}
.ef-menu-wie small{display:block;overflow:hidden;font-size:var(--fs-12);color:var(--ink-3);text-overflow:ellipsis;white-space:nowrap}
.ef-menu-x{display:none}
.ef-menu-ctl{padding:2px 10px 8px}
.ef-menu-ctl .ef-seg{display:flex}
.ef-menu-ctl .ef-seg button{display:inline-flex;flex:1 1 0;align-items:center;justify-content:center;gap:6px;min-width:0;padding:5px 6px}
.ef-menu-ctl .ef-seg button svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ef-scrim--menu{z-index:calc(var(--z-drawer,40) - 1)}
@media (min-width:701px){.ef-scrim--menu{display:none}}
@media (max-width:700.98px){
  .ef-menu.ef-menu--sheet{position:fixed;left:0;right:0;top:auto;bottom:0;z-index:var(--z-drawer,40);width:auto;min-width:0;max-width:none;max-height:92dvh;overflow-y:auto;gap:0;padding:0 0 max(12px,env(safe-area-inset-bottom,0px));border-width:1px 0 0;border-radius:var(--radius-xl) var(--radius-xl) 0 0}
  .ef-menu--sheet::before{content:"";flex:none;width:36px;height:5px;margin:8px auto 2px;border-radius:3px;background:var(--line-ctl)}
  .ef-menu--sheet .ef-menu-wie{padding:6px 6px 8px 16px}
  .ef-menu--sheet .ef-menu-x{display:inline-grid;width:44px;height:44px}
  .ef-menu--sheet .ef-menu-sep{margin:4px 16px}
  .ef-menu--sheet .ef-menu-hd{padding:10px 16px 6px;letter-spacing:0;text-transform:none}
  .ef-menu--sheet .ef-menu-ctl{padding:0 16px 10px}
  .ef-menu--sheet .ef-menu-ctl .ef-seg button{flex-direction:column;gap:2px;min-height:48px;padding:4px;font-size:var(--fs-12)}
  .ef-menu--sheet>.ef-menu-item{min-height:46px;margin:0 8px}
}

/* 5 · De installatiebanner: vast rechtsonder (hoogstens 720 px breed), op de telefoon over de breedte boven de tabbalk, met knoppen van 44 px.
   Een dicht vlak (raised) met schaduw en de verloopstreep bovenin. De uitzondering op "een banner staat bovenaan het blok" (Banner). */
.ef-install{position:fixed;right:16px;bottom:16px;z-index:var(--z-bar,5);width:min(720px,calc(100% - 32px));overflow:hidden;border:1px solid var(--float-line);border-radius:var(--radius-md);background:var(--raised);color:var(--ink);box-shadow:var(--float-shadow)}
.ef-install::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,var(--brand-blue),var(--brand-purple-line))}
.ef-install-hd{display:flex;align-items:flex-start;gap:12px;padding:12px 10px 8px 12px}
.ef-install-ic{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:10px;background:var(--sunken);box-shadow:inset 0 0 0 1px var(--line-2)}
.ef-install .ef-install-ic :is(img,svg){display:block;width:26px;height:auto}
.ef-install-tx{flex:1;min-width:0}
.ef-install-tx>b{display:block;font:600 var(--fs-14)/1.3 var(--font-sans)}
.ef-install-tx>span{display:block;margin-top:2px;font:400 var(--fs-13)/1.4 var(--font-sans);color:var(--ink-2)}
.ef-install-hd .ef-iconbtn{margin:-2px -2px 0 0}
.ef-install-acts{display:flex;justify-content:flex-end;gap:8px;padding:0 12px 12px}
@media (max-width:700.98px){
  .ef-install{left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom,0px));width:auto}
  :root:has(.ef-tabbar:not([hidden])) .ef-install{bottom:calc(var(--tabbar-h,44px) + 1px + 8px + env(safe-area-inset-bottom,0px))}
  .ef-install-hd{padding:12px}
  .ef-install-hd .ef-iconbtn{margin:-8px -8px 0 0}
  .ef-install-acts{flex-direction:row-reverse}
  .ef-install-acts .ef-btn{flex:1;min-height:44px}
  .ef-install-acts .ef-btn--ghost{border-color:var(--line-ctl);background:var(--surface);color:var(--ink)}
}

/* 6 · Tabs als knoppen: wisselen binnen een paneel (button role="tab" met aria-selected in een ef-tabs role="tablist"), dezelfde onderstreping als de
   tabs als links (a aria-current, voor navigatie). 44 px hoog; de teller is een pil (accent als de tab gekozen is). */
.ef-tabs[role="tablist"]{gap:20px}
.ef-tabs button[role="tab"]{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 2px;border:0;background:none;color:var(--ink-3);font:500 var(--fs-14) var(--font-sans);cursor:pointer}
.ef-tabs button[role="tab"]:hover{color:var(--ink)}
.ef-tabs button[role="tab"][aria-selected="true"]{color:var(--ink);font-weight:600}
.ef-tabs button[role="tab"][aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--brand-blue),var(--brand-purple-line))}
.ef-tabs button[role="tab"]:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:var(--radius-sm)}
.ef-tabs button[role="tab"] .ef-count{display:inline-grid;place-items:center;min-width:20px;height:18px;margin-left:6px;padding:0 6px;border-radius:var(--radius-pill);background:var(--sunken);box-shadow:inset 0 0 0 1px var(--line-2);color:var(--ink-2);font:600 11px/1 var(--font-sans);font-variant-numeric:tabular-nums}
.ef-tabs button[role="tab"][aria-selected="true"] .ef-count{background:var(--accent-bg);box-shadow:none;color:var(--accent)}

/* 7 · Beschikbaarheid (ef-avail): een dagtegel (dag, statusteken, korte opmerking; met een waarde en een statustekst in het weekraster), een weekbalk
   (ef-avail-balk met zeven dagbalkjes in ef-avail-strook) en een legenda (ef-avail-leg), met dezelfde standen: --ok (beschikbaar), --deels, --niet
   (arcering: geen rood), --verlof, --aangevraagd (gestippeld) en leeg (zonder stand). Een stand zet alleen eigen eigenschappen (--av-*). */
.ef-avail--ok{--av-bg:var(--ok-bg);--av-rand:color-mix(in srgb,var(--ok) 40%,transparent);--av-c:var(--ok)}
.ef-avail--deels{--av-bg:var(--warn-bg);--av-rand:color-mix(in srgb,var(--warn) 40%,transparent);--av-c:var(--warn)}
.ef-avail--niet{--av-bg:repeating-linear-gradient(45deg,color-mix(in srgb,var(--warn) 14%,transparent) 0 6px,color-mix(in srgb,var(--warn) 3%,transparent) 6px 12px);--av-rand:color-mix(in srgb,var(--warn) 40%,transparent);--av-c:var(--warn)}
.ef-avail--verlof{--av-bg:var(--accent-bg);--av-rand:color-mix(in srgb,var(--accent) 40%,transparent);--av-c:var(--accent)}
.ef-avail--aangevraagd{--av-bg:transparent;--av-rand:color-mix(in srgb,var(--accent) 55%,transparent);--av-c:var(--accent);--av-stijl:dashed}
.ef-avail{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;padding:8px 2px;border:1px var(--av-stijl,solid) var(--av-rand,var(--line-2));border-radius:var(--radius-sm);background:var(--av-bg,transparent);color:var(--av-c,var(--ink-3));font:inherit;text-align:center}
button.ef-avail,a.ef-avail{cursor:pointer;text-decoration:none}
.ef-avail:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ef-avail[aria-pressed="true"],.ef-avail.is-sel{box-shadow:0 0 0 2px var(--accent)}
.ef-avail.is-today{border-color:var(--accent)}
.ef-avail-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.ef-avail-d{font:500 var(--fs-12) var(--font-sans);color:var(--ink-2)}
.ef-avail-ic{display:grid;place-items:center;height:14px;font-size:var(--fs-14);line-height:1}
.ef-avail .ef-avail-ic svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ef-avail-note{display:flex;align-items:center;gap:3px;max-width:100%;overflow:hidden;font-size:11px;color:var(--ink-2);white-space:nowrap}
.ef-avail-note.ef-avail-note svg{width:10px;height:10px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ef-avail b{font:600 var(--fs-16) var(--font-sans);color:var(--ink);font-variant-numeric:tabular-nums}
.ef-avail small{font-size:11px;color:var(--ink-3)}
.ef-avail-balk{display:flex;align-items:center;gap:10px;min-height:40px;padding:8px 12px;border:1px solid var(--line-2);border-radius:var(--radius-md);background:var(--sunken);color:var(--ink);text-decoration:none}
a.ef-avail-balk:hover{border-color:var(--line-ctl)}
a.ef-avail-balk:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ef-avail-wk{flex:0 0 46px;font:600 var(--fs-13) var(--font-sans)}
.ef-avail-strook{display:flex;flex:1;gap:3px;min-width:0}
.ef-avail-strook>i{flex:1;height:16px;border:1px var(--av-stijl,solid) var(--av-rand,var(--line-2));border-radius:var(--radius-sm);background:var(--av-bg,transparent)}
.ef-avail-leg{display:flex;flex-wrap:wrap;gap:6px 12px}
.ef-avail-leg span{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-12);color:var(--ink-2)}
.ef-avail-leg i{flex:none;width:14px;height:14px;border:1px var(--av-stijl,solid) var(--av-rand,var(--line-2));border-radius:4px;background:var(--av-bg,transparent)}

/* 8 · Pilvarianten: --sm (16 px hoog, past naast een naam zonder de regel hoger te maken) en --niet (niet beschikbaar: arcering en een kruisje, geen rood) */
.ef-pill--sm{gap:4px;padding:0 7px;font-size:11px;line-height:16px}
.ef-pill--niet{gap:5px;background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--warn) 14%,transparent) 0 6px,color-mix(in srgb,var(--warn) 3%,transparent) 6px 12px);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--warn) 40%,transparent);color:var(--warn)}
.ef-pill--niet::before{display:none}
.ef-pill.ef-pill--niet svg{width:11px;height:11px;flex:none;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* 9 · Paneel: een zin onder de titel (ef-panel-sub), een voet zonder bovenrand (ef-panel-ft--plain) en een paneel dat als geheel een link is
   (ef-panel--link met de titel als ef-panel-link; andere links en knoppen in het paneel liggen erboven en blijven te bedienen). */
.ef-panel-hd:has(.ef-panel-sub){align-items:flex-start}
.ef-panel-hd>:has(>.ef-panel-sub){min-width:0}
.ef-panel-sub{margin:2px 0 0;font:400 var(--fs-13)/1.4 var(--font-sans);color:var(--ink-2)}
.ef-panel-ft--plain{padding-top:0;border-top:0}
.ef-panel--link{position:relative}
.ef-panel--link:hover{border-color:var(--line-ctl)}
.ef-panel-link{color:inherit;text-decoration:none}
.ef-panel-link::after{content:"";position:absolute;inset:0;border-radius:var(--radius-lg)}
.ef-panel-link:focus-visible{outline:none}
.ef-panel-link:focus-visible::after{outline:2px solid var(--accent);outline-offset:2px}
.ef-panel--link :is(a:not(.ef-panel-link),button,input,select,textarea){position:relative;z-index:1}

/* 10 · Rijstreep: een streep van 3 px links op een tabelrij (tr.ef-streep, op de eerste cel) of een lijstrij (ef-row ef-streep), in de kleur --acc;
   ef-streep--stip is gestippeld (optioneel). */
.ef-streep>td:first-child,.ef-row.ef-streep{position:relative}
.ef-table .ef-streep>td:first-child{padding-left:15px}
.ef-streep>td:first-child::before,.ef-row.ef-streep::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--acc,var(--accent));pointer-events:none}
.ef-streep--stip>td:first-child::before,.ef-row.ef-streep--stip::before{background:repeating-linear-gradient(var(--acc,var(--line-ctl)) 0 4px,transparent 4px 7px)}

/* 11 · Veld met een eenheid (ef-unit): het invoerveld met rechts een vaste strook (km, €/uur, u/week, dagen, %). Het getal staat rechts met tabulaire
   cijfers; de ring van de focus staat om het geheel. --sm is 32 px (in een instelrij of tabel), in ef-ruim 46 px. */
.ef-unit{display:flex;align-items:stretch;width:100%;min-height:38px;overflow:hidden;border:1px solid var(--line-ctl);border-radius:var(--radius-sm);background:var(--surface)}
.ef-unit:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.ef-unit input{flex:1;width:auto;min-width:0;height:auto;min-height:0;margin:0;padding:0 8px 0 12px;border:0;border-radius:0;background:transparent;box-shadow:none;color:var(--ink);font:400 var(--fs-14)/1.4 var(--font-sans);font-variant-numeric:tabular-nums;text-align:right;outline:0}
.ef-unit input:focus-visible{outline:0}
.ef-unit-u{display:grid;place-items:center;flex:none;padding:0 10px;border-left:1px solid var(--line-2);background:var(--sunken);color:var(--ink-2);font:400 var(--fs-12)/1.2 var(--font-sans);white-space:nowrap}
.ef-unit--sm{min-height:32px}
.ef-unit--sm input{padding-left:10px;font-size:var(--fs-13)}
/* 1.14.0 · de eenheidstrook LINKS (--voor): "€ 45,00". De strook staat voor het getal en heeft de lijn aan zijn rechterkant; `order` zet hem links, ook als hij in de opmaak achter de invoer staat. */
.ef-unit--voor>.ef-unit-u{order:-1;border-left:0;border-right:1px solid var(--line-2)}
.ef-unit.ef-unit--voor input{padding:0 12px 0 10px}
.ef-unit:has(input[aria-invalid="true"]){border-color:var(--crit)}
.ef-unit:has(input[readonly]){background:var(--sunken)}
.ef-unit:has(input:disabled){opacity:.5}
.ef-ruim .ef-unit:not(.ef-unit--sm){min-height:46px}
.ef-ruim .ef-unit:not(.ef-unit--sm) input{font-size:var(--fs-16)}

/* 12 · Mediategel als bijlage (ef-media--bijlage: een groep met beeld, naam, een vinkje en een wisknop op de hoek), de PDF in een tegel
   (ef-media-img--pdf met ef-media-doc en een paginateller) en de kleine PDF-tegel in een rij (ef-pdf). */
.ef-media--bijlage{cursor:default}
.ef-media--bijlage .ef-media-img{aspect-ratio:16/10}
.ef-media .ef-media-x.ef-iconbtn--image{position:absolute;top:6px;right:6px;width:32px;height:32px}
.ef-media .ef-media-x::after{content:"";position:absolute;inset:-7px}
.ef-media .ef-media-x.ef-iconbtn--image svg{width:15px;height:15px}
.ef-media-cap .ef-check{min-height:0;margin-top:6px;gap:8px;font-size:var(--fs-12);color:var(--ink-2)}
.ef-media-img--pdf{background:var(--sunken);color:var(--crit)}
.ef-media-doc{display:flex;flex-direction:column;align-items:center;gap:4px}
.ef-media-doc.ef-media-doc svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ef-media-doc b{font:700 var(--fs-12) var(--font-sans);letter-spacing:.08em}
.ef-media-img--pdf .ef-media-src{background:var(--surface);box-shadow:inset 0 0 0 1px var(--line-2);color:var(--ink-2)}
.ef-pdf{position:relative;display:grid;place-items:center;flex:none;width:34px;height:40px;border:1px solid color-mix(in srgb,var(--crit) 35%,transparent);border-radius:6px;background:var(--crit-bg);color:var(--crit);font:800 9px/1 var(--font-sans);letter-spacing:.05em}
.ef-pdf--neutraal{border-color:var(--line-2);background:var(--sunken);color:var(--ink-3)}
.ef-pdf--warn{border-color:color-mix(in srgb,var(--warn) 45%,transparent);background:var(--warn-bg);color:var(--warn)}
.ef-pdf i{position:absolute;right:-6px;bottom:-6px;padding:0 5px;border:1px solid var(--line-2);border-radius:var(--radius-pill);background:var(--surface);color:var(--ink-2);font:600 9px/1.4 var(--font-sans);font-style:normal;letter-spacing:0}
@media (max-width:700.98px){.ef-media-cap .ef-check{min-height:44px;margin-top:0}}
/* 12b · Een tegel die niet meegaat (ef-media--uit, 1.12.0): het beeld gedempt (45% en grijs) op `sunken` in plaats van op het donkere `stage` (dat leest in licht als "donkerder"), de naam in ink-3,
   een gestippelde rand. Het vinkje, de wisknop en de bron blijven vol van kleur: de tegel is gedempt, niet uitgeschakeld. */
.ef-media--uit{border-style:dashed;background:var(--sunken)}
.ef-media--uit .ef-media-img{background:var(--sunken)}
.ef-media--uit .ef-media-img>img{opacity:.45;filter:grayscale(1)}
.ef-media--uit .ef-media-doc{opacity:.45}
.ef-media--uit .ef-media-cap b{color:var(--ink-3)}

/* 13 · Tabelgroepen in ef-table: een groepskop (tr.ef-table-group > th scope="rowgroup", met ef-table-group-sub), een tussenkop (tr.ef-table-sub),
   een groepsregel met het subtotaal (tr.ef-table-sum) en een tabelvoet (tfoot) met het totaal. */
.ef-table .ef-table-group>th{padding:7px 12px;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line);background:var(--sunken);color:var(--ink);font:600 var(--fs-13)/1.3 var(--font-sans);text-align:left;white-space:normal}
.ef-table-group-sub{margin-left:8px;font:400 var(--fs-12) var(--font-sans);color:var(--ink-3)}
.ef-table .ef-table-sub>th{padding:8px 12px 2px;border-bottom:0;color:var(--ink-3);font:600 11px/1.3 var(--font-sans);letter-spacing:.07em;text-align:left;text-transform:uppercase}
.ef-table-sub .ef-chip-count{margin-left:6px;letter-spacing:0}
.ef-table .ef-table-sum>td{border-top:1px solid var(--line-2);font-weight:600}
.ef-table .ef-table-sum>td:first-child{color:var(--ink-2);font-weight:500;text-align:right}
.ef-table tbody tr:is(.ef-table-group,.ef-table-sub,.ef-table-sum):hover{background:none}
.ef-table tfoot td{padding:10px 12px;border-top:1px solid var(--line-ctl);border-bottom:0;background:var(--sunken);font:600 var(--fs-14) var(--font-sans)}
.ef-table tfoot small{font:400 var(--fs-12) var(--font-sans);color:var(--ink-3)}

/* Tikvlak van 44 px in ef-ruim (de viewer draagt geen ef-ruim; daar zijn de vlakken hierboven al 44 px) */
.ef-ruim .ef-beeldmelding .ef-btn,.ef-ruim .ef-install-acts .ef-btn{min-height:44px}

/* Een onderdeel met display:flex, grid of inline-* blijft verborgen met het attribuut hidden (1.8.0). */
.ef-menu[hidden],.ef-scrim[hidden],.ef-beeldmelding-stapel[hidden],.ef-beeldmelding-kolom[hidden],.ef-rail-ring[hidden],.ef-checklist-hd[hidden],.ef-menu-wie[hidden],.ef-install[hidden],.ef-install-acts[hidden],.ef-avail[hidden],.ef-avail-week[hidden],.ef-avail-balk[hidden],.ef-avail-leg[hidden],.ef-unit[hidden],.ef-pdf[hidden],.ef-media-doc[hidden]{display:none}

/* ===================================================================================================
   1.8.0 · deel 2: de voorstellen die Remco op 19-10-2026 als tweede helft koos. Rail-item met tekst, de opnamenrij, het werkblad van de viewer
   (soortkleuren, --vlak, --select, ef-meting, ef-sev, ef-bevinding), het zoekveld op een vlak, een rij als knop, het regelraster (ef-lines),
   de compacte banner, de groep in een paneel (ef-group), de weekrij (ef-weekrow), de tabel als stapel, de rij met de omschrijving eronder,
   twee chipvormen, kleuren per post en per legenda-item, de schuif met waarde (ef-range), de keuzerij die omslaat, de instelrij (ef-setting),
   de uitklapsectie (ef-disclosure), het plakkende raster, de knop die afbreekt, de kerncijferstrook, tonen op icoontegel en kerncijfer, de balk
   zonder marge, en de standen van het teamraster in ef-avail. Dezelfde regels als deel 1.
   =================================================================================================== */

/* Afgeleide kleuren voor het werkblad van de viewer: de soort van een meting (een alias van een categoriekleur) en twee rijvlakken. Ze staan op
   :root en op elk element met data-theme (zie Deelboom: een eigen eigenschap op alleen :root lost op de root op). */
:root,[data-theme],.t-light,.t-dark{
  --soort-afstand:var(--cat-geo);--soort-afstand-bg:var(--cat-geo-bg);
  --soort-lijn:var(--cat-water);--soort-lijn-bg:var(--cat-water-bg);
  --soort-vlak:var(--cat-vastgoed);--soort-vlak-bg:var(--cat-vastgoed-bg);
  --soort-punt:var(--cat-kunstwerk);--soort-punt-bg:var(--cat-kunstwerk-bg);
  --vlak:color-mix(in srgb,var(--ink) 3%,var(--panel));
  --select:color-mix(in srgb,var(--ink) 7%,var(--panel))}

.ef-opname,.ef-meting,.ef-bevinding,.ef-lines,.ef-group,.ef-weekrow-cel,.ef-disclosure,.ef-setting,.ef-range{box-sizing:border-box}

/* 1 · Rail-item met een woord onder het pictogram (64 × 54 px); de aria-label vervalt, het woord is de naam. */
.ef-rail-item.ef-rail-item--tekst{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;width:64px;height:54px}
.ef-rail-item--tekst span{font:500 11px/1 var(--font-sans);white-space:nowrap}
.ef-rail-item--tekst[aria-current="page"] span{font-weight:600}

/* 2 · De opnamenrij: tegels met een miniatuur (16:9), de datum en een regel; de gekozen (aria-current) met een ring, een letter (A, B) bij vergelijken,
   een strook "Verborgen voor klanten" en een lege plek. Op de telefoon met --snap een veegrij met een zichtbare regel eronder. */
.ef-opnamen{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin:0;padding:4px;list-style:none}
.ef-opnamen>li{min-width:0}
.ef-opname{display:grid;align-content:start;gap:2px;min-width:0;color:var(--ink);text-decoration:none}
.ef-opname-img{position:relative;display:block;aspect-ratio:16/9;margin-bottom:4px;overflow:hidden;border-radius:var(--radius-md);background:var(--stage)}
.ef-opname-img img{display:block;width:100%;height:100%;object-fit:cover}
.ef-opname[aria-current="true"] .ef-opname-img,.ef-opname[aria-current="page"] .ef-opname-img{outline:2px solid var(--accent);outline-offset:2px}
.ef-opname--verborgen .ef-opname-img img{opacity:.55}
.ef-opname-letter{position:absolute;top:4px;right:4px;display:grid;place-items:center;min-width:24px;height:24px;padding:0 6px;border-radius:var(--radius-sm);background:var(--accent);color:var(--on-action);font:600 var(--fs-13)/1 var(--font-sans)}
.ef-opname-verborgen{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:6px;padding:3px 8px;background:var(--warn);color:var(--on-action);font:600 var(--fs-12)/16px var(--font-sans)}
.ef-opname-verborgen.ef-opname-verborgen svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ef-opname-leeg{display:grid;place-content:center;justify-items:center;gap:2px;height:100%;background:radial-gradient(circle,var(--chrome-hover) 1.5px,transparent 2px) 0 0/14px 14px,var(--stage);color:var(--chrome-ink-2);font-size:var(--fs-12)}
.ef-opname-leeg.ef-opname-leeg svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ef-opname-d{font:600 var(--fs-14)/20px var(--font-sans);font-variant-numeric:tabular-nums}
.ef-opname-r{font:400 var(--fs-13)/18px var(--font-sans);color:var(--ink-2)}
.ef-opnamen-meer{display:none}
@media (max-width:700.98px){
  .ef-opnamen--snap{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain}
  .ef-opnamen--snap>li{flex:0 0 118px;scroll-snap-align:start}
  .ef-opnamen--snap .ef-opname-d{font:600 var(--fs-13)/18px var(--font-sans)}
  .ef-opnamen--snap .ef-opname-r{font-size:var(--fs-12)}
  /* 1.13.0 (voorstel 13): --rand laat de veegrij tot de schermrand lopen (de gutter van de pagina, space-4): negatieve marge, even grote opvulling en scroll-padding, zodat de eerste tegel op de gutter begint,
     de laatste ertegen eindigt en een snap-stand niet onder de rand schuift. Alleen met --snap (op een computer is het een raster in de kolom). */
  .ef-opnamen--snap.ef-opnamen--rand{margin-inline:calc(var(--space-4) * -1);padding-inline:var(--space-4);scroll-padding-inline:var(--space-4)}
  .ef-opnamen-meer{display:flex;align-items:center;gap:6px;margin:8px 0 0;font-size:var(--fs-12);color:var(--ink-2)}
  .ef-opnamen-meer.ef-opnamen-meer svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
}

/* 3 · Het werkblad van de viewer. Sinds 1.14.0 (besluit Remco 25-10-2026) is de RUSTIGE rij de standaard: een meting (ef-meting) en een bevinding (ef-bevinding) zijn een knop zonder vlak in rust; hover op --vlak,
   de gekozen rij op --select. Een meting heeft een tegel van 36 px in de kleur van zijn soort (--afstand, --lijn, --vlak, --punt), de naam 16/22 (500) met de soort eronder en rechts de waarde 18/22 (600); een
   bevinding een ernstbalk van 3 px links in de toon (ef-sev--crit, --warn, --info), een slot van 56 x 42 px voor een miniatuur (ef-bevinding-thumb) en de ernst als vorm, woord en kleur (ef-sev).
   Een rij met slots staat in een ef-meting-rij: de knop, de acties (ef-meting-acts) en het detail (ef-meting-detail) zijn BROERS, want een knop mag geen knop bevatten. Een groepskop met teller
   (ef-meting-groep) is plakkend; ef-meting--tijdelijk is de gestippelde rij van een meting die niet bewaard is. */
.ef-meting{display:grid;grid-template-columns:36px minmax(0,1fr) auto;column-gap:12px;align-items:start;width:100%;padding:10px 12px;border:0;border-radius:var(--radius-md);background:none;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.ef-meting:hover{background:var(--vlak)}
.ef-meting[aria-pressed="true"],.ef-meting[aria-current="true"]{background:var(--select)}
.ef-meting.ef-meting:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.ef-meting-ic{--soort:var(--soort-afstand);--soort-bg:var(--soort-afstand-bg);display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--soort-bg);color:var(--soort)}
.ef-meting-ic.ef-meting-ic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ef-meting--lijn .ef-meting-ic{--soort:var(--soort-lijn);--soort-bg:var(--soort-lijn-bg)}
.ef-meting--vlak .ef-meting-ic{--soort:var(--soort-vlak);--soort-bg:var(--soort-vlak-bg)}
.ef-meting--punt .ef-meting-ic{--soort:var(--soort-punt);--soort-bg:var(--soort-punt-bg)}
.ef-meting b{display:block;overflow:hidden;font:500 var(--fs-16)/22px var(--font-sans);text-overflow:ellipsis;white-space:nowrap}
.ef-meting small{display:block;overflow:hidden;padding-right:16px;font:400 var(--fs-12)/18px var(--font-sans);color:var(--ink-3);text-overflow:ellipsis;white-space:nowrap}
.ef-meting[aria-pressed="true"] small,.ef-meting[aria-current="true"] small{color:var(--ink-2)}
.ef-meting-val{display:flex;align-items:baseline;gap:3px;font:600 var(--fs-18)/22px var(--font-sans);font-variant-numeric:tabular-nums;white-space:nowrap}
.ef-meting-val b{display:inline;overflow:visible;font:inherit}
.ef-meting-val small{display:inline;overflow:visible;padding:0;font:400 var(--fs-13)/22px var(--font-sans);color:var(--ink-3)}
.ef-sev{--sev:var(--accent);display:inline-flex;align-items:center;gap:5px;color:var(--sev);font:600 var(--fs-12) var(--font-sans);white-space:nowrap}
.ef-sev.ef-sev svg{width:13px;height:13px;flex:none;fill:currentColor;fill-opacity:.18;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ef-sev--crit,.ef-bevinding--crit{--sev:var(--crit)}
.ef-sev--warn,.ef-bevinding--warn{--sev:var(--warn)}
.ef-sev--info,.ef-bevinding--info{--sev:var(--accent)}
.ef-bevinding{position:relative;display:grid;grid-template-columns:minmax(0,1fr);width:100%;padding:10px 12px 10px 16px;border:0;border-radius:var(--radius-md);background:none;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.ef-bevinding::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:var(--radius-pill);background:var(--sev,var(--accent))}
.ef-bevinding:hover{background:var(--vlak)}
.ef-bevinding[aria-pressed="true"],.ef-bevinding[aria-current="true"]{background:var(--select)}
.ef-bevinding.ef-bevinding:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.ef-bevinding>b{display:block;overflow:hidden;font:500 var(--fs-16)/22px var(--font-sans);text-overflow:ellipsis;white-space:nowrap}
.ef-bevinding-meta{display:flex;align-items:center;gap:8px;min-width:0;overflow:hidden;line-height:18px}
.ef-bevinding-wie{margin-left:auto;overflow:hidden;font-size:var(--fs-12);color:var(--ink-3);text-overflow:ellipsis;white-space:nowrap}
.ef-bevinding[aria-pressed="true"] .ef-bevinding-wie,.ef-bevinding[aria-current="true"] .ef-bevinding-wie{color:var(--ink-2)}
.ef-bevinding:has(>.ef-bevinding-thumb){grid-template-columns:56px minmax(0,1fr);column-gap:12px;align-items:center}
.ef-bevinding-thumb{position:relative;display:grid;place-items:center;grid-row:1 / span 2;width:56px;height:42px;overflow:hidden;border-radius:var(--radius-sm);background:var(--stage);color:var(--chrome-ink-2)}
.ef-bevinding-thumb>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ef-bevinding-thumb.ef-bevinding-thumb svg{width:18px;height:18px;fill:currentColor;fill-opacity:.18;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* de rij met slots: het vlak (hover, gekozen) hoort bij de rij, niet bij de knop; de ernstbalk van de bevinding strekt zich uit over het detail */
.ef-meting-rij{position:relative;border-radius:var(--radius-md)}
.ef-meting-rij:is(:hover,:has(:focus-visible)){background:var(--vlak)}
.ef-meting-rij:is([aria-current="true"],.is-sel,:has(>[aria-pressed="true"],>[aria-current="true"])){--acts-bg:var(--select);background:var(--select)}
.ef-meting-rij>.ef-meting,.ef-meting-rij>.ef-bevinding{background:none}
.ef-meting-rij>.ef-bevinding{position:static}
.ef-meting-rij:is([aria-current="true"],.is-sel,:has(>[aria-pressed="true"],>[aria-current="true"])) small{color:var(--ink-2)}
.ef-meting-rij:is([aria-current="true"],.is-sel,:has(>[aria-pressed="true"],>[aria-current="true"])) .ef-bevinding-wie{color:var(--ink-2)}
/* de acties bij een rij (naar het punt, hernoemen, verwijderen) liggen OVER de waarde. Onzichtbaar vangen ze NOOIT een klik (pointer-events:none: een tik op de waarde viel eens op Verwijderen). Zichtbaar
   (en klikbaar) bij hover van een apparaat dat hovert, bij de toetsenbordfocus in de rij (:focus-visible: een muisklik telt niet), voor de gekozen rij en terwijl een menu van de rij open is (.is-open) */
.ef-meting-acts{position:absolute;right:8px;top:11px;z-index:1;display:flex;gap:2px;padding-left:8px;border-radius:var(--radius-md);background:var(--acts-bg,var(--vlak));opacity:0;pointer-events:none}
.ef-meting-acts>.ef-iconbtn{width:38px;height:38px}
@media (hover:hover) and (pointer:fine){.ef-meting-rij:hover>.ef-meting-acts{opacity:1;pointer-events:auto}}
.ef-meting-rij:is(:has(:focus-visible),.is-open,[aria-current="true"],.is-sel,:has(>[aria-pressed="true"],>[aria-current="true"]))>.ef-meting-acts{opacity:1;pointer-events:auto}
@supports not selector(:has(*)){.ef-meting-acts:focus-within{opacity:1;pointer-events:auto}}
/* waar de acties te zien zijn lopen de titel en de regel van een bevinding er niet onderdoor (drie knoppen van 38 px; op aanraken van 44 px) */
.ef-meting-rij{--acts-w:134px}
@media (hover:hover) and (pointer:fine){.ef-meting-rij:hover>.ef-bevinding>:is(b,.ef-bevinding-meta){margin-right:var(--acts-w)}}
.ef-meting-rij:is(:has(:focus-visible),.is-open,[aria-current="true"],.is-sel,:has(>[aria-pressed="true"],>[aria-current="true"]))>.ef-bevinding>:is(b,.ef-bevinding-meta){margin-right:var(--acts-w)}
/* een meting: de waarde ligt dan onder de acties en is niet te zien; de kolom ervan klapt dicht en de naam en de soort lopen tot aan de acties (anders kapte de naam op de telefoon al na 13 tekens af) */
@media (hover:hover) and (pointer:fine){.ef-meting-rij:hover>.ef-meting{grid-template-columns:36px minmax(0,1fr) 0}.ef-meting-rij:hover>.ef-meting>:nth-child(2){margin-right:calc(var(--acts-w) - 24px)}.ef-meting-rij:hover>.ef-meting>.ef-meting-val{visibility:hidden;width:0;overflow:hidden}}
.ef-meting-rij:is(:has(:focus-visible),.is-open,[aria-current="true"],.is-sel,:has(>[aria-pressed="true"],>[aria-current="true"]))>.ef-meting{grid-template-columns:36px minmax(0,1fr) 0}
.ef-meting-rij:is(:has(:focus-visible),.is-open,[aria-current="true"],.is-sel,:has(>[aria-pressed="true"],>[aria-current="true"]))>.ef-meting>:nth-child(2){margin-right:calc(var(--acts-w) - 24px)}
.ef-meting-rij:is(:has(:focus-visible),.is-open,[aria-current="true"],.is-sel,:has(>[aria-pressed="true"],>[aria-current="true"]))>.ef-meting>.ef-meting-val{visibility:hidden;width:0;overflow:hidden}
@media (pointer:coarse),(max-width:700.98px){.ef-meting-rij{--acts-w:152px}.ef-meting-acts{top:8px}.ef-meting-acts>.ef-iconbtn{width:44px;height:44px}}
/* het detail klapt onder de rij open, ingesprongen onder de tekst (tegel 36 + 12; bij een bevinding balkruimte 16 + miniatuur 56 + 12) */
.ef-meting-detail{display:grid;gap:12px;padding:0 12px 12px var(--det-in,60px)}
.ef-meting-rij:has(>.ef-bevinding){--det-in:84px}
/* een groepskop met een teller, plakkend boven de rijen van zijn groep (de lijst scrolt; --groep-bg is het vlak waarop de lijst staat) */
.ef-meting-groep{position:sticky;top:0;z-index:2;display:flex;align-items:baseline;gap:8px;margin:0;padding:12px 12px 4px;background:var(--groep-bg,var(--panel));color:var(--ink-2);font:600 var(--fs-13)/1.3 var(--font-sans)}
.ef-meting-groep--surface{--groep-bg:var(--surface)}
.ef-meting-groep-n{color:var(--ink-3);font:400 var(--fs-13)/1 var(--font-sans);font-variant-numeric:tabular-nums}
/* een meting die nog niet bewaard is (een kijker meet tijdelijk in zijn browser): een gestippelde rij; zeg het ook in woorden in de soortregel */
.ef-meting--tijdelijk{outline:1px dashed var(--line-ctl);outline-offset:-1px}

/* 4 · Zoekveld op een vlak: zonder rand, op sunken, 36 px (op de telefoon 44 px), dezelfde focusring */
.ef-search.ef-search--vlak{min-width:0;min-height:36px;padding:0 10px;border-color:transparent;border-radius:var(--radius-md);background:var(--sunken)}
.ef-search.ef-search--vlak:focus-within{border-color:transparent;outline-offset:0}

/* 5 · Een rij als knop (ef-row ef-row--knop op een button): één actie; de reset, hover en focus komen uit het systeem */
.ef-row.ef-row--knop{width:100%;margin:0;border:0;border-top:1px solid var(--line);background:transparent;font:inherit;text-align:left;cursor:pointer}
.ef-row.ef-row--knop:first-child{border-top:0}
.ef-row.ef-row--knop:hover{background:var(--sunken)}
.ef-row.ef-row--knop:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

/* 6 · Regelraster (ef-lines): een rij is de omschrijving op een eigen regel en daaronder de getallen in vaste kolommen (--lines-cols); een
   specificatieregel (--spec) is ingesprongen en gedempt; een voet met de knop en het totaal. */
.ef-lines{font:400 var(--fs-14)/1.4 var(--font-sans);color:var(--ink)}
.ef-lines-hd,.ef-lines-num{display:grid;grid-template-columns:var(--lines-cols,52px 56px 88px 32px minmax(0,1fr) 32px);gap:6px;align-items:center}
.ef-lines-hd{padding-bottom:6px;border-bottom:1px solid var(--line-2);font:500 var(--fs-12) var(--font-sans);color:var(--ink-3)}
.ef-lines-rij{display:grid;gap:6px;padding:10px 0 6px;border-top:1px solid var(--line)}
.ef-lines-hd+.ef-lines-rij{border-top:0}
.ef-lines-oms{position:relative;display:flex;align-items:center;gap:8px}
.ef-lines-oms>.ef-input{flex:1;min-width:0}
.ef-lines .ef-input{padding-inline:6px}
.ef-lines-r{text-align:right;font-variant-numeric:tabular-nums}
.ef-lines-c{text-align:center;font-size:var(--fs-12);color:var(--ink-2)}
.ef-lines-bedrag{font-weight:600;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.ef-lines-rij--spec{padding:2px 0 10px;border-top:0}
.ef-lines-rij--spec .ef-lines-oms,.ef-lines-rij--spec .ef-lines-num{padding-left:22px}
.ef-lines-rij--spec .ef-lines-oms::before{content:"";position:absolute;left:6px;top:7px;width:9px;height:9px;border-left:1.5px solid var(--ink-3);border-bottom:1.5px solid var(--ink-3);border-bottom-left-radius:3px}
.ef-lines-rij--spec .ef-input{background:var(--sunken);color:var(--ink-2)}
.ef-lines-rij--spec .ef-lines-bedrag{font-weight:400;color:var(--ink-3)}
.ef-lines-rij--spec .ef-lines-c{color:var(--ink-3)}
.ef-lines-ft{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:10px;border-top:1px solid var(--line-2);font-size:var(--fs-13);color:var(--ink-2)}
.ef-lines-ft b{margin-left:8px;color:var(--ink);font-variant-numeric:tabular-nums}
/* 1.13.1: op de telefoon zijn de velden 16 px (kleiner laat iOS inzoomen) en lopen de getallen over twee regels in vier kolommen: aantal | eenheid | prijs | wisknop; daaronder btw onder het aantal en het
   bedrag rechts onder de prijs (over eenheid en prijs, rechts uitgelijnd), en de wisknop (44 px) rechts over beide regels. De DOM is gelijk (zes kinderen); alleen de plaats in het raster is anders.
   Maten (16 px Outfit, 3 px opvulling + 1 px rand): "1.250,5" 64,3, "kilometer" 74,8 en "125.000,50" 92,6 px; samen met de wisknop en drie keer 3 px past dat in 288 px (een telefoon van 320 px).
   --lines-cols heeft hier GEEN standaardwaarde maar een terugval in var(): een app die het zet, krijgt precies haar kolommen en één regel. De plaatsing hangt aan hetzelfde: met `var(--lines-cols, <plaats>)` is
   <plaats> alleen geldig zolang --lines-cols niet gezet is; staat er een kolomlijst, dan is de declaratie ongeldig en valt de plaats terug op auto. */
@media (max-width:700.98px){
  .ef-lines-hd,.ef-lines-num{grid-template-columns:var(--lines-cols,minmax(65px,64fr) minmax(76px,75fr) minmax(93px,93fr) 44px);gap:6px 3px}
  .ef-lines .ef-input{font-size:var(--fs-16);padding-inline:3px}
  .ef-lines-hd>:nth-child(4),.ef-lines-num>:nth-child(4){grid-column:var(--lines-cols,1);grid-row:var(--lines-cols,2)}
  .ef-lines-hd>:nth-child(5),.ef-lines-num>:nth-child(5){grid-column:var(--lines-cols,2 / 4);grid-row:var(--lines-cols,2)}
  .ef-lines-hd>:nth-child(6),.ef-lines-num>:nth-child(6){grid-column:var(--lines-cols,4);grid-row:var(--lines-cols,1 / span 2);align-self:var(--lines-cols,center);justify-self:end}
  .ef-lines .ef-unit input{font-size:var(--fs-16)}
  .ef-lines-rij--spec .ef-lines-num{padding-left:0}
}
/* 1.14.0 · de toelichtingsregel (ef-lines-toel): een eigen regel tussen de omschrijving en de getallen, cursief onder de omschrijving op de factuur. Een veld zonder kader met een stippellijn eronder in 12 px
   (op de telefoon 16 px, zoals elk veld in het raster); bij focus een vlak op sunken. In een specificatie springt hij even ver in als de omschrijving. */
.ef-lines-toel{display:flex;min-width:0}
.ef-lines .ef-lines-toel>.ef-input{flex:1;min-width:0;min-height:28px;padding:3px 2px;border-color:transparent;border-bottom:1px dashed var(--line-2);border-radius:0;background:transparent;color:var(--ink-2)}
.ef-lines .ef-lines-toel>.ef-input:focus{border-style:solid;border-color:var(--line);border-radius:var(--radius-sm);background:var(--sunken);color:var(--ink)}
.ef-lines .ef-lines-toel>.ef-input::placeholder{color:var(--ink-2);font-style:italic}
.ef-lines-rij--spec .ef-lines-toel{padding-left:22px}
@media (min-width:701px){.ef-lines .ef-lines-toel>.ef-input{font-size:var(--fs-12)}}
/* 1.14.0 · de smalle tabel (ef-lines--smal): alleen btw en bedrag (en de wisknop), voor een factuur zonder aantal, eenheid en prijs. Het bedrag is er zelf het invoerveld, bijvoorbeeld een ef-unit--voor met "€".
   De kolommen staan in --lines-cols: op de telefoon geldt dan geen telefoonplaats van het DS meer en blijft het één regel. */
.ef-lines--smal{--lines-cols:44px minmax(0,1fr) 32px}
@media (max-width:700.98px){.ef-lines--smal{--lines-cols:30px minmax(70px,1fr) 44px}}

/* 7 · Compacte banner (ef-banner--sm) tussen de velden van een formulier: 13 px, icoon van 16 px, minder opvulling */
.ef-banner.ef-banner--sm{gap:8px;padding:8px 10px;border-radius:var(--radius-sm);font-size:var(--fs-13);line-height:1.4}
.ef-banner--sm.ef-banner svg{width:16px;height:16px}

/* 8 · Een groep in een paneel (ef-group): kader, een kop op sunken en een streep links in --acc (standaard accent); nooit een tweede ef-panel */
.ef-group{overflow:hidden;border:1px solid var(--line-2);border-left:3px solid var(--acc,var(--accent));border-radius:var(--radius-md)}
.ef-group+.ef-group{margin-top:10px}
.ef-group-hd{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--line);background:var(--sunken)}
.ef-group-hd b{font:600 var(--fs-13) var(--font-sans)}
.ef-group-meta{margin-left:auto;font-size:var(--fs-12);color:var(--ink-3);white-space:nowrap}
.ef-group-body{padding:2px 12px 4px;font-size:var(--fs-13)}
.ef-group-body :is(dt,dd){font-size:var(--fs-13)}

/* 9 · De weekrij (ef-weekrow): zeven dagcellen met de dag boven een getal (lezen) of een invoerveld (invoer); een vrije dag gestippeld */
.ef-weekrow{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;max-width:380px}
.ef-weekrow-dag{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0}
.ef-weekrow-dag>:first-child:not(.ef-weekrow-cel){font:600 11px var(--font-sans);color:var(--ink-3)}
.ef-weekrow-cel{display:grid;place-items:center;width:100%;height:36px;border:1px solid transparent;border-radius:var(--radius-sm);background:var(--sunken);color:var(--ink);font:600 var(--fs-14) var(--font-sans);font-variant-numeric:tabular-nums}
.ef-weekrow-cel--vrij{border:1px dashed var(--line-2);background:transparent;color:var(--ink-3)}
.ef-weekrow-cel:has(input){border-color:var(--line-ctl);background:var(--surface)}
.ef-weekrow-cel:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.ef-weekrow-cel input{width:100%;min-width:0;height:100%;margin:0;padding:0;border:0;background:transparent;box-shadow:none;color:var(--ink);font:inherit;text-align:center;outline:0}
.ef-weekrow-cel input:focus-visible{outline:0}
@media (max-width:700.98px){.ef-weekrow-cel{height:44px}}
.ef-ruim .ef-weekrow-cel{height:44px}

/* 10 · De tabel als stapel (ef-table--stack): onder 700 px is elke rij een blok; een cel met data-l toont dat label links en de waarde rechts,
   een cel zonder data-l is de titel van het blok. De kop verdwijnt voor het oog maar blijft voor een schermlezer. */
@media (max-width:700.98px){
  .ef-table--stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .ef-table--stack,.ef-table--stack tbody,.ef-table--stack tfoot,.ef-table--stack tr,.ef-table--stack td{display:block}
  .ef-table--stack tr{padding:9px 12px;border-top:1px solid var(--line)}
  .ef-table--stack tbody tr:first-child{border-top:0}
  .ef-table--stack tbody tr:hover{background:none}
  .ef-table.ef-table--stack td{display:flex;justify-content:space-between;gap:12px;padding:3px 0;border:0;font-size:var(--fs-13);text-align:right}
  .ef-table--stack td::before{content:attr(data-l);color:var(--ink-3);text-align:left}
  .ef-table.ef-table--stack td:not([data-l]):not(.ef-td-acts){display:block;margin-bottom:3px;font:600 var(--fs-14)/1.3 var(--font-sans);text-align:left}
  .ef-table--stack td:not([data-l])::before{content:none}
  /* 1.13.0 (uit het Dataportaal, voorstel 3): de stapel past in ef-ruim en kent een kolom met acties.
     (a) de celhoogte van ef-ruim (56 px per cel) hoort niet in een blok: elke regel is zo hoog als zijn inhoud; (b) een pil of knop in een regel staat in het midden en rekt niet mee;
     (c) een cel met ef-td-acts (zonder data-l, anders is een cel zonder label de titel van het blok) staat op de regel van de titel rechts, voor knoppen of een pil; (d) een small in de titel is de tweede regel, niet vet. */
  .ef-ruim .ef-table--stack td{height:auto}
  .ef-table.ef-table--stack td{align-items:center}
  .ef-table--stack tr:has(>.ef-td-acts){display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;align-items:center}
  .ef-table--stack tr:has(>.ef-td-acts)>td{grid-column:1/-1}
  .ef-table--stack tr:has(>.ef-td-acts)>td:not([data-l]):not(.ef-td-acts){grid-column:1;grid-row:1}
  .ef-table.ef-table--stack td.ef-td-acts{grid-column:2;grid-row:1;display:flex;justify-content:flex-end;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:3px}
  .ef-table--stack td.ef-td-acts::before{content:none}
  .ef-table.ef-table--stack td:not([data-l]) small{display:block;font:400 var(--fs-12)/1.4 var(--font-sans);color:var(--ink-3)}
}

/* 11 · Een rij waarvan de gedempte omschrijving op de telefoon onder de titel valt (ef-row--onder): twee kolommen, tekst en eind */
.ef-row.ef-row--onder{grid-template-columns:minmax(0,1fr) auto}
.ef-row--onder>:first-child{display:flex;align-items:baseline;gap:12px;min-width:0}
.ef-row--onder>:first-child>b{flex:none;white-space:normal}
.ef-row--onder>:first-child>small{flex:1;min-width:0}
@media (max-width:700.98px){.ef-row--onder>:first-child{display:block}}

/* 12 · Twee chipvormen: --twee wisselt tussen twee labels (gedrukt = gestippelde rand, met een wisselteken), --sleep is een sleepbaar label (geen knop) */
.ef-chip--twee[aria-pressed="true"]{border-style:dashed}
.ef-chip--twee.ef-chip--twee svg{width:14px;height:14px;flex:none;opacity:.7;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ef-chip.ef-chip--sleep{gap:6px;padding-left:6px;background:var(--surface);cursor:grab;touch-action:none}
.ef-chip.ef-chip--sleep:active{cursor:grabbing}
.ef-chip--sleep.ef-chip--sleep svg{width:14px;height:14px;flex:none;fill:none;stroke:var(--ink-3);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* 13 · Een vaste kleur per post (ef-post--1 … --6) en per legenda-item (ef-c--*): de klasse zet --c, op een balkdeel én op een legenda-item */
.ef-post--1{--c:var(--viz-muted)}.ef-post--2{--c:var(--cat-geo)}.ef-post--3{--c:var(--cat-water)}
.ef-post--4{--c:var(--cat-kunstwerk)}.ef-post--5{--c:var(--cat-vastgoed)}.ef-post--6{--c:var(--viz-crit)}
/* 1.14.0: drie postkleuren erbij (7 olijf, 8 indigo, 9 roze); elk haalt 3 : 1 op surface en panel in licht én donker en is te onderscheiden van 1 t/m 6 */
.ef-post--7{--c:var(--cat-solar)}.ef-post--8{--c:var(--cat-inspectie)}.ef-post--9{--c:var(--cat-promotie)}
.ef-c--ok{--c:var(--viz-ok)}.ef-c--info{--c:var(--viz-info)}.ef-c--warn{--c:var(--viz-warn)}.ef-c--crit{--c:var(--viz-crit)}
.ef-c--accent{--c:var(--accent)}.ef-c--new{--c:var(--new)}.ef-c--muted{--c:var(--viz-muted)}
/* een balk zonder marge, op de hartlijn naast een getal in een flex-rij */
.ef-prog.ef-prog--inline{flex:1;margin-top:0}

/* 14 · Schuif met waarde (ef-range): label met de betekenis als pil, de schuif, een invulbaar waardevak met eenheid (ef-unit--sm) en het bereik eronder */
.ef-range{display:grid;gap:6px}
.ef-range-hd{display:flex;align-items:center;gap:8px}
.ef-range-hd .ef-pill{margin-left:auto}
.ef-range-in{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;row-gap:2px;align-items:center}
.ef-range-in input[type="range"]{width:100%;min-width:0;height:24px;margin:0;accent-color:var(--accent)}
.ef-range .ef-unit{width:auto}
.ef-range .ef-unit input{width:44px;flex:none;padding:0 6px;font-weight:500}
.ef-range-schaal{grid-column:1;display:flex;justify-content:space-between;font-size:11px;color:var(--ink-3)}
@media (max-width:700.98px){.ef-range-in input[type="range"]{height:44px}}
.ef-ruim .ef-range-in input[type="range"]{height:44px}

/* 15 · Keuzerij die omslaat (ef-fbar--wrap): in een formulier lopen de chips door naar de volgende regel, nooit zijwaarts */
.ef-fbar.ef-fbar--wrap{flex-wrap:wrap;row-gap:8px;overflow:visible}

/* 16 · Instelrij (ef-setting): titel, uitleg en een voorbeeld links, het veld rechts in een vaste kolom; op de telefoon onder elkaar */
.ef-setting{display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:16px;align-items:start;padding:14px 0;border-top:1px solid var(--line)}
.ef-setting>div{min-width:0}
.ef-setting-t{display:block;font:600 var(--fs-14)/1.3 var(--font-sans);color:var(--ink)}
.ef-setting-u{margin:3px 0 0;font:400 var(--fs-13)/1.45 var(--font-sans);color:var(--ink-2)}
.ef-setting-vb{margin:6px 0 0;padding:5px 8px;border-radius:var(--radius-sm);background:var(--sunken);font:400 var(--fs-12)/1.4 var(--font-sans);color:var(--ink-2)}
.ef-setting-vb b{font-weight:600;color:var(--ink)}
@media (max-width:700.98px){.ef-setting{grid-template-columns:minmax(0,1fr);gap:10px}}

/* 17 · Uitklapsectie (ef-disclosure): een details met een kop van 44 px (chevron, titel, samenvatting rechts); open draait de chevron */
.ef-disclosure{border:1px solid var(--line-2);border-radius:var(--radius-md);background:var(--surface)}
.ef-disclosure+.ef-disclosure{margin-top:8px}
.ef-disclosure>summary{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 14px;border-radius:var(--radius-md);color:var(--ink);list-style:none;cursor:pointer}
.ef-disclosure>summary::-webkit-details-marker{display:none}
.ef-disclosure>summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.ef-disclosure>summary b{font:600 var(--fs-14) var(--font-sans)}
/* 1.14.0: een lang woord in de titel of een label breekt af binnen de kolom (anders loopt het voorbij de rand van het paneel); de samenvatting (nowrap) en de chevron krimpen niet, de titel wel */
.ef-disclosure>summary{overflow-wrap:anywhere;hyphens:auto}
.ef-disclosure>summary>:not(svg):not(.ef-disclosure-sam){min-width:0}
.ef-disclosure-body label,.ef-disclosure-body .ef-label{overflow-wrap:anywhere;hyphens:auto}
.ef-disclosure.ef-disclosure>summary svg{width:16px;height:16px;flex:none;fill:none;stroke:var(--ink-3);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
.ef-disclosure.ef-disclosure[open]>summary svg{transform:rotate(90deg)}
.ef-disclosure-sam{margin-left:auto;font-size:var(--fs-12);color:var(--ink-3);white-space:nowrap}
.ef-disclosure-body{padding:0 14px 14px 40px}
@media (prefers-reduced-motion:reduce){.ef-disclosure.ef-disclosure>summary svg{transition:none}}

/* 18 · Een raster dat zijwaarts schuift met een plakkende eerste kolom en groepstitel (ef-grid--plak, ef-table--plak), met een schaduwrand */
.ef-grid--plak>div>:first-child{position:sticky;left:0;z-index:2;background:var(--surface);box-shadow:6px 0 10px -6px color-mix(in srgb,var(--ink) 35%,transparent)}
.ef-grid--plak>.h>:first-child{z-index:3}
.ef-grid--plak>.g>:first-child{background:var(--sunken);box-shadow:none}
.ef-grid--plak>.g>.ef-grid-group{position:sticky;left:12px;width:max-content;flex-wrap:nowrap;white-space:nowrap}
.ef-table--plak th:first-child,.ef-table--plak td:first-child{position:sticky;left:0;z-index:1;background:var(--surface);box-shadow:6px 0 10px -6px color-mix(in srgb,var(--ink) 35%,transparent)}

/* 19 · Een knop die mag afbreken (ef-btn--wrap): links uitgelijnd, 44 px hoog, gewone regelafstand */
.ef-btn.ef-btn--wrap{min-height:44px;padding-block:6px;line-height:1.25;text-align:left;white-space:normal}

/* 20 · De kerncijferstrook (ef-kpis--strook): onder 700 px een schuifstrook van 2¼ tegel met snap, de ring rechtsboven, geen icoontegel; de stippen
   (ef-kpis-dots) zeggen waar je bent. ef-stepper--strook: onder 900 px één schuifregel in plaats van tegels (bij ef-stepper--fill). */
.ef-kpis-dots{display:none}
@media (max-width:700.98px){
  .ef-kpis.ef-kpis--strook{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain}
  .ef-kpis--strook>.ef-kpi{position:relative;display:block;flex:0 0 calc((100% - 16px) / 2.25);min-width:0;padding:10px 12px;scroll-snap-align:start}
  .ef-kpis--strook .ef-kpi-l{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;overflow-wrap:anywhere;hyphens:auto;font-size:var(--fs-12)}
  .ef-kpis--strook .ef-kpi:has(.ef-ring) .ef-kpi-l{padding-right:44px}
  .ef-kpis--strook .ef-kpi-v{margin-top:8px;font-size:var(--fs-18);overflow-wrap:anywhere}
  .ef-kpis--strook .ef-kpi-s{flex-wrap:wrap;font-size:var(--fs-12);overflow-wrap:anywhere}
  .ef-kpis--strook .ef-ring{position:absolute;top:8px;right:8px;width:40px;height:40px}
  .ef-kpis--strook .ef-ring::before{inset:4px}
  .ef-kpis--strook .ef-ring b{font-size:10.5px}
  .ef-kpis--strook .ef-ic-tile{display:none}
  .ef-kpis-dots{display:flex;justify-content:center;gap:5px;margin-top:8px}
  .ef-kpis-dots i{width:6px;height:6px;border-radius:3px;background:var(--line-2)}
  .ef-kpis-dots i.is-on{width:14px;background:var(--accent)}
}
@media (max-width:900px){
  .ef-stepper.ef-stepper--fill.ef-stepper--strook{display:flex;overflow-x:auto;gap:0;white-space:nowrap}
  .ef-stepper--strook.ef-stepper--fill li{flex:none;padding:0;border-radius:0;background:none}
  .ef-stepper--strook.ef-stepper--fill li+li::before{display:block;flex:none;width:28px;min-width:0}
}

/* 21 · Icoontegel neutraal, omlijnd en met een nummer; een kerncijfer in toon (getal in de toon en een streep van 3 px boven) */
.ef-ic-tile--neutral{background:var(--sunken);color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line-2)}
.ef-ic-tile--outline{border:1px dashed var(--line-ctl);background:transparent;color:var(--ink-2)}
.ef-ic-tile--num{font:600 var(--fs-13)/1 var(--font-sans);font-variant-numeric:tabular-nums}
.ef-kpi.ef-kpi--ok{border-top:3px solid var(--ok)}
.ef-kpi--ok .ef-kpi-v{color:var(--ok)}
.ef-kpi.ef-kpi--accent{border-top:3px solid var(--accent)}
.ef-kpi--accent .ef-kpi-v{color:var(--accent)}
.ef-kpi.ef-kpi--opt{border-top:3px dashed var(--line-ctl)}
.ef-kpi--opt .ef-kpi-v{color:var(--ink-2)}

/* 22 · De standen van het teamraster in ef-avail (naast die van deel 1): --extra (bovenop het rooster), --deels-extra, --vrij (vrij volgens
   rooster), --geen (geen rooster), --uit (uit dienst); een cel in een raster (--cel, 36 px), alleen lezen (is-ro), een sleepvoorbeeld (is-drag)
   en de hover van een knop (een diepere tint van de eigen kleur). Onbekend is de lege stand (zonder klasse). */
.ef-avail--extra{--av-bg:color-mix(in srgb,var(--ok) 10%,transparent);--av-rand:color-mix(in srgb,var(--ok) 55%,transparent);--av-c:var(--ok);--av-stijl:dashed}
.ef-avail--deels-extra{--av-bg:color-mix(in srgb,var(--warn) 8%,transparent);--av-rand:color-mix(in srgb,var(--ok) 45%,transparent);--av-c:var(--ok);--av-stijl:dashed}
.ef-avail--vrij{--av-bg:color-mix(in srgb,var(--ink) 3%,transparent);--av-rand:transparent;--av-c:var(--ink-3)}
.ef-avail--geen{--av-bg:transparent;--av-rand:color-mix(in srgb,var(--crit) 40%,transparent);--av-c:var(--crit);--av-stijl:dashed}
.ef-avail--uit{--av-bg:transparent;--av-rand:transparent;--av-c:var(--ink-3)}
.ef-avail.ef-avail--cel{justify-content:center;width:100%;min-height:36px;padding:4px 2px;border-radius:8px}
button.ef-avail:not(.is-ro):hover,a.ef-avail:not(.is-ro):hover{box-shadow:inset 0 0 0 100px color-mix(in srgb,currentColor 10%,transparent)}
button.ef-avail[aria-pressed="true"]:not(.is-ro):hover,.ef-avail.is-sel:not(.is-ro):hover{box-shadow:0 0 0 2px var(--accent),inset 0 0 0 100px color-mix(in srgb,currentColor 10%,transparent)}
.ef-avail.is-ro{cursor:default}
/* 1.14.0 · een vergrendelde dag (is-ro op een knop die `disabled` is, of op een element met aria-disabled="true"): gedempt, maar zonder `opacity` (dat rekende het contrast weg). De tegel houdt zijn stand: het teken
   en de tekst mengen hun kleur 55 % naar ink-3, het vlak vervalt en de rand mengt 55 % naar de neutrale lijn (vandaag houdt zijn accentrand). Een alleen-lezen cel van het teamraster (een span) blijft vol van kleur. */
.ef-avail.is-ro:is(:disabled,[aria-disabled="true"]){background:transparent;color:color-mix(in srgb,var(--av-c,var(--ink-3)) 55%,var(--ink-3))}
.ef-avail.is-ro:is(:disabled,[aria-disabled="true"]):not(.is-today){border-color:color-mix(in srgb,var(--av-rand,var(--line)) 55%,var(--line))}
.ef-avail--cel small{color:inherit}
.ef-avail.is-drag{box-shadow:inset 0 0 0 100px color-mix(in srgb,currentColor 22%,transparent),inset 0 0 0 1px currentColor}

/* Tikvlak van 44 px op de telefoon */
@media (max-width:700.98px){.ef-meting,.ef-bevinding{min-height:44px}}

/* Een onderdeel met display:flex, grid of inline-* blijft verborgen met het attribuut hidden (1.8.0, deel 2). */
.ef-opnamen[hidden],.ef-opname[hidden],.ef-meting[hidden],.ef-meting-rij[hidden],.ef-bevinding[hidden],.ef-sev[hidden],.ef-lines[hidden],.ef-lines-rij[hidden],.ef-group[hidden],.ef-weekrow[hidden],.ef-setting[hidden],.ef-range[hidden],.ef-disclosure[hidden],.ef-kpis-dots[hidden]{display:none}

/* ===================================================================================================
   1.9.0 · De app-kop (ef-appkop): kop B, die Remco op 19-10-2026 koos. Een rij boven in het paneel met drie zones: links de kruimel (ef-appkop-l),
   in het midden het zoekveld (ef-appkop-m: een ef-search--kbd van hoogstens 480 px) en rechts de acties en het account (ef-appkop-r, met
   ef-me--kop). Zoeken en account staan dan in de kop, niet in de zijbalk.
   De breedte van het zoekveld volgt alleen de viewport: --appkop-veld = clamp(200px, 38,2vw − 131px, 480px), dus 260 px op 1024, 358 op 1280,
   419 op 1440 en 480 vanaf 1600 px; breder scherm, nooit een smaller veld. Het veld staat BIJNA in het midden: de zijzones zijn even breed zolang
   de inhoud past (dan precies in het midden); is de rechterzone breder dan zijn helft, dan schuift het veld zo weinig mogelijk naar links, tot
   tegen de acties aan. Links houdt de kruimel minstens --appkop-links (140 px) en kapt daarna af; past ook dat niet, dan wordt het veld smaller
   (er ligt nooit iets over elkaar). Onder 1280 px vallen naam en rol van het account weg (avatar en chevron blijven). Is het veld smaller dan
   280 px, dan valt de sneltoets weg. Onder 1024 px plakt de kop bovenaan en staat er tussen 701 en 1023 px een knop voor de lade
   (ef-appkop-lade). Onder 700 px is de kop een balk van 53 px: de schermnaam, het zoeken als icoonknop
   (ef-appkop-zoek) en de acties met het account als avatar. De app zet is-zoeken op de kop als het zoeken open is: dan staat het veld over de hele
   breedte, met een sluitknop (ef-appkop-sluit).
   =================================================================================================== */
.ef-appkop,.ef-appkop-l,.ef-appkop-m,.ef-appkop-r,.ef-me--kop{box-sizing:border-box}
.ef-appkop{--appkop-veld:clamp(200px,38.2vw - 131px,480px);--appkop-links:140px;--appkop-pad:24px;position:relative;display:grid;grid-template-columns:1fr minmax(0,var(--appkop-veld)) 1fr;align-items:center;gap:16px;min-height:65px;padding:10px var(--appkop-pad);border-bottom:1px solid var(--line);background:var(--panel);color:var(--ink)}
/* de zijkolommen zijn allebei 1fr: even breed, tenzij de inhoud van een zone meer vraagt. Links telt alleen --appkop-links mee (de kruimel kapt
   daarna af); rechts telt de hele inhoud mee (width:max-content), zodat de acties nooit onder het veld schuiven. */
.ef-appkop-l{display:flex;align-items:center;gap:8px;min-width:var(--appkop-links)}
.ef-appkop-m{display:flex;align-items:center;gap:6px;min-width:0;container-type:inline-size}
.ef-appkop-m>.ef-search{flex:1 1 auto;width:100%;min-width:0}
.ef-appkop-r{display:flex;align-items:center;justify-content:flex-end;gap:10px;justify-self:end;width:max-content}
.ef-appkop-sep{flex:none;width:1px;height:24px;background:var(--line-2)}
.ef-appkop .ef-crumb{display:flex;align-items:center;gap:9px;min-width:0;white-space:nowrap}
.ef-appkop .ef-crumb b{overflow:hidden;font-weight:600;text-overflow:ellipsis}
/* icoonknoppen in de zones van de kop (de bel, de lade, het zoeken op de telefoon): 34 px met een dunne rand; op de telefoon en in ef-ruim 44 px.
   Alleen een direct kind van een zone: de sluitknop van het accountmenu (ef-menu-x) in ef-appkop-r houdt zijn eigen vorm. */
.ef-appkop-l>.ef-iconbtn,.ef-appkop-m>.ef-iconbtn,.ef-appkop-r>.ef-iconbtn{width:34px;height:34px;border:1px solid var(--line-2)}
:is(.ef-appkop-l,.ef-appkop-m,.ef-appkop-r)>.ef-iconbtn.ef-iconbtn svg{width:17px;height:17px}
.ef-ruim .ef-appkop-l>.ef-iconbtn,.ef-ruim .ef-appkop-m>.ef-iconbtn,.ef-ruim .ef-appkop-r>.ef-iconbtn{width:44px;height:44px}
.ef-appkop .ef-appkop-zoek,.ef-appkop .ef-appkop-sluit,.ef-appkop .ef-appkop-lade{display:none}
/* het account in de kop: avatar, naam en rol (elk afgekapt), en een chevron die omdraait als het menu open is */
.ef-me.ef-me--kop{width:auto;flex:none;gap:8px;padding:4px 8px 4px 4px;border-radius:var(--radius-md)}
.ef-me--kop .ef-me-t{display:block;min-width:0;max-width:160px}
.ef-me--kop .ef-me-t b,.ef-me--kop .ef-me-t small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ef-me--kop .ef-me-t b{font:500 var(--fs-13)/1.25 var(--font-sans);color:var(--ink)}
.ef-me--kop .ef-me-t small{font-size:var(--fs-12);line-height:1.3;color:var(--ink-3)}
.ef-me--kop .ef-me-chev{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;color:var(--ink-3)}
.ef-me--kop[aria-expanded="true"]{background:var(--sunken)}
.ef-me--kop[aria-expanded="true"] .ef-me-chev{transform:rotate(180deg)}
.ef-me--kop:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* het accountmenu 6 px onder de kop (100% is de kop zonder zijn onderrand), rechts gelijk met het account (vanaf 701 px; daaronder is het een ef-menu--sheet) */
@media (min-width:701px){.ef-appkop-r>.ef-menu{position:absolute;top:calc(100% + 7px);right:var(--appkop-pad);z-index:calc(var(--z-bar,5) + 1);width:300px}}
@container (max-width:279px){.ef-appkop-m .ef-search kbd{display:none}}
@media (max-width:1279px){
  .ef-me--kop .ef-me-t{display:none}
}
@media (max-width:1023px){
  .ef-appkop{--appkop-pad:16px;position:sticky;top:0;z-index:var(--z-bar,5)}
}
@media (min-width:701px) and (max-width:1023px){
  .ef-appkop .ef-appkop-lade{display:inline-grid}
}
@media (max-width:700.98px){
  .ef-appkop{display:flex;gap:6px;min-height:53px;padding:4px 12px}
  .ef-appkop-l{flex:1 1 auto;min-width:0}
  .ef-appkop-m{flex:none;container-type:normal}
  .ef-appkop-r{flex:none;gap:6px;width:auto;min-width:0}
  .ef-appkop-m>.ef-search,.ef-appkop-sep,.ef-appkop-m .ef-search kbd{display:none}
  .ef-appkop-m .ef-search input{min-height:42px}
  .ef-appkop .ef-appkop-zoek{display:inline-grid}
  .ef-appkop-l>.ef-iconbtn,.ef-appkop-m>.ef-iconbtn,.ef-appkop-r>.ef-iconbtn{width:44px;height:44px}
  :is(.ef-appkop-l,.ef-appkop-m,.ef-appkop-r)>.ef-iconbtn.ef-iconbtn svg{width:18px;height:18px}
  .ef-appkop .ef-crumb>:not([aria-current]){display:none}
  .ef-appkop .ef-crumb [aria-current]{font:600 var(--fs-16)/1.2 var(--font-sans);color:var(--ink)}
  .ef-me.ef-me--kop{justify-content:center;width:44px;height:44px;padding:0}
  .ef-me--kop .ef-me-chev{display:none}
  .ef-me--kop .ef-av{width:32px;height:32px}
  .ef-appkop.is-zoeken>.ef-appkop-l,.ef-appkop.is-zoeken>.ef-appkop-r,.ef-appkop.is-zoeken .ef-appkop-zoek{display:none}
  .ef-appkop.is-zoeken>.ef-appkop-m{flex:1 1 auto;min-width:0}
  .ef-appkop.is-zoeken .ef-appkop-m>.ef-search:not([hidden]){display:flex}
  .ef-appkop.is-zoeken .ef-appkop-sluit{display:inline-grid}
  /* het accountmenu als blad: de plakkende kop is een eigen laag (z-bar), dus het blad en zijn scrim (beide in ef-appkop-r) komen er alleen
     boven de pagina en de tabbalk uit als de kop zelf naar de laag van de lade gaat zolang het blad open is */
  .ef-appkop:has(.ef-menu--sheet:not([hidden])){z-index:var(--z-drawer,40)}
}
/* hidden wint, ook van de regels hierboven die een knop in de kop tonen */
.ef-appkop[hidden],.ef-appkop-l[hidden],.ef-appkop-m[hidden],.ef-appkop-r[hidden],.ef-appkop-sep[hidden]{display:none}
.ef-appkop [hidden]{display:none}

/* ===================================================================================================
   1.10.0 · Het zoekresultaat (ef-search-res) en de bel (ef-bel), 19-10-2026, uit het portaalontwerp P3 (ak-res) dat Remco goedkeurde.
   Het zoekresultaat is een ef-menu met role=listbox onder het zoekveld van de app-kop: groepen (role=group met een ef-menu-hd als kopje),
   opties (ef-menu-item met role=option: voorop een miniatuur ef-search-res-th, een pictogramvlak ef-search-res-ic of een ef-av, dan de titel
   en een regel eronder in ef-search-res-t, achteraan ef-search-res-meta), de treffer in <mark> (ef-search-mark: vetter en getint), de actieve
   optie met aria-selected="true" (een vlak sunken en een balk accent links, niet alleen een kleur), een voet met toetsen en het aantal
   (ef-search-res-ft) en een melding als er niets is (ef-search-res-leeg). Het aantal voor een schermlezer staat in ef-search-status
   (role=status, onzichtbaar). Vanaf 701 px hangt de lijst 10 px onder het veld, gecentreerd op het veld, --search-res (560 px) breed; op de
   telefoon is het een blad over de hele breedte direct onder de kop, alleen met is-zoeken. Het gedrag (toetsen, openen, sluiten) is van de app.
   De bel is een ef-iconbtn met ef-bel en een teller ef-bel-n (accent, --warn of --crit), weg bij 0 (leeg of hidden).
   =================================================================================================== */
.ef-search-res,.ef-search-res .ef-menu-item,.ef-search-res-ft,.ef-bel-n{box-sizing:border-box}
.ef-menu.ef-search-res{gap:0;width:var(--search-res);max-width:100%;max-height:min(72vh,640px);overflow:auto;overscroll-behavior:contain;padding:8px}
.ef-search-res [role="group"]{display:flex;flex-direction:column;gap:1px}
.ef-search-res [role="group"]+[role="group"]{margin-top:4px;padding-top:4px;border-top:1px solid var(--line)}
.ef-search-res .ef-menu-item{width:100%;min-height:44px;padding:5px 10px}
/* de actieve optie: een vlak en een balk van 3 px links. In een stand met systeemkleuren valt een schaduw weg: dan een omlijning in de tekstkleur. */
.ef-search-res .ef-menu-item[aria-selected="true"]{background:var(--float-hover);box-shadow:inset 3px 0 0 var(--accent)}
@media (forced-colors:active){.ef-search-res .ef-menu-item[aria-selected="true"]{outline:2px solid;outline-offset:-2px}}
.ef-search-res-t{flex:1 1 auto;min-width:0}
.ef-search-res-t b,.ef-search-res-t small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ef-search-res-t b{font:500 var(--fs-14)/1.3 var(--font-sans);color:var(--ink)}
.ef-search-res-t small{font:400 var(--fs-12)/1.3 var(--font-sans);color:var(--ink-2)}
.ef-search-res-meta{display:flex;flex:none;align-items:center;gap:6px;margin-left:auto;font:400 var(--fs-12)/1.3 var(--font-sans);color:var(--ink-2);white-space:nowrap}
/* de treffer: vetter (600 tegen 500 of 400) en getint, nooit alleen een kleur */
.ef-search-res mark,.ef-search-mark{padding:0 1px;border-radius:3px;background:var(--accent-bg);color:var(--ink);font-weight:600}
/* voorop: een miniatuur (een project met een beeld), een pictogramvlak (een soort zonder beeld) of een avatar. Alle drie houden een vak van 44 px,
   zodat de titels van alle groepen op één lijn staan (een avatar van 28 px krijgt 8 px opzij). */
.ef-search-res-th{position:relative;display:block;flex:none;width:44px;height:34px;overflow:hidden;border-radius:var(--radius-sm);background:var(--stage)}
.ef-search-res .ef-search-res-th>img,.ef-search-res .ef-search-res-th>svg{display:block;width:100%;height:100%;object-fit:cover}
.ef-search-res-ic{display:grid;flex:none;place-items:center;width:44px;height:34px;border-radius:var(--radius-sm);background:var(--sunken);color:var(--ink-2)}
.ef-search-res .ef-search-res-ic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ef-search-res .ef-menu-item>.ef-av{margin:0 8px}
/* de gewone avatar (accent op accent-bg) haalt op het vlak van de actieve optie (sunken) in licht maar 4,43:1: in de lijst accent-ink, net als de accentpil */
.ef-search-res .ef-av:not(.ef-av--p1,.ef-av--p2,.ef-av--p3,.ef-av--p4,.ef-av--p5,.ef-av--p6){--fg:var(--accent-ink)}
.ef-search-res .ef-menu-item[aria-selected="true"] .ef-search-res-ic{background:var(--raised)}
.ef-ruim .ef-search-res-th,.ef-ruim .ef-search-res-ic{width:48px;height:36px}
.ef-ruim .ef-search-res .ef-menu-item>.ef-av{margin:0 10px}
/* geen resultaten, of een andere enkele melding (Zoeken…, Zoeken mislukt) */
.ef-search-res-leeg{margin:0;padding:12px;font:400 var(--fs-14)/1.4 var(--font-sans);color:var(--ink-2)}
/* de voet: de toetsen (beeld, aria-hidden) en het aantal */
.ef-search-res-ft{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;margin:4px 4px 0;padding:8px 8px 4px;border-top:1px solid var(--line);font:400 var(--fs-12)/1.4 var(--font-sans);color:var(--ink-2)}
.ef-search-res-ft kbd{display:inline-block;padding:0 5px;border:1px solid var(--line-2);border-radius:5px;font:500 var(--fs-12) var(--font-sans);color:var(--ink-2)}
.ef-search-res-ft>:last-child{margin-left:auto}
.ef-search-res-leeg+.ef-search-res-ft{margin-top:0}
/* hersteld in 1.10.0: het veld in een ef-search kreeg van .ef input:focus-visible een eigen ring binnen de ring van de pil (twee ringen, zichtbaar op de
   telefoon met is-zoeken). De pil draagt de ring (:focus-within); het veld zelf niet. */
.ef-search input:focus-visible{outline:0}
/* het aantal voor een schermlezer ("8 resultaten", "Geen resultaten"): onzichtbaar, wel voorgelezen */
.ef-search-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* de plek in de app-kop: vanaf 701 px onder het veld, gecentreerd op het veld (ef-appkop-m is het veld), en nooit breder dan het scherm min 32 px */
@media (min-width:701px){
  .ef-appkop-m{position:relative}
  .ef-appkop-m>.ef-search-res{position:absolute;top:calc(100% + 10px);left:50%;z-index:calc(var(--z-bar,5) + 1);max-width:calc(100vw - 32px);transform:translateX(-50%)}
}
/* op de telefoon: een blad over de hele breedte van de kop, direct eronder (de plakkende kop is het vlak waarin hij staat); alleen met is-zoeken.
   Zolang het open is, gaat de kop naar de laag van de lade, zodat het blad over de tabbalk ligt. De toetsen in de voet vallen weg. */
@media (max-width:700.98px){
  /* de kop is hier 53 px; het blad houdt 8 px boven de tabbalk (--tabbar-h, 44 px; 52 in ef-ruim) en de veilige zone vrij */
  .ef-appkop-m>.ef-search-res{position:absolute;top:100%;left:0;right:0;z-index:1;width:auto;max-width:none;max-height:calc(100dvh - 53px - var(--tabbar-h,44px) - env(safe-area-inset-bottom,0px) - 8px);border-width:0 0 1px;border-radius:0 0 var(--radius-md) var(--radius-md)}
  .ef-appkop:not(.is-zoeken) .ef-appkop-m>.ef-search-res{display:none}
  .ef-appkop.is-zoeken:has(.ef-search-res:not([hidden])){z-index:var(--z-drawer,40)}
  .ef-search-res-ft>:not(:last-child){display:none}
  .ef-search-res-ft>:last-child{margin-left:0}
}

/* De bel: een ef-iconbtn met een teller in de hoek. De teller staat los van de breedte (absoluut), is leeg of hidden bij 0, en de app schrijft
   "9+" bij meer dan negen. De toegankelijke naam staat op de knop ("Meldingen, 3 nieuw"); de teller zelf is aria-hidden. */
.ef-iconbtn.ef-bel{position:relative}
.ef-iconbtn.ef-bel[aria-expanded="true"]{background:var(--sunken);color:var(--ink)}
.ef-bel-n{position:absolute;top:-5px;right:-5px;display:grid;place-items:center;min-width:16px;height:16px;padding:0 4px;border-radius:var(--radius-pill);background:var(--accent);color:var(--on-action);box-shadow:0 0 0 2px var(--panel);font:600 var(--fs-12)/1 var(--font-sans);font-variant-numeric:tabular-nums;white-space:nowrap;pointer-events:none}
.ef-bel-n.ef-bel-n--warn{background:var(--warn)}
.ef-bel-n.ef-bel-n--crit{background:var(--crit)}
.ef-bel-n:empty{display:none}
/* een knop van 44 px (telefoon, ef-ruim): de teller iets naar binnen, binnen het vlak van de knop */
.ef-ruim .ef-bel-n{top:2px;right:2px}
@media (max-width:700.98px){.ef-bel-n{top:2px;right:2px}}
.ef-search-res[hidden],.ef-search-res-th[hidden],.ef-search-res-ic[hidden],.ef-search-res-meta[hidden],.ef-search-res-ft[hidden],.ef-bel-n[hidden]{display:none}

/* Het account links (de aanbevolen stand sinds 1.10.0, variant C van Remco, 19-10-2026, gelijk aan het portaal P3): de app-kop heeft rechts alleen de
   acties; het account blijft onderin de zijbalk (ef-me in ef-side-foot) of de rail (een ef-rail-item met een avatar in ef-rail-foot). Het accountmenu is
   een ef-menu ef-menu--sheet ef-menu--zij, een DIRECT KIND VAN ef-app (na de zijbalk, met zijn ef-scrim--menu), nooit in de zijbalk: onder 1024 px is de
   zijbalk een lade met een transform, en een vast menu daarin hangt aan de lade in plaats van aan het scherm. Vanaf 1024 px staat het menu 2 px naast de
   zijbalk (--zijbalk: de breedte van de zijbalk, standaard --sidebar-portal; de cockpit zet --sidebar-cockpit, ingeklapt --rail), onderaan gelijk met het
   account (16 px, de opvulling van ef-side), en het groeit omhoog; 300 px breed. In een ef-app--rail (vanaf 701 px) 2 px naast de rail (--rail-werk),
   14 px van onderen. Tussen 701 en 1023 px (de lade is dicht) linksonder, 16 px van de randen. Onder 700 px is het het blad van ef-menu--sheet. */
.ef-app{--zijbalk:var(--sidebar-portal)}
.ef-side-foot .ef-me .ef-me-t{flex:1 1 auto;min-width:0}
.ef-side-foot .ef-me .ef-me-t b,.ef-side-foot .ef-me .ef-me-t small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ef-side-foot .ef-me .ef-me-t b{font:500 var(--fs-13)/1.25 var(--font-sans);color:var(--ink)}
/* de chevron wijst naar rechts: het menu opent naast de zijbalk */
.ef-side-foot .ef-me .ef-me-chev{width:14px;height:14px;flex:none;margin-left:auto;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;color:var(--ink-3)}
.ef-side-foot .ef-me[aria-expanded="true"],.ef-rail-foot .ef-rail-item[aria-expanded="true"]{background:var(--sunken);color:var(--ink)}
.ef-side-foot .ef-me:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
@media (min-width:701px){
  .ef-app>.ef-menu.ef-menu--zij{position:fixed;left:16px;bottom:16px;z-index:calc(var(--z-bar,5) + 1);width:300px;max-height:calc(100dvh - 32px);overflow-y:auto}
  .ef-app.ef-app--rail>.ef-menu.ef-menu--zij{left:calc(var(--rail-werk) + 2px);bottom:14px}
}
@media (min-width:1024px){
  .ef-app:not(.ef-app--rail)>.ef-menu.ef-menu--zij{left:calc(var(--zijbalk) + 2px)}
}

/* Uitklappen (1.10.1). Er is één tekening, assets/pictogrammen/inklappen.svg: een paneel met de scheidingslijn links en een pijl "<" ernaast (de pijl is het LAATSTE pad).
   Uitklappen is dezelfde tekening met alleen de pijl gespiegeld; het paneel blijft aan de kant waar het paneel echt zit. De knop draagt ef-inklap (het merkteken; het
   geeft zelf geen vorm), de stand ef-inklap--uit (de pijl gespiegeld: de knop klapt UIT) en, voor een paneel dat RECHTS zit, ef-inklap--rechts (de hele tekening
   gespiegeld, met het paneel rechts). De twee zijn onafhankelijk: --rechts alleen is "inklappen" van een rechterpaneel, --uit samen met --rechts is "uitklappen" ervan.
   transform-box:fill-box laat de pijl om zijn eigen midden spiegelen in plaats van om de rand van het 24-raster; de svg moet de tekening ongewijzigd inline bevatten
   (pijl als laatste pad, direct kind van de svg). Twee klassen in de selector: een algemene svg.i-regel van een app wint er niet van. */
.ef-inklap.ef-inklap--uit svg>path:last-child{transform-box:fill-box;transform-origin:center;transform:scaleX(-1)}
.ef-inklap.ef-inklap--rechts svg{transform:scaleX(-1)}
/* 1.13.0 (Dataportaal, voorstel 7): een paneel ONDER het beeld (een werkblad op een smal scherm): de tekening een kwartslag tegen de klok in, dus het paneel onder en de pijl naar beneden
   (inklappen); --uit spiegelt daarbinnen alleen de pijl zoals altijd (de pijl wijst dan omhoog). Staat na --rechts: samen geven ze geen zinvolle stand, --onder wint. */
.ef-inklap.ef-inklap--onder svg{transform:rotate(-90deg)}

/* ===========================================================================================================================================================
   1.11.0 · De werkruimte (ef-werk), besluit Remco 21-10-2026 (variant V2 van het voorstel "werkruimte-schil").
   Een werkplek (offerte maken, locatie-analyse, het offerte-voorbeeld groot) neemt het hele scherm; een venster ligt erbovenop. Dat was al de regel in Dialog.md
   ("een eigen volschermwerkruimte") maar er was geen bouwsteen voor: de cockpit had vier eigen schillen met drie maten sluitknop (30, 40 en 89 x 35 px).
   De anatomie, van boven naar beneden: de kop (ef-werk-kop: Sluiten links, eyebrow en titel, rechts pillen en opslagstatus), de band (ef-werk-band: de stappen, de
   keuze van een onderdeel of de banner van een verstuurde versie; staat vast), de body (ef-werk-body: het ENIGE dat scrolt) en eventueel de voet (ef-werk-voet).
   Dezelfde kop, band en body staan ook in een venster van vaste hoogte (ef-dlg--vast, bijvoorbeeld in maat ef-dlg--xl): daar staat de sluitknop rechts, alleen met
   het kruisje (een venster sluit ook met een klik ernaast; een werkruimte niet). Het DS levert alleen de vorm; Esc, opslaan bij sluiten en de focusval zijn gedrag van de app.
   Hergebruikt: ef-dlg-x (de sluitknop), ef-dlg-eyebrow, ef-pill, ef-savestate, ef-banner, ef-stepper (--fill --strook) en ef-seg. Alleen tokens, geen nieuwe kleur.
   Haken: --z-werk (de laag van de werkruimte, standaard 45: boven de lade van de zijbalk, --z-drawer 40). Tokens: werk-kop (64 px), werk-max (1400 px), dialog-xl (1080 px). */
.ef-werk,.ef-werk-kop,.ef-werk-band,.ef-werk-body,.ef-werk-voet{box-sizing:border-box}
.ef-werk{position:fixed;inset:0;z-index:var(--z-werk,45);display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--surface);color:var(--ink);text-align:left;font:400 var(--fs-14)/1.5 var(--font-sans)}
.ef-werk::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:3;pointer-events:none;background:linear-gradient(90deg,var(--brand-blue),var(--brand-purple-line))}
/* een venster dat boven een werkruimte opengaat (Hoofdlaag bekijken boven het offerteproces) staat in de DOM erna, en in de laag erboven */
.ef-werk~.ef-scrim{z-index:calc(var(--z-werk,45) + 1)}
/* voorbeeldhulp, geen onderdeel van het systeem: de werkruimte vult zijn ouder (position:relative met een hoogte) in plaats van het scherm; z-index:0 houdt de gradientlijn binnen de werkruimte (zonder eigen laag lekt zijn z-index:3 naar buiten) */
.ef-werk.ef-werk--in{position:absolute;z-index:0}

/* de kop: één rij van minstens 64 px op het paneelvlak. In een werkruimte staat Sluiten vooraan (met tekst), daarna een scheidingslijn, dan eyebrow en titel; rechts de pillen en
   de opslagstatus. De sluitknop staat vooraan in de DOM: dat is ook de volgorde van de Tab-toets. */
.ef-werk-kop{position:relative;flex:none;display:flex;align-items:center;gap:16px;min-width:0;min-height:var(--werk-kop);padding:10px 24px 10px 16px;background:var(--panel);border-bottom:1px solid var(--line)}
.ef-werk-titel{flex:0 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.ef-werk>.ef-werk-kop .ef-werk-titel{padding-left:16px;border-left:1px solid var(--line)}
.ef-werk-titel .ef-dlg-eyebrow{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ef-werk-h{margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:600 var(--fs-18)/1.3 var(--font-sans);letter-spacing:-.01em;color:var(--ink)}
.ef-werk-meta{flex:1 3 auto;min-width:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px}
.ef-werk-meta .ef-savestate{margin-left:8px}
/* Sluiten: de sluitknop van het venster (ef-dlg-x) in de kop. In een werkruimte een knop met tekst en omlijning, 36 px hoog; in een venster van vaste hoogte alleen het kruisje, rechts */
.ef-werk-kop .ef-dlg-x{position:relative;top:auto;right:auto;z-index:auto;flex:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;width:36px;height:36px}
.ef-werk-kop .ef-dlg-x .ef-werk-x-t,.ef-werk-kop .ef-dlg-x .ef-werk-x-terug{display:none}
.ef-werk>.ef-werk-kop .ef-dlg-x{width:auto;padding:0 14px 0 10px;border:1px solid var(--line-ctl);border-radius:var(--radius-sm);color:var(--ink);font:500 var(--fs-14)/1 var(--font-sans);white-space:nowrap}
.ef-werk>.ef-werk-kop .ef-dlg-x:hover{background:var(--sunken)}
.ef-werk>.ef-werk-kop .ef-dlg-x .ef-werk-x-t{display:inline}
.ef-dlg--vast>.ef-werk-kop{gap:12px;padding:14px 14px 14px 24px}
.ef-dlg--vast>.ef-werk-kop .ef-dlg-x{order:3;margin-left:auto}   /* margin-left:auto: het kruisje staat ook rechts als er geen ef-werk-meta in de kop zit */

/* de band: vast onder de kop, scrolt niet mee. Daarin één van drie dingen: de stappen (ef-stepper--fill ef-stepper--strook, 44 px), de keuze van een onderdeel (ef-seg) of de
   banner van een verstuurde versie (ef-banner--warn, met "Maak revisie"); staan er twee, dan onder elkaar met 12 px (de banner boven de stappen). Een lege band laat de app weg. */
.ef-werk-band{flex:none;display:flex;flex-direction:column;gap:12px;min-width:0;padding:10px max(24px,calc((100% - var(--werk-max)) / 2));background:var(--panel);border-bottom:1px solid var(--line)}
.ef-werk-band .ef-stepper{margin:0}
.ef-werk-band .ef-banner{align-items:center}
.ef-werk-band .ef-seg{align-self:flex-start;max-width:100%;overflow-x:auto;scrollbar-width:none}
.ef-werk-band .ef-seg button{flex:none;white-space:nowrap}

/* de body: het enige dat scrolt. De inhoud is hooguit 1400 px breed en gecentreerd; ef-werk-body--vlak heeft geen opvulling en scrolt niet zelf (de inhoud vult en scrolt zelf: een kaart, een iframe) */
.ef-werk-body{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;padding:20px max(24px,calc((100% - var(--werk-max)) / 2)) 24px;background:var(--surface)}
.ef-werk-body.ef-werk-body--vlak{padding:0;overflow:hidden}
.ef-dlg--vast>.ef-werk-body{padding:16px 24px}
.ef-dlg--vast>.ef-werk-body.ef-werk-body--vlak{padding:0}

/* de voet (Vorige / Volgende): vast onderaan, de laatste knop rechts */
.ef-werk-voet{flex:none;display:flex;align-items:center;gap:8px;padding:12px max(24px,calc((100% - var(--werk-max)) / 2));background:var(--panel);border-top:1px solid var(--line)}
.ef-werk-voet>:last-child{margin-left:auto}

/* Venster van vaste hoogte (ef-dlg--vast): hoogte = scherm min 48 px, in het midden. ef-dlg--xl: 1080 px. De rest is de kop, band en body van de werkruimte. */
.ef-dlg--xl{width:var(--dialog-xl)}
.ef-dlg.ef-dlg--vast{height:min(720px,calc(100dvh - 48px));max-height:none}
.ef-scrim:has(>.ef-dlg--vast){align-items:center;padding:24px}

/* Een stap als knop (sinds 1.11.0): een stap die geen link is maar een knop (de locatie-analyse: een stap wisselt het werkvlak, geen adres). Dezelfde opmaak als de stap als link. */
.ef-stepper button{display:flex;align-items:center;gap:10px;min-height:44px;margin:0;padding:4px 6px;border:0;border-radius:var(--radius-sm);background:none;color:var(--ink);font:inherit;text-align:left;white-space:nowrap;cursor:pointer}
.ef-stepper button:hover{background:var(--sunken)}
.ef-stepper button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:900px){.ef-stepper--fill button{width:100%;padding:0}}

.ef-werk[hidden],.ef-werk-band[hidden],.ef-werk-voet[hidden]{display:none}

/* Telefoon (tot 700 px): de kop wordt twee rijen: een terug-chevron van 44 px (naam "Sluiten") met de titel, eronder pillen en opslagstatus, zoals de Drawer ("volledig scherm met een
   terug-chevron"). Een venster van vaste hoogte is op de telefoon ook schermvullend, geen onderblad: het is een werkplek. De veilige zone (inkeping, gebaarbalk) blijft vrij. */
@media (max-width:700.98px){
  .ef-werk-kop,.ef-dlg--vast>.ef-werk-kop{flex-wrap:wrap;gap:4px 8px;min-height:0;padding:calc(6px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) 8px max(6px,env(safe-area-inset-left,0px))}
  .ef-werk-kop .ef-dlg-x,.ef-werk>.ef-werk-kop .ef-dlg-x{width:44px;height:44px;padding:0;border:0;border-radius:10px;color:var(--ink-2)}
  .ef-werk-kop .ef-dlg-x .ef-werk-x-ic,.ef-werk>.ef-werk-kop .ef-dlg-x .ef-werk-x-t{display:none}
  .ef-werk-kop .ef-dlg-x .ef-werk-x-terug{display:block;width:22px;height:22px}
  .ef-werk-kop .ef-dlg-x,.ef-dlg--vast>.ef-werk-kop .ef-dlg-x{order:-1;margin-left:0}
  .ef-werk-kop .ef-werk-titel,.ef-werk>.ef-werk-kop .ef-werk-titel{flex:1 1 calc(100% - 56px);padding-left:0;border-left:0}
  .ef-werk-h{white-space:normal;overflow-wrap:anywhere}
  .ef-werk-meta{order:2;flex-basis:100%;justify-content:flex-start;padding-left:12px}
  .ef-werk-meta .ef-savestate{margin-left:0;white-space:normal}
  .ef-werk-band,.ef-werk-voet{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
  .ef-werk-band{padding-top:8px;padding-bottom:8px}
  .ef-werk-body{padding:18px max(16px,env(safe-area-inset-right,0px)) 24px max(16px,env(safe-area-inset-left,0px))}
  .ef-werk-body.ef-werk-body--vlak,.ef-dlg--vast>.ef-werk-body.ef-werk-body--vlak{padding:0}
  .ef-dlg--vast>.ef-werk-body{padding:16px}
  .ef-werk-voet{padding-top:10px;padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))}
  .ef-werk-voet .ef-btn{min-height:44px}
  .ef-scrim:has(>.ef-dlg--vast){align-items:stretch;padding:0}
  .ef-dlg.ef-dlg--vast{width:100%;height:100dvh;border:0;border-radius:0}
  .ef-dlg--vast::after{display:none}
}

/* Telefoon, een werkruimte met een BANNER in de band (een verstuurde versie met "Maak revisie"; besluit Remco 21-10-2026, advies E6). Kop, band [banner, stappen], body en voet blijven in dezelfde volgorde in de DOM.
   Op een computer blijft de banner in de vaste band. Op de telefoon namen kop, banner en stappen samen ~300 van 844 px vast; nu blijven alleen de kop en de stappen staan en scrolt de banner mee met de inhoud.
   De werkruimte zelf is dan de scrollhouder (de enige uitzondering op "alleen de body scrolt"); de band is display:contents, zodat de banner in de stroom staat en de stappen plakken. De stappen plakken onder de kop
   op --werk-kop-h: de hoogte van de kop, die CSS niet kan lezen en die ef-werk.js (efWerk) bijhoudt; zonder script geldt de reserve van 96 px. Een werkruimte zonder banner in de band verandert niet. */
@media (max-width:700.98px){
  .ef-werk:has(>.ef-werk-band>.ef-banner){overflow-y:auto;overscroll-behavior:contain}
  .ef-werk:has(>.ef-werk-band>.ef-banner)::before{position:sticky;top:0;flex:none;height:2px;margin-bottom:-2px}
  .ef-werk:has(>.ef-werk-band>.ef-banner)>.ef-werk-kop{position:sticky;top:0;z-index:2}
  .ef-werk:has(>.ef-werk-band>.ef-banner)>.ef-werk-band{display:contents}
  .ef-werk:has(>.ef-werk-band>.ef-banner)>.ef-werk-band>.ef-banner{flex:none;margin:8px max(16px,env(safe-area-inset-right,0px)) 8px max(16px,env(safe-area-inset-left,0px))}
  .ef-werk:has(>.ef-werk-band>.ef-banner)>.ef-werk-band>.ef-stepper{flex:none;position:sticky;top:var(--werk-kop-h,96px);z-index:1;padding:8px max(16px,env(safe-area-inset-right,0px)) 8px max(16px,env(safe-area-inset-left,0px));background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .ef-werk:has(>.ef-werk-band>.ef-banner)>.ef-werk-body{flex:1 0 auto;overflow:visible}
  .ef-werk:has(>.ef-werk-band>.ef-banner)>.ef-werk-voet{position:sticky;bottom:0}
}