/* "Samen afgesproken" (samen-afgesproken-handoff): gedeelde functies met voorstel-flow.
   ChatGPT-stijl (prototype SAMEN AFGESPROKEN 2026-09-28): per functie een grijs vlak in een
   groep (3px ertussen, 26px buitenhoek) — icoon, titel 17, uitleg 15 — en daaronder één regel
   met de stand links (gedempt, amber of groen) en de handeling rechts als tekst. Geen gekleurde
   strips en geen grote knoppen (plat, 2026-09-14): de kleur zit alleen in de statuswoorden. */

.samen__rijen { display: flex; flex-direction: column; gap: 3px; border-radius: var(--radius-groep); overflow: hidden; }
.samen__rij { padding: 14px 18px 14px 20px; border-radius: var(--radius-binnen); background: var(--color-card); }

/* Kop-grid: icoon | titel | (slotje) op rij 1; de uitleg als rij 2 loopt onder het slotje
   dóór tot de rand — zo zit de lange uitleg nooit klem in de titelkolom. */
.samen__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 12px;
}
.samen__head .vslot { grid-column: 3; grid-row: 1; }
.samen__icon { flex: none; width: var(--icon); height: var(--icon); color: var(--color-text-muted); }
.samen__icon svg { width: var(--icon); height: var(--icon); }
.samen__title { grid-column: 2; grid-row: 1; font-size: var(--text-17); font-weight: 400; line-height: var(--leading-kop); }
.samen__desc { grid-column: 2 / -1; grid-row: 2; font-size: var(--text-15); color: var(--color-text-muted); line-height: var(--leading); margin: 3px 0 0; }

/* Vergrendeld: niet dimmen (2026-09-01) — een gedimde rij leest als kapot. Alleen de
   titel is gedempt; het slotje en de melding bij aanraken doen het werk. */
.samen__rij--slot { cursor: pointer; }
.samen__rij--slot .samen__title { color: var(--color-text-muted); }

/* ── Stand-regel: stand links, handeling rechts ─────────────────────── */
.samen__stand {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 10px 0 0 calc(var(--icon) + 12px);
}
.samen__status { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: var(--text-15); font-weight: 500; color: var(--color-text-muted); line-height: var(--leading); }
.samen__stand--sent .samen__status { color: var(--color-amber-deep); }
/* Actief in inkt, met het vinkje — geen groene tekst (feedback 2026-09-15). */
.samen__stand--on .samen__status { color: var(--color-text); }
.samen__stand--on .samen__status svg { flex: none; width: var(--icon-sm); height: var(--icon-sm); color: var(--color-text); }
.samen__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--color-amber); }
/* Inkomend voorstel: de zin met de naam vet, de twee handelingen eronder naast elkaar. */
.samen__stand--received { flex-wrap: wrap; }
.samen__stand--received .samen__status { flex: 1 0 100%; font-weight: 400; color: var(--color-text); }
.samen__acties { display: flex; gap: 18px; }

/* Handelingen als tekst (voorstellen/akkoord in accent, intrekken amber, uitzetten rood,
   niet nu gedempt) — dezelfde vorm als .vactie. */
.samen__linkform { flex: none; margin: 0; }
.samen__linkbtn {
  background: none; border: none; cursor: pointer; padding: 0;
  font: inherit; font-size: var(--text-15); font-weight: 500; white-space: nowrap;
  color: var(--color-accent);
}
.samen__linkbtn--amber { color: var(--color-amber); }
.samen__linkbtn--danger { color: var(--color-error); }
.samen__linkbtn--muted { color: var(--color-text-muted); }

/* ── Instap-rij-badge (Gezinsinstellingen) ───────────────────────────── */