/* AssetOS — app-shell & design system (cockpit-lagen).
   Navy sidebar + lichte werkruimte, naar de mockups. Thema-bewust.
   Twee kleursystemen:
     - rozenblad-identiteit (c-01..c-06): vaste signatuurkleur per processtap,
       gevalideerd als categorisch palet (roos-ringen, voortgangslijnen).
     - status (op_orde/aandacht/achterstand/kritiek): severity, altijd met
       label/symbool ernaast (kleur draagt nooit alleen betekenis). */

:root {
  color-scheme: light;
  --sidebar:      #0e1f3a;   /* deep navy */
  --sidebar-2:    #16294a;
  --sidebar-ink:  #e8eef7;
  --sidebar-mut:  #91a4c4;
  --sidebar-act:  #1d59b3;

  --plane:        #f4f5f7;
  --surface:      #ffffff;
  --surface-2:    #f3f4f6;
  --ink:          #16202e;
  --ink-2:        #5a6472;
  --muted:        #8b95a3;
  --grid:         #e6e8ec;
  --border:       #e3e6ea;
  --accent:       #1d59b3;
  --accent-ink:   #1a4f9e;

  /* rozenblad-identiteit */
  --c-01:#3f9b57; --c-02:#2a78d6; --c-03:#d5386c; --c-04:#e88a2a; --c-05:#109c8c; --c-06:#7d54ad;
  --c-pijler:#64748b;
  --c-01-w:#e9f4ec; --c-02-w:#e7f0fb; --c-03-w:#fbe8ef; --c-04-w:#fcefe0; --c-05-w:#e2f4f1; --c-06-w:#f0eaf7;
  --c-pijler-w:#eef1f5;

  /* status (severity) */
  --s-op_orde:#0ca30c; --s-aandacht:#eda100; --s-achterstand:#ec7a3c; --s-kritiek:#d03b3b;
  --s-op_orde-w:#e4f6e4; --s-aandacht-w:#fdf0d3; --s-achterstand-w:#fbe7dc; --s-kritiek-w:#fbe3e3;

  --radius: 12px;
  --radius-sm: 9px;
  --shadow: 0 1px 2px rgba(16,32,58,.05), 0 3px 10px rgba(16,32,58,.05);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
:root[data-theme="dark"], .dark-tokens {
  color-scheme: dark;
  --sidebar:#0a1526; --sidebar-2:#111f38; --sidebar-ink:#e8eef7; --sidebar-mut:#7e90b0; --sidebar-act:#2a6fd6;
  --plane:#0c1119; --surface:#141b26; --surface-2:#1b2431; --ink:#eef2f7; --ink-2:#aeb8c6; --muted:#7d8798;
  --grid:#25303f; --border:#25303f; --accent:#3987e5; --accent-ink:#7fb0ee;
  --c-01:#4fb069; --c-02:#3987e5; --c-03:#e15b83; --c-04:#f09a44; --c-05:#1fb3a2; --c-06:#9a76c8;
  --c-01-w:#16281c; --c-02-w:#152538; --c-03-w:#2c1620; --c-04-w:#2c2011; --c-05-w:#0f2925; --c-06-w:#221a30;
  --c-pijler:#94a3b8; --c-pijler-w:#1b2431;
  --s-op_orde-w:#132a13; --s-aandacht-w:#2b2410; --s-achterstand-w:#2c1d12; --s-kritiek-w:#2c1414;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 3px 10px rgba(0,0,0,.35);
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --sidebar:#0a1526; --sidebar-2:#111f38; --sidebar-ink:#e8eef7; --sidebar-mut:#7e90b0; --sidebar-act:#2a6fd6;
    --plane:#0c1119; --surface:#141b26; --surface-2:#1b2431; --ink:#eef2f7; --ink-2:#aeb8c6; --muted:#7d8798;
    --grid:#25303f; --border:#25303f; --accent:#3987e5; --accent-ink:#7fb0ee;
    --c-01:#4fb069; --c-02:#3987e5; --c-03:#e15b83; --c-04:#f09a44; --c-05:#1fb3a2; --c-06:#9a76c8;
    --c-01-w:#16281c; --c-02-w:#152538; --c-03-w:#2c1620; --c-04-w:#2c2011; --c-05-w:#0f2925; --c-06-w:#221a30;
    --c-pijler:#94a3b8; --c-pijler-w:#1b2431;
    --s-op_orde-w:#132a13; --s-aandacht-w:#2b2410; --s-achterstand-w:#2c1d12; --s-kritiek-w:#2c1414;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 3px 10px rgba(0,0,0,.35);
  }
}

