/* =========================================================================
 * NextName Kennisbank — TLD-info page
 * Brand match: Plus Jakarta Sans + Manrope, #502f88 / #7e3bd0 / #07010c
 * / #e6793e. Progressieve onthulling: hero -> facts -> FAQ vooraan ->
 * collapsed technische blokken -> CTA. Korte, scanbare pagina.
 * ========================================================================= */

:root {
    --nn-purple:      #502f88;
    --nn-purple-2:    #7e3bd0;
    --nn-purple-deep: #07010c;
    --nn-terracotta:  #e6793e;
    --nn-ink:         #0F0A1F;
    --nn-text:        #1C1830;
    --nn-mute:        #6B6680;
    --nn-rule:        #E8E5F0;
    --nn-soft:        #F5F3FA;

    --tld-font-display:
        "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont,
        "Segoe UI", system-ui, sans-serif;
    --tld-font-body:
        "Manrope", -apple-system, BlinkMacSystemFont,
        "Segoe UI", system-ui, sans-serif;
    --tld-font-mono:
        "JetBrains Mono", ui-monospace, "SF Mono", "Menlo", monospace;

    --tld-s-1: 0.25rem;
    --tld-s-2: 0.5rem;
    --tld-s-3: 0.75rem;
    --tld-s-4: 1rem;
    --tld-s-5: 1.5rem;
    --tld-s-6: 2rem;
    --tld-s-7: 3rem;
    --tld-s-8: 4rem;

    --tld-fs-xs:  0.75rem;
    --tld-fs-sm:  0.875rem;
    --tld-fs-base:1rem;
    --tld-fs-md:  1.125rem;
    --tld-fs-lg:  1.25rem;
    --tld-fs-xl:  1.625rem;
    --tld-fs-2xl: 2.25rem;
    --tld-fs-glyph: clamp(5rem, 13vw, 9rem);

    --tld-rule: 1px solid var(--nn-rule);
}

.kb-tld-page {
    font-family: var(--tld-font-body);
    color: var(--nn-text);
    background: #FFFFFF;
    line-height: 1.6;
    letter-spacing: -0.005em;
    -webkit-font-smoothing: antialiased;
}
.kb-tld-page a { color: var(--nn-purple); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.kb-tld-page a:hover { color: var(--nn-purple-2); }

/* -------------------------------------------------------------------------
 * Hero — compact, dark, signature
 * ------------------------------------------------------------------------- */

.tld-hero {
    background: var(--nn-purple-deep);
    color: #FFFFFF;
    padding: var(--tld-s-7) 0 var(--tld-s-8);
    position: relative;
    overflow: hidden;
}
.tld-hero::before {
    content: "";
    position: absolute;
    top: -180px; left: -100px;
    width: 420px; height: 420px;
    background: radial-gradient(circle, rgba(126, 59, 208, 0.28), transparent 65%);
    pointer-events: none;
}
.tld-hero::after {
    content: "";
    position: absolute;
    bottom: -140px; right: -60px;
    width: 360px; height: 360px;
    background: radial-gradient(circle, rgba(230, 121, 62, 0.2), transparent 70%);
    pointer-events: none;
}
.tld-hero > .container { position: relative; z-index: 1; }

.tld-hero__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--tld-s-5);
    align-items: end;
}
@media (min-width: 768px) {
    .tld-hero__inner {
        grid-template-columns: minmax(0, auto) minmax(0, 1fr);
        gap: var(--tld-s-7);
    }
}
.tld-hero__brand { min-width: 0; max-width: 100%; }

