/*
 * Capstacker design system components.
 *
 * Every selector is scoped under a .ds- class so nothing here touches the legacy page styles.
 * Colours come only from var(--ds-*) tokens (tokens.css) or color-mix() on them: no literal
 * colour values in this file. Hover tints use --ds-hover-tint; cards lift by --ds-hover-lift.
 * Breakpoints match tokens.css: 1279px and 767px, plus 1023px where the nav collapses.
 */

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

.ds {
  font-family: var(--ds-font-family);
  font-size: var(--ds-type-body-size);
  line-height: var(--ds-type-body-leading);
  color: var(--ds-text);
  background: var(--ds-ground);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ds *,
.ds *::before,
.ds *::after,
[class^="ds-"],
[class*=" ds-"] {
  box-sizing: border-box;
}

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

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */

.ds-display,
.ds-h2,
.ds-h3,
.ds-body-l,
.ds-body,
.ds-small,
.ds-eyebrow,
.ds-caption,
.ds-figure {
  margin: 0;
  font-family: var(--ds-font-family);
}

.ds-display {
  font-size: var(--ds-type-display-size);
  line-height: var(--ds-type-display-leading);
  letter-spacing: var(--ds-type-display-tracking);
  font-weight: 600;
}

.ds-h2 {
  font-size: var(--ds-type-h2-size);
  line-height: var(--ds-type-h2-leading);
  letter-spacing: var(--ds-type-h2-tracking);
  font-weight: 600;
}

.ds-h3 {
  font-size: var(--ds-type-h3-size);
  line-height: var(--ds-type-h3-leading);
  font-weight: 600;
}

.ds-body-l {
  font-size: var(--ds-type-body-l-size);
  line-height: var(--ds-type-body-l-leading);
}

.ds-body {
  font-size: var(--ds-type-body-size);
  line-height: var(--ds-type-body-leading);
}

.ds-small {
  font-size: var(--ds-type-small-size);
  line-height: var(--ds-type-small-leading);
}

.ds-eyebrow {
  font-size: var(--ds-type-eyebrow-size);
  line-height: var(--ds-type-eyebrow-leading);
  letter-spacing: var(--ds-type-eyebrow-tracking);
  font-weight: 600;
  text-transform: uppercase;
}

.ds-caption {
  font-size: var(--ds-type-caption-size);
  line-height: var(--ds-type-caption-leading);
}

.ds-figure {
  font-size: var(--ds-type-figure-size);
  line-height: var(--ds-type-figure-leading);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.ds-container {
  width: 100%;
  max-width: calc(var(--ds-content-max) + 2 * var(--ds-gutter));
  margin-inline: auto;
  padding-inline: var(--ds-gutter);
}

.ds-section + .ds-section {
  margin-top: var(--ds-section-gap);
}

/* --------------------------------------------------------------------------
   Icons and logo
   -------------------------------------------------------------------------- */

.ds-icon {
  display: inline-block;
  flex: none;
  width: 20px;
  height: 20px;
  vertical-align: middle;
}

.ds-logo {
  width: auto;
  height: 24px;
}

/* --------------------------------------------------------------------------
   Focus: one visible ring for every interactive element
   -------------------------------------------------------------------------- */

.ds-btn:focus-visible,
.ds-tab:focus-visible,
.ds-nav__logo:focus-visible,
.ds-nav__link:focus-visible,
.ds-nav__login:focus-visible,
.ds-nav__cta:focus-visible,
.ds-nav__toggle:focus-visible,
.ds-nav__close:focus-visible,
.ds-nav__drawer-row:focus-visible,
.ds-faq__question:focus-visible,
.ds-strip__link:focus-visible,
.ds-strip__dismiss:focus-visible,
.ds-tooltip__trigger:focus-visible,
.ds-input:focus-visible,
.ds-select:focus-visible,
.ds-textarea:focus-visible,
.ds-otp__digit:focus-visible,
.ds-checkbox__input:focus-visible + .ds-checkbox__box,
.ds-role-card:has(.ds-role-card__input:focus-visible),
.ds-choice:has(.ds-choice__input:focus-visible),
.ds-pill:has(.ds-pill__input:focus-visible),
.ds-table-wrap:focus-visible,
.ds-page-tabs__tab:focus-visible,
.ds-alert__dismiss:focus-visible,
.ds-alert__action:focus-visible,
.ds-toast__dismiss:focus-visible,
.ds-stat:focus-visible,
.ds-modal__close:focus-visible,
.ds-slideover__close:focus-visible,
.ds-pagination__page:focus-visible,
.ds-pagination__step:focus-visible,
.ds-switch__input:focus-visible + .ds-switch__track,
.ds-radio__input:focus-visible + .ds-radio__dot,
.ds-file__input:focus-visible,
.ds-copy__control:has(.ds-copy__input:focus-visible),
.ds-back:focus-visible,
.ds-breadcrumbs__link:focus-visible,
.ds-menu__trigger:focus-visible,
.ds-prose a:focus-visible {
  outline: 2px solid var(--ds-focus-ring);
  outline-offset: 2px;
}

/* Tabs sit in a sideways-panning strip that would clip an outer ring */
.ds-page-tabs__tab:focus-visible {
  outline-offset: -2px;
}

/* Menu items sit flush inside the panel */
.ds-menu__item:focus-visible {
  outline: 2px solid var(--ds-focus-ring);
  outline-offset: -2px;
}

/* --------------------------------------------------------------------------
   Button
   -------------------------------------------------------------------------- */

.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-8);
  min-height: var(--ds-space-48);
  padding: var(--ds-space-12) var(--ds-space-24);
  border: 1px solid transparent;
  border-radius: var(--ds-radius-pill);
  font-family: var(--ds-font-family);
  font-size: var(--ds-type-button-size);
  line-height: var(--ds-type-button-leading);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--ds-motion-hover) ease,
    border-color var(--ds-motion-hover) ease,
    color var(--ds-motion-hover) ease;
}

.ds-btn--primary {
  background: var(--ds-button-primary-bg);
  color: var(--ds-button-primary-text);
}

.ds-btn--primary:hover {
  background: color-mix(
    in srgb,
    var(--ds-button-primary-bg),
    black var(--ds-hover-tint)
  );
}

.ds-btn--secondary {
  background: var(--ds-surface);
  border-color: var(--ds-border);
  color: var(--ds-text);
}

.ds-btn--secondary:hover {
  background: color-mix(
    in srgb,
    var(--ds-surface),
    var(--ds-text) var(--ds-hover-tint)
  );
}

.ds-btn--ink {
  background: var(--ds-inverse);
  color: var(--ds-on-inverse);
}

.ds-btn--ink:hover {
  background: color-mix(in srgb, var(--ds-inverse), white var(--ds-hover-tint));
}

.ds-btn--text {
  min-height: 0;
  padding: var(--ds-space-4) 0;
  background: transparent;
  color: var(--ds-text);
  text-decoration: underline;
  text-decoration-color: var(--ds-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.ds-btn--text:hover {
  text-decoration-color: currentColor;
}

.ds-btn--disabled,
.ds-btn:disabled {
  opacity: 0.4;
  pointer-events: none;
  cursor: not-allowed;
}

.ds-btn__label {
  min-width: 0;
}

/* --------------------------------------------------------------------------
   Card (shared surface; lifts on hover)
   -------------------------------------------------------------------------- */

.ds-card {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border-subtle);
  border-radius: var(--ds-radius-24);
  box-shadow: var(--ds-shadow-card);
  transition: transform var(--ds-motion-hover) ease;
}

.ds-card:hover {
  transform: translateY(calc(-1 * var(--ds-hover-lift)));
}

/* --------------------------------------------------------------------------
   Chip
   -------------------------------------------------------------------------- */

.ds-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-4);
  padding: var(--ds-space-4) var(--ds-space-12);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-pill);
  background: transparent;
  color: var(--ds-text);
  font-size: var(--ds-type-caption-size);
  line-height: var(--ds-type-caption-leading);
  font-weight: 500;
  white-space: nowrap;
}

.ds-chip--active {
  background: var(--ds-status-active-bg);
  border-color: var(--ds-status-active-bg);
  color: var(--ds-status-active-text);
}

.ds-chip--pending {
  background: var(--ds-status-pending-bg);
  border-color: var(--ds-border-subtle);
  color: var(--ds-status-pending-text);
}

.ds-chip--action-required {
  background: var(--ds-status-action-bg);
  border-color: var(--ds-status-action-bg);
  color: var(--ds-status-action-text);
}

.ds-chip--danger {
  background: var(--ds-status-action-bg);
  border-color: var(--ds-status-action-bg);
  color: var(--ds-status-action-text);
}

.ds-chip--success {
  background: var(--ds-status-success-bg);
  border-color: var(--ds-status-success-bg);
  color: var(--ds-status-success-text);
}

.ds-chip--warning {
  background: var(--ds-status-warning-bg);
  border-color: var(--ds-status-warning-bg);
  color: var(--ds-status-warning-text);
}

.ds-chip--info {
  background: var(--ds-status-info-bg);
  border-color: var(--ds-status-info-bg);
  color: var(--ds-status-info-text);
}

.ds-chip--neutral {
  background: var(--ds-status-neutral-bg);
  border-color: var(--ds-status-neutral-bg);
  color: var(--ds-status-neutral-text);
}

/* A status chip leads with a dot in the tone's text colour */
.ds-chip--dot::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--ds-radius-pill);
  background: currentColor;
}

/* --------------------------------------------------------------------------
   Segmented tabs
   -------------------------------------------------------------------------- */

.ds-tabs {
  display: inline-flex;
  gap: var(--ds-space-4);
  max-width: 100%;
  padding: var(--ds-space-4);
  border: 1px solid var(--ds-border-subtle);
  border-radius: var(--ds-radius-pill);
  background: var(--ds-surface);
  overflow-x: auto;
}

.ds-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--ds-space-8) var(--ds-space-16);
  border: 0;
  border-radius: var(--ds-radius-pill);
  background: transparent;
  color: var(--ds-text-secondary);
  font-family: var(--ds-font-family);
  font-size: var(--ds-type-small-size);
  line-height: var(--ds-type-small-leading);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--ds-motion-hover) ease,
    color var(--ds-motion-hover) ease;
}

.ds-tab:hover {
  color: var(--ds-text);
}

.ds-tab[aria-current="page"],
.ds-tab[aria-pressed="true"] {
  background: var(--ds-inverse);
  color: var(--ds-on-inverse);
}

/* --------------------------------------------------------------------------
   Highlight
   -------------------------------------------------------------------------- */

.ds-highlight {
  padding: 0 var(--ds-space-4);
  background: var(--ds-highlight);
  color: var(--ds-text);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* --------------------------------------------------------------------------
   Avatar
   -------------------------------------------------------------------------- */

.ds-avatar {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--ds-space-48);
  height: var(--ds-space-48);
  border-radius: var(--ds-radius-pill);
  background: var(--ds-avatar-charcoal);
  color: var(--ds-white);
  font-size: var(--ds-type-small-size);
  line-height: var(--ds-type-small-leading);
  font-weight: 600;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   Operator card
   -------------------------------------------------------------------------- */

.ds-operator-card {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-16);
  min-width: 0; /* lets the card shrink in a grid or carousel track; the name truncates instead */
  padding: var(--ds-space-24);
}

.ds-operator-card__head {
  display: flex;
  align-items: center;
  gap: var(--ds-space-12);
}

.ds-operator-card__identity {
  flex: 1;
  min-width: 0;
}

.ds-operator-card__title {
  display: flex;
  align-items: center;
  gap: var(--ds-space-8);
  min-width: 0;
}