* { box-sizing: border-box; }
body { margin:0; font-family:var(--font); background:var(--plane); color:var(--ink); font-size:14px; line-height:1.5; }
h1,h2,h3,h4 { margin:0; line-height:1.25; }
a { color:var(--accent-ink); text-decoration:none; }
a:hover { text-decoration:underline; }
.tnum { font-variant-numeric: tabular-nums; }

/* ---------- App layout ---------- */
.app { display:grid; grid-template-columns:236px 1fr; min-height:100vh; }
.main { min-width:0; display:flex; flex-direction:column; }
.content { padding:20px 24px 48px; }

/* ---------- Sidebar ---------- */
.sidebar { background:var(--sidebar); color:var(--sidebar-ink); display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh; overflow-y:auto; }
.sb-brand { display:flex; align-items:center; gap:10px; padding:18px 18px 14px; font-weight:700; font-size:17px; letter-spacing:-.01em; }
.sb-logo { width:26px; height:26px; flex:none; }
.sb-nav { padding:6px 10px; display:flex; flex-direction:column; gap:1px; }
.sb-nav a { display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:8px;
  color:var(--sidebar-mut); font-weight:500; font-size:13.5px; }
.sb-nav a:hover { background:var(--sidebar-2); color:var(--sidebar-ink); text-decoration:none; }
.sb-nav a.active { background:var(--sidebar-act); color:#fff; }
.sb-nav a .ic { width:18px; height:18px; flex:none; opacity:.95; }
.sb-nav a .sub { display:block; font-size:11px; font-weight:400; opacity:.7; margin-top:-2px; }
.sb-sep { height:1px; background:rgba(255,255,255,.09); margin:10px 16px; }
.sb-spacer { flex:1; }
.sb-level { margin:8px 12px; padding:10px 12px; background:var(--sidebar-2); border-radius:9px; }
.sb-level label { display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--sidebar-mut); margin-bottom:5px; }
.sb-level select { width:100%; background:transparent; color:var(--sidebar-ink); border:1px solid rgba(255,255,255,.14);
  border-radius:7px; padding:6px 8px; font-family:var(--font); font-size:13px; }
