/* TomBat VanMoof Studio — huisstijl (ink + warm stone + sage-green accent) */
:root{
  --ink:#0A0A0A; --ink-soft:#6B6B66; --ink-faint:#9A968D;
  --paper:#F5F3EF; --surface:#FFFFFF;
  --stone-100:#EFEDE8; --stone-200:#E5E2DB; --stone-300:#D6D2C9;
  --accent:#7BC47A; --accent-ink:#2C7A2C; --accent-soft:#EAF5E9; --accent-glow:rgba(123,196,122,.35);
  --warn:#B4791F; --warn-soft:#F6EFDE; --danger:#C0492F; --danger-soft:#F7E7E2;
  --radius:14px; --radius-sm:10px; --radius-lg:20px;
  --shadow:0 10px 34px rgba(10,10,10,.09); --shadow-sm:0 2px 10px rgba(10,10,10,.05);
  --ease:cubic-bezier(.16,1,.3,1);
  --sidebar:236px;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}
*{box-sizing:border-box}
/* hidden moet winnen van .btn/.row/.msg (display:flex verslaat de UA-regel [hidden]{display:none}) */
[hidden]{display:none!important}
html,body{margin:0;height:100%}
body{background:var(--paper);color:var(--ink);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-weight:800;letter-spacing:-.02em;margin:0}
h1{font-size:24px} h2{font-size:18px} h3{font-size:15px}
a{color:var(--accent-ink);text-decoration:none}
button{font-family:inherit}
.mono{font-family:'JetBrains Mono',ui-monospace,'Cascadia Code',Consolas,monospace}
.muted{color:var(--ink-soft)} .faint{color:var(--ink-faint)}

