/* Shared form presentation. Native controls retain validation, form ownership,
   keyboard handling and platform pickers where base-select is unavailable. */
:root {
  --control-height:44px;
  --control-radius:var(--inf-radius-md);
  --control-ring:0 0 0 3px var(--ui-accent-subtle);
  --control-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' stroke='%23454B54' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

:is(#settings-fields,#models-dialog,#catalog-view,#routing-library,#inspector-content,#access-form,.trace-run-picker,.header-status)
:is(input[type=number],input[type=search],input[type=password],textarea,select:not([hidden])) {
  min-width:0;
  height:var(--control-height);
  min-height:var(--control-height);
  padding:10px 12px;
  border:1px solid var(--ui-border);
  border-radius:var(--control-radius);
  background-color:var(--ui-surface);
  color:var(--ui-text);
  font-size:14px;
  font-weight:400;
  line-height:1.5;
  box-shadow:none;
  outline:none;
  transition:border-color var(--inf-dur-fast),box-shadow var(--inf-dur-fast),background-color var(--inf-dur-fast);

  &:hover:not(:disabled) { border-color:var(--ui-muted); }
  &:focus { border-color:var(--inf-action); box-shadow:var(--control-ring); }
  &:focus-visible { outline:2px solid var(--inf-focus-ring); outline-offset:2px; box-shadow:0 0 0 2px var(--inf-focus-ring-halo); }
  &:disabled { cursor:not-allowed; color:var(--ui-muted); background-color:var(--ui-surface-subtle); border-color:var(--ui-divider); box-shadow:none; opacity:1; }
  &::placeholder { color:var(--ui-muted); opacity:1; }
  &:user-invalid { border-color:var(--inf-danger); }
  &:is(select) { background-image:var(--control-chevron); background-repeat:no-repeat; background-position:right 12px center; background-size:16px; padding-right:36px; }
}

/* Keep single-line choices compact, with a consistent trailing affordance. */
body select:not([hidden]) {
  appearance:none;
  background-image:var(--control-chevron);
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:16px;
  text-overflow:ellipsis;
  white-space:nowrap;
  cursor:pointer;
}
body .header-status #language-select { --control-height:40px; width:108px; border-color:var(--ui-divider); }
#models-dialog #model-search { font-size:16px; padding-left:42px; }
.model-search-field>span { top:50%; transform:translateY(-50%); pointer-events:none; }
.settings-panel #settings-fields textarea { height:auto; min-height:88px; padding:12px; resize:vertical; line-height:1.65; }
#settings-fields #system { min-height:128px; }
#settings-fields input[type=number] { appearance:textfield; font-variant-numeric:tabular-nums; }
#settings-fields input[type=number]::-webkit-inner-spin-button,
#settings-fields input[type=number]::-webkit-outer-spin-button { appearance:none; margin:0; }
#settings-fields .temperature-field input[type=number] { --control-height:36px; width:68px; padding:6px 10px; text-align:center; }
.settings-panel #settings-fields { margin:0 -4px; padding:0 4px; scroll-padding-block:8px; }
.settings-panel .field-grid label { align-items:flex-start; text-align:left; }
.settings-panel .field>label { gap:8px; margin-bottom:8px; }
.settings-panel .field-grid label { min-height:44px; gap:2px; justify-content:flex-start; }
.settings-panel .field-note { margin-top:8px; }

/* One quiet track with a clearly raised selection, rather than three outlines. */
.settings-panel .strategy-group { grid-template-columns:1fr 1.15fr 1fr; padding:4px; gap:2px; background:var(--ui-surface-selected); }
.settings-panel .strategy { min-width:0; min-height:36px; padding:7px 2px; color:var(--ui-muted); font-size:14px; font-weight:500; white-space:nowrap; }
.settings-panel .strategy:hover:not(:disabled):not(.active) { color:var(--ui-text); background:var(--ui-surface-hover); }
.settings-panel .strategy.active { color:var(--inf-action); background:var(--ui-surface); box-shadow:var(--inf-shadow-neutral-sm); }
.settings-panel .strategy:disabled { cursor:not-allowed; box-shadow:none; }
.settings-panel .strategy:disabled.active { color:var(--ui-muted); }

/* The track is 40×24; its label supplies a comfortable full-row hit target. */
.settings-panel .toggle-row { position:relative; min-height:44px; margin:0 0 12px; gap:12px; }
.settings-panel .toggle-row label { flex:1; align-self:stretch; display:flex; align-items:center; cursor:pointer; line-height:1.5; padding-right:52px; }
.settings-panel .toggle-row input[role=switch] { position:absolute; right:0; appearance:none; width:40px; height:24px; border:0; border-radius:var(--inf-radius-full); background:var(--ui-border); margin:0; cursor:pointer; transition:background-color var(--inf-dur-fast); }
.settings-panel .toggle-row input[role=switch]::before { width:20px; height:20px; top:2px; left:2px; background:var(--ui-surface); box-shadow:0 1px 2px rgb(0 0 0 / 12%); transition:transform var(--inf-dur-base) var(--inf-ease-standard); }
.settings-panel .toggle-row input[role=switch]:checked { background:var(--inf-action); }
.settings-panel .toggle-row input[role=switch]:checked::before { transform:translateX(16px); }
.settings-panel .toggle-row input[role=switch]:disabled { background:var(--inf-neutral-300); cursor:not-allowed; }
.settings-panel .toggle-row:has(input:disabled) label { color:var(--ui-muted); cursor:not-allowed; }
.provider-exclusions { padding:6px 0; }
.provider-exclusions label { min-height:40px; padding:8px; gap:10px; border-radius:var(--inf-radius-sm); }
.provider-exclusions label:hover { background:var(--ui-surface-hover); }
.provider-exclusions label:has(:checked) { background:var(--ui-accent-subtle); }
.provider-exclusions input[type=checkbox] { width:16px; height:16px; flex-shrink:0; margin:0; }
.settings-panel .provider-exclusions label>span { font-size:13px; }

/* A generous slider hit area; the visual rail stays light and precise. */
#settings-fields #temperature-slider { appearance:none; height:28px; padding:0; margin:0; background:transparent; border:0; cursor:pointer; }
#temperature-slider::-webkit-slider-runnable-track { height:4px; border-radius:var(--inf-radius-full); background:linear-gradient(to right,var(--inf-action) var(--range-progress,35%),var(--ui-divider) var(--range-progress,35%)); }
#temperature-slider::-webkit-slider-thumb { appearance:none; width:18px; height:18px; margin-top:-7px; border:2px solid var(--inf-action); border-radius:50%; background:var(--ui-surface); box-shadow:0 1px 3px rgb(0 0 0 / 12%); }
#temperature-slider::-moz-range-track { height:4px; border-radius:var(--inf-radius-full); background:var(--ui-divider); }
#temperature-slider::-moz-range-progress { height:4px; border-radius:var(--inf-radius-full); background:var(--inf-action); }
#temperature-slider::-moz-range-thumb { width:14px; height:14px; border:2px solid var(--inf-action); border-radius:50%; background:var(--ui-surface); }
#temperature-slider:disabled { opacity:.5; cursor:not-allowed; }
.settings-panel .range-labels { margin-top:0; }

/* Search and reasoning share the same compact selection treatment. */
.composer-action { transition:background-color var(--inf-dur-fast),color var(--inf-dur-fast),box-shadow var(--inf-dur-fast); }
#reasoning-button[aria-expanded=true] { background:var(--ui-accent-subtle); color:var(--inf-action); }
#reasoning-button>span:last-child { transition:transform var(--inf-dur-fast); }
#reasoning-button[aria-expanded=true]>span:last-child { transform:rotate(180deg); }
.reasoning-option { padding:12px; gap:16px; border-radius:var(--inf-radius-sm); }
.reasoning-option[aria-selected=true], .model-option.selected { background:var(--ui-accent-subtle); }
.reasoning-option[aria-selected=true] strong { color:var(--inf-action); font-weight:600; }
.reasoning-option:hover:not([aria-selected=true]), .model-option:hover:not(.selected) { background:var(--ui-surface-hover); }
.reasoning-option:focus-visible, .model-option:focus-visible { outline-offset:-2px; box-shadow:none; }
.model-option.selected { border-color:transparent; }
.model-option>span:first-child { min-width:0; }
.model-option-meta { flex-shrink:0; }

/* Progressive enhancement: styled native picker, without replacing select events.
   The browser still owns selection, type-ahead, dismissal and viewport fallback. */
@supports (appearance:base-select) {
  body select:not([hidden]), select::picker(select) { appearance:base-select; }
  select::picker-icon { display:none; }
  select:open { border-color:var(--inf-action); }
  select::picker(select) {
    padding:6px;
    margin-block:6px;
    border:1px solid var(--ui-divider);
    border-radius:var(--inf-radius-md);
    background:var(--ui-surface);
    color:var(--ui-text);
    box-shadow:var(--inf-shadow-neutral-md);
    max-height:min(360px,60dvh);
    max-width:calc(100vw - 24px);
    width:anchor-size(width);
    min-width:0;
    overflow-y:auto;
    overscroll-behavior:contain;
  }
  #language-select::picker(select) { width:max-content; min-width:anchor-size(width); }
  select option {
    position:relative;
    display:flex;
    align-items:center;
    min-height:40px;
    padding:10px 36px 10px 12px;
    border:0;
    border-radius:var(--inf-radius-sm);
    background:transparent;
    color:var(--ui-text);
    font:14px/1.5 var(--ui-font);
    white-space:normal;
    overflow-wrap:anywhere;
    cursor:pointer;
  }
  select option:checked { background:var(--ui-accent-subtle); color:var(--inf-action); font-weight:500; }
  select option:hover:not(:disabled):not(:checked) { background:var(--ui-surface-hover); }
  select option:focus-visible { outline:2px solid var(--inf-focus-ring); outline-offset:-2px; }
  select option::checkmark { position:absolute; right:12px; color:var(--inf-action); font-size:14px; }
  select option:disabled { color:var(--ui-muted); cursor:not-allowed; }
}

@media(max-width:880px) {
  body .header-status #language-select { --control-height:36px; width:96px; padding-left:10px; padding-right:28px; background-position:right 8px center; font-size:13px; }
}
@media(pointer:coarse) {
  #settings-fields :is(input[type=number],input[type=search],select,textarea) { font-size:16px; }
  select option { min-height:44px; }
}
@media(forced-colors:active) {
  body select:not([hidden]) { appearance:auto; background-image:none; }
  select::picker(select) { appearance:auto; }
  .settings-panel .toggle-row input[role=switch], #temperature-slider::-webkit-slider-thumb { border:1px solid ButtonText; }
  .settings-panel .toggle-row input[role=switch]:checked { background:Highlight; }
}