/* AED v2 — vormgeving. Richting (Gert, 20/10/2026): het bedieningspaneel van een IBM 1800 uit de jaren 60–70, zonder
   gimmick: leesbaarheid en overzicht gaan voor. Koel lichtgrijs paneel, een antraciet omkasting (de zijbalk), een wit
   naambord (de bovenbalk), afgeronde knoppen, statussen als lampjes, labels zoals de opschriften op het paneel.
   Eén lettertypefamilie: IBM Plex Sans voor de UI en de titels (werktitels cursief), IBM Plex Mono met tabular-nums
   voor jaartallen, nummers en aantallen. Kleur draagt de laag (werk / bijdrage / archiefstuk); de rest is inkt en grijs.
   Contrast nagerekend: alles minstens 4,5:1 (WCAG AA). */


:root {
  /* Inkt en paneel: koel, neutraal grijs */
  --ink: #1b1c1e;
  --ink-2: #393b3e;
  --muted: #585c60;          /* 5,3:1 op --paper, 6,5:1 op --surface: WCAG AA voor kleine tekst */
  --paper: #e1e4e3;          /* het lichtgrijze paneel */
  --paper-2: #eaeceb;
  --surface: #fbfbfa;
  --hover: #d4d8d7;
  --row-hover: #f1f3f2;
  --line: #c5c9c8;
  --line-2: #e1e4e3;
  --line-strong: #a5aaa9;
  --control-line: #a0a5a4;

  /* De omkasting en de lampjes */
  --panel: #1e1f21;
  --panel-ink: #e6e8e6;
  --panel-muted: #a2a6a6;
  --panel-hover: #2e3033;
  --lamp-off: #a0a5a4;
  --lamp-on: #d99a2b;
  --lamp-ok: #3f9a5c;

  /* Actie en signaal: het blauwgroen van de toetsen, het rood van de alarmknop */
  --accent: #1f5f7a;
  --accent-hover: #143f52;
  --accent-key: #2a6c8a;
  --accent-soft: #e2ecf0;
  --accent-soft-line: #b6cdd7;
  --alert: #b0262c;
  --alert-soft: #f9ecec;
  --alert-line: #dcaaac;

  /* Lagen: werk, bijdrage, archiefstuk */
  --layer-work-bg: #e6eef4;      --layer-work: #264a63;
  --layer-contrib-bg: #f3ece0;   --layer-contrib: #6b4a1e;
  --layer-archive-bg: #ece9f2;   --layer-archive: #4a3f66;

  /* Type */
  --font-ui: 'IBM Plex Sans', system-ui, sans-serif;
  --font-title: 'IBM Plex Sans', system-ui, sans-serif;   /* werktitels: cursief (.t) */
  --font-num: 'IBM Plex Mono', ui-monospace, monospace;

  /* Maten */
  --radius: 6px;
  --radius-card: 8px;
  --sidebar: 232px;
  --header: 60px;
  --gutter: 40px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font: 15px/1.5 var(--font-ui);
  color: var(--ink);
  background: var(--paper);
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

h1, h2, h3 { margin: 0; }
h1 { font: 600 28px/1.2 var(--font-ui); letter-spacing: -.01em; }
h2 { font-size: 15px; font-weight: 600; }
/* Opschriften zoals op het paneel: klein, hoofdletters, wat letterafstand */
.card h2, .subsection > h2, .tab-head h2, .images-group h2 { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }

/* Typografische rollen */
.t   { font-family: var(--font-title); font-style: italic; }
.m   { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.lbl { font-size: 12px; color: var(--muted); letter-spacing: .02em; }
.muted { color: var(--muted); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Schermkader ---------- */

.shell { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar);
  flex-shrink: 0;
  background: var(--panel);
  color: var(--panel-ink);
  border-right: 1px solid var(--panel);
  display: flex;
  flex-direction: column;
  padding: 20px 14px;
  gap: 2px;
  position: sticky;
  top: 0;
  height: 100vh;
}
.sidebar .estate { padding: 4px 12px 20px; display: flex; flex-direction: column; gap: 2px; }
.sidebar .estate-name { font: 600 16px/1.25 var(--font-ui); color: var(--panel-ink); }
.sidebar .lbl { color: var(--panel-muted); text-transform: uppercase; letter-spacing: .08em; font-size: 11px; }
.sidebar nav { display: flex; flex-direction: column; gap: 2px; }
.sidebar nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: var(--radius);
  color: var(--panel-ink); font-size: 14px;
}
.sidebar nav a:hover { background: var(--panel-hover); color: var(--panel-ink); text-decoration: none; }
.sidebar nav a[aria-current="page"] { background: var(--paper); color: var(--ink); font-weight: 500; }
.sidebar .spacer { flex-grow: 1; }
.sidebar .sender { padding: 14px 12px 0; border-top: 1px solid var(--panel-hover); margin-top: 10px; }
/* Het logo van BOA onderaan, klein en in de kleur van de tekst eromheen (Gert, 20/10: heel subtiel); de vorm komt uit
   het briefpapier (boa-logo.svg), de kleur uit currentColor via een masker */
.boa-mark { display: block; width: 44px; aspect-ratio: 86.27 / 22.93; margin-bottom: 6px; background: currentColor;
  -webkit-mask: url(boa-logo.svg) no-repeat left center / contain; mask: url(boa-logo.svg) no-repeat left center / contain; }
.sender { font-family: var(--font-num); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.solo .sender { display: flex; flex-direction: column; align-items: center; }
.solo .boa-mark { -webkit-mask-position: center; mask-position: center; }

.icon { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.main { flex-grow: 1; display: flex; flex-direction: column; min-width: 0; }

.topbar {
  height: var(--header); flex-shrink: 0;
  display: flex; align-items: center; gap: 16px;
  padding: 0 var(--gutter);
  border-bottom: 1px solid var(--line-strong);
  background: #fff;
  position: sticky; top: 0; z-index: 10;
}
.topbar .crumbs { font-size: 14px; color: var(--muted); flex-grow: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.search {
  display: flex; align-items: center; gap: 8px;
  width: 380px; max-width: 40vw; height: 36px; padding: 0 12px;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius);
  color: var(--muted);
}
.search:focus-within { border-color: var(--accent); }
/* specifieker dan de algemene input[type=search]-regel verderop: het veld zelf heeft geen kader */
.search input[type=search] { border: none; outline: none; flex-grow: 1; width: auto; min-width: 0; min-height: 0; padding: 0; font: 14px var(--font-ui); background: transparent; color: var(--ink); }
.kbd { font: 11px var(--font-num); color: var(--muted); border: 1px solid var(--line-strong); border-radius: 4px; padding: 1px 5px; }

.user { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--ink); color: var(--paper);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 500;
}
.user form { margin: 0; }

.content { flex-grow: 1; padding: 28px var(--gutter) 40px; }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.page-head p { margin: 6px 0 0; color: var(--muted); font-size: 14px; }
.actions { display: flex; gap: 8px; }

/* Zonder login: één kaart in het midden, estate-naam erboven */
.solo { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 16px; gap: 20px; }
.solo .estate-name { font: 600 20px/1.2 var(--font-ui); }
.solo .card { width: 100%; max-width: 440px; padding: 28px 32px; }
.solo h1 { font-size: 26px; margin-bottom: 8px; }
.solo .sender { color: var(--muted); }

/* ---------- Onderdelen ---------- */

.card { background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-card); }
.card.pad { padding: 20px; }
.narrow { max-width: 560px; }
.card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 36px; padding: 0 14px;
  border-radius: var(--radius); border: 1px solid var(--control-line);
  background: #fff; color: var(--ink);
  font: 500 14px var(--font-ui); cursor: pointer; text-decoration: none;
}
.btn:hover { background: var(--row-hover); color: var(--ink); text-decoration: none; }
.btn.primary { background: var(--accent-key); border-color: var(--accent-key); color: #fff; }
.btn.primary:hover { background: var(--accent); border-color: var(--accent); }
.btn.quiet { border-color: transparent; background: transparent; color: var(--ink-2); }
.btn.quiet:hover { background: var(--hover); }
.btn.small { min-height: 30px; padding: 0 10px; font-size: 13px; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border: 1px solid var(--line-strong); border-radius: 999px;
  font: 13px var(--font-ui); background: #fff; color: var(--ink-2); cursor: pointer;
}
.chip.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.pill { display: inline-flex; align-items: center; gap: 6px; padding: 1px 0; font-size: 12px; font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.pill::before { content: ''; width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; background: var(--lamp-off); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); }
.pill.work::before    { background: var(--lamp-on); }
.pill.hires::before   { background: var(--lamp-ok); }
.pill.contrib::before { background: var(--layer-contrib); }
.pill.archive::before { background: var(--layer-archive); }
.pill.work    { color: var(--ink); }
.pill.contrib { color: var(--layer-contrib); }
.pill.archive { color: var(--layer-archive); }

table { border-collapse: collapse; width: 100%; }
th { text-align: left; font: 500 12px var(--font-ui); color: var(--muted); padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
/* Kolomkoppen als opschriften; een rijkop (een regel van het Overzicht) blijft gewone tekst */
thead th { font: 600 11px var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); border-bottom-color: var(--line-strong); }
td { padding: 10px 12px; border-bottom: 1px solid var(--line-2); font-size: 14px; vertical-align: middle; }
tbody tr:hover td { background: var(--row-hover); }
td.num, th.num { text-align: right; }

.tabs { display: flex; border-bottom: 1px solid var(--line-strong); margin-bottom: 22px; overflow-x: auto; }
.tabs a { padding: 12px 2px; margin-right: 22px; font-size: 14px; color: var(--muted); border-bottom: 3px solid transparent; white-space: nowrap; }
.tabs a:hover { color: var(--ink); text-decoration: none; }
.tabs a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); font-weight: 500; }
.tabs .count { font: 12px var(--font-num); color: var(--muted); margin-left: 4px; }

