:root {
  --ink: #171719;
  --obsidian: #111214;
  --graphite: #36373b;
  --ash: #96979d;
  --porcelain: #f7f7f8;
  --electric-blue: #386bff;
  --electric-teal: #18d5d1;
  --sunset-orange: #ff934f;
  --sunset-pink: #f65a9a;
  --signature-gradient: linear-gradient(115deg, var(--electric-blue) 0%, var(--electric-teal) 32%, var(--sunset-orange) 68%, var(--sunset-pink) 100%);
  --action-gradient: linear-gradient(115deg, var(--electric-blue), var(--sunset-orange));
  --action-hover-face: color-mix(in srgb, var(--electric-blue) 85%, var(--ink));
  --magic-gradient: var(--action-gradient);
  --waypoint-color: var(--electric-teal);
  --glass-fill: rgb(255 255 255 / 0.025);
  --glass-radius: 22px;
  --icon-radius: 11px;
  --icon-rest-size: 42px;
  --icon-active-size: 54px;
  --motion-ease: cubic-bezier(0.16, 1, 0.3, 1);
}
:root,
[data-host="dark"] {
  --glass-face: linear-gradient(135deg, rgb(255 255 255 / 0.075), rgb(255 255 255 / 0.018) 32%, rgb(255 255 255 / 0.006) 68%, rgb(255 255 255 / 0.045));
  --glass-rim: linear-gradient(135deg, rgb(255 255 255 / 0.76), rgb(255 255 255 / 0.19) 24%, rgb(255 255 255 / 0.06) 49%, rgb(255 255 255 / 0.12) 72%, rgb(255 255 255 / 0.34));
  --glass-edge: rgb(255 255 255 / 0.18);
  --glass-bevel: inset 0 1px 0 rgb(255 255 255 / 0.16), inset 1px 0 0 rgb(255 255 255 / 0.045), inset 0 -1px 0 rgb(0 0 0 / 0.28);
  --glass-shadow: 0 3px 8px rgb(0 0 0 / 0.1), 0 12px 28px rgb(0 0 0 / 0.12);
  --glass-shadow-small: 0 2px 4px rgb(0 0 0 / 0.12), 0 5px 10px rgb(0 0 0 / 0.08);
}
[data-host="light"] {
  --glass-face: linear-gradient(135deg, rgb(255 255 255 / 0.36), rgb(255 255 255 / 0.08) 32%, rgb(255 255 255 / 0.025) 68%, rgb(255 255 255 / 0.14));
  --glass-rim: linear-gradient(135deg, rgb(255 255 255 / 0.96), rgb(255 255 255 / 0.48) 23%, rgb(23 23 25 / 0.08) 50%, rgb(23 23 25 / 0.13) 72%, rgb(255 255 255 / 0.7));
  --glass-edge: rgb(23 23 25 / 0.16);
  --glass-bevel: inset 0 1px 0 rgb(255 255 255 / 0.8), inset 1px 0 0 rgb(255 255 255 / 0.24), inset 0 -1px 0 rgb(23 23 25 / 0.055);
  --glass-shadow: 0 3px 8px rgb(23 23 25 / 0.035), 0 12px 28px rgb(23 23 25 / 0.055);
  --glass-shadow-small: 0 2px 4px rgb(23 23 25 / 0.035), 0 5px 10px rgb(23 23 25 / 0.025);
}

/* Glass / Sunset surface language. Load after tokens.css.
   The host owns the backdrop. Surfaces add edges and restrained transparent tint.
   .glass-panel: clear | data-depth="section" | data-depth="well"
   .glass-divider: fine | data-treatment="section" | data-treatment="waypoint" */
