/* Collective: the lab as a wheel (see collective.js). Everything is scoped under
   #collectiveScherm and uses only the custom properties of style.css, so both
   themes work. Visual language of the approved prototype
   .impeccable/mocks/collective-rad3.html. */

#collectiveScherm {
  position: fixed; inset: 0; z-index: 60;
  display: flex; flex-direction: column;
  background: var(--bg); color: var(--text);
  font: 400 15px/1.5 var(--sans); font-feature-settings: "tnum";
}
#collectiveScherm[hidden] { display: none; }
#collectiveScherm *, #collectiveScherm *::before, #collectiveScherm *::after { box-sizing: border-box; }
#collectiveScherm h1, #collectiveScherm h2, #collectiveScherm h3, #collectiveScherm h4, #collectiveScherm p { margin: 0; }
#collectiveScherm button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
#collectiveScherm button:disabled { cursor: default; opacity: .55; }
#collectiveScherm:focus { outline: none; }
#collectiveScherm :focus-visible { outline: 2px solid var(--l-blue); outline-offset: 2px; border-radius: var(--r-2); }
#collectiveScherm .ci { flex: none; }
#collectiveScherm .mono { font-family: var(--mono); }
#collectiveScherm .bd { font: 700 11px/16px var(--sans); letter-spacing: .08em; text-transform: uppercase; }

/* ---------- header row ---------- */
#collectiveScherm .chead {
  flex: none; height: 56px; display: flex; align-items: center; gap: 16px;
  padding: 0 16px 0 24px; border-bottom: 1px solid var(--line);
}
#collectiveScherm .chead h1 { font: 800 20px/1 var(--sans); letter-spacing: -.01em; }
#collectiveScherm .chead .vb { color: var(--faint); border: 1px solid var(--line-2); border-radius: var(--r-1); padding: 1px 6px; }
#collectiveScherm .seg { margin-left: auto; display: flex; background: var(--s2); border-radius: var(--r-3); padding: 3px; }
#collectiveScherm .seg[hidden] { display: none; }
#collectiveScherm .seg button { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--r-2); font: 600 13px var(--sans); color: var(--dim); }
#collectiveScherm .seg button:hover { color: var(--text); }
#collectiveScherm .seg button.on { background: var(--s1); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }
#collectiveScherm .close { width: 40px; height: 40px; border-radius: var(--r-2); display: grid; place-items: center; color: var(--dim); }
#collectiveScherm .close:hover { background: var(--s2); color: var(--text); }
#collectiveScherm .seg[hidden] + .close { margin-left: auto; }

#collectiveScherm .cbody { flex: 1; min-height: 0; position: relative; }

/* ---------- empty and loading ---------- */
#collectiveScherm .empty { max-width: 52ch; margin: 18vh auto 0; padding: 0 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
#collectiveScherm .empty h2 { font: 800 22px/28px var(--sans); }
#collectiveScherm .empty p { color: var(--dim); font-size: 15px; }
#collectiveScherm .empty .btn { margin-top: 8px; }

/* ---------- wide: wheel plus inspector ---------- */
#collectiveScherm .cwrap { display: grid; grid-template-columns: 1fr 380px; height: 100%; }
#collectiveScherm .cmain { position: relative; overflow: hidden; }
#collectiveScherm .fade { transition: opacity .25s; }
#collectiveScherm .head { position: absolute; left: 32px; top: 20px; z-index: 2; }
#collectiveScherm .head p { color: var(--dim); font-size: 14px; max-width: 56ch; }
#collectiveScherm .legend { position: absolute; left: 32px; top: 136px; z-index: 2; display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--dim); pointer-events: none; }
#collectiveScherm .legend span { display: flex; align-items: center; gap: 8px; }
#collectiveScherm .legend em { display: inline-block; width: 22px; height: 0; border-top: 3px solid; }
#collectiveScherm .legend em.flow { border-top-style: dashed; animation: none; }
#collectiveScherm .legend .dotk { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--dim); margin: 0 6px; }

#collectiveScherm svg#cRad { position: absolute; inset: 0; width: 100%; height: 100%; }
#collectiveScherm svg text { font-family: var(--sans); }
#collectiveScherm svg .ko { paint-order: stroke; stroke: var(--bg); stroke-width: 4px; stroke-linejoin: round; }
#collectiveScherm svg .flow { stroke-dasharray: 7 7; animation: c-flow 1.1s linear infinite; }
#collectiveScherm svg .pulse { animation: c-pulse 1.6s ease-out infinite; }
@keyframes c-flow { to { stroke-dashoffset: -28; } }
@keyframes c-pulse { 0% { opacity: .9; } 100% { opacity: .15; } }