dl.fields { display: grid; grid-template-columns: 180px 1fr; gap: 10px 16px; margin: 0; font-size: 14px; }
dl.fields dt { color: var(--muted); font-size: 12px; letter-spacing: .05em; text-transform: uppercase; padding-top: 2px; }
dl.fields dd { margin: 0; }
.empty { color: var(--muted); }

/* Contextbalk boven een fiche die vanuit een lijst geopend werd */
.context-bar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 10px 14px; margin: -8px 0 20px;
  background: var(--accent-soft); border: 1px solid var(--accent-soft-line); border-radius: var(--radius);
  font-size: 14px;
}

.signal { border-color: var(--alert-line); background: var(--alert-soft); color: var(--alert); }
.unknown { color: var(--alert); }

/* Formulieren */
.field { margin-bottom: 16px; }
.field label, label.field-label { display: block; font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 6px; }
input[type=text], input[type=email], input[type=password], input[type=search], input[type=number], input[type=url], select, textarea {
  font: 14px var(--font-ui); color: var(--ink);
  width: 100%; min-height: 38px; padding: 7px 10px;
  background: var(--surface); border: 1px solid var(--control-line); border-radius: var(--radius);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
.check { display: flex; align-items: center; gap: 8px; font-size: 14px; margin: 4px 0 16px; }
/* Uitleg onder een los vinkje in een formulier, zoals Selling exhibition */
.check:has(+ .check-hint) { margin-bottom: 2px; }
.hint.check-hint { margin: 0 0 16px 24px; }
.form-actions { display: flex; gap: 8px; margin-top: 20px; }

.notice { padding: 10px 14px; border-radius: var(--radius); font-size: 14px; margin-bottom: 16px; }
/* Een tekst van een bron (een museum, een publicatie): bij de hand om uit te citeren, niet overgenomen */
.source-text { margin: 8px 0 12px; padding: 4px 0 4px 14px; border-left: 3px solid var(--line); font-size: 14px; line-height: 1.55; }
.notice.error { background: var(--alert-soft); border: 1px solid var(--alert-line); color: var(--alert); }
.notice.info  { background: var(--accent-soft); border: 1px solid var(--accent-soft-line); color: var(--accent-hover); }
.notice.warning { background: var(--alert-soft); border: 1px solid var(--alert-line); color: var(--ink); }

.codes { font: 16px/1.9 var(--font-num); columns: 2; padding-left: 1.6em; margin: 16px 0; }
.qr { display: block; width: 200px; height: 200px; margin: 12px 0; image-rendering: pixelated; }

/* ---------- Lijsten ---------- */

.grow { flex-grow: 1; }
.small-link { font-size: 13px; cursor: pointer; color: var(--accent); }
.list-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.list-search { width: 280px; }
.select-chip select {
  appearance: none; -webkit-appearance: none;
  min-height: 0; width: auto; padding: 4px 26px 4px 10px;
  border: 1px solid var(--line-strong); border-radius: 999px;
  font: 13px var(--font-ui); color: var(--ink-2); cursor: pointer;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236b665c' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 10px center;
}
.select-chip.on select { background-color: var(--ink); border-color: var(--ink); color: var(--paper); }

.list-views { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.list-views a.chip { text-decoration: none; }
.view-chip { display: inline-flex; align-items: center; }
.view-chip form { margin: 0; }
.chip-x { border: none; background: none; color: var(--muted); cursor: pointer; font-size: 16px; padding: 0 4px; line-height: 1; }
.chip-x:hover { color: var(--alert); }
.chip-star:hover, .chip-star.on { color: var(--accent); }

.popover { position: relative; }
.popover summary { list-style: none; }
.popover summary::-webkit-details-marker { display: none; }
.popover .pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; width: 280px; padding: 14px 16px; box-shadow: 0 8px 24px rgba(29, 28, 26, .12); }
.popover.right .pop { left: auto; right: 0; }
.popover .check { margin: 4px 0; }
.more-filters .pop { display: flex; flex-direction: column; gap: 8px; width: 320px; }
.more-filters .select-chip select { width: 100%; max-width: 100%; text-overflow: ellipsis; }

.list { overflow-x: auto; }
.list th a { color: var(--muted); }
.list th a:hover { color: var(--ink); text-decoration: none; }
.list th[aria-sort] a { color: var(--ink); }
.pager { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; font-size: 13px; color: var(--muted); flex-wrap: wrap; }
.pager .actions { align-items: center; }

.context-quiet { display: flex; align-items: center; gap: 8px; margin: -12px 0 12px; font-size: 14px; }
.topbar .crumbs a { color: var(--muted); }
.topbar .crumbs a:hover { color: var(--ink); }
.record-head { margin-bottom: 18px; }
.record-head h1 { margin-top: 4px; }
/* De kunstenaar boven de titel, in een collectie-estate (Gert, 1/10) */
.record-artist { margin: 6px 0 0; font-size: 17px; font-weight: 500; color: var(--ink); }
.record-artist a { color: inherit; }
.record-artist .m { font-size: 14px; font-weight: 400; }
.record-artist + h1 { margin-top: 2px; }
/* Hoofdbeeld van een werk in de kop, en miniaturen in lijsten (stap 3.6, eerste deel) */
.record-image { margin: 0 0 0 auto; max-width: 280px; }
.record-image img { display: block; max-width: 100%; max-height: 220px; width: auto; height: auto; border-radius: var(--radius); background: var(--paper-2); }
.record-image figcaption { margin-top: 6px; }
.thumb-cell { width: 72px; padding-top: 6px; padding-bottom: 6px; }
img.thumb { display: block; max-width: 64px; max-height: 56px; width: auto; height: auto; border-radius: 3px; background: var(--paper-2); }
/* Geen hoofdbeeld: het eerste andere beeld, gestippeld (Gert 19/10, de boekscans van CVB) */
img.thumb.no-main, .record-image.no-main img { outline: 1px dashed var(--muted); outline-offset: 2px; }
@media (max-width: 700px) { .record-image { max-width: 100%; margin: 12px 0 0; } }

/* Tabblad Beelden (stap 3.6): een raster van kaarten, het beeld bovenaan, de gegevens en acties eronder */
.images-group + .images-group { margin-top: 24px; }
.images-group h2 { margin: 0 0 10px; }
.image-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; align-items: start; }
.image-card { margin: 0; padding: 12px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.image-frame { display: flex; align-items: center; justify-content: center; height: 200px; background: var(--paper-2); border-radius: var(--radius); overflow: hidden; }
.image-frame img { display: block; max-width: 100%; max-height: 200px; width: auto; height: auto; }
.image-elsewhere { text-align: center; padding: 12px; font-size: 14px; }
.image-card figcaption { display: flex; flex-direction: column; gap: 3px; min-width: 0; overflow-wrap: anywhere; }
.image-card figcaption p { margin: 0; }
.image-badges { display: flex; flex-wrap: wrap; gap: 4px; }
.image-badges:empty { display: none; }
.image-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; border-top: 1px solid var(--line-2); padding-top: 8px; }
.image-actions details.inline-edit[open] { flex-basis: 100%; }
/* Een open formulier krijgt de hele breedte: de kaart neemt dan de hele rij in */
.image-card:has(details.inline-edit[open]) { grid-column: 1 / -1; }
.image-card:has(details.inline-edit[open]) .image-frame { max-width: 360px; }
.image-card details.inline-edit[open] > form { max-width: 640px; }
.image-card fieldset > label.lbl { display: block; margin-top: 10px; }

