/* stage-47-action-icon-system: one geometry layer for icon-only controls. */

:root {
  --focus-action-icon-size: 40px;
  --focus-action-icon-compact-size: 36px;
  --focus-action-icon-glyph: 20px;
  --focus-action-image-size: 48px;
  --focus-action-image-glyph: 26px;
  --focus-action-icon-radius: 16px;
}

.icon-action {
  width: var(--focus-action-icon-size) !important;
  min-width: var(--focus-action-icon-size) !important;
  height: var(--focus-action-icon-size) !important;
  min-height: var(--focus-action-icon-size) !important;
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 auto;
  overflow: visible !important;
  border: 1px solid color-mix(in srgb, var(--surface-border, var(--glass-border)) 72%, transparent) !important;
  border-radius: var(--focus-action-icon-radius) !important;
  background:
    radial-gradient(circle at 34% 16%, color-mix(in srgb, #fff 24%, transparent), transparent 54%),
    color-mix(in srgb, var(--surface-glass, var(--glass-surface)) 78%, transparent) !important;
  background-image: none !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: var(--focus-action-icon-glyph) var(--focus-action-icon-glyph) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 14%, transparent),
    0 0.45rem 1.1rem color-mix(in srgb, #000 5%, transparent) !important;
  color: color-mix(in srgb, var(--text-secondary, var(--muted-strong)) 86%, var(--text-primary, var(--text))) !important;
  font-size: 0 !important;
  line-height: 0 !important;
  padding: 0 !important;
  transition:
    transform var(--focus-motion-fast, 140ms cubic-bezier(.2, .8, .2, 1)),
    border-color var(--focus-motion-standard, 220ms cubic-bezier(.2, .8, .2, 1)),
    background var(--focus-motion-standard, 220ms cubic-bezier(.2, .8, .2, 1)),
    box-shadow var(--focus-motion-standard, 220ms cubic-bezier(.2, .8, .2, 1)),
    color var(--focus-motion-fast, 140ms cubic-bezier(.2, .8, .2, 1));
}

.icon-action::before {
  content: "" !important;
  display: block !important;
  width: var(--focus-action-icon-glyph) !important;
  min-width: var(--focus-action-icon-glyph) !important;
  height: var(--focus-action-icon-glyph) !important;
  min-height: var(--focus-action-icon-glyph) !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: currentColor !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  filter: none !important;
  -webkit-mask: var(--micro-icon, var(--icon-note)) center / contain no-repeat !important;
  mask: var(--micro-icon, var(--icon-note)) center / contain no-repeat !important;
  transform: none;
  transform-origin: center;
  transition: transform var(--focus-motion-fast, 140ms cubic-bezier(.2, .8, .2, 1));
}

:where(
  .focus-task-actions,
  .event-pill,
  .schedule-entry-card,
  .schedule-detail-toolbar,
  .focus-note-card .item-actions,
  .focus-diary-card .item-actions,
  .diary-entry,
  .plan-content,
  .week-event,
  .day-card-row
) .icon-action {
  width: var(--focus-action-icon-compact-size) !important;
  min-width: var(--focus-action-icon-compact-size) !important;
  height: var(--focus-action-icon-compact-size) !important;
  min-height: var(--focus-action-icon-compact-size) !important;
  border-radius: 0.88rem !important;
}

.icon-action:is(:hover, :focus-visible) {
  border-color: color-mix(in srgb, var(--primary, #5678f5) 36%, var(--surface-border-strong, var(--glass-border-strong))) !important;
  background:
    radial-gradient(circle at 34% 16%, color-mix(in srgb, #fff 32%, transparent), transparent 54%),
    color-mix(in srgb, var(--primary, #5678f5) 11%, var(--surface-elevated, var(--glass-elevated))) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 17%, transparent),
    0 0.72rem 1.5rem color-mix(in srgb, var(--primary, #5678f5) 15%, transparent) !important;
  color: color-mix(in srgb, var(--primary, #5678f5) 82%, var(--text-primary, var(--text))) !important;
  outline: none;
  transform: translateY(-1px);
}

.icon-action:is(:hover, :focus-visible)::before {
  transform: scale(1.06);
}

.icon-action.delete:is(:hover, :focus-visible),
.focus-task-delete:is(:hover, :focus-visible),
.day-card-delete:is(:hover, :focus-visible),
.week-event-delete:is(:hover, :focus-visible) {
  border-color: color-mix(in srgb, var(--focus-accent-coral, #d96b5f) 42%, var(--surface-border-strong, var(--glass-border-strong))) !important;
  color: color-mix(in srgb, var(--focus-accent-coral, #d96b5f) 86%, var(--text-primary, var(--text))) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 16%, transparent),
    0 0.72rem 1.5rem color-mix(in srgb, var(--focus-accent-coral, #d96b5f) 14%, transparent) !important;
}

.icon-action.edit:is(:hover, :focus-visible),
.focus-task-edit:is(:hover, :focus-visible),
.schedule-detail-edit:is(:hover, :focus-visible) {
  border-color: color-mix(in srgb, var(--focus-accent-amber, #d89a3d) 42%, var(--surface-border-strong, var(--glass-border-strong))) !important;
  color: color-mix(in srgb, var(--focus-accent-amber, #d89a3d) 86%, var(--text-primary, var(--text))) !important;
}

.icon-action.move:is(:hover, :focus-visible),
.focus-task-move:is(:hover, :focus-visible) {
  border-color: color-mix(in srgb, var(--focus-accent-sage, #5f9073) 42%, var(--surface-border-strong, var(--glass-border-strong))) !important;
  color: color-mix(in srgb, var(--focus-accent-sage, #5f9073) 86%, var(--text-primary, var(--text))) !important;
}

.action-image-button {
  width: var(--focus-action-image-size) !important;
  min-width: var(--focus-action-image-size) !important;
  height: var(--focus-action-image-size) !important;
  min-height: var(--focus-action-image-size) !important;
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 auto;
  overflow: visible !important;
  border: 1px solid color-mix(in srgb, var(--primary, #5678f5) 22%, var(--surface-border, var(--glass-border))) !important;
  border-radius: 1rem !important;
  background:
    radial-gradient(circle at 36% 14%, color-mix(in srgb, #fff 26%, transparent), transparent 54%),
    color-mix(in srgb, var(--surface-glass, var(--glass-surface)) 82%, transparent) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: var(--focus-action-image-glyph) var(--focus-action-image-glyph) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 16%, transparent),
    0 0.5rem 1.2rem color-mix(in srgb, #000 5%, transparent) !important;
  color: color-mix(in srgb, var(--primary, #5678f5) 82%, var(--text-primary, var(--text))) !important;
  font-size: 0 !important;
  line-height: 0 !important;
  padding: 0 !important;
  transition:
    transform var(--focus-motion-fast, 140ms cubic-bezier(.2, .8, .2, 1)),
    border-color var(--focus-motion-standard, 220ms cubic-bezier(.2, .8, .2, 1)),
    background var(--focus-motion-standard, 220ms cubic-bezier(.2, .8, .2, 1)),
    box-shadow var(--focus-motion-standard, 220ms cubic-bezier(.2, .8, .2, 1)),
    color var(--focus-motion-fast, 140ms cubic-bezier(.2, .8, .2, 1));
}

:where(.back-image-button, .next-image-button, .save-image-button, .cancel-image-button)::before {
  content: "" !important;
  display: block !important;
  width: var(--focus-action-image-glyph) !important;
  min-width: var(--focus-action-image-glyph) !important;
  height: var(--focus-action-image-glyph) !important;
  min-height: var(--focus-action-image-glyph) !important;
  margin: 0 !important;
  background: currentColor !important;
  background-image: none !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: var(--focus-action-image-glyph) var(--focus-action-image-glyph) !important;
  filter: none !important;
  -webkit-mask: var(--action-icon, var(--icon-back)) center / var(--focus-action-image-glyph) var(--focus-action-image-glyph) no-repeat !important;
  mask: var(--action-icon, var(--icon-back)) center / var(--focus-action-image-glyph) var(--focus-action-image-glyph) no-repeat !important;
  transform: none;
  transform-origin: center;
  transition: transform var(--focus-motion-fast, 140ms cubic-bezier(.2, .8, .2, 1));
}

.back-image-button::before {
  --action-icon: var(--icon-back);
}

.next-image-button::before {
  --action-icon: var(--icon-next);
}

.save-image-button::before {
  --action-icon: var(--icon-save);
}

.cancel-image-button::before {
  --action-icon: var(--icon-cancel);
}

:where(.action-image-button):is(:hover, :focus-visible) {
  border-color: color-mix(in srgb, var(--primary, #5678f5) 44%, var(--surface-border-strong, var(--glass-border-strong))) !important;
  background:
    radial-gradient(circle at 36% 14%, color-mix(in srgb, #fff 34%, transparent), transparent 54%),
    color-mix(in srgb, var(--primary, #5678f5) 12%, var(--surface-elevated, var(--glass-elevated))) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: var(--focus-action-image-glyph) var(--focus-action-image-glyph) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 18%, transparent),
    0 0.8rem 1.65rem color-mix(in srgb, var(--primary, #5678f5) 18%, transparent) !important;
  color: color-mix(in srgb, var(--primary, #5678f5) 90%, var(--text-primary, var(--text))) !important;
  outline: none;
  transform: translateY(-1px);
}

:where(.action-image-button):is(:hover, :focus-visible)::before {
  background-position: center !important;
  background-size: var(--focus-action-image-glyph) var(--focus-action-image-glyph) !important;
  filter: none !important;
  transform: scale(1.05);
}

.round-control,
.quote-nav,
.sport-add-more {
  width: var(--focus-action-icon-size) !important;
  min-width: var(--focus-action-icon-size) !important;
  height: var(--focus-action-icon-size) !important;
  min-height: var(--focus-action-icon-size) !important;
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 auto;
  overflow: visible !important;
  border: 1px solid color-mix(in srgb, var(--surface-border, var(--glass-border)) 76%, transparent) !important;
  background:
    radial-gradient(circle at 34% 16%, color-mix(in srgb, #fff 24%, transparent), transparent 54%),
    color-mix(in srgb, var(--surface-glass, var(--glass-surface)) 78%, transparent) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: var(--focus-action-icon-glyph) var(--focus-action-icon-glyph) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 14%, transparent),
    0 0.48rem 1.2rem color-mix(in srgb, #000 5%, transparent) !important;
  padding: 0 !important;
  transition:
    transform var(--focus-motion-fast, 140ms cubic-bezier(.2, .8, .2, 1)),
    border-color var(--focus-motion-standard, 220ms cubic-bezier(.2, .8, .2, 1)),
    background var(--focus-motion-standard, 220ms cubic-bezier(.2, .8, .2, 1)),
    box-shadow var(--focus-motion-standard, 220ms cubic-bezier(.2, .8, .2, 1));
}

.round-control,
.quote-nav {
  border-radius: 999px !important;
}

.sport-add-more {
  border-radius: var(--focus-action-icon-radius) !important;
  color: color-mix(in srgb, var(--text-primary, var(--text)) 88%, var(--primary, #5678f5)) !important;
  font-size: 1.35rem !important;
  font-weight: 760 !important;
  line-height: 1 !important;
}

.quote-nav span,
.round-control > :where(.chevron, .x-icon, .icon, span) {
  display: block;
  flex: 0 0 auto;
  margin: 0 !important;
  transform-origin: center;
}

.quote-nav span {
  font-size: 1.35rem !important;
  line-height: 1 !important;
  transform: none !important;
}

.round-control:is(:hover, :focus-visible),
.quote-nav:is(:hover, :focus-visible),
.sport-add-more:is(:hover, :focus-visible) {
  border-color: color-mix(in srgb, var(--primary, #5678f5) 38%, var(--surface-border-strong, var(--glass-border-strong))) !important;
  background:
    radial-gradient(circle at 34% 16%, color-mix(in srgb, #fff 32%, transparent), transparent 54%),
    color-mix(in srgb, var(--primary, #5678f5) 11%, var(--surface-elevated, var(--glass-elevated))) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: var(--focus-action-icon-glyph) var(--focus-action-icon-glyph) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 17%, transparent),
    0 0.76rem 1.55rem color-mix(in srgb, var(--primary, #5678f5) 16%, transparent) !important;
  outline: none;
  transform: translateY(-1px);
}

button:disabled:is(.icon-action, .action-image-button, .round-control, .quote-nav, .sport-add-more),
button[aria-busy="true"]:is(.icon-action, .action-image-button, .round-control, .quote-nav, .sport-add-more) {
  opacity: 0.56;
  transform: none !important;
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 10%, transparent) !important;
}

@media (max-width: 760px) {
  :root {
    --focus-action-icon-size: 38px;
    --focus-action-icon-compact-size: 36px;
    --focus-action-icon-glyph: 19px;
    --focus-action-image-size: 45px;
    --focus-action-image-glyph: 24px;
  }

  .quote-nav {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
  }

  .modal-head .round-control {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .icon-action,
  .icon-action::before,
  .action-image-button,
  :where(.back-image-button, .next-image-button, .save-image-button, .cancel-image-button)::before,
  .round-control,
  .quote-nav,
  .sport-add-more {
    transition: none !important;
  }

  .icon-action:is(:hover, :focus-visible),
  .icon-action:is(:hover, :focus-visible)::before,
  :where(.action-image-button):is(:hover, :focus-visible),
  :where(.action-image-button):is(:hover, :focus-visible)::before,
  .round-control:is(:hover, :focus-visible),
  .quote-nav:is(:hover, :focus-visible),
  .sport-add-more:is(:hover, :focus-visible) {
    transform: none !important;
  }
}