._pageShell_524wh_1 {
  max-width: var(--container-xl);
  margin: var(--spacing-xxxl) auto;
  padding: 0 var(--spacing-xl) var(--spacing-xxxl);
}

._headerRow_524wh_7 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

._headerTitle_524wh_15 {
  margin-bottom: var(--spacing-xxs);
}

._mismatchAlert_524wh_19 {
  margin-bottom: var(--spacing-lg);
}

._summaryCards_524wh_23 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-xl);
}

._territoryCard_524wh_30 {
  margin-bottom: var(--spacing-md);
}

._territoryContent_524wh_34 {
  width: 100%;
}

._financialRow_524wh_38 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--spacing-sm);
  margin-top: var(--spacing-xs);
}

._actions_524wh_45 {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-xl);
}

._pillList_524wh_52 {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-xs);
}

._loadingContainer_524wh_59 {
  min-height: 50vh;
}

._spinPlaceholder_524wh_63 {
  min-height: 80px;
}

._muted_524wh_67 {
  color: var(--neutral-dark);
}

._feedbackPrompt_524wh_71 {
  margin-bottom: var(--spacing-xs);
  color: var(--neutral-dark);
}

._territoryTitle_524wh_76 {
  display: flex;
  gap: var(--spacing-xs);
  align-items: center;
}

@media (max-width: 640px) {
  ._headerRow_524wh_7 {
    flex-direction: column;
    align-items: flex-start;
  }

  ._actions_524wh_45 {
    width: 100%;
    flex-direction: column;
  }
}
/* ============================================================
   Split-screen login: form pane (left) + hero pane (right).
   ============================================================ */

.login-split {
  display: flex;
  height: 100vh;
  overflow: hidden; /* the page never scrolls; the form column scrolls itself */
  background: var(--neutral-white);
}

/* ---- Form pane (left) ---- */
.login-pane-form {
  /* Sized to the form + comfortable margins (not a rigid half), so the hero
     starts close to the form instead of leaving a wide empty gutter. */
  flex: 0 0 clamp(440px, 36%, 560px);
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow-y: auto; /* a short viewport scrolls this column, not the whole page */
  background: var(--neutral-white);
}

.login-topbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-lg) var(--spacing-xl);
}

.login-logo-img {
  height: var(--line-height-menu-item); /* 40px */
  width: auto;
}

.login-form-center {
  /* Grow to centre the form when there's room; never shrink below its own
     content when the viewport is short (the pane scrolls instead). */
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  padding: var(--spacing-sm) var(--spacing-xl);
}

.login-form-inner {
  width: 100%;
  max-width: 440px;
}

/* Tighter form rhythm so the whole column fits common laptop heights. */
.login-form-inner .ant-form-item {
  margin-bottom: var(--spacing-lg);
}

.login-footer-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-sm) var(--spacing-xl);
  color: var(--neutral);
  font-size: var(--font-body-sm-size);
  line-height: var(--font-body-sm-line-height);
}

.login-footer-link {
  color: var(--neutral-dark);
  text-decoration: underline;
}

.login-footer-link:hover {
  color: var(--primary);
}

/* ---- Header block ---- */
.login-welcome {
  color: var(--neutral-darkest) !important;
  margin: 0 0 var(--spacing-xs) !important;
}

.login-subtitle {
  display: block;
  margin-bottom: var(--spacing-lg);
  font-size: var(--font-body-md-size);
  font-weight: var(--font-body-md-weight);
  line-height: var(--font-body-md-line-height);
}

/* ---- Form controls ---- */
.login-input {
  border-radius: var(--radius-sm);
}

.login-input-icon {
  color: var(--neutral);
}

.login-options-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.login-forgot-link {
  color: var(--primary);
}

.login-submit-button {
  width: 100%;
  height: var(--button-height-lg);
  border-radius: var(--button-radius);
  background: var(--primary);
  border-color: var(--primary);
  font-size: var(--font-h3-size);
  font-weight: var(
    --font-body-md-semibold-weight
  ); /* 600 - UI Kit doesn't use 500 */
  line-height: var(--font-h3-line-height);
}

.login-submit-button:hover,
.login-submit-button:focus {
  background: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
}

.login-submit-form-item {
  margin-bottom: var(--spacing-sm);
}

.login-signup-prompt {
  display: block;
  font-size: var(--font-body-sm-size);
  line-height: var(--font-body-sm-line-height);
}

/* ---- Hero pane (right) ----
   The ONE dark surface in the product. Everything else is white chrome on a
   near-white page, so this panel is what a signed-out visitor remembers; it
   earns the ink budget precisely because nothing after sign-in spends any. No
   photograph: the mark's own triangle, repeated and held back, says more about
   what this is than stock architecture did. */
.login-pane-hero {
  position: relative;
  flex: 1 1 auto;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--spacing-xxl);
  background: var(--color-brand-panel);
}

.login-hero-motif {
  position: absolute;
  top: -60px;
  right: -80px;
  width: 520px;
  height: 520px;
  /* Low enough to read as texture rather than as a second logo competing with
     the wordmark on the left. */
  opacity: 0.14;
  fill: none;
  stroke: var(--primary-light);
  stroke-width: 2;
}

.login-hero-content {
  position: relative; /* above the motif */
  max-width: 440px;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.login-hero-title {
  margin: 0;
  color: var(--color-brand-panel-text);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
  letter-spacing: var(--letter-spacing-tight);
  text-wrap: pretty;
}

.login-hero-points {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.login-hero-point {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-md);
  color: var(--color-brand-panel-text-muted);
  font-size: var(--font-size-md);
  line-height: var(--line-height-normal);
}

.login-hero-bullet {
  color: var(--color-brand-panel-accent);
  font-weight: var(--font-weight-bold);
}

/* ---- Centered fallback (signing-in / transient auth states) ---- */
.login-container {
  min-height: 100vh;
  background: var(--neutral-lightest);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-lg);
}

.login-card {
  width: 100%;
  max-width: 420px;
  background: var(--neutral-white);
  box-shadow: var(--shadow-md);
  border-radius: var(--radius-md);
  border: 1px solid var(--neutral-lighter);
}

.login-card-signing-in :global(.ant-card-body) {
  padding: var(--spacing-xxl);
}

.login-signing-in-content {
  text-align: center;
}

.login-title {
  color: var(--neutral-darkest);
  margin-bottom: var(--spacing-sm);
}

/* ---- Responsive: hide the hero, let the page flow naturally ---- */
@media (max-width: 1100px) {
  .login-split {
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }

  .login-pane-form {
    flex: 1 1 auto;
    overflow-y: visible;
  }

  .login-pane-hero {
    display: none;
  }

  .login-form-center {
    justify-content: center;
  }
}

/* Magic-link box: the transient failure notice (rate limit / unavailable)
   sits above the address field. */
.login-magic-alert {
  margin-block: var(--spacing-md);
}

/* The centred fallback card (signing in, set a password) is narrower than the
   split layout's form column and carries its own chrome. */
.login-card-narrow {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  padding: var(--spacing-xxl);
}

.login-card-narrow .login-logo-img {
  align-self: flex-start;
  margin-bottom: var(--spacing-sm);
}

/* Skipping must be as easy to find as saving, and quieter than it. */
.login-skip-button {
  align-self: flex-start;
  padding-inline: 0;
}

.auth-callback-wait {
  display: flex;
  min-height: 60vh;
  align-items: center;
  justify-content: center;
}

/* The fine print under the button: what the link does, how long it lasts. */
.login-magic-terms {
  display: block;
  font-size: var(--font-body-sm-size);
  line-height: var(--font-body-sm-line-height);
  color: var(--neutral-medium);
}
/* A plain page, not a photograph behind a scrim. This screen tells someone
   their account is not usable yet; a stock hallway image under that message
   read as marketing. The card carries it on the page background instead. */
.no-org-container {
  min-height: 100vh;
  background: var(--color-bg-page);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-lg);
}

.no-org-card {
  width: 100%;
  max-width: 500px;
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius-md);
  border: none;
}

.no-org-header {
  text-align: center;
  margin-bottom: var(--spacing-xxl);
}

.no-org-brand {
  margin-bottom: var(--spacing-xxl);
}

.no-org-brand-content {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--spacing-md);
}

.no-org-logo {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-lg);
  background: linear-gradient(
    135deg,
    var(--pilot-purple) 0%,
    var(--pilot-violet) 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: var(--spacing-md);
  box-shadow: var(--shadow-step-purple);
}

.no-org-logo-text {
  color: var(--neutral-white);
  font-size: var(--font-h0-size); /* 36px - closest to 32px */
  font-weight: var(--font-h0-weight);
  line-height: var(--font-h0-line-height);
  letter-spacing: var(--letter-spacing-tight);
}

.no-org-brand-text {
  text-align: left;
}

.no-org-company-name {
  font-size: var(--font-h1-size); /* 24px - closest to 28px */
  font-weight: var(--font-h1-weight);
  line-height: var(--font-h1-line-height);
  color: var(--neutral-darkest);
  letter-spacing: var(--letter-spacing-tight);
}

.no-org-marketplace-text {
  font-size: var(--font-h3-size);
  font-weight: var(--font-h3-weight);
  line-height: var(--font-h3-line-height);
  color: var(--pilot-purple);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  margin-top: var(--spacing-xxs);
}

.no-org-logo-img {
  height: var(--line-height-menu-item); /* 40px */
  width: auto;
}

.no-org-separator {
  width: 60px;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    var(--neutral-lighter),
    transparent
  );
  margin: 0 auto var(--spacing-xl) auto;
}

.no-org-error-icon {
  font-size: var(--font-h0-size); /* Icon size - keeping proportional */
  color: var(--warning-dark);
  margin-bottom: var(--spacing-md);
}

.no-org-title {
  color: var(--neutral-darkest);
  margin-bottom: var(--spacing-xs);
}

.no-org-subtitle {
  font-size: var(--font-body-md-size);
  font-weight: var(--font-body-md-weight);
  line-height: var(--font-body-md-line-height);
  margin-bottom: var(--spacing-xl);
}

.no-org-content {
  text-align: left;
}

.no-org-info-section {
  padding: var(--spacing-lg);
  background: var(--neutral-lightest);
  border-radius: var(--radius-sm);
  border-left: 4px solid var(--warning-dark);
  margin-bottom: var(--spacing-xl);
}

.no-org-info-space {
  width: 100%;
  align-items: flex-start;
}

.no-org-info-icon {
  font-size: var(--font-h2-size);
  color: var(--warning-dark);
  margin-top: var(--spacing-xxs);
  flex-shrink: 0;
}

.no-org-info-text {
  flex: 1;
}

.no-org-message {
  margin: 0;
  color: var(--neutral-darker);
  font-size: var(--font-body-md-size); /* 14px - closest to 15px */
  font-weight: var(--font-body-md-weight);
  line-height: var(--font-body-md-line-height);
}

.no-org-support-section {
  text-align: center;
  margin-bottom: var(--spacing-xl);
}

.no-org-support-title {
  color: var(--neutral-darkest);
  margin-bottom: var(--spacing-sm);
}

.no-org-support-text {
  color: var(--neutral-dark);
  font-size: var(--font-body-md-size);
  font-weight: var(--font-body-md-weight);
  line-height: var(--font-body-md-line-height);
  margin-bottom: var(--spacing-lg);
}

.no-org-support-button {
  width: 100%;
  height: var(--button-height-lg);
  border-radius: var(--button-radius);
  background: var(--pilot-purple);
  border-color: var(--pilot-purple);
  font-size: var(--font-h3-size);
  font-weight: var(
    --font-body-md-semibold-weight
  ); /* 600 - UI Kit doesn't use 500 */
  line-height: var(--font-h3-line-height);
}

.no-org-support-button:hover {
  background: var(--pilot-purple-dark);
  border-color: var(--pilot-purple-dark);
}

.no-org-footer {
  text-align: center;
  padding: var(--spacing-md);
  background: var(--neutral-lightest);
  border-radius: var(--radius-sm);
}

.no-org-footer-text {
  font-size: var(--font-body-sm-size);
  font-weight: var(--font-body-sm-weight);
  line-height: var(--font-body-sm-line-height);
  color: var(--neutral-dark);
}

/* Responsive design */
@media (max-width: 768px) {
  .no-org-container {
    padding: var(--spacing-md);
  }

  .no-org-card {
    max-width: 100%;
  }

  .no-org-brand-content {
    flex-direction: column;
    text-align: center;
  }

  .no-org-logo {
    margin-right: 0;
    margin-bottom: var(--spacing-sm);
  }

  .no-org-brand-text {
    text-align: center;
  }
}
/* Language picker trigger — a compact, professional pill that harmonises with
   the header user chip. Icons use currentColor so they follow the trigger's
   state colour (neutral → primary on hover/open). */
._trigger_1kfol_4 {
  /* Block-level (flex, not inline-flex) so it hugs its Space wrapper at 44px and
     centres on the same line as the user chip. inline-flex gets caught in the
     header's tall line-height box and sits a few px high (misaligned). */
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  height: 44px;
  padding: 0 var(--spacing-sm) 0 var(--spacing-md);
  border: 1px solid var(--neutral-light);
  border-radius: var(--radius-xs);
  background-color: var(--neutral-white);
  color: var(--neutral-darker);
  font-size: var(--font-body-md-size);
  font-weight: var(--font-body-md-semibold-weight);
  line-height: var(--font-body-md-line-height);
  cursor: pointer;
  transition: var(--transition-all);
  user-select: none;
}

._trigger_1kfol_4:hover {
  border-color: var(--primary-lighter);
  background-color: var(--primary-lightest);
  color: var(--primary);
}

._trigger_1kfol_4:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-lightest);
}

/* Open state mirrors hover so the trigger reads as "active" while the menu
   is showing. */
._triggerOpen_1kfol_39,
._triggerOpen_1kfol_39:hover {
  border-color: var(--primary);
  background-color: var(--primary-lightest);
  color: var(--primary);
}

._globe_1kfol_46 {
  font-size: var(--font-body-lg-size);
  color: var(--primary);
}

._current_1kfol_51 {
  white-space: nowrap;
}

._chevron_1kfol_55 {
  font-size: var(--font-body-xs-size);
  opacity: 0.65;
  transition: transform var(--transition-normal);
}

._chevronOpen_1kfol_61 {
  transform: rotate(180deg);
}

/* --- Dropdown menu --- */
._menu_1kfol_66 .ant-dropdown-menu {
  min-width: 196px;
  padding: var(--spacing-xs);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-popover);
}

._menu_1kfol_66 .ant-dropdown-menu-item {
  padding: var(--spacing-sm) var(--spacing-sm);
  border-radius: var(--radius-sm);
}

._menu_1kfol_66 .ant-dropdown-menu-item-selected {
  background-color: var(--primary-lightest);
}

