/**
 * Studio community kit · ext/easyforms.css · EasyForms (com_easyforms), contract §5.9
 *
 * Loaded by PageContext as `template.vesper.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) */
/* Vesper form page (§9.7): one centred 45rem column. A form on the default gradient header opens
   with the page head (H1 56/60, lede, the required note) and its fields sit in a surface card with the
   bubble corner (padding 32, 20 on phones); a banner image set by the form author stays a framed banner.
   Type follows the site floor: labels 16/700, help 15, choices 17 on 44px rows, fields 48px. */
#easyforms-app {
    font-stretch: var(--vs-disp-stretch);
}

#easyforms-app .easyforms-submission-form {
    --ef-fontSize: 1.0625rem !important;
    --ef-labelWeight: 700 !important;
    --ef-inputHeight: 3rem !important;
    --ef-containerPadding: 2rem !important;
    --ef-containerPaddingMobile: 1.25rem !important;
}

#easyforms-app .easyforms-submission-form > [class~="container"] {
    padding-inline: 0;
}

#easyforms-app .easyforms-form-container.easyforms-form-container {
    --vs-ef-pad: 2rem;
    max-inline-size: 45rem;
    border-radius: var(--vs-r-bubble);
}

#easyforms-app .easyforms-form-container:has(> .easyforms-form-header-banner[style*="linear-gradient"]) {
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
}

#easyforms-app .easyforms-form-header-banner[style*="linear-gradient"] {
    block-size: auto;
    margin: 0 0 2rem !important;
    overflow: visible;
    border-radius: 0 !important;
    background: none !important;
}

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

#easyforms-app .easyforms-form-header-banner[style*="linear-gradient"] > .relative {
    display: block;
    padding: 0;
}

#easyforms-app .easyforms-form-header-banner[style*="linear-gradient"] :is(h1, p) {
    max-inline-size: 42rem;
    margin: 0;
    color: var(--ec-fg-2);
    font-size: 1.25rem;
    line-height: 1.5;
    filter: none;
    text-wrap: pretty;
}

#easyforms-app .easyforms-form-header-banner[style*="linear-gradient"] h1 {
    max-inline-size: none;
    margin-block-end: 1rem;
    color: var(--ec-fg);
    font-size: var(--vs-t-h1-page);
    line-height: 1.07;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

#easyforms-app .easyforms-form-header-banner[style*="linear-gradient"] p + p {
    margin-block-start: 1rem;
    font-size: 0.9375rem;
}

#easyforms-app .easyforms-form-header-banner[style*="linear-gradient"] p + p > span {
    color: var(--ts-danger);
}

#easyforms-app .easyforms-form-container:has(> .easyforms-form-header-banner[style*="linear-gradient"]) > :not(.easyforms-form-header-banner) {
    margin: 0;
    padding: 1.5rem var(--vs-ef-pad) 0;
    border: 0 solid var(--ec-border);
    border-inline-width: 1px;
    background: var(--ec-surface);
}

#easyforms-app .easyforms-form-container > .easyforms-form-header-banner + :not(.easyforms-form-header-banner) {
    padding-block-start: 2rem;
    border-block-start-width: 1px;
    border-start-start-radius: var(--vs-r-tail);
    border-start-end-radius: var(--ec-radius);
}

#easyforms-app .easyforms-form-container:has(> .easyforms-form-header-banner[style*="linear-gradient"]) > :last-child {
    padding-block-end: 2rem;
    border-block-end-width: 1px;
    border-end-start-radius: var(--ec-radius);
    border-end-end-radius: var(--ec-radius);
}

#easyforms-app .easyforms-form-container:has(> .easyforms-form-header-banner[style*="linear-gradient"]) > [class~="border-t"] {
    background: linear-gradient(var(--ec-border), var(--ec-border)) var(--vs-ef-pad) 0 / calc(100% - 2 * var(--vs-ef-pad)) 1px no-repeat, var(--ec-surface);
}

@media (max-width: 47.99rem) {
    #easyforms-app .easyforms-form-container.easyforms-form-container {
        --vs-ef-pad: 1.25rem;
    }

    #easyforms-app .easyforms-form-container button[class~="!bg-primary"] {
        flex: 1;
    }

    #easyforms-app .easyforms-form-container > [class~="border-t"] > div:empty {
        display: none;
    }
}

/* Section titles M 24/30; a lone section named like the form repeats the H1 (template script marks it). */
#easyforms-app .easyforms-form-container h3 {
    font-family: var(--ec-font-display);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.25;
}

#easyforms-app [data-vs-dup] {
    display: none;
}

#easyforms-app .easyforms-field-label {
    font-size: 1rem;
    line-height: 1.25;
}

#easyforms-app .easyforms-field-help {
    font-size: 0.9375rem;
}

#easyforms-app .easyforms-field-required {
    color: var(--ts-danger);
}

#easyforms-app .easyforms-option-item {
    display: flex;
    align-items: center;
    min-block-size: 2.75rem;
    margin: 0;
}

#easyforms-app .easyforms-option-input {
    flex: none;
    inline-size: 1.375rem;
    block-size: 1.375rem;
    accent-color: var(--ec-accent);
}

/* Submit is the large primary (§6.1 L: 52px, 24px padding, 18/700). */
#easyforms-app .easyforms-form-container button[class~="!bg-primary"] {
    min-block-size: 3.25rem;
    padding-inline: 1.5rem;
    border-radius: var(--ec-btn-radius);
    font: 700 1.125rem var(--ec-font-body);
}

#easyforms-app .text-muted-foreground\/60 {
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.4;
}

/* The other public states share the column and the type floor; "sent" is the busiest pane (§9.7):
   marigold, ink text and check disc, M 40/48. */
#easyforms-app .min-h-screen.bg-gradient-to-br {
    background: none;
}

#easyforms-app .min-h-screen > :is([class~="container"], [class~="w-full"]) {
    max-inline-size: 45rem;
    margin-inline: auto;
    padding-inline: 0;
}

#easyforms-app .min-h-screen :is(.text-xs, [class~="text-[11px]"]) {
    font-size: 0.9375rem;
    line-height: 1.4;
}

#easyforms-app .min-h-screen .text-sm {
    font-size: 1rem;
    line-height: 1.5;
}

#easyforms-app [class~="bg-primary/5"][class~="text-center"] {
    padding: 2.5rem 2rem;
    border: 0;
    border-radius: var(--vs-r-bubble);
    background: var(--ec-accent);
}

#easyforms-app [class~="bg-primary/5"][class~="text-center"] :is(h2, p) {
    color: var(--vs-ink);
    font-size: 1.0625rem;
    font-weight: 400;
}

#easyforms-app [class~="bg-primary/5"][class~="text-center"] h2 {
    font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

#easyforms-app [class~="bg-primary/5"] [class~="!bg-primary"] {
    background-color: var(--vs-ink) !important;
    box-shadow: none;
    color: var(--ec-accent) !important;
}

#easyforms-app :is(h1, h2),
.easyforms-list-page :is(.efl-page-title, .efl-card-title) {
    font-family: var(--ec-font-display);
    font-stretch: var(--vs-disp-stretch);
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* The forms list: cards with the speech-bubble corner. */
.easyforms-list-page .efl-card {
    border-radius: var(--vs-r-bubble);
}
/* @ts-kit section-6 end */