/* css/r71-uniform.css — Ronde 71: het canonieke kaart- + popup-contract
   ──────────────────────────────────────────────────────────────────────
   Eén doelwaarde per punt, door de designer bevestigd. Dit bestand laadt als
   láátste, zodat het de per-tab varianten in componenten.css/bord.css over-
   schrijft zonder die te hoeven aanraken. Alleen de Opvolging-kaarten en de
   aanmaak-/bewerk-popups vallen eronder.

   Kleur-nuance: de designer noemt de kaartkleur "#FAF8F5" op een cream canvas
   "#EDE9E1". In déze codebase is --cream (#FAF8F5) al de canvas en --wit (#fff)
   de kaart. De onderliggende regel — "kaart altijd lichter dan de zone eromheen"
   — realiseren we dus met wit (#fff) op het bestaande #FAF8F5-canvas: alle
   kaarten identiek en lichter dan hun omgeving. */

/* ══ 0 · het app-canvas — één tint donkerder dan de kaarten ══
   De designer beschrijft een tweetoon: canvas #EDE9E1, kaart #FAF8F5. In deze
   codebase was --cream (#FAF8F5) nog het canvas én de kaartkleur; we splitsen
   dat nu. --canvas (#EDE9E1) draagt het app-oppervlak, de kaarten worden warm
   #FAF8F5 (--cream). Zo leest élke kaart lichter dan de zone eromheen. Deze
   regel laadt na schil.css en wint dus van .app{background:var(--cream)}. */
.app{ background:var(--canvas); }

/* ══ A · de kaart in rust — alle 7 soorten identiek ══ */
.c-aankaart, .c-riskaart, .c-gesprekkaart, .c-actiekaart, .c-meetkaart,
.c-missiekaart, .c-notkaart{
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:var(--r-veld);
  padding:11px 14px;
  transition:border-color .12s, box-shadow .12s;
}
/* de status-kantlijn (3px) alléén op soorten met een stand */
.c-riskaart, .c-gesprekkaart, .c-actiekaart, .c-meetkaart, .c-missiekaart{
  border-left-width:3px;
}
/* Notitie + Aanname dragen géén kantlijn — een gewone 1px-rand rondom; de
   afwezigheid ís de betekenis. (De [data-kant]-kleurregel van de aankaart heeft
   specificiteit 0,2,0, dus die neutraliseren we hier met gelijke specificiteit.) */
.c-aankaart[data-kant]{ border-left:1px solid var(--line); }
.c-notkaart{ border-left:1px solid var(--line); }

/* ══ B · geselecteerd / open — rand → petrol-deep, dikte blijft gelijk,
   zachte slagschaduw, géén achtergrond-wissel (geen layout-shift) ══ */
.c-aankaart.is-selected, .c-riskaart.is-selected, .c-gesprekkaart.is-selected,
.c-meetkaart.is-selected, .c-missiekaart.is-selected, .c-notkaart.is-selected,
.c-actiekaart.is-open{
  border-color:var(--petrol);
  box-shadow:0 0 0 1px var(--petrol) inset, 0 8px 22px rgba(10,57,54,.10);
  background:var(--cream);
}
/* de geselecteerde risico-kaart houdt óók haar status-kantlijn-kleur links */
.c-actiekaart.is-open{ border-radius:var(--r-veld); }

/* de open-zone onder een kaart: 1px scheidingslijn boven, 12px eronder,
   14px zijpadding gelijk aan de kaart */
.c-aankaart-open-zone, .c-riskaart-open-zone, .c-gesprekkaart-open-zone,
.c-actiekaart-body{
  margin-top:10px; padding:10px 0 0; border-top:1px solid var(--line-zacht);
}

/* ══ C · chips — één vorm, twee families ══ */
/* status-chip: zachte kleurvulling + kleur-tekst, pilvorm */
.c-riskaart-chip, .c-gesprekkaart-chip, .c-missiekaart-status, .c-meetchip,
.c-aanchip, .bord-stand{
  border-radius:999px; padding:2px 8px; font-size:12px; font-weight:600;
  line-height:1.5; white-space:nowrap;
}
/* nog-niet-gestart / ongewogen = neutraal grijs op zachte vulling */
.c-missiekaart-status.is-nietgestart{ background:rgba(0,0,0,.06); color:var(--ink-soft); border:none; }
.c-riskaart[data-kant="grijs"] .c-riskaart-chip{ background:rgba(0,0,0,.06); color:var(--ink-soft); }

/* Drie chip-families (UXR-spec). Gemeenschappelijke pilvorm: */
.c-gesprekkaart-groep, .c-gesprekkaart-missiechip, .c-missiekaart-agentchip,
.c-notkaart-herkomst{
  border-radius:999px; padding:2px 8px; font-size:12px;
}
/* meta-chip: passieve context — cream2-vulling, grijze tekst, géén klikgedrag */
.c-gesprekkaart-groep, .c-missiekaart-agentchip{
  background:var(--cream2); color:var(--ink-soft);
}
/* koppel-chip: springt naar de bron (↗) — lichte teal-vulling, petrol-deep, 600 */
.c-gesprekkaart-missiechip, .c-notkaart-herkomst{
  background:var(--vul-koppel); color:var(--petrol-deep); font-weight:600;
}

