/** FORME - Content & Engagement Suite adapters.
 * Shared GPS Tools, Community Polls and Rewardify bridges are loaded by PageContext.
 * This stylesheet adds the Quotes and QuillThreads contracts, with no global reset.
 * Copyright (C) 2026 BulaSikku Technologies. GPL-2.0-or-later. */

/* Quotes uses --cq-* too, but is unrelated to Community Quiz. Keep every variable scoped.
   Include nested modal/drawer scopes. Density remains the extension's own setting. */
html body .cquotes-scope {
    --cq-serif: Georgia, 'Times New Roman', serif;
    --cq-sans: var(--ec-font-body);
    --cq-mono: var(--ts-font-mono);
    --cq-radius-sm: var(--ec-btn-radius);
    --cq-radius: var(--ec-radius);
    --cq-radius-lg: var(--ec-radius);
    --cq-shadow-sm: none;
    --cq-shadow: var(--ec-shadow);
    --cq-shadow-lg: var(--ts-overlay-shadow);
}
html body .cquotes-scope:not([data-dark="true"], [data-dark="true"] *, [data-aesthetic="bold"], [data-aesthetic="bold"] *) {
    --cq-bg: var(--ec-bg);
    --cq-bg-elev: var(--ec-surface);
    --cq-bg-sunken: var(--ec-surface-2);
    --cq-surface: var(--ec-surface);
    --cq-ink: var(--ec-fg);
    --cq-ink-soft: var(--ec-fg-2);
    --cq-ink-muted: var(--ec-fg-2);
    --cq-ink-faint: var(--ec-fg-2);
    --cq-line: var(--ec-border);
    --cq-line-strong: var(--ts-control);
    --cq-accent: var(--ec-accent);
    --cq-accent-soft: var(--ts-tint);
    --cq-accent-ink: var(--ts-on-tint);
    --cq-verified: var(--ts-success);
    --cq-disputed: var(--ts-warning);
    --cq-translation: var(--ts-info);
    color-scheme: inherit;
}

/* QuillThreads renders into ordinary DOM roots, including multiple embedded threads.
   An explicitly dark widget keeps its selected palette; its typography still matches. */
html body .qt-app {
    --qt-font-ui: var(--ec-font-body);
    --qt-font-serif: Georgia, 'Times New Roman', serif;
    --qt-font-mono: var(--ts-font-mono);
    --qt-avatar-size: 40px;
    --qt-avatar-radius: 50%;
}
html body .qt-app:not(.qt-dark) {
    --qt-primary: var(--ec-accent);
    --qt-primary-2: var(--fm-accent-hover);
    --qt-primary-soft: var(--ts-tint);
    --qt-primary-foreground: var(--ec-accent-fg);
    --qt-bg: var(--ec-bg);
    --qt-surface: var(--ec-surface);
    --qt-surface-muted: var(--ec-surface-2);
    --qt-text: var(--ec-fg);
    --qt-text-muted: var(--ec-fg-2);
    --qt-faint: var(--ec-fg-2);
    --qt-border: var(--ec-border);
    --qt-border-soft: var(--ec-border);
    --qt-shadow-sm: none;
    color-scheme: inherit;
}
/* Keep initials and compact author badges readable independently of the
   upstream randomly generated avatar hue. Image avatars keep their artwork. */
html body .qt-app .qt-avatar:not(img) {
    color: var(--qt-primary-foreground);
    background: var(--qt-primary);
}
html body .qt-app .qt-comment-badge--author {
    color: var(--qt-text);
    background: var(--qt-surface-muted);
}
/* Inline shortcode examples use the readable link role, rather than an
   extension's decorative accent, for small monospace text. */
html body .cquotes-scope .cq-mono {
    --cq-accent: var(--ts-link);
}
html body :is(.cquotes-scope, .cp-app, .gpstools-scope, .rewardify-app, .qt-app) :is(a, button, input, select, textarea, summary):focus-visible {
    outline: 2px solid var(--ts-focus);
    outline-offset: 3px;
}
/* Polls' utility reset uses an important transparent outline on this native
   control. Restore a solid visible keyboard focus indicator. */
html body .cp-app select:focus-visible {
    outline: 2px solid var(--ts-focus) !important;
    outline-offset: 3px !important;
}

/* Embedded discussions in an article inherit its readable width, while editorial
   landing pages and app views keep the full Studio component column. */
.ts-article__body > :is(.qt-comments-root, #qt-comments-root, quillthreads-comments) {
    margin-block: 3rem 0;
}

/* Quotes' native hero uses intrinsic grid tracks and a fixed audio minimum.
   Compact section padding and shrinkable tracks keep the full quotation,
   attribution and playback controls inside the card on narrow screens. */
@media (max-width: 47.5rem) {
    html body .cquotes-scope,
    html body .cquotes-scope[data-density] {
        --cq-pad-section: clamp(0.75rem, 4vw, 1.5rem);
        --cq-pad-card: 1rem;
    }
    html body .cquotes-scope :is(.cqs-hero, .cq-rail-grid) {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.5rem;
    }
    html body .cquotes-scope .cq-rail-grid > *,
    html body .cquotes-scope :is(.cqs-hero, .cq-masonry) :is(div, a, span) {
        min-width: 0 !important;
        overflow-wrap: anywhere;
    }
    /* Keep the app brand's accessible text while freeing space for search. */
    html body .cquotes-scope .cqs-brand-text {
        position: absolute !important;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
    html body .cquotes-scope .cqs-search input {
        min-height: 1.5rem;
    }
    /* Keep the complete shortcode example readable without a horizontal
       scroll region that has no keyboard focus target. */
    html body .cquotes-scope .cq-rail-grid aside .cq-mono {
        white-space: normal !important;
        overflow-wrap: anywhere;
    }
    /* The waveform is decorative; trim its bars inside the flexible track,
       leaving the play button and elapsed-time text visible. */
    html body .cquotes-scope :is(.cqs-hero, .cq-masonry) div:has(> button[aria-label][title]) > div:not(.cq-mono) {
        overflow: hidden;
    }
}
@media (prefers-reduced-motion: reduce) {
    html body :is(.cquotes-scope, .cp-app, .gpstools-scope, .rewardify-app, .qt-app) *,
    html body :is(.cquotes-scope, .cp-app, .gpstools-scope, .rewardify-app, .qt-app) *::before,
    html body :is(.cquotes-scope, .cp-app, .gpstools-scope, .rewardify-app, .qt-app) *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}