/* =======================================================================
   WESTCUBE TOOLBOX — pagina-specifieke styling

   Alleen styling voor de toolbox-navigatie, hero en categorie-kaarten.
   Gebruikt uitsluitend bestaande design tokens uit design-tokens.css.
   Geen !important, scoping op .toolbox-* classes.
   ======================================================================= */

/* -----------------------------------------------------------------------
   HIDDEN-ATTRIBUUT — moet winnen van elke .toolbox-*-klasse die display zet

   De browserregel [hidden] { display: none } heeft specificiteit 0,1,0 en
   verliest daarmee van een klasseselector met dezelfde specificiteit die
   later in de cascade staat. Elke widget die een element met een
   .toolbox-*-klasse verbergt via `el.hidden = true` zag dat element dus
   gewoon zichtbaar blijven — op 19-08-2026 gold dat voor 18 klassen, van de
   ratio-keuze in de cropper tot de GIF-maker en de upload-voortgang.

   De combinatie hieronder is 0,2,0 en wint wél, zonder !important. Bewust
   generiek: een regel per widget betekent dat de volgende widget opnieuw in
   dezelfde val loopt.

   Wil een widget een element tóch tonen terwijl het `hidden` heeft (zeldzaam,
   en meestal een teken dat je een klasse wilt in plaats van het attribuut),
   dan is een selector van 0,3,0 of hoger nodig.
   ----------------------------------------------------------------------- */
[class^="toolbox-"][hidden],
[class*=" toolbox-"][hidden] {
    display: none;
}

/* -----------------------------------------------------------------------
   NAVIGATIE — kale logo-header, geen commerciële navigatie
   ----------------------------------------------------------------------- */
.toolbox-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(250, 250, 249, 0.85);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-bottom: 1px solid var(--wc-stone-border);
}

.toolbox-nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 16px;
    padding-bottom: 16px;
}

.toolbox-nav__logo {
    display: inline-flex;
    align-items: center;
}

.toolbox-nav__logo img {
    display: block;
    height: 32px;
    width: auto;
}

.toolbox-nav__back {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--wc-stone);
    text-decoration: none;
    transition: color var(--wc-duration) var(--wc-ease);
}

.toolbox-nav__back:hover {
    color: var(--wc-signal);
}

/* -----------------------------------------------------------------------
   NAVIGATIE — taalwisselaar + deelwidget (rechterkant van de nav, naast de
   terug-naar-Toolbox-link). Zie templates/toolbox/base_toolbox.html.
   ----------------------------------------------------------------------- */
.toolbox-nav__actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

.toolbox-nav__lang {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.toolbox-nav__lang-current {
    color: var(--wc-ink);
}

.toolbox-nav__lang-sep {
    color: var(--wc-stone-border);
}

.toolbox-nav__lang-link {
    color: var(--wc-stone);
    text-decoration: none;
    transition: color var(--wc-duration) var(--wc-ease);
}

.toolbox-nav__lang-link:hover,
.toolbox-nav__lang-link:focus-visible {
    color: var(--wc-signal);
}

.toolbox-nav__lang-link:focus-visible {
    outline: 2px solid var(--wc-signal);
    outline-offset: 2px;
    border-radius: var(--wc-radius-sm);
}

/* Deelwidget: icoonknop + popover-menu met 5 platforms. */
.toolbox-share {
    position: relative;
}

.toolbox-share__toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 6px 12px;
    font-family: var(--wc-font-primary);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--wc-stone);
    background: transparent;
    border: 1px solid var(--wc-stone-border);
    border-radius: var(--wc-radius-xl);
    cursor: pointer;
    transition: color var(--wc-duration) var(--wc-ease), border-color var(--wc-duration) var(--wc-ease), background var(--wc-duration) var(--wc-ease);
}

.toolbox-share__toggle:hover,
.toolbox-share__toggle.is-open {
    color: var(--wc-signal);
    border-color: var(--wc-signal);
    background: var(--wc-mira-soft);
}

.toolbox-share__toggle:focus-visible {
    outline: 2px solid var(--wc-signal);
    outline-offset: 2px;
}

.toolbox-share__label {
    display: none;
}

.toolbox-share__menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 110;
    display: flex;
    flex-direction: column;
    min-width: 196px;
    padding: 6px;
    background: var(--wc-white);
    border: 1px solid var(--wc-stone-border);
    border-radius: var(--wc-radius-md);
    box-shadow: 0 16px 32px rgba(28, 25, 23, 0.12);
}

.toolbox-share__menu[hidden] {
    display: none;
}

.toolbox-share__item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 8px 10px;
    font-family: var(--wc-font-primary);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--wc-ink);
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: var(--wc-radius-sm);
    cursor: pointer;
    transition: color var(--wc-duration) var(--wc-ease), background var(--wc-duration) var(--wc-ease);
}

.toolbox-share__item svg {
    flex-shrink: 0;
    color: var(--wc-stone);
    transition: color var(--wc-duration) var(--wc-ease);
}

.toolbox-share__item:hover,
.toolbox-share__item:focus-visible {
    color: var(--wc-signal);
    background: var(--wc-mira-soft);
    outline: none;
}

.toolbox-share__item:hover svg,
.toolbox-share__item:focus-visible svg {
    color: var(--wc-signal);
}

@media (min-width: 640px) {
    .toolbox-share__label {
        display: inline;
    }
}

@media (max-width: 480px) {
    .toolbox-nav__inner {
        flex-wrap: wrap;
        row-gap: 10px;
    }

    .toolbox-nav__actions {
        width: 100%;
        justify-content: space-between;
    }
}

/* -----------------------------------------------------------------------
   HERO
   ----------------------------------------------------------------------- */
.toolbox-hero {
    background: var(--wc-canvas);
    padding: 88px 0 72px;
}

.toolbox-hero__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 48px;
}

.toolbox-hero__label {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--wc-ember);
    margin-bottom: 20px;
}

.toolbox-hero__title {
    font-family: var(--wc-font-accent);
    font-size: clamp(2.25rem, 4vw, 3.25rem);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--wc-ink);
    margin-bottom: 24px;
}

.toolbox-hero__title strong {
    color: var(--wc-signal);
    font-weight: 600;
}

.toolbox-hero__subtitle {
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--wc-stone);
    max-width: 480px;
    margin-bottom: 32px;
}

.toolbox-hero__actions {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.toolbox-hero__visual {
    position: relative;
}

.toolbox-hero__image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--wc-radius-lg);
}

/* -----------------------------------------------------------------------
   CATEGORIEËN
   ----------------------------------------------------------------------- */
.toolbox-categories {
    background: var(--wc-canvas-alt);
    padding: 80px 0 96px;
    border-top: 1px solid var(--wc-stone-border);
}

.toolbox-categories__header {
    max-width: 640px;
    margin: 0 auto 48px;
    text-align: center;
}

.toolbox-eyebrow {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--wc-pulse);
    margin-bottom: 12px;
}

.toolbox-categories__title {
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 600;
    color: var(--wc-ink);
    margin-bottom: 12px;
}

.toolbox-categories__subtitle {
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--wc-stone);
}

.toolbox-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.toolbox-card {
    background: var(--wc-white);
    border: 1px solid var(--wc-stone-border);
    border-radius: var(--wc-radius-lg);
    padding: 28px;
    transition: transform 0.18s var(--wc-ease), box-shadow 0.18s var(--wc-ease);
}

.toolbox-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(28, 25, 23, 0.07);
}

@media (prefers-reduced-motion: reduce) {
    .toolbox-card,
    .toolbox-card:hover {
        transition: box-shadow 0.18s var(--wc-ease);
        transform: none;
    }
}

/* Alleen de individuele tool-links krijgen de groene accentbalk bij hover;
   de categorie-card zelf behoudt zijn neutrale achtergrond. De afmetingen van
   die balk staan in de rustregel hieronder (.toolbox-card__tool-link), zodat
   hover niets aan de layout verandert -- anders groeit elk item 9px en
   verspringt de hele grid onder je muis. */
.toolbox-card__tool-link:hover {
    background: var(--wc-ember);
    color: var(--wc-white);
    text-decoration: none;
}

.toolbox-card__badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: var(--wc-radius-xl);
    background: var(--wc-mira-soft);
    color: var(--wc-signal);
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 16px;
}

.toolbox-card__badge--phase2 {
    background: var(--wc-stone-subtle);
    color: var(--wc-ink-light);
}

.toolbox-card--phase2 {
    opacity: 0.85;
}

.toolbox-card__title {
    font-size: 1.1875rem;
    font-weight: 600;
    color: var(--wc-ink);
    margin-bottom: 10px;
}

.toolbox-card__desc {
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--wc-stone);
}

.toolbox-card__tools--planned small {
    margin-left: 4px;
    color: var(--wc-stone);
    font-size: .75rem;
}

.toolbox-card__tools--planned .toolbox-card__tool-link:hover small {
    color: var(--wc-white);
}

.toolbox-card__tools {
    list-style: none;
    margin: 16px 0 0;
    padding: 12px 0 0;
    border-top: 1px solid var(--wc-stone-border);
}

.toolbox-card__tools li {
    position: relative;
    padding: 0;
}

.toolbox-card__tools li::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 14px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--wc-signal);
}

.toolbox-card__tool-link {
    display: block;
    padding: 6px 12px 6px 16px;
    border-radius: var(--wc-radius-sm);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--wc-signal);
    text-decoration: none;
    transition: color 0.15s var(--wc-ease), background 0.15s var(--wc-ease);
}

/* De zes ingangen van de beeldstudio staan als één groep in de
   Afbeeldingen-card: een kop met de taken er op één regel onder. Zes losse
   regels die allemaal dezelfde tool openen, leest als zes verschillende
   tools — en dat was nu juist de verwarring die de studio oplost. */
.toolbox-card__tool-group {
    display: block;
    padding: 6px 12px 0 16px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--wc-ink);
}

.toolbox-card__tool-sub {
    display: block;
    padding: 0 12px 8px 16px;
    font-size: 0.8125rem;
    line-height: 1.7;
    color: var(--wc-stone);
}

.toolbox-card__tool-sub .toolbox-card__tool-link {
    display: inline;
    padding: 0;
    font-size: inherit;
}

/* Alleen wit maken als de balk er ook echt is: op een gepland item (geen link)
   verdween het bolletje anders in het wit zodra je erlangs bewoog. */
.toolbox-card__tools li:has(> .toolbox-card__tool-link:hover)::before {
    background: var(--wc-white);
}

/* Niet-klikbaar item binnen een tools-lijst (bv. text-anonymizer terwijl de
   AI-detectie-modelkeuze on hold staat, zie
   docs/toolbox/pii_model_herziening_plan.md) — zelfde ritme als de andere
   lijst-items, maar gedempte kleur i.p.v. de actieve linkkleur, zodat
   duidelijk is dat er niets te openen valt. */
.toolbox-card__tool-planned {
    display: inline-block;
    padding: 6px 0 6px 16px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--wc-stone);
}

.toolbox-card__tool-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: var(--wc-radius-xl);
    background: var(--wc-stone-subtle);
    color: var(--wc-ink-light);
    font-size: 0.6875rem;
    font-weight: 600;
    vertical-align: middle;
}


/* -----------------------------------------------------------------------
   FOOTER — compact, los van de bedrijfsfooter (eigen product-gevoel)
   ----------------------------------------------------------------------- */
.toolbox-footer {
    background: var(--wc-ink);
    border-top: 1px solid var(--wc-stone-border);
    padding: 28px 0;
}

.toolbox-footer__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.toolbox-footer__brand {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.toolbox-footer__name {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--wc-canvas);
}

.toolbox-footer__desc {
    font-size: 0.8125rem;
    color: var(--wc-stone-light);
}

.toolbox-footer__links {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.toolbox-footer__links a {
    font-size: 0.8125rem;
    color: var(--wc-stone-light);
    text-decoration: none;
    transition: color var(--wc-duration) var(--wc-ease);
}

.toolbox-footer__links a:hover {
    color: var(--wc-canvas);
}

.toolbox-footer__copyright {
    font-size: 0.8125rem;
    color: var(--wc-stone-light);
    white-space: nowrap;
}

/* -----------------------------------------------------------------------
   RESPONSIVE
   ----------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .toolbox-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 860px) {
    .toolbox-hero__inner {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .toolbox-hero__subtitle {
        margin-left: auto;
        margin-right: auto;
    }

    .toolbox-hero__actions {
        justify-content: center;
    }

    .toolbox-hero__visual {
        order: -1;
    }
}

@media (max-width: 640px) {
    .toolbox-grid {
        grid-template-columns: 1fr;
    }

    .toolbox-nav__back {
        font-size: 0.8125rem;
    }

    .toolbox-footer__inner {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* =========================================================================
   TOOLPAGINA — individuele tool (bv. UUID Generator)

   Scoping op .toolbox-tool-* zodat dit los blijft van de homepage-classes
   hierboven. Zelfde tokens, zelfde ritme (container, wc-radius-*, wc-stone-*).
   ========================================================================= */
.toolbox-tool-hero {
    background: var(--wc-canvas);
    padding: 64px 0 40px;
    border-bottom: 1px solid var(--wc-stone-border);
}

.toolbox-tool-hero__inner {
    max-width: 720px;
}

.toolbox-tool-hero__breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8125rem;
    color: var(--wc-stone);
    margin-bottom: 20px;
}

