/* Shared furniture for compact menus and menu-like popouts.
   Their layouts stay local; this file keeps the surface and interaction
   language consistent with the app's rounded select menu. */
:root {
  --house-menu-surface: var(--bg-secondary);
  --house-menu-border: var(--border);
  --house-menu-radius: 0.875rem;
  --house-menu-padding: 5px;
  --house-menu-item-radius: 0.5625rem;
  --house-menu-item-min-height: 34px;
  --house-menu-item-hover: var(--bg-hover);
  --house-menu-item-selected: var(--bg-tertiary);
  --house-menu-shadow: var(--canvas-popout-shadow, 0 12px 32px rgba(24, 20, 18, 0.16));
}

/* Menus, compact palettes and autocomplete results all use one app surface.
   Padding remains with the specialist palettes so their grids do not move. */
.house-select-popover[popover],
.lesson-target-popover[popover],
.sidebar-library-row-menu,
.ai-model-menu,
.ls3-sequence-menu,
.ls3-lesson-ai-response-menu,
.ls3-geoscript-search-menu,
.object-palette-popover,
.object-stroke-pattern-menu,
.object-align-menu,
.object-color-picker-popout,
#whiteboardModal .tools-dropdown-menu,
.pen-popout,
.course-sort-menu,
.course-setting-popup {
  border: 1px solid var(--house-menu-border);
  border-radius: var(--house-menu-radius);
  background: var(--house-menu-surface);
  color: var(--text-primary);
  box-shadow: var(--house-menu-shadow);
}

/* The Canvas tool drawer is visually part of its parent rail. It keeps the
   shared menu edge treatment, but its fill must remain continuous with that
   toolbar rather than taking the general menu surface colour. */
#whiteboardModal .tools-dropdown-menu {
  background: var(--input-bg);
}

/* Plain lists use the select menu's inset. Visual tool grids keep their own
   roomier padding while sharing the same outer furniture above. */
.house-select-popover[popover],
.lesson-target-popover[popover],
.sidebar-library-row-menu,
.ai-model-menu,
.ls3-sequence-menu,
.ls3-lesson-ai-response-menu,
.object-arrange-popover,
.object-stroke-pattern-menu,
.object-align-menu,
.course-sort-menu,
.course-setting-popup {
  padding: var(--house-menu-padding);
}

/* Every textual menu row has the same soft corners and interaction states. */
.house-select-option,
.lesson-target-option,
.sidebar-library-row-menu-item,
.ai-model-option,
.ls3-sequence-menu-item,
.ls3-lesson-ai-response-menu-item,
.ls3-geoscript-search-result,
.object-arrange-option,
.object-stroke-pattern-option,
.course-sort-menu button,
.course-setting-popup button {
  min-height: var(--house-menu-item-min-height);
  border-radius: var(--house-menu-item-radius);
  color: var(--text-secondary);
  transition: background-color 110ms ease, color 110ms ease, box-shadow 110ms ease;
}

.house-select-option:hover,
.house-select-option:focus-visible,
.lesson-target-option:hover,
.lesson-target-option:focus-visible,
.sidebar-library-row-menu-item:hover,
.sidebar-library-row-menu-item:focus-visible,
.ai-model-option:hover,
.ai-model-option:focus-visible,
.ls3-sequence-menu-item:hover,
.ls3-sequence-menu-item:focus-visible,
.ls3-lesson-ai-response-menu-item:hover,
.ls3-lesson-ai-response-menu-item:focus-visible,
.ls3-geoscript-search-result:hover,
.ls3-geoscript-search-result:focus-visible,
.ls3-geoscript-search-result.is-active,
.object-arrange-option:hover:not(:disabled),
.object-arrange-option:focus-visible:not(:disabled),
.object-stroke-pattern-option:hover,
.object-stroke-pattern-option:focus-visible,
.course-sort-menu button:hover,
.course-sort-menu button:focus-visible,
.course-setting-popup button:hover,
.course-setting-popup button:focus-visible {
  outline: 0;
  background: var(--house-menu-item-hover);
  color: var(--text-primary);
}

.house-select-option:focus-visible,
.lesson-target-option:focus-visible,
.sidebar-library-row-menu-item:focus-visible,
.ai-model-option:focus-visible,
.ls3-sequence-menu-item:focus-visible,
.ls3-lesson-ai-response-menu-item:focus-visible,
.ls3-geoscript-search-result:focus-visible,
.object-arrange-option:focus-visible:not(:disabled),
.object-stroke-pattern-option:focus-visible,
.course-sort-menu button:focus-visible,
.course-setting-popup button:focus-visible {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 52%, transparent);
}

.house-select-option[aria-selected="true"],
.lesson-target-option[data-current="true"],
.sidebar-course-menu-order[aria-checked="true"],
.ai-model-option[aria-checked="true"],
.ls3-sequence-menu-item[aria-checked="true"],
.object-stroke-pattern-option[aria-selected="true"],
.course-setting-popup button[aria-pressed="true"] {
  background: var(--house-menu-item-selected);
  color: var(--text-primary);
}

/* Selected rows keep one quiet accent: the tick, rather than the whole row. */
.house-select-option-check,
.sidebar-course-menu-check,
.ai-model-option-check,
.object-stroke-pattern-check {
  color: var(--color-accent);
}

@media (prefers-reduced-motion: reduce) {
  .house-select-option,
  .lesson-target-option,
  .sidebar-library-row-menu-item,
  .ai-model-option,
  .ls3-sequence-menu-item,
  .ls3-lesson-ai-response-menu-item,
  .ls3-geoscript-search-result,
  .object-arrange-option,
  .object-stroke-pattern-option,
  .course-sort-menu button,
  .course-setting-popup button {
    transition: none;
  }
}