/* CORE Protective Security Assessment — het veldwerkscherm van een ring.
 *
 * Een eigen bestand, net als core-orientation.css, en om dezelfde reden: dit
 * scherm heeft andere maten nodig dan de rest van het platform. Buiten, met
 * handschoenen aan, op een tablet in de zon.
 *
 * DRIE MATEN DIE ER TOE DOEN:
 *   44px   de kleinste hoogte van iets wat je aanraakt. Onder die maat mis je
 *          hem staand, met één hand, in beweging.
 *   16px   de kleinste tekstmaat op een invoerveld. iOS zoomt onder die maat
 *          automatisch in, en dan staat het formulier scheef.
 *   1.5    regelhoogte op de antwoordknoppen, want een antwoordlabel loopt
 *          hier regelmatig over twee regels.
 *
 * HET PALET STAAT IN app.css EN WORDT HIER ALLEEN GEBRUIKT. `--accent` is de
 * CORE-kleur (brons/goud) en draagt op dit scherm precies één betekenis: HIER
 * BEN JE. De huidige sectie, het huidige blok, de primaire actie. Hij is nooit
 * een oordeel, nooit een risicokleur en nooit de enige drager van een keuze —
 * elke gekozen of afgeronde stand heeft daarnaast een vorm of een teken, want
 * kleur is het eerste dat wegvalt in fel licht en bij kleurenblindheid.
 */

/* ============================================================== de indeling
 *
 * Links het werk, rechts de navigator. Rechts en niet links, want links staat
 * de hoofdnavigatie van het platform al.
 */

.psa-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 264px;
  gap: 22px;
  align-items: start;
}

.psa-field-main { min-width: 0; }

/* ============================================================ de kop
 *
 * Eén kaart: waar ben ik, bij welk object, hoever ben ik, welke kant is wit.
 * De voortgang stond hier als aparte kaart onder en kostte een derde van het
 * beeld voordat de eerste vraag begon.
 */

.psa-fieldhead { display: flex; align-items: flex-start; gap: 18px; }
.psa-fieldhead-text { flex: 1 1 auto; min-width: 0; }
.psa-fieldhead-text h3 { margin: 2px 0 8px; font-size: 19px; }