/* Eén beeld met de personen erop: het beeld links, de lijst rechts; kaders als fracties van het beeld */
.image-page { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 20px; align-items: start; }
.image-stage { position: relative; display: inline-block; max-width: 100%; line-height: 0; user-select: none; touch-action: none; }
.image-stage[data-box-draw] { cursor: crosshair; }
.image-stage img { display: block; max-width: 100%; max-height: 78vh; width: auto; height: auto; border-radius: var(--radius); }
.person-box { position: absolute; border: 2px solid var(--accent); box-shadow: 0 0 0 1px rgba(255, 255, 255, .8); border-radius: 3px; pointer-events: none; }
.person-box.proposed { border-style: dashed; }
.person-box.draft { border-color: #e0b400; }
.person-box span { position: absolute; top: -18px; left: -2px; padding: 0 5px; font: 11px/16px var(--font-num); background: var(--accent); color: #fff; border-radius: 3px; }
.persons { list-style: none; margin: 0 0 16px; padding: 0; }
.persons li { padding: 8px 0; border-bottom: 1px solid var(--line-2); }
.person-n { display: inline-block; min-width: 22px; padding: 0 5px; margin-right: 6px; text-align: center; font-size: 11px; background: var(--accent); color: #fff; border-radius: 3px; }
.person-actions { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; }
.person-add { border-top: 1px solid var(--line); padding-top: 12px; }
@media (max-width: 900px) { .image-page { grid-template-columns: 1fr; } }

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.tile { color: var(--ink); display: flex; flex-direction: column; gap: 8px; }
.tile:hover { border-color: var(--accent-soft-line); text-decoration: none; color: var(--ink); }
.tile p { margin: 0; font-size: 14px; }

.record-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.record-head .actions form { margin: 0; }
.form-grid { max-width: 720px; }
.hint { font-size: 12px; color: var(--muted); margin: 4px 0 0; }
.field-error { font-size: 13px; color: var(--alert); margin: 4px 0 0; }
fieldset.field { border: none; padding: 0; margin: 0 0 16px; }
.field-label { font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 6px; display: block; }
.aat-field input[type=search] { margin-top: 8px; }
.aat-results { list-style: none; padding: 0; margin: 8px 0 0; max-height: 320px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.aat-results li { padding: 8px 10px; border-bottom: 1px solid var(--line-2); font-size: 14px; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.aat-results li:last-child { border-bottom: none; }

.field-row { display: flex; gap: 12px; flex-wrap: wrap; }
.field-row .field { flex: 1 1 180px; }
.field-row .field.short { flex: 0 1 120px; }
.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0 16px; }
.checks .check { margin: 4px 0; }
.pick-results { list-style: none; padding: 0; margin: 8px 0 0; border: 1px solid var(--line); border-radius: var(--radius); max-height: 280px; overflow-y: auto; }
.pick-results li { border-bottom: 1px solid var(--line-2); font-size: 14px; }
.pick-option { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; width: 100%; padding: 8px 10px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.pick-option:hover, .pick-option:focus-visible { background: var(--line-2); }
.pick-results li:last-child { border-bottom: none; }
.picked { margin: 0 0 6px; font-weight: 500; }
.picked::before { content: '✓ '; color: var(--accent); }
.picked:empty { display: none; }
.add-form { margin-top: 16px; }
.add-form h2 { margin-bottom: 12px; }
.pad-inline { padding: 16px 20px; margin: 0; }
.kbo-candidate { margin-top: 12px; }
.kbo-candidate h3 { font-size: 15px; margin-bottom: 8px; }
.kbo-candidate th { width: 140px; }

/* ---------- Smalle schermen ---------- */

@media (max-width: 900px) {
  :root { --gutter: 16px; }
  .shell { flex-direction: column; }
  .sidebar {
    width: auto; height: auto; position: static;
    flex-direction: row; align-items: center; gap: 4px;
    padding: 8px 12px; border-right: none; border-bottom: 1px solid var(--line);
    overflow-x: auto;
  }
  .sidebar .estate { padding: 0 8px 0 0; }
  .sidebar .estate .lbl, .sidebar .sender, .sidebar .spacer { display: none; }
  .sidebar nav { flex-direction: row; }
  .sidebar nav a span { white-space: nowrap; }
  .topbar { height: auto; padding: 10px var(--gutter); flex-wrap: wrap; position: static; }
  .topbar .crumbs { flex-basis: 100%; }
  .search { width: auto; max-width: none; flex: 1 1 0; min-width: 0; }
  .kbd { display: none; }
  .user .name { display: none; }
  dl.fields { grid-template-columns: 1fr; gap: 2px 0; }
  dl.fields dd { margin-bottom: 10px; }
  .codes { columns: 1; }
  .list-search { flex: 1 1 100%; width: 100%; }
  .popover .pop { position: fixed; left: 16px; right: 16px; top: auto; width: auto; }
}

/* Werken */
.pill.alert { color: var(--alert); }
.pill.alert::before { background: var(--alert); }
.checks.scroll { max-height: 260px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 10px; }
.tab-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 12px; }
.tab-head h2 { margin: 0; }
.search-section { margin-bottom: 32px; }
.search-group { margin-bottom: 18px; }
.search-group .tab-head { margin-bottom: 8px; }
.search-section > h2, .search-section > .tab-head h2 { font-size: 20px; margin: 0 0 14px; }
.search-group h3 { margin: 0; font-size: 15px; }
/* Dezelfde kolombreedtes in elke groep, zodat de titels onder elkaar staan */
.search-group table { table-layout: fixed; width: 100%; }
.search-group col.c-key { width: 140px; }
.search-group col.c-cr { width: 110px; }
.search-group col.c-date { width: 110px; }
@media (max-width: 640px) { .search-group col.c-cr { width: 72px; } .search-group col.c-key { width: 112px; } .search-group col.c-date { width: 64px; } }
.subsection { margin-top: 24px; }
.subsection > h2 { margin-bottom: 8px; }
.lang-tag { font-family: var(--font-num); font-size: 11px; text-transform: uppercase; color: var(--muted); margin-right: 6px; }
details.add-form > summary { cursor: pointer; font-weight: 500; }
details.inline-edit { display: inline; }
form.inline { display: inline; }
.citation { margin: 0 0 16px; line-height: 1.5; }
/* Titel en ondertitel van een publicatie: overal dezelfde vorm; in een lijst hoogstens twee regels */
.subtitle { display: block; font-family: var(--font-title); font-style: italic; color: var(--muted); font-size: 0.92em; line-height: 1.35; margin-top: 2px; }
.subtitle.clamp { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.subtitle.lead { font-size: 1.15rem; margin: 2px 0 0; }
.citation em { font-family: var(--font-title, inherit); }
details.inline-edit > summary { display: inline-flex; list-style: none; cursor: pointer; }
details.inline-edit > summary::-webkit-details-marker { display: none; }
details.inline-edit[open] { display: block; margin: 8px 0 12px; }
/* Een open formulier in een tabelcel (een maat of een relatie aanpassen): links uitgelijnd en met ruimte, niet in de
   smalle, rechts uitgelijnde kolom van de knoppen geperst */
td:has(> details.inline-edit[open]) { white-space: normal; text-align: left; min-width: min(34rem, 60vw); }
details.add-form[open] > summary { margin-bottom: 12px; }
.fields dd form { display: inline; margin-left: 6px; }
td.nowrap { white-space: nowrap; }
/* Import */
.actions.wrap { flex-wrap: wrap; }
.actions form { display: inline; }
ul.plain { list-style: none; padding: 0; margin: 0; }
.pad-inline.actions { padding-top: 12px; padding-bottom: 12px; }
.btn[disabled], .btn:disabled { opacity: .45; cursor: not-allowed; }
/* Herkomst: de keten als tijdlijn, oudste eerst; de huidige eigenaar gemarkeerd */
.chain { list-style: none; margin: 8px 0 0; padding: 0; border-left: 2px solid var(--line-2); }
.chain > li { display: grid; grid-template-columns: 120px 1fr auto; gap: 12px; padding: 10px 0 10px 16px; position: relative; border-bottom: 1px solid var(--line-2); }
.chain > li:last-child { border-bottom: 0; }
.chain > li::before { content: ''; position: absolute; left: -6px; top: 16px; width: 10px; height: 10px; border-radius: 50%; background: var(--lamp-off); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); }
.chain > li.current::before { background: var(--lamp-on); }
.chain-body p { margin: 0 0 2px; }
.chain-actions { align-self: start; flex-wrap: wrap; }
@media (max-width: 640px) { .chain > li { grid-template-columns: 1fr; gap: 4px; } }
.whereabouts { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 8px 0 0; }
.whereabouts dt { color: var(--muted); }
.whereabouts dd { margin: 0; }

/* Verwijderen: onderaan het overzicht, apart en stil (Gert, 30/09) */
.record-footer { margin-top: 40px; padding-top: 12px; border-top: 1px solid var(--line-2); display: flex; justify-content: flex-end; }
.btn.danger { color: var(--alert); }
.btn.danger:hover { background: var(--alert-soft); }

/* Het register van een collectie (stap 3.5b): index links, fiche rechts; de laag draagt haar kleur (--layer-*) */
.register-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 40px; flex-wrap: wrap; margin-bottom: 18px; }
.register-head h1 { margin: 0 0 4px; }
.register-head p { margin: 0; max-width: 62ch; }
.register-figures { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0; }
.register-figures > div { display: flex; flex-direction: column-reverse; }
.register-figures dd { margin: 0; font-size: 20px; font-weight: 500; line-height: 1.1; color: var(--ink); }
.register-figures dt { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.register-figures .layer-work dd { color: var(--layer-work); }
.register-figures .layer-contrib dd { color: var(--layer-contrib); }
.register-figures .layer-archive dd { color: var(--layer-archive); }
.register { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 20px; align-items: start; }
.register-index, .register-detail { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); }
.register-index { position: sticky; top: 16px; display: flex; flex-direction: column; max-height: calc(100vh - 32px); overflow: hidden; }
.register-tabs { display: flex; border-bottom: 1px solid var(--line); }
.register-tabs a { flex: 1; text-align: center; padding: 10px 8px 9px; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.register-tabs a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); font-weight: 600; }
.register-search { padding: 8px 12px; border-bottom: 1px solid var(--line-2); }
.register-search input { width: 100%; }
.register-list { overflow-y: auto; flex: 1; min-height: 0; }
.register-row { display: flex; align-items: baseline; gap: 8px; padding: 6px 12px; border-bottom: 1px solid var(--line-2); color: var(--ink-2); text-decoration: none; font-size: 13px; }
.register-row:hover { background: var(--row-hover); }
.register-row[aria-current="true"] { background: var(--hover); color: var(--ink); }
.register-row .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.register-row .ct { font-size: 11px; color: var(--muted); }
.register-detail { min-height: 50vh; }
.register-detail-head { padding: 18px 24px 14px; border-bottom: 1px solid var(--line); }
.register-detail-head h2 { margin: 0 0 4px; font: 600 22px/1.2 var(--font-ui); }
.register-detail-head h2 .m { font-size: 14px; font-weight: 400; }
.register-detail-head .lbl { margin: 0; }
.register-legend, .register-artists { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.register-artists { padding: 12px 24px 14px; margin: 0; border-bottom: 1px solid var(--line-2); }
.register-artists a.pill { text-decoration: none; }
.register-artists a.pill:hover { background: var(--hover); color: var(--ink); }
.register-layer { border-bottom: 1px solid var(--line-2); padding-bottom: 6px; }
.register-layer:last-child { border-bottom: 0; }
.register-layer h3 { display: flex; align-items: baseline; gap: 10px; margin: 0; padding: 14px 24px 0; font-size: 12px; letter-spacing: .09em; text-transform: uppercase; }
.register-layer h3::before { content: ""; width: 3px; align-self: stretch; }
.register-layer .hint { padding: 2px 24px 6px 37px; margin: 0; }
.layer-work h3 { color: var(--layer-work); }       .layer-work h3::before { background: var(--layer-work); }
.layer-contrib h3 { color: var(--layer-contrib); } .layer-contrib h3::before { background: var(--layer-contrib); }
.layer-archive h3 { color: var(--layer-archive); } .layer-archive h3::before { background: var(--layer-archive); }
.register-items { list-style: none; margin: 0; padding: 0; }
.register-items > li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 0 14px; padding: 7px 24px; border-top: 1px solid var(--line-2); }
.register-items > li:hover { background: var(--row-hover); }
.register-items .yr { font-size: 12px; color: var(--muted); padding-top: 2px; }
.register-items a.t { font-family: var(--font-title); font-style: italic; font-size: 15px; line-height: 1.35; color: var(--ink); text-decoration: none; }
.register-items a.t:hover { text-decoration: underline; }
.register-line, .register-by { margin: 1px 0 0; font-size: 12px; color: var(--muted); }
.register-by { margin: 0 0 1px; font-weight: 600; color: var(--ink-2); }
.register-line cite { font-family: var(--font-title); font-style: italic; font-size: 13px; color: var(--ink-2); }
.register-tags { display: flex; flex-wrap: wrap; gap: 5px; align-items: baseline; margin: 4px 0 0; }
.register-tags:empty { display: none; }
.register-intro { padding: 24px; max-width: 64ch; }
.register-intro dl { margin: 12px 0; }
.register-intro dl > div { display: grid; grid-template-columns: 170px 1fr; gap: 12px; padding: 6px 0; }
.register-intro dd { margin: 0; }
@media (max-width: 900px) {
  .register { grid-template-columns: 1fr; }
  .register-index { position: static; max-height: none; }
  .register-list { max-height: 340px; }
}

/* Beheer › Gebruikers (3.8b) */
.access-link { border-color: var(--accent-soft-line); background: var(--accent-soft); margin-bottom: 16px; }
.access-link h2 { margin-top: 0; }
.copy-row { display: flex; gap: 8px; margin: 12px 0 8px; }
.copy-row input { flex: 1; min-width: 0; }
.user-actions { margin-top: 16px; }
.user-actions h2 { margin-top: 0; }
.user-action { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line-2); }
.user-action h3 { font-size: 14px; font-weight: 600; margin: 0 0 4px; }
.user-action p { margin: 0; font-size: 14px; }
.user-action form { flex-shrink: 0; }
.users-history { margin: 24px 0 8px; }
table.rights th .lbl { display: block; font-weight: 400; }
table.rights tr.group th { padding-top: 16px; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
@media (max-width: 640px) { .user-action { flex-direction: column; } .copy-row { flex-direction: column; } }
table.rights tbody th[scope="row"] { font-size: 14px; font-weight: 500; color: var(--ink); text-transform: none; letter-spacing: 0; }
table.rights td { white-space: nowrap; }
table.rights thead th { white-space: normal; }
/* Groepen (stap 3.8c): rijen aanvinken in een lijst, en de actie erboven */
th.tick, td.tick { width: 36px; padding-right: 0; }
th.tick input, td.tick input { margin: 0; vertical-align: middle; }
td.tick + td label, td.tick + td + td label { cursor: pointer; }
.list-actions { display: flex; gap: 8px; align-items: center; margin: 0 0 10px; }
.group-about { margin-bottom: 18px; }
.group-about p { margin: 0 0 8px; }
.group-about p:last-child { margin-bottom: 0; }
#group-candidates .card.list { max-height: 420px; overflow-y: auto; }
/* Documenten (stap 3.6b): de bestanden van een document */
.document-files { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 10px; }
.document-files li { display: flex; gap: 12px; align-items: center; }
.document-files img { width: 64px; height: 64px; object-fit: cover; border: 1px solid var(--line); border-radius: var(--radius); display: block; }
.document-files .file-icon { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: var(--radius);
  font: 600 12px var(--font-num); color: var(--muted); text-decoration: none; }
.document-files li > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.link-row { border-bottom: 1px solid var(--line-2); padding-bottom: 10px; margin-bottom: 10px; }
.link-row:last-child { border-bottom: none; margin-bottom: 0; }
/* Eén blok per taal (beschrijving en medium) */
details.lang-block { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; }
details.lang-block > summary { cursor: pointer; font-weight: 500; display: flex; gap: 8px; align-items: baseline; }
details.lang-block[open] > summary { margin-bottom: 8px; }
.field-row[hidden] { display: none; }
/* Eén taal tegelijk in de leesweergave */
.lang-switch { display: inline-flex; gap: 4px; margin-left: auto; margin-right: 8px; }
.lang-switch .btn { font-family: var(--font-num); min-width: 2.6em; justify-content: center; }
.lang-switch .btn.current { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-soft-line); }
/* Archieffoto's als strook miniaturen (werk, tentoonstelling) */
.photo-strip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.photo-strip a { display: flex; flex-direction: column; gap: 4px; text-decoration: none; }
.photo-strip img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; background: var(--line-2); }
.photo-strip .photo-missing { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; border-radius: 6px; background: var(--line-2); color: var(--muted); font-size: 12px; }
/* Een archieffoto groot bovenaan de fiche van het document */