.toolbox-tool-hero__breadcrumb a {
    color: var(--wc-stone);
    text-decoration: none;
}

.toolbox-tool-hero__breadcrumb a:hover {
    color: var(--wc-signal);
}

.toolbox-tool-hero__label {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--wc-ember);
    margin-bottom: 16px;
}

.toolbox-tool-hero__title {
    font-family: var(--wc-font-accent);
    font-size: clamp(2rem, 3.5vw, 2.75rem);
    font-weight: 500;
    line-height: 1.2;
    color: var(--wc-ink);
    margin-bottom: 20px;
}

.toolbox-tool-hero__intro {
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--wc-stone);
}

/* -----------------------------------------------------------------------
   WIDGET — de daadwerkelijke generator
   ----------------------------------------------------------------------- */
.toolbox-tool-widget {
    padding: 48px 0;
}

.toolbox-tool-widget__panel {
    background: var(--wc-white);
    border: 1px solid var(--wc-stone-border);
    border-radius: var(--wc-radius-lg);
    padding: 32px;
    box-shadow: 0 16px 32px rgba(28, 25, 23, 0.06);
}

.toolbox-tool-widget__controls {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.toolbox-tool-widget__count {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.toolbox-tool-widget__count-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--wc-stone);
}

.toolbox-tool-widget__count-input {
    width: 88px;
    padding: 10px 12px;
    font-size: 0.9375rem;
    font-family: var(--wc-font-primary);
    color: var(--wc-ink);
    background: var(--wc-canvas);
    border: 1px solid var(--wc-stone-border);
    border-radius: var(--wc-radius-sm);
}

.toolbox-tool-widget__count-input:focus {
    outline: none;
    border-color: var(--wc-signal);
    box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.08);
}

.toolbox-tool-widget__results {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.toolbox-tool-widget__row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--wc-canvas);
    border: 1px solid var(--wc-stone-border);
    border-radius: var(--wc-radius-sm);
}

.toolbox-tool-widget__value {
    flex: 1;
    min-width: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
    font-size: 0.9375rem;
    color: var(--wc-ink);
    overflow-x: auto;
    white-space: nowrap;
}

.toolbox-tool-widget__copy-btn {
    flex-shrink: 0;
    padding: 6px 14px;
    font-family: var(--wc-font-primary);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--wc-signal);
    background: var(--wc-mira-soft);
    border: none;
    border-radius: var(--wc-radius-sm);
    cursor: pointer;
    transition: background var(--wc-duration) var(--wc-ease), color var(--wc-duration) var(--wc-ease);
}

.toolbox-tool-widget__copy-btn:hover {
    background: rgba(37, 99, 235, 0.16);
}

.toolbox-tool-widget__copy-btn:focus-visible {
    outline: 2px solid var(--wc-signal);
    outline-offset: 2px;
}

.toolbox-tool-widget__copy-btn.is-copied {
    color: var(--wc-white);
    background: var(--wc-ember);
}

.toolbox-tool-widget__copy-btn:disabled {
    color: var(--wc-stone-light);
    background: var(--wc-canvas-alt);
    cursor: not-allowed;
}

.toolbox-tool-widget__bulk-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
}

.toolbox-tool-widget__noscript {
    font-size: 0.9375rem;
    color: var(--wc-stone);
    line-height: 1.7;
}

.toolbox-tool-widget__noscript code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
    color: var(--wc-ink);
}

/* -----------------------------------------------------------------------
   ENCODE/DECODE WIDGET — twee textareas (Base64/URL encoder & decoder)

   Hergebruikt .toolbox-tool-widget__panel als basis (zie hierboven) en
   .toolbox-tool-widget__copy-btn voor de kopieerknop. Alleen de
   textarea-layout en foutmelding zijn hier nieuw.
   ----------------------------------------------------------------------- */
.toolbox-tool-widget__io {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.toolbox-tool-widget__field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.toolbox-tool-widget__field-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--wc-stone);
}

.toolbox-tool-widget__input,
.toolbox-tool-widget__output {
    width: 100%;
    min-height: 180px;
    padding: 14px 16px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--wc-ink);
    background: var(--wc-canvas);
    border: 1px solid var(--wc-stone-border);
    border-radius: var(--wc-radius-sm);
    resize: vertical;
}

.toolbox-tool-widget__input:focus,
.toolbox-tool-widget__output:focus {
    outline: none;
    border-color: var(--wc-signal);
    box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.08);
}

.toolbox-tool-widget__output {
    background: var(--wc-canvas-alt);
}

.toolbox-tool-widget__output-actions {
    display: flex;
    justify-content: flex-end;
}

.toolbox-tool-widget__error {
    margin-top: 4px;
    padding: 10px 14px;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--wc-color-danger);
    background: var(--wc-color-danger-bg);
    border: 1px solid var(--wc-color-danger-border);
    border-radius: var(--wc-radius-sm);
}

/* Bevestiging na een geslaagde actie (bv. download) — zelfde vorm als de
   foutmelding hierboven, alleen in de success-kleuren. */
.toolbox-tool-widget__status {
    margin-top: 4px;
    padding: 10px 14px;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--wc-color-success);
    background: var(--wc-color-success-bg);
    border: 1px solid var(--wc-color-success-border);
    border-radius: var(--wc-radius-sm);
}

/* -----------------------------------------------------------------------
   VOORBEELDEN
   ----------------------------------------------------------------------- */
.toolbox-tool-examples {
    padding: 8px 0 48px;
}

.toolbox-tool-examples__title {
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--wc-ink);
    margin-bottom: 16px;
}

.toolbox-tool-examples__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.toolbox-tool-examples__list code {
    display: block;
    padding: 10px 14px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
    font-size: 0.875rem;
    color: var(--wc-stone);
    background: var(--wc-canvas-alt);
    border-radius: var(--wc-radius-sm);
    overflow-x: auto;
}

/* -----------------------------------------------------------------------
   FAQ — native <details>/<summary>, werkt zonder JavaScript
   ----------------------------------------------------------------------- */
.toolbox-tool-faq {
    padding: 8px 0 56px;
    border-top: 1px solid var(--wc-stone-border);
}

.toolbox-tool-faq__title {
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--wc-ink);
    margin: 40px 0 20px;
}

.toolbox-tool-faq__item {
    border-bottom: 1px solid var(--wc-stone-border);
}

.toolbox-tool-faq__item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 4px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--wc-ink);
    cursor: pointer;
    list-style: none;
}

.toolbox-tool-faq__item summary::-webkit-details-marker {
    display: none;
}

.toolbox-tool-faq__item summary::after {
    content: '+';
    flex-shrink: 0;
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--wc-stone);
    transition: transform var(--wc-duration) var(--wc-ease);
}

.toolbox-tool-faq__item[open] summary::after {
    content: '\2212';
}

.toolbox-tool-faq__item summary:focus-visible {
    outline: 2px solid var(--wc-signal);
    outline-offset: 2px;
}

.toolbox-tool-faq__answer {
    padding: 0 4px 20px;
    font-size: 0.9375rem;
    line-height: 1.75;
    color: var(--wc-stone);
}

/* -----------------------------------------------------------------------
   GERELATEERDE TOOLS
   ----------------------------------------------------------------------- */
.toolbox-tool-related {
    padding: 8px 0 64px;
}

.toolbox-tool-related__panel {
    padding: 24px 28px;
    background: var(--wc-canvas-alt);
    border-radius: var(--wc-radius-lg);
}

.toolbox-tool-related__heading {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--wc-stone);
    margin: 0 0 16px;
}

.toolbox-tool-related__list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px 24px;
    margin: 0 0 20px;
    padding: 0;
}

.toolbox-tool-related__item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.toolbox-tool-related__link {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--wc-ink);
    transition: color var(--wc-duration);
}

.toolbox-tool-related__link:hover {
    color: var(--wc-ember);
}

.toolbox-tool-related__category {
    font-size: 0.75rem;
    color: var(--wc-stone);
}

.toolbox-tool-related__note {
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--wc-stone);
    margin: 0;
    padding-top: 16px;
    border-top: 1px solid var(--wc-stone-border);
}

.toolbox-tool-related__all {
    color: var(--wc-ember);
    font-weight: 600;
    white-space: nowrap;
}

.toolbox-tool-related__all:hover {
    text-decoration: underline;
}

/* IMAGE TOOLS — browser-only upload, preview and canvas controls
   Was hier eerder per ongeluk als losstaand dark-theme-restje ingevoegd
   (ongedefinieerde --toolbox-*-custom-properties met donkere fallback-hex,
   viel altijd terug op die fallbacks) — vandaar de onleesbare grijze
   dropdowns met zwarte tekst en de te lichte labels op de lichte
   toolbox-achtergrond. Vervangen door de bestaande --wc-*-tokens, zelfde
   patroon als .toolbox-tool-widget__field-label/__input hierboven. */
/* Deze vier .toolbox-image-tool__*-klassen zijn geen restant van de oude
   beeldtools: de watermerk-, GIF- en inkleurtool, de QR-generator, de
   URL-verkorter en de content-, AI- en diagramwidgets hangen er hun upload,
   privacyregel en knoppenbalk aan op. De rest van dat blok is met de
   samenvoeging tot de Afbeeldingsstudio verdwenen. */
