@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;
  --page-detail-max:1200px;
  --info-rail:320px;
  --ws-rail:360px;
  --form-max:760px;
  --dialog-s:460px;
  --dialog-m:620px;
  --dialog-l:940px;
  --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;
  --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);
  --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);
  --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:#3e9e7b;
  --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);
  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:#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);
    --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);
    --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);
    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:#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);
  --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);
  --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);
  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;
  --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);
  --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);
  --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:#3e9e7b;
  --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);
  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:#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);
  --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);
  --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);
  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:2;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)}
.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.6;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.7;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)}
textarea.ef-input{min-height:0;padding:8px 12px;line-height:1.5;resize:vertical}
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:2;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.6;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:2;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;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:2;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:700px){
  .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;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.7;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:2;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:2;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(--line-2);border-radius:var(--radius-md);box-shadow:var(--shadow-pop)}
.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(--sunken)}
.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(--line-2);border-radius:var(--radius-md);box-shadow:var(--shadow-pop);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:2;stroke-linecap:round;stroke-linejoin:round}
.ef-dp-mnd:hover,.ef-dp-nav:hover,.ef-dp-day:hover,.ef-dp-link:hover{background:var(--sunken)}
.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:700px){
  .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.7;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(--line-2);border-radius:var(--radius-sm);background:var(--raised);box-shadow:var(--shadow-pop);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:700px){
  .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:700px){
  .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;padding:6px 10px 14px;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 .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:700px){
  .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:700px){.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:700px){.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:700px){
  .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:700px){.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:700px){
  .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.6;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:2;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.9;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.9;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:2;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:700px){
  .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:2;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 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:700px){
  .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}