._option_1kfol_83 {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

._optionCode_1kfol_89 {
  flex-shrink: 0;
  min-width: 30px;
  padding: var(--spacing-xxs) var(--spacing-xs);
  text-align: center;
  font-size: var(--font-body-xs-size);
  font-weight: var(--font-body-md-bold-weight);
  letter-spacing: 0.04em;
  color: var(--neutral-darker);
  background-color: var(--neutral-lighter);
  border-radius: var(--radius-xs);
  transition: var(--transition-all);
}

._optionName_1kfol_103 {
  flex: 1;
  color: var(--neutral-darkest);
  font-size: var(--font-body-md-size);
  font-weight: var(--font-body-md-weight);
  white-space: nowrap;
}

._check_1kfol_111 {
  flex-shrink: 0;
  margin-left: var(--spacing-sm);
  color: var(--primary);
  font-size: var(--font-body-sm-size);
}

/* Active row: tint the code badge + name to brand colour. */
._menu_1kfol_66 .ant-dropdown-menu-item-selected ._optionCode_1kfol_89 {
  color: var(--neutral-white);
  background-color: var(--primary);
}

._menu_1kfol_66 .ant-dropdown-menu-item-selected ._optionName_1kfol_103 {
  color: var(--primary);
  font-weight: var(--font-body-md-semibold-weight);
}

/* Header presentation. The bordered 44px control belongs on the landing and
   login pages, where it stands alone; in a 52px bar beside a button, an org
   name and an avatar it reads as clutter. Here it is chrome: no box, no caret,
   just the globe and the locale code, quiet until you reach for it. */
._compact_1kfol_133 {
  gap: var(--spacing-xxs);
  height: auto;
  padding: var(--spacing-xxs) var(--spacing-xs);
  border: 0;
  background: none;
  color: var(--neutral-dark);
  font-size: var(--font-body-sm-size);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--font-label-tracking);
}

._compact_1kfol_133:hover {
  border: 0;
  background: none;
  color: var(--neutral-darkest);
}

._compact_1kfol_133 ._globe_1kfol_46 {
  font-size: var(--font-body-sm-size);
}
.onboarding-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-scrim-medium);
  z-index: var(--z-header);
  backdrop-filter: blur(4px);
}
.privacy-modal {
  max-width: 90vw;
}

.privacy-content {
  padding: var(--spacing-xl) 0;
}

.privacy-header {
  text-align: center;
  margin-bottom: var(--spacing-xxl);
}

.privacy-icon {
  font-size: var(--icon-size-hero);
  color: var(--primary);
  margin-bottom: var(--spacing-lg);
}

.privacy-title {
  margin-bottom: var(--spacing-xs);
  color: var(--neutral-darkest);
}

.privacy-subtitle {
  font-size: var(--font-h3-size); /* 16px */
  line-height: var(--font-h3-line-height);
}

.privacy-cards {
  margin-bottom: var(--spacing-xl);
}

.privacy-card {
  margin-bottom: var(--spacing-md);
  border: 1px solid var(--neutral-lighter);
  border-radius: var(--radius-sm);
}

.privacy-card-last {
  margin-bottom: var(--spacing-xl);
  border: 1px solid var(--neutral-lighter);
  border-radius: var(--radius-sm);
}

.privacy-card-body {
  padding: var(--spacing-lg);
}

.privacy-card-space {
  width: 100%;
}

.privacy-card-icon {
  font-size: var(--icon-size-lg);
  margin-top: var(--spacing-xxs);
}

.privacy-card-icon-blue {
  color: var(--primary);
}

.privacy-card-icon-green {
  color: var(--success);
}

.privacy-card-text {
  flex: 1;
}

.privacy-card-heading {
  margin: 0 0 var(--spacing-xs) 0;
  color: var(--neutral-darkest);
}

.privacy-card-paragraph {
  margin: 0;
  color: var(--neutral-dark);
  font-size: var(--font-body-md-size); /* 14px */
  line-height: var(--font-body-md-line-height);
}

.privacy-checkboxes {
  margin-bottom: var(--spacing-xl);
}

.privacy-checkbox-container {
  width: 100%;
}

.privacy-checkbox {
  font-size: var(--font-body-md-size); /* 14px */
  line-height: var(--font-body-md-line-height);
}

.privacy-checkbox-strong {
  color: var(--primary);
}

.privacy-divider {
  margin: var(--spacing-xl) 0;
}

.privacy-buttons {
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-sm);
}

.privacy-button-decline {
  flex: 1;
  height: var(--button-height-lg);
  border-radius: var(--button-radius);
  font-size: var(--font-h3-size); /* 16px */
}

.privacy-button-accept {
  flex: 2;
  height: var(--button-height-lg);
  border-radius: var(--button-radius);
  font-size: var(--font-h3-size); /* 16px */
}

.privacy-button-accept-enabled {
  background: var(--success);
  border-color: var(--success);
}

.privacy-button-accept-disabled {
  background: var(--neutral-light);
  border-color: var(--neutral-light);
}

.privacy-footer {
  text-align: center;
  margin-top: var(--spacing-md);
}

.privacy-footer-text {
  font-size: var(--font-body-sm-size); /* 12px */
  line-height: var(--font-body-sm-line-height);
}
/* A plain page, not a photograph behind a scrim. This screen tells someone
   their account is not usable yet; a stock hallway image under that message
   read as marketing. The card carries it on the page background instead. */
.rejection-container {
  min-height: 100vh;
  background: var(--color-bg-page);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-lg);
}

.rejection-card {
  width: 100%;
  max-width: 520px;
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius-md);
  border: none;
}

.rejection-header {
  text-align: center;
  margin-bottom: var(--spacing-xxl);
}

.rejection-brand {
  margin-bottom: var(--spacing-xxl);
}

.rejection-brand-content {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--spacing-md);
}

.rejection-logo {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-lg);
  background: linear-gradient(
    135deg,
    var(--pilot-purple) 0%,
    var(--pilot-violet) 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: var(--spacing-md);
  box-shadow: var(--shadow-step-purple);
}

.rejection-logo-text {
  color: var(--neutral-white);
  font-size: var(--font-h1-size); /* 24px - closest to 32px */
  font-weight: var(--font-h1-weight);
  letter-spacing: var(--letter-spacing-tight);
}

.rejection-brand-text {
  text-align: left;
}

.rejection-company-name {
  font-size: var(--font-h1-size); /* 24px - closest to 28px */
  font-weight: var(--font-h1-weight);
  color: var(--neutral-darkest);
  letter-spacing: var(--letter-spacing-tight);
  line-height: 1.1;
}

.rejection-marketplace-text {
  font-size: var(--font-h3-size);
  font-weight: var(--font-h3-weight);
  color: var(--pilot-purple);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  margin-top: var(--spacing-xxs);
}

.rejection-logo-img {
  height: var(--line-height-menu-item); /* 40px */
  width: auto;
}

.rejection-separator {
  width: 60px;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    var(--neutral-lighter),
    transparent
  );
  margin: 0 auto var(--spacing-xl) auto;
}

.rejection-warning-icon {
  font-size: var(--font-h0-size); /* 36px - closest to 48px for icon */
  color: var(--danger);
  margin-bottom: var(--spacing-md);
}

.rejection-title {
  color: var(--neutral-darkest);
  margin-bottom: var(--spacing-xs);
}

.rejection-subtitle {
  font-size: var(--font-body-md-size);
  margin-bottom: var(--spacing-xl);
}

.rejection-content {
  text-align: left;
}

.rejection-info-section {
  padding: var(--spacing-lg);
  background: var(--danger-lightest);
  border-radius: var(--radius-sm);
  border-left: 4px solid var(--danger);
  margin-bottom: var(--spacing-xl);
}

.rejection-info-space {
  width: 100%;
  align-items: flex-start;
}

.rejection-type-icon {
  font-size: var(--font-h2-size);
  margin-top: var(--spacing-xxs);
  flex-shrink: 0;
}

.rejection-icon-privacy {
  color: var(--success-dark);
}

.rejection-icon-terms {
  color: var(--primary);
}

.rejection-info-text {
  flex: 1;
}

.rejection-message {
  margin: 0;
  color: var(--neutral-darker);
  font-size: var(--font-body-md-size); /* 14px - closest to 15px */
  line-height: 1.6;
}

.rejection-countdown-section {
  text-align: center;
  margin-bottom: var(--spacing-xl);
  padding: var(--spacing-lg);
  background: var(--neutral-lightest);
  border-radius: var(--radius-sm);
}

.rejection-countdown-header {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--spacing-md);
}

.rejection-countdown-icon {
  font-size: var(--font-h2-size);
  color: var(--pilot-purple);
  margin-right: var(--spacing-xs);
}

.rejection-countdown-title {
  color: var(--neutral-darkest);
  margin: 0;
  font-size: var(--font-h3-size); /* 16px - closest to 18px */
  animation: pulse 1s ease-in-out infinite;
}

.rejection-progress-container {
  margin-bottom: var(--spacing-lg);
}

.rejection-progress {
  height: 8px;
}

.rejection-progress .ant-progress-bg {
  border-radius: var(--radius-xs);
}

.rejection-redirect-button {
  width: 100%;
  height: var(--button-height-lg);
  border-radius: var(--button-radius);
  background: var(--pilot-purple);
  border-color: var(--pilot-purple);
  font-size: var(--font-h3-size);
  font-weight: var(
    --font-body-md-semibold-weight
  ); /* 600 - UI Kit doesn't use 500 */
}

.rejection-redirect-button:hover {
  background: var(--pilot-purple-dark);
  border-color: var(--pilot-purple-dark);
}

.rejection-footer {
  text-align: center;
  padding: var(--spacing-md);
  background: var(--neutral-lightest);
  border-radius: var(--radius-sm);
}

.rejection-footer-text {
  font-size: var(--font-body-sm-size);
  color: var(--neutral-dark);
}

/* Responsive design */
@media (max-width: 768px) {
  .rejection-container {
    padding: var(--spacing-md);
  }

  .rejection-card {
    max-width: 100%;
  }

  .rejection-brand-content {
    flex-direction: column;
    text-align: center;
  }

  .rejection-logo {
    margin-right: 0;
    margin-bottom: var(--spacing-sm);
  }

  .rejection-brand-text {
    text-align: center;
  }

  .rejection-countdown-header {
    flex-direction: column;
    gap: var(--spacing-xs);
  }

  .rejection-countdown-icon {
    margin-right: 0;
  }
}

/* Animation for countdown */
@keyframes pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
  100% {
    opacity: 1;
  }
}

/* Animation for rejection countdown title - merged above */
.terms-modal {
  max-width: 90vw;
}

.terms-content {
  padding: var(--spacing-xl) 0;
}

.terms-header {
  text-align: center;
  margin-bottom: var(--spacing-xxl);
}

.terms-icon {
  font-size: var(--icon-size-hero);
  color: var(--success);
  margin-bottom: var(--spacing-lg);
}

.terms-title {
  margin-bottom: var(--spacing-xs);
  color: var(--neutral-darkest);
}

.terms-subtitle {
  font-size: var(--font-h3-size);
  line-height: var(--font-h3-line-height);
}

.terms-cards {
  margin-bottom: var(--spacing-xl);
}

.terms-card {
  margin-bottom: var(--spacing-md);
  border: 1px solid var(--neutral-lighter);
  border-radius: var(--radius-sm);
}

.terms-card-last {
  margin-bottom: var(--spacing-xl);
  border: 1px solid var(--neutral-lighter);
  border-radius: var(--radius-sm);
}

.terms-card-body {
  padding: var(--spacing-lg);
}

.terms-card-space {
  width: 100%;
}

.terms-card-icon {
  font-size: var(--icon-size-lg);
  margin-top: var(--spacing-xxs);
}

.terms-card-icon-blue {
  color: var(--primary);
}

.terms-card-icon-green {
  color: var(--success);
}

.terms-card-text {
  flex: 1;
}

.terms-card-heading {
  margin: 0 0 var(--spacing-xs) 0;
  color: var(--neutral-darkest);
}

.terms-card-paragraph {
  margin: 0;
  color: var(--neutral-dark);
  font-size: var(--font-body-md-size);
  line-height: var(--font-body-md-line-height);
}

.terms-checkboxes {
  margin-bottom: var(--spacing-xl);
}

.terms-checkbox-container {
  width: 100%;
}

.terms-checkbox {
  font-size: var(--font-body-md-size);
  line-height: var(--font-body-md-line-height);
}

.terms-checkbox-strong {
  color: var(--primary);
}

.terms-divider {
  margin: var(--spacing-xl) 0;
}

.terms-buttons {
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-sm);
}

.terms-button-decline {
  flex: 1;
  height: var(--button-height-lg);
  border-radius: var(--button-radius);
  font-size: var(--font-h3-size);
  line-height: var(--font-h3-line-height);
}

.terms-button-accept {
  flex: 2;
  height: var(--button-height-lg);
  border-radius: var(--button-radius);
  font-size: var(--font-h3-size);
  line-height: var(--font-h3-line-height);
}

.terms-button-accept-enabled {
  background: var(--success);
  border-color: var(--success);
}

.terms-button-accept-disabled {
  background: var(--neutral-light);
  border-color: var(--neutral-light);
}

.terms-footer {
  text-align: center;
  margin-top: var(--spacing-md);
}

.terms-footer-text {
  font-size: var(--font-body-sm-size);
  line-height: var(--font-body-sm-line-height);
}
/**
 * ==========================================================================
 * DESIGN TOKENS
 * ==========================================================================
 *
 * This file defines the design token system for the application.
 *
 * STRUCTURE:
 *   1. Primitives — raw values (colors, spacing, radii, shadows, typography)
 *   2. Semantic tokens — purpose-based aliases (kept minimal, only actively used)
 *   3. Component tokens — component-specific patterns (buttons, inputs, cards)
 *
 * USAGE RULES:
 *   - Use primitive tokens directly in component CSS
 *   - Component tokens exist for elements with complex state (buttons, inputs)
 *   - Do NOT add tokens speculatively — only add what is actively used
 *
 * NAMING CONVENTION (UI Kit standard):
 *   lightest → lighter → light → (main) → dark → darker
 *
 * EXAMPLE:
 *   background: var(--neutral-lightest);
 *   color: var(--primary);
 *   border-radius: var(--radius-sm);
 *
 * Last cleaned: 2026-02-13
 */