.tld-hero__eyebrow {
    font-family: var(--tld-font-mono);
    font-size: var(--tld-fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: var(--tld-s-3);
}
.tld-hero__eyebrow span + span::before {
    content: "·";
    color: rgba(255, 255, 255, 0.3);
    margin: 0 0.8ch;
}

.tld-hero__glyph {
    font-family: var(--tld-font-display);
    font-size: clamp(3rem, 9vw, 6.5rem);
    font-weight: 200;
    line-height: 0.95;
    letter-spacing: -0.04em;
    color: #FFFFFF;
    margin: 0;
    margin-left: -0.04em;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
}
.tld-hero__glyph .dot {
    color: var(--nn-terracotta);
    flex: 0 0 auto;
}
.tld-hero__name {
    flex: 1 1 auto;
    min-width: 0;
    /* Verklein vanzelf bij lange TLD's zoals 'accountant' */
    font-size: 1em;
}
.tld-hero__glyph.is-long .tld-hero__name  { font-size: 0.72em; }
.tld-hero__glyph.is-xlong .tld-hero__name { font-size: 0.5em; }
.tld-hero__glyph.is-xlong .dot            { font-size: 0.7em; transform: translateY(0.05em); }

.tld-hero__body { padding-bottom: var(--tld-s-3); }

.tld-hero__meta {
    font-family: var(--tld-font-body);
    font-size: var(--tld-fs-md);
    font-weight: 500;
    color: #FFFFFF;
    margin: 0 0 var(--tld-s-3);
    line-height: 1.5;
}
.tld-hero__meta span + span::before {
    content: "·";
    color: var(--nn-terracotta);
    font-weight: 700;
    margin: 0 0.6ch;
}
.tld-hero__meta .registry {
    color: rgba(255, 255, 255, 0.7);
    font-weight: 400;
}
.tld-hero__meta a {
    color: var(--nn-terracotta-soft, #F5B841);
    text-decoration: none;
    font-weight: 600;
    transition: color 120ms ease;
}
.tld-hero__meta a::after {
    content: "\2197"; /* ↗ noordoost-pijl, signaleert externe link */
    display: inline-block;
    margin-left: 0.25em;
    font-size: 0.85em;
    font-weight: 700;
    transition: transform 150ms ease;
}
.tld-hero__meta .registry a {
    color: #FFFFFF;
}
.tld-hero__meta a:hover,
.tld-hero__meta a:focus-visible {
    color: var(--nn-terracotta);
}
.tld-hero__meta a:hover::after,
.tld-hero__meta a:focus-visible::after {
    transform: translate(2px, -2px);
}

.tld-hero__tagline {
    font-family: var(--tld-font-display);
    font-weight: 300;
    font-size: var(--tld-fs-md);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.6);
    max-width: 42ch;
    margin: 0;
}

/* Chips blijven beschikbaar voor andere contexten (bv. DNSSEC-algoritmes
   chiprow in tab-panels), maar de hero gebruikt ze niet meer. */
.tld-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--tld-s-2);
    padding: 0.35rem 0.7rem;
    background: var(--nn-soft);
    border: 1px solid var(--nn-rule);
    border-radius: 999px;
    font-size: var(--tld-fs-sm);
    font-weight: 500;
    color: var(--nn-ink);
}
.tld-chip__dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--nn-mute);
}

/* -------------------------------------------------------------------------
 * Section blocks — clear visual separation
 * ------------------------------------------------------------------------- */

.tld-block { padding: var(--tld-s-8) 0; }
.tld-block--tinted { background: var(--nn-soft); border-bottom: var(--tld-rule); }
.tld-block--faq { border-top: 2px solid var(--nn-ink); }

.tld-block__inner {
    max-width: 880px;
    margin: 0 auto;
}

.tld-section-heading {
    font-family: var(--tld-font-display);
    font-size: var(--tld-fs-2xl);
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.1;
    color: var(--nn-ink);
    margin: 0 0 var(--tld-s-5);
}
.tld-section-sub {
    font-family: var(--tld-font-mono);
    font-size: var(--tld-fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--nn-mute);
    margin-bottom: var(--tld-s-3);
    display: block;
}
.tld-section-intro {
    color: var(--nn-mute);
    font-size: var(--tld-fs-sm);
    margin: 0 0 var(--tld-s-6);
    max-width: 60ch;
}

/* -------------------------------------------------------------------------
 * Tabs — filled-pill, brand-styled
 * ------------------------------------------------------------------------- */

.tld-tabs__nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tld-s-2);
    margin-bottom: var(--tld-s-6);
}
.tld-tabs__btn {
    appearance: none;
    background: #FFFFFF;
    border: 1px solid var(--nn-rule);
    padding: var(--tld-s-3) var(--tld-s-5);
    font-family: var(--tld-font-body);
    font-size: var(--tld-fs-sm);
    font-weight: 600;
    color: var(--nn-text);
    cursor: pointer;
    white-space: nowrap;
    border-radius: 999px;
    transition: background 150ms ease, color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}
