/* AUTO-GENERATED by the SafetyClerk Design System - build-css.mjs — DO NOT EDIT */

/* ── styles/sc-access-control-card.css ── */
/* ScAccessControlCard — async Access Control dashboard card (Figma 251:6550). */

:host {
  /* Shadow on the host so the inner panel can use overflow:hidden without clipping it. */
  box-shadow: 0 0 4px rgb(0 0 0 / 0.25);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  /*
   * Refuse flex-shrink from Overview height locks. (min-height:min-content on :host
   * resolves to 0px in Chromium, so flex-shrink:0 is the reliable guard.)
   */
  flex-shrink: 0;
  min-width: 0;
  width: 100%;
}

.sc-access-control-card {
  background: rgb(255 255 255 / 0.8);
  border-radius: 10px;
  box-sizing: border-box;
  color: var(--sc-brand-blue, #0c0a3e);
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  font-family: var(--sc-font-family-body);
  gap: 10px;
  overflow: hidden;
  padding: 10px;
  width: 100%;
}

.sc-access-control-card__header {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  min-width: 0;
  width: 100%;
}

.sc-access-control-card__header-link {
  color: inherit;
  cursor: pointer;
  text-decoration: none;
}

.sc-access-control-card__header-link:hover .sc-access-control-card__title,
.sc-access-control-card__header-link:focus-visible .sc-access-control-card__title {
  text-decoration: underline;
}

.sc-access-control-card__header-link:hover .sc-access-control-card__open,
.sc-access-control-card__header-link:focus-visible .sc-access-control-card__open {
  background: rgb(12 10 62 / 0.18);
}

.sc-access-control-card__header-link:focus-visible {
  border-radius: 2px;
  outline: 2px solid rgb(12 10 62 / 0.35);
  outline-offset: 2px;
}

.sc-access-control-card__title {
  font-family: var(--sc-font-family-heading, var(--sc-font-family-body));
  font-size: 18px;
  font-weight: var(--sc-font-weight-medium, 500);
  letter-spacing: 0;
  line-height: 1.2;
  margin: 0;
  min-width: 0;
  text-transform: uppercase;
}

.sc-access-control-card__section-title-link {
  color: inherit;
  text-decoration: none;
}

.sc-access-control-card__section-title-link:hover,
.sc-access-control-card__section-title-link:focus-visible {
  color: inherit;
  text-decoration: underline;
}

.sc-access-control-card__section-title-link:focus-visible,
.sc-access-control-card__panel-link:focus-visible {
  border-radius: 2px;
  outline: 2px solid rgb(12 10 62 / 0.35);
  outline-offset: 2px;
}

.sc-access-control-card__panel-link {
  color: inherit;
  text-decoration: none;
  transition: filter 0.15s ease;
}

.sc-access-control-card__panel-link:hover,
.sc-access-control-card__panel-link:focus-visible {
  color: inherit;
  filter: brightness(0.97);
  text-decoration: none;
}

/* Decorative circular chevron inside the header link. */
.sc-access-control-card__open {
  --sc-icon-color: var(--sc-brand-blue, #0c0a3e);

  align-items: center;
  background: rgb(12 10 62 / 0.1);
  border-radius: 50%;
  color: var(--sc-brand-blue, #0c0a3e);
  display: inline-flex;
  flex: 0 0 auto;
  height: 30px;
  justify-content: center;
  transition: background-color 0.15s ease;
  width: 30px;
}

.sc-access-control-card__open sc-icons {
  height: 8px;
  width: 5px;
}

.sc-access-control-card__open-icon {
  display: block;
  transform: rotate(180deg);
}

/* Loading placeholder shaped like the sc-date-nav pill it stands in for. */
.sc-access-control-card__date-pill {
  align-items: center;
  background: rgb(204 229 224 / 0.5);
  border-radius: 14px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  min-height: 26px;
  min-width: 0;
  padding: 2px 10px 2px 6px;
}

.sc-access-control-card__time-label {
  color: var(--sc-brand-blue, #0c0a3e);
  font-size: 16px;
  font-weight: var(--sc-font-weight-regular, 400);
  line-height: normal;
  opacity: 0.7;
  white-space: nowrap;
}

.sc-access-control-card__section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.sc-access-control-card__section-title {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
  font-weight: var(--sc-font-weight-semibold, 600);
  gap: 6px;
  line-height: 1.2;
  margin: 0;
  min-width: 0;
}

.sc-access-control-card__companies-heading {
  justify-content: space-between;
  width: 100%;
}

.sc-access-control-card__companies-heading-label {
  min-width: 0;
}

.sc-access-control-card__companies-heading-meta {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 8px;
}

.sc-access-control-card__companies-fraction {
  font-variant-numeric: tabular-nums;
  font-weight: var(--sc-font-weight-regular, 400);
  white-space: nowrap;
}

.sc-access-control-card__companies-show-all {
  color: inherit;
  font-weight: var(--sc-font-weight-regular, 400);
  text-decoration: underline;
  white-space: nowrap;
}

.sc-access-control-card__companies-show-all:hover,
.sc-access-control-card__companies-show-all:focus-visible {
  color: inherit;
}

.sc-access-control-card__companies-show-all:focus-visible {
  border-radius: 2px;
  outline: 2px solid rgb(12 10 62 / 0.35);
  outline-offset: 2px;
}

.sc-access-control-card__jobsite {
  display: flex;
  gap: 5px;
  min-width: 0;
}

.sc-access-control-card__workforce {
  background: rgb(204 229 224 / 0.5);
  border-radius: 10px;
  box-sizing: border-box;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 8px;
  justify-content: space-between;
  min-height: 71px;
  min-width: 0;
  padding: 7px;
}

.sc-access-control-card__workforce-heading {
  align-items: center;
  display: flex;
  gap: 5px;
  min-width: 0;
}

.sc-access-control-card__workforce-icon {
  flex: 0 0 auto;
  font-size: 16px;
  line-height: 1;
}

.sc-access-control-card__workforce-label {
  font-size: 12px;
  font-weight: var(--sc-font-weight-medium, 500);
  line-height: 1.2;
  min-width: 0;
  text-transform: uppercase;
}

.sc-access-control-card__compliance-bar {
  display: flex;
  min-height: 31px;
  min-width: 0;
  width: 100%;
}

.sc-access-control-card__compliance-segment {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 4px 6px;
  text-align: center;
  text-transform: uppercase;
}

.sc-access-control-card__compliance-segment--compliant {
  background: #dbfec2;
  border-radius: 4px 0 0 4px;
}

.sc-access-control-card__compliance-segment--not-compliant {
  background: rgb(192 19 61 / 0.15);
  border-radius: 0 4px 4px 0;
}

.sc-access-control-card__compliance-value {
  font-size: 14px;
  font-weight: var(--sc-font-weight-semibold, 600);
  line-height: 1;
}

.sc-access-control-card__stat-stack {
  display: flex;
  flex: 1 1 0;
  flex-direction: row;
  gap: 5px;
  min-width: 0;
}

.sc-access-control-card__stat-row {
  align-items: center;
  background: rgb(204 229 224 / 0.5);
  border-radius: 10px;
  box-sizing: border-box;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 4px;
  justify-content: flex-start;
  min-height: 71px;
  min-width: 0;
  padding: 8px 8px 6px;
}

.sc-access-control-card__stat-label-wrap {
  align-items: flex-start;
  display: flex;
  flex: 0 0 auto;
  gap: 4px;
  justify-content: center;
  min-width: 0;
  width: 100%;
}

.sc-access-control-card__stat-icon {
  flex: 0 0 auto;
  font-size: 14px;
  line-height: 1.2;
}

.sc-access-control-card__stat-label {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  font-weight: var(--sc-font-weight-medium, 500);
  line-height: 1.2;
  min-width: 0;
  text-align: left;
  text-transform: uppercase;
}

.sc-access-control-card__stat-value {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  font-size: 22px;
  font-weight: var(--sc-font-weight-regular, 400);
  justify-content: center;
  line-height: 1;
  text-align: center;
  width: 100%;
}

.sc-access-control-card__section:has(.sc-access-control-card__companies) {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  overflow: visible;
}

.sc-access-control-card__companies {
  display: grid;
  flex: 0 0 auto;
  gap: 5px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 0;
}

.sc-access-control-card__company {
  align-items: center;
  backdrop-filter: blur(2px);
  background: rgb(242 240 240 / 0.7);
  border-radius: 10px;
  box-sizing: border-box;
  display: flex;
  gap: 9px;
  justify-content: space-between;
  min-width: 0;
  padding: 10px;
}

.sc-access-control-card__company-main {
  align-items: center;
  color: inherit;
  display: flex;
  flex: 1 1 auto;
  gap: 9px;
  min-width: 0;
  text-decoration: none;
}

.sc-access-control-card__company-avatar {
  align-items: center;
  background: rgb(12 10 62 / 0.08);
  border-radius: 50%;
  color: var(--sc-brand-blue, #0c0a3e);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: var(--sc-font-weight-medium, 500);
  height: 40px;
  justify-content: center;
  letter-spacing: 0.02em;
  overflow: hidden;
  text-transform: uppercase;
  width: 40px;
}

.sc-access-control-card__company-logo {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.sc-access-control-card__company-initials {
  line-height: 1;
}

.sc-access-control-card__company-name {
  display: -webkit-box;
  flex: 1 1 auto;
  font-size: 12px;
  font-weight: var(--sc-font-weight-medium, 500);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.25;
  max-width: 120px;
  min-width: 0;
  overflow: hidden;
}

.sc-access-control-card__company-score {
  align-items: center;
  color: inherit;
  display: inline-flex;
  flex: 0 0 auto;
  justify-content: center;
  text-decoration: none;
}

.sc-access-control-card__company-progress {
  flex: 0 0 auto;
  transform: scale(0.767);
  transform-origin: center center;
}

.sc-access-control-card__empty-companies {
  align-items: center;
  background: rgb(204 229 224 / 0.35);
  border: 1px dashed rgb(12 10 62 / 0.18);
  border-radius: 10px;
  box-sizing: border-box;
  display: flex;
  gap: 10px;
  grid-column: 1 / -1;
  min-height: 63px;
  min-width: 0;
  padding: 10px 12px;
}

.sc-access-control-card__empty-icon {
  align-items: center;
  background: rgb(12 10 62 / 0.08);
  border-radius: 50%;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 18px;
  height: 40px;
  justify-content: center;
  width: 40px;
}

.sc-access-control-card__empty-copy {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.sc-access-control-card__empty-title {
  color: var(--sc-brand-blue, #0c0a3e);
  font-size: 12px;
  font-weight: var(--sc-font-weight-semibold, 600);
  line-height: 1.2;
  margin: 0;
}

.sc-access-control-card__empty-description {
  color: var(--sc-brand-blue, #0c0a3e);
  font-size: 11px;
  line-height: 1.25;
  margin: 0;
  opacity: 0.7;
}

.sc-access-control-card__error {
  background: rgb(255 245 245 / 0.9);
  border-radius: 8px;
  padding: 10px;
}

.sc-access-control-card__error-message {
  color: var(--sc-brand-blue, #0c0a3e);
  font-size: 13px;
  margin: 0;
}

.sc-access-control-card__skeleton-block {
  animation: sc-access-control-card-pulse 1.4s ease-in-out infinite;
  background: rgb(12 10 62 / 0.08);
  border-radius: 8px;
  min-height: 36px;
}

.sc-access-control-card__skeleton-line {
  animation: sc-access-control-card-pulse 1.4s ease-in-out infinite;
  background: rgb(12 10 62 / 0.08);
  border-radius: 4px;
  height: 14px;
  width: 45%;
}

.sc-access-control-card__jobsite.sc-access-control-card__skeleton-block {
  min-height: 71px;
}

.sc-access-control-card__company.sc-access-control-card__skeleton-block {
  min-height: 63px;
}

.sc-access-control-card__visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

@keyframes sc-access-control-card-pulse {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.55;
  }
}

@media (max-width: 520px) {
  .sc-access-control-card__jobsite {
    flex-direction: column;
  }

  .sc-access-control-card__companies {
    grid-template-columns: minmax(0, 1fr);
  }

  .sc-access-control-card__time-label {
    font-size: 14px;
  }

  .sc-access-control-card--foreman .sc-access-control-card__foreman-stats {
    flex-direction: column;
  }
}

/* Foreman variant (Figma 237:1198) */

.sc-access-control-card__foreman-stats {
  display: flex;
  gap: 5px;
  min-width: 0;
  width: 100%;
}

.sc-access-control-card__foreman-stat-card {
  align-items: center;
  background: rgb(204 229 224 / 0.5);
  border-radius: 10px;
  box-sizing: border-box;
  display: flex;
  flex: 1 1 0;
  gap: 8px;
  justify-content: space-between;
  min-width: 0;
  padding: 8px 10px;
}

.sc-access-control-card__foreman-stat-main {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  gap: 5px;
  min-width: 0;
}

.sc-access-control-card__foreman-stat-icon-box {
  align-items: center;
  background: #cce5e0;
  border-radius: 4px;
  box-sizing: border-box;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 16px;
  height: 30px;
  justify-content: center;
  line-height: 1;
  padding: 2px;
  width: 30px;
}

.sc-access-control-card__foreman-stat-label {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  font-weight: var(--sc-font-weight-medium, 500);
  line-height: 1.2;
  min-width: 0;
  text-transform: uppercase;
}

.sc-access-control-card__foreman-stat-value {
  flex: 0 0 auto;
  font-size: 22px;
  font-weight: var(--sc-font-weight-regular, 400);
  line-height: 1;
}

.sc-access-control-card__foreman-workforce {
  background: rgb(204 229 224 / 0.5);
  border-radius: 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 125px;
  min-width: 0;
  padding: 7px;
  width: 100%;
}

.sc-access-control-card--foreman .sc-access-control-card__compliance-bar {
  min-height: 80px;
}

.sc-access-control-card--foreman .sc-access-control-card__compliance-segment {
  padding: 10px;
}

.sc-access-control-card--foreman .sc-access-control-card__compliance-value {
  font-size: 18px;
  font-weight: var(--sc-font-weight-medium, 500);
  line-height: 1.2;
}

.sc-access-control-card__foreman-workforce.sc-access-control-card__skeleton-block {
  min-height: 125px;
}

.sc-access-control-card__foreman-stat-card.sc-access-control-card__skeleton-block {
  min-height: 46px;
}

/* ── styles/sc-alert-recipients.css ── */
/* ScAlertRecipients — recipient picker for alert configuration flows */

:host {
  display: block;
}

/* ── Card ───────────────────────────────────────── */

.sc-ar {
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.4);
  border-radius: var(--sc-border-radius-lg);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
  padding: 30px;
  font-family: var(--sc-font-family-body);
  color: var(--sc-brand-blue);
  display: flex;
  flex-direction: column;
  gap: var(--sc-space-xl);
}

/* ── Header (title + description) ──────────────── */

.sc-ar__header {
  display: flex;
  flex-direction: column;
  gap: var(--sc-space-sm);
}

.sc-ar__title {
  margin: 0;
  font-family: var(--sc-font-family-body);
  font-weight: var(--sc-font-weight-semibold);
  font-size: 18px;
  line-height: 27px;
  color: var(--sc-brand-blue);
}

.sc-ar__description {
  margin: 0;
  font-family: var(--sc-font-family-body);
  font-weight: var(--sc-font-weight-medium);
  font-size: var(--sc-font-size-label);
  line-height: 21px;
  color: var(--sc-brand-blue);
}

/* ── Section wrapper ────────────────────────────── */

.sc-ar__section {
  display: flex;
  flex-direction: column;
  gap: var(--sc-space-sm);
}

/* ── Section labels ─────────────────────────────── */

.sc-ar__section-label {
  margin: 0;
  font-family: var(--sc-font-family-body);
  font-weight: var(--sc-font-weight-regular);
  font-size: var(--sc-font-size-body);
  color: var(--sc-brand-blue);
  opacity: 0.6;
}

/* ── Delivery summary ───────────────────────────── */

.sc-ar__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sc-space-xs);
  min-height: 36px;
  align-items: center;
}

.sc-ar__chips-empty {
  margin: 0;
  font-size: var(--sc-font-size-label);
  color: var(--sc-blue-alpha50, #0C0A3E80);
  font-style: italic;
}

/* ── Chips ──────────────────────────────────────── */

.sc-ar__chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px 4px 14px;
  border-radius: var(--sc-border-radius-pill);
  font-family: var(--sc-font-family-body);
  font-size: 11px;
  font-weight: var(--sc-font-weight-regular);
  max-width: 240px;
}

.sc-ar__chip--user {
  background: var(--sc-brand-blue, #0C0A3E);
  color: var(--sc-white-normal, #fff);
}

.sc-ar__chip--ext {
  background: var(--sc-white-normal, #fff);
  border: 1px solid var(--sc-blue-alpha30, #0C0A3E4D);
  color: var(--sc-brand-blue, #0C0A3E);
}

.sc-ar__chip-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sc-ar__chip-remove {
  all: unset;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  opacity: 0.7;
  flex-shrink: 0;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  margin-left: 2px;
  transition: opacity 0.12s ease;
}

.sc-ar__chip-remove:hover {
  opacity: 1;
}

.sc-ar__chip-remove:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 1px;
}

/* ── Email add row ──────────────────────────────── */

.sc-ar__email-row {
  display: flex;
  gap: var(--sc-space-sm);
  align-items: stretch;
}

.sc-ar__email-input {
  all: unset;
  box-sizing: border-box;
  flex: 1;
  padding: var(--sc-space-sm) var(--sc-space-md);
  border: 1.029px solid #D1D5DC;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.5);
  font-family: var(--sc-font-family-body);
  font-size: var(--sc-font-size-label);
  color: var(--sc-brand-blue);
  transition: border-color 0.15s ease;
}

.sc-ar__email-input::placeholder {
  color: rgba(10, 10, 10, 0.5);
}

.sc-ar__email-input:focus {
  border-color: var(--sc-brand-blue);
  outline: none;
}

.sc-ar__email-input--error {
  border-color: var(--sc-brand-red, #C0133D);
}

.sc-ar__email-input--error:focus {
  border-color: var(--sc-brand-red, #C0133D);
}

/* ── Add button ─────────────────────────────────── */

.sc-ar__add-btn {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sc-space-xs);
  padding: 7px 19px;
  background: var(--sc-brand-mint, #DEF3EF);
  color: var(--sc-brand-blue, #0C0A3E);
  border: 1px solid var(--sc-black-normal, #000);
  border-radius: 5px;
  font-family: var(--sc-font-family-body);
  font-weight: var(--sc-font-weight-medium);
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s ease;
}

.sc-ar__add-btn:hover {
  opacity: 0.85;
}

.sc-ar__add-btn:focus-visible {
  outline: 2px solid var(--sc-brand-blue);
  outline-offset: 2px;
}

.sc-ar__add-btn:active {
  opacity: 0.7;
}

/* ── Email validation error ─────────────────────── */

.sc-ar__email-error {
  margin: 0;
  font-size: var(--sc-font-size-caption);
  color: var(--sc-brand-red, #C0133D);
  font-weight: var(--sc-font-weight-medium);
}

/* ── Search wrapper ─────────────────────────────── */

.sc-ar__search-wrapper {
  position: relative;
}

.sc-ar__search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--sc-brand-blue);
  opacity: 0.5;
  display: flex;
  align-items: center;
}

/* ── Search input ───────────────────────────────── */

.sc-ar__search {
  all: unset;
  box-sizing: border-box;
  display: block;
  width: 100%;
  padding: var(--sc-space-sm) var(--sc-space-md) var(--sc-space-sm) 41px;
  border: 1.029px solid #D1D5DC;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.5);
  font-family: var(--sc-font-family-body);
  font-size: var(--sc-font-size-label);
  color: var(--sc-brand-blue);
  transition: border-color 0.15s ease;
}

.sc-ar__search::placeholder {
  color: rgba(10, 10, 10, 0.5);
}

.sc-ar__search:focus {
  border-color: var(--sc-brand-blue);
  outline: none;
}

/* ── User list ──────────────────────────────────── */

.sc-ar__user-list {
  overflow-y: auto;
  border: 1px solid #F3F4F6;
  border-radius: 10px;
  max-height: 360px;
}

.sc-ar__list-empty {
  margin: 0;
  padding: var(--sc-space-lg);
  font-size: var(--sc-font-size-label);
  color: var(--sc-blue-alpha50, #0C0A3E80);
  text-align: center;
  font-style: italic;
}

/* ── User row ───────────────────────────────────── */

.sc-ar__user-row {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  height: 90px;
  padding: 17px;
  cursor: pointer;
  background: var(--sc-white-normal, #fff);
  border-bottom: 1px solid #F3F4F6;
  transition: background 0.12s ease;
}

.sc-ar__user-row:last-child {
  border-bottom: none;
}

.sc-ar__user-row:hover {
  background: var(--sc-gray-light, #F9FAFC);
}

.sc-ar__user-row--selected {
  background: rgba(222, 243, 239, 0.2);
}

.sc-ar__user-row--selected:hover {
  background: rgba(222, 243, 239, 0.35);
}

.sc-ar__user-row:focus-visible {
  outline: 2px solid var(--sc-brand-blue);
  outline-offset: -2px;
}

/* ── Avatar ─────────────────────────────────────── */

.sc-ar__avatar {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--sc-blue-alpha10, #0C0A3E1A);
  color: var(--sc-brand-blue, #0C0A3E);
  font-weight: var(--sc-font-weight-semibold);
  font-size: var(--sc-font-size-body);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  overflow: hidden;
}

.sc-ar__avatar-img {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

.sc-ar__avatar-img[src] {
  opacity: 1;
}

/* ── User name ──────────────────────────────────── */

.sc-ar__user-name {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--sc-font-family-body);
  font-weight: var(--sc-font-weight-medium);
  font-size: 18px;
  color: var(--sc-brand-blue);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.5;
}

.sc-ar__user-row--selected .sc-ar__user-name {
  opacity: 1;
}

/* ── User right (checkmark + email) ─────────────── */

.sc-ar__user-right {
  display: flex;
  align-items: center;
  gap: var(--sc-space-sm);
  flex-shrink: 1;
  min-width: 0;
}

/* ── User email ─────────────────────────────────── */

.sc-ar__user-email {
  font-family: var(--sc-font-family-body);
  font-weight: var(--sc-font-weight-medium);
  font-size: 18px;
  color: var(--sc-brand-blue);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.5;
}

.sc-ar__user-row--selected .sc-ar__user-email {
  opacity: 1;
}

/* ── Checkmark ──────────────────────────────────── */

.sc-ar__check {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 14px;
  color: var(--sc-brand-blue);
  opacity: 0;
  transition: opacity 0.12s ease;
}

.sc-ar__user-row--selected .sc-ar__check {
  opacity: 1;
}

.sc-ar__check svg {
  display: block;
}

/* ── Responsive ─────────────────────────────────── */

@media (max-width: 420px) {
  .sc-ar {
    padding: var(--sc-space-lg);
  }

  .sc-ar__email-row {
    flex-direction: column;
  }

  .sc-ar__add-btn {
    width: 100%;
    justify-content: center;
  }

  .sc-ar__user-row {
    height: auto;
    min-height: 70px;
  }

  .sc-ar__user-right {
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
  }
}

/* ── styles/sc-announcement.css ── */
/* ScAnnouncement — floating "new product feature" card (issue #5027).

   Desktop: the host is a fixed card pinned to one corner (stays on scroll).
   Mobile (≤767px): the host becomes a full-screen dimmed overlay and the card
   is centered — a screen-blocker. */

:host {
  display: none;
}

:host([open]) {
  display: block;
  position: fixed;
  z-index: 1050;
  box-sizing: border-box;
}

/* ── Desktop corner placement ───────────────────── */

:host([open][position='top-right']) {
  top: 4.75rem;
  right: 1rem;
}

:host([open][position='top-left']) {
  top: 4.75rem;
  left: 1rem;
}

:host([open][position='bottom-right']) {
  bottom: 1rem;
  right: 1rem;
}

:host([open][position='bottom-left']) {
  bottom: 1rem;
  left: 1rem;
}

/* ── Card ───────────────────────────────────────── */

.sc-announcement {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sc-space-md, 12px);
  width: min(92vw, 23rem);
  padding: var(--sc-space-2xl, 24px) var(--sc-space-xl, 20px) var(--sc-space-lg, 16px);
  border-radius: var(--sc-border-radius-xl, 20px);
  background: var(--sc-brand-mint, #DEF3EF);
  color: var(--sc-brand-blue, #0C0A3E);
  font-family: var(--sc-font-family-body, 'Work Sans', sans-serif);
  box-shadow: 0 8px 28px rgba(12, 10, 62, 0.18);
}

/* ── Close (×) button ───────────────────────────── */

.sc-announcement__close {
  all: unset;
  position: absolute;
  top: var(--sc-space-md, 12px);
  right: var(--sc-space-md, 12px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  color: var(--sc-blue-muted, #374151);
  cursor: pointer;
  flex-shrink: 0;
}

.sc-announcement__close:hover {
  background: rgba(12, 10, 62, 0.08);
  color: var(--sc-brand-blue, #0C0A3E);
}

.sc-announcement__close:focus-visible {
  outline: 2px solid var(--sc-brand-blue, #0C0A3E);
  outline-offset: 2px;
}

.sc-announcement__close svg {
  display: block;
  width: 18px;
  height: 18px;
}

/* ── Headline (display font) ────────────────────── */

.sc-announcement__title {
  margin: var(--sc-space-sm, 8px) var(--sc-space-md, 12px) 0;
  font-family: var(--sc-font-family-display, 'Koulen', sans-serif);
  font-weight: var(--sc-font-weight-regular, 400);
  font-size: var(--sc-font-size-title, 24px);
  line-height: 1.15;
  letter-spacing: 0.01em;
  text-align: center;
}

/* ── Body ───────────────────────────────────────── */

.sc-announcement__body {
  margin: 0;
  font-size: var(--sc-font-size-body, 16px);
  font-weight: var(--sc-font-weight-regular, 400);
  line-height: 1.4;
  text-align: center;
  color: var(--sc-blue-muted, #374151);
}

/* ── Actions ────────────────────────────────────── */

.sc-announcement__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sc-space-sm, 8px);
  margin-top: var(--sc-space-xs, 4px);
  width: 100%;
}

/* Primary "Try Now" CTA — filled dark navy. */
.sc-announcement__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sc-space-sm, 8px);
  padding: 10px 20px;
  border-radius: var(--sc-border-radius-md, 8px);
  background: var(--sc-brand-blue, #0C0A3E);
  color: var(--sc-white-normal, #fff);
  font-weight: var(--sc-font-weight-medium, 500);
  font-size: var(--sc-font-size-label, 14px);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}

.sc-announcement__cta:hover {
  background: #17144f;
}

.sc-announcement__cta:focus-visible {
  outline: 2px solid var(--sc-brand-blue, #0C0A3E);
  outline-offset: 2px;
}

.sc-announcement__cta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sc-announcement__cta-icon svg {
  display: block;
}

/* "Learn more" text link with underline. */
.sc-announcement__learn-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding-bottom: 1px;
  border-bottom: 1px solid var(--sc-brand-blue, #0C0A3E);
  color: var(--sc-brand-blue, #0C0A3E);
  font-weight: var(--sc-font-weight-medium, 500);
  font-size: var(--sc-font-size-label, 14px);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}

.sc-announcement__learn-more:hover {
  opacity: 0.8;
}

.sc-announcement__learn-more-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sc-announcement__learn-more-icon svg {
  display: block;
}

/* ── Mobile: centered screen-blocker ────────────── */

@media (max-width: 767px) {
  :host([open]) {
    inset: 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1rem, 6vw, 2rem);
    background: rgba(12, 10, 62, 0.5);
    overflow-y: auto;
  }

  .sc-announcement {
    width: min(100%, 23rem);
  }
}

/* ── styles/sc-app-header.css ── */
:host {
  --sc-app-header-blue: #0c0a3e;
  --sc-app-header-edge-gap: 15px;
  --sc-app-header-right-gap: var(--sc-app-header-edge-gap);
  --sc-app-header-surface: #ffffff;
  --sc-app-header-surface-shadow: #f3f3f3;
  display: block;
  width: 100%;
}

.sc-app-header {
  align-items: center;
  background: linear-gradient(
    180deg,
    var(--sc-app-header-surface) 0%,
    var(--sc-app-header-surface) 72%,
    #fcfcfc 88%,
    var(--sc-app-header-surface-shadow) 100%
  );
  box-sizing: border-box;
  display: flex;
  height: 60px;
  gap: 16px;
  overflow: visible;
  padding-left: var(--sc-app-header-edge-gap);
  padding-right: 0;
  position: relative;
  width: 100%;
}

.sc-app-header__brand {
  align-items: center;
  display: inline-flex;
  flex-shrink: 0;
  gap: 8px;
  position: relative;
  z-index: 1;
}

.sc-app-header__menu,
.sc-app-header__drawer-close {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--sc-app-header-blue);
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  height: 44px;
  justify-content: center;
  padding: 0;
  width: 44px;
}

.sc-app-header__menu {
  display: none;
}

.sc-app-header__logo-link {
  align-items: center;
  display: inline-flex;
  flex-shrink: 0;
  text-decoration: none;
}

.sc-app-header__logo-actions {
  align-items: center;
  display: inline-flex;
  flex-shrink: 0;
  gap: 4px;
}

slot[name='logo-actions']::slotted(*) {
  align-items: center;
  display: inline-flex;
}

.sc-app-header__logo {
  display: block;
  height: 30px;
  width: 165.75px;
}

/* Full wordmark by default; the compact icon is swapped in on small screens. */
.sc-app-header__logo--icon {
  display: none;
  height: 32px;
  width: 32px;
}

.sc-app-header__logo-fallback {
  color: #c0133d;
  font-family: 'Work Sans', sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
}

/* Center is a flex item — bounded between logo and right slot, no absolute overlap possible */
.sc-app-header__center {
  align-items: center;
  display: flex;
  flex: 1 1 0%;
  justify-content: center;
  min-width: 0;
  overflow: hidden;
}

slot[name='dropdown']::slotted(*) {
  align-items: center;
  display: inline-flex;
}

slot[name='dropdown']::slotted(sc-notifications-trigger) {
  align-items: stretch;
  align-self: stretch;
}

.sc-app-header__navigation {
  align-items: center;
  display: flex;
  flex-shrink: 0;
  gap: var(--sc-space-sm, 8px);
  position: relative;
  z-index: 1;
}

/* Keep Project beside the account controls. The breadcrumb already fills the
   middle on project pages; without one, this margin is what moves the menu
   off the logo and up against the right slot. */
.sc-app-header--with-navigation .sc-app-header__navigation {
  margin-left: auto;
}

.sc-app-header--with-navigation .sc-app-header__right {
  margin-left: 0;
}

/* Project-menu and project-switcher backdrops are position:fixed, but their
   z-index only competes inside this stacking context. Raise it above the
   right-slot controls so the docked notifications column cannot paint through
   the overlay. */
.sc-app-header__navigation--open {
  z-index: 2;
}

slot[name='navigation']::slotted(*) {
  align-items: center;
  display: inline-flex;
}

/* The switcher stays in this slot so its overlay stacks above the header, but
   a closed dialog must not take a flex share. Otherwise the phone row gives
   that empty item equal space and crushes the Project trigger. */
slot[name='navigation']::slotted(sc-project-switcher:not([open])) {
  display: none;
}

.sc-app-header__right {
  align-items: center;
  display: flex;
  flex-shrink: 0;
  justify-content: flex-end;
  margin-left: auto;
  padding-right: var(--sc-app-header-right-gap);
  position: relative;
  z-index: 1;
}

/* Narrow viewports: the breadcrumb moves out of the header into the page body
   (beside the back tab). Headers without project navigation keep the full
   wordmark; project headers prioritize navigation and right-side controls. */
@media (max-width: 900px) {
  :host {
    --sc-app-header-edge-gap: 10px;
  }

  .sc-app-header {
    gap: 12px;
  }

  .sc-app-header__center {
    display: none;
  }

  .sc-app-header--with-navigation .sc-app-header__logo--full {
    display: none;
  }

  .sc-app-header--with-navigation .sc-app-header__logo--icon {
    display: block;
  }
}

/* Phone widths share the remaining row across the navigation triggers so one
   menu cannot claim the whole row. Translated labels truncate before they
   displace the fixed right-side controls. width: auto beats a slotted child's
   own width: 100%. A company menu or project switcher leaves that row: the
   hamburger and wordmark take its place. */
@media (max-width: 600px) {
  .sc-app-header--with-navigation:not(.sc-app-header--phone-nav) .sc-app-header__navigation {
    flex: 1 1 auto;
    margin-left: 0;
    min-width: 0;
    overflow: hidden;
  }

  .sc-app-header--with-navigation:not(.sc-app-header--phone-nav)
    slot[name='navigation']::slotted(*) {
    flex: 1 1 0;
    max-width: 100%;
    min-width: 0;
    width: auto;
  }

  .sc-app-header--phone-nav .sc-app-header__brand {
    display: contents;
  }

  .sc-app-header--phone-nav .sc-app-header__menu {
    display: inline-flex;
  }

  .sc-app-header--phone-nav .sc-app-header__logo-link {
    display: flex;
    flex: 1 1 auto;
    justify-content: center;
    min-width: 0;
  }

  .sc-app-header--phone-nav.sc-app-header--with-navigation .sc-app-header__logo--full {
    display: block;
    height: auto;
    max-height: 27px;
    max-width: 100%;
    width: 149px;
  }

  .sc-app-header--phone-nav.sc-app-header--with-navigation .sc-app-header__right {
    margin-left: 0;
  }

  .sc-app-header--phone-nav .sc-app-header__logo--icon {
    display: none;
  }

  .sc-app-header--phone-nav .sc-app-header__navigation {
    display: none;
  }

  /* The project menu and project switcher overlays live in the hidden
     navigation slot. Reveal that slot with no in-flow height once either is
     open. Keep the company trigger out of the phone bar; the drawer lists
     companies. The switcher is a viewport dialog and stays visible. */
  .sc-app-header--phone-nav .sc-app-header__navigation--open {
    display: block;
    height: 0;
    margin-left: 0;
    overflow: visible;
    position: absolute;
    width: 0;
  }

  .sc-app-header--phone-nav
    .sc-app-header__navigation--open
    slot[name='navigation']::slotted(sc-company-menu) {
    display: none;
  }
}

/* Trim the wordmark only at the smallest widths so it never overruns the
   profile menu. */
@media (max-width: 360px) {
  .sc-app-header {
    gap: 8px;
  }

  .sc-app-header__logo--full {
    width: 130px;
  }
}

.sc-app-header__drawer {
  background: linear-gradient(
    180deg,
    var(--sc-brand-mint, #def3ef) 0%,
    var(--sc-white, #fff) 50%,
    var(--sc-brand-mint, #def3ef) 100%
  );
  box-sizing: border-box;
  color: var(--sc-brand-blue, #0c0a3e);
  display: none;
  flex-direction: column;
  font-family: var(--sc-font-family-body, 'Work Sans', sans-serif);
  height: 100dvh;
  inset: 0 auto 0 0;
  pointer-events: none;
  position: fixed;
  transform: translateX(-100%);
  transition: transform 0.25s ease;
  visibility: hidden;
  width: 100%;
  z-index: 5;
}

.sc-app-header__drawer--open {
  pointer-events: auto;
  transform: translateX(0);
  visibility: visible;
}

.sc-app-header__drawer-top {
  align-items: center;
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: 44px 1fr 44px;
  min-height: 60px;
  padding: 0 12px;
}

.sc-app-header__drawer-logo {
  color: inherit;
  grid-column: 2;
  justify-self: center;
  text-decoration: none;
}

.sc-app-header__drawer-logo img {
  display: block;
  height: 27px;
  width: 149px;
}

.sc-app-header__drawer-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 40px;
  min-height: 0;
  overflow: auto;
  padding: 48px 20px 24px;
}

.sc-app-header__drawer-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sc-app-header__drawer-project,
.sc-app-header__drawer-heading {
  align-items: center;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 18px;
  font-weight: var(--sc-font-weight-medium, 500);
  gap: 5px;
  min-height: 44px;
  padding: 0;
  width: fit-content;
}

.sc-app-header__drawer-project sc-icons,
.sc-app-header__drawer-heading sc-icons {
  transform: rotate(90deg);
}

.sc-app-header__drawer-heading[aria-expanded='true'] sc-icons {
  transform: rotate(-90deg);
}

.sc-app-header__drawer-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sc-app-header__drawer-link {
  color: inherit;
  display: inline-flex;
  font-size: 14px;
  font-style: italic;
  min-height: 44px;
  opacity: 0.5;
  overflow-wrap: anywhere;
  text-decoration: none;
}

.sc-app-header__drawer-search {
  display: block;
}

.sc-app-header__drawer-search input {
  background: var(--sc-blue-alpha05, rgb(12 10 62 / 0.05));
  border: 0;
  border-radius: var(--sc-border-radius-pill, 999px);
  color: inherit;
  font: inherit;
  min-height: 44px;
  padding: 8px 16px;
  width: 100%;
}

.sc-app-header__drawer-empty,
.sc-app-header__drawer-status {
  margin: 0;
}

.sc-app-header__drawer-status {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sc-app-header__drawer-skeleton {
  background: var(--sc-blue-alpha10, rgb(12 10 62 / 0.1));
  border-radius: 6px;
  display: block;
  height: 14px;
  width: 70%;
}

.sc-app-header__drawer-skeleton--short {
  width: 45%;
}

.sc-app-header__drawer-footer {
  border-top: var(--sc-border-width-thin, 1px) solid var(--sc-blue-alpha10, rgb(12 10 62 / 0.1));
  display: flex;
  flex: 0 0 auto;
  justify-content: center;
  padding: 24px 0 22px;
}

.sc-app-header__drawer-footer-bar {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  max-width: 348px;
  padding: 0 20px;
  width: 100%;
}

.sc-app-header__drawer-profile,
.sc-app-header__drawer-logout {
  align-items: center;
  color: inherit;
  display: inline-flex;
  gap: 10px;
  min-height: 44px;
  text-decoration: none;
}

.sc-app-header__drawer-logout {
  background: transparent;
  border: 0;
  cursor: pointer;
  flex-direction: column;
  font: inherit;
  font-size: 16px;
  font-weight: var(--sc-font-weight-semibold, 600);
  gap: 6px;
  text-align: center;
  text-transform: uppercase;
}

.sc-app-header__drawer-profile-mark,
.sc-app-header__drawer-logout-mark {
  align-items: center;
  background: var(--sc-brand-blue, #0c0a3e);
  color: var(--sc-white, #fff);
  display: inline-flex;
  justify-content: center;
}

.sc-app-header__drawer-profile-mark {
  border-radius: 50%;
  flex: 0 0 30px;
  height: 30px;
  width: 30px;
}

.sc-app-header__drawer-logout-mark {
  border-radius: 10px;
  height: 48px;
  width: 48px;
}

.sc-app-header__visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

@media (max-width: 600px) {
  .sc-app-header__drawer {
    display: flex;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sc-app-header__drawer {
    transition: none;
  }
}

/* ── styles/sc-attachment-chip.css ── */
:host {
  display: block;
  min-width: 0;
}

.sc-attachment-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px 12px;
  border-radius: var(--sc-radius-sm, 6px);
  background: var(--sc-gray-light, #f9fafc);
  color: var(--sc-blue-muted, #374151);
  font-family: var(--sc-font-family-body, 'Work Sans', sans-serif);
  font-size: var(--sc-font-size-label, 14px);
  line-height: 20px;
}

.sc-attachment-chip__icon {
  display: flex;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--sc-gray-dark, #a1a5b1);
}

.sc-attachment-chip__icon svg {
  width: 100%;
  height: 100%;
}

/* The name takes the room that is left and truncates rather than wrapping: a chip is one
   line, and a long file name should not make its row taller than its neighbours. */
.sc-attachment-chip__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sc-attachment-chip__remove {
  all: unset;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: var(--sc-radius-sm, 6px);
  color: var(--sc-blue-muted, #374151);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.sc-attachment-chip__remove:hover {
  background: var(--sc-gray-normal, #e8e7ec);
}

.sc-attachment-chip__remove:focus-visible {
  outline: 2px solid var(--sc-brand-blue, #0c0a3e);
  outline-offset: 2px;
}

/* ── styles/sc-autocomplete.css ── */
/* ScAutocomplete — sc-form-input's field with a list of matching options under it.

   The field itself takes sc-form-input.css; this adds the list, which floats over what
   follows, and the caret a strict (pick-one) field shows. */

.sc-autocomplete__field {
  position: relative;
}

.sc-autocomplete__caret {
  flex: none;
  padding-right: var(--sc-space-md, 12px);
  color: var(--sc-blue-muted, #374151);
  pointer-events: none;
}

.sc-autocomplete__panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 1080;
  box-sizing: border-box;
  margin: 0;
  padding: 4px;
  list-style: none;
  max-height: 240px;
  overflow-y: auto;
  background: var(--sc-white-normal, #ffffff);
  border: 1px solid var(--sc-blue-alpha30, rgba(12, 10, 62, 0.3));
  border-radius: var(--sc-radius-sm, 6px);
  /* The same elevation as sc-search-select's panel. */
  box-shadow:
    0 2px 6px rgb(12 10 62 / 0.08),
    0 8px 24px rgb(12 10 62 / 0.12);
}

.sc-autocomplete__option {
  padding: 10px 12px;
  border-radius: var(--sc-radius-sm, 4px);
  cursor: pointer;
  font-size: var(--sc-font-size-label, 14px);
  line-height: 20px;
  color: var(--sc-brand-blue, #0c0a3e);
  overflow-wrap: anywhere;
}

.sc-autocomplete__option:hover,
.sc-autocomplete__option[data-active='true'] {
  background: var(--sc-blue-alpha10, rgba(12, 10, 62, 0.06));
}

.sc-autocomplete__empty {
  padding: 10px 12px;
  color: var(--sc-blue-muted, #374151);
  font-size: var(--sc-font-size-caption, 13px);
}

/* ── styles/sc-back-tab.css ── */
:host {
  --sc-back-tab-surface: #def3ef;
  --sc-back-tab-text: #0c0a3e;
  --sc-back-tab-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
  display: inline-flex;
  height: 91px;
  width: 40px;
}

.sc-back-tab {
  background: var(--sc-back-tab-surface);
  border-radius: 0 10px 10px 0;
  box-shadow: var(--sc-back-tab-shadow);
  box-sizing: border-box;
  color: var(--sc-back-tab-text);
  display: block;
  height: 100%;
  position: relative;
  text-decoration: none;
  width: 100%;
}

.sc-back-tab:focus-visible {
  outline: 2px solid var(--sc-back-tab-text);
  outline-offset: 2px;
}

.sc-back-tab__icon {
  display: block;
  height: 23px;
  left: 11px;
  position: absolute;
  top: 13px;
  width: 14px;
}

.sc-back-tab__icon svg {
  display: block;
  height: 100%;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
  width: 100%;
}

.sc-back-tab__label-wrap {
  align-items: center;
  display: flex;
  height: 38px;
  justify-content: center;
  left: 13px;
  position: absolute;
  top: 42px;
  width: 16px;
}

.sc-back-tab__label {
  font-family: 'Work Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
  display: block;
  text-transform: uppercase;
  transform: rotate(-90deg);
  transform-origin: center;
  white-space: nowrap;
}

/* ── styles/sc-badge.css ── */
/* ScBadge — semantic tone pill (positive / warning / alert / negative / critical / neutral / info) */
.sc-badge {
  font-family: var(--sc-font-family-body);
  font-weight: var(--sc-font-weight-medium);
  font-size: var(--sc-font-size-caption);
  line-height: 1;
  letter-spacing: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;

  min-width: 130px;
  min-height: 22px;
  padding: var(--sc-space-xs) 14px;
  border-radius: var(--sc-border-radius-md);
}

.sc-badge__label {
  white-space: nowrap;
}

.sc-badge--negative {
  background-color: rgba(254, 194, 194, 0.6);
  color: #a61300;
}

.sc-badge--warning {
  background-color: rgba(254, 249, 194, 0.6);
  color: #a65f00;
}

.sc-badge--alert {
  background-color: rgba(254, 224, 178, 0.7);
  color: var(--sc-count-orange-stroke, #b3540e);
}

/* Outranks negative: a solid fill rather than a tint, so it reads as the worst state at a
   glance. White on the dark red is 7.7:1. */
.sc-badge--critical {
  background-color: var(--sc-count-dark-red-stroke, #a61300);
  color: var(--sc-white-normal, #ffffff);
}

.sc-badge--neutral {
  background: rgba(222, 243, 239, 0.5);
  color: rgba(12, 10, 62, 0.5);
}

.sc-badge--positive {
  background-color: rgba(219, 254, 194, 0.6);
  color: #45a600;
}

.sc-badge--info {
  background: var(--sc-brand-blue, #0c0a3e);
  color: var(--sc-white-normal, #ffffff);
}

.sc-badge--circle {
  min-width: 22px;
  min-height: 22px;
  height: 22px;
  padding: 0 4px;
  border-radius: 50%;
}

/* ── styles/sc-breadcrumb.css ── */
/* ScBreadcrumb — page hierarchy trail.
   Desktop: horizontal trail. When the current (last) page would truncate, the
   crumbs after the first fold into a "…" crumb with a menu; the current page
   truncates with ellipsis only once nothing is left to fold.
   Mobile (≤900px): collapses to the current page plus a chevron toggle; the
   toggle opens a dropdown panel listing the full trail (matches the
   collapsible pattern used by ScProgressSteps). */

:host {
  display: inline-flex;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

.sc-breadcrumb {
  align-items: center;
  display: inline-flex;
  gap: var(--sc-space-xs);
  max-width: 100%;
  position: relative;
}

.sc-breadcrumb__list {
  align-items: center;
  display: inline-flex;
  gap: 14px;
  list-style: none;
  margin: 0;
  max-width: 100%;
  overflow: hidden;
  padding: 0;
  white-space: nowrap;
}

.sc-breadcrumb__item {
  align-items: center;
  display: inline-flex;
  flex-shrink: 0;
  gap: 14px;
}

.sc-breadcrumb__item:last-child {
  min-width: 0;
  overflow: hidden;
  flex-shrink: 1;
}

.sc-breadcrumb__link,
.sc-breadcrumb__current {
  color: rgba(12, 10, 62, 0.6);
  font-family: var(--sc-font-family-body);
  font-size: 18px;
  font-weight: var(--sc-font-weight-medium);
  letter-spacing: 0;
  line-height: 21px;
  text-decoration: none;
}

.sc-breadcrumb__current {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sc-breadcrumb__link:hover,
.sc-breadcrumb__link:focus-visible {
  color: rgba(12, 10, 62, 0.6);
  opacity: 1;
  text-decoration: none;
}

/* Desktop overflow: the "…" crumb reads as one more link in the trail. */
.sc-breadcrumb__overflow-toggle {
  background: none;
  border: none;
  border-radius: 2px;
  color: rgba(12, 10, 62, 0.6);
  cursor: pointer;
  font-family: var(--sc-font-family-body);
  font-size: 18px;
  font-weight: var(--sc-font-weight-medium);
  line-height: 21px;
  padding: 0 4px;
}

/* Inset: the trail and the host clip anything drawn outside the 21px row. */
.sc-breadcrumb__overflow-toggle:focus-visible {
  outline: 2px solid var(--sc-brand-blue);
  outline-offset: -2px;
}

/* Its menu is a native popover in the top layer, so the app header's clipping
   box cannot cut it off; the component positions it under the "…" crumb. The
   card matches the mobile panel. `display` is set only while open: an author
   `display` would override the UA rule that hides a closed popover. */
.sc-breadcrumb__overflow-menu {
  background: var(--sc-white-normal);
  border: none;
  border-radius: 5px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
  box-sizing: border-box;
  color: inherit;
  flex-direction: column;
  gap: 10px;
  inset: auto;
  list-style: none;
  margin: 0;
  max-width: min(480px, calc(100vw - 16px));
  overflow: visible;
  padding: 10px 14px 14px;
  position: fixed;
  white-space: nowrap;
}

.sc-breadcrumb__overflow-menu:popover-open {
  display: flex;
}

.sc-breadcrumb__overflow-item {
  min-width: 0;
}

.sc-breadcrumb__overflow-item .sc-breadcrumb__link {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sc-breadcrumb__separator {
  color: transparent;
  display: inline-block;
  flex: 0 0 auto;
  font-size: 0;
  height: 20px;
  position: relative;
  width: 8px;
}

.sc-breadcrumb__separator::before {
  background-color: var(--sc-brand-blue);
  border-radius: 999px;
  content: '';
  height: 20px;
  left: 50%;
  opacity: 0.6;
  position: absolute;
  top: 0;
  transform: translateX(-50%) rotate(22deg);
  transform-origin: center;
  width: 1px;
}

/* The desktop trail renders the list inline, so the panel wrapper is transparent
   to layout and the mobile-only collapsed pill / close button stay hidden. */
.sc-breadcrumb__panel {
  display: contents;
}

.sc-breadcrumb__toggle,
.sc-breadcrumb__close {
  display: none;
}

@media (max-width: 900px) {
  /* On mobile the breadcrumb is hosted in the page body beside the back tab
     (not the app header). Let the dropdown panel escape the host's clipping box;
     the host stays inline-flex so the collapsed pill sizes to its content. */
  :host {
    overflow: visible;
    position: relative;
  }

  /* Collapsed pill (Figma "header + closed breadcrumbs"): a frosted-glass chip
     showing the tail of the trail; tapping it opens the full panel. The
     backdrop blur over a half-opaque white keeps the text legible against
     whatever content scrolls behind it. */
  .sc-breadcrumb--collapsible .sc-breadcrumb__toggle {
    align-items: center;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    background: rgba(255, 255, 255, 0.5);
    border: none;
    border-radius: 5px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    display: inline-flex;
    gap: 10px;
    justify-content: center;
    max-width: 100%;
    overflow: hidden;
    padding: 4px 8px;
    transition: background-color 0.15s ease;
  }

  .sc-breadcrumb--collapsible .sc-breadcrumb__toggle:hover,
  .sc-breadcrumb--collapsible .sc-breadcrumb__toggle:focus-visible {
    background: rgba(255, 255, 255, 0.8);
  }

  /* Crumb labels shrink with ellipsis so the pill never outgrows the space the
     page grants it (between the back tab and the viewport edge); the leading
     "…" crumb and the slash separators keep their intrinsic size. */
  .sc-breadcrumb__toggle-crumb {
    color: var(--sc-brand-blue);
    flex: 0 1 auto;
    font-family: var(--sc-font-family-body);
    font-size: 14px;
    font-weight: var(--sc-font-weight-regular);
    line-height: normal;
    min-width: 0;
    opacity: 0.6;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .sc-breadcrumb__toggle-crumb--ellipsis {
    flex: 0 0 auto;
  }

  /* Collapsed: hide the inline trail only when a pill replaces it (multi-item
     trails). A single-item breadcrumb has no pill and stays visible. */
  .sc-breadcrumb--collapsible .sc-breadcrumb__list {
    display: none;
  }

  /* Expanded: hide the pill but keep it in layout so the nav box doesn't collapse.
     If it collapsed, a host forced to display:block by the page (the app sets
     `sc-breadcrumb { display: block }`) would put the empty nav on a text baseline
     and drop the panel ~15px below the pill. Keeping the box stable anchors the
     panel's top to the collapsed pill's top; the panel overlays the hidden pill. */
  .sc-breadcrumb--expanded .sc-breadcrumb__toggle {
    visibility: hidden;
  }

  /* The panel wrapper stacks the trail card and the close button. It opens in
     place — same top as the collapsed pill it replaces (Figma "header + open
     breadcrumbs") — rather than dropping below, and centers on the pill so it
     stays centered in the viewport (the host wrapper centers the pill). */
  .sc-breadcrumb--expanded .sc-breadcrumb__panel {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 12px;
    left: 50%;
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    z-index: 1000;
  }

  .sc-breadcrumb--expanded .sc-breadcrumb__list {
    align-items: center;
    background: var(--sc-white-normal);
    border-radius: 5px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: min(78vw, 280px);
    min-width: 126px;
    overflow: visible;
    padding: 10px 14px 14px;
    white-space: normal;
  }

  .sc-breadcrumb--expanded .sc-breadcrumb__item {
    flex-shrink: 0;
    gap: 0;
    justify-content: center;
    max-width: 100%;
    width: 100%;
  }

  /* Vertical stack reads top-down; the slash separators are desktop-only. */
  .sc-breadcrumb--expanded .sc-breadcrumb__separator {
    display: none;
  }

  .sc-breadcrumb--expanded .sc-breadcrumb__link,
  .sc-breadcrumb--expanded .sc-breadcrumb__current {
    color: var(--sc-brand-blue);
    display: block;
    font-size: 14px;
    line-height: normal;
    max-width: 100%;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
  }

  /* Links up the trail are muted; only the current page reads at full weight. */
  .sc-breadcrumb--expanded .sc-breadcrumb__link {
    font-weight: var(--sc-font-weight-regular);
    opacity: 0.3;
    transition: opacity 0.15s ease;
  }

  .sc-breadcrumb--expanded .sc-breadcrumb__link:hover,
  .sc-breadcrumb--expanded .sc-breadcrumb__link:focus-visible {
    opacity: 1;
  }

  .sc-breadcrumb--expanded .sc-breadcrumb__current {
    font-weight: var(--sc-font-weight-medium);
    opacity: 1;
  }

  /* Round close button (Figma node 3833:23763). */
  .sc-breadcrumb--expanded .sc-breadcrumb__close {
    align-items: center;
    background: var(--sc-brand-blue);
    border: none;
    border-radius: 999px;
    color: var(--sc-white-normal);
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    height: 20px;
    justify-content: center;
    padding: 0;
    width: 20px;
  }

  .sc-breadcrumb--expanded .sc-breadcrumb__close svg {
    display: block;
    height: 11px;
    width: 11px;
  }

  .sc-breadcrumb--expanded .sc-breadcrumb__close path {
    fill: none;
    stroke: currentcolor;
    stroke-linecap: round;
    stroke-width: 2.5;
  }
}

/* ── styles/sc-button.css ── */
/* ScButton — Figma Webapp “Button” (variants, sizes, shapes, icons, density). */

:host {
  display: inline-block;
  flex: 0 0 auto;
  max-width: none;
  vertical-align: top;
  width: fit-content;
}

:host([search-hidden]) {
  display: none;
}

:host([block]) {
  display: block;
  flex: 1 1 auto;
  max-width: none;
  width: 100%;
}

:host([block]) .sc-button {
  width: 100%;
}

.sc-button {
  box-sizing: border-box;
  --sc-button-fs: var(--sc-font-size-label);
  --sc-button-fw: var(--sc-font-weight-medium);
  --sc-button-min-h: 44px;
  --sc-button-pad-y: 7px;
  --sc-button-pad-x: var(--sc-space-xl);
  --sc-button-gap: 5px;

  font-family: var(--sc-font-family-body);
  font-size: var(--sc-button-fs);
  font-weight: var(--sc-button-fw);
  letter-spacing: 0;
  line-height: 1.25;
  text-transform: none;
  text-align: center;
  text-decoration: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sc-button-gap);

  min-width: 0;
  min-height: var(--sc-button-min-h);
  padding: var(--sc-button-pad-y) var(--sc-button-pad-x);

  border-style: solid;
  border-width: var(--sc-border-width-thin);

  cursor: pointer;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    opacity 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

/* ── Size ─────────────────────────────────── */
.sc-button--size-sm {
  --sc-button-min-h: 36px;
  --sc-button-fs: var(--sc-font-size-caption);
  --sc-button-pad-y: 5px;
  --sc-button-pad-x: var(--sc-space-md);
}

.sc-button--size-md {
  /* defaults on .sc-button */
}

.sc-button--size-lg {
  --sc-button-min-h: 52px;
  --sc-button-fs: var(--sc-font-size-body);
  --sc-button-pad-y: 10px;
  --sc-button-pad-x: var(--sc-space-2xl);
}

/* Chip — Figma node 1945-15994. Compact outlined pill used for inline action
   affordances (Replace, Upload, Add Local, Add Certification). Work Sans Regular
   11px, not the medium weight that the other sizes inherit from .sc-button. */
.sc-button--size-chip {
  --sc-button-min-h: 0;
  --sc-button-fs: 11px;
  --sc-button-fw: var(--sc-font-weight-regular, 400);
  --sc-button-pad-y: 4px;
  --sc-button-pad-x: 14px;
  --sc-button-gap: 8px;

  line-height: 16.5px;
  min-width: 0;
  padding: 4px 10px 4px 14px;
}

/* ── Density ──────────────────────────────── */
.sc-button--density-compact {
  --sc-button-pad-y: 5px;
  --sc-button-pad-x: var(--sc-space-lg);
  --sc-button-min-h: 38px;
}

.sc-button--size-sm.sc-button--density-compact {
  --sc-button-min-h: 32px;
  --sc-button-pad-y: 4px;
  --sc-button-pad-x: var(--sc-space-sm);
}

/* ── Shape (corner radius) ───────────────── */
.sc-button--shape-pill {
  border-radius: var(--sc-border-radius-pill);
}

.sc-button--shape-rounded {
  border-radius: 5px;
}

.sc-button--shape-soft {
  border-radius: var(--sc-border-radius-xl);
}

/* Chip overrides shape: explicit 13px to match Figma. */
.sc-button--size-chip.sc-button--shape-pill,
.sc-button--size-chip.sc-button--shape-rounded,
.sc-button--size-chip.sc-button--shape-soft {
  border-radius: 13px;
}

/* ── Variants ─────────────────────────────── */
.sc-button--filled {
  --sc-button-fs: var(--sc-font-size-caption);
  --sc-button-fw: var(--sc-font-weight-medium);
  --sc-button-min-h: 46px;

  line-height: normal;
  background-color: var(--sc-brand-mint);
  color: var(--sc-brand-blue);
  border-color: var(--sc-black-normal);
}

.sc-button--filled.sc-button--size-sm {
  --sc-button-min-h: 36px;
}

.sc-button--filled.sc-button--size-lg {
  --sc-button-min-h: 52px;
}

.sc-button--filled .sc-button__icon {
  /* Hosts may override via --sc-button-icon-color (e.g. navy upload CTA). */
  color: var(--sc-button-icon-color, var(--sc-brand-green));
}

.sc-button--outline {
  --sc-button-fs: var(--sc-font-size-label);
  --sc-button-fw: var(--sc-font-weight-regular);

  line-height: 18px;
  padding: 7px 18px 7px 15px;
  background-color: var(--sc-white-normal);
  color: var(--sc-brand-blue);
  border-color: var(--sc-blue-alpha30);
}

.sc-button--outline.sc-button--size-sm {
  padding: 5px 14px 5px 12px;
}

.sc-button--outline.sc-button--size-lg {
  padding: 9px 22px 9px 18px;
}

/* Chip + outline: 1px border, tight padding to match Figma chip spec. */
.sc-button--outline.sc-button--size-chip {
  border-width: 1px;
  padding: 4px 10px 4px 14px;
}

.sc-button--outline .sc-button__icon {
  color: var(--sc-brand-blue);
}

/* Smart Binder feature chips — outline pill without the default 44px min-height. */
.sc-button--feature-nav {
  --sc-button-min-h: 0;
}

.sc-button--ghost {
  background-color: transparent;
  border-color: transparent;
  /* Hosts may override via --sc-button-fg (e.g. Figma muted Back #4a5565). */
  color: var(--sc-button-fg, var(--sc-brand-blue));
}

/* Keeps the label in the accessible name while showing only the icon. */
.sc-button--icon-only {
  --sc-button-min-h: 32px;
  --sc-button-pad-y: 4px;
  --sc-button-pad-x: 4px;
}

.sc-button--icon-only .sc-button__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sc-button--ghost:hover:not(:disabled):not(.sc-button--loading) {
  background-color: rgb(12 10 62 / 0.04);
}

.sc-button--ghost:active:not(:disabled):not(.sc-button--loading) {
  background-color: rgb(12 10 62 / 0.07);
}

.sc-button--underline {
  --sc-button-min-h: auto;
  --sc-button-fs: 12px;

  padding: 4px 5px;
  gap: 5px;
  line-height: normal;
  background-color: transparent;
  border: none;
  border-bottom: 1px solid var(--sc-brand-blue);
  border-radius: 0;
  color: var(--sc-brand-blue);
  font-size: var(--sc-button-fs);
  font-weight: var(--sc-font-weight-medium);
  text-decoration: none;
}

.sc-button--underline.sc-button--shape-pill,
.sc-button--underline.sc-button--shape-rounded,
.sc-button--underline.sc-button--shape-soft {
  border-radius: 0;
}

/* Repository icons (18×18 in Figma) were clipped in the default 20×15 icon slot. */
.sc-button--underline .sc-button__icon {
  width: 18px;
  height: 18px;
  overflow: visible;
}

.sc-button--underline .sc-button__icon sc-icons {
  width: 18px;
  height: 18px;
}

.sc-button--primary {
  --sc-button-fw: var(--sc-font-weight-semibold);

  background-color: var(--sc-brand-blue);
  color: var(--sc-white-normal);
  border-color: transparent;
}

.sc-button--primary .sc-button__icon {
  color: var(--sc-white-normal);
}

.sc-button--danger {
  --sc-button-fw: var(--sc-font-weight-semibold);

  background-color: var(--sc-brand-red);
  color: var(--sc-white-normal);
  border-color: transparent;
}

.sc-button--danger .sc-button__icon {
  color: var(--sc-white-normal);
}

/* ── Link anchor ─────────────────────────── */
/* Each variant class above sets its own ``color`` (primary/danger → white,
   filled/outline/ghost/underline → brand-blue). A single-class selector
   (specificity 0,1,0) outranks the consuming app's global ``a { color: … }``
   (0,0,1) in both the ``:link`` and ``:visited`` states, so no anchor-only
   color override is required. We only need to strip the default underline
   and keep visited disabled anchors non-interactive. */
a.sc-button {
  text-decoration: none;
}

/* ── Interaction ─────────────────────────── */
.sc-button:hover:not(:disabled):not([aria-disabled='true']):not(.sc-button--loading):not(.sc-button--ghost):not(
    .sc-button--underline
  ) {
  opacity: 0.92;
}

.sc-button:active:not(:disabled):not([aria-disabled='true']):not(.sc-button--loading):not(.sc-button--ghost):not(
    .sc-button--underline
  ) {
  opacity: 0.85;
}

.sc-button:focus-visible {
  outline: 2px solid rgb(12 10 62 / 0.35);
  outline-offset: 2px;
}

.sc-button:disabled,
.sc-button[aria-disabled='true'],
.sc-button.sc-button--loading {
  opacity: 0.38;
  cursor: not-allowed;
}

.sc-button.sc-button--loading {
  pointer-events: none;
}

a.sc-button[aria-disabled='true'] {
  pointer-events: none;
}

/* ── Icon / label / spinner ──────────────── */
.sc-button__icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--sc-button-icon-width, 20px);
  height: var(--sc-button-icon-height, 15px);
  overflow: hidden;
}

.sc-button__icon sc-icons {
  width: var(--sc-button-icon-width, 20px);
  height: var(--sc-button-icon-height, 15px);
}

/* Chip uses 14px icon glyphs per Figma. */
.sc-button--size-chip .sc-button__icon,
.sc-button--size-chip .sc-button__icon sc-icons {
  width: 14px;
  height: 14px;
}

.sc-button__label {
  flex-shrink: 1;
  min-width: 0;
  /* Labels stay on a single line. ``overflow-wrap: anywhere`` (the
     previous default) broke short labels like "Apply" mid-word into
     "Appl / y" whenever an ancestor was a tight flex container.
     Buttons typically prefer to grow horizontally and clip — match
     that expectation. */
  white-space: nowrap;
}

/*
 * DataTables export toolbar: Settings / Filter become icon-only on small
 * screens. Keep the label in the a11y tree (sr-only clip) so the control
 * name remains; badges (active filter count) stay visible.
 */
@media (max-width: 767.98px) {
  :host(.sc-table-toolbar-icon-sm) .sc-button {
    --sc-button-pad-x: 10px;
    gap: 4px;
    min-width: 44px;
    padding-left: var(--sc-button-pad-x);
    padding-right: var(--sc-button-pad-x);
  }

  :host(.sc-table-toolbar-icon-sm) .sc-button__label {
    border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }
}

.sc-button__badge {
  align-items: center;
  background: var(--sc-brand-blue, #0c0a3e);
  border-radius: 999px;
  color: var(--sc-white-normal, #fff);
  display: inline-flex;
  flex-shrink: 0;
  /* Smaller than --sc-font-size-xs (0.75rem) so the pill fits on sm buttons. */
  font-size: 0.625rem;
  font-weight: var(--sc-font-weight-semibold, 600);
  height: 1rem;
  justify-content: center;
  line-height: 1;
  min-width: 1rem;
  padding: 0 0.3rem;
}

/* Filled / primary / danger already use brand fills — invert the badge. */
.sc-button--filled .sc-button__badge,
.sc-button--primary .sc-button__badge,
.sc-button--danger .sc-button__badge {
  background: color-mix(in srgb, var(--sc-white-normal, #fff) 28%, transparent);
  color: inherit;
}

.sc-button__spinner {
  display: inline-block;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: sc-button-spin 0.6s linear infinite;
}

@keyframes sc-button-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ── styles/sc-calendar.css ── */
:host {
  display: inline-block;
  font-family: var(--sc-font-family-body, 'Work Sans'), sans-serif;
  color: var(--sc-brand-blue, #0C0A3E);
}

.sc-calendar {
  padding: var(--sc-space-md, 12px);
  min-width: 280px;
  box-sizing: border-box;
}

.sc-calendar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sc-space-md, 12px);
}

.sc-calendar__month-label {
  display: flex;
  align-items: center;
  gap: var(--sc-space-xs, 4px);
}

/* The month and year read as the header's label and open as native lists, so a phone shows its own
   wheel and a date years away is two picks. */
.sc-calendar__select {
  font: inherit;
  font-size: var(--sc-font-size-label, 14px);
  font-weight: var(--sc-font-weight-semibold, 600);
  color: inherit;
  background-color: transparent;
  border: 0;
  border-radius: var(--sc-border-radius-sm, 6px);
  padding: 2px 4px;
  cursor: pointer;
}

.sc-calendar__select:hover {
  background-color: var(--sc-blue-alpha05, #0C0A3E0D);
}

.sc-calendar__select:focus-visible {
  outline: 2px solid var(--sc-brand-blue, #0C0A3E);
  outline-offset: 2px;
}

.sc-calendar__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: var(--sc-border-radius-md, 8px);
  background: transparent;
  color: var(--sc-brand-blue, #0C0A3E);
  cursor: pointer;
}

.sc-calendar__nav:hover {
  background: var(--sc-blue-alpha05, #0C0A3E0D);
}

.sc-calendar__nav:focus-visible {
  outline: 2px solid var(--sc-brand-blue, #0C0A3E);
  outline-offset: 2px;
}

.sc-calendar__nav sc-icons {
  width: 5px;
  height: 8px;
  display: block;
}

.sc-calendar__nav--next sc-icons {
  transform: rotate(180deg);
}

.sc-calendar__grid {
  border-collapse: collapse;
  width: 100%;
}

.sc-calendar__grid th {
  font-size: var(--sc-font-size-caption, 12px);
  font-weight: var(--sc-font-weight-medium, 500);
  color: var(--sc-blue-muted, #374151);
  padding-bottom: var(--sc-space-sm, 8px);
}

.sc-calendar__grid td {
  text-align: center;
  padding: 2px;
}

.sc-calendar__day {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: var(--sc-border-radius-md, 8px);
  background: transparent;
  color: inherit;
  font-size: var(--sc-font-size-label, 14px);
  font-family: inherit;
  cursor: pointer;
}

.sc-calendar__day:hover:not(:disabled) {
  background: var(--sc-blue-alpha05, #0C0A3E0D);
}

.sc-calendar__day:focus-visible {
  outline: 2px solid var(--sc-brand-blue, #0C0A3E);
  outline-offset: 2px;
}

.sc-calendar__day--outside {
  color: var(--sc-gray-dark, #A1A5B1);
}

.sc-calendar__day:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

.sc-calendar__day--in-range {
  background: var(--sc-blue-alpha10, #0C0A3E1A);
  border-radius: 0;
}

.sc-calendar__day--endpoint {
  background: var(--sc-brand-blue, #0C0A3E);
  color: var(--sc-white-normal, #FFFFFF);
}

.sc-calendar__day--today:not(.sc-calendar__day--endpoint) {
  box-shadow: inset 0 0 0 1px var(--sc-brand-blue, #0C0A3E);
}

/* ── styles/sc-callout.css ── */
/* ScCallout — soft-tone banner for inline notifications, empty-state hints,
   and operator messages. Replaces ``alert alert-info``, ``alert alert-light``,
   ``alert alert-warning``, etc.

   Tones match ScStatusPill so the visual language stays cohesive across the
   compliance flow. */

:host {
  display: block;
}

.sc-callout {
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 12px;
  border: 1px solid transparent;
  color: var(--sc-brand-blue, #0C0A3E);
  font-family: var(--sc-font-family-body, 'Work Sans'), sans-serif;
  font-size: 14px;
  line-height: 20px;
}

/* Horizontal layout: title + slot content + right-side actions all on one
   row. Used for dashboard summary bars (Virtual Gate Insurance Clerk
   summary) where the operator scans left to right. */
.sc-callout--horizontal {
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
}

.sc-callout--horizontal .sc-callout__body {
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.sc-callout__actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sc-callout--info {
  background: var(--sc-brand-mint, #DEF3EF);
  border-color: var(--sc-green-alpha20, #068F3D33);
}

.sc-callout--neutral {
  background: var(--sc-gray-light, #F9FAFC);
  border-color: var(--sc-gray-normal, #E8E7EC);
  color: var(--sc-blue-muted, #374151);
}

.sc-callout--positive {
  background: var(--sc-green-muted, #E8F5E8);
  border-color: var(--sc-green-alpha20, #068F3D33);
  color: var(--sc-brand-green, #068F3D);
}

.sc-callout--warning {
  background: #FEF3C7;
  border-color: rgba(146, 64, 14, 0.2);
  color: #92400E;
}

.sc-callout--critical {
  background: var(--sc-red-muted, #F3EAEC);
  border-color: var(--sc-red-alpha20, #C0133D33);
  color: var(--sc-brand-red, #C0133D);
}

.sc-callout__icon {
  flex-shrink: 0;
  font-size: 18px;
  line-height: 20px;
}

.sc-callout__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.sc-callout__title {
  font-weight: 600;
}

.sc-callout__message {
  font-weight: 400;
}

/* ── styles/sc-category.css ── */
/* ScCategory — pill (default) + segmented grid cell */

:host {
  display: inline-block;
  box-sizing: border-box;
  max-width: 100%;
}

:host([variant='segmented']) {
  display: block;
  width: 100%;
  height: 100%;
  align-self: stretch;
  min-height: 0;
}

.sc-category {
  font-family: var(--sc-font-family-body);
  font-weight: var(--sc-font-weight-regular);
  font-size: 11px;
  line-height: 16.5px;
  letter-spacing: 0;
  color: var(--sc-brand-blue);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  gap: 0;

  min-height: 22px;
  padding: var(--sc-space-xs) 14px;
  border: var(--sc-border-width-thin) solid transparent;
  border-radius: var(--sc-border-radius-md);
  background-color: rgba(222, 243, 239, 0.6);
  cursor: pointer;
  appearance: none;
  text-decoration: none;
  margin: 0;
}

.sc-category--selected {
  border-color: var(--sc-brand-blue);
  gap: 6px;
}

.sc-category--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.sc-category__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 8px;
  color: var(--sc-brand-blue);
  flex: 0 0 auto;
}

.sc-category__icon svg {
  width: var(--sc-space-md, 12px);
  height: var(--sc-space-md, 12px);
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.sc-category__label {
  flex: 0 1 auto;
  text-align: left;
  white-space: nowrap;
}

/* --- Segmented (Smart Binder feature nav) --- */

.sc-category--segmented {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  /* Figma Smart Binder chip cell; no exact match on the spacing scale. */
  min-height: 39px;
  padding: 11px 9px;
  border: none;
  border-radius: 0;
  background-color: rgba(255, 255, 255, 0.7);
  color: var(--sc-brand-blue);
  font-size: 11px;
  line-height: 16.5px;
  /* Dividers are drawn by the Smart Binder chips grid host styles. */
  box-shadow: none;
  gap: 0;
}

.sc-category--segmented .sc-category__label {
  flex: 1 1 auto;
  text-align: center;
  white-space: normal;
  overflow-wrap: break-word;
  opacity: 0.5;
  font-weight: var(--sc-font-weight-regular);
}

.sc-category--segmented.sc-category--selected {
  background-color: var(--sc-brand-blue);
  color: var(--sc-white-normal);
  border-color: transparent;
  gap: 0;
}

.sc-category--segmented.sc-category--selected .sc-category__label {
  opacity: 1;
  font-weight: var(--sc-font-weight-semibold);
  color: var(--sc-white-normal);
}

.sc-category--segmented.sc-category--disabled {
  opacity: 0.5;
}

.sc-category__count {
  align-items: center;
  background: var(--sc-brand-blue, #0c0a3e);
  border-radius: 50%;
  color: var(--sc-white-normal, #fff);
  display: inline-flex;
  flex-shrink: 0;
  font-size: 0.625rem;
  font-weight: var(--sc-font-weight-semibold, 600);
  height: 1.25rem;
  justify-content: center;
  line-height: 1;
  min-width: 1.25rem;
  padding: 0 0.2rem;
  box-sizing: border-box;
}

.sc-category--selected .sc-category__count {
  background: color-mix(in srgb, var(--sc-white-normal, #fff) 28%, transparent);
  color: inherit;
}

.sc-category:has(.sc-category__count) {
  gap: 6px;
}

.sc-category--segmented.sc-category--selected:has(.sc-category__count) {
  gap: 6px;
}

.sc-category--segmented.sc-category--selected .sc-category__count {
  background: color-mix(in srgb, var(--sc-white-normal, #fff) 28%, transparent);
  color: var(--sc-white-normal, #fff);
}

/* ── styles/sc-ccip-claims-table.css ── */
/* ScCcipClaimsTable — Claims table row variants */

:host {
  display: block;
  width: 100%;
}

/* ── Base row ─────────────────────────────────────────────────────────────── */
.sc-ccip-claims-table {
  position: relative;
  box-sizing: border-box;
  width: 100%;
}

/* ── Header row ───────────────────────────────────────────────────────────── */
.sc-ccip-claims-table--header {
  height: 2.6875rem;
  display: grid;
  grid-template-columns: var(
    --sc-ccip-claims-table-columns,
    52px minmax(251px, 251fr) minmax(187px, 187fr) minmax(252px, 252fr) minmax(177px, 177fr) minmax(245px, 245fr) minmax(136px, 136fr)
  );
  align-items: center;
  min-width: 1300px;
  padding: 0;
  gap: 0;
}

.sc-ccip-claims-table__header-bg {
  position: absolute;
  inset: 0;
  background: #f9fafb;
  border-top: 1px solid #e5e7eb;
  border-left: 1px solid #e5e7eb;
  border-right: 1px solid #e5e7eb;
  border-radius: 10px 10px 0 0;
}

.sc-ccip-claims-table__header-label {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 0 1.25rem;
  font-family: 'Work Sans', sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #4a5565;
  white-space: nowrap;
}

.sc-ccip-claims-table__header-label--actions {
  justify-content: center;
}

.sc-ccip-claims-table__info-icon {
  flex-shrink: 0;
}

.sc-ccip-claims-table__selector-cell {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 100%;
  border-right: 1px solid #f3f4f6;
}

.sc-ccip-claims-table__selector-cell--header {
  border-right-color: #e5e7eb;
}

.sc-ccip-claims-table__selector-square {
  position: relative;
  width: 12px;
  height: 12px;
  padding: 0;
  border: 1px solid #0c0a3e;
  border-radius: 3px;
  background: #fff;
  cursor: pointer;
}

.sc-ccip-claims-table__selector-inner {
  position: absolute;
  inset: 3px;
  border: 1px solid #0c0a3e;
  border-radius: 1px;
  opacity: 0.2;
}

.sc-ccip-claims-table__selector-square[aria-pressed='true'] .sc-ccip-claims-table__selector-inner {
  background: #0c0a3e;
  opacity: 1;
}

/* ── Item row ─────────────────────────────────────────────────────────────── */
.sc-ccip-claims-table--item {
  display: grid;
  grid-template-columns: var(
    --sc-ccip-claims-table-columns,
    52px minmax(251px, 251fr) minmax(187px, 187fr) minmax(252px, 252fr) minmax(177px, 177fr) minmax(245px, 245fr) minmax(136px, 136fr)
  );
  align-items: center;
  min-width: 1300px;
  padding: 0;
  gap: 0;
  min-height: 9.375rem;
  background: #fff;
  border-bottom: 1px solid #efefef;
  box-sizing: border-box;
}

.sc-ccip-claims-table__cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  height: 100%;
  padding: 1rem 1.25rem;
}

/* ── Claim ID column ──────────────────────────────────────────────────────── */
.sc-ccip-claims-table__claim-id-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.sc-ccip-claims-table__claim-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sc-ccip-claims-table__claim-date {
  font-family: 'Work Sans', sans-serif;
  font-size: 14px;
  color: #0c0a3e;
  margin: 0;
  line-height: 18px;
}

.sc-ccip-claims-table__claim-number {
  display: inline-block;
  font-family: 'Work Sans', sans-serif;
  font-size: 14px;
  font-style: italic;
  color: #0c0a3e;
  opacity: 0.5;
  margin: 0;
  line-height: 18px;
}

.sc-ccip-claims-table__claim-parties {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: 'Work Sans', sans-serif;
  font-size: 14px;
  color: #0c0a3e;
}

.sc-ccip-claims-table__claim-parties p {
  margin: 0;
  line-height: 18px;
  overflow-wrap: anywhere;
}

.sc-ccip-claims-table__link {
  text-decoration: underline;
  cursor: pointer;
}

.sc-ccip-claims-table__claim-status {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: 'Work Sans', sans-serif;
  font-size: 14px;
  color: #0c0a3e;
  flex-wrap: wrap;
}

.sc-ccip-claims-table__status-label {
  margin: 0;
  line-height: 18px;
}

/* Status badges */
.sc-ccip-claims-table__status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.375rem;
  box-sizing: border-box;
  min-width: 9.8125rem;
  padding: 0.25rem 0.875rem;
  border-radius: 0.5rem;
  font-family: 'Work Sans', sans-serif;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.sc-ccip-claims-table__status--closed {
  background: rgba(219, 254, 194, 0.6);
  color: #45a600;
}

.sc-ccip-claims-table__status--open {
  background: rgba(254, 194, 194, 0.6);
  color: #a61300;
}

/* ── Claim Info column ────────────────────────────────────────────────────── */
.sc-ccip-claims-table__claim-info-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.sc-ccip-claims-table__claim-type-label {
  font-family: 'Work Sans', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #0c0a3e;
  opacity: 0.5;
  text-transform: uppercase;
  margin: 0;
}

.sc-ccip-claims-table__claim-description {
  font-family: 'Work Sans', sans-serif;
  font-size: 12px;
  color: #0c0a3e;
  margin: 0;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* ── CTA link buttons ─────────────────────────────────────────────────────── */
.sc-ccip-claims-table__cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  border-bottom: 1px solid #0c0a3e;
  padding: 4px 5px;
  cursor: pointer;
  font-family: 'Work Sans', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #0c0a3e;
  align-self: flex-start;
  text-decoration: none;
}

.sc-ccip-claims-table__cta:hover,
.sc-ccip-claims-table__cta:focus {
  color: #0c0a3e;
  text-decoration: none;
}

.sc-ccip-claims-table__cta-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* ── Breakdown cell (Total Incurred) ──────────────────────────────────────── */
.sc-ccip-claims-table__breakdown {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 12rem;
  max-width: 100%;
  min-width: 0;
}

.sc-ccip-claims-table__breakdown-rows {
  display: flex;
  gap: 4px;
  align-items: flex-start;
  min-width: 0;
}

.sc-ccip-claims-table__breakdown-labels {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.sc-ccip-claims-table__breakdown-row {
  display: flex;
  justify-content: space-between;
  font-family: 'Work Sans', sans-serif;
  font-size: 14px;
  color: #6a7282;
  line-height: 18px;
  gap: 8px;
}

.sc-ccip-claims-table__breakdown-row span {
  overflow-wrap: anywhere;
}

.sc-ccip-claims-table__breakdown-label-with-icon {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.sc-ccip-claims-table__breakdown-ops {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: 'Work Sans', sans-serif;
  font-size: 14px;
  color: #6a7282;
  padding-top: 2px;
  line-height: 18px;
}

.sc-ccip-claims-table__breakdown-divider {
  border: none;
  border-top: 1px solid #9ca3af;
  margin: 0;
}

.sc-ccip-claims-table__breakdown-total {
  display: flex;
  justify-content: flex-end;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.8);
}

/* ── Add'l Contingency column ─────────────────────────────────────────────── */
.sc-ccip-claims-table__contingency-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

/* ── Amount (bold) ────────────────────────────────────────────────────────── */
.sc-ccip-claims-table__amount {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.8);
  letter-spacing: -0.154px;
  overflow-wrap: anywhere;
}

/* ── Actions column ───────────────────────────────────────────────────────── */
.sc-ccip-claims-table__actions-cell {
  align-items: center;
  gap: 9px;
}

.sc-ccip-claims-table__actions-cell .sc-ccip-claims-table__cta {
  align-self: center;
}

/* ── Mobile card stack (≤ 767px) ──────────────────────────────────────────── */
@media (max-width: 767px) {
  .sc-ccip-claims-table--header {
    display: none;
  }

  .sc-ccip-claims-table--item {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    min-width: 0;
    min-height: auto;
    padding: 16px;
  }

  .sc-ccip-claims-table__selector-cell {
    justify-content: flex-start;
    height: auto;
    border-right: 0;
  }

  .sc-ccip-claims-table__cell {
    align-items: flex-start;
    gap: 6px;
    height: auto;
    padding: 0;
  }

  .sc-ccip-claims-table__cell[data-label]::before {
    content: attr(data-label);
    display: block;
    font-family: 'Work Sans', sans-serif;
    font-size: 10px;
    font-weight: 500;
    line-height: normal;
    text-transform: uppercase;
    color: #0c0a3e;
    opacity: 0.5;
  }
}

/* ── styles/sc-ccip-compliance-table.css ── */
/* ScCcipComplianceTable — CCIP compliance table row variants */

/* ── Host ─────────────────────────────────────────────────────────────────── */
:host {
  display: block;
  width: 100%;
}

:host([page='main']) {
  width: 100%;
}

:host([page='settings']) {
  width: 100%;
}

/* ── Base row ─────────────────────────────────────────────────────────────── */
.sc-ccip-compliance-table {
  position: relative;
  box-sizing: border-box;
}

/* ── Page-level widths ────────────────────────────────────────────────────── */
.sc-ccip-compliance-table--main {
  width: 100%;
}

.sc-ccip-compliance-table--settings {
  width: 100%;
}

.sc-ccip-compliance-table--settings.sc-ccip-compliance-table--header,
.sc-ccip-compliance-table--settings.sc-ccip-compliance-table--item {
  display: grid;
  grid-template-columns:
    minmax(10rem, 1.2fr)
    minmax(8rem, 0.9fr)
    minmax(9rem, 1fr)
    minmax(14rem, 2fr)
    auto;
  align-items: center;
  gap: 16px;
  padding: 0 20px;
}

/* ── Row heights ──────────────────────────────────────────────────────────── */
.sc-ccip-compliance-table--header,
.sc-ccip-compliance-table--sub-header {
  height: 43px;
}

.sc-ccip-compliance-table--main.sc-ccip-compliance-table--sub-header {
  display: flex;
  align-items: center;
}

/* Grid layout shared by main-page header and all main-page data rows */
.sc-ccip-compliance-table--main.sc-ccip-compliance-table--header,
.sc-ccip-compliance-table--main.sc-ccip-compliance-table--company-row {
  display: grid;
  grid-template-columns:
    minmax(140px, 1.4fr)
    minmax(160px, 1.3fr)
    minmax(140px, 1.1fr)
    minmax(100px, 0.9fr)
    minmax(80px,  0.5fr);
  align-items: center;
  padding: 0 20px;
}

.sc-ccip-compliance-table--company-row {
  min-height: 150px;
  /* Vertical padding so badges (especially the new Documents and Limits
     rows in the Insurance cell, which can push the cell content past the
     150px min-height) don't sit flush against the row's bottom border. */
  padding-top: 16px;
  padding-bottom: 16px;
  background-color: #ffffff;
  border-bottom: 1px solid #f8f8f8;
}

.sc-ccip-compliance-table--item {
  min-height: 50px;
  background-color: #ffffff;
  border-bottom: 1px solid #f8f8f8;
  padding-block: 16px;
}

/* ── Header background ────────────────────────────────────────────────────── */
.sc-ccip-compliance-table__header-bg {
  position: absolute;
  inset: 0;
  background-color: #f9fafb;
  border: 1px solid #e5e7eb;
  border-bottom: none;
  border-radius: 10px 10px 0 0;
}

/* ── Sub-header background ────────────────────────────────────────────────── */
.sc-ccip-compliance-table__sub-header-bg {
  position: absolute;
  inset: 0;
  background-color: var(--sc-brand-mint, #def3ef);
  border: 1px solid #e5e7eb;
}

/* ── Header column labels ─────────────────────────────────────────────────── */
.sc-ccip-compliance-table__header-label {
  position: absolute;
  top: 13px;
  font-family: var(--sc-font-family-body, 'Work Sans', sans-serif);
  font-weight: var(--sc-font-weight-regular, 400);
  font-size: var(--sc-font-size-caption, 12px);
  line-height: 18px;
  color: #4a5565;
  white-space: nowrap;
}

/* Main-page header labels are grid items, not absolutely positioned.
   z-index: 1 keeps them above the absolutely-positioned __header-bg sibling. */
.sc-ccip-compliance-table--main .sc-ccip-compliance-table__header-label {
  position: relative;
  top: auto;
  z-index: 1;
}

.sc-ccip-compliance-table--settings .sc-ccip-compliance-table__header-label {
  position: relative;
  top: auto;
  z-index: 1;
}

/* ── Sub-header company name ──────────────────────────────────────────────── */
/* position:relative + z-index:1 keeps the name above the absolutely-positioned __sub-header-bg */
.sc-ccip-compliance-table__sub-header-name {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  height: 100%;
  padding-left: 20px;
  font-family: var(--sc-font-family-body, 'Work Sans', sans-serif);
  font-weight: var(--sc-font-weight-regular, 400);
  font-size: var(--sc-font-size-label, 14px);
  line-height: 18px;
  color: #0c0a3e;
  white-space: normal;
}

/* ── Vertically-centered cell ─────────────────────────────────────────────── */
.sc-ccip-compliance-table__cell {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

/* Main-page cells are grid items — no absolute positioning */
.sc-ccip-compliance-table--main .sc-ccip-compliance-table__cell {
  position: static;
  transform: none;
}

.sc-ccip-compliance-table--settings .sc-ccip-compliance-table__cell {
  position: static;
  transform: none;
  min-width: 0;
}

/* Main-page content blocks fill their grid cell (overrides legacy fixed widths) */
.sc-ccip-compliance-table--main .sc-ccip-compliance-table__activity {
  width: 100%;
}

/* ── Column positions — main page ─────────────────────────────────────────── */
/* left: values removed — grid auto-placement handles column order */
.sc-ccip-compliance-table__col-company-main   { }
.sc-ccip-compliance-table__col-company-sub    { padding-left: 20px; } /* sub-indent */
.sc-ccip-compliance-table__col-activity       { }
.sc-ccip-compliance-table__col-insurance      { }
.sc-ccip-compliance-table__col-status         { }
.sc-ccip-compliance-table__col-actions-main   { }

/* ── Column positions — main page header labels ───────────────────────────── */
.sc-ccip-compliance-table__col-header-company  { }
.sc-ccip-compliance-table__col-header-activity { }
.sc-ccip-compliance-table__col-header-insurance { }
.sc-ccip-compliance-table__col-header-status   { }
.sc-ccip-compliance-table__col-header-actions  { }

/* ── Column positions — settings page ────────────────────────────────────── */
.sc-ccip-compliance-table__col-settings-company        { left: 20px; }
.sc-ccip-compliance-table__col-settings-created-by     { left: 193px; }
.sc-ccip-compliance-table__col-settings-excluded-since { left: 334px; }
.sc-ccip-compliance-table__col-settings-reason         { left: 501px; }
.sc-ccip-compliance-table__col-settings-reason--full   { width: auto; line-height: 18px; }
.sc-ccip-compliance-table__col-settings-actions-header { left: 1132px; }
.sc-ccip-compliance-table__col-settings-actions-item   { left: 1128px; }

/* ── Company info block ───────────────────────────────────────────────────── */
.sc-ccip-compliance-table__company {
  display: flex;
  flex-direction: column;
  gap: var(--sc-space-xl, 20px);
  width: 100%;
  min-width: 0;
}

.sc-ccip-compliance-table__company--main {
  gap: var(--sc-space-sm, 10px);
  width: 100%;
}

.sc-ccip-compliance-table__company-name {
  font-family: var(--sc-font-family-body, 'Work Sans', sans-serif);
  font-weight: var(--sc-font-weight-bold, 700);
  font-size: var(--sc-font-size-label, 14px);
  line-height: 18px;
  color: #0c0a3e;
  margin: 0;
}

.sc-ccip-compliance-table__company-sub-label {
  font-family: var(--sc-font-family-body, 'Work Sans', sans-serif);
  font-weight: var(--sc-font-weight-regular, 400);
  font-size: var(--sc-font-size-label, 14px);
  line-height: 18px;
  color: #0c0a3e;
  margin: 0;
}

.sc-ccip-compliance-table__company-contract {
  font-family: var(--sc-font-family-body, 'Work Sans', sans-serif);
  font-style: italic;
  font-weight: var(--sc-font-weight-regular, 400);
  font-size: var(--sc-font-size-label, 14px);
  line-height: 18px;
  color: #0c0a3e;
  opacity: 0.5;
  margin: 0;
}

/* ── Sub-company name group ───────────────────────────────────────────────── */
.sc-ccip-compliance-table__company-sub-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── Jobsite activity stats ───────────────────────────────────────────────── */
.sc-ccip-compliance-table__activity {
  display: flex;
  flex-direction: column;
  gap: var(--sc-space-sm, 10px);
  font-family: var(--sc-font-family-body, 'Work Sans', sans-serif);
  font-weight: var(--sc-font-weight-regular, 400);
  font-size: var(--sc-font-size-caption, 12px);
  line-height: normal;
  color: #0c0a3e;
  width: 100%;
  min-width: 0;
}

.sc-ccip-compliance-table__activity-group {
  display: flex;
  flex-direction: column;
}

.sc-ccip-compliance-table__activity p {
  margin: 0;
  white-space: normal;
}

/* ── Insurance/compliance block ───────────────────────────────────────────── */
.sc-ccip-compliance-table__insurance {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sc-ccip-compliance-table__insurance-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.sc-ccip-compliance-table__insurance-label {
  font-family: var(--sc-font-family-body, 'Work Sans', sans-serif);
  font-weight: var(--sc-font-weight-regular, 400);
  font-size: var(--sc-font-size-label, 14px);
  line-height: 18px;
  color: #6a7282;
}

.sc-ccip-compliance-table__insurance-row {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* ── Status badge ─────────────────────────────────────────────────────────── */
.sc-ccip-compliance-table__badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 130px;
  min-width: 130px;
  max-width: 130px;
  height: 22px;
  padding: 4px 14px;
  border-radius: var(--sc-border-radius-md, 8px);
  background-color: rgba(219, 254, 194, 0.6);
  box-sizing: border-box;
  border: 1px solid transparent;
  font-family: var(--sc-font-family-body, 'Work Sans', sans-serif);
  font-weight: var(--sc-font-weight-medium, 500);
  font-size: var(--sc-font-size-caption, 12px);
  line-height: normal;
  white-space: nowrap;
}

.sc-ccip-compliance-table__badge--has-tooltip {
  cursor: help;
}

.sc-ccip-compliance-table__badge--green {
  background: rgba(219, 254, 194, 0.6);
  color: #45a600;
  border-color: rgba(69, 166, 0, 0.25);
}

.sc-ccip-compliance-table__badge--yellow {
  background: rgba(254, 249, 194, 0.6);
  color: #a65f00;
  border-color: rgba(166, 95, 0, 0.25);
}

.sc-ccip-compliance-table__badge--red {
  background: rgba(254, 194, 194, 0.6);
  color: #a60000;
  border-color: rgba(166, 0, 0, 0.25);
}

.sc-ccip-compliance-table__badge--gray {
  background: rgba(220, 220, 220, 0.5);
  color: #5a6070;
  border-color: rgba(90, 96, 112, 0.2);
}

.sc-ccip-compliance-table__tooltip-trigger {
  all: unset;
  display: flex;
  align-items: flex-start;
  flex-shrink: 0;
  cursor: pointer;
  width: 20px;
  height: 20px;
  position: relative;
  color: var(--sc-brand-blue, #0c0a3e);
}

.sc-ccip-compliance-table__tooltip-trigger svg {
  width: 20px;
  height: 20px;
  display: block;
}

.sc-ccip-compliance-table__tooltip-trigger::before,
.sc-ccip-compliance-table__tooltip-trigger::after,
.sc-ccip-compliance-table__badge--has-tooltip::before,
.sc-ccip-compliance-table__badge--has-tooltip::after {
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition:
    opacity 0.15s ease,
    transform 0.15s ease,
    visibility 0.15s ease;
  pointer-events: none;
}

.sc-ccip-compliance-table__tooltip-trigger::before,
.sc-ccip-compliance-table__badge--has-tooltip::before {
  content: "";
  position: absolute;
  right: 4px;
  bottom: calc(100% + 2px);
  border-width: 6px 6px 0 6px;
  border-style: solid;
  border-color: var(--sc-brand-blue, #0c0a3e) transparent transparent transparent;
  z-index: 12;
}

.sc-ccip-compliance-table__tooltip-trigger::after,
.sc-ccip-compliance-table__badge--has-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  right: -8px;
  bottom: calc(100% + 8px);
  width: max-content;
  max-width: 240px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--sc-brand-blue, #0c0a3e);
  color: var(--sc-white-normal, #fff);
  font-family: var(--sc-font-family-body, 'Work Sans', sans-serif);
  font-size: 12px;
  line-height: 1.4;
  text-align: left;
  white-space: normal;
  box-shadow: 0 8px 24px rgba(12, 10, 62, 0.18);
  z-index: 11;
}

.sc-ccip-compliance-table__tooltip-trigger:hover::before,
.sc-ccip-compliance-table__tooltip-trigger:hover::after,
.sc-ccip-compliance-table__tooltip-trigger:focus-visible::before,
.sc-ccip-compliance-table__tooltip-trigger:focus-visible::after,
.sc-ccip-compliance-table__badge--has-tooltip:hover::before,
.sc-ccip-compliance-table__badge--has-tooltip:hover::after,
.sc-ccip-compliance-table__badge--has-tooltip:focus-visible::before,
.sc-ccip-compliance-table__badge--has-tooltip:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* ── CTA action buttons ───────────────────────────────────────────────────── */
.sc-ccip-compliance-table__ctas {
  display: flex;
  flex-direction: column;
  gap: 9px;
  width: 90px;
}

slot[name='actions']::slotted(*) {
  display: block;
}

.sc-ccip-compliance-table__cta {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 5px;
  padding: 0 5px 4px 5px;
  border: none;
  border-bottom: 1px solid #0c0a3e;
  background: transparent;
  cursor: pointer;
  font-family: var(--sc-font-family-body, 'Work Sans', sans-serif);
  font-weight: var(--sc-font-weight-medium, 500);
  font-size: var(--sc-font-size-caption, 12px);
  line-height: normal;
  color: #0c0a3e;
  white-space: nowrap;
  text-align: left;
}

.sc-ccip-compliance-table__cta:hover {
  opacity: 0.7;
}

.sc-ccip-compliance-table__cta-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 15px;
  overflow: hidden;
}

/* ── Missing TPA/SC company block ─────────────────────────────────────────── */
.sc-ccip-compliance-table__missing-company {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: min(100%, 220px);
  min-width: 0;
}

.sc-ccip-compliance-table__missing-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.sc-ccip-compliance-table__missing-reports {
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: #0c0a3e;
  flex: 1;
  min-width: 0;
}

.sc-ccip-compliance-table__missing-report {
  width: 100%;
  min-width: 0;
}

.sc-ccip-compliance-table__missing-report--offset {
  /* No additional margin — the flex gap handles the visual separation. */
}

.sc-ccip-compliance-table__missing-report-label {
  font-family: var(--sc-font-family-body, 'Work Sans', sans-serif);
  font-weight: var(--sc-font-weight-medium, 500);
  font-size: 10px;
  line-height: normal;
  color: #0c0a3e;
  opacity: 0.5;
  text-transform: uppercase;
  white-space: nowrap;
  margin: 0;
}

.sc-ccip-compliance-table__missing-report-value {
  font-family: var(--sc-font-family-body, 'Work Sans', sans-serif);
  font-size: var(--sc-font-size-label, 14px);
  line-height: 18px;
  color: #0c0a3e;
  margin: 0;
  min-width: 0;
  width: 100%;
  overflow-wrap: anywhere;
}

.sc-ccip-compliance-table__missing-report-value--bold {
  font-weight: var(--sc-font-weight-bold, 700);
}

.sc-ccip-compliance-table__missing-report-value--normal {
  font-weight: var(--sc-font-weight-regular, 400);
}

.sc-ccip-compliance-table__link-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 29px;
  height: 29px;
  background-color: rgba(192, 19, 61, 0.1);
  border-radius: 3.867px;
  flex-shrink: 0;
  font-size: 20px;
}

.sc-ccip-compliance-table__missing-contract {
  font-family: var(--sc-font-family-body, 'Work Sans', sans-serif);
  font-style: italic;
  font-weight: var(--sc-font-weight-regular, 400);
  font-size: var(--sc-font-size-label, 14px);
  line-height: 18px;
  color: #0c0a3e;
  opacity: 0.5;
  width: 100%;
  margin: 0;
}

/* ── Settings item text ───────────────────────────────────────────────────── */
.sc-ccip-compliance-table__item-text {
  font-family: var(--sc-font-family-body, 'Work Sans', sans-serif);
  font-weight: var(--sc-font-weight-regular, 400);
  font-size: var(--sc-font-size-label, 14px);
  line-height: 18px;
  color: #0c0a3e;
  overflow-wrap: anywhere;
}

/* ── Mobile card stack (≤ 767px) ──────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Hide header row — inline data-label pseudo-elements replace it */
  :host([page='main']) .sc-ccip-compliance-table--header {
    display: none;
  }

  /* Switch data rows from grid to vertical card */
  .sc-ccip-compliance-table--main.sc-ccip-compliance-table--company-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: unset;
    padding: 16px;
    gap: 16px;
  }

  /* Reset cell positioning — cells stack in DOM order */
  .sc-ccip-compliance-table--main .sc-ccip-compliance-table__cell {
    position: static;
    transform: none;
    align-self: unset;
  }

  /* Section label above each cell's content */
  .sc-ccip-compliance-table--main .sc-ccip-compliance-table__cell[data-label]::before {
    content: attr(data-label);
    display: block;
    font-family: var(--sc-font-family-body, 'Work Sans', sans-serif);
    font-size: 10px;
    font-weight: var(--sc-font-weight-medium, 500);
    line-height: normal;
    text-transform: uppercase;
    color: #0c0a3e;
    opacity: 0.5;
    margin-bottom: 6px;
  }

  /* Allow company and activity blocks to fill the card width */
  .sc-ccip-compliance-table--main .sc-ccip-compliance-table__company,
  .sc-ccip-compliance-table--main .sc-ccip-compliance-table__activity,
  .sc-ccip-compliance-table--main .sc-ccip-compliance-table__missing-company {
    width: 100%;
  }

  /* __ctas (actions) and __badge keep their fixed widths — buttons stay compact on mobile */

  :host([page='settings']) .sc-ccip-compliance-table--header {
    display: none;
  }

  .sc-ccip-compliance-table--settings.sc-ccip-compliance-table--item {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding: 16px;
  }

  .sc-ccip-compliance-table--settings .sc-ccip-compliance-table__cell {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .sc-ccip-compliance-table--settings .sc-ccip-compliance-table__col-settings-company::before,
  .sc-ccip-compliance-table--settings .sc-ccip-compliance-table__col-settings-created-by::before,
  .sc-ccip-compliance-table--settings .sc-ccip-compliance-table__col-settings-excluded-since::before,
  .sc-ccip-compliance-table--settings .sc-ccip-compliance-table__col-settings-reason::before,
  .sc-ccip-compliance-table--settings .sc-ccip-compliance-table__col-settings-actions-item::before {
    display: block;
    font-family: var(--sc-font-family-body, 'Work Sans', sans-serif);
    font-size: 10px;
    font-weight: var(--sc-font-weight-medium, 500);
    line-height: normal;
    text-transform: uppercase;
    color: #0c0a3e;
    opacity: 0.5;
  }

  .sc-ccip-compliance-table--settings .sc-ccip-compliance-table__col-settings-company::before {
    content: 'Company';
  }

  .sc-ccip-compliance-table--settings .sc-ccip-compliance-table__col-settings-created-by::before {
    content: 'Created By';
  }

  .sc-ccip-compliance-table--settings .sc-ccip-compliance-table__col-settings-excluded-since::before {
    content: 'Excluded Since';
  }

  .sc-ccip-compliance-table--settings .sc-ccip-compliance-table__col-settings-reason::before {
    content: 'Reason';
  }

  .sc-ccip-compliance-table--settings .sc-ccip-compliance-table__col-settings-actions-item::before {
    content: 'Actions';
  }

}

/* ── styles/sc-ccip-contract-amount-detail-table.css ── */
/* ScCcipContractAmountDetailTable — Monthly contract amount detail row */

:host {
  display: block;
  width: 100%;
}

.sc-ccip-contract-amount-detail-table {
  position: relative;
  box-sizing: border-box;
  width: 100%;
}

/* ── Header ───────────────────────────────────────────────────────────────── */
.sc-ccip-contract-amount-detail-table--header {
  height: 43px;
  display: grid;
  grid-template-columns:
    minmax(9rem, 37fr)
    minmax(14rem, 51fr)
    minmax(7rem, 12fr);
  align-items: center;
  padding: 0 20px;
  gap: 16px;
}

.sc-ccip-contract-amount-detail-table__header-bg {
  position: absolute;
  inset: 0;
  background: #f9fafb;
  border-top: 1px solid #e5e7eb;
  border-left: 1px solid #e5e7eb;
  border-right: 1px solid #e5e7eb;
  border-radius: 10px 10px 0 0;
}

.sc-ccip-contract-amount-detail-table__header-label {
  position: relative;
  z-index: 1;
  min-width: 0;
  font-family: 'Work Sans', sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #4a5565;
  white-space: nowrap;
}

/* ── Item row (compact — 82px) ────────────────────────────────────────────── */
.sc-ccip-contract-amount-detail-table--item {
  display: grid;
  grid-template-columns:
    minmax(9rem, 37fr)
    minmax(14rem, 51fr)
    minmax(7rem, 12fr);
  align-items: center;
  padding: 0 20px;
  gap: 16px;
  min-height: 82px;
  background: #fff;
  border-bottom: 1px solid #efefef;
  box-sizing: border-box;
}

.sc-ccip-contract-amount-detail-table__cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  height: 100%;
}

/* ── Month Invoice column ─────────────────────────────────────────────────── */
.sc-ccip-contract-amount-detail-table__month {
  font-family: 'Work Sans', sans-serif;
  font-size: 14px;
  color: #0c0a3e;
  margin: 0;
  line-height: 18px;
}

/* ── Total Completed column ───────────────────────────────────────────────── */
.sc-ccip-contract-amount-detail-table__total {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.8);
  letter-spacing: -0.154px;
  overflow-wrap: anywhere;
}

/* ── Completion Progress column ───────────────────────────────────────────── */
.sc-ccip-contract-amount-detail-table__col-progress {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ── Mobile card stack (≤ 767px) ──────────────────────────────────────────── */
@media (max-width: 767px) {
  .sc-ccip-contract-amount-detail-table--header {
    display: none;
  }

  .sc-ccip-contract-amount-detail-table--item {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    min-height: auto;
    padding: 16px;
  }

  .sc-ccip-contract-amount-detail-table__cell {
    align-items: flex-start;
    gap: 6px;
    height: auto;
  }

  .sc-ccip-contract-amount-detail-table__cell[data-label]::before {
    content: attr(data-label);
    display: block;
    font-family: 'Work Sans', sans-serif;
    font-size: 10px;
    font-weight: 500;
    line-height: normal;
    text-transform: uppercase;
    color: #0c0a3e;
    opacity: 0.5;
  }

  .sc-ccip-contract-amount-detail-table__col-progress {
    justify-content: flex-start;
  }
}

/* ── styles/sc-ccip-contract-amount-table.css ── */
/* ScCcipContractAmountTable — Contract amount table row variants */

:host {
  display: block;
  width: 1300px;
  max-width: 100%;
  min-width: 1300px;
}

.sc-ccip-contract-amount-table {
  --sc-ccip-contract-amount-table-columns: 279fr 322fr 236fr 153fr 130fr 140fr;

  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-width: 1300px;
}

/* ── Header ───────────────────────────────────────────────────────────────── */
.sc-ccip-contract-amount-table--header {
  height: 43px;
  display: grid;
  grid-template-columns: var(--sc-ccip-contract-amount-table-columns);
  align-items: center;
  padding: 0 20px;
  gap: 0;
}

.sc-ccip-contract-amount-table__header-bg {
  position: absolute;
  inset: 0;
  background: #f9fafb;
  border-top: 1px solid #e5e7eb;
  border-left: 1px solid #e5e7eb;
  border-right: 1px solid #e5e7eb;
  border-radius: 10px 10px 0 0;
}

.sc-ccip-contract-amount-table__header-label {
  position: relative;
  z-index: 1;
  min-width: 0;
  font-family: 'Work Sans', sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  color: #4a5565;
  white-space: nowrap;
}

/* ── Item rows (main-company and sub-company) ─────────────────────────────── */
.sc-ccip-contract-amount-table--main-company,
.sc-ccip-contract-amount-table--sub-company {
  display: grid;
  grid-template-columns: var(--sc-ccip-contract-amount-table-columns);
  align-items: center;
  padding: 16px 20px;
  gap: 0;
  min-height: 150px;
  background: #fff;
  border-bottom: 1px solid #efefef;
  box-sizing: border-box;
}

/* Sub-company indents the company cell */
.sc-ccip-contract-amount-table--sub-company .sc-ccip-contract-amount-table__col-company {
  padding-left: 20px;
}

.sc-ccip-contract-amount-table__cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  height: 100%;
}

.sc-ccip-contract-amount-table__col-progress {
  box-sizing: border-box;
  width: 100%;
}

/* ── Company column ───────────────────────────────────────────────────────── */
.sc-ccip-contract-amount-table__company-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.sc-ccip-contract-amount-table__company-link {
  font-family: 'Work Sans', sans-serif;
  font-size: 14px;
  color: #0c0a3e;
  text-decoration: underline;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  overflow-wrap: anywhere;
}

.sc-ccip-contract-amount-table__sub-of {
  font-family: 'Work Sans', sans-serif;
  font-size: 14px;
  color: #0c0a3e;
  margin: 0;
  line-height: 18px;
  overflow-wrap: anywhere;
}

.sc-ccip-contract-amount-table__awarded {
  display: flex;
  gap: 5px;
  align-items: center;
  font-family: 'Work Sans', sans-serif;
  font-size: 14px;
  color: #6a7282;
  line-height: 18px;
  flex-wrap: wrap;
}

/* ── Contract Value breakdown ─────────────────────────────────────────────── */
.sc-ccip-contract-amount-table__breakdown {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 261px;
  max-width: 100%;
  min-width: 0;
}

.sc-ccip-contract-amount-table__breakdown-rows {
  display: flex;
  gap: 4px;
  align-items: flex-start;
  min-width: 0;
}

.sc-ccip-contract-amount-table__breakdown-labels {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.sc-ccip-contract-amount-table__breakdown-row {
  display: flex;
  justify-content: space-between;
  font-family: 'Work Sans', sans-serif;
  font-size: 14px;
  color: #6a7282;
  line-height: 18px;
  gap: 8px;
}

.sc-ccip-contract-amount-table__breakdown-row span {
  overflow-wrap: anywhere;
}

.sc-ccip-contract-amount-table__breakdown-ops {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: 'Work Sans', sans-serif;
  font-size: 14px;
  color: #6a7282;
  padding-top: 2px;
  line-height: 18px;
}

.sc-ccip-contract-amount-table__breakdown-divider {
  border: none;
  border-top: 1px solid #9ca3af;
  margin: 0;
}

.sc-ccip-contract-amount-table__breakdown-total {
  display: flex;
  justify-content: flex-end;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.8);
  letter-spacing: -0.154px;
}

/* ── Bold amount ──────────────────────────────────────────────────────────── */
.sc-ccip-contract-amount-table__amount {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.8);
  letter-spacing: -0.154px;
  overflow-wrap: anywhere;
}

/* ── Completion Progress ──────────────────────────────────────────────────── */
.sc-ccip-contract-amount-table__col-progress {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding-left: 44px;
}

/* ── Mobile card stack (≤ 767px) ──────────────────────────────────────────── */
@media (max-width: 767px) {
  :host {
    width: 100%;
    max-width: none;
    min-width: 0;
  }

  .sc-ccip-contract-amount-table--header {
    display: none;
  }

  .sc-ccip-contract-amount-table {
    min-width: 0;
  }

  .sc-ccip-contract-amount-table--main-company,
  .sc-ccip-contract-amount-table--sub-company {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    min-height: auto;
    padding: 16px;
  }

  .sc-ccip-contract-amount-table--sub-company .sc-ccip-contract-amount-table__col-company {
    padding-left: 0;
  }

  .sc-ccip-contract-amount-table__cell {
    align-items: flex-start;
    gap: 6px;
    height: auto;
  }

  .sc-ccip-contract-amount-table__cell[data-label]::before {
    content: attr(data-label);
    display: block;
    font-family: 'Work Sans', sans-serif;
    font-size: 10px;
    font-weight: 500;
    line-height: normal;
    text-transform: uppercase;
    color: #0c0a3e;
    opacity: 0.5;
  }

  .sc-ccip-contract-amount-table__col-progress {
    justify-content: flex-start;
    padding-left: 0;
  }
}

/* ── styles/sc-ccip-exclusion-table.css ── */
/* ScCcipExclusionTable — CCIP exclusion table row component */

/* ── Host ─────────────────────────────────────────────────────────────────── */
:host {
  display: block;
  width: 100%;
}

/* ── Base row ─────────────────────────────────────────────────────────────── */
.sc-ccip-exclusion-table {
  display: grid;
  grid-template-columns:
    minmax(7rem, 1.2fr)
    minmax(6rem, 0.9fr)
    minmax(7rem, 0.9fr)
    minmax(7rem, 1fr)
    minmax(8rem, 2fr)
    minmax(6rem, auto);
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  box-sizing: border-box;
  width: 100%;
  position: relative;
}

/* ── Header row ───────────────────────────────────────────────────────────── */
.sc-ccip-exclusion-table--header {
  height: 43px;
}

.sc-ccip-exclusion-table--header__bg {
  position: absolute;
  inset: 0;
  background-color: #f9fafb;
  border-top: 1px solid #e5e7eb;
  border-left: 1px solid #e5e7eb;
  border-right: 1px solid #e5e7eb;
  border-radius: 10px 10px 0 0;
  pointer-events: none;
}

/* ── Header labels ────────────────────────────────────────────────────────── */
.sc-ccip-exclusion-table__header-label {
  position: relative;
  z-index: 1;
  font-family: var(--sc-font-family-body, 'Work Sans', sans-serif);
  font-weight: var(--sc-font-weight-regular, 400);
  font-size: var(--sc-font-size-caption, 12px);
  line-height: 18px;
  color: #4a5565;
  white-space: nowrap;
}

/* ── Item row ─────────────────────────────────────────────────────────────── */
.sc-ccip-exclusion-table--item {
  min-height: 50px;
  background-color: #ffffff;
  border-bottom: 1px solid #f8f8f8;
  padding-block: 14px;
}

/* ── Item cell ────────────────────────────────────────────────────────────── */
.sc-ccip-exclusion-table__cell {
  min-width: 0;
}

/* ── Item text ────────────────────────────────────────────────────────────── */
.sc-ccip-exclusion-table__item-text {
  font-family: var(--sc-font-family-body, 'Work Sans', sans-serif);
  font-weight: var(--sc-font-weight-regular, 400);
  font-size: var(--sc-font-size-label, 14px);
  line-height: 18px;
  color: #0c0a3e;
  overflow-wrap: anywhere;
}

/* ── Remove CTA ───────────────────────────────────────────────────────────── */
.sc-ccip-exclusion-table__cta {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 5px 4px 5px;
  border: none;
  border-bottom: 1px solid #0c0a3e;
  background: transparent;
  cursor: pointer;
  font-family: var(--sc-font-family-body, 'Work Sans', sans-serif);
  font-weight: var(--sc-font-weight-medium, 500);
  font-size: var(--sc-font-size-caption, 12px);
  line-height: normal;
  color: #0c0a3e;
  white-space: nowrap;
}

.sc-ccip-exclusion-table__cta:hover {
  opacity: 0.7;
}

.sc-ccip-exclusion-table__cta-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 15px;
  overflow: hidden;
}

/* ── Mobile card stack (≤ 767px) ──────────────────────────────────────────── */
@media (max-width: 767px) {
  .sc-ccip-exclusion-table--header {
    display: none;
  }

  .sc-ccip-exclusion-table--item {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding: 16px;
  }

  .sc-ccip-exclusion-table__cell {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .sc-ccip-exclusion-table__cell[data-label]::before {
    content: attr(data-label);
    display: block;
    font-family: var(--sc-font-family-body, 'Work Sans', sans-serif);
    font-size: 10px;
    font-weight: var(--sc-font-weight-medium, 500);
    line-height: normal;
    text-transform: uppercase;
    color: #0c0a3e;
    opacity: 0.5;
  }
}

/* ── styles/sc-ccip-payroll-class-code-table.css ── */
/* ScCcipPayrollClassCodeTable - Workers-comp class-code payroll totals */

:host {
  display: block;
  width: 100%;
  --sc-ccip-payroll-class-code-table-columns:
    minmax(7.5rem, 16fr)
    minmax(20rem, 64fr)
    minmax(8rem, 16fr)
    minmax(8rem, 16fr);
}

.sc-ccip-payroll-class-code-table {
  position: relative;
  box-sizing: border-box;
  width: 100%;
}

.sc-ccip-payroll-class-code-table--header {
  height: 43px;
  display: grid;
  grid-template-columns: var(--sc-ccip-payroll-class-code-table-columns);
  align-items: center;
  padding: 0 20px;
  gap: 8px;
}

.sc-ccip-payroll-class-code-table__header-bg {
  position: absolute;
  inset: 0;
  background: #f9fafb;
  border-top: 1px solid #e5e7eb;
  border-left: 1px solid #e5e7eb;
  border-right: 1px solid #e5e7eb;
  border-radius: 10px 10px 0 0;
}

.sc-ccip-payroll-class-code-table__header-label {
  position: relative;
  z-index: 1;
  min-width: 0;
  font-family: 'Work Sans', sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  color: #4a5565;
  white-space: nowrap;
}

.sc-ccip-payroll-class-code-table--item {
  display: grid;
  grid-template-columns: var(--sc-ccip-payroll-class-code-table-columns);
  align-items: center;
  min-height: 50px;
  padding: 11px 20px;
  gap: 8px;
  background: #fff;
  border-bottom: 1px solid #efefef;
  box-sizing: border-box;
}

.sc-ccip-payroll-class-code-table__cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  height: 100%;
}

.sc-ccip-payroll-class-code-table__class-code {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: #6a7282;
  letter-spacing: -0.154px;
  overflow-wrap: anywhere;
}

.sc-ccip-payroll-class-code-table__description {
  font-family: 'Work Sans', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  color: #0c0a3e;
  overflow-wrap: anywhere;
}

.sc-ccip-payroll-class-code-table__amount {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  font-style: normal;
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.8);
  letter-spacing: -0.154px;
  overflow-wrap: anywhere;
  white-space: nowrap;
}

@media (max-width: 767px) {
  .sc-ccip-payroll-class-code-table--header {
    display: none;
  }

  .sc-ccip-payroll-class-code-table--item {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    min-height: auto;
    padding: 16px;
  }

  .sc-ccip-payroll-class-code-table__cell {
    align-items: flex-start;
    gap: 6px;
    height: auto;
  }

  .sc-ccip-payroll-class-code-table__cell[data-label]::before {
    content: attr(data-label);
    display: block;
    font-family: 'Work Sans', sans-serif;
    font-size: 10px;
    font-weight: 500;
    line-height: normal;
    text-transform: uppercase;
    color: #0c0a3e;
    opacity: 0.5;
  }
}

/* ── styles/sc-ccip-payroll-detail-table.css ── */
/* ScCcipPayrollDetailTable — Per-company monthly payroll detail row variants */

:host {
  display: block;
  width: 100%;
  position: relative;
  z-index: 0;
  --sc-ccip-payroll-detail-table-columns:
    minmax(9rem, 21.1fr)
    minmax(10rem, 19.5fr)
    minmax(10rem, 20.1fr)
    minmax(8rem, 15fr)
    minmax(7rem, 13.2fr)
    minmax(7rem, 11.1fr);
  --sc-ccip-payroll-detail-table-gap: 8px;
}

.sc-ccip-payroll-detail-table {
  position: relative;
  box-sizing: border-box;
  width: 100%;
}

:host(:hover),
:host(:focus-within) {
  z-index: 25;
}

/* ── Header ───────────────────────────────────────────────────────────────── */
.sc-ccip-payroll-detail-table--header {
  height: 43px;
  display: grid;
  grid-template-columns: var(--sc-ccip-payroll-detail-table-columns);
  align-items: center;
  padding: 0 20px;
  gap: var(--sc-ccip-payroll-detail-table-gap);
}

.sc-ccip-payroll-detail-table__header-bg {
  position: absolute;
  inset: 0;
  background: #f9fafb;
  border-top: 1px solid #e5e7eb;
  border-left: 1px solid #e5e7eb;
  border-right: 1px solid #e5e7eb;
  border-radius: 10px 10px 0 0;
}

.sc-ccip-payroll-detail-table__header-label {
  position: relative;
  z-index: 1;
  min-width: 0;
  font-family: 'Work Sans', sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #4a5565;
  white-space: nowrap;
}

/* ── Item row ─────────────────────────────────────────────────────────────── */
.sc-ccip-payroll-detail-table--item {
  display: grid;
  grid-template-columns: var(--sc-ccip-payroll-detail-table-columns);
  align-items: center;
  padding: 16px 20px;
  gap: var(--sc-ccip-payroll-detail-table-gap);
  min-height: 150px;
  background: #fff;
  border-bottom: 1px solid #efefef;
  box-sizing: border-box;
}

.sc-ccip-payroll-detail-table__cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  height: 100%;
}

/* ── Reported Month column ────────────────────────────────────────────────── */
.sc-ccip-payroll-detail-table__month {
  font-family: 'Work Sans', sans-serif;
  font-size: 14px;
  color: #0c0a3e;
  margin: 0 0 2px;
  line-height: 18px;
}

.sc-ccip-payroll-detail-table__date-rows {
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: min(100%, 213px);
}

.sc-ccip-payroll-detail-table__date-row {
  display: flex;
  justify-content: space-between;
  font-family: 'Work Sans', sans-serif;
  font-size: 14px;
  color: #6a7282;
  line-height: 18px;
  gap: 8px;
}

.sc-ccip-payroll-detail-table__date-row span {
  overflow-wrap: anywhere;
}

/* ── Class-code breakdown (reused for Payroll Reported and Gross Payroll) ─── */
.sc-ccip-payroll-detail-table__breakdown {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  width: min(100%, 206px);
}

.sc-ccip-payroll-detail-table__breakdown-rows {
  display: flex;
  gap: 4px;
  align-items: flex-start;
  min-width: 0;
}

.sc-ccip-payroll-detail-table__breakdown-labels {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  width: min(100%, 189px);
}

.sc-ccip-payroll-detail-table__breakdown-row {
  display: flex;
  justify-content: space-between;
  font-family: 'Work Sans', sans-serif;
  font-size: 14px;
  color: #6a7282;
  line-height: 18px;
  gap: 8px;
}

.sc-ccip-payroll-detail-table__breakdown-row span {
  overflow-wrap: anywhere;
}

.sc-ccip-payroll-detail-table__breakdown-row span:last-child {
  font-family: 'Inter', sans-serif;
  line-height: 1.5;
  letter-spacing: -0.154px;
}

.sc-ccip-payroll-detail-table__class-label {
  display: flex;
  align-items: center;
  gap: 4px;
}

.sc-ccip-payroll-detail-table__class-label-text {
  cursor: default;
}

.sc-ccip-payroll-detail-table__breakdown-ops {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: 'Work Sans', sans-serif;
  font-size: 14px;
  color: #6a7282;
  padding-top: 2px;
  line-height: 18px;
}

.sc-ccip-payroll-detail-table__breakdown-divider {
  border: none;
  border-top: 1px solid #9ca3af;
  margin: 0;
  width: min(100%, 206px);
}

.sc-ccip-payroll-detail-table__breakdown-total {
  display: flex;
  justify-content: flex-end;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.8);
  letter-spacing: -0.154px;
  width: min(100%, 189px);
}

/* ── Hours Worked column ──────────────────────────────────────────────────── */
.sc-ccip-payroll-detail-table__hours {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: 'Work Sans', sans-serif;
  font-size: 14px;
  color: #6a7282;
  min-width: 0;
  width: 100%;
  max-width: 136px;
}

.sc-ccip-payroll-detail-table__hours--warning {
  background: rgba(241, 203, 51, 0.1);
}

.sc-ccip-payroll-detail-table__hours--critical {
  background: rgba(220, 38, 38, 0.1);
}

.sc-ccip-payroll-detail-table__hours-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  line-height: 18px;
}

.sc-ccip-payroll-detail-table__hours-row span {
  overflow-wrap: anywhere;
}

.sc-ccip-payroll-detail-table__hours-row span:last-child {
  font-family: 'Inter', sans-serif;
  line-height: 1.5;
  letter-spacing: -0.154px;
}

.sc-ccip-payroll-detail-table__hours-value {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  white-space: nowrap;
}

.sc-ccip-payroll-detail-table__hours-alert {
  flex: 0 0 auto;
  transform: scale(0.72);
  transform-origin: center;
  --sc-icon-color: currentColor;
}

.sc-ccip-payroll-detail-table__hours-alert--warning {
  color: #f1cb33;
}

.sc-ccip-payroll-detail-table__hours-alert--critical {
  color: #dc2626;
}

/* ── Avg Hourly Rate + Completion Progress ────────────────────────────────── */
.sc-ccip-payroll-detail-table__rate-stack {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  width: min(100%, 104px);
}

.sc-ccip-payroll-detail-table__rate-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-family: 'Work Sans', sans-serif;
  font-size: 14px;
  color: #6a7282;
  line-height: 18px;
}

.sc-ccip-payroll-detail-table__rate-row span {
  overflow-wrap: anywhere;
}

.sc-ccip-payroll-detail-table__rate-row span:last-child {
  font-family: 'Inter', sans-serif;
  line-height: 1.5;
  letter-spacing: -0.154px;
}

.sc-ccip-payroll-detail-table__amount {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.8);
  letter-spacing: -0.154px;
  overflow-wrap: anywhere;
}

.sc-ccip-payroll-detail-table__col-progress {
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (min-width: 1200px) {
  :host {
    --sc-ccip-payroll-detail-table-columns: 258px 232px 241px 194px 155px 140px;
    --sc-ccip-payroll-detail-table-gap: 8px;
  }
}

/* ── Mobile card stack (≤ 767px) ──────────────────────────────────────────── */
@media (max-width: 767px) {
  .sc-ccip-payroll-detail-table--header {
    display: none;
  }

  .sc-ccip-payroll-detail-table--item {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    min-height: auto;
    padding: 16px;
  }

  .sc-ccip-payroll-detail-table__cell {
    align-items: flex-start;
    gap: 6px;
    height: auto;
  }

  .sc-ccip-payroll-detail-table__cell[data-label]::before {
    content: attr(data-label);
    display: block;
    font-family: 'Work Sans', sans-serif;
    font-size: 10px;
    font-weight: 500;
    line-height: normal;
    text-transform: uppercase;
    color: #0c0a3e;
    opacity: 0.5;
  }

  .sc-ccip-payroll-detail-table__col-progress {
    justify-content: flex-start;
  }

  .sc-ccip-payroll-detail-table__breakdown-rows {
    width: 100%;
  }
}

/* ── styles/sc-ccip-payroll-table.css ── */
/* ScCcipPayrollTable — Payroll overview table row variants */

:host {
  display: block;
  width: 100%;
  --sc-ccip-payroll-table-columns:
    minmax(7.5rem, 15.1fr)
    minmax(9rem, 19.8fr)
    minmax(12rem, 33.1fr)
    minmax(7.5rem, 14.9fr)
    minmax(7rem, 13.4fr)
    minmax(8rem, 15.7fr)
    minmax(8rem, 14fr);
}

.sc-ccip-payroll-table {
  position: relative;
  box-sizing: border-box;
  width: 100%;
}

/* ── Header ───────────────────────────────────────────────────────────────── */
.sc-ccip-payroll-table--header {
  height: 43px;
  display: grid;
  grid-template-columns: var(--sc-ccip-payroll-table-columns);
  align-items: center;
  padding: 0 20px;
  gap: 8px;
}

.sc-ccip-payroll-table__header-bg {
  position: absolute;
  inset: 0;
  background: #f9fafb;
  border-top: 1px solid #e5e7eb;
  border-left: 1px solid #e5e7eb;
  border-right: 1px solid #e5e7eb;
  border-radius: 10px 10px 0 0;
}

.sc-ccip-payroll-table__header-label {
  position: relative;
  z-index: 1;
  min-width: 0;
  font-family: 'Work Sans', sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #4a5565;
  white-space: nowrap;
}

/* ── Item row ─────────────────────────────────────────────────────────────── */
.sc-ccip-payroll-table--item {
  display: grid;
  grid-template-columns: var(--sc-ccip-payroll-table-columns);
  align-items: center;
  padding: 16px 20px;
  gap: 8px;
  min-height: 150px;
  background: #fff;
  border-bottom: 1px solid #efefef;
  box-sizing: border-box;
}

.sc-ccip-payroll-table__cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  height: 100%;
}

/* ── Company column ───────────────────────────────────────────────────────── */
.sc-ccip-payroll-table__company-link {
  font-family: 'Work Sans', sans-serif;
  font-size: 14px;
  color: #0c0a3e;
  text-decoration: underline;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  overflow-wrap: anywhere;
}

/* ── Reported Month column ────────────────────────────────────────────────── */
.sc-ccip-payroll-table__month {
  font-family: 'Work Sans', sans-serif;
  font-size: 14px;
  color: #0c0a3e;
  margin: 0 0 2px;
  line-height: 18px;
}

.sc-ccip-payroll-table__missing-reports {
  font-family: 'Work Sans', sans-serif;
  font-size: 14px;
  color: #6a7282;
  margin: 0;
  line-height: 18px;
}

/* ── Breakdown (Est Payroll + C/O) ────────────────────────────────────────── */
.sc-ccip-payroll-table__breakdown {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  width: 100%;
  max-width: 259px;
}

.sc-ccip-payroll-table__breakdown-rows {
  display: flex;
  gap: 4px;
  align-items: flex-start;
  min-width: 0;
}

.sc-ccip-payroll-table__breakdown-labels {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.sc-ccip-payroll-table__breakdown-row {
  display: flex;
  justify-content: space-between;
  font-family: 'Work Sans', sans-serif;
  font-size: 14px;
  color: #6a7282;
  line-height: 18px;
  gap: 8px;
}

.sc-ccip-payroll-table__breakdown-row span {
  overflow-wrap: anywhere;
}

.sc-ccip-payroll-table__breakdown-row span:last-child {
  font-family: 'Inter', sans-serif;
  line-height: 1.5;
  letter-spacing: -0.154px;
}

.sc-ccip-payroll-table__breakdown-ops {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: 'Work Sans', sans-serif;
  font-size: 14px;
  color: #6a7282;
  padding-top: 2px;
  line-height: 18px;
}

.sc-ccip-payroll-table__breakdown-divider {
  border: none;
  border-top: 1px solid #9ca3af;
  margin: 0;
}

.sc-ccip-payroll-table__breakdown-total {
  display: flex;
  justify-content: flex-end;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.8);
  letter-spacing: -0.154px;
}

/* ── Bold amount ──────────────────────────────────────────────────────────── */
.sc-ccip-payroll-table__amount {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  font-style: normal;
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.8);
  letter-spacing: -0.154px;
  overflow-wrap: anywhere;
  white-space: nowrap;
}

/* ── Hours Worked column ──────────────────────────────────────────────────── */
.sc-ccip-payroll-table__hours {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: 'Work Sans', sans-serif;
  font-size: 14px;
  color: #6a7282;
  min-width: 0;
  width: 100%;
  max-width: 136px;
}

.sc-ccip-payroll-table__hours--warning {
  background: rgba(241, 203, 51, 0.1);
}

.sc-ccip-payroll-table__hours--critical {
  background: rgba(220, 38, 38, 0.1);
}

.sc-ccip-payroll-table__hours-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  line-height: 18px;
}

.sc-ccip-payroll-table__hours-row span {
  overflow-wrap: anywhere;
}

.sc-ccip-payroll-table__hours-row span:last-child {
  font-family: 'Inter', sans-serif;
  line-height: 1.5;
  letter-spacing: -0.154px;
}

.sc-ccip-payroll-table__hours-value {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  white-space: nowrap;
}

.sc-ccip-payroll-table__hours-alert {
  flex: 0 0 auto;
  transform: scale(0.72);
  transform-origin: center;
  --sc-icon-color: currentColor;
}

.sc-ccip-payroll-table__hours-alert--warning {
  color: #f1cb33;
}

.sc-ccip-payroll-table__hours-alert--critical {
  color: #dc2626;
}

/* ── Completion Progress column ───────────────────────────────────────────── */
.sc-ccip-payroll-table__col-progress {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ── Mobile card stack (≤ 767px) ──────────────────────────────────────────── */
@media (max-width: 767px) {
  .sc-ccip-payroll-table--header {
    display: none;
  }

  .sc-ccip-payroll-table--item {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    min-height: auto;
    padding: 16px;
  }

  .sc-ccip-payroll-table__cell {
    align-items: flex-start;
    gap: 6px;
    height: auto;
  }

  .sc-ccip-payroll-table__cell[data-label]::before {
    content: attr(data-label);
    display: block;
    font-family: 'Work Sans', sans-serif;
    font-size: 10px;
    font-weight: 500;
    line-height: normal;
    text-transform: uppercase;
    color: #0c0a3e;
    opacity: 0.5;
  }

  .sc-ccip-payroll-table__col-progress {
    justify-content: flex-start;
  }
}

/* ── styles/sc-checklist-question.css ── */
/* ScChecklistQuestion — one inspection-checklist question card.

   Ports the equipment inspection question card from the mobile app
   (InspectQuestionsScreen) onto design tokens, replacing the Bootstrap
   list-group the Flask checklist macro renders. The answer row follows the
   hand-rolled `.recommendation-yes-no` treatment on the recommendation detail
   page, which this component exists to absorb. */

:host {
  display: block;
  max-width: 100%;
}

/* Spacing belongs to the question, not to a container, because plenty of pages
   loop questions straight into a <form> with no <sc-checklist> around them
   (fire safety manager, concrete safety manager, safety audit), and the
   equipment logs drop a lone trailing question next to a checklist block. Owning
   the gap here means those stack correctly too. `sc-checklist` deliberately has
   no flex gap so the two cannot double up. */
:host(:not(:first-child)) {
  margin-top: var(--sc-space-sm, 10px);
}

:host([hidden]) {
  display: none;
}

.sc-checklist-question {
  display: flex;
  flex-direction: column;
  gap: var(--sc-space-md, 16px);
  padding: var(--sc-space-lg, 20px);
  border: 2px solid var(--sc-blue-alpha10, #0c0a3e1a);
  border-radius: var(--sc-border-radius-xl, 20px);
  background: var(--sc-blue-alpha05, #0c0a3e0d);
  text-align: left;
}

.sc-checklist-question--error {
  border-color: var(--sc-brand-red, #c0133d);
  background: var(--sc-red-light, #fdf2f5);
}

.sc-checklist-question__prompt {
  margin: 0;
  color: var(--sc-brand-blue, #0c0a3e);
  font-family: var(--sc-font-family-body, 'Work Sans'), sans-serif;
  font-size: var(--sc-font-size-body, 16px);
  font-weight: var(--sc-font-weight-medium, 500);
  line-height: 1.4;
}

/* ── Answer row ─────────────────────────────────────────────────────── */

.sc-checklist-question__answers {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.sc-checklist-question__option {
  /* Small enough that Yes / No / N-A still sit one row across on a 320px
     phone; long translated labels wrap inside their own button, and the row
     itself only wraps when the container genuinely cannot fit the basis. */
  flex: 1 1 3.5rem;
  min-width: 0;
  margin: 0;
  cursor: pointer;
  /* The row stretches every option to its tallest one; the face has to fill
     its option too, or a two-line answer sits shorter than a three-line one. */
  display: flex;
}

.sc-checklist-question__option input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sc-checklist-question__face {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 6px 12px;
  border: 2px solid var(--sc-brand-blue, #0c0a3e);
  border-radius: var(--sc-border-radius-sm, 8px);
  background: var(--sc-gray-light, #f9fafc);
  color: var(--sc-brand-blue, #0c0a3e);
  font-family: var(--sc-font-family-body, 'Work Sans'), sans-serif;
  font-size: var(--sc-font-size-label, 14px);
  font-weight: var(--sc-font-weight-medium, 500);
  line-height: 1.25;
  text-align: center;
  opacity: 0.5;
  transition:
    background 0.15s ease,
    opacity 0.15s ease;
}

.sc-checklist-question__face sc-icons {
  --sc-icon-size: 13px;
  flex-shrink: 0;
}

/* Hover is a desktop affordance the mobile screen has no need for. */
.sc-checklist-question__option:hover .sc-checklist-question__face {
  opacity: 0.75;
}

.sc-checklist-question__option:has(input:checked) .sc-checklist-question__face,
.sc-checklist-question__option--selected .sc-checklist-question__face {
  background: var(--sc-brand-mint, #def3ef);
  font-weight: var(--sc-font-weight-bold, 700);
  opacity: 1;
}

.sc-checklist-question__option:has(input:focus-visible) .sc-checklist-question__face {
  outline: 2px solid var(--sc-brand-blue, #0c0a3e);
  outline-offset: 2px;
  opacity: 1;
}

.sc-checklist-question__option:has(input:disabled) {
  cursor: not-allowed;
}

.sc-checklist-question__option:has(input:disabled) .sc-checklist-question__face {
  opacity: 0.35;
}

.sc-checklist-question__option:has(input:disabled):hover .sc-checklist-question__face {
  opacity: 0.35;
}

/* ── Error ──────────────────────────────────────────────────────────── */

.sc-checklist-question__error {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: calc(-1 * var(--sc-space-xs, 4px)) 0 0;
  color: var(--sc-brand-red, #c0133d);
  font-family: var(--sc-font-family-body, 'Work Sans'), sans-serif;
  font-size: var(--sc-font-size-caption, 12px);
  font-weight: var(--sc-font-weight-bold, 700);
  line-height: 1.3;
}

.sc-checklist-question__error sc-icons {
  --sc-icon-size: 14px;
  flex-shrink: 0;
}

/* ── Comment ────────────────────────────────────────────────────────── */

/* "Clear answer" sits under the answer row, aligned to its start, so it reads
   as acting on the answer rather than on the comment below. */
.sc-checklist-question__clear {
  display: flex;
  justify-content: flex-start;
  margin-top: calc(-1 * var(--sc-space-sm, 8px));
}

.sc-checklist-question__comment {
  display: flex;
  flex-direction: column;
  gap: var(--sc-space-sm, 10px);
}

.sc-checklist-question__comment-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sc-space-sm, 10px);
  width: 100%;
  min-height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--sc-border-radius-sm, 8px);
  background: transparent;
  color: var(--sc-brand-blue, #0c0a3e);
  font-family: var(--sc-font-family-body, 'Work Sans'), sans-serif;
  font-size: var(--sc-font-size-label, 14px);
  font-weight: var(--sc-font-weight-medium, 500);
  text-align: left;
  cursor: pointer;
}

.sc-checklist-question__comment-toggle:focus-visible {
  outline: 2px solid var(--sc-brand-blue, #0c0a3e);
  outline-offset: 2px;
}

.sc-checklist-question__comment-toggle:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.sc-checklist-question__chevron {
  --sc-icon-size: 12px;
  flex-shrink: 0;
  /* The registry glyph points left; -90deg reads as "expand", 90deg as "collapse". */
  transform: rotate(-90deg);
  transition: transform 160ms ease;
}

.sc-checklist-question__chevron--expanded {
  transform: rotate(90deg);
}

.sc-checklist-question__comment-input {
  box-sizing: border-box;
  width: 100%;
  min-height: 90px;
  padding: 15px;
  border: 2px solid var(--sc-brand-blue, #0c0a3e);
  border-radius: var(--sc-border-radius-sm, 8px);
  background: var(--sc-gray-light, #f9fafc);
  color: var(--sc-brand-blue, #0c0a3e);
  font-family: var(--sc-font-family-body, 'Work Sans'), sans-serif;
  font-size: var(--sc-font-size-label, 14px);
  line-height: 1.4;
  resize: vertical;
}

.sc-checklist-question__comment-input:focus-visible {
  outline: 2px solid var(--sc-brand-blue, #0c0a3e);
  outline-offset: 1px;
}

.sc-checklist-question__comment-input[hidden] {
  display: none;
}

.sc-checklist-question__comment-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── styles/sc-checklist.css ── */
/* ScChecklist — a titled group of sc-checklist-question cards.

   The 10px stack matches the mobile equipment-inspection questions container. */

:host {
  display: block;
  max-width: 100%;
}

:host([hidden]) {
  display: none;
}

.sc-checklist {
  display: flex;
  flex-direction: column;
  gap: var(--sc-space-md, 16px);
  text-align: left;
}

.sc-checklist__header {
  display: flex;
  flex-direction: column;
  gap: var(--sc-space-xs, 4px);
}

.sc-checklist__heading {
  margin: 0;
  color: var(--sc-brand-blue, #0c0a3e);
  font-family: var(--sc-font-family-display, 'Work Sans'), sans-serif;
  font-size: var(--sc-font-size-title, 20px);
  font-weight: var(--sc-font-weight-semibold, 600);
  line-height: 1.3;
}

.sc-checklist__description {
  margin: 0;
  color: var(--sc-blue-muted, #374151);
  font-family: var(--sc-font-family-body, 'Work Sans'), sans-serif;
  font-size: var(--sc-font-size-label, 14px);
  line-height: 1.4;
}

/* No gap here on purpose: sc-checklist-question owns the space between
   siblings, so it stacks the same whether or not it is slotted into this. */
.sc-checklist__questions {
  display: block;
}

/* Collapsible: a closed card of questions the reader may skip, e.g. an
   equipment log's additional checks. The summary row is the whole touch target. */
.sc-checklist--collapsible {
  display: block;
  border: 2px solid var(--sc-brand-blue, #0c0a3e);
  border-radius: var(--sc-border-radius-xl, 20px);
  background: var(--sc-white-normal, #ffffff);
}

.sc-checklist__summary {
  display: flex;
  align-items: center;
  gap: var(--sc-space-md, 12px);
  min-height: 44px;
  padding: var(--sc-space-lg, 16px);
  border-radius: var(--sc-border-radius-xl, 20px);
  color: var(--sc-brand-blue, #0c0a3e);
  list-style: none;
  cursor: pointer;
}

.sc-checklist__summary::-webkit-details-marker {
  display: none;
}

.sc-checklist__summary::marker {
  content: '';
}

.sc-checklist__summary:focus-visible {
  outline: 2px solid var(--sc-brand-blue, #0c0a3e);
  outline-offset: 2px;
}

.sc-checklist--collapsible .sc-checklist__header {
  min-width: 0;
}

/* The summary row reads as a label for the questions inside, so it uses the
   body face rather than the display face of a section heading. */
.sc-checklist--collapsible .sc-checklist__heading {
  font-family: var(--sc-font-family-body, 'Work Sans'), sans-serif;
  font-size: var(--sc-font-size-body, 16px);
  font-weight: var(--sc-font-weight-bold, 700);
}

.sc-checklist__status {
  color: var(--sc-blue-alpha50, #0c0a3e80);
  font-family: var(--sc-font-family-body, 'Work Sans'), sans-serif;
  font-size: var(--sc-font-size-label, 14px);
  line-height: 1.4;
}

.sc-checklist__chevron {
  --sc-icon-size: 14px;
  flex-shrink: 0;
  /* The registry glyph points left: 180deg points right (closed), -90deg down (open). */
  transform: rotate(180deg);
  transition: transform 160ms ease;
}

.sc-checklist__chevron--expanded {
  transform: rotate(-90deg);
}

.sc-checklist--collapsible .sc-checklist__questions {
  padding: 0 var(--sc-space-sm, 8px) var(--sc-space-sm, 8px);
}

@media (prefers-reduced-motion: reduce) {
  .sc-checklist__chevron {
    transition: none;
  }
}

/* ── styles/sc-circular-progress.css ── */
/* ScCircularProgress — tier-colored chip and circular progress indicators */

:host {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}

/* ── Chip format ─────────────────────────────────── */

.sc-circular-progress-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 40px;
  min-height: 18px;
  padding: 2px 6px;
  border-radius: var(--sc-border-radius-sm);
  font-family: var(--sc-font-family-body);
  font-weight: var(--sc-font-weight-medium);
  font-size: var(--sc-font-size-caption);
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}

.sc-circular-progress-chip--tier90 {
  background-color: var(--sc-progress-tier90-chip-bg);
  color: var(--sc-white-normal);
}

.sc-circular-progress-chip--tier75 {
  background-color: var(--sc-progress-tier75-chip-bg);
  color: var(--sc-white-normal);
}

.sc-circular-progress-chip--tier60 {
  background-color: var(--sc-progress-tier60-chip-bg);
  color: var(--sc-brand-blue);
}

.sc-circular-progress-chip--tier40 {
  background-color: var(--sc-progress-tier40-chip-bg);
  color: var(--sc-brand-blue);
}

.sc-circular-progress-chip--tier0 {
  background-color: var(--sc-progress-tier0-chip-bg);
  color: var(--sc-white-normal);
}

/* ── Circle format (Figma Webapp Count — node 1966:37868) ── */

.sc-circular-progress-circle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
}

.sc-circular-progress-circle__svg {
  width: 100%;
  height: 100%;
}

.sc-circular-progress-circle__label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sc-font-family-body);
  font-weight: var(--sc-font-weight-regular);
  font-size: var(--sc-font-size-caption, 12px);
  line-height: 14px;
  letter-spacing: 0;
  color: var(--sc-brand-blue);
  white-space: nowrap;
}

/* Track and stroke per tier */

.sc-circular-progress-circle--tier90 .sc-circular-progress-circle__track {
  stroke: var(--sc-progress-tier90-circle-track);
}
.sc-circular-progress-circle--tier90 .sc-circular-progress-circle__bar {
  stroke: var(--sc-progress-tier90-circle-stroke);
}

.sc-circular-progress-circle--tier75 .sc-circular-progress-circle__track {
  stroke: var(--sc-progress-tier75-circle-track);
}
.sc-circular-progress-circle--tier75 .sc-circular-progress-circle__bar {
  stroke: var(--sc-progress-tier75-circle-stroke);
}

.sc-circular-progress-circle--tier60 .sc-circular-progress-circle__track {
  stroke: var(--sc-progress-tier60-circle-track);
}
.sc-circular-progress-circle--tier60 .sc-circular-progress-circle__bar {
  stroke: var(--sc-progress-tier60-circle-stroke);
}

.sc-circular-progress-circle--tier40 .sc-circular-progress-circle__track {
  stroke: var(--sc-progress-tier40-circle-track);
}
.sc-circular-progress-circle--tier40 .sc-circular-progress-circle__bar {
  stroke: var(--sc-progress-tier40-circle-stroke);
}

.sc-circular-progress-circle--tier0 .sc-circular-progress-circle__track {
  stroke: var(--sc-progress-tier0-circle-track);
}
.sc-circular-progress-circle--tier0 .sc-circular-progress-circle__bar {
  stroke: var(--sc-progress-tier0-circle-stroke);
}

.sc-circular-progress-circle--neutral .sc-circular-progress-circle__track {
  stroke: #e5e7eb;
}
.sc-circular-progress-circle--neutral .sc-circular-progress-circle__bar {
  stroke: #9ca3af;
}

/* Figma Count — fraction rings (red / yellow / green) */

.sc-circular-progress-circle--count-red .sc-circular-progress-circle__track {
  stroke: var(--sc-count-red-track);
}
.sc-circular-progress-circle--count-red .sc-circular-progress-circle__bar {
  stroke: var(--sc-count-red-stroke);
}

.sc-circular-progress-circle--count-yellow .sc-circular-progress-circle__track {
  stroke: var(--sc-count-yellow-track);
}
.sc-circular-progress-circle--count-yellow .sc-circular-progress-circle__bar {
  stroke: var(--sc-count-yellow-stroke);
}

.sc-circular-progress-circle--count-green .sc-circular-progress-circle__track,
.sc-circular-progress-circle--count-green .sc-circular-progress-circle__bar {
  stroke: var(--sc-count-green-stroke);
}

/* N/A state (Figma Webapp Count — mint ring, Body/14 regular, centered label) */

.sc-circular-progress-chip--na {
  width: auto;
  min-width: 40px;
  min-height: 32px;
  padding: 6px 10px;
  border-radius: 999px;
  background-color: var(--sc-brand-mint);
  color: var(--sc-brand-blue);
}

.sc-circular-progress-chip__label--na {
  font-weight: var(--sc-font-weight-regular);
  font-size: 14px;
  line-height: 18px;
}

.sc-circular-progress-circle__label--na {
  color: var(--sc-brand-blue);
}

/* ── styles/sc-commission-split.css ── */
/* ScCommissionSplit — rows of (user, percent) that must sum to a total rate */

:host {
  display: block;
  font-family: var(--sc-font-family-body);
  color: var(--sc-brand-blue);
}

.sc-cs {
  box-sizing: border-box;
  background: var(--sc-white-normal, #fff);
  border: 1px solid var(--sc-color-border, #d6dde6);
  border-radius: var(--sc-border-radius-md, 8px);
  padding: var(--sc-space-md, 0.75rem);
  display: flex;
  flex-direction: column;
  gap: var(--sc-space-sm, 0.5rem);
}

.sc-cs__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sc-space-sm, 0.5rem);
  align-items: center;
}

.sc-cs__user {
  flex: 1 1 16rem;
  min-width: 0;
  padding: 0.375rem 0.5rem;
  border: 1px solid var(--sc-color-border, #d6dde6);
  border-radius: var(--sc-border-radius-sm, 4px);
  background: #fff;
  font: inherit;
}

.sc-cs__percent {
  flex: 0 0 7rem;
  padding: 0.375rem 0.5rem;
  border: 1px solid var(--sc-color-border, #d6dde6);
  border-radius: var(--sc-border-radius-sm, 4px);
  font: inherit;
}

.sc-cs__remove {
  flex: 0 0 auto;
  padding: 0.375rem 0.625rem;
  border: 1px solid var(--sc-color-border, #d6dde6);
  border-radius: var(--sc-border-radius-sm, 4px);
  background: #fff;
  cursor: pointer;
  font: inherit;
  color: var(--sc-color-danger, #b3261e);
}

.sc-cs__remove:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.sc-cs__add {
  align-self: flex-start;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--sc-color-border, #d6dde6);
  border-radius: var(--sc-border-radius-sm, 4px);
  background: #fff;
  cursor: pointer;
  font: inherit;
  color: var(--sc-brand-blue);
}

.sc-cs__summary {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sc-space-sm, 0.5rem);
  font-size: var(--sc-font-size-sm, 0.875rem);
}

.sc-cs__summary--ok {
  color: var(--sc-color-success, #1c6e3a);
}

.sc-cs__summary--bad {
  color: var(--sc-color-danger, #b3261e);
  font-weight: 600;
}

.sc-cs__hint {
  font-size: var(--sc-font-size-xs, 0.75rem);
  color: var(--sc-text-muted, #5a6877);
}

/* ── styles/sc-companies-card.css ── */
/* ScCompaniesCard — Companies shortcut row (mirrors Users card layout). */

:host {
  border-radius: 10px;
  box-shadow: 0 0 4px rgb(0 0 0 / 0.25);
  display: block;
  min-width: 0;
  width: 100%;
}

.sc-companies-card {
  align-items: center;
  background: rgb(255 255 255 / 0.8);
  border-radius: 10px;
  box-sizing: border-box;
  color: var(--sc-brand-blue, #0c0a3e);
  display: flex;
  font-family: var(--sc-font-family-body);
  gap: 6px;
  justify-content: flex-start;
  min-width: 0;
  padding: 10px;
  position: relative;
  width: 100%;
}

.sc-companies-card--clickable {
  cursor: pointer;
}

/*
 * Absolutely positioned hit target for the companies modal. Not a flex item
 * so space-between keeps title/actions aligned. Manage/info sit above via z-index.
 */
.sc-companies-card__primary-hit {
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  inset: 0;
  padding: 0;
  position: absolute;
  z-index: 0;
}

.sc-companies-card__primary-hit:focus-visible {
  outline: 2px solid rgb(12 10 62 / 0.35);
  outline-offset: 2px;
}

.sc-companies-card__title {
  align-items: center;
  display: inline-flex;
  flex: 0 1 auto;
  font-family: var(--sc-font-family-heading, var(--sc-font-family-body));
  font-size: 18px;
  font-weight: var(--sc-font-weight-medium, 500);
  gap: 6px;
  letter-spacing: 0;
  line-height: normal;
  margin: 0 auto 0 0;
  min-width: 0;
  /* Let clicks reach the card primary hit under the title. */
  pointer-events: none;
  text-transform: uppercase;
  white-space: nowrap;
}

.sc-companies-card--clickable:hover .sc-companies-card__title-text,
.sc-companies-card:has(.sc-companies-card__primary-hit:focus-visible)
  .sc-companies-card__title-text {
  text-decoration: underline;
}

.sc-companies-card__title-emoji {
  flex: 0 0 auto;
  font-size: 18px;
  line-height: 1;
  text-transform: none;
}

.sc-companies-card__count {
  align-items: center;
  background: var(--sc-brand-blue, #0c0a3e);
  border-radius: 50%;
  box-sizing: border-box;
  color: var(--sc-white-normal, #fff);
  display: inline-flex;
  flex: 0 0 auto;
  font-family: var(--sc-font-family-body);
  font-size: 11px;
  font-weight: var(--sc-font-weight-semibold, 600);
  height: 22px;
  justify-content: center;
  letter-spacing: 0;
  line-height: 1;
  min-width: 22px;
  padding: 0 4px;
  text-transform: none;
}

.sc-companies-card__title-text {
  min-width: 0;
}

.sc-companies-card__actions {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  min-width: 0;
  pointer-events: auto;
  position: relative;
  z-index: 1;
}

.sc-companies-card__cta {
  --sc-button-fw: var(--sc-font-weight-regular, 400);

  flex: 0 0 auto;
  pointer-events: auto;
  position: relative;
  z-index: 1;
}

.sc-companies-card__info-button {
  --sc-icon-color: var(--sc-brand-blue, #0c0a3e);

  align-items: center;
  appearance: none;
  background: var(--sc-gray-normal, #c4c4c4);
  border: 0;
  border-radius: 50%;
  color: var(--sc-brand-blue, #0c0a3e);
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  height: 30px;
  justify-content: center;
  margin-left: 0;
  padding: 0;
  pointer-events: auto;
  position: relative;
  transition: background-color 0.15s ease;
  width: 30px;
  z-index: 1;
}

.sc-companies-card__info-button:hover {
  background: var(--sc-gray-dark, #a8a8a8);
}

.sc-companies-card__info-button:focus-visible {
  outline: 2px solid var(--sc-brand-blue, #0c0a3e);
  outline-offset: 2px;
}

.sc-companies-card__info-button sc-icons {
  height: 14px;
  width: 14px;
}

.sc-companies-card__info-button-icon {
  display: inline-flex;
}

@media (max-width: 520px) {
  .sc-companies-card {
    align-items: center;
    column-gap: 10px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      'title info'
      'actions actions';
    row-gap: 8px;
  }

  .sc-companies-card__title {
    flex: none;
    grid-area: title;
  }

  .sc-companies-card__info-button {
    grid-area: info;
    justify-self: end;
  }

  .sc-companies-card__actions {
    grid-area: actions;
    justify-content: flex-start;
    width: 100%;
  }
}

/* ── styles/sc-company-menu.css ── */
:host {
  display: inline-flex;
  font-family: var(--sc-font-family-body);
  max-width: 100%;
  min-width: 0;
  vertical-align: middle;
}

* {
  box-sizing: border-box;
}

.sc-company-menu__trigger {
  max-width: 100%;
  min-width: 0;
}

.sc-company-menu__panel {
  background: var(--sc-white-normal);
  border: var(--sc-border-width-thin) solid var(--sc-blue-alpha10);
  border-radius: var(--sc-border-radius-lg);
  box-shadow: 0 16px 40px var(--sc-blue-alpha20);
  color: var(--sc-brand-blue);
  display: none;
  flex-direction: column;
  max-height: min(360px, calc(100dvh - 96px));
  max-width: min(320px, calc(100vw - 16px));
  min-width: min(220px, calc(100vw - 16px));
  overflow: auto;
  padding: var(--sc-space-xs) 0;
  position: fixed;
  text-align: start;
  z-index: 1050;
}

:host([open]) .sc-company-menu__panel {
  display: flex;
}

.sc-company-menu__panel:focus {
  outline: none;
}

.sc-company-menu__search {
  display: block;
  padding: var(--sc-space-xs) var(--sc-space-sm) var(--sc-space-sm);
  position: relative;
}

.sc-company-menu__visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.sc-company-menu__search-input {
  background: var(--sc-blue-alpha05);
  border: 0;
  border-radius: var(--sc-border-radius-pill);
  color: var(--sc-brand-blue);
  font: inherit;
  font-size: var(--sc-font-size-body);
  min-height: 36px;
  padding: var(--sc-space-xs) var(--sc-space-md);
  width: 100%;
}

.sc-company-menu__search-input:focus-visible,
.sc-company-menu__company:focus-visible,
.sc-company-menu__panel button:focus-visible {
  outline: 2px solid var(--sc-brand-blue);
  outline-offset: 2px;
}

.sc-company-menu__list {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sc-company-menu__company {
  color: var(--sc-brand-blue);
  display: block;
  font-size: var(--sc-font-size-body);
  font-weight: var(--sc-font-weight-medium);
  line-height: 24px;
  overflow-wrap: anywhere;
  padding: var(--sc-space-sm) var(--sc-space-lg);
  text-decoration: none;
}

.sc-company-menu__company:hover {
  background: var(--sc-brand-mint);
}

.sc-company-menu__status,
.sc-company-menu__empty {
  margin: 0;
  padding: var(--sc-space-md) var(--sc-space-lg);
}

.sc-company-menu__status--loading {
  padding: var(--sc-space-xs) 0;
}

.sc-company-menu__skeleton {
  display: flex;
  flex-direction: column;
}

.sc-company-menu__skeleton-row {
  animation: sc-company-menu-pulse 1.4s ease-in-out infinite;
  background: var(--sc-blue-alpha10);
  border-radius: var(--sc-border-radius-sm, 6px);
  display: block;
  height: 16px;
  margin: var(--sc-space-sm) var(--sc-space-lg);
  width: 72%;
}

.sc-company-menu__skeleton-row--short {
  width: 46%;
}

.sc-company-menu__skeleton-row--medium {
  width: 60%;
}

@keyframes sc-company-menu-pulse {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.45;
  }
}

.sc-company-menu__status--error {
  display: flex;
  flex-direction: column;
  gap: var(--sc-space-sm);
}

@media (max-width: 600px) {
  :host {
    width: 100%;
  }

  .sc-company-menu__trigger {
    width: 100%;
  }

  .sc-company-menu__company {
    min-height: 44px;
  }
}

/* ── styles/sc-compliance-toggle-banner.css ── */
/* ScComplianceToggleBanner — top-of-page banner with a switch toggle.

   Used on project-level compliance pages where the PA opts a project into a
   compliance feature (Insurance Clerk per-coverage compliance, future
   workflows). The switch posts the configured form field on submit. */

:host {
  display: block;
}

.sc-compliance-toggle-banner {
  box-sizing: border-box;
  width: 100%;
  /* Strong, unmistakable mint wash so the "enabled" state reads at a glance. */
  background: var(--sc-brand-mint, #DEF3EF);
  border: 1px solid var(--sc-green-alpha20, #068F3D33);
  border-left: 4px solid var(--sc-brand-green, #068F3D);
  border-radius: 14px;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  color: var(--sc-brand-blue, #0C0A3E);
  font-family: var(--sc-font-family-body);
  box-shadow: 0 1px 2px rgba(6, 143, 61, 0.06);
}

.sc-compliance-toggle-banner--off {
  background: var(--sc-gray-light, #F9FAFC);
  border: 1px solid var(--sc-gray-normal, #E8E7EC);
  border-left: 4px solid var(--sc-blue-alpha20, #0C0A3E33);
  box-shadow: none;
}

/* ── Switch ──────────────────────────────────────── */

.sc-compliance-toggle-banner__switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}

.sc-compliance-toggle-banner__switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.sc-compliance-toggle-banner__slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--sc-blue-alpha20, #0C0A3E33);
  border-radius: 999px;
  transition: background 0.18s ease;
}

.sc-compliance-toggle-banner__slider::before {
  content: '';
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  top: 3px;
  background: #ffffff;
  border-radius: 50%;
  transition: transform 0.18s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.sc-compliance-toggle-banner__switch input:checked + .sc-compliance-toggle-banner__slider {
  background: var(--sc-brand-green, #068F3D);
}

.sc-compliance-toggle-banner__switch input:checked + .sc-compliance-toggle-banner__slider::before {
  transform: translateX(20px);
}

.sc-compliance-toggle-banner__switch input:disabled + .sc-compliance-toggle-banner__slider {
  cursor: not-allowed;
  opacity: 0.5;
}

/* ── Text block ──────────────────────────────────── */

.sc-compliance-toggle-banner__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 280px;
  min-width: 0;
}

.sc-compliance-toggle-banner__title {
  font-weight: 600;
  font-size: 16px;
  line-height: 22px;
  color: var(--sc-brand-blue, #0C0A3E);
}

.sc-compliance-toggle-banner__description {
  font-size: 13px;
  line-height: 18px;
  color: var(--sc-blue-muted, #374151);
}

/* ── Right slot ──────────────────────────────────── */

.sc-compliance-toggle-banner__slot {
  flex-shrink: 0;
}

/* ── styles/sc-dashboard-card.css ── */
/* ScDashboardCard — lightweight dashboard grid card shell (Figma Webapp — New).

   Used on project overview and similar dashboard pages where content is grouped
   into rounded, shadowed panels. Width is always 100%; the parent grid sets
   column sizing. Inner layout and typography belong in the slotted content. */

:host {
  border-radius: 10px;
  display: block;
  width: 100%;
  min-width: 0;
  --sc-dashboard-card-body-gap: 10px;
}

/* Shadow on the host so fill-height inner overflow cannot clip card edges. */
:host([shadow='sm']) {
  box-shadow: 0 0 2px rgb(0 0 0 / 0.25);
}

:host(:not([shadow])),
:host([shadow='md']) {
  box-shadow: 0 0 4px rgb(0 0 0 / 0.25);
}

.sc-dashboard-card {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding: var(--sc-dashboard-card-padding, 10px);
  border-radius: 10px;
  display: flex;
  gap: 10px;
  color: var(--sc-brand-blue, #0c0a3e);
  font-family: var(--sc-font-family-body);
}

.sc-dashboard-card--column {
  flex-direction: column;
}

.sc-dashboard-card--row {
  flex-direction: row;
  align-items: stretch;
}

.sc-dashboard-card--translucent {
  background: var(--sc-dashboard-card-background, rgb(255 255 255 / 0.8));
}

.sc-dashboard-card--solid {
  background: var(--sc-white-normal, #ffffff);
}

.sc-dashboard-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.sc-dashboard-card__header--clickable {
  position: relative;
}

.sc-dashboard-card__header-link {
  align-items: center;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
  width: 100%;
}

.sc-dashboard-card__header-link:hover .sc-dashboard-card__title,
.sc-dashboard-card__header-link:focus-visible .sc-dashboard-card__title,
.sc-dashboard-card__header--clickable:hover .sc-dashboard-card__title,
.sc-dashboard-card__header--clickable:has(.sc-dashboard-card__primary-link:focus-visible)
  .sc-dashboard-card__title {
  text-decoration: underline;
}

.sc-dashboard-card__header-link:hover .sc-dashboard-card__open,
.sc-dashboard-card__header-link:focus-visible .sc-dashboard-card__open,
.sc-dashboard-card__header--clickable:hover .sc-dashboard-card__open,
.sc-dashboard-card__header--clickable:has(.sc-dashboard-card__primary-link:focus-visible)
  .sc-dashboard-card__open {
  background: rgb(12 10 62 / 0.18);
}

.sc-dashboard-card__header-link:focus-visible {
  border-radius: 2px;
  outline: 2px solid rgb(12 10 62 / 0.35);
  outline-offset: 2px;
}

/* Absolutely positioned so the empty <a> is not a flex item in the header. */
.sc-dashboard-card__primary-link {
  border-radius: 2px;
  color: inherit;
  inset: 0;
  position: absolute;
  text-decoration: none;
  z-index: 0;
}

.sc-dashboard-card__primary-link:focus-visible {
  outline: 2px solid rgb(12 10 62 / 0.35);
  outline-offset: 2px;
}

.sc-dashboard-card__title {
  margin: 0;
  font-family: "Work Sans", var(--sc-font-family-body);
  font-size: 18px;
  font-weight: var(--sc-dashboard-card-title-weight, 600);
  line-height: 1.25;
  min-width: 0;
  /* Let clicks reach the stretched primary link under the title. */
  pointer-events: none;
  position: relative;
  text-transform: var(--sc-dashboard-card-title-transform, none);
  z-index: 0;
}

.sc-dashboard-card__header-end {
  align-items: center;
  display: flex;
  flex-shrink: 0;
  gap: 6px;
  /* Decorative chevron and empty space pass through to the primary link. */
  pointer-events: none;
  position: relative;
}

.sc-dashboard-card__actions {
  flex-shrink: 0;
  pointer-events: auto;
  position: relative;
  z-index: 1;
}

.sc-dashboard-card__open {
  --sc-icon-color: var(--sc-brand-blue, #0c0a3e);

  align-items: center;
  background: rgb(12 10 62 / 0.1);
  border-radius: 50%;
  color: var(--sc-brand-blue, #0c0a3e);
  display: inline-flex;
  flex: 0 0 auto;
  height: 30px;
  justify-content: center;
  pointer-events: none;
  position: relative;
  transition: background-color 0.15s ease;
  width: 30px;
}

.sc-dashboard-card__open sc-icons {
  height: 8px;
  width: 5px;
}

.sc-dashboard-card__open-icon {
  display: block;
  transform: rotate(180deg);
}

.sc-dashboard-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--sc-dashboard-card-body-gap);
  min-width: 0;
  flex: 1;
}

.sc-dashboard-card--row .sc-dashboard-card__body {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
}

:host([fill-height]) {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 100%;
  min-height: 0;
}

:host([fill-height]) .sc-dashboard-card {
  flex: 1 1 auto;
  min-height: 0;
}

:host([fill-height]) .sc-dashboard-card__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

/* ── styles/sc-data-center-card.css ── */
/* ScDataCenterCard — Project Overview V2 Data Center card (Figma 237:502). */

:host {
  /* Shadow on the host so the inner panel can use overflow:hidden without clipping it. */
  box-shadow: 0 0 4px rgb(0 0 0 / 0.25);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  /*
   * Refuse flex-shrink from Overview height locks. (min-height:min-content on :host
   * resolves to 0px in Chromium, so flex-shrink:0 is the reliable guard.)
   */
  flex-shrink: 0;
  min-width: 0;
  width: 100%;
}

.sc-data-center-card {
  background: rgb(255 255 255 / 0.8);
  border-radius: 10px;
  box-sizing: border-box;
  color: var(--sc-brand-blue, #0c0a3e);
  /* Query this box width so Overview columns reflow without viewport media queries. */
  container-type: inline-size;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  font-family: var(--sc-font-family-body);
  gap: 10px;
  min-width: 0;
  overflow: hidden;
  padding: 10px;
  width: 100%;
}

.sc-data-center-card__header,
.sc-data-center-card__report {
  align-items: center;
  display: flex;
  flex-shrink: 0;
  justify-content: space-between;
  min-width: 0;
}

.sc-data-center-card__header-link {
  color: inherit;
  cursor: pointer;
  text-decoration: none;
  width: 100%;
}

.sc-data-center-card__header-link:hover .sc-data-center-card__title,
.sc-data-center-card__header-link:focus-visible .sc-data-center-card__title {
  text-decoration: underline;
}

.sc-data-center-card__header-link:focus-visible {
  border-radius: 2px;
  outline: 2px solid rgb(12 10 62 / 0.35);
  outline-offset: 2px;
}

.sc-data-center-card__title {
  font-family: var(--sc-font-family-heading, var(--sc-font-family-body));
  font-size: 18px;
  font-weight: var(--sc-font-weight-medium, 500);
  line-height: 1;
  margin: 0;
  text-transform: uppercase;
}

.sc-data-center-card__section {
  display: flex;
  /* Do not flex-grow/shrink — growing left a dead gap when tall; shrinking
     crushed metrics and let the absolute SafetyScore tooltip float over them. */
  flex: 0 0 auto;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.sc-data-center-card__section-heading {
  align-items: center;
  display: flex;
  /* Keep the open control beside the title, not pushed to the column edge. */
  gap: 8px;
  justify-content: flex-start;
  /* Match open-control height so SafetyScore / Weather headings stay level. */
  min-height: 30px;
  min-width: 0;
}

.sc-data-center-card__section-heading-link {
  color: inherit;
  cursor: pointer;
  text-decoration: none;
}

.sc-data-center-card__section-heading-link:hover .sc-data-center-card__section-title,
.sc-data-center-card__section-heading-link:focus-visible .sc-data-center-card__section-title {
  text-decoration: underline;
}

.sc-data-center-card__section-heading-link:hover .sc-data-center-card__open,
.sc-data-center-card__section-heading-link:focus-visible .sc-data-center-card__open {
  background: rgb(12 10 62 / 0.18);
}

.sc-data-center-card__section-heading-link:focus-visible {
  border-radius: 2px;
  outline: 2px solid rgb(12 10 62 / 0.35);
  outline-offset: 2px;
}

.sc-data-center-card__section-title,
.sc-data-center-card__report h3,
.sc-data-center-card__section-heading h3 {
  font-size: 14px;
  font-weight: var(--sc-font-weight-semibold, 600);
  line-height: 1;
  margin: 0;
}

/* Decorative circular chevron inside section heading links. */
.sc-data-center-card__open {
  --sc-icon-color: var(--sc-brand-blue, #0c0a3e);

  align-items: center;
  background: rgb(12 10 62 / 0.1);
  border-radius: 50%;
  color: var(--sc-brand-blue, #0c0a3e);
  display: inline-flex;
  flex: 0 0 auto;
  height: 30px;
  justify-content: center;
  transition: background-color 0.15s ease;
  width: 30px;
}

.sc-data-center-card__open sc-icons {
  height: 8px;
  width: 5px;
}

.sc-data-center-card__open-icon {
  display: block;
  transform: rotate(180deg);
}

.sc-data-center-card__metrics {
  display: grid;
  gap: 4px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sc-data-center-card__metric,
.sc-data-center-card__weather {
  background: linear-gradient(180deg, rgb(184 230 221 / 0.5), rgb(204 229 224 / 0.2));
  border-radius: 10px;
  box-sizing: border-box;
}

.sc-data-center-card__metric {
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
  min-height: 90px;
  /* Allow the 3-up grid to compress tiles instead of forcing a column wrap. */
  min-width: 0;
  padding: 18px 12px;
}

.sc-data-center-card__metric--link {
  color: inherit;
  text-decoration: none;
  transition: box-shadow 0.15s ease, filter 0.15s ease;
}

.sc-data-center-card__metric--link:hover,
.sc-data-center-card__metric--link:focus-visible {
  color: inherit;
  filter: brightness(0.97);
  text-decoration: none;
}

.sc-data-center-card__metric--link:focus-visible {
  outline: 2px solid rgb(12 10 62 / 0.35);
  outline-offset: 2px;
}

.sc-data-center-card__metric-value {
  font-size: 24px;
  font-weight: var(--sc-font-weight-medium, 500);
  line-height: 1;
}

.sc-data-center-card__metric-label {
  display: flex;
  flex-direction: column;
  font-size: 14px;
  line-height: 1;
  overflow-wrap: anywhere;
  text-transform: uppercase;
}

.sc-data-center-card__details-grid {
  display: grid;
  flex: 1 1 auto;
  gap: 8px 4px;
  grid-template-columns: 2fr 1fr;
  min-height: 0;
  min-width: 0;
}

/* No SafetyScore series (unauthorized or empty): Weather fills the details row. */
.sc-data-center-card__details-grid--weather-only {
  grid-template-columns: minmax(0, 1fr);
}

.sc-data-center-card__details-grid--weather-only .sc-data-center-card__weather {
  background: rgb(222 243 239 / 0.5);
  border-radius: 10px;
  width: 100%;
}

/* Keep heading + panel together so narrow stacking preserves reading order. */
.sc-data-center-card__details-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.sc-data-center-card__safety {
  background: rgb(222 243 239 / 0.5);
  border-radius: 10px;
  box-sizing: border-box;
  /* Match Weather panel height (Figma 237:540). Absolute overlays sit inside. */
  height: 166px;
  min-height: 166px;
  /* The hover marker is taller than this plot. Let it extend past the panel
     so the dot stays on the score instead of being pinned inside the canvas. */
  overflow: visible;
  padding: 10px;
  position: relative;
}

.sc-data-center-card__safety-chart {
  --sc-insight-chart-canvas-height: calc(100% - 54px);
  --sc-insight-chart-canvas-margin-bottom: 0;
  display: block;
  height: 100%;
  min-width: 0;
  width: 100%;
}

/* Static Last 3 Months chip — floats over the chart at the top-left. */
.sc-data-center-card__timeframe {
  display: flex;
  left: 10px;
  max-width: calc(100% - 20px);
  pointer-events: none;
  position: absolute;
  top: 8px;
  z-index: 2;
}

.sc-data-center-card__score-tooltip {
  align-items: center;
  backdrop-filter: blur(0.75px);
  background: rgb(255 255 255 / 0.55);
  border-radius: 4px;
  bottom: 8px;
  box-shadow: 0 0 1.5px rgb(0 0 0 / 0.25);
  box-sizing: border-box;
  display: flex;
  height: 46px;
  justify-content: space-between;
  left: 10px;
  overflow: hidden;
  padding: 5px 6px;
  position: absolute;
  right: 10px;
  z-index: 1;
}

.sc-data-center-card__score-badge {
  align-items: center;
  background: #30791a;
  border-radius: 2px;
  box-sizing: border-box;
  color: var(--sc-white-normal, #fff);
  display: inline-flex;
  flex-shrink: 0;
  font-size: 20px;
  font-weight: var(--sc-font-weight-bold, 700);
  height: 34px;
  justify-content: center;
  line-height: 1;
  min-width: 63px;
  overflow: visible;
  padding: 1px 8px;
}

.sc-data-center-card__score-breakdown {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 4.5px;
  justify-content: center;
  /* Pin Base Score pair to the tooltip's right edge at every host width. */
  margin-left: auto;
  min-width: 0;
}

.sc-data-center-card__score-row {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  /* Keep label + value as a tight pair (Overview shows Base Score only). */
  gap: 6px;
  justify-content: flex-end;
  width: auto;
}

.sc-data-center-card__score-label {
  color: var(--sc-brand-blue, #0c0a3e);
  font-size: 12px;
  font-weight: var(--sc-font-weight-regular, 400);
  line-height: 1;
  opacity: 0.7;
  white-space: nowrap;
}

.sc-data-center-card__score-value {
  color: var(--sc-brand-blue, #0c0a3e);
  font-size: 12px;
  font-weight: var(--sc-font-weight-bold, 700);
  line-height: 1;
  opacity: 0.7;
  white-space: nowrap;
}

.sc-data-center-card__weather {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 166px;
  justify-content: center;
  min-height: 166px;
  padding: 18px 20px;
  position: relative;
  text-align: center;
}

.sc-data-center-card__weather-info {
  position: absolute;
  right: 8px;
  top: 8px;
  z-index: 1;
}

.sc-data-center-card__weather-main {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: 15px;
}

.sc-data-center-card__weather-icon {
  --sc-icon-color: var(--sc-brand-blue, #0C0A3E);
  --sc-icon-size: 52px;
  color: var(--sc-brand-blue, #0C0A3E);
  flex-shrink: 0;
}

.sc-data-center-card__temperature {
  font-size: 22px;
  line-height: 1;
}

.sc-data-center-card__weather p {
  font-size: 12px;
  line-height: 1.1;
  margin: 0;
}

.sc-data-center-card__download[disabled] {
  opacity: 0.45;
}

/*
 * Overview desktop columns are ~515px (Figma keeps metrics 3-up). Insights
 * metrics stay in one row at every host width; only SafetyScore/Weather stack
 * when the host is too narrow for the two-column details massing. Compress
 * metric chrome below so labels fit without wrapping the grid to 3 rows.
 */
@container (max-width: 480px) {
  .sc-data-center-card__details-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .sc-data-center-card__metric {
    min-height: 72px;
    padding: 10px 8px;
  }

  .sc-data-center-card__metric-value {
    font-size: 20px;
  }

  .sc-data-center-card__metric-label {
    font-size: 11px;
  }

  .sc-data-center-card__weather {
    min-height: 0;
  }

  .sc-data-center-card__score-tooltip {
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    height: auto;
    min-height: 46px;
  }

  .sc-data-center-card__score-breakdown {
    flex: 0 0 auto;
    margin-left: auto;
    min-width: 0;
  }
}

@container (max-width: 360px) {
  .sc-data-center-card {
    gap: 8px;
    padding: 8px;
  }

  .sc-data-center-card__metric {
    gap: 2px;
    min-height: 64px;
    padding: 8px 6px;
  }

  .sc-data-center-card__metric-value {
    font-size: 18px;
  }

  .sc-data-center-card__metric-label {
    font-size: 10px;
  }

  .sc-data-center-card__weather {
    padding: 12px 14px;
  }

  .sc-data-center-card__weather-icon {
    --sc-icon-size: 40px;
  }

  .sc-data-center-card__temperature {
    font-size: 18px;
  }

  .sc-data-center-card__score-badge {
    font-size: 16px;
    min-width: 52px;
  }
}

/* Async load states (``data-endpoint``): skeleton while in flight, message on failure. */
.sc-data-center-card--loading {
  gap: 10px;
  justify-content: flex-start;
}

.sc-data-center-card__skeleton-block {
  animation: sc-data-center-card-pulse 1.4s ease-in-out infinite;
  background: rgb(12 10 62 / 0.08);
  border-radius: 8px;
  flex-shrink: 0;
  min-height: 48px;
}

.sc-data-center-card__error-message {
  color: var(--sc-brand-blue, #0c0a3e);
  font-size: 13px;
  margin: 0;
}

.sc-data-center-card__visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

@keyframes sc-data-center-card-pulse {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.55;
  }
}

/* ── styles/sc-data-table.css ── */
/* ScDataTable — branded chrome around a DataTables-initialized table.

   The table itself is slotted, so it stays in light DOM and the global
   ``$("table.datatable")`` init in base.html still finds it. This component
   owns the outer card shell + the toolbar/filter chrome and the styling of
   the slotted DataTables-generated controls (search input, dt-buttons,
   pagination, length select).

   Figma reference: Webapp---New → tables (node 2058:15125). Colors and
   typography below resolve through design-system tokens
   (``design-system/dist/tokens.css``). Raw values are only used when no
   matching token exists; each is annotated. Known palette deltas where
   the SC token drifts slightly from the Figma source (e.g. Figma
   ``#4a5565`` vs token ``--sc-blue-muted`` ``#374151``) should be
   reconciled by updating ``design-system/tokens/colors.json``, not by
   hardcoding here.
*/

:host {
  display: block;
  width: 100%;
  font-family: var(--sc-font-family-body, 'Work Sans'), sans-serif;
  color: var(--sc-brand-blue, #0C0A3E);
}

:host([hidden]) {
  display: none;
}

.sc-data-table {
  box-sizing: border-box;
  width: 100%;
  background: var(--sc-white-normal, #FFFFFF);
  border: 1px solid var(--sc-gray-normal, #E8E7EC);
  border-radius: 10px; /* matches Figma 10.291px; no exact token (md=8 / lg=12) */
  overflow: hidden;
}

/* ── Toolbar (title + actions strip) ── */

.sc-data-table__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sc-space-md, 12px);
  padding: var(--sc-space-md, 12px) var(--sc-space-xl, 20px);
  background: var(--sc-white-normal, #FFFFFF);
  /* Row separator: slightly lighter than --sc-gray-light to stay subtle. */
  border-bottom: 1px solid #f8f8f8;
  flex-wrap: wrap;
}

.sc-data-table__toolbar--empty {
  display: none;
}

.sc-data-table__heading {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.sc-data-table__title {
  margin: 0;
  font-weight: var(--sc-font-weight-medium, 500);
  font-size: var(--sc-font-size-label, 14px);
  line-height: 20px;
  color: var(--sc-brand-blue, #0C0A3E);
}

.sc-data-table__subtitle {
  margin: 0;
  font-size: var(--sc-font-size-caption, 12px);
  line-height: 16px;
  color: var(--sc-blue-muted, #374151);
}

.sc-data-table__actions {
  display: inline-flex;
  align-items: center;
  gap: var(--sc-space-sm, 8px);
  flex-shrink: 0;
}

/* ── Filters strip ── */

.sc-data-table__filters {
  display: flex;
  align-items: flex-end;
  gap: var(--sc-space-md, 12px);
  padding: var(--sc-space-md, 12px) var(--sc-space-xl, 20px);
  background: var(--sc-white-normal, #FFFFFF);
  border-bottom: 1px solid #f8f8f8;
  flex-wrap: wrap;
}

.sc-data-table__filters--empty {
  display: none;
}

.sc-data-table__body {
  padding: 0;
}

.sc-data-table__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sc-space-md, 12px);
  padding: 10px var(--sc-space-xl, 20px);
  background: var(--sc-white-normal, #FFFFFF);
  border-top: 1px solid #f8f8f8;
  font-size: 13px;
  line-height: 18px;
  color: var(--sc-blue-muted, #374151);
}

.sc-data-table__footer--empty {
  display: none;
}

/* ── Light-DOM rules ─────────────────────────────────────────────────
   This file is also concatenated into ``dist/components.css`` (loaded
   globally by base.html), so selectors below — which all require a
   light-DOM ``sc-data-table`` ancestor — apply to the **slotted**
   DataTables-generated content. They have no effect inside the
   component's own Shadow root because there is no ``sc-data-table``
   ancestor in that scope.

   Figma reference: Webapp---New → tables (node 2058:15125). Targets:
   the slotted ``table.datatable``, the DataTables-generated wrapper, the
   ``.dt-buttons`` row, ``.dataTables_filter`` search input, and the
   ``.dataTables_length`` / ``.dataTables_paginate`` footer.
*/

sc-data-table .dataTables_wrapper {
  background: transparent;
  border: 0;
  margin: 0;
  width: 100%;
}

sc-data-table .dataTables_wrapper > div:not([class]) {
  /* The "naked" div is the wrapper rendered by DataTables' ``dom: '<Bf<t>lp>'``
     setting in base.html. Use grid to reposition the controls into a tidy
     header/body/footer layout. */
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "filter  buttons"
    "table   table"
    "length  paginate";
  gap: 0;
}

sc-data-table .dataTables_wrapper .dt-buttons {
  grid-area: buttons;
  align-items: center;
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--sc-space-sm, 8px);
  padding: 10px var(--sc-space-xl, 20px) 10px 0;
  border-bottom: 1px solid #f8f8f8;
  background: var(--sc-white-normal, #FFFFFF);
  justify-content: flex-end;
  margin: 0;
}

sc-data-table .dataTables_wrapper .dataTables_filter {
  grid-area: filter;
  padding: 10px 0 10px var(--sc-space-xl, 20px);
  margin: 0;
  border-bottom: 1px solid #f8f8f8;
  background: var(--sc-white-normal, #FFFFFF);
  text-align: left;
}

sc-data-table .dataTables_wrapper .dataTables_filter label {
  align-items: center;
  display: inline-flex;
  font-family: var(--sc-font-family-body, 'Work Sans', sans-serif);
  font-size: var(--sc-font-size-caption, 12px);
  font-weight: var(--sc-font-weight-medium, 500);
  gap: var(--sc-space-sm, 8px);
  margin: 0;
  color: var(--sc-blue-muted, #374151);
  width: 100%;
  max-width: 380px;
}

sc-data-table .dataTables_wrapper .dataTables_filter input[type="search"] {
  background: var(--sc-white-alpha50, rgba(255, 255, 255, 0.5));
  /* Form input border — no exact SC token; close to gray-normal but lighter.
     Kept raw to match Figma "Text Input" (#d1d5dc / Tailwind slate-300). */
  border: 1px solid #d1d5dc;
  border-radius: 10px;
  box-sizing: border-box;
  color: var(--sc-brand-blue, #0C0A3E);
  font-family: var(--sc-font-family-body, 'Work Sans', sans-serif);
  font-size: var(--sc-font-size-label, 14px);
  line-height: 18px;
  margin: 0;
  padding: 8px 12px 8px 36px;
  width: 100%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'><circle cx='7' cy='7' r='5' stroke='%23374151' stroke-width='1.5'/><path d='M11 11L14 14' stroke='%23374151' stroke-width='1.5' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: 10px center;
}

sc-data-table .dataTables_wrapper .dataTables_filter input[type="search"]:focus {
  border-color: var(--sc-brand-blue, #0C0A3E);
  box-shadow: 0 0 0 3px var(--sc-blue-alpha10, rgba(12, 10, 62, 0.1));
  outline: none;
}

sc-data-table .dataTables_wrapper .dt-buttons .dt-button {
  align-items: center;
  background: var(--sc-white-normal, #FFFFFF);
  border: 1px solid var(--sc-blue-alpha30, rgba(12, 10, 62, 0.3));
  border-radius: var(--sc-border-radius-pill, 999px);
  color: var(--sc-brand-blue, #0C0A3E);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--sc-font-family-body, 'Work Sans', sans-serif);
  font-size: var(--sc-font-size-caption, 12px);
  font-weight: var(--sc-font-weight-medium, 500);
  gap: 6px;
  line-height: 18px;
  margin: 0;
  padding: 6px 14px;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}

sc-data-table .dataTables_wrapper .dt-buttons .dt-button:hover {
  background: var(--sc-gray-light, #F9FAFC);
  border-color: var(--sc-blue-alpha50, rgba(12, 10, 62, 0.5));
}

sc-data-table .dataTables_wrapper .dt-buttons .dt-button:focus-visible {
  box-shadow: 0 0 0 3px var(--sc-blue-alpha10, rgba(12, 10, 62, 0.12));
  outline: none;
}

/* Table wrapper (the unnamed div from DataTables' ``<t>``) */
sc-data-table .dataTables_wrapper > div:not([class]) > div:not([class]) {
  grid-area: table;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* Keep horizontal scrollbar permanently visible when content overflows
     (not hover-only overlay). Match sc-multi-select-chips: do NOT set
     scrollbar-width/scrollbar-color — those force Chromium's thin overlay. */
}

sc-data-table .dataTables_wrapper > div:not([class]) > div:not([class])::-webkit-scrollbar {
  height: 10px;
}

sc-data-table .dataTables_wrapper > div:not([class]) > div:not([class])::-webkit-scrollbar-track {
  background: transparent;
}

sc-data-table .dataTables_wrapper > div:not([class]) > div:not([class])::-webkit-scrollbar-thumb {
  background: rgba(12, 10, 62, 0.28);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}

sc-data-table .dataTables_wrapper > div:not([class]) > div:not([class])::-webkit-scrollbar-thumb:hover {
  background: rgba(12, 10, 62, 0.45);
  background-clip: padding-box;
}

/* The table itself */
sc-data-table table.datatable {
  border: 0;
  border-collapse: separate;
  border-spacing: 0;
  margin: 0 !important;
  width: 100%;
}

sc-data-table table.datatable thead th {
  background: var(--sc-gray-light, #F9FAFC);
  border-bottom: 1px solid var(--sc-gray-normal, #E8E7EC);
  border-left: 0;
  border-right: 0;
  border-top: 0;
  color: var(--sc-blue-muted, #374151);
  font-family: var(--sc-font-family-body, 'Work Sans', sans-serif);
  font-size: var(--sc-font-size-caption, 12px);
  font-weight: var(--sc-font-weight-regular, 400);
  height: 43px;
  letter-spacing: normal;
  line-height: 18px;
  padding: 13px var(--sc-space-xl, 20px) 12px;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}

sc-data-table table.datatable tbody td {
  background: var(--sc-white-normal, #FFFFFF);
  border-bottom: 1px solid #f8f8f8;
  color: var(--sc-brand-blue, #0C0A3E);
  font-family: var(--sc-font-family-body, 'Work Sans', sans-serif);
  font-size: var(--sc-font-size-label, 14px);
  font-weight: var(--sc-font-weight-regular, 400);
  line-height: 18px;
  padding: 14px var(--sc-space-xl, 20px);
  vertical-align: middle;
}

sc-data-table table.datatable tbody tr:last-child td {
  border-bottom: 0;
}

sc-data-table table.datatable tbody tr:hover td {
  background: var(--sc-gray-light, #F9FAFC);
}

/* A totals row: <tfoot class="sc-data-table__totals">, its cells lined up with the body's and set
   apart by a band and a rule. The row's label is a <th scope="row">; its values are <td>s. Opt-in,
   so the footers other tables already style for themselves are left as they are. */
sc-data-table table.datatable tfoot.sc-data-table__totals th,
sc-data-table table.datatable tfoot.sc-data-table__totals td {
  background: var(--sc-gray-light, #F9FAFC);
  border-top: 1px solid var(--sc-gray-normal, #E8E7EC);
  color: var(--sc-brand-blue, #0C0A3E);
  font-family: var(--sc-font-family-body, 'Work Sans', sans-serif);
  font-size: var(--sc-font-size-label, 14px);
  font-weight: var(--sc-font-weight-semibold, 600);
  line-height: 18px;
  padding: 14px var(--sc-space-xl, 20px);
  text-align: left;
  vertical-align: middle;
}

sc-data-table table.datatable tbody td a {
  color: var(--sc-brand-blue, #0C0A3E);
}

/* Sort indicators — keep DataTables glyphs but tint them */
sc-data-table table.datatable thead > tr > th.sorting,
sc-data-table table.datatable thead > tr > th.sorting_asc,
sc-data-table table.datatable thead > tr > th.sorting_desc {
  padding-right: 26px;
}

sc-data-table table.datatable thead > tr > th.sorting:before,
sc-data-table table.datatable thead > tr > th.sorting:after,
sc-data-table table.datatable thead > tr > th.sorting_asc:before,
sc-data-table table.datatable thead > tr > th.sorting_asc:after,
sc-data-table table.datatable thead > tr > th.sorting_desc:before,
sc-data-table table.datatable thead > tr > th.sorting_desc:after {
  color: var(--sc-blue-muted, #374151);
  opacity: 0.45;
}

sc-data-table table.datatable thead > tr > th.sorting_asc:before,
sc-data-table table.datatable thead > tr > th.sorting_desc:after {
  opacity: 0.85;
}

/* Footer: "Show X elements" + page numbers */
sc-data-table .dataTables_wrapper .dataTables_length {
  grid-area: length;
  align-items: center;
  display: inline-flex;
  gap: 10px;
  padding: 10px 0 10px var(--sc-space-xl, 20px);
  margin: 0;
  background: var(--sc-white-normal, #FFFFFF);
  border-top: 1px solid #f8f8f8;
}

sc-data-table .dataTables_wrapper .dataTables_length label {
  align-items: center;
  display: inline-flex;
  font-family: var(--sc-font-family-body, 'Work Sans', sans-serif);
  font-size: var(--sc-font-size-label, 14px);
  line-height: 18px;
  gap: 10px;
  margin: 0;
  color: var(--sc-brand-blue, #0C0A3E);
}

sc-data-table .dataTables_wrapper .dataTables_length select {
  background: var(--sc-white-normal, #FFFFFF);
  /* Same form-input border as the search input — no exact SC token. */
  border: 1px solid #d1d5dc;
  border-radius: var(--sc-border-radius-sm, 4px);
  color: var(--sc-brand-blue, #0C0A3E);
  font-family: var(--sc-font-family-body, 'Work Sans', sans-serif);
  font-size: var(--sc-font-size-caption, 12px);
  font-weight: var(--sc-font-weight-medium, 500);
  padding: 6px 10px;
}

/* ``div.dataTables_wrapper div.dataTables_paginate`` in css/table.css pulls the classic
   layout's pagination up with ``margin-top: -32px !important`` so it sits beside
   "Show N entries". Inside this component the footer is its own grid row, so that negative
   margin makes the pagination bleed 32px up into the last table row. The classic rule is
   ``!important``, so no amount of specificity wins — the reset has to match it. Scoped to
   ``sc-data-table``, so classic tables keep their existing pull-up. */
sc-data-table div.dataTables_wrapper div.dataTables_paginate {
  grid-area: paginate;
  padding: 10px var(--sc-space-xl, 20px) 10px 0;
  margin: 0;
  margin-top: 0 !important;
  background: var(--sc-white-normal, #FFFFFF);
  border-top: 1px solid #f8f8f8;
  font-family: var(--sc-font-family-body, 'Work Sans', sans-serif);
  font-size: var(--sc-font-size-caption, 12px);
  font-weight: var(--sc-font-weight-medium, 500);
}

sc-data-table .dataTables_wrapper .dataTables_paginate ul.pagination {
  align-items: center;
  display: inline-flex;
  gap: 0;
  margin: 0;
  justify-content: flex-end;
}

sc-data-table .dataTables_wrapper .dataTables_paginate .page-item .page-link {
  align-items: center;
  background: var(--sc-white-normal, #FFFFFF);
  border: 1px solid #d1d5dc;
  border-radius: 0;
  box-sizing: border-box;
  color: var(--sc-brand-blue, #0C0A3E);
  display: inline-flex;
  font-family: var(--sc-font-family-body, 'Work Sans', sans-serif);
  font-size: var(--sc-font-size-caption, 12px);
  font-weight: var(--sc-font-weight-medium, 500);
  justify-content: center;
  margin: 0;
  min-height: 31px;
  min-width: 33px;
  padding: 8px 10px;
  text-align: center;
  transition: background 0.15s ease, color 0.15s ease;
}

sc-data-table .dataTables_wrapper .dataTables_paginate .page-item:not(:first-child) .page-link {
  border-left: 0;
}

sc-data-table .dataTables_wrapper .dataTables_paginate .page-item:first-child .page-link {
  border-radius: var(--sc-border-radius-sm, 4px) 0 0 var(--sc-border-radius-sm, 4px);
}

sc-data-table .dataTables_wrapper .dataTables_paginate .page-item:last-child .page-link {
  border-radius: 0 var(--sc-border-radius-sm, 4px) var(--sc-border-radius-sm, 4px) 0;
}

sc-data-table .dataTables_wrapper .dataTables_paginate .page-item:not(.active):not(.disabled) .page-link:hover {
  background: var(--sc-gray-light, #F9FAFC);
}

sc-data-table .dataTables_wrapper .dataTables_paginate .page-item.active .page-link {
  background: var(--sc-brand-blue, #0C0A3E);
  border-color: var(--sc-brand-blue, #0C0A3E);
  color: var(--sc-white-normal, #FFFFFF);
}

sc-data-table .dataTables_wrapper .dataTables_paginate .page-item.disabled .page-link {
  color: var(--sc-blue-alpha30, rgba(12, 10, 62, 0.3));
  background: var(--sc-white-normal, #FFFFFF);
  border-color: #d1d5dc;
}

sc-data-table .dataTables_wrapper .dataTables_info {
  color: var(--sc-blue-muted, #374151);
  font-size: var(--sc-font-size-caption, 12px);
  padding: 0;
}

/* ── Inline action buttons in the line-items table ────────────────────
   Used by ``_line_items_table_macro.html`` for the inline "Save row" button
   that sits next to native sc-button delete/edit actions. The button hosts a
   FontAwesome icon and needs to look like an sc-button (outline pill) without
   pulling in the full Lit component just to render a single glyph. */
.sc-line-item-save-btn {
  background: transparent;
  border: 1px solid var(--sc-blue-alpha30, rgba(12, 10, 62, 0.3));
  border-radius: 999px;
  color: var(--sc-brand-blue, #0C0A3E);
  cursor: pointer;
  padding: 4px 10px;
}

.sc-line-item-save-btn:hover {
  border-color: var(--sc-blue-alpha50, rgba(12, 10, 62, 0.5));
  background: var(--sc-gray-light, #F9FAFC);
}

.sc-line-item-save-btn:focus-visible {
  box-shadow: 0 0 0 3px var(--sc-blue-alpha10, rgba(12, 10, 62, 0.1));
  outline: none;
}

/* ── styles/sc-date-nav.css ── */
:host {
  display: block;
  font-family: var(--sc-font-family-body, 'Work Sans'), sans-serif;
  min-width: 0;
}

.sc-date-nav {
  align-items: center;
  background: rgb(204 229 224 / 0.5);
  border-radius: 14px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  min-height: 26px;
  min-width: 0;
  padding: 2px 10px 2px 6px;
}

.sc-date-nav__steps {
  align-items: center;
  display: flex;
  gap: 4px;
  justify-self: start;
  width: 40px;
}

.sc-date-nav__step {
  align-items: center;
  background: var(--sc-brand-blue, #0c0a3e);
  border: 0;
  border-radius: 50%;
  color: var(--sc-white-normal, #fff);
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  height: 18px;
  justify-content: center;
  padding: 0;
  position: relative;
  width: 18px;
}

/* Keeps the 18px chevron while giving each step a 32px touch target. The two targets grow away
   from each other so they meet in the 4px gap instead of overlapping. */
.sc-date-nav__step::after {
  content: '';
  inset: -7px -2px;
  position: absolute;
}

.sc-date-nav__step--prev::after {
  left: -12px;
}

.sc-date-nav__step--next::after {
  right: -12px;
}

.sc-date-nav__step:focus-visible {
  outline: 2px solid var(--sc-brand-blue, #0c0a3e);
  outline-offset: 2px;
}

.sc-date-nav__step sc-icons {
  --sc-icon-color: var(--sc-white-normal, #fff);

  height: 8px;
  width: 5px;
}

.sc-date-nav__step-icon--next {
  display: inline-flex;
  transform: rotate(180deg);
}

.sc-date-nav__step--prev:disabled {
  cursor: default;
  opacity: 0.45;
}

.sc-date-nav__step--next:disabled {
  background: rgb(196 196 196 / 0.85);
  cursor: default;
}

.sc-date-nav__picker {
  justify-self: center;
  max-width: 100%;
  min-width: 0;
}

.sc-date-nav__label {
  color: var(--sc-brand-blue, #0c0a3e);
  display: block;
  font-size: 16px;
  font-weight: var(--sc-font-weight-regular, 400);
  line-height: normal;
  min-width: 0;
  opacity: 0.7;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sc-date-nav__end {
  justify-self: end;
}

@media (max-width: 520px) {
  .sc-date-nav__label {
    font-size: 14px;
  }
}

/* ── styles/sc-date-picker.css ── */
:host {
  display: block;
  font-family: var(--sc-font-family-body, 'Work Sans'), sans-serif;
  color: var(--sc-brand-blue, #0C0A3E);
}

.sc-date-picker {
  display: flex;
  position: relative;
}

.sc-date-picker__field {
  display: flex;
  flex-direction: column;
  gap: var(--sc-space-xs, 4px);
  min-width: 160px;
  flex: 1 1 160px;
}

.sc-date-picker__label {
  font-size: 13px;
  font-weight: var(--sc-font-weight-medium, 500);
  color: var(--sc-blue-muted, #374151);
}

.sc-date-picker__label-required {
  margin-left: 2px;
  color: var(--sc-brand-red, #C0133D);
}

.sc-date-picker__trigger {
  display: flex;
  align-items: center;
  gap: var(--sc-space-sm, 8px);
  width: 100%;
  min-width: 0;
  padding: 8px 12px;
  background: var(--sc-white-normal, #FFFFFF);
  border: 1px solid var(--sc-gray-normal, #E8E7EC);
  border-radius: 10px;
  color: inherit;
  font-family: inherit;
  font-size: var(--sc-font-size-label, 14px);
  cursor: pointer;
  box-sizing: border-box;
}

.sc-date-picker__trigger:hover:not(:disabled) {
  border-color: var(--sc-blue-alpha30, #0C0A3E4D);
}

/* As a disabled sc-form-input reads. */
.sc-date-picker__trigger:disabled {
  background: var(--sc-gray-light, #F9FAFC);
  color: var(--sc-gray-dark, #A1A5B1);
  cursor: not-allowed;
}

.sc-date-picker__trigger:focus-visible {
  outline: 2px solid var(--sc-brand-blue, #0C0A3E);
  outline-offset: 2px;
}

.sc-date-picker__trigger[aria-expanded='true'] {
  border-color: var(--sc-brand-blue, #0C0A3E);
  box-shadow: 0 0 0 3px var(--sc-blue-alpha10, #0C0A3E1A);
}

.sc-date-picker__trigger sc-icons {
  width: 16px;
  height: 12px;
  flex-shrink: 0;
  color: var(--sc-blue-muted, #374151);
}

.sc-date-picker__popover {
  position: fixed;
  z-index: 1080;
  background: var(--sc-white-normal, #FFFFFF);
  border: 1px solid rgba(12, 10, 62, 0.08);
  border-radius: var(--sc-border-radius-lg, 12px);
  box-shadow: 0 16px 40px rgba(12, 10, 62, 0.16);
}

.sc-date-picker__clear {
  display: flex;
  justify-content: flex-end;
  padding: 0 var(--sc-space-md, 12px) var(--sc-space-md, 12px);
}

:host([variant='inline']) {
  display: block;
  min-width: 0;
  color: inherit;
  font-size: inherit;
}

:host([variant='inline']) .sc-date-picker {
  display: block;
}

:host([variant='inline']) .sc-date-picker__field {
  min-width: 0;
  flex: none;
  gap: 0;
}

:host([variant='inline']) .sc-date-picker__trigger {
  background: transparent;
  border: 0;
  border-radius: 2px;
  box-shadow: none;
  color: inherit;
  font-size: inherit;
  max-width: 100%;
  padding: 0;
  width: auto;
}

:host([variant='inline']) .sc-date-picker__trigger:hover,
:host([variant='inline']) .sc-date-picker__trigger[aria-expanded='true'] {
  border: 0;
  box-shadow: none;
  text-decoration: underline;
}

:host([variant='inline']) .sc-date-picker__trigger:focus-visible {
  border: 0;
  box-shadow: none;
  outline: 2px solid var(--sc-brand-blue, #0C0A3E);
  outline-offset: 2px;
}

/* ── styles/sc-date-range-picker.css ── */
:host {
  display: block;
  font-family: var(--sc-font-family-body, 'Work Sans'), sans-serif;
  color: var(--sc-brand-blue, #0C0A3E);
}

.sc-date-range-picker {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sc-space-md, 12px);
  position: relative;
}

.sc-date-range-picker__field {
  display: flex;
  flex-direction: column;
  gap: var(--sc-space-xs, 4px);
  min-width: 220px;
  flex: 1 1 220px;
}

.sc-date-range-picker__label {
  font-size: 13px;
  font-weight: var(--sc-font-weight-medium, 500);
  color: var(--sc-blue-muted, #374151);
}

.sc-date-range-picker__trigger {
  display: flex;
  align-items: center;
  gap: var(--sc-space-sm, 8px);
  width: 100%;
  min-width: 0;
  padding: 8px 12px;
  background: var(--sc-white-normal, #FFFFFF);
  border: 1px solid var(--sc-gray-normal, #E8E7EC);
  border-radius: 10px;
  color: inherit;
  font-family: inherit;
  font-size: var(--sc-font-size-label, 14px);
  cursor: pointer;
  box-sizing: border-box;
}

.sc-date-range-picker__trigger:hover {
  border-color: var(--sc-blue-alpha30, #0C0A3E4D);
}

.sc-date-range-picker__trigger:focus-visible {
  outline: 2px solid var(--sc-brand-blue, #0C0A3E);
  outline-offset: 2px;
}

.sc-date-range-picker__trigger[aria-expanded='true'] {
  border-color: var(--sc-brand-blue, #0C0A3E);
  box-shadow: 0 0 0 3px var(--sc-blue-alpha10, #0C0A3E1A);
}

.sc-date-range-picker__trigger sc-icons {
  width: 16px;
  height: 12px;
  flex-shrink: 0;
  color: var(--sc-blue-muted, #374151);
}

.sc-date-range-picker__popover {
  position: fixed;
  z-index: 1080;
  background: var(--sc-white-normal, #FFFFFF);
  border: 1px solid rgba(12, 10, 62, 0.08);
  border-radius: var(--sc-border-radius-lg, 12px);
  box-shadow: 0 16px 40px rgba(12, 10, 62, 0.16);
}

/* ── styles/sc-doc-chip.css ── */
/* ScDocChip — outlined document compliance pill for the Onboarding Status Matrix (#5457).
   positive = provided (green ✓) · negative = missing/expired (red ✕) · neutral = optional provided (grey ✓). */
.sc-doc-chip {
  font-family: var(--sc-font-family-body);
  font-weight: var(--sc-font-weight-medium);
  font-size: var(--sc-font-size-caption);
  line-height: 1.2;

  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;

  max-width: 100%;
  min-height: 25px;
  padding: 3px 10px;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: #ffffff;
}

.sc-doc-chip__doc {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
}

.sc-doc-chip__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sc-doc-chip__status {
  flex: 0 0 auto;
  font-weight: var(--sc-font-weight-bold);
}

/* Future approval badge (hidden until populated). */
.sc-doc-chip__badge {
  flex: 0 0 auto;
  font-size: 0.72rem;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(12, 10, 62, 0.08);
  color: rgba(12, 10, 62, 0.7);
}

.sc-doc-chip--positive {
  color: #2e7d32;
}

.sc-doc-chip--negative {
  color: #c0133d;
}

.sc-doc-chip--neutral {
  color: #6c757d;
}

/* ── styles/sc-document-drop-zone.css ── */
/* ScDocumentDropZone — Step 0 upload card with drag/drop, in-flight, success, and error states.
 *
 * Visual reference: Company Onboarding Step 0 in Figma (node 1078:11840). Empty
 * state is a dashed border + cloud icon; success swaps to a solid green border
 * with a filename and check puck. Tokens (colors, fonts, radii) come from
 * sc-tokens.
 */
.sc-drop-zone {
  --sc-drop-empty-border: rgba(12, 10, 62, 0.3);
  --sc-drop-empty-bg: #ffffff;
  --sc-drop-success-border: #10b981;
  --sc-drop-success-bg: #f0fdf4;
  --sc-drop-error-border: #c0133d;
  --sc-drop-error-bg: #fff5f7;
  --sc-drop-icon-bg: rgba(12, 10, 62, 0.1);
  /* Cloud is drawn at 0.6 opacity in Figma — use the muted navy directly so
     setting opacity on the puck doesn't also dim the background. */
  --sc-drop-icon-fg: rgba(12, 10, 62, 0.6);

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;

  /* 8px radius, 2px dashed border. Padding is symmetric so the title + hint sit
     vertically centered instead of hugging the bottom edge (issue #5937, item 5;
     supersedes the #4919 asymmetric 16/4 trim — min-height stays reduced so the
     card doesn't grow back). */
  padding: 12px 26px;
  border: 2px dashed var(--sc-drop-empty-border);
  border-radius: 8px;
  background: var(--sc-drop-empty-bg);
  min-height: 80px;

  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.sc-drop-zone:focus-visible {
  outline: 2px solid #0c0a3e;
  outline-offset: 2px;
}

.sc-drop-zone--dragover {
  border-style: solid;
  border-color: #0c0a3e;
  background: rgba(12, 10, 62, 0.04);
}

.sc-drop-zone--uploading {
  cursor: progress;
  border-style: solid;
  border-color: #0c0a3e;
}

.sc-drop-zone--success {
  border-style: solid;
  border-width: 2px;
  border-color: var(--sc-drop-success-border);
  background: var(--sc-drop-success-bg);
}

.sc-drop-zone--warning {
  border-style: solid;
  border-color: #d97706;
  background: #fffbeb;
}

.sc-drop-zone--error {
  border-color: var(--sc-drop-error-border);
  background: var(--sc-drop-error-bg);
}

.sc-drop-zone__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
}

.sc-drop-zone__title {
  font-family: var(--sc-font-family-body, 'Work Sans'), sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: #0c0a3e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sc-drop-zone__filename {
  font-family: var(--sc-font-family-body, 'Work Sans'), sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 21px;
  color: var(--sc-drop-success-border);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sc-drop-zone__filename--link {
  text-decoration: underline;
  cursor: pointer;
}

.sc-drop-zone__filename--link:hover {
  text-decoration: none;
}

.sc-drop-zone__hint {
  font-family: var(--sc-font-family-body, 'Work Sans'), sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 21px;
  color: rgba(12, 10, 62, 0.6);
}

.sc-drop-zone__hint--uploading {
  color: #0c0a3e;
}

.sc-drop-zone__hint--success {
  color: var(--sc-drop-success-border);
  font-weight: 500;
}

.sc-drop-zone__hint--warning {
  color: #b45309;
  font-weight: 500;
}

.sc-drop-zone__hint--error {
  color: var(--sc-drop-error-border);
  font-weight: 500;
}

/* --- Right-side icon puck (40px round, 20px inner icon — Figma 2782-17131) - */
.sc-drop-zone__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  background: var(--sc-drop-icon-bg);
  color: var(--sc-drop-icon-fg);
}

.sc-drop-zone__icon svg {
  width: 20px;
  height: 20px;
  display: block;
}

.sc-drop-zone__icon--success {
  background: var(--sc-drop-success-border);
  color: #ffffff;
}

.sc-drop-zone__icon--warning {
  background: #d97706;
  color: #ffffff;
  font-weight: 700;
}

.sc-drop-zone__icon--error {
  background: var(--sc-drop-error-border);
  color: #ffffff;
  font-weight: 700;
}

.sc-drop-zone__icon--uploading {
  background: transparent;
  border: 2px solid rgba(12, 10, 62, 0.2);
  border-top-color: #0c0a3e;
  animation: sc-drop-zone-spin 0.8s linear infinite;
}

@keyframes sc-drop-zone-spin {
  to { transform: rotate(360deg); }
}

/* Warning-state date picker — sits below the hint inside the drop-zone body. */
.sc-drop-zone__date-control {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  cursor: default;
}

.sc-drop-zone__date-label {
  font-family: var(--sc-font-family-body, 'Work Sans'), sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #92400e;
}

.sc-drop-zone__date-input {
  font-family: var(--sc-font-family-body, 'Work Sans'), sans-serif;
  font-size: 14px;
  padding: 4px 8px;
  border: 1px solid #d97706;
  border-radius: 4px;
  background: #ffffff;
  color: #0c0a3e;
  cursor: pointer;
}

.sc-drop-zone__date-input:focus {
  outline: 2px solid #d97706;
  outline-offset: -1px;
}

/* Delete control on the success state — lets a stored file be removed, not just
   replaced (issue #5293). Stops propagation so it doesn't reopen the picker. */
.sc-drop-zone__delete {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  padding: 2px 6px;
  border: 0;
  background: transparent;
  color: #c0133d;
  font-family: var(--sc-font-family-body, 'Work Sans'), sans-serif;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.15s ease;
}

.sc-drop-zone__delete:hover {
  background: rgba(192, 19, 61, 0.08);
}

.sc-drop-zone__delete-icon {
  display: inline-flex;
  width: 14px;
  height: 14px;
}

.sc-drop-zone__delete-icon svg {
  width: 100%;
  height: 100%;
}

/* ── styles/sc-document-row.css ── */
/* ScDocumentRow — document list table row */

:host {
  display: block;
  width: 100%;
}

/* ── Grid layout ────────────────────────────── */
.sc-document-row {
  display: grid;
  grid-template-columns:
    minmax(3.25rem, 0.45fr)
    minmax(12rem, 2.8fr)
    minmax(7rem, 1fr)
    minmax(7rem, 0.95fr)
    minmax(8rem, 1.15fr)
    minmax(7rem, auto);
  width: 100%;
  box-sizing: border-box;
}

/* ── Header ─────────────────────────────────── */
.sc-document-row--header {
  height: 43px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 10px 10px 0 0;
}

/* ── Body rows ──────────────────────────────── */
.sc-document-row--default,
.sc-document-row--hover,
.sc-document-row--clicked,
.sc-document-row--last {
  height: 52px;
  background: #ffffff;
  border-bottom: 1px solid #f3f4f6;
}

.sc-document-row--hover,
.sc-document-row--clicked {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.02) 100%),
    #ffffff;
}

.sc-document-row--last {
  border-radius: 0 0 10px 10px;
}

/* ── Cells (common) ─────────────────────────── */
.sc-document-row__cell {
  display: flex;
  align-items: center;
  min-width: 0;
  overflow: hidden;
}

/* ── Checkbox cell ──────────────────────────── */
.sc-document-row__cell--checkbox {
  justify-content: center;
  padding: var(--sc-space-xl);
  border-right: 1px solid #f3f4f6;
}

.sc-document-row--header .sc-document-row__cell--checkbox {
  border-right-color: #e5e7eb;
}

/* ── Checkbox widget ────────────────────────── */
.sc-document-row__checkbox-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  flex-shrink: 0;
}

.sc-document-row__checkbox-box {
  display: block;
  position: relative;
  width: 12px;
  height: 12px;
  border: 1px solid var(--sc-brand-blue);
  border-radius: 3px;
  background: #ffffff;
  flex-shrink: 0;
}

.sc-document-row__checkbox-box::after {
  content: '';
  position: absolute;
  inset: 25%;
  border: 1px solid var(--sc-brand-blue);
  border-radius: 1px;
  background: transparent;
  opacity: 0.2;
}

.sc-document-row__checkbox-box--checked::after {
  background: var(--sc-brand-blue);
  opacity: 1;
}

/* ── Column cells ───────────────────────────── */
.sc-document-row__cell--name {
  padding-left: var(--sc-space-xl);
}

.sc-document-row__cell--actions {
  justify-content: flex-end;
  gap: 10px;
  padding: 0 var(--sc-space-xl);
}

/* ── Header label text ──────────────────────── */
.sc-document-row__cell--label {
  font-family: var(--sc-font-family-body);
  font-size: var(--sc-font-size-caption);
  font-weight: var(--sc-font-weight-regular);
  line-height: 18px;
  color: #4a5565;
  white-space: nowrap;
}

/* ── Body text ──────────────────────────────── */
.sc-document-row__name {
  font-family: var(--sc-font-family-body);
  font-size: var(--sc-font-size-label);
  font-weight: var(--sc-font-weight-regular);
  line-height: 18px;
  color: var(--sc-brand-blue);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sc-document-row__date {
  font-family: var(--sc-font-family-body);
  font-size: var(--sc-font-size-label);
  font-weight: var(--sc-font-weight-regular);
  line-height: 18px;
  color: #6a7282;
  white-space: nowrap;
}

/* ── Action buttons ─────────────────────────── */
.sc-document-row__action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--sc-brand-blue);
  --sc-icon-color: var(--sc-brand-blue);
  flex-shrink: 0;
}

.sc-document-row__action-btn:hover {
  opacity: 0.7;
}

@media (max-width: 767px) {
  .sc-document-row {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }

  .sc-document-row--header {
    display: none;
  }

  .sc-document-row--default,
  .sc-document-row--hover,
  .sc-document-row--clicked,
  .sc-document-row--last {
    height: auto;
    gap: 12px;
    padding: 16px;
    border-radius: 10px;
  }

  .sc-document-row__cell {
    overflow: visible;
  }

  .sc-document-row__cell--checkbox,
  .sc-document-row__cell--name,
  .sc-document-row__cell--category,
  .sc-document-row__cell--date,
  .sc-document-row__cell--status,
  .sc-document-row__cell--actions {
    padding: 0;
    border-right: none;
  }

  .sc-document-row__cell--checkbox {
    justify-content: flex-start;
  }

  .sc-document-row__cell--name,
  .sc-document-row__cell--category,
  .sc-document-row__cell--date,
  .sc-document-row__cell--status,
  .sc-document-row__cell--actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .sc-document-row__cell--name::before,
  .sc-document-row__cell--category::before,
  .sc-document-row__cell--date::before,
  .sc-document-row__cell--status::before,
  .sc-document-row__cell--actions::before {
    display: block;
    flex-basis: 100%;
    font-family: var(--sc-font-family-body);
    font-size: 10px;
    font-weight: var(--sc-font-weight-medium);
    line-height: normal;
    text-transform: uppercase;
    color: #4a5565;
    opacity: 0.7;
  }

  .sc-document-row__cell--name::before {
    content: 'Document Name';
  }

  .sc-document-row__cell--category::before {
    content: 'Category';
  }

  .sc-document-row__cell--date::before {
    content: 'Date';
  }

  .sc-document-row__cell--status::before {
    content: 'Status';
  }

  .sc-document-row__cell--actions::before {
    content: 'Actions';
  }

  .sc-document-row__cell--actions {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
  }

  .sc-document-row__name {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .sc-document-row__date {
    white-space: normal;
  }
}

/* ── styles/sc-dropdown-menu.css ── */
:host {
  display: inline-flex;
  position: relative;
}

.sc-dropdown-menu {
  display: inline-flex;
  position: relative;
}

.sc-dropdown-menu__trigger {
  align-items: center;
  background: #0c0a3e;
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  height: 30px;
  justify-content: center;
  width: 30px;
}

:host([trigger-variant='ghost']) .sc-dropdown-menu__trigger {
  background: transparent;
  border-radius: 0;
  color: var(--sc-brand-blue);
  height: auto;
  width: auto;
}

.sc-dropdown-menu__content {
  background: #fff;
  border: 1px solid rgba(12, 10, 62, 0.08);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(12, 10, 62, 0.16);
  display: flex;
  flex-direction: column;
  margin-top: 12px;
  min-width: 136px;
  padding: 6px 0;
  position: absolute;
  top: 100%;
  z-index: 1080;
}

.sc-dropdown-menu__content--fixed {
  margin-top: 0;
  position: fixed;
}

.sc-dropdown-menu__content--start {
  left: 0;
}

.sc-dropdown-menu__content--end {
  right: 0;
}

.sc-dropdown-menu__content[hidden] {
  display: none;
}

::slotted(a),
::slotted(button) {
  align-items: center;
  background: transparent;
  border: 0;
  box-sizing: border-box;
  color: #0c0a3e;
  cursor: pointer;
  display: flex;
  font-family: 'Work Sans', sans-serif;
  font-size: 15px;
  font-weight: 500;
  gap: 8px;
  justify-content: flex-start;
  line-height: 20px;
  padding: 10px 12px;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  width: 100%;
}

::slotted(a:hover),
::slotted(button:hover) {
  background: rgba(12, 10, 62, 0.04);
  color: #0c0a3e;
}

::slotted(button[aria-checked='true']) {
  background: var(--sc-blue-alpha10, #0c0a3e1a);
  font-weight: var(--sc-font-weight-medium, 500);
}

slot[name='trigger']::slotted(*) {
  align-items: center;
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: inherit;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  height: 100%;
  justify-content: center;
  padding: 0;
  width: 100%;
}

slot[name='trigger']::slotted(*:hover),
slot[name='trigger']::slotted(*:focus-visible),
slot[name='trigger']::slotted(*[aria-expanded='true']) {
  background: transparent;
  box-shadow: none;
  color: inherit;
}

slot[name='trigger']::slotted(*:focus-visible) {
  outline: 2px solid #0c0a3e;
  outline-offset: 2px;
}

::slotted(button) {
  appearance: none;
}

/* ── styles/sc-form-check-group.css ── */
:host {
  display: block;
  font-family: var(--sc-font-family-body, 'Work Sans'), sans-serif;
  color: var(--sc-brand-blue, #0C0A3E);
}

.sc-form-check-group {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

/* Matches the label of sc-form-input, the field this one sits among. */
.sc-form-check-group__label {
  margin-bottom: var(--sc-space-sm, 8px);
  padding: 0;
  font-size: 13px;
  font-weight: var(--sc-font-weight-medium, 500);
  line-height: 18px;
  color: var(--sc-blue-muted, #374151);
}

.sc-form-check-group__label-required {
  margin-left: 2px;
  color: var(--sc-brand-red, #C0133D);
}

.sc-form-check-group__visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* As in Figma: the boxes sit indented under the label, one per 24px row (a 20px line and a 4px gap). */
.sc-form-check-group__options {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sc-space-xs, 4px);
  padding-left: var(--sc-space-xl, 20px);
}

/* An inline-block checkbox sits on a text line that adds a pixel under its label; as a flex box
   it is exactly its 20px line, which keeps the 24px rhythm. This rule outranks the checkbox's own
   `:host([hidden])`, so a hidden one is left out of it. */
::slotted(sc-form-check:not([hidden])) {
  display: flex;
}

.sc-form-check-group__help,
.sc-form-check-group__error {
  margin-top: var(--sc-space-xs, 4px);
  font-size: var(--sc-font-size-caption, 12px);
  line-height: 16px;
}

.sc-form-check-group__help {
  color: var(--sc-blue-muted, #374151);
}

.sc-form-check-group__error {
  color: var(--sc-brand-red, #C0133D);
}

/* ── styles/sc-form-check.css ── */
/* ScFormCheck — branded checkbox, radio, or switch with inline label.

   Drop-in replacement for ``<input type="checkbox" class="form-check-input">``
   + matching label markup in Flask templates. Form-associated; submits the
   ``value`` attribute (defaults to ``"on"``) when checked, nothing when not.

   - ``type="checkbox"`` (default): rounded square, checkmark when checked, a dash when indeterminate
   - ``type="radio"``: round, dot when checked (group via ``name``)
   - ``type="switch"``: pill toggle (still posts as a checkbox)
*/

:host {
  display: inline-block;
  font-family: var(--sc-font-family-body, 'Work Sans'), sans-serif;
  color: var(--sc-brand-blue, #0C0A3E);
}

:host([hidden]) {
  display: none;
}

.sc-form-check {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--sc-space-sm, 8px);
  min-width: 0;
  cursor: pointer;
  user-select: none;
}

.sc-form-check--disabled,
.sc-form-check--readonly {
  cursor: not-allowed;
}

.sc-form-check--disabled,
.sc-form-check--readonly .sc-form-check__indicator {
  opacity: 0.55;
}

/* Visually hide the native input but keep it accessible / form-bound. */
.sc-form-check__native {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  position: absolute;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}

/* ── Checkbox + radio share most of the indicator chrome ── */

.sc-form-check__indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  background: var(--sc-white-normal, #FFFFFF);
  border: 1px solid var(--sc-blue-alpha50, rgba(12, 10, 62, 0.5));
  border-radius: 4px;
  color: var(--sc-white-normal, #FFFFFF);
  transition: background 0.12s ease, border-color 0.12s ease;
}

.sc-form-check__indicator svg {
  width: 12px;
  height: 12px;
  visibility: hidden;
}

.sc-form-check__native:focus-visible + .sc-form-check__indicator {
  outline: 2px solid var(--sc-form-check-focus, var(--sc-brand-blue, #0C0A3E));
  outline-offset: 2px;
}

.sc-form-check__native:checked + .sc-form-check__indicator,
.sc-form-check--checkbox .sc-form-check__native:indeterminate + .sc-form-check__indicator {
  background: var(--sc-brand-blue, #0C0A3E);
  border-color: var(--sc-brand-blue, #0C0A3E);
}

/* Indeterminate (some of a group ticked) fills like checked and shows a dash instead of the tick.
   Scoped to checkboxes: :indeterminate also matches every radio of a group with none picked. */
.sc-form-check__native:checked + .sc-form-check__indicator svg,
.sc-form-check--checkbox .sc-form-check__native:indeterminate + .sc-form-check__indicator svg {
  visibility: visible;
}

/* ── Radio variant ── */

.sc-form-check--radio .sc-form-check__indicator {
  border-radius: 999px;
}

.sc-form-check--radio .sc-form-check__indicator svg {
  display: none;
}

.sc-form-check--radio .sc-form-check__native:checked + .sc-form-check__indicator {
  background: var(--sc-white-normal, #FFFFFF);
  border-color: var(--sc-brand-blue, #0C0A3E);
  box-shadow: inset 0 0 0 4px var(--sc-brand-blue, #0C0A3E);
}

/* ── Switch variant ── */

.sc-form-check--switch .sc-form-check__indicator {
  width: 32px;
  height: 18px;
  border-radius: 999px;
  background: var(--sc-form-check-switch-off, var(--sc-blue-alpha20, rgba(12, 10, 62, 0.2)));
  border-color: transparent;
  position: relative;
  margin-top: 1px;
}

.sc-form-check--switch .sc-form-check__indicator svg {
  display: none;
}

.sc-form-check--switch .sc-form-check__indicator::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  background: var(--sc-form-check-switch-thumb, var(--sc-white-normal, #FFFFFF));
  border-radius: 999px;
  transition: transform 0.15s ease, background 0.15s ease;
}

.sc-form-check--switch .sc-form-check__native:checked + .sc-form-check__indicator {
  background: var(--sc-form-check-switch-on, var(--sc-brand-blue, #0C0A3E));
}

.sc-form-check--switch .sc-form-check__native:checked + .sc-form-check__indicator::before {
  background: var(--sc-form-check-switch-thumb-on, var(--sc-form-check-switch-thumb, var(--sc-white-normal, #FFFFFF)));
  transform: translateX(14px);
}

/* ── Label + help ── */

.sc-form-check__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sc-form-check__label {
  font-size: var(--sc-font-size-label, 14px);
  font-weight: var(--sc-font-weight-medium, 500);
  line-height: 20px;
  color: var(--sc-form-check-label, var(--sc-brand-blue, #0C0A3E));
}

.sc-form-check__label-required {
  margin-left: 2px;
  color: var(--sc-brand-red, #C0133D);
}

.sc-form-check__help {
  font-size: var(--sc-font-size-caption, 12px);
  line-height: 16px;
  color: var(--sc-blue-muted, #374151);
}

.sc-form-check__error {
  font-size: var(--sc-font-size-caption, 12px);
  line-height: 16px;
  color: var(--sc-brand-red, #C0133D);
}

/* ── Light-DOM rule ──────────────────────────────────────────────────
   This file is also concatenated into ``dist/components.css`` (loaded
   globally by base.html), so this selector, which needs a light-DOM
   ``sc-form-check`` ancestor, reaches the links in slotted label content:
   underlined, in the label's colour, so they read as links. It has no
   effect inside the component's own Shadow root. */
sc-form-check [slot='label'] a {
  color: inherit;
  text-decoration: underline;
}

/* ── styles/sc-form-input.css ── */
/* ScFormInput — branded text-style input (text / number / email / date / search / password).

   Drop-in replacement for ``<input class="form-control" type="...">`` in
   Flask templates. Form-associated via ``ElementInternals``; Flask reads the
   posted value with ``request.form.get(name)`` / ``request.args.get(name)``.

   Visual language matches sc-form-select for consistent filter rows. */

:host {
  display: block;
  width: 100%;
  font-family: var(--sc-font-family-body, 'Work Sans'), sans-serif;
  color: var(--sc-brand-blue, #0C0A3E);
}

:host([hidden]) {
  display: none;
}

.sc-form-input {
  display: flex;
  flex-direction: column;
  gap: var(--sc-space-xs, 4px);
  min-width: 0;
}

.sc-form-input__label {
  font-size: 13px;
  font-weight: var(--sc-font-weight-medium, 500);
  line-height: 18px;
  color: var(--sc-blue-muted, #374151);
}

.sc-form-input__label-required {
  margin-left: 2px;
  color: var(--sc-brand-red, #C0133D);
}

.sc-form-input__control {
  position: relative;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  background: var(--sc-white-normal, #FFFFFF);
  border: 1px solid var(--sc-form-input-border-color, var(--sc-gray-normal, #e8e7ec));
  border-radius: var(--sc-form-input-border-radius, 10px);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.sc-form-input__control:hover:not(.sc-form-input__control--disabled) {
  border-color: var(--sc-blue-alpha30, #0C0A3E4D);
}

.sc-form-input__control:focus-within {
  border-color: var(--sc-brand-blue, #0C0A3E);
  box-shadow: 0 0 0 3px var(--sc-blue-alpha10, #0C0A3E1A);
}

.sc-form-input__control--invalid {
  border-color: var(--sc-brand-red, #C0133D);
}

.sc-form-input__control--invalid:focus-within {
  box-shadow: 0 0 0 3px var(--sc-red-alpha20, #C0133D33);
}

.sc-form-input__control--disabled {
  background: var(--sc-gray-light, #F9FAFC);
  color: var(--sc-gray-dark, #A1A5B1);
}

.sc-form-input__leading-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: var(--sc-form-input-leading-icon-left, var(--sc-space-md, 12px));
  pointer-events: none;
  color: var(--sc-blue-muted, #374151);
}

.sc-form-input__leading-icon svg {
  display: block;
  width: var(--sc-form-input-leading-icon-size, 16px);
  height: var(--sc-form-input-leading-icon-size, 16px);
}

.sc-form-input__native {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  min-width: 0;
  background: transparent;
  border: 0;
  color: inherit;
  font-family: inherit;
  font-size: var(--sc-font-size-label, 14px);
  font-weight: var(--sc-form-input-font-weight, inherit);
  line-height: 20px;
  padding: 8px var(--sc-space-md, 12px);
  outline: none;
}

.sc-form-input__native::placeholder {
  color: var(--sc-blue-alpha50, rgba(12, 10, 62, 0.5));
}

.sc-form-input__native:disabled {
  cursor: not-allowed;
}

.sc-form-input__control--has-leading-icon .sc-form-input__native {
  padding-left: 36px;
}

.sc-form-input--size-sm .sc-form-input__native {
  font-size: var(--sc-form-input-sm-font-size, 13px);
  line-height: var(--sc-form-input-sm-line-height, 18px);
  padding: var(--sc-form-input-sm-padding-block, 6px) var(--sc-form-input-sm-padding-inline, 10px);
}

.sc-form-input--size-sm .sc-form-input__control {
  border-radius: var(--sc-form-input-sm-border-radius, var(--sc-border-radius-md, 8px));
}

.sc-form-input--size-sm.sc-form-input--has-leading-icon .sc-form-input__native {
  padding-left: var(--sc-form-input-sm-leading-padding-left, 32px);
}

.sc-form-input--size-sm .sc-form-input__leading-icon {
  left: var(--sc-form-input-sm-leading-icon-left, 10px);
}

.sc-form-input__help {
  font-size: var(--sc-font-size-caption, 12px);
  line-height: 16px;
  color: var(--sc-blue-muted, #374151);
}

/* Warning palette shared with sc-callout; there is no warning token yet. */
.sc-form-input__help--warning {
  color: #92400E;
}

.sc-form-input__error {
  font-size: var(--sc-font-size-caption, 12px);
  line-height: 16px;
  color: var(--sc-brand-red, #C0133D);
}

/* ── styles/sc-form-password.css ── */
/* sc-form-password is sc-form-input's field (its styles are shared) with a show/hide toggle at the
   end of the control and live hints under it. */

.sc-form-password__toggle {
  position: relative;
  display: inline-flex;
  flex: none;
  align-self: stretch;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0 var(--sc-space-md, 12px);
  border: 0;
  border-radius: 0 var(--sc-form-input-border-radius, 10px) var(--sc-form-input-border-radius, 10px) 0;
  background: transparent;
  color: var(--sc-blue-muted, #374151);
  cursor: pointer;
}

.sc-form-password__toggle:hover:not(:disabled) {
  color: var(--sc-brand-blue, #0C0A3E);
}

.sc-form-password__toggle:focus-visible {
  outline: 2px solid var(--sc-brand-blue, #0C0A3E);
  outline-offset: -2px;
}

.sc-form-password__toggle:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* The icon set has no "eye off": a stroke across the eye says the password is showing. */
.sc-form-password__toggle[aria-pressed='true']::after {
  content: '';
  position: absolute;
  width: 22px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  transform: rotate(-35deg);
}

.sc-form-password__hint {
  font-size: var(--sc-font-size-caption, 12px);
  line-height: 16px;
}

/* A hint reads in the help text's colour, and in red once the user has typed and it is unmet. The
   brand green is too light for 12px text (4.2:1 on white), so a met hint stays neutral. */
.sc-form-password__hint--neutral {
  color: var(--sc-blue-muted, #374151);
}

.sc-form-password__hint--unmet {
  color: var(--sc-brand-red, #C0133D);
}

/* Edge draws its own reveal button inside a password input; the field has one already. */
.sc-form-input__native::-ms-reveal {
  display: none;
}

/* ── styles/sc-form-select.css ── */
/* ScFormSelect — branded single-select dropdown.

   Replaces ``<select class="form-select">`` in Flask templates. Renders a
   styled native ``<select>`` inside Shadow DOM (so options are mirrored from
   the JSON ``options`` attribute) and uses ElementInternals to participate
   in standard form submission. */

:host {
  display: block;
  width: 100%;
  font-family: var(--sc-font-family-body, 'Work Sans'), sans-serif;
  color: var(--sc-brand-blue, #0C0A3E);
}

:host([hidden]) {
  display: none;
}

:host([layout='inline']) {
  display: inline-block;
  max-width: 100%;
  width: auto;
}

.sc-form-select {
  display: flex;
  flex-direction: column;
  gap: var(--sc-space-xs, 4px);
  min-width: 0;
}

.sc-form-select__label {
  font-size: 13px;
  font-weight: var(--sc-font-weight-medium, 500);
  line-height: 18px;
  color: var(--sc-blue-muted, #374151);
}

.sc-form-select__label-required {
  margin-left: 2px;
  color: var(--sc-brand-red, #C0133D);
}

.sc-form-select__control {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  background: var(--sc-white-normal, #FFFFFF);
  border: 1px solid var(--sc-gray-normal, #E8E7EC);
  border-radius: 10px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.sc-form-select__control:hover:not(.sc-form-select__control--disabled) {
  border-color: var(--sc-blue-alpha30, #0C0A3E4D);
}

.sc-form-select__control:focus-within {
  border-color: var(--sc-brand-blue, #0C0A3E);
  box-shadow: 0 0 0 3px var(--sc-blue-alpha10, #0C0A3E1A);
}

.sc-form-select__control--invalid {
  border-color: var(--sc-brand-red, #C0133D);
}

.sc-form-select__control--invalid:focus-within {
  box-shadow: 0 0 0 3px var(--sc-red-alpha20, #C0133D33);
}

.sc-form-select__control--disabled {
  background: var(--sc-gray-light, #F9FAFC);
  color: var(--sc-gray-dark, #A1A5B1);
}

.sc-form-select__native {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  min-width: 0;
  background: transparent;
  border: 0;
  color: inherit;
  font-family: inherit;
  font-size: var(--sc-font-size-label, 14px);
  line-height: 20px;
  padding: 8px 36px 8px var(--sc-space-md, 12px);
  cursor: pointer;
}

.sc-form-select__native:focus {
  outline: none;
}

.sc-form-select__native:disabled {
  cursor: not-allowed;
}

.sc-form-select--size-sm .sc-form-select__native {
  font-size: 13px;
  line-height: 18px;
  padding: 6px 32px 6px 10px;
}

.sc-form-select--size-sm .sc-form-select__control {
  border-radius: var(--sc-border-radius-md, 8px);
}

.sc-form-select__chevron {
  position: absolute;
  right: var(--sc-space-md, 12px);
  pointer-events: none;
  display: inline-flex;
  color: var(--sc-blue-muted, #374151);
}

.sc-form-select--size-sm .sc-form-select__chevron {
  right: 10px;
}

.sc-form-select__chevron svg {
  width: 12px;
  height: 12px;
  display: block;
}

.sc-form-select__help {
  font-size: var(--sc-font-size-caption, 12px);
  line-height: 16px;
  color: var(--sc-blue-muted, #374151);
}

.sc-form-select__error {
  font-size: var(--sc-font-size-caption, 12px);
  line-height: 16px;
  color: var(--sc-brand-red, #C0133D);
}

/* Inline toolbar row — Figma 4569:25997. Marker + label, then a 25px menu. */
.sc-form-select--layout-inline {
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 15px;
  width: auto;
}

.sc-form-select--layout-inline .sc-form-select__label {
  align-items: center;
  color: #4a5565;
  display: inline-flex;
  font-size: 13px;
  font-weight: var(--sc-font-weight-regular, 400);
  gap: 8px;
  line-height: 19.5px;
}

.sc-form-select__marker {
  background: var(--sc-brand-blue, #0c0a3e);
  border-radius: 50%;
  flex: 0 0 auto;
  height: 10px;
  width: 10px;
}

.sc-form-select--layout-inline .sc-form-select__control {
  border-color: #d1d5dc;
  border-radius: var(--sc-border-radius-sm, 4px);
  box-sizing: border-box;
  flex: 0 1 auto;
  height: 25px;
  min-width: 84px;
  width: auto;
}

.sc-form-select--layout-inline .sc-form-select__native {
  font-size: var(--sc-font-size-caption, 12px);
  font-weight: var(--sc-font-weight-medium, 500);
  height: 23px;
  line-height: normal;
  padding: 0 26px 0 10px;
  width: auto;
}

.sc-form-select--layout-inline .sc-form-select__chevron {
  color: var(--sc-brand-blue, #0c0a3e);
  right: 6px;
}

.sc-form-select--layout-inline .sc-form-select__chevron svg {
  height: 15px;
  width: 20px;
}

.sc-form-select--layout-inline .sc-form-select__help,
.sc-form-select--layout-inline .sc-form-select__error {
  flex-basis: 100%;
}

/* ── styles/sc-form-textarea.css ── */
/* ScFormTextarea — branded multi-line text input.

   Drop-in replacement for ``<textarea class="form-control">`` in Flask
   templates. Form-associated via ``ElementInternals``; Flask reads the
   posted value with ``request.form.get(name)``.

   Visual language matches sc-form-input. */

:host {
  display: block;
  width: 100%;
  font-family: var(--sc-font-family-body, 'Work Sans'), sans-serif;
  color: var(--sc-brand-blue, #0C0A3E);
}

:host([hidden]) {
  display: none;
}

.sc-form-textarea {
  display: flex;
  flex-direction: column;
  gap: var(--sc-space-xs, 4px);
  min-width: 0;
}

.sc-form-textarea__label {
  font-size: 13px;
  font-weight: var(--sc-font-weight-medium, 500);
  line-height: 18px;
  color: var(--sc-blue-muted, #374151);
}

.sc-form-textarea__label-required {
  margin-left: 2px;
  color: var(--sc-brand-red, #C0133D);
}

.sc-form-textarea__control {
  box-sizing: border-box;
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  background: var(--sc-white-normal, #FFFFFF);
  border: 1px solid var(--sc-gray-normal, #E8E7EC);
  border-radius: 10px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.sc-form-textarea__control:hover:not(.sc-form-textarea__control--disabled) {
  border-color: var(--sc-blue-alpha30, #0C0A3E4D);
}

.sc-form-textarea__control:focus-within {
  border-color: var(--sc-brand-blue, #0C0A3E);
  box-shadow: 0 0 0 3px var(--sc-blue-alpha10, #0C0A3E1A);
}

.sc-form-textarea__control--invalid {
  border-color: var(--sc-brand-red, #C0133D);
}

.sc-form-textarea__control--invalid:focus-within {
  box-shadow: 0 0 0 3px var(--sc-red-alpha20, #C0133D33);
}

.sc-form-textarea__control--disabled {
  background: var(--sc-gray-light, #F9FAFC);
  color: var(--sc-gray-dark, #A1A5B1);
}

.sc-form-textarea__native {
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  display: block;
  width: 100%;
  min-width: 0;
  background: transparent;
  border: 0;
  color: inherit;
  font-family: inherit;
  font-size: var(--sc-font-size-label, 14px);
  line-height: 20px;
  padding: 10px var(--sc-space-md, 12px);
  outline: none;
  resize: vertical;
}

.sc-form-textarea__native::placeholder {
  color: var(--sc-blue-alpha50, rgba(12, 10, 62, 0.5));
}

.sc-form-textarea__native:disabled {
  cursor: not-allowed;
}

.sc-form-textarea__help {
  font-size: var(--sc-font-size-caption, 12px);
  line-height: 16px;
  color: var(--sc-blue-muted, #374151);
}

.sc-form-textarea__error {
  font-size: var(--sc-font-size-caption, 12px);
  line-height: 16px;
  color: var(--sc-brand-red, #C0133D);
}

/* ── styles/sc-guided-tour.css ── */
/* ScGuidedTour — spotlight panes, focus ring, and anchored popover. */

:host {
  display: none;
}

:host([open]) {
  display: block;
  inset: 0;
  pointer-events: none;
  position: fixed;
  z-index: 1100;
}

.sc-guided-tour__pane {
  background: var(--sc-blue-alpha50);
  pointer-events: auto;
  position: fixed;
  transition:
    top 160ms ease,
    right 160ms ease,
    bottom 160ms ease,
    left 160ms ease,
    width 160ms ease,
    height 160ms ease;
  z-index: 1100;
}

.sc-guided-tour__ring {
  border: var(--sc-border-width-medium) solid var(--sc-brand-blue);
  border-radius: var(--sc-border-radius-md);
  box-shadow: 0 0 0 2px var(--sc-white-normal);
  box-sizing: border-box;
  pointer-events: none;
  position: fixed;
  transition:
    top 160ms ease,
    left 160ms ease,
    width 160ms ease,
    height 160ms ease;
  z-index: 1101;
}

.sc-guided-tour__popover {
  background: var(--sc-white-normal);
  border: var(--sc-border-width-thin) solid var(--sc-gray-normal);
  border-radius: var(--sc-border-radius-lg);
  box-shadow: 0 16px 40px var(--sc-blue-alpha10);
  box-sizing: border-box;
  color: var(--sc-brand-blue);
  display: flex;
  flex-direction: column;
  font-family: var(--sc-font-family-body);
  gap: var(--sc-space-sm);
  max-height: calc(100vh - 16px);
  max-width: min(calc(100vw - 16px), 24rem);
  min-width: 0;
  overflow: auto;
  padding: var(--sc-space-lg);
  pointer-events: auto;
  position: fixed;
  transition:
    top 160ms ease,
    left 160ms ease;
  width: min(calc(100vw - 16px), 24rem);
  z-index: 1102;
}

.sc-guided-tour__popover:focus {
  outline: none;
}

.sc-guided-tour__popover:focus-visible {
  outline: var(--sc-border-width-medium) solid var(--sc-brand-blue);
  outline-offset: 2px;
}

.sc-guided-tour__title {
  font-size: var(--sc-font-size-body);
  font-weight: var(--sc-font-weight-semibold);
  line-height: 1.4;
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: normal;
}

.sc-guided-tour__step-count {
  color: var(--sc-blue-muted);
  font-size: var(--sc-font-size-caption);
  font-weight: var(--sc-font-weight-medium);
  margin: 0;
}

.sc-guided-tour__body {
  font-size: var(--sc-font-size-label);
  line-height: 1.5;
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: normal;
}

.sc-guided-tour__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sc-space-sm);
  justify-content: flex-end;
  margin-top: var(--sc-space-sm);
  min-width: 0;
}

.sc-guided-tour__nav {
  display: grid;
  gap: var(--sc-space-sm);
  grid-template-columns: auto auto;
  min-width: 0;
}

@media (max-width: 600px) {
  .sc-guided-tour__actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .sc-guided-tour__nav {
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }

  .sc-guided-tour__actions > sc-button[data-tour-action='skip'] {
    align-self: center;
  }
}

:host([data-reduced-motion]) .sc-guided-tour__pane,
:host([data-reduced-motion]) .sc-guided-tour__ring,
:host([data-reduced-motion]) .sc-guided-tour__popover {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .sc-guided-tour__pane,
  .sc-guided-tour__ring,
  .sc-guided-tour__popover {
    transition: none;
  }
}

/* ── styles/sc-header-nav-trigger.css ── */
:host {
  align-items: center;
  background: transparent;
  border-radius: var(--sc-border-radius-pill);
  box-sizing: border-box;
  color: var(--sc-brand-blue);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: var(--sc-font-size-body);
  font-weight: var(--sc-font-weight-medium);
  gap: var(--sc-space-xs);
  line-height: 24px;
  max-width: 100%;
  min-height: 32px;
  min-width: 0;
  padding: var(--sc-space-xs) var(--sc-space-lg);
}

:host([aria-expanded='true']) {
  background: var(--sc-brand-mint);
  font-weight: var(--sc-font-weight-semibold);
}

:host(:focus-visible) {
  outline: 2px solid var(--sc-brand-blue);
  outline-offset: 2px;
}

slot {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

/* date_nav_chevron points left; -90deg points down. */
.sc-header-nav-trigger__chevron {
  --sc-icon-size: 8px;

  flex: 0 0 auto;
  transform: rotate(-90deg);
}

::slotted(*) {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 600px) {
  :host {
    min-height: 44px;
    /* Tighter inset so "Company" and "Project" both fit the shared phone row. */
    padding-inline: var(--sc-space-sm);
  }
}

/* ── styles/sc-home-data-center.css ── */
/* ScHomeDataCenter — Home Page V2 Data Center (Figma 591:10852). */

:host {
  box-shadow: 0 0 4px rgb(0 0 0 / 0.25);
  border-radius: 10px;
  container-type: inline-size;
  display: block;
  min-width: 0;
  width: 100%;
}

.sc-home-data-center {
  background: rgb(255 255 255 / 0.8);
  border-radius: 10px;
  box-sizing: border-box;
  color: var(--sc-brand-blue, #0c0a3e);
  display: flex;
  flex-direction: column;
  font-family: var(--sc-font-family-body);
  gap: 10px;
  min-width: 0;
  padding: 10px;
  width: 100%;
}

.sc-home-data-center--loading {
  min-height: 254px;
}

.sc-home-data-center--error {
  align-items: center;
  justify-content: center;
  min-height: 254px;
  text-align: center;
}

.sc-home-data-center--error p {
  margin: 0;
}

.sc-home-data-center__skeleton-title,
.sc-home-data-center__skeleton-section {
  animation: sc-home-data-center-pulse 1.4s ease-in-out infinite;
  background: rgb(12 10 62 / 0.1);
  border-radius: 8px;
  display: block;
}

.sc-home-data-center__skeleton-title {
  height: 22px;
  width: 10rem;
}

.sc-home-data-center__skeleton-grid {
  display: grid;
  flex: 1 1 auto;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  min-height: 190px;
}

.sc-home-data-center__skeleton-section {
  min-height: 180px;
}

@keyframes sc-home-data-center-pulse {
  50% {
    opacity: 0.45;
  }
}

.sc-home-data-center__header {
  align-items: center;
  display: flex;
  flex-shrink: 0;
  min-width: 0;
}

.sc-home-data-center__title {
  align-items: center;
  display: flex;
  font-family: var(--sc-font-family-heading, var(--sc-font-family-body));
  font-size: 18px;
  font-weight: var(--sc-font-weight-medium, 500);
  gap: 6px;
  line-height: 1.2;
  margin: 0;
  min-width: 0;
  text-transform: uppercase;
}

.sc-home-data-center__title-emoji {
  flex: 0 0 auto;
  font-size: 18px;
  line-height: 1;
  text-transform: none;
}

.sc-home-data-center__title-text {
  min-width: 0;
  overflow-wrap: anywhere;
}

.sc-home-data-center__grid {
  align-items: stretch;
  display: grid;
  flex: 1 1 auto;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
}

.sc-home-data-center__section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  min-width: 0;
}

.sc-home-data-center__rankings-pair {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.sc-home-data-center__section--safety {
  position: relative;
}

.sc-home-data-center__section-heading {
  align-items: center;
  display: flex;
  gap: 8px;
  min-height: 30px;
  min-width: 0;
}

.sc-home-data-center__section--safety .sc-home-data-center__section-heading {
  padding-inline-end: 28px;
}

.sc-home-data-center__section-title {
  font-size: 14px;
  font-weight: var(--sc-font-weight-semibold, 600);
  line-height: 1.2;
  margin: 0;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

.sc-home-data-center__info {
  position: absolute;
  right: 8px;
  top: 8px;
  z-index: 1;
}

.sc-home-data-center__safety-body {
  background: rgb(222 243 239 / 0.5);
  border-radius: 10px;
  box-sizing: border-box;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  max-height: 220px;
  min-height: 166px;
  min-width: 0;
  overflow: hidden;
  padding: 10px;
  position: relative;
}

.sc-home-data-center__safety-body--placeholder {
  align-items: center;
  justify-content: center;
}

.sc-home-data-center__placeholder {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
  min-width: 0;
  padding: 8px;
  text-align: center;
}

.sc-home-data-center__placeholder-score {
  flex: 0 0 auto;
}

.sc-home-data-center__placeholder-text {
  font-size: 13px;
  line-height: 1.35;
  margin: 0;
  max-width: 16rem;
  opacity: 0.72;
  overflow-wrap: anywhere;
}

.sc-home-data-center__chart {
  --sc-insight-chart-canvas-height: 100%;
  --sc-insight-chart-canvas-margin-bottom: 0;
  display: block;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  width: 100%;
  z-index: 2;
}

.sc-home-data-center__timeframe {
  display: flex;
  left: 10px;
  max-width: calc(100% - 20px);
  pointer-events: none;
  position: absolute;
  top: 8px;
  z-index: 3;
}

.sc-home-data-center__score {
  background: var(--sc-brand-blue, #0c0a3e);
  border-radius: 2px;
  bottom: 10px;
  color: var(--sc-white-normal, #fff);
  font-size: 20px;
  font-weight: var(--sc-font-weight-bold, 700);
  line-height: 1;
  padding: 6px 8px;
  pointer-events: none;
  position: absolute;
  right: 10px;
  z-index: 1;
}

.sc-home-data-center__score--historical-hover {
  visibility: hidden;
}

.sc-home-data-center__metrics {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
  min-width: 0;
}

.sc-home-data-center__metric {
  align-items: center;
  background: linear-gradient(180deg, rgb(184 230 221 / 0.5), rgb(204 229 224 / 0.2));
  border-radius: 10px;
  box-sizing: border-box;
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 8px 12px;
  min-height: 64px;
  min-width: 0;
  padding: 10px 12px;
}

.sc-home-data-center__metric-value {
  flex: 0 0 auto;
  font-size: 24px;
  font-weight: var(--sc-font-weight-medium, 500);
  line-height: 1;
}

.sc-home-data-center__metric-label {
  display: flex;
  flex: 1 1 8rem;
  flex-direction: column;
  font-size: 14px;
  line-height: 1.15;
  min-width: 0;
  overflow-wrap: anywhere;
  text-transform: uppercase;
}

.sc-home-data-center__trend {
  border-radius: 999px;
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: var(--sc-font-weight-medium, 500);
  line-height: 1;
  margin-inline-start: auto;
  padding: 4px 8px;
}

.sc-home-data-center__trend--up {
  background: rgb(6 143 61 / 0.12);
  color: var(--sc-brand-green, #068f3d);
}

.sc-home-data-center__trend--down {
  background: rgb(12 10 62 / 0.08);
  color: var(--sc-brand-blue, #0c0a3e);
}

.sc-home-data-center__trend--flat {
  background: rgb(12 10 62 / 0.06);
  color: var(--sc-blue-muted, #4a5565);
}

.sc-home-data-center__rankings {
  border: 1px solid var(--sc-gray-form-border, #d1d5dc);
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  overflow: hidden;
  padding: 1px;
}

.sc-home-data-center__rank-row {
  align-items: center;
  background: transparent;
  box-sizing: border-box;
  display: flex;
  gap: 8px;
  min-height: 76px;
  min-width: 0;
  padding: 10px;
}

.sc-home-data-center__rank-link {
  align-items: center;
  color: inherit;
  display: flex;
  flex: 1 1 auto;
  gap: 8px;
  min-width: 0;
  text-decoration: none;
}

.sc-home-data-center__rank-row + .sc-home-data-center__rank-row {
  border-top: 1px solid var(--sc-gray-form-border, #d1d5dc);
}

.sc-home-data-center__rank-label {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.sc-home-data-center__rank-link:hover .sc-home-data-center__rank-label,
.sc-home-data-center__rank-link:focus-visible .sc-home-data-center__rank-label {
  text-decoration-thickness: 2px;
}

.sc-home-data-center__rank-link:focus-visible,
.sc-home-data-center__rank-score:focus-visible {
  border-radius: 2px;
  outline: 2px solid rgb(12 10 62 / 0.35);
  outline-offset: -2px;
}

.sc-home-data-center__medal {
  flex: 0 0 auto;
  font-size: 24px;
  line-height: 1;
  white-space: nowrap;
}

.sc-home-data-center__medal--numbered {
  align-items: center;
  display: inline-flex;
  gap: 4px;
}

.sc-home-data-center__rank-mark {
  line-height: 1;
}

.sc-home-data-center__rank-number {
  font-size: 16px;
  font-weight: var(--sc-font-weight-medium, 500);
  line-height: 1;
}

.sc-home-data-center__visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* One line, shared by both ranking columns. A wrapped name would stretch the
   subgrid row and the rest of the Data Center with it. */
.sc-home-data-center__rank-label {
  flex: 1 1 auto;
  font-size: 14px;
  line-height: 1.25;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sc-home-data-center__rank-score {
  color: inherit;
  flex: 0 0 56px;
  height: 56px;
  text-decoration: none;
  width: 56px;
}

.sc-home-data-center__rank-score sc-circular-progress {
  display: block;
  height: 56px;
  width: 56px;
}

.sc-home-data-center__empty-rankings {
  align-items: center;
  background: rgb(255 255 255 / 0.5);
  border-radius: 10px;
  box-sizing: border-box;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
  min-height: 166px;
  min-width: 0;
  padding: 16px 12px;
  text-align: center;
}

.sc-home-data-center__empty-ranks {
  display: flex;
  gap: 8px;
}

.sc-home-data-center__empty-ranks .sc-home-data-center__medal {
  opacity: 0.45;
}

.sc-home-data-center__empty {
  font-size: 13px;
  line-height: 1.35;
  margin: 0;
  max-width: 16rem;
  opacity: 0.72;
  overflow-wrap: anywhere;
}

@container (min-width: 640px) {
  .sc-home-data-center__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sc-home-data-center__rankings-pair {
    column-gap: 12px;
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto repeat(3, minmax(54px, auto));
    row-gap: 8px;
  }

  .sc-home-data-center__grid--best-only .sc-home-data-center__rankings-pair {
    grid-template-columns: minmax(0, 1fr);
  }

  .sc-home-data-center__section--ranking {
    display: grid;
    grid-row: 1 / span 4;
    grid-template-rows: subgrid;
    row-gap: 8px;
  }

  .sc-home-data-center__section--ranking .sc-home-data-center__section-heading {
    grid-row: 1;
  }

  .sc-home-data-center__section--ranking .sc-home-data-center__rankings {
    display: grid;
    grid-row: 2 / span 3;
    grid-template-rows: subgrid;
    row-gap: 0;
  }

  .sc-home-data-center__section--ranking .sc-home-data-center__empty-rankings {
    grid-row: 2 / span 3;
  }

  .sc-home-data-center__metrics {
    flex: 1 1 auto;
    max-height: 220px;
  }

  .sc-home-data-center__metric {
    flex: 1 1 0;
    min-height: 0;
  }
}

@container (min-width: 640px) and (max-width: 959px) {
  .sc-home-data-center__safety-body,
  .sc-home-data-center__metrics {
    max-height: 180px;
  }
}

@container (max-width: 959px) {
  .sc-home-data-center__skeleton-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container (max-width: 639px) {
  .sc-home-data-center__skeleton-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@container (min-width: 960px) {
  .sc-home-data-center__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .sc-home-data-center__rankings-pair {
    grid-column: span 2;
  }

  .sc-home-data-center__grid--best-only {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sc-home-data-center__grid--best-only .sc-home-data-center__rankings-pair {
    grid-column: span 1;
  }

  /* Ranking rows set the column height. The chart and insight cards fill it
     and must not feed their own height back into the row after a resize. */
  .sc-home-data-center__section:not(.sc-home-data-center__section--ranking) {
    height: 0;
    min-height: 100%;
    overflow: hidden;
  }

  .sc-home-data-center__safety-body,
  .sc-home-data-center__metrics {
    max-height: none;
  }

  .sc-home-data-center__metrics {
    flex: 1 1 auto;
  }

  .sc-home-data-center__metric {
    flex: 1 1 0;
  }
}

@container (max-width: 480px) {
  .sc-home-data-center {
    gap: 8px;
    padding: 8px;
  }

  .sc-home-data-center__title,
  .sc-home-data-center__title-emoji {
    font-size: 16px;
  }

  .sc-home-data-center__metric-value {
    font-size: 20px;
  }

  .sc-home-data-center__metric-label {
    font-size: 12px;
  }

  .sc-home-data-center__score {
    font-size: 16px;
  }
}

/* ── styles/sc-home-map-panel.css ── */
/* ScHomeMapPanel — Home Page V2 map chrome (legend, slot, on-site stats). */

:host {
  --sc-home-panel-shadow: 0 0 4px rgb(0 0 0 / 0.25);
  --sc-home-panel-radius: 10px;
  --sc-home-panel-bg: rgb(255 255 255 / 0.8);
  --sc-home-panel-padding: 10px;
  --sc-home-map-min-height: 320px;

  box-shadow: var(--sc-home-panel-shadow);
  border-radius: var(--sc-home-panel-radius);
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  width: 100%;
}

:host([embedded]) {
  --sc-home-panel-bg: transparent;
  --sc-home-panel-radius: 0;
  --sc-home-panel-shadow: none;

  box-shadow: none;
  border-radius: 0;
}

:host([embedded]) .sc-home-map-panel {
  gap: 0;
  padding: 9px;
  position: relative;
}

:host([embedded]) .sc-home-map-panel__title {
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

:host([embedded]) .sc-home-map-panel__legend {
  inset-block-start: 19px;
  inset-inline: 19px;
  pointer-events: none;
  position: absolute;
  z-index: 2;
}

:host([embedded]) .sc-home-map-panel__legend-list {
  background: transparent;
  padding: 0;
}

:host([embedded]) .sc-home-map-panel__map,
:host([embedded]) .sc-home-map-panel__map ::slotted(*) {
  border-radius: 10px;
  min-height: 0;
}

:host([embedded]) .sc-home-map-panel__stats {
  inset-block-end: 19px;
  inset-inline-start: 19px;
  pointer-events: none;
  position: absolute;
  z-index: 2;
}

.sc-home-map-panel {
  background: var(--sc-home-panel-bg);
  border-radius: var(--sc-home-panel-radius);
  box-sizing: border-box;
  color: var(--sc-brand-blue, #0c0a3e);
  container-type: inline-size;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  font-family: var(--sc-font-family-body);
  gap: 10px;
  min-height: 0;
  min-width: 0;
  padding: var(--sc-home-panel-padding);
  width: 100%;
}

.sc-home-map-panel--status {
  align-items: center;
  gap: 12px;
  justify-content: center;
  text-align: center;
}

.sc-home-map-panel__skeleton {
  animation: sc-home-map-pulse 1.4s ease-in-out infinite;
  background: rgb(12 10 62 / 0.1);
  border-radius: 10px;
  display: block;
  height: 70%;
  width: 80%;
}

@keyframes sc-home-map-pulse {
  50% {
    opacity: 0.45;
  }
}

.sc-home-map-panel__legend {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.sc-home-map-panel__title {
  font-family: var(--sc-font-family-heading, var(--sc-font-family-body));
  font-size: 18px;
  font-weight: var(--sc-font-weight-medium, 500);
  line-height: 1.2;
  margin: 0;
  overflow-wrap: anywhere;
  text-transform: uppercase;
}

.sc-home-map-panel__legend-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sc-space-xs, 4px);
  list-style: none;
  margin: 0;
  min-width: 0;
  padding: 0;
}

.sc-home-map-panel__legend-item {
  min-width: 0;
}

.sc-home-map-panel__legend-button {
  align-items: center;
  appearance: none;
  backdrop-filter: blur(5px);
  background: rgb(255 255 255 / 0.55);
  border: 1px solid transparent;
  border-radius: 5px;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  gap: var(--sc-space-xs, 4px);
  min-height: 28px;
  min-width: 0;
  padding: 6px 10px;
  pointer-events: auto;
}

.sc-home-map-panel__legend-button[aria-pressed='false'] {
  background: rgb(255 255 255 / 0.35);
  opacity: 0.55;
}

.sc-home-map-panel__legend-button:hover {
  background: rgb(255 255 255 / 0.75);
}

.sc-home-map-panel__legend-button:focus-visible {
  border-color: var(--sc-brand-blue, #0c0a3e);
  outline: 2px solid var(--sc-white-normal, #ffffff);
  outline-offset: 1px;
}

/* Same chip as a legend button, so the checkbox reads as one more map filter. The swatch keys
   the grey archived marker, which no longer has a legend pill of its own. */
.sc-home-map-panel__archived-toggle {
  --sc-font-size-label: var(--sc-font-size-caption, 12px);

  align-items: center;
  backdrop-filter: blur(5px);
  background: rgb(255 255 255 / 0.55);
  border-radius: 5px;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-flex;
  gap: var(--sc-space-xs, 4px);
  min-height: 28px;
  padding: var(--sc-space-xs, 4px) 10px;
  pointer-events: auto;
}

.sc-home-map-panel__archived-toggle:hover {
  background: rgb(255 255 255 / 0.75);
}

.sc-home-map-panel__swatch {
  background: var(--sc-gray-normal, #e8e7ec);
  border-radius: 50%;
  flex: 0 0 auto;
  height: 12px;
  width: 12px;
}

.sc-home-map-panel__swatch--tier75 {
  background: #97da84;
}

.sc-home-map-panel__swatch--tier60 {
  background: #f1d93f;
}

.sc-home-map-panel__swatch--tier0 {
  background: #dc3545;
}

.sc-home-map-panel__swatch--no_score,
.sc-home-map-panel__swatch--archived {
  background: var(--sc-white-normal, #ffffff);
  box-shadow: inset 0 0 0 1px var(--sc-gray-normal, #e8e7ec);
}

.sc-home-map-panel__trophy {
  flex: 0 0 auto;
  font-size: 12px;
  line-height: 1;
}

.sc-home-map-panel__legend-label {
  font-size: 12px;
  font-weight: var(--sc-font-weight-medium, 500);
  line-height: 1;
  overflow-wrap: anywhere;
}

.sc-home-map-panel__map {
  border-radius: 10px;
  flex: 1 1 auto;
  min-height: var(--sc-home-map-min-height, 320px);
  min-width: 0;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.sc-home-map-panel__edge {
  pointer-events: none;
  position: absolute;
  inset-inline: 0;
  z-index: 1;
}

.sc-home-map-panel__edge--top {
  background: linear-gradient(to bottom, rgb(12 10 62 / 0.45), transparent);
  border-start-end-radius: 10px;
  border-start-start-radius: 10px;
  height: 56px;
  inset-block-start: 0;
}

.sc-home-map-panel__edge--bottom {
  /* Leave the Google attribution / control strip uncovered. */
  background: linear-gradient(to top, rgb(12 10 62 / 0.35), transparent);
  height: 40px;
  inset-block-end: 28px;
}

.sc-home-map-panel__map ::slotted(*) {
  display: block;
  height: 100%;
  min-height: var(--sc-home-map-min-height, 320px);
  width: 100%;
}

/* With no map to float over, the embedded legend joins the flow so it cannot cover the message. */
:host([embedded]) .sc-home-map-panel--empty {
  gap: 10px;
}

:host([embedded]) .sc-home-map-panel--empty .sc-home-map-panel__legend {
  position: static;
}

.sc-home-map-panel__empty {
  font-size: 13px;
  line-height: 1.3;
  margin: 0;
  opacity: 0.7;
  overflow-wrap: anywhere;
}

.sc-home-map-panel__stats {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}

.sc-home-map-panel__stat {
  align-items: center;
  backdrop-filter: blur(5px);
  background: rgb(255 255 255 / 0.55);
  border-radius: 5px;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 4px;
  min-width: 0;
  padding: 7px;
}

.sc-home-map-panel__stat sc-icons {
  --sc-icon-size: 15px;
}

.sc-home-map-panel__stat-label {
  font-size: 12px;
  font-weight: var(--sc-font-weight-medium, 500);
  line-height: 1;
  overflow-wrap: anywhere;
}

.sc-home-map-panel__stat-count {
  background: var(--sc-brand-blue, #0c0a3e);
  border-radius: 2px;
  color: var(--sc-white-normal, #ffffff);
  font-size: 12px;
  font-weight: var(--sc-font-weight-medium, 500);
  line-height: 1;
  padding-inline: 2px;
}

@container (max-width: 599px) {
  .sc-home-map-panel {
    gap: 8px;
    padding: 8px;
  }

  .sc-home-map-panel__title {
    font-size: 16px;
  }

  .sc-home-map-panel__map,
  .sc-home-map-panel__map ::slotted(*) {
    min-height: min(var(--sc-home-map-min-height, 320px), 240px);
  }
}

/* ── styles/sc-home-project-row.css ── */
/* ScHomeProjectRow — Home Page V2 expandable project row (Figma 643:10345 / 643:10349). */

:host {
  display: block;
  min-width: 0;
  width: 100%;
}

.sc-home-project-row {
  background: rgb(255 255 255 / 0.8);
  border-block-end: 1px solid var(--sc-gray-normal, #e8e7ec);
  box-sizing: border-box;
  color: var(--sc-brand-blue, #0c0a3e);
  container-type: inline-size;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  font-family: var(--sc-font-family-body);
  gap: 8px;
  min-width: 0;
  padding: 10px;
  position: relative;
  width: 100%;
}

.sc-home-project-row:has(.sc-home-project-row__toggle:focus-visible) {
  outline: 2px solid rgb(12 10 62 / 0.35);
  outline-offset: -2px;
}

.sc-home-project-row--activation {
  cursor: default;
}

.sc-home-project-row__header {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) auto;
  min-width: 0;
}

.sc-home-project-row__toggle {
  appearance: none;
  background: transparent;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.sc-home-project-row__identity {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.sc-home-project-row__title {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}

.sc-home-project-row__name {
  color: inherit;
  font-size: var(--sc-font-size-body, 16px);
  font-weight: var(--sc-font-weight-regular, 400);
  line-height: 1.2;
  overflow-wrap: anywhere;
  text-decoration: none;
}

.sc-home-project-row__name:hover,
.sc-home-project-row__name:focus-visible {
  text-decoration: underline;
}

.sc-home-project-row__name:focus-visible {
  border-radius: 4px;
  outline: 2px solid rgb(12 10 62 / 0.35);
  outline-offset: 2px;
}

.sc-home-project-row__status::part(badge) {
  border-radius: 3px;
  font-size: 8px;
  min-height: 12px;
  min-width: 0;
  padding: 1px 5px;
}

.sc-home-project-row__address {
  color: rgb(10 10 10 / 0.5);
  font-size: var(--sc-font-size-caption, 12px);
  font-style: italic;
  line-height: 1.15;
  margin: 0;
  overflow-wrap: anywhere;
}

.sc-home-project-row__trailing {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  gap: 9px;
  min-width: 0;
}

.sc-home-project-row__activation {
  display: block;
  margin: 0;
}

.sc-home-project-row__compact-alerts {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sc-home-project-row__compact-alert {
  align-items: center;
  display: inline-flex;
  gap: 4px;
}

a.sc-home-project-row__compact-alert,
a.sc-home-project-row__alert {
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  padding: 0;
  text-decoration: none;
}

a.sc-home-project-row__compact-alert:focus-visible,
a.sc-home-project-row__alert:focus-visible {
  outline: 2px solid rgb(12 10 62 / 0.35);
  outline-offset: 2px;
}

.sc-home-project-row__alert-emoji {
  flex: 0 0 auto;
  font-size: 10px;
  line-height: 1;
}

.sc-home-project-row__metrics {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  gap: 5px;
  min-width: 0;
}

.sc-home-project-row__chip {
  align-items: center;
  background: rgb(12 10 62 / 0.1);
  border-radius: 5px;
  color: inherit;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 2px;
  padding: 4px;
  text-decoration: none;
}

a.sc-home-project-row__chip:focus-visible {
  outline: 2px solid rgb(12 10 62 / 0.35);
  outline-offset: 2px;
}

.sc-home-project-row__chip sc-icons {
  --sc-icon-size: 15px;
}

.sc-home-project-row__chip-count {
  background: var(--sc-brand-blue, #0c0a3e);
  border-radius: 2px;
  color: var(--sc-white-normal, #ffffff);
  font-size: 12px;
  font-weight: var(--sc-font-weight-medium, 500);
  line-height: 1;
  padding-inline: 2px;
}

.sc-home-project-row__score {
  color: inherit;
  flex: 0 0 auto;
  height: 36px;
  overflow: hidden;
  text-decoration: none;
  width: 36px;
}

.sc-home-project-row__score:focus-visible {
  outline: 2px solid rgb(12 10 62 / 0.35);
  outline-offset: 2px;
}

.sc-home-project-row__score sc-circular-progress {
  display: block;
  height: 56px;
  transform: scale(0.643);
  transform-origin: top left;
  width: 56px;
}

.sc-home-project-row__details {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.sc-home-project-row__details[hidden] {
  display: none;
}

.sc-home-project-row__alerts {
  align-items: center;
  border-block-end: 1px solid rgb(12 10 62 / 0.05);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  min-width: 0;
  padding-block-end: 10px;
}

.sc-home-project-row__alert {
  align-items: center;
  display: inline-flex;
  gap: 4px;
  min-width: 0;
}

.sc-home-project-row__alert-label {
  color: rgb(10 10 10 / 0.5);
  font-size: var(--sc-font-size-caption, 12px);
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.sc-home-project-row__alert-count {
  align-items: center;
  background: #cb2020;
  border-radius: 8px;
  color: var(--sc-white-normal, #ffffff);
  display: inline-flex;
  font-size: 9px;
  font-weight: var(--sc-font-weight-medium, 500);
  justify-content: center;
  line-height: 1;
  min-height: 14.5px;
  min-width: 17px;
  padding: 2px 4px;
}

.sc-home-project-row__details-list {
  display: grid;
  gap: 4px 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  min-width: 0;
}

.sc-home-project-row__detail {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  min-width: 0;
}

.sc-home-project-row__detail dt {
  color: rgb(10 10 10 / 0.5);
  font-size: var(--sc-font-size-caption, 12px);
  font-weight: var(--sc-font-weight-regular, 400);
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.sc-home-project-row__detail dd {
  color: var(--sc-brand-blue, #0c0a3e);
  font-size: var(--sc-font-size-caption, 12px);
  font-weight: var(--sc-font-weight-medium, 500);
  line-height: 1.2;
  margin: 0;
  overflow-wrap: anywhere;
}

/* Phone only: keep identity + score/chips from fighting for one cramped line. */
@container (max-width: 419px) {
  .sc-home-project-row__header {
    align-items: flex-start;
    grid-template-columns: minmax(0, 1fr);
  }

  .sc-home-project-row__trailing {
    flex-wrap: wrap;
    grid-column: 1 / -1;
    justify-content: space-between;
    width: 100%;
  }

  .sc-home-project-row__metrics {
    flex-wrap: wrap;
  }

  .sc-home-project-row__details-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── styles/sc-home-projects-panel.css ── */
/* ScHomeProjectsPanel — Home Page V2 projects list with search, filter, and sort. */

:host {
  --sc-home-panel-shadow: 0 0 4px rgb(0 0 0 / 0.25);
  --sc-home-panel-radius: 10px;
  --sc-home-panel-bg: rgb(255 255 255 / 0.8);
  --sc-home-panel-padding: 10px;

  box-shadow: var(--sc-home-panel-shadow);
  border-radius: var(--sc-home-panel-radius);
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  width: 100%;
}

:host([embedded]) {
  --sc-home-panel-bg: transparent;
  --sc-home-panel-radius: 0;
  --sc-home-panel-shadow: none;

  box-shadow: none;
  border-radius: 0;
}

:host([embedded]) .sc-home-projects-panel__rows {
  border: 0;
  border-radius: 0;
}

.sc-home-projects-panel {
  background: var(--sc-home-panel-bg);
  border-radius: var(--sc-home-panel-radius);
  box-sizing: border-box;
  color: var(--sc-brand-blue, #0c0a3e);
  container-type: inline-size;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  font-family: var(--sc-font-family-body);
  gap: 14px;
  min-height: 0;
  min-width: 0;
  padding: var(--sc-home-panel-padding);
  width: 100%;
}

.sc-home-projects-panel__header {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.sc-home-projects-panel__title {
  align-items: center;
  display: flex;
  font-family: var(--sc-font-family-heading, var(--sc-font-family-body));
  font-size: 18px;
  font-weight: var(--sc-font-weight-medium, 500);
  gap: 6px;
  line-height: 1.2;
  margin: 0;
  min-width: 0;
  text-transform: uppercase;
}

.sc-home-projects-panel__title-emoji {
  flex: 0 0 auto;
  font-size: 18px;
  line-height: 1;
  text-transform: none;
}

.sc-home-projects-panel__title-text {
  min-width: 0;
  overflow-wrap: anywhere;
}

.sc-home-projects-panel__title-count {
  display: inline-flex;
  flex: 0 0 auto;
  text-transform: none;
}

.sc-home-projects-panel__title-count::part(badge) {
  background: var(--sc-brand-mint, #def3ef);
  border-radius: var(--sc-border-radius-pill, 999px);
  color: var(--sc-brand-blue, #0c0a3e);
  min-height: 22px;
  min-width: 0;
  padding: 4px 8px;
}

.sc-home-projects-panel__toolbar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}

.sc-home-projects-panel__search {
  --sc-form-input-border-color: var(--sc-gray-form-border, #d1d5dc);
  --sc-form-input-font-weight: var(--sc-font-weight-medium, 500);
  --sc-form-input-leading-icon-size: 15px;
  --sc-form-input-sm-border-radius: 6px;
  --sc-form-input-sm-font-size: 12px;
  --sc-form-input-sm-leading-padding-left: 30px;
  --sc-form-input-sm-line-height: 16px;
  --sc-form-input-sm-padding-block: 4px;
  --sc-form-input-sm-padding-inline: 10px;

  flex: 1 1 12rem;
  min-width: 0;
}

.sc-home-projects-panel__filter,
.sc-home-projects-panel__sort {
  flex: 0 0 auto;
}

.sc-home-projects-panel__filter sc-button::part(button),
.sc-home-projects-panel__sort sc-button::part(button) {
  border-color: var(--sc-gray-form-border, #d1d5dc);
  border-radius: 4px;
  font-size: 12px;
  font-weight: var(--sc-font-weight-medium, 500);
  height: 26px;
  line-height: 1;
  min-height: 26px;
  padding: 4px 10px;
}

.sc-home-projects-panel__sort-separator {
  border-top: 1px solid var(--sc-blue-alpha10, #0c0a3e1a);
  height: 0;
  margin: 4px 0 0;
  width: 100%;
}

.sc-home-projects-panel__sort-direction {
  box-sizing: border-box;
  min-width: 220px;
  padding: var(--sc-space-sm, 8px) var(--sc-space-sm, 8px) var(--sc-space-xs, 4px);
}

.sc-home-projects-panel__sort-direction-label {
  color: var(--sc-blue-muted, #374151);
  display: block;
  font-size: var(--sc-font-size-caption, 12px);
  font-weight: var(--sc-font-weight-medium, 500);
  letter-spacing: 0.04em;
  line-height: 14px;
  margin-bottom: var(--sc-space-xs, 4px);
  text-align: left;
  text-transform: uppercase;
}

.sc-home-projects-panel__sort-direction-options {
  background: var(--sc-gray-light, #f9fafc);
  border: 1px solid var(--sc-gray-normal, #e8e7ec);
  border-radius: var(--sc-border-radius-md, 8px);
  display: grid;
  gap: var(--sc-space-xs, 4px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: var(--sc-space-xs, 4px);
}

.sc-home-projects-panel__sort-direction-option {
  align-items: center;
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: var(--sc-border-radius-sm, 4px);
  color: var(--sc-brand-blue, #0c0a3e);
  cursor: pointer;
  display: flex;
  font-family: var(--sc-font-family-body, 'Work Sans', sans-serif);
  font-size: 12px;
  font-weight: var(--sc-font-weight-medium, 500);
  gap: 4px;
  justify-content: center;
  line-height: 16px;
  min-height: 30px;
  min-width: 0;
  overflow-wrap: anywhere;
  padding: var(--sc-space-xs, 4px) var(--sc-space-sm, 8px);
  white-space: normal;
}

.sc-home-projects-panel__sort-direction-option:hover {
  background: var(--sc-blue-alpha05, #0c0a3e0d);
}

.sc-home-projects-panel__sort-direction-option:focus-visible {
  outline: 2px solid var(--sc-brand-blue, #0c0a3e);
  outline-offset: 1px;
}

.sc-home-projects-panel__sort-direction-option[aria-checked='true'] {
  background: var(--sc-brand-mint, #def3ef);
  box-shadow: 0 1px 3px var(--sc-blue-alpha10, #0c0a3e1a);
}

.sc-home-projects-panel__sort-direction-icon {
  font-size: 14px;
  line-height: 1;
}

.sc-home-projects-panel__rows {
  border: 1px solid var(--sc-gray-normal, #e8e7ec);
  border-radius: 5px;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: scroll;
  position: relative;
  /* Keep the scrollbar permanently visible, not only while scrolling.
     Do not set scrollbar-width or scrollbar-color: those force Chromium's
     thin overlay scrollbar and disable the always-on rules below. */
  scrollbar-gutter: stable;
}

.sc-home-projects-panel__rows::-webkit-scrollbar {
  width: 10px;
}

.sc-home-projects-panel__rows::-webkit-scrollbar-track {
  background: transparent;
}

.sc-home-projects-panel__rows::-webkit-scrollbar-thumb {
  background: rgb(12 10 62 / 0.28);
  background-clip: padding-box;
  border: 3px solid transparent;
  border-radius: 999px;
}

.sc-home-projects-panel__rows::-webkit-scrollbar-thumb:hover {
  background: rgb(12 10 62 / 0.45);
  background-clip: padding-box;
}

.sc-home-projects-panel__virtual-space {
  min-height: 100%;
  position: relative;
  width: 100%;
}

.sc-home-projects-panel__virtual-row {
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.sc-home-projects-panel--status {
  align-items: center;
  justify-content: center;
  text-align: center;
}

.sc-home-projects-panel__skeleton-block {
  animation: sc-home-projects-panel-pulse 1.4s ease-in-out infinite;
  background: rgb(12 10 62 / 0.1);
  border-radius: 6px;
  display: block;
}

.sc-home-projects-panel__skeleton-header {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sc-home-projects-panel__skeleton-title {
  height: 22px;
  width: 8rem;
}

.sc-home-projects-panel__skeleton-toolbar {
  display: flex;
  gap: 8px;
}

.sc-home-projects-panel__skeleton-search {
  flex: 1 1 auto;
  height: 32px;
}

.sc-home-projects-panel__skeleton-action {
  flex: 0 0 76px;
  height: 32px;
}

.sc-home-projects-panel__skeleton-rows {
  border: 1px solid var(--sc-gray-normal, #e8e7ec);
  border-radius: 5px;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.sc-home-projects-panel__skeleton-row {
  align-items: center;
  display: flex;
  flex: 1 1 0;
  gap: 12px;
  min-height: 68px;
  padding: 10px;
}

.sc-home-projects-panel__skeleton-row + .sc-home-projects-panel__skeleton-row {
  border-top: 1px solid var(--sc-gray-normal, #e8e7ec);
}

.sc-home-projects-panel__skeleton-score {
  border-radius: 50%;
  flex: 0 0 42px;
  height: 42px;
}

.sc-home-projects-panel__skeleton-content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.sc-home-projects-panel__skeleton-name {
  height: 13px;
  width: min(48%, 12rem);
}

.sc-home-projects-panel__skeleton-address {
  height: 10px;
  width: min(68%, 18rem);
}

.sc-home-projects-panel__skeleton-metrics {
  display: flex;
  gap: 6px;
}

.sc-home-projects-panel__skeleton-metric {
  height: 14px;
  width: 54px;
}

@keyframes sc-home-projects-panel-pulse {
  50% {
    opacity: 0.45;
  }
}

.sc-home-projects-panel__empty {
  font-size: 13px;
  line-height: 1.3;
  margin: 0;
  opacity: 0.7;
  overflow-wrap: anywhere;
}

@container (max-width: 599px) {
  .sc-home-projects-panel {
    gap: 10px;
    padding: 8px;
  }

  .sc-home-projects-panel__header {
    gap: 10px;
  }

  .sc-home-projects-panel__title,
  .sc-home-projects-panel__title-emoji {
    font-size: 16px;
  }

  .sc-home-projects-panel__skeleton-toolbar {
    flex-wrap: wrap;
  }
}

@container (max-width: 419px) {
  .sc-home-projects-panel__search,
  .sc-home-projects-panel__skeleton-search {
    flex-basis: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sc-home-projects-panel__skeleton-block {
    animation: none;
  }
}

/* ── styles/sc-icons.css ── */
/* ScIcons — configurable icon glyph container (default 18×18). */
:host {
  align-items: center;
  display: inline-flex;
  height: var(--sc-icon-size, 18px);
  justify-content: center;
  vertical-align: middle;
  width: var(--sc-icon-size, 18px);
}

.sc-icons {
  align-items: center;
  color: var(--sc-icon-color, currentColor);
  display: grid;
  height: 100%;
  justify-items: center;
  min-height: 0;
  min-width: 0;
  place-items: center;
  width: 100%;
}

.sc-icons svg {
  /* Fill the host sized by --sc-icon-size; preserveAspectRatio keeps aspect. */
  display: block;
  height: 100%;
  width: 100%;
}

/* The exported copy glyph is the inner 8 × 11 px group of a 20 × 15 px icon. */
.sc-icons[data-name='copy'] svg {
  width: 8px;
  height: 11px;
}

.sc-icons[data-name='lock'] svg { width: 10px; height: 10px; }

/* ── styles/sc-info-card.css ── */
/* ScInfoCard — stat info card with optional report dates */

:host {
  display: block;
}

.sc-info-card {
  box-sizing: border-box;
  /* Gradient uses Figma-specified mint shades; no exact token equivalents */
  background: linear-gradient(
    to bottom,
    rgba(184, 230, 221, 0.5) 0%,
    rgba(204, 229, 224, 0.2) 100%
  );
  border-radius: 17px;
  color: var(--sc-brand-blue);
  font-family: var(--sc-font-family-body);
  padding: 10px;
}

/* ── Single variant ─────────────────────────────── */

.sc-info-card--single {
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: flex-start;
  justify-content: center;
  width: 211px;
}

/* ── Triple variant ─────────────────────────────── */

.sc-info-card--triple {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}

/* ── Dates section (triple — left column) ────────── */

.sc-info-card__dates {
  display: flex;
  gap: 80px;
  align-items: flex-start;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Stat wrapper (triple — right column) ─────────── */

.sc-info-card__stat {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex-shrink: 0;
  width: 191px;
}

/* ── Stat header row (icon-box + info-icon) ─────── */

.sc-info-card__stat-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-shrink: 0;
  width: 100%;
}

/* ── Emoji icon box ─────────────────────────────── */

.sc-info-card__icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  /* #eefcfa — very light mint, slightly lighter than --sc-brand-mint */
  background-color: #eefcfa;
  border-radius: 7px;
  padding: 3.5px;
  box-sizing: border-box;
  flex-shrink: 0;
}

.sc-info-card__icon {
  font-size: 28px;
  line-height: 1;
}

/* ── Count row (number + label) ─────────────────── */

.sc-info-card__count-row {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  flex-shrink: 0;
}

.sc-info-card__count {
  font-weight: var(--sc-font-weight-regular);
  font-size: 30px;
  line-height: 1;
}

.sc-info-card__label {
  display: flex;
  flex-direction: column;
  font-weight: var(--sc-font-weight-medium);
  font-size: var(--sc-font-size-label);
  line-height: normal;
  text-transform: uppercase;
}

/* ── Report dates section ────────────────────────── */

.sc-info-card__date-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}

.sc-info-card__date-title {
  font-weight: var(--sc-font-weight-medium);
  font-size: var(--sc-font-size-caption);
  line-height: 1.6;
  text-transform: uppercase;
  opacity: 0.5;
}

.sc-info-card__date-values {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sc-info-card__date-values span,
.sc-info-card__date-value {
  font-weight: var(--sc-font-weight-regular);
  font-size: var(--sc-font-size-body);
  font-style: italic;
  line-height: normal;
}

/* ── Clickable card state ────────────────────────── */

.sc-info-card--clickable {
  cursor: pointer;
  user-select: none;
  transition:
    opacity 0.15s ease,
    box-shadow 0.15s ease;
}

.sc-info-card--clickable:hover {
  opacity: 0.85;
  box-shadow: 0 4px 12px rgba(12, 10, 62, 0.12);
}

.sc-info-card--clickable:focus-visible {
  outline: 2px solid var(--sc-brand-blue);
  outline-offset: 2px;
}

.sc-info-card--clickable:active {
  opacity: 0.7;
  transform: scale(0.98);
}

/* ── Responsive: triple variant on narrow viewports ── */

@media (max-width: 767px) {
  .sc-info-card--triple {
    flex-direction: column;
    gap: 10px;
  }

  .sc-info-card--triple .sc-info-card__dates {
    gap: 20px;
    white-space: normal;
  }

  .sc-info-card--triple .sc-info-card__stat {
    width: 100%;
  }
}

/* ── styles/sc-info-popover.css ── */
/* ScInfoPopover — icon trigger plus an anchored, non-modal popover panel. */

:host {
  align-items: center;
  display: inline-flex;
  vertical-align: middle;
}

:host([trigger-align='end']) {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

.sc-info-popover__trigger {
  align-items: center;
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: var(--sc-border-radius-pill);
  color: var(--sc-brand-blue);
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  padding: var(--sc-space-sm);
}

.sc-info-popover__trigger:hover {
  background: var(--sc-blue-alpha05);
}

.sc-info-popover__trigger:focus-visible {
  outline: var(--sc-border-width-medium) solid var(--sc-brand-blue);
  outline-offset: 2px;
}

.sc-info-popover__trigger-icon {
  align-items: center;
  display: inline-flex;
}

/* The registry SVG ships at 20x15 (viewBox 0 0 20 15). Scale it on the same
   4:3 ratio so the "i" circle stays circular while reading larger next to a
   page title. */
.sc-info-popover__trigger-icon svg {
  height: 21px;
  width: 28px;
}

/* The UA stylesheet for [popover] sets `inset: 0` and `margin: auto`, which
   centers the panel in the viewport and fights the JS positioning. Reset both
   on the popover shell; visual chrome lives on the inner panel. */
.sc-info-popover__popup {
  background: transparent;
  border: 0;
  box-shadow: none;
  box-sizing: border-box;
  inset: auto;
  margin: 0;
  max-height: none;
  max-width: none;
  overflow: visible;
  padding: 0;
  position: fixed;
  width: auto;
  z-index: 1000;
}

.sc-info-popover__backdrop {
  appearance: none;
  background: var(--sc-blue-alpha50, rgb(12 10 62 / 0.5));
  border: 0;
  cursor: default;
  inset: 0;
  margin: 0;
  padding: 0;
  position: fixed;
  z-index: 0;
}

.sc-info-popover__panel {
  background: var(--sc-white-normal);
  border: var(--sc-border-width-thin) solid var(--sc-gray-normal);
  border-radius: var(--sc-border-radius-lg);
  box-shadow: 0 16px 40px var(--sc-blue-alpha10);
  box-sizing: border-box;
  color: var(--sc-brand-blue);
  font-family: var(--sc-font-family-body);
  font-size: var(--sc-font-size-label);
  font-weight: var(--sc-font-weight-regular);
  max-height: min(80vh, 40rem);
  max-width: min(90vw, 24rem);
  overflow-y: auto;
  padding: var(--sc-space-lg);
  position: fixed;
  scrollbar-color: var(--sc-blue-alpha30) transparent;
  scrollbar-width: thin;
  text-align: start;
  width: max-content;
  z-index: 1;
}

/* Roomier reading width on desktop; mobile keeps the tighter cap above. */
@media (min-width: 601px) {
  .sc-info-popover__panel {
    max-width: min(90vw, 32rem);
  }
}

/* The fallback path toggles [hidden] instead of the top layer. Stated
   explicitly so it wins regardless of UA stylesheet specificity. */
.sc-info-popover__popup[hidden] {
  display: none;
}

.sc-info-popover__popup:focus-visible {
  outline: none;
}

.sc-info-popover__panel:focus-visible {
  outline: var(--sc-border-width-medium) solid var(--sc-brand-blue);
  outline-offset: -2px;
}

.sc-info-popover__panel::-webkit-scrollbar {
  width: var(--sc-space-sm);
}

.sc-info-popover__panel::-webkit-scrollbar-track {
  background: transparent;
}

.sc-info-popover__panel::-webkit-scrollbar-thumb {
  background: var(--sc-blue-alpha30);
  border-radius: var(--sc-border-radius-pill);
}

.sc-info-popover__header {
  align-items: flex-start;
  display: flex;
  gap: var(--sc-space-sm);
  justify-content: space-between;
  margin-bottom: var(--sc-space-md);
}

.sc-info-popover__title {
  font-size: var(--sc-font-size-body);
  font-weight: var(--sc-font-weight-semibold);
  margin: 0;
  min-width: 0;
}

.sc-info-popover__close {
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: var(--sc-border-radius-sm);
  color: var(--sc-brand-blue);
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  padding: var(--sc-space-xs);
}

.sc-info-popover__close svg {
  height: 24px;
  width: 24px;
}

.sc-info-popover__close:hover {
  background: var(--sc-blue-alpha05);
}

.sc-info-popover__close:focus-visible {
  outline: var(--sc-border-width-medium) solid var(--sc-brand-blue);
  outline-offset: 1px;
}

/* Consumer copy arrives as light-DOM children, so page typography applies.
   Only trim the outer margins so the panel padding stays even. */
::slotted(*:first-child) {
  margin-top: 0;
}

::slotted(*:last-child) {
  margin-bottom: 0;
}

/* ── styles/sc-info-tooltip-icon.css ── */
:host {
  display: inline-flex;
  flex-shrink: 0;
  line-height: 0;
  color: var(--sc-brand-blue, #0c0a3e);
}

.sc-info-tooltip-icon {
  all: unset;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  cursor: pointer;
  position: relative;
  color: inherit;
  width: var(--sc-info-tooltip-icon-size);
  height: var(--sc-info-tooltip-icon-size);
}

.sc-info-tooltip-icon--md {
  --sc-info-tooltip-icon-size: 20px;
}

.sc-info-tooltip-icon--sm {
  --sc-info-tooltip-icon-size: 16px;
}

/* The warning triangle is a call for attention, so it takes the alert colour rather
   than inheriting the neutral brand blue the info circle uses. */
.sc-info-tooltip-icon--warning {
  color: var(--sc-brand-red, #c0133d);
}

/* The verified stamp keeps the brand-blue circle and draws its check in white on top of it. */
.sc-info-tooltip-icon--verified .sc-info-tooltip-icon__check {
  stroke: var(--sc-white-normal, #fff);
}

.sc-info-tooltip-icon__icon {
  display: block;
  width: 100%;
  height: 100%;
}

.sc-info-tooltip-icon__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ── styles/sc-inline-edit.css ── */
/* ScInlineEdit — click-to-edit free text for a table's Notes / Description column.

   The component also loads sc-form-textarea.css and renders its control classes, so the
   editor matches sc-form-textarea exactly. This sheet only adds the display control, the
   footer, the error row and the meta line. Everything stays inside a table cell: no fixed
   widths, and text wraps rather than truncating. */

:host {
  display: block;
  width: 100%;
  min-width: 0;
  font-family: var(--sc-font-family-body, 'Work Sans', sans-serif);
  color: var(--sc-brand-blue, #0c0a3e);
}

:host([hidden]) {
  display: none;
}

.sc-inline-edit {
  display: flex;
  flex-direction: column;
  gap: var(--sc-space-xs, 4px);
  min-width: 0;
}

.sc-inline-edit__visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Text keeps the author's line breaks and wraps long words instead of widening the column. */
.sc-inline-edit__text {
  min-width: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.sc-inline-edit__text--readonly {
  margin: 0;
  font-size: var(--sc-font-size-label, 14px);
  line-height: 20px;
}

/* ── Display control ─────────────────────────────────────────────────────────────────────── */
.sc-inline-edit__display {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sc-space-sm, 8px);
  width: 100%;
  min-width: 0;
  min-height: 32px;
  margin: 0;
  padding: 6px var(--sc-space-sm, 8px);
  border: var(--sc-border-width-thin, 1px) solid transparent;
  border-radius: var(--sc-border-radius-md, 8px);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: var(--sc-font-size-label, 14px);
  line-height: 20px;
  text-align: left;
  cursor: text;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease;
}

.sc-inline-edit__display:hover {
  border-color: var(--sc-gray-normal, #e8e7ec);
  background: var(--sc-gray-light, #f9fafc);
}

.sc-inline-edit__display:focus-visible {
  outline: var(--sc-border-width-medium, 2px) solid var(--sc-brand-blue, #0c0a3e);
  outline-offset: 1px;
}

/* An empty note is a slot to fill: a dashed outline and muted copy, always visible so the
   affordance does not depend on hover (touch has none). */
.sc-inline-edit__display--empty {
  border-style: dashed;
  border-color: var(--sc-gray-dark, #a1a5b1);
  color: var(--sc-blue-muted, #374151);
}

.sc-inline-edit__icon {
  --sc-icon-size: 16px;
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--sc-blue-muted, #374151);
}

/* ── Editor ──────────────────────────────────────────────────────────────────────────────── */
.sc-inline-edit__editor {
  display: flex;
  flex-direction: column;
  gap: var(--sc-space-xs, 4px);
  min-width: 0;
}

/* Grows with the note where supported, between three and twelve lines; elsewhere the
   sc-form-textarea vertical resize handle covers it. */
.sc-inline-edit__textarea {
  field-sizing: content;
  min-height: calc(3lh + 20px);
  max-height: calc(12lh + 20px);
}

.sc-inline-edit__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sc-space-xs, 4px) var(--sc-space-sm, 8px);
  min-width: 0;
}

.sc-inline-edit__help {
  flex: 1 1 12em;
  min-width: 0;
  margin: 0;
  font-size: var(--sc-font-size-caption, 12px);
  line-height: 16px;
  color: var(--sc-blue-muted, #374151);
}

.sc-inline-edit__error {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sc-space-xs, 4px) var(--sc-space-sm, 8px);
  min-width: 0;
  font-size: var(--sc-font-size-caption, 12px);
  line-height: 16px;
  color: var(--sc-brand-red, #c0133d);
}

.sc-inline-edit__error-text {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ── Meta line + live status ─────────────────────────────────────────────────────────────────
   The status region is always rendered, even empty: a live region that only appears with its
   message is often not announced. */
.sc-inline-edit__meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--sc-space-sm, 8px);
  min-width: 0;
  font-size: var(--sc-font-size-caption, 12px);
  line-height: 16px;
  color: var(--sc-blue-muted, #374151);
}

.sc-inline-edit__meta {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Inside the display control's padding, so the meta line lines up with the text above. */
.sc-inline-edit--display .sc-inline-edit__meta-row {
  padding-inline: calc(var(--sc-space-sm, 8px) + var(--sc-border-width-thin, 1px));
}

.sc-inline-edit__status {
  font-weight: var(--sc-font-weight-medium, 500);
}

/* ── styles/sc-insight-chart.css ── */
/* Shared styles for sc-insight-bar-chart and sc-insight-line-chart. */

:host {
  display: block;
  min-height: 0;
  min-width: 0;
}

.sc-insight-chart {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border-radius: 17px;
  background: linear-gradient(180deg, rgba(184, 230, 221, 0.5) 0%, rgba(204, 229, 224, 0.2) 100%);
  font-family: var(--sc-font-family-body);
  color: var(--sc-brand-blue);
  box-sizing: border-box;
}

.sc-insight-chart__title {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 19px;
  text-transform: uppercase;
  opacity: 0.5;
}

.sc-insight-chart__canvas-wrap {
  position: relative;
  width: 100%;
  height: var(--sc-insight-chart-canvas-height, 240px);
}

.sc-insight-chart__canvas {
  width: 100% !important;
  height: 100% !important;
}

/* HTML legend rendered below the fixed-height canvas. Kept out of the canvas
   so a long / numerous category list (e.g. "Permits by Authority", "Manpower by
   Project") wraps and scrolls instead of collapsing the 240px plot the way
   Chart.js's in-canvas legend did. */
.sc-insight-chart__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 92px;
  overflow-y: auto;
  font-size: 12px;
  line-height: 1.4;
}

.sc-insight-chart__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.sc-insight-chart__legend-swatch {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-radius: 3px;
}

/* Offscreen accessible data table for screen readers. The visually-hidden rules sit on
   a wrapping div: a table ignores ``width: 1px`` and grows to its content, so hiding the
   table itself still widened the page (a phone scrolled sideways once cells held dollar
   amounts). */
.sc-insight-chart__a11y {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sc-insight-chart__loading,
.sc-insight-chart__empty,
.sc-insight-chart__error {
  font-size: 13px;
  padding: 12px 0;
  opacity: 0.7;
}

.sc-insight-chart__error { color: var(--sc-brand-red); }

.sc-insight-chart__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* Inline data table shown when the user toggles "View as table". Distinct
   from the offscreen ``__a11y-table`` which exists purely for SR users. */
.sc-insight-chart__data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.sc-insight-chart__data-table th,
.sc-insight-chart__data-table td {
  padding: 6px 10px;
  border-bottom: 1px solid rgba(12, 10, 62, 0.08);
  text-align: left;
}

.sc-insight-chart__data-table th {
  font-weight: 600;
  background: rgba(255, 255, 255, 0.4);
}

.sc-insight-chart__data-table td:last-child,
.sc-insight-chart__data-table th:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Per-card action buttons (CSV download, table toggle). Shared shape
   pulled into every primitive via ``insight-card-actions``. */
.sc-insight-card-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.sc-insight-card-actions__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: auto;
  min-height: 24px;
  padding: 2px 8px;
  border: 1px solid rgba(12, 10, 62, 0.15);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.6);
  color: inherit;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 120ms ease;
}

.sc-insight-card-actions__btn:hover,
.sc-insight-card-actions__btn:focus-visible {
  opacity: 1;
}

.sc-insight-card-actions__btn[aria-pressed='true'] {
  background: var(--sc-brand-blue);
  color: #fff;
  border-color: var(--sc-brand-blue);
  opacity: 1;
}

.sc-insight-card-actions__btn svg {
  width: 12px;
  height: 12px;
}

.sc-insight-chart--compact {
  background: transparent;
  border-radius: 0;
  gap: 0;
  padding: 0;
}

.sc-insight-chart--compact .sc-insight-chart__canvas-wrap {
  height: var(--sc-insight-chart-canvas-height, 100px);
  margin-bottom: 46px;
}

/* Overview V2 Data Center: shorten the chart→tooltip gap (was 82px / 54px).
   Do not assign --sc-insight-chart-canvas-height here: Home V2 sets 100% on
   the host so the sparkline can fill the SafetyScore card. */
.sc-insight-chart--compact.sc-insight-chart--safetyscore {
  height: 100%;
  min-height: 0;
}

.sc-insight-chart--compact.sc-insight-chart--safetyscore .sc-insight-chart__canvas-wrap {
  cursor: crosshair;
  flex: 1 1 auto;
  height: var(--sc-insight-chart-canvas-height, 92px);
  min-height: 0;
  margin-bottom: var(--sc-insight-chart-canvas-margin-bottom, 50px);
  overflow: visible;
}

.sc-insight-chart__hover-guide {
  border-left: 1px dashed var(--sc-brand-blue, #0c0a3e);
  bottom: 0;
  opacity: 0.35;
  pointer-events: none;
  position: absolute;
  top: 0;
  transform: translateX(-50%);
}

.sc-insight-chart__touchpoint {
  pointer-events: none;
  position: absolute;
  transform: translateX(-50%);
  z-index: 2;
}

/* ── styles/sc-insight-filter-bar.css ── */
/* sc-insight-filter-bar — sticky toolbar matching the .po-toolbar pattern. */

.sc-insight-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--sc-gray-normal);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.3);
  font-family: var(--sc-font-family-body);
  color: var(--sc-brand-blue);
}

.sc-insight-filter-bar__field {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}

.sc-insight-filter-bar__label {
  text-transform: uppercase;
  opacity: 0.6;
  letter-spacing: 0.02em;
}

.sc-insight-filter-bar__input,
.sc-insight-filter-bar__select {
  min-height: 30px;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid var(--sc-gray-normal);
  background: rgba(255, 255, 255, 0.6);
  font: inherit;
  font-size: 13px;
  color: inherit;
}

.sc-insight-filter-bar__date-range {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.sc-insight-filter-bar__sep {
  opacity: 0.5;
  font-size: 12px;
}

/* Multi-select project dropdown — checkbox list under a button toggle. */
.sc-insight-filter-bar__multiselect {
  position: relative;
  display: inline-block;
}

.sc-insight-filter-bar__multiselect-toggle {
  min-height: 30px;
  padding: 4px 12px;
  border-radius: 6px;
  border: 1px solid var(--sc-gray-normal);
  background: rgba(255, 255, 255, 0.6);
  font: inherit;
  font-size: 13px;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.sc-insight-filter-bar__multiselect-toggle::after {
  content: "▾";
  font-size: 10px;
  opacity: 0.6;
}

.sc-insight-filter-bar__multiselect-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 1000;
  min-width: 240px;
  max-width: 360px;
  max-height: 320px;
  overflow-y: auto;
  padding: 8px;
  border: 1px solid var(--sc-gray-normal);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.sc-insight-filter-bar__multiselect-search {
  width: 100%;
  margin-bottom: 6px;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid var(--sc-gray-normal);
  font: inherit;
  font-size: 13px;
}

.sc-insight-filter-bar__multiselect-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 12px;
}

.sc-insight-filter-bar__multiselect-actions button {
  background: none;
  border: 0;
  padding: 0;
  color: var(--sc-brand-blue);
  cursor: pointer;
  text-decoration: underline;
  font: inherit;
  font-size: 12px;
}

.sc-insight-filter-bar__multiselect-option {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 2px;
  font-size: 13px;
  cursor: pointer;
}

.sc-insight-filter-bar__multiselect-option input {
  margin: 0;
}

/* ── styles/sc-insight-page.css ── */
/* sc-insight-page — top-level orchestrator shell. Mirrors the .po-shell layout
   so the native company-insights page matches the existing payroll surface. */

.sc-insight-page {
  display: block;
  position: relative;
  min-height: 320px;
  font-family: var(--sc-font-family-body);
  color: var(--sc-brand-blue);
}

.sc-insight-page__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.sc-insight-page__title {
  margin: 0;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.2;
}

.sc-insight-page__sticky {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 0 12px;
  background: linear-gradient(270deg, rgba(222, 243, 239, 0) 11.5%, rgba(222, 243, 239, 0.6) 92.7%), #fff;
}

.sc-insight-page__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 0;
}

.sc-insight-page__tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 4px 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: rgba(222, 243, 239, 0.6);
  color: var(--sc-brand-blue);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.sc-insight-page__tab.is-active {
  border-color: var(--sc-brand-blue);
}

.sc-insight-page__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 12px;
}

.sc-insight-page__empty {
  padding: 24px;
  border: 1px dashed var(--sc-gray-normal);
  border-radius: 12px;
  font-size: 14px;
  color: rgba(12, 10, 62, 0.6);
  text-align: center;
}

/* ── styles/sc-insight-ranked-list.css ── */
/* sc-insight-ranked-list — Best/Worst/Top-N rounded card. */

.sc-insight-ranked-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border-radius: 17px;
  background: linear-gradient(180deg, rgba(184, 230, 221, 0.5) 0%, rgba(204, 229, 224, 0.2) 100%);
  font-family: var(--sc-font-family-body);
  color: var(--sc-brand-blue);
  box-sizing: border-box;
}

.sc-insight-ranked-list__title {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 500;
  line-height: 19px;
  text-transform: uppercase;
  opacity: 0.5;
}

.sc-insight-ranked-list__rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sc-insight-ranked-list__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.5);
}

.sc-insight-ranked-list__row-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}

.sc-insight-ranked-list__row-link {
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  text-align: left;
}

.sc-insight-ranked-list__row-link:hover { opacity: 0.75; }

.sc-insight-ranked-list__row-value {
  flex: 0 0 auto;
  font-size: 14px;
  font-weight: 600;
}

.sc-insight-ranked-list__empty,
.sc-insight-ranked-list__error,
.sc-insight-ranked-list__loading {
  font-size: 13px;
  opacity: 0.7;
  padding: 8px 0;
}

.sc-insight-ranked-list__error { color: var(--sc-brand-red); }

/* ── styles/sc-insight-scalar.css ── */
/* sc-insight-scalar — gradient summary card matching the .po-card pattern. */

/* Block + full height so grid/flex parents can stretch a row of cards and
   avoid baseline alignment that staggers hosts when titles wrap. */
:host {
  display: block;
  height: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.sc-insight-scalar {
  /* flex-start keeps the value on one horizontal line across a row of cards
     when only some cards have a subtitle (space-between pushed bare values down). */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
  min-height: 132px;
  padding: 12px 14px;
  border-radius: 17px;
  background: linear-gradient(180deg, rgba(184, 230, 221, 0.5) 0%, rgba(204, 229, 224, 0.2) 100%);
  font-family: var(--sc-font-family-body);
  color: var(--sc-brand-blue);
  box-sizing: border-box;
}

.sc-insight-scalar__label {
  /* Reserve two lines so wrapping titles (e.g. "Severe Weather Risk Days")
     do not push values/subtitles off the shared row baseline. */
  margin: 0;
  min-height: calc(19px * 2);
  font-size: 12px;
  font-weight: 500;
  line-height: 19px;
  text-transform: uppercase;
  opacity: 0.5;
}

.sc-insight-scalar__value {
  margin: 0;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.1;
}

.sc-insight-scalar__subtitle {
  /* Pin threshold copy to the card bottom so mixed wrap lengths still align. */
  margin: auto 0 0;
  padding-top: 4px;
  font-size: 13px;
  opacity: 0.7;
}

.sc-insight-scalar__trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 500;
}

.sc-insight-scalar__trend--up    { color: var(--sc-brand-green); }
.sc-insight-scalar__trend--down  { color: var(--sc-brand-red); }
.sc-insight-scalar__trend--flat  { color: var(--sc-blue-muted); }

.sc-insight-scalar__deeplink {
  margin-top: 8px;
  font-size: 12px;
  color: var(--sc-brand-blue);
  text-decoration: underline;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  font-family: inherit;
}

.sc-insight-scalar__deeplink:hover { opacity: 0.75; }

.sc-insight-scalar--state-empty .sc-insight-scalar__value {
  opacity: 0.4;
}

/* Matches the chart/table/ranked-list "Loading…" affordance so every
   insight card shows a single, consistent loading indicator. */
.sc-insight-scalar__loading {
  margin: 0;
  font-size: 13px;
  line-height: 1.1;
  opacity: 0.7;
}

.sc-insight-scalar__error {
  color: var(--sc-brand-red);
  font-size: 12px;
}

.sc-insight-scalar__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.sc-insight-card-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.sc-insight-card-actions__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: auto;
  min-height: 22px;
  padding: 2px 6px;
  border: 1px solid rgba(12, 10, 62, 0.15);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.6);
  color: inherit;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 120ms ease;
}

.sc-insight-card-actions__btn:hover,
.sc-insight-card-actions__btn:focus-visible { opacity: 1; }

.sc-insight-card-actions__btn svg { width: 12px; height: 12px; }

/* ── styles/sc-insight-table.css ── */
/* sc-insight-table — bordered, semi-transparent table card matching .po-table-shell. */

.sc-insight-table {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(229, 231, 235, 0.85);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(4px);
  font-family: var(--sc-font-family-body);
  color: var(--sc-brand-blue);
  overflow: hidden;
}

.sc-insight-table__header {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(229, 231, 235, 0.85);
  font-size: 14px;
  font-weight: 600;
}

.sc-insight-table__scroll {
  width: 100%;
  overflow-x: auto;
}

.sc-insight-table__table {
  width: 100%;
  border-collapse: collapse;
}

.sc-insight-table__th,
.sc-insight-table__td {
  padding: 10px 14px;
  font-size: 13px;
  vertical-align: top;
  border-bottom: 1px solid rgba(229, 231, 235, 0.4);
}

.sc-insight-table__th {
  text-align: left;
  font-weight: 500;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.02em;
  color: rgba(12, 10, 62, 0.6);
}

.sc-insight-table__th--right,
.sc-insight-table__td--right {
  text-align: right;
}
.sc-insight-table__th--center,
.sc-insight-table__td--center {
  text-align: center;
}

.sc-insight-table__row:last-child .sc-insight-table__td {
  border-bottom: 0;
}

.sc-insight-table__cell-link {
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  text-align: inherit;
}

.sc-insight-table__cell-link:hover {
  opacity: 0.75;
}

.sc-insight-table__pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid rgba(229, 231, 235, 0.85);
  font-size: 12px;
}

.sc-insight-table__page-btn {
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid var(--sc-gray-normal);
  background: transparent;
  cursor: pointer;
  color: var(--sc-brand-blue);
  font: inherit;
}

.sc-insight-table__page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.sc-insight-table__empty,
.sc-insight-table__error,
.sc-insight-table__loading {
  padding: 24px 16px;
  font-size: 14px;
  color: rgba(12, 10, 62, 0.7);
}

.sc-insight-table__error {
  color: var(--sc-brand-red);
}

.sc-insight-table__header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 16px 0;
}

.sc-insight-card-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.sc-insight-card-actions__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: auto;
  min-height: 24px;
  padding: 2px 8px;
  border: 1px solid rgba(12, 10, 62, 0.15);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.6);
  color: inherit;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 120ms ease;
}

.sc-insight-card-actions__btn:hover,
.sc-insight-card-actions__btn:focus-visible {
  opacity: 1;
}

.sc-insight-card-actions__btn[disabled] {
  cursor: default;
  opacity: 0.5;
}

.sc-insight-card-actions__btn svg {
  width: 12px;
  height: 12px;
}

.sc-insight-card-actions__error {
  font-size: 11px;
  color: var(--sc-brand-red);
}

.sc-insight-table__truncation {
  margin: 0;
  padding: 8px 16px 12px;
  font-size: 12px;
  color: rgba(12, 10, 62, 0.6);
}

/* ── styles/sc-integrations-card.css ── */
/* ScIntegrationsCard — Integrations shortcut row (Figma 251:6544). */

:host {
  border-radius: 10px;
  box-shadow: 0 0 4px rgb(0 0 0 / 0.25);
  display: block;
  min-width: 0;
  width: 100%;
}

.sc-integrations-card {
  align-items: center;
  background: rgb(255 255 255 / 0.8);
  border-radius: 10px;
  box-sizing: border-box;
  color: var(--sc-brand-blue, #0c0a3e);
  display: flex;
  font-family: var(--sc-font-family-body);
  gap: 10px;
  justify-content: space-between;
  min-width: 0;
  padding: 10px;
  width: 100%;
}

.sc-integrations-card__title {
  font-family: var(--sc-font-family-heading, var(--sc-font-family-body));
  font-size: 18px;
  font-weight: var(--sc-font-weight-medium, 500);
  letter-spacing: 0;
  line-height: normal;
  margin: 0;
  min-width: 0;
  text-transform: uppercase;
  white-space: nowrap;
}

.sc-integrations-card__actions {
  align-items: center;
  display: flex;
  flex: 0 1 auto;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  min-width: 0;
}

.sc-integrations-card__pill {
  align-items: center;
  border: 0.8px solid rgb(12 10 62 / 0.3);
  border-radius: 20px;
  box-sizing: border-box;
  color: var(--sc-brand-blue, #0c0a3e);
  display: inline-flex;
  flex: 0 0 auto;
  justify-content: center;
  padding: 7px 15px;
  text-decoration: none;
}

.sc-integrations-card__pill:hover {
  background: rgb(12 10 62 / 0.04);
  color: var(--sc-brand-blue, #0c0a3e);
  text-decoration: none;
}

.sc-integrations-card__logo {
  display: block;
  height: 18px;
  object-fit: contain;
  width: 19px;
}

.sc-integrations-card__logo--shield {
  align-items: center;
  color: var(--sc-brand-blue, #0c0a3e);
  display: inline-flex;
  justify-content: center;
}

.sc-integrations-card__logo--shield svg {
  display: block;
  height: 16px;
  width: 14px;
}

@media (max-width: 520px) {
  .sc-integrations-card {
    align-items: flex-start;
    flex-direction: column;
  }

  .sc-integrations-card__actions {
    justify-content: flex-start;
    width: 100%;
  }
}

/* ── styles/sc-jha-editor.css ── */
/* ScJhaEditor — the Job Hazard Analysis editor, after the Figma App pre-shift JHA step (5065:5910):
   toolbar, activities, independent tasks, footer.

   The task cards style themselves (sc-jha-task.css). This sheet lays out the page body around
   them, and draws the sortable list's drag feedback (src/utils/sortable-list.ts) on the cards. */

:host {
  display: block;
  min-width: 0;
  font-family: var(--sc-font-family-body, 'Work Sans', sans-serif);
  color: var(--sc-brand-blue, #0c0a3e);
}

:host([hidden]) {
  display: none;
}

.sc-jha-editor {
  display: flex;
  flex-direction: column;
  gap: var(--sc-space-xl, 20px);
  min-width: 0;
}

.sc-jha-editor__visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.sc-jha-editor__error {
  margin: 0;
  font-size: var(--sc-font-size-caption, 12px);
  line-height: 16px;
  color: var(--sc-brand-red, #c0133d);
}

/* The icon-only sc-button is 32px tall, a finger-sized target; the negative margins keep the
   header as tight as the design. */
.sc-jha-editor__icon-button {
  flex: none;
  margin: -8px -4px;
}

.sc-jha-editor__add-task sc-icons {
  --sc-icon-size: 20px;
}

.sc-jha-editor__add-task:focus-visible {
  outline: 2px solid var(--sc-blue-alpha30, rgba(12, 10, 62, 0.3));
  outline-offset: -2px;
}

/* ── Toolbar ─────────────────────────────────────────────────────────────────────────────── */
.sc-jha-editor__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sc-space-sm, 8px) var(--sc-space-lg, 16px);
}

.sc-jha-editor__search {
  flex: 1 1 220px;
  min-width: 0;
  max-width: 360px;
}

.sc-jha-editor__toggle-all {
  margin-left: auto;
}

/* ── Activities and independent tasks ────────────────────────────────────────────────────── */
.sc-jha-editor__activity,
.sc-jha-editor__independent {
  display: flex;
  flex-direction: column;
  gap: var(--sc-space-md, 12px);
  min-width: 0;
}

.sc-jha-editor__activity-header {
  display: flex;
  align-items: center;
  gap: var(--sc-space-sm, 8px);
  min-width: 0;
}

/* Reads as the design's italic activity label; a line under it shows it is being edited. */
.sc-jha-editor__activity-name {
  flex: 1 1 auto;
  box-sizing: border-box;
  min-width: 0;
  height: 24px;
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: var(--sc-font-size-label, 14px);
  font-style: italic;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--sc-brand-blue, #0c0a3e) 70%, transparent);
  background: transparent;
  border: 0;
  border-bottom: var(--sc-border-width-thin, 1px) solid transparent;
  border-radius: 0;
  outline: none;
}

.sc-jha-editor__activity-name:focus {
  border-bottom-color: var(--sc-blue-alpha50, rgba(12, 10, 62, 0.5));
}

.sc-jha-editor__activity-name[aria-invalid='true'] {
  border-bottom-color: var(--sc-brand-red, #c0133d);
}

.sc-jha-editor__activity-name::placeholder {
  color: var(--sc-blue-alpha50, rgba(12, 10, 62, 0.5));
  opacity: 1;
}

.sc-jha-editor__add-task {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  min-width: 0;
  padding: 10px;
  font-family: inherit;
  font-size: var(--sc-font-size-label, 14px);
  font-weight: var(--sc-font-weight-medium, 500);
  line-height: 16px;
  color: inherit;
  text-align: center;
  overflow-wrap: anywhere;
  background: color-mix(in srgb, var(--sc-brand-mint, #def3ef) 50%, transparent);
  border: var(--sc-border-width-thin, 1px) solid var(--sc-blue-alpha05, rgba(12, 10, 62, 0.05));
  border-radius: 10px;
  cursor: pointer;
}

.sc-jha-editor__add-task sc-icons {
  flex: none;
}

/* ── Task lists ──────────────────────────────────────────────────────────────────────────── */
.sc-jha-editor__tasks {
  display: flex;
  flex-direction: column;
  gap: var(--sc-space-md, 12px);
  min-width: 0;
}

.sc-jha-editor__tasks > sc-jha-task {
  position: relative;
}

/* The dragged card floats above the others, following the pointer through transform. It lets the
   drop bar under it show through. */
.sc-jha-editor__tasks > sc-jha-task[data-sortable-dragging] {
  z-index: 2;
  opacity: 0.85;
  cursor: grabbing;
  filter: drop-shadow(0 8px 16px var(--sc-blue-alpha20, rgba(12, 10, 62, 0.2)));
}

/* A bar in the gap where the dragged card will drop. */
.sc-jha-editor__tasks > sc-jha-task[data-sortable-drop]::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: var(--sc-border-radius-pill, 999px);
  background: var(--sc-brand-blue, #0c0a3e);
}

.sc-jha-editor__tasks > sc-jha-task[data-sortable-drop='before']::before {
  top: calc(var(--sc-space-md, 12px) / -2 - 1.5px);
}

.sc-jha-editor__tasks > sc-jha-task[data-sortable-drop='after']::before {
  bottom: calc(var(--sc-space-md, 12px) / -2 - 1.5px);
}

/* ── Footer ──────────────────────────────────────────────────────────────────────────────── */
.sc-jha-editor__steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

/* ── styles/sc-jha-task.css ── */
/* ScJhaTask — one task card of the JHA editor, after the Figma App "task" (5065:7723) and
   "risks and controls" (5065:7477) components: a tinted header with the drag handle, the name and
   the card's buttons; a body with the risks and the countermeasures as tinted pills. */

:host {
  display: block;
  min-width: 0;
  font-family: var(--sc-font-family-body, 'Work Sans', sans-serif);
  color: var(--sc-brand-blue, #0c0a3e);
}

:host([hidden]) {
  display: none;
}

.sc-jha-task {
  box-sizing: border-box;
  min-width: 0;
  background: var(--sc-white-normal, #ffffff);
  border: var(--sc-border-width-thin, 1px) solid var(--sc-blue-alpha05, rgba(12, 10, 62, 0.05));
  border-radius: 10px;
}

.sc-jha-task__error {
  margin: 0;
  font-size: var(--sc-font-size-caption, 12px);
  line-height: 16px;
  color: var(--sc-brand-red, #c0133d);
}

/* The icon-only sc-button is 32px tall, a finger-sized target; the negative margins keep the rows
   as tight as the design. */
.sc-jha-task__icon-button {
  flex: none;
  margin: -8px -4px;
}

.sc-jha-task__entry-icon sc-icons,
.sc-jha-task__heading sc-icons,
.sc-jha-task__add sc-icons {
  --sc-icon-size: 20px;
}

.sc-jha-task__add:focus-visible {
  outline: 2px solid var(--sc-blue-alpha30, rgba(12, 10, 62, 0.3));
  outline-offset: -2px;
}

/* ── Header ──────────────────────────────────────────────────────────────────────────────── */
.sc-jha-task__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sc-space-sm, 8px);
  padding: 10px;
  background: color-mix(in srgb, var(--sc-brand-mint, #def3ef) 50%, transparent);
  /* The card's radius minus its border. No overflow: hidden on the card, which would clip the
     library dropdown. */
  border-radius: 9px 9px 0 0;
}

.sc-jha-task--collapsed .sc-jha-task__header {
  border-radius: 9px;
}

.sc-jha-task__title {
  display: flex;
  flex: 1 1 auto;
  align-items: flex-start;
  gap: 5px;
  min-width: 0;
}

/* touch-action: none lets a finger drag the card instead of scrolling the page. */
.sc-jha-task__handle::part(button) {
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.sc-jha-task__name {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--sc-font-size-label, 14px);
  font-weight: var(--sc-font-weight-medium, 500);
  line-height: 16px;
}

.sc-jha-task__name:focus-within .sc-jha-task__grow {
  box-shadow: inset 0 -1px 0 var(--sc-blue-alpha50, rgba(12, 10, 62, 0.5));
}

.sc-jha-task__actions {
  display: flex;
  flex: none;
  align-items: center;
}

.sc-jha-task__error--name {
  padding: var(--sc-space-xs, 4px) 10px 0;
}

/* ── Fields that grow with their text ────────────────────────────────────────────────────── */
/* The hidden copy of the text in ::after sizes the grid cell, and the textarea fills it, so a
   long name or entry wraps onto as many lines as it needs at any width. */
.sc-jha-task__grow {
  display: grid;
  flex: 1 1 auto;
  min-width: 0;
}

.sc-jha-task__grow::after {
  content: attr(data-value) ' ';
  visibility: hidden;
  white-space: pre-wrap;
}

.sc-jha-task__grow > textarea,
.sc-jha-task__grow::after {
  grid-area: 1 / 1 / 2 / 2;
  box-sizing: border-box;
  min-width: 0;
  margin: 0;
  padding: 0;
  font: inherit;
  letter-spacing: inherit;
  overflow-wrap: anywhere;
  border: 0;
}

.sc-jha-task__grow > textarea {
  width: 100%;
  min-height: 0;
  overflow: hidden;
  color: inherit;
  background: transparent;
  outline: none;
  resize: none;
}

.sc-jha-task__grow > textarea::placeholder {
  color: var(--sc-blue-alpha50, rgba(12, 10, 62, 0.5));
  opacity: 1;
}

/* ── Library dropdown ────────────────────────────────────────────────────────────────────── */
.sc-jha-task__options {
  position: absolute;
  top: calc(100% + var(--sc-space-sm, 8px));
  left: 0;
  right: 0;
  z-index: 10;
  box-sizing: border-box;
  max-height: 300px;
  margin: 0;
  padding: var(--sc-space-xs, 4px) 0;
  overflow-y: auto;
  list-style: none;
  font-weight: var(--sc-font-weight-regular, 400);
  background: var(--sc-white-normal, #ffffff);
  border: var(--sc-border-width-thin, 1px) solid var(--sc-blue-alpha30, rgba(12, 10, 62, 0.3));
  border-radius: var(--sc-border-radius-md, 8px);
  box-shadow: 0 8px 24px var(--sc-blue-alpha10, rgba(12, 10, 62, 0.1));
}

.sc-jha-task__option {
  padding: var(--sc-space-sm, 8px) var(--sc-space-md, 12px);
  font-size: var(--sc-font-size-label, 14px);
  line-height: 20px;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.sc-jha-task__option--active {
  background: var(--sc-blue-alpha05, rgba(12, 10, 62, 0.05));
}

/* ── Body ────────────────────────────────────────────────────────────────────────────────── */
.sc-jha-task__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 5px var(--sc-space-lg, 16px);
  padding: 5px 10px 10px;
}

/* The design is a phone's; wider screens put the countermeasures beside the risks. */
@media (min-width: 768px) {
  .sc-jha-task__body {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.sc-jha-task__section {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.sc-jha-task__section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sc-space-sm, 8px);
  padding: 4px 0;
}

.sc-jha-task__heading {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  margin: 0;
  font-size: var(--sc-font-size-caption, 12px);
  font-weight: var(--sc-font-weight-regular, 400);
  line-height: 16px;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.sc-jha-task__heading sc-icons {
  flex: none;
}

.sc-jha-task__add {
  box-sizing: border-box;
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 10px;
  font-family: inherit;
  font-size: var(--sc-font-size-caption, 12px);
  font-weight: var(--sc-font-weight-medium, 500);
  color: inherit;
  white-space: nowrap;
  background: var(--sc-white-normal, #ffffff);
  border: var(--sc-border-width-thin, 1px) solid var(--sc-blue-alpha20, rgba(12, 10, 62, 0.2));
  border-radius: var(--sc-border-radius-sm, 4px);
  cursor: pointer;
}

.sc-jha-task__entries {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* An entry reads as a tinted pill, and as an outlined field while it is edited. */
.sc-jha-task__entry {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 2px 0 9px;
  font-size: 13px;
  line-height: 16px;
  border: var(--sc-border-width-thin, 1px) solid transparent;
  border-radius: 5px;
}

.sc-jha-task__entry .sc-jha-task__grow > textarea,
.sc-jha-task__entry .sc-jha-task__grow::after {
  padding: 7px 0;
}

.sc-jha-task__entry-icon {
  display: flex;
  flex: none;
  align-items: center;
  align-self: stretch;
  cursor: text;
}

.sc-jha-task__entry .sc-jha-task__icon-button {
  margin: 0 -6px;
}

.sc-jha-task__section--risks .sc-jha-task__entry--default {
  background: var(--sc-red-alpha10, rgba(192, 19, 61, 0.1));
}

.sc-jha-task__section--countermeasures .sc-jha-task__entry--default {
  background: color-mix(in srgb, var(--sc-brand-green, #068f3d) 10%, transparent);
}

.sc-jha-task__entry:not(.sc-jha-task__entry--default) {
  background: var(--sc-white-normal, #ffffff);
}

.sc-jha-task__section--risks .sc-jha-task__entry:not(.sc-jha-task__entry--default) {
  border-color: var(--sc-red-alpha50, rgba(192, 19, 61, 0.5));
}

.sc-jha-task__section--countermeasures .sc-jha-task__entry:not(.sc-jha-task__entry--default) {
  border-color: var(--sc-green-alpha50, rgba(6, 143, 61, 0.5));
}

/* ── styles/sc-loading-panel.css ── */
/* ScLoadingPanel — a background job's progress and outcome (W-9 / COI reads).

   loading: neutral panel, 32px brand-blue spinner, 18px heading, message, actions.
   done:    no panel chrome — one bold line with a green check icon.
   failed:  the warning tone of sc-callout / sc-status-pill, alert icon, heading, message, actions. */

:host {
  display: block;
  min-width: 0;
}

:host([hidden]) {
  display: none;
}

.sc-loading-panel {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--sc-space-md, 12px);
  min-width: 0;
  padding: var(--sc-space-lg, 16px);
  border: var(--sc-border-width-thin, 1px) solid var(--sc-gray-normal, #E8E7EC);
  border-radius: var(--sc-border-radius-lg, 12px);
  background: var(--sc-gray-light, #F9FAFC);
  color: var(--sc-brand-blue, #0C0A3E);
  font-family: var(--sc-font-family-body, 'Work Sans'), sans-serif;
  font-size: var(--sc-font-size-label, 14px);
  line-height: 20px;
  /* Long file names and translated copy wrap instead of widening a 480px sheet. */
  overflow-wrap: anywhere;
}

/* Warning palette shared with sc-callout, sc-status-pill and sc-toaster; there is no warning token yet. */
.sc-loading-panel--failed {
  border-color: rgba(146, 64, 14, 0.2);
  background: #FEF3C7;
  color: #92400E;
}

/* The 20px icon matches the 20px line height, so it sits on the first line when the copy wraps. */
.sc-loading-panel--done {
  gap: var(--sc-space-sm, 8px);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--sc-brand-blue, #0C0A3E);
}

/* Brand green is 4.2:1 on white, under AA for 14px text: the check carries the green, the copy stays dark. */
.sc-loading-panel--done .sc-loading-panel__indicator sc-icons {
  color: var(--sc-brand-green, #068F3D);
}

.sc-loading-panel__indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
}

.sc-loading-panel--failed .sc-loading-panel__indicator sc-icons {
  --sc-icon-size: 32px;
}

.sc-loading-panel--done .sc-loading-panel__indicator {
  width: 20px;
  height: 20px;
}

.sc-loading-panel--done .sc-loading-panel__indicator sc-icons {
  --sc-icon-size: 20px;
}

.sc-loading-panel__spinner {
  box-sizing: border-box;
  display: block;
  width: 32px;
  height: 32px;
  border: 3px solid var(--sc-blue-alpha20, #0C0A3E33);
  border-top-color: var(--sc-brand-blue, #0C0A3E);
  border-radius: 50%;
  animation: sc-loading-panel-spin 0.8s linear infinite;
}

@keyframes sc-loading-panel-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Slowed rather than stopped, so the panel still reads as working. */
@media (prefers-reduced-motion: reduce) {
  .sc-loading-panel__spinner {
    animation-duration: 2.4s;
  }
}

.sc-loading-panel__text {
  min-width: 0;
  /* Centres the heading's first 24px line on the 32px indicator. */
  padding-top: var(--sc-space-xs, 4px);
}

.sc-loading-panel--done .sc-loading-panel__text {
  padding-top: 0;
}

.sc-loading-panel__heading,
.sc-loading-panel__message {
  margin: 0;
}

.sc-loading-panel__heading {
  /* No 18px type token exists; matches the card titles in sc-home-data-center and sc-media-library-card. */
  font-size: 18px;
  font-weight: var(--sc-font-weight-bold, 700);
  line-height: 24px;
}

.sc-loading-panel__message {
  margin-top: var(--sc-space-xs, 4px);
  color: var(--sc-blue-muted, #374151);
}

.sc-loading-panel--failed .sc-loading-panel__message {
  color: inherit;
}

.sc-loading-panel--done .sc-loading-panel__heading {
  font-size: var(--sc-font-size-label, 14px);
  line-height: 20px;
}

.sc-loading-panel__actions {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sc-space-sm, 8px);
  min-width: 0;
}

.sc-loading-panel__actions[hidden] {
  display: none;
}

/* On phones the buttons take the full panel width, so a long translated label still fits. */
@media (max-width: 575px) {
  .sc-loading-panel__actions {
    grid-column: 1 / -1;
  }
}

/* ── styles/sc-map-arrow.css ── */
:host {
  --sc-map-arrow-color: rgba(12, 10, 62, 0.78);
  --sc-map-arrow-height: 38px;
  --sc-map-arrow-size: 18px;
  color: var(--sc-map-arrow-color);
  display: inline-flex;
  height: var(--sc-map-arrow-height);
  width: 100%;
}

.sc-map-arrow {
  align-items: center;
  display: inline-flex;
  height: 100%;
  justify-content: center;
  line-height: 1;
  width: 100%;
}

.sc-map-arrow svg {
  display: block;
  height: var(--sc-map-arrow-size);
  width: var(--sc-map-arrow-size);
}

.sc-map-arrow path {
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

/* ── styles/sc-media-item.css ── */
/* ScMediaItem — Media Library photo card (Figma 4569:26021). */

:host {
  display: block;
  min-width: 0;
  width: 100%;
}

.sc-media-item {
  background: color-mix(in srgb, var(--sc-brand-mint, #def3ef) 50%, transparent);
  border-radius: 10px;
  box-sizing: border-box;
  color: var(--sc-brand-blue, #0c0a3e);
  display: flex;
  flex-direction: column;
  font-family: var(--sc-font-family-body, 'Work Sans', sans-serif);
  gap: 6px;
  min-width: 0;
  padding: 8px 9px 10px;
  position: relative;
  width: 100%;
}

.sc-media-item__header {
  align-items: center;
  display: flex;
  gap: 4px;
  min-height: 24px;
  min-width: 0;
  padding-right: 28px;
}

.sc-media-item__type-icon {
  --sc-icon-color: var(--sc-brand-blue, #0c0a3e);

  color: var(--sc-brand-blue, #0c0a3e);
  display: inline-flex;
  flex: 0 0 auto;
  height: 15px;
  width: 20px;
}

.sc-media-item__frame {
  aspect-ratio: 142 / 120;
  min-height: 0;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.sc-media-item__lock,
.sc-media-item__mark {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  height: 22px;
  justify-content: center;
  width: 22px;
}

.sc-media-item__mark {
  border: 0;
  cursor: pointer;
  padding: 0;
  position: relative;
}

.sc-media-item__mark-label {
  background: var(--sc-brand-blue, #0c0a3e);
  border-radius: 4px;
  bottom: calc(100% + 4px);
  color: var(--sc-color-white, #fff);
  font-size: 11px;
  line-height: 1.3;
  max-width: 10rem;
  overflow: hidden;
  padding: 2px 6px;
  position: absolute;
  right: 0;
  text-overflow: ellipsis;
  visibility: hidden;
  white-space: nowrap;
  z-index: 2;
}

.sc-media-item__mark:focus .sc-media-item__mark-label,
.sc-media-item__mark:focus-visible .sc-media-item__mark-label {
  visibility: visible;
}

.sc-media-item__lock {
  --sc-icon-color: var(--sc-color-white, #fff);

  background: rgb(12 10 62 / 0.72);
  color: var(--sc-color-white, #fff);
  position: absolute;
  right: 6px;
  top: 6px;
}

.sc-media-item__mark {
  --sc-icon-color: var(--sc-brand-blue, #0c0a3e);

  background: color-mix(in srgb, var(--sc-brand-mint, #def3ef) 50%, #fff);
  color: var(--sc-brand-blue, #0c0a3e);
}

.sc-media-item__lock sc-icons,
.sc-media-item__mark sc-icons {
  height: 12px;
  width: 12px;
}

.sc-media-item__marks {
  bottom: 6px;
  display: flex;
  gap: 4px;
  position: absolute;
  right: 6px;
}

.sc-media-item__title {
  font-size: var(--sc-font-size-caption, 12px);
  font-weight: var(--sc-font-weight-regular, 400);
  line-height: 1.4;
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sc-media-item__menu {
  position: absolute;
  right: 4px;
  top: 4px;
  z-index: 1;
}

.sc-media-item__thumb {
  background: var(--sc-gray-light, #f3f4f6);
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  display: block;
  height: 100%;
  inset: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 100%;
}

.sc-media-item__thumb:focus-visible {
  outline: 2px solid rgb(12 10 62 / 0.35);
  outline-offset: 2px;
}

.sc-media-item__image {
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: center;
  width: 100%;
}

.sc-media-item__description {
  font-size: var(--sc-font-size-caption, 12px);
  line-height: 1.4;
  margin: 0;
  opacity: 0.8;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sc-media-item__tags {
  align-items: center;
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  min-height: 0;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}

.sc-media-item__tags ::slotted(sc-tag-chip) {
  flex: 0 0 auto;
  max-width: none;
}

.sc-media-item__overflow {
  background: var(--sc-gray-light, #f3f4f6);
  border-radius: 2px;
  color: var(--sc-brand-blue, #0c0a3e);
  flex: 0 0 auto;
  font-size: 9px;
  font-weight: var(--sc-font-weight-medium, 500);
  letter-spacing: 0.04em;
  line-height: 16.5px;
  padding: 1px 8px;
  text-transform: uppercase;
}

/* ── styles/sc-media-library-card.css ── */
/* ScMediaLibraryCard — Media Library shortcut row (Figma 5621:31548). */

:host {
  border-radius: 10px;
  box-shadow: 0 0 4px rgb(0 0 0 / 0.25);
  display: block;
  min-width: 0;
  width: 100%;
}

.sc-media-library-card {
  align-items: center;
  background: rgb(255 255 255 / 0.8);
  border-radius: 10px;
  box-sizing: border-box;
  color: var(--sc-brand-blue, #0c0a3e);
  display: flex;
  font-family: var(--sc-font-family-body);
  gap: 6px;
  justify-content: space-between;
  min-width: 0;
  padding: 10px;
  position: relative;
  width: 100%;
}

.sc-media-library-card--clickable {
  cursor: pointer;
}

.sc-media-library-card__primary-link {
  border-radius: 10px;
  color: inherit;
  inset: 0;
  position: absolute;
  text-decoration: none;
  z-index: 0;
}

.sc-media-library-card__primary-link:focus-visible {
  outline: 2px solid rgb(12 10 62 / 0.35);
  outline-offset: 2px;
}

.sc-media-library-card__title {
  flex: 1 1 auto;
  font-family: var(--sc-font-family-heading, var(--sc-font-family-body));
  font-size: 18px;
  font-weight: var(--sc-font-weight-medium, 500);
  letter-spacing: 0;
  line-height: normal;
  margin: 0;
  min-width: 0;
  pointer-events: none;
  text-transform: uppercase;
  white-space: nowrap;
}

.sc-media-library-card--clickable:hover .sc-media-library-card__title,
.sc-media-library-card:has(.sc-media-library-card__primary-link:focus-visible)
  .sc-media-library-card__title {
  text-decoration: underline;
}

.sc-media-library-card__open {
  --sc-icon-color: var(--sc-brand-blue, #0c0a3e);

  align-items: center;
  background: var(--sc-gray-normal, #c4c4c4);
  border-radius: 50%;
  color: var(--sc-brand-blue, #0c0a3e);
  display: inline-flex;
  flex: 0 0 auto;
  height: 30px;
  justify-content: center;
  pointer-events: none;
  position: relative;
  transition: background-color 0.15s ease;
  width: 30px;
  z-index: 1;
}

.sc-media-library-card--clickable:hover .sc-media-library-card__open,
.sc-media-library-card:has(.sc-media-library-card__primary-link:focus-visible)
  .sc-media-library-card__open {
  background: var(--sc-gray-dark, #a8a8a8);
}

.sc-media-library-card__open sc-icons {
  height: 8px;
  width: 5px;
}

.sc-media-library-card__open-icon {
  display: inline-flex;
  transform: rotate(180deg);
}

/* ── styles/sc-media-preview.css ── */
/* Full-screen photo preview. Figma 5455:29415.
   Stage and Share use #0a0932. The rail and Download use #18173f.
   Those fills are specific to this surface and are not brand-blue. */

:host {
  display: block;
}

:host(:not([open])) {
  display: none;
}

.sc-media-preview {
  box-sizing: border-box;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: #0a0932;
  color: var(--sc-color-white, #fff);
  font-family: var(--sc-font-family-body, 'Work Sans', sans-serif);
}

.sc-media-preview::backdrop {
  background: #0a0932;
}

.sc-media-preview__layout {
  display: flex;
  align-items: stretch;
  height: 100%;
  min-height: 0;
}

.sc-media-preview__stage {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 32px 64px;
}

.sc-media-preview__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  margin-bottom: 16px;
}

.sc-media-preview__context {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: rgb(255 255 255 / 0.8);
  font-size: 14px;
  font-weight: var(--sc-font-weight-medium, 500);
  line-height: 20px;
}

.sc-media-preview__context sc-icons {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  color: rgb(255 255 255 / 0.8);
}

.sc-media-preview__context-title {
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sc-media-preview__context-separator,
.sc-media-preview__count {
  flex: 0 0 auto;
  color: rgb(255 255 255 / 0.5);
}

.sc-media-preview__context-separator {
  color: rgb(255 255 255 / 0.3);
}

.sc-media-preview__frame {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 0;
}

.sc-media-preview__image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
}

.sc-media-preview__status {
  margin: 0;
  color: rgb(255 255 255 / 0.8);
  font-size: 14px;
  line-height: 22px;
  text-align: center;
}

.sc-media-preview__thumbs {
  display: flex;
  gap: 8px;
  align-items: center;
  width: min(100%, 504px);
  height: 60px;
  margin-top: 16px;
  padding-bottom: 4px;
  overflow-x: auto;
}

.sc-media-preview__thumb {
  position: relative;
  flex: 0 0 auto;
  width: 56px;
  height: 40px;
  padding: 0;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
}

.sc-media-preview__thumb[aria-current='true'] {
  border-color: var(--sc-brand-mint, #def3ef);
}

.sc-media-preview__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sc-media-preview__thumb-type {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(0 0 0 / 0.4);
  color: var(--sc-color-white, #fff);
  pointer-events: none;
}

.sc-media-preview__thumb-type sc-icons {
  width: 14px;
  height: 14px;
}

.sc-media-preview__nav {
  position: absolute;
  top: 50%;
  z-index: 1;
  --sc-button-fg: var(--sc-color-white, #fff);
  --sc-button-min-h: 40px;
  --sc-button-pad-x: 0;
  --sc-button-pad-y: 0;
  --sc-button-icon-width: 20px;
  --sc-button-icon-height: 20px;
}

.sc-media-preview__nav--previous {
  left: 29px;
}

.sc-media-preview__nav--next {
  right: 29px;
}

.sc-media-preview__nav::part(button),
.sc-media-preview__close::part(button) {
  overflow: hidden;
  gap: 0;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.1);
  border-color: rgb(255 255 255 / 0.2);
  color: var(--sc-color-white, #fff);
  font-size: 0;
}

.sc-media-preview__nav::part(button) {
  width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
}

.sc-media-preview__close {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  --sc-button-fg: rgb(255 255 255 / 0.6);
  --sc-button-min-h: 32px;
  --sc-button-pad-x: 0;
  --sc-button-pad-y: 0;
  --sc-button-icon-width: 20px;
  --sc-button-icon-height: 20px;
}

.sc-media-preview__close::part(button) {
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  max-width: 32px;
  max-height: 32px;
  padding: 0;
  background: transparent;
  border-color: transparent;
}

.sc-media-preview__rail {
  display: flex;
  flex: 0 0 320px;
  flex-direction: column;
  width: 320px;
  min-width: 0;
  overflow: auto;
  border-left: 1px solid rgb(255 255 255 / 0.1);
  background: #18173f;
  --sc-button-fg: var(--sc-color-white, #fff);
}

.sc-media-preview__section {
  padding: 20px;
  border-bottom: 1px solid rgb(255 255 255 / 0.1);
}

.sc-media-preview__title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.sc-media-preview__title-cluster {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
}

.sc-media-preview__title {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  color: var(--sc-color-white, #fff);
  font-size: 16px;
  font-weight: var(--sc-font-weight-semibold, 600);
  line-height: 22px;
  overflow-wrap: anywhere;
}

.sc-media-preview__title-edit {
  flex: 0 0 auto;
  --sc-button-fg: rgb(255 255 255 / 0.9);
}

:host([title-editing]) .sc-media-preview__title,
:host([title-editing]) .sc-media-preview__title-edit {
  display: none;
}

.sc-media-preview__title-cluster ::slotted([slot='title-editor']) {
  flex: 1 1 100%;
  width: 100%;
  min-width: 0;
}

.sc-media-preview__company-heading,
.sc-media-preview__location-heading,
.sc-media-preview__description-heading {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.sc-media-preview__company-heading .sc-media-preview__kicker,
.sc-media-preview__location-heading .sc-media-preview__kicker,
.sc-media-preview__description-heading .sc-media-preview__kicker {
  margin: 0;
}

.sc-media-preview__company-edit,
.sc-media-preview__location-edit,
.sc-media-preview__description-edit {
  flex: 0 0 auto;
  --sc-button-fg: rgb(255 255 255 / 0.5);
  --sc-button-icon-width: 14px;
  --sc-button-icon-height: 14px;
}

.sc-media-preview__company-edit::part(button),
.sc-media-preview__location-edit::part(button),
.sc-media-preview__description-edit::part(button) {
  /* 44px hit area around a 14px icon. Negative margin keeps the pencil on the label row. */
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  margin: -14px -15px;
  background: transparent;
  border-color: transparent;
}

.sc-media-preview__description-cluster {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
  margin-top: 4px;
}

.sc-media-preview__description-cluster .sc-media-preview__description {
  flex: 0 1 auto;
  max-width: 100%;
  margin: 0;
  white-space: pre-wrap;
}

:host([description-editing]) .sc-media-preview__description,
:host([description-editing]) .sc-media-preview__description-edit {
  display: none;
}

.sc-media-preview__description-cluster ::slotted([slot='description-editor']) {
  flex: 1 1 100%;
  width: 100%;
  min-width: 0;
}

.sc-media-preview__company-cluster,
.sc-media-preview__location-cluster {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
  margin-top: 4px;
}

.sc-media-preview__company-cluster .sc-media-preview__value,
.sc-media-preview__location-cluster .sc-media-preview__value {
  flex: 0 1 auto;
  max-width: 100%;
  margin: 0;
}

:host([company-editing]) .sc-media-preview__company-cluster .sc-media-preview__value,
:host([company-editing]) .sc-media-preview__company-edit {
  display: none;
}

:host([location-editing]) .sc-media-preview__location-cluster .sc-media-preview__value,
:host([location-editing]) .sc-media-preview__location-edit {
  display: none;
}

.sc-media-preview__company-cluster ::slotted([slot='company-editor']),
.sc-media-preview__location-cluster ::slotted([slot='location-editor']) {
  flex: 1 1 100%;
  width: 100%;
  min-width: 0;
}

.sc-media-preview__type {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.05);
  color: rgb(255 255 255 / 0.5);
  font-size: 12px;
  line-height: 16px;
}

.sc-media-preview__type sc-icons {
  width: 14px;
  height: 14px;
}

.sc-media-preview__subtitle {
  margin: 8px 0 0;
  color: rgb(255 255 255 / 0.5);
  font-size: 12px;
  line-height: 16px;
}

.sc-media-preview__kicker {
  margin: 0;
  color: rgb(255 255 255 / 0.4);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sc-media-preview__value,
.sc-media-preview__description {
  margin: 4px 0 0;
  color: rgb(255 255 255 / 0.8);
  font-size: 14px;
  line-height: 22px;
  overflow-wrap: anywhere;
}

.sc-media-preview__description {
  color: rgb(255 255 255 / 0.75);
}

.sc-media-preview__value--empty {
  color: rgb(255 255 255 / 0.4);
}

.sc-media-preview__private {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
  color: rgb(255 255 255 / 0.8);
  font-size: 14px;
  line-height: 22px;
  --sc-form-check-label: rgb(255 255 255 / 0.85);
  --sc-form-check-focus: #fff;
  --sc-form-check-switch-off: rgb(255 255 255 / 0.28);
  --sc-form-check-switch-on: #fff;
  --sc-form-check-switch-thumb: #fff;
  --sc-form-check-switch-thumb-on: #18173f;
}

.sc-media-preview__private sc-icons {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

.sc-media-preview__private-error {
  color: #fecaca;
  font-size: 13px;
  line-height: 18px;
  margin: 0 0 8px;
}

.sc-media-preview__uploader {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.sc-media-preview__initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--sc-brand-blue, #0c0a3e);
  color: var(--sc-color-white, #fff);
  font-size: 12px;
  font-weight: var(--sc-font-weight-semibold, 600);
  line-height: 16px;
}

.sc-media-preview__uploader-name {
  margin: 0;
  color: var(--sc-color-white, #fff);
  font-size: 14px;
  font-weight: var(--sc-font-weight-medium, 500);
  line-height: 20px;
  overflow-wrap: anywhere;
}

.sc-media-preview__uploader-role {
  margin: 0;
  color: rgb(255 255 255 / 0.4);
  font-size: 12px;
  line-height: 16px;
  overflow-wrap: anywhere;
}

.sc-media-preview__metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.sc-media-preview__facts {
  display: grid;
  gap: 16px;
}

.sc-media-preview__tags-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.sc-media-preview__tags-header .sc-media-preview__kicker {
  margin: 0;
}

.sc-media-preview__tags-header ::slotted([slot='tag-editor']) {
  flex: 0 0 auto;
  width: auto;
  color: rgb(255 255 255 / 0.7);
}

.sc-media-preview__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 10px;
}

.sc-media-preview__editor {
  margin-top: 8px;
}

.sc-media-preview__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
  padding: 20px;
}

.sc-media-preview__actions sc-button {
  width: 100%;
}

.sc-media-preview__actions sc-button::part(button) {
  width: 100%;
}

.sc-media-preview__share-wrap {
  position: relative;
  width: 100%;
}

.sc-media-preview__share-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  left: 0;
  z-index: 2;
  box-sizing: border-box;
  padding: 16px;
  border: 1px solid rgb(255 255 255 / 0.1);
  border-radius: 12px;
  background: #12103a;
  box-shadow: 0 25px 25px rgb(0 0 0 / 0.25);
}

.sc-media-preview__share-kicker {
  margin: 0;
  color: rgb(255 255 255 / 0.5);
  font-size: 12px;
  line-height: 16px;
}

.sc-media-preview__share-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgb(255 255 255 / 0.05);
}

.sc-media-preview__share-url {
  overflow: hidden;
  min-width: 0;
  color: rgb(255 255 255 / 0.6);
  font-size: 12px;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
  user-select: text;
}

.sc-media-preview__share-copy {
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--sc-brand-mint, #def3ef);
  font-family: inherit;
  font-size: 12px;
  font-weight: var(--sc-font-weight-medium, 500);
  line-height: 16px;
  cursor: pointer;
}

.sc-media-preview__share {
  --sc-button-fg: var(--sc-color-white, #fff);
  --sc-button-icon-color: var(--sc-color-white, #fff);
  --sc-button-icon-width: 16px;
  --sc-button-icon-height: 16px;
}

.sc-media-preview__share::part(button) {
  min-height: 40px;
  border-radius: 8px;
  background: #0a0932;
  border-color: transparent;
  color: var(--sc-color-white, #fff);
}

.sc-media-preview__download::part(button) {
  background: #18173f;
  border-color: rgb(255 255 255 / 0.1);
  color: rgb(255 255 255 / 0.8);
}

@media (max-width: 1023px) {
  .sc-media-preview__stage {
    padding: 24px 48px;
  }

  .sc-media-preview__rail {
    flex-basis: 260px;
    width: 260px;
  }

  .sc-media-preview__nav--previous {
    left: 12px;
  }

  .sc-media-preview__nav--next {
    right: 12px;
  }
}

@media (max-width: 767px) {
  .sc-media-preview__layout {
    flex-direction: column;
    overflow: auto;
  }

  .sc-media-preview__stage {
    flex: 0 0 auto;
    min-height: 60dvh;
    padding: 16px;
  }

  .sc-media-preview__rail {
    flex: 1 0 auto;
    width: 100%;
    border-top: 1px solid rgb(255 255 255 / 0.1);
    border-left: 0;
  }

  .sc-media-preview__nav::part(button) {
    width: 44px;
    height: 44px;
    min-height: 44px;
  }
}

/* ── styles/sc-media-upload-attachments.css ── */
/* ScMediaUploadAttachments — inline dropzone, pending file cards, and upload. */

:host {
  display: block;
  width: 100%;
  font-family: var(--sc-font-family-body);
  color: var(--sc-brand-blue);
}

.sc-media-upload-attachments {
  display: flex;
  flex-direction: column;
  gap: var(--sc-space-lg);
  width: 100%;
  min-width: 0;
}

.sc-media-upload-attachments__list {
  display: flex;
  flex-direction: column;
  gap: var(--sc-space-lg);
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sc-media-upload-attachments__add-more {
  --sc-media-upload-dropzone-padding-block: 28px;
  --sc-media-upload-dropzone-padding-inline: 24px;
}

.sc-media-upload-attachments__validation {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--sc-brand-red);
}

.sc-media-upload-attachments__actions {
  display: flex;
  justify-content: flex-end;
}

.sc-media-upload-attachments__uploading {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-width: 0;
  padding-block: var(--sc-space-xl);
}

/* ── styles/sc-media-upload-dropzone.css ── */
/* ScMediaUploadDropzone — empty drop/browse affordance for the media upload wizard.
   Figma: Webapp — New, node 4569:48200 (Select File drop zone). */

:host {
  display: block;
  width: 100%;
  font-family: var(--sc-font-family-body);
  color: var(--sc-brand-blue);
}

.sc-media-upload-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sc-space-lg);
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding: var(--sc-media-upload-dropzone-padding-block, 58px)
    var(--sc-media-upload-dropzone-padding-inline, 34px);
  border: 2px dashed var(--sc-gray-form-border, #d1d5dc);
  border-radius: 14px;
  cursor: pointer;
  text-align: center;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    border-style 160ms ease;
  -webkit-tap-highlight-color: transparent;
}

.sc-media-upload-dropzone:focus-visible {
  outline: 2px solid var(--sc-brand-blue, #0c0a3e);
  outline-offset: 2px;
}

.sc-media-upload-dropzone--dragover {
  border-style: solid;
  border-color: var(--sc-brand-blue, #0c0a3e);
  background: var(--sc-brand-mint, #def3ef);
}

.sc-media-upload-dropzone__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: rgba(12, 10, 62, 0.1);
  color: rgba(12, 10, 62, 0.6);
}

.sc-media-upload-dropzone__icon svg {
  width: 20px;
  height: 20px;
}

.sc-media-upload-dropzone__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.sc-media-upload-dropzone__hint {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: var(--sc-font-weight-medium, 500);
  color: var(--sc-brand-blue, #0c0a3e);
  text-align: center;
}

.sc-media-upload-dropzone__browse {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-skip-ink: none;
}

.sc-media-upload-dropzone__formats {
  margin: 0;
  font-size: 12px;
  line-height: 16px;
  font-weight: var(--sc-font-weight-regular, 400);
  color: var(--sc-blue-muted, #4a5565);
  text-align: center;
}

/* ── styles/sc-media-upload-file-card.css ── */
/* ScMediaUploadFileCard — review-style attachment card (Figma upload 5).
   Thumb + read-only filename, optional editable description, and remove. */

:host {
  display: block;
  width: 100%;
  overflow: visible;
  font-family: var(--sc-font-family-body);
  color: var(--sc-brand-blue);
}

:host([editing]),
:host([editable]) {
  position: relative;
}

:host,
:host *,
:host *::before,
:host *::after {
  box-sizing: border-box;
}

.sc-media-upload-file-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  overflow: visible;
  border: 1px solid var(--sc-gray-form-border, #e5e7eb);
  border-radius: 14px;
  background: var(--sc-white-normal, #fff);
}

:host([joined-footer]) .sc-media-upload-file-card {
  border-radius: 14px 14px 0 0;
}

.sc-media-upload-file-card__header {
  display: flex;
  align-items: center;
  gap: var(--sc-space-lg);
  min-width: 0;
  overflow: hidden;
  padding: var(--sc-space-lg);
  border-bottom: 1px solid var(--sc-gray-form-border, #e5e7eb);
  border-radius: 14px 14px 0 0;
  background: var(--sc-gray-light, #f9fafb);
}

.sc-media-upload-file-card__thumb,
.sc-media-upload-file-card__thumb-placeholder {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 10px;
  object-fit: cover;
  background: var(--sc-gray-form-border, #e5e7eb);
}

.sc-media-upload-file-card__thumb-link {
  flex: 0 0 auto;
  display: block;
  line-height: 0;
}

.sc-media-upload-file-card__file {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.sc-media-upload-file-card__name {
  margin: 0;
  min-width: 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: var(--sc-font-weight-medium, 500);
  color: var(--sc-brand-blue, #0c0a3e);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sc-media-upload-file-card__size {
  margin: 0;
  font-size: 12px;
  line-height: 16px;
  font-weight: var(--sc-font-weight-regular, 400);
  color: var(--sc-blue-muted, #4a5565);
}

.sc-media-upload-file-card__rename {
  display: flex;
  align-items: center;
  gap: 0;
  min-width: 0;
  border: 1px solid var(--sc-gray-form-border, #d1d5dc);
  border-radius: var(--sc-border-radius-md);
  background: var(--sc-white-normal, #fff);
  overflow: hidden;
}

.sc-media-upload-file-card__rename:focus-within {
  outline: 2px solid var(--sc-brand-blue);
  outline-offset: 1px;
}

.sc-media-upload-file-card__rename-input {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  line-height: 20px;
  color: var(--sc-brand-blue, #0c0a3e);
}

.sc-media-upload-file-card__rename-input:focus {
  outline: none;
}

.sc-media-upload-file-card__rename-ext {
  flex: 0 0 auto;
  padding: 10px 12px;
  background: var(--sc-gray-light, #f3f4f6);
  font-size: 14px;
  line-height: 20px;
  color: var(--sc-blue-muted, #4a5565);
  border-left: 1px solid var(--sc-gray-form-border, #d1d5dc);
}

.sc-media-upload-file-card__remove {
  flex: 0 0 auto;
  align-self: center;
}

.sc-media-upload-file-card__meta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  min-width: 0;
  padding: 12px 16px;
}

.sc-media-upload-file-card__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 12px;
}

:host([editing]) .sc-media-upload-file-card__facts,
:host([editable]) .sc-media-upload-file-card__facts {
  display: flex;
  flex-direction: column;
}

.sc-media-upload-file-card__facts .sc-media-upload-file-card__meta-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sc-media-upload-file-card__field {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Overlaying the panel lets a joined footer (tags) paint over the options.
   Keep the list in flow so opening Company/Location grows the card. */
.sc-media-upload-file-card__field sc-search-select::part(panel) {
  position: static;
  inset: auto;
  margin-top: 4px;
}

.sc-media-upload-file-card__title {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--sc-gray-form-border, #d1d5dc);
  border-radius: var(--sc-border-radius-md);
  background: var(--sc-white-normal, #fff);
  font-family: inherit;
  font-size: 14px;
  line-height: 20px;
  color: var(--sc-brand-blue, #0c0a3e);
}

.sc-media-upload-file-card__title:focus {
  outline: 2px solid var(--sc-brand-blue);
  outline-offset: -2px;
}

.sc-media-upload-file-card__title::placeholder {
  color: var(--sc-brand-blue, #0c0a3e);
  opacity: 1;
}

.sc-media-upload-file-card__meta-label {
  margin: 0 0 4px;
  font-size: 12px;
  line-height: 16px;
  font-weight: var(--sc-font-weight-medium, 500);
  color: var(--sc-brand-blue, #0c0a3e);
}

.sc-media-upload-file-card__meta-value {
  margin: 0;
  font-size: 12px;
  line-height: 16px;
  font-weight: var(--sc-font-weight-regular, 400);
  color: var(--sc-blue-muted, #4a5565);
  overflow-wrap: anywhere;
}

.sc-media-upload-file-card__meta-value--muted {
  color: var(--sc-gray-dark, #9ca3af);
}

.sc-media-upload-file-card__private {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 12px;
  line-height: 16px;
  color: var(--sc-brand-blue, #0c0a3e);
}

.sc-media-upload-file-card__private sc-icons {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

.sc-media-upload-file-card__description {
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: 72px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--sc-gray-form-border, #d1d5dc);
  border-radius: var(--sc-border-radius-md);
  background: var(--sc-white-normal, #fff);
  font-family: inherit;
  font-size: 14px;
  line-height: 20px;
  color: var(--sc-brand-blue, #0c0a3e);
  resize: vertical;
}

.sc-media-upload-file-card__description:focus {
  outline: 2px solid var(--sc-brand-blue);
  outline-offset: -2px;
}

.sc-media-upload-file-card__description::placeholder {
  color: var(--sc-gray-dark, #9ca3af);
}

/* ── styles/sc-media-upload-file-row.css ── */
/* ScMediaUploadFileRow — selected/pending file row for the media upload wizard.
   Figma reference: Webapp upload flow (node 4575-25477) — 64px thumb, name,
   size · type label, remove control, and optional error text. */

:host {
  display: block;
  width: 100%;
  font-family: var(--sc-font-family-body);
  color: var(--sc-brand-blue);
}

.sc-media-upload-file-row {
  display: flex;
  align-items: center;
  gap: var(--sc-space-md);
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding: var(--sc-space-md) var(--sc-space-lg);
  border: var(--sc-border-width-thin) solid var(--sc-gray-normal);
  border-radius: var(--sc-border-radius-md);
  background: var(--sc-gray-light);
}

.sc-media-upload-file-row--error {
  border-color: var(--sc-brand-red);
  background: var(--sc-red-light);
}

.sc-media-upload-file-row__thumb-wrap {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: var(--sc-border-radius-sm);
  overflow: hidden;
  background: var(--sc-white-normal);
  border: var(--sc-border-width-thin) solid var(--sc-gray-normal);
}

.sc-media-upload-file-row__thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sc-media-upload-file-row__thumb-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--sc-blue-muted);
}

.sc-media-upload-file-row__thumb-placeholder svg {
  width: 28px;
  height: 28px;
}

.sc-media-upload-file-row__body {
  display: flex;
  flex-direction: column;
  gap: var(--sc-space-xs);
  flex: 1 1 auto;
  min-width: 0;
}

.sc-media-upload-file-row__name {
  margin: 0;
  font-size: var(--sc-font-size-body);
  line-height: 1.25;
  font-weight: var(--sc-font-weight-medium);
  color: var(--sc-blue-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sc-media-upload-file-row__size {
  margin: 0;
  font-size: var(--sc-font-size-caption);
  line-height: 1.2;
  color: var(--sc-gray-dark);
}

.sc-media-upload-file-row__error {
  margin: 0;
  font-size: var(--sc-font-size-caption);
  line-height: 1.2;
  color: var(--sc-brand-red);
}

.sc-media-upload-file-row__remove {
  flex: 0 0 auto;
  align-self: center;
}

/* ── styles/sc-media-upload-wizard.css ── */
/* ScMediaUploadWizard — modal upload flow: Select → Rename → Details → Upload.
   Figma: Webapp — New, node 4569:48200 (upload 1.1). Tags step omitted in v1. */

:host {
  display: none;
  font-family: var(--sc-font-family-body);
  color: var(--sc-brand-blue);
}

:host([open]) {
  display: flex;
  position: fixed;
  inset: 0;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: clamp(var(--sc-space-md), 4vw, var(--sc-space-xl));
  background: rgba(12, 10, 62, 0.35);
  overflow-y: auto;
  z-index: 1060;
}

.sc-media-upload-wizard {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: min(100%, 538px);
  max-height: min(90vh, 640px);
  overflow: hidden;
  border: 1px solid var(--sc-gray-form-border, #e5e7eb);
  border-radius: 16px;
  background: var(--sc-white-normal, #fff);
  box-shadow: 0 25px 50px -12px rgba(12, 10, 62, 0.1);
}

.sc-media-upload-wizard:focus {
  outline: none;
}

/* --- Header ----------------------------------------------------------- */

.sc-media-upload-wizard__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sc-space-md);
  flex-shrink: 0;
  min-width: 0;
  padding: 20px 24px 17px;
  border-bottom: 1px solid var(--sc-gray-light, #f3f4f6);
}

.sc-media-upload-wizard__header-start {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.sc-media-upload-wizard__heading-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--sc-brand-mint, #def3ef);
  color: rgba(12, 10, 62, 0.6);
}

.sc-media-upload-wizard__heading-icon svg {
  width: 16px;
  height: 16px;
}

.sc-media-upload-wizard__title {
  margin: 0;
  min-width: 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: var(--sc-font-weight-medium, 500);
  color: var(--sc-brand-blue, #0c0a3e);
}

.sc-media-upload-wizard__close {
  flex: 0 0 auto;
}

/* --- Compact stepper (labels under circles) --------------------------- */
/* Outer wrap is full-width + justify-center so the shrink-to-fit step group
   sits in the middle of the card (Figma upload 1.1 / node 4569:48211). */

.sc-media-upload-wizard__steps-wrap {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 100%;
  padding: 20px 24px 4px;
  overflow-x: auto;
}

.sc-media-upload-wizard__steps {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex: 0 0 auto;
  gap: 0;
  width: max-content;
  max-width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sc-media-upload-wizard__step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  min-width: 0;
}

.sc-media-upload-wizard__step-circle {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid var(--sc-gray-form-border, #d1d5dc);
  background: var(--sc-gray-light, #f3f4f6);
  font-size: 12px;
  font-weight: var(--sc-font-weight-medium, 500);
  line-height: 16px;
  color: var(--sc-gray-dark, #9ca3af);
}

.sc-media-upload-wizard__step-label {
  margin: 0;
  font-size: 10px;
  line-height: 15px;
  font-weight: var(--sc-font-weight-regular, 400);
  color: var(--sc-gray-dark, #9ca3af);
  white-space: nowrap;
  text-align: center;
}

.sc-media-upload-wizard__step-item--active .sc-media-upload-wizard__step-circle {
  border: 2px solid var(--sc-brand-blue, #0c0a3e);
  background: var(--sc-brand-mint, #def3ef);
  color: var(--sc-brand-blue, #0c0a3e);
}

.sc-media-upload-wizard__step-item--active .sc-media-upload-wizard__step-label {
  color: var(--sc-brand-blue, #0c0a3e);
}

/* Done steps: solid navy circle + white check (Figma upload 5 / 4569:50206). */
.sc-media-upload-wizard__step-item--done .sc-media-upload-wizard__step-circle {
  border: none;
  background: var(--sc-brand-blue, #0c0a3e);
  color: var(--sc-white-normal, #fff);
}

.sc-media-upload-wizard__step-item--done .sc-media-upload-wizard__step-circle svg {
  width: 13px;
  height: 13px;
  display: block;
}

.sc-media-upload-wizard__step-item--done .sc-media-upload-wizard__step-label {
  color: var(--sc-blue-muted, #4a5565);
}

/* Connector is a sibling flex item between steps so circle spacing stays even
   regardless of label width (Figma: 40px line + 4px gutters at circle midline). */
.sc-media-upload-wizard__step-connector {
  flex: 0 0 auto;
  align-self: flex-start;
  width: 40px;
  height: 1px;
  margin: 14px 4px 0;
  padding: 0;
  list-style: none;
  background: var(--sc-gray-form-border, #e5e7eb);
}

.sc-media-upload-wizard__step-connector--done {
  background: var(--sc-brand-blue, #0c0a3e);
}

/* --- Body ------------------------------------------------------------- */

.sc-media-upload-wizard__body {
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  padding: 20px 24px 24px;
  overflow-y: auto;
}

.sc-media-upload-wizard__intro {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.sc-media-upload-wizard__step-heading {
  margin: 0;
  font-size: 18px;
  line-height: 24.75px;
  font-weight: var(--sc-font-weight-medium, 500);
  color: var(--sc-brand-blue, #0c0a3e);
}

.sc-media-upload-wizard__step-description {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: var(--sc-font-weight-regular, 400);
  color: var(--sc-blue-muted, #4a5565);
}

.sc-media-upload-wizard__step {
  display: flex;
  flex-direction: column;
  gap: var(--sc-space-md);
  width: 100%;
  min-width: 0;
}

.sc-media-upload-wizard__validation-error {
  margin: 0;
  padding: var(--sc-space-sm) var(--sc-space-md);
  border-radius: 8px;
  background: var(--sc-red-light);
  border: 1px solid var(--sc-brand-red);
  font-size: var(--sc-font-size-caption);
  line-height: 1.35;
  color: var(--sc-brand-red);
}

.sc-media-upload-wizard__file-list {
  display: flex;
  flex-direction: column;
  gap: var(--sc-space-sm);
  width: 100%;
  min-width: 0;
}

/* Compact “add more” dropzone under an existing file list (multi-select). */
.sc-media-upload-wizard__add-more-dropzone {
  --sc-media-upload-dropzone-padding-block: 28px;
  --sc-media-upload-dropzone-padding-inline: 24px;
}

.sc-media-upload-wizard__rename-list {
  display: flex;
  flex-direction: column;
  gap: var(--sc-space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sc-media-upload-wizard__rename-item {
  display: flex;
  flex-direction: column;
  gap: var(--sc-space-xs);
  min-width: 0;
}

.sc-media-upload-wizard__rename-label,
.sc-media-upload-wizard__field-label {
  font-size: 12px;
  line-height: 1.2;
  font-weight: var(--sc-font-weight-medium, 500);
  color: var(--sc-blue-muted, #0c0a3e);
}

.sc-media-upload-wizard__rename-field {
  display: flex;
  align-items: center;
  gap: 0;
  min-width: 0;
  border: 1px solid var(--sc-gray-form-border, #d1d5dc);
  border-radius: 8px;
  background: var(--sc-white-normal, #fff);
  overflow: hidden;
}

.sc-media-upload-wizard__rename-input {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  line-height: 20px;
  color: var(--sc-brand-blue, #0c0a3e);
}

.sc-media-upload-wizard__rename-input:focus {
  outline: none;
}

.sc-media-upload-wizard__rename-field:focus-within {
  outline: 2px solid var(--sc-brand-blue);
  outline-offset: 1px;
}

.sc-media-upload-wizard__rename-ext {
  flex: 0 0 auto;
  padding: 10px 12px;
  background: var(--sc-gray-light, #f3f4f6);
  font-size: 14px;
  line-height: 20px;
  color: var(--sc-blue-muted, #4a5565);
  border-left: 1px solid var(--sc-gray-form-border, #d1d5dc);
}

.sc-media-upload-wizard__shared-description-toggle {
  display: block;
  width: 100%;
}

.sc-media-upload-wizard__details-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sc-media-upload-wizard__details-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--sc-gray-form-border, #e5e7eb);
  border-radius: 12px;
  background: var(--sc-gray-light, #f9fafb);
}

.sc-media-upload-wizard__details-file {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.sc-media-upload-wizard__details-thumb {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--sc-white-normal, #fff);
  border: 1px solid var(--sc-gray-form-border, #e5e7eb);
}

.sc-media-upload-wizard__details-filename {
  margin: 0;
  min-width: 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: var(--sc-font-weight-medium, 500);
  color: var(--sc-brand-blue, #0c0a3e);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sc-media-upload-wizard__description {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 6rem;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--sc-gray-form-border, #d1d5dc);
  border-radius: 8px;
  background: var(--sc-white-normal, #fff);
  font-family: inherit;
  font-size: 14px;
  line-height: 20px;
  color: var(--sc-brand-blue, #0c0a3e);
  resize: vertical;
}

.sc-media-upload-wizard__details-item .sc-media-upload-wizard__description {
  min-height: 4.5rem;
}

.sc-media-upload-wizard__description:focus {
  outline: 2px solid var(--sc-brand-blue);
  outline-offset: 1px;
}

.sc-media-upload-wizard__date {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--sc-gray-form-border, #d1d5dc);
  border-radius: 8px;
  background: var(--sc-white-normal, #fff);
  font-family: inherit;
  font-size: 14px;
  line-height: 20px;
  color: var(--sc-brand-blue, #0c0a3e);
}

.sc-media-upload-wizard__date:focus {
  outline: 2px solid var(--sc-brand-blue);
  outline-offset: 1px;
}

/* --- Review & upload cards (Figma upload 5 / 4569:50206) --------------- */

.sc-media-upload-wizard__review-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  min-width: 0;
}

.sc-media-upload-wizard__review-card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--sc-gray-form-border, #e5e7eb);
  border-radius: 14px;
  background: var(--sc-white-normal, #fff);
}

.sc-media-upload-wizard__review-header {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  padding: 16px;
  border-bottom: 1px solid var(--sc-gray-form-border, #e5e7eb);
  background: var(--sc-gray-light, #f9fafb);
}

.sc-media-upload-wizard__review-thumb,
.sc-media-upload-wizard__review-thumb-placeholder {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 10px;
  object-fit: cover;
  background: var(--sc-gray-form-border, #e5e7eb);
}

.sc-media-upload-wizard__review-file {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.sc-media-upload-wizard__review-name {
  margin: 0;
  min-width: 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: var(--sc-font-weight-medium, 500);
  color: var(--sc-brand-blue, #0c0a3e);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sc-media-upload-wizard__review-size {
  margin: 0;
  font-size: 12px;
  line-height: 16px;
  font-weight: var(--sc-font-weight-regular, 400);
  color: var(--sc-blue-muted, #4a5565);
}

.sc-media-upload-wizard__review-meta {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
}

.sc-media-upload-wizard__review-meta-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  padding: 12px 16px;
  border-bottom: 1px solid var(--sc-gray-light, #f3f4f6);
}

.sc-media-upload-wizard__review-meta-row:last-child {
  border-bottom: none;
}

.sc-media-upload-wizard__review-meta-icon {
  display: inline-flex;
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  margin-top: 2px;
  color: var(--sc-blue-muted, #4a5565);
}

.sc-media-upload-wizard__review-meta-icon svg {
  width: 13px;
  height: 13px;
  display: block;
}

.sc-media-upload-wizard__review-meta-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.sc-media-upload-wizard__review-meta-label {
  margin: 0;
  font-size: 12px;
  line-height: 16px;
  font-weight: var(--sc-font-weight-medium, 500);
  color: var(--sc-brand-blue, #0c0a3e);
}

.sc-media-upload-wizard__review-meta-value {
  margin: 0;
  font-size: 12px;
  line-height: 16px;
  font-weight: var(--sc-font-weight-regular, 400);
  color: var(--sc-blue-muted, #4a5565);
  overflow-wrap: anywhere;
}

.sc-media-upload-wizard__review-meta-value--muted {
  color: var(--sc-gray-dark, #9ca3af);
  line-height: 19.5px;
}

/* --- Footer actions --------------------------------------------------- */

.sc-media-upload-wizard__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  width: 100%;
  min-width: 0;
  margin-top: auto;
}

.sc-media-upload-wizard__footer--with-back {
  justify-content: space-between;
}

/* Figma Back (node 4569:48985): ghost text + icon, muted gray, no chrome. */
.sc-media-upload-wizard__back {
  --sc-button-fg: var(--sc-blue-muted, #4a5565);
  --sc-button-min-h: 20px;
  --sc-button-pad-y: 0;
  --sc-button-pad-x: 4px;
  --sc-button-gap: 6px;
  --sc-button-fs: 14px;
}

/* Figma upload CTA (4569:50382): mint filled button with navy label + icon.
   Global filled default icon color is brand-green; override for this CTA. */
.sc-media-upload-wizard__start-upload {
  --sc-button-icon-color: var(--sc-brand-blue, #0c0a3e);
}

@media (max-width: 560px) {
  .sc-media-upload-wizard {
    width: 100%;
    max-height: min(92vh, 720px);
  }

  .sc-media-upload-wizard__step-connector {
    width: 24px;
  }
}

/* ── styles/sc-mobile-app-banner.css ── */
/* ScMobileAppBanner — Figma Webapp 4297:24822 */

:host {
  border-radius: 10px;
  /* Shadow on the host so ancestors/inner overflow cannot clip the card edge. */
  box-shadow: 0 0 4px rgb(0 0 0 / 0.25);
  box-sizing: border-box;
  display: block;
  min-width: 0;
  width: 100%;
}

.sc-mobile-app-banner {
  align-items: center;
  background: color-mix(in srgb, var(--sc-brand-mint) 50%, transparent);
  border-radius: 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 15px;
  justify-content: center;
  min-height: 16.5rem;
  min-width: 0;
  padding: 10px;
  text-align: center;
  width: 100%;
}

.sc-mobile-app-banner__icon-box {
  /* Figma 4297:24973 — hard-hat glyph ~33.8×30 inside 52px tile */
  --sc-icon-color: var(--sc-brand-red);
  --sc-icon-size: 33px;
  align-items: center;
  background: var(--sc-white-normal);
  border-radius: 7px;
  color: var(--sc-brand-red);
  display: flex;
  flex-shrink: 0;
  height: 52px;
  justify-content: center;
  width: 52px;
}

.sc-mobile-app-banner__title {
  color: var(--sc-brand-blue);
  font-family: 'Work Sans', sans-serif;
  font-size: 1.625rem;
  font-weight: 400;
  line-height: normal;
  margin: 0;
}

.sc-mobile-app-banner__subtitle {
  color: var(--sc-brand-blue);
  font-family: 'Work Sans', sans-serif;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.5rem;
  margin: 0;
  opacity: 0.8;
}

.sc-mobile-app-banner__stores {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.sc-mobile-app-banner__store {
  display: inline-flex;
  flex-shrink: 0;
  height: 32px;
  line-height: 0;
  text-decoration: none;
  width: 96px;
}

.sc-mobile-app-banner__store:hover,
.sc-mobile-app-banner__store:focus {
  opacity: 0.92;
  text-decoration: none;
}

.sc-mobile-app-banner__store-badge {
  display: block;
  height: 32px;
  width: 96px;
}

/* ── styles/sc-modal.css ── */
/* ScModal — centred modal dialog with alert and exclusion variants */

/* ── Overlay (host) ─────────────────────────────── */

:host {
  display: none;
}

:host([open]) {
  display: flex;
  position: fixed;
  inset: 0;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: clamp(1rem, 4vw, 2rem);
  background: rgba(0, 0, 0, 0.35);
  overflow-y: auto;
  z-index: 1000;
}

/* ── Card ───────────────────────────────────────── */

:host([variant='acknowledgment'][open]),
:host([variant='success'][open]) { background: transparent; }

dialog.sc-modal {
  border: 0;
  margin: auto;
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
}
dialog.sc-modal:not([open]) { display: none; }
dialog.sc-modal::backdrop { background: rgb(0 0 0 / 0.35); }
dialog.sc-modal--acknowledgment { width: min(824px, calc(100% - 32px)); }
dialog.sc-modal--success { width: min(600px, calc(100% - 32px)); padding-block: 60px; }
.sc-modal--acknowledgment .sc-modal__heading { max-width: 632px; }
.sc-modal--acknowledgment .sc-modal__message { max-width: 744px; white-space: pre-line; }
.sc-modal--success .sc-modal__message { max-width: 230px; }
.sc-modal__flow-actions { display: flex; flex-direction: column; align-items: center; gap: var(--sc-space-md); }
.sc-modal__celebration { width: 192px; height: 143px; }
.sc-modal__celebration svg { width: 100%; height: 100%; }

.sc-modal {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 1.875rem);
  width: min(100%, 37.5rem);
  border-radius: 20px;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
  /* White base with a subtle mint wash (10% opacity) */
  background-color: var(--sc-white-normal, #fff);
  background-image: linear-gradient(
    90deg,
    rgba(222, 243, 239, 0.1) 0%,
    rgba(222, 243, 239, 0.1) 100%
  );
  color: var(--sc-brand-blue);
  font-family: var(--sc-font-family-body);
  padding: clamp(1.5rem, 5vw, 2.5rem);
}

.sc-modal--alert {
  justify-content: center;
  min-height: 25rem;
}

.sc-modal--exclusion {
  padding-block: clamp(1.5rem, 6vw, 3.75rem);
}

/* ── Header section ─────────────────────────────── */

.sc-modal__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

/* ── Icon box (shared with ScInfoCard) ──────────── */

.sc-modal__icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  /* #eefcfa — very light mint */
  background-color: #eefcfa;
  border-radius: 7px;
  padding: 3.5px;
  box-sizing: border-box;
  flex-shrink: 0;
}

.sc-modal__icon {
  font-size: 28px;
  line-height: 1;
}

/* ── Heading ─────────────────────────────────────── */

.sc-modal__heading {
  margin: 0;
  font-family: var(--sc-font-family-body);
  font-weight: var(--sc-font-weight-regular);
  font-size: clamp(1.5rem, 1.35rem + 0.5vw, 1.625rem);
  line-height: normal;
  text-align: center;
  max-width: min(100%, 31.25rem);
}

/* ── Body message (alert) ───────────────────────── */

.sc-modal__message {
  margin: 0;
  font-weight: var(--sc-font-weight-regular);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  line-height: 24px;
  text-align: center;
  max-width: min(100%, 18.0625rem);
  opacity: 0.8;
}

/* ── Exclusion title with italic subject ────────── */

.sc-modal__exclusion-heading {
  margin: 0;
  font-weight: var(--sc-font-weight-regular);
  font-size: clamp(1.5rem, 1.35rem + 0.5vw, 1.625rem);
  line-height: normal;
  text-align: center;
  max-width: min(100%, 31.25rem);
}

.sc-modal__exclusion-heading em {
  font-style: italic;
}

/* ── Textarea (exclusion) ───────────────────────── */

.sc-modal__textarea {
  all: unset;
  box-sizing: border-box;
  display: block;
  width: 100%;
  max-width: 31.25rem;
  min-height: 6.25rem;
  border: 2px solid rgba(12, 10, 62, 0.2);
  border-radius: var(--sc-border-radius-md);
  padding: var(--sc-space-md);
  font-family: var(--sc-font-family-body);
  font-weight: var(--sc-font-weight-regular);
  font-size: var(--sc-font-size-body);
  line-height: 24px;
  color: rgba(10, 10, 10, 0.5);
  resize: none;
}

.sc-modal__textarea::placeholder {
  color: rgba(10, 10, 10, 0.5);
}

.sc-modal__textarea:focus {
  outline: none;
  border-color: rgba(12, 10, 62, 0.5);
  color: var(--sc-brand-blue);
}

/* ── Actions ────────────────────────────────────── */

.sc-modal__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  width: 100%;
  max-width: 31.25rem;
}

/* ── Primary CTA button (pill) ──────────────────── */

.sc-modal__cta {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  padding: 7px 18px 7px 15px;
  border: 0.777px solid rgba(12, 10, 62, 0.3);
  border-radius: var(--sc-border-radius-pill);
  cursor: pointer;
  font-family: var(--sc-font-family-body);
  font-weight: var(--sc-font-weight-regular);
  font-size: var(--sc-font-size-label);
  line-height: 18px;
  color: var(--sc-black-normal);
  text-align: center;
}

.sc-modal__cta:hover {
  border-color: rgba(12, 10, 62, 0.6);
}

.sc-modal__cta-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 15px;
  overflow: hidden;
  flex-shrink: 0;
}

.sc-modal__cta-icon svg {
  display: block;
}

/* ── Cancel link ────────────────────────────────── */

.sc-modal__cancel {
  all: unset;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 5px 4px;
  border-bottom: 1px solid var(--sc-brand-blue);
  cursor: pointer;
  font-family: var(--sc-font-family-body);
  font-weight: var(--sc-font-weight-medium);
  font-size: var(--sc-font-size-caption);
  line-height: normal;
  color: var(--sc-brand-blue);
  text-align: center;
}

.sc-modal__cancel-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 15px;
  overflow: hidden;
  flex-shrink: 0;
}

.sc-modal__cancel-icon svg {
  display: block;
}

@media (max-width: 767px) {
  .sc-modal--alert {
    min-height: 0;
  }
}

/* ── Form variant ──────────────────────────────────
   Header (title + ×) on top, slotted body in the middle, slotted footer at the
   bottom. Consumers usually wrap the slotted body in their own ``<form>`` so
   submit-button clicks post natively. The card is left-aligned (unlike alert
   / exclusion which center everything) so labels and inputs read naturally. */

.sc-modal--form {
  align-items: stretch;
  gap: var(--sc-space-lg, 16px);
  width: min(100%, 32rem);
  padding: var(--sc-space-xl, 20px);
}

.sc-modal--form-wide {
  width: min(100%, 48rem);
}

.sc-modal__form-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sc-space-md, 12px);
  width: 100%;
}

.sc-modal__form-heading {
  margin: 0;
  font-family: var(--sc-font-family-body);
  font-weight: var(--sc-font-weight-semibold, 600);
  font-size: clamp(1.125rem, 1rem + 0.4vw, 1.25rem);
  line-height: 1.4;
  text-align: left;
  max-width: none;
  color: var(--sc-brand-blue, #0C0A3E);
}

.sc-modal__form-close {
  all: unset;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  color: var(--sc-blue-muted, #374151);
  cursor: pointer;
  flex-shrink: 0;
  /* Keeps the × at the right edge on a heading-less modal, where it is the
     header's only child and ``space-between`` would otherwise leave it left. */
  margin-inline-start: auto;
}

.sc-modal__form-close:hover {
  background: var(--sc-gray-light, #F9FAFC);
  color: var(--sc-brand-blue, #0C0A3E);
}

.sc-modal__form-close:focus-visible {
  outline: 2px solid var(--sc-brand-blue, #0C0A3E);
  outline-offset: 2px;
}

.sc-modal__form-close span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Scrolls by default so a long form stays inside the viewport. A dialog whose content
   opens a floating panel (a combobox, a date picker) is clipped by that scroll box, so
   both are exposed: set --sc-modal-form-body-overflow to `visible` on the sc-modal host
   to let the panel escape. Only worth doing for a form short enough not to need the
   scroll in the first place. */
.sc-modal__form-body {
  display: flex;
  flex-direction: column;
  gap: var(--sc-space-md, 12px);
  width: 100%;
  max-height: var(--sc-modal-form-body-max-height, 70vh);
  overflow-y: var(--sc-modal-form-body-overflow, auto);
}

.sc-modal__form-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sc-space-sm, 8px);
  flex-wrap: wrap;
  width: 100%;
  border-top: 1px solid var(--sc-gray-normal, #E8E7EC);
  padding-top: var(--sc-space-md, 12px);
}

/* Hide footer chrome when no slotted children. CSS alone can't detect slotted
   light-DOM content (assigned nodes are not slot children, so ``:empty`` /
   ``:has()`` never match) — the component checks its light DOM at render time
   and tags the footer with this class instead. */
.sc-modal__form-footer--empty {
  display: none;
}

/* ── styles/sc-money-input.css ── */
/* ScMoneyInput — sc-form-input's field with the $ before the amount.

   The field takes sc-form-input.css; the $ sits where its leading icon would, as
   sc-phone-input's +1 does. */

.sc-money-input__currency {
  font-size: var(--sc-font-size-label, 14px);
  line-height: 20px;
}

.sc-form-input__control--disabled .sc-money-input__currency {
  color: inherit;
}

/* ── styles/sc-month-picker.css ── */
:host {
  display: block;
  font-family: var(--sc-font-family-body, 'Work Sans'), sans-serif;
  color: var(--sc-brand-blue, #0C0A3E);
}

.sc-month-picker {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

/* Matches the label of sc-date-picker, the field this one sits beside. */
.sc-month-picker__label {
  margin-bottom: var(--sc-space-xs, 4px);
  padding: 0;
  font-size: 13px;
  font-weight: var(--sc-font-weight-medium, 500);
  color: var(--sc-blue-muted, #374151);
}

.sc-month-picker__label-required {
  margin-left: 2px;
  color: var(--sc-brand-red, #C0133D);
}

/* Year then Month, as on the Monthly Reports screen. The bases fit both on one row in a quarter of
   a desktop page ("2026" and "September"); they stack only when there is no room. */
.sc-month-picker__selects {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sc-space-sm, 8px);
}

.sc-month-picker__year {
  flex: 1 1 96px;
  min-width: 0;
}

.sc-month-picker__month {
  flex: 2 1 136px;
  min-width: 0;
}

.sc-month-picker__help,
.sc-month-picker__error {
  margin-top: var(--sc-space-xs, 4px);
  font-size: var(--sc-font-size-caption, 12px);
  line-height: 16px;
}

.sc-month-picker__help {
  color: var(--sc-blue-muted, #374151);
}

.sc-month-picker__error {
  color: var(--sc-brand-red, #C0133D);
}

/* ── styles/sc-multi-doc-drop-zone.css ── */
/* ScMultiDocDropZone — multi-file drop area below the per-kind cards.
 *
 * Visual: dashed border in the wizard's blue, larger and emptier than the
 * per-kind cards so it clearly reads as "drop zone, not action card". The
 * file list below shows live status per file as classification + upload
 * progresses.
 */
:host {
  display: block;
}

.sc-multi-drop {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  padding: 24px;
  border: 2px dashed rgba(12, 10, 62, 0.3);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.6);

  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.sc-multi-drop:focus-visible {
  outline: 2px solid #0c0a3e;
  outline-offset: 2px;
}

.sc-multi-drop--dragover {
  border-style: solid;
  border-color: #0c0a3e;
  background: rgba(12, 10, 62, 0.06);
}

.sc-multi-drop__hint {
  font-family: var(--sc-font-family-body, 'Work Sans'), sans-serif;
  font-size: 14px;
  line-height: 21px;
  color: rgba(12, 10, 62, 0.8);
  text-align: center;
}

.sc-multi-drop__hint strong {
  color: #0c0a3e;
  font-weight: 600;
}

/* --- Status list ----------------------------------------------------- */
.sc-multi-drop__list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sc-multi-drop__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 6px;
  background: #ffffff;
  border: 1px solid rgba(12, 10, 62, 0.12);
  font-family: var(--sc-font-family-body, 'Work Sans'), sans-serif;
  font-size: 13px;
}

.sc-multi-drop__item-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #0c0a3e;
  font-weight: 500;
}

.sc-multi-drop__item-status {
  flex: 0 0 auto;
  color: rgba(12, 10, 62, 0.6);
  font-size: 12px;
}

.sc-multi-drop__item--classifying .sc-multi-drop__item-status,
.sc-multi-drop__item--uploading .sc-multi-drop__item-status {
  color: #0c0a3e;
  font-style: italic;
}

.sc-multi-drop__item--success {
  border-color: #10b981;
  background: #f0fdf4;
}

.sc-multi-drop__item--success .sc-multi-drop__item-status {
  color: #10b981;
  font-weight: 500;
}

.sc-multi-drop__item--error {
  border-color: #c0133d;
  background: #fff5f7;
}

.sc-multi-drop__item--error .sc-multi-drop__item-status {
  color: #c0133d;
  font-weight: 500;
}

.sc-multi-drop__clear {
  margin-top: 8px;
  padding: 6px 12px;
  border: 1px solid rgba(12, 10, 62, 0.2);
  border-radius: 5px;
  background: #ffffff;
  color: #0c0a3e;
  font-family: var(--sc-font-family-body, 'Work Sans'), sans-serif;
  font-size: 13px;
  cursor: pointer;
}

.sc-multi-drop__clear:hover {
  background: rgba(12, 10, 62, 0.04);
}

/* ── styles/sc-multi-select-chips.css ── */
/* ScMultiSelectChips — searchable checkbox-list alternative to <select multiple>.
 *
 * Visual language matches the onboarding wizard's other surfaces (rounded-6
 * card, teal selected-state pill). The component is intentionally container-
 * agnostic so it can drop into any form layout.
 */
:host {
  display: block;
}

.sc-multi-select-chips {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid rgba(12, 10, 62, 0.2);
  border-radius: 6px;
  background: var(--sc-color-white, #ffffff);
  padding: 10px;
}

.sc-multi-select-chips__header {
  display: flex;
  gap: 8px;
  align-items: center;
}

.sc-multi-select-chips__search {
  flex: 1 1 auto;
  min-width: 0;
  padding: 6px 10px;
  border: 1px solid rgba(12, 10, 62, 0.2);
  border-radius: 5px;
  font-size: 14px;
  font-family: var(--sc-font-family-body, 'Work Sans'), sans-serif;
}

.sc-multi-select-chips__search:focus {
  outline: 2px solid #0c0a3e;
  outline-offset: -1px;
}

.sc-multi-select-chips__count {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 500;
  color: #0c0a3e;
  background: #def3ef;
  padding: 4px 10px;
  border: 0;
  border-radius: 999px;
  white-space: nowrap;
  /* Clickable badge: scrolls the list back to the pinned selected rows. */
  cursor: pointer;
  font-family: inherit;
  transition: filter 120ms ease;
}

.sc-multi-select-chips__count:not([data-empty='true']):hover {
  filter: brightness(0.96);
}

.sc-multi-select-chips__count[data-empty='true'] {
  background: rgba(12, 10, 62, 0.08);
  color: rgba(12, 10, 62, 0.6);
  cursor: default;
}

/* Opt-in bulk actions (select-all attribute): link-style buttons acting on the
   filtered rows. */
.sc-multi-select-chips__bulk-actions {
  display: flex;
  gap: 14px;
  align-items: center;
}

.sc-multi-select-chips__bulk-action {
  background: none;
  border: 0;
  padding: 0;
  font-size: 12px;
  font-weight: 500;
  font-family: var(--sc-font-family-body, 'Work Sans'), sans-serif;
  color: var(--sc-brand-blue, #0c0a3e);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.sc-multi-select-chips__bulk-action:hover:not(:disabled) {
  opacity: 0.75;
}

.sc-multi-select-chips__bulk-action:disabled {
  color: rgba(12, 10, 62, 0.35);
  cursor: default;
  text-decoration: none;
}

.sc-multi-select-chips__bulk-action:focus-visible {
  outline: 2px solid var(--sc-brand-blue, #0c0a3e);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Opt-in free-text entry (allow-custom attribute): sits above the list and reads
   as one more row, so adding a value looks like picking one. */
.sc-multi-select-chips__add {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 4px;
  background: none;
  text-align: left;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--sc-brand-blue, #0c0a3e);
  font-family: var(--sc-font-family-body, 'Work Sans'), sans-serif;
  overflow-wrap: anywhere;
}

.sc-multi-select-chips__add:hover {
  background: rgba(12, 10, 62, 0.04);
}

.sc-multi-select-chips__add:focus-visible {
  outline: 2px solid var(--sc-brand-blue, #0c0a3e);
  outline-offset: -2px;
}

.sc-multi-select-chips__add-icon {
  display: inline-flex;
  flex: 0 0 auto;
  margin-top: 3px;
}

/* Wrapper anchors the bottom fade hint that signals more scrollable options. */
.sc-multi-select-chips__list-wrap {
  position: relative;
}

.sc-multi-select-chips__list-wrap::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 28px;
  pointer-events: none;
  border-radius: 0 0 6px 6px;
  background: linear-gradient(to top, var(--sc-color-white, #ffffff), rgba(255, 255, 255, 0));
  opacity: 0;
  transition: opacity 120ms ease;
}

.sc-multi-select-chips__list-wrap[data-fade='true']::after {
  opacity: 1;
}

.sc-multi-select-chips__list {
  /* Pages can raise the cap by setting --sc-multi-select-chips-list-max-height on the host. */
  max-height: var(--sc-multi-select-chips-list-max-height, 240px);
  overflow-y: auto;
  margin: 0;
  padding: 4px 2px;
  list-style: none;
  border-top: 1px solid rgba(12, 10, 62, 0.08);
  /* Keep the scrollbar permanently visible (not hover-only) so the list reads
     as scrollable — Joyce QA (issues #4919 / #5293). We intentionally do NOT set
     `scrollbar-width`/`scrollbar-color`: those force Chromium's thin overlay
     scrollbar (hover-only) and disable the always-on `::-webkit-scrollbar`
     styling below. `scrollbar-gutter` reserves the track so layout is stable. */
  scrollbar-gutter: stable;
}

.sc-multi-select-chips__list::-webkit-scrollbar {
  width: 10px;
}

.sc-multi-select-chips__list::-webkit-scrollbar-track {
  background: transparent;
}

.sc-multi-select-chips__list::-webkit-scrollbar-thumb {
  background: rgba(12, 10, 62, 0.28);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}

.sc-multi-select-chips__list::-webkit-scrollbar-thumb:hover {
  background: rgba(12, 10, 62, 0.45);
  background-clip: padding-box;
}

.sc-multi-select-chips__row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.4;
  color: #0c0a3e;
  font-family: var(--sc-font-family-body, 'Work Sans'), sans-serif;
}

.sc-multi-select-chips__row:hover {
  background: rgba(12, 10, 62, 0.04);
}

.sc-multi-select-chips__row[data-selected='true'] {
  /* Joyce QA (issue #4919): selected rows use the brand mint #DEF3EF, not the
     prior green #F0FDF4. The pill row is informational, not a success state —
     reserving green for true positive feedback keeps the semantic palette
     consistent. */
  background: #def3ef;
}

.sc-multi-select-chips__checkbox {
  appearance: none;
  background: var(--sc-white-normal, #fff);
  border: 1px solid var(--sc-brand-blue, #0c0a3e);
  border-radius: 3px;
  box-sizing: border-box;
  flex: 0 0 auto;
  height: 12px;
  margin: 3px 0 0;
  /* Figma SelectorSquare 244:1563 — 12×12 outer, 6×6 inner (25% inset). */
  position: relative;
  width: 12px;
}

/* Unchecked: faint inner square border (opacity 20% brand blue). */
.sc-multi-select-chips__checkbox::after {
  border: 1px solid var(--sc-brand-blue, #0c0a3e);
  border-radius: 1px;
  box-sizing: border-box;
  content: '';
  height: 6px;
  left: 50%;
  opacity: 0.2;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 6px;
}

/* Checked: solid inner square fill, white gutter to the outer border. */
.sc-multi-select-chips__checkbox:checked {
  background: var(--sc-white-normal, #fff);
}

.sc-multi-select-chips__checkbox:checked::after {
  background: var(--sc-brand-blue, #0c0a3e);
  border: 0;
  opacity: 1;
}

.sc-multi-select-chips__checkbox:focus-visible {
  outline: 2px solid var(--sc-brand-blue, #0c0a3e);
  outline-offset: 2px;
}

/* Flush appearance for filter sheets — parent section owns borders/padding. */
:host([appearance='plain']) .sc-multi-select-chips {
  border: 0;
  border-radius: 0;
  gap: 8px;
  padding: 0;
}

:host([appearance='plain']) .sc-multi-select-chips__list {
  border-top: 0;
  max-height: var(--sc-multi-select-chips-list-max-height, 240px);
  padding: 0;
}

:host([appearance='plain']) .sc-multi-select-chips__row {
  align-items: center;
  border-radius: 0;
  color: var(--sc-blue-muted, #4a5565);
  font-size: 13px;
  font-weight: var(--sc-font-weight-regular, 400);
  gap: 8px;
  line-height: 19.5px;
  padding: 0;
}

:host([appearance='plain']) .sc-multi-select-chips__row-label {
  color: var(--sc-blue-muted, #4a5565);
  font-family: var(--sc-font-family-body, 'Work Sans'), sans-serif;
  font-size: 13px;
  font-weight: var(--sc-font-weight-regular, 400);
  line-height: 19.5px;
}

:host([appearance='plain']) .sc-multi-select-chips__row + .sc-multi-select-chips__row {
  margin-top: 8px;
}

:host([appearance='plain']) .sc-multi-select-chips__row:hover {
  background: transparent;
}

:host([appearance='plain']) .sc-multi-select-chips__row[data-selected='true'] {
  background: transparent;
}

:host([appearance='plain']) .sc-multi-select-chips__checkbox {
  margin-top: 0;
}

:host([appearance='plain']) .sc-multi-select-chips__list-wrap::after {
  border-radius: 0;
}

.sc-multi-select-chips__empty {
  align-items: center;
  color: rgba(12, 10, 62, 0.6);
  display: flex;
  flex-direction: column;
  font-size: 13px;
  gap: 12px;
  justify-content: center;
  padding: 24px 10px 16px;
  text-align: center;
}

.sc-multi-select-chips__empty-icon {
  color: var(--sc-brand-blue, #0c0a3e);
  display: block;
  height: auto;
  max-width: 72px;
  width: 45%;
}

.sc-multi-select-chips__empty-icon svg {
  display: block;
  height: auto;
  max-width: 100%;
  width: 100%;
}

.sc-multi-select-chips__empty-label {
  color: var(--sc-blue-muted, #4a5565);
  font-family: var(--sc-font-family-body, 'Work Sans'), sans-serif;
  font-size: 13px;
  font-weight: var(--sc-font-weight-regular, 400);
  line-height: 19.5px;
  margin: 0;
}

/* ── styles/sc-multi-select-dropdown.css ── */
/* ScMultiSelectDropdown — compact trigger + floating panel multi-select.
 *
 * The host stays a normal block in the document flow; the panel is absolute-
 * positioned beneath the trigger and overlaps subsequent content (no layout
 * shift on open / close). Sizing is driven by the consumer container so the
 * component drops into existing grid columns.
 */
:host {
  display: block;
  position: relative;
  font-family: var(--sc-font-family-body, 'Work Sans'), sans-serif;
}

.sc-msd {
  position: relative;
}

/* ── Trigger ─────────────────────────────── */
.sc-msd__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sc-space-sm, 8px);
  width: 100%;
  min-height: 32px;
  padding: 4px 8px 4px 10px;
  background: var(--sc-white-normal, #ffffff);
  border: 1px solid var(--sc-blue-alpha30, rgba(12, 10, 62, 0.3));
  border-radius: var(--sc-radius-sm, 5px);
  font: inherit;
  color: var(--sc-brand-blue, #0c0a3e);
  cursor: pointer;
  text-align: left;
}

.sc-msd__trigger:hover {
  border-color: var(--sc-brand-blue, #0c0a3e);
}

.sc-msd__trigger:focus-visible {
  outline: 2px solid rgb(12 10 62 / 0.35);
  outline-offset: 1px;
}

.sc-msd[data-open='true'] .sc-msd__trigger {
  border-color: var(--sc-brand-blue, #0c0a3e);
}

/* size="md": sc-form-select's default control (38px, 10px radius, light border, 14px text),
   so the trigger lines up with the selects in one form row. */
:host([size='md']) .sc-msd__trigger {
  min-height: 38px;
  padding: 6px 12px;
  border-color: var(--sc-gray-normal, #e8e7ec);
  border-radius: 10px;
}

:host([size='md']) .sc-msd__trigger:hover {
  border-color: var(--sc-blue-alpha30, rgba(12, 10, 62, 0.3));
}

:host([size='md']) .sc-msd[data-open='true'] .sc-msd__trigger {
  border-color: var(--sc-brand-blue, #0c0a3e);
}

:host([size='md']) .sc-msd__placeholder,
:host([size='md']) .sc-msd__count {
  font-size: var(--sc-font-size-label, 14px);
}

.sc-msd__trigger-content {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}

.sc-msd__placeholder {
  color: var(--sc-blue-muted, #6b7280);
  font-size: var(--sc-font-size-caption, 12px);
}

.sc-msd__caret {
  flex-shrink: 0;
  color: var(--sc-blue-muted, #6b7280);
  font-size: 10px;
  transition: transform 0.15s ease;
}

.sc-msd[data-open='true'] .sc-msd__caret {
  transform: rotate(180deg);
}

/* ── Chip rendering inside trigger ───────── */
.sc-msd__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
}

.sc-msd__chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 4px 2px 8px;
  background: var(--sc-blue-alpha10, rgba(12, 10, 62, 0.08));
  border-radius: 999px;
  font-size: var(--sc-font-size-caption, 12px);
  line-height: 16px;
  max-width: 100%;
}

.sc-msd__chip-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 12rem;
}

.sc-msd__chip-remove,
.sc-msd__clear {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: var(--sc-blue-muted, #6b7280);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0;
}

.sc-msd__chip-remove:hover,
.sc-msd__clear:hover {
  background: rgb(12 10 62 / 0.08);
  color: var(--sc-brand-blue, #0c0a3e);
}

.sc-msd__count {
  font-size: var(--sc-font-size-caption, 12px);
  color: var(--sc-brand-blue, #0c0a3e);
}

/* ── Floating panel ──────────────────────── */
.sc-msd__panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 1080;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--sc-white-normal, #ffffff);
  border: 1px solid var(--sc-blue-alpha30, rgba(12, 10, 62, 0.3));
  border-radius: var(--sc-radius-sm, 6px);
  box-shadow:
    0 2px 6px rgb(12 10 62 / 0.08),
    0 8px 24px rgb(12 10 62 / 0.12);
  padding: 8px;
  max-height: 300px;
}

.sc-msd__panel-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 4px;
}

/* Opt-in bulk actions (select-all attribute): link-style buttons acting on the
   filtered rows, as on sc-multi-select-chips. */
.sc-msd__bulk-actions {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 0 2px;
}

.sc-msd__bulk-action {
  background: none;
  border: 0;
  padding: 0;
  font-size: 12px;
  font-weight: 500;
  font-family: var(--sc-font-family-body, 'Work Sans'), sans-serif;
  color: var(--sc-brand-blue, #0c0a3e);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.sc-msd__bulk-action:hover:not(:disabled) {
  opacity: 0.75;
}

.sc-msd__bulk-action:disabled {
  color: rgba(12, 10, 62, 0.35);
  cursor: default;
  text-decoration: none;
}

.sc-msd__bulk-action:focus-visible {
  outline: 2px solid var(--sc-brand-blue, #0c0a3e);
  outline-offset: 2px;
  border-radius: 2px;
}

.sc-msd__search {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--sc-blue-alpha20, rgba(12, 10, 62, 0.2));
  border-radius: var(--sc-radius-sm, 5px);
  font: inherit;
  font-size: var(--sc-font-size-caption, 13px);
  box-sizing: border-box;
}

.sc-msd__search:focus {
  outline: 2px solid rgb(12 10 62 / 0.35);
  outline-offset: -1px;
}

.sc-msd__list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  max-height: 240px;
}

.sc-msd__row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--sc-radius-sm, 4px);
  cursor: pointer;
  font-size: var(--sc-font-size-caption, 13px);
  color: var(--sc-brand-blue, #0c0a3e);
}

.sc-msd__row:hover {
  background: var(--sc-gray-light, #f9fafc);
}

.sc-msd__row[data-selected='true'] {
  background: var(--sc-blue-alpha10, rgba(12, 10, 62, 0.06));
  font-weight: 500;
}

.sc-msd__checkbox {
  margin: 0;
  cursor: pointer;
}

/* At ``max``, the rows not picked can't be. */
.sc-msd__row[data-disabled='true'] {
  opacity: 0.5;
  cursor: not-allowed;
}

.sc-msd__row[data-disabled='true'] .sc-msd__checkbox {
  cursor: not-allowed;
}

.sc-msd__max-note {
  margin: 0;
  padding: 6px 8px;
  font-size: var(--sc-font-size-caption, 13px);
  color: var(--sc-blue-muted, #6b7280);
}

.sc-msd__max-note[data-reached='true'] {
  color: var(--sc-brand-red, #C0133D);
}

.sc-msd__row-label {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sc-msd__empty {
  padding: 12px 8px;
  text-align: center;
  color: var(--sc-blue-muted, #6b7280);
  font-size: var(--sc-font-size-caption, 13px);
}

/* ── styles/sc-nav-search.css ── */
/* ScNavSearch — always-visible typeahead for navigating to href targets. */

:host {
  display: block;
  min-width: 0;
  position: relative;
  width: 100%;
  font-family: var(--sc-font-family-body, "Work Sans"), sans-serif;
}

.sc-nav-search {
  position: relative;
  width: 100%;
}

.sc-nav-search__input-wrap {
  position: relative;
  width: 100%;
}

.sc-nav-search__input {
  background: var(--sc-white-normal, #ffffff);
  border: 1px solid var(--sc-gray-form-border, #d1d5dc);
  border-radius: 10px;
  box-sizing: border-box;
  color: var(--sc-brand-blue, #0c0a3e);
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  height: 40px;
  line-height: normal;
  padding: 8px 16px 8px 40px;
  width: 100%;
}

.sc-nav-search__input::placeholder {
  color: rgb(10 10 10 / 0.5);
  opacity: 1;
}

.sc-nav-search__input:focus {
  border-color: var(--sc-brand-blue, #0c0a3e);
  outline: 2px solid rgb(12 10 62 / 0.18);
  outline-offset: 0;
}

.sc-nav-search__search-icon {
  color: var(--sc-brand-blue, #0c0a3e);
  height: 20px;
  left: 12px;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
}

.sc-nav-search__panel {
  background: var(--sc-white-normal, #ffffff);
  border: 1px solid var(--sc-gray-form-border, #d1d5dc);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgb(12 10 62 / 0.12);
  box-sizing: border-box;
  left: 0;
  margin-top: 4px;
  max-height: min(320px, 50vh);
  overflow-y: auto;
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 20;
}

.sc-nav-search__list {
  list-style: none;
  margin: 0;
  padding: 6px;
}

.sc-nav-search__option {
  background: transparent;
  border: 0;
  border-radius: 8px;
  box-sizing: border-box;
  color: var(--sc-brand-blue, #0c0a3e);
  cursor: pointer;
  display: block;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  padding: 10px 12px;
  text-align: left;
  width: 100%;
}

.sc-nav-search__option:hover,
.sc-nav-search__option[data-active='true'] {
  background: rgb(12 10 62 / 0.06);
}

.sc-nav-search__option:focus-visible {
  outline: 2px solid rgb(12 10 62 / 0.35);
  outline-offset: -2px;
}

.sc-nav-search__empty {
  color: var(--sc-blue-muted, #6b7280);
  font-size: 13px;
  margin: 0;
  padding: 14px 12px;
}

.sc-nav-search__group-label {
  color: var(--sc-blue-muted, #6b7280);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin: 0;
  padding: 10px 12px 2px;
  text-transform: uppercase;
}

/* ── styles/sc-notification-filters.css ── */
/* ScNotificationFilters — search bar for the notifications panel header. */

:host {
  display: block;
  width: 100%;
}

.sc-notification-filters {
  box-sizing: border-box;
  padding: 10px 10px 0;
  width: 100%;
}

.sc-notification-filters__search-wrap {
  position: relative;
  width: 100%;
}

.sc-notification-filters__search {
  background: rgb(12 10 62 / 0.05);
  border: 0;
  border-radius: 3px;
  box-sizing: border-box;
  color: var(--sc-brand-blue, #0c0a3e);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  height: 30px;
  line-height: normal;
  padding: 6px 32px 6px 10px;
  width: 100%;
}

.sc-notification-filters__search::placeholder {
  color: rgb(12 10 62 / 0.2);
  opacity: 1;
}

.sc-notification-filters__search:focus {
  outline: 2px solid rgb(12 10 62 / 0.18);
  outline-offset: 0;
}

.sc-notification-filters__search-icon {
  color: var(--sc-brand-blue, #0c0a3e);
  height: 11px;
  pointer-events: none;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
}

/* ── styles/sc-notification-item.css ── */
/* ScNotificationItem — single pending-task or compliance-alert card. */

:host {
  display: block;
  width: 100%;
}

.sc-notification-item {
  background: rgb(222 243 239 / 0.5);
  border-radius: 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 18px;
  mix-blend-mode: multiply;
  padding: 10px;
  width: 100%;
}

:host([hidden]) {
  display: none;
}

.sc-notification-item__header {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.sc-notification-item__due {
  align-items: center;
  color: rgb(12 10 62 / 0.6);
  display: inline-flex;
  font-size: 12px;
  gap: 4px;
  line-height: 16px;
}

.sc-notification-item__due sc-icons,
.sc-notification-item__action sc-icons {
  height: 14px;
  width: 14px;
}

.sc-notification-item__action sc-icons {
  height: 15px;
  width: 20px;
}

.sc-notification-item__message {
  color: var(--sc-brand-blue, #0c0a3e);
  font-family: var(--sc-font-family-body);
  font-size: 14px;
  line-height: 18px;
  margin: 0;
}

.sc-notification-item__message strong {
  font-weight: 700;
}

.sc-notification-item__action {
  align-items: center;
  align-self: flex-start;
  border-bottom: 1px solid var(--sc-brand-blue, #0c0a3e);
  color: var(--sc-brand-blue, #0c0a3e);
  display: inline-flex;
  font-size: 12px;
  font-weight: 500;
  gap: 5px;
  line-height: 1.2;
  padding: 0 5px 4px;
  text-decoration: none;
}

.sc-notification-item__action:hover {
  color: var(--sc-brand-blue, #0c0a3e);
  opacity: 0.85;
  text-decoration: none;
}

.sc-notification-item__due sc-icons {
  color: rgb(12 10 62 / 0.6);
}

/* ── styles/sc-notification-tabs.css ── */
/* ScNotificationTabs — Pending Tasks / Compliance Alerts tab bar (Figma 258:3665). */

:host {
  container-type: inline-size;
  display: block;
  width: 100%;
}

.sc-notification-tabs {
  background: transparent;
  display: flex;
  gap: 0;
  min-height: 49px;
  min-width: 0;
  width: 100%;
}

/*
 * Wrap holds the opposite fill of its button so border-radius corners
 * reveal a contrasting surface (mint ↔ white).
 */
.sc-notification-tabs__wrap {
  display: flex;
  min-height: 49px;
  min-width: 0;
}

/* Active wrap: mint behind the white active button. */
.sc-notification-tabs__wrap--active {
  background: var(--sc-brand-mint, #def3ef);
  flex: 1 1 auto;
  max-width: 241px;
}

/* Inactive wrap: 60% white behind the mint inactive button. */
.sc-notification-tabs__wrap:not(.sc-notification-tabs__wrap--active) {
  background: rgb(255 255 255 / 0.6);
  flex: 0 0 auto;
}

.sc-notification-tabs__tab {
  align-items: center;
  background: transparent;
  border: 0;
  box-sizing: border-box;
  color: var(--sc-brand-blue, #0c0a3e);
  cursor: pointer;
  display: inline-flex;
  flex: 1 1 auto;
  font-family: var(--sc-font-family-body);
  font-size: 14px;
  font-weight: 500;
  gap: 8px;
  justify-content: center;
  line-height: 1.2;
  min-height: 49px;
  min-width: 0;
  padding: 10px 15px;
  width: 100%;
}

.sc-notification-tabs__tab--active {
  background: rgb(255 255 255 / 0.6);
  font-size: 14px;
  font-weight: 600;
  justify-content: flex-start;
}

/* Active pending (left): top-right radius against mint wrap. */
.sc-notification-tabs__tab--pending.sc-notification-tabs__tab--active {
  border-top-right-radius: 10px;
}

/* Active compliance (right): top-left radius against mint wrap. */
.sc-notification-tabs__tab--compliance.sc-notification-tabs__tab--active {
  border-top-left-radius: 10px;
}

.sc-notification-tabs__tab:not(.sc-notification-tabs__tab--active) {
  background: var(--sc-brand-mint, #def3ef);
  font-size: 18px;
  font-weight: 500;
}

/* Inactive compliance (right): bottom-left radius against white wrap. */
.sc-notification-tabs__tab--compliance:not(.sc-notification-tabs__tab--active) {
  border-bottom-left-radius: 10px;
}

/* Inactive pending (left): bottom-right radius against white wrap. */
.sc-notification-tabs__tab--pending:not(.sc-notification-tabs__tab--active) {
  border-bottom-right-radius: 10px;
}

.sc-notification-tabs--pending-active .sc-notification-tabs__wrap--compliance:not(.sc-notification-tabs__wrap--active) {
  margin-left: auto;
}

.sc-notification-tabs--compliance-active .sc-notification-tabs__wrap--pending:not(.sc-notification-tabs__wrap--active) {
  flex-shrink: 0;
}

.sc-notification-tabs--pending-only .sc-notification-tabs__wrap--pending {
  background: transparent;
  flex: 1 1 auto;
  max-width: none;
}

.sc-notification-tabs--pending-only .sc-notification-tabs__tab--pending {
  background: rgb(255 255 255 / 0.6);
  border-radius: 0;
  justify-content: flex-start;
}

/* Count circle — Figma 258:3245 / 258:3003 (#cb2020, ~22px). */
.sc-notification-tabs__count {
  align-items: center;
  background: #cb2020;
  border-radius: 50%;
  box-sizing: border-box;
  color: var(--sc-white-normal, #ffffff);
  display: inline-flex;
  flex-shrink: 0;
  font-family: var(--sc-font-family-body);
  font-size: 10px;
  font-weight: 500;
  height: 22px;
  justify-content: center;
  line-height: 1;
  min-width: 22px;
  padding: 0;
  width: 22px;
}

.sc-notification-tabs__emoji {
  flex-shrink: 0;
  font-size: 18px;
  line-height: 1;
}

.sc-notification-tabs__tab--active .sc-notification-tabs__emoji {
  font-size: 18px;
}

.sc-notification-tabs__label--visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

@container (max-width: 290px) {
  .sc-notification-tabs__tab {
    padding: 10px 10px;
  }

  .sc-notification-tabs__wrap--active {
    max-width: none;
  }
}

/* ── styles/sc-notifications-panel.css ── */
/* ScNotificationsPanel — mint notifications sidebar chrome (Figma 258:3665). */

:host {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  max-height: min(821px, calc(100dvh - 8rem));
  max-width: 320px;
  min-height: 420px;
  overflow: hidden;
  width: 100%;
}

:host-context(sc-notifications-shell[mode='overlay']) {
  height: 100%;
  max-height: none;
  max-width: none;
  min-height: 0;
  width: 100%;
}

:host-context(sc-notifications-shell[mode='docked']) {
  height: 100%;
  max-height: none;
  max-width: none;
  min-height: 0;
  width: 100%;
}

.sc-notifications-panel {
  background: var(--sc-brand-mint, #def3ef);
  border-radius: 10px 0 0 10px;
  box-sizing: border-box;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  max-height: 100%;
  min-height: 0;
  overflow: hidden;
  padding: 11px;
  width: 100%;
}

@media (max-width: 900px) {
  :host-context(sc-notifications-shell[mode='overlay']) .sc-notifications-panel {
    border-radius: 0;
  }
}

/* Close toolbar — only in overlay mode (sheet), not when docked in the page grid. */
.sc-notifications-panel__toolbar {
  display: none;
}

:host-context(sc-notifications-shell[mode='overlay']) .sc-notifications-panel__toolbar {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  justify-content: flex-end;
  margin-bottom: 6px;
  min-height: 32px;
}

.sc-notifications-panel__close {
  align-items: center;
  appearance: none;
  background: rgb(255 255 255 / 0.75);
  border: 0;
  border-radius: 999px;
  color: var(--sc-brand-blue, #0c0a3e);
  cursor: pointer;
  display: inline-flex;
  flex-shrink: 0;
  height: 32px;
  justify-content: center;
  padding: 0;
  width: 32px;
}

.sc-notifications-panel__close:hover {
  background: var(--sc-white-normal, #fff);
}

.sc-notifications-panel__close:focus-visible {
  outline: 2px solid var(--sc-brand-blue, #0c0a3e);
  outline-offset: 2px;
}

.sc-notifications-panel__close-icon {
  display: inline-flex;
  line-height: 0;
}

.sc-notifications-panel__body {
  background: rgb(255 255 255 / 0.6);
  border-radius: 10px;
  box-sizing: border-box;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 5px;
  min-height: 0;
  overflow: hidden;
}

.sc-notifications-panel__list-wrap {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

.sc-notifications-panel__list-wrap.is-empty::after {
  display: none;
}

.sc-notifications-panel__list-wrap::after {
  background: linear-gradient(to bottom, rgb(255 255 255 / 0), rgb(255 255 255 / 0.6));
  border-radius: 0 0 10px 10px;
  bottom: 0;
  content: '';
  height: 48px;
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  z-index: 1;
}

.sc-notifications-panel__list {
  box-sizing: border-box;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 10px 8px;
  -webkit-overflow-scrolling: touch;
}

.sc-notifications-panel__list ::slotted(*) {
  display: block;
  margin-bottom: 5px;
}

.sc-notifications-panel__list ::slotted(*:last-child) {
  margin-bottom: 0;
}

.sc-notifications-panel__project-group {
  display: block;
  margin-bottom: 5px;
}

.sc-notifications-panel__project-group[hidden] {
  display: none;
}

.sc-notifications-panel__project-heading {
  color: rgb(12 10 62 / 0.5);
  font-family: var(--sc-font-family-body, 'Work Sans', sans-serif);
  font-size: 12px;
  font-weight: var(--sc-font-weight-semibold, 600);
  letter-spacing: 0.5px;
  line-height: 1.25;
  margin: 8px 4px;
  overflow-wrap: anywhere;
  position: static;
  text-transform: uppercase;
}

.sc-notifications-panel__empty {
  color: rgb(12 10 62 / 0.5);
  font-size: 13px;
  padding: 1.5rem 0.5rem;
  text-align: center;
}

.sc-notifications-panel__empty-state {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
  min-height: 12rem;
  opacity: 0.5;
  padding: 24px 8px;
  text-align: center;
}

.sc-notifications-panel__empty-illustration {
  display: block;
  flex: 0 0 auto;
  height: 107px;
  overflow: hidden;
  width: 144px;
}

.sc-notifications-panel__empty-illustration svg {
  display: block;
  height: 100%;
  width: 100%;
}

.sc-notifications-panel__empty-title {
  color: var(--sc-brand-blue, #0c0a3e);
  font-family: var(--sc-font-family-body, 'Work Sans', sans-serif);
  font-size: var(--sc-font-size-body, 16px);
  font-weight: var(--sc-font-weight-regular, 400);
  line-height: 1.25;
  margin: 0;
  max-width: 11rem;
}

.sc-notifications-panel__skeleton {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.sc-notifications-panel__skeleton-card {
  background: rgb(222 243 239 / 0.5);
  border-radius: 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
}

.sc-notifications-panel__skeleton-line {
  animation: sc-notifications-panel-pulse 1.4s ease-in-out infinite;
  background: rgb(12 10 62 / 0.08);
  border-radius: 6px;
}

.sc-notifications-panel__skeleton-line--due {
  height: 12px;
  width: 42%;
}

.sc-notifications-panel__skeleton-line--message {
  height: 14px;
  width: 92%;
}

.sc-notifications-panel__skeleton-line--message-short {
  height: 14px;
  width: 68%;
}

.sc-notifications-panel__skeleton-line--action {
  height: 12px;
  margin-top: 8px;
  width: 28%;
}

.sc-notifications-panel__visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

@keyframes sc-notifications-panel-pulse {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.55;
  }
}

/* ── styles/sc-notifications-shell.css ── */
/* ScNotificationsShell — docked column or right overlay sheet wrapper. */

:host {
  --sc-notifications-overlay-backdrop-min: 44px;
  --sc-notifications-overlay-max-width: 320px;
  display: flex;
  flex-direction: column;
  max-height: 100%;
  min-height: 0;
}

:host([mode='overlay']) {
  position: static;
}

.sc-notifications-shell__backdrop {
  background: rgb(12 10 62 / 0.25);
  border: 0;
  cursor: pointer;
  display: none;
  inset: 0;
  margin: 0;
  padding: 0;
  position: fixed;
  z-index: 1040;
}

:host([mode='overlay'][open]) .sc-notifications-shell__backdrop {
  display: block;
}

.sc-notifications-shell__panel {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  max-height: 100%;
  min-height: 0;
  width: 100%;
}

:host([mode='docked']) .sc-notifications-shell__panel {
  height: 100%;
}

:host([mode='overlay']) .sc-notifications-shell__panel {
  bottom: 0;
  height: 100dvh;
  max-height: 100dvh;
  position: fixed;
  right: 0;
  top: 0;
  transform: translateX(100%);
  transition: transform 0.25s ease;
  width: min(var(--sc-notifications-overlay-max-width), 100vw);
  z-index: 1050;
}

/* Phone / small tablet: full-bleed overlay (no side strip). */
@media (max-width: 900px) {
  :host([mode='overlay']) .sc-notifications-shell__panel {
    left: 0;
    max-width: none;
    width: 100vw;
  }
}

:host([mode='overlay'][open]) .sc-notifications-shell__panel {
  transform: translateX(0);
}

:host([mode='overlay']:not([open])) .sc-notifications-shell__panel {
  pointer-events: none;
  visibility: hidden;
}

:host([mode='docked']) .sc-notifications-shell__backdrop {
  display: none !important;
}

/* ── styles/sc-notifications-trigger.css ── */
/* ScNotificationsTrigger — header bell control with optional badge (Figma 3081:18258). */

:host {
  display: inline-flex;
  overflow: visible;
  vertical-align: top;
}

:host([active]) {
  height: 60px;
}

.sc-notifications-trigger {
  align-items: stretch;
  background: transparent;
  border: 0;
  color: var(--sc-brand-blue, #0c0a3e);
  cursor: pointer;
  display: inline-flex;
  height: 100%;
  padding: 0;
  position: relative;
}

.sc-notifications-trigger__assembly {
  align-items: stretch;
  display: inline-flex;
  height: 60px;
}

.sc-notifications-trigger__curve {
  color: var(--sc-brand-mint, #def3ef);
  flex-shrink: 0;
  height: 60px;
  width: 60px;
}

.sc-notifications-trigger__wrap {
  align-items: center;
  background: transparent;
  box-sizing: border-box;
  display: inline-flex;
  flex-shrink: 0;
  justify-content: center;
  min-height: 60px;
  padding: 15px;
}

:host([active]) .sc-notifications-trigger__wrap {
  background: var(--sc-brand-mint, #def3ef);
  border-radius: 17px 0 0 17px;
  margin-left: -15px;
  padding: 15px;
}

.sc-notifications-trigger__icon {
  align-items: center;
  background: var(--sc-brand-blue, #0c0a3e);
  border-radius: 999px;
  box-sizing: border-box;
  display: inline-flex;
  flex-shrink: 0;
  height: 30px;
  justify-content: center;
  position: relative;
  width: 30px;
}

.sc-notifications-trigger__bell {
  color: var(--sc-white-normal, #ffffff);
  display: block;
  flex-shrink: 0;
  height: 19px;
  width: 20px;
}

.sc-notifications-trigger__badge {
  align-items: center;
  background: var(--sc-red-normal, #c0133d);
  border-radius: 8px;
  box-sizing: border-box;
  color: var(--sc-white-normal, #ffffff);
  display: inline-flex;
  font-family: Inter, var(--sc-font-family-body);
  font-size: 8px;
  font-weight: 500;
  justify-content: center;
  line-height: 1;
  min-width: 16px;
  padding: 3.2px 6.4px;
  position: absolute;
  right: -3px;
  top: -3.2px;
}

/* ── styles/sc-phone-input.css ── */
/* ScPhoneInput — sc-form-input's field with the +1 country code before the number.

   The field takes sc-form-input.css; the country code sits where its leading icon would. */

.sc-phone-input__country-code {
  font-size: var(--sc-font-size-label, 14px);
  line-height: 20px;
}

.sc-form-input__control--disabled .sc-phone-input__country-code {
  color: inherit;
}

/* The incomplete-number hint: red, as sc-form-password's unmet hint. */
.sc-phone-input__hint {
  font-size: var(--sc-font-size-caption, 12px);
  line-height: 16px;
  color: var(--sc-brand-red, #C0133D);
}

/* Empty, it takes no room: this cancels the field's gap above it. */
.sc-phone-input__hint--empty {
  margin-top: calc(-1 * var(--sc-space-xs, 4px));
}

/* ── styles/sc-priority-toggle.css ── */
/* ScPriorityToggle — horizontal segmented control for picking a single
   priority (Off / Optional / Highly Suggested / Mandatory and similar).

   Replaces a 4-column ``<input type=radio>`` table on the requirement
   builder. Form-associated so the selected value posts under the
   ``name`` attribute just like a vanilla radio group. */

:host {
  display: inline-block;
  max-width: 100%;
}

/* The field appearance is a form field: it takes the width it is given, the way
   the inputs beside it do. */
:host([appearance='field']) {
  display: block;
  width: 100%;
}

.sc-priority-toggle {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: var(--sc-gray-light, #F9FAFC);
  border: 1px solid var(--sc-gray-normal, #E8E7EC);
}

.sc-priority-toggle__option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--sc-blue-muted, #374151);
  font-family: var(--sc-font-family-body, 'Work Sans'), sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
  white-space: nowrap;
}

.sc-priority-toggle__option:hover:not(:disabled):not(.sc-priority-toggle__option--selected) {
  background: rgba(12, 10, 62, 0.04);
  color: var(--sc-brand-blue, #0C0A3E);
}

.sc-priority-toggle__option:focus-visible {
  outline: 2px solid var(--sc-brand-blue, #0C0A3E);
  outline-offset: 1px;
}

.sc-priority-toggle__option:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ── Selected styles per tone ───────────────────────────────────────── */

.sc-priority-toggle__option--selected.sc-priority-toggle__option--tone-neutral {
  background: var(--sc-brand-blue, #0C0A3E);
  color: #ffffff;
  border-color: var(--sc-brand-blue, #0C0A3E);
}

.sc-priority-toggle__option--selected.sc-priority-toggle__option--tone-positive {
  background: var(--sc-brand-green, #068F3D);
  color: #ffffff;
  border-color: var(--sc-brand-green, #068F3D);
}

.sc-priority-toggle__option--selected.sc-priority-toggle__option--tone-warning {
  background: #B45309;
  color: #ffffff;
  border-color: #B45309;
}

.sc-priority-toggle__option--selected.sc-priority-toggle__option--tone-negative {
  background: var(--sc-brand-red, #C0133D);
  color: #ffffff;
  border-color: var(--sc-brand-red, #C0133D);
}

.sc-priority-toggle__option--selected.sc-priority-toggle__option--tone-info {
  background: var(--sc-brand-blue, #0C0A3E);
  color: #ffffff;
  border-color: var(--sc-brand-blue, #0C0A3E);
}

/* ── `field` appearance (Figma 4323-48609) ─────────────────────────────
   The binary Yes / No, shaped like the text inputs it sits among: two
   equal-width boxes at input height and input radius, so the question reads as
   one of the form grid's fields rather than as a control borrowed from a
   toolbar. The container gives up its own capsule — here the options are the
   surface — and the selected tones above still apply. */
.sc-priority-toggle--field {
  display: flex;
  flex-wrap: nowrap;
  gap: 5px;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.sc-priority-toggle--field .sc-priority-toggle__option {
  flex: 1 1 0;
  min-height: 52px;
  /* The same tokens the text inputs use, so retuning those keeps this matching them. */
  padding: 6px var(--sc-space-md, 12px);
  border-radius: var(--sc-border-radius-md, 8px);
  font-size: 14px;
  line-height: 20px;
}

/* Only the unpicked options take the input's own surface: the picked one keeps the tone
   colours above, which carry the white label that goes with them. */
.sc-priority-toggle--field .sc-priority-toggle__option:not(.sc-priority-toggle__option--selected) {
  border-color: var(--sc-gray-normal, #E8E7EC);
  background: var(--sc-gray-light, #F9FAFC);
}

/* ── styles/sc-progress-steps.css ── */
/* ScProgressSteps — Figma Webapp "linear steps" (node 3626:21832).
   Desktop: horizontal steps joined by connector lines (wraps as needed).
   Mobile (≤767px): collapsible vertical accordion — collapsed shows the
   current step plus a chevron toggle, expanded lists every step. */

:host {
  /* Active / done check use SC blue, done circle uses SC mint. */
  --sc-progress-steps-blue: var(--sc-brand-blue, #0c0a3e);
  --sc-progress-steps-done-bg: var(--sc-brand-mint, #def3ef);
  --sc-progress-steps-inactive-bg: #f0f0f0;
  --sc-progress-steps-inactive-border: #c7c7c7;
  --sc-progress-steps-muted: #8c8c8c;
  --sc-progress-steps-line: #d9d9d9;
  --sc-progress-steps-margin-bottom: 28px;
  display: block;
  max-width: 100%;
}

.sc-progress-steps {
  position: relative;
  max-width: 100%;
}

.sc-progress-steps__list {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: var(--sc-progress-steps-justify, flex-start);
  list-style: none;
  margin: 0 0 var(--sc-progress-steps-margin-bottom);
  padding: 0;
}

.sc-progress-steps__item {
  align-items: center;
  display: inline-flex;
  gap: 10px;
  min-width: 0;
}

.sc-progress-steps__line {
  background: var(--sc-progress-steps-line);
  flex: 0 0 53px;
  height: 1px;
}

.sc-progress-steps__step {
  align-items: center;
  display: inline-flex;
  gap: 8px;
  min-width: 0;
  padding: 4px;
  text-decoration: none;
}

.sc-progress-steps__circle {
  align-items: center;
  background: var(--sc-progress-steps-inactive-bg);
  border: 1.5px solid var(--sc-progress-steps-inactive-border);
  border-radius: 50%;
  box-sizing: border-box;
  color: var(--sc-progress-steps-muted);
  display: flex;
  flex: 0 0 24px;
  font-family: var(--sc-font-family-body, 'Work Sans', sans-serif);
  font-size: 11px;
  font-weight: var(--sc-font-weight-medium, 500);
  height: 24px;
  justify-content: center;
  line-height: 1;
  width: 24px;
}

.sc-progress-steps__circle svg {
  display: block;
  height: 9px;
  width: 12px;
}

.sc-progress-steps__circle path {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.sc-progress-steps__label {
  color: var(--sc-progress-steps-muted);
  font-family: var(--sc-font-family-body, 'Work Sans', sans-serif);
  font-size: 13px;
  font-weight: var(--sc-font-weight-regular, 400);
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.sc-progress-steps__step--done .sc-progress-steps__circle {
  background: var(--sc-progress-steps-done-bg);
  border-color: transparent;
  color: var(--sc-progress-steps-blue);
}

.sc-progress-steps__step--active .sc-progress-steps__circle {
  background: var(--sc-progress-steps-blue);
  border-color: transparent;
  color: #fff;
}

.sc-progress-steps__step--active .sc-progress-steps__label {
  color: var(--sc-progress-steps-blue);
  font-weight: var(--sc-font-weight-medium, 500);
}

a.sc-progress-steps__step--done:hover .sc-progress-steps__circle,
a.sc-progress-steps__step--done:focus-visible .sc-progress-steps__circle {
  opacity: 0.75;
}

a.sc-progress-steps__step--done:hover .sc-progress-steps__label,
a.sc-progress-steps__step--done:focus-visible .sc-progress-steps__label {
  text-decoration: underline;
  text-underline-offset: 2px;
}

a.sc-progress-steps__step:focus-visible {
  border-radius: 8px;
  outline: 2px solid var(--sc-progress-steps-blue);
  outline-offset: 2px;
}

/* Mobile accordion toggle — hidden on desktop. */
.sc-progress-steps__toggle {
  display: none;
}

@media (max-width: 767px) {
  .sc-progress-steps__list {
    align-items: stretch;
    flex-direction: column;
    gap: 2px;
    justify-content: flex-start;
    /* Reserve space for the absolutely positioned toggle so long labels
       never run underneath the chevron. */
    padding-right: 32px;
  }

  .sc-progress-steps__item {
    width: 100%;
  }

  .sc-progress-steps__line {
    display: none;
  }

  .sc-progress-steps__toggle {
    align-items: center;
    background: transparent;
    border: none;
    color: var(--sc-progress-steps-blue);
    cursor: pointer;
    display: inline-flex;
    height: 24px;
    justify-content: center;
    padding: 0;
    position: absolute;
    right: 0;
    top: 4px;
    width: 24px;
  }

  .sc-progress-steps__toggle svg {
    display: block;
    height: 12px;
    transition: transform 0.15s ease;
    width: 16px;
  }

  .sc-progress-steps__toggle path {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
  }

  /* Collapsed: only the current step shows. */
  .sc-progress-steps:not(.sc-progress-steps--expanded) .sc-progress-steps__item {
    display: none;
  }

  .sc-progress-steps:not(.sc-progress-steps--expanded) .sc-progress-steps__item--current {
    display: inline-flex;
  }

  .sc-progress-steps--expanded .sc-progress-steps__toggle svg {
    transform: scaleY(-1);
  }
}

/* ── styles/sc-project-menu.css ── */
:host {
  display: inline-block;
  font-family: var(--sc-font-family-body);
}

* {
  box-sizing: border-box;
}

.sc-project-menu__panel a:focus-visible:not(.sc-project-menu__switch),
.sc-project-menu__panel button:focus-visible {
  outline: 2px solid var(--sc-brand-blue);
  outline-offset: 2px;
}

.sc-project-menu__backdrop {
  background: rgb(12 10 62 / 0.25);
  border: 0;
  bottom: 0;
  display: none;
  left: 0;
  padding: 0;
  position: fixed;
  right: 0;
  top: 60px;
  z-index: 1040;
}

.sc-project-menu__panel {
  background: var(--sc-brand-mint);
  border-radius: var(--sc-border-radius-xl);
  color: var(--sc-brand-blue);
  display: flex;
  flex-direction: column;
  inset: 76px var(--sc-space-lg) auto;
  max-height: calc(100dvh - 92px);
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  position: fixed;
  transform: translateY(-8px);
  transition:
    opacity 160ms ease,
    transform 160ms ease;
  text-align: start;
  visibility: hidden;
  z-index: 1050;
}

:host([phone-menu]) .sc-project-menu__trigger {
  display: none;
}

.sc-project-menu__trigger[aria-expanded='true'] ~ .sc-project-menu__backdrop {
  display: block;
}

.sc-project-menu__trigger[aria-expanded='true'] ~ .sc-project-menu__panel {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  visibility: visible;
}

.sc-project-menu__panel:focus {
  outline: none;
}

.sc-project-menu__close {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--sc-brand-blue);
  cursor: pointer;
  display: inline-flex;
  height: 44px;
  justify-content: center;
  padding: 0;
  position: absolute;
  right: 8px;
  top: 8px;
  width: 44px;
  z-index: 2;
}

.sc-project-menu__toolbar {
  align-items: center;
  border-bottom: var(--sc-border-width-thin) solid var(--sc-blue-alpha10);
  display: grid;
  flex: 0 0 auto;
  gap: var(--sc-space-lg);
  grid-template-columns: minmax(0, max-content) minmax(12rem, 1fr) auto;
  padding: var(--sc-space-md) 52px var(--sc-space-md) var(--sc-space-2xl);
}

.sc-project-menu__project-link {
  color: var(--sc-brand-blue);
  font-size: 18px;
  font-style: italic;
  font-weight: var(--sc-font-weight-medium);
  min-width: 0;
  opacity: 0.6;
  overflow-wrap: anywhere;
  text-decoration: underline;
}

.sc-project-menu__search {
  align-items: center;
  background: var(--sc-blue-alpha05);
  border: 1px solid transparent;
  border-radius: 3px;
  display: flex;
  min-width: 0;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.sc-project-menu__search:focus-within {
  border-color: var(--sc-brand-blue, #0c0a3e);
  box-shadow: 0 0 0 3px var(--sc-blue-alpha10, #0c0a3e1a);
}

.sc-project-menu__search-input {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--sc-brand-blue);
  flex: 1 1 auto;
  font: inherit;
  font-size: var(--sc-font-size-caption, 12px);
  font-weight: var(--sc-font-weight-medium, 500);
  min-height: 26px;
  min-width: 0;
  outline: none;
  padding: 6px 10px;
}

.sc-project-menu__search-input::placeholder {
  color: var(--sc-brand-blue, #0c0a3e);
  opacity: 0.2;
}

.sc-project-menu__search sc-icons {
  --sc-icon-size: 18px;
  flex: 0 0 18px;
  height: 18px;
  margin-inline-end: 10px;
  width: 18px;
}

/* Figma 5288:45384 — outlined chip, no fill, so mint shows through. */
.sc-project-menu__switch {
  align-items: center;
  appearance: none;
  background: transparent;
  border: var(--sc-border-width-thin, 1px) solid var(--sc-gray-form-border, #d1d5dc);
  border-radius: var(--sc-border-radius-sm, 4px);
  color: var(--sc-brand-blue, #0c0a3e);
  cursor: pointer;
  display: inline-flex;
  flex-shrink: 0;
  font-family: inherit;
  font-size: var(--sc-font-size-caption, 12px);
  font-weight: var(--sc-font-weight-medium, 500);
  gap: 5px;
  justify-content: center;
  line-height: 1;
  padding: 8px 10px;
  text-decoration: none;
  white-space: nowrap;
}

.sc-project-menu__switch:focus-visible {
  border-color: var(--sc-brand-blue, #0c0a3e);
  box-shadow: 0 0 0 3px var(--sc-blue-alpha10, #0c0a3e1a);
  outline: none;
}

.sc-project-menu__switch sc-icons {
  flex: 0 0 20px;
  height: 15px;
  width: 20px;
}

.sc-project-menu__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
}

.sc-project-menu__sections {
  align-items: stretch;
  border-bottom: var(--sc-border-width-thin) solid var(--sc-blue-alpha10);
  display: flex;
}

.sc-project-menu__sections-main {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  min-width: 0;
}

.sc-project-menu__sections-main .sc-project-menu__section {
  flex: 1 1 230px;
}

.sc-project-menu__sections-main .sc-project-menu__section--data-center {
  flex: 0 0 auto;
  max-width: 100%;
  width: max-content;
}

.sc-project-menu__section--access-control {
  flex: 1 1 32rem;
}

.sc-project-menu__sections-rail {
  align-items: stretch;
  border-inline-start: var(--sc-border-width-thin) solid var(--sc-blue-alpha10);
  display: flex;
  flex: 0 0 auto;
  margin-inline-start: auto;
  min-width: 0;
}

.sc-project-menu__section {
  border-inline-end: var(--sc-border-width-thin) solid var(--sc-blue-alpha10);
  min-width: 0;
  padding: var(--sc-space-xl) var(--sc-space-3xl) var(--sc-space-2xl);
}

.sc-project-menu__sections-main .sc-project-menu__section:last-child,
.sc-project-menu__sections-rail .sc-project-menu__section:last-child {
  border-inline-end: 0;
}

.sc-project-menu__section--integrations {
  border-inline-end: 0;
}

.sc-project-menu__section > h2,
.sc-project-menu__smart-binder > h2 {
  align-items: center;
  display: flex;
  font-size: var(--sc-font-size-label);
  font-weight: var(--sc-font-weight-regular);
  gap: var(--sc-space-xs);
  line-height: 20px;
  margin: 0 0 var(--sc-space-xl);
  text-transform: uppercase;
}

.sc-project-menu__section-emoji {
  flex: 0 0 auto;
  font-size: 20px;
  line-height: 16px;
}

.sc-project-menu__section > h2 sc-icons,
.sc-project-menu__smart-binder > h2 sc-icons,
.sc-project-menu__footer sc-icons {
  flex: 0 0 20px;
}

.sc-project-menu__section--shortcuts {
  border-inline-start: var(--sc-border-width-thin) solid var(--sc-blue-alpha10);
  display: flex;
  flex: 0 0 14rem;
  flex-direction: column;
  gap: 0;
  padding: 0;
}

/* Four shortcuts: Users | Companies / 3D Overview | Media Library. */
.sc-project-menu__section--shortcuts-grid {
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: repeat(2, minmax(11rem, auto));
}

.sc-project-menu__section--shortcuts-grid .sc-project-menu__shortcut:nth-child(odd) {
  border-inline-end: var(--sc-border-width-thin) solid var(--sc-blue-alpha10);
}

.sc-project-menu__section--shortcuts-grid .sc-project-menu__shortcut:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.sc-project-menu__shortcut {
  align-items: center;
  border-bottom: var(--sc-border-width-thin) solid var(--sc-blue-alpha10);
  display: flex;
  gap: var(--sc-space-xs);
  min-height: 74px;
  padding: 0 var(--sc-space-xl, 16px);
}

.sc-project-menu__shortcut:last-child {
  border-bottom: 0;
}

.sc-project-menu__shortcut-link {
  align-items: center;
  color: inherit;
  display: inline-flex;
  flex: 1 1 auto;
  font-size: var(--sc-font-size-label);
  font-weight: var(--sc-font-weight-regular);
  gap: var(--sc-space-xs);
  min-width: 0;
  text-decoration: none;
  text-transform: uppercase;
}

.sc-project-menu__section--shortcuts-grid .sc-project-menu__shortcut-link span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.sc-project-menu__section-groups {
  display: grid;
  gap: var(--sc-space-2xl);
  grid-template-columns: repeat(auto-fill, 11rem);
  justify-content: start;
}

.sc-project-menu__section--access-control .sc-project-menu__section-groups {
  align-items: start;
  gap: var(--sc-space-2xl) var(--sc-space-3xl);
  grid-template-columns: max-content max-content;
}

.sc-project-menu__group--access-reports ul {
  column-gap: var(--sc-space-xl);
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(4, auto);
}

.sc-project-menu__group {
  break-inside: avoid;
  min-width: 0;
}

.sc-project-menu__group h3 {
  font-size: 18px;
  font-weight: var(--sc-font-weight-medium);
  line-height: 1.25;
  margin: 0 0 var(--sc-space-sm);
  overflow-wrap: anywhere;
}

.sc-project-menu__group ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sc-project-menu__item {
  align-items: flex-start;
  display: flex;
  gap: 2px;
  min-width: 0;
}

.sc-project-menu__item-link {
  color: var(--sc-blue-muted);
  flex: 0 1 auto;
  font-size: var(--sc-font-size-label);
  line-height: 25px;
  min-width: 0;
  overflow-wrap: anywhere;
  text-decoration: none;
}

.sc-project-menu__section--featured > h2 {
  margin-bottom: 25px;
}

.sc-project-menu__section--featured .sc-project-menu__group ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sc-project-menu__section--featured .sc-project-menu__item {
  align-items: center;
}

.sc-project-menu__section--featured .sc-project-menu__item-link {
  color: var(--sc-brand-blue, #0c0a3e);
  font-size: 18px;
  font-weight: var(--sc-font-weight-medium, 500);
  line-height: 1;
}

.sc-project-menu__heading-link {
  align-items: center;
  color: inherit;
  display: inline-flex;
  gap: var(--sc-space-xs);
  min-width: 0;
  text-decoration: none;
}

.sc-project-menu__item-link:hover,
.sc-project-menu__item-link:focus-visible,
.sc-project-menu__heading-link:hover,
.sc-project-menu__heading-link:focus-visible,
.sc-project-menu__project-link:hover,
.sc-project-menu__project-link:focus-visible,
.sc-project-menu__footer a:hover,
.sc-project-menu__footer a:focus-visible {
  text-decoration: underline;
}

.sc-project-menu__create-link {
  align-items: center;
  color: var(--sc-brand-red);
  display: inline-flex;
  flex: 0 0 24px;
  height: 25px;
  justify-content: center;
  width: 24px;
}

.sc-project-menu__create-link sc-icons {
  height: 14px;
  width: 14px;
}

.sc-project-menu__smart-binder {
  padding: var(--sc-space-xl) var(--sc-space-3xl) var(--sc-space-3xl);
}

/* Figma 5197:41374 column starts: 48, 324, 670, 1063. */
.sc-project-menu__smart-groups {
  column-gap: 0;
  display: grid;
  grid-template-columns: minmax(0, 276fr) minmax(0, 346fr) minmax(0, 393fr) minmax(0, 329fr);
  row-gap: var(--sc-space-2xl);
}

.sc-project-menu__smart-column {
  display: flex;
  flex-direction: column;
  gap: var(--sc-space-2xl);
  min-width: 0;
}

.sc-project-menu__footer {
  background: var(--sc-blue-alpha05);
  flex: 0 0 auto;
  text-align: center;
}

.sc-project-menu__footer a {
  align-items: center;
  color: var(--sc-brand-blue);
  display: inline-flex;
  font-size: var(--sc-font-size-caption);
  gap: var(--sc-space-xs);
  justify-content: center;
  min-height: 44px;
  padding: var(--sc-space-sm) var(--sc-space-xl);
  text-decoration: none;
  text-transform: uppercase;
}

.sc-project-menu__status,
.sc-project-menu__no-matches {
  align-items: center;
  display: flex;
  font-size: var(--sc-font-size-label);
  gap: var(--sc-space-md);
  justify-content: center;
  margin: 0;
  min-height: 180px;
  padding: var(--sc-space-3xl);
  text-align: center;
}

.sc-project-menu__status--loading {
  align-items: stretch;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 280px;
  padding: 0;
  text-align: start;
}

.sc-project-menu__skeleton {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

.sc-project-menu__skeleton-toolbar {
  align-items: center;
  border-bottom: var(--sc-border-width-thin) solid var(--sc-blue-alpha10);
  display: grid;
  gap: var(--sc-space-lg);
  grid-template-columns: minmax(6rem, 10rem) minmax(8rem, 1fr) 7rem;
  padding: var(--sc-space-md) var(--sc-space-2xl);
}

.sc-project-menu__skeleton-block {
  animation: sc-project-menu-pulse 1.4s ease-in-out infinite;
  background: var(--sc-blue-alpha10);
  border-radius: var(--sc-border-radius-sm, 6px);
  display: block;
}

.sc-project-menu__skeleton-title,
.sc-project-menu__skeleton-search,
.sc-project-menu__skeleton-switch,
.sc-project-menu__skeleton-heading {
  height: 16px;
}

.sc-project-menu__skeleton-search,
.sc-project-menu__skeleton-switch {
  height: 32px;
}

.sc-project-menu__skeleton-columns {
  display: grid;
  gap: var(--sc-space-2xl);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: var(--sc-space-2xl);
}

.sc-project-menu__skeleton-column {
  display: flex;
  flex-direction: column;
  gap: var(--sc-space-md);
}

.sc-project-menu__skeleton-line {
  height: 12px;
  width: 88%;
}

.sc-project-menu__skeleton-heading {
  width: 55%;
}

.sc-project-menu__skeleton-line--short {
  width: 62%;
}

@keyframes sc-project-menu-pulse {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.45;
  }
}

.sc-project-menu__retry {
  flex: 0 0 auto;
}

.sc-project-menu__visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

@media (max-width: 1275px) {
  .sc-project-menu__section--access-control {
    flex: 1 1 12rem;
    min-width: 0;
  }

  .sc-project-menu__section--access-control .sc-project-menu__section-groups {
    grid-template-columns: minmax(0, 1fr);
  }

  .sc-project-menu__group--access-reports ul {
    display: block;
  }

  .sc-project-menu__section--shortcuts,
  .sc-project-menu__section--shortcuts-grid {
    display: flex;
    flex: 0 1 12rem;
    flex-direction: column;
    min-width: 0;
  }

  .sc-project-menu__section--shortcuts-grid .sc-project-menu__shortcut:nth-child(odd) {
    border-inline-end: 0;
  }

  .sc-project-menu__section--shortcuts-grid .sc-project-menu__shortcut:nth-last-child(-n + 2) {
    border-bottom: var(--sc-border-width-thin) solid var(--sc-blue-alpha10);
  }

  .sc-project-menu__section--shortcuts-grid .sc-project-menu__shortcut:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 900px) {
  .sc-project-menu__toolbar {
    grid-template-columns: minmax(0, 1fr) auto;
    padding-inline-end: var(--sc-space-lg);
  }

  .sc-project-menu__switch {
    margin-inline-end: 36px;
  }

  .sc-project-menu__search {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .sc-project-menu__sections {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sc-project-menu__smart-groups {
    column-gap: var(--sc-space-xl);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 761px) {
  .sc-project-menu__sections {
    flex-wrap: wrap;
  }

  .sc-project-menu__sections-main {
    flex: 1 1 100%;
  }

  .sc-project-menu__sections-rail {
    border-block-start: var(--sc-border-width-thin, 1px) solid var(--sc-blue-alpha10, #0c0a3e1a);
    border-inline-start: 0;
    flex: 1 1 100%;
  }

  .sc-project-menu__sections-main .sc-project-menu__section--data-center {
    width: auto;
  }

  .sc-project-menu__section--shortcuts {
    flex: 1 1 auto;
  }

  .sc-project-menu__skeleton-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  :host {
    max-width: 100%;
    min-width: 0;
  }

  .sc-project-menu__trigger {
    max-width: 100%;
    min-width: 0;
    width: 100%;
  }

  .sc-project-menu__backdrop {
    top: var(--sc-project-menu-mobile-top, 60px);
  }

  .sc-project-menu__panel {
    border-radius: 0;
    inset: var(--sc-project-menu-mobile-top, 60px) 0 0;
    max-height: calc(100dvh - var(--sc-project-menu-mobile-top, 60px));
  }

  .sc-project-menu__skeleton-toolbar,
  .sc-project-menu__toolbar {
    background: var(--sc-brand-mint);
    gap: var(--sc-space-sm);
    padding: var(--sc-space-md) var(--sc-space-lg);
    position: sticky;
    top: 0;
    z-index: 1;
  }

  .sc-project-menu__skeleton-toolbar,
  .sc-project-menu__skeleton-columns {
    grid-template-columns: minmax(0, 1fr);
  }

  .sc-project-menu__project-link {
    align-items: center;
    display: inline-flex;
    font-size: var(--sc-font-size-body);
    min-height: 44px;
  }

  .sc-project-menu__search-input {
    min-height: 44px;
  }

  .sc-project-menu__switch {
    min-height: 44px;
  }

  .sc-project-menu__shortcut,
  .sc-project-menu__shortcut-link {
    min-height: 44px;
  }

  .sc-project-menu__sections,
  .sc-project-menu__sections-main,
  .sc-project-menu__sections-rail {
    display: block;
  }

  .sc-project-menu__sections-rail,
  .sc-project-menu__section--shortcuts {
    border-block-start: 0;
    border-inline-start: 0;
  }

  .sc-project-menu__section {
    border-bottom: var(--sc-border-width-thin) solid var(--sc-blue-alpha10);
    border-inline-end: 0;
    padding: var(--sc-space-xl) var(--sc-space-lg);
  }

  .sc-project-menu__sections-main .sc-project-menu__section--data-center {
    width: auto;
  }

  .sc-project-menu__section--shortcuts {
    padding: 0;
  }

  .sc-project-menu__section-groups,
  .sc-project-menu__section--access-control .sc-project-menu__section-groups,
  .sc-project-menu__group--access-reports ul {
    display: block;
  }

  .sc-project-menu__section-groups .sc-project-menu__group + .sc-project-menu__group {
    margin-block-start: var(--sc-space-2xl);
  }

  .sc-project-menu__smart-binder {
    padding: var(--sc-space-xl) var(--sc-space-lg);
  }

  .sc-project-menu__smart-groups {
    grid-template-columns: minmax(0, 1fr);
  }

  .sc-project-menu__item-link,
  .sc-project-menu__create-link {
    align-items: center;
    display: inline-flex;
    min-height: 44px;
  }

  .sc-project-menu__item {
    align-items: stretch;
  }

  .sc-project-menu__create-link {
    flex-basis: 44px;
    height: 44px;
    width: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sc-project-menu__panel {
    transition: none;
  }
}

/* ── styles/sc-project-overview-card.css ── */
/* ScProjectOverviewCard — Project summary card for Overview V2 (Figma 7115:28684). */

:host {
  border-radius: 10px;
  box-shadow: 0 0 4px rgb(0 0 0 / 0.25);
  display: block;
  min-width: 0;
  width: 100%;
}

.sc-project-overview-card {
  background: var(--sc-white-normal, #fff);
  border-radius: 10px;
  box-sizing: border-box;
  color: var(--sc-brand-blue, #0c0a3e);
  font-family: var(--sc-font-family-body, "Work Sans", sans-serif);
  min-width: 0;
  padding: 10px;
  width: 100%;
}

/* Overflow control (30px circle) — sits beside the Project Info section title. */
.sc-project-overview-card__actions {
  display: flex;
  flex: 0 0 auto;
  min-width: 0;
}

.sc-project-overview-card__inner {
  align-items: stretch;
  display: flex;
  gap: 20px;
  width: 100%;
}

.sc-project-overview-card__primary {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.sc-project-overview-card__heading {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sc-project-overview-card__title-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
  width: 100%;
}

.sc-project-overview-card__section-title {
  font-size: 18px;
  font-weight: var(--sc-font-weight-medium, 500);
  line-height: normal;
  margin: 0;
  min-width: 0;
  text-transform: uppercase;
}

.sc-project-overview-card__name {
  font-size: 18px;
  font-style: italic;
  font-weight: var(--sc-font-weight-medium, 500);
  line-height: 1.2;
  margin: 0;
  opacity: 0.6;
}

/* Moves to the next line as a unit, and breaks inside only when longer than a line. */
.sc-project-overview-card__job-number {
  display: inline-block;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.sc-project-overview-card__address {
  font-size: 16px;
  font-style: italic;
  font-weight: 400;
  line-height: 1.25;
  margin: 0;
  opacity: 0.5;
  word-break: break-word;
}

.sc-project-overview-card__maps-link {
  color: inherit;
  cursor: pointer;
  text-decoration: none;
}

.sc-project-overview-card__maps-link:hover,
.sc-project-overview-card__maps-link:focus-visible {
  text-decoration: underline;
}

.sc-project-overview-card__maps-link:focus-visible {
  border-radius: 2px;
  outline: 2px solid rgb(12 10 62 / 0.35);
  outline-offset: 2px;
}

.sc-project-overview-card__cta-row {
  align-items: center;
  align-self: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  margin-top: auto;
}

.sc-project-overview-card__info-cta {
  align-items: center;
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--sc-brand-blue, #0c0a3e);
  color: var(--sc-brand-blue, #0c0a3e);
  cursor: pointer;
  display: inline-flex;
  font-family: inherit;
  font-size: 12px;
  font-weight: var(--sc-font-weight-medium, 500);
  gap: 5px;
  line-height: 1.2;
  padding: 0 5px 4px;
}

.sc-project-overview-card__info-cta:hover {
  opacity: 0.85;
}

/* Emergency table (Figma 7115:28698). */

.sc-project-overview-card__emergency-table {
  border-collapse: separate;
  border-spacing: 0;
  flex: 1 1 0;
  min-width: 0;
  width: 100%;
}

.sc-project-overview-card__emergency-table tr + tr .sc-project-overview-card__table-label,
.sc-project-overview-card__emergency-table tr + tr .sc-project-overview-card__table-value {
  border-top: 0;
}

.sc-project-overview-card__table-label {
  background: rgb(222 243 239 / 0.5);
  border: 1px solid var(--sc-gray-normal, #c4c4ce);
  box-sizing: border-box;
  font-size: 14px;
  font-weight: 400;
  height: 56px;
  line-height: normal;
  padding: 8px 12px;
  text-align: left;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
  width: 165px;
}

.sc-project-overview-card__table-value {
  border: 1px solid var(--sc-gray-normal, #c4c4ce);
  box-sizing: border-box;
  font-size: 14px;
  font-weight: 400;
  height: 56px;
  line-height: 1.285;
  min-width: 0;
  padding: 8px 12px;
  vertical-align: middle;
  word-break: break-word;
}

.sc-project-overview-card__emergency-table tr:first-child .sc-project-overview-card__table-label {
  border-radius: 5px 0 0 0;
}

.sc-project-overview-card__emergency-table tr:first-child .sc-project-overview-card__table-value {
  border-radius: 0 5px 0 0;
}

.sc-project-overview-card__emergency-table tr:last-child .sc-project-overview-card__table-label {
  border-radius: 0 0 0 5px;
}

.sc-project-overview-card__emergency-table tr:last-child .sc-project-overview-card__table-value {
  border-radius: 0 0 5px 0;
}

.sc-project-overview-card__emergency-table tr + tr .sc-project-overview-card__table-label,
.sc-project-overview-card__emergency-table tr + tr .sc-project-overview-card__table-value {
  margin-top: -1px;
}

@media (max-width: 767px) {
  .sc-project-overview-card__inner {
    flex-wrap: wrap;
  }

  .sc-project-overview-card__primary,
  .sc-project-overview-card__emergency-table {
    flex-basis: 100%;
  }

  .sc-project-overview-card__table-label {
    white-space: normal;
  }
}

/* ── styles/sc-project-switcher.css ── */
:host {
  display: none;
  font-family: var(--sc-font-family-body);
}

:host([open]) {
  display: block;
  inset: 0;
  position: fixed;
  z-index: 1100;
}

* {
  box-sizing: border-box;
}

.sc-project-switcher__backdrop {
  background: rgb(12 10 62 / 0.25);
  border: 0;
  inset: 0;
  padding: 0;
  position: absolute;
}

.sc-project-switcher__panel {
  background: var(--sc-white-normal, #fff);
  border-radius: var(--sc-border-radius-xl, 16px);
  box-shadow: 0 0 20px rgb(0 0 0 / 0.1);
  color: var(--sc-brand-blue, #0c0a3e);
  display: flex;
  flex-direction: column;
  gap: 12px;
  left: 50%;
  max-height: calc(100% - 2rem);
  outline: none;
  overflow: hidden;
  padding: 16px 18px 18px;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(54.375rem, calc(100% - 2rem));
}

.sc-project-switcher__panel:focus-visible,
.sc-project-switcher__close:focus-visible,
.sc-project-switcher__search-input:focus-visible,
.sc-project-switcher__row:focus-visible {
  outline: 2px solid var(--sc-brand-blue);
  outline-offset: 2px;
}

.sc-project-switcher__header {
  align-items: flex-start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.sc-project-switcher__header h2 {
  font-size: var(--sc-font-size-body, 16px);
  font-weight: var(--sc-font-weight-semibold, 600);
  line-height: 1.2;
  margin: 0;
}

.sc-project-switcher__header p {
  color: var(--sc-brand-blue, #0c0a3e);
  font-size: var(--sc-font-size-caption, 12px);
  line-height: 1.4;
  margin: 2px 0 0;
  opacity: 0.7;
}

.sc-project-switcher__close {
  align-items: center;
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--sc-brand-blue, #0c0a3e);
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  font: inherit;
  font-size: 20px;
  height: 32px;
  justify-content: center;
  line-height: 1;
  padding: 0;
  width: 32px;
}

.sc-project-switcher__search {
  align-items: center;
  border: var(--sc-border-width-thin, 1px) solid var(--sc-gray-form-border, #d1d5dc);
  border-radius: var(--sc-border-radius-sm, 4px);
  display: flex;
  min-height: 32px;
}

.sc-project-switcher__search-input {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--sc-brand-blue, #0c0a3e);
  flex: 1 1 auto;
  font: inherit;
  font-size: var(--sc-font-size-caption, 12px);
  min-height: 32px;
  min-width: 0;
  outline: none;
  padding: 6px 10px;
}

.sc-project-switcher__search-input::placeholder {
  color: var(--sc-brand-blue, #0c0a3e);
  opacity: 0.35;
}

.sc-project-switcher__search sc-icons {
  --sc-icon-size: 16px;
  flex: 0 0 16px;
  height: 16px;
  margin-inline-end: 10px;
  width: 16px;
}

.sc-project-switcher__body {
  min-height: 0;
  overflow: auto;
}

.sc-project-switcher__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sc-project-switcher__row {
  align-items: center;
  background: var(--sc-white-normal, #fff);
  border: var(--sc-border-width-thin, 1px) solid var(--sc-gray-form-border, #d1d5dc);
  border-radius: var(--sc-border-radius-md, 8px);
  color: inherit;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  min-height: 77px;
  padding: 12px 16px;
  text-decoration: none;
}

.sc-project-switcher__identity {
  display: flex;
  flex: 1 1 12rem;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.sc-project-switcher__name {
  font-size: var(--sc-font-size-body, 14px);
  font-weight: var(--sc-font-weight-medium, 500);
  line-height: 1.2;
}

.sc-project-switcher__address {
  font-size: var(--sc-font-size-caption, 12px);
  line-height: 1.3;
  opacity: 0.75;
}

.sc-project-switcher__distance {
  align-items: center;
  background: var(--sc-brand-mint, #def3ef);
  border-radius: var(--sc-border-radius-sm, 4px);
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  font-size: 10px;
  gap: 4px;
  justify-content: center;
  line-height: 1.2;
  min-height: 55px;
  min-width: 9.25rem;
  padding: 8px 10px;
  text-align: center;
}

.sc-project-switcher__distance sc-icons {
  --sc-icon-size: 16px;
  height: 16px;
  width: 16px;
}

.sc-project-switcher__status,
.sc-project-switcher__empty {
  margin: 0;
  padding: 12px 0 4px;
}

.sc-project-switcher__status--loading {
  padding: 0;
}

.sc-project-switcher__skeleton {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sc-project-switcher__skeleton-row {
  border: var(--sc-border-width-thin, 1px) solid var(--sc-gray-form-border, #d1d5dc);
  border-radius: var(--sc-border-radius-md, 8px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
  min-height: 77px;
  padding: 12px 16px;
}

.sc-project-switcher__skeleton-line {
  animation: sc-project-switcher-pulse 1.4s ease-in-out infinite;
  background: var(--sc-blue-alpha10);
  border-radius: var(--sc-border-radius-sm, 4px);
  display: block;
  height: 14px;
  width: 42%;
}

.sc-project-switcher__skeleton-line--short {
  height: 12px;
  width: 68%;
}

@keyframes sc-project-switcher-pulse {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.45;
  }
}

.sc-project-switcher__status--error {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sc-project-switcher__visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

@media (max-width: 767px) {
  .sc-project-switcher__panel {
    max-height: calc(100% - 1rem);
    width: calc(100% - 1rem);
  }

  .sc-project-switcher__close,
  .sc-project-switcher__search-input,
  .sc-project-switcher__row {
    min-height: 44px;
  }
}

/* ── styles/sc-quick-action-card.css ── */
/* ScQuickActionCard — Quick action tile (Figma 279:11720). */

:host {
  display: block;
  min-width: 0;
}

.sc-quick-action-card {
  align-items: center;
  background: var(--sc-white-normal, #ffffff);
  border: 1px solid var(--sc-gray-normal, #e5e7eb);
  border-radius: 10px;
  box-sizing: border-box;
  color: var(--sc-blue-muted, #364153);
  display: flex;
  flex-direction: column;
  font-family: var(--sc-font-family-body);
  gap: 8px;
  height: 100%;
  justify-content: center;
  min-height: 100%;
  min-width: 0;
  padding: 16px 12px;
  text-decoration: none;
  width: 100%;
}

a.sc-quick-action-card:hover {
  border-color: var(--sc-blue-muted, #364153);
  color: var(--sc-brand-blue, #0c0a3e);
  text-decoration: none;
}

a.sc-quick-action-card:focus-visible {
  outline: 2px solid var(--sc-brand-blue, #0c0a3e);
  outline-offset: 2px;
}

.sc-quick-action-card__icon-box {
  align-items: center;
  background: var(--sc-brand-mint, #def3ef);
  border-radius: 10px;
  display: inline-flex;
  flex-shrink: 0;
  justify-content: center;
  padding: 12px;
}

.sc-quick-action-card__icon {
  --sc-icon-color: var(--sc-brand-blue, #0c0a3e);
  --sc-icon-size: 25px;
}

.sc-quick-action-card__label {
  display: -webkit-box;
  font-size: 11px;
  font-weight: var(--sc-font-weight-medium, 500);
  line-height: 14px;
  max-width: 100%;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-align: center;
  width: 100%;
  word-break: break-word;
}

/* ── styles/sc-record-info-field.css ── */
/* ScRecordInfoField — one row in sc-record-info */

:host {
  display: block;
}

.sc-record-info-field {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sc-space-md) var(--sc-space-lg);
  padding: 0.875rem var(--sc-space-xl);
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  font-family: var(--sc-font-family-body);
  color: var(--sc-brand-blue, #0c0a3e);
  border-bottom: var(--sc-border-width-thin) solid var(--sc-gray-normal, #e8e7ec);
}

:host(:last-of-type) .sc-record-info-field,
.sc-record-info-field--last {
  border-bottom: none;
}

.sc-record-info-field__main {
  display: flex;
  align-items: center;
  gap: var(--sc-space-md);
  flex: 1 1 12rem;
  min-width: 0;
}

.sc-record-info-field__icon {
  flex-shrink: 0;
  color: var(--sc-blue-muted, #374151);
}

.sc-record-info-field__label-row {
  display: inline-flex;
  align-items: center;
  gap: var(--sc-space-sm);
  min-width: 0;
}

.sc-record-info-field__label {
  font-size: 0.9375rem;
  line-height: 1.375rem;
  font-weight: var(--sc-font-weight-regular);
  min-width: 0;
  overflow-wrap: anywhere;
}

.sc-record-info-field__label-end {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.sc-record-info-field__label-end[hidden] {
  display: none;
}

.sc-record-info-field__status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sc-space-sm) var(--sc-space-md);
  flex: 0 1 auto;
  min-width: 0;
}

.sc-record-info-field__value {
  font-size: 0.9375rem;
  line-height: 1.375rem;
  color: var(--sc-brand-blue, #0c0a3e);
  text-align: right;
  overflow-wrap: anywhere;
}

/* The muted tone is on the text alone, so a ``value-end`` mark keeps its own colour. */
.sc-record-info-field__value-text {
  opacity: 0.7;
}

/* The value's last word and its ``value-end`` mark wrap as one. */
.sc-record-info-field__value-end {
  white-space: nowrap;
}

::slotted([slot='value-end']) {
  margin-inline-start: var(--sc-space-sm);
  vertical-align: middle;
}

.sc-record-info-field__actions {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sc-space-sm);
  min-width: 0;
}

.sc-record-info-field__actions--empty,
.sc-record-info-field__actions[hidden] {
  display: none;
}

/* ── styles/sc-record-info-header.css ── */
/* ScRecordInfoHeader — title, completion subtitle, progress, actions */

:host {
  display: block;
}

.sc-record-info-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sc-space-md) var(--sc-space-xl);
  padding: var(--sc-space-lg) var(--sc-space-xl);
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  border-bottom: var(--sc-border-width-thin) solid var(--sc-gray-normal, #e8e7ec);
  font-family: var(--sc-font-family-body);
  color: var(--sc-brand-blue, #0c0a3e);
  background: var(--sc-white-normal, #ffffff);
}

.sc-record-info-header--collapsible {
  cursor: pointer;
}

.sc-record-info-header__heading {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  flex: 1 1 12rem;
  min-width: 0;
}

.sc-record-info-header__title-row {
  display: flex;
  align-items: center;
  gap: var(--sc-space-sm);
  min-width: 0;
}

.sc-record-info-header__title {
  margin: 0;
  font-size: var(--sc-font-size-body);
  line-height: 1.375rem;
  font-weight: var(--sc-font-weight-semibold);
}

.sc-record-info-header__title-badge {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.sc-record-info-header__title-badge[hidden] {
  display: none;
}

.sc-record-info-header__subtitle {
  font-size: 0.8125rem;
  line-height: 1.125rem;
  color: var(--sc-blue-muted, #374151);
}

.sc-record-info-header__progress {
  display: flex;
  align-items: center;
  gap: var(--sc-space-sm);
  flex: 1 1 10rem;
  min-width: 0;
  max-width: 16rem;
}

.sc-record-info-header__progress-track {
  flex: 1 1 auto;
  min-width: 4rem;
  height: var(--sc-space-sm);
  border-radius: var(--sc-border-radius-pill);
  background: var(--sc-gray-light, #f9fafc);
  border: var(--sc-border-width-thin) solid var(--sc-gray-normal, #e8e7ec);
  overflow: hidden;
}

.sc-record-info-header__progress-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--sc-brand-blue, #0c0a3e);
  border-radius: inherit;
  transition: width 160ms ease;
}

.sc-record-info-header__percent {
  flex-shrink: 0;
  font-size: 0.8125rem;
  line-height: 1.125rem;
  color: var(--sc-blue-muted, #374151);
  font-variant-numeric: tabular-nums;
}

.sc-record-info-header__actions {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sc-space-sm);
  flex-shrink: 0;
  min-width: 0;
}

.sc-record-info-header__actions[hidden] {
  display: none;
}

:host([collapsible]:not([expanded])) .sc-record-info-header {
  border-bottom: none;
}

.sc-record-info-header__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: var(--sc-border-width-thin) solid var(--sc-gray-normal, #e8e7ec);
  border-radius: var(--sc-border-radius-pill, 999px);
  background: var(--sc-white-normal, #ffffff);
  color: var(--sc-brand-blue, #0c0a3e);
  cursor: pointer;
}

.sc-record-info-header__toggle:hover {
  background: var(--sc-gray-light, #f9fafc);
}

.sc-record-info-header__toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--sc-blue-alpha10, rgba(12, 10, 62, 0.12));
}

.sc-record-info-header__chevron {
  display: inline-flex;
  width: 12px;
  height: 12px;
  transition: transform 160ms ease;
}

.sc-record-info-header__chevron svg {
  display: block;
  width: 12px;
  height: 12px;
}

.sc-record-info-header__chevron--expanded {
  transform: rotate(180deg);
}

/* ── styles/sc-record-info.css ── */
/* ScRecordInfo — card shell for record field completion */

:host {
  display: block;
  width: 100%;
  min-width: 0;
}

.sc-record-info {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  color: var(--sc-brand-blue, #0c0a3e);
  font-family: var(--sc-font-family-body);
  background: var(--sc-white-normal, #ffffff);
  border: var(--sc-border-width-thin) solid var(--sc-gray-normal, #e8e7ec);
  border-radius: 14px;
}

/* Light-DOM: hide field rows when a collapsible card is closed.
   Use ``collapsed`` (not missing ``open``) so default-open markup does not
   need an ``open`` attribute before Lit hydrates.
   These selectors run from the global ``components.css`` bundle. */
sc-record-info[collapsible][collapsed] > sc-record-info-field {
  display: none;
}

/* ── styles/sc-search-bar.css ── */
/* ScSearchBar — listing search (Figma 5542:30569). */

:host {
  box-sizing: border-box;
  display: block;
  min-width: 0;
  width: 100%;
}

.sc-search-bar {
  align-items: center;
  background: var(--sc-white-alpha50, rgba(255, 255, 255, 0.5));
  /* Figma 5542:30571 border. No token matches #d1d5dc. */
  border: 1px solid #d1d5dc;
  border-radius: 10px;
  box-sizing: border-box;
  display: flex;
  height: 46px;
  min-width: 0;
  padding: 8px var(--sc-space-lg, 16px) 8px 41px;
  position: relative;
}

.sc-search-bar:focus-within {
  border-color: var(--sc-brand-blue, #0c0a3e);
  box-shadow: 0 0 0 3px var(--sc-blue-alpha10, #0c0a3e1a);
}

.sc-search-bar__icon {
  display: flex;
  left: 12px;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.sc-search-bar__input {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--sc-brand-blue, #0c0a3e);
  font-family: var(--sc-font-family-body, 'Work Sans', sans-serif);
  font-size: var(--sc-font-size-label, 14px);
  font-weight: var(--sc-font-weight-regular, 400);
  line-height: normal;
  margin: 0;
  min-width: 0;
  outline: none;
  padding: 0;
  width: 100%;
}

.sc-search-bar__input::placeholder {
  color: var(--sc-black-alpha50, rgba(0, 0, 0, 0.5));
  opacity: 1;
}

/* ── styles/sc-search-select.css ── */
/* ScSearchSelect — single-select trigger + floating search panel.
 *
 * The host stays a normal block in the document flow; the panel is absolute-
 * positioned beneath the trigger and overlaps subsequent content (no layout
 * shift on open / close). Sizing is driven by the consumer container so the
 * component drops into existing grid columns.
 */
:host {
  display: block;
  position: relative;
  font-family: var(--sc-font-family-body, 'Work Sans'), sans-serif;
}

.sc-search-select {
  position: relative;
}

/* ── Trigger ─────────────────────────────── */
.sc-search-select__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sc-space-sm, 8px);
  width: 100%;
  min-height: 32px;
  padding: 4px 8px 4px 10px;
  background: var(--sc-white-normal, #ffffff);
  border: 1px solid var(--sc-blue-alpha30, rgba(12, 10, 62, 0.3));
  border-radius: var(--sc-radius-sm, 5px);
  font: inherit;
  color: var(--sc-brand-blue, #0c0a3e);
  cursor: pointer;
  text-align: left;
}

.sc-search-select__trigger:hover {
  border-color: var(--sc-brand-blue, #0c0a3e);
}

.sc-search-select__trigger:focus-visible {
  outline: 2px solid rgb(12 10 62 / 0.35);
  outline-offset: 1px;
}

.sc-search-select[data-open='true'] .sc-search-select__trigger {
  border-color: var(--sc-brand-blue, #0c0a3e);
}

.sc-search-select__trigger-content {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}

.sc-search-select__placeholder {
  color: var(--sc-blue-muted, #6b7280);
  font-size: var(--sc-font-size-caption, 12px);
}

.sc-search-select__value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--sc-font-size-caption, 13px);
  color: var(--sc-brand-blue, #0c0a3e);
}

.sc-search-select__clear {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: var(--sc-blue-muted, #6b7280);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0;
}

.sc-search-select__clear:hover {
  background: rgb(12 10 62 / 0.08);
  color: var(--sc-brand-blue, #0c0a3e);
}

.sc-search-select__caret {
  flex-shrink: 0;
  color: var(--sc-blue-muted, #6b7280);
  font-size: 10px;
  transition: transform 0.15s ease;
}

.sc-search-select[data-open='true'] .sc-search-select__caret {
  transform: rotate(180deg);
}

/* ── Floating panel ──────────────────────── */
.sc-search-select__panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 1080;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--sc-white-normal, #ffffff);
  border: 1px solid var(--sc-blue-alpha30, rgba(12, 10, 62, 0.3));
  border-radius: var(--sc-radius-sm, 6px);
  box-shadow:
    0 2px 6px rgb(12 10 62 / 0.08),
    0 8px 24px rgb(12 10 62 / 0.12);
  padding: 8px;
  max-height: 300px;
}

.sc-search-select__panel-header {
  padding-bottom: 4px;
}

.sc-search-select__search {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--sc-blue-alpha20, rgba(12, 10, 62, 0.2));
  border-radius: var(--sc-radius-sm, 5px);
  font: inherit;
  font-size: var(--sc-font-size-caption, 13px);
  box-sizing: border-box;
}

.sc-search-select__search:focus {
  outline: 2px solid rgb(12 10 62 / 0.35);
  outline-offset: -1px;
}

.sc-search-select__list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  max-height: 240px;
}

.sc-search-select__row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 8px;
  border: 0;
  background: transparent;
  border-radius: var(--sc-radius-sm, 4px);
  cursor: pointer;
  font: inherit;
  font-size: var(--sc-font-size-caption, 13px);
  color: var(--sc-brand-blue, #0c0a3e);
  text-align: left;
}

.sc-search-select__row:hover {
  background: var(--sc-gray-light, #f9fafc);
}

.sc-search-select__row[data-selected='true'] {
  background: var(--sc-blue-alpha10, rgba(12, 10, 62, 0.06));
  font-weight: 500;
}

.sc-search-select__row-label {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sc-search-select__empty {
  padding: 12px 8px;
  text-align: center;
  color: var(--sc-blue-muted, #6b7280);
  font-size: var(--sc-font-size-caption, 13px);
}

/* ── styles/sc-section-card.css ── */
/* ScSectionCard — container card with a header strip and a body slot.

   Used throughout list pages (Insurance Clerk onboarding wizard, Virtual Gate
   sub-pages, project settings) where content is grouped into titled cards.
   Replaces ad-hoc Bootstrap `card / card-header / card-body` markup. */

:host {
  display: block;
}

/* ``fill`` consumers give the host its height (a viewport-tall app screen);
   the card then has a definite box to stretch into. */
:host([fill]) {
  height: 100%;
  min-height: 0;
}

.sc-section-card {
  box-sizing: border-box;
  width: 100%;
  background: #ffffff;
  border: 1px solid var(--sc-gray-normal, #E8E7EC);
  border-radius: 14px;
  /* No overflow:hidden here — it clipped absolutely-positioned overlays inside
     the body (Tom Select dropdowns, date pickers, …) at the card edge. The
     rounded corners are produced by rounding the header / body boxes instead. */
  color: var(--sc-brand-blue, #0C0A3E);
  font-family: var(--sc-font-family-body);
}

.sc-section-card__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  background: var(--sc-gray-light, #F9FAFC);
  border-bottom: 1px solid var(--sc-gray-normal, #E8E7EC);
  /* Inner radius = outer 14px − 1px border, so the gray strip doesn't poke
     square corners past the card's rounded outline. */
  border-radius: 13px 13px 0 0;
}

.sc-section-card__heading {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.sc-section-card__title {
  margin: 0;
  font-weight: 600;
  font-size: 16px;
  line-height: 22px;
  color: var(--sc-brand-blue, #0C0A3E);
}

.sc-section-card__subtitle {
  font-size: 13px;
  line-height: 18px;
  color: var(--sc-blue-muted, #374151);
}

.sc-section-card__actions {
  flex-shrink: 0;
  max-width: 100%;
}

.sc-section-card__body {
  padding: 18px 20px;
}

/* Full-height mode: the header keeps its natural height and the body takes the
   remainder as a column flex container, so slotted content can flex into the
   leftover space instead of overflowing the card. */
.sc-section-card--fill {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.sc-section-card--fill .sc-section-card__header {
  flex: 0 0 auto;
}

.sc-section-card--fill .sc-section-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

.sc-section-card--flush .sc-section-card__body {
  /* Some consumers (e.g. a table that wants edge-to-edge rows) want
     zero body padding. Edge-to-edge content needs the clipping the card
     itself no longer does, so flush bodies keep their own overflow:hidden
     with the matching bottom radius. */
  padding: 0;
  overflow: hidden;
  border-radius: 0 0 13px 13px;
}

/* ── styles/sc-sheet.css ── */
/* ScSheet — right/left/bottom overlay dialog shell. */

:host {
  --sc-sheet-max-width: 360px;
  --sc-sheet-backdrop-min: 44px;
  --sc-sheet-bottom-max-height: 85dvh;
  --sc-sheet-bottom-radius: var(--sc-border-radius-md);
  --sc-sheet-close-size: 32px;
  --sc-sheet-close-icon-size: 20px;
  --sc-sheet-title-font-weight: var(--sc-font-weight-medium, 500);

  display: block;
}

.sc-sheet__backdrop {
  background: rgb(12 10 62 / 0.25);
  border: 0;
  cursor: pointer;
  display: none;
  inset: 0;
  margin: 0;
  padding: 0;
  position: fixed;
  z-index: 1040;
}

:host([open]) .sc-sheet__backdrop {
  display: block;
}

.sc-sheet__panel {
  background: var(--sc-white, #fff);
  border-left: var(--sc-border-width-thin) solid var(--sc-gray-normal);
  bottom: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  font-family: var(--sc-font-family-body);
  height: 100dvh;
  max-height: 100dvh;
  position: fixed;
  top: 0;
  transform: translateX(100%);
  transition: transform 0.25s ease;
  width: min(var(--sc-sheet-max-width), 100vw);
  z-index: 1050;
}

:host([side='right']) .sc-sheet__panel {
  left: auto;
  right: 0;
  transform: translateX(100%);
}

:host([side='left']) .sc-sheet__panel {
  border-left: 0;
  border-right: var(--sc-border-width-thin) solid var(--sc-gray-normal);
  left: 0;
  right: auto;
  transform: translateX(-100%);
}

:host([side='bottom']) .sc-sheet__panel {
  border-left: 0;
  border-right: 0;
  border-top: var(--sc-border-width-thin) solid var(--sc-gray-normal);
  border-radius: var(--sc-sheet-bottom-radius) var(--sc-sheet-bottom-radius) 0 0;
  height: auto;
  left: 0;
  max-height: var(--sc-sheet-bottom-max-height);
  /* A bottom sheet is pinned to the very edge of the viewport, so on a surface that runs edge to
     edge — the mobile WebView does — its last row lands under the system gesture bar and reads as
     clipped even when the list is complete. `env()` is 0 unless the page opts in with
     `viewport-fit=cover`, so this is inert everywhere else, including the web app. */
  padding-bottom: env(safe-area-inset-bottom, 0px);
  right: 0;
  top: auto;
  transform: translateY(100%);
  width: 100%;
}

:host([open][side='right']) .sc-sheet__panel,
:host([open][side='left']) .sc-sheet__panel {
  transform: translateX(0);
}

:host([open][side='bottom']) .sc-sheet__panel {
  transform: translateY(0);
}

:host(:not([open])) .sc-sheet__panel {
  pointer-events: none;
  visibility: hidden;
}

@media (max-width: 369px) {
  :host([side='right']) .sc-sheet__panel,
  :host([side='left']) .sc-sheet__panel {
    width: min(var(--sc-sheet-max-width), calc(100vw - var(--sc-sheet-backdrop-min)));
  }
}

.sc-sheet__header {
  align-items: center;
  border-bottom: 1px solid var(--sc-gray-normal, #e5e7eb);
  display: flex;
  flex-shrink: 0;
  gap: 0.5rem;
  justify-content: space-between;
  min-height: 0;
  padding: 0.5rem 1.25rem 0.5625rem;
}

.sc-sheet__title {
  color: var(--sc-brand-blue, #0c0a3e);
  flex: 1 1 auto;
  font-family: var(--sc-font-family-body);
  font-size: var(--sc-font-size-xs, 0.75rem);
  font-weight: var(--sc-sheet-title-font-weight);
  line-height: 1;
  margin: 0;
  min-width: 0;
}

.sc-sheet__close {
  all: unset;
  align-items: center;
  border-radius: 999px;
  box-sizing: border-box;
  color: var(--sc-blue-muted, #374151);
  cursor: pointer;
  display: inline-flex;
  flex-shrink: 0;
  height: var(--sc-sheet-close-size);
  justify-content: center;
  line-height: 0;
  width: var(--sc-sheet-close-size);
}

.sc-sheet__close > span {
  align-items: center;
  display: inline-flex;
  height: var(--sc-sheet-close-icon-size);
  justify-content: center;
  line-height: 0;
  width: var(--sc-sheet-close-icon-size);
}

.sc-sheet__close svg {
  display: block;
  height: 100%;
  width: 100%;
}

.sc-sheet__close:hover {
  background: var(--sc-gray-light, #f9fafc);
  color: var(--sc-brand-blue, #0c0a3e);
}

.sc-sheet__close:focus-visible {
  outline: 2px solid var(--sc-brand-blue, #0c0a3e);
  outline-offset: 2px;
}

.sc-sheet__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: visible;
  /* `contain` keeps a touch scroll that reaches either end of the body from
     chaining out to the page behind the sheet. */
  overscroll-behavior-y: contain;
  overflow-y: auto;
  padding: 0;
}

.sc-sheet__footer {
  background: var(--sc-white, #fff);
  border-top: var(--sc-border-width-thin) solid var(--sc-gray-normal);
  bottom: 0;
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  gap: 0.625rem;
  padding: 1.0625rem 1.25rem;
  position: sticky;
}

/* Author `display: flex` beats the UA `[hidden]` rule — keep empty footers collapsed. */
.sc-sheet__footer[hidden] {
  display: none;
}

/* ── styles/sc-sidebar-categories.css ── */
/* ScSidebarCategories — full sidebar category stack */
.sc-sidebar-categories {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
  width: 100%;
  max-width: 14.5625rem;
  min-width: 0;
}

.sc-sidebar-categories__divider {
  width: 100%;
  height: 1px;
  background-color: var(--sc-gray-normal);
}

.sc-sidebar-categories__group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sc-space-sm);
  width: 100%;
}

/* ── styles/sc-sidebar-category-item.css ── */
/* ScSidebarCategoryItem — left-nav category row (Figma 251:5348) */
:host {
  display: block;
  width: 100%;
  min-width: 0;
}

:host([collapsed]) {
  width: auto;
  overflow: visible;
  position: relative;
  z-index: 1;
}

:host([collapsed]:hover),
:host([collapsed]:focus-within) {
  z-index: 5;
}

.sc-sidebar-category-item {
  font-family: var(--sc-font-family-body);
  color: #4a5565;

  display: flex;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
  gap: var(--sc-space-sm);

  width: 100%;
  min-width: 0;
  padding: var(--sc-space-sm) var(--sc-space-md);
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  cursor: default;
  position: relative;
}

a.sc-sidebar-category-item {
  cursor: pointer;
}

.sc-sidebar-category-item--active {
  background-color: var(--sc-brand-mint);
}

.sc-sidebar-category-item--hover {
  background-color: #f1f1f1;
}

.sc-sidebar-category-item--inactive {
  opacity: 0.5;
}

a.sc-sidebar-category-item--inactive:hover {
  opacity: 1;
  background-color: #f1f1f1;
}

.sc-sidebar-category-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.sc-sidebar-category-item__label {
  font-size: var(--sc-font-size-caption);
  font-weight: var(--sc-font-weight-medium);
  line-height: 1.3;
  text-align: left;
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

:host([collapsed]) .sc-sidebar-category-item__label {
  overflow-wrap: normal;
}

/* Bottom tab strip (Smart Binder mobile) — icon above label. The strip sizes the cells (equal
   grid columns), so the host only stretches to fill one. */
:host([layout-inline]) {
  display: block;
  box-sizing: border-box;
  min-width: 0;
}

:host([layout-inline]) .sc-sidebar-category-item {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-width: 0;
  min-height: 60px;
  padding: 8px 4px;
  border-radius: 0;
  background-color: transparent;
  white-space: nowrap;
}

:host([layout-inline]) .sc-sidebar-category-item--active {
  background-color: transparent;
  color: var(--sc-brand-blue, #0c0a3e);
}

:host([layout-inline]) .sc-sidebar-category-item--inactive {
  opacity: 1;
  color: #9ca3af;
}

:host([layout-inline]) a.sc-sidebar-category-item--inactive:hover,
:host([layout-inline]) a.sc-sidebar-category-item--inactive:focus-visible {
  opacity: 1;
  background-color: transparent;
  color: var(--sc-brand-blue, #0c0a3e);
}

:host([layout-inline]) .sc-sidebar-category-item__icon {
  width: 26px;
  height: 26px;
  color: inherit;
}

:host([layout-inline]) .sc-sidebar-category-item__label {
  flex: 0 1 auto;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  overflow-wrap: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  font-size: var(--sc-font-size-caption, 12px);
  font-weight: var(--sc-font-weight-medium);
  line-height: 1.2;
  color: inherit;
}

:host([layout-inline]) .sc-sidebar-category-item--active .sc-sidebar-category-item__label {
  font-weight: var(--sc-font-weight-semibold, 600);
}

:host([layout-inline]) .sc-sidebar-category-item__count {
  display: none;
}

.sc-sidebar-category-item__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 22px;
  padding: 0 0.5rem;
  border-radius: var(--sc-border-radius-pill);
  flex: 0 0 auto;
  margin-left: auto;
}

.sc-sidebar-category-item__count--active {
  background-color: var(--sc-white-normal);
}

.sc-sidebar-category-item__count-text {
  font-size: var(--sc-font-size-caption);
  font-weight: var(--sc-font-weight-medium);
  line-height: 18px;
  text-align: center;
  color: #4a5565;
}

/* Collapsed (icon-only) rail with floating label on hover/focus */
.sc-sidebar-category-item--collapsed {
  width: 32px;
  height: 32px;
  padding: 0;
  gap: 0;
  justify-content: center;
  overflow: visible;
}

.sc-sidebar-category-item--collapsed.sc-sidebar-category-item--inactive {
  opacity: 1;
  color: #4a5565;
}

.sc-sidebar-category-item--collapsed.sc-sidebar-category-item--inactive .sc-sidebar-category-item__icon {
  opacity: 0.5;
}

a.sc-sidebar-category-item--collapsed.sc-sidebar-category-item--inactive:hover .sc-sidebar-category-item__icon,
a.sc-sidebar-category-item--collapsed.sc-sidebar-category-item--inactive:focus-visible .sc-sidebar-category-item__icon {
  opacity: 1;
}

.sc-sidebar-category-item--collapsed .sc-sidebar-category-item__label {
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
  flex: 0 0 auto;
  width: max-content;
  max-width: 220px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--sc-brand-blue, #0c0a3e);
  color: var(--sc-white-normal, #fff);
  font-size: 12px;
  line-height: 1.4;
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(12, 10, 62, 0.18);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 11;
  transition:
    opacity 0.15s ease,
    transform 0.15s ease,
    visibility 0.15s ease;
}

.sc-sidebar-category-item--collapsed:hover .sc-sidebar-category-item__label,
.sc-sidebar-category-item--collapsed:focus-visible .sc-sidebar-category-item__label,
.sc-sidebar-category-item--collapsed:focus-within .sc-sidebar-category-item__label {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}

/* ── styles/sc-smart-binder.css ── */
/* ScSmartBinder — project feature navigator card (Figma 237:616). */

:host {
  /* Shadow on the host so ancestors/inner overflow cannot clip the card edge. */
  box-shadow: 0 0 4px rgb(0 0 0 / 0.25);
  border-radius: 10px;
  display: block;
  min-width: 0;
  width: 100%;
}

.sc-smart-binder {
  background: rgb(255 255 255 / 0.8);
  border-radius: 10px;
  box-sizing: border-box;
  color: var(--sc-brand-blue, #0c0a3e);
  display: flex;
  flex-direction: column;
  font-family: "Work Sans", var(--sc-font-family-body);
  gap: 14px;
  min-width: 0;
  padding: 10px;
  width: 100%;
}

.sc-smart-binder__header {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  min-width: 0;
  width: 100%;
}

.sc-smart-binder__header-link {
  color: inherit;
  cursor: pointer;
  text-decoration: none;
}

.sc-smart-binder__header-link:hover .sc-smart-binder__title,
.sc-smart-binder__header-link:focus-visible .sc-smart-binder__title {
  text-decoration: underline;
}

.sc-smart-binder__header-link:hover .sc-smart-binder__open,
.sc-smart-binder__header-link:focus-visible .sc-smart-binder__open {
  background: rgb(12 10 62 / 0.18);
}

.sc-smart-binder__header-link:focus-visible {
  border-radius: 2px;
  outline: 2px solid rgb(12 10 62 / 0.35);
  outline-offset: 2px;
}

.sc-smart-binder__title {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.25;
  margin: 0;
  min-width: 0;
  text-transform: uppercase;
}

/* Decorative circular chevron inside the header link (Figma 237:619). */
.sc-smart-binder__open {
  --sc-icon-color: var(--sc-brand-blue, #0c0a3e);

  align-items: center;
  background: rgb(12 10 62 / 0.1);
  border-radius: 50%;
  color: var(--sc-brand-blue, #0c0a3e);
  display: inline-flex;
  flex: 0 0 auto;
  height: 30px;
  justify-content: center;
  transition: background-color 0.15s ease;
  width: 30px;
}

.sc-smart-binder__open sc-icons {
  height: 8px;
  width: 5px;
}

.sc-smart-binder__open-icon {
  display: block;
  transform: rotate(180deg);
}

.sc-smart-binder__search-wrap {
  min-width: 0;
  width: 100%;
}

/* Role-priority chips: wrap, no horizontal scroll; server DOM order preserved. */
.sc-smart-binder__pills {
  align-content: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
  overflow: visible;
  width: 100%;
}

.sc-smart-binder__pills slot {
  display: contents;
}

.sc-smart-binder__pills ::slotted(.sc-smart-binder__pill) {
  flex: 0 0 auto;
  max-width: 100%;
}

.sc-smart-binder__quick-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  width: 100%;
}

.sc-smart-binder__quick-actions-label {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25;
  margin: 0;
  min-width: 0;
  text-transform: uppercase;
}

.sc-smart-binder__quick-actions-scroll {
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  width: 100%;
  -webkit-overflow-scrolling: touch;
}

.sc-smart-binder__quick-actions-track {
  align-items: stretch;
  box-sizing: border-box;
  display: flex;
  gap: 8px;
  min-width: 100%;
  width: max-content;
}

.sc-smart-binder__quick-actions-track sc-quick-action-card {
  flex: 1 0 5.5rem;
  max-width: 7.25rem;
  min-width: 5.5rem;
}

/* ── styles/sc-ss-actionable-panel.css ── */
/* ScSsActionablePanel — actionable insights panel for a single SafetyScore entity */

:host {
  display: block;
  width: 100%;
  font-family: var(--sc-font-family-body);
  color: var(--sc-brand-blue);
}

.sc-ss-actionable-panel {
  box-sizing: border-box;
  background: linear-gradient(
    to bottom,
    rgba(184, 230, 221, 0.5) 0%,
    rgba(204, 229, 224, 0.2) 100%
  );
  border-radius: 17px;
  padding: clamp(12px, 1.5vw, 20px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Header row ─────────────────────────────────── */

.sc-ss-actionable-panel__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.sc-ss-actionable-panel__entity {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 16rem;
  min-width: 0;
}

.sc-ss-actionable-panel__entity-type {
  font-weight: var(--sc-font-weight-medium);
  font-size: var(--sc-font-size-caption);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.6;
}

.sc-ss-actionable-panel__entity-name {
  font-weight: var(--sc-font-weight-semibold);
  font-size: clamp(1rem, 0.9rem + 0.6vw, 1.25rem);
  line-height: 1.2;
  word-break: break-word;
}

.sc-ss-actionable-panel__entity-date {
  font-size: var(--sc-font-size-caption);
  font-style: italic;
  opacity: 0.7;
}

.sc-ss-actionable-panel__score-block {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* ── Risk band badge ────────────────────────────── */

.sc-ss-actionable-panel__band {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--sc-border-radius-pill);
  font-weight: var(--sc-font-weight-semibold);
  font-size: var(--sc-font-size-caption);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.sc-ss-actionable-panel__band--excellent {
  background-color: var(--sc-progress-tier90-chip-bg);
  color: var(--sc-white-normal);
}
.sc-ss-actionable-panel__band--good {
  background-color: var(--sc-progress-tier75-chip-bg);
  color: var(--sc-white-normal);
}
.sc-ss-actionable-panel__band--fair {
  background-color: var(--sc-progress-tier60-chip-bg);
  color: var(--sc-brand-blue);
}
.sc-ss-actionable-panel__band--poor {
  background-color: var(--sc-progress-tier40-chip-bg);
  color: var(--sc-brand-blue);
}
.sc-ss-actionable-panel__band--critical {
  background-color: var(--sc-progress-tier0-chip-bg);
  color: var(--sc-white-normal);
}
.sc-ss-actionable-panel__band--unknown {
  background-color: var(--sc-gray-normal);
  color: var(--sc-blue-muted);
}

/* ── Section heading ────────────────────────────── */

.sc-ss-actionable-panel__section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sc-ss-actionable-panel__section-title {
  font-weight: var(--sc-font-weight-semibold);
  font-size: var(--sc-font-size-label);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.7;
}

/* Short explainer under a section title (issue #5026: clarify what the bars / numbers /
 * check marks mean so the sections aren't confusing). */
.sc-ss-actionable-panel__section-caption {
  margin-top: -4px;
  font-size: var(--sc-font-size-caption);
  font-weight: var(--sc-font-weight-regular);
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.6;
}

/* ── Reason cards ───────────────────────────────── */

.sc-ss-actionable-panel__reasons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 10px;
}

.sc-ss-actionable-panel__reason {
  background-color: var(--sc-white-normal);
  border-radius: var(--sc-border-radius-md);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.sc-ss-actionable-panel__reason-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.sc-ss-actionable-panel__reason-rank {
  font-weight: var(--sc-font-weight-semibold);
  font-size: var(--sc-font-size-caption);
  color: var(--sc-blue-alpha50);
}

.sc-ss-actionable-panel__reason-lost {
  font-weight: var(--sc-font-weight-semibold);
  font-size: var(--sc-font-size-caption);
  color: var(--sc-brand-red);
  white-space: nowrap;
}

.sc-ss-actionable-panel__reason-category {
  font-weight: var(--sc-font-weight-semibold);
  font-size: var(--sc-font-size-label);
  word-break: break-word;
}

.sc-ss-actionable-panel__reason-detail {
  font-size: var(--sc-font-size-caption);
  line-height: 1.4;
  opacity: 0.85;
  word-break: break-word;
}

.sc-ss-actionable-panel__reason--empty {
  opacity: 0.5;
  font-style: italic;
}

/* ── Component breakdown bars ───────────────────── */

.sc-ss-actionable-panel__components {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sc-ss-actionable-panel__component {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.sc-ss-actionable-panel__component-label {
  font-size: var(--sc-font-size-label);
  font-weight: var(--sc-font-weight-medium);
  min-width: 0;
  word-break: break-word;
}

.sc-ss-actionable-panel__component-value {
  font-size: var(--sc-font-size-caption);
  font-weight: var(--sc-font-weight-semibold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  opacity: 0.8;
}

.sc-ss-actionable-panel__component-bar {
  grid-column: 1 / -1;
  height: 6px;
  background-color: var(--sc-blue-alpha10);
  border-radius: var(--sc-border-radius-pill);
  overflow: hidden;
}

.sc-ss-actionable-panel__component-bar-fill {
  height: 100%;
  border-radius: var(--sc-border-radius-pill);
  transition: width 0.2s ease;
}

.sc-ss-actionable-panel__component--budget .sc-ss-actionable-panel__component-bar-fill {
  background-color: var(--sc-progress-tier75-chip-bg);
}

.sc-ss-actionable-panel__component--penalty .sc-ss-actionable-panel__component-bar-fill {
  background-color: var(--sc-brand-red);
}

/* ── Raw signals chips ──────────────────────────── */

.sc-ss-actionable-panel__signals {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sc-ss-actionable-panel__signal {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 4px 10px;
  background-color: var(--sc-white-normal);
  border-radius: var(--sc-border-radius-pill);
  font-size: var(--sc-font-size-caption);
}

.sc-ss-actionable-panel__signal-label {
  opacity: 0.7;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.sc-ss-actionable-panel__signal-value {
  font-weight: var(--sc-font-weight-semibold);
  font-variant-numeric: tabular-nums;
}

/* Flag signals (document on file / missing) tinted so they read distinctly from the
 * count/metric chips alongside them (issue #5026). */
.sc-ss-actionable-panel__signal--on {
  background-color: rgba(114, 170, 60, 0.16);
}

.sc-ss-actionable-panel__signal--on .sc-ss-actionable-panel__signal-value {
  color: #255e14;
}

.sc-ss-actionable-panel__signal--off {
  background-color: rgba(240, 88, 82, 0.14);
}

.sc-ss-actionable-panel__signal--off .sc-ss-actionable-panel__signal-value {
  color: #b3261e;
}

/* ── Empty state ────────────────────────────────── */

.sc-ss-actionable-panel--empty {
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
}

.sc-ss-actionable-panel__empty-message {
  font-size: var(--sc-font-size-body);
  font-style: italic;
  opacity: 0.7;
}

/* ── styles/sc-ss-clerks-take.css ── */
/* ScSsClerksTake — soft AI-summary callout that sits above the actionable panel */

:host {
  display: block;
  width: 100%;
  font-family: var(--sc-font-family-body);
  color: var(--sc-brand-blue);
}

.sc-ss-clerks-take {
  box-sizing: border-box;
  position: relative;
  padding: clamp(12px, 1.4vw, 18px) clamp(14px, 1.6vw, 20px);
  border-radius: 17px;
  background:
    radial-gradient(120% 160% at 0% 0%, rgba(110, 192, 224, 0.18) 0%, rgba(110, 192, 224, 0) 55%),
    radial-gradient(140% 180% at 100% 100%, rgba(184, 230, 221, 0.35) 0%, rgba(184, 230, 221, 0) 60%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.65) 0%, rgba(238, 252, 250, 0.65) 100%);
  border: 1px solid rgba(12, 10, 62, 0.06);
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}

/* Subtle moving sheen during loading */
.sc-ss-clerks-take--loading::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 30%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 70%
  );
  animation: sc-ss-clerks-shimmer 1.6s linear infinite;
  pointer-events: none;
}

@keyframes sc-ss-clerks-shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ── Header row ─────────────────────────────────── */

.sc-ss-clerks-take__header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.sc-ss-clerks-take__sparkle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: linear-gradient(135deg, #6EC0E0 0%, #B8E6DD 100%);
  color: var(--sc-white-normal);
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(12, 10, 62, 0.12);
}

.sc-ss-clerks-take__title {
  font-weight: var(--sc-font-weight-semibold);
  font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.05rem);
  letter-spacing: 0.01em;
}

.sc-ss-clerks-take__badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--sc-border-radius-pill);
  background-color: rgba(12, 10, 62, 0.08);
  color: var(--sc-brand-blue);
  font-size: 11px;
  font-weight: var(--sc-font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.sc-ss-clerks-take__badge--ai {
  background: linear-gradient(135deg, rgba(110, 192, 224, 0.4) 0%, rgba(184, 230, 221, 0.5) 100%);
  color: var(--sc-brand-blue);
}

/* ── Body ───────────────────────────────────────── */

.sc-ss-clerks-take__body {
  font-size: var(--sc-font-size-label);
  line-height: 1.5;
  word-break: break-word;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sc-ss-clerks-take__para {
  margin: 0;
}

.sc-ss-clerks-take__list {
  margin: 0;
  padding-left: 1.15em;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.sc-ss-clerks-take__list li {
  margin: 0;
}

.sc-ss-clerks-take__body strong {
  font-weight: var(--sc-font-weight-semibold);
}

.sc-ss-clerks-take__body em {
  font-style: italic;
}

/* Loading skeleton lines */
.sc-ss-clerks-take__skeleton {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 4px;
}

.sc-ss-clerks-take__skeleton-line {
  height: 10px;
  border-radius: var(--sc-border-radius-sm);
  background-color: rgba(12, 10, 62, 0.08);
}

.sc-ss-clerks-take__skeleton-line:nth-child(1) { width: 90%; }
.sc-ss-clerks-take__skeleton-line:nth-child(2) { width: 75%; }
.sc-ss-clerks-take__skeleton-line:nth-child(3) { width: 60%; }

/* Hidden state — element renders nothing visible */
.sc-ss-clerks-take--hidden {
  display: none;
}

/* ── styles/sc-ss-dates.css ── */
/* ScSsDates — horizontal date axis for SafetyScore graph */
.sc-ss-dates {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 28px;
  box-sizing: border-box;
}

.sc-ss-dates__item {
  all: unset;
  cursor: pointer;
  font-family: var(--sc-font-family-body);
  font-weight: var(--sc-font-weight-regular);
  font-size: 10px;
  line-height: normal;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--sc-brand-blue);
  opacity: 0.5;
  white-space: nowrap;
}

.sc-ss-dates__item--selected {
  opacity: 1;
  background-color: var(--sc-brand-blue);
  color: var(--sc-white-normal);
  padding: 2px 6px;
  border-radius: 10px;
}

/* ── styles/sc-ss-label.css ── */
/* ScSsLabel — small score-type icon badge */
.sc-ss-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 2px var(--sc-space-xs);
  border-radius: 2px;
  background-color: var(--sc-brand-blue);
  color: var(--sc-white-normal);
  line-height: 0;
}

.sc-ss-label__icon {
  display: inline-flex;
  width: 20px;
  height: 15px;
}

.sc-ss-label__icon svg {
  width: 100%;
  height: 100%;
}

/* ── styles/sc-ss-listing.css ── */
/* ScSsListing — SafetyScore table row (responsive grid; avoid fixed px columns that break in narrow layouts) */
.sc-ss-listing {
  display: grid;
  align-items: center;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  font-family: var(--sc-font-family-body);
  /* Trailing track keeps the rightmost column off the parent scrollbar gutter
   * (otherwise the global-score chip / header text touches it on overflowing lists). */
  /* checkbox | divider | company (flex) | crew | global | gutter */
  grid-template-columns: 52px 1px minmax(0, 1fr) minmax(88px, auto) minmax(104px, auto) 12px;
  column-gap: 0;
}

.sc-ss-listing--no-global {
  grid-template-columns: 52px 1px minmax(0, 1fr) minmax(88px, auto) 12px;
}

/* ── Header ─────────────────────────── */
.sc-ss-listing--header {
  position: sticky;
  top: 0;
  z-index: 2;
  height: 43px;
  background-color: var(--sc-gray-light);
  border-bottom: 1px solid var(--sc-gray-normal, #E8E7EC);
  border-radius: 10px 10px 0 0;
}

.sc-ss-listing--header .sc-ss-listing__col-company,
.sc-ss-listing--header .sc-ss-listing__col-crew,
.sc-ss-listing--header .sc-ss-listing__col-global {
  font-size: var(--sc-font-size-caption);
  font-weight: var(--sc-font-weight-regular);
  line-height: 18px;
  color: var(--sc-blue-muted, #374151);
  white-space: nowrap;
}

.sc-ss-listing__col-company {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sc-ss-listing__col-crew,
.sc-ss-listing__col-global {
  justify-self: center;
  text-align: center;
  text-transform: capitalize;
}

/* Without the global column the crew column still centers in its track (was right-aligned
 * here previously — design feedback in issue #5026 asked for centered). */
.sc-ss-listing--no-global .sc-ss-listing__col-crew {
  justify-self: center;
}

/* ── Item ───────────────────────────── */
.sc-ss-listing--item {
  height: 52px;
  background: linear-gradient(90deg, rgba(222, 243, 239, 0.05) 0%, rgba(222, 243, 239, 0.05) 100%),
    linear-gradient(90deg, var(--sc-white-normal) 0%, var(--sc-white-normal) 100%);
  border-bottom: 1px solid var(--sc-gray-normal, #E8E7EC);
}

.sc-ss-listing--selected {
  background: linear-gradient(90deg, rgba(222, 243, 239, 0.35) 0%, rgba(222, 243, 239, 0.35) 100%),
    linear-gradient(90deg, var(--sc-white-normal) 0%, var(--sc-white-normal) 100%);
}

/* ── Checkbox / selector ────────────── */
.sc-ss-listing__selector {
  all: unset;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 100%;
  min-height: 43px;
  flex-shrink: 0;
  align-self: stretch;
}

.sc-ss-listing--item .sc-ss-listing__selector {
  min-height: 52px;
}

.sc-ss-listing__checkbox {
  display: block;
  width: 12px;
  height: 12px;
  border: 1px solid var(--sc-brand-blue);
  border-radius: 3px;
  background-color: var(--sc-white-normal);
  position: relative;
  box-sizing: border-box;
}

.sc-ss-listing__checkbox::after {
  content: '';
  position: absolute;
  inset: 25%;
  border: 1px solid var(--sc-brand-blue);
  border-radius: 1px;
  opacity: 0.2;
}

.sc-ss-listing__checkbox--checked::after {
  opacity: 1;
  background-color: var(--sc-brand-blue);
}

/* ── Divider between checkbox and content ── */
.sc-ss-listing__divider {
  width: 100%;
  height: 100%;
  min-height: 43px;
  align-self: stretch;
  border-right: 1px solid var(--sc-gray-normal, #E8E7EC);
  flex-shrink: 0;
  box-sizing: border-box;
}

.sc-ss-listing--header .sc-ss-listing__divider {
  border-right-color: var(--sc-gray-normal, #E8E7EC);
}

.sc-ss-listing--item .sc-ss-listing__divider {
  min-height: 52px;
}

/* ── Company name ───────────────────── */
.sc-ss-listing__company-name {
  min-width: 0;
  font-size: var(--sc-font-size-label);
  font-weight: var(--sc-font-weight-regular);
  font-style: italic;
  line-height: 18px;
  color: var(--sc-brand-blue);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  flex-direction: column;
  gap: 1px;
  justify-content: center;
}

.sc-ss-listing--selected .sc-ss-listing__company-name {
  font-weight: var(--sc-font-weight-bold);
}

/* ── Stale crew state ──────────────────
 * The row stays visible but reads as "no recent data" — the crew chip is greyed via
 * the sc-score `neutral` modifier, and a small caption surfaces the last-scored date.
 */
.sc-ss-listing--stale .sc-ss-listing__company-name {
  color: rgba(12, 10, 62, 0.6);
}

.sc-ss-listing__stale-caption {
  font-size: 10px;
  font-style: normal;
  font-weight: var(--sc-font-weight-regular);
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: rgba(12, 10, 62, 0.45);
}

/* ── Score columns (chips centered in column) ────────────────── */
.sc-ss-listing__crew-score,
.sc-ss-listing__global-score {
  display: flex;
  justify-content: center;
  justify-self: center;
  min-width: 0;
}

/* Crew score chip stays centered when there is no global column (was right-aligned). */
.sc-ss-listing--no-global .sc-ss-listing__crew-score {
  justify-self: center;
}

/* ── styles/sc-ss-profile-listing.css ── */
.sc-ss-profile-listing {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 10px;
  min-height: 42px;
  border-left: 1px solid #f3f4f6;
  border-right: 1px solid #f3f4f6;
  border-bottom: 1px solid #f3f4f6;
  padding: 8px 12px;
  background: #fff;
}

.sc-ss-profile-listing--header {
  border-top: 1px solid #f3f4f6;
  border-radius: 10px 10px 0 0;
  font-family: "Work Sans", sans-serif;
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #0c0a3e;
  opacity: 0.65;
  background: #f8fafc;
}

.sc-ss-profile-listing--item {
  font-family: "Work Sans", sans-serif;
}

.sc-ss-profile-listing__item-label {
  color: #0c0a3e;
  font-size: 14px;
  line-height: 20px;
}

.sc-ss-profile-listing__col-score,
.sc-ss-profile-listing__item-score {
  justify-self: end;
}

/* ── styles/sc-ss-timeframe.css ── */
/* ScSsTimeframe — timeframe period selector for SafetyScore */

/* Wrapper for variant with companies */
.sc-ss-timeframe__wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 4px;
  border-radius: 16px;
  background-color: #D0E5E1;
  width: 100%;
  box-sizing: border-box;
}

/* Pills bar (shared between default and company variants) */
.sc-ss-timeframe__pills {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 4px 14px;
  border-radius: 20px;
  background-color: var(--sc-white-normal);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
  width: 100%;
  box-sizing: border-box;
}

.sc-ss-timeframe__pills--static {
  background: transparent;
  box-shadow: none;
  gap: 0;
  padding: 0;
  width: auto;
}

.sc-ss-timeframe__wrapper .sc-ss-timeframe__pills {
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
}

/* Individual option button */
.sc-ss-timeframe__option {
  all: unset;
  cursor: pointer;
  font-family: var(--sc-font-family-body);
  font-weight: var(--sc-font-weight-regular);
  font-size: 10px;
  line-height: normal;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--sc-brand-blue);
  white-space: nowrap;
}

.sc-ss-timeframe__option--selected {
  background-color: var(--sc-brand-mint);
  padding: 2px 6px;
  border-radius: 10px;
}

/* Company header row */
.sc-ss-timeframe__companies {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 5px;
  box-sizing: border-box;
}

.sc-ss-timeframe__company-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 15px;
  padding-left: 5px;
  min-width: 0;
  overflow: hidden;
}

.sc-ss-timeframe__company {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.sc-ss-timeframe__company-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.sc-ss-timeframe__company-name {
  font-family: var(--sc-font-family-body);
  font-weight: var(--sc-font-weight-regular);
  font-style: italic;
  font-size: 14px;
  line-height: 18px;
  text-transform: uppercase;
  color: var(--sc-brand-blue);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}

/* Close button */
.sc-ss-timeframe__close {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 15px;
  color: var(--sc-brand-blue);
  flex-shrink: 0;
}

.sc-ss-timeframe__close svg {
  width: 10px;
  height: 10px;
}

/* ── styles/sc-ss-touchpoint.css ── */
/* ScSsTouchpoint — graph touchpoint marker with score circle */
.sc-ss-touchpoint {
  position: relative;
  width: 58px;
  height: 97px;
}

.sc-ss-touchpoint__dot {
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: var(--sc-blue-alpha50);
  border: 3px solid var(--sc-brand-blue);
  box-sizing: border-box;
}

.sc-ss-touchpoint__circle {
  position: absolute;
  top: 39px;
  left: 0;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background-color: var(--sc-white-normal);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
  /* Grid centers the nested sc-circular-progress ring on both axes (avoids inline/baseline offset). */
  display: grid;
  place-items: center;
  place-content: center;
  line-height: 0;
}

.sc-ss-touchpoint__circle sc-circular-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
}

/* Low scores sit near the x-axis: put the score circle above the line so week labels stay readable. */
.sc-ss-touchpoint--placement-above .sc-ss-touchpoint__dot {
  top: auto;
  bottom: 0;
}

.sc-ss-touchpoint--placement-above .sc-ss-touchpoint__circle {
  top: 0;
  bottom: auto;
}

.sc-ss-touchpoint__date {
  background: var(--sc-white-normal, #fff);
  border-radius: 4px;
  box-shadow: 0 0 4px rgb(0 0 0 / 0.25);
  color: var(--sc-brand-blue, #0c0a3e);
  font-family: var(--sc-font-family-body, 'Work Sans', sans-serif);
  font-size: 11px;
  font-weight: var(--sc-font-weight-semibold, 600);
  left: calc(100% + 6px);
  line-height: 1.2;
  padding: 2px 6px;
  position: absolute;
  top: 52px;
  white-space: nowrap;
}

.sc-ss-touchpoint__date--start {
  left: auto;
  right: calc(100% + 6px);
}

.sc-ss-touchpoint--placement-above .sc-ss-touchpoint__date {
  top: 16px;
}

/* ── styles/sc-stat-tile.css ── */
/* ScStatTile — counted-bucket summary tile (Figma node 4323-48038).

   A row of these sits above a filterable listing and reports how the rows split
   across states. The mint fill is the design's default; a consumer that needs a
   bucket to read differently overrides ``--sc-stat-tile-bg`` on the host rather
   than reaching into the shadow root. */

:host {
  display: block;
  min-width: 0;
}

.sc-stat-tile {
  box-sizing: border-box;
  /* Fills whatever track the consumer's grid gives it, and stays readable when a
     translated caption wraps to two lines. */
  height: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 20px;
  border-radius: var(--sc-radius-lg, 12px);
  background: var(--sc-stat-tile-bg, var(--sc-brand-mint, #DEF3EF));
  color: var(--sc-brand-blue, #0C0A3E);
  font-family: var(--sc-font-family-body);
}

.sc-stat-tile__caption {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.sc-stat-tile__emoji {
  flex: 0 0 auto;
  font-size: 20px;
  line-height: 1;
}

.sc-stat-tile__label {
  min-width: 0;
  overflow-wrap: anywhere;
}

.sc-stat-tile__value {
  margin: 0;
  font-size: 32px;
  font-weight: 500;
  line-height: 1.1;
}

/* Status dot: decorative, the label says the status. */
.sc-stat-tile__dot {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.sc-stat-tile__dot--positive {
  background: var(--sc-count-green-stroke, #10b981);
}

.sc-stat-tile__dot--warning {
  background: var(--sc-count-yellow-stroke, #f1cb33);
}

.sc-stat-tile__dot--negative {
  background: var(--sc-count-red-stroke, #c0133d);
}

.sc-stat-tile__dot--alert {
  background: var(--sc-count-orange-stroke, #b3540e);
}

.sc-stat-tile__hint {
  margin: 0;
  min-width: 0;
  font-size: var(--sc-font-size-caption, 12px);
  line-height: 16px;
  color: var(--sc-blue-muted, #374151);
  overflow-wrap: anywhere;
}

/* ── Filter tile (href) ────────────────────────────────────────────────────────────────────
   Same lift and focus ring the Manage Companies tile buttons use. The picked tile gets an
   inset brand-blue outline — the same mark sc-tab-filters puts on its picked chip — drawn
   with box-shadow so selecting a tile never changes its size. */
.sc-stat-tile--link {
  text-decoration: none;
  cursor: pointer;
  transition:
    box-shadow 120ms ease,
    transform 120ms ease;
}

.sc-stat-tile--link:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(12, 10, 62, 0.12);
}

.sc-stat-tile--link:focus-visible {
  outline: var(--sc-border-width-medium, 2px) solid var(--sc-brand-blue, #0C0A3E);
  outline-offset: 2px;
}

.sc-stat-tile--selected {
  box-shadow: inset 0 0 0 var(--sc-border-width-medium, 2px) var(--sc-brand-blue, #0C0A3E);
}

.sc-stat-tile--selected:hover {
  box-shadow:
    inset 0 0 0 var(--sc-border-width-medium, 2px) var(--sc-brand-blue, #0C0A3E),
    0 2px 8px rgba(12, 10, 62, 0.12);
}

@media (prefers-reduced-motion: reduce) {
  .sc-stat-tile--link {
    transition: none;
  }

  .sc-stat-tile--link:hover {
    transform: none;
  }
}

@media (max-width: 575px) {
  .sc-stat-tile {
    padding: 12px 14px;
  }

  .sc-stat-tile__value {
    font-size: 26px;
  }
}

/* ── styles/sc-status-bar.css ── */
/* ScStatusBar + ScStatusBarLegend — stacked status bar and its colour key.

   Both components load this sheet so a legend swatch and a bar segment of the same tone can
   never drift apart: the tone classes below are the single mapping from status to colour. */

:host {
  display: block;
  min-width: 0;
}

:host([hidden]) {
  display: none;
}

/* ── Tone → colour ─────────────────────────────────────────────────────────────────────────
   Neutral takes the dark gray: --sc-gray-normal is 1.2:1 against white, so a neutral segment
   in that colour would read as empty track rather than as a counted status. */
.sc-status-bar-tone--positive {
  --sc-status-bar-tone: var(--sc-count-green-stroke, #10b981);
}

.sc-status-bar-tone--warning {
  --sc-status-bar-tone: var(--sc-count-yellow-stroke, #f1cb33);
}

.sc-status-bar-tone--neutral {
  --sc-status-bar-tone: var(--sc-gray-dark, #a1a5b1);
}

.sc-status-bar-tone--negative {
  --sc-status-bar-tone: var(--sc-count-red-stroke, #c0133d);
}

/* ── Bar ─────────────────────────────────────────────────────────────────────────────────── */
.sc-status-bar {
  --sc-status-bar-height: 12px;
  /* Extra hit area above and below the visible bar, so a thin bar is still easy to point at. */
  --sc-status-bar-hit-padding: 6px;
  min-width: 0;
  font-family: var(--sc-font-family-body, 'Work Sans', sans-serif);
  color: var(--sc-brand-blue, #0c0a3e);
}

.sc-status-bar--sm {
  --sc-status-bar-height: 8px;
  --sc-status-bar-hit-padding: 4px;
}

.sc-status-bar__track {
  display: flex;
  align-items: stretch;
  /* The gap separates neighbouring colours, which matters most for green beside yellow. */
  gap: 2px;
  width: 100%;
  min-width: 0;
}

/* Grow is set per segment to its count; a zero basis makes the widths proportional. */
.sc-status-bar__segment {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: content-box;
  display: block;
  flex: 0 1 0px;
  min-width: 4px;
  margin: 0;
  padding: var(--sc-status-bar-hit-padding) 0;
  border: 0;
  border-radius: var(--sc-border-radius-sm, 4px);
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}

a.sc-status-bar__segment {
  cursor: pointer;
}

.sc-status-bar__segment:focus-visible {
  outline: var(--sc-border-width-medium, 2px) solid var(--sc-brand-blue, #0c0a3e);
  outline-offset: 1px;
}

.sc-status-bar__fill {
  display: block;
  height: var(--sc-status-bar-height);
  background: var(--sc-status-bar-tone);
  transition: filter 0.12s ease;
}

.sc-status-bar__segment:hover .sc-status-bar__fill,
.sc-status-bar__segment:focus-visible .sc-status-bar__fill {
  filter: brightness(0.88);
}

/* Rounded ends on the outer segments only; the track itself never clips, so a focus ring is
   never cut off. */
.sc-status-bar__segment:first-child .sc-status-bar__fill {
  border-start-start-radius: var(--sc-border-radius-pill, 999px);
  border-end-start-radius: var(--sc-border-radius-pill, 999px);
}

.sc-status-bar__segment:last-child .sc-status-bar__fill {
  border-start-end-radius: var(--sc-border-radius-pill, 999px);
  border-end-end-radius: var(--sc-border-radius-pill, 999px);
}

.sc-status-bar__empty {
  margin: 0;
  font-size: var(--sc-font-size-label, 14px);
  line-height: 20px;
  color: var(--sc-blue-muted, #374151);
  overflow-wrap: anywhere;
}

.sc-status-bar--sm .sc-status-bar__empty {
  font-size: var(--sc-font-size-caption, 12px);
  line-height: 16px;
}

/* ── Tooltip ─────────────────────────────────────────────────────────────────────────────────
   A manual popover in the top layer where supported, so a scrolling table cannot clip it.
   The resets undo the UA popover box (inset: 0, margin: auto, border, Canvas colours). No
   `display` here: the UA hides a closed popover, and the fallback uses [hidden]. */
.sc-status-bar__tooltip {
  position: fixed;
  inset: auto;
  z-index: 1000;
  box-sizing: border-box;
  width: max-content;
  max-width: min(240px, calc(100vw - 16px));
  margin: 0;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--sc-border-radius-md, 8px);
  background: var(--sc-brand-blue, #0c0a3e);
  color: var(--sc-white-normal, #ffffff);
  box-shadow: 0 8px 24px rgba(12, 10, 62, 0.18);
  font-family: var(--sc-font-family-body, 'Work Sans', sans-serif);
  font-size: var(--sc-font-size-caption, 12px);
  line-height: 1.4;
  text-align: left;
  white-space: normal;
  overflow: visible;
  overflow-wrap: anywhere;
  pointer-events: none;
}

.sc-status-bar__tooltip[hidden] {
  display: none;
}

.sc-status-bar__tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: var(--sc-status-bar-arrow-x, 50%);
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--sc-brand-blue, #0c0a3e);
}

.sc-status-bar__tooltip[data-placement='bottom']::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: var(--sc-brand-blue, #0c0a3e);
}

/* ── Legend ──────────────────────────────────────────────────────────────────────────────── */
.sc-status-bar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sc-space-xs, 4px) var(--sc-space-lg, 16px);
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--sc-font-family-body, 'Work Sans', sans-serif);
  font-size: var(--sc-font-size-caption, 12px);
  line-height: 16px;
  color: var(--sc-blue-muted, #374151);
}

.sc-status-bar-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.sc-status-bar-legend__swatch {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--sc-status-bar-tone);
}

.sc-status-bar-legend__label {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ── styles/sc-status-pill.css ── */
/* ScStatusPill — single-line compact status indicator.

   Replaces the ad-hoc Bootstrap badge pattern (``<span class="badge bg-success">``)
   in flows that have semantic compliance / health status: onboarding R/Y/G,
   per-document MISSING/SUBMITTED/EXPIRED, Virtual Gate per-company status.

   Tones map to SafetyClerk's brand palette tokens; no inline hex codes. */

:host {
  display: inline-block;
}

.sc-status-pill {
  /* Visual spec from Figma node 251-908 — soft tinted background, slightly
     darker matching border, Title Case (not uppercase), regular weight.
     Joyce QA (issue #4919) flagged the old bold/uppercase look as too shouty. */
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  /* The UI kit sets every chip in a column to one width. Consumers that show a column of
     statuses set --sc-status-pill-min-width so the chips line up; on its own a pill still
     hugs its label. Centred so a short label sits in the middle of that shared width. */
  justify-content: center;
  min-width: var(--sc-status-pill-min-width, 0);
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-family: var(--sc-font-family-body);
  font-weight: 500;
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  /* The default look is the neutral tone; tone classes below override. */
  background: var(--sc-gray-normal, #E8E7EC);
  color: var(--sc-blue-muted, #374151);
  border: 1px solid transparent;
}

.sc-status-pill--positive {
  background: var(--sc-green-muted, #E8F5E8);
  color: var(--sc-brand-green, #068F3D);
  border-color: var(--sc-green-alpha20, #068F3D33);
}

.sc-status-pill--warning {
  /* Warm yellow — design tokens don't have a "yellow" today; use neutral text on a warm bg. */
  background: #FEF3C7;
  color: #92400E;
  border-color: rgba(146, 64, 14, 0.2);
}

.sc-status-pill--negative {
  background: var(--sc-red-muted, #F3EAEC);
  color: var(--sc-brand-red, #C0133D);
  border-color: var(--sc-red-alpha20, #C0133D33);
}

.sc-status-pill--neutral {
  background: var(--sc-gray-light, #F9FAFC);
  color: var(--sc-blue-muted, #374151);
  border-color: var(--sc-gray-normal, #E8E7EC);
}

.sc-status-pill--info {
  background: rgba(12, 10, 62, 0.08);
  color: var(--sc-brand-blue, #0C0A3E);
  border-color: var(--sc-blue-alpha20, #0C0A3E33);
}

/* ── Size variants ───────────────────────────────────── */

.sc-status-pill--sm {
  padding: 2px 8px;
  font-size: 11px;
  line-height: 14px;
}

.sc-status-pill--lg {
  padding: 6px 14px;
  font-size: 13px;
  line-height: 18px;
}

/* ── Dot indicator (optional) ───────────────────────── */

.sc-status-pill__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* ── styles/sc-tab-filters.css ── */
/* ScTabFilters — the listing filter chips from the UI kit (Figma 1478:12528). */

:host {
  display: block;
  width: 100%;
}

/* Sized to its chips, so the bar can sit in a row beside other controls instead of pushing
   them onto a line of their own. */
:host([appearance='inline']) {
  width: fit-content;
  max-width: 100%;
}

/* The chips sit inside a bordered bar of their own: that is what separates them from
   whatever search or heading sits above, rather than leaving them loose on the card. */
.sc-tab-filters {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  padding: 10px;
  border: var(--sc-border-width-thin, 1px) solid var(--sc-gray-normal, #e8e7ec);
  border-radius: var(--sc-radius-lg, 12px);
  /* The design fills the bar with white at 30%, which reads as a faint mint wash because it
     sits on the mint page ground. Our listings sit inside a white card, where that same
     translucent fill disappears entirely — so the wash is mixed here instead, and the bar
     looks like the design wherever it is put. */
  background: color-mix(in srgb, var(--sc-brand-mint, #def3ef) 24%, var(--sc-white-normal, #ffffff));
}

.sc-tab-filters__chip {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px 14px;
  /* Transparent rather than absent so picking a chip does not resize it. */
  border: var(--sc-border-width-thin, 1px) solid transparent;
  border-radius: var(--sc-radius-md, 8px);
  background: color-mix(in srgb, var(--sc-brand-mint, #def3ef) 60%, transparent);
  color: var(--sc-brand-blue, #0c0a3e);
  font-family: var(--sc-font-family-body, 'Work Sans', sans-serif);
  font-size: 11px;
  font-weight: var(--sc-font-weight-regular, 400);
  line-height: 16.5px;
  cursor: pointer;
}

.sc-tab-filters__chip:hover {
  background: var(--sc-brand-mint, #def3ef);
}

.sc-tab-filters__chip:focus-visible {
  outline: var(--sc-border-width-medium, 2px) solid var(--sc-brand-blue, #0c0a3e);
  outline-offset: 2px;
}

/* Only the picked chip is outlined; that outline and the tick are what mark it. */
.sc-tab-filters__chip--selected {
  border-color: var(--sc-brand-blue, #0c0a3e);
}

.sc-tab-filters__chip--alert {
  border-color: var(--sc-brand-red, #c0133d);
  background: var(--sc-red-muted, #f3eaec);
  color: var(--sc-brand-red, #c0133d);
}

.sc-tab-filters__check {
  display: inline-flex;
  flex-shrink: 0;
  width: 12px;
  height: 8px;
}

/* The registry check is drawn on a 20x15 canvas, so it needs the box it is given. */
.sc-tab-filters__check svg {
  width: 100%;
  height: 100%;
}

/* ── styles/sc-tag-chip.css ── */
/* ScTagChip — compact label from Figma chip 5542:29773.
   Fill and text color come from the tag's stored hex pair, not from this file.
   2px radius and 9px type have no design token. */
:host {
  display: inline-flex;
  max-width: 100%;
  min-width: 0;
  vertical-align: middle;
}

.sc-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  padding: 1px 8px;
  border: 0;
  border-radius: 2px;
  background: var(--sc-tag-background, #6b7280);
  color: var(--sc-tag-text, #ffffff);
  font-family: var(--sc-font-family-body, 'Work Sans', sans-serif);
  font-size: 9px;
  font-weight: var(--sc-font-weight-regular, 400);
  line-height: 16.5px;
  text-transform: uppercase;
}

.sc-tag-chip--regular {
  gap: 6px;
  min-height: 32px;
  padding: 4px 8px;
  font-size: var(--sc-font-size-caption, 12px);
  line-height: 16px;
}

.sc-tag-chip__name {
  min-width: 0;
  overflow-wrap: anywhere;
}

:host([truncate]) .sc-tag-chip__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sc-tag-chip__remove {
  all: unset;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  border-radius: 2px;
  color: inherit;
  cursor: pointer;
}

.sc-tag-chip--regular .sc-tag-chip__remove {
  width: 24px;
  height: 24px;
}

.sc-tag-chip__remove:focus-visible {
  outline: 2px solid var(--sc-brand-blue, #0c0a3e);
  outline-offset: 2px;
}

.sc-tag-chip__remove:disabled {
  cursor: default;
  opacity: 0.6;
}

.sc-tag-chip__remove-icon {
  display: block;
  width: 12px;
  height: 12px;
}

.sc-tag-chip__remove-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ── styles/sc-tag-picker.css ── */
/* ScTagPicker — search, attach, detach, and inline create. The host persists. */
:host {
  display: block;
  position: relative;
  min-width: 0;
  font-family: var(--sc-font-family-body, 'Work Sans', sans-serif);
  color: var(--sc-brand-blue, #0c0a3e);
}

.sc-tag-picker__trigger {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sc-space-sm, 8px);
  min-width: 0;
}

.sc-tag-picker__add,
.sc-tag-picker__create,
.sc-tag-picker__manage,
.sc-tag-picker__retry,
.sc-tag-picker__row {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.sc-tag-picker__add {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 4px 10px;
  border: 1px solid var(--sc-tag-picker-add-border, var(--sc-blue-alpha30, rgba(12, 10, 62, 0.3)));
  border-radius: var(--sc-radius-sm, 4px);
  background: var(--sc-tag-picker-add-bg, var(--sc-white-normal, #ffffff));
  color: var(--sc-tag-picker-add-fg, inherit);
  text-align: left;
}

:host([field]) .sc-tag-picker__trigger {
  width: 100%;
  min-height: 32px;
  padding: 4px 8px 4px 10px;
  box-sizing: border-box;
  background: var(--sc-white-normal, #ffffff);
  border: 1px solid var(--sc-blue-alpha30, rgba(12, 10, 62, 0.3));
  border-radius: var(--sc-radius-sm, 5px);
}

:host([field]) .sc-tag-picker__trigger:hover,
:host([field]) .sc-tag-picker[data-open='true'] .sc-tag-picker__trigger {
  border-color: var(--sc-brand-blue, #0c0a3e);
}

:host([field]) .sc-tag-picker__trigger:focus-within {
  outline: 2px solid rgb(12 10 62 / 0.35);
  outline-offset: 1px;
}

:host([field]) .sc-tag-picker__add {
  flex: 1 1 2rem;
  min-height: 24px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  justify-content: flex-end;
}

:host([field]) .sc-tag-picker__add:focus-visible {
  outline: none;
}

:host([field]) .sc-tag-picker__placeholder {
  flex: 1 1 auto;
  color: var(--sc-blue-muted, #6b7280);
  font-size: var(--sc-font-size-caption, 12px);
  text-align: left;
}

:host([field]) .sc-tag-picker__caret {
  flex-shrink: 0;
  color: var(--sc-blue-muted, #6b7280);
  font-size: 10px;
  line-height: 1;
  transition: transform 0.15s ease;
}

:host([field]) .sc-tag-picker[data-open='true'] .sc-tag-picker__caret {
  transform: rotate(180deg);
}

.sc-tag-picker__add:focus-visible,
.sc-tag-picker__input:focus-visible,
.sc-tag-picker__row:focus-visible,
.sc-tag-picker__create:focus-visible,
.sc-tag-picker__manage:focus-visible,
.sc-tag-picker__retry:focus-visible {
  outline: 2px solid var(--sc-tag-picker-focus, var(--sc-brand-blue, #0c0a3e));
  outline-offset: 2px;
}

.sc-tag-picker__add-icon,
.sc-tag-picker__search-icon,
.sc-tag-picker__check {
  display: inline-flex;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}

.sc-tag-picker__add-icon svg,
.sc-tag-picker__search-icon svg,
.sc-tag-picker__check svg {
  display: block;
  width: 100%;
  height: 100%;
}

.sc-tag-picker__panel {
  position: absolute;
  z-index: 1080;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sc-space-sm, 8px);
  box-sizing: border-box;
  max-height: min(520px, 80vh);
  padding: var(--sc-space-sm, 8px);
  overflow: auto;
  border: 1px solid var(--sc-blue-alpha30, rgba(12, 10, 62, 0.3));
  border-radius: var(--sc-radius-sm, 4px);
  background: var(--sc-white-normal, #ffffff);
  box-shadow:
    0 2px 6px rgb(12 10 62 / 0.08),
    0 8px 24px rgb(12 10 62 / 0.12);
}

:host([icon-trigger]) {
  width: auto;
}

:host([icon-trigger]) .sc-tag-picker__panel {
  right: 0;
  left: auto;
  width: 260px;
  color: var(--sc-brand-blue, #0c0a3e);
}

.sc-tag-picker__gear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.sc-tag-picker__gear svg {
  display: block;
  width: 18px;
  height: 14px;
}

.sc-tag-picker__option {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.sc-tag-picker__option .sc-tag-picker__row {
  flex: 1 1 auto;
  width: auto;
}

.sc-tag-picker__dismiss {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.sc-tag-picker__dismiss svg {
  display: block;
  width: 14px;
  height: 14px;
}

.sc-tag-picker__gear:focus-visible,
.sc-tag-picker__dismiss:focus-visible {
  outline: 2px solid var(--sc-tag-picker-focus, var(--sc-brand-blue, #0c0a3e));
  outline-offset: 2px;
}

.sc-tag-picker__search {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 4px 8px;
  border: 1px solid var(--sc-blue-alpha30, rgba(12, 10, 62, 0.3));
  border-radius: var(--sc-radius-sm, 4px);
}

.sc-tag-picker__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 4px 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: var(--sc-font-size-caption, 12px);
}

.sc-tag-picker__input:focus {
  outline: none;
}

.sc-tag-picker__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sc-tag-picker__row {
  display: flex;
  align-items: flex-start;
  gap: var(--sc-space-sm, 8px);
  width: 100%;
  min-width: 0;
  min-height: 32px;
  padding: 4px;
  border: 1px solid transparent;
  border-radius: 2px;
  background: transparent;
  text-align: left;
}

.sc-tag-picker__row:hover,
.sc-tag-picker__row:focus-visible {
  border-color: var(--sc-blue-alpha30, rgba(12, 10, 62, 0.3));
  background: var(--sc-gray-light, #f9fafc);
}

.sc-tag-picker__check {
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin-top: 1px;
  border: 1px solid var(--sc-blue-alpha30, rgba(12, 10, 62, 0.3));
  border-radius: 2px;
}

.sc-tag-picker__row[aria-selected='true'] .sc-tag-picker__check {
  border-color: var(--sc-brand-blue, #0c0a3e);
  background: var(--sc-brand-blue, #0c0a3e);
  color: var(--sc-white-normal, #ffffff);
}

.sc-tag-picker__create,
.sc-tag-picker__manage,
.sc-tag-picker__retry {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: 32px;
  padding: 6px 8px;
  border: 0;
  border-radius: var(--sc-radius-sm, 4px);
  background: transparent;
  text-align: left;
  overflow-wrap: anywhere;
}

.sc-tag-picker__create {
  font-weight: var(--sc-font-weight-medium, 500);
}

.sc-tag-picker__manage:hover,
.sc-tag-picker__manage:focus-visible,
.sc-tag-picker__create:hover,
.sc-tag-picker__create:focus-visible,
.sc-tag-picker__retry:hover,
.sc-tag-picker__retry:focus-visible {
  background: var(--sc-gray-light, #f9fafc);
}

.sc-tag-picker__message,
.sc-tag-picker__error {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: var(--sc-font-size-caption, 12px);
  line-height: 1.4;
}

.sc-tag-picker__error {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.sc-tag-picker__retry {
  width: auto;
  text-decoration: underline;
}

.sc-tag-picker__add:disabled,
.sc-tag-picker__row:disabled,
.sc-tag-picker__create:disabled,
.sc-tag-picker__retry:disabled {
  cursor: default;
  opacity: 0.6;
}

.sc-tag-picker__panel:has(.sc-tag-picker__create-form) {
  overflow: visible;
}

.sc-tag-picker__create-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.sc-tag-picker__create-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.sc-tag-picker__create-title,
.sc-tag-picker__field-label,
.sc-tag-picker__swatch-title,
.sc-tag-picker__color-error {
  margin: 0;
}

.sc-tag-picker__create-title {
  color: var(--sc-brand-blue, #0c0a3e);
  font-size: 16px;
  font-weight: var(--sc-font-weight-semibold, 600);
  line-height: 24px;
}

.sc-tag-picker__create-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--sc-brand-blue, #0c0a3e);
  cursor: pointer;
}

.sc-tag-picker__create-close svg {
  width: 16px;
  height: 16px;
}

.sc-tag-picker__field-label,
.sc-tag-picker__swatch-title {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--sc-brand-blue, #0c0a3e);
  font-size: 14px;
  font-weight: var(--sc-font-weight-medium, 500);
  line-height: 20px;
}

.sc-tag-picker__field {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 36px;
  padding: 8px 10px;
  border: 1px solid var(--sc-blue-alpha30, rgba(12, 10, 62, 0.3));
  border-radius: 8px;
  background: var(--sc-white-normal, #ffffff);
  color: inherit;
  font: inherit;
  font-size: 14px;
  font-weight: var(--sc-font-weight-regular, 400);
}

.sc-tag-picker__field[aria-invalid='true'] {
  border-color: var(--sc-color-danger, #b91c1c);
}

.sc-tag-picker__color {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sc-tag-picker__color-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sc-tag-picker__color-row .sc-tag-picker__field {
  flex: 1 1 auto;
}

.sc-tag-picker__color-control {
  position: relative;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
}

.sc-tag-picker__color-open,
.sc-tag-picker__color-random {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.sc-tag-picker__color-open {
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.sc-tag-picker__color-random {
  position: relative;
  z-index: 1;
  display: inline-flex;
  width: 16px;
  height: 16px;
}

.sc-tag-picker__color-random svg,
.sc-tag-picker__create-close svg {
  display: block;
  width: 16px;
  height: 16px;
}

.sc-tag-picker__color-error {
  color: var(--sc-color-danger, #b91c1c);
  font-size: 12px;
  font-weight: var(--sc-font-weight-regular, 400);
  line-height: 16px;
}

.sc-tag-picker__swatches {
  position: absolute;
  z-index: 2;
  top: calc(100% + 4px);
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-sizing: border-box;
  width: max-content;
  max-width: 100%;
  padding: 12px;
  border: 1px solid var(--sc-blue-alpha30, rgba(12, 10, 62, 0.3));
  border-radius: 8px;
  background: var(--sc-white-normal, #ffffff);
  box-shadow: 0 8px 24px rgb(12 10 62 / 0.12);
}

.sc-tag-picker__swatch-grid {
  display: grid;
  grid-template-columns: repeat(4, 28px);
  gap: 8px;
}

.sc-tag-picker__swatch {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid rgb(12 10 62 / 0.15);
  border-radius: 4px;
  cursor: pointer;
}

.sc-tag-picker__save {
  width: 100%;
  margin-top: 4px;
}

.sc-tag-picker__save::part(button) {
  width: 100%;
}

.sc-tag-picker__create-close:focus-visible,
.sc-tag-picker__color-open:focus-visible,
.sc-tag-picker__color-random:focus-visible,
.sc-tag-picker__swatch:focus-visible,
.sc-tag-picker__field:focus-visible {
  outline: 2px solid var(--sc-tag-picker-focus, var(--sc-brand-blue, #0c0a3e));
  outline-offset: 2px;
}

.sc-tag-picker__visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── styles/sc-toaster.css ── */
/* ScToaster — top-center flash toast stack (replaces in-flow Bootstrap alerts). */

:host {
  box-sizing: border-box;
  display: block;
  left: 50%;
  max-width: calc(100vw - 24px);
  pointer-events: none;
  position: fixed;
  top: 16px;
  transform: translateX(-50%);
  width: max-content;
  z-index: 1060;
}

:host([hidden]),
:host(:not([data-has-toasts])) {
  display: none;
}

.sc-toaster {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: min(560px, calc(100vw - 24px));
  min-width: min(280px, calc(100vw - 24px));
  width: max-content;
}

.sc-toaster__toast {
  align-items: flex-start;
  animation: sc-toaster-enter 180ms ease-out;
  background: var(--sc-white-normal, #fff);
  border: 1px solid transparent;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgb(12 10 62 / 0.14);
  box-sizing: border-box;
  color: var(--sc-brand-blue, #0c0a3e);
  display: flex;
  font-family: var(--sc-font-family-body, "Work Sans", sans-serif);
  font-size: 14px;
  gap: 10px;
  line-height: 1.35;
  max-width: 100%;
  padding: 12px 14px;
  pointer-events: auto;
  width: 100%;
}

.sc-toaster__toast--success {
  background: var(--sc-green-muted, #e8f5e8);
  border-color: var(--sc-green-alpha20, #068f3d33);
  color: var(--sc-brand-green, #068f3d);
}

.sc-toaster__toast--info {
  background: var(--sc-brand-mint, #def3ef);
  border-color: var(--sc-green-alpha20, #068f3d33);
  color: var(--sc-brand-blue, #0c0a3e);
}

.sc-toaster__toast--warning {
  background: #fef3c7;
  border-color: rgb(146 64 14 / 0.2);
  color: #92400e;
}

.sc-toaster__toast--error {
  background: var(--sc-red-muted, #f3eaec);
  border-color: var(--sc-red-alpha20, #c0133d33);
  color: var(--sc-brand-red, #c0133d);
}

.sc-toaster__icon {
  color: inherit;
  flex-shrink: 0;
  height: 18px;
  margin-top: 1px;
  width: 18px;
}

.sc-toaster__icon sc-icons {
  display: block;
  height: 18px;
  width: 18px;
}

.sc-toaster__message {
  flex: 1 1 auto;
  min-width: 0;
  word-break: break-word;
}

.sc-toaster__toast--extended {
  font-size: 15px;
  min-width: min(360px, calc(100vw - 24px));
  padding: 14px 16px;
}

.sc-toaster__message strong {
  display: block;
  font-weight: 600;
  margin-bottom: 2px;
}

.sc-toaster__message a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
}

.sc-toaster__message a:hover,
.sc-toaster__message a:focus-visible {
  text-decoration-thickness: 2px;
}

.sc-toaster__close {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  flex-shrink: 0;
  height: 24px;
  justify-content: center;
  margin: -2px -4px 0 0;
  opacity: 0.75;
  padding: 0;
  width: 24px;
}

.sc-toaster__close:hover,
.sc-toaster__close:focus-visible {
  opacity: 1;
  outline: 2px solid currentColor;
  outline-offset: 1px;
}

.sc-toaster__close sc-icons {
  display: block;
  height: 14px;
  width: 14px;
}

@keyframes sc-toaster-enter {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 767px) {
  :host {
    top: 12px;
  }
}

/* ── styles/sc-toolbar.css ── */
/* ScToolbar — the translucent bar only. Primary actions beside it stay in the page. */

:host {
  align-items: center;
  background: color-mix(in srgb, var(--sc-white-normal, #fff) 30%, transparent);
  border: 1px solid var(--sc-gray-normal, #e8e7ec);
  border-radius: var(--sc-border-radius-lg, 12px);
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sc-space-md, 12px);
  justify-content: space-between;
  min-width: 0;
  /* 10px is the toolbar inset; it sits between --sc-space-sm and --sc-space-md. */
  padding: 10px;
  width: 100%;
}

.sc-toolbar__start {
  flex: 1 1 auto;
  min-width: 0;
}

.sc-toolbar__actions {
  display: none;
}

.sc-toolbar__actions--visible {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sc-space-sm, 8px);
  margin-left: auto;
}

/* ── styles/sc-urgency-tag.css ── */
/* ScUrgencyTag — severity chip for notification items (Figma TagsUrgency). */

:host {
  display: inline-flex;
}

.sc-urgency-tag {
  align-items: center;
  border-radius: 4px;
  display: inline-flex;
  gap: 10px;
  padding: 4px 11px;
}

.sc-urgency-tag__label {
  font-family: var(--sc-font-family-body);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  padding-top: 2px;
}

.sc-urgency-tag__signal {
  display: block;
  flex-shrink: 0;
  height: 9px;
  width: 10px;
}

.sc-urgency-tag--critical {
  background: var(--sc-red-normal, #c0133d);
  color: var(--sc-white-normal, #ffffff);
}

.sc-urgency-tag--critical .sc-urgency-tag__signal {
  color: var(--sc-white-normal, #ffffff);
}

.sc-urgency-tag--major {
  background: var(--sc-yellow-normal, #f1cb33);
  color: var(--sc-brand-blue, #0c0a3e);
}

.sc-urgency-tag--major .sc-urgency-tag__signal {
  color: var(--sc-brand-blue, #0c0a3e);
}

.sc-urgency-tag--minor {
  background: rgb(204 229 224 / 0.85);
  color: var(--sc-brand-blue, #0c0a3e);
}

.sc-urgency-tag--minor .sc-urgency-tag__signal {
  color: var(--sc-brand-blue, #0c0a3e);
}

/* ── styles/sc-user-list-item.css ── */
/* ScUserListItem — single user row for Users listing card (Figma 345:6044 user-pp-card). */

:host {
  display: block;
  min-width: 0;
  width: 100%;
}

:host([search-hidden]) {
  display: none;
}

.sc-user-list-item {
  align-items: center;
  border-bottom: 1px solid rgb(12 10 62 / 0.1);
  box-sizing: border-box;
  color: var(--sc-brand-blue, #0c0a3e);
  display: flex;
  font-family: var(--sc-font-family-body);
  gap: 20px;
  min-width: 0;
  padding: 20px 0;
  position: relative;
  width: 100%;
}

.sc-user-list-item--clickable {
  cursor: pointer;
}

.sc-user-list-item__primary-link {
  border-radius: 2px;
  color: inherit;
  inset: 0;
  position: absolute;
  text-decoration: none;
  z-index: 0;
}

.sc-user-list-item__primary-link:focus-visible {
  outline: 2px solid rgb(12 10 62 / 0.35);
  outline-offset: 2px;
}

.sc-user-list-item--clickable:hover .sc-user-list-item__name,
.sc-user-list-item:has(.sc-user-list-item__primary-link:focus-visible) .sc-user-list-item__name {
  text-decoration: underline;
}

.sc-user-list-item__avatar {
  align-items: center;
  background: rgb(12 10 62 / 0.08);
  border-radius: 50%;
  display: inline-flex;
  flex: 0 0 67px;
  height: 67px;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
  width: 67px;
}

.sc-user-list-item__avatar-img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.sc-user-list-item__avatar-initials {
  color: var(--sc-brand-blue, #0c0a3e);
  font-size: 18px;
  font-weight: var(--sc-font-weight-medium, 500);
  letter-spacing: 0.02em;
  line-height: 1;
  text-transform: uppercase;
}

.sc-user-list-item__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  pointer-events: none;
}

.sc-user-list-item__top {
  align-items: flex-start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  min-width: 0;
  width: 100%;
}

.sc-user-list-item__identity {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
  min-width: 0;
  pointer-events: none;
}

.sc-user-list-item__name {
  font-size: 16px;
  font-weight: var(--sc-font-weight-medium, 500);
  line-height: normal;
  margin: 0;
  min-width: 0;
  word-break: break-word;
}

.sc-user-list-item__meta-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  min-width: 0;
}

.sc-user-list-item__meta {
  align-items: center;
  color: var(--sc-brand-blue, #0c0a3e);
  display: inline-flex;
  font-size: var(--sc-font-size-label, 14px);
  font-weight: var(--sc-font-weight-medium, 500);
  gap: 5px;
  line-height: normal;
  margin: 0;
  min-width: 0;
}

.sc-user-list-item__meta-icon {
  flex: 0 0 auto;
  height: 13px;
  width: 14px;
}

/* ``__body`` sets ``pointer-events: none`` so the stretched profile link under it catches a click
   anywhere on the row. That property inherits, so anything interactive inside the body has to opt
   back in the way ``__actions`` does -- lifting it above the overlay with z-index alone is not
   enough, because the click never reaches it to begin with. */
.sc-user-list-item__edit {
  align-items: center;
  color: inherit;
  display: inline-flex;
  pointer-events: auto;
  position: relative;
  z-index: 1;
}

.sc-user-list-item__edit:focus-visible {
  border-radius: 2px;
  outline: 2px solid rgb(12 10 62 / 0.35);
  outline-offset: 2px;
}

.sc-user-list-item__meta-icon--company {
  width: 13px;
}

.sc-user-list-item__meta span {
  min-width: 0;
  word-break: break-word;
}

.sc-user-list-item__actions {
  flex: 0 0 auto;
  margin-left: auto;
  pointer-events: auto;
  position: relative;
  z-index: 1;
}

.sc-user-list-item__reminder-tooltip {
  cursor: help;
  display: inline-flex;
  outline: none;
}

.sc-user-list-item__reminder-tooltip sc-button {
  pointer-events: none;
}

.sc-user-list-item__reminder-tooltip:focus-visible {
  border-radius: 2px;
  outline: 2px solid rgb(12 10 62 / 0.35);
  outline-offset: 2px;
}

.sc-user-list-item__reminder {
  --sc-button-fs: 12px;
}

.sc-user-list-item__sr-only {
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.sc-user-list-item__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
  pointer-events: none;
  width: 100%;
}

.sc-user-list-item__chip {
  align-items: center;
  background: rgb(192 19 61 / 0.1);
  border-radius: 2px;
  color: var(--sc-brand-blue, #0c0a3e);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: var(--sc-font-weight-medium, 500);
  gap: 10px;
  line-height: normal;
  max-width: 100%;
  min-width: 0;
  padding: 3px;
}

.sc-user-list-item__chip-icon {
  flex: 0 0 auto;
  height: 15px;
  width: 15px;
}

.sc-user-list-item__chip-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sc-user-list-item__chip-dismiss {
  flex: 0 0 auto;
  height: 14px;
  opacity: 0.75;
  width: 15px;
}

@media (max-width: 520px) {
  .sc-user-list-item {
    align-items: flex-start;
    gap: 12px;
    padding: 16px 0;
  }

  .sc-user-list-item__top {
    flex-wrap: wrap;
  }

  .sc-user-list-item__actions {
    margin-left: 0;
    width: 100%;
  }
}

/* ── styles/sc-users-card.css ── */
/* ScUsersCard — Users shortcut row (Figma 237:607). */

:host {
  border-radius: 10px;
  box-shadow: 0 0 4px rgb(0 0 0 / 0.25);
  display: block;
  min-width: 0;
  width: 100%;
}

.sc-users-card {
  align-items: center;
  background: rgb(255 255 255 / 0.8);
  border-radius: 10px;
  box-sizing: border-box;
  color: var(--sc-brand-blue, #0c0a3e);
  display: flex;
  font-family: var(--sc-font-family-body);
  gap: 6px;
  justify-content: flex-start;
  min-width: 0;
  padding: 10px;
  position: relative;
  width: 100%;
}

.sc-users-card--clickable {
  cursor: pointer;
}

/*
 * Absolutely positioned so the empty <a> is not a flex item (space-between
 * would otherwise shove title/actions apart).
 */
.sc-users-card__primary-link {
  border-radius: 10px;
  color: inherit;
  inset: 0;
  position: absolute;
  text-decoration: none;
  z-index: 0;
}

.sc-users-card__primary-link:focus-visible {
  outline: 2px solid rgb(12 10 62 / 0.35);
  outline-offset: 2px;
}

.sc-users-card__title {
  flex: 0 1 auto;
  font-family: var(--sc-font-family-heading, var(--sc-font-family-body));
  font-size: 18px;
  font-weight: var(--sc-font-weight-medium, 500);
  letter-spacing: 0;
  line-height: normal;
  margin: 0 auto 0 0;
  min-width: 0;
  /* Let clicks reach the stretched primary link under the title. */
  pointer-events: none;
  text-transform: uppercase;
  white-space: nowrap;
}

.sc-users-card__title--with-count {
  align-items: center;
  display: inline-flex;
  gap: 6px;
}

/* Same badge as sc-companies-card__count. */
.sc-users-card__count {
  align-items: center;
  background: var(--sc-brand-blue, #0c0a3e);
  border-radius: 50%;
  box-sizing: border-box;
  color: var(--sc-white-normal, #fff);
  display: inline-flex;
  flex: 0 0 auto;
  font-family: var(--sc-font-family-body);
  font-size: 11px;
  font-weight: var(--sc-font-weight-semibold, 600);
  height: 22px;
  justify-content: center;
  letter-spacing: 0;
  line-height: 1;
  min-width: 22px;
  padding: 0 4px;
  text-transform: none;
}

.sc-users-card--clickable:hover .sc-users-card__title,
.sc-users-card:has(.sc-users-card__primary-link:focus-visible) .sc-users-card__title {
  text-decoration: underline;
}

.sc-users-card__actions {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  min-width: 0;
  pointer-events: auto;
  position: relative;
  z-index: 1;
}

.sc-users-card__cta {
  --sc-button-fw: var(--sc-font-weight-regular, 400);

  flex: 0 0 auto;
  pointer-events: auto;
  position: relative;
  z-index: 1;
}

.sc-users-card__details-link {
  --sc-icon-color: var(--sc-brand-blue, #0c0a3e);

  align-items: center;
  background: var(--sc-gray-normal, #c4c4c4);
  border-radius: 50%;
  color: var(--sc-brand-blue, #0c0a3e);
  display: inline-flex;
  flex: 0 0 auto;
  height: 30px;
  justify-content: center;
  pointer-events: none;
  position: relative;
  transition: background-color 0.15s ease;
  width: 30px;
  z-index: 1;
}

.sc-users-card--clickable:hover .sc-users-card__details-link,
.sc-users-card:has(.sc-users-card__primary-link:focus-visible) .sc-users-card__details-link {
  background: var(--sc-gray-dark, #a8a8a8);
}

.sc-users-card__details-link sc-icons {
  height: 8px;
  width: 5px;
}

.sc-users-card__details-link-icon {
  display: inline-flex;
  transform: rotate(180deg);
}

@media (max-width: 520px) {
  .sc-users-card {
    align-items: center;
    column-gap: 10px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      'title chevron'
      'actions actions';
    row-gap: 8px;
  }

  .sc-users-card__title {
    flex: none;
    grid-area: title;
    margin: 0;
  }

  .sc-users-card__details-link {
    grid-area: chevron;
    justify-self: end;
  }

  .sc-users-card__actions {
    grid-area: actions;
    justify-content: flex-start;
    width: 100%;
  }
}

/* ── styles/sc-users-listing-card.css ── */
/* ScUsersListingCard — Foreman users listing card (Figma 237:1126).
   Composes sc-dashboard-card for the shared dashboard shell. */

:host {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  min-width: 0;
  overflow: visible;
  width: 100%;
}

.sc-users-listing-card__dashboard {
  --sc-dashboard-card-title-transform: uppercase;
  --sc-dashboard-card-title-weight: var(--sc-font-weight-medium, 500);

  flex: 1 1 auto;
  height: 100%;
  max-height: 100%;
  min-height: 0;
}

.sc-users-listing-card__content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  width: 100%;
}

.sc-users-listing-card__header-actions {
  align-items: center;
  display: flex;
  flex: 0 1 auto;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  min-width: 0;
}

.sc-users-listing-card__header-cta {
  --sc-button-fw: var(--sc-font-weight-regular, 400);

  flex: 0 0 auto;
}

.sc-users-listing-card__search-wrap {
  flex: 0 0 auto;
  position: relative;
  width: 100%;
}

.sc-users-listing-card__search {
  background: rgb(12 10 62 / 0.05);
  border: 0;
  border-radius: 3px;
  box-sizing: border-box;
  color: var(--sc-brand-blue, #0c0a3e);
  font-family: inherit;
  font-size: 12px;
  font-weight: var(--sc-font-weight-medium, 500);
  height: 30px;
  line-height: normal;
  padding: 6px 32px 6px 10px;
  width: 100%;
}

.sc-users-listing-card__search::placeholder {
  color: rgb(12 10 62 / 0.2);
  opacity: 1;
}

.sc-users-listing-card__search:focus {
  outline: 2px solid rgb(12 10 62 / 0.18);
  outline-offset: 0;
}

.sc-users-listing-card__search-icon {
  color: var(--sc-brand-blue, #0c0a3e);
  height: 11px;
  pointer-events: none;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
}

.sc-users-listing-card__list-wrap {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.sc-users-listing-card__list-wrap::after {
  background: linear-gradient(to bottom, rgb(255 255 255 / 0), rgb(255 255 255 / 0.85));
  bottom: 0;
  content: '';
  height: 48px;
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  z-index: 1;
}

.sc-users-listing-card__list {
  box-sizing: border-box;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.sc-users-listing-card__list ::slotted(*) {
  display: block;
}

.sc-users-listing-card__list ::slotted([search-hidden]) {
  display: none;
}

.sc-users-listing-card__empty {
  color: rgb(12 10 62 / 0.5);
  display: none;
  flex: 0 0 auto;
  font-size: 14px;
  margin: 0;
  padding: 0.5rem 0;
  text-align: center;
  width: 100%;
}

.sc-users-listing-card__empty.is-visible {
  display: block;
}

@media (max-width: 520px) {
  .sc-users-listing-card__header-actions {
    justify-content: flex-start;
    width: 100%;
  }
}

/* Async load states (``data-endpoint``): skeleton rows while in flight, message on failure. */
.sc-users-listing-card__skeleton {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sc-users-listing-card__skeleton-row {
  animation: sc-users-listing-card-pulse 1.4s ease-in-out infinite;
  background: rgb(12 10 62 / 0.08);
  border-radius: 8px;
  flex-shrink: 0;
  min-height: 44px;
}

.sc-users-listing-card__error {
  color: var(--sc-brand-blue, #0c0a3e);
  font-size: 13px;
  margin: 0;
  padding: 8px 0;
}

.sc-users-listing-card__visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

@keyframes sc-users-listing-card-pulse {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.55;
  }
}