/*
  Offertehulp — de stijl van de voorkant.

  De waarden komen uit Soratus.Portal/wwwroot/css/tokens.css en uit de handoff van de voorkant. Ze
  staan hier als eigen variabelen en niet als import, om één reden: deze applicatie draait op een
  eigen App Service en heeft geen toegang tot de statische bestanden van het portaal. Wijkt het
  portaal af, dan is dit bestand de plek waar dat wordt nagetrokken — niet de plek waar een nieuwe
  kleur wordt bedacht.

  Geen schaduwen. Scheiding komt van randen van 1px, net als in het portaal.
*/

:root {
    --doek: #f6f7fb;
    --vlak: #ffffff;
    --vlak-zacht: #fbfbfd;

    --inkt: #0a0d1a;
    --inkt-gedempt: #575d75;
    --inkt-zacht: #767c94;
    --inkt-zeer-zacht: #9aa0b8;

    --lijn: #e3e5ee;
    --lijn-rij: #eef0f5;
    --lijn-veld: #cfd3e0;

    --blauw: #2b5bff;
    --navy: #1b1f8c;
    --merkvlak: #eef2ff;
    --merklijn: #ccd6ff;
    --rij-zacht: #f5f7ff;

    --rood-inkt: #a12a2e;
    --rood-vlak: #fdecec;
    --rood-lijn: #f0c0c2;

    --amber-inkt: #8a5a00;
    --amber-vlak: #fff5dd;
    --amber-lijn: #f0d38a;

    --groen-inkt: #0f7a45;
    --groen-vlak: #e6f7ee;
    --groen-lijn: #b7e4c9;

    --radius-badge: 4px;
    --radius-besturing: 6px;
    --radius-kaart: 8px;

    --font-ui: "Space Grotesk", system-ui, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, monospace;
    --font-woordmerk: "Sora", var(--font-ui);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--doek);
    color: var(--inkt);
    font-family: var(--font-ui);
    font-size: 14px;
    line-height: 1.5;
}

/* ── De productkop ─────────────────────────────────────────────────────── */

.oh-kop {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 24px;
    background: var(--vlak);
    border-bottom: 1px solid var(--lijn);
}

.oh-merk {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: inherit;
}

.oh-woordmerk {
    font-family: var(--font-woordmerk);
    font-weight: 200;
    font-size: 15px;
    letter-spacing: -0.04em;
}

.oh-scheider {
    width: 1px;
    height: 16px;
    background: var(--lijn-veld);
}

.oh-product {
    font-size: 14px;
    font-weight: 600;
}

.oh-badge {
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--inkt-zacht);
    border: 1px solid var(--lijn);
    border-radius: var(--radius-badge);
    padding: 1px 5px;
}

.oh-kop-rechts {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--inkt-gedempt);
}

.oh-kop-punt {
    color: var(--inkt-zeer-zacht);
}

.oh-mono {
    font-family: var(--font-mono);
}

/* ── Landing ───────────────────────────────────────────────────────────── */

.oh-landing {
    max-width: 760px;
    margin: 0 auto;
    padding: 48px 24px;
}

.oh-landing h1 {
    font-size: clamp(26px, 3.6vw, 36px);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin: 0 0 10px;
}

.oh-intro {
    font-size: 16px;
    color: var(--inkt-gedempt);
    max-width: 58ch;
    text-wrap: pretty;
    margin: 0 0 26px;
}

.oh-sleepvak-form {
    margin: 0 0 12px;
}

.oh-sleepvak {
    display: block;
    border: 2px dashed var(--merklijn);
    background: var(--vlak);
    border-radius: 12px;
    padding: 44px 28px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.oh-sleepvak:hover {
    border-color: var(--blauw);
    background: #fbfcff;
}

/* Het invoerveld zelf is onzichtbaar maar bedekt het hele vak: klikken en slepen werken daardoor
   allebei, zonder JavaScript. */
.oh-sleepvak input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.oh-sleepvak {
    position: relative;
}

.oh-sleepvak-kop {
    display: block;
    font-size: 17px;
    font-weight: 600;
}

.oh-sleepvak-sub {
    display: block;
    margin-top: 6px;
    font-size: 13.5px;
    color: var(--inkt-gedempt);
}

.oh-link {
    color: var(--blauw);
    text-decoration: underline;
}

.oh-kaarten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.oh-kaart {
    background: var(--vlak);
    border: 1px solid var(--lijn);
    border-radius: var(--radius-kaart);
    padding: 14px 16px;
}

.oh-kaart p {
    margin: 0;
    font-size: 13.5px;
}

.oh-kaart-kop {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--inkt-zacht);
    margin-bottom: 6px !important;
}