/* nodes in the svg: focus as a ring of their own, outline does not follow a circle */
#collectiveScherm svg .knoop, #collectiveScherm svg .st { cursor: pointer; outline: none; }
#collectiveScherm svg .fring { fill: none; stroke: var(--l-blue); stroke-width: 2; opacity: 0; pointer-events: none; }
#collectiveScherm svg .knoop:focus-visible .fring, #collectiveScherm svg .st:focus-visible .fring { opacity: 1; }

#collectiveScherm .raad { position: absolute; left: 32px; bottom: 24px; z-index: 2; background: var(--s1); border: 1px solid var(--line); border-radius: var(--r-3); padding: 12px 14px; width: 236px; }
#collectiveScherm .raad[hidden] { display: none; }
#collectiveScherm .raad h3 { color: var(--faint); margin-bottom: 2px; display: flex; align-items: center; gap: 6px; }
#collectiveScherm .raad p { font-size: 12px; color: var(--faint); margin-bottom: 6px; line-height: 16px; }
#collectiveScherm .raad .rrow { display: flex; align-items: center; gap: 8px; font: 600 13px/22px var(--sans); cursor: pointer; border-radius: var(--r-1); }
#collectiveScherm .raad .rrow:hover, #collectiveScherm .raad .rrow.gekozen { background: var(--s2); }
#collectiveScherm .raad .rrow.off { font-weight: 400; color: var(--dim); }
#collectiveScherm .raad .rrow svg { color: var(--dim); }
#collectiveScherm .raad i { font: 600 11px var(--mono); color: var(--faint); font-style: normal; width: 26px; }
#collectiveScherm .raad .o { flex: none; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--line-2); }
#collectiveScherm .raad .o.on { background: var(--st-fill); border-color: var(--st-edge); box-shadow: 0 0 0 3px var(--k, var(--l-green)); }
#collectiveScherm .raad .m { margin-left: auto; font: 700 10.5px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--text); }

#collectiveScherm .dial { position: absolute; left: calc(50% + 60px); bottom: 24px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; background: var(--s1); border: 1px solid var(--line); border-radius: var(--r-3); padding: 6px; z-index: 2; }
#collectiveScherm .dial .nb { width: 36px; height: 36px; border-radius: var(--r-2); display: grid; place-items: center; color: var(--dim); }
#collectiveScherm .dial .nb:hover { background: var(--s2); color: var(--text); }
#collectiveScherm .dial .cur { min-width: 200px; display: flex; align-items: center; justify-content: center; gap: 8px; font: 600 14px var(--sans); }
#collectiveScherm .dial .cur span { font: 400 12px var(--mono); color: var(--faint); }
#collectiveScherm .dial .zoom { height: 36px; padding: 0 14px; border-radius: var(--r-2); background: var(--s2); border: 1px solid var(--line-2); font: 600 14px var(--sans); }
#collectiveScherm .dial .zoom:hover { border-color: var(--dim); }

/* department, zoomed in */
#collectiveScherm .dep { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .3s; padding: 20px 32px; overflow: auto; }
#collectiveScherm .dep.on { opacity: 1; pointer-events: auto; }
#collectiveScherm .dep h2 { font: 800 24px/30px var(--sans); }
#collectiveScherm .dep .lead { color: var(--dim); font-size: 14px; max-width: 70ch; }
#collectiveScherm .dep .kbd { font-size: 12px; }
#collectiveScherm .dep svg { display: block; margin-top: 12px; width: 100%; overflow: visible; }
#collectiveScherm .crumb { display: flex; align-items: center; gap: 8px; font: 600 14px var(--sans); color: var(--dim); margin-bottom: 4px; }
#collectiveScherm .crumb button { color: var(--dim); }
#collectiveScherm .crumb button:hover { color: var(--text); }

