/* Plain Cookie Consent Pro frontend tokens. */
:root {
    --plain-cookie-consent-pro-ready: 1;
    --pcc-pro-accent: #0f6f79;
    --pcc-pro-on-accent: #ffffff;
    --pcc-pro-radius: 8px;
    --pcc-pro-surface: #f7faf8;
    --pcc-pro-surface-muted: #eef4f1;
    --pcc-pro-text: #16201d;
    --pcc-pro-muted-text: #41514c;
    --pcc-pro-border: rgba(22, 32, 29, 0.49);
    --pcc-pro-overlay: rgba(16, 24, 21, 0.46);
    --pcc-pro-shadow: 0 20px 54px rgba(12, 20, 18, 0.18);
    --pcc-pro-transition: 180ms ease;
}

[data-pcc-pro-skin="enterprise_default"] {
    --pcc-pro-accent: #0f6f79;
    --pcc-pro-on-accent: #ffffff;
    --pcc-pro-radius: 8px;
    --pcc-pro-surface: #f7faf8;
    --pcc-pro-surface-muted: #eef4f1;
    --pcc-pro-text: #16201d;
    --pcc-pro-muted-text: #41514c;
    --pcc-pro-border: rgba(22, 32, 29, 0.49);
    --pcc-pro-overlay: rgba(16, 24, 21, 0.46);
}

[data-pcc-pro-skin="enterprise_compact"] {
    --pcc-pro-accent: #6f4d00;
    --pcc-pro-on-accent: #ffffff;
    --pcc-pro-radius: 6px;
    --pcc-pro-surface: #fbfbf7;
    --pcc-pro-surface-muted: #f0f2ea;
    --pcc-pro-text: #1d2117;
    --pcc-pro-muted-text: #4d5442;
    --pcc-pro-border: rgba(29, 33, 23, 0.49);
    --pcc-pro-overlay: rgba(18, 21, 15, 0.42);
}

[data-pcc-pro-skin="enterprise_high_contrast"] {
    --pcc-pro-accent: #ffd166;
    --pcc-pro-on-accent: #050505;
    --pcc-pro-radius: 10px;
    --pcc-pro-surface: #050505;
    --pcc-pro-surface-muted: #171717;
    --pcc-pro-text: #ffffff;
    --pcc-pro-muted-text: #eeeeee;
    --pcc-pro-border: #ffffff;
    --pcc-pro-overlay: rgba(0, 0, 0, 0.72);
}

[data-pcc-pro-skin="enterprise_minimal_mono"] {
    --pcc-pro-accent: #1a1a1a;
    --pcc-pro-on-accent: #ffffff;
    --pcc-pro-radius: 4px;
    --pcc-pro-surface: #ffffff;
    --pcc-pro-surface-muted: #f2f2f2;
    --pcc-pro-text: #111111;
    --pcc-pro-muted-text: #3d3d3d;
    --pcc-pro-border: rgba(17, 17, 17, 0.46);
    --pcc-pro-overlay: rgba(10, 10, 10, 0.4);
}

[data-pcc-pro-skin="enterprise_dark_first"] {
    --pcc-pro-accent: #7fd1c0;
    --pcc-pro-on-accent: #0c1f1a;
    --pcc-pro-radius: 12px;
    --pcc-pro-surface: #101614;
    --pcc-pro-surface-muted: #1a231e;
    --pcc-pro-text: #f2f7f5;
    --pcc-pro-muted-text: #c9d6d1;
    --pcc-pro-border: rgba(242, 247, 245, 0.36);
    --pcc-pro-overlay: rgba(4, 8, 6, 0.66);
}

[data-pcc-pro-background-mode="forced_light"] {
    --pcc-pro-surface: #ffffff;
    --pcc-pro-surface-muted: #f3f6f4;
    --pcc-pro-text: #141918;
    --pcc-pro-muted-text: #3f4a47;
    --pcc-pro-border: rgba(20, 25, 24, 0.48);
}

[data-pcc-pro-background-mode="forced_dark"] {
    --pcc-pro-surface: #101412;
    --pcc-pro-surface-muted: #1d2521;
    --pcc-pro-text: #f7fbf8;
    --pcc-pro-muted-text: #d6e0db;
    --pcc-pro-border: rgba(247, 251, 248, 0.36);
    --pcc-pro-overlay: rgba(0, 0, 0, 0.68);
}

