/**
 * Studio community kit · ext/communityquiz.css · Community Quiz (com_communityquiz), contract §5.8
 *
 * Loaded by PageContext as `template.quorum.ext.communityquiz` on Community Quiz views (app mode,
 * Bootstrap stays on), wherever a Community Quiz module renders, and (via the module/asset rule) on
 * pages whose content carries a {communityquiz} launch card.
 * 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, CQ 8.3):
 * - one React SPA on `#cq-site-root.com-communityquiz-site` with its own chrome (brand, nav, search,
 *   sign-in) and react-router navigation. The recommended setting "Frontend styling = Follow Joomla
 *   template" (`appearance.frontend_style=template`) switches off CQ's own fonts, colours, heading
 *   rhythm and resets (`:where(#cq-site-root[data-frontend-style=template])`, specificity 0) and
 *   samples the page colours into inline `--cq-template-*`: this file maps the internal tokens to the
 *   template at (1,1,0) instead, so the app reads as part of the site in both schemes;
 * - in that mode Bootstrap Reboot reaches the app: links underline in the link colour, lists get
 *   Reboot's indent. Section 2 puts CQ's own resets back for its chrome and keeps rich text readable;
 * - `--accent` serves both as a fill (with `--accent-fg`) and as text/icon colour: fills take the
 *   template accent pair, text takes `--ts-link`, icons `--ts-signal`, so light accents stay legible;
 * - three PHP modules printing an inline <style> in <body> after this file (dark at 0,2,1);
 * - the `{communityquiz id="N"}` launch card of plg_content_communityquiz ships no CSS at all.
 */

/* ==========================================================================
   1. Variable map (template mode)
   ========================================================================== */

#cq-site-root[data-frontend-style="template"] {
    --bg: var(--ec-bg);
    --bg-subtle: var(--ec-surface-2);
    --surface: var(--ec-surface);
    --surface-raised: var(--ec-surface);
    --surface-2: var(--ec-surface-2);
    --surface-inset: var(--ec-surface-2);
    --text: var(--ec-fg);
    --text-muted: var(--ec-fg-2);
    --text-faint: var(--ec-fg-2);
    --border: var(--ec-border);
    --border-strong: var(--ts-control);
    --accent: var(--ec-accent);
    --accent-hover: var(--ts-btn-primary-hover-bg, var(--ec-accent));
    --accent-fg: var(--ec-accent-fg);
    --accent-soft: var(--ts-tint);
    --accent-soft-2: var(--ts-tint);
    --accent-soft-fg: var(--ts-on-tint);
    --accent-line: var(--ts-signal);
    --ring: var(--ts-focus);
    --ok: var(--ts-success);
    --warn: var(--ts-warning);
    --bad: var(--ts-danger);
    --info: var(--ts-info);
    --ok-soft: var(--ts-success-bg);      /* template mode mixes 8% status into the ground: 4.3:1 badges */
    --warn-soft: var(--ts-warning-bg);
    --bad-soft: var(--ts-danger-bg);
    --info-soft: var(--ts-info-bg);
    --r-xs: var(--ec-btn-radius);
    --r-sm: var(--ec-btn-radius);
    --r: var(--ec-radius);
    --r-lg: var(--ec-radius);
    --r-xl: var(--ec-radius);
    --r-pill: 999px;
    --shadow-sm: var(--ec-shadow);
    --font-mono: var(--ts-font-mono);
}

/* the primary action is filled again (template mode draws it as a soft outline) */
#cq-site-root[data-frontend-style="template"] .cq-btn-primary {
    border-color: var(--ec-accent);
    background: var(--ec-accent);
    color: var(--ec-accent-fg);
}

#cq-site-root[data-frontend-style="template"] .cq-btn-primary:hover {
    border-color: var(--ts-btn-primary-hover-bg, var(--ec-accent));
    background: var(--ts-btn-primary-hover-bg, var(--ec-accent));
    color: var(--ts-btn-primary-hover-fg, var(--ec-accent-fg));
}

