/* Kaarten in het weekoverzicht en de planning: richting B (kop-band), Figma "VDK Contentplanner · vormgeving",
   pagina Kaarttypes, componentset Kaart B (Soort x Toestand: Rust en Hover). Alleen tokens uit tokens.css, geen losse kleuren.

   Rust: kop-band (symbool plus status in woorden) en titel, bij echte posts ook het format.
   Open (hover, toetsenbordfocus of eerste tik): ook kanalen, aan zet, extra regel, termijn, datum.
   Elementen met klasse "meer" verschijnen alleen open; "alleen-rust" verdwijnt als de kaart openklapt. */

.kaart { container-type: inline-size; position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--kaart-bg, var(--ctx-surface-default)); border: var(--kaart-rand-breedte, var(--space-border-width-default)) var(--kaart-rand-stijl, solid) var(--kaart-rand, var(--ctx-border-default)); border-radius: var(--space-radius-control); cursor: grab; user-select: none; -webkit-user-select: none; }
.kaart[draggable=false] { cursor: pointer; }
.kaart--radar { cursor: default; }
.kaart.is-sleept { opacity: .35; }

/* kleurfamilies: band en rand per soort (Context-variabelen uit Figma) */
.kaart--neutraal { --band-bg: var(--ctx-surface-sunken); --band-fg: var(--ctx-text-muted); }
.kaart--info { --band-bg: var(--ctx-feedback-info-bg); --band-fg: var(--ctx-feedback-info-text); }
/* tekst op de gele band in Text/Default: Feedback/Warning Text haalt maar 4,1 : 1 (norm 4,5 : 1), Text/Default 7,3 : 1 */
.kaart--aandacht { --band-bg: var(--ctx-status-aandacht); --band-fg: var(--ctx-text-default); }
.kaart--succes { --band-bg: var(--ctx-feedback-success-bg); --band-fg: var(--ctx-feedback-success-text); }
.kaart--fout { --band-bg: var(--ctx-feedback-error-bg); --band-fg: var(--ctx-feedback-error-text); }
.kaart--vdk { --band-bg: var(--ctx-inverse-bg); --band-fg: var(--ctx-inverse-text); --kaart-rand: var(--ctx-status-vdk); --kaart-rand-breedte: var(--space-border-width-emphasis); }
.kaart--agenda { --band-bg: var(--ctx-agenda-border); --band-fg: var(--ctx-text-default); --kaart-bg: var(--ctx-agenda-bg); --kaart-rand: var(--ctx-agenda-border); --kaart-rand-stijl: dashed; }
.kaart--radar { --band-bg: var(--ctx-radar-border); --band-fg: var(--ctx-text-default); --kaart-bg: var(--ctx-radar-bg); --kaart-rand: var(--ctx-radar-border); --kaart-rand-stijl: dashed; --kaart-rand-breedte: var(--space-border-width-emphasis); }

.kaart__band { display: flex; align-items: center; gap: var(--space-gap-2xs); padding: var(--space-padding-xs) var(--space-padding-s); background: var(--band-bg); color: var(--band-fg); border-radius: calc(var(--space-radius-control) - var(--kaart-rand-breedte, var(--space-border-width-default))) calc(var(--space-radius-control) - var(--kaart-rand-breedte, var(--space-border-width-default))) 0 0; font-weight: var(--font-weight-strong); font-size: var(--text-caption-m-size); line-height: var(--text-caption-m-line); }
.kaart__symbool { flex: none; display: block; }
.kaart__status { min-width: 0; overflow-wrap: break-word; hyphens: manual; }

.kaart__inhoud { display: flex; flex-direction: column; gap: var(--space-gap-2xs); padding: var(--space-padding-s); }
.kaart__titel { overflow-wrap: break-word; hyphens: auto; hyphenate-limit-chars: 10 4 4; font-weight: var(--font-weight-strong); font-size: var(--text-body-s-size); line-height: var(--text-body-s-line); display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.kaart--fout .kaart__titel { text-decoration: line-through; color: var(--ctx-text-subtle); }
.kaart__meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-gap-2xs); }
.kaart__format, .kaart__tijd, .kaart__wie, .kaart__extra, .kaart__datum, .kaart__bron, .kaart__termijntekst { font-size: var(--text-caption-m-size); line-height: var(--text-caption-m-line); color: var(--ctx-text-subtle); overflow-wrap: break-word; }
.kaart__wie { color: var(--ctx-text-default); }
.kaart__uitleg { font-size: var(--text-caption-m-size); line-height: var(--text-caption-m-line); color: var(--ctx-text-muted); }
.kaart__wacht { display: flex; flex-direction: column; gap: var(--space-gap-2xs); padding-top: var(--space-padding-2xs); }
.kaart__wie-wacht { font-size: var(--text-caption-m-size); line-height: var(--text-caption-m-line); font-weight: var(--font-weight-strong); }