[data-pcc-pro-background-mode="off"] {
    --pcc-pro-overlay: transparent;
}

@media (prefers-color-scheme: dark) {
    [data-pcc-pro-background-mode="auto"] {
        --pcc-pro-surface: #111614;
        --pcc-pro-surface-muted: #1f2925;
        --pcc-pro-text: #f5faf7;
        --pcc-pro-muted-text: #d2ddd8;
        --pcc-pro-border: rgba(245, 250, 247, 0.36);
        --pcc-pro-overlay: rgba(0, 0, 0, 0.64);
    }
}

#cc-main {
    --cc-font-family: Inter, "Helvetica Neue", Arial, sans-serif;
    --cc-bg: var(--pcc-pro-surface);
    --cc-primary-color: var(--pcc-pro-text);
    --cc-secondary-color: var(--pcc-pro-muted-text);
    --cc-modal-border-radius: var(--pcc-pro-radius);
    --cc-btn-border-radius: max(4px, calc(var(--pcc-pro-radius) - 2px));
    --cc-modal-border-color: var(--pcc-pro-border);
    --cc-separator-border-color: var(--pcc-pro-border);
    --cc-footer-border-color: var(--pcc-pro-border);
    --cc-overlay-bg: var(--pcc-pro-overlay);
    --cc-btn-primary-bg: var(--pcc-pro-accent);
    --cc-btn-primary-border-color: var(--pcc-pro-accent);
    --cc-btn-primary-color: var(--pcc-pro-on-accent);
    --cc-btn-primary-hover-bg: var(--pcc-pro-accent);
    --cc-btn-primary-hover-border-color: var(--pcc-pro-accent);
    --cc-btn-primary-hover-color: var(--pcc-pro-on-accent);
    --cc-btn-secondary-bg: transparent;
    --cc-btn-secondary-border-color: var(--pcc-pro-border);
    --cc-btn-secondary-color: var(--pcc-pro-text);
    --cc-btn-secondary-hover-bg: var(--pcc-pro-surface-muted);
    --cc-btn-secondary-hover-border-color: var(--pcc-pro-accent);
    --cc-btn-secondary-hover-color: var(--pcc-pro-text);
    --cc-cookie-category-block-bg: var(--pcc-pro-surface-muted);
    --cc-cookie-category-block-border: var(--pcc-pro-border);
    --cc-cookie-category-block-hover-bg: var(--pcc-pro-surface-muted);
    --cc-cookie-category-block-hover-border: var(--pcc-pro-accent);
    --cc-cookie-category-expanded-block-bg: var(--pcc-pro-surface-muted);
    --cc-cookie-category-expanded-block-hover-bg: var(--pcc-pro-surface-muted);
    --cc-toggle-on-bg: var(--pcc-pro-accent);
    --cc-toggle-on-knob-bg: var(--pcc-pro-on-accent);
    --cc-toggle-off-bg: var(--pcc-pro-border);
    --cc-toggle-readonly-bg: var(--pcc-pro-muted-text);
}

#cc-main .cm,
#cc-main .pm {
    border: 1px solid var(--pcc-pro-border);
    box-shadow: var(--pcc-pro-shadow);
    transition:
        background-color var(--pcc-pro-transition),
        border-color var(--pcc-pro-transition),
        box-shadow var(--pcc-pro-transition),
        transform var(--pcc-pro-transition);
}

#cc-main .cm__btn,
#cc-main .pm__btn {
    min-height: 44px;
    transition:
        background-color var(--pcc-pro-transition),
        border-color var(--pcc-pro-transition),
        color var(--pcc-pro-transition);
}

#cc-main .pcc-pro-manage-link {
    background: transparent !important;
    border-color: transparent !important;
    color: var(--pcc-pro-accent) !important;
    min-height: 44px;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

/* Deliberately scoped under #cc-main (the vendored library's own root-id
   convention): the id specificity is theme-armor -- a live smoke test showed
   a theme's class-only rules out-specifying bare .pcc-pro-category-icon
   (icons rendered ~300px in text color), a cascade fight fake-DOM unit tests
   can never catch. */