:root,
[data-host="dark"] {
  --surface-edge: rgb(247 247 248 / 0.28);
  --surface-edge-quiet: rgb(247 247 248 / 0.17);
  --surface-edge-strong: rgb(247 247 248 / 0.38);
  --surface-highlight: rgb(255 255 255 / 0.12);
  --surface-section-fill: rgb(247 247 248 / 0.035);
  --surface-well-fill: rgb(0 0 0 / 0.18);
  --surface-well-shadow: rgb(0 0 0 / 0.16);
  --surface-muted: #b5b6bf;
  --surface-cue: var(--electric-teal);
  --surface-radius: 14px;
  --surface-padding: 20px;
}
[data-host="light"] {
  --surface-edge: rgb(23 23 25 / 0.24);
  --surface-edge-quiet: rgb(23 23 25 / 0.15);
  --surface-edge-strong: rgb(23 23 25 / 0.34);
  --surface-highlight: rgb(255 255 255 / 0.72);
  --surface-section-fill: rgb(255 255 255 / 0.1);
  --surface-well-fill: rgb(23 23 25 / 0.045);
  --surface-well-shadow: rgb(23 23 25 / 0.06);
  --surface-muted: #5b5c64;
  --surface-cue: #087d7b;
}

.glass-panel {
  position: relative;
  min-width: 0;
  border: 1px solid var(--glass-edge, var(--surface-edge-quiet));
  border-radius: var(--surface-radius);
  background: var(--glass-face, linear-gradient(transparent, transparent));
  box-shadow: var(--glass-bevel, inset 0 1px 0 var(--surface-highlight)), var(--glass-shadow-small, 0 3px 9px rgb(0 0 0 / .04));
  color: inherit;
}
.glass-panel::before {
  content: "";
  position: absolute;
  inset: -1px;
  padding: 1px;
  border-radius: inherit;
  background: var(--glass-rim, linear-gradient(135deg, var(--surface-highlight), transparent 40%));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: .65;
  pointer-events: none;
}
.glass-panel[data-depth="section"] {
  background: var(--glass-face, linear-gradient(transparent, transparent)), var(--surface-section-fill);
  box-shadow: var(--glass-bevel, inset 0 1px 0 var(--surface-highlight)), var(--glass-shadow, 0 6px 18px rgb(0 0 0 / .07));
}
.glass-panel[data-depth="section"]::before { opacity: 1; }
.glass-panel[data-depth="well"] {
  border-color: var(--surface-edge-quiet);
  border-radius: calc(var(--surface-radius) - 4px);
  background: linear-gradient(165deg, var(--surface-well-fill), transparent 65%);
  box-shadow: inset 0 2px 5px var(--surface-well-shadow), inset 0 -1px 0 var(--surface-highlight);
}
.glass-panel[data-depth="well"]::before { opacity: .25; }
.glass-panel__header,
.glass-panel__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
  padding: 16px var(--surface-padding);
}
.glass-panel__header { padding-bottom: 0; }
.glass-panel__body { min-width: 0; padding: var(--surface-padding); }
.glass-panel__footer { border-top: 1px solid var(--surface-edge-quiet); }
.glass-panel__header > :last-child,
.glass-panel__footer > :last-child { flex-shrink: 0; }

.glass-divider {
  display: block;
  width: 100%;
  height: 1px;
  margin: 0;
  border: 0;
  background: var(--surface-edge-quiet);
}
.glass-divider:is([data-treatment="section"], [data-treatment="waypoint"]) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: auto;
  min-height: 44px;
  padding: 0;
  background: transparent;
}
.glass-divider__label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin: 0;
  color: inherit;
  font: inherit;
  font-size: 13px;
  font-weight: 550;
  line-height: 1.4;
}
.glass-divider > :is(a, button) { flex-shrink: 0; margin-left: auto; }
.glass-divider[data-treatment="waypoint"] .glass-divider__label::before {
  content: "";
  flex: 0 0 4px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--surface-cue);
}

