/*
 * Shared Carpoolable action perimeter. Keep semantic color cues in each
 * control's existing background, ring, and focus styles.
 */
/* Low specificity supplies rounded defaults without flattening existing
   pill/circle controls or overriding component-specific corner treatments.
   Country-home links retain their authored presentation; button-style links
   still receive the action perimeter below. */
:where(button, a, input[type="button"], input[type="submit"], input[type="reset"],
[role="button"], [role="tab"], summary, label[for]):not(:where([data-country-home] a)) {
  border-radius: 0.75rem;
}

/* Round the image as well as its clickable perimeter; do not clip the control,
   which could hide keyboard focus or an attached popover. */
:where(a, button, [role="button"]):not(:where([data-country-home] a)) > :where(img, picture) {
  border-radius: inherit;
}

:root :is(button,
a.btn,
a.button,
a.cta,
a[class*="-btn"],
a[class*="-button"],
input[type="button"],
input[type="submit"],
input[type="reset"],
[role="button"],
[role="tab"],
summary,
.leaflet-control-zoom a,
.leaflet-control-layers-toggle,
.leaflet-popup-close-button,
.pan-control-container button,
a[data-action-control="true"],
a:has(img):not(:where([data-country-home] a)),
a:has(picture):not(:where([data-country-home] a)),
a[style*="background"][style*="padding"],
a[class*="rounded"][class*="h-"][class*="w-"],
label[for][class*="rounded"][class*="bg-"],
label[class*="cursor-pointer"][class*="rounded"],
a[class*="bg-"][class*="px-"],
a[class*="inline-flex"][class*="min-h-"],
a[class*="rounded"][class*="px-"]:not([class*="underline"])) {
  border: 2px solid #173d2c !important;
  box-sizing: border-box;
}

/* Match the action's meaning while keeping dark text on pale hover fills.
   Variables are deliberately low-specificity so a control can opt into a tone. */
:where([class*="text-red-"], [class*="text-rose-"], [class*="bg-destructive"],
[class*="text-destructive"], [aria-label^="Cancel"], [data-action-slot="cancel"] > button,
[data-action-tone="danger"]) {
  --action-hover-bg: #ffe4e6;
  --action-hover-fg: #9f1239;
}
:where([class*="text-blue-"], [class*="text-sky-"], [class*="bg-primary"]) {
  --action-hover-bg: #dbeafe;
  --action-hover-fg: #1e40af;
}
:where([class*="text-violet-"], [class*="text-purple-"]) {
  --action-hover-bg: #ede9fe;
  --action-hover-fg: #5b21b6;
}
:where([class*="text-amber-"], [class*="text-orange-"]) {
  --action-hover-bg: #fef3c7;
  --action-hover-fg: #92400e;
}

/* Real hover devices only: do not leave touch controls in a sticky hover state.
   Calendar activity/selection colors and disabled controls remain authoritative. */
@media (hover: hover) {
  :root :is(button, [role="button"], [role="tab"], summary,
  input[type="button"], input[type="submit"], input[type="reset"],
  a[data-action-control="true"],
  a:has(img):not(:where([data-country-home] a)),
  a:has(picture):not(:where([data-country-home] a)),
  a.btn, a.button, a.cta, a[class*="-btn"], a[class*="-button"],
  a[class*="bg-"][class*="px-"],
  a[class*="rounded"][class*="px-"]:not([class*="underline"])):hover:not(
    :disabled, [aria-disabled="true"], [aria-pressed="true"],
    [aria-selected="true"], [data-state="active"], [data-calendar-control],
    .lp-dot, .event-cal-day, [data-testid="discovery-date-calendar"] *,
    [data-dashboard-personal-calendar] *
  ) {
    background-color: var(--action-hover-bg, #dcfce7) !important;
    color: var(--action-hover-fg, #14532d) !important;
  }
}

/* Repeat the marker to match the specificity of the shared perimeter's most
   specific link selector. Keep keyboard focus and click behavior unchanged. */
:root :is(a, button)[data-action-border="none"][data-action-border="none"][data-action-border="none"] {
  border: 0 !important;
}

/* Approved country-home exceptions: leave carousel indicators and the
   Pause/Resume text control unframed; retain their keyboard focus outlines. */
:root #landing-presentation :is(.lp-dot, .lp-auto-toggle) {
  border: 0 !important;
}

/* Public Event calendars use the same thin black perimeter for single-Event
   links and multiple-Event buttons. Other action controls retain 2px borders. */
:root #event-cal-container .event-cal-day.has-event {
  border: 1px solid #000 !important;
  box-sizing: border-box;
}

/* Dashboard's compact personal calendar is another approved exception:
   only its day and week-navigation controls use 1px. */
:root [data-dashboard-block="calendar"] [data-dashboard-personal-calendar="true"] button[data-calendar-control="true"] {
  border: 1px solid #173d2c !important;
  box-sizing: border-box;
}

/* The Dashboard rail is only about 190–220px wide at tablet breakpoints.
   Let the seven columns use narrow, fixed-height cells instead of their
   square/minimum-height intrinsic size; phone layout keeps its 44px targets. */
@media (min-width: 768px) {
  :root [data-dashboard-personal-calendar="true"] [role="group"] {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  :root [data-dashboard-personal-calendar="true"] [role="group"] > * {
    min-width: 0;
  }

  :root [data-dashboard-personal-calendar="true"] [role="group"] [data-calendar-control="true"] {
    min-height: 28px !important;
    height: 28px;
    aspect-ratio: auto;
    padding-inline: 1px;
    border-radius: 6px;
    font-size: 12px;
  }

  :root [data-dashboard-personal-calendar="true"] [role="group"] button > span[aria-hidden="true"] {
    bottom: 3px;
  }

  :root [data-dashboard-personal-calendar="true"] [role="group"] > div[aria-hidden="true"] {
    min-width: 0;
    padding-bottom: 4px;
    font-size: 8px;
    letter-spacing: .02em;
  }

  :root [data-dashboard-personal-calendar="true"] [data-calendar-control="true"][aria-label="Previous week"],
  :root [data-dashboard-personal-calendar="true"] [data-calendar-control="true"][aria-label="Next week"] {
    width: 32px !important;
    height: 32px !important;
  }
}