/* De stijl van het RecruFone-portaal.
 *
 * Alles staat achter de wortelklasse .rf-portaal, die de schil zelf zet
 * (app/(app)/_components/recrufone/schil.tsx). Zonder die klasse doet dit
 * bestand niets, en dat is de hele reden dat het een eigen stylesheet is: Bellen
 * deelt de app met deze editie, en een regel die per ongeluk buiten de schil
 * valt zou daar een knop of een rij verschuiven zonder dat iemand het merkt.
 * app/(app)/_stijl/recrufone-scope.test.ts bewaakt dat.
 *
 * De waarden komen uit het klikbare concept (docs/recruitment-portaal-ontwerp.md
 * hoofdstuk 2). Klassen dragen het voorvoegsel rf-, zodat ze niet kunnen botsen
 * met een hulpklasse van Tailwind of met de mk-laag van de site.
 *
 * ────────────────────────────────────────────────────────────────────────────
 * WAAROM DIT BESTAND IN public/ STAAT EN NIET IN app/(app)/_stijl/.
 * ────────────────────────────────────────────────────────────────────────────
 *
 * Het stond er wél, als `import "./recrufone.css"` in de schil. Next bundelt een
 * css-import van een component in de css van de route-groep waar hij onder
 * hangt, en dat is hier app/(app)/layout: elke pagina van Bellen laadde daardoor
 * 57 KB .rf-regels mee voor een schil die daar nooit getekend wordt. Hetzelfde
 * gold voor DM Sans: next/font zette een preload van 37 KB in de kop van elke
 * pagina, ook bij een klant die Plus Jakarta Sans ziet.
 *
 * Als bestand in public/ hangt hij aan één `<link rel="stylesheet">` in de
 * RecruFone-schil (zie PORTAAL_CSS in app/(app)/_stijl/stylesheet.ts, waar ook
 * de versie-query staat die de cache ververst). Bellen laadt hem dus niet, en
 * het bewijs staat in .next: next-font-manifest.json noemt voor
 * app/(app)/layout alleen nog Plus Jakarta Sans, en layout.css bevat geen enkele
 * .rf-regel meer.
 *
 * De keerzijde is dat er geen build-stap meer overheen gaat: geen autoprefixer,
 * geen minify, en een typefout valt pas in de browser op. Vandaar de test die de
 * scoping bewaakt, en vandaar dat hier alleen eigenschappen staan die elke
 * browser van de laatste jaren zonder voorvoegsel kent.
 */

/* --- De letter ------------------------------------------------------------ */

/* DM Sans staat niet hier maar in fonts.css ernaast, dat de schil als tweede
 * `<link>` meebrengt (zie de `fontsHref`-prop in
 * app/(app)/_components/recrufone/schil.tsx). Hij stond tot 9 september 2026 in
 * dit bestand en in login.css; met de aanmeldroute erbij werden dat er drie, en
 * dat is de plek waar een verschil ontstaat dat niemand zoekt. Zie de kop van
 * fonts.css. */

.rf-portaal {
  --rf-font: "RecruFone DM Sans", ui-sans-serif, system-ui, sans-serif;
  --rf-ink: #15171c;
  --rf-muted: #72767f;
  --rf-line: #e7e8ed;
  --rf-canvas: #f5f6f8;
  --rf-white: #fff;
  --rf-mint: #aaf4dc;
  --rf-blue: #4d65d8;
  --rf-zijbalk: 238px;
  /* De vlakken, de haarlijnen en de zijbalk als variabelen, met precies de
   * waarde die hier tot 11 september 2026 als hex stond. Ze staan er sinds
   * RestoFone dezelfde schil draagt (public/restofone/portaal-tokens.css): dat
   * bestand zet ze om en raakt geen enkele regel hieronder aan. RecruFone
   * verandert er niets van, want elke variabele heeft zijn oude waarde.
   *
   * Alleen wat écht per merk verschilt. De tientallen grijstinten in de
   * schermen zelf blijven staan waar ze staan; die zet dat bestand met een
   * regel om, want er een variabele van maken zou dit blok langer maken dan de
   * stylesheet zelf. */
  --rf-paneel: #fff;
  --rf-op-donker: #fff;
  --rf-haarlijn: #f0f1f4;
  --rf-haarlijn-zacht: #eef0f3;
  --rf-hover: #eef0f5;
  --rf-rij-hover: #f9fafc;
  --rf-zij: #101113;
  --rf-zij-tekst: #a0a1a7;
  --rf-zij-link: #93959f;
  --rf-zij-rand: #292b30;
  --rf-zij-hover: #202227;
  --rf-zij-actief: #2a2c32;
  --rf-zij-mark: #303238;
  --rf-zij-kop: #eeeff3;
  --rf-zij-stil: #777a83;
  --rf-zij-label: #64676f;

  min-height: 100vh;
  background: var(--rf-canvas);
}

/* DE LETTER EN DE KLEUR STAAN NIET OP .rf-portaal ZELF, en dat is met opzet.
 *
 * De schil komt in fase A om alle schermen heen te staan, ook om de schermen die
 * pas in fase B en C worden omgebouwd (Gesprekken, Belplan, Instellingen,
 * Kandidaten, Hulp). Zou de wortel `font-family`, `font-size` en `color` zetten,
 * dan zou elk van die schermen vandaag al in DM Sans op 14px staan zonder dat
 * iemand er iets aan tekende: alles wat erft verandert mee.
 *
 * De canvas-achtergrond blijft wél op de wortel staan. Die vult de ruimte naast
 * en onder de pagina, en dat is precies wat de schil hoort te doen.
 */
