/* stage-57-action-icon-finish: final warm-glass alignment for action icons. */

:root {
  --focus-action-image-size: 44px;
  --focus-action-image-glyph: 22px;
  --focus-action-icon-size: 38px;
  --focus-action-icon-compact-size: 34px;
  --focus-action-icon-glyph: 19px;
  --focus-action-icon-radius: 15px;
  --focus-action-ink: color-mix(in srgb, var(--text-primary, #2f2a26) 72%, var(--focus-accent-amber, #d89a3d) 16%);
  --focus-action-muted-ink: color-mix(in srgb, var(--text-secondary, #6f655e) 76%, var(--text-primary, #2f2a26) 24%);
  --focus-action-save-ink: color-mix(in srgb, var(--text-primary, #2f2a26) 76%, var(--primary, #5678f5) 14%);
  --focus-action-hover-ink: color-mix(in srgb, var(--text-primary, #2f2a26) 70%, var(--primary, #5678f5) 18%);
  --focus-action-danger-ink: color-mix(in srgb, var(--focus-accent-coral, #d96b5f) 76%, var(--text-primary, #2f2a26) 24%);
  --focus-action-edit-ink: color-mix(in srgb, var(--focus-accent-amber, #d89a3d) 72%, var(--text-primary, #2f2a26) 28%);
  --focus-action-move-ink: color-mix(in srgb, var(--focus-accent-sage, #5f9073) 72%, var(--text-primary, #2f2a26) 28%);
  --focus-action-glass:
    radial-gradient(circle at 34% 16%, color-mix(in srgb, #fff 26%, transparent), transparent 54%),
    color-mix(in srgb, var(--surface-glass, rgba(255,255,255,.42)) 82%, transparent);
  --focus-action-glass-hover:
    radial-gradient(circle at 34% 16%, color-mix(in srgb, #fff 34%, transparent), transparent 56%),
    color-mix(in srgb, var(--surface-elevated, rgba(255,255,255,.55)) 86%, var(--primary, #5678f5) 7%);
  --focus-icon-back: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6 9 12l6 6'/%3E%3Cpath d='M9.6 12H20'/%3E%3C/svg%3E");
  --focus-icon-next: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3Cpath d='M4 12h10.4'/%3E%3C/svg%3E");
  --focus-icon-save: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 4.5h10.2l2.8 2.8v12.2h-13z'/%3E%3Cpath d='M8 4.5v5h7v-5'/%3E%3Cpath d='M8 19.5v-6h8v6'/%3E%3Cpath d='M10 16.5h4'/%3E%3C/svg%3E");
  --focus-icon-cancel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 7H5v4'/%3E%3Cpath d='M5.4 10.7A7 7 0 1 0 8 5.7'/%3E%3C/svg%3E");
}

:where(.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 !important;
  padding: 0 !important;
  border-radius: var(--focus-action-icon-radius) !important;
  border: 1px solid color-mix(in srgb, var(--surface-border, rgba(255,255,255,.22)) 78%, var(--text-primary, #2f2a26) 8%) !important;
  background: var(--focus-action-glass) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 17%, transparent),
    0 0.52rem 1.2rem color-mix(in srgb, #000 5%, transparent) !important;
  color: var(--focus-action-ink) !important;
  font-size: 0 !important;
  line-height: 0 !important;
  overflow: visible !important;
  transform: none;
}

.button.action-image-button,
.wizard-actions .action-image-button,
.modal-actions .action-image-button,
.schedule-picker-actions .action-image-button,
.schedule-detail-toolbar .action-image-button {
  color: var(--focus-action-ink) !important;
}

: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;
  border: 0 !important;
  border-radius: 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(--focus-icon-back)) center / var(--focus-action-image-glyph) var(--focus-action-image-glyph) no-repeat !important;
  mask: var(--action-icon, var(--focus-icon-back)) center / var(--focus-action-image-glyph) var(--focus-action-image-glyph) no-repeat !important;
  transform: none !important;
  transform-origin: center !important;
}

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

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

.save-image-button {
  color: var(--focus-action-save-ink) !important;
}

.button.save-image-button,
.modal-actions .save-image-button,
.wizard-actions .save-image-button {
  color: var(--focus-action-save-ink) !important;
}

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

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

:where(.action-image-button):is(:hover, :focus-visible) {
  border-color: color-mix(in srgb, var(--primary, #5678f5) 26%, var(--surface-border-strong, rgba(255,255,255,.32))) !important;
  background: var(--focus-action-glass-hover) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 20%, transparent),
    0 0.72rem 1.45rem color-mix(in srgb, var(--primary, #5678f5) 10%, transparent) !important;
  color: var(--focus-action-hover-ink) !important;
  outline: none !important;
  transform: translateY(-1px) !important;
}

: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: none !important;
}

:where(.save-image-button):is(:hover, :focus-visible) {
  color: color-mix(in srgb, var(--text-primary, #2f2a26) 62%, var(--primary, #5678f5) 28%) !important;
}

:where(.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;
  border-radius: var(--focus-action-icon-radius) !important;
  border-color: color-mix(in srgb, var(--surface-border, rgba(255,255,255,.22)) 82%, transparent) !important;
  background: var(--focus-action-glass) !important;
  color: var(--focus-action-muted-ink) !important;
}

: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: 13px !important;
}

.icon-action::before {
  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;
  background-position: center !important;
  background-size: contain !important;
  filter: none !important;
  transform: none !important;
}

.icon-action:is(:hover, :focus-visible) {
  border-color: color-mix(in srgb, var(--primary, #5678f5) 22%, var(--surface-border-strong, rgba(255,255,255,.32))) !important;
  background: var(--focus-action-glass-hover) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 18%, transparent),
    0 0.68rem 1.32rem color-mix(in srgb, var(--primary, #5678f5) 9%, transparent) !important;
  color: var(--focus-action-hover-ink) !important;
  transform: translateY(-1px) !important;
}

.icon-action:is(:hover, :focus-visible)::before {
  transform: none !important;
}

.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) 34%, var(--surface-border-strong, rgba(255,255,255,.32))) !important;
  color: var(--focus-action-danger-ink) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 17%, transparent),
    0 0.7rem 1.36rem color-mix(in srgb, var(--focus-accent-coral, #d96b5f) 9%, 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) 34%, var(--surface-border-strong, rgba(255,255,255,.32))) !important;
  color: var(--focus-action-edit-ink) !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) 34%, var(--surface-border-strong, rgba(255,255,255,.32))) !important;
  color: var(--focus-action-move-ink) !important;
}

@media (max-width: 760px) {
  :root {
    --focus-action-image-size: 42px;
    --focus-action-image-glyph: 21px;
    --focus-action-icon-size: 36px;
    --focus-action-icon-compact-size: 34px;
    --focus-action-icon-glyph: 18px;
  }
}

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

  :where(.action-image-button, .icon-action):is(:hover, :focus-visible),
  :where(.action-image-button):is(:hover, :focus-visible)::before,
  .icon-action:is(:hover, :focus-visible)::before {
    transform: none !important;
  }
}