/**
 * Studio community kit · ext/easyforms.css · EasyForms (com_easyforms), contract §5.9
 *
 * Loaded by PageContext as `template.mimeo.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) */
/* Mimeo (design spec §9.7, the form sheet): one paper card, at most 720px and centred, 2px
   corners, no soft shadows. A form's gradient banner (the default header) becomes the card's
   head inside its padding: the 2px ink rule, then the title in misregistered Zilla 40 with no
   drop shadow and no fixed banner height. A banner image set by the form author stays. */
#easyforms-app .easyforms-form-container {
    max-inline-size: 45rem;
    margin-inline: auto;
    padding: 1.25rem;
    border: 1px solid var(--ec-border);
    border-radius: 2px;
    box-shadow: none;
}

@media (min-width: 48rem) {
    #easyforms-app .easyforms-form-container {
        padding: 2.5rem;
    }
}

/* Its inline margins pull it out by the container padding: 0 keeps it inside the card. */
#easyforms-app .easyforms-form-header-banner[style*="linear-gradient"] {
    --ef-containerPadding: 0px;
    block-size: auto;
    margin-block-end: var(--mm-s-6);
    border-top: 2px solid var(--mm-rule-strong);
    border-radius: 0 !important;
    background: transparent !important;
}

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

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

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

#easyforms-app .easyforms-form-header-banner[style*="linear-gradient"] p {
    color: var(--ec-fg-2);
    font-size: 1.0625rem;
    line-height: 1.5;
}

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

#easyforms-app .easyforms-form-header-banner :is(h1, h2) {
    margin: 0 0 var(--mm-s-3);
    font-size: clamp(2rem, 1.6rem + 1.2vw, 2.5rem);
    filter: none;
}

#easyforms-app .easyforms-form-header-banner[style*="linear-gradient"] :is(h1, h2) {
    text-shadow: 0.04em 0.03em 0 var(--mm-misreg);
}

#easyforms-app .easyforms-form-container :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]), select) {
    min-block-size: 3.25rem;
}

#easyforms-app .easyforms-form-container button:is([type="submit"], :not([type])) {
    min-block-size: 3rem;
}

#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.01em;
}

.easyforms-list-page .efl-page-title {
    font-size: clamp(2.25rem, 1.4rem + 2.8vw, 4rem);
    text-shadow: 0.04em 0.03em 0 var(--mm-misreg);
}

.easyforms-list-page .efl-card-title {
    font-size: 1.5rem;
}

/* The list page head is the zine head on the container edge: the 2px ink rule, 18px, the display
   H1 and a 17/1.55 lede, left-aligned; the misprint shadow stays with the CTAs (§4.5). */
.easyforms-list-page {
    --efl-shadow-sm: none;
    --efl-shadow-md: none;
    --efl-shadow-lg: none;
    padding-inline: 0;
    padding-block-start: 0;
}

.easyforms-list-page .efl-page-header {
    padding-block-start: 1.125rem;
    border-block-start: 2px solid var(--mm-rule-strong);
    text-align: start;
}

.easyforms-list-page .efl-header-content {
    max-inline-size: none;
    margin-inline: 0;
    text-align: start;
}

.easyforms-list-page .efl-page-description {
    max-inline-size: 45rem;
    margin-block-start: 0.75rem;
    font-size: 1.0625rem;
    line-height: 1.55;
}

/* Starting and sending a form are process actions: riso blue, as on the home. */
:is(#easyforms-app .easyforms-form-container button[class*="!bg-primary"], .easyforms-list-page .efl-card .efl-button-primary) {
    border-color: var(--mm-action) !important;
    background-color: var(--mm-action) !important;
    box-shadow: none !important;
    color: var(--mm-action-fg) !important;
}

/* The shadow reset above also took the app's focus ring: draw the Mimeo ring (design 2.3). */
:is(#easyforms-app .easyforms-form-container button[class*="!bg-primary"], .easyforms-list-page .efl-card .efl-button-primary):focus-visible {
    outline: var(--ts-focus-width, 3px) solid var(--ts-focus) !important;
    outline-offset: 2px !important;
}

/* The required asterisk (the only visible required cue) on the danger token: 4.5:1 in both schemes. */
#easyforms-app .easyforms-field-required {
    color: var(--ts-danger) !important;
}

.easyforms-list-page .efl-card .efl-button-primary:hover {
    background-color: var(--mm-action-hover) !important;
}
/* @ts-kit section-6 end */