/* =============================================================================
   Narvy Cookie Consent (CNIL/RGPD compliant)
   - Banner: Customize (text button) + Reject all / Accept all. Reject all and
     Accept all are ONE component (.ts-cc-choice): same size, weight, colour.
     CNIL 2020 guidelines + recommendation: refusing must be as easy and as
     visible as accepting. Never style one of the two differently.
   - Customize panel: per-category toggle (Essential locked on, others OFF
     until the visitor turns them on: no pre-ticked purpose)
   - localStorage key: ts_cookie_consent_v1
   - Re-show after 13 months (CNIL guideline)
   Palette: DESIGN.md tokens (ink ramp dark, paper ramp light, resolved green).
   Dark is the default (base.html is statically dark); light applies on
   data-theme="light" pages and on pages without data-theme whose visitor
   prefers light (pricing_v2).
   ============================================================================= */

#ts-cc-banner,
#ts-cc-customize {
    --ts-cc-ground: #141a16;       /* ink-surface */
    --ts-cc-card: #182019;         /* ink-card */
    --ts-cc-hair: #29332c;         /* ink-hairline */
    --ts-cc-hair-strong: #3a463e;  /* ink-hairline-strong */
    --ts-cc-text: #f2f6f3;         /* ink-text */
    --ts-cc-text-dim: #b5c2bb;     /* ink-text-dim  10.1:1 on ground */
    --ts-cc-text-quiet: #98a69f;   /* ink-text-quiet 7.2:1 on ground */
    --ts-cc-link: #00d972;         /* resolved, 10:1 on ground */
    --ts-cc-accent: #00d972;       /* resolved (fill) */
    --ts-cc-accent-hover: #25e88b; /* resolved-hover */
    --ts-cc-accent-ink: #03170d;   /* resolved-ink, 9.9:1 on accent */
    --ts-cc-focus: #00d972;
    --ts-cc-track: #29332c;
    --ts-cc-track-border: #98a69f; /* toggle edge, 3:1+ on card */
    --ts-cc-knob: #b5c2bb;
    --ts-cc-shadow: 0 -10px 30px -12px rgba(0, 0, 0, 0.55);
    --ts-cc-scrim: rgba(0, 0, 0, 0.6);
    --ts-cc-font: "Schibsted Grotesk", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

:root[data-theme="light"] #ts-cc-banner,
:root[data-theme="light"] #ts-cc-customize {
    --ts-cc-ground: #ffffff;       /* paper-card */
    --ts-cc-card: #ffffff;
    --ts-cc-hair: #e8e6e1;         /* paper-hairline */
    --ts-cc-hair-strong: #d5d3ce;  /* paper-hairline-strong */
    --ts-cc-text: #0c0c0d;         /* paper-text */
    --ts-cc-text-dim: #5c5a55;     /* paper-text-dim 6.9:1 on white */
    --ts-cc-text-quiet: #6b6966;   /* paper-text-quiet 5.6:1 */
    --ts-cc-link: #007e40;         /* resolved-on-paper 5.2:1 */
    --ts-cc-focus: #007e40;
    --ts-cc-track: #f5f4f0;
    --ts-cc-track-border: #6b6966;
    --ts-cc-knob: #6b6966;
    --ts-cc-shadow: 0 -10px 30px -14px rgba(12, 12, 13, 0.18);
    --ts-cc-scrim: rgba(12, 12, 13, 0.45);
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme]) #ts-cc-banner,
    :root:not([data-theme]) #ts-cc-customize {
        --ts-cc-ground: #ffffff;
        --ts-cc-card: #ffffff;
        --ts-cc-hair: #e8e6e1;
        --ts-cc-hair-strong: #d5d3ce;
        --ts-cc-text: #0c0c0d;
        --ts-cc-text-dim: #5c5a55;
        --ts-cc-text-quiet: #6b6966;
        --ts-cc-link: #007e40;
        --ts-cc-focus: #007e40;
        --ts-cc-track: #f5f4f0;
        --ts-cc-track-border: #6b6966;
        --ts-cc-knob: #6b6966;
        --ts-cc-shadow: 0 -10px 30px -14px rgba(12, 12, 13, 0.18);
        --ts-cc-scrim: rgba(12, 12, 13, 0.45);
    }
}