.toolbox-image-tool__upload { display: grid; gap: .75rem; padding: 1.5rem; border: 1px dashed var(--wc-stone-border); border-radius: 1rem; }
.toolbox-image-tool__upload input[type="file"] { color: var(--wc-ink); max-width: 100%; }
.toolbox-image-tool__privacy { margin: 0; color: var(--wc-stone); font-size: .9rem; }
.toolbox-upload-progress { display: grid; gap: .4rem; color: var(--wc-stone); font-size: .8125rem; }
.toolbox-upload-progress__track { height: .5rem; overflow: hidden; background: var(--wc-stone-border); border-radius: 999px; }
.toolbox-upload-progress__bar { width: 0; height: 100%; background: var(--wc-ember); transition: width .15s ease; }
.toolbox-image-tool__preview-label { color: var(--wc-ink); font-size: .8125rem; font-weight: 600; }
.toolbox-image-tool__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.toolbox-gif-maker__frames { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: .75rem; margin-top: 1.25rem; }
.toolbox-gif-maker__frame { display: grid; grid-template-rows: 6rem minmax(3.5rem, auto); gap: .4rem; min-width: 0; padding: .6rem; color: var(--wc-stone); background: var(--wc-canvas-alt); border: 1px solid var(--wc-stone-border); border-radius: .5rem; font-size: .8rem; }
.toolbox-gif-maker__frame img { display: block; width: 100%; height: 6rem; object-fit: contain; border-radius: .35rem; background: var(--wc-white); }
.toolbox-gif-maker__frame span { min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
.toolbox-gif-maker__controls { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.toolbox-gif-maker__controls label { display: grid; gap: .4rem; color: var(--wc-stone); font-size: .8125rem; font-weight: 600; }
.toolbox-gif-maker__controls input { width: 100%; min-height: 2.75rem; padding: .55rem .7rem; color: var(--wc-ink); background: var(--wc-canvas); border: 1px solid var(--wc-stone-border); border-radius: .5rem; }
.toolbox-gif-maker__preview { display: grid; gap: .5rem; margin-top: 1.25rem; padding: 1rem; background: var(--wc-canvas-alt); border: 1px solid var(--wc-stone-border); border-radius: .75rem; }
.toolbox-gif-maker__preview img { display: block; width: min(100%, 28rem); aspect-ratio: var(--gif-preview-ratio, 1 / 1); height: auto; max-height: 28rem; margin: auto; object-fit: contain; }
.toolbox-gif-maker__controls select { width: 100%; min-height: 2.75rem; padding: .55rem .7rem; color: var(--wc-ink); background: var(--wc-canvas); border: 1px solid var(--wc-stone-border); border-radius: .5rem; }
.toolbox-gif-maker__hint { font-weight: 400; font-size: .75rem; color: var(--wc-stone); }
.toolbox-gif-maker__preview-head { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.toolbox-gif-maker__size { color: var(--wc-stone); font-size: .8125rem; }
.toolbox-gif-maker__size strong { color: var(--wc-ink); font-variant-numeric: tabular-nums; }
@media (max-width: 900px) {
    .toolbox-gif-maker__controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .toolbox-gif-maker__controls { grid-template-columns: 1fr; }
}
.toolbox-social-cropper__stage, .toolbox-watermark__stage, .toolbox-recolor__stage { margin-top: 1.25rem; overflow: auto; text-align: center; background: repeating-conic-gradient(var(--wc-stone-border) 0 25%, var(--wc-canvas-alt) 0 50%) 50% / 1rem 1rem; border-radius: .75rem; }
.toolbox-social-cropper__stage canvas, .toolbox-watermark__stage canvas, .toolbox-recolor__stage canvas { display: block; max-width: 100%; max-height: 32rem; margin: auto; cursor: crosshair; }
.toolbox-social-cropper__controls, .toolbox-watermark__controls, .toolbox-recolor__controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.toolbox-social-cropper__controls label, .toolbox-watermark__controls label, .toolbox-recolor__controls label { display: grid; gap: .4rem; color: var(--wc-stone); font-size: .8125rem; font-weight: 600; }
.toolbox-social-cropper__controls input, .toolbox-social-cropper__controls select, .toolbox-watermark__controls input, .toolbox-watermark__controls select, .toolbox-recolor__controls input { width: 100%; min-height: 2.75rem; padding: .55rem .7rem; color: var(--wc-ink); background: var(--wc-canvas); border: 1px solid var(--wc-stone-border); border-radius: .5rem; }
.toolbox-social-cropper__controls input[type="range"], .toolbox-watermark__controls input[type="range"], .toolbox-recolor__controls input[type="range"] { padding: 0; }
.toolbox-recolor__controls input[type="color"] { padding: .25rem; cursor: pointer; }
.toolbox-recolor__hint { margin: 1rem 0 0; padding: .6rem .9rem; color: var(--wc-stone); background: var(--wc-canvas-alt); border: 1px solid var(--wc-stone-border); border-radius: .5rem; font-size: .8125rem; font-weight: 600; text-align: center; }
.toolbox-content-tool__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.toolbox-content-tool__status { color: var(--wc-color-success); font-size: .9rem; font-weight: 600; }
/* 'Fout gevonden' stond in het groen: de kleur was hardcoded op de
   succes-token en fail() wisselde geen class. Gemeld 21-08-2026. */
.toolbox-content-tool__status.is-error { color: var(--wc-color-danger); }
.toolbox-content-tool__textarea { min-height: 20rem; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.toolbox-content-tool__preview { margin-top: 1rem; padding: 1rem 1.25rem; color: var(--wc-ink); background: var(--wc-canvas-alt); border: 1px solid var(--wc-stone-border); border-radius: .75rem; }
.toolbox-content-tool__preview p { margin: 0 0 .65rem; }
.toolbox-content-tool__preview p:last-child, .toolbox-content-tool__preview ul:last-child, .toolbox-content-tool__preview ol:last-child, .toolbox-content-tool__preview blockquote:last-child, .toolbox-content-tool__preview pre:last-child, .toolbox-content-tool__preview table:last-child { margin-bottom: 0; }
.toolbox-content-tool__preview h1, .toolbox-content-tool__preview h2, .toolbox-content-tool__preview h3, .toolbox-content-tool__preview h4, .toolbox-content-tool__preview h5, .toolbox-content-tool__preview h6 { margin: 1rem 0 .5rem; font-weight: 700; line-height: 1.3; color: var(--wc-ink); }
.toolbox-content-tool__preview h1:first-child, .toolbox-content-tool__preview h2:first-child, .toolbox-content-tool__preview h3:first-child, .toolbox-content-tool__preview h4:first-child, .toolbox-content-tool__preview h5:first-child, .toolbox-content-tool__preview h6:first-child { margin-top: 0; }
.toolbox-content-tool__preview h1 { font-size: 1.5rem; }
.toolbox-content-tool__preview h2 { font-size: 1.3rem; }
.toolbox-content-tool__preview h3 { font-size: 1.15rem; }
.toolbox-content-tool__preview h4 { font-size: 1.05rem; }
.toolbox-content-tool__preview h5 { font-size: 1rem; }
.toolbox-content-tool__preview h6 { font-size: .9rem; color: var(--wc-stone); }
.toolbox-content-tool__preview ul { margin: 0 0 .65rem; padding-left: 1.25rem; list-style-type: disc; }
.toolbox-content-tool__preview ol { margin: 0 0 .65rem; padding-left: 1.25rem; list-style-type: decimal; }
.toolbox-content-tool__preview li { margin-bottom: .35rem; }
.toolbox-content-tool__preview a { color: var(--wc-signal); text-decoration: underline; }
.toolbox-content-tool__preview strong { font-weight: 700; }
.toolbox-content-tool__preview em { font-style: italic; }
.toolbox-content-tool__preview hr { margin: 1.25rem 0; border: none; border-top: 1px solid var(--wc-stone-border); }
.toolbox-content-tool__preview blockquote { margin: 0 0 .65rem; padding: .25rem 1rem; border-left: 3px solid var(--wc-signal); color: var(--wc-stone); }
.toolbox-content-tool__preview blockquote p { margin: 0 0 .35rem; }
.toolbox-content-tool__preview blockquote p:last-child { margin-bottom: 0; }
.toolbox-ai-tool__textarea { min-height: 16rem; }
.toolbox-ai-tool__file-row { display: grid; gap: .5rem; margin-top: 1rem; }
.toolbox-ai-tool__file-row input[type="file"] { width: 100%; padding: .7rem; color: var(--wc-ink); background: var(--wc-canvas-alt); border: 1px solid var(--wc-stone-border); border-radius: var(--wc-radius-sm); }
.toolbox-ai-tool__file-warning { padding: 1rem; color: var(--wc-ink); background: var(--wc-color-warning-bg); border: 1px solid var(--wc-stone-border); border-radius: var(--wc-radius-sm); }
.toolbox-ai-tool__file-warning p { margin: 0; }
.toolbox-ai-tool__file-warning-actions { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: .75rem; }
.toolbox-ai-tool__file-warning-actions button { padding: .55rem .85rem; color: var(--wc-ink); background: var(--wc-canvas); border: 1px solid var(--wc-stone-border); border-radius: var(--wc-radius-sm); }
.toolbox-ai-tool__file-warning-actions button.toolbox-tool-widget__button--primary { color: var(--wc-canvas); background: var(--wc-signal); border-color: var(--wc-signal); }
.toolbox-ai-tool__count-input { min-width: 19rem; }
.toolbox-ai-tool__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.25rem; }
.toolbox-ai-tool__stats > div { display: grid; gap: .25rem; padding: 1rem; text-align: center; background: var(--wc-canvas-alt); border: 1px solid var(--wc-stone-border); border-radius: var(--wc-radius-md); }
.toolbox-ai-tool__stats strong { color: var(--wc-signal); font-size: 1.5rem; }
.toolbox-ai-tool__stats span, .toolbox-ai-tool__notice { color: var(--wc-stone); font-size: .875rem; }
.toolbox-ai-tool__notice { margin: 1rem 0 0; }
.toolbox-ai-tool__breakdown-wrap { margin-top: 1.25rem; }
.toolbox-ai-tool__breakdown-label { margin: 0 0 .5rem; color: var(--wc-stone); font-size: .875rem; font-weight: 600; }
.toolbox-ai-tool__breakdown { padding: 1rem; background: var(--wc-canvas-alt); border: 1px solid var(--wc-stone-border); border-radius: var(--wc-radius-md); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .9375rem; line-height: 1.9; white-space: pre-wrap; word-break: break-word; max-height: 20rem; overflow-y: auto; }
.toolbox-ai-tool__token { border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(28, 25, 23, 0.08); }
.toolbox-ai-tool__token--0 { background: var(--wc-color-primary-bg); }
.toolbox-ai-tool__token--1 { background: var(--wc-color-success-bg); }
.toolbox-ai-tool__token--2 { background: var(--wc-color-warning-bg); }
.toolbox-ai-tool__token--3 { background: var(--wc-color-info-bg); }
.toolbox-ai-tool__token--4 { background: var(--wc-color-danger-bg); }
@media (max-width: 640px) {
    .toolbox-ai-tool__count-input { min-width: 0; width: 100%; }
    .toolbox-ai-tool__stats { grid-template-columns: 1fr; }
}
.toolbox-content-tool__preview code { padding: .1rem .35rem; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: .875em; color: var(--wc-ink); background: var(--wc-canvas); border: 1px solid var(--wc-stone-border); border-radius: .3rem; }
.toolbox-content-tool__preview pre { margin: 0 0 .65rem; padding: .85rem 1rem; overflow-x: auto; background: var(--wc-canvas); border: 1px solid var(--wc-stone-border); border-radius: .5rem; }
.toolbox-content-tool__preview pre code { padding: 0; font-size: .8125rem; line-height: 1.5; color: var(--wc-ink); background: none; border: none; border-radius: 0; }
.toolbox-content-tool__preview table { width: 100%; margin: 0 0 .65rem; border-collapse: collapse; font-size: .9rem; }
.toolbox-content-tool__preview th, .toolbox-content-tool__preview td { padding: .5rem .65rem; text-align: left; border: 1px solid var(--wc-stone-border); }
.toolbox-content-tool__preview th { color: var(--wc-ink); background: var(--wc-canvas); font-weight: 700; }

/* -----------------------------------------------------------------------
   RESPONSIVE
   ----------------------------------------------------------------------- */
@media (max-width: 640px) {
    .toolbox-tool-widget__panel {
        padding: 24px 20px;
    }

    .toolbox-tool-widget__row {
        flex-wrap: wrap;
    }

    .toolbox-tool-widget__value {
        white-space: normal;
        word-break: break-all;
    }

    .toolbox-tool-widget__io {
        grid-template-columns: 1fr;
    }

    .toolbox-tool-related__panel {
        padding: 20px;
    }
}

/* -----------------------------------------------------------------------
   SOCIAL MEDIA-TOOLS — gedeelde widget-shell (templates/toolbox/social/tool.html)
   ----------------------------------------------------------------------- */
.toolbox-social-input {
    width: 100%;
    min-height: 132px;
    padding: 14px 16px;
    resize: vertical;
    font: inherit;
    color: var(--wc-ink);
    background: var(--wc-canvas);
    border: 1px solid var(--wc-stone-border);
    border-radius: var(--wc-radius-sm);
}

.toolbox-social-input:focus {
    outline: none;
    border-color: var(--wc-signal);
    box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.08);
}

.toolbox-social-label {
    display: block;
    margin-bottom: 8px;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--wc-stone);
}

.toolbox-social-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 16px;
}

.toolbox-social-output {
    display: grid;
    gap: 10px;
    margin-top: 24px;
}

.toolbox-social-result {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--wc-canvas);
    border: 1px solid var(--wc-stone-border);
    border-radius: var(--wc-radius-sm);
}

.toolbox-social-result__value {
    flex: 1;
    min-width: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    color: var(--wc-ink);
}

.toolbox-social-result__label {
    min-width: 112px;
    color: var(--wc-stone);
    font-size: .8125rem;
    font-weight: 600;
}

.toolbox-social-copy {
    flex-shrink: 0;
    padding: 6px 12px;
    color: var(--wc-signal);
    background: var(--wc-mira-soft);
    border: 0;
    border-radius: var(--wc-radius-sm);
    cursor: pointer;
    font: inherit;
    font-size: .8125rem;
    font-weight: 600;
}

.toolbox-social-copy.is-copied {
    color: var(--wc-white);
    background: var(--wc-ember);
}

.toolbox-social-hint {
    margin: 12px 0 0;
    color: var(--wc-stone);
    font-size: .875rem;
}

/* -----------------------------------------------------------------------
   PASSWORD GENERATOR — lengte-slider + tekenklasse-checkboxes
   (templates/toolbox/developer/password-generator.html)

   Hergebruikt .toolbox-tool-widget__panel/__controls/__count-label/__row/
   __value/__copy-btn/__error uit de widget-sectie hierboven; alleen de
   slider en checkbox-fieldset zijn hier nieuw.
   ----------------------------------------------------------------------- */
