/**
 * Studio community kit · ext/communitysurveys.css · Community Surveys (com_communitysurveys), contract §5.10
 *
 * Loaded by PageContext as `template.quorum.ext.communitysurveys` on every Community Surveys view
 * (app mode, Bootstrap stays on), on articles with a {survey} embed and wherever a Surveys module
 * renders (mod_surveyform mounts the same SPA).
 * 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, Community Surveys 8.5):
 * - a React SPA on `#communitysurveys-site.cs-site[data-color-mode]` (embeds: `.cs-site.cs-survey-embed`);
 *   plain scoped CSS, tokens `--cs-*` on `.cs-site` (up to 0,3,0 for surface × mode). It follows
 *   <html data-color-scheme> live and TONE-MATCHES its surfaces to the first opaque ancestor
 *   (`--cs-bg`, `--cs-bg-elev`, `--cs-bg-input` written inline): the template body is hex, so the
 *   survey sits on the template ground by itself;
 * - fonts default to Inter Tight / JetBrains Mono, which no template ships; the per-survey accent and
 *   radius are inline and stay the survey author's choice;
 * - the author views (account, front-end builder) inject an unscoped Tailwind build with `!important`
 *   utilities (`.collapse`, `.hidden`, `.container` …): templates never style those names (§2.4);
 * - four PHP modules printing an inline <style> in <body> after this file (dark at 0,2,1).
 *
 * The colour map applies only while the survey shows the page's scheme (`data-color-mode` equals
 * <html data-color-scheme>); a survey forced to the other mode keeps its own palette.
 */

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

.cs-site.cs-site {
    --cs-font-sans: var(--ec-font-body) !important;
    --cs-font-mono: var(--ts-font-mono) !important;
    --cs-radius-lg: var(--ec-radius);
}

:is(html[data-color-scheme="light"] .cs-site[data-color-mode="light"], html[data-color-scheme="dark"] .cs-site[data-color-mode="dark"]) {
    --cs-fg: var(--ec-fg);
    --cs-fg-2: var(--ec-fg);
    --cs-fg-3: var(--ec-fg-2);
    --cs-fg-4: var(--ec-fg-2);            /* the app's #9a9a98 captions are 2.8:1; fg-2 is >= 4.5:1 */
    --cs-line: var(--ec-border);
    --cs-line-strong: var(--ts-control);
    --cs-danger: var(--ts-danger);
}

/* ==========================================================================
   2. Containment
   Respondent CSS is fully scoped and resets its own controls; Bootstrap Reboot and the template's
   allow-listed base rules are out-ranked by the app's class rules.
   ========================================================================== */

/* A {survey} embed in article text keeps the text's block rhythm (as the Community Quiz embed). */
.ts-prose .cs-survey-embed.cs-survey-embed {
    margin-block: 1.5rem;
}

/* ==========================================================================
   3. Leak neutralisers
   The author views' Tailwind build uses `!important` utilities on generic names; the templates avoid
   those names altogether (contract §2.4 rule 5), which is the only robust answer. Nothing to add.
   ========================================================================== */

/* ==========================================================================
   4. Default module markup
   mod_communitysurveys (.mod-cs-surveys), mod_surveycategories (.mod-cs-cats), mod_surveyresults
   (.mod-cs-results) and mod_surveyform (.mod-cs-form) print their tokens inline after this file
   (0,1,0; dark `html[data-color-scheme="dark"] .mod-cs-x` 0,2,1). The doubled :is() lifts this map to
   0,3,1; the values are scheme-aware tokens, so one map serves both schemes. Per-item accents
   (`--cs-card-accent`, `--cs-row-accent`, `--cs-tile-accent`) are inline and stay as they are.
   ========================================================================== */

html[data-color-scheme] :is(.mod-cs-surveys, .mod-cs-cats, .mod-cs-results, .mod-cs-form):is(.mod-cs-surveys, .mod-cs-cats, .mod-cs-results, .mod-cs-form) {
    --cs-fg: var(--ec-fg);
    --cs-fg-muted: var(--ec-fg-2);
    --cs-fg-faint: var(--ec-fg-2);
    --cs-line: var(--ec-border);
    --cs-line-soft: var(--ec-surface-2);
    --cs-tile-bg: var(--ec-surface);
    --cs-accent: var(--ts-link);          /* tab underline, links, notices: used as text and lines */
    --cs-bar-bg: var(--ec-surface-2);
    --cs-bar-fill: var(--ts-signal);
    --cs-good: var(--ts-success);
    --cs-ok: var(--ts-warning);
    --cs-bad: var(--ts-danger);
    --cs-passive: var(--ec-fg-2);
}