#ts-cc-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1100; /* above legacy cookie-notice (1000) */
    background: var(--ts-cc-ground);
    color: var(--ts-cc-text-dim);
    border-top: 1px solid var(--ts-cc-hair-strong);
    box-shadow: var(--ts-cc-shadow);
    display: none;
    padding: 0.75rem 1.5rem;
    font-family: var(--ts-cc-font);
    font-size: 0.875rem;
    line-height: 1.45;
    text-align: left;
}

#ts-cc-banner.ts-cc-show { display: block; }

.ts-cc-row {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
}

.ts-cc-text {
    flex: 1 1 420px;
    min-width: 0;
    max-width: 75ch;
}

.ts-cc-text strong { color: var(--ts-cc-text); }

#ts-cc-banner a,
#ts-cc-customize a {
    color: var(--ts-cc-link);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ts-cc-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    flex-shrink: 0;
    margin-left: auto;
}

/* Base button reset, shared by the two choice buttons and the text button. */
.ts-cc-btn,
.ts-cc-link {
    font-family: inherit;
    font-size: 0.875rem;
    line-height: 1.2;
    cursor: pointer;
    border-radius: 8px;
    -webkit-tap-highlight-color: transparent;
}

/* Reject all and Accept all: one component, identical in every state. */
.ts-cc-choice {
    background: var(--ts-cc-accent);
    color: var(--ts-cc-accent-ink);
    border: 1px solid var(--ts-cc-accent);
    font-weight: 700;
    padding: 0.6rem 1.1rem;
    min-width: 9.5rem;
    min-height: 40px;
    transition: background-color 140ms cubic-bezier(.16, 1, .3, 1), border-color 140ms cubic-bezier(.16, 1, .3, 1);
}

.ts-cc-choice:hover {
    background: var(--ts-cc-accent-hover);
    border-color: var(--ts-cc-accent-hover);
}

.ts-cc-choice:active { background: var(--ts-cc-accent); }

/* Customize / Cancel: secondary, a text button (not a third box). */
.ts-cc-link {
    background: transparent;
    border: 1px solid transparent;
    color: var(--ts-cc-text);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--ts-cc-text-quiet);
    text-underline-offset: 3px;
    padding: 0.6rem 0.75rem;
    min-height: 40px;
}

.ts-cc-link:hover { text-decoration-color: currentColor; }

.ts-cc-btn:focus-visible,
.ts-cc-link:focus-visible,
#ts-cc-banner a:focus-visible,
#ts-cc-customize a:focus-visible {
    outline: 2px solid var(--ts-cc-focus);
    outline-offset: 2px;
}

/* ---- Customize panel (modal) ---- */
#ts-cc-customize {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: var(--ts-cc-scrim);
    align-items: center;
    justify-content: center;
    padding: 1rem;
    font-family: var(--ts-cc-font);
}

#ts-cc-customize.ts-cc-show { display: flex; }

.ts-cc-panel {
    background: var(--ts-cc-ground);
    color: var(--ts-cc-text);
    border: 1px solid var(--ts-cc-hair-strong);
    border-radius: 12px;
    max-width: 560px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 1.75rem;
    text-align: left;
    box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.25);
}

.ts-cc-panel h2 {
    font-family: inherit;
    font-size: 1.15rem; /* DESIGN.md title step */
    font-weight: 700;
    line-height: 1.3;
    color: var(--ts-cc-text);
    margin: 0 0 0.4rem 0;
}

.ts-cc-panel-intro {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--ts-cc-text-dim);
    margin: 0 0 1.25rem 0;
}

/* Hairline rows rather than boxed cards (DESIGN.md: hairline separation). */
.ts-cc-cat {
    border-top: 1px solid var(--ts-cc-hair);
    padding: 0.9rem 0;
}

.ts-cc-cat:last-of-type { border-bottom: 1px solid var(--ts-cc-hair); }

.ts-cc-cat-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.25rem;
}

.ts-cc-cat-name {
    font-weight: 600;
    font-size: 1rem;
    color: var(--ts-cc-text);
}

.ts-cc-cat-desc {
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--ts-cc-text-dim);
    margin-top: 0.3rem;
}