.toolbox-pw-length {
    min-width: 220px;
}

.toolbox-pw-length #pw-length-value {
    color: var(--wc-signal);
    font-weight: 700;
}

.toolbox-pw-range {
    width: 100%;
    accent-color: var(--wc-signal);
    cursor: pointer;
}

.toolbox-pw-range:focus-visible {
    outline: 2px solid var(--wc-signal);
    outline-offset: 4px;
}

.toolbox-pw-charsets {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0;
    margin: 0;
    border: 0;
}

.toolbox-pw-charsets legend {
    padding: 0;
    margin-bottom: 6px;
}

.toolbox-pw-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    color: var(--wc-ink);
    cursor: pointer;
}

.toolbox-pw-checkbox input[type="checkbox"] {
    accent-color: var(--wc-signal);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.toolbox-tool-widget__generate-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* -----------------------------------------------------------------------
   RANDOM STRING GENERATOR — tekenset-keuze (radio's) + eigen tekenset
   ----------------------------------------------------------------------- */
.toolbox-rs-charsets {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0;
    border: 0;
    margin: 0;
}

.toolbox-rs-charsets legend {
    padding: 0;
    margin-bottom: 4px;
}

.toolbox-rs-radio {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    color: var(--wc-ink);
    cursor: pointer;
}

.toolbox-rs-radio input[type="radio"] {
    accent-color: var(--wc-signal);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.toolbox-rs-custom {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.toolbox-rs-custom-input {
    width: 100%;
    min-width: 220px;
    padding: 10px 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
    font-size: 0.9375rem;
    color: var(--wc-ink);
    background: var(--wc-canvas);
    border: 1px solid var(--wc-stone-border);
    border-radius: var(--wc-radius-sm);
}

.toolbox-rs-custom-input:focus {
    outline: none;
    border-color: var(--wc-signal);
    box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.08);
}

/* -----------------------------------------------------------------------
   JWT DECODER (templates/toolbox/developer/jwt-decoder.html)

   Hergebruikt .toolbox-tool-widget__panel/__field/__io/__input/__output/
   __copy-btn/__error uit de widget-secties hierboven. __notice is hier
   nieuw: een permanent zichtbare waarschuwing dat de handtekening NIET
   geverifieerd wordt (zie tool.faq voor de uitleg) — bewust in de
   warning-kleuren i.p.v. de danger-kleuren van __error, want dit is geen
   foutmelding maar een structurele beperking van de tool.
   ----------------------------------------------------------------------- */
.toolbox-tool-widget__notice {
    margin-top: 16px;
    padding: 10px 14px;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--wc-color-warning);
    background: var(--wc-color-warning-bg);
    border: 1px solid var(--wc-color-warning-border);
    border-radius: var(--wc-radius-sm);
}

/* -----------------------------------------------------------------------
   TIMESTAMP CONVERTER (templates/toolbox/developer/timestamp-converter.html)

   Twee richtingen in één panel: timestamp -> datum en datum -> timestamp.
   Hergebruikt .toolbox-tool-widget__panel/__controls/__count-input/__field/
   __field-label/__row/__copy-btn/__error uit de secties hierboven; alleen
   de sectie-koppen, de scheiding tussen beide richtingen, de rij-labels en
   het eenheid-badge (seconden/milliseconden) zijn hier nieuw.
   ----------------------------------------------------------------------- */
.toolbox-ts-section + .toolbox-ts-section {
    margin-top: 32px;
    padding-top: 32px;
    border-top: 1px solid var(--wc-stone-border);
}

.toolbox-ts-section-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--wc-ink);
    margin-bottom: 16px;
}

.toolbox-ts-unit-badge {
    display: inline-flex;
    align-items: center;
    margin: 4px 0 16px;
    padding: 4px 12px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--wc-signal);
    background: var(--wc-mira-soft);
    border-radius: var(--wc-radius-xl);
}

.toolbox-tool-widget__row-label {
    flex-shrink: 0;
    min-width: 96px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--wc-stone);
}

.toolbox-ts-timestamp-input {
    width: 220px;
}

.toolbox-ts-datetime-input {
    width: 260px;
}

.toolbox-ts-results {
    margin-top: 16px;
}

/* -----------------------------------------------------------------------
   REGEX TESTER (templates/toolbox/developer/regex-tester.html)

   Hergebruikt .toolbox-tool-widget__panel/__field/__field-label/__input/
   __error uit de widget-secties hierboven. Nieuw: het patroonveld met
   delimiter-styling, de vlaggen-checkboxes, de live gemarkeerde testtekst
   en de matches/capture-groups-lijst.
   ----------------------------------------------------------------------- */
.toolbox-regex-controls {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.toolbox-regex-mode-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--wc-stone-border);
}

.toolbox-regex-mode-tab {
    padding: 10px 14px;
    color: var(--wc-stone);
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    cursor: pointer;
}

.toolbox-regex-mode-tab.is-active {
    color: var(--wc-signal);
    border-bottom-color: var(--wc-signal);
    font-weight: 600;
}

.toolbox-regex-builder {
    padding: 18px;
    margin-bottom: 24px;
    background: var(--wc-canvas-alt);
    border: 1px solid var(--wc-stone-border);
    border-radius: var(--wc-radius-sm);
}

.toolbox-regex-builder__intro {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.toolbox-regex-builder h2 { margin: 0 0 6px; font-size: 1.15rem; }
.toolbox-regex-builder p { margin: 0; color: var(--wc-stone); }
.toolbox-regex-preset { display: flex; flex-direction: column; gap: 6px; min-width: 220px; font-size: .8125rem; color: var(--wc-stone); }
.toolbox-regex-preset select, .toolbox-regex-builder__add select { padding: 9px; color: var(--wc-ink); background: var(--wc-canvas); border: 1px solid var(--wc-stone-border); border-radius: var(--wc-radius-sm); }
.toolbox-regex-builder__blocks { display: flex; gap: 8px; flex-wrap: wrap; min-height: 48px; padding: 16px 0; }
.toolbox-regex-block { display: flex; align-items: center; gap: 8px; padding: 7px 8px 7px 11px; color: var(--wc-ink); background: var(--wc-canvas); border: 1px solid var(--wc-stone-border); border-radius: 999px; }
.toolbox-regex-block__label { font-size: .875rem; }
.toolbox-regex-block input { width: 80px; padding: 4px 6px; border: 1px solid var(--wc-stone-border); border-radius: 4px; }
.toolbox-regex-block__actions { display: flex; gap: 2px; }
.toolbox-regex-block__actions button { width: 22px; height: 22px; padding: 0; color: var(--wc-stone); background: transparent; border: 0; cursor: pointer; }
.toolbox-regex-block__actions button:hover { color: var(--wc-signal); }
.toolbox-regex-builder__add { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .875rem; font-weight: 600; }
.toolbox-regex-generated { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 16px; margin-top: 16px; border-top: 1px solid var(--wc-stone-border); }
.toolbox-regex-generated code { flex: 1 1 280px; padding: 10px; overflow-wrap: anywhere; color: var(--wc-ink); background: var(--wc-canvas); border-radius: 4px; }

/* Builder-uitbreiding: presetknop, kwantificator per bouwsteen en de
   valideren-schakelaar. De aantal-input wint van de generieke
   `.toolbox-regex-block input`-regel hierboven via hogere specificiteit
   (element + class), niet via !important. */
.toolbox-regex-preset-group { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; }
.toolbox-regex-sample-btn { padding: 9px 12px; font-size: .8125rem; color: var(--wc-stone); background: transparent; border: 1px solid var(--wc-stone-border); border-radius: var(--wc-radius-sm); cursor: pointer; }
.toolbox-regex-sample-btn:hover { color: var(--wc-signal); border-color: var(--wc-signal); }
.toolbox-regex-block__quant { display: flex; align-items: center; gap: 4px; }
.toolbox-regex-block select { padding: 3px 4px; font-size: .75rem; color: var(--wc-stone); background: var(--wc-canvas); border: 1px solid var(--wc-stone-border); border-radius: 4px; }
.toolbox-regex-block input.toolbox-regex-block__count { width: 48px; }
.toolbox-regex-builder__empty { margin: 0; font-size: .875rem; color: var(--wc-stone); }
.toolbox-regex-anchor { display: flex; align-items: center; gap: 8px; font-size: .875rem; color: var(--wc-ink); cursor: pointer; }
.toolbox-regex-anchor input { width: 16px; height: 16px; accent-color: var(--wc-signal); }
.toolbox-regex-anchor-hint { margin: 6px 0 0; font-size: .8125rem; line-height: 1.5; color: var(--wc-stone); }
/* Presets met een beschrijvend label ("10 cijfers, spaties toegestaan") maken
   een chip breder dan een telefoonscherm. Laat hem krimpen en het label
   afbreken in plaats van de pagina horizontaal te laten scrollen. Staat na de
   basisregel hierboven, dus wint zonder extra specificiteit of !important. */
.toolbox-regex-block { max-width: 100%; flex-wrap: wrap; row-gap: 4px; border-radius: var(--wc-radius-sm); }
.toolbox-regex-block__label { min-width: 0; overflow-wrap: anywhere; }

.toolbox-regex-pattern-field {
    flex: 1 1 320px;
    min-width: 240px;
}

.toolbox-regex-pattern-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 12px;
    background: var(--wc-canvas);
    border: 1px solid var(--wc-stone-border);
    border-radius: var(--wc-radius-sm);
}

.toolbox-regex-pattern-wrap:focus-within {
    border-color: var(--wc-signal);
    box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.08);
}

.toolbox-regex-delimiter {
    flex-shrink: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
    color: var(--wc-stone);
}

.toolbox-regex-pattern-input {
    flex: 1;
    min-width: 0;
    padding: 12px 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
    font-size: 0.9375rem;
    color: var(--wc-ink);
    background: transparent;
    border: 0;
}

.toolbox-regex-pattern-input:focus {
    outline: none;
}

.toolbox-regex-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    padding: 0;
    margin: 0;
    border: 0;
}

.toolbox-regex-flags legend {
    width: 100%;
    padding: 0;
    margin-bottom: 6px;
}

.toolbox-regex-flag {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--wc-ink);
    cursor: pointer;
}

.toolbox-regex-flag input[type="checkbox"] {
    accent-color: var(--wc-signal);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.toolbox-regex-flag__desc {
    font-family: var(--wc-font-primary);
    font-weight: 400;
    color: var(--wc-stone);
}

.toolbox-regex-test-string {
    min-height: 120px;
}

.toolbox-regex-results {
    margin-top: 24px;
}

.toolbox-regex-highlight-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.toolbox-regex-highlight {
    min-height: 60px;
    padding: 14px 16px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--wc-ink);
    background: var(--wc-canvas-alt);
    border: 1px solid var(--wc-stone-border);
    border-radius: var(--wc-radius-sm);
    white-space: pre-wrap;
    word-break: break-word;
}

.toolbox-regex-mark {
    padding: 1px 2px;
    color: var(--wc-ink);
    background: var(--wc-mira-soft);
    border-radius: 3px;
}

.toolbox-regex-summary {
    margin: 16px 0 12px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--wc-stone);
}

.toolbox-regex-matches {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.toolbox-regex-match {
    padding: 12px 14px;
    background: var(--wc-canvas);
    border: 1px solid var(--wc-stone-border);
    border-radius: var(--wc-radius-sm);
}

.toolbox-regex-match__heading {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.toolbox-regex-match__label {
    flex-shrink: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--wc-signal);
}

.toolbox-regex-match__value {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
    font-size: 0.9375rem;
    color: var(--wc-ink);
    overflow-wrap: anywhere;
}

.toolbox-regex-match__groups {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 10px 0 0;
    padding: 10px 0 0;
    list-style: none;
    border-top: 1px solid var(--wc-stone-border);
}

.toolbox-regex-match__groups code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
    font-size: 0.875rem;
    color: var(--wc-ink);
    overflow-wrap: anywhere;
}

.toolbox-regex-match__group-label {
    display: inline-block;
    min-width: 72px;
    font-size: 0.8125rem;
    color: var(--wc-stone);
}

.toolbox-regex-notice {
    margin: 10px 0 0;
    font-size: 0.8125rem;
    color: var(--wc-stone);
}

@media (max-width: 640px) {
    .toolbox-regex-controls {
        flex-direction: column;
    }
}

/* -----------------------------------------------------------------------
   COLOR PICKER (templates/toolbox/developer/color-picker.html)

   Hergebruikt .toolbox-tool-widget__panel/__field/__field-label/
   __count-input/__row/__row-label/__value/__copy-btn/__error/__results uit
   de widget-secties hierboven. Nieuw: de layout van kleurenwiel + swatch-
   label naast het HEX-tekstveld.
   ----------------------------------------------------------------------- */