.ds-operator-card__name {
  flex: 0 1 auto;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font-size: var(--ds-type-app-h3-size);
  line-height: var(--ds-type-app-h3-leading);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ds-operator-card__domain,
.ds-operator-card__previously {
  margin: 0;
  color: var(--ds-text-secondary);
  font-size: var(--ds-type-small-size);
  line-height: var(--ds-type-small-leading);
}

.ds-operator-card__vetted {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--ds-space-4);
  padding: var(--ds-space-4) var(--ds-space-8);
  border-radius: var(--ds-radius-pill);
  background: var(--ds-status-active-bg);
  color: var(--ds-status-active-text);
  font-size: var(--ds-type-caption-size);
  line-height: var(--ds-type-caption-leading);
  font-weight: 600;
}

.ds-operator-card__vetted .ds-icon {
  width: 16px;
  height: 16px;
}

.ds-operator-card__previously strong {
  color: var(--ds-text);
  font-weight: 600;
}

.ds-operator-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-8);
}

.ds-operator-card .ds-chip {
  padding: var(--ds-space-4) var(--ds-space-8);
  font-size: var(--ds-type-caption-size);
  line-height: var(--ds-type-caption-leading);
}

.ds-operator-card__footer {
  margin-top: auto;
}

.ds-operator-card__button {
  width: 100%;
}

/* --------------------------------------------------------------------------
   Quote card
   -------------------------------------------------------------------------- */

.ds-quote {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-16);
  margin: 0;
  padding: var(--ds-space-32);
}

.ds-quote__text {
  margin: 0;
}

.ds-quote__text p {
  margin: 0;
  font-size: var(--ds-type-body-l-size);
  line-height: var(--ds-type-body-l-leading);
  font-weight: 500;
}

/* In quotes the highlighted line is plain ink text, not a lime mark */
.ds-quote .ds-highlight {
  padding: 0;
  background: transparent;
  color: var(--ds-text);
  font-weight: 500;
}

.ds-quote__muted {
  color: var(--ds-text-secondary);
}

.ds-quote__author {
  display: flex;
  align-items: center;
  gap: var(--ds-space-12);
  padding-top: var(--ds-space-16);
  border-top: 1px solid var(--ds-border-subtle);
}

.ds-quote__who {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ds-quote__name {
  font-size: var(--ds-type-small-size);
  line-height: var(--ds-type-small-leading);
  font-weight: 600;
}

.ds-quote__meta {
  color: var(--ds-text-secondary);
  font-size: var(--ds-type-small-size);
  line-height: var(--ds-type-small-leading);
}

/* --------------------------------------------------------------------------
   Announcement strip
   -------------------------------------------------------------------------- */

.ds-strip {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-12);
  padding: var(--ds-space-12) calc(var(--ds-gutter) + var(--ds-space-32));
  font-size: var(--ds-type-small-size);
  line-height: var(--ds-type-small-leading);
  text-align: center;
}

.ds-strip--light {
  background: var(--ds-surface);
  border-bottom: 1px solid var(--ds-border-subtle);
  color: var(--ds-text);
}

.ds-strip--ink {
  background: var(--ds-inverse);
  color: var(--ds-on-inverse);
}

.ds-strip__text {
  margin: 0;
}

.ds-strip__link {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--ds-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  white-space: nowrap;
}

.ds-strip__link:hover {
  text-decoration-color: currentColor;
}

.ds-strip__dismiss {
  position: absolute;
  top: 50%;
  right: var(--ds-gutter);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ds-space-32);
  height: var(--ds-space-32);
  margin-top: calc(-1 * var(--ds-space-16));
  padding: 0;
  border: 0;
  border-radius: var(--ds-radius-pill);
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.ds-strip--light .ds-strip__dismiss:hover {
  background: var(--ds-surface-subtle);
}

.ds-strip--ink .ds-strip__dismiss {
  color: var(--ds-on-inverse-muted);
}

.ds-strip--ink .ds-strip__dismiss:hover {
  color: var(--ds-on-inverse);
}

/* --------------------------------------------------------------------------
   Nav
   -------------------------------------------------------------------------- */

.ds-nav {
  position: relative;
  z-index: 50;
  background: var(--ds-ground);
  color: var(--ds-text);
}

.ds-nav__bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--ds-space-32);
  max-width: calc(var(--ds-content-max) + 2 * var(--ds-gutter));
  min-height: var(--ds-space-64);
  margin-inline: auto;
  padding: var(--ds-space-16) var(--ds-gutter);
  background: var(--ds-ground);
}

.ds-nav__logo {
  display: inline-flex;
  flex: none;
  align-items: center;
  color: var(--ds-text);
  border-radius: var(--ds-radius-12);
}

.ds-nav__segment {
  flex: none;
}

/* Segmented control in the bar and the drawer: outlined pill on the page ground */
.ds-nav__segment .ds-tabs,
.ds-nav__drawer-segment .ds-tabs {
  border-color: var(--ds-border);
  background: transparent;
}

.ds-nav__drawer-segment {
  margin-bottom: var(--ds-space-16);
}

.ds-nav__drawer-segment .ds-tabs {
  display: flex;
  width: 100%;
}

.ds-nav__drawer-segment .ds-tab {
  flex: 1 1 0;
  min-width: 0;
}

.ds-nav__links {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--ds-space-24);
}

.ds-nav__link,
.ds-nav__login {
  color: var(--ds-text);
  font-size: var(--ds-type-nav-size);
  line-height: var(--ds-type-nav-leading);
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--ds-radius-12);
  transition: color var(--ds-motion-hover) ease;
}

.ds-nav__link:hover,
.ds-nav__login:hover {
  color: var(--ds-text-secondary);
}

/* The current page's link: underlined in lime, like the highlight */
.ds-nav__link[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--ds-accent);
  text-decoration-thickness: 3px;
  text-underline-offset: 8px;
}

.ds-nav__actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--ds-space-24);
  margin-left: auto;
}

/* Live CTA: ink pill with lime text */
.ds-nav__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--ds-space-48);
  padding: var(--ds-space-12) var(--ds-space-24);
  border: 0;
  border-radius: var(--ds-radius-pill);
  background: var(--ds-inverse);
  color: var(--ds-accent);
  font-size: var(--ds-type-button-size);
  line-height: var(--ds-type-button-leading);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--ds-motion-hover) ease;
}

.ds-nav__cta:hover {
  background: color-mix(in srgb, var(--ds-inverse), white var(--ds-hover-tint));
}

.ds-nav__toggle,
.ds-nav__close {
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--ds-space-48);
  height: var(--ds-space-48);
  margin-left: auto;
  padding: 0;
  border: 0;
  border-radius: var(--ds-radius-pill);
  background: transparent;
  color: var(--ds-text);
  cursor: pointer;
}

.ds-nav__close {
  display: inline-flex;
  margin-left: 0;
}

.ds-nav__toggle .ds-icon,
.ds-nav__close .ds-icon {
  width: 24px;
  height: 24px;
}

.ds-nav__drawer {
  display: none;
}

.ds-nav__drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-16);
  min-height: var(--ds-space-64);
  margin-bottom: var(--ds-space-16);
}

.ds-nav__drawer-brand {
  display: inline-flex;
  color: var(--ds-text);
}

.ds-nav__drawer-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ds-nav__drawer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-16);
  padding: var(--ds-space-16) 0;
  border-bottom: 1px solid var(--ds-border-subtle);
  color: var(--ds-text);
  font-size: var(--ds-type-body-l-size);
  line-height: var(--ds-type-body-l-leading);
  font-weight: 500;
  text-decoration: none;
}

.ds-nav__drawer-row .ds-icon {
  color: var(--ds-text-secondary);
}

.ds-nav__drawer-actions {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-12);
  margin-top: auto;
  padding-top: var(--ds-space-32);
}

.ds-nav__drawer-actions .ds-btn,
.ds-nav__drawer-actions .ds-nav__cta {
  width: 100%;
}

@media (max-width: 1023px) {
  .ds-nav__segment,
  .ds-nav__links,
  .ds-nav__actions {
    display: none;
  }

  .ds-nav__toggle {
    display: inline-flex;
  }

  .ds-nav__drawer {
    position: fixed;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    padding: var(--ds-space-8) var(--ds-gutter) var(--ds-space-32);
    background: var(--ds-ground);
    overflow-y: auto;
  }
}

/* --------------------------------------------------------------------------
   FAQ item
   -------------------------------------------------------------------------- */

.ds-faq {
  padding: var(--ds-space-16) var(--ds-space-24);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-12);
  background: var(--ds-surface);
}

.ds-faq + .ds-faq {
  margin-top: var(--ds-space-8);
}

.ds-faq__heading {
  margin: 0;
}

.ds-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-16);
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--ds-radius-12);
  background: transparent;
  color: var(--ds-text);
  font-family: var(--ds-font-family);
  font-size: var(--ds-type-button-size);
  line-height: var(--ds-type-button-leading);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.ds-faq__icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--ds-space-32);
  height: var(--ds-space-32);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-pill);
  transition: background-color var(--ds-motion-hover) ease;
}

.ds-faq__question:hover .ds-faq__icon {
  background: var(--ds-surface-subtle);
}

.ds-faq__question[aria-expanded="true"] .ds-faq__icon--plus,
.ds-faq__question[aria-expanded="false"] .ds-faq__icon--minus {
  display: none;
}

.ds-faq__answer {
  padding: var(--ds-space-8) var(--ds-space-48) 0 0;
  color: var(--ds-text-secondary);
  font-size: var(--ds-type-body-size);
  line-height: var(--ds-type-body-leading);
}

.ds-faq__answer[hidden] {
  display: none;
}

.ds-faq__answer p {
  margin: 0;
}

/* --------------------------------------------------------------------------
   Form fields: input, select, textarea
   -------------------------------------------------------------------------- */

.ds-field {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-8);
}

.ds-label {
  color: var(--ds-text);
  font-size: var(--ds-type-small-size);
  line-height: var(--ds-type-small-leading);
  font-weight: 500;
}

.ds-input,
.ds-select,
.ds-textarea {
  width: 100%;
  margin: 0;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-12);
  background: var(--ds-surface);
  color: var(--ds-text);
  font-family: var(--ds-font-family);
  font-size: var(--ds-type-body-size);
  line-height: var(--ds-type-body-leading);
  transition: border-color var(--ds-motion-hover) ease;
}

.ds-input,
.ds-select {
  height: var(--ds-space-48);
  padding: 0 var(--ds-space-16);
}

.ds-textarea {
  display: block;
  min-height: calc(var(--ds-space-48) * 2);
  padding: var(--ds-space-12) var(--ds-space-16);
  resize: vertical;
}

.ds-input::placeholder,
.ds-textarea::placeholder {
  color: var(--ds-text-tertiary);
  opacity: 1;
}

.ds-input:hover,
.ds-select:hover,
.ds-textarea:hover {
  border-color: var(--ds-text-secondary);
}

.ds-input:focus,
.ds-select:focus,
.ds-textarea:focus {
  border-color: var(--ds-text);
}

.ds-input:disabled,
.ds-select:disabled,
.ds-textarea:disabled {
  background: var(--ds-surface-subtle);
  border-color: var(--ds-border-subtle);
  color: var(--ds-text-tertiary);
  cursor: not-allowed;
}

/* Read-only (a locked field that still posts its value): quiet ground and border, full text colour (AA on the
   subtle ground in both modes) */
.ds-input[readonly],
.ds-textarea[readonly] {
  background: var(--ds-surface-subtle);
  border-color: var(--ds-border-subtle);
  color: var(--ds-text);
}

