/* Tokens. De enige plek waar een kleur, font of maat een waarde krijgt.
   Geknipt uit brand-head.blade.php op 31-07-2026, ongewijzigd. */
    :root {
        --vivi-ink: #2B2419;      /* warm bijna-zwart espresso */
        --vivi-cream: #ECE8DD;    /* gebroken wit */
        --vivi-cream-2: #F4F1E9;  /* lichtere cream voor kaarten */
        --vivi-gold: #EBB22E;     /* goudgeel accent */
        /* Display-font = Poppins (referentie-stijl). Het merk zelf is sinds
           24-09-2026 het woordmerk als beeld (x-vivi.woordmerk); Playfair wordt
           nergens meer geladen. De variabele heet nog vivi-serif zodat alle
           bestaande koppen in één keer meegaan.

           'Inter' is hier alleen systeemterugval: er wordt nergens een
           Inter-bestand geladen, brand-head.blade.php haalt Poppins op
           en verder niets. Zie je Inter op het scherm, dan mist
           Poppins. De panelen zetten Poppins met de LocalFontProvider en
           laden zelf geen fontstylesheet meer (WP-U3); houd die naam gelijk
           aan deze, anders wijst Filament's eigen laag een ander font aan. */
        --vivi-serif: 'Poppins', 'Inter', sans-serif;

        /* Uit Romeo's laag, nodig voor de agenda-kalender en de meekijk-banner.
           Zelfde palet, alleen niet eerder als variabele vastgelegd. */
        --vivi-muted: #6E6352;
        /* Muted was #8A7E6B: op wit 3,98:1 en op cream 3,25:1, dus onder AA
           voor de kleine tekst (kicker, meta, page-sub) waar hij in 98 van de
           105 gevallen voor staat. #6E6352 is dezelfde tint, 70% muted en 30%
           ink: 5,90:1 op wit, 4,78:1 op cream, 5,22:1 op cream-2. De oude
           waarde blijft voor vlakken zonder tekst (stip, grafieksegment), waar
           3:1 de eis is; tekst hoort daar niet op. Gemeten 22-10-2026. */
        --vivi-muted-vlak: #8A7E6B;
        --vivi-line: rgba(43, 36, 25, 0.10);
        --vivi-line-strong: rgba(43, 36, 25, 0.20);
        --vivi-gold-press: #D9A122;
        --vivi-shadow-float: 0 24px 60px -28px rgba(43, 36, 25, 0.35);
        --vivi-glass: blur(14px) saturate(120%);
        --vivi-ok: #4D8F5F;
        --vivi-info: #4A6B9A;
        --vivi-warn: #B5762A;
        /* Rood was er al: #9B2C2C staat 24x in de blades en #F3D2D2 11x, altijd
           voor hetzelfde (te laat, mislukt, geweigerd). Hij had alleen nooit een
           naam. Dit is dus geen nieuwe kleur maar een bestaande die eindelijk
           vastligt. Amber (--vivi-warn) betekent "vraagt aandacht", rood
           betekent "er gaat iets mis"; die twee niet door elkaar gebruiken. */
        --vivi-fout: #9B2C2C;
        --vivi-fout-vlak: #F3D2D2;
        /* Zand: de kleur van "nog geen kleur gekozen". Staat 11x in de blades,
           9x als terugval voor een klant zonder eigen merkkleur en 2x als de
           neutrale funnelfase. Ook dit is een bestaande kleur die een naam
           krijgt, geen nieuwe. */
        --vivi-zand: #9B8B6E;

        /* Hoogte van de hoofdbalk. Dit is de enige plek waar dat getal staat.
           Elke pagina die de volle vensterhoogte wil, rekent hiermee. Stond
           eerder als 7.5rem en 12rem los in drie regels verspreid, waardoor een
           compactere balk stilletjes een gat of een overloop opleverde op de
           agenda, het dashboard en de agent-chat. */
        --vivi-hoofdbalk-h: 3.25rem;
        /* Wat een 100dvh-pagina overhoudt: venster min balk min de lucht eronder. */
        --vivi-paginahoogte: calc(100dvh - var(--vivi-hoofdbalk-h) - 2.25rem);

        /* ===================================================================
           SCHALEN, toegevoegd 31-07-2026. Vanaf hier kiest niemand meer zelf
           een getal: je kiest een stap. De stappen zijn niet verzonnen maar
           afgeleid uit wat er al stond, zodat omzetten vrijwel niets verschuift.

           Gemeten op 31-07-2026 in de stijllaag en de 72 blades:
             font-size      40 unieke waarden in CSS + 44 in inline-styles
             border-radius  19 unieke waarden
             box-shadow     17 unieke waarden, allemaal precies 1x
             gap            14 unieke waarden
           De mappingtabel oude waarde -> stap staat in docs/DESIGNSYSTEEM.md.
           =================================================================== */

        /* Type. Zeven stappen: vier voor tekst, drie voor koppen. Elke stap is
           een cluster uit de meting, met de zwaarst gebruikte waarde als anker.
           Het plan mikte op zes; meten gaf zeven clusters met elk een eigen taak,
           en 1.45rem paginatitel samenvoegen met 2.6rem cijferblok is geen schaal
           maar verlies. Verhouding loopt bewust op: strak onderin, ruim bovenin. */
        --vivi-tekst-xs: .68rem;   /* microlabel, badge, statlabel   (was .6 t/m .7) */
        --vivi-tekst-s: .76rem;    /* bijschrift, meta, tabelkop     (was .72 t/m .78, 140x) */
        --vivi-tekst-m: .85rem;    /* lopende tekst, standaard       (was .8 t/m .88, 163x) */
        --vivi-tekst-l: 1rem;      /* lead, kaarttitel               (was .9 t/m 1.08) */
        --vivi-kop-s: 1.25rem;     /* sectiekop, h2                  (was 1.1 t/m 1.35) */
        --vivi-kop-m: 1.55rem;     /* paginatitel, h1                (was 1.45 t/m 1.7) */
        --vivi-kop-l: 2.1rem;      /* cijferblok, cover              (was 1.8 t/m 2.6) */

        /* Radius. Vijf maten plus twee vormen. 9999px was al met afstand de
           meestgebruikte (26x); die blijft precies zoals hij is. */
        --vivi-radius-xs: 4px;     /* voortgangssegment              (was 3px) */
        --vivi-radius-s: 8px;      /* chip, kleine knop              (was 7, 8, 9px) */
        --vivi-radius-m: 12px;     /* knop, invoerveld               (was 10 t/m 14px) */
        --vivi-radius-l: 16px;     /* kaart op mobiel                (was 16, 18px) */
        --vivi-radius-xl: 20px;    /* kaart op desktop               (was 20, 22, 24px) */
        --vivi-radius-pil: 9999px; /* pil, zoekbalk, badge */
        --vivi-radius-rond: 50%;   /* avatar, orb */

        /* Schaduw. Drie hoogtes plus de focusring. Alle zeventien bestaande
           waarden kwamen exact 1x voor, dus er was geen enkele afspraak.
           De gouden gloed van de Lois-orb blijft een eenmalig effect. */
        --vivi-schaduw-rust: 0 2px 12px rgba(43, 36, 25, .05);
        --vivi-schaduw-zweef: 0 8px 24px rgba(43, 36, 25, .10);
        --vivi-schaduw-drijf: 0 18px 44px -12px rgba(43, 36, 25, .28);
        --vivi-ring-focus: 0 0 0 3px rgba(235, 178, 46, .25);

        /* Ruimte. Dit is de schaal die bepaalt of een scherm rustig of vermoeiend
           oogt, veel meer dan de fontgrootte. Zeven stappen, afgeleid uit de
           veertien gap-waarden die er stonden. */
        --vivi-ruimte-2xs: .25rem;  /* binnen een badge               (was 2 t/m 5px, .3rem) */
        --vivi-ruimte-xs: .4rem;    /* icoon naast tekst              (was .35, .4rem) */
        --vivi-ruimte-s: .6rem;     /* tussen regels in een kaart     (was .5, .6rem) */
        --vivi-ruimte-m: .85rem;    /* tussen kaartonderdelen         (was .7 t/m .9rem) */
        --vivi-ruimte-l: 1.1rem;    /* tussen kaarten                 (was 1, 1.1rem) */
        --vivi-ruimte-xl: 1.6rem;   /* tussen secties */
        --vivi-ruimte-2xl: 2.25rem; /* paginamarge */

        /* Breekpunten, toegevoegd 31-08-2026 (WP-U1).

           LEES DIT EERST: een custom property werkt NIET in de voorwaarde van
           een @media-regel. `@media (max-width: var(--vivi-bp-s))` doet niets,
           in geen enkele browser, en er zit geen bouwstap tussen die het kan
           vertalen: Stijllaag::css() plakt deze zes bestanden rauw aan elkaar
           en zet ze inline in de head. Deze vier regels zijn dus de vastgelegde
           schaal en de plek waar je hem opzoekt, niet iets dat de query invult.
           De bewaker is tests/Ontwerp/BreekpuntTest.php: die leest de zes
           bestanden en valt op elke breedte die hier niet staat.

           Gemeten op 31-08-2026, vóór deze omzetting: 29 breedte-voorwaarden
           (28 in deze zes bestanden plus één in een blade) in twaalf vormen op
           tien verschillende getallen: 480, 520, 560, 640, 900, 1023, 1024,
           1279, 1279.98, 1280. Daar zaten twee echte fouten in. Bij 1024 stond
           zowel max-width: 1024px als min-width: 1024px, dus op precies 1024
           gold de mobiele zijbalk én de desktop-hoofdbalk tegelijk, terwijl het
           commentaar erboven "onder 1024px" beweert. Bij 1023 en 1279 was het
           omgekeerde: op 1023.5 gold geen van beide.

           Afspraak, en de reden dat de maxima op .98 eindigen: min-width neemt
           de stap zelf, max-width neemt de stap min 0.02px. Zo raken de twee
           kanten elkaar zonder overlap en zonder gat, ook op een scherm met een
           gebroken devicePixelRatio. */
        --vivi-bp-xs: 480px;   /* kleine telefoon: alles één kolom */
        --vivi-bp-s: 640px;    /* telefoon/tablet: de mobiele laag (05-mobiel) */
        --vivi-bp-m: 1024px;   /* tablet/laptop: zijbalk en hoofdbalk wisselen */
        --vivi-bp-l: 1280px;   /* ruim scherm: derde en vierde kolom, orbs aan */
    }

/* Filament-overrides: body, sidebar, topbar, hoofdbalk, koppen, secties.
   Geknipt uit brand-head.blade.php op 31-07-2026, ongewijzigd. */
    /* Hele app in Poppins. */
    .fi-body, .fi-body * { font-family: 'Poppins', 'Inter', sans-serif; }

    /* App-achtergrond cream, tekst espresso. */
    .fi-body,
    .fi-simple-layout {
        background-color: var(--vivi-cream);
        color: var(--vivi-ink);
    }

    /* Zijbalk: zwevend afgerond paneel (Be.run-logica) i.p.v. muur-tot-muur. */
    .fi-sidebar {
        background-color: #FFFFFF !important;
        border: 1px solid rgba(43, 36, 25, 0.06) !important;
        border-radius: 22px;
        margin: 12px 0 12px 12px;
        height: calc(100dvh - 24px);
        box-shadow: 0 8px 30px rgba(43, 36, 25, .06);
        overflow: hidden;
    }
    @media (max-width: 1023.98px) {
        /* Mobiel schuift de zijbalk over de inhoud: dan geen zwevende marges. */
        .fi-sidebar { margin: 0; border-radius: 0; height: 100dvh; }
    }

    /* Topbar versmelt met de achtergrond: één rustig oppervlak. */
    .fi-topbar > nav,
    .fi-topbar nav {
        background-color: transparent !important;
        border-color: transparent !important;
        box-shadow: none !important;
        --tw-ring-color: transparent !important;
    }

    /* ------------------------------------------------------------------
       HOOFDBALK
       Eén balk bovenaan elke pagina in plaats van drie gestapelde lagen
       (topbar met profiel, paginakop met titel en knoppen, en daaronder de
       bediening). Scheelde op een 1080p-scherm ruim 200px hoogte.

       Opzet: op desktop levert Filaments topbar zijn hoogte in en wordt de
       paginakop de balk. Het profielmenu is daarvoor via een render hook
       opnieuw in de kop gerenderd (zie hoofdbalk-profiel.blade.php) en de
       kopie in de topbar wordt hier verborgen. Zo staat alles in één DOM-tak
       en zijn er geen negatieve marges of gereserveerde breedtes nodig.

       Onder 1024px blijft alles zoals het was: daar heeft de topbar de knop
       die de zijbalk opent en is stapelen juist goed.
       ------------------------------------------------------------------ */
    /* Standaard verborgen: schermen met een eigen kop (zie hierboven) nemen
       hoofdbalk-profiel.blade.php rechtstreeks op in hun eigen topregel, niet
       via de render hook. Zonder deze regel zou die kopie onder 1024px als
       een los blokje in die topregel blijven staan. */
    .vivi-hoofdbalk__profiel {
        display: none;
    }
    @media (min-width: 1024px) {
        /* Beide regels hieronder gelden alleen als er ook echt een kopie van
           het profielmenu in de paginakop staat (via de render hook op een
           gewone Filament-header, óf handmatig ge-include't in een pagina met
           een eigen kop, zoals admin-dashboard.blade.php). Schermen met een
           lege getHeading() en zonder zo'n handmatige include (Projecten,
           Concepts, etc.) hebben geen van beide: daar blijft de topbar gewoon
           de oude, werkende Filament-topbar met zijn eigen profielmenu.
           Zonder deze :has()-voorwaarde verdween het profielmenu op die
           pagina's helemaal (topbar-kopie verborgen, geen kop-kopie om het
           over te nemen); mét :has(.fi-header) in plaats van dit, stond op
           admin-dashboard juist een dubbel profielmenu (topbar bleef zichtbaar
           ómdat er geen .fi-header is, terwijl de handmatige include er ook
           al stond). Dit is de ene voorwaarde die in alle drie de situaties
           het juiste doet. */
        body:has(.vivi-hoofdbalk__profiel) .fi-topbar > nav {
            height: 0;
            min-height: 0;
            padding-top: 0;
            padding-bottom: 0;
        }
        /* Alleen het profielmenu verdwijnt hier; al het andere in de topbar
           blijft zichtbaar, anders verstopt deze regel ongemerkt functies. */
        body:has(.vivi-hoofdbalk__profiel) .fi-topbar .fi-user-menu {
            display: none;
        }

        .fi-page > section {
            padding-top: .75rem;
            /* Was gap-y-8 (2rem). Tussen balk, bediening en inhoud is dat lucht
               die je op elke pagina twee keer betaalt. */
            gap: .5rem;
        }

        /* De hint is uitleg, geen bediening: hij hoort niet in de balk en hij
           hoort ook geen eigen witruimte-blok te zijn. */
        .vivi-bordhint {
            margin-block: .15rem 0;
            font-size: .78rem;
        }

        /* De kop is de balk: blijft staan terwijl de inhoud eronder scrollt. */
        .fi-header {
            position: sticky;
            top: 0;
            z-index: 20;
            min-height: var(--vivi-hoofdbalk-h);
            align-items: center;
            gap: 1rem;
            background-color: var(--vivi-cream);
        }

        /* De balk loopt over de volle breedte van het frame. Hij stond binnen
           de 2rem binnenmarge van .fi-main (lg:px-8) en was daardoor 1084
           breed in een frame van 1148 (gemeten 23-10-2026 bij 1440 op
           /bon-uploaden, /clients/create, /team/taken, /portal/invoices). In
           die twee stroken van 32px scrolde de inhoud zichtbaar langs de
           titel, zodat de titel over de donkere kaart leek te schuiven. Met
           dezelfde marge negatief en als binnenmarge terug blijft de titel op
           zijn plek en dekt de balk de hele strook af. De bedieningsbalk
           eronder plakt mee en krijgt daarom hetzelfde. */
        .fi-header,
        .vivi-paginabediening {
            margin-inline: -2rem;
            padding-inline: 2rem;
        }

        /* Uitklapmenu's (het accountmenu rechtsboven, elke dropdown) erven
           anders de stacking-context van de balk op z-index 20, en worden dan
           gesneden door de zijbalk (30) en de meekijk-pil (60). Boven alles
           tillen zodat ze overal bedienbaar blijven, ook in de meekijk-view en
           op smallere schermen. */
        .fi-dropdown-panel {
            z-index: 70;
        }

        /* Titel compacter: was text-2xl/3xl, dat is kopformaat voor een pagina
           en te groot voor een balk. */
        .fi-header-heading {
            font-size: 1.3rem !important;
            line-height: 1.2;
        }

        /* Zone 3: acties en profiel horen strak tegen elkaar. */
        .fi-header > div:last-child {
            gap: .6rem;
        }
        .vivi-hoofdbalk__profiel {
            display: flex;
            align-items: center;
            padding-inline-start: .6rem;
            margin-inline-start: .2rem;
            border-inline-start: 1px solid var(--vivi-line);
        }

        /* Zone 2: pagina-eigen bediening (zoekveld, filters) plakt direct
           onder de balk in plaats van als losse laag met eigen marge. Krijgt
           een pagina deze klasse niet, dan verandert er niets aan die pagina. */
        .vivi-paginabediening {
            position: sticky;
            top: var(--vivi-hoofdbalk-h);
            z-index: 19;
            margin-top: -.55rem;
            padding-block: .1rem .4rem;
            background-color: var(--vivi-cream);
            border-bottom: 1px solid var(--vivi-line);
        }
    }

    /* Dropdown-panelen (accountmenu, filter-menu's, actiemenu's) moeten boven de
       zijbalk (z-index 30) én boven de meekijk-pil (.vivi-impersonation, z-index
       60) staan, anders klap je een menu open dat gedeeltelijk onder een andere
       laag verdwijnt en niet meer bedienbaar is. Gemeten 12-08 in de meekijk-view
       op site-cms: linkerhelft van Profiel/Uitloggen viel achter de zijbalk. */
    .fi-dropdown-panel {
        z-index: 70;
    }

    /* Het merk is sinds 24-09-2026 het woordmerk als beeld (x-vivi.woordmerk,
       via ->brandLogo op alle drie de panelen), niet meer de merknaam in
       Playfair-kapitalen. */
    .fi-logo {
        align-items: center;
    }

    /* Alle koppen in serif. */
    .fi-header-heading,
    .fi-section-header-heading,
    .fi-modal-heading,
    .fi-wi-stats-overview-stat-value,
    .fi-ta-empty-state-heading,
    h1.fi-header-heading {
        font-family: var(--vivi-serif) !important;
        letter-spacing: .005em;
        color: var(--vivi-ink);
    }

    /* Actief navigatie-item krijgt een goudgeel accent. */
    .fi-sidebar-item-active .fi-sidebar-item-button {
        background-color: rgba(235, 178, 46, 0.18) !important;
    }
    .fi-sidebar-item-active .fi-sidebar-item-icon,
    .fi-sidebar-item-active .fi-sidebar-item-label {
        color: var(--vivi-ink) !important;
        font-weight: 600;
    }

    /* Kaarten/secties iets warmer wit zodat ze van de cream-achtergrond afsteken. */
    .fi-section,
    .fi-wi-stats-overview-stat,
    .fi-ta-ctn,
    .fi-fo-component-ctn .fi-input-wrp {
        background-color: #FFFFFF;
    }

    /* Login-kaart op cream. */
    .fi-simple-main {
        background-color: #FFFFFF;
        border: 1px solid rgba(43, 36, 25, 0.08);
    }

    /* Actielinks in Filament-tabellen (Betalen, Bekijk, Klaar, Bewerken):
       gemeten 20px hoog op 375px (06-08-2026), met een duim niet te raken.
       Blok-padding tilt het raakvlak naar ~39px; alleen op smal scherm zodat
       de dichte desktop-tabel dicht blijft. Op .fi-ta-content en niet op
       .fi-ta-table: onder de 768px stapelt Filament de rijen als divs en
       bestaat er helemaal geen <table> meer (gemeten in de meetronde). */
    @media (max-width: 639.98px) {
        .fi-ta-content .fi-link { padding-top: .6rem; padding-bottom: .6rem; }
    }

/* Basis: typografie, kaart, invoer, rasters, app-raster, welkomblok.
   Geknipt uit brand-head.blade.php op 31-07-2026, ongewijzigd. */
    /* --- Design-system componenten (bento-kaarten, kanban, badges) --- */
    .vivi-serif { font-family: var(--vivi-serif); letter-spacing: .005em; }

    .vivi-card {
        background: #fff;
        border: 1px solid rgba(43, 36, 25, .07);
        border-radius: 20px;
        padding: 1.25rem;
        box-shadow: 0 2px 12px rgba(43, 36, 25, .04);
        transition: box-shadow .15s ease, transform .15s ease;
    }
    .vivi-card--link:hover {
        box-shadow: 0 12px 32px rgba(43, 36, 25, .10);
        transform: translateY(-1px);
    }

    /* Donkere espresso-kaart: de "kern" van een pagina (Loïs, hoogtepunt-blok).
       Eén per scherm, zoals het donkere kalenderblok in de referentie. */
    .vivi-card--dark {
        background: var(--vivi-ink);
        border-color: var(--vivi-ink);
        color: var(--vivi-cream-2);
        box-shadow: 0 14px 40px rgba(43, 36, 25, .22);
    }
    .vivi-card--dark .vivi-muted { color: rgba(244, 241, 233, .55); }
    .vivi-card--dark .vivi-serif { color: #fff; }

    /* Tekstinvoer in de stijl van de kaarten (o.a. de Loïs-balk). */
    .vivi-input {
        width: 100%; border-radius: 9999px;
        border: 1px solid rgba(43, 36, 25, .12);
        background: #fff; color: var(--vivi-ink);
        padding: .6rem 1.15rem; font-size: .88rem;
    }
    .vivi-input:focus { outline: none; border-color: var(--vivi-gold); box-shadow: 0 0 0 3px rgba(235, 178, 46, .25); }
    .vivi-card--dark .vivi-input {
        background: rgba(255, 255, 255, .08);
        border-color: rgba(255, 255, 255, .16);
        color: #fff;
    }
    .vivi-card--dark .vivi-input::placeholder { color: rgba(244, 241, 233, .45); }

    /* Keuzelijst in dezelfde pilvorm als .vivi-input. Een <select> mag nooit
       .vivi-input krijgen: die klasse mist appearance:none en een eigen chevron,
       dus dan komt de browser-eigen pijl erbij en botst de tekst met de rand
       (gemeten op de Portaaldiagnose, 26-08). appearance:none + één no-repeat
       chevron lost dat op; zelfde SVG en positionering als .vivi-bordbalk__klant. */
    .vivi-select {
        width: 100%; border-radius: 9999px;
        border: 1px solid rgba(43, 36, 25, .12);
        background-color: #fff; color: var(--vivi-ink);
        padding: .6rem 2.4rem .6rem 1.15rem; font-size: .88rem; line-height: 1.3;
        appearance: none; -webkit-appearance: none; -moz-appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%232B2419'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
        background-repeat: no-repeat; background-position: right 1rem center; background-size: .9rem;
    }
    .vivi-select:focus { outline: none; border-color: var(--vivi-gold); box-shadow: 0 0 0 3px rgba(235, 178, 46, .25); }

    /* Sectiekop met rustige onderregel, zoals "My Habits" in de referentie. */
    .vivi-h2 { font-family: var(--vivi-serif); font-size: 1.25rem; font-weight: 700; color: var(--vivi-ink); }

    /* Eigen grid-klassen: Filament's gecompileerde CSS mist responsive
       Tailwind-utilities als lg:grid-cols-3, dus die mogen in blades nooit
       gebruikt worden — deze klassen zijn de vervanging. */
    .vivi-layout { display: grid; gap: 1rem; grid-template-columns: 1fr; align-items: start; }
    @media (min-width: 1024px) { .vivi-layout { grid-template-columns: 2fr 1fr; } }
    .vivi-layout__main { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
    .vivi-layout__side { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
    .vivi-grid-2 { display: grid; gap: 1rem; grid-template-columns: 1fr; }
    @media (min-width: 640px) { .vivi-grid-2 { grid-template-columns: repeat(2, 1fr); } }
    .vivi-grid-3 { display: grid; gap: 1rem; grid-template-columns: 1fr; }
    @media (min-width: 640px) { .vivi-grid-3 { grid-template-columns: repeat(2, 1fr); } }
    @media (min-width: 1280px) { .vivi-grid-3 { grid-template-columns: repeat(3, 1fr); } }
    .vivi-grid-4 { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
    @media (min-width: 1280px) { .vivi-grid-4 { grid-template-columns: repeat(4, 1fr); } }
    /* Zelfde reparatie als bij .vivi-app__grid hieronder, en om dezelfde reden:
       1fr betekent minmax(auto, 1fr), dus een kolom wordt nooit smaller dan de
       min-content van zijn inhoud. Eén lange klantnaam zette daarmee het hele
       raster scheef. Gemeten op 31-07-2026 op /klanten bij 1280px: kolommen op
       492 / 354 / 354px in plaats van drie keer gelijk. Dat gebeurde ook vóór de
       componentlaag, dus dit is een bestaande fout en geen regressie. */
    .vivi-grid-2 > *, .vivi-grid-3 > *, .vivi-grid-4 > * { min-width: 0; }
    /* Eén cel die de volle rasterbreedte pakt (lege staat in een grid). */
    .vivi-breed { grid-column: 1 / -1; }
    /* Kaarten rekken niet mee met een hogere buur. Een raster rekt zijn cellen
       standaard op tot de hoogste in de rij; naast een lange kaart kreeg een
       korte daardoor een leeg vlak tot 265px (gemeten 08-10-2026 met Playwright
       op 1440: /portal/website "Pas je site aan" 228, /portaalgebruik 265,
       /workload 139, beide dashboards 121). Elk kaartraster staat in deze ene
       lijst; wie bewust gelijke hoogtes wil (knoppen op één lijn) zet
       .vivi-grid--gelijk. Bewaakt in KaartEnZweefknopTest. */
    .vivi-grid-2, .vivi-grid-3, .vivi-grid-4,
    .vivi-website-kop,
    .vivi-dash__onder, .vivi-dash__rij,
    .vivi-bdash__onder, .vivi-bdash__projecten,
    .vivi-wm-kop, .vivi-wm-grafieken, .vivi-wm-personen { align-items: start; }
    .vivi-grid--gelijk { align-items: stretch; }

    /* --- App-dashboard (Be.run-referentie): schermvullend bento-raster,
           geen paginascroll op desktop; lange lijsten scrollen intern.
           Rij 1: hero breed + agenda smal. Rij 2: mini's gestapeld in een
           smalle kolom + projectenlijst breed (zoals de referentie). --- */
    .vivi-app { display: flex; flex-direction: column; gap: 1.1rem; }
    .vivi-app__grid { display: grid; gap: 1.1rem; grid-template-columns: 1fr; }
    /* Zonder min-width:0 krijgt een 1fr-kolom als ondergrens de min-content van
       zijn inhoud. Eén regel met white-space:nowrap (de truncate-quote van Loïs)
       blaast de kolom dan breder dan het scherm en de kaarten lopen op mobiel
       rechts van beeld. */
    .vivi-app__grid > *, .vivi-app__minis > * { min-width: 0; }
    @media (min-width: 1024px) {
        .vivi-app__grid {
            grid-template-columns: repeat(20, 1fr);
        }
        .vivi-app__hero   { grid-column: 1 / 12;  grid-row: 1; min-height: 0; }
        .vivi-app__agenda { grid-column: 12 / 21; grid-row: 1; min-height: 0; }
        .vivi-app__minis  { grid-column: 1 / 8;   grid-row: 2; display: flex; flex-direction: column; gap: 1.1rem; min-height: 0; }
        .vivi-app__minis > * { flex: 1; min-height: 0; }
        .vivi-app__list   { grid-column: 8 / 21;  grid-row: 2; min-height: 0; }
    }
    /* De hoogteklem (alles in één vensterhoogte, lijsten scrollen intern) geldt
       alleen als het venster hoog genoeg is. Op een 768px-laptop (1366x768, het
       meest voorkomende klantscherm) sneed de klem tekst halverwege een regel
       af in "Vraagt je aandacht" en "Volgende deadline"; gemeten 13-08-2026 op
       de gerenderde pagina. Onder 54rem hoogte scrolt de pagina gewoon. */
    @media (min-width: 1024px) and (min-height: 54rem) {
        /* Boven 60rem stopt het raster met groeien: op een hoog scherm rekten
           lege kaarten anders tot halve schermen wit. */
        .vivi-app { height: min(var(--vivi-paginahoogte), 60rem); overflow: hidden; }
        .vivi-app__grid {
            flex: 1; min-height: 0;
            grid-template-rows: minmax(0, 1.12fr) minmax(0, 1fr);
        }
    }
    .vivi-scroll { overflow-y: auto; min-height: 0; scrollbar-width: thin; scrollbar-color: rgba(43,36,25,.2) transparent; }

    /* --- Welkomstband: eenmalig, onder het anker en de week. Licht vlak met
           een fijne lijn en een gewone knop: kleur staat alleen voor staat, het
           anker is het enige donkere vlak. Alleen tokens, geen hex; de
           terugvallers gelden buiten het portaal. --- */
    .vivi-welkom {
        display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap;
        padding: 1.15rem 1.5rem; border-radius: var(--vivi-radius-kaart, 1.25rem);
        background: var(--vivi-vlak-2, var(--vivi-cream-2));
        border: 1px solid var(--vivi-lijn-fijn, var(--vivi-line));
    }
    .vivi-welkom__tekst { flex: 1; min-width: 15rem; }
    .vivi-welkom__titel { font-family: var(--vivi-serif); font-size: 1.12rem; font-weight: 700; color: var(--vivi-ink); }
    /* max-width: op 1440 liep deze alinea ~120 tekens per regel (gemeten
       13-08-2026), ver boven de leesbare 75ch; de regellengte is nu begrensd. */
    .vivi-welkom__body { font-size: .84rem; line-height: 1.5; color: var(--vivi-tekst-2, var(--vivi-muted)); margin-top: .2rem; max-width: 72ch; }
    .vivi-welkom__acties { display: flex; align-items: center; gap: .7rem; flex: none; }
    .vivi-welkom__sluit {
        font-size: .8rem; color: var(--vivi-muted); background: none; border: 0;
        cursor: pointer; padding: .5rem .2rem; text-decoration: underline;
    }
    .vivi-welkom__sluit:hover { color: var(--vivi-ink); }
    @media (max-width: 639.98px) {
        .vivi-welkom { padding: 1.05rem 1.1rem; gap: .9rem; }
        .vivi-welkom__titel { font-size: 1rem; }
        .vivi-welkom__acties { width: 100%; }
    }

/* Componenten: zoekbalk, knoppen, Lois-hero, agenda, bord, statistiek, lege staat.
   Geknipt uit brand-head.blade.php op 31-07-2026, ongewijzigd. */
    /* Topregel: zoekpill + donkere actieknop (zoals search + Upgrade). */
    .vivi-search {
        display: flex; align-items: center; gap: .5rem;
        border-radius: 9999px; border: 1px solid rgba(43, 36, 25, .10);
        background: #fff; padding: .45rem 1rem; min-width: 220px;
    }
    .vivi-search input { border: 0; outline: none; background: transparent; font-size: .85rem; color: var(--vivi-ink); width: 100%; }
    .vivi-search input::placeholder { color: #B8AE9B; }
    /* .vivi-btn--dark stond hier, boven zijn eigen basisklasse. Verplaatst naar
       regel ~292, zie de toelichting daar: hij deed hier niets. */

    /* Loïs-hero: getinte kaart met kleurvlekken en metriek-bubbels rechts,
       tekst en input links — bubbels raken de tekst nooit. */
    .vivi-hero-lois {
        position: relative; overflow: hidden;
        background: #E3DBC6; border: 1px solid rgba(43, 36, 25, .06);
        border-radius: 24px; padding: 1.7rem 2rem;
        display: flex; flex-direction: column;
    }
    .vivi-hero-lois__tekst { max-width: 56%; min-width: 0; }

    /* Achtergrond: één grote, heel zachte fade — geen zichtbare cirkelrand. */
    .vivi-orb-bg {
        position: absolute; border-radius: 9999px; pointer-events: none;
        background: radial-gradient(circle, rgba(235, 178, 46, .55) 0%, rgba(235, 178, 46, .28) 30%, rgba(235, 178, 46, .1) 55%, rgba(235, 178, 46, 0) 75%);
        filter: blur(6px);
    }

    /* De Jarvis-orb: klikbare cirkel voor stembediening. Stilstaand; alleen
       tijdens opname pulseert hij rood. */
    .vivi-orb {
        position: absolute; border-radius: 9999px; cursor: pointer; border: 0;
        display: flex; align-items: center; justify-content: center;
        background: radial-gradient(circle at 34% 30%, #F6CE6B 0%, var(--vivi-gold) 55%, #D99F1F 100%);
        color: var(--vivi-ink);
        box-shadow: 0 18px 44px rgba(217, 159, 31, .45), inset 0 2px 10px rgba(255, 255, 255, .5);
        transition: transform .2s ease, box-shadow .2s ease;
    }
    .vivi-orb:hover { transform: scale(1.035); }
    .vivi-orb--rec {
        background: radial-gradient(circle at 34% 30%, #d4694f 0%, #b4462f 60%, #93361f 100%);
        color: #fff; animation: vivi-pulse 1.2s ease-in-out infinite;
    }

    .vivi-hero-lois > * { position: relative; z-index: 1; }
    /* De regel hierboven raakt óók de achtergrondlaag (hogere specificiteit),
       dus die expliciet terug naar absolute. */
    .vivi-hero-lois > .vivi-orb-bg { position: absolute !important; z-index: 0 !important; }
    .vivi-hero-lois > .vivi-orb { position: absolute !important; z-index: 2 !important; }
    /* Onder 1280px is de hero-kaart te smal voor tekst naast de orb: op
       1024-1279 liep de offline-regel en het antwoord van Loïs ONDER de orb
       door (gemeten 13-08-2026 op 1366x768: de orb slokte het woord "helpen"
       op). Daarom verdwijnt de orb daar, net als op mobiel. */
    @media (max-width: 1279.98px) { .vivi-orb-bg, .vivi-orb { display: none; } .vivi-hero-lois__tekst { max-width: 100%; } }
    /* Waar de orb wél staat, is zijn zone (right 4.5rem + 8.5rem breed) geen
       tekstgebied: de padding reserveert hem, zodat ook het antwoord, de
       offline-regel en de voorbeeldvragen er nooit onder schuiven. */
    @media (min-width: 1280px) {
        .vivi-hero-lois { padding-right: 14.5rem; }
        /* De padding reserveert de orb-zone al; de oude 56% erbovenop kneep de
           introregel tot drie woorden per regel. */
        .vivi-hero-lois__tekst { max-width: none; }
    }

    /* Ronde icoonknop (spraak, plus). */
    .vivi-icon-btn {
        display: inline-flex; align-items: center; justify-content: center;
        width: 2.6rem; height: 2.6rem; border-radius: 9999px; flex: none;
        border: 1px solid rgba(43, 36, 25, .12); background: #fff; color: var(--vivi-ink);
        cursor: pointer; transition: box-shadow .15s ease, transform .15s ease;
    }
    .vivi-icon-btn:hover { box-shadow: 0 6px 18px rgba(43, 36, 25, .12); transform: translateY(-1px); }
    .vivi-icon-btn--rec { background: #b4462f; border-color: #b4462f; color: #fff; animation: vivi-pulse 1.2s ease-in-out infinite; }
    @keyframes vivi-pulse { 50% { box-shadow: 0 0 0 8px rgba(180, 70, 47, .18); } }

    /* Voortgangssegmenten per project (sessions-completed-stijl). */
    .vivi-seg { display: inline-flex; gap: 3px; }
    .vivi-seg span { width: 6px; height: 15px; border-radius: 3px; background: #E4DCC9; }
    .vivi-seg span.on { background: var(--vivi-gold); }

    /* Rij in de projectenlijst, met initialen-avatar. */
    .vivi-row { display: flex; align-items: center; gap: .8rem; padding: .65rem .25rem; }
    .vivi-row + .vivi-row { border-top: 1px solid rgba(43, 36, 25, .07); }
    .vivi-avatar--lg {
        display: inline-flex; align-items: center; justify-content: center; flex: none;
        width: 2.3rem; height: 2.3rem; border-radius: 9999px;
        background: var(--vivi-cream-2); color: var(--vivi-ink);
        font-size: .78rem; font-weight: 700; border: 1px solid rgba(43, 36, 25, .08);
    }
    /* Gouden variant: afgerond, opgeleverd. */
    .vivi-avatar--goud { background: var(--vivi-gold); border-color: var(--vivi-gold); }

    /* Agenda: Google-achtige dagweergave — groot datumblok + event-blokken. */
    .vivi-date { display: flex; align-items: baseline; gap: .6rem; }
    .vivi-date__nr { font-family: var(--vivi-serif); font-size: 2.6rem; font-weight: 700; line-height: 1; color: #fff; }
    .vivi-date__mut { font-size: .78rem; color: rgba(244, 241, 233, .55); line-height: 1.3; }
    .vivi-event {
        display: flex; align-items: center; gap: .7rem;
        background: rgba(255, 255, 255, .07); border-left: 3px solid var(--vivi-gold);
        border-radius: 12px; padding: .6rem .8rem; margin-top: .5rem;
    }
    .vivi-event--stil { border-left-color: rgba(255, 255, 255, .25); }
    .vivi-event__label { font-size: .84rem; font-weight: 500; color: #fff; min-width: 0; }
    .vivi-event__type { font-size: .66rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: rgba(244, 241, 233, .5); margin-left: auto; flex: none; }
    .vivi-daycircle {
        display: inline-flex; align-items: center; justify-content: center; flex: none;
        width: 2rem; height: 2rem; border-radius: 9999px; font-size: .78rem; font-weight: 700;
        background: rgba(255, 255, 255, .1); color: #fff;
    }
    .vivi-daycircle--vandaag { background: var(--vivi-gold); color: var(--vivi-ink); }

    /* Voortgangsbalk (My Habits / Weight Loss-stijl). */
    .vivi-bar { height: .45rem; border-radius: 9999px; background: #ECE8DD; overflow: hidden; }
    .vivi-bar > span { display: block; height: 100%; border-radius: 9999px; background: var(--vivi-gold); }

    /* Statuschip voor rijen zonder voortgang. */
    .vivi-chip {
        display: inline-flex; align-items: center; flex: none;
        border: 1px solid rgba(43, 36, 25, .14); border-radius: 9999px;
        padding: .2rem .65rem; font-size: .68rem; font-weight: 600; color: var(--vivi-muted); background: #fff;
    }

    /* Agenda in de donkere kaart: view-toggle en maandraster. */
    .vivi-tab { border-radius: 9999px; padding: .22rem .7rem; font-size: .72rem; font-weight: 600; cursor: pointer;
        color: rgba(244, 241, 233, .6); background: transparent; border: 1px solid transparent; }
    .vivi-tab.on { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .14); }
    .vivi-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: .3rem; text-align: center; }
    .vivi-cal__d {
        display: inline-flex; align-items: center; justify-content: center;
        width: 1.9rem; height: 1.9rem; border-radius: 9999px; margin: 0 auto;
        font-size: .74rem; color: rgba(244, 241, 233, .75);
    }
    .vivi-cal__d.has { background: var(--vivi-gold); color: var(--vivi-ink); font-weight: 700; }
    .vivi-cal__d.today { border: 1px solid rgba(255, 255, 255, .45); }

    /* Ring-meter (gauge) voor de mini-kaart. */
    .vivi-gauge { position: relative; width: 74px; height: 74px; flex: none; }
    .vivi-gauge svg { transform: rotate(-90deg); }
    .vivi-gauge__num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
        font-family: var(--vivi-serif); font-size: 1.35rem; font-weight: 700; color: var(--vivi-ink); }

    .vivi-pill {
        display: inline-flex;
        align-items: center;
        border-radius: 9999px;
        padding: .15rem .6rem;
        font-size: .72rem;
        font-weight: 600;
        color: #fff;
    }
    /* Tonen van de badge. Zonder deze set zet elk scherm zijn eigen
       style="background:#..." op een pill, en dat is waar een flink deel van de
       609 hardgecodeerde hexen vandaan komt. Gebruik x-vivi.badge, niet de klasse.
       --ok en --gold stonden tot 31-07-2026 in 06-schermen.css; ze horen in deze
       laag. Verplaatst na te hebben nagegaan dat geen enkele regel erna nog
       .vivi-pill raakt, dus de cascade verandert niet. */
    .vivi-pill--stil { background: rgba(43, 36, 25, .07); color: var(--vivi-muted); }
    .vivi-pill--ok { background: var(--vivi-ok-bg, rgba(77,143,95,.13)); color: var(--vivi-ok, #4D8F5F); }
    .vivi-pill--info { background: rgba(74, 107, 154, .13); color: var(--vivi-info); }
    .vivi-pill--let-op { background: rgba(181, 118, 42, .13); color: var(--vivi-warn); }
    .vivi-pill--fout { background: var(--vivi-fout-vlak); color: var(--vivi-fout); }
    .vivi-pill--gold { background: var(--vivi-gold); color: var(--vivi-ink); }
    .vivi-pill--ink { background: var(--vivi-ink); color: var(--vivi-cream-2); }

    /* Chip-tonen: dezelfde betekenislaag als de pill, maar dan als omlijnde
       chip in een rijtje of tijdlijn. */
    .vivi-chip--ok { border-color: rgba(75, 123, 75, .35); color: #4B7B4B; }
    .vivi-chip--goud { border-color: rgba(217, 159, 31, .5); color: #B8860B; }

    /* Kanban-bord: horizontaal scrollende kolommen met ruime spacing. */
    .vivi-board { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: .5rem; }
    /* Alpine verbergt x-cloak pas na het initialiseren; zonder deze regel
       flitsen de veeg-labels op elke kaart even in beeld. */
    .vivi-board [x-cloak] { display: none !important; }
    .vivi-col {
        flex: 0 0 300px;
        background: var(--vivi-cream-2);
        border-radius: 16px;
        padding: .85rem;
        /* De rand is er altijd, alleen doorzichtig: anders verspringt de kolom
           een pixel zodra hij oplicht als sleepdoel. */
        border: 1px solid transparent;
        transition: background .15s ease, border-color .15s ease;
    }
    /* De kolom waar de gesleepte kaart in landt, licht op. */
    .vivi-col--doel {
        background: #F7EFD9;
        border-color: var(--vivi-gold);
    }
    .vivi-col__lijst { display: flex; flex-direction: column; gap: .75rem; min-height: 3rem; }
    .vivi-col__head {
        display: flex; align-items: center; justify-content: space-between;
        margin-bottom: .75rem; padding: 0 .15rem;
    }
    .vivi-col__count {
        background: rgba(43, 36, 25, .08); color: var(--vivi-ink);
        border-radius: 9999px; padding: .05rem .55rem; font-size: .72rem; font-weight: 700;
    }

    /* --- Bordkaart: sleepbaar op desktop, veegbaar op mobiel. --- */
    .vivi-kaart {
        cursor: grab;
        /* pan-y laat verticaal scrollen met rust en geeft de horizontale
           beweging aan ons veeg-script; zonder dit kaapt de browser de veeg.
           Twee regels: kale pan-y zou ook knijpen-om-te-zoomen blokkeren, en
           dat is een toegankelijkheidsprobleem. De tweede regel geeft dat
           terug; browsers die het trefwoord pinch-zoom niet kennen gooien die
           regel weg en houden de eerste, dus vegen blijft overal werken. */
        touch-action: pan-y;
        touch-action: pan-y pinch-zoom;
        -webkit-user-select: none; user-select: none;
    }
    .vivi-kaart:active { cursor: grabbing; }
    .vivi-kaart__top { display: flex; align-items: flex-start; gap: .5rem; }
    .vivi-kaart__titel { display: block; flex: 1; min-width: 0; }
    .vivi-kaart__bewerk {
        display: inline-flex; align-items: center; justify-content: center; flex: none;
        width: 1.9rem; height: 1.9rem; border-radius: 9999px;
        border: 1px solid rgba(43, 36, 25, .12); background: #fff; color: var(--vivi-muted);
        transition: color .12s ease, border-color .12s ease, background .12s ease;
    }
    .vivi-kaart__bewerk:hover, .vivi-kaart__bewerk:focus-visible {
        color: var(--vivi-ink); border-color: var(--vivi-gold); background: #FBF3E0;
    }
    /* Terugkoppeling tijdens het vegen: waar de kaart heen gaat. */
    .vivi-kaart__veeg {
        margin-top: .55rem; border-radius: 8px; padding: .3rem .55rem;
        background: rgba(235, 178, 46, .22); color: var(--vivi-ink);
        font-size: .7rem; font-weight: 700; text-align: center;
    }
    /* De statuskeuzelijst is de achtervang voor wie niet sleept of veegt. Hij is
       weggeklapt maar blijft in de tab-volgorde staan: focus binnen de kaart
       klapt hem open, dus bedienen zonder muis blijft mogelijk. */
    .vivi-kaart__acties {
        max-height: 0; opacity: 0; overflow: hidden; margin-top: 0;
        transition: max-height .16s ease, opacity .16s ease, margin-top .16s ease;
    }
    .vivi-kaart:hover .vivi-kaart__acties,
    .vivi-kaart:focus-within .vivi-kaart__acties {
        max-height: 3.5rem; opacity: 1; margin-top: .1rem;
    }
    /* Zonder hover (aanraakscherm) valt de hover-onthulling weg, dus daar staat
       de keuzelijst gewoon open. */
    @media (hover: none) {
        .vivi-kaart__acties { max-height: 3.5rem; opacity: 1; margin-top: .1rem; }
    }

    /* Filterbalk boven het bord: zoeken op project of klant, plus klantfilter. */
    .vivi-bordbalk { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
    .vivi-bordbalk__zoek { flex: 1 1 16rem; max-width: 26rem; }
    .vivi-bordbalk__klant {
        flex: 0 1 13rem;
        border: 1px solid rgba(43, 36, 25, .10); border-radius: 9999px;
        background: #fff; color: var(--vivi-ink);
        padding: .5rem 2rem .5rem 1rem; font-size: .85rem; line-height: 1.2;
        appearance: none; -webkit-appearance: none; -moz-appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%232B2419'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
        background-repeat: no-repeat; background-position: right .7rem center; background-size: .8rem;
    }
    .vivi-bordhint { font-size: .78rem; line-height: 1.5; color: var(--vivi-muted); }

    /* Uitleg per bedieningsvorm: aanraakscherm ziet de veeg-tekst, muis/toetsenbord
       de tekst over de keuzelijst. */
    .vivi-alleen-touch { display: none; }
    @media (hover: none) {
        .vivi-alleen-touch { display: inline; }
        .vivi-alleen-muis { display: none; }
    }

    /* Alleen voor schermlezers: label bij de statuskeuzelijst. */
    .vivi-sr {
        position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
        overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
    }

    .vivi-avatar {
        display: inline-flex; align-items: center; justify-content: center;
        width: 1.6rem; height: 1.6rem; border-radius: 9999px;
        background: var(--vivi-gold); color: var(--vivi-ink);
        font-size: .72rem; font-weight: 700;
    }
    .vivi-move {
        width: 100%; margin-top: .65rem;
        border: 1px solid rgba(43, 36, 25, .12); border-radius: 8px;
        padding: .34rem 1.6rem .34rem .55rem; font-size: .72rem; line-height: 1.2;
        color: var(--vivi-ink);
        appearance: none; -webkit-appearance: none; -moz-appearance: none;
        background-color: #fff;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%232B2419'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
        background-repeat: no-repeat; background-position: right .55rem center; background-size: .8rem;
    }

    /* Bento-hero, kerncijfers, knoppen, gedempte tekst. */
    .vivi-hero {
        background: #fff; border: 1px solid rgba(43, 36, 25, .10);
        border-radius: 20px; padding: 1.75rem 2rem;
    }
    .vivi-muted { color: var(--vivi-muted); }
    .vivi-stat__value { font-family: var(--vivi-serif); font-size: 1.7rem; font-weight: 600; color: var(--vivi-ink); line-height: 1.1; }
    .vivi-stat__label { font-size: .72rem; color: var(--vivi-muted); }
    .vivi-btn {
        display: inline-flex; align-items: center; gap: .4rem;
        border-radius: 10px; padding: .4rem .85rem; font-size: .8rem; font-weight: 600;
        border: 1px solid rgba(43, 36, 25, .12); background: #fff; color: var(--vivi-ink);
        transition: box-shadow .15s ease, transform .15s ease; cursor: pointer;
    }
    .vivi-btn:hover { box-shadow: 0 6px 18px rgba(43, 36, 25, .10); transform: translateY(-1px); }
    .vivi-btn--primary { background: var(--vivi-gold); border-color: var(--vivi-gold); color: var(--vivi-ink); }
    /* Stond tot 31-07-2026 op regel 11, dus vóór .vivi-btn hierboven. Gelijke
       specificiteit, dus de latere basisregel won en .vivi-btn--dark deed
       letterlijk niets: een donkere knop was wit met een espresso letter. Er
       waren 5 bestaande plekken; 3 maskeerden dit toevallig met een eigen
       inline achtergrondkleur (admin-dashboard, de oude klanten.blade.php,
       portal-dashboard). De 2 die dat niet deden stonden dus zichtbaar wit
       bij de klant: project-view (fase goedkeuren) en projecten (offerte
       aanvragen). Gemeten met computed styles op 31-07-2026, niet uit de
       broncode gelezen. */
    .vivi-btn--dark {
        background: var(--vivi-ink); border-color: var(--vivi-ink); color: var(--vivi-cream-2);
        border-radius: var(--vivi-radius-pil); padding: .5rem 1.2rem;
    }

    /* --- Semantische klassen voor terugkerende blokken. Deze bestonden eerst
           als inline-styles per blade; inline wint van elke media-query, dus
           zonder klasse is een mobiel-pass niet af te dwingen. --- */

    /* Paginakop ("Projecten", "Galerijen", de begroeting op het dashboard). */
    .vivi-page-title { font-family: var(--vivi-serif); font-size: 1.45rem; font-weight: 700; line-height: 1.15; color: var(--vivi-ink); }
    /* Grotere paginakop op een hero-kaart (Mijn website). */
    .vivi-title-lg { font-family: var(--vivi-serif); font-size: 2rem; font-weight: 700; line-height: 1.1; color: var(--vivi-ink); }

    /* Cover-blok van een project: beeld met tekst onderin. */
    .vivi-cover { position: relative; min-height: 240px; display: flex; align-items: flex-end; }
    .vivi-cover__body { position: relative; width: 100%; padding: 1.7rem 2rem; }
    .vivi-cover__title { font-family: var(--vivi-serif); font-size: 2.4rem; font-weight: 700; line-height: 1.08; color: #fff; text-shadow: 0 2px 16px rgba(43, 36, 25, .4); }
    .vivi-cover--sm { min-height: 230px; }
    .vivi-cover--sm .vivi-cover__body { padding: 1.5rem 1.9rem; }
    .vivi-cover--sm .vivi-cover__title { font-size: 2.1rem; line-height: 1.1; text-shadow: 0 2px 14px rgba(43, 36, 25, .35); }

    /* Beeld en scrim in een cover. Stonden per scherm als identieke inline
       position/inset/object-fit-reeksen; de gradient hoort bij het patroon. */
    .vivi-cover__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
    .vivi-cover__scrim {
        position: absolute; inset: 0;
        background: linear-gradient(180deg, rgba(43, 36, 25, .05) 25%, rgba(43, 36, 25, .66) 100%);
    }

    /* Kicker op een donker cover-beeld. */
    .vivi-kicker--licht { color: rgba(255, 255, 255, .75); }

    /* Body onder een cover: ruimer dan een gewone kaart. */
    .vivi-pad-lg { padding: 1.2rem 2rem 1.5rem; }
    .vivi-pad-lg--sm { padding: 1.25rem 1.9rem 1.5rem; }

    /* Ruimere kaart (dashboardblokken) zonder inline padding. */
    .vivi-card--roomy { padding: 1.4rem 1.65rem; }

    /* Lege staat: gecentreerde uitleg met een actie eronder. */
    .vivi-empty { text-align: center; padding: 3rem 2rem; }
    .vivi-empty__title { font-family: var(--vivi-serif); font-size: 1.2rem; font-weight: 700; color: var(--vivi-ink); }

    /* Kop van een offerte/factuur/contract: label links, kerncijfer rechts. */
    .vivi-doc-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem; }
    .vivi-doc-head__side { flex: none; text-align: right; }
    .vivi-figure { font-family: var(--vivi-serif); font-size: 2.6rem; font-weight: 700; line-height: 1.05; color: #fff; }
    .vivi-figure--md { font-size: 2.4rem; }
    .vivi-figure--sm { font-size: 1.9rem; }

    /* Loïs-invoer in de hero: op desktop naast de orb, mobiel over de volle breedte. */
    .vivi-hero-lois__form { max-width: 62%; }

    /* Voorbeeldvraag onder de Loïs-balk. */
    .vivi-suggest {
        border: 1px solid rgba(43, 36, 25, .14); background: rgba(255, 255, 255, .55);
        color: var(--vivi-ink); border-radius: 9999px;
        padding: .26rem .78rem; font-size: .7rem; cursor: pointer;
    }

    /* ===================================================================
       COMPONENTLAAG, toegevoegd 31-07-2026.

       Deze klassen horen bij de x-vivi.*-componenten in
       resources/views/components/vivi/. Schrijf ze niet met de hand in een
       blade: gebruik het component, dan blijft de opmaak op één plek.

       Alles hieronder is nieuw, dus er verschuift niets aan bestaande schermen.
       De bestaande klassen hierboven staan bewust nog op hun eigen getallen;
       die omzetten naar de schaal is een eigen, gemeten ronde.
       =================================================================== */

    /* x-vivi.page-header. Verving de handgeschreven kop van 23 page-views. */
    .vivi-page-header {
        display: flex; flex-wrap: wrap; align-items: center;
        justify-content: space-between; gap: var(--vivi-ruimte-l);
    }
    .vivi-page-header__tekst { min-width: 0; }
    .vivi-page-header__acties {
        display: flex; flex-wrap: wrap; align-items: center; gap: var(--vivi-ruimte-m);
    }
    /* Het onderschrift onder de paginatitel. Stond 21x als inline font-size. */
    .vivi-page-sub { font-size: var(--vivi-tekst-m); color: var(--vivi-muted); }

    /* x-vivi.section. Bestaat om de hiërarchie terug te brengen: een scherm dat
       alleen een h1 en daarna losse spans heeft, laat alles even zwaar wegen.
       De kop is een echte h2/h3, niet een span met een font-size. */
    .vivi-section { display: flex; flex-direction: column; gap: var(--vivi-ruimte-m); }
    .vivi-section__kop {
        display: flex; flex-wrap: wrap; align-items: baseline;
        justify-content: space-between; gap: var(--vivi-ruimte-s);
    }
    .vivi-section__title {
        font-family: var(--vivi-serif); font-size: var(--vivi-kop-s);
        font-weight: 600; line-height: 1.2; color: var(--vivi-ink);
    }
    .vivi-section__uitleg { font-size: var(--vivi-tekst-s); color: var(--vivi-muted); }

    /* x-vivi.stat. De cijferblokken; waarde en label bestonden al los. */
    .vivi-stat { display: flex; flex-direction: column; gap: var(--vivi-ruimte-2xs); }

    /* x-vivi.empty. .vivi-empty en __title bestonden al; dit is de tekst eronder
       en de actiebalk, die tot nu toe per scherm werden bedacht. */
    .vivi-empty__tekst {
        font-size: var(--vivi-tekst-m); color: var(--vivi-muted);
        max-width: 46ch; margin: var(--vivi-ruimte-s) auto 0;
    }
    .vivi-empty__acties {
        display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
        gap: var(--vivi-ruimte-s); margin-top: var(--vivi-ruimte-l);
    }

    /* Lege staat ín een kaart die zijn hoogte van het raster krijgt: de tekst
       hing linksboven en liet de rest van de kaart als gat achter (gemeten
       13-08-2026 op "Je projecten" zonder projecten: één regel bovenin een
       kaart van ~290px hoog). Dit blok zet hem in het midden. Werkt ook als
       de kaart zijn natuurlijke hoogte heeft: dan is 100% gewoon de inhoud. */
    .vivi-leeg-midden {
        display: flex; align-items: center; justify-content: center;
        height: 100%; min-height: 4.5rem; text-align: center;
    }
    .vivi-leeg-midden > * { max-width: 40ch; }

    /* --- Layout-primitieven ------------------------------------------------
       Drie klassen die samen het overgrote deel van de inline-opmaak vervangen.
       Gemeten op 31-07-2026 in de 72 blades: "flex-direction: column" 30x,
       "flex items-center gap-N" 18x, "flex flex-wrap items-center gap-N" 27x en
       "min-width: 0" 49x. Die laatste is geen smaak maar een reparatie: een
       flex-kind krimpt standaard niet onder zijn inhoud, dus zonder min-width:0
       duwt één lange klantnaam de hele kaart uit elkaar. Dat zit hier vast,
       zodat niemand het per scherm hoeft te onthouden. */
    .vivi-rij { display: flex; align-items: center; gap: var(--vivi-ruimte-m); }
    .vivi-rij > * { min-width: 0; }
    .vivi-rij--wrap { flex-wrap: wrap; }
    .vivi-rij--dicht { gap: var(--vivi-ruimte-xs); }
    /* Bovenaan uitlijnen: kaarten van ongelijke hoogte, of een vinkje naast
       tekst over meerdere regels. */
    .vivi-rij--boven { align-items: flex-start; }
    /* Vinkje en label blijven naast elkaar, ook op smal waar 05-mobiel elke
       .vivi-rij laat wrappen; dubbele klasse wint daar op specificiteit. */
    .vivi-rij.vivi-rij--vinkje { align-items: flex-start; flex-wrap: nowrap; }
    /* Twee knoppen die bij elkaar horen (Cijfers bewaren, Ontkoppelen) blijven
       naast elkaar, ook op smal; een knop in een eigen formulier telt mee als
       gewoon rij-item. */
    .vivi-rij.vivi-rij--paar { flex-wrap: nowrap; }
    .vivi-rij--paar > form { display: contents; }
    .vivi-rij--paar .vivi-btn { white-space: nowrap; }
    /* Een knop die uit staat (Cijfers bewaren zonder vinkje) moet er ook zo uitzien. */
    .vivi-btn:disabled { opacity: .45; cursor: not-allowed; }
    .vivi-stapel { display: flex; flex-direction: column; gap: var(--vivi-ruimte-m); }
    .vivi-stapel--dicht { gap: var(--vivi-ruimte-s); }

    /* Koppelkaart per social-platform (Instagram, LinkedIn) op de Social-pagina:
       twee kaarten naast elkaar die onder elkaar vallen op smal scherm. De
       flex-basis staat hier en niet inline, zodat de ontwerpschuld-bewaker
       groen blijft en elke kaart dezelfde maat kiest. */
    .vivi-koppelkaart { flex: 1 1 15rem; }

    /* Naam van een klant, project of bestand in een kaart: mag nooit de kaart
       oprekken. Vandaag 1x met de hand geschreven, maar elke kaartlijst die nog
       volgt heeft hem nodig. */
    .vivi-naam {
        font-weight: 600; font-size: var(--vivi-tekst-l); color: var(--vivi-ink);
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .vivi-meta { font-size: var(--vivi-tekst-s); color: var(--vivi-muted); }

    /* Ronde initiaal met de merkkleur van de klant erachter. De kleur zelf blijft
       inline: die komt per rij uit de database en kan dus niet in de CSS staan.
       De maat en de vorm horen hier wel, anders kiest elk scherm zijn eigen. */
    .vivi-avatar {
        display: inline-flex; align-items: center; justify-content: center; flex: none;
        width: 2.75rem; height: 2.75rem; border-radius: var(--vivi-radius-rond);
        font-size: var(--vivi-tekst-l); font-weight: 600; color: #fff;
    }

    /* Grote variant van de donkere actieknop, rechtsboven op een scherm. Stond
       4x als identieke inline-style (padding:.62rem 1.5rem;font-size:.88rem). */
    .vivi-btn--groot {
        padding: var(--vivi-ruimte-s) var(--vivi-ruimte-xl);
        font-size: var(--vivi-tekst-m); border-radius: var(--vivi-radius-pil);
    }

    /* Het vergrootglas in de zoekpil. Stond 4x als identieke inline-style. */
    .vivi-search__icoon { width: 1rem; height: 1rem; color: #B8AE9B; flex: none; }

    /* Filterbalk met chips (fase, status, periode). De actieve chip is donker,
       niet goud: goud is het accent voor "wacht op de klant" en verliest zijn
       betekenis als een filter het ook gebruikt. */
    .vivi-filterbalk {
        display: flex; flex-wrap: wrap; align-items: center; gap: var(--vivi-ruimte-s);
    }
    .vivi-chip--actief { background: var(--vivi-ink); color: var(--vivi-cream-2); border-color: var(--vivi-ink); }
    .vivi-chip__aantal { opacity: .65; margin-left: var(--vivi-ruimte-2xs); }

    /* Microkop boven een blok ("NU EERST", "DAARNA", "BESTANDEN"). Stond per
       scherm als vivi-stat__label met een inline uppercase erbovenop. */
    .vivi-kicker {
        font-size: var(--vivi-tekst-xs); font-weight: 600;
        letter-spacing: .06em; text-transform: uppercase;
        color: var(--vivi-muted);
    }

    /* Regel in een lijstje binnen een kaart: titel op tekst-m met de meta
       eronder. Kleiner dan .vivi-naam (dat is de kaartkop) en mag wel wrappen. */
    .vivi-regel { font-size: var(--vivi-tekst-m); font-weight: 600; color: var(--vivi-ink); line-height: 1.3; }

    /* Scheidingslijn tussen lijstregels. Stond per scherm als inline
       border-top met een eigen kleur (#ECE8DD, rgba's, cream). */
    .vivi-scheiding { border-top: 1px solid var(--vivi-line); }

    /* Verstreken deadline of ander te-laat-signaal in lopende tekst. */
    .vivi-te-laat { color: var(--vivi-fout); font-weight: 600; }

    /* Rustig invulvlak (bestandsrij, lege regel) binnen een witte kaart. */
    .vivi-vlak { background: var(--vivi-cream-2); }

    /* Tekst in de inktkleur waar de omgeving muted is. */
    .vivi-ink { color: var(--vivi-ink); }

    /* Niet meerekken of krimpen in een flexrij (badge naast een lange naam).
       Bestond per scherm als inline flex:none; de Filament-bundel heeft geen
       flex-none-utility, dus die klasse mag in blades niet gebruikt worden. */
    .vivi-vast { flex: none; }

    /* Knop of blok dat in een kolomcontext niet vol uitrekt. */
    .vivi-zelfbreed { width: fit-content; }

    /* Lopende tekst van meer dan één regel: iets ruimer interlinie. */
    .vivi-leesbaar { line-height: 1.55; }
    .vivi-prewrap { white-space: pre-line; overflow-wrap: anywhere; }

    /* Kleinste avatar: icoontje in een rijtje (Drive-map, bestand). */
    .vivi-avatar--xs { width: 1.5rem; height: 1.5rem; font-size: .7rem; }

    /* Kolom zonder eigen gap: kaart die intern een kop, een rekkend
       scrolldeel en een voet stapelt. .vivi-rek is het rekkende deel. */
    .vivi-kolom { display: flex; flex-direction: column; }
    .vivi-rek { flex: 1; }

    /* Niet afbreken (korte knoplabels naast een invoerveld). */
    .vivi-nowrap { white-space: nowrap; }

    /* Onderstreepte tekstlink; kleur erft van de omgeving, combineer met
       .vivi-ink of .vivi-meta voor het gewicht. */
    .vivi-link { text-decoration: underline; }

    /* Titel van een kaartblok, kleiner dan een sectiekop. */
    .vivi-kaartkop { font-family: var(--vivi-serif); font-size: 1.05rem; font-weight: 600; color: inherit; }

    /* Compacte actieknop in een rijtje (Betalen, PDF, Bekijken). Tekst-s en
       niet tekst-xs: gemeten op 06-08-2026 gaf xs 10,88px knoptekst en dat is
       onder de leesgrens voor een actieknop (de oude inline waarde was .72rem). */
    .vivi-btn--klein { font-size: var(--vivi-tekst-s); padding: .3rem .7rem; }

    /* Tekstlink in het goud, voor "in Drive", "bekijk" en verwanten.
       Press-goud en niet accent-goud: op wit is #EBB22E te licht als tekst. */
    .vivi-link-goud { color: var(--vivi-gold-press); font-weight: 600; }

    /* ------------------------------------------------------------------
       FORMULIER
       Een Filament-formulier in de huisstijl. Filament levert zijn velden
       met eigen opmaak: grijze ring, blauwe focus, eigen labelmaat. Op een
       klantscherm staat dat naast kaarten die wél vivi zijn, en dat is
       precies de klacht uit het fixplan ("invulvelden zijn kale Filament-
       form", "stock Filament EditProfile").

       Alles hieronder staat onder .vivi-formulier, dus het raakt uitsluitend
       de formulieren die die klasse zelf om zich heen krijgen: nu Onboarding
       en Profiel in het klantportaal. Zonder die wrapper verandert er niets,
       en de adminkant blijft dus staan zoals hij stond.

       Waarom overschrijven en niet zelf inputs schrijven: het formulier moet
       Filament blijven, want daar hangen de uploads, de repeaters en de
       validatie aan. Het gaat hier alleen om de laag verf eroverheen.

       Specificiteit is geen toeval. Filaments eigen opmaak zijn Tailwind-
       utilities (één klasse, 0-1-0). Elke regel hieronder heeft er minstens
       twee, dus die wint zonder !important.
       ------------------------------------------------------------------ */
    /* Ruimte tussen de velden: gelijk aan de ruimte tussen kaartonderdelen. */
    .vivi-formulier .fi-fo-component-ctn { gap: var(--vivi-ruimte-l); }

    /* Label. Filament zet de tekststijl op de span ín het label, niet op het
       label zelf; daarom staat de opmaak hier ook op die span. */
    .vivi-formulier .fi-fo-field-wrp-label span {
        font-size: var(--vivi-tekst-m);
        font-weight: 600;
        line-height: 1.35;
        color: var(--vivi-ink);
    }

    /* Het sterretje bij een verplicht veld: espresso in plaats van rood.
       Rood betekent in dit systeem "er gaat iets mis" (zie --vivi-fout), en
       een veld dat nog ingevuld moet worden is geen fout. */
    .vivi-formulier .fi-fo-field-wrp-label sup { color: var(--vivi-muted); }

    /* Hulptekst onder een veld: dezelfde maat en kleur als elke andere
       toelichting in het portaal (.vivi-meta). */
    .vivi-formulier .fi-fo-field-wrp-helper-text {
        font-size: var(--vivi-tekst-s);
        color: var(--vivi-muted);
        line-height: 1.5;
    }

    .vivi-formulier .fi-fo-field-wrp-error-message {
        font-size: var(--vivi-tekst-s);
        color: var(--vivi-fout);
    }

    /* De invoerschil. Filament gebruikt een Tailwind-ring (een box-shadow);
       die zetten we uit en vervangen we door de rand die elk ander vlak in
       het portaal heeft. */
    .vivi-formulier .fi-input-wrp {
        border: 1px solid var(--vivi-line);
        border-radius: var(--vivi-radius-m);
        box-shadow: none;
        background: #fff;
        transition: border-color .15s ease, box-shadow .15s ease;
    }
    .vivi-formulier .fi-input-wrp:focus-within {
        border-color: var(--vivi-gold);
        box-shadow: var(--vivi-ring-focus);
    }
    /* Een veld met een validatiefout houdt zijn eigen signaal. */
    .vivi-formulier .fi-fo-field-wrp:has([data-validation-error]) .fi-input-wrp {
        border-color: var(--vivi-fout);
    }

    .vivi-formulier .fi-input {
        font-size: var(--vivi-tekst-m);
        color: var(--vivi-ink);
        padding-block: .55rem;
    }
    .vivi-formulier .fi-input::placeholder { color: #B8AE9B; }

    /* Aankruis- en keuzevelden krijgen het goud. De forms-plugin tekent het
       vinkje met currentColor, dus color en accent-color doen samen zowel de
       eigen als de systeemvariant. */
    .vivi-formulier input[type="checkbox"],
    .vivi-formulier input[type="radio"] {
        color: var(--vivi-gold);
        accent-color: var(--vivi-gold);
    }
    .vivi-formulier input[type="checkbox"]:focus,
    .vivi-formulier input[type="radio"]:focus {
        box-shadow: var(--vivi-ring-focus);
        border-color: var(--vivi-gold);
    }
    /* De keuzelijst heeft een eigen klasse; de radio-optie niet, daar is het
       label de enige span in de rij (gecontroleerd in de Filament-blades). */
    .vivi-formulier .fi-fo-checkbox-list-option-label,
    .vivi-formulier .fi-fo-radio label span {
        font-size: var(--vivi-tekst-m);
        color: var(--vivi-ink);
    }

    /* Uploadvlak: een gestippelde zone in cream in plaats van de grijze
       Filament-doos, zodat hij als "hier mag iets in" leest. */
    .vivi-formulier .fi-fo-file-upload .filepond--panel-root {
        background: var(--vivi-cream-2);
        border: 1px dashed var(--vivi-line-strong);
        border-radius: var(--vivi-radius-m);
    }
    .vivi-formulier .fi-fo-file-upload .filepond--drop-label { color: var(--vivi-muted); }

/* ===================================================================
       DOCUMENTVIEWS (factuur, offerte, contract)
       Klassen voor de detailpagina's van financiele documenten.
       Vervangt 83 inline-styles en 15 hardcoded hex-kleuren.
       =================================================================== */

    /* Min-width op doc-head kinderen voorkomt dat een lang factuurnummer
       de flexrij uit het scherm duwt. */
    .vivi-doc-head > * { min-width: 0; }

    /* Kerncijfer krijgt een beetje lucht onder de kicker. */
    .vivi-doc-head .vivi-figure { margin-top: var(--vivi-ruimte-2xs); }

    /* Kicker op de donkere kop: documentnummer of -type in uppercase. */
    .vivi-doc-kicker {
        font-size: var(--vivi-tekst-xs);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .08em;
        color: rgba(244, 241, 233, .55);
    }

    /* Sublabel boven een kerncijfer op de zijkant van de donkere kop
       ("Vervaldatum", "Totaal incl. btw"). Zelfde kleur als de kicker
       maar zonder uppercase. */
    .vivi-doc-sublabel {
        font-size: var(--vivi-tekst-xs);
        font-weight: 600;
        color: rgba(244, 241, 233, .55);
    }

    /* Titel (serif) op de donkere kop: offertetitel, contracttitel. */
    .vivi-doc-titel {
        font-family: var(--vivi-serif);
        font-size: var(--vivi-kop-m);
        font-weight: 700;
        line-height: 1.15;
        color: #fff;
        margin-top: var(--vivi-ruimte-2xs);
    }

    /* Ongekend-staat op de zijkant: "Nog niet getekend". */
    .vivi-doc-subtitel {
        font-family: var(--vivi-serif);
        font-size: var(--vivi-kop-s);
        font-weight: 700;
        line-height: 1.2;
        color: #fff;
    }

    /* Statusbadges en datumpills naast elkaar op de donkere kop. */
    .vivi-doc-pills {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--vivi-ruimte-s);
        margin-top: var(--vivi-ruimte-m);
    }

    /* Toelichting onder de kop van een document. Op licht gebruikt-ie de
       standaardmarge; op donker krijgt-ie meer ruimte. */
    .vivi-doc-toelichting {
        font-size: var(--vivi-tekst-m);
        line-height: 1.55;
        margin-top: var(--vivi-ruimte-xs);
        max-width: 38rem;
        color: var(--vivi-muted);
    }
    .vivi-card--dark .vivi-doc-toelichting { margin-top: var(--vivi-ruimte-l); }
    .vivi-card--dark .vivi-doc-toelichting strong { color: #fff; }

    /* Gegevensrij: label links, waarde rechts. De scheiding tussen rijen
       komt automatisch via de adjacency-selector. */
    .vivi-doc-rij {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        padding: .55rem .1rem;
    }
    .vivi-doc-rij + .vivi-doc-rij { border-top: 1px solid var(--vivi-line); }

    .vivi-doc-rij__label {
        font-size: var(--vivi-tekst-m);
        color: var(--vivi-muted);
    }
    .vivi-doc-rij__waarde {
        font-size: var(--vivi-tekst-m);
        color: var(--vivi-ink);
    }
    .vivi-doc-rij__waarde--vet { font-weight: 600; }

    /* Totaalrij: zwaarder lettertype en dikkere scheidingslijn. De
       adjacency-vorm staat erbij omdat de rijscheiding hierboven
       (.vivi-doc-rij + .vivi-doc-rij, 0,2,0) anders van de kale modifier
       (0,1,0) wint en de dikke lijn nooit zichtbaar wordt. */
    .vivi-doc-rij--totaal,
    .vivi-doc-rij + .vivi-doc-rij--totaal { border-top: 1px solid var(--vivi-line-strong); }
    .vivi-doc-rij--totaal .vivi-doc-rij__label {
        font-size: var(--vivi-tekst-l);
        font-weight: 700;
        color: var(--vivi-ink);
    }
    .vivi-doc-rij--totaal .vivi-doc-rij__waarde {
        font-family: var(--vivi-serif);
        font-size: var(--vivi-kop-s);
        font-weight: 700;
    }

    /* Optelblok onder een regelsectie (subtotaal + btw + totaal). De
       rijen erin zijn dichter op elkaar dan standaard en zonder eigen
       tussenlijnen, want het blok zelf heeft al een bovenrand. */
    .vivi-doc-optelling {
        margin-top: var(--vivi-ruimte-l);
        padding-top: var(--vivi-ruimte-m);
        border-top: 1px solid var(--vivi-line-strong);
    }
    .vivi-doc-optelling .vivi-doc-rij { padding: .2rem 0; }
    .vivi-doc-optelling .vivi-doc-rij + .vivi-doc-rij { border-top: 0; }
    .vivi-doc-optelling .vivi-doc-rij--totaal { padding-top: .5rem; }

    /* Ghostpill: subtiele badge op een donkere kaart. */
    .vivi-pill--ghost { background: rgba(255, 255, 255, .12); color: rgba(244, 241, 233, .85); }

    /* Toonpillen op de donkere kaart (documentkoppen): dezelfde betekenis,
       lichtere inkt. De lichte-kaart-tinten halen op espresso maar 2,5:1
       (info), 3,4:1 (ok) en 3,5:1 (let-op); deze varianten zitten op 5,5:1
       of hoger, doorgerekend op de samengestelde achtergrond. --fout en
       --gold hebben een dekkend vlak en blijven leesbaar; --stil heeft al
       een donkere variant bij de werkstream in 06-schermen.css. */
    .vivi-card--dark .vivi-pill--ok { background: rgba(143, 203, 159, .18); color: #A9D9B5; }
    .vivi-card--dark .vivi-pill--info { background: rgba(158, 183, 222, .18); color: #AFC6E8; }
    .vivi-card--dark .vivi-pill--let-op { background: rgba(232, 181, 110, .18); color: #E5B577; }

/* ─── BANNER ─── bevestigingsband met gouden accentlijn (aanvraag) */
.vivi-banner {
    padding: 1.25rem 1.5rem;
    border-left: 4px solid var(--vivi-gold);
    background: var(--vivi-cream-2);
}
.vivi-banner__inhoud {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}
/* Bevestigingsband: gouden badge, kop, intro, stappenlijst en slotregel. De
   stijl staat hier zodat aanvraag-bevestiging.blade.php geen inline-schuld
   opbouwt (OntwerpschuldTest). Maten uit de schaal in 01-tokens.css. */
.vivi-banner__icoon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--vivi-radius-pil);
    background: var(--vivi-gold);
}
.vivi-banner__icoon svg { width: 1.15rem; height: 1.15rem; fill: var(--vivi-ink); }
.vivi-banner__body { min-width: 0; }
.vivi-banner__titel { margin: 0 0 var(--vivi-ruimte-xs); }
.vivi-banner__intro {
    margin: 0 0 var(--vivi-ruimte-m);
    font-size: var(--vivi-tekst-m);
    line-height: 1.55;
    color: var(--vivi-ink);
}
.vivi-stappen {
    list-style: none;
    margin: 0 0 var(--vivi-ruimte-m);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--vivi-ruimte-s);
}
.vivi-stappen__item {
    display: flex;
    align-items: flex-start;
    gap: var(--vivi-ruimte-s);
    font-size: var(--vivi-tekst-m);
    line-height: 1.5;
    color: var(--vivi-ink);
}
.vivi-stappen__merk {
    flex: 0 0 auto;
    margin-top: .1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: var(--vivi-radius-pil);
}
.vivi-stappen__merk svg { width: .8rem; height: .8rem; fill: var(--vivi-ink); }
.vivi-stappen__merk--klaar { background: var(--vivi-gold); }
.vivi-stappen__merk--bezig { border: 2px solid var(--vivi-gold); }
.vivi-stappen__merk--straks { border: 2px solid var(--vivi-line-strong); }
.vivi-stappen__punt {
    width: .55rem;
    height: .55rem;
    border-radius: var(--vivi-radius-pil);
    background: var(--vivi-gold);
}
.vivi-banner__slot { margin: 0; font-size: var(--vivi-tekst-s); line-height: 1.55; }

/* ─── EMBED ─── rand-tot-rand iframe binnen een kaart zonder eigen padding
   (combineer met .vivi-projectkaart, die levert rand en afronding). De hoogte
   is een schermmaat en geen vaste px: de inhoud is doorgaans hoger dan het
   venster (brochurepagina's onder elkaar, een Looker-bord), dus hoe meer
   venster, hoe meer er in beeld staat. Wijkt een scherm af, dan zet het
   --vivi-embed-hoogte op de wrapper in plaats van een inline style op het
   frame. Aangevraagd door S14 (26-08) voor brochure.blade.php. */
.vivi-embed {
    display: block;
    width: 100%;
    height: var(--vivi-embed-hoogte, 78vh);
    border: 0;
}

/* ─── TYPING ─── "Loïs typt"-indicator in de agent-chat, in dezelfde vorm als
   een agent-bubbel. Verschijnt via wire:loading terwijl het antwoord onderweg
   is. Aangevraagd door S19 (26-08) voor agent-chat.blade.php. */
.vivi-typing {
    display: none; /* wire:loading.flex zet display:flex zodra het laadt */
    align-items: flex-end;
    gap: .55rem;
}
.vivi-typing__avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.7rem; height: 1.7rem; border-radius: 9999px; flex: none;
    background: var(--vivi-ink); color: var(--vivi-cream-2);
    font-size: .7rem; font-weight: 700;
}
.vivi-typing__bubble {
    display: inline-flex; align-items: center; gap: .3rem;
    background: #fff; border: 1px solid rgba(43, 36, 25, .08);
    border-radius: 18px 18px 18px 4px; padding: .7rem .95rem;
    box-shadow: 0 2px 10px rgba(43, 36, 25, .05);
}
.vivi-typing__dot {
    width: .42rem; height: .42rem; border-radius: 9999px;
    background: var(--vivi-muted-vlak); opacity: .55;
    animation: vivi-typing-bounce 1.2s ease-in-out infinite;
}
.vivi-typing__dot:nth-child(2) { animation-delay: .18s; }
.vivi-typing__dot:nth-child(3) { animation-delay: .36s; }
@keyframes vivi-typing-bounce {
    0%, 60%, 100% { transform: translateY(0); opacity: .4; }
    30% { transform: translateY(-.22rem); opacity: .9; }
}

/* ---------------------------------------------------------------
   x-vivi.pijler: een contentpijler met de kleur die de klant er in de
   social-tool aan gaf. De kleur komt als --vivi-pijler mee op het
   element (klantdata, geen ontwerpwaarde; zie Pijler::kleur). Drie
   vormen: chip (naam met stip), stip (alleen de stip) en bar (een
   segment in de verdeelbalk, breedte via --vivi-pijler-aandeel).
   S26, 08-09-2026. */
.vivi-pijler {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .18rem .65rem .18rem .5rem; border-radius: var(--vivi-radius-pil);
    font-size: var(--vivi-tekst-xs); font-weight: 600; line-height: 1.3;
    color: var(--vivi-ink);
    background: color-mix(in srgb, var(--vivi-pijler, var(--vivi-gold)) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--vivi-pijler, var(--vivi-gold)) 32%, transparent);
    max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vivi-pijler__stip {
    display: inline-block; width: .55rem; height: .55rem; flex: none;
    border-radius: var(--vivi-radius-rond);
    background: var(--vivi-pijler, var(--vivi-gold));
}
.vivi-pijler__bar {
    display: block; height: 100%;
    flex: 0 0 var(--vivi-pijler-aandeel, auto);
    background: var(--vivi-pijler, var(--vivi-gold));
}

/* ---------------------------------------------------------------
   Projectpagina pm-live (22-10-2026): de projectpagina in het portaal
   als bento, naar de pin "Task Management Dashboard" (Awsmd). Kop met
   kruimelpad, cover en een vaste subnavigatie met ankers; daaronder
   drie overzichtstegels (een donkere ankertegel) en per sectie een kop.
   Mobiel eerst; alle maten uit tokens. Alles hangt onder .vivi-pp. */
.vivi-pp {
    display: flex; flex-direction: column; gap: var(--vivi-ruimte-xl);
    min-width: 0;
}
.vivi-pp > * { min-width: 0; }

/* Dezelfde kop boven het aanpasscherm (EditProject::getHeader). Die staat
   buiten de inhoud, en Filament zet daartussen mobiel 2rem en vanaf 1024px
   .5rem (02-filament.css). Deze marge vult aan tot 2.5rem op elke breedte. */
.vivi-pp--kop { margin-bottom: .5rem; }
@media (min-width: 1024px) {
    .vivi-pp--kop { margin-bottom: 2rem; }
}

/* Kruimelpad: terug naar Projecten, dan de projectnaam. */
.vivi-pp-kruimel {
    display: flex; align-items: center; gap: var(--vivi-ruimte-xs);
    min-width: 0; font-size: var(--vivi-tekst-s); color: var(--vivi-muted);
}
.vivi-pp-kruimel__terug {
    display: inline-flex; align-items: center; gap: var(--vivi-ruimte-2xs);
    min-height: var(--vivi-tik-min); flex: none;
    font-weight: 600; color: var(--vivi-ink); text-decoration: none;
}
.vivi-pp-kruimel__terug:hover { text-decoration: underline; }
.vivi-pp-kruimel__sep { flex: none; }
/* Projectnaam als tussenschakel (aanpasscherm): krimpt met puntjes, zodat Bewerken zichtbaar blijft. */
.vivi-pp-kruimel__terug--naam {
    display: block; flex: 0 1 auto; min-width: 0;
    line-height: var(--vivi-tik-min);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vivi-pp-kruimel__terug--naam ~ .vivi-pp-kruimel__hier { flex: none; }
.vivi-pp-kruimel__hier {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Kop: de cover vult het vlak; zonder cover blijft de merkkleur (of zand). */
.vivi-pp-held {
    position: relative; overflow: hidden; isolation: isolate;
    display: flex; align-items: flex-end;
    min-height: 13rem; margin-top: calc(-1 * var(--vivi-ruimte-m));
    border-radius: var(--vivi-radius-xl);
    background: var(--vivi-pp-merk, var(--vivi-zand));
    color: var(--vivi-tekst-op-donker);
}
.vivi-pp-held__beeld {
    position: absolute; inset: 0; z-index: -2;
    width: 100%; height: 100%; object-fit: cover;
}
.vivi-pp-held__scrim {
    position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg, rgba(20, 17, 12, 0) 25%, rgba(20, 17, 12, .72) 100%);
}
.vivi-pp-held__tekst {
    display: flex; flex-direction: column; gap: var(--vivi-ruimte-xs);
    min-width: 0; padding: var(--vivi-ruimte-l);
}
.vivi-pp-held__titel {
    margin: 0; font-family: var(--vivi-type-display);
    font-size: var(--vivi-kop-l); font-weight: 700; line-height: 1.05;
    letter-spacing: -.01em; overflow-wrap: anywhere;
}
.vivi-pp-held__badges {
    display: flex; flex-wrap: wrap; gap: var(--vivi-ruimte-xs);
    width: fit-content; max-width: 100%; padding: var(--vivi-ruimte-2xs);
    border-radius: var(--vivi-radius-l); background: var(--vivi-cream);
}
@media (min-width: 1024px) {
    .vivi-pp-held { min-height: 17rem; }
    .vivi-pp-held__tekst { padding: var(--vivi-ruimte-xl); }
    .vivi-pp-held__titel { font-size: var(--vivi-cijfer-xl); }
}

/* Held met een beeld uit project_beelden (Portaal-PROJ-A, regels uit het
   moodboard): het beeld is het grootste element, ongeveer 45 procent van de
   eerste viewport. Still of foto: titel linksonder op het beeld, scrim tot
   55 procent zwart (het plafond dat op elk beeld 4,5:1 haalt). */
.vivi-pp-held--beeld { min-height: clamp(15rem, 42vh, 30rem); }
.vivi-pp-held--beeld .vivi-pp-held__beeld { object-position: var(--vivi-pp-focus, 50% 50%); }
.vivi-pp-held--beeld .vivi-pp-held__scrim {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, .55) 62%, rgba(0, 0, 0, .55) 100%);
}

/* Werk (post, slide, flyer, schermbeeld): het werk draagt zijn eigen letter,
   dus de titel staat ernaast op het paginavlak, nooit erop. Werk dat
   ongeveer 16:9 is vult het vlak; ander werk staat heel in beeld op zijn
   eigen randkleur. */
.vivi-pp-held--werk {
    display: grid; grid-template-columns: minmax(0, 1fr); align-items: end;
    min-height: 0; background: transparent; color: var(--vivi-ink);
    border-radius: 0; overflow: visible;
}
.vivi-pp-held__werk {
    margin: 0; aspect-ratio: 16 / 9; overflow: hidden;
    border-radius: var(--vivi-radius-xl);
    background: var(--vivi-pp-rand, var(--vivi-cream-2));
}
.vivi-pp-held__werkbeeld {
    display: block; width: 100%; height: 100%;
    object-fit: cover; object-position: var(--vivi-pp-focus, 50% 100%);
}
.vivi-pp-held__werk--heel .vivi-pp-held__werkbeeld { object-fit: contain; object-position: 50% 50%; }
.vivi-pp-held--werk .vivi-pp-held__tekst { padding: var(--vivi-ruimte-m) 0 0; }
@media (min-width: 1024px) {
    .vivi-pp-held--werk {
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
        gap: var(--vivi-ruimte-xl);
    }
    .vivi-pp-held--werk .vivi-pp-held__tekst { padding: 0 0 var(--vivi-ruimte-s); }
}

/* Subnavigatie: blijft onder de hoofdbalk hangen. Op de telefoon schuift
   alleen de strook horizontaal, nooit de pagina. */
.vivi-pp-subnav {
    position: sticky; top: var(--vivi-hoofdbalk-h); z-index: 5;
    margin: calc(-1 * var(--vivi-ruimte-s)) 0;
    padding: var(--vivi-ruimte-2xs) 0;
    background: var(--vivi-vlak);
    border-bottom: 1px solid var(--vivi-line);
    overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
}
.vivi-pp-subnav::-webkit-scrollbar { display: none; }
.vivi-pp-subnav__lijst {
    display: flex; gap: var(--vivi-ruimte-2xs);
    margin: 0; padding: 0; list-style: none; width: max-content;
}
.vivi-pp-subnav__link {
    display: inline-flex; align-items: center; gap: var(--vivi-ruimte-xs);
    min-height: var(--vivi-tik-min); padding: 0 var(--vivi-ruimte-s);
    border-radius: var(--vivi-radius-pil);
    font-size: var(--vivi-tekst-s); font-weight: 600; white-space: nowrap;
    color: var(--vivi-ink); text-decoration: none;
}
.vivi-pp-subnav__link:hover { background: var(--vivi-cream-2); }
.vivi-pp-subnav__link:focus-visible { outline: 2px solid var(--vivi-ink); outline-offset: -2px; }
.vivi-pp-subnav__aantal,
.vivi-pp-telbol {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.35rem; height: 1.35rem; padding: 0 .35rem;
    border-radius: var(--vivi-radius-pil);
    background: var(--vivi-ink); color: var(--vivi-tekst-op-donker);
    font-size: var(--vivi-tekst-xs); font-weight: 700; line-height: 1;
}

/* Secties: kop met aantal of link rechts, ankers vallen onder de subnav. */
.vivi-pp-sectie {
    display: flex; flex-direction: column; gap: var(--vivi-ruimte-m);
    min-width: 0;
    scroll-margin-top: calc(var(--vivi-hoofdbalk-h) + var(--vivi-tik-min) + var(--vivi-ruimte-l));
}
.vivi-pp-sectie__kop {
    display: flex; align-items: center; flex-wrap: wrap; gap: var(--vivi-ruimte-s);
}
.vivi-pp-sectie__kop > :first-child { margin-right: auto; }
.vivi-pp-meer {
    display: inline-flex; align-items: center; gap: var(--vivi-ruimte-2xs);
    min-height: var(--vivi-tik-min);
    font-size: var(--vivi-tekst-s); font-weight: 600; color: var(--vivi-ink);
    text-decoration: underline; text-underline-offset: 3px;
}
.vivi-pp-leeg {
    padding: var(--vivi-ruimte-l); border-radius: var(--vivi-radius-l);
    border: 1px dashed var(--vivi-line-strong); color: var(--vivi-muted);
}

/* Bento: op de telefoon onder elkaar, vanaf 640 twee naast elkaar met de
   ankertegel breed, vanaf 1024 drie in de verhouding van de pin. */
.vivi-pp-bento {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--vivi-ruimte-m);
}
@media (min-width: 640px) {
    .vivi-pp-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vivi-pp-bento > :first-child { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
    .vivi-pp-bento { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, .9fr); }
    .vivi-pp-bento > :first-child { grid-column: auto; }
}
.vivi-pp-tegel {
    display: flex; flex-direction: column; gap: var(--vivi-ruimte-s);
    min-width: 0; padding: var(--vivi-ruimte-l);
    border-radius: var(--vivi-radius-xl);
    background: var(--vivi-vlak); border: 1px solid var(--vivi-line);
    box-shadow: var(--vivi-schaduw-rust);
    color: var(--vivi-ink); text-decoration: none;
}
.vivi-pp-tegel--link:hover { box-shadow: var(--vivi-schaduw-zweef); }
.vivi-pp-tegel--donker {
    background: var(--vivi-vlak-donker); border-color: var(--vivi-vlak-donker);
    color: var(--vivi-tekst-op-donker);
}
.vivi-pp-tegel__kop {
    font-size: var(--vivi-tekst-s); font-weight: 700; letter-spacing: .01em;
}
.vivi-pp-tegel__voet {
    margin: 0; margin-top: auto; font-size: var(--vivi-tekst-s); line-height: 1.45;
}
.vivi-pp-tegel__label {
    font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
    font-size: var(--vivi-tekst-xs); margin-right: var(--vivi-ruimte-2xs);
}
.vivi-pp-tegel__zacht { opacity: .7; }
.vivi-pp-tegel__voet .vivi-regel { display: block; }
.vivi-pp-cijfer { display: flex; flex-direction: column; gap: var(--vivi-ruimte-2xs); }
.vivi-pp-cijfer__waarde {
    font-family: var(--vivi-type-display); font-size: var(--vivi-cijfer-xl);
    font-weight: 700; line-height: 1; letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}
.vivi-pp-cijfer__waarde--datum { font-size: var(--vivi-kop-l); }
.vivi-pp-cijfer__deel { opacity: .45; }
.vivi-pp-cijfer__label { font-size: var(--vivi-tekst-s); color: var(--vivi-muted); }
.vivi-pp-tegel--donker .vivi-pp-cijfer__label { color: inherit; opacity: .7; }
.vivi-pp-tellers { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vivi-ruimte-xs); }

/* Fasebalk: een segment per fase, af in goud, de huidige half. */
.vivi-pp-fasebalk { display: flex; gap: 4px; }
.vivi-pp-fasebalk__deel {
    flex: 1 1 0; height: .5rem; border-radius: var(--vivi-radius-pil);
    background: rgba(255, 255, 255, .16);
}
.vivi-pp-fasebalk__deel--af { background: var(--vivi-gold); }
.vivi-pp-fasebalk__deel--nu {
    background: linear-gradient(90deg, var(--vivi-gold) 50%, rgba(255, 255, 255, .16) 50%);
}
.vivi-pp-intro { display: flex; flex-direction: column; align-items: flex-start; }

/* Lijst voor "wacht op jou": stip, tekst, datum rechts. */
.vivi-pp-lijst {
    display: flex; flex-direction: column;
    border-radius: var(--vivi-radius-l); background: var(--vivi-vlak);
    border: 1px solid var(--vivi-line);
}
.vivi-pp-lijst__rij {
    display: flex; align-items: center; gap: var(--vivi-ruimte-s);
    min-height: var(--vivi-tik-min); padding: var(--vivi-ruimte-s) var(--vivi-ruimte-m);
}
.vivi-pp-lijst__rij + .vivi-pp-lijst__rij { border-top: 1px solid var(--vivi-line); }
.vivi-pp-lijst__stip {
    flex: none; width: .55rem; height: .55rem; border-radius: var(--vivi-radius-rond);
    background: var(--vivi-info);
}
.vivi-pp-lijst__stip--goud { background: var(--vivi-gold); }
.vivi-pp-lijst__stip--fout { background: var(--vivi-fout); }
.vivi-pp-lijst__tekst {
    display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto;
    overflow-wrap: anywhere;
}

/* Wie doet wat: een kaart per persoon. */
.vivi-pp-personen {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--vivi-ruimte-m);
}
@media (min-width: 640px) {
    .vivi-pp-personen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
    .vivi-pp-personen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.vivi-pp-persoon {
    display: flex; flex-direction: column; gap: var(--vivi-ruimte-s);
    min-width: 0; padding: var(--vivi-ruimte-m) var(--vivi-ruimte-l);
    border-radius: var(--vivi-radius-xl); background: var(--vivi-vlak);
    border: 1px solid var(--vivi-line);
}
.vivi-pp-persoon--intern { background: var(--vivi-cream-2); border-style: dashed; }
.vivi-pp-persoon__kop { display: flex; align-items: center; gap: var(--vivi-ruimte-s); min-width: 0; }
.vivi-pp-avatar {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 2.5rem; height: 2.5rem; border-radius: var(--vivi-radius-rond);
    background: var(--vivi-ink); color: var(--vivi-tekst-op-donker);
    font-size: var(--vivi-tekst-s); font-weight: 700;
}
.vivi-pp-avatar--ik { background: var(--vivi-gold); color: var(--vivi-ink); }
.vivi-pp-persoon--intern .vivi-pp-avatar { background: var(--vivi-zand); }
.vivi-pp-persoon__naam { display: flex; flex-direction: column; min-width: 0; }
.vivi-pp-persoon__tellers {
    display: flex; flex-wrap: wrap; gap: 0 var(--vivi-ruimte-s);
    font-size: var(--vivi-tekst-xs); color: var(--vivi-muted);
}
.vivi-pp-persoon__geblokkeerd { color: var(--vivi-warn); font-weight: 600; }
.vivi-pp-persoon__taken { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.vivi-pp-persoon__taak {
    display: flex; align-items: baseline; gap: var(--vivi-ruimte-xs);
    padding: var(--vivi-ruimte-xs) 0; border-top: 1px solid var(--vivi-line);
    font-size: var(--vivi-tekst-s); min-width: 0;
}
.vivi-pp-persoon__titel { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
/* Waar de taak in de keten hangt: onder een oudertaak, of wachtend op een voorganger. */
.vivi-pp-persoon__keten { display: block; font-size: var(--vivi-tekst-xs); color: var(--vivi-muted); }
.vivi-pp-persoon__keten--wacht { color: var(--vivi-ink); font-weight: 600; }
.vivi-pp-status {
    flex: none; padding: .05rem .45rem; border-radius: var(--vivi-radius-pil);
    font-size: var(--vivi-tekst-xs); font-weight: 600;
    background: var(--vivi-cream-2); color: var(--vivi-ink);
}
.vivi-pp-status--in_progress { background: color-mix(in srgb, var(--vivi-info) 16%, transparent); }
.vivi-pp-status--review { background: color-mix(in srgb, var(--vivi-gold) 28%, transparent); }
.vivi-pp-status--geblokkeerd { background: color-mix(in srgb, var(--vivi-warn) 22%, transparent); }

/* Planning en bestanden: panelen, twee naast elkaar vanaf 1024. */
.vivi-pp-planning,
.vivi-pp-bestandrij {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--vivi-ruimte-m);
    align-items: start;
}
@media (min-width: 1024px) {
    .vivi-pp-planning--twee { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
    .vivi-pp-bestandrij { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* Staat er maar een paneel (alleen documenten), dan de volle breedte. */
    .vivi-pp-bestandrij > :only-child { grid-column: 1 / -1; }
}
.vivi-pp-paneel {
    min-width: 0; padding: var(--vivi-ruimte-m) var(--vivi-ruimte-l);
    border-radius: var(--vivi-radius-xl); background: var(--vivi-vlak);
    border: 1px solid var(--vivi-line);
}
.vivi-pp-paneel__kop {
    display: flex; align-items: center; flex-wrap: wrap; gap: var(--vivi-ruimte-s);
    margin-bottom: var(--vivi-ruimte-s);
}
.vivi-pp-paneel__kop > :first-child { margin-right: auto; }
.vivi-pp-paneel__titel { margin: 0; font-size: var(--vivi-tekst-m); font-weight: 700; }
.vivi-pp-bestand {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--vivi-ruimte-s); padding: var(--vivi-ruimte-xs) 0; min-width: 0;
}
@media (max-width: 479.98px) {
    .vivi-pp-bestand { flex-wrap: wrap; }
    .vivi-pp-bestand > .min-w-0 { flex: 1 1 100%; }
}

/* Mijlpalen: datumblok links, naam en status rechts. */
.vivi-pp-mijlpalen { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.vivi-pp-mijlpaal {
    display: flex; align-items: center; gap: var(--vivi-ruimte-s);
    padding: var(--vivi-ruimte-xs) 0; min-width: 0;
}
.vivi-pp-mijlpaal + .vivi-pp-mijlpaal { border-top: 1px solid var(--vivi-line); }
.vivi-pp-mijlpaal--klaar { opacity: .6; }
.vivi-pp-mijlpaal__datum {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    flex: none; width: 3rem; height: 3rem; border-radius: var(--vivi-radius-m);
    background: var(--vivi-cream-2); line-height: 1;
}
.vivi-pp-mijlpaal__dag { font-family: var(--vivi-type-display); font-size: var(--vivi-tekst-l); font-weight: 700; }
.vivi-pp-mijlpaal__maand { font-size: var(--vivi-tekst-xs); color: var(--vivi-muted); text-transform: uppercase; }
.vivi-pp-mijlpaal__tekst {
    display: flex; flex-direction: column; gap: var(--vivi-ruimte-2xs); min-width: 0;
    overflow-wrap: anywhere;
}

/* Beelden: raster van tegels, 2 op de telefoon, tot 3 vanaf 640, tot 4 vanaf 1280.
   Het precieze aantal (--m1..3, --l1..4) kiest ProjectView::beeldKolommen zo
   dat er geen wees onderaan staat. */
.vivi-pp-beelden {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--vivi-ruimte-s);
    margin: 0; padding: 0; list-style: none;
}
/* Op de telefoon (2 kolommen) neemt bij een oneven aantal het laatste beeld
   de volle breedte, anders staat er een wees onderaan. */
@media (max-width: 639.98px) {
    .vivi-pp-beelden > .vivi-pp-beeld:last-child:nth-child(odd):not(:first-child) { grid-column: 1 / -1; }
}
@media (min-width: 640px) {
    .vivi-pp-beelden { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--vivi-ruimte-m); }
    .vivi-pp-beelden--m1 { grid-template-columns: minmax(0, 1fr); }
    .vivi-pp-beelden--m2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
    .vivi-pp-beelden { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .vivi-pp-beelden--l1 { grid-template-columns: minmax(0, 1fr); }
    .vivi-pp-beelden--l2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vivi-pp-beelden--l3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.vivi-pp-beeld { display: flex; flex-direction: column; gap: var(--vivi-ruimte-2xs); min-width: 0; }
.vivi-pp-beeld__link {
    display: block; overflow: hidden; aspect-ratio: 4 / 3;
    border-radius: var(--vivi-radius-l); background: var(--vivi-cream-2);
}
.vivi-pp-beeld__img {
    display: block; width: 100%; height: 100%; object-fit: cover;
    transition: transform .3s ease;
}
.vivi-pp-beeld__link:hover .vivi-pp-beeld__img { transform: scale(1.03); }
.vivi-pp-beeld__onder { display: flex; align-items: baseline; gap: var(--vivi-ruimte-xs); min-width: 0; }
.vivi-pp-beeld__naam {
    flex: 1 1 auto; min-width: 0; font-size: var(--vivi-tekst-xs); color: var(--vivi-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vivi-pp-beeld__actie {
    flex: none; font-size: var(--vivi-tekst-xs); font-weight: 600; color: var(--vivi-ink);
    text-decoration: underline; text-underline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
    .vivi-pp-beeld__img { transition: none; }
    .vivi-pp-beeld__link:hover .vivi-pp-beeld__img { transform: none; }
}

/* Projectpagina: de taken onder een fase en de pagina's van een website
   (ProjectView::takenPerFase en ::sitePaginas, 22-10-2026). */
.vivi-pp-fasetaken { display: flex; flex-direction: column; gap: .25rem; margin-top: .5rem; }
.vivi-pp-paginas { display: flex; flex-direction: column; gap: .5rem; padding: .75rem 0 .25rem; }
.vivi-pp-paginas__lijst { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.vivi-pp-paginas__link {
    display: inline-flex; align-items: baseline; gap: .5rem; min-height: 44px; padding: .625rem .875rem;
    border: 1px solid var(--vivi-line); border-radius: var(--vivi-radius-s); color: inherit; text-decoration: none;
}
.vivi-pp-paginas__link:hover, .vivi-pp-paginas__link:focus-visible { border-color: currentColor; }
.vivi-pp-paginas__titel { font-weight: 600; }

/* Mobiel (<=640px) voor basis en componenten. Staat hier omdat de
   cascade-positie meetelt: verplaatsen naar het einde zou de
   overrides in 06-schermen.css stilzwijgend omdraaien. */
    /* --- Mobiel (telefoon, ~390px): compactere ruimte, kleinere koppen,
           alles één kolom. Alleen klassen, nooit inline-styles, zodat dit
           daadwerkelijk wint. --- */
    @media (max-width: 639.98px) {
        .vivi-card { padding: 1rem; border-radius: 16px; }
        .vivi-card--roomy { padding: 1.1rem 1.15rem; }

        .vivi-page-title { font-size: 1.25rem; }
        .vivi-title-lg { font-size: 1.5rem; }
        .vivi-h2 { font-size: 1.1rem; }
        .vivi-hero { padding: 1.15rem 1.15rem; border-radius: 16px; }

        .vivi-cover, .vivi-cover--sm { min-height: 168px; }
        .vivi-cover__body, .vivi-cover--sm .vivi-cover__body { padding: 1.05rem 1.15rem; }
        .vivi-cover__title, .vivi-cover--sm .vivi-cover__title { font-size: 1.5rem; line-height: 1.15; }

        .vivi-pad-lg, .vivi-pad-lg--sm { padding: 1.05rem 1.15rem 1.2rem; }

        .vivi-empty { padding: 2.25rem 1.15rem; }

        /* Kerncijfer van een document past niet naast het label: eronder,
           links uitgelijnd zodat het niet als losse kolom aanvoelt. */
        .vivi-doc-head { gap: .9rem; }
        .vivi-doc-head__side { text-align: left; width: 100%; }
        .vivi-figure { font-size: 1.9rem; }
        .vivi-figure--md { font-size: 1.8rem; }
        .vivi-figure--sm { font-size: 1.45rem; }

        .vivi-hero-lois { padding: 1.15rem 1.15rem; border-radius: 18px; }
        .vivi-hero-lois__form { max-width: 100%; }

        /* Zoekpill mag niet op 220px blijven staan: dat duwt de rij breder
           dan het scherm. */
        .vivi-search { min-width: 0; width: 100%; }

        /* Kanban-kolommen: bijna schermbreed en met scroll-snap, zodat er op een
           telefoon precies één kolom tegelijk in beeld staat in plaats van zes
           afgeknipte stroken. */
        .vivi-board { scroll-snap-type: x mandatory; scroll-padding-left: .25rem; }
        .vivi-col { flex: 0 0 86vw; scroll-snap-align: start; }
        /* De kolomkop is het handvat om tussen kolommen te schuiven, want de
           kaarten zelf vangen de horizontale beweging op als veeg. Hier staat
           bewust GEEN touch-action: pan-x. Dat leek logisch maar knipt juist het
           verticaal scrollen en het knijpen-om-te-zoomen af, en de kop is een
           brede strook boven in elke kolom. De standaardwaarde laat alle
           richtingen toe en de kop schuift daarmee net zo goed. */

        /* Tikbaar houden: knoppen met kleine inline-padding blijven anders
           onder de 40px. Ook de kleine chips (voorbeeldvragen, agenda-tabs),
           want die zijn met 26px met een duim nauwelijks te raken. */
        .vivi-btn { min-height: 2.35rem; }
        .vivi-suggest, .vivi-tab { min-height: 2.1rem; padding-left: .9rem; padding-right: .9rem; }

        /* Documentviews: kop en rijen onder elkaar op smal. */
        .vivi-doc-pills { gap: var(--vivi-ruimte-xs); }
        .vivi-doc-titel { font-size: var(--vivi-kop-s); }
        .vivi-doc-rij { flex-wrap: wrap; gap: .3rem; font-size: var(--vivi-tekst-s); }
        .vivi-doc-rij--totaal .vivi-doc-rij__waarde { font-size: var(--vivi-tekst-l); }

        .vivi-date__nr { font-size: 2.1rem; }
        .vivi-grid-4 { gap: .6rem; }

        /* Knoppenrij: Vorige/Volgende, Opslaan + laadindicator. Op smal
           stapelen ze verticaal zodat elk doel tikbaar blijft. */
        .vivi-rij { flex-wrap: wrap; }
        .vivi-rij .vivi-btn { flex: 1 1 100%; justify-content: center; }
        /* ...maar een knop die expliciet .vivi-vast draagt (de sticky
           opslaanrij van het CMS) blijft compact: flex none uit
           04-componenten verliest hier anders op specificiteit. */
        .vivi-rij .vivi-btn.vivi-vast { flex: none; }
        /* Drie korte statusknoppen (shootplan op de set) blijven naast elkaar:
           gestapeld kost elk shot een volle schermhoogte aan knoppen. */
        .vivi-rij.vivi-rij--drie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
        .vivi-rij--drie .vivi-btn { padding-inline: .3rem; }

        /* Formulierrijen wat strakker: er is geen ruimte voor de desktop-gap. */
        .vivi-formulier .fi-fo-component-ctn { gap: var(--vivi-ruimte-m); }

        /* Rij-items in lijsten (onboarding-secties, projecten): de standaard
           padding komt op ~38px, net onder het tikminimum van 44px. */
        .vivi-row { min-height: 2.75rem; }

        /* Kale tekstlinks (mailadres, "Alle", "in Drive", "Terug naar"):
           gemeten 18-20px hoog op 06-08-2026, met een duim niet te raken.
           Blok-padding tilt het raakvlak naar ~36px zonder de tekst te
           vergroten; inline-block is nodig om de padding mee te laten tellen. */
        a.vivi-link, a.vivi-meta, a.vivi-link-goud, a.vivi-muted {
            display: inline-block; padding-top: .55rem; padding-bottom: .55rem;
        }
    }

/* Schermgebonden lagen: kalender, meekijkbanner, contentkalender, social-analytics.
   Geknipt uit brand-head.blade.php op 31-07-2026, ongewijzigd. */
    /* ==== Kalender-CSS uit Romeo's laag (agenda-tab), 21-07 overgenomen ==== */

    /* =========================================================
       Agenda-tab: dag, week en maand binnen één schermhoogte.
       Zelfde principe als .vivi-app op het klantdashboard: het scherm is
       de container, alleen lijsten scrollen intern. De maandcel werd
       daarvoor lager en de chips kleiner; wat niet past zit achter
       "+n meer", dat doorklikt naar de dagweergave.
       ========================================================= */
    .vivi-cal-app { display: flex; flex-direction: column; gap: .9rem; }
    .vivi-cal-app__grid { display: grid; gap: .9rem; grid-template-columns: 1fr; }
    /* Zonder min-width:0 duwt een lange afspraaktitel de kolom breder dan het
       scherm; dezelfde valkuil als in het dashboardraster. */
    .vivi-cal-app__grid > * { min-width: 0; }
    .vivi-cal-main { display: flex; flex-direction: column; min-height: 0; padding: .9rem; }
    .vivi-cal-side { display: flex; flex-direction: column; gap: .9rem; min-height: 0; }
    @media (min-width: 1024px) {
        /* Dezelfde rekensom als het dashboard: topbar plus paginapadding eraf. */
        .vivi-cal-app { height: var(--vivi-paginahoogte); overflow: hidden; }
        .vivi-cal-app__grid { flex: 1; min-height: 0; grid-template-columns: minmax(0, 1fr) 19rem; }
        /* De actielijst krijgt de resterende hoogte en scrollt intern; de voet
           met legenda en feed-koppeling houdt zijn eigen maat. overflow-y op de
           kolom is het vangnet voor een heel lage viewport. */
        .vivi-cal-side { overflow-y: auto; }
        .vivi-cal-side__acties { flex: 1; }
    }

    .vivi-cal-nav { display: flex; align-items: flex-end; justify-content: space-between; gap: .8rem; flex-wrap: wrap; }
    .vivi-cal-kicker { font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .11em; color: var(--vivi-muted); }
    .vivi-cal-title { font-size: 1.3rem; font-weight: 700; color: var(--vivi-ink); margin: .1rem 0 0; line-height: 1.15; }
    .vivi-cal-controls { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
    .vivi-cal-arrows { display: flex; align-items: center; gap: .35rem; }
    .vivi-cal-tabs { display: inline-flex; gap: .2rem; padding: .18rem; border-radius: 9999px; background: rgba(43, 36, 25, .05); }
    .vivi-cal-tab {
        border: 0; background: transparent; border-radius: 9999px; padding: .32rem .85rem;
        font: inherit; font-size: .75rem; font-weight: 600; color: var(--vivi-muted); cursor: pointer;
    }
    .vivi-cal-tab.on { background: #fff; color: var(--vivi-ink); box-shadow: 0 1px 4px rgba(43, 36, 25, .14); }
    .vivi-cal-btn { font-size: .72rem; padding: .3rem .7rem; }

    /* Op smal scherm scrollt het raster binnen de kaart, nooit de pagina. */
    .vivi-cal-scroll { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .vivi-cal-wd {
        display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px;
        margin-bottom: 5px; padding: 0 2px; min-width: 560px; flex: none;
    }
    .vivi-cal-wd span {
        font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
        color: var(--vivi-muted); padding-left: 6px;
    }
    .vivi-cal-grid {
        display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
        grid-auto-rows: minmax(74px, auto); gap: 5px; min-width: 560px;
    }
    @media (min-width: 1024px) {
        /* Zes rijen die samen precies de kaart vullen. */
        .vivi-cal-grid { flex: 1; min-height: 0; grid-template-rows: repeat(6, minmax(0, 1fr)); }
    }
    .vivi-cal-cell {
        min-width: 0; min-height: 0; overflow: hidden;
        border: 1px solid var(--vivi-line); border-radius: 11px; padding: 4px 5px 5px;
        background: rgba(255, 255, 255, 0.55);
        display: flex; flex-direction: column; gap: 3px;
        transition: border-color 0.15s ease;
    }
    .vivi-cal-cell:hover { border-color: var(--vivi-line-strong); }
    .vivi-cal-cell.is-out { opacity: 0.42; }
    .vivi-cal-cell.is-wknd { background: rgba(43, 36, 25, 0.03); }
    .vivi-cal-cell.is-today {
        border-color: rgba(235, 178, 46, 0.7);
        box-shadow: 0 0 22px -10px rgba(235, 178, 46, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    }
    .vivi-cal-daynum {
        border: 0; background: transparent; padding: 0; font: inherit;
        font-size: 0.7rem; font-weight: 700; color: var(--vivi-muted);
        cursor: pointer; text-align: left; line-height: 1.25; flex: none;
    }
    .vivi-cal-cell.is-today .vivi-cal-daynum { color: var(--vivi-gold-press); }
    /* De chips zitten in een eigen laagje dat intern mag scrollen. Op een korte
       laptop is een celrij soms lager dan drie chips plus de "+n meer"-knop;
       zonder dit laagje zou juist die knop wegvallen en waren de resterende
       afspraken onbereikbaar. */
    .vivi-cal-cell__chips {
        flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 3px;
        scrollbar-width: thin; scrollbar-color: rgba(43, 36, 25, .18) transparent;
    }
    .vivi-cal-chip {
        display: flex; align-items: center; gap: 5px; padding: 2px 6px; border-radius: 7px;
        border: 1px solid var(--vivi-line); background: #fff; width: 100%; flex: none;
        font: inherit; font-size: 0.66rem; font-weight: 600; line-height: 1.35;
        color: var(--vivi-ink); cursor: pointer; text-align: left;
        min-width: 0; transition: background 0.12s, border-color 0.12s;
    }
    .vivi-cal-chip:hover { border-color: var(--vivi-line-strong); background: var(--vivi-cream-2); }
    .vivi-cal-chip .c { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .vivi-cal-more {
        border: 0; background: transparent; padding: 0 6px; font: inherit; flex: none;
        font-size: 0.62rem; font-weight: 700; color: var(--vivi-muted); cursor: pointer; text-align: left;
    }
    .vivi-cal-more:hover { color: var(--vivi-ink); }

    /* Markeringen van de klant zelf op het raster: shootdag, periode, evenement.
       Een periode loopt door over de cellen; alleen de eerste dag draagt het label. */
    .vivi-cal-mark {
        display: block; min-height: .9rem; margin: 1px -2px 0; padding: 0 .35rem;
        font-size: .6rem; font-weight: 700; line-height: .9rem; letter-spacing: .02em; text-transform: uppercase;
        color: var(--vivi-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .vivi-cal-mark--shootdag { background: color-mix(in srgb, var(--vivi-gold) 35%, transparent); }
    .vivi-cal-mark--periode { background: color-mix(in srgb, var(--vivi-info) 22%, transparent); }
    .vivi-cal-mark--evenement { background: color-mix(in srgb, var(--vivi-ok) 22%, transparent); }
    .vivi-cal-mark.is-start { border-top-left-radius: 5px; border-bottom-left-radius: 5px; margin-left: 0; }
    .vivi-cal-mark.is-eind { border-top-right-radius: 5px; border-bottom-right-radius: 5px; margin-right: 0; }

    /* Weekweergave: zeven kolommen die elk intern scrollen. */
    .vivi-cal-week {
        display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px;
        min-width: 640px; flex: 1; min-height: 0;
    }
    @media (max-width: 1023.98px) { .vivi-cal-week { min-height: 20rem; } }
    .vivi-cal-day {
        display: flex; flex-direction: column; min-height: 0; overflow: hidden;
        border: 1px solid var(--vivi-line); border-radius: 12px; background: rgba(255, 255, 255, 0.55);
    }
    .vivi-cal-day.is-wknd { background: rgba(43, 36, 25, 0.03); }
    .vivi-cal-day.is-today { border-color: rgba(235, 178, 46, 0.7); box-shadow: 0 0 22px -12px rgba(235, 178, 46, 0.9); }
    .vivi-cal-day__head {
        display: flex; align-items: baseline; gap: .35rem; width: 100%; flex: none;
        border: 0; border-bottom: 1px solid var(--vivi-line); background: transparent;
        padding: 6px 8px; font: inherit; cursor: pointer; text-align: left;
    }
    .vivi-cal-day__wd { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--vivi-muted); }
    .vivi-cal-day__nr { font-size: 0.9rem; font-weight: 700; color: var(--vivi-ink); }
    .vivi-cal-day.is-today .vivi-cal-day__nr { color: var(--vivi-gold-press); }
    .vivi-cal-day__body { flex: 1; min-height: 0; overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 4px; }
    .vivi-cal-day__leeg { color: rgba(43, 36, 25, 0.18); font-size: .8rem; text-align: center; padding-top: .25rem; }

    /* Teamweergave (agenda van collega's): een rij per collega, zeven dagen. */
    /* Zelfde ondergrens als de weekweergave (640): met 760 en een naamkolom van
       9.5rem viel zondag op 1440 25px buiten het scrollvak van 735 (gemeten 23-10). */
    .vivi-cal-team { display: grid; gap: 6px; min-width: 640px; }
    .vivi-cal-team__kop, .vivi-cal-team__rij { display: grid; grid-template-columns: 7.5rem repeat(7, minmax(0, 1fr)); gap: 6px; }
    .vivi-cal-team__dag { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--vivi-muted); padding: 0 4px; }
    .vivi-cal-team__dag.is-today { color: var(--vivi-gold-press); }
    .vivi-cal-team__wie { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
    .vivi-cal-team__naam { font-size: 0.8rem; font-weight: 700; color: var(--vivi-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .vivi-cal-team__bron { font-size: 0.6rem; color: var(--vivi-muted); }
    .vivi-cal-team__cel {
        display: flex; flex-direction: column; gap: 3px; min-height: 3.2rem; min-width: 0; padding: 4px;
        border: 1px solid var(--vivi-line); border-radius: 10px; background: rgba(255, 255, 255, 0.55);
    }
    .vivi-cal-team__cel.is-wknd { background: rgba(43, 36, 25, 0.03); }
    .vivi-cal-team__item {
        display: flex; flex-direction: column; padding: 3px 6px; border-radius: 6px; min-width: 0;
        font-size: 0.66rem; font-weight: 600; line-height: 1.3; color: var(--vivi-ink);
    }
    .vivi-cal-team__item .t { color: var(--vivi-muted); font-weight: 500; font-variant-numeric: tabular-nums; }
    /* De titel is waar het om draait: hij loopt door over maximaal drie regels. */
    .vivi-cal-team__item .c { min-width: 0; overflow-wrap: break-word; hyphens: auto; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
    .vivi-cal-team__item--google { background: rgba(43, 36, 25, 0.08); }
    .vivi-cal-team__item--blok { background: color-mix(in srgb, var(--vivi-info) 18%, transparent); }
    .vivi-cal-team__item--taak { background: color-mix(in srgb, var(--vivi-gold) 28%, transparent); }
    .vivi-cal-team__uitleg, .vivi-cal-team__leeg { margin-top: .75rem; font-size: 0.7rem; color: var(--vivi-muted); }

    /* Dagweergave: afspraken onder elkaar met tijdstip en directe knoppen. */
    .vivi-cal-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: .5rem; }
    .vivi-cal-item {
        display: flex; gap: .85rem; padding: .65rem .8rem; flex: none;
        border: 1px solid var(--vivi-line); border-radius: 13px; background: rgba(255, 255, 255, 0.6);
    }
    .vivi-cal-item__time { flex: none; width: 4.2rem; font-size: .78rem; font-weight: 700; color: var(--vivi-ink); }
    .vivi-cal-item__body { display: flex; flex-direction: column; gap: .15rem; flex: 1; min-width: 0; }
    .vivi-cal-item__title { display: flex; align-items: center; gap: .45rem; font-size: .86rem; font-weight: 600; color: var(--vivi-ink); }
    .vivi-cal-item__meta { font-size: .72rem; }
    .vivi-cal-item__desc { font-size: .78rem; line-height: 1.5; }
    .vivi-cal-item__acties { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .4rem; }
    .vivi-cal-leeg { font-size: .85rem; padding: 1.4rem .2rem; }

    /* Zijkolom: acties boven, legenda en feed-koppeling compact eronder. */
    .vivi-cal-side__acties { display: flex; flex-direction: column; min-height: 0; padding: 1rem 1.1rem; }
    .vivi-cal-side__titel { font-size: 1rem; font-weight: 600; color: var(--vivi-ink); margin: 0 0 .2rem; }
    .vivi-cal-side__scroll { flex: 1; min-height: 0; overflow-y: auto; }
    .vivi-cal-side__ok { display: flex; align-items: center; gap: .6rem; padding: .5rem 0; font-size: .84rem; font-weight: 600; color: var(--vivi-ink); }
    .vivi-cal-side__voet { flex: none; padding: .9rem 1.1rem; }
    .vivi-cal-legend { display: flex; gap: .35rem .8rem; flex-wrap: wrap; padding: 0 1px; }
    .vivi-cal-legend__item { display: inline-flex; align-items: center; gap: .35rem; font-size: .7rem; }
    .vivi-cal-fold { margin-top: .75rem; border-top: 1px solid var(--vivi-line); padding-top: .6rem; }
    .vivi-cal-fold > summary {
        display: flex; align-items: center; gap: .4rem; list-style: none;
        font-size: .78rem; font-weight: 600; color: var(--vivi-ink); cursor: pointer;
    }
    .vivi-cal-fold > summary::-webkit-details-marker { display: none; }
    .vivi-cal-fold > summary::before { content: '+'; font-weight: 700; color: var(--vivi-muted); }
    .vivi-cal-fold[open] > summary::before { content: '-'; }
    .vivi-cal-fold__body { font-size: .76rem; line-height: 1.5; margin: .45rem 0 .55rem; }
    .vivi-cal-fold__rij { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
    .vivi-cal-fold__url {
        flex: 1; min-width: 9rem; font: inherit; font-size: .72rem; padding: .4rem .6rem;
        border: 1px solid var(--vivi-line-strong); border-radius: 9px;
        background: rgba(255, 255, 255, .9); color: var(--vivi-muted);
    }

    /* Tikbaar houden op mobiel: chips en tabs zijn anders nauwelijks te raken. */
    @media (max-width: 639.98px) {
        .vivi-cal-main { padding: .75rem; }
        .vivi-cal-title { font-size: 1.15rem; }
        .vivi-cal-tab { min-height: 2.1rem; padding-left: .9rem; padding-right: .9rem; }
        .vivi-cal-chip { min-height: 1.9rem; }
        .vivi-cal-daynum { min-height: 1.4rem; }
        .vivi-cal-item { flex-direction: column; gap: .3rem; }
        .vivi-cal-item__time { width: auto; }
    }

    .vivi-agenda-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: var(--vivi-muted-vlak); }
    .vivi-agenda-dot--shoot { background: #C0563B; }
    .vivi-agenda-dot--montage { background: #7E6CA8; }
    .vivi-agenda-dot--oplevering { background: var(--vivi-ok); }
    .vivi-agenda-dot--maandcall { background: var(--vivi-info); }
    .vivi-agenda-dot--social-review { background: var(--vivi-gold); box-shadow: 0 0 8px rgba(235, 178, 46, 0.8); }
    .vivi-agenda-dot--factuur { background: var(--vivi-warn); }
    .vivi-agenda-dot--taak { background: var(--vivi-muted-vlak); }
    .vivi-agenda-dot--project { background: #4A6B9A; }
    .vivi-agenda-dot--website { background: #5B8A8A; }
    .vivi-agenda-dot--event { background: #8C3A6B; }



    /* ---- meekijk-banner (admin bekijkt het portaal als klant) ---- */
    .vivi-impersonation {
        position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 60;
        display: flex; align-items: center; gap: 12px;
        padding: 9px 10px 9px 18px; border-radius: 999px;
        background: var(--vivi-ink); color: var(--vivi-cream);
        font-family: var(--vivi-serif); font-size: 0.8rem; font-weight: 600;
        box-shadow: 0 18px 44px -18px rgba(43, 36, 25, 0.6);
        max-width: calc(100vw - 24px);
    }
    .vivi-impersonation a {
        background: var(--vivi-gold); color: var(--vivi-ink);
        border-radius: 999px; padding: 6px 14px; font-weight: 700; text-decoration: none;
        white-space: nowrap;
    }
    .vivi-impersonation a:hover { background: var(--vivi-gold-press); }

    /* =========================================================
       Contentkalender: de postkaart (vivi-ck). Eén kaart die van boven
       naar beneden als één zin leest: kopband met status en moment,
       beeld naast tekst, het gesprek, en onderaan de vraag met de
       knoppen. Gedeeld door de daglijst en de open kaart naast de feed.
       Herontworpen 08-09-2026 (S26, ronde 2).
       ========================================================= */
    /* De badge-tonen --ok en --gold stonden hier; ze zijn op 31-07-2026 naar
       04-componenten.css verhuisd, bij de rest van de tonen. */

    .vivi-ck-dag { margin-bottom: var(--vivi-ruimte-l); }
    .vivi-ck-daghead {
        font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
        color: var(--vivi-muted); padding: 0 0 .5rem .15rem;
        border-bottom: 1px solid var(--vivi-line); margin-bottom: .8rem;
    }

    .vivi-ck-post { display: flex; flex-direction: column; margin-bottom: .8rem; padding: 0; overflow: hidden; }
    .vivi-ck-post.is-wacht { border-color: var(--vivi-gold); }

    /* Kopband: status links, moment rechts. De linkerrand kleurt mee met de status. */
    .vivi-ck-kop {
        display: flex; align-items: center; justify-content: space-between; gap: var(--vivi-ruimte-s); flex-wrap: wrap;
        padding: .65rem var(--vivi-ruimte-m); background: var(--vivi-cream-2);
        border-bottom: 1px solid var(--vivi-line); box-shadow: inset 4px 0 0 var(--vivi-line-strong);
    }
    .vivi-ck-post.is-wacht .vivi-ck-kop { box-shadow: inset 4px 0 0 var(--vivi-gold); }
    .vivi-ck-post.is-ok .vivi-ck-kop { box-shadow: inset 4px 0 0 var(--vivi-ok); }
    .vivi-ck-kop__status { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; min-width: 0; }
    .vivi-ck-kop__zin { font-size: var(--vivi-tekst-s); font-weight: 600; color: var(--vivi-ink); }
    .vivi-ck-kop__wanneer { display: flex; align-items: baseline; gap: .45rem; margin-left: auto; }
    .vivi-ck-kop__datum { font-family: var(--vivi-serif); font-size: var(--vivi-tekst-l); font-weight: 700; color: var(--vivi-ink); white-space: nowrap; }
    .vivi-ck-kop__tijd { font-size: var(--vivi-tekst-s); font-variant-numeric: tabular-nums; color: var(--vivi-muted); }
    .vivi-ck-kop__wanneer .vivi-btn { align-self: center; margin-left: .35rem; }

    /* Lijf: beeld links, inhoud rechts. */
    .vivi-ck-lijf { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: var(--vivi-ruimte-m); padding: var(--vivi-ruimte-m); align-items: start; }
    .vivi-ck-beeld {
        position: relative; aspect-ratio: 4 / 5; overflow: hidden;
        border-radius: var(--vivi-radius-s); background: var(--vivi-cream-2); border: 1px solid var(--vivi-line);
    }
    .vivi-ck-beeld--reel,
    .vivi-ck-beeld--story { aspect-ratio: 9 / 16; }
    .vivi-ck-beeld img,
    .vivi-ck-beeld video { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; display: block; background: var(--vivi-cream-2); }
    .vivi-ck-beeld .vivi-ck-beeld__stuk[hidden] { display: none; }
    .vivi-ck-beeld-leeg {
        position: absolute; inset: 0; display: grid; place-items: center;
        padding: .7rem; text-align: center; font-size: .72rem; line-height: 1.35; color: var(--vivi-tekst-2, var(--vivi-muted));
        text-wrap: balance;
    }
    .vivi-ck-beeld__type {
        position: absolute; right: .4rem; top: .4rem; z-index: 2;
        padding: .1rem .45rem; border-radius: var(--vivi-radius-pil);
        font-size: .62rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
        background: color-mix(in srgb, var(--vivi-cream) 88%, transparent); color: var(--vivi-ink);
    }
    .vivi-ck-inhoud { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
    .vivi-ck-meta { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
    .vivi-ck-tijd { font-weight: 700; font-size: .78rem; font-variant-numeric: tabular-nums; color: var(--vivi-ink); margin-right: .15rem; }
    .vivi-ck-overlay { font-size: var(--vivi-kop-s); font-weight: 600; color: var(--vivi-ink); line-height: 1.25; text-wrap: balance; }
    .vivi-ck-caption { font-size: var(--vivi-tekst-s); line-height: 1.6; color: var(--vivi-ink); margin: 0; white-space: pre-line; text-wrap: pretty; overflow-wrap: anywhere; }
    .vivi-ck-concept {
        margin: 0; padding: .55rem .75rem; border-radius: var(--vivi-radius-s);
        background: var(--vivi-cream-2); font-size: var(--vivi-tekst-s); line-height: 1.5; color: var(--vivi-ink); text-wrap: pretty;
    }
    .vivi-ck-concept__label {
        display: inline-block; margin-right: .4rem; font-size: .66rem; font-weight: 700;
        letter-spacing: .08em; text-transform: uppercase; color: var(--vivi-muted);
    }

    /* Het gesprek over deze post. */
    .vivi-ck-thread { display: flex; flex-direction: column; gap: .35rem; margin-top: .2rem; padding-top: .6rem; border-top: 1px solid var(--vivi-line); }
    .vivi-ck-thread__kop { font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--vivi-muted); }
    .vivi-ck-reactie {
        display: flex; flex-direction: column; gap: .15rem; padding: .45rem .65rem;
        border-radius: var(--vivi-radius-s); background: var(--vivi-cream-2); font-size: var(--vivi-tekst-s); line-height: 1.5; color: var(--vivi-ink);
    }
    .vivi-ck-reactie.is-klant { background: color-mix(in srgb, var(--vivi-gold) 14%, var(--vivi-cream)); }
    .vivi-ck-reactie__kop { display: flex; align-items: baseline; gap: .45rem; }
    .vivi-ck-reactie__kop .vivi-meta { white-space: nowrap; }
    .vivi-ck-reactie__tekst { white-space: pre-line; text-wrap: pretty; }
    .vivi-ck-auteur { font-weight: 700; flex: 0 0 auto; }

    /* Voet: de vraag en de knoppen. */
    .vivi-ck-voet { padding: var(--vivi-ruimte-s) var(--vivi-ruimte-m) var(--vivi-ruimte-m); border-top: 1px solid var(--vivi-line); }
    .vivi-ck-post.is-wacht .vivi-ck-voet { background: color-mix(in srgb, var(--vivi-gold) 8%, var(--vivi-cream)); }
    .vivi-ck-voet__vraag { display: block; margin-bottom: .55rem; font-family: var(--vivi-serif); font-size: var(--vivi-tekst-l); font-weight: 700; color: var(--vivi-ink); }
    .vivi-ck-acties { display: flex; gap: .5rem; flex-wrap: wrap; }
    .vivi-ck-klaar { margin: 0; }
    .vivi-ck-reactieveld { margin-top: .7rem; }
    .vivi-ck-reactieveld__acties { margin-top: var(--vivi-ruimte-s); }
    .vivi-ck-reactieveld textarea {
        width: 100%; font: inherit; font-size: var(--vivi-tekst-s); padding: .6rem .75rem; border-radius: var(--vivi-radius-m);
        border: 1px solid var(--vivi-line-strong);
        background: color-mix(in srgb, var(--vivi-cream) 40%, white); color: var(--vivi-ink); resize: vertical;
    }
    .vivi-ck-reactieveld textarea:focus { outline: none; border-color: var(--vivi-gold); box-shadow: var(--vivi-ring-focus); }

    /* Ingeklapte goedgekeurde regel in de daglijst: één rij, geen kop. */
    .vivi-ck-post.vivi-ck-post--rij { flex-direction: row; align-items: center; gap: .8rem; padding: .7rem var(--vivi-ruimte-m); }

    @media (max-width: 639.98px) {
        .vivi-ck-lijf { grid-template-columns: 1fr; }
        .vivi-ck-media { max-width: 320px; }
        .vivi-ck-kop__wanneer { margin-left: 0; width: 100%; }
        .vivi-ck-acties .vivi-btn { flex: 1; justify-content: center; }
    }

    /* Alle media van een post (30-09-2026, klantfeedback Fiori 08-09): de
       carrousel bladert onder het beeld, met de teller tussen de pijlen.
       Pijlen op tikmaat, zoals de maandnavigatie van de agenda. */
    .vivi-ck-media { display: flex; flex-direction: column; gap: var(--vivi-ruimte-2xs); min-width: 0; }
    .vivi-ck-beeld__nav { display: flex; align-items: center; justify-content: space-between; gap: var(--vivi-ruimte-2xs); }
    .vivi-ck-beeld__stap {
        display: inline-flex; align-items: center; justify-content: center; flex: none;
        min-width: var(--vivi-tik-min, 44px); min-height: var(--vivi-tik-min, 44px);
        padding: 0; border: 0; border-radius: var(--vivi-radius-rond);
        background: transparent; color: var(--vivi-ink); cursor: pointer;
    }
    .vivi-ck-beeld__stap:hover { background: var(--vivi-cream-2); }
    .vivi-ck-beeld__stap:focus-visible { outline: none; box-shadow: var(--vivi-ring-focus); }
    .vivi-ck-beeld__ico { width: 1.25rem; height: 1.25rem; }
    .vivi-ck-beeld__teller { font-size: var(--vivi-tekst-s); font-variant-numeric: tabular-nums; color: var(--vivi-ink); white-space: nowrap; }

    /* Maandnavigatie in de paginakop: één regel, maand links, pijlen rechts
       (moodboard M10). Geen vivi-btn: die krijgt op mobiel een volle
       breedte per knop, en dan werden het drie regels. */
    .vivi-maandnav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vivi-ruimte-2xs); }
    /* "Deze maand" en de pijlen blijven bij elkaar. Past de regel niet (op
       320 met "Deze maand" erbij: 316px op 288), dan zakt de groep als
       geheel naar een tweede regel, rechts uitgelijnd (H-089). */
    .vivi-maandnav__knoppen { display: flex; align-items: center; gap: var(--vivi-ruimte-2xs); margin-left: auto; }
    .vivi-maandnav__label {
        margin-right: var(--vivi-ruimte-s);
        font-family: var(--vivi-type-display, var(--vivi-serif)); font-size: var(--vivi-kop-s); font-weight: 400;
        color: var(--vivi-ink); white-space: nowrap;
    }
    .vivi-maandnav__stap,
    .vivi-maandnav__nu {
        display: inline-flex; align-items: center; justify-content: center; flex: none;
        min-height: var(--vivi-tik-min, 44px); padding: 0; border: 0; border-radius: var(--vivi-radius-rond);
        background: transparent; color: var(--vivi-ink); font-family: inherit; cursor: pointer;
    }
    .vivi-maandnav__stap { min-width: var(--vivi-tik-min, 44px); }
    .vivi-maandnav__nu { padding: 0 var(--vivi-ruimte-s); border-radius: var(--vivi-radius-pil); font-size: var(--vivi-tekst-s); font-weight: 500; }
    .vivi-maandnav__stap:hover,
    .vivi-maandnav__nu:hover { background: var(--vivi-cream-2); }
    .vivi-maandnav__stap:focus-visible,
    .vivi-maandnav__nu:focus-visible { outline: none; box-shadow: var(--vivi-ring-focus); }
    .vivi-maandnav__ico { width: 1.25rem; height: 1.25rem; }

    /* Een chip die een knop is (filter, weergave). Het hulpklasje
       cursor-pointer werkte niet: er is geen Tailwind-build. */
    .vivi-chip--knop { cursor: pointer; font-family: inherit; min-height: 1.75rem; }

    /* Ingeklapte regel in de daglijst: kop op één regel, afgekapt. */
    .vivi-ck-rij__kop { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .vivi-ck-rij__meta { display: block; }

    @media (max-width: 479.98px) {
        .vivi-maandnav { width: 100%; }
        .vivi-maandnav__label { margin-right: auto; font-size: var(--vivi-tekst-l); }
    }

    /* =========================================================
       Contentkalender: feedweergave, pijlers, concepten en het
       doorgeef-formulier (vivi-sf = social feed). 08-09-2026.
       ========================================================= */
    .vivi-sf-taak {
        display: flex; align-items: center; justify-content: space-between; gap: var(--vivi-ruimte-m);
        flex-wrap: wrap; padding: var(--vivi-ruimte-m) var(--vivi-ruimte-l);
    }
    .vivi-sf-taak--wacht { border-color: var(--vivi-gold); box-shadow: inset 4px 0 0 var(--vivi-gold); }
    .vivi-sf-taak__tekst { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
    .vivi-sf-taak__kop { font-family: var(--vivi-serif); font-size: var(--vivi-kop-s); font-weight: 700; color: var(--vivi-ink); }

    .vivi-sf { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--vivi-ruimte-l); align-items: start; }
    /* De open kaart blijft staan terwijl je door de feed scrolt. Is hij hoger
       dan het scherm, dan scrolt hij zelf, anders zou de vraag met de knoppen
       pas onderaan de hele feed in beeld komen. */
    .vivi-sf__detail {
        position: sticky; top: calc(var(--vivi-hoofdbalk-h, 4rem) + var(--vivi-ruimte-m));
        max-height: calc(100dvh - var(--vivi-hoofdbalk-h, 4rem) - 2 * var(--vivi-ruimte-m));
        overflow-y: auto; overscroll-behavior: contain;
    }
    .vivi-sf__detail .vivi-ck-post { margin-bottom: 0; }
    /* Schuift de open post in beeld (smal scherm), dan blijft hij onder de hoofdbalk. */
    .vivi-sf__open { scroll-margin-top: calc(var(--vivi-hoofdbalk-h, 4rem) + var(--vivi-ruimte-m)); }
    /* Tussen 1024 en 1280 is de kolom voor de open kaart ongeveer 250px:
       beeld naast tekst liet daar een tekstkolom van 70px over, één woord per
       regel. Dan staat het beeld boven de tekst en delen de knoppen de breedte. */
    @media (min-width: 1024px) and (max-width: 1279.98px) {
        .vivi-sf__detail .vivi-ck-lijf { grid-template-columns: minmax(0, 1fr); }
        .vivi-sf__detail .vivi-ck-media { max-width: 12rem; }
        .vivi-sf__detail .vivi-ck-acties .vivi-btn { flex: 1; justify-content: center; }
    }

    /* Tegels: beeld boven, een strook eronder met datum en status in woorden.
       De strook is de leesbare versie van de stip in de legenda. */
    /* Drie tegels per rij, tenzij een tegel dan smaller wordt dan de strook
       nodig heeft: dan twee. Gemeten op 08-10-2026 (H-089): "Goedgekeurd"
       vraagt 107,3px, op mobiel (kleinere letter) 95,8px. De min 1px houdt
       drie kolommen heel als de deling precies uitkomt. */
    .vivi-sf__grid {
        --vivi-sf-tegel-min: 6.75rem; --vivi-sf-gat: .5rem;
        display: grid; gap: var(--vivi-sf-gat);
        grid-template-columns: repeat(auto-fill, minmax(max(var(--vivi-sf-tegel-min), (100% - 2 * var(--vivi-sf-gat)) / 3 - 1px), 1fr));
    }
    .vivi-sf__tegel {
        position: relative; display: flex; flex-direction: column; width: 100%; overflow: hidden;
        border: 1px solid var(--vivi-line); padding: 0; margin: 0; cursor: pointer; text-align: left;
        border-radius: var(--vivi-radius-s); background: var(--vivi-cream);
        outline: 3px solid transparent; outline-offset: 2px;
        transition: outline-color .14s ease, border-color .14s ease;
    }
    .vivi-sf__tegel-beeld { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--vivi-cream-2); }
    .vivi-sf__tegel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: 1; }
    .vivi-sf__tegel-leeg {
        position: absolute; inset: 0; display: grid; place-items: center; padding: .5rem;
        font-size: var(--vivi-tekst-xs); line-height: 1.3; color: var(--vivi-muted); text-align: center;
    }
    .vivi-sf__tegel-type {
        position: absolute; right: .4rem; top: .4rem; z-index: 2;
        padding: .1rem .45rem; border-radius: var(--vivi-radius-pil);
        font-size: .62rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
        background: color-mix(in srgb, var(--vivi-cream) 88%, transparent); color: var(--vivi-ink);
    }
    .vivi-sf__tegel-pijler { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; z-index: 2; flex: none; }
    /* Video en carrousel op de tegel: een speelteken linksonder (weg van de
       terugvaltekst in het midden) en bij een carrousel rechtsboven een
       stapel met het aantal beelden, op de plek van het soortlabel. */
    .vivi-sf__tegel-speel {
        position: absolute; left: .4rem; bottom: .55rem; z-index: 2;
        display: grid; place-items: center; width: 1.6rem; height: 1.6rem;
        border-radius: var(--vivi-radius-rond);
        background: color-mix(in srgb, var(--vivi-ink) 70%, transparent); color: var(--vivi-cream);
    }
    .vivi-sf__tegel-speel-ico { width: .85rem; height: .85rem; margin-left: 2px; }
    .vivi-sf__tegel-teller {
        position: absolute; right: .4rem; top: .4rem; z-index: 2;
        display: inline-flex; align-items: center; gap: .2rem;
        padding: .1rem .45rem; border-radius: var(--vivi-radius-pil);
        font-size: .62rem; font-weight: 700; font-variant-numeric: tabular-nums;
        background: color-mix(in srgb, var(--vivi-cream) 88%, transparent); color: var(--vivi-ink);
    }
    .vivi-sf__tegel-teller-ico { width: .8rem; height: .8rem; flex: none; }
    .vivi-sf__tegel-voet {
        display: flex; flex-direction: column; gap: .1rem; padding: .4rem .55rem;
        background: var(--vivi-cream-2); border-top: 1px solid var(--vivi-line);
    }
    .vivi-sf__tegel-datum { font-size: .7rem; font-weight: 700; color: var(--vivi-ink); white-space: nowrap; }
    .vivi-sf__tegel-woord { display: flex; align-items: center; gap: .3rem; font-size: .66rem; color: var(--vivi-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .vivi-sf__tegel.is-wacht { border-color: var(--vivi-gold); }
    .vivi-sf__tegel.is-wacht .vivi-sf__tegel-voet { background: var(--vivi-gold); border-top-color: var(--vivi-gold); }
    .vivi-sf__tegel.is-wacht .vivi-sf__tegel-woord { color: var(--vivi-ink); font-weight: 600; }
    .vivi-sf__tegel.is-ok .vivi-sf__tegel-woord { color: var(--vivi-ok); font-weight: 600; }
    .vivi-sf__tegel.is-concept img, .vivi-sf__tegel.is-concept .vivi-sf__tegel-leeg { opacity: .55; }
    .vivi-sf__tegel.is-live img { filter: saturate(.85); }
    .vivi-sf__tegel:hover { border-color: var(--vivi-line-strong); }
    .vivi-sf__tegel.is-on { outline-color: var(--vivi-ink); }
    .vivi-sf__tegel:focus-visible { outline-color: var(--vivi-gold); }
    .vivi-sf__legenda { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin-top: var(--vivi-ruimte-s); }
    .vivi-sf__legenda span { display: inline-flex; align-items: center; gap: .35rem; }
    .vivi-sf__stip { display: inline-block; flex: none; width: .6rem; height: .6rem; border-radius: var(--vivi-radius-rond); background: var(--vivi-line-strong); }
    .vivi-sf__stip.is-wacht { background: var(--vivi-ink); }
    .vivi-sf__legenda .vivi-sf__stip.is-wacht { background: var(--vivi-gold); }
    .vivi-sf__stip.is-ok { background: var(--vivi-ok); }
    .vivi-sf__stip.is-concept { background: var(--vivi-line-strong); }
    .vivi-sf__stip.is-live { background: var(--vivi-ink); }

    .vivi-sf-basis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--vivi-ruimte-l); align-items: start; }
    .vivi-sf-pijlers__balk {
        display: flex; height: .6rem; overflow: hidden; border-radius: var(--vivi-radius-pil);
        background: var(--vivi-cream-2); gap: 2px;
    }
    .vivi-sf-pijlers { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
    .vivi-sf-pijlers__rij { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--vivi-ruimte-s); min-width: 0; }
    .vivi-sf-concepten { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
    .vivi-sf-concept {
        display: flex; flex-direction: column; gap: .25rem; align-items: flex-start;
        padding: .7rem .85rem; border-radius: var(--vivi-radius-m); background: var(--vivi-cream-2);
    }
    .vivi-sf-concept__naam { font-size: var(--vivi-tekst-l); font-weight: 700; color: var(--vivi-ink); }
    .vivi-sf-concept__uitleg { font-size: var(--vivi-tekst-s); line-height: 1.5; color: var(--vivi-ink); text-wrap: pretty; }

    .vivi-sf-input { display: flex; flex-direction: column; gap: var(--vivi-ruimte-s); }
    /* align-items: end houdt de invoervelden op één lijn, ook als een label
       met zijn toelichting op twee regels valt. */
    .vivi-sf-input__velden { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--vivi-ruimte-s); align-items: end; }
    .vivi-sf-input__hint { margin: 0; text-wrap: pretty; }
    .vivi-sf-input__veld { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
    .vivi-sf-input__label { font-size: var(--vivi-tekst-s); font-weight: 600; color: var(--vivi-ink); }
    .vivi-sf-input__label .vivi-meta { white-space: nowrap; }
    .vivi-sf-input .vivi-select { width: 100%; }
    .vivi-sf-input textarea {
        width: 100%; font: inherit; font-size: var(--vivi-tekst-s); padding: .6rem .75rem;
        border-radius: var(--vivi-radius-m); border: 1px solid var(--vivi-line-strong);
        background: color-mix(in srgb, var(--vivi-cream) 40%, white); color: var(--vivi-ink); resize: vertical;
    }
    .vivi-sf-input textarea:focus { outline: none; border-color: var(--vivi-gold); box-shadow: var(--vivi-ring-focus); }

    /* Wat de klant al doorgaf: een lijst met per rij een gekleurde rand
       (nieuw, opgepakt, verwerkt) en ons antwoord als eigen blok. */
    .vivi-sf-inputs__titel {
        margin: var(--vivi-ruimte-l) 0 var(--vivi-ruimte-s); font-size: .72rem; font-weight: 700;
        letter-spacing: .08em; text-transform: uppercase; color: var(--vivi-muted);
    }
    .vivi-sf-inputs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
    .vivi-sf-inputs__rij {
        display: flex; flex-direction: column; gap: .4rem;
        padding: .75rem .9rem; border-radius: var(--vivi-radius-m); border: 1px solid var(--vivi-line);
        box-shadow: inset 4px 0 0 var(--vivi-line-strong);
    }
    .vivi-sf-inputs__rij.is-nieuw { box-shadow: inset 4px 0 0 var(--vivi-info); }
    .vivi-sf-inputs__rij.is-opgepakt { box-shadow: inset 4px 0 0 var(--vivi-gold); }
    .vivi-sf-inputs__rij.is-verwerkt { box-shadow: inset 4px 0 0 var(--vivi-ok); }
    .vivi-sf-inputs__kop { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
    .vivi-sf-inputs__kop .vivi-pill { margin-left: auto; }
    /* Een lange soort ("Shootdag: wij komen filmen of fotograferen") breekt
       in de chip in plaats van uit de kaart te steken (H-089, 39px op 320). */
    .vivi-sf-inputs__kop .vivi-chip { flex: 0 1 auto; min-width: 0; max-width: 100%; text-wrap: balance; }
    .vivi-sf-inputs__datum { font-size: var(--vivi-tekst-s); font-weight: 600; color: var(--vivi-ink); }
    .vivi-sf-inputs__tekst { margin: 0; font-size: var(--vivi-tekst-s); line-height: 1.55; color: var(--vivi-ink); white-space: pre-line; text-wrap: pretty; }
    .vivi-sf-inputs__reactie {
        display: flex; flex-direction: column; gap: .15rem; margin: 0; padding: .5rem .7rem; border-radius: var(--vivi-radius-s);
        background: var(--vivi-cream-2); font-size: var(--vivi-tekst-s); line-height: 1.5; color: var(--vivi-ink); white-space: pre-line;
    }
    .vivi-sf-inputs__reactie-kop { font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--vivi-muted); }

    @media (max-width: 1023.98px) {
        .vivi-sf { grid-template-columns: 1fr; }
        .vivi-sf__detail { position: static; max-height: none; overflow-y: visible; }
    }
    @media (max-width: 639.98px) {
        .vivi-sf-taak { flex-direction: column; align-items: stretch; }
        .vivi-sf-taak .vivi-btn--primary { justify-content: center; }
        .vivi-sf-basis { grid-template-columns: minmax(0, 1fr); }
        .vivi-sf-input__velden { grid-template-columns: 1fr; }
        .vivi-sf__grid { --vivi-sf-tegel-min: 6.1rem; --vivi-sf-gat: .35rem; }
        .vivi-sf__tegel-voet { padding: .3rem .4rem; }
        .vivi-sf__tegel-datum { font-size: .64rem; }
        .vivi-sf__tegel-woord { font-size: .6rem; white-space: normal; line-height: 1.2; }
    }


    /* =========================================================
       Social-werkbak (team en admin): per klant te bewerken, wacht op
       klant, input van de klant (vivi-swb). Elke kaart is een werkorder:
       kop met urgentie, lijf met beeld en vraag, voet met de knop.
       S26, herontworpen 08-09-2026.
       ========================================================= */
    .vivi-swb { display: flex; flex-direction: column; gap: var(--vivi-ruimte-l); }
    .vivi-swb__cijfers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--vivi-ruimte-s); }
    .vivi-swb__cijfer { display: flex; flex-direction: column; gap: .15rem; padding: var(--vivi-ruimte-m) var(--vivi-ruimte-l); }
    .vivi-swb__cijfer.is-werk { border-color: var(--vivi-gold); box-shadow: inset 4px 0 0 var(--vivi-gold); }
    .vivi-swb__cijfer.is-laat { border-color: var(--vivi-fout); box-shadow: inset 4px 0 0 var(--vivi-fout); }
    .vivi-swb__getal { font-family: var(--vivi-serif); font-size: var(--vivi-kop-l); font-weight: 700; line-height: 1; color: var(--vivi-ink); }
    .vivi-swb__getal-bij { font-size: var(--vivi-tekst-s); color: var(--vivi-muted); }
    .vivi-swb__klant.is-stil { opacity: .6; }
    .vivi-swb__onbereikbaar { margin: 0 0 var(--vivi-ruimte-s); }
    .vivi-swb__kolommen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--vivi-ruimte-m); align-items: start; }
    .vivi-swb__kolom { display: flex; flex-direction: column; gap: .6rem; min-width: 0; }
    .vivi-swb__kolomkop {
        display: flex; align-items: center; gap: .4rem; margin: 0;
        font-size: var(--vivi-tekst-s); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--vivi-muted);
    }
    .vivi-swb__kolomuitleg { margin: -.3rem 0 .1rem; font-size: var(--vivi-tekst-xs); line-height: 1.45; color: var(--vivi-muted); }
    .vivi-swb__leeg {
        margin: 0; padding: .8rem; border-radius: var(--vivi-radius-m); border: 1px dashed var(--vivi-line-strong);
        font-size: var(--vivi-tekst-s); color: var(--vivi-muted); text-align: center;
    }

    /* Postkaart in de kolommen te bewerken en wacht op klant. */
    .vivi-swb__post {
        display: flex; flex-direction: column; overflow: hidden;
        border-radius: var(--vivi-radius-m); border: 1px solid var(--vivi-line); background: var(--vivi-cream);
    }
    .vivi-swb__post.is-bewerken { border-color: var(--vivi-gold); }
    .vivi-swb__post-kop {
        display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap;
        padding: .5rem .7rem; background: var(--vivi-cream-2); border-bottom: 1px solid var(--vivi-line);
    }
    .vivi-swb__post.is-bewerken .vivi-swb__post-kop { box-shadow: inset 4px 0 0 var(--vivi-gold); }
    .vivi-swb__gepland { font-size: var(--vivi-tekst-xs); font-weight: 600; color: var(--vivi-muted); white-space: nowrap; margin-left: auto; }
    .vivi-swb__post-lijf { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: .7rem; padding: .7rem; align-items: start; }
    .vivi-swb__beeld { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--vivi-radius-xs); background: var(--vivi-cream-2); border: 1px solid var(--vivi-line); }
    .vivi-swb__beeld img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
    .vivi-swb__post-lijf:has(.vivi-swb__beeld--klein) { grid-template-columns: 4rem minmax(0, 1fr); }
    .vivi-swb__inhoud { display: flex; flex-direction: column; gap: .45rem; min-width: 0; }
    .vivi-swb__tekst { margin: 0; font-size: var(--vivi-tekst-s); font-weight: 600; line-height: 1.4; color: var(--vivi-ink); }
    .vivi-swb__vraag {
        margin: 0; padding: .5rem .65rem; border-radius: var(--vivi-radius-s);
        background: color-mix(in srgb, var(--vivi-gold) 14%, var(--vivi-cream)); border-left: 3px solid var(--vivi-gold);
        font-size: var(--vivi-tekst-s); line-height: 1.5; color: var(--vivi-ink); white-space: pre-line;
    }
    .vivi-swb__vraag .vivi-ck-auteur { display: block; font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--vivi-muted); }
    .vivi-swb__post-voet {
        display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap;
        padding: .5rem .7rem; border-top: 1px solid var(--vivi-line);
    }
    .vivi-swb__laat { color: var(--vivi-fout); font-weight: 600; }

    /* Inputkaart: wat de klant doorgaf, ons antwoord, en de afhandeling. */
    .vivi-swb__input {
        display: flex; flex-direction: column; gap: .4rem;
        padding: .7rem .85rem; border-radius: var(--vivi-radius-m); border: 1px solid var(--vivi-line); background: var(--vivi-cream);
        box-shadow: inset 4px 0 0 var(--vivi-line-strong);
    }
    .vivi-swb__input.is-nieuw { box-shadow: inset 4px 0 0 var(--vivi-info); }
    .vivi-swb__input.is-opgepakt { box-shadow: inset 4px 0 0 var(--vivi-gold); }
    .vivi-swb__input.is-verwerkt { box-shadow: inset 4px 0 0 var(--vivi-ok); opacity: .75; }
    .vivi-swb__input-kop { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
    .vivi-swb__input-kop .vivi-pill { margin-left: auto; }
    .vivi-swb__input-kop .vivi-swb__gepland { margin-left: 0; }
    .vivi-swb__inputtekst { margin: 0; font-size: var(--vivi-tekst-s); line-height: 1.55; color: var(--vivi-ink); white-space: pre-line; }
    .vivi-swb__antwoord {
        display: flex; flex-direction: column; gap: .15rem; padding: .5rem .7rem; border-radius: var(--vivi-radius-s);
        background: var(--vivi-cream-2); font-size: var(--vivi-tekst-s); line-height: 1.5; color: var(--vivi-ink); white-space: pre-line;
    }
    .vivi-swb__antwoord-kop { font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--vivi-muted); }
    .vivi-swb__input-voet { display: flex; flex-direction: column; gap: .4rem; margin-top: .2rem; padding-top: .5rem; border-top: 1px solid var(--vivi-line); }
    .vivi-swb__input [x-cloak] { display: none !important; }
    .vivi-swb__acties { display: flex; flex-direction: column; gap: .4rem; }
    .vivi-swb__acties textarea {
        width: 100%; font: inherit; font-size: var(--vivi-tekst-s); padding: .5rem .65rem;
        border-radius: var(--vivi-radius-s); border: 1px solid var(--vivi-line-strong);
        background: color-mix(in srgb, var(--vivi-cream) 40%, white); color: var(--vivi-ink); resize: vertical;
    }
    .vivi-swb__acties textarea:focus { outline: none; border-color: var(--vivi-gold); box-shadow: var(--vivi-ring-focus); }

    /* Weergavewissel en klantfilter op één balk. */
    .vivi-swb__balk { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--vivi-ruimte-s); }
    .vivi-swb__koppeling { max-width: 22rem; white-space: normal; text-align: left; }

    /* Planningstrook: shootdagen en periodes die klanten zelf doorgaven. */
    .vivi-swb__planning-lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
    .vivi-swb__planning-item {
        display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--vivi-ruimte-s); align-items: start;
        padding: .6rem .8rem; border-radius: var(--vivi-radius-m); border: 1px solid var(--vivi-line); background: var(--vivi-cream);
        border-left-width: 4px;
    }
    .vivi-swb__planning-item.is-shootdag { border-left-color: var(--vivi-gold); }
    .vivi-swb__planning-item.is-periode { border-left-color: var(--vivi-info); }
    .vivi-swb__planning-item.is-evenement { border-left-color: var(--vivi-ok); }
    .vivi-swb__planning-datum { display: flex; flex-direction: column; font-size: var(--vivi-tekst-s); color: var(--vivi-ink); }
    .vivi-swb__planning-lijf { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
    .vivi-swb__planning-tekst { font-size: var(--vivi-tekst-s); line-height: 1.45; color: var(--vivi-ink); }

    /* Bezetting: per teamlid een kaartje met het aantal open posts. */
    .vivi-swb__bezetting-lijst { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: var(--vivi-ruimte-s); }
    .vivi-swb__lid { display: flex; flex-direction: column; gap: .1rem; padding: var(--vivi-ruimte-s) var(--vivi-ruimte-m); }
    .vivi-swb__lid.is-laat { border-color: var(--vivi-fout); box-shadow: inset 4px 0 0 var(--vivi-fout); }
    .vivi-swb__lid.is-zonder.is-werk { border-color: var(--vivi-gold); box-shadow: inset 4px 0 0 var(--vivi-gold); }
    .vivi-swb__lid-naam { font-size: var(--vivi-tekst-s); font-weight: 600; color: var(--vivi-ink); }
    .vivi-swb__lid-getal { font-family: var(--vivi-serif); font-size: var(--vivi-kop-m); font-weight: 700; line-height: 1.1; color: var(--vivi-ink); }

    /* Productiepipeline: een kolom per fase, horizontaal scrollbaar als het niet past. */
    .vivi-swb__pipeline {
        display: grid; grid-auto-flow: column; grid-auto-columns: minmax(15rem, 1fr); gap: var(--vivi-ruimte-s);
        align-items: start; overflow-x: auto; padding-bottom: .4rem;
    }
    .vivi-swb__fase { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
    .vivi-swb__fase.is-approved .vivi-swb__pipe-kaart { opacity: .7; }
    .vivi-swb__pipe-kaart {
        display: flex; flex-direction: column; gap: .5rem; padding: .6rem .7rem;
        border-radius: var(--vivi-radius-m); border: 1px solid var(--vivi-line); background: var(--vivi-cream);
    }
    .vivi-swb__pipe-kaart.is-laat { border-color: var(--vivi-fout); box-shadow: inset 4px 0 0 var(--vivi-fout); }
    .vivi-swb__pipe-kop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .3rem; }
    .vivi-swb__pipe-klant { font-size: var(--vivi-tekst-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--vivi-muted); }
    .vivi-swb__pipe-voet { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
    .vivi-swb__pipe-veld { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
    .vivi-swb__pipe-veld .vivi-select { width: 100%; font-size: var(--vivi-tekst-xs); padding: .35rem .5rem; }

    @media (max-width: 1023.98px) {
        .vivi-swb__kolommen { grid-template-columns: 1fr; }
        .vivi-swb__cijfers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .vivi-swb__pipeline { grid-auto-columns: minmax(16rem, 1fr); }
    }
    @media (max-width: 639.98px) {
        .vivi-swb__cijfers { grid-template-columns: 1fr; }
        .vivi-swb__post-voet .vivi-btn { width: 100%; justify-content: center; }
        .vivi-swb__balk { flex-direction: column; align-items: stretch; }
        .vivi-swb__planning-item { grid-template-columns: 1fr; }
        .vivi-swb__bezetting-lijst { grid-template-columns: 1fr; }
    }

    /* =========================================================
       Social-ontwikkelpijplijn aan de teamkant (vivi-pbh): het
       pijlerbord (kolom per pijler, reeksen, afleveringen) en de
       storyboard-editor (framestrip, stap, conceptpoort). De lege
       vivi-pbh__frame-dekking is de plek voor het dekkingslabel uit
       de beeldbank-PR. 23-10-2026.
       ========================================================= */
    .vivi-pbh { display: flex; flex-direction: column; gap: var(--vivi-ruimte-l); min-width: 0; }
    .vivi-pbh__kop { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--vivi-ruimte-l); }
    .vivi-pbh__kop-links { display: flex; flex-direction: column; gap: var(--vivi-ruimte-s); min-width: 0; flex: 1 1 auto; }
    .vivi-pbh__intro { margin: 0; max-width: 46rem; }
    .vivi-pbh__signalen { display: grid; grid-template-columns: repeat(2, minmax(11rem, 1fr)); gap: var(--vivi-ruimte-m); flex: 0 0 auto; }
    .vivi-pbh__signaal { display: flex; flex-direction: column; gap: .15rem; padding: var(--vivi-ruimte-m) var(--vivi-ruimte-l); }
    .vivi-pbh__signaal.is-werk { border-color: var(--vivi-gold); box-shadow: inset 0 0 0 1px var(--vivi-gold); }
    .vivi-pbh__signaal.is-laat { border-color: var(--vivi-fout); box-shadow: inset 0 0 0 1px var(--vivi-fout); }
    .vivi-pbh__signaal.is-laat .vivi-pbh__getal { color: var(--vivi-fout); }
    .vivi-pbh__getal { font-family: var(--vivi-serif); font-size: var(--vivi-kop-l); font-weight: 700; line-height: 1.1; color: var(--vivi-ink); }
    .vivi-pbh__getal-bij { font-size: var(--vivi-tekst-xs); color: var(--vivi-muted); }
    .vivi-pbh__laat { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
    .vivi-pbh__laat li { display: flex; flex-wrap: wrap; gap: .25rem var(--vivi-ruimte-m); align-items: baseline; }
    .vivi-pbh__laat-link { color: var(--vivi-fout); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }

    .vivi-pbh__bord { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(17rem, 1fr); gap: var(--vivi-ruimte-m); overflow-x: auto; padding-bottom: var(--vivi-ruimte-s); align-items: start; }
    .vivi-pbh__kolom { display: flex; flex-direction: column; gap: var(--vivi-ruimte-m); padding: var(--vivi-ruimte-m); min-width: 0; }
    .vivi-pbh__kolom-kop { display: flex; flex-direction: column; gap: .4rem; padding-bottom: var(--vivi-ruimte-s); border-bottom: 1px solid var(--vivi-line); }
    .vivi-pbh__kolom-kop .vivi-pill { align-self: flex-start; }
    .vivi-pbh__kolom-titel { margin: 0; display: flex; align-items: center; gap: .5rem; font-family: var(--vivi-serif); font-size: 1.15rem; font-weight: 700; color: var(--vivi-ink); overflow-wrap: anywhere; }
    .vivi-pbh__reeks { display: flex; flex-direction: column; gap: .4rem; }
    .vivi-pbh__reeks-titel { margin: 0; font-size: var(--vivi-tekst-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--vivi-muted); }
    .vivi-pbh__afleveringen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
    .vivi-pbh__aflevering { display: flex; flex-direction: column; gap: .35rem; padding: .6rem .75rem; border: 1px solid var(--vivi-line); border-radius: var(--vivi-radius-m); background: var(--vivi-cream-2); color: var(--vivi-ink); text-decoration: none; }
    .vivi-pbh__aflevering:hover, .vivi-pbh__aflevering:focus-visible { border-color: var(--vivi-gold); }
    .vivi-pbh__afl-titel { font-weight: 600; overflow-wrap: anywhere; }
    .vivi-pbh__afl-voet { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; }
    .vivi-pbh__leeg { margin: 0; }

    .vivi-pbh__editkop { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--vivi-ruimte-m); }
    .vivi-pbh__editkop-links { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
    .vivi-pbh__duur { font-size: var(--vivi-tekst-s); color: var(--vivi-muted); }
    .vivi-pbh__duur.is-buiten { color: var(--vivi-fout); font-weight: 600; }
    .vivi-pbh__brief, .vivi-pbh__verzoek { display: flex; flex-direction: column; gap: .4rem; padding: var(--vivi-ruimte-m) var(--vivi-ruimte-l); }
    .vivi-pbh__brief p { margin: 0; }
    .vivi-pbh__verzoek { border-color: var(--vivi-gold); box-shadow: inset 0 0 0 1px var(--vivi-gold); }
    .vivi-pbh__verzoek-tekst { margin: 0; white-space: pre-line; }
    .vivi-pbh__slot { margin: 0; padding: .6rem var(--vivi-ruimte-m); border-radius: var(--vivi-radius-m); background: var(--vivi-fout-vlak); color: var(--vivi-ink); font-size: var(--vivi-tekst-s); }

    .vivi-pbh__strip { list-style: none; margin: 0; padding: 0 0 var(--vivi-ruimte-s); display: grid; grid-auto-flow: column; grid-auto-columns: minmax(15rem, 17rem); gap: var(--vivi-ruimte-m); overflow-x: auto; align-items: stretch; }
    .vivi-pbh__frame { display: flex; flex-direction: column; gap: .5rem; padding: var(--vivi-ruimte-m); min-width: 0; }
    .vivi-pbh__frame.is-open { border-color: var(--vivi-gold); box-shadow: inset 0 0 0 1px var(--vivi-gold); }
    .vivi-pbh__frame-kop { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
    .vivi-pbh__frame-nr { font-family: var(--vivi-serif); font-weight: 700; font-size: 1.05rem; color: var(--vivi-ink); }
    .vivi-pbh__frame-dekking:empty { display: none; }
    .vivi-pbh__frame-tekst { margin: 0; overflow-wrap: anywhere; }
    .vivi-pbh__frame-velden { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem .75rem; font-size: var(--vivi-tekst-xs); }
    .vivi-pbh__frame-velden div { display: flex; flex-direction: column; min-width: 0; }
    .vivi-pbh__frame-velden dt { color: var(--vivi-muted); font-weight: 600; }
    .vivi-pbh__frame-velden dd { margin: 0; color: var(--vivi-ink); overflow-wrap: anywhere; }
    .vivi-pbh__frame-velden .is-leeg dd { color: var(--vivi-muted); font-style: italic; }
    .vivi-pbh__frame-voet { margin-top: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem; }
    .vivi-pbh__frame-voet .vivi-btn { justify-content: center; width: 100%; }
    .vivi-pbh__weg { color: var(--vivi-fout); }

    .vivi-pbh__form { display: flex; flex-direction: column; gap: var(--vivi-ruimte-m); padding: var(--vivi-ruimte-l); margin-top: var(--vivi-ruimte-m); }
    .vivi-pbh__form-titel { margin: 0; font-family: var(--vivi-serif); font-size: 1.1rem; font-weight: 700; color: var(--vivi-ink); }
    .vivi-pbh__velden { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--vivi-ruimte-m); align-items: start; }
    .vivi-pbh__velden--twee { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vivi-pbh__veld { display: flex; flex-direction: column; gap: .3rem; min-width: 0; font-size: var(--vivi-tekst-s); }
    .vivi-pbh__veld > span:first-child { font-weight: 600; color: var(--vivi-ink); }
    .vivi-pbh__veld--breed { grid-column: 1 / -1; }
    .vivi-pbh__veld .vivi-input, .vivi-pbh__veld .vivi-select { width: 100%; }
    .vivi-pbh__veld > .vivi-btn { align-self: flex-start; }
    .vivi-pbh__textarea { width: 100%; padding: .55rem .75rem; border: 1px solid var(--vivi-line-strong); border-radius: var(--vivi-radius-m); background: var(--vivi-cream-2); color: var(--vivi-ink); font: inherit; resize: vertical; }
    .vivi-pbh__textarea:focus { outline: 2px solid var(--vivi-gold); outline-offset: 1px; }
    .vivi-pbh__fout { color: var(--vivi-fout); font-size: var(--vivi-tekst-xs); }

    .vivi-pbh__stappen { display: flex; flex-wrap: wrap; gap: var(--vivi-ruimte-l); }
    .vivi-pbh__stap { display: flex; flex-direction: column; gap: .4rem; min-width: 0; flex: 1 1 18rem; }
    .vivi-pbh__stap .vivi-btn { align-self: flex-start; }
    .vivi-pbh__redenen { margin: 0; padding-left: 1.1rem; list-style: disc; color: var(--vivi-fout); font-size: var(--vivi-tekst-s); display: flex; flex-direction: column; gap: .2rem; }
    .vivi-pbh__citaat { margin: var(--vivi-ruimte-m) 0 0; padding: .6rem var(--vivi-ruimte-m); border-left: 3px solid var(--vivi-gold); background: var(--vivi-cream-2); }
    .vivi-pbh__citaat p { margin: .25rem 0 0; font-style: italic; }
    .vivi-pbh__poort .vivi-pbh__velden + .vivi-pbh__velden { margin-top: var(--vivi-ruimte-l); padding-top: var(--vivi-ruimte-l); border-top: 1px solid var(--vivi-line); }
    /* Oplevering: lange Drive-paden breken op elk teken, nooit horizontaal scrollen. */
    .vivi-pbh__oplevering-lijst { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .3rem var(--vivi-ruimte-m); font-size: var(--vivi-tekst-s); }
    .vivi-pbh__oplevering-lijst dt { color: var(--vivi-muted); }
    .vivi-pbh__oplevering-lijst dd { margin: 0; overflow-wrap: anywhere; }

    @media (max-width: 1023.98px) {
        .vivi-pbh__kop { flex-direction: column; align-items: stretch; }
        .vivi-pbh__velden { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 639.98px) {
        .vivi-pbh__signalen { grid-template-columns: 1fr; }
        .vivi-pbh__bord { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: 1fr; overflow-x: visible; }
        .vivi-pbh__editkop { flex-direction: column; align-items: stretch; }
        .vivi-pbh__editkop > .vivi-btn { justify-content: center; }
        .vivi-pbh__strip { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: 1fr; overflow-x: visible; }
        .vivi-pbh__velden { grid-template-columns: 1fr; }
        .vivi-pbh__stap .vivi-btn, .vivi-pbh__form .vivi-btn, .vivi-pbh__poort .vivi-btn { align-self: stretch; width: 100%; justify-content: center; }
    }

    /* =========================================================
       Eigen social-posts aan de teamkant (vivi-stp): per klant de
       statusketen, per stap een lijst posts met rechts de ene
       handeling (voorleggen of inplannen). Los van de social-tool.
       08-10-2026.
       ========================================================= */
    .vivi-stp { display: flex; flex-direction: column; gap: var(--vivi-ruimte-l); }
    .vivi-stp__intro { margin: 0; max-width: 46rem; line-height: 1.5; }
    .vivi-stp__balk { display: flex; flex-direction: column; gap: var(--vivi-ruimte-s); }
    .vivi-stp__stappen { display: flex; flex-direction: column; gap: var(--vivi-ruimte-m); }
    .vivi-stp__stap { display: flex; flex-direction: column; gap: var(--vivi-ruimte-xs); min-width: 0; }
    .vivi-stp__stapkop {
        display: flex; align-items: center; gap: var(--vivi-ruimte-2xs); margin: 0;
        font-size: var(--vivi-tekst-s); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--vivi-muted);
    }
    .vivi-stp__stapuitleg { margin: 0 0 var(--vivi-ruimte-2xs); font-size: var(--vivi-tekst-xs); line-height: 1.45; color: var(--vivi-muted); }
    .vivi-stp__leeg {
        margin: 0; padding: var(--vivi-ruimte-s); border-radius: var(--vivi-radius-m); border: 1px dashed var(--vivi-line-strong);
        font-size: var(--vivi-tekst-s); color: var(--vivi-muted); text-align: center;
    }
    .vivi-stp__lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--vivi-ruimte-xs); }
    .vivi-stp__post {
        display: grid; grid-template-columns: 4rem minmax(0, 1fr) minmax(0, 17rem); gap: var(--vivi-ruimte-s); align-items: start;
        padding: var(--vivi-ruimte-s); border-radius: var(--vivi-radius-m); border: 1px solid var(--vivi-line); background: var(--vivi-cream);
    }
    .vivi-stp__stap.is-goedgekeurd .vivi-stp__post { border-color: var(--vivi-gold); box-shadow: inset 4px 0 0 var(--vivi-gold); }
    .vivi-stp__stap.is-mislukt .vivi-stp__post { border-color: var(--vivi-fout); box-shadow: inset 4px 0 0 var(--vivi-fout); }
    .vivi-stp__stap.is-gepubliceerd .vivi-stp__post { opacity: .8; }
    .vivi-stp__beeld {
        position: relative; aspect-ratio: 4 / 5; overflow: hidden;
        border-radius: var(--vivi-radius-xs); border: 1px solid var(--vivi-line); background: var(--vivi-cream-2);
    }
    .vivi-stp__beeld img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
    .vivi-stp__inhoud { display: flex; flex-direction: column; gap: var(--vivi-ruimte-xs); min-width: 0; }
    .vivi-stp__titel { margin: 0; font-size: var(--vivi-tekst-s); font-weight: 600; line-height: 1.4; color: var(--vivi-ink); overflow-wrap: anywhere; }
    .vivi-stp__vraag {
        margin: 0; padding: var(--vivi-ruimte-xs) var(--vivi-ruimte-s); border-radius: var(--vivi-radius-s);
        background: color-mix(in srgb, var(--vivi-gold) 14%, var(--vivi-cream)); border-left: 3px solid var(--vivi-gold);
        font-size: var(--vivi-tekst-s); line-height: 1.5; color: var(--vivi-ink); white-space: pre-line; overflow-wrap: anywhere;
    }
    .vivi-stp__vraag-kop { display: block; font-size: var(--vivi-tekst-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--vivi-muted); }
    .vivi-stp__voorstel {
        display: flex; flex-direction: column; gap: var(--vivi-ruimte-2xs);
        padding: var(--vivi-ruimte-xs) var(--vivi-ruimte-s); border-radius: var(--vivi-radius-s);
        background: var(--vivi-cream); border-left: 3px solid var(--vivi-ink);
    }
    .vivi-stp__voorstel p { margin: 0; font-size: var(--vivi-tekst-s); line-height: 1.5; color: var(--vivi-ink); overflow-wrap: break-word; hyphens: auto; }
    .vivi-stp__fout { margin: 0; font-size: var(--vivi-tekst-s); line-height: 1.45; color: var(--vivi-fout); overflow-wrap: anywhere; }
    .vivi-stp__actie { display: flex; flex-direction: column; align-items: stretch; gap: var(--vivi-ruimte-xs); min-width: 0; }
    .vivi-stp__actie .vivi-btn { justify-content: center; }
    .vivi-stp__veld { display: flex; flex-direction: column; gap: var(--vivi-ruimte-2xs); min-width: 0; }
    .vivi-stp__moment { width: 100%; min-width: 0; font-size: var(--vivi-tekst-s); }

    @media (max-width: 1023.98px) {
        .vivi-stp__post { grid-template-columns: 4rem minmax(0, 1fr); }
        .vivi-stp__actie { grid-column: 1 / -1; }
    }
    @media (max-width: 639.98px) {
        .vivi-stp__post { grid-template-columns: 3rem minmax(0, 1fr); }
    }

    /* =========================================================
       Planning per week en per kanaal (vivi-stw), de tweede
       weergave van de eigen social-posts. Per week een rij, per
       kanaal een kolom; op een telefoon onder elkaar. 26-10-2026.
       ========================================================= */
    .vivi-stw { display: flex; flex-direction: column; gap: var(--vivi-ruimte-l); }
    .vivi-stw__week { display: flex; flex-direction: column; gap: var(--vivi-ruimte-s); min-width: 0; }
    .vivi-stw__weekkop {
        display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--vivi-ruimte-xs); margin: 0;
        padding-bottom: var(--vivi-ruimte-2xs); border-bottom: 1px solid var(--vivi-line);
        font-size: var(--vivi-tekst-m); font-weight: 700; color: var(--vivi-ink);
    }
    .vivi-stw__kanalen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: var(--vivi-ruimte-m); }
    .vivi-stw__kanaal { display: flex; flex-direction: column; gap: var(--vivi-ruimte-xs); min-width: 0; }
    .vivi-stw__post {
        display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: var(--vivi-ruimte-s); align-items: start;
        padding: var(--vivi-ruimte-s); border-radius: var(--vivi-radius-m); border: 1px solid var(--vivi-line); background: var(--vivi-cream);
    }
    .vivi-stw__post.is-concept { border-style: dashed; }
    .vivi-stw__post.is-goedgekeurd { border-color: var(--vivi-gold); box-shadow: inset 4px 0 0 var(--vivi-gold); }
    .vivi-stw__post.is-mislukt { border-color: var(--vivi-fout); box-shadow: inset 4px 0 0 var(--vivi-fout); }
    .vivi-stw__beeld {
        position: relative; aspect-ratio: 4 / 5; overflow: hidden; display: flex; align-items: center; justify-content: center;
        border-radius: var(--vivi-radius-xs); border: 1px solid var(--vivi-line); background: var(--vivi-cream-2);
    }
    .vivi-stw__beeld.is-staand { aspect-ratio: 9 / 16; }
    .vivi-stw__beeld img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
    .vivi-stw__volgt { padding: var(--vivi-ruimte-2xs); font-size: var(--vivi-tekst-xs); line-height: 1.3; text-align: center; color: var(--vivi-muted); }
    .vivi-stw__code { font-variant-numeric: tabular-nums; color: var(--vivi-muted); }
    .vivi-stw__bijschrift summary { cursor: pointer; font-size: var(--vivi-tekst-s); color: var(--vivi-ink); }
    .vivi-stw__bijschrift p {
        margin: var(--vivi-ruimte-2xs) 0 0; font-size: var(--vivi-tekst-s); line-height: 1.5; color: var(--vivi-ink);
        white-space: pre-line; overflow-wrap: anywhere;
    }
    .vivi-stw__knop { align-self: flex-start; }

    @media (max-width: 639.98px) {
        .vivi-stw__post { grid-template-columns: 4rem minmax(0, 1fr); }
        .vivi-stw__knop { align-self: stretch; justify-content: center; }
    }

    /* =========================================================
       Social op het klantdashboard en de admin-aandachtstrip.
       Klein en rustig: het zijn regels tussen de andere te-keuren-
       regels, dus dezelfde maat als .vivi-regel/.vivi-meta.
       ========================================================= */
    .vivi-dash-social__kop {
        font-size: var(--vivi-tekst-s);
        font-weight: 600;
        color: var(--vivi-ink);
        line-height: 1.3;
    }
    .vivi-dash-social__tekst {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    /* De aandachtlinks in de admin-mini: stond als inline stijl per link. */
    .vivi-aandacht__rij {
        font-size: var(--vivi-tekst-s);
        color: var(--vivi-ink);
        padding: .12rem 0;
    }

    /* =========================================================
       Social-analytics: zelfde bord als /social/<slug>/analytics
       ========================================================= */
    .vivi-seg {
        display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px;
        background: rgba(43, 36, 25, .05); border: 1px solid var(--vivi-line);
    }
    .vivi-seg__item {
        border: 0; background: transparent; cursor: pointer;
        padding: .3rem .8rem; border-radius: 999px;
        font: inherit; font-size: .78rem; font-weight: 600; color: var(--vivi-muted);
        transition: background .14s ease, color .14s ease;
    }
    .vivi-seg__item:hover { color: var(--vivi-ink); }
    .vivi-seg__item.is-on { background: var(--vivi-gold); color: var(--vivi-ink); }

    /* Het bord zelf, herzien in de ontwerpronde van 30-09-2026 (pins M8 en
       M10): grote cijfers in gewicht 400 met kleine labels, één donker vlak
       (de netto volgersgroei, via .vivi-card--dark), één breed veld met een
       smalle kolom ernaast, en de hoofdactie rechtsonder. Alleen tokens. */
    .vivi-social-balk {
        display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
        gap: var(--vivi-ruimte-s) var(--vivi-ruimte-m);
    }
    .vivi-social-balk__keuze { display: flex; flex-wrap: wrap; gap: var(--vivi-ruimte-s); }
    .vivi-seg__pijl {
        display: inline-block; flex: none; width: 1em; height: 1em;
        margin-left: var(--vivi-ruimte-2xs); vertical-align: -.15em;
    }

    .vivi-social-kpis {
        display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
        gap: var(--vivi-ruimte-m);
    }
    .vivi-skpi {
        display: flex; flex-direction: column; gap: var(--vivi-ruimte-xs);
        min-width: 0; padding: var(--vivi-ruimte-l);
    }
    .vivi-skpi__label { font-size: var(--vivi-tekst-s); font-weight: 600; color: var(--vivi-tekst-2, var(--vivi-muted)); }
    .vivi-skpi__value {
        font-family: var(--vivi-type-display, inherit); letter-spacing: var(--vivi-type-display-spatie, 0);
        font-size: var(--vivi-cijfer-l, var(--vivi-kop-l)); font-weight: 400; line-height: 1;
        color: var(--vivi-ink); font-variant-numeric: tabular-nums;
    }
    .vivi-skpi__spark { display: block; width: 100%; height: 28px; margin-top: var(--vivi-ruimte-xs); }
    .vivi-skpi__delta,
    .vivi-skpi__sub { margin-top: auto; padding-top: var(--vivi-ruimte-xs); font-size: var(--vivi-tekst-s); }
    .vivi-skpi__delta { font-weight: 600; font-variant-numeric: tabular-nums; }
    .vivi-skpi__delta.is-up { color: var(--vivi-ok); }
    .vivi-skpi__delta.is-down { color: var(--vivi-fout); }
    .vivi-skpi__delta .vivi-muted {
        display: block; font-weight: 400; color: var(--vivi-tekst-2, var(--vivi-muted)); text-wrap: balance;
    }
    .vivi-skpi--netto .vivi-skpi__value { color: var(--vivi-tekst-op-donker, var(--vivi-cream)); }
    .vivi-skpi--netto .vivi-skpi__label,
    .vivi-skpi--netto .vivi-skpi__sub {
        color: color-mix(in srgb, var(--vivi-tekst-op-donker, var(--vivi-cream)) 72%, var(--vivi-vlak-donker, var(--vivi-ink)));
    }

    .vivi-social-duo { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--vivi-ruimte-m); }
    .vivi-social-duo .vivi-section__uitleg,
    .vivi-social-posts .vivi-section__uitleg { text-wrap: balance; }
    .vivi-social-duo__grafiek { margin-top: auto; }

    .vivi-chart { display: block; width: 100%; height: 150px; }
    .vivi-chart__vlak { fill: color-mix(in srgb, var(--vivi-gold) 14%, transparent); }
    .vivi-chart__as {
        display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--vivi-ruimte-2xs) var(--vivi-ruimte-s);
        margin-top: var(--vivi-ruimte-xs); font-size: var(--vivi-tekst-s); color: var(--vivi-tekst-2, var(--vivi-muted));
        font-variant-numeric: tabular-nums;
    }
    .vivi-chart__as b { font-weight: 600; color: var(--vivi-ink); }

    .vivi-bars { display: flex; gap: 2px; height: 150px; }
    .vivi-bars.has-neg {
        background: linear-gradient(var(--vivi-line), var(--vivi-line)) center / 100% 1px no-repeat;
    }
    .vivi-bars__col { flex: 1; min-width: 0; display: grid; grid-template-rows: minmax(0, 1fr); }
    .vivi-bars.has-neg .vivi-bars__col { grid-template-rows: repeat(2, minmax(0, 1fr)); }
    .vivi-bars__stok { grid-row: 1; align-self: end; border-radius: var(--vivi-radius-xs); background: var(--vivi-ok); }
    .vivi-bars__stok.is-neg { grid-row: 2; align-self: start; background: var(--vivi-fout); }

    .vivi-pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--vivi-ruimte-m); }
    .vivi-pcard {
        display: flex; flex-direction: column; overflow: hidden;
        border: 1px solid var(--vivi-line); border-radius: var(--vivi-radius-m);
        background: var(--vivi-vlak, var(--vivi-cream)); color: inherit; text-decoration: none;
        transition: transform .15s ease, box-shadow .15s ease;
    }
    .vivi-pcard[href]:hover { transform: translateY(-2px); box-shadow: var(--vivi-schaduw-zweef); }
    .vivi-pcard[href]:focus-visible { outline: none; box-shadow: var(--vivi-ring-focus); }
    .vivi-pthumb { position: relative; aspect-ratio: 1; background: var(--vivi-cream-2); }
    .vivi-pthumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
    .vivi-pthumb__leeg {
        position: absolute; inset: 0; display: grid; place-items: center; padding: var(--vivi-ruimte-s);
        text-align: center; text-wrap: balance; font-size: var(--vivi-tekst-xs); color: var(--vivi-tekst-2, var(--vivi-muted));
    }
    .vivi-pplat {
        position: absolute; left: var(--vivi-ruimte-xs); bottom: var(--vivi-ruimte-xs); z-index: 2;
        font-size: var(--vivi-tekst-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
        background: color-mix(in srgb, var(--vivi-vlak, var(--vivi-cream)) 92%, transparent); color: var(--vivi-ink);
        padding: var(--vivi-ruimte-2xs) var(--vivi-ruimte-xs); border-radius: var(--vivi-radius-pil);
    }
    .vivi-pbody {
        display: flex; flex: 1; flex-direction: column; gap: var(--vivi-ruimte-2xs);
        padding: var(--vivi-ruimte-s) var(--vivi-ruimte-m) var(--vivi-ruimte-m);
    }
    .vivi-pcap { font-size: var(--vivi-tekst-m); font-weight: 600; line-height: 1.35; color: var(--vivi-ink); text-wrap: balance; }
    .vivi-pcap.is-tags {
        overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
        font-weight: 400; color: var(--vivi-tekst-2, var(--vivi-muted));
    }
    .vivi-pmeta { font-size: var(--vivi-tekst-xs); color: var(--vivi-tekst-2, var(--vivi-muted)); }
    .vivi-pstats {
        display: flex; flex-wrap: wrap; gap: var(--vivi-ruimte-2xs) var(--vivi-ruimte-s);
        margin-top: auto; padding-top: var(--vivi-ruimte-xs);
        font-size: var(--vivi-tekst-xs); color: var(--vivi-tekst-2, var(--vivi-muted));
    }
    .vivi-pstats b { font-weight: 600; color: var(--vivi-ink); font-variant-numeric: tabular-nums; }

    .vivi-tablewrap { overflow-x: auto; }
    .vivi-table { width: 100%; border-collapse: collapse; font-size: .78rem; min-width: 640px; }
    .vivi-table th, .vivi-table td { padding: .5rem .6rem; text-align: left; border-bottom: 1px solid var(--vivi-line); white-space: nowrap; }
    .vivi-table th { color: var(--vivi-muted); font-weight: 600; font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; }
    .vivi-table th.is-on { color: var(--vivi-ink); }
    .vivi-table th .pijl { margin-left: .2rem; font-size: .6rem; }
    .vivi-table .num { text-align: right; font-variant-numeric: tabular-nums; }
    .vivi-table td.post, .vivi-table th.post { white-space: normal; min-width: 220px; max-width: 320px; }
    .vivi-table td.post .cap { font-weight: 600; color: var(--vivi-ink); }
    .vivi-table td.post .sub { font-size: .68rem; }
    .vivi-table tbody tr:hover { background: rgba(43, 36, 25, .025); }
    /* Smalle variant: een tabel met twee kolommen past ook op 375 en schuift dan niet. */
    .vivi-table--smal { min-width: 0; }
    .vivi-table--smal td.post, .vivi-table--smal th.post { min-width: 0; max-width: none; width: 100%; overflow-wrap: break-word; }
    .vivi-table--smal td.post .vivi-rij { flex-wrap: nowrap; align-items: flex-start; gap: var(--vivi-ruimte-s, .5rem); }
    .vivi-table--smal td.post .vivi-rij > a { min-width: 0; }

    /* De posttabel: koppen zijn knoppen (sorteren met toetsenbord en een
       tikmaat van 44px), de rest van .vivi-table blijft gedeeld. */
    .vivi-table--posts th { padding-block: 0; color: var(--vivi-tekst-2, var(--vivi-muted)); }
    .vivi-table--posts th.is-on { color: var(--vivi-ink); }
    .vivi-table--posts td.post .sub { color: var(--vivi-tekst-2, var(--vivi-muted)); }
    .vivi-table__sorteer {
        display: inline-flex; align-items: center; min-height: var(--vivi-tik-min, 44px);
        padding: 0; border: 0; background: none; cursor: pointer;
        font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit;
    }
    .vivi-table--posts th.num .vivi-table__sorteer { justify-content: flex-end; width: 100%; }
    .vivi-table__sorteer:focus-visible { outline: none; box-shadow: var(--vivi-ring-focus); border-radius: var(--vivi-radius-xs); }

    .vivi-social-voet {
        display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
        gap: var(--vivi-ruimte-s) var(--vivi-ruimte-m);
    }

    @media (max-width: 1023.98px) {
        .vivi-social-kpis { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .vivi-social-kpis > :last-child:nth-child(odd) { grid-column: 1 / -1; }
        .vivi-social-duo { grid-template-columns: minmax(0, 1fr); }
    }
    @media (max-width: 639.98px) {
        .vivi-pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .vivi-skpi__spark { display: none; }
        .vivi-seg__item { min-height: 2.1rem; padding-left: .65rem; padding-right: .65rem; }
    }
    @media (max-width: 479.98px) {
        .vivi-skpi { padding: var(--vivi-ruimte-m); }
        .vivi-skpi__value { font-size: var(--vivi-kop-l); }

        /* De vier sorteerknoppen boven de posttegels vragen op één regel 292px;
           op 320 is er 254. Ze worden hier twee rijen van twee over de volle
           breedte, met dezelfde letter (gemeten 08-10-2026, H-089). */
        .vivi-social-posts .vivi-social-balk > .vivi-seg {
            display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%;
            border-radius: var(--vivi-radius-m);
        }
        .vivi-social-posts .vivi-social-balk > .vivi-seg .vivi-seg__item { white-space: nowrap; }
    }

    /* =========================================================
       Team-dashboard (eerstvolgende taak plus wachtrij), omgezet naar de
       componentlaag op 06-08-2026. Deze CSS gaat integraal inline elke
       pagina-HEAD in (Stijllaag::css), dus schermteksten die tests met
       assertDontSee controleren horen hier niet letterlijk in commentaar.
       Alleen wat echt schermgebonden is staat hier;
       kicker, regel, scheiding en te-laat zijn gedeeld (04-componenten).
       ========================================================= */
    .vivi-dash-lead { max-width: 34rem; }
    .vivi-dash-taaktitel {
        font-family: var(--vivi-serif); font-size: var(--vivi-kop-m);
        font-weight: 700; line-height: 1.15; color: var(--vivi-ink);
    }

    /* =========================================================
       Portal-projecten: coverkaarten (held, zijkolom, raster) en de
       compacte rijenlijsten. Omgezet naar de componentlaag op 06-08-2026.
       ========================================================= */
    /* Kaart zonder eigen padding: het beeld loopt tot de rand. */
    .vivi-projectkaart { display: block; padding: 0; overflow: hidden; }
    .vivi-projectkaart__beeld { position: relative; height: 70px; }
    .vivi-projectkaart__body { padding: .9rem 1.1rem 1.1rem; }
    /* Voortgang: balk rekt mee, teller blijft op maat. */
    .vivi-voortgang { display: flex; align-items: center; gap: var(--vivi-ruimte-xs); }
    .vivi-voortgang .vivi-bar { flex: 1; }
    .vivi-voortgang__teller { font-size: var(--vivi-tekst-xs); color: var(--vivi-muted); flex: none; }
    /* Dikkere balk op de held-kaart. */
    .vivi-bar--dik { height: .55rem; }
    /* Tekstkolom in een rij: mag krimpen, vult de ruimte. */
    .vivi-row__tekst { min-width: 0; flex: 1; }

    /* =========================================================
       Team-projectdetail: mijlpalenlijst. Omgezet 06-08-2026.
       ========================================================= */
    .vivi-mijlpaal__vink {
        display: inline-flex; align-items: center; justify-content: center; flex: none;
        width: 1.5rem; height: 1.5rem; border-radius: var(--vivi-radius-rond);
        font-size: var(--vivi-tekst-m); font-weight: 700;
        background: rgba(43, 36, 25, .06); color: #B8AE9B;
    }
    .vivi-mijlpaal__vink--af { background: var(--vivi-gold); color: var(--vivi-ink); }
    .vivi-mijlpaal__titel { font-size: var(--vivi-tekst-m); color: var(--vivi-muted); }
    .vivi-mijlpaal__titel--af { color: var(--vivi-ink); font-weight: 500; }

    /* Projectmanagement (S2, 27-10-2026): stand, takenlijst met afvinken
       en toewijzen, en de zijkolom met meewerkers en cijfers. */
    .vivi-pm-stand { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vivi-ruimte-m); }
    .vivi-pm-sub {
        margin: var(--vivi-ruimte-m) 0 var(--vivi-ruimte-xs);
        font-size: var(--vivi-tekst-xs); font-weight: 600; letter-spacing: .04em;
        text-transform: uppercase; color: var(--vivi-ink);
    }
    .vivi-pm-lijst { display: grid; gap: var(--vivi-ruimte-xs); }
    .vivi-pm-levering, .vivi-pm-persoon {
        display: flex; flex-wrap: wrap; justify-content: space-between;
        gap: var(--vivi-ruimte-xs); font-size: var(--vivi-tekst-s); padding: var(--vivi-ruimte-xs) 0;
    }
    .vivi-pm-taak {
        display: flex; flex-wrap: wrap; align-items: center; gap: var(--vivi-ruimte-s);
        min-height: 2.75rem; border-top: 1px solid var(--vivi-line);
    }
    .vivi-pm-taak .vivi-mijlpaal__vink { width: 2.75rem; height: 2.75rem; color: var(--vivi-ink); cursor: pointer; }
    .vivi-pm-taak .vivi-mijlpaal__vink:not(.vivi-mijlpaal__vink--af) { background: transparent; border: 2px solid var(--vivi-muted); color: transparent; }
    .vivi-pm-taak__naam { flex: 1 1 12rem; min-width: 0; font-size: var(--vivi-tekst-s); color: var(--vivi-ink); }
    .vivi-pm-taak__wie {
        flex: 0 1 11rem; min-width: 0; min-height: 2.75rem;
        font-size: var(--vivi-tekst-s); color: var(--vivi-ink);
        border: 1px solid var(--vivi-line); border-radius: var(--vivi-radius-s);
        /* Alleen de kleur: de shorthand zette repeat terug en tegelde de pijl van de formulierlaag over de naam. */
        background-color: transparent; background-repeat: no-repeat;
        background-position: right .5rem center; background-size: 1.25em 1.25em;
    }
    .vivi-pm-taak__door { flex: 0 1 11rem; min-width: 0; font-size: var(--vivi-tekst-s); text-align: right; }
    .vivi-pm-opmerking { margin-top: var(--vivi-ruimte-xs); font-size: var(--vivi-tekst-s); color: var(--vivi-ink); }
    .vivi-pm-cijfers { display: grid; grid-template-columns: auto 1fr; gap: var(--vivi-ruimte-xs) var(--vivi-ruimte-m); font-size: var(--vivi-tekst-s); }
    .vivi-pm-cijfers dt { color: var(--vivi-muted); }
    .vivi-pm-cijfers dd { color: var(--vivi-ink); text-align: right; }

    /* =========================================================
       Portal-dashboard (bento): Loïs-hero, agenda, mini's, projectenlijst.
       Omgezet naar de componentlaag op 06-08-2026; de maten komen één op
       één uit de inline-stijlen die hier tot die datum in de blade stonden.
       ========================================================= */
    .vivi-hero-lois__orbbg {
        right: -14rem; top: 50%; transform: translateY(-50%);
        width: 42rem; height: 42rem;
    }
    .vivi-hero-lois__orb {
        right: 4.5rem; top: 50%; transform: translateY(-50%);
        width: 8.5rem; height: 8.5rem;
    }
    .vivi-hero-lois__mic { width: 1.9rem; height: 1.9rem; }
    .vivi-hero-lois__veld { flex: 1; min-width: 0; background: #fff; }
    .vivi-hero-lois__antwoord {
        font-size: var(--vivi-tekst-m); line-height: 1.6;
        color: rgba(43, 36, 25, .78); max-width: 34rem; white-space: pre-line;
    }
    .vivi-hero-lois__offline { font-size: var(--vivi-tekst-m); color: rgba(43, 36, 25, .7); max-width: 26rem; }
    /* Weekweergave: afspraak springt in tot naast de dagcirkel. */
    .vivi-event--inspring { margin-left: 2.7rem; }
    /* Weekdagletters boven het maandrooster, op de donkere kaart. */
    .vivi-cal__wd { font-size: .62rem; color: rgba(244, 241, 233, .4); font-weight: 700; }
    /* Kerncijfer in een mini-kaart (volgende deadline). */
    .vivi-mini__cijfer {
        font-family: var(--vivi-serif); font-size: var(--vivi-kop-s);
        font-weight: 700; line-height: 1.1; color: var(--vivi-ink);
    }
    /* Compacte voortgangsbalk naast een projectrij. */
    .vivi-app__minibar { width: 92px; flex: none; }

    /* =========================================================
       Portal-projectdetail: cover-hero, goedkeurkaart, tijdlijn.
       Omgezet naar de componentlaag op 06-08-2026.
       ========================================================= */
    /* Badges op een coverfoto: de doorschijnende tonen verdrinken in het
       beeld, dus op een cover krijgen ze een wit vlak achter de toonkleur. */
    .vivi-cover .vivi-pill { background: rgba(255, 255, 255, .92); }

    /* Projectomschrijving onder de cover. */
    .vivi-projectintro { font-size: var(--vivi-tekst-l); max-width: 44rem; }

    /* De goudgele kaart die om goedkeuring vraagt. */
    .vivi-goedkeurkaart {
        background: var(--vivi-gold); border-color: var(--vivi-gold);
        box-shadow: 0 14px 36px rgba(217, 159, 31, .35);
    }
    .vivi-goedkeurkaart .vivi-kicker { color: rgba(43, 36, 25, .6); }
    .vivi-goedkeurkaart__tekst { font-size: var(--vivi-tekst-m); color: rgba(43, 36, 25, .7); }

    /* Verticale tijdlijn: bol + lijn links, inhoud rechts. */
    .vivi-tijdlijn__rij { display: flex; gap: .95rem; }
    .vivi-tijdlijn__spoor { display: flex; flex-direction: column; align-items: center; flex: none; width: 1.7rem; }
    .vivi-tijdlijn__bol {
        display: inline-flex; align-items: center; justify-content: center;
        width: 1.7rem; height: 1.7rem; border-radius: var(--vivi-radius-rond);
        font-size: var(--vivi-tekst-m); font-weight: 700;
        background: var(--vivi-cream-2); color: #B8AE9B; border: 1px solid var(--vivi-cream);
    }
    .vivi-tijdlijn__bol--af { background: var(--vivi-gold); color: var(--vivi-ink); border: 0; }
    .vivi-tijdlijn__bol--nu { background: #fff; color: var(--vivi-ink); border: 2px solid var(--vivi-gold); }
    .vivi-tijdlijn__lijn { flex: 1; width: 2px; min-height: .9rem; background: var(--vivi-cream); margin: .25rem 0; }
    .vivi-tijdlijn__body { min-width: 0; flex: 1; padding-bottom: 1rem; }
    .vivi-tijdlijn__rij:last-child .vivi-tijdlijn__body { padding-bottom: 0; }
    .vivi-tijdlijn__titel { color: var(--vivi-muted); }
    .vivi-tijdlijn__titel--actief { color: var(--vivi-ink); font-weight: 600; }

    /* =========================================================
       Taken-dashboard (/taken): heldkaart + werkstream, 06-08-2026.
       Volle contentbreedte (Dauji: "zorg dat dit blok de juiste
       breedte is"); op desktop twee kolommen zodat de teamsectie
       naast het eigen werk staat in plaats van er meters onder.
       ========================================================= */
    .vivi-taken { display: flex; flex-direction: column; gap: var(--vivi-ruimte-l); width: 100%; }
    /* Alpine verbergt x-cloak pas na init; zonder deze regel flitst de
       "pad gekopieerd"-tekst van de kopieer-chips bij het laden. */
    .vivi-taken [x-cloak] { display: none !important; }
    .vivi-taken__layout { display: grid; gap: var(--vivi-ruimte-l); grid-template-columns: 1fr; align-items: start; }
    .vivi-taken__layout > * { min-width: 0; }
    @media (min-width: 1024px) {
        .vivi-taken__layout { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
        /* De eigenaarskolom is langer dan het eigen werk links; zonder dit
           stond links vanaf de stapel ~900px leeg (gemeten 22-10 op 1440).
           Nu blijft hij naast je staan en scrollt hij zelf. */
        .vivi-taken__kolom--zij {
            position: sticky; top: var(--vivi-ruimte-l);
            max-height: calc(100dvh - 2 * var(--vivi-ruimte-l));
            overflow-y: auto; overscroll-behavior: contain;
            /* De schuifbalk krijgt een eigen smalle goot buiten de kaarten:
               de negatieve marge geeft de kolom die ruimte terug, zodat de
               kaarten rechts even breed blijven als zonder schuifbalk. */
            scrollbar-gutter: stable; scrollbar-width: thin;
            margin-inline-end: calc(-1 * var(--vivi-ruimte-s));
        }
    }
    .vivi-taken__kolom { display: flex; flex-direction: column; gap: var(--vivi-ruimte-l); min-width: 0; }

    .vivi-taken__stats { display: flex; flex-wrap: wrap; gap: var(--vivi-ruimte-s); }

    /* Heldkaart: de donkere kaart met het item van nu. */
    .vivi-taken__held { padding: var(--vivi-ruimte-xl); }
    .vivi-taken__nu {
        font-size: var(--vivi-tekst-xs); font-weight: 800; letter-spacing: .12em;
        text-transform: uppercase; color: var(--vivi-gold);
    }
    .vivi-taken__held-titel {
        font-family: var(--vivi-serif); font-size: var(--vivi-kop-m); font-weight: 700;
        line-height: 1.25; margin-top: var(--vivi-ruimte-s); overflow-wrap: anywhere;
    }
    .vivi-taken__meta {
        display: flex; flex-wrap: wrap; align-items: center;
        gap: var(--vivi-ruimte-2xs) var(--vivi-ruimte-m);
        font-size: var(--vivi-tekst-s); color: var(--vivi-muted);
    }
    .vivi-card--dark .vivi-taken__meta { color: rgba(244, 241, 233, .65); }
    /* De beschrijving is de context waar Dauji om vroeg: volledige tekst,
       regelafbrekingen intact (pre-line), links leesbaar onderstreept. */
    .vivi-taken__tekst {
        margin-top: var(--vivi-ruimte-m); line-height: 1.6; white-space: pre-line;
        font-size: var(--vivi-tekst-m); color: rgba(244, 241, 233, .85); overflow-wrap: anywhere;
    }
    .vivi-taken__tekst a {
        color: inherit; text-decoration: underline; text-underline-offset: 2px;
        text-decoration-color: rgba(235, 178, 46, .55);
    }
    .vivi-taken__tekst a:hover { text-decoration-color: var(--vivi-gold); }
    /* Doel/Klaar wanneer/Tijdsinschatting/Links als gestructureerde regels:
       vet label, eigen regel, klein beetje lucht ertussen (Dauji 05-08:
       "Doel: xxx" op een eigen regel, geen platte lap). */
    .vivi-taken__veld { margin-top: var(--vivi-ruimte-xs); }
    .vivi-taken__veld:first-child { margin-top: 0; }
    .vivi-taken__veldlabel { font-weight: 700; color: var(--vivi-cream); }
    .vivi-taken__vrijtekst { margin-top: var(--vivi-ruimte-xs); }
    .vivi-taken__vrijtekst:first-child { margin-top: 0; }

    /* Comments/statusupdates op de heldkaart: laatste 3 als stille regels,
       compact invoerveld eronder (team-intern). */
    .vivi-taken__updates {
        margin-top: var(--vivi-ruimte-l); padding-top: var(--vivi-ruimte-m);
        border-top: 1px solid rgba(255, 255, 255, .14);
        display: flex; flex-direction: column; gap: var(--vivi-ruimte-s);
    }
    .vivi-taken__update { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .vivi-taken__update-kop { font-size: var(--vivi-tekst-xs); color: rgba(244, 241, 233, .55); }
    .vivi-taken__update-body {
        font-size: var(--vivi-tekst-s); color: rgba(244, 241, 233, .85);
        white-space: pre-line; overflow-wrap: anywhere;
    }
    .vivi-taken__update-invoer { display: flex; flex-wrap: wrap; gap: var(--vivi-ruimte-xs); align-items: center; }
    .vivi-taken__update-input { flex: 1 1 12rem; min-width: 0; min-height: 44px; }
    .vivi-taken__update-type {
        min-height: 44px; border-radius: var(--vivi-radius-m);
        border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .08);
        color: var(--vivi-cream); font: inherit; font-size: var(--vivi-tekst-s);
        /* Rechts ruimte voor de pijl: de formulierlaag zet een pijl als
           achtergrondbeeld rechts in elke select, en met alleen ruimte-s
           padding liep de tekst eroverheen (22-10). */
        padding: 0 2.25rem 0 var(--vivi-ruimte-s);
        background-position: right .6rem center; background-size: 1.1em 1.1em;
        /* De shorthand hierboven zet repeat terug op herhalen; zonder deze
           regel tegelde de pijl over het hele veld. */
        background-repeat: no-repeat;
        flex: none;
    }
    .vivi-taken__update-type option { color: var(--vivi-ink); }

    /* Klant/projectregel bovenin de heldkaart: logo, naam, projectnaam. */
    .vivi-taken__klant {
        display: flex; align-items: center; gap: var(--vivi-ruimte-s);
        margin-top: var(--vivi-ruimte-m);
    }
    .vivi-taken__klantnaam { font-size: var(--vivi-tekst-m); font-weight: 600; color: var(--vivi-cream); }
    .vivi-taken__klantproject { font-size: var(--vivi-tekst-s); color: rgba(244, 241, 233, .6); }

    /* Verwijzingen uit de beschrijving als chips: web-links openen direct,
       een bestandspad kopieert zichzelf bij een tik. */
    .vivi-taken__linkchips {
        display: flex; flex-wrap: wrap; gap: var(--vivi-ruimte-xs);
        margin-top: var(--vivi-ruimte-m);
    }
    .vivi-taken__chipknop {
        display: inline-flex; align-items: center; gap: var(--vivi-ruimte-2xs);
        min-height: 44px; max-width: 100%; cursor: pointer; box-sizing: border-box;
        padding: var(--vivi-ruimte-2xs) var(--vivi-ruimte-m);
        border: 1px solid rgba(255, 255, 255, .22); border-radius: var(--vivi-radius-pil);
        background: rgba(255, 255, 255, .1); color: var(--vivi-cream);
        font: inherit; font-size: var(--vivi-tekst-s); font-weight: 600;
        text-decoration: none; transition: background .14s ease, border-color .14s ease;
    }
    .vivi-taken__chipknop:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .4); }
    .vivi-taken__chiplabel { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .vivi-taken__brief {
        margin-top: var(--vivi-ruimte-m); padding: var(--vivi-ruimte-s) var(--vivi-ruimte-m);
        border-radius: var(--vivi-radius-m); background: rgba(235, 178, 46, .18);
        font-size: var(--vivi-tekst-s); color: rgba(244, 241, 233, .9);
    }
    .vivi-card--dark .vivi-kicker { color: rgba(244, 241, 233, .55); }
    .vivi-taken__acties { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vivi-ruimte-s); margin-top: var(--vivi-ruimte-l); }
    .vivi-taken__actie {
        min-height: 44px; border-radius: var(--vivi-radius-m);
        padding: var(--vivi-ruimte-s) var(--vivi-ruimte-l);
        font-size: var(--vivi-tekst-m); font-weight: 600; cursor: pointer; border: 0;
    }
    .vivi-taken__actie--licht { background: #fff; color: var(--vivi-ink); }
    .vivi-taken__actie--omlijnd { background: none; border: 1px solid rgba(255, 255, 255, .25); color: rgba(244, 241, 233, .85); }
    .vivi-taken__actie--stil { background: none; color: rgba(244, 241, 233, .65); }
    /* Eén primaire actie per kaart (Linear-les): Klaar in goud, met vinkje. */
    .vivi-taken__actie--primair {
        display: inline-flex; align-items: center; gap: var(--vivi-ruimte-xs);
        background: var(--vivi-gold); color: var(--vivi-ink);
        transition: transform .12s ease, background .14s ease;
    }
    .vivi-taken__actie--primair:hover { background: var(--vivi-gold-press); }
    .vivi-taken__actie--primair:active { transform: scale(.96); }
    .vivi-taken__vink { width: 1em; height: 1em; flex: none; }
    /* Kort goud-moment bij Klaar op de held: de kaart licht op en dimt, de
       server-call volgt er vlak achteraan (zie de blade). */
    .vivi-taken__held { transition: opacity .3s ease, box-shadow .3s ease; }
    .vivi-taken__held--af { opacity: .45; box-shadow: 0 0 0 3px rgba(235, 178, 46, .55); }
    .vivi-taken__input {
        width: 100%; box-sizing: border-box;
        border-radius: var(--vivi-radius-m); border: 1px solid rgba(255, 255, 255, .2);
        background: rgba(255, 255, 255, .08); color: #fff;
        padding: var(--vivi-ruimte-s) var(--vivi-ruimte-m); font: inherit; font-size: var(--vivi-tekst-m);
    }
    /* Kleine ClickUp-verwijzing: blijft bestaan voor wie 'm wil, maar de
       context zelf staat ín de kaart (Dauji: "moet niet clickup openen"). */
    .vivi-taken__extern {
        display: inline-flex; align-items: center; gap: var(--vivi-ruimte-2xs);
        font-size: var(--vivi-tekst-xs); color: rgba(244, 241, 233, .55);
        text-decoration: underline; text-underline-offset: 2px; min-height: 44px;
    }

    /* Statuschips van x-vivi.badge op de donkere kaart leesbaar houden. */
    .vivi-card--dark .vivi-pill--stil { background: rgba(255, 255, 255, .16); color: #fff; }

    /* Eén rij in de werkstream: logo/avatar, titel + meta, chips rechts
       (Dauji: "die 2 status is goed, en aan de rechterkant dan"),
       losse Klaar-knop. Tapdoelen minimaal 44px. */
    .vivi-taken-rij { display: flex; align-items: stretch; gap: var(--vivi-ruimte-s); container-type: inline-size; }
    /* De kaart zelf; de open-knop en de Vandaag-knop staan er allebei in,
       zodat elke kaart in een blok even breed is (22-10: kaarten met de knop
       ernaast waren tot 150px smaller en braken de titel over drie regels). */
    .vivi-taken-rij__kaart {
        flex: 1; min-width: 0; padding: 0;
        display: flex; flex-direction: column;
    }
    .vivi-taken-rij__open {
        width: 100%; min-width: 0; display: flex; align-items: center; gap: var(--vivi-ruimte-m);
        text-align: left; cursor: pointer; min-height: 44px;
        padding: var(--vivi-ruimte-s) var(--vivi-ruimte-m);
        border: 0; background: none; font: inherit; color: inherit;
    }
    /* Onder de meta, uitgelijnd op de titel (logo 2.3rem plus de gap). */
    .vivi-taken-rij__onder {
        display: flex; flex-wrap: wrap; gap: var(--vivi-ruimte-2xs);
        padding: 0 var(--vivi-ruimte-m) var(--vivi-ruimte-s) calc(2 * var(--vivi-ruimte-m) + 2.3rem);
    }
    .vivi-taken-rij__body { display: block; flex: 1; min-width: 0; }
    .vivi-taken-rij__body > .vivi-regel { display: block; }
    .vivi-taken-rij__chips {
        display: flex; align-items: center; gap: var(--vivi-ruimte-2xs);
        flex: none; margin-left: auto;
    }
    /* De ronde afvink-knop: 44px tapdoel om een cirkel van 1.7rem heen. De
       cirkel vult zich goud en het vinkje popt (Todoist-les) voordat de rij
       wegglijdt; de server-call volgt na de animatie (zie de partial). */
    .vivi-taken-rij__klaar {
        min-height: 44px; min-width: 44px; align-self: center; cursor: pointer;
        display: inline-flex; align-items: center; justify-content: center;
        border: 0; background: none; padding: 0; flex: none;
    }
    .vivi-taken-rij__cirkel {
        display: inline-flex; align-items: center; justify-content: center;
        width: 1.7rem; height: 1.7rem; border-radius: var(--vivi-radius-rond);
        border: 2px solid var(--vivi-line-strong); background: #fff; color: transparent;
        transition: border-color .14s ease, background .18s ease, color .18s ease;
    }
    .vivi-taken-rij__klaar:hover .vivi-taken-rij__cirkel { border-color: var(--vivi-gold); color: var(--vivi-line-strong); }
    .vivi-taken-rij--af .vivi-taken-rij__cirkel {
        border-color: var(--vivi-gold); background: var(--vivi-gold); color: var(--vivi-ink);
    }
    .vivi-taken-rij--af .vivi-taken-rij__cirkel .vivi-taken__vink { animation: vivi-vink-pop .25s ease; }
    @keyframes vivi-vink-pop {
        0% { transform: scale(.4); }
        60% { transform: scale(1.25); }
        100% { transform: scale(1); }
    }
    /* De afgevinkte rij glijdt weg terwijl Livewire hem ophaalt. */
    .vivi-taken-rij { transition: opacity .3s ease .15s, transform .3s ease .15s; }
    .vivi-taken-rij--af { opacity: .35; transform: translateX(.6rem); }

    /* Logo of initialen-avatar voor de klant/het project van een taak. */
    .vivi-taken__logo {
        width: 2.3rem; height: 2.3rem; border-radius: var(--vivi-radius-rond);
        object-fit: cover; flex: none; border: 1px solid var(--vivi-line); background: #fff;
    }
    .vivi-taken__avatar { width: 2.3rem; height: 2.3rem; font-size: var(--vivi-tekst-s); background: var(--vivi-zand); }
    .vivi-taken__avatar--goud { background: var(--vivi-gold); color: var(--vivi-ink); }

    /* De eigenaarskolom op desktop is 2fr van de pagina: rond 400px op 1280.
       Logo, chips en de afvinkcirkel lieten de titel daar 5 tot 8 regels
       breken (designtoets 09-10). Dezelfde regel als het smalle scherm
       hieronder, maar op de breedte van de rij in plaats van het venster
       (zelfde aanpak als .vivi-lijstrij in 11).
       Chips blijven rechts (Dauji: "aan de rechterkant dan").
       De grens volgt de breekpuntschaal (BreekpuntTest geldt ook hier). */
    @container (max-width: 479.98px) {
        .vivi-taken-rij__open { flex-wrap: wrap; row-gap: var(--vivi-ruimte-2xs); }
        .vivi-taken-rij__body { flex: 1 1 calc(100% - 2.3rem - var(--vivi-ruimte-m)); }
        .vivi-taken-rij__chips { margin-left: auto; }
    }

    @media (max-width: 639.98px) {
        .vivi-taken__held { padding: var(--vivi-ruimte-l); }
        /* Chips op een smal scherm op een eigen regel, nog steeds rechts:
           naast de titel knijpen ze de tekstkolom tot ~70px (gemeten 06-08). */
        .vivi-taken-rij__open { flex-wrap: wrap; }
        .vivi-taken-rij__body { flex: 1 1 calc(100% - 2.3rem - var(--vivi-ruimte-m)); }
        .vivi-taken-rij__chips { margin-left: auto; }
    }

    /* =========================================================
       Workload-monitor: dashboard zonder scroll op 1440 + detailpagina's,
       06-08-2026. Grafieken zijn kale SVG; kleuren komen uit de zeven
       segmentklassen hieronder, nooit uit hexen in de blade.
       ========================================================= */
    .vivi-wm { display: flex; flex-direction: column; gap: var(--vivi-ruimte-l); width: 100%; }
    .vivi-wm-detail { display: flex; flex-direction: column; gap: var(--vivi-ruimte-xl); width: 100%; }

    /* Rij 1: kerncijfers links, barrières rechts. */
    .vivi-wm-kop { display: grid; gap: var(--vivi-ruimte-l); grid-template-columns: 1fr; }
    .vivi-wm-statrij { display: flex; flex-wrap: wrap; gap: var(--vivi-ruimte-s) var(--vivi-ruimte-xl); margin-top: var(--vivi-ruimte-s); }
    .vivi-wm-statrij--dicht { gap: var(--vivi-ruimte-s) var(--vivi-ruimte-l); }
    /* Eén regel die nooit een tweede wordt: de vouw op 1440 hangt eraan. */
    .vivi-wm-regel { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .vivi-wm-barriere { display: flex; align-items: baseline; gap: var(--vivi-ruimte-2xs) var(--vivi-ruimte-m); }
    .vivi-wm-barriere__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40%; }
    .vivi-wm-barriere__detail { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
    .vivi-wm-barriere__dagen { margin-left: auto; flex: none; font-size: var(--vivi-tekst-s); font-weight: 700; color: var(--vivi-fout); }

    /* Rij 2 en 3: de grafiek- en personenkaarten. Grid-items krijgen
       min-width 0, anders rekt één lange klantnaam in een legenda de hele
       track op voorbij de viewport (gemeten op 375, 06-08). */
    .vivi-wm-grafieken, .vivi-wm-personen { display: grid; gap: var(--vivi-ruimte-l); grid-template-columns: 1fr; }
    .vivi-wm-kop > *, .vivi-wm-grafieken > *, .vivi-wm-personen > * { min-width: 0; }

    /* De donut: cirkels met pathLength=100, segmentkleur via klasse. */
    .vivi-wm-donutblok { display: flex; align-items: center; gap: var(--vivi-ruimte-m); margin-top: var(--vivi-ruimte-m); }
    .vivi-wm-donut { width: 7.5rem; height: 7.5rem; flex: none; }
    .vivi-wm-donut circle { fill: none; stroke-width: 6; }
    .vivi-wm-donut__spoor { stroke: var(--vivi-line); }
    .vivi-wm-legenda { display: flex; flex-direction: column; gap: var(--vivi-ruimte-2xs); min-width: 0; flex: 1; }
    .vivi-wm-legenda__rij { display: flex; align-items: baseline; gap: var(--vivi-ruimte-xs); min-width: 0; }
    .vivi-wm-legenda__rij .vivi-regel { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
    .vivi-wm-legenda__rij .vivi-meta { margin-left: auto; flex: none; }
    .vivi-wm-dot { width: .55rem; height: .55rem; border-radius: var(--vivi-radius-rond); flex: none; align-self: center; }

    /* Zeven segmentkleuren, op de bestaande tokens. Als donutsegment (stroke),
       als legendastip (background) en als staaf (fill). */
    .vivi-wm-seg--0 { stroke: var(--vivi-gold); background: var(--vivi-gold); fill: var(--vivi-gold); }
    .vivi-wm-seg--1 { stroke: var(--vivi-ink); background: var(--vivi-ink); fill: var(--vivi-ink); }
    .vivi-wm-seg--2 { stroke: var(--vivi-zand); background: var(--vivi-zand); fill: var(--vivi-zand); }
    .vivi-wm-seg--3 { stroke: var(--vivi-info); background: var(--vivi-info); fill: var(--vivi-info); }
    .vivi-wm-seg--4 { stroke: var(--vivi-ok); background: var(--vivi-ok); fill: var(--vivi-ok); }
    .vivi-wm-seg--5 { stroke: var(--vivi-warn); background: var(--vivi-warn); fill: var(--vivi-warn); }
    .vivi-wm-seg--6 { stroke: var(--vivi-muted-vlak); background: var(--vivi-muted-vlak); fill: var(--vivi-muted-vlak); }

    /* Staafjes en trendlijn. */
    .vivi-wm-staafjes { width: 100%; height: 8.5rem; margin-top: var(--vivi-ruimte-m); }
    .vivi-wm-staaf { fill: var(--vivi-gold); }
    .vivi-wm-staaf--leeg { fill: var(--vivi-line); }
    .vivi-wm-staaf__label { font-size: 3.5px; fill: var(--vivi-muted); }
    .vivi-wm-trend { width: 100%; height: 8.5rem; margin-top: var(--vivi-ruimte-m); }
    .vivi-wm-trend__lijn { fill: none; stroke: var(--vivi-gold); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }

    /* Bronnenlijst en doorkliklinks. */
    .vivi-wm-bron { display: flex; align-items: baseline; gap: var(--vivi-ruimte-s); }
    .vivi-wm-bron > .vivi-regel { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .vivi-wm-bron > .vivi-meta, .vivi-wm-bron > .vivi-pill { margin-left: auto; flex: none; }
    .vivi-wm-meer { text-decoration: underline; text-underline-offset: 2px; }

    /* Vanaf 1280 gaat het dashboard breed: kop 2-koloms, grafieken 5-koloms
       (met de klant-donut erbij), personen 4-koloms. Daaronder stapelt alles
       en mag er gescrold worden. */
    @media (min-width: 1280px) {
        .vivi-wm-kop { grid-template-columns: 2fr 3fr; }
        .vivi-wm-grafieken { grid-template-columns: repeat(5, 1fr); }
        .vivi-wm-personen { grid-template-columns: repeat(4, 1fr); }
        /* Vijf kaarten naast elkaar maakt ze smaller; de donut een maat
           kleiner zodat de legenda leesbaar blijft. */
        .vivi-wm-grafieken .vivi-wm-donut { width: 6rem; height: 6rem; }
    }
    @media (min-width: 640px) and (max-width: 1279.98px) {
        .vivi-wm-grafieken, .vivi-wm-personen { grid-template-columns: repeat(2, 1fr); }
    }

    /* =========================================================
       Taakbriefing (x-vivi.taak-briefing): de detailpagina van één
       taak in admin, teampaneel en straks de publieke deellink.
       Bewust eigen klassen naast .vivi-taken__*: die laatste zijn
       gemaakt voor de donkere heldkaart en zijn cream-op-cream
       zodra je ze op een lichte kaart zet.
       ========================================================= */
    .vivi-brief { display: flex; flex-direction: column; gap: var(--vivi-ruimte-l); min-width: 0; }
    .vivi-brief__kop { display: flex; flex-wrap: wrap; gap: var(--vivi-ruimte-xs); }
    .vivi-brief__meta { margin-top: calc(var(--vivi-ruimte-s) * -1); }

    /* Elk blok krijgt een label boven de inhoud. De uitvoerder scant de
       labels en springt naar het blok dat hij nodig heeft; daarom staan ze
       klein en in kapitalen, net als .vivi-kicker elders. */
    .vivi-brief__blok { display: flex; flex-direction: column; gap: var(--vivi-ruimte-xs); min-width: 0; }
    .vivi-brief__label {
        font-size: var(--vivi-tekst-xs); font-weight: 800; letter-spacing: .1em;
        text-transform: uppercase; color: var(--vivi-muted); margin: 0;
    }

    /* Doel en kernboodschap zijn de twee regels waarop een uitvoerder kan
       beginnen; die krijgen als enige extra gewicht. De rest is gewone tekst,
       anders schreeuwt de hele pagina en leest niemand meer iets. */
    .vivi-brief__doel {
        font-family: var(--vivi-serif); font-size: var(--vivi-tekst-l); font-weight: 600;
        line-height: 1.45; color: var(--vivi-ink); margin: 0; overflow-wrap: anywhere;
    }
    .vivi-brief__kern {
        font-size: var(--vivi-tekst-m); line-height: 1.6; margin: 0; overflow-wrap: anywhere;
        padding-left: var(--vivi-ruimte-m); border-left: 3px solid var(--vivi-gold);
    }
    .vivi-brief__tekst { font-size: var(--vivi-tekst-m); line-height: 1.6; margin: 0; overflow-wrap: anywhere; }

    .vivi-brief__lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--vivi-ruimte-s); }
    .vivi-brief__punt {
        display: flex; align-items: flex-start; gap: var(--vivi-ruimte-s);
        font-size: var(--vivi-tekst-m); line-height: 1.55; overflow-wrap: anywhere;
    }
    .vivi-brief__punt--niet { color: var(--vivi-fout); }
    .vivi-brief__vink {
        flex: none; width: 1.05rem; height: 1.05rem; margin-top: .15rem;
        display: inline-flex; align-items: center; justify-content: center;
        border: 1px solid var(--vivi-line-strong); border-radius: var(--vivi-radius-xs);
        color: var(--vivi-ok);
    }
    /* Afgevinkt zit in het vakje, niet in de tekstkleur. Gemeten 06-08-2026:
       --vivi-muted op wit haalt 3.98:1 en dat is onder de 4.5 die leesbare
       tekst hoort te halen. Een beat die af is moet je nog steeds kunnen
       lezen; doorstrepen maakt er bovendien een fout van, en dat is het niet. */
    .vivi-brief__vink--klaar { background: var(--vivi-ok); border-color: var(--vivi-ok); color: var(--vivi-cream-2); }
    .vivi-brief__vink svg { width: .8rem; height: .8rem; }

    /* De waarom-regel staat onder de link en niet ernaast: naast elkaar wordt
       hij op mobiel afgekapt en juist dat waarom is de instructie. */
    .vivi-brief__referentie { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .vivi-brief__referentie a { overflow-wrap: anywhere; }
    /* Inkt en geen muted: dit is de instructie zelf, niet het bijschrift. */
    .vivi-brief__waarom { font-size: var(--vivi-tekst-m); color: var(--vivi-ink); line-height: 1.55; }

    .vivi-brief__bron { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .vivi-brief__bronlabel { font-size: var(--vivi-tekst-m); font-weight: 600; }
    /* Een pad moet je letterlijk kunnen overtypen, dus vol contrast en
       selecteerbaar in één klik. */
    .vivi-brief__bronpad {
        font-size: var(--vivi-tekst-s); color: var(--vivi-ink);
        overflow-wrap: anywhere; user-select: all;
    }

    /* Melding bij een lege of halve briefing: amber, want dit vraagt aandacht
       maar er is nog niets stuk. */
    .vivi-brief__melding {
        margin: 0; padding: var(--vivi-ruimte-s) var(--vivi-ruimte-m);
        border-radius: var(--vivi-radius-m); border: 1px solid var(--vivi-line);
        background: rgba(235, 178, 46, .16);
        font-size: var(--vivi-tekst-s); color: var(--vivi-ink);
    }

    .vivi-brief__beschrijving { font-size: var(--vivi-tekst-m); line-height: 1.6; white-space: pre-line; overflow-wrap: anywhere; }
    .vivi-brief__veld { margin-top: var(--vivi-ruimte-xs); }
    .vivi-brief__veld:first-child { margin-top: 0; }
    .vivi-brief__veldlabel { font-weight: 700; }
    .vivi-brief__vrijtekst { margin-top: var(--vivi-ruimte-xs); }
    .vivi-brief__vrijtekst:first-child { margin-top: 0; }
    .vivi-brief__beschrijving a { text-decoration: underline; text-underline-offset: 2px; }

    /* Draaiboek: de shootvelden binnen dezelfde briefing. Geen eigen kleur en
       geen eigen kaart, want het is geen ander document; het zijn drie blokken
       extra in hetzelfde blad. */
    .vivi-draaiboek__strip {
        margin: 0; display: grid; gap: var(--vivi-ruimte-xs) var(--vivi-ruimte-l);
        grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    }
    .vivi-draaiboek__paar { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .vivi-draaiboek__paar dt { font-size: var(--vivi-tekst-xs); color: var(--vivi-muted); }
    .vivi-draaiboek__paar dd { margin: 0; font-size: var(--vivi-tekst-m); overflow-wrap: anywhere; }
    .vivi-draaiboek__crew { margin-top: var(--vivi-ruimte-s); }

    .vivi-draaiboek__shots {
        list-style: none; margin: 0; padding: 0;
        display: flex; flex-direction: column; gap: var(--vivi-ruimte-m);
    }
    .vivi-draaiboek__shot { display: flex; align-items: flex-start; gap: var(--vivi-ruimte-s); min-width: 0; }
    /* Een gedraaid shot vervaagt maar verdwijnt niet: op de set moet je nog
       kunnen terugkijken wat je al hebt en hoe je het deed. */
    .vivi-draaiboek__shot--klaar .vivi-draaiboek__nr { background: var(--vivi-ok); border-color: var(--vivi-ok); color: var(--vivi-cream-2); }
    .vivi-draaiboek__nr {
        flex: none; width: 1.6rem; height: 1.6rem;
        display: inline-flex; align-items: center; justify-content: center;
        border: 1px solid var(--vivi-line-strong); border-radius: var(--vivi-radius-xs);
        font-size: var(--vivi-tekst-xs); font-weight: 700;
    }
    .vivi-draaiboek__inhoud { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .vivi-draaiboek__hoe { font-size: var(--vivi-tekst-m); line-height: 1.55; overflow-wrap: anywhere; }
    /* Wat er gezegd wordt krijgt de goudlijn van een citaat: op de set lees je
       dit voor, en dan moet het los staan van de regie-aanwijzing erboven. */
    .vivi-draaiboek__tekst {
        margin: var(--vivi-ruimte-2xs) 0 0; padding-left: var(--vivi-ruimte-s);
        border-left: 2px solid var(--vivi-gold);
        font-size: var(--vivi-tekst-m); line-height: 1.55; overflow-wrap: anywhere;
    }

    /* Updates onder de briefing (x-vivi.taak-updates), lichte variant van de
       stille regels op de heldkaart. */
    .vivi-brief__update { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .vivi-brief__update-kop { font-size: var(--vivi-tekst-xs); color: var(--vivi-muted); }
    .vivi-brief__update-body {
        font-size: var(--vivi-tekst-s); line-height: 1.55;
        white-space: pre-line; overflow-wrap: anywhere;
    }

    /* Wachtrij-regel op het teamdashboard: nu een link naar de briefing.
       Blok-display zodat de hele regel een tapdoel is, geen kleurverandering
       zodat de rustige lijst rustig blijft. */
    .vivi-brief__rij { display: block; color: inherit; text-decoration: none; }
    .vivi-brief__rij:hover .vivi-regel { text-decoration: underline; text-underline-offset: 2px; }

    /* Deellinkkaart op de admin-taakpagina. De url blijft zichtbaar naast de
       knop: je wilt kunnen zien welke link je kopieert voordat je hem in een
       mail plakt. Op smal scherm valt hij onder de knop in plaats van het
       blok open te breken; een token van 32 tekens breekt anders alles. */
    .vivi-deellink {
        display: flex; align-items: center; flex-wrap: wrap;
        gap: var(--vivi-ruimte-xs); margin-top: var(--vivi-ruimte-2xs);
    }
    .vivi-deellink__url { min-width: 0; overflow-wrap: anywhere; }
    .vivi-deellink [x-cloak] { display: none !important; }

    /* =========================================================
       Publieke deellink (/opdracht/{token}): de briefingpagina voor een
       externe zonder account. Fase 2 van het taakbriefingen-bouwplan.

       Deze pagina staat buiten de Filament-panelen, dus .fi-body bestaat
       hier niet en daarmee ook het lettertype en de achtergrond niet. Die
       staan daarom expliciet op .vivi-deel; verder is het dezelfde stijllaag
       als binnen, want een externe hoort precies te zien wat wij zien.

       Er is ook geen Tailwind-preflight op deze pagina: de marges van de
       browser op h1/h2/p/ul zijn er dus wél. Vandaar de kleine reset.
       ========================================================= */
    .vivi-deel {
        margin: 0; min-height: 100vh;
        font-family: 'Poppins', 'Inter', sans-serif;
        background: var(--vivi-cream); color: var(--vivi-ink);
    }
    .vivi-deel *, .vivi-deel *::before, .vivi-deel *::after { box-sizing: border-box; }
    .vivi-deel h1, .vivi-deel h2, .vivi-deel h3, .vivi-deel p, .vivi-deel ul { margin: 0; }
    .vivi-deel ul { padding: 0; }

    /* Eén leeskolom. Breder dan de formulierkaart van /offerte (480px): een
       briefing is lopende tekst met lijsten en die knelt daaronder. */
    .vivi-deel__blad {
        max-width: 46rem; margin: 0 auto;
        padding: var(--vivi-ruimte-xl) var(--vivi-ruimte-l) var(--vivi-ruimte-2xl);
        display: flex; flex-direction: column; gap: var(--vivi-ruimte-l);
    }

    .vivi-deel__kop { display: flex; flex-direction: column; gap: var(--vivi-ruimte-2xs); }
    .vivi-deel__merk { display: flex; }
    .vivi-deel__titel { font-family: var(--vivi-serif); font-size: var(--vivi-kop-m); font-weight: 700; line-height: 1.2; }
    .vivi-deel__voor { font-size: var(--vivi-tekst-m); color: var(--vivi-muted); }

    /* Terugmelding na een actie. Groen bestaat hier bewust niet: een claim is
       geen prestatie, alleen een bevestiging dat het is aangekomen. */
    .vivi-deel__melding {
        font-size: var(--vivi-tekst-m); line-height: 1.55;
        padding: var(--vivi-ruimte-s) var(--vivi-ruimte-m);
        border-radius: var(--vivi-radius-m);
        background: var(--vivi-cream-2); border: 1px solid var(--vivi-line);
    }
    .vivi-deel__melding--fout { background: var(--vivi-fout-vlak); border-color: transparent; color: var(--vivi-fout); }

    /* De knoppenrij onder de briefing. Op telefoon vol breed: dit is het enige
       wat de externe hier moet kunnen doen. */
    .vivi-deel__acties { display: flex; flex-wrap: wrap; gap: var(--vivi-ruimte-s); }
    .vivi-deel__acties form { margin: 0; }
    @media (max-width: 639.98px) {
        .vivi-deel__acties, .vivi-deel__acties form { width: 100%; }
        .vivi-deel__acties .vivi-btn { width: 100%; justify-content: center; }
    }

    /* Wie de taak heeft, in één regel boven de knoppen. */
    .vivi-deel__claim { font-size: var(--vivi-tekst-m); color: var(--vivi-muted); }

    /* Lijstlink naar één taak binnen een klant-deellink. De scheiding zit op de
       rij zelf en niet in een los element: een lijst zonder JS mag geen lege
       divs nodig hebben om leesbaar te blijven. */
    .vivi-deel__rij { display: block; padding: var(--vivi-ruimte-xs) 0; color: inherit; text-decoration: none; }
    .vivi-deel__rij + .vivi-deel__rij { border-top: 1px solid var(--vivi-line); }
    .vivi-deel__rij:hover .vivi-regel { text-decoration: underline; text-underline-offset: 2px; }
    .vivi-deel__voet { font-size: var(--vivi-tekst-s); color: var(--vivi-muted); }
    .vivi-deel__voet a { text-decoration: underline; }

    /* Callsheet van één ontvanger (fase 1): call en wrap groot naast elkaar,
       de bevestigknop over de volle breedte. */
    .vivi-deel__tijden { display: grid; grid-template-columns: 1fr 1fr; gap: var(--vivi-ruimte-m); text-align: center; }
    .vivi-deel__tijd { font-size: var(--vivi-kop-l); font-weight: 700; line-height: 1.1; }
    /* Een button erft de letter niet van de browser (Arial op de render van
       23-10); de bevestigknop is een duim op de set, dus 44px. */
    .vivi-deel button { font-family: inherit; }
    .vivi-deel__vol { width: 100%; justify-content: center; min-height: 44px; font-size: var(--vivi-tekst-m); }
    /* Bel- en maillinks in inkt, niet in browserblauw. */
    .vivi-deel a:not(.vivi-btn) { color: var(--vivi-ink); text-underline-offset: 2px; }
    /* Route-knop op de callsheet: een duim op de set, dus minstens 44px hoog. */
    .vivi-deel__route { min-height: 44px; align-items: center; text-decoration: none; margin-top: var(--vivi-ruimte-xs); margin-bottom: var(--vivi-ruimte-s); }

    /* Reageren op een taak: het gesprek en het antwoordveld, 08-09-2026.
       Eén set klassen voor twee plekken: de deellink (zonder Tailwind-reset)
       en de portaalpagina Taken (mét). Daarom staan font en rand expliciet:
       op de deellink erft een textarea anders het systeemfont van de browser.
       Alle maten en kleuren komen als token uit 01-tokens.css. */
    .vivi-gesprek { display: flex; flex-direction: column; gap: var(--vivi-ruimte-s); }
    .vivi-gesprek__bericht { padding: var(--vivi-ruimte-s) var(--vivi-ruimte-m); border-radius: var(--vivi-radius-m); background: var(--vivi-cream-2); border: 1px solid var(--vivi-line); }
    .vivi-gesprek__bericht--klant { border-color: var(--vivi-gold); }
    .vivi-gesprek__wie { display: flex; flex-wrap: wrap; gap: var(--vivi-ruimte-xs); font-size: var(--vivi-tekst-s); color: var(--vivi-muted); margin-bottom: var(--vivi-ruimte-2xs); }
    .vivi-gesprek__tekst { font-size: var(--vivi-tekst-m); line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; }
    .vivi-gesprek__tekst a { text-decoration: underline; text-underline-offset: 2px; }
    .vivi-gesprek__bijlage { display: inline-flex; align-items: center; gap: var(--vivi-ruimte-2xs); margin-top: var(--vivi-ruimte-2xs); font-size: var(--vivi-tekst-s); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; color: inherit; }
    .vivi-gesprek__leeg { font-size: var(--vivi-tekst-s); color: var(--vivi-muted); }

    .vivi-reactie { display: flex; flex-direction: column; gap: var(--vivi-ruimte-s); margin: 0; }
    .vivi-reactie__kop { font-family: var(--vivi-serif); font-size: var(--vivi-tekst-l); font-weight: 700; margin: 0; }
    .vivi-reactie__label { display: block; font-size: var(--vivi-tekst-s); font-weight: 600; margin-bottom: var(--vivi-ruimte-2xs); }
    .vivi-reactie__veld { display: block; width: 100%; min-height: 6rem; box-sizing: border-box; padding: var(--vivi-ruimte-s) var(--vivi-ruimte-m); border-radius: var(--vivi-radius-m); border: 1px solid var(--vivi-line); background: var(--vivi-cream-2); color: var(--vivi-ink); font: inherit; font-size: var(--vivi-tekst-m); line-height: 1.5; resize: vertical; }
    .vivi-reactie__veld:focus { outline: none; border-color: var(--vivi-gold); box-shadow: var(--vivi-ring-focus); }
    .vivi-reactie__bestand { display: block; max-width: 100%; font: inherit; font-size: var(--vivi-tekst-s); color: var(--vivi-ink); }
    .vivi-reactie__hint { font-size: var(--vivi-tekst-s); color: var(--vivi-muted); margin: var(--vivi-ruimte-2xs) 0 0; }
    .vivi-reactie__fout { font-size: var(--vivi-tekst-s); color: var(--vivi-fout); margin: var(--vivi-ruimte-2xs) 0 0; }
    .vivi-reactie__acties { display: flex; flex-wrap: wrap; gap: var(--vivi-ruimte-s); align-items: center; }
    .vivi-reactie__acties form { margin: 0; }

    /* Eén open taak op de portaalpagina en op de deellink: kop, deadline,
       briefing, gesprek, knoppen. De kaart zelf is .vivi-card; dit is alleen
       de binnenkant. */
    .vivi-taak { display: flex; flex-direction: column; gap: var(--vivi-ruimte-m); }
    .vivi-taak__deadline { font-size: var(--vivi-tekst-s); color: var(--vivi-muted); margin: 0; }
    .vivi-taak__tekst { font-size: var(--vivi-tekst-m); line-height: 1.6; }
    .vivi-taak__tekst p { margin: 0 0 var(--vivi-ruimte-xs); }
    .vivi-taak__label { font-weight: 600; }
    .vivi-taak__kopje { font-size: var(--vivi-tekst-s); font-weight: 600; color: var(--vivi-muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: var(--vivi-ruimte-xs); }

    /* =========================================================
       Het geldscherm onder Financiën (/financieel), 11-08-2026.
       De kop noemt het woord met hoofdletter F bewust niet: deze laag wordt
       inline in de <head> van élke adminpagina gezet, en tests/Feature/
       HubDetailTest.php controleert dat dat woord niet opduikt bij een lead
       zonder facturen. Een CSS-commentaar dat een test breekt is commentaar
       dat verandert, geen test die verandert.
       Alles wat dit scherm nodig heeft staat hier en niet in de blade: een
       nieuw scherm begint bij nul inline-styles (tests/Ontwerp/OntwerpschuldTest).
       Elke maat komt uit de schaal in 01-tokens.css; de enige eigen getallen
       zijn de SVG-coördinaten, en die horen bij de grafiek en niet bij de stijl.
       ========================================================= */
    .vivi-fin__jaar { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--vivi-ruimte-xl); }
    .vivi-fin__intro { margin-top: var(--vivi-ruimte-s); font-size: var(--vivi-tekst-m); color: var(--vivi-muted); max-width: 36rem; }
    .vivi-fin__jaarcijfer { text-align: right; }
    .vivi-fin__jaarcijfer .vivi-stat__value { font-size: var(--vivi-kop-l); }
    .vivi-fin__rooster { margin-top: var(--vivi-ruimte-xl); }
    .vivi-fin__blok { margin-top: var(--vivi-ruimte-xl); }
    .vivi-fin__kop { display: flex; align-items: baseline; justify-content: space-between; gap: var(--vivi-ruimte-l); margin-bottom: var(--vivi-ruimte-m); }
    .vivi-fin__noot { margin-top: var(--vivi-ruimte-s); font-size: var(--vivi-tekst-s); color: var(--vivi-muted); }
    .vivi-fin__noot--fout { color: var(--vivi-fout); font-weight: 600; }
    .vivi-fin__link { font-size: var(--vivi-tekst-s); color: var(--vivi-muted); text-decoration: underline; text-underline-offset: 2px; }
    .vivi-fin__link--stil { text-decoration: none; }

    /* Legenda bij de grafiek: twee vlakjes met dezelfde vulling als de staven. */
    .vivi-fin__legenda { font-size: var(--vivi-tekst-s); color: var(--vivi-muted); display: inline-flex; align-items: center; gap: var(--vivi-ruimte-xs); }
    .vivi-fin__vlak { display: inline-block; width: .6rem; height: .6rem; border-radius: var(--vivi-radius-xs); }
    .vivi-fin__vlak--omzet { background: var(--vivi-gold); }
    .vivi-fin__vlak--kosten { background: var(--vivi-muted-vlak); }

    /* De staafgrafiek. De maten in het viewBox-stelsel staan in de blade omdat
       ze uit de cijfers volgen; kleur en typografie horen hier. */
    .vivi-fin__grafiek { display: block; width: 100%; height: auto; }
    .vivi-fin__as { stroke: var(--vivi-line); stroke-width: 1; }
    .vivi-fin__staaf--omzet { fill: var(--vivi-gold); }
    .vivi-fin__staaf--kosten { fill: var(--vivi-muted-vlak); }
    .vivi-fin__maandlabel { font-family: var(--vivi-serif); font-size: var(--vivi-tekst-xs); fill: var(--vivi-muted); }

    /* Maandtabel. Beide omzetbronnen naast elkaar, dus hij mag breed zijn en
       binnen zijn eigen kader schuiven in plaats van de pagina mee te trekken. */
    .vivi-fin__tabelwrap { overflow-x: auto; margin-top: var(--vivi-ruimte-l); }
    .vivi-fin__tabel { width: 100%; border-collapse: collapse; min-width: 34rem; font-size: var(--vivi-tekst-m); }
    .vivi-fin__tabel thead tr { background: var(--vivi-cream-2); text-align: left; }
    .vivi-fin__tabel th { padding: var(--vivi-ruimte-s) var(--vivi-ruimte-l); font-size: var(--vivi-tekst-s); font-weight: 600; color: var(--vivi-muted); }
    .vivi-fin__tabel td { padding: var(--vivi-ruimte-s) var(--vivi-ruimte-l); color: var(--vivi-muted); }
    .vivi-fin__tabel tbody tr { border-top: 1px solid var(--vivi-line); }
    .vivi-fin__getal { text-align: right; white-space: nowrap; }
    .vivi-fin__nadruk { color: var(--vivi-ink); font-weight: 600; }
    .vivi-fin__negatief { color: var(--vivi-fout); font-weight: 600; }

    /* Herkomststrip: pil links, naam en toelichting rechts. */
    .vivi-fin__bron { flex: 1; min-width: 0; }
    .vivi-fin__bronnaam { font-size: var(--vivi-tekst-m); font-weight: 600; color: var(--vivi-ink); }
    .vivi-fin__bronmeta { font-size: var(--vivi-tekst-s); color: var(--vivi-muted); }
    .vivi-fin__brontoelichting { display: block; font-size: var(--vivi-tekst-s); color: var(--vivi-muted); }
    .vivi-fin__pil { flex: none; }
    .vivi-fin__datum { width: 5.5rem; flex: none; font-size: var(--vivi-tekst-s); color: var(--vivi-muted); }
    .vivi-fin__regel { flex: 1; min-width: 0; font-size: var(--vivi-tekst-m); font-weight: 500; }

    /* =========================================================
       Groei-scherm (S23): icoontegel, nudge- en bundelblok, kaartvoet.
       De hooks stonden al in groei.blade.php; hier de CSS erachter, gebouwd
       naar de gemeten mockup-spec (S12). Kleuren en maten via tokens.
       ========================================================= */

    /* Afgeronde vierkante icoontegel in plaats van de ronde avatar: geeft de
       dienstkaart een productgevoel. --goud voor de nudge-banner. Radius via
       --vivi-radius-m (12px), het dichtstbijzijnde token bij de .6rem uit de
       mockup; --vivi-radius bestaat niet als kaal token. */
    .vivi-icoontegel {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: none;
        width: 2.6rem;
        height: 2.6rem;
        border-radius: var(--vivi-radius-m);
        background: var(--vivi-cream-2);
        color: var(--vivi-ink);
        border: 1px solid rgba(43, 36, 25, .08);
    }
    .vivi-icoontegel--goud { background: var(--vivi-gold); border-color: var(--vivi-gold); }

    /* Nudge-banner: icoon bovenaan naast het tekstblok (de rij centreert
       standaard, hier bewust top), drie stats met een eigen ruimere gap. */
    .vivi-groei-nudge > .vivi-rij { align-items: flex-start; }
    .vivi-groei-nudge__tekst { flex: 1 1 auto; min-width: 0; }
    .vivi-groei-nudge__stats { gap: var(--vivi-ruimte-l); margin-top: var(--vivi-ruimte-2xs); }

    /* Het bundelblok: tekst links, prijs plus knop rechts uitgelijnd, zodat
       het als aanbod leest en niet als lopende tekst. */
    .vivi-groei-bundel > .vivi-rij { justify-content: space-between; align-items: flex-start; }
    .vivi-groei-bundel__tekst { flex: 1 1 60%; min-width: 0; }
    .vivi-groei-bundel__actie { align-items: flex-end; text-align: right; }

    /* Dienstkaarten in vivi-grid-3 hebben per rij gelijke hoogte; de
       aanvraagactie naar de onderkant duwen zodat de knoppen op één lijn
       staan bij ongelijke tekstlengte. */
    .vivi-groei-dienst { display: flex; flex-direction: column; }
    .vivi-groei-dienst > .vivi-stapel { flex: 1 1 auto; }
    .vivi-groei-dienst > .vivi-stapel > :last-child { margin-top: auto; }

    /* =========================================================
       Portaalgebruik-analytics (/beheer/portaalgebruik): dezelfde vorm als
       /analytics, maar hier per klasse in plaats van inline. Zo begint de
       nieuwe pagina op nul ontwerpschuld (OntwerpschuldTest); maten en
       kleuren komen uit de tokens, nooit uit een hex in de blade. De balk
       hergebruikt .vivi-bar, de actieve klantchip .vivi-chip--actief.
       ========================================================= */
    .vivi-pg { display: flex; flex-direction: column; gap: var(--vivi-ruimte-l); }
    .vivi-pg-kiezer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vivi-ruimte-s); }
    .vivi-pg-kiezer__label { font-size: var(--vivi-tekst-s); flex: none; }
    .vivi-pg-telling { opacity: .65; }
    .vivi-pg-empty__titel { margin-bottom: var(--vivi-ruimte-xs); }
    .vivi-pg-empty__tekst { font-size: var(--vivi-tekst-m); max-width: 30rem; margin: 0 auto; }
    .vivi-pg-kop { display: flex; align-items: baseline; justify-content: space-between; gap: var(--vivi-ruimte-l); }
    .vivi-pg-kop--los { margin-bottom: var(--vivi-ruimte-s); }
    .vivi-pg-periode { font-size: var(--vivi-tekst-s); }
    .vivi-pg-lijst { margin-top: var(--vivi-ruimte-xs); }
    .vivi-pg-leeg { font-size: var(--vivi-tekst-s); margin-top: var(--vivi-ruimte-s); }
    /* Ranglijst-nummer: het bestaande grote avatar, maar compacter. */
    .vivi-pg-rang { width: 1.9rem; height: 1.9rem; font-size: var(--vivi-tekst-xs); }
    .vivi-pg-naam { flex: 1; min-width: 0; }
    .vivi-pg-naamrij { display: flex; align-items: baseline; justify-content: space-between; gap: var(--vivi-ruimte-s); }
    .vivi-pg-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--vivi-tekst-m); font-weight: 500; }
    .vivi-pg-bar { margin-top: var(--vivi-ruimte-xs); }
    .vivi-pg-recent { gap: var(--vivi-ruimte-s); }
    .vivi-pg-recent__chip { flex: none; }
    .vivi-pg-recent__naam { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--vivi-tekst-s); }
    .vivi-pg-tijd { flex: none; font-size: var(--vivi-tekst-s); }

/* ==== UX-0 ==== */
    /* Kernpad (24-09-2026): websitekaart en aandachtblok op het dashboard.
       De rij van de websitekaart: tekst links, twee knoppen rechts; op smal
       vallen de knoppen onder de tekst in plaats van de naam weg te drukken. */
    .vivi-ux0-website__rij { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--vivi-ruimte-s); }
    .vivi-ux0-website__rij > .vivi-row__tekst { flex: 1 1 12rem; min-width: 0; }
    .vivi-ux0-website__knoppen { display: flex; flex: none; align-items: center; gap: var(--vivi-ruimte-xs); }
    /* Secundaire tekst in de twee kaarten: tekst-2 uit 09 (5,4 tot 5,7:1),
       niet de muted-kleur die .vivi-meta en .vivi-kicker uit 04 meenemen
       (3,98:1 op wit, onder AA). */
    body.fi-panel-portal .vivi-ux0 :is(.vivi-meta, .vivi-kicker, .vivi-page-sub) { color: var(--vivi-tekst-2); }
    @media (min-width: 1024px) {
        /* De mini's delen de kolomhoogte (flex: 1 in 03-basis). Met de
           websitekaart erbij zijn het er drie, en onder de hoogteklem kneep
           dat "Vraagt je aandacht" tot alleen zijn kop (gemeten 24-09-2026 op
           1440 breed). Dan krijgt elke kaart zijn eigen hoogte en scrollt de
           kolom als geheel; zonder websitekaart blijft 03-basis gelden. */
        .vivi-app__minis:has(> .vivi-ux0-website) { overflow-y: auto; scrollbar-width: thin; }
        .vivi-app__minis:has(> .vivi-ux0-website) > * { flex: 0 0 auto; }
    }
    @media (max-width: 639.98px) {
        /* 05-mobiel zet knoppen op 2.35rem (37,6px); het kernpad vraagt een
           tikdoel van minstens 44px op de knoppen die de klant hier indrukt. */
        .vivi-ux0 .vivi-btn { min-height: var(--vivi-tik-min); }
        .vivi-ux0 a.vivi-meta { display: inline-flex; align-items: center; min-height: var(--vivi-tik-min); }
    }
/* ==== UX-1 ==== */
/* ==== UX-2 ==== */
/* ==== UX-3 ==== */
/* ==== UX-4 ==== */
/* ==== UX-5 ==== */
    /* Tabrij van Website (UX-5, 08-10-2026): zes tabbladen passen op een
       telefoon niet op een regel, en afbreken gaf een rafelige rij van drie
       regels. De rij blijft daarom een regel en schuift zelf opzij; de pagina
       schuift niet mee. Het blad zet het actieve tabblad in beeld. De
       specificiteit moet boven .vivi-segment__item in 11 uitkomen. Geen
       negatieve buitenmarge: die liet de rij op 375 4px buiten het raster
       steken (H-089). Het eerste tabblad staat zo op de lijn van de kop. */
    body.fi-panel-portal .vivi-website-tabs {
        flex-wrap: nowrap;
        min-width: 0;
        padding-block: var(--vivi-ruimte-2xs);
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: thin;
    }
    body.fi-panel-portal .vivi-website-tabs .vivi-segment__item {
        flex: none;
        max-width: none;
        white-space: nowrap;
    }
    /* De focusrand van 11 staat 2px buiten de chip en wordt in een schuifrij
       aan de zijkant afgesneden. Hier staat hij binnen de chip: donker aan de
       rand, licht daarbinnen, zodat hij op een lichte en op de donkere actieve
       chip zichtbaar is. Elementselectors om boven 11 uit te komen. */
    body.fi-panel-portal nav.vivi-website-tabs a.vivi-segment__item:focus-visible {
        outline-offset: -2px;
        box-shadow: inset 0 0 0 4px var(--vivi-tekst-op-donker);
    }
/* ==== UX-6 ==== */
/* ==== UX-7 ==== */
/* ==== UX-8 ==== */
    /* ── Mijn website (25-09-2026): één dominant vlak met één hoofdactie, een
       smalle stappenkolom, en de onderdelen als rustige lijst. Verhouding volgt
       het moodboard: hoofdvlak ruim boven 55%, rechterkolom rond een kwart. */
    .vivi-website-status { color: var(--vivi-ok); font-weight: 500; }
    .vivi-website-status--wacht { color: var(--vivi-warn); }

    .vivi-website-kop { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: var(--vivi-ruimte-l); }
    .vivi-website-hoofd { display: flex; flex-direction: column; gap: var(--vivi-ruimte-s); }
    .vivi-website-hoofd__kop { font-size: var(--vivi-kop-m); font-weight: 500; letter-spacing: -.01em; }
    .vivi-website-hoofd__acties { display: flex; align-items: center; justify-content: flex-end; gap: var(--vivi-ruimte-l); margin-top: auto; padding-top: var(--vivi-ruimte-m); }
    .vivi-website-hoofd__acties .vivi-btn--primary { border-radius: var(--vivi-radius-pil); }
    .vivi-website-hoofd__acties .vivi-link { font-size: var(--vivi-tekst-m); }
    /* Op deze pagina is de pilknop het enige goud; de actieve klant in de wissel wordt een rustige omlijning. */
    .vivi-website .vivi-btn--primary[aria-pressed="true"] { background: transparent; color: var(--vivi-ink); border: 1px solid var(--vivi-line-strong); box-shadow: none; }
    .vivi-website-hoofd, .vivi-website-stappen, .vivi-website-delen { border-radius: 24px; }

    /* Andere talen (08-10-2026): per taal een regel met naam, eventueel "nog niet live", en twee gewone knoppen.
       Op 375px breekt de regel: de knoppen gaan onder de naam, nooit buiten beeld. */
    .vivi-website-talen { display: flex; flex-direction: column; gap: var(--vivi-ruimte-xs); padding-top: var(--vivi-ruimte-s); border-top: 1px solid var(--vivi-line); }
    .vivi-website-taal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--vivi-ruimte-xs) var(--vivi-ruimte-s); }
    .vivi-website-taal__naam { display: inline-flex; align-items: center; gap: var(--vivi-ruimte-xs); }
    .vivi-website-taal__knoppen { display: inline-flex; flex-wrap: wrap; gap: var(--vivi-ruimte-xs); }

    .vivi-website-melding { display: flex; align-items: center; gap: var(--vivi-ruimte-xs); font-size: var(--vivi-tekst-s); color: var(--vivi-ink); background: var(--vivi-cream-2); border-radius: var(--vivi-radius-m); padding: var(--vivi-ruimte-xs) var(--vivi-ruimte-s); align-self: flex-start; }
    .vivi-website-melding__icoon { width: 1rem; height: 1rem; color: var(--vivi-warn); flex: none; }

    .vivi-website-stappen { display: flex; flex-direction: column; gap: var(--vivi-ruimte-s); }
    .vivi-website-stappen__lijst { list-style: decimal; padding-left: 1.1rem; display: flex; flex-direction: column; gap: var(--vivi-ruimte-xs); font-size: var(--vivi-tekst-m); color: var(--vivi-ink); }

    .vivi-website-delen { display: flex; flex-direction: column; gap: 0; }
    .vivi-website-delen > .vivi-kicker { margin-bottom: var(--vivi-ruimte-xs); }
    .vivi-website-deel { display: flex; align-items: center; gap: var(--vivi-ruimte-m); padding: var(--vivi-ruimte-s) 0; border-top: 1px solid var(--vivi-line); list-style: none; cursor: default; }
    .vivi-website-deel::-webkit-details-marker { display: none; }
    .vivi-website-deel--link, summary.vivi-website-deel { cursor: pointer; }
    .vivi-website-deel__icoon { width: 2.25rem; height: 2.25rem; flex: none; display: grid; place-items: center; border-radius: var(--vivi-radius-m); background: var(--vivi-cream-2); }
    .vivi-website-deel__icoon svg { width: 1.1rem; height: 1.1rem; }
    .vivi-website-deel__tekst { flex: 1 1 auto; min-width: 0; }
    .vivi-website-deel__items { padding: 0 0 var(--vivi-ruimte-s) calc(2.25rem + var(--vivi-ruimte-m)); }

    @media (max-width: 1023.98px) {
        .vivi-website-kop { grid-template-columns: minmax(0, 1fr); }
        .vivi-website-deel__items { padding-left: 0; }
    }

    /* Werkverzoeken en weekoverzicht: verzoeken onder elkaar met een lijn
       ertussen, en ruimte boven de knoppen naar Verzoeken en Taken. */
    .vivi-wv + .vivi-wv { margin-top: var(--vivi-ruimte-l); padding-top: var(--vivi-ruimte-l); border-top: 1px solid var(--vivi-line); }
    .vivi-wv__verder { margin-top: var(--vivi-ruimte-l); }
    .vivi-wv__verder .vivi-btn { min-height: var(--vivi-tik-min, 44px); }
    /* Spoedknoppen zijn een noodroute: altijd de volle tikmaat, ook waar de
       mobiele knop kleiner is (gemeten 37 px op 375, 12-10-2026). */
    :is([data-rol="spoedknoppen"], [data-rol="spoed-bevestigen"]) .vivi-btn { min-height: var(--vivi-tik-min, 44px); }
    /* Smal scherm: het statuslabel zakt onder de titel, zodat een lange titel
       niet woord voor woord in een smalle kolom ernaast breekt. */
    @media (max-width: 639.98px) {
        .vivi-wv > .vivi-row { flex-direction: column; align-items: flex-start; gap: var(--vivi-ruimte-s); }
        .vivi-wv > .vivi-row > .vivi-row__tekst { width: 100%; min-width: 0; }
    }
    /* Eén regel (titel van een verzoek): zelfde veld, zonder de hoogte van een tekstvak. */
    .vivi-reactie__veld--regel { min-height: 0; resize: none; }

    /* ── Intake werkverzoek (06-10-2026): drie stappen in één kaart. Stap 1 vier
       soortkaarten met een regel uitleg, stap 2 de vragen van die soort met per
       vraag een hint, stap 3 de controle. Knoppen en keuzes zijn overal
       minstens een tikdoel hoog, ook op desktop: dit is het kernpad. */
    .vivi-intake { display: flex; flex-direction: column; gap: var(--vivi-ruimte-m); }
    .vivi-intake .vivi-stapbalk { margin-bottom: var(--vivi-ruimte-2xs); }
    .vivi-intake__knop { min-height: var(--vivi-tik-min, 44px); padding-inline: var(--vivi-ruimte-m); font-size: var(--vivi-tekst-m); }
    .vivi-intake__knop--spoed { border-color: var(--vivi-fout); color: var(--vivi-fout); background: transparent; }
    .vivi-intake__knop--spoed:hover { background: var(--vivi-fout-vlak); }

    .vivi-intake__soorten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--vivi-ruimte-s); }
    .vivi-intake__soort {
        position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--vivi-ruimte-2xs);
        min-height: 5.5rem; padding: var(--vivi-ruimte-m) calc(var(--vivi-ruimte-m) + 1.5rem) var(--vivi-ruimte-m) var(--vivi-ruimte-m);
        text-align: left; font: inherit; color: var(--vivi-ink); cursor: pointer;
        background: var(--vivi-cream-2); border: 1px solid var(--vivi-line); border-radius: var(--vivi-radius-l);
        transition: border-color .15s ease, box-shadow .15s ease;
    }
    .vivi-intake__soort:hover { border-color: var(--vivi-gold); box-shadow: var(--vivi-schaduw-rust); }
    .vivi-intake__soort:focus-visible { outline: none; border-color: var(--vivi-gold); box-shadow: var(--vivi-ring-focus); }
    .vivi-intake__soort-titel { font-size: var(--vivi-tekst-l); font-weight: 600; }
    .vivi-intake__soort-uitleg { font-size: var(--vivi-tekst-s); color: var(--vivi-tekst-2, var(--vivi-muted)); line-height: 1.45; }
    .vivi-intake__soort-pijl { position: absolute; right: var(--vivi-ruimte-m); top: 50%; width: 1.1rem; height: 1.1rem; transform: translateY(-50%); color: var(--vivi-gold); }

    .vivi-intake__spoed { display: flex; flex-direction: column; gap: var(--vivi-ruimte-xs); padding-top: var(--vivi-ruimte-s); border-top: 1px solid var(--vivi-line); }
    .vivi-intake__spoedregel { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--vivi-ruimte-s); font-size: var(--vivi-tekst-s); color: var(--vivi-tekst-2, var(--vivi-muted)); }
    .vivi-intake__spoedlink, .vivi-intake__weg {
        display: inline-flex; align-items: center; min-height: var(--vivi-tik-min, 44px); padding: 0;
        background: none; border: 0; font: inherit; font-weight: 600; color: var(--vivi-ink); cursor: pointer;
    }
    .vivi-intake__spoedlink { color: var(--vivi-fout); }

    .vivi-intake__vragen { gap: var(--vivi-ruimte-l); max-width: 44rem; }
    .vivi-intake__vraag { display: flex; flex-direction: column; gap: var(--vivi-ruimte-2xs); margin: 0; padding: 0; border: 0; min-width: 0; }
    .vivi-intake__vraag .vivi-reactie__label { font-size: var(--vivi-tekst-m); margin-bottom: 0; }
    .vivi-intake__hint { margin: 0 0 var(--vivi-ruimte-2xs); line-height: 1.45; }
    /* Geen losse woorden op de laatste regel ("is.", "volgorde." op 375). */
    .vivi-intake :is(.vivi-reactie__hint, .vivi-reactie__fout, .vivi-intake__soort-uitleg, .vivi-reactie__label) { text-wrap: pretty; }
    /* Geen marge links: breekt "(mag leeg)" af, dan begint de regel strak links; de spatie ervoor geeft de ruimte. */
    .vivi-intake__optioneel { font-weight: 400; font-size: var(--vivi-tekst-s); color: var(--vivi-tekst-2, var(--vivi-muted)); white-space: nowrap; }
    .vivi-intake__vraag .vivi-reactie__veld--regel { min-height: var(--vivi-tik-min, 44px); }

    .vivi-intake__keuzes { display: flex; flex-wrap: wrap; gap: var(--vivi-ruimte-xs); margin-top: var(--vivi-ruimte-2xs); }
    .vivi-intake__keuze { position: relative; display: inline-flex; cursor: pointer; }
    .vivi-intake__keuze input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
    .vivi-intake__keuze span {
        display: inline-flex; align-items: center; min-height: var(--vivi-tik-min, 44px); padding: 0 var(--vivi-ruimte-m);
        border: 1px solid var(--vivi-line-strong); border-radius: var(--vivi-radius-pil); background: var(--vivi-cream-2);
        font-size: var(--vivi-tekst-m); color: var(--vivi-ink);
    }
    .vivi-intake__keuze input:checked + span { background: var(--vivi-ink); border-color: var(--vivi-ink); color: var(--vivi-cream); }
    .vivi-intake__keuze input:focus-visible + span { box-shadow: var(--vivi-ring-focus); }
    .vivi-intake__datum { margin-top: var(--vivi-ruimte-xs); max-width: 16rem; }

    .vivi-intake__bestand { min-height: var(--vivi-tik-min, 44px); color: var(--vivi-tekst-2, var(--vivi-muted)); }
    .vivi-intake__bestand::file-selector-button {
        min-height: var(--vivi-tik-min, 44px); margin-right: var(--vivi-ruimte-s); padding: 0 var(--vivi-ruimte-m);
        border: 1px solid var(--vivi-line-strong); border-radius: var(--vivi-radius-pil); background: var(--vivi-cream-2);
        font: inherit; font-size: var(--vivi-tekst-m); font-weight: 600; color: var(--vivi-ink); cursor: pointer;
    }
    .vivi-intake__bestand:focus-visible { outline: none; }
    .vivi-intake__bestand:focus-visible::file-selector-button { box-shadow: var(--vivi-ring-focus); }
    .vivi-intake__bestanden { display: flex; flex-direction: column; gap: 0; margin: var(--vivi-ruimte-2xs) 0 0; padding: 0; list-style: none; }
    .vivi-intake__bestandregel { display: flex; align-items: center; gap: var(--vivi-ruimte-s); min-width: 0; border-top: 1px solid var(--vivi-line); }
    .vivi-intake__bestandregel:first-child { border-top: 0; }
    .vivi-intake__bestandnaam { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; font-size: var(--vivi-tekst-s); }
    .vivi-intake__controle .vivi-intake__bestandnaam { display: block; }
    a.vivi-intake__bestandnaam { display: inline-flex; align-items: center; min-height: var(--vivi-tik-min, 44px); }
    .vivi-intake__clip { width: 1rem; height: 1rem; flex: none; color: var(--vivi-muted); }

    .vivi-intake__acties { padding-top: var(--vivi-ruimte-s); border-top: 1px solid var(--vivi-line); justify-content: space-between; }

    .vivi-intake__controle { display: flex; flex-direction: column; gap: var(--vivi-ruimte-l); max-width: 44rem; }
    .vivi-intake__antwoorden { display: flex; flex-direction: column; margin: 0; }
    .vivi-intake__antwoord { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: var(--vivi-ruimte-m); padding: var(--vivi-ruimte-s) 0; border-top: 1px solid var(--vivi-line); }
    .vivi-intake__antwoord:first-child { border-top: 0; }
    .vivi-intake__antwoord dt { font-size: var(--vivi-tekst-s); color: var(--vivi-tekst-2, var(--vivi-muted)); }
    .vivi-intake__antwoord dd { margin: 0; font-size: var(--vivi-tekst-m); white-space: pre-line; overflow-wrap: anywhere; }
    .vivi-intake__antwoord dd.vivi-intake__dd-lijst { white-space: normal; }

    .vivi-intake__daarna-blok { padding: var(--vivi-ruimte-m); background: var(--vivi-cream-2); border-radius: var(--vivi-radius-l); }
    .vivi-intake__daarna { display: flex; flex-direction: column; gap: var(--vivi-ruimte-xs); margin: var(--vivi-ruimte-xs) 0 0; padding-left: 1.2rem; list-style: decimal; font-size: var(--vivi-tekst-m); line-height: 1.5; }

    .vivi-intake__ontvangen { display: flex; gap: var(--vivi-ruimte-m); align-items: flex-start; }
    .vivi-intake__ontvangen-tekst { display: flex; flex-direction: column; gap: var(--vivi-ruimte-s); min-width: 0; }
    .vivi-intake__vink { display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: var(--vivi-radius-rond); background: var(--vivi-ok); color: var(--vivi-cream); }
    .vivi-intake__vink svg { width: 1.3rem; height: 1.3rem; }
    .vivi-intake__titel-verzoek { margin: 0; font-size: var(--vivi-tekst-l); font-weight: 600; overflow-wrap: anywhere; }

    .vivi-intake__nu { margin: var(--vivi-ruimte-xs) 0 0; font-size: var(--vivi-tekst-s); color: var(--vivi-ink); }
    .vivi-intake__details { margin-top: var(--vivi-ruimte-xs); }
    .vivi-intake__details > summary { display: inline-flex; align-items: center; min-height: var(--vivi-tik-min, 44px); cursor: pointer; font-size: var(--vivi-tekst-s); font-weight: 600; list-style: none; }
    .vivi-intake__details > summary::-webkit-details-marker { display: none; }
    /* Zonder pijltje zag "Wat je ons vroeg" eruit als een kopje, niet als iets om open te klikken. */
    .vivi-intake__details > summary::after {
        content: ""; width: .45rem; height: .45rem; margin: -.2rem 0 0 var(--vivi-ruimte-xs);
        border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg);
    }
    .vivi-intake__details[open] > summary::after { margin-top: .25rem; transform: rotate(-135deg); }
    .vivi-intake__details .vivi-intake__antwoord { grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); }

    /* Slimme aanvraag (fase E, 17-10-2026): eerst in eigen woorden, dan het
       voorstel als een vlak dat leest als een antwoord van ons, met de twijfel
       apart gemarkeerd. "Of kies zelf" blijft eronder, de soortkaarten ongewijzigd. */
    .vivi-intake__aanvraag { gap: var(--vivi-ruimte-m); max-width: 44rem; }
    .vivi-intake__aanvraag .vivi-reactie__veld { min-height: 7.5rem; }
    .vivi-intake__voorstel {
        display: flex; flex-direction: column; gap: var(--vivi-ruimte-xs);
        padding: var(--vivi-ruimte-m); background: var(--vivi-cream-2);
        border: 1px solid var(--vivi-line); border-left: 3px solid var(--vivi-gold); border-radius: var(--vivi-radius-l);
    }
    .vivi-intake__voorstel > .vivi-taak__kopje { margin: 0; }
    .vivi-intake__voorstel .vivi-scherm__tekst { margin: 0; }
    .vivi-intake__voorstel-kopje { margin: var(--vivi-ruimte-xs) 0 0; font-size: var(--vivi-tekst-s); font-weight: 600; color: var(--vivi-tekst-2, var(--vivi-muted)); }
    .vivi-intake__voorstel-lijst { display: flex; flex-direction: column; gap: var(--vivi-ruimte-2xs); margin: 0; padding-left: 1.2rem; list-style: disc; font-size: var(--vivi-tekst-m); line-height: 1.5; }
    .vivi-intake__voorstel-lijst .vivi-intake__bestandnaam { font-weight: 600; }
    .vivi-intake__twijfel { padding: var(--vivi-ruimte-s); background: var(--vivi-cream); border-radius: var(--vivi-radius-m, var(--vivi-radius-l)); }
    .vivi-intake__twijfel .vivi-intake__voorstel-kopje { margin-top: 0; color: var(--vivi-ink); }
    .vivi-intake__twijfel .vivi-regel { margin: var(--vivi-ruimte-2xs) 0 0; }
    .vivi-intake__post { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--vivi-ruimte-s); padding-top: var(--vivi-ruimte-xs); border-top: 1px solid var(--vivi-line); }
    .vivi-intake__post .vivi-regel { margin: 0; }
    .vivi-intake__post .vivi-link, .vivi-intake__afwijking .vivi-link { display: inline-flex; align-items: center; min-height: var(--vivi-tik-min, 44px); font-weight: 600; }
    .vivi-intake__afwijking { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--vivi-ruimte-s); padding: var(--vivi-ruimte-xs) var(--vivi-ruimte-m); background: var(--vivi-cream-2); border-radius: var(--vivi-radius-l); }
    .vivi-intake__afwijking .vivi-regel { margin: 0; }
    .vivi-intake__zelf-kop { margin: var(--vivi-ruimte-s) 0 0; padding-top: var(--vivi-ruimte-m); border-top: 1px solid var(--vivi-line); }
    .vivi-intake :is(.vivi-intake__voorstel, .vivi-intake__afwijking, .vivi-intake__post) :is(p, li) { text-wrap: pretty; }
    /* Fase E: verwacht klaar. Een datum, rustig maar vindbaar, nooit uren. */
    .vivi-intake__verwacht {
        display: flex; flex-direction: column; gap: var(--vivi-ruimte-2xs); margin: var(--vivi-ruimte-s) 0 0;
        padding: var(--vivi-ruimte-s) var(--vivi-ruimte-m); background: var(--vivi-cream-2);
        border-left: 3px solid var(--vivi-gold); border-radius: var(--vivi-radius-l);
    }
    .vivi-intake__verwacht p { margin: 0; text-wrap: pretty; }
    .vivi-intake__verwacht-datum { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--vivi-ruimte-xs); font-size: var(--vivi-tekst-l); color: var(--vivi-ink); }
    .vivi-intake__verwacht-label { font-size: var(--vivi-tekst-m); color: var(--vivi-tekst-2, var(--vivi-muted)); }
    .vivi-intake__verwacht-krap { font-size: var(--vivi-tekst-m); color: var(--vivi-ink); }

    /* Beheer: de uitvoerprompt bij een werkverzoek, leesbaar en in één klik te kopiëren. */
    .vivi-uitvoerprompt {
        margin: 0; max-height: 32rem; overflow: auto; padding: var(--vivi-ruimte-m);
        background: var(--vivi-cream-2); border: 1px solid var(--vivi-line); border-radius: var(--vivi-radius-l);
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--vivi-tekst-s);
        line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--vivi-ink); cursor: copy;
    }

    @media (max-width: 639.98px) {
        .vivi-intake__soorten { grid-template-columns: minmax(0, 1fr); }
        .vivi-intake__soort { min-height: 0; }
        .vivi-intake__antwoord, .vivi-intake__details .vivi-intake__antwoord { grid-template-columns: minmax(0, 1fr); gap: var(--vivi-ruimte-2xs); }
        .vivi-intake__acties { flex-direction: column-reverse; align-items: stretch; }
        .vivi-intake__acties .vivi-btn { width: 100%; justify-content: center; }
        .vivi-intake__ontvangen { flex-direction: column; }
        /* 16px in een veld, anders zoomt iOS bij het tikken in en blijft de pagina vergroot staan. */
        .vivi-intake :is(.vivi-intake__vragen, .vivi-intake__aanvraag) .vivi-reactie__veld { font-size: var(--vivi-tekst-l); }
        /* Status boven de titel: naast elkaar kreeg de titel een smalle kolom van zeven regels. */
        .vivi-wv > .vivi-row { flex-direction: column-reverse; align-items: flex-start; gap: var(--vivi-ruimte-2xs); }
    }

    /* Mijn mailsortering (team en portaal): per mailbox een kaart, dan de
       beslissingen en de regels als rijen. Adressen en onderwerpen zijn lang
       en ongebroken, dus ze mogen overal breken; de knoppen rechts blijven
       bij elkaar en zakken op een smal scherm onder de tekst. */
    .vivi-mail__fout {
        margin: 0; padding: var(--vivi-ruimte-xs) var(--vivi-ruimte-s);
        border-radius: var(--vivi-radius-m);
        background: var(--vivi-fout-vlak); color: var(--vivi-fout);
        font-size: var(--vivi-tekst-s); overflow-wrap: anywhere;
    }
    .vivi-mail__gevaar { color: var(--vivi-fout); }
    .vivi-mail__afzender { margin: 0; min-width: 0; overflow-wrap: anywhere; }
    .vivi-mail__onderwerp { margin: 0; font-size: var(--vivi-tekst-s); overflow-wrap: anywhere; }
    .vivi-mail .vivi-row { align-items: flex-start; }
    .vivi-mail__beslissing-rechts { flex: none; justify-content: flex-end; }
    .vivi-mail__zoek { max-width: 28rem; }

    .vivi-mail__inventaris { border-top: 1px solid var(--vivi-line); padding-top: var(--vivi-ruimte-s); }
    .vivi-mail__inventaris-kop {
        display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--vivi-ruimte-s);
        cursor: pointer;
    }
    .vivi-mail__inventaris[open] .vivi-mail__inventaris-kop { margin-bottom: var(--vivi-ruimte-s); }
    .vivi-mail__inventaris-kolommen {
        display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
        gap: var(--vivi-ruimte-m); margin-top: var(--vivi-ruimte-s);
    }
    .vivi-mail__telling { list-style: none; margin: 0; padding: 0; }
    .vivi-mail__telling li {
        display: flex; justify-content: space-between; gap: var(--vivi-ruimte-s);
        padding: var(--vivi-ruimte-2xs) 0; font-size: var(--vivi-tekst-s);
    }

    @media (max-width: 639.98px) {
        .vivi-mail .vivi-row { flex-wrap: wrap; }
        .vivi-mail__beslissing-rechts { flex: 1 1 100%; justify-content: flex-start; }
    }

    /* Mail lezen (team en portaal). Boven de balk met box, map en zoeken.
       Breed staan de lijst en het bericht naast elkaar; onder 1024 na elkaar,
       en zolang er een bericht open is verdwijnt de lijst (data-open), met
       een knop terug. De mail zelf staat in een iframe met vaste hoogte, die
       scrolt binnen zichzelf. */
    .vivi-lees__balk {
        display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--vivi-ruimte-m);
    }
    .vivi-lees__keuze { display: flex; flex-direction: column; gap: var(--vivi-ruimte-2xs); flex: 1 1 12rem; min-width: 0; }
    .vivi-lees__label { font-size: var(--vivi-tekst-xs); color: var(--vivi-muted); }
    .vivi-lees__zoek { flex: 2 1 16rem; min-width: 0; }
    .vivi-lees__icoon { width: 1rem; height: 1rem; flex: none; vertical-align: -.15em; }

    .vivi-lees__vlak { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--vivi-ruimte-l); }
    .vivi-lees__lijst { display: flex; flex-direction: column; padding: var(--vivi-ruimte-xs); }
    .vivi-lees__item {
        display: flex; flex-direction: column; gap: var(--vivi-ruimte-2xs);
        width: 100%; text-align: left; padding: var(--vivi-ruimte-s) var(--vivi-ruimte-m);
        border-radius: var(--vivi-radius-m); border: 0; background: transparent; color: var(--vivi-ink);
        cursor: pointer;
    }
    .vivi-lees__item + .vivi-lees__item { border-top: 1px solid var(--vivi-line); }
    .vivi-lees__item:hover, .vivi-lees__item:focus-visible { background: var(--vivi-cream); outline: none; }
    .vivi-lees__item.is-open { background: var(--vivi-cream); }
    .vivi-lees__regel { display: flex; justify-content: space-between; align-items: baseline; gap: var(--vivi-ruimte-s); min-width: 0; }
    .vivi-lees__van { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--vivi-tekst-m); }
    .vivi-lees__tijd { flex: none; font-size: var(--vivi-tekst-xs); color: var(--vivi-muted); }
    .vivi-lees__onderwerp { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--vivi-tekst-s); }
    .vivi-lees__snippet {
        min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        font-size: var(--vivi-tekst-s); color: var(--vivi-muted);
    }
    .vivi-lees__item.is-ongelezen .vivi-lees__van,
    .vivi-lees__item.is-ongelezen .vivi-lees__onderwerp { font-weight: 600; }
    .vivi-lees__item.is-ongelezen .vivi-lees__van::before {
        content: ""; display: inline-block; width: .45rem; height: .45rem; margin-right: var(--vivi-ruimte-xs);
        border-radius: var(--vivi-radius-rond); background: var(--vivi-gold); vertical-align: .1em;
    }
    .vivi-lees__bladeren { display: flex; justify-content: space-between; gap: var(--vivi-ruimte-s); padding: var(--vivi-ruimte-s); }
    .vivi-lees__leeg { margin: 0; padding: var(--vivi-ruimte-l); color: var(--vivi-muted); font-size: var(--vivi-tekst-m); }

    .vivi-lees__bericht { display: flex; flex-direction: column; gap: var(--vivi-ruimte-m); min-width: 0; }
    .vivi-lees__terug { align-self: flex-start; }
    .vivi-lees__kop { display: flex; flex-direction: column; gap: var(--vivi-ruimte-2xs); min-width: 0; }
    .vivi-lees__titel { margin: 0 0 var(--vivi-ruimte-xs); font-size: var(--vivi-kop-s); line-height: 1.25; overflow-wrap: break-word; }
    .vivi-lees__meta { margin: 0; font-size: var(--vivi-tekst-s); overflow-wrap: break-word; }
    .vivi-lees__adres { color: var(--vivi-muted); }
    .vivi-lees__bijlagen {
        list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--vivi-ruimte-xs);
        font-size: var(--vivi-tekst-s);
    }
    .vivi-lees__bijlagen li { display: flex; min-width: 0; max-width: 100%; }
    .vivi-lees__bijlage {
        display: inline-flex; align-items: center; gap: var(--vivi-ruimte-xs); min-width: 0; max-width: 100%; min-height: 44px;
        padding: var(--vivi-ruimte-2xs) var(--vivi-ruimte-s); border: 1px solid var(--vivi-line); border-radius: var(--vivi-radius-pil);
        background: none; color: inherit; font: inherit; cursor: pointer;
    }
    .vivi-lees__bijlage:hover { border-color: currentColor; }
    .vivi-lees__bijlage:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
    .vivi-lees__bijlage[disabled] { opacity: .6; cursor: progress; }
    .vivi-lees__bijlagenaam { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .vivi-lees__bijlage .vivi-lees__adres { flex: none; white-space: nowrap; }
    .vivi-lees__beelden {
        display: flex; flex-wrap: wrap; align-items: center; gap: var(--vivi-ruimte-s); margin: 0;
        padding: var(--vivi-ruimte-xs) var(--vivi-ruimte-s); border-radius: var(--vivi-radius-m);
        background: var(--vivi-cream); font-size: var(--vivi-tekst-s);
    }
    .vivi-lees__html {
        width: 100%; height: 70vh; min-height: 24rem; border: 1px solid var(--vivi-line);
        border-radius: var(--vivi-radius-m); background: var(--vivi-cream);
    }
    .vivi-lees__tekst { white-space: pre-wrap; overflow-wrap: break-word; font-size: var(--vivi-tekst-m); line-height: 1.55; }

    /* Versturen: knoppen boven het bericht en het concept op de plek van het
       bericht. Het tekstveld volgt de pil-invoer in kleur en rand, maar met
       een gewone hoek, want het is hoog. */
    .vivi-lees__nieuw { flex: none; }
    .vivi-lees__acties { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vivi-ruimte-xs); }
    .vivi-lees__verplaats { display: flex; flex: 0 1 14rem; min-width: 0; }
    .vivi-lees__verplaats .vivi-select { width: 100%; }
    .vivi-lees__schrijf { display: flex; flex-direction: column; gap: var(--vivi-ruimte-m); min-width: 0; }
    .vivi-lees__veld { display: flex; flex-direction: column; gap: var(--vivi-ruimte-2xs); min-width: 0; }
    .vivi-lees__veld .vivi-input { width: 100%; }
    .vivi-lees__invoer {
        width: 100%; min-height: 16rem; font: inherit; font-size: var(--vivi-tekst-m); line-height: 1.55;
        padding: .6rem .75rem; border-radius: var(--vivi-radius-m); border: 1px solid var(--vivi-line-strong);
        background: color-mix(in srgb, var(--vivi-cream) 40%, white); color: var(--vivi-ink); resize: vertical;
    }
    .vivi-lees__invoer:focus { outline: none; border-color: var(--vivi-gold); box-shadow: var(--vivi-ring-focus); }
    .vivi-lees__veldfout { font-size: var(--vivi-tekst-s); color: var(--vivi-fout); }

    @media (min-width: 1024px) {
        .vivi-lees__vlak { grid-template-columns: minmax(18rem, 2fr) minmax(0, 3fr); align-items: start; }
        .vivi-lees__lijst { position: sticky; top: var(--vivi-ruimte-l); max-height: calc(100dvh - 8rem); overflow-y: auto; }
        .vivi-lees__terug { display: none; }
    }
    @media (max-width: 1023.98px) {
        .vivi-lees[data-open] .vivi-lees__lijst { display: none; }
        .vivi-lees:not([data-open]) .vivi-lees__bericht { display: none; }
        .vivi-lees__html { height: 65vh; }
    }

    /* =========================================================
       Social-pijplijn, shotlist en editinstructie (vivi-sl, vivi-ei).
       De shotlist: kop met klantkeuze en exports, filters, links de
       groepen per draaidag en locatie, rechts de dekking per reeks.
       Onder 640px stapelt de tabel tot kaarten per frame, met het
       kolomlabel uit data-label; geen horizontale scroll. De
       editinstructie leunt op de formulierklassen van vivi-pbh.
       Ook het dekkingslabel in de storyboard-editor staat hier.
       23-10-2026.
       ========================================================= */
    .vivi-pbh__frame-dekking { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; }
    .vivi-pbh__frame-dekking .vivi-meta { font-size: var(--vivi-tekst-xs); overflow-wrap: anywhere; }
    .vivi-pbh__editlink { margin: 0; }

    .vivi-sl { display: flex; flex-direction: column; gap: var(--vivi-ruimte-l); min-width: 0; }
    .vivi-sl__kop { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--vivi-ruimte-l); }
    .vivi-sl__kop-links { display: flex; flex-direction: column; gap: var(--vivi-ruimte-s); min-width: 0; flex: 1 1 auto; }
    .vivi-sl__intro { margin: 0; max-width: 46rem; }
    .vivi-sl__exports { display: flex; flex-wrap: wrap; gap: var(--vivi-ruimte-s); flex: 0 0 auto; }
    .vivi-sl__filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--vivi-ruimte-m); }
    .vivi-sl__filter { display: flex; flex-direction: column; gap: .3rem; min-width: 11rem; }
    .vivi-sl__raster { display: flex; flex-direction: column; gap: var(--vivi-ruimte-l); min-width: 0; }
    .vivi-sl__lijst { display: flex; flex-direction: column; gap: var(--vivi-ruimte-l); min-width: 0; }
    .vivi-sl__aantal { margin: 0; }
    .vivi-sl__groep { display: flex; flex-direction: column; gap: var(--vivi-ruimte-s); min-width: 0; max-width: 100%; overflow-x: auto; }
    .vivi-sl__groep-kop { margin: 0; font-family: var(--vivi-serif); font-size: var(--vivi-kop-s); font-weight: 700; color: var(--vivi-ink); overflow-wrap: anywhere; }
    .vivi-sl__groep-dag { margin: 0; overflow-wrap: anywhere; }
    .vivi-sl__tabel { width: 100%; border-collapse: collapse; font-size: var(--vivi-tekst-s); }
    .vivi-sl__tabel th { text-align: left; padding: .5rem .5rem; border-bottom: 1px solid var(--vivi-ink); font-size: var(--vivi-tekst-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--vivi-muted); }
    .vivi-sl__tabel td { padding: .55rem .5rem; border-bottom: 1px solid var(--vivi-line); vertical-align: top; color: var(--vivi-ink); }
    .vivi-sl__tabel tr.is-geschoten td { color: var(--vivi-muted); }
    .vivi-sl__tabel tr.is-geschoten .vivi-sl__beschrijving { text-decoration: line-through; }
    .vivi-sl__beschrijving { min-width: 11rem; overflow-wrap: anywhere; }
    .vivi-sl__reden { min-width: 9rem; }
    .vivi-sl__reden .vivi-meta { display: block; margin-top: .25rem; font-size: var(--vivi-tekst-xs); overflow-wrap: anywhere; }
    .vivi-sl__vink { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; }
    .vivi-sl__vink input { width: 1.1rem; height: 1.1rem; accent-color: var(--vivi-ink); }
    .vivi-sl__code { color: var(--vivi-ink); font-weight: 600; white-space: nowrap; text-decoration: underline; text-underline-offset: 2px; }
    .vivi-sl__dag-in { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
    .vivi-sl__dag { min-width: 7.5rem; }
    .vivi-sl__dekking { display: flex; flex-direction: column; gap: var(--vivi-ruimte-m); padding: var(--vivi-ruimte-m) var(--vivi-ruimte-l); }
    .vivi-sl__dekking-titel { margin: 0; font-family: var(--vivi-serif); font-size: var(--vivi-kop-s); font-weight: 700; color: var(--vivi-ink); }
    .vivi-sl__reeksen { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: var(--vivi-ruimte-m) var(--vivi-ruimte-l); }
    .vivi-sl__reeks { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
    .vivi-sl__reeks-kop { display: flex; justify-content: space-between; gap: var(--vivi-ruimte-s); font-size: var(--vivi-tekst-s); }
    .vivi-sl__reeks-kop span:first-child { overflow-wrap: anywhere; min-width: 0; }
    /* De balk per reeks: gedekt in groen, geschoten (beeld er, nog niet vrij
       in de beeldbank) in goud erachter, de rest is het spoor. Een SVG met
       breedtes in procenten, zodat er geen inline stijl nodig is. */
    .vivi-sl__balk { display: block; width: 100%; height: .5rem; border-radius: var(--vivi-radius-xs); overflow: hidden; }
    .vivi-sl__balk-spoor { fill: var(--vivi-line-strong); }
    .vivi-sl__balk-gedekt { fill: var(--vivi-ok); }
    .vivi-sl__balk-geschoten { fill: var(--vivi-gold); }
    .vivi-sl__legenda { display: flex; flex-wrap: wrap; gap: .3rem var(--vivi-ruimte-l); margin: 0; padding: 0; list-style: none; font-size: var(--vivi-tekst-xs); color: var(--vivi-muted); }
    .vivi-sl__legenda li { display: inline-flex; align-items: center; gap: var(--vivi-ruimte-xs); }
    .vivi-sl__stip { display: inline-block; width: .65rem; height: .65rem; border-radius: var(--vivi-radius-xs); }
    .vivi-sl__stip--gedekt { background: var(--vivi-ok); }
    .vivi-sl__stip--geschoten { background: var(--vivi-gold); }
    /* Het dekkingsblok is een details: de kop is de summary, met rechts een
       pijl die draait als het blok open is. */
    .vivi-sl__dekking-kop { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem var(--vivi-ruimte-m); cursor: pointer; list-style: none; padding-right: 1.5rem; position: relative; }
    .vivi-sl__dekking-kop::-webkit-details-marker { display: none; }
    .vivi-sl__dekking-kop::after { content: ""; position: absolute; right: .25rem; top: .45rem; width: .5rem; height: .5rem; border-right: 2px solid var(--vivi-muted); border-bottom: 2px solid var(--vivi-muted); transform: rotate(45deg); }
    .vivi-sl__dekking[open] > .vivi-sl__dekking-kop::after { transform: rotate(-135deg); top: .7rem; }
    .vivi-sl__dekking-kop:focus-visible { outline: none; box-shadow: var(--vivi-ring-focus); border-radius: var(--vivi-radius-xs); }
    .vivi-sl__dekking-samen { font-size: var(--vivi-tekst-s); }
    .vivi-sl__noot { margin: 0; padding-top: var(--vivi-ruimte-s); border-top: 1px solid var(--vivi-line); }
    .vivi-sl__davinci-lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
    .vivi-sl__davinci-rij { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vivi-ruimte-s) var(--vivi-ruimte-m); padding: var(--vivi-ruimte-s) 0; border-top: 1px solid var(--vivi-line); }
    .vivi-sl__davinci-rij:first-child { border-top: 0; }
    .vivi-sl__davinci-titel { flex: 1 1 12rem; min-width: 0; overflow-wrap: anywhere; }

    .vivi-ei__lijst { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: var(--vivi-ruimte-m); }
    .vivi-ei__item { display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; padding: var(--vivi-ruimte-m); color: var(--vivi-ink); text-decoration: none; }
    .vivi-ei__item:hover, .vivi-ei__item:focus-visible { border-color: var(--vivi-gold); }
    .vivi-ei__naam { font-weight: 600; overflow-wrap: anywhere; }
    .vivi-ei__dicht { display: flex; flex-direction: column; gap: var(--vivi-ruimte-s); padding: var(--vivi-ruimte-m) var(--vivi-ruimte-l); }
    .vivi-ei__dicht p { margin: 0; }
    .vivi-ei__knoppen { align-items: center; }
    .vivi-ei__davinci { display: flex; flex-direction: column; gap: var(--vivi-ruimte-s); padding: var(--vivi-ruimte-m) var(--vivi-ruimte-l); margin-top: var(--vivi-ruimte-m); }
    .vivi-ei__davinci p { margin: 0; }
    .vivi-ei__formaten { display: flex; flex-wrap: wrap; gap: var(--vivi-ruimte-s) var(--vivi-ruimte-m); border: 0; margin: 0; padding: 0; }
    .vivi-ei__formaten legend { width: 100%; margin-bottom: .3rem; }
    .vivi-ei__vink { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; }
    .vivi-ei__vink input { width: 1.1rem; height: 1.1rem; accent-color: var(--vivi-ink); }

    @media (max-width: 639.98px) {
        .vivi-sl__kop { flex-direction: column; align-items: stretch; }
        .vivi-sl__exports > .vivi-btn { flex: 1 1 auto; justify-content: center; }
        /* Compact boven de vouw: filters twee naast elkaar, het dekkingsblok dicht
           en kleiner, zodat de eerste frame-rij op 390 x 844 in beeld staat. */
        .vivi-sl { gap: var(--vivi-ruimte-m); }
        .vivi-sl__filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--vivi-ruimte-s); }
        .vivi-sl__filter { min-width: 0; }
        .vivi-sl__wis { grid-column: 1 / -1; }
        .vivi-sl__raster, .vivi-sl__lijst { gap: var(--vivi-ruimte-m); }
        .vivi-sl__dekking { padding: var(--vivi-ruimte-s) var(--vivi-ruimte-m); gap: var(--vivi-ruimte-s); }
        .vivi-sl__dekking-titel { font-size: var(--vivi-tekst-l); }
        .vivi-sl__tabel thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
        .vivi-sl__tabel, .vivi-sl__tabel tbody, .vivi-sl__tabel tr, .vivi-sl__tabel td { display: block; width: 100%; }
        .vivi-sl__tabel tr { padding: var(--vivi-ruimte-s) 0; border-bottom: 1px solid var(--vivi-line); }
        .vivi-sl__tabel td { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--vivi-ruimte-s); padding: .2rem 0; border-bottom: 0; }
        .vivi-sl__tabel td::before { content: attr(data-label); font-size: var(--vivi-tekst-xs); font-weight: 700; color: var(--vivi-muted); }
        .vivi-sl__beschrijving, .vivi-sl__reden { min-width: 0; }
        .vivi-sl__dag { min-width: 0; width: 100%; }
    }

    /* =========================================================
       Shoot-dashboard (plak 1, plan 25-10-2026): één shoot op de telefoon
       in vijf tegels met wat er open is, een knop Volgende en het detail
       van de gekozen tegel. Elke knop minstens 44 pixels hoog; op 375 breed
       twee tegels naast elkaar, niets breder dan het scherm.
       ========================================================= */
    .vivi-sd { display: flex; flex-direction: column; gap: var(--vivi-ruimte-m); min-width: 0; }
    .vivi-sd__terug { align-self: flex-start; min-height: 44px; }
    .vivi-sd__dagen .vivi-segment__item { display: inline-flex; align-items: center; min-height: 44px; }
    .vivi-sd__kop { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--vivi-ruimte-s); }
    .vivi-sd__dag { margin: 0; font-family: var(--vivi-serif); font-size: var(--vivi-kop-s); font-weight: 700; color: var(--vivi-ink); }
    .vivi-sd__stand { margin: 0; }
    .vivi-sd__tegels { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); gap: var(--vivi-ruimte-s); }
    .vivi-sd__tegel {
        display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; min-width: 0; min-height: 5.5rem;
        padding: .75rem .9rem; text-align: left; cursor: pointer;
        background: #fff; color: var(--vivi-ink); box-shadow: var(--vivi-schaduw-rust);
        border: 1px solid var(--vivi-line); border-radius: var(--vivi-radius-m);
    }
    .vivi-sd__tegel:focus-visible { outline: 2px solid var(--vivi-ink); outline-offset: 2px; }
    .vivi-sd__tegel.is-open { border-left: 4px solid var(--vivi-warn); }
    .vivi-sd__tegel.is-actief { border-color: var(--vivi-ink); box-shadow: inset 0 0 0 1px var(--vivi-ink); }
    .vivi-sd__tegel-titel { font-weight: 700; font-size: var(--vivi-tekst-m); }
    .vivi-sd__tegel-open { font-size: var(--vivi-tekst-s); }
    .vivi-sd__tegel-sam { font-size: var(--vivi-tekst-xs); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .vivi-sd__volgende { min-height: 44px; width: 100%; justify-content: center; }
    .vivi-sd__volgende:disabled { opacity: .6; cursor: default; }
    .vivi-sd__detail { min-width: 0; }
    .vivi-sd__sub { margin: var(--vivi-ruimte-m) 0 var(--vivi-ruimte-s); font-size: var(--vivi-tekst-s); font-weight: 700; color: var(--vivi-ink); }
    .vivi-sd__lijst { display: flex; flex-direction: column; margin: var(--vivi-ruimte-s) 0 0; padding: 0; list-style: none; }
    .vivi-sd__rij {
        display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--vivi-ruimte-s);
        min-height: 44px; padding: .5rem 0; border-bottom: 1px solid var(--vivi-line);
    }
    .vivi-sd__rij:last-child { border-bottom: 0; }
    .vivi-sd__rij--rood .vivi-sd__rij-tekst { color: var(--vivi-fout); font-weight: 700; }
    .vivi-sd__rij-tekst { display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; min-width: 0; flex: 1 1 12rem; overflow-wrap: break-word; }
    .vivi-sd__knoppen { display: flex; flex-wrap: wrap; gap: var(--vivi-ruimte-s); }
    .vivi-sd__knop { min-height: 44px; min-width: 44px; justify-content: center; }
    .vivi-sd__breed { width: 100%; margin-top: var(--vivi-ruimte-m); }
    .vivi-sd__noot { margin: var(--vivi-ruimte-m) 0 0; font-size: var(--vivi-tekst-xs); }

/* Galerijlaag: masonry, lightbox, selectie en covercards.
   Geknipt uit brand-head.blade.php bij de merge van feature/gallery-suite
   op origin/main (08-09-2026): main verplaatste alle CSS naar deze lagen,
   dus de galerij-CSS verhuist mee in plaats van terug de blade in. */
    /* ==== Galerij: masonry, lightbox, selectie ==== */

    /* --- Galerij: masonry op CSS-kolommen. Foto's houden hun eigen
           verhouding (geen 4/3-crop); kolommen vullen top-down, dat is de
           bewuste prijs voor masonry zonder JS. width/height-attributen op
           de img voorkomen layout-shift tijdens het laden. --- */
    .vivi-masonry { column-count: 2; column-gap: .8rem; }
    @media (min-width: 1024px) { .vivi-masonry { column-count: 3; } }
    @media (min-width: 1280px) { .vivi-masonry { column-count: 4; } }
    .vivi-masonry__item {
        position: relative; break-inside: avoid; margin-bottom: .8rem;
        border-radius: var(--vivi-radius-m); overflow: hidden;
        background: var(--vivi-cream-2); border: 1px solid var(--vivi-line);
    }
    .vivi-masonry__item > img { display: block; width: 100%; height: auto; cursor: zoom-in; }

    /* Ronde knopjes op een fototegel (favoriet, download). */
    .vivi-tile-actions { position: absolute; right: .5rem; top: .5rem; display: flex; gap: .35rem; }
    .vivi-tile-btn {
        display: inline-flex; align-items: center; justify-content: center;
        width: 2rem; height: 2rem; border-radius: var(--vivi-radius-pil); border: 0; cursor: pointer;
        font-size: var(--vivi-tekst-l); line-height: 1; background: rgba(255, 255, 255, .92);
        box-shadow: 0 2px 8px rgba(43, 36, 25, .18); color: var(--vivi-ink);
    }
    .vivi-tile-btn svg { width: .95rem; height: .95rem; }
    .vivi-tile-btn--fav { color: var(--vivi-muted); }
    .vivi-tile-btn--fav.on { color: #C2422F; }
    .vivi-tile-btn--tel { font-size: var(--vivi-tekst-xs); font-weight: 700; }

    /* --- Lightbox: schermvullende donkere overlay, puur Alpine (geen
           Livewire-rerender bij bladeren). Stage centreert de web-rendition,
           balk boven met naam + acties, pijlen links/rechts. --- */
    .vivi-lightbox { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; background: rgba(24, 20, 14, .95); }
    .vivi-lightbox__bar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .8rem 1.1rem; }
    .vivi-lightbox__title { font-size: var(--vivi-tekst-m); color: rgba(244, 241, 233, .78); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
    .vivi-lightbox__actions { display: flex; align-items: center; gap: .45rem; flex: none; }
    .vivi-lightbox__stage { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0 3.4rem .5rem; }
    /* Frame shrink-wrapt de foto exact, zodat pins in procenten kloppen.
       De max-height is bewust een vaste formule (schermhoogte minus balk en
       reactiepaneel): een inline-block ouder geeft de img geen hoogte-anker. */
    .vivi-lightbox__frame { position: relative; display: inline-block; max-width: 100%; }
    .vivi-lightbox__frame > img { display: block; max-width: 100%; max-height: calc(100dvh - 13rem); object-fit: contain; border-radius: var(--vivi-radius-s); }
    .vivi-pin {
        position: absolute; width: .95rem; height: .95rem; border-radius: var(--vivi-radius-pil);
        background: var(--vivi-gold); border: 2px solid #fff;
        box-shadow: 0 1px 6px rgba(0, 0, 0, .4); transform: translate(-50%, -50%);
    }
    .vivi-pin--pending { background: #C2422F; }
    .vivi-cursor-pin { cursor: crosshair; }

    /* Reactiepaneel onder de stage + invoerbalk. */
    .vivi-lightbox__panel { flex: none; padding: .3rem 1.1rem .95rem; }
    .vivi-lightbox__comments { max-height: 5.6rem; overflow-y: auto; font-size: var(--vivi-tekst-s); scrollbar-width: thin; }
    .vivi-lightbox__comment { padding: .18rem 0; color: rgba(244, 241, 233, .85); }
    .vivi-lightbox__comment b { color: var(--vivi-cream-2); font-weight: 600; }
    .vivi-lightbox__input-row { display: flex; align-items: center; gap: .45rem; margin-top: .5rem; }
    .vivi-lightbox__input {
        flex: 1; min-width: 0; border-radius: var(--vivi-radius-pil);
        border: 1px solid rgba(244, 241, 233, .25); background: rgba(244, 241, 233, .1);
        color: var(--vivi-cream-2); padding: .45rem .9rem; font-size: var(--vivi-tekst-m);
    }
    .vivi-lightbox__input::placeholder { color: rgba(244, 241, 233, .45); }
    .vivi-lightbox__input:focus { outline: 2px solid var(--vivi-gold); outline-offset: 0; }

    /* Selectiebalk: sticky onderin de galerijpagina. */
    .vivi-selectbar {
        position: sticky; bottom: .75rem; z-index: 30;
        display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap;
        background: var(--vivi-ink); color: var(--vivi-cream-2);
        border-radius: var(--vivi-radius-m); padding: .7rem 1rem;
        box-shadow: 0 10px 30px rgba(43, 36, 25, .28);
    }
    .vivi-selectbar__label { font-size: var(--vivi-tekst-m); }
    .vivi-selectbar__label b { color: var(--vivi-gold); }
    .vivi-lightbox-btn {
        display: inline-flex; align-items: center; justify-content: center;
        width: 2.35rem; height: 2.35rem; border-radius: var(--vivi-radius-pil); border: 0; cursor: pointer;
        background: rgba(244, 241, 233, .14); color: var(--vivi-cream-2); line-height: 1; font-size: var(--vivi-tekst-l);
        transition: background .15s ease;
    }
    .vivi-lightbox-btn:hover { background: rgba(244, 241, 233, .26); }
    .vivi-lightbox-btn.on { color: #FF8A76; }
    .vivi-lightbox-btn svg { width: 1.05rem; height: 1.05rem; }
    /* Downloadmenu in de lightbox: origineel of webformaat, als details-
       element zodat het zonder Alpine werkt op de gastpagina. */
    .vivi-dlmenu { position: relative; }
    .vivi-dlmenu > summary { list-style: none; }
    .vivi-dlmenu > summary::-webkit-details-marker { display: none; }
    .vivi-dlmenu__lijst {
        position: absolute; right: 0; top: calc(100% + .4rem); z-index: 70; min-width: 12rem;
        background: var(--vivi-cream-2); border: 1px solid var(--vivi-line);
        border-radius: var(--vivi-radius-s); box-shadow: 0 10px 30px rgba(43, 36, 25, .35);
        padding: .3rem;
    }
    .vivi-dlmenu__optie {
        display: block; padding: .45rem .6rem; border-radius: var(--vivi-radius-xs);
        color: var(--vivi-ink); text-decoration: none; font-size: var(--vivi-tekst-m);
    }
    .vivi-dlmenu__optie:hover { background: rgba(43, 36, 25, .08); }
    .vivi-dlmenu__optie small { display: block; color: var(--vivi-muted); font-size: var(--vivi-tekst-xs); }
    .vivi-lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); }
    .vivi-lightbox__nav--prev { left: .65rem; }
    .vivi-lightbox__nav--next { right: .65rem; }
    @media (max-width: 639.98px) {
        .vivi-lightbox__stage { padding: 0 .5rem 3rem; }
        .vivi-lightbox__nav { top: auto; bottom: .6rem; transform: none; }
        .vivi-lightbox__nav--prev { left: 30%; }
        .vivi-lightbox__nav--next { right: 30%; }
    }

    /* --- Gastweergave (/g/<token>): standalone pagina zonder portaal-chrome.
           Laadt brand-head en daarmee deze hele laag; de gast-klassen wonen
           hier zodat de gastblades zelf geen style-blok nodig hebben. --- */
    .gast-body { margin: 0; background: var(--vivi-cream); font-family: 'Poppins', sans-serif; color: var(--vivi-ink); }
    .gast-wrap { max-width: 1200px; margin: 0 auto; padding: 2rem 1rem 3rem; }
    .gast-kop { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem; margin-bottom: 1.2rem; }
    .gast-kop__tekst { min-width: 0; }
    .gast-merkje { font-size: var(--vivi-tekst-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--vivi-muted); }
    .gast-credit { margin-top: 2rem; font-size: var(--vivi-tekst-s); color: var(--vivi-muted); text-align: center; }
    .gast-credit a { color: inherit; }
    /* De gast-lightbox start dicht en togglet met deze klasse (vanilla JS). */
    .vivi-lightbox--dicht { display: none; }

    /* Toegangsscherm van een deellink: één kaart in het midden. */
    .gast-body--midden { display: flex; min-height: 100dvh; align-items: center; justify-content: center; padding: 1rem; }
    .unlock-kaart { max-width: 380px; width: 100%; }
    .unlock-kaart .vivi-h2 { margin-top: .4rem; }
    .unlock-uitleg { margin-top: .3rem; }
    .unlock-form { margin-top: 1rem; display: flex; flex-direction: column; gap: .6rem; }
    .unlock-form .vivi-btn--primary { align-self: flex-start; margin-top: .2rem; }
    .unlock-fout { color: var(--vivi-fout); font-size: var(--vivi-tekst-s); margin: .4rem 0 0; }

    /* Rij in de zip-downloadlijst: status links, downloadknop rechts. */
    .vivi-ziprij { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .45rem 0; }

    /* --- Covercards op de galerij-overzichtspagina: één kaart per galerij,
           de coverfoto vult de kop, titel eroverheen op een verloop. --- */
    .vivi-covercard { display: block; padding: 0; overflow: hidden; }
    .vivi-covercard .vivi-cover { background: var(--vivi-cream-2); }
    .vivi-covercard__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
    .vivi-covercard__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(43, 36, 25, .05) 25%, rgba(43, 36, 25, .66) 100%); }
    .vivi-covercard .vivi-cover__title { font-size: var(--vivi-kop-m); }
    .vivi-covercard__voet { padding-top: .9rem; padding-bottom: 1.05rem; }
    .vivi-covercard__meta { font-size: var(--vivi-tekst-s); }
    .vivi-covercard__omschrijving { font-size: var(--vivi-tekst-m); }

    /* --- Diagnosemodals in het admin-paneel (GalleryResource): activiteit en
           reacties. Ze wonen in de <head> van de panelen via de Stijllaag, dus
           de blades zelf hoeven geen inline stijl of hex te dragen (bewaakt door
           OntwerpschuldTest). De dynamische pin-positie zet de blade met
           x-effect, niet met een style-attribuut. --- */
    .vivi-gmodal { display: flex; flex-direction: column; gap: 1rem; }
    .vivi-gmodal__cijfers { display: flex; gap: 1.5rem; flex-wrap: wrap; }
    .vivi-gmodal__label { font-size: var(--vivi-tekst-s); color: var(--vivi-muted); }
    .vivi-gmodal__label--kop { text-transform: uppercase; letter-spacing: .05em; font-weight: 700; padding-bottom: .3rem; }
    .vivi-gmodal__waarde { font-weight: 700; }
    .vivi-gmodal__rij { padding: .28rem 0; border-bottom: 1px solid var(--vivi-line); font-size: var(--vivi-tekst-m); }
    .vivi-gmodal__muted { color: var(--vivi-muted); }
    .vivi-gmodal__beeldwrap { position: relative; display: inline-block; max-width: 100%; align-self: center; }
    .vivi-gmodal__beeld { display: block; max-width: 100%; max-height: 22rem; border-radius: var(--vivi-radius-m); }
    .vivi-gmodal__pin {
        position: absolute; transform: translate(-50%, -50%);
        width: 1.2rem; height: 1.2rem; border-radius: var(--vivi-radius-pil);
        background: var(--vivi-gold); border: 2px solid var(--vivi-cream-2);
        box-shadow: 0 1px 6px rgba(0, 0, 0, .4); color: var(--vivi-ink);
        font-size: var(--vivi-tekst-xs); font-weight: 700;
        display: inline-flex; align-items: center; justify-content: center;
    }

/* Eventlaag: schermen en print van de eventreeks (Portaal-E).
   Achtste laag, na 07-galerij. E1 zet alleen het anker; E5 voegt het
   printblok van het draaiboek toe en E14 het schermblok, elk onder een eigen
   commentaarkop hieronder. Alleen tokens uit 01-tokens, geen hex, geen
   utility-klassen (er is geen Tailwind-build). */
    /* ==== Events: anker ==== */

    .vivi-events { display: block; }

    /* ==== Events: Universe-koppeling (/admin/universe) ==== */

    .vivi-ue { display: grid; gap: var(--vivi-ruimte-l); }
    .vivi-ue-kop { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--vivi-ruimte-m); margin-bottom: var(--vivi-ruimte-m); }
    .vivi-ue-sub { margin: var(--vivi-ruimte-2xs) 0 0; font-size: var(--vivi-tekst-s); }
    .vivi-ue-groep { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vivi-ruimte-s); margin: var(--vivi-ruimte-l) 0 var(--vivi-ruimte-s); font-size: var(--vivi-tekst-l); font-weight: 600; }
    .vivi-ue-uitleg { margin: 0 0 var(--vivi-ruimte-s); font-size: var(--vivi-tekst-s); }
    .vivi-ue-lijst { list-style: none; margin: 0; padding: 0; }
    .vivi-ue-rij { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) auto; align-items: center; gap: var(--vivi-ruimte-s) var(--vivi-ruimte-m); padding: var(--vivi-ruimte-s) 0; border-top: 1px solid var(--vivi-line); font-size: var(--vivi-tekst-m); }
    .vivi-ue-datum { font-variant-numeric: tabular-nums; }
    .vivi-ue-titel { min-width: 0; overflow-wrap: anywhere; }
    .vivi-ue-actie { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vivi-ruimte-s); justify-content: flex-end; }
    .vivi-ue-select { width: auto; max-width: 16rem; margin-top: 0; }
    .vivi-ue-verborgen { font-size: var(--vivi-tekst-s); font-weight: 400; color: var(--vivi-muted); }
    .vivi-ue-seizoen { display: flex; align-items: baseline; gap: var(--vivi-ruimte-s); margin: var(--vivi-ruimte-m) 0 var(--vivi-ruimte-2xs); font-size: var(--vivi-tekst-m); font-weight: 600; }

    @media (max-width: 639.98px) {
        .vivi-ue-rij { grid-template-columns: 5.5rem minmax(0, 1fr); }
        .vivi-ue-actie { grid-column: 1 / -1; justify-content: flex-start; }
        .vivi-ue-select { max-width: 100%; flex: 1 1 12rem; }
    }

/* ==== Portaal-UI: fundament ==== */
/* Eigenaar: Portaal-UI1, na de merge bevroren. Een wijziging hier is een
   verzoek aan de commandopost, geen commit van een andere lane.

   De rollen van het portaalredesign (PORTAAL-UI-PLAN 3.3). Ze wijzen naar de
   v1-tokens uit 01-tokens.css. Een antwoord op GATE-P (palet), GATE-T (type)
   of later een merkkleur per klant wisselt alleen de waarden in dit blok;
   geen selector in 10 tot en met 16 hoeft dan mee te veranderen.

   Alleen dit bestand mag een hexwaarde of een nieuwe --vivi-*-definitie
   bevatten (TokensPortaalTest). --vivi-radius-pil staat al in 01 en wordt
   hier bewust niet herhaald: var(--vivi-radius-pil) naar zichzelf is een
   cyclus en maakt elke pil hoekig. Contrast: ContrastTest in tests/Ontwerp. */
body.fi-panel-portal {
    /* Vlakken */
    --vivi-app-achtergrond: var(--vivi-cream);
    --vivi-vlak: #fff;
    --vivi-vlak-2: var(--vivi-cream-2);
    --vivi-vlak-donker: var(--vivi-ink);

    /* Accent: goud als enige accent, inkt als tekst erop */
    --vivi-accent: var(--vivi-gold);
    --vivi-accent-druk: var(--vivi-gold-press);
    --vivi-accent-zacht: color-mix(in srgb, var(--vivi-gold) 14%, var(--vivi-cream));
    --vivi-accent-tekst: var(--vivi-ink);

    /* Tekst. tekst-2 is inkt op 70% en niet de muted-kleur uit 01, want die
       haalt op wit 3,98:1 en dus geen AA. */
    --vivi-tekst: var(--vivi-ink);
    --vivi-tekst-2: rgba(43, 36, 25, .7);
    --vivi-tekst-op-donker: var(--vivi-cream);
    --vivi-tekst-2-op-donker: rgba(236, 232, 221, .74);
    --vivi-lijn-fijn: var(--vivi-line);

    /* Radius: binnen, kaart, frame; de pil komt uit 01. Herontwerp 22-10-2026
       (STUDIE-inspiratie, regel 6): drie stappen die je ziet, 24 frame, 20
       kaart, 12 binnen. 16 en 8 lagen te dicht bij elkaar; de kaart las als
       een knop en de knop als een kaart. */
    --vivi-radius-binnen: var(--vivi-radius-m);
    --vivi-radius-kaart: var(--vivi-radius-xl);
    --vivi-radius-frame: 24px;

    /* Staat (herontwerp 22-10-2026, STUDIE-inspiratie regel 1). Vier staten,
       altijd stip plus woord, nooit kleur alleen: ok (loopt), let op (komt
       eraan), actie (jij bent aan zet of het is te laat), stil (niets gaande).
       De stip is een vlak zonder tekst en hoeft 3:1, niet 4,5:1. Goud is
       bewust geen staat: goud is de ene hoofdactie per scherm (regel 2). Op
       de donkere ankerkaart staat actie lichter, anders verdwijnt rood in inkt. */
    --vivi-staat-ok: var(--vivi-ok);
    --vivi-staat-let-op: var(--vivi-warn);
    --vivi-staat-actie: var(--vivi-fout);
    --vivi-staat-actie-op-donker: #E8806F;
    --vivi-staat-stil: var(--vivi-muted-vlak);
    --vivi-staat-ok-vlak: color-mix(in srgb, var(--vivi-ok) 12%, #fff);
    --vivi-staat-let-op-vlak: color-mix(in srgb, var(--vivi-warn) 12%, #fff);
    --vivi-staat-actie-vlak: color-mix(in srgb, var(--vivi-fout) 10%, #fff);

    /* Meter: voortgang is inkt op een lichte goot, geen goud (regel 4). */
    --vivi-meter-goot: color-mix(in srgb, var(--vivi-ink) 8%, transparent);
    --vivi-meter-vul: var(--vivi-ink);

    /* De drie typeregisters. GATE-T beantwoord 24-09-2026: display Helvetica
       Neue, tekst en label Poppins. Helvetica Neue LT Pro komt uit het Adobe
       Fonts-webproject van Vivimus (Creative Cloud-licentie, V1 van UI3); de
       kit laadt in de portaalkop zodra zijn id is ingesteld. Zonder kit valt
       het register terug op Helvetica Neue van het apparaat. */
    --vivi-type-display: 'helvetica-neue-lt-pro', 'Helvetica Neue LT Pro', 'Helvetica Neue', 'HelveticaNeue', Helvetica, Arial, sans-serif;
    --vivi-type-display-spatie: -.025em;
    --vivi-type-tekst: var(--vivi-serif);
    --vivi-type-label: var(--vivi-serif);
    --vivi-type-label-spatie: .06em;
    --vivi-type-label-variant: all-small-caps;

    /* Cijfers: grote getallen altijd tabulair */
    --vivi-cijfer-xl: 3rem;
    --vivi-cijfer-l: 2.25rem;
    --vivi-cijfer-numeriek: tabular-nums;

    /* Aanraakdoel en frame */
    --vivi-tik-min: 44px;
    --vivi-schaduw-frame: var(--vivi-schaduw-rust);
    --vivi-focusring: var(--vivi-ring-focus);

    /* Verlooprol adem (Portaal-INLOG-A, 26-09-2026): het zachte veld achter
       de kaart van de inlogdeur, een tint per dagdeel zoals op het moodboard.
       Het verloop leeft aan de randen en laat het midden rustig, zodat het
       nooit onder woordmerk, knop of veld komt. Amber en goud blijven onder
       .18, de ochtend krijgt hooguit een koele hint en nooit paars naar blauw.
       Voorlopige waarden tot run 2 van de huisstijl-engine. De korrel is
       dezelfde ruis als op de focustegel in 11, zachter (.14 in plaats van .20). */
    --vivi-korrel: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='k'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .17 0 0 0 0 .14 0 0 0 0 .10 0 0 0 .14 0'/></filter><rect width='100%' height='100%' filter='url(%23k)'/></svg>");
    --vivi-adem-ochtend:
        radial-gradient(75% 60% at 0% 0%, color-mix(in srgb, var(--vivi-info) 14%, transparent), transparent 72%),
        radial-gradient(90% 70% at 100% 100%, color-mix(in srgb, var(--vivi-gold) 18%, transparent), transparent 72%),
        radial-gradient(60% 45% at 100% 0%, var(--vivi-cream-2), transparent 70%);
    --vivi-adem-middag:
        radial-gradient(80% 65% at 100% 0%, color-mix(in srgb, var(--vivi-gold) 18%, transparent), transparent 72%),
        radial-gradient(85% 65% at 0% 100%, color-mix(in srgb, var(--vivi-warn) 12%, transparent), transparent 72%),
        radial-gradient(55% 45% at 0% 0%, var(--vivi-cream-2), transparent 70%);
    --vivi-adem-avond:
        radial-gradient(90% 70% at 0% 100%, color-mix(in srgb, var(--vivi-fout-vlak) 85%, transparent), transparent 72%),
        radial-gradient(80% 65% at 100% 0%, color-mix(in srgb, var(--vivi-warn) 16%, transparent), transparent 72%),
        radial-gradient(60% 50% at 100% 100%, color-mix(in srgb, var(--vivi-gold) 12%, transparent), transparent 70%);
}

/* ==== Portaal-UI: schil ==== */
/* Eigenaar: Portaal-UI4. Rail, ingeklapte rail, topbalk, bel, gebruikerskaart, zijpaneel.
   Regels: alles onder body.fi-panel-portal, alleen var(--vivi-*) uit 09 en 01,
   geen hexwaarde en geen nieuwe --vivi-*-definitie (TokensPortaalTest), alleen
   de breekpunten uit Stijllaag::BREEKPUNTEN. Zie docs/PORTAAL-UI.md.

   Opbouw (mockup v3, PORTAAL-UI-PLAN 3.4): op de creme app-achtergrond staan
   twee vlakken met 12px lucht rondom. Links de donkere rail (de ene donkere
   tegel van het scherm), rechts het witte frame met topbalk en inhoud, radius
   --vivi-radius-frame. Onder 1024px wordt de rail de lade van Filament; onder
   640px valt ook het witte frame weg en liggen de kaarten direct op creme.

   Twee mengsels komen steeds terug en staan uitgeschreven, omdat deze laag
   geen eigen variabelen definieert:
   - tweede tekst op de rail: color-mix(in srgb, var(--vivi-tekst-op-donker) 72%, var(--vivi-vlak-donker))
   - licht vlak op de rail:   color-mix(in srgb, var(--vivi-tekst-op-donker) 8%, var(--vivi-vlak-donker))

   Waar een regel !important draagt, staat erbij waarom: steeds omdat
   02-filament.css (ongescoped, voor alle panelen) de waarde al met !important
   zet, of omdat Filament hem met Alpine inline zet. Laag 02 blijft onaangeroerd. */

/* ------------------------------------------------------------------
   RAIL
   ------------------------------------------------------------------ */
body.fi-panel-portal .fi-sidebar {
    /* 02 zet de zijbalk met !important wit, met een lijn eromheen. */
    background-color: var(--vivi-vlak-donker) !important;
    border-color: transparent !important;
    color: var(--vivi-tekst-op-donker);
}

body.fi-panel-portal .fi-sidebar-header {
    background-color: transparent;
    box-shadow: none;
    padding-inline: 20px;
}

/* De wordmark houdt letter en kapitalen uit 02; alleen de kleur draait om.
   02 zet hem met !important op inkt, dus hier ook !important, anders staat
   inkt op inkt (gemeten: contrast 1,0). */
body.fi-panel-portal .fi-sidebar .fi-logo {
    color: var(--vivi-tekst-op-donker) !important;
}

body.fi-panel-portal .fi-sidebar-header .fi-icon-btn {
    color: color-mix(in srgb, var(--vivi-tekst-op-donker) 72%, var(--vivi-vlak-donker));
}

body.fi-panel-portal .fi-sidebar-header .fi-icon-btn:hover {
    color: var(--vivi-tekst-op-donker);
    background-color: color-mix(in srgb, var(--vivi-tekst-op-donker) 8%, var(--vivi-vlak-donker));
}

body.fi-panel-portal .fi-sidebar-nav {
    padding: 8px 14px 14px;
    row-gap: 20px;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--vivi-tekst-op-donker) 8%, var(--vivi-vlak-donker)) transparent;
}

body.fi-panel-portal .fi-sidebar-nav-groups {
    margin-inline: 0;
    row-gap: 20px;
}

/* Groepskop: klein label in kleinkapitaal, zoals de koppen in de mockup. */
body.fi-panel-portal .fi-sidebar-group-button {
    padding: 0 14px 4px;
}

body.fi-panel-portal .fi-sidebar-group-label {
    color: color-mix(in srgb, var(--vivi-tekst-op-donker) 72%, var(--vivi-vlak-donker));
    font-family: var(--vivi-type-label);
    font-variant-caps: var(--vivi-type-label-variant);
    letter-spacing: var(--vivi-type-label-spatie);
    font-size: .8125rem;
    font-weight: 500;
}

body.fi-panel-portal .fi-sidebar-group-collapse-button {
    color: color-mix(in srgb, var(--vivi-tekst-op-donker) 72%, var(--vivi-vlak-donker));
}

/* Menu-item: een pil van minstens de tikmaat. */
body.fi-panel-portal .fi-sidebar-item-button {
    min-height: var(--vivi-tik-min);
    padding-inline: 14px;
    gap: 12px;
    border-radius: var(--vivi-radius-pil);
}

body.fi-panel-portal .fi-sidebar-item-button:hover,
body.fi-panel-portal .fi-sidebar-item-button:focus-visible {
    background-color: color-mix(in srgb, var(--vivi-tekst-op-donker) 8%, var(--vivi-vlak-donker));
}

body.fi-panel-portal .fi-sidebar-item-icon {
    color: color-mix(in srgb, var(--vivi-tekst-op-donker) 72%, var(--vivi-vlak-donker));
}

body.fi-panel-portal .fi-sidebar-item-label {
    color: var(--vivi-tekst-op-donker);
    font-weight: 400;
}

body.fi-panel-portal .fi-sidebar-item-grouped-border > div {
    background-color: color-mix(in srgb, var(--vivi-tekst-op-donker) 72%, var(--vivi-vlak-donker));
}

/* Actief: de lichte pil met inkt erop. 02 zet goud op 18% met !important;
   kleur en gewicht van icoon en label (inkt, 600) komen al uit 02. */
body.fi-panel-portal .fi-sidebar-item-active .fi-sidebar-item-button {
    background-color: var(--vivi-vlak-2) !important;
}

/* Teller in de uitgeklapte rail: gouden pil, inkt erop. */
body.fi-panel-portal .fi-sidebar .fi-badge {
    min-width: 22px;
    min-height: 20px;
    justify-content: center;
    padding-inline: 7px;
    border-radius: var(--vivi-radius-pil);
    background-color: var(--vivi-accent);
    color: var(--vivi-accent-tekst);
    box-shadow: none;
    font-size: .6875rem;
    font-weight: 600;
    font-variant-numeric: var(--vivi-cijfer-numeriek);
}

body.fi-panel-portal .fi-sidebar .fi-badge * {
    color: inherit;
}

/* Focus op donker: de focusring uit 09 is goud op 25% en verdwijnt op inkt,
   dus hier een volle gouden omlijning. */
body.fi-panel-portal .fi-sidebar :is(a, button):focus-visible {
    outline: 2px solid var(--vivi-accent);
    outline-offset: 2px;
}

/* ------------------------------------------------------------------
   RAILVOET: slot voor de Lois-pil (UI5) en de gebruikerskaart
   ------------------------------------------------------------------ */
body.fi-panel-portal .vivi-schil-railvoet {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 14px 14px;
}

body.fi-panel-portal .vivi-schil-lois-slot:empty {
    display: none;
}

body.fi-panel-portal .vivi-schil-gebruiker {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 8px;
    border-radius: var(--vivi-radius-kaart);
    background-color: color-mix(in srgb, var(--vivi-tekst-op-donker) 8%, var(--vivi-vlak-donker));
}

body.fi-panel-portal .vivi-schil-gebruiker__avatar {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--vivi-radius-pil);
    background-color: var(--vivi-accent);
    color: var(--vivi-accent-tekst);
    font-family: var(--vivi-type-label);
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: var(--vivi-type-label-spatie);
}

body.fi-panel-portal .vivi-schil-gebruiker__tekst {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

body.fi-panel-portal .vivi-schil-gebruiker__naam,
body.fi-panel-portal .vivi-schil-gebruiker__bedrijf {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.fi-panel-portal .vivi-schil-gebruiker__naam {
    color: var(--vivi-tekst-op-donker);
    font-size: .8125rem;
    font-weight: 500;
}

body.fi-panel-portal .vivi-schil-gebruiker__bedrijf {
    color: color-mix(in srgb, var(--vivi-tekst-op-donker) 72%, var(--vivi-vlak-donker));
    font-size: .75rem;
}

/* ------------------------------------------------------------------
   TOPBALK, BEL EN WAT-WACHT
   ------------------------------------------------------------------ */
body.fi-panel-portal .fi-topbar > nav {
    /* 02 maakt de topbalk met !important doorzichtig. Hier krijgt hij het vlak
       waar hij op ligt, zodat inhoud er bij scrollen niet onderdoor schijnt. */
    background-color: var(--vivi-app-achtergrond) !important;
}

/* Ladeknop onder 1024: Filament zet hem op grijs 400, gemeten 2,06 op creme.
   Tweede tekst haalt de 3:1 voor een bedieningselement ruim, en de knop krijgt
   de tikmaat. */
body.fi-panel-portal :is(.fi-topbar-open-sidebar-btn, .fi-topbar-close-sidebar-btn) {
    width: var(--vivi-tik-min);
    height: var(--vivi-tik-min);
    color: var(--vivi-tekst-2);
}

body.fi-panel-portal :is(.fi-topbar-open-sidebar-btn, .fi-topbar-close-sidebar-btn):focus-visible {
    outline: 2px solid var(--vivi-accent);
    outline-offset: 2px;
}

/* De bel: rond, licht vlak, gouden telling. */
body.fi-panel-portal .fi-topbar-database-notifications-btn {
    width: var(--vivi-tik-min);
    height: var(--vivi-tik-min);
    border-radius: var(--vivi-radius-pil);
    background-color: var(--vivi-vlak-2);
    color: var(--vivi-tekst);
}

body.fi-panel-portal .fi-topbar-database-notifications-btn:hover {
    background-color: var(--vivi-accent-zacht);
}

body.fi-panel-portal .fi-topbar-database-notifications-btn:focus-visible {
    outline: 2px solid var(--vivi-accent);
    outline-offset: 2px;
}

body.fi-panel-portal .fi-topbar-database-notifications-btn .fi-badge {
    min-width: 20px;
    min-height: 20px;
    justify-content: center;
    border-radius: var(--vivi-radius-pil);
    background-color: var(--vivi-accent);
    color: var(--vivi-accent-tekst);
    box-shadow: 0 0 0 2px var(--vivi-vlak);
    font-size: .6875rem;
    font-weight: 600;
    font-variant-numeric: var(--vivi-cijfer-numeriek);
}

body.fi-panel-portal .fi-topbar-database-notifications-btn .fi-badge * {
    color: inherit;
}

/* Wat-wacht: TOPBAR_END rendert na het blok met bel en profiel. Met de
   volgorde omgedraaid staat de regel links van de bel, zoals in de mockup. */
body.fi-panel-portal .vivi-schil-wacht {
    display: none;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    margin: 0 0 0 auto;
    padding-inline: 16px;
    border-radius: var(--vivi-radius-pil);
    background-color: var(--vivi-vlak-2);
    color: var(--vivi-tekst-2);
    font-size: .8125rem;
    white-space: nowrap;
}

body.fi-panel-portal .vivi-schil-wacht__punt {
    width: 8px;
    height: 8px;
    border-radius: var(--vivi-radius-pil);
    background-color: var(--vivi-accent);
}

body.fi-panel-portal .vivi-schil-wacht__link {
    color: var(--vivi-tekst);
    font-weight: 500;
    text-decoration: none;
    border-radius: var(--vivi-radius-pil);
}

body.fi-panel-portal .vivi-schil-wacht__link:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

body.fi-panel-portal .vivi-schil-wacht__link:focus-visible {
    outline: 2px solid var(--vivi-accent);
    outline-offset: 3px;
}

/* ------------------------------------------------------------------
   FRAME VANAF 640: wit vlak met 12px lucht en radius frame
   ------------------------------------------------------------------ */
@media (min-width: 640px) {
    body.fi-panel-portal .fi-main-ctn {
        min-width: 0;
        min-height: calc(100dvh - 24px);
        margin: 12px;
        border-radius: var(--vivi-radius-frame);
        background-color: var(--vivi-vlak);
        box-shadow: var(--vivi-schaduw-frame);
    }

    body.fi-panel-portal .fi-topbar > nav {
        /* Zie de topbalkregel hierboven: 02 zet hem met !important doorzichtig. */
        background-color: var(--vivi-vlak) !important;
        border-radius: var(--vivi-radius-frame) var(--vivi-radius-frame) 0 0;
    }
}

/* ------------------------------------------------------------------
   DESKTOP VANAF 1024: zwevende rail, in te klappen tot iconen
   ------------------------------------------------------------------ */
@media (min-width: 1024px) {
    body.fi-panel-portal .fi-sidebar {
        border-radius: var(--vivi-radius-frame);
        box-shadow: var(--vivi-schaduw-frame);
    }

    body.fi-panel-portal .vivi-schil-wacht {
        display: inline-flex;
    }

    /* Alleen hier, waar de regel ook zichtbaar is: anders verliest het blok met
       bel en profiel zijn ms-auto en schuift het onder 1024 naar links
       (gemeten op 768: bel op x 70 in plaats van rechts). */
    body.fi-panel-portal .fi-topbar > nav:has(> .vivi-schil-wacht) > .ms-auto {
        order: 1;
        margin-inline-start: 0;
    }

    /* Ingeklapt: Filament 3.3 zet de ingeklapte breedte alleen als variabele
       op :root en past hem nergens toe; zonder deze regel krijgt de rail de
       breedte van zijn inhoud. */
    body.fi-panel-portal .fi-sidebar:not(.fi-sidebar-open) {
        width: var(--collapsed-sidebar-width);
    }

    body.fi-panel-portal .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-header {
        padding-inline: 14px;
    }

    body.fi-panel-portal .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-nav {
        /* Filament zet scrollbar-gutter inline; op Windows reserveert dat 15px
           en dan past er in 72px geen item van 44px meer. */
        scrollbar-gutter: auto !important;
        scrollbar-width: none;
        /* 72 min de rand van 1px aan elke kant min 2 x 13 geeft precies 44. */
        padding-inline: 13px;
    }

    body.fi-panel-portal .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-item-button {
        padding-inline: 10px;
    }

    /* Tellerpunt: in de ingeklapte rail wordt de teller een gouden punt op
       het icoon. Filament verbergt de badge dan met Alpine x-show (inline
       display none); !important is de enige weg om hem terug te halen. */
    body.fi-panel-portal .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-item-button > span:has(> .fi-badge) {
        display: block !important;
        position: absolute;
        top: 7px;
        inset-inline-end: 7px;
        width: 10px;
        height: 10px;
        border-radius: var(--vivi-radius-pil);
        background-color: var(--vivi-accent);
        box-shadow: 0 0 0 2px var(--vivi-vlak-donker);
    }

    /* Het getal blijft voor een schermlezer, alleen niet zichtbaar. */
    body.fi-panel-portal .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-item-button > span > .fi-badge {
        position: absolute;
        width: 1px;
        height: 1px;
        min-width: 0;
        min-height: 0;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    body.fi-panel-portal .fi-sidebar:not(.fi-sidebar-open) .vivi-schil-railvoet {
        /* Zelfde rekensom als de nav: de kaart wordt 44 breed, even breed als een item. */
        padding-inline: 13px;
    }

    /* De Loïs-pil wordt in de ingeklapte rail een rond knopje van 44 met
       alleen de stip; label en sneltoets passen niet in 72 en liepen eruit
       (gemeten 29-10: de "/" stond buiten de rail). Via het schilslot,
       want Loïs bestaat alleen in het portaal en hoort niet in 17-beheer. */
    body.fi-panel-portal .fi-sidebar:not(.fi-sidebar-open) .vivi-schil-lois-slot .vivi-lois__pil {
        justify-content: center;
        width: 44px;
        min-height: 44px;
        padding: 0;
    }

    body.fi-panel-portal .fi-sidebar:not(.fi-sidebar-open) .vivi-schil-lois-slot .vivi-lois__toets {
        display: none;
    }

    /* Het label blijft de naam van de knop voor een schermlezer. */
    body.fi-panel-portal .fi-sidebar:not(.fi-sidebar-open) .vivi-schil-lois-slot .vivi-lois__pillabel {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    body.fi-panel-portal .fi-sidebar:not(.fi-sidebar-open) .vivi-schil-gebruiker {
        justify-content: center;
        padding: 2px;
        background-color: transparent;
    }
}

/* ------------------------------------------------------------------
   ONDER 640: geen frame, de kaarten liggen direct op creme. De topbalk
   houdt de creme uit de topbalkregel bovenaan.
   ------------------------------------------------------------------ */
@media (max-width: 639.98px) {
    body.fi-panel-portal .fi-main-ctn {
        margin: 0;
        background-color: transparent;
    }
}

/* ==== Portaal-UI: componenten ==== */
/* Eigenaar: Portaal-UI3. Groet, rij, segment, weekstrook, kebab, actiekaart, ring.
   Regels: alles onder body.fi-panel-portal, alleen var(--vivi-*) uit 09 en 01,
   geen hexwaarde en geen nieuwe --vivi-*-definitie (TokensPortaalTest), alleen
   de breekpunten uit Stijllaag::BREEKPUNTEN. Zie docs/PORTAAL-UI.md.

   Mobiel eerst: de basisregels zijn 375, de media queries bouwen op naar 640
   en 1024. Tekst op wit, cream-2 en de app-achtergrond is --vivi-tekst of
   --vivi-tekst-2 (5,4 tot 5,7:1); --vivi-muted (3,98:1 op wit) komt in deze
   laag niet voor. Elk klikbaar element is minstens --vivi-tik-min hoog.
   Alle selectors zijn body.fi-panel-portal plus klasse (0,2,1), zodat ze de
   platte regels uit 04 (0,1,0) winnen zonder !important. */

/* ---------------------------------------------------------------
   Focus. Eén ring voor alles in deze laag: 2px in de tekstkleur, 2px los,
   zodat hij op wit, cream en goud even goed te zien is. Binnen een donkere
   kaart goud; de donkere kaart zelf houdt de inktring, want die ligt 2px
   buiten de kaart op de lichte achtergrond.
   --------------------------------------------------------------- */
body.fi-panel-portal :is(.vivi-groet, .vivi-lijstrij, .vivi-segment, .vivi-toevoegen, .vivi-weekstrook, .vivi-kebab, .vivi-actiekaart, .vivi-stat, .vivi-empty--uitleg, .vivi-proef) :is(a, button, [tabindex]):focus-visible,
body.fi-panel-portal a.vivi-stat--doorwijs:focus-visible {
    outline: 2px solid var(--vivi-tekst);
    outline-offset: 2px;
    box-shadow: none;
}
body.fi-panel-portal .vivi-stat--donker :is(a, button, [tabindex]):focus-visible {
    outline-color: var(--vivi-accent);
}

/* ---------------------------------------------------------------
   Groet. Links boven, datum in het labelregister, de kop in twee tinten
   zoals mockup v3: "Goedemorgen, Sanne." in tekst, wat er wacht als zachte
   tweede regel in tekst-2, in dezelfde letter. Variant leeg staat midden.
   --------------------------------------------------------------- */
body.fi-panel-portal .vivi-groet {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--vivi-ruimte-xs);
    text-align: left;
    color: var(--vivi-tekst);
}
body.fi-panel-portal .vivi-groet__datum {
    margin: 0;
    font-family: var(--vivi-type-label);
    font-variant-caps: var(--vivi-type-label-variant);
    letter-spacing: var(--vivi-type-label-spatie);
    font-size: var(--vivi-tekst-m);
    color: var(--vivi-tekst-2);
}
body.fi-panel-portal .vivi-groet__kop {
    margin: 0;
    font-family: var(--vivi-type-display);
    font-weight: 400;
    letter-spacing: var(--vivi-type-display-spatie);
    font-size: clamp(var(--vivi-kop-l), 1.2rem + 3.2vw, calc(var(--vivi-kop-l) * 1.375));
    line-height: 1.08;
    text-wrap: balance;
    color: var(--vivi-tekst);
}
/* 02 zet Poppins op .fi-body *, dus de spans erven de kopletter niet vanzelf. */
body.fi-panel-portal :is(.vivi-groet__hallo, .vivi-groet__naam, .vivi-groet__wacht) {
    font-family: inherit;
}
body.fi-panel-portal .vivi-groet__wacht {
    display: block;
    color: var(--vivi-tekst-2);
}
/* Variant titel: een subscherm heet wat het is. Eén kopmaat (kop-l, gelijk
   aan de kop van de Filament-lijsten) en wat er wacht als gewone tekstregel
   eronder in plaats van een tweede kopregel: de dubbele displaykop per
   subscherm was de grootste bron van ruis boven de vouw. */
body.fi-panel-portal .vivi-groet--titel .vivi-groet__kop {
    font-size: var(--vivi-kop-l);
    line-height: 1.15;
}
body.fi-panel-portal .vivi-groet__titel {
    font-family: inherit;
}
body.fi-panel-portal .vivi-groet--titel .vivi-groet__wacht {
    margin-top: var(--vivi-ruimte-2xs);
    font-family: var(--vivi-type-tekst);
    font-size: var(--vivi-tekst-l);
    letter-spacing: 0;
    line-height: 1.5;
}
body.fi-panel-portal .vivi-groet__acties {
    display: flex;
    flex-wrap: wrap;
    gap: var(--vivi-ruimte-s);
    margin-top: var(--vivi-ruimte-s);
}
/* 04 zet .vivi-btn op 600; moodboardregel 2 vraagt 400 tot 500. Alleen binnen
   de nieuwe componenten, de knoppen elders blijven van 04 (verzoekregel). */
body.fi-panel-portal :is(.vivi-groet__acties, .vivi-empty__actie) > :is(a, button) {
    min-height: var(--vivi-tik-min);
    font-weight: 500;
}
body.fi-panel-portal .vivi-groet--leeg {
    align-items: center;
    text-align: center;
    margin-inline: auto;
    padding-block: var(--vivi-ruimte-2xl);
}
body.fi-panel-portal .vivi-groet--leeg .vivi-groet__acties {
    justify-content: center;
}

/* ---------------------------------------------------------------
   Rij (.vivi-lijstrij; .vivi-rij is al een flexhulp uit 06). Wit vlak, frame-
   radius, minstens 72px. De titellink rekt over de hele kopregel, de knoppen
   liggen erboven. De titel mag twee regels, daarna een beletselteken.
   --------------------------------------------------------------- */
body.fi-panel-portal .vivi-lijstrij {
    display: block;
    min-height: 72px;
    padding: var(--vivi-ruimte-s) var(--vivi-ruimte-s) var(--vivi-ruimte-s) var(--vivi-ruimte-m);
    border-radius: var(--vivi-radius-frame);
    background: var(--vivi-vlak);
    color: var(--vivi-tekst);
    container-type: inline-size;
}
/* Smal (rij onder 480) staat de statuspil onder de titel, zodat de titel naast
   de knoppen de volle breedte houdt: met pil ernaast bleef er bij 375 112px
   over en brak "Teksten voor de pagina Over ons" over drie regels. De vraag
   gaat naar de rij, niet naar het scherm: in een kolom van 305px bij 1024
   hield de titel met een mediaquery 74px over (vijf regels). Het kebabmenu
   blijft boven de volgende rij; container-type maakt geen stapelcontext
   (gemeten met elementFromPoint). */
body.fi-panel-portal .vivi-lijstrij__hoofd {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--vivi-ruimte-s);
    row-gap: var(--vivi-ruimte-2xs);
    min-height: calc(72px - var(--vivi-ruimte-s) * 2);
}
body.fi-panel-portal .vivi-lijstrij__tekst {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
}
/* De tweede regel draagt links de status en rechts de hoofdactie; de kebab
   blijft naast de titel, zodat de titel de breedte van de hoofdactie niet
   hoeft af te staan. */
body.fi-panel-portal .vivi-lijstrij__hoofd > .vivi-lijstrij__onder {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--vivi-ruimte-xs);
}
body.fi-panel-portal .vivi-lijstrij__hoofd > .vivi-lijstrij__acties {
    grid-column: 2;
    grid-row: 1;
}
body.fi-panel-portal .vivi-lijstrij__hoofd:not(:has(> .vivi-lijstrij__acties)) > .vivi-lijstrij__tekst {
    grid-column: 1 / -1;
}
/* Een rij die alleen naar een detail gaat: ruimte voor het pijltje rechts. */
body.fi-panel-portal .vivi-lijstrij--pijl .vivi-lijstrij__hoofd {
    padding-right: calc(1.25rem + var(--vivi-ruimte-s));
}
@container (min-width: 480px) {
    body.fi-panel-portal .vivi-lijstrij__hoofd {
        display: flex;
        gap: var(--vivi-ruimte-s);
    }
    body.fi-panel-portal .vivi-lijstrij__tekst {
        flex: 1 1 auto;
    }
    body.fi-panel-portal .vivi-lijstrij__hoofd > .vivi-lijstrij__onder {
        flex: none;
        flex-wrap: nowrap;
        gap: var(--vivi-ruimte-s);
    }
}
body.fi-panel-portal .vivi-lijstrij__titel {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin: 0;
    font-size: var(--vivi-tekst-m);
    font-weight: 500;
    line-height: 1.35;
    overflow-wrap: anywhere;
    /* pretty werkt niet in een -webkit-box; balance wel (gemeten bij 375). */
    text-wrap: balance;
}
body.fi-panel-portal .vivi-lijstrij__link {
    color: inherit;
    text-decoration: none;
}
body.fi-panel-portal .vivi-lijstrij__link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--vivi-radius-kaart);
}
body.fi-panel-portal .vivi-lijstrij__link:hover {
    text-decoration: underline;
    text-underline-offset: .18em;
}
/* Het pijltje zit in de link maar hangt aan de kopregel (die is positioned),
   dus de line-clamp van de titel knipt het niet af. */
body.fi-panel-portal .vivi-lijstrij__pijl {
    position: absolute;
    top: 50%;
    right: 0;
    width: 1.25rem;
    height: 1.25rem;
    transform: translateY(-50%);
    color: var(--vivi-tekst-2);
}
/* De hoofdactie: de pil van mockup v3 (crème op wit, inkt bij hover), boven
   de uitgerekte titellink zodat een tik op de knop de knop is. */
body.fi-panel-portal .vivi-lijstrij__primair {
    position: relative;
    z-index: 1;
    display: inline-flex;
    flex: none;
    align-items: center;
    min-height: var(--vivi-tik-min);
    margin-left: auto;
    padding: 0 var(--vivi-ruimte-l);
    border: 0;
    border-radius: var(--vivi-radius-pil);
    background: var(--vivi-vlak-2);
    font: inherit;
    font-size: var(--vivi-tekst-m);
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    color: var(--vivi-tekst);
    cursor: pointer;
}
body.fi-panel-portal .vivi-lijstrij__primair:hover {
    background: var(--vivi-vlak-donker);
    color: var(--vivi-tekst-op-donker);
}
body.fi-panel-portal .vivi-lijstrij__meta {
    margin: var(--vivi-ruimte-2xs) 0 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: var(--vivi-tekst-s);
    color: var(--vivi-tekst-2);
}
body.fi-panel-portal .vivi-lijstrij__status {
    flex: none;
}
/* --vivi-warn op de getinte pil haalt 3,24:1; de tint draagt de status, de
   tekst gaat naar de tekstkleur (gemeten 12,5:1). */
body.fi-panel-portal .vivi-lijstrij__status.vivi-pill--let-op {
    color: var(--vivi-tekst);
}
body.fi-panel-portal .vivi-lijstrij__acties {
    position: relative;
    z-index: 1;
    display: flex;
    flex: none;
    align-items: center;
    gap: var(--vivi-ruimte-2xs);
}
/* Een open menu moet over de volgende rij heen, ook over diens knoppen. */
body.fi-panel-portal .vivi-lijstrij__acties:has(.vivi-kebab__menu:not([hidden])) {
    z-index: 5;
}
body.fi-panel-portal .vivi-lijstrij__klap {
    display: inline-grid;
    place-items: center;
    width: var(--vivi-tik-min);
    height: var(--vivi-tik-min);
    padding: 0;
    border: 0;
    border-radius: var(--vivi-radius-rond);
    background: transparent;
    color: var(--vivi-tekst);
    cursor: pointer;
}
body.fi-panel-portal .vivi-lijstrij__klap:hover {
    background: var(--vivi-vlak-2);
}
body.fi-panel-portal .vivi-lijstrij__ico {
    width: 1.25rem;
    height: 1.25rem;
    transition: transform .15s ease;
}
body.fi-panel-portal .vivi-lijstrij__klap[aria-expanded="true"] .vivi-lijstrij__ico {
    transform: rotate(180deg);
}
body.fi-panel-portal .vivi-lijstrij__uitklap {
    margin-top: var(--vivi-ruimte-s);
    padding: var(--vivi-ruimte-s) var(--vivi-ruimte-s) var(--vivi-ruimte-2xs) 0;
    border-top: 1px solid var(--vivi-lijn-fijn);
    font-size: var(--vivi-tekst-m);
    line-height: 1.5;
    color: var(--vivi-tekst);
}
body.fi-panel-portal .vivi-lijstrij__uitklap[hidden] {
    display: none;
}

/* ---------------------------------------------------------------
   Kebab. Ronde knop van 44, menu klapt onder de knop open en lijnt rechts uit,
   zodat het in een rij niet over de rand valt.
   --------------------------------------------------------------- */
body.fi-panel-portal .vivi-kebab {
    position: relative;
    display: inline-flex;
}
body.fi-panel-portal .vivi-kebab__knop {
    display: inline-grid;
    place-items: center;
    width: var(--vivi-tik-min);
    height: var(--vivi-tik-min);
    padding: 0;
    border: 0;
    border-radius: var(--vivi-radius-rond);
    background: transparent;
    color: var(--vivi-tekst);
    cursor: pointer;
}
body.fi-panel-portal .vivi-kebab__knop:hover,
body.fi-panel-portal .vivi-kebab__knop[aria-expanded="true"] {
    background: var(--vivi-vlak-2);
}
body.fi-panel-portal .vivi-kebab__ico {
    width: 1.25rem;
    height: 1.25rem;
}
body.fi-panel-portal .vivi-kebab__menu {
    position: absolute;
    top: calc(100% + var(--vivi-ruimte-2xs));
    right: 0;
    z-index: 20;
    display: grid;
    min-width: 12rem;
    max-width: min(18rem, calc(100vw - var(--vivi-ruimte-xl)));
    padding: var(--vivi-ruimte-2xs);
    border: 1px solid var(--vivi-lijn-fijn);
    border-radius: var(--vivi-radius-kaart);
    background: var(--vivi-vlak);
    box-shadow: var(--vivi-schaduw-zweef);
}
body.fi-panel-portal .vivi-kebab__menu[hidden] {
    display: none;
}
body.fi-panel-portal .vivi-kebab__item {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: var(--vivi-tik-min);
    padding: 0 var(--vivi-ruimte-m);
    border: 0;
    border-radius: var(--vivi-radius-binnen);
    background: transparent;
    font: inherit;
    font-size: var(--vivi-tekst-m);
    text-align: left;
    text-decoration: none;
    color: var(--vivi-tekst);
    cursor: pointer;
}
body.fi-panel-portal .vivi-kebab__item:hover,
body.fi-panel-portal .vivi-kebab__item:focus-visible {
    background: var(--vivi-vlak-2);
}
body.fi-panel-portal .vivi-kebab__item:focus-visible {
    outline-offset: -2px;
}
body.fi-panel-portal .vivi-kebab__item--fout {
    color: var(--vivi-fout);
}
/* Eén actie: geen menu maar de actie zelf, als lichte pil van 44 hoog. Lange
   labels kappen af, de volle naam staat in de verborgen staart en in de tekst. */
body.fi-panel-portal .vivi-kebab__enkel {
    display: inline-block;
    max-width: 14rem;
    min-height: var(--vivi-tik-min);
    padding: 0 var(--vivi-ruimte-m);
    border: 0;
    border-radius: var(--vivi-radius-pil);
    background: transparent;
    font: inherit;
    font-size: var(--vivi-tekst-m);
    font-weight: 500;
    line-height: var(--vivi-tik-min);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
    vertical-align: middle;
    color: var(--vivi-tekst);
    cursor: pointer;
}
body.fi-panel-portal .vivi-kebab__enkel:hover {
    background: var(--vivi-vlak-2);
}
body.fi-panel-portal .vivi-kebab__enkel--fout {
    color: var(--vivi-fout);
}

/* ---------------------------------------------------------------
   Segment. De bestaande chip (04) wordt hier een pil van 44 met de teller in
   een eigen cirkel. Alleen .vivi-segment__item, zodat statuschips elders
   blijven zoals ze zijn.
   --------------------------------------------------------------- */
body.fi-panel-portal .vivi-segment {
    gap: var(--vivi-ruimte-xs);
}
body.fi-panel-portal .vivi-segment__item {
    display: inline-flex;
    align-items: center;
    gap: var(--vivi-ruimte-xs);
    min-height: var(--vivi-tik-min);
    padding: 0 var(--vivi-ruimte-l);
    border: 1px solid var(--vivi-lijn-fijn);
    border-radius: var(--vivi-radius-pil);
    background: var(--vivi-vlak-2);
    font-family: var(--vivi-type-tekst);
    font-size: var(--vivi-tekst-m);
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    color: var(--vivi-tekst);
    cursor: pointer;
    /* 04 zet flex: none op .vivi-chip; een lang label liep op 375 34px buiten
       beeld. Hier mag het item krimpen en breekt het label, de teller niet. */
    flex: 0 1 auto;
    max-width: 100%;
    padding-block: var(--vivi-ruimte-2xs);
    text-align: start;
}
/* Een lang label breekt in twee gebalanceerde regels binnen de 44px, in plaats
   van af te kappen of de rij te laten scrollen: dan zou tekst of een segment
   uit beeld verdwijnen. */
body.fi-panel-portal .vivi-segment__label {
    min-width: 0;
    overflow-wrap: anywhere;
    text-wrap: balance;
}
body.fi-panel-portal .vivi-segment__item:has(.vivi-chip__aantal) {
    padding-inline-end: var(--vivi-ruimte-xs);
}
body.fi-panel-portal .vivi-segment__item:hover {
    background: var(--vivi-vlak);
}
body.fi-panel-portal .vivi-segment__item:is(.vivi-chip--actief, [aria-current], [aria-pressed="true"]) {
    border-color: var(--vivi-vlak-donker);
    background: var(--vivi-vlak-donker);
    color: var(--vivi-tekst-op-donker);
}
body.fi-panel-portal .vivi-segment__item .vivi-chip__aantal {
    display: inline-grid;
    flex: none;
    place-items: center;
    min-width: 2rem;
    height: 2rem;
    margin: 0;
    padding-inline: var(--vivi-ruimte-2xs);
    border-radius: var(--vivi-radius-pil);
    background: var(--vivi-vlak);
    font-size: var(--vivi-tekst-s);
    font-weight: 600;
    font-variant-numeric: var(--vivi-cijfer-numeriek);
    color: var(--vivi-tekst);
    opacity: 1;
}

/* ---------------------------------------------------------------
   Inline toevoegen. Het veld draagt de rand en de focusring, de invoer zelf
   is kaal. Enter en de pijlknop doen hetzelfde; de schermlezer krijgt de
   hint via aria-describedby.

   minmax(0, 1fr): een kale grid-kolom krimpt niet onder de min-content van
   het veld, en een tekstinvoer is van zichzelf 20 tekens breed. In de
   wensenkolom van Social (1440 met open lade, kaart 265) stak het veld zo
   40px buiten de kaart (gemeten 07-10-2026); met deze kolom past het tot
   een kaart van 200.
   --------------------------------------------------------------- */
body.fi-panel-portal .vivi-toevoegen {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--vivi-ruimte-xs);
}
body.fi-panel-portal .vivi-toevoegen__label {
    font-family: var(--vivi-type-label);
    font-variant-caps: var(--vivi-type-label-variant);
    letter-spacing: var(--vivi-type-label-spatie);
    font-size: var(--vivi-tekst-m);
    font-weight: 500;
    color: var(--vivi-tekst-2);
}
body.fi-panel-portal .vivi-toevoegen__veld {
    display: flex;
    align-items: center;
    gap: var(--vivi-ruimte-xs);
    min-height: var(--vivi-tik-min);
    padding: 3px;
    border: 1px solid color-mix(in srgb, var(--vivi-tekst) 55%, transparent);
    border-radius: var(--vivi-radius-pil);
    background: var(--vivi-vlak);
}
/* Alleen bij focus in de invoer; staat de focus op de knop, dan draagt de
   knop zijn eigen ring en zou een tweede om het veld dubbel zijn. */
body.fi-panel-portal .vivi-toevoegen__veld:has(.vivi-toevoegen__invoer:focus) {
    outline: 2px solid var(--vivi-tekst);
    outline-offset: 2px;
}
body.fi-panel-portal .vivi-toevoegen__invoer {
    flex: 1 1 auto;
    min-width: 0;
    min-height: var(--vivi-tik-min);
    padding: 0 var(--vivi-ruimte-l);
    border: 0;
    border-radius: var(--vivi-radius-pil);
    background: transparent;
    box-shadow: none;
    font-family: var(--vivi-type-tekst);
    font-size: var(--vivi-tekst-m);
    color: var(--vivi-tekst);
    -webkit-appearance: none;
    appearance: none;
}
body.fi-panel-portal .vivi-toevoegen__invoer:focus,
body.fi-panel-portal .vivi-toevoegen__invoer:focus-visible {
    outline: none;
    box-shadow: none;
}
body.fi-panel-portal .vivi-toevoegen__invoer::placeholder {
    color: var(--vivi-tekst-2);
    opacity: 1;
}
/* De verzendknop: de inktcirkel van mockup v3 (.stuur), 44 in een veld van
   44 plus 2x3 rand-lucht, dus 52 zoals de mockup. Op een telefoon is dit de
   enige manier om toe te voegen zonder het toetsenbord te kennen. */
body.fi-panel-portal .vivi-toevoegen__knop {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: var(--vivi-tik-min);
    height: var(--vivi-tik-min);
    padding: 0;
    border: 0;
    border-radius: var(--vivi-radius-rond);
    background: var(--vivi-vlak-donker);
    color: var(--vivi-tekst-op-donker);
    cursor: pointer;
}
body.fi-panel-portal .vivi-toevoegen__ico {
    width: 1.25rem;
    height: 1.25rem;
}
body.fi-panel-portal .vivi-toevoegen__hint {
    margin: 0;
    font-size: var(--vivi-tekst-s);
    color: var(--vivi-tekst-2);
}

/* ---------------------------------------------------------------
   Weekstrook. Op 375 zeven gelijke kolommen die nooit breder worden dan de
   strook (minmax(0, 1fr)), met korte daglabels en de datum in een cirkel. Vanaf
   640 wordt elke dag een eigen vlak met de volle dagnaam.
   --------------------------------------------------------------- */
body.fi-panel-portal .vivi-weekstrook__dagen {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}
body.fi-panel-portal .vivi-weekstrook__dag {
    min-width: 0;
}
body.fi-panel-portal .vivi-weekstrook__vak {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--vivi-ruimte-xs);
    min-height: var(--vivi-tik-min);
    height: 100%;
    padding: var(--vivi-ruimte-2xs) 0;
    border-radius: var(--vivi-radius-kaart);
    text-decoration: none;
    color: var(--vivi-tekst);
}
body.fi-panel-portal a.vivi-weekstrook__vak:hover .vivi-weekstrook__datum {
    background: var(--vivi-vlak-2);
}
body.fi-panel-portal .vivi-weekstrook__kort {
    font-family: var(--vivi-type-label);
    font-variant-caps: var(--vivi-type-label-variant);
    letter-spacing: var(--vivi-type-label-spatie);
    font-size: var(--vivi-tekst-m);
    line-height: 1;
    color: var(--vivi-tekst-2);
}
/* Op mobiel alleen voor de schermlezer, zoals .vivi-sr. */
body.fi-panel-portal .vivi-weekstrook__lang {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
body.fi-panel-portal .vivi-weekstrook__datum {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--vivi-radius-rond);
    background: var(--vivi-vlak);
    font-family: var(--vivi-type-display);
    font-size: var(--vivi-tekst-l);
    font-weight: 400;
    font-variant-numeric: var(--vivi-cijfer-numeriek);
    line-height: 1;
}
body.fi-panel-portal .vivi-weekstrook__dag--vandaag .vivi-weekstrook__datum {
    background: var(--vivi-vlak-donker);
    color: var(--vivi-tekst-op-donker);
}
body.fi-panel-portal .vivi-weekstrook__stip {
    display: block;
    width: 6px;
    height: 6px;
    border-radius: var(--vivi-radius-rond);
    background: var(--vivi-accent);
}
body.fi-panel-portal .vivi-weekstrook__teller {
    min-width: 1.25rem;
    padding: 0 var(--vivi-ruimte-2xs);
    border-radius: var(--vivi-radius-pil);
    background: var(--vivi-accent-zacht);
    font-size: var(--vivi-tekst-s);
    font-weight: 500;
    font-variant-numeric: var(--vivi-cijfer-numeriek);
    line-height: 1.5;
    text-align: center;
    color: var(--vivi-tekst);
}

@media (min-width: 640px) {
    body.fi-panel-portal .vivi-weekstrook__dagen {
        gap: var(--vivi-ruimte-s);
    }
    body.fi-panel-portal .vivi-weekstrook__vak {
        align-items: flex-start;
        gap: var(--vivi-ruimte-2xs);
        min-height: 6.5rem;
        padding: var(--vivi-ruimte-s) var(--vivi-ruimte-m);
        background: var(--vivi-vlak);
    }
    body.fi-panel-portal a.vivi-weekstrook__vak:hover {
        background: var(--vivi-vlak-2);
    }
    /* Zonder url is een dag geen doel: geen vlak dat eruitziet als een knop
       (Kritiekpanel, advocaat van de klant). Vandaag houdt zijn donkere vlak. */
    body.fi-panel-portal span.vivi-weekstrook__vak {
        background: none;
    }
    body.fi-panel-portal a.vivi-weekstrook__vak:hover .vivi-weekstrook__datum {
        background: none;
    }
    body.fi-panel-portal .vivi-weekstrook__kort {
        display: none;
    }
    body.fi-panel-portal .vivi-weekstrook__lang {
        position: static;
        width: auto;
        max-width: 100%;
        height: auto;
        margin: 0;
        clip: auto;
        overflow: hidden;
        text-overflow: ellipsis;
        font-family: var(--vivi-type-label);
        font-variant-caps: var(--vivi-type-label-variant);
        letter-spacing: var(--vivi-type-label-spatie);
        font-size: var(--vivi-tekst-m);
        line-height: 1.2;
        color: var(--vivi-tekst-2);
    }
    body.fi-panel-portal .vivi-weekstrook__datum {
        display: block;
        width: auto;
        height: auto;
        border-radius: 0;
        background: none;
        font-size: var(--vivi-kop-m);
        letter-spacing: var(--vivi-type-display-spatie);
        line-height: 1.1;
    }
    body.fi-panel-portal .vivi-weekstrook__dag--vandaag .vivi-weekstrook__vak {
        background: var(--vivi-vlak-donker);
        color: var(--vivi-tekst-op-donker);
    }
    body.fi-panel-portal .vivi-weekstrook__dag--vandaag .vivi-weekstrook__datum {
        background: none;
        color: inherit;
    }
    body.fi-panel-portal .vivi-weekstrook__dag--vandaag .vivi-weekstrook__lang {
        color: color-mix(in srgb, var(--vivi-tekst-op-donker) 75%, var(--vivi-vlak-donker));
    }
    body.fi-panel-portal :is(.vivi-weekstrook__stip, .vivi-weekstrook__teller) {
        margin-top: auto;
    }
}

/* ---------------------------------------------------------------
   Actiekaart. Titel, één zin, één link als donkere pil rechtsonder. Geen
   icoonblok: de kaart vertelt wat er moet gebeuren, niet wat voor soort ding
   het is.
   --------------------------------------------------------------- */
body.fi-panel-portal .vivi-actiekaart {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--vivi-ruimte-s);
    min-height: 11rem;
    padding: var(--vivi-ruimte-l);
    border-radius: var(--vivi-radius-frame);
    background: var(--vivi-vlak);
    color: var(--vivi-tekst);
}
body.fi-panel-portal .vivi-actiekaart__titel {
    margin: 0;
    font-family: var(--vivi-type-display);
    font-size: var(--vivi-kop-s);
    font-weight: 400;
    letter-spacing: var(--vivi-type-display-spatie);
    line-height: 1.15;
    text-wrap: balance;
}
body.fi-panel-portal .vivi-actiekaart__zin {
    margin: 0;
    max-width: 48ch;
    font-size: var(--vivi-tekst-m);
    line-height: 1.45;
    color: var(--vivi-tekst-2);
    text-wrap: pretty;
}
body.fi-panel-portal .vivi-actiekaart__link {
    display: inline-flex;
    align-items: center;
    align-self: flex-end;
    margin-top: auto;
    min-height: var(--vivi-tik-min);
    padding: 0 var(--vivi-ruimte-l);
    border-radius: var(--vivi-radius-pil);
    background: var(--vivi-vlak-donker);
    font-size: var(--vivi-tekst-m);
    font-weight: 500;
    text-decoration: none;
    color: var(--vivi-tekst-op-donker);
}
body.fi-panel-portal .vivi-actiekaart__link:hover {
    text-decoration: underline;
    text-underline-offset: .18em;
}
/* De hele kaart is het doel; de ring blijft op de pil. */
body.fi-panel-portal .vivi-actiekaart__link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--vivi-radius-frame);
}

/* ---------------------------------------------------------------
   Ring. Een conic-gradient per stap van 10, zodat er geen inline breedte of
   eigen custom property nodig is. Het getal staat erin voor het oog, de
   waarde zelf zit in aria-valuenow. De boog is een lijn van 4 pixels: een
   masker snijdt het midden weg, zodat de ring op elk vlak staat zonder eigen
   schijf. Het masker leest alleen de alfa, de kleur erin doet er niet toe.
   --------------------------------------------------------------- */
body.fi-panel-portal .vivi-ringblok {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: var(--vivi-ruimte-xs);
    max-width: 12rem;
    vertical-align: top;
}
body.fi-panel-portal .vivi-ring__label {
    font-size: var(--vivi-tekst-s);
    line-height: 1.3;
    text-align: center;
    text-wrap: balance;
    color: var(--vivi-tekst-2);
}
body.fi-panel-portal .vivi-ring {
    position: relative;
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: var(--vivi-radius-rond);
}
body.fi-panel-portal .vivi-ring::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--vivi-lijn-fijn);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), var(--vivi-tekst) calc(100% - 4px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 4px), var(--vivi-tekst) calc(100% - 4px));
}
body.fi-panel-portal .vivi-ring__waarde {
    position: relative;
    font-family: var(--vivi-type-display);
    font-size: var(--vivi-tekst-m);
    font-weight: 400;
    letter-spacing: var(--vivi-type-display-spatie);
    font-variant-numeric: var(--vivi-cijfer-numeriek);
    line-height: 1;
    color: var(--vivi-tekst);
}
body.fi-panel-portal .vivi-ring--0::before { background: var(--vivi-lijn-fijn); }
body.fi-panel-portal .vivi-ring--10::before { background: conic-gradient(var(--vivi-accent) 0 10%, var(--vivi-lijn-fijn) 0); }
body.fi-panel-portal .vivi-ring--20::before { background: conic-gradient(var(--vivi-accent) 0 20%, var(--vivi-lijn-fijn) 0); }
body.fi-panel-portal .vivi-ring--30::before { background: conic-gradient(var(--vivi-accent) 0 30%, var(--vivi-lijn-fijn) 0); }
body.fi-panel-portal .vivi-ring--40::before { background: conic-gradient(var(--vivi-accent) 0 40%, var(--vivi-lijn-fijn) 0); }
body.fi-panel-portal .vivi-ring--50::before { background: conic-gradient(var(--vivi-accent) 0 50%, var(--vivi-lijn-fijn) 0); }
body.fi-panel-portal .vivi-ring--60::before { background: conic-gradient(var(--vivi-accent) 0 60%, var(--vivi-lijn-fijn) 0); }
body.fi-panel-portal .vivi-ring--70::before { background: conic-gradient(var(--vivi-accent) 0 70%, var(--vivi-lijn-fijn) 0); }
body.fi-panel-portal .vivi-ring--80::before { background: conic-gradient(var(--vivi-accent) 0 80%, var(--vivi-lijn-fijn) 0); }
body.fi-panel-portal .vivi-ring--90::before { background: conic-gradient(var(--vivi-accent) 0 90%, var(--vivi-lijn-fijn) 0); }
body.fi-panel-portal .vivi-ring--100::before { background: var(--vivi-accent); }

/* ---------------------------------------------------------------
   Stat, bestaande vorm. Het getal in het displayregister (400, tabelcijfers,
   --vivi-cijfer-xl zoals de moodboardregel 40 tot 56 pixels vraagt), het
   label eronder in het labelregister en tekst-2 in plaats van muted.
   Dit raakt ook de bestaande portaalschermen met een stat: analytics,
   content, project, website en groei (daar met de ruwe klassen).
   --------------------------------------------------------------- */
body.fi-panel-portal .vivi-stat__value {
    font-family: var(--vivi-type-display);
    font-size: var(--vivi-cijfer-xl);
    font-weight: 400;
    font-variant-numeric: var(--vivi-cijfer-numeriek);
    letter-spacing: var(--vivi-type-display-spatie);
    line-height: 1;
    color: var(--vivi-tekst);
}
/* 04 geeft elk kind van .vivi-rij min-width: 0. Met de grotere displaycijfers
   liep "18.400" op contentrapportage bij 375 16px over de volgende stat heen.
   In een rij wrapt een stat nu in plaats van te krimpen, zoals content.blade
   het bedoelt. */
body.fi-panel-portal .vivi-rij > .vivi-stat {
    min-width: min-content;
}
body.fi-panel-portal .vivi-stat--link {
    position: relative;
}
body.fi-panel-portal a.vivi-stat__value {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--vivi-ruimte-2xs);
    align-self: flex-start;
    min-width: var(--vivi-tik-min);
    min-height: var(--vivi-tik-min);
    text-decoration: none;
}
body.fi-panel-portal a.vivi-stat__value:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: .12em;
}
/* Label en trend horen bij hetzelfde doel: de link ligt over de hele stat. */
body.fi-panel-portal a.vivi-stat__value::after {
    content: "";
    position: absolute;
    inset: 0;
}
body.fi-panel-portal .vivi-stat__doorpijl {
    flex: none;
    width: 1.1rem;
    height: 1.1rem;
    margin-top: .1em;
    color: var(--vivi-tekst-2);
}
body.fi-panel-portal .vivi-stat--donker .vivi-stat__doorpijl {
    color: inherit;
}
body.fi-panel-portal .vivi-stat__label {
    font-family: var(--vivi-type-label);
    font-variant-caps: var(--vivi-type-label-variant);
    letter-spacing: var(--vivi-type-label-spatie);
    font-size: var(--vivi-tekst-m);
    line-height: 1.3;
    color: var(--vivi-tekst-2);
}
body.fi-panel-portal .vivi-stat__trend {
    font-size: var(--vivi-tekst-s);
    font-variant-numeric: var(--vivi-cijfer-numeriek);
    color: var(--vivi-tekst-2);
}
body.fi-panel-portal .vivi-stat--donker:not(.vivi-stat--doorwijs) {
    padding: var(--vivi-ruimte-l);
    border-radius: var(--vivi-radius-frame);
    background: var(--vivi-vlak-donker);
}
/* Staat er een donker kerncijfer in een rij, dan krijgen de lichte ernaast
   hetzelfde vlak, zodat getal en label op één lijn staan (was 18px verschil).
   Rijen zonder donker kerncijfer, zoals op de bestaande schermen, blijven kaal. */
body.fi-panel-portal :has(> .vivi-stat--donker:not(.vivi-stat--doorwijs)) > .vivi-stat:not(.vivi-stat--donker, .vivi-stat--doorwijs) {
    padding: var(--vivi-ruimte-l);
    border-radius: var(--vivi-radius-frame);
    background: var(--vivi-vlak);
}
body.fi-panel-portal .vivi-stat--donker :is(.vivi-stat__value, .vivi-stat__kop) {
    color: var(--vivi-tekst-op-donker);
}
body.fi-panel-portal .vivi-stat--donker :is(.vivi-stat__label, .vivi-stat__trend, .vivi-stat__actie) {
    color: color-mix(in srgb, var(--vivi-tekst-op-donker) 75%, var(--vivi-vlak-donker));
}

/* ---------------------------------------------------------------
   Stat, doorwijsvariant. Een kaart die naar een scherm wijst: icoon in een
   cirkel linksboven, pijl rechtsboven, de bestemming als kop onderaan in het
   displayregister, de actieregel eronder met vaste hoogte (twee regels), zodat
   koppen in een rij kaarten op één lijn staan, ook als een kaart geen actie
   heeft.
   --------------------------------------------------------------- */
body.fi-panel-portal .vivi-stat--doorwijs {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: 8.5rem;
    padding: var(--vivi-ruimte-m) var(--vivi-ruimte-m) var(--vivi-ruimte-m) var(--vivi-ruimte-m);
    border-radius: var(--vivi-radius-frame);
    background: var(--vivi-vlak);
    text-decoration: none;
    color: var(--vivi-tekst);
    transition: box-shadow .15s ease;
}
body.fi-panel-portal a.vivi-stat--doorwijs:hover {
    box-shadow: var(--vivi-schaduw-zweef);
}
body.fi-panel-portal :is(.vivi-stat__icirkel, .vivi-stat__pijl) {
    display: grid;
    place-items: center;
    width: var(--vivi-tik-min);
    height: var(--vivi-tik-min);
    border-radius: var(--vivi-radius-rond);
    background: var(--vivi-vlak-2);
    color: var(--vivi-tekst);
}
body.fi-panel-portal .vivi-stat__pijl {
    position: absolute;
    top: var(--vivi-ruimte-m);
    right: var(--vivi-ruimte-m);
}
body.fi-panel-portal .vivi-stat__ico {
    width: 1.25rem;
    height: 1.25rem;
}
body.fi-panel-portal .vivi-stat__kop {
    display: block;
    margin-top: auto;
    padding-top: var(--vivi-ruimte-m);
    padding-right: var(--vivi-ruimte-2xs);
    font-family: var(--vivi-type-display);
    font-size: var(--vivi-kop-s);
    font-weight: 400;
    letter-spacing: var(--vivi-type-display-spatie);
    line-height: 1.1;
    overflow-wrap: anywhere;
    text-wrap: balance;
}
body.fi-panel-portal .vivi-stat__actie {
    display: block;
    /* Twee regels plus de padding: border-box telt die mee in min-height. */
    min-height: calc(1.4em * 2 + var(--vivi-ruimte-2xs));
    padding-top: var(--vivi-ruimte-2xs);
    font-size: var(--vivi-tekst-s);
    line-height: 1.4;
    color: var(--vivi-tekst-2);
    text-wrap: pretty;
}
body.fi-panel-portal .vivi-stat--doorwijs.vivi-stat--donker {
    background: var(--vivi-vlak-donker);
    color: var(--vivi-tekst-op-donker);
}
body.fi-panel-portal .vivi-stat--donker :is(.vivi-stat__icirkel, .vivi-stat__pijl) {
    background: color-mix(in srgb, var(--vivi-tekst-op-donker) 14%, var(--vivi-vlak-donker));
    color: var(--vivi-tekst-op-donker);
}
/* Het focusverloop: goud naar het zachte rood uit 01, met een korrel erover.
   Er is (nog) geen rol voor een verloop in 09; de verzoekregel voor
   --vivi-verloop-focus staat in de oplevering. De korrel is een inline SVG
   zonder hexwaarde. Tekst op beide uiteinden is inkt (8,0:1 op goud, 10,9:1
   op fout-vlak); tekst-2 zou op goud onder 4,5 zakken. */
body.fi-panel-portal .vivi-stat--focus {
    background-color: var(--vivi-fout-vlak);
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='k'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .17 0 0 0 0 .14 0 0 0 0 .10 0 0 0 .20 0'/></filter><rect width='100%' height='100%' filter='url(%23k)'/></svg>"),
        radial-gradient(130% 150% at 0% 0%, var(--vivi-accent) 0%, color-mix(in srgb, var(--vivi-accent) 55%, var(--vivi-fout-vlak)) 50%, var(--vivi-fout-vlak) 100%);
    color: var(--vivi-tekst);
}
body.fi-panel-portal .vivi-stat--focus .vivi-stat__actie {
    color: var(--vivi-tekst);
}
body.fi-panel-portal .vivi-stat--focus .vivi-stat__icirkel {
    background: color-mix(in srgb, var(--vivi-vlak) 34%, transparent);
}
body.fi-panel-portal .vivi-stat--focus .vivi-stat__pijl {
    background: var(--vivi-vlak-donker);
    color: var(--vivi-tekst-op-donker);
}

@media (min-width: 1024px) {
    body.fi-panel-portal .vivi-stat--doorwijs {
        min-height: 9.5rem;
        padding: var(--vivi-ruimte-l) var(--vivi-ruimte-l) var(--vivi-ruimte-m);
    }
    body.fi-panel-portal .vivi-stat__kop {
        font-size: var(--vivi-kop-m);
    }
    body.fi-panel-portal .vivi-stat__actie {
        font-size: var(--vivi-tekst-m);
    }
}

/* ---------------------------------------------------------------
   Lege staat, uitlegvorm. Links uitgelijnd op een wit vlak: wat dit is (kop),
   waarom het leeg is, en de ene handeling. De bestaande gecentreerde vorm uit
   04 houdt zijn opmaak, op een ding na: de uitlegtekst stond in --vivi-muted
   (3,25:1 op cream-2, 3,98:1 op wit) en gaat in het portaal naar tekst-2.
   --------------------------------------------------------------- */
body.fi-panel-portal .vivi-empty__tekst {
    color: var(--vivi-tekst-2);
    text-wrap: pretty;
}
body.fi-panel-portal .vivi-empty--uitleg {
    display: grid;
    justify-items: start;
    gap: var(--vivi-ruimte-s);
    padding: var(--vivi-ruimte-xl) var(--vivi-ruimte-l);
    border-radius: var(--vivi-radius-frame);
    background: var(--vivi-vlak);
    text-align: left;
    color: var(--vivi-tekst);
}
body.fi-panel-portal .vivi-empty--uitleg .vivi-empty__title {
    margin: 0;
    font-family: var(--vivi-type-display);
    font-size: var(--vivi-kop-m);
    font-weight: 400;
    letter-spacing: var(--vivi-type-display-spatie);
    line-height: 1.15;
    color: var(--vivi-tekst);
    text-wrap: balance;
}
/* Koppen in twee tinten: de zachte regel onder de titel. */
body.fi-panel-portal .vivi-empty--uitleg :is(.vivi-empty__kop, .vivi-empty__zacht) {
    display: block;
    font-family: inherit;
}
body.fi-panel-portal .vivi-empty__zacht {
    color: var(--vivi-tekst-2);
}
body.fi-panel-portal .vivi-empty__waarom {
    margin: 0;
    max-width: 52ch;
    font-size: var(--vivi-tekst-m);
    line-height: 1.5;
    color: var(--vivi-tekst-2);
    text-wrap: pretty;
}
body.fi-panel-portal .vivi-empty__actie {
    display: flex;
    flex-wrap: wrap;
    gap: var(--vivi-ruimte-s);
    margin-top: var(--vivi-ruimte-xs);
}
/* De primaire handeling rechtsonder in de kaart, zoals op het moodboard. */
body.fi-panel-portal .vivi-empty--uitleg .vivi-empty__actie {
    justify-self: end;
    justify-content: flex-end;
}

/* ---------------------------------------------------------------
   Stijlproef (/portal/stijlproef, alleen voor medewerkers). Regels bovenaan,
   dan per component een blok met de staten. De wissel zet data-display op de
   wrapper; de uitzondering hieronder is de enige letterlijke fontnaam in
   deze laag, omdat 11 --vivi-type-display niet mag herdefiniëren.
   --------------------------------------------------------------- */
body.fi-panel-portal .vivi-proef {
    display: grid;
    gap: var(--vivi-ruimte-2xl);
    max-width: 76rem;
    color: var(--vivi-tekst);
}
body.fi-panel-portal .vivi-proef__intro {
    display: grid;
    gap: var(--vivi-ruimte-m);
    justify-items: start;
}
/* Lopende tekst op de proef zonder eenwoordige laatste regel. Met :where,
   zodat de eigen text-wrap van een component voorgaat. */
body.fi-panel-portal :where(.vivi-proef p, .vivi-proef dd) {
    text-wrap: pretty;
}
body.fi-panel-portal .vivi-proef__tekst {
    margin: 0;
    max-width: 62ch;
    font-size: var(--vivi-tekst-l);
    line-height: 1.5;
    color: var(--vivi-tekst-2);
}
body.fi-panel-portal .vivi-proef__regels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: var(--vivi-ruimte-l);
    margin: 0;
}
body.fi-panel-portal .vivi-proef__regel {
    display: grid;
    gap: var(--vivi-ruimte-xs);
    align-content: start;
    padding: var(--vivi-ruimte-l);
    border-radius: var(--vivi-radius-frame);
    background: var(--vivi-vlak);
}
body.fi-panel-portal .vivi-proef__regel dt {
    font-family: var(--vivi-type-label);
    font-variant-caps: var(--vivi-type-label-variant);
    letter-spacing: var(--vivi-type-label-spatie);
    font-size: var(--vivi-tekst-m);
    font-weight: 600;
    color: var(--vivi-tekst-2);
}
body.fi-panel-portal .vivi-proef__regel dd {
    margin: 0;
    font-size: var(--vivi-tekst-m);
    line-height: 1.5;
}
body.fi-panel-portal .vivi-proef__wissel {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--vivi-ruimte-2xs);
    padding: var(--vivi-ruimte-2xs);
    border-radius: var(--vivi-radius-frame);
    background: var(--vivi-vlak);
}
body.fi-panel-portal .vivi-proef__wissellabel {
    padding: 0 var(--vivi-ruimte-s);
    font-size: var(--vivi-tekst-s);
    color: var(--vivi-tekst-2);
}
body.fi-panel-portal .vivi-proef__wissel button {
    min-height: var(--vivi-tik-min);
    padding: 0 var(--vivi-ruimte-l);
    border: 0;
    border-radius: var(--vivi-radius-pil);
    background: transparent;
    font-family: var(--vivi-type-tekst);
    font-size: var(--vivi-tekst-m);
    color: var(--vivi-tekst);
    cursor: pointer;
}
body.fi-panel-portal .vivi-proef__wissel button[aria-pressed="true"] {
    background: var(--vivi-vlak-donker);
    color: var(--vivi-tekst-op-donker);
}
body.fi-panel-portal .vivi-proef__uitleg {
    margin: 0;
    max-width: 62ch;
    font-size: var(--vivi-tekst-s);
    line-height: 1.5;
    color: var(--vivi-tekst-2);
}
body.fi-panel-portal .vivi-proef__blok {
    display: grid;
    gap: var(--vivi-ruimte-l);
    min-width: 0;
}
body.fi-panel-portal .vivi-proef__blokkop {
    margin: 0;
    font-family: var(--vivi-type-display);
    font-size: var(--vivi-kop-m);
    font-weight: 400;
    letter-spacing: var(--vivi-type-display-spatie);
    line-height: 1.1;
    text-wrap: balance;
}
body.fi-panel-portal .vivi-proef__staten {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--vivi-ruimte-xl) var(--vivi-ruimte-l);
}
body.fi-panel-portal .vivi-proef__staat {
    display: grid;
    align-content: start;
    gap: var(--vivi-ruimte-s);
    min-width: 0;
}
body.fi-panel-portal .vivi-proef__staatnaam {
    margin: 0;
    padding-top: var(--vivi-ruimte-s);
    border-top: 1px solid var(--vivi-lijn-fijn);
    font-family: var(--vivi-type-label);
    font-variant-caps: var(--vivi-type-label-variant);
    letter-spacing: var(--vivi-type-label-spatie);
    font-size: var(--vivi-tekst-m);
    font-weight: 600;
    color: var(--vivi-tekst-2);
}
body.fi-panel-portal .vivi-proef__stapel {
    display: grid;
    gap: var(--vivi-ruimte-xs);
    min-width: 0;
}
body.fi-panel-portal .vivi-proef__rooster {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--vivi-ruimte-l);
}
/* Kaarten met een zin erin stapelen op smal; twee naast elkaar geven op 375
   regels van één of twee woorden. */
body.fi-panel-portal .vivi-proef__rooster--kaarten {
    grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 640px) {
    body.fi-panel-portal .vivi-proef__rooster--kaarten {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
body.fi-panel-portal .vivi-proef__rij {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--vivi-ruimte-m);
}
body.fi-panel-portal .vivi-proef__rij--eind {
    justify-content: flex-end;
}
body.fi-panel-portal .vivi-proef__melding {
    margin: 0;
    font-size: var(--vivi-tekst-s);
    color: var(--vivi-tekst-2);
}

@media (min-width: 1024px) {
    body.fi-panel-portal .vivi-proef__staten {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    body.fi-panel-portal .vivi-proef__staat--breed {
        grid-column: 1 / -1;
    }
}
/* Alleen kerncijfers staan met vier naast elkaar, vanaf 1280. Doorwijskaarten
   dragen een kop van twee of drie woorden en blijven twee breed: met vier
   bleef er naast de zijbalk 166 tot 210px per kaart over en brak "Offerte
   goedkeuren" in twee losse woorden (gemeten op 1024 en 1280). */
@media (min-width: 1280px) {
    body.fi-panel-portal .vivi-proef__rooster--cijfers {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* De wissel: de standaardstand laat het token zijn werk doen (Helvetica Neue
   uit het Adobe Fonts-webproject, anders die van het apparaat). De stand
   terugval toont wat een bezoeker ziet als het webproject niet laadt, ook op
   een Mac. Uitzondering op "alleen var(--vivi-*)", gemeld in de oplevering. */
body.fi-panel-portal .vivi-proef[data-display="terugval"] :is(.vivi-groet__kop, .vivi-stat__value, .vivi-stat__kop, .vivi-ring__waarde, .vivi-actiekaart__titel, .vivi-weekstrook__datum, .vivi-empty--uitleg .vivi-empty__title, .vivi-proef__blokkop) {
    font-family: Helvetica, Arial, sans-serif;
}

/* ---------------------------------------------------------------
   Het woordmerk (x-vivi.woordmerk): de gouden blob met "Vivimus
   Creatives" als contour uit het huisstijlbestand. Eén hoogte overal,
   zodat het merk in de zijbalk, op de inlogdeur en op de deellink even
   groot staat. Niet gescoped op het portaal: ook Admin en Team en de
   deellinkpagina tonen het.
   --------------------------------------------------------------- */
.vivi-woordmerk {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    line-height: 0;
}
.vivi-woordmerk img {
    display: block;
    width: auto;
}
.vivi-woordmerk__merk {
    height: 1.25rem;
}
.vivi-woordmerk__blob {
    height: 1.5rem;
}

/* Filament-lijstpagina's (Facturen, Offertes, Contracten, Formulieren):
   dezelfde kop als de titelvorm van x-vivi.groet, zodat er één koppensysteem
   is in plaats van drie. De balk krijgt de kleur van het vlak waar hij op
   ligt; de creme band las als een tweede laag boven op het witte frame. */
body.fi-panel-portal .fi-header {
    background-color: var(--vivi-cream);
}
@media (min-width: 640px) {
    body.fi-panel-portal .fi-header {
        background-color: var(--vivi-vlak);
    }
}
/* Vanaf 1024 plakt 02 de kop op 0. In het portaal staat daar de topbalk van
   64px (h-16, met bel en wat-wacht) die ook plakt; de kop schoof eronder en
   liet onder zich een strook van 12px over waar de inhoud doorheen liep
   (gemeten 23-10-2026 bij 1440 op /portal/redactie/nieuw en
   /portal/events/create). Hier plakt hij er direct onder. Alleen als het
   profiel niet in de kop staat: dan klapt 02 de topbalk in tot 0. */
@media (min-width: 1024px) {
    body.fi-panel-portal:not(:has(.vivi-hoofdbalk__profiel)) .fi-header {
        top: 4rem;
    }
}
body.fi-panel-portal .fi-header-heading {
    font-family: var(--vivi-type-display) !important;
    font-weight: 400;
    letter-spacing: var(--vivi-type-display-spatie);
    font-size: var(--vivi-kop-l) !important;
    line-height: 1.15;
    /* Een lang samengesteld woord past op een telefoon niet in de kop: op 375
       was "Samenwerkingsovereenkomst" 431px in een kop van 343px, en de
       lay-out knipte de rest weg (gemeten 07-10). Afbreken op lettergrepen
       ("Samenwerkings-" en "overeenkomst 2026"); break-word vangt alleen een
       woord zonder afbreekpunt. Balance houdt "2026" bij zijn woord in plaats
       van alleen op de laatste regel. Op desktop blijft de kop op een regel.
       Minstens drie letters voor en na het streepje: zonder die ondergrens
       brak "fotografie" op 375 als "fo-" en "tografie". WebKit (Safari) kent
       hyphenate-limit-chars niet en krijgt dezelfde ondergrens via de
       -webkit-hyphenate-limit-eigenschappen. */
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
    hyphenate-limit-chars: auto 3 3;
    -webkit-hyphenate-limit-before: 3;
    -webkit-hyphenate-limit-after: 3;
    text-wrap: balance;
}

/* Pagineren is bediening voor lange lijsten. Een klant met twee facturen
   hoeft geen "Per pagina" te kiezen en geen "Toont 1 tot 2 van 2" te lezen:
   de voet verdwijnt zolang er geen tweede pagina is. */
body.fi-panel-portal .fi-ta-ctn .fi-pagination-records-per-page-select {
    display: none;
}
body.fi-panel-portal .fi-ta-pagination:not(:has(.fi-pagination-items, .fi-pagination-next-btn, .fi-pagination-previous-btn)) {
    display: none;
}


/* x-vivi.page-header (Dashboard, Taken, Website, Documenten): dezelfde
   displayletter als de groet en de Filament-lijstkop. Drie paginakoppen in
   drie letters was de grootste bron van onrust tussen de schermen. */
body.fi-panel-portal .vivi-page-title {
    font-family: var(--vivi-type-display);
    font-weight: 400;
    letter-spacing: var(--vivi-type-display-spatie);
    font-size: var(--vivi-kop-l);
    line-height: 1.15;
}

/* Velden zonder bewerkrecht: een fieldset met disabled zet elk invoerveld
   erin uit, ook de upload (SiteCms, SiteItem). De fieldset zelf hoort niets
   aan de vorm toe te voegen; --kaal haalt ook rand en binnenruimte weg waar
   hij geen kaart is. */
.vivi-veldset {
    margin: 0;
    min-width: 0;
}
.vivi-veldset--kaal {
    border: 0;
    padding: 0;
}

/* Een Filament-actie in de paginakop (Team: "Collega uitnodigen"). Gemeten
   09-10-2026: 36 hoog en 8px hoek; nu een pil op tikmaat. Herontwerp
   22-10-2026: de hoofdactie van het scherm is goud met inkt erop (AA, zoals
   .vivi-btn--primary), want het anker is het enige donkere vlak en goud is de
   ene knop waar het oog begint. Staat er op hetzelfde scherm al een gouden
   knop (eerste ankerrij, .vivi-btn--primary of een andere primaire
   Filament-knop), dan wordt deze een gewone lichte knop: er is per scherm
   hooguit een gouden knop, en dat bewaakt deze regel zelf in plaats van een
   handmatige controle per pagina. */
body.fi-panel-portal .vivi-page-header__acties .fi-btn {
    min-height: var(--vivi-tik-min);
    padding-inline: 20px;
    border-radius: var(--vivi-radius-pil);
}
body.fi-panel-portal .vivi-page-header__acties .fi-btn.fi-color-primary:not(.fi-btn-outlined) {
    background: var(--vivi-accent);
    box-shadow: none;
}
body.fi-panel-portal .vivi-page-header__acties .fi-btn.fi-color-primary:not(.fi-btn-outlined) :is(.fi-btn-label, .fi-btn-icon) {
    color: var(--vivi-accent-tekst);
}
body.fi-panel-portal .vivi-page-header__acties .fi-btn.fi-color-primary:not(.fi-btn-outlined):hover {
    background: var(--vivi-accent-druk);
}
body.fi-panel-portal .fi-main:has(.vivi-btn--primary, .vivi-anker__knop--eerst, .fi-btn.fi-color-primary:not(.fi-btn-outlined):not(.vivi-page-header__acties *)) .vivi-page-header__acties .fi-btn.fi-color-primary:not(.fi-btn-outlined) {
    background: var(--vivi-vlak);
    box-shadow: inset 0 0 0 1px var(--vivi-line-strong);
}
body.fi-panel-portal .fi-main:has(.vivi-btn--primary, .vivi-anker__knop--eerst, .fi-btn.fi-color-primary:not(.fi-btn-outlined):not(.vivi-page-header__acties *)) .vivi-page-header__acties .fi-btn.fi-color-primary:not(.fi-btn-outlined) :is(.fi-btn-label, .fi-btn-icon) {
    color: var(--vivi-tekst);
}
body.fi-panel-portal .fi-main:has(.vivi-btn--primary, .vivi-anker__knop--eerst, .fi-btn.fi-color-primary:not(.fi-btn-outlined):not(.vivi-page-header__acties *)) .vivi-page-header__acties .fi-btn.fi-color-primary:not(.fi-btn-outlined):hover {
    background: var(--vivi-vlak-2);
}

/* ---- Herontwerp 22-10-2026: staat, anker, meter, staattegel ----
   De vier bouwstenen uit STUDIE-inspiratie (portaal-herontwerp op de Drive).
   Elke pagina gebruikt deze en maakt geen eigen variant: een staat ziet er
   overal hetzelfde uit, zodat het oog hem na twee schermen herkent zonder
   te lezen. */

/* Staat: stip plus woord, nooit kleur alleen (regel 1). De stip is 8px, zo
   klein dat hij geen versiering wordt en zo groot dat je hem in een rij van
   vier tegels op armlengte ziet. Het woord staat in het labelregister, zodat
   het als status leest en niet als zin. */
body.fi-panel-portal .vivi-staat {
    display: inline-flex;
    align-items: center;
    gap: var(--vivi-ruimte-xs);
    font-family: var(--vivi-type-label);
    font-size: var(--vivi-tekst-s);
    font-weight: 500;
    font-variant-caps: var(--vivi-type-label-variant);
    letter-spacing: var(--vivi-type-label-spatie);
    line-height: 1.2;
    color: var(--vivi-tekst-2);
    white-space: nowrap;
}
body.fi-panel-portal .vivi-staat::before {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: var(--vivi-radius-rond);
    background: var(--vivi-staat-stil);
}
body.fi-panel-portal .vivi-staat--ok::before { background: var(--vivi-staat-ok); }
body.fi-panel-portal .vivi-staat--let-op::before { background: var(--vivi-staat-let-op); }
body.fi-panel-portal .vivi-staat--actie::before { background: var(--vivi-staat-actie); }
body.fi-panel-portal .vivi-staat--actie { color: var(--vivi-tekst); }

/* Anker: het ene donkere vlak per scherm, alleen voor "wacht op jou"
   (regel 3). Wacht er niets, dan wordt het licht en rustig: donker betekent
   dan iets en verliest zijn kracht niet doordat het er altijd staat. */
body.fi-panel-portal .vivi-anker {
    display: flex;
    flex-direction: column;
    gap: var(--vivi-ruimte-m);
    min-width: 0;
    padding: var(--vivi-ruimte-xl);
    border-radius: var(--vivi-radius-kaart);
    background: var(--vivi-vlak-donker);
    color: var(--vivi-tekst-op-donker);
}
body.fi-panel-portal .vivi-anker--rust {
    background: var(--vivi-vlak);
    color: var(--vivi-tekst);
    border: 1px solid var(--vivi-lijn-fijn);
}
body.fi-panel-portal .vivi-anker__kop {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--vivi-ruimte-m);
}
body.fi-panel-portal .vivi-anker__titel {
    margin: 0;
    font-family: var(--vivi-type-display);
    font-size: var(--vivi-kop-s);
    font-weight: 500;
    letter-spacing: var(--vivi-type-display-spatie);
    line-height: 1.15;
    color: inherit;
}
body.fi-panel-portal .vivi-anker__alles {
    font-size: var(--vivi-tekst-s);
    color: var(--vivi-tekst-2-op-donker);
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
}
body.fi-panel-portal .vivi-anker--rust .vivi-anker__alles { color: var(--vivi-tekst-2); }
body.fi-panel-portal .vivi-anker__lijst {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}
body.fi-panel-portal .vivi-anker__rij {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--vivi-ruimte-m);
    min-height: var(--vivi-tik-min);
    padding-block: var(--vivi-ruimte-s);
}
body.fi-panel-portal .vivi-anker__rij + .vivi-anker__rij {
    border-top: 1px solid color-mix(in srgb, var(--vivi-tekst-op-donker) 14%, transparent);
}
body.fi-panel-portal .vivi-anker__tekst {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
body.fi-panel-portal .vivi-anker__regel {
    font-size: var(--vivi-tekst-l);
    font-weight: 500;
    line-height: 1.3;
    color: var(--vivi-tekst-op-donker);
}
body.fi-panel-portal .vivi-anker__meta {
    font-size: var(--vivi-tekst-s);
    line-height: 1.4;
    color: var(--vivi-tekst-2-op-donker);
}
body.fi-panel-portal .vivi-anker .vivi-staat { color: var(--vivi-tekst-2-op-donker); }
body.fi-panel-portal .vivi-anker .vivi-staat--let-op::before { background: var(--vivi-accent); }
body.fi-panel-portal .vivi-anker .vivi-staat--actie::before { background: var(--vivi-staat-actie-op-donker); }
body.fi-panel-portal .vivi-anker .vivi-staat--actie { color: var(--vivi-tekst-op-donker); }
body.fi-panel-portal .vivi-anker--rust .vivi-anker__meta,
body.fi-panel-portal .vivi-anker--rust .vivi-anker__regel { color: var(--vivi-tekst-2); }

/* Alleen de eerste rij krijgt goud (regel 2). De rest is een omlijnde pil:
   zelfde doel, lager in de rangorde, zodat het oog bij de bovenste begint. */
body.fi-panel-portal .vivi-anker__knop {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 var(--vivi-ruimte-l);
    border-radius: var(--vivi-radius-pil);
    border: 1px solid color-mix(in srgb, var(--vivi-tekst-op-donker) 40%, transparent);
    font-size: var(--vivi-tekst-m);
    font-weight: 500;
    color: var(--vivi-tekst-op-donker);
    white-space: nowrap;
    transition: background-color .15s ease, border-color .15s ease;
}
body.fi-panel-portal .vivi-anker__knop:hover {
    border-color: var(--vivi-tekst-op-donker);
    background: color-mix(in srgb, var(--vivi-tekst-op-donker) 10%, transparent);
}
body.fi-panel-portal .vivi-anker__knop--eerst {
    background: var(--vivi-accent);
    border-color: var(--vivi-accent);
    color: var(--vivi-accent-tekst);
}
body.fi-panel-portal .vivi-anker__knop--eerst:hover {
    background: var(--vivi-accent-druk);
    border-color: var(--vivi-accent-druk);
}
body.fi-panel-portal .vivi-anker__knop:focus-visible { outline: none; box-shadow: var(--vivi-focusring); }

/* Meter: voortgang als inkt op een lichte goot (regel 4). Een echt
   progress-element, zodat de breedte uit value komt en niet uit een inline
   style; schermlezers lezen hem als voortgangsbalk. */
body.fi-panel-portal .vivi-meter {
    display: block;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    height: 6px;
    border: 0;
    border-radius: var(--vivi-radius-pil);
    background: var(--vivi-meter-goot);
    color: var(--vivi-meter-vul);
    overflow: hidden;
    appearance: none;
}
body.fi-panel-portal .vivi-meter::-webkit-progress-bar { background: var(--vivi-meter-goot); border-radius: var(--vivi-radius-pil); }
body.fi-panel-portal .vivi-meter::-webkit-progress-value { background: var(--vivi-meter-vul); border-radius: var(--vivi-radius-pil); }
body.fi-panel-portal .vivi-meter::-moz-progress-bar { background: var(--vivi-meter-vul); border-radius: var(--vivi-radius-pil); }
body.fi-panel-portal .vivi-meter__rij {
    display: flex;
    align-items: center;
    gap: var(--vivi-ruimte-s);
}
body.fi-panel-portal .vivi-meter__teller {
    flex: none;
    font-size: var(--vivi-tekst-s);
    font-variant-numeric: var(--vivi-cijfer-numeriek);
    color: var(--vivi-tekst-2);
}

/* Staattegel: een onderdeel van de klant (website, projecten, social,
   geld) met zijn staat en precies een feit. Bovenaan staat en pijl, dan de
   naam, dan het feit. Geen icoonbol meer: de staat is het signaal, een
   icoon ernaast was een tweede signaal dat niets zei (STUDIE, pin 13). */
body.fi-panel-portal .vivi-staattegel {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--vivi-ruimte-s);
    min-width: 0;
    padding: var(--vivi-ruimte-l) var(--vivi-ruimte-l) var(--vivi-ruimte-xl);
    border-radius: var(--vivi-radius-kaart);
    background: var(--vivi-vlak);
    border: 1px solid var(--vivi-lijn-fijn);
    color: var(--vivi-tekst);
    text-decoration: none;
    transition: border-color .15s ease, transform .15s ease;
}
body.fi-panel-portal a.vivi-staattegel:hover {
    border-color: var(--vivi-line-strong);
    transform: translateY(-1px);
}
body.fi-panel-portal a.vivi-staattegel:focus-visible { outline: none; box-shadow: var(--vivi-focusring); }
/* Kop linksboven, de staat (stip en woord) er direct onder, de pijl
   rechtsboven (pin 10 en 13): eerst wat het is, dan hoe het staat. */
body.fi-panel-portal .vivi-staattegel__boven {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--vivi-ruimte-s);
    min-height: 24px;
}
body.fi-panel-portal .vivi-staattegel__staat {
    align-self: flex-start;
    margin-top: calc(var(--vivi-ruimte-xs) * -1);
}
body.fi-panel-portal .vivi-staattegel__pijl {
    width: 18px;
    height: 18px;
    flex: none;
    margin-top: 2px;
    color: var(--vivi-tekst-2);
}
body.fi-panel-portal .vivi-staattegel__kop {
    margin: 0;
    min-width: 0;
    font-family: var(--vivi-type-display);
    font-size: var(--vivi-kop-s);
    font-weight: 500;
    letter-spacing: var(--vivi-type-display-spatie);
    line-height: 1.15;
    color: var(--vivi-tekst);
}
body.fi-panel-portal .vivi-staattegel__kop a {
    color: inherit;
    text-decoration: none;
}
body.fi-panel-portal .vivi-staattegel__feit {
    margin: 0;
    font-size: var(--vivi-tekst-m);
    line-height: 1.45;
    color: var(--vivi-tekst-2);
    overflow-wrap: anywhere;
}
body.fi-panel-portal .vivi-staattegel__feit b { font-weight: 500; color: var(--vivi-tekst); }
body.fi-panel-portal .vivi-staattegel__voet {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--vivi-ruimte-s);
    margin-top: auto;
    padding-top: var(--vivi-ruimte-s);
}
body.fi-panel-portal .vivi-staattegel__link {
    font-size: var(--vivi-tekst-m);
    font-weight: 500;
    color: var(--vivi-tekst);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* --- Bestandkiezer (x-vivi.bestandkiezer, 29-10-2026). Het native veld zegt
       "Choose Files / No file chosen" in de taal van de browser. Het veld blijft
       in de toegankelijkheidsboom en krijgt de focus; het label ernaast is de
       zichtbare knop en toont de focusring van het veld. --- */
body.fi-panel-portal .vivi-bestandkiezer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--vivi-ruimte-s);
    min-width: 0;
}
body.fi-panel-portal .vivi-bestandkiezer__veld {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
body.fi-panel-portal .vivi-bestandkiezer__knop {
    min-height: var(--vivi-tik-min);
    cursor: pointer;
}
body.fi-panel-portal .vivi-bestandkiezer__veld:focus-visible + .vivi-bestandkiezer__knop {
    box-shadow: var(--vivi-ring-focus);
}
body.fi-panel-portal .vivi-bestandkiezer__naam {
    flex: 1 1 12rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--vivi-tekst-s);
    color: var(--vivi-tekst-2);
}

/* ==== Portaal-UI: dashboard ==== */
/* Eigenaar: Portaal-UI5. Het klantdashboard volgens mockup v3 en het Loïs-paneel.
   Regels: alles onder body.fi-panel-portal, alleen var(--vivi-*) uit 09 en 01,
   geen hexwaarde en geen nieuwe --vivi-*-definitie (TokensPortaalTest), alleen
   de breekpunten uit Stijllaag::BREEKPUNTEN. Zie docs/PORTAAL-UI.md.

   Herontwerp 22-10-2026: zoekpil en groet uit mockup v3 blijven; daaronder
   het anker naast de week, dan de onderdelen. Een donker vlak (het anker,
   alleen als er iets wacht), een goud (de eerste knop daarin), vandaag in
   inkt. De rest is licht en omlijnd. */

/* ---- Frame ------------------------------------------------------ */
body.fi-panel-portal .vivi-dash {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    color: var(--vivi-tekst);
}
body.fi-panel-portal .vivi-dash > * {
    min-width: 0;
}

/* ---- Bovenregel: zoekpil, bedrijfskeuze, aanvraag --------------- */
body.fi-panel-portal .vivi-dash__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}
body.fi-panel-portal .vivi-dash__zoek {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 100%;
    min-width: 0;
    height: 52px;
    padding: 0 4px;
    border-radius: var(--vivi-radius-pil);
    background: var(--vivi-vlak-2);
    color: var(--vivi-tekst-2);
}
body.fi-panel-portal .vivi-dash__zoek:focus-within {
    box-shadow: var(--vivi-focusring);
}
body.fi-panel-portal :is(.vivi-dash__zoekicoon, .vivi-dash__stuur) {
    display: grid;
    place-items: center;
    flex: none;
    width: var(--vivi-tik-min);
    height: var(--vivi-tik-min);
    border: 0;
    border-radius: var(--vivi-radius-rond);
    background: var(--vivi-vlak);
    color: var(--vivi-tekst);
}
body.fi-panel-portal .vivi-dash__stuur {
    background: var(--vivi-vlak-donker);
    color: var(--vivi-tekst-op-donker);
    cursor: pointer;
}
body.fi-panel-portal .vivi-dash__ico {
    width: 1.15rem;
    height: 1.15rem;
}
body.fi-panel-portal .vivi-dash__zoekveld {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 14px;
    color: var(--vivi-tekst);
}
body.fi-panel-portal .vivi-dash__zoekveld::placeholder {
    color: var(--vivi-tekst-2);
    opacity: 1;
}
body.fi-panel-portal .vivi-dash__kbd {
    display: none;
    padding: 2px 8px;
    border-radius: 6px;
    background: var(--vivi-vlak);
    font-family: inherit;
    font-size: 11.5px;
    color: var(--vivi-tekst-2);
}
body.fi-panel-portal .vivi-dash__acties {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}
body.fi-panel-portal .vivi-dash__aanvraag {
    display: inline-flex;
    align-items: center;
    min-height: var(--vivi-tik-min);
    padding: 0 16px;
    border-radius: var(--vivi-radius-pil);
    background: var(--vivi-vlak-2);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--vivi-tekst);
    text-decoration: none;
    white-space: nowrap;
}
body.fi-panel-portal .vivi-dash__aanvraag:hover {
    background: var(--vivi-accent-zacht);
}

/* ---- Groet ------------------------------------------------------ */
body.fi-panel-portal .vivi-dash__groet {
    margin-top: 14px;
}
body.fi-panel-portal .vivi-dash__groet .vivi-groet__datum {
    font-size: var(--vivi-tekst-s);
}
body.fi-panel-portal .vivi-dash__groet .vivi-groet__kop {
    font-size: 32px;
    line-height: 1.08;
}

/* ---- Herontwerp 22-10-2026: anker, week, onderdelen --------------
   Drie vragen in leesvolgorde (IA-BOOM op de Drive): wacht er iets op mij,
   wat komt eraan, hoe staat de rest erbij. Het anker is het enige donkere
   vlak; de week en de onderdelen zijn licht en omlijnd, zodat het oog bij
   het anker begint. De bouwstenen (anker, staat, meter, staattegel) staan in
   11; hier alleen hoe het dashboard ze schikt. */

/* Rij 1: anker naast de week. Geen align-items hier: KaartEnZweefknopTest
   houdt de rasters op start uit 03, zodat een kort blok niet uitrekt. */
body.fi-panel-portal .vivi-dash__onder {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--vivi-ruimte-l);
}
body.fi-panel-portal .vivi-dash__week {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: var(--vivi-ruimte-l) var(--vivi-ruimte-l) var(--vivi-ruimte-m);
    border-radius: var(--vivi-radius-kaart);
    background: var(--vivi-vlak);
    border: 1px solid var(--vivi-lijn-fijn);
}
body.fi-panel-portal .vivi-dash__kop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--vivi-ruimte-m);
    margin-bottom: var(--vivi-ruimte-m);
}
body.fi-panel-portal .vivi-dash__koptekst {
    margin: 0;
    font-size: var(--vivi-tekst-m);
    font-weight: 500;
    color: var(--vivi-tekst);
}
body.fi-panel-portal .vivi-dash__onderdelen > .vivi-dash__koptekst {
    margin-bottom: var(--vivi-ruimte-m);
}
body.fi-panel-portal .vivi-dash__subkop {
    margin: var(--vivi-ruimte-l) 0 var(--vivi-ruimte-xs);
    font-size: var(--vivi-tekst-s);
    font-weight: 500;
    color: var(--vivi-tekst-2);
}
body.fi-panel-portal .vivi-dash__kopknop {
    display: inline-flex;
    align-items: center;
    min-height: var(--vivi-tik-min);
    padding: 0 var(--vivi-ruimte-m);
    border-radius: var(--vivi-radius-pil);
    font-size: var(--vivi-tekst-s);
    color: var(--vivi-tekst);
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
}
body.fi-panel-portal .vivi-dash__kopknop:hover {
    background: var(--vivi-vlak-2);
}

/* De week als strook: zeven gelijke vakjes met letter, dag en een stip als
   er iets staat. Hoe vol de week is zie je zonder te lezen; wat er staat,
   staat eronder. Vandaag is het enige vakje in inkt. Past op 390 (zeven keer
   40px), dus geen veegstrook meer. */
body.fi-panel-portal .vivi-dash__dagen {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: var(--vivi-ruimte-xs);
    margin: 0;
    padding: 0;
    list-style: none;
}
body.fi-panel-portal .vivi-dash__dag {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 0;
    padding: var(--vivi-ruimte-s) 0;
    border-radius: var(--vivi-radius-binnen);
    background: var(--vivi-vlak-2);
}
body.fi-panel-portal .vivi-dash__wd {
    font-size: var(--vivi-tekst-s);
    color: var(--vivi-tekst-2);
}
body.fi-panel-portal .vivi-dash__num {
    font-family: var(--vivi-type-display);
    letter-spacing: var(--vivi-type-display-spatie);
    font-size: var(--vivi-tekst-l);
    font-weight: 500;
    line-height: 1.1;
    font-variant-numeric: var(--vivi-cijfer-numeriek);
}
body.fi-panel-portal .vivi-dash__stip {
    width: 6px;
    height: 6px;
    border-radius: var(--vivi-radius-rond);
    background: transparent;
}
body.fi-panel-portal .vivi-dash__dag--vol .vivi-dash__stip {
    background: var(--vivi-tekst);
}
body.fi-panel-portal .vivi-dash__dag--nu {
    background: var(--vivi-vlak-donker);
    color: var(--vivi-tekst-op-donker);
}
body.fi-panel-portal .vivi-dash__dag--nu .vivi-dash__wd {
    color: var(--vivi-tekst-2-op-donker);
}
body.fi-panel-portal .vivi-dash__dag--nu.vivi-dash__dag--vol .vivi-dash__stip {
    background: var(--vivi-accent);
}
body.fi-panel-portal .vivi-dash__leeg {
    margin: var(--vivi-ruimte-s) 0 0;
    font-size: var(--vivi-tekst-s);
    color: var(--vivi-tekst-2);
}

/* Wat eraan komt: kring met de datum, titel en soort eronder. */
body.fi-panel-portal .vivi-dash__hrij {
    display: flex;
    align-items: center;
    gap: var(--vivi-ruimte-m);
    min-height: var(--vivi-tik-min);
    padding: var(--vivi-ruimte-s) 0;
    color: var(--vivi-tekst);
    text-decoration: none;
}
body.fi-panel-portal .vivi-dash__hrij + .vivi-dash__hrij {
    border-top: 1px solid var(--vivi-lijn-fijn);
}
body.fi-panel-portal .vivi-dash__hicirkel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: var(--vivi-radius-rond);
    background: var(--vivi-vlak-2);
    line-height: 1;
}
body.fi-panel-portal .vivi-dash__hdag {
    font-size: var(--vivi-tekst-m);
    font-weight: 500;
}
body.fi-panel-portal .vivi-dash__hmaand {
    font-size: 10px;
    color: var(--vivi-tekst-2);
}
body.fi-panel-portal .vivi-dash__htekst {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
body.fi-panel-portal .vivi-dash__htekst b {
    font-size: var(--vivi-tekst-m);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.fi-panel-portal .vivi-dash__htekst span {
    font-size: var(--vivi-tekst-s);
    color: var(--vivi-tekst-2);
}
body.fi-panel-portal a.vivi-dash__hrij:hover b {
    text-decoration: underline;
}

/* Rij 2: de onderdelen. Mobiel onder elkaar, vanaf 640 twee naast elkaar,
   vanaf 1024 alle op een rij, hoeveel het er ook zijn (twee tot vier). */
body.fi-panel-portal .vivi-dash__rij {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--vivi-ruimte-l);
}
body.fi-panel-portal .vivi-dash__rij > * {
    min-width: 0;
    margin: 0;
}
body.fi-panel-portal .vivi-dash__voet {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--vivi-ruimte-s);
    padding-top: var(--vivi-ruimte-m);
    font-size: var(--vivi-tekst-s);
    color: var(--vivi-tekst-2);
}

/* Titel in het anker: tot twee regels in plaats van een afgeknipte regel.
   "1 contract wacht op je handtekening" is 251px en kreeg 223px op 375 en
   214,6px op 1440 (gemeten 07-10). De rij wordt hoger, het tekstblok houdt
   zijn breedte en de knop blijft staan. Balance houdt "handtekening" niet
   alleen op de tweede regel; een titel van drie regels wordt pas daar
   afgekapt. Dezelfde ondergrens voor afbreken als de paginakop in 11. */
body.fi-panel-portal .vivi-ux0-aandacht__titel {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    -webkit-hyphens: auto;
    hyphens: auto;
    hyphenate-limit-chars: auto 3 3;
    -webkit-hyphenate-limit-before: 3;
    -webkit-hyphenate-limit-after: 3;
    overflow-wrap: break-word;
    text-wrap: balance;
    font-size: var(--vivi-tekst-l);
    font-weight: 500;
    line-height: 1.3;
}
/* In het donkere anker is de titel licht: .vivi-regel uit 04 zet inkt, en
   inkt op inkt was onzichtbaar (render 22-10). */
body.fi-panel-portal .vivi-anker .vivi-ux0-aandacht__titel {
    color: var(--vivi-tekst-op-donker);
}
body.fi-panel-portal .vivi-anker__rij .vivi-staat {
    align-self: flex-start;
}

@media (min-width: 640px) {
    body.fi-panel-portal .vivi-dash__zoek {
        flex: 0 1 440px;
        padding-right: 16px;
    }
    body.fi-panel-portal .vivi-dash__kbd {
        display: inline-block;
        margin-left: auto;
    }
    body.fi-panel-portal .vivi-dash__stuur {
        display: none;
    }
    body.fi-panel-portal .vivi-dash__groet .vivi-groet__kop {
        font-size: 40px;
    }
    body.fi-panel-portal .vivi-dash__rij {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    body.fi-panel-portal .vivi-dash__groet {
        margin-top: 18px;
    }
    body.fi-panel-portal .vivi-dash__groet .vivi-groet__kop {
        font-size: 46px;
    }
    body.fi-panel-portal .vivi-dash__onder {
        grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    }
    body.fi-panel-portal .vivi-dash__rij {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
    }
}

/* ---- Loïs-paneel ------------------------------------------------ */
body.fi-panel-portal .vivi-lois [x-cloak] {
    display: none !important;
}
/* De pil onderin de rail (teleport naar het slot uit schil/railvoet). */
body.fi-panel-portal .vivi-lois__pil {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    padding: 0 16px;
    border: 0;
    border-radius: var(--vivi-radius-pil);
    background: color-mix(in srgb, var(--vivi-tekst-op-donker) 8%, var(--vivi-vlak-donker));
    font-size: 13.5px;
    font-weight: 500;
    color: var(--vivi-tekst-op-donker);
    cursor: pointer;
}
body.fi-panel-portal .vivi-lois__pil:hover {
    background: color-mix(in srgb, var(--vivi-tekst-op-donker) 14%, var(--vivi-vlak-donker));
}
body.fi-panel-portal .vivi-lois__pil:focus-visible {
    box-shadow: var(--vivi-focusring);
}
body.fi-panel-portal .vivi-lois__stip {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: var(--vivi-radius-rond);
    background: var(--vivi-accent);
}
body.fi-panel-portal .vivi-lois__pillabel {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.fi-panel-portal .vivi-lois__toets {
    margin-left: auto;
    font-size: 11px;
    color: color-mix(in srgb, var(--vivi-tekst-op-donker) 60%, var(--vivi-vlak-donker));
}

/* Zwevende knop: alleen waar de rail een lade is. */
body.fi-panel-portal .vivi-lois__zweef {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 40;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border: 0;
    border-radius: var(--vivi-radius-rond);
    background: var(--vivi-vlak-donker);
    color: var(--vivi-tekst-op-donker);
    box-shadow: var(--vivi-schaduw-drijf);
    cursor: pointer;
}
/* Een Filament-modal ligt ook op z-index 40. De knop staat later in de DOM en
   won, dus op 320px lag hij boven het venster, over de velden en de knoppen
   (gemeten 22-10-2026 op /portal/team, Collega uitnodigen). Zolang een modal
   open is valt er voor Lois niets te doen: de knop gaat weg en komt terug na
   sluiten. Bewaakt in KaartEnZweefknopTest. */
body.fi-panel-portal:has(.fi-modal-open) .vivi-lois__zweef {
    display: none;
}
/* Op een lange pagina ligt de knop altijd over iets: op 390x844 dekte hij op
   Bezoekcijfers het getal en de pijl van de eerste rij (gemeten 23-10-2026,
   main d09cc180). Daarom staat hij alleen waar de ruimte gegarandeerd vrij is:
   op een pagina die niet scrolt en onderaan (de ruimte in 16-portaal-mobiel.css).
   Terugscrollen telt niet: dan lag hij weer over de bovenste rijen. De lade houdt de
   pil, dus Lois blijft bereikbaar. De logica staat in lois-paneel.blade.php;
   bewaakt in KaartEnZweefknopTest. */
body.fi-panel-portal .vivi-lois__zweef {
    transition: transform .2s ease, opacity .2s ease, visibility 0s linear 0s;
}
body.fi-panel-portal .vivi-lois__zweef.is-weg {
    transform: translateY(calc(100% + 32px));
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform .2s ease, opacity .2s ease, visibility 0s linear .2s;
}
@media (prefers-reduced-motion: reduce) {
    body.fi-panel-portal .vivi-lois__zweef,
    body.fi-panel-portal .vivi-lois__zweef.is-weg {
        transition: none;
    }
}
body.fi-panel-portal .vivi-lois__ico {
    width: 1.25rem;
    height: 1.25rem;
}

body.fi-panel-portal .vivi-lois__scrim {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: color-mix(in srgb, var(--vivi-cream) 50%, transparent);
    backdrop-filter: blur(3px);
}
/* Mobiel: het paneel is het hele scherm, een chat. */
body.fi-panel-portal .vivi-lois__paneel {
    position: fixed;
    inset: 0;
    z-index: 51;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 16px 16px;
    overflow-y: auto;
    background-color: var(--vivi-fout-vlak);
    background-image: radial-gradient(130% 150% at 0% 0%, var(--vivi-accent) 0%, color-mix(in srgb, var(--vivi-accent) 55%, var(--vivi-fout-vlak)) 50%, var(--vivi-fout-vlak) 100%);
    color: var(--vivi-tekst);
}
body.fi-panel-portal .vivi-lois__kop {
    display: flex;
    align-items: center;
    gap: 12px;
}
body.fi-panel-portal :is(.vivi-lois__icirkel, .vivi-lois__sluit) {
    display: grid;
    place-items: center;
    flex: none;
    width: 52px;
    height: 52px;
    border: 0;
    border-radius: var(--vivi-radius-rond);
    background: color-mix(in srgb, var(--vivi-vlak) 34%, transparent);
    backdrop-filter: blur(10px);
    color: var(--vivi-tekst);
}
body.fi-panel-portal .vivi-lois__sluit {
    width: var(--vivi-tik-min);
    height: var(--vivi-tik-min);
    margin-left: auto;
    cursor: pointer;
}
body.fi-panel-portal .vivi-lois__titel {
    margin: 0;
    font-family: var(--vivi-type-display);
    letter-spacing: var(--vivi-type-display-spatie);
    font-size: 22px;
    font-weight: 400;
    line-height: 1.15;
}
/* De oude hero, uit zijn kaart gehaald: geen eigen vlak meer, de orb staat
   in de stroom in plaats van rechts over de tekst. */
body.fi-panel-portal .vivi-lois .vivi-lois__inhoud {
    flex: 1;
    gap: 12px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    overflow: visible;
}
body.fi-panel-portal .vivi-lois .vivi-lois__inhoud > .vivi-orb {
    position: relative !important;
    top: auto;
    right: auto;
    transform: none;
    display: flex;
    align-self: center;
    width: 96px;
    height: 96px;
    margin: 8px 0;
}
body.fi-panel-portal .vivi-lois .vivi-hero-lois__tekst {
    max-width: none;
    text-align: center;
}
body.fi-panel-portal .vivi-lois .vivi-page-sub {
    color: var(--vivi-tekst);
}
body.fi-panel-portal .vivi-lois .vivi-hero-lois__antwoord {
    align-self: flex-start;
    max-width: 100%;
    padding: 14px 18px;
    border-radius: 24px 24px 24px 8px;
    background: color-mix(in srgb, var(--vivi-vlak) 60%, transparent);
    color: var(--vivi-tekst);
}
body.fi-panel-portal .vivi-lois .vivi-hero-lois__offline {
    color: var(--vivi-tekst);
}
body.fi-panel-portal .vivi-lois__suggesties {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
body.fi-panel-portal .vivi-lois .vivi-suggest {
    min-height: var(--vivi-tik-min);
    padding: 0 16px;
    border: 0;
    border-radius: var(--vivi-radius-pil);
    background: color-mix(in srgb, var(--vivi-vlak) 55%, transparent);
    font-size: 13.5px;
    color: var(--vivi-tekst);
}
body.fi-panel-portal .vivi-lois .vivi-lois__vraag {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: none;
    height: 68px;
    padding: 0 8px 0 10px;
    border-radius: var(--vivi-radius-pil);
    background: var(--vivi-vlak);
}
body.fi-panel-portal .vivi-lois .vivi-lois__veld {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    box-shadow: none;
    background: transparent;
    font-size: 15px;
}
body.fi-panel-portal .vivi-lois .vivi-lois__stuur {
    min-height: 52px;
    border-radius: var(--vivi-radius-pil);
    background: var(--vivi-vlak-donker);
    color: var(--vivi-tekst-op-donker);
}
body.fi-panel-portal .vivi-lois__zoeklink {
    font-size: 13.5px;
    color: var(--vivi-tekst);
    text-decoration: underline;
}

@media (min-width: 1024px) {
    body.fi-panel-portal .vivi-lois__zweef {
        display: none;
    }
    body.fi-panel-portal .vivi-lois__paneel {
        inset: 16px 16px 16px auto;
        width: min(580px, calc(100vw - 32px));
        padding: 28px 30px 20px;
        border-radius: 36px;
        box-shadow: 0 40px 80px -30px color-mix(in srgb, var(--vivi-ink) 45%, transparent);
    }
}

/* ==== Portaal-UI: agenda, taken, projecten ==== */
/* Eigenaar: Portaal-UI6. Agenda, taken, projecten en projectdetail, inclusief het kicker-contrast.
   Regels: alles onder body.fi-panel-portal, alleen var(--vivi-*) uit 09 en 01,
   geen hexwaarde en geen nieuwe --vivi-*-definitie (TokensPortaalTest), alleen
   de breekpunten uit Stijllaag::BREEKPUNTEN. Zie docs/PORTAAL-UI.md. */

/* ---------------------------------------------------------------
   Agenda, raster. 06 zette .vivi-cal-grid en .vivi-cal-wd op min-width 560px,
   waardoor een telefoon horizontaal moest schuiven. Het raster mag nu krimpen;
   onder 1024 is het toch verborgen en neemt de weekstrook het over.
   --------------------------------------------------------------- */
body.fi-panel-portal .vivi-cal-grid,
body.fi-panel-portal .vivi-cal-wd {
    min-width: 0;
}

/* Kicker en zachte tekst op de agenda: --vivi-muted haalt geen 4,5:1 op wit
   (3,9:1). Alleen binnen de agendapagina, de rest van het portaal volgt later. */
body.fi-panel-portal .vivi-cal-kicker,
body.fi-panel-portal .vivi-agendapagina .vivi-muted {
    color: var(--vivi-tekst-2);
}

/* Paginatitel: de agenda stond als enige scherm nog in Poppins 700 (gemeten 25-09
   op 20,8px), terwijl elke andere portaaltitel de displaystapel draagt. Maat en
   regelhoogte blijven, zodat de kop van dit ene-schermhoge scherm niet groeit. */
body.fi-panel-portal .vivi-agendapagina .vivi-cal-title {
    font-family: var(--vivi-type-display);
    font-weight: 400;
    letter-spacing: var(--vivi-type-display-spatie);
}

/* Zelfde gat bij de metaregels op agenda en projecten (gemeten 3,98:1 op wit).
   Een te-late deadline houdt zijn eigen foutkleur. */
body.fi-panel-portal .vivi-agendapagina .vivi-meta:not(.vivi-te-laat),
body.fi-panel-portal .vivi-agendapagina .vivi-cal-tab:not(.on),
body.fi-panel-portal .vivi-projectenpagina .vivi-meta:not(.vivi-te-laat),
body.fi-panel-portal .vivi-projectenpagina .vivi-page-sub {
    color: var(--vivi-tekst-2);
}

/* Statuspillen op Projecten: muted op de stille tint haalde 3,48:1 en --vivi-ok op
   de groene tint 3,35:1. Zelfde keuze als laag 11 voor let-op: de tint draagt de
   status, de tekst gaat naar de tekstkleur. */
body.fi-panel-portal .vivi-projectenpagina .vivi-pill--stil,
body.fi-panel-portal .vivi-projectenpagina .vivi-pill--ok {
    color: var(--vivi-tekst);
}

/* Maandraster boven 1024: weekdagkop en dagnummers haalden 3,98:1 (muted), het
   dagnummer van vandaag 2,31:1 (goud op wit) en de dagen buiten de maand vielen
   onder opacity .42 nog verder weg (gemeten 3,76 zonder die opacity). Vandaag blijft
   herkenbaar aan de gouden celrand; buiten de maand aan tekst-2 en een lege cel. */
body.fi-panel-portal .vivi-agendapagina .vivi-cal-wd span {
    color: var(--vivi-tekst-2);
}
body.fi-panel-portal .vivi-agendapagina .vivi-cal-daynum,
body.fi-panel-portal .vivi-agendapagina .vivi-cal-cell.is-today .vivi-cal-daynum {
    color: var(--vivi-ink);
}
/* Vandaag als de ene donkere tegel, zoals de weekstrook onder 1024 en de pin Planner. */
body.fi-panel-portal .vivi-agendapagina .vivi-cal-cell.is-today .vivi-cal-daynum {
    align-self: flex-start;
    padding: 0.1rem 0.45rem;
    border-radius: var(--vivi-radius-rond);
    background: var(--vivi-vlak-donker);
    color: var(--vivi-tekst-op-donker);
}
body.fi-panel-portal .vivi-agendapagina .vivi-cal-cell.is-out {
    opacity: 1;
    background: transparent;
}
body.fi-panel-portal .vivi-agendapagina .vivi-cal-cell.is-out .vivi-cal-daynum {
    color: var(--vivi-tekst-2);
}

/* Tikdoelen: de knoppen op agenda en projecten waren 38 en 42 pixels hoog, de
   weergavetabs 28 en de pijlen 41 breed. */
body.fi-panel-portal .vivi-agendapagina .vivi-btn,
body.fi-panel-portal .vivi-agendapagina .vivi-cal-tab,
body.fi-panel-portal .vivi-projectenpagina .vivi-btn {
    min-height: var(--vivi-tik-min);
}
body.fi-panel-portal .vivi-agendapagina .vivi-cal-arrows .vivi-btn {
    min-width: var(--vivi-tik-min);
    justify-content: center;
}

/* Onder 1024: weekstrook en dagrijen in plaats van maand-, week- en
   lijstweergave. De schakelaar en de pijlen horen bij het raster en gaan mee. */
@media (max-width: 1023.98px) {
    body.fi-panel-portal .vivi-agendapagina .vivi-cal-main,
    body.fi-panel-portal .vivi-agendapagina .vivi-cal-tabs,
    body.fi-panel-portal .vivi-agendapagina .vivi-cal-arrows,
    body.fi-panel-portal .vivi-agendapagina .vivi-cal-title__breed {
        display: none;
    }
}
/* Paginaklasse erbij: de basisregel van .vivi-agenda-smal hieronder staat later
   met dezelfde specificiteit en zette de strook op 1440 weer aan (gemeten). */
@media (min-width: 1024px) {
    body.fi-panel-portal .vivi-agendapagina .vivi-agenda-smal,
    body.fi-panel-portal .vivi-agendapagina .vivi-cal-title__smal {
        display: none;
    }
}

/* ---------------------------------------------------------------
   Agenda smal: getal eerst, label eronder, weeknavigatie rechts,
   de strook, dan de dagen als rijen.
   --------------------------------------------------------------- */
body.fi-panel-portal .vivi-agenda-smal {
    display: flex;
    flex-direction: column;
    gap: var(--vivi-ruimte-l);
    min-width: 0;
}
body.fi-panel-portal .vivi-agenda-smal__kop {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--vivi-ruimte-m);
}
body.fi-panel-portal .vivi-agenda-smal__aantal {
    display: flex;
    flex-direction: column;
    gap: var(--vivi-ruimte-2xs);
    margin: 0;
    min-width: 0;
}
body.fi-panel-portal .vivi-agenda-smal__getal {
    font-family: var(--vivi-type-display);
    font-size: var(--vivi-cijfer-xl);
    font-weight: 400;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--vivi-tekst);
}
body.fi-panel-portal .vivi-agenda-smal__label,
body.fi-panel-portal .vivi-agenda-smal__dagkop {
    font-family: var(--vivi-type-label);
    font-variant-caps: var(--vivi-type-label-variant);
    letter-spacing: var(--vivi-type-label-spatie);
    font-size: var(--vivi-tekst-m);
    color: var(--vivi-tekst-2);
}
body.fi-panel-portal .vivi-agenda-smal__aantal--nul {
    font-size: var(--vivi-tekst-l);
    color: var(--vivi-tekst-2);
}
body.fi-panel-portal .vivi-agenda-smal__nav {
    display: flex;
    align-items: center;
    gap: var(--vivi-ruimte-2xs);
    flex: none;
}
body.fi-panel-portal .vivi-agenda-smal__stap,
body.fi-panel-portal .vivi-agenda-smal__deze {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--vivi-tik-min);
    min-height: var(--vivi-tik-min);
    border-radius: var(--vivi-radius-rond);
    color: var(--vivi-tekst);
    text-decoration: none;
}
body.fi-panel-portal .vivi-agenda-smal__deze {
    padding: 0 var(--vivi-ruimte-s);
    font-size: var(--vivi-tekst-s);
    font-weight: 500;
}
body.fi-panel-portal .vivi-agenda-smal__stap:hover,
body.fi-panel-portal .vivi-agenda-smal__deze:hover {
    background: var(--vivi-vlak-2);
}
body.fi-panel-portal .vivi-agenda-smal__ico {
    width: 1.25rem;
    height: 1.25rem;
}
body.fi-panel-portal .vivi-agenda-smal__dagen {
    display: flex;
    flex-direction: column;
    gap: var(--vivi-ruimte-xl);
    margin: 0;
    padding: 0;
    list-style: none;
}
body.fi-panel-portal .vivi-agenda-smal__dag {
    display: flex;
    flex-direction: column;
    gap: var(--vivi-ruimte-xs);
    scroll-margin-top: var(--vivi-ruimte-2xl);
}
body.fi-panel-portal .vivi-agenda-smal__dagkop {
    display: flex;
    align-items: baseline;
    gap: var(--vivi-ruimte-s);
    margin: 0;
    font-weight: 500;
}
body.fi-panel-portal .vivi-agenda-smal__vandaag {
    font-size: var(--vivi-tekst-s);
    font-weight: 600;
    color: var(--vivi-tekst);
}
body.fi-panel-portal .vivi-agenda-smal__dagleeg,
body.fi-panel-portal .vivi-agenda-smal__melding {
    margin: 0;
    font-size: var(--vivi-tekst-m);
    color: var(--vivi-tekst-2);
}

/* Bron-stip in de kop: kleur via klasse in plaats van inline stijl. */
body.fi-panel-portal .vivi-agenda-dot--ok {
    background: var(--vivi-ok);
}
body.fi-panel-portal .vivi-agenda-dot--fout {
    background: var(--vivi-fout);
}
body.fi-panel-portal .vivi-cal-bijgewerkt,
body.fi-panel-portal .vivi-projecten__bijgewerkt {
    margin: var(--vivi-ruimte-s) 0 0;
    font-size: var(--vivi-tekst-s);
    color: var(--vivi-tekst-2);
}

/* ---------------------------------------------------------------
   Kicker-contrast (Projecten en Projectdetail). De lichte kicker op de
   coverscrim haalde 3,2:1 met wit op 75 procent; cream haalt 5,9:1 op de
   S22-scrimkleur. De goedkeurkaart is goudgeel: tekst-2 haalt daar 4,1:1,
   dus de kicker krijgt de volle inkt.
   --------------------------------------------------------------- */
body.fi-panel-portal .vivi-kicker.vivi-kicker--licht {
    color: var(--vivi-tekst-op-donker);
}
body.fi-panel-portal .vivi-goedkeurkaart .vivi-kicker {
    color: var(--vivi-ink);
}

/* ---------------------------------------------------------------
   Projecten.
   --------------------------------------------------------------- */
body.fi-panel-portal .vivi-projecten__groet {
    margin-bottom: var(--vivi-ruimte-xl);
}
/* Vervolgdashboard (herontwerp 22-10-2026): gelijke tegels, zoals de rij
   "Last Projects" op pin 10. Een kolom op de telefoon, twee vanaf 640, drie
   vanaf 1024; de tegels in een rij zijn even hoog zodat de voetregels op een
   lijn staan. */
body.fi-panel-portal .vivi-projecten__raster {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--vivi-ruimte-l);
    margin: 0;
    padding: 0;
    list-style: none;
}
@media (min-width: 640px) {
    body.fi-panel-portal .vivi-projecten__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    body.fi-panel-portal .vivi-projecten__raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
body.fi-panel-portal .vivi-projecten__cel {
    display: flex;
    min-width: 0;
}
body.fi-panel-portal .vivi-projecttegel {
    flex: 1 1 auto;
    min-height: 220px;
}
body.fi-panel-portal .vivi-projecttegel .vivi-meter__rij {
    margin-top: var(--vivi-ruimte-xs);
}
body.fi-panel-portal .vivi-projecttegel__voet {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--vivi-ruimte-2xs);
    border-top: 1px solid var(--vivi-lijn-fijn);
    padding-top: var(--vivi-ruimte-m);
}
body.fi-panel-portal .vivi-projecttegel__mijlpaal {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
body.fi-panel-portal .vivi-projecttegel__label {
    font-family: var(--vivi-type-label);
    font-variant-caps: var(--vivi-type-label-variant);
    letter-spacing: var(--vivi-type-label-spatie);
    font-size: var(--vivi-tekst-s);
    color: var(--vivi-tekst-2);
}
body.fi-panel-portal .vivi-projecttegel__wat {
    font-size: var(--vivi-tekst-m);
    font-weight: 500;
    color: var(--vivi-tekst);
    overflow-wrap: anywhere;
}
body.fi-panel-portal .vivi-projecttegel__deadline {
    font-size: var(--vivi-tekst-s);
    color: var(--vivi-tekst-2);
}
body.fi-panel-portal .vivi-projecttegel__deadline.vivi-te-laat {
    color: var(--vivi-fout);
}
body.fi-panel-portal :is(.vivi-projecten__lijst, .vivi-team__lijst) {
    display: flex;
    flex-direction: column;
    gap: var(--vivi-ruimte-xs);
    margin-top: var(--vivi-ruimte-xl);
}
body.fi-panel-portal :is(.vivi-projecten__lijstkop, .vivi-team__lijstkop) {
    margin: 0 0 var(--vivi-ruimte-2xs);
    font-family: var(--vivi-type-label);
    font-variant-caps: var(--vivi-type-label-variant);
    letter-spacing: var(--vivi-type-label-spatie);
    font-size: var(--vivi-tekst-m);
    font-weight: 500;
    color: var(--vivi-tekst-2);
}
/* Team (designtoets 09-10): de uitleg onder het label, klein en grijs. */
body.fi-panel-portal .vivi-team__uitleg {
    margin: 0 0 var(--vivi-ruimte-xs);
    font-size: var(--vivi-tekst-s);
    color: var(--vivi-tekst-2);
}
body.fi-panel-portal .vivi-team__lijst { margin-top: var(--vivi-ruimte-l); }
/* Vanaf 640 ligt de inhoud in het witte frame; zonder lijn verdwijnt een witte
   rij daarin. Dezelfde haarlijn als de rijen op /taken. */
body.fi-panel-portal .vivi-team__lijst .vivi-lijstrij {
    border: 1px solid var(--vivi-lijn-fijn);
}
body.fi-panel-portal .vivi-projecten__leeg {
    margin-top: var(--vivi-ruimte-l);
}

/* Projectdetail (herontwerp 22-10-2026, bundel Werk). "Wacht op jou" is het
   ene anker van de pagina; de voortgang is een meter in inkt op een lichte
   tegel; bestanden en facturen zijn een telregel met een link in plaats van
   een tweede lijst. De beheerregel en de archiefregel kregen een klasse in
   plaats van een inline style. */
body.fi-panel-portal .vivi-pp-beheer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--vivi-ruimte-s);
    margin-bottom: var(--vivi-ruimte-m);
}
body.fi-panel-portal .vivi-pp-archiefregel {
    margin: 0 0 var(--vivi-ruimte-m);
    font-size: var(--vivi-tekst-s);
}
body.fi-panel-portal .vivi-pp-anker .vivi-regel {
    font-size: var(--vivi-tekst-l);
    font-weight: 500;
    color: inherit;
}
body.fi-panel-portal .vivi-pp-anker__aantal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.6em;
    margin-left: var(--vivi-ruimte-xs);
    padding: 0 var(--vivi-ruimte-xs);
    border-radius: var(--vivi-radius-pil);
    background: color-mix(in srgb, var(--vivi-tekst-op-donker) 14%, transparent);
    font-family: var(--vivi-type-tekst);
    font-size: var(--vivi-tekst-s);
    font-weight: 600;
    vertical-align: middle;
    font-variant-numeric: tabular-nums;
}
@media (max-width: 479.98px) {
    body.fi-panel-portal .vivi-pp-anker .vivi-anker__rij { flex-wrap: wrap; align-items: flex-start; }
    body.fi-panel-portal .vivi-pp-anker .vivi-anker__tekst { flex: 1 1 100%; }
    /* Zonder knop past de datum naast de tekst: geen losse regel met een gat erboven. */
    body.fi-panel-portal .vivi-pp-anker .vivi-anker__rij:not(:has(.vivi-anker__knop)) { flex-wrap: nowrap; }
    body.fi-panel-portal .vivi-pp-anker .vivi-anker__rij:not(:has(.vivi-anker__knop)) .vivi-anker__tekst { flex: 1 1 auto; }
}
body.fi-panel-portal .vivi-pp-tegel--voortgang .vivi-meter__rij {
    margin-top: var(--vivi-ruimte-xs);
}
body.fi-panel-portal .vivi-pp-telrij {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--vivi-ruimte-s) var(--vivi-ruimte-m);
    min-height: var(--vivi-tik-min);
    min-width: 0;
    padding: var(--vivi-ruimte-m) var(--vivi-ruimte-l);
    border-radius: var(--vivi-radius-xl);
    background: var(--vivi-vlak);
    border: 1px solid var(--vivi-lijn-fijn);
    color: var(--vivi-tekst);
    text-decoration: none;
}
body.fi-panel-portal .vivi-pp-telrij:hover { border-color: var(--vivi-tekst-2); }
body.fi-panel-portal .vivi-pp-telrij:focus-visible { outline: none; box-shadow: var(--vivi-focusring); }
body.fi-panel-portal .vivi-pp-telrij__tekst {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
body.fi-panel-portal .vivi-pp-telrij__tekst .vivi-meta:not(.vivi-te-laat) { color: var(--vivi-tekst-2); }
body.fi-panel-portal .vivi-pp-telrij__link {
    font-size: var(--vivi-tekst-s);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
}

/* Taken: afgeronde taken staan zacht, zodat het oog bij de open taken blijft. */
body.fi-panel-portal .vivi-taken__afgerond .vivi-regel { color: var(--vivi-tekst-2); font-weight: 400; }

/* Agenda als volledige versie van "Deze week" (herontwerp 22-10-2026): de
   telling van het dashboard bovenaan de zijkolom, met een klik naar de week. */
body.fi-panel-portal .vivi-agendapagina .vivi-cal-side__week {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--vivi-ruimte-xs);
    padding: var(--vivi-ruimte-m) var(--vivi-ruimte-l);
}
body.fi-panel-portal .vivi-agendapagina .vivi-cal-side__weektal {
    margin: 0;
    font-size: var(--vivi-tekst-m);
    color: var(--vivi-tekst-2);
}
body.fi-panel-portal .vivi-agendapagina .vivi-cal-side__weeklink {
    min-height: var(--vivi-tik-min);
    font-size: var(--vivi-tekst-s);
    font-weight: 600;
    color: var(--vivi-tekst);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Projectpagina zonder tweede goud en zonder extra donker (herontwerp
   22-10-2026): het goud hoort bij de goedkeurknop in "wacht op jou", het
   donker bij dat anker. Afgeronde fases krijgen een inktrand met vinkje, de
   lopende fase een dikke inktrand; de tellers in de subnav worden licht. */
body.fi-panel-portal .vivi-pp-planning .vivi-tijdlijn__bol--af {
    background: var(--vivi-cream-2);
    color: var(--vivi-ink);
    border: 1px solid var(--vivi-ink);
}
body.fi-panel-portal .vivi-pp-planning .vivi-tijdlijn__bol--nu {
    border: 2px solid var(--vivi-ink);
}
body.fi-panel-portal .vivi-pp-subnav .vivi-pp-subnav__aantal {
    background: var(--vivi-cream-2);
    color: var(--vivi-ink);
    box-shadow: inset 0 0 0 1px var(--vivi-lijn-fijn);
}

/* Projectstatus in de hero als staat (stip plus woord) op de crème strook,
   met dezelfde binnenruimte als de deadline-badge ernaast. */
body.fi-panel-portal .vivi-pp-held__badges .vivi-pp-held__staat {
    padding-inline: var(--vivi-ruimte-xs);
    color: var(--vivi-ink);
}

/* Takenbeheer: de inbakteller boven de lijst (22-10). Badge, knop en de
   waarschuwing op een regel, op smal scherm onder elkaar gewikkeld. */
body.fi-panel-portal .vivi-inbak {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--vivi-ruimte-s);
}
body.fi-panel-portal .vivi-inbak__vol {
    font-size: var(--vivi-tekst-s);
    color: var(--vivi-tekst-2);
}

/* Takenbeheer op een telefoon (keuring 23-10): datum en eigenaar als tekst
   met een punt ertussen, daaronder de badges in vaste volgorde. De buitenste
   span draagt md:hidden van Filament; deze binnenste regelt alleen de
   schikking, zodat zijn display de md:hidden niet overschrijft. */
body.fi-panel-portal .vivi-taak-mobiel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--vivi-ruimte-xs);
    margin-top: var(--vivi-ruimte-xs);
    font-weight: 400;
}
body.fi-panel-portal .vivi-taak-mobiel__badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--vivi-ruimte-xs);
}

/* Takenbeheer en Mijn taken: een werkbalk (keuring 23-10). Zoeken, filter en
   Nieuwe taak op een rij: de kop met de knop schuift naast de zoekbalk in
   plaats van er een eigen strook boven te vullen. Het lege vak voor
   bulkacties links van de zoekbalk valt weg. */
body.fi-panel-portal .vivi-takenlijst .fi-ta-header-ctn {
    display: flex;
    align-items: center;
}
body.fi-panel-portal .vivi-takenlijst .fi-ta-header-ctn > * {
    border-top-width: 0;
}
body.fi-panel-portal .vivi-takenlijst .fi-ta-header-toolbar {
    order: 1;
    flex: 1 1 0;
    min-width: 0;
}
/* Alleen met een knop ernaast sluit de werkbalk rechts aan; zonder knop
   (Mijn taken) houdt het filter zijn marge tot de rand. */
body.fi-panel-portal .vivi-takenlijst .fi-ta-header-ctn:has(> .fi-ta-header) > .fi-ta-header-toolbar {
    padding-inline-end: 0;
}
body.fi-panel-portal .vivi-takenlijst .fi-ta-header-ctn > .fi-ta-header {
    order: 2;
    flex: none;
    padding-inline-start: var(--vivi-ruimte-s);
}
body.fi-panel-portal .vivi-takenlijst .fi-ta-header-toolbar > .shrink-0:not(:has(*)) {
    display: none;
}
body.fi-panel-portal .vivi-takenlijst .fi-ta-header-toolbar > .ms-auto {
    flex: 1 1 0;
    min-width: 0;
    margin-inline-start: 0;
}
body.fi-panel-portal .vivi-takenlijst .fi-ta-search-field {
    flex: 0 1 24rem;
    min-width: 0;
}

/* De Taak-kolom krijgt de meeste breedte (herstel 541, 23-10-2026): de
   actiecel krimpt tot haar knoppen, zodat de breedte naar de taaknaam gaat. */
body.fi-panel-portal .vivi-takenlijst .fi-ta-actions-cell {
    width: 1%;
    white-space: nowrap;
}

/* Vanaf 1280 groeit de Taak-kolom mee met het scherm: 6rem op 1280, 16rem
   vanaf ongeveer 1440, zonder breekpunt buiten de schaal. */
@media (min-width: 1280px) {
    body.fi-panel-portal .vivi-takenlijst .fi-table-header-cell-name {
        min-width: clamp(6rem, 100vw - 74rem, 16rem);
    }
}

/* Een badge in een tabelcel kort niet af ("Deadline ..."): zonder truncate
   rekent de tabel de kolom op het hele woord. */
body.fi-panel-portal .vivi-takenlijst .fi-ta-cell .fi-badge .truncate {
    overflow: visible;
    text-overflow: clip;
}

/* Mijn taken en Takenbeheer op een telefoon (Dauji 23-10-2026: "mobile view
   heeft nog geen goed design"). Geen tabel van vier kolommen meer maar een
   lijst van rijen: de taaknaam over de volle breedte, daaronder een regel met
   deadline, prioriteit en status, en de knoppen rechts op die regel. De
   regel houdt rechts zoveel ruimte vrij als die rij knoppen heeft
   (--taak-knoppen, per rij geteld). Sorteren gaat hier via de keuze naast
   de zoekbalk (taken-sorteer.blade.php), want kolomkoppen zijn er niet. */
@media (max-width: 639.98px) {
    body.fi-panel-portal .vivi-takenlijst .fi-ta-table > tbody > tr {
        --taak-knop: var(--vivi-tik-min);
        --taak-knoppen: 0px;
    }
    body.fi-panel-portal .vivi-takenlijst .fi-ta-table > tbody > tr:has(.fi-ta-actions > .fi-icon-btn) {
        --taak-knoppen: calc(var(--taak-knop) + var(--vivi-ruimte-s));
    }
    body.fi-panel-portal .vivi-takenlijst .fi-ta-table > tbody > tr:has(.fi-ta-actions > .fi-icon-btn ~ .fi-icon-btn) {
        --taak-knoppen: calc(2 * var(--taak-knop) + var(--vivi-ruimte-xs) + var(--vivi-ruimte-s));
    }
    body.fi-panel-portal .vivi-takenlijst .fi-ta-table > tbody > tr:has(.fi-ta-actions > .fi-icon-btn ~ .fi-icon-btn ~ .fi-icon-btn) {
        --taak-knoppen: calc(3 * var(--taak-knop) + 2 * var(--vivi-ruimte-xs) + var(--vivi-ruimte-s));
    }

    /* Kop en intro compacter, zodat de eerste taak boven de vouw staat. */
    body.fi-panel-portal .vivi-takenlijst .fi-header-heading {
        font-size: var(--vivi-kop-m) !important;
    }
    body.fi-panel-portal .vivi-takenlijst .fi-header-subheading {
        margin-top: var(--vivi-ruimte-2xs);
        font-size: var(--vivi-tekst-m);
        line-height: 1.4;
    }
    body.fi-panel-portal .vivi-takenlijst.fi-page > section {
        row-gap: var(--vivi-ruimte-m);
    }

    /* De strook "Actieve filters" kost een regel; het filtericoon telt mee. */
    body.fi-panel-portal .vivi-takenlijst .fi-ta-filter-indicators {
        display: none;
    }

    /* Werkbalk: zoeken neemt de rest, de sorteerkeuze krimpt tot haar tekst. */
    body.fi-panel-portal .vivi-takenlijst .fi-ta-header-toolbar {
        gap: var(--vivi-ruimte-s);
        padding-inline: var(--vivi-ruimte-m);
    }
    body.fi-panel-portal .vivi-takenlijst .fi-ta-header-toolbar > .ms-auto {
        gap: var(--vivi-ruimte-s);
    }
    body.fi-panel-portal .vivi-takenlijst .fi-ta-search-field {
        flex: 1 1 auto;
    }
    body.fi-panel-portal .vivi-taken-sorteer {
        flex: none;
    }
    /* Takenbeheer heeft ook Nieuwe taak in de balk: dan krijgt zoeken een
       eigen regel en staan sorteren en filter eronder, anders bleef er voor
       het zoekveld 28px over. */
    body.fi-panel-portal .vivi-takenlijst--beheer .fi-ta-header-ctn {
        align-items: flex-start;
    }
    body.fi-panel-portal .vivi-takenlijst--beheer .fi-ta-header-toolbar > .ms-auto {
        flex-wrap: wrap;
        row-gap: var(--vivi-ruimte-s);
    }
    body.fi-panel-portal .vivi-takenlijst--beheer .fi-ta-search-field {
        flex-basis: 100%;
    }
    body.fi-panel-portal .vivi-takenlijst--beheer .fi-ta-header-ctn > .fi-ta-header {
        padding-block-start: var(--vivi-ruimte-m);
    }

    /* Rijen in plaats van een tabel. */
    body.fi-panel-portal .vivi-takenlijst .fi-ta-table > thead {
        display: none;
    }
    body.fi-panel-portal .vivi-takenlijst .fi-ta-table,
    body.fi-panel-portal .vivi-takenlijst .fi-ta-table > tbody {
        display: block;
        width: 100%;
    }
    body.fi-panel-portal .vivi-takenlijst .fi-ta-table > tbody > tr {
        display: block;
        position: relative;
    }
    body.fi-panel-portal .vivi-takenlijst .fi-ta-table > tbody > tr > .fi-table-cell-name {
        display: block;
        width: 100%;
    }
    body.fi-panel-portal .vivi-takenlijst .fi-table-cell-name .fi-ta-text {
        grid-template-columns: minmax(0, 1fr);
        padding-block: var(--vivi-ruimte-m);
        padding-inline: var(--vivi-ruimte-m);
    }

    /* De regel onder de naam: tekst en badges naast elkaar, met rechts
       ruimte voor de knoppen. */
    body.fi-panel-portal .vivi-takenlijst .vivi-taak-mobiel {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        position: relative;
        gap: var(--vivi-ruimte-xs);
        min-height: var(--taak-knop);
        padding-inline-end: var(--taak-knoppen);
    }
    /* Altijd een regel: is de eigenaar te lang, dan kort de tekst af en
       schuiven de badges niet naar een tweede regel. */
    body.fi-panel-portal .vivi-takenlijst .vivi-taak-mobiel__meta {
        flex: 0 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    body.fi-panel-portal .vivi-takenlijst .vivi-taak-mobiel .fi-badge {
        flex: none;
    }
    /* Te laat is hier de datum in rood; de badge "Deadline verstreken" paste
       niet meer op de regel en blijft alleen voor de schermlezer. */
    body.fi-panel-portal .vivi-takenlijst .vivi-taak-mobiel:has(.vivi-taak-mobiel__te-laat) .vivi-taak-mobiel__meta {
        color: var(--vivi-staat-actie);
        font-weight: 600;
    }
    body.fi-panel-portal .vivi-takenlijst .vivi-taak-mobiel__te-laat {
        position: absolute;
        inset-inline-start: 0;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
    /* De badges doen als losse delen mee op de regel; als eigen blok sprong
       het hele blok onder de datum zodra het niet in een keer paste. */
    body.fi-panel-portal .vivi-takenlijst .vivi-taak-mobiel__badges {
        display: contents;
    }

    /* De knoppen rechtsonder in de rij, op de hoogte van die regel. */
    body.fi-panel-portal .vivi-takenlijst .fi-ta-table > tbody > tr > .fi-ta-actions-cell {
        display: block;
        position: absolute;
        right: 0;
        bottom: 0;
        width: auto;
    }
    body.fi-panel-portal .vivi-takenlijst .fi-ta-actions-cell > * {
        padding-block: var(--vivi-ruimte-m);
        padding-inline: 0 var(--vivi-ruimte-m);
    }
    body.fi-panel-portal .vivi-takenlijst .fi-ta-actions-cell .fi-ta-actions {
        gap: var(--vivi-ruimte-xs);
    }
    /* Een aanraakdoel van 44px (--vivi-tik-min) met een rand, in plaats van een grijs icoon
       van 16px dat met -m-2 tegen zijn buren aan lag. */
    body.fi-panel-portal .vivi-takenlijst .fi-ta-actions-cell .fi-icon-btn {
        width: var(--taak-knop);
        height: var(--taak-knop);
        margin: 0;
        border: 1px solid var(--vivi-lijn-fijn);
        border-radius: var(--vivi-radius-binnen);
        color: var(--vivi-tekst-2);
        background-color: var(--vivi-vlak);
    }
}

/* ==== Portaal-UI: documenten en financiën ==== */
/* Eigenaar: Portaal-UI7. Kaartrijen over de Filament-tabellen, documentkop, segmentfilters.
   Regels: alles onder body.fi-panel-portal, alleen var(--vivi-*) uit 09 en 01,
   geen hexwaarde en geen nieuwe --vivi-*-definitie (TokensPortaalTest), alleen
   de breekpunten uit Stijllaag::BREEKPUNTEN. Zie docs/PORTAAL-UI.md. */

/* ---- Herontwerp bundel Geld (22-10-2026) ----
   De documentkop (factuur, offerte, contract) is alleen donker als het
   document op de klant wacht: dat is het ene donkere blok op het scherm.
   Anders is hij licht, met hetzelfde grote lichte cijfer. */

/* Het kerncijfer: groot en licht, 2 tot 3 keer de tekstmaat (pin 03). */
body.fi-panel-portal .vivi-doc-kop .vivi-doc-head > div > .vivi-figure {
    font-family: var(--vivi-type-display);
    font-size: var(--vivi-cijfer-xl);
    font-weight: 300;
    letter-spacing: var(--vivi-type-display-spatie);
    font-variant-numeric: var(--vivi-cijfer-numeriek);
}
body.fi-panel-portal .vivi-doc-kop {
    border-radius: var(--vivi-radius-frame);
}

/* Lichte kop: de donkerkleuren uit 04 terug naar inkt. */
body.fi-panel-portal .vivi-doc-kop--licht {
    background: var(--vivi-vlak);
    border: 1px solid var(--vivi-lijn-fijn);
    color: var(--vivi-tekst);
}
body.fi-panel-portal .vivi-doc-kop--licht .vivi-figure,
body.fi-panel-portal .vivi-doc-kop--licht .vivi-doc-titel,
body.fi-panel-portal .vivi-doc-kop--licht .vivi-doc-subtitel,
body.fi-panel-portal .vivi-doc-kop--licht .vivi-doc-toelichting strong {
    color: var(--vivi-tekst);
}
body.fi-panel-portal .vivi-doc-kop--licht .vivi-doc-kicker,
body.fi-panel-portal .vivi-doc-kop--licht .vivi-doc-sublabel,
body.fi-panel-portal .vivi-doc-kop--licht .vivi-doc-toelichting {
    color: var(--vivi-tekst-2);
}

/* Donkere kop: de staat volgt de ankerkaart uit 11. */
body.fi-panel-portal .vivi-doc-kop.vivi-card--dark .vivi-staat,
body.fi-panel-portal .vivi-doc-kop.vivi-card--dark .vivi-meta,
body.fi-panel-portal .vivi-doc-kop.vivi-card--dark .vivi-doc-toelichting { color: var(--vivi-tekst-2-op-donker); }
body.fi-panel-portal .vivi-doc-kop.vivi-card--dark .vivi-staat--let-op::before { background: var(--vivi-accent); }
body.fi-panel-portal .vivi-doc-kop.vivi-card--dark .vivi-staat--actie::before { background: var(--vivi-staat-actie-op-donker); }
body.fi-panel-portal .vivi-doc-kop.vivi-card--dark .vivi-staat--actie { color: var(--vivi-tekst-op-donker); }

/* Begroting: per project staat, groot licht cijfer, meter, dan meta. */
body.fi-panel-portal .vivi-begroting {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--vivi-ruimte-m);
}
body.fi-panel-portal .vivi-begroting > .vivi-meter__rij { align-self: stretch; }
body.fi-panel-portal .vivi-begroting__cijfer {
    display: flex;
    flex-direction: column;
    gap: var(--vivi-ruimte-2xs);
}
body.fi-panel-portal .vivi-begroting__getal {
    font-family: var(--vivi-type-display);
    font-size: var(--vivi-cijfer-l);
    font-weight: 300;
    line-height: 1.05;
    letter-spacing: var(--vivi-type-display-spatie);
    font-variant-numeric: var(--vivi-cijfer-numeriek);
    color: var(--vivi-tekst);
}
body.fi-panel-portal .vivi-begroting__meta { align-self: stretch; }
body.fi-panel-portal .vivi-begroting__meta .vivi-regel { font-variant-numeric: var(--vivi-cijfer-numeriek); }

/* Bestuur: een tegel die naar Begroting wijst, per project een regel. */
body.fi-panel-portal .vivi-bestuur-geld__lijst {
    display: flex;
    flex-direction: column;
    gap: var(--vivi-ruimte-xs);
    margin: 0;
    padding: 0;
    list-style: none;
}
body.fi-panel-portal .vivi-bestuur-geld__lijst > li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--vivi-ruimte-xs) var(--vivi-ruimte-m);
}

@media (max-width: 639.98px) {
    body.fi-panel-portal .vivi-doc-kop .vivi-doc-head > div > .vivi-figure { font-size: var(--vivi-cijfer-l); }
}

/* ==== Portaal-UI: overige schermen ==== */
/* Eigenaar: Portaal-UI8. Media, website, groei, instellingen, onboarding, profiel, inlog.
   Regels: alles onder body.fi-panel-portal, alleen var(--vivi-*) uit 09 en 01,
   geen hexwaarde en geen nieuwe --vivi-*-definitie (TokensPortaalTest), alleen
   de breekpunten uit Stijllaag::BREEKPUNTEN. Zie docs/PORTAAL-UI.md.

   Eerste PR (Portaal-UI8 schermen): Galerijen, Galerijdetail, Video's,
   Onboarding, Profiel en Website-instellingen. De masonry en de lightbox uit
   07 blijven zoals ze zijn; hier staat alleen wat eromheen hoort. */

/* ---------------------------------------------------------------
   Schermkop en schermvoet, gedeeld door alle schermen van deze laag.
   De groet zelf staat in 11; hier alleen de ruimte eronder en de
   rustige uitlegregel die een scherm soms nog nodig heeft.
   --------------------------------------------------------------- */
body.fi-panel-portal .vivi-scherm__groet {
    margin-bottom: var(--vivi-ruimte-xs);
}
body.fi-panel-portal .vivi-scherm__tekst {
    margin: 0;
    max-width: 62ch;
    font-size: var(--vivi-tekst-m);
    line-height: 1.55;
    color: var(--vivi-tekst-2);
}
body.fi-panel-portal .vivi-scherm__uitleg {
    display: flex;
    flex-direction: column;
    gap: var(--vivi-ruimte-2xs);
}
body.fi-panel-portal .vivi-scherm__status {
    margin: 0;
    font-family: var(--vivi-type-label);
    font-variant-caps: var(--vivi-type-label-variant);
    letter-spacing: var(--vivi-type-label-spatie);
    font-size: var(--vivi-tekst-m);
    color: var(--vivi-tekst);
}
body.fi-panel-portal .vivi-scherm__datum {
    font-family: inherit;
    color: var(--vivi-tekst-2);
}
body.fi-panel-portal .vivi-schermvoet {
    margin-top: var(--vivi-ruimte-l);
    padding-top: var(--vivi-ruimte-s);
    border-top: 1px solid var(--vivi-lijn-fijn);
}
body.fi-panel-portal .vivi-schermvoet__tekst {
    margin: 0;
    font-size: var(--vivi-tekst-s);
    color: var(--vivi-tekst-2);
}
body.fi-panel-portal .vivi-schermvoet__tekst time {
    font-family: inherit;
}

/* Terug naar het overzicht: een gewone link, maar met een tikvlak van 44px. */
body.fi-panel-portal .vivi-terug {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    min-height: var(--vivi-tik-min);
    font-size: var(--vivi-tekst-m);
    color: var(--vivi-tekst-2);
    text-decoration: none;
}
body.fi-panel-portal .vivi-terug:hover {
    color: var(--vivi-tekst);
    text-decoration: underline;
}

/* Knoppen onder een formulier: de primaire pil rechts, de laadmelding ervoor.
   Elke knop op deze schermen haalt 44px (de tikregel uit 11). */
body.fi-panel-portal .vivi-stapknoppen {
    justify-content: flex-end;
    align-items: center;
    gap: var(--vivi-ruimte-s);
    margin-top: var(--vivi-ruimte-m);
}
body.fi-panel-portal :is(.vivi-stapknoppen, .vivi-downloadkaart, .vivi-selectbar, .vivi-videoinvoer, .vivi-videooordeel, .vivi-stapkop, .vivi-onboarding) .vivi-btn {
    min-height: var(--vivi-tik-min);
    font-weight: 500;
}

/* ---------------------------------------------------------------
   Galerijen: de portfoliokaart. Beeld tot de rand (moodboardregel 1),
   titel en meta eronder. De titellink rekt over de hele kaart; de
   kebab ligt daarboven zodat hij zijn eigen klik houdt.
   --------------------------------------------------------------- */
body.fi-panel-portal .vivi-galerijkaarten {
    gap: var(--vivi-ruimte-s);
}
body.fi-panel-portal .vivi-galerijkaart {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0;
    border-radius: var(--vivi-radius-frame);
    background: var(--vivi-vlak);
}
body.fi-panel-portal .vivi-galerijkaart__beeld {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--vivi-vlak-2);
}
body.fi-panel-portal .vivi-galerijkaart__voet {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--vivi-ruimte-2xs);
    padding: var(--vivi-ruimte-s) var(--vivi-ruimte-m) var(--vivi-ruimte-m);
}
body.fi-panel-portal .vivi-galerijkaart__kop {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--vivi-ruimte-xs);
    width: 100%;
}
body.fi-panel-portal .vivi-galerijkaart__titel {
    margin: 0;
    min-width: 0;
    padding-top: var(--vivi-ruimte-xs);
    font-family: var(--vivi-type-display);
    font-weight: 400;
    letter-spacing: var(--vivi-type-display-spatie);
    font-size: var(--vivi-kop-m);
    line-height: 1.2;
    color: var(--vivi-tekst);
}
body.fi-panel-portal .vivi-galerijkaart__link {
    font-family: inherit;
    color: inherit;
    text-decoration: none;
}
body.fi-panel-portal .vivi-galerijkaart__link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}
body.fi-panel-portal .vivi-galerijkaart__link:focus-visible {
    outline: none;
}
body.fi-panel-portal .vivi-galerijkaart:has(.vivi-galerijkaart__link:focus-visible) {
    outline: 2px solid var(--vivi-tekst);
    outline-offset: 2px;
}
body.fi-panel-portal .vivi-galerijkaart:hover .vivi-galerijkaart__link {
    text-decoration: underline;
}
body.fi-panel-portal .vivi-galerijkaart__kebab {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
}
body.fi-panel-portal .vivi-galerijkaart__meta {
    margin: 0;
    color: var(--vivi-tekst-2);
}
body.fi-panel-portal .vivi-galerijkaart__status {
    margin-top: var(--vivi-ruimte-2xs);
}
body.fi-panel-portal .vivi-galerijkaart__omschrijving {
    margin: var(--vivi-ruimte-2xs) 0 0;
    color: var(--vivi-tekst-2);
}

/* ---------------------------------------------------------------
   Galerijdetail. De masonry, de selectiebalk en de lightbox komen uit
   07; hier alleen de ritmiek eromheen en de downloadkaart die eerst
   Tailwind-klassen droeg die zonder build niet bestaan.
   --------------------------------------------------------------- */
body.fi-panel-portal .vivi-galerij {
    display: flex;
    flex-direction: column;
    gap: var(--vivi-ruimte-m);
}
body.fi-panel-portal .vivi-downloadkaart {
    border-radius: var(--vivi-radius-frame);
}
body.fi-panel-portal .vivi-downloadkaart__binnen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--vivi-ruimte-s);
}

/* ---------------------------------------------------------------
   Video's: per video een kaart, per versie een blok met speler,
   reacties, invoer en oordeel.
   --------------------------------------------------------------- */
body.fi-panel-portal .vivi-videokaart {
    border-radius: var(--vivi-radius-frame);
}
body.fi-panel-portal .vivi-videokaart__kop {
    display: inline-flex;
    align-items: center;
    gap: var(--vivi-ruimte-xs);
}
body.fi-panel-portal .vivi-videoversie {
    display: flex;
    flex-direction: column;
    gap: var(--vivi-ruimte-s);
}
body.fi-panel-portal .vivi-videoversie--volgend {
    margin-top: var(--vivi-ruimte-m);
    padding-top: var(--vivi-ruimte-m);
}
body.fi-panel-portal .vivi-videospeler {
    display: block;
    width: 100%;
    max-height: 70vh;
    border-radius: var(--vivi-radius-kaart);
    background: var(--vivi-vlak-donker);
}
body.fi-panel-portal .vivi-videoreacties {
    display: flex;
    flex-direction: column;
}
body.fi-panel-portal :is(.vivi-videoreactie__body, .vivi-videoreactie__naam) {
    font-family: inherit;
}
body.fi-panel-portal .vivi-videoreactie__tijd {
    min-height: var(--vivi-tik-min);
    font-variant-numeric: var(--vivi-cijfer-numeriek);
}
body.fi-panel-portal .vivi-videoinvoer,
body.fi-panel-portal .vivi-videooordeel {
    align-items: center;
    gap: var(--vivi-ruimte-xs);
}
body.fi-panel-portal .vivi-videoreactie__moment {
    flex: 0 1 5rem;
    min-width: 4rem;
    min-height: var(--vivi-tik-min);
}
body.fi-panel-portal .vivi-videoreactie__tekst {
    flex: 1 1 12rem;
    min-width: 0;
    min-height: var(--vivi-tik-min);
}

/* ---------------------------------------------------------------
   Onboarding, profiel en instellingen: één leeskolom.
   --------------------------------------------------------------- */
body.fi-panel-portal .vivi-onboarding {
    width: 100%;
    max-width: 48rem;
}
body.fi-panel-portal .vivi-onboarding__lijst {
    padding-block: var(--vivi-ruimte-2xs);
    border-radius: var(--vivi-radius-frame);
}
body.fi-panel-portal .vivi-onboarding__antwoord {
    display: flex;
    flex-direction: column;
    gap: var(--vivi-ruimte-2xs);
}
body.fi-panel-portal .vivi-onboarding__leeg {
    font-style: italic;
}

/* De stapkop: klein het stapnummer in het labelregister, groot en licht de
   sectietitel (moodboardregel 2), rechts de weg terug naar het overzicht. */
body.fi-panel-portal .vivi-stapkop {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--vivi-ruimte-s);
    max-width: 48rem;
}
body.fi-panel-portal .vivi-stapkop__tekst {
    display: flex;
    flex-direction: column;
    gap: var(--vivi-ruimte-2xs);
    min-width: 0;
    flex: 1 1 20rem;
}
body.fi-panel-portal .vivi-stapkop__nummer {
    margin: 0;
    font-family: var(--vivi-type-label);
    font-variant-caps: var(--vivi-type-label-variant);
    letter-spacing: var(--vivi-type-label-spatie);
    font-size: var(--vivi-tekst-m);
    color: var(--vivi-tekst-2);
}
body.fi-panel-portal .vivi-stapkop__titel {
    margin: 0;
    font-family: var(--vivi-type-display);
    font-weight: 400;
    letter-spacing: var(--vivi-type-display-spatie);
    font-size: var(--vivi-kop-l);
    line-height: 1.1;
    text-wrap: balance;
    color: var(--vivi-tekst);
}

/* De stapbalk: een segment per stap. Af is accent, de huidige stap inkt,
   wat nog komt een fijne lijn. Kleur is niet de enige drager: het
   stapnummer staat in tekst erboven en aria-current zit op de huidige.
   Eigen naam, want .vivi-stappen in 04 is een verticale lijst met merken. */
body.fi-panel-portal .vivi-stapbalk {
    display: flex;
    gap: var(--vivi-ruimte-2xs);
    max-width: 48rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
body.fi-panel-portal .vivi-stapbalk__stap {
    flex: 1 1 0;
    height: 4px;
    border-radius: var(--vivi-radius-pil);
    background: var(--vivi-lijn-fijn);
}
body.fi-panel-portal .vivi-stapbalk__stap--af {
    background: var(--vivi-accent);
}
body.fi-panel-portal .vivi-stapbalk__stap--nu {
    background: var(--vivi-tekst);
}

@media (max-width: 639.98px) {
    body.fi-panel-portal .vivi-galerijkaart__voet {
        padding: var(--vivi-ruimte-s);
    }
    body.fi-panel-portal .vivi-stapkop__titel {
        font-size: var(--vivi-kop-m);
    }
    /* 05 zet elke knop in een .vivi-rij op smal over de volle breedte; het
       tekstveld krijgt daarom ook een eigen regel. */
    body.fi-panel-portal .vivi-videoreactie__tekst {
        flex-basis: 100%;
    }
}

/* Contrast en aanraakdoelen op de UI8-schermen (gemeten 24-09-2026 op 375,
   768, 1440 en 1920). --vivi-muted haalt 3,98:1 op wit en 3,48:1 op het
   stille pilvlak; de rol --vivi-tekst-2 haalt 5,18:1 op de app-achtergrond.
   De tonen ok en let-op zakten onder AA (3,35 en 3,25) en krijgen hier een
   inktmenging. Alleen binnen deze schermen; de componentlagen blijven zoals
   ze zijn. */
body.fi-panel-portal .vivi-ui8 :is(
    .vivi-meta,
    .vivi-pill--stil,
    .vivi-section__uitleg,
    .vivi-tile-btn--fav:not(.on),
    .vivi-rij .vivi-chip,
    .vivi-videoreactie__tijd,
    .fi-fo-field-wrp-helper-text,
    .fi-fo-field-wrp-label sup
) {
    color: var(--vivi-tekst-2);
}
body.fi-panel-portal .vivi-ui8 .vivi-pill--ok {
    color: color-mix(in srgb, var(--vivi-ok) 55%, var(--vivi-tekst));
}
body.fi-panel-portal .vivi-ui8 .vivi-pill--let-op {
    color: color-mix(in srgb, var(--vivi-warn) 55%, var(--vivi-tekst));
}
body.fi-panel-portal .vivi-ui8 .vivi-tile-btn {
    width: var(--vivi-tik-min);
    height: var(--vivi-tik-min);
}
body.fi-panel-portal .vivi-ui8 .fi-input-wrp .fi-input {
    min-height: var(--vivi-tik-min);
}
body.fi-panel-portal .vivi-ui8 .fi-input-wrp .fi-icon-btn {
    min-width: var(--vivi-tik-min);
    min-height: var(--vivi-tik-min);
}
body.fi-panel-portal .vivi-ui8 .filepond--label-action {
    color: var(--vivi-tekst);
    text-decoration-color: currentColor;
}

/* ---------------------------------------------------------------
   Portaal-UI8b en Portaal-INLOG-A: de inlogdeur, wachtwoord vergeten,
   wachtwoord herstellen en de uitnodigingspagina. Alle vier dragen de
   stijllaag via brand-head en de body-klassen fi-panel-portal en vivi-auth,
   zodat de tokens uit 09 hier net zo gelden als achter de inlog.

   Opbouw (INLOG-A, 26-09-2026): de verlooprol adem vult het scherm met een
   tint per dagdeel (data-dagdeel op body) en korrel erover; de witte kaart
   staat als het ene rustige vlak in het midden, ook op 375 even ver van
   boven als van onder. Alle tekst, velden en de knop staan op de kaart,
   dus nooit op het verloop.

   Vergeten en herstellen zijn Filament-pagina's (App\Filament\Auth). Hun body
   draagt daarom ook fi-body en fi-panel-admin of fi-panel-team, en 17-beheer
   raakt knop en groet daar met (0,2,1). Elke regel hier begint met
   body.fi-panel-portal.vivi-auth (0,2,1 plus de klasse erna) en wint dus.
   --------------------------------------------------------------- */
body.fi-panel-portal.vivi-auth {
    margin: 0;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--vivi-ruimte-xl) var(--vivi-ruimte-l);
    box-sizing: border-box;
    background-color: var(--vivi-app-achtergrond);
    background-image: var(--vivi-korrel), var(--vivi-adem-avond);
    background-attachment: fixed;
    color: var(--vivi-tekst);
    font-family: var(--vivi-type-tekst);
    font-size: var(--vivi-tekst-l);
    line-height: 1.5;
}
body.fi-panel-portal.vivi-auth[data-dagdeel="ochtend"] {
    background-image: var(--vivi-korrel), var(--vivi-adem-ochtend);
}
body.fi-panel-portal.vivi-auth[data-dagdeel="middag"] {
    background-image: var(--vivi-korrel), var(--vivi-adem-middag);
}
body.fi-panel-portal.vivi-auth *,
body.fi-panel-portal.vivi-auth *::before,
body.fi-panel-portal.vivi-auth *::after {
    box-sizing: border-box;
}

/* Filament's simple layout om vergeten en herstellen: zijn eigen kaart
   (fi-simple-main: wit, ring, schaduw, 512 breed) valt weg, zodat alleen
   onze kaart overblijft. Het centreren doet de body hierboven. */
body.fi-panel-portal.vivi-auth .fi-simple-layout,
body.fi-panel-portal.vivi-auth .fi-simple-main-ctn {
    display: contents;
}
body.fi-panel-portal.vivi-auth .fi-simple-main {
    display: contents;
}

body.fi-panel-portal.vivi-auth .vivi-auth__kaart {
    width: 100%;
    max-width: 28rem;
    display: flex;
    flex-direction: column;
    gap: var(--vivi-ruimte-l);
    margin: 0;
    padding: var(--vivi-ruimte-2xl) var(--vivi-ruimte-xl) var(--vivi-ruimte-xl);
    border-radius: var(--vivi-radius-frame);
    background: var(--vivi-vlak);
    box-shadow: var(--vivi-schaduw-frame);
    container-type: inline-size;
}
body.fi-panel-portal.vivi-auth .vivi-auth__merk {
    margin: 0;
    display: flex;
}

/* De groet: twee regels, dagdeel in inkt en de wachtregel in tekst-2. De maat
   volgt de kaartbreedte (cqi), zodat de wachtregel in nl, en en de op één
   regel past; gemeten in de oplevering. 17-beheer zet de kop op vaste 32,
   40 en 46 pixels, deze regel wint op specificiteit. */
body.fi-panel-portal.vivi-auth .vivi-groet {
    gap: var(--vivi-ruimte-xs);
}
/* De datum houdt de maat van het dashboard (tekst-m uit 11). Een stap
   kleiner rendert hij in kleinkapitaal rond de 9 pixel (kritiekpanel 26-09). */
body.fi-panel-portal.vivi-auth .vivi-groet__kop {
    font-size: clamp(1.5rem, 8.4cqi, 2.25rem);
    line-height: 1.12;
    text-wrap: balance;
}
body.fi-panel-portal.vivi-auth .vivi-groet__wacht {
    display: block;
}

body.fi-panel-portal.vivi-auth .vivi-auth__intro {
    margin: 0;
    color: var(--vivi-tekst-2);
    text-wrap: pretty;
}
body.fi-panel-portal.vivi-auth .vivi-auth__formulier {
    display: flex;
    flex-direction: column;
    gap: var(--vivi-ruimte-m);
    margin: 0;
}
body.fi-panel-portal.vivi-auth .vivi-auth__veld {
    display: flex;
    flex-direction: column;
    gap: var(--vivi-ruimte-xs);
}
body.fi-panel-portal.vivi-auth .vivi-auth__label {
    font-size: var(--vivi-tekst-m);
    font-weight: 500;
    color: var(--vivi-tekst);
}
/* Uitleg onder een veld (taalkeuze op de wachtwoordpagina). Rol tekst-2, net
   als de intro: op de witte kaart haalt muted de 4,5:1 niet. */
body.fi-panel-portal.vivi-auth .vivi-auth__hulp {
    margin: 0;
    font-size: var(--vivi-tekst-s);
    color: var(--vivi-tekst-2);
}

/* 03 geeft .vivi-input een rand van 12 procent inkt: 1,3:1 op wit, onder de
   3:1 die een veldrand nodig heeft. Hier de rol tekst-2. */
body.fi-panel-portal.vivi-auth .vivi-input {
    width: 100%;
    min-height: var(--vivi-tik-min);
    margin: 0;
    font-family: var(--vivi-type-tekst);
    font-size: var(--vivi-tekst-l);
    /* Vast, want Filament zet inputs op line-height inherit (24px) en dan is
       het veld op vergeten en herstellen 45px hoog tegen 44 op /login. */
    line-height: 1.25;
    border-color: var(--vivi-tekst-2);
    background: var(--vivi-vlak);
    color: var(--vivi-tekst);
}
/* De taalkeuze op de wachtwoordpagina: zelfde pil als de wachtwoordvelden,
   maar zonder browserpijl (zie .vivi-select in 03) en met dezelfde chevron.
   Na de regel hierboven, want die zet background als shorthand. */
body.fi-panel-portal.vivi-auth select.vivi-input {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    padding-right: 2.6rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%232B2419'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 1rem center; background-size: .9rem;
}
/* Eén focusring. 03 zet op :focus een goudrand plus een gouden gloed; die
   stapelde hier op de outline (twee indicatoren, nulmeting). Hier blijft
   alleen de inktlijn over, op alles wat je met tab bereikt. */
body.fi-panel-portal.vivi-auth .vivi-input:focus {
    border-color: var(--vivi-tekst-2);
    box-shadow: none;
    outline: none;
}
body.fi-panel-portal.vivi-auth :is(.vivi-input, .vivi-auth__knop, .vivi-auth__toon, .vivi-auth__anders a, .vivi-auth__voet a, .vivi-auth__onthoud input):focus-visible {
    outline: 2px solid var(--vivi-tekst);
    outline-offset: 2px;
    box-shadow: none;
}
/* Op het veld valt de ring over de rand heen: met afstand 2 stonden rand,
   witruimte en ring als drie lijnen om het veld (kritiekpanel 26-09).
   input erbij, anders verliest hij van de :is()-regel hierboven (0,4,2). */
body.fi-panel-portal.vivi-auth input.vivi-input:focus-visible {
    outline-offset: -1px;
}

/* Autofill: Chrome kleurt een ingevuld veld lichtblauw, een vlak dat nergens
   anders in het portaal staat. Hier houdt het veld zijn eigen vlak en inkt;
   de focusring hierboven blijft staan, want die is een outline. */
body.fi-panel-portal.vivi-auth .vivi-input:-webkit-autofill,
body.fi-panel-portal.vivi-auth .vivi-input:-webkit-autofill:hover,
body.fi-panel-portal.vivi-auth .vivi-input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--vivi-tekst);
    caret-color: var(--vivi-tekst);
    box-shadow: inset 0 0 0 100px var(--vivi-vlak);
    transition: background-color 9999s ease-out 0s;
}
body.fi-panel-portal.vivi-auth .vivi-input:autofill {
    -webkit-text-fill-color: var(--vivi-tekst);
    box-shadow: inset 0 0 0 100px var(--vivi-vlak);
}

/* Wachtwoordveld met toonknop: de knop is een eigen doel van 44 bij 44 aan
   de rechterkant van het veld, het veld maakt er ruimte voor. */
body.fi-panel-portal.vivi-auth .vivi-auth__wachtwoord {
    position: relative;
    display: block;
}
body.fi-panel-portal.vivi-auth .vivi-auth__wachtwoord .vivi-input {
    padding-right: calc(var(--vivi-tik-min) + var(--vivi-ruimte-2xs));
}
body.fi-panel-portal.vivi-auth .vivi-auth__toon {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--vivi-tik-min);
    height: var(--vivi-tik-min);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--vivi-radius-pil);
    background: transparent;
    color: var(--vivi-tekst-2);
    cursor: pointer;
}
body.fi-panel-portal.vivi-auth .vivi-auth__toon:hover {
    color: var(--vivi-tekst);
}
body.fi-panel-portal.vivi-auth .vivi-auth__toon svg {
    width: 1.25rem;
    height: 1.25rem;
}
body.fi-panel-portal.vivi-auth .vivi-auth__toon [data-toon="verberg"],
body.fi-panel-portal.vivi-auth .vivi-auth__toon[aria-pressed="true"] [data-toon="toon"] {
    display: none;
}
body.fi-panel-portal.vivi-auth .vivi-auth__toon[aria-pressed="true"] [data-toon="verberg"] {
    display: block;
}

body.fi-panel-portal.vivi-auth .vivi-auth__onthoud {
    display: flex;
    align-items: center;
    gap: var(--vivi-ruimte-xs);
    min-height: var(--vivi-tik-min);
    font-size: var(--vivi-tekst-m);
    cursor: pointer;
}
body.fi-panel-portal.vivi-auth .vivi-auth__onthoud input {
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
    accent-color: var(--vivi-tekst);
}

/* De ene primaire handeling. 17-beheer maakt .vivi-btn op admin en team een
   pil met eigen binnenruimte; hier dezelfde pil op de volle breedte.
   De letter staat er vast bij: op /login erfde de knop de systeemletter van
   de browser, op vergeten en herstellen zet 02 (.fi-body *) Poppins. Twee
   letters voor dezelfde knop (kritiekpanel 26-09). */
body.fi-panel-portal.vivi-auth .vivi-auth__knop {
    width: 100%;
    justify-content: center;
    min-height: var(--vivi-tik-min);
    padding-inline: var(--vivi-ruimte-l);
    border-radius: var(--vivi-radius-pil);
    font-family: var(--vivi-type-tekst);
    font-size: var(--vivi-tekst-l);
    font-weight: 500;
}
body.fi-panel-portal.vivi-auth .vivi-auth__knop[disabled] {
    cursor: progress;
}

body.fi-panel-portal.vivi-auth .vivi-auth__fout {
    margin: 0;
    padding: var(--vivi-ruimte-s) var(--vivi-ruimte-m);
    border-radius: var(--vivi-radius-frame);
    background: var(--vivi-fout-vlak);
    color: var(--vivi-fout);
    font-size: var(--vivi-tekst-m);
}
body.fi-panel-portal.vivi-auth .vivi-auth__melding {
    margin: 0;
    padding: var(--vivi-ruimte-m);
    border-radius: var(--vivi-radius-kaart);
    background: var(--vivi-vlak-2);
    color: var(--vivi-tekst);
    font-size: var(--vivi-tekst-m);
}

/* Inloggen zonder wachtwoord: een stille link onder de pil, gecentreerd op
   de pil zoals in de Maria-pin (een pil, een onderstreepte regel eronder).
   Dichter bij de pil dan de voet, want hij hoort bij het inloggen. */
body.fi-panel-portal.vivi-auth .vivi-auth__anders {
    display: flex;
    justify-content: center;
    margin: calc(var(--vivi-ruimte-m) * -1) 0 calc(var(--vivi-ruimte-xs) * -1);
    font-size: var(--vivi-tekst-m);
}
body.fi-panel-portal.vivi-auth .vivi-auth__anders a {
    display: inline-flex;
    align-items: center;
    min-height: var(--vivi-tik-min);
    color: var(--vivi-tekst-2);
    font-weight: 400;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .2em;
}
body.fi-panel-portal.vivi-auth .vivi-auth__anders a:hover {
    color: var(--vivi-tekst);
}

/* Eén stille voetregel: vergeten en toegang aanvragen (of terug naar
   inloggen) naast elkaar, elk een doel van 44 hoog. Links uitgelijnd op de
   lijn van velden en kop, in tekst-2 en regulier: de pil erboven is de
   handeling, deze regel is de uitweg (kritiekpanel 26-09). */
body.fi-panel-portal.vivi-auth .vivi-auth__voet {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    column-gap: var(--vivi-ruimte-l);
    margin: calc(var(--vivi-ruimte-xs) * -1) 0 calc(var(--vivi-ruimte-s) * -1);
    font-size: var(--vivi-tekst-m);
    color: var(--vivi-tekst-2);
}
body.fi-panel-portal.vivi-auth .vivi-auth__voet a {
    display: inline-flex;
    align-items: center;
    min-height: var(--vivi-tik-min);
    color: var(--vivi-tekst-2);
    font-weight: 400;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .2em;
}
body.fi-panel-portal.vivi-auth .vivi-auth__voet a:hover {
    color: var(--vivi-tekst);
}

/* Smal scherm: de kaart blijft verticaal gecentreerd (de oude regel zette hem
   bovenin, 10 boven en 212 onder op 375) met een zijmarge van 16.
   De voet gaat een stap kleiner: op 375 is de kaart binnen 308 breed en zijn
   de twee links op tekst-m samen 301, dus breekt hij in twee regels. Een
   container-query op de kaart kan niet, want de breekpuntbewaker kent alleen
   de schaal; vanaf 480 is de kaart binnen weer 397 breed.
   De safe-area telt mee zoals in 16 (INLOG-C): op de herstelpagina's van het
   portaal staat de cover-viewport, en in de app op het beginscherm schuift de
   kaart dan niet onder de notch of de thuisbalk. Elders is die rand 0px. */
@media (max-width: 479.98px) {
    body.fi-panel-portal.vivi-auth {
        padding:
            calc(var(--vivi-ruimte-l) + env(safe-area-inset-top, 0px))
            calc(16px + env(safe-area-inset-right, 0px))
            calc(var(--vivi-ruimte-l) + env(safe-area-inset-bottom, 0px))
            calc(16px + env(safe-area-inset-left, 0px));
    }
    body.fi-panel-portal.vivi-auth .vivi-auth__kaart {
        padding: var(--vivi-ruimte-xl) var(--vivi-ruimte-l) var(--vivi-ruimte-l);
    }
    body.fi-panel-portal.vivi-auth .vivi-auth__voet {
        font-size: var(--vivi-tekst-s);
    }
}

/* Aanvraagbevestiging: de stille regel onder de banner in tekst-2 in plaats
   van muted, en het moment van ontvangst in de klanttijd. */
body.fi-panel-portal .vivi-bevestiging .vivi-muted {
    color: var(--vivi-tekst-2);
}
body.fi-panel-portal .vivi-bevestiging__moment {
    margin: 0;
    font-size: var(--vivi-tekst-s);
    font-variant-numeric: var(--vivi-cijfer-numeriek);
    color: var(--vivi-tekst-2);
}

/* Bestanden: de rijen van een map onder elkaar, met de kaart als vlak. */
body.fi-panel-portal .vivi-bestanden__lijst {
    display: flex;
    flex-direction: column;
    gap: var(--vivi-ruimte-xs);
}

/* Groei: het aanbod met zijn Alpine-segment, de kebab rechtsboven op elke
   dienstkaart, en de uitleg in de donkere kaarten in de tekstkleur op donker
   (muted is daar 55 procent cream, en de waarde van een stat is standaard
   inkt: inkt op inkt). */
body.fi-panel-portal .vivi-groei__aanbod {
    display: flex;
    flex-direction: column;
    gap: var(--vivi-ruimte-l);
}
body.fi-panel-portal .vivi-groei-dienst__kop {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--vivi-ruimte-s);
}
body.fi-panel-portal .vivi-groei-nudge .vivi-groei-nudge__uitleg,
body.fi-panel-portal .vivi-groei-nudge .vivi-stat__value {
    color: var(--vivi-tekst-op-donker);
}
body.fi-panel-portal .vivi-groei-bundel__uitleg {
    color: var(--vivi-tekst-2);
}
body.fi-panel-portal .vivi-card--dark .vivi-groei-bundel__uitleg {
    color: var(--vivi-tekst-op-donker);
}

/* Sitecijfers: een dominant getal met twee kleine ernaast, de grafiek met de
   as als gewone tekst eronder, en de twee lijsten naast elkaar vanaf 1024. */
body.fi-panel-portal .vivi-sitecijfers__kern {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--vivi-ruimte-l);
}
body.fi-panel-portal .vivi-sitecijfers__bij {
    display: flex;
    gap: var(--vivi-ruimte-xl);
}
body.fi-panel-portal .vivi-sitecijfers__bij .vivi-stat__value {
    font-size: var(--vivi-kop-m);
}
/* De weergavenregel krijgt een eigen rij onder de drie cijfers. */
body.fi-panel-portal .vivi-sitecijfers__noot {
    flex-basis: 100%;
    margin: 0;
}
body.fi-panel-portal .vivi-sitecijfers__grafiek {
    display: flex;
    flex-direction: column;
    gap: var(--vivi-ruimte-2xs);
}
body.fi-panel-portal .vivi-sitecijfers__svg {
    display: block;
    width: 100%;
    height: auto;
}
body.fi-panel-portal .vivi-sitecijfers__grond {
    stroke: var(--vivi-tekst-2);
    stroke-width: 1;
}
body.fi-panel-portal .vivi-sitecijfers__balk {
    fill: var(--vivi-tekst-2);
}
body.fi-panel-portal .vivi-sitecijfers__balk:hover {
    fill: var(--vivi-tekst);
}
body.fi-panel-portal .vivi-sitecijfers__as {
    display: flex;
    justify-content: space-between;
    margin: 0;
    font-size: var(--vivi-tekst-s);
    font-variant-numeric: var(--vivi-cijfer-numeriek);
    color: var(--vivi-tekst-2);
}
body.fi-panel-portal .vivi-sitecijfers__lijsten {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--vivi-ruimte-l);
    align-items: start;
}
@media (min-width: 1024px) {
    body.fi-panel-portal .vivi-sitecijfers__lijsten:has(> :nth-child(2)) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Groei en Sitecijfers: de knoppen op de dienstkaarten, de bundel, de nudge en
   de groeiverwijzing halen het aanraakdoel van 44 pixels (gemeten 34 op 1440). */
body.fi-panel-portal :is(.vivi-groei-dienst, .vivi-groei-bundel, .vivi-groei-nudge, .vivi-sitecijfers__haak) .vivi-btn {
    min-height: var(--vivi-tik-min);
}

/* ---- Pinterest (lane pinterest-studio, P2b 29-09-2026) ----
   De Pinkaart en het akkoordvenster op de Pinterest-pagina van de klant.
   Verankerd blok tot er akkoord is voor een eigen laag 19-pinterest.css;
   dan verhuist dit blok ongewijzigd. Alleen vivi-pin-*-klassen en tokens.

   Het beeld staat altijd in 2:3, zoals op Pinterest, en wordt nooit
   bijgesneden (contain): de klant keurt het hele beeld, niet een uitsnede.
   Op een telefoon ligt de kaart plat (beeld links, tekst rechts), anders
   wordt elke Pin een scherm hoog; vanaf 640 staat hij rechtop in een raster. */
body.fi-panel-portal .vivi-pin-week {
    display: grid;
    gap: var(--vivi-ruimte-s);
}
body.fi-panel-portal .vivi-pin-week + .vivi-pin-week {
    margin-top: var(--vivi-ruimte-l);
}
body.fi-panel-portal .vivi-pin-week__kop {
    margin: 0;
    font-size: var(--vivi-tekst-m);
    font-weight: 600;
    color: var(--vivi-tekst-2);
}
/* Het bord: Pins als op een Pinterest-bord (herontwerp 29-10-2026, gemeten
   tegen pinterest.com op 1440 en 390: kolommen van 236 tot 267 breed, 16
   tussenruimte, hoek 16, geen kaartrand of schaduw, beeld in zijn eigen
   verhouding). Een raster en geen kolommen-op-kolommen: de volgorde is tijd,
   en die moet van links naar rechts lezen. Pins zijn vrijwel altijd 2:3, dus
   een raster met boven uitgelijnde Pins oogt als het bord zelf. */
body.fi-panel-portal .vivi-pin-raster {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem 1rem;
    align-items: start;
}
@media (min-width: 640px) {
    body.fi-panel-portal .vivi-pin-raster {
        grid-template-columns: repeat(auto-fill, minmax(14.75rem, 1fr));
    }
}
/* Metselwerk (x-vivi.pin-raster zet de klasse en per cel de rijspan): rijen
   van 2 pixels, de verticale tussenruimte zit in de span. */
body.fi-panel-portal .vivi-pin-raster.is-metselwerk {
    --pinbord-gat: 24;
    grid-auto-rows: 2px;
    row-gap: 0;
}
body.fi-panel-portal .vivi-pin-cel {
    min-width: 0;
}
body.fi-panel-portal .vivi-pin-kaart {
    position: relative;
    display: grid;
    gap: var(--vivi-ruimte-s);
    min-width: 0;
}
body.fi-panel-portal .vivi-pin-kaart__beeld {
    position: relative;
    overflow: hidden;
    border-radius: var(--vivi-radius-l);
    background: var(--vivi-vlak-2);
}
body.fi-panel-portal .vivi-pin-kaart__open {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
}
body.fi-panel-portal .vivi-pin-kaart__open img {
    display: block;
    width: 100%;
    height: auto;
}
body.fi-panel-portal .vivi-pin-kaart__leeg {
    display: grid;
    place-items: center;
    aspect-ratio: 2 / 3;
    font-size: var(--vivi-tekst-s);
    color: var(--vivi-tekst-2);
}
body.fi-panel-portal .vivi-pin-kaart__open:focus-visible {
    outline: none;
}
body.fi-panel-portal .vivi-pin-kaart__beeld:has(.vivi-pin-kaart__open:focus-visible) {
    box-shadow: var(--vivi-ring-focus, 0 0 0 3px var(--vivi-gold));
}
/* De laag bij wijzen: het beeld zakt iets terug, de knoppen komen erop. */
body.fi-panel-portal .vivi-pin-kaart__beeld::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(43, 36, 25, .32);
    opacity: 0;
    transition: opacity .15s ease;
    pointer-events: none;
}
body.fi-panel-portal .vivi-pin-kaart__stand {
    position: absolute;
    top: .75rem;
    left: .75rem;
    z-index: 1;
    max-width: calc(100% - 1.5rem);
    pointer-events: none;
}
/* De stand op het beeld: een dichte witte pil, want de getinte badge viel op
   een foto weg (groen op gras, gemeten 29-10-2026). */
body.fi-panel-portal .vivi-pin-kaart__stand .vivi-pill {
    background-color: rgba(255, 255, 255, .96);
    border-color: transparent;
    box-shadow: 0 1px 2px rgba(43, 36, 25, .12);
}
body.fi-panel-portal .vivi-pin-kaart__onder {
    position: absolute;
    right: .75rem;
    bottom: .75rem;
    left: .75rem;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--vivi-ruimte-xs);
    pointer-events: none;
}
body.fi-panel-portal .vivi-pin-kaart__domein {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    min-width: 0;
    padding: .4rem .7rem;
    border-radius: var(--vivi-radius-pil);
    background: rgba(255, 255, 255, .92);
    color: var(--vivi-ink);
    font-size: var(--vivi-tekst-s);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.fi-panel-portal .vivi-pin-kaart__domeinpijl {
    flex: none;
    width: 1rem;
    height: 1rem;
}
body.fi-panel-portal .vivi-pin-kaart__rond {
    display: inline-flex;
    gap: var(--vivi-ruimte-xs);
    margin-left: auto;
}
body.fi-panel-portal .vivi-pin-kaart__rondknop {
    display: inline-grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 0;
    border-radius: var(--vivi-radius-rond);
    background: rgba(255, 255, 255, .92);
    color: var(--vivi-ink);
    cursor: pointer;
    pointer-events: auto;
}
body.fi-panel-portal .vivi-pin-kaart__rondknop svg {
    width: 1.15rem;
    height: 1.15rem;
}
body.fi-panel-portal .vivi-pin-kaart__rondknop:hover {
    background: var(--vivi-vlak);
}
body.fi-panel-portal .vivi-pin-kaart__hoofdknop {
    min-height: var(--vivi-tik-min);
    justify-content: center;
    border-radius: var(--vivi-radius-pil);
    font-weight: 600;
}
body.fi-panel-portal .vivi-pin-kaart__tekst {
    display: grid;
    gap: .15rem;
    min-width: 0;
    padding: 0 .25rem;
}
/* Zelfde stem als de titel van een actiekaart: displayletter, regulier gewicht
   (moodboardregel "type licht tot regulier"); twee regels, zoals op Pinterest. */
body.fi-panel-portal .vivi-pin-kaart__titel {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    margin: 0;
    font-family: var(--vivi-type-display);
    font-size: var(--vivi-tekst-l);
    font-weight: 400;
    letter-spacing: var(--vivi-type-display-spatie);
    line-height: 1.25;
    color: var(--vivi-tekst);
    overflow-wrap: anywhere;
}
body.fi-panel-portal .vivi-pin-kaart p {
    margin: 0;
}
body.fi-panel-portal .vivi-pin-kaart .vivi-meta {
    color: var(--vivi-tekst-2);
    text-wrap: pretty;
}
body.fi-panel-portal .vivi-pin-kaart__bord,
body.fi-panel-portal .vivi-pin-kaart__moment {
    display: block;
}
/* Datum en tijd blijven bij elkaar: op een telefoon viel het jaar anders los. */
body.fi-panel-portal .vivi-pin-kaart__datum {
    white-space: nowrap;
}
body.fi-panel-portal .vivi-pin-kaart__opmerking {
    margin-top: .2rem;
    padding-left: var(--vivi-ruimte-s);
    border-left: 2px solid var(--vivi-line);
}
/* Op een telefoon: geen domeinpil op het beeld (de kolom is 170 breed, de
   pil verdrong de knoppen), de ronde knoppen en de hoofdknop altijd zichtbaar. */
@media (max-width: 639.98px) {
    body.fi-panel-portal .vivi-pin-kaart__domein {
        display: none;
    }
    /* "Wacht op jouw akkoord" brak in een kolom van 171 over twee regels. */
    body.fi-panel-portal .vivi-pin-kaart__stand {
        top: .5rem;
        left: .5rem;
        max-width: calc(100% - 1rem);
    }
    body.fi-panel-portal .vivi-pin-kaart__stand .vivi-pill {
        max-width: 100%;
        padding-inline: .5rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    body.fi-panel-portal .vivi-pin-kaart__hoofdknop {
        width: 100%;
        padding-inline: .5rem;
        font-size: var(--vivi-tekst-s);
    }
}
/* Met een muis: zoals op Pinterest staan de knoppen pas op het beeld bij
   wijzen of bij toetsenbordfocus; de hoofdknop rechtsboven op het beeld. */
@media (min-width: 640px) and (hover: hover) and (pointer: fine) {
    body.fi-panel-portal .vivi-pin-kaart__hoofdknop {
        position: absolute;
        top: .75rem;
        right: .75rem;
        z-index: 2;
        min-height: 2.5rem;
        padding: .5rem 1rem;
        box-shadow: var(--vivi-schaduw-zweef);
    }
    body.fi-panel-portal .vivi-pin-kaart.heeft-hoofdknop .vivi-pin-kaart__stand {
        max-width: calc(100% - 1.5rem);
    }
    body.fi-panel-portal :is(.vivi-pin-kaart__hoofdknop, .vivi-pin-kaart__onder) {
        opacity: 0;
        transition: opacity .15s ease;
    }
    body.fi-panel-portal .vivi-pin-kaart:is(:hover, :focus-within) :is(.vivi-pin-kaart__hoofdknop, .vivi-pin-kaart__onder),
    body.fi-panel-portal .vivi-pin-kaart:is(:hover, :focus-within) .vivi-pin-kaart__beeld::after {
        opacity: 1;
    }
    /* Bij wijzen wijkt de stand voor de hoofdknop als die er overheen zou vallen. */
    body.fi-panel-portal .vivi-pin-kaart.heeft-hoofdknop:is(:hover, :focus-within) .vivi-pin-kaart__stand {
        opacity: 0;
    }
}
@media (prefers-reduced-motion: reduce) {
    body.fi-panel-portal :is(.vivi-pin-kaart__hoofdknop, .vivi-pin-kaart__onder),
    body.fi-panel-portal .vivi-pin-kaart__beeld::after {
        transition: none;
    }
}

/* De pagina als geheel: een vaste maat tussen de blokken, en onder 1024
   onderaan ruimte voor de Loïs-knop (56 hoog, 16 van de rand), die anders
   over de knoppen van de laatste Pin viel. */
body.fi-panel-portal .vivi-pin-pagina {
    display: grid;
    gap: var(--vivi-ruimte-l);
    min-width: 0;
}
@media (max-width: 1023.98px) {
    body.fi-panel-portal .vivi-pin-pagina {
        padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
    }
}

/* De vier standen op een telefoon als twee bij twee even brede vakken: in een
   rij braken ze rafelig af (drie en een). Vanaf 640 weer een rij. */
@media (max-width: 639.98px) {
    body.fi-panel-portal .vivi-pin-standen {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    body.fi-panel-portal .vivi-pin-standen .vivi-segment__item {
        justify-content: space-between;
        width: 100%;
    }
}

/* Gepland: smaller dan 1024 de lijst per week, vanaf 1024 de maandkalender.
   Beide staan in de pagina; hier wordt er één getoond. */
body.fi-panel-portal .vivi-pin-maanden {
    display: none;
}
@media (min-width: 1024px) {
    body.fi-panel-portal .vivi-pin-weken {
        display: none;
    }
    body.fi-panel-portal .vivi-pin-maanden {
        display: grid;
        gap: var(--vivi-ruimte-2xl);
    }
}

/* De maand zoals op een wandkalender uit het moodboard: de maandnaam groot en
   licht linksboven, de dagnummers groot en licht bovenin elk vak, dunne lijnen
   in plaats van kaders, en de Pin als klein 2:3-beeld in het vak. */
body.fi-panel-portal .vivi-pin-maand {
    display: grid;
    gap: var(--vivi-ruimte-s);
}
body.fi-panel-portal .vivi-pin-maand__kop {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--vivi-ruimte-2xs) var(--vivi-ruimte-m);
    margin-bottom: var(--vivi-ruimte-xs);
}
body.fi-panel-portal .vivi-pin-maand__titel {
    margin: 0;
    font-family: var(--vivi-type-display);
    font-size: var(--vivi-kop-l);
    font-weight: 400;
    letter-spacing: var(--vivi-type-display-spatie);
    line-height: 1.1;
    color: var(--vivi-tekst);
    text-wrap: balance;
}
body.fi-panel-portal .vivi-pin-maand__kop .vivi-meta {
    margin: 0;
    color: var(--vivi-tekst-2);
}
body.fi-panel-portal :is(.vivi-pin-maand__weekdagen, .vivi-pin-maand__dagen) {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    column-gap: var(--vivi-ruimte-s);
}
body.fi-panel-portal .vivi-pin-maand__weekdagen span {
    font-size: var(--vivi-tekst-s);
    font-weight: 600;
    color: var(--vivi-tekst-2);
}
body.fi-panel-portal .vivi-pin-maand__dagen {
    margin: 0;
    padding: 0;
    list-style: none;
}
body.fi-panel-portal .vivi-pin-dag {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--vivi-ruimte-xs);
    min-width: 0;
    min-height: 5rem;
    padding: var(--vivi-ruimte-xs) 0 var(--vivi-ruimte-s);
    border-top: 1px solid var(--vivi-lijn-fijn);
}
body.fi-panel-portal .vivi-pin-dag.is-buiten {
    border-top-color: transparent;
}
/* Het cijfer staat op dezelfde linkerlijn als de weekdag en de tegels;
   alleen vandaag krijgt een rondje en staat het cijfer daarin gecentreerd. */
body.fi-panel-portal .vivi-pin-dag__nummer {
    display: inline-grid;
    place-items: center start;
    min-width: 2.25rem;
    height: 2.25rem;
    font-family: var(--vivi-type-display);
    font-size: var(--vivi-kop-s);
    font-weight: 400;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--vivi-tekst);
}
body.fi-panel-portal .vivi-pin-dag.is-voorbij .vivi-pin-dag__nummer {
    color: var(--vivi-tekst-2);
}
body.fi-panel-portal .vivi-pin-dag.is-vandaag .vivi-pin-dag__nummer {
    place-items: center;
    border-radius: var(--vivi-radius-rond);
    background: var(--vivi-vlak-donker);
    color: var(--vivi-tekst-op-donker);
}

/* Een Pin in de kalender: een knop die Bekijk opent. Een klein 2:3-beeld
   links met de tijd ernaast en de titel eronder; vanaf 1280 staat ook de
   titel naast het beeld. Zo blijft het vak laag en leest de maand als een
   wandkalender, niet als een raster van losse kaarten. */
body.fi-panel-portal .vivi-pin-tegel {
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr);
    grid-template-areas:
        "beeld tijd"
        "titel titel";
    align-items: center;
    gap: var(--vivi-ruimte-2xs) var(--vivi-ruimte-xs);
    width: 100%;
    min-height: var(--vivi-tik-min);
    margin: 0;
    padding: var(--vivi-ruimte-2xs) var(--vivi-ruimte-xs) var(--vivi-ruimte-2xs) var(--vivi-ruimte-2xs);
    border: 1px solid var(--vivi-lijn-fijn);
    border-radius: var(--vivi-radius-binnen);
    background: var(--vivi-vlak);
    color: var(--vivi-tekst);
    font: inherit;
    text-align: start;
    cursor: pointer;
}
body.fi-panel-portal .vivi-pin-tegel:hover {
    border-color: var(--vivi-line-strong);
}
body.fi-panel-portal .vivi-pin-tegel:focus-visible {
    outline: 2px solid var(--vivi-tekst);
    outline-offset: 2px;
}
body.fi-panel-portal .vivi-pin-tegel__beeld {
    grid-area: beeld;
    display: block;
    width: 100%;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    border-radius: var(--vivi-radius-binnen);
    background: var(--vivi-vlak-2);
}
body.fi-panel-portal .vivi-pin-tegel__beeld img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
body.fi-panel-portal .vivi-pin-tegel__tekst {
    display: contents;
}
body.fi-panel-portal .vivi-pin-tegel__tijd {
    grid-area: tijd;
    font-size: var(--vivi-tekst-xs);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--vivi-tekst-2);
}
body.fi-panel-portal .vivi-pin-tegel__titel {
    grid-area: titel;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    /* Twee regels, zoals een kalender een afspraak afkapt; de volle titel
       staat in Bekijk en in de hover. Drie regels gaf in een vak van 90 tot
       100px weer een los woord onderaan ("Wederopbouw"), gemeten 30-09. */
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    font-size: var(--vivi-tekst-s);
    line-height: 1.3;
    /* Afbreken op lettergrepen ("Architectuur-wandeling"), niet midden in
       een woord; break-word vangt alleen een woord zonder afbreekpunt. */
    hyphens: auto;
    overflow-wrap: break-word;
    /* Een korte titel in een smal vak: balance houdt "Kunst op de pont"
       als twee gelijke regels in plaats van "pont" alleen. */
    text-wrap: balance;
}
@media (min-width: 1280px) {
    body.fi-panel-portal .vivi-pin-tegel {
        grid-template-columns: 2.25rem minmax(0, 1fr);
        grid-template-areas:
            "beeld tijd"
            "beeld titel";
        grid-template-rows: auto 1fr;
        align-items: start;
    }
}

/* Het akkoordvenster: de Pin op volle grootte naast alle tekst die meegaat.
   Het beeld is nooit hoger dan het scherm toelaat, zodat de knop eronder
   zonder scrollen in beeld blijft op een laptop. */
body.fi-panel-portal .vivi-pin-groot {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--vivi-ruimte-m);
    align-items: start;
}
body.fi-panel-portal .vivi-pin-groot__beeld {
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: var(--vivi-radius-binnen);
    background: var(--vivi-vlak-2);
    text-align: center;
}
body.fi-panel-portal .vivi-pin-groot__beeld img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 60dvh;
    object-fit: contain;
}
body.fi-panel-portal .vivi-pin-groot__velden {
    display: grid;
    gap: var(--vivi-ruimte-s);
    margin: 0;
}
body.fi-panel-portal .vivi-pin-groot__velden dd {
    margin: 0;
    color: var(--vivi-tekst);
    overflow-wrap: anywhere;
    text-wrap: pretty;
}
body.fi-panel-portal .vivi-pin-groot__velden .vivi-kicker {
    color: var(--vivi-tekst-2);
}
body.fi-panel-portal .vivi-pin-groot__tekst {
    white-space: pre-line;
}
body.fi-panel-portal .vivi-pin-groot__link a {
    color: inherit;
    text-decoration: underline;
}
@media (min-width: 640px) {
    body.fi-panel-portal .vivi-pin-groot {
        grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    }
}

/* ==== Social: één pagina (07-10-2026) ====
   De ene Social-pagina: de gedeelde kop met tabbladen (x-vivi.social-kop),
   het tabblad Overzicht (pages/social.blade.php) en het tabblad Kanalen
   (pages/social-koppelingen.blade.php). De oudere namen in 06
   (vivi-social-balk, -kpis, -duo, -posts, -voet) blijven van de
   Contentkalender.

   Het Overzicht is op 22-10-2026 opnieuw opgezet (bundel Social): zijn
   raster, anker, strook en zijkolom staan in 20-portaal-social.css. Hier
   blijven de kop, de planregel, het zoekveld en Kanalen. */

body.fi-panel-portal .vivi-social {
    display: flex;
    flex-direction: column;
    gap: var(--vivi-ruimte-l);
    min-width: 0;
}
body.fi-panel-portal .vivi-social-kop {
    display: grid;
    gap: var(--vivi-ruimte-m);
    min-width: 0;
}
/* De kopzin liet op 320 "jou." alleen op de tweede regel staan (gemeten 07-10). */
body.fi-panel-portal .vivi-social-kop .vivi-page-sub {
    text-wrap: pretty;
}

/* Op een telefoon de kanaalknoppen en de tabbladen elk op een regel. Met wrap
   braken ze op 375 rafelig af (drie en een, gemeten 07-10). De knoppen delen
   de breedte: een kleine binnenmarge plus flex-grow geeft op 375 ruim 12px
   lucht per kant en past ook op 320. Vanaf 640 weer de gewone rij. */
@media (max-width: 639.98px) {
    body.fi-panel-portal .vivi-social-kop .vivi-page-header__acties {
        flex: 1 1 100%;
        min-width: 0;
    }
    body.fi-panel-portal .vivi-social-kop .vivi-segment {
        flex: 1 1 100%;
        flex-wrap: nowrap;
        min-width: 0;
    }
    body.fi-panel-portal .vivi-social-kop .vivi-segment__item {
        flex: 1 1 auto;
        justify-content: center;
        padding-inline: var(--vivi-ruimte-2xs);
        text-align: center;
    }
}

/* De regel onder de kop van het tabblad Planning: maand links, "Nieuwe post"
   rechts. Op een telefoon pakt de maandnavigatie de hele breedte (06) en
   schuift de knop eronder. */
body.fi-panel-portal .vivi-social-plan {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--vivi-ruimte-s) var(--vivi-ruimte-m);
    min-width: 0;
}
body.fi-panel-portal .vivi-social-plan__nieuw {
    flex: none;
}

/* -- Zoeken in de lijst ------------------------------------------------------
   Dezelfde pil als de zoekbalk op het dashboard, omgekeerd van vlak omdat hij
   op de lijstkaart staat. Het veld is 1rem: kleiner en iOS zoomt in bij focus. */
body.fi-panel-portal .vivi-social-zoek {
    display: flex;
    align-items: center;
    gap: var(--vivi-ruimte-2xs);
    min-width: 0;
    min-height: calc(var(--vivi-tik-min) + 2 * var(--vivi-ruimte-2xs));
    padding: 0 var(--vivi-ruimte-2xs);
    border-radius: var(--vivi-radius-pil);
    background: var(--vivi-vlak);
    color: var(--vivi-tekst-2);
}
body.fi-panel-portal .vivi-social-zoek:focus-within {
    box-shadow: var(--vivi-focusring);
}
body.fi-panel-portal :is(.vivi-social-zoek__icoon, .vivi-social-zoek__stuur) {
    display: grid;
    place-items: center;
    flex: none;
    width: var(--vivi-tik-min);
    height: var(--vivi-tik-min);
    padding: 0;
    border: 0;
    border-radius: var(--vivi-radius-rond);
}
body.fi-panel-portal :is(.vivi-social-zoek__icoon, .vivi-social-zoek__stuur) svg {
    width: 1.15rem;
    height: 1.15rem;
}
body.fi-panel-portal .vivi-social-zoek__stuur {
    background: var(--vivi-vlak-donker);
    color: var(--vivi-tekst-op-donker);
    cursor: pointer;
}
body.fi-panel-portal .vivi-social-zoek__stuur:focus-visible {
    outline: none;
    box-shadow: var(--vivi-focusring);
}
body.fi-panel-portal .vivi-social-zoek__veld {
    flex: 1;
    min-width: 0;
    height: var(--vivi-tik-min);
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font: inherit;
    font-size: var(--vivi-tekst-l);
    color: var(--vivi-tekst);
    -webkit-appearance: none;
    appearance: none;
}
body.fi-panel-portal .vivi-social-zoek__veld::placeholder {
    color: var(--vivi-tekst-2);
    opacity: 1;
}
body.fi-panel-portal .vivi-social-zoek__veld::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}
body.fi-panel-portal .vivi-social-zoek__uitslag {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0 var(--vivi-ruimte-m);
    margin: 0;
    min-width: 0;
    font-size: var(--vivi-tekst-m);
    color: var(--vivi-tekst-2);
    overflow-wrap: anywhere;
}

/* -- Kanalen --------------------------------------------------------------- */
body.fi-panel-portal .vivi-social-kanalen .vivi-meta {
    text-wrap: pretty;
}
body.fi-panel-portal .vivi-social-kanalen__borden {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: var(--vivi-ruimte-xs);
    margin: 0;
    padding: 0;
    list-style: none;
}
body.fi-panel-portal .vivi-social-kanalen__bord {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid var(--vivi-lijn-fijn);
    border-radius: var(--vivi-radius-kaart);
    overflow-wrap: anywhere;
}
body.fi-panel-portal .vivi-social-kanalen__link {
    display: inline-flex;
    align-items: center;
    min-height: var(--vivi-tik-min);
    color: var(--vivi-tekst);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* === Pinterest-cijfers begin === */
/* Het Pinterest-blok op het tabblad Cijfers (partials/pinterest-cijfers).
   Bovenaan de netto volgersgroei, groot; dan vier tegels op een licht vlak,
   twee naast elkaar op de telefoon en vier vanaf 1024; dan de vijf beste Pins
   als rijen met een staand beeld (2:3, de maat van een Pin), vanaf 1280 als
   vijf staande kaarten naast elkaar. Geen donker vlak: dat heeft het bord
   erboven al. Alleen tokens; de trend houdt de kleur van x-vivi.stat, want
   groen op wit haalt geen 4,5 en het teken zegt de richting al. */
body.fi-panel-portal .vivi-pin-cijfers__ico {
    flex: none;
    width: 1.1em;
    height: 1.1em;
}
body.fi-panel-portal .vivi-pin-cijfers__link {
    display: inline-flex;
    align-items: center;
    min-height: var(--vivi-tik-min);
    color: var(--vivi-tekst);
    text-underline-offset: 3px;
}
body.fi-panel-portal .vivi-pin-cijfers__volgers {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--vivi-ruimte-2xs) var(--vivi-ruimte-m);
}
body.fi-panel-portal .vivi-pin-cijfers__tegels {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--vivi-ruimte-s);
}
body.fi-panel-portal .vivi-pin-cijfers__tegel {
    min-width: 0;
    padding: var(--vivi-ruimte-m);
    border-radius: var(--vivi-radius-kaart);
    background: var(--vivi-vlak-2);
}
body.fi-panel-portal .vivi-pin-cijfers__tegel .vivi-stat__value {
    font-size: var(--vivi-cijfer-l);
}
body.fi-panel-portal .vivi-pin-cijfers__tegel .vivi-stat__label {
    overflow-wrap: anywhere;
    text-wrap: balance;
}
body.fi-panel-portal .vivi-pin-cijfers__top {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--vivi-ruimte-s) var(--vivi-ruimte-m);
    margin: 0;
    padding: 0;
    list-style: none;
}
body.fi-panel-portal .vivi-pin-cijfers__pin {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr);
    align-items: start;
    gap: var(--vivi-ruimte-s);
    min-width: 0;
}
body.fi-panel-portal .vivi-pin-cijfers__beeld {
    aspect-ratio: 2 / 3;
    overflow: hidden;
    border-radius: var(--vivi-radius-kaart);
    background: var(--vivi-vlak-2);
}
body.fi-panel-portal .vivi-pin-cijfers__beeld img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
body.fi-panel-portal .vivi-pin-cijfers__leeg {
    display: grid;
    place-items: center;
    height: 100%;
    padding: var(--vivi-ruimte-2xs);
    font-size: var(--vivi-tekst-xs);
    color: var(--vivi-tekst-2);
    text-align: center;
}
body.fi-panel-portal .vivi-pin-cijfers__tekst {
    display: flex;
    flex-direction: column;
    gap: var(--vivi-ruimte-2xs);
    min-width: 0;
}
/* Balance in plaats van pretty: pretty liet op 375 bij drie van de vijf
   titels en bij de uitleg nog een los laatste woord staan (gemeten 13-10). */
body.fi-panel-portal .vivi-pin-cijfers__titel,
body.fi-panel-portal .vivi-pin-cijfers .vivi-section__uitleg {
    overflow-wrap: anywhere;
    text-wrap: balance;
}
body.fi-panel-portal .vivi-pin-cijfers__klikken {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--vivi-tekst);
}
body.fi-panel-portal .vivi-pin-cijfers__tekst .vivi-meta {
    font-variant-numeric: tabular-nums;
}
@media (min-width: 640px) {
    body.fi-panel-portal .vivi-pin-cijfers__top {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (min-width: 1024px) {
    body.fi-panel-portal .vivi-pin-cijfers__tegels {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
@media (min-width: 1280px) {
    body.fi-panel-portal .vivi-pin-cijfers__top {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
    body.fi-panel-portal .vivi-pin-cijfers__pin {
        grid-template-columns: minmax(0, 1fr);
    }
}
@media (max-width: 479.98px) {
    body.fi-panel-portal .vivi-pin-cijfers__tegel {
        padding: var(--vivi-ruimte-s);
    }
    body.fi-panel-portal .vivi-pin-cijfers__tegel .vivi-stat__value {
        font-size: var(--vivi-kop-m);
    }
}
/* === Pinterest-cijfers eind === */

/* === Recapeditor (social/recap/{post}) ===
   Links het voorbeeld (het sjabloon zelf in een iframe van 1080 bij 1350,
   geschaald naar de kolom), rechts de velden van de gekozen dia. Op een
   telefoon staan ze onder elkaar en blijft het voorbeeld bovenaan. */
body.fi-panel-portal .vivi-recap {
    display: grid; gap: var(--vivi-ruimte-l);
    grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1024px) {
    body.fi-panel-portal .vivi-recap { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; }
    body.fi-panel-portal .vivi-recap__links { position: sticky; top: var(--vivi-ruimte-l); }
}
/* Telefoon en tablet: alleen tekst en akkoord (opzet A, Dauji 19-10). */
@media (max-width: 1023.98px) {
    body.fi-panel-portal .vivi-recap__groot { display: none !important; }
}
@media (min-width: 1024px) {
    body.fi-panel-portal .vivi-recap__klein { display: none; }
}
body.fi-panel-portal .vivi-recap__links,
body.fi-panel-portal .vivi-recap__rechts { display: grid; gap: var(--vivi-ruimte-m); min-width: 0; }
body.fi-panel-portal .vivi-recap__voorbeeld {
    position: relative; width: 100%; aspect-ratio: 4 / 5; overflow: hidden;
    border-radius: var(--vivi-radius-m); background: var(--vivi-cream-2);
    box-shadow: var(--vivi-schaduw-rust);
}
body.fi-panel-portal .vivi-recap__voorbeeld iframe {
    position: absolute; top: 0; left: 0; width: 1080px; height: 1350px; border: 0;
    transform-origin: 0 0;
}
body.fi-panel-portal .vivi-recap__strook { display: flex; gap: var(--vivi-ruimte-xs); overflow-x: auto; padding-bottom: var(--vivi-ruimte-2xs); }
body.fi-panel-portal .vivi-recap__dia {
    flex: 0 0 auto; display: grid; gap: var(--vivi-ruimte-2xs); width: 7.5rem; min-height: var(--vivi-tik-min);
    text-align: left; padding: var(--vivi-ruimte-xs) var(--vivi-ruimte-s); cursor: pointer;
    border: 1px solid var(--vivi-line-strong); border-radius: var(--vivi-radius-s);
    background: var(--vivi-vlak); color: var(--vivi-ink); font-size: var(--vivi-tekst-xs);
}
body.fi-panel-portal .vivi-recap__dia.is-actief { border-color: var(--vivi-gold); box-shadow: var(--vivi-ring-focus); }
body.fi-panel-portal .vivi-recap__dia-kop { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--vivi-muted); }
body.fi-panel-portal .vivi-recap__dia-nr { font-weight: 700; }
/* Filmstrook op een computer: het sjabloon tekent alle dia's naast elkaar in een
   iframe (zonder ruimte ertussen), de dia-knoppen liggen er als gelijke vakken op.
   Minstens 4,5rem per dia; bij veel dia's schuift de strook. */
/* Aantal dia's als data-n (1 tot RecapOntwerp::MAX_DIAS = 15), geen inline stijl. */
body.fi-panel-portal .vivi-recap__film { --n: 1; min-width: 0; max-width: 100%; }
body.fi-panel-portal .vivi-recap__film[data-n="1"] { --n: 1; }
body.fi-panel-portal .vivi-recap__film[data-n="2"] { --n: 2; }
body.fi-panel-portal .vivi-recap__film[data-n="3"] { --n: 3; }
body.fi-panel-portal .vivi-recap__film[data-n="4"] { --n: 4; }
body.fi-panel-portal .vivi-recap__film[data-n="5"] { --n: 5; }
body.fi-panel-portal .vivi-recap__film[data-n="6"] { --n: 6; }
body.fi-panel-portal .vivi-recap__film[data-n="7"] { --n: 7; }
body.fi-panel-portal .vivi-recap__film[data-n="8"] { --n: 8; }
body.fi-panel-portal .vivi-recap__film[data-n="9"] { --n: 9; }
body.fi-panel-portal .vivi-recap__film[data-n="10"] { --n: 10; }
body.fi-panel-portal .vivi-recap__film[data-n="11"] { --n: 11; }
body.fi-panel-portal .vivi-recap__film[data-n="12"] { --n: 12; }
body.fi-panel-portal .vivi-recap__film[data-n="13"] { --n: 13; }
body.fi-panel-portal .vivi-recap__film[data-n="14"] { --n: 14; }
body.fi-panel-portal .vivi-recap__film[data-n="15"] { --n: 15; }
body.fi-panel-portal .vivi-recap__film-beeld { display: none; }
@media (min-width: 1024px) {
    body.fi-panel-portal .vivi-recap__film { overflow-x: auto; padding: 3px 3px var(--vivi-ruimte-2xs); }
    body.fi-panel-portal .vivi-recap__film-binnen {
        position: relative; width: max(100%, calc(var(--n) * 4.5rem));
        aspect-ratio: calc(var(--n) * 1080) / 1350;
    }
    body.fi-panel-portal .vivi-recap__film-beeld {
        display: block; position: absolute; inset: 0; overflow: hidden;
        border-radius: var(--vivi-radius-s); background: var(--vivi-cream-2); pointer-events: none;
    }
    body.fi-panel-portal .vivi-recap__film-beeld iframe {
        position: absolute; top: 0; left: 0; width: 1080px; height: 1350px; border: 0; transform-origin: 0 0;
    }
    body.fi-panel-portal .vivi-recap__film .vivi-recap__strook {
        position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr));
        gap: 0; overflow: visible; padding: 0;
    }
    body.fi-panel-portal .vivi-recap__film .vivi-recap__dia {
        width: auto; min-height: 0; padding: var(--vivi-ruimte-2xs); align-content: end;
        background: transparent; border: 0; border-radius: 0;
        box-shadow: inset 0 0 0 1px rgb(255 255 255 / .55);
    }
    body.fi-panel-portal .vivi-recap__film .vivi-recap__dia:hover { box-shadow: inset 0 0 0 2px var(--vivi-gold); }
    body.fi-panel-portal .vivi-recap__film .vivi-recap__dia:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--vivi-ink); }
    body.fi-panel-portal .vivi-recap__film .vivi-recap__dia.is-actief { box-shadow: inset 0 0 0 3px var(--vivi-gold); }
    body.fi-panel-portal .vivi-recap__film .vivi-recap__dia-kop { display: none; }
    body.fi-panel-portal .vivi-recap__film .vivi-recap__dia-nr {
        justify-self: start; padding: 0 .4em; border-radius: var(--vivi-radius-s);
        background: rgb(255 255 255 / .85); color: var(--vivi-ink); font-size: var(--vivi-tekst-xs); line-height: 1.5;
    }
}
body.fi-panel-portal .vivi-recap__veld { display: grid; gap: var(--vivi-ruimte-2xs); }
body.fi-panel-portal .vivi-recap__veld label { font-size: var(--vivi-tekst-s); font-weight: 600; color: var(--vivi-ink); }
body.fi-panel-portal .vivi-recap__veld textarea {
    width: 100%; font: inherit; font-size: var(--vivi-tekst-m); padding: .6rem .75rem; resize: vertical;
    border-radius: var(--vivi-radius-m); border: 1px solid var(--vivi-line-strong);
    background: var(--vivi-vlak); color: var(--vivi-ink);
}
body.fi-panel-portal .vivi-recap__veld textarea:focus { outline: none; border-color: var(--vivi-gold); box-shadow: var(--vivi-ring-focus); }
body.fi-panel-portal .vivi-recap__hulp { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vivi-ruimte-xs); }
body.fi-panel-portal .vivi-recap__teller { margin-left: auto; font-size: var(--vivi-tekst-xs); color: var(--vivi-muted); font-variant-numeric: tabular-nums; }
body.fi-panel-portal .vivi-recap__fotos { display: grid; gap: var(--vivi-ruimte-xs); grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr)); }
body.fi-panel-portal .vivi-recap__foto {
    position: relative; aspect-ratio: 1; padding: 0; overflow: hidden; cursor: pointer;
    border: 2px solid transparent; border-radius: var(--vivi-radius-s); background: var(--vivi-cream-2);
}
body.fi-panel-portal .vivi-recap__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.fi-panel-portal .vivi-recap__foto.is-actief { border-color: var(--vivi-gold); }
body.fi-panel-portal .vivi-recap__schuif { display: grid; grid-template-columns: 6rem minmax(0, 1fr) 3rem; align-items: center; gap: var(--vivi-ruimte-s); font-size: var(--vivi-tekst-s); }
body.fi-panel-portal .vivi-recap__schuif input { width: 100%; accent-color: var(--vivi-gold); }
body.fi-panel-portal .vivi-recap__meldingen { display: grid; gap: var(--vivi-ruimte-xs); margin: 0; padding: 0; list-style: none; }
body.fi-panel-portal .vivi-recap__melding {
    padding: var(--vivi-ruimte-xs) var(--vivi-ruimte-s); border-radius: var(--vivi-radius-s);
    font-size: var(--vivi-tekst-s); background: var(--vivi-cream-2); color: var(--vivi-ink);
    border-left: 3px solid var(--vivi-warn);
}
body.fi-panel-portal .vivi-recap__melding.is-rood { border-left-color: var(--vivi-fout); background: var(--vivi-fout-vlak); }
body.fi-panel-portal .vivi-recap__melding.is-ok { border-left-color: var(--vivi-ok); }
body.fi-panel-portal .vivi-recap__balk {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--vivi-ruimte-s);
    padding-top: var(--vivi-ruimte-s); border-top: 1px solid var(--vivi-line);
}
/* Alles wat de klant aantikt haalt de tikmaat, ook de kleine knoppen en de schuifjes. */
body.fi-panel-portal .vivi-recap :is(.vivi-btn, .vivi-select, .vivi-recap__dia) { min-height: var(--vivi-tik-min, 44px); }
body.fi-panel-portal .vivi-recap__schuif input { min-height: var(--vivi-tik-min, 44px); }
/* Het bestandsveld zelf is onzichtbaar; het label is de knop en houdt de focusring. */
body.fi-panel-portal .vivi-recap__upload { position: relative; justify-self: start; cursor: pointer; }
body.fi-panel-portal .vivi-recap__upload input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
body.fi-panel-portal .vivi-recap__upload:focus-within { box-shadow: var(--vivi-ring-focus); }
/* Inline bewerken: de tekst staat in de dia zelf, de opmaakknoppen eronder.
   De velden en de vorm zitten ingeklapt, zodat het scherm op een telefoon kort blijft. */
body.fi-panel-portal .vivi-recap__opmaak { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vivi-ruimte-xs); margin-top: var(--vivi-ruimte-xs); }
body.fi-panel-portal .vivi-recap__opmaak > .vivi-meta { flex: 1 1 100%; }
body.fi-panel-portal .vivi-recap__deel > summary {
    display: flex; align-items: center; justify-content: space-between; min-height: var(--vivi-tik-min);
    cursor: pointer; list-style: none; font-size: var(--vivi-tekst-l);
}
body.fi-panel-portal .vivi-recap__deel > summary::-webkit-details-marker { display: none; }
body.fi-panel-portal .vivi-recap__deel > summary::after {
    content: ""; width: .5rem; height: .5rem; margin: -.25rem var(--vivi-ruimte-2xs) 0 var(--vivi-ruimte-s);
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg);
}
body.fi-panel-portal .vivi-recap__deel[open] > summary::after { margin-top: .25rem; transform: rotate(-135deg); }
body.fi-panel-portal .vivi-recap__deel[open] > summary { margin-bottom: var(--vivi-ruimte-s); }
/* === Recapeditor eind === */

/* === Domeinen ===
   v4, 22-10-2026. Domeinen is een vervolgpagina onder Website. Twee blokken met
   elk één vraag: is alles in orde en wanneer gebeurt er iets (stand plus
   tijdlijn), en welk domein vraagt aandacht (de lijst). Details per domein
   staan op DomeinDetail.
   Uit pin 12 overgenomen: contrast volgt prioriteit (het donkerste vlak hoort
   bij de enige actie), een vaste rondingstrap per niveau (kaart 20, rij 12,
   tegel 8, stip rond) en rijen met haarlijnen in plaats van een kaart per rij.
   Kleur staat alleen voor een toestand: in orde is neutraal (vlak-2 met inkt),
   let op is amber (--vivi-warn), actie nodig is rood gevuld (--vivi-fout).
   --tijd-n en --tijd-vanaf zijn lokale hulpvariabelen, geen --vivi-tokens. */

/* ---- Het teken van een toestand: dezelfde vorm voor de stip op de as en de tegel in de rij. ---- */
body.fi-panel-portal .vivi-domeinteken--ok { background: var(--vivi-vlak-2); color: var(--vivi-tekst-2); box-shadow: inset 0 0 0 1px var(--vivi-lijn-fijn); }
body.fi-panel-portal .vivi-domeinteken--let-op { background: color-mix(in srgb, var(--vivi-warn) 14%, var(--vivi-vlak)); color: var(--vivi-tekst); box-shadow: inset 0 0 0 2px var(--vivi-warn); }
body.fi-panel-portal .vivi-domeinteken--fout { background: var(--vivi-fout); color: var(--vivi-vlak); box-shadow: none; }

/* ---- 1. Stand en tijdlijn in één kaart. Neutraal bij in orde, getint bij let op of actie. ---- */
body.fi-panel-portal .vivi-domeinstand {
    display: flex; flex-direction: column; gap: var(--vivi-ruimte-l);
    padding: var(--vivi-ruimte-xl); border-radius: var(--vivi-radius-xl);
}
body.fi-panel-portal .vivi-domeinstand--let-op { background: color-mix(in srgb, var(--vivi-warn) 7%, var(--vivi-vlak)); border-color: color-mix(in srgb, var(--vivi-warn) 40%, transparent); }
body.fi-panel-portal .vivi-domeinstand--fout { background: color-mix(in srgb, var(--vivi-fout-vlak) 55%, var(--vivi-vlak)); border-color: color-mix(in srgb, var(--vivi-fout) 40%, transparent); }
body.fi-panel-portal .vivi-domeinstand__kopregel { display: flex; align-items: center; gap: var(--vivi-ruimte-m); }
body.fi-panel-portal .vivi-domeinstand__icirkel {
    flex: none; display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: var(--vivi-radius-rond);
    background: var(--vivi-vlak-2); color: var(--vivi-tekst);
}
body.fi-panel-portal .vivi-domeinstand--let-op .vivi-domeinstand__icirkel { background: var(--vivi-warn); color: var(--vivi-vlak); }
body.fi-panel-portal .vivi-domeinstand--fout .vivi-domeinstand__icirkel { background: var(--vivi-fout); color: var(--vivi-vlak); }
body.fi-panel-portal .vivi-domeinstand__icoon { width: 1.5rem; height: 1.5rem; }
body.fi-panel-portal .vivi-domeinstand__tekst { display: flex; flex-direction: column; gap: var(--vivi-ruimte-2xs); min-width: 0; }
body.fi-panel-portal .vivi-domeinstand__kop {
    margin: 0; font-family: var(--vivi-type-display); font-size: var(--vivi-kop-m); font-weight: 400;
    letter-spacing: var(--vivi-type-display-spatie); line-height: 1.15; text-wrap: balance;
}
body.fi-panel-portal .vivi-domeinstand__sub { margin: 0; color: var(--vivi-tekst-2); text-wrap: pretty; }

/* De as: één kolom per maand vanaf nu, elke stip een verloopdatum met het nummer uit de lijst.
   De gearceerde strook is het venster van 30 dagen waarin iets actie vraagt. */
body.fi-panel-portal .vivi-tijdlijn__as {
    --tijd-n: 12; --tijd-vanaf: 0;
    position: relative; display: grid; grid-template-columns: repeat(var(--tijd-n), minmax(0, 1fr));
    grid-auto-flow: row dense; row-gap: 0; padding-top: 1.9rem;
    background: linear-gradient(to right,
        transparent calc(var(--tijd-vanaf) * 100% / var(--tijd-n)),
        color-mix(in srgb, var(--vivi-warn) 10%, transparent) 0,
        color-mix(in srgb, var(--vivi-warn) 10%, transparent) calc((var(--tijd-vanaf) + 1) * 100% / var(--tijd-n)),
        transparent 0);
    border-radius: var(--vivi-radius-s);
}
body.fi-panel-portal .vivi-tijdlijn__venster {
    position: absolute; top: var(--vivi-ruimte-2xs); left: calc(var(--tijd-vanaf) * 100% / var(--tijd-n));
    padding-left: var(--vivi-ruimte-xs); border-left: 2px solid var(--vivi-warn);
    font-size: var(--vivi-tekst-s); color: var(--vivi-tekst-2); white-space: nowrap;
}
body.fi-panel-portal .vivi-tijdlijn__stip {
    justify-self: center; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; margin-bottom: var(--vivi-ruimte-xs);
    border-radius: var(--vivi-radius-rond); font-size: var(--vivi-tekst-s); font-weight: 600; line-height: 1;
}
body.fi-panel-portal .vivi-tijdlijn__maand {
    grid-row: 40; padding-top: var(--vivi-ruimte-xs); border-top: 1px solid var(--vivi-line-strong);
    font-size: var(--vivi-tekst-s); color: var(--vivi-tekst-2); text-align: center; white-space: nowrap; overflow: hidden;
}
body.fi-panel-portal .vivi-tijdlijn__maand--jaar { color: var(--vivi-tekst); font-weight: 600; }
body.fi-panel-portal .vivi-tijdlijn__as--n12 { --tijd-n: 12; }
body.fi-panel-portal .vivi-tijdlijn__as--n13 { --tijd-n: 13; }
body.fi-panel-portal .vivi-tijdlijn__as--n14 { --tijd-n: 14; }
body.fi-panel-portal .vivi-tijdlijn__as--n15 { --tijd-n: 15; }
body.fi-panel-portal .vivi-tijdlijn__as--n16 { --tijd-n: 16; }
body.fi-panel-portal .vivi-tijdlijn__as--n17 { --tijd-n: 17; }
body.fi-panel-portal .vivi-tijdlijn__as--n18 { --tijd-n: 18; }
body.fi-panel-portal .vivi-tijdlijn__as--n19 { --tijd-n: 19; }
body.fi-panel-portal .vivi-tijdlijn__as--n20 { --tijd-n: 20; }
body.fi-panel-portal .vivi-tijdlijn__as--n21 { --tijd-n: 21; }
body.fi-panel-portal .vivi-tijdlijn__as--n22 { --tijd-n: 22; }
body.fi-panel-portal .vivi-tijdlijn__as--n23 { --tijd-n: 23; }
body.fi-panel-portal .vivi-tijdlijn__as--n24 { --tijd-n: 24; }
body.fi-panel-portal .vivi-tijdlijn__stip--k1 { grid-column: 1; }
body.fi-panel-portal .vivi-tijdlijn__stip--k2 { grid-column: 2; }
body.fi-panel-portal .vivi-tijdlijn__stip--k3 { grid-column: 3; }
body.fi-panel-portal .vivi-tijdlijn__stip--k4 { grid-column: 4; }
body.fi-panel-portal .vivi-tijdlijn__stip--k5 { grid-column: 5; }
body.fi-panel-portal .vivi-tijdlijn__stip--k6 { grid-column: 6; }
body.fi-panel-portal .vivi-tijdlijn__stip--k7 { grid-column: 7; }
body.fi-panel-portal .vivi-tijdlijn__stip--k8 { grid-column: 8; }
body.fi-panel-portal .vivi-tijdlijn__stip--k9 { grid-column: 9; }
body.fi-panel-portal .vivi-tijdlijn__stip--k10 { grid-column: 10; }
body.fi-panel-portal .vivi-tijdlijn__stip--k11 { grid-column: 11; }
body.fi-panel-portal .vivi-tijdlijn__stip--k12 { grid-column: 12; }
body.fi-panel-portal .vivi-tijdlijn__stip--k13 { grid-column: 13; }
body.fi-panel-portal .vivi-tijdlijn__stip--k14 { grid-column: 14; }
body.fi-panel-portal .vivi-tijdlijn__stip--k15 { grid-column: 15; }
body.fi-panel-portal .vivi-tijdlijn__stip--k16 { grid-column: 16; }
body.fi-panel-portal .vivi-tijdlijn__stip--k17 { grid-column: 17; }
body.fi-panel-portal .vivi-tijdlijn__stip--k18 { grid-column: 18; }
body.fi-panel-portal .vivi-tijdlijn__stip--k19 { grid-column: 19; }
body.fi-panel-portal .vivi-tijdlijn__stip--k20 { grid-column: 20; }
body.fi-panel-portal .vivi-tijdlijn__stip--k21 { grid-column: 21; }
body.fi-panel-portal .vivi-tijdlijn__stip--k22 { grid-column: 22; }
body.fi-panel-portal .vivi-tijdlijn__stip--k23 { grid-column: 23; }
body.fi-panel-portal .vivi-tijdlijn__stip--k24 { grid-column: 24; }
body.fi-panel-portal .vivi-tijdlijn__as--v0 { --tijd-vanaf: 0; }
body.fi-panel-portal .vivi-tijdlijn__as--v1 { --tijd-vanaf: 0.1; }
body.fi-panel-portal .vivi-tijdlijn__as--v2 { --tijd-vanaf: 0.2; }
body.fi-panel-portal .vivi-tijdlijn__as--v3 { --tijd-vanaf: 0.3; }
body.fi-panel-portal .vivi-tijdlijn__as--v4 { --tijd-vanaf: 0.4; }
body.fi-panel-portal .vivi-tijdlijn__as--v5 { --tijd-vanaf: 0.5; }
body.fi-panel-portal .vivi-tijdlijn__as--v6 { --tijd-vanaf: 0.6; }
body.fi-panel-portal .vivi-tijdlijn__as--v7 { --tijd-vanaf: 0.7; }
body.fi-panel-portal .vivi-tijdlijn__as--v8 { --tijd-vanaf: 0.8; }
body.fi-panel-portal .vivi-tijdlijn__as--v9 { --tijd-vanaf: 0.9; }

/* ---- 2. De lijst: één kaart, een rij per domein met haarlijnen. Elke rij is een link naar het domein. ---- */
body.fi-panel-portal .vivi-domeinlijst { display: flex; flex-direction: column; padding: var(--vivi-ruimte-l); border-radius: var(--vivi-radius-xl); }
body.fi-panel-portal .vivi-domeinlijst__kop { margin: 0 0 var(--vivi-ruimte-s); font-size: var(--vivi-tekst-l); font-weight: 600; }
body.fi-panel-portal .vivi-domeinlijst__kolommen,
body.fi-panel-portal .vivi-domeinrij {
    display: grid; grid-template-columns: 2.5rem minmax(0, 1.1fr) minmax(0, 1.6fr) 9.5rem 1.25rem;
    align-items: center; gap: var(--vivi-ruimte-m);
}
body.fi-panel-portal .vivi-domeinlijst__kolommen {
    padding: 0 var(--vivi-ruimte-s) var(--vivi-ruimte-xs);
    font-size: var(--vivi-tekst-s); color: var(--vivi-tekst-2); text-transform: uppercase; letter-spacing: .06em;
}
body.fi-panel-portal .vivi-domeinlijst__rijen { margin: 0; padding: 0; list-style: none; }
body.fi-panel-portal .vivi-domeinlijst__rijen > li { border-top: 1px solid var(--vivi-lijn-fijn); }
body.fi-panel-portal .vivi-domeinrij {
    min-height: var(--vivi-tik-min); padding: var(--vivi-ruimte-s); margin: var(--vivi-ruimte-2xs) 0;
    border-radius: var(--vivi-radius-m); color: inherit; text-decoration: none;
    transition: background-color .15s ease;
}
body.fi-panel-portal .vivi-domeinrij:hover { background: var(--vivi-vlak-2); }
body.fi-panel-portal .vivi-domeinrij:focus-visible { outline: 2px solid var(--vivi-tekst); outline-offset: 2px; }
body.fi-panel-portal .vivi-domeinrij__teken {
    display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--vivi-radius-s);
    font-weight: 600; font-variant-numeric: tabular-nums;
}
body.fi-panel-portal .vivi-domeinrij__globe { width: 1.25rem; height: 1.25rem; }
body.fi-panel-portal .vivi-domeinrij__naam { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
body.fi-panel-portal .vivi-domeinrij__naam strong { overflow-wrap: anywhere; }
body.fi-panel-portal .vivi-domeinrij__aandacht { display: flex; flex-wrap: wrap; gap: var(--vivi-ruimte-2xs) var(--vivi-ruimte-m); min-width: 0; }
body.fi-panel-portal .vivi-domeinrij__punt { display: inline-flex; align-items: baseline; gap: var(--vivi-ruimte-xs); color: var(--vivi-tekst); text-wrap: pretty; }
body.fi-panel-portal .vivi-domeinrij__punt::before {
    content: ""; flex: none; width: .625rem; height: .625rem; border-radius: var(--vivi-radius-rond);
    background: var(--vivi-warn); transform: translateY(-.05em);
}
body.fi-panel-portal .vivi-domeinrij__punt--fout { color: var(--vivi-fout); font-weight: 600; }
body.fi-panel-portal .vivi-domeinrij__punt--fout::before { background: var(--vivi-fout); }
body.fi-panel-portal .vivi-domeinrij__rust { color: var(--vivi-tekst-2); }
body.fi-panel-portal .vivi-domeinrij__datum { display: flex; flex-direction: column; gap: 2px; font-variant-numeric: tabular-nums; }
body.fi-panel-portal .vivi-domeinrij__pijl { width: 1.25rem; height: 1.25rem; color: var(--vivi-tekst-2); transition: transform .15s ease; }
body.fi-panel-portal .vivi-domeinrij:hover .vivi-domeinrij__pijl { transform: translateX(3px); color: var(--vivi-tekst); }

/* ---- Detailpagina: wat aandacht vraagt, de drie feiten, de techniek. ---- */
body.fi-panel-portal .vivi-domeinaandacht { display: flex; flex-direction: column; gap: var(--vivi-ruimte-s); border-radius: var(--vivi-radius-xl); }
body.fi-panel-portal .vivi-domeinaandacht--let-op { box-shadow: inset 4px 0 0 var(--vivi-warn), var(--vivi-schaduw-rust); }
body.fi-panel-portal .vivi-domeinaandacht--fout { box-shadow: inset 4px 0 0 var(--vivi-fout), var(--vivi-schaduw-rust); }
body.fi-panel-portal .vivi-domeinaandacht__kop { margin: 0; font-size: var(--vivi-tekst-l); font-weight: 600; }
body.fi-panel-portal .vivi-domeinaandacht__punten { display: flex; flex-direction: column; gap: var(--vivi-ruimte-xs); margin: 0; padding: 0; list-style: none; }
body.fi-panel-portal .vivi-domein__mini { flex: none; width: 1rem; height: 1rem; margin-top: .15em; }
body.fi-panel-portal .vivi-domein__feiten { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--vivi-ruimte-m); margin: 0; }
body.fi-panel-portal .vivi-domein__feit { display: flex; flex-direction: column; gap: var(--vivi-ruimte-2xs); min-width: 0; }
body.fi-panel-portal .vivi-domein__feit dt { font-size: var(--vivi-tekst-s); color: var(--vivi-tekst-2); text-transform: uppercase; letter-spacing: .06em; }
body.fi-panel-portal .vivi-domein__feit dd { display: flex; flex-direction: column; gap: var(--vivi-ruimte-2xs); margin: 0; text-wrap: pretty; }
body.fi-panel-portal .vivi-domein__met-icoon { display: inline-flex; align-items: flex-start; gap: var(--vivi-ruimte-xs); }
body.fi-panel-portal .vivi-domein__diensten { display: flex; flex-wrap: wrap; gap: var(--vivi-ruimte-2xs) var(--vivi-ruimte-m); margin: 0; padding: 0; list-style: none; }
body.fi-panel-portal .vivi-domein__dienst { display: inline-flex; align-items: flex-start; gap: var(--vivi-ruimte-xs); font-weight: 600; }
body.fi-panel-portal .vivi-domein__dienst .vivi-domein__mini { color: var(--vivi-tekst-2); }
body.fi-panel-portal .vivi-domein__dienst--mist { color: var(--vivi-tekst-2); font-weight: 400; }
body.fi-panel-portal .vivi-domein__dienst--mist .vivi-domein__mini { color: var(--vivi-warn); }
body.fi-panel-portal .vivi-domein__dns { display: flex; flex-direction: column; gap: var(--vivi-ruimte-s); border-radius: var(--vivi-radius-xl); }
body.fi-panel-portal .vivi-domein__dns .vivi-meta { margin: 0; }
/* Lange waarden (DKIM, verificatie) breken af in plaats van de tabel op te rekken. */
body.fi-panel-portal .vivi-domein__waarde { white-space: normal; overflow-wrap: anywhere; min-width: 12rem; max-width: 24rem; }

/* ---- Beweging alleen waar het iets zegt: de kaarten en stippen komen op, alleen actie nodig pulseert. ---- */
@keyframes vivi-domein-op { from { opacity: 0; transform: translateY(10px); } }
@keyframes vivi-domein-stip { from { opacity: 0; transform: scale(.4); } }
@keyframes vivi-domein-puls { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--vivi-fout) 30%, transparent); } }
body.fi-panel-portal :is(.vivi-domeinstand, .vivi-domeinlijst, .vivi-domeinaandacht) { animation: vivi-domein-op .5s cubic-bezier(.2, .7, .2, 1) both; }
body.fi-panel-portal .vivi-domeinlijst { animation-delay: .08s; }
body.fi-panel-portal .vivi-tijdlijn__stip { animation: vivi-domein-stip .45s cubic-bezier(.2, .7, .2, 1) .35s both; }
body.fi-panel-portal .vivi-tijdlijn__stip.vivi-domeinteken--fout { animation: vivi-domein-stip .45s cubic-bezier(.2, .7, .2, 1) .35s both, vivi-domein-puls 2.4s ease-in-out .8s infinite; }
@media (prefers-reduced-motion: reduce) {
    body.fi-panel-portal :is(.vivi-domeinstand, .vivi-domeinlijst, .vivi-domeinaandacht, .vivi-tijdlijn__stip) { animation: none; }
    body.fi-panel-portal :is(.vivi-domeinrij, .vivi-domeinrij__pijl) { transition: none; }
}

@media (min-width: 640px) {
    body.fi-panel-portal .vivi-domein__feiten { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Smal scherm: de as toont elke derde maand; een rij wordt tegel, naam en pijl met de rest eronder;
   elke DNS-record wordt een blokje met label naast waarde. */
@media (max-width: 639.98px) {
    body.fi-panel-portal .vivi-domeinstand { padding: var(--vivi-ruimte-m); gap: var(--vivi-ruimte-m); }
    body.fi-panel-portal .vivi-domeinstand__icirkel { width: 2.5rem; height: 2.5rem; }
    body.fi-panel-portal .vivi-domeinstand__icoon { width: 1.25rem; height: 1.25rem; }
    body.fi-panel-portal .vivi-domeinstand__kop { font-size: var(--vivi-kop-s); }
    body.fi-panel-portal .vivi-tijdlijn__stip { width: 1.35rem; height: 1.35rem; }
    body.fi-panel-portal .vivi-tijdlijn__maand { color: transparent; }
    body.fi-panel-portal .vivi-tijdlijn__maand--derde { color: var(--vivi-tekst-2); overflow: visible; text-align: left; }
    body.fi-panel-portal .vivi-domeinlijst { padding: var(--vivi-ruimte-m); }
    body.fi-panel-portal .vivi-domeinlijst__kolommen { display: none; }
    body.fi-panel-portal .vivi-domeinrij {
        grid-template-columns: 2.25rem minmax(0, 1fr) 1.25rem; align-items: start; row-gap: var(--vivi-ruimte-xs);
        padding: var(--vivi-ruimte-s) var(--vivi-ruimte-2xs);
    }
    body.fi-panel-portal .vivi-domeinrij__teken { width: 2.25rem; height: 2.25rem; grid-row: 1 / span 3; }
    body.fi-panel-portal .vivi-domeinrij__naam { grid-column: 2; grid-row: 1; }
    body.fi-panel-portal .vivi-domeinrij__pijl { grid-column: 3; grid-row: 1; align-self: center; }
    body.fi-panel-portal .vivi-domeinrij__aandacht { grid-column: 2 / -1; grid-row: 2; }
    body.fi-panel-portal .vivi-domeinrij__datum { grid-column: 2 / -1; grid-row: 3; flex-direction: row; flex-wrap: wrap; gap: 0 var(--vivi-ruimte-xs); }
    body.fi-panel-portal .vivi-table--dns thead { display: none; }
    body.fi-panel-portal .vivi-table--dns,
    body.fi-panel-portal .vivi-table--dns tbody,
    body.fi-panel-portal .vivi-table--dns tr,
    body.fi-panel-portal .vivi-table--dns td { display: block; width: auto; min-width: 0; }
    body.fi-panel-portal .vivi-table--dns tr { padding: var(--vivi-ruimte-s) 0; border-bottom: 1px solid var(--vivi-line); }
    body.fi-panel-portal .vivi-table--dns td { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--vivi-ruimte-s); padding: 0; white-space: normal; overflow-wrap: anywhere; border: 0; text-align: left; }
    body.fi-panel-portal .vivi-table--dns td::before { content: attr(data-label); color: var(--vivi-tekst-2); font-size: var(--vivi-tekst-s); }
    body.fi-panel-portal .vivi-domein__waarde { min-width: 0; max-width: none; }
}
/* === Domeinen eind === */

/* === Privacy (publiek, /privacy) ===
   De aanmeldkaart, maar breed genoeg voor leestekst: rond 70 tekens per
   regel. Lange tekst begint bovenaan in plaats van gecentreerd. */
body.fi-panel-portal.vivi-auth.vivi-privacy {
    align-items: flex-start;
}
body.fi-panel-portal.vivi-auth .vivi-auth__kaart--tekst {
    max-width: 44rem;
}
body.fi-panel-portal .vivi-privacy__tekst {
    display: flex;
    flex-direction: column;
    gap: var(--vivi-ruimte-l);
    color: var(--vivi-tekst);
}
body.fi-panel-portal .vivi-privacy__tekst section {
    display: flex;
    flex-direction: column;
    gap: var(--vivi-ruimte-s);
}
body.fi-panel-portal .vivi-privacy__tekst h2 {
    margin: 0;
    font-family: var(--vivi-type-display);
    font-size: 1.375rem;
    line-height: 1.25;
    text-wrap: balance;
}
body.fi-panel-portal .vivi-privacy__tekst p,
body.fi-panel-portal .vivi-privacy__tekst ul {
    margin: 0;
    text-wrap: pretty;
    /* Scopenamen als instagram_business_manage_insights zijn langer dan een telefoonregel. */
    overflow-wrap: anywhere;
}
body.fi-panel-portal .vivi-privacy__tekst ul {
    padding-left: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: var(--vivi-ruimte-xs);
}
body.fi-panel-portal .vivi-privacy__tekst a,
body.fi-panel-portal .vivi-privacy__voet a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: .15em;
    overflow-wrap: anywhere;
}
body.fi-panel-portal .vivi-privacy__datum {
    color: var(--vivi-tekst-2, var(--vivi-muted));
    font-size: var(--vivi-tekst-s);
}
body.fi-panel-portal .vivi-privacy__code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .9em;
    overflow-wrap: anywhere;
}
body.fi-panel-portal .vivi-privacy__voet {
    display: flex;
    flex-wrap: wrap;
    gap: var(--vivi-ruimte-xs) var(--vivi-ruimte-l);
    padding-top: var(--vivi-ruimte-l);
    border-top: 1px solid var(--vivi-lijn-fijn);
    font-size: var(--vivi-tekst-s);
    color: var(--vivi-tekst-2, var(--vivi-muted));
}
/* === Privacy eind === */

/* === Instagram op Kanalen (InstagramAccountInzicht) === */
body.fi-panel-portal .vivi-ig__profiel {
    display: flex;
    align-items: center;
    gap: var(--vivi-ruimte-s);
}
body.fi-panel-portal .vivi-ig__foto {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
}
body.fi-panel-portal .vivi-ig__cijfers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
    gap: var(--vivi-ruimte-s);
    margin: 0;
}
body.fi-panel-portal .vivi-ig__cijfer {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
body.fi-panel-portal .vivi-ig__cijfer dd {
    margin: 0;
    font-size: var(--vivi-tekst-l);
}
body.fi-panel-portal .vivi-ig__posts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
    gap: var(--vivi-ruimte-xs);
    margin: 0;
    padding: 0;
    list-style: none;
}
body.fi-panel-portal .vivi-ig__posts img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--vivi-radius-s);
}
/* === Instagram op Kanalen eind === */

/* === Mijn gegevens (21-10-2026) ===
   Op een telefoon label boven waarde, vanaf 640 label links en waarde rechts.
   Smalle leeskolom zoals profiel en onboarding. */
body.fi-panel-portal .vivi-gegevens { max-width: 46rem; }
body.fi-panel-portal .vivi-gegevens__lijst { display: flex; flex-direction: column; margin: 0; }
body.fi-panel-portal .vivi-gegevens__rij {
    display: grid; grid-template-columns: 1fr; gap: var(--vivi-ruimte-2xs);
    padding: var(--vivi-ruimte-s) 0; border-bottom: 1px solid var(--vivi-line);
}
body.fi-panel-portal .vivi-gegevens__rij:first-child { padding-top: 0; }
body.fi-panel-portal .vivi-gegevens__rij:last-child { padding-bottom: 0; border-bottom: 0; }
/* Labels en bijregels op de gedeelde token; die haalt sinds 22-10 AA zelf (ContrastTest). */
body.fi-panel-portal .vivi-gegevens :is(.vivi-gegevens__label, .vivi-meta) { color: var(--vivi-muted); }
body.fi-panel-portal .vivi-gegevens__label { font-size: var(--vivi-tekst-s); }
/* Mail en telefoon zichtbaar klikbaar; de tikzone groeit naar 45px zonder de rij hoger te maken. */
body.fi-panel-portal .vivi-gegevens__waarde :is(a, .vivi-gegevens__invullen) {
    display: inline-block; padding-block: 13px; margin-block: -13px;
    color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
body.fi-panel-portal .vivi-gegevens__invullen { padding-inline: 0; font: inherit; font-weight: 600; background: none; border: 0; cursor: pointer; }
/* Vast contact: initialen naast de naam, zelfde bron als de topbalkavatar. */
body.fi-panel-portal .vivi-gegevens__persoon { display: flex; align-items: center; gap: .75rem; }
body.fi-panel-portal .vivi-gegevens__initialen {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 2.5rem; height: 2.5rem; border-radius: 9999px;
    background: var(--vivi-gold); color: var(--vivi-ink); font-size: .8rem; font-weight: 700;
}
/* Verzendknop in het voorstelformulier donker zoals de hoofdactie in de kop:
   wit op oker haalde 2,37:1. */
.vivi-gegevens-modal .fi-modal-footer .fi-btn.fi-color-primary:not(.fi-btn-outlined) { background: var(--vivi-ink); box-shadow: none; }
.vivi-gegevens-modal .fi-modal-footer .fi-btn.fi-color-primary:not(.fi-btn-outlined) :is(.fi-btn-label, .fi-btn-icon) { color: var(--vivi-cream-2); }
.vivi-gegevens-modal .fi-modal-footer .fi-btn.fi-color-primary:not(.fi-btn-outlined):hover { background: color-mix(in srgb, var(--vivi-ink) 86%, var(--vivi-cream-2)); }
/* Tikzones in het formulier: Filament-knoppen en het sluitkruis zijn 36px, wij willen 44. */
.vivi-gegevens-modal .fi-modal-footer .fi-btn { min-height: var(--vivi-tik-min); }
.vivi-gegevens-modal .fi-modal-close-btn { min-width: var(--vivi-tik-min); min-height: var(--vivi-tik-min); }
body.fi-panel-portal .vivi-gegevens__waarde { margin: 0; font-size: var(--vivi-tekst-m); line-height: 1.5; overflow-wrap: anywhere; }
body.fi-panel-portal .vivi-gegevens__waarde .vivi-meta { display: block; }
@media (min-width: 640px) {
    body.fi-panel-portal .vivi-gegevens__rij { grid-template-columns: 11rem 1fr; gap: var(--vivi-ruimte-s); }
}
/* Breed scherm: bedrijf en contact naast elkaar over de volle breedte, zoals
   de kaartenrasters op het moodboard, in plaats van een halve pagina leeg.
   Melding, domeinenkaart en meekijkregel lopen over beide kolommen. */
@media (min-width: 1280px) {
    body.fi-panel-portal .vivi-gegevens {
        max-width: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--vivi-ruimte-m); align-items: start;
    }
    body.fi-panel-portal .vivi-gegevens > :not(.vivi-section) { grid-column: 1 / -1; }
}
/* === Mijn gegevens eind === */

/* === Dagstart (22-10-2026): stand-up, werkdruk, notities naar actiepunten ===
   Mobiel eerst: op 375 staat alles onder elkaar. Vanaf 1024 liggen de drie
   kolommen per persoon naast elkaar. Alleen tokens, geen eigen kleuren. */
/* Herontwerp 22-10-2026: boven het anker (twee derde) en de werkdruk (een
   derde), zoals pin 10 en 13. Het capaciteitssignaal staat in het anker als
   staat met woord, niet meer als rood vlak: rood alleen was kleur zonder
   woord, en een tweede gekleurd vlak naast het anker trok de blik weg. */
body.fi-panel-portal .vivi-dagstart__boven {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--vivi-ruimte-m);
    align-items: start;
}
body.fi-panel-portal .vivi-dagstart__boven > .vivi-section { margin: 0; }
/* De stand-up is een eigen sectie in hetzelfde rooster: rijgap plus deze
   marge geeft dezelfde sectieafstand als tussen de andere secties. */
body.fi-panel-portal .vivi-dagstart__boven > .vivi-dagstart__standup { margin-top: var(--vivi-ruimte-l); }
body.fi-panel-portal .vivi-dagstart__signaal {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--vivi-ruimte-xs) var(--vivi-ruimte-s);
    color: inherit;
}
body.fi-panel-portal .vivi-dagstart__redenen {
    flex: 1 1 14rem;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--vivi-tekst-s);
    color: var(--vivi-tekst-2-op-donker);
}
body.fi-panel-portal .vivi-anker--rust .vivi-dagstart__redenen { color: var(--vivi-tekst-2); }
body.fi-panel-portal .vivi-dagstart__personen {
    display: flex;
    flex-direction: column;
    gap: var(--vivi-ruimte-s);
}
body.fi-panel-portal .vivi-dagstart__persoon {
    min-width: 0;
    padding: var(--vivi-ruimte-s) var(--vivi-ruimte-m) var(--vivi-ruimte-m);
    border: 1px solid var(--vivi-lijn-fijn);
    border-radius: var(--vivi-radius-kaart);
    background: var(--vivi-vlak);
}
body.fi-panel-portal .vivi-dagstart__persoonkop {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--vivi-ruimte-xs);
    margin-bottom: var(--vivi-ruimte-s);
}
body.fi-panel-portal .vivi-dagstart__naam {
    margin: 0;
    font-size: var(--vivi-kop-s);
    font-weight: 600;
    color: var(--vivi-ink);
}
body.fi-panel-portal .vivi-dagstart__signalen,
body.fi-panel-portal .vivi-dagstart__labels {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--vivi-ruimte-2xs);
}
body.fi-panel-portal .vivi-dagstart__kolommen {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--vivi-ruimte-s);
}
body.fi-panel-portal .vivi-dagstart__kolom {
    min-width: 0;
    padding-top: var(--vivi-ruimte-xs);
    border-top: 1px solid var(--vivi-lijn-fijn);
}
/* Af is gedaan en vraagt geen blik meer: gedempt, zoals pin 12. */
body.fi-panel-portal .vivi-dagstart__kolom--afgerond .vivi-dagstart__taaknaam {
    color: var(--vivi-tekst-2);
    font-weight: 400;
}
body.fi-panel-portal .vivi-dagstart__kolomkop,
body.fi-panel-portal .vivi-dagstart__voorstelkop {
    display: flex;
    align-items: baseline;
    gap: var(--vivi-ruimte-xs);
    margin: 0 0 var(--vivi-ruimte-xs);
    font-family: var(--vivi-type-label);
    font-variant-caps: var(--vivi-type-label-variant);
    letter-spacing: var(--vivi-type-label-spatie);
    font-size: var(--vivi-tekst-s);
    font-weight: 500;
    color: var(--vivi-tekst-2);
}
body.fi-panel-portal .vivi-dagstart__voorstelkop { font-size: var(--vivi-tekst-m); }
body.fi-panel-portal .vivi-dagstart__aantal {
    font-variant-numeric: tabular-nums;
    color: var(--vivi-muted);
}
body.fi-panel-portal .vivi-dagstart__leeg {
    margin: 0;
    font-size: var(--vivi-tekst-s);
    color: var(--vivi-muted);
}
body.fi-panel-portal .vivi-dagstart__taken {
    display: flex;
    flex-direction: column;
    gap: var(--vivi-ruimte-xs);
    margin: 0;
    padding: 0;
    list-style: none;
}
body.fi-panel-portal .vivi-dagstart__taak {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
}
body.fi-panel-portal .vivi-dagstart__taaknaam {
    max-width: 100%;
    color: var(--vivi-ink);
    font-size: var(--vivi-tekst-m);
    font-weight: 500;
    text-decoration: none;
    overflow-wrap: anywhere;
    hyphens: auto;
}
body.fi-panel-portal .vivi-dagstart__taaknaam:hover,
body.fi-panel-portal .vivi-dagstart__taaknaam:focus-visible { text-decoration: underline; }
body.fi-panel-portal .vivi-dagstart__meta,
body.fi-panel-portal .vivi-dagstart__bron {
    max-width: 100%;
    font-size: var(--vivi-tekst-xs);
    color: var(--vivi-muted);
    overflow-wrap: anywhere;
}
body.fi-panel-portal .vivi-dagstart__werkdruk {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}
body.fi-panel-portal .vivi-dagstart__wd {
    display: flex;
    flex-direction: column;
    gap: var(--vivi-ruimte-xs);
    min-width: 0;
    padding-block: var(--vivi-ruimte-s);
}
body.fi-panel-portal .vivi-dagstart__wd + .vivi-dagstart__wd { border-top: 1px solid var(--vivi-lijn-fijn); }
body.fi-panel-portal .vivi-dagstart__wdkop {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--vivi-ruimte-xs);
}
body.fi-panel-portal .vivi-dagstart__wdnaam {
    min-width: 0;
    font-weight: 600;
    color: var(--vivi-ink);
    overflow-wrap: anywhere;
}
body.fi-panel-portal .vivi-dagstart__notitieform {
    display: flex;
    flex-direction: column;
    gap: var(--vivi-ruimte-xs);
}
body.fi-panel-portal .vivi-dagstart__notities {
    width: 100%;
    min-height: 9rem;
    padding: var(--vivi-ruimte-s);
    border: 1px solid var(--vivi-line-strong);
    border-radius: var(--vivi-radius-m);
    background: var(--vivi-vlak);
    color: var(--vivi-ink);
    font-size: var(--vivi-tekst-m);
    line-height: 1.5;
    resize: vertical;
}
body.fi-panel-portal .vivi-dagstart__notities:focus {
    outline: none;
    border-color: var(--vivi-gold);
    box-shadow: var(--vivi-ring-focus);
}
body.fi-panel-portal .vivi-dagstart__knoppen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--vivi-ruimte-xs);
}
body.fi-panel-portal .vivi-dagstart__fout {
    margin: 0;
    font-size: var(--vivi-tekst-s);
    color: var(--vivi-fout);
}
body.fi-panel-portal .vivi-dagstart__voorstel {
    display: flex;
    flex-direction: column;
    gap: var(--vivi-ruimte-xs);
    margin-top: var(--vivi-ruimte-l);
}
body.fi-panel-portal .vivi-dagstart__punten {
    display: flex;
    flex-direction: column;
    gap: var(--vivi-ruimte-xs);
    margin: 0 0 var(--vivi-ruimte-xs);
    padding: 0;
    list-style: none;
}
body.fi-panel-portal .vivi-dagstart__punt {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--vivi-ruimte-2xs) var(--vivi-ruimte-xs);
    padding: var(--vivi-ruimte-s);
    border: 1px solid var(--vivi-lijn-fijn);
    border-radius: var(--vivi-radius-m);
    background: var(--vivi-vlak);
}
body.fi-panel-portal .vivi-dagstart__punt--uit { opacity: .55; }
body.fi-panel-portal .vivi-dagstart__mee {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    min-width: var(--vivi-tik-min);
    min-height: var(--vivi-tik-min);
    padding-top: 1.6rem;
}
body.fi-panel-portal .vivi-dagstart__mee input {
    width: 1.15rem;
    height: 1.15rem;
}
body.fi-panel-portal .vivi-dagstart__puntvelden {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--vivi-ruimte-xs);
    min-width: 0;
}
body.fi-panel-portal .vivi-dagstart__veld {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
body.fi-panel-portal .vivi-dagstart__label {
    font-size: var(--vivi-tekst-xs);
    color: var(--vivi-muted);
}
body.fi-panel-portal .vivi-dagstart__bron {
    grid-column: 2;
    margin: 0;
}
@media (min-width: 640px) {
    body.fi-panel-portal .vivi-dagstart__puntvelden { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    body.fi-panel-portal .vivi-dagstart__veld--naam { grid-column: 1 / -1; }
    body.fi-panel-portal .vivi-dagstart__kolommen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    /* Werkdruk beslaat beide rijen rechts; de stand-up loopt in de linker
       kolom onder het anker door. Zo bepaalt het anker alleen zijn eigen rij
       en valt er onder het anker geen lege band (fix 22-10-2026). */
    body.fi-panel-portal .vivi-dagstart__boven {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
        grid-template-rows: auto 1fr;
        grid-template-areas: "anker werkdruk" "standup werkdruk";
    }
    body.fi-panel-portal .vivi-dagstart__anker { grid-area: anker; }
    body.fi-panel-portal .vivi-dagstart__werkdrukvak { grid-area: werkdruk; }
    body.fi-panel-portal .vivi-dagstart__standup { grid-area: standup; }
    body.fi-panel-portal .vivi-dagstart__kolommen { gap: var(--vivi-ruimte-m); }
    body.fi-panel-portal .vivi-dagstart__puntvelden { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr); }
    body.fi-panel-portal .vivi-dagstart__veld--naam { grid-column: auto; }
}
/* Werkdruk als smalle kaart naast het anker (pin 10: twee derde en een
   derde). Zelfde vlak, lijn en hoek als de andere kaarten. */
body.fi-panel-portal .vivi-dagstart__werkdrukvak {
    margin: 0;
    padding: var(--vivi-ruimte-xl);
    border-radius: var(--vivi-radius-kaart);
    background: var(--vivi-vlak);
    border: 1px solid var(--vivi-lijn-fijn);
}

/* Weekoverzicht (herontwerp 22-10-2026): het anker draagt wat de klant moet
   doen, klaar en bezig staan eronder als twee even brede tegels. Eigen
   voorvoegsel vivi-weekov, omdat vivi-wv van bundel Werk is. */
body.fi-panel-portal .vivi-weekov__knoppen {
    display: flex;
    flex-wrap: wrap;
    gap: var(--vivi-ruimte-s);
}
body.fi-panel-portal .vivi-weekov__tegels {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--vivi-ruimte-m);
    align-items: start;
}
body.fi-panel-portal .vivi-weekov__tegels > .vivi-section { margin: 0; }
/* Klaar vraagt niets meer: gedempt, zoals pin 12. */
body.fi-panel-portal .vivi-weekov__tegel--af .vivi-regel {
    color: var(--vivi-tekst-2);
    font-weight: 400;
}
@media (min-width: 640px) {
    body.fi-panel-portal .vivi-weekov__tegels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Welkomstband op Home, smal scherm: op 390 stond hij boven het anker en
   duwde "Wacht op jou" onder de vouw (gemeten 22-10-2026). Onder 640 zakt
   hij onder het anker: wat wacht gaat voor een eenmalige groet. Vanaf 640
   blijft de volgorde van de opmaak staan. .vivi-dash is een flexkolom, dus
   order verschuift alleen de weergave; de leesvolgorde blijft die van de
   opmaak en de schermlezer hoort het welkom nog steeds eerst. */
@media (max-width: 639.98px) {
    body.fi-panel-portal .vivi-dash > .vivi-dash__welkom { order: 1; }
    body.fi-panel-portal .vivi-dash > .vivi-dash__onder ~ * { order: 2; }
    body.fi-panel-portal .vivi-dash > .vivi-dash__welkom {
        gap: var(--vivi-ruimte-s);
        padding: var(--vivi-ruimte-m);
    }
}

/* === Dagstart eind === */

/* === Social Merk (22-10-2026) ===
   Het tabblad Merk: een voorbeeldstrook met de merkkleuren als stalen, de
   fonts en de vaste hashtags, en het formulier. Smal staat de strook boven
   het formulier; vanaf 1024px rechts ernaast en sticky, zodat de klant zijn
   merk blijft zien terwijl hij door het formulier scrolt (zelfde vorm als
   vivi-recap). De staalkleur zelf zet Alpine (x-effect), zodat er geen
   inline stijl in de blade staat. Stalen en het kleurbolletje van het
   kleurveld krijgen een haarlijn, anders valt een lichte kleur als Kalk weg
   tegen de kaart. */
body.fi-panel-portal .vivi-social-merk__raster {
    display: grid;
    gap: var(--vivi-ruimte-m);
    grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1024px) {
    body.fi-panel-portal .vivi-social-merk__raster {
        grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
        gap: var(--vivi-ruimte-l);
        align-items: start;
    }
    body.fi-panel-portal .vivi-social-merk__zijkant {
        grid-column: 2;
        grid-row: 1;
        /* Onder de vaste hoofdbalk, zoals vivi-sf__detail. Is de strook hoger
           dan het scherm (veel kleuren of tags), dan scrolt ze zelf. */
        position: sticky;
        top: calc(var(--vivi-hoofdbalk-h, 4rem) + var(--vivi-ruimte-m));
        max-height: calc(100dvh - var(--vivi-hoofdbalk-h, 4rem) - 2 * var(--vivi-ruimte-m));
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    body.fi-panel-portal .vivi-social-merk__formulier {
        grid-column: 1;
        grid-row: 1;
    }
}
body.fi-panel-portal .vivi-social-merk__voorbeeld {
    display: grid;
    gap: var(--vivi-ruimte-s);
}
body.fi-panel-portal .vivi-social-merk__stalen {
    display: flex;
    flex-wrap: wrap;
    gap: var(--vivi-ruimte-s);
    margin: 0;
    padding: 0;
    list-style: none;
}
body.fi-panel-portal .vivi-social-merk__staal {
    display: grid;
    gap: var(--vivi-ruimte-2xs);
    min-width: 0;
    width: 7rem;
}
body.fi-panel-portal .vivi-social-merk__vlak {
    display: block;
    height: 3rem;
    border: 1px solid var(--vivi-line-strong);
    border-radius: var(--vivi-radius-s);
    background: var(--vivi-cream-2);
}
body.fi-panel-portal .vivi-social-merk .fi-fo-color-picker-preview {
    box-shadow: 0 0 0 1px var(--vivi-line-strong);
}
body.fi-panel-portal .vivi-social-merk__staal > span:not(.vivi-social-merk__vlak) {
    min-width: 0;
    overflow-wrap: anywhere;
}
body.fi-panel-portal .vivi-social-merk__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--vivi-ruimte-xs);
    margin: 0;
    padding: 0;
    list-style: none;
}
body.fi-panel-portal .vivi-social-merk__tags .vivi-chip {
    overflow-wrap: anywhere;
    max-width: 100%;
}
/* === Social Merk eind === */
/* Toelichting onder een knop in een veldset (Item verwijderen): geen
   eenwoordige laatste regel op 390 (gemeten 22-10, "terugzetten." viel los). */
body.fi-panel-portal .vivi-veldset .vivi-meta { text-wrap: pretty; }

/* === Social Maand (TCT, 27-10-2026) ===
   Maandkop met status en akkoordknop, weken van maandag tot en met zondag,
   per post een kaart met beeld links en tekst rechts; smaller dan 640px
   staat het beeld boven de tekst. Opnameverzoeken en conceptbak hergebruiken
   .vivi-sf-input en .vivi-sf-inputs uit de contentkalender. */
body.fi-panel-portal .vivi-social-maand { display: flex; flex-direction: column; gap: var(--vivi-ruimte-m); }
body.fi-panel-portal .vivi-social-maand__kop { display: flex; flex-direction: column; gap: var(--vivi-ruimte-s); }
body.fi-panel-portal .vivi-social-maand__bladeren { display: flex; align-items: center; gap: var(--vivi-ruimte-s); }
body.fi-panel-portal .vivi-social-maand__titel { margin: 0; font-size: var(--vivi-tekst-xl, 1.5rem); font-weight: 700; color: var(--vivi-ink); }
body.fi-panel-portal .vivi-social-maand__stand { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vivi-ruimte-s); }
body.fi-panel-portal .vivi-social-maand__band { margin: 0; text-wrap: pretty; }
body.fi-panel-portal .vivi-social-maand__akkoord { padding-top: var(--vivi-ruimte-s); border-top: 1px solid var(--vivi-line); }

body.fi-panel-portal .vivi-social-maand__week { display: flex; flex-direction: column; gap: var(--vivi-ruimte-s); }
body.fi-panel-portal .vivi-social-maand__weekkop { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem var(--vivi-ruimte-s); }
body.fi-panel-portal .vivi-social-maand__weekkop h3 { margin: 0; font-size: var(--vivi-tekst-l); font-weight: 700; color: var(--vivi-ink); }
body.fi-panel-portal .vivi-social-maand__posts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--vivi-ruimte-s); }

body.fi-panel-portal .vivi-social-maand__post { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--vivi-ruimte-s); align-items: start; }
body.fi-panel-portal .vivi-social-maand__post.is-goedgekeurd,
body.fi-panel-portal .vivi-social-maand__post.is-ingepland { border-left: 3px solid var(--vivi-staat-ok); }
body.fi-panel-portal .vivi-social-maand__post.is-wacht_akkoord { border-left: 3px solid var(--vivi-gold); }
body.fi-panel-portal .vivi-social-maand__beeld {
    aspect-ratio: 4 / 5; border-radius: var(--vivi-radius-m); overflow: hidden;
    background: color-mix(in srgb, var(--vivi-cream) 60%, white);
    display: flex; align-items: center; justify-content: center; text-align: center;
}
body.fi-panel-portal .vivi-social-maand__beeld img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.fi-panel-portal .vivi-social-maand__inhoud { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
body.fi-panel-portal .vivi-social-maand__postkop { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
body.fi-panel-portal .vivi-social-maand__bijschrift { margin: 0; white-space: pre-line; line-height: 1.5; color: var(--vivi-ink); text-wrap: pretty; }
body.fi-panel-portal .vivi-social-maand__tags,
body.fi-panel-portal .vivi-social-maand__stempel { margin: 0; }
body.fi-panel-portal .vivi-social-maand__tags { overflow-wrap: break-word; }
body.fi-panel-portal .vivi-social-maand__letop {
    margin: 0; padding: .5rem .7rem; border-radius: var(--vivi-radius-m);
    background: color-mix(in srgb, var(--vivi-gold) 12%, white); color: var(--vivi-ink); text-wrap: pretty;
}
body.fi-panel-portal .vivi-social-maand__opmerking { margin: 0; text-wrap: pretty; }
body.fi-panel-portal .vivi-social-maand__fout { margin: 0; color: var(--vivi-fout); font-size: var(--vivi-tekst-s); }

body.fi-panel-portal .vivi-social-maand textarea {
    width: 100%; font: inherit; font-size: var(--vivi-tekst-s); padding: .6rem .75rem;
    border-radius: var(--vivi-radius-m); border: 1px solid var(--vivi-line-strong);
    background: color-mix(in srgb, var(--vivi-cream) 40%, white); color: var(--vivi-ink); resize: vertical;
}
body.fi-panel-portal .vivi-social-maand textarea:focus { outline: none; border-color: var(--vivi-gold); box-shadow: var(--vivi-ring-focus); }

body.fi-panel-portal .vivi-social-maand__verzoeken { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--vivi-ruimte-m); }
body.fi-panel-portal .vivi-social-maand__verzoek { display: flex; flex-direction: column; gap: var(--vivi-ruimte-s); padding-top: var(--vivi-ruimte-s); border-top: 1px solid var(--vivi-line); }
body.fi-panel-portal .vivi-social-maand__verzoek:first-child { border-top: 0; padding-top: 0; }
body.fi-panel-portal .vivi-social-maand__brief { display: grid; grid-template-columns: minmax(8rem, max-content) minmax(0, 1fr); gap: .35rem var(--vivi-ruimte-s); margin: 0; }
body.fi-panel-portal .vivi-social-maand__brief dt { font-size: var(--vivi-tekst-s); font-weight: 600; color: var(--vivi-ink); }
body.fi-panel-portal .vivi-social-maand__brief dd { margin: 0; text-wrap: pretty; }
body.fi-panel-portal .vivi-social-maand__shots { margin: 0; padding-left: 1.2rem; }
body.fi-panel-portal .vivi-social-maand__bestand { font-size: var(--vivi-tekst-s); color: var(--vivi-ink); text-decoration: underline; overflow-wrap: break-word; }
body.fi-panel-portal .vivi-social-maand .vivi-sf-input__velden { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }

@media (max-width: 639.98px) {
    body.fi-panel-portal .vivi-social-maand__post { grid-template-columns: minmax(0, 1fr); }
    body.fi-panel-portal .vivi-social-maand__beeld { max-width: 12rem; }
    /* Zonder beeld geen leeg vak van een scherm hoog: smal naast de tekst. */
    body.fi-panel-portal .vivi-social-maand__post.is-zonder-beeld { grid-template-columns: 4.5rem minmax(0, 1fr); }
    body.fi-panel-portal .vivi-social-maand__brief { grid-template-columns: minmax(0, 1fr); }
    body.fi-panel-portal .vivi-social-maand .vivi-sf-input__velden { grid-template-columns: minmax(0, 1fr); }
}
/* === Social Maand eind === */

/* === Mailhandtekening (startkaart 9688481f, 27-10-2026) === */
/* Velden en voorbeeld naast elkaar vanaf 1024, daaronder onder elkaar. Het
   voorbeeld is de echte mail-html met eigen inline kleuren; het vak eromheen
   blijft neutraal en scrolt zelf als de brede uitvoering (600px) niet past,
   zodat de pagina op 375 nooit horizontaal scrolt. */
body.fi-panel-portal .vivi-mailhandtekening__raster {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--vivi-ruimte-l);
    align-items: start;
}
@media (min-width: 1024px) {
    body.fi-panel-portal .vivi-mailhandtekening__raster { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
}
body.fi-panel-portal .vivi-mailhandtekening__velden { display: flex; flex-direction: column; gap: var(--vivi-ruimte-m); }
body.fi-panel-portal .vivi-mailhandtekening__veld { display: flex; flex-direction: column; gap: var(--vivi-ruimte-xs); }
body.fi-panel-portal .vivi-mailhandtekening__veld :is(.vivi-input, .vivi-select) { width: 100%; }
body.fi-panel-portal .vivi-mailhandtekening__fout { color: var(--vivi-fout); }
body.fi-panel-portal .vivi-mailhandtekening .vivi-meta { text-wrap: pretty; }
body.fi-panel-portal .vivi-mailhandtekening__voorbeeld {
    max-width: 100%;
    overflow-x: auto;
    padding: var(--vivi-ruimte-m);
    border: 1px solid var(--vivi-line);
    border-radius: var(--vivi-radius-m);
    background: var(--vivi-cream-2);
}
/* De mail-html neemt geen portaalstijl over: geen extra marges, geen lijsten. */
body.fi-panel-portal .vivi-mailhandtekening__voorbeeld [data-handtekening] table { margin: 0; }
body.fi-panel-portal .vivi-mailhandtekening__voorbeeld [data-handtekening] img { max-width: none; }
body.fi-panel-portal .vivi-mailhandtekening__programma summary { cursor: pointer; font-weight: 600; }
body.fi-panel-portal .vivi-mailhandtekening__programma ol {
    margin: var(--vivi-ruimte-s) 0 0;
    padding-left: 1.25rem;
    list-style: decimal;
    display: flex;
    flex-direction: column;
    gap: var(--vivi-ruimte-xs);
}
/* === Mailhandtekening eind === */

/* ==== Portaal-UI: mobiel en toegankelijkheid ==== */
/* Eigenaar: Portaal-UI9. Mobiele correcties na UI5 tot UI8, aanraakdoelen, reduced motion.
   Regels: alles onder body.fi-panel-portal, alleen var(--vivi-*) uit 09 en 01,
   geen hexwaarde en geen nieuwe --vivi-*-definitie (TokensPortaalTest), alleen
   de breekpunten uit Stijllaag::BREEKPUNTEN. Zie docs/PORTAAL-UI.md.
   Het blok "Als app op het beginscherm" hieronder is van Portaal-INLOG-C
   (26-09-2026); UI9 stond toen niet in de regie en het bestand was leeg. */
body.fi-panel-portal {
}

/* ------------------------------------------------------------------
   ALS APP OP HET BEGINSCHERM (Portaal-INLOG-C)
   webapp-head zet op het portaal de cover-viewport. Dan tekent de pagina
   tot in de hoeken van het scherm, en moeten de vaste randen zelf wegblijven
   van de statusbalk, de notch en de thuisbalk. Elke regel telt de safe-area
   op bij wat er al stond, met 0px als terugval: in een gewone browser, op
   desktop en op elk toestel zonder notch verandert er dus niets.
   ------------------------------------------------------------------ */
body.fi-panel-portal .fi-main-ctn {
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

body.fi-panel-portal .fi-no {
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

body.fi-panel-portal .fi-modal-slide-over-window {
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

body.fi-panel-portal .vivi-impersonation {
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}

/* De meekijkpil op een telefoon (Dauji 23-10-2026, meekijkend als Eva): met
   left 50% kreeg de pil maar de helft van het scherm en brak "Je kijkt mee
   als" per woord over zes regels, midden over de rijen. Nu een regel, links
   vanaf de rand tot naast de Lois-knop (56px op 16px van rechts), en een lange
   naam kort af met een beletselteken. */
@media (max-width: 639.98px) {
    body.fi-panel-portal .vivi-impersonation {
        left: calc(12px + env(safe-area-inset-left, 0px));
        right: calc(16px + 56px + 12px + env(safe-area-inset-right, 0px));
        transform: none;
        max-width: none;
        justify-content: space-between;
        gap: var(--vivi-ruimte-s);
        padding-inline-start: 14px;
        white-space: nowrap;
    }
    body.fi-panel-portal .vivi-impersonation__wie {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

@media (max-width: 639.98px) {
    /* De topbalk schuift met de statusbalk mee omlaag. Het vlak erboven krijgt
       dezelfde kleur als de balk, anders schijnt de inhoud er bij scrollen
       doorheen. Vanaf 640 ligt de balk in het frame en blijft hij zoals hij is. */
    body.fi-panel-portal .fi-topbar {
        padding-top: env(safe-area-inset-top, 0px);
        background-color: var(--vivi-app-achtergrond);
    }
}

@media (min-width: 640px) {
    /* Liggend op een telefoon zit de notch links of rechts. */
    body.fi-panel-portal .fi-main-ctn {
        margin-inline: calc(12px + env(safe-area-inset-left, 0px)) calc(12px + env(safe-area-inset-right, 0px));
    }
}

@media (max-width: 1023.98px) {
    /* De lade en de Lois-knop en -paneel bestaan in deze vorm alleen onder 1024. */
    body.fi-panel-portal .fi-sidebar {
        padding-top: env(safe-area-inset-top, 0px);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        padding-inline-start: env(safe-area-inset-left, 0px);
    }

    /* Ruimte onder de inhoud voor de Lois-knop (56 hoog, 16 van de rand) plus
       16 lucht, zodat de laatste regel bij uitscrollen boven de knop eindigt.
       Gemeten 08-10-2026 op 375: zonder dit lag de knop over de laatste regel
       van /portal, /portal/profile, /portal/website-instellingen en het laatste
       invoerveld van /portal/site-cms. Bewaakt in KaartEnZweefknopTest. */
    body.fi-panel-portal .fi-main-ctn {
        padding-bottom: calc(56px + 16px + 16px + env(safe-area-inset-bottom, 0px));
    }

    /* Het donkere anker krijgt onderin dezelfde ruimte. Gemeten 22-10-2026 op
       390x844 (/portal, eerste beeld): de Lois-knop lag rechtsonder op het
       anker, donker op donker, en schoof bij scrollen over de laatste rij en
       zijn knop Openen. Met deze ruimte eindigt de laatste rij boven de knop
       zodra de onderkant van het anker in beeld komt, en ligt de knop op een
       lege hoek. Gekozen boven een kleinere knop: 56 is de vaste maat van de
       knop op elk scherm, en kleiner haalt de overlap niet weg, het maakt hem
       alleen smaller. Bewaakt in KaartEnZweefknopTest. */
    body.fi-panel-portal .vivi-anker {
        padding-bottom: calc(56px + 16px + 16px + env(safe-area-inset-bottom, 0px));
    }

    body.fi-panel-portal .vivi-lois__zweef {
        right: calc(16px + env(safe-area-inset-right, 0px));
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    }

    body.fi-panel-portal .vivi-lois__paneel {
        padding:
            calc(20px + env(safe-area-inset-top, 0px))
            calc(16px + env(safe-area-inset-right, 0px))
            calc(16px + env(safe-area-inset-bottom, 0px))
            calc(16px + env(safe-area-inset-left, 0px));
    }
}

@media (display-mode: standalone) {
    /* Geen verend doorschieten en geen trek-om-te-verversen in de app: de vaste
       topbalk sprong daarbij twee keer. In een browsertab blijft het zoals het
       was. Op html, want alleen het wortelelement stuurt het scherm aan. */
    html:has(> body.fi-panel-portal),
    body.fi-panel-portal {
        overscroll-behavior-y: none;
    }
}

/* ------------------------------------------------------------------
   DICHTE LADE ONDER 1024
   Dicht schuift Filament de lade links buiten beeld, maar hij tekende daar
   nog: de schaduw uit 02 lag als een grijze band over de eerste 24px, en
   op x=0 stond een donkere reep van de lade zelf (rgb 66,60,48 op creme
   236,232,221, gemeten 07-10 op 320, 375 en 768). Alleen de schaduw weghalen
   liet die reep staan. Verborgen tekent hij niets meer en vallen zijn links
   uit de tabvolgorde. Open blijft de lade pixel voor pixel gelijk; bij het
   sluiten blijft hij zichtbaar tot het wegschuiven klaar is, omdat Filament
   de lade met transition-all beweegt. Vanaf 1024 is dicht de ingeklapte
   rail, die blijft staan.
   ------------------------------------------------------------------ */
@media (max-width: 1023.98px) {
    body.fi-panel-portal .fi-sidebar:not(.fi-sidebar-open) {
        box-shadow: none;
        visibility: hidden;
    }
}

/* ------------------------------------------------------------------
   AANRAAKDOELEN VAN FILAMENT OP EEN TELEFOON (Portaal UX/UI 10/10)
   De render van 27-10-2026 op 390 breed telde op het dashboard 12 van 26
   tapdoelen onder 44px, op de inzendingen 15 van 26. Het waren vooral de
   knoppen en tekstacties die Filament zelf tekent: kleine knoppen op 32,
   icoonknoppen op 36, tabs en menuregels op 36 en tekstacties in een rij
   op de hoogte van hun letter. Onder 640 krijgen ze de hoogte van
   --vivi-tik-min. Een tekstactie wordt daarvoor inline-flex; alleen binnen
   een actiegroep, zodat een link in lopende tekst gewoon in de regel blijft.
   ------------------------------------------------------------------ */
@media (max-width: 639.98px) {
    body.fi-panel-portal :is(.fi-btn, .fi-tabs-item, .fi-dropdown-list-item, .fi-pagination-item-btn) {
        min-height: var(--vivi-tik-min);
    }
    body.fi-panel-portal .fi-icon-btn {
        min-width: var(--vivi-tik-min);
        min-height: var(--vivi-tik-min);
    }
    body.fi-panel-portal :is(.fi-ta-actions, .fi-ac, .fi-in-entry-wrp-hint) .fi-link {
        display: inline-flex;
        align-items: center;
        min-height: var(--vivi-tik-min);
    }
    /* Invoervelden en selects stonden op 36, de wegknop van een tag op 22x22
       (render Social posts op 390, keuring master 27-10-2026). De wegknop
       krijgt een tikvlak van 44 zonder dat de tag zelf groeit. */
    body.fi-panel-portal .fi-input-wrp,
    body.fi-panel-portal .fi-input-wrp :is(input.fi-input, .fi-select-input, .choices__inner) {
        min-height: var(--vivi-tik-min);
    }
    body.fi-panel-portal .fi-input-wrp .choices[data-type*="select-one"] .choices__inner {
        display: flex;
        align-items: center;
    }
    body.fi-panel-portal .fi-badge-delete-button {
        min-width: var(--vivi-tik-min);
        min-height: var(--vivi-tik-min);
        margin-block: calc((var(--vivi-tik-min) - 1.25rem) / -2);
        margin-inline-end: calc((var(--vivi-tik-min) - 1.25rem) / -2);
    }
}

/* ==== Beheer-UI: fundament ==== */
/* Eigenaar: Portaal-UI10. De v3-vormtaal van het klantportaal voor het
   beheerpaneel (/admin) en het teampaneel (/team). Opdracht:
   04 Regie/Opdrachten/OPDRACHT-Portaal-UI10-admin-team.md.

   Waarom een eigen laag en geen bredere scope in 09 tot 16: die lagen zijn
   van UI1 tot UI9 en blijven onder body.fi-panel-portal. Deze laag leest ze
   niet en wijzigt ze niet; ze zet dezelfde rollen op de twee andere panelen.

   Het rollenblok hieronder is een spiegel van 09, geen tweede bron.
   TokensBeheerTest eist dat elke rol hier dezelfde naam en waarde heeft als
   in 09: een antwoord op GATE-P wijzigt 09, en de test wijst dan deze regel
   aan. Buiten het rollenblok geen hexwaarde en geen --vivi-*-definitie.

   Gemeten 25-09-2026 met grep op 01 tot 08: van de rolnamen uit 09 lezen
   alleen --vivi-tekst-2 en --vivi-tik-min daar iets, en dan alleen binnen
   .vivi-ux0, een portaalklasse. Het rollenblok verandert in admin en team
   dus niets zolang er geen regel naar kijkt. */
body.fi-panel-admin,
body.fi-panel-team {
    /* Vlakken */
    --vivi-app-achtergrond: var(--vivi-cream);
    --vivi-vlak: #fff;
    --vivi-vlak-2: var(--vivi-cream-2);
    --vivi-vlak-donker: var(--vivi-ink);

    /* Accent: goud als enige accent, inkt als tekst erop */
    --vivi-accent: var(--vivi-gold);
    --vivi-accent-druk: var(--vivi-gold-press);
    --vivi-accent-zacht: color-mix(in srgb, var(--vivi-gold) 14%, var(--vivi-cream));
    --vivi-accent-tekst: var(--vivi-ink);

    /* Tekst. tekst-2 is inkt op 70% en niet de muted-kleur uit 01, want die
       haalt op wit 3,98:1 en dus geen AA. */
    --vivi-tekst: var(--vivi-ink);
    --vivi-tekst-2: rgba(43, 36, 25, .7);
    --vivi-tekst-op-donker: var(--vivi-cream);
    --vivi-tekst-2-op-donker: rgba(236, 232, 221, .74);
    --vivi-lijn-fijn: var(--vivi-line);

    /* Radius: binnen, kaart, frame; de pil komt uit 01 (herontwerp 22-10-2026:
       24, 20, 12, gelijk aan 09) */
    --vivi-radius-binnen: var(--vivi-radius-m);
    --vivi-radius-kaart: var(--vivi-radius-xl);
    --vivi-radius-frame: 24px;

    /* Staat en meter, spiegel van 09 (herontwerp 22-10-2026) */
    --vivi-staat-ok: var(--vivi-ok);
    --vivi-staat-let-op: var(--vivi-warn);
    --vivi-staat-actie: var(--vivi-fout);
    --vivi-staat-actie-op-donker: #E8806F;
    --vivi-staat-stil: var(--vivi-muted-vlak);
    --vivi-staat-ok-vlak: color-mix(in srgb, var(--vivi-ok) 12%, #fff);
    --vivi-staat-let-op-vlak: color-mix(in srgb, var(--vivi-warn) 12%, #fff);
    --vivi-staat-actie-vlak: color-mix(in srgb, var(--vivi-fout) 10%, #fff);
    --vivi-meter-goot: color-mix(in srgb, var(--vivi-ink) 8%, transparent);
    --vivi-meter-vul: var(--vivi-ink);

    /* De drie typeregisters. GATE-T beantwoord 24-09-2026: display Helvetica
       Neue, tekst en label Poppins. Helvetica Neue LT Pro komt uit het Adobe
       Fonts-webproject van Vivimus (Creative Cloud-licentie, V1 van UI3); de
       kit laadt in de portaalkop zodra zijn id is ingesteld. Zonder kit valt
       het register terug op Helvetica Neue van het apparaat. */
    --vivi-type-display: 'helvetica-neue-lt-pro', 'Helvetica Neue LT Pro', 'Helvetica Neue', 'HelveticaNeue', Helvetica, Arial, sans-serif;
    --vivi-type-display-spatie: -.025em;
    --vivi-type-tekst: var(--vivi-serif);
    --vivi-type-label: var(--vivi-serif);
    --vivi-type-label-spatie: .06em;
    --vivi-type-label-variant: all-small-caps;

    /* Cijfers: grote getallen altijd tabulair */
    --vivi-cijfer-xl: 3rem;
    --vivi-cijfer-l: 2.25rem;
    --vivi-cijfer-numeriek: tabular-nums;

    /* Aanraakdoel en frame */
    --vivi-tik-min: 44px;
    --vivi-schaduw-frame: var(--vivi-schaduw-rust);
    --vivi-focusring: var(--vivi-ring-focus);

    /* Verlooprol adem en korrel, spiegel van 09 (Portaal-INLOG-A): wachtwoord
       vergeten op / en /team draagt de vivi-auth-vorm van de inlogdeur. */
    --vivi-korrel: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='k'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .17 0 0 0 0 .14 0 0 0 0 .10 0 0 0 .14 0'/></filter><rect width='100%' height='100%' filter='url(%23k)'/></svg>");
    --vivi-adem-ochtend:
        radial-gradient(75% 60% at 0% 0%, color-mix(in srgb, var(--vivi-info) 14%, transparent), transparent 72%),
        radial-gradient(90% 70% at 100% 100%, color-mix(in srgb, var(--vivi-gold) 18%, transparent), transparent 72%),
        radial-gradient(60% 45% at 100% 0%, var(--vivi-cream-2), transparent 70%);
    --vivi-adem-middag:
        radial-gradient(80% 65% at 100% 0%, color-mix(in srgb, var(--vivi-gold) 18%, transparent), transparent 72%),
        radial-gradient(85% 65% at 0% 100%, color-mix(in srgb, var(--vivi-warn) 12%, transparent), transparent 72%),
        radial-gradient(55% 45% at 0% 0%, var(--vivi-cream-2), transparent 70%);
    --vivi-adem-avond:
        radial-gradient(90% 70% at 0% 100%, color-mix(in srgb, var(--vivi-fout-vlak) 85%, transparent), transparent 72%),
        radial-gradient(80% 65% at 100% 0%, color-mix(in srgb, var(--vivi-warn) 16%, transparent), transparent 72%),
        radial-gradient(60% 50% at 100% 100%, color-mix(in srgb, var(--vivi-gold) 12%, transparent), transparent 70%);
}

/* ------------------------------------------------------------------
   PAGINAKOP: dezelfde displayletter als de kop van de portaallijsten
   (11-portaal-componenten.css). 02 zet de koppen met !important op de
   tekstletter, dus hier ook !important op letter en maat.
   ------------------------------------------------------------------ */
body.fi-panel-admin .fi-header-heading,
body.fi-panel-team .fi-header-heading {
    font-family: var(--vivi-type-display) !important;
    font-weight: 400;
    letter-spacing: var(--vivi-type-display-spatie);
    font-size: var(--vivi-kop-l) !important;
    line-height: 1.15;
}

/* De kopbalk krijgt de kleur van het vlak waar hij op ligt, net als in het
   portaal (11-portaal-componenten.css). 02 geeft hem crème, en in het witte
   frame van de schil las dat als een tweede laag (gemeten 25-09-2026 op
   /clients en /team). Onder 640 ligt er geen frame, dus daar blijft crème.
   De plakkende bedieningsbalk eronder (zoeken en filter op ProjectBoard)
   hoort bij dezelfde balk en krijgt dezelfde kleur. */
@media (min-width: 640px) {
    body.fi-panel-admin .fi-header,
    body.fi-panel-team .fi-header,
    body.fi-panel-admin .vivi-paginabediening,
    body.fi-panel-team .vivi-paginabediening {
        background-color: var(--vivi-vlak);
    }
}

/* ProjectBoard op 375: het bord scrollt zelf horizontaal, maar het verborgen
   label van de statuskeuze (.vivi-sr, absoluut) had geen gepositioneerde
   ouder binnen het bord. Het ontsnapte daardoor aan die scrollcontainer en
   maakte de hele pagina 725 breed op een scherm van 360 (gemeten 25-09-2026
   door kinderen een voor een te verbergen). Met het bord als ankerpunt blijft
   alles wat absoluut staat binnen het bord. */
body.fi-panel-admin .vivi-board,
body.fi-panel-team .vivi-board {
    position: relative;
}

/* Tabellen en secties krijgen de kaartvorm van .vivi-card (03-basis.css):
   zelfde hoek, zelfde fijne inktrand en dezelfde zachte schaduw. Filament
   tekent zijn rand als ring in box-shadow, dus de rand gaat daar ook mee, in
   plaats van een border die de maat met een pixel zou verschuiven. Alleen
   vorm: kolommen, filters en acties blijven wat de resource zegt. */
body.fi-panel-admin .fi-ta-ctn,
body.fi-panel-team .fi-ta-ctn,
body.fi-panel-admin .fi-section:not(.fi-section-not-contained),
body.fi-panel-team .fi-section:not(.fi-section-not-contained) {
    border-radius: var(--vivi-radius-frame);
    box-shadow: 0 0 0 1px rgba(43, 36, 25, .07), 0 2px 12px rgba(43, 36, 25, .04);
}

/* De eigen kaarten van ClientHub, ProjectHub en ProjectBoard (.vivi-card uit
   03 en de bordkolom uit 04) krijgen dezelfde framehoek als het dashboard
   (mockup v3: kaart 24). Een kaart in een kaart, zoals een projectkaart in
   de ClientHub of een kaart in een bordkolom, houdt de binnenhoek van 16,
   zodat de hiërarchie zichtbaar blijft. */
body:is(.fi-panel-admin, .fi-panel-team) .vivi-card,
body:is(.fi-panel-admin, .fi-panel-team) .vivi-col {
    border-radius: var(--vivi-radius-frame);
}

body:is(.fi-panel-admin, .fi-panel-team) .vivi-card .vivi-card,
body:is(.fi-panel-admin, .fi-panel-team) .vivi-col .vivi-card {
    border-radius: 16px;
}

/* Knoppen: de pil uit de mockup (v3: pilknop, 44 hoog). Gemeten 26-09-2026
   stonden de Filament-knoppen op 8px hoek en 36 hoog, met wit op goud; dat
   haalt geen AA. De rol zegt inkt op het accent (--vivi-accent-tekst). Alleen
   de knoppen in de kop en onder een formulier krijgen de volle 44; knoppen in
   een tabelrij blijven compact, anders duwen ze de rijhoogte op. */
body:is(.fi-panel-admin, .fi-panel-team) .fi-btn,
body:is(.fi-panel-admin, .fi-panel-team) .vivi-btn {
    border-radius: var(--vivi-radius-pil);
}

/* De eigen knop uit 04 (ClientHub, ProjectHub) stond op 10 hoek en 34 hoog. */
body:is(.fi-panel-admin, .fi-panel-team) .vivi-btn {
    min-height: var(--vivi-tik-min);
    padding-inline: 20px;
}

body:is(.fi-panel-admin, .fi-panel-team) :is(.fi-header, .fi-form-actions, .vivi-paginabediening) .fi-btn {
    min-height: var(--vivi-tik-min);
    padding-inline: 20px;
}

body:is(.fi-panel-admin, .fi-panel-team) .fi-btn.fi-color-primary:not(.fi-btn-outlined),
body:is(.fi-panel-admin, .fi-panel-team) .fi-btn.fi-color-primary:not(.fi-btn-outlined) :is(.fi-btn-label, .fi-btn-icon) {
    color: var(--vivi-accent-tekst) !important;
}

/* Acties op een kaart in een tabelraster (contentGrid) mogen naar een tweede
   regel. Filament zet ze vanaf 640 op nowrap; met vier acties (Klaar,
   Annuleren, Briefing, Bewerken) stak de rij op /tasks 70px buiten de kaart
   bij 1440 en 102px bij 1024 (gemeten 22-10). De rij in een gewone tabel
   blijft zoals hij is. */
body:is(.fi-panel-admin, .fi-panel-team) .fi-ta-content-grid .fi-ta-actions {
    flex-wrap: wrap;
}

/* Gekleurde knoppen volgen dezelfde rol. Wit op success-600 haalde 3,30:1 en
   wit op warning-600 3,19:1 (gemeten 22-10-2026, "Nieuwe offerte (AI)"). */
body:is(.fi-panel-admin, .fi-panel-team) .fi-btn:is(.fi-color-success, .fi-color-warning):not(.fi-btn-outlined),
body:is(.fi-panel-admin, .fi-panel-team) .fi-btn:is(.fi-color-success, .fi-color-warning):not(.fi-btn-outlined) :is(.fi-btn-label, .fi-btn-icon) {
    color: var(--vivi-accent-tekst) !important;
}

/* Tekstlinks en badges: Filament kleurt ze met stap 600 van het palet. Bij goud
   was dat 2,37:1 op wit (Bewerken), bij groen 3,30 (Klaar) en bij amber 3,19
   (Uitnodiging mailen). Elke kleur krijgt de lichtste stap die op wit en op
   zand 4,5:1 haalt; BeheerActieContrastTest rekent ze door. */
body:is(.fi-panel-admin, .fi-panel-team) .fi-link.fi-color-primary > :not(.fi-link-badge-ctn),
body:is(.fi-panel-admin, .fi-panel-team) .fi-badge.fi-color-primary,
body:is(.fi-panel-admin, .fi-panel-team) .fi-badge.fi-color-primary * {
    color: rgb(var(--primary-900));
}

body:is(.fi-panel-admin, .fi-panel-team) .fi-link.fi-color-success > :not(.fi-link-badge-ctn),
body:is(.fi-panel-admin, .fi-panel-team) .fi-badge.fi-color-success,
body:is(.fi-panel-admin, .fi-panel-team) .fi-badge.fi-color-success * {
    color: rgb(var(--success-800));
}

body:is(.fi-panel-admin, .fi-panel-team) .fi-link.fi-color-warning > :not(.fi-link-badge-ctn),
body:is(.fi-panel-admin, .fi-panel-team) .fi-badge.fi-color-warning,
body:is(.fi-panel-admin, .fi-panel-team) .fi-badge.fi-color-warning * {
    color: rgb(var(--warning-800));
}

body:is(.fi-panel-admin, .fi-panel-team) .fi-link.fi-color-danger > :not(.fi-link-badge-ctn),
body:is(.fi-panel-admin, .fi-panel-team) .fi-badge.fi-color-danger,
body:is(.fi-panel-admin, .fi-panel-team) .fi-badge.fi-color-danger * {
    color: rgb(var(--danger-700));
}

body:is(.fi-panel-admin, .fi-panel-team) .fi-link.fi-color-info > :not(.fi-link-badge-ctn),
body:is(.fi-panel-admin, .fi-panel-team) .fi-badge.fi-color-info,
body:is(.fi-panel-admin, .fi-panel-team) .fi-badge.fi-color-info * {
    color: rgb(var(--info-700));
}

/* Labels 11 tot 12 (mockup v3). De kicker uit 04 staat op --vivi-tekst-xs en komt
   daarmee op 10,88. */
body:is(.fi-panel-admin, .fi-panel-team) .vivi-kicker {
    font-size: 11px;
}

@media (max-width: 639.98px) {
    body.fi-panel-admin .fi-ta-ctn,
    body.fi-panel-team .fi-ta-ctn,
    body.fi-panel-admin .fi-section:not(.fi-section-not-contained),
    body.fi-panel-team .fi-section:not(.fi-section-not-contained),
    body:is(.fi-panel-admin, .fi-panel-team) .vivi-card,
    body:is(.fi-panel-admin, .fi-panel-team) .vivi-col {
        border-radius: 16px;
    }
}

/* Aanraakdoelen van Filament op een telefoon, gelijk aan 16-portaal-mobiel.css
   (Portaal UX/UI 10/10). De render van 27-10-2026 op 390 breed telde bij de
   inzendingen 48 van 86 tapdoelen onder 44px, bij de projecten 30 van 66.
   Een tekstactie wordt alleen binnen een actiegroep inline-flex, zodat een
   link in lopende tekst in de regel blijft. */
@media (max-width: 639.98px) {
    body:is(.fi-panel-admin, .fi-panel-team) :is(.fi-btn, .fi-tabs-item, .fi-dropdown-list-item, .fi-pagination-item-btn) {
        min-height: var(--vivi-tik-min);
    }
    body:is(.fi-panel-admin, .fi-panel-team) .fi-icon-btn {
        min-width: var(--vivi-tik-min);
        min-height: var(--vivi-tik-min);
    }
    body:is(.fi-panel-admin, .fi-panel-team) :is(.fi-ta-actions, .fi-ac, .fi-in-entry-wrp-hint) .fi-link {
        display: inline-flex;
        align-items: center;
        min-height: var(--vivi-tik-min);
    }
    /* Invoervelden en selects stonden op 36, de wegknop van een tag op 22x22
       (render Social posts op 390, keuring master 27-10-2026). De wegknop
       krijgt een tikvlak van 44 zonder dat de tag zelf groeit. */
    body:is(.fi-panel-admin, .fi-panel-team) .fi-input-wrp,
    body:is(.fi-panel-admin, .fi-panel-team) .fi-input-wrp :is(input.fi-input, .fi-select-input, .choices__inner) {
        min-height: var(--vivi-tik-min);
    }
    body:is(.fi-panel-admin, .fi-panel-team) .fi-input-wrp .choices[data-type*="select-one"] .choices__inner {
        display: flex;
        align-items: center;
    }
    body:is(.fi-panel-admin, .fi-panel-team) .fi-badge-delete-button {
        min-width: var(--vivi-tik-min);
        min-height: var(--vivi-tik-min);
        margin-block: calc((var(--vivi-tik-min) - 1.25rem) / -2);
        margin-inline-end: calc((var(--vivi-tik-min) - 1.25rem) / -2);
    }
}

/* ==== Beheer-UI: schil ==== */
/* De rail, topbalk en het frame van het portaal (10-portaal-schil.css), regel
   voor regel, op admin en team. Alleen de selector verschilt:
   body:is(.fi-panel-admin, .fi-panel-team) weegt even zwaar als
   body.fi-panel-portal, dus de cascade tegen 02 blijft dezelfde.

   Weggelaten, omdat het portaalinhoud is die admin en team niet renderen: de
   railvoet met gebruikerskaart en Lois-slot, en de wat-wacht-regel in de
   topbalk (alles met vivi-schil- in de selector).

   TokensBeheerTest legt elke overige regel van 10 naast deze sectie. Wijzigt
   UI4 de schil, dan wijst die test de regel aan die hier mee moet. */



/* ------------------------------------------------------------------
   RAIL
   ------------------------------------------------------------------ */
body:is(.fi-panel-admin, .fi-panel-team) .fi-sidebar {
    /* 02 zet de zijbalk met !important wit, met een lijn eromheen. */
    background-color: var(--vivi-vlak-donker) !important;
    border-color: transparent !important;
    color: var(--vivi-tekst-op-donker);
}

body:is(.fi-panel-admin, .fi-panel-team) .fi-sidebar-header {
    background-color: transparent;
    box-shadow: none;
    padding-inline: 20px;
}

/* De wordmark houdt letter en kapitalen uit 02; alleen de kleur draait om.
   02 zet hem met !important op inkt, dus hier ook !important, anders staat
   inkt op inkt (gemeten: contrast 1,0). */
body:is(.fi-panel-admin, .fi-panel-team) .fi-sidebar .fi-logo {
    color: var(--vivi-tekst-op-donker) !important;
}

body:is(.fi-panel-admin, .fi-panel-team) .fi-sidebar-header .fi-icon-btn {
    color: color-mix(in srgb, var(--vivi-tekst-op-donker) 72%, var(--vivi-vlak-donker));
}

body:is(.fi-panel-admin, .fi-panel-team) .fi-sidebar-header .fi-icon-btn:hover {
    color: var(--vivi-tekst-op-donker);
    background-color: color-mix(in srgb, var(--vivi-tekst-op-donker) 8%, var(--vivi-vlak-donker));
}

body:is(.fi-panel-admin, .fi-panel-team) .fi-sidebar-nav {
    padding: 8px 14px 14px;
    row-gap: 20px;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--vivi-tekst-op-donker) 8%, var(--vivi-vlak-donker)) transparent;
}

body:is(.fi-panel-admin, .fi-panel-team) .fi-sidebar-nav-groups {
    margin-inline: 0;
    row-gap: 20px;
}

/* Groepskop: klein label in kleinkapitaal, zoals de koppen in de mockup. */
body:is(.fi-panel-admin, .fi-panel-team) .fi-sidebar-group-button {
    padding: 0 14px 4px;
}

body:is(.fi-panel-admin, .fi-panel-team) .fi-sidebar-group-label {
    color: color-mix(in srgb, var(--vivi-tekst-op-donker) 72%, var(--vivi-vlak-donker));
    font-family: var(--vivi-type-label);
    font-variant-caps: var(--vivi-type-label-variant);
    letter-spacing: var(--vivi-type-label-spatie);
    font-size: .8125rem;
    font-weight: 500;
}

body:is(.fi-panel-admin, .fi-panel-team) .fi-sidebar-group-collapse-button {
    color: color-mix(in srgb, var(--vivi-tekst-op-donker) 72%, var(--vivi-vlak-donker));
}

/* Menu-item: een pil van minstens de tikmaat. */
body:is(.fi-panel-admin, .fi-panel-team) .fi-sidebar-item-button {
    min-height: var(--vivi-tik-min);
    padding-inline: 14px;
    gap: 12px;
    border-radius: var(--vivi-radius-pil);
}

body:is(.fi-panel-admin, .fi-panel-team) .fi-sidebar-item-button:hover,
body:is(.fi-panel-admin, .fi-panel-team) .fi-sidebar-item-button:focus-visible {
    background-color: color-mix(in srgb, var(--vivi-tekst-op-donker) 8%, var(--vivi-vlak-donker));
}

body:is(.fi-panel-admin, .fi-panel-team) .fi-sidebar-item-icon {
    color: color-mix(in srgb, var(--vivi-tekst-op-donker) 72%, var(--vivi-vlak-donker));
}

body:is(.fi-panel-admin, .fi-panel-team) .fi-sidebar-item-label {
    color: var(--vivi-tekst-op-donker);
    font-weight: 400;
}

body:is(.fi-panel-admin, .fi-panel-team) .fi-sidebar-item-grouped-border > div {
    background-color: color-mix(in srgb, var(--vivi-tekst-op-donker) 72%, var(--vivi-vlak-donker));
}

/* Actief: de lichte pil met inkt erop. 02 zet goud op 18% met !important;
   kleur en gewicht van icoon en label (inkt, 600) komen al uit 02. */
body:is(.fi-panel-admin, .fi-panel-team) .fi-sidebar-item-active .fi-sidebar-item-button {
    background-color: var(--vivi-vlak-2) !important;
}

/* Teller in de uitgeklapte rail: gouden pil, inkt erop. */
body:is(.fi-panel-admin, .fi-panel-team) .fi-sidebar .fi-badge {
    min-width: 22px;
    min-height: 20px;
    justify-content: center;
    padding-inline: 7px;
    border-radius: var(--vivi-radius-pil);
    background-color: var(--vivi-accent);
    color: var(--vivi-accent-tekst);
    box-shadow: none;
    font-size: .6875rem;
    font-weight: 600;
    font-variant-numeric: var(--vivi-cijfer-numeriek);
}

body:is(.fi-panel-admin, .fi-panel-team) .fi-sidebar .fi-badge * {
    color: inherit;
}

/* Focus op donker: de focusring uit 09 is goud op 25% en verdwijnt op inkt,
   dus hier een volle gouden omlijning. */
body:is(.fi-panel-admin, .fi-panel-team) .fi-sidebar :is(a, button):focus-visible {
    outline: 2px solid var(--vivi-accent);
    outline-offset: 2px;
}

/* ------------------------------------------------------------------
   TOPBALK EN BEL
   ------------------------------------------------------------------ */
body:is(.fi-panel-admin, .fi-panel-team) .fi-topbar > nav {
    /* 02 maakt de topbalk met !important doorzichtig. Hier krijgt hij het vlak
       waar hij op ligt, zodat inhoud er bij scrollen niet onderdoor schijnt. */
    background-color: var(--vivi-app-achtergrond) !important;
}

/* Ladeknop onder 1024: Filament zet hem op grijs 400, gemeten 2,06 op creme.
   Tweede tekst haalt de 3:1 voor een bedieningselement ruim, en de knop krijgt
   de tikmaat. */
body:is(.fi-panel-admin, .fi-panel-team) :is(.fi-topbar-open-sidebar-btn, .fi-topbar-close-sidebar-btn) {
    width: var(--vivi-tik-min);
    height: var(--vivi-tik-min);
    color: var(--vivi-tekst-2);
}

body:is(.fi-panel-admin, .fi-panel-team) :is(.fi-topbar-open-sidebar-btn, .fi-topbar-close-sidebar-btn):focus-visible {
    outline: 2px solid var(--vivi-accent);
    outline-offset: 2px;
}

/* De bel: rond, licht vlak, gouden telling. */
body:is(.fi-panel-admin, .fi-panel-team) .fi-topbar-database-notifications-btn {
    width: var(--vivi-tik-min);
    height: var(--vivi-tik-min);
    border-radius: var(--vivi-radius-pil);
    background-color: var(--vivi-vlak-2);
    color: var(--vivi-tekst);
}

body:is(.fi-panel-admin, .fi-panel-team) .fi-topbar-database-notifications-btn:hover {
    background-color: var(--vivi-accent-zacht);
}

body:is(.fi-panel-admin, .fi-panel-team) .fi-topbar-database-notifications-btn:focus-visible {
    outline: 2px solid var(--vivi-accent);
    outline-offset: 2px;
}

body:is(.fi-panel-admin, .fi-panel-team) .fi-topbar-database-notifications-btn .fi-badge {
    min-width: 20px;
    min-height: 20px;
    justify-content: center;
    border-radius: var(--vivi-radius-pil);
    background-color: var(--vivi-accent);
    color: var(--vivi-accent-tekst);
    box-shadow: 0 0 0 2px var(--vivi-vlak);
    font-size: .6875rem;
    font-weight: 600;
    font-variant-numeric: var(--vivi-cijfer-numeriek);
}

body:is(.fi-panel-admin, .fi-panel-team) .fi-topbar-database-notifications-btn .fi-badge * {
    color: inherit;
}

/* Vanaf 1024 klapt 02 de topbalk tot hoogte 0 zodra de paginakop het
   profielmenu draagt. De bel bleef dan op die lijn van 0 hangen en stak er
   aan de bovenkant 10px uit (gemeten 22-10 op /taken bij 1440: y=-10). Hier
   hangt hij aan het profiel zelf, links ernaast: volgorde bel, profiel, zoals
   in het portaal en zoals Filament het zelf neerzet.

   Hoe: het profiel is een CSS-anker en de bel staat vast (fixed) met zijn
   midden op het profielmidden en zijn rechterkant tegen de linkerkant van
   het profiel. Tot 23-10 schoof hij er met een translate heen, een x die
   rekende op Filaments 2rem binnenmarge en een y van 38px die uitging van een
   kop van 52 hoog. Waar de kop hoger was of over twee regels liep, stond hij
   scheef of een rij hoger (gemeten 23-10: /clients/create 21px, /team 10px,
   /projects/create 4px, dashboard bij 1024 een rij). Met het anker volgt hij
   het profiel naar elke kophoogte, elke scrollstand en elke regel waar het
   heen wrapt; er staat geen maat van een andere container in.

   De selector hangt aan het profiel en niet aan .fi-header: het dashboard
   (.vivi-bdash__acties) en de projectstarter (.ff__balk) zetten het profiel
   in een eigen kop. De vrije ruimte voor de bel zit daarom ook op het
   profiel: zijn marge links is de bel (tikmaat) plus .6rem lucht, dezelfde
   lucht als tussen de kopknoppen, en wrapt dus altijd met het profiel mee.
   De topbalk gaat één laag boven de plakkende kop, anders schildert die over
   de bel heen. */
@media (min-width: 1024px) {
    body:is(.fi-panel-admin, .fi-panel-team):has(.vivi-hoofdbalk__profiel) .fi-topbar {
        z-index: 21;
    }
    body:is(.fi-panel-admin, .fi-panel-team):has(.vivi-hoofdbalk__profiel):has(.fi-topbar-database-notifications-btn) .vivi-hoofdbalk__profiel {
        margin-inline-start: calc(.2rem + var(--vivi-tik-min) + .6rem);
    }

    @supports (anchor-name: --a) {
        body:is(.fi-panel-admin, .fi-panel-team):has(.vivi-hoofdbalk__profiel):has(.fi-topbar-database-notifications-btn) .vivi-hoofdbalk__profiel {
            anchor-name: --vivi-hoofdbalk-profiel;
        }
        body:is(.fi-panel-admin, .fi-panel-team):has(.vivi-hoofdbalk__profiel) .fi-topbar-database-notifications-btn {
            position: fixed;
            position-anchor: --vivi-hoofdbalk-profiel;
            top: anchor(center);
            right: anchor(left);
            translate: 0 -50%;
            margin: 0 .6rem 0 0;
        }
    }

    /* Terugval voor een browser zonder CSS-anker (Firefox voor 147, Safari
       voor 26). Daar zet bel-naast-profiel.blade.php de plek van het profiel
       in twee variabelen op <body> (klasse vivi-bel-vast), en staat de bel
       vast op dezelfde plek als met het anker: zijn midden op het
       profielmidden, .6rem lucht links van het profiel. Zo volgt hij ook hier
       elke kophoogte en scrollstand (gemeten 23-10 zonder anker: dy 0 op elke
       kop, waar de vaste translate 24px op /tasks en 21px op /clients/create
       scheef stond).

       Zonder script blijft de oude vaste translate: hij schuift vanuit de
       ingeklapte topbalk naar de plek die het profiel voor hem vrijhoudt. Die
       x rekent op 2rem binnenmarge rechts in topbalk en kop, de y op een kop
       van 52 hoog. Hoeveel: min het profiel (avatar 2rem + .6rem + rand 1px),
       plus de halve avatar, min de lucht .6rem, min de halve bel; 38px = van
       de ingeklapte lijn (bel op -22) naar de kop (12 lager) plus
       (52 - 44) / 2. De projectstarter heeft een balk van 44 hoog: 34px. Het
       dashboard brak bij 1024 zijn bovenregel af, waardoor het profiel een
       rij lager kwam en de bel op de zoekrij bleef staan (gemeten 23-10,
       60px); zonder script blijft die bovenregel daarom op een regel, de
       zoekpil krimpt. */
    @supports not (anchor-name: --a) {
        body:is(.fi-panel-admin, .fi-panel-team):has(.vivi-hoofdbalk__profiel) .fi-topbar {
            top: -12px;
        }
        body:is(.fi-panel-admin, .fi-panel-team):has(.vivi-hoofdbalk__profiel) .fi-topbar-database-notifications-btn {
            translate: calc(-2rem - .6rem - 1px + 1rem - .6rem - var(--vivi-tik-min) / 2) 38px;
        }
        body:is(.fi-panel-admin, .fi-panel-team):has(.ff__balk .vivi-hoofdbalk__profiel) .fi-topbar-database-notifications-btn {
            translate: calc(-2rem - .6rem - 1px + 1rem - .6rem - var(--vivi-tik-min) / 2) 34px;
        }
        body:is(.fi-panel-admin, .fi-panel-team):not(.vivi-bel-vast):has(.vivi-hoofdbalk__profiel) :is(.vivi-bdash__top, .vivi-bdash__top > .vivi-bdash__acties) {
            flex-wrap: nowrap;
        }
        body:is(.fi-panel-admin, .fi-panel-team).vivi-bel-vast:has(.vivi-hoofdbalk__profiel) .fi-topbar-database-notifications-btn {
            position: fixed;
            top: var(--vivi-bel-profiel-midden);
            left: calc(var(--vivi-bel-profiel-links) - .6rem - var(--vivi-tik-min));
            translate: 0 -50%;
            margin: 0;
        }
    }
}

/* ------------------------------------------------------------------
   FRAME VANAF 640: wit vlak met 12px lucht en radius frame
   ------------------------------------------------------------------ */
@media (min-width: 640px) {
    body:is(.fi-panel-admin, .fi-panel-team) .fi-main-ctn {
        min-width: 0;
        min-height: calc(100dvh - 24px);
        margin: 12px;
        border-radius: var(--vivi-radius-frame);
        background-color: var(--vivi-vlak);
        box-shadow: var(--vivi-schaduw-frame);
    }

    body:is(.fi-panel-admin, .fi-panel-team) .fi-topbar > nav {
        /* Zie de topbalkregel hierboven: 02 zet hem met !important doorzichtig. */
        background-color: var(--vivi-vlak) !important;
        border-radius: var(--vivi-radius-frame) var(--vivi-radius-frame) 0 0;
    }
}

/* ------------------------------------------------------------------
   DESKTOP VANAF 1024: zwevende rail, in te klappen tot iconen
   ------------------------------------------------------------------ */
@media (min-width: 1024px) {
    body:is(.fi-panel-admin, .fi-panel-team) .fi-sidebar {
        border-radius: var(--vivi-radius-frame);
        box-shadow: var(--vivi-schaduw-frame);
    }

    /* Ingeklapt: Filament 3.3 zet de ingeklapte breedte alleen als variabele
       op :root en past hem nergens toe; zonder deze regel krijgt de rail de
       breedte van zijn inhoud. */
    body:is(.fi-panel-admin, .fi-panel-team) .fi-sidebar:not(.fi-sidebar-open) {
        width: var(--collapsed-sidebar-width);
    }

    body:is(.fi-panel-admin, .fi-panel-team) .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-header {
        padding-inline: 14px;
    }

    body:is(.fi-panel-admin, .fi-panel-team) .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-nav {
        /* Filament zet scrollbar-gutter inline; op Windows reserveert dat 15px
           en dan past er in 72px geen item van 44px meer. */
        scrollbar-gutter: auto !important;
        scrollbar-width: none;
        /* 72 min de rand van 1px aan elke kant min 2 x 13 geeft precies 44. */
        padding-inline: 13px;
    }

    body:is(.fi-panel-admin, .fi-panel-team) .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-item-button {
        padding-inline: 10px;
    }

    /* Tellerpunt: in de ingeklapte rail wordt de teller een gouden punt op
       het icoon. Filament verbergt de badge dan met Alpine x-show (inline
       display none); !important is de enige weg om hem terug te halen. */
    body:is(.fi-panel-admin, .fi-panel-team) .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-item-button > span:has(> .fi-badge) {
        display: block !important;
        position: absolute;
        top: 7px;
        inset-inline-end: 7px;
        width: 10px;
        height: 10px;
        border-radius: var(--vivi-radius-pil);
        background-color: var(--vivi-accent);
        box-shadow: 0 0 0 2px var(--vivi-vlak-donker);
    }

    /* Het getal blijft voor een schermlezer, alleen niet zichtbaar. */
    body:is(.fi-panel-admin, .fi-panel-team) .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-item-button > span > .fi-badge {
        position: absolute;
        width: 1px;
        height: 1px;
        min-width: 0;
        min-height: 0;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

/* ------------------------------------------------------------------
   ONDER 640: geen frame, de kaarten liggen direct op creme. De topbalk
   houdt de creme uit de topbalkregel bovenaan.
   ------------------------------------------------------------------ */
@media (max-width: 639.98px) {
    body:is(.fi-panel-admin, .fi-panel-team) .fi-main-ctn {
        margin: 0;
        background-color: transparent;
    }
}

/* ==== Beheer-UI: dashboard ==== */
/* Het beheerdashboard volgens mockup v3 (Portaal-UI10c), in dezelfde maten
   als het gebouwde klantdashboard (12-portaal-dashboard.css): zoekpil 52 hoog,
   groet 46px op 1.08, vier tegels van 152 hoog met 16 tussenruimte, twee
   vlakken naast elkaar in 1.9fr en 1fr. Vlakken zijn vlak-2 op het witte
   frame; alleen de eerste tegel draagt het focusverloop en alleen vandaag
   staat in inkt. Eigen klassen (vivi-bdash) in plaats van de portaalklassen,
   want die zijn onder body.fi-panel-portal gescoped en 12 is niet van deze
   laag. De groet (x-vivi.groet) krijgt hier dezelfde vorm als in 11. */
body:is(.fi-panel-admin, .fi-panel-team) .vivi-groet {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--vivi-ruimte-xs);
    color: var(--vivi-tekst);
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-groet__datum {
    margin: 0;
    font-family: var(--vivi-type-label);
    font-variant-caps: var(--vivi-type-label-variant);
    letter-spacing: var(--vivi-type-label-spatie);
    font-size: var(--vivi-tekst-s);
    color: var(--vivi-tekst-2);
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-groet__kop {
    margin: 0;
    font-family: var(--vivi-type-display);
    font-weight: 400;
    letter-spacing: var(--vivi-type-display-spatie);
    font-size: 32px;
    line-height: 1.08;
    text-wrap: balance;
    color: var(--vivi-tekst);
}
/* 02 zet Poppins op .fi-body *, dus de spans erven de kopletter niet vanzelf. */
body:is(.fi-panel-admin, .fi-panel-team) :is(.vivi-groet__hallo, .vivi-groet__naam, .vivi-groet__wacht, .vivi-groet__titel) {
    font-family: inherit;
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-groet__wacht {
    display: block;
    color: var(--vivi-tekst-2);
}

body:is(.fi-panel-admin, .fi-panel-team) .vivi-bdash {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    color: var(--vivi-tekst);
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-bdash > * {
    min-width: 0;
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-bdash [x-cloak] {
    display: none !important;
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-bdash__ico {
    width: 1.15rem;
    height: 1.15rem;
}

/* ---- Bovenregel ------------------------------------------------- */
body:is(.fi-panel-admin, .fi-panel-team) .vivi-bdash__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    /* Zo hoog als de zoekpil, ook waar geen zoekpil staat (team): de groet
       begint dan op elk dashboard op dezelfde hoogte. */
    min-height: 52px;
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-bdash__zoek {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 100%;
    min-width: 0;
    height: 52px;
    padding: 0 16px 0 4px;
    border-radius: var(--vivi-radius-pil);
    background: var(--vivi-vlak-2);
    color: var(--vivi-tekst-2);
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-bdash__zoek:focus-within {
    box-shadow: var(--vivi-focusring);
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-bdash__zoekicoon {
    display: grid;
    place-items: center;
    flex: none;
    width: var(--vivi-tik-min);
    height: var(--vivi-tik-min);
    border-radius: var(--vivi-radius-rond);
    background: var(--vivi-vlak);
    color: var(--vivi-tekst);
}
body:is(.fi-panel-admin, .fi-panel-team) :is(.vivi-bdash__zoekveld, .vivi-bdash__vraagveld) {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 14px;
    color: var(--vivi-tekst);
}
body:is(.fi-panel-admin, .fi-panel-team) :is(.vivi-bdash__zoekveld, .vivi-bdash__vraagveld):focus {
    box-shadow: none;
}
body:is(.fi-panel-admin, .fi-panel-team) :is(.vivi-bdash__zoekveld, .vivi-bdash__vraagveld)::placeholder {
    color: var(--vivi-tekst-2);
    opacity: 1;
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-bdash__acties {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}
/* Eén knopvorm voor het hele scherm: de pil uit de mockup, 44 hoog. */
body:is(.fi-panel-admin, .fi-panel-team) :is(.vivi-bdash__pil, .vivi-bdash__kopknop, .vivi-bdash__tab, .vivi-bdash__stuur, .vivi-bdash__suggestie) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--vivi-tik-min);
    padding: 0 16px;
    border: 0;
    border-radius: var(--vivi-radius-pil);
    background: var(--vivi-vlak-2);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--vivi-tekst);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}
body:is(.fi-panel-admin, .fi-panel-team) :is(.vivi-bdash__pil, .vivi-bdash__kopknop, .vivi-bdash__tab, .vivi-bdash__suggestie):hover {
    background: var(--vivi-accent-zacht);
}

/* ---- Groet ------------------------------------------------------ */
body:is(.fi-panel-admin, .fi-panel-team) .vivi-bdash__groet {
    margin-top: 14px;
}

/* ---- Tegels ----------------------------------------------------- */
body:is(.fi-panel-admin, .fi-panel-team) .vivi-bdash__tegels {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 8px;
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-bdash__tegel {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 132px;
    padding: 14px 16px;
    border-radius: var(--vivi-radius-frame);
    background: var(--vivi-vlak-2);
    color: var(--vivi-tekst);
    text-decoration: none;
    transition: box-shadow .15s ease;
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-bdash__tegel:hover {
    box-shadow: var(--vivi-schaduw-zweef);
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-bdash__tegel:focus-visible {
    outline: none;
    box-shadow: var(--vivi-focusring);
}
body:is(.fi-panel-admin, .fi-panel-team) :is(.vivi-bdash__icirkel, .vivi-bdash__pijl) {
    display: grid;
    place-items: center;
    width: var(--vivi-tik-min);
    height: var(--vivi-tik-min);
    border-radius: var(--vivi-radius-rond);
    background: var(--vivi-vlak);
    color: var(--vivi-tekst);
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-bdash__pijl {
    position: absolute;
    top: 14px;
    right: 14px;
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-bdash__tegelkop {
    display: block;
    margin-top: auto;
    padding-top: 12px;
    font-family: var(--vivi-type-display);
    font-size: 20px;
    font-weight: 400;
    letter-spacing: var(--vivi-type-display-spatie);
    line-height: 1.1;
    overflow-wrap: anywhere;
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-bdash__tegelmeta {
    display: -webkit-box;
    padding-top: 6px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--vivi-tekst-2);
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* Altijd twee regels hoog, zodat de koppen in alle tegels op één lijn staan. */
    min-height: calc(2 * 1.4em + 6px);
}
/* Het focusverloop, gelijk aan .vivi-stat--focus in 11: goud naar het zachte
   rood uit 01 met een korrel erover, tekst in inkt. */
body:is(.fi-panel-admin, .fi-panel-team) .vivi-bdash__tegel--focus {
    background-color: var(--vivi-fout-vlak);
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='k'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .17 0 0 0 0 .14 0 0 0 0 .10 0 0 0 .20 0'/></filter><rect width='100%' height='100%' filter='url(%23k)'/></svg>"),
        radial-gradient(130% 150% at 0% 0%, var(--vivi-accent) 0%, color-mix(in srgb, var(--vivi-accent) 55%, var(--vivi-fout-vlak)) 50%, var(--vivi-fout-vlak) 100%);
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-bdash__tegel--focus .vivi-bdash__tegelmeta {
    color: var(--vivi-tekst);
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-bdash__tegel--focus .vivi-bdash__icirkel {
    background: color-mix(in srgb, var(--vivi-vlak) 34%, transparent);
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-bdash__tegel--focus .vivi-bdash__pijl {
    background: var(--vivi-vlak-donker);
    color: var(--vivi-tekst-op-donker);
}

/* ---- Vlakken ---------------------------------------------------- */
body:is(.fi-panel-admin, .fi-panel-team) .vivi-bdash__onder {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-bdash__vlak {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 18px 18px 16px;
    border-radius: var(--vivi-radius-frame);
    background: var(--vivi-vlak-2);
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-bdash__kop {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-bdash__koptekst {
    margin: 0;
    font-size: 15px;
    font-weight: 500;
    color: var(--vivi-tekst);
}
body:is(.fi-panel-admin, .fi-panel-team) :is(.vivi-bdash__kopknop, .vivi-bdash__tab, .vivi-bdash__suggestie) {
    padding: 0 14px;
    background: var(--vivi-vlak);
    font-size: 12.5px;
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-bdash__tabs {
    display: flex;
    gap: 4px;
}
body:is(.fi-panel-admin, .fi-panel-team) :is(.vivi-bdash__tab--aan, .vivi-bdash__tab--aan:hover) {
    background: var(--vivi-vlak-donker);
    color: var(--vivi-tekst-op-donker);
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-bdash__label {
    font-size: 12px;
    color: var(--vivi-tekst-2);
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-bdash__tussenkop {
    margin: 14px 0 4px;
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-bdash__leeg {
    margin: 12px 0 0;
    font-size: 13px;
    color: var(--vivi-tekst-2);
}

/* Week: zeven dagen; mobiel een strook die je veegt. */
body:is(.fi-panel-admin, .fi-panel-team) .vivi-bdash__dagen {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(112px, 1fr);
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x proximity;
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-bdash__dag {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    min-height: 120px;
    padding: 10px 8px 12px;
    border-radius: 16px;
    background: var(--vivi-vlak);
    scroll-snap-align: start;
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-bdash__wd {
    font-size: 12px;
    color: var(--vivi-tekst-2);
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-bdash__num {
    font-family: var(--vivi-type-display);
    letter-spacing: var(--vivi-type-display-spatie);
    font-size: 26px;
    font-weight: 400;
    line-height: 1;
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-bdash__dag--nu {
    background: var(--vivi-vlak-donker);
    color: var(--vivi-tekst-op-donker);
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-bdash__dag--nu :is(.vivi-bdash__wd, .vivi-bdash__meer) {
    color: color-mix(in srgb, var(--vivi-tekst-op-donker) 70%, var(--vivi-vlak-donker));
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-bdash__afs {
    display: block;
    padding: 6px;
    border-radius: 10px;
    background: var(--vivi-vlak-2);
    font-size: 11.5px;
    line-height: 1.3;
    color: var(--vivi-tekst);
    text-decoration: none;
    /* Hele woorden, een te lang woord eindigt op een beletselteken. Met
       overflow-wrap anywhere brak de kolom van 68 breed "Draaidag" als
       "Draaida/g" en "voorbereiden" als "voorbere/iden" (gemeten 29-10 op
       1440). hyphens auto helpt niet: Chrome heeft niet overal een
       Nederlands woordenboek. */
    overflow: hidden;
    text-overflow: ellipsis;
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-bdash__afs:hover {
    background: var(--vivi-accent-zacht);
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-bdash__afs b {
    display: block;
    font-weight: 500;
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-bdash__dag--nu .vivi-bdash__afs {
    background: color-mix(in srgb, var(--vivi-tekst-op-donker) 12%, var(--vivi-vlak-donker));
    color: var(--vivi-tekst-op-donker);
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-bdash__meer {
    font-size: 11.5px;
    color: var(--vivi-tekst-2);
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-bdash__vandaag {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-bdash__maand {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
    margin-top: 8px;
    text-align: center;
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-bdash__md {
    display: grid;
    place-items: center;
    height: 36px;
    border-radius: var(--vivi-radius-pil);
    font-size: 12.5px;
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-bdash__md--vol {
    background: var(--vivi-vlak);
    font-weight: 500;
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-bdash__md--nu {
    background: var(--vivi-vlak-donker);
    color: var(--vivi-tekst-op-donker);
}

/* Werklijst: kring, titel, en een grijze regel eronder. */
body:is(.fi-panel-admin, .fi-panel-team) .vivi-bdash__rij {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: var(--vivi-tik-min);
    padding: 8px 0;
    color: var(--vivi-tekst);
    text-decoration: none;
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-bdash__rij + .vivi-bdash__rij {
    border-top: 1px solid var(--vivi-lijn-fijn);
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-bdash__cirkel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: var(--vivi-radius-rond);
    background: var(--vivi-vlak);
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-bdash__cdag {
    font-size: 14px;
    font-weight: 500;
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-bdash__cmaand {
    font-size: 10px;
    font-weight: 400;
    color: var(--vivi-tekst-2);
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-bdash__rijtekst {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-bdash__rijtekst b {
    font-size: 13.5px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-bdash__rijtekst > span {
    font-size: 12.5px;
    color: var(--vivi-tekst-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-bdash__rij:hover b {
    text-decoration: underline;
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-bdash__laat {
    color: var(--vivi-fout);
    font-weight: 500;
}

/* Loïs: statuslabel, citaat, vraagveld met microfoon en verstuurknop. */
body:is(.fi-panel-admin, .fi-panel-team) .vivi-bdash__status {
    font-size: 12px;
    color: var(--vivi-tekst-2);
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-bdash__status--aan {
    color: var(--vivi-tekst);
    font-weight: 500;
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-bdash__citaat {
    margin: 0 0 12px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--vivi-tekst-2);
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-bdash__vraag {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 52px;
    padding: 0 4px 0 18px;
    border-radius: var(--vivi-radius-pil);
    background: var(--vivi-vlak);
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-bdash__vraag:focus-within {
    box-shadow: var(--vivi-focusring);
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-bdash__mic {
    display: grid;
    place-items: center;
    flex: none;
    width: var(--vivi-tik-min);
    height: var(--vivi-tik-min);
    border: 0;
    border-radius: var(--vivi-radius-rond);
    background: var(--vivi-vlak-2);
    color: var(--vivi-tekst);
    cursor: pointer;
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-bdash__mic--aan {
    background: var(--vivi-accent);
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-bdash__stuur {
    flex: none;
    background: var(--vivi-vlak-donker);
    color: var(--vivi-tekst-op-donker);
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-bdash__suggesties {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-bdash__suggestie {
    white-space: normal;
    text-align: left;
}

/* Teamdashboard: de eerstvolgende taak in het dominante vlak, knoppen als pil. */
body:is(.fi-panel-admin, .fi-panel-team) .vivi-bdash__taak {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-bdash__taaktitel {
    margin: 0;
    font-family: var(--vivi-type-display);
    font-size: 26px;
    font-weight: 400;
    letter-spacing: var(--vivi-type-display-spatie);
    line-height: 1.1;
    color: var(--vivi-tekst);
    overflow-wrap: anywhere;
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-bdash__knoppen {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-bdash__pil--licht {
    background: var(--vivi-vlak);
}
body:is(.fi-panel-admin, .fi-panel-team) :is(.vivi-bdash__pil--inkt, .vivi-bdash__pil--inkt:hover) {
    background: var(--vivi-vlak-donker);
    color: var(--vivi-tekst-op-donker);
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-bdash__projecten {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-bdash__rij > .vivi-bdash__label {
    flex: none;
}

/* Taakregel op het teampaneel (x-vivi.team-taakrij): de naam is de link naar
   de briefing, de statusknoppen staan ernaast en zakken op een smal scherm
   onder de naam in plaats van hem weg te drukken. */
body:is(.fi-panel-admin, .fi-panel-team) .vivi-teamtaak {
    flex-wrap: wrap;
    row-gap: 8px;
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-teamtaak__link {
    flex: 1 1 14rem;
    color: inherit;
    text-decoration: none;
    border-radius: var(--vivi-radius-s);
}
/* Naam en meta lopen door op een volgende regel in plaats van af te kappen:
   deadline en prioriteit staan achteraan en vielen op 375 weg achter "...". */
body:is(.fi-panel-admin, .fi-panel-team) .vivi-teamtaak__link b,
body:is(.fi-panel-admin, .fi-panel-team) .vivi-teamtaak__link > span {
    white-space: normal;
    overflow-wrap: break-word;
}
/* Breken mag alleen tussen twee meta-delen, niet midden in "± 4 uur". De
   projectnaam vooraan is vrije tekst en mag wel breken. */
body:is(.fi-panel-admin, .fi-panel-team) .vivi-teamtaak__link > span > span:not(:first-child) {
    white-space: nowrap;
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-teamtaak__link:focus-visible {
    outline: none;
    box-shadow: var(--vivi-focusring);
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-teamtaak__knoppen {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
/* De lichte knop is wit; op een witte kaart (taak- en projectpagina) viel hij
   weg tot losse tekst. Een fijne binnenrand houdt hem een knop zonder dat hij
   hoger wordt dan Klaar ernaast. */
body:is(.fi-panel-admin, .fi-panel-team) .vivi-teamtaak__knoppen .vivi-bdash__pil--licht {
    box-shadow: inset 0 0 0 1px var(--vivi-lijn-fijn);
}

/* Interne notities (x-vivi.team-notities). Het veld volgt de invoerschil van
   het portaal: fijne rand, goud bij focus, rood bij een fout. */
body:is(.fi-panel-admin, .fi-panel-team) .vivi-teamnotities__uitleg {
    margin: 2px 0 12px;
    font-size: 12.5px;
    color: var(--vivi-tekst-2);
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-teamnotities__form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-teamnotities__labeltekst {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--vivi-tekst);
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-teamnotities__veld {
    width: 100%;
    min-height: 88px;
    padding: 10px 12px;
    border: 1px solid var(--vivi-lijn-fijn);
    border-radius: var(--vivi-radius-m);
    background: var(--vivi-vlak);
    color: var(--vivi-tekst);
    font: inherit;
    font-size: 14px;
    resize: vertical;
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-teamnotities__veld:focus {
    outline: none;
    border-color: var(--vivi-gold);
    box-shadow: var(--vivi-focusring);
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-teamnotities__veld[aria-invalid="true"] {
    border-color: var(--vivi-fout);
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-teamnotities__fout {
    font-size: 12.5px;
    color: var(--vivi-fout);
}

/* Tijd schrijven (x-vivi.team-tijd). Zelfde invoerschil als de notities; de
   drie velden staan op een telefoon onder elkaar en vanaf 640px naast
   elkaar, zodat tijd en datum niet breder worden dan hun inhoud. */
body:is(.fi-panel-admin, .fi-panel-team) .vivi-teamtijd__velden {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-teamtijd__veld {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-teamtijd__invoer {
    min-height: 44px;
    resize: none;
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-teamtijd__regel {
    display: flex;
    flex-direction: row; /* .vivi-brief__update zet column */
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-teamtijd__tekst {
    min-width: 0;
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-teamtijd__weg {
    flex: none;
    min-height: 24px;
    padding: 2px 4px;
    border: 0;
    background: none;
    color: var(--vivi-tekst-2);
    font: inherit;
    font-size: 12.5px;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-teamtijd__weg:hover {
    color: var(--vivi-tekst);
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-teamtijd__weg:focus-visible,
body:is(.fi-panel-admin, .fi-panel-team) .vivi-teamtijd__anker:focus-visible {
    outline: none;
    border-radius: 4px;
    box-shadow: var(--vivi-focusring);
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-teamtijd__anker {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Klopt je dag? (teampagina). Vlakken van het dashboard; elke klant een
   witte rij op het vlak, met de status en Bevestigen rechts. Op een telefoon
   zakt de actie onder de klant, zodat de naam nooit wordt afgeknepen. */
body:is(.fi-panel-admin, .fi-panel-team) .vivi-dagkaart {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-dagkaart__som {
    margin: 4px 0 0;
    font-size: 12.5px;
    color: var(--vivi-tekst-2);
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-dagkaart__rij {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    border-radius: var(--vivi-radius-m);
    background: var(--vivi-vlak);
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-dagkaart__rij + .vivi-dagkaart__rij {
    margin-top: 8px;
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-dagkaart__hoofd {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-dagkaart__tekst {
    min-width: 0;
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-dagkaart__klant {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--vivi-tekst);
    overflow-wrap: anywhere;
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-dagkaart__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 12px;
    margin: 2px 0 0;
    font-size: 12.5px;
    color: var(--vivi-tekst-2);
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-dagkaart__meta > span {
    white-space: nowrap;
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-dagkaart__actie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-dagkaart__blok {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding-top: 8px;
    border-top: 1px solid var(--vivi-lijn-fijn);
    font-size: 12.5px;
    color: var(--vivi-tekst);
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-dagkaart__blok > span {
    min-width: 0;
    overflow-wrap: anywhere;
}
/* Weghalen is een tikdoel: 44px hoog, de negatieve marge houdt de regel compact. */
body:is(.fi-panel-admin, .fi-panel-team) .vivi-dagkaart__blok > .vivi-teamtijd__weg {
    flex: none;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-block: -10px;
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-dagkaart__dagen {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-dagkaart__dagen .vivi-bdash__pil--licht {
    box-shadow: inset 0 0 0 1px var(--vivi-lijn-fijn);
}
/* De strook op het teamdashboard zolang de vraag openstaat. */
body:is(.fi-panel-admin, .fi-panel-team) .vivi-dagstrook {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    padding: 12px 16px;
    border-radius: var(--vivi-radius-frame);
    background: var(--vivi-vlak-2);
    color: var(--vivi-tekst);
    font-size: 14px;
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-dagstrook p {
    margin: 0;
    min-width: 0;
}

@media (min-width: 640px) {
    body:is(.fi-panel-admin, .fi-panel-team) .vivi-bdash__zoek {
        flex: 0 1 440px;
    }
    body:is(.fi-panel-admin, .fi-panel-team) .vivi-teamtijd__velden {
        grid-template-columns: 8rem 10rem minmax(0, 1fr);
    }
    body:is(.fi-panel-admin, .fi-panel-team) .vivi-dagkaart__velden {
        grid-template-columns: minmax(10rem, 14rem) 8rem minmax(0, 1fr);
    }
    body:is(.fi-panel-admin, .fi-panel-team) .vivi-dagkaart__hoofd {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
    }
    body:is(.fi-panel-admin, .fi-panel-team) .vivi-dagkaart__actie {
        flex: none;
        justify-content: flex-end;
    }
    body:is(.fi-panel-admin, .fi-panel-team) .vivi-groet__kop {
        font-size: 40px;
    }
}

@media (min-width: 1024px) {
    body:is(.fi-panel-admin, .fi-panel-team) .vivi-bdash__groet {
        margin-top: 18px;
    }
    body:is(.fi-panel-admin, .fi-panel-team) .vivi-groet__kop {
        font-size: 46px;
    }
    body:is(.fi-panel-admin, .fi-panel-team) .vivi-bdash__tegels {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 16px;
        margin-top: 16px;
    }
    body:is(.fi-panel-admin, .fi-panel-team) .vivi-bdash__tegel {
        min-height: 152px;
        padding: 18px 20px 16px;
    }
    body:is(.fi-panel-admin, .fi-panel-team) .vivi-bdash__tegelkop {
        font-size: 26px;
    }
    /* Breed genoeg voor één regel, zoals de pin: tegel 152 hoog, koppen gelijk. */
    body:is(.fi-panel-admin, .fi-panel-team) .vivi-bdash__tegelmeta {
        min-height: 0;
        -webkit-line-clamp: 1;
    }
    body:is(.fi-panel-admin, .fi-panel-team) .vivi-bdash__onder {
        grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
    }
    body:is(.fi-panel-admin, .fi-panel-team) .vivi-bdash__projecten {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    body:is(.fi-panel-admin, .fi-panel-team) .vivi-bdash__dagen {
        grid-auto-flow: row;
        grid-template-columns: repeat(7, minmax(0, 1fr));
        overflow: visible;
    }
}

/* ==== Klanten-werklijst (/klanten) ==== */
/* Eigenaar: sessie klanten-werklijst, 29-09-2026. Eén rij per klant op het
   model van .vivi-bdash__rij: kring, naam met een grijze regel eronder, de
   labels, en rechts de acties. De naam is de link naar de klanthub en zijn
   klikvlak (::after) beslaat de hele rij; labels en acties liggen erboven.
   Op de telefoon krijgt de naam de volle breedte en staan labels en acties
   eronder (naast de acties bleef er 68 tot 96px over en viel elke naam weg);
   vanaf 640 staan de acties rechts, vanaf 1024 alles op een regel. */
body:is(.fi-panel-admin, .fi-panel-team) .vivi-klw__balk {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--vivi-ruimte-s);
    margin-bottom: var(--vivi-ruimte-l);
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-klw__seg {
    max-width: 100%;
    overflow-x: auto;
}
/* De segmentpil uit 06 zet de tekst in de muted-kleur, en die haalt op wit
   geen AA. Hier tekst-2, en 44 hoog zodat hij ook op de telefoon te raken is. */
body:is(.fi-panel-admin, .fi-panel-team) .vivi-klw__seg .vivi-seg__item {
    display: inline-flex;
    align-items: center;
    gap: var(--vivi-ruimte-xs);
    min-height: var(--vivi-tik-min);
    padding: 0 var(--vivi-ruimte-m);
    color: var(--vivi-tekst-2);
    text-decoration: none;
    white-space: nowrap;
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-klw__seg .vivi-seg__item:hover,
body:is(.fi-panel-admin, .fi-panel-team) .vivi-klw__seg .vivi-seg__item.is-on {
    color: var(--vivi-tekst);
}
/* .vivi-seg span uit 04 is een oude voortgangsstreep (6 bij 15, crème vlak)
   en raakt elke span in een segmentpil; de teller is gewoon een getal. */
body:is(.fi-panel-admin, .fi-panel-team) .vivi-klw__seg .vivi-klw__teller {
    width: auto;
    height: auto;
    border-radius: 0;
    background: none;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

body:is(.fi-panel-admin, .fi-panel-team) .vivi-klw__lijst {
    margin: 0;
    padding: 0;
    list-style: none;
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-klw__rij {
    position: relative;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    grid-template-areas:
        "avatar tekst"
        ". labels"
        ". acties";
    align-items: center;
    column-gap: 12px;
    row-gap: var(--vivi-ruimte-2xs);
    padding: 10px 0;
    color: var(--vivi-tekst);
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-klw__rij + .vivi-klw__rij {
    border-top: 1px solid var(--vivi-lijn-fijn);
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-klw__avatar {
    grid-area: avatar;
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-klw__tekst {
    grid-area: tekst;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-klw__naam {
    font-size: 14px;
    font-weight: 500;
    color: var(--vivi-tekst);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-klw__naam::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--vivi-radius-binnen);
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-klw__naam:focus-visible {
    outline: none;
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-klw__naam:focus-visible::after {
    outline: 2px solid var(--vivi-tekst);
    outline-offset: -2px;
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-klw__rij:hover .vivi-klw__naam {
    text-decoration: underline;
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-klw__onder {
    font-size: 12.5px;
    color: var(--vivi-tekst-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-klw__labels {
    grid-area: labels;
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: var(--vivi-ruimte-2xs);
    min-width: 0;
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-klw__labels:empty {
    display: none;
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-klw__acties {
    grid-area: acties;
    justify-self: start;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: var(--vivi-ruimte-2xs);
}
/* Elke rij heeft zijn eigen laag voor de acties; een open menu valt over de
   rijen eronder en moet dan boven hun knoppen liggen, anders is het half
   onbereikbaar (gemeten: 3 van de 6 items bedekt). */
body:is(.fi-panel-admin, .fi-panel-team) .vivi-klw__acties:focus-within,
body:is(.fi-panel-admin, .fi-panel-team) .vivi-klw__acties:has([aria-expanded="true"]) {
    z-index: 2;
}
/* De hoofdactie: lichte pil van 44 hoog met een haarlijn, rechts op de rij. */
/* Het meekijkformulier (x-beheer.meekijk-start) doet niet mee in de opmaak:
   de knop erin ligt waar eerst de link lag. */
body:is(.fi-panel-admin, .fi-panel-team) .vivi-meekijk-start {
    display: contents;
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-klw__actie {
    display: inline-flex;
    align-items: center;
    gap: var(--vivi-ruimte-xs);
    min-height: var(--vivi-tik-min);
    padding: 0 var(--vivi-ruimte-m);
    border: 1px solid var(--vivi-lijn-fijn);
    border-radius: var(--vivi-radius-pil);
    background: var(--vivi-vlak);
    font: inherit;
    font-size: var(--vivi-tekst-m);
    font-weight: 500;
    color: var(--vivi-tekst);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-klw__actie:hover,
body:is(.fi-panel-admin, .fi-panel-team) .vivi-klw__actie[aria-expanded="true"] {
    background: var(--vivi-vlak-2);
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-klw__aantal {
    display: inline-grid;
    place-items: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 var(--vivi-ruimte-2xs);
    border-radius: var(--vivi-radius-rond);
    background: var(--vivi-vlak-2);
    font-size: var(--vivi-tekst-xs);
    font-variant-numeric: tabular-nums;
}

/* Kebab: spiegel van 11-portaal-componenten.css, die alleen onder
   body.fi-panel-portal staat. Zelfde maten, zodat het menu in beide panelen
   hetzelfde voelt. Ook de meekijkkeuze bij meer accounts gebruikt dit menu. */
body:is(.fi-panel-admin, .fi-panel-team) .vivi-kebab {
    position: relative;
    display: inline-flex;
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-kebab__knop {
    display: inline-grid;
    place-items: center;
    width: var(--vivi-tik-min);
    height: var(--vivi-tik-min);
    padding: 0;
    border: 0;
    border-radius: var(--vivi-radius-rond);
    background: transparent;
    color: var(--vivi-tekst);
    cursor: pointer;
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-kebab__knop:hover,
body:is(.fi-panel-admin, .fi-panel-team) .vivi-kebab__knop[aria-expanded="true"] {
    background: var(--vivi-vlak-2);
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-kebab__ico {
    width: 1.25rem;
    height: 1.25rem;
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-kebab__menu {
    position: absolute;
    top: calc(100% + var(--vivi-ruimte-2xs));
    right: 0;
    z-index: 20;
    display: grid;
    min-width: 12rem;
    max-width: min(18rem, calc(100vw - var(--vivi-ruimte-xl)));
    padding: var(--vivi-ruimte-2xs);
    border: 1px solid var(--vivi-lijn-fijn);
    border-radius: var(--vivi-radius-kaart);
    background: var(--vivi-vlak);
    box-shadow: var(--vivi-schaduw-zweef);
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-kebab__menu[hidden] {
    display: none;
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-kebab__item {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: var(--vivi-tik-min);
    padding: 0 var(--vivi-ruimte-m);
    border: 0;
    border-radius: var(--vivi-radius-binnen);
    background: transparent;
    font: inherit;
    font-size: var(--vivi-tekst-m);
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    color: var(--vivi-tekst);
    cursor: pointer;
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-kebab__item:hover,
body:is(.fi-panel-admin, .fi-panel-team) .vivi-kebab__item:focus-visible {
    background: var(--vivi-vlak-2);
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-kebab__item:focus-visible {
    outline-offset: -2px;
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-kebab__item--fout {
    color: var(--vivi-fout);
}

/* Op de telefoon staat de meekijkkeuze links; het menu klapt dan naar rechts
   uit, anders valt het links buiten beeld. */
body:is(.fi-panel-admin, .fi-panel-team) .vivi-klw__keuze .vivi-kebab__menu {
    right: auto;
    left: 0;
}

@media (min-width: 640px) {
    body:is(.fi-panel-admin, .fi-panel-team) .vivi-klw__rij {
        grid-template-columns: 44px minmax(0, 1fr) auto;
        grid-template-areas:
            "avatar tekst acties"
            ". labels labels";
    }
    body:is(.fi-panel-admin, .fi-panel-team) .vivi-klw__acties {
        justify-self: end;
    }
    body:is(.fi-panel-admin, .fi-panel-team) .vivi-klw__keuze .vivi-kebab__menu {
        right: 0;
        left: auto;
    }
}

/* Breed genoeg: de labels op dezelfde regel, tussen de naam en de acties.
   De actiekolom krijgt een vaste ondergrens (breder dan de breedste
   combinatie, "Meekijken 2" plus kebab = 173px), anders eindigen de labels
   per rij op een andere x. */
@media (min-width: 1024px) {
    body:is(.fi-panel-admin, .fi-panel-team) .vivi-klw__rij {
        grid-template-columns: 44px minmax(0, 1fr) auto minmax(11.5rem, auto);
        grid-template-areas: "avatar tekst labels acties";
        column-gap: 16px;
    }
    body:is(.fi-panel-admin, .fi-panel-team) .vivi-klw__labels {
        justify-content: flex-end;
    }
}

/* Teampagina Meekijken als klant (/team/meekijken): een klant per rij, rechts
   een knop per portaalaccount. */
body.fi-panel-team .vivi-meekijk__uitleg {
    margin: 0 0 var(--vivi-ruimte-m);
    color: var(--vivi-tekst-2);
}
body.fi-panel-team .vivi-meekijk__lijst {
    margin: 0;
    padding: 0;
    list-style: none;
}
body.fi-panel-team .vivi-meekijk__rij {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--vivi-ruimte-s);
    padding: var(--vivi-ruimte-s) 0;
    border-top: 1px solid var(--vivi-lijn-fijn);
}
body.fi-panel-team .vivi-meekijk__rij:first-child {
    border-top: 0;
}
body.fi-panel-team .vivi-meekijk__klant {
    font-weight: 500;
    min-width: 0;
}
body.fi-panel-team .vivi-meekijk__acties {
    display: flex;
    flex-wrap: wrap;
    gap: var(--vivi-ruimte-2xs);
}

/* Ruimte onder de inhoud voor de zwevende feedbackknop (2.7rem hoog, 1.1rem
   van de rand) plus lucht, zodat de laatste regel van een scherm bij
   uitscrollen boven de knop eindigt. Alleen waar de knop er is. Bewaakt in
   KaartEnZweefknopTest. */
body:is(.fi-panel-admin, .fi-panel-team):has(.vivi-fb:not([hidden])) .fi-main-ctn {
    padding-bottom: calc(2.7rem + 1.1rem + 1rem);
}

/* === Pinstudio begin === */
/* De Pinstudio (/admin/pinstudio): Pins voor één klant van beeld tot
   geplaatst. Alleen admin, dus alleen onder fi-panel-admin. Het blok trekt
   een paar gedeelde componenten hier op tot het niveau dat een werkscherm
   nodig heeft: de chips en het kerncijfer zijn in admin .68rem en
   muted (#8A7E6B haalt op wit geen 4,5:1), knoppen zijn 32 pixels hoog. In
   de studio tik je op een telefoon "Open in Pinterest" en vijf
   kopieerknoppen achter elkaar; daarom is hier alles minstens 44 pixels en
   leest elke bijtekst in tekst-2. */

body.fi-panel-admin .vivi-pst {
    display: flex;
    flex-direction: column;
    gap: var(--vivi-ruimte-xl);
    min-width: 0;
}
body.fi-panel-admin .vivi-pst [x-cloak] {
    display: none !important;
}

/* Bijtekst op AA: de gedeelde klassen lezen muted, dat haalt op wit en op
   cream-2 geen 4,5:1. */
body.fi-panel-admin .vivi-pst .vivi-meta,
body.fi-panel-admin .vivi-pst .vivi-stat__label,
body.fi-panel-admin .vivi-pst .vivi-section__uitleg,
body.fi-panel-admin .vivi-pst .vivi-kicker,
body.fi-panel-admin .vivi-pst .vivi-empty__tekst,
body.fi-panel-admin .vivi-pst .vivi-pill--stil {
    color: var(--vivi-tekst-2);
}
body.fi-panel-admin .vivi-pst .vivi-meta {
    line-height: 1.45;
}

/* Knoppen en velden op tikmaat, met een zichtbare focus voor wie met het
   toetsenbord door een wachtrij van veertig Pins loopt. */
body.fi-panel-admin .vivi-pst .vivi-btn {
    min-height: var(--vivi-tik-min);
    justify-content: center;
    text-decoration: none;
}
body.fi-panel-admin .vivi-pst .vivi-btn:focus-visible,
body.fi-panel-admin .vivi-pst .vivi-chip:focus-visible,
body.fi-panel-admin .vivi-pst .vivi-pst__composer-kop:focus-visible {
    outline: none;
    box-shadow: var(--vivi-focusring);
}
body.fi-panel-admin .vivi-pst .vivi-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}
body.fi-panel-admin .vivi-pst .vivi-input,
body.fi-panel-admin .vivi-pst .vivi-select {
    min-height: var(--vivi-tik-min);
}
body.fi-panel-admin .vivi-pst .vivi-pst__textarea {
    border-radius: var(--vivi-radius-binnen);
    line-height: 1.45;
    min-height: 6.5rem;
    resize: vertical;
}
body.fi-panel-admin .vivi-pst .vivi-pst__ico {
    width: 1.1rem;
    height: 1.1rem;
    flex: none;
}

/* Segment (klanten en tabs): chips op tikmaat, leesbaar, de teller als
   cijfer in tabelnotatie zodat 9 en 12 even breed ogen. */
body.fi-panel-admin .vivi-pst .vivi-segment {
    gap: var(--vivi-ruimte-xs);
}
body.fi-panel-admin .vivi-pst .vivi-chip {
    min-height: var(--vivi-tik-min);
    padding: 0 var(--vivi-ruimte-m);
    gap: var(--vivi-ruimte-xs);
    font-size: var(--vivi-tekst-s);
    color: var(--vivi-tekst-2);
    background: var(--vivi-vlak);
    cursor: pointer;
}
body.fi-panel-admin .vivi-pst .vivi-chip:hover {
    color: var(--vivi-tekst);
    border-color: var(--vivi-line-strong);
}
body.fi-panel-admin .vivi-pst .vivi-chip.vivi-chip--actief {
    color: var(--vivi-cream-2);
    background: var(--vivi-ink);
    border-color: var(--vivi-ink);
}
body.fi-panel-admin .vivi-pst .vivi-chip__aantal {
    opacity: 1;
    margin-left: 0;
    min-width: 1.5rem;
    padding: 0 var(--vivi-ruimte-2xs);
    border-radius: var(--vivi-radius-pil);
    background: var(--vivi-vlak-2);
    color: var(--vivi-tekst);
    font-variant-numeric: var(--vivi-cijfer-numeriek);
    text-align: center;
}
body.fi-panel-admin .vivi-pst .vivi-chip--actief .vivi-chip__aantal {
    background: var(--vivi-accent);
    color: var(--vivi-ink);
}

/* Kopstrook: voorraad links, vijf tellers rechts. Krap krijgt een rode
   rand links, zodat het ook zonder kleur te lezen is naast de badge. */
body.fi-panel-admin .vivi-pst .vivi-pst__kop {
    display: grid;
    gap: var(--vivi-ruimte-m);
    padding: var(--vivi-ruimte-m) var(--vivi-ruimte-l);
    background: var(--vivi-vlak);
    border: 1px solid var(--vivi-lijn-fijn);
    border-radius: var(--vivi-radius-kaart);
}
body.fi-panel-admin .vivi-pst .vivi-pst__kop.is-krap {
    border-left: 4px solid var(--vivi-fout);
}
body.fi-panel-admin .vivi-pst .vivi-pst__voorraad {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--vivi-ruimte-2xs);
}
body.fi-panel-admin .vivi-pst .vivi-pst__tellers {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--vivi-ruimte-xs);
}

/* Een teller is in zijn geheel een link: het cijfer draagt hem, ::after legt
   hem over de tegel. Spiegel van de portaalregel in 11, hier voor admin. */
body.fi-panel-admin .vivi-pst .vivi-stat--link {
    position: relative;
    padding: var(--vivi-ruimte-xs) var(--vivi-ruimte-s);
    border-radius: var(--vivi-radius-binnen);
    background: var(--vivi-vlak-2);
    transition: background-color .15s ease;
}
body.fi-panel-admin .vivi-pst .vivi-stat--link:hover {
    background: var(--vivi-accent-zacht);
}
body.fi-panel-admin .vivi-pst .vivi-stat--link:focus-within {
    box-shadow: var(--vivi-focusring);
}
body.fi-panel-admin .vivi-pst .vivi-stat--link .vivi-stat__value {
    display: inline-flex;
    align-items: center;
    gap: var(--vivi-ruimte-2xs);
    min-height: var(--vivi-tik-min);
    color: var(--vivi-tekst);
    text-decoration: none;
    font-variant-numeric: var(--vivi-cijfer-numeriek);
}
body.fi-panel-admin .vivi-pst .vivi-stat--link .vivi-stat__value:focus-visible {
    outline: none;
}
body.fi-panel-admin .vivi-pst .vivi-stat--link .vivi-stat__value::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}
body.fi-panel-admin .vivi-pst .vivi-stat__doorpijl {
    width: 1.1rem;
    height: 1.1rem;
    color: var(--vivi-tekst-2);
}
body.fi-panel-admin .vivi-pst .vivi-stat__label {
    font-size: var(--vivi-tekst-s);
    line-height: 1.3;
}

/* Uitslag van een bulkhandeling: blijft staan tot je hem sluit. */
body.fi-panel-admin .vivi-pst .vivi-pst__uitslag {
    display: flex;
    flex-direction: column;
    gap: var(--vivi-ruimte-s);
}
body.fi-panel-admin .vivi-pst .vivi-pst__uitslag-kop {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--vivi-ruimte-s);
}
body.fi-panel-admin .vivi-pst .vivi-pst__uitslag-lijst,
body.fi-panel-admin .vivi-pst .vivi-pst__pins,
body.fi-panel-admin .vivi-pst .vivi-pst__lijst,
body.fi-panel-admin .vivi-pst .vivi-pst__bestanden,
body.fi-panel-admin .vivi-pst .vivi-pst__fouten,
body.fi-panel-admin .vivi-pst .vivi-pst__dagen,
body.fi-panel-admin .vivi-pst .vivi-pst__slots {
    margin: 0;
    padding: 0;
    list-style: none;
}
body.fi-panel-admin .vivi-pst .vivi-pst__uitslag-lijst {
    display: flex;
    flex-direction: column;
}
body.fi-panel-admin .vivi-pst .vivi-pst__uitslag-rij {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--vivi-ruimte-xs) var(--vivi-ruimte-s);
    padding: var(--vivi-ruimte-xs) 0;
    border-top: 1px solid var(--vivi-lijn-fijn);
}
body.fi-panel-admin .vivi-pst .vivi-pst__uitslag-rij:first-child {
    border-top: 0;
}

/* Nu pinnen: het beeld in 2:3, zoals Pinterest het toont, met daaronder
   alles om hem in één keer te plaatsen. */
body.fi-panel-admin .vivi-pst .vivi-pst__pins {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--vivi-ruimte-l);
}
body.fi-panel-admin .vivi-pst .vivi-pst__pin {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    background: var(--vivi-vlak);
    border: 1px solid var(--vivi-lijn-fijn);
    border-radius: var(--vivi-radius-kaart);
}
body.fi-panel-admin .vivi-pst .vivi-pst__beeld {
    aspect-ratio: 2 / 3;
    background: var(--vivi-vlak-2);
}
body.fi-panel-admin .vivi-pst .vivi-pst__beeld img,
body.fi-panel-admin .vivi-pst .vivi-pst__duim img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
body.fi-panel-admin .vivi-pst .vivi-pst__pin-body {
    display: flex;
    flex-direction: column;
    gap: var(--vivi-ruimte-s);
    padding: var(--vivi-ruimte-m) var(--vivi-ruimte-l) var(--vivi-ruimte-l);
    min-width: 0;
}
body.fi-panel-admin .vivi-pst .vivi-pst__pin-titel {
    font-family: var(--vivi-serif);
    font-size: var(--vivi-tekst-l);
    font-weight: 600;
    line-height: 1.25;
    color: var(--vivi-tekst);
    overflow-wrap: anywhere;
    text-wrap: pretty;
}
/* Koppen in de studio breken evenwichtig: geen los woord op de laatste
   regel, ook niet bij een lange groepnaam op 375. */
body.fi-panel-admin .vivi-pst h2,
body.fi-panel-admin .vivi-pst h3 {
    text-wrap: balance;
}
body.fi-panel-admin .vivi-pst .vivi-pst__knoppen,
body.fi-panel-admin .vivi-pst .vivi-pst__kopieer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--vivi-ruimte-xs);
}
body.fi-panel-admin .vivi-pst .vivi-pst__geplaatst {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--vivi-ruimte-xs);
    padding-top: var(--vivi-ruimte-s);
    border-top: 1px solid var(--vivi-lijn-fijn);
}

/* Velden: label boven, teller rechts ernaast, fout eronder. */
body.fi-panel-admin .vivi-pst .vivi-pst__veld {
    display: flex;
    flex-direction: column;
    gap: var(--vivi-ruimte-2xs);
    min-width: 0;
}
body.fi-panel-admin .vivi-pst .vivi-pst__veldkop {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--vivi-ruimte-s);
}
body.fi-panel-admin .vivi-pst .vivi-pst__label {
    font-size: var(--vivi-tekst-s);
    font-weight: 600;
    color: var(--vivi-tekst);
}
body.fi-panel-admin .vivi-pst .vivi-pst__teller {
    font-size: var(--vivi-tekst-s);
    color: var(--vivi-tekst-2);
    font-variant-numeric: var(--vivi-cijfer-numeriek);
    white-space: nowrap;
}
body.fi-panel-admin .vivi-pst .vivi-pst__teller.is-te-lang {
    color: var(--vivi-fout);
    font-weight: 600;
}
body.fi-panel-admin .vivi-pst .vivi-pst__fout {
    margin: 0;
    font-size: var(--vivi-tekst-s);
    color: var(--vivi-fout);
}
body.fi-panel-admin .vivi-pst .vivi-pst__fouten {
    display: flex;
    flex-direction: column;
    gap: var(--vivi-ruimte-2xs);
}

/* Wachtrij: een balk voor de selectie, groepen per status, per Pin een
   kaart met de handelingen en een inklapbaar formulier. */
body.fi-panel-admin .vivi-pst .vivi-pst__selectiebalk {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--vivi-ruimte-s);
    padding: var(--vivi-ruimte-s) var(--vivi-ruimte-m);
    background: var(--vivi-vlak-2);
    border-radius: var(--vivi-radius-kaart);
}
body.fi-panel-admin .vivi-pst .vivi-pst__groep {
    scroll-margin-top: 5rem;
}
body.fi-panel-admin .vivi-pst .vivi-pst__lijst {
    display: flex;
    flex-direction: column;
    gap: var(--vivi-ruimte-s);
}
body.fi-panel-admin .vivi-pst .vivi-pst__item {
    display: flex;
    flex-direction: column;
    gap: var(--vivi-ruimte-s);
    min-width: 0;
    padding: var(--vivi-ruimte-m);
    background: var(--vivi-vlak);
    border: 1px solid var(--vivi-lijn-fijn);
    border-radius: var(--vivi-radius-kaart);
}
body.fi-panel-admin .vivi-pst .vivi-pst__item-kop {
    display: flex;
    align-items: flex-start;
    gap: var(--vivi-ruimte-s);
    min-width: 0;
}
body.fi-panel-admin .vivi-pst .vivi-pst__vink {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    margin: calc((var(--vivi-tik-min) - 1.25rem) / 2) 0;
    accent-color: var(--vivi-ink);
    cursor: pointer;
}
body.fi-panel-admin .vivi-pst .vivi-pst__duim {
    flex: none;
    display: block;
    width: 4rem;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    border-radius: var(--vivi-radius-binnen);
    background: var(--vivi-vlak-2);
}
body.fi-panel-admin .vivi-pst .vivi-pst__duim--klein {
    width: 2rem;
}
body.fi-panel-admin .vivi-pst .vivi-pst__item-tekst {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--vivi-ruimte-2xs);
    min-width: 0;
    overflow-wrap: anywhere;
}
body.fi-panel-admin .vivi-pst .vivi-pst__vraag {
    display: flex;
    flex-direction: column;
    gap: var(--vivi-ruimte-2xs);
    margin: var(--vivi-ruimte-2xs) 0 0;
    padding: var(--vivi-ruimte-xs) var(--vivi-ruimte-s);
    border-left: 3px solid var(--vivi-accent);
    border-radius: var(--vivi-radius-binnen);
    background: var(--vivi-accent-zacht);
    font-size: var(--vivi-tekst-m);
    color: var(--vivi-tekst);
}
body.fi-panel-admin .vivi-pst .vivi-pst__acties {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--vivi-ruimte-xs) var(--vivi-ruimte-s);
}
body.fi-panel-admin .vivi-pst .vivi-pst__verplaats {
    display: flex;
    flex-direction: column;
    gap: var(--vivi-ruimte-2xs);
    min-width: 0;
}
body.fi-panel-admin .vivi-pst .vivi-pst__verplaats-rij {
    display: flex;
    flex-wrap: wrap;
    gap: var(--vivi-ruimte-xs);
}
body.fi-panel-admin .vivi-pst .vivi-pst__verplaats-rij .vivi-input {
    width: auto;
    flex: 1 1 13rem;
    min-width: 0;
}
body.fi-panel-admin .vivi-pst .vivi-pst__composer {
    border-top: 1px solid var(--vivi-lijn-fijn);
    padding-top: var(--vivi-ruimte-xs);
}
body.fi-panel-admin .vivi-pst .vivi-pst__composer-kop {
    display: flex;
    align-items: center;
    gap: var(--vivi-ruimte-xs);
    min-height: var(--vivi-tik-min);
    font-size: var(--vivi-tekst-m);
    font-weight: 600;
    color: var(--vivi-tekst);
    cursor: pointer;
    list-style: none;
    border-radius: var(--vivi-radius-binnen);
}
body.fi-panel-admin .vivi-pst .vivi-pst__composer-kop::-webkit-details-marker {
    display: none;
}
body.fi-panel-admin .vivi-pst .vivi-pst__composer-kop::before {
    content: "+";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--vivi-radius-rond);
    background: var(--vivi-vlak-2);
    font-weight: 600;
}
body.fi-panel-admin .vivi-pst .vivi-pst__composer[open] > .vivi-pst__composer-kop::before {
    content: "\2212";
}
body.fi-panel-admin .vivi-pst .vivi-pst__composer-velden {
    display: grid;
    gap: var(--vivi-ruimte-m);
    padding-top: var(--vivi-ruimte-xs);
    max-width: 48rem;
}

/* Nieuw: standaarden voor de hele batch, dan de sleepzone. */
body.fi-panel-admin .vivi-pst .vivi-pst__nieuw {
    display: flex;
    flex-direction: column;
    gap: var(--vivi-ruimte-l);
}
body.fi-panel-admin .vivi-pst .vivi-pst__standaarden {
    display: flex;
    flex-direction: column;
    gap: var(--vivi-ruimte-m);
    margin: 0;
    padding: var(--vivi-ruimte-m) var(--vivi-ruimte-l) var(--vivi-ruimte-l);
    min-width: 0;
    background: var(--vivi-vlak);
    border: 1px solid var(--vivi-lijn-fijn);
    border-radius: var(--vivi-radius-kaart);
}
body.fi-panel-admin .vivi-pst .vivi-pst__standaarden > legend {
    padding: 0 var(--vivi-ruimte-2xs);
}
body.fi-panel-admin .vivi-pst .vivi-pst__zone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--vivi-ruimte-s);
    padding: var(--vivi-ruimte-xl) var(--vivi-ruimte-l);
    text-align: center;
    background: var(--vivi-vlak);
    border: 2px dashed var(--vivi-line-strong);
    border-radius: var(--vivi-radius-kaart);
    transition: background-color .15s ease, border-color .15s ease;
}
body.fi-panel-admin .vivi-pst .vivi-pst__zone.is-sleept {
    background: var(--vivi-accent-zacht);
    border-color: var(--vivi-accent);
}
body.fi-panel-admin .vivi-pst .vivi-pst__zone:focus-within .vivi-pst__kies {
    box-shadow: var(--vivi-focusring);
}
body.fi-panel-admin .vivi-pst .vivi-pst__zone-ico {
    width: 2rem;
    height: 2rem;
    color: var(--vivi-tekst-2);
}
body.fi-panel-admin .vivi-pst .vivi-pst__kies {
    cursor: pointer;
}
body.fi-panel-admin .vivi-pst .vivi-pst__bestanden {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--vivi-ruimte-xs);
}
body.fi-panel-admin .vivi-pst .vivi-pst__bestand {
    display: flex;
    align-items: center;
    gap: var(--vivi-ruimte-s);
    min-width: 0;
    padding: var(--vivi-ruimte-2xs) var(--vivi-ruimte-xs);
    background: var(--vivi-vlak);
    border: 1px solid var(--vivi-lijn-fijn);
    border-radius: var(--vivi-radius-binnen);
}
body.fi-panel-admin .vivi-pst .vivi-pst__bestand .vivi-pst__duim {
    width: 2.25rem;
}
body.fi-panel-admin .vivi-pst .vivi-pst__bestandnaam {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--vivi-tekst-s);
}

/* Planning: op een telefoon een lijst per week met alleen de dagen waar
   iets staat; vanaf 1280 een weekraster van zeven kolommen. */
body.fi-panel-admin .vivi-pst .vivi-pst__week {
    display: flex;
    flex-direction: column;
    gap: var(--vivi-ruimte-xs);
}
body.fi-panel-admin .vivi-pst .vivi-pst__dagen {
    display: flex;
    flex-direction: column;
    gap: var(--vivi-ruimte-xs);
}
body.fi-panel-admin .vivi-pst .vivi-pst__dag {
    display: flex;
    flex-direction: column;
    gap: var(--vivi-ruimte-xs);
    min-width: 0;
    padding: var(--vivi-ruimte-xs) var(--vivi-ruimte-s);
    background: var(--vivi-vlak);
    border: 1px solid var(--vivi-lijn-fijn);
    border-radius: var(--vivi-radius-binnen);
}
body.fi-panel-admin .vivi-pst .vivi-pst__dag.is-voorbij {
    background: var(--vivi-vlak-2);
}
body.fi-panel-admin .vivi-pst .vivi-pst__dag.is-buiten {
    background: transparent;
    border-style: dashed;
}
body.fi-panel-admin .vivi-pst .vivi-pst__dagkop {
    font-size: var(--vivi-tekst-s);
    font-weight: 600;
    color: var(--vivi-tekst);
}
body.fi-panel-admin .vivi-pst .vivi-pst__slots {
    display: flex;
    flex-direction: column;
    gap: var(--vivi-ruimte-2xs);
}
body.fi-panel-admin .vivi-pst .vivi-pst__slot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--vivi-ruimte-2xs) var(--vivi-ruimte-xs);
    min-width: 0;
    padding: var(--vivi-ruimte-2xs) var(--vivi-ruimte-xs);
    border-radius: var(--vivi-radius-binnen);
    font-size: var(--vivi-tekst-s);
}
body.fi-panel-admin .vivi-pst .vivi-pst__slot.is-bezet {
    background: var(--vivi-vlak-2);
}
body.fi-panel-admin .vivi-pst .vivi-pst__slot.is-vrij {
    border: 1px dashed var(--vivi-line-strong);
}
body.fi-panel-admin .vivi-pst .vivi-pst__tijd {
    flex: none;
    font-weight: 600;
    color: var(--vivi-tekst);
    font-variant-numeric: var(--vivi-cijfer-numeriek);
}
/* Twee regels titel per slot: genoeg om de Pin te herkennen in een smalle
   dagkolom. De volle titel staat in het title-attribuut. */
body.fi-panel-admin .vivi-pst .vivi-pst__slot-titel {
    flex: 1 1 6rem;
    min-width: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere;
    hyphens: auto;
    color: var(--vivi-tekst);
}

/* Lijsten zonder opsommingsteken in de delen van golf 2. */
body.fi-panel-admin .vivi-pst .vivi-pst__signalen,
body.fi-panel-admin .vivi-pst .vivi-pst__spreiding,
body.fi-panel-admin .vivi-pst .vivi-pst__redenen,
body.fi-panel-admin .vivi-pst .vivi-pst__keuzes,
body.fi-panel-admin .vivi-pst .vivi-pst__woorden {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Wachtrij compact: een rij per Pin met een kleine duim, titel, status en
   moment naast elkaar. Verplaatsen en Bewerken staan dicht als knop op
   dezelfde regel en nemen pas de volle breedte als ze open zijn. Gemeten
   tegen de T1-render: een kaart van 260 pixels wordt een rij van 70 tot 90. */
body.fi-panel-admin .vivi-pst .vivi-pst__wr {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--vivi-ruimte-xs) var(--vivi-ruimte-m);
    padding: var(--vivi-ruimte-xs) var(--vivi-ruimte-m);
}
body.fi-panel-admin .vivi-pst .vivi-pst__wr > .vivi-pst__item-kop {
    flex: 1 1 18rem;
    align-items: center;
}
body.fi-panel-admin .vivi-pst .vivi-pst__wr .vivi-pst__vink {
    margin: 0;
}
body.fi-panel-admin .vivi-pst .vivi-pst__wr .vivi-pst__duim {
    width: 2.25rem;
}
body.fi-panel-admin .vivi-pst .vivi-pst__wr .vivi-pst__item-tekst {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--vivi-ruimte-2xs) var(--vivi-ruimte-s);
}
body.fi-panel-admin .vivi-pst .vivi-pst__wr .vivi-pst__item-tekst > * {
    flex: 1 1 100%;
}
body.fi-panel-admin .vivi-pst .vivi-pst__wr .vivi-pst__item-tekst > h4 {
    flex: 0 1 auto;
    min-width: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}
body.fi-panel-admin .vivi-pst .vivi-pst__wr .vivi-pst__item-tekst > .vivi-rij {
    flex: 0 1 auto;
}
body.fi-panel-admin .vivi-pst .vivi-pst__wr > .vivi-pst__acties {
    flex: 0 1 auto;
    align-items: center;
}
body.fi-panel-admin .vivi-pst .vivi-pst__wr:has(.vivi-pst__verplaats[open]) > .vivi-pst__acties {
    flex-basis: 100%;
}
body.fi-panel-admin .vivi-pst .vivi-pst__wr > .vivi-pst__composer {
    flex: none;
    padding-top: 0;
    border-top: 0;
}
body.fi-panel-admin .vivi-pst .vivi-pst__wr > .vivi-pst__composer[open] {
    flex: 1 1 100%;
    padding-top: var(--vivi-ruimte-xs);
    border-top: 1px solid var(--vivi-lijn-fijn);
}

/* Verplaatsen: dicht een knop, open de datumkiezer eronder. */
body.fi-panel-admin .vivi-pst .vivi-pst__verplaats {
    flex: none;
}
body.fi-panel-admin .vivi-pst .vivi-pst__verplaats[open] {
    flex: 1 1 100%;
}
body.fi-panel-admin .vivi-pst .vivi-pst__verplaats > summary {
    list-style: none;
    cursor: pointer;
}
body.fi-panel-admin .vivi-pst .vivi-pst__verplaats > summary::-webkit-details-marker {
    display: none;
}
body.fi-panel-admin .vivi-pst .vivi-pst__verplaats[open] > summary {
    background: var(--vivi-vlak-2);
}
body.fi-panel-admin .vivi-pst .vivi-pst__verplaats-veld {
    display: flex;
    flex-direction: column;
    gap: var(--vivi-ruimte-2xs);
    padding-top: var(--vivi-ruimte-xs);
    max-width: 32rem;
}

/* Nu pinnen: de kopieerknoppen staan dicht onder Met de hand plaatsen. */
body.fi-panel-admin .vivi-pst .vivi-pst__hand {
    border-top: 1px solid var(--vivi-lijn-fijn);
    padding-top: var(--vivi-ruimte-2xs);
}
body.fi-panel-admin .vivi-pst .vivi-pst__hand[open] > .vivi-pst__composer-kop::before {
    content: "\2212";
}
body.fi-panel-admin .vivi-pst .vivi-pst__hand > .vivi-pst__kopieer {
    padding-top: var(--vivi-ruimte-xs);
}

/* Gezondheid bovenaan Nu pinnen: eerst de volgende stap, dan vier feiten
   als tegels die op een telefoon twee bij twee staan. */
body.fi-panel-admin .vivi-pst .vivi-pst__actie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--vivi-ruimte-xs) var(--vivi-ruimte-s);
    padding: var(--vivi-ruimte-s) var(--vivi-ruimte-m);
    background: var(--vivi-vlak-2);
    border-radius: var(--vivi-radius-kaart);
}
body.fi-panel-admin .vivi-pst .vivi-pst__actie > p {
    flex: 1 1 16rem;
    min-width: 0;
    margin: 0;
}
body.fi-panel-admin .vivi-pst .vivi-pst__feiten {
    display: flex;
    flex-wrap: wrap;
    gap: var(--vivi-ruimte-xs);
    margin: 0;
}
body.fi-panel-admin .vivi-pst .vivi-pst__feit {
    display: flex;
    flex: 1 1 calc(50% - var(--vivi-ruimte-xs));
    flex-direction: column;
    gap: var(--vivi-ruimte-2xs);
    min-width: 0;
    padding: var(--vivi-ruimte-xs) var(--vivi-ruimte-s);
    background: var(--vivi-vlak);
    border: 1px solid var(--vivi-lijn-fijn);
    border-radius: var(--vivi-radius-binnen);
}
body.fi-panel-admin .vivi-pst .vivi-pst__feit > dd {
    margin: 0;
    font-variant-numeric: var(--vivi-cijfer-numeriek);
}
body.fi-panel-admin .vivi-pst .vivi-pst__signalen {
    display: flex;
    flex-direction: column;
    gap: var(--vivi-ruimte-2xs);
}

/* Concepten afmaken: per concept twee knoppen en daaronder de uitkomst. */
body.fi-panel-admin .vivi-pst .vivi-pst__let-op {
    margin: 0;
    padding: var(--vivi-ruimte-xs) var(--vivi-ruimte-s);
    border-left: 3px solid var(--vivi-warn);
    border-radius: var(--vivi-radius-binnen);
    background: var(--vivi-vlak-2);
    font-size: var(--vivi-tekst-m);
    color: var(--vivi-tekst);
}
body.fi-panel-admin .vivi-pst .vivi-pst__afmaak .vivi-pst__duim {
    width: 3rem;
}
body.fi-panel-admin .vivi-pst .vivi-pst__paneel {
    display: flex;
    flex-direction: column;
    gap: var(--vivi-ruimte-s);
    min-width: 0;
    padding: var(--vivi-ruimte-s) var(--vivi-ruimte-m);
    background: var(--vivi-vlak-2);
    border-radius: var(--vivi-radius-binnen);
}
body.fi-panel-admin .vivi-pst .vivi-pst__paneel > p {
    margin: 0;
}
body.fi-panel-admin .vivi-pst .vivi-pst__paneel-kop {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--vivi-ruimte-xs) var(--vivi-ruimte-s);
}
body.fi-panel-admin .vivi-pst .vivi-pst__paneel-kop > :is(p, span, h3):not(.vivi-pill) {
    flex: 1 1 12rem;
    min-width: 0;
    margin: 0;
}
body.fi-panel-admin .vivi-pst .vivi-pst__spreiding,
body.fi-panel-admin .vivi-pst .vivi-pst__redenen {
    display: flex;
    flex-direction: column;
    gap: var(--vivi-ruimte-2xs);
}
body.fi-panel-admin .vivi-pst .vivi-pst__redenen > li {
    padding-left: var(--vivi-ruimte-s);
    border-left: 2px solid var(--vivi-line-strong);
}
/* De tekstvoorstellen naast elkaar waar het past, onder elkaar op een
   telefoon. Flex met een basis, geen raster (KaartEnZweefknopTest). */
body.fi-panel-admin .vivi-pst .vivi-pst__keuzes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--vivi-ruimte-s);
}
body.fi-panel-admin .vivi-pst .vivi-pst__keuze {
    display: flex;
    flex: 1 1 16rem;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--vivi-ruimte-2xs);
    min-width: 0;
    padding: var(--vivi-ruimte-s) var(--vivi-ruimte-m);
    background: var(--vivi-vlak);
    border: 1px solid var(--vivi-lijn-fijn);
    border-radius: var(--vivi-radius-binnen);
    overflow-wrap: anywhere;
}
body.fi-panel-admin .vivi-pst .vivi-pst__keuze > :is(p, h4) {
    margin: 0;
}
body.fi-panel-admin .vivi-pst .vivi-pst__keuze > .vivi-btn {
    margin-top: auto;
}

/* Zoekwoorden als labels met een kruisje; stijgers met een kiesknop. */
body.fi-panel-admin .vivi-pst .vivi-pst__woorden {
    display: flex;
    flex-wrap: wrap;
    gap: var(--vivi-ruimte-xs);
}
body.fi-panel-admin .vivi-pst .vivi-pst__woord {
    display: inline-flex;
    align-items: center;
    gap: var(--vivi-ruimte-xs);
    min-height: var(--vivi-tik-min);
    max-width: 100%;
    padding: 0 var(--vivi-ruimte-2xs) 0 var(--vivi-ruimte-s);
    background: var(--vivi-vlak);
    border: 1px solid var(--vivi-lijn-fijn);
    border-radius: var(--vivi-radius-pil);
    font-size: var(--vivi-tekst-s);
    color: var(--vivi-tekst);
    overflow-wrap: anywhere;
}
body.fi-panel-admin .vivi-pst .vivi-pst__woord.is-gekozen {
    background: var(--vivi-accent-zacht);
    border-color: var(--vivi-accent);
}
body.fi-panel-admin .vivi-pst .vivi-pst__woord-weg,
body.fi-panel-admin .vivi-pst .vivi-pst__woord-kies {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--vivi-tik-min);
    min-height: var(--vivi-tik-min);
    padding: 0 var(--vivi-ruimte-xs);
    border: 0;
    border-radius: var(--vivi-radius-pil);
    background: transparent;
    color: var(--vivi-tekst);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
body.fi-panel-admin .vivi-pst .vivi-pst__woord-weg:hover,
body.fi-panel-admin .vivi-pst .vivi-pst__woord-kies:hover {
    background: var(--vivi-vlak-2);
}
body.fi-panel-admin .vivi-pst .vivi-pst__woord-weg:focus-visible,
body.fi-panel-admin .vivi-pst .vivi-pst__woord-kies:focus-visible {
    outline: none;
    box-shadow: var(--vivi-focusring);
}
body.fi-panel-admin .vivi-pst .vivi-pst__woord-stand {
    padding-right: var(--vivi-ruimte-xs);
    color: var(--vivi-tekst-2);
}
body.fi-panel-admin .vivi-pst .vivi-pst__woord-veld {
    display: flex;
    flex-direction: column;
    gap: var(--vivi-ruimte-2xs);
    max-width: 32rem;
}

/* Bronnen: twee vakken om toe te voegen, naast elkaar vanaf 1024, en de
   bronnen als rij met stand, titel en een knop. */
body.fi-panel-admin .vivi-pst .vivi-pst__bron-vakken {
    display: flex;
    flex-wrap: wrap;
    gap: var(--vivi-ruimte-m);
}
body.fi-panel-admin .vivi-pst .vivi-pst__bron-vak {
    display: flex;
    flex: 1 1 100%;
    flex-direction: column;
    gap: var(--vivi-ruimte-s);
    min-width: 0;
    padding: var(--vivi-ruimte-m) var(--vivi-ruimte-l) var(--vivi-ruimte-l);
    background: var(--vivi-vlak);
    border: 1px solid var(--vivi-lijn-fijn);
    border-radius: var(--vivi-radius-kaart);
}
body.fi-panel-admin .vivi-pst .vivi-pst__bron-vak > :is(h3, p) {
    margin: 0;
}
body.fi-panel-admin .vivi-pst .vivi-pst__bestandveld {
    max-width: 100%;
    min-height: var(--vivi-tik-min);
    font-size: var(--vivi-tekst-s);
    color: var(--vivi-tekst);
}
body.fi-panel-admin .vivi-pst .vivi-pst__bron {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--vivi-ruimte-xs) var(--vivi-ruimte-m);
    padding: var(--vivi-ruimte-s) var(--vivi-ruimte-m);
}
body.fi-panel-admin .vivi-pst .vivi-pst__bron > .vivi-pst__item-tekst {
    flex: 1 1 18rem;
    align-items: flex-start;
}
body.fi-panel-admin .vivi-pst .vivi-pst__bron .vivi-pst__item-tekst > :is(h3, p) {
    margin: 0;
}
body.fi-panel-admin .vivi-pst .vivi-pst__bron-link {
    color: var(--vivi-tekst);
    text-decoration: underline;
    text-decoration-color: var(--vivi-line-strong);
    text-underline-offset: .2em;
}
body.fi-panel-admin .vivi-pst .vivi-pst__bron-link:hover {
    text-decoration-color: currentColor;
}

/* Op een telefoon staan de vijf tabs als drie en twee, zodat er geen tab
   alleen op een tweede regel valt. Met flex in plaats van een raster: de
   tabrij is geen kaartraster (KaartEnZweefknopTest). Een basis van 28
   procent laat er nooit vier op een rij; het label breekt niet, dus "Nu
   pinnen" met teller blijft een regel (gemeten 375: 113 + 102 + 96 plus
   twee keer de tussenruimte past in 343). */
@media (max-width: 479.98px) {
    body.fi-panel-admin .vivi-pst .vivi-pst__tabs .vivi-segment__item {
        flex: 1 1 28%;
        justify-content: center;
        padding-inline: var(--vivi-ruimte-s);
    }
    body.fi-panel-admin .vivi-pst .vivi-pst__tabs .vivi-segment__label {
        white-space: nowrap;
    }
}

/* Lopende tekst in de Pinstudio: geen los woord op de laatste regel. */
body.fi-panel-admin .vivi-pst :is(p, li, h2, h3, h4) {
    text-wrap: pretty;
}

@media (min-width: 640px) {
    body.fi-panel-admin .vivi-pst .vivi-pst__feit {
        flex-basis: 9rem;
    }
}

@media (min-width: 1024px) {
    body.fi-panel-admin .vivi-pst .vivi-pst__bron-vak {
        flex-basis: calc(50% - var(--vivi-ruimte-m));
    }
}

@media (max-width: 1279.98px) {
    body.fi-panel-admin .vivi-pst .vivi-pst__dag.is-leeg,
    body.fi-panel-admin .vivi-pst .vivi-pst__dag.is-buiten {
        display: none;
    }
}

@media (min-width: 640px) {
    body.fi-panel-admin .vivi-pst .vivi-pst__tellers {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    body.fi-panel-admin .vivi-pst .vivi-pst__pins,
    body.fi-panel-admin .vivi-pst .vivi-pst__bestanden {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    body.fi-panel-admin .vivi-pst .vivi-pst__geplaatst {
        align-items: flex-start;
    }
}

@media (min-width: 1024px) {
    body.fi-panel-admin .vivi-pst .vivi-pst__kop {
        grid-template-columns: minmax(12rem, auto) minmax(0, 1fr);
        align-items: center;
    }
    body.fi-panel-admin .vivi-pst .vivi-pst__tellers {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
    body.fi-panel-admin .vivi-pst .vivi-pst__bestanden {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1280px) {
    body.fi-panel-admin .vivi-pst .vivi-pst__pins {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    body.fi-panel-admin .vivi-pst .vivi-pst__dagen {
        display: grid;
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }
    body.fi-panel-admin .vivi-pst .vivi-pst__dag {
        min-height: 7rem;
    }
}

/* Nu pinnen in twee stroken, naar moodboardpin M8: een breed vlak met de Pins
   die nu geplaatst moeten worden en een smalle kolom met de gezondheid en de
   eerstvolgende momenten, de stap naar de planning als zwarte pil rechts
   onderaan. Onder 1280 px gestapeld in de volgorde van de opmaak. */
body.fi-panel-admin .vivi-pst .vivi-pst__nu {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--vivi-ruimte-xl);
    align-items: start;
}
body.fi-panel-admin .vivi-pst .vivi-pst__tijdlijn {
    display: flex;
    flex-direction: column;
    gap: var(--vivi-ruimte-2xs);
    margin: 0;
    padding: 0;
    list-style: none;
}
body.fi-panel-admin .vivi-pst .vivi-pst__komend-actie {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--vivi-ruimte-s);
}
/* In de smalle kolom viel "Europe/Amsterdam." alleen op de laatste regel (gemeten op 375 en 1440);
   pretty liet dat staan, balance verdeelt de korte uitleg en de slottitels over gelijke regels.
   Zelfde keuze als .vivi-social-posts .vivi-section__uitleg in 06-schermen.css. */
body.fi-panel-admin .vivi-pst .vivi-section__uitleg,
body.fi-panel-admin .vivi-pst .vivi-pst__slot-titel {
    text-wrap: balance;
}

@media (min-width: 1280px) {
    /* Het brede vlak staat vast links over alle rijen; de rest valt op volgorde
       in de smalle kolom, zodat een ontbrekend gezondheidsblok geen gat laat. */
    body.fi-panel-admin .vivi-pst .vivi-pst__nu {
        grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem);
        grid-template-rows: auto auto 1fr;
        column-gap: var(--vivi-ruimte-xl);
        row-gap: var(--vivi-ruimte-l);
    }
    body.fi-panel-admin .vivi-pst .vivi-pst__nu > * {
        grid-column: 2;
    }
    body.fi-panel-admin .vivi-pst .vivi-pst__nu > .vivi-pst__nu-hoofd {
        grid-column: 1;
        grid-row: 1 / span 3;
    }
    body.fi-panel-admin .vivi-pst .vivi-pst__nu .vivi-pst__pins {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
/* === Pinstudio eind === */

/* Strook "Vandaag" op /taken en /team (Livewire Dagritueel). Tot 22-10 had
   deze strook geen enkele regel opmaak: kop, budget en lege regel stonden als
   losse tekst boven de heldkaart, en de knop Vandaag op een rij was een kaal
   woord. Zelfde vlak en ritme als de dagkaart hierboven. */
body:is(.fi-panel-admin, .fi-panel-team) .vivi-vandaag {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
    padding: 16px;
    border-radius: var(--vivi-radius-kaart);
    background: var(--vivi-vlak);
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-vandaag--vol {
    box-shadow: inset 0 0 0 2px var(--vivi-warn);
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-vandaag__kop {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-vandaag__kop h2 {
    margin: 0;
    font-size: var(--vivi-kop-s);
    font-weight: 600;
    color: var(--vivi-tekst);
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-vandaag__budget {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--vivi-tekst-2);
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-vandaag__kop .vivi-vandaag__knop {
    margin-left: auto;
}
/* Op de telefoon staat de zwevende feedbackknop rechtsonder in de laan van
   x 334 tot 377 (bij 390). "Dag afsluiten" eindigde op 358 en lag bij het
   openen van /taken precies onder die knop (gemeten 22-10, y 786 tegen 788).
   Hier blijft hij 36px van de rechterrand van de strook, zodat er altijd
   lucht tussen beide zit. Alleen waar de feedbackknop er is. */
@media (max-width: 639.98px) {
    body:is(.fi-panel-admin, .fi-panel-team):has(.vivi-fb:not([hidden])) .vivi-vandaag__kop .vivi-vandaag__knop {
        margin-right: 36px;
    }
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-vandaag__melding {
    margin: 0;
    font-size: 12.5px;
    color: var(--vivi-tekst);
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-vandaag__slots,
body:is(.fi-panel-admin, .fi-panel-team) .vivi-vandaag__stapel ul {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-vandaag__slot,
body:is(.fi-panel-admin, .fi-panel-team) .vivi-vandaag__stapel-rij {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    padding: 10px 14px;
    border-radius: var(--vivi-radius-m);
    background: var(--vivi-cream);
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-vandaag__slot {
    box-shadow: inset 3px 0 0 var(--vivi-gold);
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-vandaag__slot-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 14rem;
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-vandaag__slot-body > .vivi-regel {
    font-size: 14px;
    font-weight: 500;
    color: var(--vivi-tekst);
    overflow-wrap: anywhere;
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-vandaag__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 12px;
    font-size: 12.5px;
    color: var(--vivi-tekst-2);
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-vandaag__leeg {
    padding: 10px 14px;
    border: 1px dashed var(--vivi-line-strong);
    border-radius: var(--vivi-radius-m);
    font-size: 13px;
    color: var(--vivi-tekst-2);
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-vandaag__stapel {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-vandaag__stapel h3 {
    margin: 4px 0 0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--vivi-tekst-2);
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-vandaag__knoppen {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-vandaag__knop,
body:is(.fi-panel-admin, .fi-panel-team) .vivi-checkout__keuze,
body:is(.fi-panel-admin, .fi-panel-team) .vivi-taken-rij__vandaag,
body:is(.fi-panel-admin, .fi-panel-team) .vivi-taken__herstelknop {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid var(--vivi-line-strong);
    border-radius: var(--vivi-radius-pil);
    background: var(--vivi-cream);
    font-size: 13px;
    font-weight: 600;
    color: var(--vivi-ink);
    cursor: pointer;
    white-space: nowrap;
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-vandaag__knop:hover,
body:is(.fi-panel-admin, .fi-panel-team) .vivi-checkout__keuze:hover,
body:is(.fi-panel-admin, .fi-panel-team) .vivi-taken-rij__vandaag:hover,
body:is(.fi-panel-admin, .fi-panel-team) .vivi-taken__herstelknop:hover {
    border-color: var(--vivi-gold);
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-vandaag__knop--primair {
    border-color: var(--vivi-gold);
    background: var(--vivi-gold);
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-vandaag__knop--primair:hover {
    background: var(--vivi-gold-press);
}
/* Op een rij staat Vandaag in de kaart onder de meta, zoals in de stapel;
   het rondje ernaast vinkt af, Vandaag kiest. Daarom een pil met tekst en
   geen tweede cirkel. Even laag als de stapelknoppen (36px). */
body:is(.fi-panel-admin, .fi-panel-team) .vivi-taken-rij__vandaag {
    flex: none;
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-checkout {
    flex-basis: 100%;
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-checkout__keuzes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-checkout__reden {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-checkout .vivi-veld {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12.5px;
    color: var(--vivi-tekst-2);
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-checkout .vivi-veld__invoer {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--vivi-line-strong);
    border-radius: var(--vivi-radius-s);
    background: var(--vivi-cream);
    font-size: 14px;
    color: var(--vivi-tekst);
}
body:is(.fi-panel-admin, .fi-panel-team) .vivi-checkout .vivi-veld__fout {
    margin: 0;
    font-size: 12.5px;
    color: var(--vivi-fout);
}
/* Herstelregel na afvinken, boven de layout. */
body:is(.fi-panel-admin, .fi-panel-team) .vivi-taken__herstel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin: 0 0 12px;
    padding: 8px 8px 8px 14px;
    border-radius: var(--vivi-radius-m);
    background: var(--vivi-vlak);
    font-size: 13px;
    color: var(--vivi-tekst);
}

/* Tabbalk op een telefoon: breekt af naar meer regels in plaats van opzij te
   schuiven. De render van PR #629 op 390 breed liet 3 van de 6 tabs van een
   project zien (Fases, Teamleden, Subprojecten); de rest was alleen met vegen
   te vinden. Geldt voor elke Filament-tabbalk in beheer en team. */
@media (max-width: 639.98px) {
    body:is(.fi-panel-admin, .fi-panel-team) .fi-tabs {
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 4px;
        overflow-x: visible;
    }
}

/* Instellingen: koppelingen per groep (KoppelingenRegister). */
body.fi-panel-admin .vivi-koppelingen { display: grid; gap: var(--vivi-ruimte-s); }
body.fi-panel-admin .vivi-koppelingen__kaart { display: grid; gap: var(--vivi-ruimte-s); align-content: start; }
body.fi-panel-admin .vivi-koppelingen__kaart { min-width: 0; }
body.fi-panel-admin .vivi-koppelingen__kaart .vivi-naam { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
body.fi-panel-admin .vivi-koppelingen__kaart .vivi-pill { flex: none; }
body.fi-panel-admin .vivi-koppelingen__kaart p { margin: 0; overflow-wrap: anywhere; }
body.fi-panel-admin .vivi-koppelingen__kaart summary { cursor: pointer; font-weight: 600; font-size: 13px; }
body.fi-panel-admin .vivi-koppelingen__kaart details p { margin-top: 6px; }

/* ==== Beheer: financieel ==== */
/* Eigenaar: lane financieel-spiegel. Het scherm Financiën in
   het beheerpaneel, na de herbouw op de boekhoudspiegel. Deze laag staat inline
   op elke beheerpagina: geen schermnamen met hoofdletter in commentaar, want
   HubDetailTest weigert die woorden op de klanthub.

   Waarom een eigen laag: 06-schermen is van Social en UX-0, 17-beheer van
   UI10. De bestaande .vivi-fin__-klassen (tabel, grafiek, noot, kop) blijven in
   06 staan en worden hier gelezen, niet overschreven. Hier staat alleen wat de
   herbouw nieuw nodig heeft. Alleen tokens uit 01, geen hexwaarden. */
body.fi-panel-admin .vivi-fin {
    display: flex;
    flex-direction: column;
}

/* Bovenbalk: weergavechips links, "stand per" eronder. */
body.fi-panel-admin .vivi-fin__balk {
    display: flex;
    flex-direction: column;
    gap: var(--vivi-ruimte-s);
}

body.fi-panel-admin .vivi-fin__stand {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--vivi-ruimte-xs);
    font-size: var(--vivi-tekst-s);
    color: var(--vivi-muted);
}

/* Kop met titel en bedrag of knop: mag op een telefoon onder elkaar. */
body.fi-panel-admin .vivi-fin .vivi-fin__kop {
    flex-wrap: wrap;
}

/* "Eerst dit": het blok dat aandacht vraagt krijgt een gouden rand links. */
body.fi-panel-admin .vivi-fin__aandacht {
    border-left: 3px solid var(--vivi-gold);
}

/* De kaart na "Eerst dit" krijgt dezelfde tussenruimte als de rest van het bord. */
body.fi-panel-admin .vivi-fin__aandacht + .vivi-fin__jaar {
    margin-top: var(--vivi-ruimte-xl);
}

/* Op een telefoon staat het label boven de tekst, niet los ernaast. */
@media (max-width: 639.98px) {
    body.fi-panel-admin .vivi-fin__aandacht .vivi-row {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--vivi-ruimte-xs);
    }
}

/* Binnen een kaart: geen eigen kaartpadding, dus zelf afstand tot de rand en
   tot de cijfers erboven. */
body.fi-panel-admin div.vivi-fin__aandacht {
    margin-top: var(--vivi-ruimte-m);
    padding-left: var(--vivi-ruimte-m);
}

/* Rubriek in Resultaat: uitklapbaar, de kop is de klikregel. */
body.fi-panel-admin .vivi-fin__rubriek > summary {
    list-style: none;
    cursor: pointer;
    margin-bottom: 0;
}

body.fi-panel-admin .vivi-fin__rubriek > summary::-webkit-details-marker {
    display: none;
}

body.fi-panel-admin .vivi-fin__rubriek > summary::before {
    content: "+";
    flex: none;
    width: 1rem;
    color: var(--vivi-muted);
}

body.fi-panel-admin .vivi-fin__rubriek[open] > summary::before {
    content: "−";
}

body.fi-panel-admin .vivi-fin__rubriekkop {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: var(--vivi-tekst-l);
    font-weight: 600;
    color: var(--vivi-ink);
}

body.fi-panel-admin .vivi-fin__staaf {
    shape-rendering: geometricPrecision;
}

/* Formulieren: label boven het veld, velden naast elkaar zolang het past. */
body.fi-panel-admin .vivi-fin__formulier {
    display: flex;
    flex-direction: column;
    gap: var(--vivi-ruimte-m);
    margin-top: var(--vivi-ruimte-m);
}

body.fi-panel-admin .vivi-fin__veld {
    display: flex;
    flex-direction: column;
    gap: var(--vivi-ruimte-2xs);
    min-width: 0;
    flex: 1 1 12rem;
}

/* In een formulier onder elkaar is 12rem een hoogte, geen breedte: het
   veld houdt dan zijn eigen hoogte. */
body.fi-panel-admin .vivi-fin__formulier > .vivi-fin__veld {
    flex: 0 0 auto;
}

/* De tweede regel van een rubriekkop: soort of klant, onder de titel. */
body.fi-panel-admin .vivi-fin__rubriekkop > .vivi-fin__subkop {
    display: block;
    margin-top: var(--vivi-ruimte-2xs);
    font-size: var(--vivi-tekst-s);
    font-weight: 400;
}

body.fi-panel-admin .vivi-fin__veldnaam {
    font-size: var(--vivi-tekst-s);
    font-weight: 600;
    color: var(--vivi-muted);
}

body.fi-panel-admin .vivi-fin form.vivi-rij {
    align-items: flex-end;
    margin-top: var(--vivi-ruimte-s);
}

/* Bankrekening: een regel met naam en saldo, dan het beginsaldo. */
body.fi-panel-admin .vivi-fin__bankrij {
    padding-block: var(--vivi-ruimte-m);
}

body.fi-panel-admin .vivi-fin__bankrij + .vivi-fin__bankrij {
    border-top: 1px solid var(--vivi-line);
}

/* Uitkomst van een import: één regel per bestand. */
body.fi-panel-admin .vivi-fin__uitkomst {
    margin: var(--vivi-ruimte-m) 0 0;
    padding: 0;
    list-style: none;
}

/* Bedragen onder elkaar: cijfers even breed, zodat komma's in één lijn staan. */
body.fi-panel-admin .vivi-fin__tabel td {
    font-variant-numeric: var(--vivi-cijfer-numeriek, tabular-nums);
}

body.fi-panel-admin .vivi-fin__tabel .vivi-select {
    min-width: 9rem;
}

body.fi-panel-admin .vivi-fin__tabel .vivi-fin__bronmeta {
    display: block;
}

/* Budgetmeter: realisatie tegen budget tot nu. De balk loopt tot 100%;
   wat erboven zit staat als getal ernaast, niet als balk die de kaart uit
   loopt. Kleur volgt de status: amber vanaf 90%, rood boven 100%. */
body.fi-panel-admin .vivi-fin__meter {
    display: block;
    height: var(--vivi-ruimte-xs);
    margin-top: var(--vivi-ruimte-xs);
    border-radius: var(--vivi-ruimte-2xs);
    background: var(--vivi-line);
    overflow: hidden;
}

body.fi-panel-admin .vivi-fin__meter > span {
    display: block;
    height: 100%;
    width: var(--vivi-fin-meter, 0%);
    background: var(--vivi-ok);
}

body.fi-panel-admin .vivi-fin__meter--let-op > span {
    background: var(--vivi-warn);
}

body.fi-panel-admin .vivi-fin__meter--over > span {
    background: var(--vivi-fout);
}

/* Budgetrooster: twaalf smalle invoervelden naast elkaar. De tabelwrap
   scrolt horizontaal. */
body.fi-panel-admin .vivi-fin__rooster .vivi-input {
    width: 5.5rem;
    min-width: 0;
    padding-inline: var(--vivi-ruimte-xs);
    text-align: right;
}

body.fi-panel-admin .vivi-fin__rooster th,
body.fi-panel-admin .vivi-fin__rooster td {
    padding-inline: var(--vivi-ruimte-2xs);
}

/* Tussenkop in een formulierblok: afstand tot de knoppen erboven. */
body.fi-panel-admin .vivi-fin__subkop {
    margin-top: var(--vivi-ruimte-l);
}


/* Verdeling bij toewijzen: afdeling, project, procent en een knop op een rij. */
body.fi-panel-admin .vivi-fin__verdeelrij {
    display: flex;
    flex-wrap: wrap;
    gap: var(--vivi-ruimte-s);
    align-items: flex-end;
    margin-top: var(--vivi-ruimte-s);
}

/* Tekstvelden krijgen de regelhoogte van de keuzelijsten ernaast; anders is
   een tekstveld 6px hoger en staat het met label en al scheef in de rij. */
body.fi-panel-admin .vivi-fin__verdeelrij input.vivi-input {
    line-height: 1.3;
}

body.fi-panel-admin .vivi-fin__verdeelrij .vivi-fin__veld--smal .vivi-input {
    width: 6rem;
}

/* Telefoon: de gedeelde tabelregel in 06 zet min-width 34rem, waardoor een
   tabel van vier kolommen al achter een scrollvak verdwijnt. Hier krimpt hij
   tot zijn inhoud; cellen breken niet, dus bredere tabellen scrollen heel.
   De grafiek schaalt mee met de viewBox, dus de maandlabels worden groter in
   grafiekeenheden, alleen elke tweede maand krijgt een label, en het
   laatste label mag over de rand van de grafiek in de kaartmarge vallen. */
@media (max-width: 639.98px) {
    body.fi-panel-admin .vivi-fin__tabel {
        min-width: 0;
    }

    body.fi-panel-admin .vivi-fin__tabel th,
    body.fi-panel-admin .vivi-fin__tabel td {
        padding-inline: var(--vivi-ruimte-s);
        white-space: nowrap;
    }

    body.fi-panel-admin .vivi-fin__grafiek {
        overflow: visible;
    }

    body.fi-panel-admin .vivi-fin__maandlabel {
        font-size: calc(var(--vivi-tekst-xs) * 1.6);
    }

    body.fi-panel-admin .vivi-fin__maandlabel:nth-of-type(odd) {
        display: none;
    }
}

/* Bonnen onderweg bij een project: een korte lijst zonder opsommingsteken. */
body.fi-panel-admin .vivi-fin__lijst {
    list-style: none;
    margin: var(--vivi-ruimte-s) 0 0;
    padding: 0;
    display: grid;
    gap: var(--vivi-ruimte-xs);
}

/* Balans in het register van het Pinterest-blok (partials/pinterest-cijfers):
   drie kerncijfers op een licht vlak, dan twee lijsten met rijen. De tegels
   staan op de telefoon onder elkaar en vanaf 640 naast elkaar, de lijsten
   vanaf 1024 naast elkaar. Alleen tokens; de fout houdt --vivi-fout. */
body.fi-panel-admin .vivi-fin__tegels {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--vivi-ruimte-s);
}
body.fi-panel-admin .vivi-fin__tegel {
    min-width: 0;
    padding: var(--vivi-ruimte-m);
    border-radius: var(--vivi-radius-kaart);
    background: var(--vivi-vlak-2);
}
body.fi-panel-admin .vivi-fin__tegel .vivi-stat__value {
    font-size: var(--vivi-cijfer-l);
    font-variant-numeric: tabular-nums;
}
body.fi-panel-admin .vivi-fin__tegel--fout .vivi-stat__value {
    color: var(--vivi-fout);
}
body.fi-panel-admin .vivi-fin__melding {
    margin: 0;
    padding: var(--vivi-ruimte-xs) var(--vivi-ruimte-s);
    border-left: 3px solid var(--vivi-fout);
    color: var(--vivi-fout);
    overflow-wrap: anywhere;
}
body.fi-panel-admin .vivi-fin__kolommen {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--vivi-ruimte-l);
}
body.fi-panel-admin .vivi-fin__rijen {
    margin: var(--vivi-ruimte-xs) 0 0;
    padding: 0;
    list-style: none;
}
body.fi-panel-admin .vivi-fin__rij {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--vivi-ruimte-s);
    padding: var(--vivi-ruimte-xs) 0;
    border-bottom: 1px solid var(--vivi-vlak-2);
}
body.fi-panel-admin .vivi-fin__rijtekst {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow-wrap: anywhere;
}
body.fi-panel-admin .vivi-fin__rijbedrag {
    flex: none;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
body.fi-panel-admin .vivi-fin__rij--totaal {
    font-weight: 600;
    border-bottom: 0;
    border-top: 2px solid var(--vivi-ink);
}
@media (min-width: 640px) {
    body.fi-panel-admin .vivi-fin__tegels {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (min-width: 1024px) {
    body.fi-panel-admin .vivi-fin__kolommen {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Projecten en subsidies (Schimmel). Per project een kop met de aanvragen
   eronder; de kop is zwaarder dan de regels, met lucht tussen de projecten. */
body.fi-panel-admin .vivi-psub__project + .vivi-psub__project {
    margin-top: var(--vivi-ruimte-l);
    padding-top: var(--vivi-ruimte-m);
    border-top: var(--vivi-lijn-fijn);
}
body.fi-panel-admin .vivi-psub__project:first-of-type {
    margin-top: var(--vivi-ruimte-m);
}
body.fi-panel-admin .vivi-psub__kop {
    margin: 0;
    font-size: var(--vivi-tekst-m);
    font-weight: 600;
}
body.fi-panel-admin .vivi-psub__project > .vivi-fin__noot {
    margin-top: var(--vivi-ruimte-xs);
}
body.fi-panel-admin .vivi-psub__aanvragen li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--vivi-ruimte-2xs) var(--vivi-ruimte-xs);
    font-size: var(--vivi-tekst-s);
}

/* Een subproject hangt onder zijn hoofdproject: ingesprongen, lichter, met
   een lijn ervoor, zodat de som in het hoofdproject leesbaar blijft. */
body.fi-panel-admin .vivi-psub__sub td {
    color: var(--vivi-tekst-2);
}
body.fi-panel-admin .vivi-psub__sub td.vivi-fin__regel {
    padding-left: var(--vivi-ruimte-l);
    background: linear-gradient(var(--vivi-line), var(--vivi-line)) no-repeat var(--vivi-ruimte-s) 0 / 1px 100%;
}
body.fi-panel-admin .vivi-psub__project--sub {
    margin-left: var(--vivi-ruimte-l);
}
body.fi-panel-admin .vivi-psub__project--sub .vivi-psub__kop {
    font-size: var(--vivi-tekst-s);
}

body.fi-panel-admin .vivi-psub__cijfers {
    margin-top: var(--vivi-ruimte-m);
}
body.fi-panel-admin .vivi-psub__keuze .vivi-btn {
    flex: none;
    white-space: nowrap;
}

/* Op de telefoon worden de tabellen kaartjes: elke cel een regel met het
   kolomlabel ervoor, zodat het tekort en de projectkeuze in beeld blijven. */
@media (max-width: 639.98px) {
    body.fi-panel-admin .vivi-psub__stapel thead {
        display: none;
    }
    body.fi-panel-admin .vivi-psub__stapel,
    body.fi-panel-admin .vivi-psub__stapel tbody,
    body.fi-panel-admin .vivi-psub__stapel tfoot,
    body.fi-panel-admin .vivi-psub__stapel tr {
        display: block;
        width: 100%;
    }
    body.fi-panel-admin .vivi-psub__stapel tr {
        padding: var(--vivi-ruimte-s) 0;
        border-bottom: var(--vivi-lijn-fijn);
    }
    body.fi-panel-admin .vivi-psub__stapel td,
    body.fi-panel-admin .vivi-psub__stapel th {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: var(--vivi-ruimte-s);
        padding: var(--vivi-ruimte-2xs) 0;
        border: 0;
        text-align: right;
    }
    body.fi-panel-admin .vivi-psub__stapel td::before,
    body.fi-panel-admin .vivi-psub__stapel th::before {
        content: attr(data-label);
        flex: none;
        color: var(--vivi-tekst-2);
        font-size: var(--vivi-tekst-xs);
        font-weight: 600;
        text-align: left;
    }
    body.fi-panel-admin .vivi-psub__stapel td.vivi-fin__regel {
        display: block;
        text-align: left;
        font-weight: 600;
    }
    body.fi-panel-admin .vivi-psub__stapel td.vivi-fin__regel::before {
        content: none;
    }
    body.fi-panel-admin .vivi-psub__stapel tr.vivi-psub__sub {
        padding-left: var(--vivi-ruimte-m);
    }
    body.fi-panel-admin .vivi-psub__stapel tr.vivi-psub__sub td.vivi-fin__regel {
        padding-left: 0;
        background: none;
    }
    body.fi-panel-admin .vivi-psub__project--sub {
        margin-left: var(--vivi-ruimte-m);
    }
    body.fi-panel-admin .vivi-psub__stapel td.vivi-psub__keuze {
        display: block;
        text-align: left;
    }
    body.fi-panel-admin .vivi-psub__stapel td.vivi-psub__keuze::before {
        display: block;
        margin-bottom: var(--vivi-ruimte-2xs);
    }
    body.fi-panel-admin .vivi-psub__stapel td.vivi-psub__keuze .vivi-rij {
        flex-wrap: nowrap;
    }
    body.fi-panel-admin .vivi-psub__stapel td.vivi-psub__keuze .vivi-select {
        flex: 1 1 auto;
        min-width: 0;
    }
}

/* ==== Team: founderformulier ==== */
/* Eigenaar: lane founderformulier-govuk. De merkintake op /team/vragenlijst
   volgens de formulierenskill (GOV.UK): een kolom van hoogstens 40rem, kop
   groot, velden op volle breedte, knoppen en keuzes minstens 44 px hoog en de
   focus altijd zichtbaar (F12). Alles hangt onder .ff, dus geen andere pagina
   merkt deze laag. Kleuren komen uit 01-tokens.css of uit Filament's grijs. */
.ff { max-width: 40rem; color: rgb(var(--gray-950)); font-size: var(--vivi-tekst-l); line-height: 1.55; }
.dark .ff { color: rgb(var(--gray-50)); }
.ff__top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.ff__terug { display: inline-flex; align-items: center; min-height: 44px; gap: .35rem; text-decoration: underline; text-underline-offset: 3px; }
.ff__terug::before { content: ""; width: .5rem; height: .5rem; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.ff__boven { margin: 0 0 .5rem; color: rgb(var(--gray-600)); font-size: var(--vivi-tekst-l); }
.dark .ff__boven { color: rgb(var(--gray-400)); }
.ff h1, .ff__kop { font-size: var(--vivi-kop-l); line-height: 1.2; font-weight: 700; margin: 0 0 1rem; letter-spacing: -.01em; }
.ff h2 { font-size: var(--vivi-kop-s); line-height: 1.3; font-weight: 700; margin: 2rem 0 .75rem; }
.ff p { margin: 0 0 1rem; }
/* Tekstlinks halen 4,5:1 op wit en op zand (--vivi-cream): 700 haalt 3,3 en 2,7, 800 op zand 4,0. 900 is de eerste stap die op allebei slaagt. */
.ff a { color: rgb(var(--primary-900)); }
.dark .ff a { color: rgb(var(--primary-400)); }
.ff fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.ff legend { padding: 0; }
.ff__hint { color: rgb(var(--gray-600)); margin: -.25rem 0 1.25rem; white-space: pre-line; }
.dark .ff__hint { color: rgb(var(--gray-400)); }
.ff__label { display: block; font-weight: 600; margin-bottom: .35rem; }
.ff__invoer, .ff__tekst, .ff__getal, .ff__bestand {
    display: block; width: 100%; border: 2px solid rgb(var(--gray-700)); border-radius: 0; background: rgb(255 255 255);
    color: rgb(var(--gray-950)); padding: .55rem .65rem; font: inherit; min-height: 44px;
}
.dark .ff__invoer, .dark .ff__tekst, .dark .ff__getal, .dark .ff__bestand { background: rgb(var(--gray-900)); color: rgb(var(--gray-50)); border-color: rgb(var(--gray-400)); }
.ff__getal { width: 6rem; }
.ff__getal--kort { width: 4rem; }
.ff__datum { display: flex; flex-wrap: wrap; gap: 1rem; }
.ff__bestand { padding: .5rem; border-style: dashed; }
.ff__keuzes { display: grid; gap: .5rem; margin-bottom: 1rem; }
.ff__keuze { display: flex; align-items: center; gap: .75rem; min-height: 44px; cursor: pointer; }
/* Vakjes en rondjes naar de GOV.UK-component: 40 px, rand van 2 px in de tekstkleur, gekozen is een dik
   vinkje of een dikke stip in dezelfde kleur. appearance:none haalt ook de achtergrond van de forms-plugin weg
   (die kleurt :checked met currentColor en een eigen plaatje). */
.ff__keuze input[type=checkbox], .ff__keuze input[type=radio] {
    appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 40px; height: 40px; margin: 0;
    border: 2px solid currentColor; border-radius: 0; background: transparent; color: rgb(var(--gray-950)); cursor: pointer;
    box-shadow: none; transition: box-shadow .1s;
}
.ff__keuze input[type=radio] { border-radius: 50%; }
.ff__keuze input[type=checkbox]:checked, .ff__keuze input[type=radio]:checked { background: transparent; background-image: none; border-color: currentColor; }
.ff__keuze input[type=checkbox]::before {
    content: ""; position: absolute; box-sizing: border-box; left: 7px; top: 8px; width: 23px; height: 12px;
    border: solid currentColor; border-width: 0 0 5px 5px; transform: rotate(-45deg); opacity: 0;
}
.ff__keuze input[type=radio]::before {
    content: ""; position: absolute; inset: 8px; border-radius: 50%; background: currentColor; opacity: 0;
}
.ff__keuze input:checked::before { opacity: 1; }
.ff__keuze:hover input[type=checkbox], .ff__keuze:hover input[type=radio] { box-shadow: 0 0 0 10px rgb(var(--gray-200)); }
.dark .ff__keuze input[type=checkbox], .dark .ff__keuze input[type=radio] { color: rgb(var(--gray-50)); }
.dark .ff__keuze:hover input[type=checkbox], .dark .ff__keuze:hover input[type=radio] { box-shadow: 0 0 0 10px rgb(var(--gray-700)); }
.ff__of { margin: .25rem 0 .5rem; }
.ff__polen { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; margin-bottom: 1rem; }
.ff__polen .ff__keuze { flex-direction: column; justify-content: flex-start; text-align: center; gap: .5rem; padding: .75rem .25rem; border: 2px solid rgb(var(--gray-300)); }
.ff__polen .ff__keuze:hover { border-color: rgb(var(--gray-600)); }
.ff__polen .ff__keuze:hover input { box-shadow: none; }
.ff__polen .ff__keuze:has(input:checked) { border-color: rgb(var(--gray-950)); background: color-mix(in srgb, var(--vivi-gold) 22%, white); }
.dark .ff__polen .ff__keuze { border-color: rgb(var(--gray-700)); }
.dark .ff__polen .ff__keuze:has(input:checked) { border-color: rgb(var(--gray-50)); background: rgb(var(--gray-800)); }
@media (max-width: 639.98px) {
    .ff h1, .ff__kop { font-size: var(--vivi-kop-m); }
    .ff__polen { grid-template-columns: 1fr; }
    .ff__polen .ff__keuze { flex-direction: row; text-align: left; border: 0; padding: 0; gap: .75rem; }
    .ff__polen .ff__keuze:has(input:checked) { background: transparent; }
    .ff__polen .ff__keuze:hover input { box-shadow: 0 0 0 10px rgb(var(--gray-200)); }
}
.ff__punten { display: grid; gap: 1.25rem; margin-bottom: 1rem; }
.ff__punt .ff__label { margin: 0 0 .15rem; }
/* Zonder JS de getalvelden, met JS (data-schuiven) de schuiven en het getal ernaast. */
.ff__punten:not([data-schuiven]) .ff__schuif, .ff__punten:not([data-schuiven]) .ff__waarde, .ff__punten[data-schuiven] .ff__getal { display: none; }
.ff__punt-rij { display: flex; align-items: center; gap: 1rem; }
.ff__waarde { flex: none; min-width: 3ch; text-align: right; font-size: var(--vivi-kop-m); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
/* Schuif: spoor van 6 px, gevuld tot de waarde (--vul zet het script), duim van 28 px zichtbaar in een raakvlak van 44 px. */
.ff__schuif {
    --vul: 0%; appearance: none; -webkit-appearance: none; flex: 1; min-width: 0; height: 44px; margin: 0; padding: 0; background: transparent; cursor: pointer; color: rgb(var(--gray-950));
}
.ff__schuif::-webkit-slider-runnable-track { height: 6px; background: linear-gradient(to right, currentColor var(--vul), rgb(var(--gray-300)) var(--vul)); }
.ff__schuif::-moz-range-track { height: 6px; background: linear-gradient(to right, currentColor var(--vul), rgb(var(--gray-300)) var(--vul)); }
.ff__schuif::-webkit-slider-thumb {
    -webkit-appearance: none; box-sizing: content-box; width: 28px; height: 28px; margin-top: -19px; border-radius: 50%;
    background: currentColor; background-clip: content-box; border: 8px solid transparent;
}
.ff__schuif::-moz-range-thumb { box-sizing: content-box; width: 28px; height: 28px; border-radius: 50%; background: currentColor; background-clip: content-box; border: 8px solid transparent; }
.dark .ff__schuif { color: rgb(var(--gray-50)); }
.dark .ff__schuif::-webkit-slider-runnable-track { background: linear-gradient(to right, currentColor var(--vul), rgb(var(--gray-700)) var(--vul)); }
.dark .ff__schuif::-moz-range-track { background: linear-gradient(to right, currentColor var(--vul), rgb(var(--gray-700)) var(--vul)); }
.ff__som { font-weight: 600; margin: 0 0 1rem; }
.ff__knoppen { display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; margin-top: 2rem; }
.ff__knop {
    display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: .6rem 1.25rem;
    background: rgb(var(--gray-950)); color: rgb(255 255 255); border: 0; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
    box-shadow: 0 2px 0 rgb(var(--gray-500));
}
.dark .ff__knop { background: rgb(var(--gray-50)); color: rgb(var(--gray-950)); }
.ff__knop--licht { background: rgb(var(--gray-200)); color: rgb(var(--gray-950)); }
.ff__link { background: none; border: 0; padding: 0; font: inherit; min-height: 44px; color: rgb(var(--primary-700)); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.dark .ff__link { color: rgb(var(--primary-400)); }
/* Focus: gouden rand met een donkere ring eromheen, zichtbaar op licht en donker. */
.ff a:focus-visible, .ff button:focus-visible, .ff input:focus-visible, .ff textarea:focus-visible, .ff .ff__terug:focus-visible {
    outline: 3px solid var(--vivi-gold); outline-offset: 0; box-shadow: 0 0 0 6px var(--vivi-ink);
}
.ff__fout { border-left: 5px solid var(--vivi-fout); padding-left: 1rem; }
.ff__foutmelding { color: var(--vivi-fout); font-weight: 700; margin: 0 0 .5rem; }
.ff__samenvatting { border: 5px solid var(--vivi-fout); padding: 1rem 1.25rem; margin-bottom: 1.5rem; }
.ff__samenvatting h2 { margin-top: 0; font-size: var(--vivi-kop-s); }
.ff__samenvatting a { color: var(--vivi-fout); font-weight: 700; }
.ff__spraak { margin-top: .5rem; }
.ff__spraak-stand { margin-top: .5rem; }
.ff__lijst { margin: 0; padding-left: 1.25rem; }
.ff__toelichting { margin: 0 0 .5rem; }
.ff__tweede-label { margin-top: 1.25rem; }
.ff__geen-marge { margin: 0; }
.ff h2.ff__geen-marge-boven { margin-top: 0; }
.ff__taken { list-style: none; margin: 0 0 1.5rem; padding: 0; border-top: 1px solid rgb(var(--gray-300)); }
.dark .ff__taken { border-color: rgb(var(--gray-700)); }
.ff__taak { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid rgb(var(--gray-300)); }
.dark .ff__taak { border-color: rgb(var(--gray-700)); }
.ff__taak a { display: inline-flex; align-items: center; min-height: 44px; }
.ff__status { flex: none; font-size: var(--vivi-tekst-l); font-weight: 600; padding: .15rem .55rem; background: rgb(var(--gray-200)); color: rgb(var(--gray-950)); }
.ff__status--bezig { background: color-mix(in srgb, var(--vivi-gold) 35%, white); }
.ff__status--klaar { background: transparent; padding-left: 0; padding-right: 0; }
.dark .ff__status { background: rgb(var(--gray-700)); color: rgb(var(--gray-50)); }
.dark .ff__status--klaar { background: transparent; }
.ff__overzicht { margin: 0 0 2rem; border-top: 1px solid rgb(var(--gray-300)); }
.dark .ff__overzicht { border-color: rgb(var(--gray-700)); }
.ff__rij { display: grid; grid-template-columns: 1fr; gap: .25rem; padding: .75rem 0; border-bottom: 1px solid rgb(var(--gray-300)); }
.dark .ff__rij { border-color: rgb(var(--gray-700)); }
.ff__rij dt { font-weight: 600; }
.ff__rij dd { margin: 0; white-space: pre-line; }
.ff__rij .ff__wijzig { margin: 0; }
.ff__rij .ff__wijzig a { display: inline-flex; align-items: center; min-height: 44px; }
.ff__leeg { color: rgb(var(--gray-600)); }
@media (min-width: 640px) {
    .ff__rij { grid-template-columns: 2fr 2fr auto; gap: 1.25rem; align-items: start; }
    /* De klikzone blijft 44px; de tekst staat op de eerste regel van de waarde. */
    .ff__rij .ff__wijzig a { margin-block: calc((1lh - 44px) / 2); }
}
.ff__verborgen { position: absolute !important; width: 1px !important; height: 1px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; }
.ff__paneel { border-left: 5px solid rgb(var(--gray-950)); padding: .75rem 1rem; margin: 1.5rem 0; }
.dark .ff__paneel { border-color: rgb(var(--gray-50)); }
/* Projectstarter: de balk loopt over de hele kaart (terug links, profiel
   rechts), de vragen blijven in de kolom van 40rem. Een kop breekt nooit af
   op één los woord. */
.ff__balk { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.ff--starter .ff__kop, .ff--starter h1 { text-wrap: balance; }

/* ==== Portaal-UI: social ==== */
/* Eigenaar: herontwerp portaal, bundel Social (22-10-2026, BUNDELS.md op de
   Drive). Het socialgebied: overzicht, wacht op akkoord, kalender, cijfers
   en kanalen. Regels: alles onder body.fi-panel-portal, alleen var(--vivi-*)
   uit 09 en 01, geen hexwaarde en geen nieuwe --vivi-*-definitie
   (TokensPortaalTest). De bouwstenen (staat, anker, meter, staattegel) staan
   in 11 en worden hier geschikt, niet opnieuw gemaakt.

   Deze laag is aangelegd in de basis-PR zodat de socialbundel een eigen
   bestand heeft en niet in 06 of 12 hoeft te schrijven. */

/* Een staat in een socialkaart staat op dezelfde regel als de kaarttitel. */
body.fi-panel-portal .vivi-social .vivi-staat {
    vertical-align: middle;
}

/* -- De kop: een verlopen koppeling als staat onder de tabbladen ----------- */
body.fi-panel-portal .vivi-social-kop__staat {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--vivi-ruimte-xs) var(--vivi-ruimte-m);
    margin: 0;
    min-width: 0;
}
body.fi-panel-portal .vivi-social-kop__staatlink {
    display: inline-flex;
    align-items: center;
    min-height: var(--vivi-tik-min);
    font-size: var(--vivi-tekst-s);
    color: var(--vivi-tekst);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* -- Overzicht: het raster ------------------------------------------------
   Herontwerp 22-10-2026. Links het anker, het zoekveld en de strook; rechts
   een smalle kolom met de wens en een cijfer. Naast elkaar vanaf 1024, de
   kolom 300px: zo houdt de strook vier kaarten op 1440 (pin 10: het donkere
   blok bovenaan, gelijke kaarten in een rij eronder). */
body.fi-panel-portal .vivi-social-ov {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--vivi-ruimte-xl);
    align-items: start;
    min-width: 0;
}
body.fi-panel-portal .vivi-social-ov__hoofd,
body.fi-panel-portal .vivi-social-ov__zij {
    display: flex;
    flex-direction: column;
    gap: var(--vivi-ruimte-l);
    min-width: 0;
}
@media (min-width: 640px) and (max-width: 1023.98px) {
    body.fi-panel-portal .vivi-social-ov__zij {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }
}
@media (min-width: 1024px) {
    body.fi-panel-portal .vivi-social-ov {
        grid-template-columns: minmax(0, 1fr) 300px;
    }
}

/* -- Het anker: een rij is duim, tekst, knoppen ---------------------------- */
body.fi-panel-portal .vivi-social-anker__rij {
    justify-content: flex-start;
}
body.fi-panel-portal .vivi-social-anker__rij .vivi-anker__tekst {
    flex: 1 1 auto;
}
body.fi-panel-portal .vivi-social-anker__rij .vivi-staat {
    align-self: flex-start;
}
body.fi-panel-portal .vivi-social-anker__duim {
    flex: none;
    width: 48px;
    height: 60px;
    border-radius: var(--vivi-radius-s);
    object-fit: cover;
}
body.fi-panel-portal .vivi-social-anker__duim--leeg {
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--vivi-tekst-op-donker) 10%, transparent);
    color: var(--vivi-tekst-2-op-donker);
}
body.fi-panel-portal .vivi-social-anker__duim--leeg svg {
    width: 20px;
    height: 20px;
}
body.fi-panel-portal .vivi-social-anker__knoppen {
    display: flex;
    flex: none;
    align-items: center;
    gap: var(--vivi-ruimte-m);
}
body.fi-panel-portal .vivi-social-anker__knoppen .vivi-anker__alles {
    display: inline-flex;
    align-items: center;
    min-height: var(--vivi-tik-min);
}
body.fi-panel-portal .vivi-social-anker .vivi-anker__regel {
    overflow-wrap: anywhere;
    text-wrap: pretty;
}
/* De titel is de weg naar het postdetail (daar vraag je een wijziging). */
body.fi-panel-portal .vivi-social-anker__titel {
    text-decoration: none;
}
body.fi-panel-portal .vivi-social-anker__titel:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}
body.fi-panel-portal .vivi-social-anker__titel:focus-visible {
    outline: none;
    border-radius: var(--vivi-radius-s);
    box-shadow: var(--vivi-focusring);
}
body.fi-panel-portal .vivi-social-anker__meer > summary {
    display: inline-flex;
    align-items: center;
    min-height: var(--vivi-tik-min);
    cursor: pointer;
    list-style: none;
}
body.fi-panel-portal .vivi-social-anker__meer > summary::-webkit-details-marker {
    display: none;
}
body.fi-panel-portal .vivi-social-anker__meer[open] > summary {
    display: none;
}
body.fi-panel-portal .vivi-social-anker__meer .vivi-anker__lijst {
    border-top: 1px solid color-mix(in srgb, var(--vivi-tekst-op-donker) 14%, transparent);
}
/* Op een telefoon schuiven de knoppen onder de tekst, op de lijn van de tekst. */
@media (max-width: 639.98px) {
    body.fi-panel-portal .vivi-social-anker__rij {
        flex-wrap: wrap;
        align-items: flex-start;
    }
    body.fi-panel-portal .vivi-social-anker__rij .vivi-anker__tekst {
        flex-basis: calc(100% - 48px - var(--vivi-ruimte-m));
    }
    body.fi-panel-portal .vivi-social-anker__knoppen {
        flex-wrap: wrap;
        margin-left: calc(48px + var(--vivi-ruimte-m));
    }
}

/* -- Het zoekveld staat op het canvas, dus een fijne rand ------------------ */
body.fi-panel-portal .vivi-social-ov .vivi-social-zoek {
    border: 1px solid var(--vivi-lijn-fijn);
}

/* -- Komende twee weken: gelijke beeldkaarten in een rij ------------------- */
body.fi-panel-portal .vivi-social-strook {
    display: flex;
    flex-direction: column;
    gap: var(--vivi-ruimte-m);
    min-width: 0;
}
body.fi-panel-portal .vivi-social-strook__kop {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--vivi-ruimte-xs) var(--vivi-ruimte-m);
}
body.fi-panel-portal .vivi-social-strook__titelkop {
    margin: 0;
    font-family: var(--vivi-type-display);
    font-size: var(--vivi-kop-s);
    font-weight: 500;
    letter-spacing: var(--vivi-type-display-spatie);
    line-height: 1.15;
    color: var(--vivi-tekst);
}
body.fi-panel-portal .vivi-social-strook__link {
    display: inline-flex;
    align-items: center;
    min-height: var(--vivi-tik-min);
    font-size: var(--vivi-tekst-s);
    color: var(--vivi-tekst);
    text-decoration: underline;
    text-underline-offset: 3px;
}
body.fi-panel-portal .vivi-social-strook__groep {
    display: flex;
    align-items: baseline;
    gap: var(--vivi-ruimte-xs);
    margin: var(--vivi-ruimte-s) 0 0;
    font-size: var(--vivi-tekst-m);
    font-weight: 500;
    color: var(--vivi-tekst);
}
body.fi-panel-portal .vivi-social-strook__aantal {
    font-size: var(--vivi-tekst-s);
    font-variant-numeric: var(--vivi-cijfer-numeriek);
    color: var(--vivi-tekst-2);
}
/* Op een telefoon een rij die zelf schuift (de pagina niet), vanaf 640 een
   raster van gelijke kaarten. */
body.fi-panel-portal .vivi-social-strook__raster {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 42%;
    gap: var(--vivi-ruimte-m);
    margin: 0;
    padding: 0 0 var(--vivi-ruimte-xs);
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
}
body.fi-panel-portal .vivi-social-strook__raster > li {
    min-width: 0;
    scroll-snap-align: start;
}
@media (min-width: 640px) {
    body.fi-panel-portal .vivi-social-strook__raster {
        grid-auto-flow: row;
        grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
        overflow-x: visible;
    }
}
body.fi-panel-portal .vivi-social-strook__kaart {
    display: flex;
    flex-direction: column;
    gap: var(--vivi-ruimte-xs);
    min-width: 0;
    height: 100%;
    color: var(--vivi-tekst);
    text-decoration: none;
    border-radius: var(--vivi-radius-kaart);
}
body.fi-panel-portal .vivi-social-strook__kaart:focus-visible {
    outline: none;
    box-shadow: var(--vivi-focusring);
}
body.fi-panel-portal .vivi-social-strook__beeld {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    border-radius: var(--vivi-radius-binnen);
    object-fit: cover;
    background: var(--vivi-vlak);
    transition: transform .15s ease;
}
body.fi-panel-portal .vivi-social-strook__kaart:hover .vivi-social-strook__beeld {
    transform: translateY(-1px);
}
body.fi-panel-portal .vivi-social-strook__beeld--leeg {
    display: grid;
    place-items: center;
    border: 1px solid var(--vivi-lijn-fijn);
    color: var(--vivi-tekst-2);
}
body.fi-panel-portal .vivi-social-strook__beeld--leeg svg {
    width: 24px;
    height: 24px;
}
body.fi-panel-portal .vivi-social-strook__meta {
    font-size: var(--vivi-tekst-s);
    color: var(--vivi-tekst-2);
    font-variant-numeric: var(--vivi-cijfer-numeriek);
}
body.fi-panel-portal .vivi-social-strook__titel {
    font-size: var(--vivi-tekst-m);
    font-weight: 500;
    line-height: 1.35;
    overflow-wrap: anywhere;
    text-wrap: pretty;
}
body.fi-panel-portal .vivi-social-strook__leeg {
    margin: 0;
    font-size: var(--vivi-tekst-m);
    color: var(--vivi-tekst-2);
    text-wrap: pretty;
}

/* -- De smalle kolom ------------------------------------------------------- */
body.fi-panel-portal .vivi-social-zijkaart {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--vivi-ruimte-s);
    min-width: 0;
    padding: var(--vivi-ruimte-l) var(--vivi-ruimte-l) var(--vivi-ruimte-xl);
    border-radius: var(--vivi-radius-kaart);
    background: var(--vivi-vlak);
    border: 1px solid var(--vivi-lijn-fijn);
}
body.fi-panel-portal .vivi-social-zijkaart__kop {
    margin: 0;
    font-family: var(--vivi-type-display);
    font-size: var(--vivi-kop-s);
    font-weight: 500;
    letter-spacing: var(--vivi-type-display-spatie);
    line-height: 1.15;
    color: var(--vivi-tekst);
}
body.fi-panel-portal .vivi-social-zijkaart__tekst {
    margin: 0 0 var(--vivi-ruimte-xs);
    font-size: var(--vivi-tekst-m);
    line-height: 1.45;
    color: var(--vivi-tekst-2);
    text-wrap: pretty;
}
/* Het getal groot en licht, zoals de cijfers op pin 10. */
body.fi-panel-portal .vivi-social-cijfertegel__getal {
    font-family: var(--vivi-type-display);
    font-size: var(--vivi-kop-l);
    font-weight: 300;
    line-height: 1.05;
    font-variant-numeric: var(--vivi-cijfer-numeriek);
    color: var(--vivi-tekst);
}

/* -- Pinterest: de koppeltegel bovenaan, op zijn eigen breedte ------------- */
body.fi-panel-portal .vivi-pin-koppeltegel {
    max-width: 28rem;
}

/* -- Ontwikkeling: reeksen per pijler en het storyboard keuren (23-10-2026) - */
body.fi-panel-portal .vivi-social-ontw__pijler {
    display: flex;
    flex-direction: column;
    gap: var(--vivi-ruimte-s);
    min-width: 0;
}
body.fi-panel-portal .vivi-social-ontw__reeksen {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--vivi-ruimte-m);
}
@media (min-width: 1024px) {
    body.fi-panel-portal .vivi-social-ontw__reeksen {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
body.fi-panel-portal .vivi-social-ontw__reeks {
    align-items: stretch;
}
body.fi-panel-portal .vivi-social-ontw__reekskop,
body.fi-panel-portal .vivi-social-sb__titel {
    margin: 0;
    font-family: var(--vivi-type-display);
    font-size: var(--vivi-kop-m);
    font-weight: 500;
    letter-spacing: var(--vivi-type-display-spatie);
    line-height: 1.15;
    color: var(--vivi-tekst);
    text-wrap: balance;
}
body.fi-panel-portal .vivi-social-ontw__feiten,
body.fi-panel-portal .vivi-social-sb__velden {
    display: flex;
    flex-wrap: wrap;
    gap: var(--vivi-ruimte-xs) var(--vivi-ruimte-l);
    margin: 0;
}
body.fi-panel-portal .vivi-social-ontw__feiten dt,
body.fi-panel-portal .vivi-social-sb__velden dt,
body.fi-panel-portal .vivi-social-ontw__subkop,
body.fi-panel-portal .vivi-social-sb__subkop,
body.fi-panel-portal .vivi-social-sb__label {
    margin: 0;
    font-family: var(--vivi-type-label);
    font-size: var(--vivi-tekst-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--vivi-tekst-2);
}
body.fi-panel-portal .vivi-social-ontw__feiten dd,
body.fi-panel-portal .vivi-social-sb__velden dd {
    margin: 0;
    font-size: var(--vivi-tekst-m);
    color: var(--vivi-tekst);
    overflow-wrap: anywhere;
}
body.fi-panel-portal .vivi-social-ontw__afleveringen {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}
body.fi-panel-portal .vivi-social-ontw__aflevering {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--vivi-ruimte-xs) var(--vivi-ruimte-s);
    padding: var(--vivi-ruimte-s) 0;
    border-top: 1px solid var(--vivi-lijn-fijn);
}
body.fi-panel-portal .vivi-social-ontw__afltitel {
    flex: 1 1 12rem;
    min-width: 0;
    font-size: var(--vivi-tekst-m);
    color: var(--vivi-tekst);
    overflow-wrap: anywhere;
}
body.fi-panel-portal .vivi-social-ontw__aflstaat {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--vivi-ruimte-xs);
}

/* Het storyboard: kop, frames op telefoonmaat, de beslissing onderaan. */
body.fi-panel-portal .vivi-social-sb__kop {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--vivi-ruimte-xs);
    min-width: 0;
}
body.fi-panel-portal .vivi-social-sb__terug {
    display: inline-flex;
    align-items: center;
    min-height: var(--vivi-tik-min);
    font-size: var(--vivi-tekst-s);
    color: var(--vivi-accent-tekst);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}
body.fi-panel-portal .vivi-social-sb__terug:focus-visible,
body.fi-panel-portal .vivi-social-sb__veld:focus-visible {
    outline: none;
    box-shadow: var(--vivi-focusring);
}
body.fi-panel-portal .vivi-social-sb__stand {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--vivi-ruimte-xs) var(--vivi-ruimte-s);
}
body.fi-panel-portal .vivi-social-sb__frames {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--vivi-ruimte-l);
    margin: 0;
    padding: 0;
    list-style: none;
}
@media (min-width: 640px) {
    body.fi-panel-portal .vivi-social-sb__frames {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (min-width: 1280px) {
    body.fi-panel-portal .vivi-social-sb__frames {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
body.fi-panel-portal .vivi-social-sb__frame {
    display: flex;
    flex-direction: column;
    gap: var(--vivi-ruimte-s);
    min-width: 0;
}
/* Zonder afbeelding een compacte tekstkaart: een leeg 9:16-vlak per frame
   duwde de beslissing op 1440 ver onder de vouw (gemeten 23-10). Het vlak
   komt pas terug als een frame een afbeelding heeft. */
body.fi-panel-portal .vivi-social-sb__frame--kaart {
    padding: var(--vivi-ruimte-m);
    border: 1px solid var(--vivi-lijn-fijn);
    border-radius: var(--vivi-radius-kaart);
    background: var(--vivi-vlak);
}
body.fi-panel-portal .vivi-social-sb__framekop {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--vivi-ruimte-xs) var(--vivi-ruimte-s);
    min-width: 0;
}
/* Het beeldvlak, alleen met afbeelding: 4:5 voor een post, 9:16 op
   telefoonbreedte voor een reel of story. */
body.fi-panel-portal .vivi-social-sb__beeld {
    width: 100%;
    aspect-ratio: 4 / 5;
    border-radius: var(--vivi-radius-frame);
    background: var(--vivi-vlak-donker);
    box-shadow: var(--vivi-schaduw-frame);
    overflow: hidden;
}
body.fi-panel-portal .vivi-social-sb__frames--staand .vivi-social-sb__beeld {
    aspect-ratio: 9 / 16;
    max-width: 22.5rem;
}
body.fi-panel-portal .vivi-social-sb__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
body.fi-panel-portal .vivi-social-sb__nr {
    font-family: var(--vivi-type-label);
    font-size: var(--vivi-tekst-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--vivi-tekst-2);
}
body.fi-panel-portal .vivi-social-sb__beschrijving {
    margin: 0;
    font-size: var(--vivi-tekst-m);
    font-weight: 500;
    line-height: 1.4;
    color: var(--vivi-tekst);
    overflow-wrap: anywhere;
}
body.fi-panel-portal .vivi-social-sb__velden {
    flex-direction: column;
}
body.fi-panel-portal .vivi-social-sb__reacties ul {
    display: flex;
    flex-direction: column;
    gap: var(--vivi-ruimte-xs);
    margin: var(--vivi-ruimte-xs) 0 0;
    padding: 0;
    list-style: none;
}
body.fi-panel-portal .vivi-social-sb__reacties p {
    margin: 0;
    font-size: var(--vivi-tekst-s);
    color: var(--vivi-tekst);
    overflow-wrap: anywhere;
}
body.fi-panel-portal .vivi-social-sb__reageer,
body.fi-panel-portal .vivi-social-sb__wijzig {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--vivi-ruimte-xs);
    width: 100%;
}
body.fi-panel-portal .vivi-social-sb__veld {
    width: 100%;
    min-height: var(--vivi-tik-min);
    padding: var(--vivi-ruimte-xs) var(--vivi-ruimte-s);
    border: 1px solid var(--vivi-lijn-fijn);
    border-radius: var(--vivi-radius-binnen);
    background: var(--vivi-vlak);
    color: var(--vivi-tekst);
    font-size: var(--vivi-tekst-m);
    resize: vertical;
}
body.fi-panel-portal .vivi-social-sb__fout {
    margin: 0;
    font-size: var(--vivi-tekst-s);
    color: var(--vivi-staat-actie);
}
body.fi-panel-portal .vivi-social-sb__besluit {
    align-items: stretch;
    max-width: 44rem;
}
body.fi-panel-portal .vivi-social-sb__knoppen {
    display: flex;
    flex-wrap: wrap;
    gap: var(--vivi-ruimte-s);
}

/* Beslisregel onder de kop (23-10): het akkoord boven de vouw, wijzigingen
   als ankerlink naar het beslisblok, waar de toelichting staat. */
body.fi-panel-portal .vivi-social-sb__beslisregel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--vivi-ruimte-s) var(--vivi-ruimte-m);
}
/* Tekstknop en ankerlink in dezelfde stille vorm als de terug-link. */
body.fi-panel-portal .vivi-social-sb__naar {
    display: inline-flex;
    align-items: center;
    min-height: var(--vivi-tik-min);
    padding: 0;
    border: 0;
    background: none;
    font-size: var(--vivi-tekst-s);
    color: var(--vivi-accent-tekst);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    cursor: pointer;
}
body.fi-panel-portal .vivi-social-sb__naar:focus-visible {
    outline: none;
    box-shadow: var(--vivi-focusring);
}
body.fi-panel-portal .vivi-social-sb [x-cloak] {
    display: none !important;
}
body.fi-panel-portal .vivi-social-sb__besluit {
    scroll-margin-top: var(--vivi-ruimte-l);
}

/* Met Ontwikkeling erbij staan er vijf tabbladen. Op een telefoon passen die
   niet op een regel zonder woorden te breken ("Ontwikkelin g", gemeten op 390,
   23-10). Dan twee rijen van drie en twee, die elk de breedte delen; woorden
   breken niet. Met vier tabbladen blijft de ene regel uit 15 staan. */
@media (max-width: 639.98px) {
    body.fi-panel-portal .vivi-social-kop .vivi-segment:has(> :nth-child(5)) {
        flex-wrap: wrap;
    }
    body.fi-panel-portal .vivi-social-kop .vivi-segment:has(> :nth-child(5)) .vivi-segment__item {
        flex: 1 1 30%;
    }
    body.fi-panel-portal .vivi-social-kop .vivi-segment:has(> :nth-child(5)) .vivi-segment__label {
        overflow-wrap: normal;
    }
}

/* ==== Portaal-UI: websitegebied ==== */
/* Eigenaar: herontwerp portaal (22-10-2026). Het websitedashboard en zijn
   tabbladen. Regels: alles onder body.fi-panel-portal, alleen var(--vivi-*)
   uit 09 en 01, geen hexwaarde en geen nieuwe --vivi-*-definitie
   (TokensPortaalTest). De bouwstenen (staat, anker, meter, staattegel) staan
   in 11; hier alleen hoe het websitegebied ze schikt.

   Opbouw volgens IA-BOOM op de Drive: tabs, kop met het domein, de
   staatstrook (Site, Wijzigingen, Formulieren, Domein), de hoofdkaart met de
   ene gouden knop en de ingeklapte uitleg, de onderdelen, de geschiedenis. */

/* ---- Staatstrook ------------------------------------------------- */
/* Vier gelijke vakjes in een lijn: label klein en grijs, de staat eronder.
   Mobiel twee bij twee, zodat elk woord op een regel past. Het vakje dat
   niet groen is valt op door zijn stip, niet door een eigen vlak: een
   gekleurd vakje zou met de gouden knop eronder om het oog vechten. */
body.fi-panel-portal .vivi-website-strook {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    margin: 0;
    padding: 0;
    list-style: none;
    border-radius: var(--vivi-radius-kaart);
    border: 1px solid var(--vivi-lijn-fijn);
    background: var(--vivi-lijn-fijn);
    overflow: hidden;
}
body.fi-panel-portal .vivi-website-strook__vak {
    display: flex;
    flex-direction: column;
    gap: var(--vivi-ruimte-xs);
    min-width: 0;
    padding: var(--vivi-ruimte-m) var(--vivi-ruimte-l);
    background: var(--vivi-vlak);
}
body.fi-panel-portal .vivi-website-strook__label {
    font-size: var(--vivi-tekst-s);
    color: var(--vivi-tekst-2);
}
body.fi-panel-portal .vivi-website-strook__vak .vivi-staat {
    font-size: var(--vivi-tekst-m);
    color: var(--vivi-tekst);
    white-space: normal;
    font-family: var(--vivi-type-tekst);
    font-variant-caps: normal;
    letter-spacing: 0;
    text-transform: none;
}
body.fi-panel-portal .vivi-website-strook__link {
    display: inline-flex;
    min-height: 24px;
    color: inherit;
    text-decoration: none;
}
body.fi-panel-portal .vivi-website-strook__link:hover .vivi-staat {
    text-decoration: underline;
    text-underline-offset: 3px;
}
body.fi-panel-portal .vivi-website-strook__link:focus-visible {
    outline: none;
    box-shadow: var(--vivi-focusring);
    border-radius: var(--vivi-radius-binnen);
}

/* ---- Hoofdkaart -------------------------------------------------- */
/* Sinds de uitleg in de kaart is ingeklapt, staat de kaart alleen: de
   kolom van 3fr naast 1fr uit 06 wordt een kolom. */
body.fi-panel-portal .vivi-website-kop {
    grid-template-columns: minmax(0, 1fr);
}
body.fi-panel-portal .vivi-website-hoofd {
    border-radius: var(--vivi-radius-kaart);
}

/* Zo werkt het: een regel met een pijltje, open met een klik. */
body.fi-panel-portal .vivi-website-stappen {
    display: block;
    margin-top: var(--vivi-ruimte-s);
    padding-top: var(--vivi-ruimte-m);
    border-top: 1px solid var(--vivi-lijn-fijn);
    border-radius: 0;
}
body.fi-panel-portal .vivi-website-stappen__kop {
    display: inline-flex;
    align-items: center;
    gap: var(--vivi-ruimte-xs);
    min-height: var(--vivi-tik-min);
    font-size: var(--vivi-tekst-m);
    font-weight: 500;
    color: var(--vivi-tekst);
    cursor: pointer;
    list-style: none;
}
body.fi-panel-portal .vivi-website-stappen__kop::-webkit-details-marker {
    display: none;
}
body.fi-panel-portal .vivi-website-stappen__kop::after {
    content: "";
    width: 7px;
    height: 7px;
    margin-left: var(--vivi-ruimte-xs);
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform .15s ease;
}
body.fi-panel-portal .vivi-website-stappen[open] .vivi-website-stappen__kop::after {
    transform: rotate(-135deg) translateY(-2px);
}
body.fi-panel-portal .vivi-website-stappen[open] > :not(summary) {
    margin-top: var(--vivi-ruimte-s);
}
body.fi-panel-portal .vivi-website-stappen__kop:focus-visible {
    outline: none;
    box-shadow: var(--vivi-focusring);
    border-radius: var(--vivi-radius-binnen);
}

/* ---- Onderdelen en geschiedenis ---------------------------------- */
body.fi-panel-portal .vivi-website-delen {
    border-radius: var(--vivi-radius-kaart);
}
body.fi-panel-portal .vivi-website-historie {
    display: flex;
    flex-direction: column;
    gap: var(--vivi-ruimte-l);
    scroll-margin-top: var(--vivi-ruimte-xl);
}
body.fi-panel-portal .vivi-website-historie__leeg {
    display: flex;
    flex-direction: column;
    gap: var(--vivi-ruimte-xs);
}
body.fi-panel-portal .vivi-website-historie__leeg .vivi-regel {
    color: var(--vivi-tekst);
}

@media (min-width: 640px) {
    body.fi-panel-portal .vivi-website-strook {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* ==================================================================
   Herontwerp bundel 2 (22-10-2026): de tabbladen onder Website in het
   patroon van Domeinen v4. Bovenaan een stand die alleen zegt wat
   aandacht vraagt, daaronder de feiten in een lijst. Radius: kaart 20
   (xl), rij 12 (m), teken 8 (s). Kleur alleen voor de toestand.
   ================================================================== */

/* ---- Stand: cirkel, kop in de displayletter, regel eronder ---------- */
body.fi-panel-portal .vivi-webstand {
    display: flex;
    flex-direction: column;
    gap: var(--vivi-ruimte-l);
    padding: var(--vivi-ruimte-xl);
    border-radius: var(--vivi-radius-xl);
}
body.fi-panel-portal .vivi-webstand--let-op {
    background: color-mix(in srgb, var(--vivi-warn) 7%, var(--vivi-vlak));
    border-color: color-mix(in srgb, var(--vivi-warn) 40%, transparent);
}
body.fi-panel-portal .vivi-webstand__kopregel { display: flex; align-items: center; gap: var(--vivi-ruimte-m); }
body.fi-panel-portal .vivi-webstand__icirkel {
    flex: none;
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: var(--vivi-radius-rond);
    background: var(--vivi-vlak-2);
    color: var(--vivi-tekst);
}
body.fi-panel-portal .vivi-webstand--let-op .vivi-webstand__icirkel { background: var(--vivi-warn); color: var(--vivi-vlak); }
body.fi-panel-portal .vivi-webstand__icoon { width: 1.5rem; height: 1.5rem; }
body.fi-panel-portal .vivi-webstand__tekst { display: flex; flex-direction: column; gap: var(--vivi-ruimte-2xs); min-width: 0; }
body.fi-panel-portal .vivi-webstand__kop {
    margin: 0;
    font-family: var(--vivi-type-display);
    font-size: var(--vivi-kop-m);
    font-weight: 400;
    letter-spacing: var(--vivi-type-display-spatie);
    line-height: 1.15;
    text-wrap: balance;
}
body.fi-panel-portal .vivi-webstand__sub { margin: 0; color: var(--vivi-tekst-2); text-wrap: pretty; }
body.fi-panel-portal .vivi-webstand__feiten {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--vivi-ruimte-xs) var(--vivi-ruimte-l);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--vivi-tekst-s);
    color: var(--vivi-tekst-2);
    font-variant-numeric: tabular-nums;
}
body.fi-panel-portal .vivi-webstand__feiten b { font-weight: 600; color: var(--vivi-tekst); }
body.fi-panel-portal .vivi-webstand__regel { margin: 0; }
body.fi-panel-portal .vivi-webstand__acties { display: flex; flex-wrap: wrap; gap: var(--vivi-ruimte-s); }

/* ---- Verlooplijn: deze periode als inktlijn met een zacht vlak, de
   vorige gestippeld. Geen kleur: het verschil zit in de streep. De as
   staat als tekst eronder, zodat hij op een telefoon niet krimpt. ---- */
body.fi-panel-portal .vivi-weblijn { display: flex; flex-direction: column; gap: var(--vivi-ruimte-xs); }
body.fi-panel-portal .vivi-weblijn__svg { display: block; width: 100%; height: 9rem; overflow: visible; }
body.fi-panel-portal .vivi-weblijn--klein .vivi-weblijn__svg { height: 4.5rem; }
body.fi-panel-portal .vivi-weblijn__grond { stroke: var(--vivi-lijn-fijn); stroke-width: 1; vector-effect: non-scaling-stroke; }
body.fi-panel-portal .vivi-weblijn__vlak { fill: color-mix(in srgb, var(--vivi-tekst) 7%, transparent); stroke: none; }
body.fi-panel-portal .vivi-weblijn__nu {
    fill: none;
    stroke: var(--vivi-tekst);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}
body.fi-panel-portal .vivi-weblijn__vorig {
    fill: none;
    stroke: var(--vivi-tekst-2);
    stroke-width: 1.5;
    stroke-dasharray: 4 4;
    vector-effect: non-scaling-stroke;
}
body.fi-panel-portal .vivi-weblijn__as {
    display: flex;
    justify-content: space-between;
    margin: 0;
    font-size: var(--vivi-tekst-s);
    color: var(--vivi-tekst-2);
    font-variant-numeric: tabular-nums;
}
body.fi-panel-portal .vivi-weblijn__legenda {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--vivi-ruimte-xs) var(--vivi-ruimte-l);
    margin: 0;
    font-size: var(--vivi-tekst-s);
    color: var(--vivi-tekst-2);
}
body.fi-panel-portal .vivi-weblijn__sleutel { display: inline-flex; align-items: center; gap: var(--vivi-ruimte-xs); }
body.fi-panel-portal .vivi-weblijn__sleutel::before {
    content: "";
    width: 1.25rem;
    border-top: 2px solid var(--vivi-tekst);
}
body.fi-panel-portal .vivi-weblijn__sleutel--vorig::before { border-top: 2px dashed var(--vivi-tekst-2); }

/* ---- Lijst: een kaart, rijen met haarlijnen, rij is link met pijl ---- */
body.fi-panel-portal .vivi-weblijst {
    display: flex;
    flex-direction: column;
    padding: var(--vivi-ruimte-l);
    border-radius: var(--vivi-radius-xl);
}
body.fi-panel-portal .vivi-weblijst__kop { margin: 0; font-size: var(--vivi-tekst-l); font-weight: 600; }
body.fi-panel-portal .vivi-weblijst__uitleg { margin: var(--vivi-ruimte-2xs) 0 var(--vivi-ruimte-s); font-size: var(--vivi-tekst-s); color: var(--vivi-tekst-2); }
body.fi-panel-portal .vivi-weblijst__rijen { margin: 0; padding: 0; list-style: none; }
body.fi-panel-portal .vivi-weblijst__rijen > li { border-top: 1px solid var(--vivi-lijn-fijn); }
body.fi-panel-portal .vivi-webrij {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(4rem, 8rem) 4.5rem 1.25rem;
    align-items: center;
    gap: var(--vivi-ruimte-m);
    min-height: var(--vivi-tik-min);
    margin: var(--vivi-ruimte-2xs) 0;
    padding: var(--vivi-ruimte-s);
    border-radius: var(--vivi-radius-m);
    color: inherit;
    text-decoration: none;
    transition: background-color .15s ease;
}
body.fi-panel-portal a.vivi-webrij:hover { background: var(--vivi-vlak-2); }
body.fi-panel-portal a.vivi-webrij:focus-visible { outline: 2px solid var(--vivi-tekst); outline-offset: 2px; }
body.fi-panel-portal .vivi-webrij__naam { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
body.fi-panel-portal .vivi-webrij__naam strong { font-weight: 500; overflow-wrap: anywhere; }
body.fi-panel-portal .vivi-webrij__meta { font-size: var(--vivi-tekst-s); color: var(--vivi-tekst-2); }
body.fi-panel-portal .vivi-webrij__getal { text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; }
body.fi-panel-portal .vivi-webrij__pijl { width: 1.25rem; height: 1.25rem; color: var(--vivi-tekst-2); transition: transform .15s ease; }
body.fi-panel-portal a.vivi-webrij:hover .vivi-webrij__pijl { transform: translateX(3px); color: var(--vivi-tekst); }
body.fi-panel-portal .vivi-webrij__teken {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--vivi-radius-s);
    background: var(--vivi-vlak-2);
}
body.fi-panel-portal .vivi-webrij__teken svg { width: 1.25rem; height: 1.25rem; }
body.fi-panel-portal .vivi-webrij--teken { grid-template-columns: 2.5rem minmax(0, 1fr) auto 1.25rem; }
body.fi-panel-portal .vivi-webrij--teken .vivi-webrij__getal { text-align: left; font-weight: 400; color: var(--vivi-tekst-2); }

/* "Alle": de rest van de lijst achter een eigen regel, dicht bij laden. */
body.fi-panel-portal .vivi-weblijst__meer { border-top: 1px solid var(--vivi-lijn-fijn); }
body.fi-panel-portal .vivi-weblijst__meer > summary {
    display: flex;
    align-items: center;
    gap: var(--vivi-ruimte-xs);
    min-height: var(--vivi-tik-min);
    padding: var(--vivi-ruimte-s);
    border-radius: var(--vivi-radius-m);
    font-weight: 500;
    cursor: pointer;
    list-style: none;
}
body.fi-panel-portal .vivi-weblijst__meer > summary::-webkit-details-marker { display: none; }
body.fi-panel-portal .vivi-weblijst__meer > summary:hover { background: var(--vivi-vlak-2); }
body.fi-panel-portal .vivi-weblijst__meer > summary:focus-visible { outline: 2px solid var(--vivi-tekst); outline-offset: 2px; }
body.fi-panel-portal .vivi-weblijst__meer-pijl { width: 1rem; height: 1rem; transition: transform .15s ease; }
body.fi-panel-portal .vivi-weblijst__meer[open] .vivi-weblijst__meer-pijl { transform: rotate(180deg); }

body.fi-panel-portal .vivi-weblijsten { display: grid; gap: var(--vivi-ruimte-l); }

/* ---- Groei: een advies is een rij met teken, reden en een knop ------- */
body.fi-panel-portal .vivi-webadvies {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--vivi-ruimte-m);
    margin: var(--vivi-ruimte-2xs) 0;
    padding: var(--vivi-ruimte-s);
    border-radius: var(--vivi-radius-m);
}
body.fi-panel-portal .vivi-webadvies__tekst { display: flex; flex-direction: column; gap: var(--vivi-ruimte-2xs); min-width: 0; }
body.fi-panel-portal .vivi-webadvies__titel { margin: 0; font-size: var(--vivi-tekst-l); font-weight: 600; }
body.fi-panel-portal .vivi-webadvies__reden { margin: 0; color: var(--vivi-tekst-2); text-wrap: pretty; }
body.fi-panel-portal .vivi-webadvies__actie { display: flex; flex-direction: column; align-items: flex-end; gap: var(--vivi-ruimte-xs); }
body.fi-panel-portal .vivi-webadvies__actie .vivi-btn { white-space: nowrap; }
body.fi-panel-portal .vivi-webadvies--rij .vivi-webadvies__titel { font-size: inherit; }
body.fi-panel-portal .vivi-webadvies__prijs { margin: 0; font-size: var(--vivi-tekst-s); font-weight: 500; font-variant-numeric: tabular-nums; }
body.fi-panel-portal .vivi-webgroep + .vivi-webgroep { margin-top: var(--vivi-ruimte-l); }
body.fi-panel-portal .vivi-webgroep__kop { margin: var(--vivi-ruimte-s) 0 0; font-size: var(--vivi-tekst-s); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--vivi-tekst-2); }
body.fi-panel-portal .vivi-webgroep__uitleg { margin: var(--vivi-ruimte-2xs) 0 var(--vivi-ruimte-xs); font-size: var(--vivi-tekst-s); color: var(--vivi-tekst-2); }

/* ---- Documenten: de staat, de openbare link en de kopieerknop -------- */
body.fi-panel-portal .vivi-weblink { display: flex; flex-direction: column; align-items: flex-start; gap: var(--vivi-ruimte-s); }
body.fi-panel-portal .vivi-weblink__veld {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--vivi-ruimte-s);
    width: 100%;
    padding: var(--vivi-ruimte-xs) var(--vivi-ruimte-xs) var(--vivi-ruimte-xs) var(--vivi-ruimte-m);
    border: 1px solid var(--vivi-lijn-fijn);
    border-radius: var(--vivi-radius-m);
    background: var(--vivi-vlak);
}
body.fi-panel-portal .vivi-weblink__label { font-size: var(--vivi-tekst-s); color: var(--vivi-tekst-2); }
body.fi-panel-portal .vivi-weblink__url { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; color: inherit; }
body.fi-panel-portal .vivi-weblink__geen { margin: 0; font-size: var(--vivi-tekst-s); color: var(--vivi-tekst-2); }
body.fi-panel-portal .vivi-webrij--document { grid-template-columns: minmax(0, 1fr) 1.25rem; }

/* ---- Instellingen: het formulier onder de stand ----------------------- */
body.fi-panel-portal .vivi-webform { padding: var(--vivi-ruimte-l); border-radius: var(--vivi-radius-xl); }

/* ---- Web content: de vaste opslaanbalk onderaan ----------------------- */
body.fi-panel-portal .vivi-webcms-balk {
    position: sticky;
    top: var(--vivi-ruimte-m);
    z-index: 10;
    display: flex;
    justify-content: flex-end;
    pointer-events: none;
}
body.fi-panel-portal .vivi-webcms-balk > .vivi-card {
    pointer-events: auto;
    padding: var(--vivi-ruimte-s) var(--vivi-ruimte-m);
}
body.fi-panel-portal .vivi-webcms-balk__kort { display: none; }

/* Telefoon (ronde 2, 22-10): geen losse kaart onder de kop maar een smalle
   balk onderin, in de baan van de Lois-knop (56px hoog, 16px van de rand) en
   links ervan met 12px lucht, zodat de knop vrij blijft. De bestaande
   padding-bottom van .fi-main-ctn (16-portaal-mobiel) houdt de laatste regel
   al boven die baan. */
@media (max-width: 639.98px) {
    body.fi-panel-portal .vivi-webcms-balk {
        position: fixed;
        top: auto;
        left: calc(16px + env(safe-area-inset-left, 0px));
        right: calc(16px + 56px + 12px + env(safe-area-inset-right, 0px));
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        z-index: 39;
        justify-content: stretch;
    }
    body.fi-panel-portal .vivi-webcms-balk > .vivi-card {
        flex: 1;
        min-height: 56px;
        flex-wrap: nowrap;
        padding: var(--vivi-ruimte-2xs);
        border-radius: var(--vivi-radius-xl);
        box-shadow: var(--vivi-schaduw-zweef);
    }
    body.fi-panel-portal .vivi-webcms-balk > .vivi-card > .vivi-meta { display: none; }
    body.fi-panel-portal .vivi-webcms-balk > .vivi-card > .vivi-btn { flex: 1; justify-content: center; }
    body.fi-panel-portal .vivi-webcms-balk__lang { display: none; }
    body.fi-panel-portal .vivi-webcms-balk__kort { display: inline; }
}

/* ---- Beweging: de kaarten komen op, niets anders beweegt ------------- */
@keyframes vivi-web-op { from { opacity: 0; transform: translateY(10px); } }
body.fi-panel-portal :is(.vivi-webstand, .vivi-weblijst) { animation: vivi-web-op .5s cubic-bezier(.2, .7, .2, 1) both; }
body.fi-panel-portal .vivi-weblijst { animation-delay: .08s; }
@media (prefers-reduced-motion: reduce) {
    body.fi-panel-portal :is(.vivi-webstand, .vivi-weblijst) { animation: none; }
    body.fi-panel-portal :is(.vivi-webrij, .vivi-webrij__pijl, .vivi-weblijst__meer-pijl) { transition: none; }
}

@media (min-width: 1024px) {
    body.fi-panel-portal .vivi-weblijsten--twee { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 639.98px) {
    body.fi-panel-portal .vivi-webstand { padding: var(--vivi-ruimte-m); gap: var(--vivi-ruimte-m); }
    body.fi-panel-portal .vivi-webstand__icirkel { width: 2.5rem; height: 2.5rem; }
    body.fi-panel-portal .vivi-webstand__icoon { width: 1.25rem; height: 1.25rem; }
    body.fi-panel-portal .vivi-webstand__kop { font-size: var(--vivi-kop-s); }
    body.fi-panel-portal .vivi-weblijn__svg { height: 7rem; }
    body.fi-panel-portal .vivi-weblijst { padding: var(--vivi-ruimte-m); }
    body.fi-panel-portal .vivi-webrij {
        grid-template-columns: minmax(0, 1fr) auto 1.25rem;
        row-gap: var(--vivi-ruimte-xs);
        padding: var(--vivi-ruimte-s) var(--vivi-ruimte-2xs);
    }
    body.fi-panel-portal .vivi-webrij > .vivi-meter { grid-column: 1 / -1; grid-row: 2; }
    body.fi-panel-portal .vivi-webrij--teken { grid-template-columns: 2.25rem minmax(0, 1fr) 1.25rem; }
    body.fi-panel-portal .vivi-webrij--teken .vivi-webrij__teken { width: 2.25rem; height: 2.25rem; grid-row: 1 / span 2; }
    body.fi-panel-portal .vivi-webrij--teken .vivi-webrij__getal { grid-column: 2; grid-row: 2; }
    body.fi-panel-portal .vivi-webrij--teken .vivi-webrij__pijl { grid-column: 3; grid-row: 1; }
    body.fi-panel-portal .vivi-webadvies { grid-template-columns: 2.25rem minmax(0, 1fr); align-items: start; padding: var(--vivi-ruimte-s) var(--vivi-ruimte-2xs); }
    body.fi-panel-portal .vivi-webadvies__actie { grid-column: 2; align-items: stretch; }
    body.fi-panel-portal .vivi-webform { padding: var(--vivi-ruimte-m); }
    body.fi-panel-portal .vivi-weblink__veld { grid-template-columns: minmax(0, 1fr) auto; padding-left: var(--vivi-ruimte-s); }
    body.fi-panel-portal .vivi-weblink__label { grid-column: 1 / -1; }
    body.fi-panel-portal .vivi-webrij--document { grid-template-columns: minmax(0, 1fr) 1.25rem; }
}

/* ==== Portaal-UI: media en events ==== */
/* Eigenaar: herontwerp portaal, bundel Media en events (22-10-2026,
   BUNDELS.md op de Drive). Mediabank, evenementen, programmering en lineup.
   Regels: alles onder body.fi-panel-portal, alleen var(--vivi-*) uit 09 en
   01, geen hexwaarde en geen nieuwe --vivi-*-definitie (TokensPortaalTest).
   De bouwstenen (staat, anker, meter, staattegel) staan in 11.

   Deze laag is aangelegd in de basis-PR zodat de bundel een eigen bestand
   heeft en niet in 06 hoeft te schrijven. */

/* Een staattegel in een raster van media of evenementen rekt niet uit. */
body.fi-panel-portal .vivi-grid-3 > .vivi-staattegel,
body.fi-panel-portal .vivi-grid-4 > .vivi-staattegel {
    height: auto;
}

/* ==== Portaal-UI: draaiboek en eventwerkplek ==== */
/* Eigenaar: lane brent-draaiboeken (22-10-2026). De draaiboekeditor
   (.vivi-db), de lijst van events met hun draaiboek (.vivi-dbl) en de
   eventwerkplek en sjabloonpagina's (.vivi-ewp). Alles onder
   body.fi-panel-portal; kleuren, maten en radii alleen uit 01 en 09.

   Vorm: een draaiboek is een tabel die je typt. Vanaf 1280 px een raster per
   sectietype met een kopregel; daaronder valt elke regel uiteen in een kaartje
   met zichtbare labels, zodat er op 390 px niets horizontaal scrolt. */

/* ---------- Lijst van events ---------- */
body.fi-panel-portal .vivi-dbl { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--vivi-ruimte-xs); }
body.fi-panel-portal .vivi-dbl__rij {
    display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) auto auto; align-items: center; gap: var(--vivi-ruimte-s);
    padding: var(--vivi-ruimte-s) var(--vivi-ruimte-m); background: var(--vivi-vlak); border: 1px solid var(--vivi-lijn-fijn); border-radius: var(--vivi-radius-kaart);
}
body.fi-panel-portal .vivi-dbl__datum { display: grid; line-height: 1.2; color: var(--vivi-tekst-2); font-size: var(--vivi-tekst-s); }
body.fi-panel-portal .vivi-dbl__datum strong { color: var(--vivi-tekst); font-size: var(--vivi-tekst-m); font-weight: 600; }
body.fi-panel-portal .vivi-dbl__wat { display: grid; min-width: 0; gap: 2px; }
body.fi-panel-portal .vivi-dbl__titel { color: var(--vivi-tekst); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
body.fi-panel-portal .vivi-dbl__titel:hover { text-decoration: underline; text-underline-offset: 3px; }
body.fi-panel-portal .vivi-dbl__plek { color: var(--vivi-tekst-2); font-size: var(--vivi-tekst-s); overflow-wrap: anywhere; }
body.fi-panel-portal .vivi-dbl__stand { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vivi-ruimte-xs); }
body.fi-panel-portal .vivi-dbl__open { color: var(--vivi-tekst-2); font-size: var(--vivi-tekst-s); }
body.fi-panel-portal .vivi-dbl__knoppen { display: flex; flex-wrap: wrap; gap: var(--vivi-ruimte-xs); justify-content: flex-end; }

/* ---------- Werkplek en sjablonen ---------- */
body.fi-panel-portal .vivi-ewp { display: grid; gap: var(--vivi-ruimte-l); }
body.fi-panel-portal .vivi-ewp__blok {
    min-width: 0; padding: var(--vivi-ruimte-m) var(--vivi-ruimte-l); background: var(--vivi-vlak);
    border: 1px solid var(--vivi-lijn-fijn); border-radius: var(--vivi-radius-kaart);
}
body.fi-panel-portal .vivi-ewp__kop { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--vivi-ruimte-s); margin: 0 0 var(--vivi-ruimte-s); font-size: var(--vivi-kop-s); font-weight: 600; color: var(--vivi-tekst); }
body.fi-panel-portal .vivi-ewp__teller { font-size: var(--vivi-tekst-s); font-weight: 400; color: var(--vivi-tekst-2); }
body.fi-panel-portal .vivi-ewp__tekst { margin: 0 0 var(--vivi-ruimte-s); color: var(--vivi-tekst-2); }
body.fi-panel-portal .vivi-ewp__link { color: var(--vivi-tekst); text-decoration: underline; text-underline-offset: 3px; }
body.fi-panel-portal .vivi-ewp__lijst { list-style: none; margin: 0 0 var(--vivi-ruimte-m); padding: 0; }
body.fi-panel-portal .vivi-ewp__rij {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--vivi-ruimte-xs) var(--vivi-ruimte-s);
    padding: var(--vivi-ruimte-xs) 0; border-bottom: 1px solid var(--vivi-lijn-fijn); min-height: var(--vivi-tik-min);
}
body.fi-panel-portal .vivi-ewp__rij:last-child { border-bottom: 0; }
body.fi-panel-portal .vivi-ewp__rij.is-klaar .vivi-ewp__wat { color: var(--vivi-tekst-2); text-decoration: line-through; }
body.fi-panel-portal .vivi-ewp__wat { flex: 1 1 14rem; min-width: 0; color: var(--vivi-tekst); overflow-wrap: anywhere; }
body.fi-panel-portal .vivi-ewp__zacht { color: var(--vivi-tekst-2); font-size: var(--vivi-tekst-s); }
body.fi-panel-portal .vivi-ewp__vink { width: 1.25rem; height: 1.25rem; accent-color: var(--vivi-accent); }
body.fi-panel-portal .vivi-ewp__formrij { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--vivi-ruimte-s); margin: 0 0 var(--vivi-ruimte-s); }
body.fi-panel-portal .vivi-ewp__veld { display: grid; gap: 4px; flex: 0 1 12rem; min-width: 0; }
body.fi-panel-portal .vivi-ewp__veld.is-breed { flex: 1 1 16rem; }
body.fi-panel-portal .vivi-ewp__lbl { font-size: var(--vivi-tekst-s); color: var(--vivi-tekst-2); }
body.fi-panel-portal .vivi-ewp__fout { margin: 0; color: var(--vivi-fout); font-size: var(--vivi-tekst-s); }

body.fi-panel-portal .vivi-ewp__invoer,
body.fi-panel-portal .vivi-db__veld,
body.fi-panel-portal .vivi-db__titelveld {
    width: 100%; min-width: 0; box-sizing: border-box; font: inherit; color: var(--vivi-tekst);
    background: var(--vivi-vlak); border: 1px solid var(--vivi-line); border-radius: var(--vivi-radius-s);
}
body.fi-panel-portal .vivi-ewp__invoer { min-height: var(--vivi-tik-min); padding: 0 var(--vivi-ruimte-s); }
body.fi-panel-portal .vivi-ewp__invoer.is-klein { width: auto; min-height: 2.25rem; }
body.fi-panel-portal .vivi-ewp__invoer:focus-visible,
body.fi-panel-portal .vivi-db__veld:focus-visible,
body.fi-panel-portal .vivi-db__titelveld:focus-visible { outline: none; box-shadow: var(--vivi-focusring); border-color: var(--vivi-accent); }

/* ---------- Editor: balk en meldingen ---------- */
body.fi-panel-portal .vivi-db { display: grid; gap: var(--vivi-ruimte-m); min-width: 0; }
body.fi-panel-portal .vivi-db__bron { margin: 0 0 var(--vivi-ruimte-s); color: var(--vivi-tekst-2); font-size: var(--vivi-tekst-s); }
body.fi-panel-portal .vivi-db__balk {
    position: sticky; top: var(--vivi-hoofdbalk-h, 0); z-index: 5;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--vivi-ruimte-s);
    padding: var(--vivi-ruimte-xs) var(--vivi-ruimte-s); background: var(--vivi-vlak-2); border: 1px solid var(--vivi-lijn-fijn); border-radius: var(--vivi-radius-kaart);
}
body.fi-panel-portal .vivi-db__stand { margin: 0; font-size: var(--vivi-tekst-s); color: var(--vivi-tekst-2); }
body.fi-panel-portal .vivi-db__stand::before { content: ""; display: inline-block; width: .5rem; height: .5rem; margin-right: .4rem; border-radius: var(--vivi-radius-rond); background: var(--vivi-line-strong); vertical-align: middle; }
body.fi-panel-portal .vivi-db__stand.is-opgeslagen::before { background: var(--vivi-ok); }
body.fi-panel-portal .vivi-db__stand.is-wijziging::before,
body.fi-panel-portal .vivi-db__stand.is-bezig::before { background: var(--vivi-warn); }
body.fi-panel-portal .vivi-db__stand.is-fout,
body.fi-panel-portal .vivi-db__stand.is-conflict { color: var(--vivi-fout); }
body.fi-panel-portal .vivi-db__stand.is-fout::before,
body.fi-panel-portal .vivi-db__stand.is-conflict::before { background: var(--vivi-fout); }
body.fi-panel-portal .vivi-db__balk-knoppen,
body.fi-panel-portal .vivi-db__groep { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vivi-ruimte-xs); }
body.fi-panel-portal .vivi-db__status { display: inline-flex; align-items: center; gap: var(--vivi-ruimte-xs); }
body.fi-panel-portal .vivi-db__status .vivi-db__veld { width: auto; min-height: 2.25rem; padding: 0 var(--vivi-ruimte-s); }
body.fi-panel-portal .vivi-db__lbl-zicht { font-size: var(--vivi-tekst-s); color: var(--vivi-tekst-2); }
body.fi-panel-portal .vivi-db__melding,
body.fi-panel-portal .vivi-db__conflict {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--vivi-ruimte-s);
    padding: var(--vivi-ruimte-s) var(--vivi-ruimte-m); border-radius: var(--vivi-radius-kaart); border: 1px solid var(--vivi-lijn-fijn); background: var(--vivi-accent-zacht);
}
body.fi-panel-portal .vivi-db__conflict { background: var(--vivi-fout-vlak); border-color: var(--vivi-fout); }
body.fi-panel-portal .vivi-db__conflict p { margin: 0; flex: 1 1 18rem; }
body.fi-panel-portal .vivi-db__sluit { min-width: var(--vivi-tik-min); min-height: var(--vivi-tik-min); border: 0; background: transparent; color: var(--vivi-tekst); font-size: var(--vivi-tekst-l); cursor: pointer; }
body.fi-panel-portal .vivi-db__versies { padding: var(--vivi-ruimte-s) var(--vivi-ruimte-m); background: var(--vivi-vlak); border: 1px solid var(--vivi-lijn-fijn); border-radius: var(--vivi-radius-kaart); }
body.fi-panel-portal .vivi-db__uitleg { margin: 0 0 var(--vivi-ruimte-s); color: var(--vivi-tekst-2); font-size: var(--vivi-tekst-s); }
body.fi-panel-portal .vivi-db__versielijst { list-style: none; margin: 0; padding: 0; max-height: 20rem; overflow-y: auto; }
body.fi-panel-portal .vivi-db__versie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--vivi-ruimte-xs); padding: var(--vivi-ruimte-xs) 0; border-bottom: 1px solid var(--vivi-lijn-fijn); }
body.fi-panel-portal .vivi-db__versie-wat { display: grid; min-width: 0; }
body.fi-panel-portal .vivi-db__zacht { color: var(--vivi-tekst-2); font-size: var(--vivi-tekst-s); }
body.fi-panel-portal .vivi-db__verborgen { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Editor: secties ---------- */
/* Een fieldset is standaard minstens zo breed als zijn inhoud; dat gaf op 390 px
   een horizontale scroll. min-inline-size 0 haalt dat weg. */
body.fi-panel-portal .vivi-db__inhoud { display: grid; gap: var(--vivi-ruimte-m); min-inline-size: 0; margin: 0; padding: 0; border: 0; }
body.fi-panel-portal .vivi-db__sectie { min-width: 0; background: var(--vivi-vlak); border: 1px solid var(--vivi-lijn-fijn); border-radius: var(--vivi-radius-kaart); overflow: hidden; }
body.fi-panel-portal .vivi-db__sectiekop { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vivi-ruimte-xs) var(--vivi-ruimte-s); padding: var(--vivi-ruimte-s) var(--vivi-ruimte-m); border-bottom: 1px solid var(--vivi-lijn-fijn); }
body.fi-panel-portal .vivi-db__klap { width: 2rem; height: 2rem; border: 0; background: transparent; cursor: pointer; position: relative; flex: none; }
body.fi-panel-portal .vivi-db__klap::before { content: ""; position: absolute; inset: 0; margin: auto; width: .5rem; height: .5rem; border-right: 2px solid var(--vivi-tekst-2); border-bottom: 2px solid var(--vivi-tekst-2); transform: rotate(45deg); transition: transform .15s; }
body.fi-panel-portal .vivi-db__klap[aria-expanded="false"]::before { transform: rotate(-45deg); }
body.fi-panel-portal .vivi-db__titel { flex: 1 1 14rem; min-width: 0; }
body.fi-panel-portal .vivi-db__titelveld { border-color: transparent; background: transparent; padding: 4px var(--vivi-ruimte-xs); font-size: var(--vivi-kop-s); font-weight: 600; }
body.fi-panel-portal .vivi-db__titelveld:hover { border-color: var(--vivi-line); }
body.fi-panel-portal .vivi-db__teller { font-size: var(--vivi-tekst-s); color: var(--vivi-tekst-2); font-variant-numeric: tabular-nums; }
body.fi-panel-portal .vivi-db__typelabel { font-family: var(--vivi-type-label); font-size: var(--vivi-tekst-xs); letter-spacing: var(--vivi-type-label-spatie); text-transform: uppercase; color: var(--vivi-tekst-2); }
body.fi-panel-portal .vivi-db__sectieknoppen,
body.fi-panel-portal .vivi-db__regelknoppen { display: inline-flex; flex-wrap: wrap; gap: 2px; }
body.fi-panel-portal .vivi-db__mini {
    min-width: 2rem; min-height: 2rem; padding: 0 var(--vivi-ruimte-xs); border: 1px solid transparent; border-radius: var(--vivi-radius-s);
    background: transparent; color: var(--vivi-tekst-2); font: inherit; font-size: var(--vivi-tekst-s); cursor: pointer;
}
body.fi-panel-portal .vivi-db__mini:hover:not(:disabled) { border-color: var(--vivi-line); color: var(--vivi-tekst); background: var(--vivi-vlak-2); }
body.fi-panel-portal .vivi-db__mini:focus-visible { outline: none; box-shadow: var(--vivi-focusring); }
body.fi-panel-portal .vivi-db__mini:disabled { opacity: .35; cursor: default; }
body.fi-panel-portal .vivi-db__mini.is-weg:hover:not(:disabled) { color: var(--vivi-fout); border-color: var(--vivi-fout); }
body.fi-panel-portal .vivi-db__sectielijf { display: grid; gap: var(--vivi-ruimte-s); padding: var(--vivi-ruimte-s) var(--vivi-ruimte-m) var(--vivi-ruimte-m); }
body.fi-panel-portal .vivi-db__uitlegveld .vivi-db__veld.is-zacht { border-color: transparent; background: transparent; padding: 2px var(--vivi-ruimte-xs); color: var(--vivi-tekst-2); font-size: var(--vivi-tekst-s); }
body.fi-panel-portal .vivi-db__uitlegveld .vivi-db__veld.is-zacht:hover { border-color: var(--vivi-line); }
body.fi-panel-portal .vivi-db__tekstblok textarea { padding: var(--vivi-ruimte-s); resize: vertical; line-height: 1.5; }

/* ---------- Editor: regels ---------- */
body.fi-panel-portal .vivi-db__tabel { display: grid; gap: 0; min-width: 0; }
body.fi-panel-portal .vivi-db__kop,
body.fi-panel-portal .vivi-db__regel { display: grid; gap: var(--vivi-ruimte-xs); align-items: center; min-width: 0; }
body.fi-panel-portal .vivi-db__kop { padding: 0 0 var(--vivi-ruimte-xs); font-size: var(--vivi-tekst-xs); color: var(--vivi-tekst-2); text-transform: uppercase; letter-spacing: var(--vivi-type-label-spatie); }
body.fi-panel-portal .vivi-db__regel { padding: 3px 0; border-top: 1px solid var(--vivi-lijn-fijn); }
body.fi-panel-portal .vivi-db__regel.is-gedaan .is-wat .vivi-db__veld { color: var(--vivi-tekst-2); text-decoration: line-through; }
body.fi-panel-portal .vivi-db__regel.is-ontbreekt { box-shadow: inset 3px 0 0 var(--vivi-fout); }
body.fi-panel-portal .vivi-db__cel { display: block; min-width: 0; }
body.fi-panel-portal .vivi-db__cel .vivi-db__veld { min-height: 2.25rem; padding: 0 var(--vivi-ruimte-xs); border-color: transparent; background: transparent; }
body.fi-panel-portal .vivi-db__cel .vivi-db__veld:hover { border-color: var(--vivi-line); }
body.fi-panel-portal .vivi-db__cel.is-tijd { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
body.fi-panel-portal .vivi-db__cel.is-tijd .vivi-db__veld { font-variant-numeric: tabular-nums; padding: 0 2px; }
body.fi-panel-portal .vivi-db__cel.is-wie.is-lid .vivi-db__veld { color: var(--vivi-accent-tekst); font-weight: 600; }
body.fi-panel-portal .vivi-db__cel.is-vink { display: flex; justify-content: center; }
body.fi-panel-portal .vivi-db__vink { width: 1.15rem; height: 1.15rem; accent-color: var(--vivi-accent); }
body.fi-panel-portal .vivi-db__cel.is-acties { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 2px var(--vivi-ruimte-xs); }
body.fi-panel-portal .vivi-db__cel.is-notitie { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--vivi-ruimte-xs); padding-left: var(--vivi-ruimte-s); }
body.fi-panel-portal .vivi-db__cel.is-notitie .vivi-db__veld { flex: 1 1 auto; }
body.fi-panel-portal .vivi-db__taak { padding: 2px var(--vivi-ruimte-xs); border-radius: var(--vivi-radius-pil); font-size: var(--vivi-tekst-xs); white-space: nowrap; background: var(--vivi-accent-zacht); color: var(--vivi-tekst); }
body.fi-panel-portal .vivi-db__taak.is-klaar { background: var(--vivi-vlak-2); color: var(--vivi-tekst-2); }
body.fi-panel-portal .vivi-db__lbl { display: none; }
body.fi-panel-portal .vivi-db__nieuweregel {
    justify-self: start; margin-top: var(--vivi-ruimte-xs); min-height: 2.25rem; padding: 0 var(--vivi-ruimte-s);
    border: 1px dashed var(--vivi-line); border-radius: var(--vivi-radius-s); background: transparent; color: var(--vivi-tekst-2); font: inherit; cursor: pointer;
}
body.fi-panel-portal .vivi-db__nieuweregel:hover { color: var(--vivi-tekst); border-color: var(--vivi-line-strong); }
body.fi-panel-portal .vivi-db__nieuwesectie { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vivi-ruimte-s); }
body.fi-panel-portal .vivi-db__nieuwesectie .vivi-db__veld { width: auto; min-height: var(--vivi-tik-min); padding: 0 var(--vivi-ruimte-s); }
body.fi-panel-portal .vivi-db fieldset:disabled .vivi-db__veld,
body.fi-panel-portal .vivi-db__inhoud:disabled .vivi-db__veld { cursor: default; }

/* Groeivelden: tekst loopt door naar een volgende regel in plaats van af te
   breken achter de rand (meting master 22-10: "Opbouw techniek, tafels en po"). */
body.fi-panel-portal textarea.is-groei:is(.vivi-db__veld, .vivi-db__titelveld) { field-sizing: content; resize: none; overflow: hidden; overflow-wrap: anywhere; line-height: 1.35; }
body.fi-panel-portal .vivi-db__cel textarea.vivi-db__veld.is-groei { padding-block: .45rem; }
body.fi-panel-portal .vivi-db__uitlegveld textarea.vivi-db__veld.is-groei { min-height: 0; }
body.fi-panel-portal .vivi-db__typelabel,
body.fi-panel-portal .vivi-db__teller { white-space: nowrap; }
/* Concept is de gewone stand: gedempt, zodat afwijkingen (bevestigd, ontbreekt) opvallen. */
body.fi-panel-portal .vivi-db__cel.is-status.is-concept .vivi-db__veld { color: var(--vivi-tekst-2); font-size: var(--vivi-tekst-s); }
body.fi-panel-portal .vivi-db__soortkop { display: inline-flex; align-items: baseline; gap: var(--vivi-ruimte-xs); flex: none; white-space: nowrap; }

/* Samenvatregel: alleen onder 1280 px, zie daar. */
body.fi-panel-portal .vivi-db__samenvat { display: none; }

/* Kolommen per sectietype, vanaf 1280 px. De laatste kolom (acties) krijgt
   wat hij nodig heeft; de tekstkolommen delen de rest. Gemeten 22-10: bij
   1024 px is een sectiekaart 668 px breed en vroeg de dagplanning 951 px, zodat
   de regelknoppen achter de kaartrand vielen; daaronder dus kaartjes. */
@media (min-width: 1280px) {
    /* De kolommen staan op de tabel en kop en regels lopen er als subgrid in
       mee, zodat koppen en cellen altijd op dezelfde lijn staan, ook als een
       regel een taakpil heeft en een andere niet (gemeten 22-10: zonder subgrid
       rekende elke regel zijn eigen kolombreedtes uit). */
    body.fi-panel-portal .vivi-db__tabel { column-gap: var(--vivi-ruimte-xs); }
    body.fi-panel-portal .vivi-db__tabel > :is(.vivi-db__kop, .vivi-db__regel) { grid-column: 1 / -1; grid-template-columns: subgrid; }
    body.fi-panel-portal .vivi-db__tabel > .vivi-db__nieuweregel { grid-column: 1 / -1; }
    body.fi-panel-portal .vivi-db__sectie.is-tijdlijn .vivi-db__tabel { grid-template-columns: 10rem 8.5rem minmax(9rem, 2fr) minmax(3.5rem, 1fr) minmax(12.5rem, 1.4fr) 7rem auto; }
    body.fi-panel-portal .vivi-db__sectie.is-rollen .vivi-db__tabel { grid-template-columns: minmax(10rem, 1.4fr) minmax(10rem, 1fr) 10rem 7.5rem auto; }
    body.fi-panel-portal .vivi-db__sectie.is-contacten .vivi-db__tabel { grid-template-columns: minmax(8rem, 1fr) minmax(8rem, 1fr) minmax(8rem, 1fr) 10rem auto; }
    body.fi-panel-portal .vivi-db__sectie:is(.is-checklist, .is-deadlines) .vivi-db__tabel { grid-template-columns: 2.5rem minmax(12rem, 2fr) minmax(10rem, 1fr) 9.5rem auto; }
    body.fi-panel-portal .vivi-db__sectie.is-punten .vivi-db__tabel { grid-template-columns: minmax(12rem, 2fr) minmax(10rem, 1fr) 9.5rem 7.5rem auto; }
    body.fi-panel-portal .vivi-db__cel.is-acties { flex-wrap: nowrap; }
    /* Regelknoppen pas bij aanwijzen of focus, zodat de tabel rustig leest. */
    /* Ze zweven over het rechtereinde van de regel, zodat ze geen kolom
       opeisen en Wat de ruimte houdt. */
    body.fi-panel-portal .vivi-db__regel { position: relative; }
    body.fi-panel-portal .vivi-db__regel .vivi-db__regelknoppen {
        position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: flex; gap: 2px;
        padding: 2px; border-radius: var(--vivi-radius-s); background: var(--vivi-vlak); box-shadow: var(--vivi-schaduw-drijf);
        opacity: 0; pointer-events: none; transition: opacity .12s;
    }
    body.fi-panel-portal .vivi-db__regel:is(:hover, :focus-within) .vivi-db__regelknoppen { opacity: 1; pointer-events: auto; }
}

/* Onder 1280 px: elke regel een kaartje met labels. */
@media (max-width: 1279.98px) {
    body.fi-panel-portal .vivi-db__kop { display: none; }
    body.fi-panel-portal .vivi-db__regel { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--vivi-ruimte-xs) var(--vivi-ruimte-s); padding: var(--vivi-ruimte-s) 0; }
    body.fi-panel-portal .vivi-db__lbl { display: block; margin-bottom: 2px; font-size: var(--vivi-tekst-xs); color: var(--vivi-tekst-2); }
    body.fi-panel-portal .vivi-db__cel .vivi-db__veld { border-color: var(--vivi-line); min-height: var(--vivi-tik-min); }
    body.fi-panel-portal .vivi-db__cel.is-wat,
    body.fi-panel-portal .vivi-db__cel.is-acties { grid-column: 1 / -1; }
    body.fi-panel-portal .vivi-db__cel.is-acties { justify-content: flex-start; }
    body.fi-panel-portal .vivi-db__cel.is-vink { justify-content: flex-start; align-items: center; gap: var(--vivi-ruimte-xs); }
    body.fi-panel-portal .vivi-db__cel.is-vink .vivi-db__lbl { margin: 0; }
    body.fi-panel-portal .vivi-db__mini { min-width: var(--vivi-tik-min); min-height: var(--vivi-tik-min); }
    body.fi-panel-portal .vivi-db__cel.is-tijd label { display: block; min-width: 0; }
    body.fi-panel-portal .vivi-db__balk { position: static; }

    /* Compacte regels (meting 22-10: open kaartjes maakten de dagplanning op
       390 px 6362 px hoog). Dicht is een regel één tikregel met tijd, wat,
       wie en taak; open toont hij alle velden onder die tikregel. */
    body.fi-panel-portal .vivi-db__regel { padding: 0; gap: 0 var(--vivi-ruimte-s); }
    body.fi-panel-portal .vivi-db__regel.is-open { padding-bottom: var(--vivi-ruimte-s); row-gap: var(--vivi-ruimte-xs); }
    body.fi-panel-portal .vivi-db__regel:not(.is-open) > .vivi-db__cel:not(.is-vink) { display: none; }
    body.fi-panel-portal .vivi-db__regel:not(.is-open) { grid-template-columns: minmax(0, 1fr); }
    body.fi-panel-portal .vivi-db__regel:not(.is-open):has(> .is-vink) { grid-template-columns: auto minmax(0, 1fr); }
    body.fi-panel-portal .vivi-db__regel.is-open > .vivi-db__samenvat { grid-column: 1 / -1; }
    body.fi-panel-portal .vivi-db__regel.is-open > .vivi-db__cel.is-vink { grid-column: 1 / -1; }
    body.fi-panel-portal .vivi-db__regel:not(.is-open) > .vivi-db__cel.is-vink { order: -1; }
    body.fi-panel-portal .vivi-db__regel:not(.is-open) > .vivi-db__cel.is-vink .vivi-db__lbl { display: none; }
    body.fi-panel-portal .vivi-db__samenvat {
        display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--vivi-ruimte-s); width: 100%; min-width: 0;
        min-height: var(--vivi-tik-min); padding: var(--vivi-ruimte-xs) 0; text-align: start; background: none; border: 0; cursor: pointer; color: inherit;
    }
    body.fi-panel-portal .vivi-db__samenvat::after { content: ''; flex: none; width: .45rem; height: .45rem; margin-inline: 2px 4px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); opacity: .55; transition: transform .12s; margin-inline-start: auto; }
    body.fi-panel-portal .vivi-db__regel.is-open > .vivi-db__samenvat::after { transform: rotate(-135deg); }
    body.fi-panel-portal .vivi-db__sv-tijd { flex: none; font-variant-numeric: tabular-nums; color: var(--vivi-tekst-2); }
    body.fi-panel-portal .vivi-db__sv-wat { flex: 1 1 0; min-width: 55%; overflow-wrap: break-word; }
    body.fi-panel-portal .vivi-db__sv-wie { flex: 0 1 auto; min-width: 0; max-width: 100%; overflow-wrap: break-word; font-size: var(--vivi-tekst-xs); color: var(--vivi-tekst-2); }
    body.fi-panel-portal .vivi-db__sv-datum { flex: none; font-size: var(--vivi-tekst-xs); font-variant-numeric: tabular-nums; color: var(--vivi-tekst); }
    body.fi-panel-portal .vivi-db__sv-datum.is-leeg { color: var(--vivi-tekst-2); font-style: italic; }
    body.fi-panel-portal .vivi-db__sv-status { flex: none; font-size: var(--vivi-tekst-xs); padding: 1px var(--vivi-ruimte-xs); border-radius: var(--vivi-radius-pil); border: 1px solid var(--vivi-lijn-fijn); color: var(--vivi-tekst-2); }
    body.fi-panel-portal .vivi-db__sv-status.is-bevestigd { border-color: transparent; background: var(--vivi-accent-zacht); color: var(--vivi-tekst); }
    body.fi-panel-portal .vivi-db__sv-status.is-ontbreekt { border-color: var(--vivi-fout); color: var(--vivi-fout); }
    body.fi-panel-portal .vivi-db__sv-wie:empty { display: none; }
    body.fi-panel-portal .vivi-db__sv-taak { flex: none; font-size: var(--vivi-tekst-xs); padding: 1px var(--vivi-ruimte-xs); border-radius: var(--vivi-radius-pil); background: var(--vivi-accent-zacht); }
    body.fi-panel-portal .vivi-db__regel.is-gedaan .vivi-db__sv-wat { text-decoration: line-through; opacity: .7; }
}

@media (max-width: 639.98px) {
    body.fi-panel-portal .vivi-db__regel { grid-template-columns: minmax(0, 1fr); }
    body.fi-panel-portal .vivi-db__sectiekop,
    body.fi-panel-portal .vivi-db__sectielijf { padding-left: var(--vivi-ruimte-s); padding-right: var(--vivi-ruimte-s); }
    body.fi-panel-portal .vivi-db__cel.is-notitie { padding-left: 0; flex-wrap: wrap; }
    body.fi-panel-portal .vivi-ewp__blok { padding: var(--vivi-ruimte-s); }
    body.fi-panel-portal .vivi-ewp__veld,
    body.fi-panel-portal .vivi-ewp__veld.is-breed { flex: 1 1 100%; }
    body.fi-panel-portal .vivi-dbl__rij { grid-template-columns: 4.5rem minmax(0, 1fr); }
    body.fi-panel-portal .vivi-dbl__stand,
    body.fi-panel-portal .vivi-dbl__knoppen { grid-column: 1 / -1; justify-content: flex-start; }
}

/* Dagen voor of na het event: aantal plus richting, nooit een min-teken. */
body.fi-panel-portal .vivi-db__dagen { display: flex; gap: 4px; min-width: 0; }
body.fi-panel-portal .vivi-db__dagen .is-aantal { flex: 0 0 3.75rem; min-width: 0; }
body.fi-panel-portal .vivi-db__dagen .is-richting { flex: 1 1 auto; min-width: 0; }
/* Zonder aantal is de richting een voorstel, geen waarde: gedempt. */
body.fi-panel-portal .vivi-db__dagen.is-leeg .is-richting { color: var(--vivi-tekst-2); }

/* Aanwezigheid per event (startkaart 27-10-2026): drie keuzes als grote
   tikvlakken, zodat een technicus op zijn telefoon in één tik antwoordt. */
body.fi-panel-portal .vivi-aanw__keuze { display: flex; flex-wrap: wrap; gap: var(--vivi-ruimte-xs); flex: 1 1 100%; border: 0; padding: 0; margin: 0; min-width: 0; }
body.fi-panel-portal .vivi-aanw__keuze legend { margin-bottom: var(--vivi-ruimte-xs); }
body.fi-panel-portal .vivi-aanw__optie {
    display: inline-flex; align-items: center; gap: var(--vivi-ruimte-xs); min-height: var(--vivi-tik-min);
    padding: 0 var(--vivi-ruimte-s); border: 1px solid var(--vivi-lijn-fijn); border-radius: var(--vivi-radius-m); cursor: pointer;
}
body.fi-panel-portal .vivi-aanw__optie:has(input:checked) { border-color: var(--vivi-accent); box-shadow: inset 0 0 0 1px var(--vivi-accent); }
body.fi-panel-portal .vivi-aanw__optie input { accent-color: var(--vivi-accent); }
body.fi-panel-portal .vivi-aanw__subkop { margin: var(--vivi-ruimte-m) 0 var(--vivi-ruimte-xs); font-size: var(--vivi-tekst-m); font-weight: 600; color: var(--vivi-tekst); }
body.fi-panel-portal .vivi-aanw__telling { display: flex; flex-wrap: wrap; gap: var(--vivi-ruimte-s); margin: 0 0 var(--vivi-ruimte-xs); }
body.fi-panel-portal .vivi-aanw__meta { flex: 0 1 auto; min-width: 0; }
@media (max-width: 40rem) {
    body.fi-panel-portal .vivi-aanw__rij .vivi-ewp__wat { flex-basis: 100%; }
    body.fi-panel-portal .vivi-aanw__meta { flex: 1 1 0; }
}

/* ==== Portaal-UI: dagritme ==== */
/* Eigenaar: lane dagritme (22-10-2026). Dagbegin en dageinde
   (App\Livewire\Dagritme\Moment, .vivi-dr), de keuze begin/einde op de
   pagina (.vivi-dr-keuze) en de knop van de Dagstart-stand-up naar het
   dagbegin (.vivi-dagstart__naar). Geldt in portaal, team en beheer: de
   tokens komen uit 01, 09 (portaal) en 17 (team en beheer).

   Vorm: per scherm een donker anker (de vraag, de voorstellen of de uren)
   en daarin de enige gouden knop. Kleur alleen voor staat: ok groen,
   let-op oker, info blauw. Radius 24 frame, 20 kaart, 12 binnen.
   Mobiel eerst; vanaf 1024 staan hoofdkolom en zijkaart naast elkaar. */

body:is(.fi-panel-portal, .fi-panel-team, .fi-panel-admin) .vivi-dr {
    --vivi-dr-info-vlak: color-mix(in srgb, var(--vivi-info) 12%, var(--vivi-vlak));
    min-width: 0;
}

/* ---------- Keuze begin / einde ---------- */
body:is(.fi-panel-portal, .fi-panel-team, .fi-panel-admin) .vivi-dr-keuze {
    display: inline-flex; flex-wrap: wrap; gap: var(--vivi-ruimte-2xs); padding: var(--vivi-ruimte-2xs);
    margin: 0 0 var(--vivi-ruimte-m); background: var(--vivi-vlak); border: 1px solid var(--vivi-lijn-fijn);
    border-radius: var(--vivi-radius-pil);
}
body:is(.fi-panel-portal, .fi-panel-team, .fi-panel-admin) .vivi-dr-keuze__optie {
    display: inline-flex; align-items: center; min-height: var(--vivi-tik-min); padding: 0 var(--vivi-ruimte-m);
    border-radius: var(--vivi-radius-pil); color: var(--vivi-tekst-2); font-weight: 600; text-decoration: none;
}
body:is(.fi-panel-portal, .fi-panel-team, .fi-panel-admin) .vivi-dr-keuze__optie:hover { color: var(--vivi-tekst); }
body:is(.fi-panel-portal, .fi-panel-team, .fi-panel-admin) .vivi-dr-keuze__optie.is-actief {
    background: var(--vivi-vlak-donker); color: var(--vivi-tekst-op-donker);
}

/* ---------- Raster ---------- */
body:is(.fi-panel-portal, .fi-panel-team, .fi-panel-admin) .vivi-dr__raster { display: grid; gap: var(--vivi-ruimte-l); align-items: start; }
body:is(.fi-panel-portal, .fi-panel-team, .fi-panel-admin) .vivi-dr__hoofd,
body:is(.fi-panel-portal, .fi-panel-team, .fi-panel-admin) .vivi-dr__zij { display: grid; gap: var(--vivi-ruimte-m); min-width: 0; }

@media (min-width: 1024px) {
    body:is(.fi-panel-portal, .fi-panel-team, .fi-panel-admin) .vivi-dr__raster { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}

/* ---------- Het donkere anker ---------- */
body:is(.fi-panel-portal, .fi-panel-team, .fi-panel-admin) .vivi-dr__anker {
    display: grid; gap: var(--vivi-ruimte-s); min-width: 0; padding: var(--vivi-ruimte-l);
    background: var(--vivi-vlak-donker); color: var(--vivi-tekst-op-donker); border-radius: var(--vivi-radius-frame);
}
body:is(.fi-panel-portal, .fi-panel-team, .fi-panel-admin) .vivi-dr__anker--rust { gap: var(--vivi-ruimte-xs); }
body:is(.fi-panel-portal, .fi-panel-team, .fi-panel-admin) .vivi-dr__kop {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--vivi-ruimte-xs) var(--vivi-ruimte-m);
}
body:is(.fi-panel-portal, .fi-panel-team, .fi-panel-admin) .vivi-dr__teller { font-size: var(--vivi-tekst-s); color: var(--vivi-tekst-2-op-donker); }
body:is(.fi-panel-portal, .fi-panel-team, .fi-panel-admin) .vivi-dr__voortgang { display: flex; gap: var(--vivi-ruimte-2xs); margin: 0; padding: 0; list-style: none; }
body:is(.fi-panel-portal, .fi-panel-team, .fi-panel-admin) .vivi-dr__punt {
    width: 1.5rem; height: 0.25rem; border-radius: var(--vivi-radius-pil);
    background: color-mix(in srgb, var(--vivi-tekst-op-donker) 24%, transparent);
}
body:is(.fi-panel-portal, .fi-panel-team, .fi-panel-admin) .vivi-dr__punt--aan { background: var(--vivi-accent); }
body:is(.fi-panel-portal, .fi-panel-team, .fi-panel-admin) .vivi-dr__vraag,
body:is(.fi-panel-portal, .fi-panel-team, .fi-panel-admin) .vivi-dr__titel {
    margin: 0; font-family: var(--vivi-type-display); font-size: var(--vivi-tekst-l); font-weight: 600; line-height: 1.25;
    color: var(--vivi-tekst-op-donker); overflow-wrap: anywhere;
}
body:is(.fi-panel-portal, .fi-panel-team, .fi-panel-admin) .vivi-dr__hint { margin: 0; color: var(--vivi-tekst-2); font-size: var(--vivi-tekst-s); }
body:is(.fi-panel-portal, .fi-panel-team, .fi-panel-admin) .vivi-dr__anker .vivi-dr__hint { color: var(--vivi-tekst-2-op-donker); }
body:is(.fi-panel-portal, .fi-panel-team, .fi-panel-admin) .vivi-dr__hint--licht { padding: 0 var(--vivi-ruimte-xs); }
body:is(.fi-panel-portal, .fi-panel-team, .fi-panel-admin) .vivi-dr__som { margin: 0; font-weight: 600; }

body:is(.fi-panel-portal, .fi-panel-team, .fi-panel-admin) .vivi-dr__veld {
    width: 100%; min-width: 0; box-sizing: border-box; min-height: 8rem; padding: var(--vivi-ruimte-s);
    font: inherit; color: var(--vivi-tekst); background: var(--vivi-vlak);
    border: 1px solid var(--vivi-lijn-fijn); border-radius: var(--vivi-radius-m); resize: vertical;
}
body:is(.fi-panel-portal, .fi-panel-team, .fi-panel-admin) .vivi-dr__fout { margin: 0; color: var(--vivi-fout); font-size: var(--vivi-tekst-s); }
body:is(.fi-panel-portal, .fi-panel-team, .fi-panel-admin) .vivi-dr__anker .vivi-dr__fout { color: var(--vivi-staat-actie-op-donker); }

/* ---------- Knoppen ---------- */
body:is(.fi-panel-portal, .fi-panel-team, .fi-panel-admin) .vivi-dr__knoppen {
    display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--vivi-ruimte-xs); margin-top: var(--vivi-ruimte-xs);
}
body:is(.fi-panel-portal, .fi-panel-team, .fi-panel-admin) .vivi-dr__knop {
    display: inline-flex; align-items: center; justify-content: center; min-height: var(--vivi-tik-min);
    padding: 0 var(--vivi-ruimte-m); font: inherit; font-weight: 600; cursor: pointer;
    color: var(--vivi-tekst-op-donker); background: transparent;
    border: 1px solid color-mix(in srgb, var(--vivi-tekst-op-donker) 40%, transparent); border-radius: var(--vivi-radius-pil);
}
body:is(.fi-panel-portal, .fi-panel-team, .fi-panel-admin) .vivi-dr__knop--goud {
    color: var(--vivi-accent-tekst); background: var(--vivi-accent); border-color: var(--vivi-accent);
}
body:is(.fi-panel-portal, .fi-panel-team, .fi-panel-admin) .vivi-dr__knop--goud:hover { background: var(--vivi-accent-druk); border-color: var(--vivi-accent-druk); }
body:is(.fi-panel-portal, .fi-panel-team, .fi-panel-admin) .vivi-dr__knop--licht {
    color: var(--vivi-tekst); border-color: var(--vivi-lijn-fijn); background: var(--vivi-vlak); flex: 0 0 auto;
}
body:is(.fi-panel-portal, .fi-panel-team, .fi-panel-admin) .vivi-dr__knop[disabled] { opacity: 0.6; cursor: wait; }
body:is(.fi-panel-portal, .fi-panel-team, .fi-panel-admin) .vivi-dr__link {
    padding: 0; font: inherit; font-size: var(--vivi-tekst-s); color: inherit; background: none; border: 0;
    cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}

/* ---------- Overzicht van de vragen ---------- */
body:is(.fi-panel-portal, .fi-panel-team, .fi-panel-admin) .vivi-dr__overzicht { display: grid; gap: var(--vivi-ruimte-2xs); margin: 0; padding: 0; list-style: none; }
body:is(.fi-panel-portal, .fi-panel-team, .fi-panel-admin) .vivi-dr__overzicht-knop {
    display: grid; gap: 2px; width: 100%; min-height: var(--vivi-tik-min); padding: var(--vivi-ruimte-xs) var(--vivi-ruimte-m);
    font: inherit; text-align: left; color: var(--vivi-tekst); background: var(--vivi-vlak); cursor: pointer;
    border: 1px solid var(--vivi-lijn-fijn); border-radius: var(--vivi-radius-m);
}
body:is(.fi-panel-portal, .fi-panel-team, .fi-panel-admin) .vivi-dr__overzicht-rij--nu .vivi-dr__overzicht-knop { border-color: var(--vivi-tekst); }
body:is(.fi-panel-portal, .fi-panel-team, .fi-panel-admin) .vivi-dr__overzicht-vraag { font-weight: 600; }
body:is(.fi-panel-portal, .fi-panel-team, .fi-panel-admin) .vivi-dr__overzicht-antwoord { color: var(--vivi-tekst-2); font-size: var(--vivi-tekst-s); overflow-wrap: anywhere; }
body:is(.fi-panel-portal, .fi-panel-team, .fi-panel-admin) .vivi-dr__overzicht-antwoord:empty { display: none; }

/* ---------- Staat: chips en labels ---------- */
body:is(.fi-panel-portal, .fi-panel-team, .fi-panel-admin) .vivi-dr__chips { display: flex; flex-wrap: wrap; gap: var(--vivi-ruimte-2xs); margin: 0; padding: 0; list-style: none; }
body:is(.fi-panel-portal, .fi-panel-team, .fi-panel-admin) .vivi-dr__chip,
body:is(.fi-panel-portal, .fi-panel-team, .fi-panel-admin) .vivi-dr__staat {
    display: inline-flex; align-items: center; width: fit-content; padding: 2px var(--vivi-ruimte-xs);
    font-size: var(--vivi-tekst-xs); font-weight: 600; border-radius: var(--vivi-radius-pil);
}
body:is(.fi-panel-portal, .fi-panel-team, .fi-panel-admin) :is(.vivi-dr__chip--ok, .vivi-dr__staat--ok) { color: var(--vivi-staat-ok); background: var(--vivi-staat-ok-vlak); }
body:is(.fi-panel-portal, .fi-panel-team, .fi-panel-admin) :is(.vivi-dr__chip--let-op, .vivi-dr__staat--let-op) { color: var(--vivi-staat-let-op); background: var(--vivi-staat-let-op-vlak); }
body:is(.fi-panel-portal, .fi-panel-team, .fi-panel-admin) :is(.vivi-dr__chip--info, .vivi-dr__staat--info) { color: var(--vivi-info); background: var(--vivi-dr-info-vlak); }

/* ---------- Voorstellen en uren ---------- */
body:is(.fi-panel-portal, .fi-panel-team, .fi-panel-admin) .vivi-dr__lijst { display: grid; gap: var(--vivi-ruimte-xs); margin: 0; padding: 0; list-style: none; }
body:is(.fi-panel-portal, .fi-panel-team, .fi-panel-admin) .vivi-dr__voorstel,
body:is(.fi-panel-portal, .fi-panel-team, .fi-panel-admin) .vivi-dr__uur {
    display: flex; align-items: flex-start; gap: var(--vivi-ruimte-s); min-width: 0; padding: var(--vivi-ruimte-s) var(--vivi-ruimte-m);
    background: var(--vivi-vlak); border: 1px solid var(--vivi-lijn-fijn); border-radius: var(--vivi-radius-kaart);
}
body:is(.fi-panel-portal, .fi-panel-team, .fi-panel-admin) .vivi-dr__uur { align-items: center; }
body:is(.fi-panel-portal, .fi-panel-team, .fi-panel-admin) .vivi-dr__mee {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    min-width: var(--vivi-tik-min); min-height: var(--vivi-tik-min); margin: calc(var(--vivi-ruimte-xs) * -1) 0;
}
/* De forms-plugin tekent het vinkje met currentColor en zet zelf browserblauw;
   color en accent-color samen geven de eigen en de systeemvariant het donker. */
body:is(.fi-panel-portal, .fi-panel-team, .fi-panel-admin) .vivi-dr__vink {
    width: 1.25rem; height: 1.25rem; color: var(--vivi-vlak-donker); accent-color: var(--vivi-vlak-donker);
    border-color: var(--vivi-lijn-fijn); border-radius: 0.25rem;
}
body:is(.fi-panel-portal, .fi-panel-team, .fi-panel-admin) .vivi-dr__vink:focus { box-shadow: var(--vivi-ring-focus); border-color: var(--vivi-vlak-donker); }
body:is(.fi-panel-portal, .fi-panel-team, .fi-panel-admin) .vivi-dr__voorstel-tekst { display: grid; gap: var(--vivi-ruimte-2xs); flex: 1 1 auto; min-width: 0; }
body:is(.fi-panel-portal, .fi-panel-team, .fi-panel-admin) .vivi-dr__naam { color: var(--vivi-tekst); font-weight: 600; overflow-wrap: anywhere; }
body:is(.fi-panel-portal, .fi-panel-team, .fi-panel-admin) .vivi-dr__meta { margin: 0; color: var(--vivi-tekst-2); font-size: var(--vivi-tekst-s); }
body:is(.fi-panel-portal, .fi-panel-team, .fi-panel-admin) .vivi-dr__citaat {
    padding-left: var(--vivi-ruimte-xs); color: var(--vivi-tekst-2); font-size: var(--vivi-tekst-s); font-style: italic;
    border-left: 2px solid var(--vivi-lijn-fijn); overflow-wrap: anywhere;
}
body:is(.fi-panel-portal, .fi-panel-team, .fi-panel-admin) .vivi-dr__sub { display: grid; gap: 2px; min-width: 0; }
/* De hint past ook op 390 in het veld; getypte tekst houdt de veldmaat. */
body:is(.fi-panel-portal, .fi-panel-team, .fi-panel-admin) .vivi-dr__invoer::placeholder { color: var(--vivi-tekst-2); font-size: var(--vivi-tekst-m); opacity: 1; }
body:is(.fi-panel-portal, .fi-panel-team, .fi-panel-admin) .vivi-dr__invoer {
    width: 100%; min-width: 0; box-sizing: border-box; min-height: var(--vivi-tik-min); padding: 0 var(--vivi-ruimte-s);
    font: inherit; color: var(--vivi-tekst); background: var(--vivi-vlak);
    border: 1px solid var(--vivi-lijn-fijn); border-radius: var(--vivi-radius-m);
}

/* ---------- Zijkaart ---------- */
body:is(.fi-panel-portal, .fi-panel-team, .fi-panel-admin) .vivi-dr__kaart {
    display: grid; gap: var(--vivi-ruimte-xs); min-width: 0; padding: var(--vivi-ruimte-m);
    background: var(--vivi-vlak); border: 1px solid var(--vivi-lijn-fijn); border-radius: var(--vivi-radius-kaart);
}
body:is(.fi-panel-portal, .fi-panel-team, .fi-panel-admin) .vivi-dr__kaarttitel { margin: 0; font-size: var(--vivi-kop-s); font-weight: 600; color: var(--vivi-tekst); }
body:is(.fi-panel-portal, .fi-panel-team, .fi-panel-admin) .vivi-dr__gisteren { display: grid; gap: 2px; margin: 0; }
body:is(.fi-panel-portal, .fi-panel-team, .fi-panel-admin) .vivi-dr__gisteren dt { margin-top: var(--vivi-ruimte-xs); font-size: var(--vivi-tekst-s); font-weight: 600; color: var(--vivi-tekst); }
body:is(.fi-panel-portal, .fi-panel-team, .fi-panel-admin) .vivi-dr__gisteren dd { margin: 0; font-size: var(--vivi-tekst-s); color: var(--vivi-tekst-2); overflow-wrap: anywhere; }
body:is(.fi-panel-portal, .fi-panel-team, .fi-panel-admin) .vivi-dr__stapel { display: grid; margin: 0; padding: 0; list-style: none; }
body:is(.fi-panel-portal, .fi-panel-team, .fi-panel-admin) .vivi-dr__stapel-rij {
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px var(--vivi-ruimte-xs);
    padding: var(--vivi-ruimte-2xs) 0; border-bottom: 1px solid var(--vivi-lijn-fijn);
}
body:is(.fi-panel-portal, .fi-panel-team, .fi-panel-admin) .vivi-dr__stapel-rij:last-child { border-bottom: 0; }
body:is(.fi-panel-portal, .fi-panel-team, .fi-panel-admin) .vivi-dr__stapel-naam { min-width: 0; color: var(--vivi-tekst); font-size: var(--vivi-tekst-s); overflow-wrap: anywhere; }

body:is(.fi-panel-portal, .fi-panel-team, .fi-panel-admin) .vivi-dr__melding {
    margin: 0; padding: var(--vivi-ruimte-xs) var(--vivi-ruimte-m); font-size: var(--vivi-tekst-s);
    color: var(--vivi-tekst); background: var(--vivi-staat-let-op-vlak); border-radius: var(--vivi-radius-m);
}

/* ---------- Focus ---------- */
body:is(.fi-panel-portal, .fi-panel-team, .fi-panel-admin) :is(.vivi-dr__knop, .vivi-dr__link, .vivi-dr__overzicht-knop, .vivi-dr-keuze__optie, .vivi-dagstart__naar):focus-visible {
    outline: 2px solid var(--vivi-accent); outline-offset: 2px;
}
body:is(.fi-panel-portal, .fi-panel-team, .fi-panel-admin) :is(.vivi-dr__veld, .vivi-dr__invoer):focus-visible {
    outline: 2px solid var(--vivi-accent); outline-offset: 1px;
}

/* ---------- Dagstart: stand-up naar het dagbegin ---------- */
body.fi-panel-portal .vivi-dagstart__naar {
    display: inline-flex; align-items: center; min-height: var(--vivi-tik-min); padding: 0 var(--vivi-ruimte-m);
    font-weight: 600; color: var(--vivi-tekst); text-decoration: none;
    border: 1px solid var(--vivi-lijn-fijn); border-radius: var(--vivi-radius-pil);
}
body.fi-panel-portal .vivi-dagstart__naar:hover { border-color: var(--vivi-tekst); }

/* ---------- Dagritueel: "Dag afsluiten" is een link naar het dageinde ---------- */
body:is(.fi-panel-admin, .fi-panel-team) a.vivi-vandaag__knop { text-decoration: none; }