/* Dropdown (src/ui/dropdown.js): square, ink outline, cream list with a hard shadow, like a tiny window */
.dd { position: relative; width: 100%; }
.dd-btn {
  width: 100%; height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 10px;
  border: var(--b); background: var(--field); color: var(--ink); font-size: 15px; text-align: left;
}
.dd-btn:hover { background: var(--hover); }
.dd.open .dd-btn { background: var(--accent-2); }
.dd-val { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-btn svg { width: 14px; height: 14px; flex: none; transition: transform .1s; }
.dd.open .dd-btn svg { transform: rotate(180deg); }

.dd-list {
  position: fixed; z-index: 200; margin: 0; padding: 4px 0; list-style: none;
  border: var(--b); background: var(--surface); box-shadow: var(--sh); max-height: 280px; overflow-y: auto; outline: none;
}
.dd-list[hidden] { display: none; }
.dd-group {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--mute);
  padding: 8px 12px 2px; border-top: 1px dashed var(--rule);
}
.dd-group:first-child { border-top: none; padding-top: 4px; }
.dd-opt { padding: 7px 12px 7px 28px; font-size: 14px; cursor: pointer; position: relative; }
.dd-opt.on { background: var(--hover); }
.dd-opt[aria-selected="true"] { font-weight: 700; }
.dd-opt[aria-selected="true"]::before { content: ""; position: absolute; left: 10px; top: 50%; width: 9px; height: 9px; margin-top: -5px; background: var(--accent); border: 2px solid var(--outline); }
.dd-opt.dd-new { border-top: 1px dashed var(--rule); margin-top: 4px; font-weight: 700; }
.dd-list:focus-visible .dd-opt.on { outline: 2px dashed var(--ink); outline-offset: -3px; }