.toolbox-color-controls {
    display: flex;
    align-items: flex-end;
    gap: 28px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.toolbox-color-swatch-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.toolbox-color-native-input {
    width: 72px;
    height: 72px;
    padding: 0;
    background: none;
    border: 2px solid var(--wc-stone-border);
    border-radius: var(--wc-radius-md);
    cursor: pointer;
}

.toolbox-color-native-input::-webkit-color-swatch-wrapper {
    padding: 4px;
}

.toolbox-color-native-input::-webkit-color-swatch {
    border: none;
    border-radius: var(--wc-radius-sm);
}

.toolbox-color-native-input::-moz-color-swatch {
    border: none;
    border-radius: var(--wc-radius-sm);
}

.toolbox-color-native-input:focus-visible {
    outline: 2px solid var(--wc-signal);
    outline-offset: 2px;
}

.toolbox-color-swatch-label {
    max-width: 140px;
    font-size: 0.75rem;
    color: var(--wc-stone);
    text-align: center;
}

.toolbox-color-hex-field {
    flex: 0 0 auto;
}

.toolbox-color-code-fields {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.toolbox-color-code-field {
    flex: 1 1 150px;
}

.toolbox-tool-widget__field.toolbox-color-hex-field .toolbox-color-hex-input {
    width: 160px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
    text-transform: uppercase;
}

.toolbox-color-code-input {
    width: 100%;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
}

.toolbox-color-section-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--wc-ink);
    margin-bottom: 16px;
}

@media (max-width: 640px) {
    .toolbox-color-controls {
        flex-direction: column;
        align-items: flex-start;
    }

    .toolbox-color-code-fields {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .toolbox-color-code-field,
    .toolbox-tool-widget__field.toolbox-color-hex-field .toolbox-color-hex-input {
        width: 100%;
    }
}

/* -----------------------------------------------------------------------
   AFBEELDINGSSTUDIO (templates/toolbox/images/studio.html)

   Eén tool achter zes URL's: converteren, comprimeren, verkleinen,
   bijsnijden, social bijsnijden en draaien. Vervangt .toolbox-image-tool
   en .toolbox-freecrop, die hierin zijn opgegaan.

   De belangrijkste regel van dit blok staat bij .toolbox-studio__result:
   het resultaat krijgt zijn breedte van JavaScript, niet van de CSS. In de
   oude tools stond daar `width: 100%`, waardoor een verkleining naar 10%
   even groot op het scherm verscheen als het origineel ernaast.
   ----------------------------------------------------------------------- */

/* Zonder deze regel renderen checkboxes en schuifregelaars in browserblauw,
   naast --wc-color-primary (knop) en --wc-signal (actief blok): drie blauwen
   in één widget, waarvan er één van niemand is. */
.toolbox-studio,
.toolbox-studio input {
    accent-color: var(--wc-signal);
}

.toolbox-studio__upload {
    display: grid;
    /* minmax(0, 1fr) i.p.v. de impliciete 1fr: een <input type="file"> heeft
       een intrinsieke minimumbreedte (knop + bestandsnaam) en een grid-item
       krimpt daar standaard niet onder. Op een telefoon duwde dat de hele
       pagina 70px breder dan het scherm. */
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding: 24px;
    border: 1px dashed var(--wc-stone-border);
    border-radius: var(--wc-radius-lg);
}

.toolbox-studio__upload input[type="file"] {
    width: 100%;
    min-width: 0;
    color: var(--wc-ink);
}

.toolbox-studio__upload--over {
    background: var(--wc-canvas-alt);
    border-color: var(--wc-signal);
}

.toolbox-studio__privacy {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--wc-stone);
}

.toolbox-studio__error {
    margin: 12px 0 0;
    padding: 10px 14px;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--wc-color-danger);
    background: var(--wc-color-danger-bg);
    border-radius: var(--wc-radius-sm);
}

/* ---- De twee panelen ---- */

.toolbox-studio__panes {
    display: grid;
    /* min(18rem, 100%) i.p.v. 18rem: op een smal scherm is 288px breder dan de
       kolom zelf, en dan steekt het beeldkader buiten de kaart zonder dat er
       een paginabrede scrollbar verschijnt die dat verraadt. */
    grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
    gap: 24px;
    align-items: start;
    margin-top: 24px;
}

.toolbox-studio__pane {
    min-width: 0;
}

/* min-height gelijk aan een weergaveknop (6px + 20px regel + 6px + rand):
   het linkerpaneel heeft alleen een label, en zonder deze bodem begint het
   origineel hoger dan het resultaat. */
.toolbox-studio__pane-head {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
    min-height: 2.1875rem;
    margin-bottom: 8px;
}

.toolbox-studio__pane-label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--wc-stone);
}

.toolbox-studio__viewport {
    position: relative;
    display: inline-block;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    line-height: 0;
    background: repeating-conic-gradient(var(--wc-canvas-alt) 0 25%, var(--wc-stone-border) 0 50%) 50% / 1.25rem 1.25rem;
    border: 1px solid var(--wc-stone-border);
    border-radius: var(--wc-radius-lg);
}

.toolbox-studio__photo {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 26rem;
    user-select: none;
    -webkit-user-drag: none;
}

/* ---- Het uitsnedekader ---- */

/* De rand staat binnen het kader (inset) in plaats van erop. Begint de
   selectie op de volledige afbeelding — wat op /crop-image het geval is, want
   er hoort niets weggesneden te worden tot je dat zelf doet — dan valt een
   gewone border samen met de fotorand en zie je alleen acht losse blokjes.
   Twee inset-schaduwen: wit voor een donkere foto, donker voor een lichte. */
.toolbox-studio__selection {
    position: absolute;
    top: 0;
    left: 0;
    /* rgba komt overeen met --wc-ink (#1C1917); een custom property kan niet
       rechtstreeks in rgba() zonder color-mix(). */
    box-shadow:
        0 0 0 9999px rgba(28, 25, 23, 0.6),
        inset 0 0 0 1px rgba(255, 255, 255, 0.9),
        inset 0 0 0 2px rgba(28, 25, 23, 0.35);
    cursor: move;
    touch-action: none;
}

.toolbox-studio__selection:focus-visible {
    outline: 2px solid var(--wc-signal);
    outline-offset: 2px;
}

.toolbox-studio__viewport--active .toolbox-studio__selection {
    box-shadow:
        0 0 0 9999px rgba(28, 25, 23, 0.6),
        inset 0 0 0 2px var(--wc-signal);
}

.toolbox-studio__handle {
    position: absolute;
    width: 14px;
    height: 14px;
    background: var(--wc-white);
    border: 1px solid var(--wc-ink);
    border-radius: 2px;
}

/* Op een aanraakscherm is 14px onder de 24px die WCAG 2.5.8 vraagt. Het
   zichtbare blokje blijft even groot; alleen het raakvlak groeit, via een
   pseudo-element dat over de rand heen steekt. */
@media (pointer: coarse) {
    .toolbox-studio__handle::after {
        content: '';
        position: absolute;
        top: -6px;
        right: -6px;
        bottom: -6px;
        left: -6px;
    }
}

.toolbox-studio__handle--nw { top: -7px; left: -7px; cursor: nwse-resize; }
.toolbox-studio__handle--ne { top: -7px; right: -7px; cursor: nesw-resize; }
.toolbox-studio__handle--sw { bottom: -7px; left: -7px; cursor: nesw-resize; }
.toolbox-studio__handle--se { bottom: -7px; right: -7px; cursor: nwse-resize; }
.toolbox-studio__handle--n { top: -7px; left: 50%; margin-left: -7px; cursor: ns-resize; }
.toolbox-studio__handle--s { bottom: -7px; left: 50%; margin-left: -7px; cursor: ns-resize; }
.toolbox-studio__handle--w { left: -7px; top: 50%; margin-top: -7px; cursor: ew-resize; }
.toolbox-studio__handle--e { right: -7px; top: 50%; margin-top: -7px; cursor: ew-resize; }

/* ---- Het resultaat ---- */

/* Exact dezelfde opbouw als .toolbox-studio__viewport links: een rand met
   ruitachtergrond die om het beeld sluit, zonder padding. Twee panelen die
   hetzelfde tonen horen er ook hetzelfde uit te zien — met een blok-flex en
   12px padding vulde dit vlak de hele kolom en leek het resultaat op een
   groter canvas te staan dan het origineel, terwijl beide beelden even breed
   waren. max-width houdt het binnen de kolom, zodat een resultaat dat breder
   is dan de kolom schuift in plaats van krimpt. */
.toolbox-studio__result-wrap {
    display: inline-flex;
    max-width: 100%;
    align-items: flex-start;
    justify-content: flex-start;
    overflow: hidden;
    line-height: 0;
    background: repeating-conic-gradient(var(--wc-canvas-alt) 0 25%, var(--wc-stone-border) 0 50%) 50% / 1.25rem 1.25rem;
    border: 1px solid var(--wc-stone-border);
    border-radius: var(--wc-radius-lg);
}

/* In 'op schaal' en '1:1' kan het resultaat breder zijn dan de kolom; dan
   hoort het te schuiven en niet te krimpen, want krimpen is precies de
   vertekening die deze weergave wil vermijden. */
/* Wint van de `overflow: hidden` hierboven: in 'Op schaal' en '1:1' mag het
   resultaat breder zijn dan de kolom, en dan hoort het te schuiven. */
.toolbox-studio__result-wrap--scroll {
    overflow: auto;
    /* Zelfde plafond als het origineel links (.toolbox-studio__photo) en als
       'Passend'. Zonder deze regel was alleen de horizontale as begrensd en
       gaf een foto van 4000×3000 in '1:1' een paneel van 3000px hoog.
       content-box omdat die 26rem links op de <img> staat en de rand van de
       viewport erbuiten valt; zonder dit telt de rand hier mee en verschijnt
       er een scrollbalk bij een beeld dat precies past. */
    box-sizing: content-box;
    max-height: 26rem;
}

/* Alleen in 'Passend'. Een canvas met `width: 100%` in een vlak dat om zijn
   inhoud sluit, meet 100% van zichzelf en rekt dus nooit op — vandaar dat het
   vlak hier wél de volle kolom neemt. */
.toolbox-studio__result-wrap--fill {
    display: flex;
    width: 100%;
}

/* Geen breedte hier: JavaScript zet hem, in schermpixels die kloppen met de
   werkelijke maat van het resultaat. Alleen in de stand 'Passend' neemt de
   modifier het over. */
.toolbox-studio__result {
    display: block;
    height: auto;
    max-width: none;
}

/* 'Passend': het resultaat vult de kolom, zodat je details kunt beoordelen
   die op ware schaal te klein zijn. object-fit is hier nodig omdat een canvas
   met een vaste breedte zich anders door max-height laat platdrukken. */
.toolbox-studio__result--fit {
    max-width: 100%;
    max-height: 26rem;
    object-fit: contain;
}

.toolbox-studio__view-hint {
    margin: 0 0 8px;
    font-size: 0.75rem;
    line-height: 1.6;
    color: var(--wc-stone);
}

.toolbox-studio__meta {
    margin-top: 8px;
    font-size: 0.8125rem;
    color: var(--wc-stone);
}

/* ---- De blokken ---- */

.toolbox-studio__blocks {
    display: grid;
    gap: 12px;
    margin-top: 24px;
}

/* Wit, niet --wc-canvas-alt: op die achtergrond haalt zelfs --wc-stone maar
   4,4:1 en blijven de hints onder AA. Een uitgeschakeld blok is al herkenbaar
   aan het lege vinkje, de dichte inhoud en de neutrale rand. */
.toolbox-studio__block {
    padding: 16px 20px;
    background: var(--wc-white);
    border: 1px solid var(--wc-stone-border);
    border-radius: var(--wc-radius-lg);
}

.toolbox-studio__block--on {
    border-color: var(--wc-signal);
    box-shadow: inset 3px 0 0 var(--wc-signal);
}

/* De titel van 'Uitvoer' begon 21px links van de andere drie: die hebben een
   schakelaar die de titel opzij duwt, Uitvoer niet. */
.toolbox-studio__block-spacer {
    display: inline-block;
    width: 13px;
}

.toolbox-studio__block-head {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: baseline;
    cursor: pointer;
}

.toolbox-studio__block--always .toolbox-studio__block-head {
    cursor: default;
}

.toolbox-studio__block-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--wc-ink);
}

