/**
 * Studio community kit · ext/communitypolls.css · Community Polls (com_communitypolls), contract §5.6
 *
 * Loaded by PageContext as `template.kinfolk.ext.communitypolls` on Polls views (app mode, Bootstrap
 * off), on articles with a {poll}/{polls} embed and wherever a Polls module renders.
 * Sections 1–5 are byte-identical in every template (kit-owned); section 6 is the design skin.
 *
 * What the extension brings (verified on the live install, Polls 7.x):
 * - one React app per view on `#communitypolls-site-app.cp-app` (+ `.cp-embed` embeds, and dropdown
 *   portals `body > div.cp-app`). Tailwind 3 with `important: '.cp-app'`: utilities are `.cp-app .x`
 *   (0,2,0), dark variants `.cp-app .dark\:x:where(.dark,.dark *)`; the roots carry `.light|.dark`
 *   and `data-color-scheme`, resolved from <html data-color-scheme> and kept in sync live;
 * - tokens are HSL channel triplets read as `hsl(var(--surface) / a)`; most surfaces and text use a
 *   fixed warm `neutral-*` palette instead (meta text `neutral-400` on white is 2.5:1);
 * - global `@layer components` leaks: `.form-check`, `.page-header`, `.container`, `.page-title` …;
 * - three PHP modules printing an inline <style> in <body> after this file.
 *
 * Colour values are derived from the template tokens at run time with relative colour syntax
 * (`hsl(from var(--ec-bg) h s l)` substituted into the app's own `hsl(var(--x) / a)` calls), so every
 * preset, scheme and custom accent follows without per-template literals. Browsers without relative
 * colour syntax keep the app's own palette (@supports guard). The colour maps apply only while the app
 * shows the same scheme as the page (`html[data-color-scheme=X] .cp-app[data-color-scheme=X]`), so an app forced to the
 * other scheme keeps its own, internally consistent palette.
 */

/* ==========================================================================
   1. Variable map
   ========================================================================== */

/* 1a · app tokens (HSL channel form, derived from the template tokens) */
@supports (color: hsl(from red h s l)) {
    :is(html[data-color-scheme="light"] .cp-app[data-color-scheme="light"], html[data-color-scheme="dark"] .cp-app[data-color-scheme="dark"]) {
        --surface: from var(--ec-bg) h s l;
        --surface-raised: from var(--ec-surface) h s l;
        --surface-sunken: from var(--ec-surface-2) h s l;
        --surface-inset: from var(--ec-surface-2) h s l;
        --ink: from var(--ec-fg) h s l;
        --ink-muted: from var(--ec-fg-2) h s l;
        --ink-faint: from var(--ec-fg-2) h s l;
        --line: from var(--ec-border) h s l;
        --line-strong: from var(--ts-control) h s l;
        --background: from var(--ec-bg) h s l;
        --foreground: from var(--ec-fg) h s l;
        --border: from var(--ec-border) h s l;
        --input: from var(--ts-control) h s l;
        --ring: from var(--ts-focus) h s l;
        --primary: from var(--ec-accent) h s l;
        --primary-foreground: from var(--ec-accent-fg) h s l;
    }
}

.cp-app.cp-app {
    font-family: var(--ec-font-body);
    font-feature-settings: normal; /* the app asks for Inter stylistic sets (cv02 … ss01) */
}

/* 1b · the fixed neutral palette → template tokens (light utility first, its dark twin mapped to the
   same token, so both schemes follow the page; dark-only classes come first so a light class on the
   same element wins). Hover, focus and group-hover twins sit one level higher. Status colours
   (emerald, amber, rose …) and the per-poll result palette stay the app's own. */
:is(html[data-color-scheme="light"] .cp-app[data-color-scheme="light"], html[data-color-scheme="dark"] .cp-app[data-color-scheme="dark"]) :is(.dark\:bg-neutral-950, .dark\:bg-neutral-900) {
    background-color: var(--ec-surface);
}

:is(html[data-color-scheme="light"] .cp-app[data-color-scheme="light"], html[data-color-scheme="dark"] .cp-app[data-color-scheme="dark"]) .dark\:bg-neutral-800 {
    background-color: var(--ec-surface-2);
}

:is(html[data-color-scheme="light"] .cp-app[data-color-scheme="light"], html[data-color-scheme="dark"] .cp-app[data-color-scheme="dark"]) .dark\:bg-neutral-100 {
    background-color: var(--ec-fg);
}

:is(html[data-color-scheme="light"] .cp-app[data-color-scheme="light"], html[data-color-scheme="dark"] .cp-app[data-color-scheme="dark"]) :is(.dark\:border-neutral-800, .dark\:border-neutral-700) {
    border-color: var(--ec-border);
}