#cc-main .pcc-pro-category-icon {
    color: var(--pcc-pro-accent);
    display: inline-block;
    height: 1em;
    margin-inline-end: 0.4em;
    vertical-align: -0.125em;
    width: 1em;
}

#cc-main .pcc-pro-category-icon svg {
    display: block;
    height: 100%;
    width: 100%;
}

.pcc-pro-granular-first {
    border: 1px solid var(--pcc-pro-border);
    border-radius: var(--pcc-pro-radius);
    display: grid;
    gap: 0.55rem;
    margin: 0 0 1rem;
    padding: 0.85rem;
}

.pcc-pro-granular-first label {
    align-items: center;
    color: var(--pcc-pro-text);
    display: flex;
    gap: 0.55rem;
    min-height: 44px;
}

.pcc-pro-granular-first__save {
    background: var(--pcc-pro-accent);
    border: 1px solid var(--pcc-pro-accent);
    border-radius: max(4px, calc(var(--pcc-pro-radius) - 2px));
    color: var(--pcc-pro-on-accent);
    min-height: 44px;
    padding: 0.55rem 0.9rem;
}

[data-pcc-pro-motion="subtle_fade"] {
    --pcc-pro-transition: 180ms ease;
}

[data-pcc-pro-motion="slide_by_position"] {
    --pcc-pro-transition: 220ms cubic-bezier(0.2, 0, 0.2, 1);
}

[data-pcc-pro-motion="none"] {
    --pcc-pro-transition: 0ms linear;
}

[data-pcc-pro-density="compact"] #cc-main .cm,
#cc-main[data-pcc-pro-density="compact"] .cm {
    max-width: 44rem;
}

[data-pcc-pro-density="compact"] #cc-main .cm__body,
[data-pcc-pro-density="compact"] #cc-main .pm__body,
#cc-main[data-pcc-pro-density="compact"] .cm__body,
#cc-main[data-pcc-pro-density="compact"] .pm__body {
    padding: 1rem;
}

[data-pcc-pro-density="compact"] #cc-main .cm__btn,
[data-pcc-pro-density="compact"] #cc-main .pm__btn,
#cc-main[data-pcc-pro-density="compact"] .cm__btn,
#cc-main[data-pcc-pro-density="compact"] .pm__btn {
    min-height: 44px;
    padding: 0.55rem 0.9rem;
}

.pcc-pro-returning-icon {
    align-items: center;
    background: var(--pcc-pro-accent);
    border: 1px solid var(--pcc-pro-accent);
    border-radius: 999px;
    bottom: 18px;
    color: var(--pcc-pro-on-accent);
    cursor: pointer;
    display: inline-flex;
    height: 44px;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
    position: fixed;
    right: 18px;
    text-indent: -9999px;
    width: 44px;
    z-index: 2147483000;
}

.pcc-pro-returning-icon::before {
    content: "";
    border: 2px solid currentColor;
    border-radius: 999px;
    height: 18px;
    width: 18px;
}

.pcc-pro-returning-icon--bottom-left {
    left: 18px;
    right: auto;
}

.pcc-pro-returning-icon--top-right {
    bottom: auto;
    top: 18px;
}

.pcc-pro-returning-icon--top-left {
    bottom: auto;
    left: 18px;
    right: auto;
    top: 18px;
}

[data-pcc-pro-motion="none"] #cc-main *,
[data-pcc-pro-motion="none"] #cc-main *::before,
[data-pcc-pro-motion="none"] #cc-main *::after,
#cc-main[data-pcc-pro-motion="none"] *,
#cc-main[data-pcc-pro-motion="none"] *::before,
#cc-main[data-pcc-pro-motion="none"] *::after {
    animation: none !important;
    transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
    #cc-main *,
    #cc-main *::before,
    #cc-main *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* D1 forced-choice modality (spec Ā§5): scroll-lock keyed off the
   data-pcc-pro-modality attribute plain-cookie-consent-pro-runtime.js's
   applyVisualAttributes() sets on the documentElement -- ONLY while the
   visitor holds no valid consent. Mirrors the vendored library's own
   html.disable--interaction.show--consent lock (cookieconsent.css) but
   engages earlier: applyVisualAttributes() runs BEFORE CookieConsent.run(),
   while the vendor's own class is only added once run()'s modal-show path
   actually fires. CSS-only by construction, so it reverts automatically the
   instant the attribute clears -- on the next page load for a now-consented
   returning visitor (applyVisualAttributes), or same-session on the
   visitor's first explicit Accept/Reject click (releaseForcedChoiceGuard()
   in the onConsent/onFirstConsent callbacks). */