/* Disabled selector pill (a locked choice): no pointer, muted */
.ds-pill:has(.ds-pill__input:disabled) {
  cursor: not-allowed;
  opacity: 0.7;
}

.ds-pill:has(.ds-pill__input:disabled):hover {
  border-color: var(--ds-border-subtle);
}

.ds-select__control {
  position: relative;
}

/* Raw Django widgets ({{ form.field }}) inside a .ds-field take the input look, so forms whose widgets carry their
   own classes need no per-page copy of these rules. Selects keep the native arrow. */
.ds-field
  > :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not(
        [type="hidden"]
      ),
    select,
    textarea
  ):not(.ds-input):not(.ds-select):not(.ds-textarea) {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-12);
  background: var(--ds-surface);
  color: var(--ds-text);
  font-family: var(--ds-font-family);
  font-size: var(--ds-type-body-size);
  line-height: var(--ds-type-body-leading);
  transition: border-color var(--ds-motion-hover) ease;
}

.ds-field
  > :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not(
        [type="hidden"]
      ),
    select
  ):not(.ds-input):not(.ds-select) {
  height: var(--ds-space-48);
  padding: 0 var(--ds-space-16);
}

/* WebKit lets a select's long option text widen its parent past the field: clip it there (the margin
   keeps focus rings visible) */
.ds-field:has(> select) {
  overflow-x: clip;
  overflow-clip-margin: var(--ds-space-4);
}

.ds-field > textarea:not(.ds-textarea) {
  min-height: calc(var(--ds-space-48) * 2);
  padding: var(--ds-space-12) var(--ds-space-16);
  resize: vertical;
}

.ds-field
  > :is(input, select, textarea):not(.ds-input):not(.ds-select):not(
    .ds-textarea
  ):hover {
  border-color: var(--ds-text-secondary);
}

.ds-field
  > :is(input, select, textarea):not(.ds-input):not(.ds-select):not(
    .ds-textarea
  ):focus {
  border-color: var(--ds-text);
}

.ds-field > :is(input, textarea):not(.ds-input):not(.ds-textarea)::placeholder {
  color: var(--ds-text-tertiary);
  opacity: 1;
}

.ds-field--error > :is(input, select, textarea) {
  border-color: var(--ds-status-action-text);
}

.ds-app
  .ds-field
  > :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not(
        [type="hidden"]
      ),
    select
  ):not(.ds-input):not(.ds-select) {
  height: 44px;
}

.ds-app
  .ds-field
  > :is(input, select, textarea):not(.ds-input):not(.ds-select):not(
    .ds-textarea
  ) {
  font-size: 15px;
  line-height: 22px;
}

.ds-select {
  padding-right: var(--ds-space-48);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.ds-select__chevron {
  position: absolute;
  top: 50%;
  right: var(--ds-space-16);
  display: inline-flex;
  margin-top: -10px;
  color: var(--ds-text-secondary);
  pointer-events: none;
}

.ds-field__helper,
.ds-field__error {
  margin: 0;
  font-size: var(--ds-type-small-size);
  line-height: var(--ds-type-small-leading);
}

.ds-field__helper {
  color: var(--ds-text-secondary);
}

.ds-field__error {
  color: var(--ds-status-action-text);
  font-weight: 500;
}

.ds-field--error .ds-input,
.ds-field--error .ds-select,
.ds-field--error .ds-textarea {
  border-color: var(--ds-status-action-text);
}

/* --------------------------------------------------------------------------
   Checkbox
   -------------------------------------------------------------------------- */

.ds-checkbox {
  position: relative;
  display: inline-flex;
  align-items: flex-start;
  gap: var(--ds-space-12);
  color: var(--ds-text);
  font-size: var(--ds-type-small-size);
  line-height: var(--ds-type-small-leading);
  cursor: pointer;
}

.ds-checkbox__input,
.ds-role-card__input,
.ds-choice__input,
.ds-pill__input,
.ds-switch__input,
.ds-radio__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.ds-checkbox__box {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-space-4);
  background: var(--ds-surface);
  color: var(--ds-surface);
  transition:
    background-color var(--ds-motion-hover) ease,
    border-color var(--ds-motion-hover) ease;
}

.ds-checkbox__box .ds-icon {
  width: 16px;
  height: 16px;
  opacity: 0;
}

.ds-checkbox:hover .ds-checkbox__box {
  border-color: var(--ds-text-secondary);
}

.ds-checkbox__input:checked + .ds-checkbox__box {
  background: var(--ds-text);
  border-color: var(--ds-text);
}

.ds-checkbox__input:checked + .ds-checkbox__box .ds-icon {
  opacity: 1;
}

.ds-checkbox__input:disabled + .ds-checkbox__box,
.ds-checkbox__input:disabled ~ .ds-checkbox__label {
  opacity: 0.4;
  cursor: not-allowed;
}

.ds-checkbox__label a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--ds-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* --------------------------------------------------------------------------
   OTP
   -------------------------------------------------------------------------- */

.ds-otp {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-8);
}

.ds-otp__cells {
  display: flex;
  gap: var(--ds-space-8);
}

.ds-otp__digit {
  flex: 0 1 auto;
  width: 52px;
  min-width: 0;
  height: 60px;
  margin: 0;
  padding: 0;
  border: 1.5px solid var(--ds-border-subtle);
  border-radius: var(--ds-radius-12);
  background: var(--ds-surface);
  color: var(--ds-text);
  font-family: var(--ds-font-family);
  font-size: 22px;
  line-height: 1;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
  transition:
    border-color var(--ds-motion-hover) ease,
    background-color var(--ds-motion-hover) ease;
}

.ds-otp__digit:not(:placeholder-shown):not(:focus),
.ds-otp__digit[data-filled="true"]:not(:focus) {
  background: var(--ds-surface-subtle);
}

.ds-otp__digit:focus {
  border: 2px solid var(--ds-text);
}

.ds-otp__fallback {
  max-width: calc(var(--ds-space-48) * 4);
  letter-spacing: var(--ds-space-8);
  font-variant-numeric: tabular-nums;
}

.ds-otp--error .ds-otp__digit,
.ds-otp--error .ds-otp__fallback {
  border: 2px solid var(--ds-status-action-text);
  background: var(--ds-status-action-bg);
  color: var(--ds-text);
}

/* --------------------------------------------------------------------------
   Role card, choice card, selector pill (radio or checkbox inside a label)
   Cards: 1.5px subtle border, radius 12; selected =
   soft accent background, ink border and an ink check badge.
   -------------------------------------------------------------------------- */

.ds-role-card,
.ds-choice,
.ds-pill {
  position: relative;
  border: 1.5px solid var(--ds-border-subtle);
  background: var(--ds-surface);
  color: var(--ds-text);
  cursor: pointer;
  transition:
    background-color var(--ds-motion-hover) ease,
    border-color var(--ds-motion-hover) ease;
}

.ds-role-card:hover,
.ds-choice:hover,
.ds-pill:hover {
  border-color: var(--ds-text-tertiary);
}

.ds-role-card:has(.ds-role-card__input:checked),
.ds-choice:has(.ds-choice__input:checked),
.ds-pill:has(.ds-pill__input:checked) {
  border-color: var(--ds-text);
  background: var(--ds-accent-soft);
}

.ds-role-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ds-space-8);
  padding: 18px var(--ds-space-16);
  border-radius: var(--ds-radius-12);
  text-align: center;
}

.ds-role-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--ds-radius-12);
  background: var(--ds-surface-subtle);
  color: var(--ds-text);
}

.ds-role-card__icon .ds-icon {
  width: 20px;
  height: 20px;
}

.ds-role-card:has(.ds-role-card__input:checked) .ds-role-card__icon {
  background: var(--ds-accent);
  color: var(--ds-on-accent);
}

.ds-role-card__label,
.ds-choice__title {
  font-size: var(--ds-type-small-size);
  line-height: 20px;
  font-weight: 500;
}

.ds-role-card__subtitle,
.ds-choice__description {
  color: var(--ds-text-muted);
  font-size: 13px;
  line-height: 18px;
}

.ds-choice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-16);
  padding: 14px var(--ds-space-16);
  border-radius: var(--ds-radius-12);
}

.ds-choice__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

/* Ink check badge, shown on the checked card only */
.ds-choice__check,
.ds-role-card__check {
  display: none;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: var(--ds-radius-pill);
  background: var(--ds-inverse);
  color: var(--ds-accent);
}

.ds-choice__check .ds-icon,
.ds-role-card__check .ds-icon {
  width: 12px;
  height: 12px;
}

.ds-role-card__check {
  position: absolute;
  top: -10px;
  right: -10px;
}

.ds-choice:has(.ds-choice__input:checked) .ds-choice__check,
.ds-role-card:has(.ds-role-card__input:checked) .ds-role-card__check {
  display: inline-flex;
}

.ds-pill {
  display: inline-flex;
  align-items: center;
  padding: 10px var(--ds-space-16);
  border-radius: var(--ds-radius-pill);
  color: var(--ds-text-muted);
  font-size: 13.5px;
  line-height: 20px;
  font-weight: 500;
}

.ds-pill:has(.ds-pill__input:checked) {
  color: var(--ds-text);
}

/* --------------------------------------------------------------------------
   Stage progress: three equal pills.
   Current = 2px ink border, semibold; done = subtle fill, ink border, check;
   upcoming = subtle border, muted text.
   -------------------------------------------------------------------------- */

.ds-stage-progress {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-12);
}

.ds-stage {
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ds-stage__item {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  padding: 11px var(--ds-space-16);
  border: 1.5px solid var(--ds-border-subtle);
  border-radius: var(--ds-radius-pill);
  background: var(--ds-surface);
  color: var(--ds-text-muted);
  font-size: 13.5px;
  line-height: 20px;
  font-weight: 500;
  text-align: center;
}

.ds-stage__marker {
  display: none;
}

.ds-stage__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ds-stage__item--current {
  border: 2px solid var(--ds-text);
  color: var(--ds-text);
  font-weight: 600;
}

.ds-stage__item--done {
  border-color: var(--ds-text);
  background: var(--ds-surface-subtle);
  color: var(--ds-text);
}

.ds-stage__item--done .ds-stage__marker {
  display: inline-flex;
  flex: none;
}

.ds-stage__item--done .ds-stage__marker .ds-icon {
  width: 13px;
  height: 13px;
}

.ds-stage__percent {
  color: var(--ds-text-muted);
  font-size: 13px;
  line-height: 18px;
}

/* --------------------------------------------------------------------------
   Progress line (in-card step label, percentage and lime bar)
   -------------------------------------------------------------------------- */

.ds-progress-line {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ds-progress-line__meta {
  display: flex;
  justify-content: space-between;
  gap: var(--ds-space-16);
}

.ds-progress-line__label {
  font-size: var(--ds-type-small-size);
  line-height: 20px;
  font-weight: 500;
}

.ds-progress-line__percent {
  color: var(--ds-text-muted);
  font-size: 13px;
  line-height: 18px;
  white-space: nowrap;
}

.ds-progress-line__track {
  height: 8px;
  overflow: hidden;
  border-radius: var(--ds-radius-pill);
  background: var(--ds-surface-subtle);
}

.ds-progress-line__bar {
  height: 100%;
  border-radius: var(--ds-radius-pill);
  background: var(--ds-accent);
}

/* --------------------------------------------------------------------------
   Avatar sizes, fills and ring (avatar.html). The bare .ds-avatar above stays
   48px charcoal for the operator and quote cards. The lighter fills take ink
   initials so the letters pass AA contrast.
   -------------------------------------------------------------------------- */

.ds-avatar--sm {
  width: var(--ds-space-32);
  height: var(--ds-space-32);
  font-size: var(--ds-type-caption-size);
  line-height: var(--ds-type-caption-leading);
}

.ds-avatar--md {
  width: 40px;
  height: 40px;
}

.ds-avatar--lg {
  width: var(--ds-space-48);
  height: var(--ds-space-48);
}

.ds-avatar--xl {
  width: 72px;
  height: 72px;
  font-size: var(--ds-type-h3-size);
  line-height: var(--ds-type-h3-leading);
}

.ds-avatar--charcoal {
  background: var(--ds-avatar-charcoal);
  color: var(--ds-white);
}

.ds-avatar--sage {
  background: var(--ds-avatar-sage);
  color: var(--ds-ink);
}

.ds-avatar--dusty-blue {
  background: var(--ds-avatar-dusty-blue);
  color: var(--ds-ink);
}

.ds-avatar--olive {
  background: var(--ds-avatar-olive);
  color: var(--ds-ink);
}

.ds-avatar--ring {
  box-shadow: 0 0 0 2px var(--ds-surface);
}

/* --------------------------------------------------------------------------
   Table (table.html). The wrapper pans sideways on narrow screens.
   -------------------------------------------------------------------------- */

.ds-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--ds-border-subtle);
  border-radius: var(--ds-radius-24);
  background: var(--ds-surface);
}