.psa-fieldhead-where {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.psa-fieldhead-note { margin: 8px 0 0; }

.psa-progress-line { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.psa-progress-count { font-size: 21px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Doorlopen: een rand die het zegt, plus de zin ernaast. Nooit alleen kleur. */
.psa-fieldhead.complete .psa-progress-count { color: var(--ok); }

.psa-orient-mini { width: 92px; flex: 0 0 auto; }

/* ======================================================= de veldnavigator */

.psa-nav {
  position: sticky;
  top: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 12px;
}

/* De uitklapknop bestaat alleen op een smal scherm; hieronder zet de
   mediaquery hem aan. Eén codepad, twee maten. */
.psa-nav-toggle { display: none; }

.psa-nav-head {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.psa-nav-count-line {
  margin: 2px 0 12px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.psa-nav-blocks, .psa-nav-sections { display: flex; flex-direction: column; gap: 3px; }

.psa-nav-block,
.psa-nav-section {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  width: 100%;
  padding: 7px 9px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 13px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.psa-nav-block:hover,
.psa-nav-section:hover { background: var(--surface-2); }

/* HIER BEN JE. De accentkleur, plus een linkerbalk, plus het pijlteken in de
   marge: drie dragers voor één betekenis. */
.psa-nav-block.active,
.psa-nav-section.active {
  border-color: rgba(199, 167, 107, 0.45);
  background: var(--accent-soft);
  box-shadow: inset 3px 0 0 var(--accent);
}

.psa-nav-mark {
  flex: 0 0 auto;
  width: 14px;
  text-align: center;
  font-size: 12px;
  color: var(--muted);
}
.psa-nav-block.done .psa-nav-mark,
.psa-nav-section.done .psa-nav-mark { color: var(--ok); }
.psa-nav-block.current .psa-nav-mark,
.psa-nav-section.current .psa-nav-mark { color: var(--accent); }

.psa-nav-block-body { flex: 1 1 auto; min-width: 0; }
.psa-nav-code { display: block; font-weight: 600; font-size: 12.5px; letter-spacing: 0.03em; }
.psa-nav-label {
  display: block;
  font-size: 12px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.psa-nav-section-label { flex: 1 1 auto; min-width: 0; }

.psa-nav-count {
  flex: 0 0 auto;
  font-size: 11.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.psa-nav-sub {
  margin: 16px 0 6px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.psa-nav-back {
  display: block;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--muted);
  text-decoration: underline;
}

/* ===================================================== vorige en volgende */

.psa-stepnav {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  margin: 0 0 18px;
}

.psa-step {
  flex: 1 1 0;
  min-height: 52px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: inherit;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}
.psa-step:hover { background: var(--surface-2); }
.psa-step[disabled] { opacity: 0.45; cursor: default; }
.psa-step-next { text-align: right; }
.psa-step-empty {
  color: var(--muted);
  font-size: 12.5px;
  justify-content: center;
  cursor: default;
  border-style: dashed;
  background: transparent;
}

.psa-step-kind {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.psa-step-label {
  font-size: 13.5px;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Een stap die de sectiegrens over gaat, is een grotere stap en zegt dat. */
.psa-step-section { border-color: rgba(199, 167, 107, 0.35); }

/* ------------------------------------------------------------ blokhoofd */

.psa-block-head-line { display: flex; align-items: baseline; gap: 12px; }
.psa-block-head h2 { margin: 0 0 6px; font-size: 18px; flex: 1 1 auto; }
.psa-block-count {
  flex: 0 0 auto;
  font-size: 12.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.psa-block-purpose { margin: 0 0 6px; font-size: 14px; line-height: 1.5; }
.psa-block-boundary { margin: 0; font-size: 12.5px; line-height: 1.55; }

/* ---------------------------------------------------------------- vraag */

.psa-q-text { margin: 0 0 6px; font-size: 16px; line-height: 1.45; }

/* Hoeveel plekken er onder deze ene vraag hangen. Verschijnt pas vanaf de
   tweede — een klein object ziet hem nooit. Een telling van waarnemingen,
   nooit van deuren, camera's of ramen. */
.psa-q-places {
  margin: 0 0 12px;
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* Voorbereide context: ONDER het antwoord, ingeklapt, en zichtbaar anders dan
   een antwoord. Geen knop erin — er valt hier niets te bevestigen. */
.psa-q-context {
  margin: 14px 0 0;
  padding-top: 10px;
  border-top: 1px dashed rgba(255, 255, 255, 0.16);
}
.psa-q-context-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 4px 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.psa-q-context-caret { font-size: 9px; color: var(--muted); }
.psa-q-context-item { display: block; font-size: 13px; line-height: 1.5; margin-top: 6px; }
.psa-q-context-label { font-weight: 600; margin-right: 6px; }
.psa-q-context-value { opacity: 0.85; }

/* ------------------------------------------------------------- antwoorden */

.psa-options { display: flex; flex-wrap: wrap; gap: 8px; }

.psa-option-btn {
  min-height: 44px;
  padding: 10px 15px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 14.5px;
  line-height: 1.5;
  text-align: left;
  cursor: pointer;
}

.psa-option-btn:hover { border-color: rgba(255, 255, 255, 0.34); }

/* Gekozen: dikkere rand, accenttint én vet. Drie dragers, want kleur alleen
   mag hier nooit het verschil zijn. */
.psa-option-btn.chosen {
  border-width: 2px;
  border-color: var(--accent);
  background: var(--accent-soft);
  font-weight: 600;
}

/* "Niet vastgesteld" is een volwaardige uitkomst en staat er daarom net zo
   duidelijk bij als de rest — alleen rustiger van rand, zodat hij niet als
   eerste keuze leest. */
.psa-option-btn.unknown { border-style: dashed; }

/* Een gescopeerde optie is een gelockte scoped refinement. Hij ziet er niet
   anders uit dan de rest: het is een gewoon antwoord voor wie hem krijgt. */
.psa-option-btn.scoped { border-color: rgba(255, 255, 255, 0.28); }

.psa-other {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 11px 13px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: transparent;
  color: inherit;
  /* Nooit kleiner: onder 16px zoomt iOS het formulier scheef. */
  font-size: 16px;
}

/* De actiebalk onder een vraag: herkomst boven, vastleggen eronder. Kolom, ook
   op een breed scherm — dit wordt op een tablet met één duim bediend, en twee
   naast elkaar staande raakvlakken zijn daar een vergissing die staat te
   wachten.
   (Deze regel stond in app.css en werd daar door de rijversie hieronder
   overschreven, omdat dit bestand later wordt ingeladen. Nu staat hij op de
   plek waar hij hoort: één regel, en die wint.) */
.psa-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.psa-actions .psa-primary { width: 100%; margin: 0; }
.psa-actions .psa-link-btn { margin: 0; }

.psa-primary {
  min-height: 46px;
  padding: 12px 22px;
  border-radius: 10px;
  border: 1px solid var(--accent);
  background: var(--accent-soft);
  color: inherit;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.psa-primary:hover { background: rgba(199, 167, 107, 0.2); }
.psa-primary[disabled] { opacity: 0.4; cursor: default; border-color: var(--line); }

.psa-link-btn {
  min-height: 44px;
  padding: 8px 2px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 13.5px;
  text-decoration: underline;
  cursor: pointer;
  opacity: 0.85;
}

/* De herkomstschakelaar. Staat naast "Vastleggen" en niet erboven: het is een
   uitzondering en geen tweede vraag. Ongekozen leest hij als een aanbod,
   gekozen draagt hij een vinkje in zijn tekst — een keuze mag hier net zo min
   alleen aan kleur te zien zijn als bij een antwoord. */
.psa-origin-btn {
  min-height: 44px;
  padding: 9px 14px;
  border-radius: 10px;
  border: 1px dashed rgba(255, 255, 255, 0.28);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
  opacity: 0.85;
}
.psa-origin-btn.chosen {
  border-style: solid;
  border-width: 2px;
  border-color: var(--accent);
  font-weight: 600;
  opacity: 1;
}

/* --------------------------------------------------- wat is vastgelegd */

.psa-answer {
  margin-top: 12px;
  padding: 11px 13px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-left: 3px solid var(--ok);
}
.psa-answer.unknown { border-style: dashed; border-left-color: var(--muted); }
.psa-answer-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.psa-answer-where { font-weight: 600; font-size: 13px; }
.psa-answer-value { margin: 7px 0 3px; font-size: 14.5px; line-height: 1.5; }
.psa-answer-meta { font-size: 11.5px; }

/* ------------------------------------------------------ zijde en zone */

.psa-zone {
  margin-top: 12px;
  padding: 12px 13px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.22);
}
.psa-zone-head { display: flex; gap: 14px; align-items: flex-start; }
.psa-zone-head-text { flex: 1 1 auto; min-width: 0; }
.psa-zone-head-text p { margin: 0 0 4px; }
.psa-zone-rule { font-style: italic; }
/* De tekening staat hier omdat dit het enige moment is waarop de conventie
   werkelijk nodig is. Bovenaan het scherm is hij geheugensteun; hier is hij
   gereedschap. */
.psa-zone-figure { width: 92px; flex: 0 0 auto; }
.psa-zone-lede { margin: 0 0 4px; font-size: 14px; line-height: 1.45; }
.psa-zone-note { margin: 10px 0 0; font-size: 12px; line-height: 1.5; }
.psa-zone-sides { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }

/* Zones die in dit assessment al gebruikt zijn. Geen catalogus en geen
   vocabulaire: het zijn de eigen labels van deze inspecteur, terug als knop.
   Op een klein object is deze rij leeg en dus onzichtbaar. */
.psa-zone-recent { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0; }
.psa-zone-recent-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.psa-zone-recent-btn {
  min-height: 36px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px dashed rgba(255, 255, 255, 0.24);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.psa-zone-recent-btn.chosen {
  border-style: solid;
  border-color: var(--accent);
  background: var(--accent-soft);
  font-weight: 600;
}

.psa-zone-side {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.psa-zone-side.chosen {
  border-width: 2px;
  border-color: var(--accent);
  background: var(--accent-soft);
  font-weight: 600;
}

/* De stip draagt de kleur van de zijde uit het oriëntatiemodel; die kleur
   wordt in het scherm gezet en hier bewust niet overschreven. Rood is de
   rechterzijde, en dat is geen stijlkeuze. Een hoek heeft geen eigen kleur en
   krijgt dus ook geen stip — zijn naam draagt de twee kleuren al. */
.psa-zone-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid currentColor;
  flex: 0 0 auto;
}

/* Een verdieping die op verzoek opengaat: één regel, geen vraag en geen
   ja/nee-knop. Nul tikken wanneer je hem niet nodig hebt. */
.psa-optional { padding: 6px 13px; }

/* ================================================= tablet en smal scherm
 *
 * Geen vast paneel dat de inhoud kapotdrukt. Dezelfde navigator wordt één
 * regel — "Ring 4 · 3/6 ▾" — die dezelfde lijst uitklapt. Zelfde gegevens,
 * zelfde klikgedrag, geen tweede codepad.
 */

@media (max-width: 1080px) {
  .psa-field { grid-template-columns: 1fr; }
  /* Boven het werk, want een navigator onderaan de pagina navigeert niets. */
  .psa-nav { order: -1; position: static; padding: 8px 10px; }
  .psa-nav-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    padding: 8px 4px;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
  }
  .psa-nav-caret { color: var(--muted); font-size: 11px; }
  .psa-nav-body { display: none; }
  .psa-nav.open .psa-nav-body { display: block; padding-top: 6px; }
  .psa-nav-head { display: none; }
}

@media (max-width: 760px) {
  .psa-option-btn { flex: 1 1 46%; }
  .psa-orient-mini { display: none; }
  .psa-zone-head { flex-direction: column; }
  .psa-zone-figure { width: 80px; }
  .psa-stepnav { flex-direction: column; }
  .psa-step-next { text-align: left; }
}

/* ============================================== het objectoverzicht
 *
 * Een schets, geen kaart. Rustig, donker, met de vier oriëntatiekleuren als
 * enige kleur die betekenis draagt — en het accent uitsluitend voor de vorm
 * die je op dat moment bewerkt.
 *
 * De maten zijn touch-eerst: dit wordt op een tablet bediend, staand, met één
 * hand. Alle knoppen halen de 44px, ook de pijltjes.
 */

.psa-obj-lede { margin: -6px 0 14px; line-height: 1.6; }

.psa-obj-stage {
  margin-bottom: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 10px;
  overflow: hidden;
}

.psa-obj-canvas { display: block; width: 100%; height: auto; touch-action: manipulation; }
/* Met gereedschap in de hand tikt de inspecteur op het vlak zelf. */
.psa-obj-canvas.drawing { cursor: crosshair; }
.psa-obj-view { padding: 0; border: 0; background: transparent; }
.psa-obj-view svg { display: block; width: 100%; height: auto; border-radius: var(--radius); }

/* Een vorm is aan te tikken, en dat mag je zien. */
.psa-obj-shape { cursor: pointer; }
.psa-obj-frame { pointer-events: none; }

.psa-obj-controls, .psa-obj-tools, .psa-obj-prepare { padding: 16px 18px; }
.psa-obj-row, .psa-obj-toolrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.psa-obj-toolrow + .psa-obj-toolrow {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.psa-obj-spacer { flex: 1 1 auto; }
.psa-obj-modebar { margin-top: 12px; }

/* Het gereedschap. Eén rij knoppen; het actieve stuk draagt het accent én een
   vinkje, want een keuze mag hier net zo min alleen aan kleur te zien zijn als
   bij een antwoord. */
.psa-obj-tool {
  min-height: 44px;
  padding: 10px 15px;
  width: auto;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.psa-obj-tool.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  font-weight: 600;
}
.psa-obj-tool.active::before { content: '✓ '; }

.psa-obj-modes { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.psa-obj-mode {
  min-height: 40px;
  width: auto;
  padding: 8px 14px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

/* Het adres zoeken. Server-side: de browser praat nooit met een geodienst. */
.psa-obj-searchrow { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.psa-obj-search {
  flex: 1 1 320px;
  min-width: 0;
  padding: 11px 13px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: transparent;
  color: inherit;
  /* Nooit kleiner: onder 16px zoomt iOS het formulier scheef. */
  font-size: 16px;
}
.psa-obj-loc { margin: 8px 0 0; }
.psa-obj-saved { margin: 10px 0 0; color: var(--ok); }
.psa-obj-candidates { margin-top: 12px; border-top: 1px solid var(--line); }
.psa-obj-candidate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.psa-obj-candidate:last-of-type { border-bottom: 0; }
.psa-obj-candidate-name { font-size: 14.5px; }

.psa-obj-btn {
  min-height: 44px;
  min-width: 44px;
  padding: 10px 16px;
  width: auto;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.psa-obj-btn:hover { border-color: rgba(255, 255, 255, 0.4); }
.psa-obj-btn[disabled] { opacity: 0.45; cursor: default; }
.psa-obj-primary { border-color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.psa-obj-remove { border-style: dashed; color: var(--muted); }
.psa-obj-link { border: 0; text-decoration: underline; padding-left: 0; }

.psa-obj-orient {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.psa-obj-orient-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.psa-obj-degrees { font-variant-numeric: tabular-nums; font-size: 14px; color: var(--muted); }

.psa-obj-hint { margin: 14px 0 0; line-height: 1.6; }

.psa-obj-selected {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.psa-obj-selected-head {
  margin: 0 0 8px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.psa-obj-label {
  display: block;
  width: 100%;
  max-width: 420px;
  padding: 11px 13px;
  margin-bottom: 12px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: transparent;
  color: inherit;
  /* Nooit kleiner: onder 16px zoomt iOS het formulier scheef. */
  font-size: 16px;
}
.psa-obj-pad { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }

.psa-obj-status { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.psa-obj-status-body { flex: 1 1 320px; min-width: 0; }
.psa-obj-status.confirmed { border-color: var(--line); background: var(--surface-2); }
.psa-obj-status.confirmed .psa-start-eyebrow { color: var(--ok); }

/* De miniatuur op het assessmentscherm. Klein, want het is een verwijzing en
   geen werkvlak. */
.psa-obj-card { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.psa-obj-card-body { flex: 1 1 320px; min-width: 0; }
.psa-obj-card.confirmed { border-color: rgba(199, 167, 107, 0.35); }
.psa-obj-thumb { margin-top: 12px; max-width: 340px; }
.psa-obj-thumb svg { display: block; width: 100%; height: auto; border-radius: 8px; }

@media (max-width: 760px) {
  .psa-obj-thumb { max-width: 100%; }
  .psa-obj-btn { flex: 1 1 auto; }
}