/* dropdown.css — the app's own select control.
 *
 * The trigger is always a SINGLE <button>: its leading label or icon lives
 * inside it, not in a wrapper beside it. That matters for more than tidiness —
 * anything outside the button is dead to the pointer, and a chip whose label
 * ignored clicks was exactly the complaint this control started from. Anywhere
 * the eye reads as part of the control opens the menu.
 *
 * The menu is a single element rendered into #dropdownHost and positioned with
 * `fixed`, so it is never clipped by a card and always paints above everything
 * else. Its width and left edge are set from JS to match the trigger. It is a
 * platform menu: translucent, blurred, and rounded well past its rows. */

/* --- trigger ------------------------------------------------------------- */
.dd-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--field);
  border-radius: var(--r-md);
  background-color: var(--raised);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  letter-spacing: -.006em;
}
.dd-btn:hover { border-color: var(--field-hover); }
.dd-btn:active { transform: scale(.98); }
.dd-btn[aria-expanded="true"] {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

.dd-icon {
  flex: 0 0 auto;
  color: var(--muted);
}
.dd-value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dd-arrow {
  flex: 0 0 auto;
  color: var(--muted);
  transition: transform var(--t);
}
.dd-btn[aria-expanded="true"] .dd-arrow { transform: rotate(180deg); }

/* Full-width form field, matching .field */
.dd-field { width: 100%; height: 40px; padding: 0 12px; font-size: 14px; }
.dd-field-sm { width: 100%; height: 36px; padding: 0 11px; font-size: 13.5px; }

/* Filter chip: label and value in one clickable capsule. Chips sit in a row on
   the bare page rather than inside a form, so they take the pill shape the
   platform gives to filters and the bezelled surface of a secondary button. */
.dd-chip {
  height: 36px;
  padding: 0 14px;
  gap: 7px;
  border-radius: var(--r-pill);
  border-color: var(--line);
  font-size: 13px;
  font-weight: 500;
  max-width: 100%;
  box-shadow: var(--shadow-xs);
}
.dd-chip:hover { background-color: var(--hover); }

/* Language picker: globe and code in one clickable capsule. */
.dd-lang {
  height: 34px;
  padding: 0 10px 0 12px;
  gap: 6px;
  border-color: transparent;
  border-radius: var(--r-pill);
  background-color: var(--hover);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .01em;
}
.dd-lang:hover { border-color: var(--field); }
.dd-lang .dd-icon { color: var(--ink-3); }

/* Compact trigger for the taxonomy rows */
.dd-compact {
  height: 36px;
  min-width: 136px;
  padding: 0 10px;
  font-size: 13px;
  color: var(--ink-3);
  border-color: var(--line);
  border-radius: var(--r-sm);
}

/* --- menu ---------------------------------------------------------------- */
.dd-menu {
  position: fixed;
  z-index: 80;
  /* auto on both axes: a long option must never be silently clipped. The
     width is capped to the viewport by JS, so this rarely engages sideways. */
  overflow: auto;
  overscroll-behavior: contain;
  padding: 5px;
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border: 1px solid var(--glass-line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  animation: popIn 160ms var(--ease-out) both;
}

.dd-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 34px;
  padding: 0 9px;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--ink);
  font-size: 13.5px;
  letter-spacing: -.006em;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
}
.dd-opt + .dd-opt { margin-top: 1px; }
.dd-opt-label { flex: 1; }
/* A menu row highlights by filling with the accent, the way a platform menu
   does — the pointer and the keyboard land on exactly the same appearance. */
.dd-opt:hover { background: var(--accent); color: var(--on-accent); }
.dd-opt:focus-visible { outline: none; background: var(--accent); color: var(--on-accent); }
.dd-opt:hover .dd-check,
.dd-opt:focus-visible .dd-check { color: var(--on-accent); }
.dd-opt.on { color: var(--accent); font-weight: 600; }
.dd-opt.on:hover, .dd-opt.on:focus-visible { color: var(--on-accent); }
.dd-check { flex: 0 0 auto; color: var(--accent); }