/* Overgenomen uit prototype/portaal.html, ongewijzigd.
*
* Niet opnieuw beginnen: deze stijl is drie keer bijgesteld op GEMETEN
* contrast en op CSS-botsingen die met getComputedStyle zijn gevonden, niet
* met het oog. Zie CLAUDE.md. Prefix per component (vw-, pp-), responsieve
* regels bij het component, en de viewer blijft een donker venster - ook in
* het lichte thema.
*/
:root{
/* kaart t.o.v. achtergrond gemeten: 1,21 -> 1,27; rand van 1,25 -> 1,45 */
--bg:#060510; --surface:#201e3e; --surface-2:#282649; --panel-2:#141229;
--line:rgba(255,255,255,.13); --line-2:rgba(255,255,255,.20); --line-ctl:rgba(255,255,255,.36);
--text:#eef0f7; --text-2:#9da2c0; --text-3:#8a90b8;
--blue:#2bb3f0; --purple:#9a4fd0; --navy:#2e2276; --heading-purple:#c3a0ea;
--grad:linear-gradient(90deg,#2bb3f0,#9a4fd0);
--grad-btn:linear-gradient(90deg,#1e7da8,#9a4fd0);
--urgent:#ff5d73; --urgent-dim:rgba(255,93,115,.13);
--green:#34d39a; --green-dim:rgba(52,211,154,.10);
--blue-dim:rgba(43,179,240,.12); --amber:#e8a33d; --amber-dim:rgba(232,163,61,.12);
--purple-dim:rgba(154,79,208,.16);
--ease:cubic-bezier(.22,.61,.36,1);
--s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-8:32px; --s-10:40px; --s-12:48px;
--r-xs:6px; --r-sm:8px; --r-md:10px; --r-lg:12px; --r-xl:14px; --r-2xl:16px; --r-pill:999px;
--e-1:0 1px 0 rgba(255,255,255,.06) inset, 0 2px 4px rgba(0,0,0,.35), 0 16px 34px -22px rgba(0,0,0,.9);
--e-2:0 1px 0 rgba(255,255,255,.05) inset, 0 16px 40px -18px rgba(0,0,0,.78);
--e-3:0 1px 0 rgba(255,255,255,.06) inset, 0 40px 90px -30px rgba(0,0,0,.9);
--fs-2xs:10px; --fs-xs:11px; --fs-sm:12px; --fs-base:13px; --fs-md:14px;
--fs-lg:16px; --fs-xl:18px; --fs-2xl:20px; --fs-3xl:22px; --fs-4xl:26px; --fs-hero:32px;
/* Signaalkleuren als TEKST vragen per thema een eigen tint. De merkkleur
zelf blijft; alleen de leesbare variant verschilt. Gemeten op wit en op --bg. */
--blue-ink:#5cc6f5; --amber-ink:#f0c483; --green-ink:#7fe3bd;
--red-ink:#ffa3af; --purple-ink:#d3aef0;
/* Chrome = alles wat over het donkere 3D-venster zweeft. Blijft in BEIDE
thema's donker, net als in Figma of Cesium: de viewer is een donker venster. */
--chrome-bg:rgba(16,14,32,.93); --chrome-bg-2:rgba(6,5,16,.86);
--chrome-line:rgba(255,255,255,.30); --chrome-hover:rgba(255,255,255,.09);
--chrome-ink:#eef0f7; --chrome-ink-2:#b9bfd8; --chrome-ink-3:#8f96b5;
--font:'Outfit', system-ui, sans-serif;
--font-num:'IBM Plex Mono', ui-monospace, Consolas, monospace;
}
/* Donker is de basis (zoals de cockpit). Licht wordt hier als variant gezet,
zowel via de systeemvoorkeur als via de expliciete keuze in Instellingen. */
@media (prefers-color-scheme: light){
:root:not([data-theme="dark"]){
--blue-ink:#14789f; --amber-ink:#8a5c08; --green-ink:#0e7d59;
--red-ink:#c22a44; --purple-ink:#6b2f9c;
--bg:#e8ebf4; --surface:#ffffff; --surface-2:#f1f3f9; --panel-2:#eef0f7;
--line:rgba(24,20,60,.16); --line-2:rgba(24,20,60,.22); --line-ctl:rgba(24,20,60,.36);
--text:#14122e; --text-2:#4a4f70; --text-3:#5c6180;
--heading-purple:#6b2f9c;
--urgent-dim:rgba(214,45,72,.10); --green-dim:rgba(14,140,96,.10);
--blue-dim:rgba(20,120,170,.10); --amber-dim:rgba(150,102,15,.12); --purple-dim:rgba(122,58,170,.12);
--e-1:0 1px 2px rgba(24,20,60,.09), 0 10px 24px -14px rgba(24,20,60,.30);
--e-2:0 2px 6px rgba(24,20,60,.08), 0 16px 40px -20px rgba(24,20,60,.40);
--e-3:0 4px 10px rgba(24,20,60,.10), 0 40px 90px -34px rgba(24,20,60,.45);
--scrim-c:rgba(24,20,60,.55);
}
}
:root[data-theme="light"]{
--blue-ink:#14789f; --amber-ink:#8a5c08; --green-ink:#0e7d59;
--red-ink:#c22a44; --purple-ink:#6b2f9c;
--bg:#e8ebf4; --surface:#ffffff; --surface-2:#f1f3f9; --panel-2:#eef0f7;
--line:rgba(24,20,60,.16); --line-2:rgba(24,20,60,.22); --line-ctl:rgba(24,20,60,.36);
--text:#14122e; --text-2:#4a4f70; --text-3:#5c6180;
--heading-purple:#6b2f9c;
--urgent-dim:rgba(214,45,72,.10); --green-dim:rgba(14,140,96,.10);
--blue-dim:rgba(20,120,170,.10); --amber-dim:rgba(150,102,15,.12); --purple-dim:rgba(122,58,170,.12);
--e-1:0 1px 2px rgba(24,20,60,.09), 0 10px 24px -14px rgba(24,20,60,.30);
--e-2:0 2px 6px rgba(24,20,60,.08), 0 16px 40px -20px rgba(24,20,60,.40);
--e-3:0 4px 10px rgba(24,20,60,.10), 0 40px 90px -34px rgba(24,20,60,.45);
--scrim-c:rgba(24,20,60,.55);
}
*{box-sizing:border-box}
/* een klasse met display:flex verslaat het hidden-attribuut; dit voorkomt
dat verborgen panelen toch ruimte innemen in een flex-kolom */
[hidden]{display:none !important}
html,body{height:100%}
body{
background:var(--bg); color:var(--text); font-family:var(--font);
font-size:var(--fs-md); line-height:1.6; margin:0;
-webkit-font-smoothing:antialiased; overflow-x:hidden;
}
button,input,select{font-family:inherit}
:focus-visible{outline:2px solid var(--blue-ink); outline-offset:2px; border-radius:3px}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.skip{position:absolute; left:-999px; top:8px; z-index:200; background:var(--surface); padding:8px 14px; border-radius:var(--r-sm)}
.skip:focus{left:8px}
/* ── shell ───────────────────────────────────────────── */
.top{
position:sticky; top:0; z-index:40; background:color-mix(in srgb, var(--bg) 88%, transparent);
backdrop-filter:blur(14px) saturate(1.3); border-bottom:1px solid var(--line);
}
.top::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
background:var(--grad); opacity:.30}
.top .in{max-width:1440px; margin:0 auto; padding:0 var(--s-6); height:60px; display:flex; align-items:center; gap:var(--s-5)}
.brand{display:flex; align-items:center; gap:var(--s-3); font-weight:600; font-size:var(--fs-lg); color:inherit; text-decoration:none}
.brand .mark{width:28px; height:28px; border-radius:8px; background:var(--grad-btn); display:grid; place-items:center; font-weight:700; font-size:var(--fs-sm); color:#fff}
.nav{display:flex; gap:2px; margin-left:var(--s-4)}
.nav a{color:var(--text-2); text-decoration:none; font-size:var(--fs-md); padding:7px 13px; border-radius:var(--r-sm); transition:.18s var(--ease)}
.nav a:hover{background:rgba(255,255,255,.06); color:var(--text)}
.nav a.on{color:var(--text); background:rgba(255,255,255,.07)}
.who{margin-left:auto; display:flex; align-items:center; gap:var(--s-3)}
.who .nm{text-align:right; line-height:1.25}
.who .nm b{display:block; font-weight:500; font-size:var(--fs-md)}
.who .nm span{color:var(--text-3); font-size:var(--fs-sm)}
.av{width:34px; height:34px; border-radius:var(--r-pill); background:var(--surface-2); border:1px solid var(--line-2); display:grid; place-items:center; font-size:var(--fs-sm); font-weight:600; color:var(--text-2)}
main{max-width:1440px; margin:0 auto; padding:0 var(--s-6) var(--s-12)}
main.wide{max-width:none; padding:0}
/* ── primitieven ─────────────────────────────────────── */
h1{font-size:clamp(26px,3.4vw,36px); font-weight:600; letter-spacing:-.03em; margin:var(--s-10) 0 var(--s-1); text-wrap:balance; line-height:1.1}
h2{font-size:var(--fs-xl); font-weight:600; letter-spacing:-.012em; margin:0}
h3{font-size:var(--fs-md); font-weight:600; margin:0}
p{margin:0}
a{color:var(--blue-ink)}
.lede{color:var(--text-2); margin:0 0 var(--s-6)}
.card{
background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,0) 46%), var(--surface);
border:1px solid var(--line); border-radius:var(--r-2xl);
box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 20px 46px -26px rgba(0,0,0,.85);
}
.btn{
font-size:var(--fs-md); font-weight:500; color:#fff; background:var(--grad-btn);
border:0; border-radius:var(--r-sm); min-height:40px; padding:0 var(--s-4);
cursor:pointer; transition:.18s var(--ease); display:inline-flex; align-items:center;
justify-content:center; gap:8px; text-decoration:none; white-space:nowrap;
}
.btn{box-shadow:0 8px 22px -12px rgba(43,179,240,.75), 0 1px 0 rgba(255,255,255,.16) inset}
.btn:hover{filter:brightness(1.14); transform:translateY(-1px)}
.btn:active{transform:none}
.btn.ghost{box-shadow:none}
.btn.ghost{background:var(--panel-2); border:1px solid var(--line-ctl); color:var(--text)}
.btn.ghost:hover{background:var(--surface-2); filter:none}
.btn.mini{min-height:32px; font-size:var(--fs-sm); padding:0 var(--s-3)}
.btn[disabled]{opacity:.45; cursor:default; filter:none}
@media (pointer:coarse){ .btn,.btn.mini{min-height:44px} }
.pill{display:inline-flex; align-items:center; gap:5px; font-size:var(--fs-xs); padding:3px 9px;
border-radius:var(--r-pill); border:1px solid var(--line-2); background:var(--panel-2); color:var(--text-2); white-space:nowrap}
.pill.blue{background:var(--blue-dim); border-color:var(--blue-ink)}
.pill.green{background:var(--green-dim); border-color:var(--green-ink)}
.pill.amber{background:var(--amber-dim); border-color:var(--amber-ink)}
.pill.red{background:var(--urgent-dim); border-color:var(--red-ink)}
.pill.purple{background:var(--purple-dim); border-color:var(--purple-ink)}
.dot{width:6px; height:6px; border-radius:50%; background:currentColor; flex:none}
.num{font-family:var(--font-num); font-variant-numeric:tabular-nums}
.ic{width:16px; height:16px; flex:none; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.crumb{display:flex; align-items:center; gap:var(--s-2); color:var(--text-3); font-size:var(--fs-sm); padding-top:var(--s-5); flex-wrap:wrap}
.crumb a{color:var(--text-2); text-decoration:none}
.crumb a:hover{color:var(--text); text-decoration:underline}
/* ── login ───────────────────────────────────────────── */
.login{min-height:calc(100vh - 60px); display:grid; place-items:center; padding:var(--s-8) var(--s-4)}
.login .box{width:100%; max-width:400px; padding:var(--s-8); display:flex; flex-direction:column; gap:var(--s-4)}
.login h1{margin:0; font-size:var(--fs-2xl)}
.field{display:flex; flex-direction:column; gap:6px}
.field label{font-size:var(--fs-sm); color:var(--text-2)}
.field input{
background:var(--panel-2); border:1px solid var(--line-ctl); border-radius:var(--r-sm);
color:var(--text); padding:11px 13px; font-size:var(--fs-md); min-height:44px;
}
.field input:focus{outline:none; border-color:var(--blue-ink); box-shadow:0 0 0 3px rgba(43,179,240,.25)}
.hint{color:var(--text-3); font-size:var(--fs-sm)}
/* De foutmelding bij het aanmelden. Leeg neemt hij geen ruimte in, zodat het
formulier niet verspringt zodra er iets misgaat - een knop die onder je vinger
wegschuift is erger dan de melding zelf. --red-ink heeft per thema een eigen
tint; de merkkleur blijft, alleen de leesbare variant verschilt. */
.melding{display:none}
.melding.aan{display:block; color:var(--red-ink); font-size:var(--fs-sm);
background:var(--urgent-dim); border:1px solid var(--red-ink);
border-radius:var(--r-sm); padding:9px 12px}
/* ── hero ── */
.hero{position:relative; overflow:hidden; border-radius:var(--r-2xl); margin-top:var(--s-6);
border:1px solid var(--line); box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 30px 70px -34px rgba(0,0,0,.95)}
.hero canvas{display:block; width:100%; height:clamp(300px,42vh,440px)}
.hero .veil{position:absolute; inset:0; pointer-events:none;
background:linear-gradient(180deg, rgba(6,5,16,.62) 0%, rgba(6,5,16,.05) 26%, rgba(6,5,16,.55) 58%, rgba(6,5,16,.94) 82%, rgba(6,5,16,.99) 100%)}
.hero .facts div span{color:rgba(255,255,255,.66)}
.hero .facts div b{color:#fff; text-shadow:0 1px 10px rgba(0,0,0,.8)}
.hero .body{position:absolute; left:0; right:0; bottom:0; padding:var(--s-6) var(--s-8) var(--s-6);
display:flex; align-items:flex-end; gap:var(--s-6); flex-wrap:wrap}
.hero .body .grow{flex:1; min-width:260px}
/* De hero staat op een donkere opname: die inhoud volgt de chrome, niet het thema. */
.hero h1{margin:0 0 var(--s-3); color:#fff; text-shadow:0 2px 24px rgba(0,0,0,.75)}
.hero .tag .pill{background:var(--chrome-bg-2); border-color:var(--chrome-line); color:var(--chrome-ink-2)}
.hero .tag .pill.blue{color:#9fd4f2; border-color:rgba(43,179,240,.55)}
.hero .facts{margin:0}
.hero .tag{position:absolute; top:var(--s-5); left:var(--s-6); display:flex; gap:var(--s-2); z-index:2}
/* alleen beweging, geen opacity: een pagina kan zo nooit onzichtbaar blijven hangen */
@keyframes fadein{from{transform:translateY(8px)} to{transform:none}}
main{animation:fadein .30s var(--ease)}
/* ── projectenlijst ──────────────────────────────────── */
.toolbar{display:flex; gap:var(--s-2); align-items:center; flex-wrap:wrap; margin-bottom:var(--s-4)}
.search{position:relative; flex:1; min-width:220px; max-width:380px}
.search input{
width:100%; background:var(--panel-2); border:1px solid var(--line-ctl); border-radius:var(--r-sm);
color:var(--text); padding:9px 13px 9px 36px; font-size:var(--fs-md); min-height:40px;
}
.search input:focus{outline:none; border-color:var(--blue-ink); box-shadow:0 0 0 3px rgba(43,179,240,.25)}
.search .ic{position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--text-3)}
.chip{
font-size:var(--fs-sm); color:var(--text-2); background:var(--panel-2); border:1px solid var(--line-2);
border-radius:var(--r-pill); padding:6px 13px; cursor:pointer; min-height:34px; transition:.18s var(--ease);
}
.chip:hover{color:var(--text); border-color:var(--line-ctl)}
.chip[aria-pressed="true"]{background:var(--purple-dim); border-color:rgba(154,79,208,.55); color:var(--purple-ink); font-weight:500}
.plist{display:flex; flex-direction:column; gap:var(--s-2)}
.prow{
color:inherit; text-decoration:none; display:grid;
grid-template-columns:132px minmax(0,2.1fr) minmax(0,1fr) auto auto; align-items:center;
gap:var(--s-5); padding:var(--s-4) var(--s-5); transition:.18s var(--ease);
}
.pthumb{position:relative; width:132px; height:84px; border-radius:var(--r-md); overflow:hidden;
background:#07061a; border:1px solid var(--line); flex:none}
.pthumb canvas{width:100%; height:100%; display:block}
.pthumb .badge{position:absolute; right:5px; bottom:5px; font-size:9px; letter-spacing:.08em;
text-transform:uppercase; color:#cfe6f6; background:rgba(6,5,16,.78); border:1px solid var(--line-2);
border-radius:var(--r-xs); padding:2px 5px}
.prow:hover .pthumb{border-color:rgba(43,179,240,.5)}
.prow{will-change:transform}
.prow:hover{border-color:rgba(43,179,240,.45); transform:translateY(-2px);
box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 26px 50px -28px rgba(0,0,0,.9), 0 0 0 1px rgba(43,179,240,.12)}
.pn b{display:block; font-weight:500; font-size:var(--fs-lg); letter-spacing:-.01em}
.pn span{color:var(--text-3); font-size:var(--fs-sm)}
.pm{color:var(--text-2); font-size:var(--fs-sm); line-height:1.45}
.pm b{display:block; color:var(--text); font-weight:500}
.caps{display:flex; gap:var(--s-1); flex-wrap:wrap; justify-content:flex-end}
.chev{color:var(--text-3)}
.empty{border:1px dashed var(--line-ctl); border-radius:var(--r-lg); padding:var(--s-10) var(--s-5); text-align:center; color:var(--text-3)}
.empty b{display:block; color:var(--text-2); font-weight:500; margin-bottom:4px}
.empty.groot{padding:var(--s-12) var(--s-6); max-width:560px; margin:var(--s-8) auto 0;
display:flex; flex-direction:column; align-items:center; gap:var(--s-3)}
.empty.groot b{font-size:var(--fs-xl); color:var(--text); margin:0}
.empty.groot p{color:var(--text-2); max-width:44ch; line-height:1.6}
.empty.groot p.klein{color:var(--text-3); font-size:var(--fs-sm)}
.ic-groot{width:44px; height:44px; stroke:var(--text-3); fill:none; stroke-width:1.6;
stroke-linejoin:round; margin-bottom:var(--s-2)}
/* ── projectpagina ───────────────────────────────────── */
.phead{display:flex; align-items:flex-end; gap:var(--s-5); flex-wrap:wrap; margin-bottom:var(--s-6)}
.phead .grow{flex:1; min-width:260px}
.facts{display:flex; gap:var(--s-6); flex-wrap:wrap; margin-top:var(--s-2)}
.facts div span{display:block; color:var(--text-3); font-size:var(--fs-2xs); letter-spacing:.16em; text-transform:uppercase; margin-bottom:3px}
.facts div b{font-weight:500; font-size:var(--fs-md)}
.facts b.op-pad{font-size:var(--fs-sm)}
/* Opnamen van hetzelfde project - projecten/{nr}/{jjjj-mm-dd}/, zie docs/opslag-indeling.md */
.op-rij{display:flex; flex-wrap:wrap; gap:var(--s-2); padding:var(--s-4) var(--s-5)}
.op-i{display:flex; flex-direction:column; gap:2px; padding:var(--s-3) var(--s-4);
border:1px solid var(--line); border-radius:var(--r-md);
text-decoration:none; background:var(--surface-2)}
.op-i b{display:block; font-weight:500; font-size:var(--fs-md); color:var(--text)}
.op-i span{color:var(--text-3); font-size:var(--fs-xs)}
.op-i:hover{border-color:rgba(43,179,240,.45)}
.op-i.nu{border-color:var(--blue-ink); background:transparent}
@media (max-width:560px){ .op-i{flex:1 1 100%} }
.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr)); gap:var(--s-3); margin-bottom:var(--s-8)}
.tile{padding:var(--s-5) var(--s-6)}
.tile .k{color:var(--text-3); font-size:var(--fs-2xs); letter-spacing:.16em; text-transform:uppercase}
.tile .v{font-size:34px; font-weight:600; letter-spacing:-.035em; margin-top:6px; line-height:1.05}
.tile .n{color:var(--text-2); font-size:var(--fs-sm)}
.tile.hot .v{color:var(--amber-ink)}
.sec{margin-bottom:var(--s-8)}
.shead{display:flex; align-items:center; gap:var(--s-3); margin-bottom:var(--s-3); flex-wrap:wrap}
.shead h2{flex:1}
.viewcard{display:grid; grid-template-columns:minmax(0,1fr) 292px; overflow:hidden}
.vthumb{position:relative; min-height:236px; background:#07061a; border-right:1px solid var(--line)}
.vthumb canvas{position:absolute; inset:0; width:100%; height:100%; display:block}
.vthumb .ov{position:absolute; left:var(--s-4); bottom:var(--s-4); font-family:var(--font-num);
font-size:var(--fs-xs); color:var(--text-2); background:rgba(6,5,16,.75); border:1px solid var(--line);
border-radius:var(--r-xs); padding:4px 9px}
.vside{padding:var(--s-5); display:flex; flex-direction:column; gap:var(--s-3)}
.vside p{color:var(--text-2); font-size:var(--fs-sm)}
table{width:100%; border-collapse:collapse; font-size:var(--fs-md)}
th{text-align:left; font-size:var(--fs-2xs); letter-spacing:.11em; text-transform:uppercase; color:var(--text-3);
font-weight:500; padding:0 var(--s-4) var(--s-2) 0; border-bottom:1px solid var(--line); white-space:nowrap}
td{padding:var(--s-3) var(--s-4) var(--s-3) 0; border-bottom:1px solid var(--line); vertical-align:middle}
tr:last-child td{border-bottom:0}
td.r,th.r{text-align:right; padding-right:0}
.fn{display:flex; align-items:center; gap:var(--s-3)}
.fi{width:32px; height:32px; border-radius:var(--r-sm); background:var(--panel-2); border:1px solid var(--line);
display:grid; place-items:center; flex:none; font-size:var(--fs-2xs); font-weight:600; color:var(--text-2)}
.fn b{font-weight:500}
.fn span{display:block; color:var(--text-3); font-size:var(--fs-xs); font-family:var(--font-num)}
.finds{display:flex; flex-direction:column; padding:0 var(--s-5)}
.find{display:grid; grid-template-columns:46px minmax(0,1fr) auto; gap:var(--s-3); align-items:center;
padding:var(--s-3) 0; border-bottom:1px solid var(--line); color:inherit; text-decoration:none}
.find:last-child{border-bottom:0}
.find:hover{background:rgba(255,255,255,.03)}
.fth{width:46px; height:46px; border-radius:var(--r-sm); border:1px solid var(--line); overflow:hidden; background:#0b0a1e}
.fth canvas{width:100%; height:100%; display:block}
.ft b{display:block; font-weight:500}
.ft .m{color:var(--text-3); font-size:var(--fs-sm); display:flex; gap:var(--s-2); align-items:center; flex-wrap:wrap; margin-top:2px}
.by{display:inline-flex; align-items:center; gap:5px; font-size:var(--fs-xs); color:var(--text-2)}
.by .a{width:16px; height:16px; border-radius:50%; display:grid; place-items:center; font-size:8px; font-weight:700; color:#fff}
.by.ey .a{background:var(--grad-btn)}
.by.kl .a{background:var(--surface-2); border:1px solid var(--line-2); color:var(--text-2)}
/* ── viewer ──────────────────────────────────────────── */
.vwrap{
/* 60px balk + 1px rand; dvh voorkomt de sprong op mobiel */
height:calc(100vh - 61px); height:calc(100dvh - 61px); display:grid; background:var(--surface);
grid-template-columns:300px minmax(0,1fr) 0px; transition:grid-template-columns .26s var(--ease);
}
.vwrap.lc{grid-template-columns:54px minmax(0,1fr) 0px}
.vwrap.split{grid-template-columns:300px minmax(0,1fr) minmax(330px,44%)}
.vwrap.lc.split{grid-template-columns:54px minmax(0,1fr) minmax(330px,44%)}
.pane{display:flex; flex-direction:column; min-width:0; background:var(--surface); overflow:hidden}
.pane.l{border-right:1px solid var(--line)}
.ph{padding:0 var(--s-4); border-bottom:1px solid var(--line); min-height:46px;
display:flex; align-items:center; gap:var(--s-1); font-size:var(--fs-2xs);
letter-spacing:.14em; text-transform:uppercase; color:var(--text-3)}
.ph .lbl:first-child{margin-right:auto}
.collapse{margin-left:0; background:none; border:0; color:var(--text-3); cursor:pointer;
width:30px; height:30px; border-radius:var(--r-sm); display:grid; place-items:center}
.collapse:hover{color:var(--text); background:rgba(255,255,255,.07)}
.vwrap.lc .pane.l .ph{justify-content:center; padding:0}
.vwrap.lc .pane.l .ph span.lbl,.vwrap.lc .pane.l .pb{display:none}
.vwrap.lc .collapse{margin:0; transform:rotate(180deg)}
.pb{padding:var(--s-3) var(--s-4) var(--s-5); overflow-y:auto; flex:1; display:flex; flex-direction:column; gap:var(--s-2)}
.grp{font-size:var(--fs-2xs); letter-spacing:.14em; text-transform:uppercase; color:var(--text-3);
display:flex; align-items:center; gap:var(--s-2); margin:var(--s-4) 0 var(--s-1)}
.grp:first-child{margin-top:0}
.grp .c{margin-left:auto; font-family:var(--font-num); letter-spacing:0}
/* meting- en bevindingskaartjes */
.item{border:1px solid var(--line); border-radius:var(--r-md); padding:var(--s-3);
background:var(--panel-2); cursor:pointer; transition:.16s var(--ease); text-align:left;
width:100%; color:inherit; font-size:var(--fs-md); display:block}
.item:hover{border-color:var(--line-ctl); background:var(--surface-2)}
.item[aria-current="true"]{border-color:var(--blue-ink); background:var(--blue-dim)}
.item b{display:block; font-weight:500}
.item .m{color:var(--text-3); font-size:var(--fs-xs); display:flex; gap:var(--s-2); align-items:center; flex-wrap:wrap; margin-top:5px}
.item .co{font-family:var(--font-num); font-size:var(--fs-2xs); color:var(--text-3); margin-top:5px}
.item .big{font-family:var(--font-num); font-size:var(--fs-xl); font-weight:500; letter-spacing:-.01em}
.item .x{float:right; background:none; border:0; color:var(--text-3); cursor:pointer; font-size:var(--fs-lg); line-height:1; padding:0 2px}
.item .x:hover{color:var(--urgent)}
.leeg{color:var(--text-3); font-size:var(--fs-sm); padding:var(--s-3) 0; line-height:1.5}
/* stage */
.stage{position:relative; background:#07061a; min-width:0; overflow:hidden}
.stage canvas{position:absolute; inset:0; width:100%; height:100%; display:block; cursor:crosshair; touch-action:none}
.stage.grab canvas{cursor:grab}
.stage.grabbing canvas{cursor:grabbing}
.midtop{position:absolute; top:var(--s-3); left:50%; transform:translateX(-50%); z-index:4;
display:flex; flex-direction:column; align-items:center; gap:var(--s-2); max-width:calc(100% - 24px)}
.tools{position:static; display:flex; gap:2px;
background:var(--chrome-bg); border:1px solid var(--chrome-line); border-radius:var(--r-pill);
padding:3px; z-index:4; backdrop-filter:blur(10px); box-shadow:var(--e-2)}
.tools{max-width:calc(100% - 24px); flex-wrap:wrap; justify-content:center}
.tools button{display:inline-flex; align-items:center; gap:5px; font-size:var(--fs-sm); color:var(--chrome-ink-2);
background:none; border:0; border-radius:var(--r-pill); padding:6px 10px; cursor:pointer; min-height:34px; white-space:nowrap}
.tools button:hover{color:var(--chrome-ink); background:var(--chrome-hover)}
.tools button[aria-pressed="true"]{background:var(--grad-btn); color:#fff}
/* lagen: klein knopje met popover, niet meer een vaste kolom */
.iconbtn{position:absolute; z-index:4; width:36px; height:36px; border-radius:var(--r-sm);
background:var(--chrome-bg); border:1px solid var(--chrome-line); color:var(--chrome-ink-2);
cursor:pointer; display:grid; place-items:center; backdrop-filter:blur(10px); box-shadow:var(--e-2)}
.iconbtn:hover{color:var(--chrome-ink); border-color:var(--blue)}
.iconbtn[aria-expanded="true"]{color:#fff; background:var(--grad-btn); border-color:transparent}
.lagenbtn{top:var(--s-3); left:var(--s-3)}
.pop{position:absolute; top:56px; left:var(--s-3); z-index:5; width:238px; padding:var(--s-3);
border-radius:var(--r-lg); background:rgba(22,19,44,.97); border:1px solid var(--chrome-line);
box-shadow:0 24px 60px -20px rgba(0,0,0,.9); backdrop-filter:blur(14px); display:none}
.pop.on{display:block}
.pop .t{font-size:var(--fs-2xs); letter-spacing:.14em; text-transform:uppercase; color:var(--chrome-ink-3); margin:0 0 var(--s-2)}
.lyr{display:flex; align-items:center; gap:var(--s-3); background:none; border:0; padding:6px 0;
cursor:pointer; color:var(--chrome-ink-2); font-size:var(--fs-md); text-align:left; width:100%; min-height:34px}
.lyr:hover{color:var(--chrome-ink)}
.sw{width:30px; height:17px; border-radius:var(--r-pill); background:rgba(0,0,0,.45);
border:1px solid var(--chrome-line); position:relative; flex:none; transition:.18s var(--ease)}
.sw::after{content:""; position:absolute; top:2px; left:2px; width:11px; height:11px; border-radius:50%;
background:var(--chrome-ink-3); transition:.18s var(--ease)}
.lyr[aria-checked="true"] .sw{background:var(--grad-btn); border-color:transparent}
.lyr[aria-checked="true"] .sw::after{left:15px; background:#fff}
.lyr[aria-checked="true"]{color:var(--chrome-ink)}
.pop .seg{display:flex; background:rgba(0,0,0,.4); border:1px solid var(--chrome-line);
border-radius:var(--r-sm); padding:2px; gap:2px; margin-top:var(--s-3)}
.pop .seg button{flex:1; font-size:var(--fs-sm); color:var(--chrome-ink-2); background:none; border:0;
border-radius:6px; padding:6px 4px; cursor:pointer; min-height:32px}
.pop .seg button[aria-pressed="true"]{background:rgba(255,255,255,.15); color:var(--chrome-ink)}
.hint2{position:static; font-size:var(--fs-sm);
color:var(--chrome-ink-2); background:var(--chrome-bg); border:1px solid var(--chrome-line);
border-radius:var(--r-pill); padding:4px 6px 4px 14px; backdrop-filter:blur(10px);
display:flex; align-items:center; gap:var(--s-3); white-space:nowrap}
.hint2 button{font-family:inherit; font-size:var(--fs-sm); border:0; border-radius:var(--r-pill);
padding:5px 12px; cursor:pointer; min-height:30px}
.hint2 .af{background:var(--grad-btn); color:#fff; font-weight:500}
.hint2 .an{background:transparent; color:var(--chrome-ink-3)}
.hint2 .an:hover{color:var(--chrome-ink); background:var(--chrome-hover)}
.hud{position:absolute; left:var(--s-3); bottom:var(--s-3); z-index:4;
background:var(--chrome-bg-2); border:1px solid var(--chrome-line); border-radius:var(--r-sm); padding:7px 12px;
font-family:var(--font-num); font-size:var(--fs-xs); color:var(--chrome-ink-2); line-height:1.75; white-space:nowrap}
.hud b{color:var(--chrome-ink); font-weight:500}
.hud .crs{color:#5cc6f5; font-size:var(--fs-2xs); letter-spacing:.06em}
.meas{position:absolute; z-index:3; pointer-events:none; font-family:var(--font-num); font-size:var(--fs-xs);
background:rgba(6,5,16,.92); border:1px solid var(--blue); color:#cfeeff;
border-radius:var(--r-xs); padding:3px 8px; transform:translate(-50%,-50%)}
/* fotopaneel — split screen */
.photopane{border-left:1px solid var(--line); background:var(--surface); display:flex; flex-direction:column; min-width:0}
.photopane .head{padding:0 var(--s-3) 0 var(--s-4); min-height:46px; border-bottom:1px solid var(--line);
display:flex; align-items:center; gap:var(--s-2); font-size:var(--fs-2xs); letter-spacing:.14em;
text-transform:uppercase; color:var(--text-3)}
.photopane .big{position:relative; flex:1; background:#07061a; min-height:0}
.photopane .big canvas{position:absolute; inset:0; width:100%; height:100%; display:block}
.photopane .meta{position:absolute; left:var(--s-3); bottom:var(--s-3); z-index:2;
background:var(--chrome-bg-2); border:1px solid var(--chrome-line); border-radius:var(--r-sm);
padding:6px 11px; font-family:var(--font-num); font-size:var(--fs-xs); color:var(--chrome-ink-2); line-height:1.7}
.photopane .meta b{color:var(--chrome-ink); font-weight:500}
.marker{position:absolute; width:38px; height:38px; margin:-19px 0 0 -19px; border:2px solid var(--blue);
border-radius:50%; box-shadow:0 0 0 2px rgba(6,5,16,.85), 0 0 18px rgba(43,179,240,.65); pointer-events:none; z-index:2}
.marker::after{content:""; position:absolute; inset:15px; background:var(--blue); border-radius:50%}
.strip{display:grid; grid-template-columns:repeat(4,1fr); gap:6px; padding:var(--s-3); border-top:1px solid var(--line)}
.strip button{padding:0; border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden;
background:#0b0a1e; cursor:pointer; aspect-ratio:4/3; position:relative}
.strip button canvas{width:100%; height:100%; display:block}
.strip button:hover{border-color:var(--line-ctl)}
.strip button[aria-current="true"]{border-color:var(--blue); box-shadow:0 0 0 2px rgba(43,179,240,.35)}
.strip .lb{position:absolute; left:4px; bottom:3px; font-family:var(--font-num); font-size:9px;
color:#dfeaf5; text-shadow:0 1px 4px #000}
/* bevindingdetail in het contextpaneel */
.det{flex:1; overflow-y:auto; display:flex; flex-direction:column}
.det .foto{position:relative; height:min(38vh,300px); background:#07061a; flex:none; border-bottom:1px solid var(--line)}
.det .foto canvas{position:absolute; inset:0; width:100%; height:100%; display:block}
.det .foto .cap{position:absolute; left:var(--s-3); bottom:var(--s-3); font-family:var(--font-num);
font-size:var(--fs-xs); color:var(--chrome-ink-2); background:var(--chrome-bg-2); border:1px solid var(--chrome-line);
border-radius:var(--r-xs); padding:5px 10px}
.det .body{padding:var(--s-5); display:flex; flex-direction:column; gap:var(--s-4)}
.det h3{font-size:var(--fs-2xl); font-weight:600; letter-spacing:-.02em; line-height:1.2}
.det .kv{display:flex; gap:var(--s-5); flex-wrap:wrap}
.det .kv div span{display:block; color:var(--text-3); font-size:var(--fs-2xs); letter-spacing:.14em; text-transform:uppercase}
.det .kv div b{font-weight:500; font-family:var(--font-num); font-size:var(--fs-sm)}
.det .oms{color:var(--text-2); line-height:1.65}
.det .acties{display:flex; gap:var(--s-2); flex-wrap:wrap}
.cmts{display:flex; flex-direction:column; gap:var(--s-3); border-top:1px solid var(--line); padding-top:var(--s-4)}
.cmt{display:grid; grid-template-columns:26px minmax(0,1fr); gap:var(--s-3)}
.cmt .a{width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
font-size:10px; font-weight:700; color:#fff}
.cmt.ey .a{background:var(--grad-btn)}
.cmt.kl .a{background:var(--surface-2); border:1px solid var(--line-2); color:var(--text-2)}
.cmt .b b{font-weight:500}
.cmt .b time{color:var(--text-3); font-size:var(--fs-xs); margin-left:6px}
.cmt .b p{color:var(--text-2); margin-top:2px}
.cmtform{display:flex; flex-direction:column; gap:var(--s-2)}
.cmtform textarea{background:var(--panel-2); border:1px solid var(--line-ctl); border-radius:var(--r-sm);
color:var(--text); padding:10px 12px; font:inherit; font-size:var(--fs-md); min-height:74px; resize:vertical}
.cmtform textarea:focus{outline:none; border-color:var(--blue-ink); box-shadow:0 0 0 3px rgba(43,179,240,.25)}
.item .cbadge{display:inline-flex; align-items:center; gap:4px; color:var(--text-3); font-size:var(--fs-xs)}
/* filterbalk boven de bevindingen — moet in 300 px passen */
.filt{display:flex; flex-wrap:wrap; gap:4px; margin-bottom:var(--s-1)}
.filt button{font-size:var(--fs-xs); color:var(--text-2); background:var(--panel-2);
border:1px solid var(--line-2); border-radius:var(--r-pill); padding:4px 10px; cursor:pointer; min-height:28px}
.filt button:hover{color:var(--text); border-color:var(--line-ctl)}
.filt button[aria-pressed="true"]{background:var(--purple-dim); border-color:rgba(154,79,208,.55);
color:var(--purple-ink); font-weight:500}
.filt select{font-size:var(--fs-xs); min-height:28px; padding:3px 8px; border-radius:var(--r-pill);
background:var(--panel-2); border:1px solid var(--line-2); color:var(--text-2)}
.grp .van{margin-left:auto; font-family:var(--font-num); letter-spacing:0; color:var(--text-3)}
/* dwarsprofiel */
.prof{flex:1; display:flex; flex-direction:column; min-height:0}
.prof .vlak{position:relative; flex:1; min-height:0; background:var(--panel-2)}
.prof .vlak canvas{position:absolute; inset:0; width:100%; height:100%; display:block}
.prof .onder{padding:var(--s-4) var(--s-5); border-top:1px solid var(--line);
display:flex; gap:var(--s-6); flex-wrap:wrap}
.prof .onder div span{display:block; color:var(--text-3); font-size:var(--fs-2xs);
letter-spacing:.14em; text-transform:uppercase}
.prof .onder div b{font-family:var(--font-num); font-weight:500; font-size:var(--fs-lg)}
/* ── laden en fouten ── */
.skel{position:absolute; inset:0; border-radius:inherit;
background:linear-gradient(90deg, var(--surface-2) 0%, var(--panel-2) 46%, var(--surface-2) 100%);
background-size:220% 100%; animation:schuif 1.5s linear infinite}
@keyframes schuif{from{background-position:220% 0} to{background-position:-220% 0}}
.laadover{position:absolute; inset:0; z-index:6; display:grid; place-items:center;
background:rgba(7,6,26,.86); backdrop-filter:blur(3px); padding:var(--s-5)}
.laadkaart{display:flex; flex-direction:column; align-items:center; gap:var(--s-3);
color:var(--chrome-ink-2); font-size:var(--fs-md); text-align:center; max-width:340px}
.laadkaart .op{font-family:var(--font-num); font-size:var(--fs-xs); color:var(--chrome-ink-3)}
.spin{width:28px; height:28px; border-radius:50%; border:2px solid rgba(255,255,255,.16);
border-top-color:#5cc6f5; animation:tol .9s linear infinite}
@keyframes tol{to{transform:rotate(360deg)}}
.fout{display:flex; flex-direction:column; align-items:center; gap:var(--s-3); text-align:center;
max-width:380px; color:var(--chrome-ink-2)}
.fout .kop{color:var(--chrome-ink); font-weight:500; font-size:var(--fs-lg)}
.fout .ring{width:40px; height:40px; border-radius:50%; border:2px solid var(--amber);
display:grid; place-items:center; color:var(--amber); font-size:var(--fs-xl); font-weight:600}
.foutkaart{border:1px solid rgba(232,163,61,.5); background:var(--amber-dim);
border-radius:var(--r-lg); padding:var(--s-5) var(--s-6); display:flex; gap:var(--s-4);
align-items:flex-start; margin-top:var(--s-6)}
.foutkaart .ring{width:34px; height:34px; font-size:var(--fs-lg); flex:none}
.foutkaart b{display:block; font-weight:500; margin-bottom:3px}
.foutkaart p{color:var(--text-2); font-size:var(--fs-sm); max-width:60ch}
.foutkaart .acts{margin-top:var(--s-3); display:flex; gap:var(--s-2); flex-wrap:wrap}
/* ── instellingen ── */
.inst{max-width:760px; display:flex; flex-direction:column; gap:var(--s-4)}
.inst .blok{padding:var(--s-5) var(--s-6); display:flex; flex-direction:column; gap:var(--s-4)}
.inst h2{font-size:var(--fs-lg)}
.rij{display:flex; align-items:center; gap:var(--s-5); flex-wrap:wrap}
.rij .lab{flex:1; min-width:200px}
.rij .lab b{display:block; font-weight:500}
.rij .lab span{color:var(--text-2); font-size:var(--fs-sm)}
.keuze{display:flex; background:var(--surface-2); border:1px solid var(--line-2);
border-radius:var(--r-sm); padding:3px; gap:3px}
.keuze button{font-size:var(--fs-sm); color:var(--text-2); background:none; border:0;
border-radius:6px; padding:8px 14px; cursor:pointer; min-height:36px; display:inline-flex; align-items:center; gap:6px}
.keuze button[aria-pressed="true"]{background:var(--surface); color:var(--text); font-weight:500;
border:1px solid var(--line-ctl); box-shadow:0 1px 3px rgba(0,0,0,.18)}
.keuze button{border:1px solid transparent}
.keuze .puk{width:13px; height:13px; border-radius:3px; border:1px solid var(--line-2); flex:none}
.puk.donker{background:linear-gradient(135deg,#060510,#242244)}
.puk.licht{background:linear-gradient(135deg,#ffffff,#e2e5f0)}
.puk.systeem{background:linear-gradient(135deg,#ffffff 0 50%,#060510 50% 100%)}
.rij .waarde{color:var(--text-2); font-family:var(--font-num); font-size:var(--fs-sm)}
/* ── beheer ──────────────────────────────────────────── */
.chips{display:flex; gap:5px; flex-wrap:wrap}
/* ── dialoog ─────────────────────────────────────────── */
.scrim{position:fixed; inset:0; background:var(--scrim-c,rgba(4,6,15,.82)); z-index:1000; display:grid; place-items:center; padding:var(--s-4)}
.dlg{width:100%; max-width:440px; padding:var(--s-6); border-radius:var(--r-2xl); box-shadow:var(--e-3); display:flex; flex-direction:column; gap:var(--s-4)}
.dlg h2{font-size:var(--fs-xl)}
.dlg.breed{max-width:720px}
.opts{display:flex; gap:var(--s-5); flex-wrap:wrap}
.opts label{display:inline-flex; align-items:center; gap:var(--s-2); cursor:pointer}
.opts label span{font-family:var(--font-num); color:var(--text-3); font-size:var(--fs-sm)}
.opts input{width:17px; height:17px; accent-color:var(--blue)}
#dxfout{margin:0; background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r-sm);
padding:var(--s-3) var(--s-4); font-family:var(--font-num); font-size:var(--fs-xs); line-height:1.5;
color:var(--text-2); max-height:230px; overflow:auto; white-space:pre}
.hint.let{color:var(--amber-ink)}
.dlg .row{display:flex; gap:var(--s-2); justify-content:flex-end}
select{background:var(--panel-2); border:1px solid var(--line-ctl); border-radius:var(--r-sm); color:var(--text); padding:10px 12px; font-size:var(--fs-md); min-height:42px}
.toast{position:fixed; left:50%; bottom:var(--s-6); transform:translateX(-50%); z-index:1100;
background:var(--surface); border:1px solid var(--line-ctl); border-radius:var(--r-pill);
padding:10px 18px; box-shadow:var(--e-2); font-size:var(--fs-md)}
/* ── prototypestrip ──────────────────────────────────── */
.proto{position:fixed; right:var(--s-4); bottom:var(--s-4); z-index:900; display:flex; align-items:center; gap:var(--s-2);
background:var(--chrome-bg); border:1px solid var(--chrome-line); border-radius:var(--r-pill); padding:5px 6px 5px var(--s-4); box-shadow:var(--e-2)}
.proto .l{font-size:var(--fs-2xs); letter-spacing:.12em; text-transform:uppercase; color:var(--chrome-ink-3)}
.seg{display:flex; background:rgba(0,0,0,.4); border:1px solid var(--chrome-line);
border-radius:var(--r-sm); padding:2px; gap:2px}
.seg button{font-family:inherit; font-size:var(--fs-sm); color:var(--chrome-ink-2); background:none;
border:0; border-radius:6px; padding:6px 12px; cursor:pointer; min-height:32px}
.seg button[aria-pressed="true"]{background:var(--grad-btn); color:#fff; font-weight:500}
.proto .seg{border-radius:var(--r-pill)}
.proto .seg button{border-radius:var(--r-pill); padding:5px 12px}
body[data-role="klant"] .intern,body[data-role="nieuw"] .intern{display:none !important}
@media (max-width:1180px){
/* drie kolommen blijven drie kolommen; het werkblad wijkt voor het fotopaneel */
.vwrap{grid-template-columns:258px minmax(0,1fr) 0px}
.vwrap.split{grid-template-columns:0px minmax(0,1fr) minmax(320px,50%)}
.vwrap.lc.split{grid-template-columns:0px minmax(0,1fr) minmax(320px,50%)}
}
@media (max-width:860px){
.viewcard{grid-template-columns:1fr}
.prow{grid-template-columns:96px minmax(0,1fr) auto; gap:var(--s-3)}
.prow .pm{display:none}
.nav{display:none}
/* onder elkaar in plaats van naast elkaar */
.vwrap,.vwrap.lc,.vwrap.split,.vwrap.lc.split{
grid-template-columns:1fr; grid-template-rows:auto minmax(300px,58vh) 0; height:auto;
}
.vwrap.split,.vwrap.lc.split{grid-template-rows:auto minmax(260px,42vh) minmax(260px,42vh)}
.pane.l{border-right:0; border-bottom:1px solid var(--line); max-height:none}
.pane.l .pb{max-height:240px}
.photopane{border-left:0; border-top:1px solid var(--line)}
.hero .body{padding:var(--s-5)}
}
@media (max-width:560px){
.prow{grid-template-columns:minmax(0,1fr) auto}
.prow .pthumb{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important; animation:none !important}}
/* ---------------------------------------------------------------------------
Toevoegingen voor de applicatie. De mockup had deze componenten niet, omdat
daar geen echte opnamenlijst en geen echte lagenschakelaar in zat.
Zelfde regels als hierboven: tokens in plaats van losse waarden, en de
responsieve regel staat BIJ het component en niet onderaan het bestand -
dat is drie keer misgegaan met generieke klassenamen die elkaar stil
overschreven. Zie CLAUDE.md.
--------------------------------------------------------------------------- */
/* Terug-link boven een detailpagina */
.terug{display:inline-flex; align-items:center; gap:var(--s-2); color:var(--text-2);
text-decoration:none; font-size:var(--fs-sm); padding:var(--s-5) 0 var(--s-3)}
.terug:hover{color:var(--text)}
.terug:focus-visible{outline:2px solid var(--blue-ink); outline-offset:3px; border-radius:var(--r-xs)}
/* Opnamen van hetzelfde project, naast elkaar */
.opnamen{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
gap:var(--s-3); margin:var(--s-3) 0 var(--s-6)}
.opname{display:flex; flex-direction:column; gap:var(--s-1); padding:var(--s-4);
text-decoration:none; color:inherit; transition:border-color .18s var(--ease)}
.opname:hover{border-color:var(--line-ctl)}
.opname:focus-visible{outline:2px solid var(--blue-ink); outline-offset:2px}
.opname b{font-size:var(--fs-md)}
.opname span{color:var(--text-3); font-size:var(--fs-sm); font-family:var(--font-num)}
@media (max-width:560px){ .opnamen{grid-template-columns:1fr} }
/* Kerngetallen onder een projectkop */
.meta{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
gap:var(--s-3); margin:var(--s-5) 0 var(--s-6)}
.meta > div{background:var(--panel-2); border:1px solid var(--line);
border-radius:var(--r-md); padding:var(--s-3) var(--s-4)}
.meta span{display:block; color:var(--text-3); font-size:var(--fs-xs);
text-transform:uppercase; letter-spacing:.06em}
.meta b{font-size:var(--fs-2xl); font-family:var(--font-num); font-variant-numeric:tabular-nums}
/* Lagen aan- en uitzetten in de viewer. Blijft donker in beide thema's:
alles wat over het 3D-venster zweeft gebruikt de chrome-tokens. */
.vw-laag{display:flex; align-items:center; gap:var(--s-2); padding:var(--s-2) 0;
color:var(--chrome-ink); font-size:var(--fs-base); cursor:pointer}
.vw-laag input{accent-color:var(--blue); cursor:pointer}
/* Het 3D-venster zelf vult de stage. Cesium zet hier zijn eigen canvas in. */
#cesium{position:absolute; inset:0}
#cesium .cesium-widget-credits{display:none}
/* Smal scherm: de projectrij valt terug op drie kolommen en verbergt .pm.
Er blijven dan vier zichtbare items over, en het vierde zakt naar een
tweede regel. De chevron is puur decoratief - de hele rij is al een link -
dus die gaat weg in plaats van de opmaak te verbouwen.
Gemeten, niet gezien: getComputedStyle gaf hier 96px 447px 168px terwijl er
vijf items in de opmaak zitten. Met het oog leek het een uitlijnfoutje. */
@media (max-width:860px){
/* De kolom wordt 96px, maar .pthumb hield zijn vaste 132px en liep dus over
de projectnaam heen. Gemeten met getComputedStyle: kolommen 96px 422px
168px, terwijl de miniatuur tot x=177 doorliep en de naam op x=153 begon.
Met het oog leek dat een uitlijnfoutje - het was een overloop. */
.prow .pthumb{width:96px; height:61px}
.prow .chev{display:none}
}
/* Viewer met alleen een stage: één vak dat de volle hoogte pakt.
De mockup-grid gaat uit van drie kolommen (werkblad, stage, fotopaneel) en
valt op smalle schermen terug op rijen. Met alleen een stage belandt die in
een auto-rij en wordt hij nul hoog, want Cesium's canvas is absoluut
gepositioneerd en draagt geen hoogte bij. Gemeten, niet gezien: het canvas
was 800 breed en 0 hoog terwijl de tegels gewoon geladen waren. */
.vwrap.vw-solo{grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr)}
@media (max-width:860px){
/* De mockup zet hier height:auto omdat werkblad en fotopaneel dan ONDER
elkaar komen en samen de hoogte bepalen. Met alleen een stage is er niets
dat hoogte draagt, dus die moet expliciet terug. */
.vwrap.vw-solo{
grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr);
height:calc(100vh - 61px); height:calc(100dvh - 61px);
}
}
/* ── Echte beelden in het fotopaneel ────────────────────────────────────
De mockup tekende de foto's met canvas, want er waren geen echte. Nu wel,
en die komen als ![]()
binnen. De regels hieronder zetten ![]()
naast
canvas neer in plaats van die te vervangen: de mockup blijft werken.
object-fit:contain, niet cover. Een opname bijsnijden is hier schadelijk -
de aanwijzer staat op een pixelpositie in het VOLLEDIGE beeld, en wat je
wegsnijdt kan precies het detail zijn waar het om ging. */
.photopane .big img{position:absolute; inset:0; width:100%; height:100%;
object-fit:contain; display:block; background:#07061a}
.strip button img{width:100%; height:100%; object-fit:cover; display:block}
/* Het fotovak: grote foto erboven, strook eronder, en de strook mag groeien
tot een derde van het paneel voor hij zelf gaat schuiven. */
.fotovak{display:flex; flex-direction:column; flex:1; min-height:0}
/* EEN rij miniaturen die zijwaarts schuift, geen raster dat afbreekt.
De mockup zette hier vier kolommen die doorlopen naar beneden. Dat nodigt uit
om te overzien, en dat kun je niet: het zijn varianten van hetzelfde beeld.
Met tien opnamen op volgorde van perspectief is de eerste bijna altijd de
goede, en de rest loop je langs.
grid-template-columns moet expliciet op none - anders blijven de vier
kolommen van de mockup staan en doet grid-auto-flow niets. */
.fotovak .strip{flex:none; grid-template-columns:none; grid-auto-flow:column;
grid-auto-columns:104px; overflow-x:auto; overflow-y:hidden;
scroll-snap-type:x proximity; scrollbar-width:thin}
.fotovak .strip button{scroll-snap-align:start}
.fotovak .strip img{width:100%; height:100%; object-fit:cover; display:block}
/* Op smal wordt de derde rij 0 hoog, maar .photopane had geen overflow-regel
en zijn kop stak eronderuit. .pane heeft die wel; .photopane is een eigen
klasse en erfde hem niet. */
.photopane{overflow:hidden}
/* ── Uitklapbare lagen in het lagenpaneel ──────────────────────────────
De camerastandpunten hebben per photogroup een eigen schakelaar. Welke
groepen er zijn weet je pas als cameras.json binnen is, dus die lijst wordt
in javascript gevuld; deze regels bepalen alleen hoe hij eruitziet. */
.vw-rij{display:flex; align-items:center; gap:var(--s-1)}
.vw-rij .vw-laag{flex:1; min-width:0}
/* 26 px, niet 22. WCAG 2.2 vraagt minstens 24x24 CSS-pixels voor een
aanwijsdoel, en gemeten stond hij op 22x22 - net eronder. Het icoon blijft
even groot; alleen het trefvlak groeit. */
.vw-uitklap{background:none; border:0; color:var(--chrome-ink-3); cursor:pointer;
width:26px; height:26px; border-radius:var(--r-sm); display:grid; place-items:center; flex:none}
.vw-uitklap:hover{color:var(--chrome-ink); background:var(--chrome-hover)}
.vw-uitklap .ic{transform:rotate(-90deg); transition:transform .16s var(--ease)}
.vw-uitklap[aria-expanded="true"] .ic{transform:rotate(90deg)}
/* De rand links maakt zichtbaar dat deze regels bij de laag erboven horen;
inspringen alleen leest als toeval. */
.vw-sub{margin:0 0 var(--s-2) 9px; padding-left:var(--s-3);
border-left:1px solid var(--chrome-line)}
.vw-sublaag{font-size:var(--fs-sm); color:var(--chrome-ink-2); padding:3px 0}
.vw-kleur{width:9px; height:9px; border-radius:2px; flex:none}
.vw-naam{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
/* Tabulaire cijfers: anders springen de aantallen als er een 1 in staat. */
.vw-aantal{margin-left:auto; font-family:var(--font-num); font-size:var(--fs-2xs);
font-variant-numeric:tabular-nums; color:var(--chrome-ink-3); flex:none}
/* Onder de grondslaglijst staat waar de punten vandaan komen. Dat is geen
detail: uit het originele meetbestand of uit een Metashape-export is het
verschil tussen een controle en een bevestiging. Zie beslissingen.md. */
.vw-bronregel{margin:var(--s-2) 0 0; font-size:var(--fs-2xs); color:var(--chrome-ink-3)}
/* Schuif voor de kegelmaat, in het lagenpaneel. */
.vw-schuif{display:flex; align-items:center; gap:var(--s-2); padding:var(--s-2) 0;
font-size:var(--fs-sm); color:var(--chrome-ink-2)}
.vw-schuif input[type=range]{flex:1; min-width:0; accent-color:var(--blue); cursor:pointer}
/* ── Zoombare opname ───────────────────────────────────────────────────
OpenSeadragon vult hetzelfde vak als de platte ![]()
die het vervangt.
Beide blijven bestaan: zonder piramide valt de viewer terug op het beeld
van 2048 px, en dan moet dat vak er nog steeds zijn. */
.photopane .big #osd{position:absolute; inset:0}
.photopane .big #osd .openseadragon-canvas{outline:none}
/* De aanwijzer als OSD-overlay: dezelfde stip, maar OpenSeadragon bepaalt nu
waar hij staat, dus geen eigen positionering. */
#osdmark{position:absolute; margin:0}