/**
 * Studio community kit · ext/easyforms.css · EasyForms (com_easyforms), contract §5.9
 *
 * Loaded by PageContext as `template.quorum.ext.easyforms` on the public form and the front-end
 * dashboard (app mode, Bootstrap off; detected by the `com_easyforms.public.css` / `.app.css` assets)
 * and wherever mod_easyforms_list renders. The PHP forms list (view=forms) is a normal page; its
 * `efl-*` vocabulary shares the module's `--efl-*` tokens mapped in section 4.
 * 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, EasyForms 1.4):
 * - a React SPA on `#easyforms-app.{light|dark}`; Tailwind 3 with `important: '#easyforms-app'`
 *   (utilities at 1,1,0); shadcn tokens as HSL channel triplets, declared on the root AND re-declared
 *   on the inner `.easyforms-submission-form[data-easyforms-color-scheme]` (both must be hit);
 * - per-form theme variables (`--ef-*`) written INLINE on the form (only !important beats them);
 *   every public state is a `min-h-screen` slab painted in the app's own navy/white;
 * - an unscoped Tailwind Preflight (`ol,ul{list-style:none}`, `a{color:inherit}`, h1–h6 size reset,
 *   `img,svg{display:block}`, `*{border:0 solid}`, `.container`) that reaches the whole page. It prints
 *   before the template CSS, so class-based template rules win; chrome that relies on browser defaults
 *   for lists, headings or links shows the reset on form pages (see the kit README).
 * - mod_easyforms_list and forms-list.css put hex `--efl-*` tokens on :root (the module file prints
 *   after this one) and draw white labels on a hard-coded blue.
 *
 * Colours are derived from the template tokens at run time with relative colour syntax, so every
 * preset, scheme and custom accent follows; without that syntax the app keeps its own palette. The map
 * applies only while the form shows the page's scheme: a form forced to the other scheme (its "Color
 * Theme" setting) keeps its own, internally consistent palette.
 */

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

@supports (color: hsl(from red h s l)) {
    :is(html[data-color-scheme="light"] #easyforms-app[data-color-scheme="light"], html[data-color-scheme="dark"] #easyforms-app[data-color-scheme="dark"]),
    :is(html[data-color-scheme="light"] #easyforms-app [data-easyforms-color-scheme="light"], html[data-color-scheme="dark"] #easyforms-app [data-easyforms-color-scheme="dark"]) {
        --background: from var(--ec-bg) h s l;
        --foreground: from var(--ec-fg) h s l;
        --card: from var(--ec-surface) h s l;
        --card-foreground: from var(--ec-fg) h s l;
        --popover: from var(--ec-surface) h s l;
        --popover-foreground: from var(--ec-fg) h s l;
        --primary: from var(--ec-accent) h s l;
        --primary-foreground: from var(--ec-accent-fg) h s l;
        --secondary: from var(--ec-surface-2) h s l;
        --secondary-foreground: from var(--ec-fg) h s l;
        --muted: from var(--ec-surface-2) h s l;
        --muted-foreground: from var(--ec-fg-2) h s l;
        --accent: from var(--ec-surface-2) h s l;
        --accent-foreground: from var(--ec-fg) h s l;
        --destructive: from var(--ts-danger) h s l;
        --destructive-foreground: from var(--ec-bg) h s l;
        --warning: from var(--ts-warning) h s l;
        --warning-text: from var(--ts-warning) 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;
        --radius: var(--ec-btn-radius);
    }
}

/* Per-form theme variables are inline on the form: font, accent and shape follow the template. The
   theme's header banner (gradient or image) stays the form author's choice. */
#easyforms-app .easyforms-submission-form {
    --ef-fontFamily: var(--ec-font-body) !important;
    --ef-accent: hsl(var(--primary)) !important;
    --ef-primary: hsl(var(--primary)) !important;
    --ef-borderRadius: var(--ec-btn-radius) !important;
    --ef-inputHeight: var(--ts-control-height, 2.75rem) !important;
}

/* ==========================================================================
   2. Containment
   Form pages run without Bootstrap and the app's utilities out-rank the template's allow-listed base
   rules; field controls keep a >= 3:1 border and the template's focus colour.
   ========================================================================== */

#easyforms-app :is(.easyforms-field-input, .easyforms-field-textarea, .easyforms-field-select) {
    border-color: var(--ts-control);
    background-color: var(--ts-control-bg, var(--ec-surface));
}

#easyforms-app :is(.easyforms-field-input, .easyforms-field-textarea, .easyforms-field-select):focus {
    border-color: var(--ts-focus);
    box-shadow: 0 0 0 1px var(--ts-focus);
}

/* ==========================================================================
   3. Leak neutralisers
   The app's global Preflight is element-level (not a class): it cannot be undone here without also
   overriding the template's own equal-weight rules. Templates style their chrome with classes
   (contract §2.4), which already win. Nothing to add.
   ========================================================================== */

/* ==========================================================================
   4. Default module markup (mod_easyforms_list) and the forms list page (view=forms)
   The extension declares `--efl-*` on :root (and again for dark and on a dark OS, up to 0,5,0), and the
   module file prints after this one. Declaring the map on the nearest roots of the `efl-*` markup
   (the module's `.efl-container`, the list page's `.easyforms-list-page`) wins by inheritance, at
   any specificity, and keeps extension names off :root.
   ========================================================================== */