html :is(.mod-cs-surveys-card-link, .mod-cs-cats-tile-link):is(.mod-cs-surveys-card-link, .mod-cs-cats-tile-link) {
    border-radius: var(--ec-radius);
}

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

html :is(.mod-cs-surveys-card-link, .mod-cs-surveys-row-link, .mod-cs-surveys-browse, .mod-cs-cats-tile-link, .mod-cs-cats-row-link, .mod-cs-cats-browse):focus-visible {
    outline: var(--ts-focus-width, 2px) solid var(--ts-focus);
    outline-offset: 2px;
}

/* ==========================================================================
   5. Page frame
   ========================================================================== */

/* anchors the app's skip link (.cs-skip-link is absolutely positioned) to the survey. The link hides
   itself only by sliding 150% of its height upwards, which lands it on the content above the mount
   once the mount is positioned: keep it clipped until it has focus. */
#communitysurveys-site {
    position: relative;
}

.cs-site .cs-skip-link:not(:focus) {
    clip-path: inset(50%);
}

/* the browse grid's 420px track overflows a phone (measured at 390) */
.cs-site .cs-card-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(420px, 100%), 1fr));
}

/* the accent chip ("Anonymous") prints the survey accent as small text on the ground (3.9:1 for the
   seeded Swiss Sage): mix it toward the survey ink, which keeps the author's hue in both modes */
.cs-site .cs-shell-meta-chip.is-accent {
    color: color-mix(in srgb, var(--cs-accent) 65%, var(--cs-fg));
}

/* the primary action in the dark scheme: light text on the seeded Swiss Sage fill is 4.1:1, so the
   fill is mixed 22% toward the survey ground (5.6:1), keeping the author's hue */
:root[data-color-scheme="dark"] .cs-site :is(.cs-btn-primary, .cs-btn-primary:hover) {
    border-color: color-mix(in srgb, var(--cs-accent) 78%, var(--cs-bg));
    background: color-mix(in srgb, var(--cs-accent) 78%, var(--cs-bg));
}

/* the NPS histogram at 8% accent is almost invisible on a light card */
.cs-site .cs-thanks-nps-bar {
    background: color-mix(in srgb, var(--cs-accent) 45%, transparent);
}

/* App mode keeps the site header static (offset 0); should a template keep a sticky header, the
   survey's own sticky progress bar and table of contents stop below it. */
.cs-site :is(.cs-progress, .cs-conv-progress) {
    top: var(--ts-sticky-offset, 0px);
}

.cs-site .cs-toc {
    top: calc(var(--ts-sticky-offset, 0px) + 16px);
}

/* a {survey} embed the visitor may not take (closed, login required …): unstyled by the extension */
.cs-survey-embed-notice {
    margin-block: 1.5rem;
    padding: 0.875rem 1rem;
    border: var(--ts-alert-border-width, 1px) solid var(--ec-border);
    border-inline-start: max(var(--ts-alert-bar-width, 1px), 3px) solid var(--ts-info);
    border-radius: var(--ts-alert-radius, var(--ec-radius));
    background: var(--ts-info-bg);
    color: var(--ec-fg);
    font-size: 1rem;
    line-height: 1.5;
}

/* ==========================================================================
   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) */
/* Quorum: survey titles in Big Shoulders at the inner-page size, square chips and fields. The
   question card colours stay the survey author's theme. */
.cs-site.cs-site :is(.cs-chip, .cs-shell-meta-chip, .cs-btn, input, select, textarea) {
    border-radius: 0;
}

/* Meta chips are single-line labels (14px); the primary action is a Quorum primary, so it
   holds AA in both schemes whatever the survey theme (its sage is 4.1:1 in the dark). */
.cs-site.cs-site .cs-shell-meta-chip {
    font-size: 0.875rem;
}

/* The Quorum primary in both schemes: above the kit's dark-scheme sage mix (0,5,0), which is
   designed for light text, while Quorum's dark accent carries dark text (--ec-accent-fg). */
:root .cs-site.cs-site.cs-site :is(.cs-btn.cs-btn-primary, .cs-btn.cs-btn-primary:hover) {
    border-color: var(--ec-accent);
    background: var(--ec-accent);
    color: var(--ec-accent-fg);
}

.cs-site.cs-site :is(h1, .cs-browse-title) {
    font-family: var(--ec-font-display);
    font-size: clamp(2.5rem, 2.3vw + 1.9rem, 3.5rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
}

.cs-site.cs-site :is(h2, .cs-card-title) {
    font-family: var(--ec-font-display);
    font-weight: 700;
    letter-spacing: 0;
}
/* @ts-kit section-6 end */