/*
 * AyE Inline Dropdown — drop-in styles for replacing native <select> with a
 * custom <button>+popup pair. Avoids the iOS Safari bottom-sheet picker.
 *
 * Usage:
 *   <link rel="stylesheet" href="/aye-lab/shared/aye-inline-dropdown.css">
 *   <button type="button" class="aye-dd-trigger empty" data-key="q1">
 *     <span class="aye-dd-label">choose</span>
 *   </button>
 *
 * Per-page palette: override the CSS variables below in your page's <style>.
 *   :root {
 *     --aye-dd-min-width: 90px;
 *     --aye-dd-ok-border: #22c55e;
 *     --aye-dd-ok-bg: #f0fdf4;
 *     --aye-dd-ok-color: #166534;
 *   }
 *
 * Skill canonical: .claude/skills/aye-inline-dropdown/SKILL.md
 */

.aye-dd-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  appearance: none; -webkit-appearance: none;
  border: var(--aye-dd-border-width, 2px) solid var(--aye-dd-border, var(--border, #e0def0));
  border-radius: var(--aye-dd-radius, 8px);
  background: var(--aye-dd-bg, #fff);
  color: var(--aye-dd-color, var(--ink, #1a1730));
  font: 500 var(--aye-dd-font-size, 15px)/1.2 var(--aye-dd-font, 'DM Sans', sans-serif);
  padding: var(--aye-dd-padding, 5px 10px);
  margin: var(--aye-dd-margin, 0 4px);
  cursor: pointer; outline: none;
  min-width: var(--aye-dd-min-width, 100px);
  max-width: var(--aye-dd-max-width, 280px);
  transition: background .15s, color .15s, border-color .15s;
  vertical-align: baseline;
  -webkit-tap-highlight-color: transparent;
  text-align: left; white-space: nowrap;
}
.aye-dd-trigger::after {
  content: ''; display: inline-block;
  width: 0; height: 0; flex-shrink: 0; margin-left: auto;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: .55;
  transition: transform .15s;
}
.aye-dd-trigger.empty {
  color: var(--aye-dd-empty-color, var(--muted, #888));
  font-style: italic;
}
.aye-dd-trigger:focus,
.aye-dd-trigger.open {
  border-color: var(--aye-dd-focus-border, var(--violet, #593FE0));
  background: var(--aye-dd-focus-bg, rgba(89,63,224,.06));
}
.aye-dd-trigger.open::after { transform: rotate(180deg); }

/* Validation states — bumped specificity (`button.aye-dd-trigger`) so they win
   over `:focus` regardless of source order. */
button.aye-dd-trigger.ok {
  border-color: var(--aye-dd-ok-border, var(--teal, #0d9488));
  background: var(--aye-dd-ok-bg, rgba(13,148,136,.08));
  color: var(--aye-dd-ok-color, #0a8fa0);
  font-style: normal;
}
button.aye-dd-trigger.no {
  border-color: var(--aye-dd-no-border, var(--pink, #F72585));
  background: var(--aye-dd-no-bg, rgba(247,37,133,.08));
  color: var(--aye-dd-no-color, var(--pink, #F72585));
  font-style: normal;
}

/* Locked (post-evaluation, lock-on-correct, etc.) — clean visual, no chevron */
.aye-dd-trigger:disabled { cursor: default; opacity: 1; }
.aye-dd-trigger:disabled::after { opacity: 0; }

/* Popup — single shared instance per page, position:fixed so it escapes any
   overflow:hidden ancestor (phone frame, sticky chrome, etc.) */
.aye-dd-pop {
  position: fixed; z-index: 9000;
  min-width: var(--aye-dd-pop-min-width, 160px);
  max-width: var(--aye-dd-pop-max-width, 300px);
  background: #fff;
  border: 1px solid var(--border, #e0def0);
  border-radius: 12px;
  box-shadow: 0 14px 32px rgba(89,63,224,.22), 0 4px 10px rgba(0,0,0,.08);
  padding: 5px;
  display: flex; flex-direction: column; gap: 2px;
  opacity: 0;
  transform: translateY(-4px) scale(.98);
  transition: opacity .14s, transform .14s;
  pointer-events: none;
}
.aye-dd-pop.show {
  opacity: 1; transform: translateY(0) scale(1);
  pointer-events: auto;
}
.aye-dd-pop button {
  appearance: none; border: 0; background: transparent;
  text-align: left; cursor: pointer;
  padding: 11px 14px;
  border-radius: 7px;
  font: 500 14px/1.3 var(--aye-dd-font, 'DM Sans', sans-serif);
  color: var(--ink, #1a1730);
  min-height: 42px;
  transition: background .12s, color .12s;
  -webkit-tap-highlight-color: transparent;
  white-space: var(--aye-dd-pop-white-space, normal);
}
.aye-dd-pop button:hover,
.aye-dd-pop button:focus {
  background: rgba(89,63,224,.08);
  color: var(--violet, #593FE0);
  outline: none;
}
.aye-dd-pop button.selected {
  background: var(--violet, #593FE0);
  color: #fff;
  font-weight: 600;
}
.aye-dd-pop button.selected:hover {
  background: #4126C2;
  color: #fff;
}