/* Overzicht (stap 3.8): de stand in één oogopslag en wat nog ontbreekt, met een balkje per regel */
.glance { margin-top: 6px; }
.completeness { width: 100%; border-collapse: collapse; margin-top: 8px; }
.completeness th, .completeness td { padding: 6px 8px 6px 0; border-top: 1px solid var(--line); text-align: left; font-weight: normal; vertical-align: middle; }
.completeness td.num { width: 7ch; text-align: right; padding-right: 16px; }
.completeness td.bar { width: 40%; }
.completeness td.bar span { display: block; height: 6px; background: var(--alert); opacity: .8; }
.completeness tr.done th { color: var(--muted); }
.card.later { border-style: dashed; background: transparent; }
ul.plain.later { margin-top: 10px; }
/* De regels van het Overzicht: zoals de tabel met wat ontbreekt, één regel per signaal of lijst */
ul.rows li { padding: 6px 0; border-top: 1px solid var(--line); font-size: 14px; }
ul.rows li .lbl { margin-left: 6px; }
.completeness { font-size: 14px; }

/* Nagekeken, geen (migratie 0036): onder een leeg onderdeel van een werk */
.checked-none { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 0; }
.checked-none p { margin: 0; }
.card.list .checked-none { padding: 0 16px 12px; }