/* ---------- inspector ---------- */
#collectiveScherm .cinsp { border-left: 1px solid var(--line); padding: 20px 24px; display: flex; flex-direction: column; gap: 14px; overflow: auto; }
#collectiveScherm .cinsp > h3.bd, #collectiveScherm .lijst > h3.bd { color: var(--faint); }
#collectiveScherm h3.kop { margin-top: 8px; }
#collectiveScherm p.d { font-size: 14px; color: var(--dim); line-height: 22px; }
#collectiveScherm .note { font-size: 12px; color: var(--faint); margin-top: auto; }
#collectiveScherm .note.fout { color: var(--red-ink); margin-top: 0; }
#collectiveScherm .note + .note { margin-top: 0; }

#collectiveScherm .ask { background: var(--red-wash); border: 1px solid var(--red); border-radius: var(--r-3); padding: 14px 16px; }
#collectiveScherm .ask > .kv .bd { color: var(--red-ink); }
#collectiveScherm .ask h4 { font: 700 16px/22px var(--sans); margin: 4px 0 8px; }
#collectiveScherm .ask .chain { font: 400 11px/16px var(--mono); color: var(--dim-on-red); margin-bottom: 10px; }
#collectiveScherm .ask .sk { background: transparent; border-color: var(--red-ring); color: var(--dim-on-red); }
#collectiveScherm .ask.gekozen { box-shadow: 0 0 0 2px var(--red-ring); }
#collectiveScherm .pos { border-top: 1px solid var(--red-ring); padding: 8px 0; }
#collectiveScherm .pos b { font: 700 11px/16px var(--sans); letter-spacing: .08em; text-transform: uppercase; }
#collectiveScherm .pos b .mono { letter-spacing: 0; }
#collectiveScherm .pos p { font-size: 13px; line-height: 19px; color: var(--dim-on-red); }
#collectiveScherm .adv { border-top: 1px solid var(--red-ring); padding-top: 8px; }
#collectiveScherm .adv > b { display: flex; align-items: center; gap: 6px; color: var(--dim-on-red); margin-bottom: 2px; }
#collectiveScherm .adv .pos { border-top: 0; padding: 4px 0 4px 12px; border-left: 1px solid var(--red-ring); margin: 4px 0; }
#collectiveScherm .btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
#collectiveScherm .btn { height: 34px; border-radius: var(--r-2); padding: 0 12px; display: inline-flex; align-items: center; gap: 4px; font: 600 13px var(--sans); }
#collectiveScherm .btn.p { background: var(--red-fill); color: var(--on-fill); }
#collectiveScherm .btn.p:hover:not(:disabled) { background: var(--red-fill-hover); }
#collectiveScherm .btn.o { border: 1px solid var(--line-2); }
#collectiveScherm .btn.o:hover:not(:disabled) { border-color: var(--dim); }
#collectiveScherm .ask .btn.o { border-color: var(--red-ring); }
#collectiveScherm .ask .btn.o:hover:not(:disabled) { border-color: var(--red); }
#collectiveScherm .btn.terug { align-self: flex-start; color: var(--dim); }

#collectiveScherm .thr { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--s1); cursor: pointer; }
#collectiveScherm .thr:hover { border-color: var(--line-2); }
#collectiveScherm .thr.gekozen { background: var(--s2); border-color: var(--line-2); }
#collectiveScherm .thr .top { display: flex; align-items: center; gap: 8px; font: 700 11px/16px var(--sans); letter-spacing: .08em; text-transform: uppercase; }
#collectiveScherm .thr .top .mono { letter-spacing: 0; }
#collectiveScherm .thr .top em { flex: none; width: 22px; height: 6px; border-radius: var(--r-1); }
#collectiveScherm .thr .top span.s { margin-left: auto; font: 400 12px var(--mono); letter-spacing: 0; text-transform: none; color: var(--dim); }
#collectiveScherm .thr .q { font: 600 14px/20px var(--sans); }
#collectiveScherm .thr .chain { font: 400 11px/16px var(--mono); color: var(--faint); }
#collectiveScherm .kv { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
#collectiveScherm .thr .kv { justify-content: flex-start; margin: 4px 0 2px; }
#collectiveScherm .sk { display: inline-flex; align-items: center; gap: 5px; font: 600 12px/18px var(--mono); color: var(--dim); background: var(--s2); border: 1px solid var(--line); border-radius: 14px; padding: 1px 9px 1px 7px; white-space: nowrap; }
#collectiveScherm .pair { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
#collectiveScherm .vs { font: 700 13px var(--mono); color: var(--faint); }
#collectiveScherm .rt { display: inline-flex; align-items: center; gap: 5px; font: 600 12px/20px var(--sans); color: var(--text); background: var(--s2); border-radius: 6px; padding: 1px 8px 1px 6px; margin: 0 4px 4px 0; }
#collectiveScherm .rt svg { color: var(--dim); }
#collectiveScherm .rt i { font: 600 11px var(--mono); color: var(--faint); font-style: normal; }