/* termijnbalkje van de bedrijfscheck: 7 streepjes, gevuld tot en met de huidige dag */
.kaart__termijn { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-gap-3xs); height: var(--space-gap-2xs); margin-top: var(--space-gap-3xs); }
.kaart__termijn i { background: var(--ctx-text-disabled); border-radius: var(--space-radius-chip); }
.kaart__termijn i.is-gevuld { background: var(--ctx-status-vdk); }

/* Radar-voorstel: twee symboolknoppen, 44 px, vinkje donker en kruisje omlijnd */
.kaart__keuze { display: flex; gap: var(--space-gap-xs); padding-top: var(--space-padding-2xs); }
.kaart__knopwrap { position: relative; flex: 1; display: flex; }
.kaart__knop { flex: 1; display: inline-flex; align-items: center; justify-content: center; min-height: var(--size-touch-min); padding: 0; border-radius: var(--space-radius-control); border: var(--space-border-width-default) solid transparent; cursor: pointer; }
.kaart__knop--maak { background: var(--ctx-action-primary-bg); color: var(--ctx-action-primary-text); }
.kaart__knop--maak:hover { background: var(--ctx-action-primary-bg-hover); }
.kaart__knop--maak:active { background: var(--ctx-action-primary-bg-pressed); }
.kaart__knop--negeer { background: var(--ctx-action-outline-bg); border-color: var(--ctx-action-outline-border); color: var(--ctx-text-default); }
.kaart__knop--negeer:hover { background: var(--ctx-action-outline-bg-hover); }
.kaart__knop--negeer:active { background: var(--ctx-action-outline-bg-pressed); }
.kaart__tip { position: absolute; left: 50%; bottom: calc(100% + var(--space-gap-xs)); z-index: 60; transform: translate(-50%, 4px); padding: var(--space-padding-2xs) var(--space-padding-s); border-radius: var(--space-radius-control); background: var(--ctx-inverse-bg); color: var(--ctx-inverse-text); font-weight: var(--font-weight-strong); font-size: var(--text-caption-m-size); line-height: var(--text-caption-m-line); width: max-content; max-width: 90cqw; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--duur-kort) var(--ease), transform var(--duur-kort) var(--ease), visibility 0s linear var(--duur-kort); }
/* tooltip binnen de kaart houden: de dagkolom knipt af */
.kaart__knopwrap:first-child .kaart__tip { left: 0; transform: translate(0, 4px); }
.kaart__knopwrap:last-child .kaart__tip { left: auto; right: 0; transform: translate(0, 4px); }
.kaart__knopwrap:hover .kaart__tip, .kaart__knop:focus-visible + .kaart__tip { opacity: 1; visibility: visible; transform: translate(0, 0); transition-delay: .12s, .12s, 0s; }
.kaart__knopwrap.is-weg .kaart__tip { opacity: 0 !important; visibility: hidden !important; }

/* smalle kaart (klein scherm, smalle kolom): minder opvulling zodat de statusnaam heel blijft; staat na de gewone regels zodat hij wint */
@container (max-width: 200px) { .kaart__band { padding-inline: var(--space-padding-xs); } .kaart__inhoud { padding: var(--space-padding-xs); } }
@container (max-width: 120px) { .kaart__keuze { flex-direction: column; } }

/* rust of open: open is hover (alleen met een muis), toetsenbordfocus of een eerste tik (klasse is-open) */
.kaart .meer { display: none; }
.kaart:is(.is-open, :focus-within) .meer { display: block; }
.kaart:is(.is-open, :focus-within) :is(.kaart__wacht, .kaart__keuze).meer { display: flex; }
.kaart:is(.is-open, :focus-within) .kaart__titel { display: block; overflow: visible; }
.kaart:is(.is-open, :focus-within) .alleen-rust { display: none; }
@media (hover: hover) {
  .kaart:hover .meer { display: block; }
  .kaart:hover :is(.kaart__wacht, .kaart__keuze).meer { display: flex; }
  .kaart:hover .kaart__titel { display: block; overflow: visible; }
  .kaart:hover .alleen-rust { display: none; }
}
/* Escape heeft de uitklap gesloten: terug naar rust tot je de kaart verlaat */
.kaart.is-dicht .meer { display: none !important; }
.kaart.is-dicht .alleen-rust { display: grid !important; }
.kaart.is-dicht .kaart__titel { display: -webkit-box !important; overflow: hidden !important; }

@media (prefers-reduced-motion: reduce) { .kaart__tip { transition: none; } }