/* layout */
.app{display:grid;grid-template-columns:var(--sidebar) 1fr;height:100vh;height:100dvh;overflow:hidden}
.sidebar{background:var(--ink);color:#EDEBE6;display:flex;flex-direction:column;padding:20px 14px;gap:6px;min-height:0;overflow:hidden}
.brand{display:flex;align-items:center;gap:10px;padding:6px 8px 18px}
.brand .logo{width:30px;height:30px;border-radius:9px;overflow:hidden;display:grid;place-items:center;flex:0 0 30px}
.brand .logo img{width:30px;height:30px;display:block;user-select:none;-webkit-user-drag:none}
.brand .name{font-weight:800;letter-spacing:-.02em;font-size:15px;line-height:1.1}
.brand .name small{display:block;color:#8C877E;font-weight:600;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase}
.nav{display:flex;flex-direction:column;gap:2px;margin-top:6px;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;flex:1 1 auto;min-height:0}
.nav-section{color:#78736A;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:13px 12px 4px}
.nav::-webkit-scrollbar{width:6px}
.nav::-webkit-scrollbar-thumb{background:#2a2a2a;border-radius:3px}
.nav button{display:flex;align-items:center;gap:11px;background:transparent;border:0;color:#C9C5BC;padding:10px 12px;border-radius:10px;cursor:pointer;font-size:13.5px;font-weight:600;text-align:left;transition:background .18s var(--ease),color .18s var(--ease)}
.nav button svg{width:18px;height:18px;flex:0 0 18px;stroke-width:2}
.nav button:hover{background:#161616;color:#F3F1EC}
.nav button.active{background:var(--accent);color:var(--ink)}
.sidebar .foot{margin-top:auto;padding:10px 8px 2px;color:#7C776E;font-size:11px}

.main{overflow-y:auto;-webkit-overflow-scrolling:touch;position:relative;min-height:0}
.topbar{position:sticky;top:0;z-index:5;background:rgba(245,243,239,.86);backdrop-filter:blur(8px);border-bottom:1px solid var(--stone-200);padding:12px 22px;display:flex;align-items:center;gap:14px}
.topbar .title{flex:1}
.topbar .title p{margin:2px 0 0;color:var(--ink-soft);font-size:12.5px}
.view{padding:18px 22px 48px;max-width:1180px}

/* hamburger + drawer-achtergrond (basis = desktop: verborgen) */
.hamburger{display:none;align-items:center;justify-content:center;width:40px;height:40px;border-radius:11px;border:1px solid var(--stone-300);background:var(--surface);color:var(--ink);cursor:pointer;flex:0 0 auto}
.hamburger svg{width:20px;height:20px;stroke-width:2.2}
.hamburger:active{background:var(--stone-100)}
.nav-backdrop{display:none}
.topbrand{display:none}

/* mobiel/tablet: zijbalk wordt een uitschuifbare drawer met hamburger linksboven */
@media (max-width:820px){
  .app{grid-template-columns:1fr}
  .sidebar{position:fixed;top:0;left:0;bottom:0;width:min(84vw,300px);z-index:60;flex-direction:column;
    transform:translateX(-100%);transition:transform .26s var(--ease);box-shadow:8px 0 40px rgba(0,0,0,.45);
    overflow-y:auto;-webkit-overflow-scrolling:touch;padding:18px 14px}
  .app.nav-open .sidebar{transform:translateX(0)}
  .nav-backdrop{display:block;position:fixed;inset:0;background:rgba(10,10,10,.5);z-index:55;
    opacity:0;pointer-events:none;transition:opacity .26s var(--ease)}
  .app.nav-open .nav-backdrop{opacity:1;pointer-events:auto}
  .hamburger{display:inline-grid;margin-right:auto}
  .nav button{font-size:15px;padding:12px 12px}
  .view{padding:14px 14px 56px}
  .topbar{padding:12px 14px;gap:10px;position:relative;justify-content:flex-start}
  .topbar > *:not(.topbrand){position:relative;z-index:1}
  .topbar .title{display:none}
  .topbrand{display:flex;align-items:center;gap:8px;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:0}
  .topbrand img{width:26px;height:26px;border-radius:8px}
  .topbrand b{font-weight:800;font-size:14.5px;letter-spacing:-.02em;color:var(--ink);white-space:nowrap}
  /* Tikdoelen. .btn.sm kwam op 30px uit — gemeten 36 stuks op Fietsen, 51 op Matrix &
     geluid, 26 op Besturen. Aan een werkbank, met handschoenen of vette vingers, is dat
     te klein om betrouwbaar te raken. 40px is de ondergrens die nog compact oogt. */
  .btn.sm{min-height:40px;padding:9px 14px;font-size:12.5px}
  .btn.icon{min-height:40px;min-width:40px}
  /* De verbindingspil in de topbar is geen werkbank-knop maar chrome: die mag klein
     blijven, anders groeit de balk zelf mee. */
  .connbar .cact{min-height:30px;padding:4px 8px}
  /* Filterchips die als knop werken (console-catalogus) kwamen op 29px uit. Alleen de
     klikbare variant optrekken — .chip is elders ook een label. */
  button.chip{min-height:36px}
}

/* pills / badges */
.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.02em}
.pill.green{background:var(--accent-soft);color:var(--accent-ink)}
.pill.ink{background:var(--stone-100);color:var(--ink-soft)}
.pill.warn{background:var(--warn-soft);color:var(--warn)}
.pill.danger{background:var(--danger-soft);color:var(--danger)}
.dot{width:7px;height:7px;border-radius:50%;background:currentColor;display:inline-block}

/* cards */
.card{background:var(--surface);border:1px solid var(--stone-200);border-radius:var(--radius);padding:14px;box-shadow:var(--shadow-sm);transition:box-shadow .2s var(--ease),transform .2s var(--ease)}
.card.hover:hover{box-shadow:var(--shadow);transform:translateY(-1px)}
/* Aan de fiets: compact connection, everyday controls, optional workshop tools. */
.ble-workbench{max-width:1080px;display:grid;gap:18px}
.ble-workbench>.card{padding:22px;margin:0;box-shadow:none}
.ble-card-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:20px;flex-wrap:wrap}
.ble-eyebrow{font-size:10px;font-weight:700;letter-spacing:.12em;color:var(--ink-soft);display:block;margin-bottom:5px}
.ble-connect-row{display:flex;gap:10px;align-items:end;flex-wrap:wrap}
.ble-picker{display:grid;gap:7px;font-size:12px;color:var(--ink-soft);flex:1;min-width:180px}
.ble-picker select{width:100%;color:var(--ink)}
.ble-control-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 28px}
.ble-control{min-width:0;padding:18px 0;border-top:1px solid var(--stone-100)}
.ble-control h3{font-size:13px;font-weight:650;margin-bottom:12px}
.ble-control .row{gap:8px;flex-wrap:wrap}
.ble-control .btn{min-height:38px;padding:8px 13px}
.ble-diagnose>h2{font-size:15px;margin:2px 0 12px}
.ble-shortcuts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ble-shortcut{display:flex;align-items:center;gap:12px;text-align:left;background:var(--surface);border:1px solid var(--stone-200);border-radius:12px;padding:18px 14px;color:var(--ink);cursor:pointer;min-width:0}
.ble-shortcut:hover{border-color:var(--accent-ink);background:var(--accent-soft)}
.ble-shortcut>svg{width:21px;height:21px;flex-shrink:0;color:var(--accent-ink)}
.ble-shortcut>svg:last-child{width:14px;color:var(--ink-faint)}
.ble-shortcut>span{flex:1;min-width:0}.ble-shortcut strong{display:block;font-size:13px}.ble-shortcut small{display:block;font-size:11px;color:var(--ink-soft);line-height:1.5;margin-top:4px}
.ble-workbench>.ble-fold{padding:0;overflow:hidden}
.ble-fold>summary{cursor:pointer;padding:17px 20px;font-weight:650;font-size:13px}
.ble-fold>summary small{font-weight:400;color:var(--ink-soft);display:block;margin:4px 0 0 16px;font-size:12px}
.ble-fold[open]>summary{border-bottom:1px solid var(--stone-200)}
.ble-fold-body{padding:20px;min-width:0}.ble-fold-body p{line-height:1.6}
.ble-fold-body table{table-layout:fixed;width:100%}.ble-fold-body td{overflow-wrap:anywhere}
.ble-experiment{border-top:1px solid var(--stone-200);padding-top:16px;margin-top:8px}.ble-experiment>summary{cursor:pointer;font-size:12px;margin-bottom:12px}
.subtabs.live-tabs{max-width:1080px;flex-wrap:wrap;overflow:visible}
.live-tabs>select{margin-left:auto;width:auto;max-width:240px;font-size:12px;background:transparent}
@media(max-width:760px){.ble-shortcuts{grid-template-columns:1fr}.ble-shortcut{padding:14px}.ble-workbench>.card{padding:16px}.ble-workbench>.ble-fold{padding:0}.ble-fold-body{padding:16px}.live-tabs{flex-wrap:wrap;overflow:visible}.live-tabs>.subtab{flex:1;justify-content:center;padding:9px 8px;font-size:12px}.live-tabs>select{width:100%;max-width:none;margin:4px 0 0}.ble-card-heading{margin-bottom:16px}}
@media(max-width:460px){.ble-control-grid{grid-template-columns:1fr}.ble-picker{flex-basis:100%}.ble-connect-row>.btn{flex:1}.ble-connection .spread{flex-wrap:wrap;gap:10px}.ble-fold-body .grid.two{grid-template-columns:minmax(0,1fr)}}
.grid{display:grid;gap:12px}
.grid.two{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.grid.three{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.row{display:flex;align-items:center;gap:12px}
.spread{display:flex;align-items:center;justify-content:space-between;gap:12px}

/* ── uitklapbaar paneel (VM.panel) — herbruikbaar, status in localStorage ──── */
.card.collapsible{padding:0;overflow:hidden}
.panel-head{display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer;user-select:none}
.panel-head .k{width:26px;height:26px;border-radius:8px;background:var(--accent-soft);color:var(--accent-ink);display:grid;place-items:center;flex:0 0 26px}
.panel-head .k svg{width:15px;height:15px;stroke-width:2.2}
.panel-head h3{flex:1;font-size:15px}
.panel-head .count{font-size:11px;font-weight:700;color:var(--ink-faint);background:var(--stone-100);padding:2px 9px;border-radius:999px}
.panel-head .chev{width:18px;height:18px;color:var(--ink-faint);flex:0 0 18px;transition:transform .2s var(--ease)}
.card.collapsible.open .panel-head .chev{transform:rotate(90deg)}
.panel-head:hover{background:var(--stone-100)}
.panel-head:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.panel-body{padding:2px 14px 15px}
.card.collapsible:not(.open) .panel-body{display:none}

/* ── dashboard: status-strip, telemetrie-tegels, snelacties ─────────────────── */
.dash-strip{display:flex;gap:10px;flex-wrap:wrap}
.stat{flex:1 1 150px;min-width:140px;background:var(--surface);border:1px solid var(--stone-200);border-radius:var(--radius-sm);padding:11px 13px;box-shadow:var(--shadow-sm)}
.stat .lbl{font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-faint)}
.stat .val{font-size:19px;font-weight:800;letter-spacing:-.02em;margin-top:4px;display:flex;align-items:center;gap:8px;line-height:1.15}
.stat .sub{font-size:11.5px;color:var(--ink-soft);margin-top:2px}
.stat .sdot{width:9px;height:9px;border-radius:50%;background:var(--ink-faint);flex:0 0 9px}
.stat .sdot.green{background:var(--accent)} .stat .sdot.warn{background:var(--warn)} .stat .sdot.danger{background:var(--danger)}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.qgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:10px}
.qbtn{display:flex;flex-direction:column;align-items:flex-start;gap:9px;padding:13px;border:1px solid var(--stone-300);background:var(--surface);border-radius:var(--radius-sm);cursor:pointer;font-family:inherit;font-weight:700;font-size:13.5px;color:var(--ink);text-align:left;min-height:76px;transition:all .18s var(--ease)}
.qbtn:hover{border-color:var(--ink);box-shadow:var(--shadow-sm);transform:translateY(-1px)}
.qbtn .k{width:32px;height:32px;border-radius:9px;background:var(--accent-soft);color:var(--accent-ink);display:grid;place-items:center;flex:0 0 32px}
.qbtn .k svg{width:18px;height:18px;stroke-width:2}
.dash-empty{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:6px 2px}
.dash-empty .ei{width:40px;height:40px;border-radius:11px;background:var(--accent-soft);color:var(--accent-ink);display:grid;place-items:center}
.dash-empty .ei svg{width:22px;height:22px;stroke-width:2}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--stone-300);background:var(--surface);color:var(--ink);padding:9px 15px;border-radius:11px;font-weight:700;font-size:13px;cursor:pointer;transition:all .18s var(--ease)}
.btn svg{width:16px;height:16px;stroke-width:2}
.btn:hover{border-color:var(--ink);box-shadow:var(--shadow-sm)}
.btn.primary{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn.primary:hover{box-shadow:0 8px 24px var(--accent-glow);border-color:var(--accent)}
.btn.accent{background:var(--accent);border-color:var(--accent);color:var(--ink)}
.btn.ghost{border-color:transparent;background:transparent}
.btn.ghost:hover{background:var(--stone-100);border-color:transparent;box-shadow:none}
.btn.sm{padding:6px 10px;font-size:12px;border-radius:9px}
.btn.icon{padding:7px;border-radius:9px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.danger-btn{background:var(--danger);border-color:var(--danger);color:#fff}
.btn.danger-btn:hover{box-shadow:0 8px 24px rgba(192,73,47,.35);border-color:var(--danger)}

/* forms */
label.field{display:block;font-size:12px;font-weight:700;color:var(--ink-soft);margin:0 0 6px}
input[type=text],input[type=number],input[type=search],input[type=password],input[type=email],select,textarea{width:100%;border:1px solid var(--stone-300);border-radius:10px;padding:9px 11px;font-size:13.5px;font-family:inherit;background:var(--surface);color:var(--ink);transition:border-color .16s var(--ease),box-shadow .16s var(--ease)}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.switch{position:relative;width:40px;height:23px;flex:0 0 40px}
.switch input{opacity:0;width:0;height:0}
.switch span{position:absolute;inset:0;background:var(--stone-300);border-radius:999px;cursor:pointer;transition:.2s var(--ease)}
.switch span:before{content:"";position:absolute;width:17px;height:17px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s var(--ease);box-shadow:var(--shadow-sm)}
.switch input:checked+span{background:var(--accent)}
.switch input:checked+span:before{transform:translateX(17px)}

/* tables */
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-faint);font-weight:700;padding:8px 10px;border-bottom:1px solid var(--stone-200)}
td{padding:9px 10px;border-bottom:1px solid var(--stone-100)}
tr:last-child td{border-bottom:0}

/* section header */
.sec-h{display:flex;align-items:center;gap:10px;margin:4px 0 11px}
.sec-h .k{width:26px;height:26px;border-radius:8px;background:var(--accent-soft);color:var(--accent-ink);display:grid;place-items:center}
.sec-h .k svg{width:15px;height:15px;stroke-width:2.2}

/* sub-tabs — hub "Aan de fiets (live)": bestaande live-views als panelen */
.subtabs{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:2px 0 16px;padding-bottom:10px;border-bottom:1px solid var(--stone-200)}
.subtab{display:inline-flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--stone-300);color:var(--ink-soft);padding:8px 14px;border-radius:11px;font-weight:700;font-size:13px;cursor:pointer;transition:all .18s var(--ease)}
.subtab svg{width:16px;height:16px;stroke-width:2}
.subtab:hover{border-color:var(--ink);color:var(--ink)}
.subtab.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.subpanel{min-height:120px}
@media (max-width:820px){.subtabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}.subtab{flex:0 0 auto;white-space:nowrap}}

/* uitgegrijsde kaart — bv. een patch met status needs_re (nog te RE'en) */
.card.is-disabled{opacity:.6}
.card.is-disabled .btn:disabled{cursor:not-allowed}

/* reveal */
.reveal{opacity:0;transform:translateY(8px);animation:reveal .5s var(--ease) forwards}
@keyframes reveal{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.reveal{animation:none;opacity:1;transform:none}}

/* toast */
#toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;padding:11px 18px;border-radius:12px;font-weight:600;font-size:13px;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:.3s var(--ease);z-index:50}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
#toast.err{background:var(--danger)}

/* on-demand uitleg — houdt schermen rustig (info-icoon + inklapbare uitleg) */
.info{position:relative;display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;background:var(--stone-200);color:var(--ink-soft);font-size:10px;font-weight:800;font-style:normal;cursor:help;flex:0 0 16px;vertical-align:middle}
.info:hover,.info:focus{background:var(--ink);color:#fff;outline:0}
.info .pop{position:absolute;top:23px;left:50%;transform:translateX(-50%) translateY(-4px);width:max-content;max-width:280px;background:var(--ink);color:#EDEBE6;font-size:12px;font-weight:500;line-height:1.5;padding:9px 11px;border-radius:10px;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:opacity .16s var(--ease),transform .16s var(--ease);z-index:30;text-align:left}
.info:hover .pop,.info:focus .pop{opacity:1;transform:translateX(-50%) translateY(0)}
/* Mobiel: de tooltip hangt aan de "i" en werd rechts afgekapt — gemeten 280px breed
   met 103px buiten een scherm van 375. CSS kan niet om een rand heen rekenen, dus op
   smalle schermen wordt het een balk onderin die per definitie past. */
@media (max-width:820px){
  .info .pop{position:fixed;left:12px;right:12px;top:auto;bottom:16px;width:auto;max-width:none;
    transform:translateY(6px);font-size:13px;padding:12px 14px}
  .info:hover .pop,.info:focus .pop{transform:translateY(0)}
}
details.help{margin:8px 0 0;font-size:12.5px}
details.help>summary{list-style:none;cursor:pointer;color:var(--ink-soft);font-weight:700;display:inline-flex;align-items:center;gap:6px;user-select:none}
details.help>summary::-webkit-details-marker{display:none}
details.help>summary::before{content:"";width:13px;height:13px;flex:0 0 13px;background:no-repeat center/contain;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6B66' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");transition:transform .16s var(--ease)}
details.help[open]>summary::before{transform:rotate(90deg)}
details.help>div{margin-top:8px;color:var(--ink-soft);line-height:1.55;max-width:72ch}
details.help>div+div{margin-top:6px}

/* ══════════ command-palette / globaal zoeken (palette.js) ══════════ */
/* Zoekknop in de topbar */
.omni-trigger{display:inline-flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--stone-300);color:var(--ink-soft);padding:8px 12px;border-radius:11px;font-weight:600;font-size:13px;cursor:pointer;transition:all .18s var(--ease);min-width:196px}
.omni-trigger:hover{border-color:var(--ink);color:var(--ink);box-shadow:var(--shadow-sm)}
.omni-trigger svg{width:16px;height:16px;stroke-width:2;flex:0 0 16px}
.omni-trigger .lbl{flex:1;text-align:left}
kbd{font-family:inherit;font-size:10.5px;font-weight:700;color:var(--ink-soft);background:var(--stone-100);border:1px solid var(--stone-200);border-bottom-width:2px;border-radius:6px;padding:1px 6px;min-width:17px;display:inline-flex;justify-content:center;line-height:1.5}

/* Overlay + dialoog */
.omni{position:fixed;inset:0;z-index:60;display:flex;justify-content:center;align-items:flex-start;padding:12vh 16px 16px;background:rgba(10,10,10,.44);backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .18s var(--ease)}
.omni.open{opacity:1;pointer-events:auto}
.omni-box{width:100%;max-width:600px;max-height:72vh;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--stone-200);border-radius:var(--radius-lg);box-shadow:var(--shadow);overflow:hidden;transform:translateY(-10px) scale(.985);transition:transform .2s var(--ease)}
.omni.open .omni-box{transform:none}
@media (prefers-reduced-motion:reduce){.omni,.omni-box{transition:none}}

/* Zoekregel */
.omni-search{display:flex;align-items:center;gap:12px;padding:15px 18px;border-bottom:1px solid var(--stone-200);flex:0 0 auto}
.omni-search svg{width:19px;height:19px;stroke-width:2;color:var(--ink-faint);flex:0 0 19px}
.omni-search input[type=text]{border:0;outline:0;background:transparent;box-shadow:none;padding:0;width:100%;font-size:16px;font-weight:600;color:var(--ink)}
.omni-search input[type=text]:focus{border:0;box-shadow:none}
.omni-search input::placeholder{color:var(--ink-faint);font-weight:500}
.omni-search .esc{flex:0 0 auto}

/* Resultaten */
.omni-results{overflow-y:auto;overscroll-behavior:contain;padding:8px;min-height:0}
.omni-group{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);padding:12px 12px 6px}
.omni-group:first-child{padding-top:6px}
.omni-item{display:flex;align-items:center;gap:12px;padding:9px 11px;border-radius:10px;cursor:pointer}
.omni-item .k{width:30px;height:30px;border-radius:9px;background:var(--accent-soft);color:var(--accent-ink);display:grid;place-items:center;flex:0 0 30px}
.omni-item .k svg{width:16px;height:16px;stroke-width:2}
.omni-item .txt{flex:1;min-width:0}
.omni-item .txt b{display:block;font-size:13.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.omni-item .txt span{display:block;font-size:11.5px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.omni-item .tag{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-faint);background:var(--stone-100);padding:3px 8px;border-radius:999px;flex:0 0 auto}
.omni-item.active{background:var(--ink)}
.omni-item.active .txt b{color:#fff}
.omni-item.active .txt span{color:#B9B4AB}
.omni-item.active .tag{background:#1e1e1e;color:#C9C5BC}
.omni-item.active .k{background:var(--accent);color:var(--ink)}
.omni-empty{padding:34px 18px;text-align:center;color:var(--ink-soft);font-size:13px}

/* Voettekst met toets-hints */
.omni-foot{display:flex;align-items:center;gap:16px;padding:10px 16px;border-top:1px solid var(--stone-200);font-size:11.5px;color:var(--ink-faint);flex:0 0 auto}
.omni-foot .sp{flex:1}
.omni-foot .hint{display:inline-flex;align-items:center;gap:6px}

/* Kort oplichten van de doel-sectie na een sprong (VM.reveal) */
.flash{animation:omniflash 1.7s var(--ease)}
@keyframes omniflash{0%,100%{box-shadow:var(--shadow-sm)}16%{box-shadow:0 0 0 3px var(--accent-glow),var(--shadow)}}
@media (prefers-reduced-motion:reduce){.flash{animation:none}}

@media (max-width:820px){
  .omni{padding:8vh 10px 10px}
  .omni-trigger{min-width:0;padding:8px}
  .omni-trigger .lbl,.omni-trigger kbd{display:none}
  .omni-foot .hint:nth-child(n+3){display:none}
}

/* ── verbindingsbalk in de topbar: verbinding als toestand, op elk scherm ──── */
.connbar{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;
  padding:5px 6px 5px 11px;border:1px solid var(--stone-300);border-radius:999px;
  background:var(--surface);font-size:12.5px;font-weight:600;color:var(--ink-soft)}
.connbar .cdot{width:8px;height:8px;border-radius:50%;background:var(--stone-300);flex:0 0 8px;
  transition:background .25s var(--ease),box-shadow .25s var(--ease)}
.connbar.half .cdot{background:var(--warn)}
.connbar.auth .cdot{background:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.connbar.auth{border-color:var(--accent);color:var(--ink)}
.connbar .ctxt{max-width:24ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.connbar .cact{padding:4px 11px;font-size:12px;border-radius:999px}
.connbar .cact svg{width:14px;height:14px}

/* ── nav: label links, "wat heb je hiervoor nodig"-stip rechts ────────────── */
.nav button .nav-lbl{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav button .need{width:7px;height:7px;border-radius:50%;flex:0 0 7px;background:#33322F;
  transition:background .25s var(--ease),box-shadow .25s var(--ease)}
.nav button .need-kabel{background:transparent;box-shadow:inset 0 0 0 1.5px #4A4842}
.app.ble-on .nav button .need-ble{background:var(--warn)}
.app.ble-auth .nav button .need-ble{background:var(--accent);box-shadow:0 0 0 3px rgba(123,196,122,.22)}
.nav button.active .need{background:rgba(10,10,10,.22)}
.nav button.active .need-kabel{background:transparent;box-shadow:inset 0 0 0 1.5px rgba(10,10,10,.3)}
.app.ble-auth .nav button.active .need-ble{background:var(--ink);box-shadow:none}

@media (max-width:820px){
  .connbar{padding:5px 6px 5px 9px;gap:6px}
  .connbar .ctxt,.connbar .clbl{display:none}
  .connbar .cact{padding:4px 8px}
  /* Op een telefoon is de topbar te smal voor hamburger + merk + status + acties.
     Het merk staat al in de drawer en op het PWA-icoon; de ruimte gaat naar de
     verbindingsstatus en de knoppen van het scherm zelf. */
  .topbrand{display:none}
}

/* Compact navigation: the Bluetooth start screen has two readout choices. */
.subtabs.live-tabs[hidden]{display:none}
.live-more{margin-top:18px;max-width:1080px;padding:16px}
.live-more>summary{cursor:pointer;font-size:13px;font-weight:600}
.live-more>select{margin-top:12px;max-width:100%;width:300px}
.ble-connection .ble-connect-row{grid-template-columns:minmax(0,1fr) auto}
.ble-connection .ble-connect-row:has(>button[hidden]){grid-template-columns:1fr}

/* Shared, quiet layouts for overview, registry and workshop screens. */
.studio-overview{display:grid;gap:18px}
.studio-summary{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;padding:22px}
.studio-summary p{margin:6px 0 0}
.studio-shortcuts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.studio-shortcut{display:flex;align-items:center;gap:16px;text-align:left;color:var(--ink);background:var(--surface);border:1px solid var(--stone-200);border-radius:14px;padding:22px;cursor:pointer;min-width:0}
.studio-shortcut:hover{border-color:var(--accent-ink);background:var(--accent-soft)}
.studio-shortcut>svg{width:22px;height:22px;flex:none;color:var(--accent-ink)}
.studio-shortcut>svg:last-child{width:15px;color:var(--ink-faint)}
.studio-shortcut>span{flex:1;min-width:0}.studio-shortcut strong,.studio-shortcut small{display:block}
.studio-shortcut strong{font-size:15px}.studio-shortcut small{color:var(--ink-soft);margin-top:5px;line-height:1.5}
.studio-extra{margin-top:18px}.studio-extra>summary,.bike-manage>summary,.audit-details>summary{cursor:pointer;font-weight:600;font-size:13px}
.studio-extra[open]>summary{margin-bottom:16px}
.studio-extra>.card{box-shadow:none}
.studio-filter{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.studio-filter input{flex:1;max-width:440px;min-width:180px}
.bike-list{align-items:start}.bike-list>.card{padding:20px;box-shadow:none}
.bike-list .spread{gap:10px;flex-wrap:wrap}.bike-manage{margin-top:16px;padding-top:14px;border-top:1px solid var(--stone-200)}
.studio-technical{font-size:12px;overflow-wrap:anywhere;display:grid;gap:8px;margin:14px 0}
.audit-table{width:100%;table-layout:fixed}.audit-table th:first-child{width:180px}.audit-table th:nth-child(2){width:190px}
.audit-table td{vertical-align:top;overflow-wrap:anywhere}.audit-table .pill{white-space:normal;overflow-wrap:anywhere}
.bld-description{margin-top:8px}.bld-description>summary{cursor:pointer;color:var(--ink-soft);font-size:12px}
.mobile-page-title{display:none}
.page-content,.page-actions{min-width:0}.page-actions{flex-wrap:wrap}
.info .pop{display:none}
.info:hover .pop,.info:focus .pop{display:block}
:where(button,a,input,select,textarea,summary,[tabindex]):focus-visible{outline:3px solid var(--accent-ink);outline-offset:3px}
.grid>*{min-width:0}
@media(max-width:820px){.mobile-page-title{display:block;font-size:20px;margin:0 0 18px}.studio-shortcuts{grid-template-columns:1fr}.studio-shortcut{padding:18px}.studio-summary{padding:18px}.topbar #topActions{max-width:50%;flex-wrap:wrap}.audit-table th:first-child{width:135px}.audit-table th:nth-child(2){width:125px}.audit-table{min-width:390px}}
@media(max-width:600px){
  .subtabs:not(.live-tabs){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;gap:6px}
  .subtabs:not(.live-tabs) .subtab{white-space:normal;justify-content:center;min-width:0;padding:10px 8px;font-size:12px}
  .subtabs:not(.live-tabs)>.subtab:last-child:nth-child(odd){grid-column:1/-1}
  .audit-table{min-width:0;table-layout:auto}.audit-table thead{display:none}
  .audit-table tbody{display:block}.audit-table tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:14px 0;border-bottom:1px solid var(--stone-200)}
  .audit-table tr:last-child{border:0}.audit-table td{padding:0;border:0;min-width:0}
  .audit-table td:first-child{grid-column:1/-1;white-space:normal!important}
  .audit-table td:last-child:has(details[open]){grid-column:1/-1}
}

/* Mobile navigation, readable form fields and narrow-screen content. */
.nav-close{display:none}
.firmware-entry-name{min-width:0;overflow-wrap:anywhere}
@media(max-width:820px){
  .nav-close{display:inline-flex;align-self:flex-end;flex-shrink:0;color:var(--ink);min-width:44px;min-height:44px}
  .hamburger,.omni-trigger,.connbar .cact,.btn,.btn.sm,.btn.icon{min-height:44px}
  .hamburger,.omni-trigger,.btn.icon{min-width:44px}
  .app.nav-open .main{overflow:hidden}
  .sidebar{padding-top:max(14px,env(safe-area-inset-top));padding-bottom:max(14px,env(safe-area-inset-bottom))}
  .view{padding-bottom:calc(56px + env(safe-area-inset-bottom))}
  .topbar{padding-top:max(12px,env(safe-area-inset-top));flex-wrap:wrap}
  .view input:not([type=checkbox]):not([type=radio]):not([type=range]),.view select,.view textarea{font-size:16px!important;max-width:100%;min-width:0}
  .view input:not([type=checkbox]):not([type=radio]):not([type=range]),.view select{min-height:44px}
  .grid.two{grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
  .grid.three{grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr))}
  summary{min-height:36px;align-content:center}
  .omni{padding-top:max(16px,env(safe-area-inset-top));padding-bottom:max(16px,env(safe-area-inset-bottom))}
  .omni-box{max-height:calc(100dvh - 32px)}
  .omni-search{gap:8px;padding:12px}.omni-search input{min-width:0}
  .omni-foot{display:none}
}
@media(max-width:560px){
  .step-head{flex-wrap:wrap}
  .step-actions{flex-basis:100%;justify-content:flex-end;flex-wrap:wrap;margin-top:5px}
  .privacy-flow-table{width:100%;table-layout:fixed}
  .privacy-flow-table th,.privacy-flow-table td{overflow-wrap:anywhere;padding:8px 5px}
}
@media(prefers-reduced-motion:reduce){.sidebar,.nav-backdrop{transition:none}}

@media(min-width:601px) and (max-width:820px){
  .subtabs:not(.live-tabs){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible;gap:6px}
  .subtabs:not(.live-tabs) .subtab{white-space:normal;justify-content:center;min-width:0;padding:10px 8px}
}

@media(max-width:820px){
  .sidebar{box-shadow:none}
  .app.nav-open .sidebar{box-shadow:8px 0 40px rgba(0,0,0,.35)}
}