/*
 * Gedeelde schil voor de nieuwe pagina's (dashboard, uitleg).
 *
 * Elke bestaande template draagt een eigen kopie van dit blok in een inline
 * <style>. Dat is hoe de pagina's uit elkaar gegroeid zijn: account.html heeft
 * andere text-muted waarden, review.html kent --surface-3 en merkbasis.html
 * niet. Nieuwe pagina's laden dit bestand via templates/_base.html, zodat er
 * een bron van waarheid is. Bestaande pagina's blijven ongemoeid tot de
 * opruiming na de launch.
 *
 * Waarden komen uit merkbasis.html (de rijkste set) aangevuld met --surface-3
 * uit review.html.
 */

:root {
    /* Warm donker in plaats van neutraal zwart. Pure grijzen lezen klinisch;
       een spoor amber in de ondergrond (rood/groen iets boven blauw) maakt
       hetzelfde donker rustiger en past bij een creatief product. Het verschil
       is klein genoeg om naast de bestaande pagina's te blijven staan. */
    --bg: #0B0A08;
    --surface: #131210;
    --surface-2: #1A1815;
    --surface-3: #211E1A;
    --border: rgba(255,240,214,0.08);
    --border-hover: rgba(255,240,214,0.16);
    --amber: #E8B84B;
    --amber-dim: rgba(232,184,75,0.10);
    --text: #f0ede8;
    /* Gemeten op --surface (#111): 0.48 gaf 4.46:1 en zakte daarmee net onder
       de WCAG AA-grens van 4.5:1 voor normale tekst. 0.55 geeft 5.3:1.
       De oude 0.22 voor --text-dim gaf 1.85:1; die waarde is nu alleen voor
       decoratie en uitgeschakelde elementen, nooit voor tekst die iets zegt.
       Hierarchie maken we met grootte en gewicht, niet met onleesbaarheid. */
    --text-muted: rgba(240,237,232,0.55);
    /* 0.38 gaf ongeveer 3.2:1, te weinig voor de kleine tekst die er wel
       iets mee zegt. 0.55 haalt 4.5:1 op #080808, #111 en #131210. */
    --text-dim: rgba(240,237,232,0.55);
    --error: #f87171;
    --green: #34d399;

    /* Een familie, geen tweede lettertype. De hero van de landingspagina zet
       de toon: Raleway zwaar, strak gespatieerd, met een cursief amber woord
       als accent. Dat is de merkstem; een serif erbij maakte er een ander
       product van. */
    --sans: 'Raleway', system-ui, sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }

body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Raleway', system-ui, sans-serif;
    min-height: 100vh;
    margin: 0;
}

/* Grain: identiek aan index.html en merkbasis.html */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
    background-size: 128px 128px;
    opacity: 0.032;
    pointer-events: none;
    z-index: 0;
}

/* ── Header ───────────────────────────────────────────────────────────── */

/* De bestaande pagina's leunen hier op Tailwind-utilities (sticky top-0 z-50,
   flex justify-between). Deze schil laadt Tailwind niet, dus staat de lay-out
   van de header gewoon in CSS. */
header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(8,8,8,0.88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border);
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.875rem 1.5rem;
}

.wordmark {
    font-weight: 700;
    font-size: 1.3rem;
    letter-spacing: 0.04em;
    color: var(--text);
    text-decoration: none;
}

.nav-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

.btn-ghost {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-muted);
    padding: 0.5rem 0.875rem;
    border-radius: 6px;
    transition: all 0.2s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: none;
    border: none;
    cursor: pointer;
}
.btn-ghost:hover { color: var(--text); background: rgba(255,255,255,0.06); }
.btn-ghost.active { color: var(--amber); }

.btn-lang {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    padding: 0.375rem 0.625rem;
    border-radius: 4px;
    border: 1px solid var(--border);
    background: transparent;
    cursor: pointer;
    transition: all 0.2s;
}
.btn-lang:hover { border-color: var(--border-hover); color: var(--text); }