[data-pcc-pro-modality="forced_choice"],
[data-pcc-pro-modality="forced_choice"] body {
    height: auto !important;
    overflow: hidden !important;
}

/* Ā§5.5 a11y: under prefers-reduced-motion the vendored library already
   collapses --cc-modal-transition-duration to 0s (its own accessibility
   default, cookieconsent.css), and the blanket #cc-main * rule above zeroes
   every remaining transition/animation on top of that. For the
   forced-choice CONSENT modal specifically, a fully instant full-page block
   appearing with zero transition is MORE disorienting under reduced motion,
   not less, so this scoped override restores a minimal accessibility floor:
   an opacity-only fade capped at 100ms -- well under the 180ms/220ms
   --pcc-pro-transition motion tokens -- deliberately NOT tied to
   --pcc-pro-transition/--cc-modal-transition-duration, since reduced motion
   must stay short regardless of the site's chosen motion token. Selector
   specificity ([data-pcc-pro-modality]+#cc-main+2 classes) intentionally
   outranks both the blanket #cc-main * rule and [data-pcc-pro-motion="none"]
   #cc-main * above -- this is the one blocking pattern where SOME visual
   acknowledgement of the block is treated as accessibility-positive even
   when the site owner (or the OS) asks for the least possible motion.
   Every other #cc-main transition (buttons, hover states, the preferences
   modal) is unaffected and stays fully instant per the blanket rule. */
@media (prefers-reduced-motion: reduce) {
    [data-pcc-pro-modality="forced_choice"] #cc-main .cc--anim .cm,
    [data-pcc-pro-modality="forced_choice"] #cc-main .cc--anim.cm-wrapper::before {
        transition: opacity 100ms linear !important;
    }
}

/* Phase 5 Task 3 -- A4 bounded visual-emphasis (spec Ā§4): [data-pcc-pro-
   emphasis="on"] and [data-pcc-pro-emphasis-reject] are set on the
   documentElement by plain-cookie-consent-pro-runtime.js's
   applyVisualAttributes() ONLY when emphasis.enabled && the configured
   modality is NOT forced_choice (A4⊥D1, spec Ā§5.3 -- the identical
   modality-only gate as Options::emphasis()'s sanitizer and
   buildCookieConsentConfig's equalWeightButtons, so this CSS, the stored
   config, and the native vendored guiOptions toggle can never disagree).
   [data-role="all"]/[data-role="necessary"] are the vendored library's own
   STABLE markers for the Accept-All / Reject-All controls (cookieconsent.js
   sets them on both .cm and .pm) -- scoped here to .cm ONLY, deliberately
   not .pm, matching findForcedChoiceRejectControl()'s identical .cm-only
   scoping in the runtime: emphasis is an SD9 "first layer" concept (the
   ratified plan's "Order/repetition" row -- exactly one Accept + one Reject
   on the FIRST layer), and the preferences modal's own Accept/Reject stay
   equal-weight.

   Colour references are the EXACT same skin tokens Task 1's
   Options::emphasis_contrast_ok() validated against at save time (see its
   docblock's "Schema v6 gives Reject no colour knob of its own" section):
   filled Reject -> --pcc-pro-text (the skin's own ink colour, opaque);
   outlined Reject -> --pcc-pro-border. This keeps the shipped rendering in
   agreement with whatever the sanitizer's config-derivable gate already
   validated -- Task 4's rendered-box validator (live preview frame) is what
   confirms this holds for the REAL alpha-composited colours across every
   skin/state/breakpoint; this block is only the paint layer.

   a11y floor (CRITICAL, never violated by this block):
   - Reject's min-height/min-width (44px floor, the shared
     `#cc-main .cm__btn, #cc-main .pm__btn` rule above) is UNTOUCHED --
     neither rule below sets height/width/min-height/min-width/display/
     visibility/opacity on Reject, so it can never sub-floor or hide.
   - :focus-visible is the vendored library's own default outline
     (`outline: revert` in cookieconsent.css's reset layer) -- this block
     never sets `outline` on either control, so focus visibility is
     completely unaffected.
   - Accept gets exactly ONE visual difference: a paint-only `transform:
     scale()` bounded to the sanitizer-clamped ratio (Options::
     emphasis_accent_scale(), [100, 111] -> [1.00, 1.11]) plus its fill
     colour. No box-shadow/glow/animation/icon is added to Accept anywhere
     in this block, by construction (nothing else is declared) -- the SD9
     "Shape/effects" row's ban on Accept-only decoration holds structurally,
     not by omission that could later drift.
   - `transform` never changes Accept's LAYOUT box (only its paint box), so
     it cannot itself push Reject off-screen or shrink the flex gap between
     them; Task 4's rendered-box validator is the authority that confirms
     the REAL painted geometry (gap, visibility) still clears the SD9
     "Grouping/spacing" floor for whatever accent_scale was configured.
   - `:hover` variants repeat the same fill/border/colour (no NEW colours,
     no NEW effects) purely so the bounded emphasis doesn't flicker back to
     the vendored library's own default hover tokens mid-interaction --
     still governed by the identical a11y floor above. */
