/* Kleurtaal (handoff 20/8, intensiteit B) — het staat-vlak.
   Kleur markeert STAAT, nooit inhoud. Een vlak staat bovenaan een scherm (de
   staat-kop) of aan het eind (het slotmoment) — nooit tussen de data.

   Vier ingrediënten, altijd alle vier:
     VLAK      één kleur die het hele blok vult en de rand overneemt — geen
               kleurtje in een witte kaart, geen linkerbalkje: het vlak ís de kaart
     EYEBROW   mono-uppercase, 3–12 tekens: wélk moment is dit
     DISPLAY   één regel, 32px+ met negatieve tracking
     ÉÉN ACTIE zwarte pill, of niets — twee knoppen halen het moment onderuit

   Regels: één vlak per beeldscherm (een kleinere .moment-kaart in een andere rol
   mag) · fouten krijgen nooit een vlak (foutfamilie blijft wit met rode dot) ·
   magenta wordt nooit een vlak · pink blijft in reserve. */

.fw-vlak{
  border-radius:var(--radius-xl);
  padding:48px;
  display:flex;flex-direction:column;gap:18px;
  color:var(--ink);
  box-sizing:border-box;
}
/* als kop van een kaart of scherm: bovenhoeken rond, onderkant sluit aan */
.fw-vlak.kop{border-radius:var(--radius-xl) var(--radius-xl) 0 0;padding:32px}
/* full-bleed bovenaan een scherm dat zelf al padding heeft */
.fw-vlak.bleed{border-radius:var(--radius-xl);padding:32px 36px}
/* als paginakop: het vlak neemt de plek van de titel in en loopt door tot de
   rand van het werkvlak. De marges volgen de padding van .main — die krimpt
   onder 880px mee, dus hardcoded waarden geven daar horizontale scroll. */
.fw-vlak.paginakop{margin:-40px -48px 20px;border-radius:0 0 var(--radius-xl) var(--radius-xl)}

.fw-vlak .eyebrow{font-family:var(--font-mono);font-size:11px;letter-spacing:1.4px;text-transform:uppercase}
.fw-vlak .display{margin:0;font-size:32px;font-weight:540;letter-spacing:-1px;line-height:1.05;text-wrap:balance}
.fw-vlak.groot .display{font-size:36px}
.fw-vlak .uitleg{margin:0;font-size:15px;line-height:1.45;max-width:420px;text-wrap:pretty}
.fw-vlak .acties{display:flex;gap:10px;flex-wrap:wrap;margin-top:2px}
/* de ene zwarte pill; een tweede, lichtere actie mag alleen als hij echt nodig is */
.fw-vlak .acties .btn{background:var(--ink);color:var(--on-primary);border-color:var(--ink)}
.fw-vlak .acties .btn.secondary{background:transparent;color:var(--ink);border:1px solid rgba(0,0,0,.25)}

/* de zeven betekenissen */
.fw-vlak.cream{background:var(--block-cream)}   /* wacht op jou */
.fw-vlak.lilac{background:var(--block-lilac)}   /* agent aan het werk */
.fw-vlak.lime{background:var(--block-lime)}     /* binnen · afgerond */
.fw-vlak.mint{background:var(--block-mint)}     /* door de machine gevalideerd */
.fw-vlak.coral{background:var(--block-coral)}   /* aandacht, niets stuk */
.fw-vlak.navy{background:var(--block-navy);color:#fff}  /* machine-diep */
.fw-vlak.navy .uitleg{color:rgba(255,255,255,.75)}
.fw-vlak.navy .acties .btn{background:#fff;color:var(--block-navy);border-color:#fff}

/* momentkaart: de kleinere tweede rol op een scherm (bv. "sessie bezig" in
   De AI nu). Zelfde taal, minder volume. */
.fw-vlak.moment{padding:16px 18px;gap:8px;border-radius:var(--radius-card)}
.fw-vlak.moment .eyebrow{font-size:9px;letter-spacing:1.2px}
.fw-vlak.moment .display{font-size:15px;letter-spacing:-0.2px;line-height:1.3;font-weight:540}
.fw-vlak.moment .uitleg{font-size:12px}
.fw-vlak.moment .meta{display:flex;align-items:center;gap:8px;font-size:12px}
.fw-vlak.moment .meta .dot{width:6px;height:6px;border-radius:var(--radius-pill);background:var(--fin-orange);animation:fw-pulse 1.6s infinite}
@keyframes fw-pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* smal scherm: het vlak blijft, de maten krimpen mee */
@media (max-width:880px){
  .fw-vlak{padding:28px 22px}
  .fw-vlak.kop,.fw-vlak.bleed{padding:24px 20px}
  .fw-vlak.paginakop{margin:-24px -16px 16px}
  .fw-vlak .display{font-size:26px;letter-spacing:-0.7px}
  .fw-vlak.groot .display{font-size:28px}
  .fw-vlak .uitleg{font-size:14px}
}
@media (prefers-reduced-motion:reduce){.fw-vlak.moment .meta .dot{animation:none}}