.sb-level select option { color:#111; }
.sb-foot { padding:14px 18px 18px; color:var(--sidebar-mut); font-size:11px; display:flex; align-items:center; gap:9px; }
.sb-foot .hx { width:30px; height:30px; flex:none; }

/* ---------- Topbar ---------- */
.topbar { display:flex; align-items:center; gap:16px; padding:14px 24px; background:var(--surface);
  border-bottom:1px solid var(--border); position:sticky; top:0; z-index:20; }
.tb-title h1 { font-size:20px; letter-spacing:-.02em; }
.tb-title p { margin:2px 0 0; color:var(--muted); font-size:12.5px; }
.tb-crumb { color:var(--muted); font-size:13px; }
.tb-crumb b { color:var(--ink); font-weight:600; }
.tb-right { margin-left:auto; display:flex; align-items:center; gap:10px; }
.tb-pill { display:inline-flex; align-items:center; gap:7px; border:1px solid var(--border); background:var(--surface);
  border-radius:9px; padding:7px 11px; font-size:13px; color:var(--ink-2); cursor:pointer; }
.tb-pill:hover { background:var(--surface-2); }
.tb-icon { width:36px; height:36px; border-radius:9px; border:1px solid var(--border); background:var(--surface);
  display:grid; place-items:center; color:var(--ink-2); cursor:pointer; position:relative; }
.tb-icon:hover { background:var(--surface-2); }
.tb-badge { position:absolute; top:-5px; right:-5px; min-width:16px; height:16px; padding:0 4px; border-radius:9px;
  background:var(--s-kritiek); color:#fff; font-size:10px; font-weight:700; display:grid; place-items:center; }
.tb-user { display:flex; align-items:center; gap:9px; padding-left:6px; }
.tb-user .av { width:34px; height:34px; border-radius:50%; background:var(--accent); color:#fff; display:grid; place-items:center; font-weight:700; font-size:13px; }
.tb-user .who { font-size:13px; font-weight:600; line-height:1.15; }
.tb-user .who span { display:block; font-weight:400; font-size:11.5px; color:var(--muted); }
.tb-signout { margin-left:4px; border:1px solid var(--border); background:var(--surface); color:var(--ink-2);
  width:32px; height:32px; border-radius:9px; cursor:pointer; font-size:15px; display:grid; place-items:center; }
.tb-signout:hover { background:var(--surface-2); border-color:var(--s-kritiek); color:var(--s-kritiek); }
/* Verberg de app tot de sessie is gecontroleerd (auth-shell). */
html.auth-pending body { visibility:hidden; }

/* ---------- Cards / panels ---------- */
.card, .panel { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); }
.panel { padding:16px 18px; }
.panel-h { display:flex; align-items:center; gap:8px; margin-bottom:14px; }
.panel-h h2 { font-size:14px; font-weight:650; letter-spacing:-.01em; }
.panel-h .meta { margin-left:auto; font-size:11.5px; color:var(--muted); }
.panel-h .ic { width:16px; height:16px; color:var(--accent); }
.panel .more { display:inline-flex; align-items:center; gap:5px; margin-top:12px; font-size:12.5px; font-weight:600; }

/* ---------- KPI row ---------- */
.kpi-row { display:grid; grid-template-columns:repeat(6,1fr); gap:12px; margin-bottom:16px; }
@media (max-width:1180px){ .kpi-row{ grid-template-columns:repeat(3,1fr);} }
@media (max-width:640px){ .kpi-row{ grid-template-columns:repeat(2,1fr);} }
.kpi { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:13px 14px; display:flex; align-items:center; gap:10px; }
.kpi .body { min-width:0; flex:1; }
.kpi .label { color:var(--muted); font-size:11.5px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kpi .value { font-size:21px; font-weight:700; letter-spacing:-.02em; margin-top:1px; white-space:nowrap; }
.kpi .sub { font-size:11.5px; color:var(--ink-2); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kpi .sub.warn { color:var(--s-achterstand); }
.kpi .viz { flex:none; }

/* ---------- Cockpit main grid ---------- */
.cockpit { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:16px; align-items:start; }
@media (max-width:1080px){ .cockpit{ grid-template-columns:1fr;} }
.right-col { display:flex; flex-direction:column; gap:16px; }

/* ---------- Roos (hexagon-ring met cyclus-pijlen) ---------- */
:root { --hex-clip: polygon(12% 0, 88% 0, 100% 50%, 88% 100%, 12% 100%, 0 50%); }
.roos-panel { padding:18px 18px 22px; }
/* Vaste ontwerpmaat (680×540), uniform geschaald naar de beschikbare breedte
   door fitRoos() — zo houden hexagons en tekst altijd dezelfde verhouding en
   overlappen ze de naaf nooit. */
.roos-fit { width:100%; overflow:hidden; }
.roos-stage { position:relative; width:680px; height:540px; left:50%; margin-left:-340px; transform-origin:top center; }
.roos-arrows { position:absolute; inset:0; width:100%; height:100%; overflow:visible; z-index:2; pointer-events:none; }
.hex-blade { position:absolute; width:31%; transform:translate(-50%,-50%); clip-path:var(--hex-clip);
  background:var(--bc,var(--accent)); padding:2px; z-index:1; color:inherit; display:block; transition:transform .12s, filter .12s; }
.hex-blade:hover { text-decoration:none; transform:translate(-50%,-50%) scale(1.03); filter:drop-shadow(0 5px 12px rgba(16,32,58,.16)); }
.hex-blade.b01{--bc:var(--c-01); left:50%; top:15%;} .hex-blade.b02{--bc:var(--c-02); left:80%; top:33%;}
.hex-blade.b03{--bc:var(--c-03); left:80%; top:67%;} .hex-blade.b04{--bc:var(--c-04); left:50%; top:85%;}
.hex-blade.b05{--bc:var(--c-05); left:20%; top:67%;} .hex-blade.b06{--bc:var(--c-06); left:20%; top:33%;}
.hex { clip-path:var(--hex-clip); background:var(--surface); padding:13px 20px 15px; }
.hex .bhead { display:flex; align-items:center; gap:6px; margin-bottom:6px; }
.hex .bnum { width:23px; height:23px; flex:none; border-radius:6px; background:var(--bc); color:#fff;
  font-weight:700; font-size:11.5px; display:grid; place-items:center; }
.hex .btitle { font-weight:650; font-size:11.5px; letter-spacing:-.01em; line-height:1.1; }
.hex .bring { margin-left:auto; flex:none; }
.hex .bstatus { display:inline-block; font-size:9.5px; font-weight:600; padding:2px 7px; border-radius:999px; margin-bottom:7px; }
.hex .bmetrics { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:3px; }
.hex .bmetrics li { display:flex; justify-content:space-between; gap:6px; font-size:11px; }
.hex .bmetrics .k { color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hex .bmetrics .v { font-weight:600; flex:none; }
.hub { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:26%; z-index:1;
  border:1px solid var(--border); border-radius:14px; background:var(--surface-2); box-shadow:var(--shadow);
  padding:12px 14px; display:flex; flex-direction:column; gap:10px; text-align:center; }
.hub .hub-block { color:inherit; display:block; }
.hub .hub-block:hover { text-decoration:none; }
.hub .hub-block .ht { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-2); }
.hub .hub-block .hrow { display:flex; justify-content:center; gap:14px; margin-top:4px; }
.hub .hub-block .hrow div span { display:block; font-size:10px; color:var(--muted); }
.hub .hub-block .hrow div b { font-size:15px; }
.hub .hub-sep { height:1px; background:var(--border); }
/* Gestapelde variant (smalle schermen) — fitRoos() zet .stacked. */
.roos-stage.stacked { width:100%; height:auto; left:0; margin-left:0; transform:none;
  display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.roos-stage.stacked .roos-arrows { display:none; }
.roos-stage.stacked .hex-blade { position:static; width:auto; transform:none; }
.roos-stage.stacked .hex-blade:hover { transform:scale(1.01); }
.roos-stage.stacked .hub { position:static; transform:none; width:auto; grid-column:1 / -1; margin-top:0; }

/* ---------- Rings / sparklines ---------- */
.ring { display:inline-grid; place-items:center; position:relative; }
.ring .rt { position:absolute; font-weight:700; font-variant-numeric:tabular-nums; }

/* ---------- Lists ---------- */
.aandacht-list, .act-list { list-style:none; margin:0; padding:0; }
.aandacht-list li { display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--grid); font-size:13px; }
.aandacht-list li:last-child { border-bottom:0; }
.aandacht-list .dot { width:8px; height:8px; border-radius:50%; flex:none; }
.aandacht-list .lvl { margin-left:auto; font-size:11px; font-weight:700; }
.act-list li { display:flex; gap:10px; padding:8px 0; border-bottom:1px solid var(--grid); font-size:12.5px; }
.act-list li:last-child { border-bottom:0; }
.act-list .when { margin-left:auto; color:var(--muted); font-size:11.5px; white-space:nowrap; }
.snel { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.snel a { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 12px;
  border:1px solid var(--border); border-radius:9px; background:var(--surface); color:var(--ink); font-size:12.5px; font-weight:600; }
.snel a:hover { background:var(--surface-2); text-decoration:none; border-color:var(--accent); }

/* ---------- AI summary panel ---------- */
.ai-panel { background:linear-gradient(180deg,var(--c-02-w),var(--surface)); }
.ai-panel .panel-h .ic { color:var(--c-02); }
.ai-text { font-size:13px; color:var(--ink); }

/* ---------- Organisatie Health Scan ---------- */
.hs-panel { margin-top:16px; }
.hs-panel .panel-h .ic { color:var(--c-02); }
.hs-grid { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:22px; }
@media (max-width:900px){ .hs-grid{ grid-template-columns:1fr; } }
.hs-overall { display:flex; align-items:center; gap:14px; padding:6px 0 14px; border-bottom:1px solid var(--grid); margin-bottom:12px; }
.hs-o-label { font-weight:700; font-size:15px; }
.hs-o-sub { color:var(--muted); font-size:12px; margin-top:1px; }
.hs-cov { display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:8px; font-size:12px; color:var(--ink-2); }
.hs-cov b { color:var(--ink); font-variant-numeric:tabular-nums; }
.hs-bars { display:flex; flex-direction:column; gap:9px; }
.hs-row { display:grid; grid-template-columns:150px 1fr 42px; align-items:center; gap:12px; color:inherit; }
.hs-row:hover { text-decoration:none; }
.hs-row:hover .hs-name { color:var(--accent-ink); }
.hs-name { font-size:12.5px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hs-bar { height:9px; border-radius:5px; background:var(--surface-2); overflow:hidden; }
.hs-bar > span { display:block; height:100%; border-radius:5px; }
.hs-val { font-size:12.5px; font-weight:700; text-align:right; }
.hs-right h3 { font-size:12.5px; font-weight:650; margin-bottom:10px; }
.op-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.op-list li { display:flex; gap:9px; }
.op-dot { width:8px; height:8px; border-radius:50%; margin-top:5px; flex:none; }
.op-text { font-size:12.5px; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.op-meta { font-size:11px; color:var(--muted); margin-top:2px; }
.hs-note { font-size:11.5px; color:var(--muted); margin:14px 0 0; padding-top:12px; border-top:1px solid var(--grid); }

/* ---------- Health Scan: klikbaar + highlight ---------- */
.kpi.clickable { cursor:pointer; }
.kpi.clickable:hover { border-color:var(--accent); }
.hs-row.clickable { cursor:pointer; border-radius:6px; }
.hs-row.clickable:hover { background:var(--surface-2); }
.hs-row.clickable:hover .hs-name { color:var(--accent-ink); }
.hs-panel.flash { animation: hsflash 1.7s ease; }
@keyframes hsflash { 0%,100%{ box-shadow:var(--shadow);} 12%,48%{ box-shadow:0 0 0 3px var(--c-02);} }

/* ---------- Onderbouwing-popup ---------- */
.modal-backdrop { position:fixed; inset:0; background:rgba(16,32,58,.5); backdrop-filter:blur(2px);
  z-index:100; display:flex; align-items:center; justify-content:center; padding:24px; }
.modal { background:var(--surface); border:1px solid var(--border); border-radius:14px;
  box-shadow:0 24px 64px rgba(0,0,0,.35); width:min(680px,100%); max-height:86vh; display:flex; flex-direction:column; overflow:hidden; }
.modal-head { display:flex; align-items:center; gap:12px; padding:15px 20px; border-bottom:1px solid var(--border); }
.mh-title { font-weight:700; font-size:16px; letter-spacing:-.01em; }
.mh-sub { color:var(--muted); font-size:12px; }
.mh-score { margin-left:auto; font-weight:700; font-size:18px; font-variant-numeric:tabular-nums; }
.mh-close { border:1px solid var(--border); background:var(--surface); width:32px; height:32px; border-radius:8px;
  cursor:pointer; color:var(--ink-2); font-size:18px; line-height:1; display:grid; place-items:center; }
.mh-close:hover { background:var(--surface-2); }
.modal-body { padding:6px 20px 14px; overflow-y:auto; }
.q-item { padding:12px 0; border-bottom:1px solid var(--grid); }
.q-item:last-child { border-bottom:0; }
.q-item.dim { opacity:.3; }
.q-top { display:flex; align-items:flex-start; gap:9px; }
.q-code { font-variant-numeric:tabular-nums; color:var(--muted); font-weight:700; font-size:12px; padding-top:2px; }
.q-text { font-weight:600; font-size:13.5px; flex:1; line-height:1.35; }
.q-niveau { flex:none; font-size:11px; font-weight:700; padding:2px 9px; border-radius:999px; white-space:nowrap; }
.q-eviv { margin:7px 0 0 27px; font-size:12.5px; color:var(--ink-2); line-height:1.45; }
.q-bron { display:inline-flex; align-items:center; gap:4px; margin:7px 0 0 27px; font-size:11px; color:var(--accent-ink);
  background:var(--surface-2); border:1px solid var(--border); border-radius:999px; padding:2px 9px; }
.vragenbalk { border-top:1px solid var(--border); padding:12px 20px 14px; background:var(--surface-2); }
.vragenbalk form { display:flex; gap:8px; }
.vragenbalk input { flex:1; border:1px solid var(--border); border-radius:9px; padding:9px 12px; font-family:var(--font); font-size:13px; background:var(--surface); color:var(--ink); }
.vragenbalk input:focus { outline:2px solid var(--accent); outline-offset:1px; }
.vragenbalk button { border:0; background:var(--accent); color:#fff; border-radius:9px; padding:9px 16px; font-weight:600; cursor:pointer; }
.vragenbalk button:hover { filter:brightness(1.05); }
.vb-note { font-size:11.5px; color:var(--muted); margin-top:8px; }

/* ---------- Bottom charts ---------- */
.charts-row { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:16px; margin-top:16px; }
@media (max-width:1080px){ .charts-row{ grid-template-columns:1fr;} }
.legend { display:flex; flex-wrap:wrap; gap:6px 14px; font-size:12px; color:var(--ink-2); }
.legend .k { display:inline-flex; align-items:center; gap:6px; }
.legend .sw { width:11px; height:11px; border-radius:3px; flex:none; }
.legend .ln { width:14px; height:3px; border-radius:2px; flex:none; }

.chart-svg { width:100%; height:auto; overflow:visible; display:block; }
.chart-svg .grid line { stroke:var(--grid); stroke-width:1; }
.chart-svg .axis text { fill:var(--muted); font-size:10px; }
.chart-svg .axis line { stroke:var(--border); }
.donut-center .big { font-weight:700; font-size:20px; fill:var(--ink); }
.donut-center .small { fill:var(--muted); font-size:10px; }

.footer-note { color:var(--muted); font-size:12px; margin-top:22px; }
.footer-note code { background:var(--surface-2); padding:1px 6px; border-radius:5px; }
.klantbadge { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600; color:var(--ink-2);
  background:var(--surface-2); border:1px solid var(--border); border-radius:999px; padding:3px 10px; }
.klantbadge .d { width:7px; height:7px; border-radius:50%; background:var(--s-op_orde); }
.notice { background:var(--s-kritiek-w); border:1px solid var(--border); border-left:3px solid var(--s-kritiek);
  border-radius:9px; padding:12px 16px; color:var(--ink); font-size:13.5px; }
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

@media (max-width:860px){
  .app{ grid-template-columns:1fr; }
  .sidebar{ position:static; height:auto; flex-direction:row; flex-wrap:wrap; align-items:center; }
  .sb-nav{ flex-direction:row; flex-wrap:wrap; } .sb-sep,.sb-foot,.sb-level{ display:none; } .sb-spacer{ display:none; }
}