:is(html[data-color-scheme="light"] .cp-app[data-color-scheme="light"], html[data-color-scheme="dark"] .cp-app[data-color-scheme="dark"]) .dark\:border-neutral-600 {
    border-color: var(--ts-control);
}

:is(html[data-color-scheme="light"] .cp-app[data-color-scheme="light"], html[data-color-scheme="dark"] .cp-app[data-color-scheme="dark"]) .dark\:border-neutral-100 {
    border-color: var(--ec-fg);
}

:is(html[data-color-scheme="light"] .cp-app[data-color-scheme="light"], html[data-color-scheme="dark"] .cp-app[data-color-scheme="dark"]) .dark\:divide-neutral-800 > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--ec-border);
}

:is(html[data-color-scheme="light"] .cp-app[data-color-scheme="light"], html[data-color-scheme="dark"] .cp-app[data-color-scheme="dark"]) .dark\:ring-neutral-100 {
    --tw-ring-color: var(--ec-fg);
}

:is(html[data-color-scheme="light"] .cp-app[data-color-scheme="light"], html[data-color-scheme="dark"] .cp-app[data-color-scheme="dark"]) :is(.dark\:text-neutral-100, .dark\:text-neutral-200) {
    color: var(--ec-fg);
}

:is(html[data-color-scheme="light"] .cp-app[data-color-scheme="light"], html[data-color-scheme="dark"] .cp-app[data-color-scheme="dark"]) :is(.dark\:text-neutral-300, .dark\:text-neutral-400, .dark\:text-neutral-500) {
    color: var(--ec-fg-2);
}

:is(html[data-color-scheme="light"] .cp-app[data-color-scheme="light"], html[data-color-scheme="dark"] .cp-app[data-color-scheme="dark"]) .dark\:text-neutral-900 {
    color: var(--ec-bg);
}

:is(html[data-color-scheme="light"] .cp-app[data-color-scheme="light"], html[data-color-scheme="dark"] .cp-app[data-color-scheme="dark"]) .bg-white:not(.absolute) {
    background-color: var(--ec-surface); /* cards, fields, secondary buttons (not the switch knob) */
}

:is(html[data-color-scheme="light"] .cp-app[data-color-scheme="light"], html[data-color-scheme="dark"] .cp-app[data-color-scheme="dark"]) :is(.bg-neutral-50, .bg-neutral-100) {
    background-color: var(--ec-surface-2);
}

:is(html[data-color-scheme="light"] .cp-app[data-color-scheme="light"], html[data-color-scheme="dark"] .cp-app[data-color-scheme="dark"]) .bg-neutral-900 {
    background-color: var(--ec-fg); /* inverse: current nav pill, brand mark, primary action */
}

:is(html[data-color-scheme="light"] .cp-app[data-color-scheme="light"], html[data-color-scheme="dark"] .cp-app[data-color-scheme="dark"]) :is(.border-neutral-100, .border-neutral-200) {
    border-color: var(--ec-border);
}

:is(html[data-color-scheme="light"] .cp-app[data-color-scheme="light"], html[data-color-scheme="dark"] .cp-app[data-color-scheme="dark"]) .border-neutral-300 {
    border-color: var(--ts-control); /* field borders: >= 3:1 */
}

:is(html[data-color-scheme="light"] .cp-app[data-color-scheme="light"], html[data-color-scheme="dark"] .cp-app[data-color-scheme="dark"]) .border-neutral-900 {
    border-color: var(--ec-fg);
}

:is(html[data-color-scheme="light"] .cp-app[data-color-scheme="light"], html[data-color-scheme="dark"] .cp-app[data-color-scheme="dark"]) .divide-neutral-200 > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--ec-border);
}

:is(html[data-color-scheme="light"] .cp-app[data-color-scheme="light"], html[data-color-scheme="dark"] .cp-app[data-color-scheme="dark"]) .ring-neutral-900 {
    --tw-ring-color: var(--ec-fg);
}

:is(html[data-color-scheme="light"] .cp-app[data-color-scheme="light"], html[data-color-scheme="dark"] .cp-app[data-color-scheme="dark"]) :is(.text-neutral-900, .text-neutral-700) {
    color: var(--ec-fg);
}

:is(html[data-color-scheme="light"] .cp-app[data-color-scheme="light"], html[data-color-scheme="dark"] .cp-app[data-color-scheme="dark"]) :is(.text-neutral-600, .text-neutral-500, .text-neutral-400) {
    color: var(--ec-fg-2); /* meta and captions: >= 4.5:1 on every surface */
}

:is(html[data-color-scheme="light"] .cp-app[data-color-scheme="light"], html[data-color-scheme="dark"] .cp-app[data-color-scheme="dark"]) .bg-neutral-900.text-white {
    color: var(--ec-bg);
}