.toolbox-studio__block-hint {
    font-size: 0.8125rem;
    color: var(--wc-stone);
}

.toolbox-studio__block-body {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 24px;
    align-items: flex-end;
    margin-top: 16px;
}

.toolbox-studio__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 9rem;
}

.toolbox-studio__field--wide {
    flex: 1 1 16rem;
}

.toolbox-studio__field--check {
    justify-content: flex-end;
}

.toolbox-studio__field--action {
    justify-content: flex-end;
}

.toolbox-studio__field label,
.toolbox-studio__field-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--wc-stone);
}

.toolbox-studio__field--check label {
    display: flex;
    gap: 8px;
    align-items: center;
    font-weight: 400;
}

.toolbox-studio__pair {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-end;
}

.toolbox-studio__select,
.toolbox-studio__number {
    padding: 8px 12px;
    font-size: 0.9375rem;
    color: var(--wc-ink);
    background: var(--wc-white);
    border: 1px solid var(--wc-stone-border);
    border-radius: var(--wc-radius-md);
}

.toolbox-studio__select:focus-visible,
.toolbox-studio__number:focus-visible {
    outline: 2px solid var(--wc-signal);
    outline-offset: 1px;
}

.toolbox-studio__inline {
    display: flex;
    gap: 12px;
    align-items: center;
}

.toolbox-studio__inline-check {
    display: flex;
    gap: 6px;
    align-items: center;
    white-space: nowrap;
    font-weight: 400;
}

.toolbox-studio__inline input[type="range"] {
    flex: 1 1 auto;
    min-width: 6rem;
}

.toolbox-studio__note {
    margin: 4px 0 0;
    font-size: 0.8125rem;
    color: var(--wc-stone);
}

/* ---- Keuzeknoppen (hoek en weergave) ---- */

.toolbox-studio__choices {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.toolbox-studio__choice {
    padding: 6px 12px;
    font-size: 0.875rem;
    color: var(--wc-stone);
    background: var(--wc-white);
    border: 1px solid var(--wc-stone-border);
    border-radius: var(--wc-radius-md);
    cursor: pointer;
}

.toolbox-studio__choice:hover {
    color: var(--wc-ink);
}

.toolbox-studio__choice--on {
    color: var(--wc-white);
    background: var(--wc-ink);
    border-color: var(--wc-ink);
}

.toolbox-studio__choice:focus-visible {
    outline: 2px solid var(--wc-signal);
    outline-offset: 1px;
}

/* De strook met de vijf andere ingangen van dezelfde studio. Bewust rustig:
   het is een wegwijzer, geen tweede navigatie. */
.toolbox-studio-switch {
    padding: 16px 0 0;
}

/* Pillen in plaats van een doorlopende zin met punt-scheiders: op een smalle
   telefoon brak die zin middenin een toolnaam af en kwamen de scheiders aan
   het begin van een regel terecht. Een pil breekt netjes en levert meteen een
   raakvlak van de juiste hoogte op. */
.toolbox-studio-switch__text {
    padding: 14px 20px;
    background: var(--wc-white);
    border: 1px solid var(--wc-stone-border);
    border-radius: var(--wc-radius-lg);
}

.toolbox-studio-switch__intro {
    display: block;
    margin-bottom: 10px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--wc-ink);
}

.toolbox-studio-switch__list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.toolbox-studio-switch__pill {
    display: block;
    padding: 6px 12px;
    font-size: 0.8125rem;
    color: var(--wc-signal);
    background: var(--wc-canvas-alt);
    border: 1px solid var(--wc-stone-border);
    border-radius: 999px;
    text-decoration: none;
}

a.toolbox-studio-switch__pill:hover {
    color: var(--wc-white);
    background: var(--wc-signal);
    border-color: var(--wc-signal);
}

a.toolbox-studio-switch__pill:focus-visible {
    outline: 2px solid var(--wc-signal);
    outline-offset: 2px;
}

/* 'Je bent hier' moet van de kop te onderscheiden zijn; die was ook vet-zwart. */
.toolbox-studio-switch__pill--current {
    color: var(--wc-ink);
    font-weight: 600;
    background: var(--wc-white);
    border-color: var(--wc-ink);
}

.toolbox-studio__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

/* -----------------------------------------------------------------------
   BASE64 CONVERTER (templates/toolbox/developer/base64-converter.html)

   Samenvoeging van de vroegere losse Base64 Encoder + Base64 Decoder.
   Hergebruikt .toolbox-tool-widget__panel/__io/__field/__field-label/
   __input/__output/__output-actions/__copy-btn/__error uit de
   ENCODE/DECODE WIDGET-sectie hierboven. Nieuw: de sectie-koppen die de
   twee richtingen (Tekst -> Base64 en Base64 -> Tekst) in één panel
   scheiden — zelfde divider-patroon als .toolbox-hexrgb-section hierboven.
   ----------------------------------------------------------------------- */
.toolbox-base64conv-section + .toolbox-base64conv-section {
    margin-top: 32px;
    padding-top: 32px;
    border-top: 1px solid var(--wc-stone-border);
}

.toolbox-base64conv-section-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--wc-ink);
    margin-bottom: 16px;
}

/* -----------------------------------------------------------------------
   URL CONVERTER (templates/toolbox/developer/url-converter.html)

   Samenvoeging van de vroegere losse URL Encoder + URL Decoder: 1 paneel
   met een Encode/Decode-richtingtoggle i.p.v. 2 aparte pagina's.
   ----------------------------------------------------------------------- */
.toolbox-tool-widget__mode-toggle {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    background: var(--wc-canvas-alt);
    border: 1px solid var(--wc-stone-border);
    border-radius: var(--wc-radius-md);
    margin-bottom: 20px;
}

.toolbox-tool-widget__mode-btn {
    padding: 8px 18px;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--wc-stone);
    background: transparent;
    border: 0;
    border-radius: var(--wc-radius-sm);
    cursor: pointer;
    transition: color var(--wc-duration) var(--wc-ease), background var(--wc-duration) var(--wc-ease);
}

.toolbox-tool-widget__mode-btn:hover {
    color: var(--wc-ink);
}

.toolbox-tool-widget__mode-btn:focus-visible {
    outline: 2px solid var(--wc-signal);
    outline-offset: 2px;
}

.toolbox-tool-widget__mode-btn.is-active {
    color: var(--wc-white);
    background: var(--wc-signal);
}

.toolbox-tool-widget__io--stacked {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

/* -----------------------------------------------------------------------
   GENERATORS — QR-code generator + URL shortener
   (templates/toolbox/generators/qr-code-generator.html, url-shortener.html)

   Hergebruikt .toolbox-tool-widget__panel/__field/__field-label/__input/
   __error/__row/__value/__copy-btn/__notice (zie JWT-decoder hierboven,
   __notice is daar al geïntroduceerd) als basis. Alleen de kleurenrij, de
   volle-breedte tekstinput en de QR-preview zijn hier nieuw.
   ----------------------------------------------------------------------- */
.toolbox-tool-widget__count-input--full {
    width: 100%;
}

.toolbox-tool-widget__color-row {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.toolbox-tool-widget__color-field {
    display: flex;
    align-items: center;
    gap: 10px;
}

.toolbox-tool-widget__color-field label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--wc-stone);
}

.toolbox-tool-widget__color-field input[type="color"] {
    width: 44px;
    height: 36px;
    padding: 2px;
    background: var(--wc-canvas);
    border: 1px solid var(--wc-stone-border);
    border-radius: var(--wc-radius-sm);
    cursor: pointer;
}

.toolbox-qr__logo-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.toolbox-qr__preview {
    display: grid;
    place-items: center;
    min-height: 220px;
    margin-top: 20px;
    padding: 24px;
    background: repeating-conic-gradient(var(--wc-stone-border) 0 25%, var(--wc-canvas-alt) 0 50%) 50% / 1rem 1rem;
    border: 1px solid var(--wc-stone-border);
    border-radius: var(--wc-radius-sm);
}

.toolbox-qr__preview img {
    max-width: 100%;
    max-height: 320px;
}

/* ===== Diagram-tools (Mermaid, en straks D2 / DBML / BPMN) ===== */
.toolbox-diagram-tool__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1rem;
}

.toolbox-diagram-tool__status {
    color: var(--wc-color-success);
    font-size: .9rem;
    font-weight: 600;
}

.toolbox-diagram-tool__io {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
}

.toolbox-diagram-tool__field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.toolbox-diagram-tool__textarea {
    min-height: 24rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    tab-size: 2;
}

.toolbox-diagram-tool__preview {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 24rem;
    padding: 1rem;
    /* Grote diagrammen mogen scrollen binnen hun eigen vak in plaats van de
       pagina horizontaal op te rekken. */
    overflow: auto;
    background: var(--wc-canvas-alt);
    border: 1px solid var(--wc-stone-border);
    border-radius: .75rem;
}

.toolbox-diagram-tool__preview svg {
    max-width: 100%;
    height: auto;
}

.toolbox-diagram-tool__hint {
    margin: 0;
    color: var(--wc-stone);
    font-size: .9rem;
    text-align: center;
}

.toolbox-diagram-tool__export {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .75rem;
}

.toolbox-diagram-tool [data-diagram-error] {
    white-space: pre-wrap;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: .8125rem;
}

@media (max-width: 900px) {
    .toolbox-diagram-tool__io {
        grid-template-columns: 1fr;
    }

    .toolbox-diagram-tool__textarea,
    .toolbox-diagram-tool__preview {
        min-height: 18rem;
    }
}

.toolbox-diagram-shared__cta {
    margin: 1.25rem 0 0;
    text-align: center;
    font-size: .9375rem;
}

.toolbox-diagram-shared__cta a {
    color: var(--wc-signal);
    text-decoration: underline;
}

/* =========================================================================
   TOOLPAGINA — kop, presets en beoordelingen (Fase 3)

   De oude .toolbox-tool-hero zette breadcrumb, label, titel én een intro-
   alinea boven de widget, waardoor de tool zelf onder de vouw viel. Deze
   .toolbox-tool-head is dezelfde kop zonder de intro; die verhuist naar
   .toolbox-tool-context onder de widget.
   ========================================================================= */
.toolbox-tool-head {
    background: var(--wc-canvas);
    padding: 40px 0 28px;
    border-bottom: 1px solid var(--wc-stone-border);
}

/* Bewust GEEN max-width op de __inner-elementen hieronder: die class deelt
   het element met .container. Een eigen max-width — ook `none` — overschrijft
   de 1024px en centrering van .container, waardoor kop en tekst niet meer
   uitlijnen met de widget. Leesbreedte staat op de tekstelementen zelf. */

.toolbox-tool-head__breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8125rem;
    color: var(--wc-stone);
    margin-bottom: 14px;
}

.toolbox-tool-head__breadcrumb a {
    color: var(--wc-stone);
    text-decoration: none;
}

.toolbox-tool-head__breadcrumb a:hover {
    color: var(--wc-signal);
}

.toolbox-tool-head__label {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--wc-ember);
    margin-bottom: 10px;
}

.toolbox-tool-head__title {
    font-family: var(--wc-font-accent);
    font-size: clamp(1.75rem, 3vw, 2.375rem);
    font-weight: 500;
    line-height: 1.2;
    color: var(--wc-ink);
    margin-bottom: 0;
}

/* -----------------------------------------------------------------------
   STERREN
   ----------------------------------------------------------------------- */
.toolbox-stars {
    display: inline-flex;
    gap: 1px;
    line-height: 1;
}

.toolbox-stars__star {
    color: var(--wc-stone-border);
    font-size: 1rem;
}

.toolbox-stars__star.is-filled {
    color: var(--wc-ember);
}

.toolbox-rating-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    font-size: 0.875rem;
}

.toolbox-rating-badge__score {
    font-weight: 600;
    color: var(--wc-ink);
}

.toolbox-rating-badge__count {
    color: var(--wc-stone);
}

/* -----------------------------------------------------------------------
   PRESETS — klikbare startpunten boven het invoerveld
   ----------------------------------------------------------------------- */
.toolbox-presets {
    margin-bottom: 20px;
}

.toolbox-presets__label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--wc-stone);
    margin-bottom: 8px;
}

.toolbox-presets__row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.toolbox-presets__chip {
    padding: 6px 14px;
    font-size: 0.875rem;
    font-family: inherit;
    color: var(--wc-stone);
    background: var(--wc-canvas);
    border: 1px solid var(--wc-stone-border);
    border-radius: 999px;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.toolbox-presets__chip:hover {
    border-color: var(--wc-signal);
    color: var(--wc-signal);
}

.toolbox-presets__chip.is-active {
    border-color: var(--wc-signal);
    color: var(--wc-white);
    background: var(--wc-signal);
}

/* -----------------------------------------------------------------------
   CONTEXT — intro en toepassingen, onder de widget
   ----------------------------------------------------------------------- */
.toolbox-tool-context {
    padding: 8px 0 40px;
}

.toolbox-tool-context__intro {
    max-width: 68ch;
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--wc-stone);
}