/* Style-kit specimens. Proximity groups context; material supplies the boundary. */
.surface-library { margin-top: 64px; }
.surface-library > .section-heading > a { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; min-height: 44px; color: var(--surface-muted); font-size: 13px; white-space: nowrap; }
.surface-library > .section-heading > a:hover { color: inherit; text-decoration: underline; }
.surface-intro { max-width: 65ch; color: var(--surface-muted); font-size: 14px; line-height: 1.65; }
.surface-specimens { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.surface-depths { display: grid; gap: 22px; }
.surface-depth-row { display: grid; grid-template-columns: minmax(108px, .38fr) minmax(0, 1fr); gap: 20px; align-items: center; }
.surface-depth-label h3 { font-size: 14px; font-weight: 550; }
.surface-depth-label p { margin-top: 5px; color: var(--surface-muted); font-size: 13px; line-height: 1.5; }
.surface-sample { display: flex; align-items: center; gap: 12px; min-height: 100px; padding: 18px; }
.surface-sample .component-title { flex: 1; }
.surface-sample .component-title h4 { margin: 0; font-size: 14px; font-weight: 550; }
.surface-sample .component-title p { margin-top: 4px; color: var(--surface-muted); font-size: 13px; line-height: 1.5; }
.surface-sample .submenu-button { flex-shrink: 0; min-height: 44px; padding: 0 12px; font-size: 13px; }
.surface-library [data-accent] { fill: currentColor; fill-opacity: .2; }
.surface-library [data-accent-stroke] { stroke: currentColor; }
.surface-grouping { min-width: 0; }
.surface-grouping > h3 { font-size: 16px; font-weight: 550; line-height: 1.4; }
.surface-grouping__intro { margin-top: 8px; max-width: 52ch; color: var(--surface-muted); font-size: 14px; line-height: 1.6; }
.surface-group-example { margin-top: 24px; padding: 24px; }
.surface-group-example .component-title h4 { margin: 0; font-size: 15px; font-weight: 550; }
.surface-group-example .component-title p { margin-top: 5px; color: var(--surface-muted); font-size: 13px; line-height: 1.5; }
.surface-group-example__content { display: grid; gap: 22px; margin-top: 30px; }
.surface-group-example__content p { display: grid; gap: 4px; font-size: 13px; line-height: 1.6; }
.surface-group-example__content strong { font-weight: 550; }
.surface-group-example__content span { color: var(--surface-muted); }
.surface-rule { margin-top: 28px; color: var(--surface-muted); font-size: 13px; line-height: 1.65; }
@media (max-width: 1100px) {
  .surface-specimens { gap: 32px; }
  .surface-depth-row { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .surface-depth-label { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
  .surface-depth-label p { margin-top: 0; text-align: right; }
}
@media (max-width: 820px) {
  .surface-specimens { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .surface-depth-row { grid-template-columns: 140px minmax(0, 1fr); gap: 24px; }
  .surface-depth-label { display: block; }
  .surface-depth-label p { margin-top: 5px; text-align: left; }
  .surface-group-example__content { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}
@media (max-width: 580px) {
  .surface-library { margin-top: 48px; }
  .surface-depth-row { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .surface-depth-label { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
  .surface-depth-label p { max-width: 22ch; margin-top: 0; text-align: right; }
  .surface-sample { min-height: 96px; padding: 16px; gap: 8px; }
  .surface-sample .component-title { gap: 8px; }
  .surface-sample .component-glyph { flex-basis: 20px; }
  .surface-sample .component-glyph svg { width: 20px; height: 20px; }
  .surface-group-example { padding: 20px; }
  .surface-group-example__content { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}

/* 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,
.pw-elements .module-button.waypoint-action,
.magic-button,
.submenu-button.magic-button,
.pw-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"]),
.pw-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"]),
.pw-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),
.pw-elements .module-button.waypoint-action:active:not(:disabled),
.magic-button:active:not(:disabled),
.submenu-button.magic-button:active:not(:disabled),
.pw-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,
.pw-elements .module-button.waypoint-action:disabled,
.magic-button:is(:disabled, [aria-disabled="true"]),
.submenu-button.magic-button:is(:disabled, [aria-disabled="true"]),
.pw-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, .pw-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, .pw-task-card__header, .component-title-row) { padding-right: 36px; }
.card-has-tools { position: relative; }
.card-has-tools :is(.element-heading, .pw-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; }
.pw-task-card.card-has-tools .pw-task-card__header h3 { min-height: 44px; }
.pw-task-card .card-header-tools { top: 20px; }
.card-refresh,
.pw-elements .card-refresh,
.card-open-plugin,
.pw-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, .pw-elements .module-button.waypoint-action, .card-refresh, .card-open-plugin { transition: none; }
  .waypoint-action:hover:not(:disabled), .submenu-button.waypoint-action:hover:not(:disabled), .pw-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), .pw-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; } }

/* Glass / Sunset presentation primitives. Load tokens.css and submenu.css first.
   These classes style content only; they do not create product state or actions. */
.component-title-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.component-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.component-title :is(h2,h3,h4) { margin: 0; font: inherit; font-size: 14px; font-weight: 600; line-height: 1.4; }
.component-title-row > :is(button,a,.component-actions) { flex: 0 0 auto; margin-left: auto; }
.component-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.component-glyph { display: grid; place-items: center; flex: 0 0 24px; }
.component-glyph svg { display: block; width: 24px; height: 24px; }
.component-card { position: relative; min-width: 0; padding: 20px; border: 1px solid var(--glass-edge); border-radius: 14px; background: var(--glass-face), var(--glass-fill); box-shadow: var(--glass-bevel), var(--glass-shadow); color: inherit; }
.component-card::before { content: ""; position: absolute; inset: -1px; padding: 1px; border-radius: inherit; background: var(--glass-rim); -webkit-mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); mask-composite: exclude; pointer-events: none; }
.component-card > p { margin: 20px 0; max-width: 65ch; font-size: 14px; line-height: 1.65; }
.component-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 24px; font-size: 11px; color: color-mix(in srgb,currentColor 70%,transparent); }
.component-card:not([data-state="selected"]) [data-accent] { fill: currentColor; fill-opacity: .2; }
.component-card:not([data-state="selected"]) [data-accent-stroke] { stroke: currentColor; }
.component-card[data-state="selected"], .component-pill[data-state="selected"], .component-toggle[aria-pressed="true"] { border-color: transparent; }
:is(.component-card,.component-pill)[data-state="selected"]::after, .component-toggle[aria-pressed="true"]::after { content: ""; position: absolute; inset: -1px; padding: 1px; border-radius: inherit; background: var(--signature-gradient); -webkit-mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); mask-composite: exclude; pointer-events: none; }
.component-card[data-state="waypoint"]::after { content: ""; position: absolute; top: -1px; left: 20px; width: 104px; height: 1px; background: linear-gradient(90deg,transparent,var(--waypoint-color),transparent); }
.component-pill { position: relative; display: inline-flex; align-items: center; gap: 7px; min-height: 28px; padding: 4px 10px; border: 1px solid var(--submenu-edge); border-radius: 999px; background: var(--glass-face), var(--submenu-fill); box-shadow: var(--glass-bevel); color: inherit; font: 500 11px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; white-space: nowrap; }
.component-pill[data-state="waypoint"]::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--waypoint-color); }
.component-pill[data-state="review"] { border-style: dashed; }
.component-pill[data-state="muted"] { border-color: transparent; background: transparent; box-shadow: none; color: color-mix(in srgb,currentColor 68%,transparent); }
.component-toggle { position: relative; }
.component-toggle[aria-pressed="true"] { background: var(--glass-face), var(--submenu-hover-fill); }
@media (max-width: 480px) { .component-card { padding: 16px; } .component-title-row { gap: 10px; } .component-title { gap: 8px; } }

/* Transparent components. Their host supplies the backdrop and foreground. */
.glass-surface {
  position: relative;
  isolation: isolate;
  border: 1px solid var(--glass-edge);
  border-radius: var(--glass-radius);
  background: var(--glass-face), var(--glass-fill);
  box-shadow: var(--glass-bevel), var(--glass-shadow);
}
.glass-surface::before {
  content: "";
  position: absolute;
  inset: -1px;
  padding: 1px;
  border-radius: inherit;
  background: var(--glass-rim);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.glass-surface:where([data-waypoint]:not([data-waypoint="none"]))::after {
  content: "";
  position: absolute;
  top: -1px;
  left: var(--waypoint-x, 50%);
  width: 104px;
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--waypoint-color), transparent);
  opacity: 0.84;
  pointer-events: none;
}
.waypoint-wash {
  position: absolute;
  top: 0;
  left: var(--waypoint-x, 50%);
  width: min(148px, 30%);
  height: 72px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--waypoint-color) 7.5%, transparent), transparent 70%);
  opacity: 0;
  pointer-events: none;
}
.glass-surface[data-waypoint]:not([data-waypoint="none"]) .waypoint-wash { opacity: 1; }
.glass-dock {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: 100%;
  padding: 12px 6px;
  background: transparent;
}
.dock-button {
  position: relative;
  display: grid;
  place-items: start center;
  flex: 0 0 48px;
  width: 48px;
  height: 56px;
  padding: 0;
  color: inherit;
  text-decoration: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.icon-glass {
  --icon-fill: rgb(255 255 255 / 0.035);
  position: relative;
  display: grid;
  place-items: center;
  width: var(--icon-rest-size);
  height: var(--icon-rest-size);
  border: 1px solid var(--glass-edge);
  border-radius: var(--icon-radius);
  background: var(--glass-face), var(--icon-fill);
  box-shadow: var(--glass-bevel), var(--glass-shadow-small);
  transform-origin: top center;
  transition: transform 240ms var(--motion-ease), background-color 180ms var(--motion-ease), border-color 180ms var(--motion-ease), box-shadow 180ms var(--motion-ease);
}
.icon-glass::before {
  content: "";
  position: absolute;
  inset: -1px;
  padding: 1px;
  border-radius: inherit;
  background: var(--glass-rim);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.icon-glass svg { display: block; width: 24px; height: 24px; overflow: visible; }
.dock-button:not(:is([aria-pressed="true"], [aria-current="page"])) [data-accent] { fill: currentColor; fill-opacity: 0.2; }
.dock-button:not(:is([aria-pressed="true"], [aria-current="page"])) [data-accent-stroke] { stroke: currentColor; }
.dock-button:is([aria-pressed="true"], [aria-current="page"]) .icon-glass {
  transform: scale(calc(54 / 42));
  border-color: transparent;
}
.dock-button:is([aria-pressed="true"], [aria-current="page"]) .icon-glass::before {
  content: "";
  position: absolute;
  inset: -1px;
  padding: 1px;
  border-radius: inherit;
  background: var(--signature-gradient);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.dock-button:is([aria-pressed="true"], [aria-current="page"])::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  width: 16px;
  height: 3px;
  transform: translateX(-50%);
  border-radius: 2px;
  background: var(--signature-gradient);
}
.dock-button[data-next="true"]:not(:is([aria-pressed="true"], [aria-current="page"]))::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -3px;
  width: 4px;
  height: 4px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--waypoint-color);
}
.dock-button:hover:not(:disabled):not([aria-disabled="true"]):not(:is([aria-pressed="true"], [aria-current="page"])) .icon-glass { transform: scale(1.12); }
.dock-button:is(:hover, :focus-visible):not(:disabled):not([aria-disabled="true"]) .icon-glass { background: var(--glass-face), var(--action-hover-fill); box-shadow: var(--glass-bevel), var(--action-hover-shadow); }
.dock-button:is(:hover, :focus-visible):not(:disabled):not([aria-disabled="true"]):not(:is([aria-pressed="true"], [aria-current="page"])) .icon-glass { border-color: var(--action-hover-edge); }
.dock-button:focus-visible { outline: 2px solid var(--electric-blue); outline-offset: 6px; border-radius: 12px; }
.dock-tooltip {
  position: absolute;
  left: 50%;
  top: calc(100% + 10px);
  transform: translateX(-50%);
  padding: 5px 9px;
  border-radius: 6px;
  color: var(--porcelain);
  background: var(--ink);
  font: 500 11px/1.2 ui-sans-serif, system-ui, sans-serif;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
}
.dock-button:is(:hover, :focus-visible) .dock-tooltip { opacity: 1; }
[data-host="light"] {
  color: var(--ink);
  --glass-fill: rgb(255 255 255 / 0.025);
}
[data-host="light"] .icon-glass { --icon-fill: rgb(255 255 255 / 0.045); }
[data-host="light"] .dock-button[data-next="true"]:not(:is([aria-pressed="true"], [aria-current="page"]))::after { box-shadow: 0 0 0 1px rgb(23 23 25 / 0.35); }
@media (prefers-reduced-motion: reduce) { .icon-glass { transition: none; } }