:root {
  /* ==========================================================================
     SECTION 1: PRIMITIVE COLOR SCALE (UI Kit aligned)
     These are the raw values. Semantic tokens below reference these.
     ========================================================================== */

  /* Accent Teal Scale — the ONE accent in the system.
     Spent only where it earns its place: wayfinding (active tab, counts),
     the primary action, and live status. Everything else is neutral. */
  --primary-lightest: #f5faf9; /* accent tint, e.g. selected-row wash */
  --primary-lighter: #d6ebe8;
  --primary-light: #0fa093; /* accent bright — live dots */
  --primary: #0e8c82;
  --primary-hover: #0c7b72;
  --primary-dark: #0a6a62;

  /* Secondary Ink Scale — replaces the old navy. Ink is a NEUTRAL here, not a
     second brand hue: it carries the dark button and headline weight. */
  --secondary-light: #54595e;
  --secondary: #17191b;

  /* Tertiary — folded onto the accent. The system has one accent, so the
     tertiary scale is kept only so existing call sites resolve; it is not a
     second hue and nothing new should reach for it. */
  --tertiary-lightest: #f5faf9;
  --tertiary-lighter: #d6ebe8;
  --tertiary-light: #0fa093;
  --tertiary: #0e8c82;
  --tertiary-dark: #0c7b72;
  --tertiary-darker: #0a6a62;

  /* Neutral Scale (untinted grays — the chrome is white, not blue-green) */
  --neutral-white: #ffffff;
  --neutral-lightest: #fafafa; /* page background */
  --neutral-lighter: #f0f1f2; /* row divider */
  --neutral-light: #e6e7e8; /* hairline — the default border everywhere */
  --neutral: #c9ccce; /* idle status dot */
  --neutral-medium: #9aa0a6; /* faint labels */
  --neutral-dark: #6b7076; /* muted meta */
  --neutral-darker: #54595e; /* body secondary */
  --neutral-darkest: #17191b; /* ink — headlines, dark button */
  --neutral-black: #000000;

  /* Strip — the off-white used for stat bars and list group headers. Sits
     between white cards and the page background; not part of the ramp above
     because it reads as a SURFACE, not a step on the neutral scale. */
  --neutral-strip: #fcfcfc;

  /* Control border — one step darker than the hairline, for inputs and
     secondary buttons whose edge has to read as interactive. */
  --neutral-control: #d9dbdd;

  /* Success — folded onto the accent. A finished thing is confirmed in teal
     (check on tint), never in a separate green. */
  --success-lightest: #f5faf9;
  --success-lighter: #d6ebe8;
  --success-light: #0fa093;
  --success: #0e8c82;
  --success-dark: #0a6a62;

  /* Warning — ink, not amber. A warning is a white surface with an ink border
     and ink title; urgency is carried by weight, never by hue. Deadlines are
     warnings, so they must never look like errors. */
  --warning-lightest: #ffffff;
  --warning-lighter: #f0f1f2;
  --warning-light: #54595e;
  --warning: #17191b;
  --warning-dark: #17191b;
  --warning-darker: #000000;

  /* Danger Red Scale — errors and destructive actions ONLY. Never a deadline,
     never a warning. */
  --danger-lightest: #fcf7f6;
  --danger-lighter: #f3dedc;
  --danger-light: #c9605b;
  --danger: #a8322d;
  --danger-dark: #8e2924;
  --danger-darker: #6f201c;

  /* Info — folded onto the accent (no cyan in the system). */
  --info-lightest: #f5faf9;
  --info-lighter: #d6ebe8;
  --info-light: #0fa093;
  --info: #0e8c82;
  --info-dark: #0c7b72;
  --info-darker: #0a6a62;

  /* Insights (AI transparency) — folded onto the accent. Assistive actions are
     told apart from primary CTAs by SHAPE (outlined, not filled), not by hue. */
  --insights-lightest: #f5faf9;
  --insights-lighter: #d6ebe8;
  --insights-light: #0fa093;
  --insights: #0e8c82;
  --insights-dark: #0a6a62;

  /* Quiet washes for Overview chips & the partner catch-all card */
  --navy-chip-bg: #f0f1f2;
  --partner-card-bg: #fcfcfc;
  --partner-card-border: #e6e7e8;

  /* Award highlights — accent, not gold. No amber ships. */
  --gold-lightest: #f5faf9;
  --gold-light: #d6ebe8;
  --gold: #0e8c82;
  --gold-dark: #0e8c82;

  /* Medal colors (bid ranking: 1st/2nd/3rd place) */
  --color-medal-gold: #ffd700;
  --color-medal-silver: #c0c0c0;
  --color-medal-bronze: #cd7f32;

  /* Legacy Accent/Brand Colors (pilot mode - not in UI Kit) */
  --pilot-purple: #4f46e5;
  --pilot-purple-light: #818cf8;
  --pilot-purple-lighter: #c7d2fe;
  --pilot-purple-lightest: #eef2ff;
  --pilot-purple-dark: #4338ca;
  --pilot-violet: #7c3aed;

  /* ==========================================================================
     SECTION 2: SEMANTIC TOKENS
     Only tokens that are actively used in CSS/TSX files or referenced by
     component pattern tokens. Unused semantic tokens have been removed.
     ========================================================================== */

  /* Backgrounds (used directly or by component patterns) */
  --color-bg-hover: var(--neutral-lighter);
  --color-bg-page: var(--neutral-lightest);
  --color-bg-strip: var(--neutral-strip);
  --color-bg-info: var(--info-lightest);
  --color-bg-insights: var(--insights-lightest);

  /* Text (used directly) */
  --color-text-default: var(--neutral-darkest);
  --color-text-heading: var(--neutral-darkest);
  --color-text-secondary: var(--neutral-darker);
  --color-text-tertiary: var(--neutral-dark);
  --color-text: var(--color-text-default);

  /* Borders (used directly or by component patterns) */
  --color-border-light: var(--neutral-lighter);
  --color-border-card: var(--neutral-light);
  --color-border: var(--neutral-light);
  /* The interactive edge: inputs, secondary buttons, chips */
  --color-border-control: var(--neutral-control);
  --color-border-info: var(--info-light);
  --color-border-insights: var(--insights-light);

  /* ==========================================================================
     SECTION 2: SEMANTIC TOKENS - NAVIGATION
     ========================================================================== */

  /* Sidebar/Nav menu - UI Kit aligned */
  --color-text-nav-default: var(--neutral-dark);
  --color-text-nav-active: var(--neutral-darkest);
  --color-icon-nav-default: var(--neutral-dark);
  --color-icon-nav-active: var(--neutral-darkest);
  --color-fill-nav-active: transparent;
  /* Wayfinding is a 2px accent underline, not a filled pill */
  --nav-active-underline: inset 0 -2px 0 var(--primary);

  /* Breadcrumbs */
  --color-breadcrumb-text: var(--neutral-dark);
  --color-breadcrumb-text-current: var(--neutral-darkest);
  --color-breadcrumb-separator: var(--neutral);
  --color-breadcrumb-link: var(--secondary);
  --color-breadcrumb-link-hover: var(--secondary-light);

  /* ==========================================================================
     SECTION 2: SEMANTIC TOKENS - SPECIAL/BRAND
     ========================================================================== */

  /* Pilot mode (feature flag - not in UI Kit) */
  --color-pilot-header-bg: linear-gradient(
    90deg,
    var(--pilot-purple),
    var(--pilot-violet)
  );
  --color-pilot-text: var(--neutral-white);
  --color-pilot-button-bg: rgba(255, 255, 255, 0.2);
  --color-pilot-button-border: rgba(255, 255, 255, 0.4);

  /* Brand */
  --color-brand-logo: var(--neutral-darkest); /* Ink wordmark */
  --color-brand-mark: var(--primary); /* Teal triangle */
  --color-brand-panel: #0e3238; /* The one dark surface: the login panel */
  --color-brand-panel-text: #e9f1f0;
  --color-brand-panel-text-muted: #9db4b6;
  --color-brand-panel-accent: #3ecfc0; /* on-dark accent — brighter than the
     page accent so it clears the dark panel's contrast floor */

  /* The global "Start something" button is the only dark chrome element, so
     its keycap hint needs a border that reads on ink rather than on white. */
  --color-kbd-border-on-dark: #3a3f44;

  /* ==========================================================================
     SPACING TOKENS (UI Kit aligned)
     Named scale from UI Kit: xs → sm → md → lg → xl → xxl → xxxl
     ========================================================================== */

  /* UI Kit Named Spacing Scale */
  --spacing-xxs: 2px;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 24px;
  --spacing-xxl: 36px;
  --spacing-xxxl: 48px;
  --spacing-xxxxl: 64px;

  /* ==========================================================================
     TYPOGRAPHY TOKENS
     Font: Helvetica Neue
     ========================================================================== */

  /* Font Family */
  --font-family-base: "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Monospace — code-like identifiers (asset numbers, references) */
  --font-family-mono: ui-monospace, "SF Mono", Menlo, monospace;

  /* Numeric — counts, references and dates stay in the base face and get
     tabular figures from `font-variant-numeric` (see the `.num` utility and
     --font-numeric-variant) rather than switching to a mono face. Helvetica
     has proper tabular figures; a face swap mid-sentence reads as a bug. */
  --font-family-numeric: var(--font-family-base);
  --font-numeric-variant: tabular-nums;

  /* Heading Styles */
  /* H0 - hero headline (Overview value prop) */
  --font-h0-size: 30px;
  --font-h0-line-height: 1.15;
  --font-h0-weight: 700; /* Bold */

  /* H1 - page title */
  --font-h1-size: 24px;
  --font-h1-line-height: 1.2;
  --font-h1-weight: 700; /* Bold */

  /* H2 - decision headline, card headlines */
  --font-h2-size: 19px;
  --font-h2-line-height: 1.25;
  --font-h2-weight: 700; /* Bold */

  /* H3 - section headings inside cards */
  --font-h3-size: 15px;
  --font-h3-line-height: 1.35;
  --font-h3-weight: 700; /* Bold */

  /* Body Styles */
  /* Body / Large - lead paragraphs */
  --font-body-lg-size: 14.5px;
  --font-body-lg-semibold-weight: 500;

  /* Body / Large / Light - hero card body text */
  --font-body-lg-light-size: 14.5px;
  --font-body-lg-light-line-height: 1.6;
  --font-body-lg-light-weight: 400;

  /* Body / Medium / Regular - the workhorse */
  --font-body-md-size: 13.5px;
  --font-body-md-line-height: 1.65;
  --font-body-md-weight: 400; /* Regular */

  /* Body / Medium / Semibold - buttons, row titles */
  --font-body-md-semibold-weight: 500;

  /* Body / Medium / Bold - headlines in info boxes */
  --font-body-md-bold-weight: 700;

  /* Body / Small - meta and reference lines */
  --font-body-sm-size: 12px;
  --font-body-sm-line-height: 1.5;
  --font-body-sm-weight: 400; /* Regular */

  /* Body / Small / Semibold - tags */
  --font-body-sm-semibold-weight: 500;

  /* Body / Extra Small - fine print, kbd hints */
  --font-body-xs-size: 10.5px;

  /* Section label — 11 / 700 / .08em uppercase, the only uppercase in the UI */
  --font-label-size: 11px;
  --font-label-weight: 700;
  --font-label-tracking: 0.08em;

  /* Size ramp used directly by component CSS */
  --font-size-xs: 11.5px;
  --font-size-sm: 12.5px;
  --font-size-base: 13px;
  --font-size-md: 13.5px;
  --font-size-lg: 15px;
  --font-size-xl: 19px;
  --font-size-2xl: 23px;

  --font-weight-light: 400;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 500;
  --font-weight-bold: 700;

  --line-height-tight: 1.25;
  --line-height-normal: 1.5;

  /* ==========================================================================
     SHADOW TOKENS
     ========================================================================== */

  /* Normal chrome carries NO shadow: cards are separated by a 1px hairline,
     not by elevation. Shadow is reserved for surfaces that genuinely float
     above the page — the command palette, modals, and toasts. Card-level
     shadow tokens resolve to `none` so existing call sites flatten with the
     rest of the system instead of having to be hunted down one by one. */
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: 0 16px 48px rgba(23, 25, 27, 0.24);

  --shadow-card-ui: none;
  --shadow-card: none;

  /* Genuinely floating surfaces */
  --shadow-modal: 0 16px 48px rgba(23, 25, 27, 0.24);
  --shadow-popover: 0 16px 48px rgba(23, 25, 27, 0.24);
  --shadow-toast: 0 4px 16px rgba(23, 25, 27, 0.1);
  --shadow-dock: 0 -2px 10px rgba(23, 25, 27, 0.06);
  --shadow-dock-strong: 0 -6px 24px rgba(23, 25, 27, 0.12);

  /* Flat by design — kept so call sites resolve */
  --shadow-segment: none;
  --shadow-tile: none;
  --shadow-card-open: none;
  --shadow-pill-primary: none;
  --shadow-primary-raised: none;

  /* ==========================================================================
     CONTROL HEIGHT TOKENS (for Ant Design components)
     ========================================================================== */

  --control-height-sm: 32px;
  --control-height: 36px;
  --control-height-lg: 40px;

  /* ==========================================================================
     OPACITY-BASED INTERACTION STATES
     ========================================================================== */

  /* Ink at various opacities (for Tree, Cascader, Transfer, etc.) */
  --color-secondary-active-bg: rgba(23, 25, 27, 0.08);
  --color-secondary-hover-bg: rgba(23, 25, 27, 0.04);

  /* ==========================================================================
     LAYOUT TOKENS
     ========================================================================== */

  --header-height: 52px;
  /* The stats strip that sits under the header on Work and Portfolio */
  --strip-height: 46px;
  --sidebar-padding: var(--spacing-lg);
  --page-max-width: 1160px;

  /* ==========================================================================
     BORDER RADIUS TOKENS (UI Kit aligned)
     Named scale from UI Kit: xxs → xs → sm → md → lg → xl → xxl
     ========================================================================== */

  --radius-xxs: 0px;
  --radius-xs: 3px; /* controls: buttons, inputs, chips */
  --radius-sm: 4px; /* cards, toasts */
  --radius-md: 6px; /* modals, the command palette */
  --radius-lg: 8px;
  --radius-xl: 10px;
  --radius-full: 9999px; /* status dots and avatars ONLY, never buttons */

  /* ==========================================================================
     Z-INDEX TOKENS
     ========================================================================== */

  /* Base layers */
  --z-base: 0;
  --z-elevated: 1;
  --z-content: 10;

  /* UI elements */
  --z-dropdown: 100;
  --z-sidebar: 100;
  --z-sticky: 500;
  --z-filters: 800;
  --z-search: 900;

  /* Overlays and modals */
  --z-header: 1000;
  --z-overlay: 1010;
  --z-modal: 1050;

  /* Floating dev tooling (above header, below fullscreen surfaces) */
  --z-dev-panel: 1100;

  /* Fullscreen surfaces (immersive overlays that sit above modals) */
  --z-fullscreen: 1500;
  --z-toast: 1600;

  /* Critical UI */
  --z-notification: 9999;
  --z-overlay-max: 999999;

  /* ==========================================================================
     TRANSITION TOKENS
     ========================================================================== */

  /* Motion durations (the only sanctioned transition/animation timings) */
  --duration-fast: 0.1s;
  --duration-quick: 0.12s;
  --duration-snappy: 0.15s;
  --duration-normal: 0.2s;
  --duration-moderate: 0.25s;
  --duration-slow: 0.3s;

  /* Motion easings */
  --ease-standard: ease; /* CSS default; also the implicit easing when omitted */
  --ease-in-out: ease-in-out;
  --ease-emphasized: cubic-bezier(0.4, 0, 0.2, 1);

  /* Composite transitions (built on the duration + easing primitives above) */
  --transition-fast: var(--duration-fast) var(--ease-standard);
  --transition-normal: var(--duration-normal) var(--ease-standard);

  /* Property-specific transitions */
  --transition-color: color var(--duration-normal) var(--ease-standard);
  --transition-all: all var(--duration-normal) var(--ease-standard);

  /* ==========================================================================
     FOCUS RING TOKENS
     For consistent keyboard navigation and accessibility states
     ========================================================================== */

  --focus-ring-color: rgba(23, 25, 27, 0.2);
  --focus-ring-color-primary: rgba(14, 140, 130, 0.35);
  --focus-ring-color-danger: rgba(168, 50, 45, 0.3);
  --focus-ring-color-success: rgba(14, 140, 130, 0.25);
  --focus-ring-color-pilot: rgba(14, 140, 130, 0.1);
  --focus-ring-width: 2px;
  --focus-ring: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
  --focus-ring-primary: 0 0 0 var(--focus-ring-width)
    var(--focus-ring-color-primary);
  --focus-ring-danger: 0 0 0 var(--focus-ring-width)
    var(--focus-ring-color-danger);
  --focus-ring-success: 0 0 0 var(--focus-ring-width)
    var(--focus-ring-color-success);
  --focus-ring-pilot: 0 0 0 3px var(--focus-ring-color-pilot);

  /* Soft selection rings (wider, lower-opacity halo for selected cards/rows) */
  --focus-ring-primary-soft: 0 0 0 3px rgba(14, 140, 130, 0.18);
  --focus-ring-success-soft: 0 0 0 3px rgba(14, 140, 130, 0.18);
  --focus-ring-danger-soft: 0 0 0 3px rgba(168, 50, 45, 0.15);

  /* ==========================================================================
     INTERACTIVE SHADOW TOKENS
     State-specific shadows for buttons and interactive elements
     ========================================================================== */

  /* Buttons are flat: a filled button is separated by its fill, an outlined
     one by its border. Kept as `none` so call sites resolve. */
  --shadow-button-primary: none;
  --shadow-button-primary-hover: none;
  --shadow-button-danger: none;
  --shadow-interactive-hover: none;

  /* ==========================================================================
     ICON SIZE TOKENS
     Consistent icon sizing across the application
     ========================================================================== */

  --icon-size-xs: 12px;
  --icon-size-sm: 14px;
  --icon-size-md: 16px;
  --icon-size-lg: 20px;
  --icon-size-xl: 24px;
  --icon-size-xxl: 32px;
  --icon-size-xxxl: 40px;
  --icon-size-hero: 48px;
  --icon-size-mega: 80px;

  /* ==========================================================================
     BORDER WIDTH TOKENS
     Consistent border widths
     ========================================================================== */

  --border-width-default: 1px;
  --border-width-thick: 2px;
  --border-width-heavy: 3px;

  /* ==========================================================================
     LETTER SPACING TOKENS
     Typography tracking values
     ========================================================================== */

  --letter-spacing-tighter: -0.02em; /* 24px+ titles */
  --letter-spacing-tight: -0.015em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.02em;
  --letter-spacing-wider: 0.08em; /* uppercase section labels */

  /* ==========================================================================
     CONTAINER / MAX-WIDTH TOKENS
     Layout container widths for different contexts
     ========================================================================== */

  --container-xl: 1200px;
  --container-xxl: 1440px;
  --container-prose: 65ch; /* Optimal reading width */

  /* ==========================================================================
     BUTTON TOKENS (from Figma specs)
     ========================================================================== */

  /* Button heights */
  --button-height-sm: 28px;
  --button-height-md: 36px;
  --button-height-lg: 40px;

  /* Buttons are rectangles with a 3px radius. Not pills. */
  --button-radius: var(--radius-xs);

  /* Button padding - vertical (top/bottom) */
  --button-padding-y: var(--spacing-sm); /* 8px */

  /* Button padding - horizontal (left/right) for text buttons */
  --button-padding-x-sm: var(--spacing-md); /* 12px */
  --button-padding-x-md: var(--spacing-md); /* 12px */

  /* Button padding shorthand for text buttons */
  --button-padding-sm: var(--button-padding-y) var(--button-padding-x-sm); /* 8px 12px */
  --button-padding-md: var(--button-padding-y) var(--button-padding-x-md); /* 8px 12px */

  /* Icon-only button padding (smaller horizontal) */
  --button-icon-only-padding-x-sm: var(--spacing-xs); /* 4px */
  --button-icon-only-padding-x-md: var(--spacing-sm); /* 8px */
  --button-icon-only-padding-sm: var(--button-padding-y)
    var(--button-icon-only-padding-x-sm); /* 8px 4px */
  --button-icon-only-padding-md: var(--button-padding-y)
    var(--button-icon-only-padding-x-md); /* 8px 8px */

  /* Icon-only button dimensions (square, same as height) */
  --button-icon-only-size-sm: var(--button-height-sm);
  --button-icon-only-size-md: var(--button-height-md);

  /* Button gap (between icon and label) */
  --button-gap: var(--spacing-xs); /* 4px - Spacing/x-s in Figma */

  /* Button colors - Primary (filled) */
  --button-primary-bg: var(--primary); /* #004ED8 */
  --button-primary-bg-hover: var(--primary-dark); /* #003AA0 */
  --button-primary-text: var(--neutral-white);

  /* Button colors - Secondary (outlined) */
  /* Secondary is a NEUTRAL outline with ink text, at a hairline weight. The
     accent belongs to the ONE primary action in a view; an accent-outlined
     button beside it competes for the same job, and the 2px→3px border growth
     on hover made the whole row shift. */
  --button-secondary-bg: var(--neutral-white);
  --button-secondary-border: var(--neutral-control);
  --button-secondary-border-hover: var(--primary);
  --button-secondary-border-disabled: var(--neutral-lighter);
  --button-secondary-text: var(--neutral-darkest);
  --button-secondary-text-hover: var(--primary);
  --button-secondary-border-width: var(--border-width-default); /* 1px */
  --button-secondary-border-width-hover: var(--border-width-default); /* 1px */

  /* Button colors - Tertiary/Link (ghost) */
  --button-tertiary-bg: transparent;
  --button-tertiary-bg-hover: var(--primary-lightest); /* #E0EAFA */
  --button-tertiary-text: var(--primary);

  /* Button colors - Disabled (shared across all variants) */
  --button-disabled-bg: var(--neutral-lightest);
  --button-disabled-text: var(--neutral-dark);

  /* ==========================================================================
     INPUT FIELD TOKENS (from Figma specs)
     ========================================================================== */

  /* Input heights */
  --input-height-sm: 32px;
  --input-height-md: 36px;
  --input-height-lg: 40px;

  /* Input border-radius */
  --input-radius: var(--radius-xs); /* 3px */

  /* Input padding */
  --input-padding-x: var(--spacing-md); /* 12px */
  --input-padding-y: var(--spacing-sm); /* 8px */

  /* Input colors - Default state */
  --input-bg: var(--neutral-white);
  --input-border: var(--neutral-control);
  --input-text: var(--neutral-darkest);
  --input-placeholder: var(--neutral);

  /* Input colors - Focus state */
  --input-border-focus: var(--primary);
  --input-shadow-focus: 0 0 0 2px var(--focus-ring-color-primary);

  /* Input colors - Hover state */
  --input-border-hover: var(--neutral-darker);

  /* Input colors - Disabled state */
  --input-bg-disabled: var(--neutral-lighter);
  --input-border-disabled: var(--neutral-light);
  --input-text-disabled: var(--neutral);

  /* Input colors - Error state */
  --input-border-error: var(--danger);
  --input-shadow-error: 0 0 0 2px var(--focus-ring-color-danger);

  /* Input colors - Success state */
  --input-border-success: var(--success);
  --input-icon-success: var(--success);

  /* Input colors - Recommendation/Info state */
  --input-helper-link: var(--primary);

  /* Input icon sizing */
  --input-icon-size: var(--icon-size-md); /* 16px */
  --input-icon-gap: var(--spacing-sm); /* 8px */

  /* Textarea specific */
  --textarea-min-height: 120px;
  --textarea-resize-icon-size: var(--icon-size-sm); /* 14px */

  /* Helper text */
  --input-helper-font-size: var(--font-body-sm-size); /* 12px */
  --input-helper-color: var(--neutral-dark);
  --input-helper-color-error: var(--danger);
  --input-helper-icon-size: var(--icon-size-sm); /* 14px */
  --input-helper-gap: var(--spacing-xs); /* 4px */

  /* Label styling */
  --input-label-font-size: var(--font-body-md-size); /* 14px */
  --input-label-font-weight: var(--font-weight-medium);
  --input-label-color: var(--neutral-darkest);
  --input-label-required-color: var(--primary); /* Blue asterisk */
  --input-label-gap: var(--spacing-xs); /* 4px gap to input */

  /* Character counter */
  --input-counter-font-size: var(--font-body-sm-size); /* 12px */
  --input-counter-color: var(--neutral-dark);

  /* Multi-select tags inside input */
  --input-tag-bg: var(--neutral-lighter);
  --input-tag-text: var(--neutral-darkest);
  --input-tag-radius: var(--radius-xs); /* 4px */
  --input-tag-padding: var(--spacing-xxs) var(--spacing-sm);
  --input-tag-gap: var(--spacing-xs); /* 4px */
  --input-tag-close-size: var(--icon-size-sm); /* 14px */

  /* ==========================================================================
     SELECT/DROPDOWN TOKENS (from Figma specs)
     ========================================================================== */

  /* Select trigger (uses input tokens for consistency) */
  --select-height: var(--input-height-md);
  --select-radius: var(--input-radius);
  --select-padding-x: var(--input-padding-x);
  --select-bg: var(--input-bg);
  --select-border: var(--input-border);
  --select-text: var(--input-text);

  /* Select trigger states */
  --select-border-hover: var(--input-border-hover);
  --select-border-focus: var(--input-border-focus);
  --select-border-open: var(--primary); /* Same as focus */
  --select-shadow-focus: var(--input-shadow-focus);

  /* Select chevron/arrow */
  --select-arrow-size: var(--icon-size-md); /* 16px */
  --select-arrow-color: var(--neutral-dark);
  --select-arrow-color-focus: var(--primary);

  /* Dropdown panel */
  --select-dropdown-bg: var(--neutral-white);
  --select-dropdown-border: var(--neutral-light);
  --select-dropdown-radius: var(--radius-sm); /* 8px */
  --select-dropdown-shadow: var(--shadow-lg);
  --select-dropdown-max-height: 280px;
  --select-dropdown-padding: var(--spacing-xs); /* 4px */

  /* Dropdown options */
  --select-option-height: 36px;
  --select-option-padding-x: var(--spacing-md); /* 12px */
  --select-option-padding-y: var(--spacing-sm); /* 8px */
  --select-option-radius: var(--radius-xs); /* 4px */

  /* Option states */
  --select-option-bg: transparent;
  --select-option-bg-hover: var(--neutral-lighter);
  --select-option-bg-selected: var(--primary-lightest);
  --select-option-text: var(--neutral-darkest);
  --select-option-text-hover: var(--neutral-darkest);
  --select-option-text-selected: var(--primary);

  /* Scrollbar in dropdown */
  --select-scrollbar-width: 6px;
  --select-scrollbar-track: var(--neutral-lightest);
  --select-scrollbar-thumb: var(--neutral-light);
  --select-scrollbar-thumb-hover: var(--neutral);

  /* ==========================================================================
     CHECKBOX TOKENS (from Figma specs)
     ========================================================================== */

  /* Checkbox sizing */
  --checkbox-size-sm: 16px;
  --checkbox-size-md: 20px;
  --checkbox-size-lg: 24px;
  --checkbox-size: var(--checkbox-size-md); /* Default */

  /* Checkbox border-radius */
  --checkbox-radius: var(--radius-xs); /* 4px */

  /* Checkbox colors - Unchecked */
  --checkbox-bg: var(--neutral-white);
  --checkbox-border: var(--neutral-light);
  --checkbox-border-width: var(--border-width-default); /* 1px */

  /* Checkbox colors - Hover (unchecked) */
  --checkbox-border-hover: var(--secondary); /* Navy on hover */

  /* Checkbox colors - Checked */
  --checkbox-bg-checked: var(--primary);
  --checkbox-border-checked: var(--primary);
  --checkbox-checkmark-color: var(--neutral-white);

  /* Checkbox colors - Hover (checked) */
  --checkbox-bg-checked-hover: var(--secondary); /* Navy on hover */
  --checkbox-border-checked-hover: var(--secondary);

  /* Checkbox colors - Indeterminate (partial selection) */
  --checkbox-bg-indeterminate: var(--primary);
  --checkbox-border-indeterminate: var(--primary);
  --checkbox-dash-color: var(--neutral-white);

  /* Checkbox colors - Disabled */
  --checkbox-bg-disabled: var(--neutral-lighter);
  --checkbox-border-disabled: var(--neutral-light);
  --checkbox-checkmark-disabled: var(--neutral);

  /* Checkbox label */
  --checkbox-label-gap: var(--spacing-sm); /* 8px */
  --checkbox-label-color: var(--neutral-darkest);
  --checkbox-label-font-size: var(--font-body-md-size);

  /* Checkbox focus ring */
  --checkbox-focus-ring: var(--focus-ring-primary);

  /* ==========================================================================
     RADIO BUTTON TOKENS (from Figma specs)
     ========================================================================== */

  /* Radio sizing (same as checkbox for consistency) */
  --radio-size-sm: 16px;
  --radio-size-md: 20px;
  --radio-size-lg: 24px;
  --radio-size: var(--radio-size-md); /* Default */

  /* Radio is always circular */
  --radio-radius: var(--radius-full);

  /* Radio dot sizing (inner circle when selected) */
  --radio-dot-size-sm: 6px;
  --radio-dot-size-md: 8px;
  --radio-dot-size-lg: 10px;
  --radio-dot-size: var(--radio-dot-size-md);

  /* Radio colors - Unchecked */
  --radio-bg: var(--neutral-white);
  --radio-border: var(--neutral-light);
  --radio-border-width: var(--border-width-default);

  /* Radio colors - Hover (unchecked) */
  --radio-border-hover: var(--secondary);

  /* Radio colors - Checked */
  --radio-bg-checked: var(--neutral-white);
  --radio-border-checked: var(--primary);
  --radio-dot-color: var(--primary);

  /* Radio colors - Hover (checked) */
  --radio-border-checked-hover: var(--secondary);
  --radio-dot-color-hover: var(--secondary);

  /* Radio colors - Disabled */
  --radio-bg-disabled: var(--neutral-lighter);
  --radio-border-disabled: var(--neutral-light);
  --radio-dot-disabled: var(--neutral);

  /* Radio label */
  --radio-label-gap: var(--spacing-sm);
  --radio-label-color: var(--neutral-darkest);
  --radio-label-font-size: var(--font-body-md-size);

  /* Radio focus ring */
  --radio-focus-ring: var(--focus-ring-primary);

  /* ==========================================================================
     SWITCH/TOGGLE TOKENS (from Figma specs)
     ========================================================================== */

  /* Switch track sizing */
  --switch-width-sm: 36px;
  --switch-width-md: 44px;
  --switch-width-lg: 52px;
  --switch-width: var(--switch-width-md); /* Default */

  --switch-height-sm: 20px;
  --switch-height-md: 24px;
  --switch-height-lg: 28px;
  --switch-height: var(--switch-height-md); /* Default */

  /* Switch track border-radius (pill shape) */
  --switch-radius: var(--radius-full);

  /* Switch handle (knob) sizing */
  --switch-handle-size-sm: 16px;
  --switch-handle-size-md: 20px;
  --switch-handle-size-lg: 24px;
  --switch-handle-size: var(--switch-handle-size-md);

  /* Switch handle offset from track edge */
  --switch-handle-offset: 2px;

  /* Switch colors - Off state */
  --switch-track-bg-off: var(--neutral); /* Gray track */
  --switch-track-bg-off-hover: var(--neutral-dark);
  --switch-handle-bg: var(--neutral-white);
  --switch-handle-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);

  /* Switch colors - On state */
  --switch-track-bg-on: var(--success); /* Green track */
  --switch-track-bg-on-hover: var(--success-dark);

  /* Switch colors - Disabled */
  --switch-track-bg-disabled: var(--neutral-lighter);
  --switch-handle-bg-disabled: var(--neutral-light);

  /* Switch label */
  --switch-label-gap: var(--spacing-sm); /* 8px */
  --switch-label-color: var(--neutral-darkest);
  --switch-label-font-size: var(--font-body-md-size);

  /* Switch focus ring */
  --switch-focus-ring: var(--focus-ring-primary);

  /* Switch transition */
  --switch-transition: var(--transition-fast);

  /* ==========================================================================
     LINE-HEIGHT TOKENS (Component-specific)
     For UI components that need fixed line-heights (menus, pagination, etc.)
     ========================================================================== */

  /* Menu item line-heights */
  --line-height-menu-item: 40px;
  --line-height-menu-item-compact: 32px;
  --line-height-menu-item-mobile: 48px;

  /* Pagination line-heights */
  --line-height-pagination: 26px;

  /* Steps/stepper line-heights */
  --line-height-step-icon: 28px;

  /* Select dropdown line-heights */
  --line-height-select-item: 20px;

  /* ==========================================================================
     SPECIAL SPACING TOKENS
     One-off spacing values for specific UI patterns
     ========================================================================== */

  /* Sidebar menu separator spacing */
  --spacing-menu-ip-lounge: 120px;

  /* Fade effect offset for scrollable tabs */
  --spacing-fade-offset: 40px;

  /* ==========================================================================
     POSITIONING TOKENS
     Fixed positions relative to layout elements
     ========================================================================== */

  /* Sticky positioning below header */
  --position-below-header: var(--header-height); /* 52px */

  /* Sticky positioning for tabs (header + search bar offset) */
  --position-sticky-tabs: 56px;

  /* Fixed counter position (header + banner + offset) */
  --position-counter-top: 120px;

  /* ==========================================================================
     BREAKPOINT TOKENS
     Standardized responsive breakpoints for media queries
     ========================================================================== */

  --breakpoint-xs: 480px;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --breakpoint-xxl: 1400px;

  /* ==========================================================================
     DARK MODE TOKENS
     Token overrides for dark color scheme
     Note: Apply via [data-theme="dark"] or @media (prefers-color-scheme: dark)
     ========================================================================== */

  /* Dark mode backgrounds */
  --color-dark-bg-app: #0f1419;
  --color-dark-bg-elevated: #1a1f26;
  --color-dark-bg-card: #1f2937;
  --color-dark-bg-hover: #2a3441;

  /* Dark mode text */
  --color-dark-text-default: #f3f7f8;
  --color-dark-text-secondary: #d2dcdf;
  --color-dark-text-tertiary: #96adb5;
  --color-dark-text-muted: #698a95;

  /* Dark mode borders */
  --color-dark-border-default: #374151;
  --color-dark-border-subtle: #2a3441;

  /* ==========================================================================
     GLASSMORPHISM / OVERLAY TOKENS
     Semi-transparent backgrounds for cards, modals, and overlays
     ========================================================================== */

  /* Glassmorphism backgrounds (frosted glass effect) */
  --color-glass-bg: rgba(255, 255, 255, 0.6);
  --color-glass-bg-hover: rgba(255, 255, 255, 0.8);
  --color-glass-bg-strong: rgba(255, 255, 255, 0.9);
  --color-glass-bg-subtle: rgba(255, 255, 255, 0.5);
  --color-glass-border-strong: rgba(255, 255, 255, 0.4);

  /* Dark overlay backgrounds (for content on dark/gradient backgrounds) */
  --color-overlay-bg-subtle: rgba(255, 255, 255, 0.1);
  --color-overlay-bg-light: rgba(255, 255, 255, 0.2);
  --color-overlay-bg-medium: rgba(255, 255, 255, 0.35);
  --color-overlay-bg-strong: rgba(255, 255, 255, 0.7);
  --color-overlay-border: rgba(255, 255, 255, 0.3);
  --color-overlay-border-strong: rgba(255, 255, 255, 0.5);

  /* Text on dark/overlay backgrounds */
  --color-overlay-text: rgba(255, 255, 255, 0.9);
  --color-overlay-text-muted: rgba(255, 255, 255, 0.8);

  /* Scrim/backdrop overlays */
  --color-scrim-light: rgba(0, 0, 0, 0.2);
  --color-scrim-medium: rgba(0, 0, 0, 0.5);

  /* ==========================================================================
     STATUS-SPECIFIC SHADOW TOKENS
     Colored shadows for status indicators and celebrations
     ========================================================================== */

  /* These are literal rgba() values, so the primitive retarget did not reach
     them: every one below still carried the RETIRED palette (blue #004ed8,
     green #00d464, red #ff4d55, purple) long after the scales above moved to
     the accent. Retargeted to teal / danger / ink. */

  /* Success — folded onto the accent, like the rest of the success scale. */
  --shadow-success: 0 4px 12px rgba(14, 140, 130, 0.3);

  /* Danger shadows */
  --shadow-danger-lg: 0 8px 24px rgba(168, 50, 45, 0.3);

  /* Pilot/accent shadows */
  --shadow-pilot: 0 4px 12px rgba(14, 140, 130, 0.3);
  --shadow-pilot-lg: 0 6px 16px rgba(14, 140, 130, 0.4);
  --shadow-pilot-xl: 0 8px 32px rgba(14, 140, 130, 0.3);

  /* ==========================================================================
     CARD INTERACTIVE TOKENS
     Hover and focus states for card components
     ========================================================================== */

  /* Cards carry no shadow in this system, hover included: a card separates by
     its hairline, and the hover affordance is the border darkening. */
  --shadow-card-hover: none;
  --color-border-card-hover: var(--neutral-control);

  /* Primary interactive backgrounds */
  --color-primary-bg-subtle: rgba(14, 140, 130, 0.08);
  --color-primary-bg-light: rgba(14, 140, 130, 0.1);

  /* ==========================================================================
     ANIMATION SHADOW TOKENS
     Shadows for pulse and glow animations
     ========================================================================== */

  /* Pulse animation shadows */
  --shadow-pulse-primary: 0 0 0 0 rgba(14, 140, 130, 0.4);
  --shadow-pulse-primary-end: 0 0 0 10px rgba(14, 140, 130, 0);
  --shadow-pulse-success: 0 0 0 0 rgba(14, 140, 130, 0.4);
  --shadow-pulse-success-end: 0 0 0 8px rgba(14, 140, 130, 0.1);

  /* Glow effects */
  --shadow-glow-primary: 0 0 20px rgba(14, 140, 130, 0.3);
  --shadow-glow-primary-lg: 0 0 30px rgba(14, 140, 130, 0.5);
  --shadow-glow-success: 0 0 20px rgba(14, 140, 130, 0.3);
  --shadow-glow-warning: 0 8px 24px rgba(23, 25, 27, 0.3);
  --shadow-glow-gold: 0 8px 24px rgba(14, 140, 130, 0.3);
  --shadow-glow-scrim: 0 2px 6px rgba(0, 0, 0, 0.3);

  /* ==========================================================================
     PROVIDER MATCH STATUS TOKENS
     Status-specific backgrounds and borders for provider matching
     ========================================================================== */

  /* Match status backgrounds */
  --color-match-success-bg: rgba(240, 253, 244, 0.8);
  --color-match-success-border: rgba(34, 197, 94, 0.2);
  --color-match-warning-bg: rgba(255, 251, 235, 0.9);
  --color-match-warning-border: rgba(245, 158, 11, 0.3);
  --color-match-danger-bg: rgba(254, 242, 242, 0.9);
  --color-match-danger-border: rgba(239, 68, 68, 0.3);

  /* Match indicator colors */
  --color-match-indicator-success: rgba(14, 140, 130, 0.1);
  --color-match-indicator-border: rgba(14, 140, 130, 0.2);

  /* ==========================================================================
     CELEBRATION / GOLD TOKENS
     Gold glow effects for award celebrations and achievements
     ========================================================================== */

  /* Gold glow for celebrations */
  --color-gold-glow: rgba(255, 215, 0, 0.4);
  --color-gold-glow-outer: rgba(255, 215, 0, 0);
  --shadow-gold-celebration: drop-shadow(0 4px 12px rgba(255, 193, 7, 0.4));

  /* ==========================================================================
     CARD DECORATION TOKENS
     Background decoration colors for card elements
     ========================================================================== */

  /* Card decoration backgrounds */
  --color-decoration-light: rgba(255, 255, 255, 0.1);
  --color-decoration-neutral: rgba(107, 114, 128, 0.1);
  --color-decoration-dark: rgba(0, 0, 0, 0.3);

  /* ==========================================================================
     STEP/ICON SHADOW TOKENS
     Colored shadows for step indicators and icon containers
     ========================================================================== */

  /* Purple/pilot step shadow */
  --shadow-step-purple: 0 8px 24px rgba(114, 46, 209, 0.4);

  /* Pulse ring border */
  --color-pulse-ring: rgba(102, 126, 234, 0.3);

  /* ==========================================================================
     SECTION 3: COMPONENT PATTERN TOKENS
     ==========================================================================

     These tokens define complete component patterns used across the app.
     They combine primitive tokens into semantic, reusable patterns.

     USAGE:
       Instead of remembering that a "journey card" needs:
         background: var(--neutral-white);
         border-radius: var(--radius-md);
         box-shadow: var(--shadow-card-ui);
         border: none;

       You can reference:
         background: var(--surface-card-bg);
         border-radius: var(--surface-card-radius);
         box-shadow: var(--surface-card-shadow);
         border: var(--surface-card-border);

     GOLD STANDARDS:
       - Dashboard cards
       - Create Request Journey surfaces
     ========================================================================== */

  /* --------------------------------------------------------------------------
     SURFACE CARD (Primary content containers)
     Used for: Journey surfaces, dashboard cards, main content areas
     Example: CreateRequestJourney.module.css .journeySurface
     -------------------------------------------------------------------------- */
  --surface-card-bg: var(--neutral-white);
  --surface-card-radius: var(--radius-md); /* 12px */
  --surface-card-shadow: var(--shadow-card-ui);
  --surface-card-border: none;
  --surface-card-padding: var(--spacing-xl); /* 24px */

  /* Surface card header */
  --surface-card-header-padding: var(--spacing-lg) var(--spacing-xl); /* 16px 24px */
  --surface-card-header-bg: transparent;

  /* Surface card content */
  --surface-card-content-padding: var(--spacing-lg) var(--spacing-xl); /* 16px 24px */

  /* Surface card divider (between header and content) */
  --surface-card-divider-color: var(--neutral-lighter);
  --surface-card-divider-margin: 0 var(--spacing-xl); /* horizontal margin */

  /* --------------------------------------------------------------------------
     INFO CARD (Secondary content containers with subtle background)
     Used for: Stats boxes, metadata displays, info panels
     Example: ActiveProjectPage.module.css .infoItem
     -------------------------------------------------------------------------- */
  --info-card-bg: var(--neutral-lightest);
  --info-card-radius: var(--radius-sm); /* 8px */
  --info-card-border: 1px solid var(--neutral-lighter);
  --info-card-padding: var(--spacing-md) var(--spacing-lg); /* 12px 16px */

  /* --------------------------------------------------------------------------
     PROJECT CARD (List item cards with hover states)
     Used for: Project lists, provider cards, selectable items
     Example: EnhancedProjectCard.module.css .projectCard
     Note: Intentionally uses smaller radius than surface cards
     -------------------------------------------------------------------------- */
  --project-card-bg: var(--neutral-white);
  --project-card-radius: var(--radius-sm); /* 8px - smaller than surface */
  --project-card-border: 1px solid var(--neutral-lighter);
  --project-card-shadow: none;
  --project-card-shadow-hover: var(--shadow-card-hover);
  --project-card-border-hover: var(--primary);
  --project-card-min-height: 280px;

  /* --------------------------------------------------------------------------
     NAVIGATION BUTTON (Step navigation, form actions)
     Used for: Next/Back buttons, form submit buttons
     Example: CreateRequestJourney.module.css .navigationContainer
     -------------------------------------------------------------------------- */
  --nav-button-height: 40px;
  --nav-button-radius: var(--radius-sm); /* 8px */
  --nav-button-padding: 0 var(--spacing-xl); /* 0 24px */
  --nav-button-font-weight: var(--font-body-md-semibold-weight); /* 600 */

  /* Primary nav button */
  --nav-button-primary-bg: var(--primary);
  --nav-button-primary-bg-hover: var(--primary-dark);
  --nav-button-primary-border: var(--primary);
  --nav-button-primary-color: var(--neutral-white);

  /* Secondary nav button */
  --nav-button-secondary-bg: var(--neutral-white);
  --nav-button-secondary-border: 1px solid var(--neutral-light);
  --nav-button-secondary-color: var(--neutral-darkest);

  /* --------------------------------------------------------------------------
     SECTION TITLE (Content section headers with underline)
     Used for: Form section headers, collapsible section titles
     Example: CreateRequestJourney.module.css .sectionTitle
     -------------------------------------------------------------------------- */
  --section-title-color: var(--primary-light);
  --section-title-size: var(--font-h3-size); /* 15px */
  --section-title-weight: var(--font-h3-weight); /* 600 */
  --section-title-margin-bottom: var(--spacing-lg); /* 16px */
  --section-title-underline-width: 60px;
  --section-title-underline-height: 2px;
  --section-title-underline-color: var(--primary-light);
  --section-title-underline-opacity: 0.4;

  /* --------------------------------------------------------------------------
     STEP BADGE (Step indicators in journeys)
     Used for: Step numbers in multi-step forms
     Example: CreateRequestJourney.module.css .stepNumber
     -------------------------------------------------------------------------- */
  --step-badge-bg: var(--primary);
  --step-badge-color: var(--neutral-white);
  --step-badge-radius: var(--radius-lg); /* 16px - pill-like */
  --step-badge-padding: var(--spacing-xs) var(--spacing-md); /* 4px 12px */
  --step-badge-font-size: var(--font-body-sm-size); /* 12px */
  --step-badge-font-weight: var(--font-body-sm-semibold-weight); /* 600 */
  --step-badge-text-transform: uppercase;

  /* --------------------------------------------------------------------------
     GRID LAYOUTS (Dashboard and content grids)
     Used for: Dashboard layouts, card grids
     Example: ServicesView.module.css .dashboardGrid
     -------------------------------------------------------------------------- */
  --grid-column-gap: var(--spacing-lg); /* 16px */
  --grid-row-gap: var(--spacing-xl); /* 24px */

  /* Dashboard specific */
  --dashboard-grid-columns-desktop: 1fr 1fr 1fr;
  --dashboard-grid-columns-tablet: 1fr 1fr;
  --dashboard-grid-columns-mobile: 1fr;

  /* --------------------------------------------------------------------------
     MOBILE TOUCH TARGETS
     Minimum sizes for mobile accessibility
     -------------------------------------------------------------------------- */
  --touch-target-min-height: 44px;
  --touch-target-input-font-size: 16px; /* Prevents iOS zoom */
  --touch-target-checkbox-scale: 1.15;

  /* --------------------------------------------------------------------------
     INSIGHTS PANEL (Market data, AI insights, rate intelligence)
     Used for: Hourly rate insights, project insights, market intelligence
     Example: PricingStructureSection.module.css .hourlyRatesPanel
     Visual: Teal-tinted background with teal accent colors
     -------------------------------------------------------------------------- */
  --insights-panel-bg: var(--color-bg-insights);
  --insights-panel-border: 1px solid var(--color-border-insights);
  --insights-panel-radius: var(--radius-sm);
  --insights-panel-padding: var(--spacing-md);
  --insights-panel-padding-lg: var(--spacing-lg) var(--spacing-xl);

  /* Insights panel header */
  --insights-panel-header-gap: var(--spacing-xs);
  --insights-panel-header-margin-bottom: var(--spacing-sm);
  --insights-panel-icon-color: var(--insights);
  --insights-panel-icon-size: var(--font-h3-size);
  --insights-panel-title-color: var(--insights);
  --insights-panel-title-size: var(--font-body-md-size);
  --insights-panel-title-weight: var(--font-body-md-semibold-weight);
  --insights-panel-subtitle-color: var(--neutral-dark);

  /* Insights panel content */
  --insights-panel-value-color: var(--insights);
  --insights-panel-value-size: var(--font-h3-size);
  --insights-panel-value-weight: var(--font-body-md-bold-weight);
  --insights-panel-label-color: var(--neutral-dark);

  /* Insights panel items (rate boxes, metric cards) */
  --insights-panel-item-bg: var(--color-overlay-bg-strong);
  --insights-panel-item-bg-hover: var(--color-glass-bg-strong);
  --insights-panel-item-radius: var(--radius-sm);
  --insights-panel-item-padding: var(--spacing-sm);
  --insights-panel-item-shadow-hover: var(--shadow-card-hover);

  /* --------------------------------------------------------------------------
     GUIDANCE CARD (Educational/onboarding content, collapsible)
     Used for: "What happens next" steppers, help content, onboarding
     Example: NextStepsCard.module.css .nextStepsWrapper
     Visual: Subtle neutral background, collapsible, lighter treatment
     -------------------------------------------------------------------------- */
  --guidance-card-bg: var(--neutral-lightest);
  --guidance-card-border: 1px solid var(--neutral-lighter);
  --guidance-card-radius: var(--radius-sm);
  --guidance-card-padding: var(--spacing-lg) var(--spacing-xl);
  --guidance-card-padding-collapsed: var(--spacing-md) var(--spacing-xl);

  /* Guidance card header */
  --guidance-card-header-gap: var(--spacing-xs);
  --guidance-card-header-margin-bottom: var(--spacing-lg);
  --guidance-card-icon-color: var(--neutral-dark);
  --guidance-card-icon-size: var(--icon-size-lg);
  --guidance-card-title-color: var(--neutral-darker);
  --guidance-card-title-size: var(--font-body-md-size);
  --guidance-card-title-weight: var(--font-body-md-semibold-weight);

  /* Guidance card toggle button */
  --guidance-card-toggle-color: var(--primary);
  --guidance-card-toggle-color-hover: var(--primary-dark);
  --guidance-card-toggle-bg-hover: var(--neutral-lighter);
  --guidance-card-toggle-size: var(--font-body-sm-size);
  --guidance-card-toggle-weight: var(--font-body-md-semibold-weight);
  --guidance-card-toggle-padding: var(--spacing-xs) var(--spacing-sm);
  --guidance-card-toggle-radius: var(--radius-xs);

  /* Guidance card step items */
  --guidance-card-step-icon-size: 48px;
  --guidance-card-step-icon-size-mobile: 40px;
  --guidance-card-step-icon-bg: var(--neutral-white);
  --guidance-card-step-icon-border: 1px solid var(--neutral-light);
  --guidance-card-step-icon-color: var(--neutral-darker);
  --guidance-card-step-icon-color-final: var(--success-dark);
  --guidance-card-step-title-color: var(--neutral-darker);
  --guidance-card-step-title-size: var(--font-body-sm-size);
  --guidance-card-step-title-weight: var(--font-body-md-semibold-weight);
  --guidance-card-step-duration-bg: var(--neutral-white);
  --guidance-card-step-duration-color: var(--neutral-dark);

  /* Guidance card step badges */
  --guidance-card-badge-size: 18px;
  --guidance-card-badge-size-mobile: 16px;
  --guidance-card-badge-bg: var(--neutral-dark);
  --guidance-card-badge-color: var(--neutral-white);
  --guidance-card-badge-border: 2px solid var(--neutral-lightest);

  /* Guidance card connectors */
  --guidance-card-connector-color: var(--neutral-light);
  --guidance-card-connector-width: 32px;
  --guidance-card-connector-height: 1px;

  /* ==========================================================================
     BID COMPARISON PROVIDER COLORS
     Subtle colors for visual distinction between provider bids
     ========================================================================== */

  --provider-1-border: #e6f4ff;
  --provider-1-bg: #f0f7ff;
  --provider-2-border: #fff1e6;
  --provider-2-bg: #fff7f0;
  --provider-3-border: #e6ffe6;
  --provider-3-bg: #f0fff0;
  --provider-4-border: #f3e6ff;
  --provider-4-bg: #f8f0ff;
  --provider-5-border: #fff0f0;
  --provider-5-bg: #fff5f5;
}
/**
 * App Global Styles
 *
 * This file has been split into focused modules for maintainability.
 * All styles are imported here to maintain backwards compatibility.
 *
 * Module structure:
 * - styles/app/base.css: Body, HTML, root, fonts, typography
 * - styles/app/buttons.css: All Ant Design button overrides
 * - styles/app/form-elements.css: Inputs, selects, checkboxes, radios, switches
 * - styles/app/notifications.css: Notification dropdown styles
 * - styles/app/steps.css: Steps component styles
 * - styles/app/cards-animations.css: Card and animation styles
 * - styles/app/overlay-forms.css: Overlay and form group styles
 * - styles/app/app-layout.css: App layout and component styles
 * - styles/app/responsive.css: Mobile and responsive styles
 */