:is(html[data-color-scheme="light"] .cp-app[data-color-scheme="light"], html[data-color-scheme="dark"] .cp-app[data-color-scheme="dark"]) :is(.text-primary, .cp-prose a) {
    color: var(--ts-link); /* accent as text: the readable link colour, not the fill */
}

:is(html[data-color-scheme="light"] .cp-app[data-color-scheme="light"], html[data-color-scheme="dark"] .cp-app[data-color-scheme="dark"]) :is(.hover\:bg-neutral-50, .hover\:bg-neutral-100, .dark\:hover\:bg-neutral-800, .dark\:hover\:bg-neutral-900):hover {
    background-color: var(--ec-surface-2);
}

:is(html[data-color-scheme="light"] .cp-app[data-color-scheme="light"], html[data-color-scheme="dark"] .cp-app[data-color-scheme="dark"]) :is(.hover\:bg-neutral-700, .dark\:hover\:bg-neutral-300):hover {
    background-color: color-mix(in srgb, var(--ec-fg) 82%, var(--ec-bg));
}

:is(html[data-color-scheme="light"] .cp-app[data-color-scheme="light"], html[data-color-scheme="dark"] .cp-app[data-color-scheme="dark"]) :is(.hover\:text-neutral-900, .hover\:text-neutral-700, .dark\:hover\:text-neutral-100, .dark\:hover\:text-neutral-200):hover {
    color: var(--ec-fg);
}

:is(html[data-color-scheme="light"] .cp-app[data-color-scheme="light"], html[data-color-scheme="dark"] .cp-app[data-color-scheme="dark"]) :is(.hover\:border-neutral-300, .hover\:border-neutral-400, .dark\:hover\:border-neutral-600):hover {
    border-color: var(--ts-control);
}

:is(html[data-color-scheme="light"] .cp-app[data-color-scheme="light"], html[data-color-scheme="dark"] .cp-app[data-color-scheme="dark"]) :is(.focus\:border-neutral-400, .focus\:border-neutral-500):focus {
    border-color: var(--ts-focus);
}

:is(html[data-color-scheme="light"] .cp-app[data-color-scheme="light"], html[data-color-scheme="dark"] .cp-app[data-color-scheme="dark"]) :is(.hover\:text-primary\/80, .cp-prose a):hover {
    color: var(--ts-link-hover);
}

:is(html[data-color-scheme="light"] .cp-app[data-color-scheme="light"], html[data-color-scheme="dark"] .cp-app[data-color-scheme="dark"]) .group:hover :is(.group-hover\:bg-neutral-900, .dark\:group-hover\:bg-neutral-100) {
    background-color: var(--ec-fg);
}

:is(html[data-color-scheme="light"] .cp-app[data-color-scheme="light"], html[data-color-scheme="dark"] .cp-app[data-color-scheme="dark"]) .group:hover :is(.group-hover\:text-white, .dark\:group-hover\:text-neutral-900) {
    color: var(--ec-bg);
}

:is(html[data-color-scheme="light"] .cp-app[data-color-scheme="light"], html[data-color-scheme="dark"] .cp-app[data-color-scheme="dark"]) .group:hover :is(.group-hover\:text-neutral-700, .dark\:group-hover\:text-neutral-200) {
    color: var(--ec-fg);
}

:is(html[data-color-scheme="light"] .cp-app[data-color-scheme="light"], html[data-color-scheme="dark"] .cp-app[data-color-scheme="dark"]) .group:hover .group-hover\:text-primary {
    color: var(--ts-link);
}

/* ==========================================================================
   2. Containment
   The app resets its own mount; Polls pages run without Bootstrap. A {poll} embed in article text
   keeps the text's block rhythm (the app zeroes its margins; 1.5rem, as the quiz embed).
   ========================================================================== */

.ts-prose :is(.cp-embed, .cp-embed-list) {
    margin-block: 1.5rem;
}

/* ==========================================================================
   3. Leak neutralisers
   site.css leaks `@layer components` classes globally on every Polls page and every article with a
   {poll} embed. Put the Bootstrap / Joomla meaning back outside the app.
   ========================================================================== */

.form-check:not(:where(.cp-app *)) {
    width: auto;
    height: auto;
    border: 0;
    border-radius: 0;
    background: none;
    color: inherit;
    box-shadow: none;
}

.page-header:not(:where(.cp-app *)) {
    display: block;
    gap: 0;
}

/* ==========================================================================
   4. Default module markup
   mod_randompoll (.mod-cp-poll), mod_communitypolls (.mod-cp-list) and mod_cpcategories (.mod-cp-cats)
   print their tokens in an inline <style> after this file, at 0,1,0 (light) and 0,3,0
   (`:root[data-color-scheme="dark"] .mod-cp-x`). The doubled :is() lifts this map to 0,3,1 / 0,4,1;
   the values are scheme-aware tokens, so one map serves both schemes.
   ========================================================================== */