/* the accent used as TEXT → the readable link colour */
#cq-site-root[data-frontend-style="template"] :is(.cq-notif-foot, .cq-file-link, .cq-performance-resource, .cq-calc-result, .cq-course-play, .cq-course-price.is-free, .cq-course-cert, .cq-lesson-preview, .cq-lb-you-rank strong, .cq-lb-you-metric, .cq-rank-1 .cq-podium-metric, .cq-lb-rank-top, .cq-res-link:hover) {
    color: var(--ts-link);
}

/* the accent used for small graphics (icons, marks) → >= 3:1 signal colour */
#cq-site-root[data-frontend-style="template"] :is(.cq-guest-certificate h2 svg, .cq-chip svg, .cq-meta svg, .cq-scale-faces .cq-scale-icon.cq-on, .cq-inselect-check, .cq-inselect-trigger[aria-expanded="true"] .cq-inselect-chevron, .cq-qz-title-mark, .cq-qz-note svg, .cq-lesson-icon.cq-lesson-quiz, .cq-quiz-lesson-fact-icon, .cq-cover-play) {
    color: var(--ts-signal);
}

/* ==========================================================================
   2. Containment (template mode on a Bootstrap page)
   CQ's own resets are switched off in template mode, so Reboot's link and list rules (0,0,1) reach
   the app chrome. Same weight, loaded later: CQ's component-mode reset comes back for its chrome;
   authored rich text (.cq-rich) keeps readable, underlined links and real lists.
   ========================================================================== */

:where(#cq-site-root[data-frontend-style="template"]) a:not(:where(.cq-rich *)) {
    color: inherit;
    text-decoration: none;
}

:where(#cq-site-root[data-frontend-style="template"]) :is(ul, ol):not(:where(.cq-rich *)) {
    margin: 0;
    padding: 0;
    list-style: none;
}

#cq-site-root[data-frontend-style="template"] .cq-rich a {
    color: var(--ts-link);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

#cq-site-root[data-frontend-style="template"] .cq-rich a:hover {
    color: var(--ts-link-hover);
}

/* ==========================================================================
   3. Leak neutralisers
   None: every CQ rule is scoped to #cq-site-root. (Component mode adds `cq-site-scrollbars` to
   <html>/<body> for thin app scrollbars; template mode, the recommended setting, does not.)
   ========================================================================== */

/* ==========================================================================
   4. Default module markup
   mod_communityquiz_featured / _leaderboard / _mylearning print their tokens inline after this file
   (0,1,0; dark `html[data-color-scheme="dark"] .mod-cq-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.
   ========================================================================== */

html[data-color-scheme] :is(.mod-cq-featured, .mod-cq-leaderboard, .mod-cq-mylearning):is(.mod-cq-featured, .mod-cq-leaderboard, .mod-cq-mylearning) {
    --cq-fg: var(--ec-fg);
    --cq-fg-muted: var(--ec-fg-2);
    --cq-fg-faint: var(--ec-fg-2);
    --cq-line: var(--ec-border);
    --cq-line-soft: var(--ec-surface-2);
    --cq-tile-bg: var(--ec-surface);
    --cq-accent: var(--ts-link);          /* kind labels, links, hover titles, borders */
    --cq-accent-soft: var(--ts-tint);
    --cq-you-bg: var(--ts-tint);
    --cq-gold: var(--ts-warning);
    --cq-bar-bg: var(--ec-surface-2);
    --cq-bar-fill: var(--ts-signal);
    --cq-pass: var(--ts-success);
    --cq-fail: var(--ts-danger);
    --cq-pend: var(--ts-warning);
}

/* fills drawn with a hard-coded white label → the template accent pair */
html :is(.mod-cq-leaderboard-you-tag, .mod-cq-mylearning-signin-btn):is(.mod-cq-leaderboard-you-tag, .mod-cq-mylearning-signin-btn) {
    background: var(--ec-accent);
    color: var(--ec-accent-fg);
}

