/* ═══════════════════════════════════════════════════════════════════════════
   Controls — the two elements the browser was still drawing itself.

   Everything else on these pages is Outfit on warm neutrals with hairline
   borders and a 12px radius. A <select> and an <input type="file"> ignored all
   of it: the select kept the operating system's arrow (a different shape and a
   different metal on every platform), and the file input kept the OS button,
   which on a Polish Chrome reads "Wybierz plik" in a font we never chose and on
   Safari is a rounded grey capsule of a different height entirely.

   Loaded last on purpose. `.form-group input` and `input[type="file"]` have
   identical specificity (0,1,1), so source order is the only thing that decides
   which one wins — see base.html.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Icons ──────────────────────────────────────────────────────────────────
   The drawings are files in app/static/icons/; app/core/icons.py inlines them.
   `currentColor` is the whole point: one rule here covers light, dark and
   high-contrast because the icon is simply the colour of the text beside it. */
.icon {
    display: inline-block;
    flex: none;
    vertical-align: -0.15em;  /* optical baseline for a 24-grid glyph next to Outfit */
}

/* A label and its icon, spaced once instead of by a space character. */
.icon-label {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

/* The icon carries no meaning of its own next to a heading or a number — it is
   a marker for the eye. Muting it keeps the text the thing you read first. */
.icon--muted {
    color: var(--text-muted);
}

.icon--accent {
    color: var(--primary-color);
}

/* ── Select ─────────────────────────────────────────────────────────────────
   The chevron is a background image rather than a pseudo-element because a
   <select> cannot host one: it is a replaced element, and ::after is dropped by
   every engine. A data URI keeps it request-free.

   It cannot be currentColor, so each theme states its own — three declarations,
   which is the honest cost of not wrapping all eight selects in extra markup.

   The shape is app/static/icons/chevron-down.svg, re-encoded here by hand. Two
   things differ from that file on purpose: the colour is a literal (a data URI
   inherits nothing), and the stroke is heavier — 2, and 2.5 in high-contrast —
   because at the size this renders, the 1.75 the icon set uses reads as a hairline
   against a filled field. Change the path in both places or in neither. */
:root {
    --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%237A7265' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E");
}

[data-theme="dark"] {
    --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23B8AFA0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E");
}

[data-theme="high-contrast"] {
    --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E");
}

select {
    appearance: none;
    -webkit-appearance: none;
    background-image: var(--select-chevron);
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
    background-size: 1.15em;
    color: var(--text-color);
    font-family: inherit;
    cursor: pointer;
    /* Room for the chevron, so a long option never runs under it. */
    padding-right: 2.4rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* The gutter above is the only declaration of padding-right for any select in
   this project. Six other rules give a select its own sizing; each states
   padding-block and padding-left so this one keeps standing.
   `tests/test_control_styles.py` enforces that — the first attempt at this was a
   list of the affected classes here, which was already missing two of them. */

/* Arabic: the chevron moves to the inline-start side (physical left). This
   file is the one place allowed to write padding-right on a select. Later
   sheets set padding-left on named selects (currency, sort); !important is
   what keeps those from parking the option text on top of the arrow. */
html.rtl select {
    background-position: left 0.7rem center;
    padding-right: 0.75rem;
    padding-left: 2.4rem !important;
}

select:hover {
    border-color: var(--text-subtle);
}

select:focus-visible {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: var(--focus-ring);
}

select:disabled {
    background-color: var(--gray-100);
    color: var(--text-subtle);
    cursor: not-allowed;
    opacity: 1;  /* Safari fades disabled selects to unreadable on its own */
}

/* The dropdown list itself is drawn by the OS and cannot be styled. Setting the
   colours explicitly at least stops a dark-theme page from opening a white list
   of white-on-white options on Linux/Chrome. */
select option {
    background-color: var(--surface-color);
    color: var(--text-color);
}

/* ── File input ─────────────────────────────────────────────────────────────
   Styled through ::file-selector-button, which keeps the real <input> — so the
   native picker, the keyboard focus order, the label association and the
   filename readout all continue to work. The usual alternative (hide the input,
   style a <label>) throws away focus behaviour and needs JavaScript to echo the
   chosen filename.

   KNOWN LIMITATION: the button's *text* is not ours. "Choose File" /
   "Wybierz plik", and the "No file chosen" beside it, come from the browser and
   follow the browser's language, not the page's. A visitor reading Melverum in
   Polish on an English-locale browser gets an English control. There is no CSS
   for this — ::file-selector-button takes no `content` — so fixing it means the
   hidden-input-plus-label rewrite above, with the JavaScript that implies. This
   styles the button; it does not translate it. */
input[type="file"] {
    width: 100%;
    padding: 0.5rem;
    border: 1px dashed var(--hairline);
    border-radius: var(--radius);
    background-color: var(--plate-bg);
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.9rem;
    line-height: 1.6;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

input[type="file"]:hover {
    border-color: var(--primary-color);
    background-color: var(--gray-100);
}

input[type="file"]:focus-visible {
    outline: none;
    border-color: var(--primary-color);
    border-style: solid;
    box-shadow: var(--focus-ring);
}

input[type="file"]::file-selector-button {
    margin-right: 0.85rem;
    padding: 0.5rem 1.1rem;
    border: 0;
    border-radius: 999px;
    background-color: var(--pill-bg);
    color: var(--pill-text);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

input[type="file"]:hover::file-selector-button {
    background-color: var(--pill-bg-hover);
}

[data-theme="high-contrast"] input[type="file"] {
    border-width: var(--border-width);
    border-color: var(--gray-200);
}

/* ── Reduced motion ─────────────────────────────────────────────────────────
   The transitions above are 150ms colour fades, but a stated preference is a
   stated preference. */
@media (prefers-reduced-motion: reduce) {
    select,
    input[type="file"],
    input[type="file"]::file-selector-button {
        transition: none;
    }
}