/**
 * @file select-field.css
 * @author Jouni Miikki
 * SPDX-License-Identifier: MIT
 * @description A drop-down: the browser's select in an ink frame on the page ground, its words in the
 *   showroom face at 600, as wide as its place; the frame turns coral while it has the focus. The look
 *   most Settings & Controls tabs already draw (the selects of the agents, ai, apps, companies, data
 *   wallet, email, mcp, memory, notifications, skills and workflows tabs), taken as the one look for
 *   this kind (UI consolidation phase 5). The frame and the corner read the shape tokens.
 *   Drawn as markup: <select class="select-field">…</select>.
 *   NOTE: this file must be linked in spa.html.
 * @version-history
 *   v1.3.0 — 2026-09-27 — .select-field--line (Select line): the old app catalogue's detail choice;
 *     additive, appcat parity (sections-b).
 *   v1.2.0 — 2026-09-26 — .select-field--attention (Select attention), main's .inbox-bc-audience--on;
 *     fix pass.
 *   v1.1.0 — 2026-09-26 — Drawn by components/Select.js (options as data); the fit and refused cuts
 *     (component plan C5).
 *   v1.0.0 — 2026-09-25 — Initial, with the values the selects of those tabs draw.
 */

.select-field {
  width: 100%; box-sizing: border-box;
  border: var(--shape-frame) solid var(--shape-field-colour); border-radius: var(--shape-corner-control);
  background: var(--bg); color: var(--text);
  padding: .45rem 0;
  font-family: var(--font-showroom-body); font-size: 1rem; font-weight: 600;
  cursor: pointer; outline: none;
}
.select-field:focus { border-color: var(--accent); }
.select-field:disabled { cursor: not-allowed; }
/* Fit: as wide as its words, beside a label or in a line (formerly .mem-vis-select, .pf-or-select--sm).
   Refused: the frame in the danger colour. Both drawn by components/Select.js. */
.select-field--fit { width: auto; min-width: 9rem; }
.select-field--invalid { border-color: var(--danger-fg); }
/* Attention: a choice that widens what an act reaches, while it is set: the coral frame on the pale
   coral ground (Select attention; main's .inbox-bc-audience--on, the operator's broadcast audience). */
.select-field--attention { border-color: var(--accent); background: var(--accent-subtle); }
/* Line (Select line, appcat sections-b): the old app catalogue's detail choice, select.modal-input: no
   frame, the ink line under it, 10px 32px 10px 14px inside, bold .88rem, a small grey arrow drawn from
   two gradients so it takes the theme's grey (the same values as .og-fields--plain's choice), at most
   340px wide (the skill picker); with fit, as wide as its words and at least 150px (.vis-geo-select). */
.select-field.select-field--line {
  appearance: none; -webkit-appearance: none; width: 100%; max-width: 340px; box-sizing: border-box; margin: 0;
  padding: 10px 32px 10px 14px; border: 0; border-bottom: var(--shape-frame-heavy) solid var(--shape-field-colour);
  background-color: transparent; color: var(--text); font-family: var(--font-body); font-size: .88rem; font-weight: var(--weight-bold); line-height: normal;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-dim) 50%), linear-gradient(135deg, var(--text-dim) 50%, transparent 50%);
  background-position: right 16px center, right 12px center; background-size: 4px 4px, 4px 4px; background-repeat: no-repeat;
}
.select-field.select-field--line:focus { border-bottom-color: var(--accent); outline: none; }
.select-field.select-field--line.select-field--fit { width: auto; min-width: 150px; }
.select-field--line option { background: var(--card-bg); color: var(--text); }