html .mod-cq-mylearning .mod-cq-mylearning-signin-btn {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--ts-control-height, 2.75rem);
    padding-inline: var(--ts-btn-pad-x, 1.125rem);
    border-radius: var(--ec-btn-radius);
}

html .mod-cq-mylearning .mod-cq-mylearning-signin-btn:hover {
    background: var(--ts-btn-primary-hover-bg, var(--ec-accent));
    color: var(--ts-btn-primary-hover-fg, var(--ec-accent-fg));
    filter: none;
}

html .mod-cq-featured .mod-cq-featured-badge,
html .mod-cq-leaderboard .mod-cq-leaderboard-row--you .mod-cq-leaderboard-name {
    color: var(--ts-on-tint);
}

html :is(.mod-cq-featured-link, .mod-cq-mylearning-signin):is(.mod-cq-featured-link, .mod-cq-mylearning-signin) {
    border-radius: var(--ec-radius);
}

html :is(.mod-cq-leaderboard-row, .mod-cq-leaderboard-you):is(.mod-cq-leaderboard-row, .mod-cq-leaderboard-you) {
    border-radius: var(--ec-btn-radius);
}

html :is(.mod-cq-featured-link, .mod-cq-leaderboard-more-link, .mod-cq-mylearning-item-main, .mod-cq-mylearning-course-link, .mod-cq-mylearning-signin-btn, .mod-cq-mylearning-foot-link):focus-visible {
    outline: var(--ts-focus-width, 2px) solid var(--ts-focus);
    outline-offset: 2px;
}

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

/* App mode keeps the site header static (offset 0); should a template keep a sticky header, CQ's own
   sticky bars (shell header, runner head with the timer, course sidebars) stop below it. */
#ts-main #cq-site-root :is(.cq-shell-header, .cq-player-head) {
    top: var(--ts-sticky-offset, 0px);
}

#ts-main #cq-site-root .cq-course-player:not(.is-fullscreen) .cq-player-sidebar {
    top: calc(var(--ts-sticky-offset, 0px) + 16px);
    max-height: calc(100vh - var(--ts-sticky-offset, 0px) - 32px);
}

#ts-main #cq-site-root :is(.cq-qz-side, .cq-enroll-card) {
    top: calc(var(--ts-sticky-offset, 0px) + 20px);
}

/* {communityquiz id="N"} launch card (plg_content_communityquiz; no CSS of its own). It sits in article
   prose, so every child is set explicitly. */
.cq-content-embed {
    display: grid;
    gap: 0.5rem;
    justify-items: start;
    max-inline-size: 40rem;
    margin-block: 1.5rem;
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--ec-border);
    border-radius: var(--ec-radius);
    background: var(--ec-surface);
    box-shadow: var(--ec-shadow);
    color: var(--ec-fg);
}

.cq-content-embed .cq-content-embed__eyebrow {
    color: var(--ts-on-tint);
    background: var(--ts-tint);
    padding: 0.125rem 0.5rem;
    border-radius: var(--ts-badge-radius, 0.375rem);
    font-family: var(--ec-font-body);
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.4;
}

.cq-content-embed .cq-content-embed__title {
    margin: 0;
    max-inline-size: none;
    color: var(--ec-fg);
    font-family: var(--ec-font-display);
    font-size: 1.375rem;
    font-weight: var(--ec-disp-weight, 700);
    line-height: 1.2;
    letter-spacing: var(--ec-disp-tracking, normal);
    text-transform: var(--ec-disp-transform, none);
}

.cq-content-embed :is(.cq-content-embed__subtitle, .cq-content-embed__intro) {
    margin: 0;
    max-inline-size: 65ch;
    color: var(--ec-fg-2);
    font-size: 1rem;
    line-height: 1.5;
}

.cq-content-embed .cq-content-embed__subtitle {
    color: var(--ec-fg);
    font-weight: 600;
}

