/* The photo step's choosing tools (app-review-select-menu.js, review/photo_picker.html quick_select): Auto is the one primary
   button, Select the one secondary beside it, and its menu holds the one-shot choices. The menu is a popover under its button
   from 600 px up and a sheet from the bottom below, the rows 44 px tall for a finger. A choice never stays lit. */

.teaser-quick-select .teaser-select-auto { background: var(--gold); border-color: var(--gold-deep, var(--gold)); color: #0b0b0f; font-weight: 700; }
.teaser-quick-select .teaser-select-menu-btn { border-color: var(--gold); color: var(--gold); }
.teaser-quick-select .teaser-select-menu-btn[aria-expanded="true"] { background: rgba(240, 177, 85, .16); }
.teaser-select-menu-btn .select-chevron { width: 12px; height: 12px; flex: none; transition: transform .15s ease; }
.teaser-select-menu-btn[aria-expanded="true"] .select-chevron { transform: rotate(180deg); }   /* a menu that is open points up: two states, two shapes */

dialog.select-menu { position: fixed; margin: 0; padding: 6px; min-width: 230px; max-width: calc(100vw - 16px); overflow: auto;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: 0 12px 36px rgba(0, 0, 0, .35); }
dialog.select-menu::backdrop { background: transparent; }
dialog.select-menu.is-popover { bottom: auto; }
/* Under 600 px: a sheet from the bottom edge over a scrim. */
dialog.select-menu:not(.is-popover) { inset: auto 0 0 0; width: 100%; max-width: none; padding: 8px 12px calc(14px + env(safe-area-inset-bottom, 0px));
  border-width: 1px 0 0; border-radius: 18px 18px 0 0; }
dialog.select-menu:not(.is-popover)::backdrop { background: rgba(0, 0, 0, .45); }

dialog.select-menu .select-item { display: flex; align-items: center; gap: 12px; width: 100%; min-width: 0; min-height: 44px; height: auto; padding: 8px 10px;
  border: 0; border-radius: 8px; background: none; color: inherit; font: inherit; font-size: 1rem; text-align: start; cursor: pointer; }
dialog.select-menu .select-item svg { width: 22px; height: 22px; flex: none; color: var(--gold); }
dialog.select-menu .select-item[hidden] { display: none; }
dialog.select-menu .select-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
@media (hover: hover) { dialog.select-menu .select-item:hover { background: var(--surface-2); } }
dialog.select-menu .select-item:active { transform: none; }
/* The other picks come last, under a line: it changes the choice, where the rest choose by what a photo shows. */
dialog.select-menu .select-item.review-dice { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; }