/*
 * Custom CSS that is NOT expressible as Tailwind utilities.
 * The bulk of styling lives in Tailwind — see Styles/app.css (compiled to css/app.css).
 * Keep this file small; prefer utility classes in markup.
 */

/*
 * Interaction feedback — global BY CONSTRUCTION (owner 2026-07-17): every
 * clickable shows the hand cursor and gives a subtle press. Tailwind v4's
 * reset leaves <button> on the native arrow, which made buttons and links
 * behave differently (login vs nav). One rule here instead of per-view
 * utility classes — per-view cursor-pointer is fenced as drift
 * (UiGrammarFenceTests).
 */
button:not(:disabled),
summary,
select,
[role="button"],
input[type="checkbox"]:not(:disabled),
input[type="radio"]:not(:disabled),
input[type="file"]:not(:disabled) {
    cursor: pointer;
}

@media (prefers-reduced-motion: no-preference) {
    /* a[aria-label]: icon-only links (edit pencils, payment cells) — every
       icon link carries an aria-label by construction, so this catches the
       clickable icons that are neither <button> nor pill-shaped
       (dogfood round 1: icons respond to the press). */
    button:not(:disabled),
    summary,
    [role="button"],
    a[class~="rounded-full"],
    a[class~="rounded-3xl"],
    a[aria-label] {
        transition: transform 80ms ease;
    }

    button:not(:disabled):active,
    summary:active,
    [role="button"]:active,
    a[class~="rounded-full"]:active,
    a[class~="rounded-3xl"]:active,
    a[aria-label]:active {
        transform: scale(0.98);
    }
}

/*
 * iOS-zoomvergrendeling — global BY CONSTRUCTION (owner 2026-07-19): Safari
 * zoomt de pagina in wanneer een veld met font-size < 16px focus krijgt, en
 * zoomt nooit terug (rechterkant valt weg tot de gebruiker pincht). Op
 * touch-apparaten krijgt elk formulier­veld daarom minstens 16px. Unlayered
 * CSS wint van Tailwinds @layer utilities, dus dit verslaat text-sm overal —
 * ook in velden die nog geschreven moeten worden. Desktop behoudt het
 * 14px-ontwerp. Gefenced in UiGrammarFenceTests.
 */
@media (pointer: coarse) {
    input,
    select,
    textarea {
        font-size: 1rem;
    }
}

/*
 * Chart tooltip (Krijt rebuild 2026-07-19): the element is CREATED by
 * charts.js, so Tailwind's .cshtml scan never sees its classes — plain CSS
 * by necessity. Nacht-styled, follows the pointer per [data-tip] target.
 */
.chart-tip {
    position: absolute;
    z-index: 10;
    transform: translate(-50%, -115%);
    pointer-events: none;
    white-space: nowrap;
    background: #18181b;
    color: #fafafa;
    border-radius: 10px;
    padding: 6px 11px;
    font-size: 12.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    opacity: 0;
    transition: opacity 120ms ease;
}

.chart-tip-visible {
    opacity: 1;
}

/*
 * Keyboard focus grammar (accessibility sweep 2026-07-26). The app had exactly
 * one focus-visible rule in 104 views: inputs carried `focus:` rings (which
 * also fire on mouse click) and the pill buttons/links had nothing at all, so
 * a keyboard user could not see where they were. Global and once, beside the
 * other cross-cutting rules, rather than a utility repeated per element.
 *
 * :focus-visible only — never plain :focus — so pointer users keep a clean UI.
 */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid #7f3e21; /* brand-700: legible on white AND on bg-hero */
    outline-offset: 2px;
    border-radius: 6px;
}

/* On the Nacht panels a dark outline disappears — flip it there. */
.bg-hero a:focus-visible,
.bg-hero button:focus-visible {
    outline-color: #fafafa;
}

/* Skip-link target (a11y sweep 2026-07-26): the header is sticky, so a jump
   to #inhoud parks the top of <main> behind it and the visitor who most needs
   the shortcut arrives mid-sentence. */
#inhoud {
    scroll-margin-top: 5rem;
}

/* No-JS error hints on the landing (specs/90): the waitlist endpoint
   redirects to one of these fragments and pure CSS :target reveals it.
   TWO of them, because two very different failures used to share one
   message: a rejected form is the signup's to fix, a failed send is not.
   scroll-margin-top clears the sticky header, which the jump otherwise
   parks the message behind. */
#wachtlijst-fout,
#wachtlijst-mislukt {
    display: none;
    scroll-margin-top: 6rem;
}

#wachtlijst-fout:target,
#wachtlijst-mislukt:target {
    display: block;
}

/* Anti-harvester: identity strings are stored REVERSED in the DOM (plus
   entity-encoded) and flipped back visually. A screen reader reads the DOM,
   not the flipped rendering, so every .unscrape is aria-hidden and carries
   an sr-only twin spelling the address out in words. This stops a regex
   harvester looking for user@host, not a reader that understands
   "apenstaartje" — accessibility beat harvest-resistance here.
   Pinned by PublicPagesTests. */
.unscrape {
    unicode-bidi: bidi-override;
    direction: rtl;
}