.cq-content-embed .cq-content-embed__launch {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-block-size: var(--ts-control-height, 2.75rem);
    margin-block-start: 0.5rem;
    padding: 0.5rem var(--ts-btn-pad-x, 1.125rem);
    border: var(--ts-btn-border-width, 1px) solid var(--ts-btn-primary-border, var(--ec-accent));
    border-radius: var(--ec-btn-radius);
    background: var(--ts-btn-primary-bg, var(--ec-accent));
    color: var(--ts-btn-primary-fg, var(--ec-accent-fg));
    font-family: var(--ts-btn-font, var(--ec-font-body));
    font-weight: var(--ts-btn-weight, 600);
    text-decoration: none;
    box-shadow: var(--ts-btn-primary-shadow, none);
    transition: background-color var(--ec-dur-1, 0ms) var(--ec-ease, ease);
}

/* The trailing arrow as a drawn glyph (1em, centred on the label) rather than the body font's
   small, baseline-sitting U+2192. */
.cq-content-embed .cq-content-embed__launch::after {
    content: "";
    flex: none;
    inline-size: 1.125em;
    block-size: 1.125em;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (forced-colors: active) {
    .cq-content-embed .cq-content-embed__launch::after {
        forced-color-adjust: none;
        background-color: LinkText;
    }
}

.cq-content-embed .cq-content-embed__launch:hover {
    background: var(--ts-btn-primary-hover-bg, var(--ec-accent));
    color: var(--ts-btn-primary-hover-fg, var(--ec-accent-fg));
}

.cq-content-embed .cq-content-embed__launch:focus-visible {
    outline: var(--ts-focus-width, 2px) solid var(--ts-focus);
    outline-offset: 2px;
}

/* ==========================================================================
   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 (template mode, design spec §6.15-6.16): the catalogue and quiz titles in Big Shoulders at
   the inner-page size, square filter chips and badges, no shadows. */
#cq-site-root[data-frontend-style="template"] :is(.cq-filter-chip, .cq-course-price, .cq-badge, .cq-shell-slash, .cq-qz-stat-icon) {
    border-radius: 0;
}

/* The app-bar notification count is Quorum's square accent count (as in the header, CjForum and
   Sociable), not a red pill. */
#cq-site-root[data-frontend-style="template"] .cq-notif-dot {
    min-inline-size: 1.25rem;
    block-size: 1.25rem;
    min-block-size: 0;
    padding: 0 0.25rem;
    border-radius: 0;
    background: var(--ec-accent);
    box-shadow: 0 0 0 2px var(--ec-surface);
    color: var(--ec-accent-fg);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.25rem;
}

#cq-site-root[data-frontend-style="template"] [class*="shadow"]:not(:focus-visible) {
    box-shadow: none;
}

#cq-site-root[data-frontend-style="template"] h1 {
    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;
}

#cq-site-root[data-frontend-style="template"] :is(h2, h3) {
    font-family: var(--ec-font-display);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: 0;
}

.cq-content-embed .cq-content-embed__title {
    font-family: var(--ec-font-display);
    font-weight: 700;
}
/* Catalogue head: the heavy rule over every page title; the figures as poster numerals; a figure
   the app prints as "-" (no data yet) is marked by the body-end script and left out, as is a card
   rating with no value. */
#cq-site-root[data-frontend-style="template"] .cq-cat-head {
    padding-block-start: var(--q-s5);
    border-block-start: var(--q-rule-w) solid var(--q-rule);
}

#cq-site-root[data-frontend-style="template"] .cq-cat-stat-v {
    font: 800 2.5rem/0.9 var(--ec-font-display);
    letter-spacing: 0;
}

#cq-site-root[data-frontend-style="template"] :is(.cq-cat-stats > [data-q-empty], .cq-course-rating[data-q-empty]) {
    display: none;
}

/* One colour per tag: the level badge on a course card is the neutral tag the featured course uses. */
#cq-site-root[data-frontend-style="template"] .cq-qc-tags > .cq-badge {
    border-color: transparent;
    background-color: var(--ec-surface-2);
    color: var(--ec-fg-2);
}
/* @ts-kit section-6 end */