.ds-table {
  width: 100%;
  border-collapse: collapse;
  color: var(--ds-text);
  font-size: var(--ds-type-small-size);
  line-height: var(--ds-type-small-leading);
  text-align: left;
}

.ds-table__caption {
  padding: var(--ds-space-16) var(--ds-space-24) 0;
  color: var(--ds-text);
  font-size: var(--ds-type-app-h3-size);
  line-height: var(--ds-type-app-h3-leading);
  font-weight: 600;
  text-align: left;
  caption-side: top;
}

.ds-table th,
.ds-table td {
  padding: var(--ds-space-12) var(--ds-space-16);
  border-bottom: 1px solid var(--ds-border-subtle);
  vertical-align: middle;
}

.ds-table th:first-child,
.ds-table td:first-child {
  padding-left: var(--ds-space-24);
}

.ds-table th:last-child,
.ds-table td:last-child {
  padding-right: var(--ds-space-24);
}

.ds-table th {
  color: var(--ds-text-muted);
  font-size: var(--ds-type-caption-size);
  line-height: var(--ds-type-caption-leading);
  font-weight: 600;
  white-space: nowrap;
}

.ds-table tbody tr:last-child td {
  border-bottom: 0;
}

.ds-table tbody tr {
  transition: background-color var(--ds-motion-hover) ease;
}

.ds-table tbody tr:hover {
  background: var(--ds-surface-subtle);
}

.ds-table a {
  color: inherit;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--ds-border);
  text-underline-offset: 3px;
}

.ds-table a:hover {
  text-decoration-color: currentColor;
}

.ds-table .ds-table__num {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.ds-table__empty {
  color: var(--ds-text-muted);
  text-align: center;
}

.ds-table--compact th,
.ds-table--compact td {
  padding: var(--ds-space-8) var(--ds-space-12);
}

.ds-table--compact th:first-child,
.ds-table--compact td:first-child {
  padding-left: var(--ds-space-16);
}

.ds-table--compact th:last-child,
.ds-table--compact td:last-child {
  padding-right: var(--ds-space-16);
}

/* --------------------------------------------------------------------------
   Page tabs (tabs.html): underlined tab bar with optional counts
   -------------------------------------------------------------------------- */

/* A hidden tab panel stays hidden whatever display its own class sets (cards are flex or grid) */
[role="tabpanel"][hidden] {
  display: none !important;
}

.ds-page-tabs {
  max-width: 100%;
  overflow-x: auto;
  border-bottom: 1px solid var(--ds-border-subtle);
}

.ds-page-tabs__list {
  display: flex;
  gap: var(--ds-space-24);
  margin: 0;
  padding: 0 var(--ds-space-4);
  list-style: none;
}

.ds-page-tabs__list > li {
  display: flex;
}

.ds-page-tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-8);
  margin: 0 0 -1px;
  padding: var(--ds-space-12) 0;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--ds-text-muted);
  font-family: var(--ds-font-family);
  font-size: var(--ds-type-small-size);
  line-height: 20px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    color var(--ds-motion-hover) ease,
    border-color var(--ds-motion-hover) ease;
}

.ds-page-tabs__tab:hover {
  color: var(--ds-text);
}

.ds-page-tabs__tab--selected,
.ds-page-tabs__tab[aria-current="page"],
.ds-page-tabs__tab[aria-selected="true"] {
  border-bottom-color: var(--ds-text);
  color: var(--ds-text);
  font-weight: 600;
}

.ds-page-tabs__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  padding: 0 6px;
  border-radius: var(--ds-radius-pill);
  background: var(--ds-surface-subtle);
  color: var(--ds-text-muted);
  font-size: var(--ds-type-caption-size);
  line-height: 20px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.ds-page-tabs__tab--selected .ds-page-tabs__count,
.ds-page-tabs__tab[aria-current="page"] .ds-page-tabs__count,
.ds-page-tabs__tab[aria-selected="true"] .ds-page-tabs__count {
  background: var(--ds-text);
  color: var(--ds-surface);
}

/* --------------------------------------------------------------------------
   Alert (alert.html) and toasts (toasts.html) share the tone palette
   -------------------------------------------------------------------------- */

/* Info is the default tone; the modifiers below must come after this rule */
.ds-alert,
.ds-toast {
  --ds-tone-bg: var(--ds-status-info-bg);
  --ds-tone-text: var(--ds-status-info-text);
}

.ds-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--ds-space-12);
  padding: var(--ds-space-16);
  border: 1px solid color-mix(in srgb, var(--ds-tone-text) 20%, transparent);
  border-radius: var(--ds-radius-12);
  background: var(--ds-tone-bg);
  color: var(--ds-text);
  font-size: var(--ds-type-small-size);
  line-height: var(--ds-type-small-leading);
}

.ds-alert--success,
.ds-toast--success {
  --ds-tone-bg: var(--ds-status-success-bg);
  --ds-tone-text: var(--ds-status-success-text);
}

.ds-alert--warning,
.ds-toast--warning {
  --ds-tone-bg: var(--ds-status-warning-bg);
  --ds-tone-text: var(--ds-status-warning-text);
}

.ds-alert--danger,
.ds-toast--danger {
  --ds-tone-bg: var(--ds-status-action-bg);
  --ds-tone-text: var(--ds-status-action-text);
}

.ds-alert--neutral {
  --ds-tone-bg: var(--ds-status-neutral-bg);
  --ds-tone-text: var(--ds-status-neutral-text);
}

.ds-alert__icon,
.ds-toast__icon {
  display: inline-flex;
  flex: none;
  color: var(--ds-tone-text);
}

.ds-alert__content {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ds-space-4);
  min-width: 0;
}

.ds-alert__title,
.ds-alert__body {
  margin: 0;
}

.ds-alert__title {
  color: var(--ds-tone-text);
  font-weight: 600;
}

.ds-alert__body a,
.ds-alert__action {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ds-alert__action {
  margin-top: var(--ds-space-4);
}

.ds-alert__dismiss,
.ds-toast__dismiss {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--ds-space-32);
  height: var(--ds-space-32);
  margin: calc(-1 * var(--ds-space-4)) calc(-1 * var(--ds-space-4)) 0 0;
  padding: 0;
  border: 0;
  border-radius: var(--ds-radius-pill);
  background: transparent;
  color: var(--ds-text-muted);
  cursor: pointer;
}

.ds-alert__dismiss:hover,
.ds-toast__dismiss:hover {
  background: color-mix(
    in srgb,
    var(--ds-text) var(--ds-hover-tint),
    transparent
  );
  color: var(--ds-text);
}

.ds-alert__dismiss[hidden],
.ds-toast__dismiss[hidden] {
  display: none;
}

.ds-toasts {
  position: fixed;
  right: var(--ds-space-24);
  bottom: var(--ds-space-24);
  z-index: var(--ds-z-toast);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--ds-space-8);
  width: min(400px, calc(100vw - 2 * var(--ds-space-24)));
  pointer-events: none;
}

.ds-toasts--static {
  position: static;
  width: 100%;
  max-width: 400px;
}

.ds-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--ds-space-12);
  padding: var(--ds-space-12) var(--ds-space-12) var(--ds-space-12)
    var(--ds-space-16);
  border: 1px solid var(--ds-border-subtle);
  border-left: 4px solid var(--ds-tone-text);
  border-radius: var(--ds-radius-12);
  background: var(--ds-surface);
  box-shadow: var(--ds-shadow-raised);
  color: var(--ds-text);
  font-size: var(--ds-type-small-size);
  line-height: var(--ds-type-small-leading);
  pointer-events: auto;
  animation: ds-toast-in 200ms ease-out;
}

.ds-toast__icon {
  margin-top: 1px;
}

.ds-toast__text {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding-top: 1px;
  overflow-wrap: anywhere;
}

.ds-toast__text a {
  color: inherit;
  font-weight: 600;
}

.ds-toast--leaving {
  animation: ds-toast-out 150ms ease-in forwards;
}

@keyframes ds-toast-in {
  from {
    opacity: 0;
    transform: translateY(var(--ds-space-8));
  }
}

@keyframes ds-toast-out {
  to {
    opacity: 0;
    transform: translateY(var(--ds-space-8));
  }
}

/* --------------------------------------------------------------------------
   Empty state (empty_state.html)
   -------------------------------------------------------------------------- */

.ds-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ds-space-8);
  padding: var(--ds-space-48) var(--ds-space-24);
  border: 1px dashed var(--ds-border);
  border-radius: var(--ds-radius-24);
  color: var(--ds-text);
  text-align: center;
}

.ds-empty--compact {
  padding: var(--ds-space-24) var(--ds-space-16);
  border: 0;
}

.ds-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ds-space-48);
  height: var(--ds-space-48);
  margin-bottom: var(--ds-space-8);
  border-radius: var(--ds-radius-pill);
  background: var(--ds-surface-subtle);
  color: var(--ds-text-muted);
}

.ds-empty__icon .ds-icon {
  width: var(--ds-space-24);
  height: var(--ds-space-24);
}

.ds-empty__title {
  margin: 0;
  font-size: var(--ds-type-app-h3-size);
  line-height: var(--ds-type-app-h3-leading);
  font-weight: 600;
}

.ds-empty__text {
  max-width: 420px;
  margin: 0;
  color: var(--ds-text-muted);
  font-size: var(--ds-type-small-size);
  line-height: var(--ds-type-small-leading);
}

.ds-empty__action {
  margin-top: var(--ds-space-16);
}

/* --------------------------------------------------------------------------
   Stat card (stat_card.html): dashboard counters
   -------------------------------------------------------------------------- */

.ds-stat {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-8);
  min-width: 0;
  padding: var(--ds-space-24);
  border: 1px solid var(--ds-border-subtle);
  border-radius: var(--ds-radius-24);
  background: var(--ds-surface);
  box-shadow: var(--ds-shadow-card);
  color: var(--ds-text);
  text-decoration: none;
}

a.ds-stat {
  transition: transform var(--ds-motion-hover) ease;
}

a.ds-stat:hover {
  transform: translateY(calc(-1 * var(--ds-hover-lift)));
}

.ds-stat__label,
.ds-stat__helper {
  color: var(--ds-text-muted);
  font-size: 13px;
  line-height: 18px;
}