/* Base/Reset Styles - Body, HTML, root, fonts */

/* Import our custom fonts - ensure they load before other styles */

/* Self-hosted webfaces used to live here (Inter + Source Sans Pro, both for
   GDPR reasons). The type system is now "Helvetica Neue", Helvetica, Arial —
   all system faces — so nothing is downloaded and no @font-face is needed.
   See --font-family-base in tokens.css. */

/* Flag Icons - Using Unicode flag emojis for better deployment compatibility */

.flag-emoji {
  font-family:
    "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Android Emoji",
    sans-serif;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
}

/* Fallback flag classes using CSS background for better compatibility */

.fi {
  position: relative;
  display: inline-block;
  width: 1.33333333em;
  line-height: 1em;
  background-size: contain;
  background-position: 50%;
  background-repeat: no-repeat;
  font-style: normal;
}

.fi:before {
  content: "\00a0";
}

/* Common flags with embedded SVG data URIs for deployment compatibility */

.fi-us {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 480'%3e%3cg fill-rule='evenodd'%3e%3cg stroke-width='1pt'%3e%3cpath fill='%23bd3d44' d='M0 0h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0z' transform='scale(2.6)'/%3e%3cpath fill='%23fff' d='M0 10h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0z' transform='scale(2.6)'/%3e%3c/g%3e%3cpath fill='%23192f5d' d='M0 0h98.8v70H0z' transform='scale(2.6)'/%3e%3cg fill='%23fff'%3e%3cg id='d'%3e%3cg id='c'%3e%3cg id='e'%3e%3cg id='b'%3e%3cpath id='a' d='M247 28l2.4.7.7 2.4L247 28z' transform='scale(2.6)'/%3e%3cuse href='%23a' transform='scale(-1 1)' x='13'/%3e%3c/g%3e%3cuse href='%23b' transform='rotate(72 6.5 14)'/%3e%3c/g%3e%3cuse href='%23c' transform='rotate(-72 6.5 14)'/%3e%3cuse href='%23c' transform='rotate(72 6.5 14)'/%3e%3c/g%3e%3cuse href='%23d' transform='matrix(-1 0 0 1 247 0)'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e");
}