/* De biografie van een actor (Gert, 12/10): jaar links, gebeurtenis rechts */
ol.biography { list-style: none; margin: 8px 0 0; padding: 0; }
ol.biography > li { display: grid; grid-template-columns: 9ch 1fr; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); }
ol.biography .bio-body p { margin: 0 0 4px; }
@media (max-width: 700px) { ol.biography > li { grid-template-columns: 1fr; gap: 2px; } }

/* Leveringen nakijken (importmodule 7b, stap 3c) */
.delivery-funnel p { margin: 0 0 6px; }
.bulk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 16px 0 8px; }
.tag { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-2); white-space: nowrap; }
.tag.conf-certain { background: var(--accent-soft); border-color: var(--accent-soft-line); color: var(--accent); }
.tag.conf-likely { background: var(--layer-work-bg); border-color: var(--layer-work-bg); color: var(--layer-work); }
.tag.conf-artist_only { background: var(--layer-contrib-bg); border-color: var(--layer-contrib-bg); color: var(--layer-contrib); }
.tag.web-failed, .tag.web-suspicious { background: var(--alert-soft); border-color: var(--alert-line); color: var(--alert); }
.tag.web-too_small { background: var(--layer-archive-bg); border-color: var(--layer-archive-bg); color: var(--layer-archive); }
.capture { display: grid; grid-template-columns: minmax(0, 3fr) minmax(320px, 2fr); gap: 24px; align-items: start; }
.capture-image { margin: 0 0 12px; }
.capture-image img { display: block; max-width: 100%; max-height: 72vh; width: auto; height: auto; border-radius: var(--radius); background: var(--paper-2); }
.capture-files { font-size: 13px; margin: 8px 0 16px; }
.capture-files td, .capture-files th { padding: 4px 8px 4px 0; text-align: left; vertical-align: top; }
.capture-files .num { text-align: right; }
.capture-panel { display: grid; gap: 12px; }
.capture-panel .card { margin: 0; }
.work-card { display: flex; gap: 10px; align-items: flex-start; margin: 8px 0; }
.work-card .t { display: block; }
.decide-main, .decide-other { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.decide-other .not-work { display: inline-flex; gap: 6px; }
.decide .btn { white-space: nowrap; }
.decide kbd { font: 11px var(--font-num); padding: 0 4px; border: 1px solid var(--line-strong); border-radius: 3px; opacity: .7; }
.candidate { border-top: 1px solid var(--line-2); padding-top: 8px; margin-top: 8px; }
.web-checks { margin-bottom: 12px; }
.photographers { margin: 12px 0; }
.chosen-work:not(:empty) { font-weight: 600; color: var(--accent); }
.chosen-work:not(:empty)::before { content: '→ '; }
.photographer-table { font-size: 14px; margin-top: 8px; }
.photographer-table td, .photographer-table th { padding: 6px 12px 6px 0; text-align: left; vertical-align: top; }
.photographer-table .num { text-align: right; }
@media (max-width: 900px) { .capture { grid-template-columns: 1fr; } }

/* De afdrukversie van een lijst (Gert, 21/10, zoals de lijsten van v1): sober, zonder zijbalk; op papier zwart op wit,
   de miniaturen op afdrukmaat, de kolomkoppen op elke pagina */
.print-page { background: #fff; padding: 24px 32px; }
.print-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.print-head h1 { font-size: 22px; margin: 2px 0 4px; }
.print-head p { margin: 0 0 2px; }
.print-selection { font-size: 13px; }
.print-page th, .print-page td { padding: 6px 8px; vertical-align: top; }
.print-page td { font-size: 12px; }
.print-page thead th { border-bottom: 1px solid var(--ink); }
.print-page td { border-bottom: 1px solid var(--line); }
.print-page a { color: inherit; }
/* Knoppen op een rij (Edit, Register loan) zijn handelingen, geen gegevens: niet op papier. De knop Print bovenaan blijft */
.print-page td .btn { display: none; }
/* Bladeren onder een lijst (docs/13 punt 6): paginanummers, naar een pagina springen, rijen per pagina */
.pager .pages { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pager .pages strong { color: var(--ink); }
.page-jump { display: flex; align-items: center; gap: 6px; }
.page-jump input[type=number] { width: 56px; min-height: 0; padding: 2px 6px; font-size: 13px; }
.per-page { display: inline-flex; gap: 8px; align-items: center; }
/* De werkfiche (Gert 22/10): Summary op het scherm, en de afdruk met een fiche per blad */
.summary-actions { display: flex; gap: 8px; justify-content: flex-end; margin: 0 0 12px; }
.summary-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .summary-grid { grid-template-columns: 1fr; } }
.summary-list { list-style: none; margin: 0; padding: 0; }
.summary-list > li { display: grid; grid-template-columns: 120px 1fr; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line-2); }
.summary-list > li .lbl { display: block; }
/* De volledige verwijzing in de samenvatting en de afdrukfiche (zoals op de fiche van de publicatie), zonder de marge van de fiche */
.summary-list > li > .citation { margin: 0; }
.fiche + .fiche { break-before: page; margin-top: 48px; }
.fiche-head { display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); padding-bottom: 6px; margin-bottom: 18px; }
.fiche-top { width: 100%; border-collapse: collapse; }
.fiche-top td { vertical-align: top; border: none; padding: 0 24px 0 0; }
.fiche-image { width: 42%; }
.fiche-image img { max-width: 100%; max-height: 420px; }
.fiche-artist { margin: 0 0 4px; font-weight: 500; }
.fiche h1 { font-size: 26px; margin: 0 0 4px; }
.fiche h2 { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; margin: 22px 0 6px; }
.fiche-list { width: 100%; border-collapse: collapse; }
.fiche-list td:first-child { width: 120px; white-space: nowrap; }
.fiche-list .lbl { display: block; }
.fiche-foot { margin-top: 24px; border-top: 1px solid var(--line); padding-top: 6px; }
/* Het totaal onder een geldkolom (Column::$total) */
.print-page tfoot td { border-top: 1px solid var(--ink); border-bottom: none; font-weight: 600; }
.print-page .thumb-cell { width: 132px; }
.print-page img.thumb { max-width: 120px; max-height: 120px; }
.print-page tbody tr:hover td { background: none; }
.print-foot { margin-top: 16px; color: var(--muted); }
@media print {
  @page { margin: 12mm; }
  .no-print { display: none !important; }
  .print-page { padding: 0; }
  .print-page thead { display: table-header-group; }
  .print-page tr { break-inside: avoid; }
}