/* ============================================================
   Atlassian Design System (ADS) — Komponenten
   Reine CSS-Klassen (.ads-*), nutzbar im Vanilla-JS-SPA.
   Setzt ads-tokens.css voraus.
   ============================================================ */

/* ---------- Basis / Reset-Helfer ---------- */
.ads-root,
.ads-layout {
  font-family: var(--ads-font-family);
  font-size: var(--ads-font-size-100);
  line-height: var(--ads-line-height-200);
  color: var(--ads-text);
  background: var(--ads-background);
}

.ads-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--ads-space-300);
}

/* ============================================================
   Typografie
   ============================================================ */
.ads-h1, .ads-display {
  font-size: var(--ads-font-size-600);
  line-height: var(--ads-line-height-600);
  font-weight: var(--ads-font-weight-medium);
  color: var(--ads-text);
  margin: 0 0 var(--ads-space-200);
}
.ads-h2 {
  font-size: var(--ads-font-size-500);
  line-height: var(--ads-line-height-500);
  font-weight: var(--ads-font-weight-medium);
  color: var(--ads-text);
  margin: 0 0 var(--ads-space-200);
}
.ads-h3 {
  font-size: var(--ads-font-size-400);
  line-height: var(--ads-line-height-400);
  font-weight: var(--ads-font-weight-semibold);
  color: var(--ads-text);
  margin: 0 0 var(--ads-space-150);
}
.ads-h4 {
  font-size: var(--ads-font-size-300);
  line-height: var(--ads-line-height-300);
  font-weight: var(--ads-font-weight-semibold);
  color: var(--ads-text);
  margin: 0 0 var(--ads-space-100);
}
.ads-text-body    { font-size: var(--ads-font-size-100); color: var(--ads-text); }
.ads-text-small   { font-size: var(--ads-font-size-75);  color: var(--ads-text-subtle); }
.ads-text-subtle  { color: var(--ads-text-subtle); }
.ads-text-subtlest { color: var(--ads-text-subtlest); }
.ads-text-brand   { color: var(--ads-text-brand); }
.ads-link {
  color: var(--ads-text-link);
  text-decoration: none;
  cursor: pointer;
}
.ads-link:hover { text-decoration: underline; }

/* ============================================================
   Button — .ads-btn
   Varianten: primary | subtle | danger | link | warning
   Größen: .ads-btn-sm | .ads-btn-lg
   ============================================================ */
.ads-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ads-space-075);
  box-sizing: border-box;
  height: 32px;
  padding: 0 var(--ads-space-150);
  border: none;
  border-radius: var(--ads-radius-100);
  font-family: var(--ads-font-family);
  font-size: var(--ads-font-size-100);
  font-weight: var(--ads-font-weight-medium);
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
  /* Default = standard/neutral button */
  background: var(--ads-background-neutral);
  color: var(--ads-text);
}
.ads-btn:hover    { background: var(--ads-surface-pressed); }
.ads-btn:active   { background: var(--ads-surface-pressed); }
.ads-btn:focus-visible {
  outline: none;
  box-shadow: var(--ads-shadow-focus);
}
.ads-btn:disabled,
.ads-btn.is-disabled {
  background: var(--ads-background-neutral);
  color: var(--ads-text-disabled);
  cursor: not-allowed;
  opacity: 0.7;
}

.ads-btn-primary {
  background: var(--ads-color-brand);
  color: #FFFFFF;
}
.ads-btn-primary:hover  { background: var(--ads-color-brand-hover); }
.ads-btn-primary:active { background: var(--ads-color-brand-pressed); }

.ads-btn-subtle {
  background: transparent;
  color: var(--ads-text-subtle);
}
.ads-btn-subtle:hover  { background: var(--ads-surface-hovered); }
.ads-btn-subtle:active { background: var(--ads-surface-pressed); }

.ads-btn-danger {
  background: var(--ads-color-danger);
  color: #FFFFFF;
}
.ads-btn-danger:hover  { background: var(--ads-color-danger-hover); }
.ads-btn-danger:active { background: var(--ads-color-danger-pressed); }