html:root :is(.mod-cp-poll, .mod-cp-list, .mod-cp-cats):is(.mod-cp-poll, .mod-cp-list, .mod-cp-cats),
html:root[data-color-scheme] :is(.mod-cp-poll, .mod-cp-list, .mod-cp-cats):is(.mod-cp-poll, .mod-cp-list, .mod-cp-cats) {
    --cp-fg: var(--ec-fg);
    --cp-fg-muted: var(--ec-fg-2);
    --cp-fg-faint: var(--ec-fg-2);
    --cp-line: var(--ec-border);
    --cp-line-soft: var(--ec-surface-2);
    --cp-tile-bg: var(--ec-surface);
    --cp-tile-shadow: var(--ec-shadow);
    --cp-accent: var(--ec-accent);
    --cp-on-accent: var(--ec-accent-fg);
    --cp-chip-bg: var(--ts-tint);
    --cp-live-bg: var(--ts-success-bg);
    --cp-live-fg: var(--ts-success);
    --cp-closed-bg: var(--ec-surface-2);
    --cp-closed-fg: var(--ec-fg-2);
    --cp-warm-bg: var(--ts-warning-bg);
    --cp-warm-fg: var(--ts-warning);
    --cp-error: var(--ts-danger);
}

/* neutral chips (poll type) sit on the tint: its paired ink keeps them readable */
html .mod-cp-chip.mod-cp-chip-type {
    color: var(--ts-on-tint);
}

/* accent used as text → the readable link colour */
html :is(.mod-cp-poll-title a, .mod-cp-list-title, .mod-cp-cats-tile-title, .mod-cp-cats-row-title):is(:hover, :focus-visible),
html .mod-cp-list-row:hover .mod-cp-list-title {
    color: var(--ts-link);
}

/* actions and choices take the template's control shape and a 44px target */
html .mod-cp-poll .mod-cp-poll-submit {
    min-block-size: var(--ts-control-height, 2.75rem);
    padding-inline: var(--ts-btn-pad-x, 1.125rem);
    border-radius: var(--ec-btn-radius);
    font-family: var(--ts-btn-font, inherit);
}

html .mod-cp-poll .mod-cp-poll-cta {
    min-block-size: var(--ts-control-height-sm, 2.25rem);
    border-radius: var(--ec-btn-radius);
}

html .mod-cp-poll .mod-cp-poll-choice-label {
    min-block-size: var(--ts-control-height, 2.75rem);
    border-radius: var(--ec-btn-radius);
}

html .mod-cp-poll .mod-cp-poll-choice-label:has(input:checked) {
    background: var(--ts-tint);
}

html .mod-cp-poll .mod-cp-poll-choice-label:has(input:checked) .mod-cp-poll-choice-text {
    color: var(--ts-on-tint);
}

html .mod-cp-poll .mod-cp-poll-choice-label:has(input:focus-visible) {
    outline: var(--ts-focus-width, 2px) solid var(--ts-focus);
    outline-offset: 2px;
}

html .mod-cp-poll :is(.mod-cp-poll-submit, .mod-cp-poll-cta, .mod-cp-poll-toggle):focus-visible,
html :is(.mod-cp-list-row, .mod-cp-cats-tile-link, .mod-cp-cats-row-link, .mod-cp-cats-browse, .mod-cp-list-browse):focus-visible {
    outline: var(--ts-focus-width, 2px) solid var(--ts-focus);
    outline-offset: 2px;
}

html :is(.mod-cp-cats-tile-link, .mod-cp-list-row, .mod-cp-cats-row-link) {
    border-radius: var(--ec-btn-radius);
}

/* no-JS fallback card of a {poll}/{polls} embed (inline vars, 0,2,0 in dark) */
html:root :is(.cp-embed, .cp-embed-list):is(.cp-embed, .cp-embed-list) {
    --cp-embed-bg: var(--ec-surface);
    --cp-embed-fg: var(--ec-fg);
    --cp-embed-muted: var(--ec-fg-2);
    --cp-embed-line: var(--ec-border);
}

/* ==========================================================================
   5. Page frame (app mode: static header, full-width main, sidebars stacked below)
   ========================================================================== */

/* The app header wraps instead of pushing its nav past a phone viewport (measured: 393px at 320/390). */
.cp-app .cp-header > div {
    flex-wrap: wrap;
    row-gap: 0.5rem;
}

.cp-app .cp-header > div > nav {
    flex-wrap: wrap;
}

/* ==========================================================================
   6. Design skin (template-owned; ≤ 30% of this file)
   ========================================================================== */

/* @ts-kit section-6 begin: 6. Design skin (template-owned; sync-kit.mjs keeps everything between these two markers) */
/* @ts-kit section-6 end */