.tld-tabs__btn:hover {
    border-color: var(--nn-purple);
    color: var(--nn-purple);
}
.tld-tabs__btn[aria-selected="true"] {
    background: var(--nn-purple-deep);
    color: #FFFFFF;
    border-color: var(--nn-purple-deep);
    box-shadow: 0 4px 14px -4px rgba(7, 1, 12, 0.35);
}
.tld-tabs__btn[aria-selected="true"]:hover { color: #FFFFFF; }
.tld-tabs__btn:focus-visible {
    outline: 2px solid var(--nn-terracotta);
    outline-offset: 2px;
}
.tld-tabs__panel { display: none; }
.tld-tabs__panel.is-active { display: block; }

/* -------------------------------------------------------------------------
 * FAQ — open list with index-on-top, anchor-on-hover
 * ------------------------------------------------------------------------- */

.tld-faq-toc {
    margin-bottom: var(--tld-s-6);
    border-top: var(--tld-rule);
}
.tld-faq-toc ol {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: faq-toc;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}
@media (min-width: 768px) {
    .tld-faq-toc ol { grid-template-columns: 1fr 1fr; column-gap: var(--tld-s-7); }
}
.tld-faq-toc li {
    counter-increment: faq-toc;
    border-bottom: var(--tld-rule);
}
.tld-faq-toc li a {
    display: flex;
    align-items: baseline;
    gap: var(--tld-s-3);
    padding: var(--tld-s-3) 0;
    color: var(--nn-text);
    text-decoration: none;
    font-size: var(--tld-fs-sm);
    font-weight: 500;
    transition: color 150ms ease, padding-left 200ms ease;
}
.tld-faq-toc li a::before {
    content: counter(faq-toc, decimal-leading-zero);
    font-family: var(--tld-font-mono);
    font-size: var(--tld-fs-xs);
    color: var(--nn-mute);
    flex: 0 0 auto;
    min-width: 2ch;
}
.tld-faq-toc li a:hover {
    color: var(--nn-purple);
    padding-left: var(--tld-s-2);
}

.tld-faq {
    border-top: 1px solid var(--nn-ink);
    margin-bottom: var(--tld-s-8);
    counter-reset: faq;
}
.tld-faq__item {
    padding: var(--tld-s-7) 0;
    border-bottom: 1px solid var(--nn-rule);
    scroll-margin-top: var(--tld-s-6);
    counter-increment: faq;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--tld-s-4);
    position: relative;
}
@media (min-width: 768px) {
    .tld-faq__item { grid-template-columns: 80px 1fr; gap: var(--tld-s-5); }
}
.tld-faq__item:last-child { border-bottom: 1px solid var(--nn-ink); }
.tld-faq__item:target {
    background: linear-gradient(to right, rgba(230, 121, 62, 0.08), transparent 50%);
    padding-left: var(--tld-s-3);
    margin-left: calc(-1 * var(--tld-s-3));
}

.tld-faq__num {
    font-family: var(--tld-font-mono);
    font-size: var(--tld-fs-sm);
    font-weight: 500;
    color: var(--nn-mute);
    letter-spacing: 0.05em;
    margin: 0;
    padding-top: 0.6em;
}
.tld-faq__num::before { content: counter(faq, decimal-leading-zero); }

.tld-faq__head { display: flex; align-items: baseline; gap: var(--tld-s-3); }
.tld-faq__title {
    font-family: var(--tld-font-display);
    font-size: var(--tld-fs-xl);
    font-weight: 700;
    color: var(--nn-ink);
    letter-spacing: -0.02em;
    line-height: 1.25;
    margin: 0 0 var(--tld-s-4);
    flex: 1;
}
.tld-faq__anchor {
    flex: 0 0 auto;
    font-family: var(--tld-font-mono);
    font-size: var(--tld-fs-md);
    font-weight: 400;
    color: transparent;
    text-decoration: none;
    transition: color 150ms ease;
    user-select: none;
    align-self: baseline;
}
.tld-faq__item:hover .tld-faq__anchor,
.tld-faq__item:focus-within .tld-faq__anchor { color: var(--nn-terracotta); }
.tld-faq__anchor:hover { color: var(--nn-purple); }