.ds-stat__value {
  font-size: 30px;
  line-height: 34px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.ds-stat__link {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-4);
  color: var(--ds-text-muted);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
}

.ds-stat__link .ds-icon {
  width: var(--ds-space-12);
  height: var(--ds-space-12);
}

a.ds-stat:hover .ds-stat__link {
  text-decoration: underline;
}

.ds-stat--accent .ds-stat__link {
  color: var(--ds-accent-strong);
}

.ds-stat--action .ds-stat__link {
  color: var(--ds-status-action-text);
}

/* --------------------------------------------------------------------------
   Card parts. .ds-card lifts on hover (marketing); app containers that are not
   links take .ds-card--static.
   -------------------------------------------------------------------------- */

.ds-card--padded {
  padding: var(--ds-space-24);
}

.ds-card--static {
  transition: none;
}

.ds-card--static:hover {
  transform: none;
}

.ds-card__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ds-space-12) var(--ds-space-16);
}

.ds-card__title {
  margin: 0;
  color: var(--ds-text);
  font-size: var(--ds-type-app-h3-size);
  line-height: var(--ds-type-app-h3-leading);
  font-weight: 600;
}

.ds-card__description {
  margin: var(--ds-space-4) 0 0;
  color: var(--ds-text-muted);
  font-size: var(--ds-type-small-size);
  line-height: var(--ds-type-small-leading);
}

.ds-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-space-8);
}

.ds-card__body {
  margin-top: var(--ds-space-16);
}

.ds-card__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-12);
  margin-top: var(--ds-space-16);
  padding-top: var(--ds-space-16);
  border-top: 1px solid var(--ds-border-subtle);
}

/* --------------------------------------------------------------------------
   Modal and slide-over (modal.html, slideover.html): native <dialog> elements
   that fill the viewport with the overlay; the panel sits inside. A click on
   the dialog itself (outside the panel) is a click on the backdrop.
   -------------------------------------------------------------------------- */

.ds-modal,
.ds-slideover {
  position: fixed;
  inset: 0;
  z-index: var(--ds-z-modal);
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: var(--ds-space-32) var(--ds-space-16);
  border: 0;
  background: var(--ds-overlay);
  color: var(--ds-text);
  font-family: var(--ds-font-family);
  font-size: var(--ds-type-small-size);
  line-height: var(--ds-type-small-leading);
}

.ds-modal::backdrop,
.ds-slideover::backdrop {
  background: transparent;
}

.ds-modal[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}

:root:has(.ds-modal[open]),
:root:has(.ds-slideover[open]) {
  overflow: hidden;
}

.ds-modal__panel {
  display: flex;
  flex-direction: column;
  width: min(560px, 100%);
  max-height: 100%;
  overflow: hidden;
  border-radius: var(--ds-radius-24);
  background: var(--ds-surface);
  box-shadow: var(--ds-shadow-raised);
  animation: ds-modal-in 200ms ease-out;
}

.ds-modal--sm .ds-modal__panel {
  width: min(400px, 100%);
}

.ds-modal--lg .ds-modal__panel {
  width: min(760px, 100%);
}

.ds-modal__header,
.ds-slideover__header {
  display: flex;
  flex: none;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ds-space-16);
}

.ds-modal__header {
  padding: var(--ds-space-24) var(--ds-space-24) 0;
}

.ds-modal__title,
.ds-slideover__title {
  margin: 0;
  color: var(--ds-text);
  font-size: var(--ds-type-app-h3-size);
  line-height: var(--ds-type-app-h3-leading);
  font-weight: 600;
}

.ds-modal__close,
.ds-slideover__close {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--ds-space-32);
  height: var(--ds-space-32);
  margin: calc(-1 * var(--ds-space-4)) calc(-1 * var(--ds-space-4)) 0 0;
  padding: 0;
  border: 0;
  border-radius: var(--ds-radius-pill);
  background: transparent;
  color: var(--ds-text-muted);
  cursor: pointer;
}

.ds-modal__close:hover,
.ds-slideover__close:hover {
  background: var(--ds-surface-subtle);
  color: var(--ds-text);
}

.ds-modal__body {
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--ds-space-16) var(--ds-space-24) var(--ds-space-24);
  overflow-y: auto;
  color: var(--ds-text);
}

.ds-modal__body > :first-child,
.ds-slideover__body > :first-child {
  margin-top: 0;
}

.ds-modal__body > :last-child,
.ds-slideover__body > :last-child {
  margin-bottom: 0;
}

.ds-modal__footer,
.ds-slideover__footer {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--ds-space-12);
  padding: var(--ds-space-16) var(--ds-space-24);
  border-top: 1px solid var(--ds-border-subtle);
}

.ds-modal__footer form,
.ds-slideover__footer form {
  margin: 0;
}

.ds-slideover {
  padding: 0;
}

.ds-slideover[open] {
  display: flex;
  justify-content: flex-end;
}

.ds-slideover__panel {
  display: flex;
  flex-direction: column;
  width: min(480px, 100%);
  height: 100%;
  background: var(--ds-surface);
  box-shadow: var(--ds-shadow-raised);
  animation: ds-slideover-in 240ms ease-out;
}

.ds-slideover__header {
  align-items: center;
  padding: var(--ds-space-16) var(--ds-space-24);
  border-bottom: 1px solid var(--ds-border-subtle);
}

.ds-slideover__close {
  margin: 0 calc(-1 * var(--ds-space-4)) 0 0;
}

.ds-slideover__body {
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--ds-space-24);
  overflow-y: auto;
}

@keyframes ds-modal-in {
  from {
    opacity: 0;
    transform: translateY(var(--ds-space-8));
  }
}

@keyframes ds-slideover-in {
  from {
    transform: translateX(100%);
  }
}

/* --------------------------------------------------------------------------
   Pagination (pagination.html)
   -------------------------------------------------------------------------- */

.ds-pagination__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ds-pagination__page,
.ds-pagination__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-4);
  min-width: 40px;
  height: 40px;
  padding: 0 var(--ds-space-12);
  border-radius: var(--ds-radius-pill);
  color: var(--ds-text);
  font-size: var(--ds-type-small-size);
  line-height: 20px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  transition: background-color var(--ds-motion-hover) ease;
}

.ds-pagination__step .ds-icon {
  width: var(--ds-space-16);
  height: var(--ds-space-16);
}

a.ds-pagination__page:hover,
a.ds-pagination__step:hover {
  background: color-mix(
    in srgb,
    var(--ds-text) var(--ds-hover-tint),
    transparent
  );
}

.ds-pagination__page[aria-current="page"],
.ds-pagination__page[aria-current="page"]:hover {
  background: var(--ds-text);
  color: var(--ds-surface);
}

.ds-pagination__step--disabled {
  color: var(--ds-text-muted);
  opacity: 0.5;
  cursor: default;
}

.ds-pagination__ellipsis {
  min-width: var(--ds-space-24);
  color: var(--ds-text-muted);
  text-align: center;
}

/* --------------------------------------------------------------------------
   Switch and radio (switch.html, radio.html), fieldset
   -------------------------------------------------------------------------- */

.ds-switch,
.ds-radio {
  position: relative;
  display: inline-flex;
  align-items: flex-start;
  gap: var(--ds-space-12);
  color: var(--ds-text);
  font-size: var(--ds-type-small-size);
  line-height: var(--ds-type-small-leading);
  cursor: pointer;
}

.ds-switch__track {
  position: relative;
  flex: none;
  width: 40px;
  height: var(--ds-space-24);
  border-radius: var(--ds-radius-pill);
  background: var(--ds-text-muted);
  transition: background-color var(--ds-motion-hover) ease;
}

.ds-switch__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: var(--ds-radius-pill);
  background: var(--ds-surface);
  box-shadow: var(--ds-shadow-card);
  transition: transform var(--ds-motion-hover) ease;
}

.ds-switch__input:checked + .ds-switch__track {
  background: var(--ds-text);
}

.ds-switch__input:checked + .ds-switch__track .ds-switch__thumb {
  transform: translateX(var(--ds-space-16));
}

.ds-switch__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ds-switch__label,
.ds-radio__label {
  font-weight: 500;
}

.ds-switch__helper {
  color: var(--ds-text-muted);
  font-size: 13px;
  line-height: 18px;
}

.ds-switch__input:disabled + .ds-switch__track,
.ds-switch__input:disabled ~ .ds-switch__text,
.ds-radio__input:disabled + .ds-radio__dot,
.ds-radio__input:disabled ~ .ds-radio__label {
  opacity: 0.4;
  cursor: not-allowed;
}

.ds-radio__dot {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  /* Muted ink ring: the control boundary keeps 3:1 contrast on the surface and the ground */
  border: 1.5px solid var(--ds-text-muted);
  border-radius: var(--ds-radius-pill);
  background: var(--ds-surface);
  transition:
    background-color var(--ds-motion-hover) ease,
    border-color var(--ds-motion-hover) ease;
}

.ds-radio__dot::after {
  content: "";
  width: var(--ds-space-8);
  height: var(--ds-space-8);
  border-radius: var(--ds-radius-pill);
  background: var(--ds-surface);
  transform: scale(0);
  transition: transform var(--ds-motion-hover) ease;
}

.ds-radio:hover .ds-radio__dot {
  border-color: var(--ds-text);
}

.ds-radio__input:checked + .ds-radio__dot {
  border-color: var(--ds-text);
  background: var(--ds-text);
}

.ds-radio__input:checked + .ds-radio__dot::after {
  transform: scale(1);
}

.ds-fieldset {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-12);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.ds-legend {
  margin-bottom: var(--ds-space-4);
  padding: 0;
  color: var(--ds-text);
  font-size: var(--ds-type-small-size);
  line-height: var(--ds-type-small-leading);
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   File input (file_input.html): the native control, styled
   -------------------------------------------------------------------------- */

.ds-file__input {
  width: 100%;
  max-width: 100%;
  padding: var(--ds-space-8);
  border: 1px dashed var(--ds-border);
  border-radius: var(--ds-radius-12);
  background: var(--ds-surface);
  color: var(--ds-text-muted);
  font-family: var(--ds-font-family);
  font-size: var(--ds-type-small-size);
  line-height: var(--ds-type-small-leading);
  cursor: pointer;
  transition: border-color var(--ds-motion-hover) ease;
}

.ds-file__input:hover {
  border-color: var(--ds-text-secondary);
}

.ds-file__input::file-selector-button {
  margin-right: var(--ds-space-12);
  padding: var(--ds-space-8) var(--ds-space-16);
  border: 1px solid var(--ds-border-subtle);
  border-radius: var(--ds-radius-pill);
  background: var(--ds-surface-subtle);
  color: var(--ds-text);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}

.ds-file__input:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.ds-field--error .ds-file__input {
  border-color: var(--ds-status-action-text);
}

.ds-file__current {
  display: flex;
  align-items: center;
  gap: var(--ds-space-8);
  min-width: 0;
  margin: 0;
  color: var(--ds-text-muted);
  font-size: var(--ds-type-small-size);
  line-height: var(--ds-type-small-leading);
}

.ds-file__current .ds-icon {
  width: var(--ds-space-16);
  height: var(--ds-space-16);
}

.ds-file__current a {
  overflow: hidden;
  color: var(--ds-text);
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Copy field (copy_field.html)
   -------------------------------------------------------------------------- */

.ds-copy__control {
  display: flex;
  align-items: center;
  gap: var(--ds-space-8);
  padding: var(--ds-space-4) var(--ds-space-4) var(--ds-space-4)
    var(--ds-space-16);
  border: 1px solid var(--ds-border-subtle);
  border-radius: var(--ds-radius-12);
  background: var(--ds-surface-subtle);
}

.ds-copy__input {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ds-text);
  font-family: var(--ds-font-family);
  font-size: var(--ds-type-small-size);
  line-height: var(--ds-type-small-leading);
  text-overflow: ellipsis;
}

.ds-copy__input:focus {
  outline: none;
}

.ds-copy .ds-copy__button {
  flex: none;
  min-height: 40px;
  border-radius: var(--ds-radius-12);
}

.ds-copy__button[hidden] {
  display: none;
}

.ds-copy__button .ds-icon {
  width: var(--ds-space-16);
  height: var(--ds-space-16);
}

.ds-copy__status {
  margin: 0;
  color: var(--ds-accent-strong);
  font-size: 13px;
  line-height: 18px;
}

/* Empty live region stays in the DOM for screen readers without taking the field gap */
.ds-copy__status:empty {
  margin-top: calc(-1 * var(--ds-space-8));
}

/* --------------------------------------------------------------------------
   Back link and breadcrumbs (back_link.html, breadcrumbs.html)
   -------------------------------------------------------------------------- */

.ds-back {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-4);
  border-radius: var(--ds-radius-12);
  color: var(--ds-text-muted);
  font-size: var(--ds-type-small-size);
  line-height: 20px;
  font-weight: 500;
  text-decoration: none;
  transition: color var(--ds-motion-hover) ease;
}