/* ── Meldingen ─────────────────────────────────────────────────────────── */

.oh-melding {
    border: 1px solid var(--lijn);
    background: var(--vlak-zacht);
    border-radius: var(--radius-besturing);
    padding: 12px 14px;
    margin-bottom: 20px;
}

.oh-melding--amber {
    border-color: var(--amber-lijn);
    background: var(--amber-vlak);
}

.oh-melding--groen {
    border-color: var(--groen-lijn);
    background: var(--groen-vlak);
}

.oh-melding-kop {
    margin: 0 0 4px;
    font-weight: 600;
    font-size: 14px;
}

.oh-melding-tekst {
    margin: 0;
    font-size: 13px;
    color: var(--inkt-gedempt);
}

/* ── Knoppen ───────────────────────────────────────────────────────────── */

.oh-knop {
    display: inline-block;
    border: 1px solid var(--lijn-veld);
    background: var(--vlak);
    color: var(--inkt-gedempt);
    font-family: inherit;
    font-size: 12.5px;
    border-radius: var(--radius-besturing);
    padding: 5px 11px;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.oh-knop:hover {
    background: var(--merkvlak);
    border-color: var(--blauw);
    color: var(--navy);
}

.oh-knop--primair {
    border-color: var(--blauw);
    background: var(--blauw);
    color: #fff;
    font-weight: 600;
    padding: 9px 14px;
    font-size: 13.5px;
    margin-top: 10px;
}

.oh-knop--primair:hover {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
}

/* ── Werkblad ──────────────────────────────────────────────────────────── */

.oh-werkblad {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
    gap: 20px;
    padding: 16px 24px 28px;
    max-width: 1360px;
    margin: 0 auto;
    align-items: start;
}

@media (max-width: 1100px) {
    .oh-werkblad {
        grid-template-columns: minmax(0, 1fr);
    }
}

.oh-paneel {
    background: var(--vlak);
    border: 1px solid var(--lijn);
    border-radius: var(--radius-kaart);
}

.oh-paneel-kop {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border-bottom: 1px solid var(--lijn);
}

.oh-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--inkt-zacht);
}

.oh-meta {
    font-size: 12.5px;
    color: var(--inkt-gedempt);
}

.oh-legenda {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--inkt-gedempt);
}

.oh-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    margin-left: 6px;
}

.oh-swatch--bron {
    background: #fff;
    border: 1px solid var(--lijn-veld);
}

.oh-swatch--jij {
    background: var(--merkvlak);
    border: 1px solid var(--blauw);
}

.oh-swatch--voorstel {
    background: #fff;
    border: 1.5px dashed var(--navy);
}

/* ── Het document ──────────────────────────────────────────────────────── */

.oh-document {
    padding: 8px 18px 18px;
}

.oh-blok {
    display: grid;
    grid-template-columns: 22px 84px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 7px 8px;
    margin: 0 -8px;
    border-radius: var(--radius-besturing);
    border-left: 3px solid transparent;
}

.oh-blok--besproken {
    background: var(--merkvlak);
}

.oh-pagina {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--inkt-zeer-zacht);
    padding-top: 5px;
}

.oh-rol {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--inkt-zacht);
    background: var(--doek);
    border-radius: var(--radius-badge);
    padding: 2px 6px;
    justify-self: start;
    margin-top: 2px;
}

.oh-rol:empty {
    background: none;
    padding: 0;
}

.oh-blok-inhoud p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.45;
    text-wrap: pretty;
}

.oh-blok-kop {
    font-size: 15px !important;
    font-weight: 600;
}

.oh-pillen {
    display: inline-flex;
    gap: 6px;
    margin-top: 6px;
}

.oh-pil {
    font-size: 11px;
    border-radius: var(--radius-badge);
    padding: 1px 6px;
    border: 1px solid;
}

.oh-pil--rekenfout {
    color: var(--rood-inkt);
    background: var(--rood-vlak);
    border-color: var(--rood-lijn);
}

.oh-pil--onduidelijk {
    color: var(--amber-inkt);
    background: var(--amber-vlak);
    border-color: var(--amber-lijn);
}

.oh-pil--ontbreekt {
    color: var(--inkt-gedempt);
    background: var(--doek);
    border-color: var(--lijn-veld);
}

/* ── De nakijk-assistent ───────────────────────────────────────────────── */