.tld-faq__body {
    color: var(--nn-text);
    font-size: var(--tld-fs-base);
    line-height: 1.7;
    max-width: 62ch;
}
.tld-faq__body :first-child { margin-top: 0; }
.tld-faq__body > p,
.tld-faq__body > div { margin-bottom: var(--tld-s-3); }
.tld-faq__body > :last-child { margin-bottom: 0; }
.tld-faq__body > ul,
.tld-faq__body > ol { margin: 0 0 var(--tld-s-3) 0; padding-left: 1.5rem; }
.tld-faq__body > blockquote { margin: 0 0 var(--tld-s-3) 0; padding-left: 1rem; border-left: 3px solid var(--nn-border, #E5E5EA); }
.tld-faq__body a { color: var(--nn-purple); }

.tld-faq-empty {
    padding: var(--tld-s-5) 0;
    color: var(--nn-mute);
    font-style: italic;
    border-top: var(--tld-rule);
    border-bottom: var(--tld-rule);
    margin-bottom: var(--tld-s-8);
    text-align: center;
}

/* -------------------------------------------------------------------------
 * Definition list — used inside tab panels
 * ------------------------------------------------------------------------- */

.tld-defs {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin: 0;
}
@media (min-width: 640px) {
    .tld-defs { grid-template-columns: minmax(180px, 0.36fr) 1fr; }
}
.tld-defs > dt,
.tld-defs > dd {
    padding: var(--tld-s-3) 0;
    border-top: var(--tld-rule);
    margin: 0;
    font-size: var(--tld-fs-sm);
}
.tld-defs > dt {
    font-family: var(--tld-font-mono);
    font-size: var(--tld-fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--nn-mute);
    padding-right: var(--tld-s-5);
}
.tld-defs > dd {
    color: var(--nn-ink);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}
.tld-defs > dd code {
    font-family: var(--tld-font-mono);
    background: var(--nn-soft);
    padding: 0.1em 0.45em;
    border-radius: 3px;
    font-size: 0.92em;
    color: var(--nn-ink);
}
.tld-defs > dd a {
    color: var(--nn-purple);
    text-decoration: none;
    font-weight: 600;
    transition: color 120ms ease;
}
.tld-defs__more {
    display: inline;
    margin-left: 0.25em;
}
.tld-defs__more > summary {
    display: inline;
    list-style: none;
    cursor: pointer;
    color: var(--nn-purple);
    font-weight: 600;
}
.tld-defs__more > summary::-webkit-details-marker { display: none; }
.tld-defs__more > summary:hover { color: var(--nn-terracotta); }
.tld-defs__more[open] > summary { color: var(--nn-mute); font-weight: 500; }
.tld-defs__more[open] > summary::before { content: "\2013 "; }
.tld-defs > dd a[target="_blank"]::after {
    content: "\2197";
    display: inline-block;
    margin-left: 0.2em;
    font-size: 0.85em;
    color: var(--nn-terracotta);
    transition: transform 150ms ease;
}
.tld-defs > dd a:hover,
.tld-defs > dd a:focus-visible {
    color: var(--nn-terracotta);
}
.tld-defs > dd a[target="_blank"]:hover::after,
.tld-defs > dd a[target="_blank"]:focus-visible::after {
    transform: translate(2px, -2px);
}

.tld-chiprow {
    display: flex; flex-wrap: wrap; gap: var(--tld-s-2);
    padding: var(--tld-s-2) 0;
}
.tld-chiprow .tld-chip {
    background: var(--nn-soft);
    border-color: var(--nn-rule);
    color: var(--nn-ink);
    padding: 0.18rem 0.55rem;
    font-family: var(--tld-font-mono);
    font-size: 0.72rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
}
.tld-chiprow .tld-chip__dot { display: none; }

.tld-authcode {
    margin: var(--tld-s-4) 0 0;
    padding: var(--tld-s-5);
    background: var(--nn-purple-deep);
    color: rgba(255, 255, 255, 0.92);
    border-radius: 6px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--tld-s-4);
}
.tld-authcode__label {
    font-family: var(--tld-font-mono);
    font-size: var(--tld-fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: var(--tld-s-1);
}
.tld-authcode__value {
    font-family: var(--tld-font-mono);
    font-size: var(--tld-fs-sm);
    color: #FFFFFF;
    word-break: break-all;
}

@media (prefers-reduced-motion: reduce) {
    .tld-faq-toc li a,
    .tld-faq__anchor,
    .tld-tabs__btn { transition: none; }
}

/* -------------------------------------------------------------------------
 * CTA
 * ------------------------------------------------------------------------- */

.tld-cta {
    margin-top: var(--tld-s-8);
    padding: var(--tld-s-7) var(--tld-s-6);
    background: var(--nn-purple-deep);
    color: #FFFFFF;
    border-radius: 10px;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--tld-s-5);
    position: relative;
    overflow: hidden;
}
.tld-cta::before {
    content: "";
    position: absolute;
    top: -120px; right: -80px;
    width: 320px; height: 320px;
    background: radial-gradient(circle, rgba(126, 59, 208, 0.32), transparent 65%);
    pointer-events: none;
}
.tld-cta > * { position: relative; z-index: 1; }
@media (min-width: 768px) {
    .tld-cta { grid-template-columns: 2fr 1fr; align-items: center; }
}
.tld-cta__head {
    font-family: var(--tld-font-display);
    font-size: var(--tld-fs-xl);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: #FFFFFF;
    margin: 0 0 var(--tld-s-2);
    max-width: 24ch;
}
.tld-cta__sub {
    font-family: var(--tld-font-display);
    font-weight: 300;
    font-size: var(--tld-fs-sm);
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    max-width: 44ch;
}
.tld-cta__btn {
    display: inline-flex;
    align-items: center;
    gap: var(--tld-s-3);
    padding: var(--tld-s-3) var(--tld-s-5);
    background: var(--nn-terracotta);
    color: #FFFFFF;
    text-decoration: none;
    font-family: var(--tld-font-body);
    font-size: var(--tld-fs-sm);
    font-weight: 600;
    letter-spacing: 0.01em;
    border-radius: 6px;
    border: none;
    transition: background 180ms ease, transform 180ms ease;
    justify-self: start;
}
.tld-cta__btn:hover {
    background: #FFFFFF;
    color: var(--nn-purple-deep);
    transform: translateY(-1px);
}
.tld-cta__btn .arrow { transition: transform 180ms ease; }
.tld-cta__btn:hover .arrow { transform: translateX(3px); }

.tld-support {
    margin-top: var(--tld-s-5);
    padding: var(--tld-s-4) var(--tld-s-5);
    border: 1px dashed var(--nn-rule);
    border-radius: 10px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--tld-s-4);
    background: #FFFFFF;
}
.tld-support__text {
    margin: 0;
    color: var(--nn-mute);
    font-size: var(--tld-fs-sm);
}
.tld-support__btn {
    color: var(--nn-purple);
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    white-space: nowrap;
}
.tld-support__btn:hover { color: var(--nn-terracotta); }
.tld-support__btn .arrow { transition: transform 150ms ease; }
.tld-support__btn:hover .arrow { transform: translateX(3px); }