#collectiveScherm .afg { display: flex; flex-direction: column; }
#collectiveScherm .arij { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; align-items: center; padding: 8px 4px; border-top: 1px solid var(--line); cursor: pointer; }
#collectiveScherm .arij:hover { background: var(--s1); }
#collectiveScherm .arij .w { font: 700 10.5px/16px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
#collectiveScherm .arij .sk { justify-self: start; }
#collectiveScherm .arij .aq { grid-column: 1 / -1; font-size: 13px; line-height: 18px; color: var(--dim); }
#collectiveScherm .arij .au { grid-column: 1 / -1; font-size: 12px; color: var(--faint); }

#collectiveScherm .tree { display: flex; flex-direction: column; }
#collectiveScherm .tree > div { display: flex; align-items: center; gap: 8px; font: 400 13px/24px var(--sans); color: var(--dim); border-radius: var(--r-1); cursor: pointer; }
#collectiveScherm .tree > div:hover { background: var(--s1); }
#collectiveScherm .tree > div.l { font-weight: 700; color: var(--text); margin-top: 4px; }
#collectiveScherm .tree > div.c { padding-left: 18px; }
#collectiveScherm .tree svg { color: var(--dim); }
#collectiveScherm .tree i { font: 600 11px var(--mono); color: var(--faint); font-style: normal; width: 26px; flex: none; }
#collectiveScherm .tree .w { margin-left: auto; font: 700 10.5px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--text); }

#collectiveScherm .big { display: flex; align-items: center; gap: 14px; }
#collectiveScherm .big .t { font: 700 18px/24px var(--sans); }
#collectiveScherm .big .t .mono { font-size: 15px; color: var(--faint); }
#collectiveScherm .big .s { font-size: 13px; color: var(--dim); }
#collectiveScherm .badge { flex: none; width: 56px; height: 56px; border-radius: var(--r-3); background: var(--s2); box-shadow: inset 0 0 0 1px var(--line-2); display: grid; place-items: center; color: var(--text); }
#collectiveScherm .status { font: 400 14px/1.4 var(--sans); letter-spacing: 0; text-transform: none; white-space: normal; display: flex; align-items: center; gap: 10px; background: var(--s1); border: 1px solid var(--line); border-radius: var(--r-2); padding: 10px 12px; }
#collectiveScherm .status .lb { flex: none; width: 22px; height: 6px; border-radius: var(--r-1); }
#collectiveScherm .status .m { margin-left: auto; font: 400 12px var(--mono); color: var(--dim); }
#collectiveScherm .acc { font: 400 12px/20px var(--mono); color: var(--dim); }
#collectiveScherm .acc b { color: var(--text); font-weight: 600; }
#collectiveScherm .skr { border-top: 1px solid var(--line); padding: 8px 0; }
#collectiveScherm .skr .own { font: 700 10.5px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin-left: 8px; }
#collectiveScherm .skr .with { margin-top: 6px; }
#collectiveScherm .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
#collectiveScherm .chips span { background: var(--s2); border: 1px solid var(--line); border-radius: 14px; padding: 3px 10px; font: 400 12px var(--mono); color: var(--dim); }

#collectiveScherm .sklist > div { display: grid; grid-template-columns: 1fr 34px 1fr auto; gap: 8px; align-items: center; padding: 6px 4px; border-top: 1px solid var(--line); font: 400 12px var(--mono); color: var(--faint); }
#collectiveScherm .sklist > div:hover { background: var(--s1); }
#collectiveScherm .sklist .sk { justify-self: start; }
#collectiveScherm .sklist .o { color: var(--text); font-weight: 600; }
#collectiveScherm .sklist .w { font: 700 10.5px var(--sans); letter-spacing: .08em; text-transform: uppercase; }