/* ══ D · popups — het gedeelde skelet-omhulsel ══ */
/* de aanmaak-/bewerk-popup: warm #FAF8F5-oppervlak (designer "wit"), 12px radius */
.c-venster.is-detail{ background:var(--cream); border-radius:14px; }
/* Verwijderen in de voet van een bewerk-scherm: rood, links-afgezonderd van de
   primaire Bewaar-knop (destructief weg van de hoofdactie). */
.c-venster.is-detail .c-venster-voet .c-soortpop-weg{ margin-right:auto; }
/* het skelet (Notitie · Aanname · Risico) is een smalle popup (440px). De
   complexe soorten houden hun eigen breedte (breed 640px via .is-breed). */
.c-venster.is-detail:has(.c-soortpop):not(.is-breed){ width:440px; max-width:calc(100vw - 40px); }
.c-venster.is-detail.is-breed{ max-width:640px; }
/* kop: soort-dot + titel in Fraunces 20px; uitlegzin grijs */
.c-venster-titel{ font-family:var(--font-titel, Fraunces, Georgia, serif); font-size:17px; }
/* veld-labels: 11px, caps, letter-spacing, grijs */
.c-soortpop-veldlabel, .c-aan66-veldlabel, .c-veldvak-label, .risico-fab-lab{
  font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft); font-weight:600;
}
/* invoervelden: 8px radius, 1px rand, petrol-focus */
.c-soortpop-kernveld, .c-aan66-overtuiging, .risico-fab-koppel{
  border-radius:8px; border:1px solid var(--line);
}
.c-soortpop-kernveld:focus, .c-aan66-overtuiging:focus, .risico-fab-koppel:focus{
  outline:none; border-color:var(--petrol); box-shadow:0 0 0 2px rgba(18,113,108,.16);
}
/* voet: "landt onder …" links, grijs 12px (de terra Bewaar-knop rechts staat al) */
/* R118g — waar het item landt, in dezelfde vorm als elke andere herkomst in de
   app: petrol met ↗. Eén schrijfwijze, overal. */
.c-soortpop-landt{ font-size:12px; color:var(--petrol-deep); }

/* ══ E · het ⋯-object-menu — dezelfde stijl, compacter ══ */
/* verwijderen = rode tekst-knop onderaan achter een 1px-scheidingslijn */
.c-aan66-weg{ color:var(--rood); }

/* ══ F · tab-lijst-uitlijning — élke Opvolging-tab-lijst springt gelijk in ══
   Elke tab-lijst draagt de werkvlak-padding (zoals .c-aanlijst). De Notities-
   lijst kreeg die nog niet, waardoor hint + kaart tegen de rand plakten. */
.c-notlijst{ padding:var(--pad-werkvlak); }

/* ══ G · de persoonlijke vlag als klikbare toggle op de kaart (R71/B) ══
   Het vlag-streepje rechtsboven is nu een knop: één klik cyclet geen → groen →
   amber → rood. In rust een zeer stille omtrek (klik-doel), gezet de kleur. De
   kiezer in het ⋯-menu blijft óók bestaan. Overschrijft de R70-streepjes. */
.c-aankaart, .c-riskaart, .c-gesprekkaart, .c-actiekaart, .c-meetkaart,
.c-missiekaart, .c-notkaart{ position:relative; }
.c-vlagstreep{
  position:absolute; top:6px; right:0; width:14px; height:22px; padding:0;
  border:0; background:none; cursor:pointer; pointer-events:auto;
  display:flex; align-items:center; justify-content:flex-end;
}
.c-vlagstreep::after{
  content:""; width:4px; height:15px; border-radius:2px 0 0 2px;
  background:transparent; box-shadow:inset 0 0 0 1px var(--line);
  opacity:.45; transition:background .12s, box-shadow .12s, opacity .12s;
}
.c-vlagstreep:hover::after{ opacity:1; box-shadow:inset 0 0 0 1px var(--ink-soft); }
.c-vlagstreep[data-vlag="groen"]::after,
.c-vlagstreep[data-vlag="amber"]::after,
.c-vlagstreep[data-vlag="rood"]::after{ opacity:1; box-shadow:none; }
.c-vlagstreep[data-vlag="groen"]::after{ background:var(--groen); }
.c-vlagstreep[data-vlag="amber"]::after{ background:var(--geel); }
.c-vlagstreep[data-vlag="rood"]::after{ background:var(--rood); }
/* de oude gevulde-achtergrond-regels (R70) neutraliseren, kleur zit nu op ::after */
.c-vlagstreep[data-vlag="groen"], .c-vlagstreep[data-vlag="amber"],
.c-vlagstreep[data-vlag="rood"]{ background:none; }