.ts-cc-cat-locked {
    color: var(--ts-cc-link);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Toggle switch. Off state has a visible edge (3:1+) so "off" is legible,
   not just "absent". */
.ts-cc-toggle {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.ts-cc-toggle input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
    z-index: 1;
}

.ts-cc-toggle-slider {
    position: absolute;
    inset: 0;
    background: var(--ts-cc-track);
    border: 1px solid var(--ts-cc-track-border);
    border-radius: 9999px;
    transition: background-color 140ms, border-color 140ms;
}

.ts-cc-toggle-slider::before {
    content: "";
    position: absolute;
    height: 16px;
    width: 16px;
    left: 3px;
    top: 3px;
    background: var(--ts-cc-knob);
    border-radius: 50%;
    transition: transform 160ms cubic-bezier(.16, 1, .3, 1), background-color 140ms;
}

.ts-cc-toggle input:checked + .ts-cc-toggle-slider {
    background: var(--ts-cc-accent);
    border-color: var(--ts-cc-accent);
}
.ts-cc-toggle input:checked + .ts-cc-toggle-slider::before {
    transform: translateX(20px);
    background: var(--ts-cc-accent-ink);
}
.ts-cc-toggle input:focus-visible + .ts-cc-toggle-slider {
    outline: 2px solid var(--ts-cc-focus);
    outline-offset: 2px;
}
.ts-cc-toggle input:disabled + .ts-cc-toggle-slider { opacity: 0.5; cursor: not-allowed; }

.ts-cc-panel-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-top: 1.25rem;
    flex-wrap: wrap;
}

.ts-cc-panel-actions .ts-cc-link { margin-right: auto; }

@media (prefers-reduced-motion: reduce) {
    .ts-cc-choice,
    .ts-cc-toggle-slider,
    .ts-cc-toggle-slider::before { transition: none; }
}

/* Long text on wide screens, short text on phones (same purposes; the full
   text and per-category detail stay one tap away). */
.ts-cc-text-short { display: none; }

@media (max-width: 640px) {
    /* 2026-10-08: at 375px the banner took 255-274px (over a third of the
       screen) and its three stacked buttons pushed it higher still. Compact:
       short text, one row (Customize text button + the two equal choice
       buttons), 44px touch targets, safe-area aware, never taller than 45% of
       the viewport. */
    #ts-cc-banner {
        padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom, 0px));
        font-size: 0.8125rem;
        line-height: 1.45;
        max-height: 45vh;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .ts-cc-row { gap: 0.6rem; }
    .ts-cc-text { flex-basis: 100%; }
    .ts-cc-text-full { display: none; }
    .ts-cc-text-short { display: inline; }
    .ts-cc-actions { width: 100%; flex-wrap: nowrap; gap: 0.4rem; margin-left: 0; }
    .ts-cc-actions .ts-cc-btn,
    .ts-cc-actions .ts-cc-link {
        min-height: 44px;
        font-size: 0.8125rem;
        white-space: nowrap;
    }
    /* The two choices share the remaining width equally (flex-basis 0), so
       Reject all and Accept all are the same width in every language. */
    .ts-cc-actions .ts-cc-choice {
        flex: 1 1 0;
        min-width: 0;
        padding: 0.45rem 0.4rem;
    }
    .ts-cc-actions .ts-cc-link {
        flex: 0 0 auto;
        padding: 0.45rem 0.5rem 0.45rem 0.1rem;
    }
    .ts-cc-panel { padding: 1.25rem; }
    .ts-cc-panel-actions .ts-cc-choice { flex: 1 1 0; min-width: 0; min-height: 44px; }
    .ts-cc-panel-actions .ts-cc-link { flex-basis: 100%; min-height: 44px; margin-right: 0; order: 2; }
}
@media (max-width: 374px) {
    /* 320-374px: labels may wrap rather than overflow the button. */
    .ts-cc-actions .ts-cc-btn,
    .ts-cc-actions .ts-cc-link { white-space: normal; font-size: 0.75rem; }
    .ts-cc-actions .ts-cc-choice { padding: 0.4rem 0.25rem; }
}

/* Reserved space matches the banner's real rendered height (measured and
   kept in sync by cookie_consent.js via --ts-cc-h), not a hardcoded guess -
   avoids under-reserving when the text wraps more than expected (long
   locale strings, narrow viewports) and over-reserving otherwise.
   scroll-padding-bottom additionally protects any programmatic/keyboard
   scrollIntoView (anchor links, Tab focus, our sidebar auto-scroll) from
   landing a target behind the banner. Manual free-scroll to a position where
   real content happens to sit in the banner's own band can still visually
   overlap it (inherent to any position:fixed bottom bar) - the banner is
   kept as short as reasonably possible (see #ts-cc-banner padding above) to
   minimize that window. */
html { scroll-padding-bottom: var(--ts-cc-h, 0px); }
body.ts-cc-banner-visible { padding-bottom: var(--ts-cc-h, 96px); }