.ads-btn-warning {
  background: var(--ads-color-warning);
  color: var(--ads-N800);
}
.ads-btn-warning:hover { background: var(--ads-color-warning-hover); }

.ads-btn-link {
  background: transparent;
  color: var(--ads-text-link);
  padding: 0 var(--ads-space-050);
  height: auto;
}
.ads-btn-link:hover { background: transparent; text-decoration: underline; }

.ads-btn-sm { height: 24px; padding: 0 var(--ads-space-100); font-size: var(--ads-font-size-75); }
.ads-btn-lg { height: 40px; padding: 0 var(--ads-space-200); font-size: var(--ads-font-size-200); }

.ads-btn-block { display: flex; width: 100%; }

/* ============================================================
   Table — .ads-table
   Modifier: .ads-table-striped | .ads-table-compact
   ============================================================ */
.ads-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ads-font-size-100);
  color: var(--ads-text);
}
.ads-table thead th {
  text-align: left;
  font-size: var(--ads-font-size-75);
  font-weight: var(--ads-font-weight-bold);
  color: var(--ads-text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: var(--ads-space-100) var(--ads-space-150);
  border-bottom: 2px solid var(--ads-border);
  white-space: nowrap;
}
.ads-table tbody td {
  padding: var(--ads-space-100) var(--ads-space-150);
  border-bottom: 1px solid var(--ads-border-subtle);
  vertical-align: middle;
}
.ads-table tbody tr:hover { background: var(--ads-surface-hovered); }
.ads-table-striped tbody tr:nth-child(even) { background: var(--ads-surface-sunken); }
.ads-table-striped tbody tr:nth-child(even):hover { background: var(--ads-surface-hovered); }
.ads-table-compact thead th,
.ads-table-compact tbody td {
  padding: var(--ads-space-050) var(--ads-space-100);
}

/* ============================================================
   Side Navigation — .ads-nav
   ============================================================ */
.ads-nav {
  width: 240px;
  box-sizing: border-box;
  padding: var(--ads-space-150) var(--ads-space-100);
  background: var(--ads-surface-sunken);
  border-right: 1px solid var(--ads-border);
  display: flex;
  flex-direction: column;
  gap: var(--ads-space-025);
}
.ads-nav-section-title {
  font-size: var(--ads-font-size-75);
  font-weight: var(--ads-font-weight-bold);
  color: var(--ads-text-subtlest);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: var(--ads-space-150) var(--ads-space-150) var(--ads-space-050);
}
.ads-nav-item {
  display: flex;
  align-items: center;
  gap: var(--ads-space-100);
  padding: var(--ads-space-100) var(--ads-space-150);
  border-radius: var(--ads-radius-100);
  color: var(--ads-text-subtle);
  font-size: var(--ads-font-size-100);
  font-weight: var(--ads-font-weight-medium);
  text-decoration: none;
  cursor: pointer;
  border: none;
  background: transparent;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  transition: background-color 0.1s ease-in-out;
}
.ads-nav-item:hover { background: var(--ads-surface-hovered); color: var(--ads-text); }
.ads-nav-item.is-active,
.ads-nav-item[aria-current="page"] {
  background: var(--ads-color-brand-subtle);
  color: var(--ads-text-brand);
  font-weight: var(--ads-font-weight-semibold);
  box-shadow: inset 2px 0 0 var(--ads-color-brand);
}
.ads-nav-item svg { width: 16px; height: 16px; flex: 0 0 auto; }

/* ============================================================
   Modal — .ads-modal
   ============================================================ */
.ads-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(9, 30, 66, 0.54);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ads-space-400);
  z-index: 1000;
}
.ads-modal {
  background: var(--ads-surface-overlay);
  border-radius: var(--ads-radius-300);
  box-shadow: var(--ads-shadow-overlay);
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ads-modal-lg { max-width: 760px; }
.ads-modal-header {
  padding: var(--ads-space-300) var(--ads-space-300) var(--ads-space-150);
  font-size: var(--ads-font-size-400);
  line-height: var(--ads-line-height-400);
  font-weight: var(--ads-font-weight-medium);
  color: var(--ads-text);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ads-space-200);
}
.ads-modal-body {
  padding: 0 var(--ads-space-300);
  overflow-y: auto;
  color: var(--ads-text-subtle);
}
.ads-modal-footer {
  padding: var(--ads-space-300);
  display: flex;
  justify-content: flex-end;
  gap: var(--ads-space-100);
}
.ads-modal-close {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--ads-text-subtle);
  border-radius: var(--ads-radius-100);
  padding: var(--ads-space-050);
  line-height: 0;
}
.ads-modal-close:hover { background: var(--ads-surface-hovered); color: var(--ads-text); }