/* ---------- narrow: a readable list ---------- */
#collectiveScherm .lijst { height: 100%; overflow: auto; padding: 16px 16px calc(24px + var(--safe-b, 0px)); display: flex; flex-direction: column; gap: 12px; max-width: 720px; margin: 0 auto; }
#collectiveScherm .lijst .note { margin-top: 8px; }
#collectiveScherm .tree.org > div { cursor: default; }
#collectiveScherm .tree.org > div.h { font: 700 14px/28px var(--sans); color: var(--text); margin-top: 10px; border-top: 1px solid var(--line); padding-top: 6px; }
#collectiveScherm .tree.org > div.c { padding-left: 22px; }
#collectiveScherm .tree.org > div.c1 { padding-left: 4px; }
#collectiveScherm .tree.org > div:hover { background: none; }

/* ---------- which roles: origin switches under the intro ---------- */
#collectiveScherm .origins { display: flex; align-items: center; gap: 6px; margin-top: 10px; pointer-events: auto; }
#collectiveScherm .origins > .bd { color: var(--faint); margin-right: 2px; }
#collectiveScherm .ochip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 13px;
  border: 1px solid var(--line-2); color: var(--faint); font: 600 12px/1 var(--sans); }
#collectiveScherm .ochip .mono { font-size: 11px; color: var(--faint); }
#collectiveScherm .ochip.on { background: var(--s2); border-color: var(--line-2); color: var(--text); }
#collectiveScherm .ochip:hover { color: var(--text); }
#collectiveScherm .big .s .zchip { margin-left: 4px; vertical-align: 1px; }

/* ---------- the chain (Keten): nine stages, roles as Collective badges ---------- */
#collectiveScherm .legend.low { top: auto; bottom: 24px; }
#collectiveScherm svg .kstage { font: 700 11px var(--sans); letter-spacing: .08em; text-transform: uppercase; }
#collectiveScherm svg .ktile { cursor: pointer; outline: none; }
#collectiveScherm svg .ktile .fr { fill: none; stroke: transparent; stroke-width: 3; }
#collectiveScherm svg .ktile:hover .fr, #collectiveScherm svg .ktile.sel .fr { stroke: var(--text); }
#collectiveScherm svg .ktile:focus-visible .fr { stroke: var(--l-blue); }
#collectiveScherm .kform { left: 50%; gap: 2px; padding: 3px; }
#collectiveScherm .kform[hidden], #collectiveScherm .dial[hidden] { display: none; }
#collectiveScherm .kform button { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: var(--r-2); font: 600 13px var(--sans); color: var(--dim); }
#collectiveScherm .kform button:hover { color: var(--text); }
#collectiveScherm .kform button.on { background: var(--s2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }
#collectiveScherm .big .bigav { width: 56px; height: 56px; border-radius: 12px; flex: none; }
#collectiveScherm .orig { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--s1); }
#collectiveScherm .orig > .bd { color: var(--faint); }
#collectiveScherm .orig p { font-size: 13px; line-height: 19px; color: var(--dim); }
#collectiveScherm .orig a, #collectiveScherm .orig .ag { color: var(--text); font: 500 12px/18px var(--mono); overflow-wrap: anywhere; }
#collectiveScherm .orig a { text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
#collectiveScherm .orig .tag { align-self: flex-start; font: 700 10px/16px var(--sans); letter-spacing: .08em; text-transform: uppercase; padding: 0 6px; border-radius: var(--r-1); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--dim); }
#collectiveScherm .stchips { display: flex; flex-wrap: wrap; gap: 4px; }
#collectiveScherm .stchips span { font: 600 11px/20px var(--sans); padding: 0 8px; border-radius: 10px; background: var(--s2); color: var(--faint); }
#collectiveScherm .stchips span.on { background: var(--text); color: var(--bg); }
#collectiveScherm .strow { display: grid; grid-template-columns: 92px 28px minmax(0, 1fr); align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--line); }
#collectiveScherm .strow b { font: 600 13px var(--sans); }
#collectiveScherm .strow > i { font: 400 11px var(--mono); color: var(--faint); font-style: normal; text-align: right; }
#collectiveScherm .strow .av { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
#collectiveScherm .strow .av img { width: 18px; height: 18px; border-radius: 4px; }
#collectiveScherm .strow .av i { font: 400 11px var(--mono); color: var(--faint); font-style: normal; margin-left: 2px; }
#collectiveScherm .kstage { margin-top: 14px; }
#collectiveScherm .kstage h4 { display: flex; align-items: baseline; gap: 8px; color: var(--faint); margin-bottom: 6px; }
#collectiveScherm .kstage h4 i { font: 400 11px var(--mono); font-style: normal; }
#collectiveScherm .kgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px 8px; }
#collectiveScherm .kgrid > div { display: flex; align-items: center; gap: 8px; min-height: 44px; font: 600 13px/16px var(--sans); }
#collectiveScherm .kgrid img, #collectiveScherm .kgrid .kic { width: 32px; height: 32px; border-radius: 8px; flex: none; }
#collectiveScherm .kgrid .kic { display: grid; place-items: center; background: var(--s2); border: 1px solid var(--line-2); }
#collectiveScherm .kgrid small { display: block; font: 400 11px var(--mono); color: var(--faint); }
#collectiveScherm .kgrid > div.inzaak img, #collectiveScherm .kgrid > div.inzaak .kic { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--k); }

