/* Native form controls, with one visual language across the site. */
:root .button { font-size: var(--text-label); min-height: 46px; border-radius: var(--radius); }
:root .button:disabled, :root .tool-button:disabled {
  opacity: 1; color: var(--muted); background: var(--surface-soft);
  border-color: var(--line); box-shadow: none; cursor: not-allowed;
}
:root .button.is-loading:disabled { cursor: wait; }
:root {
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%235d6b62' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --menu-shadow: 0 3px 8px #24392f0a, 0 12px 30px #24392f16;
}
:root[data-theme="dark"] {
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23b6c1ba' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --menu-shadow: 0 3px 8px #0002, 0 12px 30px #0004;
}

/* Older browsers and touch screens keep their familiar system picker. */
:root textarea { scrollbar-gutter: stable; }
:root select:not([multiple]):not([size]) {
  appearance: none;
  -webkit-appearance: none;
  min-height: 46px;
  padding: 11px 42px 11px 13px;
  border-radius: var(--radius);
  background-image: var(--select-chevron);
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 16px;
  font-weight: 400;
  line-height: 1.45;
  text-overflow: ellipsis;
  cursor: pointer;
}
:root select:required:invalid { color: var(--muted); }
:root select:disabled { opacity: 1; color: var(--muted); cursor: not-allowed; }
:root select[aria-invalid="true"] { border-color: var(--error); }
:root select:focus-visible { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px #08776a20; }
:root[data-theme="dark"] select:focus-visible { box-shadow: 0 0 0 3px #87d5bf28; }
:root .status-select { width: 144px; }

/* Enhance the browser's own popup, not a second, JavaScript-managed control.
   Its top layer escapes scrolling panels; native form and keyboard behavior stay intact. */
@supports (appearance: base-select) and selector(::picker(select)) {
  @media (min-width: 761px) and (pointer: fine) {
    :root select:not([multiple]):not([size]),
    :root select:not([multiple]):not([size])::picker(select) { appearance: base-select; }
    :root select:not([multiple]):not([size]) {
      background-image: none;
      padding-inline-end: 16px;
      gap: 12px;
      align-items: center;
    }
    :root select::picker-icon {
      content: "";
      flex: 0 0 7px;
      width: 7px;
      height: 7px;
      margin: 0 1px 3px auto;
      border-right: 1.5px solid var(--muted);
      border-bottom: 1.5px solid var(--muted);
      transform: rotate(45deg);
    }
    :root select:open::picker-icon { transform: rotate(225deg); }
    :root select::picker(select) {
      margin-block: 6px;
      padding: 5px;
      border: 1px solid var(--control-border);
      border-radius: 8px;
      background: var(--paper);
      color: var(--ink);
      box-shadow: var(--menu-shadow);
      max-block-size: min(340px, 50dvh);
      max-inline-size: calc(100vw - 24px);
      overflow-y: auto;
      overscroll-behavior: contain;
      scrollbar-width: thin;
      scrollbar-color: var(--control-border) transparent;
    }
    :root select option {
      min-height: 42px;
      padding: 10px 12px;
      gap: 18px;
      border-radius: 4px;
      background: transparent;
      color: var(--ink);
      font: inherit;
      font-weight: 400;
      line-height: 1.45;
      white-space: normal;
      overflow-wrap: anywhere;
      cursor: pointer;
    }
    :root select option[value=""] { color: var(--muted); }
    :root select option:checked { background: var(--mint); color: var(--ink); font-weight: 550; }
    :root select option:is(:hover, :focus-visible) { background: var(--surface-soft); color: var(--ink); outline: none; }
    :root select option:focus-visible { box-shadow: inset 0 0 0 1px var(--control-border); }
    :root select option:disabled { color: var(--muted); cursor: not-allowed; }
    :root select option::checkmark { order: 1; margin-inline-start: auto; color: var(--brand); }
  }
}

/* Consistent, quiet disclosure indicators. No icon fonts or emoji. */
:root :is(.group-chevron, .disclosure-arrow, .followup-chevron,
  .settings-tools > summary > [aria-hidden="true"],
  .lab-extras summary > [aria-hidden="true"], .lab-about > summary > [aria-hidden="true"]) {
  display: inline-block;
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  margin: 0 4px 3px;
  font-size: 0;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: rotate(45deg);
}
:root details[open] > summary :is(.group-chevron, .disclosure-arrow, .followup-chevron),
:root :is(.settings-tools, .lab-extras details, .lab-about)[open] > summary > [aria-hidden="true"] {
  transform: rotate(225deg);
  margin-bottom: 3px;
}
:root :is(.faq-list details, .demo-information details, .baseline-list, .run-inputs,
  .request-group, .demo-calendar-upcoming, .lead-photo, .connection-details) > summary::after {
  content: "";
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  margin: 0 4px 3px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: rotate(45deg);
}
:root :is(.faq-list details, .demo-information details, .baseline-list, .run-inputs,
  .request-group, .demo-calendar-upcoming, .lead-photo, .connection-details)[open] > summary::after { transform: rotate(225deg); }
/* Turn the indicator with the closing panel, rather than after it disappears. */
:root details[data-motion-state="closing"] > summary::after,
:root details[data-motion-state="closing"] > summary :is(.group-chevron, .disclosure-arrow, .followup-chevron),
:root :is(.settings-tools, .lab-extras details, .lab-about)[data-motion-state="closing"] > summary > [aria-hidden="true"] {
  transform: rotate(45deg);
  margin-bottom: 3px;
}
:root :is(.demo-information details, .demo-calendar-upcoming, .lead-photo) > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
:root details > summary { min-height: 44px; touch-action: manipulation; }
:root details > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: -3px; border-radius: 4px; }
:root :is(.settings-tools, .lab-extras details, .lab-about, .followup-editor,
  .demo-calendar-upcoming, .lead-photo, .baseline-list, .run-inputs) > summary:hover { color: var(--brand); }

@media (max-width: 760px), (pointer: coarse) {
  :root select:not([multiple]):not([size]) { font-size: 16px; min-height: 48px; }
}

@media (prefers-reduced-motion: no-preference) {
  :root select, :root summary { transition: border-color var(--motion-feedback, 160ms) ease-out, background-color var(--motion-feedback, 160ms) ease-out, color var(--motion-feedback, 160ms) ease-out, box-shadow var(--motion-feedback, 160ms) ease-out; }
  :root summary::after, :root :is(.group-chevron, .disclosure-arrow, .followup-chevron,
    .settings-tools > summary > [aria-hidden="true"], .lab-extras summary > [aria-hidden="true"],
    .lab-about > summary > [aria-hidden="true"]) { transition: transform var(--motion-duration, 220ms) var(--motion-ease, ease-out); }
  @supports (appearance: base-select) and selector(::picker(select)) {
    @media (min-width: 761px) and (pointer: fine) {
      :root select::picker-icon { transition: transform var(--motion-duration, 220ms) var(--motion-ease, ease-out); }
      :root select::picker(select) {
        opacity: 0;
        transition: opacity var(--motion-duration, 220ms) var(--motion-ease, ease-out), display var(--motion-duration, 220ms) allow-discrete, overlay var(--motion-duration, 220ms) allow-discrete;
      }
      :root select:open::picker(select) { opacity: 1; }
      @starting-style { :root select:open::picker(select) { opacity: .25; } }
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  :root select, :root select::picker-icon, :root select::picker(select),
  :root summary, :root summary::after, :root details::details-content,
  :root summary > [aria-hidden="true"] { transition: none; }
  :root details[open] > :not(summary), :root [role="tabpanel"],
  :root .website-install-selected > * { animation: none; }
}
@media (forced-colors: active) {
  :root select:not([multiple]):not([size]) { appearance: auto; background-image: none; }
  :root select::picker-icon { content: normal; border: 0; transform: none; }
  :root select::picker(select) { appearance: auto; }
  :root select:focus-visible { outline: 2px solid Highlight; }
}