:is(.rf-portaal, .rf-overlay) :is(.rf-zijbalk, .rf-topbalk, .rf-onderbalk, .rf-main) {
  color: var(--rf-ink);
  font-family: var(--rf-font);
  font-size: 14px;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

/* --- Kleine bouwstenen ---------------------------------------------------- */

:is(.rf-portaal, .rf-overlay) .rf-rij {
  display: flex;
  align-items: center;
  gap: 12px;
}
:is(.rf-portaal, .rf-overlay) .rf-rij-8 {
  gap: 8px;
}
:is(.rf-portaal, .rf-overlay) .rf-tussen {
  justify-content: space-between;
}
:is(.rf-portaal, .rf-overlay) .rf-groei {
  flex: 1;
  min-width: 0;
}
:is(.rf-portaal, .rf-overlay) .rf-stil {
  color: var(--rf-muted);
}
:is(.rf-portaal, .rf-overlay) .rf-cijfers {
  font-variant-numeric: tabular-nums;
}
:is(.rf-portaal, .rf-overlay) .rf-eyebrow {
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}
:is(.rf-portaal, .rf-overlay) .rf-stip {
  width: 6px;
  height: 6px;
  background: #3caa84;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
:is(.rf-portaal, .rf-overlay) .rf-stip.rf-uit {
  background: #9397a2;
}
:is(.rf-portaal, .rf-overlay) .rf-icoon {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
  vertical-align: middle;
}

/* De overslaan-link. Onzichtbaar tot hij de aandacht krijgt, en dan het eerste
   wat er staat: een zijbalk met tien menu-items is anders tien keer Tab voordat
   je bij de pagina bent. De schil zet hem bovenaan, één keer voor alle
   schermen. */
:is(.rf-portaal, .rf-overlay) .rf-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 120;
  background: var(--rf-ink);
  color: var(--rf-op-donker);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 550;
  font-family: var(--rf-font);
}
:is(.rf-portaal, .rf-overlay) .rf-skip:focus {
  left: 12px;
  top: 12px;
}

:is(.rf-portaal, .rf-overlay) .rf-verborgen {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* De basisreset staat met opzet niet op `a`, `button` en `input` maar op de
   rf-klassen zelf. In de recruitment-editie zitten ook de nog niet omgebouwde
   schermen binnen deze wortel; een regel op `a` zou daar elke onderstreping van
   Tailwind overschrijven, en een regel op `input` elk formulier. Wat een eigen
   klasse draagt is van dit portaal, de rest blijft van de pagina.

   :where() en niet :is(), en dat is geen smaak. :is() neemt de zwaarte van zijn
   zwaarste argument over, en `.rf-subnav a` in de lijst maakte de hele reset
   zwaarder dan de regel die er daarna een kleur op zet: de primaire knop kreeg
   `color: inherit` en werd zwart op zwart. :where() weegt nul, dus elke regel
   hieronder wint er altijd van. */
:is(.rf-portaal, .rf-overlay) :where(
    .rf-knop,
    .rf-linkknop,
    .rf-icoonknop,
    .rf-navlink,
    .rf-onderbalk-tab,
    .rf-gesprekrij,
    .rf-taakrij,
    .rf-activiteitrij,
    .rf-tab,
    .rf-chip,
    .rf-schakelaar,
    .rf-merk,
    .rf-subnav a,
    .rf-zoekknop
  ) {
  color: inherit;
  text-decoration: none;
  font: inherit;
}
:is(.rf-portaal, .rf-overlay) :where(.rf-knop, .rf-linkknop, .rf-icoonknop, .rf-tab, .rf-chip, .rf-schakelaar, .rf-zoekknop):disabled {
  cursor: default;
  opacity: 0.5;
}
:is(.rf-portaal, .rf-overlay) :is(button, a, .rf-schakelaar):focus-visible,
.rf-overlay :is(button, a, input, textarea, select):focus-visible {
  outline: 3px solid #7898ee;
  outline-offset: 3px;
}
.rf-overlay input,
.rf-overlay select,
.rf-overlay textarea {
  background: var(--rf-paneel);
  border: 1px solid #dfe1e7;
  border-radius: 9px;
  padding: 11px 13px;
  color: var(--rf-ink);
  width: 100%;
  font: inherit;
}
.rf-overlay textarea {
  resize: vertical;
  min-height: 96px;
  line-height: 1.7;
}

/* --- Badge ---------------------------------------------------------------- */

:is(.rf-portaal, .rf-overlay) .rf-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 5px;
  padding: 4px 7px;
  background: var(--rf-haarlijn);
  color: #656974;
  font-size: 10px;
  font-weight: 550;
  line-height: 1.4;
  white-space: nowrap;
}
:is(.rf-portaal, .rf-overlay) .rf-badge.rf-ai {
  background: #efedfc;
  color: #7661b3;
}
:is(.rf-portaal, .rf-overlay) .rf-badge.rf-success {
  background: #e9f7f0;
  color: #368062;
}
:is(.rf-portaal, .rf-overlay) .rf-badge.rf-warning {
  background: #fff0e7;
  color: #b36d39;
}
:is(.rf-portaal, .rf-overlay) .rf-badge.rf-dark {
  background: #282b32;
  color: #c2c5d1;
}
/* De soort van een contact: "Opdrachtgever" naast de neutrale "Kandidaat".
 * Afgeleid van --rf-blue, maar met de hand ingevuld: dit bestand kent de
 * variabele wel, maar een badge hoort ook te kloppen als hij ooit buiten
 * .rf-portaal terechtkomt, en een kleurmenging in css zou hier de eerste zijn. */
:is(.rf-portaal, .rf-overlay) .rf-badge.rf-blauw {
  background: #e9edfb;
  color: #4152a8;
}
:is(.rf-portaal, .rf-overlay) .rf-badge .rf-icoon {
  width: 10px;
  height: 10px;
}

/* --- Knoppen -------------------------------------------------------------- */

:is(.rf-portaal, .rf-overlay) .rf-knop {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-height: 39px;
  padding: 9px 15px;
  border-radius: 8px;
  background: var(--rf-ink);
  color: var(--rf-op-donker);
  border: 1px solid var(--rf-ink);
  font-weight: 550;
  font-size: 12px;
  white-space: nowrap;
  transition:
    background 0.15s,
    transform 0.15s;
}
:is(.rf-portaal, .rf-overlay) .rf-knop:hover {
  background: #32353c;
}
:is(.rf-portaal, .rf-overlay) .rf-knop:active {
  transform: translateY(1px);
}
:is(.rf-portaal, .rf-overlay) .rf-knop.rf-wit {
  background: var(--rf-paneel);
  color: var(--rf-ink);
  border-color: var(--rf-paneel);
}
:is(.rf-portaal, .rf-overlay) .rf-knop.rf-wit:hover {
  background: #edf0f5;
}
:is(.rf-portaal, .rf-overlay) .rf-knop.rf-secundair {
  background: var(--rf-paneel);
  color: var(--rf-ink);
  border-color: var(--rf-line);
}
:is(.rf-portaal, .rf-overlay) .rf-knop.rf-secundair:hover {
  background: #f5f6f8;
}
:is(.rf-portaal, .rf-overlay) .rf-knop.rf-ghost {
  background: transparent;
  border-color: #ffffff25;
  color: #e2e4ec;
}
:is(.rf-portaal, .rf-overlay) .rf-knop.rf-ghost:hover {
  background: #ffffff0e;
}
:is(.rf-portaal, .rf-overlay) .rf-knop.rf-klein {
  min-height: 33px;
  padding: 7px 11px;
  font-size: 11px;
}
:is(.rf-portaal, .rf-overlay) .rf-knop .rf-icoon {
  width: 16px;
  height: 16px;
}

:is(.rf-portaal, .rf-overlay) .rf-linkknop {
  border: 0;
  background: none;
  padding: 4px 0;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #666d7d;
  font-weight: 550;
}
:is(.rf-portaal, .rf-overlay) .rf-linkknop:hover {
  color: #171920;
}
:is(.rf-portaal, .rf-overlay) .rf-linkknop .rf-icoon {
  width: 14px;
  height: 14px;
}

:is(.rf-portaal, .rf-overlay) .rf-icoonknop {
  border: 1px solid transparent;
  background: transparent;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
:is(.rf-portaal, .rf-overlay) .rf-icoonknop:hover {
  background: var(--rf-hover);
}
:is(.rf-portaal, .rf-overlay) .rf-icoonknop .rf-icoon {
  width: 18px;
  height: 18px;
}

/* --- Avatar --------------------------------------------------------------- */

:is(.rf-portaal, .rf-overlay) .rf-avatar {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
  background: #f0e9e2;
  color: #86694e;
}
:is(.rf-portaal, .rf-overlay) .rf-avatar.rf-lila {
  background: #ede9f8;
  color: #796d9c;
}
:is(.rf-portaal, .rf-overlay) .rf-avatar.rf-blauw {
  background: #e7edf8;
  color: #677c9a;
}
:is(.rf-portaal, .rf-overlay) .rf-avatar.rf-groen {
  background: #e8efea;
  color: #71887a;
}
:is(.rf-portaal, .rf-overlay) .rf-avatar.rf-groot {
  width: 52px;
  height: 52px;
  font-size: 16px;
}
:is(.rf-portaal, .rf-overlay) .rf-avatar.rf-rij-maat {
  width: 31px;
  height: 31px;
  font-size: 10px;
}

/* --- De schil ------------------------------------------------------------- */

:is(.rf-portaal, .rf-overlay) .rf-zijbalk {
  width: var(--rf-zijbalk);
  position: fixed;
  inset: 0 auto 0 0;
  background: var(--rf-zij);
  color: var(--rf-zij-tekst);
  display: flex;
  flex-direction: column;
  z-index: 40;
  padding: 34px 18px 18px;
  overflow-y: auto;
}
:is(.rf-portaal, .rf-overlay) .rf-merk {
  display: block;
  margin: 0 16px 36px;
  width: max-content;
}
:is(.rf-portaal, .rf-overlay) .rf-merk img {
  width: 155px;
  height: auto;
  display: block;
}
:is(.rf-portaal, .rf-overlay) .rf-werkruimte {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px;
  border: 1px solid var(--rf-zij-rand);
  border-radius: 9px;
  margin-bottom: 31px;
}
:is(.rf-portaal, .rf-overlay) .rf-werkruimte-mark {
  width: 29px;
  height: 29px;
  background: var(--rf-zij-mark);
  color: var(--rf-op-donker);
  border-radius: 7px;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 650;
}
:is(.rf-portaal, .rf-overlay) .rf-werkruimte strong {
  font-size: 12px;
  color: var(--rf-zij-kop);
  font-weight: 500;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:is(.rf-portaal, .rf-overlay) .rf-werkruimte small {
  font-size: 10px;
  color: var(--rf-zij-stil);
  display: block;
  margin-top: 3px;
}

/* --- Van organisatie wisselen ---------------------------------------------
 *
 * Hetzelfde blok, maar dan als knop met een lijst eronder. Hij staat er alleen
 * als iemand lid is van twee organisaties binnen dit merk; anders is het blok
 * hierboven een gewone div en is er aan de zijbalk niets veranderd. Zie
 * _components/recrufone/werkruimtekiezer.tsx.
 *
 * De marge onder het blok verhuist naar de doos eromheen: de lijst hangt er
 * absoluut onder, en die hoort binnen die marge te vallen en niet eronder.
 *
 * Alles in variabelen, zodat RestoFone niets van deze regels hoeft over te
 * doen (public/restofone/portaal-tokens.css zet de kleuren om). */
:is(.rf-portaal, .rf-overlay) .rf-werkruimtekiezer {
  position: relative;
  margin-bottom: 31px;
}
:is(.rf-portaal, .rf-overlay) .rf-werkruimtekiezer .rf-werkruimte {
  margin-bottom: 0;
}
:is(.rf-portaal, .rf-overlay) .rf-werkruimte-knop {
  width: 100%;
  text-align: left;
}
:is(.rf-portaal, .rf-overlay) .rf-werkruimte-knop:hover:not(:disabled) {
  background: var(--rf-zij-rand);
}
:is(.rf-portaal, .rf-overlay) .rf-werkruimte-knop svg {
  width: 12px;
  height: 12px;
  flex: none;
  color: var(--rf-zij-stil);
  /* Het chevron van het kruimelpad wijst naar rechts; als openknop hoort hij
     naar beneden te wijzen. Draaien in plaats van een icoon erbij, net als bij
     de projectkiezer. */
  transform: rotate(90deg);
}
:is(.rf-portaal, .rf-overlay) .rf-werkruimtelijst {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  background: var(--rf-paneel);
  border: 1px solid var(--rf-line);
  border-radius: 10px;
  box-shadow: 0 18px 50px rgb(15 23 42 / 12%);
  z-index: 60;
  overflow: hidden;
  padding: 5px;
}
:is(.rf-portaal, .rf-overlay) .rf-werkruimteregel {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  border: 0;
  background: transparent;
  border-radius: 7px;
  padding: 7px 8px;
  font-size: 12px;
  color: var(--rf-ink);
  text-align: left;
}
:is(.rf-portaal, .rf-overlay) .rf-werkruimteregel:hover {
  background: var(--rf-rij-hover);
}
:is(.rf-portaal, .rf-overlay) .rf-werkruimteregel.rf-actief {
  background: var(--rf-hover);
  font-weight: 600;
}
/* Een lange bedrijfsnaam breekt af met een beletselteken; hij hoort de lijst
   niet breder te maken dan de zijbalk waar hij onder hangt. */
:is(.rf-portaal, .rf-overlay) .rf-werkruimteregel .rf-groei {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Wacht er een wissel, dan blijven de regels staan (de lijst gaat pas dicht als
   het gelukt is) maar telt een tweede klik niet; dat is ook te zien. */
:is(.rf-portaal, .rf-overlay) .rf-werkruimteregel[aria-disabled="true"] {
  opacity: 0.6;
}
/* De reden waarom het wisselen niet lukte, onderin de lijst die blijft staan.
   `rf-fout` levert de kleur en de maat; hier staat alleen waar hij hangt. */
:is(.rf-portaal, .rf-overlay) .rf-werkruimtelijst .rf-fout {
  margin: 5px 0 0;
  padding: 7px 8px 2px;
  border-top: 1px solid var(--rf-haarlijn);
  line-height: 1.5;
}

:is(.rf-portaal, .rf-overlay) .rf-zijlabel {
  font-size: 9px;
  letter-spacing: 1.6px;
  color: var(--rf-zij-label);
  padding: 0 14px;
  margin-bottom: 12px;
}
:is(.rf-portaal, .rf-overlay) .rf-navlink {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px;
  color: #93959f;
  font-size: 12px;
  margin-bottom: 4px;
  border-radius: 8px;
  position: relative;
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  transition:
    background 0.15s,
    color 0.15s;
}
:is(.rf-portaal, .rf-overlay) .rf-navlink:hover {
  background: var(--rf-zij-hover);
  color: var(--rf-op-donker);
}
:is(.rf-portaal, .rf-overlay) .rf-navlink.rf-actief {
  background: var(--rf-zij-actief);
  color: var(--rf-op-donker);
}
:is(.rf-portaal, .rf-overlay) .rf-navlink .rf-icoon {
  width: 18px;
  height: 18px;
}
:is(.rf-portaal, .rf-overlay) .rf-navlink .rf-teller {
  margin-left: auto;
  font-size: 10px;
  background: #ffffff12;
  padding: 2px 6px;
  border-radius: 4px;
}
:is(.rf-portaal, .rf-overlay) .rf-navlink .rf-aitag {
  margin-left: auto;
  font-size: 9px;
  color: #a8dacf;
  background: #20322f;
  padding: 3px 5px;
  border-radius: 4px;
}
:is(.rf-portaal, .rf-overlay) .rf-zijonder {
  margin-top: auto;
  padding-top: 25px;
}
:is(.rf-portaal, .rf-overlay) .rf-zij-ai {
  background: linear-gradient(125deg, #202a2d, #20212b);
  border: 1px solid #31363e;
  padding: 16px;
  border-radius: 10px;
  margin-bottom: 24px;
}
:is(.rf-portaal, .rf-overlay) .rf-zij-ai strong {
  color: #e0e8e9;
  font-size: 11px;
  font-weight: 500;
}
:is(.rf-portaal, .rf-overlay) .rf-zij-ai p {
  font-size: 10px;
  line-height: 1.8;
  margin: 7px 0 0;
  color: #919aa5;
}
:is(.rf-portaal, .rf-overlay) .rf-zij-ai .rf-stip {
  background: #9cddc7;
  width: 5px;
  height: 5px;
  box-shadow: 0 0 10px #91e7c766;
}
:is(.rf-portaal, .rf-overlay) .rf-zij-account {
  border-top: 1px solid var(--rf-zij-rand);
  margin-top: 17px;
  padding: 20px 9px 0;
}
:is(.rf-portaal, .rf-overlay) .rf-zij-account .rf-avatar {
  background: #35373f;
  color: #dadce5;
}
:is(.rf-portaal, .rf-overlay) .rf-zij-account strong {
  display: block;
  color: #dfdfe4;
  font-size: 11px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:is(.rf-portaal, .rf-overlay) .rf-zij-account small {
  font-size: 10px;
  color: #6f737d;
}
:is(.rf-portaal, .rf-overlay) .rf-zijbalk .rf-icoonknop:hover {
  background: var(--rf-zij-rand);
}

:is(.rf-portaal, .rf-overlay) .rf-shell {
  margin-left: var(--rf-zijbalk);
  min-height: 100vh;
}
:is(.rf-portaal, .rf-overlay) .rf-topbalk {
  height: 73px;
  background: #ffffffd9;
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--rf-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 35px;
  gap: 18px;
  position: sticky;
  top: 0;
  z-index: 30;
}
:is(.rf-portaal, .rf-overlay) .rf-kruimel {
  display: flex;
  align-items: center;
  gap: 13px;
  font-size: 11px;
  color: #898d96;
}
:is(.rf-portaal, .rf-overlay) .rf-kruimel span:last-child {
  color: #333844;
}
:is(.rf-portaal, .rf-overlay) .rf-kruimel .rf-icoon {
  width: 12px;
  height: 12px;
  color: #b2b5bd;
}
:is(.rf-portaal, .rf-overlay) .rf-topgereedschap {
  gap: 15px;
}
:is(.rf-portaal, .rf-overlay) .rf-zoekknop {
  background: transparent;
  border: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #8a8e98;
  font-size: 11px;
  padding: 8px;
  border-radius: 8px;
}
:is(.rf-portaal, .rf-overlay) .rf-zoekknop:hover {
  background: var(--rf-hover);
}
:is(.rf-portaal, .rf-overlay) .rf-zoekknop .rf-icoon {
  width: 16px;
  height: 16px;
}
:is(.rf-portaal, .rf-overlay) .rf-zoekknop kbd {
  border: 1px solid #e0e2e7;
  border-radius: 4px;
  padding: 2px 4px;
  font-size: 9px;
  font-family: inherit;
}
:is(.rf-portaal, .rf-overlay) .rf-scheiding {
  height: 23px;
  width: 1px;
  background: var(--rf-line);
}
:is(.rf-portaal, .rf-overlay) .rf-melding-stip {
  position: relative;
}
:is(.rf-portaal, .rf-overlay) .rf-melding-stip::after {
  content: "";
  position: absolute;
  top: 5px;
  right: 7px;
  width: 4px;
  height: 4px;
  background: #797ce4;
  border: 2px solid var(--rf-paneel);
  border-radius: 50%;
  box-sizing: content-box;
}
/* De status-pil: neem je zelf op, of neemt de AI-collega op? Eén knop met twee
   standen; het puntje is groen bij beschikbaar en grijs bij niet storen (zie
   .rf-stip hierboven). */
:is(.rf-portaal, .rf-overlay) .rf-beschikbaarheid {
  border: 1px solid var(--rf-line);
  background: var(--rf-paneel);
  border-radius: 7px;
  font-size: 10px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  color: #4b5060;
}
:is(.rf-portaal, .rf-overlay) .rf-beschikbaarheid:hover:not(:disabled) {
  background: #f5f6f8;
}

:is(.rf-portaal, .rf-overlay) .rf-hamburger {
  display: none;
}
:is(.rf-portaal, .rf-overlay) .rf-main {
  max-width: 1600px;
  margin: auto;
  padding: 31px 35px 34px;
}

/* --- Paginakop ------------------------------------------------------------ */

:is(.rf-portaal, .rf-overlay) .rf-paginakop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 26px;
}
:is(.rf-portaal, .rf-overlay) .rf-paginakop h1 {
  font-weight: 550;
  letter-spacing: -1.1px;
  font-size: 29px;
  line-height: 1.2;
  margin: 0 0 7px;
}
:is(.rf-portaal, .rf-overlay) .rf-paginakop p {
  margin: 0;
  color: var(--rf-muted);
  font-size: 12px;
  line-height: 1.6;
}
:is(.rf-portaal, .rf-overlay) .rf-datum {
  font-size: 11px;
  color: #7c808b;
  display: flex;
  align-items: center;
  gap: 8px;
}
:is(.rf-portaal, .rf-overlay) .rf-datum .rf-icoon {
  width: 15px;
  height: 15px;
}
:is(.rf-portaal, .rf-overlay) .rf-sectiekop {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 550;
  letter-spacing: -0.3px;
}

/* --- Hero en het paneel ernaast ------------------------------------------- */

:is(.rf-portaal, .rf-overlay) .rf-introraster {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(270px, 1fr);
  gap: 20px;
}
:is(.rf-portaal, .rf-overlay) .rf-hero {
  position: relative;
  isolation: isolate;
  border-radius: 13px;
  overflow: hidden;
  background: #131720;
  color: var(--rf-op-donker);
  padding: 27px 29px;
  min-height: 229px;
  border: 1px solid #252b37;
}
:is(.rf-portaal, .rf-overlay) .rf-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse at 87% 80%, #43457c88, transparent 60%),
    radial-gradient(ellipse at 65% 35%, #2a686155, transparent 55%);
}
:is(.rf-portaal, .rf-overlay) .rf-hero .rf-eyebrow {
  color: #acdbd0;
  letter-spacing: 1.4px;
  font-size: 9px;
  display: flex;
  align-items: center;
  gap: 7px;
}
:is(.rf-portaal, .rf-overlay) .rf-hero .rf-eyebrow .rf-stip {
  background: #ace7cf;
  width: 5px;
  height: 5px;
}
:is(.rf-portaal, .rf-overlay) .rf-hero h2 {
  font-size: 31px;
  line-height: 1.16;
  letter-spacing: -1px;
  font-weight: 450;
  margin: 17px 0 10px;
}
:is(.rf-portaal, .rf-overlay) .rf-hero p {
  color: #a5adbd;
  font-size: 11px;
  line-height: 1.6;
  margin: 0 0 19px;
  max-width: 330px;
}
:is(.rf-portaal, .rf-overlay) .rf-hero-inhoud {
  position: relative;
  z-index: 2;
  max-width: 78%;
}
:is(.rf-portaal, .rf-overlay) .rf-hero .rf-knop {
  min-height: 34px;
  padding: 7px 12px;
  font-size: 10px;
}
:is(.rf-portaal, .rf-overlay) .rf-hero-beeld {
  position: absolute;
  right: -34px;
  top: 0;
  width: 260px;
  height: 100%;
  display: grid;
  place-items: center;
  opacity: 0.9;
  pointer-events: none;
}
:is(.rf-portaal, .rf-overlay) .rf-bol {
  width: 185px;
  height: 185px;
  border-radius: 50%;
  border: 1px solid #c8d2fd14;
  display: grid;
  place-items: center;
  position: relative;
  background: radial-gradient(ellipse at center, #93a9e819, transparent 69%);
  box-shadow: 0 0 70px #5d84ad10;
}
:is(.rf-portaal, .rf-overlay) .rf-bol::before,
:is(.rf-portaal, .rf-overlay) .rf-bol::after {
  content: "";
  position: absolute;
  inset: 20px;
  border: 1px solid #bdc7ee12;
  border-radius: 50%;
}
:is(.rf-portaal, .rf-overlay) .rf-bol::after {
  inset: 41px;
  border-color: #afcedf17;
}
:is(.rf-portaal, .rf-overlay) .rf-golven {
  display: flex;
  gap: 5px;
  align-items: center;
  justify-content: center;
  height: 68px;
  z-index: 1;
}
:is(.rf-portaal, .rf-overlay) .rf-golven i {
  display: block;
  width: 4px;
  border-radius: 10px;
  background: linear-gradient(#d0f2eb, #9baffb);
  height: var(--h);
  box-shadow: 0 0 16px #b0dce92e;
  animation: rf-ademen 3.4s ease-in-out infinite;
  animation-delay: var(--d);
}
@keyframes rf-ademen {
  0%,
  100% {
    transform: scaleY(0.8);
    opacity: 0.7;
  }
  50% {
    transform: scaleY(1);
    opacity: 1;
  }
}
:is(.rf-portaal, .rf-overlay) .rf-bol-stip {
  position: absolute;
  top: 42px;
  right: 19px;
  width: 5px;
  height: 5px;
  background: #a6cfcf;
  border-radius: 50%;
  box-shadow: 0 0 11px #a6cfcf66;
}

:is(.rf-portaal, .rf-overlay) .rf-ai-overzicht {
  padding: 23px 23px 18px;
  border-radius: 13px;
  border: 1px solid var(--rf-line);
  background: var(--rf-paneel);
  display: flex;
  flex-direction: column;
}
:is(.rf-portaal, .rf-overlay) .rf-kaarttitel {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.2px;
  margin: 0;
}
:is(.rf-portaal, .rf-overlay) .rf-ai-overzicht > p {
  font-size: 11px;
  color: var(--rf-muted);
  line-height: 1.6;
  margin: 7px 0 16px;
}
:is(.rf-portaal, .rf-overlay) .rf-ai-feit {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 0;
  border-top: 1px solid #f0f1f5;
  font-size: 11px;
  color: #4f5562;
}
:is(.rf-portaal, .rf-overlay) .rf-ai-feit > span:first-child {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  background: #f4f3fb;
  border-radius: 7px;
  color: #8b7eac;
  flex-shrink: 0;
}
:is(.rf-portaal, .rf-overlay) .rf-ai-feit .rf-icoon {
  width: 14px;
  height: 14px;
}
:is(.rf-portaal, .rf-overlay) .rf-ai-feit strong {
  color: #242a37;
  font-weight: 600;
}
:is(.rf-portaal, .rf-overlay) .rf-ai-feit .rf-tijd {
  font-size: 9px;
  color: #979ba6;
  margin-left: auto;
}

/* --- Cijferkaarten -------------------------------------------------------- */

:is(.rf-portaal, .rf-overlay) .rf-cijfers-raster {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 20px 0 26px;
}
:is(.rf-portaal, .rf-overlay) .rf-stat {
  background: var(--rf-paneel);
  border: 1px solid var(--rf-line);
  border-radius: 11px;
  padding: 17px 19px;
}
:is(.rf-portaal, .rf-overlay) .rf-stat-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10px;
  color: #818692;
}
:is(.rf-portaal, .rf-overlay) .rf-stat-label .rf-icoon {
  width: 15px;
  height: 15px;
  color: #a3a8b4;
}
:is(.rf-portaal, .rf-overlay) .rf-stat-waarde {
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -1px;
  line-height: 1.4;
  margin-top: 5px;
}
:is(.rf-portaal, .rf-overlay) .rf-stat-noot {
  font-size: 9px;
  color: #9499a4;
  margin-top: 2px;
}
:is(.rf-portaal, .rf-overlay) .rf-stat-noot.rf-positief {
  color: #60927e;
}

/* --- Panelen -------------------------------------------------------------- */

:is(.rf-portaal, .rf-overlay) .rf-onderraster {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(270px, 1fr);
  gap: 20px;
}
:is(.rf-portaal, .rf-overlay) .rf-paneel {
  background: var(--rf-paneel);
  border: 1px solid var(--rf-line);
  border-radius: 12px;
  overflow: hidden;
}
:is(.rf-portaal, .rf-overlay) .rf-paneel-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 22px;
  border-bottom: 1px solid var(--rf-haarlijn);
}
:is(.rf-portaal, .rf-overlay) .rf-paneel-kop h2,
:is(.rf-portaal, .rf-overlay) .rf-paneel-kop h3 {
  font-size: 13px;
  font-weight: 600;
  margin: 0;
}
:is(.rf-portaal, .rf-overlay) .rf-paneel-kop p {
  font-size: 11px;
  color: var(--rf-muted);
  margin: 5px 0 0;
}
:is(.rf-portaal, .rf-overlay) .rf-paneel-body {
  padding: 23px;
}
:is(.rf-portaal, .rf-overlay) .rf-paneel-voet {
  padding: 13px 21px;
  border-top: 1px solid var(--rf-haarlijn);
}

:is(.rf-portaal, .rf-overlay) .rf-gesprekrij {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) 116px 54px 13px;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--rf-haarlijn);
  background: var(--rf-paneel);
  padding: 15px 22px;
  text-align: left;
  transition: background 0.15s;
}
:is(.rf-portaal, .rf-overlay) .rf-gesprekrij:last-child {
  border-bottom: 0;
}
:is(.rf-portaal, .rf-overlay) .rf-gesprekrij:hover {
  background: var(--rf-rij-hover);
}
:is(.rf-portaal, .rf-overlay) .rf-gesprekrij strong {
  display: block;
  font-size: 11px;
  font-weight: 550;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:is(.rf-portaal, .rf-overlay) .rf-gesprekrij .rf-sub {
  font-size: 10px;
  color: #9397a1;
  margin-top: 4px;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:is(.rf-portaal, .rf-overlay) .rf-gesprekrij .rf-tijd {
  font-size: 10px;
  color: #8b909c;
}
:is(.rf-portaal, .rf-overlay) .rf-gesprekrij > .rf-icoon {
  width: 13px;
  height: 13px;
  color: #a4a8b2;
}

:is(.rf-portaal, .rf-overlay) .rf-taakrij {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 17px 21px;
  border-bottom: 1px solid var(--rf-haarlijn);
}
:is(.rf-portaal, .rf-overlay) .rf-taakrij:last-child {
  border: 0;
}
:is(.rf-portaal, .rf-overlay) .rf-taakrij strong {
  display: block;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
}
:is(.rf-portaal, .rf-overlay) .rf-taakrij small {
  display: block;
  color: #9196a2;
  margin-top: 5px;
  font-size: 10px;
}
:is(.rf-portaal, .rf-overlay) .rf-taakrij .rf-tag {
  font-size: 9px;
  color: #a07750;
  white-space: nowrap;
  margin-left: auto;
  padding-top: 3px;
}

/* --- Tabs, chips, leegte -------------------------------------------------- */

:is(.rf-portaal, .rf-overlay) .rf-tabs {
  display: flex;
  gap: 23px;
  border-bottom: 1px solid #e0e3e9;
  margin-bottom: 23px;
  overflow: auto;
}
:is(.rf-portaal, .rf-overlay) .rf-tab {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0 1px 13px;
  color: #8a8f9a;
  font-size: 12px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
:is(.rf-portaal, .rf-overlay) .rf-tab.rf-actief {
  color: #1c202a;
  border-bottom-color: #1c202a;
  font-weight: 600;
}
:is(.rf-portaal, .rf-overlay) .rf-tab span {
  font-size: 9px;
  margin-left: 5px;
  background: #e9ebf0;
  padding: 2px 5px;
  border-radius: 4px;
}

:is(.rf-portaal, .rf-overlay) .rf-chips {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
:is(.rf-portaal, .rf-overlay) .rf-chip {
  background: var(--rf-paneel);
  border: 1px solid var(--rf-line);
  font-size: 10px;
  padding: 8px 11px;
  color: #808591;
  border-radius: 7px;
}
:is(.rf-portaal, .rf-overlay) .rf-chip.rf-actief {
  background: #252932;
  color: var(--rf-op-donker);
  border-color: #252932;
}

/* DE LUCHT ROND EEN LEGE STAAT, en waarom die kleiner is dan hij was.
   Hier stond 65px boven en onder. Dat is ruim voor het geval waar deze component
   voor bedacht is: één lege staat die een heel scherm vult. Maar hij staat op 36
   plekken in het portaal, en op een aantal daarvan staan er meerdere onder
   elkaar: het boek zet er een per dag neer, Vandaag drie. Twee lege dagen naast
   elkaar werden zo twee panelen van 306 pixels voor 76 pixels tekst, en dan is
   tweederde van het scherm niets (Rodin, 17 september 2026: "dit zie ik op
   meerdere plekken").
   Gemeten op /reserveringen met twee lege dagen: 65px gaf een paneel van 306,
   44px gaf 264, 36px geeft 248 en 28px gaf 232. 36 is gekozen omdat het bijna de
   helft van de leegte weghaalt en een lege staat die in zijn eentje op een scherm
   staat er nog steeds rustig bij zet. */
:is(.rf-portaal, .rf-overlay) .rf-leegte {
  padding: 36px 30px;
  text-align: center;
  color: #8e94a1;
}
:is(.rf-portaal, .rf-overlay) .rf-leegte > .rf-icoon {
  width: 31px;
  height: 31px;
  /* Zelf centreren, en niet op de text-align van de leegte vertrouwen: de
     preflight van Tailwind (globals.css, geldt voor de hele app) zet elke svg op
     display:block, en dan plakt dit icoon tegen de linkerrand terwijl de tekst
     eronder netjes in het midden staat. */
  margin: 0 auto 10px;
  color: #a8aebc;
}
:is(.rf-portaal, .rf-overlay) .rf-leegte h3 {
  color: #525966;
  font-size: 15px;
  font-weight: 500;
  margin: 8px;
}
/* De tweede lege dag en verder in het boek: geen kop en geen knop, dus ook niet
   de lucht van een heel blok. Eén regel, met dezelfde marge links en rechts zodat
   hij onder de kop van het paneel uitlijnt. Zie eersteLegeDag in
   app/(app)/reserveringen/boek-regels.ts. */
:is(.rf-portaal, .rf-overlay) .rf-leegte.rf-leegte-kort {
  padding: 16px 30px;
  font-size: 13px;
}
:is(.rf-portaal, .rf-overlay) .rf-leegte p {
  font-size: 12px;
  line-height: 1.7;
  margin: 0;
}

/* --- Subnav --------------------------------------------------------------- */

:is(.rf-portaal, .rf-overlay) .rf-subnav {
  display: flex;
  flex-direction: column;
  align-self: start;
  padding-right: 20px;
  border-right: 1px solid #e1e4eb;
  gap: 4px;
}
:is(.rf-portaal, .rf-overlay) .rf-subnav a {
  font-size: 12px;
  color: #8e94a0;
  padding: 11px 12px;
  border-radius: 7px;
  display: flex;
  gap: 8px;
  align-items: center;
}
:is(.rf-portaal, .rf-overlay) .rf-subnav a.rf-actief {
  background: #e9ecf2;
  color: #292f3d;
  font-weight: 550;
}
:is(.rf-portaal, .rf-overlay) .rf-subnav a:hover {
  color: #292f3d;
}
:is(.rf-portaal, .rf-overlay) .rf-subnav .rf-eyebrow {
  margin: 20px 12px 8px;
  font-size: 8px;
  color: #a0a5b0;
  letter-spacing: 1.3px;
}
:is(.rf-portaal, .rf-overlay) .rf-subnav .rf-icoon {
  width: 14px;
  height: 14px;
}

/* --- Schakelaar ----------------------------------------------------------- */

:is(.rf-portaal, .rf-overlay) .rf-schakelaar {
  width: 32px;
  height: 19px;
  border: 0;
  background: #d7dbe3;
  border-radius: 20px;
  padding: 3px;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  transition: background 0.15s;
}
:is(.rf-portaal, .rf-overlay) .rf-schakelaar::before {
  content: "";
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--rf-paneel);
  box-shadow: 0 1px 3px #0002;
  transition: transform 0.15s;
}
:is(.rf-portaal, .rf-overlay) .rf-schakelaar.rf-aan {
  background: #232b38;
}
:is(.rf-portaal, .rf-overlay) .rf-schakelaar.rf-aan::before {
  transform: translateX(13px);
}

/* --- Modal, drawer, toast ------------------------------------------------- */

/* Het venster, de lade en de toast hangen aan de body (een portal, zie
   _stijl/modal.tsx) en staan dus buiten .rf-portaal. Ze zetten hun eigen
   variabelen, de letter erbij: ze erven niets van .rf-portaal, want ze hangen er
   niet onder.
   De bouwstenen hierboven (knop, badge, avatar, rij) gelden binnen allebei de
   wortels: daarom staat overal :is(.rf-portaal, .rf-overlay) en niet alleen de
   eerste. Een venster met een knop die er anders uitziet dan dezelfde knop op de
   pagina eronder is precies wat een stijllaag hoort te voorkomen. */
.rf-overlay,
.rf-toast {
  --rf-font: "RecruFone DM Sans", ui-sans-serif, system-ui, sans-serif;
  --rf-ink: #15171c;
  --rf-muted: #72767f;
  --rf-line: #e7e8ed;
  --rf-canvas: #f5f6f8;
  /* Dezelfde vlakken als op de wortel hierboven: een venster staat in de body
   * en erft dus niets van .rf-portaal. */
  /* De vlakken, de haarlijnen en de zijbalk als variabelen, met precies de
   * waarde die hier tot 11 september 2026 als hex stond. Ze staan er sinds
   * RestoFone dezelfde schil draagt (public/restofone/portaal-tokens.css): dat
   * bestand zet ze om en raakt geen enkele regel hieronder aan. RecruFone
   * verandert er niets van, want elke variabele heeft zijn oude waarde.
   *
   * Alleen wat écht per merk verschilt. De tientallen grijstinten in de
   * schermen zelf blijven staan waar ze staan; die zet dat bestand met een
   * regel om, want er een variabele van maken zou dit blok langer maken dan de
   * stylesheet zelf. */
  --rf-paneel: #fff;
  --rf-op-donker: #fff;
  --rf-haarlijn: #f0f1f4;
  --rf-haarlijn-zacht: #eef0f3;
  --rf-hover: #eef0f5;
  --rf-rij-hover: #f9fafc;
}
.rf-overlay {
  position: fixed;
  inset: 0;
  background: #11172155;
  backdrop-filter: blur(4px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: rf-verschijn 0.16s ease-out;
  font-family: var(--rf-font);
  color: #15171c;
  font-size: 14px;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
.rf-overlay.rf-lade-overlay {
  padding: 0;
  justify-content: flex-end;
}
.rf-overlay .rf-modal {
  width: 520px;
  max-width: 100%;
  max-height: calc(100dvh - 48px);
  overflow: auto;
  background: var(--rf-paneel);
  border-radius: 16px;
  box-shadow: 0 20px 100px #0003;
}
.rf-overlay .rf-modal-kop {
  padding: 23px 25px 18px;
  border-bottom: 1px solid #e7e8ed;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.rf-overlay .rf-modal-kop h2 {
  font-size: 19px;
  font-weight: 550;
  letter-spacing: -0.5px;
  margin: 0;
}
.rf-overlay .rf-modal-body {
  padding: 24px 25px;
}
.rf-overlay .rf-modal-body p {
  font-size: 12px;
  color: #7d8390;
  line-height: 1.8;
}
.rf-overlay .rf-modal-voet {
  padding: 18px 25px;
  border-top: 1px solid #e7e8ed;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.rf-overlay .rf-lade {
  width: 600px;
  max-width: 100%;
  height: 100dvh;
  background: #f5f6f8;
  overflow: auto;
  box-shadow: -15px 0 80px #0002;
  animation: rf-schuif 0.23s ease-out;
}
.rf-overlay .rf-lade-kop {
  background: var(--rf-paneel);
  padding: 23px 28px;
  border-bottom: 1px solid #e7e8ed;
}
.rf-overlay .rf-lade-body {
  padding: 23px 28px;
}

.rf-toast {
  position: fixed;
  left: 50%;
  bottom: 27px;
  transform: translate(-50%, 20px);
  background: #252b37;
  color: var(--rf-op-donker);
  padding: 13px 20px;
  border-radius: 9px;
  box-shadow: 0 10px 35px #0002;
  z-index: 200;
  font-size: 12px;
  font-family: var(--rf-font);
  opacity: 0;
  pointer-events: none;
  max-width: calc(100vw - 30px);
  transition: 0.2s;
}
.rf-toast.rf-zichtbaar {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* GECENTREERD OP DE WERKRUIMTE, NIET OP HET VENSTER. De toast hangt aan de body
   (een portal) en stond dus midden op het scherm, wat met een zijbalk van 238px
   ernaast zichtbaar links van het midden van de pagina uitkomt. De helft van de
   zijbalk erbij zet hem boven de kolom waar je net iets deed. De waarde staat
   hier nog een keer omdat --rf-zijbalk op .rf-portaal woont en de toast daar
   buiten hangt; de grenzen zijn dezelfde als in "Breedtes" hieronder. */
@media (min-width: 901px) {
  .rf-toast {
    --rf-zijbalk: 238px;
    left: calc(50% + var(--rf-zijbalk) / 2);
  }
}
@media (min-width: 901px) and (max-width: 1280px) {
  .rf-toast {
    --rf-zijbalk: 213px;
  }
}

@keyframes rf-verschijn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes rf-schuif {
  from {
    transform: translateX(30px);
    opacity: 0.8;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.rf-overlay .rf-modal.rf-breed {
  width: 640px;
}

/* --- De zwevende belknop -------------------------------------------------- */

/* De houder staat in app/(app)/webphone/floating.tsx en hangt buiten de schil,
   dus deze twee klassen zijn niet gescoped. Ze staan alleen op de knop van dit
   merk; Bellen houdt de klassen die hij had. */
/* Op een telefoon zweeft het paneel boven de onderbalk. Die balk is 67px hoog
   plus de veilige zone van het toestel, en de belknop erin steekt er nog 13px
   bovenuit; 14px lucht daarboven maakt 94. Zie de mediaquery bij .rf-onderbalk,
   waar die maten worden opgeteld. */
.rf-webphone {
  bottom: calc(94px + env(safe-area-inset-bottom));
  right: 18px;
}
.rf-belknop {
  box-shadow: 0 7px 22px #17213924;
  background: #242a35;
  /* De knop hangt buiten .rf-portaal en .rf-overlay, waar --rf-op-donker bestaat.
     Zonder terugval erfde het icoon de donkere tekstkleur van de pagina. */
  color: var(--rf-op-donker, #fff);
  width: 45px;
  height: 45px;
  border-radius: 13px;
  border: 1px solid #ffffff30;
  display: none;
  place-items: center;
}
.rf-belknop:hover {
  background: #454b5a;
}
.rf-belknop.rf-in-gesprek {
  background: #2f6f57;
}
/* Boven de grens waar de onderbalk verdwijnt neemt de zwevende knop het over. */
@media (min-width: 901px) {
  /* De knop zweeft 25px boven de onderrand en is 49px hoog. Zonder ruimte onderaan
     valt hij over de laatste knoppen van een pagina (Maak voorstel, Zet op de
     opvolglijst). 25 + 49 + 22px lucht; hangt aan de landmark van de schil, net
     als de onderruimte op een telefoon verderop. */
  :is(.rf-portaal, .rf-overlay) .rf-shell > main {
    padding-bottom: 96px;
  }
  .rf-webphone {
    bottom: 25px;
    right: 28px;
  }
  .rf-belknop {
    display: grid;
    width: 49px;
    height: 49px;
    border-radius: 15px;
  }
}

/* --- Het belpaneel: wie wil je bellen? ------------------------------------ */

/* Het paneel hangt onder .rf-webphone hierboven, dus buiten de schil, en draagt
   zelf .rf-overlay. Dat is met opzet: elke bouwsteen van dit portaal (de rij, de
   avatar, de badge, de tabs, de knop) staat achter :is(.rf-portaal,
   .rf-overlay), en zo ziet een rij in dit paneel er precies zo uit als een rij
   in de gesprekkenlijst zonder dat er een tweede uitvoering van in dit bestand
   komt te staan. Wat .rf-overlay verder doet, het venster vullen met een donkere
   waas en de inhoud centreren, is hier niet de bedoeling; dat zet .rf-kiezer
   hieronder weer uit.

   Het paneel zelf staat in app/(app)/webphone/floating.tsx, de inhoud in
   webphone/recrufone-kiezer.tsx. Bellen houdt zijn eigen paneel met het
   cijferblok en raakt geen van deze regels. */
.rf-overlay.rf-kiezer {
  position: static;
  inset: auto;
  display: block;
  z-index: auto;
  padding: 0;
  background: var(--rf-paneel);
  backdrop-filter: none;
  animation: none;
  width: 340px;
  max-width: 100%;
  border: 1px solid var(--rf-line);
  border-radius: 16px;
  box-shadow: 0 16px 55px #1721391f;
  overflow: hidden;
}

/* Onder de grens waar de onderbalk staat doet het paneel wat de lade doet: de
   breedte vullen. 36px is twee keer de 18px die .rf-webphone daar rechts
   aanhoudt, dus links en rechts evenveel lucht. */
@media (max-width: 900px) {
  .rf-overlay.rf-kiezer {
    width: calc(100vw - 36px);
  }
}

/* De ruimte om een gesprek, een melding en het cijferblok van Bellen heen. De
   kiezer zet zijn eigen ruimte, want zijn rijen lopen van rand tot rand. */
.rf-overlay.rf-kiezer .rf-kiezer-marge {
  padding: 16px;
}

.rf-overlay.rf-kiezer .rf-kiezer-zoek {
  margin: 13px 14px 11px;
  height: 36px;
}
/* Het zoekveld van de bovenbalk is een vast breed vakje naast andere dingen;
   hier is het de hele regel. De padding komt uit `.rf-overlay input` en die
   hoort binnen een veld met een eigen rand niet mee te tellen. */
.rf-overlay.rf-kiezer .rf-kiezer-zoek input {
  width: 100%;
  max-width: none;
  padding: 0;
  font-size: 13px;
}
.rf-overlay.rf-kiezer .rf-kiezer-wis {
  border: 0;
  background: none;
  padding: 0;
  display: grid;
  place-items: center;
  color: #a2a7b3;
  flex-shrink: 0;
}
.rf-overlay.rf-kiezer .rf-kiezer-wis:hover {
  color: var(--rf-ink);
}
.rf-overlay.rf-kiezer .rf-kiezer-wis .rf-icoon {
  width: 14px;
  height: 14px;
}

.rf-overlay.rf-kiezer .rf-kiezer-tabs {
  gap: 18px;
  margin: 0 14px;
}
.rf-overlay.rf-kiezer .rf-kiezer-tabs .rf-tab {
  padding: 0 1px 9px;
}

/* De lijst schuift zelf en het paneel niet: anders zou de belknop onderin
   wegzakken zodra er acht rijen staan. */
.rf-overlay.rf-kiezer .rf-kiezer-lijst {
  max-height: 292px;
  overflow-y: auto;
}

/* De rij uit de gesprekkenlijst, maar dan in een paneel van 340 pixels: twee
   kolommen in plaats van vier, en de badge of de tijd rechts. */
.rf-overlay.rf-kiezer .rf-kiezer-rij {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  padding: 9px 14px;
  cursor: pointer;
}
.rf-overlay.rf-kiezer .rf-kiezer-rij:disabled {
  cursor: default;
  opacity: 0.55;
}
.rf-overlay.rf-kiezer .rf-kiezer-eind {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}
.rf-overlay.rf-kiezer .rf-kiezer-richting {
  width: 13px;
  height: 13px;
  color: #a4a8b2;
}

/* Een lege lijst in een paneel van 340 pixels: dezelfde woorden, minder lucht. */
.rf-overlay.rf-kiezer .rf-leegte {
  padding: 30px 22px;
}
.rf-overlay.rf-kiezer .rf-leegte h3 {
  font-size: 13px;
}
.rf-overlay.rf-kiezer .rf-leegte p {
  font-size: 11px;
}

.rf-overlay.rf-kiezer .rf-kiezer-voet {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 11px 14px;
  border-top: 1px solid var(--rf-haarlijn);
  background: #fbfbfc;
}
.rf-overlay.rf-kiezer .rf-kiezer-bel {
  width: 100%;
}
.rf-overlay.rf-kiezer .rf-kiezer-voetrij {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.rf-overlay.rf-kiezer .rf-kiezer-afzender {
  min-width: 0;
  justify-content: flex-end;
}
.rf-overlay.rf-kiezer .rf-kiezer-melding {
  margin: 0;
  font-size: 11px;
  color: var(--rf-muted);
}
.rf-overlay.rf-kiezer .rf-kiezer-bezig {
  padding: 30px 14px;
  text-align: center;
}

/* Het cijferblok, achter de knop Toetsen. Tijdens een gesprek staat het er voor
   een keuzemenu; ervoor om een nummer in te tikken dat nergens in je lijsten
   staat. */
.rf-overlay.rf-kiezer .rf-kiezer-toetsen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  padding: 2px 14px 12px;
}
.rf-overlay.rf-kiezer .rf-toets {
  background: var(--rf-paneel);
  border: 1px solid var(--rf-line);
  border-radius: 10px;
  padding: 8px 0;
  font: inherit;
  font-size: 16px;
  color: var(--rf-ink);
  transition: background 0.15s;
}
.rf-overlay.rf-kiezer .rf-toets:hover {
  background: #f4f5f8;
}
.rf-overlay.rf-kiezer .rf-toets:disabled {
  opacity: 0.4;
}
/* De wisknop is de dertiende toets en hoort rechtsonder, niet linksonder. */
.rf-overlay.rf-kiezer .rf-toets-wis {
  grid-column: 3;
  color: var(--rf-muted);
}

/* --- De onderbalk en het menu op een telefoon ----------------------------- */

:is(.rf-portaal, .rf-overlay) .rf-schaduw {
  display: none;
}
/* De onderbalk is de tabbalk van de RecruFone-app, op het web: wit met een
   haarlijn erboven, vijf gelijke vakjes, het middelste de belknop, en een puntje
   onder het vakje waar je staat. De kleuren komen letterlijk uit de tab-tokens
   van dat merk in ios/Bellen/Config/MerkStijl.swift; de maten uit de balk in
   Features/Recruitment/RecruFoneTabView.swift.

   Waarom hij licht is en niet donker zoals in de bouwbrief, en waarom er vier
   begrippen op staan en niet vijf: zie de kop van de Onderbalk in
   app/(app)/_components/recrufone/schil.tsx.

   Boven 900px staat hij er helemaal niet, want daar is een zijbalk; vandaar
   display:none hier en display:grid in de mediaquery hieronder. */
:is(.rf-portaal, .rf-overlay) .rf-onderbalk {
  --rf-tab-rustig: #9a9fab;
  --rf-tab-actief: #1d2330;
  --rf-tab-lijn: #e6e9f0;

  display: none;
}
/* De ruimte boven en onder staat op het vakje en niet op de balk, zodat het
   aanraakgebied van een tab de volle hoogte van de balk beslaat. Anders zijn de
   bovenste negen en de onderste zeven pixels dood, en die pak je met een duim
   juist het eerst. */
:is(.rf-portaal, .rf-overlay) .rf-onderbalk-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 9px 2px 7px;
  min-width: 0;
  border: 0;
  background: none;
  color: var(--rf-tab-rustig);
  font-size: 11px;
  font-weight: 450;
  line-height: 13px;
}
:is(.rf-portaal, .rf-overlay) .rf-onderbalk-tab.rf-actief {
  color: var(--rf-tab-actief);
  font-weight: 550;
}
/* De actieve tab krijgt een iets dikkere lijn en geen vulling. Dat is wat de app
   doet (het icoon gaat van regular naar semibold) en wat het concept doet
   (stroke-width 2.15). De tekeningen dragen 1.8 als attribuut op de svg, en een
   css-regel wint daarvan. */
:is(.rf-portaal, .rf-overlay) .rf-onderbalk-tab.rf-actief .rf-icoon {
  stroke-width: 2.15;
}
/* Het vakje om het icoon bestaat alleen zodat de teller er een hoek van kan
   pakken; zonder die vaste maat hangt hij aan de breedte van het hele vak. */
:is(.rf-portaal, .rf-overlay) .rf-onderbalk-vak {
  position: relative;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
}
:is(.rf-portaal, .rf-overlay) .rf-onderbalk-vak .rf-icoon {
  width: 23px;
  height: 23px;
}
:is(.rf-portaal, .rf-overlay) .rf-onderbalk-woord {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Het puntje onder de actieve tab. Het staat onder alle vijf de vakjes en is
   alleen gekleurd waar je staat: zou het er alleen bij de actieve tab zijn, dan
   springt de hele rij drie pixels omhoog zodra je van scherm wisselt. */
:is(.rf-portaal, .rf-overlay) .rf-onderbalk-stip {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: transparent;
}
:is(.rf-portaal, .rf-overlay) .rf-onderbalk-tab.rf-actief .rf-onderbalk-stip {
  background: var(--rf-tab-actief);
}
/* De teller zit op het icoon en niet achter het woord zoals in de zijbalk: op
   een vak van 75 pixels is naast "Gesprekken" geen ruimte. De witte rand eromheen
   is de knip die hem van het icoon losmaakt. */
:is(.rf-portaal, .rf-overlay) .rf-onderbalk-teller {
  position: absolute;
  top: -4px;
  left: 13px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: 8px;
  border: 2px solid var(--rf-white);
  background: var(--rf-tab-actief);
  color: var(--rf-white);
  font-size: 9px;
  font-weight: 600;
  line-height: 1;
  display: grid;
  place-items: center;
}
/* De belknop. Rond, in de inkt, en duidelijk verhoogd: hij opent de webphone en
   is dus geen tab, en dat hoort te zien te zijn voordat je het woord eronder
   leest. De negatieve bovenmarge is de hoogte van de knop min die van een
   icoonvakje (48 - 26), zodat zijn onderrand gelijk ligt met de vier iconen
   ernaast en zijn bovenkant boven de balk uitsteekt. De witte ring in de schaduw
   knipt hem los van de haarlijn waar hij overheen valt. */
:is(.rf-portaal, .rf-overlay) .rf-onderbalk-bel {
  color: var(--rf-tab-actief);
}
:is(.rf-portaal, .rf-overlay) .rf-onderbalk-ring {
  width: 48px;
  height: 48px;
  margin-top: -22px;
  border-radius: 50%;
  background: #242a35;
  color: var(--rf-white);
  display: grid;
  place-items: center;
  box-shadow:
    0 0 0 4px var(--rf-white),
    0 8px 20px #17213933;
}
:is(.rf-portaal, .rf-overlay) .rf-onderbalk-bel:hover .rf-onderbalk-ring {
  background: #454b5a;
}
:is(.rf-portaal, .rf-overlay) .rf-onderbalk-ring .rf-icoon {
  width: 22px;
  height: 22px;
}

@media (max-width: 900px) {
  :is(.rf-portaal, .rf-overlay) .rf-onderbalk {
    display: grid;
    /* minmax(0, 1fr) en niet 1fr: `1fr` is `minmax(auto, 1fr)`, en dan mag een
       vakje niet smaller worden dan zijn eigen woord. Op 375 pixels werd de balk
       daardoor 591 breed, en met een vaste balk die breder is dan het scherm
       schuift het hele portaal opzij. Gevonden bij fase B; de balk zelf is van
       fase A. */
    grid-template-columns: repeat(5, minmax(0, 1fr));
    /* start en niet end: de belknop hangt met een negatieve bovenmarge boven de
       balk uit, en met `end` zou de grid die marge wegrekenen tegen de onderkant
       en de knop weer platleggen. */
    align-items: start;
    position: fixed;
    inset: auto 0 0 0;
    z-index: 45;
    /* 9 + 26 + 4 + 13 + 4 + 3 + 7, wat in de browser op 67px uitkomt (de regel
       van het woord meet een fractie meer dan de line-height), plus de veilige
       zone van het toestel. Verandert die som, dan verandert er nog drie dingen
       mee: de onderruimte van .rf-main, de ondermarge van de lade hierboven, en
       de hoogte waarop .rf-webphone en .rf-toast zweven. Die laatste twee tellen
       ook de 13px mee waarmee de belknop boven de balk uitsteekt. */
    padding: 0 4px env(safe-area-inset-bottom);
    background: #ffffffee;
    backdrop-filter: blur(24px);
    border-top: 1px solid var(--rf-tab-lijn);
  }
}

/* Op de smalste telefoons die er nog zijn (320px, een SE van de eerste
   generaties) is een vakje 64 pixels breed, en daar past "Gesprekken" op elf
   punten net niet meer in. Een punt eraf is beter dan een woord met drie
   puntjes erachter. */
@media (max-width: 360px) {
  :is(.rf-portaal, .rf-overlay) .rf-onderbalk-tab {
    padding-left: 0;
    padding-right: 0;
    font-size: 10px;
  }
}

@media print {
  :is(.rf-portaal, .rf-overlay) .rf-onderbalk,
  .rf-webphone {
    display: none;
  }
}

/* --- Formulier ------------------------------------------------------------ */

.rf-overlay .rf-veld {
  display: block;
  margin-bottom: 18px;
}
.rf-overlay .rf-veld > span {
  display: block;
  font-size: 13px;
  font-weight: 550;
  margin-bottom: 8px;
}
.rf-overlay .rf-hulptekst {
  font-size: 11px;
  color: #8b90a0;
  margin: 7px 0 0;
  line-height: 1.7;
}
.rf-overlay .rf-fout {
  font-size: 11px;
  color: #b76859;
  margin-top: 9px;
}
.rf-overlay .rf-keuzelijst {
  border: 1px solid #e0e3ec;
  border-radius: 9px;
  max-height: 190px;
  overflow: auto;
  margin-top: 8px;
}
.rf-overlay .rf-keuzerij {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 0;
  background: var(--rf-paneel);
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--rf-haarlijn);
  font-size: 12px;
}
.rf-overlay .rf-keuzerij:last-child {
  border-bottom: 0;
}
.rf-overlay .rf-keuzerij:hover {
  background: #f7f8fb;
}
.rf-overlay .rf-keuzerij.rf-gekozen {
  background: #f0f2f8;
}
.rf-overlay .rf-keuzerij small {
  display: block;
  color: #9096a1;
  font-size: 10px;
  margin-top: 3px;
}
.rf-overlay .rf-opdrachten {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rf-overlay .rf-opdracht {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border: 1px solid #e0e3ec;
  border-radius: 9px;
  padding: 12px 13px;
  background: var(--rf-paneel);
  text-align: left;
  font-size: 12px;
  width: 100%;
}
.rf-overlay .rf-opdracht:hover {
  background: #f8f9fc;
}
.rf-overlay .rf-opdracht.rf-gekozen {
  border-color: #8b95b3;
  background: #f2f4f9;
}
.rf-overlay .rf-opdracht strong {
  display: block;
  font-weight: 550;
}
.rf-overlay .rf-opdracht small {
  display: block;
  color: #9096a1;
  font-size: 10px;
  margin-top: 5px;
  line-height: 1.7;
}

/* --- De activiteitenlijst ------------------------------------------------- */

:is(.rf-portaal, .rf-overlay) .rf-paneelzweef {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: 330px;
  max-width: calc(100vw - 24px);
  background: var(--rf-paneel);
  border: 1px solid #e7e8ed;
  border-radius: 12px;
  box-shadow: 0 18px 50px #0f172a1f;
  z-index: 60;
  overflow: hidden;
}

/* DE BEL HANGT RECHTS, MAAR NIET HELEMAAL RECHTS.
   Het paneel hangt met `right: 0` aan de knop, en op een breed scherm valt het
   dan netjes onder de bel. Op 375 pixels staat de bel op ongeveer 300, en 330
   pixels naar links vanaf daar komt uit op min 30: de linkerkant van elke regel
   viel buiten beeld ("...handeld · Dennis Kuiper" in plaats van "Zelf
   afgehandeld"). `max-width` hielp daar niets tegen, want het paneel was niet te
   breed maar te ver naar links.

   Op een telefoon hoort dit dus niet aan de knop te hangen maar aan het scherm:
   een strook onder de bovenbalk (62px hoog plus 8px lucht), van rand tot rand,
   met een eigen schuifbalk zodat een lange lijst niet tot voorbij de onderbalk
   doorloopt. De aftrek onderaan is 70px boven plus de onderbalk met lucht. */
@media (max-width: 900px) {
  :is(.rf-portaal, .rf-overlay) .rf-paneelzweef {
    position: fixed;
    top: 70px;
    right: 12px;
    left: 12px;
    width: auto;
    max-width: none;
    max-height: calc(100dvh - 158px - env(safe-area-inset-bottom));
    overflow-y: auto;
  }
}

:is(.rf-portaal, .rf-overlay) .rf-activiteitrij {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 16px;
  border-bottom: 1px solid var(--rf-haarlijn);
  font-size: 11px;
  color: #4f5562;
  width: 100%;
  text-align: left;
  background: var(--rf-paneel);
  border-left: 0;
  border-right: 0;
  border-top: 0;
}
:is(.rf-portaal, .rf-overlay) .rf-activiteitrij:last-child {
  border-bottom: 0;
}
:is(.rf-portaal, .rf-overlay) .rf-activiteitrij:hover {
  background: var(--rf-rij-hover);
}
:is(.rf-portaal, .rf-overlay) .rf-activiteitrij .rf-tijd {
  margin-left: auto;
  font-size: 9px;
  color: #979ba6;
  white-space: nowrap;
}

/* --- Breedtes ------------------------------------------------------------- */

@media (min-width: 1600px) {
  :is(.rf-portaal, .rf-overlay) .rf-main {
    padding: 38px 48px;
  }
  :is(.rf-portaal, .rf-overlay) .rf-topbalk {
    padding: 0 48px;
  }
  :is(.rf-portaal, .rf-overlay) .rf-hero {
    min-height: 242px;
    padding: 30px 33px;
  }
  :is(.rf-portaal, .rf-overlay) .rf-hero h2 {
    font-size: 35px;
  }
  :is(.rf-portaal, .rf-overlay) .rf-hero-beeld {
    right: 0;
    width: 300px;
  }
  :is(.rf-portaal, .rf-overlay) .rf-hero-inhoud {
    max-width: 75%;
  }
}

@media (max-width: 1280px) {
  .rf-portaal {
    --rf-zijbalk: 213px;
  }
  :is(.rf-portaal, .rf-overlay) .rf-zijbalk {
    padding-left: 13px;
    padding-right: 13px;
  }
  :is(.rf-portaal, .rf-overlay) .rf-merk {
    margin-left: 12px;
  }
  :is(.rf-portaal, .rf-overlay) .rf-merk img {
    width: 144px;
  }
  :is(.rf-portaal, .rf-overlay) .rf-main {
    padding: 28px 25px;
  }
  :is(.rf-portaal, .rf-overlay) .rf-topbalk {
    padding: 0 25px;
  }
  :is(.rf-portaal, .rf-overlay) .rf-zoekknop span {
    display: none;
  }
  :is(.rf-portaal, .rf-overlay) .rf-hero-beeld {
    right: -60px;
    opacity: 0.6;
  }
  :is(.rf-portaal, .rf-overlay) .rf-hero-inhoud {
    max-width: 90%;
  }
  :is(.rf-portaal, .rf-overlay) .rf-hero h2 {
    font-size: 29px;
  }
  :is(.rf-portaal, .rf-overlay) .rf-introraster,
  :is(.rf-portaal, .rf-overlay) .rf-onderraster {
    grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr);
  }
  :is(.rf-portaal, .rf-overlay) .rf-gesprekrij {
    grid-template-columns: minmax(140px, 1fr) 94px 13px;
    padding: 14px 17px;
  }
  :is(.rf-portaal, .rf-overlay) .rf-gesprekrij > .rf-tijd {
    display: none;
  }
  :is(.rf-portaal, .rf-overlay) .rf-stat {
    padding: 16px;
  }
}

@media (max-width: 1000px) {
  :is(.rf-portaal, .rf-overlay) .rf-introraster,
  :is(.rf-portaal, .rf-overlay) .rf-onderraster {
    grid-template-columns: 1fr;
  }
  :is(.rf-portaal, .rf-overlay) .rf-ai-overzicht {
    display: none;
  }
  :is(.rf-portaal, .rf-overlay) .rf-hero-beeld {
    right: 0;
    opacity: 1;
  }
  :is(.rf-portaal, .rf-overlay) .rf-hero-inhoud {
    max-width: 80%;
  }
  :is(.rf-portaal, .rf-overlay) .rf-cijfers-raster {
    gap: 10px;
  }
  :is(.rf-portaal, .rf-overlay) .rf-stat-label {
    font-size: 9px;
  }
  :is(.rf-portaal, .rf-overlay) .rf-stat-noot {
    font-size: 8px;
  }
  :is(.rf-portaal, .rf-overlay) .rf-stat-waarde {
    font-size: 26px;
  }
  :is(.rf-portaal, .rf-overlay) .rf-gesprekrij {
    grid-template-columns: minmax(160px, 1fr) 116px 55px 15px;
  }
  :is(.rf-portaal, .rf-overlay) .rf-gesprekrij > .rf-tijd {
    display: block;
  }
  :is(.rf-portaal, .rf-overlay) .rf-subnav {
    flex-direction: row;
    border-right: 0;
    border-bottom: 1px solid #e1e4eb;
    padding: 0 0 9px;
    overflow: auto;
  }
  /* Liggend menu: een item is één regel en scrolt weg, hij breekt niet af.
     Zonder dit werd "Betalen en facturen" een blokje van drie regels naast een
     buurman van één, en dan staat er een menu waarvan de helft in de lucht
     hangt. Het menu scrolt toch al horizontaal (overflow hierboven). */
  :is(.rf-portaal, .rf-overlay) .rf-subnav a {
    white-space: nowrap;
    flex: none;
  }
  /* De tussenkopjes staan liggend tússen de items in plaats van erboven, dus
     hoort de marge links en rechts te staan en niet boven. En ze gaan van 8 naar
     10 punten: staand zijn het kopjes bóven een groep, en dan lees je ze aan de
     vorm af; liggend staan ze op dezelfde regel als de items en moet je ze echt
     lezen. Tien punten is ook de maat die de bouwbrief voor een eyebrow noemt. */
  :is(.rf-portaal, .rf-overlay) .rf-subnav .rf-eyebrow {
    margin: 0;
    align-self: center;
    padding: 0 6px;
    white-space: nowrap;
    font-size: 10px;
  }
  :is(.rf-portaal, .rf-overlay) .rf-topgereedschap {
    gap: 10px;
  }
}

/* Onder 900px verdwijnt de zijbalk en neemt de onderbalk het over. Dat is de
   grens uit de bouwbrief; het concept knipte op 760px, maar het portaal heeft
   een onderbalk met zes vakjes en die past daar al vanaf 900px beter dan een
   zijbalk van 213px naast een pagina van 500. */
@media (max-width: 900px) {
  .rf-portaal {
    --rf-zijbalk: 0px;
  }
  :is(.rf-portaal, .rf-overlay) .rf-zijbalk {
    width: 238px;
    transform: translateX(-100%);
    transition: transform 0.2s;
    /* Alleen de veilige zone van het toestel, met een beetje lucht.
       Hier stond 84px extra, ruimte voor de onderbalk. Die ruimte is niet nodig:
       de open lade staat op z-index 71 en de balk op 45, dus de balk ligt eronder
       en niet erover. Wat die 84 pixels wél deden was de lade 894 pixels hoog
       maken op een scherm van 812, zodat je een halve duimveeg moest schuiven om
       bij je eigen accountrij te komen. Nu is dat verschil nog tien pixels. */
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }
  :is(.rf-portaal, .rf-overlay) .rf-zijbalk.rf-open {
    transform: translateX(0);
    z-index: 71;
  }
  :is(.rf-portaal, .rf-overlay) .rf-schaduw.rf-open {
    display: block;
    position: fixed;
    inset: 0;
    background: #11111888;
    z-index: 70;
    border: 0;
    width: 100%;
    height: 100%;
  }
  :is(.rf-portaal, .rf-overlay) .rf-shell {
    margin-left: 0;
  }
  :is(.rf-portaal, .rf-overlay) .rf-topbalk {
    height: 62px;
    padding: 0 19px;
    gap: 8px;
  }
  :is(.rf-portaal, .rf-overlay) .rf-hamburger {
    display: inline-flex;
  }
  :is(.rf-portaal, .rf-overlay) .rf-kruimel {
    gap: 8px;
  }
  :is(.rf-portaal, .rf-overlay) .rf-kruimel > span:first-child,
  :is(.rf-portaal, .rf-overlay) .rf-kruimel > .rf-icoon {
    display: none;
  }
  :is(.rf-portaal, .rf-overlay) .rf-zoekknop kbd {
    display: none;
  }
  :is(.rf-portaal, .rf-overlay) .rf-zoekknop {
    padding: 6px;
  }
  :is(.rf-portaal, .rf-overlay) .rf-topgereedschap {
    gap: 6px;
  }
  /* De pil blijft staan, ook op een telefoon: dit is de knop waarmee je jezelf
     stil zet, en die hoort bereikbaar te zijn juist als je onderweg bent. */
  :is(.rf-portaal, .rf-overlay) .rf-beschikbaarheid {
    font-size: 9px;
    padding: 7px 8px;
  }
  :is(.rf-portaal, .rf-overlay) .rf-main {
    padding: 25px 20px;
  }
  /* Op een telefoon gaat wat rechts naast de kop stond eronder staan.
     De kop is een flexrij met de titel op flex-basis 0, dus een knop met een
     uitlegzin ernaast (de testknop van de AI-collega is er zo een) kneep "Wie ze
     is" tot een kolom van één woord per regel. Wrappen alleen helpt daar niet
     tegen: met basis 0 past de rij altijd. Vandaar de hele breedte voor de
     titel. */
  :is(.rf-portaal, .rf-overlay) .rf-paginakop {
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: 22px;
  }
  :is(.rf-portaal, .rf-overlay) .rf-paginakop > .rf-groei {
    flex-basis: 100%;
  }
  :is(.rf-portaal, .rf-overlay) .rf-paginakop h1 {
    font-size: 26px;
  }
  :is(.rf-portaal, .rf-overlay) .rf-paginakop p {
    font-size: 11px;
    max-width: 270px;
  }
  :is(.rf-portaal, .rf-overlay) .rf-paginakop > .rf-datum {
    display: none;
  }
  :is(.rf-portaal, .rf-overlay) .rf-hero {
    padding: 25px;
    min-height: 232px;
  }
  :is(.rf-portaal, .rf-overlay) .rf-hero-beeld {
    right: -25px;
    width: 220px;
    opacity: 0.55;
  }
  :is(.rf-portaal, .rf-overlay) .rf-hero h2 {
    font-size: 30px;
  }
  :is(.rf-portaal, .rf-overlay) .rf-hero p {
    max-width: 255px;
  }
  :is(.rf-portaal, .rf-overlay) .rf-hero-inhoud {
    max-width: 100%;
  }
  /* Twee knoppen naast elkaar passen niet op 375px; dan gaan ze onder elkaar in
     plaats van dat de tweede half buiten de kaart valt. */
  :is(.rf-portaal, .rf-overlay) .rf-hero-inhoud .rf-rij {
    flex-wrap: wrap;
  }
  :is(.rf-portaal, .rf-overlay) .rf-cijfers-raster {
    grid-template-columns: 1fr 1fr;
    gap: 11px;
    margin-bottom: 24px;
  }
  :is(.rf-portaal, .rf-overlay) .rf-stat {
    padding: 16px 18px;
  }
  :is(.rf-portaal, .rf-overlay) .rf-stat-label {
    font-size: 10px;
  }
  :is(.rf-portaal, .rf-overlay) .rf-stat-noot {
    font-size: 9px;
  }
  :is(.rf-portaal, .rf-overlay) .rf-onderraster {
    gap: 22px;
  }
  :is(.rf-portaal, .rf-overlay) .rf-gesprekrij {
    grid-template-columns: minmax(130px, 1fr) 100px 13px;
    padding: 15px 16px;
  }
  :is(.rf-portaal, .rf-overlay) .rf-gesprekrij > .rf-tijd {
    display: none;
  }
  :is(.rf-portaal, .rf-overlay) .rf-paneel-kop {
    padding: 18px;
  }
  :is(.rf-portaal, .rf-overlay) .rf-tabs {
    gap: 20px;
  }
  :is(.rf-portaal, .rf-overlay) .rf-tab {
    font-size: 11px;
  }
  /* Ruimte voor de onderbalk van het portaal (67px) plus de veilige zone, en
     daarbovenop lucht zodat de laatste rij van een lijst niet tegen de balk
     aanplakt.

     De ruimte hangt aan de landmark van de schil en niet aan .rf-main. Dat is
     opzet: niet elk scherm heeft een .rf-main. De taakdetail van de werklijst
     draagt nog zijn eigen Tailwind-main, en die verdween tot deze ronde met zijn
     laatste 67 pixels onder de balk. De schil tekent <main> altijd, dus daar
     hoort het te staan; .rf-main houdt eronder gewoon zijn eigen 25px uit de
     regel hierboven, samen weer de 96 pixels van hiervoor. */
  :is(.rf-portaal, .rf-overlay) .rf-shell > main {
    padding-bottom: calc(71px + env(safe-area-inset-bottom));
  }
  .rf-overlay {
    padding: 14px;
  }
  .rf-overlay .rf-modal {
    max-height: calc(100dvh - 28px);
  }
  .rf-overlay .rf-modal-kop {
    padding: 19px 21px;
  }
  .rf-overlay .rf-modal-body {
    padding: 21px;
  }
  .rf-overlay .rf-modal-voet {
    padding: 17px 21px;
  }
  .rf-overlay .rf-modal-kop h2 {
    font-size: 18px;
  }
  .rf-toast {
    /* Dezelfde hoogte als het webphone-paneel: de balk, de belknop die eruit
       steekt, en 14px lucht. */
    bottom: calc(94px + env(safe-area-inset-bottom));
    width: max-content;
    max-width: calc(100vw - 36px);
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rf-portaal *,
  .rf-portaal *::before,
  .rf-portaal *::after,
  .rf-overlay,
  .rf-overlay *,
  .rf-toast {
    animation: none !important;
    transition: none !important;
  }
}

/* --- Strook en kolom op Vandaag ------------------------------------------- */

/* De statuszin van het belplan: wat er nú met een beller gebeurt. Stond er op
   het oude Vandaag ook, en hoort dat te blijven doen; alleen de vorm is nieuw. */
:is(.rf-portaal, .rf-overlay) .rf-statusstrook {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 18px;
  background: var(--rf-paneel);
  border: 1px solid var(--rf-line);
  border-radius: 10px;
  font-size: 11px;
  color: #7f8695;
  margin-bottom: 20px;
}
:is(.rf-portaal, .rf-overlay) .rf-statusstrook strong {
  font-weight: 550;
  color: #4b5564;
}

/* Twee panelen onder elkaar in de rechterkolom. */
:is(.rf-portaal, .rf-overlay) .rf-kolom {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

/* ==========================================================================
   FASE B: Gesprekken en de AI-collega
   ========================================================================== */

/* --- De werkbalk boven de tabel ------------------------------------------- */

/* De filterchips links, het zoekveld rechts. Samen zijn ze één vraag ("welke
   gesprekken wil ik zien"), dus staan ze op één regel; onder 720px vallen ze
   onder elkaar en wordt het zoekveld zo breed als de kolom. */
:is(.rf-portaal, .rf-overlay) .rf-werkbalk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
:is(.rf-portaal, .rf-overlay) .rf-zoekveld {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--rf-paneel);
  border: 1px solid var(--rf-line);
  border-radius: 8px;
  padding: 0 11px;
  height: 33px;
  color: #8e94a1;
}
:is(.rf-portaal, .rf-overlay) .rf-zoekveld .rf-icoon {
  width: 15px;
  height: 15px;
}
:is(.rf-portaal, .rf-overlay) .rf-zoekveld input {
  border: 0;
  outline: 0;
  background: none;
  font: inherit;
  font-size: 12px;
  color: var(--rf-ink);
  width: 190px;
  max-width: 46vw;
  height: 100%;
}
:is(.rf-portaal, .rf-overlay) .rf-zoekveld input::placeholder {
  color: #a2a7b3;
}

/* --- De gesprekkentabel ---------------------------------------------------- */

/* Eigen schuifbalk om de tabel heen, zodat de pagina zelf nooit horizontaal
   schuift: vijf kolommen met een naam erin passen op 375px niet, en dan hoort
   de tabel te schuiven en niet het scherm. */
:is(.rf-portaal, .rf-overlay) .rf-tabelscroll {
  overflow-x: auto;
}
:is(.rf-portaal, .rf-overlay) .rf-tabel {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  min-width: 620px;
}
:is(.rf-portaal, .rf-overlay) .rf-tabel th {
  text-align: left;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #9095a3;
  padding: 13px 16px;
  border-bottom: 1px solid var(--rf-line);
  white-space: nowrap;
}
:is(.rf-portaal, .rf-overlay) .rf-tabel td {
  padding: 11px 16px;
  border-bottom: 1px solid var(--rf-haarlijn-zacht);
  color: #5c626e;
  vertical-align: middle;
  white-space: nowrap;
}
:is(.rf-portaal, .rf-overlay) .rf-tabel tr:last-child td {
  border-bottom: 0;
}
:is(.rf-portaal, .rf-overlay) .rf-tabel tr:hover td {
  background: #fafbfc;
}
:is(.rf-portaal, .rf-overlay) .rf-tabel td:first-child {
  padding-left: 12px;
  white-space: normal;
}
:is(.rf-portaal, .rf-overlay) .rf-persoonknop {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: 0;
  padding: 2px 4px;
  text-align: left;
  border-radius: 8px;
  min-width: 0;
}
:is(.rf-portaal, .rf-overlay) .rf-persoonknop strong {
  display: block;
  font-size: 12px;
  font-weight: 550;
  color: var(--rf-ink);
}
:is(.rf-portaal, .rf-overlay) .rf-persoonknop small {
  display: block;
  font-size: 11px;
  color: #8b909c;
  margin-top: 1px;
}
:is(.rf-portaal, .rf-overlay) .rf-tabelvoet {
  padding: 13px 18px;
  font-size: 11px;
  color: #8e94a1;
  border-top: 1px solid var(--rf-line);
}

/* --- Eén gesprek: in de lade en op zijn eigen pagina ----------------------- */

/* De verslagkaart, de feitenlijst, de volgende stap, het transcript en de
   actieknoppen staan onder allebei de wortels en niet alleen onder .rf-overlay.
   Hetzelfde gesprek staat namelijk op twee plekken: als lade naast de lijst, en
   als volledige pagina achter "Open als pagina" (recrufone-gesprek.tsx). Dat is
   dezelfde inhoud in dezelfde vorm; alleen de ruimte eromheen verschilt, en die
   staat verderop bij .rf-gesprekkop. */

.rf-overlay .rf-lade-persoon {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 15px;
}
.rf-overlay .rf-lade-persoon h2 {
  margin: 0;
  font-size: 19px;
  font-weight: 550;
  letter-spacing: -0.4px;
}
.rf-overlay .rf-lade-persoon p {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--rf-muted);
}
.rf-overlay .rf-lade-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 16px;
  font-size: 11px;
  color: #868c99;
}
.rf-overlay .rf-lade-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.rf-overlay .rf-lade-meta .rf-icoon {
  width: 14px;
  height: 14px;
}
:is(.rf-portaal, .rf-overlay) .rf-verslagkaart {
  background: var(--rf-paneel);
  border: 1px solid var(--rf-line);
  border-radius: 12px;
  padding: 20px 22px;
  margin-bottom: 16px;
}
:is(.rf-portaal, .rf-overlay) .rf-verslagkaart h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
}
:is(.rf-portaal, .rf-overlay) .rf-verslagkaart > p {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.8;
  color: #414957;
}
:is(.rf-portaal, .rf-overlay) .rf-verslagvelden {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 20px;
  margin: 20px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--rf-haarlijn-zacht);
}
:is(.rf-portaal, .rf-overlay) .rf-verslagvelden dt {
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: #9298a4;
}
:is(.rf-portaal, .rf-overlay) .rf-verslagvelden dd {
  margin: 4px 0 0;
  font-size: 12px;
  font-weight: 550;
  color: var(--rf-ink);
  line-height: 1.6;
}
:is(.rf-portaal, .rf-overlay) .rf-volgendestap {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: linear-gradient(115deg, #f1f3fa, #f6f2fb);
  border: 1px solid #e0def0;
  border-radius: 12px;
  padding: 16px 18px;
  font-size: 12px;
  line-height: 1.7;
  color: #414957;
  margin-bottom: 16px;
}
:is(.rf-portaal, .rf-overlay) .rf-volgendestap strong {
  display: block;
  font-size: 11px;
  font-weight: 650;
  color: #4a4372;
  margin-bottom: 3px;
}
:is(.rf-portaal, .rf-overlay) .rf-volgendestap .rf-icoon {
  color: #7661b3;
  margin-top: 2px;
}
:is(.rf-portaal, .rf-overlay) .rf-actielijst {
  margin: 0;
  padding: 0;
  list-style: none;
}
:is(.rf-portaal, .rf-overlay) .rf-actielijst li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid var(--rf-haarlijn-zacht);
  font-size: 12px;
  line-height: 1.7;
  color: #414957;
}
:is(.rf-portaal, .rf-overlay) .rf-actielijst li:last-child {
  border-bottom: 0;
}
:is(.rf-portaal, .rf-overlay) .rf-actielijst .rf-icoon {
  width: 15px;
  height: 15px;
  color: #9298a4;
  margin-top: 2px;
}
/* De noot boven een transcript waarvan de sprekers erbij bedacht zijn. Rustig
   en klein: het klopt meestal, het is een noot bij wat er staat en geen storing.
   Het grijs komt uit de token en niet uit een hex, zodat RestoFone hier zijn
   eigen warme grijs krijgt zonder een tweede regel in portaal-tokens.css. */
:is(.rf-portaal, .rf-overlay) .rf-sprekersnoot {
  margin: 0 0 10px;
  font-size: 10px;
  color: var(--rf-muted);
}
/* Meelezen terwijl het gesprek nog loopt. Dezelfde kaart als het verslag ernaast,
   zodat er niets opvalt behalve de stip: dit blok bestaat alleen zolang het
   gesprek duurt en verdwijnt daarna vanzelf. Geen kleur eromheen en geen kader
   dat om aandacht vraagt; het is een gesprek dat loopt, geen melding. */
:is(.rf-portaal, .rf-overlay) .rf-meelezen {
  background: var(--rf-paneel);
  border: 1px solid var(--rf-line);
  border-radius: 12px;
  padding: 20px 22px;
  margin-bottom: 16px;
}
:is(.rf-portaal, .rf-overlay) .rf-meelezen-kop {
  display: flex;
  align-items: center;
  gap: 8px;
}
:is(.rf-portaal, .rf-overlay) .rf-meelezen-kop h2 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
}
/* De stip klopt rustig mee. Wie beweging op het scherm liever helemaal niet
   heeft (prefers-reduced-motion) krijgt hem gewoon stil; hij zegt ook zonder
   pulseren dat dit gesprek loopt. */
:is(.rf-portaal, .rf-overlay) .rf-meelezen-stip {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3fbf95;
  animation: rf-meelezen-klop 2s ease-in-out infinite;
}
@keyframes rf-meelezen-klop {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}
@media (prefers-reduced-motion: reduce) {
  :is(.rf-portaal, .rf-overlay) .rf-meelezen-stip {
    animation: none;
  }
}
:is(.rf-portaal, .rf-overlay) .rf-meelezen-uitleg {
  margin: 8px 0 0;
  font-size: 10px;
  color: var(--rf-muted);
}
:is(.rf-portaal, .rf-overlay) .rf-meelezen-stil {
  margin: 14px 0 0;
  font-size: 12px;
  color: var(--rf-muted);
}
:is(.rf-portaal, .rf-overlay) .rf-meelezen-beurten {
  margin-top: 10px;
}
:is(.rf-portaal, .rf-overlay) .rf-meelezen-beurt {
  padding: 11px 0;
  border-bottom: 1px solid var(--rf-haarlijn);
}
:is(.rf-portaal, .rf-overlay) .rf-meelezen-beurt:last-child {
  border-bottom: 0;
}
:is(.rf-portaal, .rf-overlay) .rf-meelezen-rol {
  display: block;
  font-size: 11px;
  font-weight: 650;
  color: #6b7280;
}
:is(.rf-portaal, .rf-overlay) .rf-meelezen-beurt p {
  margin: 3px 0 0;
  font-size: 12px;
  line-height: 1.8;
  color: #414957;
}
:is(.rf-portaal, .rf-overlay) .rf-transcriptregel {
  display: flex;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid #f1f2f5;
}
:is(.rf-portaal, .rf-overlay) .rf-transcriptregel:last-child {
  border-bottom: 0;
}
:is(.rf-portaal, .rf-overlay) .rf-transcriptregel time {
  font-size: 10px;
  color: #a2a7b3;
  font-variant-numeric: tabular-nums;
  padding-top: 3px;
  min-width: 38px;
}
:is(.rf-portaal, .rf-overlay) .rf-transcriptregel strong {
  display: block;
  font-size: 11px;
  font-weight: 650;
  color: #6b7280;
}
:is(.rf-portaal, .rf-overlay) .rf-transcriptregel p {
  margin: 3px 0 0;
  font-size: 12px;
  line-height: 1.8;
  color: #414957;
}
:is(.rf-portaal, .rf-overlay) .rf-ladeacties {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}
:is(.rf-portaal, .rf-overlay) .rf-controlenoot {
  margin: 18px 0 0;
  font-size: 10px;
  color: #9298a4;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: center;
}

/* --- De volledige gesprekspagina ------------------------------------------ */

/* De kop van de gesprekspagina: links wie je sprak, rechts wat je ermee kunt.
   Ruimer dan de kop van de lade, want een pagina heeft de breedte: de avatar is
   groot, de naam is een echte h1 en de knoppen staan ernaast in plaats van
   onderaan. */
:is(.rf-portaal, .rf-overlay) .rf-gesprekkop {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
:is(.rf-portaal, .rf-overlay) .rf-gesprekkop-wie {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
:is(.rf-portaal, .rf-overlay) .rf-gesprekkop h1 {
  margin: 0;
  font-size: 26px;
  font-weight: 550;
  letter-spacing: -0.9px;
  line-height: 1.2;
}
:is(.rf-portaal, .rf-overlay) .rf-gesprekkop h1 .rf-naamlink {
  color: inherit;
  text-decoration: none;
}
:is(.rf-portaal, .rf-overlay) .rf-gesprekkop h1 .rf-naamlink:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
:is(.rf-portaal, .rf-overlay) .rf-gesprekkop p {
  margin: 3px 0 0;
  font-size: 12px;
  color: var(--rf-muted);
}
:is(.rf-portaal, .rf-overlay) .rf-gesprekkop-knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* De regel eronder: wanneer, hoe lang, welke kant op en hoe het afliep. De
   eerste twee met een pictogram (dat leest als een gegeven), de laatste twee als
   badge (dat leest als een stand), net als in de lijst. */
:is(.rf-portaal, .rf-overlay) .rf-gesprekmeta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-bottom: 20px;
  font-size: 11px;
  color: #868c99;
}
:is(.rf-portaal, .rf-overlay) .rf-gesprekmeta > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
:is(.rf-portaal, .rf-overlay) .rf-gesprekmeta .rf-icoon {
  width: 14px;
  height: 14px;
}

/* Het sentiment en de onderwerpen onder de samenvatting: één regel pillen, geen
   tweede blok. */
:is(.rf-portaal, .rf-overlay) .rf-verslagbadges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}

/* Staat de feitenlijst meteen onder de kop van een kaart (de gegevens van het
   gesprek zelf, op de gesprekspagina), dan hoort er geen scheidingslijn boven:
   die scheidt daar niets. In de verslagkaart staat er wél tekst boven, en daar
   doet hij zijn werk. */
:is(.rf-portaal, .rf-overlay) .rf-verslagkaart h3 + .rf-verslagvelden {
  margin-top: 14px;
  padding-top: 0;
  border-top: 0;
}

/* De harde eisen: de stand als pil, daarachter de eis en de toelichting. */
:is(.rf-portaal, .rf-overlay) .rf-eisenlijst {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
:is(.rf-portaal, .rf-overlay) .rf-eisenlijst li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 11px 0;
  border-bottom: 1px solid var(--rf-haarlijn-zacht);
  font-size: 12px;
  line-height: 1.7;
  color: #414957;
}
:is(.rf-portaal, .rf-overlay) .rf-eisenlijst li:last-child {
  border-bottom: 0;
}
:is(.rf-portaal, .rf-overlay) .rf-eisenlijst li small {
  display: block;
  color: #8b909c;
}

/* De pagina van één taak (werklijst/[taakId]): dezelfde kop en kaarten als de
   gesprekspagina, met drie dingen erbij. De stille regel onder de uitkomst met
   wat er niet besproken is, de vragen als genummerde lijst, en de tijdlijn met
   het moment links en wat er gebeurde rechts. */
:is(.rf-portaal, .rf-overlay) .rf-verslagkaart > p.rf-taaknoot {
  margin: 12px 0 0;
  font-size: 11px;
  line-height: 1.7;
  color: #8b909c;
}
:is(.rf-portaal, .rf-overlay) .rf-vragenlijst {
  margin: 14px 0 0;
  padding-left: 18px;
  font-size: 12px;
  line-height: 1.8;
  color: #414957;
}
/* De reset van dit portaal haalt de nummers en de bolletjes weg; hier horen ze:
   de vragen staan in de volgorde waarin ze gesteld worden. */
:is(.rf-portaal, .rf-overlay) ol.rf-vragenlijst {
  list-style: decimal;
}
:is(.rf-portaal, .rf-overlay) ul.rf-vragenlijst {
  list-style: disc;
}
:is(.rf-portaal, .rf-overlay) .rf-vragenlijst li + li {
  margin-top: 4px;
}
:is(.rf-portaal, .rf-overlay) .rf-tijdlijn {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
:is(.rf-portaal, .rf-overlay) .rf-tijdlijn li {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 2px 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--rf-haarlijn-zacht);
  font-size: 12px;
  line-height: 1.7;
  color: #414957;
}
:is(.rf-portaal, .rf-overlay) .rf-tijdlijn li:last-child {
  border-bottom: 0;
}
:is(.rf-portaal, .rf-overlay) .rf-tijdlijn time {
  color: #8b909c;
  font-variant-numeric: tabular-nums;
}
:is(.rf-portaal, .rf-overlay) .rf-tijdlijn small {
  display: block;
  color: #8b909c;
}
/* Een fout na afvinken of uit de rij halen staat onder de knoppen, over de hele
   breedte, en niet als vierde knop ernaast. */
:is(.rf-portaal, .rf-overlay) .rf-gesprekkop-knoppen .rf-fout {
  width: 100%;
  margin-top: 0;
}

@media (max-width: 700px) {
  /* Op een telefoon past het moment niet naast de zin; het gaat erboven. */
  :is(.rf-portaal, .rf-overlay) .rf-tijdlijn li {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* De opname- en voicemailspeler. De browser tekent hem zelf; wij zetten alleen
   de breedte en de ruimte eromheen. */
:is(.rf-portaal, .rf-overlay) .rf-speler {
  display: block;
  width: 100%;
  margin-top: 14px;
}
:is(.rf-portaal, .rf-overlay) .rf-speler-erf audio {
  width: 100%;
}

@media (max-width: 700px) {
  :is(.rf-portaal, .rf-overlay) .rf-gesprekkop h1 {
    font-size: 22px;
  }
  :is(.rf-portaal, .rf-overlay) .rf-gesprekkop-knoppen {
    width: 100%;
  }
}

/* --- Het scherm van de AI-collega ----------------------------------------- */

:is(.rf-portaal, .rf-overlay) .rf-ai-raster {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
:is(.rf-portaal, .rf-overlay) .rf-sjablonen {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
:is(.rf-portaal, .rf-overlay) .rf-sjabloon {
  background: var(--rf-paneel);
  border: 1px solid var(--rf-line);
  border-radius: 12px;
  padding: 16px 17px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 118px;
}
:is(.rf-portaal, .rf-overlay) .rf-sjabloon:hover {
  border-color: #cfd3de;
  background: #fdfdfe;
}
:is(.rf-portaal, .rf-overlay) .rf-sjabloon .rf-icoon {
  color: #7d8492;
}
:is(.rf-portaal, .rf-overlay) .rf-sjabloon strong {
  font-size: 12px;
  font-weight: 600;
  color: var(--rf-ink);
}
:is(.rf-portaal, .rf-overlay) .rf-sjabloon p {
  margin: 0;
  font-size: 11px;
  line-height: 1.7;
  color: #828895;
}

/* Eén taak in de werklijst: de rij, en de knoppen die eronder kunnen staan.
   De scheidingslijn zit hier en niet op de rij zelf. Stond hij op de rij, dan
   sneed hij een taak met knoppen doormidden (twee items in plaats van één) en
   verdween hij juist bij een taak zonder knoppen, want dan was de rij het
   laatste kind en gold de uitzondering hieronder. In Afgerond vandaag liepen de
   regels daardoor zonder lijn in elkaar over. */
:is(.rf-portaal, .rf-overlay) .rf-werkitem {
  border-bottom: 1px solid var(--rf-haarlijn-zacht);
}
/* Eén rij in de werklijst: avatar, naam met taak eronder, badge, pijl. */
:is(.rf-portaal, .rf-overlay) .rf-werkrij {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 13px 18px;
  background: none;
  border: 0;
  text-align: left;
}
:is(.rf-portaal, .rf-overlay) .rf-werkrij:hover {
  background: #fafbfc;
}
:is(.rf-portaal, .rf-overlay) .rf-werkrij strong {
  display: block;
  font-size: 12px;
  font-weight: 550;
  color: var(--rf-ink);
}
:is(.rf-portaal, .rf-overlay) .rf-werkrij small {
  display: block;
  font-size: 11px;
  color: #8b909c;
  margin-top: 2px;
  line-height: 1.6;
}
:is(.rf-portaal, .rf-overlay) .rf-werkrij .rf-icoon {
  width: 15px;
  height: 15px;
  color: #b6bcc8;
}
/* De meelopende teller van een gesprek dat nu loopt: het enige getal op dit
   scherm dat per seconde verandert, dus donkerder dan de regel eromheen. */
:is(.rf-portaal, .rf-overlay) .rf-werkrij .rf-nuteller {
  font-size: 12px;
  font-weight: 650;
  color: var(--rf-ink);
  font-variant-numeric: tabular-nums;
}
/* De knoppen onder een rij die om aandacht vraagt. Op hun eigen regel, want
   drie knoppen naast een naam duwen de tijd van het scherm af. */
:is(.rf-portaal, .rf-overlay) .rf-werkacties {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 0 18px 14px 63px;
}
:is(.rf-portaal, .rf-overlay) .rf-werkacties .rf-fout {
  width: 100%;
}
:is(.rf-portaal, .rf-overlay) .rf-blokkop {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 15px 18px 11px;
  border-bottom: 1px solid var(--rf-line);
}
:is(.rf-portaal, .rf-overlay) .rf-blokkop h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
}
/* Elk deel van de werklijst tekent de lijn onder zichzelf: zo krijgt elke
   overgang naar het volgende blok er precies één, en nooit twee. */
:is(.rf-portaal, .rf-overlay) .rf-blokvoet {
  padding: 11px 18px;
  font-size: 11px;
  color: #8e94a1;
  border-bottom: 1px solid var(--rf-haarlijn-zacht);
}
/* Een blok zonder rijen: één zin, geen kop en geen kader eromheen. */
:is(.rf-portaal, .rf-overlay) .rf-blokleeg {
  padding: 22px 18px;
  font-size: 11px;
  color: #8e94a1;
  border-bottom: 1px solid var(--rf-haarlijn-zacht);
}
/* De laatste regel van het paneel: de zin over het verversen, of de lege zin van
   een paneel dat alleen daaruit bestaat. Daaronder komt niets meer. */
:is(.rf-portaal, .rf-overlay) .rf-paneel > .rf-blokvoet,
:is(.rf-portaal, .rf-overlay) .rf-paneel > .rf-blokleeg {
  border-bottom: 0;
}

/* De rijen bij "Zo werkt zij voor jou": wat het is, en de schakelaar erachter. */
:is(.rf-portaal, .rf-overlay) .rf-instelrij {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--rf-haarlijn-zacht);
}
:is(.rf-portaal, .rf-overlay) .rf-instelrij:last-child {
  border-bottom: 0;
}
:is(.rf-portaal, .rf-overlay) .rf-instelrij strong {
  display: block;
  font-size: 12px;
  font-weight: 550;
  color: var(--rf-ink);
}
:is(.rf-portaal, .rf-overlay) .rf-instelrij p {
  margin: 3px 0 0;
  font-size: 11px;
  line-height: 1.7;
  color: #828895;
}
:is(.rf-portaal, .rf-overlay) .rf-regelkaart p {
  margin: 0 0 10px;
  font-size: 11px;
  line-height: 1.9;
  color: #828895;
}
:is(.rf-portaal, .rf-overlay) .rf-regelkaart ul {
  margin: 0 0 14px;
  padding-left: 17px;
  font-size: 11px;
  line-height: 1.9;
  color: #828895;
}

/* De knop met de reden eronder, als de AI deze kandidaat niet mag bellen. */
:is(.rf-portaal, .rf-overlay) .rf-blokkade {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
:is(.rf-portaal, .rf-overlay) .rf-blokkade small {
  max-width: 230px;
  text-align: right;
  font-size: 11px;
  line-height: 1.6;
  color: #828895;
}

/* --- Smaller dan een laptop ----------------------------------------------- */

@media (max-width: 1000px) {
  :is(.rf-portaal, .rf-overlay) .rf-ai-raster {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  /* DE TABEL SCHUIFT NIET OP EEN TELEFOON, HIJ WORDT KORTER.
     Een tabel van 620 pixels in een schuifbak leek de nette oplossing, maar op
     375 pixels rekt de browser de layout-viewport dan mee op naar de breedte van
     de inhoud, en daarna staat álles wat vastgezet is (de lade, de onderbalk,
     de belknop) op een breedte die niet meer klopt. Drie kolommen die passen is
     beter dan zes die je opzij moet duwen: wie de richting, de duur of de hele
     rij wil, tikt hem aan en krijgt de lade met alles erin. */
  :is(.rf-portaal, .rf-overlay) .rf-tabel {
    min-width: 0;
  }
  :is(.rf-portaal, .rf-overlay) .rf-tabel :is(th, td):nth-child(2),
  :is(.rf-portaal, .rf-overlay) .rf-tabel :is(th, td):nth-child(4),
  :is(.rf-portaal, .rf-overlay) .rf-tabel :is(th, td):nth-child(6) {
    display: none;
  }
  :is(.rf-portaal, .rf-overlay) .rf-tabel :is(th, td) {
    padding-left: 10px;
    padding-right: 10px;
  }
  :is(.rf-portaal, .rf-overlay) .rf-sjablonen {
    grid-template-columns: minmax(0, 1fr);
  }
  :is(.rf-portaal, .rf-overlay) .rf-sjabloon {
    min-height: 0;
  }
  :is(.rf-portaal, .rf-overlay) .rf-zoekveld {
    width: 100%;
  }
  :is(.rf-portaal, .rf-overlay) .rf-zoekveld input {
    width: 100%;
    max-width: none;
  }
  :is(.rf-portaal, .rf-overlay) .rf-verslagvelden {
    grid-template-columns: minmax(0, 1fr);
  }
  :is(.rf-portaal, .rf-overlay) .rf-werkacties {
    padding-left: 18px;
  }
}

/* De twee tekeningen van "Zelf bellen": de webphone op een groot scherm, de
   belapp van het toestel eronder. Allebei staan ze in de HTML en de breedte
   kiest; zie _components/recrufone/bel-knop.tsx. */
:is(.rf-portaal, .rf-overlay) .rf-alleenbreed {
  display: none;
}
:is(.rf-portaal, .rf-overlay) .rf-alleensmal {
  display: inline-flex;
}
@media (min-width: 1024px) {
  :is(.rf-portaal, .rf-overlay) .rf-alleenbreed {
    display: inline-flex;
  }
  :is(.rf-portaal, .rf-overlay) .rf-alleensmal {
    display: none;
  }
}

/* ==========================================================================
   FASE C: Belplan, Instellingen, Kandidaten, Vacatures en Hulp
   ========================================================================== */

/* --- De instelschil: menu links, inhoud rechts ---------------------------- */

/* Dezelfde vorm voor het belplan en voor elk instellingenscherm: één smalle
   kolom met het menu, en de rest voor wat je instelt. Onder 1000px valt het
   menu erboven en wordt het een rij die horizontaal scrolt; die kanteling van
   .rf-subnav staat al in de media-query hierboven. */
:is(.rf-portaal, .rf-overlay) .rf-instelraster {
  display: grid;
  grid-template-columns: 175px minmax(0, 1fr);
  gap: 30px;
}

/* De kop boven de inhoud rechts. Kleiner dan de paginakop: die zegt op welk
   scherm je bent, deze zegt wat je hier doet. */
:is(.rf-portaal, .rf-overlay) .rf-inhoudkop {
  margin-bottom: 23px;
}
:is(.rf-portaal, .rf-overlay) .rf-inhoudkop h2 {
  margin: 0 0 7px;
  font-size: 23px;
  letter-spacing: -0.7px;
  font-weight: 550;
  color: var(--rf-ink);
}
:is(.rf-portaal, .rf-overlay) .rf-inhoudkop p {
  margin: 0;
  color: #9196a2;
  font-size: 12px;
}

/* Een rij in een instelformulier: links wat het is, rechts wat je kiest. */
:is(.rf-portaal, .rf-overlay) .rf-formulierrij {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 20px;
  padding: 24px 23px;
  border-bottom: 1px solid var(--rf-line);
  align-items: start;
}
:is(.rf-portaal, .rf-overlay) .rf-formulierrij:last-child {
  border-bottom: 0;
}
:is(.rf-portaal, .rf-overlay) .rf-formulierrij h3 {
  font-size: 12px;
  font-weight: 550;
  margin: 0 0 6px;
  color: var(--rf-ink);
}
:is(.rf-portaal, .rf-overlay) .rf-formulierrij p {
  font-size: 11px;
  line-height: 1.7;
  color: #9298a5;
  margin: 0;
}

/* De routekeuze als pillen. Een knoprij en geen keuzelijst: er zijn er drie, ze
   zijn even belangrijk, en je wilt ze alle drie tegelijk kunnen zien. */
:is(.rf-portaal, .rf-overlay) .rf-segmenten {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
:is(.rf-portaal, .rf-overlay) .rf-segmenten button {
  padding: 8px 11px;
  font-size: 10px;
  border: 1px solid #e0e3ec;
  border-radius: 7px;
  background: var(--rf-paneel);
  color: #9197a5;
  cursor: pointer;
  font-family: inherit;
}
:is(.rf-portaal, .rf-overlay) .rf-segmenten button:hover {
  color: #4b5262;
}
:is(.rf-portaal, .rf-overlay) .rf-segmenten button.rf-actief {
  background: #252a34;
  border-color: #252a34;
  color: var(--rf-op-donker);
}

/* --- De stroom op het belplan-overzicht ----------------------------------- */

:is(.rf-portaal, .rf-overlay) .rf-stroom {
  display: flex;
  flex-direction: column;
}

/* Waar het begint: er komt een gesprek binnen op jouw nummer. */
:is(.rf-portaal, .rf-overlay) .rf-stroomstart {
  padding: 15px 20px;
  border: 1px solid #dfe3ec;
  border-radius: 10px;
  background: var(--rf-paneel);
  display: flex;
  gap: 12px;
  align-items: center;
  align-self: center;
  min-width: 230px;
}
:is(.rf-portaal, .rf-overlay) .rf-stroomstart .rf-icoonvak {
  width: 35px;
  height: 35px;
  background: #f0f2f7;
  border-radius: 9px;
  display: grid;
  place-items: center;
  color: #7c8496;
}
:is(.rf-portaal, .rf-overlay) .rf-stroomstart strong {
  font-size: 12px;
  font-weight: 550;
  display: block;
  color: var(--rf-ink);
}
:is(.rf-portaal, .rf-overlay) .rf-stroomstart small {
  font-size: 10px;
  color: #969dab;
}

/* Het lijntje met het pijlpuntje eronder. Puur tekening, dus aria-hidden. */
:is(.rf-portaal, .rf-overlay) .rf-verbinder {
  height: 25px;
  width: 1px;
  background: #d3d9e5;
  align-self: center;
  position: relative;
}
:is(.rf-portaal, .rf-overlay) .rf-verbinder::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: -2px;
  width: 5px;
  height: 5px;
  border-bottom: 1px solid #c0c8d7;
  border-right: 1px solid #c0c8d7;
  transform: rotate(45deg);
}

:is(.rf-portaal, .rf-overlay) .rf-stroomtakken {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
:is(.rf-portaal, .rf-overlay) .rf-stroomkaart {
  background: var(--rf-paneel);
  border: 1px solid var(--rf-line);
  border-radius: 11px;
  padding: 20px;
}
:is(.rf-portaal, .rf-overlay) .rf-stroomkaart h3 {
  font-size: 14px;
  letter-spacing: -0.25px;
  margin: 17px 0 7px;
  font-weight: 550;
  color: var(--rf-ink);
}
:is(.rf-portaal, .rf-overlay) .rf-stroomkaart p {
  font-size: 11px;
  color: #9097a4;
  line-height: 1.8;
  margin: 0 0 15px;
}
/* De route die via de AI loopt krijgt de lila gradient van het concept: op één
   blik zie je welke tak zij opvangt. */
:is(.rf-portaal, .rf-overlay) .rf-stroomkaart.rf-aistroom {
  background: linear-gradient(130deg, #f1f3fa, #f6f2fb);
  border-color: #e0def0;
}

/* Wat er gebeurt als de telefoon overgaat en je niet opneemt. Gestippeld, want
   het is een uitzondering op de route erboven en geen vierde route. */
:is(.rf-portaal, .rf-overlay) .rf-stroomterugval {
  margin-top: 16px;
  background: #fafbfe;
  border: 1px dashed #d7dbea;
  border-radius: 9px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  font-size: 11px;
  color: #8a90a0;
}

/* --- Openingstijden ------------------------------------------------------- */

:is(.rf-portaal, .rf-overlay) .rf-dagrij {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr) 16px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #eceef3;
  font-size: 11px;
}
:is(.rf-portaal, .rf-overlay) .rf-dagrij:last-child {
  border-bottom: 0;
}
:is(.rf-portaal, .rf-overlay) .rf-dagrij label {
  font-size: 11px;
  display: flex;
  gap: 8px;
  align-items: center;
  color: var(--rf-ink);
}
:is(.rf-portaal, .rf-overlay) .rf-dagrij input[type="checkbox"] {
  margin: 0;
  accent-color: #252a34;
}
:is(.rf-portaal, .rf-overlay) .rf-dagrij input[type="time"] {
  font-size: 11px;
  padding: 8px 10px;
  border: 1px solid #e0e3ec;
  border-radius: 7px;
  background: var(--rf-paneel);
  color: var(--rf-ink);
  font-family: inherit;
  width: 100%;
}
:is(.rf-portaal, .rf-overlay) .rf-dagrij.rf-dicht {
  color: #a1a6b1;
}

/* Een rustige mededeling onder een formulier. */
:is(.rf-portaal, .rf-overlay) .rf-infostrook {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border: 1px solid var(--rf-line);
  border-radius: 9px;
  background: #fafbfe;
  font-size: 11px;
  line-height: 1.7;
  color: #8a90a0;
}

/* --- De tegels van Instellingen ------------------------------------------- */

:is(.rf-portaal, .rf-overlay) .rf-tegels {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: 17px;
}
:is(.rf-portaal, .rf-overlay) .rf-tegel {
  display: block;
  padding: 24px;
  text-align: left;
  border: 1px solid var(--rf-line);
  background: var(--rf-paneel);
  border-radius: 12px;
  min-height: 166px;
  position: relative;
  transition:
    transform 0.2s,
    border-color 0.2s;
}
:is(.rf-portaal, .rf-overlay) .rf-tegel:hover {
  transform: translateY(-2px);
  border-color: #bfc7d9;
}
:is(.rf-portaal, .rf-overlay) .rf-tegel > .rf-icoon {
  color: #848ea5;
  width: 21px;
  height: 21px;
  margin-bottom: 20px;
}
:is(.rf-portaal, .rf-overlay) .rf-tegel h3 {
  font-size: 13px;
  font-weight: 550;
  margin: 0 0 8px;
  color: var(--rf-ink);
}
:is(.rf-portaal, .rf-overlay) .rf-tegel p {
  font-size: 11px;
  line-height: 1.8;
  margin: 0;
  color: #959ca9;
  max-width: 245px;
}
:is(.rf-portaal, .rf-overlay) .rf-tegel .rf-hoek {
  position: absolute;
  top: 25px;
  right: 24px;
  color: #bec3ce;
  display: flex;
}
:is(.rf-portaal, .rf-overlay) .rf-tegel .rf-hoek .rf-icoon {
  width: 15px;
  height: 15px;
}

/* --- Overgenomen inhoud --------------------------------------------------- */

/* WAT DIT IS EN WAAROM HET BESTAAT.
   De instellingenschermen (abonnement, facturen, nummers, team, ...) zijn
   dezelfde schermen voor beide edities: dezelfde formulieren, dezelfde routes,
   dezelfde regels over wie wat mag. Alleen de schil eromheen verschilt. Ze in de
   RecruFone-editie helemaal opnieuw tekenen zou tien schermen dupliceren om
   dezelfde POST te doen, en dan lopen ze vanaf de eerste wijziging uit elkaar.

   Dus staat de inhoud er zoals hij is, in een paneel, en verzet dit blok alleen
   de kleuren en de vormen die anders naar Bellen ruiken: het groen van de
   knoppen wordt de inkt van dit portaal, en de pilvorm wordt de rechthoek met
   ronde hoeken die de rest van het portaal ook heeft. Alles staat achter
   .rf-erf, dus buiten dit ene blok raakt het niets.

   De selectors noemen Tailwind-klassen bij naam. Dat is lelijk en het is de
   bedoeling: verandert de knopklasse in _components/ui/klassen.ts, dan valt dit
   terug op de gewone Bellen-vorm en niet op iets kapots. */
:is(.rf-portaal, .rf-overlay) .rf-erf .bg-emerald-700,
:is(.rf-portaal, .rf-overlay) .rf-erf .bg-emerald-600 {
  background-color: var(--rf-ink);
}
:is(.rf-portaal, .rf-overlay) .rf-erf .bg-emerald-700:hover,
:is(.rf-portaal, .rf-overlay) .rf-erf .bg-emerald-600:hover {
  background-color: #33373f;
}
/* Groene tekst betekent in Bellen bijna altijd "het is gelukt" ("Opgeslagen",
   "Gekoppeld met Bureau Jansen") en niet "hier kun je klikken". Dus wordt het
   het groen van dit portaal en niet zijn blauw; alleen waar het écht een link
   is, herkenbaar aan de onderstreping of aan een <a>, wint het blauw. */
:is(.rf-portaal, .rf-overlay) .rf-erf .text-emerald-700,
:is(.rf-portaal, .rf-overlay) .rf-erf .text-emerald-800,
:is(.rf-portaal, .rf-overlay) .rf-erf .text-emerald-600 {
  color: #368062;
}
:is(.rf-portaal, .rf-overlay) .rf-erf a:is(.text-emerald-700, .text-emerald-800, .text-emerald-600),
:is(.rf-portaal, .rf-overlay) .rf-erf .underline:is(.text-emerald-700, .text-emerald-800) {
  color: var(--rf-blauw, #4d65d8);
}

/* De vlakken en de schakelaars die op emerald staan. De "goed"-kaart
   (kaartKlasse in _components/ui/klassen.ts) en de schakelknop zijn het laatste
   groen dat er op deze schermen nog staat; ze krijgen de succeskleur van dit
   portaal, en de schakelaar de inkt, want aan is hier geen kleur maar gewicht. */
:is(.rf-portaal, .rf-overlay) .rf-erf .bg-emerald-50 {
  background-color: #f2faf6;
}
:is(.rf-portaal, .rf-overlay) .rf-erf .border-emerald-200,
:is(.rf-portaal, .rf-overlay) .rf-erf .border-emerald-600 {
  border-color: #bfe0d0;
}
/* Het vakje dat je net koos (een nummerreeks, een plan) staat op emerald-500 met
   een ring eromheen. Gekozen is in dit portaal geen kleur maar gewicht: de
   inkt, zoals de actieve pil op het belplan. */
:is(.rf-portaal, .rf-overlay) .rf-erf .border-emerald-500,
:is(.rf-portaal, .rf-overlay) .rf-erf .border-emerald-400,
:is(.rf-portaal, .rf-overlay) .rf-erf .border-emerald-300 {
  border-color: var(--rf-ink);
}
:is(.rf-portaal, .rf-overlay) .rf-erf :is(.ring-emerald-500, .ring-emerald-600) {
  --tw-ring-color: var(--rf-ink);
}
:is(.rf-portaal, .rf-overlay) .rf-erf .bg-emerald-600 {
  background-color: var(--rf-ink);
}
:is(.rf-portaal, .rf-overlay) .rf-erf .rounded-full {
  border-radius: 8px;
}
/* De ronde badge blijft rond: die is een pil en geen knop. */
:is(.rf-portaal, .rf-overlay) .rf-erf .rounded-full.px-2\.5 {
  border-radius: 999px;
}
:is(.rf-portaal, .rf-overlay) .rf-erf .bg-emerald-100 {
  background-color: #e9f7f0;
}
:is(.rf-portaal, .rf-overlay) .rf-erf .text-emerald-700.bg-emerald-100 {
  color: #368062;
}

/* De zeven dagknoppen van het belvenster.
   Een gekozen dag droeg border-emerald-600, bg-emerald-50 en text-emerald-700,
   en die drie landen hierboven op de succeskleur: dan leest een gekozen dag als
   "dit is goed gegaan" in plaats van als "deze staat aan". Kiezen is in dit
   portaal geen kleur maar gewicht, net als de actieve pil op het belplan, dus
   krijgt de gekozen dag de inkt. De klasse staat op de knop zelf omdat dat
   scherm alleen in deze editie bestaat; zie belvenster-formulier.tsx. */
:is(.rf-portaal, .rf-overlay) .rf-erf .rf-dagknop[aria-pressed="true"] {
  background-color: var(--rf-ink);
  border-color: var(--rf-ink);
  color: var(--rf-op-donker);
}

@media (max-width: 1200px) {
  :is(.rf-portaal, .rf-overlay) .rf-instelraster {
    grid-template-columns: 155px minmax(0, 1fr);
    gap: 22px;
  }
  :is(.rf-portaal, .rf-overlay) .rf-formulierrij {
    grid-template-columns: 170px minmax(0, 1fr);
  }
}

@media (max-width: 1000px) {
  :is(.rf-portaal, .rf-overlay) .rf-instelraster {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  :is(.rf-portaal, .rf-overlay) .rf-formulierrij {
    grid-template-columns: minmax(0, 1fr);
    gap: 13px;
    padding: 22px;
  }
  :is(.rf-portaal, .rf-overlay) .rf-stroomtakken {
    grid-template-columns: minmax(0, 1fr);
  }
  :is(.rf-portaal, .rf-overlay) .rf-stroomkaart {
    padding: 19px;
  }
  :is(.rf-portaal, .rf-overlay) .rf-stroomkaart h3 {
    margin-top: 12px;
  }
  :is(.rf-portaal, .rf-overlay) .rf-dagrij {
    grid-template-columns: 95px minmax(0, 1fr) 10px minmax(0, 1fr);
    gap: 7px;
    padding: 13px;
  }
  :is(.rf-portaal, .rf-overlay) .rf-dagrij input[type="time"] {
    min-width: 0;
    padding: 8px 5px;
    font-size: 10px;
  }
  :is(.rf-portaal, .rf-overlay) .rf-dagrij label {
    font-size: 10px;
  }
  :is(.rf-portaal, .rf-overlay) .rf-tegels {
    gap: 12px;
    grid-template-columns: minmax(0, 1fr);
  }
  :is(.rf-portaal, .rf-overlay) .rf-tegel {
    padding: 18px;
    min-height: 0;
  }
  :is(.rf-portaal, .rf-overlay) .rf-tegel h3 {
    font-size: 12px;
  }
  :is(.rf-portaal, .rf-overlay) .rf-tegel p {
    font-size: 10px;
  }
  :is(.rf-portaal, .rf-overlay) .rf-tegel > .rf-icoon {
    margin-bottom: 15px;
  }
  :is(.rf-portaal, .rf-overlay) .rf-tegel .rf-hoek {
    right: 16px;
    top: 18px;
  }
}

/* --- Velden in het portaal zelf ------------------------------------------- */

/* De formuliervormen stonden alleen onder .rf-overlay: het taakvenster was het
   enige eiland met velden erin. Sinds fase C staan er ook velden in de pagina
   zelf (het belplan, de instellingen), en dan hoort dezelfde vorm daar te
   gelden. Bewust op .rf-veld en niet op elk `input` in het portaal: die laatste
   regel zou de Tailwind-velden van de overgenomen schermen (.rf-erf) overrulen,
   en die zien er in hun eigen vorm prima uit. */
.rf-portaal .rf-veld {
  display: block;
}
.rf-portaal .rf-veld > span {
  display: block;
  font-size: 11px;
  font-weight: 550;
  margin-bottom: 7px;
  color: var(--rf-ink);
}
.rf-portaal .rf-veld :is(input, select, textarea) {
  background: var(--rf-paneel);
  border: 1px solid #dfe1e7;
  border-radius: 9px;
  padding: 9px 12px;
  color: var(--rf-ink);
  width: 100%;
  font: inherit;
  font-size: 11px;
}
.rf-portaal .rf-veld textarea {
  resize: vertical;
  min-height: 88px;
  line-height: 1.7;
}
.rf-portaal .rf-veld :is(input, select, textarea):focus-visible {
  outline: 3px solid #7898ee;
  outline-offset: 3px;
}
.rf-portaal .rf-hulptekst {
  font-size: 11px;
  color: #8b90a0;
  line-height: 1.7;
}
.rf-portaal .rf-fout {
  font-size: 11px;
  color: #b76859;
  margin-top: 9px;
}

/* De gesloten dagen onder de openingstijden: één pil per datum, met een kruisje
   om hem weg te halen. Een lijst en geen tabel, want de volgorde is de datum en
   er valt verder niets over te zeggen. */
:is(.rf-portaal, .rf-overlay) .rf-datumlijst {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
:is(.rf-portaal, .rf-overlay) .rf-datumlijst li {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 8px 5px 11px;
  border: 1px solid var(--rf-line);
  border-radius: 999px;
  background: #fafbfe;
  font-size: 11px;
  color: var(--rf-ink);
}
:is(.rf-portaal, .rf-overlay) .rf-datumlijst button {
  border: 0;
  background: none;
  padding: 0 2px;
  cursor: pointer;
  color: #a4a9b6;
  font-size: 13px;
  line-height: 1;
  font-family: inherit;
}
:is(.rf-portaal, .rf-overlay) .rf-datumlijst button:hover {
  color: var(--rf-ink);
}

/* De velden van de overgenomen schermen, in de vorm van dit portaal.

   Op het element en niet op de Tailwind-klasse, anders dan bij de knoppen
   hierboven: een invoerveld is altijd een input, een select of een textarea, en
   die drie zijn met naam te noemen. De klasse noemen zou hier bovendien niets
   opleveren, want het gaat om de ronding en de focusrand en die staan in
   INVOER (_components/ui/klassen.ts) aan elkaar geplakt.

   Alleen de vorm en de kleur, nooit de maat: een veld dat hier smaller of hoger
   wordt dan het scherm eromheen verwacht, verschuift een formulier dat we juist
   met rust wilden laten. Vinkjes en radio's blijven rond, want een vierkant
   rondje is geen vinkje meer. */
:is(.rf-portaal, .rf-overlay)
  .rf-erf
  :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  border-radius: 9px;
  border-color: #dfe1e7;
}
:is(.rf-portaal, .rf-overlay)
  .rf-erf
  :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus {
  border-color: #a7b3e2;
}
:is(.rf-portaal, .rf-overlay) .rf-erf :is(input, select, textarea)[type="checkbox"],
:is(.rf-portaal, .rf-overlay) .rf-erf input[type="radio"] {
  accent-color: var(--rf-ink);
}
/* De focusrand van de knoppen staat in KNOP_BASIS op emerald. Dat is de kleur
   van het andere merk, en hij is op dit scherm het enige groen dat er nog is. */
:is(.rf-portaal, .rf-overlay) .rf-erf :is(button, a, input, select, textarea):focus-visible {
  outline-color: #4d65d8;
}

/* ==========================================================================
   FASE C: Vacatures en Hulp
   ========================================================================== */

/* De weg terug boven een detailscherm. Een regel en geen kruimelpad: dat staat
   al in de bovenbalk, en twee paden boven elkaar is een pad te veel. */
:is(.rf-portaal, .rf-overlay) .rf-terug {
  margin: 0 0 12px;
}
:is(.rf-portaal, .rf-overlay) .rf-terug .rf-linkknop .rf-icoon {
  transform: rotate(180deg);
}

/* De ruimte tussen twee panelen onder elkaar. Staat op het paneel en niet als
   gap op een omhulling, omdat de schermen hier verschillen: het ene heeft er
   twee, het andere een rij van vijf met een tabel ertussen. */
:is(.rf-portaal, .rf-overlay) .rf-blok {
  margin-top: 20px;
}

/* De stand van een melding die een mens heeft opgepakt. Een eigen tint, want de
   lila pil (rf-ai) betekent in dit portaal overal "hier zat de AI-collega aan",
   en een melding waar support aan werkt hoort daar niet op te lijken. Het blauw
   komt uit dezelfde reeks als de blauwe avatar-tint. */
:is(.rf-portaal, .rf-overlay) .rf-badge.rf-bezig {
  background: #e7edf8;
  color: #4a648f;
}

/* De amberen stip van "Werkt alles?". Groen en grijs stonden er al; dit is de
   derde stand, en hij zegt hetzelfde als de zin ernaast. */
:is(.rf-portaal, .rf-overlay) .rf-stip.rf-let-op {
  background: #d9922f;
}

/* --- De thread van een melding -------------------------------------------- */

:is(.rf-portaal, .rf-overlay) .rf-berichten {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 22px;
}
:is(.rf-portaal, .rf-overlay) .rf-bubbel {
  max-width: 82%;
  border: 1px solid var(--rf-line);
  border-radius: 12px;
  padding: 12px 15px;
  background: var(--rf-paneel);
}
/* Jouw eigen berichten rechts, zoals in elk gesprek. */
:is(.rf-portaal, .rf-overlay) .rf-bubbel.rf-vanjou {
  margin-left: auto;
  background: #f5f7fb;
  border-color: #e2e6f1;
}
:is(.rf-portaal, .rf-overlay) .rf-bubbel strong {
  display: block;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #9095a3;
}
:is(.rf-portaal, .rf-overlay) .rf-bubbel p {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.75;
  color: var(--rf-ink);
  white-space: pre-wrap;
}
:is(.rf-portaal, .rf-overlay) .rf-bubbel small {
  display: block;
  margin-top: 7px;
  font-size: 10px;
  color: #9095a3;
}

/* --- Overgenomen inhoud: de kaarten van een formulier ---------------------- */

/* Het vacatureformulier en het antwoordveld van een melding komen uit Bellen en
   dragen daar hun eigen kaarten (rounded-lg border border-neutral-200, zie
   _components/ui/klassen.ts). Binnen .rf-erf lezen die als de panelen van dit
   portaal, en dan horen ze ook dezelfde radius en dezelfde randkleur te hebben.
   Alleen de neutrale kaart: een let-op-kaart moet juist opvallen, en de velden
   eromheen dragen border-neutral-300 en blijven dus zoals ze zijn. */
:is(.rf-portaal, .rf-overlay) .rf-erf .rounded-lg.border-neutral-200 {
  border-radius: 12px;
  border-color: var(--rf-line);
}

@media (max-width: 760px) {
  :is(.rf-portaal, .rf-overlay) .rf-berichten {
    padding: 14px 16px;
  }
  :is(.rf-portaal, .rf-overlay) .rf-bubbel {
    max-width: 94%;
  }
}

/* --- Kandidaten ------------------------------------------------------------ */

/* DE TABEL VAN DE KANDIDATEN HEEFT VIJF KOLOMMEN, NIET ZES.
   De regel hierboven verbergt op een smal scherm kolom 2, 4 en 6 van .rf-tabel,
   afgestemd op de gesprekkentabel. Hier komt dat toevallig goed uit (bedrijf en
   laatst gesproken vallen weg, de actiekolom blijft), en juist daarom staat het
   hier nog een keer met een eigen klasse: wordt die andere tabel ooit anders
   ingedeeld, dan verdwijnt hier geen kolom die niet gemist kan worden. */
@media (max-width: 760px) {
  :is(.rf-portaal, .rf-overlay) .rf-tabel.rf-kandidatentabel :is(th, td) {
    display: table-cell;
  }
  :is(.rf-portaal, .rf-overlay) .rf-tabel.rf-kandidatentabel :is(th, td):nth-child(2),
  :is(.rf-portaal, .rf-overlay) .rf-tabel.rf-kandidatentabel :is(th, td):nth-child(4) {
    display: none;
  }

  /* DRIE KOLOMMEN DIE PASSEN, OOK ECHT.
     De bedoeling hierboven is dat de tabel op een telefoon korter wordt in plaats
     van te schuiven. Dat lukte niet helemaal: de browser verdeelt de breedte naar
     de inhoud, en een naam met een nummer eronder plus de breedste stand-badge
     kwamen samen op 358 pixels uit in een bak van 333. Gevolg: de tabel schoof
     tóch, en het pijltje naar de kaart stond half buiten de rand.

     `table-layout: fixed` haalt de verdeling weg bij de inhoud: de stand krijgt
     116 pixels (genoeg voor "Niet door AI bellen") en het pijltje 44, en de naam
     krijgt de rest. Zo kan een lange naam of een nummer zonder spaties afbreken
     in plaats van de tabel op te rekken; een Nederlands nummer ("06 12 34 56 78")
     past op één regel. */
  :is(.rf-portaal, .rf-overlay) .rf-tabel.rf-kandidatentabel {
    table-layout: fixed;
  }
  :is(.rf-portaal, .rf-overlay) .rf-tabel.rf-kandidatentabel :is(th, td):nth-child(3) {
    width: 116px;
    padding-right: 6px;
  }
  :is(.rf-portaal, .rf-overlay) .rf-tabel.rf-kandidatentabel :is(th, td):last-child {
    width: 44px;
    padding-left: 0;
    padding-right: 10px;
  }
  :is(.rf-portaal, .rf-overlay) .rf-kandidatentabel .rf-persoonknop,
  :is(.rf-portaal, .rf-overlay) .rf-kandidatentabel .rf-persoonknop > span {
    min-width: 0;
  }
  :is(.rf-portaal, .rf-overlay) .rf-kandidatentabel .rf-persoonknop :is(strong, small) {
    overflow-wrap: anywhere;
  }
}

/* De eerste cel: het vinkje, en daarnaast de link naar zijn kaart. */
:is(.rf-portaal, .rf-overlay) .rf-kandidaatcel {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
:is(.rf-portaal, .rf-overlay) .rf-vinkvakje {
  width: 15px;
  height: 15px;
  flex: none;
  margin: 0;
  accent-color: #252a34;
  cursor: pointer;
}
:is(.rf-portaal, .rf-overlay) .rf-vinkvakje:disabled {
  cursor: not-allowed;
  opacity: 0.35;
}

/* De balk boven de tabel: hoeveel er aanstaan, en wat je ermee kunt. */
:is(.rf-portaal, .rf-overlay) .rf-selectiebalk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--rf-haarlijn);
  background: #fafbfe;
}
:is(.rf-portaal, .rf-overlay) .rf-selectiebalk p {
  margin: 0;
  font-size: 11px;
  color: #7c818e;
}

/* Wat er van een selectie terugkwam: de ene regel, en wie er niet doorging. */
:is(.rf-portaal, .rf-overlay) .rf-selectie-uitslag {
  padding: 14px 18px;
  border-bottom: 1px solid var(--rf-haarlijn);
  font-size: 12px;
  color: var(--rf-ink);
}
:is(.rf-portaal, .rf-overlay) .rf-selectie-uitslag ul {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  font-size: 11px;
  line-height: 1.8;
  color: #7c818e;
}

/* --- De kandidaatkaart ----------------------------------------------------- */

:is(.rf-portaal, .rf-overlay) .rf-kruimelterug {
  margin: 0 0 14px;
}
/* De avatar naast de paginakop, en niet erin: een rondje van 52 pixels binnen
   een h1 van 29 duwt de regel uit elkaar. */
:is(.rf-portaal, .rf-overlay) .rf-kandidaatkop {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 26px;
}
:is(.rf-portaal, .rf-overlay) .rf-kandidaatkop > .rf-avatar {
  flex: none;
}
:is(.rf-portaal, .rf-overlay) .rf-kandidaatkop > .rf-paginakop {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
}
:is(.rf-portaal, .rf-overlay) .rf-kaartkolom {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* De gegevens als lijst van label en waarde. Twee kolommen, want het zijn korte
   feiten; een notitie van drie regels mag zijn kolom gewoon langer maken. */
:is(.rf-portaal, .rf-overlay) .rf-feiten {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 20px;
  margin: 0;
}
:is(.rf-portaal, .rf-overlay) .rf-feiten dt {
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: #9298a4;
}
:is(.rf-portaal, .rf-overlay) .rf-feiten dd {
  margin: 4px 0 0;
  font-size: 12px;
  font-weight: 550;
  color: var(--rf-ink);
  line-height: 1.6;
  overflow-wrap: anywhere;
}

/* De geschiedenis: per gesprek wanneer het was, hoe het liep, en je eigen
   aantekening eronder. */
:is(.rf-portaal, .rf-overlay) .rf-gesprekkenlijst {
  margin: 0;
  padding: 0;
  list-style: none;
}
:is(.rf-portaal, .rf-overlay) .rf-gesprekkenlijst > li {
  padding: 15px 22px;
  border-bottom: 1px solid var(--rf-haarlijn);
}
:is(.rf-portaal, .rf-overlay) .rf-gesprekkenlijst > li:last-child {
  border-bottom: 0;
}
:is(.rf-portaal, .rf-overlay) .rf-gesprekkenlijst .rf-erf {
  margin-top: 8px;
}

/* Het verslag onder een gesprek op de kaart: de kern, de velden en de volgende
   stap, met dezelfde klassen als op de gesprekspagina maar de maten van een rij
   in een lijst. Staat er alleen bij de laatste verslagen; zie
   app/(app)/kandidaten/verslag-regels.ts. */
:is(.rf-portaal, .rf-overlay) .rf-kaartverslag {
  margin-top: 10px;
}
:is(.rf-portaal, .rf-overlay) .rf-kaartverslag > p {
  margin: 0;
  font-size: 12px;
  line-height: 1.8;
  color: #414957;
}
:is(.rf-portaal, .rf-overlay) .rf-kaartverslag .rf-verslagvelden {
  margin-top: 12px;
  padding-top: 12px;
}
:is(.rf-portaal, .rf-overlay) .rf-kaartverslag .rf-volgendestap {
  margin: 12px 0 0;
  padding: 12px 14px;
}

@media (max-width: 760px) {
  :is(.rf-portaal, .rf-overlay) .rf-kandidaatkop {
    align-items: flex-start;
    gap: 12px;
  }
  :is(.rf-portaal, .rf-overlay) .rf-feiten {
    grid-template-columns: minmax(0, 1fr);
  }
  :is(.rf-portaal, .rf-overlay) .rf-gesprekkenlijst > li {
    padding: 14px 18px;
  }
}

/* De kolom Stand mag omvallen: een kandidaat kan drie pillen dragen (herkomst,
   opt-out, lopende taak) en die passen naast elkaar niet in een smalle kolom. */
:is(.rf-portaal, .rf-overlay) .rf-standcel {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
:is(.rf-portaal, .rf-overlay) .rf-actiecel {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

@media (max-width: 760px) {
  /* Zelfde afweging als bij kolom 2 en 4 hierboven: liever drie kolommen die
     passen dan een tabel die je opzij moet duwen. Bellen kan vanaf de kaart. */
  :is(.rf-portaal, .rf-overlay) .rf-kandidatentabel .rf-belcel {
    display: none;
  }
}

@media (max-width: 760px) {
  /* Op een telefoon past een naam van twee regels niet naast twee knoppen: de
     kop valt uit elkaar en de knop komt over de naam te staan. Onder elkaar dus,
     met de avatar ernaast. */
  :is(.rf-portaal, .rf-overlay) .rf-kandidaatkop > .rf-paginakop {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

/* ==========================================================================
   TWEEDE RONDE: de opvolglijst
   ========================================================================== */

/* De afvinkrij. Dezelfde maten als .rf-taakrij ernaast op Vandaag, want ze staan
   in dezelfde kolom onder elkaar en een lijst die per paneel anders ademt leest
   als twee verschillende schermen. Wat er anders is: een vinkje voorop, en een
   rij die na het afvinken zichtbaar blijft staan met een streep erdoor. */
:is(.rf-portaal, .rf-overlay) .rf-opvolgrij {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 15px 21px;
  border-bottom: 1px solid var(--rf-haarlijn);
}
:is(.rf-portaal, .rf-overlay) .rf-opvolgrij:last-child {
  border-bottom: 0;
}
:is(.rf-portaal, .rf-overlay) .rf-opvolgvink {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  flex: 1;
  min-width: 0;
  cursor: pointer;
}
/* Het aankruisvakje zelf blijft het aankruisvakje van de browser: `accent-color`
   geeft het de kleur van dit portaal en verder doet hij alles al goed
   (toetsenbord, schermlezer, de aanwijzer). Een nagebouwd vinkje van een span
   met een klikhandler doet dat geen van drieën. */
:is(.rf-portaal, .rf-overlay) .rf-opvolgvink input[type="checkbox"] {
  width: 15px;
  height: 15px;
  margin: 2px 0 0;
  accent-color: #6f7fbf;
  flex: none;
  cursor: pointer;
}
:is(.rf-portaal, .rf-overlay) .rf-opvolgvink strong {
  display: block;
  font-size: 11px;
  font-weight: 550;
  line-height: 1.5;
}
:is(.rf-portaal, .rf-overlay) .rf-opvolgtekst {
  display: block;
  font-size: 11px;
  line-height: 1.6;
  color: #414957;
}
:is(.rf-portaal, .rf-overlay) .rf-opvolgvink small {
  display: block;
  color: #9196a2;
  margin-top: 4px;
  font-size: 10px;
}
:is(.rf-portaal, .rf-overlay) .rf-opvolgvink small .rf-linkknop {
  font-size: 10px;
}
/* Afgevinkt: de regel blijft staan, maar hij vraagt geen aandacht meer. Meteen
   laten verdwijnen maakt van elke klik een schok en van een vergissing een
   zoektocht. */
:is(.rf-portaal, .rf-overlay) .rf-opvolgrij.rf-af .rf-opvolgtekst {
  text-decoration: line-through;
  color: #a2a7b3;
}
:is(.rf-portaal, .rf-overlay) .rf-opvolgrij.rf-af strong {
  color: #9196a2;
}
:is(.rf-portaal, .rf-overlay) .rf-opvolgrij .rf-tag {
  font-size: 9px;
  color: #8b8f9b;
  white-space: nowrap;
  margin-left: auto;
  padding-top: 3px;
}
:is(.rf-portaal, .rf-overlay) .rf-opvolgrij .rf-icoonknop {
  flex: none;
}

/* Het invulveld van "Actie toevoegen": één regel, en de twee knoppen ernaast. */
:is(.rf-portaal, .rf-overlay) .rf-opvolgtoevoegen {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
:is(.rf-portaal, .rf-overlay) .rf-opvolgtoevoegen input {
  flex: 1;
  min-width: 180px;
  height: 36px;
  padding: 0 12px;
  background: #edf0f5;
  border: 0;
  border-radius: 8px;
  font: inherit;
  font-size: 11px;
  color: var(--rf-ink);
}

/* Op /opvolging staan de acties van één gesprek onder één naam. */
:is(.rf-portaal, .rf-overlay) .rf-opvolggroep {
  border-bottom: 1px solid #eceef2;
}
:is(.rf-portaal, .rf-overlay) .rf-opvolggroep:last-child {
  border-bottom: 0;
}
:is(.rf-portaal, .rf-overlay) .rf-opvolggroep-kop {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 14px 21px 2px;
  font-size: 11px;
  color: #6b7280;
}
:is(.rf-portaal, .rf-overlay) .rf-opvolggroep .rf-opvolgrij {
  border-bottom: 0;
}

/* --- Het hulppaneel ------------------------------------------------------- */

/* De hulp van de app (_components/hulp-paneel.tsx) hangt buiten de schil, in de
   app-layout, en draagt in deze editie de klassen hieronder. Bellen houdt zijn
   venster linksonder; hier schuift dezelfde hulp vanaf rechts in beeld, als de
   lade van een gesprek: donkere kop, witte inhoud, DM Sans.

   HIJ SLUIT DE PAGINA ERONDER NIET AF, en dat is het verschil met het
   taakvenster en de gesprekslade. Wie hulp vraagt over het scherm waar hij op
   staat, hoort dat scherm te kunnen blijven lezen en aanklikken. Vandaar dat de
   wortel .rf-overlay hier zijn waas, zijn blur en zijn muisvangst kwijtraakt; de
   wortel blijft staan omdat de letter, de kleuren en de bouwstenen (knop, chip,
   badge) eraan hangen. */
.rf-overlay.rf-hulp-overlay {
  background: none;
  backdrop-filter: none;
  padding: 0;
  justify-content: flex-end;
  align-items: stretch;
  pointer-events: none;
  animation: none;
}
.rf-overlay.rf-hulp-overlay .rf-hulplade {
  pointer-events: auto;
  width: 408px;
  max-width: 100%;
  height: 100dvh;
  background: var(--rf-paneel);
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--rf-line);
  box-shadow: -15px 0 80px #00000021;
  animation: rf-schuif 0.23s ease-out;
}

.rf-overlay.rf-hulp-overlay .rf-hulplade-kop {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 17px 18px;
  background: #1a1d24;
  color: var(--rf-op-donker);
}
.rf-overlay.rf-hulp-overlay .rf-hulplade-kop strong {
  display: block;
  font-size: 13px;
  font-weight: 550;
  letter-spacing: -0.2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rf-overlay.rf-hulp-overlay .rf-hulplade-kop small {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: #9ea2ae;
}
.rf-overlay.rf-hulp-overlay .rf-hulplade-mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 10px;
  background: #ffffff1c;
  color: #d6d9e2;
}
.rf-overlay.rf-hulp-overlay .rf-hulplade-mark svg {
  width: 17px;
  height: 17px;
}
/* De twee knoppen in de donkere kop. `.rf-icoonknop` staat op de inkt van de
   pagina en zou hier zwart op zwart uitkomen. */
.rf-overlay.rf-hulp-overlay .rf-icoonknop.rf-op-donker {
  border-color: transparent;
  background: none;
  color: #b7bbc6;
}
.rf-overlay.rf-hulp-overlay .rf-icoonknop.rf-op-donker:hover {
  background: #ffffff1f;
  color: var(--rf-op-donker);
}
.rf-overlay.rf-hulp-overlay .rf-icoonknop.rf-op-donker svg {
  width: 15px;
  height: 15px;
}
.rf-overlay.rf-hulp-overlay .rf-hulplade-terug {
  background: none;
  border: 0;
  padding: 5px 7px;
  font: inherit;
  font-size: 11px;
  color: #b7bbc6;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.rf-overlay.rf-hulp-overlay .rf-hulplade-terug:hover {
  color: var(--rf-op-donker);
}

.rf-overlay.rf-hulp-overlay .rf-hulplade-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

/* De lege stand: waar je aan begint als er nog niets gevraagd is. */
.rf-overlay.rf-hulp-overlay .rf-hulpstart {
  text-align: center;
  padding: 26px 4px 8px;
}
.rf-overlay.rf-hulp-overlay .rf-hulpstart-mark {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--rf-haarlijn);
  color: #5c6270;
}
.rf-overlay.rf-hulp-overlay .rf-hulpstart-mark svg {
  width: 21px;
  height: 21px;
}
.rf-overlay.rf-hulp-overlay .rf-hulpstart h3 {
  margin: 13px 0 0;
  font-size: 14px;
  font-weight: 550;
  color: var(--rf-ink);
}
.rf-overlay.rf-hulp-overlay .rf-hulpstart p {
  margin: 5px 0 0;
  font-size: 11.5px;
  line-height: 1.7;
  color: #8b90a0;
}
.rf-overlay.rf-hulp-overlay .rf-hulpchips {
  justify-content: center;
  margin-top: 15px;
}

/* Eén bericht. Jouw vraag rechts in de inkt van dit portaal, het antwoord links
   in een wit vlak: dezelfde kanten als in de thread van een melding. */
.rf-overlay.rf-hulp-overlay .rf-hulpbericht {
  max-width: 88%;
  border: 1px solid var(--rf-line);
  border-radius: 12px;
  padding: 11px 14px;
  background: var(--rf-paneel);
  color: var(--rf-ink);
}
.rf-overlay.rf-hulp-overlay .rf-hulpbericht.rf-vanjou {
  margin-left: auto;
  background: #252932;
  border-color: #252932;
  color: var(--rf-op-donker);
}
/* De inhoud komt uit markdownNaarNodes (lib/support/support.ts) en draagt de
   Tailwind-klassen van de chatvariant: text-sm, my-1, list-disc. Die maten zijn
   die van Bellen; hier gelden de maten van dit portaal. Twee klassen diep, dus
   deze regel wint van de enkele klasse van Tailwind. */
.rf-overlay.rf-hulp-overlay .rf-hulpbericht :is(p, li) {
  font-size: 12px;
  line-height: 1.75;
  white-space: pre-wrap;
}
.rf-overlay.rf-hulp-overlay .rf-hulpbericht :is(ul, ol) {
  margin: 7px 0;
  padding-left: 17px;
}
.rf-overlay.rf-hulp-overlay .rf-hulpbericht p {
  margin: 0;
}
.rf-overlay.rf-hulp-overlay .rf-hulpbericht p + p {
  margin-top: 8px;
}
.rf-overlay.rf-hulp-overlay .rf-hulpbericht a {
  color: var(--rf-blue, #4d65d8);
}
.rf-overlay.rf-hulp-overlay .rf-hulpbericht.rf-vanjou a {
  color: #c9d3ff;
}
.rf-overlay.rf-hulp-overlay .rf-hulpbericht pre {
  font-size: 11px;
}

/* De drie stippen terwijl de hulp nadenkt. Een bericht zonder tekst, dus in
   dezelfde bubbel: anders springt de lijst als het antwoord binnenkomt. */
.rf-overlay.rf-hulp-overlay .rf-hulpbericht.rf-tikken {
  display: flex;
  gap: 5px;
  padding: 14px;
  width: fit-content;
}
.rf-overlay.rf-hulp-overlay .rf-tikken span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #b3b7c2;
  animation: rf-tik 1s infinite;
}
.rf-overlay.rf-hulp-overlay .rf-tikken span:nth-child(2) {
  animation-delay: 0.15s;
}
.rf-overlay.rf-hulp-overlay .rf-tikken span:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes rf-tik {
  0%,
  60%,
  100% {
    opacity: 0.35;
  }
  30% {
    opacity: 1;
  }
}

/* De melding die klaarstaat, en de bevestiging erna. */
.rf-overlay.rf-hulp-overlay .rf-hulpkaart {
  border: 1px solid var(--rf-line);
  border-radius: 12px;
  background: #f8f9fb;
  padding: 14px 15px;
}
.rf-overlay.rf-hulp-overlay .rf-hulpkaart dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 10px;
  margin: 10px 0 0;
}
.rf-overlay.rf-hulp-overlay .rf-hulpkaart dt {
  font-size: 11px;
  color: #8b90a0;
}
.rf-overlay.rf-hulp-overlay .rf-hulpkaart dd {
  margin: 0;
  font-size: 11px;
  font-weight: 550;
  color: var(--rf-ink);
}
.rf-overlay.rf-hulp-overlay .rf-hulpverstuur {
  width: 100%;
  margin-top: 13px;
}
.rf-overlay.rf-hulp-overlay .rf-hulpkaart.rf-klaar {
  background: #f2faf6;
  border-color: #cfe7dc;
  text-align: center;
}
.rf-overlay.rf-hulp-overlay .rf-hulpkaart.rf-klaar strong {
  display: block;
  font-size: 13px;
  font-weight: 550;
  color: #2f6f57;
}
.rf-overlay.rf-hulp-overlay .rf-hulpkaart.rf-klaar p {
  margin: 6px 0 10px;
  font-size: 11.5px;
  line-height: 1.7;
  color: #4c7d68;
}

.rf-overlay.rf-hulp-overlay .rf-hulpfout {
  border: 1px solid #f0d3cb;
  border-radius: 10px;
  background: #fdf5f3;
  padding: 11px 13px;
  margin: 0;
  font-size: 11.5px;
  line-height: 1.7;
  color: #a4523f;
}

/* De voet: het veld, de knop ernaast, en de weg naar een melding eronder. */
/* De veilige zone erbij, want de lade is 100dvh hoog en zit dus met zijn voet
   op de rand van het toestel: op een iPhone loopt de balk van de thuisknop daar
   overheen, en dan ligt hij op "Meld een probleem". Op een scherm zonder zo'n
   zone is `env()` nul en verandert er niets. */
.rf-overlay.rf-hulp-overlay .rf-hulplade-voet {
  border-top: 1px solid var(--rf-line);
  padding: 13px 15px calc(13px + env(safe-area-inset-bottom));
  background: var(--rf-paneel);
}
.rf-overlay.rf-hulp-overlay .rf-hulplade-voet .rf-rij {
  align-items: flex-end;
}
.rf-overlay.rf-hulp-overlay .rf-hulplade-voet textarea {
  flex: 1;
  min-height: 42px;
  max-height: 108px;
  padding: 11px 13px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.6;
  resize: none;
}
.rf-overlay.rf-hulp-overlay .rf-hulpstuur {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 10px;
  background: var(--rf-ink);
  color: var(--rf-op-donker);
}
.rf-overlay.rf-hulp-overlay .rf-hulpstuur:hover {
  background: #33373f;
}
.rf-overlay.rf-hulp-overlay .rf-hulpstuur:disabled {
  opacity: 0.4;
}
.rf-overlay.rf-hulp-overlay .rf-hulpstuur svg {
  width: 16px;
  height: 16px;
}
.rf-overlay.rf-hulp-overlay .rf-hulpmeld {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 11px;
  color: #8b90a0;
}
.rf-overlay.rf-hulp-overlay .rf-hulpmeld:hover {
  color: var(--rf-ink);
}
.rf-overlay.rf-hulp-overlay .rf-hulpmeld svg {
  width: 13px;
  height: 13px;
}

/* Op een telefoon vult de lade het scherm: een paneel van 408px naast een rand
   van vijftien pixels leest daar niet als een lade maar als een ongeluk. */
@media (max-width: 640px) {
  .rf-overlay.rf-hulp-overlay .rf-hulplade {
    width: 100%;
    border-left: 0;
  }
}

/* ==========================================================================
   DE INSTELLINGENSCHERMEN: HET PANEEL IS DE KAART
   ========================================================================== */

/* GEEN KAART IN EEN KAART.
   De negen instellingenschermen staan in één paneel (instellingen-pagina.tsx),
   en de blokken die ze zelf tekenen dragen de kaart van Bellen: Lijst, Kaart,
   LegeStaat en Tabel zijn alle vier `rounded-lg border border-neutral-200`
   (_components/ui/klassen.ts). Binnen dat paneel levert dat twee randen om
   dezelfde inhoud, met 23 pixels wit ertussen. Dat leest als een kaartje in een
   kaartje, en die vorm heeft dit portaal nergens anders.

   Hier valt de binnenrand weg en is het paneel de kaart. De scheidingslijnen
   tussen de rijen blijven staan: die zeggen waar de ene regel ophoudt, en dat
   is de lijn die er hier echt toe doet.

   Twee niveaus diep, want de helft van de schermen zet zijn lijst in een
   `flex flex-col gap-3` (het team, de nummers, de bedrijfsgegevens) of in een
   `<section>` met een kop erboven (het verbruik, de facturen). Dieper bewust
   niet: een melding binnen een rij (de uitkomst van het opnieuw indienen, de
   rode bevestiging bij het verwijderen van een account) is een vlak in een
   regel en hoort zijn eigen rand te houden.

   Alleen de neutrale kaart. Een let-op-kaart draagt border-amber-200 en moet
   juist opvallen; die staat hier dus niet bij.

   De selectors noemen Tailwind-klassen bij naam, net als het blok over .rf-erf
   hierboven. Dat is lelijk en het is de bedoeling: verandert de kaartklasse in
   _components/ui/klassen.ts, dan valt dit terug op de gewone Bellen-vorm en
   niet op iets kapots. */
:is(.rf-portaal, .rf-overlay) .rf-instelerf > .rounded-lg.border-neutral-200,
:is(.rf-portaal, .rf-overlay) .rf-instelerf > * > .rounded-lg.border-neutral-200 {
  border: 0;
  border-radius: 0;
  /* Kaart en LegeStaat dragen p-4; de ruimte om het blok heen komt van het
     paneel. Lijst en Tabel hebben zelf geen padding (die zit op de rij en op de
     cel), dus voor die twee doet deze regel niets. */
  padding: 0;
}

/* DE LIJST EN DE TABEL LOPEN DOOR TOT DE RAND VAN HET PANEEL.
   Zonder dit staat de tekst van een regel 16 pixels verder naar binnen dan de
   kop erboven (de padding van de rij komt bovenop die van het paneel), en houdt
   de scheidingslijn aan weerskanten op waar de rand stond. Met de rij op de
   padding van het paneel staat alles op één lijn en loopt de streep van rand
   tot rand, precies zoals in elk ander paneel van dit portaal.

   Op `divide-y` en `overflow-x-auto` en niet op de kaartklasse alleen: dat zijn
   de twee blokken die zelf rijen tekenen. Kaart en LegeStaat hebben geen rijen
   en houden hun plek binnen de padding van het paneel. */
:is(.rf-portaal, .rf-overlay) .rf-instelerf > .divide-y.rounded-lg.border-neutral-200,
:is(.rf-portaal, .rf-overlay) .rf-instelerf > * > .divide-y.rounded-lg.border-neutral-200,
:is(.rf-portaal, .rf-overlay) .rf-instelerf > .overflow-x-auto.rounded-lg.border-neutral-200,
:is(.rf-portaal, .rf-overlay) .rf-instelerf > * > .overflow-x-auto.rounded-lg.border-neutral-200 {
  margin-left: -23px;
  margin-right: -23px;
}
:is(.rf-portaal, .rf-overlay) .rf-instelerf .divide-y.rounded-lg > li > .p-4 {
  padding-left: 23px;
  padding-right: 23px;
}
:is(.rf-portaal, .rf-overlay) .rf-instelerf .overflow-x-auto.rounded-lg :is(th, td).px-4 {
  padding-left: 23px;
  padding-right: 23px;
}

/* De kop boven een blok in een instellingenscherm (Sectiekop uit
   _components/ui/kaart.tsx: "Verbruik deze periode", "Facturen").
   Die staat in Bellen op text-lg, de maat van een paginakop, en binnen een
   paneel van dit portaal is dat een tweede titel naast de titel die al boven
   het scherm staat. Hier is het de sectiekop van dit portaal: dezelfde 13
   pixels als de kop van elk ander paneel.

   Op h2 en niet op de klasse alleen: text-lg font-medium staat ook op het
   telefoonnummer in de nummerlijst, en dat is juist het ene ding op dat scherm
   dat groot hoort te zijn. */
:is(.rf-portaal, .rf-overlay) .rf-instelerf h2.text-lg.font-medium {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
}

/* HET GEKOZEN VAKJE IS NIET GROEN.
   De nummerkiezer (nummers/new-number.tsx) en de plankeuze zetten op het vakje
   dat je aanwees border-emerald-500 met bg-emerald-50 en een ring eromheen. De
   rand en de ring worden in het blok over .rf-erf hierboven al de inkt van dit
   portaal, de vulling niet: die valt daar op de zachte succeskleur, en dan leest
   een vakje dat je net koos als "dit is goed gegaan". Kiezen is hier gewicht en
   geen kleur, dus de vulling wordt de canvaskleur.

   bg-emerald-50/60 staat er apart bij. Dat is in Tailwind een eigen klasse (de
   rij van het nummer dat de klant op de site al uitkoos), en de regel over
   .bg-emerald-50 raakt hem niet. Zonder deze regel is dat de enige groene
   vulling die op het bestelscherm overblijft. */
:is(.rf-portaal, .rf-overlay)
  .rf-instelerf
  :is(.border-emerald-500, .border-emerald-400).bg-emerald-50,
:is(.rf-portaal, .rf-overlay) .rf-instelerf .bg-emerald-50\/60 {
  background-color: #f5f6f8;
}

/* DE VRAGENLIJST VAN DE TAKEN OP EEN TELEFOON.
   Instellingen > AI-collega > Taken zet per vraag een nummer, een tekstveld en
   drie knopjes (omhoog, omlaag, weg) op één regel. Op 375 pixels blijft er dan
   129 pixels over voor het veld, en dan lees je je eigen vraag niet meer: er
   staat "Ben je op dit mo…". Het scherm is nog het oude Tailwind-scherm en wordt
   gedeeld met Bellen, dus de vorm hoort hier gezet te worden en niet daar.

   De regel breekt: het nummer en het veld houden regel één (het veld krijgt de
   ruimte die overblijft in plaats van 100% van de rij, anders duwt het het
   nummer eronder), de knoppen zakken naar regel twee en gaan rechts staan waar
   je duim ze zoekt. */
@media (max-width: 760px) {
  :is(.rf-portaal, .rf-overlay) .rf-instelerf ol > li.items-start {
    flex-wrap: wrap;
    row-gap: 4px;
  }
  :is(.rf-portaal, .rf-overlay) .rf-instelerf ol > li.items-start > input {
    width: auto;
    flex: 1 1 170px;
  }
  :is(.rf-portaal, .rf-overlay) .rf-instelerf ol > li.items-start > span:last-child {
    margin-left: auto;
  }
  /* Diezelfde smalle kolom raakt de tekstvakken: `rows={2}` is op een breed
     scherm twee regels, hier vier. Een vak van twee regels voor een instructie
     van duizend tekens laat je door een kier lezen, dus krijgt het er hier een
     paar regels bij. */
  :is(.rf-portaal, .rf-overlay) .rf-instelerf textarea {
    min-height: 96px;
  }
}

/* ==========================================================================
   ZELF BELLEN: DE KOP VAN HET PANEEL, DE GESPREKSSTAND EN DE VOLLEDIGE PAGINA
   ========================================================================== */

/* Alles hieronder hangt aan .rf-overlay.rf-kiezer, en dat is met opzet dezelfde
   haak als het zwevende belpaneel hierboven. De volledige belpagina
   (app/(app)/bellen/recrufone-belscherm.tsx) draagt letterlijk diezelfde twee
   klassen plus .rf-belkaart voor de maat, zodat het paneel en de pagina één
   tekening zijn en niet twee die vanzelf uit elkaar lopen. */

/* --- De kop van het paneel ------------------------------------------------ */

/* Er stond "Bellen" in, met de klassen van dat portaal eromheen. De naam is de
   naam van het andere merk en hoort hier niet te staan (zie lib/merk/merken.ts);
   de vorm was er een uit een andere stylesheet. */
.rf-overlay.rf-kiezer .rf-kiezer-kop {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--rf-haarlijn);
}
.rf-overlay.rf-kiezer .rf-kiezer-titel {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.1px;
}
.rf-overlay.rf-kiezer .rf-kiezer-sluiten {
  margin-left: auto;
  width: 26px;
  height: 26px;
}
.rf-overlay.rf-kiezer .rf-kiezer-sluiten .rf-icoon {
  width: 14px;
  height: 14px;
}

/* De let-op-melding in het paneel: er staat een betaalmethode open. Zand en geen
   oranje vlak, want dit portaal waarschuwt met tekst en niet met kleur. */
.rf-overlay.rf-kiezer .rf-kiezer-let strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
}
.rf-overlay.rf-kiezer .rf-kiezer-let p {
  margin: 5px 0 12px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--rf-muted);
}

/* HET ZOEKVELD PAST BINNEN HET PANEEL, OOK OP EEN TELEFOON.
   Onder 640px zet de regel bij de bovenbalk elk .rf-zoekveld op width: 100%.
   Dat klopt daar (een veld dat de kolom vult), maar hier staat het veld op
   marges van veertien pixels: honderd procent van de body plus die marges is
   achtentwintig pixels breder dan het paneel. Het veld stak zo aan weerskanten
   uit en werd door de overflow van het paneel afgesneden. Auto is hier het
   goede antwoord: een blok vult vanzelf wat er tussen de marges over is. */
.rf-overlay.rf-kiezer .rf-kiezer-zoek {
  width: auto;
}

/* --- De gespreksstand ----------------------------------------------------- */

/* Wie er belt, hoe lang al, en wat je nu kunt doen. Eén tekening voor het
   zwevende paneel en de volledige pagina; de component staat in
   app/(app)/webphone/recrufone-gesprek.tsx. */
.rf-overlay.rf-kiezer .rf-gesprek {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.rf-overlay.rf-kiezer .rf-gesprek-kop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}
/* De eyebrow draagt hier het stipje van de lijn, net als in de hero, en heeft
   dus dezelfde rij nodig: zonder deze regel plakt de stip tegen de eerste
   letter. */
.rf-overlay.rf-kiezer .rf-gesprek-kop .rf-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--rf-muted);
}
/* De avatar staat onder de eyebrow en heeft daar zijn eigen lucht nodig. */
.rf-overlay.rf-kiezer .rf-gesprek-kop .rf-avatar {
  margin: 10px 0 6px;
}
.rf-overlay.rf-kiezer .rf-gesprek-wie {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.3px;
  /* Een naam die niet past breekt af in plaats van het paneel op te rekken. */
  max-width: 100%;
  overflow-wrap: anywhere;
}
.rf-overlay.rf-kiezer .rf-gesprek-nummer {
  font-size: 12px;
  color: var(--rf-muted);
}
.rf-overlay.rf-kiezer .rf-gesprek-stand {
  margin: 3px 0 0;
  font-size: 12px;
  color: var(--rf-muted);
}
/* De klok van een lopend gesprek: het enige cijfer op dit scherm dat je volgt. */
.rf-overlay.rf-kiezer .rf-gesprek-stand.rf-loopt {
  font-size: 14px;
  font-weight: 600;
  color: #2f6f57;
}

.rf-overlay.rf-kiezer .rf-gesprek-keuze {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rf-overlay.rf-kiezer .rf-gesprek-tweeluik {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.rf-overlay.rf-kiezer .rf-gesprek-tweeluik .rf-knop,
.rf-overlay.rf-kiezer .rf-gesprek-ai {
  width: 100%;
}
/* Opnemen is de knop die je zoekt terwijl je telefoon overgaat, en dus de enige
   met kleur. Hetzelfde groen als de belknop tijdens een gesprek (.rf-in-gesprek),
   zodat "er loopt iets" in dit portaal overal dezelfde tint heeft. */
.rf-overlay.rf-kiezer .rf-knop.rf-opnemen {
  background: #2f6f57;
  border-color: #2f6f57;
  color: var(--rf-op-donker);
}
.rf-overlay.rf-kiezer .rf-knop.rf-opnemen:hover {
  background: #27604b;
  border-color: #27604b;
}
/* De derde keuze: het gesprek aan de AI-collega geven. Stiller dan de twee
   erboven, want dit is niet de eerste knop. */
.rf-overlay.rf-kiezer .rf-gesprek-ai {
  font-size: 12px;
}

.rf-overlay.rf-kiezer .rf-gesprek-knoppen {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.rf-overlay.rf-kiezer .rf-gesprek-rondjes {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.rf-overlay.rf-kiezer .rf-rondknop {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--rf-line);
  background: var(--rf-paneel);
  color: #5c616d;
  display: grid;
  place-items: center;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.rf-overlay.rf-kiezer .rf-rondknop:hover {
  background: #f4f5f8;
}
.rf-overlay.rf-kiezer .rf-rondknop.rf-actief {
  background: #eceef3;
  border-color: #d8dae2;
  color: var(--rf-ink);
}
.rf-overlay.rf-kiezer .rf-rondknop .rf-icoon {
  width: 19px;
  height: 19px;
}
.rf-overlay.rf-kiezer .rf-gesprek-hek {
  font-size: 17px;
  font-weight: 600;
  line-height: 1;
}
/* Ophangen is de enige rode vlek in dit portaal, en dat mag: een knop die een
   gesprek afbreekt hoort niet op dezelfde toon te staan als een knop die iets
   aanzet. Gedempt rood en geen alarmrood; het is een gewone handeling. */
.rf-overlay.rf-kiezer .rf-rondknop.rf-ophangen {
  background: #b1403a;
  border-color: #b1403a;
  color: var(--rf-op-donker);
}
.rf-overlay.rf-kiezer .rf-rondknop.rf-ophangen:hover {
  background: #973630;
  border-color: #973630;
}
/* De toetsen tijdens een gesprek staan in dezelfde raster als die achter de knop
   Toetsen in de kiezer; alleen de ruimte eromheen verschilt, want hier zit er
   geen paneelrand omheen. */
.rf-overlay.rf-kiezer .rf-kiezer-toetsen.rf-gesprek-toetsen {
  padding: 0;
}

/* --- De volledige belpagina ----------------------------------------------- */

/* De pagina is de kaart van het paneel, met meer lucht. Bewust even smal: een
   kiezer over de volle breedte zet acht rijen van vijftienhonderd pixels neer
   waarin de naam links staat en de tijd een halve meter verderop. */
.rf-overlay.rf-kiezer.rf-belkaart {
  width: 420px;
  box-shadow: none;
}
/* Er past meer op een pagina dan in een paneel dat boven een knop hangt: de
   lijst loopt door tot onderaan het scherm in plaats van tot 292 pixels. */
.rf-overlay.rf-kiezer.rf-belkaart .rf-kiezer-lijst {
  max-height: min(52vh, 430px);
}
.rf-overlay.rf-kiezer.rf-belkaart .rf-gesprek {
  padding: 6px 0 10px;
}

/* De meldingen boven de kaart (betaalmethode, verbinding, storing). Ze staan in
   het portaal en niet in het paneel, dus met de gewone paneelvorm eromheen. */
:is(.rf-portaal, .rf-overlay) .rf-belmelding {
  max-width: 420px;
  margin-bottom: 14px;
}
:is(.rf-portaal, .rf-overlay) .rf-belmelding strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
}
:is(.rf-portaal, .rf-overlay) .rf-belmelding p {
  margin: 5px 0 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--rf-muted);
}
:is(.rf-portaal, .rf-overlay) .rf-belmelding .rf-knop {
  margin-top: 12px;
}

/* Op een telefoon vult de kaart de kolom, net als elk paneel op dit portaal. */
@media (max-width: 640px) {
  .rf-overlay.rf-kiezer.rf-belkaart {
    width: 100%;
  }
  :is(.rf-portaal, .rf-overlay) .rf-belmelding {
    max-width: none;
  }
}

/* ==========================================================================
   REVIEW 9 SEPTEMBER 2026: Vacatures en Opvolging
   ========================================================================== */

/* De volgende stap onder een lege lijst.
   De leegte is gecentreerd, dus de knop ook; een knop van 100% breed in een
   vlak van 65 pixels padding leest als een balk en niet als een stap. */
:is(.rf-portaal, .rf-overlay) .rf-leegte-actie {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

/* DE VACATURETABEL HEEFT VIER KOLOMMEN, EN KANDIDATEN IS ER DAAR EEN VAN.
   De algemene regel bij max-width 760px verbergt kolom 2, 4 en 6 van .rf-tabel,
   afgestemd op de gesprekkentabel van zes kolommen. Hier is kolom 2 het aantal
   kandidaten, en dat is op deze lijst juist het enige teken dat er iets gebeurt
   bij een vacature; die viel op een telefoon dus stilletjes weg. Wat hier wél
   mag verdwijnen is de laatste kolom met het pijltje: de titel ernaast is
   dezelfde link. Zelfde aanpak als bij .rf-kandidatentabel hierboven, en om
   precies de reden die daar staat. */
@media (max-width: 760px) {
  :is(.rf-portaal, .rf-overlay) .rf-tabel.rf-vacaturetabel :is(th, td) {
    display: table-cell;
  }
  :is(.rf-portaal, .rf-overlay) .rf-tabel.rf-vacaturetabel :is(th, td):nth-child(4) {
    display: none;
  }
  /* Drie kolommen op 375 pixels. Het aantal kandidaten mag over twee regels
     ("Nog geen kandidaten" past niet op één), want de basisregel van .rf-tabel
     zet elke cel behalve de eerste op nowrap en dan duwt die ene zin de tabel
     breder dan het scherm. De pil rechts blijft op één regel; die is kort. */
  :is(.rf-portaal, .rf-overlay) .rf-tabel.rf-vacaturetabel :is(th, td):nth-child(2) {
    white-space: normal;
  }
  :is(.rf-portaal, .rf-overlay) .rf-tabel.rf-vacaturetabel :is(th, td):nth-child(3) {
    width: 1%;
  }
  /* En de titel mag binnen een woord afbreken. Een vacaturetitel bevat woorden
     als "installatietechniek", en zonder deze twee regels zet dat ene woord de
     minimale breedte van de eerste kolom vast: de flexcel krimpt niet onder de
     breedte van haar inhoud (min-width is standaard auto), en dan schuift de
     pil rechts het paneel uit. */
  :is(.rf-portaal, .rf-overlay) .rf-vacaturetabel .rf-persoonknop > span {
    min-width: 0;
    overflow-wrap: break-word;
  }
  :is(.rf-portaal, .rf-overlay) .rf-vacaturetabel :is(th, td),
  :is(.rf-portaal, .rf-overlay) .rf-vacaturetabel td:first-child {
    padding-left: 8px;
    padding-right: 8px;
  }
}

/* De knop in de verbindingsregel van de kiezer: een tekstknop in de inkt, zodat
   "opnieuw verbinden" een handeling is en geen mededeling. */
:is(.rf-portaal, .rf-overlay) .rf-kiezer-melding-knop {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--rf-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

/* ── Keuzelijsten zonder de browser-jas ──────────────────────────────────
   Safari tekent een <select> als een eigen knop: eigen hoogte, eigen rand,
   eigen pijl, en dat staat naast een invoerveld dat wél onze maat heeft
   (Rodin, 9 september 2026, bij het keuzemenu in het belplan). Met
   appearance none wordt de select een gewoon vak met dezelfde rand en
   padding als de invoervelden ernaast, en tekenen wij de pijl zelf. Alleen
   de enkelvoudige lijsten: een meerkeuzelijst is een ander ding. */
:is(.rf-portaal, .rf-overlay) select:not([multiple]):not([size]) {
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--rf-paneel);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23656974' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 14px 14px;
  padding-right: 34px;
  /* Dezelfde hoogte als een invoerveld ernaast: in het belplan stond de
     keuzelijst vier pixels lager dan het veld in dezelfde rij. */
  min-height: 38px;
  line-height: 1.4;
  cursor: pointer;
}
:is(.rf-portaal, .rf-overlay) select:not([multiple]):not([size]):disabled {
  cursor: default;
  opacity: 0.6;
}

/* ==========================================================================
   ZO STA JE AAN: de checklist bovenaan Vandaag (9 september 2026)
   ==========================================================================
   Het paneel dat een nieuw bureau door de eerste vijf minuten heen helpt, en
   dat verdwijnt zodra hij aanstaat. Een gewoon rf-paneel met eigen rijen: geen
   kleur en geen kader eromheen, want het staat boven de hero en twee vlakken
   die om aandacht vragen boven elkaar is er één te veel. */

:is(.rf-portaal, .rf-overlay) .rf-checklist {
  margin-bottom: 18px;
}
:is(.rf-portaal, .rf-overlay) .rf-checklist .rf-eyebrow {
  color: var(--rf-muted);
  margin-bottom: 4px;
}

/* Eén regel: het bolletje, wat er moet gebeuren, en de knop.
   De lijn zit bovenaan en niet onderaan, zodat de laatste regel geen streep
   boven de voet van het paneel zet. */
:is(.rf-portaal, .rf-overlay) .rf-checkrij {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-top: 1px solid var(--rf-line);
}
:is(.rf-portaal, .rf-overlay) .rf-checkrij strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
}
:is(.rf-portaal, .rf-overlay) .rf-checkrij small {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--rf-muted);
}
/* Een afgevinkte regel blijft leesbaar en trekt geen aandacht meer: geen
   doorstreping, want dit is een stand en geen boodschappenlijstje. */
:is(.rf-portaal, .rf-overlay) .rf-checkrij.rf-af strong {
  color: var(--rf-muted);
  font-weight: 500;
}

/* Het bolletje links: leeg zolang de stap open staat, mintgroen met een vinkje
   zodra hij af is. Dezelfde maat als een avatar in een rij, zodat de kolom
   links overal even breed is. */
:is(.rf-portaal, .rf-overlay) .rf-checkbol {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  /* Iets donkerder dan --rf-line: een rondje van 22 pixels met de lijnkleur van
     een tabel is op een licht vlak nauwelijks te zien, en dit rondje is juist
     wat zegt dat er nog iets moet. */
  border: 1.5px solid #d5d7de;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
:is(.rf-portaal, .rf-overlay) .rf-checkrij.rf-af .rf-checkbol {
  background: #e6f5ee;
  border-color: #3caa84;
  color: #2c7d61;
}
:is(.rf-portaal, .rf-overlay) .rf-checkbol svg {
  width: 12px;
  height: 12px;
}

:is(.rf-portaal, .rf-overlay) .rf-checkacties {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
/* "Staat er" in plaats van een knop: een afgevinkte regel heeft geen volgende
   stap, en een lege plek zou de rijen ongelijk maken. */
:is(.rf-portaal, .rf-overlay) .rf-checkaf {
  font-size: 11.5px;
  color: var(--rf-muted);
  flex-shrink: 0;
}
/* De uitweg: een tekstknop, niet een tweede knop. */
:is(.rf-portaal, .rf-overlay) .rf-checklater {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 11.5px;
  color: var(--rf-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
:is(.rf-portaal, .rf-overlay) .rf-checklater:hover {
  color: var(--rf-ink);
}

:is(.rf-portaal, .rf-overlay) .rf-checkmelding {
  margin: 0;
  padding: 10px 18px 0;
  font-size: 11.5px;
  color: var(--rf-muted);
}

/* Het venster achter "Laat Saar je bellen": het nummerveld en de regel die
   meeloopt met het gesprek. */
:is(.rf-portaal, .rf-overlay) .rf-checkveld {
  /* Lucht tussen de uitleg en het veld: zonder deze regel plakt "Je mobiele
     nummer" tegen de zin erboven. */
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
:is(.rf-portaal, .rf-overlay) .rf-checkveld label {
  font-size: 11.5px;
  font-weight: 600;
}
:is(.rf-portaal, .rf-overlay) .rf-checkveld .rf-checkmelding {
  padding: 0;
}
:is(.rf-portaal, .rf-overlay) .rf-checkveld .rf-rij {
  margin-top: 6px;
}
:is(.rf-portaal, .rf-overlay) .rf-checkstand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--rf-line);
  border-radius: 10px;
}
:is(.rf-portaal, .rf-overlay) .rf-checkstand p {
  margin: 0;
  font-size: 13px;
}
/* Zolang er iets loopt ademt de stip mee, net als in de kaart aan het slot van
   de aanmelding: dan zegt het scherm ook zonder woorden dat er gewacht wordt. */
:is(.rf-portaal, .rf-overlay) .rf-checkstand.rf-loopt .rf-stip {
  animation: rf-checkpuls 1.4s ease-in-out infinite;
}
@keyframes rf-checkpuls {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) {
  :is(.rf-portaal, .rf-overlay) .rf-checkstand.rf-loopt .rf-stip {
    animation: none;
  }
}

/* Op een telefoon zakt de knop onder de tekst: naast een titel van twee regels
   houdt hij anders zo weinig breedte over dat "Laat Saar je bellen" over drie
   regels breekt. Het bolletje blijft links staan, zodat de lijst een lijst
   blijft. */
@media (max-width: 560px) {
  :is(.rf-portaal, .rf-overlay) .rf-checkrij {
    flex-wrap: wrap;
    gap: 8px 12px;
  }
  /* Alleen de knoppen zakken; "Staat er" is twee woorden en past naast de
     titel, en een afgevinkte regel hoort geen twee regels hoog te worden. */
  :is(.rf-portaal, .rf-overlay) .rf-checkacties {
    width: 100%;
    padding-left: 34px;
  }
}

/* ==========================================================================
   AANRAAKGEBIEDEN OP EEN TELEFOON
   ========================================================================== */

/* WAT JE ZIET BLIJFT ZOALS HET IS, WAT JE RAAKT WORDT 44 PIXELS.
   De bouwbrief zet de maten: een kleine knop is 33 pixels hoog, een icoonknop 34
   bij 34, een link onder een paneel 25. Met een muis klopt dat; met een duim
   niet, en 44 pixels is de maat die Apple en Google allebei aanhouden. De maten
   veranderen daarom niet, er komt alleen een onzichtbaar vlak omheen te liggen
   dat de tik opvangt.

   Twee soorten. Een knop met alleen een icoontje staat los en mag naar alle
   kanten groeien. Een knop met woorden erin (een tab, een link onder een paneel)
   staat naast zijn buren op dezelfde regel; die groeit alleen omhoog en omlaag,
   want naar links en rechts zou hij de tik van de buurman opvangen.

   `pointer: coarse` en niet de schermbreedte: het gaat om waar je mee wijst, en
   een smal venster op een laptop heeft geen dikkere muisaanwijzer.
   `.rf-schakelaar` staat er niet bij, die heeft zijn eigen ::before (het bolletje
   dat schuift); die krijgt hieronder gewoon een grotere hoogte. */
@media (pointer: coarse) {
  :is(.rf-portaal, .rf-overlay)
    :is(.rf-icoonknop, .rf-zoekknop, .rf-kiezer-sluiten, .rf-linkknop, .rf-checklater, .rf-tab, .rf-chip) {
    position: relative;
  }
  :is(.rf-portaal, .rf-overlay)
    :is(.rf-icoonknop, .rf-zoekknop, .rf-kiezer-sluiten)::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: max(100%, 44px);
    height: max(100%, 44px);
    transform: translate(-50%, -50%);
  }
  :is(.rf-portaal, .rf-overlay)
    :is(.rf-linkknop, .rf-checklater, .rf-tab, .rf-chip)::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: max(100%, 44px);
    transform: translateY(-50%);
  }
  /* De schakelaar houdt zijn tekening (32 bij 19) en krijgt de hoogte erbij als
     doorzichtige rand: `background-clip` laat de vulling binnen de rand vallen,
     dus je ziet hem niet groeien.

     `.rf-aan` staat er apart bij, en niet omdat de aan-stand iets anders nodig
     heeft: die regel zet de vulling met de korte schrijfwijze (`background:`), en
     die zet elk deel dat er niet in staat terug op de standaard. Zonder deze
     tweede regel wint dat van de `background-clip` hierboven en groeit de pil
     alsnog mee. */
  :is(.rf-portaal, .rf-overlay) .rf-schakelaar,
  :is(.rf-portaal, .rf-overlay) .rf-schakelaar.rf-aan {
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    background-clip: padding-box;
    height: 43px;
  }
  /* Een vinkje van 15 pixels raak je met een duim niet. Twintig is wat iOS zelf
     aanhoudt en past nog binnen de naamkolom van de tabel. */
  :is(.rf-portaal, .rf-overlay) .rf-vinkvakje {
    width: 20px;
    height: 20px;
  }
}

/* DE ONDERGRENS VAN NEGEN PUNTEN OP EEN TELEFOON.
   De bouwbrief zet de kleinste letter van dit portaal op tien punten: een badge,
   een eyebrow. Op een paar plekken staat negen, en op een breed scherm valt dat
   niet op omdat er ruimte omheen zit. Op een telefoon lees je die regels van
   dichtbij op een scherm dat trilt in je hand, en dan is negen punten grijs op
   wit geen tekst meer maar een streepje. Ze gaan naar tien; verder blijft alles
   zoals de brief het zet. */
@media (max-width: 900px) {
  :is(.rf-portaal, .rf-overlay) .rf-beschikbaarheid,
  :is(.rf-portaal, .rf-overlay) .rf-hero .rf-eyebrow,
  :is(.rf-portaal, .rf-overlay) .rf-stat-noot,
  :is(.rf-portaal, .rf-overlay) .rf-taakrij .rf-tag {
    font-size: 10px;
  }
}

/* TEKST DIE OP EEN TELEFOON NIET AFGEKAPT HOORT TE WORDEN.
   Twee regels waar de smalle kolom een naam wegsneed in plaats van hem te laten
   afbreken. Dat valt op een breed scherm niet op, want daar past het.

   1. Op de vacaturekaart staat in de tweede kolom van een gesprekrij niet een
   badge maar de opdrachtgever, en die kolom is op een telefoon 100 pixels breed.
   "Frigo Service Zuid-Holland" werd "Frigo Service Zui...". Alleen de eigen
   kolom mag afbreken: de `.rf-sub` onder de naam (het nummer) staat dieper in de
   rij en blijft op één regel, want die is nooit langer dan de kolom.

   2. Op de kandidaatkaart staat de lijst met vacatures waar hij aan hangt. Die
   spannen kregen van het overgenomen scherm `truncate` mee, afgestemd op een
   kolom van 500 pixels; hier is het er 207 en verdween de plaats uit
   "Werkvoorbereider installatietechniek, Utrecht". Twee regels is beter dan een
   halve. */
@media (max-width: 900px) {
  :is(.rf-portaal, .rf-overlay) .rf-gesprekrij > span > .rf-sub {
    white-space: normal;
    overflow: visible;
  }
  :is(.rf-portaal, .rf-overlay) .rf-erf li > span.truncate {
    white-space: normal;
    overflow: visible;
  }
}

/* DE ONDERRAND VAN DE LADES OP EEN TELEFOON.
   Een lade is 100dvh hoog en schuift zelf; de laatste regel komt dus tot op de
   rand van het toestel, en daar loopt op een iPhone de balk van de thuisknop
   overheen. Het gesprek in de lade eindigt met knoppen ("Kopieer verslag",
   "Download") en een zin, en juist die verdwenen eronder. Op een scherm zonder
   veilige zone is `env()` nul en verandert er niets.

   De marge staat op de body en niet op de lade zelf: de lade is de schuifbak, en
   opvulling onderaan een schuifbak telt in sommige browsers niet mee als je tot
   het einde schuift. */
@media (max-width: 900px) {
  .rf-overlay .rf-lade-body {
    padding: 20px 20px calc(20px + env(safe-area-inset-bottom));
  }
  .rf-overlay .rf-lade-kop {
    padding: 20px;
  }
}

/* ==========================================================================
   13 SEPTEMBER 2026: de RecruFone-app in de App Store
   ========================================================================== */

/* "Zet RecruFone op je iPhone": de tip boven de kiezer op /bellen
   (app/(app)/_components/recrufone/app-tip.tsx).

   Hij draagt .rf-belmelding, dus de vorm, de breedte en de maten van de kop en
   de tekst komen uit het blok hierboven: dit is dezelfde soort regel boven
   dezelfde kaart, en twee keer dezelfde melding in twee maten leest als twee
   dingen. Wat er hier bij komt is de QR-code ernaast en de kruisknop erachter.

   De code staat links, zoals in de tip van Bellen: je scant hem met je telefoon
   en leest er daarna pas bij waarom. Past hij niet op het scherm, dan tekent het
   onderdeel hem niet en schuift de tekst gewoon naar links. */
:is(.rf-portaal, .rf-overlay) .rf-app-tip .rf-paneel-body {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px;
}
:is(.rf-portaal, .rf-overlay) .rf-app-tip-qr {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  padding: 3px;
  border: 1px solid var(--rf-haarlijn);
  border-radius: 8px;
  background: var(--rf-white);
}
/* De kruisknop staat op de rand van het vlak en niet midden in de opvulling: met
   16 pixels rondom zou hij anders met zijn 34 bij 34 de regel ernaast indrukken. */
:is(.rf-portaal, .rf-overlay) .rf-app-tip .rf-icoonknop {
  margin: -6px -6px 0 0;
}
/* De officiële badge van Apple, zwart want dit portaal is licht
   (public/recrufone/app-store-badge-nl.svg). Hier stond een secundaire knop met
   "Open in de App Store" erin, en dat is nu precies wat de marketingrichtlijnen
   van Apple niet toestaan: de badge wordt niet nagemaakt.

   Hoogte 40, de maat waarop Apple hem levert en zijn ondergrens voor het web.
   Lager dan in de hero van de site: daar staat de badge alleen onder een korte
   regel, hier staat hij in een melding naast een QR-code van 72 en hoort hij die
   niet te overstemmen. Breedte `auto`, dus de verhouding komt uit de viewBox van
   het bestand en de badge wordt niet uitgerekt.

   De marge erboven is de vrije ruimte die Apple vraagt (minstens tien procent van
   de hoogte, dus 4 pixels) plus de ruimte die de knop hiervoor had. */
:is(.rf-portaal, .rf-overlay) .rf-app-tip-badge {
  display: inline-block;
  margin-top: 10px;
  border-radius: 8px;
}
:is(.rf-portaal, .rf-overlay) .rf-app-tip-badge img {
  display: block;
  height: 40px;
  width: auto;
}
:is(.rf-portaal, .rf-overlay) .rf-app-tip-badge:hover {
  opacity: 0.85;
}
/* Geen eigen focusregel: de algemene regel bovenaan dit bestand geeft elke <a>
   in het portaal al een ring, en een tweede ring in een andere kleur zou deze
   ene link laten afwijken van de rest. */

/* ==========================================================================
   PROJECTEN
   ==========================================================================

   Een project is de werkruimte per opdrachtgever binnen één bureau: een eigen
   vacaturelijst, eigen contacten en een eigen nummer. Zie
   docs/recruitment-projecten.md.

   ALLES HIERONDER STAAT IN VARIABELEN EN NIET IN HEXWAARDEN. Elke andere kleur
   in dit bestand heeft een tegenhanger in public/restofone/portaal-tokens.css,
   en dat laagje kan niets omzetten wat het niet kent. Deze schermen bestaan
   alleen in de recruitment-editie, dus in plaats van er acht regels bij te
   schrijven die daar nooit gelden, staan ze hier op de tokens die allebei de
   merken al hebben. De enige uitzondering is de schaduw, en die is zwart met
   een alfa: die leest op elk vlak hetzelfde.

   De acht projectkleuren zijn de uitzondering op de uitzondering: die staan wél
   als waarde hier, want ze zíjn de kleur. Ze staan in custom properties, dus
   het laagje van RestoFone hoeft ze niet te kennen en de test die de dekking
   bewaakt telt ze terecht niet mee. */

/* De acht kleuren, en waarom het er acht zijn en geen kleurkiezer. Een project
   draagt zijn kleur in de bovenbalk, op een kaart en straks op een chip. Dat is
   drie plekken waar hij naast onze eigen tinten moet staan, en dan hoort hij uit
   deze stylesheet te komen en niet uit een veld waarin elk bureau zijn eigen
   paars invult. De namen staan als check-constraint op de kolom (0109) en als
   lijst in lib/projecten/types.ts (PROJECT_KLEUREN); die drie horen gelijk te
   blijven.

   Elke klasse zet twee dingen: de volle kleur van het stipje, en het zachte vlak
   met de tekstkleur voor de pil. De tinten liggen in dezelfde familie als de
   avatar-tinten bovenaan dit bestand, zodat een lijst met allebei erin niet
   uiteenvalt. */
:is(.rf-portaal, .rf-overlay) .rf-project-mint {
  --rf-project-stip: #58bd9b;
  --rf-project-vlak: #e4f6ef;
  --rf-project-tekst: #2f7a62;
}
:is(.rf-portaal, .rf-overlay) .rf-project-zand {
  --rf-project-stip: #c0a17e;
  --rf-project-vlak: #f3ece4;
  --rf-project-tekst: #86694e;
}
:is(.rf-portaal, .rf-overlay) .rf-project-oker {
  --rf-project-stip: #d3a02f;
  --rf-project-vlak: #f8efd9;
  --rf-project-tekst: #8a6712;
}
:is(.rf-portaal, .rf-overlay) .rf-project-klei {
  --rf-project-stip: #c4775c;
  --rf-project-vlak: #f7e9e3;
  --rf-project-tekst: #8d4f38;
}
:is(.rf-portaal, .rf-overlay) .rf-project-lucht {
  --rf-project-stip: #6b8ac4;
  --rf-project-vlak: #e7edf8;
  --rf-project-tekst: #4a6390;
}
:is(.rf-portaal, .rf-overlay) .rf-project-roos {
  --rf-project-stip: #c078a5;
  --rf-project-vlak: #f7e8f1;
  --rf-project-tekst: #8b4f75;
}
:is(.rf-portaal, .rf-overlay) .rf-project-salie {
  --rf-project-stip: #7f9b82;
  --rf-project-vlak: #e8efea;
  --rf-project-tekst: #55705a;
}
:is(.rf-portaal, .rf-overlay) .rf-project-inkt {
  --rf-project-stip: #565b6b;
  --rf-project-vlak: #eceef3;
  --rf-project-tekst: #3f4452;
}

/* Het stipje. Zonder kleurklasse (Alle projecten, Geen project) blijft hij leeg:
   die twee zijn geen project en horen dus geen negende kleur te krijgen. Hij
   houdt wel zijn plek, anders springt het woord ernaast heen en weer zodra je
   van een project naar "Alle projecten" wisselt. */
:is(.rf-portaal, .rf-overlay) .rf-projectstip {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
  background: var(--rf-project-stip, transparent);
}

/* --- De kiezer in de bovenbalk -------------------------------------------- */

:is(.rf-portaal, .rf-overlay) .rf-projectkiezer {
  position: relative;
  min-width: 0;
}
:is(.rf-portaal, .rf-overlay) .rf-projectknop {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 220px;
  border: 1px solid var(--rf-line);
  background: var(--rf-paneel);
  border-radius: 7px;
  padding: 7px 9px;
  font-size: 11px;
  color: var(--rf-muted);
}
:is(.rf-portaal, .rf-overlay) .rf-projectknop:hover:not(:disabled) {
  background: var(--rf-hover);
}
:is(.rf-portaal, .rf-overlay) .rf-projectknop svg {
  width: 12px;
  height: 12px;
  flex: none;
  /* Het chevron van het kruimelpad wijst naar rechts; als openknop hoort hij
     naar beneden te wijzen. Draaien in plaats van een negende icoon erbij. */
  transform: rotate(90deg);
}
:is(.rf-portaal, .rf-overlay) .rf-projectnaam {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* OP EEN TELEFOON PASTE DE BOVENBALK NIET ZODRA DEZE KIEZER ERIN STOND.
   Links staan de hamburger, het kruimelpad en de kiezer, rechts zoeken, de bel
   en de pil. Op 390 pixels was dat samen 13 tot 39 pixels te breed, en omdat
   geen van beide groepen mocht krimpen schoof elke pagina van het portaal
   zijwaarts (gemeten op 14 september 2026: 403 tot 429 pixels breed). Zonder
   projecten tekent de kiezer zichzelf weg en past de balk al; daarom verandert
   er bij RestoFone niets aan wat je ziet.

   Het gereedschap rechts krimpt niet: de pil is de knop waarmee je jezelf stil
   zet, en "Saar neemt op" hoort heel te blijven. De groep links mag krimpen, en
   de namen daarin krijgen dan een beletselteken in plaats van dat ze over de
   rand lopen. De knop volgt daarbij zijn doos. Een button is zo breed als zijn
   tekst, ook als de doos eromheen smaller wordt, en schoof dan over de zoekknop
   heen; een max-width van 100% hielp niet, want Chrome rekende dat percentage
   uit tegen de breedte van vóór het krimpen. Daarom is de doos hier een flexrij
   en mag de knop daarin krimpen.

   Onder 560 pixels valt het kruimelpad weg zodra de kiezer er staat. Allebei
   afgekort ("Van...", "Alle proj...") leest als twee kapotte woorden. De naam
   van de pagina staat een regel lager nog eens als kop; welk project je bekijkt
   staat nergens anders. */
@media (max-width: 900px) {
  :is(.rf-portaal, .rf-overlay) .rf-topbalk > .rf-rij:first-child {
    min-width: 0;
  }
  :is(.rf-portaal, .rf-overlay) .rf-topgereedschap {
    flex: none;
  }
  :is(.rf-portaal, .rf-overlay) .rf-kruimel {
    min-width: 0;
  }
  :is(.rf-portaal, .rf-overlay) .rf-kruimel > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  :is(.rf-portaal, .rf-overlay) .rf-projectkiezer {
    display: flex;
  }
  :is(.rf-portaal, .rf-overlay) .rf-projectknop {
    min-width: 0;
  }
}
@media (max-width: 560px) {
  :is(.rf-portaal, .rf-overlay) .rf-topbalk:has(.rf-projectkiezer) .rf-kruimel {
    display: none;
  }
}

:is(.rf-portaal, .rf-overlay) .rf-projectlijst {
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  min-width: 220px;
  max-width: min(320px, calc(100vw - 24px));
  background: var(--rf-paneel);
  border: 1px solid var(--rf-line);
  border-radius: 12px;
  box-shadow: 0 18px 50px rgb(15 23 42 / 12%);
  z-index: 60;
  overflow: hidden;
  padding: 5px;
}
:is(.rf-portaal, .rf-overlay) .rf-projectregel {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  border: 0;
  background: transparent;
  border-radius: 7px;
  padding: 8px 9px;
  font-size: 12px;
  color: var(--rf-ink);
  text-align: left;
}
:is(.rf-portaal, .rf-overlay) .rf-projectregel:hover {
  background: var(--rf-rij-hover);
}
:is(.rf-portaal, .rf-overlay) .rf-projectregel.rf-actief {
  background: var(--rf-hover);
  font-weight: 600;
}
:is(.rf-portaal, .rf-overlay) .rf-projectbeheer {
  display: block;
  margin-top: 5px;
  padding: 9px;
  border-top: 1px solid var(--rf-haarlijn);
  font-size: 11px;
  color: var(--rf-muted);
}
:is(.rf-portaal, .rf-overlay) .rf-projectbeheer:hover {
  color: var(--rf-ink);
}

/* --- De pil op een kaart en in een lijst ---------------------------------- */

:is(.rf-portaal, .rf-overlay) .rf-projectpil {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 7px;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 600;
  max-width: 180px;
  background: var(--rf-project-vlak, var(--rf-haarlijn));
  color: var(--rf-project-tekst, var(--rf-muted));
}
:is(.rf-portaal, .rf-overlay) .rf-projectpil > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* In de pil is het stipje kleiner: hij staat naast een woord van tien punten en
   niet naast een knop. */
:is(.rf-portaal, .rf-overlay) .rf-projectpil .rf-projectstip {
  width: 6px;
  height: 6px;
}
/* Een project dat opgeborgen is. De pil blijft staan, want het gesprek ging er
   wel degelijk over, maar hij dringt zich niet meer op: dit is niets waar nog
   iets mee gedaan wordt. */
:is(.rf-portaal, .rf-overlay) .rf-projectpil-uit {
  opacity: 0.55;
  font-style: italic;
}

/* --- Het projectenscherm onder Instellingen ------------------------------- */

/* Rijen en geen tabel: er staan drie dingen per regel (de naam, wat eraan hangt,
   het nummer) en een tabel van drie kolommen waarvan er twee stil zijn leest als
   een formulier. */
:is(.rf-portaal, .rf-overlay) .rf-projectlijstscherm {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
:is(.rf-portaal, .rf-overlay) .rf-projectrijen {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--rf-haarlijn);
  border-radius: 10px;
  overflow: hidden;
}
:is(.rf-portaal, .rf-overlay) .rf-projectrijen > li + li {
  border-top: 1px solid var(--rf-haarlijn);
}
:is(.rf-portaal, .rf-overlay) .rf-projectrij {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  color: var(--rf-ink);
}
:is(.rf-portaal, .rf-overlay) .rf-projectrij:hover {
  background: var(--rf-rij-hover);
}
:is(.rf-portaal, .rf-overlay) .rf-projectrij strong {
  display: block;
  font-size: 12px;
  font-weight: 600;
}
:is(.rf-portaal, .rf-overlay) .rf-projectrij small {
  display: block;
  font-size: 11px;
  color: var(--rf-muted);
  margin-top: 2px;
}
:is(.rf-portaal, .rf-overlay) .rf-projectrij .rf-icoon {
  width: 14px;
  height: 14px;
  color: var(--rf-muted);
  flex: none;
}
:is(.rf-portaal, .rf-overlay) .rf-archiefkop {
  margin: 8px 0 0;
  color: var(--rf-muted);
}
:is(.rf-portaal, .rf-overlay) .rf-projectvoet {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--rf-haarlijn);
  padding-top: 16px;
}

/* --- Het formulier van een project ---------------------------------------- */

:is(.rf-portaal, .rf-overlay) .rf-projectformulier {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* Een fieldset draagt zijn label in een legend en niet in een span, en die twee
   horen er hetzelfde uit te zien. */
:is(.rf-portaal, .rf-overlay) .rf-veld:is(fieldset) {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
:is(.rf-portaal, .rf-overlay) .rf-veld > legend {
  font-size: 11px;
  font-weight: 550;
  margin-bottom: 7px;
  padding: 0;
  color: var(--rf-ink);
}
:is(.rf-portaal, .rf-overlay) .rf-formulier-voet {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

/* De acht kleuren als rondjes. Een keuzelijst met woorden zou de kleur laten
   lezen in plaats van zien, en dat is precies waar hij niet voor is. */
:is(.rf-portaal, .rf-overlay) .rf-kleurrij {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}
:is(.rf-portaal, .rf-overlay) .rf-kleurknop {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: var(--rf-project-vlak);
  box-shadow: inset 0 0 0 8px var(--rf-project-stip);
  padding: 0;
}
:is(.rf-portaal, .rf-overlay) .rf-kleurknop.rf-actief {
  border-color: var(--rf-ink);
}

/* De uitklap "Telefonie": vier velden die je hooguit één keer invult, en die in
   golf 1 nog niets doen. Dicht is de stand waarin dit formulier vier regels
   lang is. */
:is(.rf-portaal, .rf-overlay) .rf-uitklap-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--rf-haarlijn);
  border-radius: 10px;
  background: var(--rf-canvas);
}
:is(.rf-portaal, .rf-overlay) .rf-vinkregel {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 11px;
  color: var(--rf-ink);
}
:is(.rf-portaal, .rf-overlay) .rf-vinkregel input {
  width: auto;
  accent-color: var(--rf-ink);
}
:is(.rf-portaal, .rf-overlay) .rf-belvensterveld {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}
:is(.rf-portaal, .rf-overlay) .rf-dagrij {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
/* De twee uurkeuzes naast elkaar en niet over de volle breedte: een select met
   "9:00" erin hoort niet zo breed te zijn als een naamveld. */
:is(.rf-portaal, .rf-overlay) .rf-belvensterveld select {
  width: auto;
  min-width: 92px;
}

/* Op een telefoon is de bovenbalk al vol met de hamburger, het kruimelpad en
   drie stuks gereedschap. De kiezer blijft staan (hij zegt waar je naar kijkt,
   en dat mag je onderweg niet kwijtraken) maar geeft zijn breedte op. */
@media (max-width: 900px) {
  :is(.rf-portaal, .rf-overlay) .rf-projectknop {
    max-width: 130px;
  }
}

/* --- De afrondstap na een gesprek ----------------------------------------- */

/* Na het ophangen staat in het belpaneel en op /bellen "Gesprek afgerond", met
   het verslag om na te lopen (webphone/recrufone-afronden.tsx). Het formulier
   zelf (.rf-bewerker) staat ook op de gesprekspagina achter "Aanpassen"
   (gesprekken/verslag-bewerker.tsx); vandaar :is(.rf-portaal, .rf-overlay) en
   geen regels die alleen in het paneel gelden. */
:is(.rf-portaal, .rf-overlay) .rf-afronden-kop {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}
:is(.rf-portaal, .rf-overlay) .rf-afronden-wie {
  display: flex;
  align-items: center;
  gap: 10px;
}
:is(.rf-portaal, .rf-overlay) .rf-afronden-wie strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--rf-ink);
}
:is(.rf-portaal, .rf-overlay) .rf-afronden-wie span {
  display: block;
  font-size: 11px;
  color: var(--rf-muted);
}
/* In het zwevende paneel mag de stap niet onder de rand van het scherm zakken:
   een verslag met acht acties is hoger dan een laptopscherm min de belknop. Dan
   scrolt de stap binnen het paneel. De marge en de padding heffen elkaar op en
   laten ruimte voor de focusrand, die de overflow anders afknipt. */
.rf-overlay.rf-kiezer .rf-afronden {
  max-height: min(70vh, 620px);
  overflow-y: auto;
  margin: -4px;
  padding: 4px;
}
:is(.rf-portaal, .rf-overlay) .rf-afronden > .rf-hulptekst,
:is(.rf-portaal, .rf-overlay) .rf-afronden > .rf-fout {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
}
:is(.rf-portaal, .rf-overlay) .rf-afronden > .rf-bewerker-knoppen {
  margin-top: 14px;
}
/* Wachten op het verslag: dezelfde zachte kaart als "Jouw volgende stap", want
   daar gaat het straks ook over. */
:is(.rf-portaal, .rf-overlay) .rf-afronden-wacht {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: linear-gradient(115deg, #f1f3fa, #f6f2fb);
  border: 1px solid #e0def0;
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 12px;
  line-height: 1.6;
  color: #414957;
}
:is(.rf-portaal, .rf-overlay) .rf-afronden-wacht strong {
  display: block;
  font-size: 12px;
  font-weight: 650;
  color: #4a4372;
}
:is(.rf-portaal, .rf-overlay) .rf-afronden-wacht p {
  margin: 2px 0 0;
}
:is(.rf-portaal, .rf-overlay) .rf-afronden-laden {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  border-radius: 50%;
  border: 2px solid #d9d4ef;
  border-top-color: #7661b3;
  animation: rf-afronden-draai 0.9s linear infinite;
}
@keyframes rf-afronden-draai {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  :is(.rf-portaal, .rf-overlay) .rf-afronden-laden {
    animation: none;
  }
}

/* Het formulier: de samenvatting, de acties en de knoppen. */
:is(.rf-portaal, .rf-overlay) .rf-bewerker {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
:is(.rf-portaal, .rf-overlay) .rf-verslagkaart h3 + .rf-bewerker {
  margin-top: 14px;
}
:is(.rf-portaal, .rf-overlay) .rf-bewerker-veld {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
:is(.rf-portaal, .rf-overlay) .rf-bewerker-veld > span,
:is(.rf-portaal, .rf-overlay) .rf-bewerker-veld > legend {
  display: block;
  padding: 0;
  margin-bottom: 7px;
  font-size: 11px;
  font-weight: 600;
  color: var(--rf-ink);
}
:is(.rf-portaal, .rf-overlay) .rf-bewerker :is(input, textarea) {
  background: var(--rf-paneel);
  border: 1px solid #dfe1e7;
  border-radius: 9px;
  padding: 9px 12px;
  color: var(--rf-ink);
  width: 100%;
  font: inherit;
  font-size: 12px;
  line-height: 1.6;
}
:is(.rf-portaal, .rf-overlay) .rf-bewerker textarea {
  resize: vertical;
  min-height: 110px;
}
:is(.rf-portaal, .rf-overlay) .rf-bewerker :is(input, textarea):focus-visible {
  outline: 3px solid #7898ee;
  outline-offset: 3px;
}
:is(.rf-portaal, .rf-overlay) .rf-bewerker-acties {
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
:is(.rf-portaal, .rf-overlay) .rf-bewerker-acties li {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
/* Een actie is een tekstvak van één regel dat meegroeit met de tekst (de hoogte
   zet verslag-bewerker.tsx), zodat een lange actie niet onzichtbaar het veld
   uitloopt. Geen sleepgreep en geen minimale hoogte van de samenvatting. */
:is(.rf-portaal, .rf-overlay) .rf-bewerker-acties textarea {
  resize: none;
  min-height: 0;
  overflow: hidden;
}
/* Het kruisje (34px) staat bij de eerste regel van het tekstvak (39px hoog). */
:is(.rf-portaal, .rf-overlay) .rf-bewerker-acties .rf-icoonknop {
  flex: none;
  margin-top: 3px;
}
:is(.rf-portaal, .rf-overlay) .rf-bewerker .rf-hulptekst {
  margin: 6px 0 0;
  font-size: 11px;
  line-height: 1.6;
  color: var(--rf-muted);
}
:is(.rf-portaal, .rf-overlay) .rf-bewerker .rf-fout {
  margin: 0;
  font-size: 11px;
  color: #b76859;
}
:is(.rf-portaal, .rf-overlay) .rf-bewerker-knoppen {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

/* De kandidaatvelden in het formulier: twee kolommen, de motivatie over de hele
   breedte. Op een smal scherm (het belpaneel, een telefoon) onder elkaar. */
:is(.rf-portaal, .rf-overlay) .rf-bewerker-velden {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
}
:is(.rf-portaal, .rf-overlay) .rf-bewerker-velden .rf-bewerker-breed {
  grid-column: 1 / -1;
}
:is(.rf-portaal, .rf-overlay) .rf-bewerker-velden textarea {
  min-height: 0;
}
:is(.rf-portaal, .rf-overlay) .rf-afronden .rf-bewerker-velden {
  grid-template-columns: minmax(0, 1fr);
}
@media (max-width: 560px) {
  :is(.rf-portaal, .rf-overlay) .rf-bewerker-velden {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* "Zet in profiel" (gesprekken/profiel-knop.tsx): de knop met een korte melding
   ernaast, en de bevestiging met per veld de nieuwe en de oude waarde. */
:is(.rf-portaal, .rf-overlay) .rf-profielknop {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}
:is(.rf-portaal, .rf-overlay) .rf-profielknop .rf-hulptekst,
:is(.rf-portaal, .rf-overlay) .rf-profielknop .rf-fout {
  margin: 0;
  font-size: 11px;
}
:is(.rf-portaal, .rf-overlay) .rf-profielbevestiging {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid #dfe1e7;
  border-radius: 9px;
  background: var(--rf-paneel);
  font-size: 12px;
}
:is(.rf-portaal, .rf-overlay) .rf-profielbevestiging > p {
  margin: 0 0 8px;
  color: var(--rf-ink);
}
:is(.rf-portaal, .rf-overlay) .rf-profielbevestiging ul {
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
:is(.rf-portaal, .rf-overlay) .rf-profielbevestiging li {
  display: grid;
  grid-template-columns: minmax(0, 130px) minmax(0, 1fr);
  gap: 2px 10px;
}
:is(.rf-portaal, .rf-overlay) .rf-profielbevestiging li strong {
  font-weight: 600;
}
:is(.rf-portaal, .rf-overlay) .rf-profielbevestiging li small {
  grid-column: 2;
  color: var(--rf-muted);
  font-size: 11px;
}

/* Het profiel op de kandidaatkaart (kandidaten/[id]/profiel-paneel.tsx): onder
   elke waarde waar hij vandaan kwam, en de motivatie over de hele breedte. */
:is(.rf-portaal, .rf-overlay) .rf-feiten .rf-feit-breed {
  grid-column: 1 / -1;
}
:is(.rf-portaal, .rf-overlay) .rf-feiten .rf-profielherkomst {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  font-weight: 400;
}

/* De regel onder een verslag dat iemand heeft aangepast: klein en rustig, een
   noot bij wat er staat. */
:is(.rf-portaal, .rf-overlay) .rf-verslagkaart > p.rf-aangepast {
  margin: 8px 0 0;
  font-size: 10px;
  line-height: 1.6;
  color: var(--rf-muted);
}

/* Het transcript corrigeren: per beurt een tekstvak met het sprekerlabel erboven.

   Het label is tekst en geen invoer, en dat is met opzet: bij een live gesprek is
   het gemeten per been en bij een transcript uit de opname is het afgeleid, maar
   in geen van beide gevallen is het iets waar een lezer aan hoort te draaien. Zie
   de kop van transcript-corrigeren.tsx.

   De velden erven de omlijsting van .rf-bewerker (en daarmee ook de tokens van
   RestoFone); hier staat alleen wat een beurt anders maakt dan een actie: een
   label erboven, en geen kruisje ernaast omdat er niets weg kan. */
:is(.rf-portaal, .rf-overlay) .rf-correctie > .rf-hulptekst {
  margin: 0;
}
:is(.rf-portaal, .rf-overlay) .rf-correctie-regels {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
:is(.rf-portaal, .rf-overlay) .rf-correctie-regels strong {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--rf-muted);
}
/* Meegroeiend met de tekst (de hoogte zet transcript-corrigeren.tsx), zonder
   sleepgreep en zonder de minimale hoogte van de samenvatting. */
:is(.rf-portaal, .rf-overlay) .rf-correctie-regels textarea {
  resize: none;
  min-height: 0;
  overflow: hidden;
}

/* Het voorstelblad (lib/voorstel): de standaard onder Instellingen
   (instellingen/voorstelblad), de bewerker met het voorbeeld ernaast
   (kandidaten/[id]/voorstel/[vid]) en de lijst op de kandidaatkaart. Het blad zelf
   heeft een eigen opmaak in app/voorstel/_blad/blad-stijl.ts, want dat is van het
   bureau en niet van dit portaal. */
:is(.rf-portaal, .rf-overlay) .rf-vformulier {
  gap: 0;
}
:is(.rf-portaal, .rf-overlay) .rf-vsectie {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 0;
  border-top: 1px solid var(--rf-line);
}
:is(.rf-portaal, .rf-overlay) .rf-vsectie:first-of-type {
  border-top: 0;
  padding-top: 4px;
}
:is(.rf-portaal, .rf-overlay) .rf-vsectie .rf-sectiekop {
  margin: 0;
}
:is(.rf-portaal, .rf-overlay) .rf-vschakel {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
:is(.rf-portaal, .rf-overlay) .rf-vschakel strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
}
:is(.rf-portaal, .rf-overlay) .rf-vschakel small,
:is(.rf-portaal, .rf-overlay) .rf-vbeeld small,
:is(.rf-portaal, .rf-overlay) .rf-bewerker-veld > small {
  display: block;
  margin-top: 3px;
}
:is(.rf-portaal, .rf-overlay) .rf-vbeeld {
  display: flex;
  gap: 16px;
  align-items: center;
}
:is(.rf-portaal, .rf-overlay) .rf-vbeeld-vak {
  flex: none;
  width: 132px;
  height: 88px;
  border: 1px dashed #d4d6de;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #fafafc;
  text-align: center;
  padding: 6px;
}
:is(.rf-portaal, .rf-overlay) .rf-vbeeld-vak img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
}
:is(.rf-portaal, .rf-overlay) .rf-vbeeld-logo img {
  object-fit: contain;
}
:is(.rf-portaal, .rf-overlay) .rf-bewerker input[type="color"] {
  padding: 3px;
  height: 40px;
  cursor: pointer;
}
:is(.rf-portaal, .rf-overlay) .rf-bewerker select {
  background: var(--rf-paneel);
  border: 1px solid #dfe1e7;
  border-radius: 9px;
  padding: 8px 10px;
  color: var(--rf-ink);
  width: 100%;
  font: inherit;
  font-size: 12px;
}
:is(.rf-portaal, .rf-overlay) .rf-vdrie {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
:is(.rf-portaal, .rf-overlay) .rf-vpersonen {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
:is(.rf-portaal, .rf-overlay) .rf-vpersoon {
  border: 1px solid var(--rf-line);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 0;
  min-width: 0;
}
:is(.rf-portaal, .rf-overlay) .rf-vpersoon legend {
  padding: 0 4px;
}
:is(.rf-portaal, .rf-overlay) .rf-vregel {
  display: flex;
  gap: 12px;
  align-items: center;
}
:is(.rf-portaal, .rf-overlay) .rf-vregel .rf-bewerker-veld {
  flex: 1;
}
:is(.rf-portaal, .rf-overlay) .rf-vregel input:disabled {
  opacity: 0.55;
}
:is(.rf-portaal, .rf-overlay) .rf-vacties {
  flex-wrap: wrap;
  justify-content: flex-end;
}
:is(.rf-portaal, .rf-overlay) .rf-vraster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  margin-top: 14px;
}
:is(.rf-portaal, .rf-overlay) .rf-vvoorbeeld {
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  border-radius: 14px;
  background: #f3f2f7;
  padding: 14px;
}
:is(.rf-portaal, .rf-overlay) .rf-vvoorbeeld > .rf-eyebrow {
  margin: 0 0 10px;
}
:is(.rf-portaal, .rf-overlay) .rf-vlijst {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
:is(.rf-portaal, .rf-overlay) .rf-vlijst li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--rf-line);
}
:is(.rf-portaal, .rf-overlay) .rf-vlijst li:last-child {
  border-bottom: 0;
}
@media (max-width: 1100px) {
  :is(.rf-portaal, .rf-overlay) .rf-vraster {
    grid-template-columns: minmax(0, 1fr);
  }
  :is(.rf-portaal, .rf-overlay) .rf-vvoorbeeld {
    position: static;
    max-height: none;
  }
}
@media (max-width: 560px) {
  :is(.rf-portaal, .rf-overlay) .rf-vdrie {
    grid-template-columns: minmax(0, 1fr);
  }
  :is(.rf-portaal, .rf-overlay) .rf-vbeeld {
    align-items: flex-start;
  }
}

/* Versie 2 van het voorstel (kandidaten/[id]/voorstel): de vier stappen, de
   punten van de verzendregels, het dossier, de vervolgvragen, de bronnen en het
   delen. Alleen kleuren uit de variabelen van het portaal, zodat RestoFone en
   FysioFone ze met hun eigen tinten overnemen. Op een telefoon is elke stap een
   eigen scherm en het voorbeeld een scherm erachter (.rf-vmet-voorbeeld). */
:is(.rf-portaal, .rf-overlay) .rf-vzin {
  display: flex;
  gap: 12px;
  align-items: baseline;
  flex-wrap: wrap;
  padding: 12px 16px;
  margin: 4px 0 12px;
  border-radius: 12px;
  border: 1px solid var(--rf-line);
  background: var(--rf-paneel);
}
:is(.rf-portaal, .rf-overlay) .rf-vzin strong {
  font-weight: 600;
}
:is(.rf-portaal, .rf-overlay) .rf-vzin-klaar {
  border-color: var(--rf-mint);
}
:is(.rf-portaal, .rf-overlay) .rf-vstappen {
  display: flex;
  align-items: flex-end;
  gap: 12px;
}
:is(.rf-portaal, .rf-overlay) .rf-vstappen > .rf-tabs {
  flex: 1;
  margin-bottom: 0;
}
:is(.rf-portaal, .rf-overlay) .rf-vvoorbeeld-knop {
  display: none;
  border: 1px solid var(--rf-line);
  background: var(--rf-paneel);
  color: var(--rf-ink);
  border-radius: 999px;
  padding: 6px 14px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  flex: none;
  margin-bottom: 8px;
}
:is(.rf-portaal, .rf-overlay) .rf-vvoorbeeld-knop.rf-actief {
  background: var(--rf-ink);
  color: var(--rf-white);
}
:is(.rf-portaal, .rf-overlay) .rf-vkeuzes {
  border: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
:is(.rf-portaal, .rf-overlay) .rf-vkeuzes legend {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 6px;
}
:is(.rf-portaal, .rf-overlay) .rf-vkeuze {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border: 1px solid var(--rf-line);
  border-radius: 10px;
  cursor: pointer;
}
:is(.rf-portaal, .rf-overlay) .rf-vkeuze.rf-actief {
  border-color: var(--rf-ink);
}
:is(.rf-portaal, .rf-overlay) .rf-vkeuze strong {
  display: block;
  font-size: 13px;
}
:is(.rf-portaal, .rf-overlay) .rf-vkeuze input {
  margin-top: 3px;
}
:is(.rf-portaal, .rf-overlay) .rf-vzonderrand {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
:is(.rf-portaal, .rf-overlay) :is(.rf-vpunten, .rf-vvragen, .rf-vdossier, .rf-vversies, .rf-vwerkgevers, .rf-vwaarschuwingen) {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
:is(.rf-portaal, .rf-overlay) :is(.rf-vpunten, .rf-vvragen, .rf-vdossier, .rf-vversies) > li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rf-line);
}
:is(.rf-portaal, .rf-overlay) :is(.rf-vpunten, .rf-vvragen, .rf-vdossier, .rf-vversies) > li:last-child {
  border-bottom: 0;
}
:is(.rf-portaal, .rf-overlay) .rf-vversies > li {
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
}
:is(.rf-portaal, .rf-overlay) .rf-vversies small,
:is(.rf-portaal, .rf-overlay) .rf-vlijst li small,
:is(.rf-portaal, .rf-overlay) .rf-vvraag small,
:is(.rf-portaal, .rf-overlay) .rf-vtegen small {
  display: block;
}
:is(.rf-portaal, .rf-overlay) .rf-vsegment {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
:is(.rf-portaal, .rf-overlay) .rf-vsegment button {
  border: 1px solid var(--rf-line);
  background: var(--rf-paneel);
  color: var(--rf-ink);
  border-radius: 999px;
  padding: 5px 12px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
:is(.rf-portaal, .rf-overlay) .rf-vsegment button.rf-actief {
  background: var(--rf-ink);
  border-color: var(--rf-ink);
  color: var(--rf-white);
}
:is(.rf-portaal, .rf-overlay) .rf-vtegen ul {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
:is(.rf-portaal, .rf-overlay) .rf-vtegen li {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border: 1px dashed var(--rf-line);
  border-radius: 10px;
}
:is(.rf-portaal, .rf-overlay) .rf-vinvoer {
  background: var(--rf-paneel);
  border: 1px solid var(--rf-line);
  border-radius: 9px;
  padding: 7px 10px;
  color: var(--rf-ink);
  font: inherit;
  font-size: 12px;
  min-width: 0;
}
:is(.rf-portaal, .rf-overlay) .rf-vvraag label {
  align-items: flex-start;
  cursor: pointer;
}
:is(.rf-portaal, .rf-overlay) .rf-vvraag label input {
  margin-top: 3px;
}
:is(.rf-portaal, .rf-overlay) .rf-vwerkgevers {
  gap: 8px;
}
:is(.rf-portaal, .rf-overlay) .rf-vwerkgevers li {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
:is(.rf-portaal, .rf-overlay) .rf-vwerkgever-naam {
  font-weight: 600;
  font-size: 13px;
  min-width: 140px;
}
:is(.rf-portaal, .rf-overlay) .rf-vwaarschuwingen {
  gap: 6px;
}
:is(.rf-portaal, .rf-overlay) .rf-vdossier-veld {
  margin: 0;
  font-size: 13px;
}
:is(.rf-portaal, .rf-overlay) .rf-vdossier-veld > span {
  color: var(--rf-muted);
}
:is(.rf-portaal, .rf-overlay) .rf-vdossier .rf-linkknop {
  align-self: flex-start;
  font-size: 12px;
}
:is(.rf-portaal, .rf-overlay) .rf-vbron {
  border-top: 1px dashed var(--rf-line);
  padding-top: 10px;
  font-size: 13px;
}
:is(.rf-portaal, .rf-overlay) .rf-vbron summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 12px;
  color: var(--rf-muted);
}
:is(.rf-portaal, .rf-overlay) .rf-vbron ul {
  margin: 8px 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
:is(.rf-portaal, .rf-overlay) .rf-vfragment {
  display: block;
  font-style: italic;
  color: var(--rf-muted);
  margin-top: 2px;
}
:is(.rf-portaal, .rf-overlay) .rf-vschrijfbalk,
:is(.rf-portaal, .rf-overlay) .rf-vbehouden {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid var(--rf-line);
  background: var(--rf-paneel);
}
:is(.rf-portaal, .rf-overlay) .rf-vbehouden {
  flex-direction: column;
  align-items: flex-start;
  border-color: var(--rf-ink);
}
:is(.rf-portaal, .rf-overlay) .rf-vbehouden p {
  margin: 0;
  font-size: 13px;
}
:is(.rf-portaal, .rf-overlay) .rf-veis .rf-vregel {
  flex-wrap: wrap;
}
:is(.rf-portaal, .rf-overlay) .rf-vextra {
  margin: 10px 0 0;
}
:is(.rf-portaal, .rf-overlay) .rf-vkanalen {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
:is(.rf-portaal, .rf-overlay) .rf-vkanaal {
  text-align: left;
  border: 1px solid var(--rf-line);
  background: var(--rf-paneel);
  color: var(--rf-ink);
  border-radius: 12px;
  padding: 12px 14px;
  font: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
:is(.rf-portaal, .rf-overlay) .rf-vkanaal:hover:not(:disabled) {
  border-color: var(--rf-ink);
}
:is(.rf-portaal, .rf-overlay) .rf-vkanaal:disabled {
  opacity: 0.55;
  cursor: default;
}
:is(.rf-portaal, .rf-overlay) .rf-vkanaal strong {
  font-size: 13px;
}
:is(.rf-portaal, .rf-overlay) .rf-vregels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
:is(.rf-portaal, .rf-overlay) .rf-vgesprekknoppen {
  flex-wrap: wrap;
  align-items: flex-start;
  margin-top: 12px;
}
:is(.rf-portaal, .rf-overlay) .rf-vgesprekknoppen > .rf-profielknop {
  margin-top: 0;
}
:is(.rf-portaal, .rf-overlay) .rf-vnieuw {
  max-width: 720px;
}
@media (max-width: 1100px) {
  :is(.rf-portaal, .rf-overlay) .rf-vvoorbeeld-knop {
    display: inline-flex;
  }
  :is(.rf-portaal, .rf-overlay) .rf-vraster:not(.rf-vmet-voorbeeld) > .rf-vvoorbeeld {
    display: none;
  }
  :is(.rf-portaal, .rf-overlay) .rf-vraster.rf-vmet-voorbeeld > .rf-kaartkolom {
    display: none;
  }
}
@media (max-width: 560px) {
  :is(.rf-portaal, .rf-overlay) .rf-vkanalen,
  :is(.rf-portaal, .rf-overlay) .rf-vregels {
    grid-template-columns: minmax(0, 1fr);
  }
  :is(.rf-portaal, .rf-overlay) .rf-vstappen {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  :is(.rf-portaal, .rf-overlay) .rf-vvoorbeeld-knop {
    align-self: flex-end;
  }
}
:is(.rf-portaal, .rf-overlay) .rf-bewerker :is(input[type="radio"], input[type="checkbox"]) {
  width: auto;
  flex: none;
  padding: 0;
  margin-top: 3px;
}