.toolbox-tool-context__heading {
    font-family: var(--wc-font-accent);
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--wc-ink);
    margin: 28px 0 12px;
}

.toolbox-tool-context__list {
    max-width: 68ch;
    list-style: disc;
    padding-left: 20px;
    color: var(--wc-stone);
    line-height: 1.8;
}

/* -----------------------------------------------------------------------
   BEOORDELINGEN
   ----------------------------------------------------------------------- */
.toolbox-tool-reviews {
    padding: 40px 0;
    border-top: 1px solid var(--wc-stone-border);
    background: var(--wc-canvas);
}

.toolbox-tool-reviews__title {
    font-family: var(--wc-font-accent);
    font-size: 1.375rem;
    font-weight: 500;
    color: var(--wc-ink);
    margin-bottom: 20px;
}

.toolbox-tool-reviews__list {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    display: grid;
    gap: 16px;
}

.toolbox-tool-reviews__item {
    background: var(--wc-white);
    border: 1px solid var(--wc-stone-border);
    border-radius: var(--wc-radius-md, 8px);
    padding: 16px 18px;
}

.toolbox-tool-reviews__item-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.toolbox-tool-reviews__author {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--wc-ink);
}

.toolbox-tool-reviews__comment {
    max-width: 68ch;
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--wc-stone);
    margin: 0;
}

.toolbox-tool-reviews__empty {
    color: var(--wc-stone);
    margin-bottom: 20px;
}

.toolbox-tool-reviews__toggle {
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--wc-signal);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
}

.toolbox-tool-reviews__toggle:hover {
    color: var(--wc-ember);
}

/* -----------------------------------------------------------------------
   BEOORDELINGSFORMULIER
   ----------------------------------------------------------------------- */
.toolbox-review-form {
    max-width: 560px;
    margin-top: 20px;
    background: var(--wc-white);
    border: 1px solid var(--wc-stone-border);
    border-radius: var(--wc-radius-md, 8px);
    padding: 20px;
    display: grid;
    gap: 16px;
}

.toolbox-review-form__rating {
    border: none;
    padding: 0;
    margin: 0;
}

.toolbox-review-form__rating legend {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--wc-ink);
    margin-bottom: 8px;
    padding: 0;
}

/* De sterren staan in omgekeerde volgorde in de DOM, zodat de CSS-selector
   `:checked ~ label` alle sterren links van de gekozen ster kan raken —
   zonder JavaScript. row-reverse zet ze visueel weer goed. */
.toolbox-review-form__stars {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 4px;
}

.toolbox-review-form__star {
    cursor: pointer;
    font-size: 1.75rem;
    line-height: 1;
    color: var(--wc-stone-border);
    transition: color 0.12s ease;
}

.toolbox-review-form__star input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.toolbox-review-form__star:hover,
.toolbox-review-form__star:hover ~ .toolbox-review-form__star,
.toolbox-review-form__star:focus-within,
.toolbox-review-form__star:has(input:checked),
.toolbox-review-form__star:has(input:checked) ~ .toolbox-review-form__star {
    color: var(--wc-ember);
}

.toolbox-review-form__field {
    display: grid;
    gap: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--wc-ink);
}

.toolbox-review-form__field textarea,
.toolbox-review-form__field input {
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 400;
    color: var(--wc-ink);
    padding: 10px 12px;
    border: 1px solid var(--wc-stone-border);
    border-radius: var(--wc-radius-sm, 6px);
    background: var(--wc-white);
}

.toolbox-review-form__field textarea:focus,
.toolbox-review-form__field input:focus {
    outline: none;
    border-color: var(--wc-signal);
}

.toolbox-review-form__note {
    font-size: 0.8125rem;
    color: var(--wc-stone);
    margin: 0;
}

.toolbox-review-form__submit {
    justify-self: start;
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--wc-white);
    background: var(--wc-signal);
    border: none;
    border-radius: var(--wc-radius-sm, 6px);
    padding: 10px 22px;
    cursor: pointer;
}

.toolbox-review-form__submit:hover {
    background: var(--wc-ink);
}

.toolbox-review-form__submit:disabled {
    opacity: 0.6;
    cursor: default;
}

.toolbox-review-form__message {
    font-size: 0.875rem;
    margin: 0;
}

.toolbox-review-form__message.is-error {
    color: var(--wc-ember);
}

.toolbox-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Codevoorbeelden in de contextsectie: bij developer-, content- en
   diagramtools zijn de examples letterlijke syntax, geen lopende tekst. */
.toolbox-tool-context__list--code {
    list-style: none;
    padding-left: 0;
}

.toolbox-tool-context__list--code li {
    margin-bottom: 8px;
}

.toolbox-tool-context__list--code code {
    display: inline-block;
    font-size: 0.875rem;
    color: var(--wc-ink);
    background: var(--wc-white);
    border: 1px solid var(--wc-stone-border);
    border-radius: var(--wc-radius-sm, 6px);
    padding: 4px 10px;
}

/* Google-review-verwijzing, zichtbaar ná het versturen van een beoordeling. */
.toolbox-review-google {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--wc-stone-border);
    max-width: 560px;
}

.toolbox-review-google__text {
    font-size: 0.875rem;
    color: var(--wc-stone);
    margin: 0 0 4px;
}

.toolbox-review-google__link {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--wc-signal);
    text-decoration: none;
}

.toolbox-review-google__link:hover {
    color: var(--wc-ember);
    text-decoration: underline;
}

/* -----------------------------------------------------------------------
   VOOR/NA-ILLUSTRATIE — afbeeldingstools

   Een statische illustratie naast de tool. Zie de macro-toelichting in
   components/toolbox_tool.html voor waarom hier geen voorgeladen
   voorbeeldafbeelding in de tool zelf staat.
   ----------------------------------------------------------------------- */
.toolbox-tool-example {
    padding: 8px 0 40px;
}

.toolbox-tool-example__title {
    font-family: var(--wc-font-accent);
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--wc-ink);
    margin: 0 0 16px;
}

.toolbox-tool-example__pair {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
}

.toolbox-tool-example__figure {
    flex: 0 1 auto;
    max-width: 340px;
    margin: 0;
}

.toolbox-tool-example__figure img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--wc-stone-border);
    border-radius: var(--wc-radius-md, 8px);
}

.toolbox-tool-example__figure figcaption {
    font-size: 0.8125rem;
    color: var(--wc-stone);
    margin-top: 8px;
}

.toolbox-tool-example__arrow {
    font-size: 1.5rem;
    color: var(--wc-stone);
    flex: 0 0 auto;
}

@media (max-width: 640px) {
    .toolbox-tool-example__arrow {
        transform: rotate(90deg);
        margin: 0 auto;
    }
}

/* ── Website-check en AI-vindbaarheidscheck ─────────────────────────────────
   Twee tools, één weergave: een invoerregel met daaronder een samenvatting,
   optionele panelen (zoekresultaat-voorvertoning of de bot-tabel) en de
   bevindingenlijst. Statuskleuren volgen de bestaande toolbox-variabelen. */

.toolbox-site-check__label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.toolbox-site-check__row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: stretch;
}

/* Het veld deelt de basisstijl van .toolbox-tool-widget__input (rand, focus),
   maar dat is een textarea-stijl: 180px hoog en monospace. Voor één regel URL
   werkt dat niet. Overschreven via twee klassen — hogere specificiteit, geen
   !important. */
.toolbox-site-check .toolbox-site-check__input {
    flex: 1 1 18rem;
    min-width: 0;
    min-height: 0;
    font-family: inherit;
    font-size: 1rem;
    padding: 0.75rem 1rem;
    resize: none;
}

.toolbox-site-check__hint {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    opacity: 0.75;
}

.toolbox-site-check__result {
    margin-top: 2rem;
    /* De controller scrollt het resultaat in beeld; zonder deze marge schuift
       de eerste regel onder de sticky toolbox-navigatie. */
    scroll-margin-top: 8rem;
}

.toolbox-site-check__checked {
    font-size: 0.9375rem;
    word-break: break-all;
    margin-bottom: 0.75rem;
}

.toolbox-site-check__counts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.toolbox-site-check__count {
    border-radius: 999px;
    padding: 0.25rem 0.75rem;
    font-size: 0.875rem;
    border: 1px solid currentColor;
}