.tld-empty {
    padding: var(--tld-s-7) 0;
    text-align: center;
    color: var(--nn-mute);
    font-style: italic;
}

/* =========================================================================
 * TLD-sheet ā€” expertoverzicht (kolomgroepen + continent-chips)
 * ========================================================================= */
.kb-tldsheet {
    font-family: var(--tld-font-body);
    color: var(--nn-text);
    background: #FFFFFF;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

.sheet-hero {
    background:
        radial-gradient(60% 80% at 80% 0%, rgba(126, 59, 208, 0.18) 0%, transparent 60%),
        linear-gradient(180deg, #0F0A1F 0%, #07010c 100%);
    color: #FFFFFF;
    padding: var(--tld-s-7) 0 var(--tld-s-6);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.sheet-hero__eyebrow {
    font-family: var(--tld-font-mono);
    font-size: var(--tld-fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: rgba(255, 255, 255, 0.55);
    margin: 0 0 var(--tld-s-3);
}
.sheet-hero__title {
    font-family: var(--tld-font-display);
    font-size: clamp(2rem, 5vw, 3.25rem);
    font-weight: 300;
    margin: 0 0 var(--tld-s-3);
    letter-spacing: -0.02em;
    line-height: 1.05;
}
.sheet-hero__lead {
    color: rgba(255, 255, 255, 0.7);
    max-width: 56ch;
    margin: 0;
    font-size: var(--tld-fs-md);
}

/* Filter-chips + search */
.sheet-controls {
    background: var(--nn-soft);
    border-bottom: var(--tld-rule);
    padding: var(--tld-s-4) 0;
    position: sticky;
    top: 0;
    z-index: 10;
}
.sheet-controls__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--tld-s-4);
    justify-content: space-between;
}
.sheet-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tld-s-2);
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
}
.sheet-search {
    position: relative;
    display: inline-flex;
    align-items: center;
    background: #FFFFFF;
    border: 1px solid var(--nn-rule);
    border-radius: 999px;
    padding: 0 0.85rem;
    min-width: 16rem;
    transition: border-color 120ms ease, box-shadow 120ms ease;
    flex: 0 0 auto;
}
.sheet-search:focus-within {
    border-color: var(--nn-purple);
    box-shadow: 0 0 0 3px rgba(80, 47, 136, 0.12);
}
.sheet-search__icon {
    color: var(--nn-mute);
    font-size: 1.05rem;
    margin-right: 0.45rem;
    line-height: 1;
    transform: translateY(-1px);
}
.sheet-search input[type="search"] {
    border: 0;
    background: transparent;
    outline: 0;
    font-family: var(--tld-font-body);
    font-size: var(--tld-fs-sm);
    color: var(--nn-text);
    padding: 0.45rem 0;
    width: 100%;
    min-width: 0;
}
.sheet-search input[type="search"]::-webkit-search-cancel-button { display: none; }
.sheet-search__clear {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--nn-mute);
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    padding: 0 0 0 0.4rem;
}
.sheet-search__clear:hover { color: var(--nn-terracotta); }
@media (max-width: 720px) {
    .sheet-controls__inner { flex-direction: column; align-items: stretch; }
    .sheet-search { width: 100%; min-width: 0; }
}
.sheet-chip {
    appearance: none;
    border: 1px solid var(--nn-rule);
    background: #FFFFFF;
    color: var(--nn-text);
    font-family: var(--tld-font-body);
    font-size: var(--tld-fs-sm);
    font-weight: 600;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
    line-height: 1.2;
}
.sheet-chip__count {
    color: var(--nn-mute);
    font-weight: 500;
    margin-left: 0.25em;
}
.sheet-chip:hover {
    border-color: var(--nn-purple);
    color: var(--nn-purple);
}
.sheet-chip.is-active {
    background: var(--nn-purple);
    border-color: var(--nn-purple);
    color: #FFFFFF;
}
.sheet-chip.is-active .sheet-chip__count { color: rgba(255, 255, 255, 0.7); }

