/* Halo hero: colours follow the active tenant palette in both application themes. */
.surux-page-hero:has(.surux-page-hero-halo) {
  --surux-hero-accent: var(--surux-primary);
  --surux-hero-bright: color-mix(in srgb, var(--surux-hero-accent) 48%, white);
  --surux-hero-deep: color-mix(in srgb, var(--surux-hero-accent) 25%, #111a17);
  --surux-hero-panel: color-mix(in srgb, var(--surux-hero-accent) 7%, #090e0c);
  --surux-hero-soft: color-mix(in srgb, var(--surux-hero-bright) 32%, #f1f5f3);
  --surux-hero-text: #f8faf9;
  --surux-hero-label: var(--surux-hero-bright);
  --surux-hero-glow-full: color-mix(in srgb, var(--surux-hero-accent) 45%, transparent);
  container-type: inline-size;
  display: block;
  padding: 0;
  overflow: visible;
  border: var(--surux-border-width) solid transparent;
  border-radius: var(--surux-radius-hero-halo, 1.1rem);
  background: linear-gradient(140deg, var(--surux-hero-deep), var(--surux-hero-panel) 72%) padding-box,
    linear-gradient(135deg, var(--surux-hero-bright), var(--surux-hero-accent) 30%, var(--surux-hero-deep) 65%, var(--surux-hero-accent)) border-box;
  box-shadow: 0 .8rem 1.9rem #00000035, 0 0 1.75rem color-mix(in srgb, var(--surux-hero-accent) 16%, transparent);
  color: var(--surux-hero-text);
}
/* Night is a legacy dark workspace even when the selected appearance is light. */
/* Light heroes share the page's surfaces; the tenant colour stays an accent. */
[data-bs-theme="light"]:not([data-surux-theme="night"]) .surux-page-hero:has(.surux-page-hero-halo) {
  --surux-hero-deep: color-mix(in srgb, var(--surux-hero-accent) 5%, var(--surux-surface));
  --surux-hero-panel: var(--surux-surface);
  --surux-hero-text: var(--surux-text);
  --surux-hero-soft: color-mix(in srgb, var(--surux-text) 75%, var(--surux-muted));
  --surux-hero-label: color-mix(in srgb, var(--surux-hero-accent) 85%, var(--surux-text));
  --surux-hero-line: color-mix(in srgb, var(--surux-hero-accent) 14%, var(--surux-border));
  --surux-hero-glow: color-mix(in srgb, var(--surux-hero-accent) 14%, transparent);
  --surux-hero-glow-full: color-mix(in srgb, var(--surux-hero-accent) 18%, transparent);
  --surux-hero-ring: color-mix(in srgb, var(--surux-hero-accent) 12%, transparent);
  --surux-hero-ring-shadow: 0 0 0 1rem color-mix(in srgb, var(--surux-hero-accent) 3%, transparent), 0 0 0 2rem color-mix(in srgb, var(--surux-hero-accent) 2%, transparent);
  --surux-hero-mark-ink: var(--surux-hero-label);
  --surux-hero-mark-background: linear-gradient(145deg, var(--surux-surface), color-mix(in srgb, var(--surux-hero-accent) 16%, var(--surux-surface)));
  --surux-hero-mark-shadow: 0 .15rem .6rem color-mix(in srgb, var(--surux-hero-accent) 12%, transparent), inset 0 1px 0 #ffffff99;
  --surux-hero-menu-shadow: 0 .5rem 1.25rem #0f172a1a;
  --surux-hero-hover: color-mix(in srgb, var(--surux-hero-accent) 8%, transparent);
  --surux-hero-hover-filter: brightness(.97);
  --surux-hero-warning: var(--surux-workflow-submitted-color);
  --surux-hero-danger: var(--surux-workflow-rejected-color);
  border-color: var(--surux-hero-line);
  background: linear-gradient(140deg, var(--surux-hero-deep), var(--surux-hero-panel) 72%) padding-box;
  box-shadow: 0 .35rem 1rem #0f172a0d, inset 0 1px 0 #ffffffcc;
}
.surux-page-hero-halo.surux-page-hero-content {
  position: relative;
  display: block;
  padding: 1rem;
  border-radius: inherit;
  isolation: isolate;
  min-width: 0;
}
.surux-page-hero-halo .surux-page-hero-art {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(ellipse at 93% -25%, var(--surux-hero-glow, color-mix(in srgb, var(--surux-hero-accent) 86%, transparent)), transparent 66%);
}
.surux-page-hero-halo .surux-page-hero-art::before {
  content: '';
  position: absolute;
  width: 12rem;
  height: 10rem;
  right: -6rem;
  top: -6.5rem;
  border: 1px solid var(--surux-hero-ring, #ffffff25);
  border-radius: 50%;
  box-shadow: var(--surux-hero-ring-shadow, 0 0 0 1rem #ffffff06, 0 0 0 2rem #ffffff03);
}
.surux-page-hero-halo .surux-page-hero-heading { align-items: flex-start; gap: .65rem; padding: 0; }
.surux-page-hero-halo .surux-page-hero-mark {
  display: grid;
  place-items: center;
  flex: 0 0 2.2rem;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: var(--surux-hero-mark-background, linear-gradient(145deg, #fffff1, var(--surux-hero-bright)));
  color: var(--surux-hero-mark-ink, var(--surux-hero-panel));
  box-shadow: var(--surux-hero-mark-shadow, 0 0 1.1rem color-mix(in srgb, var(--surux-hero-accent) 40%, transparent), inset 0 1px 0 #ffffff99);
}
.surux-page-hero-halo .surux-page-hero-mark i { color: inherit; font-size: 1rem; }
.surux-page-hero-halo .surux-page-hero-copy .surux-eyebrow { color: var(--surux-hero-label); font-size: .6875rem; letter-spacing: .08em; }
.surux-page-hero-halo .surux-page-hero-copy strong {
  color: var(--surux-hero-text);
  font-size: 1.25rem;
  font-weight: 750;
  line-height: 1.15;
  letter-spacing: -.025em;
  white-space: normal;
  overflow-wrap: anywhere;
  overflow: visible;
}
.surux-page-hero-halo .surux-page-hero-tools { display: flex; align-items: center; flex-shrink: 0; gap: .3rem; }
html .surux-page-hero-halo.surux-page-hero-content .surux-page-hero-tools .btn.surux-button.surux-command-button,
html .surux-page-hero-halo.surux-page-hero-content .surux-hero-action-flyout > .btn.surux-button.surux-command-overflow-trigger {
  width: 2.15rem !important;
  min-width: 2.15rem !important;
  height: 2.15rem !important;
  min-height: 2.15rem !important;
  padding: 0 !important;
  border: 1px solid var(--surux-hero-line, #ffffff40) !important;
  border-radius: .55rem !important;
  color: var(--surux-hero-text) !important;
  background: color-mix(in srgb, var(--surux-hero-panel) 65%, transparent) !important;
  box-shadow: inset 0 1px 0 #ffffff18 !important;
}
html .surux-page-hero-halo.surux-page-hero-content .btn.surux-button.surux-command-button.surux-page-hero-toggle .surux-command-button-icon { transform: none !important; }
.surux-page-hero-halo .surux-page-hero-description { color: var(--surux-hero-soft); margin: .8rem 0 0; font-size: .8rem; line-height: 1.5; }
.surux-page-hero-halo .surux-page-hero-summary-facts {
  margin: .85rem 0 0;
  padding: .65rem .8rem;
  border: 1px solid var(--surux-hero-line, #ffffff25);
  border-radius: .7rem;
  background: var(--surux-hero-panel);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.surux-page-hero-halo .surux-page-hero-summary-facts > .surux-page-hero-fact {
  display: flex; flex-direction: column-reverse; gap: .1rem;
  padding: 0; border: 0; background: transparent;
}
.surux-page-hero-halo .surux-page-hero-summary-facts > .surux-page-hero-fact + .surux-page-hero-fact {
  padding-inline-start: 1rem; margin-inline-start: .8rem; border-inline-start: 1px solid var(--surux-hero-line, #ffffff26);
}
.surux-page-hero-halo .surux-page-hero-summary-facts dt { color: var(--surux-hero-soft); font-size: .6875rem; }
.surux-page-hero-halo .surux-page-hero-summary-facts dd,
.surux-page-hero-halo .surux-page-hero-summary-facts .surux-page-hero-fact-value { color: var(--surux-hero-text); font-size: 1.7rem; line-height: 1.12; letter-spacing: -.025em; }
.surux-page-hero-halo .surux-page-hero-summary-facts .is-warning .surux-page-hero-fact-value { color: var(--surux-hero-warning, #ffdaa0); }
.surux-page-hero-halo .surux-page-hero-summary-facts .is-text .surux-page-hero-fact-value { font-size: 1.1rem; }
.surux-page-hero-halo .surux-page-hero-fact .surux-page-hero-fact-value { overflow-wrap: anywhere; }
.surux-page-hero:has(.surux-page-hero-halo) .surux-page-hero-details {
  position: static;
  inset: auto;
  display: none;
  margin: 0; padding: 0; border: 0; border-radius: 0;
  background: transparent; box-shadow: none;
  transform: none; transition: none;
}
.surux-page-hero:has(.surux-page-hero-halo) .is-full .surux-page-hero-details {
  display: block; margin-top: 1.05rem; opacity: 1; visibility: visible; pointer-events: auto;
}
.surux-page-hero:has(.surux-page-hero-halo) .surux-page-hero-halo .surux-page-hero-details-inner {
  max-height: none; overflow: visible; padding: 0;
}
.surux-page-hero-halo .surux-page-hero-action-shelf {
  display: flex; align-items: center; justify-content: flex-end; gap: .6rem;
  margin: 0 -1rem; padding: .85rem 1rem;
  border-top: 1px solid var(--surux-hero-line, #ffffff30);
  background: var(--surux-hero-panel);
}
.surux-page-hero-halo .surux-page-hero-actions { display: flex; flex: 1; gap: .6rem; min-width: 0; }
.surux-page-hero-halo .surux-page-hero-actions:not(:has(.surux-hero-action-group)) { display: none; }
.surux-page-hero-halo .surux-hero-action-group { display: flex; flex: 0 0 auto; align-items: center; gap: .6rem; }
.surux-page-hero-halo .surux-hero-guide-action { display: flex; flex: 0 0 auto; align-items: center; }
.surux-page-hero-halo .surux-hero-action-group > div { display: contents; }
.surux-page-hero-halo .surux-page-hero-action-shelf.is-measuring { overflow: hidden; }
.surux-page-hero-halo .surux-page-hero-action-shelf.is-initial-measure { visibility: hidden; }
.surux-page-hero-halo .is-measuring .surux-hero-action-flyout { position: absolute; }
.surux-page-hero-halo .surux-hero-spillover-group,
.surux-page-hero-halo .surux-hero-spillover-group > div { display: contents; }
/* Use the shared icon-only variants at their natural size. */
.surux-page-hero-halo .surux-page-hero-actions form { display: inline-flex; flex: 0 0 auto; }
.surux-page-hero-halo .surux-page-hero-actions .surux-command-button { flex: 0 0 auto; }
html .surux-page-hero-halo.surux-page-hero-content .surux-hero-action-flyout .surux-command-overflow-panel .surux-command-button-text {
  position: static !important; width: auto !important; height: auto !important;
  padding: 0 !important; margin: 0 !important; clip: auto !important; clip-path: none !important;
  overflow: visible !important; white-space: normal !important; text-align: start; line-height: 1.3;
}
html .surux-page-hero-halo.surux-page-hero-content .btn.surux-button.surux-command-button[hidden] { display: none !important; }
.surux-page-hero-halo .surux-page-hero-details-heading { display: flex; flex-wrap: wrap; margin-top: .9rem; gap: .65rem; }
.surux-page-hero-halo .surux-page-hero-details-label { color: var(--surux-hero-soft); font-size: .6875rem; }
.surux-page-hero-halo .surux-page-hero-freshness { color: var(--surux-hero-soft); font-size: .6875rem; }
/* Slate's lighter badge surface needs the full-contrast hero text. */
[data-surux-appearance="slate"] .surux-page-hero-halo .surux-page-hero-freshness { color: var(--surux-hero-text); }
.surux-page-hero-halo .surux-page-hero-full-facts { margin-top: .8rem; gap: .8rem; }
.surux-page-hero-halo .surux-page-hero-full-facts:empty { display: none; }
.surux-page-hero-halo .surux-page-hero-full-facts > .surux-page-hero-fact { padding: 0; background: transparent; border: 0; }
.surux-page-hero-halo .surux-page-hero-full-facts dt { color: var(--surux-hero-soft); font-size: .6875rem; }
.surux-page-hero-halo .surux-page-hero-full-facts dd { color: var(--surux-hero-text); font-size: .8rem; }
.surux-page-hero-halo.is-full { padding: 1.35rem; }
.surux-page-hero-halo.is-full .surux-page-hero-art::before { width: 19rem; height: 16rem; left: 50%; top: -10rem; transform: translateX(-50%); }
.surux-page-hero-halo.is-full .surux-page-hero-art { background: radial-gradient(ellipse at 75% -25%, var(--surux-hero-glow-full, var(--surux-hero-accent)), transparent 68%); }
.surux-page-hero-halo.is-full .surux-page-hero-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: .85rem; text-align: center; }
.surux-page-hero-halo.is-full .surux-page-hero-mark { grid-column: 2; width: 2.5rem; height: 2.5rem; }
.surux-page-hero-halo.is-full .surux-page-hero-tools { grid-column: 3; grid-row: 1; justify-self: end; }
.surux-page-hero-halo.is-full .surux-page-hero-copy { grid-column: 1 / -1; grid-row: 2; }
.surux-page-hero-halo.is-full .surux-eyebrow { justify-content: center; }
.surux-page-hero-halo.is-full .surux-page-hero-copy strong { font-size: 1.75rem; }
.surux-page-hero-halo.is-full .surux-page-hero-description { text-align: center; font-size: .875rem; }
.surux-page-hero-halo.is-full .surux-page-hero-summary-facts { margin-top: 1.4rem; padding: 1.05rem; text-align: center; }
.surux-page-hero-halo.is-full .surux-page-hero-summary-facts .surux-page-hero-fact-value { font-size: 2.85rem; }
.surux-page-hero-halo.is-full .surux-page-hero-summary-facts .surux-page-hero-fact + .surux-page-hero-fact .surux-page-hero-fact-value { font-size: 1.85rem; }
.surux-page-hero-halo.is-full .surux-page-hero-summary-facts .is-text .surux-page-hero-fact-value { font-size: 1.6rem; }
.surux-page-hero-halo.is-full .surux-page-hero-summary-facts .is-text + .is-text .surux-page-hero-fact-value { font-size: 1.2rem; }
.surux-page-hero-halo.is-full .surux-page-hero-action-shelf { margin-inline: -1.35rem; padding-inline: 1.35rem; }
.surux-page-hero-halo .surux-hero-action-flyout { flex: 0 0 auto; position: relative; }
.surux-page-hero-halo .surux-hero-action-flyout .surux-command-overflow-panel {
  inset-inline-start: auto; inset-inline-end: 0; left: auto; right: 0;
  width: 15rem; min-width: 0; max-width: calc(100cqw - 2rem);
  grid-auto-rows: max-content; align-content: start;
  padding: .55rem; border-radius: .75rem;
  border: 1px solid var(--surux-hero-line, color-mix(in srgb, var(--surux-hero-bright) 45%, var(--surux-hero-panel)));
  background: var(--surux-hero-panel); color: var(--surux-hero-text);
  box-shadow: var(--surux-hero-menu-shadow, 0 .8rem 1.75rem #00000070);
}
html .surux-page-hero-halo.surux-page-hero-content .surux-hero-action-flyout .surux-command-overflow-panel .btn.surux-button.surux-command-button {
  display: flex !important; width: 100% !important; height: auto !important; min-height: 2.5rem !important;
  /* Full-width menu rows must not inherit the square icon-button ratio. */
  aspect-ratio: auto;
  padding: .6rem !important; gap: .6rem !important; justify-content: flex-start !important;
  border: 0 !important; border-radius: .4rem !important;
  background: transparent !important; box-shadow: none !important; color: var(--surux-hero-text) !important;
}
html .surux-page-hero-halo .surux-hero-action-flyout .surux-command-overflow-panel .surux-command-button::before,
html .surux-page-hero-halo .surux-hero-action-flyout .surux-command-overflow-panel .surux-command-button::after {
  display: none !important;
}
html .surux-page-hero-halo .surux-hero-action-flyout .surux-command-overflow-panel .surux-command-button .surux-command-button-icon {
  width: 1rem !important; height: 1rem !important; flex: 0 0 1rem !important;
  padding: 0 !important; border: 0 !important; background: transparent !important;
  box-shadow: none !important; color: inherit !important;
}
html .surux-page-hero-halo.surux-page-hero-content .surux-hero-action-flyout .surux-command-overflow-panel .btn.surux-button.surux-command-button:hover,
html .surux-page-hero-halo.surux-page-hero-content .surux-hero-action-flyout .surux-command-overflow-panel .btn.surux-button.surux-command-button:focus-visible {
  background: var(--surux-hero-hover, #ffffff12) !important;
}
html .surux-page-hero-halo.surux-page-hero-content .surux-hero-action-flyout .surux-command-overflow-panel .btn.surux-button.surux-command-button.surux-button-tone-destructive { color: var(--surux-hero-danger, var(--surux-danger)) !important; }
html .surux-page-hero-halo.surux-page-hero-content .btn.surux-button.surux-command-button:focus-visible { outline: 2px solid var(--surux-hero-label); outline-offset: 3px; }
.surux-page-hero-halo .surux-hero-action-flyout .surux-command-overflow-panel.surux-hero-flyout-below {
  top: calc(100% + .55rem); bottom: auto;
}
.surux-page-lead:has(.surux-hero-action-flyout[open]) { z-index: 70; }
@container (max-width: 350px) {
  .surux-page-hero-halo.surux-page-hero-content { padding: .8rem; }
  .surux-page-hero-halo .surux-page-hero-copy strong { font-size: 1.1rem; }
  .surux-page-hero-halo.is-full .surux-page-hero-copy strong { font-size: 1.5rem; }
  .surux-page-hero-halo.is-full .surux-page-hero-summary-facts .surux-page-hero-fact-value { font-size: 2.25rem; }
  .surux-page-hero-halo.is-full .surux-page-hero-summary-facts .is-text .surux-page-hero-fact-value { font-size: 1.35rem; }
  .surux-page-hero-halo .surux-page-hero-action-shelf { margin-inline: -.8rem; padding-inline: .8rem; }
}
@media (pointer: coarse) {
  html .surux-page-hero-halo.surux-page-hero-content .surux-page-hero-tools .btn.surux-button.surux-command-button,
  html .surux-page-hero-halo.surux-page-hero-content .surux-hero-action-flyout > .btn.surux-button.surux-command-overflow-trigger {
    min-width: 2.75rem !important; min-height: 2.75rem !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .surux-page-hero-halo *, .surux-page-hero-halo *::before { transition: none !important; animation: none !important; }
}

html .surux-page-hero-halo.surux-page-hero-content .btn.surux-button.surux-command-button:not(:disabled):not([aria-disabled="true"]):hover {
  filter: var(--surux-hero-hover-filter, brightness(1.12)) !important;
}
html .surux-page-hero-halo.surux-page-hero-content .btn.surux-button.surux-command-button:disabled,
html .surux-page-hero-halo.surux-page-hero-content .btn.surux-button.surux-command-button[aria-disabled="true"] {
  opacity: .45; cursor: not-allowed;
}

.surux-page-hero-tool-actions {
  display: flex;
  align-items: center;
  gap: .35rem;
}
.surux-page-hero-halo:not(.surux-page-hero-drawer) .surux-page-hero-details .surux-page-hero-description {
  display: none;
}
.surux-page-hero-drawer > .surux-page-hero-description {
  display: none;
}
.surux-page-hero:has(.surux-page-hero-drawer) {
  overflow: visible;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}
.surux-page-hero-drawer {
  overflow: visible;
  padding: 0;
}
.surux-page-hero-drawer .surux-page-hero-heading {
  position: relative;
  z-index: 3;
  padding: 1rem;
  border-radius: var(--surux-radius-hero-halo, 1.1rem);
  background: linear-gradient(140deg, var(--surux-hero-deep), var(--surux-hero-panel) 72%) padding-box,
    linear-gradient(135deg, var(--surux-hero-bright), var(--surux-hero-accent) 30%, var(--surux-hero-deep) 65%, var(--surux-hero-accent)) border-box;
  border: 1px solid transparent;
  box-shadow: 0 .8rem 1.9rem #00000035, 0 0 1.75rem color-mix(in srgb, var(--surux-hero-accent) 16%, transparent);
}
.surux-page-hero-drawer .surux-page-hero-art {
  z-index: 2;
  border-radius: var(--surux-radius-hero-halo, 1.1rem);
  overflow: hidden;
}
.surux-page-hero-drawer.is-full .surux-page-hero-heading {
  display: flex;
  grid-template-columns: none;
  text-align: start;
}
.surux-page-hero-drawer.is-full .surux-page-hero-mark,
.surux-page-hero-drawer.is-full .surux-page-hero-copy,
.surux-page-hero-drawer.is-full .surux-page-hero-tools {
  grid-column: auto;
  grid-row: auto;
  justify-self: auto;
}
.surux-page-hero-drawer.is-full .surux-page-hero-mark {
  width: 2.2rem;
  height: 2.2rem;
}
.surux-page-hero-drawer.is-full .surux-eyebrow {
  justify-content: flex-start;
}
.surux-page-hero-drawer.is-full .surux-page-hero-copy strong {
  font-size: 1.25rem;
}
.surux-page-hero-drawer.is-full {
  padding: 0;
}
.surux-page-hero:has(.surux-page-hero-drawer) .surux-page-hero-details,
.surux-page-hero:has(.surux-page-hero-drawer) .is-full .surux-page-hero-details {
  position: absolute !important;
  z-index: 1 !important;
  left: .45rem !important;
  right: .45rem !important;
  top: 2.15rem !important;
  display: none !important;
  margin: 0 !important;
  padding: 2.7rem .95rem 1.05rem !important;
  border: 1px solid color-mix(in srgb, var(--surux-hero-accent) 34%, #ffffff22) !important;
  border-top: 0 !important;
  border-radius: 0 0 1.15rem 1.15rem !important;
  background: linear-gradient(180deg, var(--surux-hero-deep), var(--surux-hero-panel) 78%) !important;
  box-shadow: 0 1.4rem 2.4rem #00000073, inset 0 1px 0 color-mix(in srgb, var(--surux-hero-accent) 22%, transparent) !important;
  transform-origin: top center;
  pointer-events: none;
}
.surux-page-hero:has(.surux-page-hero-drawer) .is-full .surux-page-hero-details {
  display: block !important;
  animation: surux-hero-drawer-slide .42s cubic-bezier(.16, 1, .3, 1) both;
}
.surux-page-hero:has(.surux-page-hero-drawer) .is-full .surux-page-hero-details-inner {
  pointer-events: auto;
}
.surux-page-hero:has(.surux-page-hero-drawer) .surux-page-hero-details-inner {
  position: relative;
  max-height: none;
  overflow: visible;
  padding: 0;
}
.surux-page-hero:has(.surux-page-hero-drawer) .surux-page-hero-details-inner::before {
  content: "";
  display: block;
  width: 2.4rem;
  height: .22rem;
  margin: 0 auto .7rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surux-hero-bright) 55%, #ffffff30);
  opacity: .55;
}
.surux-page-hero:has(.surux-page-hero-drawer) .surux-page-hero-description {
  margin: 0;
  color: color-mix(in srgb, var(--surux-hero-text) 88%, var(--surux-hero-soft));
  font-size: .875rem;
  line-height: 1.45;
  text-align: center;
}
@keyframes surux-hero-drawer-slide {
  from { opacity: 0; transform: translateY(-1.15rem) scaleY(.86); }
  to { opacity: 1; transform: translateY(0) scaleY(1); }
}
@media (prefers-reduced-motion: reduce) {
  .surux-page-hero:has(.surux-page-hero-drawer) .is-full .surux-page-hero-details {
    animation: none;
  }
}
@media (max-width: 991.98px) {
  .surux-page-hero:has(.surux-page-hero-drawer) .is-full .surux-page-hero-details {
    position: relative;
    top: auto;
    left: .45rem;
    right: .45rem;
    width: auto;
    margin: -.75rem .45rem 0;
    animation: none;
  }
}

/* Desktop: keep the compact tile and drop details over the page. Mobile still
   grows the lead and pushes search/list. */
@media (min-width: 992px) {
  .surux-page-lead:has(.surux-page-hero-halo.is-full) {
    z-index: 70;
  }
  .surux-page-hero:has(.surux-page-hero-halo) {
    z-index: 2;
  }
  .surux-page-hero:has(.surux-page-hero-halo.is-full) {
    overflow: visible;
  }
  .surux-page-hero-halo.is-full {
    padding: 1rem;
  }
  .surux-page-hero-halo.is-full .surux-page-hero-heading {
    display: flex;
    grid-template-columns: none;
    text-align: start;
  }
  .surux-page-hero-halo.is-full .surux-page-hero-mark,
  .surux-page-hero-halo.is-full .surux-page-hero-copy,
  .surux-page-hero-halo.is-full .surux-page-hero-tools {
    grid-column: auto;
    grid-row: auto;
    justify-self: auto;
  }
  .surux-page-hero-halo.is-full .surux-page-hero-mark {
    width: 2.2rem;
    height: 2.2rem;
  }
  .surux-page-hero-halo.is-full .surux-eyebrow {
    justify-content: flex-start;
  }
  .surux-page-hero-halo.is-full .surux-page-hero-copy strong {
    font-size: 1.25rem;
  }
  .surux-page-hero-halo.is-full .surux-page-hero-description {
    text-align: start;
    font-size: .8rem;
  }
  .surux-page-hero:has(.surux-page-hero-halo:not(.surux-page-hero-drawer)) .is-full .surux-page-hero-details {
    position: absolute;
    inset-inline: 0;
    top: calc(100% + .45rem);
    z-index: 6;
    display: block;
    margin: 0;
    padding: .85rem;
    border: 1px solid var(--surux-hero-line, #ffffff30);
    border-radius: .9rem;
    background: linear-gradient(140deg, var(--surux-hero-deep), var(--surux-hero-panel) 72%);
    box-shadow: 0 1.15rem 2.6rem #00000059, 0 .35rem .9rem #00000033;
  }
  .surux-page-hero-halo.is-full .surux-page-hero-action-shelf {
    margin: 0;
    padding: .15rem 0 0;
    border-top: 0;
    background: transparent;
    justify-content: flex-end;
  }
}

/* Refresh pending (SuruXPageHero RefreshPending): the page holds newer data than it shows.
   Chosen signal (Stefan, 13 Sep: "K + I", glow following the sweep): a spark travels round the
   tile's border with a soft attention glow following it outside the edge, over a slow
   attention-to-accent wash drifting through the tile, plus a badge on the Refresh button.
   Replaces the workflow board's "changed" bar. */
@property --surux-hero-orbit {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
/* The glow: the spark's gradient on the same angle and timing, as a blurred band just outside the
   tile, so it travels with the spark instead of pulsing in place (at 40% strength, Stefan 13 Sep). */
.surux-page-hero:has(.surux-page-hero-refresh-pending)::before {
  content: "";
  position: absolute;
  inset: -12px;
  z-index: 0;
  padding: 12px;
  border-radius: calc(var(--surux-radius-hero-halo, 1.1rem) + 12px);
  pointer-events: none;
  filter: blur(9px);
  background: conic-gradient(from var(--surux-hero-orbit),
    transparent 0 70%,
    color-mix(in srgb, var(--surux-warning) 10%, transparent) 80%,
    color-mix(in srgb, var(--surux-warning) 34%, transparent) 91%,
    transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: surux-hero-attention-orbit 3.2s linear infinite;
}
.surux-page-hero-halo.surux-page-hero-refresh-pending::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  padding: 2px;
  border-radius: inherit;
  pointer-events: none;
  background: conic-gradient(from var(--surux-hero-orbit),
    transparent 0 78%,
    color-mix(in srgb, var(--surux-warning) 35%, transparent) 86%,
    var(--surux-warning) 91%,
    transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: surux-hero-attention-orbit 3.2s linear infinite;
}
.surux-page-hero-refresh-pending .surux-page-hero-art::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(120deg,
    transparent,
    color-mix(in srgb, var(--surux-warning) 16%, transparent),
    color-mix(in srgb, var(--surux-primary) 10%, transparent),
    transparent);
  background-size: 300% 300%;
  animation: surux-hero-attention-wash 7s ease-in-out infinite;
}
@keyframes surux-hero-attention-wash {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@keyframes surux-hero-attention-orbit {
  to { --surux-hero-orbit: 360deg; }
}
.surux-page-hero-refresh-slot {
  position: relative;
  display: inline-flex;
}
/* The hero's tool buttons paint from these tokens (with !important), so the pending slot redefines
   the tokens instead of fighting the rule: the Refresh button itself turns amber. */
.surux-page-hero-refresh-slot.is-pending {
  --surux-hero-text: var(--surux-warning);
  --surux-hero-line: color-mix(in srgb, var(--surux-warning) 55%, transparent);
  --surux-hero-panel: color-mix(in srgb, var(--surux-warning) 14%, var(--surux-surface));
}
.surux-page-hero-refresh-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  width: .7rem;
  height: .7rem;
  border: 2px solid var(--surux-surface);
  border-radius: 50%;
  background: var(--surux-warning);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .surux-page-hero:has(.surux-page-hero-refresh-pending) {
    box-shadow: 0 .35rem 1rem #0f172a0d, 0 0 0 3px color-mix(in srgb, var(--surux-warning) 40%, transparent);
  }
  .surux-page-hero:has(.surux-page-hero-refresh-pending)::before {
    animation: none;
    background: none;
  }
  .surux-page-hero-halo.surux-page-hero-refresh-pending::before {
    animation: none;
    background: none;
  }
  .surux-page-hero-refresh-pending .surux-page-hero-art::after {
    animation: none;
    background-position: 50% 50%;
  }
}

.surux-page-hero-refresh-count {
  align-self: center;
  font-size: .75rem;
  font-weight: 600;
  padding-inline: .25rem;
}

/* Summary facts retain their complete value even in the narrow hero lane. */
.surux-page-hero-halo .surux-page-hero-summary-facts dd,
.surux-page-hero-halo .surux-page-hero-summary-facts .surux-page-hero-fact-value {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}