.fi-gb {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 480'%3e%3cpath fill='%23012169' d='M0 0h640v480H0z'/%3e%3cpath fill='%23FFF' d='m75 0 244 181L562 0h78v62L400 241l240 178v61h-80L320 301 81 480H0v-60l239-178L0 64V0h75z'/%3e%3cpath fill='%23C8102E' d='m424 281 216 159v40L369 281h55zm-184 20 6 35L54 480H0l246-179zM640 0v3L391 191l2-44L590 0h50zM0 0l239 176h-60L0 42V0z'/%3e%3cpath fill='%23FFF' d='M241 0v480h160V0H241zM0 160v160h640V160H0z'/%3e%3cpath fill='%23C8102E' d='M0 193v96h640v-96H0zM273 0v480h96V0h-96z'/%3e%3c/svg%3e");
}

.fi-de {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 480'%3e%3cpath fill='%23000' d='M0 0h640v160H0z'/%3e%3cpath fill='%23dc143c' d='M0 160h640v160H0z'/%3e%3cpath fill='%23ffce00' d='M0 320h640v160H0z'/%3e%3c/svg%3e");
}

.fi-fr {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 480'%3e%3cpath fill='%23fff' d='M0 0h640v480H0z'/%3e%3cpath fill='%23002654' d='M0 0h213.3v480H0z'/%3e%3cpath fill='%23ce1126' d='M426.7 0H640v480H426.7z'/%3e%3c/svg%3e");
}