/* Kolomgroep-tabs */
.sheet-body { padding: var(--tld-s-6) 0 var(--tld-s-8); }

.sheet-tabs__nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tld-s-2);
    margin: 0 0 var(--tld-s-5);
    padding-bottom: var(--tld-s-3);
    border-bottom: var(--tld-rule);
}
.sheet-tabs__btn {
    appearance: none;
    background: transparent;
    border: 0;
    font-family: var(--tld-font-display);
    font-size: var(--tld-fs-md);
    font-weight: 600;
    color: var(--nn-mute);
    padding: 0.55rem 0;
    cursor: pointer;
    position: relative;
    transition: color 150ms ease;
    letter-spacing: -0.005em;
}
.sheet-tabs__btn + .sheet-tabs__btn { margin-left: var(--tld-s-5); }
.sheet-tabs__btn:hover { color: var(--nn-purple); }
.sheet-tabs__btn[aria-selected="true"] {
    color: var(--nn-purple-deep);
}
.sheet-tabs__btn[aria-selected="true"]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(var(--tld-s-3) * -1 - 1px);
    height: 2px;
    background: var(--nn-terracotta);
    border-radius: 2px;
}

.sheet-tabs__panel { animation: sheetFadeIn 180ms ease; }
@keyframes sheetFadeIn {
    from { opacity: 0; transform: translateY(2px); }
    to   { opacity: 1; transform: none; }
}