.ds-back:hover {
  color: var(--ds-text);
}

.ds-back .ds-icon {
  width: var(--ds-space-16);
  height: var(--ds-space-16);
}

.ds-breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-space-4);
  margin: 0;
  padding: 0;
  color: var(--ds-text-muted);
  font-size: var(--ds-type-small-size);
  line-height: 20px;
  list-style: none;
}

.ds-breadcrumbs__item {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-4);
  min-width: 0;
}

.ds-breadcrumbs__link {
  border-radius: var(--ds-radius-12);
  color: var(--ds-text-muted);
  text-decoration: none;
}

.ds-breadcrumbs__link:hover {
  color: var(--ds-text);
  text-decoration: underline;
}

.ds-breadcrumbs__item [aria-current="page"] {
  color: var(--ds-text);
  font-weight: 500;
}

.ds-breadcrumbs__sep {
  display: inline-flex;
}

.ds-breadcrumbs__sep .ds-icon {
  width: 14px;
  height: 14px;
}

/* --------------------------------------------------------------------------
   Menu (menu.html): dropdown behind a button
   -------------------------------------------------------------------------- */

.ds-menu {
  position: relative;
  display: inline-flex;
}

.ds-menu__trigger .ds-icon {
  width: var(--ds-space-16);
  height: var(--ds-space-16);
}

.ds-menu__trigger--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: var(--ds-radius-pill);
  background: transparent;
  color: var(--ds-text-muted);
  cursor: pointer;
}

.ds-menu__trigger--icon .ds-icon {
  width: 20px;
  height: 20px;
}

.ds-menu__trigger--icon:hover,
.ds-menu__trigger--icon[aria-expanded="true"] {
  background: color-mix(
    in srgb,
    var(--ds-text) var(--ds-hover-tint),
    transparent
  );
  color: var(--ds-text);
}

.ds-menu__panel {
  position: absolute;
  top: calc(100% + var(--ds-space-8));
  z-index: var(--ds-z-dropdown);
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 200px;
  max-width: min(280px, calc(100vw - 2 * var(--ds-space-16)));
  padding: var(--ds-space-8);
  border: 1px solid var(--ds-border-subtle);
  border-radius: var(--ds-radius-12);
  background: var(--ds-surface);
  box-shadow: var(--ds-shadow-raised);
}

.ds-menu__panel[x-cloak] {
  display: none;
}

.ds-menu__panel--right {
  right: 0;
}

.ds-menu__panel--left {
  left: 0;
}

.ds-menu__form {
  display: flex;
  margin: 0;
}

.ds-menu__item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 10px var(--ds-space-12);
  border: 0;
  border-radius: var(--ds-radius-12);
  background: transparent;
  color: var(--ds-text);
  font-family: var(--ds-font-family);
  font-size: var(--ds-type-small-size);
  line-height: 20px;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.ds-menu__item:hover,
.ds-menu__item:focus {
  background: var(--ds-surface-subtle);
}

.ds-menu__item--danger {
  color: var(--ds-status-action-text);
}

.ds-menu__divider {
  width: 100%;
  margin: var(--ds-space-4) 0;
  border: 0;
  border-top: 1px solid var(--ds-border-subtle);
}

/* --------------------------------------------------------------------------
   Timeline (timeline.html)
   -------------------------------------------------------------------------- */

.ds-timeline {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ds-timeline__item {
  --ds-tone: var(--ds-text-muted);
  position: relative;
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  column-gap: var(--ds-space-16);
  padding-bottom: var(--ds-space-24);
}

.ds-timeline__item:last-child {
  padding-bottom: 0;
}

/* Rail from this dot down to the next */
.ds-timeline__item:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 20px;
  bottom: 0;
  left: 5px;
  width: 2px;
  border-radius: var(--ds-radius-pill);
  background: var(--ds-border-subtle);
}

.ds-timeline__item--active {
  --ds-tone: var(--ds-accent-strong);
}

.ds-timeline__item--success {
  --ds-tone: var(--ds-status-success-text);
}

.ds-timeline__item--warning {
  --ds-tone: var(--ds-status-warning-text);
}

.ds-timeline__item--danger {
  --ds-tone: var(--ds-status-action-text);
}

.ds-timeline__item--info {
  --ds-tone: var(--ds-status-info-text);
}

.ds-timeline__dot {
  width: 12px;
  height: 12px;
  margin-top: 5px;
  border-radius: var(--ds-radius-pill);
  background: var(--ds-tone);
}

.ds-timeline__content {
  min-width: 0;
}

.ds-timeline__title,
.ds-timeline__meta,
.ds-timeline__body {
  margin: 0;
}

.ds-timeline__title {
  color: var(--ds-text);
  font-size: var(--ds-type-small-size);
  line-height: var(--ds-type-small-leading);
  font-weight: 500;
}

.ds-timeline__meta {
  color: var(--ds-text-muted);
  font-size: var(--ds-type-caption-size);
  line-height: var(--ds-type-caption-leading);
}

.ds-timeline__body {
  margin-top: var(--ds-space-4);
  color: var(--ds-text-muted);
  font-size: var(--ds-type-small-size);
  line-height: var(--ds-type-small-leading);
}

/* --------------------------------------------------------------------------
   Stepper (stepper.html): numbered steps, done / current / upcoming
   -------------------------------------------------------------------------- */

.ds-stepper {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ds-stepper__step {
  position: relative;
  display: flex;
  min-width: 0;
}

.ds-stepper__marker {
  position: relative;
  z-index: 1;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1.5px solid var(--ds-border-subtle);
  border-radius: var(--ds-radius-pill);
  background: var(--ds-surface-subtle);
  color: var(--ds-text-muted);
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.ds-stepper__marker .ds-icon {
  width: 14px;
  height: 14px;
}

.ds-stepper__step--done .ds-stepper__marker {
  border-color: var(--ds-text);
  background: var(--ds-text);
  color: var(--ds-surface);
}

.ds-stepper__step--current .ds-stepper__marker {
  border: 2px solid var(--ds-text);
  background: var(--ds-surface);
  color: var(--ds-text);
}

.ds-stepper__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ds-stepper__label {
  color: var(--ds-text-muted);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
}

.ds-stepper__step--done .ds-stepper__label,
.ds-stepper__step--current .ds-stepper__label {
  color: var(--ds-text);
}

.ds-stepper__step--current .ds-stepper__label {
  font-weight: 600;
}

.ds-stepper__description {
  color: var(--ds-text-muted);
  font-size: var(--ds-type-caption-size);
  line-height: var(--ds-type-caption-leading);
}

/* Connectors: a line from the previous marker to this one */
.ds-stepper__step::before {
  content: "";
  position: absolute;
  background: var(--ds-border-subtle);
}

.ds-stepper__step:first-child::before {
  display: none;
}

.ds-stepper__step--done::before,
.ds-stepper__step--current::before {
  background: var(--ds-text);
}

.ds-stepper--horizontal .ds-stepper__step {
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  gap: var(--ds-space-8);
  padding: 0 var(--ds-space-4);
  text-align: center;
}

.ds-stepper--horizontal .ds-stepper__step::before {
  top: 13px;
  right: calc(50% + 18px);
  left: calc(-50% + 18px);
  height: 2px;
}

.ds-stepper--vertical {
  flex-direction: column;
}

.ds-stepper--vertical .ds-stepper__step {
  gap: var(--ds-space-12);
  padding-top: var(--ds-space-24);
}

.ds-stepper--vertical .ds-stepper__step:first-child {
  padding-top: 0;
}

.ds-stepper--vertical .ds-stepper__step::before {
  top: calc(-1 * var(--ds-space-4));
  left: 13px;
  width: 2px;
  height: 28px;
}

.ds-stepper--vertical .ds-stepper__text {
  padding-top: var(--ds-space-4);
}

/* --------------------------------------------------------------------------
   Form layout: .ds-form-grid (1, 2 or 3 columns), .ds-form-section (titled
   group of fields), .ds-form-actions (the submit row)
   -------------------------------------------------------------------------- */

.ds-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ds-space-24) var(--ds-space-16);
}

.ds-form-grid__full {
  grid-column: 1 / -1;
}

/* Grid cells may shrink below their content (WebKit sizes a select to its longest option) */
.ds-form-grid > * {
  min-width: 0;
}

@media (min-width: 768px) {
  .ds-form-grid--2,
  .ds-form-grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .ds-form-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ds-form-section--aside {
    grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
    gap: var(--ds-space-32);
  }
}

.ds-form-section {
  display: grid;
  gap: var(--ds-space-24);
  padding: var(--ds-space-32) 0;
  border-top: 1px solid var(--ds-border-subtle);
}

.ds-form-section:first-child {
  padding-top: 0;
  border-top: 0;
}

.ds-form-section__head {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-4);
}

.ds-form-section__title {
  margin: 0;
  color: var(--ds-text);
  font-size: var(--ds-type-app-h3-size);
  line-height: var(--ds-type-app-h3-leading);
  font-weight: 600;
}

.ds-form-section__description {
  max-width: 640px;
  margin: 0;
  color: var(--ds-text-muted);
  font-size: var(--ds-type-small-size);
  line-height: var(--ds-type-small-leading);
}

.ds-form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--ds-space-12);
  padding-top: var(--ds-space-24);
  border-top: 1px solid var(--ds-border-subtle);
}

/* --------------------------------------------------------------------------
   Rich text editor (CKEditor 5): wrap the widget in .ds-editor. The --ck-*
   variables take the tokens, so the editor follows light and dark. Floating
   balloons (link form) live in .ck-body-wrapper outside the field.
   -------------------------------------------------------------------------- */

