/* Dropdowns (public/dropdown.js), after the Roadmap planner: pill button + popover list. */
.dd { position: relative; display: inline-flex; }
.dd-native { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0; pointer-events: none; overflow: hidden; clip: rect(0 0 0 0); }

.dd-button {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; max-width: 240px;
  padding: 0 12px 0 16px; border: 0; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--text);
  background: var(--surface); box-shadow: var(--shadow);
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.dd-button:hover { background: var(--btn-outline-hover); }
.dd-button:focus-visible { outline: none; box-shadow: var(--ring), var(--shadow); }
.dd-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-button .ti { font-size: 14px; color: var(--muted); transition: transform 0.15s ease; flex: 0 0 auto; }
.dd.is-open .dd-button .ti { transform: rotate(180deg); }
/* A filter that is set: tonal, like the planner's active type filter. */
.dd.is-set .dd-button { background: var(--btn-secondary); color: var(--btn-secondary-label); box-shadow: inset 0 0 0 1px var(--btn-segment-active-border); }
.dd.is-set .dd-button .ti { color: var(--btn-secondary-label); }

.dd-panel {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 60;
  width: max-content; min-width: 100%; max-width: 300px;
  background: var(--surface); border-radius: 16px; padding: 6px; overflow: hidden;
  box-shadow: 0 14px 34px rgba(4, 114, 155, 0.18), 0 2px 6px rgba(44, 46, 47, 0.08);
  animation: dd-in 0.08s ease-out;
}
.dd.dd-right .dd-panel { left: auto; right: 0; }
@keyframes dd-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .dd-panel { animation: none; } .dd-button .ti { transition: none; } }

.dd-search { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; padding: 0 10px; height: 34px; border-radius: 10px; background: var(--bg); }
.dd-search .ti { color: var(--muted); font-size: 14px; }
.dd-search input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 13px; outline: none; color: var(--text); }

.dd-list { list-style: none; margin: 0; padding: 0; max-height: min(60vh, 360px); overflow-y: auto; display: flex; flex-direction: column; gap: 1px; }
.dd-group { padding: 10px 10px 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); }
.dd-option { display: flex; align-items: center; gap: 8px; padding: 7px 14px 7px 10px; border-radius: 10px; font-size: 14px; cursor: pointer; white-space: nowrap; }
.dd-option.is-active { background: var(--primary-soft); }
.dd-option[aria-disabled="true"] { opacity: 0.45; cursor: default; }
.dd-option[hidden], .dd-group[hidden] { display: none; }
.dd-check { width: 16px; flex: 0 0 16px; display: inline-flex; color: var(--primary-dark); }
.dd-check .ti { font-size: 15px; visibility: hidden; }
.dd-option.is-selected .dd-check .ti { visibility: visible; }
.dd-option.is-selected .dd-label { font-weight: 700; color: var(--primary-dark); }

/* Owner avatars (partials/avatar.ejs) */
.ch-av { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; box-shadow: 0 0 0 2px var(--surface); }
.ch-av-sm { width: 20px; height: 20px; }
.ch-av-fallback { display: inline-grid; place-items: center; background: var(--primary-dark); color: #fff; font-size: 11px; font-weight: 700; }
.ch-av-sm.ch-av-fallback { font-size: 9px; }
.ch-owner { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; }
.ch-owner-inline { display: inline-flex; align-items: center; gap: 6px; vertical-align: -5px; }
.ch-row { grid-template-columns: 100px minmax(0, 1fr) auto 64px; }

/* Options with an explanation (<option data-hint>): label on top, hint below, wrapped. */
.dd-panel:has(.has-hint) { width: 340px; max-width: calc(100vw - 32px); }
.dd-option.has-hint { align-items: flex-start; white-space: normal; }
.dd-option.has-hint .dd-check { margin-top: 2px; }
.dd-hint { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; line-height: 1.35; color: var(--muted, #6b7280); }
.dd-option.is-selected .dd-hint { font-weight: 400; color: var(--muted, #6b7280); }

/* Person options (data-person / data-icon): avatar in the list and in the pill */
.dd-av { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; display: inline-grid; place-items: center; }
.dd-av-fallback { background: var(--primary-dark); color: #fff; font-size: 9px; font-weight: 700; }
.dd-av-icon { background: var(--bg); color: var(--muted); }
.dd-av-icon .ti { font-size: 13px; }
.dd-button .dd-av { width: 22px; height: 22px; margin-left: -8px; }
.dd-button .dd-av-fallback { font-size: 9px; }
.dd-option .dd-av { margin-right: 2px; }