/* The viewer's dropdowns and date field (viewer/select.js): closed, the app's flat control with a thin
   chevron (amber on hover and focus); open, the listbox in the panel style. The pages' own rules set
   each select's size and colours (background-color, not the background shorthand, so the chevron stays). */
select { -webkit-appearance: none; appearance: none; border-radius: 0; cursor: pointer; padding-right: 22px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8d92' stroke-width='2.4' stroke-linecap='square'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 5px center; background-size: 12px 12px; text-overflow: ellipsis; }
select:hover:not(:disabled), select:focus-visible, select[aria-expanded=true] { border-color: var(--accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e6b35a' stroke-width='2.4' stroke-linecap='square'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
select:focus { outline: none; }
select:disabled { opacity: 0.4; cursor: default; }
select option, select optgroup { background: var(--panel); color: var(--text); }       /* the native menu (touch, fallback) */

/* the listbox */
.sl-pop { position: fixed; left: 0; top: 0; z-index: 1000; min-width: 120px; max-width: min(440px, calc(100vw - 8px)); overflow-y: auto;
  overscroll-behavior: contain; padding: 3px 0; background: rgba(21, 23, 26, 0.98); border: 1px solid var(--line);
  border-top: 2px solid var(--accent); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55); outline: none;
  font: 13px/1.35 "DIN Condensed", "Futura", system-ui, sans-serif; letter-spacing: 0.02em; color: var(--text); }
.sl-pop[hidden] { display: none; }
.sl-o { position: relative; padding: 4px 12px 4px 22px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-o.act { background: rgba(230, 179, 90, 0.13); color: var(--accent); }
.sl-o[aria-selected=true]::before { content: ''; position: absolute; left: 9px; top: 0.85em; width: 5px; height: 5px; background: var(--accent); }
.sl-o[aria-disabled=true] { color: var(--dim); opacity: 0.5; cursor: default; }
.sl-d { display: block; color: var(--dim); font-size: 11px; white-space: normal; line-height: 1.3; max-width: 380px; }
.sl-o.act .sl-d { color: var(--text); opacity: 0.8; }
.sl-g { padding: 6px 12px 2px; color: var(--dim); font-size: 10px; text-transform: uppercase; letter-spacing: 0.15em; }
.sl-g:not(:first-child) { border-top: 1px solid var(--line); margin-top: 3px; }

/* the date and time field: the same flat control; the picker's glyph dim, amber on hover; the edited
   part highlighted in amber, not the system's blue */
input[type=datetime-local], input[type=date], input[type=time] { border-radius: 0; color-scheme: dark; }
input[type=datetime-local]:focus { outline: none; border-color: var(--accent); }
input[type=datetime-local]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.85; margin-left: 4px; padding: 0;
  width: 13px; height: 13px; }
input[type=datetime-local]:hover::-webkit-calendar-picker-indicator { opacity: 1;
  filter: sepia(1) saturate(4) hue-rotate(-12deg) brightness(0.95); }
input[type=datetime-local]::-webkit-datetime-edit-fields-wrapper { padding: 0; }
input[type=datetime-local]::-webkit-datetime-edit-day-field:focus, input[type=datetime-local]::-webkit-datetime-edit-month-field:focus,
input[type=datetime-local]::-webkit-datetime-edit-year-field:focus, input[type=datetime-local]::-webkit-datetime-edit-hour-field:focus,
input[type=datetime-local]::-webkit-datetime-edit-minute-field:focus { background: var(--accent); color: var(--bg); outline: none; }