:root,
.surux-card,
.surux-input,
.surux-date-display,
.surux-control-switch,
.surux-private-switch {
  --surux-input-bg: color-mix(in srgb, var(--surux-app-bg) 94%, var(--surux-primary) 6%);
  --surux-input-border: color-mix(in srgb, var(--surux-border) 76%, var(--surux-primary) 24%);
  --surux-input-color: var(--surux-text);
  --surux-disabled-control-border: color-mix(in srgb, var(--surux-border) 78%, var(--surux-app-bg) 22%);
  --surux-disabled-control-bg: color-mix(in srgb, var(--surux-app-bg) 92%, var(--surux-surface-2) 8%);
  --surux-disabled-control-color: color-mix(in srgb, var(--surux-text) 70%, var(--surux-muted) 30%);
  --surux-disabled-control-icon: color-mix(in srgb, var(--surux-muted) 76%, var(--surux-text) 24%);
  --surux-disabled-control-icon-bg: color-mix(in srgb, var(--surux-app-bg) 86%, var(--surux-surface-2) 14%);
  --surux-disabled-control-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .035),
    inset 0 0 0 1px color-mix(in srgb, var(--surux-border) 58%, transparent);
}

html,
body,
* {
  scrollbar-width: thin;
  scrollbar-color: var(--surux-scrollbar-thumb) var(--surux-scrollbar-track);
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar {
  width: var(--surux-scrollbar-size);
  height: var(--surux-scrollbar-size);
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
*::-webkit-scrollbar-track {
  background: var(--surux-scrollbar-track);
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb {
  border: 2px solid var(--surux-scrollbar-thumb-border);
  border-radius: 999px;
  background: var(--surux-scrollbar-thumb);
  background-clip: padding-box;
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
*::-webkit-scrollbar-thumb:hover {
  background: var(--surux-scrollbar-thumb-hover);
}

.surux-card {
  background: color-mix(in srgb, var(--surux-surface) 92%, transparent);
  border: var(--surux-border-width) solid var(--surux-border);
  border-radius: var(--surux-radius-card);
  box-shadow: var(--surux-elevation-card);
}

/* TR-0000982. The summary dialog repeats the card's priority chip outside the card's scope. */
.surux-workflow-priority-low { --surux-workflow-priority-color: var(--surux-workflow-priority-low); }
.surux-workflow-priority-normal,
.surux-workflow-priority-unknown { --surux-workflow-priority-color: var(--surux-muted); }
.surux-workflow-priority-medium,
.surux-workflow-priority-high { --surux-workflow-priority-color: var(--surux-warning); }
.surux-workflow-priority-urgent,
.surux-workflow-priority-critical { --surux-workflow-priority-color: var(--surux-danger); }
.surux-workflow-priority {
  display: inline-flex;
  align-items: center;
  min-height: 1.65rem;
  padding: .15rem .5rem;
  color: var(--surux-text);
  border: 1px solid color-mix(in srgb, var(--surux-workflow-priority-color) 52%, var(--surux-border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--surux-workflow-priority-color) 13%, var(--surux-surface));
  font-size: .72rem;
  font-weight: 700;
}

[data-bs-theme="light"] .surux-card {
  background: color-mix(in srgb, var(--surux-surface) 96%, transparent);
}

.surux-standalone-shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  position: relative;
  isolation: isolate;
  padding: clamp(1rem, 4vw, 3rem);
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--surux-app-bg);
}

.surux-standalone-stage {
  width: min(100%, 26rem);
  display: grid;
  position: relative;
  z-index: 1;
}

.surux-svg-background {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 8%, rgba(var(--surux-primary-rgb), .16), transparent 26rem),
    radial-gradient(circle at 86% 88%, rgba(var(--surux-primary-rgb), .12), transparent 30rem),
    var(--surux-app-bg);
}

.surux-svg-background-canvas {
  width: 100%;
  height: 100%;
  display: block;
  opacity: .92;
  transform-origin: center;
  transform-box: fill-box;
  will-change: transform, opacity;
}

.surux-svg-background-halos,
.surux-svg-background-grid,
.surux-svg-background-shapes,
.surux-svg-background-points {
  transform-origin: center;
  transform-box: fill-box;
  will-change: transform, opacity;
}

.surux-svg-background-animated .surux-svg-background-canvas {
  animation: suruxSvgBackgroundBreathe 56s ease-in-out infinite alternate;
}

.surux-svg-background-animated .surux-svg-background-halos {
  animation: suruxSvgBackgroundHaloDrift 74s ease-in-out infinite alternate;
}

.surux-svg-background-animated .surux-svg-background-grid {
  animation: suruxSvgBackgroundGridDrift 96s linear infinite;
}

.surux-svg-background-animated .surux-svg-background-shapes {
  animation: suruxSvgBackgroundShapeFloat 68s ease-in-out infinite alternate;
}

.surux-svg-background-animated .surux-svg-background-points {
  animation: suruxSvgBackgroundPointPulse 26s ease-in-out infinite alternate;
}

.surux-svg-background-intensity-subtle .surux-svg-background-canvas {
  opacity: .78;
}

.surux-svg-background-intensity-bold .surux-svg-background-canvas {
  opacity: 1;
}

[data-bs-theme="light"] .surux-svg-background {
  background:
    radial-gradient(circle at 10% 6%, rgba(var(--surux-primary-rgb), .14), transparent 24rem),
    radial-gradient(circle at 88% 90%, rgba(var(--surux-primary-rgb), .10), transparent 28rem),
    var(--surux-app-bg);
}

[data-bs-theme="light"] .surux-svg-background-canvas {
  opacity: .68;
}

@keyframes suruxSvgBackgroundBreathe {
  from {
    transform: scale(1) translate3d(0, 0, 0);
  }

  to {
    transform: scale(1.045) translate3d(-1.4%, 1.1%, 0);
  }
}

@keyframes suruxSvgBackgroundHaloDrift {
  from {
    transform: translate3d(-1.2%, -.8%, 0) rotate(-1.4deg);
    opacity: .86;
  }

  to {
    transform: translate3d(1.6%, 1.1%, 0) rotate(1.8deg);
    opacity: 1;
  }
}

@keyframes suruxSvgBackgroundGridDrift {
  from {
    transform: translate3d(-2%, 0, 0);
  }

  to {
    transform: translate3d(2%, 0, 0);
  }
}

@keyframes suruxSvgBackgroundShapeFloat {
  from {
    transform: translate3d(1%, -1.2%, 0) rotate(.8deg);
    opacity: .82;
  }

  to {
    transform: translate3d(-1.3%, 1.4%, 0) rotate(-1.1deg);
    opacity: 1;
  }
}

@keyframes suruxSvgBackgroundPointPulse {
  from {
    transform: translate3d(0, 0, 0);
    opacity: .62;
  }

  to {
    transform: translate3d(.9%, -.7%, 0);
    opacity: .92;
  }
}

@media (prefers-reduced-motion: reduce) {
  .surux-svg-background-animated .surux-svg-background-canvas,
  .surux-svg-background-animated .surux-svg-background-halos,
  .surux-svg-background-animated .surux-svg-background-grid,
  .surux-svg-background-animated .surux-svg-background-shapes,
  .surux-svg-background-animated .surux-svg-background-points {
    animation: none;
    transform: none;
  }
}

.surux-card-size-compact,
.surux-card-size-standard,
.surux-card-size-wide {
  width: 100%;
  margin-inline: auto;
}

.surux-card-size-compact {
  max-width: 26rem;
}

.surux-card-size-standard {
  max-width: 42rem;
}

.surux-card-size-wide {
  max-width: 64rem;
}

.surux-card-padding-none {
  padding: 0;
}

.surux-card-padding-sm {
  padding: 1rem;
}

.surux-card-padding-md {
  padding: 1.25rem;
}

.surux-card-padding-lg {
  padding: clamp(1.35rem, 3vw, 1.85rem);
}

.surux-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: 1.35rem;
}

.surux-edit-section.surux-card-padding-lg {
  padding: .85rem;
}

.surux-edit-section.surux-card-padding-lg > .surux-card-header {
  margin-bottom: .85rem;
}

.surux-card-header .surux-section-heading {
  margin: 0;
}

.surux-card-collapsible > .surux-card-header {
  align-items: flex-start;
  flex-wrap: nowrap;
}

.surux-card-collapsible-header-content {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
}

.surux-card-collapse-toggle {
  flex: 0 0 auto;
  margin-left: auto;
}

.surux-card-collapsible.is-collapsed > .surux-card-header {
  margin-bottom: 0;
}

.surux-card-footer {
  margin-top: 1.35rem;
}

.surux-card-body {
  min-width: 0;
}

.surux-card-density-flush > .surux-card-header {
  padding: .6rem .7rem .5rem;
  margin-bottom: 0;
}

.surux-card-density-flush > .surux-card-body {
  padding: 0 .7rem .7rem;
}

.surux-cell-stack { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; min-width: 0; }
.surux-cell-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.surux-quiet { color: var(--surux-muted); }
.surux-stack {
  min-width: 0;
  display: grid;
}

/* Grid items stretch by default. A button in a stack stays as wide as its icon and label. */
.surux-stack > .surux-button,
.surux-modal-body > .surux-button,
.surux-modal-body .surux-stack > .surux-button {
  justify-self: start;
  width: fit-content;
  max-width: 100%;
}

.surux-action-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: flex-start;
  gap: .5rem;
  min-width: 0;
}

.surux-action-row > .surux-picker {
  flex: 1 1 12rem;
  min-width: min(100%, 12rem);
}

/* The shared button centres itself on the row. Beside a labelled field that puts the button beside the label. Pin it to the input. */
.surux-action-row > .surux-button {
  align-self: flex-end;
}

.surux-stack-gap-none {
  gap: 0;
}

.surux-stack-gap-xs {
  gap: .35rem;
}

.surux-stack-gap-sm {
  gap: .62rem;
}

.surux-stack-gap-md {
  gap: .85rem;
}

.surux-stack-gap-lg {
  gap: 1rem;
}

.surux-stack-gap-xl {
  gap: 1.35rem;
}

.surux-loading-shimmer,
.surux-list-loading-shimmer {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-width: 0;
  min-height: calc(var(--surux-loading-rows, 7) * 3.35rem);
}

/* Upper content, not the middle of a tall or full-viewport box. Edit pages and list pages share it. */
.surux-loading-mark-offset {
  padding-top: 4rem;
}

/* The loading tab rail must not grow and push this mark to the bottom of the content area. */
.surux-page-shell > .surux-page-content > .surux-tabs.surux-edit-tab-frame,
.surux-page-shell > .surux-page-content > .surux-tabs.surux-edit-tab-frame > .surux-tab-panels {
  flex: 0 0 auto;
}

.surux-review-process-progress {
  height: .75rem;
  overflow: hidden;
  border: 1px solid rgba(var(--surux-primary-rgb), .28);
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04);
}.surux-review-process-progress-bar {
  width: 42%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(var(--surux-primary-rgb), .45), rgba(var(--surux-primary-rgb), .95));
  animation: surux-review-process-progress 1.05s ease-in-out infinite;
}

@keyframes surux-review-process-progress {
  0% {
    transform: translateX(-120%);
  }

  100% {
    transform: translateX(240%);
  }
}

.surux-icon-btn {
  --bs-btn-color: var(--surux-text);
  --bs-btn-bg: rgba(255, 255, 255, .06);
  --bs-btn-border-color: var(--surux-border);
  --bs-btn-hover-bg: rgba(var(--surux-primary-rgb), .16);
  --bs-btn-hover-border-color: rgba(var(--surux-primary-rgb), .35);
  width: 42px;
  height: 42px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  line-height: 1;
}.surux-icon-btn i {
  width: 1rem;
  height: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}.surux-theme-menu {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}.surux-theme-trigger {
  --bs-btn-color: var(--surux-text);
  --bs-btn-bg: rgba(255, 255, 255, .06);
  --bs-btn-border-color: var(--surux-border);
  width: 100%;
  min-height: 40px;
  padding: 0 .75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  border-radius: 999px;
  line-height: 1;
  overflow: hidden;
}.surux-theme-trigger::after {
  margin-left: .2rem;
}.surux-theme-icon {
  width: 1.1rem;
  height: 1.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 1.1rem;
  line-height: 1;
}.surux-theme-icon i {
  line-height: 1;
}.surux-sidebar:not(:hover):not(.pinned) .surux-theme-menu {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
}.surux-sidebar:not(:hover):not(.pinned) .surux-theme-trigger {
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  flex: 0 0 44px;
}.surux-sidebar:not(:hover):not(.pinned) .surux-theme-trigger .surux-theme-text,
.surux-sidebar:not(:hover):not(.pinned) .surux-theme-trigger::after {
  display: none;
}.surux-dropdown {
  --bs-dropdown-bg: var(--surux-surface);
  --bs-dropdown-color: var(--surux-text);
  --bs-dropdown-border-color: var(--surux-border);
  --bs-dropdown-link-color: var(--surux-text);
  --bs-dropdown-link-hover-bg: rgba(var(--surux-primary-rgb), .14);
  --bs-dropdown-link-hover-color: var(--surux-text);
  border-radius: var(--surux-radius-menu);
  box-shadow: var(--surux-elevation-float);
}.surux-search-submit-btn {
  width: 46px;
  min-width: 46px;
  height: 46px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}.surux-search-submit-btn i {
  width: 1rem;
  height: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}.surux-search-submit-btn span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}.surux-input {
  min-height: 44px;
  border-radius: .52rem;
  border-color: var(--surux-input-border, var(--surux-border));
  background-color: var(--surux-input-bg);
  color: var(--surux-input-color, var(--surux-text));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}.surux-input:disabled,
.surux-input[readonly],
.surux-input[aria-disabled="true"] {
  border-color: var(--surux-disabled-control-border) !important;
  background-color: var(--surux-disabled-control-bg) !important;
  background-image: none !important;
  color: var(--surux-disabled-control-color);
  -webkit-text-fill-color: var(--surux-disabled-control-color);
  opacity: 1;
  cursor: not-allowed;
  box-shadow: var(--surux-disabled-control-shadow) !important;
}.surux-input:focus {
  border-color: rgba(var(--surux-primary-rgb), .65);
  box-shadow: 0 0 0 .25rem rgba(var(--surux-primary-rgb), .18);
}input[type="range"].surux-input {
  --surux-range-inset: .75rem;
  --surux-range-track: 4px;
  --surux-range-thumb: 16px;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: content-box;
  width: calc(100% - (var(--surux-range-inset) * 2));
  height: var(--surux-range-track);
  min-height: var(--surux-range-track);
  margin-inline: var(--surux-range-inset);
  margin-block: 0;
  padding-inline: 0;
  padding-block: var(--surux-range-inset);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  accent-color: var(--surux-primary);
  cursor: pointer;
}html :is(.surux-picker, .surux-control) :is(.surux-field-surface, .surux-picker-surface) > input[type="range"].surux-input {
  box-sizing: content-box;
  width: calc(100% - (var(--surux-range-inset) * 2));
  height: var(--surux-range-track);
  min-height: var(--surux-range-track);
  margin-inline: var(--surux-range-inset);
  margin-block: 0;
  padding-inline: 0;
  /* 20px + 4px track + 20px = the 44px row text and select fields use. */
  padding-block: 20px;
}input[type="range"].surux-input:focus {
  border-color: transparent;
  outline: none;
  box-shadow: 0 0 0 .25rem rgba(var(--surux-primary-rgb), .18);
}input[type="range"].surux-input::-webkit-slider-runnable-track {
  height: var(--surux-range-track);
  border-radius: 999px;
  background: linear-gradient(to right, var(--surux-primary) var(--surux-range, 0%), var(--surux-border) var(--surux-range, 0%));
}input[type="range"].surux-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--surux-range-thumb);
  height: var(--surux-range-thumb);
  margin-top: calc((var(--surux-range-track) - var(--surux-range-thumb)) / 2);
  border: 0;
  border-radius: 50%;
  background: var(--surux-primary);
}input[type="range"].surux-input::-moz-range-track {
  height: var(--surux-range-track);
  border: 0;
  border-radius: 999px;
  background: var(--surux-border);
}input[type="range"].surux-input::-moz-range-progress {
  height: var(--surux-range-track);
  border-radius: 999px;
  background: var(--surux-primary);
}input[type="range"].surux-input::-moz-range-thumb {
  width: var(--surux-range-thumb);
  height: var(--surux-range-thumb);
  border: 0;
  border-radius: 50%;
  background: var(--surux-primary);
}input[type="range"].surux-input:disabled,
input[type="range"].surux-input[readonly] {
  cursor: not-allowed;
  background: transparent !important;
  box-shadow: none !important;
}input[type="range"].surux-input:disabled::-webkit-slider-runnable-track,
input[type="range"].surux-input[readonly]::-webkit-slider-runnable-track {
  background: var(--surux-disabled-control-border);
}input[type="range"].surux-input:disabled::-moz-range-track,
input[type="range"].surux-input:disabled::-moz-range-progress {
  background: var(--surux-disabled-control-border);
}input[type="range"].surux-input:disabled::-webkit-slider-thumb,
input[type="range"].surux-input[readonly]::-webkit-slider-thumb {
  background: var(--surux-disabled-control-color);
}input[type="range"].surux-input:disabled::-moz-range-thumb {
  background: var(--surux-disabled-control-color);
}.surux-form-validation {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .72rem;
  align-items: start;
  margin: 0 0 .9rem;
  padding: .78rem .85rem;
  border: 1px solid color-mix(in srgb, var(--surux-warning-fill) 54%, var(--surux-border));
  border-radius: .58rem;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--surux-warning-fill) 18%, transparent), transparent 62%),
    color-mix(in srgb, var(--surux-surface) 88%, color-mix(in srgb, var(--surux-warning-fill) 8%, transparent));
  color: var(--surux-text);
  box-shadow:
    0 .85rem 1.8rem rgba(0, 0, 0, .18),
    inset 0 1px 0 rgba(255, 255, 255, .12);
}.surux-form-validation[hidden],
.surux-field-error[hidden] {
  display: none !important;
}.surux-form-validation-icon {
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: .58rem;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--surux-warning-fill) 96%, transparent), color-mix(in srgb, var(--surux-warning-deep) 72%, transparent));
  color: #fff;
  box-shadow:
    0 .45rem 1rem color-mix(in srgb, var(--surux-warning-fill) 24%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, .28);
}.surux-form-validation-content {
  min-width: 0;
}.surux-form-validation-content > strong,
.surux-form-validation-content > p {
  display: block;
}.surux-form-validation-content > strong {
  margin-bottom: .15rem;
  font-size: .95rem;
  line-height: 1.2;
}.surux-form-validation-content > p {
  margin: 0;
  color: var(--surux-muted);
  font-size: .86rem;
  line-height: 1.35;
}.surux-validation-source-promoted,
.surux-form-validation[data-surux-validation-promoted="true"] {
  display: none !important;
}.surux-validation-items {
  display: grid;
  gap: .28rem;
  margin: .34rem 0 0;
  padding: 0;
  list-style: none;
}.surux-validation-items [data-surux-validation-item] {
  min-width: 0;
  color: var(--surux-muted);
  font-size: .88rem;
  line-height: 1.38;
  overflow-wrap: anywhere;
}.surux-validation-item-label {
  display: inline;
  color: color-mix(in srgb, var(--surux-warning) 86%, var(--surux-text));
  font-weight: 800;
}.surux-validation-item-label::after {
  content: "";
  margin-right: .3rem;
}.surux-validation-host {
  position: fixed;
  top: calc(var(--surux-topbar-height, 64px) + .75rem + env(safe-area-inset-top));
  left: max(1rem, env(safe-area-inset-left));
  right: max(1rem, env(safe-area-inset-right));
  z-index: 4950;
  width: min(1040px, calc(100vw - 2rem));
  margin-inline: auto;
  pointer-events: none;
}.surux-validation-host[hidden] {
  display: none !important;
}body:has(.surux-standalone-shell) .surux-validation-host {
  top: calc(.75rem + env(safe-area-inset-top));
}.surux-validation-overlay {
  width: 100%;
  max-height: min(38vh, 20rem);
  display: block;
  padding: 0;
  overflow: auto;
  border: 1px solid color-mix(in srgb, var(--surux-warning-fill) 62%, var(--surux-border));
  border-radius: .7rem;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--surux-warning-fill) 20%, transparent), transparent 58%),
    color-mix(in srgb, var(--surux-surface) 94%, color-mix(in srgb, var(--surux-warning-fill) 8%, transparent));
  color: var(--surux-text);
  box-shadow:
    0 1.1rem 2.8rem rgba(0, 0, 0, .3),
    inset 0 1px 0 rgba(255, 255, 255, .14);
  backdrop-filter: blur(18px) saturate(1.12);
  -webkit-backdrop-filter: blur(18px) saturate(1.12);
  pointer-events: auto;
}.surux-validation-overlay:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--surux-warning-fill) 74%, white);
  outline-offset: 2px;
}.surux-validation-toggle {
  width: 100%;
  min-height: 3.1rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .65rem;
  align-items: center;
  padding: .55rem .72rem;
  border: 0;
  border-radius: inherit;
  appearance: none;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}.surux-validation-toggle:hover {
  background: color-mix(in srgb, var(--surux-warning-fill) 8%, transparent);
}.surux-validation-toggle:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--surux-warning-fill) 74%, white);
  outline-offset: -3px;
}.surux-validation-toggle .surux-form-validation-icon {
  width: 1.85rem;
  height: 1.85rem;
  border-radius: .52rem;
  box-shadow:
    0 .35rem .8rem color-mix(in srgb, var(--surux-warning-fill) 20%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, .28);
}.surux-validation-heading {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .15rem .55rem;
}.surux-validation-heading > [data-surux-validation-title] {
  font-size: .96rem;
  line-height: 1.2;
}.surux-validation-count {
  color: var(--surux-muted);
  font-size: .78rem;
  font-weight: 650;
  line-height: 1.2;
  white-space: nowrap;
}.surux-validation-toggle-icon {
  color: color-mix(in srgb, var(--surux-warning) 74%, var(--surux-text));
  font-size: .8rem;
}.surux-validation-details {
  padding: 0 .72rem .58rem calc(.72rem + 1.85rem + .65rem);
  cursor: pointer;
}.surux-validation-details[hidden] {
  display: none !important;
}.surux-validation-overlay .surux-validation-items {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .18rem 1.35rem;
  margin: 0;
}.surux-validation-overlay .surux-validation-items [data-surux-validation-item] {
  flex: 0 1 auto;
  max-width: min(100%, 28rem);
}.surux-validation-overlay .surux-validation-items:empty {
  display: none;
}

@media (max-width: 575.98px) {.surux-validation-host {
    top: calc(var(--surux-topbar-height, 64px) + .55rem + env(safe-area-inset-top));
    left: .7rem;
    right: .7rem;
    width: calc(100vw - 1.4rem);
  }.surux-validation-overlay {
    max-height: min(42vh, 18rem);
  }.surux-validation-toggle {
    min-height: 2.9rem;
    gap: .55rem;
    padding: .48rem .58rem;
  }.surux-validation-toggle .surux-form-validation-icon {
    width: 1.72rem;
    height: 1.72rem;
  }.surux-validation-details {
    padding: 0 .58rem .52rem calc(.58rem + 1.72rem + .55rem);
  }.surux-validation-overlay .surux-validation-items [data-surux-validation-item] {
    flex-basis: 100%;
  }
}.surux-load-error:not(.surux-card),
.surux-empty-state-shell:not(.surux-card):not(.surux-empty-state-shell-compact) {
  padding: var(--surux-list-edge-inset);
}.surux-load-error {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .9rem;
  border-color: color-mix(in srgb, var(--surux-warning-fill) 46%, transparent);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--surux-warning-fill) 16%, transparent), transparent 64%),
    color-mix(in srgb, var(--surux-surface) 88%, color-mix(in srgb, var(--surux-warning-fill) 10%, transparent));
}.surux-load-error-icon {
  flex: 0 0 auto;
  width: 2.6rem;
  height: 2.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: .72rem;
  background: color-mix(in srgb, var(--surux-warning-fill) 18%, transparent);
  color: var(--surux-warning);
}.surux-load-error-content {
  /* 2.6rem icon + .9rem gap. The basis stays 14rem until the row cannot hold
     icon, text and action; the actions then wrap, and this root stays the child
     those selectors address. */
  flex: 1 1 min(14rem, calc(100% - 3.5rem));
  min-width: min(14rem, calc(100% - 3.5rem));
}.surux-load-error > .surux-command-button {
  flex: 0 0 auto;
}.surux-load-error-content h2 {
  margin: 0 0 .18rem;
  color: var(--surux-text);
  font-size: 1rem;
  font-weight: 800;
}.surux-load-error-content p {
  margin: 0;
  color: var(--surux-muted);
  font-size: .9rem;
  line-height: 1.4;
}.surux-load-error-content .surux-load-error-help {
  margin-top: .35rem;
  color: color-mix(in srgb, var(--surux-muted) 86%, var(--surux-text));
  font-size: .84rem;
}.surux-load-error-refresh {
  justify-self: end;
}.surux-load-error-refreshing.surux-command-button {
  cursor: progress;
  opacity: .88;
}

@media (max-width: 767.98px) {.surux-load-error {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
  }.surux-load-error-content {
    min-width: 0;
  }.surux-load-error-refresh {
    grid-column: 1 / -1;
    justify-self: start;
  }
}.surux-field-error {
  margin-top: .42rem;
  color: color-mix(in srgb, var(--surux-warning) 72%, var(--surux-text));
  font-size: .82rem;
  line-height: 1.3;
}.surux-control-invalid > .form-label,
.surux-control-invalid .surux-control-label {
  color: color-mix(in srgb, var(--surux-warning) 72%, var(--surux-text));
}.surux-input.surux-input-invalid,
.surux-date-display.surux-input-invalid {
  border-color: color-mix(in srgb, var(--surux-warning-fill) 80%, transparent) !important;
  box-shadow:
    0 0 0 .18rem color-mix(in srgb, var(--surux-warning-fill) 18%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}.surux-input.surux-input-invalid:focus,
.surux-date-display.surux-input-invalid:focus,
.surux-date-display.surux-input-invalid:focus-visible {
  border-color: color-mix(in srgb, var(--surux-warning-fill) 95%, transparent) !important;
  box-shadow:
    0 0 0 .2rem color-mix(in srgb, var(--surux-warning-fill) 24%, transparent),
    0 .55rem 1.1rem color-mix(in srgb, var(--surux-warning-fill) 8%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, .1) !important;
}.surux-control {
  min-width: 0;
}.surux-control > .form-label,
.surux-control-label {
  display: block;
  margin-bottom: .45rem;
}.surux-control-field {
  min-width: 0;
}

/* Native select popups need opaque option colours; the closed field's
   translucent background does not carry into the browser-owned menu. */
select.surux-input { color-scheme: dark; }
[data-bs-theme="light"] select.surux-input { color-scheme: light; }
[data-surux-theme="night"] select.surux-input { color-scheme: dark; }
select.surux-input :is(option, optgroup) {
  background-color: var(--surux-surface);
  color: var(--surux-text);
}
select.surux-input option:checked {
  background-color: var(--surux-primary-action-bg);
  color: var(--surux-primary-contrast);
}
select.surux-input :is(option, optgroup):disabled {
  color: var(--surux-muted);
}

.surux-control-field-with-trailing-action {
  position: relative;
}.surux-control-field-with-trailing-action > .surux-input {
  padding-inline-end: calc(.75rem + 2.25rem * var(--surux-control-trailing-action-count, 1));
}.surux-control-trailing-action {
  position: absolute;
  inset-block: .25rem;
  inset-inline-end: .25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}.surux-control-trailing-action .surux-command-button-icon-only {
  width: 2.25rem !important;
  min-width: 2.25rem !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
}.surux-control-field-with-trailing-action:has(> textarea.surux-input) > .surux-control-trailing-action {
  inset-block-end: auto;
  height: 2.25rem;
}

/* Opt-in content sizing belongs to the shared control, not individual editors. */
textarea.surux-input[data-surux-auto-grow="true"] {
  field-sizing: content;
  height: auto;
  max-height: 18rem;
  overflow-y: auto;
  resize: vertical;
}
@supports not (field-sizing: content) {
  textarea.surux-input[data-surux-auto-grow="true"] {
    min-height: 6rem;
  }
}

textarea[data-surux-vault-auto-grow] {
  max-height: 18rem;
  overflow-y: hidden;
  resize: vertical;
}

.surux-toolbar-search-actions {
  height: 100%;
  display: inline-flex;
  align-items: center;
  gap: var(--surux-bar-spacing);
  padding-inline-end: 0;
}.surux-toolbar-search-actions .surux-command-button-icon-only {
  width: 2.25rem !important;
  min-width: 2.25rem !important;
  height: 2.25rem !important;
  min-height: 2.25rem !important;
  align-self: center;
}.surux-toolbar-filter-toggle.surux-command-button-icon-only {
  display: inline-grid !important;
  place-items: center !important;
}.surux-toolbar-filter-toggle.surux-command-button-icon-only .surux-command-button-icon {
  grid-area: 1 / 1;
  margin: 0 !important;
  place-self: center !important;
}.surux-toolbar-filter-toggle.surux-command-button-icon-only .surux-search-active-count {
  position: absolute;
  top: -.42rem;
  right: -.42rem;
  z-index: 2;
  transform: none;
}.surux-toolbar-search-control-has-filter .surux-control-field-with-trailing-action:not(.surux-search-input-box) > .surux-input {
  padding-inline-end: 5.45rem;
}.surux-toolbar {
  border-radius: var(--surux-band-radius);
  padding: var(--surux-page-search-padding);
  margin-bottom: var(--surux-section-gap);
  position: relative;
  overflow: visible;
  min-width: 0;
}.surux-action-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--surux-bar-spacing);
  margin-bottom: 0;
}
/* A page-level action toolbar (SuruXPageShell ToolbarContent) keeps the section gap below it, as a search bar does and as it already does below 992px. The margin-bottom: 0 above is for toolbars inside stacks and workspaces. */
.surux-page-shell > .surux-action-toolbar {
  margin-bottom: var(--surux-section-gap);
}
.surux-toolbar-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--surux-bar-spacing);
  min-width: 0;
  max-width: 100%;
}.surux-toolbar-group + .surux-toolbar-group {
  border-inline-start: 1px solid var(--surux-border);
  padding-inline-start: var(--surux-bar-spacing);
}.surux-toolbar-stack {
  min-width: 0;
  flex: 0 0 auto;
  isolation: isolate;
}
.surux-toolbar-stack-primary {
  position: relative;
  z-index: 2;
}
.surux-toolbar-stack-context {
  position: relative;
  z-index: 1;
  padding-block-start: var(--surux-bar-spacing);
  opacity: 1;
  transform: translateY(0);
  transition: transform var(--surux-feedback-duration) var(--surux-ease-out),
    opacity var(--surux-feedback-duration) var(--surux-ease-out),
    display var(--surux-feedback-duration) allow-discrete;
}
.surux-toolbar-stack-context[hidden] {
  display: none;
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
}
/* Keep the collar above the shared surface but behind every toolbar control. */
.surux-toolbar-stack-primary .surux-toolbar-group {
  position: relative;
  z-index: 2;
}
.surux-toolbar-stack-bridge {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.surux-toolbar-stack-bridge[hidden] { display: none; }
.surux-toolbar-stack-bridge svg {
  display: block;
  overflow: visible;
  filter: drop-shadow(0 2px 2px color-mix(in srgb, var(--surux-text) 12%, transparent));
}
@starting-style {
  .surux-toolbar-stack-context:not([hidden]) {
    opacity: 0;
    transform: translateY(-100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .surux-toolbar-stack-context,
  .surux-toolbar-stack-context[hidden] {
    transform: none;
    transition: opacity var(--surux-feedback-duration) var(--surux-ease-out),
      display var(--surux-feedback-duration) allow-discrete;
  }
  @starting-style {
    .surux-toolbar-stack-context:not([hidden]) { transform: none; }
  }
}
/* Outside actions stay their own size. When the row cannot also hold the
   search floor, the search wraps onto the next line and takes that full line.
   This follows the row's available width, including a narrow embedding. */
.surux-toolbar-row {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--surux-bar-spacing);
}.surux-toolbar-actions {
  flex: 0 0 auto;
  min-width: 0;
}.surux-toolbar-actions-desktop,
.surux-toolbar-actions-mobile {
  align-items: center;
  gap: var(--surux-bar-spacing);
}.surux-toolbar-actions-desktop {
  display: flex;
}.surux-toolbar-actions-mobile {
  display: none;
}.surux-toolbar-main {
  flex: 1 1 var(--surux-search-text-floor, 11rem);
  min-width: min(100%, var(--surux-search-text-floor, 11rem));
  max-width: 100%;
}.surux-toolbar-grid-filters {
  position: absolute;
  inset-block-start: calc(100% + .45rem);
  inset-inline-end: .75rem;
  inset-inline-start: auto;
  width: min(42rem, calc(100vw - 1.5rem));
  z-index: 2200;
  max-height: min(28rem, calc(100vh - 7rem));
  padding: .8rem;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid rgba(var(--surux-primary-rgb), .24);
  border-radius: .72rem;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .08), transparent 44%),
    color-mix(in srgb, var(--surux-surface) 96%, #000 4%);
  box-shadow: 0 1rem 2.4rem rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .12);
}.surux-toolbar-grid-filters[hidden] {
  display: none !important;
}.surux-toolbar-grid-filters-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .5rem;
  color: var(--surux-muted);
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}.surux-toolbar-filter-pin {
  display: none !important;
}.surux-toolbar-grid-filter-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .65rem;
}.surux-toolbar-grid-filter-list .surux-column-filter-root {
  flex: 1 1 12rem;
  min-width: 11rem;
  max-width: 20rem;
}.surux-toolbar-grid-filter-list .surux-column-filter-root.is-open {
  flex: 1 0 100%;
  max-width: none;
}.surux-toolbar-grid-filter-list .surux-column-filter-heading {
  display: block;
}.surux-column-filter-heading-field {
  position: relative;
  display: block;
  min-width: 0;
}.surux-column-filter-field-trigger {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: auto;
  height: auto;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  box-shadow: none;
  color: transparent;
  cursor: pointer;
}.surux-column-filter-field-trigger:hover,
.surux-column-filter-field-trigger.active,
.surux-column-filter-root.is-open .surux-column-filter-field-trigger {
  background: transparent;
  box-shadow: none;
}
.surux-toolbar-mobile-sort {
  display: none;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: .65rem;
  margin-top: .75rem;
}.surux-toolbar-filter-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .65rem;
  align-items: start;
}.surux-toolbar-filter-fields > .surux-toolbar-grid-filter-list,
.surux-toolbar-filter-fields > .surux-toolbar-extended-filters,
.surux-toolbar-filter-fields > .row,
.surux-toolbar-filter-fields .row > [class*="col-"],
.surux-toolbar-filter-fields .surux-live-search-filter-grid,
.surux-toolbar-filter-fields .surux-workbench-v2-filter-grid,
.surux-toolbar-filter-fields .surux-list-filter-grid,
.surux-toolbar-filter-fields .device-health-filter-grid {
  display: contents;
}.surux-toolbar-extended-filters {
  margin-top: .75rem;
  padding-top: .75rem;
  border-top: 1px solid var(--surux-border);
}.surux-toolbar-filter-apply {
  display: flex;
  justify-content: flex-end;
  margin-top: .75rem;
}.surux-live-search-bar {
  display: block;
}.surux-live-search-filter-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: .3rem;
}.surux-live-search-filter-content {
  min-width: 0;
}

/* Date popovers are absolutely positioned, so reserve their footprint inside
   both the scrollable filter menu and the desktop pinned-filter layout. */
.surux-live-search-filter-menu:has(.surux-date-open) .surux-live-search-filter-content {
  padding-bottom: min(23rem, calc(100dvh - 8rem));
}

.surux-live-search-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr));
  gap: .65rem;
}.surux-live-search-filter-field {
  min-width: 0;
  display: grid;
  gap: .3rem;
}.surux-live-search-filter-field > span {
  color: var(--surux-muted);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}.surux-live-search-filter-field > .surux-input {
  width: 100%;
  min-width: 0;
  margin: 0;
}
@media (max-width: 991.98px) {
  /* Retain the shared vertical centring: action buttons and the search field
     have different heights. Stretching the wrapper top-aligns its input. */
  .surux-toolbar-actions-desktop {
    display: none;
  }
  .surux-toolbar-actions-mobile {
    display: flex;
  }
  /* Basis zero still grows into a line. The floor above keeps a narrow
     remainder from consuming the search before that wrap. */
  .surux-toolbar-main {
    flex-basis: 0;
  }
  .surux-toolbar-mobile-sort {
    display: grid;
  }
}
/* Measured lists own Sort by. Cards keep it; a table hides it unless a fold still needs it.
   The viewport rule above is only the fallback before measurement. */
[data-surux-list-cards="true"] .surux-toolbar-mobile-sort {
  display: grid;
}
[data-surux-list-table="true"]:not([data-surux-list-folded-sort]):not([data-surux-list-cards="true"]) .surux-toolbar-mobile-sort {
  display: none;
}
@media (max-width: 575.98px) {
  .surux-toolbar-filter-fields {
    grid-template-columns: minmax(0, 1fr);
  }
  .surux-toolbar-grid-filters:not(.is-pinned) {
    inset-inline-start: .75rem;
    width: auto;
  }
}
@media (min-width: 992px) {
  [data-surux-list-folded-sort] .surux-toolbar-mobile-sort {
    display: grid;
  }
  .surux-toolbar-filter-pin {
    display: inline-grid !important;
    place-items: center !important;
  }
  .surux-toolbar-grid-filters.is-pinned {
    position: static;
    width: auto;
    display: block !important;
    max-height: none;
    margin-top: .8rem;
    padding: .8rem 0 0;
    overflow: visible;
    border: 0;
    border-top: 1px solid var(--surux-border);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
}
.surux-control-hint {
  display: block;
  margin-top: .35rem;
  color: var(--surux-muted);
  font-size: .78rem;
}
.surux-field-hint {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}
.surux-field-hint-trigger {
  width: 1.05rem;
  height: 1.05rem;
  padding: 0;
  border: 1.5px solid var(--surux-muted);
  border-radius: 50%;
  background: transparent;
  color: var(--surux-muted);
  display: inline-grid;
  place-items: center;
  font-family: Georgia, "Times New Roman", serif;
  font-size: .68rem;
  font-style: italic;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.surux-field-hint-trigger:hover,
.surux-field-hint-trigger:focus-visible,
.surux-field-hint:has(.surux-field-hint-popover:popover-open) .surux-field-hint-trigger {
  border-color: var(--surux-primary);
  color: var(--surux-primary);
}
.surux-field-hint-popover {
  box-sizing: border-box;
  max-width: min(280px, calc(100vw - 24px));
  padding: .65rem .75rem;
  border: 1px solid color-mix(in srgb, var(--surux-primary) 35%, var(--surux-border));
  border-radius: .65rem;
  background: var(--surux-surface);
  color: var(--surux-text);
  font-size: .78rem;
  line-height: 1.4;
  box-shadow: 0 10px 28px color-mix(in srgb, #000 28%, transparent);
}
.surux-field-label-cluster {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-width: 0;
  width: fit-content;
  max-width: 100%;
}
.surux-control-label-row {
  display: flex;
  align-items: center;
  gap: .4rem;
}.surux-action-picker {
  min-width: 0;
}
/* Label, count, tiles and warning share one inset field surface; the
   surface owns the frame, focus well and read-only rim. */
.surux-action-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin: .4375rem .75rem .55rem;
}.surux-action-picker-surface > .surux-action-picker-grid {
  padding: 0 .75rem .75rem;
}.surux-action-picker-surface > .surux-action-picker-warning {
  margin: 0 .75rem .75rem;
}.surux-action-picker-count {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 1.65rem;
  padding: .18rem .55rem;
  border: 1px solid var(--surux-border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surux-surface) 90%, transparent);
  color: var(--surux-muted);
  font-size: .72rem;
  font-weight: 800;
}.surux-action-picker-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .6rem;
}.surux-action-picker-option {
  min-width: 0;
  display: grid;
  grid-template-columns: 2.1rem minmax(0, 1fr);
  gap: .65rem;
  align-items: center;
  padding: .72rem;
  border: 1px solid var(--surux-border);
  border-radius: .6rem;
  background: color-mix(in srgb, var(--surux-surface) 92%, transparent);
  color: var(--surux-text);
  text-align: left;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
}.surux-action-picker-option:hover,
.surux-action-picker-option:focus-visible {
  border-color: color-mix(in srgb, var(--surux-primary) 72%, var(--surux-border));
  box-shadow: 0 .7rem 1.4rem rgba(0, 0, 0, .14);
  outline: 0;
}.surux-action-picker-option.is-selected {
  border-color: color-mix(in srgb, var(--surux-primary) 82%, white);
  background: color-mix(in srgb, var(--surux-primary) 22%, var(--surux-surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--surux-primary) 38%, transparent);
}.surux-action-picker-icon {
  width: 2.1rem;
  height: 2.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: .55rem;
  background: color-mix(in srgb, var(--surux-primary) 12%, transparent);
  color: var(--surux-primary);
}.surux-action-picker-option.is-selected .surux-action-picker-icon {
  background: var(--surux-primary);
  color: #fff;
}.surux-action-picker-copy {
  min-width: 0;
  display: grid;
  gap: .1rem;
}.surux-action-picker-copy strong,
.surux-action-picker-copy small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}.surux-action-picker-copy strong {
  font-size: .9rem;
  line-height: 1.15;
  white-space: nowrap;
}.surux-action-picker-copy small {
  color: var(--surux-muted);
  font-size: .72rem;
  line-height: 1.25;
}.surux-action-picker-warning {
  display: grid;
  gap: .45rem;
  margin-top: .7rem;
  padding: .75rem;
  border: 1px dashed color-mix(in srgb, var(--surux-warning-fill) 72%, transparent);
  border-radius: .65rem;
  background: color-mix(in srgb, var(--surux-warning-fill) 10%, transparent);
  color: var(--surux-text);
}.surux-action-picker-warning > span {
  color: var(--surux-muted);
  font-size: .78rem;
}.surux-action-picker-warning > div {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}.surux-action-picker-unknown {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 2rem;
  padding: .24rem .55rem;
  border: 1px solid color-mix(in srgb, var(--surux-warning-fill) 70%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surux-warning-fill) 14%, transparent);
  color: var(--surux-text);
  font-weight: 800;
}

@media (max-width: 767.98px) {.surux-action-picker-grid {
    grid-template-columns: minmax(0, 1fr);
  }.surux-action-picker-copy small {
    white-space: normal;
  }
}.surux-picker {
  position: relative;
}.surux-age-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}.surux-age-output {
  color: var(--surux-muted);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}.surux-age-output:empty {
  display: none;
}.surux-picker-field-actions {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: .25rem;
}.surux-picker-shell {
  position: relative;
  min-width: 0;
}.surux-picker-control-row > .surux-picker-shell {
  /* Only the picker's inner lane flexes. Field roots leave column sizing to
     their layout, including Bootstrap columns shared by inputs and switches. */
  flex: 1 1 0%;
}.surux-picker-control-row {
  min-width: 0;
  display: flex;
  gap: .5rem;
  align-items: center;
}.surux-picker-trailing-action {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
}[data-surux-picker].surux-picker-dependency-missing[data-surux-hide-until-dependency] {
  display: none;
}.surux-picker-field-row {
  display: block;
}.surux-picker-selected-inactive .surux-picker-field-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .7rem;
  align-items: center;
}.surux-picker-input {
  padding-right: 3.1rem;
}.surux-picker-has-popout-selection .surux-picker-input {
  padding-left: 3.05rem;
}.surux-picker-input::-webkit-search-cancel-button,
.surux-picker-input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}.surux-picker-input::-ms-clear {
  display: none;
  width: 0;
  height: 0;
}.surux-picker-action {
  position: absolute;
  top: 50%;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--surux-muted);
  transform: translateY(-50%);
}.surux-picker-popout {
  left: .05rem;
  z-index: 1;
  text-decoration: none;
}.surux-picker-clear {
  right: .05rem;
}.surux-picker-action:hover,
.surux-picker-action:focus-visible {
  color: var(--surux-text);
  background: rgba(var(--surux-primary-rgb), .12);
  outline: 0;
}.surux-picker-action[hidden] {
  display: none;
}.surux-picker-shell:has(.surux-input:disabled) .surux-picker-popout,
.surux-picker-shell:has(.surux-input:disabled) .surux-picker-action:not(.surux-picker-clear) {
  color: var(--surux-disabled-control-icon);
  background: var(--surux-disabled-control-icon-bg);
  cursor: not-allowed;
}.surux-picker-hydration-status {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .65rem;
  margin-top: .35rem;
  padding: .45rem .55rem;
  border: 1px solid color-mix(in srgb, var(--surux-border) 78%, transparent);
  border-radius: .45rem;
  background: rgba(var(--surux-primary-rgb), .06);
  color: var(--surux-muted);
  font-size: .8rem;
  line-height: 1.3;
}.surux-picker-status-badge {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .24rem .62rem;
  border: 1px solid color-mix(in srgb, var(--surux-warning) 62%, var(--surux-border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--surux-warning) 15%, transparent);
  color: color-mix(in srgb, var(--surux-warning) 78%, var(--surux-text));
  font-size: .72rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}.surux-picker-status-badge.is-active {
  border-color: color-mix(in srgb, var(--surux-success) 62%, var(--surux-border));
  background: color-mix(in srgb, var(--surux-success) 15%, transparent);
  color: color-mix(in srgb, var(--surux-success) 78%, var(--surux-text));
}.surux-picker-status-badge[hidden] {
  display: none;
}.surux-picker-selected-status {
  justify-self: end;
}.surux-picker-inactive-help {
  display: flex;
  gap: .5rem;
  align-items: flex-start;
  margin-top: .55rem;
  color: var(--surux-muted);
  font-size: .78rem;
  line-height: 1.35;
}.surux-picker-inactive-help > i {
  flex: 0 0 auto;
  margin-top: .12rem;
  color: var(--surux-warning);
}.surux-picker-inactive-help[hidden] {
  display: none;
}.surux-picker-hydration-status[hidden] {
  display: none;
}.surux-picker-hydration-status.is-error,
.surux-picker-hydration-status.is-unavailable {
  border-color: color-mix(in srgb, var(--surux-warning) 48%, var(--surux-border));
  color: var(--surux-text);
}.surux-picker-hydration-retry {
  min-width: 44px;
  min-height: 44px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .4rem .7rem;
  border: 1px solid rgba(var(--surux-primary-rgb), .38);
  border-radius: 999px;
  background: rgba(var(--surux-primary-rgb), .12);
  color: var(--surux-text);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}.surux-picker-hydration-retry:hover,
.surux-picker-hydration-retry:focus-visible {
  border-color: rgba(var(--surux-primary-rgb), .7);
  background: rgba(var(--surux-primary-rgb), .2);
  outline: 0;
}.surux-picker-hydration-retry[hidden] {
  display: none;
}.surux-picker-results {
  position: absolute;
  z-index: 2050;
  top: calc(100% + .35rem);
  right: 0;
  left: 0;
  max-height: min(18rem, calc(100vh - 8rem));
  overflow-y: auto;
  padding: .35rem;
  border: 1px solid color-mix(in srgb, var(--surux-border) 72%, rgba(var(--surux-primary-rgb), .28));
  border-radius: .5rem;
  background: color-mix(in srgb, var(--surux-surface) 96%, #000 4%);
  box-shadow: 0 1rem 2.4rem rgba(0, 0, 0, .24);
}.surux-picker-results[popover]:popover-open {
  position: fixed;
  inset: auto;
  box-sizing: border-box;
  margin: 0;
  max-width: calc(100vw - 1rem);
}.surux-picker-option-group {
  display: grid;
  gap: .18rem;
}.surux-picker-option-group + .surux-picker-option-group {
  margin-top: .45rem;
  padding-top: .45rem;
  border-top: 1px solid color-mix(in srgb, var(--surux-border) 72%, transparent);
}.surux-picker-results > .surux-picker-section {
  margin-top: .45rem;
  padding-top: .45rem;
  border-top: 1px solid color-mix(in srgb, var(--surux-border) 72%, transparent);
}.surux-picker-results > .surux-picker-section:first-of-type {
  margin-top: 0;
  padding-top: .28rem;
  border-top: 0;
}.surux-picker-option-group-label {
  padding: .28rem .55rem .18rem;
  color: var(--surux-muted);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .045em;
  line-height: 1.2;
  text-transform: uppercase;
}.surux-picker-option-group.is-current .surux-picker-option {
  border: 1px solid color-mix(in srgb, var(--surux-warning) 34%, var(--surux-border));
  background: color-mix(in srgb, var(--surux-warning) 7%, transparent);
}.surux-picker-option {
  width: 100%;
  min-height: 46px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: .65rem;
  align-items: center;
  padding: .48rem .55rem;
  border: 0;
  border-radius: .45rem;
  background: transparent;
  color: var(--surux-text);
  text-align: left;
}.surux-picker-option[aria-selected="true"],
.surux-picker-option:hover,
.surux-picker-option:focus,
.surux-picker-option.is-active {
  background: rgba(var(--surux-primary-rgb), .13);
  outline: 0;
}.surux-picker-option-icon {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(var(--surux-primary-rgb), .28);
  border-radius: 50%;
  background: rgba(var(--surux-primary-rgb), .12);
  color: var(--surux-text);
  font-size: .75rem;
  font-weight: 400;
}.surux-picker-option-text {
  min-width: 0;
  display: grid;
  gap: .1rem;
  font-weight: 400;
}.surux-picker-option-heading {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: .5rem;
  font-weight: 400;
}.surux-picker-option-heading:has(.surux-picker-option-number):has(.surux-picker-status-badge) {
  grid-template-columns: minmax(0, 1fr) auto auto;
}.surux-picker-option[aria-disabled="true"] {
  cursor: not-allowed;
}.surux-picker-option[aria-disabled="true"]:hover,
.surux-picker-option[aria-disabled="true"]:focus,
.surux-picker-option[aria-disabled="true"].is-active {
  background: transparent;
}.surux-picker-option-heading .surux-picker-status-badge {
  justify-self: end;
}.surux-picker-option-heading,
.surux-picker-option-text small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}.surux-picker-option-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}.surux-picker-option-number {
  justify-self: end;
  color: var(--surux-primary);
  font-family: var(--bs-font-monospace), ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .01em;
  text-align: right;
  text-transform: uppercase;
}/* The script builds this row as a button when the picker opens a dialog and as an anchor when it
   navigates, and a button carries the user agent's text-align: center. Without this the same row
   reads centred on one picker and left aligned on the next, and disagrees with the empty row it
   sits under. */
.surux-picker-empty-action {
  width: 100%;
  min-height: 54px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: .7rem;
  align-items: center;
  padding: .65rem .7rem;
  text-align: left;
  border: 1px dashed rgba(var(--surux-primary-rgb), .42);
  border-radius: .45rem;
  background: rgba(var(--surux-primary-rgb), .09);
  color: var(--surux-text);
  text-decoration: none;
}.surux-picker-empty-action:hover,
.surux-picker-empty-action:focus-visible {
  border-color: rgba(var(--surux-primary-rgb), .7);
  background: rgba(var(--surux-primary-rgb), .15);
  color: var(--surux-text);
  text-decoration: none;
  outline: 0;
}.surux-picker-empty-action[hidden] {
  display: none;
}.surux-picker-empty-action-icon {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(var(--surux-primary-rgb), .18);
  color: var(--surux-primary);
}.surux-picker-empty-action span:last-child {
  min-width: 0;
  display: grid;
  gap: .15rem;
}.surux-picker-empty-action strong,
.surux-picker-empty-action small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}.surux-picker-empty-action small {
  color: var(--surux-muted);
  font-size: .76rem;
}.surux-picker-option-text small {
  color: var(--surux-muted);
  font-size: .78rem;
}.surux-picker-match {
  padding: 0 .08rem;
  border-radius: .18rem;
  background: rgba(var(--surux-primary-rgb), .22);
  color: var(--surux-text);
  font-weight: 800;
}.surux-picker-message {
  padding: .75rem .8rem;
  color: var(--surux-muted);
  font-size: .9rem;
}.surux-picker-message.is-busy {
  color: var(--surux-text);
}.surux-picker-empty {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: .72rem;
  align-items: start;
  padding: .78rem;
}.surux-picker-empty-icon {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(var(--surux-primary-rgb), .24);
  border-radius: .55rem;
  background: rgba(var(--surux-primary-rgb), .1);
  color: var(--surux-primary);
}.surux-picker-empty-content {
  min-width: 0;
  display: grid;
  gap: .28rem;
}.surux-picker-empty-content strong {
  color: var(--surux-text);
  font-size: .9rem;
  line-height: 1.25;
}.surux-picker-empty-content small {
  color: var(--surux-muted);
  font-size: .8rem;
  line-height: 1.35;
}@media (max-width: 480px) {
  .surux-picker-selected-inactive .surux-picker-field-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .surux-picker-selected-status {
    justify-self: start;
  }
}.form-check-input {
  --bs-form-check-bg: color-mix(in srgb, var(--surux-surface-2) 82%, rgba(var(--surux-primary-rgb), .10));
  border-color: color-mix(in srgb, var(--surux-border) 68%, rgba(var(--surux-primary-rgb), .28));
  background-color: var(--bs-form-check-bg);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .14);
  transition:
    background-color var(--surux-transition),
    border-color var(--surux-transition),
    box-shadow var(--surux-transition),
    opacity var(--surux-transition);
}.form-check-input:hover:not(:disabled) {
  border-color: rgba(var(--surux-primary-rgb), .72);
}.form-check-input:focus {
  border-color: rgba(var(--surux-primary-rgb), .74);
  box-shadow:
    0 0 0 .22rem rgba(var(--surux-primary-rgb), .18),
    inset 0 1px 2px rgba(0, 0, 0, .12);
}.form-check-input:checked,
.form-check-input[type="checkbox"]:indeterminate {
  border-color: rgba(var(--surux-primary-rgb), .86);
  background-color: var(--surux-primary);
  box-shadow:
    0 0 0 1px rgba(var(--surux-primary-rgb), .16),
    0 .28rem .72rem rgba(var(--surux-primary-rgb), .22),
    inset 0 1px 0 rgba(255, 255, 255, .24);
}.form-switch .form-check-input:checked {
  border-color: rgba(var(--surux-primary-rgb), .86);
  background-color: var(--surux-primary);
}.form-check-input:disabled {
  border-color: var(--surux-disabled-control-border);
  background-color: var(--surux-disabled-control-bg);
  box-shadow: var(--surux-disabled-control-shadow);
  opacity: 1;
  cursor: not-allowed;
}.form-check-input:checked:disabled,
.form-check-input[type="checkbox"]:indeterminate:disabled {
  border-color: var(--surux-disabled-control-border);
  background-color: color-mix(in srgb, var(--surux-disabled-control-color) 54%, var(--surux-disabled-control-bg) 46%);
  opacity: 1;
}[data-bs-theme="light"] .form-check-input {
  --bs-form-check-bg: color-mix(in srgb, var(--surux-surface) 88%, rgba(var(--surux-primary-rgb), .10));
  border-color: color-mix(in srgb, var(--surux-primary) 36%, #94a3b8 64%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .82),
    0 .08rem .24rem rgba(15, 23, 42, .08);
}[data-bs-theme="light"] .form-check-input:disabled {
  border-color: var(--surux-disabled-control-border);
  background-color: var(--surux-disabled-control-bg);
}.surux-control-switch {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .55rem .7rem;
  border: 1px solid var(--surux-border);
  border-radius: .55rem;
  background: rgba(255, 255, 255, .035);
  width: 100%;
  box-sizing: border-box;
}.surux-control-switch.form-switch {
  margin: 0;
  padding-left: .7rem;
}.surux-control-switch.form-switch .form-check-input {
  float: none;
  margin-left: 0;
  margin-top: 0;
  flex: 0 0 auto;
}.surux-control-switch.form-switch .form-check-input,
.surux-private-switch.form-switch .form-check-input {
  border-color: color-mix(in srgb, var(--surux-border) 72%, rgba(var(--surux-primary-rgb), .24));
  background-color: color-mix(in srgb, var(--surux-surface-2) 82%, rgba(var(--surux-primary-rgb), .10));
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .16);
}.surux-control-switch.form-switch .form-check-input:checked,
.surux-private-switch.form-switch .form-check-input:checked {
  border-color: rgba(var(--surux-primary-rgb), .78);
  background-color: rgba(var(--surux-primary-rgb), .92);
  box-shadow:
    0 0 0 1px rgba(var(--surux-primary-rgb), .16),
    0 .35rem .9rem rgba(var(--surux-primary-rgb), .22),
    inset 0 1px 0 rgba(255, 255, 255, .24);
}
/* Danger option switch. The row, label and on-track reuse the destructive button colour. */
.surux-option-switch-danger > :is(.surux-field-surface, .surux-picker-surface) {
  border-color: color-mix(in srgb, var(--surux-danger-fill) 62%, var(--surux-border));
  background: color-mix(in srgb, var(--surux-danger-fill) 12%, var(--surux-surface));
}
.surux-option-switch-danger .surux-option-switch-label {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--surux-danger);
}
.surux-option-switch-danger .surux-option-switch-label > i {
  color: var(--surux-danger);
}
.surux-option-switch-danger .surux-field-label-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .2rem .45rem;
}
.surux-option-switch-danger-hint {
  flex-basis: 100%;
  color: var(--surux-danger);
  font-size: .75rem;
  line-height: 1.35;
}
.surux-option-switch-danger .form-check-input:checked {
  border-color: var(--surux-danger-fill);
  background-color: var(--surux-danger-fill);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--surux-danger-fill) 28%, transparent),
    0 .35rem .9rem color-mix(in srgb, var(--surux-danger-fill) 28%, transparent);
}.surux-control-switch.form-switch .form-check-input:focus,
.surux-private-switch.form-switch .form-check-input:focus {
  border-color: rgba(var(--surux-primary-rgb), .72);
  box-shadow:
    0 0 0 .22rem rgba(var(--surux-primary-rgb), .18),
    inset 0 1px 2px rgba(0, 0, 0, .12);
}.form-switch .form-check-input:focus:not(:checked) {
  --bs-form-switch-bg: radial-gradient(circle closest-side, var(--surux-primary) 72%, transparent 78%);
  background-size: 50% 100%;
}.surux-control-switch.form-switch .form-check-input:checked:focus,
.surux-private-switch.form-switch .form-check-input:checked:focus {
  box-shadow:
    0 0 0 .22rem rgba(var(--surux-primary-rgb), .20),
    0 .35rem .9rem rgba(var(--surux-primary-rgb), .22),
    inset 0 1px 0 rgba(255, 255, 255, .24);
}.surux-control-switch.form-switch .form-check-input:disabled,
.surux-private-switch.form-switch .form-check-input:disabled {
  border-color: var(--surux-disabled-control-border);
  background-color: var(--surux-disabled-control-bg);
  box-shadow: var(--surux-disabled-control-shadow);
  opacity: 1;
  cursor: not-allowed;
}.surux-control-switch.form-switch .form-check-input:checked:disabled,
.surux-private-switch.form-switch .form-check-input:checked:disabled {
  border-color: var(--surux-disabled-control-border);
  background-color: color-mix(in srgb, var(--surux-disabled-control-color) 54%, var(--surux-disabled-control-bg) 46%);
  opacity: 1;
}.surux-control-switch:has(.form-check-input:disabled),
.surux-private-switch:has(.form-check-input:disabled) {
  border-color: var(--surux-disabled-control-border);
  background: var(--surux-disabled-control-bg);
  color: var(--surux-disabled-control-color);
  box-shadow: var(--surux-disabled-control-shadow);
  cursor: not-allowed;
  opacity: 1;
}.surux-control-switch .surux-control-label {
  display: grid;
  gap: .15rem;
  margin-bottom: 0;
  font-weight: 600;
}.surux-control-switch .surux-control-hint {
  margin-top: 0;
  font-weight: 400;
}[data-bs-theme="light"] .surux-control-switch {
  background: rgba(15, 23, 42, .025);
}/* TR-0000299. One toast for SuruX (surux-toast.js owns placement, stacking and timing). The host
   sits above the command bar on the edge its buttons use; surux-toast.js sets its left/right/width. */
.surux-toast-host {
  /* TR-0000525: reset native popover chrome; the cards own their appearance. */
  position: fixed;
  inset: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  /* Three cards stay visible; older ones are hidden behind the "+N more" pill, so the host
     never scrolls. A scrollport would paint a bar while the card's enter/exit translate
     crosses the box (command bar and top-right alike), and clipping would cut the cards'
     shadows and the slide, so nothing is clipped either. */
  overflow: visible;
  left: 50%;
  bottom: calc(5.8rem + env(safe-area-inset-bottom));
  z-index: 5000;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  width: min(380px, calc(100vw - 2rem));
  transform: translateX(-50%);
  pointer-events: none;
}
.surux-toast-host::backdrop { background: transparent; pointer-events: none; }
.surux-toast-host > .surux-toast { flex-shrink: 0; }
.surux-toast-host-top-right {
  left: auto;
  right: max(1rem, env(safe-area-inset-right));
  top: calc(var(--surux-topbar-height, 64px) + .75rem + env(safe-area-inset-top));
  bottom: auto;
  width: min(380px, calc(100vw - 2rem));
  transform: none;
}
html.surux-validation-visible .surux-toast-host-top-right {
  top: calc(var(--surux-topbar-height, 64px) + 1.5rem + var(--surux-validation-overlay-height, 6rem) + env(safe-area-inset-top));
}
body:has(.surux-standalone-shell) .surux-toast-host-top-right {
  top: calc(.75rem + env(safe-area-inset-top));
}
html.surux-validation-visible body:has(.surux-standalone-shell) .surux-toast-host-top-right {
  top: calc(1.5rem + var(--surux-validation-overlay-height, 6rem) + env(safe-area-inset-top));
}
.surux-toast-host[data-surux-toast-alignment="left"] > .surux-toast-more { align-self: flex-start; }
.surux-toast-host[data-surux-toast-alignment="middle"] > .surux-toast-more { align-self: center; }
.surux-toast-more {
  order: -1;
  align-self: flex-end;
  padding: .12rem .6rem;
  border: 1px solid var(--surux-border);
  border-radius: 999px;
  background: var(--surux-surface);
  color: var(--surux-muted);
  font-size: .76rem;
  font-weight: 700;
  pointer-events: auto;
}
.surux-toast {
  --surux-toast-tone: var(--surux-primary);
  position: relative;
  overflow: hidden;
  min-height: 3.25rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "icon copy close";
  gap: .35rem .7rem;
  align-items: start;
  padding: .68rem .72rem;
  border: var(--surux-border-width) solid color-mix(in srgb, var(--surux-toast-tone) 28%, var(--surux-border));
  border-radius: .62rem;
  background:
    linear-gradient(105deg, color-mix(in srgb, var(--surux-toast-tone) 8%, transparent), transparent 52%),
    color-mix(in srgb, var(--surux-surface) 96%, var(--surux-toast-tone) 4%);
  color: var(--surux-text);
  box-shadow: inset .16rem 0 0 color-mix(in srgb, var(--surux-toast-tone) 58%, transparent), var(--surux-elevation-toast);
  backdrop-filter: var(--surux-blur-float);
  -webkit-backdrop-filter: var(--surux-blur-float);
  opacity: 0;
  transform: translateY(.5rem);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: auto;
}
.surux-toast:has(.surux-toast-actions) {
  grid-template-areas:
    "icon copy close"
    ". actions actions";
}
.surux-toast.show { opacity: 1; transform: none; }
.surux-toast[hidden] { display: none; }
.surux-toast-success { --surux-toast-tone: var(--surux-success-fill, var(--surux-success)); }
.surux-toast-info, .surux-toast-notification { --surux-toast-tone: var(--surux-primary); }
.surux-toast-warning { --surux-toast-tone: var(--surux-warning); }
.surux-toast-error { --surux-toast-tone: var(--surux-danger-fill, var(--surux-danger)); }
.surux-toast-saving, .surux-toast-undo { --surux-toast-tone: var(--surux-primary); }
.surux-toast-icon {
  grid-area: icon;
  width: 1.75rem;
  height: 1.75rem;
  margin-top: .06rem;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: .52rem;
  font-size: .78rem;
  color: color-mix(in srgb, var(--surux-toast-tone) 82%, var(--surux-text));
  background: color-mix(in srgb, var(--surux-toast-tone) 14%, transparent);
}
.surux-toast-saving .surux-toast-icon i { animation: surux-toast-spin .85s linear infinite; }
.surux-toast-copy { grid-area: copy; min-width: 0; display: grid; gap: .08rem; padding-top: .12rem; }
.surux-toast-title { font-size: .84rem; font-weight: 750; line-height: 1.3; }
.surux-toast-message { font-size: .82rem; font-weight: 450; line-height: 1.4; overflow-wrap: anywhere; }
.surux-toast-title + .surux-toast-message { color: color-mix(in srgb, var(--surux-muted) 88%, var(--surux-text)); font-weight: 450; font-size: .82rem; }
.surux-toast-count {
  margin-inline-start: .35rem;
  padding: .1rem .4rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surux-toast-tone) 16%, transparent);
  color: var(--surux-toast-tone);
  font-size: .7rem;
  font-weight: 800;
}
.surux-toast-actions {
  grid-area: actions;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: .3rem;
  /* Action padding is .7rem; pull the row back so the first label lines up with the message. */
  margin-inline-start: -.7rem;
}
.surux-toast-action {
  padding: .3rem .7rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: color-mix(in srgb, var(--surux-toast-tone) 80%, var(--surux-text));
  font: inherit;
  font-size: .82rem;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.surux-toast-action:disabled { opacity: .6; cursor: default; }
.surux-toast-close {
  flex: 0 0 auto;
  align-self: start;
  grid-area: close;
  margin-top: -.12rem;
}
.surux-toast-close:disabled {
  cursor: default;
}
.surux-toast-close:focus-visible,
.surux-toast-action:focus-visible {
  outline: 2px solid rgba(var(--surux-primary-rgb), .55);
  outline-offset: 2px;
}
.surux-toast-timer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: color-mix(in srgb, var(--surux-toast-tone) 60%, transparent);
  transform-origin: left;
}
@keyframes surux-toast-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .surux-toast { transition: none; transform: none; }
  .surux-toast-saving .surux-toast-icon i { animation: none; }
  .surux-toast-timer { display: none; }
}
.surux-version-update-card {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: calc(1rem + env(safe-area-inset-bottom));
  z-index: 2350;
  width: min(460px, calc(100vw - 2rem));
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .85rem;
  align-items: center;
  padding: .85rem;
  border: 1px solid color-mix(in srgb, var(--surux-border) 66%, rgba(var(--surux-primary-rgb), .48));
  border-radius: .82rem;
  background:
    linear-gradient(135deg, rgba(var(--surux-primary-rgb), .13), transparent 62%),
    color-mix(in srgb, var(--surux-surface) 94%, transparent);
  color: var(--surux-text);
  box-shadow:
    0 1.25rem 3rem rgba(0, 0, 0, .30),
    inset 1px 1px 0 rgba(255, 255, 255, .11);
  backdrop-filter: blur(18px);
  opacity: 0;
  transform: translateY(.75rem);
  transition: opacity .2s ease, transform .2s ease;
}.surux-version-update-card.show {
  opacity: 1;
  transform: translateY(0);
}.surux-version-update-card.is-refreshing {
  border-color: color-mix(in srgb, rgba(var(--surux-primary-rgb), .72), var(--surux-border) 28%);
}.surux-version-update-icon {
  width: 42px;
  height: 42px;
  border-radius: .78rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, rgba(var(--surux-primary-rgb), .96), rgba(var(--surux-primary-rgb), .60));
  box-shadow: 0 .75rem 1.8rem rgba(var(--surux-primary-rgb), .24);
}.surux-version-update-card.is-refreshing .surux-version-update-icon {
  filter: saturate(1.08) brightness(1.05);
}.surux-version-update-copy {
  min-width: 0;
  display: grid;
  gap: .16rem;
}.surux-version-update-copy strong {
  font-size: .96rem;
  line-height: 1.25;
}.surux-version-update-copy span {
  color: var(--surux-muted);
  font-size: .86rem;
  line-height: 1.35;
}.surux-version-update-refresh {
  min-height: 40px !important;
  padding: 0 .9rem !important;
}.surux-version-update-refresh[aria-busy="true"] {
  pointer-events: none;
  cursor: progress !important;
  opacity: 1 !important;
  filter: saturate(1.06) brightness(1.04);
}.surux-version-update-refresh[aria-busy="true"] .surux-command-button-icon {
  color: #fff !important;
}

@media (max-width: 575.98px) {.surux-version-update-card {
    left: max(1rem, env(safe-area-inset-left));
    right: max(1rem, env(safe-area-inset-right));
    width: auto;
    grid-template-columns: auto minmax(0, 1fr);
  }.surux-version-update-refresh {
    grid-column: 1 / -1;
    width: 100%;
  }
}#components-reconnect-modal {
  position: fixed;
  inset: 0;
  z-index: 6000;
  display: none;
  place-items: center;
  padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  background:
    radial-gradient(circle at 50% 36%, rgba(var(--surux-primary-rgb), .24), transparent 28rem),
    rgba(0, 0, 0, .38);
  backdrop-filter: blur(14px);
}#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
  display: grid;
}#components-reconnect-modal.components-reconnect-hide {
  display: none;
}#components-reconnect-modal .surux-reconnect-card {
  width: min(390px, 100%);
  display: grid;
  grid-template-columns: 1fr;
  gap: .95rem;
  align-items: center;
  justify-items: center;
  padding: 1.25rem;
  text-align: center;
  border: 1px solid color-mix(in srgb, var(--surux-border) 74%, rgba(var(--surux-primary-rgb), .42));
  border-radius: 1rem;
  background:
    linear-gradient(135deg, rgba(var(--surux-primary-rgb), .12), transparent 62%),
    color-mix(in srgb, var(--surux-surface) 94%, transparent);
  color: var(--surux-text);
  box-shadow:
    0 1.2rem 3.2rem rgba(0, 0, 0, .34),
    inset 1px 1px 0 rgba(255, 255, 255, .10);
  backdrop-filter: blur(18px);
}#components-reconnect-modal .surux-reconnect-icon {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: #fff;
  background: linear-gradient(135deg, rgba(var(--surux-primary-rgb), .96), rgba(var(--surux-primary-rgb), .58));
  box-shadow: 0 .75rem 1.8rem rgba(var(--surux-primary-rgb), .24);
}#components-reconnect-modal .surux-reconnect-icon::after {
  content: "";
  position: absolute;
  inset: -.4rem;
  border-radius: 1.25rem;
  border: 1px solid rgba(var(--surux-primary-rgb), .36);
  opacity: .8;
}#components-reconnect-modal.components-reconnect-show .surux-reconnect-icon::after,
#components-reconnect-modal.components-reconnect-failed .surux-reconnect-icon::after {
  animation: surux-reconnect-pulse 1.2s ease-in-out infinite;
}#components-reconnect-modal.components-reconnect-failed .surux-reconnect-card {
  border-color: color-mix(in srgb, var(--surux-warning-fill) 38%, var(--surux-border));
}#components-reconnect-modal.components-reconnect-failed .surux-reconnect-icon {
  background: linear-gradient(135deg, var(--surux-warning-fill), rgba(var(--surux-primary-rgb), .62));
}#components-reconnect-modal.components-reconnect-rejected .surux-reconnect-card {
  border-color: color-mix(in srgb, var(--surux-danger-fill) 56%, transparent);
}#components-reconnect-modal.components-reconnect-rejected .surux-reconnect-icon {
  background: linear-gradient(135deg, var(--surux-danger-fill), rgba(var(--surux-primary-rgb), .54));
}#components-reconnect-modal .surux-reconnect-copy {
  min-width: 0;
  display: grid;
  justify-items: center;
}#components-reconnect-modal .surux-reconnect-title,
#components-reconnect-modal .surux-reconnect-message,
#components-reconnect-modal .surux-reconnect-actions {
  display: none;
}#components-reconnect-modal.components-reconnect-show .surux-reconnect-title-show,
#components-reconnect-modal.components-reconnect-failed .surux-reconnect-title-failed,
#components-reconnect-modal.components-reconnect-rejected .surux-reconnect-title-rejected {
  display: block;
}#components-reconnect-modal.surux-reconnect-reloading .surux-reconnect-title {
  display: none;
}#components-reconnect-modal.surux-reconnect-reloading .surux-reconnect-title-reloading {
  display: block;
}#components-reconnect-modal.components-reconnect-show .surux-reconnect-message-show,
#components-reconnect-modal.components-reconnect-failed .surux-reconnect-message-failed,
#components-reconnect-modal.components-reconnect-rejected .surux-reconnect-message-rejected {
  display: block;
}#components-reconnect-modal.surux-reconnect-reloading .surux-reconnect-message {
  display: none;
}#components-reconnect-modal.surux-reconnect-reloading .surux-reconnect-message-reloading {
  display: block;
}#components-reconnect-modal.components-reconnect-rejected .surux-reconnect-actions {
  display: flex;
}#components-reconnect-modal.surux-reconnect-reloading .surux-reconnect-actions {
  display: flex;
}#components-reconnect-modal.surux-reconnect-reloading .surux-reconnect-card {
  border-color: color-mix(in srgb, rgba(var(--surux-primary-rgb), .7), var(--surux-border) 30%);
}#components-reconnect-modal .surux-reconnect-reload[aria-busy="true"] {
  pointer-events: none;
  cursor: progress !important;
  opacity: 1 !important;
  filter: saturate(1.06) brightness(1.04);
}#components-reconnect-modal .surux-reconnect-reload[aria-busy="true"] .surux-command-button-icon {
  color: #fff !important;
}#components-reconnect-modal .surux-reconnect-title {
  font-size: 1.05rem;
  line-height: 1.25;
}#components-reconnect-modal .surux-reconnect-message {
  margin: .32rem 0 0;
  max-width: 18rem;
  color: var(--surux-muted);
  font-size: .9rem;
  line-height: 1.4;
}#components-reconnect-modal .surux-reconnect-attempt {
  white-space: nowrap;
}#components-reconnect-modal .surux-reconnect-actions {
  margin-top: .85rem;
  justify-content: center;
}

@keyframes surux-reconnect-pulse {
  0%,
  100% {
    transform: scale(.96);
    opacity: .46;
  }

  50% {
    transform: scale(1.06);
    opacity: .92;
  }
}

@media (max-width: 575.98px) {#components-reconnect-modal .surux-reconnect-card {
    width: min(100%, 22rem);
    padding: 1.15rem;
  }
}.surux-empty-state {
  min-height: 260px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: .75rem;
  text-align: center;
}.surux-empty-icon {
  width: 84px;
  height: 84px;
  border-radius: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: var(--surux-primary);
  background: rgba(var(--surux-primary-rgb), .12);
}.surux-empty-icon i {
  line-height: 1;
}.surux-empty-title {
  margin: 0;
  color: var(--surux-text);
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.25;
}.surux-empty-state p {
  max-width: 34rem;
  margin: 0;
}.surux-empty-actions {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .65rem;
  margin-top: .2rem;
}.surux-heat-0 { background-color: var(--surux-heat-bg-0); --surux-heat-bar: var(--surux-heat-0); }
.surux-heat-1 { background-color: var(--surux-heat-bg-1); --surux-heat-bar: var(--surux-heat-1); }
.surux-heat-2 { background-color: var(--surux-heat-bg-2); --surux-heat-bar: var(--surux-heat-2); }
.surux-heat-3 { background-color: var(--surux-heat-bg-3); --surux-heat-bar: var(--surux-heat-3); }
.surux-heat-4 { background-color: var(--surux-heat-bg-4); --surux-heat-bar: var(--surux-heat-4); }
.surux-heat-5 { background-color: var(--surux-heat-bg-5); --surux-heat-bar: var(--surux-heat-5); }
.surux-heat-6 { background-color: var(--surux-heat-bg-6); --surux-heat-bar: var(--surux-heat-6); }
.surux-heat-7 { background-color: var(--surux-heat-bg-7); --surux-heat-bar: var(--surux-heat-7); }
.surux-heat-8 { background-color: var(--surux-heat-bg-8); --surux-heat-bar: var(--surux-heat-8); }
.surux-heat-9 { background-color: var(--surux-heat-bg-9); --surux-heat-bar: var(--surux-heat-9); }
.surux-heat-10 { background-color: var(--surux-heat-bg-10); --surux-heat-bar: var(--surux-heat-10); }
.surux-status-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: .45rem .75rem;
}
.surux-status-row > .surux-status-chip {
  flex: 0 0 auto;
  width: fit-content;
  max-width: 100%;
}
.surux-status-chip {
  --surux-status-bg: rgba(var(--surux-primary-rgb), .10);
  --surux-status-border: rgba(var(--surux-primary-rgb), .35);
  --surux-status-color: var(--surux-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  min-height: 28px;
  padding: .32rem .72rem;
  border-radius: var(--surux-radius-pill);
  border: var(--surux-border-width) solid var(--surux-status-border);
  background: var(--surux-status-bg);
  color: var(--surux-status-color);
  font-size: .78rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}.surux-status-chip i {
  line-height: 1;
}.surux-lock-chip-host {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
}.surux-lock-chip {
  --surux-status-bg: color-mix(in srgb, var(--surux-muted) 16%, transparent);
  --surux-status-border: color-mix(in srgb, var(--surux-muted) 46%, transparent);
  --surux-status-color: var(--surux-muted);
}button.surux-lock-chip {
  cursor: help;
  font: inherit;
  appearance: none;
}span.surux-lock-chip {
  cursor: default;
}button.surux-lock-chip:focus-visible {
  outline: 2px solid var(--surux-primary);
  outline-offset: 2px;
}.surux-lock-chip-reason {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}.surux-lock-chip-host:hover .surux-lock-chip-reason,
.surux-lock-chip-host:focus-within .surux-lock-chip-reason {
  top: calc(100% + .35rem);
  inset-inline-start: 0;
  z-index: 6;
  width: max-content;
  max-width: min(18rem, 70vw);
  height: auto;
  margin: 0;
  padding: .45rem .65rem;
  overflow: visible;
  clip: auto;
  white-space: normal;
  border: 1px solid var(--surux-border);
  border-radius: .55rem;
  background: var(--surux-surface);
  color: var(--surux-text);
  font-size: .75rem;
  font-weight: 650;
  line-height: 1.35;
  box-shadow: 0 8px 22px color-mix(in srgb, #000 24%, transparent);
}

@media (max-width: 575.98px) {
}.surux-status-created {
  --surux-status-bg: rgba(148, 163, 184, .12);
  --surux-status-border: rgba(148, 163, 184, .40);
  --surux-status-color: #e2e8f0;
}
/* TR-0000189: semantic tones inherit the current appearance and independent colour-vision
   setting. Blend text toward the theme foreground on a lightly tinted neutral surface.
   A17. Lifecycle, which is not a workflow stage. Nodes borrowed the invoice tokens for its three
   states - Active read as "paid", Suspended as "overdue", Inactive as "created" - so a record's
   status was coloured by what an invoice would have meant, and renaming an invoice state would have
   recoloured a client. Four other pages had been emitting surux-status-active and
   surux-status-inactive against nothing at all, and fell back to the bare chip. */
.surux-status-active {
  --surux-status-bg: color-mix(in srgb, var(--surux-success) 6%, var(--surux-surface));
  --surux-status-border: color-mix(in srgb, var(--surux-success) 52%, transparent);
  --surux-status-color: color-mix(in srgb, var(--surux-success) 75%, var(--surux-text));
}.surux-status-suspended {
  --surux-status-bg: color-mix(in srgb, var(--surux-warning) 6%, var(--surux-surface));
  --surux-status-border: color-mix(in srgb, var(--surux-warning) 52%, transparent);
  --surux-status-color: color-mix(in srgb, var(--surux-warning) 75%, var(--surux-text));
}.surux-status-inactive {
  --surux-status-bg: rgba(100, 116, 139, .18);
  --surux-status-border: rgba(100, 116, 139, .52);
  --surux-status-color: #cbd5e1;
}
/* Informational rather than a state: the marker saying a record is also the other kind is not a
   lifecycle value and must not read as one. */
.surux-status-neutral {
  --surux-status-bg: rgba(148, 163, 184, .12);
  --surux-status-border: rgba(148, 163, 184, .40);
  --surux-status-color: #e2e8f0;
}.surux-status-submitted,
.surux-status-sent {
  --surux-status-bg: var(--surux-workflow-submitted-bg);
  --surux-status-border: var(--surux-workflow-submitted-border);
  --surux-status-color: var(--surux-workflow-submitted-color);
}.surux-status-approved {
  --surux-status-bg: var(--surux-workflow-approved-bg);
  --surux-status-border: var(--surux-workflow-approved-border);
  --surux-status-color: var(--surux-workflow-approved-color);
}
/* TR-0000233. In progress and On hold were hard-coded rgba with dark-only ink, and .onhold was
   declared twice, the second silently replacing the first. They now read the workflow families, so
   appearance and colour-vision assistance recolour them with everything else: In progress the
   progress family, On hold (also payroll's Locked) the approved family it already resembled. */
.surux-status-inprogress {
  --surux-status-bg: var(--surux-workflow-progress-bg);
  --surux-status-border: var(--surux-workflow-progress-border);
  --surux-status-color: var(--surux-workflow-progress-color);
}.surux-status-onhold {
  --surux-status-bg: var(--surux-workflow-approved-bg);
  --surux-status-border: var(--surux-workflow-approved-border);
  --surux-status-color: var(--surux-workflow-approved-color);
}
/* TR-0000233. Status tones for tenant-configured workflows (technical-request lanes and chips). A
   status's tone is chosen in Settings > Operations or follows its role, so a tenant's own "Developer
   Testing Failed" can read as danger. Success, warning and danger mix the semantic tokens the way
   the outcome chips do; info and progress read the approved and progress workflow families; neutral
   follows the theme foreground. None reads the tenant accent. */
.surux-status-tone-neutral {
  --surux-status-bg: color-mix(in srgb, var(--surux-text) 5%, var(--surux-surface));
  --surux-status-border: color-mix(in srgb, var(--surux-text) 28%, transparent);
  --surux-status-color: var(--surux-text);
}.surux-status-tone-info {
  --surux-status-bg: var(--surux-workflow-approved-bg);
  --surux-status-border: var(--surux-workflow-approved-border);
  --surux-status-color: var(--surux-workflow-approved-color);
}.surux-status-tone-progress {
  --surux-status-bg: var(--surux-workflow-progress-bg);
  --surux-status-border: var(--surux-workflow-progress-border);
  --surux-status-color: var(--surux-workflow-progress-color);
}.surux-status-tone-warning {
  --surux-status-bg: color-mix(in srgb, var(--surux-warning) 6%, var(--surux-surface));
  --surux-status-border: color-mix(in srgb, var(--surux-warning) 52%, transparent);
  --surux-status-color: color-mix(in srgb, var(--surux-warning) 75%, var(--surux-text));
}.surux-status-tone-success {
  --surux-status-bg: color-mix(in srgb, var(--surux-success) 6%, var(--surux-surface));
  --surux-status-border: color-mix(in srgb, var(--surux-success) 52%, transparent);
  --surux-status-color: color-mix(in srgb, var(--surux-success) 75%, var(--surux-text));
}.surux-status-tone-danger {
  --surux-status-bg: color-mix(in srgb, var(--surux-danger) 6%, var(--surux-surface));
  --surux-status-border: color-mix(in srgb, var(--surux-danger) 52%, transparent);
  --surux-status-color: color-mix(in srgb, var(--surux-danger) 75%, var(--surux-text));
}.surux-status-accepted,
.surux-status-invoiced,
.surux-status-completed {
  --surux-status-bg: color-mix(in srgb, var(--surux-success) 6%, var(--surux-surface));
  --surux-status-border: color-mix(in srgb, var(--surux-success) 52%, transparent);
  --surux-status-color: color-mix(in srgb, var(--surux-success) 75%, var(--surux-text));
}.surux-status-acceptedreview {
  --surux-status-bg: color-mix(in srgb, var(--surux-warning) 6%, var(--surux-surface));
  --surux-status-border: color-mix(in srgb, var(--surux-warning) 52%, transparent);
  --surux-status-color: color-mix(in srgb, var(--surux-warning) 75%, var(--surux-text));
}.surux-status-paid {
  --surux-status-bg: var(--surux-workflow-paid-bg);
  --surux-status-border: var(--surux-workflow-paid-border);
  --surux-status-color: var(--surux-workflow-paid-color);
}.surux-status-partiallypaid {
  --surux-status-bg: color-mix(in srgb, var(--surux-warning) 6%, var(--surux-surface));
  --surux-status-border: color-mix(in srgb, var(--surux-warning) 52%, transparent);
  --surux-status-color: color-mix(in srgb, var(--surux-warning) 75%, var(--surux-text));
}.surux-status-rejected,
.surux-status-declined {
  --surux-status-bg: var(--surux-workflow-rejected-bg);
  --surux-status-border: var(--surux-workflow-rejected-border);
  --surux-status-color: var(--surux-workflow-rejected-color);
}.surux-status-cancelled {
  --surux-status-bg: rgba(51, 65, 85, .28);
  --surux-status-border: rgba(100, 116, 139, .68);
  --surux-status-color: #e2e8f0;
}.surux-status-expired {
  --surux-status-bg: rgba(100, 116, 139, .18);
  --surux-status-border: rgba(100, 116, 139, .52);
  --surux-status-color: #cbd5e1;
}.surux-status-overdue {
  --surux-status-bg: color-mix(in srgb, var(--surux-warning) 6%, var(--surux-surface));
  --surux-status-border: color-mix(in srgb, var(--surux-warning) 52%, transparent);
  --surux-status-color: color-mix(in srgb, var(--surux-warning) 75%, var(--surux-text));
}.surux-status-pending,
.surux-status-revise {
  --surux-status-bg: color-mix(in srgb, var(--surux-warning) 6%, var(--surux-surface));
  --surux-status-border: color-mix(in srgb, var(--surux-warning) 52%, transparent);
  --surux-status-color: color-mix(in srgb, var(--surux-warning) 75%, var(--surux-text));
}.surux-status-priority-none {
  --surux-status-bg: rgba(100, 116, 139, .18);
  --surux-status-border: rgba(100, 116, 139, .52);
  --surux-status-color: #cbd5e1;
}.surux-status-priority-low {
  --surux-status-bg: rgba(59, 130, 246, .14);
  --surux-status-border: rgba(59, 130, 246, .48);
  --surux-status-color: #bfdbfe;
}.surux-status-priority-medium {
  --surux-status-bg: color-mix(in srgb, var(--surux-warning) 6%, var(--surux-surface));
  --surux-status-border: color-mix(in srgb, var(--surux-warning) 52%, transparent);
  --surux-status-color: color-mix(in srgb, var(--surux-warning) 75%, var(--surux-text));
}.surux-status-priority-high {
  --surux-status-bg: color-mix(in srgb, var(--surux-danger) 6%, var(--surux-surface));
  --surux-status-border: color-mix(in srgb, var(--surux-danger) 52%, transparent);
  --surux-status-color: color-mix(in srgb, var(--surux-danger) 75%, var(--surux-text));
}.surux-status-priority-emergency {
  --surux-status-bg: rgba(168, 85, 247, .16);
  --surux-status-border: rgba(168, 85, 247, .52);
  --surux-status-color: #e9d5ff;
}.surux-status-priority-unknown {
  --surux-status-bg: color-mix(in srgb, var(--surux-muted) 12%, var(--surux-surface));
  --surux-status-border: color-mix(in srgb, var(--surux-muted) 52%, transparent);
  --surux-status-color: color-mix(in srgb, var(--surux-muted) 80%, var(--surux-text));
}.surux-status-priority-normal {
  --surux-status-bg: color-mix(in srgb, var(--surux-text) 5%, var(--surux-surface));
  --surux-status-border: color-mix(in srgb, var(--surux-text) 28%, transparent);
  --surux-status-color: var(--surux-text);
}.surux-status-priority-urgent {
  --surux-status-bg: color-mix(in srgb, var(--surux-danger) 8%, var(--surux-surface));
  --surux-status-border: color-mix(in srgb, var(--surux-danger) 58%, transparent);
  --surux-status-color: color-mix(in srgb, var(--surux-danger) 80%, var(--surux-text));
}.surux-status-priority-critical {
  --surux-status-bg: color-mix(in srgb, var(--surux-danger) 12%, var(--surux-surface));
  --surux-status-border: color-mix(in srgb, var(--surux-danger) 70%, transparent);
  --surux-status-color: color-mix(in srgb, var(--surux-danger) 85%, var(--surux-text));
}
/* Outcome of an automated step - a push reaching a plate hit, a delivery, a recovery. It is
   neither a lifecycle nor a workflow state, so it borrows neither family: it reads the semantic
   tokens directly, and its neutral follows the theme rather than a dark-only grey. */
.surux-status-outcome-success {
  --surux-status-bg: color-mix(in srgb, var(--surux-success) 6%, var(--surux-surface));
  --surux-status-border: color-mix(in srgb, var(--surux-success) 52%, transparent);
  --surux-status-color: color-mix(in srgb, var(--surux-success) 75%, var(--surux-text));
}.surux-status-outcome-warning {
  --surux-status-bg: color-mix(in srgb, var(--surux-warning) 6%, var(--surux-surface));
  --surux-status-border: color-mix(in srgb, var(--surux-warning) 52%, transparent);
  --surux-status-color: color-mix(in srgb, var(--surux-warning) 75%, var(--surux-text));
}.surux-status-outcome-danger {
  --surux-status-bg: color-mix(in srgb, var(--surux-danger) 6%, var(--surux-surface));
  --surux-status-border: color-mix(in srgb, var(--surux-danger) 52%, transparent);
  --surux-status-color: color-mix(in srgb, var(--surux-danger) 75%, var(--surux-text));
}.surux-status-outcome-neutral {
  --surux-status-bg: color-mix(in srgb, var(--surux-text) 5%, var(--surux-surface));
  --surux-status-border: color-mix(in srgb, var(--surux-text) 28%, transparent);
  --surux-status-color: var(--surux-text);
}

/* Shared non-interactive icon badge. Use SuruXButton IconOnly for actions. */
.surux-icon-badge {
  --surux-icon-badge-size: 2.5rem;
  --surux-icon-badge-icon-size: 1rem;
  --surux-icon-badge-radius: 999px;
  --surux-icon-badge-color: var(--surux-muted);
  --surux-icon-badge-bg: color-mix(in srgb, var(--surux-muted) 12%, transparent);
  --surux-icon-badge-border: color-mix(in srgb, var(--surux-muted) 42%, transparent);
  inline-size: var(--surux-icon-badge-size);
  block-size: var(--surux-icon-badge-size);
  flex: 0 0 var(--surux-icon-badge-size);
  display: inline-grid;
  place-items: center;
  box-sizing: border-box;
  border: 0;
  border-radius: var(--surux-icon-badge-radius);
  color: var(--surux-icon-badge-color);
  background: var(--surux-icon-badge-bg);
  font-size: var(--surux-icon-badge-icon-size);
  line-height: 1;
}

.surux-icon-badge-size-small {
  --surux-icon-badge-size: 2rem;
  --surux-icon-badge-icon-size: .85rem;
}

.surux-icon-badge-size-large {
  --surux-icon-badge-size: 3rem;
  --surux-icon-badge-icon-size: 1.2rem;
}

.surux-icon-badge-shape-rounded {
  --surux-icon-badge-radius: .65rem;
}

.surux-icon-badge-tone-primary {
  --surux-icon-badge-color: var(--surux-primary);
  --surux-icon-badge-bg: rgba(var(--surux-primary-rgb), .15);
  --surux-icon-badge-border: rgba(var(--surux-primary-rgb), .42);
}

.surux-icon-badge-tone-success {
  --surux-icon-badge-color: color-mix(in srgb, var(--surux-success) 75%, var(--surux-text));
  --surux-icon-badge-bg: color-mix(in srgb, var(--surux-success) 6%, var(--surux-surface));
  --surux-icon-badge-border: color-mix(in srgb, var(--surux-success) 48%, transparent);
}

.surux-icon-badge-tone-warning {
  --surux-icon-badge-color: color-mix(in srgb, var(--surux-warning) 75%, var(--surux-text));
  --surux-icon-badge-bg: color-mix(in srgb, var(--surux-warning) 6%, var(--surux-surface));
  --surux-icon-badge-border: color-mix(in srgb, var(--surux-warning) 48%, transparent);
}

.surux-icon-badge-tone-danger {
  --surux-icon-badge-color: color-mix(in srgb, var(--surux-danger) 75%, var(--surux-text));
  --surux-icon-badge-bg: color-mix(in srgb, var(--surux-danger) 6%, var(--surux-surface));
  --surux-icon-badge-border: color-mix(in srgb, var(--surux-danger) 48%, transparent);
}

.surux-icon-badge-tone-status {
  --surux-icon-badge-color: var(--surux-status-color, var(--surux-muted));
  --surux-icon-badge-bg: var(--surux-status-bg, color-mix(in srgb, var(--surux-muted) 12%, transparent));
  --surux-icon-badge-border: var(--surux-status-border, color-mix(in srgb, var(--surux-muted) 42%, transparent));
}

.surux-icon-badge-variant-outline {
  border: 1px solid var(--surux-icon-badge-border);
  background: color-mix(in srgb, var(--surux-icon-badge-bg) 42%, transparent);
}

[data-bs-theme="light"] .surux-icon-badge-tone-success {
  --surux-icon-badge-color: color-mix(in srgb, var(--surux-success) 75%, var(--surux-text));
}

[data-bs-theme="light"] .surux-icon-badge-tone-warning {
  --surux-icon-badge-color: color-mix(in srgb, var(--surux-warning) 75%, var(--surux-text));
}

[data-bs-theme="light"] .surux-icon-badge-tone-danger {
  --surux-icon-badge-color: color-mix(in srgb, var(--surux-danger) 75%, var(--surux-text));
}

.surux-eyebrow {
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--surux-primary);
  font-size: .75rem;
  margin-bottom: .35rem;
  font-weight: 800;
}.disabled,
[aria-disabled="true"] {
  pointer-events: none;
  opacity: .52;
}/* SuruX v0.2 UI fix 3: collapsed theme alignment */
.surux-theme-menu {
  min-width: 0;
}.surux-theme-trigger,
.surux-theme-trigger.btn {
  line-height: 1;
}.surux-theme-icon,
.surux-theme-icon i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-align: center;
}.surux-sidebar:not(:hover):not(.pinned) .surux-theme-menu {
  width: 44px;
  height: 44px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}.surux-sidebar:not(:hover):not(.pinned) .surux-theme-trigger {
  width: 44px;
  min-width: 44px;
  max-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}.surux-sidebar:not(:hover):not(.pinned) .surux-theme-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
}.surux-sidebar:not(:hover):not(.pinned) .surux-theme-icon i {
  width: 1.08rem;
  min-width: 1.08rem;
  height: 1.08rem;
}.surux-sidebar .surux-theme-trigger {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 .75rem !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}.surux-sidebar .surux-theme-trigger .surux-theme-text {
  display: inline !important;
}.surux-sidebar .surux-theme-trigger::after {
  display: inline-block !important;
}.surux-sidebar .surux-theme-icon {
  width: 1.1rem !important;
  height: 1.1rem !important;
  flex: 0 0 1.1rem !important;
}body.surux-sidebar-open .surux-theme-menu {
  width: 100% !important;
  height: auto !important;
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: stretch !important;
  overflow: visible !important;
}.surux-sidebar .surux-theme-trigger,
body.surux-sidebar-open .surux-theme-trigger {
  width: 100% !important;
  min-width: 0 !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 .85rem !important;
  border-radius: .55rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: .65rem !important;
  overflow: visible !important;
  white-space: nowrap !important;
}.surux-sidebar .surux-theme-trigger .surux-theme-text,
body.surux-sidebar-open .surux-theme-trigger .surux-theme-text {
  display: inline !important;
  opacity: 1 !important;
  max-width: none !important;
  overflow: visible !important;
}.surux-sidebar .surux-theme-trigger::after,
body.surux-sidebar-open .surux-theme-trigger::after {
  display: inline-block !important;
  margin-left: auto !important;
}.surux-sidebar .surux-theme-icon,
body.surux-sidebar-open .surux-theme-icon {
  width: 1.1rem !important;
  height: 1.1rem !important;
  flex: 0 0 1.1rem !important;
}.surux-theme-menu .dropdown-menu {
  width: 100%;
}/* UI fix: stable in-drawer theme menu */
.surux-theme-menu {
  width: 100%;
  display: block;
  position: relative;
  color: var(--surux-text);
}.surux-theme-menu > summary {
  list-style: none;
}.surux-theme-menu > summary::-webkit-details-marker {
  display: none;
}.surux-theme-trigger {
  width: 100%;
  min-height: 42px;
  padding: 0 .8rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: .62rem;
  border: 1px solid var(--surux-border);
  border-radius: .58rem;
  background: rgba(255, 255, 255, .055);
  color: var(--surux-text);
  cursor: pointer;
  line-height: 1.25;
  overflow: visible;
  user-select: none;
}.surux-theme-trigger:hover,
.surux-theme-menu[open] > .surux-theme-trigger {
  background: rgba(var(--surux-primary-rgb), .14);
  border-color: rgba(var(--surux-primary-rgb), .35);
  color: var(--surux-text);
}.surux-theme-trigger::after {
  display: none !important;
}.surux-theme-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}.surux-theme-icon i,
.surux-theme-row i,
.surux-theme-caret i {
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}.surux-theme-text {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.35;
  overflow: visible;
}.surux-theme-caret {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: .75;
  transition: transform .16s ease;
}.surux-theme-menu[open] .surux-theme-caret {
  transform: rotate(180deg);
}.surux-theme-section {
  display: grid;
  gap: .3rem;
}.surux-theme-section-title {
  padding: .15rem .45rem .1rem;
  color: var(--surux-muted);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .12em;
  line-height: 1.2;
  text-transform: uppercase;
}.surux-theme-lock-note {
  margin: .2rem .15rem .35rem;
  padding: .55rem .65rem;
  border: 1px solid color-mix(in srgb, var(--surux-border) 72%, rgba(var(--surux-primary-rgb), .28));
  border-radius: .5rem;
  background: color-mix(in srgb, var(--surux-surface-2) 72%, rgba(var(--surux-primary-rgb), .08));
  color: var(--surux-muted);
  font-size: .8rem;
  line-height: 1.3;
}.surux-theme-row {
  width: 100%;
  min-height: 3.15rem;
  padding: .55rem .6rem;
  border: 1px solid transparent;
  border-radius: .5rem;
  background: color-mix(in srgb, var(--surux-surface-2) 44%, transparent);
  color: var(--surux-text);
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) 1.25rem;
  align-items: center;
  gap: .55rem;
  line-height: 1.35;
  text-align: left;
  text-decoration: none;
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}.surux-theme-row:hover,
.surux-theme-row:focus-visible {
  background: rgba(var(--surux-primary-rgb), .12);
  border-color: rgba(var(--surux-primary-rgb), .28);
  color: var(--surux-text);
  outline: none;
  transform: translateY(-1px);
  box-shadow: 0 .5rem 1.15rem rgba(0, 0, 0, .14);
}.surux-theme-row[aria-checked="true"] {
  background: color-mix(in srgb, rgba(var(--surux-primary-rgb), .16) 76%, var(--surux-surface-2));
  border-color: rgba(var(--surux-primary-rgb), .38);
}.surux-theme-row-icon,
.surux-theme-row-check {
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: .45rem;
}.surux-theme-row-icon {
  background: rgba(var(--surux-primary-rgb), .14);
  color: var(--surux-primary);
}.surux-theme-row-copy {
  min-width: 0;
  display: grid;
  gap: .08rem;
}.surux-theme-row-name {
  font-weight: 800;
  color: var(--surux-text);
}.surux-theme-row-note {
  color: var(--surux-muted);
  font-size: .78rem;
  line-height: 1.25;
}.surux-theme-row-check {
  width: 1.25rem;
  height: 1.25rem;
  justify-self: end;
  color: var(--surux-primary);
  opacity: 0;
  transform: scale(.82);
  transition: opacity .16s ease, transform .16s ease;
}.surux-theme-row[aria-checked="true"] .surux-theme-row-check {
  opacity: 1;
  transform: scale(1);
}

/* Keep the growing palette catalog compact, with names and a visible selected mark. */
.surux-theme-section[data-surux-theme-palette] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.surux-theme-section[data-surux-theme-palette][hidden] {
  display: none;
}
[data-surux-theme-palette] .surux-theme-section-title {
  grid-column: 1 / -1;
}
[data-surux-theme-palette] .surux-theme-row {
  min-width: 0;
  min-height: 2.75rem;
  grid-template-columns: 1.35rem minmax(0, 1fr) .85rem;
  gap: .3rem;
  padding: .4rem;
}
[data-surux-theme-palette] .surux-theme-row-name {
  font-size: .78rem;
  overflow-wrap: anywhere;
}
[data-surux-theme-palette] .surux-theme-row-check {
  width: .85rem;
  height: .85rem;
  font-size: .7rem;
}
[data-surux-theme-palette] .surux-theme-row-note {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
[data-surux-theme-palette] .surux-theme-row:focus-visible {
  outline: 2px solid var(--surux-text);
  outline-offset: -2px;
}
.surux-theme-divider {
  height: 1px;
  margin: .35rem .15rem;
  background: var(--surux-border);
}.surux-sidebar:not(:hover):not(.pinned) .surux-theme-trigger {
  width: 100%;
  height: auto;
  min-width: 0;
  flex: initial;
  border-radius: .58rem;
}.surux-sidebar:not(:hover):not(.pinned) .surux-theme-trigger .surux-theme-text,
.surux-sidebar:not(:hover):not(.pinned) .surux-theme-trigger::after {
  display: inline-flex;
}/* SuruX v0.2.8 light-mode status readability fix */
[data-bs-theme="light"] .surux-status-chip {
  color: var(--surux-status-color) !important;
  background: var(--surux-status-bg) !important;
  border-color: var(--surux-status-border) !important;
  box-shadow: 0 .25rem .65rem rgba(15, 23, 42, .05);
}[data-bs-theme="light"] .surux-status-created {
  --surux-status-bg: #f1f5f9;
  --surux-status-border: #94a3b8;
  --surux-status-color: #334155;
}[data-bs-theme="light"] .surux-status-active {
  --surux-status-bg: color-mix(in srgb, var(--surux-success) 6%, var(--surux-surface));
  --surux-status-border: color-mix(in srgb, var(--surux-success) 52%, transparent);
  --surux-status-color: color-mix(in srgb, var(--surux-success) 75%, var(--surux-text));
}[data-bs-theme="light"] .surux-status-suspended {
  --surux-status-bg: color-mix(in srgb, var(--surux-warning) 6%, var(--surux-surface));
  --surux-status-border: color-mix(in srgb, var(--surux-warning) 52%, transparent);
  --surux-status-color: color-mix(in srgb, var(--surux-warning) 75%, var(--surux-text));
}[data-bs-theme="light"] .surux-status-inactive {
  --surux-status-bg: #f1f5f9;
  --surux-status-border: #64748b;
  --surux-status-color: #334155;
}[data-bs-theme="light"] .surux-status-neutral {
  --surux-status-bg: #f1f5f9;
  --surux-status-border: #94a3b8;
  --surux-status-color: #334155;
}[data-bs-theme="light"] .surux-status-submitted,
[data-bs-theme="light"] .surux-status-sent {
  --surux-status-bg: var(--surux-workflow-submitted-bg);
  --surux-status-border: var(--surux-workflow-submitted-border);
  --surux-status-color: var(--surux-workflow-submitted-color);
}[data-bs-theme="light"] .surux-status-approved {
  --surux-status-bg: var(--surux-workflow-approved-bg);
  --surux-status-border: var(--surux-workflow-approved-border);
  --surux-status-color: var(--surux-workflow-approved-color);
}[data-bs-theme="light"] .surux-status-accepted,
[data-bs-theme="light"] .surux-status-invoiced,
[data-bs-theme="light"] .surux-status-completed {
  --surux-status-bg: color-mix(in srgb, var(--surux-success) 6%, var(--surux-surface));
  --surux-status-border: color-mix(in srgb, var(--surux-success) 52%, transparent);
  --surux-status-color: color-mix(in srgb, var(--surux-success) 75%, var(--surux-text));
}[data-bs-theme="light"] .surux-status-acceptedreview {
  --surux-status-bg: color-mix(in srgb, var(--surux-warning) 6%, var(--surux-surface));
  --surux-status-border: color-mix(in srgb, var(--surux-warning) 52%, transparent);
  --surux-status-color: color-mix(in srgb, var(--surux-warning) 75%, var(--surux-text));
}[data-bs-theme="light"] .surux-status-paid {
  --surux-status-bg: var(--surux-workflow-paid-bg);
  --surux-status-border: var(--surux-workflow-paid-border);
  --surux-status-color: var(--surux-workflow-paid-color);
}[data-bs-theme="light"] .surux-status-partiallypaid {
  --surux-status-bg: color-mix(in srgb, var(--surux-warning) 6%, var(--surux-surface));
  --surux-status-border: color-mix(in srgb, var(--surux-warning) 52%, transparent);
  --surux-status-color: color-mix(in srgb, var(--surux-warning) 75%, var(--surux-text));
}[data-bs-theme="light"] .surux-status-rejected,
[data-bs-theme="light"] .surux-status-declined {
  --surux-status-bg: var(--surux-workflow-rejected-bg);
  --surux-status-border: var(--surux-workflow-rejected-border);
  --surux-status-color: var(--surux-workflow-rejected-color);
}[data-bs-theme="light"] .surux-status-cancelled {
  --surux-status-bg: #cbd5e1;
  --surux-status-border: #475569;
  --surux-status-color: #1e293b;
}[data-bs-theme="light"] .surux-status-expired {
  --surux-status-bg: #e2e8f0;
  --surux-status-border: #64748b;
  --surux-status-color: #334155;
}[data-bs-theme="light"] .surux-status-overdue {
  --surux-status-bg: color-mix(in srgb, var(--surux-warning) 6%, var(--surux-surface));
  --surux-status-border: color-mix(in srgb, var(--surux-warning) 52%, transparent);
  --surux-status-color: color-mix(in srgb, var(--surux-warning) 75%, var(--surux-text));
}[data-bs-theme="light"] .surux-status-pending,
[data-bs-theme="light"] .surux-status-revise {
  --surux-status-bg: color-mix(in srgb, var(--surux-warning) 6%, var(--surux-surface));
  --surux-status-border: color-mix(in srgb, var(--surux-warning) 52%, transparent);
  --surux-status-color: color-mix(in srgb, var(--surux-warning) 75%, var(--surux-text));
}[data-bs-theme="light"] .surux-status-priority-none {
  --surux-status-bg: #e2e8f0;
  --surux-status-border: #64748b;
  --surux-status-color: #334155;
}[data-bs-theme="light"] .surux-status-priority-low {
  --surux-status-bg: #dbeafe;
  --surux-status-border: #2563eb;
  --surux-status-color: #1e40af;
}[data-bs-theme="light"] .surux-status-priority-medium {
  --surux-status-bg: color-mix(in srgb, var(--surux-warning) 6%, var(--surux-surface));
  --surux-status-border: color-mix(in srgb, var(--surux-warning) 52%, transparent);
  --surux-status-color: color-mix(in srgb, var(--surux-warning) 75%, var(--surux-text));
}[data-bs-theme="light"] .surux-status-priority-high {
  --surux-status-bg: color-mix(in srgb, var(--surux-danger) 6%, var(--surux-surface));
  --surux-status-border: color-mix(in srgb, var(--surux-danger) 52%, transparent);
  --surux-status-color: color-mix(in srgb, var(--surux-danger) 75%, var(--surux-text));
}[data-bs-theme="light"] .surux-status-priority-emergency {
  --surux-status-bg: #f3e8ff;
  --surux-status-border: #a855f7;
  --surux-status-color: #581c87;
}/* Shared edit-page primitives */
.surux-page-title-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: nowrap;
}.surux-page-title-row h1 {
  margin-bottom: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}.surux-copy-title {
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  min-width: 0;
  margin: 0;
  padding: .04rem .12rem;
  border: 0;
  border-radius: .42rem;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-align: inherit;
  cursor: copy;
  overflow-wrap: anywhere;
  transition: color .16s ease, background-color .16s ease, box-shadow .16s ease, transform .16s ease;
  -webkit-tap-highlight-color: transparent;
}.surux-copy-title:hover,
.surux-copy-title:focus-visible {
  color: color-mix(in srgb, var(--surux-text) 82%, var(--surux-primary) 18%);
  background: transparent;
  box-shadow: none;
  outline: 0;
}.surux-copy-title:active,
.surux-copy-title.surux-copy-title-copied {
  transform: translateY(1px);
  color: var(--surux-primary);
  background: rgba(var(--surux-primary-rgb), .12);
}.surux-page-header .surux-page-title-copy {
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  margin-inline: 0;
  padding: .04rem .12rem;
  border-radius: .42rem;
  cursor: copy;
  overflow-wrap: anywhere;
  transition: color .16s ease, background-color .16s ease, box-shadow .16s ease, transform .16s ease;
  -webkit-tap-highlight-color: transparent;
}.surux-page-header .surux-page-title-copy:hover,
.surux-page-header .surux-page-title-copy:focus-visible {
  color: color-mix(in srgb, var(--surux-text) 82%, var(--surux-primary) 18%);
  background: transparent;
  box-shadow: none;
  outline: 0;
}.surux-page-header .surux-page-title-copy:active,
.surux-page-header .surux-page-title-copy.surux-copy-title-copied {
  transform: translateY(1px);
  color: var(--surux-primary);
  background: transparent;
}.surux-page-title-row .surux-status-chip {
  transform: translateY(.05rem);
}.surux-page-title-row .surux-page-header-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  margin-inline-start: auto;
  gap: .5rem;
}.surux-page-title-row .surux-page-helper > .surux-command-overflow-trigger {
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
}
/* A section heading is the strongest thing in its header. It used to be .75rem
   uppercase in the muted colour while the eyebrow above it was accent coloured,
   so the eyebrow read as the heading and the heading as its caption. Sentence
   case rather than uppercase, because every field label and description on the
   same page is written that way and the header should be in one voice with them. */
.surux-section-heading {
  margin: 0 0 1rem;
  color: var(--surux-text);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
}.surux-tabs {
  min-width: 0;
}.surux-tabs-fill-height {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}.surux-tabs-fill-height > .surux-tab-list {
  flex: 0 0 auto;
}.surux-tabs-fill-height > .surux-tab-panels {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}.surux-tab-rail-controls {
  display: none;
}.surux-tab-rail-controls[hidden], .surux-tab-rail-toggle[hidden] {
  display: none !important;
}.surux-tab-rail-preferences {
  position: fixed;
  inset: auto;
  margin: 0;
  width: 19rem;
  max-width: calc(100vw - 1rem);
  max-height: calc(100dvh - 1rem);
  overflow: auto;
  padding: .85rem;
  border: 1px solid var(--surux-border);
  border-radius: .85rem;
  background: var(--surux-surface);
  color: var(--surux-text);
  box-shadow: 0 .6rem 2rem rgba(7, 12, 25, .28);
}.surux-tab-rail-preferences:popover-open {
  display: grid;
  gap: .5rem;
}.surux-tab-rail-preferences [role="menuitemradio"] {
  justify-content: flex-start;
}.surux-tab-rail-preferences [aria-checked="true"] {
  border-color: var(--surux-primary);
  background: rgba(var(--surux-primary-rgb), .12);
}.surux-tab-radio {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}.surux-tab-list {
  display: flex;
  align-items: flex-end;
  gap: .2rem;
  margin-bottom: var(--surux-page-tab-list-gap);
  overflow-x: auto;
  border-bottom: 1px solid var(--surux-border);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}.surux-tab-list::-webkit-scrollbar {
  display: none;
}.surux-tab-button {
  min-height: 44px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: -1px;
  padding: .62rem 1rem .68rem;
  border: 1px solid transparent;
  border-bottom: 3px solid transparent;
  border-radius: .7rem .7rem 0 0;
  background: transparent;
  color: var(--surux-muted);
  cursor: pointer;
  font-size: .9rem;
  font-weight: 560;
  line-height: 1;
  transition: color .16s ease, border-color .16s ease, background .16s ease;
}a.surux-tab-button {
  text-decoration: none;
}.surux-tab-button:hover {
  color: var(--surux-text);
  background: rgba(var(--surux-primary-rgb), .06);
}.surux-tab-button i {
  color: var(--surux-primary);
}.surux-tab-button i.surux-vendor-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  border: 1.5px solid currentColor;
  border-radius: .2em;
  font-family: inherit;
  font-size: 1em;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
}.surux-tab-button i.surux-vendor-mark::before {
  display: block;
  font-size: .62em;
}.surux-vendor-mark-dahua::before {
  content: "D";
}.surux-vendor-mark-hikvision::before {
  content: "H";
}.surux-vendor-mark-uniview::before {
  content: "U";
}
/* Sub-tab mark. A parent ends in a chevron; a number is only a real badge. */
.surux-tab-button > .surux-tab-disclosure {
  flex: 0 0 auto;
  margin-left: .15rem;
  font-size: .7em;
  line-height: 1;
  color: var(--surux-muted);
  transition: transform .16s ease, color .16s ease;
}

.surux-tab-button[aria-expanded="true"] > .surux-tab-disclosure {
  color: var(--surux-primary);
}

@media (min-width: 768px) {
  .surux-tabs:not(.surux-tabs-orientation-vertical) > .surux-tab-list > .surux-tab-button > .surux-tab-disclosure {
    transform: rotate(90deg);
    font-size: .65em;
  }
}

@media (max-width: 767.98px) {
  .surux-tabs > .surux-tab-list-hierarchy > .surux-tab-button > .surux-tab-disclosure {
    margin-left: auto;
    font-size: .85em;
  }

  .surux-tabs > .surux-tab-list-hierarchy > .surux-tab-button[aria-expanded="true"] > .surux-tab-disclosure {
    transform: rotate(90deg);
    color: var(--surux-primary);
  }
}

@media (forced-colors: active) {
  .surux-tab-button > .surux-tab-disclosure {
    forced-color-adjust: none;
    color: CanvasText !important;
  }

  .surux-tab-button[aria-expanded="true"] > .surux-tab-disclosure {
    color: Highlight !important;
  }
}

/* Tab count badge (TR-0000555). Distinct from --surux-tab-count, the number of tabs. */
.surux-tab-badge {
  --surux-tab-badge-color: color-mix(in srgb, var(--surux-danger) 75%, var(--surux-text));
  --surux-tab-badge-bg: color-mix(in srgb, var(--surux-danger) 6%, var(--surux-surface));
  --surux-tab-badge-border: color-mix(in srgb, var(--surux-danger) 48%, transparent);
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 1.35em;
  min-height: 1.35em;
  padding: 0 .35em;
  border: 1px solid var(--surux-tab-badge-border);
  border-radius: 999px;
  background: var(--surux-tab-badge-bg);
  color: var(--surux-tab-badge-color);
  font-size: .75em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}
.surux-tab-panel {
  display: none;
}
body.surux-video-wall-viewport-open,
body.surux-signal-intake-viewport-open,
body.surux-device-health-viewport-open {
  overflow: hidden;
}

.surux-tab-panel.active {
  display: block;
}

/* Pointer focus must not frame the entire editor. Keyboard focus remains visible,
   inset so tab rails and independently scrolling panels cannot clip the ring. */
.surux-tabs :is(.surux-tab-button, .surux-tab-panel):focus:not(:focus-visible) {
  outline: none;
}
.surux-tabs .surux-tab-button:focus-visible {
  outline: 2px solid var(--surux-primary);
  outline-offset: -3px;
  border-radius: .7rem;
}
.surux-tabs .surux-tab-button:focus-visible {
  background: rgba(var(--surux-primary-rgb), .12);
  color: var(--surux-text);
}
.surux-tabs .surux-tab-panel {
  position: relative;
}
.surux-tabs .surux-tab-panel:focus-visible {
  outline: none;
}
/* A panel is a keyboard entry point, not a selected or invalid form. */
.surux-tabs .surux-tab-panel:focus-visible::after {
  content: "";
  position: absolute;
  inset-block-start: 3px;
  inset-inline-start: .5rem;
  width: 3rem;
  height: 3px;
  border-radius: 2px;
  background: var(--surux-primary);
  pointer-events: none;
  z-index: 1;
}
@media (forced-colors: active) {
  /* Inset like the base ring: a tab list scrolls sideways and clips anything drawn outside its tabs. */
  .surux-tabs .surux-tab-button:focus-visible {
    outline: 2px solid CanvasText;
    outline-offset: -4px;
  }
  .surux-tabs .surux-tab-panel:focus-visible::after {
    background: Highlight;
    forced-color-adjust: none;
  }
}

.surux-tab-panel:has(.surux-edit-workspace-host) {
  min-width: 0;
  min-height: 0;
}

@media (min-width: 992px) {
  .surux-tab-panel:has(.surux-edit-workspace-host) {
    height: 100%;
  }

  /* SuruXTabPanelsForm wraps panels in form > .surux-edit-form-body. Height:100% on a
     filled workspace collapses unless that chain has a definite height. */
  .surux-tabs-fill-height .surux-tab-panels:has(.surux-tab-panel:not([hidden]) [data-surux-workspace-fill]) {
    overflow: hidden;
  }

  .surux-tabs-fill-height .surux-tab-panels:has(.surux-tab-panel:not([hidden]) [data-surux-workspace-fill]) > form,
  .surux-tabs-fill-height .surux-tab-panels:has(.surux-tab-panel:not([hidden]) [data-surux-workspace-fill]) > form > .surux-edit-form-body {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
  }

  .surux-tabs-fill-height .surux-tab-panels:has(.surux-tab-panel:not([hidden]) [data-surux-workspace-fill]) > form > .surux-edit-form-body {
    flex: 1 1 auto;
  }

  .surux-tabs-fill-height .surux-tab-panel:has([data-surux-workspace-fill]) {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  .surux-tabs-fill-height .surux-tab-panel:has([data-surux-workspace-fill]) [data-surux-workspace-fill] {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
  }
}

.surux-tabs:not(.surux-tabs-ready) .surux-tab-panels > .surux-tab-panel:first-of-type,
.surux-tabs:not(.surux-tabs-ready) .surux-tab-panels > form > .surux-tab-panel:first-of-type,
.surux-tabs:not(.surux-tabs-ready) .surux-tab-panels > form > .surux-edit-form-body > .surux-tab-panel:first-of-type {
  display: block;
}

.surux-tab-button.active,
.surux-tab-button[aria-selected="true"] {
  border-color: rgba(var(--surux-primary-rgb), .28);
  border-bottom-color: var(--surux-primary);
  background: color-mix(in srgb, var(--surux-surface) 88%, var(--surux-primary) 12%);
  color: var(--surux-text);
  box-shadow: 0 -.45rem 1.2rem rgba(var(--surux-primary-rgb), .08);
}

.surux-command-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 55;
  min-height: 74px;
  display: flex;
  margin: 0;
  padding: .72rem 1rem calc(.72rem + env(safe-area-inset-bottom, 0px));
  border: var(--surux-border-width) solid var(--surux-border);
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  border-radius: 1.1rem 1.1rem 0 0;
  background: color-mix(in srgb, var(--surux-surface) 92%, #000 8%);
  box-shadow: var(--surux-elevation-raised);
  backdrop-filter: blur(14px);
  align-items: center;
  justify-content: flex-start;
}.surux-command-bar-inner {
  width: min(100%, 1480px);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: .55rem;
  overflow: visible;
  padding: .1rem .15rem;
  -webkit-overflow-scrolling: touch;
}.surux-command-form,
.surux-command-reject-form,
.surux-duplicate-form {
  flex: 0 0 auto;
  margin: 0;
}.surux-command-inline-actions {
  display: none;
  align-items: center;
  gap: .55rem;
}.surux-close-icon-btn {
  color: #cbd5e1 !important;
  background: rgba(148, 163, 184, .12) !important;
  border-color: rgba(148, 163, 184, .42) !important;
  box-shadow: none !important;
  text-decoration: none;
}.surux-command-overflow {
  position: relative;
  flex: 0 0 auto;
}.surux-command-bar-inner > .surux-command-overflow {
  order: -1;
}.surux-command-overflow-trigger {
  position: relative;
  z-index: 1;
  list-style: none;
  cursor: pointer;
  padding: .44rem;
}.surux-command-overflow-trigger-icon-only-subtle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.1rem;
  min-height: 2.1rem;
  border: 1px solid transparent;
  border-radius: .48rem;
  color: var(--surux-muted);
  background: transparent;
}.surux-command-overflow-trigger-icon-only-subtle:hover,
.surux-command-overflow-trigger-icon-only-subtle:focus-visible {
  border-color: var(--surux-border);
  color: var(--surux-text);
  background: rgba(var(--surux-primary-rgb), .08);
  outline: none;
}.surux-command-overflow-trigger::-webkit-details-marker {
  display: none;
}.surux-command-overflow[open] .surux-command-overflow-trigger .fa-chevron-down {
  transform: rotate(180deg);
  transition: transform .16s ease;
}.surux-command-bar[data-surux-command-overflow-open] {
  box-shadow:
    var(--surux-elevation-raised),
    0 0 0 1px color-mix(in srgb, var(--surux-primary) 45%, transparent);
}.surux-row-actions[data-surux-command-overflow-open] {
  z-index: 2;
}.surux-data-table tbody tr[data-surux-command-overflow-open],
.surux-mobile-list-item[data-surux-command-overflow-open] {
  background: color-mix(in srgb, var(--surux-primary) 10%, var(--surux-surface));
  box-shadow: inset 3px 0 0 var(--surux-primary);
}
/* One or two extra commands on a bar or row sit inline; a third opens the chevron spillover.
   Only menus that opt in (InlineFewActions) inline: a tool or settings menu keeps its trigger.
   A closed <details> hides its content whatever display says, so surux-command-effects.js holds
   an inline menu open ([data-surux-command-overflow-inline]); ::details-content shows the actions
   before that script runs where the browser supports it. An action group ([role="group"], such
   as the workflow "Move to…" list) is many commands in one child, so it always stays a menu. */
.surux-command-overflow[data-surux-command-overflow-inline-few]:not([data-surux-command-overflow-many]) {
  display: flex;
  align-items: center;
}.surux-command-overflow[data-surux-command-overflow-inline-few]:not([data-surux-command-overflow-many])::details-content {
  content-visibility: visible;
  display: contents;
}.surux-command-overflow[data-surux-command-overflow-inline-few]:not([data-surux-command-overflow-many]) > .surux-command-overflow-trigger {
  display: none;
}.surux-command-overflow[data-surux-command-overflow-inline-few]:not([data-surux-command-overflow-many]) .surux-row-action-button {
  width: auto;
}.surux-command-overflow[data-surux-command-overflow-inline-few]:not([data-surux-command-overflow-many]) > .surux-command-overflow-panel {
  position: static;
  inset: auto;
  z-index: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: .55rem;
  min-width: 0;
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  overflow: visible;
}/* A top-layer menu (row actions, toolbars, the PTZ presets menu) is taken out of the
   clipping overlay. Labels wrap inside the capped panel instead of being cut off. */
.surux-command-overflow-panel:popover-open {
  overflow-wrap: normal;
}
/* TR-0000894: the trailing-action slot is icon-wide. Once the menu is a top-layer
   popover, grow to the label and wrap inside the shared cap. Other menus stay as they are. */
.surux-control-trailing-action > .surux-command-overflow > .surux-command-overflow-panel:popover-open {
  width: max-content;
  min-width: min(16rem, calc(100vw - 1rem));
  max-width: min(24rem, calc(100vw - 1rem));
}
.surux-control-trailing-action > .surux-command-overflow > .surux-command-overflow-panel:popover-open .surux-command-button-text {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
.surux-command-overflow-panel:popover-open .surux-ptz-preset {
  width: 100%;
  text-align: start;
}
.surux-ptz-confirm {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  width: 100%;
  margin: 0;
  padding: .75rem .9rem .9rem;
  color: var(--surux-text);
}
.surux-ptz-confirm p { margin: 0; }
.surux-ptz-confirm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.surux-ptz-preset-list .text-muted {
  margin: 0;
  padding: .2rem .55rem;
}
html { --surux-overflow-panel-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 0 0 1px rgba(var(--surux-primary-rgb), .08); }
.surux-command-overflow-panel {
  position: absolute;
  left: 0;
  bottom: calc(100% + .35rem);
  z-index: 2;
  min-width: 170px;
  max-width: min(24rem, calc(100vw - 1.5rem));
  max-height: min(70vh, calc(100dvh - 6rem));
  display: grid;
  gap: .5rem;
  padding: .55rem;
  border: var(--surux-border-width) solid color-mix(in srgb, var(--surux-border) 72%, rgba(255, 255, 255, .22));
  border-radius: .65rem;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .035) 46%, rgba(0, 0, 0, .08)),
    color-mix(in srgb, var(--surux-surface) 78%, transparent);
  box-shadow: var(--surux-overflow-panel-shadow);
  backdrop-filter: blur(22px) saturate(1.14);
  -webkit-backdrop-filter: blur(22px) saturate(1.14);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}.surux-command-overflow-panel .surux-command-form,
.surux-command-overflow-panel .surux-command-reject-form {
  display: grid;
  gap: .45rem;
}.surux-modal-custom[hidden] {
  display: none;
}.surux-modal-custom {
  position: fixed;
  inset: 0;
  z-index: 2400;
  display: grid;
  place-items: center;
  padding: 1rem;
}.surux-modal-tone-primary {
  --surux-modal-tone-accent: var(--surux-primary);
}.surux-modal-tone-neutral {
  --surux-modal-tone-accent: var(--surux-muted);
}.surux-modal-tone-info {
  --surux-modal-tone-accent: var(--surux-info, #38bdf8);
}.surux-modal-tone-success {
  --surux-modal-tone-accent: var(--surux-success);
}.surux-modal-tone-warning {
  --surux-modal-tone-accent: var(--surux-warning);
}.surux-modal-tone-danger {
  --surux-modal-tone-accent: var(--surux-danger);
}.surux-modal-size-sm {
  --surux-modal-inline-size: 28rem;
}.surux-modal-size-standard {
  --surux-modal-inline-size: 36rem;
}.surux-modal-size-lg {
  --surux-modal-inline-size: 52rem;
}.surux-modal-size-xl {
  --surux-modal-inline-size: 72rem;
}.surux-modal .modal-dialog.surux-modal-size-sm,
.surux-modal .modal-dialog.surux-modal-size-standard,
.surux-modal .modal-dialog.surux-modal-size-lg,
.surux-modal .modal-dialog.surux-modal-size-xl {
  --bs-modal-width: var(--surux-modal-inline-size);
}.surux-modal .modal-dialog.modal-dialog-scrollable:not(.modal-fullscreen):not(.surux-media-viewer-dialog):not(.surux-channel-gallery-modal-dialog) {
  height: auto;
  max-height: calc(100vh - (var(--bs-modal-margin, .5rem) * 2));
  max-height: calc(100dvh - (var(--bs-modal-margin, .5rem) * 2));
}.surux-modal .modal-dialog.modal-dialog-scrollable:not(.modal-fullscreen):not(.surux-media-viewer-dialog):not(.surux-channel-gallery-modal-dialog) > .surux-modal-content {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - (var(--bs-modal-margin, .5rem) * 2));
  max-height: calc(100dvh - (var(--bs-modal-margin, .5rem) * 2));
  min-height: 0;
  overflow: hidden;
}.surux-modal .modal-dialog.modal-dialog-scrollable:not(.modal-fullscreen) > .surux-modal-content > .surux-modal-body:not(.surux-channel-gallery-modal-body):not(.surux-media-viewer-body) {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}.surux-modal .modal-dialog.modal-dialog-scrollable:not(.modal-fullscreen) > .surux-modal-content > .surux-modal-footer {
  flex: 0 0 auto;
}.surux-modal-custom > .surux-modal-content.surux-modal-size-sm,
.surux-modal-custom > .surux-modal-content.surux-modal-size-standard,
.surux-modal-custom > .surux-modal-content.surux-modal-size-lg,
.surux-modal-custom > .surux-modal-content.surux-modal-size-xl {
  position: relative;
  z-index: 1;
  width: min(var(--surux-modal-inline-size), calc(100vw - 2rem));
  max-width: 100%;
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
}.surux-modal-custom > .surux-modal-content.surux-modal-size-fullscreen {
  position: relative;
  z-index: 1;
  width: calc(100vw - 2rem);
  max-width: none;
  height: calc(100vh - 2rem);
  height: calc(100dvh - 2rem);
  max-height: none;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
}.surux-modal-custom > .surux-modal-content.surux-modal-type-delete {
  max-height: min(44rem, calc(100dvh - 2rem));
}.surux-modal-custom > .surux-modal-content[class*="surux-modal-size-"] > .surux-modal-body {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}.surux-modal-custom > .surux-modal-content[class*="surux-modal-size-"] > .surux-modal-footer {
  min-height: 0;
  flex: 0 0 auto;
}body.surux-modal-open {
  overflow: hidden;
}.surux-modal-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(2, 6, 23, .58);
  backdrop-filter: var(--surux-blur-overlay);
}.surux-modal .modal-content,
.surux-modal-content {
  color: var(--surux-text);
  border: var(--surux-border-width) solid color-mix(in srgb, var(--surux-border) 82%, rgba(var(--surux-primary-rgb), .18));
  border-radius: var(--surux-radius-modal);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surux-surface) 96%, rgba(255, 255, 255, .04)), var(--surux-surface)),
    var(--surux-surface);
  box-shadow: var(--surux-elevation-modal);
  overflow: hidden;
}.surux-modal .modal-fullscreen .modal-content {
  border-radius: 0;
}.surux-modal .surux-modal-content:has(.surux-picker-open:not(.surux-picker-popover-active)) {
  overflow: visible;
}.surux-modal .modal-dialog-scrollable .surux-picker-open:not(.surux-picker-popover-active) .surux-picker-results {
  position: static;
  margin-top: .35rem;
}.surux-modal-header {
  --surux-modal-header-accent: var(--surux-modal-tone-accent, var(--surux-primary));
  position: relative;
  align-items: flex-start;
  gap: .9rem;
  padding: 1.25rem 1.35rem;
  border-color: color-mix(in srgb, var(--surux-border) 82%, var(--surux-modal-header-accent) 18%);
  background:
    linear-gradient(
      110deg,
      color-mix(in srgb, var(--surux-modal-header-accent) 14%, transparent),
      color-mix(in srgb, var(--surux-modal-header-accent) 4.5%, transparent) 42%,
      transparent 76%);
  box-shadow: none;
}.surux-modal-header::before {
  content: "";
  position: absolute;
  inset: .65rem auto .65rem 1px;
  width: .2rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surux-modal-header-accent) 82%, transparent);
  pointer-events: none;
}.surux-modal-header-icon {
  display: inline-grid;
  place-items: center;
  width: 2.35rem;
  min-width: 2.35rem;
  height: 2.35rem;
  margin-top: .05rem;
  border: 1px solid color-mix(in srgb, var(--surux-modal-header-accent) 58%, transparent);
  border-radius: 50%;
  color: var(--surux-modal-header-accent);
  background: color-mix(in srgb, var(--surux-modal-header-accent) 12%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .1),
    0 .35rem 1rem color-mix(in srgb, var(--surux-modal-header-accent) 10%, transparent);
}.surux-modal-header-icon i {
  font-size: .95rem;
}.surux-modal[data-surux-modal-draggable="true"] > .modal-dialog,
.surux-modal-custom[data-surux-modal-draggable="true"] > .surux-modal-content {
  transform: translate3d(var(--surux-modal-drag-x, 0), var(--surux-modal-drag-y, 0), 0);
}.surux-modal[data-surux-modal-draggable="true"] .surux-modal-header[data-surux-modal-drag-handle] {
  cursor: grab;
  user-select: none;
  touch-action: none;
}.surux-modal[data-surux-modal-draggable="true"] .surux-modal-header[data-surux-modal-drag-handle] :is(button, a, input, select, textarea, label) {
  cursor: auto;
}.surux-modal.is-dragging > .modal-dialog,
.surux-modal-custom.is-dragging > .surux-modal-content {
  transition: none !important;
}.surux-modal.is-dragging .surux-modal-header[data-surux-modal-drag-handle] {
  cursor: grabbing;
}body.surux-modal-drag-active {
  user-select: none;
}.surux-modal-heading {
  min-width: 0;
  flex: 1 1 auto;
  padding-top: .05rem;
}.surux-modal-header-actions {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  flex: 0 0 auto;
}.surux-modal-title {
  min-width: 0;
  color: var(--surux-text);
  font-weight: 750;
  letter-spacing: 0;
  line-height: 1.25;
  overflow-wrap: anywhere;
}.surux-modal-description {
  max-width: 62rem;
  margin: .38rem 0 0;
  color: color-mix(in srgb, var(--surux-muted) 88%, var(--surux-text) 12%);
  line-height: 1.5;
}.surux-modal-body {
  padding: 1.15rem;
  color: var(--surux-muted);
}.surux-channel-gallery-modal .surux-channel-gallery-modal-content {
  min-height: 0;
}.surux-channel-gallery-modal .surux-channel-gallery-modal-body {
  display: flex;
  min-height: 0;
  overflow: hidden;
}.surux-channel-gallery-modal .modal-fullscreen .surux-channel-gallery-modal-body {
  padding: .75rem;
}.surux-media-viewer-modal .surux-media-viewer-dialog {
  width: min(1250px, calc(100vw - 2rem));
  max-width: min(1250px, calc(100vw - 2rem));
  height: min(800px, calc(100vh - 2rem));
  margin: 1rem auto;
}.surux-media-viewer-modal .surux-media-viewer-content {
  height: 100%;
  min-height: 0;
}.surux-media-viewer-modal .surux-media-viewer-body {
  display: flex;
  min-height: 0;
  overflow: hidden;
  padding: .75rem;
}.surux-media-viewer {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr);
  gap: .75rem;
  width: 100%;
  min-height: 0;
  min-width: 0;
}.surux-media-viewer-strip {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  min-height: 0;
  overflow: auto;
}.surux-media-viewer-thumb {
  display: grid;
  gap: .2rem;
  padding: .25rem;
  border: 2px solid transparent;
  border-radius: .55rem;
  background: color-mix(in srgb, var(--surux-surface) 86%, var(--surux-text) 14%);
  color: var(--surux-text);
  text-align: left;
}.surux-media-viewer-thumb img {
  width: 100%;
  height: 3.4rem;
  object-fit: cover;
  border-radius: .35rem;
  background: color-mix(in srgb, var(--surux-text) 88%, var(--surux-app-bg));
}.surux-media-viewer-thumb.is-selected {
  border-color: var(--surux-primary);
}.surux-media-viewer-strip-copy {
  display: grid;
  font-size: .72rem;
  line-height: 1.2;
}.surux-media-viewer-strip-copy small {
  color: var(--surux-muted);
}.surux-media-viewer-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  gap: .65rem;
}.surux-media-viewer-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 16rem;
  overflow: hidden;
  border-radius: .7rem;
  background: color-mix(in srgb, var(--surux-text) 90%, var(--surux-app-bg));
  touch-action: none;
}.surux-media-viewer-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
}.surux-media-viewer-step {
  position: absolute;
  top: 50%;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  border-radius: 50%;
  color: var(--surux-text);
  background: color-mix(in srgb, var(--surux-surface) 88%, transparent);
  transform: translateY(-50%);
}.surux-media-viewer-step.is-previous { left: .6rem; }
.surux-media-viewer-step.is-next { right: .6rem; }
.surux-media-viewer-zoom {
  position: absolute;
  right: .6rem;
  bottom: .6rem;
  display: flex;
  align-items: center;
  gap: .25rem;
  padding: .2rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surux-surface) 90%, transparent);
}.surux-media-viewer-zoom-level {
  min-width: 3rem;
  color: var(--surux-text);
  font-size: .78rem;
  text-align: center;
}.surux-media-viewer-minimap {
  position: absolute;
  left: .6rem;
  bottom: .6rem;
  width: 5.5rem;
  height: 3.4rem;
  border-radius: .35rem;
  background: color-mix(in srgb, var(--surux-surface) 35%, transparent);
  border: 1px solid color-mix(in srgb, var(--surux-border) 80%, transparent);
}.surux-media-viewer-minimap span {
  position: absolute;
  border: 1px solid var(--surux-primary);
  background: color-mix(in srgb, var(--surux-primary) 28%, transparent);
}.surux-media-viewer-hint {
  position: absolute;
  left: 50%;
  bottom: .7rem;
  margin: 0;
  transform: translateX(-50%);
  color: var(--surux-text);
  font-size: .75rem;
  white-space: nowrap;
}.surux-media-viewer-captions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .75rem;
}.surux-media-viewer-caption {
  display: grid;
  gap: .1rem;
  min-width: 0;
}.surux-media-viewer-caption span {
  color: var(--surux-muted);
  font-size: .68rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}.surux-media-viewer-caption strong,
.surux-media-viewer-caption a {
  color: var(--surux-text);
  overflow-wrap: anywhere;
}.surux-media-viewer-caption small {
  color: var(--surux-muted);
}.surux-media-viewer-count {
  padding: .15rem .55rem;
  border-radius: 999px;
  color: var(--surux-text);
  background: color-mix(in srgb, var(--surux-surface) 75%, var(--surux-primary) 25%);
  font-size: .78rem;
}.surux-media-viewer-phone-title { display: none; }
@media (max-width: 700px) {
  .surux-media-viewer-modal .surux-media-viewer-dialog {
    width: 100%;
    max-width: 100%;
    height: 100%;
    margin: 0;
  }
  .surux-media-viewer-modal .surux-modal-heading,
  .surux-media-viewer-modal .surux-media-viewer-desktop-only { display: none; }
  .surux-media-viewer-phone-title {
    display: block;
    min-width: 0;
    overflow: hidden;
    color: var(--surux-text);
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .surux-media-viewer {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) auto auto;
  }
  .surux-media-viewer-strip { flex-direction: row; order: 2; }
  .surux-media-viewer-thumb { width: 5.5rem; flex: 0 0 auto; }
  .surux-media-viewer-main { order: 1; }
  .surux-media-viewer-captions { grid-template-columns: 1fr 1fr; order: 3; }
  .surux-media-viewer-step { display: none; }
}
.surux-media-viewer-modal.is-phone .surux-media-viewer-dialog {
  width: 100%;
  max-width: 100%;
  height: 100%;
  margin: 0;
}
.surux-media-viewer-modal.is-phone .surux-modal-heading,
.surux-media-viewer-modal.is-phone .surux-media-viewer-desktop-only { display: none; }
.surux-media-viewer-modal.is-phone .surux-media-viewer-phone-title {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--surux-text);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.surux-media-viewer-modal.is-phone .surux-media-viewer {
  grid-template-columns: 1fr;
}
.surux-media-viewer-modal.is-phone .surux-media-viewer-strip { flex-direction: row; }
.surux-media-viewer-modal.is-phone .surux-media-viewer-captions { grid-template-columns: 1fr 1fr; }
.surux-media-viewer-modal.is-phone .surux-media-viewer-step { display: none; }.surux-modal-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: .55rem;
  padding: .9rem 1.15rem;
  border-color: color-mix(in srgb, var(--surux-border) 82%, rgba(var(--surux-primary-rgb), .14));
}.surux-modal-footer .surux-command-form {
  margin: 0;
}.surux-modal-footer .surux-command-button:not(.surux-command-button-icon-only) {
  min-width: 8.5rem;
}.surux-modal-footer .surux-command-button[data-surux-button-label="Close"] {
  order: 1;
  width: 2.75rem;
  min-width: 2.75rem;
  height: 2.75rem;
  min-height: 2.75rem;
  padding: 0;
  border-radius: 50%;
}.surux-modal-footer .surux-command-button[data-surux-button-label="Close"] .surux-command-button-text {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}.surux-modal-footer .surux-command-button[data-surux-button-label="Close"] .surux-command-button-icon {
  margin: 0;
}.btn.surux-button.surux-modal-close.surux-command-button-icon-only {
  width: 2rem !important;
  min-width: 2rem !important;
  height: 2rem !important;
  min-height: 2rem !important;
  margin-left: auto;
  flex: 0 0 auto;
  border-color: transparent !important;
  background: transparent !important;
  color: color-mix(in srgb, var(--surux-muted) 82%, var(--surux-text) 18%) !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: .72;
  transform: none !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}.btn.surux-button.surux-modal-close.surux-command-button-icon-only::before,
.btn.surux-button.surux-modal-close.surux-command-button-icon-only::after {
  background: transparent !important;
  box-shadow: none !important;
  opacity: 0 !important;
}.btn.surux-button.surux-modal-close.surux-command-button-icon-only .surux-command-button-icon {
  width: 1rem !important;
  min-width: 1rem !important;
  height: 1rem !important;
  min-height: 1rem !important;
  border-color: transparent !important;
  background: transparent !important;
  color: inherit !important;
  box-shadow: none !important;
}.btn.surux-button.surux-modal-close.surux-command-button-icon-only:hover,
.btn.surux-button.surux-modal-close.surux-command-button-icon-only:focus-visible {
  border-color: color-mix(in srgb, var(--surux-border) 72%, transparent) !important;
  background: color-mix(in srgb, var(--surux-surface-2) 74%, transparent) !important;
  color: var(--surux-text) !important;
  opacity: 1;
  box-shadow: none !important;
  transform: none !important;
}.btn.surux-button.surux-modal-close.surux-command-button-icon-only:focus-visible {
  outline: 2px solid rgba(var(--surux-primary-rgb), .42) !important;
  outline-offset: .12rem;
}[data-bs-theme="light"] .surux-modal .modal-content,
[data-bs-theme="light"] .surux-modal-content {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--surux-surface) 94%, rgba(var(--surux-primary-rgb), .04)), var(--surux-surface) 58%),
    var(--surux-surface);
}

@media (max-width: 575.98px) {.surux-modal-custom {
    padding: .5rem;
  }.surux-modal-custom > .surux-modal-content.surux-modal-size-sm,
.surux-modal-custom > .surux-modal-content.surux-modal-size-standard,
.surux-modal-custom > .surux-modal-content.surux-modal-size-lg,
.surux-modal-custom > .surux-modal-content.surux-modal-size-xl {
    width: calc(100vw - 1rem);
    max-height: calc(100vh - 1rem);
    max-height: calc(100dvh - 1rem);
  }.surux-modal-custom > .surux-modal-content.surux-modal-size-fullscreen {
    width: calc(100vw - 1rem);
    height: calc(100vh - 1rem);
    height: calc(100dvh - 1rem);
  }.surux-modal .modal-dialog.surux-modal-size-sm,
.surux-modal .modal-dialog.surux-modal-size-standard,
.surux-modal .modal-dialog.surux-modal-size-lg,
.surux-modal .modal-dialog.surux-modal-size-xl {
    --bs-modal-width: calc(100vw - 1rem);
  }.surux-modal-footer {
    align-items: stretch;
  }.surux-modal-footer .surux-command-form,
.surux-modal-footer .surux-command-button:not(.surux-command-button-icon-only) {
    width: 100%;
  }.surux-modal-footer .surux-command-button[data-surux-button-label="Close"] {
    order: 1;
    width: 2.75rem;
    min-width: 2.75rem;
    align-self: flex-end;
  }
}.surux-confirm-subject {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  margin: 0 0 .75rem;
  font-weight: 700;
}
.surux-confirm-subject[hidden] { display: none !important; }
.surux-confirm-modal .surux-modal-footer .surux-command-button {
  min-width: 8.5rem;
}

/* TR-0000204. A confirmation answers the action the operator has just taken, so it sits above
   any dialog that action came from - including a custom (non-Bootstrap) dialog at 2400, such as
   the contact Add dialog asking before it discards a typed draft. Bootstrap's 1055 put it behind. */
.modal.surux-confirm-modal {
  z-index: 2500;
}
/* Its backdrop rises with it. Bootstrap left the confirmation's backdrop at 1050, under the dialog
   the action came from, so that dialog stayed bright behind the question ("Where is the confirm
   background?", monitoring Add system, 25 Sep 2026). The confirmation's is the last one appended. */
body.surux-confirm-modal-open > .modal-backdrop:not(:has(~ .modal-backdrop)) {
  z-index: 2495;
}

.surux-command-overflow-panel .surux-command-reject-form input {
  min-width: 0;
}

@media (min-width: 1180px) {.surux-command-inline-actions {
    display: none;
  }.surux-command-overflow {
    display: block;
  }
}.surux-close-icon-btn:hover,
.surux-close-icon-btn:focus-visible {
  color: #f8fafc !important;
  background: rgba(148, 163, 184, .22) !important;
  border-color: rgba(203, 213, 225, .62) !important;
  box-shadow: 0 .65rem 1.5rem rgba(15, 23, 42, .18) !important;
  text-decoration: none;
}[data-bs-theme="light"] .surux-close-icon-btn {
  color: #475569 !important;
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
}[data-bs-theme="light"] .surux-close-icon-btn:hover,
[data-bs-theme="light"] .surux-close-icon-btn:focus-visible {
  color: #0f172a !important;
  background: #e2e8f0 !important;
  border-color: #94a3b8 !important;
  box-shadow: 0 .65rem 1.5rem rgba(15, 23, 42, .12) !important;
}

@media (max-width: 767.98px) {
  .surux-command-bar {
    justify-content: flex-start;
    padding-left: .65rem;
    padding-right: .65rem;
  }.surux-command-bar-inner {
    justify-content: flex-start !important;
    width: 100%;
    gap: .45rem;
    padding-bottom: .2rem;
  }
}.surux-search-bar {
  display: grid;
  grid-template-columns: minmax(84px, max-content) minmax(14rem, 1fr) minmax(9rem, 13rem) minmax(46px, auto);
  gap: .65rem;
  align-items: center;
  padding: .72rem;
  box-sizing: border-box;
}.surux-mobile-search-check {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}.surux-search-mobile-actions,
.surux-search-fields {
  display: contents;
}.surux-filter-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 46px;
  gap: .5rem;
  align-items: center;
  min-width: 0;
}.surux-search-mobile-toggle {
  display: none !important;
}.surux-search-desktop-toggle {
  display: none !important;
}.surux-column-filter-fields {
  display: none;
}.surux-column-filter-root {
  position: relative;
  min-width: 0;
}.surux-column-filter-heading {
  display: flex;
  align-items: center;
  gap: .32rem;
  min-width: 0;
}.surux-column-filter-root-end .surux-column-filter-heading {
  justify-content: flex-end;
}.surux-column-filter-root-end .surux-column-filter-heading .surux-sort-link,
.surux-column-filter-root-end .surux-column-filter-heading .surux-column-filter-label {
  flex: 0 1 auto;
}.surux-column-filter-heading .surux-sort-link {
  width: auto;
  min-width: 0;
  flex: 1 1 auto;
}.surux-column-filter-trigger {
  position: relative;
  width: 1.8rem;
  height: 1.8rem;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(var(--surux-primary-rgb), .18);
  border-radius: .46rem;
  color: var(--surux-muted);
  background: rgba(var(--surux-primary-rgb), .055);
  line-height: 1;
  transition: color .16s ease, border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}.surux-column-filter-label {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: inherit;
}.surux-column-filter-trigger:hover,
.surux-column-filter-trigger.active,
.surux-column-filter-root.is-open .surux-column-filter-trigger {
  color: var(--surux-text);
  border-color: rgba(var(--surux-primary-rgb), .48);
  background: rgba(var(--surux-primary-rgb), .16);
  box-shadow: 0 .45rem 1.1rem rgba(var(--surux-primary-rgb), .12);
}.surux-column-filter-trigger.active i,
.surux-column-filter-root.is-open .surux-column-filter-trigger i {
  color: var(--surux-primary);
}.surux-column-filter-count {
  position: absolute;
  top: -.35rem;
  right: -.35rem;
  min-width: 1rem;
  height: 1rem;
  padding: 0 .25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--surux-surface) 78%, #000 22%);
  border-radius: 999px;
  color: #fff;
  background: rgba(var(--surux-primary-rgb), .92);
  font-size: .66rem;
  font-weight: 900;
  line-height: 1;
}.surux-column-filter-popover {
  box-sizing: border-box;
  position: fixed;
  z-index: 2254;
  width: min(360px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  max-height: min(520px, calc(100vh - 24px));
  display: grid;
  gap: .72rem;
  padding: .8rem;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid rgba(var(--surux-primary-rgb), .36);
  border-radius: .72rem;
  color: var(--surux-text);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .08), transparent 42%),
    color-mix(in srgb, var(--surux-surface) 96%, #000 4%);
  box-shadow: 0 1.1rem 2.6rem rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .13);
  text-transform: none;
  letter-spacing: 0;
}.surux-column-filter-popover-mobile-menu {
  position: static;
  z-index: auto;
  width: 100%;
  max-width: 100%;
  max-height: none;
  margin-top: .55rem;
  overflow: visible;
}.surux-column-filter-popover[hidden] {
  display: none;
}.surux-column-filter-popover :is(.surux-control, .surux-control-field, .surux-input, .form-select, .form-control) {
  min-width: 0;
  max-width: 100%;
}.surux-column-filter-popover-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
}.surux-column-filter-popover-header span,
.surux-column-filter-active span {
  display: block;
  color: var(--surux-muted);
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}.surux-column-filter-popover-header strong {
  display: block;
  margin-top: .08rem;
  color: var(--surux-text);
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: none;
}.surux-column-filter-sort-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .45rem;
}.surux-column-filter-sort-actions a,
.surux-column-filter-quick-dates button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .42rem;
  border: 1px solid rgba(var(--surux-primary-rgb), .24);
  border-radius: .52rem;
  color: var(--surux-text);
  background: rgba(var(--surux-primary-rgb), .09);
  text-decoration: none;
  font-size: .84rem;
  font-weight: 800;
}.surux-column-filter-sort-actions a:hover,
.surux-column-filter-quick-dates button:hover {
  border-color: rgba(var(--surux-primary-rgb), .46);
  background: rgba(var(--surux-primary-rgb), .16);
}.surux-column-filter-active {
  display: flex;
  flex-wrap: wrap;
  gap: .36rem;
}.surux-column-filter-active span {
  padding: .22rem .46rem;
  border: 1px solid rgba(var(--surux-primary-rgb), .28);
  border-radius: 999px;
  color: var(--surux-text);
  background: rgba(var(--surux-primary-rgb), .10);
  text-transform: none;
  letter-spacing: 0;
}.surux-column-filter-editor {
  display: grid;
  gap: .5rem;
}.surux-column-filter-value-to {
  display: none;
}.surux-column-filter-value-to-visible {
  display: block;
}.surux-column-filter-options {
  max-height: 220px;
  display: grid;
  gap: .32rem;
  padding: .32rem;
  overflow: auto;
  border: 1px solid rgba(var(--surux-primary-rgb), .20);
  border-radius: .56rem;
  background: rgba(0, 0, 0, .08);
}.surux-column-filter-option {
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: .48rem;
  padding: .32rem .42rem;
  border-radius: .42rem;
  color: var(--surux-text);
  font-size: .86rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
}.surux-column-filter-option:hover {
  background: rgba(var(--surux-primary-rgb), .10);
}.surux-column-filter-option input {
  --surux-filter-checkbox-bg: color-mix(in srgb, var(--surux-surface-2) 78%, rgba(var(--surux-primary-rgb), .13));
  --surux-filter-checkbox-border: color-mix(in srgb, rgba(var(--surux-primary-rgb), .58) 60%, rgba(255, 255, 255, .30));
  --surux-filter-checkbox-highlight: rgba(255, 255, 255, .13);
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  flex: 0 0 1rem;
  width: 1rem;
  height: 1rem;
  margin: 0;
  border: 1.5px solid var(--surux-filter-checkbox-border);
  border-radius: .22rem;
  background:
    linear-gradient(135deg, var(--surux-filter-checkbox-highlight), transparent 58%),
    var(--surux-filter-checkbox-bg);
  box-shadow:
    inset 0 1px 0 var(--surux-filter-checkbox-highlight),
    0 0 0 1px rgba(var(--surux-primary-rgb), .11);
  cursor: pointer;
  transition:
    background-color var(--surux-transition),
    border-color var(--surux-transition),
    box-shadow var(--surux-transition);
}.surux-column-filter-option:hover input:not(:checked):not(:disabled) {
  border-color: rgba(var(--surux-primary-rgb), .76);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .16),
    0 0 0 2px rgba(var(--surux-primary-rgb), .12);
}.surux-column-filter-option input:focus-visible {
  outline: none;
  border-color: rgba(var(--surux-primary-rgb), .86);
  box-shadow:
    0 0 0 .22rem rgba(var(--surux-primary-rgb), .22),
    inset 0 1px 0 rgba(255, 255, 255, .16);
}.surux-column-filter-option input:checked {
  border-color: rgba(var(--surux-primary-rgb), .92);
  background-color: var(--surux-primary-action-bg);
  background-image: var(--surux-checkbox-mark);
  background-position: center;
  background-repeat: no-repeat;
  background-size: .74rem .74rem, 100% 100%;
  box-shadow:
    0 0 0 1px rgba(var(--surux-primary-rgb), .18),
    0 .24rem .6rem rgba(var(--surux-primary-rgb), .25),
    inset 0 1px 0 rgba(255, 255, 255, .24);
}.surux-column-filter-option:has(input:checked) {
  background: rgba(var(--surux-primary-rgb), .14);
}.surux-column-filter-option:has(input:focus-visible) {
  background: rgba(var(--surux-primary-rgb), .12);
}[data-bs-theme="light"] .surux-column-filter-option input {
  --surux-filter-checkbox-bg: color-mix(in srgb, var(--surux-surface) 88%, rgba(var(--surux-primary-rgb), .12));
  --surux-filter-checkbox-border: color-mix(in srgb, var(--surux-primary) 42%, #94a3b8 58%);
  --surux-filter-checkbox-highlight: rgba(255, 255, 255, .82);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .88),
    0 0 0 1px rgba(15, 23, 42, .08),
    0 .12rem .3rem rgba(15, 23, 42, .08);
}.surux-column-filter-quick-dates {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .4rem;
}.surux-column-filter-quick-dates button {
  min-width: 0;
  padding-inline: .35rem;
  font-size: .76rem;
}.surux-column-filter-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: .48rem;
}.surux-list-aggregate-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: .55rem;
  margin: .65rem 0;
}.surux-list-aggregate-item {
  min-width: 0;
  padding: .65rem .75rem;
  border: 1px solid rgba(var(--surux-primary-rgb), .28);
  border-radius: .55rem;
  background: rgba(var(--surux-primary-rgb), .08);
}.surux-list-aggregate-label,
.surux-list-aggregate-item small {
  display: block;
  color: var(--surux-muted);
  font-size: .78rem;
  font-weight: 700;
}.surux-list-aggregate-value {
  display: block;
  margin-top: .15rem;
  color: var(--surux-text);
  font-size: 1rem;
  font-weight: 800;
}.surux-table tfoot {
  position: sticky;
  bottom: 0;
  z-index: 4;
  background: color-mix(in srgb, var(--surux-surface) 96%, #000 4%);
  box-shadow: 0 -.7rem 1.35rem rgba(0, 0, 0, .14);
}.surux-table tfoot th,
.surux-table tfoot td {
  border-top: 1px solid rgba(var(--surux-primary-rgb), .36);
  color: var(--surux-text);
  font-weight: 800;
  white-space: nowrap;
}.surux-table-total-subtext {
  display: block;
  margin-top: .12rem;
  color: var(--surux-muted);
  font-size: .72rem;
  font-weight: 700;
}.surux-search-bar-no-status {
  grid-template-columns: minmax(14rem, 1fr);
}.surux-search-bar-no-status.surux-search-bar-has-create {
  grid-template-columns: minmax(84px, max-content) minmax(14rem, 1fr);
}.surux-search-bar-no-status.surux-search-bar-has-desktop-toggle {
  grid-template-columns: minmax(14rem, 1fr) minmax(46px, auto);
}.surux-search-bar-no-status.surux-search-bar-has-create.surux-search-bar-has-desktop-toggle {
  grid-template-columns: minmax(84px, max-content) minmax(14rem, 1fr) minmax(46px, auto);
}.surux-search-bar-no-leading:not(.surux-search-bar-no-status) {
  grid-template-columns: minmax(14rem, 1fr) minmax(9rem, 13rem);
}.surux-search-bar-no-leading:not(.surux-search-bar-no-status).surux-search-bar-has-desktop-toggle,
.surux-search-bar-no-leading:not(.surux-search-bar-no-status).surux-search-bar-has-active-filters {
  grid-template-columns: minmax(14rem, 1fr) minmax(9rem, 13rem) minmax(46px, auto);
}.surux-search-bar-no-leading:not(.surux-search-bar-no-status).surux-search-bar-has-desktop-toggle.surux-search-bar-has-active-filters {
  grid-template-columns: minmax(14rem, 1fr) minmax(9rem, 13rem) minmax(46px, auto) minmax(46px, auto);
}.surux-search-bar-has-active-filters {
  grid-template-columns: minmax(84px, max-content) minmax(14rem, 1fr) minmax(9rem, 13rem) minmax(46px, auto) minmax(46px, auto);
}.surux-search-bar-no-status.surux-search-bar-has-active-filters {
  grid-template-columns: minmax(14rem, 1fr) minmax(46px, auto);
}.surux-search-bar-no-status.surux-search-bar-has-create.surux-search-bar-has-active-filters {
  grid-template-columns: minmax(84px, max-content) minmax(14rem, 1fr) minmax(46px, auto);
}.surux-search-bar-no-status.surux-search-bar-has-desktop-toggle.surux-search-bar-has-active-filters {
  grid-template-columns: minmax(14rem, 1fr) minmax(46px, auto) minmax(46px, auto);
}.surux-search-bar-no-status.surux-search-bar-has-create.surux-search-bar-has-desktop-toggle.surux-search-bar-has-active-filters {
  grid-template-columns: minmax(84px, max-content) minmax(14rem, 1fr) minmax(46px, auto) minmax(46px, auto);
}.surux-search-bar .surux-input,
.surux-search-bar .surux-search-submit-btn,
.surux-search-bar .surux-search-clear-btn {
  margin: 0;
  min-height: 46px;
}.surux-search-bar .surux-inline-new-btn {
  width: auto;
  min-width: 6.25rem;
  min-height: 46px;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .42rem;
  border-radius: .55rem;
}.surux-search-bar .surux-inline-new-btn span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}.surux-search-bar .surux-search-submit-btn {
  width: 46px;
  min-width: 46px;
  height: 46px;
  border-radius: .55rem;
  justify-self: start;
}.surux-search-bar-has-desktop-toggle .surux-search-desktop-toggle {
  width: 46px;
  min-width: 46px;
  height: 46px;
  border-radius: .55rem;
  justify-self: start;
}.surux-search-clear-btn {
  justify-self: start;
}.surux-search-submit-mobile {
  display: none !important;
}.surux-search-active-count {
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 .38rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #fff;
  background: rgba(var(--surux-primary-rgb), .82);
  font-size: .72rem;
  font-weight: 800;
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
}.surux-command-button-icon-only .surux-search-active-count {
  position: absolute;
  top: -.42rem;
  right: -.42rem;
  min-width: 1.12rem;
  height: 1.12rem;
  padding: 0 .28rem;
  font-size: .62rem;
  pointer-events: none;
}

@media (min-width: 992px) {.surux-search-bar-has-desktop-toggle .surux-search-desktop-toggle {
    display: inline-flex !important;
  }
}

.surux-search-quick-filters {
  display: flex;
  align-items: stretch;
  flex-wrap: nowrap;
  min-width: 0;
  margin: .75rem 0 0;
  overflow: hidden;
  border: 1px solid var(--surux-border);
  border-radius: var(--surux-radius-sm);
  background: color-mix(in srgb, var(--surux-surface-2) 88%, transparent);
}

.surux-search-quick-filter {
  --surux-quick-filter-accent: var(--surux-primary);
  display: inline-flex;
  align-items: center;
  flex: 1 1 auto;
  gap: .38rem;
  min-width: 0;
  min-height: 2.65rem;
  padding: .35rem .68rem;
  border: 0;
  border-inline-end: 1px solid var(--surux-border);
  color: var(--surux-text);
  background: transparent;
  text-decoration: none;
  box-shadow: inset 0 0 0 transparent;
  transition: background-color .16s ease, box-shadow .16s ease;
}

.surux-search-quick-filter:last-child {
  border-inline-end: 0;
}

.surux-search-quick-filter:hover,
.surux-search-quick-filter:focus-visible {
  color: var(--surux-text);
  background: rgba(var(--surux-primary-rgb), .08);
}

.surux-search-quick-filter:focus-visible {
  position: relative;
  z-index: 1;
  outline: 2px solid rgba(var(--surux-primary-rgb), .72);
  outline-offset: -2px;
}

.surux-search-quick-filter.is-active,
.surux-search-quick-filter[aria-current="page"] {
  background: color-mix(in srgb, var(--surux-quick-filter-accent) 10%, transparent);
  box-shadow: inset 0 -3px 0 var(--surux-quick-filter-accent);
}

.surux-search-quick-filter.tone-warning {
  --surux-quick-filter-accent: var(--surux-warning);
}

.surux-search-quick-filter.tone-progress {
  --surux-quick-filter-accent: var(--surux-warning);
}

.surux-search-quick-filter.tone-success {
  --surux-quick-filter-accent: var(--surux-success);
}

.surux-search-quick-filter.tone-danger {
  --surux-quick-filter-accent: var(--surux-danger);
}

.surux-search-quick-filter-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 1.35rem;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
  color: var(--surux-quick-filter-accent);
  background: color-mix(in srgb, var(--surux-quick-filter-accent) 13%, transparent);
  font-size: .7rem;
}

.surux-search-quick-filter-label {
  min-width: 0;
  overflow: hidden;
  color: var(--surux-muted);
  font-size: .72rem;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.surux-search-quick-filter strong {
  flex: 0 0 auto;
  color: var(--surux-text);
  font-size: .88rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}

.surux-search-quick-filter small {
  flex: 0 0 auto;
  color: var(--surux-muted);
  font-size: .7rem;
  line-height: 1;
  white-space: nowrap;
}

.surux-account-transaction-status-cell {
  min-width: 12rem;
}

.surux-account-transaction-status-cell > small {
  display: block;
  max-width: 18rem;
  margin-top: .3rem;
  color: var(--surux-muted);
  line-height: 1.35;
}

.surux-account-transaction-row-info > td:first-child {
  box-shadow: inset 3px 0 0 #38bdf8;
}

.surux-account-transaction-row-warning > td:first-child {
  box-shadow: inset 3px 0 0 var(--surux-warning);
}

.surux-account-transaction-row-critical {
  --surux-list-row-tint: 7%;
  --surux-list-row-tint-colour: var(--surux-danger);
  background: color-mix(in srgb, var(--surux-danger) 7%, var(--surux-list-pin-bg, var(--surux-surface)));
}

.surux-account-transaction-row-critical > td:first-child {
  box-shadow: inset 3px 0 0 var(--surux-danger);
}

.surux-mobile-list-item.surux-account-transaction-row-info {
  border-left-width: 3px;
  border-left-color: #38bdf8;
}

.surux-mobile-list-item.surux-account-transaction-row-warning {
  border-left-width: 3px;
  border-left-color: var(--surux-warning);
}

.surux-mobile-list-item.surux-account-transaction-row-critical {
  border-left-width: 3px;
  border-left-color: var(--surux-danger);
}

@media (max-width: 991.98px) {
  .surux-search-quick-filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: hidden;
  }

  .surux-search-quick-filter {
    width: 100%;
    border-bottom: 1px solid var(--surux-border);
  }

  .surux-search-quick-filter small {
    display: none;
  }
}

@media (max-width: 575.98px) {
  .surux-search-quick-filters {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Grouped quick filters wrap their titles and the open member row. Flat chips stay nowrap. */
.surux-search-quick-filter-set {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  min-width: 0;
  margin: .75rem 0 0;
}
.surux-search-quick-filter-set > .surux-search-quick-filters {
  margin: 0;
}
.surux-search-quick-filters.surux-search-quick-filter-groups,
.surux-search-quick-filters.surux-search-quick-filter-members {
  flex-wrap: wrap;
  overflow: visible;
}
.surux-search-quick-filter-group {
  display: inline-flex;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  border-inline-end: 1px solid var(--surux-border);
}
.surux-search-quick-filter-group > .surux-search-quick-filter {
  flex: 0 1 auto;
  border-inline-end: 0;
}
button.surux-search-quick-filter {
  font: inherit;
  cursor: pointer;
  text-align: start;
}
.surux-search-quick-filter-members .surux-search-quick-filter {
  flex: 0 1 auto;
}
.surux-search-quick-filter-members .surux-search-quick-filter-label {
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}
@media (max-width: 991.98px) {
  .surux-search-quick-filters.surux-search-quick-filter-groups,
  .surux-search-quick-filters.surux-search-quick-filter-members {
    display: flex;
    flex-wrap: wrap;
    grid-template-columns: none;
  }
}
@media (max-width: 575.98px) {
  .surux-search-quick-filters.surux-search-quick-filter-groups,
  .surux-search-quick-filters.surux-search-quick-filter-members {
    display: flex;
    flex-wrap: wrap;
    grid-template-columns: none;
  }
}

@media (max-width: 991.98px) {.surux-column-filter-fields {
    grid-column: 2 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
    min-width: 0;
  }
}

@media (max-width: 1399.98px),
       ((hover: none) and (pointer: coarse) and (max-width: 1599.98px)) {.surux-search-bar {
    grid-template-columns: 1fr;
    justify-content: stretch;
    align-items: stretch;
    gap: .65rem;
    padding: .72rem;
  }.surux-search-bar:has(.surux-mobile-search-check:not(:checked)) {
    row-gap: 0;
  }.surux-search-mobile-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: .55rem;
    min-width: 0;
    width: 100%;
  }.surux-search-bar-has-create .surux-search-mobile-actions {
    grid-template-columns: 46px minmax(0, 1fr);
  }.surux-search-bar-has-active-filters .surux-search-mobile-actions {
    grid-template-columns: minmax(0, 1fr);
  }.surux-search-bar-has-create.surux-search-bar-has-active-filters .surux-search-mobile-actions {
    grid-template-columns: 46px minmax(0, 1fr);
  }.surux-search-mobile-toggle {
    width: 46px;
    min-width: 46px;
    height: 46px;
    padding: 0;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: .55rem;
    justify-self: start;
  }.surux-search-mobile-toggle-active {
    border-color: rgba(var(--surux-primary-rgb), .66) !important;
    box-shadow:
      0 0 0 1px rgba(var(--surux-primary-rgb), .14),
      0 .46rem 1rem color-mix(in srgb, var(--surux-button-dark) 70%, transparent),
      inset 0 1px 0 rgba(255, 255, 255, .18) !important;
  }.surux-search-mobile-actions .surux-filter-search {
    position: relative;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    min-width: 0;
    width: 100%;
  }.surux-search-mobile-actions .surux-filter-search .surux-input {
    padding-right: 5.7rem;
  }.surux-search-fields {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr;
    gap: .5rem;
    width: min(100%, 560px);
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    pointer-events: none;
    transform: translateY(-.25rem);
    transition: max-height .18s ease, opacity .18s ease, transform .18s ease, visibility .18s ease;
  }.surux-mobile-search-check:checked ~ .surux-search-fields {
    max-height: 460px;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }.surux-column-filter-fields {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }.surux-search-bar .surux-inline-new-btn {
    width: 46px;
    max-width: none;
    min-width: 46px;
    justify-self: start;
  }.surux-search-bar .surux-inline-new-btn .surux-command-button-text {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }.surux-search-bar .surux-search-submit-btn {
    width: 46px;
    min-width: 46px;
    max-width: 46px;
    justify-self: start;
    padding-inline: 0;
  }.surux-search-submit-mobile {
    display: inline-flex !important;
  }.surux-search-submit-inline {
    position: absolute !important;
    top: 50%;
    right: .25rem;
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    border-radius: .72rem !important;
    transform: translateY(-50%);
    box-shadow:
      .18rem .24rem .55rem var(--surux-button-dark),
      -.1rem -.1rem .32rem var(--surux-button-light),
      inset 1px 1px 0 rgba(255, 255, 255, .14),
      inset -1px -1px 0 rgba(0, 0, 0, .10) !important;
  }.surux-search-submit-desktop {
    display: none !important;
  }.surux-search-desktop-toggle {
    display: none !important;
  }.surux-search-clear-desktop {
    display: none !important;
  }.surux-filter-card .surux-search-submit-btn {
    width: 46px;
    min-width: 46px;
    justify-self: start;
  }
}

@media (max-width: 420px) {.surux-column-filter-fields {
    grid-template-columns: 1fr;
  }
}.surux-close-tab-message {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem;
  background: var(--surux-app-bg);
  color: var(--surux-text);
}.surux-close-tab-message > div {
  max-width: 28rem;
  padding: 1.5rem;
  border: 1px solid var(--surux-border);
  border-radius: .72rem;
  background: var(--surux-surface);
  text-align: center;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, .18);
}.surux-line-reorder-marker {
  min-height: 16px;
  display: grid;
  place-items: center;
  margin: .05rem .18rem;
  border: 1px dashed rgba(var(--surux-primary-rgb), .72);
  border-radius: .5rem;
  background:
    linear-gradient(90deg, rgba(var(--surux-primary-rgb), .2), rgba(var(--surux-primary-rgb), .055));
  color: var(--surux-primary);
  font-size: .68rem;
  font-weight: 850;
  line-height: 1;
  letter-spacing: .055em;
  text-transform: uppercase;
  pointer-events: none;
  box-shadow:
    0 0 0 .14rem rgba(var(--surux-primary-rgb), .08),
    0 .45rem 1rem rgba(0, 0, 0, .14);
}.surux-line-reorder-marker span {
  padding: .14rem .45rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surux-surface) 78%, transparent);
}.surux-table-resizable {
  position: relative;
}.surux-table-resizable thead th:not(.surux-row-control-column) {
  position: relative;
  padding-right: 1.45rem !important;
}.surux-table-columns-sized {
  table-layout: fixed;
}.surux-table-columns-sized th:not(.surux-row-control-column),
.surux-table-columns-sized td:not(.surux-row-control-column) {
  overflow: hidden;
  text-overflow: ellipsis;
}.surux-column-resize-handle {
  position: absolute;
  top: .38rem;
  right: -.24rem;
  bottom: .38rem;
  z-index: 12;
  width: .72rem;
  padding: 0;
  border: 0;
  border-radius: .45rem;
  background: transparent;
  cursor: col-resize;
  touch-action: none;
}.surux-table-resizable thead th:last-child .surux-column-resize-handle {
  right: 0;
}.surux-column-resize-handle::before {
  content: "";
  position: absolute;
  top: .16rem;
  bottom: .16rem;
  left: 50%;
  width: 2px;
  border-radius: 999px;
  background: rgba(var(--surux-primary-rgb), .78);
  box-shadow: 0 0 .55rem rgba(var(--surux-primary-rgb), .45);
  opacity: 0;
  transform: translateX(-50%);
  transition: opacity .14s ease, background var(--surux-transition);
}.surux-table-resizable thead th:hover .surux-column-resize-handle::before,
.surux-column-resize-handle:focus-visible::before,
.surux-table-resize-active .surux-column-resize-handle::before {
  opacity: 1;
}.surux-column-resize-handle:focus-visible {
  outline: 2px solid rgba(var(--surux-primary-rgb), .72);
  outline-offset: .08rem;
}body.surux-column-resizing {
  cursor: col-resize;
  user-select: none;
}body.surux-column-resizing * {
  cursor: col-resize !important;
}

@media (max-width: 991.98px) {
}

@media (max-width: 575.98px) {
}.surux-notes-panel {
  --surux-notes-accent: var(--surux-primary);
  --surux-notes-accent-rgb: var(--surux-primary-rgb);
  --surux-notes-panel-bg: color-mix(in srgb, var(--surux-surface) 94%, var(--surux-app-bg) 6%);
  --surux-notes-panel-soft-bg: color-mix(in srgb, var(--surux-surface-2) 74%, var(--surux-surface) 26%);
  min-width: 0;
  display: grid;
  gap: 1rem;
  padding: 0;
  overflow: visible;
  background: var(--surux-notes-panel-bg);
}.surux-notes-panel .surux-inline-alert {
  margin: 0;
}.surux-notes-layout {
  min-width: 0;
  display: grid;
  gap: 1rem;
  overflow: visible;
}.surux-notes-layout-editable,
.surux-notes-layout-readonly {
  grid-template-columns: minmax(0, 1fr);
}.surux-notes-feed {
  min-width: 0;
  min-height: 0;
  display: grid;
}.surux-notes-thread {
  min-height: 0;
  max-height: none;
  display: grid;
  align-content: start;
  gap: .85rem;
  padding: 0;
  overflow: visible;
}.surux-notes-empty-state-shell {
  min-height: 0;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--surux-border) 84%, transparent);
  border-radius: 8px;
  padding: 1rem;
  background: color-mix(in srgb, var(--surux-surface) 94%, var(--surux-surface-2) 6%);
}.surux-notes-empty-state-shell .surux-empty-state {
  min-height: 10rem;
}.surux-notes-empty-state-shell .surux-empty-icon {
  width: 3rem;
  height: 3rem;
  border-radius: .6rem;
  margin-bottom: .75rem;
  background: color-mix(in srgb, var(--surux-surface) 78%, rgba(var(--surux-notes-accent-rgb), .16));
  color: var(--surux-notes-accent);
  font-size: 1.2rem;
}.surux-note-card {
  position: relative;
  width: min(100%, 64rem);
  display: grid;
  gap: .65rem;
  border: 1px solid color-mix(in srgb, var(--surux-border) 88%, transparent);
  border-left-color: rgba(var(--surux-notes-accent-rgb), .72);
  border-left-width: 3px;
  border-radius: 8px;
  padding: .95rem 1rem;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .035), transparent 48%),
    color-mix(in srgb, var(--surux-surface) 94%, var(--surux-surface-2) 6%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .06),
    0 .8rem 1.8rem rgba(0, 0, 0, .08);
}.surux-note-card-header {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .8rem;
}.surux-note-card-deleted {
  border-left-color: color-mix(in srgb, var(--surux-muted) 70%, transparent);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .02), transparent 48%),
    color-mix(in srgb, var(--surux-surface-2) 86%, var(--surux-surface) 14%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
  opacity: .84;
}.surux-note-card-deleted .surux-note-author-icon {
  border-color: color-mix(in srgb, var(--surux-border) 82%, transparent);
  background: color-mix(in srgb, var(--surux-surface-2) 82%, var(--surux-surface) 18%);
  color: var(--surux-muted);
}.surux-note-author {
  min-width: 0;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: .55rem;
  align-items: center;
}.surux-note-author-icon {
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(var(--surux-notes-accent-rgb), .28);
  border-radius: .45rem;
  background: color-mix(in srgb, var(--surux-surface) 78%, rgba(var(--surux-notes-accent-rgb), .16));
  color: var(--surux-notes-accent);
}.surux-note-author strong {
  display: block;
  overflow: hidden;
  color: var(--surux-text);
  font-size: .83rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}.surux-note-author time {
  display: block;
  margin-top: .12rem;
  color: var(--surux-muted);
  font-size: .74rem;
  line-height: 1.2;
}.surux-note-text {
  margin: 0;
  color: var(--surux-text);
  font-size: .94rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}.surux-note-deleted-text {
  margin: 0;
  color: var(--surux-muted);
  font-size: .9rem;
  font-style: italic;
  line-height: 1.45;
}.surux-note-updated {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: var(--surux-muted);
  font-size: .74rem;
}.surux-note-deleted-meta {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: var(--surux-muted);
  font-size: .74rem;
}.surux-note-title-actions {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: .35rem;
}.surux-note-icon-action {
  width: 2.15rem;
  height: 2.15rem;
  min-width: 2.15rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--surux-border) 70%, rgba(var(--surux-notes-accent-rgb), .3));
  border-radius: .5rem;
  padding: 0;
  background: color-mix(in srgb, var(--surux-surface) 86%, rgba(var(--surux-notes-accent-rgb), .1));
  color: var(--surux-notes-accent);
  cursor: pointer;
  font-size: .82rem;
  list-style: none;
}.surux-note-icon-action::-webkit-details-marker {
  display: none;
}.surux-note-icon-action:hover,
.surux-note-icon-action:focus-visible {
  border-color: rgba(var(--surux-notes-accent-rgb), .5);
  background: color-mix(in srgb, var(--surux-surface) 78%, rgba(var(--surux-notes-accent-rgb), .18));
  outline: none;
}.surux-note-edit[open] {
  position: relative;
}.surux-note-edit-form {
  position: absolute;
  top: calc(100% + .5rem);
  right: 0;
  z-index: 4;
  width: min(28rem, calc(100vw - 4rem));
  min-width: min(28rem, calc(100vw - 4rem));
  display: grid;
  gap: .6rem;
  border: 1px solid color-mix(in srgb, var(--surux-border) 82%, transparent);
  border-radius: 8px;
  padding: .7rem;
  background: color-mix(in srgb, var(--surux-surface-2) 74%, var(--surux-surface) 26%);
  box-shadow: 0 .9rem 2rem rgba(0, 0, 0, .18);
}.surux-note-edit-actions {
  display: flex;
  justify-content: flex-end;
}
/* TR-0000231: one level of replies. A thread is its top note, its replies indented on a
   rail beneath it (oldest first), and the inline reply composer. */
.surux-note-thread-group {
  min-width: 0;
  display: grid;
  gap: .55rem;
}.surux-note-replies {
  max-width: 63rem;
  min-width: 0;
  display: grid;
  gap: .55rem;
  margin-left: 1rem;
  padding-left: .85rem;
  border-left: 2px solid color-mix(in srgb, var(--surux-border) 72%, rgba(var(--surux-notes-accent-rgb), .28));
}.surux-note-card-reply {
  width: 100%;
  gap: .5rem;
  padding: .75rem .85rem;
  border-left-width: 1px;
  border-left-color: color-mix(in srgb, var(--surux-border) 88%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}.surux-note-reply-form {
  max-width: 63rem;
  min-width: 0;
  display: grid;
  gap: .6rem;
  margin-left: 1rem;
  border: 1px solid color-mix(in srgb, var(--surux-border) 70%, rgba(var(--surux-notes-accent-rgb), .3));
  border-radius: 8px;
  padding: .7rem;
  background: var(--surux-notes-panel-soft-bg);
}.surux-note-reply-form[hidden] {
  display: none;
}.surux-note-reply-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .5rem;
}.surux-note-delete-form {
  margin: 0;
}.surux-note-delete-button {
  width: 2.15rem !important;
  height: 2.15rem !important;
  min-width: 2.15rem !important;
  min-height: 2.15rem !important;
  padding: 0 !important;
  border-radius: .5rem !important;
  box-shadow: 0 .28rem .7rem color-mix(in srgb, var(--surux-danger-fill) 22%, transparent) !important;
  border-color: color-mix(in srgb, var(--surux-danger-fill) 87%, #000) !important;
  background: linear-gradient(145deg, var(--surux-danger-fill), color-mix(in srgb, var(--surux-danger-fill) 77%, #000)) !important;
  color: #fff !important;
  --surux-button-bg: linear-gradient(145deg, var(--surux-danger-fill), color-mix(in srgb, var(--surux-danger-fill) 77%, #000));
  --surux-button-fg: #fff;
  --surux-button-border: color-mix(in srgb, var(--surux-danger-fill) 87%, #000);
  --surux-button-glow: color-mix(in srgb, var(--surux-danger-fill) 32%, transparent);
  --surux-button-icon-bg: transparent;
  --surux-button-icon-fg: currentColor;
  --surux-button-icon-border: transparent;
}.surux-note-delete-button::before,
.surux-note-delete-button::after {
  display: none !important;
}.surux-note-delete-button:hover,
.surux-note-delete-button:focus-visible {
  border-color: color-mix(in srgb, var(--surux-danger-fill) 90%, transparent) !important;
  background: linear-gradient(145deg, color-mix(in srgb, var(--surux-danger-fill) 80%, #fff), color-mix(in srgb, var(--surux-danger-fill) 64%, #000)) !important;
  color: #fff !important;
  outline: none;
}.surux-notes-composer-shell {
  min-width: 0;
  display: block;
  padding: 0;
  background: transparent;
}.surux-notes-composer {
  position: static;
  width: min(100%, 64rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .75rem;
  align-items: stretch;
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--surux-border) 70%, rgba(var(--surux-notes-accent-rgb), .3));
  border-radius: 8px;
  padding: .9rem;
  background:
    linear-gradient(135deg, rgba(var(--surux-notes-accent-rgb), .055), transparent 58%),
    color-mix(in srgb, var(--surux-surface) 90%, var(--surux-surface-2) 10%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .07),
    0 .7rem 1.35rem rgba(0, 0, 0, .10);
}.surux-notes-composer-head {
  min-width: 0;
  display: flex;
  gap: .55rem;
  align-items: center;
  padding-bottom: .75rem;
  border-bottom: 1px solid color-mix(in srgb, var(--surux-border) 78%, transparent);
}.surux-notes-composer-head strong,
.surux-notes-composer-head span {
  display: block;
}.surux-notes-composer-head strong {
  color: var(--surux-text);
  font-size: .92rem;
}.surux-notes-composer-head span {
  color: var(--surux-muted);
  font-size: .78rem;
  line-height: 1.3;
}.surux-notes-composer-body {
  display: grid;
  gap: .45rem;
}.surux-notes-composer-label {
  color: var(--surux-muted);
  font-size: .75rem;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: uppercase;
}.surux-notes-composer textarea {
  min-height: 5rem;
}.surux-rich-text-control {
  min-width: 0;
  --surux-rich-text-border: var(--surux-border);
  --surux-rich-text-focus-border: rgba(var(--surux-primary-rgb), .65);
  --surux-rich-text-focus-ring: rgba(var(--surux-primary-rgb), .18);
}
.surux-rich-text-control-compact .surux-rich-text-surface {
  min-height: 5.5rem;
}
/* The label, toolbar and editable body sit inside one shared inset field
   surface; the surface owns the frame, focus well and read-only rim. */
.surux-rich-text-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .35rem;
  margin: .35rem .75rem 0;
  padding: 0 0 .45rem;
  border-bottom: 1px solid var(--surux-rich-text-border);
}.surux-rich-text-toolbar > button:not(.surux-command-button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--surux-rich-text-border);
  border-radius: .45rem;
  color: var(--surux-text);
  background: color-mix(in srgb, var(--surux-input-bg) 82%, transparent);
}.surux-rich-text-toolbar > button:not(.surux-command-button):hover,
.surux-rich-text-toolbar > button:not(.surux-command-button):focus-visible {
  color: rgb(var(--surux-primary-rgb));
  border-color: var(--surux-rich-text-focus-border);
  box-shadow: 0 0 0 .18rem var(--surux-rich-text-focus-ring);
  outline: none;
}.surux-form-grid > .surux-rich-text-profile-rules {
  grid-column: 1 / -1;
}
.surux-form-grid.surux-form-grid-lead > .surux-rich-text-profile-rules,
.surux-form-grid-lead-main > .surux-rich-text-profile-rules {
  grid-column: auto;
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
}
.surux-form-grid.surux-form-grid-lead > .surux-rich-text-profile-rules > .surux-field-frame,
.surux-form-grid.surux-form-grid-lead > .surux-rich-text-profile-rules .surux-field-surface,
.surux-form-grid-lead-main > .surux-rich-text-profile-rules > .surux-field-frame,
.surux-form-grid-lead-main > .surux-rich-text-profile-rules .surux-field-surface {
  height: 100%;
}
.surux-form-grid.surux-form-grid-lead > .surux-rich-text-profile-rules .surux-field-surface,
.surux-form-grid-lead-main > .surux-rich-text-profile-rules .surux-field-surface {
  display: flex;
  flex-direction: column;
}
.surux-form-grid.surux-form-grid-lead > .surux-rich-text-profile-rules .surux-rich-text-surface,
.surux-form-grid-lead-main > .surux-rich-text-profile-rules .surux-rich-text-surface {
  flex: 1 1 auto;
}.surux-rich-text-toolbar > .surux-rich-text-colour {
  flex: 0 1 auto;
  width: auto;
  min-width: 0;
  max-width: 100%;
}.surux-rich-text-toolbar-separator {
  width: 1px;
  height: 1.6rem;
  background: var(--surux-rich-text-border);
}.surux-rich-text-surface {
  min-height: 11rem;
  padding: .75rem;
  border: 0;
  border-radius: 0 0 .625rem .625rem;
  color: var(--surux-input-color, var(--surux-text));
  background: transparent;
  overflow: auto;
  outline: none;
}.surux-rich-text-surface[contenteditable="false"] {
  cursor: default;
}.surux-rich-text-field:has(> .surux-rich-text-surface:is(.surux-input-invalid, .is-invalid, [aria-invalid="true"])) {
  --surux-picker-accent: color-mix(in srgb, var(--surux-warning) 72%, var(--surux-text));
  --surux-picker-edge: color-mix(in srgb, var(--surux-warning-fill) 72%, var(--surux-text));
  --surux-picker-glow: color-mix(in srgb, var(--surux-picker-edge) 20%, transparent);
}.surux-rich-text-field:has(> .surux-rich-text-surface:is(.surux-input-invalid, .is-invalid, [aria-invalid="true"]))::after {
  background: linear-gradient(90deg, transparent, var(--surux-picker-edge) 24%, var(--surux-picker-edge) 76%, transparent);
}.surux-rich-text-field:has(> .surux-rich-text-surface:is(.surux-input-invalid, .is-invalid, [aria-invalid="true"])) .surux-field-label {
  color: var(--surux-picker-accent);
}.surux-rich-text-surface :is(p, ul, ol, blockquote, pre, figure) {
  margin-bottom: .75rem;
}.surux-rich-text-surface :is(p, ul, ol, blockquote, pre, figure):last-child {
  margin-bottom: 0;
}.surux-rich-text-surface img,
.surux-rich-text-surface video {
  display: block;
  max-width: min(100%, 48rem);
  max-height: 26rem;
  border: 1px solid var(--surux-rich-text-border);
  border-radius: .55rem;
  background: color-mix(in srgb, var(--surux-surface) 82%, black);
}.surux-rich-text-surface figure {
  display: grid;
  gap: .4rem;
  padding: .55rem;
  border: 1px solid var(--surux-rich-text-border);
  border-radius: .65rem;
  background: color-mix(in srgb, var(--surux-surface-2) 58%, transparent);
}.surux-rich-text-surface figcaption {
  color: var(--surux-muted);
  font-size: .83rem;
}.surux-rich-text-status {
  min-height: 1.25rem;
  margin-top: .35rem;
  color: var(--surux-muted);
  font-size: .83rem;
}.surux-rich-text-status-busy::before {
  display: inline-block;
  width: .85rem;
  height: .85rem;
  margin-right: .4rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  content: "";
  vertical-align: -.12rem;
  animation: surux-spin .8s linear infinite;
}.surux-tag-picker {
  min-width: 0;
}.surux-tag-picker-shell {
  min-height: 2.75rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2rem;
  gap: .35rem .45rem;
  align-items: center;
  padding: .35rem .45rem;
  border: 1px solid var(--surux-input-border, var(--surux-border));
  border-radius: 8px;
  background: var(--surux-input-bg);
  box-shadow: inset 0 0 0 1px rgba(var(--surux-primary-rgb), .04);
  transition: border-color var(--surux-transition), box-shadow var(--surux-transition), background var(--surux-transition);
}.surux-tag-picker-shell:focus-within {
  border-color: var(--surux-primary);
  box-shadow: 0 0 0 .18rem rgba(var(--surux-primary-rgb), .16);
}.surux-tag-picker-chips {
  grid-column: 1;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  align-items: center;
  min-width: 0;
}.surux-tag-picker-chips:empty {
  display: none;
}.surux-tag-chip {
  max-width: 100%;
  min-width: 0;
  min-height: 1.8rem;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .2rem .45rem;
  border: 1px solid rgba(var(--surux-primary-rgb), .28);
  border-radius: 999px;
  background: rgba(var(--surux-primary-rgb), .12);
  color: var(--surux-text);
  font-size: .78rem;
  font-weight: 750;
  line-height: 1;
}.surux-button.surux-assign-to-me {
  min-height: 1.65rem;
  min-width: 0;
  padding: .15rem .55rem;
  gap: .3rem;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1;
}.surux-button.surux-assign-to-me .surux-command-button-icon {
  width: auto;
  height: auto;
  font-size: .72rem;
}.surux-tag-chip > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}.surux-tag-chip button {
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 1.25rem;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  opacity: .75;
  line-height: 1;
}.surux-tag-chip button:hover,
.surux-tag-chip button:focus-visible {
  opacity: 1;
  background: rgba(var(--surux-primary-rgb), .18);
}.surux-tag-picker-input {
  grid-column: 1;
  width: 100%;
  min-width: 0;
  min-height: 2rem;
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: .25rem .35rem;
}.surux-tag-picker-input:focus {
  box-shadow: none;
}

@keyframes surux-spin {
  to {
    transform: rotate(360deg);
  }
}.surux-notes-composer-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .75rem;
  color: var(--surux-muted);
  font-size: .78rem;
}.surux-notes-add-button {
  justify-self: end;
}.surux-notes-drawer-host {
  display: inline-flex;
  align-items: center;
}.surux-notes-drawer-trigger {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative;
}.surux-notes-drawer-trigger .surux-command-button-icon {
  margin: 0 !important;
}.surux-notes-trigger-indicator {
  position: absolute;
  inset-block-start: -.04rem;
  inset-inline-end: .28rem;
  width: .48rem;
  height: .48rem;
  border: 1px solid color-mix(in srgb, var(--surux-surface) 82%, #fff 18%);
  border-radius: 999px;
  background: var(--surux-primary);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--surux-surface) 78%, transparent),
    0 .18rem .5rem rgba(var(--surux-primary-rgb), .28);
  pointer-events: none;
}.surux-drawer-modal {
  --surux-drawer-width: min(34rem, calc(100vw - 2rem));
  z-index: 2260;
}
body:has(.surux-drawer-modal.show) > .modal-backdrop {
  z-index: 2255;
}.surux-drawer-dialog {
  pointer-events: none;
}.surux-drawer-content {
  width: 100%;
  border: var(--surux-border-width) solid color-mix(in srgb, var(--surux-border) 82%, transparent);
  background:
    linear-gradient(135deg, rgba(var(--surux-primary-rgb), .045), transparent 46%),
    color-mix(in srgb, var(--surux-surface) 94%, var(--surux-app-bg) 6%);
  box-shadow: 0 1.35rem 3.5rem rgba(0, 0, 0, .32);
  pointer-events: auto;
}.surux-drawer-body {
  min-height: 0;
  overflow: auto;
  padding: 1rem;
}.surux-notes-drawer-panel {
  background: transparent;
}

@media (min-width: 768px) {.surux-drawer-dialog {
    width: var(--surux-drawer-width);
    max-width: var(--surux-drawer-width);
    height: 100dvh;
    min-height: 100dvh;
    margin: 0 0 0 auto;
    align-items: stretch;
    transform: translateX(100%);
    transition: transform .22s ease;
  }.surux-drawer-modal.show .surux-drawer-dialog {
    transform: translateX(0);
  }.surux-modal .surux-drawer-content {
    height: 100%;
    border-block: 0;
    border-right: 0;
    border-radius: var(--surux-radius-modal) 0 0 var(--surux-radius-modal);
  }
}

@media (max-width: 767.98px) {.surux-drawer-dialog {
    width: 100%;
    max-width: 100%;
    min-height: 100dvh;
    margin: 0;
    display: flex;
    align-items: flex-end;
    transform: translateY(100%);
    transition: transform .22s ease;
  }.surux-drawer-modal.show .surux-drawer-dialog {
    transform: translateY(0);
  }.surux-modal .surux-drawer-content {
    max-height: min(88dvh, calc(100dvh - max(.75rem, env(safe-area-inset-top, 0px))));
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: var(--surux-radius-modal) var(--surux-radius-modal) 0 0;
  }.surux-drawer-body {
    padding: .85rem .85rem calc(.85rem + max(.35rem, env(safe-area-inset-bottom, 0px)));
  }.surux-notes-drawer-trigger .surux-command-button-text {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
  }
}
@media (forced-colors: active) {
  .surux-modal .modal-content,
  .surux-modal-content,
  .surux-drawer-content,
  [data-bs-theme="light"] .surux-modal .modal-content,
  [data-bs-theme="light"] .surux-modal-content {
    background-color: Canvas;
    color: CanvasText;
  }
}
.surux-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem .85rem;
}

/* A named action with one line of purpose. Disabled cards keep the reason on the card. */
.surux-action-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14.5rem, 1fr));
  gap: .65rem;
}
.surux-action-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .15rem .65rem;
  align-items: start;
  text-align: left;
  width: 100%;
  padding: .75rem;
  border-radius: 12px;
  border: 1px solid var(--surux-border);
  background: color-mix(in srgb, var(--surux-surface) 85%, var(--surux-primary) 3%);
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.surux-action-card:hover:not(:disabled) {
  border-color: var(--surux-primary);
}
.surux-action-card:disabled {
  cursor: not-allowed;
}
.surux-action-card:disabled .surux-action-card-icon,
.surux-action-card:disabled .surux-action-card-title,
.surux-action-card:disabled .surux-action-card-detail {
  opacity: .55;
}
.surux-action-card-icon {
  grid-row: span 2;
  width: 2.125rem;
  height: 2.125rem;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--surux-primary) 16%, transparent);
  color: var(--surux-primary);
}
.surux-action-card-danger .surux-action-card-icon {
  background: color-mix(in srgb, var(--surux-danger) 16%, transparent);
  color: var(--surux-danger);
}
.surux-action-card-title {
  font-size: .9rem;
  font-weight: 700;
}
.surux-action-card-detail {
  font-size: .76rem;
  opacity: .72;
}
.surux-action-card-reason {
  grid-column: 2;
}
/* TR-0000260. A three-column field grid for dense rows (client Banking first). Its rows are
   separate grids inside one host, and they fold to one column when the host itself is narrow,
   so a two-lane editor gets the stacked form before the viewport does. */
.surux-form-grid-three-host {
  display: grid;
  gap: .85rem;
  container: surux-form-grid-three / inline-size;
}
.surux-form-grid.surux-form-grid-three {
  grid-template-columns: minmax(0, 1fr);
}
@container surux-form-grid-three (min-width: 42rem) {
  .surux-form-grid.surux-form-grid-three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
/* TR-0000250. A three-track endpoint address (scheme, host, port) that stacks when the
   host is narrow. Pages name this composition; they do not retune the shared grid. */
.surux-form-grid-endpoint-address-host {
  min-width: 0;
  container: surux-form-grid-endpoint-address / inline-size;
}
.surux-form-grid.surux-form-grid-endpoint-address {
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
}
@container surux-form-grid-endpoint-address (min-width: 48rem) {
  .surux-form-grid.surux-form-grid-endpoint-address {
    grid-template-columns:
      minmax(8rem, .75fr)
      minmax(16rem, 2fr)
      minmax(7rem, .65fr);
  }
}
/* A lead control beside a stack. The lead stretches to the stack. The host folds
   to one column, lead first, when it is narrow. Pages name this composition.
   The grid has two children: the lead (or surux-form-grid-lead-main when the lead
   is more than one control) and surux-form-grid-lead-stack. */
.surux-form-grid-lead-host {
  min-width: 0;
  container: surux-form-grid-lead / inline-size;
}
.surux-form-grid.surux-form-grid-lead {
  align-items: stretch;
  grid-template-columns: minmax(0, 1fr);
}
.surux-form-grid-lead-main {
  display: flex;
  flex-direction: column;
  gap: .85rem;
  min-width: 0;
  min-height: 0;
  height: 100%;
}
.surux-form-inline-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .5rem .85rem;
  min-width: 0;
}
.surux-form-inline-actions > :not(.surux-command-button):not(.surux-form-inline-logo) {
  flex: 1 1 14rem;
  min-width: 0;
}
.surux-form-inline-actions > .surux-command-button {
  flex: 0 0 auto;
  width: auto;
  align-self: flex-end;
}
.surux-form-inline-logo {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  align-self: center;
}
.surux-form-inline-logo:not(:has(img)) {
  display: none;
}
.surux-form-inline-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.surux-form-grid-lead-stack {
  display: grid;
  align-content: start;
  gap: .5rem .85rem;
  min-width: 0;
}
@container surux-form-grid-lead (min-width: 42rem) {
  .surux-form-grid.surux-form-grid-lead {
    grid-template-columns: minmax(0, 1.4fr) minmax(16rem, 1fr);
  }
}
.surux-retention-timeline {
  display: grid;
  gap: .65rem;
  min-width: 0;
  container: surux-retention-timeline / inline-size;
}
.surux-retention-axis {
  position: relative;
  height: 1.35rem;
  margin-left: 12rem;
  margin-right: 9.5rem;
}
.surux-retention-tick {
  position: absolute;
  top: 0;
  color: var(--surux-muted);
  font-size: .68rem;
  line-height: 1.2;
  transform: translateX(-50%);
  white-space: nowrap;
}
.surux-retention-tick:first-child { transform: none; }
.surux-retention-tick:last-child { transform: translateX(-100%); }
.surux-retention-lane {
  display: grid;
  grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr) auto auto;
  gap: .45rem .65rem;
  align-items: center;
  min-width: 0;
}
.surux-retention-name {
  color: var(--surux-text);
  font-weight: 650;
}
.surux-retention-track {
  position: relative;
  height: .55rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surux-border) 70%, transparent);
}
.surux-retention-bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--surux-retention-position, 0%);
  border-radius: inherit;
  background: color-mix(in srgb, var(--surux-primary) 78%, var(--surux-text));
}
.surux-retention-value { min-width: 5.5rem; }
.surux-retention-unit {
  color: var(--surux-muted);
  font-size: .75rem;
}
.surux-retention-summary {
  margin: 0;
  color: var(--surux-text);
  font-size: .85rem;
}
@container surux-retention-timeline (max-width: 36rem) {
  .surux-retention-axis { margin-left: 0; margin-right: 0; }
  .surux-retention-lane {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas:
      "name name name"
      "track value unit";
  }
  .surux-retention-name { grid-area: name; }
  .surux-retention-track { grid-area: track; }
  .surux-retention-value { grid-area: value; }
  .surux-retention-unit { grid-area: unit; }
}.surux-settings-tab-group {
  flex: 0 0 auto;
  display: flex;
  gap: .22rem;
}.surux-settings-tab-group-label {
  display: none;
}
@media (min-width: 992px) {
  .surux-page-shell > .surux-page-content > .surux-tabs.surux-settings-tabs {
    display: grid;
    grid-template-columns: minmax(12rem, 13.5rem) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    gap: 1.1rem;
  }

  .surux-settings-tabs > .surux-tab-list {
    min-height: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: .35rem 0 .85rem;
    padding: .25rem .9rem .65rem .15rem;
    overflow-x: hidden;
    overflow-y: auto;
    border-right: 1px solid var(--surux-border);
    border-bottom: 0;
    scrollbar-width: thin;
  }

  .surux-settings-tab-group {
    display: grid;
    gap: .12rem;
  }

  .surux-settings-tab-group + .surux-settings-tab-group {
    margin-top: .72rem;
    padding-top: .72rem;
    border-top: 1px solid color-mix(in srgb, var(--surux-border) 72%, transparent);
  }

  .surux-settings-tab-group-label {
    display: block;
    padding: .18rem .7rem .3rem;
    color: var(--surux-muted);
    font-size: .68rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: .07em;
    text-transform: uppercase;
  }

  .surux-page-shell .surux-settings-tabs .surux-tab-button {
    width: 100%;
    min-height: 40px;
    justify-content: flex-start;
    gap: .62rem;
    margin: 0;
    padding: .58rem .72rem;
    border: 1px solid transparent;
    border-radius: .58rem;
    font-size: .84rem;
  }

  .surux-page-shell .surux-settings-tabs .surux-tab-button.active,
  .surux-page-shell .surux-settings-tabs .surux-tab-button[aria-selected="true"] {
    border-color: rgba(var(--surux-primary-rgb), .28);
    border-left: 3px solid var(--surux-primary);
    background: rgba(var(--surux-primary-rgb), .10);
    box-shadow: none;
  }

  .surux-settings-tabs > .surux-tab-panels {
    min-width: 0;
    padding: .35rem .85rem .85rem .1rem;
  }
}.surux-settings-system-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}.surux-settings-system-card {
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}.surux-settings-system-card > .surux-card-body {
  flex: 1 1 auto;
}.surux-settings-system-fields {
  min-width: 0;
  display: grid;
  gap: .85rem;
  align-content: start;
}.surux-settings-system-resources {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  /* The tiles are one more row of the card grid above, so they keep its gap rather than
     sitting flush against the last row of cards. */
  margin-top: 1rem;
}.surux-settings-system-resource {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .85rem 1rem;
  border: 1px solid var(--surux-border);
  border-radius: .58rem;
  background: color-mix(in srgb, var(--surux-surface) 88%, transparent);
  color: var(--surux-text);
  text-decoration: none;
  transition: border-color .16s ease, background-color .16s ease, transform .16s ease;
}.surux-settings-system-resource:hover {
  border-color: rgba(var(--surux-primary-rgb), .52);
  background: rgba(var(--surux-primary-rgb), .07);
  color: var(--surux-text);
  transform: translateY(-1px);
}.surux-settings-system-resource:focus-visible {
  outline: 3px solid rgba(var(--surux-primary-rgb), .24);
  outline-offset: 2px;
}.surux-settings-system-resource > span:last-child {
  min-width: 0;
  display: grid;
  gap: .12rem;
}.surux-settings-system-resource > span:last-child > span {
  color: var(--surux-muted);
  font-size: .8rem;
  line-height: 1.35;
}.surux-settings-system-resource-icon {
  flex: 0 0 auto;
  width: 2.35rem;
  height: 2.35rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(var(--surux-primary-rgb), .34);
  border-radius: 50%;
  background: rgba(var(--surux-primary-rgb), .09);
  color: var(--surux-primary);
}
@media (min-width: 900px) {
  .surux-settings-system-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Stack and unstack with the cards. Auto-fit kept the tiles two-up while the cards had
     already dropped to one column. */
  .surux-settings-system-resources {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1440px) {
  .surux-settings-system-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}.surux-settings-branding-card {
  min-width: 0;
  overflow: hidden;
}.surux-settings-branding-section {
  min-width: 0;
}.surux-settings-branding-section + .surux-settings-branding-section {
  margin-top: 1.35rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--surux-border);
}.surux-settings-branding-heading {
  margin-bottom: 1rem;
}.surux-settings-branding-list {
  display: grid;
  gap: .85rem;
  min-width: 0;
}.surux-settings-branding-item {
  display: grid;
  grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr);
  align-items: start;
  gap: 1.15rem;
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--surux-border);
  border-radius: .8rem;
  background: color-mix(in srgb, var(--surux-surface) 94%, var(--surux-surface-2) 6%);
}.surux-settings-branding-preview {
  display: grid;
  place-items: center;
  width: 100%;
  height: 8rem;
  min-width: 0;
  overflow: hidden;
  padding: .75rem;
  border: 1px dashed color-mix(in srgb, var(--surux-border) 78%, var(--surux-primary) 22%);
  border-radius: .7rem;
  background: color-mix(in srgb, var(--surux-surface-2) 82%, transparent);
  color: var(--surux-muted);
  text-align: center;
}.surux-settings-brand-colour-swatch {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 4rem;
  border-radius: .45rem;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}.surux-settings-branding-preview-image {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}.surux-settings-branding-details {
  display: grid;
  gap: .9rem;
  min-width: 0;
}.surux-settings-branding-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: .75rem;
  min-width: 0;
}.surux-settings-branding-actions form {
  min-width: 0;
  margin: 0;
}.surux-settings-branding-actions form:first-child {
  display: flex;
  flex: 1 1 28rem;
  flex-wrap: wrap;
  align-items: end;
  gap: .75rem;
}.surux-settings-branding-actions form:first-child > :first-child {
  flex: 1 1 20rem;
  min-width: 0;
}@media (max-width: 720px) {
  .surux-settings-branding-item {
    grid-template-columns: minmax(0, 1fr);
  }.surux-settings-branding-preview {
    height: 7rem;
  }
}.grid-column-span-2 {
  grid-column: 1 / -1;
}.grid-column-span-3 {
  grid-column: 1 / -1;
}.surux-page-shell > .surux-page-header > div {
  min-width: 0;
  flex: 1 1 auto;
  max-width: 100%;
}.surux-page-shell > .surux-page-header .surux-page-title-row {
  min-width: 0;
  max-width: 100%;
  flex-wrap: nowrap;
}.surux-page-shell > .surux-page-header .surux-page-title-row h1 {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  overflow-wrap: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: normal;
}.surux-page-shell > .surux-page-header .surux-page-title-row h1 > span {
  display: inline-block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  overflow-wrap: normal;
  text-overflow: ellipsis;
  vertical-align: bottom;
  white-space: nowrap;
  word-break: normal;
}.surux-page-shell > .surux-page-header .surux-page-title-row .surux-status-chip {
  flex: 0 0 auto;
}.surux-page-shell > .surux-tab-list {
  margin-bottom: .9rem;
}

@media (max-width: 720px) {.surux-form-grid {
    grid-template-columns: 1fr;
  }.grid-column-span-2,
  .grid-column-span-3 {
    grid-column: 1 / -1;
  }.surux-notes-composer-actions {
    flex-direction: column;
    align-items: stretch;
  }.surux-note-edit-form {
    min-width: 0;
  }.surux-note-replies,
  .surux-note-reply-form {
    margin-left: .5rem;
  }.surux-notes-add-button {
    width: 100%;
    justify-content: center;
  }
}.surux-workbench-panel {
  min-width: 0;
  min-height: 32rem;
  max-height: calc(100vh - 13.5rem);
  display: flex;
  flex-direction: column;
  gap: .8rem;
  padding: .95rem;
  border: var(--surux-border-width) solid color-mix(in srgb, var(--surux-border) 86%, rgba(var(--surux-primary-rgb), .18));
  border-radius: .72rem;
  background:
    linear-gradient(145deg, rgba(var(--surux-primary-rgb), .08), transparent 42%),
    color-mix(in srgb, var(--surux-surface) 94%, transparent);
  box-shadow: 0 .9rem 2.2rem rgba(0, 0, 0, .16);
  overflow: hidden;
}.surux-workbench-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .8rem;
  flex: 0 0 auto;
}.surux-workbench-panel-head h2,
.surux-workbench-section h3 {
  margin: 0;
  color: var(--surux-text);
  font-weight: 800;
  letter-spacing: 0;
}.surux-workbench-panel-head h2 {
  font-size: 1rem;
}.surux-workbench-panel-head span {
  color: var(--surux-muted);
  font-size: .82rem;
  font-weight: 650;
}.surux-workbench-section h3 {
  font-size: .78rem;
  letter-spacing: .065em;
  text-transform: uppercase;
}.surux-workbench-search {
  position: relative;
  flex: 0 0 auto;
}.surux-workbench-search i {
  position: absolute;
  left: .78rem;
  top: 50%;
  color: var(--surux-muted);
  transform: translateY(-50%);
  pointer-events: none;
}.surux-workbench-search .surux-input {
  padding-left: 2.35rem;
}.surux-workbench-child-events {
  min-height: 0;
  display: grid;
  gap: .58rem;
  overflow: auto;
  padding-right: .15rem;
}.surux-workbench-event-hero h2 {
  min-width: 0;
  color: var(--surux-text);
  font-weight: 850;
  overflow-wrap: anywhere;
}.surux-workbench-event-hero p,
.surux-workbench-child-events article span {
  color: var(--surux-muted);
  font-size: .82rem;
  overflow-wrap: anywhere;
}.surux-workbench-event-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: .95rem;
  border: 1px solid color-mix(in srgb, var(--surux-border) 84%, rgba(var(--surux-primary-rgb), .2));
  border-radius: .68rem;
  background:
    linear-gradient(135deg, rgba(var(--surux-primary-rgb), .11), transparent 52%),
    color-mix(in srgb, var(--surux-surface-2) 82%, transparent);
}.surux-workbench-event-hero > div:first-child {
  min-width: 0;
}.surux-workbench-event-hero > div:first-child > span {
  display: block;
  margin-bottom: .28rem;
  color: var(--surux-primary);
  font-size: .76rem;
  font-weight: 850;
  letter-spacing: .075em;
  text-transform: uppercase;
}.surux-workbench-event-hero h2 {
  margin: 0 0 .25rem;
  font-size: 1.15rem;
}.surux-workbench-event-hero p {
  margin: 0;
}.surux-workbench-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  padding: .7rem;
  border: 1px solid color-mix(in srgb, var(--surux-border) 76%, transparent);
  border-radius: .65rem;
  background: rgba(var(--surux-primary-rgb), .045);
}.surux-workbench-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .55rem .85rem;
}.surux-workbench-facts.is-compact {
  grid-template-columns: 1fr;
}.surux-workbench-facts div {
  min-width: 0;
  display: grid;
  gap: .14rem;
}.surux-workbench-facts dt {
  margin: 0;
  color: var(--surux-muted);
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .055em;
  text-transform: uppercase;
}.surux-workbench-facts dd {
  margin: 0;
  color: var(--surux-text);
  font-size: .88rem;
  font-weight: 650;
  overflow-wrap: anywhere;
}.surux-workbench-section {
  min-height: 0;
  display: grid;
  gap: .62rem;
}.surux-workbench-action-panel {
  padding: .68rem;
  border: 1px solid color-mix(in srgb, var(--surux-border) 78%, rgba(var(--surux-primary-rgb), .18));
  border-radius: .6rem;
  background: color-mix(in srgb, var(--surux-surface-2) 76%, transparent);
}.surux-workbench-action-heading {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .6rem;
  align-items: start;
}.surux-workbench-action-heading > div {
  min-width: 0;
  display: grid;
  gap: .18rem;
}.surux-workbench-action-heading strong {
  color: var(--surux-text);
  font-size: .95rem;
  font-weight: 850;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}.surux-workbench-action-strip {
  justify-content: flex-start;
  padding: 0;
}.surux-workbench-event {
  overflow: auto;
}.surux-workbench-child-events article {
  min-width: 0;
  display: grid;
  gap: .28rem;
  padding: .72rem;
  border: 1px solid color-mix(in srgb, var(--surux-border) 78%, transparent);
  border-radius: .56rem;
  background: rgba(0, 0, 0, .08);
}.surux-workbench-child-events article strong {
  color: var(--surux-text);
  font-weight: 800;
  overflow-wrap: anywhere;
}.surux-workbench-child-events article a {
  width: fit-content;
  color: var(--surux-primary);
  font-weight: 800;
  text-decoration: none;
}.surux-workbench-signal-panel {
  min-height: 0;
  display: grid;
  gap: .65rem;
  padding: .72rem;
  border: 1px solid color-mix(in srgb, var(--surux-border) 78%, transparent);
  border-radius: .65rem;
  background: rgba(0, 0, 0, .08);
}.surux-workbench-signal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}.surux-workbench-signal-header h3 {
  margin: 0;
  color: var(--surux-text);
  font-size: .92rem;
  font-weight: 850;
}.surux-workbench-signal-header p {
  margin: .14rem 0 0;
  color: var(--surux-muted);
  font-size: .78rem;
}.surux-workbench-signal-list {
  display: grid;
  gap: .5rem;
}.surux-workbench-signal {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--surux-border) 78%, rgba(var(--surux-primary-rgb), .1));
  border-radius: .58rem;
  background: rgba(var(--surux-primary-rgb), .045);
}.surux-workbench-signal.is-expanded {
  border-color: rgba(var(--surux-primary-rgb), .55);
}.surux-workbench-signal-row {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .8rem;
  align-items: center;
  padding: .7rem .75rem;
  border: 0;
  background: transparent;
  color: var(--surux-text);
  text-align: left;
}.surux-workbench-signal-row:hover,
.surux-workbench-signal-row:focus-visible {
  background: rgba(var(--surux-primary-rgb), .08);
  outline: 0;
}.surux-workbench-signal-row span {
  min-width: 0;
  display: grid;
  gap: .16rem;
}.surux-workbench-signal-row span:last-child {
  text-align: right;
}.surux-workbench-signal-row strong {
  color: var(--surux-text);
  font-weight: 850;
  overflow-wrap: anywhere;
}.surux-workbench-signal-row small,
.surux-workbench-signal-meta,
.surux-workbench-signal-empty,
.surux-workbench-signal-images figcaption {
  color: var(--surux-muted);
  font-size: .78rem;
}.surux-workbench-signal-detail {
  display: grid;
  gap: .65rem;
  padding: .7rem;
  border-top: 1px solid color-mix(in srgb, var(--surux-border) 70%, transparent);
}.surux-workbench-signal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .42rem;
}.surux-workbench-signal-meta span,
.surux-workbench-signal-meta a {
  display: inline-flex;
  align-items: center;
  min-height: 1.55rem;
  padding: .16rem .48rem;
  border: 1px solid rgba(var(--surux-primary-rgb), .18);
  border-radius: 999px;
  background: rgba(var(--surux-primary-rgb), .07);
  color: var(--surux-muted);
  font-weight: 750;
  text-decoration: none;
}.surux-workbench-signal-meta a {
  color: var(--surux-primary);
}.surux-workbench-signal-images {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: .65rem;
}.surux-workbench-signal-images figure {
  min-width: 0;
  display: grid;
  gap: .42rem;
  margin: 0;
}.surux-workbench-signal-images img,
.surux-workbench-signal-image-placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  border: 1px solid color-mix(in srgb, var(--surux-border) 80%, transparent);
  border-radius: .5rem;
  background: rgba(0, 0, 0, .18);
}.surux-workbench-signal-image-placeholder {
  display: grid;
  place-items: center;
  color: var(--surux-muted);
}.surux-workbench-signal-image-placeholder span {
  display: block;
  margin-top: .28rem;
}.surux-workbench-signal-empty {
  padding: .65rem .75rem;
  border: 1px dashed color-mix(in srgb, var(--surux-border) 72%, transparent);
  border-radius: .5rem;
  background: rgba(148, 163, 184, .055);
}.surux-workbench-modal-body {
  max-height: min(68vh, 42rem);
  overflow: auto;
}.surux-workbench-modal-form {
  display: grid;
  gap: .75rem;
}.surux-workbench-check {
  display: flex;
  align-items: center;
  gap: .58rem;
  padding: .72rem .82rem;
  border: 1px solid color-mix(in srgb, var(--surux-border) 78%, transparent);
  border-radius: .58rem;
  background: rgba(var(--surux-primary-rgb), .045);
  color: var(--surux-text);
  font-weight: 750;
}.surux-workbench-check input {
  width: 1.05rem;
  height: 1.05rem;
  flex: 0 0 auto;
}

@media (max-width: 1500px) {.surux-workbench-timeline {
    grid-column: 2 / 4;
    min-height: 18rem;
    max-height: 26rem;
  }
}

@media (max-width: 1120px) {.surux-workbench-response,
.surux-workbench-timeline {
    grid-column: auto;
  }
}

@media (max-width: 820px) {.surux-workbench-panel {
    display: none;
    max-height: none;
    min-height: 0;
    overflow: visible;
  }.surux-workbench-panel.is-mobile-active {
    display: grid;
  }.surux-workbench-child-events {
    overflow: visible;
    flex: initial;
  }.surux-workbench-facts {
    grid-template-columns: 1fr;
  }.surux-workbench-event-hero {
    grid-template-columns: 1fr;
  }.surux-workbench-event-hero {
    flex-direction: column;
  }.surux-workbench-actions .surux-command-button:not(.surux-command-button-icon-only) {
    width: 100%;
  }.surux-workbench-signal-header {
    align-items: stretch;
    flex-direction: column;
  }.surux-workbench-signal-row {
    grid-template-columns: 1fr;
  }.surux-workbench-signal-row span:last-child {
    text-align: left;
  }.surux-workbench-signal-images {
    grid-template-columns: 1fr;
  }
}

/* Shared page, date, search, and command standards. */
.surux-date-picker {
  position: relative;
  width: 100%;
  min-width: 0;
}

.surux-date-display {
  width: 100%;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .58rem .72rem;
  border: var(--surux-border-width) solid var(--surux-input-border);
  border-radius: var(--surux-radius-input);
  color: var(--surux-input-color);
  background: var(--surux-input-bg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
  text-align: left;
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease, color .16s ease;
}

.surux-date-display:hover,
.surux-date-display:focus-visible,
.surux-date-open .surux-date-display {
  border-color: color-mix(in srgb, var(--surux-primary) 68%, var(--surux-input-border));
  box-shadow:
    0 0 0 .18rem rgba(var(--surux-primary-rgb), .14),
    0 .55rem 1.2rem rgba(var(--surux-primary-rgb), .08),
    inset 0 1px 0 rgba(255, 255, 255, .08);
  outline: 0;
}

.surux-date-display > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.surux-date-display i {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--surux-primary);
  line-height: 1;
}

.surux-date-display:disabled,
.surux-date-display[disabled] {
  cursor: not-allowed;
  color: var(--surux-disabled-control-color);
  border-color: var(--surux-disabled-control-border);
  background: var(--surux-disabled-control-bg);
  box-shadow: var(--surux-disabled-control-shadow);
  opacity: 1;
}

.surux-date-display:disabled i,
.surux-date-display[disabled] i {
  color: var(--surux-disabled-control-icon);
}

.surux-date-popover {
  position: absolute;
  inset-block-start: calc(100% + .42rem);
  inset-inline-start: 0;
  z-index: 2300;
  width: min(20rem, calc(100vw - 2rem));
}

.surux-date-open-above .surux-date-popover {
  inset-block-start: auto;
  inset-block-end: calc(100% + .42rem);
}

.surux-date-align-end .surux-date-popover {
  inset-inline-start: auto;
  inset-inline-end: 0;
}

/* The popover is measured from its rendered width before it is placed, so the month count has to
   reach it through CSS rather than through the placement code. */
.surux-date-picker[data-surux-date-months="2"] .surux-date-popover {
  width: min(38rem, calc(100vw - 2rem));
}

.surux-date-picker[data-surux-date-months="3"] .surux-date-popover {
  width: min(56rem, calc(100vw - 2rem));
}

.surux-date-picker[data-surux-date-months="4"] .surux-date-popover {
  width: min(74rem, calc(100vw - 2rem));
}

/* Below this there is no room for a second month beside the first, so the popover goes back to the
   width of one and the months stack. */
@media (max-width: 767.98px) {
  .surux-date-picker[data-surux-date-months] .surux-date-popover {
    width: min(20rem, calc(100vw - 2rem));
  }
}

.surux-date-popover[hidden] {
  display: none !important;
}

.surux-date-popover[popover]:popover-open {
  position: fixed;
  inset: auto;
  box-sizing: border-box;
  max-width: calc(100vw - 1.5rem);
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
}

.surux-date-popover[popover]:popover-open.surux-date-popover-constrained {
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.surux-date-calendar {
  display: grid;
  gap: .72rem;
  padding: .8rem;
  border: var(--surux-border-width) solid rgba(var(--surux-primary-rgb), .28);
  border-radius: .72rem;
  color: var(--surux-text);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .08), transparent 42%),
    color-mix(in srgb, var(--surux-surface) 96%, #000 4%);
  box-shadow: 0 1rem 2.4rem rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .12);
}

.surux-date-calendar-head {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) 2rem;
  align-items: center;
  gap: .5rem;
}

.surux-date-calendar-title {
  min-width: 0;
  overflow: hidden;
  color: var(--surux-text);
  font-size: .95rem;
  font-weight: 850;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

button.surux-date-calendar-title {
  width: 100%;
  min-height: 2rem;
  padding: 0 .35rem;
  border: 1px solid transparent;
  border-radius: .46rem;
  background: transparent;
  font: inherit;
  font-size: .95rem;
  font-weight: 850;
  cursor: pointer;
}

.surux-date-nav,
.surux-date-today,
.surux-date-clear,
.surux-date-day {
  border: 1px solid transparent;
  border-radius: .46rem;
  color: var(--surux-text);
  background: transparent;
  line-height: 1;
  transition: border-color .16s ease, background-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.surux-date-nav {
  width: 2rem;
  height: 2rem;
  display: inline-grid;
  place-items: center;
  color: var(--surux-muted);
}

.surux-date-nav:hover,
.surux-date-nav:focus-visible,
button.surux-date-calendar-title:hover,
button.surux-date-calendar-title:focus-visible,
.surux-date-day:hover,
.surux-date-day:focus-visible,
.surux-date-today:hover,
.surux-date-today:focus-visible,
.surux-date-clear:hover,
.surux-date-clear:focus-visible {
  border-color: rgba(var(--surux-primary-rgb), .36);
  color: var(--surux-text);
  background: rgba(var(--surux-primary-rgb), .12);
  outline: 0;
}

.surux-date-months {
  display: grid;
  grid-template-columns: repeat(var(--surux-date-month-count, 1), minmax(0, 1fr));
  gap: 1rem;
}

.surux-date-month {
  display: grid;
  align-content: start;
  gap: .5rem;
}

.surux-date-month-caption {
  color: var(--surux-muted);
  font-size: .74rem;
  font-weight: 850;
  text-align: center;
  text-transform: uppercase;
}

@media (max-width: 767.98px) {
  .surux-date-months {
    grid-template-columns: minmax(0, 1fr);
  }
}

.surux-date-weekdays,
.surux-date-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: .28rem;
}

.surux-date-weekdays span {
  color: var(--surux-muted);
  font-size: .68rem;
  font-weight: 850;
  text-align: center;
  text-transform: uppercase;
}

.surux-date-day {
  min-width: 0;
  min-height: 2.1rem;
  display: inline-grid;
  place-items: center;
  font-size: .84rem;
  font-weight: 750;
}

/* An adjacent month's day recedes rather than disappears: still readable, still clickable, but
   never mistaken for a day of the month named above it. Ordered ahead of is-today, is-selected and
   is-disabled so those keep winning the tie on equal specificity. */
.surux-date-day.is-outside {
  color: color-mix(in srgb, var(--surux-muted) 78%, transparent);
  font-weight: 650;
}

.surux-date-day.is-outside:hover,
.surux-date-day.is-outside:focus-visible {
  color: var(--surux-text);
}

.surux-date-day.is-today {
  border-color: rgba(var(--surux-primary-rgb), .36);
  color: var(--surux-primary);
}

.surux-date-day.is-selected {
  border-color: color-mix(in srgb, var(--surux-primary-action-bg) 76%, white);
  color: var(--surux-primary-contrast);
  background: var(--surux-primary-action-bg);
  box-shadow: 0 .55rem 1.1rem rgba(var(--surux-primary-rgb), .24);
}

.surux-date-day.is-selected:focus-visible {
  box-shadow:
    0 0 0 2px var(--surux-surface),
    0 0 0 .3rem var(--surux-slate-focus-ring, rgba(var(--surux-primary-rgb), 1)),
    0 .55rem 1.1rem rgba(var(--surux-primary-rgb), .24);
}

.surux-date-day.is-disabled,
.surux-date-day:disabled {
  cursor: not-allowed;
  color: color-mix(in srgb, var(--surux-muted) 62%, transparent);
  background: transparent;
  box-shadow: none;
  opacity: .7;
}

.surux-date-calendar-foot {
  display: flex;
  align-items: center;
  gap: .5rem;
  justify-content: flex-end;
}

.surux-month-popover {
  width: min(21rem, calc(100vw - 2rem));
}

.surux-month-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .42rem;
}

.surux-month-option {
  min-width: 0;
  min-height: 2.65rem;
  padding: .5rem .35rem;
  border: 1px solid transparent;
  border-radius: .5rem;
  color: var(--surux-text);
  background: color-mix(in srgb, var(--surux-surface-raised, var(--surux-surface)) 88%, transparent);
  font-size: .8rem;
  font-weight: 780;
  line-height: 1.1;
  transition: border-color .16s ease, background-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.surux-month-option:hover,
.surux-month-option:focus-visible {
  border-color: rgba(var(--surux-primary-rgb), .42);
  color: var(--surux-text);
  background: rgba(var(--surux-primary-rgb), .12);
  outline: 0;
}

.surux-month-option.is-current {
  border-color: rgba(var(--surux-primary-rgb), .4);
  color: var(--surux-primary);
}

.surux-month-option.is-selected {
  border-color: color-mix(in srgb, var(--surux-primary-action-bg) 76%, white);
  color: var(--surux-primary-contrast);
  background: var(--surux-primary-action-bg);
  box-shadow: 0 .55rem 1.1rem rgba(var(--surux-primary-rgb), .24);
}

.surux-month-option.is-disabled,
.surux-month-option:disabled {
  cursor: not-allowed;
  color: color-mix(in srgb, var(--surux-muted) 62%, transparent);
  background: transparent;
  box-shadow: none;
  opacity: .7;
}

.surux-date-today {
  min-height: 2rem;
  padding: 0 .72rem;
  color: var(--surux-primary);
  font-weight: 850;
}

/* Clearing is not the calendar's main job, so it sits apart from Today rather than beside it in
   the same weight: same target size and the same focus treatment, muted until it is wanted. */
.surux-date-clear {
  min-height: 2rem;
  margin-right: auto;
  padding: 0 .72rem;
  color: var(--surux-muted);
  font-weight: 650;
}

.surux-date-today:disabled {
  cursor: not-allowed;
  color: var(--surux-muted);
  opacity: .7;
}

/* One keyboard focus mark for every calendar control. It is an outline, so no design's box-shadow finish can remove it. */
:is(.surux-date-nav, .surux-date-today, .surux-date-clear, .surux-date-day, .surux-month-option):focus-visible,
button.surux-date-calendar-title:focus-visible {
  outline: 2px solid var(--surux-slate-focus-ring, rgba(var(--surux-primary-rgb), 1));
  outline-offset: 2px;
}

@media (forced-colors: active) {
  :is(.surux-date-day, .surux-month-option).is-selected {
    forced-color-adjust: none;
    border-color: Highlight;
    background: Highlight;
    color: HighlightText;
  }
}

.surux-datetime-popover {
  width: min(21rem, calc(100vw - 2rem));
}

.surux-datetime-time {
  display: grid;
  grid-template-columns: 1fr 4.4rem auto 4.4rem;
  align-items: center;
  gap: .45rem;
  padding-top: .72rem;
  border-top: 1px solid var(--surux-border);
}

.surux-datetime-time label {
  color: var(--surux-muted);
  font-size: .75rem;
  font-weight: 850;
  text-transform: uppercase;
}

.surux-datetime-time select {
  min-height: 2.3rem;
  padding: .3rem .55rem;
  border: 1px solid var(--surux-input-border);
  border-radius: .46rem;
  color: var(--surux-input-color);
  background: var(--surux-input-bg);
}

.surux-datetime-apply {
  min-height: 2rem;
  padding: 0 .8rem;
  border: 1px solid var(--surux-primary);
  border-radius: .46rem;
  color: #fff;
  background: var(--surux-primary);
  font-weight: 850;
}

.surux-datetime-apply:hover,
.surux-datetime-apply:focus-visible {
  filter: brightness(1.08);
  outline: 0;
}

.surux-control-trailing-action .surux-toolbar-filter-toggle.d-lg-none,
.surux-toolbar-filter-toggle.d-lg-none {
  display: none !important;
}

@media (max-width: 991.98px), (hover: none) and (pointer: coarse) and (max-width: 1599.98px) {
  .surux-control-trailing-action .surux-toolbar-filter-toggle.d-lg-none,
  .surux-toolbar-filter-toggle.d-lg-none {
    display: inline-grid !important;
  }
}

@media (min-width: 992px) {
  .surux-control-trailing-action .surux-toolbar-filter-toggle.d-lg-none,
  .surux-toolbar-filter-toggle.d-lg-none {
    display: none !important;
  }
}

.surux-page-shell {
  --surux-command-bar-height: 0px;
  --surux-command-bottom-gap: 1rem;
  --surux-bulk-selection-bar-reserve: 3.5rem;
  --surux-list-footer-height: 2.75rem;
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  min-height: 0;
}

.surux-page-shell.surux-page-shell-has-actions {
  --surux-command-bar-height: var(--surux-command-bar-measured-height, 74px);
  --surux-command-bottom-gap: 1.15rem;
}

.surux-content:has(> .surux-page-shell.surux-page-shell-has-actions) {
  margin-bottom: var(
    --surux-command-bar-measured-height,
    calc(74px + env(safe-area-inset-bottom, 0px))
  );
}

body.surux-workflow-drag-active {
  cursor: grabbing;
  user-select: none;
}

body.surux-workflow-drag-active [data-surux-workflow-card="true"] {
  cursor: grabbing !important;
}

@media (hover: none) and (pointer: coarse) {
  .surux-page-shell.surux-page-shell-has-actions {
    --surux-command-bottom-gap: 1.25rem;
  }
}

.surux-page-shell .surux-tab-list {
  gap: .34rem;
  margin-top: .2rem;
  margin-bottom: .95rem;
  --surux-page-tab-list-gap: .95rem;
  padding-inline: .05rem;
  scroll-padding-inline: .35rem;
}

.surux-page-shell .surux-tab-button {
  min-height: 42px;
  padding: .58rem .92rem .66rem;
}

@media (min-width: 992px) {
  .surux-content:has(.surux-page-shell) {
    min-height: 0;
    overflow: hidden;
    padding-bottom: 0;
  }

  .surux-page-shell {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 1.5rem 1.5rem 1rem;
  }

  .surux-page-shell.surux-workflow-board-page {
    padding-block: 1rem .75rem;
  }

  .surux-workflow-board-page > .surux-page-header,
  .surux-workflow-board-page > .surux-page-lead {
    margin-bottom: var(--surux-section-gap);
  }

  .surux-workflow-board-page > .surux-toolbar {
    margin-bottom: var(--surux-section-gap);
    padding: var(--surux-page-search-padding);
  }

  .surux-page-shell > .surux-breadcrumb-nav,
  .surux-page-shell > .surux-page-header,
  .surux-page-shell > .surux-header-band,
  .surux-page-shell > .surux-page-lead,
  .surux-page-shell > .surux-toolbar,
  .surux-page-shell > .surux-tabs {
    flex: 0 0 auto;
  }

  .surux-page-shell > .surux-page-content {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: .85rem;
    overflow-x: hidden;
    overflow-y: auto;
    padding: .25rem .25rem var(--surux-command-bottom-gap);
    scroll-padding-bottom: var(--surux-command-bottom-gap);
  }

  .surux-page-shell[data-surux-device-health-page="true"] > .surux-page-content.surux-device-health-content {
    overflow: hidden;
    padding-bottom: .25rem;
    scroll-padding-bottom: .25rem;
  }

  .surux-page-shell > .surux-page-content > .surux-edit-section {
    flex: 0 0 auto;
  }

  .surux-workflow-board-page > .surux-page-content {
    overflow: hidden;
    padding-bottom: .15rem;
  }

  .surux-page-shell:not(.surux-page-shell-has-actions) > .surux-page-content {
    padding-bottom: .25rem;
    scroll-padding-bottom: .25rem;
  }

  /* Standalone list cards share the search card gutter; edit content retains its focus inset. */
  .surux-page-shell > .surux-page-content:has(> .surux-data-table-card) {
    padding-top: 0;
    padding-inline: 0;
    gap: var(--surux-section-gap);
  }

  /* TR-0000334. A dedicated list grows with its table so the page is the only
     desktop vertical scroller. The search band is already outside that
     scroller. The pager is the table card's sticky footer so the card closes.
     Collection workspaces keep FillAvailableHeight and their own bounded scrollport. */
  .surux-page-shell:has(> .surux-page-content > .surux-data-table-card:not(.surux-data-table-fill-height)) > .surux-toolbar {
    position: sticky;
    top: 0;
    z-index: 12;
  }

  .surux-data-table-list:not(.surux-data-table-fill-height) > .surux-list-footer {
    position: sticky;
    bottom: 0;
    z-index: 11;
    margin-top: 0;
    min-height: var(--surux-list-footer-height);
    padding-block: .5rem;
    background: var(--surux-surface);
    border-top: 1px solid var(--surux-border);
    border-radius: 0 0 var(--surux-band-radius) var(--surux-band-radius);
  }

  .surux-page-shell > .surux-page-content:not(:has(> .surux-tabs)):has(> .surux-data-table-card:not(.surux-data-table-fill-height) > .surux-list-footer) {
    scroll-padding-bottom: var(--surux-list-footer-height);
  }

  .surux-page-shell > .surux-tabs,
  .surux-page-shell > .surux-page-content:has(> .surux-tabs),
  .surux-page-shell > .surux-page-content > .surux-tabs {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .surux-page-shell > .surux-page-content:has(> .surux-tabs) {
    gap: 0;
    overflow: hidden;
    padding: .25rem;
  }

  .surux-page-shell > .surux-tabs > .surux-tab-list,
  .surux-page-shell > .surux-page-content > .surux-tabs > .surux-tab-list {
    flex: 0 0 auto;
  }

  .surux-page-shell > .surux-tabs > .surux-tab-panels,
  .surux-page-shell > .surux-page-content > .surux-tabs > .surux-tab-panels {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    /* Block-end keeps the lower shadow room. Block-start uses only the upward reach, so the
       first section is not padded by the downward room. Inline-end uses the shadow's forward
       horizontal reach (--surux-tab-panel-shadow-inline-room). Inline-start stays .35rem so
       the two inline sides together cannot push SuruXEditWorkspace under 72rem at 1536px with
       the rail pinned and a 17px scrollbar gutter. Default and Flat leave the tokens unset,
       so the start stays .35rem and the end stays .85rem. Vertical desktop tabs use this same panel. */
    padding-block-start: max(.35rem, var(--surux-tab-panel-shadow-start-room, 0px));
    padding-inline-end: max(.85rem, var(--surux-tab-panel-shadow-inline-room, 0px));
    padding-block-end: max(.85rem, var(--surux-tab-panel-shadow-room, 0px));
    padding-inline-start: .35rem;
    scroll-padding-bottom: var(--surux-command-bottom-gap);
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
  }

  /* A wide empty state fills the tab panel's content box. The panel padding is the shadow room. */
  .surux-page-shell > .surux-tabs > .surux-tab-panels .surux-empty-state-shell.surux-card-size-wide,
  .surux-page-shell > .surux-page-content > .surux-tabs > .surux-tab-panels .surux-empty-state-shell.surux-card-size-wide {
    max-width: min(64rem, 100%);
  }

  .surux-page-shell > .surux-tabs > .surux-tab-panels > form,
  .surux-page-shell > .surux-page-content > .surux-tabs > .surux-tab-panels > form,
  .surux-page-shell > .surux-tabs > .surux-tab-panels > .surux-tab-panel,
  .surux-page-shell > .surux-page-content > .surux-tabs > .surux-tab-panels > .surux-tab-panel {
    max-width: 100%;
    min-width: 0;
  }

  .surux-page-shell.surux-page-shell-has-actions > .surux-tabs > .surux-tab-panels > form > .surux-tab-panel,
  .surux-page-shell.surux-page-shell-has-actions > .surux-page-content > .surux-tabs > .surux-tab-panels > form > .surux-tab-panel,
  .surux-page-shell.surux-page-shell-has-actions > .surux-tabs > .surux-tab-panels > .surux-tab-panel,
  .surux-page-shell.surux-page-shell-has-actions > .surux-page-content > .surux-tabs > .surux-tab-panels > .surux-tab-panel {
    padding-bottom: var(--surux-command-bottom-gap);
  }

  .surux-page-shell:not(:has(> .surux-page-content > .surux-tabs)):has(> .surux-page-content .surux-list-footer:last-child),
  .surux-page-shell:has(> .surux-tabs > .surux-tab-panels > .surux-tab-panel.active .surux-list-footer:last-child),
  .surux-page-shell:has(> .surux-tabs > .surux-tab-panels > form > .surux-tab-panel.active .surux-list-footer:last-child),
  .surux-page-shell:has(> .surux-page-content > .surux-tabs > .surux-tab-panels > .surux-tab-panel.active .surux-list-footer:last-child),
  .surux-page-shell:has(> .surux-page-content > .surux-tabs > .surux-tab-panels > form > .surux-tab-panel.active .surux-list-footer:last-child) {
    padding-bottom: .35rem;
  }

  .surux-page-shell > .surux-page-content:not(.surux-page-content-sections):not(:has(> .surux-tabs)):has(.surux-list-footer:last-child) {
    padding-bottom: .35rem;
    scroll-padding-bottom: .35rem;
  }

  .surux-page-shell > .surux-page-content:has(> .surux-tabs > .surux-tab-panels > .surux-tab-panel.active .surux-list-footer:last-child),
  .surux-page-shell > .surux-page-content:has(> .surux-tabs > .surux-tab-panels > form > .surux-tab-panel.active .surux-list-footer:last-child) {
    padding-bottom: .35rem;
  }

  .surux-page-shell > .surux-tabs > .surux-tab-panels:has(> .surux-tab-panel.active .surux-list-footer:last-child),
  .surux-page-shell > .surux-tabs > .surux-tab-panels:has(> form > .surux-tab-panel.active .surux-list-footer:last-child),
  .surux-page-shell > .surux-page-content > .surux-tabs > .surux-tab-panels:has(> .surux-tab-panel.active .surux-list-footer:last-child),
  .surux-page-shell > .surux-page-content > .surux-tabs > .surux-tab-panels:has(> form > .surux-tab-panel.active .surux-list-footer:last-child) {
    padding-bottom: max(.35rem, var(--surux-tab-panel-shadow-room, 0px));
    scroll-padding-bottom: .35rem;
  }

  .surux-page-shell.surux-page-shell-has-actions > .surux-tabs > .surux-tab-panels > form > .surux-tab-panel.active:has(.surux-list-footer:last-child),
  .surux-page-shell.surux-page-shell-has-actions > .surux-page-content > .surux-tabs > .surux-tab-panels > form > .surux-tab-panel.active:has(.surux-list-footer:last-child),
  .surux-page-shell.surux-page-shell-has-actions > .surux-tabs > .surux-tab-panels > .surux-tab-panel.active:has(.surux-list-footer:last-child),
  .surux-page-shell.surux-page-shell-has-actions > .surux-page-content > .surux-tabs > .surux-tab-panels > .surux-tab-panel.active:has(.surux-list-footer:last-child) {
    padding-bottom: 0;
  }

  .surux-card:has(> .surux-card-body:last-child > .surux-list-footer:last-child) {
    padding-bottom: .35rem;
  }

  .surux-page-shell .surux-tab-panels:has(> .surux-collection-tab.active .surux-collection-workspace),
  .surux-page-shell .surux-tab-panels:has(> .surux-account-transactions-tab-panel.active > .surux-account-transactions-panel-grid) {
    overflow-y: hidden;
  }

  .surux-account-transactions-tab-panel.active:has(> .surux-account-transactions-panel-grid) {
    box-sizing: border-box;
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  .surux-account-transactions-panel-grid {
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden;
  }

  .surux-account-transactions-panel-grid > .surux-account-transactions-panel-header {
    min-width: 0;
  }

  .surux-account-transactions-panel-grid > .surux-account-transactions-table {
    height: 100%;
    min-height: 0;
  }

  .surux-account-transactions-panel-grid > .surux-account-transactions-table .surux-data-table-scroll {
    scrollbar-gutter: stable;
  }

  /* TR-0000184. A list-type tab grows with its table so the page is the only
     desktop scroll container. Collection workspaces and the contacts roster
     keep their own bounded scrollports. Phone layout is unchanged. */
  .surux-page-shell:has(.surux-tabs.surux-tabs-panel-kind-list) > .surux-page-content:has(> .surux-tabs),
  .surux-page-shell:has(.surux-tab-panel.active.surux-tab-panel-list) > .surux-page-content:has(> .surux-tabs) {
    overflow-x: hidden;
    overflow-y: auto;
  }

  .surux-page-shell:has(> .surux-tabs.surux-tabs-panel-kind-list),
  .surux-page-shell:has(> .surux-tabs > .surux-tab-panels > .surux-tab-panel.active.surux-tab-panel-list),
  .surux-page-shell:has(> .surux-tabs > .surux-tab-panels > form > .surux-tab-panel.active.surux-tab-panel-list) {
    overflow-x: hidden;
    overflow-y: auto;
  }

  .surux-page-shell:has(.surux-tabs.surux-tabs-panel-kind-list) > .surux-tabs,
  .surux-page-shell:has(.surux-tabs.surux-tabs-panel-kind-list) > .surux-page-content > .surux-tabs,
  .surux-page-shell:has(.surux-tab-panel.active.surux-tab-panel-list) > .surux-tabs,
  .surux-page-shell:has(.surux-tab-panel.active.surux-tab-panel-list) > .surux-page-content > .surux-tabs {
    flex: 0 0 auto;
    height: auto;
    max-height: none;
    overflow: visible;
  }

  .surux-page-shell:has(.surux-tabs.surux-tabs-panel-kind-list) > .surux-tabs > .surux-tab-panels,
  .surux-page-shell:has(.surux-tabs.surux-tabs-panel-kind-list) > .surux-page-content > .surux-tabs > .surux-tab-panels,
  .surux-page-shell:has(.surux-tab-panel.active.surux-tab-panel-list) > .surux-tabs > .surux-tab-panels,
  .surux-page-shell:has(.surux-tab-panel.active.surux-tab-panel-list) > .surux-page-content > .surux-tabs > .surux-tab-panels {
    flex: 0 0 auto;
    height: auto;
    max-height: none;
    overflow: visible;
  }

  .surux-tabs-panel-kind-list > .surux-tab-panels > .surux-tab-panel,
  .surux-tabs-panel-kind-list > .surux-tab-panels > form > .surux-tab-panel,
  .surux-tab-panel-list {
    max-height: none;
    overflow: visible;
  }

  .surux-page-shell:has(.surux-tabs.surux-tabs-panel-kind-list .surux-bulk-selection-bar) > .surux-page-content:has(> .surux-tabs),
  .surux-page-shell:has(.surux-tab-panel.active.surux-tab-panel-list .surux-bulk-selection-bar) > .surux-page-content:has(> .surux-tabs),
  .surux-page-shell:has(> .surux-tabs.surux-tabs-panel-kind-list .surux-bulk-selection-bar),
  .surux-page-shell:has(> .surux-tabs > .surux-tab-panels > .surux-tab-panel.active.surux-tab-panel-list .surux-bulk-selection-bar) {
    padding-bottom: var(--surux-bulk-selection-bar-reserve);
  }

  .surux-tabs-panel-kind-list .surux-bulk-selection-bar,
  .surux-tab-panel-list .surux-bulk-selection-bar {
    top: auto;
    bottom: 0;
  }
}

@media (max-width: 991.98px) {
  .surux-content:has(.surux-page-shell) {
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .surux-page-shell {
    height: auto;
    min-height: 100%;
    display: block;
    overflow: visible;
    /* Block-end keeps the design shadow room. Default leaves the token unset, so the gap stays. */
    padding: .8rem .75rem max(var(--surux-command-bottom-gap), var(--surux-tab-panel-shadow-room, 0px));
    scroll-padding-bottom: var(--surux-command-bottom-gap);
  }

  .surux-page-shell.surux-page-shell-has-actions:has(> .surux-tabs),
  .surux-page-shell.surux-page-shell-has-actions:has(> .surux-page-content > .surux-tabs) {
    padding-bottom: max(.8rem, var(--surux-tab-panel-shadow-room, 0px));
  }

  .surux-page-shell > .surux-page-content,
  .surux-page-shell > .surux-tabs,
  .surux-page-shell > .surux-page-content > .surux-tabs,
  .surux-page-shell .surux-tab-panels {
    display: block;
    min-height: 0;
    overflow: visible;
  }

  .surux-page-shell > .surux-page-content {
    gap: .7rem;
    padding: 0;
  }

  .surux-page-shell.surux-page-shell-has-actions > .surux-tabs > .surux-tab-panels > form > .surux-tab-panel,
  .surux-page-shell.surux-page-shell-has-actions > .surux-page-content > .surux-tabs > .surux-tab-panels > form > .surux-tab-panel,
  .surux-page-shell.surux-page-shell-has-actions > .surux-tabs > .surux-tab-panels > .surux-tab-panel,
  .surux-page-shell.surux-page-shell-has-actions > .surux-page-content > .surux-tabs > .surux-tab-panels > .surux-tab-panel {
    padding-bottom: var(--surux-command-bottom-gap);
  }

  .surux-page-shell .surux-tab-list {
    gap: .22rem;
    margin-bottom: .82rem;
    --surux-page-tab-list-gap: .82rem;
  }

  .surux-page-shell .surux-tab-button {
    padding: .55rem .76rem .62rem;
  }
}

.surux-tabs > .surux-tab-list-hierarchy {
  display: grid;
  position: relative;
  grid-template-columns: repeat(var(--surux-tab-count), max-content) minmax(0, 1fr);
  align-content: start;
  align-items: end;
  row-gap: 16px;
  border-bottom: 0;
  container-type: inline-size;
}

/* Out of flow: a row-1 item spanning every column pushes parent tabs into implicit columns. */
.surux-tabs > .surux-tab-list-hierarchy::after {
  content: "";
  position: absolute;
  grid-row: 1;
  grid-column: 1 / -1;
  align-self: end;
  justify-self: stretch;
  top: calc(var(--surux-tab-divider-y, 0px) - 1px);
  left: calc(-1 * var(--surux-tab-divider-inset, 0px));
  right: calc(-1 * var(--surux-tab-divider-inset, 0px));
  height: 1px;
  background: var(--surux-border);
  pointer-events: none;
  z-index: 2;
}

.surux-tab-list-hierarchy > .surux-tab-folder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
  display: none;
}

.surux-tab-list-hierarchy > .surux-tab-button {
  grid-row: 1;
  position: relative;
  z-index: 1;
  margin-bottom: 0;
  border-bottom-color: transparent;
}

.surux-tab-list-hierarchy > .surux-tab-button.active,
.surux-tab-list-hierarchy > .surux-tab-button[aria-selected="true"] {
  border-bottom-color: var(--surux-primary);
}

.surux-tab-sublist {
  grid-row: 2;
  grid-column: 1 / -1;
  position: relative;
  z-index: 1;
  display: flex;
  gap: .2rem;
  min-width: min-content;
  width: max-content;
  max-width: calc(100% - var(--surux-tab-lane-x, 0px));
  margin-top: 0;
  margin-inline-start: var(--surux-tab-lane-x, 0px);
  padding: 4px;
  overflow: visible;
  border: 1px solid var(--surux-tab-folder-edge, color-mix(in srgb, var(--surux-primary) 32%, transparent));
  border-radius: var(--surux-tab-folder-lane-radius, var(--surux-radius-pill));
  background: var(--surux-tab-folder-fill, color-mix(in srgb, var(--surux-primary) 12%, transparent));
}

.surux-tab-sublist > .surux-tab-button {
  box-sizing: border-box;
  min-height: 32px;
  height: 32px;
  margin-bottom: 0;
  padding: 0 .85rem;
  border-width: 0;
  border-bottom-width: 0;
  border-radius: var(--surux-radius-chip);
  background: transparent;
  box-shadow: none;
  color: var(--surux-muted);
}

.surux-tab-sublist > .surux-tab-button:hover {
  background: transparent;
  box-shadow: none;
  color: var(--surux-text);
}

.surux-tabs .surux-tab-sublist > .surux-tab-button:focus-visible {
  outline: 2px solid var(--surux-primary);
  outline-offset: 2px;
  background: transparent;
  box-shadow: none;
  color: var(--surux-text);
}

.surux-tab-sublist > .surux-tab-button.active,
.surux-tab-sublist > .surux-tab-button[aria-selected="true"] {
  border-width: 0;
  border-bottom-width: 0;
  border-radius: var(--surux-radius-chip);
  background: var(--surux-surface);
  color: var(--surux-text);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 0 0 1px var(--surux-border);
}

.surux-tabs .surux-tab-sublist > .surux-tab-button.active:focus-visible,
.surux-tabs .surux-tab-sublist > .surux-tab-button[aria-selected="true"]:focus-visible {
  background: var(--surux-surface);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 0 0 1px var(--surux-border);
}

.surux-tab-sublist.surux-tab-lane-scroll {
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}

@media (max-width: 767.98px) {
  .surux-tabs > .surux-tab-list-hierarchy > .surux-tab-sublist {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    width: 100cqi;
    max-width: 100cqi;
    min-width: 0;
    box-sizing: border-box;
    margin: 0;
    padding: 8px;
    position: sticky;
    left: 0;
    overflow: visible;
    border: 1px solid var(--surux-tab-folder-edge, color-mix(in srgb, var(--surux-primary) 32%, transparent));
    border-radius: var(--surux-tab-folder-radius, 12px);
    background: var(--surux-tab-folder-fill, color-mix(in srgb, var(--surux-primary) 12%, transparent));
  }

  .surux-tabs > .surux-tab-list-hierarchy > .surux-tab-sublist > .surux-tab-button {
    justify-content: center;
    height: 40px;
    min-height: 40px;
    min-width: 0;
    max-width: none;
    margin: 0;
    padding: 0 .6rem;
    border-width: 0;
    border-radius: 10px;
    background: transparent;
    box-shadow: none;
  }

  .surux-tabs > .surux-tab-list-hierarchy > .surux-tab-sublist > .surux-tab-button > span:not(.surux-tab-badge) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.6;
  }

  .surux-tabs > .surux-tab-list-hierarchy > .surux-tab-sublist > .surux-tab-button.active,
  .surux-tabs > .surux-tab-list-hierarchy > .surux-tab-sublist > .surux-tab-button[aria-selected="true"] {
    background: var(--surux-surface);
    color: var(--surux-text);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 0 0 1px var(--surux-border);
  }

  .surux-tabs > .surux-tab-list.surux-tab-list-hierarchy {
    row-gap: 0;
  }
}

@media (min-width: 992px) {
  .surux-tabs.surux-tabs-orientation-horizontal > .surux-tab-list-hierarchy {
    overflow: visible;
  }
}

/* Below 992px a scrolling strip clips an outer drop-shadow on the block end. Room defaults to
   0, so Default and every design without a shadow keep the tab-list gap (1rem, .95rem in the
   page shell, .82rem below 992px). Clay sets --surux-tab-folder-shadow-room to the shadow
   extent; block-end padding makes room and the margin gives that extent back so the gap under
   the strip stays the same. Inline-end room is not added: on a phone it shrinks P1 below the
   content column, and below 992px it replaces the page shell's .05rem inline padding. The
   shadow's 4px inline offset is the lesser clip. */
@media (max-width: 991.98px) {
  .surux-tabs > .surux-tab-list.surux-tab-list-hierarchy {
    padding-block-end: var(--surux-tab-folder-shadow-room, 0px);
    margin-block-end: calc(var(--surux-page-tab-list-gap, 1rem) - var(--surux-tab-folder-shadow-room, 0px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .surux-tab-sublist,
  .surux-tab-sublist > .surux-tab-button {
    transition: none;
  }

  .surux-tab-button > .surux-tab-disclosure {
    transition: color .16s ease;
  }
}

@media (min-width: 992px) {
  html[data-surux-desktop-tab-orientation="vertical"] .surux-tabs:not([data-surux-tabs-orientation-policy="horizontal-only"]),
  .surux-tabs.surux-tabs-orientation-vertical:not([data-surux-tabs-orientation-policy="horizontal-only"]) {
    --surux-tab-rail-expanded-width: clamp(11.5rem, 17vw, 16rem);
    /* One inset, target and icon size for every rail state, so opening, pinning and
       collapsing never move an icon: the open panel is laid out from the collapsed strip. */
    --surux-tab-rail-inset: .25rem;
    --surux-tab-rail-item-size: 2.75rem;
    --surux-tab-rail-icon-size: 1.15rem;
    --surux-tab-rail-row-gap: .35rem;
    --surux-tab-rail-collapsed-width: calc(var(--surux-tab-rail-item-size) + 2 * var(--surux-tab-rail-inset));
    --surux-tab-rail-toggle-size: 2.25rem;
    /* Width of the panel border in the current state; the inset is measured from the outer edge. */
    --surux-tab-rail-frame: 0px;
    display: grid;
    grid-template-columns: var(--surux-tab-rail-expanded-width) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    column-gap: 1rem;
    position: relative;
    min-width: 0;
    min-height: 0;
    /* Switch geometry together so labels do not wrap through intermediate widths. */
  }

  .surux-tabs.surux-tabs-orientation-vertical.surux-tabs-rail-collapsible.is-tab-rail-collapsed {
    grid-template-columns: var(--surux-tab-rail-collapsed-width) minmax(0, 1fr);
    column-gap: .65rem;
  }

  /* The first row is exactly as tall as the navigation (bounded by the available height), so the
     pin controls can sit at its foot while the panels span the full height. */
  .surux-tabs.surux-tabs-orientation-vertical.surux-tabs-rail-collapsible:not([data-surux-tabs-orientation-policy="horizontal-only"]) {
    grid-template-rows: fit-content(100%) minmax(0, 1fr);
  }

  .surux-tabs.surux-tabs-orientation-vertical.surux-tabs-rail-collapsible.is-tab-rail-collapsed.is-tab-rail-open {
    --surux-tab-rail-frame: 1px;
  }

  .surux-tabs.surux-tabs-orientation-vertical.surux-tabs-rail-collapsible:not([data-surux-tabs-orientation-policy="horizontal-only"]) > .surux-tab-panels {
    grid-row: 1 / -1;
  }

  /* The pinned divider spans the whole column; the list itself ends with its last row. */
  .surux-tabs.surux-tabs-orientation-vertical.surux-tabs-rail-collapsible.is-tab-rail-pinned::before {
    content: "";
    grid-column: 1;
    grid-row: 1 / -1;
    justify-self: end;
    width: 1px;
    background: var(--surux-border);
    pointer-events: none;
  }

  html[data-surux-desktop-tab-orientation="vertical"] .surux-tabs:not([data-surux-tabs-orientation-policy="horizontal-only"]) > .surux-tab-list,
  .surux-tabs.surux-tabs-orientation-vertical:not([data-surux-tabs-orientation-policy="horizontal-only"]) > .surux-tab-list {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    min-height: 0;
    height: 100%;
    flex-direction: column;
    align-items: stretch;
    align-self: stretch;
    --surux-tab-folder-rail-gap: .28rem;
    gap: .28rem;
    margin: 0;
    padding: .2rem .85rem .5rem .05rem;
    overflow-x: hidden;
    overflow-y: auto;
    border-right: 1px solid var(--surux-border);
    border-bottom: 0;
    scroll-padding-block: .35rem;
    scrollbar-width: thin;
    position: relative;
    /* Above sticky table headings (7) and selection bars (20), below dialogs. */
    z-index: 30;
    transition: background-color .18s ease, box-shadow .18s ease;
  }

  html[data-surux-desktop-tab-orientation="vertical"] .surux-tabs:not(.surux-tabs-rail-collapsible):not([data-surux-tabs-orientation-policy="horizontal-only"]) > .surux-tab-list.surux-tab-list-hierarchy,
  .surux-tabs.surux-tabs-orientation-vertical:not(.surux-tabs-rail-collapsible):not([data-surux-tabs-orientation-policy="horizontal-only"]) > .surux-tab-list.surux-tab-list-hierarchy {
    padding-inline: 10px;
  }

  /* The horizontal strip hides its scrollbar. Chromium honours that webkit rule over
     scrollbar-width, so an overflowing vertical rail had no scrollbar and tabs below
     the fold could not be reached with the pointer. */
  html[data-surux-desktop-tab-orientation="vertical"] .surux-tabs:not([data-surux-tabs-orientation-policy="horizontal-only"]) > .surux-tab-list::-webkit-scrollbar,
  .surux-tabs.surux-tabs-orientation-vertical:not([data-surux-tabs-orientation-policy="horizontal-only"]) > .surux-tab-list::-webkit-scrollbar {
    display: block;
    width: .45rem;
    height: .45rem;
  }

  html[data-surux-desktop-tab-orientation="vertical"] .surux-tabs:not([data-surux-tabs-orientation-policy="horizontal-only"]) > .surux-tab-list-hierarchy,
  .surux-tabs.surux-tabs-orientation-vertical > .surux-tab-list-hierarchy {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    align-content: flex-start;
    justify-content: flex-start;
  }

  html[data-surux-desktop-tab-orientation="vertical"] .surux-tabs:not([data-surux-tabs-orientation-policy="horizontal-only"]) > .surux-tab-list-hierarchy::after,
  .surux-tabs.surux-tabs-orientation-vertical > .surux-tab-list-hierarchy::after {
    content: none;
    height: auto;
    background: none;
  }

  html[data-surux-desktop-tab-orientation="vertical"] .surux-tabs:not([data-surux-tabs-orientation-policy="horizontal-only"]) > .surux-tab-list > .surux-tab-sublist,
  .surux-tabs.surux-tabs-orientation-vertical > .surux-tab-list > .surux-tab-sublist {
    flex: 0 0 auto;
    flex-direction: column;
    align-self: stretch;
    gap: 2px;
    box-sizing: border-box;
    width: calc(100% - var(--surux-tab-folder-indent, 18px));
    min-width: 0;
    max-width: none;
    margin: calc(-1 * var(--surux-tab-folder-rail-gap, .28rem)) 0 .5rem var(--surux-tab-folder-indent, 18px);
    padding: 6px 8px 8px;
    /* The outer rail owns vertical scrolling; children grow with their links. */
    overflow: visible;
    border: 1px solid var(--surux-tab-folder-edge, color-mix(in srgb, var(--surux-primary) 32%, transparent));
    border-top: 0;
    border-radius: 0 0 12px 12px;
    background: var(--surux-tab-folder-fill, color-mix(in srgb, var(--surux-primary) 12%, transparent));
  }

  html[data-surux-desktop-tab-orientation="vertical"] .surux-tabs:not([data-surux-tabs-orientation-policy="horizontal-only"]) > .surux-tab-list > .surux-tab-button > .surux-tab-disclosure,
  .surux-tabs.surux-tabs-orientation-vertical > .surux-tab-list > .surux-tab-button > .surux-tab-disclosure {
    transform: none;
    margin-left: auto;
    font-size: .85em;
  }

  html[data-surux-desktop-tab-orientation="vertical"] .surux-tabs:not([data-surux-tabs-orientation-policy="horizontal-only"]) > .surux-tab-list > .surux-tab-button[aria-expanded="true"] > .surux-tab-disclosure,
  .surux-tabs.surux-tabs-orientation-vertical > .surux-tab-list > .surux-tab-button[aria-expanded="true"] > .surux-tab-disclosure {
    transform: rotate(90deg);
    color: var(--surux-primary);
  }

  html[data-surux-desktop-tab-orientation="vertical"] .surux-tabs:not([data-surux-tabs-orientation-policy="horizontal-only"]) > .surux-tab-list > .surux-tab-sublist > .surux-tab-button,
  .surux-tabs.surux-tabs-orientation-vertical > .surux-tab-list > .surux-tab-sublist > .surux-tab-button {
    position: relative;
    justify-content: flex-start;
    height: auto;
    min-height: 36px;
    padding: .45rem .55rem;
    margin: 0;
    white-space: normal;
    border-width: 0;
    border-bottom-width: 0;
    border-radius: .5rem;
    background: transparent;
    box-shadow: none;
    font-size: .9em;
  }

  .surux-tabs.surux-tabs-orientation-vertical > .surux-tab-list > .surux-tab-sublist > .surux-tab-button:not(.active):not([aria-selected="true"]) {
    background: transparent;
    box-shadow: none;
  }

  html[data-surux-desktop-tab-orientation="vertical"] .surux-tabs:not([data-surux-tabs-orientation-policy="horizontal-only"]) > .surux-tab-list > .surux-tab-sublist > .surux-tab-button.active,
  html[data-surux-desktop-tab-orientation="vertical"] .surux-tabs:not([data-surux-tabs-orientation-policy="horizontal-only"]) > .surux-tab-list > .surux-tab-sublist > .surux-tab-button[aria-selected="true"],
  .surux-tabs.surux-tabs-orientation-vertical > .surux-tab-list > .surux-tab-sublist > .surux-tab-button.active,
  .surux-tabs.surux-tabs-orientation-vertical > .surux-tab-list > .surux-tab-sublist > .surux-tab-button[aria-selected="true"] {
    border-bottom-width: 0;
    background: var(--surux-surface);
    color: var(--surux-text);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 0 0 1px var(--surux-border);
  }

  .surux-tabs.surux-tabs-orientation-vertical.is-tab-rail-collapsed:not(.is-tab-rail-open) > .surux-tab-list > .surux-tab-sublist {
    display: none;
  }

  html[data-surux-desktop-tab-orientation="vertical"] .surux-tabs:not([data-surux-tabs-orientation-policy="horizontal-only"]) > .surux-tab-list > .surux-tab-button,
  .surux-tabs.surux-tabs-orientation-vertical:not([data-surux-tabs-orientation-policy="horizontal-only"]) > .surux-tab-list > .surux-tab-button {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    justify-content: flex-start;
    margin: 0 -1px 0 0;
    padding: .72rem .9rem;
    border-bottom-color: transparent;
    border-right: 3px solid transparent;
    border-radius: .7rem 0 0 .7rem;
    line-height: 1.2;
    text-align: left;
    white-space: normal;
  }

  html[data-surux-desktop-tab-orientation="vertical"] .surux-tabs:not([data-surux-tabs-orientation-policy="horizontal-only"]) > .surux-tab-list > .surux-tab-button.active,
  html[data-surux-desktop-tab-orientation="vertical"] .surux-tabs:not([data-surux-tabs-orientation-policy="horizontal-only"]) > .surux-tab-list > .surux-tab-button[aria-selected="true"],
  .surux-tabs.surux-tabs-orientation-vertical:not([data-surux-tabs-orientation-policy="horizontal-only"]) > .surux-tab-list > .surux-tab-button.active,
  .surux-tabs.surux-tabs-orientation-vertical:not([data-surux-tabs-orientation-policy="horizontal-only"]) > .surux-tab-list > .surux-tab-button[aria-selected="true"] {
    border-bottom-color: rgba(var(--surux-primary-rgb), .28);
    border-right-color: var(--surux-primary);
    box-shadow: -.45rem 0 1.2rem rgba(var(--surux-primary-rgb), .08);
  }

  html[data-surux-desktop-tab-orientation="vertical"] .surux-tabs:not([data-surux-tabs-orientation-policy="horizontal-only"]) > .surux-tab-panels,
  .surux-tabs.surux-tabs-orientation-vertical:not([data-surux-tabs-orientation-policy="horizontal-only"]) > .surux-tab-panels {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    min-height: 0;
    margin: 0;
    /* Deliberately no z-index. A z-index here makes this a stacking context, which traps every
       position: fixed descendant inside it — so a modal opened from a tab panel is pinned at this
       element's level instead of the viewport's, and the modal backdrop (z 1050, appended to body)
       paints straight over it. The rail still layers above the panel without it: .surux-tab-list
       carries z-index 30 and this stays at auto. */
    position: relative;
  }

  /* Footer row at the foot of the navigation: the same inset from the bottom and right edge as
     the tabs have from theirs. It stays a sibling of the tablist, which may only own tabs. */
  .surux-tabs.surux-tabs-orientation-vertical.surux-tabs-rail-collapsible > .surux-tab-rail-controls {
    display: flex;
    grid-column: 1;
    grid-row: 1;
    align-self: end;
    justify-self: start;
    justify-content: flex-end;
    gap: .25rem;
    width: calc(var(--surux-tab-rail-expanded-width) - 2 * var(--surux-tab-rail-frame));
    margin: 0 var(--surux-tab-rail-frame) var(--surux-tab-rail-frame);
    padding: var(--surux-tab-rail-inset) calc(var(--surux-tab-rail-inset) - var(--surux-tab-rail-frame))
      calc(var(--surux-tab-rail-inset) - var(--surux-tab-rail-frame)) 0;
    border-top: 1px solid var(--surux-border);
    border-radius: 0 0 calc(.85rem - 1px) calc(.85rem - 1px);
    position: relative;
    z-index: 31;
  }

  .surux-tabs.surux-tabs-orientation-vertical.surux-tabs-rail-collapsible.is-tab-rail-collapsed.is-tab-rail-open > .surux-tab-rail-controls {
    background: var(--surux-surface);
  }

  .surux-tabs.surux-tabs-orientation-vertical.surux-tabs-rail-collapsible.is-tab-rail-pinned > .surux-tab-rail-controls .surux-tab-rail-toggle i {
    transform: rotate(-38deg);
  }

  /* Reserves the footer row; its top edge is where the controls' divider lands. */
  .surux-tabs.surux-tabs-orientation-vertical.surux-tabs-rail-collapsible.is-tab-rail-pinned > .surux-tab-list::after,
  .surux-tabs.surux-tabs-orientation-vertical.surux-tabs-rail-collapsible.is-tab-rail-collapsed.is-tab-rail-open > .surux-tab-list::after {
    width: 100%;
    height: auto;
    content: "";
    display: block;
    position: static;
    top: auto;
    right: auto;
    left: auto;
    background: none;
    flex: 0 0 calc(var(--surux-tab-rail-toggle-size) + var(--surux-tab-rail-inset) + 1px);
  }

  .surux-tabs.surux-tabs-orientation-vertical.surux-tabs-rail-collapsible:not([data-surux-tabs-orientation-policy="horizontal-only"]) > .surux-tab-list {
    --surux-tab-folder-rail-gap: var(--surux-tab-rail-row-gap);
    gap: var(--surux-tab-rail-row-gap);
    padding: calc(var(--surux-tab-rail-inset) - var(--surux-tab-rail-frame));
  }

  .surux-tabs.surux-tabs-orientation-vertical.surux-tabs-rail-collapsible.is-tab-rail-pinned > .surux-tab-list {
    border-right: 0;
  }

  /* Open and pinned tabs put the icon on the collapsed target's centre line and keep its pitch. */
  .surux-tabs.surux-tabs-orientation-vertical.surux-tabs-rail-collapsible:not([data-surux-tabs-orientation-policy="horizontal-only"]) > .surux-tab-list > .surux-tab-button {
    min-height: var(--surux-tab-rail-item-size);
    margin: 0;
    padding: .5rem .75rem .5rem calc((var(--surux-tab-rail-item-size) - var(--surux-tab-rail-icon-size)) / 2 - 1px);
    border-bottom-width: 1px;
  }

  .surux-tabs.surux-tabs-orientation-vertical.surux-tabs-rail-collapsible.is-tab-rail-collapsed:not(.is-tab-rail-open) > .surux-tab-rail-controls {
    display: none !important;
  }

  .surux-tabs.surux-tabs-orientation-vertical.surux-tabs-rail-collapsible.is-tab-rail-collapsed > .surux-tab-list {
    width: var(--surux-tab-rail-collapsed-width);
    height: fit-content;
    max-height: 100%;
    align-self: start;
    padding: var(--surux-tab-rail-inset);
    gap: var(--surux-tab-rail-row-gap);
    border: 0;
    background: transparent;
  }

  .surux-tabs.surux-tabs-orientation-vertical.surux-tabs-rail-collapsible.is-tab-rail-collapsed:not(.is-tab-rail-open) > .surux-tab-list > .surux-tab-button {
    position: relative;
    justify-content: center;
    gap: 0;
    width: var(--surux-tab-rail-item-size);
    height: var(--surux-tab-rail-item-size);
    min-height: var(--surux-tab-rail-item-size);
    padding: 0;
    margin: 0;
    border: 1px solid transparent;
    border-radius: .8rem;
    box-shadow: none;
  }

  .surux-tabs.surux-tabs-orientation-vertical.surux-tabs-rail-collapsible.is-tab-rail-collapsed:not(.is-tab-rail-open) > .surux-tab-list > .surux-tab-button:not(.active):not([aria-selected="true"]) > i {
    color: currentColor;
  }

  .surux-tabs.surux-tabs-orientation-vertical.surux-tabs-rail-collapsible.is-tab-rail-collapsed:not(.is-tab-rail-open) > .surux-tab-list > .surux-tab-button[aria-selected="true"] {
    border-color: rgba(var(--surux-primary-rgb), .28);
  }

  .surux-tabs.surux-tabs-orientation-vertical.surux-tabs-rail-collapsible > .surux-tab-list > .surux-tab-button > i:not(.surux-tab-disclosure) {
    width: var(--surux-tab-rail-icon-size);
    flex: 0 0 var(--surux-tab-rail-icon-size);
    text-align: center;
  }

  .surux-tabs.surux-tabs-orientation-vertical.surux-tabs-rail-collapsible > .surux-tab-list > .surux-tab-button > span:not(.surux-tab-badge) {
    min-width: 0;
    opacity: 1;
    transition: opacity .14s ease;
  }

  .surux-tabs.surux-tabs-orientation-vertical.surux-tabs-rail-collapsible.is-tab-rail-collapsed:not(.is-tab-rail-open) > .surux-tab-list > .surux-tab-button > span:not(.surux-tab-badge):not(.visually-hidden) {
    width: 0;
    white-space: nowrap;
    overflow: hidden;
    opacity: 0;
  }

  .surux-tabs.surux-tabs-orientation-vertical.surux-tabs-rail-collapsible.is-tab-rail-collapsed:not(.is-tab-rail-open) > .surux-tab-list > .surux-tab-button > .surux-tab-badge {
    position: absolute;
    top: 0;
    right: 0;
    margin-left: 0;
    font-size: .62em;
    min-width: 1.15em;
    min-height: 1.15em;
    padding: 0 .2em;
  }

  .surux-tabs.surux-tabs-orientation-vertical.surux-tabs-rail-collapsible.is-tab-rail-collapsed:not(.is-tab-rail-open) > .surux-tab-list > .surux-tab-button > .surux-tab-disclosure {
    position: absolute;
    right: .12rem;
    bottom: .1rem;
    margin-left: 0;
    font-size: .55em;
    color: var(--surux-muted);
  }

  .surux-tabs.surux-tabs-orientation-vertical.surux-tabs-rail-collapsible.is-tab-rail-collapsed:not(.is-tab-rail-open) > .surux-tab-list > .surux-tab-button[aria-expanded="true"] > .surux-tab-disclosure {
    color: var(--surux-primary);
  }

  .surux-tabs.surux-tabs-orientation-vertical.surux-tabs-rail-collapsible.is-tab-rail-collapsed.is-tab-rail-open > .surux-tab-list {
    width: var(--surux-tab-rail-expanded-width);
    padding: calc(var(--surux-tab-rail-inset) - var(--surux-tab-rail-frame));
    border: var(--surux-tab-rail-frame) solid var(--surux-border);
    border-radius: .85rem;
    background: var(--surux-surface);
    box-shadow: .5rem .65rem 1.5rem rgba(7, 12, 25, .22);
  }
}

@media (min-width: 992px) and (prefers-reduced-motion: reduce) {
  .surux-tabs.surux-tabs-orientation-vertical.surux-tabs-rail-collapsible,
  .surux-tabs.surux-tabs-orientation-vertical.surux-tabs-rail-collapsible > .surux-tab-list,
  .surux-tabs.surux-tabs-orientation-vertical.surux-tabs-rail-collapsible > .surux-tab-rail-toggle,
  .surux-tabs.surux-tabs-orientation-vertical.surux-tabs-rail-collapsible > .surux-tab-list > .surux-tab-button > span {
    transition: none !important;
  }
}

@media screen and (forced-colors: none) {
  .surux-tab-list-hierarchy[data-surux-tab-folder="drawn"] > .surux-tab-folder {
    display: block;
    filter: var(--surux-tab-folder-shadow, none);
  }

  .surux-tab-folder-shape {
    fill: var(--surux-tab-folder-fill, color-mix(in srgb, var(--surux-primary) 12%, transparent));
    stroke: var(--surux-tab-folder-edge, color-mix(in srgb, var(--surux-primary) 32%, transparent));
    stroke-width: var(--surux-tab-folder-edge-width, 1px);
  }

  .surux-tab-folder-ink-dark {
    flood-color: var(--surux-tab-folder-inset-dark, transparent);
  }

  .surux-tab-folder-ink-light {
    flood-color: var(--surux-tab-folder-inset-light, transparent);
  }

  .surux-tab-list-hierarchy[data-surux-tab-folder="drawn"] > .surux-tab-sublist,
  html[data-surux-desktop-tab-orientation="vertical"] .surux-tabs:not([data-surux-tabs-orientation-policy="horizontal-only"]) > .surux-tab-list[data-surux-tab-folder="drawn"] > .surux-tab-sublist,
  .surux-tabs.surux-tabs-orientation-vertical > .surux-tab-list[data-surux-tab-folder="drawn"] > .surux-tab-sublist {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
  }

  .surux-tab-list-hierarchy[data-surux-tab-folder="drawn"] > .surux-tab-button.active,
  .surux-tab-list-hierarchy[data-surux-tab-folder="drawn"] > .surux-tab-button[aria-selected="true"],
  .surux-tab-list-hierarchy[data-surux-tab-folder="drawn"] > .surux-tab-button.active:hover,
  .surux-tab-list-hierarchy[data-surux-tab-folder="drawn"] > .surux-tab-button[aria-selected="true"]:hover,
  .surux-tab-list-hierarchy[data-surux-tab-folder="drawn"] > .surux-tab-button.active:focus-visible,
  .surux-tab-list-hierarchy[data-surux-tab-folder="drawn"] > .surux-tab-button[aria-selected="true"]:focus-visible,
  html[data-surux-desktop-tab-orientation="vertical"] .surux-tabs:not([data-surux-tabs-orientation-policy="horizontal-only"]) > .surux-tab-list[data-surux-tab-folder="drawn"] > .surux-tab-button.active,
  html[data-surux-desktop-tab-orientation="vertical"] .surux-tabs:not([data-surux-tabs-orientation-policy="horizontal-only"]) > .surux-tab-list[data-surux-tab-folder="drawn"] > .surux-tab-button[aria-selected="true"],
  html[data-surux-desktop-tab-orientation="vertical"] .surux-tabs:not([data-surux-tabs-orientation-policy="horizontal-only"]) > .surux-tab-list[data-surux-tab-folder="drawn"] > .surux-tab-button.active:hover,
  html[data-surux-desktop-tab-orientation="vertical"] .surux-tabs:not([data-surux-tabs-orientation-policy="horizontal-only"]) > .surux-tab-list[data-surux-tab-folder="drawn"] > .surux-tab-button[aria-selected="true"]:hover,
  html[data-surux-desktop-tab-orientation="vertical"] .surux-tabs:not([data-surux-tabs-orientation-policy="horizontal-only"]) > .surux-tab-list[data-surux-tab-folder="drawn"] > .surux-tab-button.active:focus-visible,
  html[data-surux-desktop-tab-orientation="vertical"] .surux-tabs:not([data-surux-tabs-orientation-policy="horizontal-only"]) > .surux-tab-list[data-surux-tab-folder="drawn"] > .surux-tab-button[aria-selected="true"]:focus-visible,
  .surux-tabs.surux-tabs-orientation-vertical:not([data-surux-tabs-orientation-policy="horizontal-only"]) > .surux-tab-list[data-surux-tab-folder="drawn"] > .surux-tab-button.active,
  .surux-tabs.surux-tabs-orientation-vertical:not([data-surux-tabs-orientation-policy="horizontal-only"]) > .surux-tab-list[data-surux-tab-folder="drawn"] > .surux-tab-button[aria-selected="true"],
  .surux-tabs.surux-tabs-orientation-vertical:not([data-surux-tabs-orientation-policy="horizontal-only"]) > .surux-tab-list[data-surux-tab-folder="drawn"] > .surux-tab-button.active:hover,
  .surux-tabs.surux-tabs-orientation-vertical:not([data-surux-tabs-orientation-policy="horizontal-only"]) > .surux-tab-list[data-surux-tab-folder="drawn"] > .surux-tab-button[aria-selected="true"]:hover,
  .surux-tabs.surux-tabs-orientation-vertical:not([data-surux-tabs-orientation-policy="horizontal-only"]) > .surux-tab-list[data-surux-tab-folder="drawn"] > .surux-tab-button.active:focus-visible,
  .surux-tabs.surux-tabs-orientation-vertical:not([data-surux-tabs-orientation-policy="horizontal-only"]) > .surux-tab-list[data-surux-tab-folder="drawn"] > .surux-tab-button[aria-selected="true"]:focus-visible {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    color: var(--surux-tab-folder-ink, var(--surux-primary));
    transition: color .16s ease;
  }

  .surux-tabs > .surux-tab-list.surux-tab-list-hierarchy[data-surux-tab-folder="drawn"]::after {
    mask-image: linear-gradient(90deg, #000 0 var(--surux-tab-folder-gap-start, 0px), transparent var(--surux-tab-folder-gap-start, 0px) var(--surux-tab-folder-gap-end, 0px), #000 var(--surux-tab-folder-gap-end, 0px));
  }
}

@media screen and (forced-colors: none) and (max-width: 767.98px) {
  .surux-tabs > .surux-tab-list.surux-tab-list-hierarchy[data-surux-tab-folder="drawn"]::after {
    content: none;
  }
}

@media (forced-colors: active) {
  .surux-tab-list-hierarchy > .surux-tab-sublist {
    border-color: CanvasText;
  }

  .surux-tab-list-hierarchy > .surux-tab-sublist > .surux-tab-button.active,
  .surux-tab-list-hierarchy > .surux-tab-sublist > .surux-tab-button[aria-selected="true"] {
    forced-color-adjust: none;
    background: Highlight !important;
    color: HighlightText !important;
    box-shadow: none !important;
  }

  .surux-tabs > .surux-tab-list > .surux-tab-button:is(.active, [aria-selected="true"]) {
    border-bottom-color: Highlight;
    border-bottom-width: 6px;
  }

  .surux-tab-list-hierarchy > .surux-tab-sublist > .surux-tab-button.active i,
  .surux-tab-list-hierarchy > .surux-tab-sublist > .surux-tab-button[aria-selected="true"] i {
    color: HighlightText;
  }

  .surux-tab-list-hierarchy > .surux-tab-sublist > .surux-tab-button:focus-visible {
    outline: 2px solid CanvasText;
  }

  .surux-tabs > .surux-tab-list.surux-tab-list-hierarchy::after {
    forced-color-adjust: none;
    background: CanvasText;
  }
}

@media (forced-colors: active) and (min-width: 992px) {
  html[data-surux-desktop-tab-orientation="vertical"] .surux-tabs:not([data-surux-tabs-orientation-policy="horizontal-only"]) > .surux-tab-list > .surux-tab-button:is(.active, [aria-selected="true"]),
  .surux-tabs.surux-tabs-orientation-vertical:not([data-surux-tabs-orientation-policy="horizontal-only"]) > .surux-tab-list > .surux-tab-button:is(.active, [aria-selected="true"]) {
    border-right-color: Highlight;
    border-right-width: 6px;
    /* The rail marks the right edge; the strip's 6px underline would make the selected row taller. */
    border-bottom-width: 3px;
  }
}

.surux-command-bar {
  --surux-command-bar-rail: clamp(.85rem, 1.1vw, 1.25rem);
  padding: .72rem var(--surux-command-bar-rail) calc(.72rem + env(safe-area-inset-bottom, 0px));
}

.surux-command-bar-inner {
  width: min(100%, 1480px);
  margin-inline: auto;
  justify-content: flex-start;
  gap: .66rem;
  padding: 0;
}

.surux-command-bar-lane {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: .66rem;
}

.surux-command-bar-action-region {
  min-width: 0;
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: .66rem;
}

html[data-surux-command-bar-alignment="middle"] .surux-command-bar-lanes .surux-command-bar-action-region {
  justify-content: center;
  justify-content: safe center;
}

html[data-surux-command-bar-alignment="right"] .surux-command-bar-lanes .surux-command-bar-action-region {
  justify-content: flex-end;
  justify-content: safe flex-end;
}

.surux-command-bar-overflow,
.surux-command-bar-primary {
  flex: 0 0 auto;
}

.surux-command-bar-primary {
  align-self: center;
}

.surux-command-bar-trailing {
  flex: 0 0 auto;
  margin-left: auto;
}

@media (min-width: 992px) {
  html[data-surux-command-bar-alignment="middle"] .surux-command-bar-lanes .surux-command-bar-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  }

  html[data-surux-command-bar-alignment="middle"] .surux-command-bar-lanes .surux-command-bar-action-region {
    grid-column: 2;
    grid-row: 1;
    width: max-content;
    max-width: 100%;
    justify-self: center;
  }

  html[data-surux-command-bar-alignment="middle"] .surux-command-bar-lanes .surux-command-bar-trailing {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }
}

.surux-command-overflow-panel.surux-command-overflow-panel-align-end {
  right: 0;
  left: auto;
}

.surux-row-actions-menu .surux-command-overflow-panel {
  top: calc(100% + .35rem);
  bottom: auto;
}

.surux-command-bar .surux-command-button .surux-command-button-icon {
  width: 1.08rem !important;
  height: 1.08rem !important;
  flex: 0 0 1.08rem !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: currentColor !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  filter: none !important;
}

@media (max-width: 767.98px) {
  .surux-command-bar {
    --surux-command-bar-rail: .72rem;
  }

  .surux-command-bar-inner {
    width: 100%;
    margin-inline: 0;
    gap: .58rem;
  }

  .surux-command-bar-lane {
    gap: .58rem;
  }

  .surux-command-bar-action-region {
    gap: .58rem;
  }
}

/* Text keeps an 11rem floor inside the shared frame. When that floor and the
   in-frame actions cannot share the line, the actions wrap onto the next line
   of the same frame, still after the text, at their existing icon size.
   Available width is the frame's, so a narrow embedding reflows without a
   viewport or page rule. Actions do not shrink or leave the frame. */
.surux-control-field.surux-search-input-box {
  --surux-search-text-floor: 11rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  row-gap: var(--surux-bar-spacing);
  width: 100%;
  min-width: 0;
  max-width: 100%;
  border: 1px solid var(--surux-picker-edge, var(--surux-picker-edge-rest));
  padding-inline-end: var(--surux-bar-spacing);
}

/* Let the actions occupy their actual width inside the input frame. Text never
   runs beneath them, regardless of how many trailing actions are provided. */
.surux-toolbar-search-control .surux-search-input-box > .surux-input {
  text-overflow: ellipsis;
  flex: 1 1 0;
  min-width: min(100%, var(--surux-search-text-floor, 11rem));
  width: 0;
  min-height: 34px;
  padding-inline-end: var(--surux-bar-spacing);
  border: 0;
  background: transparent;
  box-shadow: none;
}

.surux-search-input-box > .surux-control-trailing-action {
  position: static;
  flex: 0 0 auto;
  align-self: stretch;
  max-width: 100%;
  padding-block: .2rem;
}

.surux-search-input-box .surux-toolbar-search-actions {
  height: auto;
  max-width: 100%;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.surux-search-input-box:has(> .surux-input:focus) {
  border-color: rgba(var(--surux-primary-rgb), .65);
  box-shadow: 0 0 0 .25rem rgba(var(--surux-primary-rgb), .18);
}

.surux-search-input-box:has(> .surux-input:disabled) {
  border-color: var(--surux-disabled-control-border);
  background-color: var(--surux-disabled-control-bg);
  box-shadow: var(--surux-disabled-control-shadow);
}

/* Standard page content, list, and table primitives. */
.surux-page-lead {
  position: relative;
  min-width: 0;
  display: grid;
  align-items: start;
  gap: .55rem;
  margin-bottom: var(--surux-section-gap);
}

.surux-page-lead-main {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: .55rem;
}

.surux-page-lead-main > .surux-breadcrumb-nav {
  min-width: 0;
  margin-bottom: 0;
}

.surux-page-lead-main > .surux-page-header {
  min-width: 0;
  display: block;
  margin-bottom: 0;
}

.surux-page-lead-main > .surux-page-header > div {
  min-width: 0;
  max-width: 100%;
}

.surux-page-lead-main > .surux-page-header .surux-page-title-row {
  min-width: 0;
  max-width: 100%;
  flex-wrap: nowrap;
}

.surux-page-lead-main > .surux-page-header .surux-page-title-row h1,
.surux-page-lead-main > .surux-page-header .surux-page-title-row h1 > span {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  overflow-wrap: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: normal;
}

.surux-page-lead-main > .surux-page-header .surux-page-title-row h1 > span {
  display: inline-block;
  vertical-align: bottom;
}

.surux-page-lead-main > .surux-page-header .surux-page-title-row .surux-status-chip {
  flex: 0 0 auto;
}

.surux-page-lead-aside {
  min-width: 0;
  min-height: 0;
}

.surux-page-lead-hero-only {
  justify-items: end;
}

.surux-page-lead-hero-only > .surux-page-lead-aside {
  width: min(100%, 24rem);
}

.surux-page-lead-with-actions > .surux-page-lead-main {
  padding-inline-end: 3rem;
}

.surux-page-actions-anchor {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 60;
  display: flex;
  justify-content: flex-end;
}

.surux-page-actions-menu .surux-command-overflow-panel {
  left: auto;
  right: 0;
  top: calc(100% + .4rem);
  bottom: auto;
  min-width: 13.5rem;
  text-align: left;
}

/* Phones: a header action menu is right-aligned to a trigger that may sit at the
   start of the wrapped band, so the absolute panel hangs off the left and the
   content shell clips it. Pin it under the app bar, inside the viewport. */
@media (max-width: 767.98px) {
  .surux-page-actions-menu .surux-command-overflow:not(.surux-page-helper)[open] > .surux-command-overflow-panel {
    position: fixed;
    z-index: 1080;
    top: calc(var(--surux-topbar-height, 64px) + .5rem + env(safe-area-inset-top));
    right: .5rem;
    bottom: auto;
    left: auto;
    width: min(24rem, calc(100vw - 1rem));
    max-width: calc(100vw - 1rem);
    max-height: min(70vh, calc(100dvh - var(--surux-topbar-height, 64px) - 1.5rem - env(safe-area-inset-top)));
  }
}

.surux-page-hero {
  position: relative;
  min-width: 0;
  min-height: 7rem;
  overflow: hidden;
  padding: .9rem 1rem .85rem;
  border: var(--surux-border-width) solid color-mix(in srgb, var(--surux-border) 78%, rgba(255, 255, 255, .16));
  border-radius: var(--surux-radius-hero);
  background:
    linear-gradient(115deg, rgba(var(--surux-primary-rgb), .08), transparent 38%),
    radial-gradient(circle at 96% 8%, rgba(var(--surux-primary-rgb), .16), transparent 44%),
    linear-gradient(145deg, color-mix(in srgb, var(--surux-surface) 91%, white 2%), color-mix(in srgb, var(--surux-surface) 96%, black 4%));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .07),
    0 .45rem 1.4rem rgba(0, 0, 0, .12);
}

.surux-page-hero-with-actions {
  padding-inline-end: 1rem;
}

.surux-page-hero-with-actions .surux-page-hero-heading {
  padding-inline-end: 2.75rem;
}

.surux-page-hero > * {
  position: relative;
  z-index: 1;
}

.surux-page-hero-content {
  min-width: 0;
}

.surux-page-hero-heading {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: .7rem;
}

.surux-page-hero-copy {
  min-width: 0;
  flex: 1 1 auto;
  display: grid;
  gap: .12rem;
}

.surux-page-hero-copy .surux-eyebrow {
  display: flex;
  align-items: center;
  gap: .35rem;
}

.surux-page-hero-copy strong {
  overflow: hidden;
  color: var(--surux-text, #f5f7fa);
  font-size: .95rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.surux-page-hero-context-icon {
  color: var(--surux-primary);
  font-size: .72rem;
}

.surux-bill-workflow-hero-tile,
.surux-invoice-workflow-hero-tile {
  display: flex;
  align-items: stretch;
}

.surux-bill-workflow-hero-tile {
  border-color: var(--surux-summary-border, var(--surux-border));
  background:
    linear-gradient(115deg, color-mix(in srgb, var(--surux-summary-color, var(--surux-primary)) 18%, transparent), transparent 48%),
    radial-gradient(circle at 96% 8%, color-mix(in srgb, var(--surux-summary-color, var(--surux-primary)) 28%, transparent), transparent 46%),
    var(--surux-summary-bg, var(--surux-surface));
}

.surux-bill-workflow-hero-tile .surux-eyebrow,
.surux-bill-workflow-hero-tile .surux-page-hero-context-icon {
  color: color-mix(in srgb, var(--surux-summary-color, var(--surux-primary)) 88%, var(--surux-text));
}

.surux-bill-workflow-hero,
.surux-invoice-workflow-hero {
  width: 100%;
  display: grid;
  align-content: space-between;
  gap: .75rem;
}

.surux-bill-workflow-hero .surux-page-hero-copy > .small,
.surux-invoice-workflow-hero .surux-page-hero-copy > .small {
  line-height: 1.35;
}

.surux-invoice-workflow-actions {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: .45rem;
}

.surux-invoice-conflict-changes {
  margin-top: .85rem;
  padding-top: .75rem;
  border-top: 1px solid var(--surux-border);
}

.surux-invoice-conflict-changes-title {
  margin-bottom: .4rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--surux-muted);
}

.surux-invoice-conflict-changes-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .3rem;
}

.surux-invoice-conflict-changes-list > li {
  display: flex;
  flex-wrap: wrap;
  gap: .1rem .5rem;
  font-size: .85rem;
}

.surux-invoice-conflict-change-field {
  min-width: 7.5rem;
  font-weight: 600;
  color: var(--surux-text);
}

.surux-invoice-conflict-change-detail {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--surux-muted);
}

.surux-invoice-conflict-change-more {
  color: var(--surux-muted);
  font-style: italic;
}

.surux-invoice-workflow-actions > .surux-command-button,
.surux-invoice-workflow-actions > .surux-command-form {
  flex: 0 0 auto;
}

.surux-invoice-workflow-actions > .surux-command-form {
  display: inline-flex;
}

.surux-invoice-workflow-actions > .surux-command-button,
.surux-invoice-workflow-actions > .surux-command-form > .surux-command-button {
  justify-content: center;
}

.surux-salary-structure-actions-hero {
  width: 100%;
  display: grid;
  align-content: space-between;
  gap: .75rem;
}

.surux-salary-structure-actions-hero .surux-page-hero-copy > .small {
  line-height: 1.35;
}

.surux-salary-structure-hero-actions {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: .45rem;
}

.surux-salary-structure-hero-actions > .surux-command-button {
  flex: 0 0 auto;
  justify-content: center;
}

.surux-page-hero-toggle {
  flex: 0 0 auto;
  align-self: center;
}

html .btn.surux-button.surux-command-button.surux-command-button-subtle-surface.surux-page-hero-toggle {
  width: 2.15rem !important;
  min-width: 2.15rem !important;
  height: 2.15rem !important;
  min-height: 2.15rem !important;
  padding: 0 !important;
  border-color: color-mix(in srgb, var(--surux-primary) 38%, var(--surux-border)) !important;
  border-radius: .65rem !important;
  color: color-mix(in srgb, var(--surux-primary) 82%, var(--surux-text)) !important;
  background: color-mix(in srgb, var(--surux-primary) 10%, var(--surux-surface-2)) !important;
}

html .btn.surux-button.surux-command-button.surux-command-button-subtle-surface.surux-page-hero-toggle .surux-command-button-icon {
  width: .8rem !important;
  height: .8rem !important;
  flex-basis: .8rem !important;
  transition: opacity .16s ease, transform .16s ease;
}

html .btn.surux-button.surux-command-button.surux-page-hero-toggle[aria-expanded="true"] {
  border-color: color-mix(in srgb, var(--surux-primary) 68%, var(--surux-border)) !important;
  color: var(--surux-primary) !important;
  background: color-mix(in srgb, var(--surux-primary) 16%, var(--surux-surface-2)) !important;
}

.surux-page-hero-facts {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .42rem;
  margin: .7rem 0 0;
  padding: 0;
}

.surux-page-hero-fact {
  --surux-page-hero-fact-accent: var(--surux-text, #f5f7fa);
  min-width: 0;
  display: grid;
  gap: .08rem;
  margin: 0;
  padding: .48rem .58rem;
  border: 1px solid color-mix(in srgb, var(--surux-border) 76%, transparent);
  border-radius: .55rem;
  background: color-mix(in srgb, var(--surux-surface, #151b21) 84%, transparent);
}

.surux-page-hero-summary-facts {
  gap: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--surux-border) 72%, transparent);
  border-radius: .62rem;
  background: color-mix(in srgb, var(--surux-app-bg) 46%, transparent);
}

.surux-page-hero-summary-facts > .surux-page-hero-fact {
  padding: .5rem .65rem;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.surux-page-hero-summary-facts > .surux-page-hero-fact + .surux-page-hero-fact {
  border-inline-start: 1px solid color-mix(in srgb, var(--surux-border) 72%, transparent);
}

.surux-page-hero-fact dt {
  overflow: hidden;
  color: var(--surux-muted);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.surux-page-hero-fact dd {
  min-width: 0;
  overflow: hidden;
  margin: 0;
  color: var(--surux-page-hero-fact-accent);
  font-size: .78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.surux-page-hero-fact-value {
  min-width: 0;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.surux-page-hero-fact.is-primary {
  --surux-page-hero-fact-accent: color-mix(in srgb, var(--surux-primary) 82%, var(--surux-text));
}

.surux-page-hero-fact.is-positive {
  --surux-page-hero-fact-accent: color-mix(in srgb, var(--surux-success) 82%, var(--surux-text));
}

.surux-page-hero-fact.is-warning {
  --surux-page-hero-fact-accent: color-mix(in srgb, var(--surux-warning) 86%, var(--surux-text));
}

.surux-page-hero-fact.is-negative {
  --surux-page-hero-fact-accent: color-mix(in srgb, var(--surux-danger) 86%, var(--surux-text));
}

.surux-page-hero-fact.is-info {
  --surux-page-hero-fact-accent: color-mix(in srgb, var(--surux-info, #38bdf8) 80%, var(--surux-text));
}

.surux-page-hero-full-facts > .surux-page-hero-fact.is-featured {
  position: relative;
  flex: 1 0 100%;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-height: 3rem;
  padding: .65rem .72rem .65rem .82rem;
  border: 1px solid color-mix(in srgb, var(--surux-page-hero-fact-accent) 22%, var(--surux-border));
  border-radius: .62rem;
  background:
    radial-gradient(circle at 100% 50%, color-mix(in srgb, var(--surux-page-hero-fact-accent) 14%, transparent), transparent 48%),
    linear-gradient(90deg, color-mix(in srgb, var(--surux-page-hero-fact-accent) 8%, transparent), transparent 58%),
    color-mix(in srgb, var(--surux-surface) 94%, var(--surux-app-bg));
}

.surux-page-hero-full-facts > .surux-page-hero-fact.is-featured::after {
  position: absolute;
  inset-block: .58rem;
  inset-inline-start: 0;
  width: .18rem;
  border-radius: 999px;
  background: var(--surux-page-hero-fact-accent);
  box-shadow: 0 0 .65rem color-mix(in srgb, var(--surux-page-hero-fact-accent) 32%, transparent);
  content: "";
}

.surux-page-hero-full-facts > .surux-page-hero-fact.is-featured dt {
  color: color-mix(in srgb, var(--surux-page-hero-fact-accent) 52%, var(--surux-muted));
}

.surux-page-hero-full-facts > .surux-page-hero-fact.is-featured dd {
  display: grid;
  justify-items: end;
  gap: .34rem;
  font-size: .86rem;
  font-weight: 800;
}

.surux-page-hero-full-facts > .surux-page-hero-fact.is-featured .surux-page-hero-fact-value {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: .42rem;
}

.surux-page-hero-full-facts > .surux-page-hero-fact.is-featured .surux-page-hero-fact-value::before {
  width: .5rem;
  height: .5rem;
  flex: 0 0 .5rem;
  border-radius: 50%;
  background: var(--surux-page-hero-fact-accent);
  box-shadow:
    0 0 0 .2rem color-mix(in srgb, var(--surux-page-hero-fact-accent) 12%, transparent),
    0 0 .7rem color-mix(in srgb, var(--surux-page-hero-fact-accent) 34%, transparent);
  content: "";
}

.surux-page-hero-details {
  display: grid;
  grid-template-rows: 0fr;
  margin-top: 0;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition:
    grid-template-rows .2s ease,
    margin-top .2s ease,
    opacity .16s ease,
    visibility 0s linear .2s;
}

.surux-page-hero-details-inner {
  min-height: 0;
  overflow: hidden;
}

.surux-page-hero-details-heading {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: .55rem;
}

.surux-page-hero-details-label {
  min-width: 0;
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: .45rem;
  margin: 0;
  padding-inline: .08rem;
  color: color-mix(in srgb, var(--surux-muted) 88%, var(--surux-text));
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .105em;
  line-height: 1.1;
  text-transform: uppercase;
}

.surux-page-hero-details-label::before {
  width: .42rem;
  height: .42rem;
  flex: 0 0 .42rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--surux-primary) 84%, var(--surux-text));
  box-shadow: 0 0 0 .18rem color-mix(in srgb, var(--surux-primary) 10%, transparent);
  content: "";
}

.surux-page-hero-meter {
  width: min(9rem, 100%);
  height: .3rem;
  display: block;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  color: var(--surux-page-hero-fact-accent);
  background: color-mix(in srgb, var(--surux-border) 68%, transparent);
  appearance: none;
}

.surux-page-hero-meter::-webkit-meter-bar {
  height: .3rem;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surux-border) 68%, transparent);
  box-shadow: none;
}

.surux-page-hero-meter::-webkit-meter-optimum-value,
.surux-page-hero-meter::-webkit-meter-suboptimum-value,
.surux-page-hero-meter::-webkit-meter-even-less-good-value {
  border-radius: 999px;
  background: var(--surux-page-hero-fact-accent);
  box-shadow: 0 0 .55rem color-mix(in srgb, var(--surux-page-hero-fact-accent) 30%, transparent);
}

.surux-page-hero-meter::-moz-meter-bar {
  border-radius: 999px;
  background: var(--surux-page-hero-fact-accent);
  box-shadow: 0 0 .55rem color-mix(in srgb, var(--surux-page-hero-fact-accent) 30%, transparent);
}

.surux-page-hero-details-label::after {
  height: 1px;
  flex: 1 1 auto;
  background: linear-gradient(90deg, color-mix(in srgb, var(--surux-border) 92%, transparent), transparent);
  content: "";
}

.surux-page-hero-freshness {
  --surux-page-hero-freshness-accent: var(--surux-muted);
  max-width: 12rem;
  display: inline-flex;
  flex: 0 1 auto;
  align-items: center;
  gap: .34rem;
  overflow: hidden;
  padding: .22rem .42rem;
  border: 1px solid color-mix(in srgb, var(--surux-page-hero-freshness-accent) 30%, var(--surux-border));
  border-radius: 999px;
  color: color-mix(in srgb, var(--surux-page-hero-freshness-accent) 78%, var(--surux-text));
  background: color-mix(in srgb, var(--surux-page-hero-freshness-accent) 8%, var(--surux-surface-2));
  font-size: .61rem;
  font-weight: 750;
  letter-spacing: .015em;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.surux-page-hero-freshness::before {
  width: .34rem;
  height: .34rem;
  flex: 0 0 .34rem;
  border-radius: 50%;
  background: var(--surux-page-hero-freshness-accent);
  box-shadow: 0 0 .45rem color-mix(in srgb, var(--surux-page-hero-freshness-accent) 32%, transparent);
  content: "";
}

.surux-page-hero-freshness > time,
.surux-page-hero-freshness > span:not(.visually-hidden) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.surux-page-hero-freshness.is-primary {
  --surux-page-hero-freshness-accent: var(--surux-primary);
}

.surux-page-hero-freshness.is-positive {
  --surux-page-hero-freshness-accent: var(--surux-success);
}

.surux-page-hero-freshness.is-warning {
  --surux-page-hero-freshness-accent: var(--surux-warning);
}

.surux-page-hero-freshness.is-negative {
  --surux-page-hero-freshness-accent: var(--surux-danger);
}

.surux-page-hero-freshness.is-info {
  --surux-page-hero-freshness-accent: var(--surux-info, #38bdf8);
}

.surux-page-hero-freshness.is-stale::before {
  box-shadow:
    0 0 0 .14rem color-mix(in srgb, var(--surux-page-hero-freshness-accent) 12%, transparent),
    0 0 .5rem color-mix(in srgb, var(--surux-page-hero-freshness-accent) 38%, transparent);
}

.surux-page-hero-full-facts {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  overflow: hidden;
  margin-top: .62rem;
  padding: .4rem;
  border: 1px solid color-mix(in srgb, var(--surux-border) 84%, transparent);
  border-radius: .72rem;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--surux-surface-2) 72%, transparent), transparent),
    color-mix(in srgb, var(--surux-app-bg) 38%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .035),
    0 .3rem .9rem rgba(0, 0, 0, .08);
}

.surux-page-hero-full-facts > .surux-page-hero-fact:not(.is-featured) {
  flex: 1 1 calc(50% - .2rem);
  padding: .62rem .68rem;
  border: 1px solid color-mix(in srgb, var(--surux-border) 70%, transparent);
  border-radius: .58rem;
  background: color-mix(in srgb, var(--surux-surface) 86%, transparent);
}

.surux-page-hero-full-facts > .surux-page-hero-fact:not(.is-featured) dt {
  display: flex;
  align-items: center;
  gap: .34rem;
}

.surux-page-hero-full-facts > .surux-page-hero-fact:not(.is-featured) dt::before {
  width: .28rem;
  height: .28rem;
  flex: 0 0 .28rem;
  border-radius: 50%;
  background: var(--surux-page-hero-fact-accent);
  content: "";
}

.surux-page-hero-full-facts > .surux-page-hero-fact dd,
.surux-page-hero-full-facts > .surux-page-hero-fact .surux-page-hero-fact-value,
.surux-page-hero-full-facts > .surux-page-hero-fact dt {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

[data-bs-theme="light"] .surux-page-hero-full-facts > .surux-page-hero-fact dd {
  color: var(--surux-text);
}

[data-bs-theme="light"] .surux-page-hero-fact.is-primary,
[data-bs-theme="light"] .surux-page-hero-freshness.is-primary,
[data-bs-theme="light"] .surux-page-hero-fact.is-info,
[data-bs-theme="light"] .surux-page-hero-freshness.is-info {
  --surux-page-hero-fact-accent: #0369a1;
  --surux-page-hero-freshness-accent: #0369a1;
}

[data-bs-theme="light"] .surux-page-hero-fact.is-positive,
[data-bs-theme="light"] .surux-page-hero-freshness.is-positive {
  --surux-page-hero-fact-accent: var(--surux-success);
  --surux-page-hero-freshness-accent: var(--surux-success);
}

[data-bs-theme="light"] .surux-page-hero-fact.is-warning,
[data-bs-theme="light"] .surux-page-hero-freshness.is-warning {
  --surux-page-hero-fact-accent: #a16207;
  --surux-page-hero-freshness-accent: #a16207;
}

[data-bs-theme="light"] .surux-page-hero-fact.is-negative,
[data-bs-theme="light"] .surux-page-hero-freshness.is-negative {
  --surux-page-hero-fact-accent: var(--surux-danger);
  --surux-page-hero-freshness-accent: var(--surux-danger);
}

[data-bs-theme="light"] .surux-page-hero-freshness {
  color: var(--surux-text);
}

[data-bs-theme="light"] .surux-page-hero-full-facts > .surux-page-hero-fact.is-featured dt {
  color: color-mix(in srgb, var(--surux-text) 72%, var(--surux-muted));
}

:dir(rtl) .surux-page-hero-full-facts > .surux-page-hero-fact.is-featured {
  background:
    radial-gradient(circle at 0% 50%, color-mix(in srgb, var(--surux-page-hero-fact-accent) 14%, transparent), transparent 48%),
    linear-gradient(270deg, color-mix(in srgb, var(--surux-page-hero-fact-accent) 8%, transparent), transparent 58%),
    color-mix(in srgb, var(--surux-surface) 94%, var(--surux-app-bg));
}

:dir(rtl) .surux-page-hero-details-label::after {
  background: linear-gradient(270deg, color-mix(in srgb, var(--surux-border) 92%, transparent), transparent);
}

.surux-page-hero-content.is-full .surux-page-hero-details {
  grid-template-rows: 1fr;
  margin-top: .55rem;
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition:
    grid-template-rows .2s ease,
    margin-top .2s ease,
    opacity .16s ease,
    visibility 0s linear 0s;
}

@media (min-width: 992px) {
  .surux-page-lead {
    grid-template-columns: minmax(0, 1fr);
    column-gap: clamp(1rem, 2.4vw, 2.5rem);
    row-gap: .65rem;
  }

  .surux-page-lead-with-hero {
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem);
  }

  .surux-page-lead-hero-only {
    grid-template-columns: minmax(18rem, 24rem);
    justify-content: end;
  }

  .surux-page-lead-main {
    grid-column: 1;
  }

  .surux-page-lead-with-hero > .surux-page-lead-main {
    padding-inline-end: 0;
  }

  .surux-page-lead-aside {
    grid-column: 2;
  }

  .surux-page-lead-hero-only > .surux-page-lead-aside {
    grid-column: 1;
  }

  .surux-page-lead:has(.surux-page-hero-model [data-surux-hero-state="full"]) {
    z-index: 70;
  }

  .surux-page-hero-model {
    overflow: visible;
  }

  .surux-page-hero-model > .surux-page-hero-content {
    position: static;
  }

  .surux-page-hero-model .surux-page-hero-details {
    position: absolute;
    inset-inline: -1px;
    top: calc(100% + .4rem);
    z-index: 2;
    box-sizing: border-box;
    display: block;
    grid-template-rows: none;
    margin: 0;
    padding: .82rem;
    border: 1px solid color-mix(in srgb, var(--surux-border) 82%, rgba(255, 255, 255, .14));
    border-radius: .88rem;
    background:
      linear-gradient(150deg, color-mix(in srgb, var(--surux-surface) 96%, white 2%), color-mix(in srgb, var(--surux-surface) 97%, black 3%)),
      var(--surux-surface);
    box-shadow:
      0 1.25rem 3rem rgba(0, 0, 0, .46),
      0 .3rem .9rem rgba(0, 0, 0, .18),
      inset 0 1px 0 rgba(255, 255, 255, .075);
    transform: translateY(-.35rem);
    transition:
      opacity .16s ease,
      transform .2s ease,
      visibility 0s linear .2s;
  }

  [data-bs-theme="light"] .surux-page-hero-model .surux-page-hero-details {
    box-shadow:
      0 1.1rem 2.6rem rgba(15, 23, 42, .18),
      0 .25rem .75rem rgba(15, 23, 42, .08),
      inset 0 1px 0 rgba(255, 255, 255, .82);
  }

  .surux-page-hero-model .surux-page-hero-content.is-full .surux-page-hero-details {
    grid-template-rows: none;
    margin: 0;
    transform: translateY(0);
    transition:
      opacity .16s ease,
      transform .2s ease,
      visibility 0s linear 0s;
  }

  .surux-page-hero-model .surux-page-hero-content.is-full .surux-page-hero-details-inner {
    max-height: min(24rem, calc(100dvh - 15rem));
    overflow: auto;
    overscroll-behavior: contain;
  }
}

@media (max-width: 991.98px) {
  .surux-page-hero-with-actions .surux-page-hero-heading {
    padding-inline-end: 0;
  }

  .surux-page-hero-model .surux-page-hero-details {
    position: static;
  }
}

/* Opt-in compact operational lead. Preserve facts, expansion and touch targets. */
@media (max-width: 767.98px) {
  [data-surux-compact-mobile-lead="true"] {
    --surux-workspace-gap: .5rem;
  }

  [data-surux-compact-mobile-lead="true"] .surux-page-lead {
    gap: .4rem;
    margin-bottom: var(--surux-section-gap);
  }

  [data-surux-compact-mobile-lead="true"] .surux-page-header .surux-eyebrow {
    margin-bottom: .15rem;
  }

  [data-surux-compact-mobile-lead="true"] .surux-page-title-row h1 {
    font-size: 1.5rem;
    margin-bottom: 0;
  }

  [data-surux-compact-mobile-lead="true"] .surux-page-hero-model {
    min-height: 0;
    padding: .5rem;
  }

  [data-surux-compact-mobile-lead="true"] .surux-page-hero-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    align-items: center;
    gap: .4rem;
  }

  [data-surux-compact-mobile-lead="true"] .surux-page-hero-heading {
    gap: .35rem;
  }

  [data-surux-compact-mobile-lead="true"] .surux-page-hero-copy strong {
    font-size: .8rem;
    white-space: normal;
  }

  [data-surux-compact-mobile-lead="true"] .surux-page-hero-summary-facts {
    margin: 0;
  }

  [data-surux-compact-mobile-lead="true"] .surux-page-hero-summary-facts > .surux-page-hero-fact {
    padding: .4rem;
  }

  [data-surux-compact-mobile-lead="true"] .surux-page-hero-summary-facts dt {
    white-space: normal;
  }

  [data-surux-compact-mobile-lead="true"] .surux-page-hero-details {
    grid-column: 1 / -1;
  }
}

@media (max-width: 399.98px) {
  .surux-page-hero-details-heading {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .surux-page-hero-freshness {
    max-width: 100%;
    margin-inline-start: .95rem;
  }

  .surux-page-hero-full-facts > .surux-page-hero-fact:not(.is-featured) {
    flex-basis: 100%;
  }

  .surux-page-hero-full-facts > .surux-page-hero-fact dd {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .surux-page-hero-details,
  .surux-page-hero-model .surux-page-hero-details,
  .surux-page-hero-model .surux-page-hero-content.is-full .surux-page-hero-details,
  html .btn.surux-button.surux-command-button.surux-command-button-subtle-surface.surux-page-hero-toggle .surux-command-button-icon {
    transition: none;
  }
}

.surux-page-content {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: .85rem;
}

/* Report mode uses the existing shell's content width and scroll owner. */
.surux-page-shell > .surux-page-content.surux-report-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  align-content: start;
  gap: 1rem;
}

.surux-report-results {
  display: flex;
  flex-direction: column;
  gap: .85rem;
  min-width: 0;
  min-height: 0;
}

.surux-report-results > * {
  flex-shrink: 0;
}

.surux-report-result-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .65rem;
}

.surux-report-result-heading { justify-content: space-between; }
.surux-report-export-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem;
  margin-inline-start: auto;
}
.surux-report-context {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .35rem .85rem;
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (min-width: 992px) {
  .surux-page-shell > .surux-page-content.surux-report-layout.is-sidebar {
    grid-template-columns: minmax(16rem, 21rem) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
  }
}

@media (max-width: 991.98px) {
  .surux-page-shell > .surux-page-content.surux-report-layout {
    grid-template-rows: auto auto;
  }
}

.surux-page-shell-content-wide {
  --surux-page-content-max-width: 112rem;
}

.surux-page-shell-content-workspace {
  --surux-page-content-max-width: 120rem;
}

.surux-page-shell.surux-page-shell-content-constrained > .surux-page-content {
  width: min(100%, var(--surux-page-content-max-width, 100%));
  margin-inline: auto;
}

.surux-page-shell > .surux-page-header > .surux-page-header-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .55rem;
}

.surux-mobile-list {
  min-width: 0;
  display: grid;
  gap: .62rem;
  padding-bottom: .5rem;
}

/* Group total sits in the last column, in the summary tone, so it lines up with an amount column.
   The tone class sets --surux-summary-color; this is what paints it.
   Bootstrap paints every table cell at (0,1,1) via .table > :not(caption) > * > *, which beats the class
   alone. The same shape with this class is (0,2,1), so the tone wins on the cell. The phone header is
   an h3, outside that shape, and keeps the class rule. */
.surux-record-group-value,
.table > :not(caption) > * > .surux-record-group-value {
  color: var(--surux-summary-color, var(--surux-text));
  font-variant-numeric: tabular-nums;
  font-weight: 750;
  text-align: end;
  white-space: nowrap;
}

.surux-mobile-list > h3:has(.surux-record-group-value) {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  min-width: 0;
}

.surux-record-code {
  display: inline-block;
  max-width: 100%;
  color: var(--surux-primary);
  font-family: var(--bs-font-monospace), ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .012em;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: baseline;
}

.surux-record-code-nowrap {
  white-space: nowrap;
}

.surux-record-code-sx {
  text-transform: uppercase;
}

.surux-record-code-sx-secondary {
  color: var(--bs-secondary-color);
  font-weight: 500;
}

.surux-record-code-large {
  font-size: 2rem;
  letter-spacing: .08em;
}

.surux-code-panel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .75rem;
  min-width: 0;
}

.surux-code-panel-subject {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem .7rem;
  min-width: 0;
  padding-bottom: .7rem;
  border-bottom: var(--surux-border-width) solid var(--surux-border);
  color: var(--surux-text);
}

.surux-code-panel-subject > .surux-status-chip {
  flex: 0 0 auto;
}

.surux-code-panel-subject > span:not(.surux-status-chip):not(.surux-record-code) {
  font-weight: 700;
  min-width: 0;
  overflow-wrap: anywhere;
}

.surux-code-panel-plate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .2rem;
  min-width: 0;
  padding: .85rem 1.15rem .6rem;
}

.surux-code-panel-code {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  max-width: 100%;
}

.surux-code-panel-code > .surux-command-button {
  flex: 0 0 auto;
}

.surux-code-panel-caption {
  color: var(--surux-control-label-color);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.surux-code-panel-hint {
  margin: 0;
  color: var(--surux-muted);
  font-size: .92rem;
  line-height: 1.4;
}

.surux-table .surux-record-code {
  font-size: var(--surux-table-record-code-size);
  line-height: inherit;
  vertical-align: text-bottom;
}

.surux-employee-reference {
  display: inline-flex;
  align-items: baseline;
  gap: .45rem;
  min-width: 0;
  font-weight: 400;
}

.surux-employee-reference .surux-record-code {
  vertical-align: baseline;
  line-height: inherit;
}

.surux-employee-reference-name {
  min-width: 0;
  overflow-wrap: anywhere;
}

.surux-mobile-list-item {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1.32rem;
  align-items: stretch;
  gap: .62rem;
  padding: .78rem .28rem .78rem .86rem;
  border: 1px solid var(--surux-border);
  border-radius: .58rem;
  background:
    linear-gradient(135deg, rgba(var(--surux-primary-rgb), .05), transparent 56%),
    color-mix(in srgb, var(--surux-surface) 94%, transparent);
  color: var(--surux-text);
  text-decoration: none;
  box-shadow: 0 .65rem 1.35rem rgba(0, 0, 0, .1);
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
  overflow: hidden;
}

.surux-mobile-list-item::after {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: 2.6rem;
  border-right: 1px solid color-mix(in srgb, var(--surux-primary) 34%, transparent);
  background: linear-gradient(90deg, transparent, rgba(var(--surux-primary-rgb), .075));
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease;
}

.surux-mobile-list-item:hover,
.surux-mobile-list-item:focus-visible {
  border-color: rgba(var(--surux-primary-rgb), .45);
  color: var(--surux-text);
  box-shadow: 0 .85rem 1.75rem rgba(0, 0, 0, .16);
  outline: none;
  transform: translateY(-1px);
}

.surux-mobile-list-item:hover::after,
.surux-mobile-list-item:focus-visible::after {
  opacity: .58;
}

/* Keep card navigation separate from interactive content in every fragment slot. */
.surux-mobile-list-item-navigable .surux-mobile-list-item-chevron {
  pointer-events: none;
}

.surux-mobile-list-item-card-link {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

.surux-mobile-list-item-navigable .surux-mobile-list-item-body,
.surux-mobile-list-item-navigable .surux-mobile-list-item-content {
  position: static;
  z-index: auto;
}

.surux-mobile-list-item-navigable :is(button, input, select, textarea, a:not(.surux-mobile-list-item-card-link), summary, [role="button"], [tabindex], [contenteditable="true"]) {
  position: relative;
  z-index: 2;
}

.surux-mobile-list-item:has(> .surux-mobile-list-item-card-link:focus-visible) {
  outline: 2px solid var(--surux-primary);
  outline-offset: 2px;
}

.surux-mobile-list-item-body {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: grid;
  align-content: start;
  gap: .18rem;
}
.surux-mobile-list-item-link {
  position: relative;
  z-index: 1;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

/* The chevron is a sibling of the actions, at the card's end. The link only carries the body,
   so it must not take a second track or a 100% width that pushes the menu onto the next row. */
.surux-mobile-list-item > .surux-mobile-list-item-link {
  width: auto;
  align-self: stretch;
}.surux-mobile-list-item-selection,
.surux-mobile-list-item-actions {
  position: relative;
  z-index: 2;
  align-self: start;
  display: flex;
  align-items: center;
  min-height: calc(.94rem * 1.24);
  height: auto;
}
.surux-mobile-list-item-actions:has(> .surux-row-actions:only-child) {
  height: calc(.94rem * 1.24);
}.surux-mobile-list-item-selection {
  padding-top: .15rem;
}.surux-mobile-list-item:has(.surux-mobile-list-item-selection) {
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding-inline: .72rem;
}.surux-mobile-list-item:has(.surux-mobile-list-item-actions):not(:has(.surux-mobile-list-item-selection)) {
  grid-template-columns: minmax(0, 1fr) auto;
  padding-inline-end: .72rem;
}
.surux-mobile-list-item:has(> .surux-mobile-list-item-chevron):has(> .surux-mobile-list-item-actions):not(:has(> .surux-mobile-list-item-selection)) {
  grid-template-columns: minmax(0, 1fr) auto auto;
}
.surux-mobile-list-item:has(> .surux-mobile-list-item-chevron):has(> .surux-mobile-list-item-actions):has(> .surux-mobile-list-item-selection) {
  grid-template-columns: auto minmax(0, 1fr) auto auto;
}.surux-mobile-list-item-actions {
  justify-self: end;
}

.surux-mobile-list-item-identifier,
.surux-mobile-list-item-title,
.surux-mobile-list-item-subtitle,
.surux-mobile-list-item-supporting {
  min-width: 0;
}

.surux-mobile-list-item-identifier {
  width: fit-content;
}

.surux-mobile-list-item-title {
  color: var(--surux-text);
  font-size: .94rem;
  font-weight: 620;
  line-height: 1.24;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
}

.surux-mobile-list-item-subtitle {
  color: color-mix(in srgb, var(--surux-muted) 90%, var(--surux-primary) 10%);
  font-size: .8rem;
  line-height: 1.25;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
}

.surux-mobile-list-item-supporting,
.surux-mobile-list-item-meta-primary {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: color-mix(in srgb, var(--surux-muted) 88%, var(--surux-primary) 12%);
  font-size: .78rem;
  line-height: 1.25;
}

.surux-mobile-list-item-supporting span,
.surux-mobile-list-item-meta-primary span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.surux-mobile-list-item-supporting i,
.surux-mobile-list-item-meta-primary i {
  flex: 0 0 auto;
  color: var(--surux-primary);
  font-size: .76rem;
}

.surux-mobile-list-item-footer {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: .9rem;
  margin-top: .46rem;
  padding-top: .5rem;
  border-top: 1px solid color-mix(in srgb, var(--surux-border) 78%, transparent);
}

.surux-mobile-list-item-footer-status {
  display: inline-flex;
  align-items: end;
  justify-content: end;
  gap: .6rem;
  min-width: max-content;
}

.surux-mobile-list-item-footer-status .surux-status-chip {
  min-height: 23px;
  padding: .22rem .5rem;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;
}

.surux-mobile-list-item-meta-secondary {
  display: grid;
  gap: .04rem;
  text-align: right;
  line-height: 1.08;
}

.surux-mobile-list-item-meta-secondary span {
  color: color-mix(in srgb, var(--surux-muted) 88%, var(--surux-text) 12%);
  font-size: .58rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.surux-mobile-list-item-meta-secondary strong {
  color: color-mix(in srgb, var(--surux-text) 82%, var(--surux-muted) 18%);
  font-size: .8rem;
  font-weight: 620;
}

.surux-mobile-list-item-chevron {
  position: relative;
  z-index: 1;
  align-self: stretch;
  width: 1.32rem;
  min-width: 1.32rem;
  display: inline-grid;
  place-items: center;
  border-left: 1px solid color-mix(in srgb, var(--surux-border) 76%, rgba(var(--surux-primary-rgb), .22));
  color: color-mix(in srgb, var(--surux-muted) 72%, var(--surux-primary) 28%);
  font-size: .62rem;
  opacity: .82;
  transition: color .16s ease, opacity .16s ease;
}

.surux-mobile-list-item:hover .surux-mobile-list-item-chevron,
.surux-mobile-list-item:focus-visible .surux-mobile-list-item-chevron {
  color: var(--surux-primary);
  opacity: 1;
}

.surux-mobile-list-item-readonly {
  cursor: default;
}

.surux-mobile-list-item-readonly:hover,
.surux-mobile-list-item-readonly:focus-visible {
  border-color: var(--surux-border);
  box-shadow: 0 .65rem 1.35rem rgba(0, 0, 0, .1);
  transform: none;
}

.surux-mobile-list-item-readonly:hover::after,
.surux-mobile-list-item-readonly:focus-visible::after {
  opacity: 0;
}

.surux-mobile-list-item:has(.surux-row-readonly-hint):not(:has(.surux-mobile-list-item-actions, .surux-mobile-list-item-selection)) {
  grid-template-columns: minmax(0, 1fr) auto;
}

.surux-mobile-list-item:has(.surux-row-readonly-hint):has(.surux-mobile-list-item-actions):not(:has(.surux-mobile-list-item-selection)) {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.surux-mobile-list-item:has(.surux-row-readonly-hint):has(.surux-mobile-list-item-selection) {
  grid-template-columns: auto minmax(0, 1fr) auto auto;
}

.surux-mobile-list-item > .surux-row-readonly-hint {
  align-self: start;
}

.surux-row-identity {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-width: 0;
}

.surux-row-identity-main {
  flex: 1 1 auto;
  min-width: 0;
}

.surux-row-readonly-hint {
  flex: 0 0 auto;
}

.surux-list-grid {
  display: grid;
  gap: var(--surux-section-gap);
}

.surux-list-card {
  min-width: 0;
  min-height: var(--surux-list-row-height);
  border: 1px solid var(--surux-border);
  border-radius: var(--surux-band-radius);
  padding: var(--surux-list-cell-padding-x) var(--surux-list-edge-inset);
  background: color-mix(in srgb, var(--surux-surface) 94%, transparent);
  box-shadow: 0 .65rem 1.35rem rgba(0, 0, 0, .1);
}

.surux-list-card-title-row {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--surux-list-cell-padding-x);
}

.surux-list-card-title {
  margin: 0;
  min-width: 0;
  color: var(--surux-text);
  font-size: inherit;
  font-weight: inherit;
  line-height: 1.2;
}

.surux-list-card-title-row .surux-status-chip {
  flex: 0 0 auto;
}

.surux-list-card-time {
  margin-left: auto;
  color: var(--surux-muted);
  font-size: .78rem;
  line-height: 1.2;
  white-space: nowrap;
}

.surux-list-card-subtitle {
  margin: .25rem 0 0;
  color: var(--surux-text);
  font-size: .88rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.surux-list-card-detail {
  margin: .25rem 0 0;
  color: var(--surux-muted);
  font-size: .78rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.surux-list-card-meta {
  min-width: 0;
  margin: .25rem 0 0;
  overflow: hidden;
  color: var(--surux-muted);
  font-size: .78rem;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.surux-list-secondary-text {
  max-width: 34rem;
  overflow: hidden;
  color: var(--surux-muted);
  font-size: .8rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.surux-table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--surux-text);
  --bs-table-border-color: var(--surux-border);
  font-size: .9rem;
}

.surux-table thead th {
  color: var(--surux-muted);
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  background: rgba(255, 255, 255, .035);
  vertical-align: middle;
  white-space: nowrap;
}

.surux-sort-link {
  width: 100%;
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--surux-muted);
  line-height: 1;
  text-decoration: none;
  transition: color .16s ease;
}

.surux-sort-link i {
  width: .8rem;
  height: .8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .78rem;
  line-height: 1;
  opacity: .58;
}

.surux-sort-link:hover,
.surux-sort-link.active {
  color: var(--surux-text);
}

.surux-sort-link.active i {
  color: var(--surux-primary);
  opacity: 1;
}

.surux-row-link,
.surux-row-activatable {
  cursor: pointer;
}

.surux-row-link:hover,
.surux-row-activatable:hover {
  background: rgba(var(--surux-primary-rgb), .08);
}

/* Plain data rows: a lighter primary wash than the 8% on rows that open a record.
   The wash is its own layer. It does not rewrite --surux-list-row-tint or
   --surux-list-row-tint-colour, so a status row keeps its meaning. Selected
   (including aria-selected and the preference sample), opening and menu-open
   rows keep their own tints. Group, heading, waiting, empty and loading rows do not.
   Background only, and only on hover-capable devices. */
@media (hover: hover) {
  .surux-table > tbody > tr:not(
    .surux-row-link,
    .surux-row-activatable,
    .surux-row-selected,
    .surux-record-opening,
    .surux-day-group-row,
    .surux-financial-summary-group,
    .surux-payment-plan-group-row,
    .surux-payment-plan-awaiting-row,
    .surux-planner-account-day-row,
    .surux-preference-sample-selected,
    [aria-selected="true"]
  ):not(:has(
    .surux-empty-state,
    .surux-loading-shimmer,
    .surux-day-group-heading,
    .surux-payment-plan-awaiting,
    .capture-quiet,
    th[scope="rowgroup"],
    th[scope="colgroup"]
  )):not(:has(.surux-row-actions-menu[open]:not([data-surux-command-overflow-inline]))):hover {
    --surux-list-row-plain-hover: 5%;
    background-image: linear-gradient(rgba(var(--surux-primary-rgb), .05), rgba(var(--surux-primary-rgb), .05));
  }
}

/* Shared edit-page visual and interaction contract. */
.surux-edit-overview {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.surux-edit-overview-full {
  min-width: 0;
}

.surux-edit-overview-primary,
.surux-edit-overview-context {
  min-width: 0;
}

.surux-edit-overview-lane-stack {
  gap: var(--surux-page-panel-gap);
}

.surux-edit-overview-primary:has(.surux-picker-open),
.surux-edit-overview-context:has(.surux-picker-open) {
  position: relative;
  z-index: 2060;
}

.surux-salary-structure-line-summary {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
}

.surux-salary-structure-line-summary > div {
  min-width: 0;
  display: grid;
  gap: .18rem;
}

.surux-salary-structure-line-summary strong,
.surux-salary-structure-line-summary small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.surux-salary-structure-line-summary small,
.surux-salary-structure-line-summary > span {
  color: var(--surux-muted);
}

.surux-salary-structure-line-summary > span {
  flex: 0 0 auto;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.surux-edit-section {
  min-width: 0;
  overflow: hidden;
}

.surux-edit-section:has(.surux-picker-open) {
  position: relative;
  z-index: 2060;
  overflow: visible;
}

.surux-edit-section > .surux-card-header {
  align-items: flex-start;
}

.surux-edit-section > .surux-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--surux-border);
}

.surux-edit-section-heading {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: .78rem;
}

.surux-edit-section-heading > div {
  min-width: 0;
}

.surux-edit-section-heading p {
  margin: 0 0 .12rem;
  color: color-mix(in srgb, var(--surux-primary) 82%, var(--surux-text) 18%);
  font-size: .67rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.surux-edit-section-heading small {
  display: block;
  max-width: 54rem;
  margin-top: .26rem;
  color: var(--surux-muted);
  font-size: .79rem;
  line-height: 1.45;
}

.surux-edit-section-icon {
  flex: 0 0 auto;
  width: 2.55rem;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid rgba(var(--surux-primary-rgb), .2);
  border-radius: .72rem;
  color: color-mix(in srgb, var(--surux-primary) 88%, var(--surux-text) 12%);
  background: rgba(var(--surux-primary-rgb), .1);
}

.surux-edit-section-actions {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .55rem;
  flex-wrap: wrap;
}

/* Camera group membership rows.
   Scoped to the camera group editor rather than named generically: this is the
   only page pairing a remote-endpoint picker with a membership list that saves
   on its own, so a shared name would promise a reuse that does not exist yet.
   HitlistEdit does the same job with SuruXMultiPicker chips, which cannot carry
   a camera's coordinates or its unplaced warning. */
.surux-camera-group-member-add {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: .6rem;
}

/* The artwork previews on the page's own surface, at the 4:5 the community page uses, so what
   is checked here is the shape that gets rendered rather than a letterboxed thumbnail. */
.surux-camera-group-background-preview {
  max-width: 260px;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--surux-border);
  border-radius: var(--surux-radius-md);
  overflow: hidden;
  background: var(--surux-surface-2);
}

.surux-camera-group-background-preview > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.surux-camera-group-background-form {
  display: grid;
  gap: .75rem;
  margin-top: 1rem;
  max-width: 520px;
}

.surux-camera-group-background-actions {
  display: flex;
  gap: .5rem;
}

.surux-camera-group-member-list-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  margin: 1.35rem 0 .6rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid color-mix(in srgb, var(--surux-border) 74%, transparent);
}

.surux-camera-group-member-list-header > p {
  margin: 0;
  color: color-mix(in srgb, var(--surux-primary) 82%, var(--surux-text) 18%);
  font-size: .67rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.surux-camera-group-member-list-count {
  color: var(--surux-muted);
  font-size: .76rem;
  font-weight: 700;
}

.surux-camera-group-member-list {
  display: grid;
  gap: .4rem;
}

.surux-camera-group-member-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .85rem;
  padding: .6rem .7rem .6rem .6rem;
  border: 1px solid transparent;
  border-radius: var(--surux-radius-md);
  background: color-mix(in srgb, var(--surux-surface-2) 62%, transparent);
  transition: background var(--surux-transition), border-color var(--surux-transition);
}

.surux-camera-group-member-row-icon {
  flex: 0 0 auto;
  width: 2.1rem;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid rgba(var(--surux-primary-rgb), .2);
  border-radius: .58rem;
  font-size: .82rem;
  color: color-mix(in srgb, var(--surux-primary) 88%, var(--surux-text) 12%);
  background: rgba(var(--surux-primary-rgb), .1);
}

.surux-camera-group-member-row-body {
  min-width: 0;
}

.surux-camera-group-member-row-title {
  overflow: hidden;
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.surux-camera-group-member-row-meta {
  margin-top: .12rem;
  color: var(--surux-muted);
  font-size: .76rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
  line-height: 1.35;
}

.surux-camera-group-member-row-flag {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  color: var(--surux-workflow-submitted-color);
  font-variant-numeric: normal;
}

/* The remove control stays quiet until the row is engaged, so three cameras do
   not read as three competing dismiss buttons. Keyboard users get it from
   :focus-within, and coarse pointers get it unconditionally below. */
.surux-camera-group-member-row .surux-command-button-icon-only-subtle {
  border-color: transparent;
  background: transparent;
  opacity: .55;
  transition: opacity var(--surux-transition);
}

.surux-camera-group-member-row:hover,
.surux-camera-group-member-row:focus-within {
  border-color: color-mix(in srgb, var(--surux-border) 90%, transparent);
  background: var(--surux-surface-2);
}

.surux-camera-group-member-row:hover .surux-command-button-icon-only-subtle,
.surux-camera-group-member-row:focus-within .surux-command-button-icon-only-subtle {
  opacity: 1;
}

@media (hover: none) and (pointer: coarse) {
  .surux-camera-group-member-row .surux-command-button-icon-only-subtle {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .surux-camera-group-member-row,
  .surux-camera-group-member-row .surux-command-button-icon-only-subtle {
    transition: none;
  }
}

.surux-content-group {
  min-width: 0;
}

.surux-content-group-header {
  margin-bottom: .75rem;
  padding-bottom: .55rem;
  border-bottom: 1px solid color-mix(in srgb, var(--surux-border) 74%, transparent);
}

.surux-content-group-title {
  margin: 0;
  color: var(--surux-text);
  font-size: .92rem;
  font-weight: 750;
  line-height: 1.35;
}

.surux-content-group-body {
  min-width: 0;
}

.surux-read-only-field {
  min-width: 0;
  display: grid;
  align-content: start;
}

/* Match the editable control's single-line geometry so both can share a form row. */
.surux-read-only-value {
  min-width: 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: .58rem;
  padding: .25rem .75rem .75rem;
  color: var(--surux-text);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  overflow-wrap: break-word;
}

.surux-read-only-value > :is(span, a) {
  min-width: 0;
  overflow-wrap: break-word;
}

.surux-read-only-detail {
  opacity: .72;
  font-size: .8rem;
}

/* A textarea's value carries its own line breaks, and the flex row above would collapse them
   into one line. Long content scrolls in place rather than pushing the rest of the form down. */
.surux-read-only-field.is-multiline .surux-read-only-value {
  display: block;
  white-space: pre-wrap;
  max-height: 22rem;
  overflow-y: auto;
}

.surux-read-only-value i {
  color: var(--surux-primary);
}

.surux-read-only-value a {
  color: inherit;
  text-decoration: none;
}

.surux-read-only-value a:hover {
  color: var(--surux-primary);
  text-decoration: underline;
}

.surux-read-only-field.surux-field-value-end .surux-read-only-value {
  justify-content: flex-end;
  text-align: end;
}

@media (min-width: 80rem) {
  .surux-edit-overview:not(.surux-edit-overview-single) {
    grid-template-columns: minmax(0, 1.55fr) minmax(24rem, .85fr);
  }

  .surux-salary-structure-revision-layout > .surux-edit-overview-context {
    position: sticky;
    top: 0;
    max-height: calc(100dvh - var(--surux-topbar-height, 64px) - 1.5rem);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    padding-inline-end: .25rem;
  }

  .surux-salary-structure-revision-layout > .surux-edit-overview-context:has(.surux-picker-open) {
    overflow: visible;
  }

  .surux-edit-overview-full {
    grid-column: 1 / -1;
  }

  .surux-form-grid.surux-edit-context-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* A spanning field must use this single explicit column, not create an
     implicit second track through the generic two-column span utility. */
  .surux-form-grid.surux-edit-context-grid > .grid-column-span-2 {
    grid-column: 1 / -1;
  }
}

@media (max-width: 40rem) {
  .surux-salary-structure-hero-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .surux-salary-structure-hero-actions > .surux-command-button {
    width: 100%;
  }

  .surux-salary-structure-line-summary {
    align-items: stretch;
    flex-direction: column;
    gap: .35rem;
  }

  .surux-salary-structure-line-summary strong,
  .surux-salary-structure-line-summary small {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }

}

.surux-record-opening {
  cursor: progress;
}

tr.surux-record-opening > td,
.surux-mobile-list-item.surux-record-opening,
[data-surux-record-href].surux-record-opening {
  background: color-mix(in srgb, var(--surux-primary) 13%, var(--surux-surface));
}

tr.surux-record-opening > td:first-child,
.surux-mobile-list-item.surux-record-opening,
[data-surux-record-href].surux-record-opening {
  box-shadow: inset .2rem 0 0 color-mix(in srgb, var(--surux-primary) 82%, white 18%);
}

.surux-record-opening-indicator {
  width: 1rem;
  height: 1rem;
  margin-inline-start: .42rem;
  display: inline-grid;
  place-items: center;
  color: var(--surux-primary);
  font-size: .76rem;
  line-height: 1;
  vertical-align: -.04rem;
}

.surux-mobile-list-item-title > .surux-record-opening-indicator {
  display: inline-grid;
}

@media (prefers-reduced-motion: reduce) {
  .surux-record-opening-indicator .fa-spin {
    animation: none;
  }
}

.surux-record-link,
.surux-record-link:visited {
  color: inherit;
  font-weight: 600;
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: .08em;
  text-underline-offset: .16em;
  transition: text-decoration-color .16s ease;
}

.surux-record-link:hover,
.surux-record-link:active {
  color: inherit;
  text-decoration-color: currentColor;
}

.surux-record-link:focus-visible {
  border-radius: .2rem;
  color: inherit;
  outline: 2px solid rgba(var(--surux-primary-rgb), .72);
  outline-offset: 2px;
  text-decoration-color: currentColor;
}

.surux-workflow-summary-lane:focus-visible,
.surux-workflow-mobile-lanes a:focus-visible,
.surux-workflow-board-scroll:focus-visible {
  border-radius: var(--surux-radius-md);
  outline: 2px solid rgba(var(--surux-primary-rgb), .72);
  outline-offset: 2px;
}

.surux-data-table-card {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  border-radius: var(--surux-band-radius);
}

.surux-data-table-list .surux-table > :not(caption) > * > * {
  box-sizing: border-box;
  height: var(--surux-list-row-height);
  padding: var(--surux-list-cell-padding-block, 0px) var(--surux-list-cell-padding-x);
  vertical-align: middle;
}

.surux-data-table-list .surux-table thead th {
  height: var(--surux-list-header-height);
}

.surux-data-table-list .surux-table th:first-child,
.surux-data-table-list .surux-table td:first-child {
  padding-inline: var(--surux-list-edge-inset) var(--surux-list-cell-padding-x);
}

.surux-data-table-list .surux-table th:last-child,
.surux-data-table-list .surux-table td:last-child {
  padding-inline: var(--surux-list-cell-padding-x) var(--surux-list-edge-inset);
}

.surux-data-table-list .surux-table th:first-child:last-child,
.surux-data-table-list .surux-table td:first-child:last-child {
  padding-inline: var(--surux-list-edge-inset);
}

/* Day group headings are text. The card row height is fixed, so the heading opts out and grows
   with enlarged text instead of clipping. */
.surux-day-group-heading {
  color: var(--surux-text);
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: normal;
  text-align: start;
  text-transform: none;
  white-space: normal;
  overflow-wrap: break-word;
}

.surux-table > tbody.surux-day-group > tr.surux-day-group-row > th.surux-day-group-heading {
  height: auto;
  min-height: var(--surux-list-row-height);
  padding-block: .4rem;
  background: color-mix(in srgb, var(--surux-surface-2) 72%, var(--surux-surface) 28%);
  border-bottom: 1px solid var(--surux-border);
  box-shadow: none;
  color: var(--surux-text);
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: normal;
  text-align: start;
  text-transform: none;
  white-space: normal;
  overflow-wrap: break-word;
}

h1.surux-day-group-heading,
h2.surux-day-group-heading,
h3.surux-day-group-heading,
h4.surux-day-group-heading,
h5.surux-day-group-heading,
h6.surux-day-group-heading {
  min-width: 0;
  margin: .85rem 0 .15rem;
  padding: 0 0 .2rem;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--surux-border);
}

.surux-data-table-list .surux-table-resizable thead th:last-child {
  padding-inline-end: var(--surux-list-edge-inset) !important;
}

.surux-data-table-list[data-surux-list-footer] .surux-table > tfoot > tr:last-child > *,
.surux-data-table-list[data-surux-list-footer] .surux-table > tbody:last-child > tr:last-child > * {
  border-bottom-width: 0;
}

.surux-data-table-scroll {
  min-width: 0;
  max-width: 100%;
  overflow: auto;
  --surux-row-control-pad-start: var(--surux-list-edge-inset);
  --surux-row-control-pad-end: .5rem;
  --surux-row-control-gap: .5rem;
  --surux-row-control-select: 0px;
  --surux-row-control-menu: 0px;
  --surux-row-control-width: calc(
    var(--surux-row-control-pad-start) +
    var(--surux-row-control-select) +
    var(--surux-row-control-menu) +
    var(--surux-row-control-pad-end)
  );
  --surux-list-pin-bg: color-mix(in srgb, var(--surux-surface) 92%, var(--surux-app-bg));
  --surux-list-pin-shadow: rgba(0, 0, 0, .22);
  --surux-list-pin-dir: 1;
  --surux-list-pin-edge: calc(var(--surux-list-pin-dir) * 6px) 0 8px -6px var(--surux-list-pin-shadow);
  --surux-thead-cell-shadow: inset 0 -1px 0 var(--surux-border), 0 2px 0 rgba(0, 0, 0, .1);
  scroll-padding-inline-start: calc(var(--surux-pinned-lead-inline-size, 0px) + 5px);
  scroll-padding-block-start: calc(var(--surux-list-header-height) + 5px);
}
.surux-row-control-column :is(a, button, input, select, textarea, summary, [tabindex]),
.surux-data-table-scroll > .surux-table > :is(thead, tbody, tfoot) > tr > .surux-row-control-column + :is(th, td):not([colspan]:not([colspan="1"])):not(.surux-column-wrap) :is(a, button, input, select, textarea, summary, [tabindex]),
.surux-data-table-desktop > .surux-data-table-scroll > .surux-table:not([data-surux-row-control]):not([data-surux-rowspan]) > :is(thead, tbody, tfoot) > tr > :is(th, td):first-child :is(a, button, input, select, textarea, summary, [tabindex]) {
  scroll-margin-inline-start: calc(-1 * (var(--surux-pinned-lead-inline-size, 0px) + 5px));
}
.surux-data-table-embedded .surux-data-table-scroll {
  --surux-row-control-pad-start: .5rem;
}
.surux-data-table-scroll:has(> .surux-table > :is(thead, tbody) > tr > .surux-row-control-column .surux-row-select) {
  --surux-row-control-select: calc(1.05rem + var(--surux-row-control-gap));
}
.surux-data-table-scroll:has(> .surux-table > :is(thead, tbody) > tr > .surux-row-control-column .surux-row-actions-menu) {
  --surux-row-control-menu: 2.25rem;
}
[data-bs-theme="light"] .surux-data-table-scroll {
  --surux-list-pin-bg: color-mix(in srgb, var(--surux-surface) 96%, var(--surux-app-bg));
}
.surux-modal .surux-data-table-scroll,
.surux-drawer .surux-data-table-scroll {
  --surux-list-pin-bg: var(--surux-surface);
}
[data-surux-contrast="high"] .surux-data-table-scroll {
  --surux-list-pin-bg: var(--surux-surface);
}
.surux-data-table-scroll:dir(rtl) {
  --surux-list-pin-dir: -1;
}

.surux-data-table-embedded .surux-data-table-scroll[tabindex]:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--surux-primary) 72%, white 28%);
  outline-offset: -2px;
}

@supports selector(:has(*)) {
  .surux-data-table-card > .surux-data-table-desktop-shell > .surux-data-table-scroll[tabindex]:focus-visible {
    outline: none;
  }
}

.surux-data-table-card:has(> .surux-data-table-desktop-shell > .surux-data-table-scroll[tabindex]:focus-visible) {
  outline: 2px solid var(--surux-list-focus-ring, var(--surux-primary));
  outline-offset: 3px;
}

.surux-data-table-scroll .surux-table {
  margin-bottom: 0;
}

.surux-data-table-scroll .surux-table thead th {
  position: sticky;
  top: 0;
  z-index: 7;
  background: color-mix(in srgb, var(--surux-surface) 90%, #000 10%);
  box-shadow: var(--surux-thead-cell-shadow);
}
.surux-data-table-scroll .surux-table thead th:has(.surux-column-filter-root.is-open) {
  z-index: 9;
}

@media screen and (min-width: 768px) {
  .surux-data-table-scroll > .surux-table:has(> thead > tr > .surux-row-control-column),
  .surux-data-table-desktop > .surux-data-table-scroll > .surux-table:not(:has(> tbody > tr > [rowspan]:not([rowspan="1"]))) {
    border-collapse: separate;
    border-spacing: 0;
  }

  .surux-data-table-scroll > .surux-table[data-surux-row-control][data-surux-table-foot] > tbody > tr:last-child > *,
  .surux-data-table-desktop > .surux-data-table-scroll > .surux-table[data-surux-table-foot] > tbody > tr:last-child > * {
    border-bottom-width: 0;
  }

  .surux-data-table-scroll > .surux-table:has(> thead > tr > .surux-row-control-column) > :is(thead, tbody, tfoot) > tr > .surux-row-control-column,
  .surux-data-table-desktop > .surux-data-table-scroll > .surux-table > :is(thead, tbody, tfoot) > tr > .surux-row-control-column {
    position: sticky;
    inset-inline-start: 0;
    box-sizing: border-box;
    width: var(--surux-row-control-width);
    min-width: var(--surux-row-control-width);
    max-width: var(--surux-row-control-width);
    padding-inline-start: var(--surux-row-control-pad-start);
    padding-inline-end: var(--surux-row-control-pad-end);
    text-align: start;
    overflow: visible;
    white-space: nowrap;
  }

  .surux-table-resizable.surux-table thead th.surux-row-control-column {
    position: sticky;
    inset-inline-start: 0;
  }

  .surux-row-control {
    display: inline-flex;
    align-items: center;
    gap: var(--surux-row-control-gap);
    inline-size: calc(var(--surux-row-control-select) + var(--surux-row-control-menu));
    max-inline-size: 100%;
  }

  .surux-row-control > .surux-row-actions-menu {
    min-width: 0;
    margin-inline-start: 0;
    justify-content: flex-start;
  }

  .surux-data-table-scroll > .surux-table:has(> thead > tr > .surux-row-control-column) > :is(thead, tbody, tfoot) > tr > .surux-row-control-column + :is(th, td):not([colspan]:not([colspan="1"])):not(.surux-column-wrap) {
    position: sticky;
    inset-inline-start: var(--surux-row-control-width);
  }

  .surux-data-table-desktop > .surux-data-table-scroll > .surux-table:not(:has(> thead > tr > .surux-row-control-column)):not(:has(> tbody > tr > [rowspan]:not([rowspan="1"]))) > :is(thead, tbody, tfoot) > tr > :is(th, td):first-child:not([colspan]:not([colspan="1"])):not(.surux-column-wrap) {
    position: sticky;
    inset-inline-start: 0;
  }

  :where(
    .surux-data-table-scroll > .surux-table:has(> thead > tr > .surux-row-control-column) > tbody > tr,
    .surux-data-table-desktop > .surux-data-table-scroll > .surux-table:not(:has(> tbody > tr > [rowspan]:not([rowspan="1"]))) > tbody > tr
  ) {
    --surux-list-row-tint: 0%;
  }
  .surux-data-table-scroll > .surux-table:has(> thead > tr > .surux-row-control-column) > tbody > tr.surux-row-selected,
  .surux-data-table-desktop > .surux-data-table-scroll > .surux-table:not(:has(> tbody > tr > [rowspan]:not([rowspan="1"]))) > tbody > tr.surux-row-selected {
    --surux-list-row-tint: 10%;
  }
  .surux-data-table-scroll > .surux-table:has(> thead > tr > .surux-row-control-column) > tbody > tr.surux-row-link:hover,
  .surux-data-table-scroll > .surux-table:has(> thead > tr > .surux-row-control-column) > tbody > tr.surux-row-activatable:hover,
  .surux-data-table-desktop > .surux-data-table-scroll > .surux-table:not(:has(> tbody > tr > [rowspan]:not([rowspan="1"]))) > tbody > tr.surux-row-link:hover,
  .surux-data-table-desktop > .surux-data-table-scroll > .surux-table:not(:has(> tbody > tr > [rowspan]:not([rowspan="1"]))) > tbody > tr.surux-row-activatable:hover {
    --surux-list-row-tint: 8%;
  }
  .surux-data-table-scroll > .surux-table:has(> thead > tr > .surux-row-control-column) > tbody > tr.surux-record-opening,
  .surux-data-table-desktop > .surux-data-table-scroll > .surux-table:not(:has(> tbody > tr > [rowspan]:not([rowspan="1"]))) > tbody > tr.surux-record-opening {
    --surux-list-row-tint: 13%;
  }
  .surux-data-table-scroll > .surux-table:has(> thead > tr > .surux-row-control-column) > tbody > tr:has(.surux-row-actions-menu[open]:not([data-surux-command-overflow-inline])),
  .surux-data-table-desktop > .surux-data-table-scroll > .surux-table:not(:has(> tbody > tr > [rowspan]:not([rowspan="1"]))) > tbody > tr:has(.surux-row-actions-menu[open]:not([data-surux-command-overflow-inline])) {
    --surux-list-row-tint: 4%;
  }

  .surux-data-table-scroll > .surux-table:has(> thead > tr > .surux-row-control-column) > tbody > tr > :is(.surux-row-control-column, .surux-row-control-column + :is(td, th):not([colspan]:not([colspan="1"])):not(.surux-column-wrap)),
  .surux-data-table-desktop > .surux-data-table-scroll > .surux-table:not(:has(> tbody > tr > [rowspan]:not([rowspan="1"]))) > tbody > tr > :is(.surux-row-control-column, .surux-row-control-column + :is(td, th):not([colspan]:not([colspan="1"])):not(.surux-column-wrap), :is(th, td):first-child:not([colspan]:not([colspan="1"])):not(.surux-column-wrap)) {
    z-index: 3;
  }
  .surux-data-table-scroll > .surux-table:has(> thead > tr > .surux-row-control-column) > tbody > tr > :is(.surux-row-control-column, .surux-row-control-column + :is(td, th):not([colspan]:not([colspan="1"])):not(.surux-column-wrap)),
  .surux-data-table-desktop > .surux-data-table-scroll > .surux-table:not(:has(> tbody > tr > [rowspan]:not([rowspan="1"]))) > tbody > tr > :is(.surux-row-control-column, .surux-row-control-column + :is(td, th):not([colspan]:not([colspan="1"])):not(.surux-column-wrap), :is(th, td):first-child:not([colspan]:not([colspan="1"])):not(.surux-column-wrap)) {
    /* Bootstrap paints .table cells from --bs-table-bg at (0, 1, 1). .surux-table sets that
       variable to transparent, which beats a specificity-0 fill and shows scrolled content
       through the pin. The variable has to be the opaque pin base on the cell itself. */
    --bs-table-bg: var(--surux-list-pin-bg);
  }
  :where(
    .surux-data-table-scroll > .surux-table:has(> thead > tr > .surux-row-control-column) > tbody > tr > :is(.surux-row-control-column, .surux-row-control-column + :is(td, th):not([colspan]:not([colspan="1"])):not(.surux-column-wrap)),
    .surux-data-table-desktop > .surux-data-table-scroll > .surux-table:not(:has(> tbody > tr > [rowspan]:not([rowspan="1"]))) > tbody > tr > :is(.surux-row-control-column, .surux-row-control-column + :is(td, th):not([colspan]:not([colspan="1"])):not(.surux-column-wrap), :is(th, td):first-child:not([colspan]:not([colspan="1"])):not(.surux-column-wrap))
  ) {
    /* The status tint stays its own layer. Plain hover is a primary layer above it, at 0%
       until the shared hover sets --surux-list-row-plain-hover. A design rule that paints
       the cell clears both, so neither stacks on a second row-state fill. */
    background-color: var(--surux-list-pin-bg);
    background-image:
      linear-gradient(
        color-mix(in srgb, var(--surux-primary) var(--surux-list-row-plain-hover, 0%), transparent) 0 100%
      ),
      linear-gradient(
      color-mix(in srgb, var(--surux-list-row-tint-colour, var(--surux-primary)) var(--surux-list-row-tint, 0%), transparent),
      color-mix(in srgb, var(--surux-list-row-tint-colour, var(--surux-primary)) var(--surux-list-row-tint, 0%), transparent)
    );
  }

  .surux-data-table-scroll > .surux-table:has(> thead > tr > .surux-row-control-column) > tfoot,
  .surux-data-table-desktop > .surux-data-table-scroll > .surux-table > tfoot {
    z-index: 4;
  }

  .surux-data-table-scroll > .surux-table:has(> thead > tr > .surux-row-control-column) > tfoot > tr,
  .surux-data-table-scroll > .surux-table:has(> thead > tr > .surux-row-control-column) > tfoot > tr > :is(.surux-row-control-column, .surux-row-control-column + :is(td, th):not([colspan]:not([colspan="1"])):not(.surux-column-wrap)),
  .surux-data-table-desktop > .surux-data-table-scroll > .surux-table > tfoot > tr,
  .surux-data-table-desktop > .surux-data-table-scroll > .surux-table > tfoot > tr > :is(.surux-row-control-column, :is(th, td):first-child:not([colspan]:not([colspan="1"])):not(.surux-column-wrap)) {
    background-color: inherit;
  }

  .surux-data-table-scroll > .surux-table:has(> thead > tr > .surux-row-control-column) > tfoot > tr > :is(.surux-row-control-column, .surux-row-control-column + :is(td, th):not([colspan]:not([colspan="1"])):not(.surux-column-wrap)),
  .surux-data-table-desktop > .surux-data-table-scroll > .surux-table > tfoot > tr > :is(.surux-row-control-column, :is(th, td):first-child:not([colspan]:not([colspan="1"])):not(.surux-column-wrap)) {
    z-index: 1;
  }

  .surux-data-table-scroll .surux-table thead th.surux-row-control-column,
  .surux-data-table-scroll .surux-table thead th.surux-row-control-column + th:not([colspan]:not([colspan="1"])):not(.surux-column-wrap),
  .surux-data-table-desktop > .surux-data-table-scroll > .surux-table:not(:has(> tbody > tr > [rowspan]:not([rowspan="1"]))) thead th:first-child:not([colspan]:not([colspan="1"])):not(.surux-column-wrap) {
    z-index: 8;
  }

  .surux-data-table-scroll[data-surux-scrolled-inline] > .surux-table:has(> thead > tr > .surux-row-control-column) > :is(tbody, tfoot) > tr > .surux-row-control-column + :is(th, td):not([colspan]:not([colspan="1"])):not(.surux-column-wrap),
  .surux-data-table-scroll[data-surux-scrolled-inline].surux-data-table-scroll > .surux-table:has(> thead > tr > .surux-row-control-column) > :is(tbody, tfoot) > tr > .surux-row-control-column:has(+ :is([colspan]:not([colspan="1"]), .surux-column-wrap)),
  .surux-data-table-desktop > .surux-data-table-scroll[data-surux-scrolled-inline] > .surux-table:not(:has(> thead > tr > .surux-row-control-column)):not(:has(> tbody > tr > [rowspan]:not([rowspan="1"]))) > :is(tbody, tfoot) > tr > :is(th, td):first-child:not([colspan]:not([colspan="1"])):not(.surux-column-wrap) {
    box-shadow: var(--surux-list-pin-edge);
  }

  .surux-data-table-scroll[data-surux-scrolled-inline] .surux-table thead th.surux-row-control-column + th:not([colspan]:not([colspan="1"])):not(.surux-column-wrap),
  .surux-data-table-scroll[data-surux-scrolled-inline] .surux-table thead th.surux-row-control-column:has(+ :is([colspan]:not([colspan="1"]), .surux-column-wrap)),
  .surux-data-table-desktop > .surux-data-table-scroll[data-surux-scrolled-inline] > .surux-table:not(:has(> tbody > tr > [rowspan]:not([rowspan="1"]))) thead th:first-child:not([colspan]:not([colspan="1"])):not(.surux-column-wrap) {
    box-shadow: var(--surux-thead-cell-shadow), var(--surux-list-pin-edge);
  }

  .surux-workflow-changed > :is(.surux-row-control-column, .surux-row-control-column + :is(td, th):not([colspan]:not([colspan="1"])):not(.surux-column-wrap), :is(th, td):first-child:not([colspan]:not([colspan="1"])):not(.surux-column-wrap)) {
    outline: none;
    position: sticky;
  }
  .surux-workflow-changed > :is(.surux-row-control-column, .surux-row-control-column + :is(td, th):not([colspan]:not([colspan="1"])):not(.surux-column-wrap), :is(th, td):first-child:not([colspan]:not([colspan="1"])):not(.surux-column-wrap))::before {
    content: "";
    position: absolute;
    inset: 0;
    border-block: 2px solid var(--surux-primary);
    pointer-events: none;
  }
  .surux-workflow-changed > :is(th, td):first-child::before {
    border-inline-start: 2px solid var(--surux-primary);
  }
}

.surux-data-table-fill-height {
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.surux-data-table-fill-height > .surux-data-table-desktop-shell {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.surux-data-table-fill-height > .surux-data-table-desktop-shell > .surux-data-table-scroll {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  overscroll-behavior: contain;
}

[data-bs-theme="light"] .surux-mobile-list-item,
[data-bs-theme="light"] .surux-list-card {
  background:
    linear-gradient(135deg, rgba(var(--surux-primary-rgb), .055), transparent 58%),
    #fff;
  box-shadow: 0 .65rem 1.35rem rgba(15, 23, 42, .08);
}

@media (max-width: 991.98px) {
  [data-surux-mobile-mode="cards"].surux-data-table-card:is(:not([data-surux-list-measured]), [data-surux-list-compact]) {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  [data-surux-mobile-mode="cards"].surux-data-table-fill-height:is(:not([data-surux-list-measured]), [data-surux-list-compact]) {
    display: block;
    height: auto;
    overflow: visible;
  }

  [data-surux-mobile-mode="cards"].surux-data-table-fill-height > .surux-data-table-desktop-shell,
  [data-surux-mobile-mode="cards"].surux-data-table-fill-height:is(:not([data-surux-list-measured]), [data-surux-list-compact]) > .surux-data-table-desktop-shell {
    display: none;
  }

  .surux-content {
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .surux-toolbar {
    margin-bottom: var(--surux-section-gap);
  }
}

@media (max-width: 420px) {
  .surux-mobile-list-item {
    grid-template-columns: minmax(0, 1fr) 1.2rem;
    gap: .5rem;
    padding: .74rem .24rem .74rem .76rem;
  }

  .surux-mobile-list-item-footer {
    gap: .62rem;
  }

  .surux-mobile-list-item-footer-status {
    gap: .42rem;
  }
}

@media (min-width: 992px) {
  .surux-page-content > .surux-data-table-card:not(.surux-data-table-fill-height) {
    flex: 0 0 auto;
    min-height: 0;
    overflow: visible;
    border-radius: var(--surux-band-radius);
  }

  .surux-data-table-card {
    display: flex !important;
    flex-direction: column;
  }

  .surux-data-table-card:not(.surux-data-table-fill-height) > .surux-data-table-desktop {
    flex: 0 0 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: visible;
  }

  /* overflow-x:auto with overflow-y:visible computes to auto on both axes.
     A height:auto wrapper with overflow-y:hidden grows with the table, so
     the page remains the vertical scroller and a 1px-wide table does not
     sprout a nested vertical bar. Horizontal scrolling stays on this
     wrapper when columns genuinely exceed it. */
  .surux-data-table-card:not(.surux-data-table-fill-height) > .surux-data-table-scroll,
  .surux-data-table-card:not(.surux-data-table-fill-height) > .surux-data-table-desktop > .surux-data-table-scroll {
    flex: 0 0 auto;
    min-height: 0;
    height: auto;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
  }
}
/* Free text shares the width the compact columns leave. An empty wrap column
   keeps a minimum and does not take the row. Breaks stay on spaces. */
.surux-table:has(.surux-column-wrap):not(.surux-table-columns-sized) {
  width: 100%;
  table-layout: auto;
}
.surux-table:has(.surux-column-wrap):not(.surux-table-columns-sized) > :is(thead, tbody) > tr > :is(th, td):not(.surux-column-wrap, .surux-row-control-column) {
  width: 1%;
  white-space: nowrap;
}
.surux-table th.surux-column-wrap,
.surux-table td.surux-column-wrap {
  width: auto;
  min-width: 8rem;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
}
.surux-break-tokens {
  overflow-wrap: normal;
  word-break: normal;
}
.surux-table-columns-sized th.surux-column-wrap,
.surux-table-columns-sized td.surux-column-wrap {
  overflow: visible;
  text-overflow: unset;
  white-space: normal;
}
.surux-row-select {
  --surux-row-checkbox-bg: color-mix(in srgb, var(--surux-surface-2) 76%, rgba(var(--surux-primary-rgb), .14));
  --surux-row-checkbox-border: color-mix(in srgb, rgba(var(--surux-primary-rgb), .58) 58%, rgba(255, 255, 255, .28));
  --surux-row-checkbox-highlight: rgba(255, 255, 255, .12);
  --surux-row-checkbox-shadow: inset 0 1px 0 var(--surux-row-checkbox-highlight), 0 0 0 1px rgba(var(--surux-primary-rgb), .12);
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
  border: 1.5px solid var(--surux-row-checkbox-border);
  border-radius: .24rem;
  background:
    linear-gradient(135deg, var(--surux-row-checkbox-highlight), transparent 58%),
    var(--surux-row-checkbox-bg);
  box-shadow: var(--surux-row-checkbox-shadow);
  cursor: pointer;
  transition:
    background-color var(--surux-transition),
    border-color var(--surux-transition),
    box-shadow var(--surux-transition),
    transform var(--surux-transition);
  vertical-align: middle;
}.surux-row-select:hover:not(:disabled) {
  border-color: rgba(var(--surux-primary-rgb), .76);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .16),
    0 0 0 2px rgba(var(--surux-primary-rgb), .12),
    0 .2rem .55rem rgba(var(--surux-primary-rgb), .10);
}.surux-row-select:focus-visible {
  outline: none;
  border-color: rgba(var(--surux-primary-rgb), .86);
  box-shadow:
    0 0 0 2px var(--surux-surface),
    0 0 0 .3rem var(--surux-slate-focus-ring, rgba(var(--surux-primary-rgb), 1));
}html {
  --surux-slate-focus-ring: rgba(var(--surux-primary-rgb), 1);
}.surux-row-select:checked,
.surux-row-select:indeterminate {
  border-color: rgba(var(--surux-primary-rgb), .92);
  background-color: var(--surux-primary-action-bg);
  background-image: var(--surux-checkbox-mark);
  background-position: center;
  background-repeat: no-repeat;
  background-size: .78rem .78rem;
  box-shadow:
    0 0 0 1px rgba(var(--surux-primary-rgb), .18),
    0 .3rem .75rem rgba(var(--surux-primary-rgb), .28),
    inset 0 1px 0 rgba(255, 255, 255, .24);
}.surux-row-select:indeterminate {
  background-image: var(--surux-indeterminate-mark);
}
.surux-row-select[data-selection-state="mixed"] {
  border-color: rgba(var(--surux-primary-rgb), .92);
  background-color: var(--surux-primary-action-bg);
  background-image: var(--surux-indeterminate-mark);
  background-position: center;
  background-repeat: no-repeat;
  background-size: .78rem .78rem;
}.surux-row-select:checked:focus-visible,
.surux-row-select:indeterminate:focus-visible {
  box-shadow:
    0 0 0 2px var(--surux-surface),
    0 0 0 .3rem var(--surux-slate-focus-ring, rgba(var(--surux-primary-rgb), 1));
}.surux-row-select:disabled {
  cursor: not-allowed;
  opacity: .52;
}[data-bs-theme="light"] .surux-row-select {
  --surux-row-checkbox-bg: color-mix(in srgb, var(--surux-surface) 86%, rgba(var(--surux-primary-rgb), .14));
  --surux-row-checkbox-border: color-mix(in srgb, var(--surux-primary) 42%, #94a3b8 58%);
  --surux-row-checkbox-highlight: rgba(255, 255, 255, .82);
  --surux-row-checkbox-shadow: inset 0 1px 0 rgba(255, 255, 255, .88), 0 0 0 1px rgba(15, 23, 42, .08), 0 .12rem .3rem rgba(15, 23, 42, .08);
}.surux-row-selected {
  background: color-mix(in srgb, var(--surux-primary) 10%, transparent);
}.surux-row-actions {
  display: inline-flex;
  justify-content: flex-end;
  min-width: 2.4rem;
}.surux-row-actions .surux-command-overflow-trigger {
  width: 2.15rem;
  height: 2.15rem;
  min-width: 2.15rem;
  padding: .35rem;
  z-index: 1;
}
.surux-row-actions.surux-row-actions-on-surface .surux-command-overflow-trigger {
  --surux-button-border: color-mix(in srgb, var(--surux-border) 90%, transparent);
  --surux-button-composed-bg: color-mix(in srgb, var(--surux-surface-2) 46%, transparent);
}.surux-row-actions-menu:not([data-surux-row-sheet]) > .surux-command-overflow-panel {
  left: auto;
  right: 0;
  bottom: auto;
  top: calc(100% + .35rem);
  min-width: 12rem;
  text-align: left;
}
.surux-row-control-column .surux-row-actions-menu > .surux-command-overflow-panel:not(:popover-open) {
  inset-inline-start: 0;
  inset-inline-end: auto;
}.surux-row-actions .surux-command-overflow-panel:has(> .surux-command-button-icon-only:only-child) {
  width: max-content;
  min-width: 0;
}.surux-row-action-button {
  width: 100%;
  justify-content: flex-start !important;
}.surux-table tbody tr:has(.surux-row-actions-menu[open]:not([data-surux-command-overflow-inline])),
.surux-mobile-list-item:has(.surux-row-actions-menu[open]:not([data-surux-command-overflow-inline])) {
  position: relative;
  z-index: 55;
}.surux-mobile-list-item:has(.surux-row-actions-menu[open]:not([data-surux-command-overflow-inline])) {
  overflow: visible;
}.surux-table tbody tr:has(.surux-row-actions-menu[open]:not([data-surux-command-overflow-inline])) > td {
  background: color-mix(in srgb, var(--surux-surface) 96%, var(--surux-primary) 4%);
}.surux-bulk-selection-bar {
  position: sticky;
  top: .5rem;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  max-width: 100%;
  min-height: 2.75rem;
  gap: .45rem;
  margin: .2rem 0 .6rem;
  padding: .25rem .35rem;
  border: 1px solid color-mix(in srgb, var(--surux-border) 88%, var(--surux-muted) 12%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surux-surface) 94%, transparent);
  box-shadow: 0 .35rem 1rem rgba(0, 0, 0, .14);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}.surux-bulk-selection-summary {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-width: 0;
  height: 2.25rem;
  padding: 0 .68rem 0 .38rem;
  border: 1px solid color-mix(in srgb, var(--surux-primary) 42%, var(--surux-border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--surux-primary) 12%, var(--surux-surface-2));
  color: var(--surux-text);
  font-weight: 750;
  white-space: nowrap;
}.surux-bulk-selection-mark {
  width: 1.5rem;
  height: 1.5rem;
  display: inline-grid;
  place-items: center;
  flex: 0 0 1.5rem;
  border-radius: 50%;
  background: var(--surux-primary);
  color: var(--surux-primary-contrast, #fff);
  font-size: .7rem;
}.surux-bulk-selection-count {
  min-width: 1ch;
  color: inherit;
  font-variant-numeric: tabular-nums;
}.surux-bulk-selection-detail {
  color: var(--surux-muted);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}.surux-bulk-selection-spacer {
  flex: 1 1 .75rem;
  min-width: .75rem;
}.surux-bulk-selection-actions {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
}.surux-bulk-selection-button.surux-command-button-icon-only {
  flex: 0 0 2.25rem;
  border-radius: 50% !important;
  justify-content: center !important;
}.surux-bulk-selection-actions > .surux-filter-control {
  flex: 0 1 11rem;
  min-width: 8rem;
  max-width: 14rem;
}.surux-bulk-selection-actions > .surux-filter-control > :is(.surux-field-surface, .surux-picker-surface) {
  min-height: 2.25rem;
}.surux-data-table-card > .surux-bulk-selection-bar {
  max-width: calc(100% - 1rem);
  margin: .5rem .5rem .35rem;
}.surux-modal-delete {
  align-items: center;
  justify-items: center;
  padding: clamp(.75rem, 3vw, 1.5rem);
}body:has(.surux-modal-delete:not([hidden])) {
  overflow: hidden;
}.surux-modal-delete .surux-modal-backdrop {
  z-index: 0;
}.surux-modal-delete-body {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: .8rem 1.25rem 1rem;
  color: var(--surux-text);
}.surux-modal-delete-footer {
  padding: .65rem 1.25rem 1rem;
  border-top: 0;
  background: transparent;
}.surux-modal-delete-command-bar {
  position: static;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  width: max-content;
  max-width: 100%;
  padding: .25rem;
  border: 1px solid color-mix(in srgb, var(--surux-border) 88%, var(--surux-muted) 12%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surux-surface) 96%, var(--surux-surface-2) 4%);
}.surux-modal-delete-command-bar .surux-command-button-icon-only {
  width: 2.5rem;
  min-width: 2.5rem;
  height: 2.5rem;
  min-height: 2.5rem;
  flex: 0 0 2.5rem;
  justify-content: center !important;
  border-radius: 50% !important;
}.surux-delete-preview {
  display: grid;
  gap: 1rem;
}.surux-delete-preview-loading {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  min-height: 8rem;
  justify-content: center;
  color: var(--surux-muted);
}.surux-delete-preview-spinner {
  width: 2rem;
  height: 2rem;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(var(--surux-primary-rgb), .12);
  color: var(--surux-primary);
}.surux-delete-preview-error,
.surux-delete-preview-blocked {
  display: grid;
  gap: .35rem;
  padding: .85rem;
  border: 1px solid color-mix(in srgb, var(--surux-danger-fill) 45%, transparent);
  border-radius: .65rem;
  background: color-mix(in srgb, var(--surux-danger-fill) 10%, transparent);
  color: color-mix(in srgb, var(--surux-danger) 75%, var(--surux-text));
}.surux-delete-preview-message-title {
  font-weight: 600;
}.surux-delete-preview-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 1.5rem;
}.surux-delete-preview-layout-single {
  grid-template-columns: minmax(0, 1fr);
  max-width: 34rem;
}.surux-delete-preview-column {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 1.2rem;
}.surux-delete-preview-section {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: .72rem;
}.surux-delete-preview-section + .surux-delete-preview-section {
  padding-top: 1rem;
  border-top: 1px solid color-mix(in srgb, var(--surux-border) 78%, transparent);
}.surux-delete-preview-target {
  gap: .28rem;
}.surux-delete-preview-target-name {
  color: var(--surux-text);
  font-weight: 600;
  overflow-wrap: anywhere;
}.surux-delete-preview-target .surux-record-code {
  color: var(--surux-muted);
  font-weight: 600;
}.surux-delete-preview-eyebrow {
  margin: 0;
  color: var(--surux-muted);
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
}.surux-delete-preview-section-title {
  margin: 0;
  color: var(--surux-text);
  font-size: .98rem;
  font-weight: 600;
}.surux-delete-outcome-row,
.surux-delete-detail-row,
.surux-delete-impact-row,
.surux-delete-impact-label {
  display: flex;
  align-items: flex-start;
}.surux-delete-outcome-row,
.surux-delete-detail-row {
  gap: .65rem;
  color: var(--surux-muted);
  font-weight: 400;
  line-height: 1.45;
}.surux-delete-outcome-row > i,
.surux-delete-detail-row > i {
  width: 1rem;
  margin-top: .16rem;
  flex: 0 0 1rem;
  color: var(--surux-muted);
  text-align: center;
}.surux-delete-outcome-row-permanent > i {
  color: var(--surux-danger);
}.surux-delete-impact-list,
.surux-delete-detail-list {
  display: grid;
}.surux-delete-impact-row {
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  min-width: 0;
  padding: .62rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--surux-border) 68%, transparent);
  color: var(--surux-muted);
}.surux-delete-impact-row:last-child {
  border-bottom: 0;
}.surux-delete-impact-label {
  gap: .6rem;
  min-width: 0;
}.surux-delete-impact-label > i {
  width: 1rem;
  margin-top: .16rem;
  flex: 0 0 1rem;
  color: var(--surux-muted);
  text-align: center;
}.surux-delete-impact-summary {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: .45rem;
  min-width: 0;
  flex: 0 0 auto;
}.surux-delete-impact-value {
  flex: 0 0 auto;
  padding: .18rem .5rem;
  border: 1px solid color-mix(in srgb, var(--surux-border) 78%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surux-surface-2) 72%, transparent);
  color: var(--surux-text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}.surux-delete-impact-outcome {
  color: var(--surux-muted);
  font-weight: 400;
  white-space: nowrap;
}.surux-delete-impact-warning {
  color: color-mix(in srgb, var(--surux-warning) 68%, var(--surux-text));
}.surux-delete-impact-warning .surux-delete-impact-label > i {
  color: var(--surux-warning);
}.surux-delete-impact-danger,
.surux-delete-impact-destructive {
  color: color-mix(in srgb, var(--surux-danger) 64%, var(--surux-text));
}.surux-delete-impact-danger .surux-delete-impact-label > i,
.surux-delete-impact-destructive .surux-delete-impact-label > i {
  color: var(--surux-danger);
}.surux-delete-impact-muted {
  color: var(--surux-muted);
}

@media (max-width: 575.98px) {.surux-modal-delete {
    align-items: stretch;
    justify-items: stretch;
    padding: .35rem;
  }.surux-modal-custom > .surux-modal-content.surux-modal-type-delete {
    width: calc(100vw - .7rem);
    height: calc(100vh - .7rem);
    height: calc(100dvh - .7rem);
    max-height: calc(100vh - .7rem);
    max-height: calc(100dvh - .7rem);
  }.surux-modal-delete-body {
    padding: 1rem;
  }.surux-delete-preview-layout,
.surux-delete-preview-layout-single {
    grid-template-columns: minmax(0, 1fr);
    max-width: none;
    gap: 1.25rem;
  }.surux-delete-preview-column {
    gap: 1.25rem;
  }.surux-modal-delete-footer {
    position: sticky;
    bottom: 0;
    z-index: 2;
    padding: .65rem 1rem calc(.65rem + env(safe-area-inset-bottom));
  }.surux-modal-delete-command-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    width: 100%;
  }.surux-modal-delete-command-bar > .surux-command-button:not(.surux-command-button-icon-only) {
    width: 100%;
  }
}/* TR-0000299: SuruXActionToast and SuruXUndoToast render through the shared .surux-toast. */

@media (max-width: 767.98px) {.surux-bulk-selection-bar {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    border-radius: .75rem;
  }.surux-bulk-selection-actions {
    margin-left: auto;
  }
}.surux-google-map-info {
  display: grid;
  gap: .16rem;
  min-width: 11rem;
  color: #111827;
}.surux-google-map-info strong {
  font-weight: 850;
}.surux-google-map-info span,
.surux-google-map-info small {
  color: #475569;
}.surux-js-choice-list {
  display: grid;
  gap: .58rem;
}.surux-js-choice-list label,
.surux-check-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .55rem;
  align-items: start;
  margin: 0;
  padding: .65rem .7rem;
  border: 1px solid color-mix(in srgb, var(--surux-border) 76%, transparent);
  border-radius: .55rem;
  background: rgba(var(--surux-primary-rgb), .055);
  color: var(--surux-text);
}.surux-js-choice-list input,
.surux-check-row input {
  margin-top: .18rem;
  accent-color: var(--surux-primary);
}.surux-js-choice-list span,
.surux-check-row span {
  min-width: 0;
}.surux-js-choice-list strong {
  display: block;
  color: var(--surux-text);
}.surux-js-choice-list small {
  display: block;
  margin-top: .08rem;
  color: var(--surux-muted);
}

.surux-check-card-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: .72rem;
}

.surux-check-card {
  min-width: 0;
  min-height: 5.5rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: .72rem;
  margin: 0;
  padding: .85rem .9rem;
  border: 1px solid color-mix(in srgb, var(--surux-border) 82%, transparent);
  border-radius: .68rem;
  background: color-mix(in srgb, var(--surux-surface-2) 90%, var(--surux-primary) 10%);
  color: var(--surux-text);
  cursor: pointer;
  transition:
    background-color var(--surux-transition),
    border-color var(--surux-transition),
    box-shadow var(--surux-transition),
    transform var(--surux-transition);
}

.surux-check-card:hover:not(:has(.form-check-input:disabled)) {
  border-color: color-mix(in srgb, var(--surux-primary) 46%, var(--surux-border));
  background: color-mix(in srgb, var(--surux-surface-2) 86%, var(--surux-primary) 14%);
  transform: translateY(-1px);
}

.surux-check-card:focus-within {
  border-color: rgba(var(--surux-primary-rgb), .72);
  box-shadow: 0 0 0 .22rem rgba(var(--surux-primary-rgb), .16);
}

.surux-check-card:has(.form-check-input:checked) {
  border-color: rgba(var(--surux-primary-rgb), .58);
  background: color-mix(in srgb, var(--surux-surface-2) 78%, var(--surux-primary) 22%);
  box-shadow:
    inset 3px 0 0 var(--surux-primary),
    0 .38rem .9rem rgba(var(--surux-primary-rgb), .1);
}

.surux-check-card:has(.form-check-input:disabled) {
  border-color: var(--surux-disabled-control-border);
  background: var(--surux-disabled-control-bg);
  color: var(--surux-disabled-control-color);
  cursor: not-allowed;
}

.surux-check-card > .form-check-input {
  float: none;
  margin: .18rem 0 0;
  flex: 0 0 auto;
}

.surux-check-card > span {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: .2rem;
}

.surux-permission-picker {
  min-width: 0;
  display: grid;
  gap: 1.25rem;
}

.surux-permission-picker [hidden] {
  display: none !important;
}

.surux-permission-toolbar {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(15rem, 1fr) auto auto;
  align-items: center;
  gap: .72rem;
  padding: .75rem;
  border: 1px solid color-mix(in srgb, var(--surux-border) 82%, transparent);
  border-radius: .72rem;
  background: color-mix(in srgb, var(--surux-surface-2) 92%, transparent);
}

.surux-permission-search {
  min-width: 0;
  position: relative;
}

.surux-permission-search > i {
  position: absolute;
  top: 50%;
  left: .82rem;
  z-index: 1;
  color: var(--surux-muted);
  pointer-events: none;
  transform: translateY(-50%);
}

.surux-permission-search > .surux-input {
  min-height: 2.65rem;
  padding-left: 2.45rem;
}

.surux-permission-selected-filter {
  min-height: 2.65rem;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin: 0;
  padding: .55rem .72rem;
  border: 1px solid color-mix(in srgb, var(--surux-border) 82%, transparent);
  border-radius: .62rem;
  background: color-mix(in srgb, var(--surux-surface) 80%, transparent);
  color: var(--surux-text);
  font-size: .86rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.surux-permission-selected-filter > .form-check-input {
  float: none;
  margin: 0;
}

.surux-permission-summary {
  min-width: 8.5rem;
  color: var(--surux-muted);
  font-size: .82rem;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}

.surux-permission-groups,
.surux-permission-group,
.surux-permission-modules,
.surux-permission-module {
  min-width: 0;
  display: grid;
}

.surux-permission-groups {
  gap: 1.5rem;
}

.surux-permission-group {
  gap: .9rem;
}

.surux-permission-group + .surux-permission-group {
  padding-top: 1.35rem;
  border-top: 1px solid color-mix(in srgb, var(--surux-border) 72%, transparent);
}

.surux-permission-group-header,
.surux-permission-module-header {
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
}

.surux-permission-group-header h3,
.surux-permission-module-header h4 {
  margin: 0;
  color: var(--surux-text);
}

.surux-permission-group-header h3 {
  font-size: 1.02rem;
  font-weight: 850;
}

.surux-permission-group-header span,
.surux-permission-module-header span {
  color: var(--surux-muted);
  font-size: .76rem;
  font-weight: 750;
  white-space: nowrap;
}

.surux-permission-modules {
  gap: 1.15rem;
}

.surux-permission-module {
  gap: .58rem;
}

.surux-permission-module-header {
  justify-content: flex-start;
}

.surux-permission-module-header h4 {
  color: color-mix(in srgb, var(--surux-text) 88%, var(--surux-muted));
  font-size: .78rem;
  font-weight: 850;
  letter-spacing: .075em;
  text-transform: uppercase;
}

.surux-permission-module-header span {
  display: inline-grid;
  min-width: 1.5rem;
  min-height: 1.5rem;
  place-items: center;
  padding: .15rem .38rem;
  border-radius: 999px;
  background: rgba(var(--surux-primary-rgb), .1);
  color: var(--surux-primary);
}

.surux-permission-card {
  min-height: 7.25rem;
}

.surux-permission-card-title {
  color: var(--surux-text);
  font-size: .92rem;
  font-weight: 800;
  line-height: 1.25;
}

.surux-permission-card-description {
  color: var(--surux-muted);
  font-size: .8rem;
  line-height: 1.38;
}

.surux-permission-card-code {
  margin-top: .12rem;
  color: color-mix(in srgb, var(--surux-muted) 82%, var(--surux-primary));
  font-size: .69rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.surux-permission-empty {
  min-height: 8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .85rem;
  padding: 1.25rem;
  border: 1px dashed var(--surux-border);
  border-radius: .72rem;
  color: var(--surux-muted);
  text-align: left;
}

.surux-permission-empty > i {
  display: grid;
  width: 2.6rem;
  height: 2.6rem;
  place-items: center;
  border-radius: .72rem;
  background: rgba(var(--surux-primary-rgb), .1);
  color: var(--surux-primary);
}

.surux-permission-empty > div {
  display: grid;
  gap: .14rem;
}

.surux-permission-empty strong {
  color: var(--surux-text);
}

.surux-permission-empty span {
  font-size: .82rem;
}

@media (max-width: 767.98px) {
  .surux-permission-toolbar {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  .surux-permission-selected-filter {
    justify-content: center;
  }

  .surux-permission-summary {
    min-width: 0;
    text-align: left;
  }

  .surux-permission-card {
    min-height: 0;
  }
}

.surux-data-table-embedded {
  min-width: 0;
  max-width: 100%;
}

[data-surux-activity-list] {
  display: grid;
  gap: .5rem;
}

[data-surux-disclosure] {
  border: 1px solid var(--surux-border);
  border-radius: var(--surux-radius-sm);
  background: var(--surux-surface-2);
  overflow: clip;
}

[data-surux-disclosure] > summary {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto 1rem;
  align-items: center;
  gap: .7rem;
  min-height: 3.25rem;
  padding: .65rem .8rem;
  cursor: pointer;
  list-style: none;
}

[data-surux-disclosure] > summary::-webkit-details-marker {
  display: none;
}

[data-surux-disclosure] > summary:focus-visible {
  outline: 2px solid rgba(var(--surux-primary-rgb), .72);
  outline-offset: -2px;
}

[data-surux-activity-icon] {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  color: var(--surux-primary);
}

[data-surux-activity-copy],
[data-surux-activity-meta],
[data-surux-change-weight],
[data-surux-change-summary] {
  display: flex;
  min-width: 0;
}

[data-surux-activity-copy] {
  flex-direction: column;
  gap: .2rem;
}

[data-surux-activity-meta] {
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem .65rem;
  color: var(--surux-muted);
  font-size: .78rem;
}

[data-surux-change-weight] {
  align-items: baseline;
  gap: .35rem;
  color: var(--surux-muted);
  font-size: .75rem;
}

[data-surux-change-weight="high"],
[data-surux-activity-state="failure"] [data-surux-activity-icon] {
  color: var(--surux-danger);
}

[data-surux-disclosure-indicator] {
  color: var(--surux-muted);
  transition: transform var(--surux-transition);
}

[data-surux-disclosure][open] [data-surux-disclosure-indicator] {
  transform: rotate(180deg);
}

[data-surux-disclosure-content] {
  display: grid;
  gap: .75rem;
  padding: .8rem;
  border-top: 1px solid var(--surux-border);
}

[data-surux-change-summary] {
  align-items: baseline;
  flex-wrap: wrap;
  gap: .3rem .65rem;
}

[data-surux-change-summary] small {
  color: var(--surux-muted);
}

[data-surux-change-list] {
  display: grid;
  gap: .45rem;
}

[data-surux-change-row] {
  display: grid;
  grid-template-columns: minmax(8rem, .65fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: .65rem;
  padding: .55rem .65rem;
  border: 1px solid var(--surux-border);
  border-radius: var(--surux-radius-sm);
}

[data-surux-change-before],
[data-surux-change-after] {
  display: grid;
  gap: .12rem;
  min-width: 0;
}

[data-surux-change-before] span,
[data-surux-change-after] span {
  color: var(--surux-muted);
  font-size: .72rem;
  text-transform: uppercase;
}

[data-surux-change-before] strong,
[data-surux-change-after] strong {
  overflow-wrap: anywhere;
}

[data-surux-activity-context] {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  color: var(--surux-muted);
  font-size: .78rem;
}

@media (max-width: 767.98px) {
  [data-surux-disclosure] > summary {
    grid-template-columns: 1.75rem minmax(0, 1fr) 1rem;
    gap: .5rem;
  }

  [data-surux-change-weight] {
    display: none;
  }

  [data-surux-change-row] {
    grid-template-columns: 1fr;
  }
}

.surux-data-table-mobile {
  display: none;
}

.surux-mobile-list-item-static {
  cursor: default;
}

/* A row that opens something on this page is a button, so the browser's button chrome has to be
   cleared before it can look like the anchor variant. Text alignment matters: buttons centre by
   default and the row is a grid of left-aligned content. */
.surux-mobile-list-item-button {
  appearance: none;
  margin: 0;
  font: inherit;
  text-align: start;
  cursor: pointer;
}

button.surux-mobile-list-item.surux-mobile-list-item-button {
  width: 100%;
}

button.surux-mobile-list-item-button.surux-mobile-list-item-link {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
}

/* Documents panel. The rows are standard list items; only the trailing action cluster differs,
   because delete is a POST form rather than a plain button. */
.surux-documents-card,
.surux-documents-list {
  min-width: 0;
}

.surux-documents-list-item .surux-mobile-list-item-actions {
  display: flex;
  align-items: center;
  gap: .3rem;
}

.surux-documents-list-item .surux-mobile-list-item-actions .surux-command-form {
  display: inline-flex;
  margin: 0;
}

/* Long file names are the norm here, so the subtitle truncates rather than wrapping the row to
   three lines. The full name stays available in the viewer. */
.surux-documents-list-item .surux-mobile-list-item-subtitle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Document viewer. Bootstrap's modal-fullscreen supplies the height; the surux-modal-size-*
   rules do not apply here because they are written for .surux-modal-custom roots, which only
   exist on non-bootstrap modals. So the viewer lays out its own body rather than inheriting it. */
.surux-document-viewer .surux-modal-content {
  height: 100%;
}

.surux-document-viewer-body {
  min-height: 0;
  display: grid;
  overflow: hidden;
}

/* The stage absorbs the leftover height and centres whatever it is given, so a tall PDF and a
   small image both sit correctly without the caller knowing which it has. */
.surux-document-viewer-stage {
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: .75rem;
  border: 1px solid var(--surux-border);
  border-radius: .58rem;
  background: color-mix(in srgb, var(--surux-surface) 86%, transparent);
  overflow: auto;
}

.surux-document-viewer-media {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* The viewer keeps the stage's full width and height because it owns the scrollbar, so the stage's
   place-items cannot centre the rendered page — a page is capped at 1200px and would otherwise sit
   against the left edge. The pages column centres itself instead. */
.surux-document-viewer-pdf {
  width: 100%;
  height: 100%;
  min-height: 0;
  align-self: stretch;
  justify-self: stretch;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  overflow: auto;
}

.surux-pdf-status {
  color: var(--surux-muted);
  font-size: .78rem;
  text-align: center;
}

/* The column grows past the viewer whenever a page is taller or wider than the stage, which leaves
   centring no free space to distribute in that direction. That is what keeps an oversized page
   reachable: it scrolls from its own top-left corner instead of being centred out of reach. */
.surux-pdf-pages {
  flex: 1 0 auto;
  width: fit-content;
  min-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .75rem;
}

.surux-pdf-page canvas {
  display: block;
  border-radius: .35rem;
}

/* The browser's own viewer, used when pdf.js cannot fetch the document itself. */
.surux-pdf-native-frame {
  width: 100%;
  height: 100%;
  min-height: 32rem;
  border: 0;
  border-radius: .5rem;
  background: var(--surux-surface);
}

.surux-pdf-native-note {
  padding-top: .5rem;
  color: var(--surux-muted);
  font-size: .78rem;
  text-align: center;
}

/* The viewer's footer is a row of equal round actions. The shared modal convention already forces
   a footer button labelled Close into a 2.75rem circle and hides its text; this gives every
   icon-only button in this footer the same shape, so Edit and Download match Close instead of
   sitting beside it at a different size. Scoped to the viewer, so other modals keep their own
   footer rules. */
.surux-document-viewer .surux-modal-footer .surux-command-button-icon-only {
  width: 2.75rem;
  min-width: 2.75rem;
  height: 2.75rem;
  min-height: 2.75rem;
  padding: 0;
  border-radius: 50%;
}

/* File control: the native input covers the chooser. The field label is the only label.
   Padding, row height and the label-to-value gap are the text control's tokens.
   The icon, the Choose file words and the file name use one inline gap. */
.surux-file-field > .surux-file-control {
  position: relative;
  min-height: var(--surux-control-row-min-height);
}

.surux-file-field > .surux-file-control > input.surux-file-native {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  border: 0;
  outline: none;
}

/* The input is not a direct child of the surface, so the shell's descendant
   :focus-within still paints the shared well and accent line. This rule is the
   wrapper owner of that state and adds no second ring. */
.surux-file-field > .surux-file-control:focus-within {
  outline: none;
}

.surux-file-chooser {
  display: flex;
  align-items: center;
  gap: var(--surux-control-inline-gap);
  min-width: 0;
  min-height: var(--surux-control-row-min-height);
  margin: 0;
  padding: var(--surux-control-pad-block-start) var(--surux-control-pad-inline) var(--surux-control-pad-block-end);
  pointer-events: none;
}

.surux-file-chooser-action {
  display: inline-flex;
  align-items: center;
  gap: var(--surux-control-inline-gap);
  flex: 0 0 auto;
  font-weight: 600;
  color: var(--surux-primary);
}

.surux-file-chooser-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--surux-muted);
}

.surux-file-field:has(input:disabled) > .surux-file-control > input.surux-file-native {
  cursor: not-allowed;
}

.surux-file-field:has(input:disabled) .surux-file-chooser-action,
.surux-file-field:has(input:disabled) .surux-file-chooser-name {
  color: var(--surux-disabled-control-color);
}

.surux-file-field:has(input[aria-invalid="true"]) .surux-file-chooser-name {
  color: color-mix(in srgb, var(--surux-warning) 72%, var(--surux-text));
}

/* Document upload: the confirmation modal and the fullscreen drop grid. */
.surux-document-upload {
  min-width: 0;
  display: contents;
}

.surux-document-upload-body {
  display: grid;
  gap: .85rem;
}

.surux-document-upload-zone {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: 1rem 1.1rem;
  border: 1px dashed color-mix(in srgb, var(--surux-border) 70%, rgba(var(--surux-primary-rgb), .42));
  border-radius: .7rem;
  background: color-mix(in srgb, var(--surux-surface) 88%, transparent);
  cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease;
}

.surux-document-upload-zone:hover,
.surux-document-upload-zone.is-active {
  border-color: var(--surux-primary);
  background: color-mix(in srgb, var(--surux-surface) 78%, rgba(var(--surux-primary-rgb), .12));
}

.surux-document-upload-zone-icon {
  display: inline-grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  flex: 0 0 auto;
  border-radius: .6rem;
  background: rgba(var(--surux-primary-rgb), .14);
  color: var(--surux-primary);
}

.surux-document-upload-zone-text {
  display: grid;
  gap: .12rem;
}

.surux-document-upload-zone-text small,
.surux-document-upload-empty {
  color: var(--surux-muted);
  font-size: .8rem;
}

.surux-document-upload-default {
  display: grid;
  gap: .3rem;
}

/* The type controls are cloned SuruXPicker instances, so they bring their own internal layout;
   these only give them the width of the slot they sit in. min-width: 0 is what stops a long type
   name forcing the grid column wider than its track. */
.surux-document-upload-default [data-surux-picker],
.surux-document-upload-row-type [data-surux-picker] {
  width: 100%;
  min-width: 0;
}

.surux-document-upload-row-type {
  min-width: 0;
}

.surux-document-upload-empty {
  margin: 0;
  padding: .85rem;
  border: 1px solid var(--surux-border);
  border-radius: .6rem;
  text-align: center;
}

.surux-document-upload-list {
  display: grid;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.surux-document-upload-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(9rem, 14rem) auto;
  align-items: center;
  gap: .6rem;
  padding: .6rem .7rem .75rem;
  border: 1px solid var(--surux-border);
  border-radius: .6rem;
  background: color-mix(in srgb, var(--surux-surface) 94%, transparent);
  overflow: hidden;
}

.surux-document-upload-row.is-invalid {
  border-color: color-mix(in srgb, var(--surux-danger-fill) 50%, transparent);
}

.surux-document-upload-row-main {
  min-width: 0;
  display: grid;
  gap: .1rem;
}

.surux-document-upload-row-name {
  overflow: hidden;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.surux-document-upload-row-meta {
  color: var(--surux-muted);
  font-size: .78rem;
}

.surux-document-upload-row-remove {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--surux-border);
  border-radius: .5rem;
  background: none;
  color: var(--surux-muted);
  cursor: pointer;
}

.surux-document-upload-row-remove:hover {
  border-color: color-mix(in srgb, var(--surux-danger-fill) 50%, transparent);
  color: var(--surux-danger);
}

.surux-document-upload-row-status {
  grid-column: 1 / -1;
  font-size: .78rem;
}

.surux-document-upload-row-status.is-error {
  color: var(--surux-danger);
}

.surux-document-upload-row-status.is-warning {
  color: #fcd34d;
}

/* Sits on the row's bottom edge so progress does not shift the layout as it fills. */
.surux-document-upload-row-progress {
  position: absolute;
  inset: auto 0 0 0;
  height: .18rem;
  background: transparent;
}

.surux-document-upload-row-progress > span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--surux-primary);
  transition: width .18s ease;
}

.surux-document-upload-modal.is-busy .surux-document-upload-zone {
  pointer-events: none;
  opacity: .6;
}

/* The fullscreen drop grid. Fixed and appended to body, so no ancestor stacking context can trap
   it — the same trap that put modals behind the backdrop. */
.surux-document-drop-overlay {
  position: fixed;
  inset: 0;
  z-index: 2450;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: rgba(2, 6, 23, .72);
  backdrop-filter: blur(8px);
}

.surux-document-drop-overlay[hidden] {
  display: none;
}

/* Sized to its content rather than to the viewport: with a wide shell the heading anchors to the
   far left while two tiles sit alone in the middle, which reads as a layout fault. */
.surux-document-drop-shell {
  display: grid;
  justify-items: center;
  gap: 1rem;
  width: min(100%, 64rem);
  max-height: 100%;
}

.surux-document-drop-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .85rem;
  color: var(--surux-text);
  text-align: left;
}

.surux-document-drop-head div {
  display: grid;
}

.surux-document-drop-head span:last-child {
  color: var(--surux-muted);
  font-size: .85rem;
}

.surux-document-drop-icon {
  display: inline-grid;
  place-items: center;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: .7rem;
  background: rgba(var(--surux-primary-rgb), .18);
  color: var(--surux-primary);
  font-size: 1.2rem;
}

/* auto-fit, not auto-fill: auto-fill keeps the empty tracks a full-width row would hold, so two
   tiles line up hard left with dead columns beside them. Tracks are capped rather than 1fr so a
   single type does not stretch into one enormous tile, and the row is centred. */
.surux-document-drop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 13rem));
  justify-content: center;
  gap: .7rem;
  width: 100%;
  overflow-y: auto;
  padding-bottom: .25rem;
}

.surux-document-drop-tile {
  display: grid;
  align-content: center;
  gap: .3rem;
  min-height: 7.5rem;
  padding: 1rem;
  /* A drop target has to read as a target before it is hovered, so the resting edge is stronger
     than the default divider tone. */
  border: 1px solid color-mix(in srgb, var(--surux-border) 60%, var(--surux-text) 12%);
  border-radius: .7rem;
  background: color-mix(in srgb, var(--surux-surface) 92%, transparent);
  color: var(--surux-text);
  text-align: center;
  transition: border-color .14s ease, background-color .14s ease, transform .14s ease, box-shadow .14s ease;
}

/* The tile itself must stay hit-testable: the drop resolves its target through
   elementFromPoint, and an element with pointer-events: none is invisible to it, so the drop
   would always fall through with no type. Only the text inside opts out, to cut the
   dragenter/dragleave churn the depth counter would otherwise have to absorb. */
.surux-document-drop-tile > * {
  pointer-events: none;
}

.surux-document-drop-tile.is-active {
  border-color: var(--surux-primary);
  background: color-mix(in srgb, var(--surux-surface) 74%, rgba(var(--surux-primary-rgb), .22));
  /* Ring rather than a thicker border: a border-width change would reflow the tile mid-drag. */
  box-shadow: 0 0 0 1px var(--surux-primary);
  transform: translateY(-2px);
}

.surux-document-drop-tile-name {
  font-weight: 800;
  overflow-wrap: anywhere;
}

.surux-document-drop-tile-hint {
  color: var(--surux-muted);
  font-size: .72rem;
  overflow-wrap: anywhere;
}

body.surux-document-drop-active {
  overflow: hidden;
}

@media (max-width: 767.98px) {
  .surux-document-upload-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .surux-document-upload-row-type {
    grid-column: 1 / -1;
  }

  .surux-document-drop-grid {
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 11rem));
  }
}

/* Notifications panel. Same shape as documents: a plain card whose rows are standard list items. */
.surux-notifications-card,
.surux-notifications-list {
  min-width: 0;
}

.surux-notifications-count {
  flex: 0 0 auto;
}

.surux-notifications-list .is-read {
  opacity: .78;
}

@media (max-width: 991.98px) {
  .surux-data-table-desktop {
    display: none;
  }

  .surux-data-table-mobile {
    display: block;
  }
}

/* Measured Cards lists follow their own width (40rem). ScrollTable is not cards mode.
   The viewport rule above remains the fallback before the first measurement. */
[data-surux-mobile-mode="cards"][data-surux-list-compact] > .surux-data-table-desktop,
[data-surux-mobile-mode="cards"][data-surux-list-compact].surux-data-table-fill-height > .surux-data-table-desktop-shell {
  display: none;
}

[data-surux-mobile-mode="cards"][data-surux-list-compact] > .surux-data-table-mobile {
  display: block;
}

[data-surux-mobile-mode="cards"][data-surux-list-compact].surux-data-table-card {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* The table is shown only from 768px, where the control and identity columns are pinned.
   Below that, cards stay cards even when the list itself is wider than 40rem. */
@media (min-width: 768px) {
  [data-surux-mobile-mode="cards"][data-surux-list-measured]:not([data-surux-list-compact]) > .surux-data-table-desktop,
  [data-surux-mobile-mode="cards"][data-surux-list-measured]:not([data-surux-list-compact]).surux-data-table-fill-height > .surux-data-table-desktop-shell {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  [data-surux-mobile-mode="cards"][data-surux-list-measured]:not([data-surux-list-compact]) > .surux-data-table-mobile {
    display: none;
  }

  [data-surux-mobile-mode="cards"][data-surux-list-measured]:not([data-surux-list-compact]).surux-data-table-card {
    display: flex;
    flex-direction: column;
  }

  [data-surux-mobile-mode="cards"][data-surux-list-measured]:not([data-surux-list-compact]).surux-data-table-card:not(.surux-data-table-fill-height) > .surux-data-table-scroll,
  [data-surux-mobile-mode="cards"][data-surux-list-measured]:not([data-surux-list-compact]).surux-data-table-card:not(.surux-data-table-fill-height) > .surux-data-table-desktop > .surux-data-table-scroll {
    flex: 0 0 auto;
    min-height: 0;
    height: auto;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
  }
}

/* Shared interactive map surface. */
.surux-map-page-content { min-height: 0; overflow: hidden; }
.surux-map-workspace { flex: 1 1 auto; min-height: 30rem; overflow: visible; }
.surux-map-workspace > .surux-card-body {
  height: 100%; min-height: 0; display: grid;
  grid-template-rows: auto minmax(0, 1fr); padding: 0; overflow: visible;
}
.surux-map-toolbar {
  /* Map overlays stay below the global navigation backdrop (z-index 80). */
  position: relative; z-index: 70; display: flex; align-items: center;
  justify-content: flex-end; gap: .45rem; padding: .45rem .65rem;
  overflow: visible; border-bottom: 1px solid var(--surux-border); background: var(--surux-surface);
}
.surux-map-provider { width: 100%; margin: 0; }
.surux-map-provider .form-label { margin-bottom: .22rem; }
.surux-map-tools {
  display: flex; align-items: center; justify-content: flex-start;
  gap: .35rem; flex: 1 1 auto; min-width: 0; overflow: visible; flex-wrap: wrap;
}
.surux-map-settings-menu { margin-left: auto; }
.surux-map-tool-menu .surux-command-overflow-panel {
  top: calc(100% + .45rem); right: auto; bottom: auto; left: 0;
  width: max-content; min-width: 13rem; max-width: min(20rem, calc(100vw - 2rem));
  max-height: min(24rem, calc(100dvh - 8rem)); overflow-y: auto; text-align: left;
}
/* details. prefix outranks the buttons.css rotation rule, which loads later at equal specificity */
details.surux-map-tool-menu[open] .surux-command-overflow-trigger .surux-command-button-icon i { transform: none; }
.surux-map-settings-menu .surux-command-overflow-panel {
  right: 0; left: auto; width: min(18rem, calc(100vw - 2rem));
}
.surux-map-stage {
  --surux-map-live: color-mix(in srgb, var(--surux-success-fill) 70%, #000); --surux-map-warning: color-mix(in srgb, var(--surux-warning-fill) 88%, #000); --surux-map-stale: #475569; --surux-map-offline: color-mix(in srgb, var(--surux-danger-fill) 92%, #000); --surux-map-lost: color-mix(in srgb, var(--surux-danger-fill) 53%, #000); --surux-map-cluster: #0f766e;
  position: relative; min-width: 0; min-height: 24rem; overflow: hidden;
  background: var(--surux-surface-2); isolation: isolate;
}
.surux-map-stage:fullscreen { width: 100vw; height: 100vh; background: var(--surux-surface-2); }
.surux-map-canvas {
  position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; min-width: 0;
  min-height: 0; overflow: hidden; background: var(--surux-surface-2);
}

/* Client-site coded map graph. Area colour is confined to the site core; role,
   lifecycle and coordinate quality use independent rings, badges and strokes. */
.surux-coded-map-panel {
  max-height: min(78vh, 48rem);
  min-width: 18rem;
  width: min(23rem, calc(100% - 2rem));
  overflow: hidden;
  resize: none;
}
.surux-coded-map-panel .surux-map-filter-head { cursor: move; }
.surux-coded-map-panel .surux-map-area-list { min-height: 5rem; overflow: auto; }
.surux-map-stage > .surux-map-canvas-message { position: absolute; z-index: 2; inset: 0; }
.surux-coded-map-panel .surux-map-area-actions { align-items: center; justify-content: space-between; }
.surux-coded-map-panel .surux-map-area-actions > span { display: inline-flex; gap: .35rem; }
.surux-coded-map-views {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .4rem;
  padding: .65rem .75rem;
  border-bottom: 1px solid var(--surux-border);
}
.surux-coded-map-view {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  min-height: 2.35rem;
  padding: .45rem .55rem;
  color: var(--surux-muted);
  background: color-mix(in srgb, var(--surux-surface-2) 82%, transparent);
  border: 1px solid var(--surux-border);
  border-radius: .55rem;
}
.surux-coded-map-view:hover,
.surux-coded-map-view.is-active {
  color: var(--surux-text);
  border-color: color-mix(in srgb, var(--surux-primary) 65%, var(--surux-border));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--surux-primary) 22%, transparent);
}
.surux-coded-map-view strong { font-size: .72rem; }
.surux-coded-map-unmapped { border-top: 1px solid var(--surux-border); }
.surux-coded-map-unmapped summary {
  display: flex;
  justify-content: space-between;
  padding: .7rem .8rem;
  cursor: pointer;
  color: var(--surux-muted);
}
.surux-coded-map-unmapped a {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  padding: .45rem .8rem;
  color: var(--surux-text);
  text-decoration: none;
}
.surux-coded-map-unmapped a:hover { background: color-mix(in srgb, var(--surux-primary) 10%, transparent); }
.surux-coded-map-unmapped a small { color: var(--surux-muted); }

.surux-map-marker.surux-coded-marker {
  --marker-offset-x: 0px;
  --marker-offset-y: 0px;
  --surux-map-marker-color: var(--coded-role-colour);
  position: relative;
  display: grid;
  justify-items: center;
  gap: .2rem;
  padding: 0;
  color: #fff;
  background: transparent;
  border: 0;
  transform: translate(var(--marker-offset-x), var(--marker-offset-y));
  transform-origin: 50% 100%;
  cursor: pointer;
  transition: filter .14s ease, scale .14s ease;
}
.surux-coded-marker-ring {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border: 3px solid var(--coded-role-colour);
  border-radius: 50%;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px color-mix(in srgb, var(--coded-role-colour) 72%, #00131f), 0 4px 12px rgba(0, 18, 30, .45);
}
.surux-map-marker.surux-coded-marker.is-node { --coded-role-colour: #16c7ff; }
.surux-map-marker.surux-coded-marker.is-site { --coded-role-colour: #a78bfa; }
.surux-coded-marker-core {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: #fff;
  background: #17394a;
  border-radius: 50%;
}
.surux-coded-marker.is-site .surux-coded-marker-core { background: var(--area-color, #628900); }
.surux-coded-marker-badge {
  position: absolute;
  right: -.55rem;
  bottom: -.45rem;
  display: grid;
  place-items: center;
  width: 1.15rem;
  height: 1.15rem;
  color: #fff;
  background: #5d7180;
  border: 2px solid #fff;
  border-radius: 50%;
  font-size: .55rem;
}
.surux-coded-marker.lifecycle-active .surux-coded-marker-badge { background: color-mix(in srgb, var(--surux-success-fill) 68%, #000); }
.surux-coded-marker.lifecycle-suspended .surux-coded-marker-badge { background: color-mix(in srgb, var(--surux-warning-fill) 86%, #000); }
.surux-coded-marker.lifecycle-deactivated .surux-coded-marker-badge { background: color-mix(in srgb, var(--surux-danger-fill) 80%, #000); }
.surux-coded-marker.lifecycle-engaged .surux-coded-marker-badge { background: #2563eb; }
.surux-coded-marker.quality-assumed .surux-coded-marker-ring,
.surux-coded-marker.quality-estimated .surux-coded-marker-ring { border-style: dashed; }
.surux-coded-marker-label {
  max-width: 11rem;
  padding: .18rem .4rem;
  overflow: hidden;
  color: #fff;
  background: rgba(5, 25, 38, .84);
  border: 1px solid rgba(255,255,255,.28);
  border-radius: .35rem;
  font-size: .68rem;
  font-weight: 700;
  line-height: 1.15;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px #00131f;
  white-space: nowrap;
}
.surux-coded-marker .surux-map-marker-label {
  color: var(--surux-text);
  text-shadow: none;
}
.surux-coded-map-hide-labels .surux-coded-marker-label { display: none; }
.surux-coded-simple-marker {
  --marker-offset-x: 0px;
  --marker-offset-y: 0px;
  --coded-role-colour: #16c7ff;
  position: relative;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  transform: translate(var(--marker-offset-x), var(--marker-offset-y));
  cursor: pointer;
}
.surux-coded-simple-marker.is-site { --coded-role-colour: #a78bfa; }
.surux-coded-simple-dot {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  color: #fff;
  background: #17394a;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--coded-role-colour), 0 .25rem .55rem rgba(15, 23, 42, .28);
  font-size: .62rem;
  font-weight: 800;
  line-height: 1;
}
.surux-coded-simple-marker.is-site .surux-coded-simple-dot { background: var(--area-color, #628900); }
.surux-coded-simple-marker.quality-assumed .surux-coded-simple-dot,
.surux-coded-simple-marker.quality-estimated .surux-coded-simple-dot { border-style: dashed; }
.surux-coded-simple-label {
  position: absolute;
  left: 50%;
  bottom: calc(100% + .45rem);
  transform: translateX(-50%);
}
.surux-coded-simple-label,
.surux-coded-simple-google-label {
  width: max-content;
  max-width: 12rem;
  padding: .22rem .4rem;
  overflow: hidden;
  color: var(--surux-text);
  background: color-mix(in srgb, var(--surux-surface) 96%, transparent);
  border: 1px solid var(--surux-border);
  border-radius: .35rem;
  box-shadow: 0 .3rem .75rem rgba(15, 23, 42, .2);
  font-size: .68rem;
  font-weight: 700;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.surux-coded-simple-google-label { transform: translate(-50%, calc(-100% - .45rem)); }
.surux-coded-simple-marker.is-graph-active { z-index: 20; scale: 1.18; }
.surux-coded-map-hide-labels .surux-coded-simple-marker.is-graph-active .surux-coded-simple-label { display: block; }
.surux-coded-leaflet-icon {
  width: 0 !important;
  height: 0 !important;
  background: transparent;
  border: 0;
}
.surux-coded-coordinate-grid {
  background-color: #102027;
  background-image:
    linear-gradient(rgba(107, 148, 168, .16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(107, 148, 168, .16) 1px, transparent 1px),
    linear-gradient(rgba(107, 148, 168, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(107, 148, 168, .08) 1px, transparent 1px);
  background-size: 80px 80px, 80px 80px, 16px 16px, 16px 16px;
}
.surux-coded-marker:hover,
.surux-coded-marker.is-graph-active { z-index: 20; filter: brightness(1.12); scale: 1.14; }
.surux-coded-map-links { position: absolute; inset: 0; pointer-events: none; }
.surux-coded-map-drawer { z-index: 35; }
.surux-coded-map-role-ring {
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  color: #fff;
  background: #17394a;
  border: 3px solid #16c7ff;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #fff;
}
.surux-coded-map-issues { gap: .35rem !important; }
.surux-coded-map-issues > span {
  padding: .35rem .5rem;
  color: color-mix(in srgb, var(--surux-danger) 75%, var(--surux-text));
  background: color-mix(in srgb, var(--surux-danger) 14%, transparent);
  border-radius: .4rem;
}

@media (max-width: 767.98px) {
  .surux-coded-map-panel { width: calc(100% - 1rem); max-height: 44%; }
  .surux-coded-map-panel .surux-map-filter-head { cursor: default; }
  .surux-coded-map-views { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .surux-coded-map-view { flex-direction: column; gap: .1rem; text-align: center; }
}

/* Dedicated coded-map layout. The page uses the shared map renderer, but unlike
   the tracking map it does not have a SuruXCard body to establish its sizing and
   positioning context. Keep this contract scoped to the coded-map workspace. */
.surux-map-page:not(.surux-page-shell) {
  flex: 1 1 auto;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  overflow: hidden;
  padding: .7rem .7rem max(.7rem, env(safe-area-inset-bottom, 0px));
}

.surux-map-heading {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.surux-map-heading .surux-page-header { margin-bottom: 0; }
.surux-map-heading .surux-page-header h1 {
  margin-bottom: .18rem;
  font-size: clamp(1.55rem, 1.9vw, 2.1rem);
  line-height: 1.08;
}
.surux-map-heading .surux-page-header .surux-eyebrow { margin-bottom: .18rem; }
.surux-map-heading .surux-page-header .text-muted { font-size: .88rem; }
.surux-map-heading-actions {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  flex: 0 0 auto;
}

[data-surux-coded-map-workspace] {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--surux-border) 80%, transparent);
  border-radius: 8px;
  background: var(--surux-surface-2);
  isolation: isolate;
}

[data-surux-coded-map-workspace] > .surux-map-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
}

.surux-map-canvas-message {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: .65rem;
  padding: 1rem;
  color: var(--surux-muted);
  text-align: center;
  background: var(--surux-surface-2);
}

.surux-map-canvas-message i {
  width: 2.7rem;
  height: 2.7rem;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surux-primary) 18%, transparent);
  color: var(--surux-primary);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--surux-primary) 35%, transparent);
}

.surux-map-canvas-message.error i {
  background: rgba(255, 171, 0, .16);
  color: #ffb020;
  box-shadow: inset 0 0 0 1px rgba(255, 171, 0, .36);
}

.surux-map-filter,
.surux-map-drawer {
  position: absolute;
  z-index: 5;
  border: 1px solid color-mix(in srgb, var(--surux-border) 85%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surux-surface) 92%, transparent);
  color: var(--surux-text);
  box-shadow: 0 1rem 2rem rgba(0, 15, 24, .28);
  backdrop-filter: blur(14px);
}

.surux-map-filter {
  top: .85rem;
  left: .85rem;
  width: min(21rem, calc(100% - 1.7rem));
  max-height: calc(100% - 1.7rem);
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: .85rem;
}

.surux-map-filter-head,
.surux-map-drawer-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: .75rem;
}

.surux-map-filter h2,
.surux-map-drawer h2 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.2;
}

.surux-map-filter span,
.surux-map-drawer small { color: var(--surux-muted); }

.surux-map-switch {
  display: flex;
  align-items: center;
  gap: .55rem;
  min-height: 2.2rem;
  cursor: pointer;
  color: var(--surux-text);
}
.surux-map-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.surux-map-switch-track {
  position: relative;
  width: 2.45rem;
  height: 1.28rem;
  flex: 0 0 2.45rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surux-border) 80%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--surux-border) 80%, transparent);
}
.surux-map-switch-track::after {
  content: "";
  position: absolute;
  width: .9rem;
  height: .9rem;
  top: .19rem;
  left: .22rem;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 .12rem .35rem rgba(0, 0, 0, .24);
  transition: transform .18s ease;
}
.surux-map-switch input:checked + .surux-map-switch-track {
  background: color-mix(in srgb, var(--surux-success) 72%, #000);
}
.surux-map-switch input:checked + .surux-map-switch-track::after { transform: translateX(1.08rem); }

.surux-map-area-actions { display: flex; gap: .45rem; }
.surux-map-area-actions button {
  min-height: 2rem;
  padding: .2rem .72rem;
  border: 1px solid color-mix(in srgb, var(--surux-border) 80%, transparent);
  border-radius: 8px;
  background: var(--surux-surface-2);
  color: var(--surux-text);
  font-weight: 700;
}
.surux-map-area-list {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  overflow: auto;
  padding-right: .2rem;
}
.surux-map-area-toggle {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .65rem;
  padding: .55rem .65rem;
  border: 1px solid color-mix(in srgb, var(--surux-border) 80%, transparent);
  border-radius: 8px;
  background: var(--surux-input-bg);
  cursor: pointer;
}
.surux-map-area-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.surux-map-area-toggle.is-active {
  border-color: color-mix(in srgb, var(--area-color) 65%, var(--surux-border));
  background: color-mix(in srgb, var(--area-color) 14%, var(--surux-input-bg));
}
.surux-map-area-toggle:has(input:focus-visible) {
  outline: 2px solid color-mix(in srgb, var(--surux-primary) 75%, transparent);
  outline-offset: 2px;
}
.surux-map-swatch {
  width: 1rem;
  height: 1rem;
  border-radius: 999px;
  background: var(--area-color);
  box-shadow:
    0 0 0 2px var(--surux-surface),
    0 0 0 4px color-mix(in srgb, var(--area-color) 25%, transparent);
}
.surux-map-area-copy {
  min-width: 0;
  display: grid;
  gap: .08rem;
}
.surux-map-area-copy strong,
.surux-map-area-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.surux-map-area-count {
  min-width: 1.65rem;
  min-height: 1.65rem;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  color: var(--area-font-color);
  background: var(--area-color);
  font-size: .78rem;
  font-weight: 800;
}
.surux-map-empty-filter {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .8rem;
  color: var(--surux-muted);
}

.surux-map-drawer {
  top: .85rem;
  right: .85rem;
  width: min(24rem, calc(100% - 1.7rem));
  max-height: calc(100% - 1.7rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.surux-map-drawer-head {
  padding: .9rem;
  border-bottom: 1px solid color-mix(in srgb, var(--surux-border) 75%, transparent);
}
.surux-map-drawer-icon {
  width: 2.5rem;
  height: 2.5rem;
  display: inline-grid;
  place-items: center;
  flex: 0 0 2.5rem;
  border-radius: 999px;
  color: var(--area-font-color);
  background: var(--area-color);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--area-color) 18%, transparent);
}
.surux-map-drawer-body {
  display: grid;
  gap: .75rem;
  padding: .9rem;
  overflow: auto;
}
.surux-map-drawer-body > div { display: grid; gap: .12rem; }
.surux-map-drawer-body strong,
.surux-map-drawer-body span { overflow-wrap: anywhere; }
.surux-map-fallback-note {
  margin: 0;
  padding: .65rem .75rem;
  border: 1px solid rgba(255, 209, 102, .28);
  border-radius: 8px;
  background: rgba(255, 209, 102, .12);
  color: #ffd166;
}
.surux-map-drawer-actions {
  display: flex;
  gap: .55rem;
  flex-wrap: wrap;
  padding: .9rem;
  border-top: 1px solid color-mix(in srgb, var(--surux-border) 75%, transparent);
}

.surux-map-google-info {
  min-width: 13.5rem;
  max-width: 16.5rem;
  display: grid;
  gap: .5rem;
  color: #0f172a;
  font-size: .78rem;
  line-height: 1.32;
}
.surux-map-google-info-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: .5rem;
}
.surux-map-google-info-swatch {
  width: .82rem;
  height: .82rem;
  border-radius: 999px;
  background: var(--area-color);
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px color-mix(in srgb, var(--area-color) 22%, transparent);
}
.surux-map-google-info-head div { min-width: 0; display: grid; gap: .12rem; }
.surux-map-google-info-head strong {
  overflow: hidden;
  color: #0f172a;
  font-size: .86rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.surux-map-google-info-head div > span {
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
  padding: .12rem .42rem;
  border-radius: 999px;
  color: var(--area-font-color);
  background: var(--area-color);
  font-size: .66rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.surux-map-google-info-line { display: grid; gap: .08rem; }
.surux-map-google-info-line small {
  color: #64748b;
  font-size: .66rem;
  font-weight: 800;
  text-transform: uppercase;
}
.surux-map-google-info-line span { color: #0f172a; overflow-wrap: anywhere; }
.surux-map-google-info-note {
  margin: 0;
  padding: .38rem .48rem;
  border-radius: 8px;
  background: #ffedd5;
  color: #7c2d12;
  font-size: .72rem;
  font-weight: 800;
}

@media (max-width: 991.98px) {
  .surux-map-heading { align-items: stretch; flex-direction: column; }
  .surux-map-heading-actions { justify-content: flex-end; }
  [data-surux-coded-map-workspace],
  [data-surux-coded-map-workspace] > .surux-map-canvas,
  .surux-map-canvas-message { min-height: 0; }
  .surux-map-filter {
    top: .7rem;
    left: .7rem;
    width: min(19rem, calc(100% - 1.4rem));
    max-height: 45%;
  }
  .surux-map-drawer {
    top: auto;
    right: .7rem;
    bottom: .7rem;
    left: .7rem;
    width: auto;
    max-height: 45%;
  }
}

@media (max-width: 575.98px) {
  .surux-map-page:not(.surux-page-shell) { padding: .7rem; }
  .surux-map-filter {
    right: .55rem;
    left: .55rem;
    width: auto;
    max-height: 42%;
  }
  .surux-map-drawer {
    right: .55rem;
    bottom: .55rem;
    left: .55rem;
  }
}
.surux-map-canvas .leaflet-container,
.surux-map-canvas.leaflet-container {
  width: 100%; height: 100%; font-family: inherit; background: var(--surux-surface-2);
}
.surux-map-canvas .leaflet-control-zoom a,
.surux-map-canvas .leaflet-control-attribution {
  border-color: var(--surux-border);
  background: color-mix(in srgb, var(--surux-surface) 92%, transparent);
  color: var(--surux-text);
}
.surux-map-canvas .leaflet-control-attribution a { color: var(--surux-primary); }
.surux-map-canvas .leaflet-popup-content-wrapper,
.surux-map-canvas .leaflet-popup-tip { background: var(--surux-surface); color: var(--surux-text); }
.surux-map-canvas .leaflet-popup-content { margin: .7rem .8rem; }
html[data-bs-theme="dark"] .surux-map-canvas .leaflet-tile-pane {
  filter: brightness(.78) saturate(.72) contrast(1.08);
}
.surux-map-message {
  position: absolute; inset: 0; display: grid; place-content: center;
  justify-items: center; gap: .55rem; padding: 1.5rem; color: var(--surux-muted);
  text-align: center; background: var(--surux-surface-2);
}
.surux-map-message i { color: var(--surux-primary); font-size: 1.5rem; }
.surux-map-message.is-error i { color: var(--surux-danger); }
.surux-map-notice,
.surux-map-provider-notice {
  position: absolute; z-index: 510; display: flex; align-items: center; gap: .45rem;
  max-width: min(32rem, calc(100% - 2rem)); padding: .5rem .65rem;
  border: 1px solid var(--surux-border); border-radius: .45rem;
  background: color-mix(in srgb, var(--surux-surface) 94%, transparent);
  color: var(--surux-text); box-shadow: 0 .35rem 1rem rgba(0, 0, 0, .18);
  font-size: .82rem;
}
.surux-map-notice { top: .7rem; left: .7rem; }
.surux-map-provider-notice { top: .7rem; left: 50%; transform: translateX(-50%); }
.surux-map-tracker-panel {
  position: absolute; z-index: 520; top: .7rem; right: .7rem; bottom: .7rem;
  width: clamp(19rem, 24vw, 24rem); min-width: 18rem; min-height: 16rem;
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--surux-border); border-radius: .5rem;
  background: color-mix(in srgb, var(--surux-surface) 96%, transparent);
  box-shadow: 0 .65rem 1.6rem rgba(0, 0, 0, .24); color: var(--surux-text);
}
.surux-map-tracker-panel.is-dragging,
.surux-map-tracker-panel.is-resizing { user-select: none; }
.surux-map-tracker-panel-header {
  display: flex; align-items: center; justify-content: space-between; gap: .65rem;
  padding: .7rem; border-bottom: 1px solid var(--surux-border); cursor: move;
}
.surux-map-tracker-panel-header h2 { margin: 0; font-size: .98rem; line-height: 1.2; }
.surux-map-tracker-panel-header > div > span {
  display: block; margin-top: .1rem; color: var(--surux-muted); font-size: .76rem;
}
.surux-map-tracker-search { margin: .65rem .7rem .5rem; }
.surux-map-tracker-summary {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .35rem;
  padding: 0 .7rem .55rem; color: var(--surux-muted); font-size: .74rem;
}
.surux-map-tracker-summary span { min-width: 0; text-align: center; }
.surux-map-tracker-summary strong { color: var(--surux-text); }
.surux-map-tracker-list {
  min-height: 0; display: grid; grid-auto-rows: max-content; align-content: start; gap: .4rem;
  overflow-y: auto; overscroll-behavior: contain; padding: 0 .7rem .7rem;
}
.surux-map-tracker-item {
  --surux-map-tracker-accent: var(--surux-map-stale);
  position: relative; width: 100%; min-width: 0; overflow: hidden;
  border: 1px solid var(--surux-border); border-radius: .52rem;
  background: var(--surux-surface-2); color: var(--surux-text);
  box-shadow: inset 3px 0 0 var(--surux-map-tracker-accent);
  transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}
.surux-map-tracker-item.status-live { --surux-map-tracker-accent: var(--surux-map-live); }
.surux-map-tracker-item.status-offline { --surux-map-tracker-accent: var(--surux-map-offline); }
.surux-map-tracker-item.status-lost { --surux-map-tracker-accent: var(--surux-map-lost); }
.surux-map-tracker-item:hover,
.surux-map-tracker-item:focus-within {
  border-color: rgba(var(--surux-primary-rgb), .48);
  background: rgba(var(--surux-primary-rgb), .07);
  outline: none;
}
.surux-map-tracker-item.is-selected {
  border-color: rgba(var(--surux-primary-rgb), .36);
  background: rgba(var(--surux-primary-rgb), .055);
  box-shadow:
    inset 3px 0 0 var(--surux-map-tracker-accent),
    0 0 0 1px rgba(var(--surux-primary-rgb), .11);
}
.surux-map-tracker-select {
  width: 100%; min-width: 0; display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto; align-items: center; gap: .55rem;
  padding: .58rem .62rem .52rem; border: 0; border-radius: .52rem .52rem 0 0;
  color: inherit; background: transparent; cursor: pointer; text-align: left;
}
.surux-map-tracker-select:focus-visible { outline: none; }
.surux-map-tracker-action-drawer {
  display: grid; grid-template-rows: 0fr; opacity: 0; transform: translateY(.45rem);
  transition: grid-template-rows .22s ease, opacity .16s ease, transform .22s ease;
}
.surux-map-tracker-action-drawer-inner { min-height: 0; overflow: hidden; }
.surux-map-tracker-item.has-actions-open .surux-map-tracker-action-drawer {
  grid-template-rows: 1fr; opacity: 1; transform: none;
}
.surux-map-tracker-actions {
  display: grid; gap: .45rem; padding: .5rem .62rem .55rem;
  border-top: 1px solid color-mix(in srgb, var(--surux-border) 78%, transparent);
  background: color-mix(in srgb, var(--surux-surface) 88%, var(--surux-surface-2));
}
.surux-map-tracker-navigation-actions {
  min-width: 0; display: grid; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--surux-border) 82%, transparent);
  border-radius: .46rem; background: color-mix(in srgb, var(--surux-surface-2) 92%, transparent);
}
.surux-map-tracker-navigation-action {
  min-width: 0; min-height: 2.45rem; display: grid;
  grid-template-columns: 1.05rem minmax(0, 1fr) .85rem; align-items: center; gap: .48rem;
  padding: .4rem .52rem; color: var(--surux-text); background: transparent;
  text-decoration: none; transition: color .14s ease, background-color .14s ease;
}
.surux-map-tracker-navigation-action + .surux-map-tracker-navigation-action {
  border-top: 1px solid color-mix(in srgb, var(--surux-border) 72%, transparent);
}
.surux-map-tracker-navigation-action:hover,
.surux-map-tracker-navigation-action:focus-visible {
  color: var(--surux-text); background: color-mix(in srgb, var(--surux-primary) 7%, var(--surux-surface-2));
  outline: none;
}
.surux-map-tracker-navigation-action:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(var(--surux-primary-rgb), .18);
}
.surux-map-tracker-navigation-action.is-primary {
  background: color-mix(in srgb, var(--surux-primary) 7%, var(--surux-surface-2));
}
.surux-map-tracker-navigation-action.is-primary strong,
.surux-map-tracker-navigation-action.is-primary .surux-map-tracker-navigation-icon,
.surux-map-tracker-navigation-action.is-primary .surux-map-tracker-navigation-popout { color: var(--surux-primary); }
.surux-map-tracker-navigation-icon,
.surux-map-tracker-navigation-popout {
  display: inline-flex; align-items: center; justify-content: center; color: var(--surux-muted); font-size: .68rem;
}
.surux-map-tracker-navigation-copy { min-width: 0; display: grid; gap: .08rem; }
.surux-map-tracker-navigation-copy strong {
  overflow: hidden; font-size: .72rem; font-weight: 760; line-height: 1.15;
  text-overflow: ellipsis; white-space: nowrap;
}
.surux-map-tracker-navigation-meta {
  min-width: 0; display: flex; align-items: center; gap: .25rem;
  overflow: hidden; color: var(--surux-muted); font-size: .62rem; line-height: 1.15; white-space: nowrap;
}
.surux-map-tracker-navigation-meta > span:not(.surux-record-code),
.surux-map-tracker-action-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.surux-map-tracker-navigation-meta .surux-record-code { flex: 0 1 auto; min-width: 0; font-size: .64rem; }
.surux-map-tracker-navigation-popout { justify-self: end; }
.surux-map-tracker-utility-actions {
  min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .38rem;
}
.surux-map-tracker-action-rail {
  width: 100%; min-height: 1.95rem; display: flex; align-items: center; justify-content: center; gap: .38rem;
  padding: .3rem .55rem; border: 0; border-top: 1px solid var(--surux-border); border-radius: 0;
  color: var(--surux-muted); background: color-mix(in srgb, var(--surux-primary) 3%, var(--surux-surface-2));
  cursor: pointer; font-size: .68rem; font-weight: 750; letter-spacing: .012em;
  transition: border-color .16s ease, color .16s ease, background-color .16s ease;
}
.surux-map-tracker-action-rail:hover,
.surux-map-tracker-action-rail:focus-visible,
.surux-map-tracker-item.has-actions-open .surux-map-tracker-action-rail {
  border-top-color: color-mix(in srgb, var(--surux-primary) 52%, var(--surux-border));
  color: var(--surux-primary);
  background: color-mix(in srgb, var(--surux-primary) 7%, var(--surux-surface-2));
}
.surux-map-tracker-action-rail:focus-visible {
  outline: none; box-shadow: inset 0 0 0 2px rgba(var(--surux-primary-rgb), .2);
}
.surux-map-tracker-action-rail i { transition: transform .22s ease; }
.surux-map-tracker-item.has-actions-open .surux-map-tracker-action-rail i {
  transform: rotate(180deg);
}
.surux-map-tracker-icon {
  width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%;
  background: rgba(var(--surux-primary-rgb), .12); color: var(--surux-primary);
}
.surux-map-tracker-item.quality-warning .surux-map-tracker-icon {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--surux-map-warning) 34%, transparent);
}
.surux-map-tracker-copy { min-width: 0; display: grid; gap: .08rem; }
.surux-map-tracker-copy strong,
.surux-map-tracker-copy span,
.surux-map-tracker-copy code,
.surux-map-tracker-copy small {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.surux-map-tracker-copy strong { font-size: .82rem; }
.surux-map-tracker-copy span,
.surux-map-tracker-copy small { color: var(--surux-muted); font-size: .7rem; }
.surux-map-tracker-copy code { color: var(--surux-primary); font-size: .68rem; }
.surux-map-tracker-status { display: grid; justify-items: end; gap: .25rem; }
.surux-map-resize-handle {
  position: absolute; right: 0; bottom: 0; width: 1.15rem; height: 1.15rem;
  padding: 0; border: 0; background: transparent; cursor: nwse-resize;
}
.surux-map-resize-handle::after {
  content: ""; position: absolute; right: .22rem; bottom: .22rem;
  width: .42rem; height: .42rem; border-right: 2px solid var(--surux-muted);
  border-bottom: 2px solid var(--surux-muted); opacity: .7;
}
.surux-coded-map-area-panel { z-index: 520; }
.surux-coded-map-area-actions {
  display: flex; align-items: center; gap: .4rem; padding: 0 .7rem .55rem;
}
.surux-coded-map-area-actions .surux-command-button { flex: 0 0 auto; justify-content: center; }
.surux-coded-map-area-list {
  min-height: 0; display: grid; align-content: start; gap: .4rem;
  overflow-y: auto; overscroll-behavior: contain; padding: 0 .7rem .7rem;
}
.surux-coded-map-area-toggle {
  position: relative; width: 100%; min-width: 0; display: grid;
  grid-template-columns: 1.8rem minmax(0, 1fr) auto; align-items: center; gap: .55rem;
  padding: .55rem; border: 1px solid var(--surux-border); border-radius: .45rem;
  background: var(--surux-surface-2); color: var(--surux-text); cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease, opacity .16s ease;
}
.surux-coded-map-area-toggle:not(.is-active) { opacity: .62; }
.surux-coded-map-area-toggle:hover,
.surux-coded-map-area-toggle:has(input:focus-visible),
.surux-coded-map-area-toggle.is-active {
  border-color: rgba(var(--surux-primary-rgb), .62);
  background: rgba(var(--surux-primary-rgb), .09);
}
.surux-coded-map-area-toggle:has(input:focus-visible) {
  box-shadow: 0 0 0 .2rem rgba(var(--surux-primary-rgb), .18); outline: none;
}
.surux-coded-map-area-toggle > input {
  position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
.surux-coded-map-swatch {
  width: 1.8rem; height: 1.8rem; display: grid; place-items: center;
  border: 2px solid color-mix(in srgb, var(--area-font-color, #fff) 76%, transparent);
  border-radius: 50%; background: var(--area-color, var(--surux-primary));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--area-color, var(--surux-primary)) 55%, var(--surux-border));
}
.surux-coded-map-area-copy { min-width: 0; display: grid; gap: .08rem; }
.surux-coded-map-area-copy strong,
.surux-coded-map-area-copy small {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.surux-coded-map-area-copy strong { font-size: .82rem; }
.surux-coded-map-area-copy small { color: var(--surux-muted); font-size: .7rem; }
.surux-coded-map-area-count {
  min-width: 1.65rem; padding: .16rem .4rem; border-radius: 999px;
  background: var(--surux-surface); color: var(--surux-muted);
  font-size: .7rem; font-variant-numeric: tabular-nums; font-weight: 800; text-align: center;
}
.surux-coded-map-drawer {
  position: absolute; z-index: 530; top: .7rem; bottom: .7rem; left: .7rem;
  width: clamp(19rem, 24vw, 24rem); min-width: 18rem; min-height: 16rem;
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--surux-border); border-radius: .5rem;
  background: color-mix(in srgb, var(--surux-surface) 96%, transparent);
  box-shadow: 0 .65rem 1.6rem rgba(0, 0, 0, .24); color: var(--surux-text);
}
.surux-coded-map-drawer-head {
  display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) auto;
  align-items: center; gap: .65rem; padding: .7rem; border-bottom: 1px solid var(--surux-border);
}
.surux-coded-map-drawer-head > div { min-width: 0; }
.surux-coded-map-drawer-head > div > span {
  display: block; color: var(--surux-muted); font-size: .7rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
}
.surux-coded-map-drawer-head h2 {
  margin: .08rem 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: .98rem; line-height: 1.2;
}
.surux-coded-map-drawer-icon {
  width: 2.25rem; height: 2.25rem; display: grid; place-items: center;
  border: 2px solid color-mix(in srgb, var(--area-font-color, #fff) 76%, transparent);
  border-radius: 50%; background: var(--area-color, var(--surux-primary));
  color: var(--area-font-color, #fff); box-shadow: 0 .25rem .6rem rgba(15, 23, 42, .25);
}
.surux-coded-map-drawer-body {
  min-height: 0; display: grid; align-content: start; gap: .6rem;
  overflow-y: auto; overscroll-behavior: contain; padding: .75rem;
}
.surux-coded-map-drawer-body > div {
  min-width: 0; display: grid; gap: .12rem; padding-bottom: .55rem;
  border-bottom: 1px solid color-mix(in srgb, var(--surux-border) 68%, transparent);
}
.surux-coded-map-drawer-body small { color: var(--surux-muted); font-size: .7rem; }
.surux-coded-map-drawer-body strong,
.surux-coded-map-drawer-body span { overflow-wrap: anywhere; font-size: .82rem; }
.surux-coded-map-fallback-note {
  margin: 0; padding: .55rem .6rem; border: 1px solid color-mix(in srgb, var(--surux-warning-fill) 40%, var(--surux-border));
  border-radius: .4rem; background: color-mix(in srgb, var(--surux-warning-fill) 10%, transparent);
  color: var(--surux-text); font-size: .74rem;
}
.surux-coded-map-drawer-actions {
  display: flex; flex-wrap: wrap; gap: .4rem; padding: .7rem;
  border-top: 1px solid var(--surux-border); background: var(--surux-surface);
}
.surux-map-canvas-message {
  width: 100%; height: 100%; min-height: 12rem; display: grid; place-content: center;
  justify-items: center; gap: .55rem; padding: 1.5rem; color: var(--surux-muted);
  text-align: center; background: var(--surux-surface-2);
}
.surux-map-canvas-message i { color: var(--surux-primary); font-size: 1.5rem; }
.surux-map-canvas-message.error i { color: var(--surux-danger); }
.surux-map-google-info {
  --area-color: var(--surux-primary); min-width: 12rem; max-width: 17rem;
  display: grid; gap: .5rem; padding: .12rem; color: #18232a; font-family: inherit;
}
.surux-map-google-info-head {
  display: grid; grid-template-columns: .85rem minmax(0, 1fr); align-items: start; gap: .5rem;
}
.surux-map-google-info-swatch {
  width: .8rem; height: .8rem; margin-top: .16rem; border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 50%; background: var(--area-color); box-shadow: 0 0 0 1px color-mix(in srgb, var(--area-color) 60%, #334155);
}
.surux-map-google-info-head > div { min-width: 0; display: grid; gap: .05rem; }
.surux-map-google-info-head strong { font-size: .84rem; }
.surux-map-google-info-head span { color: #52616b; font-size: .7rem; }
.surux-map-google-info-line { display: grid; gap: .08rem; }
.surux-map-google-info-line small { color: #64727b; font-size: .65rem; }
.surux-map-google-info-line span { overflow-wrap: anywhere; font-size: .76rem; }
.surux-map-google-info-note {
  margin: 0; padding: .3rem .4rem; border-radius: .3rem;
  background: color-mix(in srgb, var(--area-color) 12%, transparent); font-size: .68rem;
}
.surux-tracker-popup {
  --surux-tracker-popup-status: var(--surux-map-stale);
  width: min(18.5rem, calc(100vw - 3rem)); min-width: min(15.5rem, calc(100vw - 3rem));
  display: grid; gap: .7rem; padding: .85rem;
  color: var(--surux-text); background: var(--surux-surface);
  font-family: var(--bs-body-font-family, system-ui, sans-serif); line-height: 1.25;
}
.surux-tracker-popup-header {
  min-width: 0; display: grid; grid-template-columns: 2.45rem minmax(0, 1fr);
  align-items: center; gap: .65rem; padding-right: 2rem;
}
.surux-tracker-popup-icon {
  position: relative; width: 2.45rem; height: 2.45rem; display: grid; place-items: center;
  border: 2px solid color-mix(in srgb, var(--surux-tracker-popup-status) 20%, var(--surux-surface));
  border-radius: .78rem;
  color: #fff;
  background:
    radial-gradient(circle at 30% 24%, rgba(255, 255, 255, .28), transparent 35%),
    linear-gradient(145deg, color-mix(in srgb, var(--surux-tracker-popup-status) 84%, #fff), var(--surux-tracker-popup-status));
  box-shadow: 0 .38rem .8rem color-mix(in srgb, var(--surux-tracker-popup-status) 24%, transparent);
  font-size: .86rem;
}
.surux-tracker-popup-icon::after {
  content: ""; position: absolute; right: -.13rem; bottom: -.13rem;
  width: .58rem; height: .58rem; border: 2px solid var(--surux-surface); border-radius: 50%;
  background: var(--surux-tracker-popup-status);
}
.surux-tracker-popup-heading { min-width: 0; display: grid; gap: .12rem; }
.surux-tracker-popup-eyebrow {
  overflow: hidden; color: var(--surux-muted); font-size: .62rem; font-weight: 800;
  letter-spacing: .075em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap;
}
.surux-tracker-popup-heading strong {
  overflow: hidden; color: var(--surux-text); font-size: .95rem; line-height: 1.2;
  text-overflow: ellipsis; white-space: nowrap;
}
.surux-tracker-popup-states { display: flex; flex-wrap: wrap; gap: .34rem; }
.surux-tracker-popup-chip {
  max-width: 100%; display: inline-flex; align-items: center; gap: .3rem;
  padding: .25rem .43rem; border: 1px solid var(--surux-border); border-radius: 999px;
  color: var(--surux-muted); background: var(--surux-surface-2);
  font-size: .66rem; font-weight: 750; line-height: 1.1;
}
.surux-tracker-popup-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.surux-tracker-popup-chip > i { flex: 0 0 auto; font-size: .58rem; }
.surux-tracker-popup-chip.is-status {
  border-color: color-mix(in srgb, var(--surux-tracker-popup-status) 34%, var(--surux-border));
  color: color-mix(in srgb, var(--surux-tracker-popup-status) 82%, var(--surux-text));
  background: color-mix(in srgb, var(--surux-tracker-popup-status) 11%, var(--surux-surface));
}
.surux-tracker-popup-coordinates {
  min-width: 0; display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); align-items: center; gap: .5rem;
  padding: .52rem .58rem; border: 1px solid color-mix(in srgb, var(--surux-primary) 24%, var(--surux-border));
  border-radius: var(--surux-radius-sm);
  background: color-mix(in srgb, var(--surux-primary) 7%, var(--surux-surface-2));
}
.surux-tracker-popup-coordinates > i {
  width: 1.75rem; height: 1.75rem; display: grid; place-items: center;
  border-radius: .48rem; color: var(--surux-primary);
  background: color-mix(in srgb, var(--surux-primary) 12%, transparent); font-size: .72rem;
}
.surux-tracker-popup-coordinates > div { min-width: 0; display: grid; gap: .08rem; }
.surux-tracker-popup-coordinates span {
  color: var(--surux-muted); font-size: .59rem; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
}
.surux-tracker-popup-coordinates code {
  overflow: hidden; color: var(--surux-text); font-size: .72rem; font-variant-numeric: tabular-nums;
  text-overflow: ellipsis; white-space: nowrap;
}
.surux-tracker-popup-details {
  display: flex; flex-wrap: wrap; gap: .38rem .75rem; padding-top: .02rem;
  color: var(--surux-muted); font-size: .65rem; font-weight: 650;
}
.surux-tracker-popup-details > span { display: inline-flex; align-items: center; gap: .27rem; }
.surux-tracker-popup-details i { color: var(--surux-primary); font-size: .61rem; }
.surux-tracker-popup-warning {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: .4rem;
  padding: .45rem .5rem; border: 1px solid color-mix(in srgb, var(--surux-map-warning) 34%, var(--surux-border));
  border-radius: var(--surux-radius-sm);
  color: color-mix(in srgb, var(--surux-map-warning) 82%, var(--surux-text));
  background: color-mix(in srgb, var(--surux-map-warning) 9%, var(--surux-surface));
  font-size: .64rem; line-height: 1.35;
}
.surux-tracker-popup-warning i { margin-top: .08rem; }
.surux-map-canvas .gm-style .gm-style-iw-c.surux-tracker-popup-window {
  max-width: none !important; padding: 0 !important; overflow: visible;
  border: 1px solid var(--surux-border); border-radius: var(--surux-radius-md);
  background: var(--surux-surface);
  box-shadow: 0 .8rem 2.1rem rgba(15, 23, 42, .26), 0 .18rem .45rem rgba(15, 23, 42, .12);
}
.surux-map-canvas .gm-style .gm-style-iw-c.surux-tracker-popup-window .gm-style-iw-d {
  max-height: none !important; overflow: visible !important;
}
.surux-map-canvas .gm-style .gm-style-iw-c.surux-tracker-popup-window .gm-style-iw-chr {
  position: absolute; z-index: 2; top: .52rem; right: .52rem; width: 1.8rem; height: 1.8rem;
}
.surux-map-canvas .gm-style .gm-style-iw-c.surux-tracker-popup-window button.gm-ui-hover-effect {
  position: static !important; box-sizing: border-box !important;
  width: 1.8rem !important; height: 1.8rem !important; display: grid !important; place-items: center !important;
  margin: 0 !important; padding: 0 !important;
  border: 1px solid var(--surux-border) !important; border-radius: .5rem !important;
  color: var(--surux-muted) !important; background: var(--surux-surface-2) !important;
  cursor: pointer; font: inherit !important; opacity: 1 !important;
}
.surux-map-canvas .gm-style .gm-style-iw-c.surux-tracker-popup-window button.gm-ui-hover-effect::before {
  content: "\00d7"; display: block; transform: translateY(-.03rem);
  color: currentColor; font-size: 1.08rem; font-weight: 650; line-height: 1;
}
.surux-map-canvas .gm-style .gm-style-iw-c.surux-tracker-popup-window button.gm-ui-hover-effect:hover,
.surux-map-canvas .gm-style .gm-style-iw-c.surux-tracker-popup-window button.gm-ui-hover-effect:focus-visible {
  border-color: color-mix(in srgb, var(--surux-primary) 55%, var(--surux-border)) !important;
  color: var(--surux-primary) !important;
  background: color-mix(in srgb, var(--surux-primary) 9%, var(--surux-surface-2)) !important;
  box-shadow: 0 0 0 .18rem rgba(var(--surux-primary-rgb), .14);
  outline: none;
}
.surux-map-canvas .gm-style .gm-style-iw-c.surux-tracker-popup-window button.gm-ui-hover-effect > span {
  display: none !important;
}
.surux-map-canvas .gm-style .gm-style-iw-t.surux-tracker-popup-window .gm-style-iw-tc::after {
  background: var(--surux-surface);
}
.surux-map-canvas .leaflet-popup:has(.surux-tracker-popup) .leaflet-popup-content-wrapper {
  padding: 0; overflow: hidden; border: 1px solid var(--surux-border); border-radius: var(--surux-radius-md);
  box-shadow: 0 .8rem 2.1rem rgba(15, 23, 42, .26), 0 .18rem .45rem rgba(15, 23, 42, .12);
}
.surux-map-canvas .leaflet-popup:has(.surux-tracker-popup) .leaflet-popup-content { margin: 0; }
.surux-map-canvas .leaflet-popup:has(.surux-tracker-popup) .leaflet-popup-close-button {
  z-index: 2; top: .52rem; right: .52rem; box-sizing: border-box;
  width: 1.8rem; height: 1.8rem; display: grid; place-items: center; padding: 0;
  border: 1px solid var(--surux-border); border-radius: .5rem;
  color: var(--surux-muted); background: var(--surux-surface-2);
  font-size: 1.08rem; font-weight: 650; line-height: 1; text-decoration: none;
}
.surux-map-canvas .leaflet-popup:has(.surux-tracker-popup) .leaflet-popup-close-button:hover,
.surux-map-canvas .leaflet-popup:has(.surux-tracker-popup) .leaflet-popup-close-button:focus-visible {
  border-color: color-mix(in srgb, var(--surux-primary) 55%, var(--surux-border));
  color: var(--surux-primary);
  background: color-mix(in srgb, var(--surux-primary) 9%, var(--surux-surface-2));
  box-shadow: 0 0 0 .18rem rgba(var(--surux-primary-rgb), .14); outline: none;
}
.surux-map-marker {
  --surux-map-marker-color: var(--surux-map-stale);
  --surux-map-marker-ink: #fff;
  position: relative; display: grid; justify-items: center; color: var(--surux-text);
  filter: drop-shadow(0 .4rem .8rem rgba(15, 23, 42, .34));
}
.surux-map-marker.status-live { --surux-map-marker-color: var(--surux-map-live); }
.surux-map-marker.status-warning { --surux-map-marker-color: var(--surux-map-warning); }
.surux-map-marker.status-stale,
.surux-map-marker.status-secondary { --surux-map-marker-color: var(--surux-map-stale); }
.surux-map-marker.status-offline { --surux-map-marker-color: var(--surux-map-offline); }
.surux-map-marker.status-lost { --surux-map-marker-color: var(--surux-map-lost); }
.surux-map-marker.is-age-0 { --surux-map-marker-color: var(--surux-map-age-0); }
.surux-map-marker.is-age-1 { --surux-map-marker-color: var(--surux-map-age-1); }
.surux-map-marker.is-age-2 { --surux-map-marker-color: var(--surux-map-age-2); }
.surux-map-marker.is-age-3 { --surux-map-marker-color: var(--surux-map-age-3); }
.surux-map-marker.is-age-4 { --surux-map-marker-color: var(--surux-map-age-4); }
.surux-map-marker.is-age-5 { --surux-map-marker-color: var(--surux-map-age-5); }
.surux-map-marker.is-age-6 { --surux-map-marker-color: var(--surux-map-age-6); }
.surux-map-marker.is-age-7 { --surux-map-marker-color: var(--surux-map-age-7); }
.surux-map-marker.is-hazed,
.surux-map-marker.is-unfocused { opacity: 0.35; }
.surux-map-marker.is-hazed .surux-map-marker-label { display: none; }
.surux-map-marker-heading {
  position: absolute; z-index: 2; top: -.05rem; left: 50%; width: 0; height: 0;
  margin-left: -.22rem; border-left: .22rem solid transparent; border-right: .22rem solid transparent;
  border-bottom: .42rem solid var(--surux-map-marker-color); transform-origin: 50% 1.2rem;
  pointer-events: none;
}
.surux-map-age-key {
  position: absolute; z-index: 4; right: .75rem; bottom: .75rem; display: flex; gap: .35rem;
  align-items: end; padding: .35rem .5rem; border: 1px solid var(--surux-border); border-radius: .5rem;
  background: var(--surux-surface); color: var(--surux-text); font-size: .62rem; pointer-events: none;
}
.surux-map-age-key span { display: grid; justify-items: center; gap: .12rem; }
.surux-map-age-key i {
  width: .7rem; height: .7rem; border-radius: 999px; background: var(--surux-map-age, var(--surux-info));
}
.surux-map-age-key .is-age-0 { --surux-map-age: var(--surux-map-age-0); }
.surux-map-age-key .is-age-1 { --surux-map-age: var(--surux-map-age-1); }
.surux-map-age-key .is-age-2 { --surux-map-age: var(--surux-map-age-2); }
.surux-map-age-key .is-age-3 { --surux-map-age: var(--surux-map-age-3); }
.surux-map-age-key .is-age-4 { --surux-map-age: var(--surux-map-age-4); }
.surux-map-age-key .is-age-5 { --surux-map-age: var(--surux-map-age-5); }
.surux-map-age-key .is-age-6 { --surux-map-age: var(--surux-map-age-6); }
.surux-map-age-key .is-age-7 { --surux-map-age: var(--surux-map-age-7); }
.surux-map-edge-rails { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.surux-map-edge-leader {
  position: absolute; height: 1px; background: var(--surux-border); transform-origin: left center;
}
.surux-map-edge-chip {
  position: absolute; pointer-events: auto; max-width: 9rem; transform: translate(-50%, -50%);
  padding: .15rem .45rem; border: 1px solid var(--surux-border); border-radius: 999px;
  background: var(--surux-surface); color: var(--surux-text);
  font-size: .68rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.surux-map-marker-label {
  position: absolute; left: 50%; bottom: calc(100% + .46rem); min-width: max-content;
  max-width: 15rem; display: flex; align-items: center; gap: .38rem;
  transform: translateX(-50%); padding: .32rem .48rem .32rem .42rem;
  border: 1px solid color-mix(in srgb, var(--surux-map-marker-color) 34%, var(--surux-border));
  border-left: 3px solid var(--surux-map-marker-color); border-radius: .42rem;
  background: color-mix(in srgb, var(--surux-surface) 96%, transparent);
  box-shadow: 0 .45rem 1.1rem rgba(15, 23, 42, .24);
  font-size: .7rem; line-height: 1.15; font-weight: 700;
  backdrop-filter: blur(16px) saturate(1.08);
  -webkit-backdrop-filter: blur(16px) saturate(1.08);
}
.surux-map-marker-label::before {
  content: ""; width: .46rem; height: .46rem; flex: 0 0 .46rem;
  border: 2px solid color-mix(in srgb, #fff 86%, var(--surux-map-marker-color));
  border-radius: 50%; background: var(--surux-map-marker-color);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--surux-map-marker-color) 18%, transparent);
}
.surux-map-marker.labels-hidden .surux-map-marker-label { display: none; }
.surux-map-marker-name { max-width: 10.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The pin's second line: a tracker's speed, or a caller-supplied figure such as a camera's
   read count. One treatment, because they occupy the same slot and only one is ever drawn. */
.surux-map-marker-speed,
.surux-map-marker-caption {
  padding: .12rem .28rem; border-radius: 999px;
  color: color-mix(in srgb, var(--surux-map-marker-color) 78%, #111827);
  background: color-mix(in srgb, var(--surux-map-marker-color) 13%, transparent);
  font-variant-numeric: tabular-nums; font-size: .66rem; font-weight: 800;
}
.surux-map-marker-icon {
  position: relative; z-index: 0; width: 2.22rem; height: 2.22rem; display: grid; place-items: center;
  border: 2px solid rgba(255, 255, 255, .96); border-radius: 50%;
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .28), transparent 34%),
    linear-gradient(145deg, color-mix(in srgb, var(--surux-map-marker-color) 86%, #fff), var(--surux-map-marker-color));
  color: var(--surux-map-marker-ink);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--surux-map-marker-color) 72%, #0f172a),
    0 0 0 .34rem color-mix(in srgb, var(--surux-map-marker-color) 16%, transparent),
    0 .42rem .9rem rgba(15, 23, 42, .34);
  font-size: .84rem; overflow: visible;
}
.surux-map-marker-icon::after {
  content: ""; position: absolute; left: 50%; bottom: -.22rem;
  width: .58rem; height: .58rem; transform: translateX(-50%) rotate(45deg);
  border-right: 2px solid rgba(255, 255, 255, .96);
  border-bottom: 2px solid rgba(255, 255, 255, .96);
  border-radius: 0 0 .14rem 0; background: var(--surux-map-marker-color);
  box-shadow: .15rem .15rem .28rem rgba(15, 23, 42, .24);
  z-index: -1;
}
.surux-map-marker-icon i {
  position: relative; z-index: 1; line-height: 1;
  text-shadow: 0 1px 1px rgba(15, 23, 42, .32);
}
.surux-map-marker-quality {
  position: absolute; z-index: 3; top: -.46rem; right: -.5rem;
  width: 1.05rem; height: 1.05rem; display: grid; place-items: center;
  border: 2px solid #fff; border-radius: 50%;
  background: var(--surux-map-warning); color: #fff;
  box-shadow: 0 .18rem .4rem rgba(15, 23, 42, .32);
  font-size: .5rem; line-height: 1;
}
.surux-map-marker-quality i { text-shadow: none; }
.surux-map-marker.is-selected .surux-map-marker-icon {
  width: 2.62rem; height: 2.62rem;
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 .5rem color-mix(in srgb, var(--surux-map-marker-color) 24%, transparent),
    0 .55rem 1.05rem rgba(15, 23, 42, .42);
}
.surux-map-marker.status-live:not(.is-selected) .surux-map-marker-icon::before {
  content: ""; position: absolute; inset: -.34rem; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--surux-map-marker-color) 55%, transparent);
  opacity: .62;
}
.surux-map-leaflet-icon { border: 0; background: transparent; }
.surux-map-symbol-tracker {
  --surux-map-marker-ink: var(--surux-surface-2);
  width: 15px; height: 15px; display: block; filter: none;
  transform: translateY(7.5px);
}
.surux-map-symbol-tracker.is-leaflet { transform: none; }
.surux-map-symbol-tracker .surux-map-marker-ring { position: relative; width: 15px; height: 15px; }
.surux-map-symbol-tracker .surux-map-marker-svg { display: block; width: 15px; height: 15px; overflow: visible; }
.surux-map-symbol-tracker .surux-map-marker-track { stroke: color-mix(in srgb, var(--surux-map-marker-color) 28%, var(--surux-map-marker-ink)); fill: none; }
.surux-map-symbol-tracker .surux-map-marker-arc { stroke: var(--surux-map-marker-color); fill: none; }
.surux-map-symbol-tracker .surux-map-marker-dot { fill: var(--surux-map-marker-color); }
.surux-map-symbol-tracker .surux-map-marker-flag {
  position: absolute; left: 50%; bottom: 100%; width: 0; height: 0; overflow: visible;
}
.surux-map-symbol-tracker .surux-map-marker-stem {
  position: absolute; left: 0; bottom: 0; width: 1px; height: 16px;
  background: var(--surux-map-marker-color); transform-origin: 50% 100%;
}
.surux-map-symbol-tracker .surux-map-marker-label {
  left: 0; bottom: 16px; min-width: 0; max-width: 168px;
  transform: translateX(-50%); gap: 0; padding: 1px 4px;
  border: 0; border-radius: 2px;
  background: color-mix(in srgb, var(--surux-map-marker-color) 22%, var(--surux-map-marker-ink));
  box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  color: var(--surux-text); font-size: 10.5px; font-weight: 650; line-height: 12px;
}
.surux-map-symbol-tracker .surux-map-marker-label::before { display: none; content: none; }
.surux-map-symbol-tracker .surux-map-marker-name { max-width: 160px; }
.surux-map-symbol-tracker .surux-map-marker-meta {
  display: block; color: var(--surux-muted); font-size: 10.5px; font-weight: 650; line-height: 12px;
}
.surux-map-symbol-tracker:not(.is-selected) .surux-map-marker-meta { display: none; }
.surux-map-symbol-tracker[data-lean="right"] .surux-map-marker-stem { transform: rotate(28deg); }
.surux-map-symbol-tracker[data-lean="left"] .surux-map-marker-stem { transform: rotate(-28deg); }
.surux-map-symbol-tracker[data-lean="right"] .surux-map-marker-label { transform: translate(calc(-50% + 7.51px), 1.87px); }
.surux-map-symbol-tracker[data-lean="left"] .surux-map-marker-label { transform: translate(calc(-50% - 7.51px), 1.87px); }
.surux-map-symbol-tracker.is-selected .surux-map-marker-label {
  flex-direction: column; align-items: flex-start; justify-content: center; gap: 0;
  min-width: 4.5rem; max-width: calc(220px + .5rem + .46rem + 2px);
  padding: .28rem .46rem .26rem .5rem;
  background: var(--surux-surface);
  border: 1px solid color-mix(in srgb, var(--surux-primary) 46%, var(--surux-border));
  border-radius: .42rem;
  box-shadow: inset .16rem 0 0 var(--surux-primary);
}
.surux-map-symbol-tracker.is-selected .surux-map-marker-name,
.surux-map-symbol-tracker.is-selected .surux-map-marker-meta {
  display: block; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.surux-map-symbol-tracker.is-selected .surux-map-marker-ring {
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--surux-surface), 0 0 0 3px var(--surux-primary);
}
.surux-map-symbol-tracker.labels-hidden .surux-map-marker-flag,
.surux-map-symbol-tracker.label-suppressed .surux-map-marker-flag { display: none; }
.surux-map-symbol-tracker .surux-map-marker-quality { top: -4px; right: -6px; width: 11px; height: 11px; }
.surux-map-cluster {
  width: 2.5rem; height: 2.5rem; display: grid; place-items: center;
  border: 2px solid rgba(255, 255, 255, .98); border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .32), transparent 34%),
    linear-gradient(145deg, color-mix(in srgb, var(--surux-map-cluster) 78%, #38bdf8), var(--surux-map-cluster));
  color: #fff; box-shadow:
    0 0 0 1px color-mix(in srgb, var(--surux-map-cluster) 76%, #0f172a),
    0 0 0 .36rem color-mix(in srgb, var(--surux-map-cluster) 16%, transparent),
    0 .45rem .95rem rgba(15, 23, 42, .36);
  font-size: .82rem; font-variant-numeric: tabular-nums; font-weight: 900;
}
.surux-map-cluster.is-medium { width: 2.72rem; height: 2.72rem; }
.surux-map-cluster.is-large { width: 3rem; height: 3rem; }
.surux-map-cluster.surux-map-cluster-donut {
  --surux-map-marker-ink: var(--surux-surface-2);
  position: relative; width: 24px; height: 24px; border: 0; background: transparent; box-shadow: none;
  color: var(--surux-text);
}
.surux-map-cluster-donut svg { position: absolute; inset: 0; display: block; }
.surux-map-cluster-donut circle { fill: none; stroke-width: 4.5; }
.surux-map-cluster-donut .is-lost { stroke: var(--surux-map-lost); }
.surux-map-cluster-donut .is-offline { stroke: var(--surux-map-offline); }
.surux-map-cluster-donut .is-live { stroke: var(--surux-map-live); }
.surux-map-cluster-donut .is-rest { stroke: var(--surux-map-stale); }
.surux-map-cluster-donut .surux-map-cluster-count {
  position: relative; z-index: 1; font-size: 10px; font-weight: 800; font-variant-numeric: tabular-nums;
  text-shadow: 0 0 2px var(--surux-map-marker-ink);
}
.surux-map-movement-line,
.surux-map-grid-movement polyline {
  fill: none; stroke: #16c7ff; stroke-width: 4;
  stroke-linecap: round; stroke-linejoin: round;
}
.surux-map-movement-point { fill: var(--surux-primary); stroke: #fff; stroke-width: 2; }
.surux-map-native,
.surux-map-native-tiles,
.surux-map-native-markers,
.surux-map-native-movement,
.surux-map-coordinate-grid,
.surux-map-grid-movement {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.surux-map-native { overflow: hidden; }
.surux-map-native-tile { position: absolute; width: 256px; height: 256px; max-width: none; }
.surux-map-native-marker,
.surux-map-grid-marker {
  --surux-map-marker-color: var(--surux-map-stale); position: absolute;
  width: 1.18rem; height: 1.18rem; transform: translate(-50%, -50%);
  border: 2px solid rgba(255, 255, 255, .96); border-radius: 50%;
  background:
    radial-gradient(circle at 35% 25%, rgba(255, 255, 255, .28), transparent 36%),
    var(--surux-map-marker-color);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--surux-map-marker-color) 72%, #0f172a),
    0 0 0 .24rem color-mix(in srgb, var(--surux-map-marker-color) 18%, transparent),
    0 .24rem .58rem rgba(15, 23, 42, .38);
}
.surux-map-native-marker.status-live,
.surux-map-grid-marker.status-live { --surux-map-marker-color: var(--surux-map-live); }
.surux-map-native-marker.status-warning,
.surux-map-grid-marker.status-warning { --surux-map-marker-color: var(--surux-map-warning); }
.surux-map-native-marker.status-stale,
.surux-map-grid-marker.status-stale,
.surux-map-native-marker.status-secondary,
.surux-map-grid-marker.status-secondary { --surux-map-marker-color: var(--surux-map-stale); }
.surux-map-native-marker.status-offline,
.surux-map-grid-marker.status-offline { --surux-map-marker-color: var(--surux-map-offline); }
.surux-map-native-marker.status-lost,
.surux-map-grid-marker.status-lost { --surux-map-marker-color: var(--surux-map-lost); }
.surux-map-native-marker.quality-warning,
.surux-map-grid-marker.quality-warning { border-color: var(--surux-warning-fill); }
.surux-map-native-marker.is-selected,
.surux-map-grid-marker.is-selected {
  width: 1.58rem; height: 1.58rem;
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 .42rem color-mix(in srgb, var(--surux-map-marker-color) 24%, transparent),
    0 .28rem .7rem rgba(15, 23, 42, .42);
}
.surux-map-attribution {
  position: absolute; right: .3rem; bottom: .2rem; padding: .15rem .3rem;
  background: color-mix(in srgb, var(--surux-surface) 88%, transparent);
  color: var(--surux-muted); font-size: .62rem;
}
.surux-map-attribution a { color: var(--surux-primary); }

/* The portfolio drawer uses the feature map's right-hand detail placement. */
.surux-coded-map-drawer {
  right: .85rem; bottom: auto; left: auto;
  width: min(24rem, calc(100% - 1.7rem)); min-width: 0; min-height: 0;
  max-height: calc(100% - 1.7rem);
}

@media (max-width: 991.98px) {
  .surux-map-page-content { height: calc(100dvh - 11rem); min-height: 34rem; }
  .surux-map-workspace { height: 100%; min-height: 34rem; }
  .surux-map-tracker-panel {
    top: auto; left: .5rem; right: .5rem; bottom: .5rem; width: auto;
    min-width: 0; height: min(43%, 23rem); min-height: 13rem;
  }
  .surux-map-tracker-panel-header { cursor: default; }
  .surux-map-resize-handle { display: none; }
  .surux-map-notice { top: .7rem; }
  .surux-coded-map-stage.has-selected-marker .surux-coded-map-area-panel { display: none; }
  .surux-coded-map-drawer {
    top: auto; left: .5rem; right: .5rem; bottom: .5rem; width: auto;
    min-width: 0; height: min(58%, 28rem); min-height: 15rem;
  }
}

@media (max-width: 575.98px) {
  .surux-map-page-content { height: calc(100dvh - 12rem); min-height: 31rem; }
  .surux-map-tools { overflow-x: auto; flex-wrap: nowrap; }
  .surux-map-tools:has(.surux-map-tool-menu[open]) { overflow: visible; }
  .surux-map-tracker-select { grid-template-columns: 1.8rem minmax(0, 1fr); }
  .surux-map-tracker-status { grid-column: 2; display: flex; justify-items: start; }
}

@media (prefers-reduced-motion: reduce) {
  .surux-map-tracker-item,
  .surux-map-tracker-action-drawer,
  .surux-map-tracker-action-rail,
  .surux-map-tracker-action-rail i,
  .surux-coded-map-area-toggle { transition: none; }
}

/* Financial summary */
.surux-financial-summary {
  overflow: hidden;
}

.surux-financial-summary-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.2rem;
  border-bottom: 1px solid var(--surux-border);
}

.surux-financial-summary-eyebrow {
  display: block;
  margin-bottom: .2rem;
  color: var(--surux-primary);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.surux-financial-summary-header h2 {
  margin: 0;
  font-size: 1.12rem;
  font-weight: 800;
}

.surux-financial-summary-header p {
  margin: .3rem 0 0;
  color: var(--surux-muted);
  font-size: .86rem;
}

.surux-financial-summary-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: .6rem;
}

.surux-financial-summary-updated,
.surux-financial-summary-link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: var(--surux-muted);
  font-size: .76rem;
  font-weight: 700;
}

.surux-financial-summary-link {
  color: var(--surux-primary);
  text-decoration: none;
}

.surux-financial-summary-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: .75rem;
  padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--surux-border);
}

.surux-financial-summary-kpi {
  display: grid;
  gap: .3rem;
  min-width: 0;
  padding: .85rem .95rem;
  border: 1px solid var(--surux-border);
  border-radius: .75rem;
  background: color-mix(in srgb, var(--surux-surface-2) 62%, transparent);
}

.surux-financial-summary-kpi-label {
  color: var(--surux-muted);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.surux-financial-summary-kpi-value {
  /* Proportional figures: tabular-nums loosens a large standalone number. */
  font-size: 1.65rem;
  font-weight: 750;
  line-height: 1.1;
  letter-spacing: -.02em;
}

.surux-financial-summary-kpi-meta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .1rem .5rem;
  min-width: 0;
}

.surux-financial-summary-kpi-meta small {
  color: var(--surux-muted);
  font-size: .7rem;
}

.surux-financial-summary-kpi-delta {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .76rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.surux-financial-summary-kpi-delta i { font-size: .68rem; }

/* Blended toward the text colour so the status hue stays legible on every theme surface. */
.surux-financial-summary-kpi-delta.is-good {
  color: color-mix(in srgb, var(--surux-success) 74%, var(--surux-text));
}

.surux-financial-summary-kpi-delta.is-bad {
  color: color-mix(in srgb, var(--surux-danger) 74%, var(--surux-text));
}

.surux-financial-summary-kpi-delta.is-flat { color: var(--surux-muted); }

.surux-financial-summary-spark {
  width: 100%;
  height: 2rem;
  margin-top: .2rem;
  overflow: visible;
}

.surux-financial-summary-spark polyline {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* preserveAspectRatio="none" would otherwise stretch the stroke with the box. */
  vector-effect: non-scaling-stroke;
}

.surux-financial-summary-spark .is-trend {
  stroke: color-mix(in srgb, var(--surux-muted) 46%, transparent);
}

/* The month in progress reads in the accent; the months behind it stay recessive. */
.surux-financial-summary-spark .is-current {
  stroke: var(--surux-primary);
}

.surux-financial-summary-table-wrap {
  overflow-x: auto;
  /* A single non-visible axis makes the other compute to auto, which nests a second
     vertical scrollbar inside the already-scrolling page. Pin it shut. */
  overflow-y: hidden;
  scrollbar-width: thin;
}

.surux-financial-summary-table {
  width: 100%;
  min-width: 920px;
  border-collapse: separate;
  border-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.surux-financial-summary-table th,
.surux-financial-summary-table td {
  padding: .55rem .7rem;
  border-right: 1px solid var(--surux-border);
  border-bottom: 1px solid var(--surux-border);
  text-align: right;
  white-space: nowrap;
}

.surux-financial-summary-table thead th {
  background: var(--surux-surface-2);
  color: var(--surux-text);
  font-size: .76rem;
  vertical-align: bottom;
}

.surux-financial-summary-table thead th:first-child,
.surux-financial-summary-table tbody th {
  position: sticky;
  left: 0;
  z-index: 2;
  text-align: left;
}

.surux-financial-summary-table thead th:first-child {
  z-index: 3;
}

.surux-financial-summary-table thead span,
.surux-financial-summary-table thead small {
  display: block;
}

.surux-financial-summary-table thead small {
  margin-top: .2rem;
  color: var(--surux-primary);
  font-size: .64rem;
  text-transform: uppercase;
}

.surux-financial-summary-table tbody th {
  background: var(--surux-surface);
  color: var(--surux-muted);
  font-size: .78rem;
}

.surux-financial-summary-table td {
  color: var(--surux-text);
  font-size: .8rem;
  font-weight: 700;
}

.surux-financial-summary-table .is-current {
  background: rgba(var(--surux-primary-rgb), .11);
}

.surux-financial-summary-table .is-forecast {
  background: color-mix(in srgb, var(--surux-surface-2) 84%, var(--surux-primary) 16%);
}

.surux-financial-summary-table .is-negative,
.surux-financial-summary-mobile-body .is-negative {
  color: var(--surux-danger);
}

/* A rule and a quiet caption instead of a full-width colour band: the groups are
   navigation, not data, so they should not compete with the figures. */
.surux-financial-summary-group th {
  position: static !important;
  padding: .95rem .7rem .3rem;
  border-bottom: 1px solid var(--surux-border);
  background: transparent !important;
  color: var(--surux-muted) !important;
  font-size: .66rem !important;
  font-weight: 900;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.surux-financial-summary-table tbody tr:not(.surux-financial-summary-group):hover th,
.surux-financial-summary-table tbody tr:not(.surux-financial-summary-group):hover td {
  background: color-mix(in srgb, var(--surux-primary) 7%, transparent);
}

/* Empty months are the majority of most grids; keeping them quiet lets real figures read. */
.surux-financial-summary-table td.is-zero { color: var(--surux-muted); font-weight: 500; }


.surux-financial-summary-mobile {
  display: none;
  padding: .75rem;
}

.surux-financial-summary-month {
  overflow: hidden;
  border: 1px solid var(--surux-border);
  border-radius: var(--surux-radius-md);
  background: var(--surux-surface-2);
}

.surux-financial-summary-month + .surux-financial-summary-month {
  margin-top: .6rem;
}

.surux-financial-summary-month.is-current {
  border-color: rgba(var(--surux-primary-rgb), .65);
}

.surux-financial-summary-month summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .8rem;
  cursor: pointer;
  list-style: none;
}

.surux-financial-summary-month summary::-webkit-details-marker { display: none; }
.surux-financial-summary-month summary span { display: grid; gap: .15rem; }
.surux-financial-summary-month summary small { color: var(--surux-muted); font-size: .68rem; }
.surux-financial-summary-mobile-net { text-align: right; font-variant-numeric: tabular-nums; }
.surux-financial-summary-mobile-net strong { font-size: .76rem; }

.surux-financial-summary-mobile-body {
  display: grid;
  gap: .65rem;
  padding: 0 .8rem .8rem;
}

.surux-financial-summary-mobile-body section {
  overflow: hidden;
  border: 1px solid var(--surux-border);
  border-radius: var(--surux-radius-sm);
  background: var(--surux-surface);
}

.surux-financial-summary-mobile-body h3 {
  margin: 0;
  padding: .4rem .55rem;
  border-bottom: 1px solid var(--surux-border);
  color: var(--surux-primary);
  font-size: .72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.surux-financial-summary-mobile-body section div {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  padding: .38rem .55rem;
  font-size: .76rem;
  font-variant-numeric: tabular-nums;
}

.surux-financial-summary-mobile-body section div + div {
  border-top: 1px solid var(--surux-border);
}

@media (max-width: 767.98px) {
  .surux-financial-summary-header {
    align-items: stretch;
    flex-direction: column;
  }

  .surux-financial-summary-actions {
    justify-content: flex-start;
  }

  .surux-financial-summary-desktop { display: none; }
  .surux-financial-summary-mobile { display: block; }
}

/* Action-first dashboard */
.surux-dashboard-page {
  display: grid;
  grid-auto-rows: max-content;
  align-content: start;
  gap: 1rem;
}

/* The shell styles `.surux-page-shell > .surux-page-content` directly, which outweighs the
   single class above and replaces the grid with the shell's own flex (desktop) or block
   (mobile) layout. The panels set `overflow: hidden`, so as flex items their automatic
   minimum size collapses to zero and they compress to the viewport instead of overflowing
   it, which leaves the scroll viewport with nothing to scroll. Restating the grid at the
   shell's weight keeps the rows at max-content so the viewport scrolls. */
.surux-page-shell > .surux-page-content.surux-dashboard-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: max-content;
  align-content: start;
  gap: 1rem;
}

.surux-dashboard-queues {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 28rem), 1fr));
  align-items: start;
  gap: 1rem;
}

.surux-header-extra-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .7rem;
  border: 1px solid var(--surux-border);
  border-radius: 999px;
  color: var(--surux-header-extra-ink, var(--surux-muted));
  font-size: .78rem;
  font-weight: 700;
}

.surux-dashboard-panel {
  overflow: hidden;
  container-type: inline-size;
  container-name: surux-dashboard-panel;
}

.surux-dashboard-panel-header {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: 74px;
  padding: .9rem var(--surux-list-edge-inset);
  border-bottom: 1px solid var(--surux-border);
  background: color-mix(in srgb, var(--surux-surface) 78%, var(--surux-surface-2) 22%);
}

.surux-dashboard-panel-header > div:not(.surux-dashboard-panel-actions) {
  min-width: 0;
  flex: 1;
}

.surux-dashboard-panel-icon {
  display: inline-grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  flex: 0 0 auto;
  border-radius: .72rem;
  background: rgba(var(--surux-primary-rgb), .13);
  color: var(--surux-primary);
}

.surux-dashboard-panel-eyebrow {
  display: block;
  margin-bottom: .1rem;
  color: var(--surux-muted);
  font-size: .65rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.surux-dashboard-panel-header h2 {
  margin: 0;
  font-size: 1rem;
  font-weight: 850;
}

.surux-dashboard-panel-header small {
  display: block;
  margin-top: .16rem;
  color: var(--surux-muted);
  font-size: .72rem;
}

.surux-dashboard-panel-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: .4rem;
}

.surux-dashboard-live-change,
.surux-dashboard-dirty {
  display: inline-flex;
  align-items: center;
  gap: .28rem;
  color: var(--surux-warning);
  font-size: .67rem;
  font-weight: 800;
}

.surux-dashboard-dirty {
  color: var(--surux-primary);
}

.surux-dashboard-dirty i { font-size: .42rem; }

.surux-dashboard-panel-body {
  min-height: 142px;
}

/* Keyed off the panel rather than the viewport, because a panel sharing the queue row with
   its sibling is narrow on a wide screen too. */
@container surux-dashboard-panel (max-width: 40rem) {
  .surux-dashboard-panel-header { align-items: flex-start; flex-wrap: wrap; }
  .surux-dashboard-panel-actions { width: 100%; justify-content: flex-start; padding-left: 3.1rem; }
}

/* Finance overview */
.surux-finance-overview-page {
  display: grid;
  gap: 1rem;
}

.surux-finance-overview-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .75rem;
}

.surux-finance-overview-kpi {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-width: 0;
  padding: .9rem;
  border: 1px solid var(--surux-border);
  border-radius: var(--surux-radius-md);
  background: var(--surux-surface);
}

.surux-finance-overview-kpi-icon {
  display: inline-grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  flex: 0 0 auto;
  border-radius: .68rem;
  background: rgba(var(--surux-primary-rgb), .12);
  color: var(--surux-primary);
}

.surux-finance-overview-kpi > span:last-child {
  display: grid;
  min-width: 0;
  gap: .12rem;
}

.surux-finance-overview-kpi small,
.surux-finance-overview-kpi em {
  overflow: hidden;
  color: var(--surux-muted);
  font-size: .7rem;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.surux-finance-overview-kpi strong {
  font-size: .94rem;
  font-variant-numeric: tabular-nums;
}

.surux-finance-overview-kpi.is-success .surux-finance-overview-kpi-icon {
  color: color-mix(in srgb, var(--surux-success) 75%, var(--surux-text));
  background: color-mix(in srgb, var(--surux-success) 6%, var(--surux-surface));
}
.surux-finance-overview-kpi.is-warning .surux-finance-overview-kpi-icon {
  color: color-mix(in srgb, var(--surux-warning) 75%, var(--surux-text));
  background: color-mix(in srgb, var(--surux-warning) 6%, var(--surux-surface));
}

.surux-finance-overview-resources {
  overflow: hidden;
  border: 1px solid var(--surux-border);
  border-radius: var(--surux-radius-md);
  background: var(--surux-surface);
}

.surux-finance-overview-resources > header {
  padding: .9rem 1rem;
  border-bottom: 1px solid var(--surux-border);
}

.surux-finance-overview-resources h2 {
  margin: 0;
  font-size: 1rem;
}

.surux-finance-overview-resources > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.surux-finance-overview-resource {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: .8rem;
  padding: .85rem 1rem;
  border: 0;
  border-right: 1px solid var(--surux-border);
  border-bottom: 1px solid var(--surux-border);
  background: transparent;
  color: inherit;
  text-align: left;
}

.surux-finance-overview-resource:nth-child(even) { border-right: 0; }
.surux-finance-overview-resource:hover { background: rgba(var(--surux-primary-rgb), .06); }
.surux-finance-overview-resource > span { display: grid; min-width: 0; gap: .12rem; }
.surux-finance-overview-resource > span:nth-child(2) { text-align: right; }
.surux-finance-overview-resource strong,
.surux-finance-overview-resource small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.surux-finance-overview-resource strong { font-size: .8rem; }
.surux-finance-overview-resource small { color: var(--surux-muted); font-size: .68rem; }
.surux-finance-overview-resource > i { color: var(--surux-primary); }

@media (max-width: 959.98px) {
  .surux-finance-overview-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 679.98px) {
  .surux-finance-overview-kpis,
  .surux-finance-overview-resources > div { grid-template-columns: minmax(0, 1fr); }
  .surux-finance-overview-resource { border-right: 0; }
}

/* Invoice editor. Keep these rules scoped so other finance pages can migrate independently. */
.surux-invoice-edit-page,
.surux-invoice-edit-page .surux-page-content,
.surux-invoice-edit-page .surux-tabs,
.surux-invoice-edit-page .surux-tab-panels,
.surux-invoice-edit-page .surux-tab-panel {
  min-width: 0;
  max-width: 100%;
}

.surux-invoice-edit-page {
  overflow-x: clip;
}

/* Keep streamed editor markup available for client initialisation without exposing
   user-setting or date-control hydration between the shimmer and ready states. */
.surux-invoice-edit-page.surux-invoice-client-pending > .surux-page-content > :not(.surux-loading-shimmer):not(.surux-load-error):not(.surux-edit-tab-frame) {
  display: none !important;
}

.surux-invoice-edit-page .surux-finance-tab-details > form {
  width: 100%;
}

.surux-invoice-details-layout > [class*="col-"] {
  min-width: 0;
}

.surux-payment-term-due-date {
  --surux-payment-term-due-info: #38bdf8;
  --surux-payment-term-due-info-strong: #7dd3fc;
}

[data-bs-theme="light"] .surux-payment-term-due-date {
  --surux-payment-term-due-info: #0284c7;
  --surux-payment-term-due-info-strong: #0369a1;
}

.surux-payment-term-due-date-output {
  width: 100%;
  display: flex;
  align-items: center;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.surux-payment-term-due-date-hint {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: .38rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.surux-payment-term-due-date-hint-icon {
  display: none;
  flex: 0 0 auto;
  margin-top: .14em;
}

/* The inset field surface owns the frame, so each calculation state tints the
   surface; the output inside only carries the text colour. */
.surux-payment-term-due-date[data-surux-state="dependency"] > .surux-field-surface {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--surux-payment-term-due-info) 62%, var(--surux-border));
  background: color-mix(in srgb, var(--surux-payment-term-due-info) 8%, var(--surux-input-bg));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--surux-payment-term-due-info) 12%, transparent);
}

.surux-payment-term-due-date[data-surux-state="dependency"] .surux-payment-term-due-date-output {
  color: color-mix(in srgb, var(--surux-payment-term-due-info-strong) 74%, var(--surux-text));
}

.surux-payment-term-due-date[data-surux-state="dependency"] .surux-payment-term-due-date-hint {
  color: color-mix(in srgb, var(--surux-payment-term-due-info-strong) 76%, var(--surux-text));
}

.surux-payment-term-due-date[data-surux-state="dependency"] .surux-payment-term-due-date-hint-icon {
  display: inline-block;
}

.surux-payment-term-due-date[data-surux-state="ready"] .surux-payment-term-due-date-output {
  color: var(--surux-input-color, var(--surux-text));
}

/* Read-only keeps the shared static rim, matching the read-only fields beside it. */
.surux-payment-term-due-date[data-surux-state="readonly"] .surux-payment-term-due-date-output {
  color: var(--surux-disabled-control-color);
  cursor: default;
}

.surux-payment-term-due-date[data-surux-state="readonly"] .surux-payment-term-due-date-hint {
  color: var(--surux-disabled-control-color);
}

.surux-payment-term-due-date[data-surux-state="error"] > .surux-field-surface {
  border-color: color-mix(in srgb, var(--surux-danger-fill) 82%, var(--surux-border));
  background: color-mix(in srgb, var(--surux-danger-fill) 7%, var(--surux-input-bg));
  box-shadow: 0 0 0 .18rem color-mix(in srgb, var(--surux-danger-fill) 14%, transparent);
}

.surux-payment-term-due-date[data-surux-state="error"] .surux-payment-term-due-date-output {
  color: color-mix(in srgb, var(--surux-danger) 72%, var(--surux-text));
}

.surux-payment-term-due-date[data-surux-state="error"] .surux-payment-term-due-date-hint {
  color: color-mix(in srgb, var(--surux-danger) 72%, var(--surux-text));
}

.surux-invoice-repeat-card > .surux-card-body {
  padding: 0;
}

.surux-invoice-repeat-card details,
.surux-invoice-repeat-series {
  min-width: 0;
}

.surux-invoice-repeat-summary,
.surux-invoice-repeats-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-radius: inherit;
  color: var(--surux-text);
  cursor: pointer;
  list-style: none;
  transition: background-color .16s ease, box-shadow .16s ease;
}

.surux-invoice-repeat-summary::-webkit-details-marker,
.surux-invoice-repeats-head::-webkit-details-marker {
  display: none;
}

.surux-invoice-repeat-summary:hover,
.surux-invoice-repeat-summary:focus-visible,
.surux-invoice-repeats-head:hover,
.surux-invoice-repeats-head:focus-visible {
  background: rgba(var(--surux-primary-rgb), .07);
  box-shadow: inset 0 0 0 1px rgba(var(--surux-primary-rgb), .22);
  outline: none;
}

.surux-invoice-repeat-summary-main {
  min-width: 0;
  display: grid;
  gap: .2rem;
}

.surux-invoice-repeat-title {
  font-size: .92rem;
  font-weight: 800;
}

.surux-invoice-repeat-text,
.surux-invoice-repeats-head p {
  margin: 0;
  color: var(--surux-muted);
  font-size: .8rem;
  overflow-wrap: anywhere;
}

.surux-invoice-repeat-indicator,
.surux-invoice-repeat-collapse-indicator {
  width: 2rem;
  height: 2rem;
  flex: 0 0 2rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--surux-border);
  border-radius: 50%;
  color: var(--surux-primary);
  background: var(--surux-surface-2);
}

.surux-invoice-repeat-indicator i,
.surux-invoice-repeat-collapse-indicator i {
  transition: transform .18s ease;
}

.surux-invoice-repeat-card details[open] .surux-invoice-repeat-indicator i,
.surux-invoice-repeat-series[open] .surux-invoice-repeat-collapse-indicator i {
  transform: rotate(180deg);
}

.surux-invoice-repeat-fields {
  margin: 0;
  padding: 0 1.25rem 1.25rem;
  border-top: 1px solid var(--surux-border);
  padding-top: 1.15rem;
}

.surux-editor-summary > .surux-card-body {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.surux-editor-summary-header,
.surux-invoice-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
}

.surux-summary-tone-neutral {
  --surux-summary-color: var(--surux-text);
  --surux-summary-border: var(--surux-border);
  --surux-summary-bg: var(--surux-surface-2);
}

.surux-summary-tone-primary {
  --surux-summary-color: var(--surux-primary);
  --surux-summary-border: rgba(var(--surux-primary-rgb), .3);
  --surux-summary-bg: rgba(var(--surux-primary-rgb), .1);
}

.surux-summary-tone-positive {
  --surux-summary-color: var(--surux-success);
  --surux-summary-border: color-mix(in srgb, var(--surux-success-fill) 34%, var(--surux-border));
  --surux-summary-bg: color-mix(in srgb, var(--surux-success-fill) 10%, var(--surux-surface));
}

.surux-summary-tone-negative {
  --surux-summary-color: var(--surux-danger);
  --surux-summary-border: color-mix(in srgb, var(--surux-danger-fill) 34%, var(--surux-border));
  --surux-summary-bg: color-mix(in srgb, var(--surux-danger-fill) 9%, var(--surux-surface));
}

.surux-summary-tone-warning {
  --surux-summary-color: color-mix(in srgb, var(--surux-warning) 72%, var(--surux-text));
  --surux-summary-border: color-mix(in srgb, var(--surux-warning-fill) 42%, var(--surux-border));
  --surux-summary-bg: color-mix(in srgb, var(--surux-warning-fill) 11%, var(--surux-surface));
}

.surux-summary-tone-info {
  --surux-summary-color: var(--surux-info);
  --surux-summary-border: color-mix(in srgb, var(--surux-info-fill) 38%, var(--surux-border));
  --surux-summary-bg: color-mix(in srgb, var(--surux-info-fill) 10%, var(--surux-surface));
}

.surux-editor-summary-primary {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: .85rem;
  padding: 1rem;
  border: 1px solid var(--surux-summary-border);
  border-radius: .65rem;
  background: linear-gradient(135deg, var(--surux-summary-bg), color-mix(in srgb, var(--surux-summary-bg) 42%, transparent));
}

.surux-editor-summary-primary.has-icon,
.surux-editor-summary-status.has-icon {
  grid-template-columns: 2.5rem minmax(0, 1fr);
}

.surux-editor-summary-primary.is-expandable {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
}

.surux-editor-summary-primary-toggle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: .85rem;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 1rem;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.surux-editor-summary-primary.has-icon .surux-editor-summary-primary-toggle {
  grid-template-columns: 2.5rem minmax(0, 1fr) auto;
}

.surux-editor-summary-primary-toggle:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -2px;
}

.surux-editor-summary-primary-chevron {
  color: var(--surux-summary-color);
  transition: transform 160ms ease;
}

.surux-editor-summary-primary-toggle[aria-expanded="true"] .surux-editor-summary-primary-chevron {
  transform: rotate(180deg);
}

.surux-editor-summary-primary-detail {
  min-width: 0;
  padding: 0 1rem 1rem;
}

.surux-editor-summary-primary-lines {
  display: grid;
  gap: .45rem;
  margin: .15rem 0 0;
  padding-top: .75rem;
  border-top: 1px solid var(--surux-summary-border);
}

.surux-editor-summary-primary-lines > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .2rem .75rem;
  min-width: 0;
}

.surux-editor-summary-primary-lines dt {
  min-width: 0;
  color: var(--surux-muted);
  font-size: .78rem;
  font-weight: 650;
}

.surux-editor-summary-primary-lines dd {
  margin: 0;
  color: var(--surux-text);
  font-size: .9rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  text-align: end;
}

.surux-editor-summary-primary-lines ul {
  flex-basis: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.surux-editor-summary-primary-lines li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .2rem .75rem;
  color: var(--surux-muted);
  font-size: .78rem;
}

.surux-editor-summary-icon {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: var(--surux-summary-color);
  background: var(--surux-summary-bg);
}

.surux-editor-summary-primary > div,
.surux-editor-summary-primary-toggle > div {
  min-width: 0;
  display: grid;
  gap: .12rem;
}

.surux-editor-summary-primary > div > span,
.surux-editor-summary-primary-toggle > div > span {
  color: var(--surux-muted);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .025em;
  text-transform: uppercase;
}

.surux-editor-summary-primary strong,
.surux-editor-summary-primary-toggle strong {
  color: var(--surux-text);
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.surux-editor-summary-primary small,
.surux-editor-summary-primary-toggle small {
  color: var(--surux-muted);
  font-size: .75rem;
  line-height: 1.35;
}

@media (prefers-reduced-motion: reduce) {
  .surux-editor-summary-primary-chevron {
    transition: none;
  }
}

.surux-editor-summary-status {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: .75rem;
  padding: .72rem .8rem;
  border: var(--surux-border-width) solid var(--surux-summary-border);
  border-radius: var(--surux-radius-card);
  background: var(--surux-summary-bg);
}

.surux-editor-summary-status-copy {
  min-width: 0;
  display: grid;
  gap: .3rem;
}

.surux-editor-summary-status-heading {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .65rem;
}

.surux-editor-summary-status-heading > span {
  color: var(--surux-muted);
  font-size: .72rem;
  font-weight: 750;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.surux-editor-summary-status-heading > strong {
  display: inline-flex;
  align-items: center;
  min-height: 1.65rem;
  padding: .24rem .55rem;
  border: var(--surux-border-width) solid var(--surux-summary-border);
  border-radius: var(--surux-radius-pill);
  color: var(--surux-summary-color);
  background: color-mix(in srgb, var(--surux-summary-bg) 70%, var(--surux-surface));
  font-size: .75rem;
  line-height: 1;
  white-space: nowrap;
}

.surux-editor-summary-status-copy > small {
  color: color-mix(in srgb, var(--surux-summary-color) 56%, var(--surux-muted));
  font-size: .75rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.surux-editor-summary-metrics {
  display: grid;
  gap: 0;
  margin: 0;
}

.surux-editor-summary-metric {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .62rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--surux-border) 72%, transparent);
}

.surux-editor-summary-metric:last-child {
  border-bottom: 0;
}

.surux-editor-summary-metrics.is-plain > .surux-editor-summary-metric {
  border-bottom: 0;
}

.surux-editor-summary-metric.is-sub {
  padding-inline-start: 1.05rem;
  padding-block: .28rem;
}

.surux-editor-summary-metric.is-sub dt,
.surux-editor-summary-metric.is-sub dd {
  color: var(--surux-muted);
  font-size: .75rem;
  font-weight: 550;
}

.surux-editor-summary-metric.has-rule {
  margin-top: .35rem;
  padding-top: .75rem;
  border-top: 1px solid var(--surux-border);
}

.surux-editor-summary-metric.is-strong dd {
  font-weight: 800;
}

.surux-editor-summary-metric dt {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  color: var(--surux-muted);
  font-size: .8rem;
  font-weight: 650;
}

.surux-editor-summary-metric dt i {
  width: 1rem;
  color: var(--surux-summary-color);
  text-align: center;
}

.surux-editor-summary-metric dt small {
  flex-basis: 100%;
  padding-left: 1.5rem;
  color: var(--surux-muted);
  font-size: .7rem;
  font-weight: 500;
}

.surux-editor-summary-metric dd {
  margin: 0 0 0 auto;
  color: var(--surux-summary-color);
  font-size: .9rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  text-align: end;
  white-space: nowrap;
}

.surux-editor-summary-metric.is-emphasized {
  margin-top: .2rem;
  padding-block: .8rem;
  border-top: 1px solid var(--surux-summary-border);
}

.surux-editor-summary-metric.is-emphasized dd {
  font-size: 1.05rem;
}

.surux-editor-summary-additional {
  min-width: 0;
  padding-top: 1rem;
  border-top: 1px solid var(--surux-border);
}

.surux-editor-summary-inline-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  color: var(--surux-muted);
  font-size: .82rem;
}

.surux-editor-summary-inline-total strong {
  color: var(--surux-text);
  font-size: .95rem;
  font-variant-numeric: tabular-nums;
}

.surux-quote-details-layout > [class*="col-"] {
  min-width: 0;
}

.surux-quote-deposit-terms {
  min-width: 0;
  margin-top: 1.35rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--surux-border);
}

.surux-quote-deposit-terms-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.surux-quote-deposit-terms-header > p {
  margin: 0;
  color: var(--surux-muted);
  font-size: .78rem;
}

.surux-quote-deposit-slider {
  display: block;
  width: 100%;
  margin: .7rem 0 0;
  accent-color: var(--surux-primary);
}

.surux-quote-summary-card {
  padding: clamp(1.1rem, 2vw, 1.35rem);
}

.surux-quote-summary-card > .surux-card-body {
  height: auto;
  gap: .75rem;
}

.surux-quote-summary-card .surux-editor-summary-primary {
  padding: .8rem;
}

.surux-quote-summary-card .surux-editor-summary-status {
  padding: .62rem .72rem;
}

.surux-quote-summary-card .surux-editor-summary-metric {
  padding-block: .5rem;
}

@media (min-width: 768px) and (max-width: 1199.98px) {
  .surux-quote-summary-card > .surux-card-body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .surux-quote-summary-card .surux-editor-summary-header,
  .surux-quote-summary-card .surux-editor-summary-metrics {
    grid-column: 1 / -1;
  }

  .surux-quote-summary-card .surux-editor-summary-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .surux-quote-summary-card .surux-editor-summary-metric {
    min-width: 0;
    display: grid;
    align-content: center;
    gap: .2rem;
    padding: .5rem .8rem;
    border-bottom: 0;
    border-left: 1px solid color-mix(in srgb, var(--surux-border) 72%, transparent);
  }

  .surux-quote-summary-card .surux-editor-summary-metric:first-child {
    border-left: 0;
  }

  .surux-quote-summary-card .surux-editor-summary-metric dd {
    padding-left: 1.5rem;
  }
}

.surux-quote-finance-modal {
  --bs-modal-width: min(74rem, calc(100vw - 2rem));
}

.surux-quote-finance-dialog {
  width: var(--bs-modal-width);
  max-width: var(--bs-modal-width);
  height: calc(100% - 2rem);
  margin: 1rem auto;
}

.surux-quote-finance-content {
  min-height: 0;
  max-height: calc(100dvh - 2rem);
}

.surux-quote-finance-body {
  min-height: 0;
  overflow-x: hidden;
  padding: 1rem;
}


.surux-quote-finance-fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.surux-quote-finance-layout {
  min-width: 0;
  display: grid;
  gap: 1rem;
}

.surux-quote-finance-intro {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(16rem, 1fr) minmax(28rem, auto);
  align-items: center;
  gap: 1rem;
  padding: .9rem;
  border: 1px solid color-mix(in srgb, var(--surux-border) 82%, rgba(var(--surux-primary-rgb), .18));
  border-radius: .72rem;
  background:
    linear-gradient(135deg, rgba(var(--surux-primary-rgb), .08), transparent 46%),
    color-mix(in srgb, var(--surux-surface-2) 82%, transparent);
}

.surux-quote-finance-intro-copy {
  min-width: 0;
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  align-items: center;
  gap: .75rem;
}

.surux-quote-finance-intro-icon {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(var(--surux-primary-rgb), .28);
  border-radius: .65rem;
  color: var(--surux-primary);
  background: rgba(var(--surux-primary-rgb), .1);
}

.surux-quote-finance-intro-copy p {
  margin: .18rem 0 0;
  color: var(--surux-muted);
  font-size: .78rem;
  line-height: 1.4;
}

.surux-quote-finance-summary {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(7.25rem, 1fr));
  gap: .5rem;
}

.surux-quote-finance-summary-item {
  min-width: 0;
  display: grid;
  gap: .18rem;
  padding: .62rem .72rem;
  border: 1px solid var(--surux-border);
  border-radius: .58rem;
  background: color-mix(in srgb, var(--surux-surface) 86%, transparent);
}

.surux-quote-finance-summary-item > span {
  color: var(--surux-muted);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.surux-quote-finance-summary-item > strong {
  color: var(--surux-text);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.surux-quote-finance-summary-item.is-primary {
  border-color: rgba(var(--surux-primary-rgb), .38);
  background: rgba(var(--surux-primary-rgb), .1);
}

.surux-quote-finance-summary-item.is-primary > strong {
  color: color-mix(in srgb, var(--surux-primary) 84%, var(--surux-text));
}

.surux-quote-finance-workspace {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(18rem, .8fr) minmax(32rem, 1.45fr);
  align-items: start;
  gap: 1rem;
}

.surux-quote-finance-panel {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: .85rem;
  padding: .9rem;
  border: 1px solid var(--surux-border);
  border-radius: .72rem;
  background: color-mix(in srgb, var(--surux-surface-2) 68%, transparent);
}

.surux-quote-finance-panel-heading {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

.surux-quote-finance-panel-heading h3 {
  margin: .12rem 0 0;
  color: var(--surux-text);
  font-size: 1rem;
  font-weight: 750;
}

.surux-quote-finance-count {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: baseline;
  gap: .28rem;
  padding: .3rem .55rem;
  border: 1px solid var(--surux-border);
  border-radius: 999px;
  color: var(--surux-muted);
  background: var(--surux-surface);
  font-size: .7rem;
}

.surux-quote-finance-count > strong {
  color: var(--surux-text);
  font-size: .78rem;
}

.surux-quote-finance-lines {
  min-width: 0;
  max-height: min(48dvh, 31rem);
  display: grid;
  align-content: start;
  gap: .5rem;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: .2rem;
  scrollbar-gutter: stable;
}

.surux-quote-finance-line {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .7rem;
  padding: .68rem .72rem;
  border: 1px solid color-mix(in srgb, var(--surux-border) 86%, transparent);
  border-radius: .58rem;
  background: color-mix(in srgb, var(--surux-surface) 88%, transparent);
}

.surux-quote-finance-line-toggle {
  min-height: auto;
  margin: 0;
  padding-left: 2.2rem;
}

.surux-quote-finance-line-description,
.surux-quote-finance-line-total {
  min-width: 0;
  display: grid;
  gap: .12rem;
}

.surux-quote-finance-line-description > span,
.surux-quote-finance-line-total > span {
  color: var(--surux-muted);
  font-size: .67rem;
}

.surux-quote-finance-line-description > strong {
  overflow: hidden;
  color: var(--surux-text);
  font-size: .78rem;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.surux-quote-finance-line-total {
  justify-items: end;
}

.surux-quote-finance-line-total > strong {
  color: var(--surux-text);
  font-size: .8rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.surux-quote-finance-rate {
  padding: .7rem;
  border: 1px solid color-mix(in srgb, var(--surux-border) 84%, transparent);
  border-radius: .58rem;
  background: color-mix(in srgb, var(--surux-surface) 88%, transparent);
}

.surux-quote-finance-rate .surux-control {
  display: grid;
  grid-template-columns: minmax(8rem, 1fr) minmax(8rem, 12rem);
  align-items: center;
  gap: .75rem;
}

.surux-quote-finance-rate .surux-control > .form-label {
  margin: 0;
}

.surux-quote-finance-terms {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .55rem;
}

.surux-quote-finance-term {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .52rem;
  padding: .68rem .72rem;
  border: 1px solid color-mix(in srgb, var(--surux-border) 86%, transparent);
  border-radius: .58rem;
  background: color-mix(in srgb, var(--surux-surface) 88%, transparent);
}

.surux-quote-finance-term-heading {
  min-width: 0;
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .65rem;
  color: color-mix(in srgb, var(--surux-primary) 82%, var(--surux-text));
  font-size: .78rem;
  font-weight: 750;
}

.surux-quote-finance-term.is-custom > .surux-control {
  grid-column: 1 / -1;
}

.surux-quote-finance-term > div:not(.surux-quote-finance-term-heading):not(.surux-control) {
  min-width: 0;
  display: grid;
  gap: .12rem;
}

.surux-quote-finance-term > div:not(.surux-quote-finance-term-heading) > span {
  color: var(--surux-muted);
  font-size: .62rem;
  line-height: 1.25;
}

.surux-quote-finance-term > div:not(.surux-quote-finance-term-heading) > strong {
  color: var(--surux-text);
  font-size: .76rem;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.surux-quote-finance-term.is-custom {
  border-color: rgba(var(--surux-primary-rgb), .34);
  background: rgba(var(--surux-primary-rgb), .06);
}

@media (max-width: 1199.98px) {
  .surux-quote-finance-intro {
    grid-template-columns: 1fr;
  }

  .surux-quote-finance-workspace {
    grid-template-columns: 1fr;
  }

  .surux-quote-finance-lines {
    max-height: 18rem;
  }
}

@media (max-width: 767.98px) {
  .surux-quote-finance-modal {
    --bs-modal-width: calc(100vw - 1rem);
  }

  .surux-quote-finance-dialog {
    height: calc(100% - 1rem);
    margin: .5rem auto;
  }

  .surux-quote-finance-content {
    max-height: calc(100dvh - 1rem);
  }

  .surux-quote-finance-body {
    padding: .75rem;
  }

  .surux-quote-finance-summary {
    grid-template-columns: 1fr;
  }

  .surux-quote-finance-terms {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 479.98px) {
  .surux-quote-finance-intro,
  .surux-quote-finance-panel {
    padding: .72rem;
  }

  .surux-quote-finance-rate .surux-control {
    grid-template-columns: 1fr;
    gap: .4rem;
  }

  .surux-quote-finance-line {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .surux-quote-finance-line-total {
    grid-column: 2;
    justify-items: start;
  }
}

.surux-metric-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(min(100%, 8.5rem), 1fr));
  gap: .7rem;
}

.surux-edit-overview-context .surux-metric-strip {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.surux-metric-strip-item {
  min-width: 0;
  min-height: 5rem;
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  align-items: center;
  gap: .72rem;
  padding: .78rem .9rem;
  border: var(--surux-border-width) solid var(--surux-summary-border);
  border-radius: var(--surux-radius-card);
  background: linear-gradient(145deg, var(--surux-summary-bg), color-mix(in srgb, var(--surux-surface) 94%, transparent));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}

.surux-metric-strip-icon {
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border-radius: .52rem;
  color: var(--surux-summary-color);
  background: color-mix(in srgb, var(--surux-summary-bg) 78%, var(--surux-surface));
}

.surux-metric-strip-copy {
  min-width: 0;
  display: grid;
  gap: .1rem;
}

.surux-metric-strip-label {
  color: var(--surux-muted);
  font-size: .72rem;
  font-weight: 750;
  letter-spacing: .025em;
  text-transform: uppercase;
}

.surux-metric-strip-copy strong {
  color: var(--surux-text);
  font-size: clamp(1.15rem, 1.7vw, 1.5rem);
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}

.surux-metric-strip-copy small {
  color: var(--surux-muted);
  font-size: .7rem;
  line-height: 1.25;
}

/* TR-0000176. Keyed Metrics tiles opt into native buttons. Action-only strips retain
   the compact presentation; selection uses the approved M03-C18 design below. */
.surux-metric-strip-item-interactive {
  position: relative;
  width: 100%;
  margin: 0;
  color: var(--surux-text);
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .surux-metric-strip-item-interactive:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--surux-text) 34%, var(--surux-summary-border, var(--surux-border)));
  }
}

.surux-metric-strip-item-interactive:focus-visible {
  outline: 2px solid var(--surux-text);
  outline-offset: 3px;
}

.surux-metric-strip-item-interactive:disabled {
  border-style: dashed;
  cursor: not-allowed;
  opacity: .62;
}

/* Semantic colours inherit every appearance and colour-assistance palette. The info
   tone uses the existing adaptive blue/cyan token, rather than Bootstrap's fixed cyan. */
.surux-metric-strip-selectable .surux-metric-strip-item {
  --surux-metric-tone: var(--surux-summary-color);
  --surux-metric-edge: color-mix(in srgb, var(--surux-metric-tone) 72%, var(--surux-border));
  --surux-metric-soft: color-mix(in srgb, var(--surux-metric-tone) 11%, var(--surux-surface));
  --surux-metric-selected-fill: color-mix(in srgb, var(--surux-metric-tone) 22%, var(--surux-surface));
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
  min-height: 9.75rem;
  padding: 1.84375rem 1.59375rem 1.46875rem 4.96875rem;
  border: 0;
  border-radius: .875rem .4375rem .875rem .4375rem;
  background: var(--surux-surface);
  box-shadow: none;
  transition: none;
}

.surux-metric-strip-selectable .surux-summary-tone-neutral {
  --surux-metric-tone: var(--surux-muted);
}

.surux-metric-strip-selectable .surux-summary-tone-warning {
  --surux-metric-tone: var(--surux-warning);
}

.surux-metric-strip-selectable .surux-summary-tone-info {
  --surux-metric-tone: var(--surux-workflow-approved-color);
}

/* Keep both contours inside the clipping edge; a negative inset cuts the border off. */
.surux-metric-strip-selectable .surux-metric-strip-item::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  border: 1.5px solid var(--surux-border);
  border-radius: inherit;
  pointer-events: none;
}

.surux-metric-strip-frame {
  position: absolute;
  z-index: 0;
  inset: 0;
  border: 1.5px solid transparent;
  border-radius: inherit;
  background: linear-gradient(var(--surux-surface), var(--surux-surface)) padding-box,
    linear-gradient(130deg, var(--surux-metric-tone), var(--surux-border) 62%, var(--surux-metric-edge)) border-box;
  pointer-events: none;
  clip-path: inset(0 0 100% 100%);
  transition: clip-path var(--surux-feedback-duration) var(--surux-ease-in-out), opacity 100ms ease;
}

.surux-metric-strip-frame-second {
  clip-path: inset(100% 100% 0 0);
}

.surux-metric-strip-arrow {
  position: absolute;
  z-index: 1;
  inset: 1.5px auto 1.5px 1.5px;
  width: 4.0625rem;
  border-radius: .78125rem 0 0 .34375rem;
  clip-path: polygon(0 0, 80% 0, 100% 50%, 80% 100%, 0 100%);
  background: var(--surux-metric-soft);
  pointer-events: none;
}

.surux-metric-strip-arrow-selected {
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, var(--surux-metric-selected-fill), var(--surux-metric-soft));
  transition: opacity 140ms ease;
}

.surux-metric-strip-selectable .surux-metric-strip-icon {
  position: absolute;
  z-index: 2;
  left: 1.28125rem;
  top: calc(50% - .875rem);
  width: 1.375rem;
  height: 1.75rem;
  border-radius: 0;
  color: var(--surux-metric-tone);
  background: transparent;
  font-size: 1.1875rem;
  pointer-events: none;
}

.surux-metric-strip-selectable .surux-metric-strip-check {
  position: absolute;
  z-index: 4;
  top: .78125rem;
  right: .78125rem;
  display: inline-flex;
  padding: .125rem;
  border: 1px solid var(--surux-metric-edge);
  border-radius: .3125rem;
  color: var(--surux-metric-tone);
  background: transparent;
  font-size: .9375rem;
  line-height: 1;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-25%) scale(.95);
  transition: transform var(--surux-feedback-duration) var(--surux-ease-out), opacity 140ms ease;
}

.surux-metric-strip-selectable .surux-metric-strip-copy {
  position: relative;
  z-index: 3;
  width: 100%;
  gap: .3125rem;
  overflow-wrap: anywhere;
}

.surux-metric-strip-value-row,
.surux-metric-strip-label-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .4375rem;
  min-width: 0;
}

.surux-metric-strip-selectable .surux-metric-strip-copy strong {
  min-width: 0;
  font-size: 2.3125rem;
  font-weight: 500;
  line-height: 1.05;
}

.surux-metric-strip-unit {
  color: var(--surux-muted);
  font-size: .75rem;
}

.surux-metric-strip-divider {
  position: relative;
  display: block;
  height: 1px;
  margin: .25rem 0 .1875rem;
  background: var(--surux-border);
}

.surux-metric-strip-divider-selected {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--surux-metric-tone), var(--surux-metric-edge));
  clip-path: inset(0 50% 0 50%);
  transition: clip-path var(--surux-feedback-duration) var(--surux-ease-in-out), opacity 100ms ease;
}

.surux-metric-strip-label-row {
  gap: .5rem;
}

.surux-metric-strip-field {
  color: var(--surux-muted);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.surux-metric-strip-selectable .surux-metric-strip-label {
  color: var(--surux-metric-tone);
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: normal;
  line-height: 1.3;
  text-transform: none;
}

.surux-metric-strip-selectable .surux-metric-strip-copy small {
  font-size: .6875rem;
  line-height: 1.4;
}

.surux-metric-strip-motion {
  opacity: 0;
}

.surux-metric-strip-item-interactive.is-selected .surux-metric-strip-motion,
.surux-metric-strip-item-interactive.is-selected .surux-metric-strip-check {
  opacity: 1;
}

.surux-metric-strip-item-interactive.is-selected .surux-metric-strip-frame,
.surux-metric-strip-item-interactive.is-selected .surux-metric-strip-divider-selected {
  clip-path: inset(0);
}

.surux-metric-strip-item-interactive.is-selected .surux-metric-strip-check {
  transform: translateY(0) scale(1);
}

.surux-metric-strip-selectable .surux-metric-strip-item-interactive:disabled {
  opacity: .48;
}

.surux-metric-strip-selection {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: .6rem;
}

.surux-metric-strip-selection-count {
  color: var(--surux-muted);
  font-size: .78rem;
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .surux-metric-strip-item-interactive {
    transition: none;
  }

  .surux-metric-strip-selectable .surux-metric-strip-item .surux-metric-strip-motion,
  .surux-metric-strip-selectable .surux-metric-strip-item .surux-metric-strip-check {
    clip-path: none;
    transform: none;
    transition: opacity 140ms ease;
  }

  .surux-metric-strip-selectable .surux-metric-strip-frame-second {
    display: none;
  }
}

/* Keyboard/assistive activation and initial state are immediate. Pointer changes
   use CSS transitions, so rapid toggles reverse from their current position. */
.surux-metric-strip[data-surux-metric-motion="instant"] .surux-metric-strip-motion,
.surux-metric-strip[data-surux-metric-motion="instant"] .surux-metric-strip-check {
  transition: none;
}

/* Shared chrome for every summary strip: a headline figure at each end, the numbers between them.
   The middle is what varies — a composition meters parts of a total, an outlook tiles alternative
   readings of one quantity side by side. */
.surux-strip {
  /* One rhythm for the whole row. Anything the strip lays out beside its dividers spaces itself
     by this, so an inner group cannot end up tighter than the gaps around it. */
  --surux-strip-gap: 1.15rem;
  display: grid;
  grid-template-columns: auto 1px minmax(0, 1fr) 1px auto;
  align-items: center;
  gap: var(--surux-strip-gap);
  padding: .8rem 1rem;
  border: 1px solid var(--surux-border);
  border-radius: .58rem;
  background: linear-gradient(145deg, color-mix(in srgb, var(--surux-surface-2) 70%, transparent), color-mix(in srgb, var(--surux-surface) 94%, transparent));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}

.surux-strip-open-ended {
  grid-template-columns: auto 1px minmax(0, 1fr);
}

.surux-strip-with-aside {
  grid-template-columns: auto 1px minmax(0, 1fr) 1px auto 1px auto;
}

.surux-strip-open-ended.surux-strip-with-aside {
  grid-template-columns: auto 1px minmax(0, 1fr) 1px auto;
}

/* Supporting figures at two thirds the size of the ends, so the strip still reads as having two
   of them rather than four. */
.surux-strip-aside {
  display: grid;
  gap: .42rem;
  justify-items: end;
  text-align: end;
  white-space: nowrap;
}

.surux-strip-aside-item {
  display: grid;
  gap: .01rem;
}

.surux-strip-aside-label {
  color: var(--surux-muted);
  font-size: .62rem;
  font-weight: 750;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.surux-strip-aside-item strong {
  color: color-mix(in srgb, var(--surux-strip-hue, var(--surux-text)) 72%, var(--surux-text));
  font-size: 1.02rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}

.surux-strip-aside-item.is-quiet strong {
  color: color-mix(in srgb, var(--surux-muted) 72%, transparent);
}

.surux-strip-aside-note {
  color: color-mix(in srgb, var(--surux-strip-hue, var(--surux-muted)) 62%, var(--surux-text));
  font-size: .62rem;
  font-style: normal;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.surux-strip-rule {
  align-self: stretch;
  background: var(--surux-border);
}

.surux-strip-figure {
  display: grid;
  gap: .02rem;
  line-height: 1.3;
  white-space: nowrap;
}

.surux-strip-figure-trailing {
  justify-items: end;
  text-align: end;
}

.surux-strip-figure-label {
  color: var(--surux-muted);
  font-size: .67rem;
  font-weight: 750;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Mixed with the text colour rather than used raw: a saturated hue at this size reads as an alert
   even when the figure is only a total. Neutral resolves to the text colour and mixes to itself. */
.surux-strip-figure strong {
  color: color-mix(in srgb, var(--surux-strip-hue, var(--surux-text)) 72%, var(--surux-text));
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  line-height: 1.12;
}

.surux-strip-figure small {
  color: var(--surux-muted);
  font-size: .72rem;
}

.surux-strip-figure-accent {
  margin-inline-end: .3em;
  color: color-mix(in srgb, var(--surux-strip-hue, var(--surux-muted)) 72%, var(--surux-text));
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

/* Nothing to report: the figure holds its column and goes quiet, so closing a month out does not
   reflow the strip around it. */
.surux-strip-figure.is-quiet strong {
  color: color-mix(in srgb, var(--surux-muted) 72%, transparent);
}

/* One grid for every part rather than a grid each, so the tracks share a start and an end. Bars
   that begin and end in different places cannot be compared, which is the whole job here. */
.surux-composition-parts {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(5.5rem, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: .5rem .7rem;
  margin: 0;
  line-height: 1.2;
}

.surux-composition-part {
  display: contents;
}

.surux-composition-part dt {
  color: var(--surux-muted);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  white-space: nowrap;
}

.surux-composition-part dd {
  margin: 0;
}

.surux-composition-meter {
  position: relative;
  min-width: 0;
  height: .72rem;
  border-radius: .22rem;
  background: rgba(255, 255, 255, .06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
  overflow: hidden;
}

.surux-composition-fill {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: var(--surux-composition-share, 0%);
  border-radius: .22rem;
  background: var(--surux-strip-hue, var(--surux-primary));
}

/* An amount too small to draw still gets a mark, so a present part never reads as an absent one. */
.surux-composition-meter.is-present .surux-composition-fill {
  min-width: 3px;
}

/* Line height is pinned rather than inherited: at this track height the parts' 1.2 would push the
   percentage taller than the bar it sits in, and the bar clips its own contents. */
.surux-composition-share {
  position: absolute;
  inset-block: 0;
  display: flex;
  align-items: center;
  font-size: .64rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}

.surux-composition-meter-labelled-inside .surux-composition-share {
  inset-inline-end: calc(100% - var(--surux-composition-share, 0%) + .42rem);
  color: var(--surux-strip-on-fill, #04121a);
}

.surux-composition-meter-labelled-outside .surux-composition-share {
  inset-inline-start: calc(var(--surux-composition-share, 0%) + .45rem);
  color: var(--surux-muted);
}

.surux-composition-amount {
  font-size: .86rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.surux-composition-amount.is-empty {
  color: color-mix(in srgb, var(--surux-muted) 65%, transparent);
}

.surux-composition-sharebar {
  display: grid;
  gap: .45rem;
}

.surux-composition-sharebar-track {
  display: flex;
  height: .35rem;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surux-border) 70%, transparent);
}

.surux-composition-sharebar-track > span {
  display: block;
  height: 100%;
  background: var(--surux-strip-hue, var(--surux-primary));
}

.surux-composition-sharebar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--surux-muted);
  font-size: .75rem;
  font-variant-numeric: tabular-nums;
}

.surux-composition-sharebar-legend li {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

.surux-composition-sharebar-legend i {
  width: .55rem;
  height: .55rem;
  border-radius: 999px;
  background: var(--surux-strip-hue, var(--surux-primary));
}

/* One hue per tone, driving both the bar fill and the figure that shares its tone. These are not
   the --surux-summary-color values: those are tuned to read as text on a tinted background, and
   are too washed out to carry a solid fill. --surux-strip-on-fill is what stays legible
   printed on top of the hue, which is the opposite requirement. */
/* Alternative readings of one quantity, side by side. Tiles rather than bars: these cluster close
   together on any healthy month, and three near-equal lengths off a shared zero said less than the
   amounts printed beside them. */
.surux-outlook-points {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  align-items: stretch;
  gap: var(--surux-strip-gap, .5rem);
  margin: 0;
}

.surux-outlook-point {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: .04rem;
  padding: .5rem .7rem;
  border: 1px solid color-mix(in srgb, var(--surux-border) 82%, transparent);
  border-radius: .5rem;
  background: color-mix(in srgb, var(--surux-app-bg) 42%, transparent);
  line-height: 1.2;
}

.surux-outlook-point dt {
  overflow: hidden;
  color: var(--surux-muted);
  font-size: .64rem;
  font-weight: 750;
  letter-spacing: .055em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.surux-outlook-point dd {
  margin: 0;
}

.surux-outlook-value {
  color: color-mix(in srgb, var(--surux-strip-hue, var(--surux-text)) 72%, var(--surux-text));
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  font-weight: 750;
  letter-spacing: -.01em;
  white-space: nowrap;
}

/* Names this reading's place among the others, which the label alone does not: "Conservative"
   says how it was arrived at, "Floor" says where it sits. */
.surux-outlook-caption {
  color: var(--surux-muted);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.surux-strip .surux-summary-tone-neutral {
  --surux-strip-hue: var(--surux-text);
  --surux-strip-on-fill: var(--surux-app-bg);
}

.surux-strip .surux-summary-tone-primary {
  --surux-strip-hue: var(--surux-primary);
  --surux-strip-on-fill: #04121a;
}

.surux-strip .surux-summary-tone-positive {
  --surux-strip-hue: color-mix(in srgb, var(--surux-success-fill) 82%, #000);
  --surux-strip-on-fill: color-mix(in srgb, var(--surux-success-fill) 8%, #fff);
}

.surux-strip .surux-summary-tone-info {
  --surux-strip-hue: var(--surux-info-fill);
  --surux-strip-on-fill: #04121a;
}

.surux-strip .surux-summary-tone-warning {
  --surux-strip-hue: var(--surux-warning-fill);
  --surux-strip-on-fill: #241a00;
}

.surux-strip .surux-summary-tone-negative {
  --surux-strip-hue: var(--surux-danger-fill);
  --surux-strip-on-fill: color-mix(in srgb, var(--surux-danger-fill) 6%, #fff);
}

@media (max-width: 991.98px) {
  .surux-strip,
  .surux-strip-open-ended,
  .surux-strip-with-aside,
  .surux-strip-open-ended.surux-strip-with-aside {
    grid-template-columns: minmax(0, 1fr);
  }

  .surux-strip-rule {
    height: 1px;
  }

  /* Stacked, nothing on the right is opposite anything to align against. */
  .surux-strip-figure-trailing,
  .surux-strip-aside {
    justify-items: start;
    text-align: start;
  }
}

/* Share has no leading figure and no rule, so the open-ended grid would park the bar in the
   first auto column and size that column to the legend. One track column keeps the bar as wide
   as the card on every viewport. */
.surux-composition-strip-share {
  grid-template-columns: minmax(0, 1fr);
}

.surux-composition-strip-share .surux-composition-sharebar,
.surux-composition-strip-share .surux-composition-sharebar-track {
  inline-size: 100%;
  min-inline-size: 0;
}

.surux-metric-strip-error {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .7rem .85rem;
  border: 1px solid color-mix(in srgb, var(--surux-warning-fill) 42%, var(--surux-border));
  border-radius: .58rem;
  color: color-mix(in srgb, var(--surux-warning) 78%, var(--surux-text));
  background: color-mix(in srgb, var(--surux-warning-fill) 9%, var(--surux-surface));
}

.surux-metric-strip-error > span {
  min-width: 0;
  flex: 1 1 auto;
  display: grid;
  gap: .08rem;
}

.surux-metric-strip-error small {
  color: var(--surux-muted);
}

.surux-editor-summary-compact {
  padding: 1rem;
}

.surux-editor-summary-compact > .surux-card-body {
  display: grid;
  grid-template-columns: minmax(15rem, .72fr) minmax(0, 2.28fr);
  gap: .7rem 1rem;
}

.surux-editor-summary-compact .surux-editor-summary-header {
  grid-column: 1 / -1;
}

.surux-editor-summary-compact .surux-editor-summary-primary {
  align-self: stretch;
  padding: .72rem .8rem;
}

.surux-editor-summary-compact .surux-editor-summary-primary.has-icon {
  grid-template-columns: 2rem minmax(0, 1fr);
}

.surux-editor-summary-compact .surux-editor-summary-icon {
  width: 2rem;
  height: 2rem;
  border-radius: .48rem;
}

.surux-editor-summary-compact .surux-editor-summary-primary strong {
  font-size: 1rem;
}

.surux-editor-summary-compact .surux-editor-summary-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
}

.surux-editor-summary-compact .surux-editor-summary-metric {
  min-width: 0;
  display: grid;
  align-content: center;
  justify-content: stretch;
  gap: .18rem;
  padding: .42rem .75rem;
  border-bottom: 0;
  border-left: 1px solid color-mix(in srgb, var(--surux-border) 72%, transparent);
}

.surux-editor-summary-compact .surux-editor-summary-metric dt {
  flex-wrap: nowrap;
  font-size: .72rem;
}

.surux-editor-summary-compact .surux-editor-summary-metric dd {
  padding-left: 1.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 1199.98px) {
  .surux-metric-strip,
  .surux-editor-summary-compact .surux-editor-summary-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .surux-editor-summary-compact > .surux-card-body {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 575.98px) {
  .surux-metric-strip,
  .surux-edit-overview-context .surux-metric-strip {
    grid-template-columns: minmax(0, 1fr);
  }

  .surux-editor-summary-compact .surux-editor-summary-metrics {
    grid-template-columns: minmax(0, 1fr);
  }

  .surux-editor-summary-compact .surux-editor-summary-metric {
    border-left: 0;
    border-top: 1px solid color-mix(in srgb, var(--surux-border) 72%, transparent);
  }

  .surux-metric-strip-error {
    align-items: flex-start;
    flex-wrap: wrap;
  }
}

.surux-invoice-line-items-card.surux-input-invalid {
  border-color: var(--surux-danger-fill);
  box-shadow: 0 0 0 .18rem color-mix(in srgb, var(--surux-danger-fill) 18%, transparent);
}

.surux-finance-line-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.surux-finance-line-panel-header .surux-section-heading {
  margin: 0;
}

.surux-finance-line-count {
  display: inline-flex;
  align-items: center;
  min-height: 1.8rem;
  padding: .25rem .6rem;
  border: 1px solid var(--surux-border);
  border-radius: 999px;
  color: var(--surux-muted);
  background: color-mix(in srgb, var(--surux-surface-2) 82%, transparent);
  font-size: .72rem;
  font-weight: 750;
  white-space: nowrap;
}

.surux-invoice-line-items {
  --surux-invoice-line-columns: 4.5rem 4.5rem minmax(13rem, 2.2fr) minmax(6.5rem, .7fr) minmax(7.5rem, .85fr) 4.5rem minmax(8rem, .85fr) minmax(8rem, .85fr);
  min-width: 0;
  display: grid;
  gap: .72rem;
}

.surux-invoice-line-items[data-surux-line-reorder-enabled="false"] {
  --surux-invoice-line-columns: 4.5rem minmax(13rem, 2.2fr) minmax(6.5rem, .7fr) minmax(7.5rem, .85fr) 4.5rem minmax(8rem, .85fr) minmax(8rem, .85fr);
}

.surux-invoice-line-header {
  display: none;
}

.surux-invoice-line {
  min-width: 0;
  padding: .82rem;
  border: 1px solid var(--surux-border);
  border-radius: .58rem;
  background: color-mix(in srgb, var(--surux-surface-2) 86%, transparent);
  transition: opacity .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.surux-invoice-line:focus-within {
  border-color: rgba(var(--surux-primary-rgb), .46);
  box-shadow: 0 0 0 .16rem rgba(var(--surux-primary-rgb), .09);
}

.surux-invoice-line-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: var(--surux-invoice-line-columns);
  align-items: end;
  gap: .65rem;
}

.surux-invoice-line-grid > * {
  min-width: 0;
}

.surux-invoice-line-items[data-surux-line-reorder-enabled="false"]:not([data-surux-line-notes="true"]) .surux-invoice-line-actions,
.surux-invoice-line-items[data-surux-line-reorder-enabled="false"]:not([data-surux-line-notes="true"]) [data-surux-line-header="actions"] {
  display: none;
}

.surux-invoice-line-actions {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: .28rem;
}

.surux-finance-line-note {
  min-width: 0;
  margin-top: .55rem;
}

.surux-finance-line-note-preview {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin: 0;
  min-width: 0;
  color: var(--surux-muted);
  font-size: .78rem;
  line-height: 1.35;
}

.surux-finance-line-note-preview[hidden] {
  display: none;
}

.surux-finance-line-note-preview i {
  flex: 0 0 auto;
}

.surux-finance-line-note-preview span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.surux-finance-line-note-editor {
  margin-top: .55rem;
}

.surux-finance-line-note-editor[hidden] {
  display: none;
}

.surux-finance-line-note-action[data-surux-line-note-present]::after {
  content: "";
  width: .42rem;
  height: .42rem;
  margin-left: .12rem;
  border-radius: 50%;
  background: var(--surux-primary);
  flex: 0 0 auto;
}

.surux-invoice-line-drag-handle {
  width: 2rem;
  height: 2.25rem;
  flex: 0 0 2rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--surux-border);
  border-radius: .46rem;
  color: var(--surux-muted);
  background: var(--surux-surface);
  cursor: grab;
  touch-action: none;
}

.surux-invoice-line-drag-handle:hover,
.surux-invoice-line-drag-handle:focus-visible,
.surux-invoice-line-drag-handle[aria-grabbed="true"] {
  border-color: rgba(var(--surux-primary-rgb), .58);
  color: var(--surux-primary);
  outline: 0;
  box-shadow: 0 0 0 .16rem rgba(var(--surux-primary-rgb), .12);
}

.surux-invoice-line.is-dragging {
  z-index: 1;
  opacity: .78;
  border-color: var(--surux-primary);
  box-shadow: 0 .8rem 1.8rem rgba(0, 0, 0, .24);
  transform: scale(.995);
}

.surux-invoice-line-items.is-reordering .surux-invoice-line:not(.is-dragging) {
  opacity: .68;
}

.surux-invoice-line-vat {
  min-height: 42px;
  align-items: center;
  margin: 0;
  padding-bottom: .52rem;
}

.surux-invoice-line-add {
  display: flex;
  justify-content: center;
  padding-top: .85rem;
}

@media (min-width: 1400px) {
  .surux-invoice-line-items {
    gap: .45rem;
  }

  .surux-invoice-line-header {
    min-width: 0;
    display: grid;
    grid-template-columns: var(--surux-invoice-line-columns);
    align-items: end;
    gap: .65rem;
    padding: .05rem .6rem;
    border-inline: 1px solid transparent;
    color: var(--surux-muted);
    font-size: .78rem;
    font-weight: 650;
    line-height: 1.25;
    white-space: nowrap;
  }

  .surux-invoice-line-header > * {
    min-width: 0;
  }

  .surux-invoice-line-header [data-surux-line-header="actions"],
  .surux-invoice-line-header [data-surux-line-header="line"],
  .surux-invoice-line-header [data-surux-line-header="vat"] {
    text-align: center;
  }

  .surux-invoice-line-header [data-surux-line-header="quantity"],
  .surux-invoice-line-header [data-surux-line-header="price"],
  .surux-invoice-line-header [data-surux-line-header="total-excluding"],
  .surux-invoice-line-header [data-surux-line-header="total-including"] {
    text-align: right;
  }

  .surux-invoice-line {
    padding: .6rem;
  }


  .surux-invoice-line-vat {
    justify-content: center;
    padding: .55rem;
  }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
  .surux-invoice-line-grid {
    grid-template-columns: 4.5rem minmax(6rem, .75fr) minmax(6rem, .75fr) minmax(7rem, .8fr);
  }

  .surux-finance-line-grid {
    grid-template-columns: calc(5 * var(--surux-icon-only-subtle-size, 2.25rem) + 4 * .28rem) minmax(6rem, .75fr) minmax(6rem, .75fr) minmax(7rem, .8fr);
  }

  .surux-invoice-line-actions {
    grid-column: 1;
  }

  .surux-invoice-line-description {
    grid-column: 2 / -1;
  }
}

/* Canonical finance line editor; invoice aliases remain during module migration. */
.surux-finance-line-header [data-surux-line-header="line"],
.surux-finance-line-sequence {
  min-width: 3.75rem;
  white-space: nowrap;
}

.surux-finance-line-items,
.surux-finance-line-items[data-surux-line-notes="true"] {
  --surux-invoice-line-columns: calc(5 * var(--surux-icon-only-subtle-size, 2.25rem) + 4 * .28rem) 3.75rem minmax(10rem, 2fr) minmax(5.25rem, .65fr) minmax(6.25rem, .8fr) minmax(7rem, .9fr) minmax(6.25rem, .75fr) minmax(6.25rem, .75fr) minmax(6.25rem, .75fr);
}

.surux-finance-line-items[data-surux-line-reorder-enabled="false"]:not([data-surux-line-notes="true"]) {
  --surux-invoice-line-columns: 3.75rem minmax(10rem, 2fr) minmax(5.25rem, .65fr) minmax(6.25rem, .8fr) minmax(7rem, .9fr) minmax(6.25rem, .75fr) minmax(6.25rem, .75fr) minmax(6.25rem, .75fr);
}

.surux-finance-line-items[data-surux-line-reorder-enabled="false"][data-surux-line-notes="true"] {
  --surux-invoice-line-columns: var(--surux-icon-only-subtle-size, 2.25rem) 3.75rem minmax(10rem, 2fr) minmax(5.25rem, .65fr) minmax(6.25rem, .8fr) minmax(7rem, .9fr) minmax(6.25rem, .75fr) minmax(6.25rem, .75fr) minmax(6.25rem, .75fr);
}

.surux-empty-state-shell-compact {
  min-height: 0;
  border: 1px dashed var(--surux-border);
  border-radius: .58rem;
  color: var(--surux-muted);
  text-align: center;
}

.surux-empty-state-shell-compact[hidden] {
  display: none;
}

.surux-empty-state-compact {
  min-height: 7rem;
  gap: .35rem;
  padding: .85rem 1rem;
}

.surux-empty-state-compact .surux-empty-icon {
  width: 2.65rem;
  height: 2.65rem;
  border-radius: .65rem;
  font-size: 1rem;
}

.surux-empty-state-compact .surux-empty-title {
  font-size: .9rem;
}

.surux-empty-state-compact p {
  max-width: 30rem;
  font-size: .78rem;
  line-height: 1.35;
}

.surux-finance-line-actions {
  flex-wrap: nowrap;
  min-height: 2.25rem;
}

@media (min-width: 1200px) {
  .surux-finance-line-header [data-surux-line-header="quantity"],
  .surux-finance-line-header [data-surux-line-header="price"],
  .surux-finance-line-header [data-surux-line-header="total-excluding"],
  .surux-finance-line-header [data-surux-line-header="vat-amount"],
  .surux-finance-line-header [data-surux-line-header="total-including"] {
    text-align: right;
  }
}

.surux-invoice-transaction-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .75rem;
  margin: 0;
}

.surux-invoice-transaction-summary-grid > div {
  min-width: 0;
  display: grid;
  gap: .16rem;
  padding: .75rem;
  border: 1px solid var(--surux-border);
  border-radius: .52rem;
  background: var(--surux-surface-2);
}

.surux-invoice-transaction-summary-grid dt,
.surux-invoice-send-recipient-value > span,
.surux-invoice-send-channel > span {
  color: var(--surux-muted);
  font-size: .7rem;
  font-weight: 750;
  text-transform: uppercase;
}

.surux-invoice-transaction-summary-grid dd {
  min-width: 0;
  margin: 0;
  color: var(--surux-text);
  font-weight: 750;
  overflow-wrap: anywhere;
}

.surux-transaction-linker {
  display: grid;
  gap: 1rem;
}

.surux-transaction-linker-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.surux-transaction-linker-heading-title,
.surux-finance-transaction-summary,
.surux-transaction-meta-row,
.surux-transaction-match-reasons {
  display: flex;
  align-items: center;
  gap: .55rem;
  flex-wrap: wrap;
}

.surux-transaction-linker-count,
.surux-transaction-match-reasons > span {
  padding: .2rem .45rem;
  border: 1px solid var(--surux-border);
  border-radius: 999px;
  color: var(--surux-muted);
  background: var(--surux-surface-2);
  font-size: .7rem;
}

.surux-finance-transaction-summary > span {
  display: grid;
  gap: .08rem;
  padding-inline: .55rem;
  border-left: 1px solid var(--surux-border);
}

.surux-finance-transaction-summary > span > span,
.surux-transaction-metric-cell > span {
  color: var(--surux-muted);
  font-size: .68rem;
  text-transform: uppercase;
}

.surux-transaction-linker-list {
  display: grid;
  gap: .6rem;
}

.surux-transaction-linker-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: .8rem;
  padding: .72rem;
  border: 1px solid var(--surux-border);
  border-radius: .52rem;
  background: var(--surux-surface-2);
}

.surux-transaction-possible-row {
  grid-template-columns: 4rem minmax(12rem, 1fr) minmax(7rem, auto) minmax(8rem, auto) minmax(8rem, .5fr) auto;
}

.surux-transaction-linker-row > div,
.surux-transaction-linker-row > div > strong,
.surux-transaction-linker-row > div > small,
.surux-transaction-detail-cell {
  min-width: 0;
}

.surux-transaction-linker-row > div > small,
.surux-transaction-detail-cell > div {
  display: block;
  color: var(--surux-muted);
  font-size: .72rem;
  overflow-wrap: anywhere;
}

.surux-transaction-linker-amount,
.surux-transaction-metric-cell,
.surux-transaction-score-cell {
  display: grid;
  gap: .12rem;
}

.surux-transaction-score-cell {
  justify-items: center;
}

.surux-transaction-match-score {
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--surux-border);
  border-radius: 50%;
  color: var(--surux-text);
  background: var(--surux-surface);
  font-weight: 800;
  list-style: none;
}

.surux-transaction-score-details {
  position: relative;
}

.surux-transaction-score-popover {
  position: absolute;
  z-index: 5;
  top: calc(100% + .4rem);
  left: 0;
  width: min(21rem, calc(100vw - 3rem));
  padding: .7rem;
  border: 1px solid var(--surux-border);
  border-radius: .55rem;
  background: var(--surux-surface);
  box-shadow: 0 .8rem 2rem rgba(0, 0, 0, .28);
}

.surux-transaction-score-popover-head,
.surux-transaction-score-breakdown-row {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: .75rem;
}

.surux-transaction-score-breakdown-row {
  padding-block: .35rem;
  border-top: 1px solid var(--surux-border);
}

.surux-transaction-score-breakdown-row span,
.surux-transaction-score-breakdown-row strong,
.surux-transaction-score-breakdown-row small {
  display: block;
}

.surux-transaction-linker-feedback {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  margin-bottom: .8rem;
  padding: .7rem;
  border: 1px solid rgba(var(--surux-primary-rgb), .28);
  border-radius: .5rem;
  background: rgba(var(--surux-primary-rgb), .07);
}

.surux-invoice-send-recipient {
  display: grid;
  grid-template-columns: minmax(7rem, .25fr) minmax(0, 1fr);
  gap: .8rem;
  padding: .8rem;
  border: 1px solid var(--surux-border);
  border-radius: .56rem;
  background: var(--surux-surface-2);
}

.surux-invoice-send-recipient + .surux-invoice-send-recipient {
  margin-top: .65rem;
}

.surux-invoice-send-recipient-section {
  color: var(--surux-primary);
  font-size: .75rem;
  font-weight: 800;
  text-transform: uppercase;
}

.surux-invoice-send-recipient-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .7rem;
}

.surux-invoice-send-recipient-value,
.surux-invoice-send-channel {
  min-width: 0;
  display: grid;
  gap: .22rem;
}

.surux-invoice-send-recipient-value strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.surux-invoice-send-recipient-value.is-empty strong {
  color: var(--surux-muted);
  font-weight: 500;
}

.surux-invoice-send-channel-options {
  display: flex;
  gap: .35rem;
}

.surux-invoice-send-channel-option {
  width: 2.3rem;
  height: 2.3rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--surux-border);
  border-radius: .5rem;
  color: var(--surux-muted);
  background: var(--surux-surface);
  cursor: pointer;
}

.btn-check:checked + .surux-invoice-send-channel-option,
.surux-invoice-send-channel-option:hover,
.surux-invoice-send-channel-option:focus-visible {
  border-color: rgba(var(--surux-primary-rgb), .64);
  color: var(--surux-primary);
  background: rgba(var(--surux-primary-rgb), .12);
  box-shadow: 0 0 0 .15rem rgba(var(--surux-primary-rgb), .1);
}

.surux-invoice-send-channel-option.is-whatsapp:not(.is-disabled) {
  color: #25d366;
}

.surux-invoice-send-channel-option.is-disabled {
  cursor: not-allowed;
  opacity: .45;
}

/*
 * Quote Submit dialog. Restored verbatim from aa69aa28^, which deleted surux.finance.css and
 * stripped these class names out of the markup in the same pass - along with the UiRegressionTests
 * that asserted them, which is why nothing caught it. The Invoices twin above was re-styled here
 * three days later under surux-invoice-send-*; Quotes was left bare. These rules live here rather
 * than in a recreated surux.finance.css because retiring that file was the point of the change.
 */

/* Finance status-history timeline. Restored verbatim from aa69aa28^, which deleted
   surux.finance.css and stripped every surux-finance-status-history-* token out of the
   markup with it, leaving the Bills, Credit Notes, Loans, Quotes and VAT timelines as
   unstyled bare divs. Placed beside the other finance component styles. */
.surux-finance-status-history-card {
    min-height: 0 !important;
    display: grid;
    align-content: start;
    gap: .8rem;
    padding: clamp(.95rem, 1.45vw, 1.35rem) !important;
}

.surux-finance-status-history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.surux-finance-status-history-count {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: .22rem .58rem;
    border: 1px solid color-mix(in srgb, var(--surux-border) 70%, rgba(var(--surux-primary-rgb), .22));
    border-radius: 999px;
    background: rgba(var(--surux-primary-rgb), .07);
    color: color-mix(in srgb, var(--surux-muted) 78%, var(--surux-primary) 22%);
    font-size: .72rem;
    font-weight: 750;
    line-height: 1;
    white-space: nowrap;
}

.surux-finance-status-history {
    display: grid;
    gap: .58rem;
}

.surux-finance-status-history-row {
    display: grid;
    grid-template-columns: 1rem minmax(0, 1fr) auto;
    align-items: start;
    gap: .72rem;
    padding: .78rem .82rem;
    border: 1px solid color-mix(in srgb, var(--surux-border) 86%, rgba(var(--surux-primary-rgb), .15));
    border-radius: .68rem;
    background:
        linear-gradient(135deg, rgba(var(--surux-primary-rgb), .055), transparent 58%),
        color-mix(in srgb, var(--surux-surface) 92%, transparent);
    box-shadow: 0 .65rem 1.35rem rgba(0, 0, 0, .10);
}

.surux-finance-status-history-current {
    border-color: color-mix(in srgb, var(--surux-border) 58%, rgba(var(--surux-primary-rgb), .42));
    background:
        linear-gradient(135deg, rgba(var(--surux-primary-rgb), .12), transparent 62%),
        color-mix(in srgb, var(--surux-surface) 90%, transparent);
}

.surux-finance-status-history-marker {
    position: relative;
    width: 1rem;
    min-height: 100%;
    display: flex;
    justify-content: center;
    padding-top: .35rem;
}

.surux-finance-status-history-marker::after {
    content: "";
    position: absolute;
    top: 1.05rem;
    bottom: -.95rem;
    width: 1px;
    background: color-mix(in srgb, var(--surux-border) 72%, rgba(var(--surux-primary-rgb), .28));
}

.surux-finance-status-history-row:last-child .surux-finance-status-history-marker::after {
    display: none;
}

.surux-finance-status-history-marker span {
    position: relative;
    z-index: 1;
    width: .62rem;
    height: .62rem;
    border-radius: 999px;
    border: 1px solid rgba(var(--surux-primary-rgb), .55);
    background: color-mix(in srgb, var(--surux-primary) 64%, var(--surux-surface));
    box-shadow: 0 0 0 .22rem rgba(var(--surux-primary-rgb), .12);
}

.surux-finance-status-history-main {
    min-width: 0;
    display: grid;
    gap: .42rem;
}

.surux-finance-status-history-title,
.surux-finance-status-history-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem;
}

.surux-finance-status-history-current-label {
    color: var(--surux-primary);
    font-size: .74rem;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .055em;
}

.surux-finance-status-history-meta,
.surux-finance-status-history-user {
    color: var(--surux-muted);
    font-size: .78rem;
    line-height: 1.35;
}

.surux-finance-status-history-reason {
    padding: .55rem .65rem;
    border: 1px solid color-mix(in srgb, var(--surux-border) 78%, rgba(var(--surux-primary-rgb), .16));
    border-radius: .55rem;
    background: color-mix(in srgb, var(--surux-input-bg) 78%, transparent);
    color: color-mix(in srgb, var(--surux-text) 86%, var(--surux-muted));
    font-size: .8rem;
    line-height: 1.42;
}

.surux-finance-status-history-duration {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 4.8rem;
    min-height: 2rem;
    padding: .35rem .65rem;
    border: 1px solid color-mix(in srgb, var(--surux-border) 72%, rgba(var(--surux-primary-rgb), .2));
    border-radius: 999px;
    background: color-mix(in srgb, var(--surux-input-bg) 72%, transparent);
    color: var(--surux-text);
    font-size: .82rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.surux-finance-status-history-empty {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .75rem;
    color: var(--surux-text);
}

@media (max-width: 767.98px) {
    .surux-finance-status-history-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .surux-finance-status-history-row {
        grid-template-columns: 1rem minmax(0, 1fr);
        gap: .62rem;
        padding: .72rem;
    }

    .surux-finance-status-history-duration {
        grid-column: 2;
        justify-self: start;
        min-height: 1.8rem;
    }
}


.surux-quote-send-modal .modal-dialog {
    max-width: min(1080px, calc(100vw - 2rem));
}

.surux-quote-send-modal .modal-content {
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--surux-border) 76%, rgba(var(--surux-primary-rgb), .28));
    border-radius: .72rem;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--surux-surface) 94%, rgba(255, 255, 255, .06)), var(--surux-surface));
    color: var(--surux-text);
    box-shadow:
        0 2rem 5rem rgba(0, 0, 0, .4),
        inset 0 1px 0 rgba(255, 255, 255, .06);
}

[data-bs-theme="light"] .surux-quote-send-modal .modal-content {
    box-shadow: var(--surux-elevation-modal);
}

.surux-quote-send-modal .modal-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid color-mix(in srgb, var(--surux-border) 72%, rgba(var(--surux-primary-rgb), .24));
}

.surux-quote-send-modal .modal-title span {
    color: var(--surux-primary);
    font-weight: 750;
}

.surux-quote-send-modal .modal-body {
    max-height: min(68vh, 46rem);
    overflow-y: auto;
    padding: 1rem;
}

.surux-quote-send-form {
    display: grid;
    gap: .75rem;
}

.surux-quote-send-recipient {
    display: grid;
    gap: .55rem;
    padding: .65rem;
    border: 1px solid color-mix(in srgb, var(--surux-border) 78%, rgba(var(--surux-primary-rgb), .22));
    border-radius: .62rem;
    background: color-mix(in srgb, var(--surux-surface) 92%, rgba(var(--surux-primary-rgb), .08));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

.surux-quote-send-section {
    width: max-content;
    max-width: 100%;
    min-height: 1.45rem;
    display: flex;
    align-items: center;
    padding: .12rem .58rem;
    border: 1px solid rgba(var(--surux-primary-rgb), .18);
    border-radius: 999px;
    background: rgba(var(--surux-primary-rgb), .12);
    color: var(--surux-primary);
    font-family: var(--bs-font-monospace);
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.surux-quote-send-fields {
    display: grid;
    grid-template-columns: minmax(12rem, 1.2fr) minmax(13rem, 1.15fr) minmax(9rem, .66fr) minmax(7rem, .45fr);
    gap: .5rem;
}

.surux-quote-send-field {
    min-height: 3.85rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .28rem;
    border: 1px solid color-mix(in srgb, var(--surux-border) 86%, transparent);
    border-radius: .5rem;
    padding: .55rem .7rem;
    background: color-mix(in srgb, var(--surux-surface) 88%, rgba(255, 255, 255, .05));
}

.surux-quote-send-field span {
    color: var(--bs-secondary-color);
    font-size: .72rem;
    font-weight: 700;
}

.surux-quote-send-field strong {
    min-height: 1.15rem;
    color: var(--surux-text);
    font-size: .93rem;
    font-weight: 650;
    overflow-wrap: anywhere;
}

.surux-quote-send-field.is-empty strong {
    color: var(--bs-secondary-color);
    font-style: italic;
    font-weight: 500;
}

.surux-quote-send-channel {
    align-items: center;
    text-align: center;
}

.surux-quote-send-channel-options {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .42rem;
    min-height: 2.15rem;
}

.surux-quote-send-channel-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.15rem;
    height: 2.15rem;
    border: 1px solid color-mix(in srgb, var(--surux-border) 82%, transparent);
    border-radius: 999px;
    color: var(--bs-secondary-color);
    background: color-mix(in srgb, var(--surux-surface) 86%, rgba(255, 255, 255, .05));
    cursor: pointer;
    transition: border-color .16s ease, background-color .16s ease, color .16s ease;
}

.surux-quote-send-channel-btn i {
    font-size: 1.25rem;
}

.surux-quote-send-channel-btn:hover,
.surux-quote-send-channel-options .btn-check:focus-visible + .surux-quote-send-channel-btn,
.surux-quote-send-channel-options .btn-check:checked + .surux-quote-send-channel-btn {
    border-color: rgba(var(--surux-primary-rgb), .5);
    color: var(--surux-primary);
    background: rgba(var(--surux-primary-rgb), .12);
}

.surux-quote-send-channel-options .btn-check:checked + .surux-quote-send-channel-btn.is-whatsapp {
    border-color: color-mix(in srgb, #25d366 72%, var(--surux-border));
    color: #25d366;
    background: color-mix(in srgb, #25d366 16%, transparent);
}

.surux-quote-send-channel-btn.is-disabled {
    opacity: .42;
    cursor: not-allowed;
}

.surux-quote-send-channel-btn.is-disabled:hover {
    border-color: color-mix(in srgb, var(--surux-border) 82%, transparent);
    color: var(--bs-secondary-color);
    background: color-mix(in srgb, var(--surux-surface) 86%, rgba(255, 255, 255, .05));
}

.surux-quote-send-modal .modal-footer {
    gap: .5rem;
    padding: 1rem 1.25rem 1.25rem;
    border-top: 1px solid color-mix(in srgb, var(--surux-border) 72%, rgba(var(--surux-primary-rgb), .2));
}

.surux-quote-send-modal .modal-footer .surux-command-form {
    margin: 0;
}

.surux-quote-send-modal .modal-footer .surux-command-button {
    justify-content: center;
    min-height: 3rem;
}

@media (max-width: 991.98px) {
    .surux-quote-send-fields {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .surux-quote-send-channel {
        align-items: flex-start;
        text-align: left;
    }

}

@media (max-width: 575.98px) {
    .surux-quote-send-modal .modal-dialog {
        max-width: calc(100vw - 1rem);
        margin-right: .5rem;
        margin-left: .5rem;
    }

    .surux-quote-send-fields {
        grid-template-columns: 1fr;
    }
}

.surux-invoice-duplicate-explainer,
.surux-invoice-duplicate-choice-form,
.surux-invoice-duplicate-for-list {
  min-width: 0;
}

.surux-invoice-duplicate-current {
  margin: 0 0 1rem;
  color: var(--surux-muted);
}

.surux-invoice-duplicate-options {
  display: grid;
  gap: .6rem;
}

.surux-invoice-duplicate-option {
  position: relative;
  display: block;
  cursor: pointer;
}

.surux-invoice-duplicate-option-input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
}

.surux-invoice-duplicate-option-body {
  display: grid;
  gap: .3rem;
  padding: .8rem;
  border: 1px solid var(--surux-border);
  border-radius: .55rem;
  background: var(--surux-surface-2);
  transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}

.surux-invoice-duplicate-option:hover .surux-invoice-duplicate-option-body,
.surux-invoice-duplicate-option-input:focus-visible + .surux-invoice-duplicate-option-body,
.surux-invoice-duplicate-option-input:checked + .surux-invoice-duplicate-option-body {
  border-color: rgba(var(--surux-primary-rgb), .56);
  background: rgba(var(--surux-primary-rgb), .09);
  box-shadow: 0 0 0 .15rem rgba(var(--surux-primary-rgb), .09);
}

.surux-invoice-duplicate-option-title {
  display: flex;
  align-items: center;
  gap: .55rem;
}

.surux-invoice-duplicate-option-title i {
  width: 1rem;
  color: var(--surux-primary);
  text-align: center;
}

.surux-invoice-duplicate-option-description {
  color: var(--surux-muted);
  font-size: .78rem;
}

.surux-invoice-repeat-parent-panel {
  display: grid;
  gap: .85rem;
  padding: .85rem;
  border: 1px solid var(--surux-border);
  border-radius: .55rem;
  background: var(--surux-surface-2);
}

.surux-invoice-repeat-parent-head,
.surux-invoice-repeat-parent-linker,
.surux-invoice-repeat-parent-actions {
  display: flex;
  align-items: center;
  gap: .65rem;
}

.surux-invoice-repeat-parent-head {
  justify-content: space-between;
}

.surux-invoice-repeat-parent-title {
  min-width: 0;
  display: grid;
  gap: .12rem;
}

.surux-invoice-repeat-parent-title span {
  color: var(--surux-muted);
  font-size: .7rem;
  text-transform: uppercase;
}

.surux-invoice-repeat-parent-title strong {
  overflow-wrap: anywhere;
}

.surux-invoice-repeat-parent-picker {
  min-width: 0;
  flex: 1 1 auto;
}

.surux-invoice-repeat-parent-actions {
  flex: 0 0 auto;
  flex-wrap: wrap;
}

.surux-invoice-repeat-parent-readonly {
  margin: 0;
  color: var(--surux-muted);
  font-size: .78rem;
}

.surux-invoice-repeats-head {
  padding: 1.15rem 1.25rem;
}

.surux-invoice-repeats-head > span {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: var(--surux-muted);
  font-size: .75rem;
}

.surux-invoice-repeat-series-body {
  display: grid;
  gap: 1rem;
  padding: 0 1.25rem 1.25rem;
  border-top: 1px solid var(--surux-border);
  padding-top: 1.1rem;
}

.surux-invoice-repeat-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .65rem;
}

.surux-invoice-repeat-kpi,
.surux-invoice-repeat-schedule {
  min-width: 0;
  display: grid;
  gap: .15rem;
  padding: .7rem;
  border: 1px solid var(--surux-border);
  border-radius: .5rem;
  background: var(--surux-surface-2);
}

.surux-invoice-repeat-kpi span,
.surux-invoice-repeat-schedule span {
  color: var(--surux-muted);
  font-size: .68rem;
  text-transform: uppercase;
}

.surux-invoice-repeat-kpi strong,
.surux-invoice-repeat-schedule strong {
  overflow-wrap: anywhere;
}

.surux-invoice-repeat-role {
  display: inline-flex;
  padding: .2rem .45rem;
  border: 1px solid var(--surux-border);
  border-radius: 999px;
  color: var(--surux-muted);
  background: var(--surux-surface-2);
  font-size: .7rem;
  font-weight: 750;
}

.surux-invoice-repeat-role-parent {
  border-color: rgba(var(--surux-primary-rgb), .38);
  color: var(--surux-primary);
  background: rgba(var(--surux-primary-rgb), .09);
}

.surux-invoice-repeat-table-wrap {
  max-width: 100%;
  overflow-x: auto;
}

.surux-invoice-repeat-table {
  width: 100%;
  min-width: 48rem;
  border-collapse: collapse;
}

.surux-invoice-repeat-table th,
.surux-invoice-repeat-table td {
  padding: .65rem;
  border-bottom: 1px solid var(--surux-border);
  text-align: left;
  vertical-align: middle;
}

.surux-invoice-repeat-table th {
  color: var(--surux-muted);
  font-size: .7rem;
  text-transform: uppercase;
}

.surux-invoice-repeat-table tr.is-current {
  background: rgba(var(--surux-primary-rgb), .08);
}

.surux-invoice-credit-list,
.surux-invoice-history-list {
  display: grid;
  gap: .65rem;
  margin-top: 1rem;
}

.surux-invoice-credit-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: .75rem;
  padding: .75rem;
  border: 1px solid var(--surux-border);
  border-radius: .54rem;
  background: var(--surux-surface-2);
}

.surux-invoice-history-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 1rem minmax(0, 1fr) auto;
  gap: .75rem;
  padding: .8rem;
  border: 1px solid var(--surux-border);
  border-radius: .54rem;
  background: var(--surux-surface-2);
}

.surux-invoice-history-row.is-current {
  border-color: rgba(var(--surux-primary-rgb), .42);
  background: rgba(var(--surux-primary-rgb), .07);
}

@media (max-width: 1199.98px) {
  .surux-invoice-line-grid {
    grid-template-columns: 4.5rem minmax(6rem, .75fr) minmax(6rem, .75fr) minmax(7rem, .8fr);
  }

  .surux-finance-line-grid {
    grid-template-columns: calc(5 * var(--surux-icon-only-subtle-size, 2.25rem) + 4 * .28rem) minmax(6rem, .75fr) minmax(6rem, .75fr) minmax(7rem, .8fr);
  }

  .surux-invoice-line-items[data-surux-line-reorder-enabled="false"] .surux-invoice-line-grid {
    grid-template-columns: 4.5rem minmax(6rem, .75fr) minmax(6rem, .75fr) minmax(7rem, .8fr);
  }

  .surux-invoice-line-actions {
    grid-column: 1;
  }

  .surux-invoice-line-description {
    grid-column: 2 / -1;
  }

  .surux-invoice-line-vat {
    grid-column: 1;
  }

  .surux-invoice-transaction-summary-grid,
  .surux-invoice-send-recipient-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .surux-invoice-repeat-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .surux-transaction-possible-row {
    grid-template-columns: 4rem minmax(0, 1fr) repeat(2, minmax(7rem, auto));
  }

  .surux-transaction-linker-input,
  .surux-transaction-linker-submit {
    grid-column: auto;
  }
}

@media (max-width: 767.98px) {
  .surux-invoice-repeat-summary,
  .surux-invoice-repeats-head {
    align-items: flex-start;
    padding: .9rem;
  }

  .surux-invoice-repeat-fields,
  .surux-invoice-repeat-series-body {
    padding: .9rem;
  }

  .surux-invoice-line {
    padding: .72rem;
  }

  .surux-invoice-line-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .surux-invoice-line-items[data-surux-line-reorder-enabled="false"] .surux-invoice-line-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .surux-invoice-line-actions,
  .surux-invoice-line-description {
    grid-column: 1 / -1;
  }

  .surux-invoice-line-vat {
    grid-column: auto;
  }

  .surux-invoice-line-grid > .surux-control:nth-last-child(-n + 2) {
    grid-column: auto;
  }

  .surux-invoice-transaction-summary-grid,
  .surux-invoice-send-recipient-grid,
  .surux-invoice-send-recipient,
  .surux-invoice-credit-row,
  .surux-invoice-history-row,
  .surux-transaction-linker-row,
  .surux-transaction-possible-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .surux-invoice-repeat-kpis {
    grid-template-columns: minmax(0, 1fr);
  }

  .surux-invoice-send-recipient-section {
    padding-bottom: .45rem;
    border-bottom: 1px solid var(--surux-border);
  }

  .surux-invoice-repeat-parent-head,
  .surux-invoice-repeat-parent-linker,
  .surux-invoice-repeat-parent-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .surux-transaction-score-cell {
    justify-items: start;
  }

}

@media (max-width: 479.98px) {
  .surux-invoice-line-grid,
  .surux-invoice-transaction-summary-grid,
  .surux-invoice-send-recipient-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .surux-invoice-line-items[data-surux-line-reorder-enabled="false"] .surux-invoice-line-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .surux-invoice-line-actions,
  .surux-invoice-line-description {
    grid-column: auto;
  }

  .surux-editor-summary-metric {
    align-items: flex-start;
  }

  .surux-editor-summary-status-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: .35rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .surux-invoice-line,
  .surux-invoice-repeat-indicator i,
  .surux-invoice-repeat-collapse-indicator i {
    transition: none;
  }
}

/* Shared document-template editor */
.surux-template-editor-form {
  min-width: 0;
}

.surux-template-editor-card {
  min-width: 0;
  overflow: hidden;
}

.surux-template-editor-grid,
.surux-settings-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  min-width: 0;
}

.grid-column-span-2 {
  grid-column: span 2;
}

.surux-template-code-input {
  min-height: 16rem;
  font-family: Consolas, "Liberation Mono", monospace;
  font-size: .875rem;
  line-height: 1.45;
  white-space: pre;
}

.surux-template-kind-settings {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 1rem;
}

.surux-template-kind-form {
  display: grid;
  align-content: start;
  gap: 1rem;
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--surux-border);
  border-radius: .5rem;
  background: color-mix(in srgb, var(--surux-surface) 94%, var(--surux-primary) 6%);
}

.surux-template-kind-form-header,
.surux-template-kind-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

.surux-template-kind-form-header h2 {
  margin: 0;
  font-size: 1rem;
}

.surux-template-kind-form-header p {
  margin: .15rem 0 0;
  color: var(--surux-muted);
  font-size: .82rem;
}

.surux-template-kind-form-grid {
  display: grid;
  gap: 1rem;
}

.surux-template-kind-actions {
  align-self: end;
  justify-content: flex-end;
  flex-wrap: wrap;
}

@media (max-width: 767.98px) {
  .surux-template-kind-settings {
    grid-template-columns: minmax(0, 1fr);
  }

  .surux-template-kind-form-header,
  .surux-template-kind-actions {
    align-items: stretch;
    flex-direction: column;
  }
}

.surux-template-editor-workbench {
  --surux-template-editor-panel-bg: color-mix(in srgb, var(--surux-surface) 94%, var(--surux-app-bg) 6%);
  --surux-template-editor-heading-bg: color-mix(in srgb, var(--surux-surface) 88%, var(--surux-primary) 12%);
  --surux-template-editor-code-bg: color-mix(in srgb, var(--surux-surface-2) 86%, #000 14%);
  --surux-template-editor-gutter-bg: color-mix(in srgb, var(--surux-surface-2) 78%, #000 22%);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  grid-column: 1 / -1;
  gap: .75rem;
  min-width: 0;
  min-height: 34rem;
  height: clamp(34rem, calc(100dvh - 17rem), 72rem);
  color: var(--surux-text);
}

[data-bs-theme="light"] .surux-template-editor-workbench {
  --surux-template-editor-panel-bg: color-mix(in srgb, var(--surux-surface) 96%, var(--surux-primary) 4%);
  --surux-template-editor-heading-bg: color-mix(in srgb, var(--surux-surface) 90%, var(--surux-primary) 10%);
  --surux-template-editor-code-bg: #ffffff;
  --surux-template-editor-gutter-bg: #f1f5f9;
}

.surux-template-workbench-toolbar {
  grid-column: 1 / -1;
  min-height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .15rem .1rem;
}

.surux-template-workbench-title {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  color: var(--surux-text);
  font-size: .88rem;
  font-weight: 800;
}

.surux-template-workbench-title [data-surux-workbench-state] {
  color: var(--surux-muted);
  font-size: .74rem;
  font-family: Consolas, "Liberation Mono", monospace;
  font-weight: 700;
}

.surux-template-editor-code-area {
  display: grid;
  gap: 1rem;
  min-width: 0;
  min-height: 0;
  height: 100%;
}

.surux-template-editor-pane {
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid color-mix(in srgb, var(--surux-border) 82%, var(--surux-primary) 18%);
  border-radius: .5rem;
  background: var(--surux-template-editor-panel-bg);
}

.surux-template-editor-heading {
  min-height: 2.85rem;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .65rem .8rem;
  border-bottom: 1px solid color-mix(in srgb, var(--surux-border) 80%, transparent);
  background: var(--surux-template-editor-heading-bg);
}

.surux-template-editor-heading .form-label {
  margin: 0;
  color: var(--surux-text);
  font-size: .86rem;
  font-weight: 700;
  letter-spacing: 0;
}

.surux-template-editor-meter {
  color: var(--surux-muted);
  font-size: .75rem;
  font-family: Consolas, "Liberation Mono", monospace;
  white-space: nowrap;
}

.surux-template-code-frame {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.surux-template-line-gutter {
  min-width: 3.25rem;
  height: 100%;
  margin: 0;
  padding: .8rem .55rem;
  overflow: hidden;
  border-right: 1px solid color-mix(in srgb, var(--surux-border) 80%, transparent);
  color: color-mix(in srgb, var(--surux-muted) 88%, transparent);
  background: var(--surux-template-editor-gutter-bg);
  font-family: Consolas, "Liberation Mono", monospace;
  font-size: .875rem;
  line-height: 1.45;
  text-align: right;
  user-select: none;
  white-space: pre;
}

.surux-template-code-frame .surux-template-code-input {
  min-height: 0;
  height: 100%;
  resize: none;
  overflow: auto;
  border: 0;
  border-radius: 0;
  color: var(--surux-text);
  background: var(--surux-template-editor-code-bg);
  box-shadow: none;
  outline: 0;
  tab-size: 2;
  scrollbar-gutter: stable;
}

.surux-template-code-frame .surux-template-code-input:focus {
  box-shadow: inset 0 0 0 1px rgba(var(--surux-primary-rgb), .42);
}

.surux-template-editor-splitter {
  display: none;
  align-self: stretch;
  justify-content: center;
  align-items: center;
  width: .65rem;
  min-width: .65rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  color: var(--surux-muted);
  background: transparent;
  cursor: col-resize;
}

.surux-template-editor-splitter span {
  width: .2rem;
  height: 4.5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surux-border) 76%, var(--surux-primary) 24%);
}

.surux-template-editor-splitter:hover span,
.surux-template-editor-splitter:focus-visible span,
.surux-template-editor-is-resizing .surux-template-editor-splitter span {
  background: rgba(var(--surux-primary-rgb), .82);
}

.surux-template-editor-splitter:focus-visible {
  outline: 2px solid rgba(var(--surux-primary-rgb), .65);
  outline-offset: 3px;
}

.surux-template-editor-resizing {
  cursor: col-resize;
  user-select: none;
}

.surux-template-fullscreen-button {
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, var(--surux-border) 80%, transparent);
  border-radius: .45rem;
  color: var(--surux-text);
  background: rgba(var(--surux-primary-rgb), .08);
}

.surux-template-fullscreen-button:hover,
.surux-template-fullscreen-button:focus-visible {
  color: #fff;
  border-color: rgba(var(--surux-primary-rgb), .58);
  background: rgba(var(--surux-primary-rgb), .22);
}

body.surux-template-editor-fullscreen-open {
  overflow: hidden;
}

.surux-template-editor-workbench.surux-template-editor-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 2600;
  width: 100vw;
  height: 100dvh;
  max-height: none;
  min-height: 0;
  padding: 1rem;
  background: var(--surux-app-bg);
}

.surux-template-editor-workbench.surux-template-editor-fullscreen .surux-template-editor-code-area,
.surux-template-editor-workbench.surux-template-editor-fullscreen .surux-template-editor-pane,
.surux-template-editor-workbench.surux-template-editor-fullscreen .surux-template-code-frame {
  min-height: 0;
  height: 100%;
}

@media (min-width: 1200px) {
  .surux-template-editor-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .surux-template-editor-card .surux-section-heading {
    flex: 0 0 auto;
  }

  .surux-template-editor-grid {
    flex: 1 1 auto;
    min-height: 0;
    grid-template-rows: auto auto minmax(0, 1fr);
  }

  .surux-template-editor-workbench {
    min-height: 0;
  }

  .surux-template-editor-code-area {
    display: flex;
    align-items: stretch;
    gap: 0;
    min-height: 0;
  }

  .surux-template-editor-pane-html {
    flex: 0 1 62%;
    min-width: 22rem;
  }

  .surux-template-editor-pane-css {
    flex: 1 1 38%;
    min-width: 18rem;
  }

  .surux-template-editor-splitter {
    display: inline-flex;
    margin: 0 .45rem;
  }
}

@media (max-width: 1199.98px) {
  .surux-template-editor-workbench:not(.surux-template-editor-fullscreen) {
    height: auto;
  }

  .surux-template-editor-workbench:not(.surux-template-editor-fullscreen) .surux-template-editor-code-area {
    height: auto;
  }

  .surux-template-editor-workbench:not(.surux-template-editor-fullscreen) .surux-template-editor-pane {
    min-height: clamp(24rem, 62vh, 34rem);
    height: clamp(24rem, 62vh, 34rem);
  }

  .surux-template-editor-workbench.surux-template-editor-fullscreen .surux-template-editor-code-area {
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.surux-template-token-list,
.surux-template-version-list {
  display: grid;
  gap: .55rem;
}

.surux-template-token {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  padding: .38rem .55rem;
  border: 1px solid color-mix(in srgb, var(--surux-success-fill) 35%, transparent);
  border-radius: .45rem;
  color: color-mix(in srgb, var(--surux-success) 75%, var(--surux-text));
  background: color-mix(in srgb, var(--surux-success-fill) 12%, transparent);
  font-family: Consolas, "Liberation Mono", monospace;
  font-size: .8rem;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.surux-template-token.missing {
  border-color: color-mix(in srgb, var(--surux-danger-fill) 45%, transparent);
  color: color-mix(in srgb, var(--surux-danger) 75%, var(--surux-text));
  background: color-mix(in srgb, var(--surux-danger-fill) 14%, transparent);
}

[data-bs-theme="light"] .surux-template-token {
  border-color: color-mix(in srgb, var(--surux-success-fill) 45%, transparent);
  color: color-mix(in srgb, var(--surux-success) 75%, var(--surux-text));
  background: color-mix(in srgb, var(--surux-success-fill) 14%, var(--surux-surface));
}

[data-bs-theme="light"] .surux-template-token.missing {
  border-color: color-mix(in srgb, var(--surux-danger-fill) 62%, transparent);
  color: color-mix(in srgb, var(--surux-danger) 75%, var(--surux-text));
  background: color-mix(in srgb, var(--surux-danger-fill) 12%, var(--surux-surface));
}

.surux-template-version-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .65rem .75rem;
  border: 1px solid var(--surux-border);
  border-radius: .5rem;
  color: var(--surux-text);
  text-decoration: none;
  background: color-mix(in srgb, var(--surux-surface) 94%, var(--surux-primary) 6%);
}

.surux-template-version-row:hover,
.surux-template-version-row.active {
  color: var(--surux-text);
  border-color: rgba(var(--surux-primary-rgb), .45);
  background: rgba(var(--surux-primary-rgb), .10);
}

.surux-template-message {
  margin-bottom: 1rem;
  padding: .85rem 1rem;
  border: 1px solid color-mix(in srgb, var(--surux-success-fill) 35%, transparent);
  border-radius: .65rem;
  color: color-mix(in srgb, var(--surux-success) 75%, var(--surux-text));
  background: color-mix(in srgb, var(--surux-success-fill) 12%, transparent);
}


/* Shared contact roster editor */
.surux-contact-panel {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: .85rem;
}

.surux-contact-panel-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: flex-end;
  gap: .5rem .75rem;
}

.surux-contact-panel-heading {
  grid-column: 1;
}

.surux-contact-panel-tools {
  grid-column: 2;
}

.surux-contact-panel-heading {
  min-width: 0;
  display: grid;
  gap: .15rem;
}

.surux-contact-panel-summary {
  margin: 0;
  color: var(--surux-muted);
  font-size: .83rem;
}

.surux-contact-panel-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}

/* The search filters the roster and nothing else, so it sits above it. The field is the shared
   control, which is what puts the magnifier after the input rather than before it. */
.surux-contact-search {
  min-width: 0;
  padding: .6rem .5rem .35rem;
}

.surux-contact-search[hidden] {
  display: none;
}

.surux-contact-search-control .surux-input {
  font-size: .86rem;
}

.surux-contact-add {
  flex: none;
}

/* Merge is offered on evidence: this only appears when two contacts actually share a number or
   an address. It is a warning about the record, so it carries the same ink, border and tint as
   the unnamed and unreachable alerts rather than the tenant accent. */
.surux-contact-undo {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .75rem;
    margin-block: .75rem;
}

.surux-contact-undo[hidden] {
    display: none;
}

.surux-contact-duplicates {
  --surux-contact-alert-ink: var(--surux-warning);
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-top: .15rem;
  padding: .45rem .6rem;
  border: 1px dashed color-mix(in srgb, var(--surux-warning-fill) 45%, transparent);
  border-radius: var(--surux-radius-sm);
  background: color-mix(in srgb, var(--surux-warning-fill) 7%, transparent);
}


.surux-contact-duplicates > i {
  color: var(--surux-contact-alert-ink);
}

.surux-contact-duplicates[hidden] {
  display: none;
}

.surux-contact-duplicates-text {
  margin: 0;
  min-width: 0;
  flex: 1 1 18rem;
  font-size: .83rem;
}

.surux-contact-duplicates-action {
  flex: none;
}

.surux-contact-filters {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}

.surux-contact-filters[hidden] {
  display: none;
}

.surux-contact-filter {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .22rem .6rem;
  border: 1px solid var(--surux-border);
  border-radius: 999px;
  background: transparent;
  color: var(--surux-muted);
  font-size: .76rem;
  font-weight: 600;
  cursor: pointer;
}

.surux-contact-filter[hidden] {
  display: none;
}

.surux-contact-filter:hover {
  color: var(--surux-text);
  border-color: color-mix(in srgb, var(--surux-text) 30%, var(--surux-border));
}

.surux-contact-filter[aria-pressed="true"] {
  color: var(--surux-primary);
  border-color: color-mix(in srgb, var(--surux-primary) 55%, transparent);
  background: color-mix(in srgb, var(--surux-primary) 12%, transparent);
}

.surux-contact-filter-count {
  font-variant-numeric: tabular-nums;
  opacity: .7;
}

/* The roster and the detail share one surface. Neither column takes its own
   scrollbar: the tab panel stays the single vertical scroll owner. */
.surux-contact-body {
  display: grid;
  grid-template-columns: minmax(0, 24rem) minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--surux-border);
  border-radius: var(--surux-radius-md);
  background: color-mix(in srgb, var(--surux-surface-2) 55%, transparent);
}

.surux-contact-roster-column {
  min-width: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border-right: 1px solid var(--surux-border);
}

.surux-contact-roster {
  min-width: 0;
  padding: .6rem .5rem .9rem;
}

.surux-contact-roster-passive {
  border-right: 0;
}

.surux-contact-group {
  --surux-contact-color: var(--surux-primary);
}

.surux-contact-group + .surux-contact-group {
  margin-top: .3rem;
}

.surux-contact-group-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .6rem .35rem;
  background: linear-gradient(var(--surux-surface) 70%, transparent);
  color: var(--surux-muted);
  font-size: .71rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.surux-contact-group-rail {
  width: .45rem;
  height: .45rem;
  flex: none;
  border-radius: 999px;
  background: var(--surux-contact-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--surux-contact-color) 22%, transparent);
}

.surux-contact-group-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.surux-contact-group-count {
  margin-left: auto;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  opacity: .7;
}

.surux-contact-group-count[hidden] {
  display: none;
}

.surux-contact-row {
  --surux-contact-color: var(--surux-primary);
  position: relative;
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 2.1rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0 .6rem;
  padding: .45rem .6rem;
  border: 1px solid transparent;
  border-radius: var(--surux-radius-sm);
  background: transparent;
  color: var(--surux-text);
  text-align: left;
  cursor: pointer;
}

.surux-contact-row[hidden] {
  display: none;
}

.surux-contact-row:hover {
  background: var(--surux-surface-2);
}

.surux-contact-row:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--surux-primary) 60%, transparent);
  outline-offset: 2px;
}

.surux-contact-row[aria-current="true"] {
  border-color: color-mix(in srgb, var(--surux-contact-color) 42%, var(--surux-border));
  background: color-mix(in srgb, var(--surux-contact-color) 13%, var(--surux-surface-2));
}

.surux-contact-row[aria-current="true"]::before {
  content: "";
  position: absolute;
  inset-inline-start: -.5rem;
  top: .4rem;
  bottom: .4rem;
  width: 3px;
  border-radius: 999px;
  background: var(--surux-contact-color);
}

.surux-contact-row-passive {
  cursor: default;
}

.surux-contact-row-passive:hover {
  background: transparent;
}

.surux-contact-row-passive .surux-contact-avatar,
.surux-contact-row-passive .surux-contact-row-flags {
  grid-row: auto;
}

.surux-contact-row-detail {
  grid-column: 1 / -1;
  margin-top: .5rem;
}

.surux-contact-avatar {
  grid-row: span 2;
  width: 2.1rem;
  height: 2.1rem;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--surux-contact-color) 34%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surux-contact-color) 16%, transparent);
  color: color-mix(in srgb, var(--surux-contact-color) 76%, var(--surux-text));
  font-size: .74rem;
  font-weight: 700;
}

.surux-contact-avatar-anonymous {
  color: var(--surux-muted);
}

.surux-contact-avatar-large {
  grid-row: auto;
  width: 3rem;
  height: 3rem;
  font-size: 1rem;
}

.surux-contact-row-identity {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: .4rem;
  row-gap: .15rem;
}

.surux-contact-row-name {
  flex: 1 1 6rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .89rem;
  font-weight: 700;
}

.surux-contact-row-name-fallback {
  color: color-mix(in srgb, var(--surux-text) 84%, var(--surux-muted));
  font-weight: 600;
}

/* TR-0000206. Tags ride the subtitle line, so the identity keeps the whole first line and a
   long address used as the name is never truncated to make room for "Needs a name". */
.surux-contact-row-meta {
  grid-column: 2;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: .35rem;
}

.surux-contact-row-sub {
  grid-column: 2;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--surux-muted);
  font-size: .77rem;
}

.surux-contact-row-flags {
  grid-row: span 2;
  display: flex;
  align-items: center;
  gap: .25rem;
}

.surux-contact-tag {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  flex: none;
  padding: .04rem .34rem;
  border-radius: .3rem;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.surux-contact-tag[hidden] {
  display: none;
}

.surux-contact-tag-attention {
  border: 1px solid color-mix(in srgb, var(--surux-warning-fill) 34%, transparent);
  background: color-mix(in srgb, var(--surux-warning-fill) 14%, transparent);
  color: var(--surux-warning);
}

[data-bs-theme="light"]:not([data-surux-theme="night"]) .surux-contact-tag-attention {
  border-color: var(--surux-warning-fill);
  background: color-mix(in srgb, var(--surux-warning-fill) 18%, #fff);
  color: var(--surux-warning);
}

.surux-contact-tag-duplicate {
  border: 1px solid color-mix(in srgb, var(--surux-primary) 34%, transparent);
  background: color-mix(in srgb, var(--surux-primary) 14%, transparent);
  color: color-mix(in srgb, var(--surux-primary) 86%, #fff);
}

[data-bs-theme="light"] .surux-contact-tag-duplicate {
  color: color-mix(in srgb, var(--surux-primary) 70%, #0f172a);
}

.surux-contact-flag {
  width: 1.3rem;
  height: 1.3rem;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: .35rem;
  font-size: .72rem;
}

.surux-contact-flag[hidden] {
  display: none;
}

.surux-contact-flag-plain {
  background: color-mix(in srgb, var(--surux-muted) 13%, transparent);
  color: var(--surux-muted);
}

.surux-contact-flag-primary {
  background: color-mix(in srgb, var(--surux-primary) 15%, transparent);
  color: var(--surux-primary);
}

.surux-contact-flag-attention {
  background: color-mix(in srgb, var(--surux-warning-fill) 16%, transparent);
  color: var(--surux-warning);
}

.surux-contact-detail {
  min-width: 0;
  padding: 1.1rem 1.2rem 1.2rem;
  background: var(--surux-surface);
}

.surux-contact-detail-blank {
  min-height: 12rem;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: .4rem;
  text-align: center;
  color: var(--surux-muted);
}

.surux-contact-detail-blank[hidden] {
  display: none;
}

.surux-contact-detail-blank i {
  font-size: 1.7rem;
  opacity: .45;
}

.surux-contact-detail-blank strong {
  color: var(--surux-text);
  font-size: .98rem;
}

.surux-contact-detail-blank p {
  margin: 0;
  max-width: 26rem;
  font-size: .85rem;
}

.surux-contact-detail-panel {
  --surux-contact-color: var(--surux-primary);
  display: grid;
  gap: 1rem;
}

.surux-contact-detail-panel[hidden] {
  display: none;
}

.surux-contact-detail-head {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--surux-border);
}

.surux-contact-detail-identity {
  min-width: 0;
  display: grid;
  gap: .3rem;
}

.surux-contact-detail-name {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.surux-contact-detail-name-fallback {
  color: color-mix(in srgb, var(--surux-text) 85%, var(--surux-muted));
  font-weight: 600;
}

.surux-contact-detail-role {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  color: var(--surux-muted);
  font-size: .85rem;
}

.surux-contact-detail-designation[hidden] {
  display: none;
}

/* TR-0000208. Only the designation lives here now; with none, the line takes no space. */
.surux-contact-detail-role:not(:has(> :not([hidden]))) {
  display: none;
}

.surux-contact-alerts {
  display: grid;
  gap: .45rem;
}

.surux-contact-alerts:not(:has(> .surux-contact-alert:not([hidden]))) {
  display: none;
}

.surux-contact-alert {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem .7rem;
  border-radius: var(--surux-radius-sm);
  font-size: .83rem;
}

.surux-contact-alert[hidden] {
  display: none;
}

/* An alert's icon and its action read as one thing, so both take the alert's own
   ink rather than the tenant accent: a warning stays amber on a purple theme. */
.surux-contact-alert-attention {
  --surux-contact-alert-ink: var(--surux-warning);
  border: 1px dashed color-mix(in srgb, var(--surux-warning) 45%, transparent);
  background: color-mix(in srgb, var(--surux-warning) 6%, var(--surux-surface));
}

[data-bs-theme="light"] .surux-contact-alert-attention {
  --surux-contact-alert-ink: var(--surux-warning);
}

.surux-contact-alert-merge {
  --surux-contact-alert-ink: var(--surux-primary);
  border: 1px solid color-mix(in srgb, var(--surux-primary) 42%, transparent);
  background: color-mix(in srgb, var(--surux-primary) 8%, transparent);
}

.surux-contact-alert > i {
  color: var(--surux-contact-alert-ink, var(--surux-primary));
}

.surux-contact-alert-action {
  margin-left: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--surux-contact-alert-ink, var(--surux-primary));
  font-size: .81rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.surux-contact-alert-action:hover {
  text-decoration: underline;
}

/* TR-0000207. The reach strip is the action surface: one compact bar of call, WhatsApp, mail
   and copy per channel. The values themselves are edited, and shown, in the form below. */
.surux-contact-reach {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}

.surux-contact-reach:not(:has(> .surux-contact-reach-row:not([hidden]))) {
  display: none;
}

.surux-contact-reach-row {
  flex: 0 1 auto;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .25rem .3rem .25rem .6rem;
  border: 1px solid var(--surux-border);
  border-radius: var(--surux-radius-sm);
  background: var(--surux-surface-2);
}

.surux-contact-reach-row[hidden] {
  display: none;
}

.surux-contact-reach-value {
  min-width: 0;
  flex: 0 1 auto;
  display: flex;
  align-items: center;
}

.surux-contact-reach-label {
  color: var(--surux-muted);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.surux-contact-reach-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .88rem;
  font-weight: 600;
}

.surux-contact-reach-actions {
  flex: none;
  display: flex;
  align-items: center;
  gap: .3rem;
}

.surux-contact-reach-action {
  width: 1.9rem;
  height: 1.9rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--surux-border);
  border-radius: .4rem;
  background: transparent;
  color: var(--surux-muted);
  font-size: .78rem;
  text-decoration: none;
  cursor: pointer;
}

.surux-contact-reach-action[hidden] {
  display: none;
}

.surux-contact-reach-action:hover {
  border-color: color-mix(in srgb, var(--surux-primary) 50%, transparent);
  background: color-mix(in srgb, var(--surux-primary) 10%, transparent);
  color: var(--surux-primary);
}

.surux-contact-reach-action.is-copied {
  border-color: color-mix(in srgb, var(--surux-success-fill) 50%, transparent);
  background: color-mix(in srgb, var(--surux-success-fill) 12%, transparent);
  color: var(--surux-success);
}

.surux-contact-roles {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}

.surux-contact-roles[hidden] {
  display: none;
}

.surux-contact-role {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .2rem .55rem;
  border: 1px solid var(--surux-border);
  border-radius: var(--surux-radius-sm);
  color: var(--surux-muted);
  font-size: .75rem;
  font-weight: 600;
}

.surux-contact-role[hidden] {
  display: none;
}

.surux-contact-role-on {
  border-color: color-mix(in srgb, var(--surux-primary) 45%, transparent);
  background: color-mix(in srgb, var(--surux-primary) 11%, transparent);
  color: var(--surux-primary);
}

.surux-contact-role-off {
  opacity: .45;
}

.surux-contact-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .9rem;
}

.surux-contact-panel-actions {
  margin-left: auto;
  flex: none;
  display: flex;
  align-items: center;
  gap: .35rem;
}

.surux-contact-panel-actions:empty {
  display: none;
}

/* Desktop shows both columns at once, so there is nothing to go back to. */
.surux-contact-detail-back {
  display: none;
  align-items: center;
  gap: .5rem;
  padding-bottom: .75rem;
}

.surux-contact-detail-back-label {
  color: var(--surux-muted);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.surux-contact-no-matches {
  margin: 0;
  padding: 1.25rem .6rem;
  color: var(--surux-muted);
  font-size: .85rem;
  text-align: center;
}

.surux-contact-no-matches[hidden] {
  display: none;
}

.surux-contact-empty {
  padding: 1rem;
  border: 1px dashed var(--surux-border);
  border-radius: .65rem;
  background: rgba(148, 163, 184, .06);
}

/* While a contact is being added, the dialog owns the heading and the actions, and the
   derived blocks have nothing to describe yet. The form grid keeps the same gutters as
   the detail pane; collapsing the panel gap jammed fields into the modal header. */
.surux-contact-add-host {
  display: grid;
}

.surux-contact-add-host :where(
  .surux-contact-detail-head,
  .surux-contact-alerts,
  .surux-contact-reach,
  .surux-contact-roles,
  .surux-contact-panel-actions) {
  display: none;
}

.surux-contact-modal-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(2, 6, 23, .58);
  backdrop-filter: var(--surux-blur-overlay);
}

.surux-contact-dialog {
  position: relative;
  width: min(760px, 100%);
  max-height: min(760px, calc(100svh - 2rem));
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--surux-border);
  border-radius: 1rem;
  background: color-mix(in srgb, var(--surux-surface) 96%, #000 4%);
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .42);
}

.surux-contact-dialog-body {
  overflow-y: auto;
}

.surux-contact-dialog-close {
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.surux-contact-dialog-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: .75rem;
  padding-top: .9rem;
}

.surux-contact-merge-modal .surux-contact-dialog {
  width: min(1040px, 100%);
}

.surux-contact-merge-content {
  --surux-contact-color: var(--surux-primary);
  display: grid;
  gap: .9rem;
}

.surux-contact-merge-help {
  margin: 0;
  color: var(--surux-muted);
}

.surux-contact-merge-route {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}

.surux-contact-merge-side {
  min-width: 0;
  display: grid;
  gap: .35rem;
  padding: .7rem;
  border: 1px solid var(--surux-border);
  border-radius: var(--surux-radius-sm);
  background: var(--surux-surface-2);
}

.surux-contact-merge-side small {
  color: var(--surux-muted);
  font-size: .75rem;
}

.surux-contact-merge-side-preview {
  min-width: 0;
}

.surux-contact-merge-picker {
  display: grid;
  gap: .35rem;
}

.surux-contact-merge-picker[hidden] {
  display: none;
}

.surux-contact-merge-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
  gap: .85rem;
}

.surux-contact-merge-conflicts {
  display: grid;
  align-content: start;
  gap: .6rem;
}

.surux-contact-merge-field {
  display: grid;
  gap: .45rem;
  padding: .65rem;
  border: 1px solid color-mix(in srgb, var(--surux-contact-color) 42%, var(--surux-border));
  border-radius: var(--surux-radius-sm);
  background: color-mix(in srgb, var(--surux-contact-color) 8%, transparent);
}

.surux-contact-merge-field-label {
  margin: 0;
  font-size: .8rem;
  font-weight: 700;
}

.surux-contact-merge-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
}

.surux-contact-merge-choice {
  position: relative;
  min-width: 0;
  display: grid;
  gap: .15rem;
  padding: .55rem .65rem;
  border: 1px solid var(--surux-border);
  border-radius: var(--surux-radius-sm);
  background: transparent;
  color: var(--surux-text);
  text-align: left;
  cursor: pointer;
}

.surux-contact-merge-choice:hover,
.surux-contact-merge-choice:focus-visible {
  border-color: color-mix(in srgb, var(--surux-primary) 55%, var(--surux-border));
}

.surux-contact-merge-choice.is-selected {
  border-color: color-mix(in srgb, var(--surux-primary) 68%, transparent);
  background: color-mix(in srgb, var(--surux-primary) 12%, transparent);
}

.surux-contact-merge-choice-title {
  color: var(--surux-muted);
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.surux-contact-merge-choice-value {
  font-size: .86rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.surux-contact-merge-choice-check {
  position: absolute;
  top: .5rem;
  inset-inline-end: .55rem;
  opacity: 0;
  color: var(--surux-primary);
  font-size: .78rem;
}

.surux-contact-merge-choice.is-selected .surux-contact-merge-choice-check {
  opacity: 1;
}

.surux-contact-merge-preview-shell {
  display: grid;
  align-content: start;
  gap: .35rem;
}

.surux-contact-merge-preview-title {
  margin: 0;
  color: var(--surux-muted);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.surux-contact-merge-preview {
  min-width: 0;
}

.surux-contact-merge-row-preview {
  cursor: default;
  border-color: var(--surux-border);
  background: var(--surux-surface-2);
}

.surux-contact-merge-no-conflicts {
  margin: 0;
  color: var(--surux-muted);
}

.surux-contact-whatsapp-status,
.surux-contact-birth-date {
  grid-column: 1 / -1;
}

.surux-contact-whatsapp-status[hidden] {
  display: none;
}

.surux-invoice-contact-control {
  grid-column: 1 / -1;
}

.surux-invoice-contact-control[hidden] {
  display: none;
}

.surux-contact-delete.surux-command-button-icon-only {
  width: 2.35rem;
  height: 2.35rem;
}

.surux-node-site-area {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  padding: .22rem .55rem;
  border-radius: 999px;
  /* TR-0000257: an area without its own colour reads as a neutral chip, not the tenant accent. */
  background: var(--surux-node-site-area-bg, color-mix(in srgb, var(--surux-text) 5%, var(--surux-surface)));
  color: var(--surux-node-site-area-fg, var(--surux-text));
  font-size: .76rem;
  font-weight: 800;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

/* A roster of any length makes the panel taller than the tab scrollport, and then reaching a
   contact near the bottom takes the detail, the search and the filters off screen with it. The
   panel takes ownership of its own scrolling instead, the same trade the account transactions
   and Finance Planner panels make, so the header stays put and each column moves on its own.
   docs/ui-edit-page-standard.md forbids a competing page-level owner, not a bounded region
   inside a panel. */
@media (min-width: 992px) {
  .surux-tab-panels:has(.surux-tab-panel.active .surux-contact-panel) {
    overflow-y: hidden;
  }

  /* SuruXTabPanelsForm owns the aggregate form and its shared body. Pass height through that
     structure when a bounded Contacts panel is active; ordinary field panels keep content-sized
     layout. Direct form/panel consumers use the same height chain without an extra body. */
  .surux-tab-panels:has(.surux-tab-panel.active .surux-contact-panel) > form,
  .surux-tab-panels:has(.surux-tab-panel.active .surux-contact-panel) > form > .surux-edit-form-body,
  .surux-tab-panel.active:has(.surux-contact-panel) {
    height: 100%;
    min-height: 0;
  }

  .surux-tab-panel.active .surux-contact-panel {
    height: 100%;
    min-height: 0;
  }

  .surux-contact-body,
  .surux-contact-roster-column {
    min-height: 0;
  }

  .surux-contact-roster,
  .surux-contact-detail {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }

  /* A scrollport clips an absolutely positioned popover, so the date picker needs a way out. */
  .surux-contact-detail:has([data-surux-date-popover]:not([hidden])),
  .surux-contact-detail:has(.surux-picker-open) {
    overflow: visible;
  }
}

/* The roster and the detail stack below the app's 992px tab breakpoint. */
@media (max-width: 991.98px) {
  .surux-contact-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .surux-contact-roster-column {
    border-right: 0;
    border-bottom: 1px solid var(--surux-border);
  }

  .surux-contact-panel-tools {
    width: 100%;
  }

  [data-surux-contact-view="detail"] .surux-contact-roster-column {
    display: none;
  }

  [data-surux-contact-view="detail"] .surux-contact-detail-back {
    display: flex;
  }

  [data-surux-contact-view="list"] .surux-contact-detail {
    display: none;
  }

  [data-surux-contact-view="list"] .surux-contact-roster-column {
    border-bottom: 0;
  }

  .surux-contact-search {
    min-width: 0;
    flex: 1 1 12rem;
  }
}

@media (max-width: 767.98px) {
  .surux-contact-dialog {
    max-height: calc(100svh - 1rem);
    padding: .85rem;
  }

  .surux-contact-form-grid,
  .surux-contact-merge-route,
  .surux-contact-merge-layout,
  .surux-contact-merge-choice-grid {
    grid-template-columns: 1fr;
  }
}

/* Shared settings control cards and contact-type preview */
.surux-settings-switch-card {
  min-height: 54px;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem .85rem;
  border: 1px solid var(--surux-border);
  border-radius: .65rem;
  background: rgba(255, 255, 255, .035);
}

.surux-settings-switch-card.form-switch {
  margin: 0;
  padding-left: .85rem;
}

.surux-settings-switch-card.form-switch .form-check-input {
  float: none;
  margin-top: 0;
  margin-left: 0;
  flex: 0 0 auto;
}

.surux-settings-switch-card span {
  display: grid;
  gap: .15rem;
}

.surux-settings-switch-card strong {
  font-weight: 700;
}

.surux-settings-switch-card small {
  color: var(--surux-muted);
}

[data-bs-theme="light"] .surux-settings-switch-card {
  background: rgba(15, 23, 42, .025);
}

.surux-settings-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 1.65rem;
  padding: .2rem .55rem;
  border: 1px solid rgba(var(--surux-primary-rgb), .25);
  border-radius: 999px;
  color: var(--surux-text);
  background: rgba(var(--surux-primary-rgb), .12);
  font-size: .75rem;
  font-weight: 700;
  white-space: nowrap;
}

.surux-settings-badge-muted {
  border-color: var(--surux-border);
  color: var(--surux-muted);
  background: rgba(255, 255, 255, .055);
}

[data-bs-theme="light"] .surux-settings-badge-muted {
  color: #334155;
  background: rgba(15, 23, 42, .045);
}

.surux-badge-preview-default {
  --surux-badge-color: #0ea5e9;
  --surux-badge-font-color: #ffffff;
}

.surux-contact-type-preview {
  --surux-contact-color: var(--surux-primary);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .85rem;
  padding: .85rem;
  border: 1px solid var(--surux-border);
  border-radius: .85rem;
  background: rgba(148, 163, 184, .055);
}

.surux-contact-type-preview-default {
  --surux-contact-color: #0ea5e9;
}

.surux-contact-type-preview-card {
  min-height: 150px;
  display: grid;
  align-content: start;
  gap: .42rem;
  padding: 1rem 1rem 1rem 1.15rem;
  border-radius: .8rem;
  box-shadow: inset 4px 0 0 var(--surux-contact-color);
}

.surux-contact-type-preview-card strong,
.surux-contact-type-preview-card span {
  min-width: 0;
}

.surux-contact-type-preview-card strong {
  font-size: 1rem;
}

.surux-contact-type-preview-card > span:not(.surux-node-contact-type) {
  display: grid;
  grid-template-columns: 1rem minmax(0, 1fr);
  align-items: center;
  gap: .45rem;
  font-size: .83rem;
}

.surux-contact-type-preview-card > span i {
  color: color-mix(in srgb, var(--surux-contact-color) 72%, currentColor);
  font-size: .78rem;
}

.surux-node-contact-type {
  width: fit-content;
  padding: .22rem .5rem;
  border-radius: 999px;
  color: color-mix(in srgb, var(--surux-contact-color) 86%, #fff);
  background: color-mix(in srgb, var(--surux-contact-color) 20%, transparent);
  font-size: .73rem;
  font-weight: 700;
}

[data-bs-theme="light"] .surux-node-contact-type {
  color: color-mix(in srgb, var(--surux-contact-color) 62%, #0f172a);
  background: color-mix(in srgb, var(--surux-contact-color) 14%, #fff);
}

.surux-contact-type-preview-dark {
  border: 1px solid color-mix(in srgb, var(--surux-contact-color) 42%, #244458);
  color: #f8fafc;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--surux-contact-color) 18%, transparent), transparent 46%),
    #073047;
}

.surux-contact-type-preview-dark > span:not(.surux-node-contact-type) {
  color: #a9bfd0;
}

.surux-contact-type-preview-light {
  border: 1px solid color-mix(in srgb, var(--surux-contact-color) 34%, #d7e1ea);
  color: #0f172a;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--surux-contact-color) 12%, transparent), transparent 50%),
    #ffffff;
  box-shadow:
    inset 4px 0 0 color-mix(in srgb, var(--surux-contact-color) 86%, #0f172a),
    0 .65rem 1.5rem rgba(15, 23, 42, .08);
}

.surux-contact-type-preview-light > span:not(.surux-node-contact-type) {
  color: #475569;
}

.surux-contact-type-preview-light .surux-node-contact-type {
  color: color-mix(in srgb, var(--surux-contact-color) 62%, #0f172a);
  background: color-mix(in srgb, var(--surux-contact-color) 14%, #fff);
}

.surux-contact-type-swatch {
  width: 1rem;
  height: 1rem;
  flex: 0 0 1rem;
  border-radius: 999px;
  background: var(--surux-contact-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--surux-contact-color) 18%, transparent);
}

@media (max-width: 767.98px) {
  .surux-template-editor-grid,
  .surux-settings-form-grid,
  .surux-contact-type-preview {
    grid-template-columns: 1fr;
  }

  .grid-column-span-2 {
    grid-column: span 1;
  }
}

.surux-user-preference-preview-column {
  min-width: 0;
  align-self: flex-start;
}

.surux-user-preference-preview-card {
  width: 100%;
  min-width: 0;
}

.surux-user-preference-preview-card > .surux-card-body {
  display: grid;
  gap: 1rem;
}

.surux-user-preference-preview-heading {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.surux-user-preference-preview-heading > div {
  min-width: 0;
}

.surux-user-preference-preview-eyebrow {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-bottom: .34rem;
  color: var(--surux-primary);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .075em;
  text-transform: uppercase;
}

.surux-user-preference-preview-status {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 1.65rem;
  padding: .25rem .55rem;
  border: 1px solid color-mix(in srgb, var(--surux-border) 82%, var(--surux-muted) 18%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surux-surface-2) 82%, transparent);
  color: var(--surux-muted);
  font-size: .68rem;
  font-weight: 750;
  line-height: 1;
  white-space: nowrap;
}

.surux-user-preference-preview-status.is-dirty {
  border-color: rgba(var(--surux-primary-rgb), .48);
  background: rgba(var(--surux-primary-rgb), .13);
  color: color-mix(in srgb, var(--surux-primary) 78%, var(--surux-text));
}

.surux-user-preference-preview {
  min-width: 0;
  display: grid;
  gap: .8rem;
  color: var(--surux-text);
}

.surux-user-preference-preview-window {
  min-width: 0;
  height: clamp(22rem, 43vh, 28rem);
  min-height: 22rem;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border: 1px solid color-mix(in srgb, var(--surux-border) 76%, var(--surux-primary) 24%);
  border-radius: .9rem;
  background: var(--surux-app-bg);
  box-shadow:
    0 1rem 2.25rem rgba(0, 0, 0, .2),
    inset 0 0 0 1px color-mix(in srgb, var(--surux-border) 46%, transparent);
}

.surux-user-preference-preview-window-bar {
  min-width: 0;
  min-height: 2.65rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .55rem;
  padding: .48rem .65rem;
  border-bottom: 1px solid var(--surux-border);
  background: color-mix(in srgb, var(--surux-surface) 92%, var(--surux-primary) 8%);
  color: var(--surux-text);
  font-size: .72rem;
  font-weight: 750;
}

.surux-user-preference-preview-window-mark {
  width: 1.65rem;
  height: 1.65rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(var(--surux-primary-rgb), .42);
  border-radius: 50%;
  background: rgba(var(--surux-primary-rgb), .13);
  color: var(--surux-primary);
}

.surux-user-preference-preview-window-tools {
  display: flex;
  align-items: center;
  gap: .42rem;
  color: var(--surux-muted);
}

.surux-user-preference-preview-window-tools i {
  width: 1.45rem;
  height: 1.45rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--surux-border);
  border-radius: 50%;
  font-size: .62rem;
}

.surux-user-preference-preview-shell {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(5.75rem, 26%) minmax(0, 1fr);
}

.surux-user-preference-preview-nav {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .28rem;
  padding: .7rem .55rem;
  border-right: 1px solid var(--surux-border);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--surux-surface) 88%, #000 12%) 0 2.35rem, transparent 2.35rem),
    color-mix(in srgb, var(--surux-surface) 88%, var(--surux-app-bg) 12%);
}

.surux-user-preference-preview-nav-item {
  min-width: 0;
  min-height: 2rem;
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  align-items: center;
  gap: .42rem;
  padding: .35rem .42rem;
  border: 1px solid transparent;
  border-radius: .42rem;
  color: var(--surux-muted);
  font-size: .62rem;
  font-weight: 700;
}

.surux-user-preference-preview-nav-item i {
  color: color-mix(in srgb, var(--surux-muted) 72%, var(--surux-primary) 28%);
  text-align: center;
}

.surux-user-preference-preview-nav-item span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.surux-user-preference-preview-nav-item.is-active {
  border-color: rgba(var(--surux-primary-rgb), .34);
  background: rgba(var(--surux-primary-rgb), .12);
  color: var(--surux-text);
}

.surux-user-preference-preview-nav-item.is-active i {
  color: var(--surux-primary);
}

.surux-user-preference-preview-workspace {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.surux-user-preference-preview-crumb {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: .34rem;
  padding: .62rem .72rem;
  border-bottom: 1px solid var(--surux-border);
  color: var(--surux-muted);
  font-size: .61rem;
}

.surux-user-preference-preview-crumb i {
  font-size: .48rem;
}

.surux-user-preference-preview-crumb strong {
  min-width: 0;
  overflow: hidden;
  color: var(--surux-text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.surux-user-preference-preview-content {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: .65rem;
  padding: .72rem;
}

.surux-user-preference-preview-tabs {
  min-width: 0;
  display: flex;
  align-items: stretch;
  gap: .22rem;
  border-bottom: 1px solid var(--surux-border);
}

.surux-user-preference-preview-tabs span {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: .32rem;
  padding: .38rem .48rem;
  border-bottom: 2px solid transparent;
  color: var(--surux-muted);
  font-size: .59rem;
  font-weight: 700;
  white-space: nowrap;
}

.surux-user-preference-preview-tabs span.is-active {
  border-bottom-color: var(--surux-primary);
  color: var(--surux-text);
}

.surux-user-preference-preview-tabs span.is-active i {
  color: var(--surux-primary);
}

.surux-user-preference-preview-panel {
  min-width: 0;
  min-height: 0;
  display: grid;
  align-content: space-between;
  gap: .8rem;
  padding: .85rem;
  border: 1px solid var(--surux-border);
  border-radius: .7rem;
  background:
    linear-gradient(145deg, rgba(var(--surux-primary-rgb), .075), transparent 46%),
    var(--surux-surface);
}

.surux-user-preference-preview-panel-heading {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: .6rem;
}

.surux-user-preference-preview-panel-heading > span:last-child {
  min-width: 0;
  display: grid;
  gap: .08rem;
}

.surux-user-preference-preview-panel-heading strong,
.surux-user-preference-preview-panel-heading small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.surux-user-preference-preview-panel-heading strong {
  font-size: .75rem;
}

.surux-user-preference-preview-panel-heading small {
  color: var(--surux-muted);
  font-size: .56rem;
}

.surux-user-preference-preview-panel-icon {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: .5rem;
  background: rgba(var(--surux-primary-rgb), .14);
  color: var(--surux-primary);
}

.surux-user-preference-preview-samples {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .45rem;
}

.surux-user-preference-preview-samples > span {
  min-width: 0;
  display: grid;
  gap: .12rem;
  padding: .55rem;
  border: 1px solid var(--surux-border);
  border-radius: .5rem;
  background: color-mix(in srgb, var(--surux-surface-2) 86%, transparent);
}

.surux-user-preference-preview-samples small {
  color: var(--surux-muted);
  font-size: .54rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.surux-user-preference-preview-samples strong {
  min-width: 0;
  overflow: hidden;
  font-size: .67rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.surux-user-preference-preview-command-bar {
  min-width: 0;
  min-height: 3.1rem;
  display: flex;
  align-items: center;
  gap: .42rem;
  padding: .55rem .65rem;
  border-top: 1px solid var(--surux-border);
  background: color-mix(in srgb, var(--surux-surface) 92%, var(--surux-app-bg) 8%);
}

.surux-user-preference-preview-command-actions {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: .38rem;
}

.surux-user-preference-preview-command-actions button {
  min-height: 1.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  padding: .36rem .56rem;
  border: 1px solid rgba(var(--surux-primary-rgb), .44);
  border-radius: 999px;
  background: rgba(var(--surux-primary-rgb), .14);
  color: var(--surux-text);
  font: inherit;
  font-size: .58rem;
  font-weight: 750;
  pointer-events: none;
}

.surux-user-preference-preview-command-actions button:last-child {
  width: 1.85rem;
  padding-inline: 0;
  border-color: var(--surux-border);
  background: color-mix(in srgb, var(--surux-surface-2) 82%, transparent);
  color: var(--surux-muted);
}

.surux-user-preference-preview-command-note {
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--surux-muted);
  font-size: .7rem;
}

.surux-user-preference-preview[data-surux-command-bar-alignment="left"] .surux-user-preference-preview-command-actions {
  margin-right: auto;
}

.surux-user-preference-preview[data-surux-command-bar-alignment="middle"] .surux-user-preference-preview-command-actions {
  margin-left: auto;
  margin-right: auto;
}

.surux-user-preference-preview[data-surux-command-bar-alignment="right"] .surux-user-preference-preview-command-actions {
  margin-left: auto;
}

.surux-user-preference-preview[data-surux-button-style="raised"] .surux-user-preference-preview-command-actions button {
  border-color: transparent;
  border-radius: .44rem;
  background: var(--surux-primary-action-bg);
  color: var(--surux-primary-contrast);
  box-shadow: 0 .32rem .58rem rgba(var(--surux-primary-rgb), .3);
}

.surux-user-preference-preview[data-surux-button-style="raised"] .surux-user-preference-preview-command-actions button:last-child {
  background: var(--surux-surface-2);
  color: var(--surux-text);
  box-shadow: 0 .25rem .5rem rgba(0, 0, 0, .16);
}

.surux-user-preference-preview[data-surux-desktop-tab-orientation="vertical"] .surux-user-preference-preview-content {
  grid-template-columns: minmax(4.9rem, 34%) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}

.surux-user-preference-preview[data-surux-desktop-tab-orientation="vertical"] .surux-user-preference-preview-tabs {
  flex-direction: column;
  border-right: 1px solid var(--surux-border);
  border-bottom: 0;
}

.surux-user-preference-preview[data-surux-desktop-tab-orientation="vertical"] .surux-user-preference-preview-tabs span {
  border-right: 2px solid transparent;
  border-bottom: 0;
}

.surux-user-preference-preview[data-surux-desktop-tab-orientation="vertical"] .surux-user-preference-preview-tabs span.is-active {
  border-right-color: var(--surux-primary);
  background: rgba(var(--surux-primary-rgb), .08);
}

.surux-user-preference-preview[data-surux-navigation-layout="accordion"] .surux-user-preference-preview-shell {
  grid-template-columns: minmax(6.15rem, 28%) minmax(0, 1fr);
}

.surux-user-preference-preview[data-surux-navigation-layout="accordion"] .surux-user-preference-preview-nav {
  gap: 0;
  background: color-mix(in srgb, var(--surux-surface) 90%, var(--surux-app-bg) 10%);
}

.surux-user-preference-preview[data-surux-navigation-layout="accordion"] .surux-user-preference-preview-nav-item {
  border-radius: 0;
  border-bottom-color: var(--surux-border);
}

.surux-user-preference-preview[data-surux-navigation-layout="canopy"] .surux-user-preference-preview-shell {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
}

.surux-user-preference-preview[data-surux-navigation-layout="canopy"] .surux-user-preference-preview-nav {
  flex-direction: row;
  gap: .25rem;
  padding: .45rem .6rem;
  border-right: 0;
  border-bottom: 1px solid var(--surux-border);
  background: color-mix(in srgb, var(--surux-surface) 90%, var(--surux-app-bg) 10%);
}

.surux-user-preference-preview[data-surux-navigation-layout="canopy"] .surux-user-preference-preview-nav-item {
  flex: 1 1 0;
  grid-template-columns: auto minmax(0, auto);
  justify-content: center;
}

.surux-user-preference-preview-readout {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
}

.surux-user-preference-preview-readout > span {
  min-width: 0;
  display: grid;
  gap: .12rem;
  padding: .55rem .65rem;
  border: 1px solid var(--surux-border);
  border-radius: .58rem;
  background: color-mix(in srgb, var(--surux-surface-2) 72%, transparent);
}

.surux-user-preference-preview-readout small {
  color: var(--surux-muted);
  font-size: .59rem;
  font-weight: 750;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.surux-user-preference-preview-readout strong {
  min-width: 0;
  overflow: hidden;
  color: var(--surux-text);
  font-size: .7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (min-width: 1200px) {
  .surux-user-preference-preview-card {
    position: sticky;
    top: .75rem;
  }
}

@media (max-width: 575.98px) {
  .surux-user-preference-preview-heading {
    display: grid;
  }

  .surux-user-preference-preview-status {
    width: fit-content;
  }

  .surux-user-preference-preview-window {
    height: 22rem;
  }

  .surux-user-preference-preview-shell,
  .surux-user-preference-preview[data-surux-navigation-layout="accordion"] .surux-user-preference-preview-shell {
    grid-template-columns: 2.9rem minmax(0, 1fr);
  }

  .surux-user-preference-preview-nav {
    padding-inline: .42rem;
    background: color-mix(in srgb, var(--surux-surface) 90%, var(--surux-app-bg) 10%);
  }

  .surux-user-preference-preview-nav-item {
    grid-template-columns: 1fr;
    justify-items: center;
    padding-inline: .3rem;
  }

  .surux-user-preference-preview-nav-item span {
    display: none;
  }

  .surux-user-preference-preview[data-surux-navigation-layout="canopy"] .surux-user-preference-preview-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .surux-user-preference-preview[data-surux-navigation-layout="canopy"] .surux-user-preference-preview-nav-item span {
    display: block;
  }

  .surux-user-preference-preview[data-surux-desktop-tab-orientation="vertical"] .surux-user-preference-preview-content {
    grid-template-columns: 3.15rem minmax(0, 1fr);
  }

  .surux-user-preference-preview[data-surux-desktop-tab-orientation="vertical"] .surux-user-preference-preview-tabs span {
    justify-content: center;
    padding-inline: .3rem;
    font-size: 0;
  }
}

/* SX# is an identifier column of near-constant width, so it gets a sensible default rather than
   competing with the free-text columns for space. The table remains resizable: surux-table-resize.js
   writes explicit widths into the colgroup, which override this.

   The prefix is surux-table, which is what SuruXDataTable actually puts on the <table>
   (TableCssClass, SuruXDataTable.razor:30). There is no class named surux-data-table anywhere in the
   product — only the hyphenated descendants surux-data-table-card/-scroll/-desktop-shell, which are
   different class tokens, and the attribute data-surux-data-table, which a class selector cannot
   match. These rules were written against that non-existent class and had no effect at all. */
.surux-table th.surux-column-sx-number { width: 132px; }

/* Masked identity numbers are a fixed 13 characters, so the column needs no more room. */
.surux-table th.surux-column-id-number,
.surux-table td.surux-column-id-number { width: 148px; white-space: nowrap; }

/*
 * Supplier identity block editor (Settings > Documents).
 *
 * Ten rows sit in this list, so each one has to stay on a single line: the detail it prints,
 * whether it prints, and what it is called, side by side. The generic sidebar-order classes
 * carry no styling of their own, which left every row stacking into a full-height block.
 */
.surux-identity-list {
  display: grid;
  gap: .4rem;
}

.surux-identity-row {
  display: grid;
  grid-template-columns: auto minmax(9rem, 1fr) minmax(9rem, 1.1fr) auto auto;
  align-items: center;
  gap: .5rem .75rem;
  padding: .5rem .65rem;
  border: 1px solid var(--surux-border);
  border-radius: .5rem;
  background: var(--surux-surface);
}

.surux-identity-grip {
  color: var(--surux-muted);
  cursor: grab;
}

.surux-identity-name {
  min-width: 0;
  font-weight: 600;
  color: var(--surux-text);
}

.surux-identity-order {
  display: block;
  font-size: .78rem;
  font-weight: 400;
  color: var(--surux-muted);
}

/* The printed heading is a shared inset SuruXControl; its label typography belongs to the control. */
.surux-identity-row .surux-identity-label-field {
  min-width: 0;
}

.surux-identity-controls {
  display: flex;
  gap: .25rem;
}

.surux-identity-controls button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  padding: 0;
  border: 1px solid var(--surux-border);
  border-radius: .375rem;
  background: transparent;
  color: var(--surux-muted);
}

.surux-identity-controls button:hover {
  color: var(--surux-text);
  border-color: var(--surux-primary);
}

@media (max-width: 900px) {
  .surux-identity-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .surux-identity-row .surux-identity-label-field {
    grid-column: 2 / -1;
  }
}

/*
 * Sidebar menu order + module access (Settings > Navigation).
 *
 * The main menu holds 19 rows and every child group its own handful, so groups sit
 * side by side in a responsive grid and each row keeps grip, label and move buttons
 * on one line.
 */
.surux-sidebar-order-reset {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .32rem .7rem;
  border: 1px solid var(--surux-border);
  border-radius: .45rem;
  background: transparent;
  color: var(--surux-muted);
  font-size: .8rem;
  font-weight: 600;
  transition: border-color .16s ease, color .16s ease, background-color .16s ease;
}

.surux-sidebar-order-reset:hover {
  border-color: rgba(var(--surux-primary-rgb), .52);
  background: rgba(var(--surux-primary-rgb), .07);
  color: var(--surux-text);
}

.surux-sidebar-order-reset:focus-visible {
  outline: 3px solid rgba(var(--surux-primary-rgb), .24);
  outline-offset: 2px;
}

/* Main menu carries twenty rows where some child groups carry two, so a row grid sized every row to
   the tallest group in it. Columns pack them by height. A group never splits, so dragging inside one
   still sees an ordinary vertical list. */
.surux-sidebar-order-grid {
  column-width: 21rem;
  column-gap: .85rem;
}

.surux-sidebar-order-group {
  min-width: 0;
  display: grid;
  gap: .55rem;
  margin-bottom: .85rem;
  padding: .75rem;
  border: 1px solid var(--surux-border);
  border-radius: .58rem;
  background: color-mix(in srgb, var(--surux-surface) 88%, transparent);
  break-inside: avoid;
}

.surux-sidebar-order-group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
}

.surux-sidebar-order-group-head h3 {
  margin: 0;
  font-size: .9rem;
  font-weight: 700;
}

.surux-sidebar-order-group-head span {
  color: var(--surux-muted);
  font-size: .78rem;
  white-space: nowrap;
}

.surux-sidebar-order-list {
  display: grid;
  gap: .35rem;
}

.surux-sidebar-order-list.is-drag-active {
  border-radius: .5rem;
  outline: 2px dashed rgba(var(--surux-primary-rgb), .45);
  outline-offset: 3px;
}

.surux-sidebar-order-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .6rem;
  padding: .45rem .6rem;
  border: 1px solid var(--surux-border);
  border-radius: .5rem;
  background: var(--surux-surface);
}

.surux-sidebar-order-item.is-dragging {
  opacity: .55;
  border-style: dashed;
  border-color: var(--surux-primary);
}

.surux-sidebar-order-grip {
  color: var(--surux-muted);
  cursor: grab;
}

.surux-sidebar-order-item.is-dragging .surux-sidebar-order-grip {
  cursor: grabbing;
}

.surux-sidebar-order-copy {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: .45rem;
}

.surux-sidebar-order-copy strong {
  color: var(--surux-text);
  font-weight: 600;
}

.surux-sidebar-order-copy small {
  color: var(--surux-muted);
  font-size: .75rem;
  overflow-wrap: anywhere;
}

/* The technical-request status and clean-description rule rows reuse the sidebar-order shell, whose
   copy slot was written for an inline strong + small. Their control stack is a flex item, so without
   a stated basis it collapses to its widest label and leaves the rest of the row empty. */
.surux-settings-order-fields {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  align-items: start;
  gap: .6rem .85rem;
}

.surux-sidebar-order-controls {
  display: flex;
  gap: .25rem;
}

.surux-sidebar-order-controls button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  padding: 0;
  border: 1px solid var(--surux-border);
  border-radius: .375rem;
  background: transparent;
  color: var(--surux-muted);
}

.surux-sidebar-order-controls button:hover {
  color: var(--surux-text);
  border-color: var(--surux-primary);
}

.surux-sidebar-order-controls button:focus-visible {
  outline: 3px solid rgba(var(--surux-primary-rgb), .24);
  outline-offset: 2px;
}

.surux-enabled-modules-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}

.surux-enabled-modules-actions > span {
  color: var(--surux-muted);
  font-size: .8rem;
  white-space: nowrap;
}

/* Groups run from one switch to a dozen. A row grid sizes every row to its tallest group, which
   left most of the surface empty; columns pack them by height instead. */
.surux-enabled-modules-grid {
  column-width: 18rem;
  column-gap: .85rem;
}

.surux-enabled-module-group {
  min-width: 0;
  display: grid;
  gap: .45rem;
  margin-bottom: .85rem;
  padding: .75rem;
  border: 1px solid var(--surux-border);
  border-radius: .58rem;
  background: color-mix(in srgb, var(--surux-surface) 88%, transparent);
  break-inside: avoid;
}

.surux-enabled-module-children {
  display: grid;
  gap: .35rem;
  margin-left: .55rem;
  padding-left: .7rem;
  border-left: 2px solid color-mix(in srgb, var(--surux-border) 72%, transparent);
}

.surux-enabled-module-copy {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: .45rem;
}

.surux-enabled-module-copy strong {
  color: var(--surux-text);
  font-weight: 600;
}

.surux-enabled-module-copy small {
  color: var(--surux-muted);
  font-size: .75rem;
  overflow-wrap: anywhere;
}

/* SuruXMetricSections ------------------------------------------------------
   One switcher, two stacked panels sharing a single grid cell. The panels are
   both in the DOM so the group arriving and the group leaving move together;
   swapping the markup instead would teleport the numbers. */
.surux-metric-sections {
  --surux-metric-sections-ease: cubic-bezier(0.23, 1, 0.32, 1);
  display: grid;
  gap: .6rem;
  min-width: 0;
}

.surux-metric-sections-tabs {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  width: max-content;
  max-width: 100%;
  padding: .2rem;
  border: 1px solid color-mix(in srgb, var(--surux-border) 88%, var(--surux-muted) 12%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surux-surface-2) 92%, transparent);
}

.surux-metric-sections-tab {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .9rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--surux-muted);
  font-size: .76rem;
  font-weight: 750;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}

.surux-metric-sections-tab[aria-selected="true"] {
  background: var(--surux-primary);
  color: var(--surux-primary-contrast, #fff);
}

.surux-metric-sections-tab:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--surux-primary) 64%, transparent);
  outline-offset: 2px;
}

.surux-metric-sections-viewport {
  display: grid;
  min-width: 0;
}

.surux-metric-sections-panel {
  grid-area: 1 / 1;
  min-width: 0;
  transition:
    opacity 200ms var(--surux-metric-sections-ease),
    transform 200ms var(--surux-metric-sections-ease),
    visibility 0s linear 200ms;
}

.surux-metric-sections-panel[data-state="active"] {
  opacity: 1;
  transform: translateX(0);
  visibility: visible;
  transition-delay: 0s;
}

.surux-metric-sections-panel[data-state="before"] {
  opacity: 0;
  transform: translateX(-1.5rem);
  visibility: hidden;
}

.surux-metric-sections-panel[data-state="after"] {
  opacity: 0;
  transform: translateX(1.5rem);
  visibility: hidden;
}

@media (hover: hover) and (pointer: fine) {
  .surux-metric-sections-tab:not([aria-selected="true"]):hover {
    background: color-mix(in srgb, var(--surux-primary) 14%, transparent);
    color: var(--surux-text);
  }
}

@media (prefers-reduced-motion: reduce) {
  .surux-metric-sections-panel {
    transition: opacity 150ms ease, visibility 0s linear 150ms;
  }

  .surux-metric-sections-panel[data-state="before"],
  .surux-metric-sections-panel[data-state="after"] {
    transform: none;
  }
}

/* Bar chart --------------------------------------------------------------- */
/* One series, drawn as columns. Recessive on purpose: the shape of a month is
   context for the numbers beside it, not the headline. */
.surux-bar-chart {
  margin: 0;
  /* The top gridline label is offset by .95rem. That room is inside the figure, so the label cannot cover whatever sits above the chart. */
  padding-top: .95rem;
}

.surux-bar-chart-plot {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 7.5rem;
}

.surux-bar-chart-col {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  min-width: 0;
}

.surux-bar-chart-bar {
  background: var(--surux-primary);
  border-radius: 4px 4px 0 0;
  transition: opacity .12s ease;
}

.surux-bar-chart-bar.is-peak {
  background: color-mix(in srgb, var(--surux-primary) 72%, #000);
}

.surux-bar-chart-col .surux-bar-segment-0 { background: var(--surux-danger); border-radius: 0; }
.surux-bar-chart-col .surux-bar-segment-1 { background: var(--surux-warning); border-radius: 0; }
.surux-bar-chart-col .surux-bar-segment-2 { background: var(--surux-primary); border-radius: 0; }
.surux-bar-chart-col .surux-bar-segment-3 { background: color-mix(in srgb, var(--surux-primary) 70%, var(--surux-text)); border-radius: 0; }
.surux-bar-chart-col .surux-bar-segment-4 { background: color-mix(in srgb, var(--surux-warning) 55%, var(--surux-primary)); border-radius: 0; }
.surux-bar-chart-col .surux-bar-segment-5 { background: color-mix(in srgb, var(--surux-danger) 45%, var(--surux-primary)); border-radius: 0; }
.surux-bar-chart-col .surux-bar-segment-6 { background: var(--surux-muted); border-radius: 0; }
.surux-bar-chart-col .surux-bar-chart-bar:last-child { border-radius: 4px 4px 0 0; }

.surux-bar-chart-col:hover .surux-bar-chart-bar {
  opacity: .78;
}

.surux-bar-chart-axis {
  display: flex;
  gap: 3px;
  margin-top: .35rem;
}

.surux-bar-chart-axis span {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  font-size: .68rem;
  color: var(--surux-muted);
  white-space: nowrap;
  overflow: hidden;
}

.surux-bar-chart-caption {
  margin-top: .5rem;
  font-size: .8rem;
  color: var(--surux-muted);
}

@media (prefers-reduced-motion: reduce) {
  .surux-bar-chart-bar {
    transition: none;
  }
}

/* Frequency bands and vehicle lookup -------------------------------------- */

/* One bar in five parts. It was five bars, each on its own 0-100 track, which was arithmetically
   right - the bands are shares of one whole and they added to it - and cost the block most of its
   width, because the largest band is only two fifths and so more than half of every track was
   permanently empty. As one bar the parts-of-whole relationship is the shape rather than a sum
   the reader has to carry. */
.surux-frequency-stack {
  display: flex;
  height: 2.4rem;
  gap: 1px;
  border-radius: var(--surux-radius-md);
  overflow: hidden;
}

.surux-frequency-segment {
  min-width: 0;
  display: flex;
  align-items: center;
  padding: 0 .5rem;
  overflow: hidden;
}

.surux-frequency-segment-label {
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  white-space: nowrap;
  font-size: .62rem;
  opacity: .78;
}

.surux-frequency-segment-label b {
  font-size: .82rem;
  font-weight: 800;
  opacity: 1;
}

/* A sequential ramp, because the bands are ordered rather than categorical: seen once at one end,
   seen constantly at the other. Categorical colours would invite reading them as five unrelated
   things.

   The ramp runs up, not down. The ordered quantity is how often a vehicle was seen, so the
   strongest colour belongs to the vehicles seen most - and that band is also the narrowest, 18
   vehicles in about a pixel of bar. Running it the other way put the faintest colour on the
   thinnest segment and it disappeared into the card entirely.

   Mixed toward --surux-border rather than transparent for the same reason: a translucent segment
   over a card surface converges on the card, which is exactly what a segment must not do. */
.surux-frequency-band-4 { background: var(--surux-primary); color: var(--surux-app-bg); }
.surux-frequency-band-3 { background: color-mix(in srgb, var(--surux-primary) 76%, var(--surux-border)); color: var(--surux-app-bg); }
.surux-frequency-band-2 { background: color-mix(in srgb, var(--surux-primary) 54%, var(--surux-border)); }
.surux-frequency-band-1 { background: color-mix(in srgb, var(--surux-primary) 34%, var(--surux-border)); }
.surux-frequency-band-0 { background: color-mix(in srgb, var(--surux-primary) 18%, var(--surux-border)); }

/* Every band's name, count and share, including the ones too narrow to label in place. */
.surux-frequency-key {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.2rem;
  margin-top: .85rem;
  font-size: .78rem;
}

.surux-frequency-key-item {
  display: flex;
  align-items: center;
  gap: .4rem;
  color: var(--surux-muted);
}

.surux-frequency-key-item i {
  width: .85rem;
  height: .85rem;
  border-radius: .2rem;
  flex: 0 0 auto;
}

.surux-frequency-key-item b {
  color: var(--surux-text);
  font-weight: 700;
}

.surux-frequency-key-item em {
  font-style: normal;
}

/* A search box, not the page's subject. Capped rather than tracking the card, and
   the button on the same row as the field it runs. */
.surux-plate-lookup {
  margin-top: 1rem;
}

.surux-plate-lookup-row {
  display: flex;
  align-items: flex-end;
  gap: .5rem;
  max-width: 32rem;
}

.surux-plate-lookup-field {
  flex: 1 1 auto;
  min-width: 0;
  margin-bottom: 0;
}

.surux-lookup-result {
  border: 1px solid var(--surux-border);
  border-radius: .65rem;
  padding: .75rem 1rem;
  background: var(--surux-surface-2);
}

.surux-bar-chart-marks {
  display: flex;
  gap: 3px;
  margin-top: .3rem;
  height: 4px;
}

.surux-bar-chart-marks span {
  flex: 1 1 0;
  min-width: 0;
  border-radius: 2px;
}

.surux-bar-chart-marks span.is-flagged {
  background: var(--surux-danger);
}

.surux-bar-chart-key {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-top: .5rem;
  font-size: .78rem;
  color: var(--surux-muted);
}

.surux-bar-chart-key i {
  width: 14px;
  height: 4px;
  border-radius: 2px;
  background: var(--surux-danger);
}

/* Weekday profile --------------------------------------------------------- */
/* Seven marks answering "which days are quiet" - the question a row of thirty
   daily bars answers badly, because the eye cannot pick out every seventh one. */
.surux-weekday-profile {
  display: flex;
  gap: .5rem;
  align-items: flex-end;
}

.surux-weekday-col {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
}

/* Seven bars across a full-width card are wide slabs, and a 45% spread between the busiest
   weekday and the quietest reads as almost nothing. In half the width and the whole height of
   the card, the same numbers are a shape. */
.surux-report-split .surux-weekday-profile {
  flex: 1 1 auto;
  align-items: stretch;
}

.surux-report-split .surux-weekday-col {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.surux-report-split .surux-weekday-plot {
  flex: 1 1 auto;
  height: auto;
  min-height: 7.5rem;
}

.surux-weekday-plot {
  height: 6rem;
  display: flex;
  align-items: flex-end;
  border-bottom: 1px solid var(--surux-border);
}

.surux-weekday-bar {
  width: 100%;
  background: var(--surux-primary);
  border-radius: 4px 4px 0 0;
}

.surux-weekday-bar.is-weekend {
  background: color-mix(in srgb, var(--surux-primary) 45%, transparent);
}

.surux-weekday-col span {
  display: block;
  margin-top: .35rem;
  font-size: .7rem;
  color: var(--surux-muted);
}

.surux-weekday-col .surux-weekday-name {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--surux-text);
}

.surux-weekday-col .surux-weekday-value {
  margin-top: .2rem;
  font-size: .92rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--surux-text);
}

/* How many days the average is over, on the page and not in a tooltip: a mean of
   two Tuesdays and a mean of five draw the same bar and are not worth the same. */
.surux-weekday-col .surux-weekday-sample {
  margin-top: .1rem;
  font-size: .62rem;
}

.surux-bar-chart-plot {
  position: relative;
}

.surux-bar-chart-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.surux-bar-chart-gridline {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px dashed var(--surux-border);
}

.surux-bar-chart-gridline span {
  position: absolute;
  right: 0;
  top: -.95rem;
  font-size: .66rem;
  color: var(--surux-muted);
  background: var(--surux-surface);
  padding: 0 .2rem;
}

/* ANPR report ------------------------------------------------------------- */
/* The screen draws the shapes the document draws, so the two are one report
   rather than two. The colours are the product's throughout: the document is
   tenant branded because it goes out under the tenant's name, and the screen is
   not, because it is SuruX. */

/* One rhythm down the page. Every block used to carry its own top margin, so the
   space between two subjects was smaller than the padding inside one of them and
   the sections read as a single wall. The stack owns the gaps; nothing in it
   brings its own. */
.surux-anpr-report {
  display: grid;
  gap: 1.25rem;
  align-content: start;
}

.surux-anpr-report > * {
  margin-top: 0;
  margin-bottom: 0;
}

.surux-report-lede {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.05;
  margin: 0;
}

.surux-report-lede-sub {
  font-size: .8rem;
  color: var(--surux-muted);
  margin: .35rem 0 0;
}

.surux-report-lede-sub b {
  color: var(--surux-text);
  font-weight: 700;
}

.surux-report-note {
  font-size: .72rem;
  color: var(--surux-muted);
  line-height: 1.55;
  margin-top: .5rem;
}

/* The scope filters, with the actions in a ruled column of their own. A button at
   the end of the field row reads as belonging to the field beside it; given its
   own column it reads as belonging to the section. One subject, so one card. */
.surux-report-scope {
  display: flex;
  align-items: stretch;
  gap: 1.25rem;
}

.surux-report-scope-fields {
  flex: 1 1 auto;
  min-width: 0;
}

.surux-report-scope-actions {
  flex: 0 0 10.5rem;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  padding-left: 1.25rem;
  border-left: 1px solid var(--surux-border);
}

.surux-report-scope-actions .surux-command-button {
  width: fit-content;
  max-width: 100%;
  justify-content: flex-start;
}

/* Narrow: the rule becomes a divider above the actions rather than beside them. */
@media (max-width: 768px) {
  .surux-report-scope {
    flex-direction: column;
    gap: 1rem;
  }

  .surux-report-scope-actions {
    flex: 0 0 auto;
    flex-direction: row;
    padding-left: 0;
    padding-top: 1rem;
    border-left: 0;
    border-top: 1px solid var(--surux-border);
  }

  .surux-report-scope-actions .surux-command-button {
    width: fit-content;
    flex: 0 0 auto;
    justify-content: center;
  }
}

/* The two cyclical blocks: where in the day, and where in the week. They were half a page
   apart, with the dial paired against the daily chart - a series over time rather than a cycle,
   and the chart that wanted the full width it now has. Neither of these two takes priority over
   the other, so the split is even.

   Both cards are as tall as the taller one, so the plot inside takes the room rather than the
   room sitting blank beneath it. */
.surux-report-split > .surux-report-section {
  display: flex;
  flex-direction: column;
}

.surux-report-split > .surux-report-section > .surux-card-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.surux-report-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  align-items: stretch;
}

/* Two blocks side by side, matched in height: the map has a floor of its own and
   used to hang a long way below whatever sat beside it. */
.surux-report-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  align-items: stretch;
}

.surux-report-pair > .surux-report-section {
  display: flex;
  flex-direction: column;
}

.surux-report-pair > .surux-report-section > .surux-card-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

@media (max-width: 1100px) {
  .surux-report-split,
  .surux-report-pair {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Headline figures on a rule, with the one ring beside them. Coverage used to be
   a second ring here as well, which opened the page by stating 28/31 twice in
   two different shapes before the chart that measures it. */
.surux-report-figures {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) 8rem;
  gap: 1rem;
  border-top: 2px solid var(--surux-primary);
  align-items: end;
}

.surux-report-figures > div {
  padding: .8rem 0 0;
}

.surux-report-figures .surux-report-figure-label {
  font-size: .58rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--surux-muted);
  line-height: 1.35;
  min-height: 2.2em;
  display: flex;
  align-items: flex-end;
}

.surux-report-figures .surux-report-figure-value {
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
  margin-top: .3rem;
}

.surux-report-figures .surux-report-figure-ring {
  padding-top: .45rem;
  text-align: center;
}

.surux-report-figures .surux-report-figure-ring svg {
  max-width: 4.6rem;
  margin: 0 auto;
}

/* The cohort and the denominator, where they can be read at a normal size. */
.surux-report-figure-ring-caption {
  margin-top: .35rem;
  font-size: .6rem;
  line-height: 1.35;
  color: var(--surux-muted);
}

@media (max-width: 900px) {
  .surux-report-figures {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .surux-report-figures .surux-report-figure-label {
    min-height: 0;
  }
}

/* An hour dial. A day is a circle, so the hours are drawn as one: it is the only
   chart here that says "time of day" without being read left to right. */
.surux-hour-dial {
  width: 100%;
  height: auto;
  display: block;
  max-width: 16.5rem;
  margin: 0 auto;
}

.surux-hour-dial-ring {
  fill: none;
  stroke: color-mix(in srgb, var(--surux-primary) 16%, transparent);
  stroke-width: 1.5;
}

.surux-hour-dial-segment {
  fill: color-mix(in srgb, var(--surux-primary) 62%, transparent);
}

.surux-hour-dial-segment.is-peak {
  fill: var(--surux-primary);
}

.surux-hour-dial-total {
  text-anchor: middle;
  font-size: 1.15rem;
  font-weight: 800;
  fill: var(--surux-text);
}

.surux-hour-dial-caption {
  text-anchor: middle;
  font-size: .4rem;
  letter-spacing: .16em;
  fill: var(--surux-muted);
}

.surux-hour-dial-tick {
  text-anchor: middle;
  font-size: .52rem;
  fill: var(--surux-muted);
}

/* What the outer ring is worth. Without it the dial names the busiest hour and says nothing
   about any of the other twenty-three - a shape rather than a measurement. */
.surux-hour-dial-scale-tick {
  stroke: color-mix(in srgb, var(--surux-primary) 40%, transparent);
  stroke-width: 1;
}

.surux-hour-dial-scale {
  font-size: .5rem;
  fill: var(--surux-muted);
}

/* A proportion as a ring. */
.surux-stat-ring {
  width: 100%;
  height: auto;
  display: block;
}

.surux-stat-ring-track {
  fill: none;
  stroke: color-mix(in srgb, var(--surux-primary) 16%, transparent);
  stroke-width: 12;
}

.surux-stat-ring-value {
  fill: none;
  stroke: var(--surux-primary);
  stroke-width: 12;
}

.surux-stat-ring-number {
  text-anchor: middle;
  font-size: 1.15rem;
  font-weight: 800;
  fill: var(--surux-text);
}

.surux-stat-ring-label {
  text-anchor: middle;
  font-size: .4rem;
  letter-spacing: .14em;
  fill: var(--surux-muted);
}

/* The scale the bars are drawn against, on the plot rather than described in the prose under
   it. A column chart with no axis is a shape; with one it is a measurement. */
.surux-day-scale {
  display: flex;
  justify-content: flex-end;
  font-size: .58rem;
  color: var(--surux-muted);
  margin-bottom: .15rem;
}

/* Days, and the coverage strip that shares their axis. A day nothing recorded is an empty slot:
   an absent day and a quiet day are not the same claim, and only one of them can be plotted.

   The slots stretch to the plot's height rather than claiming 100% of it. The plot grows to fill
   the card, so its height is not a fixed number any more, and a percentage height on a child has
   nothing to resolve against - the bars vanished. */
.surux-day-columns {
  display: flex;
  align-items: stretch;
  gap: 2px;
  flex: 1 1 auto;
  min-height: 7.5rem;
  border-top: 1px dashed color-mix(in srgb, var(--surux-border) 70%, transparent);
  border-bottom: 1px solid var(--surux-border);
}

.surux-day-columns > div {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* A day nothing recorded draws nothing at all. It drew a full-height bar once and then a
   full-height hatch, which is the same mistake twice: whatever the texture, a mark as tall as
   the busiest day makes the emptiest days the loudest thing on the chart. The plot says nothing
   about a day it cannot measure, and the coverage strip underneath carries the absence. */

.surux-day-column-bar {
  background: var(--surux-primary);
  border-radius: 2px 2px 0 0;
}

.surux-coverage-strip span.is-absent {
  background: color-mix(in srgb, var(--surux-border) 55%, transparent);
  box-shadow: inset 0 0 0 1px var(--surux-border);
}

.surux-day-axis {
  display: flex;
  gap: 2px;
  margin-top: .3rem;
}

.surux-day-axis span {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  font-size: .58rem;
  color: var(--surux-muted);
  overflow: hidden;
}

.surux-coverage-strip {
  display: flex;
  gap: 2px;
  height: .9rem;
  margin-top: .55rem;
}

.surux-coverage-strip span {
  flex: 1 1 0;
  min-width: 0;
  background: var(--surux-primary);
  border-radius: 1px;
}

/* The strip sits in a matrix row, so it takes the row's plot column and the same slot width as
   the cells above it. Its own margin is the daily chart's and would push it off that alignment. */
.surux-camera-matrix-row > .surux-coverage-strip {
  margin-top: .15rem;
  height: .55rem;
}

/* One card per camera. */
.surux-camera-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .7rem;
}

.surux-camera-card {
  border: 1px solid var(--surux-border);
  border-radius: var(--surux-radius-md);
  background: var(--surux-surface-2);
  padding: .75rem .85rem;
}

.surux-camera-card-name {
  font-size: .68rem;
  color: var(--surux-muted);
}

/* The total on the left, the trend on the right. The total used to sit at the right-hand end of
   the line, at the height a final data point would, so a card's total for the month read as its
   last day's value. */
.surux-camera-card-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(9rem, 1.15fr);
  align-items: end;
  gap: .8rem;
  margin-top: .3rem;
}

.surux-camera-card-body > div:first-child {
  display: grid;
  gap: .15rem;
  min-width: 0;
}

.surux-camera-card-body strong {
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.1;
}

.surux-camera-card-body small,
.surux-camera-card-foot {
  font-size: .68rem;
  color: var(--surux-muted);
}

/* Where the block's own secondary line goes, ruled off from the figure above it. */
.surux-camera-card-foot {
  border-top: 1px solid var(--surux-border);
  margin-top: .55rem;
  padding-top: .5rem;
}

/* Past three cameras the row wraps, and the line is what has to go: the matrix
   below draws the same days for every camera on one shared scale. */
.surux-camera-cards.is-compact .surux-camera-card-compact {
  font-size: .7rem;
  color: var(--surux-muted);
  margin-top: .25rem;
}

.surux-camera-cards.is-compact .surux-camera-card-compact b {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--surux-text);
  letter-spacing: -.025em;
}

/* The trend is SuruXSparkline now, which owns its own drawing. The rules that were here drew a
   line through whatever points it was handed, which is exactly how the missing days got lost. */

@media (max-width: 900px) {
  .surux-camera-cards {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Every camera against every day, on one scale. Three states, because the report
   cannot honestly collapse them into two: it read something, it read nothing on a
   day the area was covered, or nothing in the area recorded at all. */
.surux-camera-matrix {
  display: grid;
  gap: .75rem;
}

.surux-camera-matrix-row {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: .7rem;
  align-items: end;
}

.surux-camera-matrix-name b {
  display: block;
  font-size: .78rem;
  font-weight: 700;
}

/* Rows tall enough for a day to differ from the day beside it. At 2.4rem the
   whole matrix was a texture rather than a comparison. */
.surux-camera-matrix-plot {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 3.4rem;
  border-bottom: 1px solid var(--surux-border);
}

.surux-camera-matrix-cell {
  flex: 1 1 0;
  min-width: 0;
  background: var(--surux-primary);
  border-radius: 1px 1px 0 0;
}

/* Dimmer than the faintest real cell. At full --surux-muted this was a light grey on a dark
   surface, so a camera's long silent run pulled harder than the rows that had reads in them:
   the mark for no data out-competing the marks that are data. */
.surux-camera-matrix-cell.is-quiet {
  height: 3px;
  border-radius: 1px;
  background: color-mix(in srgb, var(--surux-muted) 45%, transparent);
}

/* A day no camera in the area recorded draws nothing, the same as the daily chart and the
   camera trends. This was the last place still hatching it full height, which made the days the
   report knows least about the loudest marks in the row. The axis underneath says which days
   they were. */
.surux-camera-matrix-cell.is-absent {
  height: 0;
}

.surux-camera-matrix-key {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: .7rem;
  font-size: .7rem;
  color: var(--surux-muted);
}

.surux-camera-matrix-key span {
  display: flex;
  align-items: center;
  gap: .35rem;
}

/* A swatch has to be the mark it names. The quiet one matches the cell's weight, and the absent
   one matches the coverage strip - which is where absence is drawn now that the cells say nothing
   about a day they cannot measure. */
.surux-camera-matrix-key i {
  width: .9rem;
  height: 3px;
  border-radius: 1px;
  background: color-mix(in srgb, var(--surux-muted) 45%, transparent);
}

.surux-camera-matrix-key i.is-strip-absent {
  height: .55rem;
  border-radius: 1px;
  background: color-mix(in srgb, var(--surux-border) 55%, transparent);
  box-shadow: inset 0 0 0 1px var(--surux-border);
}

/* Once the report knows what each camera sent, a day is three bars on the row's shared scale:
   what was read, what the pushes were recorded as, and the pushes. Reads lead in the primary
   colour; events and signals are the context behind them, so they stay grey until a day has
   them and no read at all - a camera up and not reading, which is the amber. RedDog018, lens out
   of focus, pushing all week and reading nothing, is the day this draws. */
.surux-camera-matrix-day {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: flex-end;
  gap: 1px;
}

.surux-camera-matrix-day i {
  flex: 1 1 0;
  min-width: 0;
  border-radius: 1px 1px 0 0;
}

.surux-camera-matrix-day .is-reads {
  background: var(--surux-primary);
}

.surux-camera-matrix-day .is-events {
  background: color-mix(in srgb, var(--surux-muted) 75%, transparent);
}

.surux-camera-matrix-day .is-signals {
  background: color-mix(in srgb, var(--surux-muted) 38%, transparent);
}

.surux-camera-matrix-day.is-unread .is-events {
  background: var(--surux-warning);
}

.surux-camera-matrix-day.is-unread .is-signals {
  background: color-mix(in srgb, var(--surux-warning) 45%, transparent);
}

.surux-camera-matrix-key i.is-reads,
.surux-camera-matrix-key i.is-events,
.surux-camera-matrix-key i.is-signals,
.surux-camera-matrix-key i.is-unread {
  height: .55rem;
}

.surux-camera-matrix-key i.is-reads {
  background: var(--surux-primary);
}

.surux-camera-matrix-key i.is-events {
  background: color-mix(in srgb, var(--surux-muted) 75%, transparent);
}

.surux-camera-matrix-key i.is-signals {
  background: color-mix(in srgb, var(--surux-muted) 38%, transparent);
}

.surux-camera-matrix-key i.is-unread {
  background: var(--surux-warning);
}

/* The camera that is sending and not reading, ruled in the colour its days are drawn in. */
.surux-camera-card.is-unread {
  border-color: color-mix(in srgb, var(--surux-warning) 55%, var(--surux-border));
}

/* Under the daily chart, on its axis: the days a camera read nothing while still pushing. Only
   drawn when there is one, so a healthy month carries no empty second strip. */
.surux-unread-strip {
  display: flex;
  gap: 2px;
  height: .3rem;
  margin-top: .25rem;
}

.surux-unread-strip span {
  flex: 1 1 0;
  min-width: 0;
  border-radius: 1px;
}

.surux-unread-strip span.is-unread {
  background: var(--surux-warning);
}

@media (max-width: 700px) {
  .surux-camera-matrix-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Ranked plates. The plate is what gets looked up, so it carries the weight. */
/* The plate is what an operator reads and acts on, so it gets the room and the weight. The
   track is capped rather than taking every pixel left over: at full width it was about sixty per
   cent of the row and the loudest thing in it, which put the decoration above the identifier. */
.surux-plate-rank-row {
  display: grid;
  grid-template-columns: 1.6rem 8.5rem minmax(0, 20rem) 3.2rem 4.4rem 4.6rem;
  gap: .6rem;
  align-items: center;
  padding: .35rem 0;
  border-bottom: 1px solid var(--surux-border);
  font-size: .78rem;
}

.surux-plate-rank-row:last-child {
  border-bottom: 0;
}

.surux-plate-rank-row.is-heading {
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--surux-muted);
  font-weight: 700;
}

.surux-plate-rank-row.is-heading span {
  text-align: right;
}

.surux-plate-rank-row.is-heading span:nth-child(2) {
  text-align: left;
}

.surux-plate-rank-index {
  font-size: .62rem;
  font-weight: 700;
  color: var(--surux-muted);
}

/* Tabular figures because a column of registrations is read down it, not across. */
.surux-plate-rank-row .surux-plate {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: .04em;
  font-weight: 700;
  color: var(--surux-text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Present at some of the area's cameras and not all of them. A vehicle here almost every day at
   one gate is the shape the old read-count ordering buried, so it is worth marking. */
.surux-plate-rank-cameras.is-partial {
  color: var(--surux-primary);
  font-weight: 700;
}

/* The bar the ranking is a ranking of. It was emitted under a two-letter class
   that nothing styled, so the column has been rendering as an empty gap and the
   rows read as a table that happens to be sorted. Widths are relative to the
   busiest vehicle in the list. */
.surux-plate-rank-track {
  display: block;
  min-width: 0;
  height: .5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surux-border) 60%, transparent);
  overflow: hidden;
}

.surux-plate-rank-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--surux-primary);
}

.surux-plate {
  font-family: Consolas, "Cascadia Mono", monospace;
  font-weight: 700;
  letter-spacing: -.02em;
}

.surux-plate-rank-reads {
  text-align: right;
  font-weight: 700;
}

.surux-plate-rank-days,
.surux-plate-rank-cameras {
  text-align: right;
  font-size: .7rem;
  color: var(--surux-muted);
}

@media (max-width: 900px) {
  .surux-plate-rank-row {
    grid-template-columns: 1.4rem 6rem minmax(0, 1fr) 3.4rem;
  }

  /* Reads and cameras give way, not days: days present is what the list is ordered by, so it is
     the last column that should go. Before the reorder it was reads that had to stay. */
  .surux-plate-rank-reads,
  .surux-plate-rank-cameras,
  .surux-plate-rank-row.is-heading span:nth-child(n+5) {
    display: none;
  }
}

/* Own vehicles, left out of every public figure and named so the exclusion can
   be checked. The block used to open with a row of three figures restating what
   its own header and description had already said; the tables are the point. */
/* Sized to the two tables rather than splitting the card between them: both are capped now, so
   fractional columns only pushed them to opposite ends of a wide card with a gulf in between. */
.surux-exclusion-lists {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  justify-content: start;
  gap: 1.4rem 3rem;
}

.surux-exclusion-vehicle,
.surux-exclusion-role {
  display: grid;
  gap: .5rem;
  font-size: .74rem;
  padding: .35rem 0;
  border-bottom: 1px solid var(--surux-border);
  align-items: baseline;
}

/* The stretchy column was the role name, so on a full-width card the reads and days ended up
   the better part of a foot from the plate they describe. It is capped, and the row with it,
   so the numbers stay beside the vehicle they belong to. */
.surux-exclusion-vehicle {
  grid-template-columns: 6.5rem minmax(0, 1fr) 3.4rem 3rem;
  max-width: 30rem;
}

.surux-exclusion-role {
  grid-template-columns: minmax(0, 1fr) 4.2rem 3.4rem;
  max-width: 24rem;
}

.surux-exclusion-vehicle span:nth-child(n+3),
.surux-exclusion-role span:nth-child(n+2) {
  text-align: right;
}

/* Carried by a row of its own on the same columns, so every number has a name and the units
   are stated once rather than on each line. Declared after the row rules so where the two
   meet - both are one class - the heading's type treatment wins. */
.surux-exclusion-heading {
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--surux-muted);
  font-weight: 700;
  padding-bottom: .35rem;
  border-bottom-color: var(--surux-border);
}

@media (max-width: 900px) {
  .surux-exclusion-lists {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Report sections --------------------------------------------------------- */
/* The sibling of .surux-edit-section, and different on purpose. An edit page's
   icon tile labels a kind of form; a report block's label is its number, so the
   tile gives way to the figure and the reader gets the answer before the chart
   that explains it. */

.surux-report-section {
  min-width: 0;
  overflow: hidden;
}

.surux-report-section > .surux-card-header {
  align-items: flex-start;
}

.surux-report-section-heading {
  min-width: 0;
}

/* A report title used to need its own rule here, because a section heading was a
   small uppercase tag over a set of fields and that was too quiet to name a
   finding. Section headings read that way everywhere now, so the override is
   gone and both kinds of section state their title the same way. */
.surux-report-section-heading p {
  margin: 0 0 .12rem;
  color: color-mix(in srgb, var(--surux-primary) 82%, var(--surux-text) 18%);
  font-size: .67rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.surux-report-section-heading small {
  display: block;
  max-width: 54rem;
  margin-top: .26rem;
  color: var(--surux-muted);
  font-size: .79rem;
  line-height: 1.45;
}

/* Pushed right even when the header wraps. In a half-width block a long
   description wraps the figure onto its own line, where without this it landed
   under the eyebrow and read as the first thing in the body. */
.surux-report-section-actions {
  min-width: 0;
  margin-left: auto;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: .9rem;
  flex-wrap: wrap;
}

/* The block's own number, where a reader looks for it first. */
.surux-report-section-figure {
  flex: 0 0 auto;
  text-align: right;
}

.surux-report-section-figure b {
  display: block;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
}

.surux-report-section-figure span {
  display: block;
  margin-top: .18rem;
  font-size: .58rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--surux-muted);
}

/* An accent edge, for a block the reader is meant to slow down on. */
.surux-report-section.is-spine {
  border-left: 3px solid var(--surux-primary);
}

/* No card. Rarely the right answer: on a page that is otherwise carded this
   reads as unfinished, so it is for dense rows where a card per block would
   cost more than it explains. */
.surux-report-section.is-ruled {
  border-top: 2px solid color-mix(in srgb, var(--surux-primary) 70%, transparent);
  padding-top: .85rem;
}

.surux-report-section.is-ruled .surux-report-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

/* The map fills its card instead of setting the height of the row it is in. Its
   own 24rem floor left it hanging well below whatever it was paired with. */
.surux-report-section.is-map > .surux-card-body {
  min-height: 0;
}

.surux-map-report {
  flex: 1 1 auto;
  min-height: 15rem;
  border-radius: var(--surux-radius-md);
}

/* Embedded collection tabs: toolbar and footer stay put; only the table scrolls. */
.surux-collection-workspace {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--surux-section-gap);
}
.surux-collection-toolbar { display: flex; flex-direction: column; gap: var(--surux-section-gap); }
/* The search bar's own margin is for a page. Inside a collection the workspace gap is the 12px. */
.surux-collection-toolbar > .surux-toolbar {
  margin-bottom: 0;
}
/* What the collection amounts to - recency, totals - read before the rows. It sits with the
   toolbar on desktop so it stays in view while only the table scrolls. */
.surux-collection-summary { min-width: 0; }
.surux-collection-results { min-width: 0; }
/* A collection tab with nothing to search still needs a toolbar: the create action leads the
   line (top left) and the summary follows it. A non-create action keeps its own markup order.
   A long summary wraps its own text beside the action, which stays on the line and does not
   shrink. The search bar fills that row on the four tabs that have one, and these two had a
   section card header instead - which the collection contract rules out, because the tab
   label already names the collection. */
.surux-collection-inline-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
    min-width: 0;
}
.surux-collection-inline-toolbar > .surux-button {
    flex: 0 0 auto;
}
.surux-collection-inline-summary {
    margin: 0;
    min-width: 0;
    flex: 1 1 auto;
    color: var(--surux-muted, #6c757d);
    font-size: 0.875rem;
}
.surux-collection-footer .surux-list-footer { margin-top: 0; }
@media (min-width: 992px) {
    .surux-collection-tab.active:has(.surux-collection-workspace),
    .surux-collection-host,
    .surux-collection-workspace {
        box-sizing: border-box;
        height: 100%;
        min-height: 0;
        min-width: 0;
    }
    .surux-collection-host { overflow: visible; }
    /* Named opt-in. A host that must contain something other than the collection card uses
       surux-collection-host-clip. The plain host does not clip the card ring or its shadow. */
    .surux-collection-host.surux-collection-host-clip { overflow: hidden; }
    .surux-collection-tab.active:has(.surux-collection-workspace),
    .surux-collection-workspace { overflow: visible; }
    .surux-collection-workspace > .surux-collection-results { flex: 1; min-height: 0; overflow: auto; }
    .surux-collection-results:has(> .surux-card) { overflow: visible; }
    .surux-collection-workspace .surux-data-table-scroll { scrollbar-gutter: stable; }
    .surux-collection-results:has(> .surux-data-table-fill-height) .surux-data-table-scroll { scrollbar-gutter: auto; }
    .surux-collection-toolbar, .surux-collection-summary, .surux-collection-footer { flex: none; }
    /* Fill-height empty, no-match, loading and load-error states occupy the same
       results region as the table. Desktop only: phone and content-height surfaces
       keep the state's natural height. An optional description or action stays
       content-sized inside the region. */
    .surux-collection-workspace > .surux-collection-results:has(> .surux-collection-state) {
        display: flex;
        flex-direction: column;
    }
    .surux-collection-workspace > .surux-collection-results > .surux-collection-state {
        flex: 1 1 auto;
        min-height: 0;
        min-width: 0;
    }
    .surux-collection-workspace > .surux-collection-results > .surux-collection-state.surux-empty-state-shell {
        display: flex;
        flex-direction: column;
    }
    .surux-collection-workspace > .surux-collection-results > .surux-collection-state.surux-empty-state-shell > .surux-card-body {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }
    .surux-collection-workspace > .surux-collection-results > .surux-collection-state .surux-empty-state {
        flex: 1 1 auto;
        min-height: 0;
    }
}

@media (min-width: 992px) {
    .surux-standard-collection-demo { height: min(65vh, 40rem); min-height: 20rem; }
}

.surux-record-button { border: 0; background: transparent; padding: 0; text-align: start; font-family: inherit; font-size: inherit; line-height: inherit; cursor: pointer; }

/* Field and legacy switches keep their height beside taller field stacks.
   Option switches inherit their group's alignment: stretch across a column,
   but retain their natural width in an inline row. */
.surux-control-switch-field:not(.surux-option-switch) { align-self: flex-start; }
@media (min-width: 576px) {
  .surux-control-switch-align-sm { padding-top: calc(1.5em + .45rem); }
}
@media (min-width: 768px) {
  .surux-control-switch-align-md { padding-top: calc(1.5em + .45rem); }
}
@media (min-width: 992px) {
  .surux-control-switch-align-lg { padding-top: calc(1.5em + .45rem); }
}
@media (min-width: 1200px) {
  .surux-control-switch-align-xl { padding-top: calc(1.5em + .45rem); }
}
@media (min-width: 1400px) {
  .surux-control-switch-align-xxl { padding-top: calc(1.5em + .45rem); }
}

.surux-theme-preview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .55rem;
  padding: .75rem;
  margin-bottom: .35rem;
  border: 1px solid var(--surux-border);
  border-radius: var(--surux-radius-sm);
  background: var(--surux-surface);
  color: var(--surux-text);
  font-size: .78rem;
}
.surux-theme-preview-title { grid-column: 1 / -1; font-weight: 650; }
.surux-theme-preview-field { padding: .4rem; border: 1px solid var(--surux-primary); border-radius: .35rem; }
.surux-theme-preview-link { color: var(--surux-primary); text-decoration: underline; align-self: center; }
.surux-theme-preview-status { align-self: center; color: var(--surux-text); }
.surux-theme-palette-help { grid-column: 1 / -1; font-size: .75rem; margin: 0; color: var(--surux-text); }
[data-surux-theme-picker] [hidden] { display: none !important; }
[data-surux-theme-undo]:disabled { opacity: .55; cursor: default; }

.surux-theme-undo, .surux-theme-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 2.75rem;
  padding: .5rem .75rem;
  border: 1px solid var(--surux-border);
  border-radius: .5rem;
  background: var(--surux-surface-2);
  color: var(--surux-text);
  font-size: .8rem;
}
.surux-theme-close { width: 2.75rem; padding: .5rem; }
.surux-theme-undo:focus-visible, .surux-theme-close:focus-visible {
  outline: 2px solid var(--surux-primary);
  outline-offset: 2px;
}
.surux-theme-pane { display: grid; gap: 1.25rem; align-content: start; min-width: 0; }
.surux-theme-pane + .surux-theme-pane { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--surux-border); }
.surux-theme-pane .surux-theme-section { align-content: start; }
.surux-theme-style-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.surux-theme-style-options .surux-theme-section-title { grid-column: 1 / -1; }
.surux-theme-style-options .surux-theme-row { grid-template-columns: minmax(0, 1fr) 1rem; gap: .3rem; }
.surux-theme-style-options .surux-theme-row-icon { display: none; }
.surux-theme-preview-title { line-height: 1.5; }


/* Bootstrap's light placeholder ink is unsuitable for saved Night surfaces. */
.surux-input::placeholder {
  color: color-mix(in srgb, var(--surux-text) 80%, var(--surux-muted));
  opacity: 1;
}

/* Shared workflow change state: persistent and static, including reduced motion. */
.surux-workflow-changed {
  outline: 2px solid var(--surux-primary);
  outline-offset: -2px;
}
.surux-workflow-change-marker {
  display: inline-block;
  color: var(--surux-primary);
  font-size: .75rem;
  font-weight: 600;
}

.surux-rich-text-status:empty {
  min-height: 0;
  margin: 0;
}

/* Row spillovers retain their DOM owner but paint outside scroll containers. */
.surux-row-actions-menu > .surux-command-overflow-panel[popover],
.surux-action-toolbar .surux-command-overflow > .surux-command-overflow-panel[popover] {
  position: fixed;
  margin: 0;
  box-sizing: border-box;
  min-width: min(12rem, calc(100vw - 16px));
  max-width: calc(100vw - 16px);
}

.surux-page-title-copy::after {
  content: "\f0c5";
  font-family: "Font Awesome 7 Pro";
  font-weight: 400;
  font-size: .5em;
  margin-inline-start: .5em;
  opacity: 0;
}
.surux-page-title-copy:hover::after,
.surux-page-title-copy:focus-visible::after { opacity: 1; }
.surux-page-shell:has(> .surux-header-band) > .surux-page-content { padding-top: 0; }

/* The shell owns a content-height sequence in every result state and at every
   breakpoint. Search bars must not add their standalone margin to the gap. */
.surux-page-shell > .surux-page-content.surux-page-content-sections {
  display: flex;
  flex-direction: column;
  gap: var(--surux-section-gap);
}
.surux-page-content-sections > * { flex: 0 0 auto; }
.surux-page-content-sections > .surux-toolbar { margin-bottom: 0; }

@media (min-width: 992px) {
  /* Keep the page-content scroll owner and reserve the theme's shadow reach
     inside it, including when results are loading, empty or unavailable. */
  .surux-page-shell > .surux-page-content.surux-page-content-sections {
    padding-inline: max(.25rem, var(--surux-tab-panel-shadow-inline-room, 0px));
    padding-bottom: max(.25rem, var(--surux-tab-panel-shadow-room, 0px));
    scroll-padding-bottom: max(.25rem, var(--surux-tab-panel-shadow-room, 0px));
  }
  .surux-page-shell.surux-page-shell-has-actions > .surux-page-content.surux-page-content-sections {
    padding-bottom: max(var(--surux-command-bottom-gap), var(--surux-tab-panel-shadow-room, 0px));
    scroll-padding-bottom: max(var(--surux-command-bottom-gap), var(--surux-tab-panel-shadow-room, 0px));
  }
  /* Borrow the existing header gap for the first surface's upward shadow.
     The negative margin and equal padding leave its visible position intact. */
  .surux-page-shell:has(> .surux-header-band) > .surux-page-content.surux-page-content-sections {
    margin-top: calc(-1 * var(--surux-section-gap));
    padding-top: var(--surux-section-gap);
  }
}

/* The shared search row fits the 12px card padding without changing ordinary inputs. */
.surux-toolbar-search-control .surux-input { min-height:34px; padding-block:4px; }
.surux-toolbar-search-actions .surux-command-button-icon-only { width:32px !important; min-width:32px !important; height:32px !important; min-height:32px !important; }

/* Shared SuruXCodeEditor also works outside a split workspace. */
[data-surux-code-control] {
  --surux-template-editor-panel-bg: var(--surux-surface);
  --surux-template-editor-heading-bg: var(--surux-surface);
  --surux-template-editor-code-bg: var(--surux-surface);
  --surux-template-editor-gutter-bg: var(--surux-app-bg);
}
.surux-template-editor-pane > [data-surux-code-control] { flex: 1; border: 0; }
[data-surux-code-control] .surux-template-code-input { white-space: pre; overflow-wrap: normal; }

.surux-template-editor-workbench { container-type: inline-size; }
.surux-template-workbench-toolbar { flex-wrap: wrap; }
.surux-template-editor-workbench .surux-template-editor-code-area {
  display: grid;
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  height: 100%;
}
.surux-template-editor-workbench .surux-template-editor-pane {
  min-width: 0;
  min-height: 0;
  height: 100%;
}
.surux-template-editor-workbench .surux-template-editor-splitter { display: none; }
@container (min-width: 42rem) {
  .surux-template-editor-workbench .surux-template-editor-code-area { display: flex; }
  .surux-template-editor-workbench .surux-template-editor-splitter { display: inline-flex; }
}

/* TR-0000246. Audit is a page-growing list, including loading and empty states.
   Keep this in the shared owner so every editor gets the same scroll contract. */
.surux-page-shell:has(.surux-tab-panel.active [data-surux-activity-trail]) > .surux-page-content {
  overflow-x: hidden;
  overflow-y: auto;
  padding-bottom: var(--surux-command-bar-height);
  scroll-padding-bottom: var(--surux-command-bar-height);
}

.surux-page-shell:has(.surux-tab-panel.active [data-surux-activity-trail]) > .surux-tabs {
  overflow: visible;
}

.surux-page-shell:has(.surux-tab-panel.active [data-surux-activity-trail]) :is(.surux-tabs, .surux-tab-panels, .surux-tab-panel.active) {
  flex: 0 0 auto;
  height: auto;
  max-height: none;
  overflow: visible;
}

.surux-page-shell:has(> .surux-tabs .surux-tab-panel.active [data-surux-activity-trail]) {
  overflow-y: auto;
  padding-bottom: var(--surux-command-bar-height);
  scroll-padding-bottom: var(--surux-command-bar-height);
}

[data-surux-activity-context]:has(> [data-surux-activity-context-pair]) {
  display: grid;
}

[data-surux-activity-context-pair] {
  display: grid;
  grid-template-columns: minmax(8rem, 1fr) minmax(0, 3fr);
  gap: .5rem;
  overflow-wrap: anywhere;
}

/* The pager's compact-footer rule must not remove the command-bar reserve. */
.surux-page-shell.surux-page-shell-has-actions > .surux-page-content:has(> .surux-tabs > .surux-tab-panels .surux-tab-panel.active [data-surux-activity-trail]) {
  padding-bottom: var(--surux-command-bar-height);
  scroll-padding-bottom: var(--surux-command-bar-height);
}

/* Rich choice tiles. Standard tiles stay on surux.choices.css; these rules apply only when Size is Rich. */
[data-surux-choice-size="rich"].surux-choice-tiles {
  gap: 10px;
}
[data-surux-choice-size="rich"].surux-choice-tiles > button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-height: 168px;
  height: 100%;
  padding: 18px;
  border-radius: 1rem;
  border: 1px solid var(--surux-border);
  background: var(--surux-surface);
  color: var(--surux-text);
  text-align: center;
  box-shadow: 0 .25rem .75rem color-mix(in srgb, var(--surux-text) 12%, transparent);
}
[data-surux-choice-size="rich"].surux-choice-tiles > button .surux-choice-name {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
}
[data-surux-choice-size="rich"].surux-choice-tiles > button small {
  font-size: 13px;
  font-weight: 400;
  color: var(--surux-muted);
  white-space: normal;
}
[data-surux-choice-size="rich"] .surux-choice-rich-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
[data-surux-choice-size="rich"] .surux-choice-rich-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: var(--surux-radius-sm);
  background: color-mix(in srgb, var(--surux-muted) 12%, var(--surux-surface));
  color: var(--surux-text);
  font-size: 18px;
}
[data-surux-choice-size="rich"] .surux-choice-rich-radio {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 2px solid color-mix(in srgb, var(--surux-muted) 55%, var(--surux-border));
  background: var(--surux-surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
[data-surux-choice-size="rich"] .surux-choice-rich-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-self: stretch;
  gap: 6px;
  margin-top: auto;
}
[data-surux-choice-size="rich"] .surux-status-chip {
  min-height: 22px;
  padding: 0 .5rem;
  font-size: 11px;
  font-weight: 700;
}
[data-surux-choice-size="rich"][data-surux-choice-group]:not(.surux-segmented-control) > button[aria-checked="true"] {
  border: var(--surux-border-width-strong) solid var(--surux-primary);
  background: color-mix(in srgb, var(--surux-primary) 14%, var(--surux-surface));
  box-shadow: 0 .35rem 1rem rgba(var(--surux-primary-rgb), .28);
}
[data-surux-choice-size="rich"] > button[aria-checked="true"] .surux-choice-rich-icon {
  background: var(--surux-primary);
  color: var(--surux-primary-contrast);
}
[data-surux-choice-size="rich"] > button[aria-checked="true"] .surux-choice-rich-radio {
  border-color: var(--surux-primary);
  background: var(--surux-primary);
}
[data-surux-choice-size="rich"] > button[aria-checked="true"] .surux-choice-rich-radio::after {
  content: "";
  width: 5px;
  height: 9px;
  margin-top: -2px;
  border: solid var(--surux-primary-contrast);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
[data-surux-choice-size="rich"] > button[aria-checked="true"] .surux-status-chip {
  --surux-status-bg: rgba(var(--surux-primary-rgb), .12);
  --surux-status-border: rgba(var(--surux-primary-rgb), .4);
  --surux-status-color: var(--surux-primary);
}
[data-surux-choice-size="rich"][data-surux-choice-group] > button:disabled {
  opacity: 1;
  cursor: default;
  background: color-mix(in srgb, var(--surux-muted) 10%, var(--surux-surface));
  border: 1px dashed color-mix(in srgb, var(--surux-muted) 55%, var(--surux-border));
  box-shadow: none;
  color: var(--surux-muted);
}
[data-surux-choice-size="rich"] > button:disabled .surux-choice-rich-icon {
  background: color-mix(in srgb, var(--surux-muted) 14%, var(--surux-surface));
  color: var(--surux-muted);
}
[data-surux-choice-size="rich"][data-surux-choice-layout="row"].surux-choice-tiles {
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}
[data-surux-choice-size="rich"][data-surux-choice-layout="row"].surux-choice-tiles > button {
  flex-direction: row;
  align-items: center;
  min-height: 0;
  height: auto;
  gap: 12px;
  padding: 12px 16px;
  text-align: left;
}
[data-surux-choice-size="rich"][data-surux-choice-layout="row"] .surux-choice-rich-icon {
  width: 44px;
  height: 44px;
  flex-basis: 44px;
}
[data-surux-choice-size="rich"][data-surux-choice-layout="row"] .surux-choice-name {
  font-size: 16px;
}
[data-surux-choice-size="rich"][data-surux-choice-layout="row"] .surux-choice-rich-copy {
  flex: 1 1 auto;
}
[data-surux-choice-size="rich"][data-surux-choice-layout="row"] .surux-choice-rich-tags {
  align-self: auto;
  margin-top: 0;
  flex: 0 1 auto;
  justify-content: flex-end;
}
[data-surux-choice-size="rich"][data-surux-choice-layout="row"] .surux-choice-rich-radio {
  position: static;
  flex: 0 0 22px;
}
@media (prefers-reduced-transparency: reduce) {
  .surux-toast {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .surux-command-overflow-panel {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--surux-surface);
  }
  .surux-validation-overlay {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: color-mix(in srgb, var(--surux-warning-fill) 8%, var(--surux-surface));
  }
  .surux-version-update-card,
  #components-reconnect-modal .surux-reconnect-card,
  .surux-bulk-selection-bar,
  .surux-map-filter,
  .surux-map-drawer,
  .surux-map-marker-label {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--surux-surface);
  }
  #components-reconnect-modal,
  .surux-document-drop-overlay,
  .surux-contact-modal-backdrop {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgb(2, 6, 23);
  }
  .surux-command-bar {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: color-mix(in srgb, var(--surux-surface) 92%, #000);
  }
  .surux-modal-backdrop {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgb(2, 6, 23);
  }
}

/* Forced colours replace the checked fill but keep the tick image, so the fixed-ink tick vanished on Canvas.
   Keep the action fill and its matched mark for the checked column-filter box. */
@media (forced-colors: active) {
  .surux-column-filter-option input:checked {
    forced-color-adjust: none;
  }
}

/* Row selection and select-all mixed state also retain their matched fill and mark. */
@media (forced-colors: active) {
  .surux-row-select:checked,
  .surux-row-select:indeterminate {
    forced-color-adjust: none;
  }
  .surux-row-select[data-selection-state="mixed"] {
    forced-color-adjust: none;
  }
  .surux-data-table-scroll[data-surux-scrolled-inline] .surux-table > :is(thead, tbody, tfoot) > tr > .surux-row-control-column + :is(th, td):not([colspan]:not([colspan="1"])):not(.surux-column-wrap),
  .surux-data-table-scroll[data-surux-scrolled-inline] .surux-table > :is(thead, tbody, tfoot) > tr > .surux-row-control-column:has(+ :is([colspan]:not([colspan="1"]), .surux-column-wrap)),
  .surux-data-table-desktop > .surux-data-table-scroll[data-surux-scrolled-inline] > .surux-table:not(:has(> thead > tr > .surux-row-control-column)):not(:has(> tbody > tr > [rowspan]:not([rowspan="1"]))) > :is(thead, tbody, tfoot) > tr > :is(th, td):first-child:not([colspan]:not([colspan="1"])):not(.surux-column-wrap) {
    border-inline-end: 1px solid CanvasText;
  }
}

/* List standard 4.1.0: block metrics only; pinned horizontal offsets stay unchanged.
   Comfortable defaults live in surux.tokens.css. This attribute restates them when a list opts back in. */
[data-surux-list-spacing="comfortable"] {
  --surux-list-row-height: 48px;
  --surux-list-row-height-two-line: 60px;
  --surux-list-header-height: 40px;
  --surux-list-cell-padding-block: 4px;
}
[data-surux-list-spacing="compact"] {
  --surux-list-row-height: 35px;
  --surux-list-row-height-two-line: 46px;
  --surux-list-header-height: 34px;
  --surux-list-cell-padding-block: 2px;
}
:root,
[data-surux-list-rows="two"] {
  --surux-list-fold-column-display: none;
  --surux-list-fold-part-display: inline;
  --surux-list-fold-display: block;
  --surux-list-two-line: 1;
}
[data-surux-list-rows="one"] {
  --surux-list-fold-column-display: table-cell;
  --surux-list-fold-part-display: none;
  --surux-list-fold-display: none;
  --surux-list-two-line: 0;
}
[data-surux-list-view="fixed"] {
  --surux-list-row-height: 44px;
  --surux-list-row-height-two-line: 44px;
  --surux-list-header-height: 40px;
  --surux-list-cell-padding-block: 0px;
  --surux-list-fold-column-display: table-cell;
  --surux-list-fold-part-display: none;
  --surux-list-fold-display: none;
  --surux-list-two-line: 0;
}
[data-surux-mobile-mode] .surux-table > :is(thead, tbody, tfoot) > tr > .surux-column-fold {
  display: var(--surux-list-fold-column-display);
}
.surux-data-table-list .surux-row-control-column {
  --surux-icon-only-subtle-size: min(2.25rem, calc(var(--surux-list-row-height) - 2 * var(--surux-list-cell-padding-block, 0px) - 1px));
}
.surux-list-fold-identity {
  flex: 1 1 auto;
  min-width: 0;
}
.surux-list-fold {
  display: block;
  contain: inline-size;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--surux-list-fold-ink, var(--surux-muted));
  font-size: .8rem;
  font-weight: 400;
  line-height: 1.25;
}
.surux-list-fold-without-lead { display: var(--surux-list-fold-display); }
.surux-list-fold-part { display: var(--surux-list-fold-part-display); }
.surux-list-fold > * + *::before { content: "·" / ""; margin-inline: .35em; }
[data-surux-mobile-mode] .surux-table[data-surux-column-fold] > :is(tbody, tfoot) > tr > * {
  height: calc(var(--surux-list-row-height) + var(--surux-list-two-line) * (var(--surux-list-row-height-two-line) - var(--surux-list-row-height)));
}
/* Tokens follow the nearest mode, including nested lists and preview roots.
   data-surux-fold-edge is the last non-fold cell when every cell after it is folded. */
[data-surux-mobile-mode] .surux-table[data-surux-column-fold] > :is(thead, tbody, tfoot) > tr > :is(th, td)[data-surux-fold-edge] {
  padding-inline-end: calc(var(--surux-list-two-line) * var(--surux-list-edge-inset) + (1 - var(--surux-list-two-line)) * var(--surux-list-cell-padding-x));
  & .surux-column-resize-handle { right: 0; }
}
@media (max-width: 991.98px) {
  /* Pre-measurement fallback. A measured table stamps data-surux-list-rows-available. */
  [data-surux-list-density-rows]:not([data-surux-list-rows-available]) { display: none; }
}

/* Shared list catalogue surfaces and responsive tile composition. */
.surux-list-catalogue { display: contents; }
@media (min-width: 992px) {
    .surux-list-catalogue > * {
        margin-inline-end: calc(max(.25rem, var(--surux-list-shadow-inline-room, 0px)) - .25rem);
    }
    .surux-list-catalogue > :last-child {
        margin-block-end: calc(max(.25rem, var(--surux-list-shadow-bottom-room, 0px)) - .25rem);
    }
}
:where(.surux-list-catalogue) .surux-list-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(13.5rem, 20rem));
    justify-content: start;
    gap: .75rem;
    max-width: 62rem;
}

:where(.surux-list-catalogue) .surux-list-summary-card {
    min-width: 0;
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr);
    align-items: center;
    gap: .7rem;
    min-height: 4.2rem;
    padding: .6rem .72rem;
    border: 1px solid var(--surux-border);
    border-radius: var(--surux-list-plate-radius, .72rem);
    background: var(--surux-list-summary-bg, linear-gradient(140deg, rgba(var(--surux-primary-rgb), .07), transparent 52%), var(--surux-surface));
    box-shadow: var(--surux-list-summary-shadow, inset 0 1px 0 rgba(255, 255, 255, .035));
}

:where(.surux-list-catalogue) .surux-list-summary-card-toggle {
    width: 100%;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition:
        border-color var(--surux-transition),
        background-color var(--surux-transition),
        transform var(--surux-transition);
}

:where(.surux-list-catalogue) .surux-list-summary-card-toggle:hover {
    border-color: color-mix(in srgb, var(--surux-border) 55%, rgba(var(--surux-primary-rgb), .55));
}

:where(.surux-list-catalogue) .surux-list-summary-card-toggle:focus-visible {
    outline: 2px solid var(--surux-primary);
    outline-offset: 2px;
}

:where(.surux-list-catalogue) .surux-list-summary-card-toggle:active {
    transform: translateY(1px);
}

:where(.surux-list-catalogue) .surux-list-summary-card-toggle[aria-pressed="true"] {
    border-color: color-mix(in srgb, var(--surux-border) 48%, rgba(var(--surux-primary-rgb), .62));
    background:
        linear-gradient(140deg, rgba(var(--surux-primary-rgb), .14), transparent 58%),
        var(--surux-surface);
}

:where(.surux-list-catalogue) .surux-list-summary-card > span:first-child,
:where(.surux-list-catalogue) .surux-list-tile-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--surux-primary);
    background: color-mix(in srgb, rgba(var(--surux-primary-rgb), .14) 72%, var(--surux-surface-2));
    border: 1px solid color-mix(in srgb, var(--surux-border) 72%, rgba(var(--surux-primary-rgb), .3));
}

:where(.surux-list-catalogue) .surux-list-summary-card > span:first-child {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--surux-list-plate-radius, .58rem);
}

:where(.surux-list-catalogue) .surux-list-summary-card > span:last-child {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: .08rem .45rem;
}

:where(.surux-list-catalogue) .surux-list-summary-card > span:last-child > span {
    color: var(--surux-muted);
    font-size: .72rem;
    font-weight: 750;
    letter-spacing: .045em;
    text-transform: uppercase;
}

:where(.surux-list-catalogue) .surux-list-summary-card strong {
    color: var(--surux-text);
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1;
}

:where(.surux-list-catalogue) .surux-list-summary-card small {
    grid-column: 1 / -1;
    min-width: 0;
    color: var(--surux-muted);
    font-size: .7rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

:where(.surux-list-catalogue) .surux-list-panel-toggle:focus-visible {
    outline: 2px solid var(--surux-primary);
    outline-offset: 2px;
}

:where(.surux-list-catalogue) .surux-list-panel {
    box-shadow: var(--surux-list-panel-shadow, none);
    min-width: 0;
    overflow: var(--surux-list-panel-overflow, hidden);
    border: 1px solid var(--surux-border);
    border-radius: var(--surux-list-plate-radius, .72rem);
    background: var(--surux-surface);
}

:where(.surux-list-catalogue) .surux-list-panel-expanded {
    border-color: color-mix(in srgb, var(--surux-border) 62%, rgba(var(--surux-primary-rgb), .45));
}

:where(.surux-list-catalogue) .surux-list-panel-heading {
    margin: 0;
}

:where(.surux-list-catalogue) .surux-list-panel-toggle {
    border-radius: var(--surux-list-panel-heading-radius, 0);
    width: 100%;
    display: grid;
    grid-template-columns: .85rem 1.65rem minmax(0, auto) minmax(0, 1fr);
    align-items: center;
    gap: .5rem;
    min-height: 2.8rem;
    padding: .45rem .68rem;
    border: 0;
    color: var(--surux-text);
    background: color-mix(in srgb, var(--surux-surface) 88%, var(--surux-surface-2));
    font: inherit;
    text-align: left;
    cursor: pointer;
}

:where(.surux-list-catalogue) .surux-list-panel-toggle:hover {
    background: color-mix(in srgb, var(--surux-surface) 76%, var(--surux-surface-2));
}

:where(.surux-list-catalogue) .surux-list-panel-toggle[aria-expanded="true"] {
    border-radius: var(--surux-list-panel-heading-radius, 0) var(--surux-list-panel-heading-radius, 0) 0 0;
    border-bottom: 1px solid var(--surux-border);
    background:
        linear-gradient(90deg, rgba(var(--surux-primary-rgb), .08), transparent 38%),
        color-mix(in srgb, var(--surux-surface) 84%, var(--surux-surface-2));
}

:where(.surux-list-catalogue) .surux-list-panel-chevron {
    color: var(--surux-muted);
    font-size: .72rem;
    transition: transform var(--surux-transition);
}

:where(.surux-list-catalogue) .surux-list-panel-toggle[aria-expanded="true"] .surux-list-panel-chevron {
    transform: rotate(90deg);
    color: var(--surux-primary);
}

:where(.surux-list-catalogue) .surux-list-panel-icon {
    width: 1.65rem;
    height: 1.65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--surux-border) 70%, rgba(var(--surux-primary-rgb), .35));
    border-radius: .42rem;
    color: var(--surux-primary);
    background: color-mix(in srgb, rgba(var(--surux-primary-rgb), .13) 72%, var(--surux-surface-2));
    font-size: .82rem;
    line-height: 1;
}

:where(.surux-list-catalogue) .surux-list-panel-icon > i {
    display: block;
    max-width: 1em;
    line-height: 1;
}

:where(.surux-list-catalogue) .surux-list-panel-label {
    font-size: .8rem;
    font-weight: 850;
    letter-spacing: .045em;
    text-transform: uppercase;
}

:where(.surux-list-catalogue) .surux-list-panel-count {
    justify-self: start;
    padding: .16rem .48rem;
    border: 1px solid var(--surux-border);
    border-radius: 999px;
    color: var(--surux-muted);
    background: var(--surux-surface-2);
    font-size: .66rem;
    font-weight: 700;
}

:where(.surux-list-catalogue) .surux-list-grid {
    display: grid;
    padding: .65rem;
}

:where(.surux-list-catalogue) .surux-list-grid-tiles {
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: .6rem;
}

:where(.surux-list-catalogue) .surux-list-grid-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 0;
}

:where(.surux-list-catalogue) .surux-list-tile {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .55rem;
    padding: .72rem;
    border: 1px solid var(--surux-border);
    border-radius: var(--surux-list-plate-radius, .58rem);
    background: var(--surux-list-tile-bg, color-mix(in srgb, var(--surux-surface) 94%, var(--surux-surface-2)));
    box-shadow: var(--surux-list-tile-shadow, none);
}

:where(.surux-list-catalogue) .surux-list-tile-available {
    border-color: color-mix(in srgb, var(--surux-border) 78%, rgba(var(--surux-primary-rgb), .25));
}

:where(.surux-list-catalogue) .surux-list-tile-locked,
:where(.surux-list-catalogue) .surux-list-tile-planned {
    background: color-mix(in srgb, var(--surux-surface) 84%, var(--surux-surface-2));
}

:where(.surux-list-catalogue) .surux-list-tile-header {
    min-width: 0;
    display: grid;
    grid-template-columns: 2.1rem minmax(0, 1fr);
    align-items: start;
    gap: .58rem;
}

:where(.surux-list-catalogue) .surux-list-tile-icon {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: .5rem;
}

:where(.surux-list-catalogue) .surux-list-tile-locked .surux-list-tile-icon,
:where(.surux-list-catalogue) .surux-list-tile-planned .surux-list-tile-icon {
    color: var(--surux-muted);
    background: var(--surux-surface-2);
    border-color: var(--surux-border);
}

:where(.surux-list-catalogue) .surux-list-tile-heading,
:where(.surux-list-catalogue) .surux-list-tile-title-row {
    min-width: 0;
}

:where(.surux-list-catalogue) .surux-list-tile-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .45rem;
}

:where(.surux-list-catalogue) .surux-list-tile h3 {
    min-width: 0;
    margin: .08rem 0 0;
    color: var(--surux-text);
    font-size: .88rem;
    font-weight: 800;
    line-height: 1.25;
}

:where(.surux-list-catalogue) .surux-list-tile-heading p {
    display: -webkit-box;
    margin: .25rem 0 0;
    overflow: hidden;
    color: var(--surux-muted);
    font-size: .75rem;
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

:where(.surux-list-catalogue) .surux-list-status-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 1.25rem;
    padding: .14rem .4rem;
    border: 1px solid var(--surux-border);
    border-radius: 999px;
    color: var(--surux-muted);
    background: var(--surux-surface-2);
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .03em;
    line-height: 1;
    text-transform: uppercase;
}

:where(.surux-list-catalogue) .surux-list-status-available {
    color: var(--surux-primary);
    border-color: color-mix(in srgb, var(--surux-border) 62%, rgba(var(--surux-primary-rgb), .42));
    background: color-mix(in srgb, rgba(var(--surux-primary-rgb), .12) 70%, var(--surux-surface-2));
}

:where(.surux-list-catalogue) .surux-list-tile-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem .65rem;
    padding-top: .5rem;
    border-top: 1px solid var(--surux-border);
    color: var(--surux-muted);
    font-size: .7rem;
}

:where(.surux-list-catalogue) .surux-list-tile-meta span {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}

:where(.surux-list-catalogue) .surux-list-tile-footer {
    min-height: 1.8rem;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    margin-top: auto;
}

:where(.surux-list-catalogue) .surux-list-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .35rem;
}

:where(.surux-list-catalogue) .surux-list-state-note {
    color: var(--surux-muted);
    font-size: .72rem;
}

:where(.surux-list-catalogue) .surux-list-grid-list .surux-list-tile {
    display: grid;
    grid-template-columns: minmax(20rem, 48rem) minmax(12rem, 20rem) auto minmax(0, 1fr);
    align-items: center;
    gap: .75rem;
    min-height: 4rem;
    padding: .55rem .75rem;
    border: 0;
    border-bottom: 1px solid var(--surux-border);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

:where(.surux-list-catalogue) .surux-list-grid-list .surux-list-tile:last-child {
    border-bottom: 0;
}

:where(.surux-list-catalogue) .surux-list-grid-list .surux-list-tile-header {
    grid-template-columns: 1.9rem minmax(0, 1fr);
    align-items: center;
}

:where(.surux-list-catalogue) .surux-list-grid-list .surux-list-tile-icon {
    width: 1.9rem;
    height: 1.9rem;
}

:where(.surux-list-catalogue) .surux-list-grid-list .surux-list-tile-title-row {
    align-items: center;
}

:where(.surux-list-catalogue) .surux-list-grid-list .surux-list-tile-heading p {
    margin-top: .14rem;
    -webkit-line-clamp: 1;
}

:where(.surux-list-catalogue) .surux-list-grid-list .surux-list-tile-meta {
    padding-top: 0;
    border-top: 0;
}

:where(.surux-list-catalogue) .surux-list-grid-list .surux-list-tile-footer {
    min-height: 0;
    margin-top: 0;
    justify-self: start;
}

/* The toggles and chevrons animate on the shared transition; reduced motion keeps them still. */
@media (prefers-reduced-motion: reduce) {
    :where(.surux-list-catalogue) .surux-list-summary-card-toggle,
    :where(.surux-list-catalogue) .surux-list-panel-chevron {
        transition: none;
    }
}

@media (max-width: 1399.98px) {
    :where(.surux-list-catalogue) .surux-list-grid-list .surux-list-tile {
        grid-template-columns: minmax(20rem, 2fr) minmax(12rem, 1fr) auto;
    }
}

@media (max-width: 991.98px) {
    :where(.surux-list-catalogue) .surux-list-grid-list .surux-list-tile {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    :where(.surux-list-catalogue) .surux-list-grid-list .surux-list-tile-meta {
        display: none;
    }
}

@media (max-width: 767.98px) {
    :where(.surux-list-catalogue) .surux-list-summary-grid {
        grid-template-columns: repeat(3, minmax(10rem, 1fr));
        max-width: none;
    }
}

@media (max-width: 575.98px) {
    :where(.surux-list-catalogue) .surux-list-summary-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    :where(.surux-list-catalogue) .surux-list-grid-tiles {
        grid-template-columns: minmax(0, 1fr);
    }

    :where(.surux-list-catalogue) .surux-list-panel-toggle {
    border-radius: var(--surux-list-panel-heading-radius, 0);
        grid-template-columns: .85rem 1.65rem minmax(0, 1fr);
    }

    :where(.surux-list-catalogue) .surux-list-panel-count {
        grid-column: 3;
    }

    :where(.surux-list-catalogue) .surux-list-grid-list .surux-list-tile {
        grid-template-columns: minmax(0, 1fr);
    }

    :where(.surux-list-catalogue) .surux-list-grid-list .surux-list-tile-footer {
        justify-content: flex-start;
        padding-left: 2.48rem;
    }
}
/* S2 desktop composition. The top-layer wrapper is an anchor, not a second plate. */
.surux-row-menu-phone { display: grid; gap: .5rem; }
.surux-row-menu-desktop { display: none; }
.surux-row-actions-menu[data-surux-row-desktop] .surux-row-menu-desktop { display: block; }
.surux-row-actions-menu[data-surux-row-desktop] .surux-row-menu-phone { display: none; }
.surux-row-actions-menu[data-surux-row-desktop] > .surux-command-overflow-panel {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow: visible;
  min-width: 0;
  max-width: none;
  pointer-events: none;
}
/* Details paints this panel when it opens, before the toggle task writes
   coordinates. The shared anchor is below the trigger. Stay hidden until
   placement, then let the capsule and summary entrance start at that position.
   This beats the reduced-motion fade while the menu is still unplaced. */
.surux-row-actions-menu[data-surux-row-desktop][open]:not([data-surux-row-placed]):not([data-surux-command-overflow-inline]) > .surux-command-overflow-panel {
  visibility: hidden;
}
.surux-row-actions-menu[data-surux-row-desktop][open]:not([data-surux-row-placed]):not([data-surux-command-overflow-inline]) :is(.surux-row-capsule, .surux-row-summary) {
  animation: none;
}
.surux-row-capsule, .surux-row-summary {
  color: var(--surux-text);
  background: var(--surux-row-menu-surface);
  border: 1px solid var(--surux-row-menu-border);
  box-shadow: var(--surux-row-menu-shadow);
}
.surux-row-capsule {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  width: max-content;
  max-width: none;
  gap: .125rem;
  padding-block: 2px;
  padding-inline: .3125rem;
  border-radius: 999px;
  pointer-events: auto;
  animation: surux-row-capsule-in var(--surux-row-capsule-duration) var(--surux-row-ease) var(--surux-row-capsule-delay) both;
}
/* The capsule owns the raised surface; its slots keep the shared tone tokens. */
.surux-row-actions-menu[data-surux-row-desktop] .surux-row-capsule > :is(.surux-command-button, .surux-command-overflow-trigger),
.surux-row-actions-menu[data-surux-row-desktop] .surux-row-capsule > .surux-row-more > .surux-command-overflow-trigger {
  width: var(--surux-icon-only-subtle-size, 2.25rem);
  min-width: var(--surux-icon-only-subtle-size, 2.25rem);
  height: var(--surux-icon-only-subtle-size, 2.25rem);
  min-height: var(--surux-icon-only-subtle-size, 2.25rem);
  padding-block: 0;
  align-items: center;
  justify-content: center !important;
  box-shadow: none !important;
  background-image: none !important;
  background: var(--surux-button-bg) !important;
  border-color: var(--surux-button-border) !important;
  color: var(--surux-button-fg) !important;
}
.surux-row-actions-menu[data-surux-row-desktop] .surux-row-capsule :is(.surux-command-button, .surux-command-overflow-trigger):not(.surux-button-tone-warning, .surux-button-tone-destructive) {
  --surux-button-bg: transparent;
  --surux-button-border: transparent;
  --surux-button-fg: var(--surux-text);
}
/* Higher specificity than the resting slots and shared button focus reset.
   The ring sits just outside the slot. The capsule is in the top layer, so the row does not clip it. */
.surux-row-actions-menu[data-surux-row-desktop] .surux-row-capsule :is(.surux-command-button, .surux-command-overflow-trigger):focus-visible {
  outline: 2px solid var(--surux-list-focus-ring, var(--surux-primary)) !important;
  outline-offset: 1px !important;
}
.surux-row-capsule-divider { width: 1px; height: 1.5rem; background: var(--surux-row-menu-border); margin-inline: .25rem; }
.surux-row-summary {
  pointer-events: auto;
  position: absolute;
  inset-inline: 0;
  bottom: calc(100% + 4px);
  border-radius: var(--surux-radius-card);
  overflow: hidden;
  transform-origin: center bottom;
  animation: surux-row-strip-in var(--surux-row-strip-duration) var(--surux-row-hinge-ease) var(--surux-row-strip-delay) both;
}
/* Viewport cap only. The strip stays hinged on its bottom edge; it does not drop below the row. */
.surux-row-summary-capped { overflow-y: auto; overscroll-behavior: contain; }
.surux-row-summary-header { display: flex; align-items: center; gap: .6rem; padding: .65rem .9rem; background: var(--surux-row-menu-band); }
.surux-row-summary-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--surux-primary); }
.surux-row-summary-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; padding: .7rem .9rem; }
.surux-row-summary-fields > div { display: grid; gap: .25rem; min-width: 0; overflow-wrap: anywhere; }
.surux-row-summary-fields small { color: var(--surux-muted); font-size: .65rem; text-transform: uppercase; }
.surux-row-actions-menu[data-surux-row-desktop] .surux-row-summary-header {
  gap: var(--surux-row-summary-header-gap);
  padding: var(--surux-row-summary-header-padding);
}
.surux-row-actions-menu[data-surux-row-desktop] .surux-row-summary-fields { gap: 0; padding: 0; }
.surux-row-actions-menu[data-surux-row-desktop] .surux-row-summary-fields > div {
  gap: .125rem;
  padding: var(--surux-row-summary-cell-padding);
  border-inline-start: 1px solid var(--surux-row-menu-border);
  font-size: var(--surux-row-summary-value-size);
  line-height: 1.25;
}
.surux-row-actions-menu[data-surux-row-desktop] .surux-row-summary-fields > div:first-child { border-inline-start: 0; }
.surux-row-actions-menu[data-surux-row-desktop] .surux-row-summary-fields small {
  font-size: var(--surux-row-summary-label-size);
  font-weight: 600;
  letter-spacing: .05em;
  line-height: 1.2;
}
.surux-row-more > .surux-command-overflow-panel {
  background: var(--surux-row-menu-surface);
  border-color: var(--surux-row-menu-border);
  box-shadow: var(--surux-row-menu-shadow);
  transform-origin: center top;
  animation: surux-row-more-in var(--surux-row-more-duration) var(--surux-row-hinge-ease) both;
  pointer-events: auto;
}
.surux-row-capsule [hidden], .surux-row-more[hidden], .surux-row-more [hidden] { display: none !important; }
.surux-row-copy-separator { height: 1px; background: var(--surux-row-menu-border); }
.surux-row-copy-number, .surux-row-copy-link { gap: .6rem; text-align: start; }
.surux-row-copy-value { margin-inline-start: auto; color: var(--surux-muted); font-variant-numeric: tabular-nums; }
.surux-row-actions-menu[data-surux-row-desktop][open] > summary {
  animation: surux-row-press var(--surux-row-press-duration) var(--surux-row-ease);
}
.surux-row-actions-menu[open] > summary .surux-command-button-icon i { transform: rotate(180deg); }
.surux-row-actions-menu :is(.surux-row-more, .surux-row-sheet-more):not([open]) > summary .surux-command-button-icon i { transform: rotate(0deg); }
.surux-row-actions-menu :is(.surux-row-more, .surux-row-sheet-more)[open] > summary .surux-command-button-icon i { transform: rotate(180deg); }
.surux-row-actions-menu:is([data-surux-row-desktop], [data-surux-row-sheet])[open] > summary::after {
  content: '' !important; position: absolute; inset: 0; border-radius: inherit;
  display: block !important; opacity: 1; z-index: 0; background: none; filter: none; transform: none; transition: none;
  pointer-events: none;
  animation: surux-row-ring var(--surux-row-press-duration) var(--surux-row-ease) both;
}
.surux-table > tbody:has(.surux-row-actions-menu) > tr { transition: opacity var(--surux-row-dim-duration) var(--surux-row-ease), filter var(--surux-row-dim-duration) var(--surux-row-ease); }
.surux-table > tbody:has(.surux-row-actions-menu[data-surux-row-desktop][open]:not([data-surux-command-overflow-inline]):not([data-surux-row-closing])) > tr:not(:has(.surux-row-actions-menu[open]:not([data-surux-command-overflow-inline]))) {
  opacity: .4;
  filter: blur(1.2px) saturate(.6);
}
.surux-row-actions-menu[data-surux-row-closing] .surux-row-summary {
  animation: surux-row-strip-close var(--surux-row-strip-close-duration) var(--surux-row-hinge-ease) both;
}
.surux-row-actions-menu[data-surux-row-closing] .surux-row-capsule {
  animation: surux-row-capsule-close var(--surux-row-capsule-close-duration) var(--surux-row-ease) both;
  pointer-events: none;
}
/* Independent scale survives the shared button transform overrides. */
@keyframes surux-row-press { 0%,60%,100% { scale: 1; } 18% { scale: .86; } 42% { scale: 1.05; } }
@keyframes surux-row-ring { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--surux-primary) 55%, transparent); } to { box-shadow: 0 0 0 16px transparent; } }
@keyframes surux-row-capsule-in { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
@keyframes surux-row-strip-in { from { opacity: 0; transform: perspective(700px) rotateX(-80deg); } to { opacity: 1; transform: none; } }
@keyframes surux-row-more-in { from { opacity: 0; transform: perspective(700px) rotateX(75deg); } to { opacity: 1; transform: none; } }
@keyframes surux-row-strip-close { from { opacity: 1; transform: none; } to { opacity: 0; transform: perspective(700px) rotateX(-80deg); } }
@keyframes surux-row-capsule-close { from { opacity: 1; } to { opacity: 0; } }
@keyframes surux-row-fade-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .surux-row-actions-menu[data-surux-row-desktop][open] > summary,
  .surux-row-actions-menu[data-surux-row-desktop][open] > summary::after { animation: none; }
  .surux-row-capsule, .surux-row-summary, .surux-row-more > .surux-command-overflow-panel {
    animation: surux-row-fade-in var(--surux-row-fade-duration) linear both;
  }
  .surux-row-actions-menu[data-surux-row-closing] .surux-row-summary,
  .surux-row-actions-menu[data-surux-row-closing] .surux-row-capsule {
    animation: surux-row-capsule-close var(--surux-row-fade-duration) linear both;
  }
  .surux-table > tbody > tr { transition: none; }
}
:root[data-surux-contrast="high"] {
  --surux-row-menu-band: var(--surux-surface-base);
  --surux-row-menu-border: var(--surux-text);
}
@media (forced-colors: active) {
  .surux-row-capsule, .surux-row-summary, .surux-row-more > .surux-command-overflow-panel { color: CanvasText; background: Canvas; border-color: CanvasText; }
  .surux-row-summary-header { background: Canvas; }
  .surux-row-actions-menu[data-surux-row-desktop] .surux-row-capsule :is(.surux-command-button, .surux-command-overflow-trigger):focus-visible { outline-color: Highlight !important; }
  .surux-row-summary-dot, .surux-row-capsule-divider, .surux-row-copy-separator { background: CanvasText; }
}
/* Horizontal tab commands have a separate, shadow-safe column. The scrolling
   list remains a direct child for the shared tabs runtime. */
.surux-tabs-horizontal-actions,
.surux-page-shell > .surux-page-content > .surux-tabs.surux-tabs-horizontal-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  column-gap: .5rem;
  overflow: visible;
}
.surux-tabs-horizontal-actions > .surux-tab-list {
  min-width: 0;
  grid-column: 1;
}
.surux-tabs-horizontal-actions > .surux-tab-actions {
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: .25rem;
  padding: .2rem 1.5rem 1.5rem .5rem;
}
.surux-tabs-horizontal-actions > .surux-tab-panels {
  align-self: stretch;
  min-height: 0;
  grid-column: 1 / -1;
  min-width: 0;
}

/* Shared tab-action composition: retain navigation space on phones. */
@media (max-width: 767.98px) {
  .surux-tab-actions > .surux-command-button.surux-tab-action-mobile-icon {
    width: 46px !important;
    min-width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
    padding: 0 !important;
    gap: 0;
  }
  .surux-tab-actions > .surux-tab-action-mobile-icon .surux-command-button-text,
  .surux-tab-actions > .surux-tab-action-desktop:not([aria-pressed="true"]) {
    display: none;
  }
}

@media (min-width: 992px) {
  /* Reserve the forward shadow reach on the dashboard compositions inside the
     scrollport, keeping the shell gutter and the inline-start width intact. */
  .surux-dashboard-page > * {
    margin-inline-end: calc(max(.25rem, var(--surux-tab-panel-shadow-inline-room, 0px)) - .25rem);
  }
}

/* The gallery composes real controls inside a padded, scrolling sample document. */
.surux-design-sample {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .75rem;
  padding: 1rem;
  min-width: 0;
  justify-items: start;
}
.surux-design-sample > .surux-data-table-card {
  width: 100%;
}

@media (forced-colors: active) {
  /* Geometry is shared; design paint stays in the normal-colour rules. A path
     with d exists only while the parent has a visible children tray. */
  .surux-tab-list-hierarchy:has(> svg > path[d]) > svg {
    display: block;
    forced-color-adjust: none;
    fill: Canvas;
    stroke: CanvasText;
    stroke-width: 1px;
    filter: none;
  }
  .surux-tab-list-hierarchy > svg > path {
    filter: none;
  }
  .surux-tab-list-hierarchy:has(> svg > path[d]) > .surux-tab-sublist {
    forced-color-adjust: none;
    background: transparent;
    border-color: transparent;
    box-shadow: none;
  }
  .surux-tabs > .surux-tab-list-hierarchy:has(> svg > path[d]) > .surux-tab-button:is(.active, [aria-selected="true"]) {
    forced-color-adjust: none;
    background: transparent;
    border-color: transparent;
    border-bottom-width: 3px;
    color: CanvasText;
    box-shadow: none;
  }
  .surux-tabs > .surux-tab-list.surux-tab-list-hierarchy:has(> svg > path[d])::after {
    mask-image: linear-gradient(90deg, #000 0 var(--surux-tab-folder-gap-start, 0px), transparent var(--surux-tab-folder-gap-start, 0px) var(--surux-tab-folder-gap-end, 0px), #000 var(--surux-tab-folder-gap-end, 0px));
  }
  @media (max-width: 767.98px) {
    .surux-tabs > .surux-tab-list.surux-tab-list-hierarchy:has(> svg > path[d])::after {
      content: none;
    }
  }
}


.surux-design-sample .surux-row-control {
  display: inline-flex;
  align-items: center;
  gap: var(--surux-row-control-gap);
  inline-size: calc(var(--surux-row-control-select) + var(--surux-row-control-menu));
  max-inline-size: 100%;
}

.surux-design-sample .surux-row-control > .surux-row-actions-menu {
  min-width: 0;
  margin-inline-start: 0;
  justify-content: flex-start;
}

@media (min-width: 992px) {
  .surux-tabs-horizontal-actions,
  .surux-page-shell > .surux-page-content > .surux-tabs.surux-tabs-horizontal-actions {
    flex: 1 1 auto;
    min-height: 0;
    grid-template-rows: auto minmax(0, 1fr);
  }
  .surux-page-shell > .surux-page-content > .surux-tabs.surux-tabs-horizontal-actions > .surux-tab-panels {
    min-height: 0;
    overflow-y: auto;
  }
}

@media (max-width: 767.98px) {
  .surux-page-shell .surux-page-header .surux-page-title-row {
    flex-wrap: wrap;
  }
  .surux-page-shell .surux-page-header .surux-page-title-row h1,
  .surux-page-shell .surux-page-header .surux-page-title-row h1 > span {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}
/* Compact columns keep identifiers, amounts and dates intact; Wrap owns free text. */
.surux-table .surux-column-compact { white-space: nowrap; }

/* Desktop workspace commands retain Restore after a viewport rotation. */
@media (max-width: 991.98px) {
  .surux-tab-actions > .surux-tab-action-workspace-desktop:not([aria-pressed="true"]) {
    display: none;
  }
}

:where(.surux-list-catalogue) .surux-toolbar-heading { min-width: 0; }
:where(.surux-list-catalogue) .surux-toolbar-heading h2 { margin: 0; color: var(--surux-text); font-size: .9rem; font-weight: 800; }
:where(.surux-list-catalogue) .surux-toolbar-heading span { color: var(--surux-muted); font-size: .74rem; }

/* Named composition: row action sheet. Card geometry remains owned by the list. */
:is(html, [data-surux-preference-preview]) .surux-row-actions-menu[data-surux-row-sheet] > .surux-command-overflow-panel[popover] {
  position: fixed;
  inset: auto 0 0;
  margin: 0;
  width: 100%;
  min-width: 0;
  max-width: none;
  max-height: 85dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: .75rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
  border: 1px solid var(--surux-row-menu-border);
  border-radius: var(--surux-radius-lg, 1rem) var(--surux-radius-lg, 1rem) 0 0;
  background: var(--surux-row-menu-surface);
  color: var(--surux-text);
  box-shadow: var(--surux-row-menu-shadow);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  animation: surux-row-sheet-open var(--surux-row-sheet-open-duration) var(--surux-row-sheet-ease) both;
}
:is(html, [data-surux-preference-preview]) .surux-row-actions-menu[data-surux-row-sheet] > .surux-command-overflow-panel[popover]::backdrop {
  background: var(--surux-row-sheet-backdrop, rgba(0, 0, 0, .32));
  pointer-events: auto;
  animation: surux-row-fade-in var(--surux-row-sheet-backdrop-duration) linear both;
}
.surux-row-sheet-handle {
  width: 2.5rem;
  height: .25rem;
  margin: 0 auto .5rem;
  border-radius: 999px;
  background: var(--surux-row-sheet-handle);
  touch-action: none;
}
.surux-row-sheet-summary {
  border: 1px solid var(--surux-row-menu-border);
  border-radius: var(--surux-radius-md, .75rem);
  overflow: hidden;
  touch-action: none;
  animation: surux-row-fade-in var(--surux-row-sheet-open-duration) linear var(--surux-row-sheet-summary-delay) both;
}
.surux-row-sheet-summary .surux-row-summary-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.surux-row-sheet-actions, .surux-row-sheet-more-actions, .surux-row-sheet-more > .surux-command-overflow-in-place { display: grid; gap: .5rem; }
.surux-row-actions-menu[data-surux-row-sheet] .surux-row-sheet .surux-command-button {
  min-height: 3rem;
  width: 100%;
  justify-content: flex-start;
  gap: .75rem;
  white-space: normal;
  text-align: start;
}
.surux-row-actions-menu[data-surux-row-sheet] .surux-row-sheet-more > summary { min-height: 3rem !important; list-style: none; cursor: pointer; }
.surux-row-sheet-more > summary::-webkit-details-marker { display: none; }
.surux-row-sheet-more[open] > summary { margin-bottom: .5rem; }
.surux-row-sheet-divider { height: 1px; background: var(--surux-row-menu-border); margin-block: .25rem; }
.surux-row-actions-menu[data-surux-row-sheet][open] > summary {
  animation: surux-row-press var(--surux-row-press-duration) var(--surux-row-ease) both;
}

*:has(> .surux-mobile-list-item .surux-row-actions-menu[data-surux-row-sheet][open]) > .surux-mobile-list-item:not(:has(.surux-row-actions-menu[open]:not([data-surux-command-overflow-inline]))) {
  opacity: .4;
  filter: blur(1.2px) saturate(.6);
  transition: opacity var(--surux-row-dim-duration), filter var(--surux-row-dim-duration);
}
:is(html, [data-surux-preference-preview]) .surux-row-actions-menu[data-surux-row-sheet][data-surux-row-closing] > .surux-command-overflow-panel[popover] {
  animation: surux-row-sheet-close var(--surux-row-sheet-close-duration) var(--surux-row-sheet-ease) both;
}
:is(html, [data-surux-preference-preview]) .surux-row-actions-menu[data-surux-row-sheet][data-surux-row-closing] > .surux-command-overflow-panel[popover]::backdrop {
  animation: surux-row-capsule-close var(--surux-row-sheet-close-duration) linear both;
}
@keyframes surux-row-sheet-open { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes surux-row-sheet-close { from { transform: translateY(0); } to { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) {
  :is(html, [data-surux-preference-preview]) .surux-row-actions-menu[data-surux-row-sheet] > .surux-command-overflow-panel[popover] {
    animation: surux-row-fade-in var(--surux-row-sheet-open-duration) linear both;
  }
  :is(html, [data-surux-preference-preview]) .surux-row-actions-menu[data-surux-row-sheet][data-surux-row-closing] > .surux-command-overflow-panel[popover] {
    animation: surux-row-capsule-close var(--surux-row-sheet-close-duration) linear both;
  }
  .surux-row-actions-menu[data-surux-row-sheet][open] > summary,
  .surux-row-actions-menu[data-surux-row-sheet][open] > summary::after { animation: none; }
  *:has(> .surux-mobile-list-item .surux-row-actions-menu[data-surux-row-sheet][open]) > .surux-mobile-list-item { transition: none; }
}

/* Cyberpunk header-band sweep. The stops live here because a design sheet's contract treats
   keyframe selectors as ordinary selectors. Only the cyberpunk sheet names this animation. */
@keyframes surux-cyberpunk-scan {
  from { background-position: 0 100%; }
  to { background-position: 0 0; }
}
@media (forced-colors: active) {
  :is(html, [data-surux-preference-preview]) .surux-row-actions-menu[data-surux-row-sheet] > .surux-command-overflow-panel[popover] { background: Canvas; color: CanvasText; border-color: CanvasText; }
  .surux-row-sheet-handle, .surux-row-sheet-divider { background: CanvasText; }
}

/* Desk breadcrumb. Tokens are the SPEC61 2.1 production map. The fork sits just above the
   command bar (z-index: 55 on .surux-command-bar) and below dialogs. */
nav.surux-breadcrumb-nav {
  --surux-breadcrumb-meta: color-mix(in srgb, var(--surux-text) 89%, var(--surux-app-bg));
  --surux-breadcrumb-line: color-mix(in srgb, var(--surux-muted) 80%, transparent);
  --surux-breadcrumb-lit: var(--surux-primary);
  --surux-breadcrumb-fill: var(--surux-primary-action-bg);
  --surux-breadcrumb-on-fill: var(--surux-primary-contrast);
  --surux-breadcrumb-tint: color-mix(in srgb, var(--surux-primary) 8%, var(--surux-surface));
  --surux-breadcrumb-tint-strong: color-mix(in srgb, var(--surux-primary) 11%, var(--surux-surface));
  --surux-breadcrumb-warn-fill: var(--surux-warning-fill);
  container-type: inline-size;
  container-name: surux-breadcrumb;
  position: relative;
  display: block;
  min-height: 28px;
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--surux-text);
}
.surux-breadcrumb-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; row-gap: 6px; min-height: 28px; }
.surux-breadcrumb-trail { display: inline-flex; flex-wrap: wrap; gap: 0; margin: 0; padding: 0; list-style: none; }
.surux-breadcrumb-trail-item { display: inline-flex; align-items: center; min-height: 28px; }
.surux-breadcrumb-crumb { border: 0; background: none; color: var(--surux-breadcrumb-meta); font: inherit; font-weight: 500; padding: 0 2px; text-decoration: none; }
.surux-breadcrumb-crumb .fa-house { font-size: 1em; line-height: 1; color: currentColor; }
.surux-breadcrumb-crumb:hover, .surux-breadcrumb-crumb:focus-visible { color: var(--surux-text); text-decoration: underline; text-underline-offset: 3px; }
.surux-breadcrumb-sep { font-size: 10px; line-height: 1; margin: 0 6px; color: var(--surux-muted); opacity: .7; }
.surux-breadcrumb-fold { display: none; }
.surux-breadcrumb-pill { display: inline-flex; align-items: stretch; height: 28px; border: 1px solid color-mix(in srgb, var(--surux-primary) 35%, var(--surux-border)); border-radius: 999px; background: var(--surux-surface); max-width: 100%; }
.is-bypass .surux-breadcrumb-pill { border-style: dashed; }
.surux-breadcrumb-back { display: inline-flex; align-items: center; gap: 8px; min-width: 0; padding: 0 12px 0 4px; color: var(--surux-text); text-decoration: none; }
.surux-breadcrumb-knob { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: 1.5px solid var(--surux-breadcrumb-lit); border-radius: 50%; color: var(--surux-breadcrumb-lit); font-size: 12px; }
.surux-breadcrumb-back:hover .surux-breadcrumb-knob, .surux-breadcrumb-back:focus-visible .surux-breadcrumb-knob { background: var(--surux-breadcrumb-fill); color: var(--surux-breadcrumb-on-fill); border-color: transparent; }
.surux-breadcrumb-back:hover { background: var(--surux-breadcrumb-tint); }
.surux-breadcrumb-name { font-size: 13px; font-weight: 600; line-height: 1; }
.surux-breadcrumb-divider { width: 1px; height: 12px; background: var(--surux-border); }
.surux-breadcrumb-state { display: inline-flex; align-items: center; gap: 5px; color: var(--surux-breadcrumb-meta); font-size: 12px; font-weight: 500; }
.surux-breadcrumb-state.surux-status-tone-warning, .surux-breadcrumb-state.surux-status-tone-danger, .surux-breadcrumb-state.surux-status-tone-success { color: var(--surux-status-color); }
.surux-breadcrumb-state i { color: var(--surux-breadcrumb-lit); font-size: 11px; }
.surux-breadcrumb-state-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--surux-breadcrumb-state-mark); }
.surux-breadcrumb-caret { width: 26px; border: 0; border-left: 1px solid color-mix(in srgb, var(--surux-primary) 25%, var(--surux-border)); border-radius: 0 999px 999px 0; background: transparent; color: var(--surux-breadcrumb-meta); }
.surux-breadcrumb-caret[aria-expanded="true"] { background: var(--surux-breadcrumb-tint-strong); }
.surux-breadcrumb-caret[aria-expanded="true"] i { transform: rotate(180deg); }
.surux-breadcrumb-record, .surux-breadcrumb-unsaved { min-height: 28px; }
.surux-breadcrumb-unsaved { color: var(--surux-warning); }
.surux-breadcrumb-skeleton { display: inline-block; border-radius: 999px; background: var(--surux-breadcrumb-line); }
.surux-breadcrumb-fork { position: absolute; z-index: 56; top: calc(100% + 8px); left: 0; width: 480px; max-width: 100cqw; max-height: 100vh; max-height: 100dvh; overflow: auto; padding: 8px; border: 1px solid var(--surux-border); border-radius: 14px; background: var(--surux-surface); box-shadow: var(--surux-overflow-panel-shadow); }
/* The band keeps isolation for its texture, so an open fork is trapped under a later
   .surux-tab-list (z-index 30). Raise the band with the shell layer, not a new number. */
.surux-header-band:has(.surux-breadcrumb-fork:not([hidden])) { z-index: var(--surux-shell-layer-band); }
.surux-breadcrumb-fork a { color: var(--surux-text); }
.surux-breadcrumb-lanes { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; padding: 22px 12px 8px; }
/* arrive-list: no route stops, so the way up spans both columns and the empty route lane takes none. */
.surux-breadcrumb-lanes:not(:has([data-surux-route-lane] > li)) { grid-template-columns: minmax(0, 1fr); }
.surux-breadcrumb-lanes:not(:has([data-surux-route-lane] > li)) .surux-breadcrumb-lane-route { display: none; }
.surux-breadcrumb-lanes:not(:has([data-surux-route-lane] > li)) .surux-breadcrumb-lane-up { grid-column: 1 / -1; }
.surux-breadcrumb-fork:has([data-surux-route-lane] > li) .surux-breadcrumb-fork-sub { display: none; }
.surux-breadcrumb-lanes p, .surux-breadcrumb-fork-sub, .surux-breadcrumb-fork-footer { color: var(--surux-breadcrumb-meta); font-size: 11.5px; }
.surux-breadcrumb-fork-sub { margin: 0; padding: 0 12px 4px 46px; }
.surux-breadcrumb-wires { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.surux-breadcrumb-fork > :not(.surux-breadcrumb-wires) { position: relative; z-index: 1; }
.surux-breadcrumb-wires path { fill: none; stroke: var(--surux-breadcrumb-line); stroke-width: 1.5; }
.surux-breadcrumb-w-route { stroke-dasharray: 4 3; }
.surux-breadcrumb-w-node { fill: var(--surux-surface); stroke: var(--surux-primary); stroke-width: 2; }
.surux-breadcrumb-fork.is-lit-route .surux-breadcrumb-w-route,
.surux-breadcrumb-fork.is-lit-up .surux-breadcrumb-w-up { stroke: var(--surux-breadcrumb-lit); }
.surux-breadcrumb-fork-junction { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px; color: inherit; text-decoration: none; }
a.surux-breadcrumb-fork-junction:hover, a.surux-breadcrumb-fork-junction:focus-visible { background: var(--surux-breadcrumb-tint-strong); }
.surux-breadcrumb-jknob { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--surux-breadcrumb-fill); color: var(--surux-breadcrumb-on-fill); font-size: 12px; }
.surux-breadcrumb-here-dot { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--surux-primary); }
.surux-breadcrumb-jtext { display: flex; flex-direction: row; align-items: baseline; flex-wrap: wrap; min-width: 0; flex: 1; }
.surux-breadcrumb-jname { font-size: 13.5px; font-weight: 600; line-height: 1.2; }
.surux-breadcrumb-jstate { display: inline-flex; align-items: center; gap: 5px; color: var(--surux-breadcrumb-meta); font-size: 11.5px; font-weight: 500; }
.surux-breadcrumb-jstate:not(:empty)::before { content: "·"; margin-inline: 0.4em; }
.surux-breadcrumb-pos { color: var(--surux-breadcrumb-meta); font-size: 11.5px; font-weight: 500; }
.surux-breadcrumb-jright { margin-inline-start: auto; color: var(--surux-breadcrumb-meta); font-size: 11.5px; white-space: nowrap; }
.surux-breadcrumb-kbd { margin-inline-start: 6px; padding: 1px 4px; border: 1px solid var(--surux-border); border-radius: 4px; background: var(--surux-surface-2); color: var(--surux-text); font-family: var(--bs-font-monospace), ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 11px; font-weight: 600; }
.surux-breadcrumb-lane-head { display: flex; align-items: center; gap: 6px; min-height: 24px; margin: 0; padding-left: 36px; font-size: 11.5px; font-weight: 600; }
.surux-breadcrumb-lane-mark { width: 14px; height: 0; border-top: 1.5px dashed var(--surux-primary); }
.surux-breadcrumb-lane-mark-solid { border-top-style: solid; border-top-color: var(--surux-text); }
.surux-breadcrumb-opened { margin-inline-start: auto; font-size: 11px; font-weight: 500; }
.surux-breadcrumb-lane ol { margin: 0; padding: 0; list-style: none; }
.surux-breadcrumb-lane li { display: flex; align-items: center; gap: 8px; }
.surux-breadcrumb-lane li .surux-breadcrumb-stop { flex: 1; }
.surux-breadcrumb-stop { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 4px 8px 4px 2px; border: 0; border-radius: 10px; background: transparent; color: var(--surux-text); font: inherit; text-align: start; text-decoration: none; width: 100%; }
.surux-breadcrumb-stop:hover { background: var(--surux-breadcrumb-tint); }
.surux-breadcrumb-stop:focus-visible, .surux-breadcrumb-stop.is-hot { background: var(--surux-breadcrumb-tint-strong); }
.surux-breadcrumb-stop.is-hot { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--surux-primary) 55%, transparent); }
.surux-breadcrumb-dot { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex: none; border: 1.5px solid var(--surux-breadcrumb-line); border-radius: 50%; color: var(--surux-primary); font-size: 13px; }
.surux-breadcrumb-dot i { font-size: 13px; line-height: 1; }
.surux-breadcrumb-lane-route .surux-breadcrumb-dot { border-style: dashed; }
.surux-breadcrumb-stop:focus-visible .surux-breadcrumb-dot, .surux-breadcrumb-stop.is-hot .surux-breadcrumb-dot { background: var(--surux-breadcrumb-fill); color: var(--surux-breadcrumb-on-fill); border-style: solid; border-color: var(--surux-breadcrumb-fill); }
.surux-breadcrumb-stop-copy { display: flex; flex-direction: column; min-width: 0; }
.surux-breadcrumb-stop-name { font-size: 13px; font-weight: 600; }
.surux-breadcrumb-stop-meta { color: var(--surux-breadcrumb-meta); font-size: 11.5px; }
.surux-breadcrumb-stop-badge, .surux-breadcrumb-time, .surux-breadcrumb-readout-badge { font-family: var(--bs-font-monospace), ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.surux-breadcrumb-time { margin-inline-start: auto; color: var(--surux-text); font-size: 11.5px; }
.surux-breadcrumb-stop-badge { margin-inline-start: 6px; padding: 1px 5px; border: 1px solid var(--surux-border); border-radius: 4px; background: var(--surux-surface-2); font-size: 11px; font-weight: 600; }
.surux-breadcrumb-earlier { min-height: 32px; padding: 0 8px; border: 0; background: transparent; color: var(--surux-breadcrumb-meta); font-size: 12px; }
.surux-breadcrumb-fork-footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px; min-height: 32px; margin: 0; padding: 6px 12px; border-top: 1px solid var(--surux-border); }
.surux-breadcrumb-fork-footer b { color: var(--surux-text); font-weight: 600; }
.surux-breadcrumb-keys { font-size: 11.5px; }
a.bc-81-from.surux-breadcrumb-readout { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 6px; border-radius: 8px; color: var(--surux-text); font-family: inherit; font-size: 12.5px; font-weight: 400; text-decoration: none; }
.surux-breadcrumb-readout[hidden] { display: none; }
.surux-breadcrumb-fork { transition: opacity var(--surux-feedback-duration) ease-out, transform var(--surux-feedback-duration) var(--surux-ease-out); }
@container surux-breadcrumb (max-width: 759px) {
  .surux-breadcrumb-readout-live { display: none; }
}
@container surux-breadcrumb (max-width: 539px) {
  .surux-breadcrumb-readout-badge { display: none; }
}
@container surux-breadcrumb (max-width: 459px) {
  .surux-breadcrumb-readout { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .surux-breadcrumb-caret[aria-expanded="false"]::after { content: ""; display: block; width: 10px; margin: 3px auto 0; border-top: 2px dashed var(--surux-primary); }
}
@container surux-breadcrumb (max-width: 859px) {
  nav.surux-breadcrumb-nav:not(.is-cold) .surux-breadcrumb-trail-item.is-foldable { display: none; }
  nav.surux-breadcrumb-nav:not(.is-cold) .surux-breadcrumb-fold { display: inline-flex; }
}
@media (hover: none) and (pointer: coarse) {
  .surux-breadcrumb-back, .surux-breadcrumb-caret, .surux-breadcrumb-crumb { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .surux-breadcrumb-caret i, .surux-breadcrumb-fork, .surux-breadcrumb-wires path, .surux-breadcrumb-readout { transition: none; }
}
@media (forced-colors: active) {
  .surux-breadcrumb-knob, .surux-breadcrumb-jknob { border: 2px solid transparent; }
  .surux-breadcrumb-caret[aria-expanded="true"],
  .surux-breadcrumb-stop:hover,
  .surux-breadcrumb-stop.is-hot { outline: 2px solid Highlight; outline-offset: -2px; }
  .surux-breadcrumb-state-dot { background: transparent; border: 3.5px solid CanvasText; }
  .surux-breadcrumb-stop:focus-visible .surux-breadcrumb-dot,
  .surux-breadcrumb-stop.is-hot .surux-breadcrumb-dot { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  .surux-breadcrumb-wires path { stroke: CanvasText; }
  .surux-breadcrumb-w-route { stroke-dasharray: 4 3; }
}

/* The title row has no plate. Crumbs use the band foreground, with a small shadow on the band colour. */
.surux-header-band :is(.surux-breadcrumb-back, .surux-breadcrumb-crumb, .surux-breadcrumb-name, .surux-breadcrumb-state:not(.surux-status-tone-warning, .surux-status-tone-danger, .surux-status-tone-success)) {
  color: var(--surux-band-fg, var(--surux-text));
  text-shadow: 0 1px 2px var(--surux-band-shadow);
}