/* ============================================================================
 * FORM CONTROLS -- the one definition, for every form on this site.
 *
 * WHY THIS FILE EXISTS. peaknetwork.se had no styled control at all: its
 * catalogue sort is a <details> menu of links, so nothing here had ever
 * needed a real <select> -- until the display-currency picker, which
 * changes state and therefore has to be a form, not a link. Styling that
 * one select inside kd-shop.css would have put the site's first control
 * definition inside a page-specific file, where the next form (checkout,
 * account details) would not find it and would grow a second copy.
 *
 * So the rule is keyed on ONE class, `.kd-form`, on the <form> element,
 * matching site_khouse/css/kd-forms.css exactly -- same selectors, same
 * tokens, same reasoning (that file's header has the longer version).
 * The two sites are separately installable packages with their own static
 * namespaces, which is why this is a sibling file rather than an import:
 * every other kd-*.css here is a per-site file for the same reason.
 *
 * OPT-IN BY CONSTRUCTION: nothing is styled until a <form> carries the
 * class, so adding this file changes no existing page.
 *
 * Everything is tokens (kd-tokens.css) -- no colour, size or radius is
 * written as a literal, so this site's theme reaches these controls the
 * same way it reaches everything else.
 * ==========================================================================*/

.kd-form input,
.kd-form select,
.kd-form textarea {
    width: 100%;
    padding: var(--kd-s-3);
    font-family: var(--kd-font-sans);
    /* 16px FLOOR, deliberately not a token. iOS Safari zooms the page
     * when a focused input's text is smaller than 16px, throwing the
     * visitor's viewport around mid-form. The token is allowed to be
     * larger; it is not allowed to be smaller. */
    font-size: max(16px, var(--kd-text-1));
    /* 44px is the accessible touch-target minimum, and the same reason
     * as above: a thumb, not a mouse. */
    min-height: 44px;
    color: var(--kd-fg);
    background: var(--kd-bg);
    border: var(--kd-border-w) solid var(--kd-border);
    border-radius: var(--kd-r-1);
    transition: border-color var(--kd-dur-fast) var(--kd-ease),
                box-shadow var(--kd-dur-fast) var(--kd-ease);
}

.kd-form textarea {
    /* A message box that is one line tall invites a one-line answer. */
    min-height: 8rem;
    resize: vertical;
}

.kd-form input:focus,
.kd-form select:focus,
.kd-form textarea:focus {
    outline: none;
    border-color: var(--kd-accent);
    box-shadow: 0 0 0 3px var(--kd-accent-ring);
}

.kd-form input:disabled,
.kd-form select:disabled,
.kd-form textarea:disabled {
    color: var(--kd-fg-muted);
    background: var(--kd-bg-alt);
    cursor: not-allowed;
}

/* ---- The select ----------------------------------------------------------
 *
 * `appearance: none` strips the platform's own control -- the grey
 * gradient capsule on macOS, the flat box on Windows -- so a dropdown
 * looks like the rest of this form rather than like whichever computer
 * the visitor happens to own.
 *
 * The chevron is an inline data: URI, not a background image file and not
 * an extra element. A file would be one more request for eleven bytes of
 * geometry, and an element would mean the template had to wrap every
 * select in a div -- which is precisely the per-template special-casing
 * this file exists to stop. `img-src 'self' data:` in the platform's CSP
 * (core/csp.py) already permits it; nothing here needs a policy change.
 *
 * currentColor in the SVG stroke is the point of using one at all: the
 * arrow follows the theme's foreground into dark mode instead of being a
 * baked-in dark grey that disappears.
 */
.kd-form select {
    appearance: none;
    -webkit-appearance: none;
    /* Room for the chevron, so a long option never runs underneath it. */
    padding-right: var(--kd-s-8);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--kd-s-4) center;
    background-size: 12px 8px;
    cursor: pointer;
}

/* ---- File inputs ---------------------------------------------------------
 *
 * The one control a browser will not let CSS reach directly: the button
 * inside a file input is drawn by the browser, and `appearance: none`
 * does not touch it. ::file-selector-button does, and is supported
 * everywhere this site targets.
 */
.kd-form input[type="file"] {
    padding: var(--kd-s-2);
    cursor: pointer;
}

.kd-form input[type="file"]::file-selector-button {
    font-family: var(--kd-font-mono);
    font-size: var(--kd-text-1);
    letter-spacing: var(--kd-track-mono);
    text-transform: uppercase;
    padding: var(--kd-s-2) var(--kd-s-4);
    margin-right: var(--kd-s-4);
    color: var(--kd-fg);
    background: var(--kd-bg-alt);
    border: var(--kd-border-w) solid var(--kd-border);
    border-radius: var(--kd-r-1);
    cursor: pointer;
    transition: border-color var(--kd-dur-fast) var(--kd-ease),
                background var(--kd-dur-fast) var(--kd-ease);
}

.kd-form input[type="file"]::file-selector-button:hover {
    background: var(--kd-bg);
    border-color: var(--kd-fg);
}

/* Checkboxes and radios are the exception to `width: 100%` above -- a
 * full-width checkbox is a stretched box, not a checkbox. */
.kd-form input[type="checkbox"],
.kd-form input[type="radio"] {
    width: auto;
    min-height: 0;
    accent-color: var(--kd-accent);
}

/* ---- Labels -------------------------------------------------------------- */

.kd-form label {
    font-family: var(--kd-font-mono);
    font-size: var(--kd-text-0);
    letter-spacing: var(--kd-track-mono);
    text-transform: uppercase;
    color: var(--kd-fg-muted);
}