.ds-editor,
body:has(.ds-editor) .ck-body-wrapper {
  --ck-color-base-background: var(--ds-surface);
  --ck-color-base-foreground: var(--ds-surface-subtle);
  --ck-color-base-border: var(--ds-border-subtle);
  --ck-color-base-text: var(--ds-text);
  --ck-color-base-action: var(--ds-accent-strong);
  --ck-color-base-active: var(--ds-text);
  --ck-color-base-active-focus: var(--ds-text);
  --ck-color-text: var(--ds-text);
  --ck-color-shadow-drop: transparent;
  --ck-color-shadow-inner: transparent;
  --ck-color-engine-placeholder-text: var(--ds-text-muted);
  --ck-color-toolbar-background: var(--ds-surface-subtle);
  --ck-color-toolbar-border: var(--ds-border-subtle);
  --ck-color-button-default-background: transparent;
  --ck-color-button-default-hover-background: var(--ds-border-subtle);
  --ck-color-button-default-active-background: var(--ds-border-subtle);
  --ck-color-button-on-background: var(--ds-accent-soft);
  --ck-color-button-on-hover-background: var(--ds-accent-soft);
  --ck-color-button-on-active-background: var(--ds-accent-soft);
  --ck-color-button-on-color: var(--ds-text);
  --ck-color-button-save: var(--ds-accent-strong);
  --ck-color-button-cancel: var(--ds-status-action-text);
  --ck-color-split-button-hover-background: var(--ds-border-subtle);
  --ck-color-split-button-hover-border: var(--ds-border);
  --ck-color-dropdown-panel-background: var(--ds-surface);
  --ck-color-dropdown-panel-border: var(--ds-border-subtle);
  --ck-color-list-background: var(--ds-surface);
  --ck-color-list-button-hover-background: var(--ds-surface-subtle);
  --ck-color-list-button-on-background: var(--ds-accent-soft);
  --ck-color-list-button-on-background-focus: var(--ds-accent-soft);
  --ck-color-list-button-on-text: var(--ds-text);
  --ck-color-panel-background: var(--ds-surface);
  --ck-color-panel-border: var(--ds-border-subtle);
  --ck-color-input-background: var(--ds-surface);
  --ck-color-input-border: var(--ds-border-subtle);
  --ck-color-input-text: var(--ds-text);
  --ck-color-input-disabled-background: var(--ds-surface-subtle);
  --ck-color-input-disabled-text: var(--ds-text-muted);
  --ck-color-labeled-field-label-background: var(--ds-surface);
  --ck-color-tooltip-background: var(--ds-inverse);
  --ck-color-tooltip-text: var(--ds-on-inverse);
  --ck-color-link-default: var(--ds-text);
  --ck-color-focus-border: var(--ds-text);
  --ck-color-focus-outer-shadow: transparent;
  --ck-focus-ring: 1px solid var(--ds-text);
  --ck-inner-shadow: none;
  --ck-drop-shadow: none;
  --ck-border-radius: var(--ds-radius-12);
  --ck-font-face: var(--ds-font-family);
}

.ds-editor {
  min-width: 0;
  color: var(--ds-text);
}

.ds-editor .ck.ck-editor {
  width: 100%;
}

.ds-editor .ck.ck-editor__top .ck-sticky-panel .ck-toolbar {
  border-radius: var(--ds-radius-12) var(--ds-radius-12) 0 0;
}

.ds-editor .ck.ck-editor__main > .ck-editor__editable {
  min-height: 160px;
  padding: var(--ds-space-4) var(--ds-space-16);
  border-radius: 0 0 var(--ds-radius-12) var(--ds-radius-12);
  background: var(--ds-surface);
  color: var(--ds-text);
}

.ds-editor .ck.ck-editor__main > .ck-editor__editable:not(.ck-focused) {
  border-color: var(--ds-border-subtle);
}

.ds-editor .ck.ck-editor__main > .ck-editor__editable.ck-focused {
  border-color: var(--ds-text);
}

.ds-field--error
  .ds-editor
  .ck.ck-editor__main
  > .ck-editor__editable:not(.ck-focused) {
  border-color: var(--ds-status-action-text);
}

.ds-editor .ck .ck-placeholder::before,
.ds-editor .ck.ck-placeholder::before {
  color: var(--ds-text-muted);
}

/* django-ckeditor-5 adds a word count line; the design leaves it out */
.ds-editor .word-count {
  display: none;
}

/* --------------------------------------------------------------------------
   Prose: rendered rich text (blog bodies, listing descriptions, proposals),
   and the editor's own content area so what you type looks as it will read.
   -------------------------------------------------------------------------- */

.ds-prose,
.ds-editor .ck-content {
  color: var(--ds-text);
  font-size: var(--ds-type-body-size);
  line-height: var(--ds-type-body-leading);
  overflow-wrap: break-word;
}

.ds-app .ds-prose,
.ds-app .ds-editor .ck-content {
  font-size: 15px;
  line-height: 24px;
}

.ds-prose
  :where(p, ul, ol, blockquote, pre, table, figure, hr, h1, h2, h3, h4) {
  margin: 0;
}

.ds-prose > * + *,
.ds-editor .ck-content > * + * {
  margin-top: var(--ds-space-16);
}

.ds-prose :where(h1, h2),
.ds-editor .ck-content :where(h1, h2) {
  font-size: var(--ds-type-h3-size);
  line-height: var(--ds-type-h3-leading);
  font-weight: 600;
}

.ds-prose h3,
.ds-editor .ck-content h3 {
  font-size: var(--ds-type-app-h3-size);
  line-height: var(--ds-type-app-h3-leading);
  font-weight: 600;
}

.ds-prose h4,
.ds-editor .ck-content h4 {
  font-size: var(--ds-type-body-size);
  line-height: var(--ds-type-body-leading);
  font-weight: 600;
}

.ds-prose > * + :where(h1, h2, h3, h4) {
  margin-top: var(--ds-space-32);
}

.ds-prose a,
.ds-editor .ck-content a {
  color: var(--ds-text);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--ds-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.ds-prose a:hover {
  text-decoration-color: currentColor;
}

.ds-prose strong,
.ds-prose b {
  font-weight: 600;
}

.ds-prose :where(ul, ol),
.ds-editor .ck-content :where(ul, ol) {
  padding-left: var(--ds-space-24);
}

.ds-prose li + li {
  margin-top: var(--ds-space-4);
}

.ds-prose li > :where(ul, ol) {
  margin-top: var(--ds-space-4);
}

.ds-prose blockquote,
.ds-editor .ck-content blockquote {
  padding: var(--ds-space-4) 0 var(--ds-space-4) var(--ds-space-16);
  border-left: 3px solid var(--ds-accent);
  color: var(--ds-text-muted);
  font-style: normal;
}

.ds-prose code,
.ds-editor .ck-content code {
  padding: 0 var(--ds-space-4);
  border-radius: var(--ds-space-4);
  background: var(--ds-surface-subtle);
  font-size: 0.9em;
}

.ds-prose pre {
  max-width: 100%;
  padding: var(--ds-space-16);
  overflow-x: auto;
  border-radius: var(--ds-radius-12);
  background: var(--ds-surface-subtle);
  font-size: var(--ds-type-small-size);
  line-height: var(--ds-type-small-leading);
}

.ds-prose pre code {
  padding: 0;
  background: transparent;
}

.ds-prose table,
.ds-editor .ck-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ds-type-small-size);
  line-height: var(--ds-type-small-leading);
}

.ds-prose :where(th, td) {
  padding: var(--ds-space-8) var(--ds-space-12);
  border-bottom: 1px solid var(--ds-border-subtle);
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}

.ds-prose th {
  color: var(--ds-text-muted);
  font-weight: 600;
}

.ds-prose img {
  max-width: 100%;
  height: auto;
  border-radius: var(--ds-radius-12);
}

.ds-prose figcaption {
  margin-top: var(--ds-space-8);
  color: var(--ds-text-muted);
  font-size: var(--ds-type-small-size);
}

.ds-prose hr {
  border: 0;
  border-top: 1px solid var(--ds-border-subtle);
}

/* --------------------------------------------------------------------------
   App scope (onboarding, founder dashboard): app design values.
   Remaps shared tokens so the same components take the app look.
   -------------------------------------------------------------------------- */

.ds-app {
  --ds-text-secondary: var(--ds-text-muted);
  /* The pale tertiary grey (#9CA39D light, #6F6F6F dark) fails AA for text; app screens use the muted grey */
  --ds-text-tertiary: var(--ds-text-muted);
  --ds-border: var(--ds-border-subtle);
}

.ds-app .ds-label {
  color: var(--ds-text-secondary);
}

.ds-app .ds-input,
.ds-app .ds-select {
  height: 44px;
}

.ds-app .ds-input,
.ds-app .ds-select,
.ds-app .ds-textarea {
  font-size: 15px;
  line-height: 22px;
}

.ds-app .ds-btn:not(.ds-btn--text) {
  padding: var(--ds-space-12) 20px;
}

.ds-app .ds-btn {
  font-size: var(--ds-type-small-size);
  line-height: 20px;
  font-weight: 500;
}

/* App primary = ink. Text on surface inverts in both modes (#1E1E1F on white; #F5F5F5 on the dark card) */
.ds-app .ds-btn--ink {
  background: var(--ds-text);
  color: var(--ds-surface);
}

.ds-app .ds-btn--ink:hover {
  background: color-mix(in srgb, var(--ds-text), black var(--ds-hover-tint));
}

/* --------------------------------------------------------------------------
   Tooltip
   -------------------------------------------------------------------------- */

.ds-tooltip {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
}

.ds-tooltip__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ds-space-24);
  height: var(--ds-space-24);
  padding: 0;
  border: 0;
  border-radius: var(--ds-radius-pill);
  background: transparent;
  color: var(--ds-text-secondary);
  cursor: pointer;
  transition: color var(--ds-motion-hover) ease;
}

.ds-tooltip__trigger:hover {
  color: var(--ds-text);
}

.ds-tooltip__body {
  position: absolute;
  bottom: calc(100% + var(--ds-space-8));
  left: 50%;
  z-index: 20;
  width: max-content;
  max-width: 280px;
  padding: var(--ds-space-12) var(--ds-space-16);
  border-radius: var(--ds-radius-12);
  background: var(--ds-inverse);
  color: var(--ds-on-inverse);
  box-shadow: var(--ds-shadow-card);
  font-size: var(--ds-type-small-size);
  line-height: var(--ds-type-small-leading);
  font-weight: 400;
  text-align: left;
  translate: -50% 0;
}

/* --------------------------------------------------------------------------
   App page patterns: .ds-section-head (title and link above a list),
   .ds-meta (muted meta line, with small icons), .ds-link (quiet text link
   with a chevron), .ds-kv (label and value tiles), .ds-tags (a row of chips)
   -------------------------------------------------------------------------- */

.ds-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-8) var(--ds-space-12);
}

.ds-section-head__title {
  margin: 0;
  color: var(--ds-text);
  font-size: var(--ds-type-app-h3-size);
  line-height: var(--ds-type-app-h3-leading);
  font-weight: 600;
}

.ds-meta {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-space-4);
  margin: 0;
  color: var(--ds-text-muted);
  font-size: 13px;
  line-height: 18px;
}

.ds-meta .ds-icon {
  width: 14px;
  height: 14px;
}

.ds-link {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-4);
  color: var(--ds-text-muted);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  text-decoration: none;
}

.ds-link .ds-icon {
  width: var(--ds-space-12);
  height: var(--ds-space-12);
}

.ds-link:hover {
  color: var(--ds-text);
  text-decoration: underline;
}

.ds-link:focus-visible {
  outline: 2px solid var(--ds-focus-ring);
  outline-offset: 2px;
  border-radius: var(--ds-space-4);
}

.ds-link--accent {
  color: var(--ds-accent-strong);
}

.ds-kv {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--ds-space-12);
  margin: 0;
}

.ds-kv__item {
  min-width: 0;
  padding: var(--ds-space-12) var(--ds-space-16);
  border-radius: var(--ds-radius-12);
  background: var(--ds-surface-subtle);
}

.ds-kv__item dt {
  color: var(--ds-text-muted);
  font-size: 13px;
  line-height: 18px;
}