/* ── Layout ───────────────────────────────────────────────────────────── */

.main-content {
    position: relative;
    z-index: 1;
    padding: 2.25rem 1.5rem 5rem;
    max-width: 1080px;
    margin: 0 auto;
}
.main-content.wide { max-width: 1240px; }

/* ── Koppen ───────────────────────────────────────────────────────────── */

.section-number {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.65rem;
    color: var(--amber);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    display: block;
    margin-bottom: 0.3rem;
}

/* Zelfde opbouw als de hero: zwaar, strak gespatieerd, groot genoeg om te
   dragen. Het accentwoord staat cursief in amber, precies zoals "AI" op de
   landingspagina. */
.section-title {
    font-family: var(--sans);
    font-size: clamp(2rem, 4vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--text);
    margin: 0 0 0.4rem;
    line-height: 1.05;
}
.section-title .accent {
    color: var(--amber);
    font-style: italic;
    font-weight: 700;
}

.section-sub {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0;
}

/* Kaartkop is een <h2>: schermlezers lopen de pagina langs de koppen af, en
   een sprong van h1 naar h3 laat een niveau ontbreken. De marges en het
   gewicht worden expliciet gezet zodat de browserstandaard niets verschuift.

   Bewust geen mono-kapitalen meer: zeven verschillende elementen in
   JetBrains Mono lieten het scherm als een configuratiepaneel lezen. Mono is
   nu voorbehouden aan cijfers, datums en taalcodes. */
.card-title {
    font-family: var(--sans);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    /* Accentkleur: de kaarttitel moet boven de regels eronder uitsteken, niet
       ertussen opgaan (Barry, 2026-09-26). */
    color: var(--amber);
    margin: 0 0 0.9rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

/* ── Kaarten ──────────────────────────────────────────────────────────── */

.section-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1.5rem;
}

/* align-items: start is de belangrijkste regel hier. Zonder dit rekt elke
   kaart mee met de hoogste in zijn rij, en dan staat er onder een lijstje van
   drie regels een leeg vlak van 300px. Dat is wat het dashboard onaf liet
   ogen, meer dan welke kleur ook. */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
    align-items: start;
    gap: 1.25rem;
}

/* Asymmetrisch werkvlak: brede kolom voor het werk, smalle rail voor context.
   Twee gelijke kolommen zouden opnieuw suggereren dat alles even belangrijk is. */
.work-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
    align-items: start;
    gap: 1.25rem;
}
.work-rail { display: grid; gap: 1.25rem; align-content: start; }

@media (max-width: 900px) {
    .work-layout { grid-template-columns: 1fr; }
}

/* Een rij binnen een kaart. Bewust geen doosje per regel: een kaart vol
   omrande pillen is precies het generieke SaaS-beeld. Een haarlijn tussen de
   regels leest als een lijst in een goed gezette pagina. */
.row-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.25rem;
    border-bottom: 1px solid var(--border);
    margin: 0 -0.25rem;
    text-decoration: none;
    color: var(--text);
    font-size: 0.85rem;
    transition: background 0.15s, padding-left 0.15s;
}
.row-link:hover { background: rgba(255,255,255,0.025); padding-left: 0.5rem; }
.row-link:last-child { border-bottom: none; padding-bottom: 0.15rem; }

.row-main { flex: 1; min-width: 0; }
.row-name {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Metadata is klein en moet dus juist ruim boven de contrastgrens zitten:
   merknaam, aantal varianten en datum zijn informatie, geen decoratie. */
.row-meta {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.65rem;
    color: var(--text-muted);
    letter-spacing: 0.06em;
    margin-top: 2px;
}

/* ── Kerncijfers ──────────────────────────────────────────────────────── */

.stat-row {
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem;
    padding: 0.5rem 0 2rem;
}

.stat { display: block; text-decoration: none; color: inherit; }
.stat-value {
    font-family: var(--sans);
    font-size: 2.4rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--text);
    display: block;
}
.stat-value .van { color: var(--text-dim); font-weight: 500; }
/* Af is amber, niet groen: groen leest als statuslampje in een ops-tool,
   amber is het merk. */