/* Tabel */
.sheet-tablewrap {
    border: var(--tld-rule);
    border-radius: 10px;
    overflow: auto;
    max-height: 75vh;
    background: #FFFFFF;
}
.sheet-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--tld-fs-sm);
    font-variant-numeric: tabular-nums;
}
.sheet-table thead th {
    position: sticky;
    top: 0;
    background: var(--nn-soft);
    color: var(--nn-ink);
    font-family: var(--tld-font-mono);
    font-size: var(--tld-fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    text-align: left;
    padding: 0;
    border-bottom: var(--tld-rule);
    z-index: 2;
    white-space: nowrap;
}
.sheet-sort {
    appearance: none;
    background: transparent;
    border: 0;
    color: inherit;
    font: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    text-align: left;
    width: 100%;
    padding: 0.7rem 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    cursor: pointer;
    transition: color 120ms ease;
}
.sheet-sort:hover { color: var(--nn-purple); }
.sheet-sort__icon {
    display: inline-block;
    width: 0.7em;
    text-align: center;
    color: rgba(15, 10, 31, 0.25);
    transition: color 120ms ease;
}
.sheet-sort__icon::before { content: "\2195"; /* ↕ default */ }
.sheet-table thead th[aria-sort="ascending"]  .sheet-sort__icon::before { content: "\2191"; color: var(--nn-terracotta); }
.sheet-table thead th[aria-sort="descending"] .sheet-sort__icon::before { content: "\2193"; color: var(--nn-terracotta); }
.sheet-table thead th[aria-sort="ascending"]  .sheet-sort,
.sheet-table thead th[aria-sort="descending"] .sheet-sort { color: var(--nn-purple-deep); }

.sheet-table tbody td {
    padding: 0.55rem 0.85rem;
    border-bottom: 1px solid var(--nn-rule);
    vertical-align: middle;
    white-space: nowrap;
}
.sheet-table tbody tr:last-child td { border-bottom: 0; }
.sheet-table tbody tr:hover td { background: rgba(126, 59, 208, 0.045); }

/* Eerste kolom (.Extensie) blijft links plakken */
.sheet-table thead th:first-child,
.sheet-table tbody td:first-child {
    position: sticky;
    left: 0;
    background: #FFFFFF;
    font-family: var(--tld-font-mono);
    font-weight: 600;
    z-index: 1;
    border-right: var(--tld-rule);
}
.sheet-table thead th:first-child {
    background: var(--nn-soft);
    z-index: 3;
}
.sheet-table tbody tr:hover td:first-child {
    background: rgba(126, 59, 208, 0.045);
}
.sheet-table tbody td:first-child a {
    color: var(--nn-purple);
    text-decoration: none;
    font-weight: 700;
}
.sheet-table tbody td:first-child a:hover {
    color: var(--nn-terracotta);
}

/* Externe links in cellen krijgen dezelfde subtiele ā†— als de info-page */
.sheet-table tbody td a[target="_blank"] {
    color: var(--nn-purple);
    text-decoration: none;
}
.sheet-table tbody td a[target="_blank"]::after {
    content: "\2197";
    display: inline-block;
    margin-left: 0.2em;
    font-size: 0.85em;
    color: var(--nn-terracotta);
    transition: transform 150ms ease;
}
.sheet-table tbody td a[target="_blank"]:hover { color: var(--nn-terracotta); }
.sheet-table tbody td a[target="_blank"]:hover::after { transform: translate(2px, -2px); }

.sheet-table code {
    font-family: var(--tld-font-mono);
    font-size: 0.92em;
    background: var(--nn-soft);
    padding: 0.1em 0.4em;
    border-radius: 3px;
    color: var(--nn-ink);
}

.sheet-more {
    display: inline-block;
    margin-left: 0.25em;
    padding: 0.05em 0.45em;
    border-radius: 999px;
    background: var(--nn-soft);
    color: var(--nn-purple);
    font-family: var(--tld-font-mono);
    font-size: 0.78em;
    font-weight: 700;
    cursor: help;
}

/* Toegestane-landen cel mag wrappen (anders wordt de rij idioot breed). */
.sheet-table tbody td:has(.sheet-countries) {
    white-space: normal;
    min-width: 14rem;
    max-width: 28rem;
    line-height: 1.4;
}
.sheet-countries {
    display: inline;
    font-family: var(--tld-font-mono);
    font-size: 0.92em;
}

.sheet-empty-filter {
    margin: var(--tld-s-5) 0 0;
    padding: var(--tld-s-5);
    text-align: center;
    color: var(--nn-mute);
    background: var(--nn-soft);
    border-radius: 10px;
}
.sheet-empty {
    padding: var(--tld-s-7) 0;
    text-align: center;
    color: var(--nn-mute);
    font-style: italic;
}

@media (max-width: 640px) {
    .sheet-tabs__btn + .sheet-tabs__btn { margin-left: var(--tld-s-4); }
    .sheet-table thead th,
    .sheet-table tbody td {
        padding: 0.5rem 0.6rem;
    }
}