.fi-es {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 480'%3e%3cpath fill='%23aa151b' d='M0 0h640v480H0z'/%3e%3cpath fill='%23f1bf00' d='M0 120h640v240H0z'/%3e%3c/svg%3e");
}

.fi-it {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 480'%3e%3cpath fill='%23fff' d='M0 0h640v480H0z'/%3e%3cpath fill='%23009246' d='M0 0h213.3v480H0z'/%3e%3cpath fill='%23ce2b37' d='M426.7 0H640v480H426.7z'/%3e%3c/svg%3e");
}

.fi-nl {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 480'%3e%3cpath fill='%23fff' d='M0 0h640v480H0z'/%3e%3cpath fill='%23ae1c28' d='M0 0h640v160H0z'/%3e%3cpath fill='%2321468b' d='M0 320h640v160H0z'/%3e%3c/svg%3e");
}

/* Ensure font loading for deployment environments */

body {
  font-display: swap;
  margin: 0;
  padding: 0;
  /* `clip`, not `hidden`. Both stop sideways scrolling, but `hidden` makes the
     body a scroll container, and that quietly disables `position: sticky`
     everywhere inside the app — a sticky header then anchors to a scrollport
     that never moves and simply scrolls away. `clip` creates no scroll
     container, so sticky works and the horizontal clipping is unchanged. */
  overflow-x: clip;
  /* Keep gutter space so modal scroll lock doesn't cause width jump */
  scrollbar-gutter: stable both-edges;
  background-color: var(--neutral-lightest);
  font-family: var(--font-family-base);
}

#root {
  margin: 0;
  padding: 0;
}

/* Set default font family for the entire application */

