/* ONE field style for every form control on SOUNDAR: public site, sign-up, onboarding, app, settings, Admin, the artist's
   demo page and the team's listening page (20 Oct 2026, Greg). Loaded by every page layout BEFORE the page's own CSS,
   so a component may still adjust a field's width or size. Every control gets it by default, by element and type:
   no class needed. It uses the app's colour tokens (light and dark) and falls back to the light ones on the public
   pages. "--soundar-field: on" is the marker tests/test_form_styles.py checks (scripts/check_forms.py).
   Focus (Greg, 20 Oct 2026): a 2px brand-orange ring with a 2px gap. The brand's deeper orange #F2511F (--signal-lo):
   3.5:1 on white, 3.2:1 on cream, 4.7:1 on the dark cards; the brighter #FF5B2E is only 2.8:1 on cream. */
:root { --focus-ring: var(--signal-lo, #F2511F); }

input:not([type]), input[type=text], input[type=email], input[type=password], input[type=search], input[type=url],
input[type=number], input[type=tel], input[type=date], input[type=time], input[type=datetime-local], input[type=month],
input[type=week], select, textarea, [role=textbox][contenteditable] {
  --soundar-field: on;
  box-sizing: border-box; font: inherit; font-size: var(--fs-body, 16px); line-height: 1.4; color: var(--text, #111114);
  background-color: var(--card, #FFFFFF); width: 100%; min-height: 48px; padding: 0 12px; margin: 0;
  border: 1px solid var(--line-strong, #CFCBC2); border-radius: var(--r-sm, 10px);
  box-shadow: inset 0 1px 2px rgba(17, 17, 20, .04);
  transition: border-color .15s ease, box-shadow .15s ease;
}
textarea { padding: 12px; resize: vertical; line-height: 1.55; min-height: 96px; }
/* A text box that holds a locked pill (the demo link in an email, v1.53.2): written like a textarea */
[role=textbox][contenteditable] { padding: 12px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; cursor: text; }
input[type=date], input[type=time], input[type=datetime-local], input[type=month], input[type=week] { padding-right: 8px; }
input[type=date]::-webkit-calendar-picker-indicator, input[type=time]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .7; }
select {
  appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355555C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 18px;
}
input::placeholder, textarea::placeholder { color: var(--faint, #6E6E76); opacity: 1; }   /* the tertiary grey */
input:hover, select:hover, textarea:hover, [role=textbox][contenteditable]:hover { border-color: var(--muted, #6B6B73); }
/* One line on focus (v1.50, Greg): the orange ring sits on the field's own border, never a second line around it */
input:focus, select:focus, textarea:focus, [role=textbox][contenteditable]:focus {
  outline: 2px solid var(--focus-ring); outline-offset: -1px; border-color: var(--focus-ring);
  box-shadow: inset 0 1px 2px rgba(17, 17, 20, .04);
}
input:disabled, select:disabled, textarea:disabled { opacity: .55; cursor: not-allowed; background-color: var(--soft, #EEEBE4); }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--down, #B3372A); }

/* Ticks, choices and sliders: the brand's colour and a comfortable size (custom ones restyle on top). */
input[type=checkbox], input[type=radio] {
  --soundar-field: on;
  accent-color: var(--signal, #FF5B2E); width: 18px; height: 18px; margin: 0; cursor: pointer; flex: none;
}
input[type=checkbox]:focus-visible, input[type=radio]:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
input[type=range] { --soundar-field: on; accent-color: var(--signal, #FF5B2E); cursor: pointer; }
input[type=range]:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
input[type=color] { --soundar-field: on; border: 1px solid var(--line-strong, #CFCBC2); border-radius: var(--r-sm, 10px);
  min-height: 40px; padding: 2px; background: var(--card, #FFFFFF); cursor: pointer; }

/* File pickers: the button looks like SOUNDAR's own. */
input[type=file] { --soundar-field: on; font: inherit; font-size: var(--fs-small, 14px); color: var(--muted, #6B6B73); max-width: 100%; }
input[type=file]::file-selector-button {
  font: inherit; font-size: var(--fs-small, 14px); font-weight: var(--fw-medium, 500); color: var(--text, #111114); background: var(--card, #FFFFFF);
  border: 1px solid var(--line-strong, #CFCBC2); border-radius: var(--r-sm, 10px); min-height: 40px; padding: 0 14px;
  margin-right: 12px; cursor: pointer;
}
input[type=file]:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* A field's own message (static/fields.js): SOUNDAR's words under the field, never the browser's bubble. */
.field-error { color: var(--down, #B3372A); font-size: var(--fs-small, 14px); line-height: 1.45; margin: 6px 0 0; }