.stat-value.compleet { color: var(--amber); }
.stat-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.3rem;
    display: block;
}
a.stat:hover .stat-value { color: var(--amber); }

/* ── Werkregels: een stuk echte copy in plaats van alleen een label ───── */

.work-item {
    display: block;
    text-decoration: none;
    color: inherit;
    padding: 1rem 1.15rem;
    border: 1px solid var(--border);
    border-radius: 11px;
    margin-bottom: 0.65rem;
    transition: border-color 0.18s, background 0.18s;
}
.work-item:last-child { margin-bottom: 0; }
.work-item:hover { border-color: rgba(232,184,75,0.35); background: rgba(255,255,255,0.02); }

.work-head { display: flex; align-items: baseline; gap: 0.6rem; }
.work-name { font-weight: 600; font-size: 0.95rem; flex: 1; min-width: 0;
             white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* De copy zelf: het interessantste op de kaart, dus het krijgt de ruimte en
   de cursief die het merk voor accenten gebruikt. Een amber streep links
   maakt er een citaat van zonder er een tekstballon omheen te zetten. */
.work-quote {
    font-family: var(--sans);
    font-style: italic;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-muted);
    border-left: 2px solid rgba(232,184,75,0.35);
    padding-left: 0.85rem;
    margin: 0.55rem 0 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.work-meta {
    font-family: var(--mono);
    font-size: 0.65rem;
    color: var(--text-muted);
    letter-spacing: 0.06em;
    margin-top: 0.55rem;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.chip {
    display: inline-block;
    font-family: var(--mono);
    font-size: 0.65rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
    color: var(--text-muted);
    white-space: nowrap;
}
.chip.ok { border-color: rgba(52,211,153,0.5); color: var(--green); }
.chip.warn { border-color: rgba(232,184,75,0.5); color: var(--amber); }

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

.btn-amber {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: var(--amber);
    color: #1a1200;
    font-weight: 700;
    font-size: 0.9rem;
    border: none;
    border-radius: 8px;
    padding: 0.65rem 1.5rem;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
}
.btn-amber:hover { background: #f0c65a; }
.btn-amber:disabled, .btn-amber.disabled { opacity: 0.5; cursor: not-allowed; }

.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--surface-2);
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.5rem 1rem;
    font-size: 0.82rem;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
}
.btn-secondary:hover { color: var(--text); border-color: var(--border-hover); }

/* Gelijkwaardige keuze: twee of meer acties naast elkaar waarvan er geen de
   voorkeur heeft (Schrijf nieuwe copy / Review bestaande copy). Zelfde maat als
   .btn-amber, maar neutraal met een amber rand, zodat geen van beide wordt
   voorgetrokken (Barry, 2026-10-13). */
.btn-keuze {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: var(--surface-2);
    color: var(--text);
    font-weight: 700;
    font-size: 0.9rem;
    border: 1px solid var(--amber);
    border-radius: 8px;
    padding: 0.65rem 1.5rem;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s;
}
.btn-keuze:hover { background: var(--amber-dim); }

/* ── Formulier ────────────────────────────────────────────────────────── */

.field-label {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.65rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.4rem;
}

.field-select, .field-input {
    width: 100%;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.55rem 0.75rem;
    color: var(--text);
    font-size: 0.875rem;
    font-family: inherit;
}
.field-select:focus, .field-input:focus { outline: none; border-color: var(--amber); }

/* ── Lege staat ───────────────────────────────────────────────────────── */

.empty-state {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1.6;
    padding: 1.25rem 0.5rem;
}

/* ── Chat (overgenomen uit review.html, zodat fase 2 ze erft) ─────────── */

.chat-messages {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    max-height: 24rem;
    overflow-y: auto;
    padding: 0.25rem 0;
}
.msg-bubble {
    border-radius: 10px;
    padding: 0.625rem 0.875rem;
    font-size: 0.85rem;
    line-height: 1.6;
    max-width: 88%;
    white-space: pre-wrap;
}
.msg-bubble.ai { background: var(--surface-3); border: 1px solid var(--border); color: var(--text-muted); align-self: flex-start; }
.msg-bubble.user { background: rgba(232,184,75,0.12); border: 1px solid rgba(232,184,75,0.2); color: var(--text); align-self: flex-end; }
.msg-sender {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 0.25rem;
    color: var(--amber);
}
.chat-input-row { display: flex; gap: 0.5rem; margin-top: 0.75rem; }
.chat-field {
    flex: 1;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.55rem 0.75rem;
    color: var(--text);
    font-size: 0.875rem;
}
.chat-field:focus { outline: none; border-color: var(--amber); }
.chat-send-btn {
    background: var(--amber);
    color: #000;
    font-weight: 700;
    font-size: 0.85rem;
    border: none;
    border-radius: 8px;
    padding: 0.5rem 1.1rem;
    cursor: pointer;
}
.chat-send-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Toast en hulpklassen ─────────────────────────────────────────────── */

.toast {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--surface-3);
    border: 1px solid var(--border-hover);
    border-radius: 10px;
    padding: 0.6rem 1.1rem;
    font-size: 0.85rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s;
    z-index: 999;
}
.toast.show { opacity: 1; }