[data-pcc-pro-emphasis="on"] #cc-main .cm [data-role="all"] {
    background: var(--pcc-pro-accept-fill, var(--pcc-pro-accent)) !important;
    border-color: var(--pcc-pro-accept-fill, var(--pcc-pro-accent)) !important;
    transform: scale(var(--pcc-pro-accent-scale, 1));
    transform-origin: center;
}

[data-pcc-pro-emphasis="on"] #cc-main .cm [data-role="all"]:hover {
    background: var(--pcc-pro-accept-fill, var(--pcc-pro-accent)) !important;
    border-color: var(--pcc-pro-accept-fill, var(--pcc-pro-accent)) !important;
}

[data-pcc-pro-emphasis="on"][data-pcc-pro-emphasis-reject="filled"] #cc-main .cm [data-role="necessary"] {
    background: var(--pcc-pro-text) !important;
    border-color: var(--pcc-pro-text) !important;
    color: var(--pcc-pro-surface) !important;
}

[data-pcc-pro-emphasis="on"][data-pcc-pro-emphasis-reject="filled"] #cc-main .cm [data-role="necessary"]:hover {
    background: var(--pcc-pro-text) !important;
    border-color: var(--pcc-pro-text) !important;
    color: var(--pcc-pro-surface) !important;
}

/* Outlined Reject: transparent fill, >=2 CSS px solid border (the vendored
   default is 1px -- SD9's "Filled vs outlined" row requires >=2px) at full
   opacity. Never combined with the filled block above -- the two attribute
   selectors are mutually exclusive values of the same
   data-pcc-pro-emphasis-reject attribute. */
[data-pcc-pro-emphasis="on"][data-pcc-pro-emphasis-reject="outlined"] #cc-main .cm [data-role="necessary"] {
    background: transparent !important;
    border: 2px solid var(--pcc-pro-border) !important;
    color: var(--pcc-pro-text) !important;
}

[data-pcc-pro-emphasis="on"][data-pcc-pro-emphasis-reject="outlined"] #cc-main .cm [data-role="necessary"]:hover {
    background: transparent !important;
    border-color: var(--pcc-pro-border) !important;
    color: var(--pcc-pro-text) !important;
}

/* Schema v7 phone lift (spec 2026-10-09 §7). The runtime's
   applyMobileOffset() sets the lift/none state attribute on <html>
   (keep that attribute name out of this comment: a test asserts it never
   appears outside the media block). This
   stylesheet's order relative to the free one is not guaranteed, so these
   selectors win by specificity (1,4,2) over free 0.7.7's
   html:has(.joinchat) lift (1,4,1); "none" restores the vendored library's
   own .cm--bottom value. */
@media (max-width: 480px) {
    html[data-pcc-pro-mobile-offset="lift"] body #cc-main .cm.cm--box.cm--bottom {
        bottom: var(--pcc-pro-mobile-offset, 84px);
    }

    html[data-pcc-pro-mobile-offset="none"] body #cc-main .cm.cm--box.cm--bottom {
        bottom: var(--cc-modal-margin);
    }
}