* {
  font-family: var(--font-family-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  box-sizing: border-box;
}

/* Reset default margins and ensure no horizontal scroll */

html {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  /* The viewport scrollbar lives on <html>; always reserve its gutter so page
     width stays constant whether or not content scrolls (matches body). */
  scrollbar-gutter: stable both-edges;
  background-color: var(--neutral-lightest);
}

/* Transparent tabs */

.transparent-tabs .ant-tabs-nav {
  background: transparent;
}

.transparent-tabs .ant-tabs-nav::before {
  display: none;
}

.transparent-tabs .ant-tabs-nav-wrap {
  background: transparent;
}

.transparent-tabs .ant-tabs-content-holder {
  background: transparent;
}

/* Breadcrumb reset */

.ant-breadcrumb {
  margin: 0;
  padding: 0;
}

.ant-breadcrumb ol {
  margin: 0;
  margin-left: 0;
  padding: 0;
  padding-left: 0;
  padding-inline-start: 0;
  list-style: none;
}

.ant-breadcrumb li:first-child {
  padding-left: 0;
  margin-left: 0;
}

.ant-breadcrumb-link,
.ant-breadcrumb-link a {
  margin: 0;
  margin-left: 0;
}

/* Typography */

.ant-typography {
  font-family: var(--font-family-base);
  transition: all var(--duration-fast) var(--ease-in-out);
}

/* Layout overflow */

.ant-layout {
  overflow-x: hidden;
}

.ant-layout-content {
  overflow-x: hidden;
}

/* Links are inline actions, so they carry the accent. */

a {
  color: var(--primary);
}

a:hover {
  color: var(--primary-hover);
}

/* Remove divider */

.ant-divider {
  display: none;
}

/* Search title visibility */

.search-title {
  display: block;
  visibility: visible;
  opacity: 1;
  color: var(--neutral-black);
}

/* Button Styling - All Ant Design button overrides */

/* All buttons - pill shape per Figma */

.ant-btn {
  border-radius: var(--button-radius);
  font-weight: var(--font-weight-semibold);
}

/* Primary button - filled style */

.ant-btn-primary {
  background: var(--button-primary-bg);
  border-color: var(--button-primary-bg);
  box-shadow: var(--shadow-button-primary);
}

.ant-btn-primary:hover:not(:disabled) {
  background: var(--button-primary-bg-hover);
  border-color: var(--button-primary-bg-hover);
  box-shadow: var(--shadow-button-primary-hover);
}

/* Secondary/Default button - outlined style with 2px border */

.ant-btn-default {
  background: var(--button-secondary-bg);
  border: var(--button-secondary-border-width) solid
    var(--button-secondary-border);
  color: var(--button-secondary-text);
}

.ant-btn-default:hover:not(:disabled) {
  background: var(--button-secondary-bg);
  border: var(--button-secondary-border-width-hover) solid
    var(--button-secondary-border-hover);
  color: var(--button-secondary-text-hover);
}

/* Ghost/Text button - tertiary style */

.ant-btn-text,
.ant-btn-link {
  background: var(--button-tertiary-bg);
  color: var(--button-tertiary-text);
}

.ant-btn-text:hover:not(:disabled),
.ant-btn-link:hover:not(:disabled) {
  background: var(--button-tertiary-bg-hover);
  color: var(--button-tertiary-text);
}

/* Disabled buttons */

.ant-btn:disabled,
.ant-btn[disabled] {
  background: var(--button-disabled-bg);
  border-color: var(--button-disabled-bg);
  color: var(--button-disabled-text);
}

/* Button sizes from Figma */

.ant-btn-sm {
  height: var(--button-height-sm);
  padding: var(--button-padding-sm);
}

.ant-btn:not(.ant-btn-sm):not(.ant-btn-lg) {
  height: var(--button-height-md);
  padding: var(--button-padding-md);
}

.ant-btn-lg {
  height: var(--button-height-lg);
  padding: var(--button-padding-md);
}

/* Icon gap */

.ant-btn > .anticon + span,
.ant-btn > span + .anticon {
  margin-inline-start: var(--button-gap);
}

/* Dropdown trigger buttons share the control radius. */

.ant-btn[role="combobox"],
.ant-dropdown .ant-btn {
  border-radius: var(--button-radius);
}

/* A primary button darkens on hover; it does NOT change hue. These rules used
   to swap the fill to --secondary, which was navy against a blue primary and
   is now INK against a teal one — the button appeared to become a different
   control under the cursor. */

.ant-btn-primary {
  background: var(--primary);
  border-color: var(--primary);
  border-radius: var(--button-radius);
}

.quick-action-secondary-button:hover {
  background-color: var(--neutral-white);
  color: var(--primary);
  border-color: var(--primary);
}

.ant-btn-primary:hover,
.ant-btn-primary:focus {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
}

.ant-btn-primary:active {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
}

/* Form Elements - Inputs, selects, checkboxes, radios, switches */

/* Input fields - using form element tokens */

.ant-input,
.ant-input-affix-wrapper {
  border-radius: var(--input-radius);
  border-color: var(--input-border);
}

.ant-input:hover:not(:disabled),
.ant-input-affix-wrapper:hover:not(.ant-input-affix-wrapper-disabled) {
  border-color: var(--input-border-hover);
}

.ant-input:focus,
.ant-input-focused,
.ant-input-affix-wrapper:focus,
.ant-input-affix-wrapper-focused {
  border-color: var(--input-border-focus);
  box-shadow: var(--input-shadow-focus);
}

.ant-input-status-error:not(.ant-input-disabled) {
  border-color: var(--input-border-error);
}

.ant-input-status-error:not(.ant-input-disabled):focus {
  box-shadow: var(--input-shadow-error);
}

/* Select components - using form element tokens */

.ant-select-selector,
.ant-select .ant-select-selector,
.ant-select-single .ant-select-selector,
.ant-select-multiple .ant-select-selector {
  border-radius: var(--select-radius);
  border-color: var(--select-border);
}

/* Fix stretched text in Select input display */

.ant-select .ant-select-selection-item {
  text-align: left !important;
  word-spacing: normal !important;
  letter-spacing: normal !important;
}

.ant-select .ant-select-selector {
  text-align: left !important;
  justify-content: flex-start !important;
}

/* Override antd's emoji-only font stack on all dropdown/popup elements */

.ant-select-dropdown,
.ant-select-item,
.ant-select-item-option,
.ant-select-item-option-content,
.ant-select-selection-item,
.ant-auto-complete-option,
.ant-auto-complete .ant-select-selector,
.ant-dropdown,
.ant-dropdown-menu,
.ant-dropdown-menu-item,
.ant-cascader-dropdown,
.ant-cascader-menu,
.ant-cascader-menu-item,
.ant-mentions-dropdown,
.ant-mentions-dropdown-menu-item,
.ant-tree-select-dropdown,
.ant-popover-inner-content {
  font-family: var(--font-family-base) !important;
}

/* Select dropdown - using form element tokens */

.ant-select-dropdown {
  border-radius: var(--select-dropdown-radius);
  box-shadow: var(--select-dropdown-shadow);
  /* Inset padding so the rounded option highlights don't touch the edges */
  padding: var(--select-dropdown-padding);
}

/* Roomy option rows: label + selected checkmark on one flex row, with the
   spacious vertical padding/height the design tokens were defined for. */

.ant-select-dropdown .ant-select-item {
  display: flex;
  align-items: center;
  border-radius: var(--select-option-radius);
  padding: var(--select-option-padding-y) var(--select-option-padding-x);
  margin: 0;
  min-height: var(--select-option-height);
  line-height: var(--line-height-select-item);
  text-align: left !important;
  word-spacing: normal !important;
  letter-spacing: normal !important;
}

.ant-select-dropdown .ant-select-item-option-content {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left !important;
  word-spacing: normal !important;
  letter-spacing: normal !important;
  white-space: normal !important;
}

.ant-select-dropdown .ant-select-item-option-state {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  margin-left: var(--spacing-sm);
}

.ant-select-dropdown
  .ant-select-item-option-active:not(.ant-select-item-option-disabled) {
  background: var(--select-option-bg-hover);
}

.ant-select-dropdown
  .ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
  background: var(--select-option-bg-selected);
  color: var(--select-option-text-selected);
  font-weight: var(--font-weight-medium);
}

/* Select trigger states */

.ant-select:not(.ant-select-disabled):hover .ant-select-selector {
  border-color: var(--select-border-hover);
}

.ant-select-focused:not(.ant-select-disabled).ant-select:not(
    .ant-select-customize-input
  )
  .ant-select-selector {
  border-color: var(--select-border-focus);
  box-shadow: var(--select-shadow-focus);
}

/* Checkbox - using form element tokens */

.ant-checkbox-inner {
  border-radius: var(--checkbox-radius);
  border-color: var(--checkbox-border);
}

.ant-checkbox:hover .ant-checkbox-inner {
  border-color: var(--checkbox-border-hover);
}

.ant-checkbox-checked .ant-checkbox-inner {
  background-color: var(--checkbox-bg-checked);
  border-color: var(--checkbox-border-checked);
}

.ant-checkbox-checked:hover .ant-checkbox-inner {
  background-color: var(--checkbox-bg-checked-hover);
  border-color: var(--checkbox-border-checked-hover);
}

.ant-checkbox-indeterminate .ant-checkbox-inner {
  background-color: var(--checkbox-bg-indeterminate);
  border-color: var(--checkbox-border-indeterminate);
}

/* Radio - using form element tokens (UI Kit: white bg with blue dot) */

.ant-radio-inner {
  border-color: var(--radio-border) !important;
  background-color: var(--radio-bg) !important;
}

.ant-radio:hover .ant-radio-inner {
  border-color: var(--radio-border-hover) !important;
}

.ant-radio-checked .ant-radio-inner {
  border-color: var(--radio-border-checked) !important;
  background-color: var(--radio-bg-checked) !important;
}

.ant-radio-checked .ant-radio-inner::after {
  background-color: var(--radio-dot-color) !important;
}

.ant-radio-checked:hover .ant-radio-inner {
  border-color: var(--radio-border-checked-hover) !important;
  background-color: var(--radio-bg-checked) !important;
}

.ant-radio-checked:hover .ant-radio-inner::after {
  background-color: var(--radio-dot-color-hover) !important;
}

/* Radio button wrapper */

.ant-radio-button-wrapper:not(:first-child)::before {
  display: none;
}

.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
  color: var(--primary);
  border-color: var(--primary);
}

/* Switch - using form element tokens (green ON state per Figma) */

.ant-switch {
  background: var(--switch-track-bg-off);
}

.ant-switch:hover:not(.ant-switch-disabled) {
  background: var(--switch-track-bg-off-hover);
}

.ant-switch-checked {
  background: var(--switch-track-bg-on);
}

.ant-switch-checked:hover:not(.ant-switch-disabled) {
  background: var(--switch-track-bg-on-hover);
}

.ant-switch-disabled {
  background: var(--switch-track-bg-disabled);
}

/* Override any tabs indicators */

.ant-tabs-ink-bar {
  background: var(--primary);
}

.ant-tabs-tab-active .ant-tabs-tab-btn {
  color: var(--primary);
}

/* Override any progress bars */

.ant-progress-bg {
  background: var(--secondary);
}

/* Override any loading spinners */

.ant-spin-dot-item {
  background: var(--secondary);
}

/* Catch-all for any remaining blue elements */

/* token-check-allow — selector matches the legacy color to override it */

*[style*="rgb(24, 144, 255)"] {
  color: var(--secondary);
}

/* token-check-allow — selector matches the legacy color to override it */

*[style*="#1890ff"] {
  color: var(--secondary);
}

/* Notification Dropdown Styles */

/* Enhanced Notification Dropdown Styles */

.notification-dropdown-overlay {
  z-index: var(--z-modal) !important;
}

.notification-dropdown-overlay.enhanced .ant-dropdown,
.notification-dropdown-overlay.enhanced .ant-dropdown-menu {
  padding: 0 !important;
  max-height: inherit !important;
  overflow: visible;
  border: none !important;
  box-shadow: none !important;
  border-radius: var(--radius-sm) !important;
}

/* Notification Bell Button */

.notification-bell-btn {
  font-size: var(--font-h3-size) !important;
  height: auto !important;
  padding: var(--spacing-xs) !important;
  color: var(--neutral-darker) !important;
  transition: all var(--duration-normal) var(--ease-standard) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.notification-bell-btn:hover {
  color: var(--primary) !important;
  transform: scale(1.05);
}

.notification-badge .ant-badge-count {
  background: var(--danger);
  border: var(--border-width-thick) solid var(--neutral-white);
  box-shadow: var(--shadow-sm);
}

/* Header Controls */

.notification-header-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--neutral-lightest);
  border-bottom: 1px solid var(--neutral-lighter);
  margin: 0 !important;
}

.notification-header-controls .header-actions {
  display: flex;
  gap: var(--spacing-xs);
  align-items: center;
}

.notification-header-controls .ant-btn {
  font-size: var(--font-body-sm-size);
  height: 24px;
  padding: 0 var(--spacing-xs);
  border-radius: var(--radius-xs);
}

/* Group Headers */

.group-header {
  font-size: var(--font-body-sm-size) !important;
  font-weight: var(--font-body-sm-semibold-weight) !important;
  text-transform: uppercase !important;
  letter-spacing: var(--letter-spacing-wide) !important;
  padding: var(--spacing-xs) var(--spacing-md) var(--spacing-xxs)
    var(--spacing-md) !important;
  color: var(--neutral-dark) !important;
  background: var(--neutral-lightest) !important;
  margin: 0 !important;
}

/* Individual notification item wrapper */

.notification-item-wrapper {
  padding: 0 !important;
  margin: 0 !important;
}

.notification-dropdown-overlay.enhanced .ant-dropdown-menu-item {
  padding: 0 !important;
  min-height: auto !important;
  transition: all var(--duration-normal) var(--ease-standard) !important;
  border-bottom: 1px solid var(--neutral-lighter) !important;
  cursor: pointer !important;
  margin: 0 !important;
}

.notification-dropdown-overlay.enhanced .ant-dropdown-menu-item:last-child {
  border-bottom: none !important;
}

.notification-dropdown-overlay.enhanced .ant-dropdown-menu-item:hover,
.notification-dropdown-overlay.enhanced
  .ant-dropdown-menu-item.ant-dropdown-menu-item-active {
  background-color: var(--neutral-lightest) !important;
}

.notification-dropdown-overlay.enhanced .ant-dropdown-menu-item.read {
  opacity: 0.7;
}

.notification-dropdown-overlay.enhanced .ant-dropdown-menu-item.unread {
  background: linear-gradient(
    90deg,
    var(--primary-lightest) 0%,
    transparent 4px
  );
  border-left: 4px solid var(--primary);
}

/* Notification content structure */

.notification-content {
  padding: var(--spacing-sm) var(--spacing-md);
  width: 100%;
}

.notification-header {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  width: 100%;
}

.notification-icon {
  font-size: var(--font-h3-size);
  flex-shrink: 0;
  width: 20px;
  text-align: center;
  margin-top: var(--spacing-xxs);
}

.notification-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.notification-title {
  font-weight: var(--font-body-md-semibold-weight) !important;
  font-size: var(--font-body-md-size) !important;
  line-height: var(--font-body-md-line-height) !important;
  color: var(--neutral-darkest) !important;
  display: block !important;
  margin-bottom: var(--spacing-xxs) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.notification-message {
  font-size: var(--font-body-sm-size) !important;
  line-height: var(--font-body-sm-line-height) !important;
  color: var(--neutral-dark) !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  word-wrap: break-word !important;
  hyphens: auto !important;
  margin-bottom: var(--spacing-xxs) !important;
}

.notification-time {
  font-size: var(--font-body-sm-size) !important;
  color: var(--neutral) !important;
  margin-top: var(--spacing-xxs) !important;
  display: block !important;
}

/* Action buttons */

.notification-actions {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xxs);
  flex-shrink: 0;
}