.hidden { display: none !important; }

/* Alleen voor schermlezers: onzichtbaar, maar niet display:none. */
.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Lange tweetalige inhoud wordt server-side dubbel gerenderd; shell.js zet
   data-lang op <html> en deze twee regels tonen de juiste helft. Zonder JS
   blijft het Nederlands staan, de standaardtaal van de site. */
html[data-lang="nl"] [data-lang-block="en"] { display: none; }
html[data-lang="en"] [data-lang-block="nl"] { display: none; }

/* ── Toetsenbord: zichtbare focus ───────────────────────────────────────
   De browserstandaard is op een bijna zwarte achtergrond nauwelijks te zien.
   :focus-visible dus, niet :focus, zodat een muisklik geen ring achterlaat. */
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--amber);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Sla de navigatie over: eerste tabstop op elke pagina. Zichtbaar zodra hij
   focus krijgt, daarvoor uit beeld (niet display:none, dan slaat de
   toetsenbordvolgorde hem over). */
.skip-link {
    position: absolute;
    left: 0.75rem;
    top: -3rem;
    z-index: 100;
    background: var(--amber);
    color: #1a1200;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 0.5rem 1rem;
    border-radius: 0 0 8px 8px;
    text-decoration: none;
    transition: top 0.15s;
}
.skip-link:focus { top: 0; }

/* ── Tapdoelen ─────────────────────────────────────────────────────────
   Op een aanraakscherm haalt een nav-link van ~33px de 44px-norm niet.
   pointer: coarse raakt telefoons en tablets, niet de muisgebruiker. */
@media (pointer: coarse) {
    .btn-ghost, .btn-lang, .btn-secondary, .chat-send-btn {
        min-height: 44px;
    }
    .row-link { min-height: 44px; }
}

/* ── Bewegingsvoorkeur ─────────────────────────────────────────────────
   Niet animation:none: elementen die met een animatie in beeld komen
   (forwards) zouden dan onzichtbaar blijven. Bijna-nul duur laat de
   eindstand staan en haalt de beweging weg. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

@media (max-width: 720px) {
    .main-content { padding: 1.5rem 1rem 4rem; }
    .section-title { font-size: 1.4rem; }
    .card-grid { grid-template-columns: 1fr; }
}