:is(.efl-container, .easyforms-list-page) {
    --efl-bg-primary: var(--ec-surface);
    --efl-bg-secondary: var(--ec-surface-2);
    --efl-bg-hover: var(--ec-surface-2);
    --efl-border: var(--ec-border);
    --efl-text-primary: var(--ec-fg);
    --efl-text-secondary: var(--ec-fg-2);
    --efl-text-muted: var(--ec-fg-2);
    --efl-shadow-sm: var(--ec-shadow);
    --efl-shadow-md: var(--ec-shadow);
    --efl-shadow-lg: var(--ec-shadow);
    --efl-shadow-hover: var(--ec-shadow);
    --efl-blue: var(--ts-link);            /* links, hover titles, outlines; fills are set below */
    --efl-blue-light: var(--ts-tint);
    --efl-purple: var(--ts-info);
    --efl-purple-light: var(--ts-info-bg);
    --efl-green: var(--ts-success);
    --efl-green-light: var(--ts-success-bg);
    --efl-orange: var(--ts-warning);
    --efl-orange-light: var(--ts-warning-bg);
    --efl-gray: var(--ec-fg-2);
    --efl-gray-light: var(--ec-surface-2);
    --efl-radius-sm: var(--ec-btn-radius);
    --efl-radius-md: var(--ec-btn-radius);
    --efl-radius-lg: var(--ec-radius);
}

html .efl-badge.efl-badge-blue {
    color: var(--ts-on-tint);
}

/* fills drawn with a hard-coded white label (primary button, current page, "view all" hover) */
html .efl-button.efl-button-primary,
html .efl-pagination .page-item.active .page-link,
html .efl-view-all .efl-view-all-link:hover {
    border-color: var(--ec-accent);
    background: var(--ec-accent);
    color: var(--ec-accent-fg);
}

html .efl-button.efl-button-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));
}

html .efl-button,
html .efl-pagination .page-link {
    min-block-size: var(--ts-control-height, 2.75rem);
}

html :is(.efl-search-input, .efl-select):is(.efl-search-input, .efl-select) {
    min-block-size: var(--ts-control-height, 2.75rem);
    border-color: var(--ts-control);
    background-color: var(--ts-control-bg, var(--ec-surface));
}

html :is(.efl-search-input, .efl-select):is(.efl-search-input, .efl-select):focus {
    border-color: var(--ts-focus);
    box-shadow: 0 0 0 1px var(--ts-focus);
}

html :is(.efl-button, .efl-card-title a, .efl-list-item-title a, .efl-compact-item-title a, .efl-view-all-link, .efl-search-input, .efl-select, .efl-pagination .page-link):focus-visible {
    outline: var(--ts-focus-width, 2px) solid var(--ts-focus);
    outline-offset: 2px;
}

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

/* No 100vh slab: the form is as tall as its content; the other public states (loading, sent,
   already submitted, token error) keep a modest floor. */
#easyforms-app .min-h-screen {
    min-height: 16rem;
}

#easyforms-app .easyforms-submission-form {
    min-height: 0;
}

/* the "Powered by EasyForms" credit is printed at 60% of the muted colour (2.6–3.8:1); keep it, readable */
#easyforms-app .text-muted-foreground\/60 {
    color: hsl(var(--muted-foreground));
}

/* <noscript> notice (Bootstrap classes on a Bootstrap-off page) */
#easyforms-app .alert {
    margin-block: 1rem;
    padding: 0.875rem 1rem;
    border: var(--ts-alert-border-width, 1px) solid var(--ts-warning);
    border-radius: var(--ts-alert-radius, var(--ec-radius));
    background: var(--ts-warning-bg);
    color: var(--ec-fg);
}

/* ==========================================================================
   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 (design spec §9, form page): a form's gradient banner (the default header) becomes the
   title block on the board: the tint cell under the 2px ink rule, the title in Big Shoulders in
   the text colour. A banner image set by the form author stays. No shadows, square corners. */
#easyforms-app .easyforms-form-header-banner[style*="linear-gradient"] {
    border-top: var(--q-rule-w, 2px) solid var(--q-rule);
    border-radius: 0;
    background: var(--q-tint) !important;
}

#easyforms-app .easyforms-form-header-banner[style*="linear-gradient"] > .absolute {
    background: none;
}

#easyforms-app .easyforms-form-header-banner[style*="linear-gradient"] :is(h1, h2, p, span, div) {
    color: var(--ec-fg);
    text-shadow: none;
}

#easyforms-app .easyforms-form-header-banner {
    border-radius: 0 !important;
}

/* The required marker at AA on both grounds (the app's #dc2626 is 3.5:1 on the dark surface). */
#easyforms-app .easyforms-field-required {
    color: var(--q-danger);
}

#easyforms-app .easyforms-form-container {
    border-radius: 0;
    box-shadow: none;
}

#easyforms-app :is(h1, h2),
.easyforms-list-page :is(.efl-page-title, .efl-card-title) {
    font-family: var(--ec-font-display);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: 0;
}

#easyforms-app h1,
.easyforms-list-page .efl-page-title {
    font-size: clamp(2.5rem, 2.3vw + 1.9rem, 3.5rem) !important;
}

.easyforms-list-page .efl-card-title {
    font-size: 1.5rem;
}
/* @ts-kit section-6 end */