/* ══ H · de missie-uitklap (R71) — open-zone met download/upload + definitie ══
   De klik op een missie-kaart klapt deze zone uit (zoals de andere kaarten hun
   open-zone). Puur: download (+ upload bij een lopende missie) en de definitie
   ter referentie. Zelfde scheidingslijn/padding als de andere open-zones. */
.c-missie-uitklap{ margin-top:10px; padding:10px 0 0; border-top:1px solid var(--line-zacht); }
.c-missie-uitklap-knoppen{ display:flex; flex-wrap:wrap; gap:8px; }
/* De zin die met het bestand meegaat · leesblok met een kopieerknop, geen veld.
   Rustig gezet: hij is een hulpmiddel bij het uitdelen, geen handeling op zich,
   en hij hoort de download-knop erboven niet te beconcurreren. */
.c-missie-deelzin{ margin-top:14px; padding-top:12px; border-top:1px solid var(--line-zacht); }
.c-missie-deelzin-lab{ font-size:11px; font-weight:var(--gew-vet); letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-mist); margin-bottom:6px; }
.c-missie-deelzin-tekst{ margin:0 0 8px; font-size:13px; line-height:1.55; color:var(--ink-soft);
  background:var(--cream2); border:1px solid var(--line-zacht); border-radius:var(--r-m);
  padding:9px 12px; overflow-wrap:anywhere; }
.c-missie-deelzin-kopieer{ border:1px solid var(--line-zacht); border-radius:999px;
  background:var(--wit); padding:3px 11px; font-family:inherit; font-size:11px;
  color:var(--ink-soft); cursor:pointer; }
.c-missie-deelzin-kopieer:hover{ border-color:var(--petrol); color:var(--petrol); }
.c-missie-uitklap-uitleg{ margin:10px 0 0; font-size:12px; line-height:1.5; color:var(--ink-soft); }
.c-missie-uitklap-def{ margin-top:12px; display:flex; flex-direction:column; gap:6px; }
.c-missie-defrij{ display:flex; gap:8px; font-size:12.5px; line-height:1.45; }
.c-missie-deflab{ flex:none; min-width:120px; color:var(--ink-soft); font-weight:600; }
.c-missie-defval{ flex:1; min-width:0; color:var(--ink); white-space:pre-wrap; word-break:break-word; }

/* ══ I · de "mijn vlag"-filter (#306) — één toggle over alle Opvolging-tabs ══ */
.c-kopregel-vlagfilter{
  margin-left:auto; flex:none; align-self:center;
  font:inherit; font-size:12px; font-weight:600; color:var(--ink-soft);
  background:var(--wit); border:1px solid var(--line); border-radius:999px;
  padding:4px 12px; cursor:pointer; white-space:nowrap;
}
.c-kopregel-vlagfilter::before{ content:"\2691 "; }  /* ⚑ */
.c-kopregel-vlagfilter.is-actief{ color:#fff; background:var(--petrol-deep); border-color:var(--petrol-deep); }
/* actief → verberg alle Opvolging-kaarten zonder persoonlijke vlag, over alle soorten */
body.opvolg-vlagfilter .c-aankaart:not([data-vlag]),
body.opvolg-vlagfilter .c-riskaart:not([data-vlag]),
body.opvolg-vlagfilter .c-gesprekkaart:not([data-vlag]),
body.opvolg-vlagfilter .c-actiekaart:not([data-vlag]),
body.opvolg-vlagfilter .c-meetkaart:not([data-vlag]),
body.opvolg-vlagfilter .c-missiekaart:not([data-vlag]),
body.opvolg-vlagfilter .c-notkaart:not([data-vlag]){ display:none; }

/* ══ mobiel ══ */
@media (max-width:699px){
  /* de smalle skelet-popup wordt een bottom-sheet (volle breedte) */
  .c-venster.is-detail:has(.c-soortpop):not(.is-breed){ width:auto; max-width:none; }

  /* meetkaart: op smal scherm breekt de kop-rij af — de naam krijgt de volle
     regel, de waarde + status-chip + ⋯ vallen eronder. Zo overloopt een lang
     woord ("overdrachten") niet meer over de "laatste: X"-waarde. */
  .c-meetkaart-top{ flex-wrap:wrap; }
  .c-meetkaart-naam{ flex-basis:100%; }
  .c-meetkaart-naam{ overflow-wrap:anywhere; }

  /* onderste tabbalk: enkel symbolen (geen labels), iets groter, ruimer.
     De iconen zitten al gecentreerd in flex:1-cellen en verdelen vanzelf. */
  .c-tab-label{ display:none; }
  .c-tab-icoon{ font-size:23px; }
  .c-tab-badge{ right:calc(50% - 20px); }
}