.oh-assistent {
    position: sticky;
    top: 12px;
    display: flex;
    flex-direction: column;
    min-height: 420px;
}

.oh-stippen {
    margin-left: auto;
    display: flex;
    gap: 5px;
}

.oh-stip {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 1.5px solid var(--lijn-veld);
    background: #fff;
    padding: 0;
    cursor: pointer;
}

.oh-stip--rekenfout {
    border-color: var(--rood-inkt);
}

.oh-stip--onduidelijk {
    border-color: var(--amber-inkt);
}

.oh-stip--ontbreekt {
    border-color: var(--inkt-gedempt);
}

.oh-stip--klaar.oh-stip--rekenfout {
    background: var(--rood-inkt);
}

.oh-stip--klaar.oh-stip--onduidelijk {
    background: var(--amber-inkt);
}

.oh-stip--klaar.oh-stip--ontbreekt {
    background: var(--inkt-gedempt);
}

.oh-stip--nu {
    box-shadow: 0 0 0 2px var(--merkvlak);
}

.oh-gesprek {
    flex: 1;
    overflow-y: auto;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.oh-bericht {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 10px;
}

.oh-bericht p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.5;
    max-width: 46ch;
}

.oh-bericht-merk {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #5c82ff;
    margin-top: 6px;
}

.oh-afgehandeld {
    display: flex;
    gap: 8px;
    align-items: baseline;
    font-size: 12.5px;
    color: var(--inkt-gedempt);
}

.oh-afgehandeld-glyph {
    font-family: var(--font-mono);
    color: var(--inkt-zeer-zacht);
}

.oh-afgehandeld strong {
    color: var(--inkt);
    font-weight: 500;
}

.oh-punt {
    background: var(--vlak);
    border: 1px solid var(--lijn);
    border-left: 3px solid var(--lijn-veld);
    border-radius: var(--radius-kaart);
    padding: 12px 14px;
}

.oh-punt--rekenfout {
    border-color: var(--rood-lijn);
    border-left-color: var(--rood-inkt);
}

.oh-punt--onduidelijk {
    border-color: var(--amber-lijn);
    border-left-color: var(--amber-inkt);
}

.oh-punt--ontbreekt {
    border-color: var(--lijn-veld);
    border-left-color: var(--inkt-gedempt);
}

