/* Kinnection, bouwstenen: melding en laadtoestand. Prompt 05.
   Een melding zegt wat er net gebeurde, in één zin. Drie soorten: gewoon, gelukt en fout. Sluiten staat in melding.js.
   Gewoon en gelukt krijgen role="status", fout krijgt role="alert" zodat een schermlezer ze meteen voorleest.
   Een fout zegt wat er misging en hoe het wel moet. Ze verontschuldigt zich niet.

   De laadtoestand toont grijze plaatshouders in de vorm van wat komt. Zet aria-busy="true" op het vlak dat laadt. */

/* ===== Melding ===== */
.melding{--op-tint:var(--color-tint);--op-rule:var(--color-rule);--op-focus:var(--color-focus);position:relative;z-index:var(--layer-content);display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:var(--gap-tight);max-width:var(--measure-text);padding:var(--gap-tight) var(--gap-tight) var(--gap-tight) var(--pad-inset);border:var(--stroke-border) solid var(--color-border);border-radius:var(--radius-control);background:var(--color-surface);color:var(--color-text);box-shadow:var(--op-quiet-shadow-sm)}
.melding-teken{display:flex;align-items:center;justify-content:center;width:var(--check-size);height:var(--check-size);margin-top:var(--gap-inline);border-radius:var(--radius-check);background:var(--color-moment);color:var(--color-text-on-moment)}
.melding-tekst{align-self:center;padding-block:var(--gap-inline)}
.melding-tekst b{display:block;font:var(--type-button);color:var(--color-heading)}
.melding-tekst .tekstlink{min-height:0}
.melding .icoonknop{color:var(--color-heading)}
.melding-gelukt .melding-teken,.melding-fout .melding-teken{background:var(--color-accent);color:var(--color-text-on-accent)}
.melding-fout{border-color:var(--color-error);box-shadow:inset 0 0 0 var(--stroke-border) var(--color-error),var(--op-quiet-shadow-sm)}
.melding.komt{animation:melding-in var(--duration-spring) var(--ease-spring)}
.melding.gaat{opacity:0;transform:translateY(calc(var(--gap-inline) * -1));transition:opacity var(--duration-fast) var(--ease-calm),transform var(--duration-fast) var(--ease-calm)}
@keyframes melding-in{from{opacity:0;transform:translateY(var(--gap-tight))}}

/* ===== Laadtoestand =====
   Een plaatshouder ademt traag, zodat je ziet dat er iets komt. Met beweging uit staat hij stil. */
.plaatshouder{display:block;border-radius:var(--radius-check);background:var(--op-placeholder);animation:plaatshouder-adem var(--duration-story) var(--ease-calm) infinite alternate}
.plaatshouder-titel{width:60%;height:1.5em}
.plaatshouder-regel{height:0.9em;margin-top:var(--gap-tight)}
.plaatshouder-regel.kort{width:40%}
.plaatshouder-teken{width:var(--icon-lg);height:var(--icon-lg);margin-bottom:var(--gap-element)}
.plaatshouder-beeld{aspect-ratio:var(--ratio-landscape);border-radius:var(--radius-card)}
.plaatshouder-knop{width:50%;height:var(--control-md);margin-top:var(--gap-element);border-radius:var(--radius-control)}
.kaart .plaatshouder,.prijs .plaatshouder,.terugblik .plaatshouder{--op-placeholder:var(--color-placeholder)}
@keyframes plaatshouder-adem{to{opacity:0.45}}