@media (max-width: 1099.98px) {
  #collectiveScherm .chead { gap: 10px; padding: 0 8px 0 16px; }
  #collectiveScherm .chead h1 { font-size: 18px; }
  #collectiveScherm .chead .vb { display: none; }
  #collectiveScherm .seg button { padding: 6px 8px; font-size: 12px; }
}
@media (max-width: 700px) {
  /* three views do not fit beside the title: they get a row of their own */
  #collectiveScherm .chead { height: auto; flex-wrap: wrap; padding: 10px 8px 10px 16px; row-gap: 10px; }
  #collectiveScherm .chead .seg { order: 3; flex-basis: 100%; margin-left: 0; }
  #collectiveScherm .chead .seg button { flex: 1; justify-content: center; }
  #collectiveScherm .chead .close { margin-left: auto; }
}
@media (max-width: 420px) {
  #collectiveScherm .seg button .ci { display: none; }
  #collectiveScherm .sklist > div { grid-template-columns: 1fr 34px; }
  #collectiveScherm .sklist .r { grid-column: 1 / -1; }
}

/* ---------- the phone (design C, mockups/collective-tel/) ---------- */
#collectiveScherm .tback { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 8px 0 4px; border-radius: var(--r-2); font: 600 15px var(--sans); color: var(--text); }
#collectiveScherm .tback[hidden], #collectiveScherm .tcount[hidden] { display: none; }
#collectiveScherm .tback:hover { background: var(--s2); }
#collectiveScherm .tcount { margin-left: auto; background: var(--red-fill); color: var(--on-fill); border-radius: 10px; padding: 1px 9px; letter-spacing: .04em; }

/* upright: what waits on you, what runs, the card to the wheel */
#collectiveScherm .tel-zaken { padding-bottom: 0; }
#collectiveScherm .task { background: var(--red-wash); box-shadow: inset 0 0 0 1px var(--red); border-radius: 14px; padding: 14px; scroll-margin-top: 12px; }
#collectiveScherm .task:focus { outline: none; }
#collectiveScherm .task .tw { color: var(--red-ink); }
#collectiveScherm .task h2 { font: 700 18px/24px var(--sans); margin: 6px 0 4px; }
#collectiveScherm .task .tsub { display: block; font: 400 12px/18px var(--mono); color: var(--dim-on-red); }
#collectiveScherm .tpos { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; }
#collectiveScherm .tpos p { font: 400 13.5px/19px var(--sans); }
#collectiveScherm .tpos b { font-weight: 700; }
#collectiveScherm .tpos i { font: 400 11px var(--mono); color: var(--dim-on-red); font-style: normal; }
#collectiveScherm .tav { flex: none; width: 36px; height: 36px; border-radius: 9px; display: block; }
#collectiveScherm .tav.ic { display: grid; place-items: center; background: var(--s2); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--dim); }
#collectiveScherm .tadv { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--red-ring); font: 400 13px/18px var(--sans); color: var(--dim-on-red); }
#collectiveScherm .tadv + .tadv { margin-top: 4px; padding-top: 0; border-top: 0; }
#collectiveScherm .tacts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
#collectiveScherm .tacts .btn { height: 44px; justify-content: center; font-size: 15px; }
#collectiveScherm .tacts .btn.o { border-color: var(--red-ring); }
#collectiveScherm .tacts .wide, #collectiveScherm .tacts .btn:only-of-type { grid-column: 1 / -1; }
#collectiveScherm .trood { display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 10px 14px; border-radius: var(--r-2); background: var(--red-wash); box-shadow: inset 0 0 0 1px var(--red-ring); }
#collectiveScherm .trood .bd { color: var(--red-ink); }
#collectiveScherm .trood .tq { font: 600 14px/20px var(--sans); }
#collectiveScherm .trust { display: flex; align-items: center; gap: 8px; padding: 10px 4px; color: var(--dim); font-size: 14px; }
#collectiveScherm .trust .ci { color: var(--ok); }
#collectiveScherm .trun { display: flex; flex-direction: column; }
#collectiveScherm .trij { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 12px; text-align: left; padding: 12px 4px; border-top: 1px solid var(--line); }
#collectiveScherm .trij:hover { background: var(--s1); }
#collectiveScherm .trij .w { color: var(--dim); padding-top: 2px; }
#collectiveScherm .trij .w.ok { color: var(--ok); }
#collectiveScherm .trij .w.err { color: var(--red-ink); }
#collectiveScherm .trij .tq { display: block; font: 600 14px/20px var(--sans); }
#collectiveScherm .trij .tsub { display: block; font: 400 12px/18px var(--mono); color: var(--faint); overflow-wrap: anywhere; }
#collectiveScherm .tkaart { position: sticky; bottom: 0; margin: 4px -4px 0; display: flex; align-items: center; gap: 12px; padding: 8px 14px; min-height: 76px; text-align: left;
  border-radius: 14px; background: var(--s1); box-shadow: inset 0 0 0 1px var(--line), 0 -12px 16px var(--bg); margin-bottom: calc(14px + var(--safe-b, 0px)); }
