/* Shared action-menu language: quiet glass, definite controls, visible intent. */
:root {
  --submenu-fill: color-mix(in srgb, var(--ink) 2%, transparent);
  --submenu-edge: color-mix(in srgb, var(--ink) 16%, transparent);
  --submenu-button-fill: color-mix(in srgb, var(--ink) 3%, transparent);
  --submenu-button-edge: color-mix(in srgb, var(--ink) 24%, transparent);
  --submenu-hover-fill: color-mix(in srgb, var(--ink) 8%, transparent);
  --submenu-primary: var(--ink);
  --submenu-on-primary: var(--porcelain);
  --action-hover-fill: color-mix(in srgb, var(--ink) 7%, transparent);
  --action-hover-edge: color-mix(in srgb, var(--ink) 42%, transparent);
  --action-hover-shadow: inset 0 1px 0 rgb(255 255 255 / .5), 0 3px 9px rgb(23 23 25 / .12);
}
html[data-host="dark"] {
  --submenu-fill: color-mix(in srgb, var(--porcelain) 3%, transparent);
  --submenu-edge: color-mix(in srgb, var(--porcelain) 17%, transparent);
  --submenu-button-fill: color-mix(in srgb, var(--porcelain) 5%, transparent);
  --submenu-button-edge: color-mix(in srgb, var(--porcelain) 24%, transparent);
  --submenu-hover-fill: color-mix(in srgb, var(--porcelain) 10%, transparent);
  --submenu-primary: var(--porcelain);
  --submenu-on-primary: var(--ink);
  --action-hover-fill: color-mix(in srgb, var(--porcelain) 10%, transparent);
  --action-hover-edge: color-mix(in srgb, var(--porcelain) 42%, transparent);
  --action-hover-shadow: inset 0 1px 0 rgb(255 255 255 / .24), 0 3px 10px rgb(0 0 0 / .25);
}
.submenu-surface { border: 1px solid var(--submenu-edge); border-radius: 14px; background: var(--glass-face), var(--submenu-fill); box-shadow: var(--glass-bevel), var(--glass-shadow); }
.submenu-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 14px; border: 1px solid var(--submenu-button-edge);
  border-radius: 8px; color: inherit; background: var(--glass-face), var(--submenu-button-fill);
  box-shadow: var(--glass-bevel), var(--glass-shadow-small);
  font: inherit; font-size: 12px; font-weight: 500; line-height: 1.4;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background 180ms var(--motion-ease), border-color 180ms var(--motion-ease), box-shadow 180ms var(--motion-ease), transform 180ms var(--motion-ease);
}
.submenu-button__icon { display: grid; place-items: center; flex: 0 0 16px; }
.submenu-button__icon svg { display: block; }
.submenu-button[data-variant="primary"] { color: var(--submenu-on-primary); background: var(--submenu-primary); border-color: var(--submenu-primary); box-shadow: 0 2px 4px rgb(0 0 0 / .08); }
.submenu-button:is(:hover, :focus-visible):not(:disabled):not([aria-disabled="true"]) { background: var(--glass-face), var(--action-hover-fill); border-color: var(--action-hover-edge); box-shadow: var(--action-hover-shadow); transform: translateY(-1px); }
.submenu-button[data-variant="primary"]:is(:hover, :focus-visible):not(:disabled):not([aria-disabled="true"]) { color: var(--submenu-on-primary); background: color-mix(in srgb, var(--submenu-primary) 90%, transparent); border-color: var(--submenu-primary); }
.submenu-button:active:not(:disabled) { transform: translateY(0); }
.submenu-button:focus-visible, .submenu-icon-button:focus-visible { outline: 2px solid var(--electric-blue); outline-offset: 3px; }
.submenu-button:disabled { opacity: 0.45; cursor: default; transform: none; box-shadow: none; }
.submenu-icon-button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 8px; color: inherit; background: transparent; cursor: pointer; transition: background 160ms var(--motion-ease); }
.submenu-icon-button:is(:hover, :focus-visible):not(:disabled):not([aria-disabled="true"]) { background: var(--action-hover-fill); box-shadow: var(--action-hover-shadow); }