.mark-read-btn,
.delete-btn {
  padding: var(--spacing-xxs) !important;
  min-width: auto !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: var(--radius-xs) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.delete-btn {
  color: var(--danger) !important;
}

.mark-read-btn {
  color: var(--success) !important;
}

.mark-read-btn:hover {
  background-color: var(--success-lightest) !important;
  color: var(--success-dark) !important;
}

.delete-btn:hover {
  background-color: var(--danger-lightest) !important;
  color: var(--danger-darker) !important;
}

/* Show more button */

.show-more-btn {
  margin: var(--spacing-xs) var(--spacing-sm) !important;
  color: var(--primary) !important;
  border: 1px solid var(--neutral-light) !important;
  border-radius: var(--radius-sm) !important;
  font-size: var(--font-body-sm-size) !important;
  height: 32px !important;
}

.show-more-btn:hover {
  border-color: var(--primary) !important;
  background-color: var(--primary-lightest) !important;
}

/* Empty state */

.empty-notifications {
  padding: var(--spacing-xxl) var(--spacing-md);
  text-align: center;
  color: var(--neutral);
}

/* Virtual scrolling support */

.virtual-scroll-container {
  outline: none;
}

.virtual-notification-item {
  border-bottom: 1px solid var(--neutral-lighter);
  cursor: pointer;
  transition: background-color var(--duration-normal) var(--ease-standard);
}

.virtual-notification-item:hover {
  background-color: var(--neutral-lightest);
}

.virtual-notification-item:last-child {
  border-bottom: none;
}

.virtual-notification-item.read {
  opacity: 0.7;
}

.virtual-notification-item.unread {
  background: linear-gradient(
    90deg,
    var(--primary-lightest) 0%,
    transparent 4px
  );
  border-left: 4px solid var(--primary);
}

/* Loading state improvements */

.notification-bell-btn.ant-btn-loading {
  opacity: 0.7;
}

.notification-bell-btn .anticon-loading {
  color: var(--primary);
}

/* Dividers in dropdown */

.notification-dropdown-overlay.enhanced .ant-dropdown-menu-item-divider {
  margin: 0 !important;
  background-color: var(--neutral-lighter) !important;
  height: 1px !important;
}

/* Mobile responsive adjustments */

@media (max-width: 640px) {
  .notification-dropdown-overlay.enhanced {
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    max-width: none !important;
  }

  .notification-content {
    padding: var(--spacing-xs) var(--spacing-sm);
  }

  .notification-header {
    gap: var(--spacing-xs);
  }

  .notification-actions {
    flex-direction: row;
    gap: var(--spacing-xxs);
  }

  .mark-read-btn,
  .delete-btn {
    width: 20px !important;
    height: 20px !important;
  }

  .notification-header-controls {
    padding: var(--spacing-xs) var(--spacing-sm);
    flex-wrap: wrap;
  }

  .notification-header-controls .header-actions {
    margin-top: var(--spacing-xs);
  }
}

/* Steps Component Styles */

/* Make clickable steps have pointer cursor */

.request-overlay-steps .ant-steps-item {
  cursor: pointer;
}

/* Steps Component */

.ant-steps .ant-steps-item-icon {
  width: var(--line-height-step-icon);
  height: var(--line-height-step-icon);
  line-height: var(--line-height-step-icon);
  font-size: var(--font-body-md-size);
}

.ant-steps-vertical > .ant-steps-item .ant-steps-item-icon {
  margin-right: var(--spacing-sm);
  width: var(--line-height-step-icon);
  height: var(--line-height-step-icon);
  line-height: var(--line-height-step-icon);
  font-size: var(--font-body-md-size);
}

.ant-steps-vertical {
  margin-top: var(--spacing-xl);
}

/* Request Steps (for RequestOverlay modal) */

.request-steps .ant-steps-item {
  margin-bottom: var(--spacing-sm);
}

.request-steps .ant-steps-item-container {
  display: flex;
  align-items: center;
}

.request-steps .ant-steps-item-title {
  font-size: var(--font-body-md-size);
  margin: 0;
  padding: 0;
  padding-top: 0;
  display: flex;
  align-items: center;
  height: var(--line-height-step-icon);
}

.request-steps .ant-steps-item-icon {
  margin-right: var(--spacing-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--line-height-step-icon);
  width: var(--line-height-step-icon);
}

.request-steps .ant-steps-item-icon > .ant-steps-icon {
  line-height: var(--line-height-step-icon);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Request Overlay Steps Styling */

.request-overlay-steps .ant-steps-item-wait
  .ant-steps-item-icon
  .ant-steps-icon {
  color: var(--secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.request-overlay-steps
  .ant-steps-item-process
  .ant-steps-item-icon
  .ant-steps-icon {
  color: var(--neutral-white);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.request-overlay-steps
  .ant-steps-item-finish
  .ant-steps-item-icon
  .ant-steps-icon {
  color: var(--neutral-white);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.request-overlay-steps .ant-steps-item-wait .ant-steps-item-icon {
  background-color: transparent;
  border-color: var(--secondary);
  border-width: var(--border-width-thick);
  display: flex;
  align-items: center;
  justify-content: center;
}

.request-overlay-steps .ant-steps-item-process .ant-steps-item-icon {
  background-color: var(--secondary);
  border-color: var(--secondary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.request-overlay-steps .ant-steps-item-finish .ant-steps-item-icon {
  background-color: var(--secondary);
  border-color: var(--secondary);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Stepper hover styles */

.request-overlay-steps .ant-steps-item:hover .ant-steps-icon {
  background-color: var(--primary-lightest);
  border-color: var(--primary);
}

.request-overlay-steps
  .ant-steps-item:hover
  .ant-steps-icon
  > .ant-steps-icon-dot {
  background-color: var(--primary);
}

.request-overlay-steps .ant-steps-item:hover .ant-steps-title {
  color: var(--primary);
}

.request-overlay-steps .ant-steps-item:hover .ant-steps-item-icon {
  color: var(--primary);
  background-color: var(--primary-lightest);
  border-color: var(--primary);
}

/* Cards & Animations */

/* Card base */

.ant-card {
  transition: all var(--duration-normal) var(--ease-in-out);
  transform: none;
  opacity: 1;
}

/* Hero Image Animation */

.hero-image-container {
  overflow: hidden;
  transition:
    height var(--duration-slow) var(--ease-in-out),
    opacity var(--duration-slow) var(--ease-in-out),
    padding var(--duration-slow) var(--ease-in-out);
}

.hero-image-container.visible {
  height: auto;
  opacity: 1;
  padding: var(--spacing-xl) var(--spacing-xl) 0 var(--spacing-xl);
  transform: translateY(0);
  transition:
    height var(--duration-slow) var(--ease-in-out),
    opacity var(--duration-slow) var(--ease-standard),
    padding var(--duration-slow) var(--ease-in-out),
    transform var(--duration-slow) var(--ease-standard);
}

.hero-image-container.hidden {
  height: 0;
  opacity: 0;
  padding: var(--spacing-sm) var(--spacing-xl);
  transform: translateY(-20px);
  transition:
    height var(--duration-slow) var(--ease-in-out),
    opacity var(--duration-slow) var(--ease-standard),
    padding var(--duration-slow) var(--ease-in-out),
    transform var(--duration-slow) var(--ease-standard);
  pointer-events: none;
}

/* Show More Button Animation */

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.show-more-clicked {
  animation: pulse 0.3s ease-in-out;
  background-color: var(--primary-light);
  transition: background-color var(--duration-slow) var(--ease-in-out);
}

/* Lawyer card animation */

.lawyer-card {
  opacity: 0;
  transform: translateY(100px);
  animation: pushUp 0.5s ease-out forwards;
}

@keyframes pushUp {
  0% {
    opacity: 0;
    transform: translateY(100px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Push-in animation for RequestReach */

.request-reach-push-in {
  opacity: 0;
  transform: translateX(100%);
  animation: pushIn 0.5s ease-out forwards;
}

@keyframes pushIn {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.lawyer-cards-container {
  justify-content: flex-start;
  margin-right: auto;
  margin-left: 0;
  text-align: left;
  display: flex;
  transform: none;
  transition: none;
}

/* Case type button hover */

.case-type-button:hover {
  color: var(--primary);
  background-color: var(--primary-lightest);
  border-color: var(--primary);
}

.case-type-button:hover * {
  color: var(--primary);
}

/* Hide carousel dots */

.slick-dots {
  display: none;
}

.slick-dots li {
  display: none;
}

.slick-dots li button {
  display: none;
}

/* Overlay & Form Styles */

/* Prevent any Ant Design components from causing horizontal scroll */

.ant-drawer .ant-drawer-content-wrapper {
  max-width: 100vw !important;
}

.ant-modal {
  max-width: calc(100vw - 32px) !important;
}

/* Overlay Header */

.overlay-header .ant-btn-text:hover {
  color: var(--neutral-darkest);
}

/* Card Radio Button Styles (for overlay form) */

.card-radio-button {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--neutral-light);
  border-radius: var(--radius-xxs);
  transition: all var(--duration-slow);
}

.card-radio-button:hover,
.card-radio-button.ant-radio-button-wrapper-checked {
  color: var(--primary);
  border-color: var(--primary);
  background-color: var(--primary-lightest);
}

.card-content {
  text-align: center;
  white-space: normal;
}

/* Case Card Styles (for overlay form) */

.case-card-radio-button {
  width: 100%;
  height: 120px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--neutral-light);
  border-radius: var(--radius-xxs);
  transition: all var(--duration-slow);
  padding: var(--spacing-md);
}

.case-card-radio-button:hover,
.case-card-radio-button.ant-radio-button-wrapper-checked {
  color: var(--primary);
  border-color: var(--primary);
  background-color: var(--primary-lightest);
}

.case-card-radio-button:hover .case-card-title,
.case-card-radio-button:hover .case-card-description,
.case-card-radio-button.ant-radio-button-wrapper-checked .case-card-title,
.case-card-radio-button.ant-radio-button-wrapper-checked
  .case-card-description {
  color: var(--primary);
}

.case-card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
}

.case-card-radio-button.ant-radio-button-wrapper .case-card-title {
  margin: 0 0 var(--spacing-xs) 0;
  transition: color var(--duration-slow);
}

.case-card-radio-button.ant-radio-button-wrapper .case-card-description {
  margin: 0;
  transition: color var(--duration-slow);
}

/* Enhanced Form Group Styling */

.form-group-card {
  background: var(--neutral-white);
  border: 1px solid var(--neutral-lighter);
  border-radius: var(--radius-sm);
  padding: var(--spacing-xl);
  margin-bottom: var(--spacing-xl);
  box-shadow: var(--shadow-md);
  transition: all var(--duration-slow) var(--ease-standard);
  position: relative;
}

.form-group-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.form-group-card .ant-form-item:last-child {
  margin-bottom: 0;
}

.form-group-title {
  font-size: var(--font-h3-size);
  font-weight: var(--font-body-md-semibold-weight);
  line-height: var(--font-h3-line-height);
  color: var(--neutral-darkest);
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--neutral-lighter);
}

/* Mobile warning modal styles */

.mobile-warning-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

body:has(.mobile-warning-modal) {
  overflow: hidden;
}

/* App Layout & Component Styles */

/* App Component Styles */

.app-layout {
  min-height: 100vh;
}

.app-content {
  padding: var(--spacing-lg);
}

.app-search-container {
  margin-bottom: var(--spacing-lg);
}

.app-search-input {
  width: 100%;
  max-width: 400px;
}

.app-error-boundary {
  padding: var(--spacing-lg);
  color: var(--danger);
}

.app-loading-spinner {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

/* Pagination */

.legacy-theme .ant-pagination-item-active a {
  color: var(--neutral-white);
}

.ant-pagination-item-active a {
  color: var(--neutral-white);
}

/* Responsive Styles */

/* Mobile touch target improvements for dropdowns */

@media (max-width: 768px) {
  .ant-select-dropdown .ant-select-item {
    min-height: 44px;
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-md);
    line-height: var(--font-h3-line-height);
  }

  .ant-select-dropdown .ant-select-item-option-content {
    font-size: var(--font-size-md);
  }

  .ant-select-dropdown .ant-select-selection-search-input {
    font-size: var(--font-size-md);
  }
}

/* Mobile touch scrolling fixes */

@media (max-width: 992px) {
  html,
  body {
    /* Enable smooth touch scrolling on mobile */
    -webkit-overflow-scrolling: touch;
    /* Ensure vertical scroll works */
    overflow-y: auto !important;
    overflow-x: hidden;
    /* Prevent scroll chaining / bounce */
    overscroll-behavior-y: contain;
  }

  .ant-layout {
    /* Allow vertical scrolling on layout */
    overflow-y: visible;
    overflow-x: hidden;
  }

  .ant-layout-content {
    /* Allow content to scroll naturally */
    overflow-y: visible;
    overflow-x: hidden;
  }

  /* Ensure the main content area can scroll */
  #root {
    min-height: 100vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Tag Preset Remapping
 *
 * Ant Design's named Tag presets (color="blue", "green", …) render AntD's own
 * palette (#1890ff, #52c41a, …), which is not part of the UI Kit. These
 * overrides remap every preset used in the app onto the kit color scales, so
 * call sites can keep the simple `color="…"` API while staying on-brand.
 *
 * Mapping: blue→primary, geekblue→secondary, green→success, red→danger,
 * purple→warning, orange→tertiary, gold→gold scale.
 */

.ant-tag-blue {
  color: var(--primary);
  background: var(--primary-lightest);
  border-color: var(--primary-lighter);
}

.ant-tag-geekblue {
  color: var(--secondary);
  background: var(--primary-lightest);
  border-color: var(--primary-lighter);
}

.ant-tag-green {
  color: var(--success-dark);
  background: var(--success-lightest);
  border-color: var(--success-lighter);
}

.ant-tag-red {
  color: var(--danger-dark);
  background: var(--danger-lightest);
  border-color: var(--danger-lighter);
}

.ant-tag-purple {
  color: var(--warning-dark);
  background: var(--warning-lightest);
  border-color: var(--warning-lighter);
}

.ant-tag-orange {
  color: var(--tertiary-dark);
  background: var(--tertiary-lightest);
  border-color: var(--tertiary-lighter);
}

.ant-tag-gold {
  color: var(--gold-dark);
  background: var(--gold-lightest);
  border-color: var(--gold-light);
}

/* My Cases — highlight lead-window (lit-signal) asset rows */

.ipaf-lead-row > td {
  background: var(--warning-lightest);
}

.ipaf-lead-row:hover > td {
  background: var(--warning-lighter) !important;
}

/* Outlined (default-type) danger buttons must keep red text. The
   Button.defaultColor theme token (primary) otherwise leaks blue text into the
   red danger frame — blue-on-red looks broken. Solid danger buttons (white
   text on red) are unaffected because this only targets .ant-btn-default. */

.ant-btn-default.ant-btn-dangerous {
  color: var(--danger);
}

.ant-btn-default.ant-btn-dangerous:not(:disabled):not(.ant-btn-disabled):hover {
  color: var(--danger-dark);
  border-color: var(--danger-dark);
}

/* antd gives every focused button a primary (blue) focus outline
   (`.ant-btn:focus-visible { outline: <primary> solid 3px }`), which looks wrong
   as a blue halo around a red danger button. Recolor that outline to red for
   ALL danger button variants — outlined and solid, old `.ant-btn-dangerous` and
   new `.ant-btn-color-dangerous`. !important beats antd's runtime-injected rule. */

.ant-btn-dangerous:focus-visible,
.ant-btn-color-dangerous:focus-visible {
  outline-color: var(--danger) !important;
}

/* Tags / chips — a 3px rectangle with a control border, matching every other
   chip in the system. They were soft, borderless pills; next to hairline cards
   and tabular data that read as consumer-app chrome. antd injects tag styles
   after App.css at equal specificity, so shape/spacing overrides need
   !important. Colored presets keep their tint. */

.ant-tag {
  border-radius: var(--radius-xs) !important;
  padding-inline: 9px !important;
  font-weight: var(--font-weight-medium);
}

.ant-tag:not([class*="ant-tag-"]) {
  background: var(--neutral-white) !important;
  border-color: var(--neutral-control) !important;
  color: var(--neutral-darkest) !important;
}