/* Shared selection feedback. Only presentation: values and attribution stay in app.js. */
:root {
  --selection-feedback-edge: #5395e5;
  --selection-feedback-ring: rgba(55, 126, 207, .16);
  --selection-feedback-text: #667085;
  --selection-feedback-bg: #f2f5f9;
}

/* Extend the existing authority layer, whose important rules outrank legacy CSS. */
@layer apple-proportions {
/* At shorter desktop heights the daily table's minimum height previously
   compressed the summary, placing its cards over the daily filter triggers. */
html body #app-shell #view .platform-workbench-page {
  grid-template-rows: max-content max-content !important;
}
html body #app-shell #view .platform-workbench-page > .platform-design-summary-panel {
  min-height: max-content !important;
}
/* No scale/translation: a pressed filter keeps its anchor and dimensions. */
html body :is(#app-shell #view, #modal-root) :is(
  .custom-select-trigger, .store-choice-trigger, .date-picker-trigger,
  .platform-summary-filter-trigger, .platform-daily-select-trigger,
  .system-ai-model-trigger, .manual-ad-series-selector,
  select:not(.native-select-hidden), input[type="date"], input[type="month"], input[type="time"]
):not(:disabled) {
  transform: none !important;
  transition: border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease, color 120ms ease !important;
}

/* Open state comes from the existing menu, including calendars without aria-expanded.
   The collection dialog's calendar lives in a separate slot inside its form. */
html body :is(#app-shell #view, #modal-root) :is(
  .custom-select-wrap.open > .custom-select-trigger,
  .store-choice-menu:has(> .store-choice-popover:not(.hidden):not([hidden])) > .store-choice-trigger,
  :is(.date-picker, .orders-date-field, .dashboard-date-control):has(> .date-picker-popover:not(.hidden):not([hidden])) > :is(.date-picker-trigger, .platform-summary-filter-trigger),
  .platform-daily-select:has(> .platform-daily-select-menu:not(.hidden):not([hidden])) > .platform-daily-select-trigger,
  #ad-report-collect-form:has(#report-collect-calendar > .date-picker-popover) .date-picker-trigger,
  :is(.custom-select-trigger, .store-choice-trigger, .date-picker-trigger, .platform-summary-filter-trigger, .platform-daily-select-trigger, .system-ai-model-trigger, .manual-ad-series-selector)[aria-expanded="true"],
  :is(.custom-select-trigger, .store-choice-trigger, .date-picker-trigger, .platform-summary-filter-trigger, .platform-daily-select-trigger, .system-ai-model-trigger, .manual-ad-series-selector, select:not(.native-select-hidden), input[type="date"], input[type="month"], input[type="time"]):active
):not(:disabled) {
  border-color: var(--selection-feedback-edge) !important;
  background: var(--selection-feedback-bg) !important;
  color: var(--selection-feedback-text) !important;
  box-shadow: 0 0 0 3px var(--selection-feedback-ring), inset 0 1px 0 rgba(255, 255, 255, .85) !important;
  outline: none !important;
  transform: none !important;
  /* Pointer-down feedback must appear immediately, rather than wait for a fade. */
  transition: none !important;
}

/* Existing value elements have explicit dark !important rules. Inherit the
   trigger's state color so pagination, strong labels and nested model text agree. */
html body :is(#app-shell #view, #modal-root) :is(
  .custom-select-trigger, .store-choice-trigger, .date-picker-trigger,
  .platform-summary-filter-trigger, .platform-daily-select-trigger,
  .system-ai-model-trigger, .manual-ad-series-selector
) :is(strong, .custom-select-value, [data-system-ai-model-label]),
html body :is(#app-shell #view, #modal-root) .system-ai-model-trigger > span {
  color: inherit !important;
}

/* Keyboard focus stays visible after a selection without muting a closed value. */
html body :is(#app-shell #view, #modal-root) :is(
  .custom-select-trigger, .store-choice-trigger, .date-picker-trigger,
  .platform-summary-filter-trigger, .platform-daily-select-trigger,
  .system-ai-model-trigger, .manual-ad-series-selector,
  select:not(.native-select-hidden), input[type="date"], input[type="month"], input[type="time"]
):not(:disabled):focus-visible,
html body :is(#app-shell #view, #modal-root) .month-choice-control:has(.month-step-button:focus-visible),
html body :is(#app-shell #view, #modal-root) .month-choice-control:has(.month-step-button:active) {
  border-color: var(--selection-feedback-edge) !important;
  box-shadow: 0 0 0 3px var(--selection-feedback-ring) !important;
  outline: none !important;
}

html body :is(#app-shell #view, #modal-root) input:is([type="checkbox"], [type="radio"]):not(:disabled):is(:active, :focus-visible) {
  outline: 2px solid var(--selection-feedback-edge) !important;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html body :is(#app-shell #view, #modal-root) :is(.custom-select-trigger, .store-choice-trigger, .date-picker-trigger, .platform-summary-filter-trigger, .platform-daily-select-trigger, .system-ai-model-trigger, .manual-ad-series-selector, select, input[type="date"], input[type="month"], input[type="time"]) {
    transition: none !important;
  }
}
}