/* ============================================================
   Card / Box — .ads-card / .ads-box
   ============================================================ */
.ads-card {
  background: var(--ads-surface-raised);
  border: 1px solid var(--ads-border);
  border-radius: var(--ads-radius-300);
  box-shadow: var(--ads-shadow-raised);
  overflow: hidden;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.ads-card-hoverable:hover {
  box-shadow: var(--ads-shadow-overlay);
  border-color: var(--ads-border-bold);
}
.ads-card-header {
  padding: var(--ads-space-200) var(--ads-space-250);
  border-bottom: 1px solid var(--ads-border-subtle);
  font-weight: var(--ads-font-weight-semibold);
  font-size: var(--ads-font-size-200);
  color: var(--ads-text);
}
.ads-card-body {
  padding: var(--ads-space-250);
  color: var(--ads-text-subtle);
}

.ads-box {
  background: var(--ads-surface);
  border: 1px solid var(--ads-border);
  border-radius: var(--ads-radius-200);
  padding: var(--ads-space-200);
}

/* ============================================================
   Lozenge / Badge — .ads-lozenge / .ads-badge
   ============================================================ */
.ads-lozenge {
  display: inline-flex;
  align-items: center;
  height: 16px;
  padding: 0 var(--ads-space-050);
  border-radius: var(--ads-radius-100);
  font-size: var(--ads-font-size-50);
  font-weight: var(--ads-font-weight-bold);
  line-height: 16px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
  /* Default = neutral / subtle */
  background: var(--ads-N40);
  color: var(--ads-N700);
}
.ads-lozenge-success    { background: var(--ads-color-success-subtle); color: var(--ads-color-success-text); }
.ads-lozenge-inprogress { background: var(--ads-color-info-subtle);    color: var(--ads-color-info-text); }
.ads-lozenge-info       { background: var(--ads-color-info-subtle);    color: var(--ads-color-info-text); }
.ads-lozenge-warning    { background: var(--ads-color-warning-subtle); color: var(--ads-color-warning-text); }
.ads-lozenge-danger,
.ads-lozenge-removed     { background: var(--ads-color-danger-subtle);  color: var(--ads-color-danger-text); }
.ads-lozenge-discovery,
.ads-lozenge-new         { background: var(--ads-color-discovery-subtle); color: var(--ads-color-discovery-text); }

/* Bold-Varianten */
.ads-lozenge-bold              { color: #FFFFFF; }
.ads-lozenge-bold.ads-lozenge-success    { background: var(--ads-color-success-bold); }
.ads-lozenge-bold.ads-lozenge-inprogress,
.ads-lozenge-bold.ads-lozenge-info        { background: var(--ads-color-info-bold); }
.ads-lozenge-bold.ads-lozenge-warning     { background: var(--ads-color-warning-bold); color: var(--ads-N800); }
.ads-lozenge-bold.ads-lozenge-danger,
.ads-lozenge-bold.ads-lozenge-removed     { background: var(--ads-color-danger-bold); }
.ads-lozenge-bold.ads-lozenge-discovery,
.ads-lozenge-bold.ads-lozenge-new         { background: var(--ads-color-discovery-bold); }

/* Badge = numerischer Zähler (pill) */
.ads-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 var(--ads-space-050);
  border-radius: var(--ads-radius-pill);
  font-size: var(--ads-font-size-50);
  font-weight: var(--ads-font-weight-bold);
  line-height: 1;
  background: var(--ads-N40);
  color: var(--ads-N700);
}
.ads-badge-primary { background: var(--ads-color-brand); color: #FFFFFF; }
.ads-badge-danger  { background: var(--ads-color-danger); color: #FFFFFF; }
.ads-badge-added   { background: var(--ads-color-success-subtle); color: var(--ads-color-success-text); }

/* ============================================================
   Tabs — .ads-tabs
   ============================================================ */
.ads-tabs {
  display: flex;
  gap: var(--ads-space-050);
  border-bottom: 2px solid var(--ads-border);
}
.ads-tab {
  position: relative;
  appearance: none;
  background: transparent;
  border: none;
  padding: var(--ads-space-100) var(--ads-space-150);
  margin-bottom: -2px;
  font-family: var(--ads-font-family);
  font-size: var(--ads-font-size-100);
  font-weight: var(--ads-font-weight-medium);
  color: var(--ads-text-subtle);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.1s ease, border-color 0.1s ease;
}
.ads-tab:hover { color: var(--ads-text); border-bottom-color: var(--ads-border-bold); }
.ads-tab.is-active,
.ads-tab[aria-selected="true"] {
  color: var(--ads-text-brand);
  font-weight: var(--ads-font-weight-semibold);
  border-bottom-color: var(--ads-color-brand);
}
.ads-tab-panel { padding: var(--ads-space-250) 0; }
.ads-tab-panel[hidden] { display: none; }

/* ============================================================
   Form Fields — .ads-field
   ============================================================ */
.ads-field {
  display: flex;
  flex-direction: column;
  gap: var(--ads-space-050);
  margin-bottom: var(--ads-space-200);
}
.ads-label {
  font-size: var(--ads-font-size-75);
  font-weight: var(--ads-font-weight-bold);
  color: var(--ads-text-subtle);
}
.ads-label .ads-required { color: var(--ads-color-danger); margin-left: 2px; }

.ads-input,
.ads-select,
.ads-textarea {
  box-sizing: border-box;
  width: 100%;
  font-family: var(--ads-font-family);
  font-size: var(--ads-font-size-100);
  color: var(--ads-text);
  background: var(--ads-surface);
  border: 2px solid var(--ads-border-input);
  border-radius: var(--ads-radius-100);
  padding: var(--ads-space-075) var(--ads-space-100);
  transition: background-color 0.1s ease, border-color 0.1s ease;
}
.ads-input  { height: 36px; }
.ads-select { height: 36px; cursor: pointer; }
.ads-textarea { min-height: 80px; resize: vertical; line-height: var(--ads-line-height-200); }

.ads-input:hover,
.ads-select:hover,
.ads-textarea:hover { background: var(--ads-surface-sunken); }

.ads-input:focus,
.ads-select:focus,
.ads-textarea:focus {
  outline: none;
  background: var(--ads-surface);
  border-color: var(--ads-border-focused);
}

.ads-input::placeholder,
.ads-textarea::placeholder { color: var(--ads-text-subtlest); }

.ads-input:disabled,
.ads-select:disabled,
.ads-textarea:disabled {
  background: var(--ads-background-neutral);
  color: var(--ads-text-disabled);
  cursor: not-allowed;
}

.ads-field.is-invalid .ads-input,
.ads-field.is-invalid .ads-select,
.ads-field.is-invalid .ads-textarea { border-color: var(--ads-color-danger); }
.ads-field.is-valid .ads-input,
.ads-field.is-valid .ads-select,
.ads-field.is-valid .ads-textarea { border-color: var(--ads-color-success); }

.ads-field-hint { font-size: var(--ads-font-size-75); color: var(--ads-text-subtlest); }
.ads-field-error { font-size: var(--ads-font-size-75); color: var(--ads-color-danger-text); }

/* Checkbox / Radio */
.ads-checkbox-row {
  display: inline-flex;
  align-items: center;
  gap: var(--ads-space-100);
  cursor: pointer;
  font-size: var(--ads-font-size-100);
  color: var(--ads-text);
}
.ads-checkbox,
.ads-radio { width: 16px; height: 16px; accent-color: var(--ads-color-brand); cursor: pointer; }

/* ============================================================
   Section Message / Banner — .ads-section-message
   Varianten: info | success | warning | error | discovery
   ============================================================ */
.ads-section-message {
  display: flex;
  gap: var(--ads-space-150);
  padding: var(--ads-space-200);
  border-radius: var(--ads-radius-200);
  font-size: var(--ads-font-size-100);
  color: var(--ads-text);
  background: var(--ads-color-info-subtle);
  border: 1px solid transparent;
}
.ads-section-message-icon { flex: 0 0 auto; line-height: 0; margin-top: 1px; }
.ads-section-message-content { flex: 1 1 auto; }
.ads-section-message-title {
  font-weight: var(--ads-font-weight-semibold);
  margin: 0 0 var(--ads-space-050);
}
.ads-section-message-info     { background: var(--ads-color-info-subtle); }
.ads-section-message-info     .ads-section-message-icon { color: var(--ads-color-info-bold); }
.ads-section-message-success  { background: var(--ads-color-success-subtle); }
.ads-section-message-success  .ads-section-message-icon { color: var(--ads-color-success-bold); }
.ads-section-message-warning  { background: var(--ads-color-warning-subtle); }
.ads-section-message-warning  .ads-section-message-icon { color: var(--ads-color-warning-bold); }
.ads-section-message-error    { background: var(--ads-color-danger-subtle); }
.ads-section-message-error    .ads-section-message-icon { color: var(--ads-color-danger-bold); }
.ads-section-message-discovery { background: var(--ads-color-discovery-subtle); }
.ads-section-message-discovery .ads-section-message-icon { color: var(--ads-color-discovery-bold); }

/* ============================================================
   Utility-Helfer (sparsam — keine Tailwind-Emulation)
   ============================================================ */
.ads-stack   { display: flex; flex-direction: column; gap: var(--ads-space-200); }
.ads-inline  { display: flex; align-items: center; gap: var(--ads-space-100); flex-wrap: wrap; }
.ads-spread  { display: flex; align-items: center; justify-content: space-between; gap: var(--ads-space-200); }
.ads-divider { height: 1px; background: var(--ads-border); border: none; margin: var(--ads-space-200) 0; }

/* ============================================================
   Operations UI Kit refinements
   Components keep their stable .ads-* contracts while using the Careli
   visual language defined in ads-tokens.css.
   ============================================================ */
.ads-layout { min-height: 100vh; letter-spacing: -0.01em; }
.ads-h1, .ads-display { font-weight: var(--ads-font-weight-bold); color: var(--ads-text); letter-spacing: -0.035em; }
.ads-h2, .ads-h3, .ads-h4 { font-weight: var(--ads-font-weight-bold); color: var(--ads-color-info-text); letter-spacing: -0.02em; }
.ads-btn {
  height: 40px;
  padding: 0 var(--ads-space-200);
  border: 1px solid var(--ads-border);
  border-radius: var(--ads-radius-300);
  font-weight: var(--ads-font-weight-semibold);
  background: var(--ads-surface);
  color: var(--ads-text-brand);
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.ads-btn:hover { background: var(--ads-color-info-subtle); border-color: var(--ads-color-info); box-shadow: 0 4px 12px rgba(43, 108, 140, 0.12); }
.ads-btn:active { transform: translateY(1px); }
.ads-btn-primary { background: var(--ads-color-brand); border-color: var(--ads-color-brand); color: #fff; box-shadow: 0 4px 10px rgba(255, 79, 121, 0.22); }
.ads-btn-primary:hover { background: var(--ads-color-brand-hover); border-color: var(--ads-color-brand-hover); box-shadow: 0 6px 14px rgba(204, 0, 102, 0.22); }
.ads-btn-subtle { border-color: transparent; color: var(--ads-text-subtle); }
.ads-btn-subtle:hover { background: var(--ads-surface-hovered); border-color: transparent; box-shadow: none; }
.ads-btn-danger { background: var(--ads-color-danger); border-color: var(--ads-color-danger); }
.ads-btn-warning { border-color: var(--ads-color-warning); }
.ads-btn-sm { height: 32px; border-radius: var(--ads-radius-200); }
.ads-btn-lg { height: 48px; border-radius: var(--ads-radius-300); }
.ads-card { border-radius: var(--ads-radius-400); box-shadow: var(--ads-shadow-raised); }
.ads-card-hoverable:hover { box-shadow: var(--ads-shadow-overflow); border-color: rgba(43, 108, 140, 0.35); transform: translateY(-2px); }
.ads-card-header { padding: var(--ads-space-200) var(--ads-space-300); color: var(--ads-color-info-text); font-weight: var(--ads-font-weight-bold); }
.ads-card-body { padding: var(--ads-space-300); }
.ads-box { border-radius: var(--ads-radius-300); }
.ads-nav { width: 264px; padding: var(--ads-space-200) var(--ads-space-100); background: var(--ads-surface); border-right-color: var(--ads-border-subtle); }
.ads-nav-section-title { margin-top: var(--ads-space-100); color: var(--ads-text-subtlest); font-size: 10px; letter-spacing: 0.08em; }
.ads-nav-item { min-height: 40px; border-radius: var(--ads-radius-200); font-weight: var(--ads-font-weight-medium); }
.ads-nav-item:hover { background: rgba(224, 237, 245, 0.72); color: var(--ads-color-info-text); }
.ads-nav-item.is-active, .ads-nav-item[aria-current="page"] { background: var(--ads-color-brand-subtle); color: var(--mid-berry); box-shadow: inset 3px 0 0 var(--ads-color-brand); }
.ads-table thead th { background: rgba(248, 250, 252, 0.82); color: var(--ads-color-info-text); padding: var(--ads-space-150) var(--ads-space-200); border-bottom-color: var(--ads-border); }
.ads-table tbody td { padding: var(--ads-space-150) var(--ads-space-200); }
.ads-table tbody tr:hover { background: rgba(224, 237, 245, 0.35); }
.ads-table-compact thead th, .ads-table-compact tbody td { padding: var(--ads-space-100) var(--ads-space-150); }
.ads-lozenge { height: 22px; padding: 0 var(--ads-space-100); border-radius: var(--ads-radius-100); font-size: 10px; letter-spacing: 0.03em; background: var(--ads-background-neutral); color: var(--ads-text-subtle); }
.ads-badge { min-width: 20px; height: 20px; padding: 0 var(--ads-space-075); background: var(--ads-color-brand-subtle); color: var(--mid-berry); }
.ads-tabs { gap: var(--ads-space-150); border-bottom: 1px solid var(--ads-border); }
.ads-tab { padding: var(--ads-space-150) var(--ads-space-050); font-weight: var(--ads-font-weight-semibold); }
.ads-tab.is-active, .ads-tab[aria-selected="true"] { color: var(--ads-text-brand); border-bottom-color: var(--ads-color-brand); }
.ads-input, .ads-select, .ads-textarea { min-height: 42px; border-width: 1px; border-radius: var(--ads-radius-300); padding: var(--ads-space-100) var(--ads-space-150); }
.ads-input:focus, .ads-select:focus, .ads-textarea:focus { border-color: var(--ads-border-focused); box-shadow: var(--ads-shadow-focus); }
.ads-section-message { border-radius: var(--ads-radius-300); padding: var(--ads-space-200) var(--ads-space-250); border-color: transparent; }
.ads-modal-overlay { background: rgba(43, 108, 140, 0.40); backdrop-filter: blur(4px); }
.ads-modal { border-radius: var(--ads-radius-400); box-shadow: var(--ads-shadow-overlay); }
.ads-modal-header { color: var(--ads-color-info-text); font-weight: var(--ads-font-weight-bold); }

/* Careli signature text marker, as used in the authoritative web templates. */
.ads-brush-pink {
  position: relative;
  z-index: 0;
  display: inline-block;
  color: var(--ads-color-brand);
}
.ads-brush-pink::before {
  position: absolute;
  z-index: -1;
  right: -0.08em;
  bottom: 0.12em;
  left: -0.08em;
  height: 0.42em;
  content: "";
  border-radius: 999px 18px 999px 22px;
  background: var(--mid-pink-brush);
  transform: rotate(-1.8deg);
}