.ds-kv__item dd {
  margin: var(--ds-space-4) 0 0;
  color: var(--ds-text);
  font-size: var(--ds-type-body-size);
  line-height: var(--ds-type-button-leading);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.ds-kv__item dd small {
  color: var(--ds-text-muted);
  font-size: 13px;
  font-weight: 400;
}

.ds-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-space-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ds-tags .ds-chip {
  max-width: 100%;
  white-space: normal;
}

/* Destructive button (delete, decline, withdraw): the danger tone, inverting in dark mode like the ink button */
.ds-btn--danger {
  background: var(--ds-status-action-text);
  color: var(--ds-surface);
}

.ds-btn--danger:hover {
  background: color-mix(
    in srgb,
    var(--ds-status-action-text),
    black var(--ds-hover-tint)
  );
}

/* Quiet destructive text button */
.ds-btn--text.ds-btn--danger-text {
  color: var(--ds-status-action-text);
}

/* --------------------------------------------------------------------------
   Public profile (components/_founder_public_profile.html and
   _operator_public_profile.html): the body of the HTMX profile slide-over and
   of the profile page. Lives here so the swapped-in panel is styled at once.
   -------------------------------------------------------------------------- */

.ds-profile {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-24);
  color: var(--ds-text);
}

.ds-profile--page {
  width: 100%;
  max-width: 720px;
}

.ds-profile__error {
  margin: 0;
  color: var(--ds-text);
  font-size: var(--ds-type-small-size);
  line-height: var(--ds-type-small-leading);
}

.ds-profile__head {
  display: flex;
  align-items: center;
  gap: var(--ds-space-16);
}

.ds-profile__identity {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-4);
  min-width: 0;
}

.ds-profile__name {
  display: flex;
  align-items: center;
  gap: var(--ds-space-8);
  margin: 0;
  color: var(--ds-text);
  font-size: var(--ds-type-figure-size);
  line-height: var(--ds-type-figure-leading);
  font-weight: 600;
}

.ds-profile__name-text {
  min-width: 0;
  overflow-wrap: anywhere;
}

.ds-profile__verified {
  display: inline-flex;
  color: var(--ds-status-info-text);
}

.ds-profile__sub {
  margin: 0;
  color: var(--ds-text-muted);
  font-size: var(--ds-type-small-size);
  line-height: 20px;
}

.ds-profile__website {
  color: var(--ds-text);
  font-size: 13px;
  line-height: 18px;
  text-decoration: underline;
  text-decoration-color: var(--ds-accent);
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

.ds-profile__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-8);
}

.ds-profile__btn .ds-icon {
  width: var(--ds-space-16);
  height: var(--ds-space-16);
}

.ds-profile__section {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-12);
  padding-top: var(--ds-space-24);
  border-top: 1px solid var(--ds-border-subtle);
}

.ds-profile__label {
  margin: 0;
  color: var(--ds-text-muted);
}

.ds-profile__text {
  margin: 0;
  font-size: 15px;
  line-height: var(--ds-type-button-leading);
  overflow-wrap: anywhere;
}

.ds-profile__kv {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ds-profile__links,
.ds-profile__engagements {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ds-profile__engagements {
  gap: var(--ds-space-8);
}

.ds-profile__link {
  display: flex;
  align-items: center;
  gap: var(--ds-space-12);
  padding: var(--ds-space-12) 0;
  border-bottom: 1px solid var(--ds-border-subtle);
  color: var(--ds-text);
  font-size: var(--ds-type-small-size);
  line-height: 20px;
  text-decoration: none;
}

.ds-profile__links > li:last-child > .ds-profile__link,
.ds-profile__links > .ds-profile__link:last-child {
  border-bottom: 0;
}

a.ds-profile__link:hover .ds-profile__link-label {
  text-decoration: underline;
}

a.ds-profile__link:focus-visible,
.ds-profile__video:focus-visible,
.ds-profile__website:focus-visible {
  outline: 2px solid var(--ds-focus-ring);
  outline-offset: 2px;
  border-radius: var(--ds-space-4);
}

.ds-profile__link .ds-icon {
  width: 18px;
  height: 18px;
}

.ds-profile__link .ds-icon--external {
  width: var(--ds-space-16);
  height: var(--ds-space-16);
  color: var(--ds-text-muted);
}

.ds-profile__link-label {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.ds-profile__link--locked {
  color: var(--ds-text-muted);
}

.ds-profile__private {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-4);
  color: var(--ds-text-muted);
  font-size: var(--ds-type-caption-size);
  line-height: var(--ds-type-caption-leading);
}

.ds-profile__private .ds-icon {
  width: 14px;
  height: 14px;
}

.ds-profile__signal {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-4);
}

.ds-profile__signal a {
  color: var(--ds-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ds-profile__video {
  display: flex;
  align-items: center;
  gap: var(--ds-space-12);
  padding: var(--ds-space-12) var(--ds-space-16);
  border-radius: var(--ds-radius-12);
  background: var(--ds-inverse);
  color: var(--ds-on-inverse);
  font-size: var(--ds-type-small-size);
  line-height: 20px;
  font-weight: 600;
  text-decoration: none;
}

.ds-profile__video-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ds-space-32);
  height: var(--ds-space-32);
  border-radius: var(--ds-radius-pill);
  background: var(--ds-accent);
  color: var(--ds-on-accent);
}

.ds-profile__video-icon .ds-icon {
  width: var(--ds-space-16);
  height: var(--ds-space-16);
}

.ds-profile__engagement {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ds-space-4);
  padding: var(--ds-space-12) var(--ds-space-16);
  border-radius: var(--ds-radius-12);
  background: var(--ds-surface-subtle);
}

.ds-profile__engagement-company {
  margin: 0;
  font-size: var(--ds-type-small-size);
  line-height: 20px;
  font-weight: 600;
}

.ds-profile__engagement-work {
  margin: 0;
  font-size: 13px;
  line-height: 20px;
  overflow-wrap: anywhere;
}

.ds-profile__engagement .ds-chip {
  max-width: 100%;
  white-space: normal;
}

.ds-profile__since {
  margin: 0;
  color: var(--ds-text-muted);
  font-size: var(--ds-type-caption-size);
  line-height: var(--ds-type-caption-leading);
  text-align: center;
}

@media (max-width: 479px) {
  .ds-profile__kv {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1279px) {
  .ds-nav__bar {
    gap: var(--ds-space-24);
  }
}

@media (max-width: 767px) {
  .ds-quote {
    padding: var(--ds-space-24);
  }

  .ds-strip {
    padding: var(--ds-space-12) calc(var(--ds-gutter) + var(--ds-space-32))
      var(--ds-space-12) var(--ds-gutter);
    text-align: left;
  }

  .ds-strip__link {
    white-space: normal;
  }

  .ds-faq__answer {
    padding-right: 0;
  }

  .ds-stage__item {
    padding: var(--ds-space-8) var(--ds-space-12);
    font-size: var(--ds-type-caption-size);
  }

  .ds-stage__label {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    line-height: var(--ds-type-caption-leading);
  }

  .ds-tooltip__body {
    max-width: 240px;
  }

  .ds-toasts:not(.ds-toasts--static) {
    right: var(--ds-space-16);
    bottom: var(--ds-space-16);
    left: var(--ds-space-16);
    width: auto;
  }

  .ds-table th:first-child,
  .ds-table td:first-child {
    padding-left: var(--ds-space-16);
  }

  .ds-table th:last-child,
  .ds-table td:last-child {
    padding-right: var(--ds-space-16);
  }

  .ds-table__caption {
    padding: var(--ds-space-16) var(--ds-space-16) 0;
  }

  .ds-empty {
    padding: var(--ds-space-32) var(--ds-space-16);
  }

  .ds-modal {
    padding: var(--ds-space-16);
  }

  .ds-modal__header {
    padding: var(--ds-space-16) var(--ds-space-16) 0;
  }

  .ds-modal__body {
    padding: var(--ds-space-12) var(--ds-space-16) var(--ds-space-16);
  }

  .ds-modal__footer,
  .ds-slideover__footer {
    padding: var(--ds-space-12) var(--ds-space-16);
  }

  .ds-slideover__panel {
    width: 100%;
  }

  .ds-slideover__header {
    padding: var(--ds-space-12) var(--ds-space-16);
  }

  .ds-slideover__body {
    padding: var(--ds-space-16);
  }

  /* Previous and Next keep their names for screen readers and show only the chevron */
  .ds-pagination__step-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .ds-pagination__step {
    padding: 0;
  }

  .ds-stepper--horizontal .ds-stepper__label {
    font-size: var(--ds-type-caption-size);
    line-height: var(--ds-type-caption-leading);
  }

  .ds-stepper--horizontal .ds-stepper__description {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Reduced motion: no transitions, no hover lift
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .ds *,
  .ds *::before,
  .ds *::after,
  [class^="ds-"],
  [class*=" ds-"] {
    transition: none !important;
    animation: none !important;
  }

  .ds-card:hover,
  a.ds-stat:hover {
    transform: none;
  }

  .ds-switch__thumb,
  .ds-radio__dot::after {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Appearance menu (theme_toggle.html)
   -------------------------------------------------------------------------- */

.ds-theme__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--ds-border-subtle);
  border-radius: var(--ds-radius-pill);
  background: transparent;
  color: var(--ds-text);
  cursor: pointer;
  transition: background-color var(--ds-motion-hover) ease;
}

.ds-theme__trigger:hover,
.ds-theme__trigger[aria-expanded="true"] {
  background: color-mix(
    in srgb,
    var(--ds-text) var(--ds-hover-tint),
    transparent
  );
}

.ds-theme__trigger:focus-visible {
  outline: 2px solid var(--ds-focus-ring);
  outline-offset: 2px;
}

/* The trigger shows the icon of the mode in force, read from <html data-theme> (set before paint by
   _theme_boot.html), so it is right before Alpine starts and never swaps on load */
.ds-theme__icon {
  display: none;
  align-items: center;
}

.ds-theme__icon .ds-icon {
  width: 20px;
  height: 20px;
}

html:not([data-theme]) .ds-theme__icon[data-mode="system"],
html[data-theme="light"] .ds-theme__icon[data-mode="light"],
html[data-theme="dark"] .ds-theme__icon[data-mode="dark"] {
  display: inline-flex;
}

.ds-theme__panel {
  min-width: 180px;
}

.ds-theme__heading {
  margin: 0;
  padding: var(--ds-space-4) var(--ds-space-12);
  color: var(--ds-text-muted);
  font-size: var(--ds-type-eyebrow-size);
  line-height: var(--ds-type-eyebrow-leading);
  font-weight: 600;
  letter-spacing: var(--ds-type-eyebrow-tracking);
  text-transform: uppercase;
}

.ds-theme__item {
  gap: var(--ds-space-8);
}

.ds-theme__item > .ds-icon {
  width: var(--ds-space-16);
  height: var(--ds-space-16);
  color: var(--ds-text-muted);
}

.ds-theme__item[aria-checked="true"] {
  font-weight: 600;
}

.ds-theme__check {
  display: inline-flex;
  margin-left: auto;
  color: var(--ds-accent-strong);
  opacity: 0;
}

.ds-theme__check .ds-icon {
  width: var(--ds-space-16);
  height: var(--ds-space-16);
}

.ds-theme__item[aria-checked="true"] .ds-theme__check {
  opacity: 1;
}

/* In the public nav: after the links on desktop; beside the hamburger on phones, where the links are in the drawer */
.ds-nav__theme {
  flex: none;
  margin-left: var(--ds-space-24);
}

@media (max-width: 1023px) {
  .ds-nav__theme {
    margin-left: auto;
    margin-right: calc(-1 * var(--ds-space-16));
  }
}