.oh-punt-kop {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.oh-punt-plek {
    font-size: 10.5px;
    color: var(--inkt-zacht);
}

.oh-punt-positie {
    margin-left: auto;
    font-size: 10.5px;
    color: var(--inkt-zeer-zacht);
}

.oh-punt-titel {
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 500;
    text-wrap: pretty;
}

.oh-punt-toelichting {
    margin: 0 0 8px;
    font-size: 12.5px;
    color: var(--inkt-gedempt);
}

.oh-punt-vraag {
    margin: 0 0 10px;
    font-size: 13px;
}

.oh-knoppen {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.oh-statusbalk {
    border-top: 1px solid var(--lijn);
    padding: 10px 16px;
    text-align: right;
}

/* ── Herkomst, voorstel en wensbalk ────────────────────────────────────── */
/*
   De drie herkomsten dragen dezelfde kleuren als de legenda boven het document. Dat is niet
   kosmetiek maar de dragende regel van het product: op elk moment moet te zien zijn of een zin uit
   de offerte komt, door de gebruiker is aangenomen, of nog een voorstel is. Een legenda die naar
   kleuren wijst die nergens voorkomen, is erger dan geen legenda.
*/

.oh-blok--jij .oh-blok-inhoud {
    background: var(--merkvlak);
    border-radius: var(--radius-badge);
}

.oh-blok--voorstel .oh-blok-inhoud {
    outline: 1.5px dashed var(--navy);
    outline-offset: 2px;
    border-radius: var(--radius-badge);
}

/* De oude tekst blijft staan en wordt doorgehaald. Hem verbergen zou het verschil onzichtbaar
   maken, en dan keurt de gebruiker een tekst goed zonder te weten wat eruit gaat. */
.oh-vervalt {
    color: var(--inkt-zacht);
    text-decoration: line-through;
    text-decoration-color: var(--rood-lijn);
    text-decoration-thickness: 1px;
}

.oh-voorstel-tekst {
    margin: 6px 0 0;
    padding: 8px 10px;
    background: var(--merkvlak);
    border-left: 2px solid var(--navy);
    border-radius: var(--radius-badge);
}

.oh-pil--voorstel {
    color: var(--navy);
    background: var(--merkvlak);
    border-color: var(--merklijn);
}

.oh-punt--voorstel {
    border-color: var(--merklijn);
    border-left-color: var(--navy);
}

.oh-melding--rood {
    border-color: var(--rood-lijn);
    background: var(--rood-vlak);
}

.oh-composer {
    display: flex;
    flex-direction: column;
    border-top: 2px solid var(--blauw);
    padding: 12px 16px 14px;
    background: var(--vlak-zacht);
}

.oh-composer-rij {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}

.oh-composer--uit {
    align-items: center;
    padding: 10px 16px;
}

.oh-wens {
    flex: 1;
    resize: none;
    font: inherit;
    font-size: 13px;
    color: var(--inkt);
    background: var(--vlak);
    border: 1px solid var(--lijn-veld);
    border-radius: var(--radius-besturing);
    padding: 8px 10px;
}

.oh-wens:focus {
    outline: 2px solid var(--blauw);
    outline-offset: -1px;
    border-color: var(--blauw);
}

.oh-wens:disabled {
    background: var(--doek);
    color: var(--inkt-zacht);
}

.oh-composer-noot {
    padding: 0 16px 10px;
    margin: 0;
    text-align: right;
}

/* ── De verzendrij ─────────────────────────────────────────────────────── */

.oh-verzendrij {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 10px;
}

.oh-veld {
    flex: 1;
    font: inherit;
    font-size: 13px;
    color: var(--inkt);
    background: var(--vlak);
    border: 1px solid var(--lijn-veld);
    border-radius: var(--radius-besturing);
    padding: 8px 10px;
}

.oh-veld:focus {
    outline: 2px solid var(--blauw);
    outline-offset: -1px;
    border-color: var(--blauw);
}

.oh-veld:disabled {
    background: var(--doek);
    color: var(--inkt-zacht);
}

.oh-verzendfout {
    margin-top: 8px;
    color: var(--rood-inkt);
}

/* ── De flyin met de disclaimer ─────────────────────────────────────────────────────────────────
   Van rechts in beeld, met een laag eronder die de klik opvangt. Twee uitgangen dus: de knop en
   alles ernaast. Op een smal scherm schuift hij van onderen op, want een paneel van 420px naast een
   telefoon is een paneel dat je niet ziet. */

.oh-link--knop {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    cursor: pointer;
}

.oh-flyin-laag {
    position: fixed;
    inset: 0;
    background: rgba(10, 13, 26, 0.28);
    z-index: 40;
}

.oh-flyin {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 420px;
    max-width: 92vw;
    z-index: 41;
    overflow-y: auto;
    padding: 22px 24px 28px;
    background: var(--vlak);
    border-left: 1px solid var(--lijn);
    box-shadow: -14px 0 40px rgba(10, 13, 26, 0.12);
    animation: oh-flyin-in 160ms ease-out;
}

@keyframes oh-flyin-in {
    from { transform: translateX(16px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.oh-flyin-kop {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.oh-flyin-titel {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
}

.oh-flyin-sluit {
    background: none;
    border: 0;
    padding: 0 4px;
    font-size: 20px;
    line-height: 1;
    color: var(--inkt-gedempt);
    cursor: pointer;
}

.oh-flyin-sluit:hover {
    color: var(--inkt);
}

.oh-flyin-tekst {
    margin: 0 0 12px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--inkt-gedempt);
}

@media (max-width: 640px) {
    .oh-flyin {
        top: auto;
        left: 0;
        width: auto;
        max-width: none;
        max-height: 80vh;
        border-left: 0;
        border-top: 1px solid var(--lijn);
        border-radius: 12px 12px 0 0;
        animation: oh-flyin-omhoog 160ms ease-out;
    }

    @keyframes oh-flyin-omhoog {
        from { transform: translateY(16px); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
    }
}

/* ── De voet van het werkblad ───────────────────────────────────────────────────────────────────
   Wat hier staat zijn geen berichten maar vaste onderdelen van het scherm: het toesturen en de link
   naar de disclaimer. Tussen de bevindingen gezet maakten ze de kolom druk, en ze schoven mee
   omhoog terwijl ze juist moeten blijven staan. */

.oh-voet {
    padding: 14px 16px 0;
    border-top: 1px solid var(--lijn);
}

.oh-voet .oh-melding {
    margin-bottom: 12px;
}

.oh-voet > p:last-child {
    margin-bottom: 14px;
}

/* Het kruisje op een melding die je weg mag klikken. */

.oh-melding {
    position: relative;
}

.oh-melding-sluit {
    position: absolute;
    top: 8px;
    right: 10px;
    background: none;
    border: 0;
    padding: 0 2px;
    font-size: 16px;
    line-height: 1;
    color: var(--inkt-zeer-zacht);
    cursor: pointer;
}

.oh-melding-sluit:hover {
    color: var(--inkt-gedempt);
}

.oh-melding-sluit + .oh-melding-kop {
    padding-right: 20px;
}

/* ── Bladeren door de punten ────────────────────────────────────────────────────────────────────
   Twee pijltjes naast de teller. Ze staan uit aan het begin en aan het eind, want een pijl die
   niets doet is erger dan een pijl die er niet is. */

.oh-blader {
    display: inline-flex;
    gap: 2px;
    margin-left: 6px;
}

.oh-blader-knop {
    background: none;
    border: 1px solid var(--lijn);
    border-radius: 4px;
    width: 20px;
    height: 20px;
    padding: 0;
    font-size: 13px;
    line-height: 1;
    color: var(--inkt-gedempt);
    cursor: pointer;
}

.oh-blader-knop:hover:not(:disabled) {
    border-color: var(--blauw);
    color: var(--blauw);
}

.oh-blader-knop:disabled {
    opacity: 0.35;
    cursor: default;
}

/* ── De voortgang tijdens de intake ─────────────────────────────────────────────────────────────
   Drie standen: klaar, loopt, wacht. De lopende regel pulseert zachtjes; zonder dat verschil ziet
   een lijst waarin alles wacht eruit als een lijst waarin niets gebeurt. */

.oh-voortgang {
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}

.oh-voortgang-regel {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--inkt-zeer-zacht);
}

.oh-voortgang-glyph {
    width: 12px;
    flex: none;
    text-align: center;
}

.oh-voortgang-regel--klaar {
    color: var(--inkt-gedempt);
}

.oh-voortgang-regel--klaar .oh-voortgang-glyph {
    color: var(--groen-inkt, #1b7f4b);
}

.oh-voortgang-regel--loopt {
    color: var(--inkt);
    font-weight: 500;
}

.oh-voortgang-regel--loopt .oh-voortgang-glyph {
    color: var(--blauw);
    animation: oh-pulse 1.1s ease-in-out infinite;
}

@keyframes oh-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.25; }
}

/* ── De wensbalk ────────────────────────────────────────────────────────────────────────────────
   Dit veld is het verschil tussen een nakijkscherm en een werkblad, en het stond eruit als een
   naamloos invoervak onder aan een kolom. Nu met een kop, een zin die zegt wat je ermee kunt, en
   een rand die hem van de rest losmaakt. */

.oh-composer-kop {
    margin: 0 0 2px;
    font-size: 14px;
    font-weight: 600;
    color: var(--inkt);
}

.oh-composer-uitleg {
    margin: 0 0 8px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--inkt-gedempt);
}

.oh-keuze {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
    margin: 0 0 8px;
    padding: 6px 10px;
    border: 1px solid var(--blauw);
    border-radius: 6px;
    background: rgba(43, 91, 255, 0.06);
    font-size: 12.5px;
    color: var(--inkt);
}

/* Een blok dat je kunt aanwijzen, en het blok dat is aangewezen. */

.oh-blok {
    cursor: pointer;
}

.oh-blok:hover {
    background: var(--vlak-zacht);
}

.oh-blok--gekozen {
    background: rgba(43, 91, 255, 0.07);
    outline: 2px solid var(--blauw);
    outline-offset: -2px;
}

.oh-blok:focus-visible {
    outline: 2px solid var(--blauw);
    outline-offset: -2px;
}

/* Een voorstel dat een alinea toevoegt in plaats van er een te vervangen. */

.oh-pil--nieuw {
    background: var(--groen-vlak, #e8f8ef);
    border: 1px solid var(--groen-lijn, #a8e0c0);
    color: var(--groen-inkt, #1b7f4b);
    margin-right: 6px;
}

/* De knop die alle punten ineens verwerkt, met de zin die zegt wat hij doet. */

.oh-autofix {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 10px;
    padding: 8px 10px;
    border: 1px solid var(--lijn);
    border-radius: 6px;
    background: var(--vlak);
}

.oh-autofix .oh-meta {
    font-size: 12px;
    line-height: 1.5;
}

.oh-autofix .oh-knop {
    flex: none;
}

/* Het versienummer in de kopbalk. Klein en gedempt: het hoort er te staan voor wie ernaar zoekt,
   niet te concurreren met de productnaam ernaast. */

.oh-versie {
    font-size: 11.5px;
    color: var(--inkt-zeer-zacht);
}