.toolbox-site-check__count--fail { color: #b42318; }
.toolbox-site-check__count--warn { color: #b54708; }
.toolbox-site-check__count--info { color: #175cd3; }
.toolbox-site-check__count--ok   { color: #067647; }

.toolbox-site-check__cached {
    margin-top: 0.75rem;
    font-size: 0.8125rem;
    opacity: 0.75;
}

.toolbox-site-check__panel {
    margin-top: 1.5rem;
    padding: 1.25rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 0.75rem;
}

.toolbox-site-check__panel-title {
    font-size: 1.0625rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.toolbox-site-check__panel-text {
    font-size: 0.9375rem;
    margin-bottom: 0.75rem;
}

/* Voorvertoning van het zoekresultaat: bewust dicht bij de weergave van Google
   zelf, want de vraag is juist "past mijn titel daar". */
.toolbox-site-check__serp {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    max-width: 600px;
}

.toolbox-site-check__serp-url { font-size: 0.8125rem; color: #4d5156; word-break: break-all; }
.toolbox-site-check__serp-title { font-size: 1.25rem; color: #1a0dab; line-height: 1.3; }
.toolbox-site-check__serp-desc { font-size: 0.875rem; color: #4d5156; line-height: 1.5; }

.toolbox-site-check__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.toolbox-site-check__link { text-decoration: underline; }

.toolbox-site-check__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.toolbox-site-check__table th,
.toolbox-site-check__table td {
    text-align: left;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.toolbox-site-check__row--blocked td { color: #b42318; font-weight: 500; }

.toolbox-site-check__findings { margin-top: 1.5rem; }

.toolbox-site-check__finding {
    padding: 1rem 1.25rem;
    border-left: 3px solid transparent;
    border-radius: 0 0.5rem 0.5rem 0;
    margin-bottom: 0.75rem;
    background: rgba(0, 0, 0, 0.02);
}

.toolbox-site-check__finding--fail { border-left-color: #b42318; }
.toolbox-site-check__finding--warn { border-left-color: #b54708; }
.toolbox-site-check__finding--info { border-left-color: #175cd3; }
.toolbox-site-check__finding--ok   { border-left-color: #067647; }

.toolbox-site-check__finding-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.375rem;
}

.toolbox-site-check__finding-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

.toolbox-site-check__badge {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
    color: #fff;
}

.toolbox-site-check__badge--fail { background: #b42318; }
.toolbox-site-check__badge--warn { background: #b54708; }
.toolbox-site-check__badge--info { background: #175cd3; }
.toolbox-site-check__badge--ok   { background: #067647; }

/* Zichtbaar onderscheid tussen bewijs en aanwijzing — zie de docstring van
   services/toolbox_geo_check_service.py. */
.toolbox-site-check__certainty {
    font-size: 0.75rem;
    font-style: italic;
    opacity: 0.8;
}

.toolbox-site-check__finding-text {
    font-size: 0.9375rem;
    line-height: 1.6;
    margin: 0;
}

.toolbox-site-check__evidence {
    display: inline-block;
    margin-top: 0.5rem;
    padding: 0.125rem 0.375rem;
    font-size: 0.8125rem;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 0.25rem;
    word-break: break-all;
}

@media (max-width: 640px) {
    .toolbox-site-check__row { flex-direction: column; }
    .toolbox-site-check__table { display: block; overflow-x: auto; }

    /* Op een telefoon passen vier kolommen niet naast elkaar. Horizontaal
       scrollen duwt juist de belangrijkste kolom (toegang) uit beeld, dus de
       tabel wordt hier een rij blokjes: botnaam als kop, de rest met zijn
       kolomnaam ervoor. */
    .toolbox-site-check__table { display: block; overflow-x: visible; }
    .toolbox-site-check__table thead { display: none; }

    .toolbox-site-check__table tbody,
    .toolbox-site-check__table tr,
    .toolbox-site-check__table td { display: block; width: 100%; }

    .toolbox-site-check__table tr {
        padding: 0.625rem 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    }

    .toolbox-site-check__table td {
        border: none;
        padding: 0.0625rem 0;
    }

    .toolbox-site-check__table td:first-child { font-weight: 600; }

    .toolbox-site-check__table td[data-label]:not([data-label=""])::before {
        content: attr(data-label) ': ';
        opacity: 0.7;
    }

    .toolbox-site-check__table td[data-blocked] { font-weight: 600; }
}

/* =====================================================================
   DIENSTEN-CTA (templates/toolbox/_cta.html)

   Staat tussen de toolinhoud en de footer op elke toolboxpagina. Bewust
   rustig gehouden: de tool is waarvoor de bezoeker kwam, dit is de
   afsluiting. Vandaar canvas-alt als achtergrond in plaats van ink —
   dat laat de donkere footer eronder het visuele eindpunt blijven.
   ===================================================================== */
.toolbox-cta {
    background: var(--wc-canvas-alt);
    border-top: 1px solid var(--wc-stone-border);
    padding: 56px 0;
}

.toolbox-cta__inner {
    max-width: 680px;
}

.toolbox-cta__eyebrow {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--wc-ember);
    margin-bottom: 12px;
}

.toolbox-cta__title {
    font-family: var(--wc-font-accent);
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    line-height: 1.2;
    color: var(--wc-ink);
    margin-bottom: 12px;
}

.toolbox-cta__text {
    color: var(--wc-ink-light);
    line-height: 1.65;
    margin-bottom: 24px;
}

.toolbox-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.toolbox-cta__link {
    display: inline-flex;
    align-items: center;
    padding: 11px 20px;
    border: 1px solid var(--wc-stone-border);
    border-radius: var(--wc-radius-md);
    font-weight: 500;
    color: var(--wc-ink);
    background: var(--wc-canvas);
    transition: background var(--wc-duration) var(--wc-ease),
                color var(--wc-duration) var(--wc-ease),
                border-color var(--wc-duration) var(--wc-ease);
}

.toolbox-cta__link:hover {
    border-color: var(--wc-ember);
    color: var(--wc-ember);
    text-decoration: none;
}

.toolbox-cta__link--primary {
    background: var(--wc-ember);
    border-color: var(--wc-ember);
    color: var(--wc-white);
}

/* Op de primaire knop wint de ember-achtergrond al aandacht; bij hover
   alleen verdiepen, niet omkeren — anders springt het blok visueel meer
   dan de tool erboven. */
.toolbox-cta__link--primary:hover {
    background: var(--wc-ink);
    border-color: var(--wc-ink);
    color: var(--wc-white);
}

@media (max-width: 640px) {
    .toolbox-cta {
        padding: 40px 0;
    }

    .toolbox-cta__link {
        width: 100%;
        justify-content: center;
    }
}

/* =====================================================================
   LLMS.TXT-GENERATOR (templates/toolbox/seo/_llms_widget.html)

   Formulier links, live preview rechts. De preview is bewust donker: het
   is een bestand, geen invoerveld, en dat onderscheid moet je zien zonder
   de labels te lezen.
   ===================================================================== */
.toolbox-llms__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}

/* .toolbox-tool-widget__input draagt min-height:180px voor de textarea's van
   de formatter-tools. Hier zijn het eenregelige velden, dus die hoogte moet
   eraf — via een extra klasse-selector in plaats van !important. */
.toolbox-llms .toolbox-tool-widget__input {
    min-height: 0;
    font-family: var(--wc-font-primary);
}

.toolbox-llms .toolbox-llms__textarea {
    min-height: 72px;
}

.toolbox-llms__field {
    margin-bottom: 20px;
}

.toolbox-llms__label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--wc-ink);
    margin-bottom: 6px;
}

.toolbox-llms__hint {
    font-size: 0.8125rem;
    color: var(--wc-ink-light);
    margin-top: 6px;
}

.toolbox-llms__section {
    border: 1px solid var(--wc-stone-border);
    border-radius: var(--wc-radius-md);
    padding: 16px;
    margin-bottom: 16px;
    background: var(--wc-canvas-alt);
}

.toolbox-llms__section-head {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 12px;
}

.toolbox-llms .toolbox-llms__section-name {
    font-weight: 600;
}

.toolbox-llms__link-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr) auto;
    gap: 8px;
    margin-bottom: 8px;
    align-items: center;
}

.toolbox-llms .toolbox-llms__sub-input {
    padding: 9px 12px;
    font-size: 0.875rem;
}

.toolbox-llms__mini-btn {
    padding: 7px 12px;
    font-size: 0.8125rem;
    color: var(--wc-ink-light);
    background: var(--wc-white);
    border: 1px solid var(--wc-stone-border);
    border-radius: var(--wc-radius-sm);
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--wc-duration) var(--wc-ease),
                border-color var(--wc-duration) var(--wc-ease);
}

.toolbox-llms__mini-btn:hover {
    color: var(--wc-ember);
    border-color: var(--wc-ember);
}

.toolbox-llms__section-foot,
.toolbox-llms__form-actions {
    margin-top: 8px;
}

/* ---------- preview ---------- */
.toolbox-llms__preview {
    position: sticky;
    top: 24px;
    border: 1px solid var(--wc-stone-border);
    border-radius: var(--wc-radius-md);
    overflow: hidden;
    background: var(--wc-ink);
}

.toolbox-llms__preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.toolbox-llms__filename {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8125rem;
    color: var(--wc-white);
}

.toolbox-llms__count {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.55);
}

.toolbox-llms__output {
    margin: 0;
    padding: 16px;
    max-height: 460px;
    overflow: auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8125rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.92);
    white-space: pre-wrap;
    word-break: break-word;
}

.toolbox-llms__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 12px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Buiten beeld geparkeerd hulpveld voor de execCommand-fallback bij kopiëren;
   staat hier omdat inline stijlen in templates/JS niet zijn toegestaan. */
.toolbox-llms__clipboard-helper {
    position: fixed;
    left: -9999px;
}

/* ---------- plaatsingsinstructies ---------- */
.toolbox-llms-install {
    max-width: 760px;
    margin: 40px auto 0;
}

.toolbox-llms-install__title {
    font-family: var(--wc-font-accent);
    font-size: 1.5rem;
    color: var(--wc-ink);
    margin-bottom: 8px;
}

.toolbox-llms-install__intro {
    color: var(--wc-ink-light);
    line-height: 1.65;
    margin-bottom: 20px;
}

.toolbox-llms-install__item {
    border: 1px solid var(--wc-stone-border);
    border-radius: var(--wc-radius-md);
    margin-bottom: 8px;
    background: var(--wc-white);
}

.toolbox-llms-install__item > summary {
    padding: 14px 18px;
    font-weight: 600;
    color: var(--wc-ink);
    cursor: pointer;
}

.toolbox-llms-install__body {
    padding: 0 18px 18px;
    color: var(--wc-ink-light);
    line-height: 1.65;
}

.toolbox-llms-install__code {
    margin: 12px 0 0;
    padding: 14px 16px;
    overflow-x: auto;
    background: var(--wc-canvas-alt);
    border: 1px solid var(--wc-stone-border);
    border-radius: var(--wc-radius-sm);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--wc-ink);
}

@media (max-width: 900px) {
    .toolbox-llms__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .toolbox-llms__preview {
        position: static;
    }

    .toolbox-llms__link-row {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Vervolgstap onder een bevinding: verwijst naar de toolboxtool die het
   probleem oplost (zie services/toolbox_check_presenter.py::_action). Als
   link vormgegeven en niet als knop — het is een suggestie, geen oproep. */
.toolbox-site-check__action {
    display: inline-block;
    margin-top: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--wc-ember);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.toolbox-site-check__action:hover {
    color: var(--wc-ink);
}

/* Voorvullen vanaf een bestaande site: staat bovenaan het formulier en is
   optioneel, dus visueel afgezonderd van de velden eronder. */
.toolbox-llms__prefill {
    padding: 16px;
    margin-bottom: 24px;
    background: var(--wc-color-info-bg);
    border: 1px solid var(--wc-stone-border);
    border-radius: var(--wc-radius-md);
}

.toolbox-llms__prefill-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.toolbox-llms__prefill-row .toolbox-tool-widget__input {
    flex: 1 1 auto;
}

@media (max-width: 640px) {
    .toolbox-llms__prefill-row {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ------------------------------------------------------------------
   Veiligheidscheck — certificaatsamenvatting en scope-blok
   ------------------------------------------------------------------ */

/* Feitenlijst in het certificaatpaneel: label links, waarde rechts, en op
   smal scherm onder elkaar. Geen tabel, want het zijn losse eigenschappen
   van één ding en geen rijen van gelijksoortige records. */
.toolbox-site-check__facts {
    display: grid;
    gap: 2px;
    margin: 0;
}
.toolbox-site-check__fact {
    display: grid;
    grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
    gap: 4px 16px;
    padding: 8px 0;
    border-bottom: 1px solid var(--wc-stone-border);
}
.toolbox-site-check__fact:last-child {
    border-bottom: 0;
}
.toolbox-site-check__fact-label {
    color: var(--wc-stone);
    font-size: 0.9375rem;
}
.toolbox-site-check__fact-value {
    margin: 0;
    color: var(--wc-ink);
    overflow-wrap: anywhere;
}
.toolbox-site-check__fact-value[data-state="ok"] {
    color: var(--wc-color-success);
}
.toolbox-site-check__fact-value[data-state="warn"] {
    color: var(--wc-color-warning);
}
.toolbox-site-check__fact-value[data-state="fail"] {
    color: var(--wc-color-danger);
    font-weight: 500;
}

/* Het scope-blok: waarom deze check niet naar kwetsbaarheden zoekt. Staat
   direct onder de tool, dus visueel rustiger dan de tool zelf — het is
   uitleg, geen bediening. */
.toolbox-tool-scope {
    padding: 8px 0 8px;
}
.toolbox-tool-scope__inner {
    max-width: 72ch;
}
.toolbox-tool-scope__title {
    font-family: var(--wc-font-accent);
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--wc-ink);
    margin: 28px 0 10px;
}
.toolbox-tool-scope__intro,
.toolbox-tool-scope__why,
.toolbox-tool-scope__closing {
    color: var(--wc-stone);
    line-height: 1.8;
    margin: 0 0 14px;
}
.toolbox-tool-scope__closing {
    color: var(--wc-ink-light);
    font-size: 0.9375rem;
}
.toolbox-tool-scope__columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: 18px 0 20px;
}
.toolbox-tool-scope__column {
    padding: 16px 18px;
    border: 1px solid var(--wc-stone-border);
    border-radius: var(--wc-radius-md, 10px);
    background: var(--wc-canvas-alt);
}
.toolbox-tool-scope__column--do {
    border-left: 3px solid var(--wc-color-success);
}
.toolbox-tool-scope__column--dont {
    border-left: 3px solid var(--wc-stone);
}
.toolbox-tool-scope__column-title {
    font-family: var(--wc-font-accent);
    font-size: 1rem;
    font-weight: 500;
    color: var(--wc-ink);
    margin: 0 0 8px;
}
.toolbox-tool-scope__list {
    margin: 0;
    padding-left: 18px;
    list-style: disc;
    color: var(--wc-stone);
    line-height: 1.7;
    font-size: 0.9375rem;
}
.toolbox-tool-scope__list li + li {
    margin-top: 6px;
}

@media (max-width: 640px) {
    .toolbox-tool-scope__columns {
        grid-template-columns: minmax(0, 1fr);
    }
    .toolbox-site-check__fact {
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
    }
}

/* Afzenderslijst in het e-mailpaneel: wie mag er namens dit domein mailen.
   Losse regels in plaats van bullets — het is een inventarisatie die je
   langsloopt, geen opsomming die je leest. */
.toolbox-site-check__subtitle {
    font-family: var(--wc-font-accent);
    font-size: 1rem;
    font-weight: 500;
    color: var(--wc-ink);
    margin: 18px 0 8px;
}
.toolbox-site-check__senders {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.toolbox-site-check__sender {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 5px 12px;
    border: 1px solid var(--wc-stone-border);
    border-radius: 999px;
    background: var(--wc-canvas-alt);
    font-size: 0.9375rem;
    color: var(--wc-ink);
}
/* Een include die we niet herkennen: geen fout, maar wel het eerste dat je
   wilt natrekken als je de lijst langsloopt. */
.toolbox-site-check__sender[data-unknown="true"] {
    border-style: dashed;
}
.toolbox-site-check__sender-name {
    font-weight: 500;
}
.toolbox-site-check__sender-kind {
    color: var(--wc-stone);
    font-size: 0.8125rem;
}