#collectiveScherm .tkaart b { display: block; font: 700 15px var(--sans); }
#collectiveScherm .tkaart small { font: 400 11px var(--mono); color: var(--faint); }
#collectiveScherm .tkaart > .ci { margin-left: auto; color: var(--dim); }
#collectiveScherm .tmini { flex: none; }
@media (max-width: 1099.98px) {
  #collectiveScherm:not(.tel) .chead .seg { display: none; }
  #collectiveScherm:not(.tel) .chead .tcount[hidden] ~ .close { margin-left: auto; }
}

/* the wheel on a phone (class tel): the views on the left, a narrow inspector on the right */
#collectiveScherm.tel .head, #collectiveScherm.tel .legend, #collectiveScherm.tel .dial { display: none; }
#collectiveScherm.tel .chead h1, #collectiveScherm.tel .chead .close { display: none; }
#collectiveScherm.tel .cinsp { padding: 14px 16px; gap: 10px; min-width: 0; }
#collectiveScherm.tel .cinsp .kv { flex-wrap: wrap; }
#collectiveScherm.tel .raad { left: 12px; bottom: 12px; width: 150px; max-height: 40%; overflow: auto; padding: 8px 10px; }
#collectiveScherm.tel .raad p, #collectiveScherm.tel .raad .m { display: none; }
@media (orientation: landscape) {
  #collectiveScherm.tel .chead { position: absolute; z-index: 3; left: 0; top: 0; height: auto; flex-direction: column; align-items: flex-start; gap: 12px; padding: 12px; border: 0; background: none; }
  #collectiveScherm.tel .chead .seg { flex-direction: column; align-items: flex-start; gap: 6px; margin: 0; background: none; padding: 0; flex-basis: auto; order: 0; }
  #collectiveScherm.tel .chead .seg button { box-shadow: inset 0 0 0 1px var(--line-2); border-radius: 18px; padding: 6px 12px; flex: none; }
  #collectiveScherm.tel .chead .seg button .ci { display: none; }
  #collectiveScherm.tel .cwrap { grid-template-columns: minmax(0, 1fr) 250px; }
}
@media (orientation: portrait) {
  #collectiveScherm.tel .cwrap { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 55%) minmax(0, 1fr); }
  #collectiveScherm.tel .chead .seg { min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  #collectiveScherm.tel .chead .seg button { flex: 1 0 auto; }
  #collectiveScherm.tel .cinsp { border-left: 0; border-top: 1px solid var(--line); }
  #collectiveScherm.tel .chead .tback { order: 0; }
  #collectiveScherm.tel .raad { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  #collectiveScherm svg .flow, #collectiveScherm svg .pulse { animation: none; }
  #collectiveScherm .fade, #collectiveScherm .dep { transition: none; }
}