/*
  10-controls.css — v41.15 unified form controls (dropdowns)

  Why this file exists
  --------------------
  Before v41.15 nothing owned <select> app-wide. There were two regimes:

    * Inside a modal, 08-forms.css reset `appearance` and faked a chevron out
      of two 6px CSS gradient triangles. It rendered as a squat wedge in
      --muted on a near-white field.
    * Everywhere else (filter rails, Settings, DM Screen, bastion inline
      controls) fell through to styles.css, which redefines
      `input, select, textarea` FOUR separate times inside @layer legacy with
      four slightly different creams — #fff7df, #fff8e7, #fff9e6, #fff9e8.
      The last one wins, so most of the app was showing a near-white field
      with a native OS arrow, glaring off the parchment surface under it.

  This file is UNLAYERED and loads last, so it outranks every one of those
  legacy declarations without a single !important. (v37 lesson: !important
  inside layered CSS inverts the cascade — do not reintroduce it here.)

  Scope note: the surface token is applied to inputs and textareas too, not
  just selects. A restyled dropdown sitting next to an unchanged text input
  in the same .form-grid would read as a bug, so the whole control set moves
  together onto one token.
*/

:root {
  /* One field surface for every control. Sits between --chart (#efe4c3) and
     white: warm enough to belong to the parchment, light enough to read as
     an editable well rather than a card. */
  --field:        #f4e9cd;
  --field-hover:  #faf1da;
  --field-line:   var(--line-strong);
}

/* ==========================================================
   Shared control surface
   ========================================================== */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select,
textarea {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  min-height: 46px;
  padding: 11px 13px;
  border: 1px solid var(--field-line);
  border-radius: var(--r-s);
  background-color: var(--field);
  color: var(--ink);
  font: inherit;
  font-size: .95rem;
  line-height: 1.35;
  box-shadow: inset 0 1px 2px rgba(30, 20, 10, .07);
  transition: border-color .14s ease, box-shadow .14s ease, background-color .14s ease;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):hover,
select:hover,
textarea:hover {
  background-color: var(--field-hover);
  border-color: color-mix(in srgb, var(--brass) 55%, var(--field-line));
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus,
select:focus,
textarea:focus {
  outline: none;
  background-color: var(--field-hover);
  border-color: var(--lagoon);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lagoon) 22%, transparent);
}

textarea { min-height: 96px; line-height: 1.5; resize: vertical; }

input::placeholder,
textarea::placeholder { color: var(--faint); }

/* ==========================================================
   Dropdowns
   ==========================================================
   A real chevron, drawn as an inline SVG data URI. The stroke colour has to
   be a literal hex — a data URI cannot read a CSS custom property — so the
   three values below are hand-synced to the palette:
     rest  %236e5b40 = --muted
     hover %234a3b28 = --ink-soft
     focus %231e9e97 = --lagoon
   If those tokens move in 00-tokens.css, move these too.
*/
select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 40px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%236e5b40' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.75 6 6.25 11 1.75'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
}

select:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%234a3b28' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.75 6 6.25 11 1.75'/%3E%3C/svg%3E");
}

select:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%231e9e97' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.75 6 6.25 11 1.75'/%3E%3C/svg%3E");
}

/* 08-forms.css sets `padding: 11px 13px` on `.modal select` — a two-class
   selector, so it outranks the bare `select` rule above and closes the
   chevron gutter, letting long option text run under the arrow. Re-assert
   the gutter at matching specificity rather than reaching for !important. */
.modal select,
.field select,
.form-grid select,
.modal-form-grid select { padding-right: 40px; }

/* A list box is not a dropdown: no chevron, no reserved gutter, free height. */
.modal select[multiple],
.field select[multiple],
select[multiple],
select[size]:not([size="1"]) {
  background-image: none;
  padding-right: 13px;
  min-height: 0;
  cursor: default;
}

/* The native popup list. Some Android builds ignore this; the -webkit
   text-fill pin in 00-tokens.css keeps those legible regardless. */
select option {
  background-color: var(--field);
  color: var(--ink);
}
select option:disabled { color: var(--faint); }

input:disabled,
select:disabled,
textarea:disabled {
  opacity: .55;
  cursor: not-allowed;
  background-color: var(--chart-2);
}

/* iOS zooms the viewport when a control under 16px takes focus. On phones
   the dropdown goes to 16px; the desktop size is unchanged. */
@media (max-width: 620px) {
  select { font-size: 16px; }
}