/* Primary and Magic actions: electric two-color rim, depth, then a solid hover face. */
.waypoint-action,
.submenu-button.waypoint-action,
.champ-elements .module-button.waypoint-action,
.magic-button,
.submenu-button.magic-button,
.champ-elements .module-button.magic-button {
  --waypoint-action-face: var(--ink);
  --waypoint-action-rim: var(--action-gradient);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 46px; max-width: 100%; padding: 10px 17px;
  border: 2px solid transparent; border-radius: 10px;
  color: var(--porcelain);
  background: linear-gradient(var(--waypoint-action-face), var(--waypoint-action-face)) padding-box, var(--waypoint-action-rim) border-box;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .12), -3px 3px 14px rgb(56 107 255 / .27), 3px 4px 14px rgb(255 147 79 / .22), 0 4px 8px rgb(0 0 0 / .18);
  font-size: 13px; font-weight: 550; line-height: 1.4; text-decoration: none;
  white-space: normal; text-align: center; cursor: pointer;
  transition: transform 180ms var(--motion-ease), box-shadow 180ms var(--motion-ease);
}
.waypoint-action > svg { width: 16px; height: 16px; flex-shrink: 0; }
.waypoint-action:is(:hover, :focus-visible):not(:disabled):not([aria-disabled="true"]),
.submenu-button.waypoint-action:is(:hover, :focus-visible):not(:disabled):not([aria-disabled="true"]),
.champ-elements .module-button.waypoint-action:is(:hover, :focus-visible):not(:disabled):not([aria-disabled="true"]),
.magic-button:is(:hover, :focus-visible):not(:disabled):not([aria-disabled="true"]),
.submenu-button.magic-button:is(:hover, :focus-visible):not(:disabled):not([aria-disabled="true"]),
.champ-elements .module-button.magic-button:is(:hover, :focus-visible):not(:disabled):not([aria-disabled="true"]) {
  color: var(--porcelain); border-color: transparent;
  background: linear-gradient(var(--action-hover-face), var(--action-hover-face)) padding-box, var(--waypoint-action-rim) border-box;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .18), -3px 3px 16px rgb(56 107 255 / .38), 3px 4px 16px rgb(255 147 79 / .3), 0 5px 9px rgb(0 0 0 / .18);
  transform: translateY(-1px);
}
.waypoint-action:active:not(:disabled),
.submenu-button.waypoint-action:active:not(:disabled),
.champ-elements .module-button.waypoint-action:active:not(:disabled),
.magic-button:active:not(:disabled),
.submenu-button.magic-button:active:not(:disabled),
.champ-elements .module-button.magic-button:active:not(:disabled) { transform: translateY(0); box-shadow: inset 0 1px 3px rgb(0 0 0 / .2); }
.waypoint-action:focus-visible, .magic-button:focus-visible { outline: 2px solid var(--electric-blue); outline-offset: 3px; }
.waypoint-action:disabled,
.submenu-button.waypoint-action:disabled,
.champ-elements .module-button.waypoint-action:disabled,
.magic-button:is(:disabled, [aria-disabled="true"]),
.submenu-button.magic-button:is(:disabled, [aria-disabled="true"]),
.champ-elements .module-button.magic-button:is(:disabled, [aria-disabled="true"]) { opacity: .45; cursor: default; box-shadow: none; transform: none; }
.magic-button, .submenu-button.magic-button, .champ-elements .module-button.magic-button { --waypoint-action-rim: var(--magic-gradient); }
.magic-button__icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 18px; width: 18px; height: 18px; transition: transform 220ms var(--motion-ease), filter 220ms var(--motion-ease); }
.magic-button__icon svg { display: block; width: 18px; height: 18px; }
.magic-button:is(:hover, :focus-visible):not(:disabled):not([aria-disabled="true"]) .magic-button__icon { transform: rotate(6deg) scale(1.12); filter: drop-shadow(0 1px 3px rgb(255 255 255 / .32)); }

/* Opening cues point outward. They never imply that an AI job has started. */
:is(.action-open, a[target="_blank"], .card-open-plugin) { transition: background-color 180ms var(--motion-ease), color 180ms var(--motion-ease), box-shadow 180ms var(--motion-ease), opacity 180ms var(--motion-ease); }
:is(.action-open, a[target="_blank"], .card-open-plugin) :is(svg, .action-open__icon) { transition: transform 180ms var(--motion-ease); }
:is(.action-open, a[target="_blank"], .card-open-plugin):is(:hover, :focus-visible):not(:disabled):not([aria-disabled="true"]) { opacity: 1; background-color: var(--action-hover-fill); box-shadow: var(--action-hover-shadow), 0 3px 12px rgb(56 107 255 / .16); }
:is(.action-open, a[target="_blank"], .card-open-plugin):is(:hover, :focus-visible):not(:disabled):not([aria-disabled="true"]) :is(svg, .action-open__icon) { transform: translate(2px, -2px); }
:is(.action-open, a[target="_blank"], .card-open-plugin):is(:hover, :focus-visible) .action-open__icon svg { transform: none; }

/* Small visible utility, full-size target, nested inside its owning card. */
.card-has-refresh { position: relative; }
.card-has-refresh :is(.element-heading, .champ-task-card__header, .component-title-row) { padding-right: 36px; }
.card-has-tools { position: relative; }
.card-has-tools :is(.element-heading, .champ-task-card__header, .component-title-row) { padding-right: 80px; }
.card-header-tools { position: absolute; top: 8px; right: 8px; z-index: 2; display: flex; align-items: center; }
.champ-task-card.card-has-tools .champ-task-card__header h3 { min-height: 44px; }
.champ-task-card .card-header-tools { top: 20px; }
.card-refresh,
.champ-elements .card-refresh,
.card-open-plugin,
.champ-elements .card-open-plugin {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  display: grid; place-items: center; width: 44px; height: 44px;
  min-height: 44px; padding: 0; border: 0; border-radius: 9px;
  color: inherit; background: transparent; box-shadow: none; cursor: pointer; text-decoration: none;
  opacity: .7; touch-action: manipulation;
  transition: background-color 160ms var(--motion-ease), opacity 160ms var(--motion-ease);
}
.card-header-tools :is(.card-refresh, .card-open-plugin) { position: static; flex: 0 0 44px; }
:is(.card-refresh, .card-open-plugin) svg { width: 16px; height: 16px; display: block; }
:is(.card-refresh, .card-open-plugin):is(:hover, :focus-visible):not(:disabled):not([aria-disabled="true"]) { opacity: 1; background-color: var(--action-hover-fill); }
.card-refresh:is(:hover, :focus-visible):not(:disabled):not([aria-disabled="true"]) { box-shadow: var(--action-hover-shadow); }
:is(.card-refresh, .card-open-plugin):focus-visible { opacity: 1; outline: 2px solid var(--electric-blue); outline-offset: 1px; }
:is(.card-refresh, .card-open-plugin):disabled { cursor: default; opacity: .35; }
.card-refresh[aria-busy="true"] svg { animation: card-refresh-turn 900ms linear infinite; }
@keyframes card-refresh-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .waypoint-action, .champ-elements .module-button.waypoint-action, .card-refresh, .card-open-plugin { transition: none; }
  .waypoint-action:hover:not(:disabled), .submenu-button.waypoint-action:hover:not(:disabled), .champ-elements .module-button.waypoint-action:hover:not(:disabled) { transform: none; }
  .card-refresh[aria-busy="true"] svg { animation: none; }
  :is(.magic-button, .magic-button__icon, .action-open, a[target="_blank"], .card-open-plugin), :is(.action-open, a[target="_blank"], .card-open-plugin) :is(svg, .action-open__icon) { transition: none; }
  .submenu-button.magic-button:is(:hover, :focus-visible):not(:disabled), .champ-elements .module-button.magic-button:is(:hover, :focus-visible):not(:disabled), .magic-button:is(:hover, :focus-visible):not(:disabled) { transform: none; }
  .magic-button:is(:hover, :focus-visible):not(:disabled) .magic-button__icon, :is(.action-open, a[target="_blank"], .card-open-plugin):is(:hover, :focus-visible):not(:disabled) :is(svg, .action-open__icon) { transform: none; }
  :is(.submenu-button, .waypoint-action, .magic-button, .magic-button__icon), :is(.action-open, a[target="_blank"], .card-open-plugin) :is(svg, .action-open__icon) { transform: none !important; }
}
@media (prefers-reduced-motion: reduce) { .submenu-button, .submenu-icon-button { transition: none; } .submenu-button:hover:not(:disabled) { transform: none; } }